feat(core/modal): migrate to shadow dom (#648)

.gitignore

@@ -164,6 +164,7 @@ packages/html-test-app/src/public/additional-theme
 ###
 
 packages/documentation/docs/auto-generated/
+packages/documentation/scripts/.typedoc/
 packages/documentation/static/auto-generated/
 packages/documentation/static/webcomponent-examples/*
 !packages/documentation/static/versioned_examples/*/webcomponent-examples

BREAKING_CHANGES.md

@@ -33,6 +33,78 @@ export declare type AutoPlacement = 'auto' | 'auto-start' | 'auto-end';
 
 Placement will be automatically chosen depending on remaining space. If you want to suppress the automatic behavior you can set the property `suppress-automatic-placement`.
 
+### Modal
+
+#### Function to display modal renamed
+
+This breaking change only affects the function `modal` which is exported from `@siemens/ix` (not `@siemens/ix-angular` etc).
+
+___Before___
+
+```ts
+export async function modal<T = any>( config: ModalConfig<T>): Promise<ModalInstance<T>>
+```
+
+___Now___
+```ts
+export async function showModal<T = any>( config: ModalConfig<T>): Promise<ModalInstance<T>>
+```
+
+
+#### Container component `ix-modal-container` removed 
+
+Container is not needed anymore because the iX modal system is using `HTMLDialog` now as
+basic system to open modal dialogs
+
+#### Property `size` changed
+
+___Before___
+
+```ts
+export type IxModalSize = 'sm' | 'lg' | 'xl';
+```
+
+___Now___
+
+```ts
+export type IxModalFixedSize = '360' | '480' | '600' | '720' | '840';
+export type IxModalDynamicSize = 'full-width';
+export type IxModalSize = IxModalFixedSize | IxModalDynamicSize;
+```
+
+#### Property ModalConfig changed/adapted
+
+- `scrollable` is removed, no successor
+- `modalDialogClass` is removed, no successor
+- `windowClass` is removed, no successor
+- `content` is now generic
+- `backdrop = 'static'` removed, successor will be `closeOnBackdropClick`.
+
+___Before___
+
+```tsx
+const config: ModalConfig = {
+  // Other properties
+  backdrop: 'static'
+}
+```
+
+___Now___
+
+```tsx
+const config: ModalConfig = {
+  // Other properties
+  backdrop: true // `true` is default
+  closeOnBackdropClick: true
+}
+```
+
+- `icon` and `iconColor` were removed, successor is the `ix-modal-header` component.
+
+#### Property `backdropClass` removed
+
+To get a consistent UI design we decided to remove custom backdrops.
+
 ### `ix-flip-tile`
 
 Change flip-state from

packages/angular-test-app/src/preview-examples/modal-by-instance-content.ts

@@ -11,20 +11,12 @@ import { Component } from '@angular/core';
 import { IxActiveModal } from '@siemens/ix-angular';
 
 @Component({
-  template: `<div class="modal-header">
-      Message headline
-      <ix-icon-button
-        data-button-close
-        ghost
-        icon="close"
-        class="dismiss-modal"
-        (click)="activeModal.dismiss('dismiss')"
-      ></ix-icon-button>
-    </div>
-    <div class="modal-body">
+  template: `
+    <ix-modal-header> Message headline </ix-modal-header>
+    <ix-modal-content>
       Message text lorem ipsum: {{ activeModal.data }}
-    </div>
-    <div class="modal-footer">
+    </ix-modal-content>
+    <ix-modal-footer>
       <ix-button
         outline
         class="dismiss-modal"
@@ -35,7 +27,8 @@ import { IxActiveModal } from '@siemens/ix-angular';
       <ix-button class="close-modal" (click)="activeModal.close('okay')">
         OK
       </ix-button>
-    </div>`,
+    </ix-modal-footer>
+  `,
 })
 export default class ModalByInstanceContent {
   constructor(readonly activeModal: IxActiveModal) {}

packages/angular-test-app/src/preview-examples/modal-by-instance.ts

@@ -21,7 +21,6 @@ export default class ModalByInstance {
   async openModal() {
     await this.modalService.open({
       content: ModalByInstanceExample,
-      title: '',
       data: 'Some data',
     });
   }

packages/angular-test-app/src/preview-examples/modal-by-template.ts

@@ -17,18 +17,11 @@ import { ModalService } from '@siemens/ix-angular';
 
     <ng-template #customModal let-modal>
       <div>
-        <div class="modal-header">
-          Message headline
-          <ix-icon-button
-            data-button-close
-            ghost
-            icon="close"
-            class="dismiss-modal"
-            (click)="modal.dismiss('dismiss')"
-          ></ix-icon-button>
-        </div>
-        <div class="modal-body">Message text lorem ipsum: {{ modal.data }}</div>
-        <div class="modal-footer">
+        <ix-modal-header> Message headline </ix-modal-header>
+        <ix-modal-content
+          >Message text lorem ipsum: {{ modal.data }}</ix-modal-content
+        >
+        <ix-modal-footer>
           <ix-button
             outline
             class="dismiss-modal"
@@ -39,7 +32,7 @@ import { ModalService } from '@siemens/ix-angular';
           <ix-button class="close-modal" (click)="modal.close('okay')">
             OK
           </ix-button>
-        </div>
+        </ix-modal-footer>
       </div>
     </ng-template>
   `,
@@ -53,7 +46,6 @@ export default class Modal {
   async openModal() {
     const instance = await this.modalService.open({
       content: this.customModalRef,
-      title: '',
       data: 'Some data',
     });
 

packages/angular/src/components.ts

@@ -1549,49 +1549,48 @@ export declare interface IxMessageBar extends Components.IxMessageBar {
 
 
 @ProxyCmp({
-  inputs: ['animation', 'ariaDescribedBy', 'ariaLabelledBy', 'backdrop', 'backdropClass', 'beforeDismiss', 'centered', 'content', 'headerTitle', 'icon', 'iconColor', 'keyboard', 'modalDialogClass', 'scrollable', 'size', 'windowClass'],
-  methods: ['dismiss', 'close']
+  inputs: ['animation', 'backdrop', 'beforeDismiss', 'centered', 'closeOnBackdropClick', 'keyboard', 'size'],
+  methods: ['showModal', 'dismissModal', 'closeModal']
 })
 @Component({
   selector: 'ix-modal',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['animation', 'ariaDescribedBy', 'ariaLabelledBy', 'backdrop', 'backdropClass', 'beforeDismiss', 'centered', 'content', 'headerTitle', 'icon', 'iconColor', 'keyboard', 'modalDialogClass', 'scrollable', 'size', 'windowClass'],
+  inputs: ['animation', 'backdrop', 'beforeDismiss', 'centered', 'closeOnBackdropClick', 'keyboard', 'size'],
 })
 export class IxModal {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['closed', 'dismissed']);
+    proxyOutputs(this, this.el, ['dialogClose', 'dialogDismiss']);
   }
 }
 
 
 export declare interface IxModal extends Components.IxModal {
   /**
-   * Modal closed
+   * Dialog close
    */
-  closed: EventEmitter<CustomEvent<any>>;
+  dialogClose: EventEmitter<CustomEvent<any>>;
   /**
-   * Modal dismissed
+   * Dialog cancel
    */
-  dismissed: EventEmitter<CustomEvent<any>>;
+  dialogDismiss: EventEmitter<CustomEvent<any>>;
 }
 
 
 @ProxyCmp({
-  methods: ['showModal']
 })
 @Component({
-  selector: 'ix-modal-container',
+  selector: 'ix-modal-content',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
   inputs: [],
 })
-export class IxModalContainer {
+export class IxModalContent {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -1600,7 +1599,7 @@ export class IxModalContainer {
 }
 
 
-export declare interface IxModalContainer extends Components.IxModalContainer {}
+export declare interface IxModalContent extends Components.IxModalContent {}
 
 
 @ProxyCmp({
@@ -1624,6 +1623,55 @@ export class IxModalExample {
 export declare interface IxModalExample extends Components.IxModalExample {}
 
 
+@ProxyCmp({
+})
+@Component({
+  selector: 'ix-modal-footer',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: [],
+})
+export class IxModalFooter {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface IxModalFooter extends Components.IxModalFooter {}
+
+
+@ProxyCmp({
+  inputs: ['hideClose', 'icon', 'iconColor']
+})
+@Component({
+  selector: 'ix-modal-header',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['hideClose', 'icon', 'iconColor'],
+})
+export class IxModalHeader {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['closeClick']);
+  }
+}
+
+
+export declare interface IxModalHeader extends Components.IxModalHeader {
+  /**
+   * Close icon is clicked
+   */
+  closeClick: EventEmitter<CustomEvent<MouseEvent>>;
+}
+
+
 @ProxyCmp({
   inputs: ['advanced', 'count', 'i18nItems', 'i18nOf', 'i18nPage', 'itemCount', 'selectedPage', 'showItemCount']
 })

packages/angular/src/declare-components.ts

@@ -62,8 +62,10 @@ export const DIRECTIVES = [
   d.IxMenuSettingsItem,
   d.IxMessageBar,
   d.IxModal,
-  d.IxModalContainer,
+  d.IxModalContent,
   d.IxModalExample,
+  d.IxModalFooter,
+  d.IxModalHeader,
   d.IxPagination,
   d.IxPill,
   d.IxPushCard,

packages/angular/src/modal/modal.service.spec.ts

@@ -11,7 +11,7 @@ import { IxActiveModal } from './modal-ref';
 import { ModalService } from './modal.service';
 
 jest.mock('@siemens/ix', () => ({
-  modal: jest.fn(() =>
+  showModal: jest.fn(() =>
     Promise.resolve({
       onClose: {
         once: jest.fn(),
@@ -34,7 +34,6 @@ test('should create modal by templateRef', () => {
     content: {
       createEmbeddedView: createEmbeddedViewMock,
     } as any,
-    title: '',
     data: {
       sample: 'test',
     },
@@ -78,7 +77,6 @@ test('should create modal by component typ', async () => {
 
   await modalService.open({
     content: TestComponent,
-    title: '',
     data: {
       foo: 'bar',
     },

packages/angular/src/modal/modal.service.ts

@@ -15,7 +15,7 @@ import {
   Injector,
   Type,
 } from '@angular/core';
-import { closeModal, dismissModal, modal } from '@siemens/ix';
+import { closeModal, dismissModal, showModal } from '@siemens/ix';
 import { InternalIxActiveModal, IxActiveModal } from './modal-ref';
 import { ModalConfig } from './modal.config';
 
@@ -128,9 +128,8 @@ export class ModalService {
 
     embeddedView.detectChanges();
 
-    const modalInstance = await modal<TReason>({
+    const modalInstance = await showModal<TReason>({
       ...config,
-      title: '',
       content: node,
     });