Merge remote-tracking branch 'origin' into feature/turbo-yarn

siemens · Aug 31, 2022 · b17a99e · b17a99e
2 parents 2ade1c0 + dfa4001
commit b17a99e
Show file tree

Hide file tree

Showing 13 changed files with 220 additions and 8 deletions.
diff --git a/packages/angular-test-app/angular.json b/packages/angular-test-app/angular.json
@@ -39,6 +39,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
+            "preserveSymlinks": true,
             "outputPath": "dist/angular-test-app",
             "index": "src/index.html",
             "main": "src/main.ts",

diff --git a/packages/angular-test-app/src/app/app-routing.module.ts b/packages/angular-test-app/src/app/app-routing.module.ts
@@ -4,8 +4,14 @@ import { AGGrid } from 'src/preview-examples/aggrid';
 import { BasicNavigation } from 'src/preview-examples/basic-navigation';
 import { ButtonGroup } from 'src/preview-examples/button-group';
 import { Buttons } from 'src/preview-examples/buttons';
+import { Modal } from 'src/preview-examples/modal';
 
 const routes: Routes = [
+  {
+    path: '',
+    pathMatch: 'full',
+    redirectTo: 'preview/buttons',
+  },
   {
     path: 'preview',
     children: [
@@ -25,6 +31,10 @@ const routes: Routes = [
         path: 'basic-navigation',
         component: BasicNavigation,
       },
+      {
+        path: 'modal',
+        component: Modal,
+      },
     ],
   },
 ];

diff --git a/packages/angular-test-app/src/app/app.module.ts b/packages/angular-test-app/src/app/app.module.ts
@@ -11,9 +11,17 @@ import { Buttons } from 'src/preview-examples/buttons';
 
 import { AgGridModule } from 'ag-grid-angular';
 import { BasicNavigation } from 'src/preview-examples/basic-navigation';
+import { Modal } from 'src/preview-examples/modal';
 
 @NgModule({
-  declarations: [AppComponent, Buttons, ButtonGroup, AGGrid, BasicNavigation],
+  declarations: [
+    AppComponent,
+    Buttons,
+    ButtonGroup,
+    AGGrid,
+    BasicNavigation,
+    Modal,
+  ],
   imports: [
     BrowserModule,
     AppRoutingModule,

diff --git a/packages/angular-test-app/src/preview-examples/modal.ts b/packages/angular-test-app/src/preview-examples/modal.ts
@@ -0,0 +1,63 @@
+/*
+ * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
+ */
+import { Component, TemplateRef, ViewChild } from '@angular/core';
+import { ModalService } from '@siemens/ix-angular/dist';
+
+@Component({
+  selector: 'app-modal',
+  template: `
+    <div>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet.
+    </div>
+    <ix-button (click)="test()">Show Modal</ix-button>
+
+    <ng-template #customModal let-modal>
+      <div>
+        <div class="modal-header">
+          Message headline
+          <ix-icon-button
+            ghost
+            icon="close"
+            class="dismiss-modal"
+            (click)="modal.dismiss('dismiss')"
+          ></ix-icon-button>
+        </div>
+        <div class="modal-body">Message text lorem ipsum</div>
+        <div class="modal-footer">
+          <ix-button
+            outline
+            class="dismiss-modal"
+            (click)="modal.dismiss('dismiss')"
+          >
+            Cancel
+          </ix-button>
+          <ix-button class="close-modal" (click)="modal.close('okay')"
+            >OK</ix-button
+          >
+        </div>
+      </div>
+    </ng-template>
+  `,
+})
+export class Modal {
+  @ViewChild('customModal', { read: TemplateRef })
+  customModalRef!: TemplateRef<any>;
+
+  constructor(private readonly modalService: ModalService) {}
+
+  async test() {
+    const instance = await this.modalService.open({
+      content: this.customModalRef,
+      title: '',
+    });
+
+    instance.onClose.on((a) => {
+      console.log(a);
+    });
+  }
+}
diff --git a/packages/angular-test-app/tsconfig.json b/packages/angular-test-app/tsconfig.json
@@ -21,12 +21,16 @@
     "lib": [
       "es2020",
       "dom"
-    ]
+    ],
+    "preserveSymlinks": true,
+    "paths": { "@angular/*": [ "./node_modules/@angular/*" ] }
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
-    "strictTemplates": true
+    "strictTemplates": true,
+    "preserveSymlinks": true
+
   }
 }
diff --git a/packages/angular/package.json b/packages/angular/package.json
@@ -22,7 +22,7 @@
     "@angular/core": "^14.2.0",
     "@siemens/ix": "~1.0.0-beta.0",
     "fs-extra": "^10.1.0",
