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

package/dist/collection/components/tooltip/tooltip.js

@@ -6,7 +6,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { arrow, autoPlacement, autoUpdate, computePosition, offset, shift, } from '@floating-ui/dom';
+import { arrow, autoUpdate, computePosition, flip, offset, shift, } from '@floating-ui/dom';
 import { h, Host } from '@stencil/core';
 /**
  * @slot title-icon - Icon of tooltip title
@@ -28,7 +28,7 @@ export class Tooltip {
     return this.hostElement.shadowRoot.querySelector('.arrow');
   }
   destroyAutoUpdate() {
-    if (this.disposeAutoUpdate) {
+    if (this.disposeAutoUpdate !== undefined) {
       this.disposeAutoUpdate();
     }
   }
@@ -45,32 +45,36 @@ export class Tooltip {
   }
   async computeTooltipPosition(target) {
     this.disposeAutoUpdate = autoUpdate(target, this.hostElement, async () => {
-      const computeResponse = await computePosition(target, this.hostElement, {
-        strategy: 'absolute',
-        placement: 'top',
-        middleware: [
-          shift(),
-          offset(8),
-          arrow({
-            element: this.arrowElement,
-          }),
-          autoPlacement({
-            alignment: 'start',
-            allowedPlacements: ['top', 'bottom', 'right', 'left'],
-          }),
-        ],
-      });
-      if (computeResponse.middlewareData.arrow) {
-        const { x, y } = computeResponse.middlewareData.arrow;
-        Object.assign(this.arrowElement.style, {
-          left: x != null ? `${x}px` : '',
-          top: y != null ? `${y}px` : '',
+      requestAnimationFrame(async () => {
+        const computeResponse = await computePosition(target, this.hostElement, {
+          strategy: 'fixed',
+          placement: 'top',
+          middleware: [
+            shift(),
+            offset(8),
+            arrow({
+              element: this.arrowElement,
+            }),
+            flip({
+              fallbackStrategy: 'initialPlacement',
+            }),
+          ],
+        });
+        if (computeResponse.middlewareData.arrow) {
+          let { x, y } = computeResponse.middlewareData.arrow;
+          if (computeResponse.placement === 'bottom') {
+            y = -4;
+          }
+          Object.assign(this.arrowElement.style, {
+            left: x != null ? `${x}px` : '',
+            top: y != null ? `${y}px` : '',
+          });
+        }
+        const { x, y } = computeResponse;
+        Object.assign(this.hostElement.style, {
+          left: x !== null ? `${x}px` : '',
+          top: y !== null ? `${y}px` : '',
         });
-      }
-      const { x, y } = computeResponse;
-      Object.assign(this.hostElement.style, {
-        left: x !== null ? `${x}px` : '',
-        top: y !== null ? `${y}px` : '',
       });
     }, {
       ancestorResize: true,

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.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 */\nimport {\n  arrow,\n  autoPlacement,\n  autoUpdate,\n  computePosition,\n  offset,\n  shift,\n} from '@floating-ui/dom';\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n/**\n * @slot title-icon - Icon of tooltip title\n * @slot title-content - Content of tooltip title\n *\n * @since 1.4.0\n */\n@Component({\n  tag: 'ix-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true,\n})\nexport class Tooltip {\n  /**\n   * CSS selector for hover trigger element e.g. `for=\"[data-my-custom-select]\"`\n   */\n  @Prop() for: string;\n\n  /**\n   * Title of the tooltip\n   */\n  @Prop() titleContent: string;\n\n  /**\n   * Define if the user can access the tooltip via mouse.\n   */\n  @Prop() interactive = false;\n\n  @State() visible = false;\n\n  @Element() hostElement: HTMLIxTooltipElement;\n\n  private observer: MutationObserver;\n  private hideTooltipTimeout: NodeJS.Timeout;\n  private onMouseEnterBind = this.showTooltip.bind(this);\n  private onMouseLeaveBind = this.hideTooltip.bind(this);\n  private disposeAutoUpdate?: () => void;\n  private tooltipCloseTimeInMS = 50;\n\n  private get arrowElement() {\n    return this.hostElement.shadowRoot.querySelector('.arrow') as HTMLElement;\n  }\n\n  private destroyAutoUpdate() {\n    if (this.disposeAutoUpdate) {\n      this.disposeAutoUpdate();\n    }\n  }\n\n  private showTooltip(e: any) {\n    clearTimeout(this.hideTooltipTimeout);\n    this.visible = true;\n    this.computeTooltipPosition(e.target);\n  }\n\n  private hideTooltip() {\n    this.hideTooltipTimeout = setTimeout(() => {\n      this.visible = false;\n    }, this.tooltipCloseTimeInMS);\n    this.destroyAutoUpdate();\n  }\n\n  private async computeTooltipPosition(target: HTMLElement) {\n    this.disposeAutoUpdate = autoUpdate(\n      target,\n      this.hostElement,\n      async () => {\n        const computeResponse = await computePosition(\n          target,\n          this.hostElement,\n          {\n            strategy: 'absolute',\n            placement: 'top',\n            middleware: [\n              shift(),\n              offset(8),\n              arrow({\n                element: this.arrowElement,\n              }),\n              autoPlacement({\n                alignment: 'start',\n                allowedPlacements: ['top', 'bottom', 'right', 'left'],\n              }),\n            ],\n          }\n        );\n\n        if (computeResponse.middlewareData.arrow) {\n          const { x, y } = computeResponse.middlewareData.arrow;\n\n          Object.assign(this.arrowElement.style, {\n            left: x != null ? `${x}px` : '',\n            top: y != null ? `${y}px` : '',\n          });\n        }\n\n        const { x, y } = computeResponse;\n        Object.assign(this.hostElement.style, {\n          left: x !== null ? `${x}px` : '',\n          top: y !== null ? `${y}px` : '',\n        });\n      },\n      {\n        ancestorResize: true,\n        ancestorScroll: true,\n        elementResize: true,\n      }\n    );\n  }\n\n  private queryAnchorElements() {\n    return Array.from(document.querySelectorAll(this.for));\n  }\n\n  private registerTriggerListener() {\n    const elements = this.queryAnchorElements();\n    elements.forEach((e) => {\n      e.addEventListener('mouseenter', this.onMouseEnterBind);\n      e.addEventListener('mouseleave', this.onMouseLeaveBind);\n    });\n  }\n\n  private registerTooltipListener() {\n    this.hostElement.addEventListener('mouseenter', () => {\n      if (this.interactive) {\n        clearTimeout(this.hideTooltipTimeout);\n      }\n    });\n    this.hostElement.addEventListener('mouseleave', () => {\n      this.hideTooltip();\n    });\n  }\n\n  componentDidLoad() {\n    if (this.interactive) {\n      this.tooltipCloseTimeInMS = 150;\n    }\n\n    this.observer = new MutationObserver(() => {\n      this.registerTriggerListener();\n    });\n\n    this.observer.observe(document.body, {\n      attributes: true,\n      attributeFilter: ['data-ix-tooltip'],\n      childList: true,\n      subtree: true,\n    });\n\n    this.registerTriggerListener();\n    this.registerTooltipListener();\n  }\n\n  disconnectedCallback() {\n    this.observer.disconnect();\n    this.destroyAutoUpdate();\n  }\n\n  render() {\n    const tooltipContentClass = {\n      'tooltip-content': true,\n    };\n\n    return (\n      <Host\n        class={{\n          visible: this.visible,\n        }}\n      >\n        <div class={'tooltip-title'}>\n          <slot name=\"title-icon\"></slot>\n          <ix-typography variant=\"default-title\">\n            {this.titleContent}\n            <slot name=\"title-content\"></slot>\n          </ix-typography>\n        </div>\n        <div class={tooltipContentClass}>\n          <slot></slot>\n        </div>\n        <div class=\"arrow\"></div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.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 */\nimport {\n  arrow,\n  autoUpdate,\n  computePosition,\n  flip,\n  offset,\n  shift,\n} from '@floating-ui/dom';\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n/**\n * @slot title-icon - Icon of tooltip title\n * @slot title-content - Content of tooltip title\n *\n * @since 1.4.0\n */\n@Component({\n  tag: 'ix-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true,\n})\nexport class Tooltip {\n  /**\n   * CSS selector for hover trigger element e.g. `for=\"[data-my-custom-select]\"`\n   */\n  @Prop() for: string;\n\n  /**\n   * Title of the tooltip\n   */\n  @Prop() titleContent: string;\n\n  /**\n   * Define if the user can access the tooltip via mouse.\n   */\n  @Prop() interactive = false;\n\n  @State() visible = false;\n\n  @Element() hostElement: HTMLIxTooltipElement;\n\n  private observer: MutationObserver;\n  private hideTooltipTimeout: NodeJS.Timeout;\n  private onMouseEnterBind = this.showTooltip.bind(this);\n  private onMouseLeaveBind = this.hideTooltip.bind(this);\n  private disposeAutoUpdate?: () => void;\n  private tooltipCloseTimeInMS = 50;\n\n  private get arrowElement() {\n    return this.hostElement.shadowRoot.querySelector('.arrow') as HTMLElement;\n  }\n\n  private destroyAutoUpdate() {\n    if (this.disposeAutoUpdate !== undefined) {\n      this.disposeAutoUpdate();\n    }\n  }\n\n  private showTooltip(e: any) {\n    clearTimeout(this.hideTooltipTimeout);\n    this.visible = true;\n    this.computeTooltipPosition(e.target);\n  }\n\n  private hideTooltip() {\n    this.hideTooltipTimeout = setTimeout(() => {\n      this.visible = false;\n    }, this.tooltipCloseTimeInMS);\n    this.destroyAutoUpdate();\n  }\n\n  private async computeTooltipPosition(target: HTMLElement) {\n    this.disposeAutoUpdate = autoUpdate(\n      target,\n      this.hostElement,\n      async () => {\n        requestAnimationFrame(async () => {\n          const computeResponse = await computePosition(\n            target,\n            this.hostElement,\n            {\n              strategy: 'fixed',\n              placement: 'top',\n              middleware: [\n                shift(),\n                offset(8),\n                arrow({\n                  element: this.arrowElement,\n                }),\n                flip({\n                  fallbackStrategy: 'initialPlacement',\n                }),\n              ],\n            }\n          );\n\n          if (computeResponse.middlewareData.arrow) {\n            let { x, y } = computeResponse.middlewareData.arrow;\n\n            if (computeResponse.placement === 'bottom') {\n              y = -4;\n            }\n\n            Object.assign(this.arrowElement.style, {\n              left: x != null ? `${x}px` : '',\n              top: y != null ? `${y}px` : '',\n            });\n          }\n\n          const { x, y } = computeResponse;\n          Object.assign(this.hostElement.style, {\n            left: x !== null ? `${x}px` : '',\n            top: y !== null ? `${y}px` : '',\n          });\n        });\n      },\n      {\n        ancestorResize: true,\n        ancestorScroll: true,\n        elementResize: true,\n      }\n    );\n  }\n\n  private queryAnchorElements() {\n    return Array.from(document.querySelectorAll(this.for));\n  }\n\n  private registerTriggerListener() {\n    const elements = this.queryAnchorElements();\n    elements.forEach((e) => {\n      e.addEventListener('mouseenter', this.onMouseEnterBind);\n      e.addEventListener('mouseleave', this.onMouseLeaveBind);\n    });\n  }\n\n  private registerTooltipListener() {\n    this.hostElement.addEventListener('mouseenter', () => {\n      if (this.interactive) {\n        clearTimeout(this.hideTooltipTimeout);\n      }\n    });\n    this.hostElement.addEventListener('mouseleave', () => {\n      this.hideTooltip();\n    });\n  }\n\n  componentDidLoad() {\n    if (this.interactive) {\n      this.tooltipCloseTimeInMS = 150;\n    }\n\n    this.observer = new MutationObserver(() => {\n      this.registerTriggerListener();\n    });\n\n    this.observer.observe(document.body, {\n      attributes: true,\n      attributeFilter: ['data-ix-tooltip'],\n      childList: true,\n      subtree: true,\n    });\n\n    this.registerTriggerListener();\n    this.registerTooltipListener();\n  }\n\n  disconnectedCallback() {\n    this.observer.disconnect();\n    this.destroyAutoUpdate();\n  }\n\n  render() {\n    const tooltipContentClass = {\n      'tooltip-content': true,\n    };\n\n    return (\n      <Host\n        class={{\n          visible: this.visible,\n        }}\n      >\n        <div class={'tooltip-title'}>\n          <slot name=\"title-icon\"></slot>\n          <ix-typography variant=\"default-title\">\n            {this.titleContent}\n            <slot name=\"title-content\"></slot>\n          </ix-typography>\n        </div>\n        <div class={tooltipContentClass}>\n          <slot></slot>\n        </div>\n        <div class=\"arrow\"></div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -29,6 +29,7 @@ export class Tree {
           e.stopPropagation();
           const context = this.getContext(list[index].id);
           context.isExpanded = !context.isExpanded;
+          this.nodeToggled.emit({ id: item.id, isExpaned: context.isExpanded });
           this.setContext(item.id, context);
         };
         el.addEventListener('toggle', toggleCallback);
@@ -74,6 +75,7 @@ export class Tree {
             const context = this.getContext(item.id);
             context.isSelected = true;
             this.setContext(item.id, context);
+            this.nodeClicked.emit(item.id);
           };
           el.addEventListener('itemClick', itemClickCallback);
           this.itemClickListener.set(el, itemClickCallback);
@@ -303,6 +305,42 @@ export class Tree {
             }
           }
         }
