@siemens/ix 0.0.0-pr-1974-20250627114851 → 0.0.0-pr-1974-20250627142646

package/components/p-BedSAVZh.js

@@ -0,0 +1,90 @@
+import { p as proxyCustomElement, H, f as forceUpdate, h, d as Host } from './p-BuJ6BWIi.js';
+import { m as matchBreakpoint } from './p-D6vSVaHq.js';
+
+const colCss = ":host{position:relative;flex-basis:0;flex-grow:1;width:100%;max-width:100%;min-height:1px;padding:calc(var(--ix-layout-grid-gutter) * 0.5)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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}";
+
+const Col = /*@__PURE__*/ proxyCustomElement(class Col extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    onResize() {
+        forceUpdate(this);
+    }
+    getSize(breakpoint) {
+        if (breakpoint === '') {
+            return this.size;
+        }
+        if (breakpoint === 'sm') {
+            return this.sizeSm;
+        }
+        if (breakpoint === 'md') {
+            return this.sizeMd;
+        }
+        if (breakpoint === 'lg') {
+            return this.sizeLg;
+        }
+    }
+    getColumnSize() {
+        let size;
+        Col.Breakpoints.forEach((breakpoint) => {
+            const isMediaQueryActive = breakpoint !== '' ? matchBreakpoint(breakpoint) : true;
+            if (!isMediaQueryActive) {
+                return;
+            }
+            const currentSize = this.getSize(breakpoint);
+            if (currentSize) {
+                size = currentSize;
+            }
+        });
+        return size;
+    }
+    getColumnSizeStyling() {
+        const size = this.getColumnSize();
+        if (!size) {
+            return;
+        }
+        if (size === 'auto') {
+            return {
+                flex: '0 0 auto',
+                width: 'auto',
+                'max-width': 'auto',
+            };
+        }
+        const colSize = `calc(calc(${size} / var(--ix-layout-grid-columns)) * 100%)`;
+        return {
+            flex: `0 0 ${colSize}`,
+            width: `${colSize}`,
+            'max-width': `${colSize}`,
+        };
+    }
+    render() {
+        return (h(Host, { key: '725f77eb880e6407ac70b50150d2575703ee5f29', style: Object.assign({}, this.getColumnSizeStyling()) }, h("slot", { key: '4b6b995339cced9d04f1118d5e9f38f19509e292' })));
+    }
+    static get style() { return colCss; }
+}, [1, "ix-col", {
+        "size": [1],
+        "sizeSm": [1, "size-sm"],
+        "sizeMd": [1, "size-md"],
+        "sizeLg": [1, "size-lg"]
+    }, [[9, "resize", "onResize"]]]);
+Col.Breakpoints = ['', 'sm', 'md', 'lg'];
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-col"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-col":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Col);
+            }
+            break;
+    } });
+}
+
+export { Col as C, defineCustomElement as d };
+//# sourceMappingURL=p-BedSAVZh.js.map
+
+//# sourceMappingURL=p-BedSAVZh.js.map

package/components/p-BedSAVZh.js.map