-    "ng-packagr": "^14.0.2",
+    "ng-packagr": "^14.2.0",
     "typescript": "^4.7.4"
   },
   "publishConfig": {

diff --git a/packages/angular/src/index.ts b/packages/angular/src/index.ts
@@ -4,4 +4,5 @@
 
 export * from '@siemens/ix';
 export * from './components';
+export * from './modal';
 export * from './module';
diff --git a/packages/angular/src/modal/index.ts b/packages/angular/src/modal/index.ts
@@ -0,0 +1,4 @@
+/*
+ * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
+ */
+export * from './modal.service';
diff --git a/packages/angular/src/modal/modal.config.ts b/packages/angular/src/modal/modal.config.ts
@@ -0,0 +1,8 @@
+/*
+ * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
+ */
+import { TemplateRef } from '@angular/core';
+
+export type ModalConfig = {
+  content: TemplateRef<any>;
+};
diff --git a/packages/angular/src/modal/modal.service.ts b/packages/angular/src/modal/modal.service.ts
@@ -0,0 +1,58 @@
+/*
+ * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
+ */
+import { Injectable } from '@angular/core';
+import {
+  closeModal,
+  dismissModal,
+  modal,
+  ModalConfig as IxModalConfig,
+} from '@siemens/ix';
+import { ModalConfig } from './modal.config';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ModalService {
+  constructor() {}
+
+  async open(config: Omit<IxModalConfig, 'content'> & ModalConfig) {
+    const context: {
+      close: ((result: any) => void) | null;
+      dismiss: ((result?: any) => void) | null;
+    } = {
+      close: null,
+      dismiss: null,
+    };
+    const embeddedView = config.content.createEmbeddedView({
+      $implicit: context,
+    });
+
+    const node = embeddedView.rootNodes[0];
+
+    context.close = (result: any) => {
+      closeModal(node, result);
+    };
+
+    context.dismiss = (result?: any) => {
+      dismissModal(node, result);
+    };
+
+    embeddedView.detectChanges();
+
+    const modalInstance = await modal({
+      title: '',
+      content: node,
+    });
+
+    modalInstance.onClose.once(() => {
+      embeddedView.destroy();
+    });
+
+    modalInstance.onDismiss.once(() => {
+      embeddedView.destroy();
+    });
+
+    return modalInstance;
+  }
+}
diff --git a/packages/angular/src/module.ts b/packages/angular/src/module.ts
@@ -2,9 +2,15 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 import { DOCUMENT } from '@angular/common';
-import { APP_INITIALIZER, ModuleWithProviders, NgModule, NgZone } from '@angular/core';
+import {
+  APP_INITIALIZER,
+  ModuleWithProviders,
+  NgModule,
+  NgZone,
+} from '@angular/core';
 import { appInitialize } from './app-initialize';
 import { DIRECTIVES } from './declare-components';
+import { ModalService } from './modal';
 const DECLARATIONS = [...DIRECTIVES];
 
 @NgModule({
@@ -22,6 +28,7 @@ export class CoreUIModule {
           multi: true,
           deps: [DOCUMENT, NgZone],
         },
+        ModalService,
       ],
     };
   }

diff --git a/packages/documentation/docs/auto-generated/previews/angular/modal.md b/packages/documentation/docs/auto-generated/previews/angular/modal.md
@@ -3,7 +3,8 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-import { Component } from '@angular/core';
+import { Component, TemplateRef, ViewChild } from '@angular/core';
+import { ModalService } from '@siemens/ix-angular/dist';
 
 @Component({
   selector: 'app-modal',
@@ -15,8 +16,51 @@ import { Component } from '@angular/core';
       clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
       amet.
     </div>
-    <ix-button>Show Modal</ix-button>
+    <ix-button (click)="test()">Show Modal</ix-button>
+
+    <ng-template #customModal let-modal>
+      <div>
+        <div class="modal-header">
+          Message headline
+          <ix-icon-button
+            ghost
+            icon="close"
+            class="dismiss-modal"
+            (click)="modal.dismiss('dismiss')"
+          ></ix-icon-button>
+        </div>
+        <div class="modal-body">Message text lorem ipsum</div>
+        <div class="modal-footer">
+          <ix-button
+            outline
+            class="dismiss-modal"
+            (click)="modal.dismiss('dismiss')"
+          >
+            Cancel
+          </ix-button>
+          <ix-button class="close-modal" (click)="modal.close('okay')"
+            >OK</ix-button
+          >
+        </div>
+      </div>
+    </ng-template>
   `,
 })
-export class Modal {}
+export class Modal {
+  @ViewChild('customModal', { read: TemplateRef })
+  customModalRef!: TemplateRef<any>;
+
+  constructor(private readonly modalService: ModalService) {}
+
+  async test() {
+    const instance = await this.modalService.open({
+      content: this.customModalRef,
+      title: '',
+    });
+
+    instance.onClose.on((a) => {
+      console.log(a);
+    });
+  }
+}
 ```
diff --git a/packages/documentation/docs/controls/modal.md b/packages/documentation/docs/controls/modal.md
@@ -3,6 +3,7 @@ import Preview from '@site/src/components/Preview';
 
 import SourceModal from './../auto-generated/previews/web-component/modal.md'
 import SourceReactModal from './../auto-generated/previews/react/modal.md'
+import SourceAngularModal from './../auto-generated/previews/angular/modal.md'
 
 # Modal
 
@@ -15,4 +16,7 @@ import SourceReactModal from './../auto-generated/previews/react/modal.md'
   <TabItem value="react">
     <SourceReactModal />
   </TabItem>
+  <TabItem value="angular">
+    <SourceAngularModal />
+  </TabItem>
 </Preview>