@siemens/ix 4.4.0 → 5.1.0

package/dist/esm/ix-empty-state.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-BEPo7U1W.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-EBgS4zhE.js';
 
 const emptyStateCss = () => `: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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .label__subHeader{color:var(--theme-color-soft-text)}:host(.emptyState.emptyState--large){display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem}:host(.emptyState.emptyState--large) .emptyState__icon{width:3.5rem;height:3.5rem;display:flex;justify-content:center;align-items:center}:host(.emptyState.emptyState--large) .emptyState__icon ix-icon{transform:scale(1.75)}:host(.emptyState.emptyState--large) .emptyState__content{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem}:host(.emptyState.emptyState--large) .emptyState__content .content__label{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0.5rem}:host(.emptyState.emptyState--large) .label__subHeader,:host(.emptyState.emptyState--large) ix-typography{text-align:center}:host(.emptyState.emptyState--compact){display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem}:host(.emptyState.emptyState--compact) .emptyState__icon{display:flex;flex-direction:row;align-items:center;height:2.5rem}:host(.emptyState.emptyState--compact) .emptyState__content{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem}:host(.emptyState.emptyState--compactBreak){display:flex;flex-direction:row;align-items:flex-start;gap:1rem}:host(.emptyState.emptyState--compactBreak) .emptyState__icon{display:flex;flex-direction:row;align-items:center;height:2.5rem}:host(.emptyState.emptyState--compactBreak) .emptyState__content{display:flex;flex-direction:column;align-items:flex-start;gap:0.5rem}`;
 
@@ -6,13 +6,39 @@ const EmptyState = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.actionClick = createEvent(this, "actionClick", 7);
-        /**
-         * Optional empty state layout - one of 'large', 'compact' or 'compactBreak'
-         */
-        this.layout = 'large';
     }
+    /**
+     * Optional empty state layout - one of 'large', 'compact' or 'compactBreak'
+     */
+    layout = 'large';
+    /**
+     * Optional empty state icon
+     */
+    icon;
+    /**
+     * Empty state header
+     */
+    header;
+    /**
+     * Optional empty state sub header
+     */
+    subHeader;
+    /**
+     * Optional empty state action
+     */
+    action;
+    /**
+     * ARIA label for the empty state icon
+     *
+     * @since 3.2.0
+     */
+    ariaLabelEmptyStateIcon;
+    /**
+     * Empty state action click event
+     */
+    actionClick;
     render() {
-        return (h(Host, { key: 'f87d35f9c8ae39f3ed46f8ebf0fe1b0487d91108', class: `emptyState emptyState--${this.layout}` }, this.icon && (h("div", { key: '41eb63bad03958baeb5f683895ea196f883b5312', class: "emptyState__icon" }, h("ix-icon", { key: '3bd1032f996cdf7c046f767ac9fec79756a7b8e5', name: this.icon, size: this.layout === 'large' ? '32' : '32', color: "color-soft-text", "aria-label": this.ariaLabelEmptyStateIcon }))), h("div", { key: '1a287d69a879f7dd52e9801e9fd0a973849fc244', class: "emptyState__content" }, h("div", { key: '8e2ff9b6f189e732dd16bf943922b09f32b9adfc', class: "content__label" }, h("ix-typography", { key: '74bc4394d9b94c2d3161091b71fbeb8ca091d6d8', format: this.layout === 'large' ? 'h3' : 'body' }, this.header), this.subHeader && (h("div", { key: '43e21aec14323f18a4df1116c7841702a945bcfe', class: "label__subHeader" }, this.subHeader))), this.action && (h("div", { key: 'd80c01f388e99df9affc47086ac2f67ef89ca8ca', class: "content__action" }, h("ix-button", { key: '0ba60803afb761fbae046546ed06f6ab07bc728c', onClick: () => this.actionClick.emit() }, this.action))))));
+        return (h(Host, { key: '788853c0170edd6124ee95f6f37023c3de53f7b4', class: `emptyState emptyState--${this.layout}` }, this.icon && (h("div", { key: 'fa915d69e9ff30ad13f5edbb70136d16ea0766f4', class: "emptyState__icon" }, h("ix-icon", { key: 'f9b951b527e138dc58c4bf1b2abd46e3ebf570fa', name: this.icon, size: this.layout === 'large' ? '32' : '32', color: "color-soft-text", "aria-label": this.ariaLabelEmptyStateIcon }))), h("div", { key: '4d531a294a9bcd8281c37ac497a576ab86e6192c', class: "emptyState__content" }, h("div", { key: '1cc40c9096599b31580cea0edf449a146c8ff768', class: "content__label" }, h("ix-typography", { key: 'd708fc4fb0306b5ec54efb44f003c4792e4eb75f', format: this.layout === 'large' ? 'h3' : 'body' }, this.header), this.subHeader && (h("div", { key: 'a08cf6802626709bba74186fd0e5f0056da20981', class: "label__subHeader" }, this.subHeader))), this.action && (h("div", { key: 'ff17b01d8fffe6ba98d5a5a0a91985972b8368e8', class: "content__action" }, h("ix-button", { key: 'c78f1ddb54915618c6e2783e025dd608e6c2152a', onClick: () => this.actionClick.emit() }, this.action))))));
     }
 };
 EmptyState.style = emptyStateCss();

