+
diff --git a/projects/overlays/src/components/modal/components/modal-layout-title/modal-layout-title.component.scss b/projects/overlays/src/components/modal/components/modal-layout-title/modal-layout-title.component.scss
index 65a8b8094..96271a178 100644
--- a/projects/overlays/src/components/modal/components/modal-layout-title/modal-layout-title.component.scss
+++ b/projects/overlays/src/components/modal/components/modal-layout-title/modal-layout-title.component.scss
@@ -2,17 +2,14 @@
@use 'mixins' as *;
:host {
- display: block;
+ display: flex;
+ align-items: center;
flex: 1;
@include font-type-medium;
@include font-size-l;
- color: color(neutral-1000);
-
- @include host-selector-dark-theme {
- color: color(neutral-1);
- }
+ color: semantic-color(text-primary);
}
.content-wrapper {
diff --git a/projects/overlays/src/components/modal/components/modal-layout-title/modal-layout-title.component.ts b/projects/overlays/src/components/modal/components/modal-layout-title/modal-layout-title.component.ts
index c2652cf4a..f5847e160 100644
--- a/projects/overlays/src/components/modal/components/modal-layout-title/modal-layout-title.component.ts
+++ b/projects/overlays/src/components/modal/components/modal-layout-title/modal-layout-title.component.ts
@@ -1,4 +1,12 @@
-import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
+import {
+ Component,
+ ViewEncapsulation,
+ ChangeDetectionStrategy,
+ ViewChild,
+ ElementRef,
+ AfterContentInit,
+} from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
@Component({
selector: 'pupa-modal-layout-title',
@@ -7,4 +15,20 @@ import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/
encapsulation: ViewEncapsulation.Emulated,
changeDetection: ChangeDetectionStrategy.OnPush,
})
-export class ModalLayoutTitleComponent {}
+export class ModalLayoutTitleComponent implements AfterContentInit {
+ @ViewChild('title', { static: true }) public title: ElementRef
;
+
+ public readonly isTooltipDisabled$: BehaviorSubject = new BehaviorSubject(true);
+
+ public readonly titleText$: BehaviorSubject = new BehaviorSubject('');
+
+ public ngAfterContentInit(): void {
+ this.isTooltipDisabled$.next(!this.isEllipsisActive());
+ this.titleText$.next(this.title.nativeElement.innerText);
+ }
+
+ public isEllipsisActive(): boolean {
+ const titleElement: HTMLElement = this.title.nativeElement;
+ return titleElement.scrollHeight > titleElement.offsetHeight;
+ }
+}
diff --git a/projects/overlays/src/components/modal/components/modal-layout/modal-layout.component.html b/projects/overlays/src/components/modal/components/modal-layout/modal-layout.component.html
index 28a085e4f..858d7850a 100644
--- a/projects/overlays/src/components/modal/components/modal-layout/modal-layout.component.html
+++ b/projects/overlays/src/components/modal/components/modal-layout/modal-layout.component.html
@@ -2,6 +2,8 @@
class="modal-layout"
[class.modal-layout_no-footer]="!(withFooter$ | async)"
[class.modal-layout_no-title]="!(withTitle$ | async)"
+ [class.modal-layout_no-header]="!(withHeader$ | async)"
+ [class.modal-layout_no-border]="!withBorder"
tabindex="0"
pupaAutofocus
>
diff --git a/projects/overlays/src/components/modal/components/modal-layout/modal-layout.component.scss b/projects/overlays/src/components/modal/components/modal-layout/modal-layout.component.scss
index 8649cffaf..223ba6a1d 100644
--- a/projects/overlays/src/components/modal/components/modal-layout/modal-layout.component.scss
+++ b/projects/overlays/src/components/modal/components/modal-layout/modal-layout.component.scss
@@ -6,14 +6,12 @@
:host {
display: block;
overflow: hidden;
- max-height: 500px;
max-width: 500px;
- border: 1px solid color(neutral-7);
+ border: 1px solid semantic-color(lines-normal);
border-radius: calc($controlBorderRadius + 1rem);
box-shadow: 0px 4px 24px rgba(0, 29, 41, 0.04);
@include host-selector-dark-theme {
- border: 1px solid color(neutral-300);
box-shadow: 0px 4px 24px rgba(0, 23, 32, 0.12);
}
@@ -42,15 +40,15 @@
height: 100%;
max-width: inherit;
max-height: inherit;
+ min-height: inherit;
overflow: hidden;
box-sizing: border-box;
display: flex;
flex-direction: column;
background-color: color(neutral-1);
- padding: 5rem;
@include xs() {
- padding: 0px;
+ padding: 0;
}
@include host-selector-dark-theme {
diff --git a/projects/overlays/src/components/modal/components/modal-layout/modal-layout.component.ts b/projects/overlays/src/components/modal/components/modal-layout/modal-layout.component.ts
index 51bbdae5f..a9fc10b83 100644
--- a/projects/overlays/src/components/modal/components/modal-layout/modal-layout.component.ts
+++ b/projects/overlays/src/components/modal/components/modal-layout/modal-layout.component.ts
@@ -1,7 +1,18 @@
-import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChild, ViewEncapsulation } from '@angular/core';
+import {
+ AfterContentInit,
+ ChangeDetectionStrategy,
+ Component,
+ ContentChild,
+ HostBinding,
+ Inject,
+ ViewEncapsulation,
+} from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { ModalLayoutFooterComponent } from '../modal-layout-footer/modal-layout-footer.component';
import { ModalLayoutTitleComponent } from '../modal-layout-title/modal-layout-title.component';
+import { ModalLayoutHeaderComponent } from '../modal-layout-header/modal-layout-header.component';
+import { ModalRef } from '../../../../declarations/classes/modal-ref.class';
+import { ModalHeightType } from '../../../../declarations/types/modal-height.type';
@Component({
selector: 'pupa-modal-layout',
@@ -19,9 +30,20 @@ export class ModalLayoutComponent implements AfterContentInit {
public readonly withTitle$: BehaviorSubject = new BehaviorSubject(false);
+ @ContentChild(ModalLayoutHeaderComponent) public modalLayoutHeaderComponent: ModalLayoutHeaderComponent;
+
+ public readonly withHeader$: BehaviorSubject = new BehaviorSubject(false);
+
+ public readonly withBorder: boolean = this.modalRef.hasBorder;
+
+ @HostBinding('attr.height') public readonly modalHeight: ModalHeightType = this.modalRef.height;
+
+ constructor(@Inject(ModalRef) public readonly modalRef: ModalRef) {}
+
public ngAfterContentInit(): void {
this.processWithTitleChange();
this.processWithFooterChange();
+ this.processWithHeaderChange();
}
private processWithTitleChange(): void {
@@ -33,4 +55,9 @@ export class ModalLayoutComponent implements AfterContentInit {
const withFooter: boolean = this.modalLayoutFooterComponent !== undefined;
this.withFooter$.next(withFooter);
}
+
+ private processWithHeaderChange(): void {
+ const withHeader: boolean = this.modalLayoutHeaderComponent !== undefined;
+ this.withHeader$.next(withHeader);
+ }
}
diff --git a/projects/overlays/src/components/modal/modal.module.ts b/projects/overlays/src/components/modal/modal.module.ts
index a191ebfd4..d12c28816 100644
--- a/projects/overlays/src/components/modal/modal.module.ts
+++ b/projects/overlays/src/components/modal/modal.module.ts
@@ -2,7 +2,12 @@ import { OverlayModule } from '@angular/cdk/overlay';
import { PortalModule } from '@angular/cdk/portal';
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { PupaButtonsModule, PupaScrollableModule, PupaThemeWrapperModule } from '@bimeister/pupakit.kit';
+import {
+ PupaButtonsModule,
+ PupaScrollableModule,
+ PupaThemeWrapperModule,
+ PupaTooltipModule,
+} from '@bimeister/pupakit.kit';
import { ModalButtonIconComponent } from './components/modal-button-icon/modal-button-icon.component';
import { ModalCloseButtonComponent } from './components/modal-close-button/modal-close-button.component';
import { ModalContainerComponent } from './components/modal-container/modal-container.component';
@@ -31,7 +36,15 @@ import { ModalLayoutComponent } from './components/modal-layout/modal-layout.com
ModalCloseButtonComponent,
ModalExpandButtonComponent,
],
- imports: [CommonModule, PupaButtonsModule, OverlayModule, PortalModule, PupaThemeWrapperModule, PupaScrollableModule],
+ imports: [
+ CommonModule,
+ PupaButtonsModule,
+ OverlayModule,
+ PortalModule,
+ PupaThemeWrapperModule,
+ PupaScrollableModule,
+ PupaTooltipModule,
+ ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
exports: [
ModalLayoutComponent,
diff --git a/projects/overlays/src/declarations/classes/dto/modal-config.dto.ts b/projects/overlays/src/declarations/classes/dto/modal-config.dto.ts
index a9f4cb119..e0e2b81ad 100644
--- a/projects/overlays/src/declarations/classes/dto/modal-config.dto.ts
+++ b/projects/overlays/src/declarations/classes/dto/modal-config.dto.ts
@@ -4,6 +4,7 @@ import { ModalConfig } from '../../interfaces/modal-config.interface';
import { ConnectedPositionX } from '../../types/connected-position-x.type';
import { ConnectedPositionY } from '../../types/connected-position-y.type';
import { Position, Theme } from '@bimeister/pupakit.common';
+import { ModalHeightType } from '../../types/modal-height.type';
export class ModalConfigDto implements ModalConfig {
public hasBackdrop: boolean = true;
@@ -17,8 +18,9 @@ export class ModalConfigDto implements ModalConfig {
public providers: StaticProvider[] = [];
public theme: Theme = Theme.Light;
public width: number | string = 0;
- public height: number = 0;
+ public height: ModalHeightType = '';
public isFullscreen: boolean = false;
+ public hasBorder: boolean = false;
constructor(config: Partial) {
if (isNil(config)) {
diff --git a/projects/overlays/src/declarations/classes/modal-ref.class.ts b/projects/overlays/src/declarations/classes/modal-ref.class.ts
index d8e76eccd..b16f58129 100644
--- a/projects/overlays/src/declarations/classes/modal-ref.class.ts
+++ b/projects/overlays/src/declarations/classes/modal-ref.class.ts
@@ -4,6 +4,7 @@ import { BehaviorSubject, Observable, Subject } from 'rxjs';
import { ModalConfig } from '../interfaces/modal-config.interface';
import { ConnectedPositionX } from '../types/connected-position-x.type';
import { ConnectedPositionY } from '../types/connected-position-y.type';
+import { ModalHeightType } from '../types/modal-height.type';
export class ModalRef {
public readonly closed$: Subject = new Subject();
@@ -52,7 +53,11 @@ export class ModalRef {
this.toTopLayerMoved$.complete();
}
- public get size(): string | null {
- return this.config.size;
+ public get height(): ModalHeightType {
+ return this.config.height;
+ }
+
+ public get hasBorder(): boolean {
+ return this.config.hasBorder;
}
}
diff --git a/projects/overlays/src/declarations/interfaces/modal-config.interface.ts b/projects/overlays/src/declarations/interfaces/modal-config.interface.ts
index 5568d0eef..ef92ed540 100644
--- a/projects/overlays/src/declarations/interfaces/modal-config.interface.ts
+++ b/projects/overlays/src/declarations/interfaces/modal-config.interface.ts
@@ -16,6 +16,6 @@ export interface ModalConfig {
injector: Injector;
providers: StaticProvider[];
isFullscreen?: boolean;
- height: number;
- size?: ModalHeightType;
+ height?: ModalHeightType;
+ hasBorder?: boolean;
}
diff --git a/projects/overlays/src/declarations/types/modal-height.type.ts b/projects/overlays/src/declarations/types/modal-height.type.ts
index 91ddebbde..679b32f6e 100644
--- a/projects/overlays/src/declarations/types/modal-height.type.ts
+++ b/projects/overlays/src/declarations/types/modal-height.type.ts
@@ -1 +1 @@
-export type ModalHeightType = 'xs' | 's' | 'm' | 'l';
+export type ModalHeightType = 'xs' | 's' | 'm' | 'l' | '';