+      }, {
+        "method": "nodeToggled",
+        "name": "nodeToggled",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "since",
+              "text": "1.5.0"
+            }],
+          "text": "Node toggled event"
+        },
+        "complexType": {
+          "original": "{ id: string; isExpaned: boolean }",
+          "resolved": "{ id: string; isExpaned: boolean; }",
+          "references": {}
+        }
+      }, {
+        "method": "nodeClicked",
+        "name": "nodeClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "since",
+              "text": "1.5.0"
+            }],
+          "text": "Node clicked event"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
       }, {
         "method": "nodeRemoved",
         "name": "nodeRemoved",

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/workflow-step/workflow-step.css

@@ -37,6 +37,7 @@
   width: 100%;
   align-items: center;
   justify-content: center;
+  position: relative;
 }
 :host .step .wrapper .line {
   width: 100%;

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/components/dropdown-item.js

@@ -26,7 +26,7 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         'icon-text': this.label !== undefined && this.icon !== undefined,
         'icon-only': this.label === undefined && this.icon !== undefined,
         disabled: this.disabled,
-      } }, h("button", { class: {
+      } }, h("button", { type: "button", class: {
         'dropdown-item': true,
         hover: this.hover,
         disabled: this.disabled,

package/dist/components/dropdown-item.js.map

@@ -1 +1 @@
-{"file":"dropdown-item.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,y+BAAy+B;;MCyBp/B,YAAY;;;;;;;iBAgBP,KAAK;oBAKF,KAAK;mBAKN,KAAK;;;;;EAWvB,MAAM,aAAa;IACjB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GACvC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,WAAW,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;QAChE,WAAW,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;QAChE,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,cACE,KAAK,EAAE;QACL,eAAe,EAAE,IAAI;QACrB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,IAElC,IAAI,CAAC,OAAO,IACX,eAAS,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,IAAI,GAAW,IACjE,IAAI,EAEP,IAAI,CAAC,IAAI,IACR,YACE,KAAK,EAAE;QACL,KAAK,EAAE,IAAI;QACX,CAAC,SAAS,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;QAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,GACK,IACN,IAAI,EAEP,IAAI,CAAC,KAAK,GAAG,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,GAAG,IAAI,EAC5D,eAAa,CACN,CACJ,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/dropdown-item/dropdown-item.scss?tag=ix-dropdown-item&encapsulation=scoped","./src/components/dropdown-item/dropdown-item.tsx"],"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@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  display: block;\n  min-width: 10rem;\n\n  &.icon-only {\n    min-width: 0;\n\n    .dropdown-item > .glyph {\n      margin-inline-end: 0;\n    }\n\n    .dropdown-item {\n      padding: $tiny-space $small-space;\n\n      @include focus-visible {\n        border-color: #199fff;\n      }\n    }\n  }\n\n  :focus {\n    background-color: transparent;\n    color: var(--theme-menu-item--color);\n  }\n\n  .checkmark {\n    position: absolute;\n    left: $small-space;\n  }\n\n  &.checked {\n    background-color: var(--theme-select-list-item--background--selected);\n  }\n\n  .label {\n    @include ellipsis;\n  }\n\n  &.disabled {\n    pointer-events: none;\n  }\n}\n\n::slotted(ix-icon) {\n  margin-inline-start: auto;\n}\n","/*\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  Method,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-dropdown-item',\n  styleUrl: 'dropdown-item.scss',\n  scoped: true,\n})\nexport class DropdownItem {\n  @Element() hostElement!: HTMLIxDropdownItemElement;\n\n  /**\n   * Label of dropdown item\n   */\n  @Prop() label: string;\n\n  /**\n   * Icon of dropdown item\n   */\n  @Prop() icon: string;\n\n  /**\n   * Display hover state\n   */\n  @Prop() hover = false;\n\n  /**\n   * Disable item and remove event listeners\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Whether the item is checked or not. If true a checkmark will mark the item as checked.\n   */\n  @Prop() checked = false;\n\n  /**\n   * Click on item\n   */\n  @Event() itemClick: EventEmitter<HTMLIxDropdownItemElement>;\n\n  /**\n   * Internal usage only\n   */\n  @Method()\n  async emitItemClick() {\n    this.itemClick.emit(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          checked: this.checked,\n          'icon-text': this.label !== undefined && this.icon !== undefined,\n          'icon-only': this.label === undefined && this.icon !== undefined,\n          disabled: this.disabled,\n        }}\n      >\n        <button\n          class={{\n            'dropdown-item': true,\n            hover: this.hover,\n            disabled: this.disabled,\n          }}\n          onClick={() => this.emitItemClick()}\n        >\n          {this.checked ? (\n            <ix-icon class=\"checkmark\" name=\"single-check\" size=\"16\"></ix-icon>\n          ) : null}\n\n          {this.icon ? (\n            <span\n              class={{\n                glyph: true,\n                [`glyph-${this.icon}`]: true,\n                disabled: this.disabled,\n              }}\n            ></span>\n          ) : null}\n\n          {this.label ? <span class=\"label\">{this.label}</span> : null}\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropdown-item.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,y+BAAy+B;;MCyBp/B,YAAY;;;;;;;iBAgBP,KAAK;oBAKF,KAAK;mBAKN,KAAK;;;;;EAWvB,MAAM,aAAa;IACjB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GACvC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,WAAW,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;QAChE,WAAW,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;QAChE,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;QACL,eAAe,EAAE,IAAI;QACrB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,IAElC,IAAI,CAAC,OAAO,IACX,eAAS,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,IAAI,GAAW,IACjE,IAAI,EAEP,IAAI,CAAC,IAAI,IACR,YACE,KAAK,EAAE;QACL,KAAK,EAAE,IAAI;QACX,CAAC,SAAS,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;QAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,GACK,IACN,IAAI,EAEP,IAAI,CAAC,KAAK,GAAG,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,GAAG,IAAI,EAC5D,eAAa,CACN,CACJ,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/dropdown-item/dropdown-item.scss?tag=ix-dropdown-item&encapsulation=scoped","./src/components/dropdown-item/dropdown-item.tsx"],"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@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  display: block;\n  min-width: 10rem;\n\n  &.icon-only {\n    min-width: 0;\n\n    .dropdown-item > .glyph {\n      margin-inline-end: 0;\n    }\n\n    .dropdown-item {\n      padding: $tiny-space $small-space;\n\n      @include focus-visible {\n        border-color: #199fff;\n      }\n    }\n  }\n\n  :focus {\n    background-color: transparent;\n    color: var(--theme-menu-item--color);\n  }\n\n  .checkmark {\n    position: absolute;\n    left: $small-space;\n  }\n\n  &.checked {\n    background-color: var(--theme-select-list-item--background--selected);\n  }\n\n  .label {\n    @include ellipsis;\n  }\n\n  &.disabled {\n    pointer-events: none;\n  }\n}\n\n::slotted(ix-icon) {\n  margin-inline-start: auto;\n}\n","/*\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  Method,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-dropdown-item',\n  styleUrl: 'dropdown-item.scss',\n  scoped: true,\n})\nexport class DropdownItem {\n  @Element() hostElement!: HTMLIxDropdownItemElement;\n\n  /**\n   * Label of dropdown item\n   */\n  @Prop() label: string;\n\n  /**\n   * Icon of dropdown item\n   */\n  @Prop() icon: string;\n\n  /**\n   * Display hover state\n   */\n  @Prop() hover = false;\n\n  /**\n   * Disable item and remove event listeners\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Whether the item is checked or not. If true a checkmark will mark the item as checked.\n   */\n  @Prop() checked = false;\n\n  /**\n   * Click on item\n   */\n  @Event() itemClick: EventEmitter<HTMLIxDropdownItemElement>;\n\n  /**\n   * Internal usage only\n   */\n  @Method()\n  async emitItemClick() {\n    this.itemClick.emit(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          checked: this.checked,\n          'icon-text': this.label !== undefined && this.icon !== undefined,\n          'icon-only': this.label === undefined && this.icon !== undefined,\n          disabled: this.disabled,\n        }}\n      >\n        <button\n          type=\"button\"\n          class={{\n            'dropdown-item': true,\n            hover: this.hover,\n            disabled: this.disabled,\n          }}\n          onClick={() => this.emitItemClick()}\n        >\n          {this.checked ? (\n            <ix-icon class=\"checkmark\" name=\"single-check\" size=\"16\"></ix-icon>\n          ) : null}\n\n          {this.icon ? (\n            <span\n              class={{\n                glyph: true,\n                [`glyph-${this.icon}`]: true,\n                disabled: this.disabled,\n              }}\n            ></span>\n          ) : null}\n\n          {this.label ? <span class=\"label\">{this.label}</span> : null}\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/filter-chip.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './icon.js';
 
-const filterChipCss = ".sc-ix-filter-chip-h{display:flex;align-items:center;justify-content:space-between;height:1.5rem;padding-left:0.5rem;border:var(--theme-focus--border-thickness) solid transparent;border-radius:2rem;background-color:var(--theme-chip--background);color:var(--theme-chip--color)}.sc-ix-filter-chip-h:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-filter-chip-h:not(.disabled):not(:disabled):hover{background-color:var(--theme-chip--background--hover)}.sc-ix-filter-chip-h:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-filter-chip-h:not(.disabled):not(:disabled):active{background-color:var(--theme-chip--background--active)}.sc-ix-filter-chip-h:not(.disabled):not(:disabled):focus-visible{border-color:#199fff}.sc-ix-filter-chip-h .slot-container.sc-ix-filter-chip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-ix-filter-chip-h .slot-container.sc-ix-filter-chip .disabled.sc-ix-filter-chip-h,.disabled .sc-ix-filter-chip-h{color:var(--theme-chip--color-diabled)}.sc-ix-filter-chip-h .btn-oval.sc-ix-filter-chip{height:1.5rem;width:1.5rem;min-width:1.5rem;margin-left:0.25rem;padding:0;vertical-align:top}.sc-ix-filter-chip-h .btn-oval.sc-ix-filter-chip:not(.disabled):not(:disabled):focus-visible{outline:none;border-color:#199fff}";
+const filterChipCss = ".sc-ix-filter-chip-h{display:flex;align-items:center;justify-content:space-between;height:1.5rem;padding-left:0.5rem;border:var(--theme-focus--border-thickness) solid var(--theme-chip-primary-outline--border-color);border-radius:2rem;background-color:var(--theme-color-ghost);color:var(--theme-chip-primary-outline--color)}.sc-ix-filter-chip-h:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-filter-chip-h:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost-primary--hover);border-color:var(--theme-chip-primary-outline--border-color--hover);color:var(--theme-chip-primary-outline--color--hover)}.sc-ix-filter-chip-h:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-filter-chip-h:not(.disabled):not(:disabled):active{background-color:var(--theme-color-ghost-primary--active);border-color:var(--theme-chip-primary-outline--border-color--active);color:var(--theme-chip-primary-outline--color--active)}.sc-ix-filter-chip-h:not(.disabled):not(:disabled):focus-visible{outline:var(--theme-color-focus-bdr) solid var(--theme-focus--border-thickness);outline-offset:-0.125rem}.sc-ix-filter-chip-h .slot-container.sc-ix-filter-chip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-ix-filter-chip-h .slot-container.sc-ix-filter-chip .disabled.sc-ix-filter-chip-h,.disabled .sc-ix-filter-chip-h{background-color:var(--theme-color-ghost);border-color:var(--theme-color-component-4);color:var(--theme-color-weak-text)}.sc-ix-filter-chip-h .btn-oval.sc-ix-filter-chip{height:1.5rem;width:1.5rem;min-width:1.5rem;margin-left:0.25rem;padding:0;vertical-align:top}.sc-ix-filter-chip-h .btn-oval.sc-ix-filter-chip:not(.disabled):not(:disabled):focus-visible{outline:none;border-color:#199fff}";
 
 const FilterChip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -16,7 +16,7 @@ const FilterChip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.closeClick.emit();
   }
   render() {
-    return (h(Host, { class: { disabled: this.disabled }, title: this.el.textContent }, h("div", { class: "slot-container" }, h("slot", null)), h("button", { disabled: this.disabled, class: "btn btn-invisible-secondary btn-oval", onClick: (e) => this.onCloseClick(e) }, h("ix-icon", { name: "close-small", size: "16" }))));
+    return (h(Host, { class: { disabled: this.disabled }, title: this.el.textContent }, h("div", { class: "slot-container" }, h("slot", null)), h("button", { disabled: this.disabled, class: "btn btn-invisible-primary btn-oval", onClick: (e) => this.onCloseClick(e) }, h("ix-icon", { name: "close-small", size: "16" }))));
   }
   get el() { return this; }
   static get style() { return filterChipCss; }

package/dist/components/filter-chip.js.map

@@ -1 +1 @@
-{"file":"filter-chip.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,yuCAAyuC;;MCwBlvC,UAAU;;;;;oBAMF,KAAK;;EAOhB,YAAY,CAAC,KAAY;IAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,eAAe,EAAE,CAAC;IACxB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;GACxB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,WAAW,IAClE,WAAK,KAAK,EAAC,gBAAgB,IACzB,eAAa,CACT,EACN,cACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,sCAAsC,EAC5C,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAEpC,eAAS,IAAI,EAAC,aAAa,EAAC,IAAI,EAAC,IAAI,GAAW,CACzC,CACJ,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/filter-chip/filter-chip.scss?tag=ix-filter-chip&encapsulation=scoped","./src/components/filter-chip/filter-chip.tsx"],"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@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: $large-space;\n  padding-left: $small-space;\n  border: var(--theme-focus--border-thickness) solid transparent;\n  border-radius: $x-large-space;\n  background-color: var(--theme-chip--background);\n  color: var(--theme-chip--color);\n\n  @include hover {\n    background-color: var(--theme-chip--background--hover);\n  }\n\n  @include active {\n    background-color: var(--theme-chip--background--active);\n  }\n\n  @include focus-visible {\n    border-color: #199fff;\n  }\n\n  .slot-container {\n    @include ellipsis;\n\n    :host-context(.disabled) {\n      color: var(--theme-chip--color-diabled);\n    }\n  }\n\n  .btn-oval {\n    height: $large-space;\n    width: $large-space;\n    min-width: $large-space;\n    margin-left: $tiny-space;\n    padding: 0;\n    vertical-align: top;\n\n    @include focus-visible {\n      outline: none;\n      border-color: #199fff;\n    }\n  }\n}\n","/*\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';\n\n@Component({\n  tag: 'ix-filter-chip',\n  styleUrl: 'filter-chip.scss',\n  scoped: true,\n})\nexport class FilterChip {\n  @Element() el: HTMLIxFilterChipElement;\n\n  /**\n   * If true the filter chip will be in disabled state\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Close clicked\n   */\n  @Event() closeClick: EventEmitter<void>;\n\n  private onCloseClick(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.closeClick.emit();\n  }\n\n  render() {\n    return (\n      <Host class={{ disabled: this.disabled }} title={this.el.textContent}>\n        <div class=\"slot-container\">\n          <slot></slot>\n        </div>\n        <button\n          disabled={this.disabled}\n          class=\"btn btn-invisible-secondary btn-oval\"\n          onClick={(e) => this.onCloseClick(e)}\n        >\n          <ix-icon name=\"close-small\" size=\"16\"></ix-icon>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"filter-chip.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,0rDAA0rD;;MCwBnsD,UAAU;;;;;oBAMF,KAAK;;EAOhB,YAAY,CAAC,KAAY;IAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,eAAe,EAAE,CAAC;IACxB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;GACxB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,WAAW,IAClE,WAAK,KAAK,EAAC,gBAAgB,IACzB,eAAa,CACT,EACN,cACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,oCAAoC,EAC1C,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAEpC,eAAS,IAAI,EAAC,aAAa,EAAC,IAAI,EAAC,IAAI,GAAW,CACzC,CACJ,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/filter-chip/filter-chip.scss?tag=ix-filter-chip&encapsulation=scoped","./src/components/filter-chip/filter-chip.tsx"],"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@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: $large-space;\n  padding-left: $small-space;\n  border: var(--theme-focus--border-thickness) solid var(--theme-chip-primary-outline--border-color);\n  border-radius: $x-large-space;\n  background-color: var(--theme-color-ghost);\n  color: var(--theme-chip-primary-outline--color);\n\n  @include hover {\n    background-color: var(--theme-color-ghost-primary--hover);\n    border-color: var(--theme-chip-primary-outline--border-color--hover);\n    color: var(--theme-chip-primary-outline--color--hover);\n  }\n\n  @include active {\n    background-color: var(--theme-color-ghost-primary--active);\n    border-color: var(--theme-chip-primary-outline--border-color--active);\n    color: var(--theme-chip-primary-outline--color--active);\n  }\n\n  @include focus-visible {\n    outline: var(--theme-color-focus-bdr) solid var(--theme-focus--border-thickness);\n    outline-offset: -0.125rem;\n  }\n\n  .slot-container {\n    @include ellipsis;\n\n    :host-context(.disabled) {\n      background-color: var(--theme-color-ghost);\n      border-color: var(--theme-color-component-4);\n      color: var(--theme-color-weak-text);\n    }\n  }\n\n  .btn-oval {\n    height: $large-space;\n    width: $large-space;\n    min-width: $large-space;\n    margin-left: $tiny-space;\n    padding: 0;\n    vertical-align: top;\n\n    @include focus-visible {\n      outline: none;\n      border-color: #199fff;\n    }\n  }\n}\n","/*\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';\n\n@Component({\n  tag: 'ix-filter-chip',\n  styleUrl: 'filter-chip.scss',\n  scoped: true,\n})\nexport class FilterChip {\n  @Element() el: HTMLIxFilterChipElement;\n\n  /**\n   * If true the filter chip will be in disabled state\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Close clicked\n   */\n  @Event() closeClick: EventEmitter<void>;\n\n  private onCloseClick(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.closeClick.emit();\n  }\n\n  render() {\n    return (\n      <Host class={{ disabled: this.disabled }} title={this.el.textContent}>\n        <div class=\"slot-container\">\n          <slot></slot>\n        </div>\n        <button\n          disabled={this.disabled}\n          class=\"btn btn-invisible-primary btn-oval\"\n          onClick={(e) => this.onCloseClick(e)}\n        >\n          <ix-icon name=\"close-small\" size=\"16\"></ix-icon>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/index-button.js

@@ -0,0 +1,41 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const indexButtonCss = ".sc-ix-index-button-h{max-height:2rem}.sc-ix-index-button-h .btn.sc-ix-index-button{min-width:2rem;height:2rem}.sc-ix-index-button-h .btn.selected.sc-ix-index-button{background-color:var(--theme-btn-invisible-secondary--background--selected);color:var(--theme-btn-invisible-secondary--color--selected)}";
+
+const IxIndexButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.variant = 'Primary';
+    this.selected = undefined;
+  }
+  render() {
+    return (h(Host, null, h("button", { class: {
+        btn: true,
+        'btn-invisible-primary': this.variant === 'Primary',
+        'btn-invisible-secondary': this.variant === 'Secondary',
+        selected: this.selected,
+      } }, h("slot", null))));
+  }
+  static get style() { return indexButtonCss; }
+}, [6, "ix-index-button", {
+    "variant": [1],
+    "selected": [4]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-index-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-index-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, IxIndexButton);
+      }
+      break;
+  } });
+}
+
+export { IxIndexButton as I, defineCustomElement as d };
+
+//# sourceMappingURL=index-button.js.map

