@siemens/ix 1.5.0-beta.0 → 1.5.0-beta.2

package/dist/collection/components/tree/tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree.js","sourceRoot":"","sources":["../../../src/components/tree/tree.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport Hyperlist from 'hyperlist';\nimport { renderDefaultItem } from '../tree-item/default-tree-item';\nimport {\n  TreeContext,\n  TreeItem,\n  TreeItemContext,\n  TreeItemVisual,\n  TreeModel,\n  UpdateCallback,\n} from './tree-model';\n\n@Component({\n  tag: 'ix-tree',\n  styleUrl: 'tree.css',\n  scoped: true,\n})\nexport class Tree {\n  @Element() host!: HTMLIxTreeElement;\n\n  /**\n   * Initial root element will not be rendered\n   */\n  @Prop() root: string;\n\n  /**\n   * Tree model\n   */\n  @Prop() model: TreeModel<any>;\n\n  /**\n   * Render function of tree items\n   */\n  @Prop() renderItem: <T = any>(\n    index: number,\n    data: T,\n    dataList: Array<T>,\n    context: TreeContext,\n    update: (callback: UpdateCallback) => void\n  ) => HTMLElement;\n\n  /**\n   * Selection and collapsed state management\n   */\n  @Prop({ mutable: true }) context: TreeContext = {};\n\n  /**\n   * Context changed\n   */\n  @Event() contextChange: EventEmitter<TreeContext>;\n\n  /**\n   * Emits removed nodes\n   */\n  @Event() nodeRemoved: EventEmitter<any>;\n\n  private hyperlist: Hyperlist;\n\n  private toggleListener = new Map<HTMLElement, Function>();\n  private itemClickListener = new Map<HTMLElement, Function>();\n  private updates = new Map<string, UpdateCallback>();\n\n  private observer: MutationObserver;\n\n  private hasFirstRender = false;\n\n  private getVirtualizerOptions() {\n    const list = this.buildTreeList(this.model[this.root]);\n\n    let setToggleListener = (\n      item: TreeItemVisual<any>,\n      el: HTMLElement,\n      index: number\n    ) => {\n      if (item.hasChildren && !this.toggleListener.has(el)) {\n        const toggleCallback = (e: Event) => {\n          e.preventDefault();\n          e.stopPropagation();\n          const context = this.getContext(list[index].id);\n          context.isExpanded = !context.isExpanded;\n          this.setContext(item.id, context);\n        };\n        el.addEventListener('toggle', toggleCallback);\n        this.toggleListener.set(el, toggleCallback);\n      }\n    };\n\n    return {\n      itemHeight: 32,\n      total: list.length,\n      generate: (index: number) => {\n        const item = list[index];\n        const renderedTreeItem = this.host.querySelector(\n          `[data-tree-node-id=\"${item.id}\"]`\n        ) as HTMLIxTreeItemElement;\n\n        const context = this.getContext(item.id);\n\n        if (renderedTreeItem) {\n          renderedTreeItem.hasChildren = item.hasChildren;\n          renderedTreeItem.context = { ...context };\n\n          setToggleListener(item, renderedTreeItem, index);\n\n          if (this.updates.has(item.id)) {\n            const doUpdate = this.updates.get(item.id);\n            doUpdate(item, { ...this.context });\n          }\n\n          return renderedTreeItem;\n        }\n\n        const update = (callback: UpdateCallback) => {\n          this.updates.set(item.id, callback);\n        };\n\n        let innerElement: HTMLElement | null = null;\n        if (this.renderItem) {\n          innerElement = this.renderItem(\n            index,\n            item,\n            list,\n            { ...this.context },\n            update\n          );\n        }\n\n        if (innerElement === null) {\n          innerElement = renderDefaultItem(item, context, update);\n        }\n\n        const el = innerElement;\n        el.setAttribute('data-tree-node-id', item.id);\n        el.style.paddingLeft = item.level + 'rem';\n        el.style.paddingRight = '1rem';\n\n        if (!this.itemClickListener.has(el)) {\n          const itemClickCallback = (e: Event) => {\n            e.preventDefault();\n            e.stopPropagation();\n            Object.values(this.context).forEach((c) => (c.isSelected = false));\n            const context = this.getContext(item.id);\n            context.isSelected = true;\n            this.setContext(item.id, context);\n          };\n          el.addEventListener('itemClick', itemClickCallback);\n          this.itemClickListener.set(el, itemClickCallback);\n        }\n\n        setToggleListener(item, el, index);\n\n        return el;\n      },\n    };\n  }\n\n  private setContext(id: string, context: TreeItemContext) {\n    this.context = {\n      ...this.context,\n      [id]: context,\n    };\n\n    this.contextChange.emit(this.context);\n  }\n\n  private getContext(id: string): TreeItemContext {\n    if (!this.context) {\n      return {\n        isExpanded: false,\n        isSelected: false,\n      };\n    }\n    if (!this.context[id]) {\n      this.context[id] = {\n        isExpanded: false,\n        isSelected: false,\n      };\n    }\n    return this.context[id];\n  }\n\n  private buildTreeList(\n    root: TreeItem<any>,\n    level: number = 0\n  ): TreeItemVisual<any>[] {\n    const itemList: TreeItemVisual<any>[] = [];\n\n    if (root?.hasChildren) {\n      const newLevel = level + 1;\n      root.children.forEach((id: string) => {\n        const item = this.model[id];\n        const context = this.getContext(id);\n        itemList.push({ ...item, level });\n        if (item.hasChildren && context.isExpanded) {\n          itemList.push(...this.buildTreeList(item, newLevel));\n        }\n      });\n    }\n\n    return itemList;\n  }\n\n  componentDidLoad() {\n    this.initList();\n\n    this.observer = new MutationObserver((records) => {\n      let removed = [];\n\n      records.forEach((record) => {\n        removed = [...removed, ...Array.from(record.removedNodes)];\n\n        record.addedNodes.forEach((an) => {\n          const index = removed.indexOf(an);\n          if (index >= 0) {\n            removed.splice(index, 1);\n          }\n        });\n      });\n\n      this.nodeRemoved.emit(removed);\n    });\n\n    this.observer.observe(this.host, {\n      childList: true,\n    });\n  }\n\n  componentWillRender() {\n    this.hasFirstRender = true;\n\n    if (this.isListInitialized()) {\n      this.refreshList();\n    } else {\n      this.initList();\n    }\n  }\n\n  disconnectedCallback() {\n    this.hyperlist.destroy();\n    this.observer.disconnect();\n  }\n\n  @Watch('model')\n  modelChange() {\n    if (this.hasFirstRender && !this.isListInitialized()) {\n      this.initList();\n    }\n  }\n\n  private isListInitialized() {\n    const itemPositions = this.hyperlist?._itemPositions;\n\n    return (\n      itemPositions !== undefined &&\n      itemPositions.length &&\n      !itemPositions?.some(\n        (item: number) => item === undefined || Number.isNaN(item)\n      )\n    );\n  }\n\n  private refreshList() {\n    if (this.hyperlist) {\n      this.hyperlist.refresh(this.host, this.getVirtualizerOptions());\n    }\n  }\n\n  private initList() {\n    this.hyperlist?.destroy();\n    const config = this.getVirtualizerOptions();\n    this.hyperlist = new Hyperlist(this.host, config);\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"tree.js","sourceRoot":"","sources":["../../../src/components/tree/tree.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport Hyperlist from 'hyperlist';\nimport { renderDefaultItem } from '../tree-item/default-tree-item';\nimport {\n  TreeContext,\n  TreeItem,\n  TreeItemContext,\n  TreeItemVisual,\n  TreeModel,\n  UpdateCallback,\n} from './tree-model';\n\n@Component({\n  tag: 'ix-tree',\n  styleUrl: 'tree.css',\n  scoped: true,\n})\nexport class Tree {\n  @Element() host!: HTMLIxTreeElement;\n\n  /**\n   * Initial root element will not be rendered\n   */\n  @Prop() root: string;\n\n  /**\n   * Tree model\n   */\n  @Prop() model: TreeModel<any>;\n\n  /**\n   * Render function of tree items\n   */\n  @Prop() renderItem: <T = any>(\n    index: number,\n    data: T,\n    dataList: Array<T>,\n    context: TreeContext,\n    update: (callback: UpdateCallback) => void\n  ) => HTMLElement;\n\n  /**\n   * Selection and collapsed state management\n   */\n  @Prop({ mutable: true }) context: TreeContext = {};\n\n  /**\n   * Context changed\n   */\n  @Event() contextChange: EventEmitter<TreeContext>;\n\n  /**\n   * Node toggled event\n   * @since 1.5.0\n   */\n  @Event() nodeToggled: EventEmitter<{ id: string; isExpaned: boolean }>;\n\n  /**\n   * Node clicked event\n   * @since 1.5.0\n   */\n  @Event() nodeClicked: EventEmitter<string>;\n\n  /**\n   * Emits removed nodes\n   */\n  @Event() nodeRemoved: EventEmitter<any>;\n\n  private hyperlist: Hyperlist;\n\n  private toggleListener = new Map<HTMLElement, Function>();\n  private itemClickListener = new Map<HTMLElement, Function>();\n  private updates = new Map<string, UpdateCallback>();\n\n  private observer: MutationObserver;\n\n  private hasFirstRender = false;\n\n  private getVirtualizerOptions() {\n    const list = this.buildTreeList(this.model[this.root]);\n\n    let setToggleListener = (\n      item: TreeItemVisual<any>,\n      el: HTMLElement,\n      index: number\n    ) => {\n      if (item.hasChildren && !this.toggleListener.has(el)) {\n        const toggleCallback = (e: Event) => {\n          e.preventDefault();\n          e.stopPropagation();\n          const context = this.getContext(list[index].id);\n          context.isExpanded = !context.isExpanded;\n          this.nodeToggled.emit({ id: item.id, isExpaned: context.isExpanded });\n          this.setContext(item.id, context);\n        };\n        el.addEventListener('toggle', toggleCallback);\n        this.toggleListener.set(el, toggleCallback);\n      }\n    };\n\n    return {\n      itemHeight: 32,\n      total: list.length,\n      generate: (index: number) => {\n        const item = list[index];\n        const renderedTreeItem = this.host.querySelector(\n          `[data-tree-node-id=\"${item.id}\"]`\n        ) as HTMLIxTreeItemElement;\n\n        const context = this.getContext(item.id);\n\n        if (renderedTreeItem) {\n          renderedTreeItem.hasChildren = item.hasChildren;\n          renderedTreeItem.context = { ...context };\n\n          setToggleListener(item, renderedTreeItem, index);\n\n          if (this.updates.has(item.id)) {\n            const doUpdate = this.updates.get(item.id);\n            doUpdate(item, { ...this.context });\n          }\n\n          return renderedTreeItem;\n        }\n\n        const update = (callback: UpdateCallback) => {\n          this.updates.set(item.id, callback);\n        };\n\n        let innerElement: HTMLElement | null = null;\n        if (this.renderItem) {\n          innerElement = this.renderItem(\n            index,\n            item,\n            list,\n            { ...this.context },\n            update\n          );\n        }\n\n        if (innerElement === null) {\n          innerElement = renderDefaultItem(item, context, update);\n        }\n\n        const el = innerElement;\n        el.setAttribute('data-tree-node-id', item.id);\n        el.style.paddingLeft = item.level + 'rem';\n        el.style.paddingRight = '1rem';\n\n        if (!this.itemClickListener.has(el)) {\n          const itemClickCallback = (e: Event) => {\n            e.preventDefault();\n            e.stopPropagation();\n            Object.values(this.context).forEach((c) => (c.isSelected = false));\n            const context = this.getContext(item.id);\n            context.isSelected = true;\n            this.setContext(item.id, context);\n            this.nodeClicked.emit(item.id);\n          };\n          el.addEventListener('itemClick', itemClickCallback);\n          this.itemClickListener.set(el, itemClickCallback);\n        }\n\n        setToggleListener(item, el, index);\n\n        return el;\n      },\n    };\n  }\n\n  private setContext(id: string, context: TreeItemContext) {\n    this.context = {\n      ...this.context,\n      [id]: context,\n    };\n\n    this.contextChange.emit(this.context);\n  }\n\n  private getContext(id: string): TreeItemContext {\n    if (!this.context) {\n      return {\n        isExpanded: false,\n        isSelected: false,\n      };\n    }\n    if (!this.context[id]) {\n      this.context[id] = {\n        isExpanded: false,\n        isSelected: false,\n      };\n    }\n    return this.context[id];\n  }\n\n  private buildTreeList(\n    root: TreeItem<any>,\n    level: number = 0\n  ): TreeItemVisual<any>[] {\n    const itemList: TreeItemVisual<any>[] = [];\n\n    if (root?.hasChildren) {\n      const newLevel = level + 1;\n      root.children.forEach((id: string) => {\n        const item = this.model[id];\n        const context = this.getContext(id);\n        itemList.push({ ...item, level });\n        if (item.hasChildren && context.isExpanded) {\n          itemList.push(...this.buildTreeList(item, newLevel));\n        }\n      });\n    }\n\n    return itemList;\n  }\n\n  componentDidLoad() {\n    this.initList();\n\n    this.observer = new MutationObserver((records) => {\n      let removed = [];\n\n      records.forEach((record) => {\n        removed = [...removed, ...Array.from(record.removedNodes)];\n\n        record.addedNodes.forEach((an) => {\n          const index = removed.indexOf(an);\n          if (index >= 0) {\n            removed.splice(index, 1);\n          }\n        });\n      });\n\n      this.nodeRemoved.emit(removed);\n    });\n\n    this.observer.observe(this.host, {\n      childList: true,\n    });\n  }\n\n  componentWillRender() {\n    this.hasFirstRender = true;\n\n    if (this.isListInitialized()) {\n      this.refreshList();\n    } else {\n      this.initList();\n    }\n  }\n\n  disconnectedCallback() {\n    this.hyperlist.destroy();\n    this.observer.disconnect();\n  }\n\n  @Watch('model')\n  modelChange() {\n    if (this.hasFirstRender && !this.isListInitialized()) {\n      this.initList();\n    }\n  }\n\n  private isListInitialized() {\n    const itemPositions = this.hyperlist?._itemPositions;\n\n    return (\n      itemPositions !== undefined &&\n      itemPositions.length &&\n      !itemPositions?.some(\n        (item: number) => item === undefined || Number.isNaN(item)\n      )\n    );\n  }\n\n  private refreshList() {\n    if (this.hyperlist) {\n      this.hyperlist.refresh(this.host, this.getVirtualizerOptions());\n    }\n  }\n\n  private initList() {\n    this.hyperlist?.destroy();\n    const config = this.getVirtualizerOptions();\n    this.hyperlist = new Hyperlist(this.host, config);\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/utils/a11y.js

@@ -0,0 +1,10 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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 const a11yBoolean = (value) => (value ? 'true' : 'false');
+//# sourceMappingURL=a11y.js.map

package/dist/collection/components/utils/a11y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"a11y.js","sourceRoot":"","sources":["../../../src/components/utils/a11y.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAc,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nexport const a11yBoolean = (value: boolean) => (value ? 'true' : 'false');\n"]}

package/dist/collection/components/workflow-step/workflow-step.css

@@ -6,9 +6,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG
  *
@@ -37,6 +34,7 @@
   width: 100%;
   align-items: center;
   justify-content: center;
+  position: relative;
 }
 :host .step .wrapper .line {
   width: 100%;
@@ -50,6 +48,9 @@
 :host .step .wrapper .line.last {
   margin: 0 auto 0 0;
 }
+:host .step .wrapper .line.single {
+  width: 0;
+}
 :host .step .wrapper .line.selected {
   background-color: var(--theme-workflow-step-icon-default--color--selected);
 }
@@ -102,6 +103,9 @@
 :host .step.vertical .wrapper .line.last {
   margin: 0 0 auto 0;
 }
+:host .step.vertical .wrapper .line.single {
+  width: 0;
+}
 :host .step.vertical .text {
   margin-top: 0;
   margin-left: 1rem;

package/dist/collection/components/workflow-step/workflow-step.js

@@ -6,9 +6,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
 import { Fragment, h, Host, } from '@stencil/core';
 export class WorkflowStep {
   constructor() {
@@ -74,6 +71,11 @@ export class WorkflowStep {
     this.selectedHandler();
     this.customIconSlot = !!this.hostElement.querySelector('[slot="custom-icon"]');
   }
+  clickFunction() {
+    if (!this.disabled && this.clickable) {
+      this.selectedChanged.emit(this.hostElement);
+    }
+  }
   render() {
     const icons = !this.customIconSlot ? (h(Fragment, null, h("ix-icon", { color: "color-1", name: this.iconName === 'warning' ? 'triangle-filled' : 'circle-filled', class: "absolute", size: "24" }), h("ix-icon", { color: this.iconColor, name: this.iconName, class: "absolute", size: "24" }))) : ('');
     return (h(Host, null, h("div", { tabIndex: 0, onClick: () => this.select(), class: {
@@ -196,14 +198,17 @@ export class WorkflowStep {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'first' | 'last' | 'undefined'",
-          "resolved": "\"first\" | \"last\" | \"undefined\"",
+          "original": "'first' | 'last' | 'single' | 'undefined'",
+          "resolved": "\"first\" | \"last\" | \"single\" | \"undefined\"",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
+          "tags": [{
+              "name": "deprecated",
+              "text": "Will be changed to '@internal' in 2.0.0"
+            }],
           "text": "Activate navigation click"
         },
         "attribute": "position",
@@ -218,6 +223,31 @@ export class WorkflowStep {
       "iconColor": {}
     };
   }
+  static get events() {
+    return [{
+        "method": "selectedChanged",
+        "name": "selectedChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "HTMLIxWorkflowStepElement",
+          "resolved": "HTMLIxWorkflowStepElement",
+          "references": {
+            "HTMLIxWorkflowStepElement": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
   static get elementRef() { return "hostElement"; }
   static get watchers() {
     return [{
@@ -228,5 +258,14 @@ export class WorkflowStep {
         "methodName": "watchPropHandler"
       }];
   }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "clickFunction",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }];
+  }
 }
 //# sourceMappingURL=workflow-step.js.map

package/dist/collection/components/workflow-step/workflow-step.js.map

@@ -1 +1 @@
-{"version":3,"file":"workflow-step.js","sourceRoot":"","sources":["../../../src/components/workflow-step/workflow-step.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;GAEG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,QAAQ,EACR,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,YAAY;;oBAMK,KAAK;oBAKL,KAAK;kBAKmC,MAAM;qBAK7C,KAAK;oBAKW,KAAK;oBAKC,WAAW;oBAG5D,QAAQ;qBACmB,mCAAmC;;EAIxD,MAAM;IACZ,IAAI,CAAC,IAAI,CAAC,SAAS;MAAE,OAAO;IAC5B,IAAI,IAAI,CAAC,QAAQ;MAAE,OAAO;IAE1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACrB,IAAI,CAAC,eAAe,EAAE,CAAC;EACzB,CAAC;EAGD,eAAe;IACb,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAExD,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM,EAAE;MAC1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC;MACxD,IAAI,CAAC,SAAS,GAAG,oCAAoC,aAAa,EAAE,CAAC;KACtE;IAED,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAC5C,IAAI,CAAC,SAAS,GAAG,iCAAiC,aAAa,EAAE,CAAC;KACnE;EACH,CAAC;EAGD,gBAAgB;IACd,QAAQ,IAAI,CAAC,MAAM,EAAE;MACnB,KAAK,MAAM;QACT,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzB,IAAI,CAAC,SAAS,GAAG,mCAAmC,CAAC;QACrD,MAAM;MACR,KAAK,SAAS;QACZ,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;QAC1B,IAAI,CAAC,SAAS,GAAG,eAAe,CAAC;QACjC,MAAM;MACR,KAAK,MAAM;QACT,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;QAC1B,IAAI,CAAC,SAAS,GAAG,gCAAgC,CAAC;QAClD,MAAM;MACR,KAAK,SAAS;QACZ,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;QAC1B,IAAI,CAAC,SAAS,GAAG,eAAe,CAAC;QACjC,MAAM;MACR,KAAK,OAAO;QACV,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;QACxB,IAAI,CAAC,SAAS,GAAG,aAAa,CAAC;QAC/B,MAAM;MAER;QACE,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzB,MAAM;KACT;IAED,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,SAAS,GAAG,6CAA6C,CAAC;KAChE;EACH,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACxB,IAAI,CAAC,eAAe,EAAE,CAAC;IAEvB,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CACpD,sBAAsB,CACvB,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CACnC,EAAC,QAAQ;MACP,eACE,KAAK,EAAC,SAAS,EACf,IAAI,EACF,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,eAAe,EAEnE,KAAK,EAAC,UAAU,EAChB,IAAI,EAAC,IAAI,GACA;MACX,eACE,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,KAAK,EAAC,UAAU,EAChB,IAAI,EAAC,IAAI,GACA,CACF,CACZ,CAAC,CAAC,CAAC,CACF,EAAE,CACH,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WACE,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAC5B,KAAK,EAAE;UACL,IAAI,EAAE,IAAI;UACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;UACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;UACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;QAED,WAAK,KAAK,EAAC,SAAS;UAClB,WACE,KAAK,EAAE;cACL,IAAI,EAAE,IAAI;cACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;cACvB,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI;cACnB,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI;aACtB,GACI;UACP,WAAK,KAAK,EAAC,aAAa;YACrB,KAAK;YACN,YAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,CACF;QACN,WAAK,KAAK,EAAC,MAAM;UACf,eAAa,CACT,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.\n */\n\nimport {\n  Component,\n  Element,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-workflow-step',\n  styleUrl: 'workflow-step.scss',\n  scoped: true,\n})\nexport class WorkflowStep {\n  @Element() hostElement: HTMLIxWorkflowStepElement;\n\n  /**\n   * Select orientation\n   */\n  @Prop() vertical: boolean = false;\n\n  /**\n   * Set disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Set status\n   */\n  @Prop() status: 'open' | 'success' | 'done' | 'warning' | 'error' = 'open';\n\n  /**\n   * Activate navigation click\n   */\n  @Prop() clickable: boolean = false;\n\n  /**\n   * Set selected\n   */\n  @Prop({ mutable: true }) selected: boolean = false;\n\n  /**\n   * Activate navigation click\n   */\n  @Prop() position: 'first' | 'last' | 'undefined' = 'undefined';\n\n  @State() iconName: 'circle' | 'circle-dot' | 'success' | 'warning' | 'error' =\n    'circle';\n  @State() iconColor: string = 'workflow-step-icon-default--color';\n\n  private customIconSlot: boolean;\n\n  private select() {\n    if (!this.clickable) return;\n    if (this.disabled) return;\n\n    this.selected = true;\n    this.selectedHandler();\n  }\n\n  @Watch('selected')\n  selectedHandler() {\n    const selectedStyle = this.selected ? '--selected' : '';\n\n    if (this.status === 'open') {\n      this.iconName = this.selected ? 'circle-dot' : 'circle';\n      this.iconColor = `workflow-step-icon-default--color${selectedStyle}`;\n    }\n\n    if (this.status === 'done' && !this.disabled) {\n      this.iconColor = `workflow-step-icon-done--color${selectedStyle}`;\n    }\n  }\n\n  @Watch('status')\n  watchPropHandler() {\n    switch (this.status) {\n      case 'open':\n        this.iconName = 'circle';\n        this.iconColor = 'workflow-step-icon-default--color';\n        break;\n      case 'success':\n        this.iconName = 'success';\n        this.iconColor = 'color-success';\n        break;\n      case 'done':\n        this.iconName = 'success';\n        this.iconColor = 'workflow-step-icon-done--color';\n        break;\n      case 'warning':\n        this.iconName = 'warning';\n        this.iconColor = 'color-warning';\n        break;\n      case 'error':\n        this.iconName = 'error';\n        this.iconColor = 'color-alarm';\n        break;\n\n      default:\n        this.iconName = 'circle';\n        break;\n    }\n\n    if (this.disabled) {\n      this.iconColor = 'workflow-step-icon-success--color--disabled';\n    }\n  }\n\n  componentDidLoad() {\n    this.watchPropHandler();\n    this.selectedHandler();\n\n    this.customIconSlot = !!this.hostElement.querySelector(\n      '[slot=\"custom-icon\"]'\n    );\n  }\n\n  render() {\n    const icons = !this.customIconSlot ? (\n      <Fragment>\n        <ix-icon\n          color=\"color-1\"\n          name={\n            this.iconName === 'warning' ? 'triangle-filled' : 'circle-filled'\n          }\n          class=\"absolute\"\n          size=\"24\"\n        ></ix-icon>\n        <ix-icon\n          color={this.iconColor}\n          name={this.iconName}\n          class=\"absolute\"\n          size=\"24\"\n        ></ix-icon>\n      </Fragment>\n    ) : (\n      ''\n    );\n\n    return (\n      <Host>\n        <div\n          tabIndex={0}\n          onClick={() => this.select()}\n          class={{\n            step: true,\n            selected: this.selected,\n            vertical: this.vertical,\n            disabled: this.disabled,\n          }}\n        >\n          <div class=\"wrapper\">\n            <div\n              class={{\n                line: true,\n                selected: this.selected,\n                [this.status]: true,\n                [this.position]: true,\n              }}\n            ></div>\n            <div class=\"iconWrapper\">\n              {icons}\n              <slot name=\"custom-icon\"></slot>\n            </div>\n          </div>\n          <div class=\"text\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"workflow-step.js","sourceRoot":"","sources":["../../../src/components/workflow-step/workflow-step.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-workflow-step',\n  styleUrl: 'workflow-step.scss',\n  scoped: true,\n})\nexport class WorkflowStep {\n  @Element() hostElement: HTMLIxWorkflowStepElement;\n\n  /**\n   * Select orientation\n   */\n  @Prop() vertical: boolean = false;\n\n  /**\n   * Set disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Set status\n   */\n  @Prop() status: 'open' | 'success' | 'done' | 'warning' | 'error' = 'open';\n\n  /**\n   * Activate navigation click\n   */\n  @Prop() clickable: boolean = false;\n\n  /**\n   * Set selected\n   */\n  @Prop({ mutable: true }) selected: boolean = false;\n\n  /**\n   * Activate navigation click\n   *\n   * @deprecated Will be changed to '@internal' in 2.0.0\n   */\n  @Prop() position: 'first' | 'last' | 'single' | 'undefined' = 'undefined';\n\n  @State() iconName: 'circle' | 'circle-dot' | 'success' | 'warning' | 'error' =\n    'circle';\n  @State() iconColor: string = 'workflow-step-icon-default--color';\n\n  /**\n   * @internal\n   */\n  @Event() selectedChanged: EventEmitter<HTMLIxWorkflowStepElement>;\n\n  private customIconSlot: boolean;\n\n  private select() {\n    if (!this.clickable) return;\n    if (this.disabled) return;\n\n    this.selected = true;\n    this.selectedHandler();\n  }\n\n  @Watch('selected')\n  selectedHandler() {\n    const selectedStyle = this.selected ? '--selected' : '';\n\n    if (this.status === 'open') {\n      this.iconName = this.selected ? 'circle-dot' : 'circle';\n      this.iconColor = `workflow-step-icon-default--color${selectedStyle}`;\n    }\n\n    if (this.status === 'done' && !this.disabled) {\n      this.iconColor = `workflow-step-icon-done--color${selectedStyle}`;\n    }\n  }\n\n  @Watch('status')\n  watchPropHandler() {\n    switch (this.status) {\n      case 'open':\n        this.iconName = 'circle';\n        this.iconColor = 'workflow-step-icon-default--color';\n        break;\n      case 'success':\n        this.iconName = 'success';\n        this.iconColor = 'color-success';\n        break;\n      case 'done':\n        this.iconName = 'success';\n        this.iconColor = 'workflow-step-icon-done--color';\n        break;\n      case 'warning':\n        this.iconName = 'warning';\n        this.iconColor = 'color-warning';\n        break;\n      case 'error':\n        this.iconName = 'error';\n        this.iconColor = 'color-alarm';\n        break;\n\n      default:\n        this.iconName = 'circle';\n        break;\n    }\n\n    if (this.disabled) {\n      this.iconColor = 'workflow-step-icon-success--color--disabled';\n    }\n  }\n\n  componentDidLoad() {\n    this.watchPropHandler();\n    this.selectedHandler();\n\n    this.customIconSlot = !!this.hostElement.querySelector(\n      '[slot=\"custom-icon\"]'\n    );\n  }\n\n  @Listen('click', { passive: true })\n  clickFunction() {\n    if (!this.disabled && this.clickable) {\n      this.selectedChanged.emit(this.hostElement);\n    }\n  }\n\n  render() {\n    const icons = !this.customIconSlot ? (\n      <Fragment>\n        <ix-icon\n          color=\"color-1\"\n          name={\n            this.iconName === 'warning' ? 'triangle-filled' : 'circle-filled'\n          }\n          class=\"absolute\"\n          size=\"24\"\n        ></ix-icon>\n        <ix-icon\n          color={this.iconColor}\n          name={this.iconName}\n          class=\"absolute\"\n          size=\"24\"\n        ></ix-icon>\n      </Fragment>\n    ) : (\n      ''\n    );\n\n    return (\n      <Host>\n        <div\n          tabIndex={0}\n          onClick={() => this.select()}\n          class={{\n            step: true,\n            selected: this.selected,\n            vertical: this.vertical,\n            disabled: this.disabled,\n          }}\n        >\n          <div class=\"wrapper\">\n            <div\n              class={{\n                line: true,\n                selected: this.selected,\n                [this.status]: true,\n                [this.position]: true,\n              }}\n            ></div>\n            <div class=\"iconWrapper\">\n              {icons}\n              <slot name=\"custom-icon\"></slot>\n            </div>\n          </div>\n          <div class=\"text\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/workflow-steps/workflow-steps.css

@@ -6,9 +6,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG
  *

package/dist/collection/components/workflow-steps/workflow-steps.js

@@ -6,10 +6,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
 import { h, Host, } from '@stencil/core';
+import { createMutationObserver } from '../utils/mutation-observer';
 export class WorkflowSteps {
   constructor() {
     this.vertical = false;
@@ -20,48 +18,56 @@ export class WorkflowSteps {
   getSteps() {
     return Array.from(this.hostElement.querySelectorAll('ix-workflow-step'));
   }
-  deselectAll() {
-    const steps = this.getSteps();
-    steps.forEach((element) => {
-      element.setAttribute('selected', 'false');
-    });
+  get stepsContent() {
+    return this.hostElement.querySelector('.steps');
   }
-  componentDidRender() {
-    const steps = this.getSteps();
+  updateSteps() {
+    let steps = this.getSteps();
     steps.forEach((element, index) => {
-      element.setAttribute('vertical', this.vertical === true ? 'true' : 'false');
-      element.setAttribute('clickable', this.clickable === true ? 'true' : 'false');
-      element.setAttribute('selected', this.selectedIndex === index ? 'true' : 'false');
-      if (index === 0)
-        element.setAttribute('position', 'first');
-      if (index === steps.length - 1)
-        element.setAttribute('position', 'last');
+      element.vertical = this.vertical;
+      element.clickable = this.clickable;
+      element.selected = this.selectedIndex === index;
+      if (steps.length === 1) {
+        element.position = 'single';
+        return;
+      }
+      if (index === 0) {
+        element.position = 'first';
+      }
+      else if (index === steps.length - 1) {
+        element.position = 'last';
+      }
+      else {
+        element.position = 'undefined';
+      }
     });
   }
-  componentWillRender() {
-    const steps = this.getSteps();
-    steps.forEach((element, index) => {
-      element.addEventListener('click', () => {
-        if (!this.clickable)
-          return;
-        const previousElement = steps[index - 1];
-        if (this.linear &&
-          previousElement &&
-          !['done', 'success'].includes(previousElement === null || previousElement === void 0 ? void 0 : previousElement.status)) {
-          return element.setAttribute('selected', 'false');
+  componentDidLoad() {
+    this.stepsContent.addEventListener('selectedChanged', (event) => {
+      const steps = this.getSteps();
+      steps.forEach((element) => {
+        if (element !== event.target) {
+          element.selected = false;
         }
-        this.deselectAll();
-        element.setAttribute('selected', 'true');
-        this.stepSelected.emit(index);
       });
-      // const isEnabled = element.getAttribute('first');
-      // if(isEnabled){
-      // }
-      // console.log(isEnabled)
-      // const isDisabled = element.getAttribute('disabled') !== null;
-      // if (!isDisabled) element.addEventListener('click', () => '');
-      //element.addEventListener('mousedown', event => this.clicked(element, index));
     });
+    const slotDiv = this.hostElement.querySelector('.steps');
+    this.observer = createMutationObserver((mutations) => {
+      for (let mutation of mutations) {
+        if (mutation.type === 'childList') {
+          this.updateSteps();
+        }
+      }
+    });
+    this.observer.observe(slotDiv, { childList: true });
+  }
+  disconnectedCallback() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+  componentDidRender() {
+    this.updateSteps();
   }
   render() {
     return (h(Host, null, h("div", { class: { steps: true, vertical: this.vertical } }, h("slot", null))));
@@ -109,7 +115,10 @@ export class WorkflowSteps {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
+          "tags": [{
+              "name": "deprecated",
+              "text": "Has no effect on component. Will get removed in 2.0.0"
+            }],
           "text": "Select linear mode"
         },
         "attribute": "linear",

package/dist/collection/components/workflow-steps/workflow-steps.js.map

@@ -1 +1 @@
-{"version":3,"file":"workflow-steps.js","sourceRoot":"","sources":["../../../src/components/workflow-steps/workflow-steps.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-workflow-steps',\n  styleUrl: 'workflow-steps.scss',\n  scoped: true,\n})\nexport class WorkflowSteps {\n  @Element() hostElement!: HTMLIxWorkflowStepsElement;\n\n  /**\n   * Select orientation\n   */\n  @Prop() vertical: boolean = false;\n\n  /**\n   * Select linear mode\n   */\n  @Prop() linear: boolean = false;\n\n  /**\n   * Activate navigation click\n   */\n  @Prop() clickable: boolean = false;\n\n  /**\n   * Activate navigation click\n   */\n  @Prop() selectedIndex: number = 0;\n\n  /**\n   * On step selected event\n   */\n  @Event() stepSelected: EventEmitter<number>;\n\n  private getSteps() {\n    return Array.from(this.hostElement.querySelectorAll('ix-workflow-step'));\n  }\n\n  private deselectAll() {\n    const steps = this.getSteps();\n    steps.forEach((element) => {\n      element.setAttribute('selected', 'false');\n    });\n  }\n\n  componentDidRender() {\n    const steps = this.getSteps();\n\n    steps.forEach((element, index) => {\n      element.setAttribute(\n        'vertical',\n        this.vertical === true ? 'true' : 'false'\n      );\n      element.setAttribute(\n        'clickable',\n        this.clickable === true ? 'true' : 'false'\n      );\n      element.setAttribute(\n        'selected',\n        this.selectedIndex === index ? 'true' : 'false'\n      );\n      if (index === 0) element.setAttribute('position', 'first');\n      if (index === steps.length - 1) element.setAttribute('position', 'last');\n    });\n  }\n\n  componentWillRender() {\n    const steps = this.getSteps();\n    steps.forEach((element, index) => {\n      element.addEventListener('click', () => {\n        if (!this.clickable) return;\n        const previousElement = steps[index - 1];\n        if (\n          this.linear &&\n          previousElement &&\n          !['done', 'success'].includes(previousElement?.status)\n        ) {\n          return element.setAttribute('selected', 'false');\n        }\n        this.deselectAll();\n        element.setAttribute('selected', 'true');\n        this.stepSelected.emit(index);\n      });\n      // const isEnabled = element.getAttribute('first');\n      // if(isEnabled){\n\n      // }\n      // console.log(isEnabled)\n      // const isDisabled = element.getAttribute('disabled') !== null;\n      // if (!isDisabled) element.addEventListener('click', () => '');\n      //element.addEventListener('mousedown', event => this.clicked(element, index));\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={{ steps: true, vertical: this.vertical }}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"workflow-steps.js","sourceRoot":"","sources":["../../../src/components/workflow-steps/workflow-steps.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\n@Component({\n  tag: 'ix-workflow-steps',\n  styleUrl: 'workflow-steps.scss',\n  scoped: true,\n})\nexport class WorkflowSteps {\n  @Element() hostElement!: HTMLIxWorkflowStepsElement;\n\n  /**\n   * Select orientation\n   */\n  @Prop() vertical: boolean = false;\n\n  /**\n   * Select linear mode\n   * @deprecated Has no effect on component. Will get removed in 2.0.0\n   */\n  @Prop() linear: boolean = false;\n\n  /**\n   * Activate navigation click\n   */\n  @Prop() clickable: boolean = false;\n\n  /**\n   * Activate navigation click\n   */\n  @Prop() selectedIndex: number = 0;\n\n  /**\n   * On step selected event\n   */\n  @Event() stepSelected: EventEmitter<number>;\n\n  private getSteps() {\n    return Array.from(this.hostElement.querySelectorAll('ix-workflow-step'));\n  }\n\n  get stepsContent() {\n    return this.hostElement.querySelector('.steps');\n  }\n\n  updateSteps() {\n    let steps = this.getSteps();\n    steps.forEach((element, index) => {\n      element.vertical = this.vertical;\n      element.clickable = this.clickable;\n      element.selected = this.selectedIndex === index;\n\n      if (steps.length === 1) {\n        element.position = 'single';\n        return;\n      }\n\n      if (index === 0) {\n        element.position = 'first';\n      } else if (index === steps.length - 1) {\n        element.position = 'last';\n      } else {\n        element.position = 'undefined';\n      }\n    });\n  }\n\n  private observer: MutationObserver;\n\n  componentDidLoad() {\n    this.stepsContent.addEventListener(\n      'selectedChanged',\n      (event: CustomEvent<HTMLIxWorkflowStepElement>) => {\n        const steps = this.getSteps();\n        steps.forEach((element) => {\n          if (element !== event.target) {\n            element.selected = false;\n          }\n        });\n      }\n    );\n\n    const slotDiv = this.hostElement.querySelector('.steps');\n\n    this.observer = createMutationObserver((mutations) => {\n      for (let mutation of mutations) {\n        if (mutation.type === 'childList') {\n          this.updateSteps();\n        }\n      }\n    });\n\n    this.observer.observe(slotDiv, { childList: true });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  componentDidRender() {\n    this.updateSteps();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={{ steps: true, vertical: this.vertical }}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/index.js

@@ -15,6 +15,7 @@ export * from './components/modal/modal-utils';
 export * from './components/toast/toast-utils';
 export * from './components/tree-item/default-tree-item';
 export * from './components/tree/tree-model';
+export * from './components/upload/upload-file-state';
 export { convertToAbbreviationString, convertToRemString, } from './components/utils/rwd.util';
 export * from './components/utils/theme-switcher';
 //# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,cAAc,cAAc,CAAC;AAC7B,cAAc,2CAA2C,CAAC;AAC1D,cAAc,0CAA0C,CAAC;AACzD,cAAc,sDAAsD,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAC;AACvE,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0CAA0C,CAAC;AACzD,cAAc,8BAA8B,CAAC;AAE7C,OAAO,EACL,2BAA2B,EAC3B,kBAAkB,GACnB,MAAM,6BAA6B,CAAC;AACrC,cAAc,mCAAmC,CAAC","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nexport * from './components';\nexport * from './components/category-filter/filter-state';\nexport * from './components/category-filter/input-state';\nexport * from './components/category-filter/logical-filter-operator';\nexport { FlipTileState } from './components/flip-tile/flip-tile-state';\nexport * from './components/modal/modal-utils';\nexport * from './components/toast/toast-utils';\nexport * from './components/tree-item/default-tree-item';\nexport * from './components/tree/tree-model';\nexport { NotificationColor } from './components/utils/notification-color';\nexport {\n  convertToAbbreviationString,\n  convertToRemString,\n} from './components/utils/rwd.util';\nexport * from './components/utils/theme-switcher';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,cAAc,cAAc,CAAC;AAC7B,cAAc,2CAA2C,CAAC;AAC1D,cAAc,0CAA0C,CAAC;AACzD,cAAc,sDAAsD,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAC;AACvE,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0CAA0C,CAAC;AACzD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uCAAuC,CAAC;AAEtD,OAAO,EACL,2BAA2B,EAC3B,kBAAkB,GACnB,MAAM,6BAA6B,CAAC;AACrC,cAAc,mCAAmC,CAAC","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nexport * from './components';\nexport * from './components/category-filter/filter-state';\nexport * from './components/category-filter/input-state';\nexport * from './components/category-filter/logical-filter-operator';\nexport { FlipTileState } from './components/flip-tile/flip-tile-state';\nexport * from './components/modal/modal-utils';\nexport * from './components/toast/toast-utils';\nexport * from './components/tree-item/default-tree-item';\nexport * from './components/tree/tree-model';\nexport * from './components/upload/upload-file-state';\nexport { NotificationColor } from './components/utils/notification-color';\nexport {\n  convertToAbbreviationString,\n  convertToRemString,\n} from './components/utils/rwd.util';\nexport * from './components/utils/theme-switcher';\n"]}

package/dist/collection/tests/utils/test/page.js

@@ -15,7 +15,6 @@ async function extendPageFixture(page, testInfo) {
   });
   page.goto = async (url, options) => {
     const response = await originalGoto(`http://127.0.0.1:8080/src/tests/${url}?theme=${theme}`, options);
-    // Inital timeout for webKit to render Web Components
     await page.waitForTimeout(1000);
     return response;
   };
@@ -27,4 +26,33 @@ export const regressionTest = base.extend({
     await use(page);
   },
 });
+export const test = base.extend({
+  createElement: async ({ page }, use) => {
+    use((selector, appendTo) => page.evaluateHandle(async ({ selector, appendTo }) => {
+      const elm = document.createElement(selector);
+      if (appendTo) {
+        appendTo.appendChild(elm);
+      }
+      return elm;
+    }, {
+      selector,
+      appendTo,
+    }));
+  },
+  mount: async ({ page }, use, testInfo) => {
+    const theme = testInfo.project.metadata.theme;
+    testInfo.annotations.push({
+      type: theme,
+    });
+    await page.goto(`http://127.0.0.1:8080/src/tests/utils/ct/index.html?theme=${theme}`);
+    use((selector) => {
+      return page.evaluateHandle(async ({ componentSelector }) => {
+        await window.customElements.whenDefined('ix-button');
+        const mount = document.querySelector('#mount');
+        mount.innerHTML = componentSelector;
+        return mount.children.item(0);
+      }, { componentSelector: selector });
+    });
+  },
+});
 //# sourceMappingURL=page.js.map

package/dist/collection/tests/utils/test/page.js.map

@@ -1 +1 @@
-{"version":3,"file":"page.js","sourceRoot":"","sources":["../../../../src/tests/utils/test/page.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAQ,IAAI,IAAI,IAAI,EAAY,MAAM,kBAAkB,CAAC;AAEhE,KAAK,UAAU,iBAAiB,CAAC,IAAU,EAAE,QAAkB;EAC7D,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC1C,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC;EAC9C,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC;IACxB,IAAI,EAAE,KAAK;GACZ,CAAC,CAAC;EACH,IAAI,CAAC,IAAI,GAAG,KAAK,EAAE,GAAW,EAAE,OAAO,EAAE,EAAE;IACzC,MAAM,QAAQ,GAAG,MAAM,YAAY,CACjC,mCAAmC,GAAG,UAAU,KAAK,EAAE,EACvD,OAAO,CACR,CAAC;IAEF,qDAAqD;IACrD,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;IAChC,OAAO,QAAQ,CAAC;EAClB,CAAC,CAAC;EAEF,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,CAAC;EACxC,IAAI,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE;IACtC,IAAI,GAAG,MAAM,iBAAiB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IAC/C,MAAM,GAAG,CAAC,IAAI,CAAC,CAAC;EAClB,CAAC;CACF,CAAC,CAAC","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Page, test as base, TestInfo } from '@playwright/test';\n\nasync function extendPageFixture(page: Page, testInfo: TestInfo) {\n  const originalGoto = page.goto.bind(page);\n  const theme = testInfo.project.metadata.theme;\n  testInfo.annotations.push({\n    type: theme,\n  });\n  page.goto = async (url: string, options) => {\n    const response = await originalGoto(\n      `http://127.0.0.1:8080/src/tests/${url}?theme=${theme}`,\n      options\n    );\n\n    // Inital timeout for webKit to render Web Components\n    await page.waitForTimeout(1000);\n    return response;\n  };\n\n  return page;\n}\n\nexport const regressionTest = base.extend({\n  page: async ({ page }, use, testInfo) => {\n    page = await extendPageFixture(page, testInfo);\n    await use(page);\n  },\n});\n"]}
+{"version":3,"file":"page.js","sourceRoot":"","sources":["../../../../src/tests/utils/test/page.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAuB,IAAI,IAAI,IAAI,EAAY,MAAM,kBAAkB,CAAC;AAE/E,KAAK,UAAU,iBAAiB,CAAC,IAAU,EAAE,QAAkB;EAC7D,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC1C,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC;EAC9C,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC;IACxB,IAAI,EAAE,KAAK;GACZ,CAAC,CAAC;EACH,IAAI,CAAC,IAAI,GAAG,KAAK,EAAE,GAAW,EAAE,OAAO,EAAE,EAAE;IACzC,MAAM,QAAQ,GAAG,MAAM,YAAY,CACjC,mCAAmC,GAAG,UAAU,KAAK,EAAE,EACvD,OAAO,CACR,CAAC;IAEF,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;IAChC,OAAO,QAAQ,CAAC;EAClB,CAAC,CAAC;EAEF,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,CAAC;EACxC,IAAI,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE;IACtC,IAAI,GAAG,MAAM,iBAAiB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IAC/C,MAAM,GAAG,CAAC,IAAI,CAAC,CAAC;EAClB,CAAC;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAM5B;EACD,aAAa,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;IACrC,GAAG,CAAC,CAAC,QAAQ,EAAE,QAAQ,EAAE,EAAE,CACzB,IAAI,CAAC,cAAc,CACjB,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE;MAC/B,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;MAE7C,IAAI,QAAQ,EAAE;QACZ,QAAQ,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;OAC3B;MAED,OAAO,GAAG,CAAC;IACb,CAAC,EACD;MACE,QAAQ;MACR,QAAQ;KACT,CACF,CACF,CAAC;EACJ,CAAC;EACD,KAAK,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE;IACvC,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC;IAC9C,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC;MACxB,IAAI,EAAE,KAAK;KACZ,CAAC,CAAC;IACH,MAAM,IAAI,CAAC,IAAI,CACb,6DAA6D,KAAK,EAAE,CACrE,CAAC;IACF,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;MACf,OAAO,IAAI,CAAC,cAAc,CACxB,KAAK,EAAE,EAAE,iBAAiB,EAAE,EAAE,EAAE;QAC9B,MAAM,MAAM,CAAC,cAAc,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;QACrD,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC/C,KAAK,CAAC,SAAS,GAAG,iBAAiB,CAAC;QACpC,OAAO,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAgB,CAAC;MAC/C,CAAC,EACD,EAAE,iBAAiB,EAAE,QAAQ,EAAE,CAChC,CAAC;IACJ,CAAC,CAAC,CAAC;EACL,CAAC;CACF,CAAC,CAAC","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { ElementHandle, Page, test as base, TestInfo } from '@playwright/test';\n\nasync function extendPageFixture(page: Page, testInfo: TestInfo) {\n  const originalGoto = page.goto.bind(page);\n  const theme = testInfo.project.metadata.theme;\n  testInfo.annotations.push({\n    type: theme,\n  });\n  page.goto = async (url: string, options) => {\n    const response = await originalGoto(\n      `http://127.0.0.1:8080/src/tests/${url}?theme=${theme}`,\n      options\n    );\n\n    await page.waitForTimeout(1000);\n    return response;\n  };\n\n  return page;\n}\n\nexport const regressionTest = base.extend({\n  page: async ({ page }, use, testInfo) => {\n    page = await extendPageFixture(page, testInfo);\n    await use(page);\n  },\n});\n\nexport const test = base.extend<{\n  mount: (selector: string) => Promise<ElementHandle<HTMLElement>>;\n  createElement: (\n    selector: string,\n    appendTo?: ElementHandle<Element>\n  ) => Promise<ElementHandle<HTMLElement>>;\n}>({\n  createElement: async ({ page }, use) => {\n    use((selector, appendTo) =>\n      page.evaluateHandle(\n        async ({ selector, appendTo }) => {\n          const elm = document.createElement(selector);\n\n          if (appendTo) {\n            appendTo.appendChild(elm);\n          }\n\n          return elm;\n        },\n        {\n          selector,\n          appendTo,\n        }\n      )\n    );\n  },\n  mount: async ({ page }, use, testInfo) => {\n    const theme = testInfo.project.metadata.theme;\n    testInfo.annotations.push({\n      type: theme,\n    });\n    await page.goto(\n      `http://127.0.0.1:8080/src/tests/utils/ct/index.html?theme=${theme}`\n    );\n    use((selector) => {\n      return page.evaluateHandle(\n        async ({ componentSelector }) => {\n          await window.customElements.whenDefined('ix-button');\n          const mount = document.querySelector('#mount');\n          mount.innerHTML = componentSelector;\n          return mount.children.item(0) as HTMLElement;\n        },\n        { componentSelector: selector }\n      );\n    });\n  },\n});\n"]}

package/dist/components/application-header.js

@@ -4,7 +4,7 @@ import { d as defineCustomElement$1 } from './burger-menu.js';
 
 const applicationHeaderCss = ":host{display:flex;align-items:center;position:relative;width:100%;height:2.75rem;padding-left:1rem;color:var(--theme-app-header--color);background-color:var(--theme-app-header--background);border-bottom:var(--theme-app-header--border-width) solid var(--theme-app-header--border-color)}:host .name{margin-left:2.5rem;margin-right:2.5rem;color:var(--theme-app-header--color)}:host .logo{display:inline-flex;align-items:center;position:relative;height:32px;overflow:hidden;line-height:0rem;color:var(--theme-app-header-logo--color)}:host(.mode-mobile){padding-left:0.5rem}:host(.mode-mobile) .logo{margin-left:0.5rem}";
 
-const ApplicationHeader = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const ApplicationHeader = /*@__PURE__*/ proxyCustomElement(class ApplicationHeader extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();

package/dist/components/burger-menu.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 
 const burgerMenuCss = ":host{display:flex;justify-content:center;align-items:center;height:2rem;width:2.5rem;border-radius:var(--theme-btn--border-radius)}:host svg{display:inline-block;position:relative}:host .line{fill:var(--theme-menu-btn--color);opacity:1;x:2px;transition:x 0.075s ease-in 0.15s, transform 0.075s ease-in-out 0.075s, y 0.075s ease-in-out, opacity 0.075s linear 0.075s;transform-origin:center}:host(:hover){background-color:var(--theme-menu-btn--background--hover);border-radius:var(--theme-btn--border-radius)}:host(:active){background-color:var(--theme-menu-btn--background--active);border-radius:var(--theme-btn--border-radius)}:host(.expanded) svg .line-1{opacity:1;transform:rotate(-45deg);y:11px}:host(.expanded) svg .line-2{opacity:0;x:9}:host(.expanded) svg .line-3{opacity:1;transform:rotate(45deg);y:11px}";
 
-const BurgerMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const BurgerMenu = /*@__PURE__*/ proxyCustomElement(class BurgerMenu extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();

package/dist/components/button.js

@@ -3,7 +3,7 @@ import { g as getButtonClasses } from './base-button.js';
 
 const buttonCss = ".sc-ix-button-h{display:inline-block;width:auto;height:2rem}.disabled.sc-ix-button-h{pointer-events:none}.sc-ix-button-h .btn.sc-ix-button{width:100%;height:100%}";
 
-const Button = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();