@@ -0,0 +1 @@
+{"file":"p-BedSAVZh.js","mappings":";;;AAAA,MAAM,MAAM,GAAG,q4BAAq4B;;MCoBv4B,GAAG,iBAAAA,kBAAA,CAAA,MAAA,GAAA,SAAAC,CAAA,CAAA;;;;;;IAwBd,QAAQ,GAAA;QACN,WAAW,CAAC,IAAI,CAAC;;AAGX,IAAA,OAAO,CAAC,UAA0B,EAAA;AACxC,QAAA,IAAI,UAAU,KAAK,EAAE,EAAE;YACrB,OAAO,IAAI,CAAC,IAAI;;AAGlB,QAAA,IAAI,UAAU,KAAK,IAAI,EAAE;YACvB,OAAO,IAAI,CAAC,MAAM;;AAGpB,QAAA,IAAI,UAAU,KAAK,IAAI,EAAE;YACvB,OAAO,IAAI,CAAC,MAAM;;AAGpB,QAAA,IAAI,UAAU,KAAK,IAAI,EAAE;YACvB,OAAO,IAAI,CAAC,MAAM;;;IAId,aAAa,GAAA;AACnB,QAAA,IAAI,IAA4B;QAChC,GAAG,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,UAAU,KAAI;AACrC,YAAA,MAAM,kBAAkB,GACtB,UAAU,KAAK,EAAE,GAAG,eAAe,CAAC,UAAU,CAAC,GAAG,IAAI;YAExD,IAAI,CAAC,kBAAkB,EAAE;gBACvB;;YAGF,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;YAE5C,IAAI,WAAW,EAAE;gBACf,IAAI,GAAG,WAAW;;AAEtB,SAAC,CAAC;AAEF,QAAA,OAAO,IAAI;;IAGL,oBAAoB,GAAA;AAC1B,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,EAAE;QAEjC,IAAI,CAAC,IAAI,EAAE;YACT;;AAGF,QAAA,IAAI,IAAI,KAAK,MAAM,EAAE;YACnB,OAAO;AACL,gBAAA,IAAI,EAAE,UAAU;AAChB,gBAAA,KAAK,EAAE,MAAM;AACb,gBAAA,WAAW,EAAE,MAAM;aACpB;;AAGH,QAAA,MAAM,OAAO,GAAG,CAAa,UAAA,EAAA,IAAI,2CAA2C;QAE5E,OAAO;YACL,IAAI,EAAE,CAAO,IAAA,EAAA,OAAO,CAAE,CAAA;YACtB,KAAK,EAAE,CAAG,EAAA,OAAO,CAAE,CAAA;YACnB,WAAW,EAAE,CAAG,EAAA,OAAO,CAAE,CAAA;SAC1B;;IAGH,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EACA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,CAAC,oBAAoB,EAAE,CAAA,EAAA,EAGhC,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;AAjGJ,GAAW,CAAA,WAAA,GAAqB,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAA1C;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/col/col.scss?tag=ix-col&encapsulation=shadow","src/components/col/col.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  position: relative;\n  flex-basis: 0;\n  flex-grow: 1;\n  width: 100%;\n  max-width: 100%;\n  min-height: 1px;\n\n  padding: calc(var(--ix-layout-grid-gutter) * 0.5);\n}\n","/*\n * SPDX-FileCopyrightText: 2024 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, forceUpdate, h, Host, Listen, Prop } from '@stencil/core';\nimport { Breakpoint, matchBreakpoint } from '../utils/breakpoints';\nimport type { ColumnSize } from './col.types';\n\ntype GridBreakpoint = Breakpoint | '';\n\n@Component({\n  tag: 'ix-col',\n  styleUrl: 'col.scss',\n  shadow: true,\n})\nexport class Col {\n  static Breakpoints: GridBreakpoint[] = ['', 'sm', 'md', 'lg'];\n\n  /**\n   * Size of the column\n   */\n  @Prop() size?: ColumnSize;\n\n  /**\n   * Size of the column for sm screens\n   */\n  @Prop() sizeSm?: ColumnSize;\n\n  /**\n   * Size of the column for md screens\n   */\n  @Prop() sizeMd?: ColumnSize;\n\n  /**\n   * Size of the column for lg screens\n   */\n  @Prop() sizeLg?: ColumnSize;\n\n  @Listen('resize', { target: 'window' })\n  onResize() {\n    forceUpdate(this);\n  }\n\n  private getSize(breakpoint: GridBreakpoint) {\n    if (breakpoint === '') {\n      return this.size;\n    }\n\n    if (breakpoint === 'sm') {\n      return this.sizeSm;\n    }\n\n    if (breakpoint === 'md') {\n      return this.sizeMd;\n    }\n\n    if (breakpoint === 'lg') {\n      return this.sizeLg;\n    }\n  }\n\n  private getColumnSize(): ColumnSize | undefined {\n    let size: ColumnSize | undefined;\n    Col.Breakpoints.forEach((breakpoint) => {\n      const isMediaQueryActive =\n        breakpoint !== '' ? matchBreakpoint(breakpoint) : true;\n\n      if (!isMediaQueryActive) {\n        return;\n      }\n\n      const currentSize = this.getSize(breakpoint);\n\n      if (currentSize) {\n        size = currentSize;\n      }\n    });\n\n    return size;\n  }\n\n  private getColumnSizeStyling() {\n    const size = this.getColumnSize();\n\n    if (!size) {\n      return;\n    }\n\n    if (size === 'auto') {\n      return {\n        flex: '0 0 auto',\n        width: 'auto',\n        'max-width': 'auto',\n      };\n    }\n\n    const colSize = `calc(calc(${size} / var(--ix-layout-grid-columns)) * 100%)`;\n\n    return {\n      flex: `0 0 ${colSize}`,\n      width: `${colSize}`,\n      'max-width': `${colSize}`,\n    };\n  }\n\n  render() {\n    return (\n      <Host\n        style={{\n          ...this.getColumnSizeStyling(),\n        }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/p-BhLbU_vK.js

@@ -0,0 +1,129 @@
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-BuJ6BWIi.js';
+import { d as defineCustomElement$1 } from './p-TNoCM8Wi.js';
+
+/*
+ * 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.
+ */
+class IxSelectItemLabelChangeEvent extends CustomEvent {
+    constructor(detail) {
+        super('ix-select-item:labelChange', {
+            bubbles: true,
+            detail,
+        });
+    }
+}
+class IxSelectItemValueChangeEvent extends CustomEvent {
+    constructor(detail) {
+        super('ix-select-item:valueChange', {
+            bubbles: true,
+            detail,
+        });
+    }
+}
+
+const selectItemCss = ":host{display:block;position:relative}:host>ix-dropdown-item{width:100%}:host ix-dropdown-item{color:var(--theme-color-std-text)}:host .select-item-checked{background-color:var(--theme-select-list-item--background--selected);--ix-dropdown-item-checked-color:var(--theme-color-std-text)}:host(.display-none){display:none}";
+
+const SelectItem = /*@__PURE__*/ proxyCustomElement(class SelectItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.itemClick = createEvent(this, "itemClick", 7);
+        /**
+         * Flag indicating whether the item is selected
+         */
+        this.selected = false;
+        /**
+         * @internal
+         */
+        this.hover = false;
+        this.componentLoaded = false;
+    }
+    /** @internal */
+    async getDropdownItemElement() {
+        return this.dropdownItem;
+    }
+    /**
+     * @internal
+     * @param event
+     */
+    async onItemClick(event) {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        this.itemClick.emit(this.value);
+    }
+    get dropdownItem() {
+        return this.hostElement.querySelector('ix-dropdown-item');
+    }
+    componentDidRender() {
+        if (this.value === undefined || this.value === null) {
+            console.warn('ix-select-item must have a `value` property');
+        }
+        this.componentLoaded = true;
+    }
+    onValueChange(newValue, oldValue) {
+        if (this.componentLoaded) {
+            this.hostElement.dispatchEvent(new IxSelectItemValueChangeEvent({
+                newValue: newValue,
+                oldValue: oldValue,
+            }));
+        }
+    }
+    labelChange(newValue, oldValue) {
+        if (this.componentLoaded) {
+            this.hostElement.dispatchEvent(new IxSelectItemLabelChangeEvent({
+                newValue: newValue,
+                oldValue: oldValue,
+            }));
+        }
+    }
+    render() {
+        return (h(Host, { key: '19f50b530d04e8ea3ba6b5eb759d214446b9cdad' }, h("ix-dropdown-item", { key: '2677202fb6a5db694bc546ad2ad5b2f3402242cf', class: {
+                'select-item-checked': this.selected,
+            }, checked: this.selected, label: this.label ? this.label : this.value, onItemClick: (e) => this.onItemClick(e) })));
+    }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "value": ["onValueChange"],
+        "label": ["labelChange"]
+    }; }
+    static get style() { return selectItemCss; }
+}, [1, "ix-select-item", {
+        "label": [513],
+        "value": [513],
+        "selected": [4],
+        "hover": [4],
+        "getDropdownItemElement": [64],
+        "onItemClick": [64]
+    }, undefined, {
+        "value": ["onValueChange"],
+        "label": ["labelChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-select-item", "ix-dropdown-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-select-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SelectItem);
+            }
+            break;
+        case "ix-dropdown-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { SelectItem as S, defineCustomElement as d };
+//# sourceMappingURL=p-BhLbU_vK.js.map
+
+//# sourceMappingURL=p-BhLbU_vK.js.map

package/components/p-BhLbU_vK.js.map

@@ -0,0 +1 @@
+{"file":"p-BhLbU_vK.js","mappings":";;;AAAA;;;;;;;AAOG;AACG,MAAO,4BAA6B,SAAQ,WAGhD,CAAA;AACA,IAAA,WAAA,CAAY,MAA8C,EAAA;QACxD,KAAK,CAAC,4BAA4B,EAAE;AAClC,YAAA,OAAO,EAAE,IAAI;YACb,MAAM;AACP,SAAA,CAAC;;AAEL;AAEK,MAAO,4BAA6B,SAAQ,WAGhD,CAAA;AACA,IAAA,WAAA,CAAY,MAA8C,EAAA;QACxD,KAAK,CAAC,4BAA4B,EAAE;AAClC,YAAA,OAAO,EAAE,IAAI;YACb,MAAM;AACP,SAAA,CAAC;;AAEL;;AC9BD,MAAM,aAAa,GAAG,kUAAkU;;MC+B3U,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,GAAA;;;;;AAoBE;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAExB;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;AAOb,QAAA,IAAe,CAAA,eAAA,GAAG,KAAK;AAqEhC;;AAjEC,IAAA,MAAM,sBAAsB,GAAA;QAC1B,OAAO,IAAI,CAAC,YAAa;;AAG3B;;;AAGG;IAEH,MAAM,WAAW,CAAC,KAA8C,EAAA;AAC9D,QAAA,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,cAAc,EAAE;AACvB,QAAA,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,eAAe,EAAE;QAExB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;;AAGjC,IAAA,IAAI,YAAY,GAAA;QACd,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,kBAAkB,CAAC;;IAG3D,kBAAkB,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE;AACnD,YAAA,OAAO,CAAC,IAAI,CAAC,6CAA6C,CAAC;;AAE7D,QAAA,IAAI,CAAC,eAAe,GAAG,IAAI;;IAI7B,aAAa,CAAC,QAAgB,EAAE,QAAgB,EAAA;AAC9C,QAAA,IAAI,IAAI,CAAC,eAAe,EAAE;AACxB,YAAA,IAAI,CAAC,WAAW,CAAC,aAAa,CAC5B,IAAI,4BAA4B,CAAC;AAC/B,gBAAA,QAAQ,EAAE,QAAQ;AAClB,gBAAA,QAAQ,EAAE,QAAQ;AACnB,aAAA,CAAC,CACH;;;IAKL,WAAW,CAAC,QAAgB,EAAE,QAAgB,EAAA;AAC5C,QAAA,IAAI,IAAI,CAAC,eAAe,EAAE;AACxB,YAAA,IAAI,CAAC,WAAW,CAAC,aAAa,CAC5B,IAAI,4BAA4B,CAAC;AAC/B,gBAAA,QAAQ,EAAE,QAAQ;AAClB,gBAAA,QAAQ,EAAE,QAAQ;AACnB,aAAA,CAAC,CACH;;;IAIL,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;gBACL,qBAAqB,EAAE,IAAI,CAAC,QAAQ;AACrC,aAAA,EACD,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,EAC3C,WAAW,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EACrB,CAAA,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/select-item/events.ts","src/components/select-item/select-item.scss?tag=ix-select-item&encapsulation=shadow","src/components/select-item/select-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 */\nexport class IxSelectItemLabelChangeEvent extends CustomEvent<{\n  oldValue: string;\n  newValue: string;\n}> {\n  constructor(detail: { oldValue: string; newValue: string }) {\n    super('ix-select-item:labelChange', {\n      bubbles: true,\n      detail,\n    });\n  }\n}\n\nexport class IxSelectItemValueChangeEvent extends CustomEvent<{\n  oldValue: string;\n  newValue: string;\n}> {\n  constructor(detail: { oldValue: string; newValue: string }) {\n    super('ix-select-item:valueChange', {\n      bubbles: true,\n      detail,\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\n:host {\n  display: block;\n  position: relative;\n\n  > ix-dropdown-item {\n    width: 100%;\n  }\n\n  ix-dropdown-item {\n    color: var(--theme-color-std-text);\n  }\n\n  .select-item-checked {\n    background-color: var(--theme-select-list-item--background--selected);\n    --ix-dropdown-item-checked-color: var(--theme-color-std-text);\n  }\n}\n\n:host(.display-none) {\n  display: none;\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  Watch,\n} from '@stencil/core';\nimport {\n  IxSelectItemLabelChangeEvent,\n  IxSelectItemValueChangeEvent,\n} from './events';\nimport { DropdownItemWrapper } from '../dropdown/dropdown-controller';\n\n@Component({\n  tag: 'ix-select-item',\n  styleUrl: 'select-item.scss',\n  shadow: true,\n})\nexport class SelectItem implements DropdownItemWrapper {\n  @Element() hostElement!: HTMLIxSelectItemElement;\n\n  /**\n   * Displayed name of the item\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /**\n   * The value of the item.\n   * Important: The select component uses string values to handle selection and will call toString() on this value.\n   * Therefor a string should be passed to value to prevent unexpected behavior.\n   */\n  @Prop({ reflect: true }) value!: string;\n\n  /**\n   * Flag indicating whether the item is selected\n   */\n  @Prop() selected = false;\n\n  /**\n   * @internal\n   */\n  @Prop() hover = false;\n\n  /**\n   * Item clicked\n   */\n  @Event() itemClick!: EventEmitter<string>;\n\n  private componentLoaded = false;\n\n  /** @internal */\n  @Method()\n  async getDropdownItemElement(): Promise<HTMLIxDropdownItemElement> {\n    return this.dropdownItem!;\n  }\n\n  /**\n   * @internal\n   * @param event\n   */\n  @Method()\n  async onItemClick(event?: CustomEvent<HTMLIxDropdownItemElement>) {\n    event?.preventDefault();\n    event?.stopPropagation();\n\n    this.itemClick.emit(this.value);\n  }\n\n  get dropdownItem() {\n    return this.hostElement.querySelector('ix-dropdown-item');\n  }\n\n  componentDidRender() {\n    if (this.value === undefined || this.value === null) {\n      console.warn('ix-select-item must have a `value` property');\n    }\n    this.componentLoaded = true;\n  }\n\n  @Watch('value')\n  onValueChange(newValue: string, oldValue: string) {\n    if (this.componentLoaded) {\n      this.hostElement.dispatchEvent(\n        new IxSelectItemValueChangeEvent({\n          newValue: newValue,\n          oldValue: oldValue,\n        })\n      );\n    }\n  }\n\n  @Watch('label')\n  labelChange(newValue: string, oldValue: string) {\n    if (this.componentLoaded) {\n      this.hostElement.dispatchEvent(\n        new IxSelectItemLabelChangeEvent({\n          newValue: newValue,\n          oldValue: oldValue,\n        })\n      );\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-dropdown-item\n          class={{\n            'select-item-checked': this.selected,\n          }}\n          checked={this.selected}\n          label={this.label ? this.label : this.value}\n          onItemClick={(e) => this.onItemClick(e)}\n        ></ix-dropdown-item>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/p-Bi1VyG64.js

@@ -0,0 +1,46 @@
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+function closestElement(selector, el) {
+    if (!el) {
+        return null;
+    }
+    return (el.closest(selector) ||
+        closestElement(selector, el.getRootNode().host));
+}
+function getSlottedElements(slot) {
+    return slot.assignedElements({ flatten: true });
+}
+function hasSlottedElements(slot) {
+    if (!slot) {
+        return false;
+    }
+    return slot.assignedElements({ flatten: true }).length !== 0;
+}
+function closestPassShadow(node, selector) {
+    if (!node) {
+        return null;
+    }
+    if (node instanceof ShadowRoot) {
+        return closestPassShadow(node.host, selector);
+    }
+    if (node instanceof HTMLElement) {
+        if (node.matches(selector)) {
+            return node;
+        }
+        else {
+            return closestPassShadow(node.parentNode, selector);
+        }
+    }
+    return closestPassShadow(node.parentNode, selector);
+}
+
+export { closestElement as a, closestPassShadow as c, getSlottedElements as g, hasSlottedElements as h };
+//# sourceMappingURL=p-Bi1VyG64.js.map
+
+//# sourceMappingURL=p-Bi1VyG64.js.map

package/components/p-Bi1VyG64.js.map

@@ -0,0 +1 @@
+{"file":"p-Bi1VyG64.js","mappings":"AAAA;;;;;;;AAOG;AACa,SAAA,cAAc,CAAC,QAAgB,EAAE,EAAO,EAAA;IACtD,IAAI,CAAC,EAAE,EAAE;AACP,QAAA,OAAO,IAAI;;AAEb,IAAA,QACE,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC;QACpB,cAAc,CAAC,QAAQ,EAAG,EAAE,CAAC,WAAW,EAAU,CAAC,IAAI,CAAC;AAE5D;AAEM,SAAU,kBAAkB,CAAU,IAAS,EAAA;IACnD,OAAO,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACjD;AAEM,SAAU,kBAAkB,CAAC,IAAS,EAAA;IAC1C,IAAI,CAAC,IAAI,EAAE;AACT,QAAA,OAAO,KAAK;;AAEd,IAAA,OAAO,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,KAAK,CAAC;AAC9D;AAYgB,SAAA,iBAAiB,CAAC,IAAU,EAAE,QAAgB,EAAA;IAC5D,IAAI,CAAC,IAAI,EAAE;AACT,QAAA,OAAO,IAAI;;AAGb,IAAA,IAAI,IAAI,YAAY,UAAU,EAAE;QAC9B,OAAO,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC;;AAG/C,IAAA,IAAI,IAAI,YAAY,WAAW,EAAE;AAC/B,QAAA,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;AAC1B,YAAA,OAAO,IAAI;;aACN;YACL,OAAO,iBAAiB,CAAC,IAAI,CAAC,UAAW,EAAE,QAAQ,CAAC;;;IAIxD,OAAO,iBAAiB,CAAC,IAAI,CAAC,UAAW,EAAE,QAAQ,CAAC;AACtD;;;;","names":[],"sources":["src/components/utils/shadow-dom.ts"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nexport function closestElement(selector: string, el: any): null | Element {\n  if (!el) {\n    return null;\n  }\n  return (\n    el.closest(selector) ||\n    closestElement(selector, (el.getRootNode() as any).host)\n  );\n}\n\nexport function getSlottedElements<R = any>(slot: any): R[] {\n  return slot.assignedElements({ flatten: true });\n}\n\nexport function hasSlottedElements(slot: any) {\n  if (!slot) {\n    return false;\n  }\n  return slot.assignedElements({ flatten: true }).length !== 0;\n}\n\nexport function containsElement(target: Element, element: Element) {\n  const hasShadowDom = target.shadowRoot;\n\n  if (hasShadowDom) {\n    target.contains(element) || target.shadowRoot.contains(element);\n  }\n\n  return target.contains(element);\n}\n\nexport function closestPassShadow(node: Node, selector: string) {\n  if (!node) {\n    return null;\n  }\n\n  if (node instanceof ShadowRoot) {\n    return closestPassShadow(node.host, selector);\n  }\n\n  if (node instanceof HTMLElement) {\n    if (node.matches(selector)) {\n      return node;\n    } else {\n      return closestPassShadow(node.parentNode!, selector);\n    }\n  }\n\n  return closestPassShadow(node.parentNode!, selector);\n}\n"],"version":3}

package/components/p-BkWbk29R.js

@@ -0,0 +1,75 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-BuJ6BWIi.js';
+import { g as getSlottedElements } from './p-Bi1VyG64.js';
+import { y as iconContextMenu } from './p-CGwHQeMX.js';
+import { d as defineCustomElement$2 } from './p-BXjBChze.js';
+import { d as defineCustomElement$1 } from './p-BygLxZIM.js';
+
+const groupContextMenuCss = ":host{display:block;position:relative;height:2rem;width:2rem;margin-block-start:0.3125rem;margin-inline-end:0.3125rem;margin-inline-start:auto}:host .hide{visibility:collapse}:host ::slotted(ix-dropdown){cursor:default}";
+
+const GroupContextMenu = /*@__PURE__*/ proxyCustomElement(class GroupContextMenu extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.showContextMenu = false;
+    }
+    getTrigger() {
+        return this.hostElement;
+    }
+    configureDropdown(dropdownElement, triggerElement) {
+        dropdownElement.positioningStrategy = 'fixed';
+        dropdownElement.trigger = triggerElement;
+    }
+    onSlotChange() {
+        const slot = this.hostElement.shadowRoot.querySelector('slot');
+        if (!slot) {
+            return;
+        }
+        const elements = getSlottedElements(slot);
+        this.showContextMenu = elements.length !== 0;
+        const dropdownElement = elements.find((elm) => elm.tagName === 'IX-DROPDOWN');
+        const triggerElement = this.getTrigger();
+        if (!triggerElement) {
+            return;
+        }
+        if (!dropdownElement) {
+            return;
+        }
+        this.configureDropdown(dropdownElement, triggerElement);
+    }
+    render() {
+        return (h(Host, { key: '78dbddb5af2b2de9f2fe91e7aa1d69b1993ad29b' }, h("ix-icon-button", { key: 'c5b68ac445c5390ff0d42cce43ee6b96b875930b', class: { hide: !this.showContextMenu }, size: "24", ghost: true, icon: iconContextMenu }), h("slot", { key: 'fadd0b375491eea9ebc4f1008901d05c16c90e07', onSlotchange: () => this.onSlotChange() })));
+    }
+    get hostElement() { return this; }
+    static get style() { return groupContextMenuCss; }
+}, [1, "ix-group-context-menu", {
+        "showContextMenu": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-group-context-menu", "ix-icon-button", "ix-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-group-context-menu":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, GroupContextMenu);
+            }
+            break;
+        case "ix-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ix-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { GroupContextMenu as G, defineCustomElement as d };
+//# sourceMappingURL=p-BkWbk29R.js.map
+
+//# sourceMappingURL=p-BkWbk29R.js.map

package/components/p-BkWbk29R.js.map

@@ -0,0 +1 @@
+{"file":"p-BkWbk29R.js","mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,6NAA6N;;MCkB5O,gBAAgB,iBAAAA,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;AAL7B,IAAA,WAAA,GAAA;;;;AAQW,QAAA,IAAe,CAAA,eAAA,GAAG,KAAK;AAoDjC;IAlDS,UAAU,GAAA;QAChB,OAAO,IAAI,CAAC,WAAW;;IAGjB,iBAAiB,CACvB,eAAsC,EACtC,cAA2B,EAAA;AAE3B,QAAA,eAAe,CAAC,mBAAmB,GAAG,OAAO;AAC7C,QAAA,eAAe,CAAC,OAAO,GAAG,cAAc;;IAGlC,YAAY,GAAA;AAClB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,MAAM,CAAC;QAC/D,IAAI,CAAC,IAAI,EAAE;YACT;;AAEF,QAAA,MAAM,QAAQ,GAAG,kBAAkB,CAAC,IAAI,CAAC;QACzC,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC;AAE5C,QAAA,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CACnC,CAAC,GAAY,KAAK,GAAG,CAAC,OAAO,KAAK,aAAa,CAChD;AAED,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE;QAExC,IAAI,CAAC,cAAc,EAAE;YACnB;;QAGF,IAAI,CAAC,eAAe,EAAE;YACpB;;AAGF,QAAA,IAAI,CAAC,iBAAiB,CAAC,eAAe,EAAE,cAAc,CAAC;;IAGzD,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CACE,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,EACtC,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,EACX,IAAI,EAAE,eAAe,EACL,CAAA,EAClB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EAAA,CAAS,CACjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/group/group-context-menu.scss?tag=ix-group-context-menu&encapsulation=shadow","src/components/group/group-context-menu.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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:host {\n  display: block;\n  position: relative;\n\n  height: 2rem;\n  width: 2rem;\n\n  margin-block-start: 0.3125rem;\n  margin-inline-end: 0.3125rem;\n  margin-inline-start: auto;\n\n  .hide {\n    visibility: collapse;\n  }\n\n  ::slotted(ix-dropdown) {\n    cursor: default;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 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, Element, h, Host, State } from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\nimport { iconContextMenu } from '@siemens/ix-icons/icons';\n\n@Component({\n  tag: 'ix-group-context-menu',\n  styleUrl: './group-context-menu.scss',\n  shadow: true,\n})\nexport class GroupContextMenu {\n  @Element() hostElement!: HTMLIxGroupContextMenuElement;\n\n  @State() showContextMenu = false;\n\n  private getTrigger() {\n    return this.hostElement;\n  }\n\n  private configureDropdown(\n    dropdownElement: HTMLIxDropdownElement,\n    triggerElement: HTMLElement\n  ) {\n    dropdownElement.positioningStrategy = 'fixed';\n    dropdownElement.trigger = triggerElement;\n  }\n\n  private onSlotChange() {\n    const slot = this.hostElement.shadowRoot!.querySelector('slot');\n    if (!slot) {\n      return;\n    }\n    const elements = getSlottedElements(slot);\n    this.showContextMenu = elements.length !== 0;\n\n    const dropdownElement = elements.find(\n      (elm: Element) => elm.tagName === 'IX-DROPDOWN'\n    );\n\n    const triggerElement = this.getTrigger();\n\n    if (!triggerElement) {\n      return;\n    }\n\n    if (!dropdownElement) {\n      return;\n    }\n\n    this.configureDropdown(dropdownElement, triggerElement);\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-icon-button\n          class={{ hide: !this.showContextMenu }}\n          size=\"24\"\n          ghost={true}\n          icon={iconContextMenu}\n        ></ix-icon-button>\n        <slot onSlotchange={() => this.onSlotChange()}></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/p-BmmgJGNd.js

@@ -0,0 +1,64 @@
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-BuJ6BWIi.js';
+import { g as iconCloseSmall } from './p-CGwHQeMX.js';
+import { d as defineCustomElement$2 } from './p-BXjBChze.js';
+import { d as defineCustomElement$1 } from './p-BygLxZIM.js';
+
+const filterChipCss = ":host{display:inline-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)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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 .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .slot-container :host-context(.disabled){background-color:var(--theme-color-ghost);border-color:var(--theme-color-component-4);color:var(--theme-color-weak-text)}:host ix-icon-button{height:1.5rem;margin-left:0.25rem}:host ix-icon-button:not(.disabled):not(:disabled):focus-visible{outline:none}:host(.disabled){border:var(--theme-focus--border-thickness) solid var(--theme-color-component-4);color:var(--theme-color-weak-text);padding-right:0.5rem;cursor:default}:host(.readonly){padding-right:0.5rem}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:hover:not(.disabled):not(:disabled)){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)}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:active:not(.disabled):not(:disabled)){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)}:host(:focus-visible:not(.disabled):not(:disabled)){outline:var(--theme-color-focus-bdr) solid var(--theme-focus--border-thickness);outline-offset:-0.125rem}";
+
+const FilterChip = /*@__PURE__*/ proxyCustomElement(class FilterChip extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.closeClick = createEvent(this, "closeClick", 7);
+        /**
+         * If true the filter chip will be in disabled state
+         */
+        this.disabled = false;
+        /**
+         * If true the filter chip will be in readonly mode
+         */
+        this.readonly = false;
+    }
+    onCloseClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.closeClick.emit();
+    }
+    render() {
+        return (h(Host, { key: 'e97d49f5fdd629ffa9484a8f0240fdc4de1fe9b5', class: { disabled: this.disabled, readonly: this.readonly }, title: this.hostElement.textContent }, h("div", { key: '2f80fc12601503db8a150f6d8598cca1008cd504', class: "slot-container" }, h("slot", { key: 'd56ad722b92e31bf8bd99371b9461ca4d2149cbd' })), !this.disabled && !this.readonly ? (h("ix-icon-button", { ghost: true, oval: true, icon: iconCloseSmall, size: "16", tabindex: this.disabled ? -1 : 0, variant: "primary", disabled: this.disabled, onClick: (e) => this.onCloseClick(e) })) : null));
+    }
+    get hostElement() { return this; }
+    static get style() { return filterChipCss; }
+}, [1, "ix-filter-chip", {
+        "disabled": [4],
+        "readonly": [4]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-filter-chip", "ix-icon-button", "ix-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-filter-chip":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, FilterChip);
+            }
+            break;
+        case "ix-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ix-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { FilterChip as F, defineCustomElement as d };
+//# sourceMappingURL=p-BmmgJGNd.js.map
+
+//# sourceMappingURL=p-BmmgJGNd.js.map

package/components/p-BmmgJGNd.js.map

@@ -0,0 +1 @@
+{"file":"p-BmmgJGNd.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,00EAA00E;;MCyBn1E,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,GAAA;;;;;AAQE;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAExB;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAqCzB;AA9BS,IAAA,YAAY,CAAC,KAAY,EAAA;QAC/B,KAAK,CAAC,cAAc,EAAE;QACtB,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;;IAGxB,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EACH,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAC3D,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,WAAW,EAAA,EAEnC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACL,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAC/B,CAAA,CAAA,gBAAA,EAAA,EACE,KAAK,EACL,IAAA,EAAA,IAAI,EACJ,IAAA,EAAA,IAAI,EAAE,cAAc,EACpB,IAAI,EAAC,IAAI,EACT,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAChC,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EACpB,CAAA,IAChB,IAAI,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/filter-chip/filter-chip.scss?tag=ix-filter-chip&encapsulation=shadow","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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: inline-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\n    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  .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  ix-icon-button {\n    height: $large-space;\n    margin-left: 0.25rem;\n\n    @include focus-visible {\n      outline: none;\n    }\n  }\n}\n\n:host(.disabled) {\n  border: var(--theme-focus--border-thickness) solid\n    var(--theme-color-component-4);\n  color: var(--theme-color-weak-text);\n  padding-right: $small-space;\n\n  cursor: default;\n}\n\n:host(.readonly) {\n  padding-right: $small-space;\n}\n\n@include host-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 host-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 host-focus-visible {\n  outline: var(--theme-color-focus-bdr) solid\n    var(--theme-focus--border-thickness);\n  outline-offset: -0.125rem;\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 { iconCloseSmall } from '@siemens/ix-icons/icons';\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  shadow: true,\n})\nexport class FilterChip {\n  @Element() hostElement!: HTMLIxFilterChipElement;\n\n  /**\n   * If true the filter chip will be in disabled state\n   */\n  @Prop() disabled = false;\n\n  /**\n   * If true the filter chip will be in readonly mode\n   */\n  @Prop() readonly = 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\n        class={{ disabled: this.disabled, readonly: this.readonly }}\n        title={this.hostElement.textContent}\n      >\n        <div class=\"slot-container\">\n          <slot></slot>\n        </div>\n        {!this.disabled && !this.readonly ? (\n          <ix-icon-button\n            ghost\n            oval\n            icon={iconCloseSmall}\n            size=\"16\"\n            tabindex={this.disabled ? -1 : 0}\n            variant=\"primary\"\n            disabled={this.disabled}\n            onClick={(e) => this.onCloseClick(e)}\n          ></ix-icon-button>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/p-Bu-j8wxy.js

@@ -0,0 +1,162 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-BuJ6BWIi.js';
+import { b as a11yHostAttributes } from './p-Bb7pDeaQ.js';
+import { m as makeRef } from './p-bcj7UEIC.js';
+import { d as defineCustomElement$1 } from './p-DyMgW0fR.js';
+import { c as createClassMutationObserver } from './p-D9LaIICQ.js';
+
+function isIxInputFieldComponent(obj) {
+    return (obj &&
+        'getAssociatedFormElement' in obj &&
+        typeof obj.getAssociatedFormElement === 'function' &&
+        'getNativeInputElement' in obj &&
+        typeof obj.getNativeInputElement === 'function');
+}
+
+const fieldLabelCss = ":host{display:inline-block;position:relative;margin-top:0.5rem;margin-bottom:0.25rem}";
+
+const FormFieldLabel = /*@__PURE__*/ proxyCustomElement(class FormFieldLabel extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /** @internal */
+        this.isInvalid = false;
+        this.htmlForObserver = new MutationObserver(() => this.checkForInternalState());
+        this.a11yAttributes = {};
+        this.labelRef = makeRef();
+    }
+    connectedCallback() {
+        this.registerHtmlForObserver();
+        this.registerControlRefObserver();
+    }
+    disconnectedCallback() {
+        if (this.htmlForObserver) {
+            this.htmlForObserver.disconnect();
+        }
+        if (this.htmlForClassObserver) {
+            this.htmlForClassObserver.destroy();
+        }
+        if (this.controlRefClassObserver) {
+            this.controlRefClassObserver.destroy();
+        }
+    }
+    componentWillRender() {
+        this.checkForInternalState();
+    }
+    componentWillLoad() {
+        this.a11yAttributes = a11yHostAttributes(this.hostElement);
+    }
+    registerHtmlForObserver() {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        if (this.htmlForObserver) {
+            this.htmlForObserver.disconnect();
+        }
+        if (this.htmlFor) {
+            this.htmlForObserver.observe(window.document, {
+                childList: true,
+                subtree: true,
+            });
+        }
+    }
+    async registerControlRefObserver() {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        if (this.controlRefClassObserver) {
+            this.controlRefClassObserver.destroy();
+        }
+        if (this.controlRef) {
+            const input = await this.controlRef.waitForCurrent();
+            this.controlRefClassObserver = createClassMutationObserver(input, () => this.checkForInvalidState(input));
+        }
+    }
+    registerHtmlForClassObserver(forElement) {
+        if (this.htmlForClassObserver) {
+            this.htmlForClassObserver.destroy();
+        }
+        this.htmlForClassObserver = createClassMutationObserver(forElement, () => this.checkForInvalidState(forElement));
+    }
+    checkForInvalidState(elementToCheck) {
+        this.isInvalid =
+            elementToCheck.classList.contains('is-invalid') ||
+                elementToCheck.classList.contains('ix-invalid');
+    }
+    async checkForInternalState() {
+        if (this.htmlFor) {
+            const forElement = document.getElementById(this.htmlFor);
+            if (forElement) {
+                if (typeof forElement.required === 'boolean') {
+                    this.required = forElement.required;
+                }
+                this.registerHtmlForClassObserver(forElement);
+                this.checkForInvalidState(forElement);
+            }
+        }
+        if (this.controlRef) {
+            const input = await this.controlRef.waitForCurrent();
+            this.required = input.required;
+        }
+    }
+    async focusOnClick() {
+        if (this.htmlFor) {
+            const target = document.getElementById(this.htmlFor);
+            if (target) {
+                let input = null;
+                if (isIxInputFieldComponent(target)) {
+                    input = await target.getNativeInputElement();
+                }
+                else {
+                    input = target;
+                }
+                if (typeof input.focus === 'function') {
+                    input.focus();
+                }
+            }
+        }
+        if (this.controlRef) {
+            (await this.controlRef.waitForCurrent()).focus();
+        }
+    }
+    render() {
+        return (h(Host, { key: '1523186f6399825257dbffcd1aed2522997044bc', onClick: () => this.focusOnClick() }, h("label", Object.assign({ key: '1e956399435c73d1a8d15129e86fed12b38b36b0', htmlFor: this.htmlFor }, this.a11yAttributes, { ref: this.labelRef }), h("ix-typography", { key: 'a690608275495d048a0503b68d07a8d8e2b75a3c', textColor: this.isInvalid ? 'alarm' : 'soft', format: "label" }, h("slot", { key: 'a54690a36d07d2bb28ed787cb557aa0fa51292b8' }), this.required && h("span", { key: '1f09d454bb53346f909e90eb2d6170340bd7e598' }, "*")))));
+    }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "htmlFor": ["registerHtmlForObserver"],
+        "controlRef": ["registerControlRefObserver"]
+    }; }
+    static get style() { return fieldLabelCss; }
+}, [1, "ix-field-label", {
+        "required": [1540],
+        "htmlFor": [513, "html-for"],
+        "controlRef": [16, "control-ref"],
+        "isInvalid": [1028, "is-invalid"]
+    }, undefined, {
+        "htmlFor": ["registerHtmlForObserver"],
+        "controlRef": ["registerControlRefObserver"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-field-label", "ix-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-field-label":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, FormFieldLabel);
+            }
+            break;
+        case "ix-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { FormFieldLabel as F, defineCustomElement as d };
+//# sourceMappingURL=p-Bu-j8wxy.js.map
+
+//# sourceMappingURL=p-Bu-j8wxy.js.map