@siemens/ix 2.0.3 → 2.0.4-beta.0

package/dist/collection/components/time-picker/time-picker.css

@@ -87,6 +87,7 @@ input, input:-webkit-autofill {
   padding: 0.25rem 0.5rem;
   background-color: var(--theme-input--background);
   color: var(--theme-input--color);
+  text-overflow: ellipsis;
   border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);
   border-radius: var(--theme-input--border-radius);
   box-shadow: var(--theme-input--box-shadow);
@@ -178,6 +179,7 @@ textarea, textarea:-webkit-autofill {
   padding: 0.25rem 0.5rem;
   background-color: var(--theme-input--background);
   color: var(--theme-input--color);
+  text-overflow: ellipsis;
   border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);
   border-radius: var(--theme-input--border-radius);
   box-shadow: var(--theme-input--box-shadow);
@@ -292,6 +294,11 @@ form.was-validated .is-valid ~ .valid-feedback {
   display: block;
 }
 
+form:not(.was-validated) .invalid-feedback,
+form:not(.was-validated) .valid-feedback {
+  display: none !important;
+}
+
 :host {
   /* width */
   /* Track */
@@ -391,10 +398,8 @@ form.was-validated .is-valid ~ .valid-feedback {
   background-color: var(--theme-input--background);
   border: solid 1px var(--theme-input--border-color);
   box-shadow: var(--theme-input--box-shadow);
-  -webkit-padding-start: 0.5rem;
-          padding-inline-start: 0.5rem;
-  -webkit-padding-end: 0.5rem;
-          padding-inline-end: 0.5rem;
+  padding-inline-start: 0.5rem;
+  padding-inline-end: 0.5rem;
 }
 :host .form-control::-moz-placeholder, :host .form-control-plaintext::-moz-placeholder {
   color: var(--theme-input-hint--color);
@@ -451,12 +456,9 @@ form.was-validated .is-valid ~ .valid-feedback {
 :host .form-control.readonly,
 :host .form-control[readonly] {
   background: transparent !important;
-  -webkit-border-before: none !important;
-          border-block-start: none !important;
-  -webkit-border-start: none !important;
-          border-inline-start: none !important;
-  -webkit-border-end: none !important;
-          border-inline-end: none !important;
+  border-block-start: none !important;
+  border-inline-start: none !important;
+  border-inline-end: none !important;
   border-radius: 0rem;
 }
 :host .form-control:-moz-read-only {
@@ -489,12 +491,9 @@ form.was-validated .is-valid ~ .valid-feedback {
 :host .form-control:disabled,
 :host .form-control.disabled {
   background: transparent !important;
-  -webkit-border-before: none !important;
-          border-block-start: none !important;
-  -webkit-border-start: none !important;
-          border-inline-start: none !important;
-  -webkit-border-end: none !important;
-          border-inline-end: none !important;
+  border-block-start: none !important;
+  border-inline-start: none !important;
+  border-inline-end: none !important;
   border-radius: 0rem;
   color: var(--theme-color-weak-text);
   border-color: var(--theme-input--border-color-bottom--disabled);
@@ -521,13 +520,11 @@ form.was-validated .is-valid ~ .valid-feedback {
 :host .input-wrapper > .glyph {
   display: block;
   position: absolute;
-  -webkit-margin-start: 0.312rem;
-          margin-inline-start: 0.312rem;
+  margin-inline-start: 0.312rem;
   color: var(--theme-color-std-text);
 }
 :host .input-wrapper > input {
-  -webkit-padding-start: 2.2rem;
-          padding-inline-start: 2.2rem;
+  padding-inline-start: 2.2rem;
 }
 :host select.form-control {
   padding: 0 0.312rem;
@@ -535,16 +532,6 @@ form.was-validated .is-valid ~ .valid-feedback {
 :host textarea.form-control {
   padding: 0.375rem 0.5rem;
 }
-:host .was-validated .form-control:invalid,
-:host .was-validated .is-invalid {
-  background-color: var(--theme-input-error--background);
-  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
-  background-position: left calc(0.375em + 0.1875rem) center !important;
-  padding-right: 0.75rem;
-  padding-left: calc(1.5em + 0.75rem);
-  background-size: 18px;
-  background-repeat: no-repeat;
-}
 :host input.disabled, :host input:disabled {
   color: var(--theme-input--color--disabled);
 }

package/dist/collection/components/toast/styles/toast-container.css

@@ -71,8 +71,7 @@
 }
 
 #toast-container > :not(:last-child) {
-  -webkit-margin-after: 1rem;
-          margin-block-end: 1rem;
+  margin-block-end: 1rem;
 }
 
 .toast-container {

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

@@ -0,0 +1,22 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { expect } from '@playwright/test';
+import { test } from '@utils/test';
+test('renders', async ({ mount, page }) => {
+  await mount(`
+    <ix-tooltip for=".test">tooltip</ix-tooltip>
+    <ix-button class="test">button</ix-button>
+  `);
+  const tooltip = page.locator('ix-tooltip');
+  const button = page.locator('ix-button');
+  await button.hover();
+  await expect(tooltip).toHaveClass(/hydrated/);
+  await expect(tooltip).toBeVisible();
+});
+//# sourceMappingURL=tooltip.ct.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.ct.js","sourceRoot":"","sources":["../../../../src/components/tooltip/test/tooltip.ct.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EACxC,MAAM,KAAK,CAAC;;;GAGX,CAAC,CAAC;EACH,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;EAC3C,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;EAEzC,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC;EAErB,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC9C,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,CAAC;AACtC,CAAC,CAAC,CAAC","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`\n    <ix-tooltip for=\".test\">tooltip</ix-tooltip>\n    <ix-button class=\"test\">button</ix-button>\n  `);\n  const tooltip = page.locator('ix-tooltip');\n  const button = page.locator('ix-button');\n\n  await button.hover();\n\n  await expect(tooltip).toHaveClass(/hydrated/);\n  await expect(tooltip).toBeVisible();\n});\n"]}

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

@@ -152,8 +152,9 @@ export class Tree {
     }
   }
   disconnectedCallback() {
-    this.hyperlist.destroy();
-    this.observer.disconnect();
+    var _a, _b;
+    (_a = this.hyperlist) === null || _a === void 0 ? void 0 : _a.destroy();
+    (_b = this.observer) === null || _b === void 0 ? void 0 : _b.disconnect();
   }
   modelChange() {
     if (this.hasFirstRender && !this.isListInitialized()) {

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  shadow: true,\n})\nexport class Tree {\n  @Element() hostElement!: 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  private observer: MutationObserver;\n  private hasFirstRender = false;\n\n  private updatePadding(element: HTMLElement, item: TreeItemVisual<unknown>) {\n    element.style.paddingLeft = item.level + 'rem';\n  }\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\n        const renderedTreeItem = this.hostElement.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          this.updatePadding(renderedTreeItem, item);\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.paddingRight = '1rem';\n        this.updatePadding(el, item);\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.hostElement, {\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.hostElement, this.getVirtualizerOptions());\n    }\n  }\n\n  private initList() {\n    if (!this.model) {\n      return;\n    }\n\n    this.hyperlist?.destroy();\n    const config = this.getVirtualizerOptions();\n    this.hyperlist = new Hyperlist(this.hostElement, 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  shadow: true,\n})\nexport class Tree {\n  @Element() hostElement!: 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  private observer: MutationObserver;\n  private hasFirstRender = false;\n\n  private updatePadding(element: HTMLElement, item: TreeItemVisual<unknown>) {\n    element.style.paddingLeft = item.level + 'rem';\n  }\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\n        const renderedTreeItem = this.hostElement.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          this.updatePadding(renderedTreeItem, item);\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.paddingRight = '1rem';\n        this.updatePadding(el, item);\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.hostElement, {\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.hostElement, this.getVirtualizerOptions());\n    }\n  }\n\n  private initList() {\n    if (!this.model) {\n      return;\n    }\n\n    this.hyperlist?.destroy();\n    const config = this.getVirtualizerOptions();\n    this.hyperlist = new Hyperlist(this.hostElement, config);\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/typography/typography.css

@@ -246,7 +246,7 @@ h6,
   font-feature-settings: "clig" off, "liga" off;
   font-family: Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;
   font-style: normal;
-  font-size: var(--theme-ms-1);
+  font-size: var(--theme-ms--1);
   line-height: var(--theme-line-height-lg);
   font-weight: var(--theme-font-weight-bold);
   letter-spacing: var(--theme-letter-spacing-xl);

package/dist/collection/components/upload/upload.css

@@ -99,8 +99,7 @@
 }
 :host .file-upload-area.multiline .glyph {
   align-self: flex-start;
-  -webkit-margin-before: 3px;
-          margin-block-start: 3px;
+  margin-block-start: 3px;
 }
 :host .file-upload-area.multiline > div {
   align-self: flex-start;
@@ -124,8 +123,7 @@
   color: var(--theme-upload-text--color--disabled);
 }
 :host .file-upload-area ix-button {
-  -webkit-margin-start: 1rem;
-          margin-inline-start: 1rem;
+  margin-inline-start: 1rem;
 }
 :host .file-upload-area .upload-browser {
   border: 0;
@@ -156,14 +154,12 @@
   align-items: center;
 }
 :host .file-upload-area .state > ix-spinner {
-  -webkit-margin-end: 0.5rem;
-          margin-inline-end: 0.5rem;
+  margin-inline-end: 0.5rem;
   height: 1.5rem;
   width: 1.5rem;
 }
 :host .file-upload-area .state > i {
-  -webkit-margin-end: 0.5rem;
-          margin-inline-end: 0.5rem;
+  margin-inline-end: 0.5rem;
 }
 :host .file-upload-area .state > i.glyph-error {
   color: var(--theme-color-alarm);

package/dist/collection/components/utils/application-layout/service.js

@@ -60,8 +60,13 @@ class ApplicationLayoutService {
       matchBreakpoints.push([breakpoint, match]);
     });
     if (matchBreakpoints.every(([_, match]) => match === false)) {
-      __classPrivateFieldGet(this, _ApplicationLayoutService_breakpointChangeListener, "f").emit(breakpoints[0]);
-      __classPrivateFieldSet(this, _ApplicationLayoutService_breakpoint, breakpoints[0], "f");
+      let breakPointIndex = 0;
+      if (!__classPrivateFieldGet(this, _ApplicationLayoutService_supportedBreakpoints, "f").includes('lg')) {
+        breakPointIndex = matchBreakpoints.length - 1;
+      }
+      const [breakpoint, _] = matchBreakpoints[breakPointIndex];
+      __classPrivateFieldGet(this, _ApplicationLayoutService_breakpointChangeListener, "f").emit(breakpoint);
+      __classPrivateFieldSet(this, _ApplicationLayoutService_breakpoint, breakpoint, "f");
       return;
     }
     for (const [breakpoint, match] of matchBreakpoints.reverse()) {

package/dist/collection/components/utils/application-layout/service.js.map

@@ -1 +1 @@
-{"version":3,"file":"service.js","sourceRoot":"","sources":["../../../../src/components/utils/application-layout/service.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;GAOG;AACH,OAAO,EAAc,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,wBAAwB;EAQ5B;IAPA,4BAA4B;IAC5B,yDAAsC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EAAC;IACzD,6DAA4B,IAAI,UAAU,EAAc,EAAC;IACzD,+CAA0B,IAAI,EAAC;IAE/B,uDAAsB,IAAI,EAAC;IAGzB,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;MACjC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;MAC5D,IAAI,CAAC,QAAQ,EAAE,CAAC;KACjB;EACH,CAAC;EAED,IAAI,UAAU;IACZ,OAAO,uBAAA,IAAI,4CAAY,CAAC;EAC1B,CAAC;EAED,IAAI,QAAQ;IACV,OAAO,uBAAA,IAAI,0DAA0B,CAAC;EACxC,CAAC;EAED,IAAI,kBAAkB;IACpB,OAAO,uBAAA,IAAI,oDAAoB,CAAC;EAClC,CAAC;EAEO,QAAQ;IACd,IAAI,CAAC,uBAAA,IAAI,oDAAoB,EAAE;MAC7B,OAAO;KACR;IACD,IAAI,CAAC,uBAAA,IAAI,sDAAsB,EAAE;MAC/B,OAAO;KACR;IACD,MAAM,gBAAgB,GAA4B,EAAE,CAAC;IAErD,MAAM,WAAW,GAAG,uBAAA,IAAI,sDAAsB,CAAC;IAE/C,WAAW,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,EAAE;MACjC,MAAM,KAAK,GAAG,eAAe,CAAC,UAAU,CAAC,CAAC;MAC1C,gBAAgB,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;IAC7C,CAAC,CAAC,CAAC;IAEH,IAAI,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,EAAE;MAC3D,uBAAA,IAAI,0DAA0B,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;MACpD,uBAAA,IAAI,wCAAe,WAAW,CAAC,CAAC,CAAC,MAAA,CAAC;MAClC,OAAO;KACR;IAED,KAAK,MAAM,CAAC,UAAU,EAAE,KAAK,CAAC,IAAI,gBAAgB,CAAC,OAAO,EAAE,EAAE;MAC5D,IAAI,KAAK,EAAE;QACT,uBAAA,IAAI,0DAA0B,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAChD,uBAAA,IAAI,wCAAe,UAAU,MAAA,CAAC;QAC9B,MAAM;OACP;KACF;EACH,CAAC;EAEM,0BAA0B;IAC/B,uBAAA,IAAI,gDAAuB,KAAK,MAAA,CAAC;EACnC,CAAC;EAEM,yBAAyB;IAC9B,uBAAA,IAAI,gDAAuB,IAAI,MAAA,CAAC;EAClC,CAAC;EAEM,aAAa,CAAC,UAAsB;IACzC,uBAAA,IAAI,wCAAe,UAAU,MAAA,CAAC;IAC9B,uBAAA,IAAI,0DAA0B,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;EAClD,CAAC;EAEM,cAAc,CAAC,WAAyB;IAC7C,uBAAA,IAAI,kDAAyB,WAAW,MAAA,CAAC;IACzC,IAAI,CAAC,QAAQ,EAAE,CAAC;EAClB,CAAC;CACF;;AAED,MAAM,CAAC,MAAM,wBAAwB,GAAG,IAAI,wBAAwB,EAAE,CAAC","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { Breakpoint, matchBreakpoint } from '../breakpoints';\nimport { TypedEvent } from '../typed-event';\n\nclass ApplicationLayoutService {\n  // Keep order of breakpoints\n  #supportedBreakpoints: Breakpoint[] = ['sm', 'md', 'lg'];\n  #breakpointChangeListener = new TypedEvent<Breakpoint>();\n  #breakpoint: Breakpoint = 'lg';\n\n  #isDetectionEnabled = true;\n\n  constructor() {\n    if (typeof window !== 'undefined') {\n      window.addEventListener('resize', this.onResize.bind(this));\n      this.onResize();\n    }\n  }\n\n  get breakpoint() {\n    return this.#breakpoint;\n  }\n\n  get onChange() {\n    return this.#breakpointChangeListener;\n  }\n\n  get isDetectionEnabled() {\n    return this.#isDetectionEnabled;\n  }\n\n  private onResize() {\n    if (!this.#isDetectionEnabled) {\n      return;\n    }\n    if (!this.#supportedBreakpoints) {\n      return;\n    }\n    const matchBreakpoints: [Breakpoint, boolean][] = [];\n\n    const breakpoints = this.#supportedBreakpoints;\n\n    breakpoints.forEach((breakpoint) => {\n      const match = matchBreakpoint(breakpoint);\n      matchBreakpoints.push([breakpoint, match]);\n    });\n\n    if (matchBreakpoints.every(([_, match]) => match === false)) {\n      this.#breakpointChangeListener.emit(breakpoints[0]);\n      this.#breakpoint = breakpoints[0];\n      return;\n    }\n\n    for (const [breakpoint, match] of matchBreakpoints.reverse()) {\n      if (match) {\n        this.#breakpointChangeListener.emit(breakpoint);\n        this.#breakpoint = breakpoint;\n        break;\n      }\n    }\n  }\n\n  public disableBreakpointDetection() {\n    this.#isDetectionEnabled = false;\n  }\n\n  public enableBreakpointDetection() {\n    this.#isDetectionEnabled = true;\n  }\n\n  public setBreakpoint(breakpoint: Breakpoint) {\n    this.#breakpoint = breakpoint;\n    this.#breakpointChangeListener.emit(breakpoint);\n  }\n\n  public setBreakpoints(breakpoints: Breakpoint[]) {\n    this.#supportedBreakpoints = breakpoints;\n    this.onResize();\n  }\n}\n\nexport const applicationLayoutService = new ApplicationLayoutService();\n"]}
+{"version":3,"file":"service.js","sourceRoot":"","sources":["../../../../src/components/utils/application-layout/service.ts"],"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 { Breakpoint, matchBreakpoint } from '../breakpoints';\nimport { TypedEvent } from '../typed-event';\n\nclass ApplicationLayoutService {\n  // Keep order of breakpoints\n  #supportedBreakpoints: Breakpoint[] = ['sm', 'md', 'lg'];\n  #breakpointChangeListener = new TypedEvent<Breakpoint>();\n  #breakpoint: Breakpoint = 'lg';\n\n  #isDetectionEnabled = true;\n\n  constructor() {\n    if (typeof window !== 'undefined') {\n      window.addEventListener('resize', this.onResize.bind(this));\n      this.onResize();\n    }\n  }\n\n  get breakpoint() {\n    return this.#breakpoint;\n  }\n\n  get onChange() {\n    return this.#breakpointChangeListener;\n  }\n\n  get isDetectionEnabled() {\n    return this.#isDetectionEnabled;\n  }\n\n  private onResize() {\n    if (!this.#isDetectionEnabled) {\n      return;\n    }\n    if (!this.#supportedBreakpoints) {\n      return;\n    }\n    const matchBreakpoints: [Breakpoint, boolean][] = [];\n\n    const breakpoints = this.#supportedBreakpoints;\n\n    breakpoints.forEach((breakpoint) => {\n      const match = matchBreakpoint(breakpoint);\n      matchBreakpoints.push([breakpoint, match]);\n    });\n\n    if (matchBreakpoints.every(([_, match]) => match === false)) {\n      let breakPointIndex = 0;\n      if (!this.#supportedBreakpoints.includes('lg')) {\n        breakPointIndex = matchBreakpoints.length - 1;\n      }\n\n      const [breakpoint, _] = matchBreakpoints[breakPointIndex];\n      this.#breakpointChangeListener.emit(breakpoint);\n      this.#breakpoint = breakpoint;\n      return;\n    }\n\n    for (const [breakpoint, match] of matchBreakpoints.reverse()) {\n      if (match) {\n        this.#breakpointChangeListener.emit(breakpoint);\n        this.#breakpoint = breakpoint;\n        break;\n      }\n    }\n  }\n\n  public disableBreakpointDetection() {\n    this.#isDetectionEnabled = false;\n  }\n\n  public enableBreakpointDetection() {\n    this.#isDetectionEnabled = true;\n  }\n\n  public setBreakpoint(breakpoint: Breakpoint) {\n    this.#breakpoint = breakpoint;\n    this.#breakpointChangeListener.emit(breakpoint);\n  }\n\n  public setBreakpoints(breakpoints: Breakpoint[]) {\n    this.#supportedBreakpoints = breakpoints;\n    this.onResize();\n  }\n}\n\nexport const applicationLayoutService = new ApplicationLayoutService();\n"]}

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

@@ -0,0 +1,65 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { getElement } from '@stencil/core';
+const defaultOptions = {
+  target: 'window',
+  defaultEnabled: true,
+};
+export function createListener(event, options = {}) {
+  const opts = Object.assign(Object.assign({}, defaultOptions), options);
+  let callback;
+  const onEvent = (event) => {
+    callback(event);
+  };
+  const resultObject = {
+    on: (onEventCallback) => {
+      callback = onEventCallback;
+    },
+    isEnabled: opts.defaultEnabled,
+    enable: (state) => {
+      resultObject.isEnabled = state;
+      if (state) {
+        addEventListener(event, onEvent);
+      }
+      else {
+        removeEventListener(event, onEvent);
+      }
+    },
+    destroy: () => {
+      resultObject.enable(false);
+    },
+  };
+  resultObject.enable(opts.defaultEnabled);
+  return resultObject;
+}
+export function OnListener(event, fnExp) {
+  return (proto, methodName) => {
+    const { componentWillLoad, componentWillRender, disconnectedCallback } = proto;
+    proto.componentWillRender = function () {
+      const host = getElement(this);
+      host[`__ix__${methodName}`].enable(fnExp(this));
+      return componentWillRender && componentWillRender.call(this);
+    };
+    proto.componentWillLoad = function () {
+      const listener = createListener(event);
+      const host = getElement(this);
+      const method = this[methodName];
+      host[`__ix__${methodName}`] = listener;
+      listener.on(method.bind(this));
+      return componentWillLoad && componentWillLoad.call(this);
+    };
+    proto.disconnectedCallback = function () {
+      const host = getElement(this);
+      host[`__ix__${methodName}`].destroy();
+      host[`__ix__${methodName}`] = null;
+      return disconnectedCallback && disconnectedCallback.call(this);
+    };
+  };
+}
+//# sourceMappingURL=listener.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"listener.js","sourceRoot":"","sources":["../../../src/components/utils/listener.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAO3C,MAAM,cAAc,GAAoB;EACtC,MAAM,EAAE,QAAQ;EAChB,cAAc,EAAE,IAAI;CACrB,CAAC;AAEF,MAAM,UAAU,cAAc,CAAC,KAAa,EAAE,UAA2B,EAAE;EACzE,MAAM,IAAI,mCACL,cAAc,GACd,OAAO,CACX,CAAC;EAEF,IAAI,QAAa,CAAC;EAClB,MAAM,OAAO,GAAG,CAAC,KAAY,EAAE,EAAE;IAC/B,QAAQ,CAAC,KAAK,CAAC,CAAC;EAClB,CAAC,CAAC;EAEF,MAAM,YAAY,GAAG;IACnB,EAAE,EAAE,CAAC,eAAoB,EAAE,EAAE;MAC3B,QAAQ,GAAG,eAAe,CAAC;IAC7B,CAAC;IAED,SAAS,EAAE,IAAI,CAAC,cAAc;IAE9B,MAAM,EAAE,CAAC,KAAc,EAAE,EAAE;MACzB,YAAY,CAAC,SAAS,GAAG,KAAK,CAAC;MAE/B,IAAI,KAAK,EAAE;QACT,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;OAClC;WAAM;QACL,mBAAmB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;OACrC;IACH,CAAC;IAED,OAAO,EAAE,GAAG,EAAE;MACZ,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC;GACF,CAAC;EAEF,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;EACzC,OAAO,YAAY,CAAC;AACtB,CAAC;AAED,MAAM,UAAU,UAAU,CAAI,KAAa,EAAE,KAA4B;EACvE,OAAO,CAAC,KAAU,EAAE,UAAkB,EAAE,EAAE;IACxC,MAAM,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,GACpE,KAAK,CAAC;IAER,KAAK,CAAC,mBAAmB,GAAG;MAC1B,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;MAC9B,IAAI,CAAC,SAAS,UAAU,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;MAChD,OAAO,mBAAmB,IAAI,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/D,CAAC,CAAC;IAEF,KAAK,CAAC,iBAAiB,GAAG;MACxB,MAAM,QAAQ,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;MACvC,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;MAC9B,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC;MAEhC,IAAI,CAAC,SAAS,UAAU,EAAE,CAAC,GAAG,QAAQ,CAAC;MAEvC,QAAQ,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;MAC/B,OAAO,iBAAiB,IAAI,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3D,CAAC,CAAC;IAEF,KAAK,CAAC,oBAAoB,GAAG;MAC3B,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;MAE9B,IAAI,CAAC,SAAS,UAAU,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC;MACtC,IAAI,CAAC,SAAS,UAAU,EAAE,CAAC,GAAG,IAAI,CAAC;MACnC,OAAO,oBAAoB,IAAI,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACjE,CAAC,CAAC;EACJ,CAAC,CAAC;AACJ,CAAC","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { getElement } from '@stencil/core';\n\nexport type ListenerOptions = {\n  target?: 'window';\n  defaultEnabled?: boolean;\n};\n\nconst defaultOptions: ListenerOptions = {\n  target: 'window',\n  defaultEnabled: true,\n};\n\nexport function createListener(event: string, options: ListenerOptions = {}) {\n  const opts = {\n    ...defaultOptions,\n    ...options,\n  };\n\n  let callback: any;\n  const onEvent = (event: Event) => {\n    callback(event);\n  };\n\n  const resultObject = {\n    on: (onEventCallback: any) => {\n      callback = onEventCallback;\n    },\n\n    isEnabled: opts.defaultEnabled,\n\n    enable: (state: boolean) => {\n      resultObject.isEnabled = state;\n\n      if (state) {\n        addEventListener(event, onEvent);\n      } else {\n        removeEventListener(event, onEvent);\n      }\n    },\n\n    destroy: () => {\n      resultObject.enable(false);\n    },\n  };\n\n  resultObject.enable(opts.defaultEnabled);\n  return resultObject;\n}\n\nexport function OnListener<T>(event: string, fnExp?: (self: T) => boolean) {\n  return (proto: any, methodName: string) => {\n    const { componentWillLoad, componentWillRender, disconnectedCallback } =\n      proto;\n\n    proto.componentWillRender = function () {\n      const host = getElement(this);\n      host[`__ix__${methodName}`].enable(fnExp(this));\n      return componentWillRender && componentWillRender.call(this);\n    };\n\n    proto.componentWillLoad = function () {\n      const listener = createListener(event);\n      const host = getElement(this);\n      const method = this[methodName];\n\n      host[`__ix__${methodName}`] = listener;\n\n      listener.on(method.bind(this));\n      return componentWillLoad && componentWillLoad.call(this);\n    };\n\n    proto.disconnectedCallback = function () {\n      const host = getElement(this);\n\n      host[`__ix__${methodName}`].destroy();\n      host[`__ix__${methodName}`] = null;\n      return disconnectedCallback && disconnectedCallback.call(this);\n    };\n  };\n}\n"]}

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

@@ -0,0 +1,24 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Prevents angular from change detection when requesting an animation frame
+ *
+ * Credits goes to:
+ * https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts
+ */
+export const requestAnimationFrameNoNgZone = (callback) => {
+  if (typeof __zone_symbol__requestAnimationFrame === 'function') {
+    return __zone_symbol__requestAnimationFrame(callback);
+  }
+  if (typeof requestAnimationFrame === 'function') {
+    return requestAnimationFrame(callback);
+  }
+  return setTimeout(callback);
+};
+//# sourceMappingURL=requestAnimationFrame.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"requestAnimationFrame.js","sourceRoot":"","sources":["../../../src/components/utils/requestAnimationFrame.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAC3C,QAAkC,EAClC,EAAE;EACF,IAAI,OAAO,oCAAoC,KAAK,UAAU,EAAE;IAC9D,OAAO,oCAAoC,CAAC,QAAQ,CAAC,CAAC;GACvD;EACD,IAAI,OAAO,qBAAqB,KAAK,UAAU,EAAE;IAC/C,OAAO,qBAAqB,CAAC,QAAQ,CAAC,CAAC;GACxC;EACD,OAAO,UAAU,CAAC,QAAQ,CAAC,CAAC;AAC9B,CAAC,CAAC","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\ndeclare const __zone_symbol__requestAnimationFrame: any;\n\n/**\n * Prevents angular from change detection when requesting an animation frame\n *\n * Credits goes to:\n * https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts\n */\nexport const requestAnimationFrameNoNgZone = (\n  callback: (...args: any[]) => void\n) => {\n  if (typeof __zone_symbol__requestAnimationFrame === 'function') {\n    return __zone_symbol__requestAnimationFrame(callback);\n  }\n  if (typeof requestAnimationFrame === 'function') {\n    return requestAnimationFrame(callback);\n  }\n  return setTimeout(callback);\n};\n"]}

package/dist/esm/{base-button-87048318.js → base-button-a4078c61.js}

@@ -34,7 +34,7 @@ function BaseButton(props, children) {
   const extraClasses = (_a = props.extraClasses) !== null && _a !== void 0 ? _a : {};
   return (h("button", Object.assign({}, props.ariaAttributes, { onClick: (e) => (props.onClick ? props.onClick(e) : undefined), tabindex: props.disabled ? -1 : (_b = props.tabIndex) !== null && _b !== void 0 ? _b : 0, type: props.type, class: Object.assign(Object.assign({}, getButtonClasses(props.variant, props.outline, props.ghost, props.iconOnly, props.iconOval, props.selected, props.disabled || props.loading)), extraClasses) }),
     props.loading ? h("ix-spinner", { size: "small", hideTrack: true }) : null,
-    props.icon && !props.loading ? (h("ix-icon", { name: props.icon, size: props.iconSize, color: props.iconColor })) : null,
+    props.icon && !props.loading ? (h("ix-icon", { class: "icon", name: props.icon, size: props.iconSize, color: props.iconColor })) : null,
     h("div", { class: {
         content: true,
         [`content-${props.alignment}`]: !!props.alignment,
@@ -44,4 +44,4 @@ function BaseButton(props, children) {
 
 export { BaseButton as B, getButtonClasses as g };
 
-//# sourceMappingURL=base-button-87048318.js.map
+//# sourceMappingURL=base-button-a4078c61.js.map

package/dist/esm/base-button-a4078c61.js.map

@@ -0,0 +1 @@
+{"file":"base-button-a4078c61.js","mappings":";;AAAA;;;;;;;;AAcA,MAAM,SAAS,GAAG,CAAC,OAAe;EAChC,OAAO,OAAO,CAAC,WAAW,EAAE,KAAK,SAAS,CAAC,WAAW,EAAE,CAAC;AAC3D,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,OAAe;EAClC,OAAO,OAAO,CAAC,WAAW,EAAE,KAAK,WAAW,CAAC,WAAW,EAAE,CAAC;AAC7D,CAAC,CAAC;MAEW,gBAAgB,GAAG,CAC9B,OAAsB,EACtB,OAAgB,EAChB,KAAc,EACd,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAiB,EACjB,QAAiB;EAEjB,OAAO;IACL,GAAG,EAAE,IAAI;IACT,aAAa,EAAE,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK;IACvD,qBAAqB,EAAE,SAAS,CAAC,OAAO,CAAC,IAAI,OAAO,IAAI,CAAC,KAAK;IAC9D,uBAAuB,EAAE,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,IAAI,KAAK;IAChE,eAAe,EAAE,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK;IAC3D,uBAAuB,EAAE,WAAW,CAAC,OAAO,CAAC,IAAI,OAAO,IAAI,CAAC,KAAK;IAClE,yBAAyB,EAAE,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,IAAI,KAAK;IACpE,UAAU,EAAE,QAAQ;IACpB,UAAU,EAAE,QAAQ;IACpB,QAAQ,EAAE,QAAQ;IAClB,QAAQ,EAAE,QAAQ;GACnB,CAAC;AACJ,EAAE;SAuBc,UAAU,CAAC,KAAsB,EAAE,QAAQ;;EACzD,MAAM,YAAY,GAAG,MAAA,KAAK,CAAC,YAAY,mCAAI,EAAE,CAAC;EAE9C,QACE,8BACM,KAAK,CAAC,cAAc,IACxB,OAAO,EAAE,CAAC,CAAQ,MAAM,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,EACrE,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,MAAA,KAAK,CAAC,QAAQ,mCAAI,CAAC,EACnD,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,kCACA,gBAAgB,CACjB,KAAK,CAAC,OAAO,EACb,KAAK,CAAC,OAAO,EACb,KAAK,CAAC,KAAK,EACX,KAAK,CAAC,QAAQ,EACd,KAAK,CAAC,QAAQ,EACd,KAAK,CAAC,QAAQ,EACd,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,OAAO,CAChC,GACE,YAAY;IAGhB,KAAK,CAAC,OAAO,GAAG,kBAAY,IAAI,EAAC,OAAO,EAAC,SAAS,SAAc,GAAG,IAAI;IACvE,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,IAC3B,eACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,QAAe,EAC3B,KAAK,EAAE,KAAK,CAAC,SAAS,GACb,IACT,IAAI;IACR,WACE,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;QACb,CAAC,WAAW,KAAK,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,KAAK,CAAC,SAAS;OAClD,IAEA,QAAQ,CACL;IACL,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CACxC,EACT;AACJ;;;;","names":[],"sources":["./src/components/button/base-button.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 */\nimport { h } from '@stencil/core';\nimport { A11yAttributes } from '../utils/a11y';\nimport { ButtonVariant } from './button';\n\nexport type ButtonAlignment = 'center' | 'start';\n\nconst isPrimary = (variant: string) => {\n  return variant.toUpperCase() === 'Primary'.toUpperCase();\n};\n\nconst isSecondary = (variant: string) => {\n  return variant.toUpperCase() === 'Secondary'.toUpperCase();\n};\n\nexport const getButtonClasses = (\n  variant: ButtonVariant,\n  outline: boolean,\n  ghost: boolean,\n  iconOnly = false,\n  iconOval = false,\n  selected: boolean,\n  disabled: boolean\n) => {\n  return {\n    btn: true,\n    'btn-primary': isPrimary(variant) && !outline && !ghost,\n    'btn-outline-primary': isPrimary(variant) && outline && !ghost,\n    'btn-invisible-primary': isPrimary(variant) && !outline && ghost,\n    'btn-secondary': isSecondary(variant) && !outline && !ghost,\n    'btn-outline-secondary': isSecondary(variant) && outline && !ghost,\n    'btn-invisible-secondary': isSecondary(variant) && !outline && ghost,\n    'btn-icon': iconOnly,\n    'btn-oval': iconOval,\n    selected: selected,\n    disabled: disabled,\n  };\n};\n\nexport type BaseButtonProps = {\n  type: string;\n  variant: ButtonVariant;\n  outline: boolean;\n  ghost: boolean;\n  iconOnly: boolean;\n  iconOval: boolean;\n  selected: boolean;\n  disabled: boolean;\n  loading: boolean;\n  icon: string;\n  onClick?: Function;\n  ariaAttributes?: A11yAttributes;\n  extraClasses?: { [key: string]: boolean };\n  iconSize?: string;\n  iconColor?: string;\n  alignment?: ButtonAlignment;\n  tabIndex?: number;\n  afterContent?: any;\n};\n\nexport function BaseButton(props: BaseButtonProps, children) {\n  const extraClasses = props.extraClasses ?? {};\n\n  return (\n    <button\n      {...props.ariaAttributes}\n      onClick={(e: Event) => (props.onClick ? props.onClick(e) : undefined)}\n      tabindex={props.disabled ? -1 : props.tabIndex ?? 0}\n      type={props.type}\n      class={{\n        ...getButtonClasses(\n          props.variant,\n          props.outline,\n          props.ghost,\n          props.iconOnly,\n          props.iconOval,\n          props.selected,\n          props.disabled || props.loading\n        ),\n        ...extraClasses,\n      }}\n    >\n      {props.loading ? <ix-spinner size=\"small\" hideTrack></ix-spinner> : null}\n      {props.icon && !props.loading ? (\n        <ix-icon\n          class=\"icon\"\n          name={props.icon}\n          size={props.iconSize as any}\n          color={props.iconColor}\n        ></ix-icon>\n      ) : null}\n      <div\n        class={{\n          content: true,\n          [`content-${props.alignment}`]: !!props.alignment,\n        }}\n      >\n        {children}\n      </div>\n      {props.afterContent ? props.afterContent : null}\n    </button>\n  );\n}\n"],"version":3}

package/dist/esm/{base-icon-button-afac2d95.js → base-icon-button-a3dc30a2.js}

@@ -1,5 +1,5 @@
 import { h } from './index-eb0be730.js';
-import { B as BaseButton } from './base-button-87048318.js';
+import { B as BaseButton } from './base-button-a4078c61.js';
 
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG
@@ -15,4 +15,4 @@ function BaseIconButton(props) {
 
 export { BaseIconButton as B };
 
-//# sourceMappingURL=base-icon-button-afac2d95.js.map
+//# sourceMappingURL=base-icon-button-a3dc30a2.js.map

package/dist/esm/{base-icon-button-afac2d95.js.map → base-icon-button-a3dc30a2.js.map}

@@ -1 +1 @@
-{"file":"base-icon-button-afac2d95.js","mappings":";;;AAAA;;;;;;;;SAYgB,cAAc,CAAC,KAAoC;EACjE,OAAO,EAAC,UAAU,oBAAK,KAAK,IAAE,IAAI,EAAC,QAAQ,IAAc,CAAC;AAC5D;;;;","names":[],"sources":["./src/components/icon-button/base-icon-button.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\nimport { h } from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\n\nexport function BaseIconButton(props: Omit<BaseButtonProps, 'type'>) {\n  return <BaseButton {...props} type=\"button\"></BaseButton>;\n}\n"],"version":3}
+{"file":"base-icon-button-a3dc30a2.js","mappings":";;;AAAA;;;;;;;;SAYgB,cAAc,CAAC,KAAoC;EACjE,OAAO,EAAC,UAAU,oBAAK,KAAK,IAAE,IAAI,EAAC,QAAQ,IAAc,CAAC;AAC5D;;;;","names":[],"sources":["./src/components/icon-button/base-icon-button.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\nimport { h } from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\n\nexport function BaseIconButton(props: Omit<BaseButtonProps, 'type'>) {\n  return <BaseButton {...props} type=\"button\"></BaseButton>;\n}\n"],"version":3}

package/dist/esm/ix-application-header.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-eb0be730.js';
-import { m as menuController, a as applicationLayoutService } from './menu-service-5555b4fa.js';
+import { m as menuController, a as applicationLayoutService } from './menu-service-04c1257c.js';
 import { a as useContextConsumer, A as ApplicationLayoutContext } from './context-6a3bc77f.js';
 import './breakpoints-b76e9f27.js';
 import './typed-event-a230184a.js';

package/dist/esm/ix-application.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-eb0be730.js';
 import { u as useContextProvider, A as ApplicationLayoutContext } from './context-6a3bc77f.js';
-import { a as applicationLayoutService, m as menuController } from './menu-service-5555b4fa.js';
+import { a as applicationLayoutService, m as menuController } from './menu-service-04c1257c.js';
 import { h as hasSlottedElements } from './shadow-dom-b9df3d9b.js';
 import { t as themeSwitcher } from './theme-switcher-9ede3823.js';
 import './typed-event-a230184a.js';

package/dist/esm/ix-basic-navigation.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-eb0be730.js';
 import { u as useContextProvider, A as ApplicationLayoutContext } from './context-6a3bc77f.js';
-import { a as applicationLayoutService, m as menuController } from './menu-service-5555b4fa.js';
+import { a as applicationLayoutService, m as menuController } from './menu-service-04c1257c.js';
 import './typed-event-a230184a.js';
 import './breakpoints-b76e9f27.js';
 

package/dist/esm/ix-blind.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-eb0be730.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-eb0be730.js';
 import { a as anime } from './anime.es-185e9087.js';
 import { a as a11yBoolean } from './a11y-115b6a36.js';
 
-const blindCss = ":host{display:flex;flex-direction:column;border-radius:var(--theme-blind--border-radius);overflow:hidden}:host .blind-header{all:unset;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:0.5rem;cursor:pointer;z-index:1}:host .blind-header .collapse-icon{padding:0.25rem 0.5rem}:host .blind-header .blind-header-title-col{flex-grow:1;flex-basis:0;display:inline-flex;align-items:center;min-width:0}:host .blind-header ix-typography{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .blind-header .blind-header-title-col:not(:first-of-type){justify-content:flex-end}:host .blind-header .blind-header-title-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-padding-end:0.5rem;padding-inline-end:0.5rem}:host .blind-header .blind-header-title-sublabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:0.5rem}:host .blind-header .blind-header-title,:host .blind-header .blind-header-title-basic{display:flex;align-items:center;flex-grow:1;height:100%;min-width:0}:host .blind-header .blind-header-title-basic ix-icon{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}:host .blind-header:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-color-focus-bdr);outline:none}:host .blind-header .blind-header-labels{display:inline-flex;flex-grow:1;min-width:0}:host .blind-content{display:block;padding:1rem;transition-property:padding;transition-duration:150ms;transition-timing-function:ease-in}:host .blind-content.hide{max-height:0;padding-top:0px;padding-bottom:0px}:host(.blind-alarm){background-color:var(--theme-blind-base--background)}:host(.blind-alarm) .blind-header{background-color:var(--theme-color-alarm)}:host(.blind-alarm) .blind-header .blind-header-title-label,:host(.blind-alarm) .blind-header .blind-header-title-sublabel{color:var(--theme-color-alarm--contrast)}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-alarm--hover)}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-alarm--active)}:host(.blind-critical){background-color:var(--theme-blind-base--background)}:host(.blind-critical) .blind-header{background-color:var(--theme-color-critical)}:host(.blind-critical) .blind-header .blind-header-title-label,:host(.blind-critical) .blind-header .blind-header-title-sublabel{color:var(--theme-color-critical--contrast)}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-critical--hover)}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-critical) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-critical--active)}:host(.blind-info){background-color:var(--theme-blind-base--background)}:host(.blind-info) .blind-header{background-color:var(--theme-color-info)}:host(.blind-info) .blind-header .blind-header-title-label,:host(.blind-info) .blind-header .blind-header-title-sublabel{color:var(--theme-color-info--contrast)}:host(.blind-info) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-info) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-info--hover)}:host(.blind-info) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-info) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-info) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-info--active)}:host(.blind-insight){background-color:var(--theme-blind-base--background)}:host(.blind-insight) .blind-header{background-color:var(--theme-color-insight)}:host(.blind-insight) .blind-header .blind-header-title-label{color:var(--theme-color-std-text)}:host(.blind-insight) .blind-header .blind-header-title-sublabel{color:var(--theme-color-soft-text)}:host(.blind-insight) .blind-header:not(.disabled):not(:disabled).hover,:host(.blind-insight) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host(.blind-insight) .blind-header:not(.disabled):not(:disabled).active,:host(.blind-insight) .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host(.blind-neutral){background-color:var(--theme-blind-base--background)}:host(.blind-neutral) .blind-header{background-color:var(--theme-color-neutral)}:host(.blind-neutral) .blind-header .blind-header-title-label,:host(.blind-neutral) .blind-header .blind-header-title-sublabel{color:var(--theme-color-neutral--contrast)}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-neutral--hover)}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-neutral--active)}:host(.blind-notification){background-color:var(--theme-blind-base--background)}:host(.blind-notification) .blind-header{background-color:var(--theme-color-notification)}:host(.blind-notification) .blind-header .blind-header-title-label,:host(.blind-notification) .blind-header .blind-header-title-sublabel{color:var(--theme-color-notification--contrast)}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-notification--hover)}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-notification) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-notification--active)}:host(.blind-success){background-color:var(--theme-blind-base--background)}:host(.blind-success) .blind-header{background-color:var(--theme-color-success)}:host(.blind-success) .blind-header .blind-header-title-label,:host(.blind-success) .blind-header .blind-header-title-sublabel{color:var(--theme-color-success--contrast)}:host(.blind-success) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-success) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-success--hover)}:host(.blind-success) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-success) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-success) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-success--active)}:host(.blind-warning){background-color:var(--theme-blind-base--background)}:host(.blind-warning) .blind-header{background-color:var(--theme-color-warning)}:host(.blind-warning) .blind-header .blind-header-title-label,:host(.blind-warning) .blind-header .blind-header-title-sublabel{color:var(--theme-color-warning--contrast)}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-warning--hover)}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-warning) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-warning--active)}:host(.blind-primary){background-color:var(--theme-blind-base--background)}:host(.blind-primary) .blind-header{background-color:var(--theme-color-primary)}:host(.blind-primary) .blind-header .blind-header-title-label,:host(.blind-primary) .blind-header .blind-header-title-sublabel{color:var(--theme-color-primary--contrast)}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-primary--hover)}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-primary) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-primary--active)}:host(.blind-outline){border:solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);border-color:var(--theme-color-soft-bdr)}:host(.blind-outline) .blind-header{background-color:var(--theme-color-ghost)}:host(.blind-outline) .blind-header .blind-header-title-label{color:var(--theme-color-std-text)}:host(.blind-outline) .blind-header .blind-header-title-sublabel{color:var(--theme-color-soft-text)}:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).hover,:host(.blind-outline) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).active,:host(.blind-outline) .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}";
+const blindCss = ":host{display:flex;flex-direction:column;border-radius:var(--theme-blind--border-radius);overflow:hidden}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .blind-header-wrapper{display:block;position:relative;width:100%;min-height:3rem;height:3rem;overflow:hidden}:host .blind-header-content{display:flex;position:relative;align-items:center;justify-content:flex-start;width:100%;height:100%;z-index:1;pointer-events:none;padding-left:0.5rem}:host .blind-header-title{display:flex;position:relative;align-items:center;flex-grow:1;flex-shrink:0;margin-right:1rem}:host .blind-header{all:unset;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;position:absolute;top:0px;left:0px;pointer-events:all;padding-left:2.5rem;min-height:3rem;height:3rem;width:calc(100% - 2 * var(--theme-blind--border-thickness));border:solid var(--theme-blind--border-thickness) transparent;border-radius:var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;cursor:pointer}:host .blind-header:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-color-focus-bdr);outline:none}:host .blind-header-title-icon,:host .collapse-icon{margin-right:0.5rem}:host .blind-header-title-row{display:flex;flex-grow:1}:host .blind-header-title-col{flex-grow:1;flex-basis:0;display:inline-flex;align-items:center;min-width:0}:host .blind-header-title-col:not(:first-of-type){justify-content:flex-end}:host ix-typography{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .blind-header-title-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline-end:0.5rem}:host .blind-header-title-sublabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:0.5rem}:host .blind-header-title{display:flex;align-items:center;flex-grow:1;height:100%;min-width:0}:host .blind-header-labels{display:inline-flex;flex-grow:1;min-width:0}:host .blind-content{display:block;padding:1rem;transition-property:padding;transition-duration:150ms;transition-timing-function:ease-in}:host .blind-content.hide{max-height:0;padding-top:0px;padding-bottom:0px}:host .header-actions{pointer-events:all}:host(.blind-alarm){background-color:var(--theme-blind-base--background)}:host(.blind-alarm) .blind-header{background-color:var(--theme-color-alarm)}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-alarm--hover)}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-alarm--active)}:host(.blind-alarm) .blind-header-title-label,:host(.blind-alarm) .blind-header-title-sublabel{color:var(--theme-color-alarm--contrast)}:host(.blind-critical){background-color:var(--theme-blind-base--background)}:host(.blind-critical) .blind-header{background-color:var(--theme-color-critical)}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-critical--hover)}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-critical) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-critical--active)}:host(.blind-critical) .blind-header-title-label,:host(.blind-critical) .blind-header-title-sublabel{color:var(--theme-color-critical--contrast)}:host(.blind-info){background-color:var(--theme-blind-base--background)}:host(.blind-info) .blind-header{background-color:var(--theme-color-info)}:host(.blind-info) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-info) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-info--hover)}:host(.blind-info) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-info) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-info) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-info--active)}:host(.blind-info) .blind-header-title-label,:host(.blind-info) .blind-header-title-sublabel{color:var(--theme-color-info--contrast)}:host(.blind-insight){background-color:var(--theme-blind-base--background)}:host(.blind-insight) .blind-header{background-color:var(--theme-color-insight)}:host(.blind-insight) .blind-header:not(.disabled):not(:disabled).hover,:host(.blind-insight) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host(.blind-insight) .blind-header:not(.disabled):not(:disabled).active,:host(.blind-insight) .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host(.blind-insight) .blind-header-title-label{color:var(--theme-color-std-text)}:host(.blind-insight) .blind-header-title-sublabel{color:var(--theme-color-soft-text)}:host(.blind-neutral){background-color:var(--theme-blind-base--background)}:host(.blind-neutral) .blind-header{background-color:var(--theme-color-neutral)}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-neutral--hover)}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-neutral--active)}:host(.blind-neutral) .blind-header-title-label,:host(.blind-neutral) .blind-header-title-sublabel{color:var(--theme-color-neutral--contrast)}:host(.blind-notification){background-color:var(--theme-blind-base--background)}:host(.blind-notification) .blind-header{background-color:var(--theme-color-notification)}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-notification--hover)}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-notification) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-notification--active)}:host(.blind-notification) .blind-header-title-label,:host(.blind-notification) .blind-header-title-sublabel{color:var(--theme-color-notification--contrast)}:host(.blind-success){background-color:var(--theme-blind-base--background)}:host(.blind-success) .blind-header{background-color:var(--theme-color-success)}:host(.blind-success) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-success) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-success--hover)}:host(.blind-success) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-success) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-success) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-success--active)}:host(.blind-success) .blind-header-title-label,:host(.blind-success) .blind-header-title-sublabel{color:var(--theme-color-success--contrast)}:host(.blind-warning){background-color:var(--theme-blind-base--background)}:host(.blind-warning) .blind-header{background-color:var(--theme-color-warning)}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-warning--hover)}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-warning) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-warning--active)}:host(.blind-warning) .blind-header-title-label,:host(.blind-warning) .blind-header-title-sublabel{color:var(--theme-color-warning--contrast)}:host(.blind-primary){background-color:var(--theme-blind-base--background)}:host(.blind-primary) .blind-header{background-color:var(--theme-color-primary)}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-primary--hover)}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-primary) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-primary--active)}:host(.blind-primary) .blind-header-title-label,:host(.blind-primary) .blind-header-title-sublabel{color:var(--theme-color-primary--contrast)}:host(.blind-outline){border:solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);border-color:var(--theme-color-soft-bdr)}:host(.blind-outline) .blind-header{background-color:var(--theme-color-ghost)}:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).hover,:host(.blind-outline) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).active,:host(.blind-outline) .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host(.blind-outline) .blind-header-title-label{color:var(--theme-color-std-text)}:host(.blind-outline) .blind-header-title-sublabel{color:var(--theme-color-soft-text)}";
 
 let sequentialInstanceId = 0;
 const Blind = class {
@@ -16,12 +16,7 @@ const Blind = class {
     this.icon = undefined;
     this.variant = 'insight';
   }
-  onHeaderClick(e) {
-    if (e.target.closest('.header-actions')) {
-      return;
-    }
-    e.preventDefault();
-    e.stopImmediatePropagation();
+  onHeaderClick() {
     this.collapsed = !this.collapsed;
     this.collapsedChange.emit(this.collapsed);
   }
@@ -73,15 +68,15 @@ const Blind = class {
   render() {
     return (h(Host, { class: {
         [`blind-${this.variant}`]: true,
-      } }, h("button", { class: {
+      } }, h("div", { class: 'blind-header-wrapper' }, h("div", { class: 'blind-header-content' }, h("ix-icon", { class: "collapse-icon", name: 'chevron-right-small', color: this.variant === 'insight' || this.variant === 'outline'
+        ? 'color-primary'
+        : `color-${this.variant}--contrast`, ref: (ref) => (this.chevronRef = ref) }), h("div", { class: "blind-header-title", id: `ix-blind-header-title-${this.blindId}` }, this.label !== undefined ? (h(Fragment, null, this.icon && (h("ix-icon", { class: "blind-header-title-icon", name: this.icon, color: this.variant === 'insight' || this.variant === 'outline'
+        ? 'color-std-text'
+        : `color-${this.variant}--contrast` })), h("div", { class: 'blind-header-title-row' }, h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.label, format: "label-lg", bold: true }, h("div", { class: "blind-header-title-label", title: this.label }, this.label))), this.sublabel && (h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.sublabel }, h("div", { class: "blind-header-title-sublabel" }, this.sublabel))))), h("div", { class: "header-actions" }, h("slot", { name: "header-actions" })))) : null)), h("button", { class: {
         'blind-header': true,
         [`blind-${this.variant}`]: true,
         closed: this.collapsed,
-      }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.blindId}`, "aria-controls": `ix-blind-content-section-${this.blindId}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: (e) => this.onHeaderClick(e) }, h("ix-icon", { class: "collapse-icon", name: 'chevron-right-small', color: this.variant === 'insight' || this.variant === 'outline'
-        ? 'color-primary'
-        : `color-${this.variant}--contrast`, ref: (ref) => (this.chevronRef = ref) }), h("div", { class: "blind-header-title", id: `ix-blind-header-title-${this.blindId}` }, this.label !== undefined ? (h("span", { class: "blind-header-title-basic" }, h("div", { class: "blind-header-title-col" }, this.icon !== undefined ? (h("ix-icon", { name: this.icon, color: this.variant === 'insight' || this.variant === 'outline'
-        ? 'color-std-text'
-        : `color-${this.variant}--contrast` })) : (''), h("ix-typography", { title: this.label, format: "label-lg", bold: true }, h("div", { class: "blind-header-title-label", title: this.label }, this.label))), h("div", { class: "blind-header-title-col" }, this.sublabel !== undefined ? (h("ix-typography", { title: this.sublabel }, h("div", { class: "blind-header-title-sublabel" }, this.sublabel))) : (''), h("span", { class: "header-actions", onClick: (e) => e.stopImmediatePropagation() }, h("slot", { name: "header-actions" }))))) : (h("slot", { name: "custom-header" })))), h("section", { id: `ix-blind-content-section-${this.blindId}`, "aria-labelledby": `ix-blind-header-title-${this.blindId}` }, h("div", { class: {
+      }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.blindId}`, "aria-controls": `ix-blind-content-section-${this.blindId}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: () => this.onHeaderClick() }, h("slot", { name: "custom-header" }))), h("section", { id: `ix-blind-content-section-${this.blindId}`, "aria-labelledby": `ix-blind-header-title-${this.blindId}` }, h("div", { class: {
         'blind-content': true,
         hide: this.collapsed,
       } }, !this.collapsed ? h("slot", null) : null))));