package/dist/components/index-button.js.map

@@ -0,0 +1 @@
+{"file":"index-button.js","mappings":";;AAAA,MAAM,cAAc,GAAG,gTAAgT;;MCsB1T,aAAa;;;;mBAIc,SAAS;;;EAO/C,MAAM;IACJ,QACE,EAAC,IAAI,QACH,cACE,KAAK,EAAE;QACL,GAAG,EAAE,IAAI;QACT,uBAAuB,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;QACnD,yBAAyB,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;QACvD,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,eAAa,CACN,CACJ,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/index-button/index-button.scss?tag=ix-index-button&encapsulation=scoped","./src/components/index-button/index-button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2022 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@import 'common-variables';\n\n:host {\n  max-height: $x-large-space;\n\n  .btn {\n    min-width: $x-large-space;\n    height: $x-large-space;\n\n    &.selected {\n      background-color: var(--theme-btn-invisible-secondary--background--selected);\n      color: var(--theme-btn-invisible-secondary--color--selected);\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2022 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 { Component, h, Host, Prop } from '@stencil/core';\nimport { ButtonVariant } from '../button/button';\n\nexport type IndexButtonVariant = ButtonVariant;\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-index-button',\n  styleUrl: 'index-button.scss',\n  scoped: true,\n})\nexport class IxIndexButton {\n  /**\n   * Button variant\n   */\n  @Prop() variant: IndexButtonVariant = 'Primary';\n\n  /**\n   * Selection state\n   */\n  @Prop() selected: boolean;\n\n  render() {\n    return (\n      <Host>\n        <button\n          class={{\n            btn: true,\n            'btn-invisible-primary': this.variant === 'Primary',\n            'btn-invisible-secondary': this.variant === 'Secondary',\n            selected: this.selected,\n          }}\n        >\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/index.js

@@ -3,6 +3,7 @@ export { I as InputState, L as LogicalFilterOperator } from './logical-filter-op
 export { F as FlipTileState } from './flip-tile-state.js';
 export { c as closeModal, d as dismissModal, m as modal } from './modal-utils.js';
 export { r as renderDefaultItem } from './default-tree-item.js';
+export { U as UploadFileState } from './upload-file-state.js';
 export { c as convertToAbbreviationString, a as convertToRemString } from './rwd.util.js';
 export { T as ThemeSwitcher, t as themeSwitcher } from './theme-switcher.js';
 
@@ -39,6 +40,9 @@ function getToastContainer() {
   }
   return container;
 }
