@siemens/ix-angular 1.0.0-beta.2

package/src/declare-components.ts

@@ -0,0 +1,68 @@
+
+import * as d from './components';
+
+export const DIRECTIVES = [
+  d.IxAnimatedTab,
+  d.IxAnimatedTabs,
+  d.IxApplicationHeader,
+  d.IxBasicNavigation,
+  d.IxBlind,
+  d.IxBreadcrumb,
+  d.IxBreadcrumbItem,
+  d.IxButton,
+  d.IxCategoryFilter,
+  d.IxChip,
+  d.IxCounterPill,
+  d.IxDatePicker,
+  d.IxDateTimeCard,
+  d.IxDatetimePicker,
+  d.IxDrawer,
+  d.IxDropdown,
+  d.IxDropdownItem,
+  d.IxEventList,
+  d.IxEventListItem,
+  d.IxExpandingSearch,
+  d.IxFilterChip,
+  d.IxFlipTile,
+  d.IxFlipTileContent,
+  d.IxGroup,
+  d.IxGroupDropdownItem,
+  d.IxGroupItem,
+  d.IxIcon,
+  d.IxIconButton,
+  d.IxInputGroup,
+  d.IxKpi,
+  d.IxMapNavigation,
+  d.IxMapNavigationOverlay,
+  d.IxMenu,
+  d.IxMenuAbout,
+  d.IxMenuAboutItem,
+  d.IxMenuAboutNews,
+  d.IxMenuAvatar,
+  d.IxMenuAvatarItem,
+  d.IxMenuItem,
+  d.IxMenuSettings,
+  d.IxMenuSettingsItem,
+  d.IxMessageBar,
+  d.IxModal,
+  d.IxModalContainer,
+  d.IxModalExample,
+  d.IxPill,
+  d.IxSelect,
+  d.IxSelectItem,
+  d.IxSpinner,
+  d.IxSplitButton,
+  d.IxSplitButtonItem,
+  d.IxTabItem,
+  d.IxTabs,
+  d.IxTile,
+  d.IxTimePicker,
+  d.IxToast,
+  d.IxToastContainer,
+  d.IxToggle,
+  d.IxTreeItem,
+  d.IxUpload,
+  d.IxValidationTooltip,
+  d.IxWorkflowStep,
+  d.IxWorkflowSteps
+];

package/src/index.ts

@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export * from '@siemens/ix';
+export * from './components';
+export * from './modal';
+export * from './module';
+export * from './toast';
+export * from './tree';
+

package/src/modal/index.ts

@@ -0,0 +1,10 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export * from './modal.service';

package/src/modal/modal.config.ts

@@ -0,0 +1,14 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { TemplateRef } from '@angular/core';
+
+export type ModalConfig = {
+  content: TemplateRef<any>;
+};

package/src/modal/modal.service.ts

@@ -0,0 +1,64 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+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;
+  }
+}

package/src/module.ts

@@ -0,0 +1,44 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { DOCUMENT } from '@angular/common';
+import {
+    APP_INITIALIZER,
+    ModuleWithProviders,
+    NgModule,
+    NgZone
+} from '@angular/core';
+import { appInitialize } from './app-initialize';
+import { DIRECTIVES } from './declare-components';
+import { ModalService } from './modal';
+import { ToastService } from './toast';
+import * as tree from './tree';
+const DECLARATIONS = [...DIRECTIVES, tree.IxTree];
+
+@NgModule({
+  declarations: DECLARATIONS,
+  exports: DECLARATIONS,
+})
+export class IxModule {
+  static forRoot(): ModuleWithProviders<IxModule> {
+    return {
+      ngModule: IxModule,
+      providers: [
+        {
+          provide: APP_INITIALIZER,
+          useFactory: appInitialize,
+          multi: true,
+          deps: [DOCUMENT, NgZone],
+        },
+        ModalService,
+        ToastService,
+      ],
+    };
+  }
+}

package/src/toast/index.ts

@@ -0,0 +1,10 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export * from './toast.service';

package/src/toast/toast.config.ts

@@ -0,0 +1,15 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { TemplateRef } from '@angular/core';
+import { ToastConfig as IxToastConfig } from '@siemens/ix';
+
+export type ToastConfig = Omit<IxToastConfig, 'message'> & {
+  message: string | TemplateRef<any>;
+};

package/src/toast/toast.service.ts

@@ -0,0 +1,51 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Injectable } from '@angular/core';
+import { toast, ToastConfig as IxToastConfig } from '@siemens/ix';
+import { ToastConfig } from './toast.config';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ToastService {
+  public async show(config: ToastConfig) {
+    if (typeof config.message === 'string') {
+      return toast(config as IxToastConfig);
+    }
+
+    const context: {
+      close: (() => void) | null;
+    } = {
+      close: null,
+    };
+
+    const embeddedView = config.message.createEmbeddedView({
+      $implicit: context,
+    });
+
+    const node: HTMLElement = embeddedView.rootNodes[0];
+    const instance = await toast({
+      ...config,
+      message: node,
+    });
+
+    context.close = () => {
+      instance.close();
+    };
+
+    embeddedView.detectChanges();
+
+    instance.onClose.once(() => {
+      embeddedView.destroy();
+    });
+
+    return instance;
+  }
+}