package/dist/esm/ix-event-list-item.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-BEPo7U1W.js';
-import { r as iconChevronRight } from './index-BBzEV-f4.js';
-import { a as a11yBoolean } from './a11y-DAzBNVe7.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-EBgS4zhE.js';
+import { r as iconChevronRight } from './index-DgUGsIlh.js';
+import { a as a11yBoolean } from './a11y-C21npbUc.js';
 
 const eventListItemCss = () => `:host(.event-list-item-outline) .event-list-item{--ix-event-list-item--color-border:var(     --theme-event-item-outline--border   );--ix-event-list-item--background:var(     --theme-event-item-outline--background   );--ix-event-list-item--background--hover:var(     --theme-event-item-outline--background--hover   );--ix-event-list-item--background--active:var(     --theme-event-item-outline--background--active   );--ix-event-list-item--background--selected:var(     --theme-event-item-outline--background--selected   );--ix-event-list-item--border--hover:var(     --theme-event-item-outline--border--hover   );--ix-event-list-item--border--active:var(     --theme-event-item-outline--border--active   );--ix-event-list-item--border--selected:var(     --theme-event-item-outline--border--selected   );--ix-event-list-item--border--disabled:var(     --theme-event-item-outline--border--disabled   )}:host(.event-list-item-filled) .event-list-item{--ix-event-list-item--color-border:var(     --theme-event-item-filled--border   );--ix-event-list-item--background:var(     --theme-event-item-filled--background   );--ix-event-list-item--background--hover:var(     --theme-event-item-filled--background--hover   );--ix-event-list-item--background--active:var(     --theme-event-item-filled--background--active   );--ix-event-list-item--background--selected:var(     --theme-event-item-filled--background--selected   );--ix-event-list-item--border--hover:var(     --theme-event-item-filled--border--hover   );--ix-event-list-item--border--active:var(     --theme-event-item-filled--border--active   );--ix-event-list-item--border--selected:var(     --theme-event-item-filled--border--selected   );--ix-event-list-item--border--disabled:var(     --theme-event-item-filled--border--disabled   )}: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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .event-list-item{display:flex;align-items:center;position:relative;height:var(--event-list-item-height, 2.5rem);max-height:var(--event-list-item-height, 2.5rem);border-radius:var(--event-list-item-border-radius, 0.25rem);background-color:var(--ix-event-list-item--background);overflow:hidden;transition:var(--theme-default-time);cursor:pointer;margin-bottom:var(--event-list-item-margin-bottom, 0.5rem)}:host .event-list-item .indicator{height:100%;width:0.5rem;max-width:0.5rem;min-width:0.5rem;border-top-left-radius:var(--event-list-item-border-radius, 0.25rem);border-bottom-left-radius:var(--event-list-item-border-radius, 0.25rem)}:host .event-list-item .indicator-empty{border:var(--theme-weak-bdr-1);border-right:none}:host .event-list-item .event-list-item-container{display:flex;flex-grow:1;width:calc(100% - (1rem + 0.5rem));height:100%;border:0.062rem solid;border-color:var(--ix-event-list-item--color-border);border-top-left-radius:0;border-top-right-radius:var(--event-list-item-border-radius, 0.25rem);border-bottom-left-radius:0;border-bottom-right-radius:var(--event-list-item-border-radius, 0.25rem);border-left:none;padding-left:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .event-list-item .event-content{display:flex;align-items:center;width:100%;height:var(--event-list-item-height, 100%);max-height:var(--event-list-item-height, 100%);white-space:var(--event-list-item-content-white-space, inherit);overflow:hidden;padding-inline-end:0.5rem}:host .event-list-item .chevron-icon{margin-left:auto;margin-right:0.5rem;opacity:0.6;align-self:center}:host .event-list-item:not(.selected):not(.disabled):not(:disabled){cursor:pointer}:host .event-list-item:not(.selected):not(.disabled):not(:disabled):hover,:host .event-list-item:not(.selected):not(.disabled):not(:disabled).hover{background-color:var(--ix-event-list-item--background--hover)}:host .event-list-item:not(.selected):not(.disabled):not(:disabled){cursor:pointer}:host .event-list-item:not(.selected):not(.disabled):not(:disabled):active,:host .event-list-item:not(.selected):not(.disabled):not(:disabled).active{background-color:var(--ix-event-list-item--background--active)}:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled){cursor:pointer}:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled):hover,:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled).hover{border-color:var(--ix-event-list-item--border--hover)}:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled){cursor:pointer}:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled):active,:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled).active{border-color:var(--ix-event-list-item--border--active)}:host .event-list-item.selected .event-list-item-container{background-color:var(--ix-event-list-item--background--selected);border-color:var(--ix-event-list-item--border--selected)}:host .event-list-item[disabled],:host .event-list-item.disabled{pointer-events:none}:host .event-list-item[disabled] .event-list-item-container,:host .event-list-item.disabled .event-list-item-container{background-color:var(--ix-event-list-item--background--disabled);border-color:var(--ix-event-list-item--border--disabled)}:host(.disabled){pointer-events:none}`;
 