+function setToastPosition(position) {
+  getToastContainer().position = position;
+}
 async function toast(config) {
   const context = getToastContainer();
   const toast = await context.showToast(config);
@@ -57,6 +61,6 @@ toast.warning = (config) => {
   return toast(Object.assign(Object.assign({}, config), { type: 'warning' }));
 };
 
-export { FilterState, toast };
+export { FilterState, getToastContainer, setToastPosition, toast };
 
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"file":"index.js","mappings":";;;;;;;;AAAA;;;;;;;;MAUa,WAAW;;;ACVxB;;;;;;;;AAqBA,SAAS,iBAAiB;EACxB,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAC9B,QAAQ,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAChD,CAAC;EACF,MAAM,CAAC,SAAS,CAAC,GAAG,aAAa,CAAC;EAClC,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;IAC5B,OAAO,CAAC,IAAI,CACV,+DAA+D,CAChE,CAAC;IACF,OAAO,SAAS,CAAC;GAClB;EACD,IAAI,CAAC,SAAS,EAAE;IACd,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACpE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;IAE1C,OAAO,cAAc,CAAC;GACvB;EACD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,eAAe,KAAK,CAAC,MAAmB;EACtC,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;EACpC,MAAM,KAAK,GAAG,MAAM,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;EAC9C,OAAO,KAAK,CAAC;AACf,CAAC;AAED,KAAK,CAAC,IAAI,GAAG,CAAC,MAAmB;EAC/B,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,MAAM,IACZ,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,KAAK,GAAG,CAAC,MAAmB;EAChC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,OAAO,IACb,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,OAAO,GAAG,CAAC,MAAmB;EAClC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,SAAS,IACf,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,OAAO,GAAG,CAAC,MAAmB;EAClC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,SAAS,IACf,CAAC;AACL,CAAC;;;;","names":[],"sources":["./src/components/category-filter/filter-state.ts","./src/components/toast/toast-utils.ts"],"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 { LogicalFilterOperator } from './logical-filter-operator';\nexport class FilterState {\n  public tokens: string[];\n  public categories: {\n    id: string;\n    value: string;\n    operator: LogicalFilterOperator;\n  }[];\n}\n","/*\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 type ToastType = 'info' | 'success' | 'error' | 'warning';\n\nexport interface ToastConfig {\n  title?: string;\n  message: string | HTMLElement;\n  type?: ToastType;\n  autoClose?: boolean;\n  autoCloseDelay?: number;\n  icon?: string;\n  iconColor?: string;\n}\n\nfunction getToastContainer() {\n  const containerList = Array.from(\n    document.querySelectorAll('ix-toast-container')\n  );\n  const [container] = containerList;\n  if (containerList.length > 1) {\n    console.warn(\n      'Multiple toast container are found. Only there first is used.'\n    );\n    return container;\n  }\n  if (!container) {\n    const toastContainer = document.createElement('ix-toast-container');\n    document.body.appendChild(toastContainer);\n\n    return toastContainer;\n  }\n  return container;\n}\n\nasync function toast(config: ToastConfig) {\n  const context = getToastContainer();\n  const toast = await context.showToast(config);\n  return toast;\n}\n\ntoast.info = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'info',\n  });\n};\n\ntoast.error = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'error',\n  });\n};\n\ntoast.success = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'success',\n  });\n};\n\ntoast.warning = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'warning',\n  });\n};\n\nexport { toast };\n"],"version":3}
+{"file":"index.js","mappings":";;;;;;;;;AAAA;;;;;;;;MAUa,WAAW;;;ACVxB;;;;;;;;SAsBgB,iBAAiB;EAC/B,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAC9B,QAAQ,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAChD,CAAC;EACF,MAAM,CAAC,SAAS,CAAC,GAAG,aAAa,CAAC;EAClC,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;IAC5B,OAAO,CAAC,IAAI,CACV,+DAA+D,CAChE,CAAC;IACF,OAAO,SAAS,CAAC;GAClB;EACD,IAAI,CAAC,SAAS,EAAE;IACd,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACpE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;IAE1C,OAAO,cAAc,CAAC;GACvB;EACD,OAAO,SAAS,CAAC;AACnB,CAAC;SAEe,gBAAgB,CAAC,QAAuB;EACtD,iBAAiB,EAAE,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAC1C,CAAC;AAED,eAAe,KAAK,CAAC,MAAmB;EACtC,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;EACpC,MAAM,KAAK,GAAG,MAAM,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;EAC9C,OAAO,KAAK,CAAC;AACf,CAAC;AAED,KAAK,CAAC,IAAI,GAAG,CAAC,MAAmB;EAC/B,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,MAAM,IACZ,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,KAAK,GAAG,CAAC,MAAmB;EAChC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,OAAO,IACb,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,OAAO,GAAG,CAAC,MAAmB;EAClC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,SAAS,IACf,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,OAAO,GAAG,CAAC,MAAmB;EAClC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,SAAS,IACf,CAAC;AACL,CAAC;;;;","names":[],"sources":["./src/components/category-filter/filter-state.ts","./src/components/toast/toast-utils.ts"],"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 { LogicalFilterOperator } from './logical-filter-operator';\nexport class FilterState {\n  public tokens: string[];\n  public categories: {\n    id: string;\n    value: string;\n    operator: LogicalFilterOperator;\n  }[];\n}\n","/*\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 type ToastType = 'info' | 'success' | 'error' | 'warning';\nexport type ToastPosition = 'bottom-right' | 'top-right';\n\nexport interface ToastConfig {\n  title?: string;\n  message: string | HTMLElement;\n  type?: ToastType;\n  autoClose?: boolean;\n  autoCloseDelay?: number;\n  icon?: string;\n  iconColor?: string;\n}\n\nexport function getToastContainer() {\n  const containerList = Array.from(\n    document.querySelectorAll('ix-toast-container')\n  );\n  const [container] = containerList;\n  if (containerList.length > 1) {\n    console.warn(\n      'Multiple toast container are found. Only there first is used.'\n    );\n    return container;\n  }\n  if (!container) {\n    const toastContainer = document.createElement('ix-toast-container');\n    document.body.appendChild(toastContainer);\n\n    return toastContainer;\n  }\n  return container;\n}\n\nexport function setToastPosition(position: ToastPosition) {\n  getToastContainer().position = position;\n}\n\nasync function toast(config: ToastConfig) {\n  const context = getToastContainer();\n  const toast = await context.showToast(config);\n  return toast;\n}\n\ntoast.info = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'info',\n  });\n};\n\ntoast.error = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'error',\n  });\n};\n\ntoast.success = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'success',\n  });\n};\n\ntoast.warning = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'warning',\n  });\n};\n\nexport { toast };\n"],"version":3}