package/src/tree/index.ts

@@ -0,0 +1,10 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export * from './tree';

package/src/tree/tree.ts

@@ -0,0 +1,124 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    ElementRef,
+    EmbeddedViewRef,
+    EventEmitter,
+    Input,
+    NgZone,
+    OnDestroy,
+    TemplateRef
+} from '@angular/core';
+import type {
+    Components,
+    TreeContext as ICwTreeTreeContext,
+    TreeContext,
+    UpdateCallback
+} from '@siemens/ix';
+import { Subscription } from 'rxjs';
+import { ProxyCmp, proxyOutputs } from './../angular-component-lib/utils';
+
+export declare interface IxTree extends Omit<Components.IxTree, 'renderItem'> {
+  /**
+   * Context changed
+   */
+  contextChange: EventEmitter<CustomEvent<ICwTreeTreeContext>>;
+  /**
+   * Emits removed nodes
+   */
+  nodeRemoved: EventEmitter<CustomEvent<any>>;
+}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['context', 'model', 'root'],
+})
+@Component({
+  selector: 'ix-tree',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['context', 'model', 'root'],
+})
+export class IxTree implements OnDestroy {
+  renderCache = new Map<HTMLElement, EmbeddedViewRef<any>>();
+
+  @Input()
+  set renderItem(template: TemplateRef<any>) {
+    const itemRenderFunction = this.generateItemRenderer(template);
+    (this.el as HTMLIxTreeElement).renderItem = itemRenderFunction.bind(this);
+  }
+
+  protected el: HTMLElement;
+
+  onRemovedSubscription!: Subscription;
+
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['contextChange', 'nodeRemoved']);
+
+    this.onRemovedSubscription = this.nodeRemoved.subscribe(
+      (removedEvent: CustomEvent<HTMLIxTreeItemElement[]>) => {
+        const { detail } = removedEvent;
+
+        detail.forEach((removedItemElement) => {
+          if (this.renderCache.has(removedItemElement)) {
+            this.renderCache.get(removedItemElement)?.destroy();
+            this.renderCache.delete(removedItemElement);
+          }
+        });
+      }
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.onRemovedSubscription?.unsubscribe();
+  }
+
+  generateItemRenderer(templateRef: TemplateRef<any>) {
+    return (
+      _: number,
+      itemData: any,
+      __: any[],
+      context: TreeContext,
+      update: (callback: UpdateCallback) => void
+    ) => {
+      const treeItem = document.createElement('ix-tree-item');
+      treeItem.hasChildren = itemData.hasChildren;
+      treeItem.context = context as any;
+
+      const embeddedView = templateRef.createEmbeddedView({
+        $implicit: itemData.data,
+      });
+
+      const container = embeddedView.rootNodes[0];
+      embeddedView.detectChanges();
+
+      update((itemData, context) => {
+        treeItem.context = context as any;
+        treeItem.hasChildren = itemData.hasChildren;
+
+        embeddedView.context = {
+          $implicit: itemData.data,
+        };
+
+        embeddedView.detectChanges();
+      });
+
+      treeItem.appendChild(container);
+      this.renderCache.set(treeItem, embeddedView);
+
+      return treeItem;
+    };
+  }
+}

package/tsconfig.json

@@ -0,0 +1,43 @@
+{
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": true,
+    "skipTemplateCodegen": true,
+    "fullTemplateTypeCheck": false,
+    "enableResourceInlining": true,
+    "compilationMode": "partial"
+  },
+  "compilerOptions": {
+    "alwaysStrict": true,
+    "strict": true,
+    "allowSyntheticDefaultImports": true,
+    "allowUnreachableCode": false,
+    "declaration": true,
+    "declarationDir": "dist",
+    "experimentalDecorators": true,
+    "forceConsistentCasingInFileNames": true,
+    "lib": ["dom", "es2017"],
+    "module": "es2015",
+    "moduleResolution": "node",
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "outDir": "build/es2015",
+    "pretty": true,
+    "removeComments": false,
+    "importHelpers": true,
+    "rootDir": "src",
+    "strictPropertyInitialization": false,
+    "target": "es2015",
+    "baseUrl": ".",
+    "paths": {
+      "@siemens/ix": ["../core"]
+    },
+    "plugins": [
+    ],
+    "skipLibCheck": true
+  },
+  "exclude": ["node_modules"],
+  "files": ["src/index.ts"]
+}