@@ -8,44 +8,55 @@ const EventListItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.itemClick = createEvent(this, "itemClick", 7);
-        /**
-         * Variant of the event list item
-         *
-         * @since 4.0.0
-         */
-        this.variant = 'outline';
-        /**
-         * Show event list item as selected
-         */
-        this.selected = false;
-        /**
-         * Disable event list item
-         */
-        this.disabled = false;
-        /**
-         * Show chevron on right side of the event list item
-         */
-        this.chevron = false;
     }
+    /**
+     * Variant of the event list item
+     *
+     * @since 4.0.0
+     */
+    variant = 'outline';
+    /**
+     * Color of the status indicator.
+     * You can find a list of all available colors in our documentation.
+     * Example values are `--theme-color-alarm` or `color-alarm`
+     *
+     * {@link https://ix.siemens.io/docs/styles/colors}
+     */
+    itemColor;
+    /**
+     * Show event list item as selected
+     */
+    selected = false;
+    /**
+     * Disable event list item
+     */
+    disabled = false;
+    /**
+     * Show chevron on right side of the event list item
+     */
+    chevron = false;
+    /**
+     * Event list item click
+     */
+    itemClick;
     handleItemClick() {
         this.itemClick.emit();
     }
     render() {
-        var _a;
-        let color = ((_a = this.itemColor) === null || _a === void 0 ? void 0 : _a.startsWith('--theme'))
+        let color = this.itemColor?.startsWith('--theme')
             ? `var(${this.itemColor})`
             : `var(--theme-${this.itemColor})`;
-        return (h(Host, { key: '3fa7304c0d114cd65b572e6d7e1a7362d3f63950', class: {
+        return (h(Host, { key: '62246c6ecf60106320d54a3cc214b359cd654dc3', class: {
                 disabled: this.disabled,
                 [`event-list-item-${this.variant}`]: true,
-            } }, h("div", { key: '9dc5734ea43068e74efc45d89a6fda3bad040cd1', role: "listitem", "aria-disabled": a11yBoolean(this.disabled), class: {
+            } }, h("div", { key: '7c0055e2e67b53d02d5b9cc5b6e769aea1913841', role: "listitem", "aria-disabled": a11yBoolean(this.disabled), class: {
                 'event-list-item': true,
                 selected: this.selected,
                 disabled: this.disabled,
-            } }, h("div", { key: '5fc29826643c430d3f0c82826142b461395d5075', class: `indicator ${!this.itemColor ? 'indicator-empty' : ''}`, style: {
+            } }, h("div", { key: 'b05eb8e2f3b0009c8d3d58a3c27bc0f5b447ef26', class: `indicator ${!this.itemColor ? 'indicator-empty' : ''}`, style: {
                 'background-color': this.itemColor ? color : 'inherit',
                 opacity: `${this.disabled ? 0.4 : 1}`,
-            } }), h("div", { key: 'c53b6ea99b0744dc6a0d57024853d0627a3963e2', class: "event-list-item-container" }, h("div", { key: '22a50db11d9997caa9df67fea550e1f58224344c', class: "event-content" }, h("slot", { key: '6361d1b0c326919f46ed7eb1b6bcb4b17421258e' })), this.chevron && (h("ix-icon", { key: 'edd5d1e1ef0fa1c85b319f9bdccdf1e2cbe8183a', name: iconChevronRight, size: "16", class: "chevron-icon", "aria-hidden": "true" }))))));
+            } }), h("div", { key: 'e64d403714e4627338cc68eda2adacedc8960c2b', class: "event-list-item-container" }, h("div", { key: 'fca0440ca4783be7c45ac7b9f52574241e7eca49', class: "event-content" }, h("slot", { key: '1bcdd9678b8e47904f06474a8b507c3eb24c98c8' })), this.chevron && (h("ix-icon", { key: '8e71379a54c18b1e491e899da196387a5ab2a208', name: iconChevronRight, size: "16", class: "chevron-icon", "aria-hidden": "true" }))))));
     }
 };
 EventListItem.style = eventListItemCss();