package/dist/components/ix-blind.js

@@ -1,11 +1,15 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { a as anime } from './anime.es.js';
+import { d as defineCustomElement$2 } from './icon.js';
 
-const blindCss = ".sc-ix-blind-h{display:flex;flex-direction:column;background-color:var(--theme-blind-base--background);border:solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);border-radius:var(--theme-blind--border-radius);overflow:hidden}.sc-ix-blind-h .blind-header.sc-ix-blind{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;min-height:3rem;height:3rem;border:solid var(--theme-blind--border-thickness) transparent;border-radius:var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;padding-right:1rem;transition:border-radius 150ms;cursor:pointer;z-index:1;color:var(--theme-blind-header-closed--color);background-color:var(--theme-blind-header-closed--background)}.sc-ix-blind-h .blind-header.sc-ix-blind .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color);padding:0.25rem 0.5rem}.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title.sc-ix-blind{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title.sc-ix-blind .blind-header-title-default.sc-ix-blind{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):hover{background-color:var(--theme-blind-header-open--background--hover)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):hover .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-open--color--hover)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):active{background-color:var(--theme-blind-header-open--background--active)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):active .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-open--color--active)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-focus--border-color)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind{border-radius:var(--theme-blind--border-radius)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):hover{background-color:var(--theme-blind-header-open--background--hover)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):hover .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color--hover)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):active{background-color:var(--theme-blind-header-open--background--active)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):active .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color--active)}.sc-ix-blind-h .blind-custom-header.sc-ix-blind{display:flex;align-items:center}.sc-ix-blind-h .blind-content.sc-ix-blind{display:block;padding:1rem;transition-property:padding;transition-duration:150ms;transition-timing-function:ease-in}.sc-ix-blind-h .blind-content.hide.sc-ix-blind{max-height:0;padding-top:0px;padding-bottom:0px}";
+const blindCss = ".sc-ix-blind-h{display:flex;flex-direction:column;background-color:var(--theme-blind-base--background);border:solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);border-radius:var(--theme-blind--border-radius);overflow:hidden}.sc-ix-blind-h .blind-header.sc-ix-blind{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;min-height:3rem;height:3rem;border:solid var(--theme-blind--border-thickness) transparent;border-radius:var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;padding-right:1rem;transition:border-radius 150ms;cursor:pointer;z-index:1;color:var(--theme-blind-header-closed--color);background-color:var(--theme-blind-header-closed--background)}.sc-ix-blind-h .blind-header.sc-ix-blind .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color);padding:0.25rem 0.5rem}.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title.sc-ix-blind,.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title-basic.sc-ix-blind{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;flex-grow:1}.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title.sc-ix-blind .blind-header-title-default.sc-ix-blind,.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title-basic.sc-ix-blind .blind-header-title-default.sc-ix-blind{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);flex-grow:1}.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title-basic.sc-ix-blind ix-icon.sc-ix-blind{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):hover{background-color:var(--theme-blind-header-open--background--hover)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):hover .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-open--color--hover)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):active{background-color:var(--theme-blind-header-open--background--active)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):active .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-open--color--active)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-focus--border-color)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind{border-radius:var(--theme-blind--border-radius)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):hover{background-color:var(--theme-blind-header-open--background--hover)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):hover .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color--hover)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):active{background-color:var(--theme-blind-header-open--background--active)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):active .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color--active)}.sc-ix-blind-h .blind-content.sc-ix-blind{display:block;padding:1rem;transition-property:padding;transition-duration:150ms;transition-timing-function:ease-in}.sc-ix-blind-h .blind-content.hide.sc-ix-blind{max-height:0;padding-top:0px;padding-bottom:0px}";
 
 const Blind = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() { super(); this.__registerHost(); this.collapsedChange = createEvent(this, "collapsedChange", 7); this.collapsed = false; this.label = undefined; }