package/dist/esm/ix-event-list.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-BEPo7U1W.js';
+import { r as registerInstance, g as getElement, h, H as Host } from './index-EBgS4zhE.js';
 import { c as createMutationObserver } from './mutation-observer-CX81WQtk.js';
-import { c as convertToRemString } from './rwd.util-pXYAoEyc.js';
+import { a as convertToRemString } from './rwd.util-JJddxCCh.js';
 import { a as animate } from './anime.esm-DhE1t8Qh.js';
 
 const eventListCss = () => `:host{display:block;position:relative}: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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host(.item-size-l){--event-list-item-height:6.5rem;--event-list-item-content-white-space:normal}:host(.compact){--event-list-item-border-radius:0;--event-list-item-margin-bottom:0}`;
@@ -8,27 +8,30 @@ const eventListCss = () => `:host{display:block;position:relative}:host *,:host
 const EventList = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.mutationObserver = createMutationObserver(this.onMutation.bind(this));
-        /**
-         * Determines the height of list items.
-         * This can either be one of two predefined sizes ('S' or 'L') or an absolute pixel value.
-         * In case a number is supplied it will get converted to rem internally.
-         * Defaults to 'S'.
-         */
-        this.itemHeight = 'S';
-        /**
-         * Make event-list items more compact
-         */
-        this.compact = false;
-        /**
-         * Animate state change transitions. Defaults to 'false'.
-         */
-        this.animated = false;
-        /**
-         * Display a chevron icon in list items. Defaults to 'false'
-         */
-        this.chevron = false;
     }
+    mutationObserver = createMutationObserver(this.onMutation.bind(this));
+    static fadeOutDuration = 50;
+    static fadeInDuration = 150;
+    get hostElement() { return getElement(this); }
+    /**
+     * Determines the height of list items.
+     * This can either be one of two predefined sizes ('S' or 'L') or an absolute pixel value.
+     * In case a number is supplied it will get converted to rem internally.
+     * Defaults to 'S'.
+     */
+    itemHeight = 'S';
+    /**
+     * Make event-list items more compact
+     */
+    compact = false;
+    /**
+     * Animate state change transitions. Defaults to 'false'.
+     */
+    animated = false;
+    /**
+     * Display a chevron icon in list items. Defaults to 'false'
+     */
+    chevron = false;
     watchChevron(chevron) {
         this.handleChevron(chevron);
     }
@@ -124,21 +127,18 @@ const EventList = class {
         });
     }
     render() {
-        return (h(Host, { key: 'a21a4d23666ba43d7d10bd569c7a9feb01423b1f', class: {
+        return (h(Host, { key: 'a8161bcd519a0ea5d700db37a1d265d9bf742080', class: {
                 'item-size-s': this.itemHeight === 'S',
                 'item-size-l': this.itemHeight === 'L',
                 compact: this.compact,
-            } }, h("div", { key: 'cbb5ffb72ce1a393c99df6624ffc3e36a3d6a4b5', role: "list" }, h("slot", { key: '50ca67f2071b058ee4e43bfcad1bf23d5fc623d3' }))));
+            } }, h("div", { key: '121bef25c280fea75efaf170b49c0752f00b9123', role: "list" }, h("slot", { key: 'bfb322b874b47d0beb33813d0b352d08b59e9437' }))));
     }
-    get hostElement() { return getElement(this); }
     static get watchers() { return {
         "chevron": [{
                 "watchChevron": 0
             }]
     }; }
 };
-EventList.fadeOutDuration = 50;
-EventList.fadeInDuration = 150;
 EventList.style = eventListCss();
 
 export { EventList as ix_event_list };

package/dist/esm/ix-expanding-search.entry.js

@@ -1,9 +1,57 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-BEPo7U1W.js';
-import { j as iconClear, k as iconSearch } from './index-BBzEV-f4.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-EBgS4zhE.js';
+import { l as iconClear, m as iconSearch } from './index-DgUGsIlh.js';
 
 const expandingSearchCss = () => `.ix-form-control,.ix-form-control-plaintext{color:var(--theme-input--color);border-radius:var(--theme-input--border-radius);height:2rem;min-height:2rem;min-width:2rem;background-color:var(--theme-input--background);border:solid 1px var(--theme-input--border-color);box-shadow:var(--theme-input--box-shadow);padding-inline-start:0.5rem;padding-inline-end:0.5rem;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ix-form-control::-moz-placeholder,.ix-form-control-plaintext::-moz-placeholder{color:var(--theme-input-hint--color)}.ix-form-control::placeholder,.ix-form-control-plaintext::placeholder{color:var(--theme-input-hint--color)}.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),.ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled).hover,.ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled).hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled).hover,.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled).hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,.ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}.ix-form-control:focus-visible{color:var(--theme-input--color)}.ix-form-control[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}.ix-form-control[type=number]{text-align:right}.ix-form-control.readonly,.ix-form-control[readonly]{background:transparent !important;border-block-start:none !important;border-inline-start:none !important;border-inline-end:none !important;border-radius:0rem}.ix-form-control:-moz-read-only{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}.ix-form-control:read-only,.ix-form-control[readonly],.ix-form-control[readOnly],.ix-form-control.readonly{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}.ix-form-control:read-only::-moz-placeholder,.ix-form-control[readonly]::-moz-placeholder,.ix-form-control[readOnly]::-moz-placeholder,.ix-form-control.readonly::-moz-placeholder{color:transparent}.ix-form-control:-moz-read-only::placeholder{color:transparent}.ix-form-control:read-only::placeholder,.ix-form-control[readonly]::placeholder,.ix-form-control[readOnly]::placeholder,.ix-form-control.readonly::placeholder{color:transparent}.ix-form-control:disabled,.ix-form-control.disabled{background:transparent !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)}.ix-form-control:disabled::-moz-placeholder,.ix-form-control.disabled::-moz-placeholder{color:transparent}.ix-form-control:disabled::placeholder,.ix-form-control.disabled::placeholder{color:transparent}.ix-form-control-plaintext{outline:0}.form-group{position:relative}.input-wrapper{display:flex;position:relative;align-items:center;flex-wrap:nowrap}.input-wrapper>.glyph{display:block;position:absolute;margin-inline-start:0.312rem;color:var(--theme-color-std-text)}.input-wrapper>input{padding-inline-start:2.2rem}select.ix-form-control{padding:0 0.312rem}textarea.ix-form-control{padding:0.375rem 0.5rem}input.ix-form-control.disabled,input.ix-form-control:disabled{color:var(--theme-input--color--disabled)}input.ix-form-control:-moz-read-only{cursor:default}input.ix-form-control:read-only,input.ix-form-control.readonly{cursor:default}:host{display:inline-flex;width:auto;height:2rem;align-items:center;justify-content:space-between;position:relative}: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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .input-container{transition:all var(--theme-medium-time) ease-in-out}:host input{box-shadow:var(--theme-input--box-shadow);cursor:auto !important;width:100%}:host .expanded{width:11.5625rem}:host .expanded.fullWidth{width:100%}:host .collapsed{width:1.5rem;border:none}:host{}:host .btn-search-icon{align-self:center;margin:auto;position:relative}:host .btn-search{display:flex;max-width:2rem;max-height:2rem;border-radius:var(--theme-input--border-radius);transition:all var(--theme-default-time) ease-in-out;z-index:1;align-items:center;position:relative;border:none}:host .btn-search:not(.disabled):not(:disabled){cursor:pointer}:host .btn-search:not(.disabled):not(:disabled):hover,:host .btn-search:not(.disabled):not(:disabled).hover{border-color:transparent}:host .btn-search:not(.disabled):not(:disabled){cursor:pointer}:host .btn-search:not(.disabled):not(:disabled):active,:host .btn-search:not(.disabled):not(:disabled).active{border-color:transparent}:host .btn-search:not(.disabled):not(:disabled):focus-visible{outline:none}:host .btn-search:not(.disabled):not(:disabled):focus-visible{outline:var(--focus--border-color);outline-width:1px;outline-style:solid}:host .btn-search.btn-search--expanded{margin-left:0.25rem;pointer-events:none}:host .btn-search:active{width:2rem;height:2rem;border-radius:var(--theme-input--border-radius);border:var(--theme-std-bdr-1) !important}:host{}:host .input-container{display:flex;position:absolute;align-items:center;flex-wrap:nowrap}:host .btn-clear{position:absolute;border-radius:var(--theme-input--border-radius);right:0px;margin-right:0.25rem}:host .input{padding-left:2rem !important;padding-right:2.5rem !important}:host .opacity-before{opacity:0}:host .opacity-after{opacity:1}:host(.right-position){width:11.5625rem !important}:host(.right-position.fullWidth){width:100% !important}:host(.right-position.fullWidth) .fullWidth{width:100% !important}`;
 
 const ExpandingSearch = class {
+    /**
+     * Search icon
+     */
+    icon;
+    /**
+     * Placeholder text
+     */
+    placeholder = 'Enter text here';
+    /**
+     * Default value
+     */
+    value = '';
+    /**
+     * If true the search field will fill all available horizontal space of it's parent container when expanded.
+     */
+    fullWidth = false;
+    /**
+     * button variant
+     */
+    variant = 'tertiary';
+    /**
+     * ARIA label for the search icon button
+     * Will be set as aria-label on the nested HTML button element
+     *
+     * @since 3.2.0
+     */
+    ariaLabelSearchIconButton;
+    /**
+     * ARIA label for the clear icon button
+     * Will be set as aria-label on the nested HTML button element
+     *
+     * @since 3.2.0
+     */
+    ariaLabelClearIconButton = 'Clear search';
+    /**
+     * ARIA label for the search input
+     * Will be set as aria-label on the nested HTML input element
+     *
+     * @since 3.2.0
+     */
+    ariaLabelSearchInput = 'Search input';
+    isFieldChanged = false;
+    expanded = false;
+    hasFocus = false;
+    /**
+     * Value changed
+     */
+    valueChange;
     expandInput() {
         setTimeout(this.focusTextInput, 300);
         this.expanded = true;
@@ -27,70 +75,36 @@ const ExpandingSearch = class {
         }
         this.valueChange.emit(this.value);
     }
+    textInput;
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.valueChange = createEvent(this, "valueChange", 7);
-        /**
-         * Placeholder text
-         */
-        this.placeholder = 'Enter text here';
-        /**
-         * Default value
-         */
-        this.value = '';
-        /**
-         * If true the search field will fill all available horizontal space of it's parent container when expanded.
-         */
-        this.fullWidth = false;
-        /**
-         * button variant
-         */
-        this.variant = 'tertiary';
-        /**
-         * ARIA label for the clear icon button
-         * Will be set as aria-label on the nested HTML button element
-         *
-         * @since 3.2.0
-         */
-        this.ariaLabelClearIconButton = 'Clear search';
-        /**
-         * ARIA label for the search input
-         * Will be set as aria-label on the nested HTML input element
-         *
-         * @since 3.2.0
-         */
-        this.ariaLabelSearchInput = 'Search input';
-        this.isFieldChanged = false;
-        this.expanded = false;
-        this.hasFocus = false;
         this.focusTextInput = this.focusTextInput.bind(this);
     }
     focusTextInput() {
-        var _a;
-        (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus();
+        this.textInput?.focus();
     }
     clearClicked() {
-        var _a;
         this.clearInput();
-        (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus();
+        this.textInput?.focus();
         this.valueChange.emit(this.value);
     }
     render() {
-        var _a, _b;
-        return (h(Host, { key: '89dd7b99531c8ccd578ff26517ae2959c3e73c66', class: {
+        return (h(Host, { key: 'f954d610f8eee9f8864262567d501f7f53596b14', class: {
                 expanded: this.expanded,
                 'right-position': this.expanded,
                 fullWidth: this.fullWidth,
-            } }, h("ix-icon-button", { key: 'bf53f12935f7026517f1466383ddd38c4fdb5165', size: this.expanded ? '16' : '24', icon: (_a = this.icon) !== null && _a !== void 0 ? _a : iconSearch, variant: this.expanded ? 'tertiary' : this.variant, "data-testid": "button", onClick: () => this.expandInput(), tabindex: this.expanded ? -1 : 0, color: this.hasFocus ? 'input-search-icon--color--focus' : undefined, class: {
+            } }, h("ix-icon-button", { key: '760a79a6faced78eb06603357b83e460991926fa', size: this.expanded ? '16' : '24', icon: this.icon ?? iconSearch, variant: this.expanded ? 'tertiary' : this.variant, "data-testid": "button", onClick: () => this.expandInput(), tabindex: this.expanded ? -1 : 0, color: this.hasFocus ? 'input-search-icon--color--focus' : undefined, class: {
                 'btn-search': true,
                 'btn-search--expanded': this.expanded,
-            }, "aria-label": (_b = this.ariaLabelSearchIconButton) !== null && _b !== void 0 ? _b : (this.expanded ? 'Close search' : 'Open search') }), h("div", { key: '84a10a9fa5599e4c15aeed3e10b4523d7d99d373', class: {
+            }, "aria-label": this.ariaLabelSearchIconButton ??
+                (this.expanded ? 'Close search' : 'Open search') }), h("div", { key: '2f29b9e24e4875fa907226a97fe2c20aedbf5b73', class: {
                 expanded: this.expanded,
                 fullWidth: this.fullWidth,
                 collapsed: !this.expanded,
                 'disable-pointer': !this.expanded,
                 'input-container': true,
-            }, "data-testid": "input-wrapper" }, h("input", { key: 'f4e4779e2db00e5c1b2478853e29748cae03452a', class: {
+            }, "data-testid": "input-wrapper" }, h("input", { key: 'ff934d36786c9f6be7b235773309c32ba6ed1842', class: {
                 'ix-form-control': true,
                 input: this.expanded,
                 'disable-pointer': !this.expanded,