+  constructor() { super(); this.__registerHost(); this.collapsedChange = createEvent(this, "collapsedChange", 7); this.collapsed = false; this.label = undefined; this.icon = undefined; }
   onHeaderClick(e) {
+    if (e.target.closest('.header-actions')) {
+      return;
+    }
     e.preventDefault();
     e.stopImmediatePropagation();
     this.collapsed = !this.collapsed;
@@ -63,7 +67,7 @@ const Blind = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }, onClick: (e) => this.onHeaderClick(e) }, h("span", { ref: (ref) => (this.chevronRef = ref), class: {
         glyph: true,
         'glyph-chevron-right-small': true,
-      } }), h("div", { class: "blind-header-title" }, this.label !== undefined ? (h("span", { class: "blind-header-title-default" }, this.label)) : (h("slot", { name: "custom-header" })))), h("div", { class: {
+      } }), h("div", { class: "blind-header-title" }, this.label !== undefined ? (h("span", { class: "blind-header-title-basic" }, this.icon !== undefined ? (h("ix-icon", { name: this.icon })) : (''), h("span", { class: "blind-header-title-default" }, this.label), h("span", { class: "header-actions" }, h("slot", { name: "header-actions" })))) : (h("slot", { name: "custom-header" })))), h("div", { class: {
         'blind-content': true,
         hide: this.collapsed,
       } }, h("slot", null))));
@@ -75,19 +79,25 @@ const Blind = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   static get style() { return blindCss; }
 }, [6, "ix-blind", {
     "collapsed": [1540],
-    "label": [1]
+    "label": [1],
+    "icon": [1]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["ix-blind"];
+  const components = ["ix-blind", "ix-icon"];
   components.forEach(tagName => { switch (tagName) {
     case "ix-blind":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, Blind);
       }
       break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
   } });
 }
 

package/dist/components/ix-blind.js.map

@@ -1 +1 @@
-{"file":"ix-blind.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,+3GAA+3G;;MC0Bn4G,KAAK;EAoBhB,iIAhBoD,KAAK,2BAgBzC;EAER,aAAa,CAAC,CAAQ;IAC5B,CAAC,CAAC,cAAc,EAAE,CAAC;IACnB,CAAC,CAAC,wBAAwB,EAAE,CAAC;IAE7B,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;IACjC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;GAC3C;EAED,gBAAgB;IACd,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;GACtC;EAED,IAAI,OAAO;IACT,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;GACzD;EAGD,SAAS,CAAC,WAAoB;IAC5B,IAAI,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;GACnC;EAEO,eAAe,CAAC,WAAoB;IAC1C,IAAI,WAAW,EAAE;MACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;SAAM;MACL,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;GACF;EAEO,iBAAiB;IACvB,KAAK,CAAC;MACJ,OAAO,EAAE,IAAI,CAAC,UAAU;MACxB,QAAQ,EAAE,GAAG;MACb,MAAM,EAAE,eAAe;MACvB,OAAO,EAAE,EAAE;KACZ,CAAC,CAAC;IACH,KAAK,CAAC;MACJ,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,QAAQ,EAAE,GAAG;MACb,MAAM,EAAE,eAAe;MACvB,OAAO,EAAE,CAAC;KACX,CAAC,CAAC;GACJ;EAEO,kBAAkB;IACxB,KAAK,CAAC;MACJ,OAAO,EAAE,IAAI,CAAC,UAAU;MACxB,QAAQ,EAAE,GAAG;MACb,MAAM,EAAE,eAAe;MACvB,OAAO,EAAE,CAAC;KACX,CAAC,CAAC;IACH,KAAK,CAAC;MACJ,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,QAAQ,EAAE,GAAG;MACb,MAAM,EAAE,eAAe;MACvB,OAAO,EAAE,CAAC;KACX,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,MAAM,EAAE,IAAI,CAAC,SAAS;OACvB,EACD,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAErC,YACE,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,EACrC,KAAK,EAAE;QACL,KAAK,EAAE,IAAI;QACX,2BAA2B,EAAE,IAAI;OAClC,GACK,EACR,WAAK,KAAK,EAAC,oBAAoB,IAC5B,IAAI,CAAC,KAAK,KAAK,SAAS,IACvB,YAAM,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,KAAK,CAAQ,KAE5D,YAAM,IAAI,EAAC,eAAe,GAAQ,CACnC,CACG,CACF,EACN,WACE,KAAK,EAAE;QACL,eAAe,EAAE,IAAI;QACrB,IAAI,EAAE,IAAI,CAAC,SAAS;OACrB,IAED,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/blind/blind.scss?tag=ix-blind&encapsulation=scoped","./src/components/blind/blind.tsx"],"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@import 'common-variables';\n@import 'mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  background-color: var(--theme-blind-base--background);\n  border: solid var(--theme-blind--border-thickness)\n    var(--theme-blind-base--border-color);\n  border-radius: var(--theme-blind--border-radius);\n  overflow: hidden;\n\n  .blind-header {\n    @include ellipsis;\n\n    display: flex;\n    align-items: center;\n    min-height: 3rem;\n    height: 3rem;\n    border: solid var(--theme-blind--border-thickness) transparent;\n    border-radius: var(--theme-blind--border-radius)\n      var(--theme-blind--border-radius) 0 0;\n    padding-right: $default-space;\n    transition: border-radius $default-time;\n    cursor: pointer;\n\n    z-index: 1;\n\n    color: var(--theme-blind-header-closed--color);\n    background-color: var(--theme-blind-header-closed--background);\n\n    .glyph {\n      color: var(--theme-blind-header-icon-closed--color);\n      padding: $tiny-space $small-space;\n    }\n\n    .blind-header-title {\n      @include ellipsis;\n\n      .blind-header-title-default {\n        @include text-l-title;\n      }\n    }\n\n    @include hover {\n      background-color: var(--theme-blind-header-open--background--hover);\n\n      .glyph {\n        color: var(--theme-blind-header-icon-open--color--hover);\n      }\n    }\n\n    @include active {\n      background-color: var(--theme-blind-header-open--background--active);\n\n      .glyph {\n        color: var(--theme-blind-header-icon-open--color--active);\n      }\n    }\n\n    @include focus-visible {\n      border-color: var(--theme-focus--border-color);\n    }\n\n    &.closed {\n      border-radius: var(--theme-blind--border-radius);\n\n      @include hover {\n        background-color: var(--theme-blind-header-open--background--hover);\n\n        .glyph {\n          color: var(--theme-blind-header-icon-closed--color--hover);\n        }\n      }\n\n      @include active {\n        background-color: var(--theme-blind-header-open--background--active);\n\n        .glyph {\n          color: var(--theme-blind-header-icon-closed--color--active);\n        }\n      }\n    }\n  }\n\n  .blind-custom-header {\n    display: flex;\n    align-items: center;\n  }\n\n  .blind-content {\n    display: block;\n    padding: 1rem;\n    transition-property: padding;\n    transition-duration: $default-time;\n    transition-timing-function: ease-in;\n\n    &.hide {\n      max-height: 0;\n      padding-top: 0px;\n      padding-bottom: 0px;\n    }\n  }\n}\n","/*\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 anime from 'animejs';\n\n@Component({\n  tag: 'ix-blind',\n  styleUrl: 'blind.scss',\n  scoped: true,\n})\nexport class Blind {\n  /**\n   * Collapsed state\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = false;\n\n  /**\n   * Label of blind\n   */\n  @Prop() label: string;\n\n  /**\n   * Collapsed state changed\n   */\n  @Event() collapsedChange: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxBlindElement;\n\n  private chevronRef: HTMLElement;\n\n  constructor() {}\n\n  private onHeaderClick(e: Event) {\n    e.preventDefault();\n    e.stopImmediatePropagation();\n\n    this.collapsed = !this.collapsed;\n    this.collapsedChange.emit(this.collapsed);\n  }\n\n  componentDidLoad() {\n    this.animateCollapse(this.collapsed);\n  }\n\n  get content() {\n    return this.hostElement.querySelector('.blind-content');\n  }\n\n  @Watch('collapsed')\n  animation(isCollapsed: boolean) {\n    this.animateCollapse(isCollapsed);\n  }\n\n  private animateCollapse(isCollapsed: boolean) {\n    if (isCollapsed) {\n      this.rotateChevronRight();\n    } else {\n      this.rotateChevronDown();\n    }\n  }\n\n  private rotateChevronDown() {\n    anime({\n      targets: this.chevronRef,\n      duration: 150,\n      easing: 'easeInOutSine',\n      rotateZ: 90,\n    });\n    anime({\n      targets: this.content,\n      duration: 150,\n      easing: 'easeInOutSine',\n      opacity: 1,\n    });\n  }\n\n  private rotateChevronRight() {\n    anime({\n      targets: this.chevronRef,\n      duration: 150,\n      easing: 'easeInOutSine',\n      rotateZ: 0,\n    });\n    anime({\n      targets: this.content,\n      duration: 150,\n      easing: 'easeInOutSine',\n      opacity: 0,\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'blind-header': true,\n            closed: this.collapsed,\n          }}\n          onClick={(e) => this.onHeaderClick(e)}\n        >\n          <span\n            ref={(ref) => (this.chevronRef = ref)}\n            class={{\n              glyph: true,\n              'glyph-chevron-right-small': true,\n            }}\n          ></span>\n          <div class=\"blind-header-title\">\n            {this.label !== undefined ? (\n              <span class=\"blind-header-title-default\">{this.label}</span>\n            ) : (\n              <slot name=\"custom-header\"></slot>\n            )}\n          </div>\n        </div>\n        <div\n          class={{\n            'blind-content': true,\n            hide: this.collapsed,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-blind.js","mappings":"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","names":[],"sources":["./src/components/blind/blind.scss?tag=ix-blind&encapsulation=scoped","./src/components/blind/blind.tsx"],"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@import 'common-variables';\n@import 'mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  background-color: var(--theme-blind-base--background);\n  border: solid var(--theme-blind--border-thickness)\n    var(--theme-blind-base--border-color);\n  border-radius: var(--theme-blind--border-radius);\n  overflow: hidden;\n\n  .blind-header {\n    @include ellipsis;\n\n    display: flex;\n    align-items: center;\n    min-height: 3rem;\n    height: 3rem;\n    border: solid var(--theme-blind--border-thickness) transparent;\n    border-radius: var(--theme-blind--border-radius)\n      var(--theme-blind--border-radius) 0 0;\n    padding-right: $default-space;\n    transition: border-radius $default-time;\n    cursor: pointer;\n\n    z-index: 1;\n\n    color: var(--theme-blind-header-closed--color);\n    background-color: var(--theme-blind-header-closed--background);\n\n    .glyph {\n      color: var(--theme-blind-header-icon-closed--color);\n      padding: $tiny-space $small-space;\n    }\n\n    .blind-header-title,\n    .blind-header-title-basic {\n      @include ellipsis;\n      display: flex;\n      align-items: center;\n      flex-grow: 1;\n\n      .blind-header-title-default {\n        @include text-l-title;\n        flex-grow: 1;\n      }\n    }\n\n    .blind-header-title-basic ix-icon {\n      margin-inline-end: $small-space;\n    }\n\n    @include hover {\n      background-color: var(--theme-blind-header-open--background--hover);\n\n      .glyph {\n        color: var(--theme-blind-header-icon-open--color--hover);\n      }\n    }\n\n    @include active {\n      background-color: var(--theme-blind-header-open--background--active);\n\n      .glyph {\n        color: var(--theme-blind-header-icon-open--color--active);\n      }\n    }\n\n    @include focus-visible {\n      border-color: var(--theme-focus--border-color);\n    }\n\n    &.closed {\n      border-radius: var(--theme-blind--border-radius);\n\n      @include hover {\n        background-color: var(--theme-blind-header-open--background--hover);\n\n        .glyph {\n          color: var(--theme-blind-header-icon-closed--color--hover);\n        }\n      }\n\n      @include active {\n        background-color: var(--theme-blind-header-open--background--active);\n\n        .glyph {\n          color: var(--theme-blind-header-icon-closed--color--active);\n        }\n      }\n    }\n  }\n\n  .blind-content {\n    display: block;\n    padding: 1rem;\n    transition-property: padding;\n    transition-duration: $default-time;\n    transition-timing-function: ease-in;\n\n    &.hide {\n      max-height: 0;\n      padding-top: 0px;\n      padding-bottom: 0px;\n    }\n  }\n}\n","/*\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 anime from 'animejs';\n\n@Component({\n  tag: 'ix-blind',\n  styleUrl: 'blind.scss',\n  scoped: true,\n})\nexport class Blind {\n  /**\n   * Collapsed state\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = false;\n\n  /**\n   * Label of blind\n   */\n  @Prop() label: string;\n\n  /**\n   * Optional icon to be displayed next to the header label\n   * @since 1.5.0\n   */\n  @Prop() icon: string;\n\n  /**\n   * Collapsed state changed\n   */\n  @Event() collapsedChange: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxBlindElement;\n\n  private chevronRef: HTMLElement;\n\n  constructor() {}\n\n  private onHeaderClick(e: Event) {\n    if ((e.target as Element).closest('.header-actions')) {\n      return;\n    }\n\n    e.preventDefault();\n    e.stopImmediatePropagation();\n\n    this.collapsed = !this.collapsed;\n    this.collapsedChange.emit(this.collapsed);\n  }\n\n  componentDidLoad() {\n    this.animateCollapse(this.collapsed);\n  }\n\n  get content() {\n    return this.hostElement.querySelector('.blind-content');\n  }\n\n  @Watch('collapsed')\n  animation(isCollapsed: boolean) {\n    this.animateCollapse(isCollapsed);\n  }\n\n  private animateCollapse(isCollapsed: boolean) {\n    if (isCollapsed) {\n      this.rotateChevronRight();\n    } else {\n      this.rotateChevronDown();\n    }\n  }\n\n  private rotateChevronDown() {\n    anime({\n      targets: this.chevronRef,\n      duration: 150,\n      easing: 'easeInOutSine',\n      rotateZ: 90,\n    });\n    anime({\n      targets: this.content,\n      duration: 150,\n      easing: 'easeInOutSine',\n      opacity: 1,\n    });\n  }\n\n  private rotateChevronRight() {\n    anime({\n      targets: this.chevronRef,\n      duration: 150,\n      easing: 'easeInOutSine',\n      rotateZ: 0,\n    });\n    anime({\n      targets: this.content,\n      duration: 150,\n      easing: 'easeInOutSine',\n      opacity: 0,\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'blind-header': true,\n            closed: this.collapsed,\n          }}\n          onClick={(e) => this.onHeaderClick(e)}\n        >\n          <span\n            ref={(ref) => (this.chevronRef = ref)}\n            class={{\n              glyph: true,\n              'glyph-chevron-right-small': true,\n            }}\n          ></span>\n          <div class=\"blind-header-title\">\n            {this.label !== undefined ? (\n              <span class=\"blind-header-title-basic\">\n                {this.icon !== undefined ? (\n                  <ix-icon name={this.icon}></ix-icon>\n                ) : (\n                  ''\n                )}\n                <span class=\"blind-header-title-default\">{this.label}</span>\n                <span class=\"header-actions\">\n                  <slot name=\"header-actions\"></slot>\n                </span>\n              </span>\n            ) : (\n              <slot name=\"custom-header\"></slot>\n            )}\n          </div>\n        </div>\n        <div\n          class={{\n            'blind-content': true,\n            hide: this.collapsed,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}