@siemens/ix 2.4.1 → 2.6.0

package/dist/cjs/ix-field-label_3.cjs.entry.js

@@ -0,0 +1,476 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-757233c7.js');
+const a11y = require('./a11y-ae470f01.js');
+const makeRef = require('./make-ref-499e1e41.js');
+const validation = require('./validation-1e3dd5ee.js');
+const helperTextUtil = require('./helper-text-util-3192e78f.js');
+const floatingUi_dom_esm = require('./floating-ui.dom.esm-9dde6cd6.js');
+const listener = require('./listener-9ec23f49.js');
+const findElement = require('./find-element-8e586600.js');
+require('./index-d2117dc0.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 IxFieldLabelStyle0 = fieldLabelCss;
+
+const FormFieldLabel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.htmlForObserver = new MutationObserver(() => this.checkForInternalState());
+        this.a11yAttributes = {};
+        this.labelRef = makeRef.makeRef();
+        this.required = undefined;
+        this.htmlFor = undefined;
+        this.controlRef = undefined;
+        this.isInvalid = false;
+    }
+    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 = a11y.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 = validation.createClassMutationObserver(input, () => this.checkForInvalidState(input));
+        }
+    }
+    registerHtmlForClassObserver(forElement) {
+        if (this.htmlForClassObserver) {
+            this.htmlForClassObserver.destroy();
+        }
+        this.htmlForClassObserver = validation.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 (index.h(index.Host, { key: '3a62067a0af7847c578459a35bcbd56c54f59bf1', onClick: () => this.focusOnClick() }, index.h("label", Object.assign({ key: '05aea8c0c5783f8cffb9d3968f1621564203c2ac', htmlFor: this.htmlFor }, this.a11yAttributes, { ref: this.labelRef }), index.h("ix-typography", { key: '6285d1624065c691d9beb3a1c4c31268e0a6bde9', color: this.isInvalid ? 'alarm' : 'soft', format: "label" }, index.h("slot", { key: 'cc8185cb40bf055c6f2e29ee09265acc10719657' }), this.required && index.h("span", { key: 'b8c6191b6a0fd1314afd21d555268417292b1201' }, "\u00A0*")))));
+    }
+    get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "htmlFor": ["registerHtmlForObserver"],
+        "controlRef": ["registerControlRefObserver"]
+    }; }
+};
+FormFieldLabel.style = IxFieldLabelStyle0;
+
+const fieldWrapperCss = ":host{display:flex;position:relative;flex-direction:column}:host .slot-wrapper{display:flex;position:relative;align-items:center;justify-content:flex-start;gap:0.25rem}:host .field-bottom,:host .field-top{display:flex;flex-direction:row;position:relative;justify-content:space-between;gap:1rem;width:-moz-min-content;width:min-content;min-width:100%}:host .field-bottom .bottom-right{margin-left:auto;margin-right:0px}:host .bottom-text{display:flex;position:relative;align-items:flex-start;justify-content:flex-start;gap:0.25rem;margin-right:0.25rem}:host .text-icon{margin:0.125rem}:host .text-icon.invalid{color:var(--theme-helper-icon--color--invalid)}:host .text-icon.info{color:var(--theme-helper-icon--color--info)}:host .text-icon.warning{color:var(--theme-helper-icon--color--warning)}:host .text-icon.valid{color:var(--theme-helper-icon--color--valid)}:host .bottom-text{margin-top:0.25rem;margin-bottom:0.25rem}";
+const IxFieldWrapperStyle0 = fieldWrapperCss;
+
+const FieldWrapper = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.slotRef = makeRef.makeRef();
+        this.helperText = undefined;
+        this.label = undefined;
+        this.invalidText = undefined;
+        this.validText = undefined;
+        this.infoText = undefined;
+        this.warningText = undefined;
+        this.isInvalid = false;
+        this.isValid = false;
+        this.isInfo = false;
+        this.isWarning = false;
+        this.showTextAsTooltip = false;
+        this.required = false;
+        this.htmlForLabel = undefined;
+        this.controlRef = undefined;
+    }
+    render() {
+        const textOptions = {
+            invalidText: this.invalidText,
+            isInvalid: this.isInvalid,
+            isValid: this.isValid,
+            validText: this.validText,
+            isWarning: this.isWarning,
+            warningText: this.warningText,
+            isInfo: this.isInfo,
+            infoText: this.infoText,
+            helperText: this.helperText,
+        };
+        return (index.h(index.Host, { key: '3a1885ca13c1de17fdbb33eb6cde695cbdb3469e' }, this.label && (index.h("div", { key: '9e8c0a96fe7014feb6ac76473137183ba92e2ad1', class: "field-top" }, index.h("ix-field-label", { key: '923dec87ac02cf550400aba0bf929b95d8a271ed', required: this.required, htmlFor: this.htmlForLabel, controlRef: this.controlRef, isInvalid: this.isInvalid }, this.label))), index.h("div", { key: 'a6694ebd1d18d2411565960ff5f1e6ee900491e8', class: {
+                'slot-wrapper': true,
+            }, ref: this.slotRef }, index.h("slot", { key: '302fcd87bd9cba38a3057b9a6542dbaed9d16bbc' })), index.h("div", { key: '8f5c9836963e0df796388b8dac20db7289ea067e', class: 'field-bottom' }, !this.showTextAsTooltip && helperTextUtil.renderHelperText(textOptions), index.h("div", { key: '620bf3f6730971ee840744fce7b8a7de2d2f12a9', class: "bottom-right" }, index.h("slot", { key: '7cff3c8d8f550a88e4bccacf6b71547edb89b0a7', name: "bottom-right" }))), this.showTextAsTooltip === true && helperTextUtil.hasAnyText(textOptions) && (index.h("ix-tooltip", { key: '9041af539fd29c6fd2e8e3e4a00daa8e2c15ed22', for: this.slotRef.waitForCurrent(), showDelay: 500, placement: "bottom" }, helperTextUtil.renderHelperText(textOptions)))));
+    }
+    get hostElement() { return index.getElement(this); }
+};
+FieldWrapper.style = IxFieldWrapperStyle0;
+
+class OverlayController {
+    constructor() {
+        this.overlays = new Set();
+    }
+    connected(instance) {
+        this.overlays.add(instance);
+    }
+    disconnected(instance) {
+        this.overlays.delete(instance);
+    }
+    present(instance) {
+        if (instance.willPresent && !instance.willPresent()) {
+            return;
+        }
+        this.dismissOthers(instance);
+        instance.present();
+    }
+    dismiss(instance) {
+        if (instance.willDismiss && !instance.willDismiss()) {
+            return;
+        }
+        instance.dismiss();
+    }
+    dismissOthers(instance) {
+        this.overlays.forEach((overlay) => {
+            if (overlay !== instance) {
+                this.dismiss(overlay);
+            }
+        });
+    }
+}
+
+/*
+ * 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.
+ */
+class TooltipController extends OverlayController {
+}
+const tooltipController = new TooltipController();
+
+const tooltipCss = ":host{display:inline-block;position:fixed;left:0;top:0;z-index:var(--theme-z-index-tooltip);max-width:18.25rem;width:-moz-max-content;width:max-content;opacity:0;visibility:collapse !important;overflow-wrap:break-word;border-radius:0.25rem}:host .tooltip-title{display:flex;align-items:center}:host .tooltip-title ::slotted(ix-icon){margin-right:0.35rem}:host .tooltip-container{display:block;position:relative;width:auto;height:100%;background:var(--theme-tootlip--background);color:var(--theme-color-std-text);padding:0.375rem 0.75rem 0.375rem 0.875rem;box-shadow:var(--theme-shadow-4);border-radius:inherit}:host(.visible){opacity:1;visibility:visible !important}:host(.visible) .arrow,:host(.visible) .arrow::before{position:absolute;width:12px;height:12px;background:inherit}:host(.visible) .arrow{visibility:hidden}:host(.visible) .arrow::before{visibility:visible;content:\"\";transform:rotate(45deg);background-color:var(--theme-tootlip--background)}";
+const IxTooltipStyle0 = tooltipCss;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const numberToPixel = (value) => value != null ? `${value}px` : '';
+const Tooltip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.for = undefined;
+        this.titleContent = undefined;
+        this.interactive = false;
+        this.placement = 'top';
+        this.showDelay = 0;
+        this.hideDelay = 50;
+        this.animationFrame = false;
+        this.visible = false;
+    }
+    get arrowElement() {
+        return this.hostElement.shadowRoot.querySelector('.arrow');
+    }
+    destroyAutoUpdate() {
+        if (this.disposeAutoUpdate !== undefined) {
+            this.disposeAutoUpdate();
+        }
+    }
+    /** @internal */
+    async showTooltip(anchorElement) {
+        clearTimeout(this.hideTooltipTimeout);
+        await this.applyTooltipPosition(anchorElement);
+        this.showTooltipTimeout = setTimeout(() => {
+            tooltipController.present(this);
+            // Need to compute and apply tooltip position after initial render,
+            // because arrow has no valid bounding rect before that
+            this.applyTooltipPosition(anchorElement);
+        }, this.showDelay);
+    }
+    /** @internal */
+    async hideTooltip() {
+        clearTimeout(this.showTooltipTimeout);
+        let hideDelay = 50;
+        if (this.interactive && this.hideDelay === hideDelay) {
+            hideDelay = 150;
+        }
+        this.hideTooltipTimeout = setTimeout(() => {
+            tooltipController.dismiss(this);
+        }, hideDelay);
+        this.destroyAutoUpdate();
+    }
+    computeArrowPosition({ placement, middlewareData, }) {
+        let { x, y } = middlewareData.arrow;
+        const resetPosition = {
+            top: 'unset',
+            right: 'unset',
+            bottom: 'unset',
+            left: 'unset',
+        };
+        if (placement.startsWith('top')) {
+            return Object.assign(Object.assign({}, resetPosition), { left: numberToPixel(x), top: numberToPixel(y) });
+        }
+        if (placement.startsWith('right')) {
+            return Object.assign(Object.assign({}, resetPosition), { left: numberToPixel(-6), top: numberToPixel(y) });
+        }
+        if (placement.startsWith('bottom')) {
+            return Object.assign(Object.assign({}, resetPosition), { left: numberToPixel(x), top: numberToPixel(-6) });
+        }
+        if (placement.startsWith('left')) {
+            return Object.assign(Object.assign({}, resetPosition), { right: numberToPixel(-6), top: numberToPixel(y) });
+        }
+    }
+    async computeTooltipPosition(target) {
+        return floatingUi_dom_esm.computePosition(target, this.hostElement, {
+            strategy: 'fixed',
+            placement: this.placement,
+            middleware: [
+                floatingUi_dom_esm.shift(),
+                floatingUi_dom_esm.offset(12),
+                floatingUi_dom_esm.arrow({
+                    element: this.arrowElement,
+                }),
+                floatingUi_dom_esm.flip({
+                    fallbackStrategy: 'initialPlacement',
+                    fallbackAxisSideDirection: 'end',
+                    padding: 10,
+                }),
+                floatingUi_dom_esm.hide(),
+            ],
+        });
+    }
+    applyTooltipArrowPosition(computeResponse) {
+        const arrowPosition = this.computeArrowPosition(computeResponse);
+        Object.assign(this.arrowElement.style, arrowPosition);
+    }
+    async applyTooltipPosition(target) {
+        if (!target) {
+            return;
+        }
+        return new Promise((resolve) => {
+            this.destroyAutoUpdate();
+            this.disposeAutoUpdate = floatingUi_dom_esm.autoUpdate(target, this.hostElement, async () => {
+                setTimeout(async () => {
+                    var _a;
+                    const computeResponse = await this.computeTooltipPosition(target);
+                    const isHidden = (_a = computeResponse.middlewareData.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden;
+                    if (isHidden) {
+                        setTimeout(() => this.hideTooltip());
+                        resolve(computeResponse);
+                    }
+                    if (computeResponse.middlewareData.arrow) {
+                        this.applyTooltipArrowPosition(computeResponse);
+                    }
+                    const { x, y } = computeResponse;
+                    Object.assign(this.hostElement.style, {
+                        left: x !== null ? `${x}px` : '',
+                        top: y !== null ? `${y}px` : '',
+                    });
+                    resolve(computeResponse);
+                });
+            }, {
+                ancestorResize: true,
+                ancestorScroll: true,
+                elementResize: true,
+                animationFrame: this.animationFrame,
+            });
+        });
+    }
+    clearHideTimeout() {
+        if (this.interactive) {
+            clearTimeout(this.hideTooltipTimeout);
+        }
+    }
+    async queryAnchorElements() {
+        if (typeof this.for === 'string') {
+            return findElement.resolveSelector(this.for, this.hostElement);
+        }
+        if (this.for instanceof HTMLElement) {
+            return Promise.resolve([this.for]);
+        }
+        if (this.for instanceof Promise) {
+            const element = await this.for;
+            return [element];
+        }
+    }
+    async registerTriggerListener() {
+        const triggerElementList = await this.queryAnchorElements();
+        if (this.disposeListener) {
+            this.disposeListener();
+        }
+        if (!triggerElementList) {
+            return;
+        }
+        triggerElementList.forEach((element) => {
+            const onMouseEnter = () => {
+                this.showTooltip(element);
+            };
+            const onMouseLeave = () => {
+                this.hideTooltip();
+            };
+            const onFocusIn = () => {
+                if (this.showTooltipTimeout !== undefined) {
+                    clearTimeout(this.showTooltipTimeout);
+                }
+                onMouseEnter();
+            };
+            const onFocusOut = () => {
+                this.hideTooltip();
+            };
+            element.addEventListener('mouseenter', onMouseEnter);
+            element.addEventListener('mouseleave', onMouseLeave);
+            element.addEventListener('focusin', onFocusIn);
+            element.addEventListener('focusout', onFocusOut);
+            this.disposeListener = () => {
+                element.removeEventListener('mouseenter', onMouseEnter);
+                element.removeEventListener('mouseleave', onMouseLeave);
+                element.removeEventListener('focusin', onFocusIn);
+                element.removeEventListener('focusout', onFocusOut);
+            };
+        });
+    }
+    registerTooltipListener() {
+        const { hostElement } = this;
+        hostElement.addEventListener('mouseenter', () => this.clearHideTimeout());
+        hostElement.addEventListener('focusin', () => this.clearHideTimeout());
+        hostElement.addEventListener('mouseleave', () => this.hideTooltip());
+        hostElement.addEventListener('focusout', () => this.hideTooltip());
+    }
+    async onKeydown(event) {
+        if (event.code === 'Escape') {
+            this.hideTooltip();
+        }
+    }
+    componentWillLoad() {
+        this.registerTriggerListener();
+    }
+    componentDidLoad() {
+        this.observer = new MutationObserver(() => {
+            this.registerTriggerListener();
+        });
+        this.observer.observe(document.body, {
+            attributes: true,
+            attributeFilter: ['data-ix-tooltip'],
+            childList: true,
+            subtree: true,
+        });
+        this.registerTooltipListener();
+    }
+    connectedCallback() {
+        tooltipController.connected(this);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.destroyAutoUpdate();
+        tooltipController.disconnected(this);
+    }
+    isPresent() {
+        return this.visible;
+    }
+    present() {
+        this.visible = true;
+    }
+    dismiss() {
+        this.visible = false;
+    }
+    render() {
+        return (index.h(index.Host, { key: '1f46e4d330357c6f1d8770cfb407d31cc244aa64', class: {
+                visible: this.visible,
+            }, role: "tooltip" }, index.h("div", { key: '7a7896373a839c25a39fe41331223732ed40959d', class: "tooltip-container" }, index.h("div", { key: 'adb027026f5a668d2dbce4bceacdc1f66b7b7995', class: 'tooltip-title' }, index.h("slot", { key: '183340b03555b6e170f76c38e952ffa2bcad300f', name: "title-icon" }), index.h("ix-typography", { key: '14f5f8452aeda63a3acba3b577d2ffc81241200f', format: "h5" }, this.titleContent, index.h("slot", { key: '613335f4965c9e151f82a2e6b1d3f3635702dc1f', name: "title-content" }))), index.h("div", { key: 'c36f41b65c2e21b160bc7eee8dbee0c132d7d803', class: 'tooltip-content' }, index.h("slot", { key: 'f17ab01352090365d03a89d2e1c6a56823c74a5c' })), index.h("div", { key: '617f5fb5598ebd172591170e5400cab0e1d3f0a3', class: "arrow" }))));
+    }
+    get hostElement() { return index.getElement(this); }
+};
+__decorate([
+    listener.OnListener('keydown', (self) => self.visible)
+], Tooltip.prototype, "onKeydown", null);
+Tooltip.style = IxTooltipStyle0;
+
+exports.ix_field_label = FormFieldLabel;
+exports.ix_field_wrapper = FieldWrapper;
+exports.ix_tooltip = Tooltip;
+
+//# sourceMappingURL=ix-field-label_3.cjs.entry.js.map

package/dist/cjs/ix-field-label_3.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-field-label.ix-field-wrapper.ix-tooltip.entry.cjs.js","mappings":"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","names":["makeRef","a11yHostAttributes","createClassMutationObserver","h","Host","renderHelperText","hasAnyText","computePosition","shift","offset","arrow","flip","hide","autoUpdate","resolveSelector","OnListener"],"sources":["src/components/utils/input/index.ts","src/components/field-label/field-label.scss?tag=ix-field-label&encapsulation=shadow","src/components/field-label/field-label.tsx","src/components/field-wrapper/field-wrapper.scss?tag=ix-field-wrapper&encapsulation=shadow","src/components/field-wrapper/field-wrapper.tsx","src/components/utils/overlay.ts","src/components/tooltip/tooltip-controller.ts","src/components/tooltip/tooltip.scss?tag=ix-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.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 */\nimport { EventEmitter } from '@stencil/core';\nimport { IxComponent } from '../internal';\n\nexport * from './validation';\n\nexport interface FieldWrapperInterface {\n  /**\n   * Label for the field component\n   */\n  label?: string;\n  /**\n   * Show text below the field component which show additional information\n   */\n  helperText?: string;\n  /**\n   * Info text for the field component\n   */\n  infoText?: string;\n  /**\n   * Warning text for the field component\n   */\n  warningText?: string;\n  /**\n   * Error text for the field component\n   */\n  invalidText?: string;\n  /**\n   * Valid text for the field component\n   */\n  validText?: string;\n  /**\n   * Show helper, info, warning, error and valid text as tooltip\n   */\n  showTextAsTooltip?: boolean;\n}\n\nexport type HTMLIxFormComponentElement<T> = HTMLElement & IxFormComponent<T>;\nexport type HTMLIxInputFieldComponentElement<T> =\n  HTMLIxFormComponentElement<T> & IxInputFieldComponent<T>;\n\nexport interface IxFormValidationState {\n  // Annotate as @State()\n  isInvalid: boolean;\n  // Annotate as @State()\n  isValid: boolean;\n  // Annotate as @State()\n  isInfo: boolean;\n  // Annotate as @State()\n  isWarning: boolean;\n}\n\nexport interface IxFormComponent<T = string> extends IxComponent {\n  // Private internal\n  formInternals: ElementInternals;\n\n  // Annotate as @Prop({ reflect: true })\n  required?: boolean;\n  // Annotate as @Prop({ reflect: true })\n  name?: string;\n  // Annotate as @Prop()\n  value?: T;\n  // Annotate as @Prop()\n  disabled: boolean;\n\n  valueChange: EventEmitter<T>;\n  updateFormInternalValue(value: T): void;\n  hasValidValue(): Promise<boolean>;\n  getValidityState?(): Promise<ValidityState>;\n  getAssociatedFormElement(): Promise<HTMLFormElement | null>;\n}\n\nexport interface IxInputFieldComponent<T = string>\n  extends IxFormComponent<T>,\n    IxFormValidationState,\n    FieldWrapperInterface {\n  // Annotate as @Prop()\n  placeholder?: string;\n  // Annotate as @Prop()\n  readonly: boolean;\n\n  ixBlur: EventEmitter<void>;\n\n  // Annotate as @Method()\n  getNativeInputElement(): Promise<HTMLInputElement | HTMLTextAreaElement>;\n\n  // Annotate as @Method()\n  focusInput(): void;\n}\n\nexport function isIxInputFieldComponent(\n  obj: HTMLElement\n): obj is HTMLIxInputFieldComponentElement<unknown> {\n  return (\n    obj &&\n    'getAssociatedFormElement' in obj &&\n    typeof obj.getAssociatedFormElement === 'function' &&\n    'getNativeInputElement' in obj &&\n    typeof obj.getNativeInputElement === 'function'\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\n:host {\n  display: inline-block;\n  position: relative;\n\n  margin-top: 0.5rem;\n  margin-bottom: 0.25rem;\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, Host, Prop, h, Element, Watch } from '@stencil/core';\nimport { IxComponent } from '../utils/internal';\nimport {\n  ClassMutationObserver,\n  createClassMutationObserver,\n  HTMLIxFormComponentElement,\n  isIxInputFieldComponent,\n} from '../utils/input';\nimport { A11yAttributes, a11yHostAttributes } from '../utils/a11y';\nimport { MakeRef, makeRef } from '../utils/make-ref';\n\n@Component({\n  tag: 'ix-field-label',\n  styleUrl: 'field-label.scss',\n  shadow: true,\n})\nexport class FormFieldLabel implements IxComponent {\n  @Element() hostElement!: HTMLIxFieldLabelElement;\n\n  /**\n   * A value is required or must be checked for the form to be submittable\n   */\n  @Prop({ reflect: true, mutable: true }) required?: boolean;\n\n  /**\n   * The id of the form element that the label is associated with\n   */\n  @Prop({ reflect: true }) htmlFor?: string;\n\n  /** @internal */\n  @Prop() controlRef?: MakeRef<HTMLElement>;\n\n  /** @internal */\n  @Prop({ mutable: true }) isInvalid: boolean = false;\n\n  private readonly htmlForObserver = new MutationObserver(() =>\n    this.checkForInternalState()\n  );\n  private htmlForClassObserver?: ClassMutationObserver;\n  private controlRefClassObserver?: ClassMutationObserver;\n  private a11yAttributes: A11yAttributes = {};\n  private readonly labelRef = makeRef<HTMLLabelElement>();\n\n  connectedCallback() {\n    this.registerHtmlForObserver();\n    this.registerControlRefObserver();\n  }\n\n  disconnectedCallback(): void {\n    if (this.htmlForObserver) {\n      this.htmlForObserver.disconnect();\n    }\n    if (this.htmlForClassObserver) {\n      this.htmlForClassObserver.destroy();\n    }\n    if (this.controlRefClassObserver) {\n      this.controlRefClassObserver.destroy();\n    }\n  }\n\n  componentWillRender() {\n    this.checkForInternalState();\n  }\n\n  componentWillLoad(): void | Promise<void> {\n    this.a11yAttributes = a11yHostAttributes(this.hostElement);\n  }\n\n  @Watch('htmlFor')\n  private registerHtmlForObserver() {\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    if (this.htmlForObserver) {\n      this.htmlForObserver.disconnect();\n    }\n\n    if (this.htmlFor) {\n      this.htmlForObserver.observe(window.document, {\n        childList: true,\n        subtree: true,\n      });\n    }\n  }\n\n  @Watch('controlRef')\n  private async registerControlRefObserver() {\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    if (this.controlRefClassObserver) {\n      this.controlRefClassObserver.destroy();\n    }\n\n    if (this.controlRef) {\n      const input = await this.controlRef.waitForCurrent();\n\n      this.controlRefClassObserver = createClassMutationObserver(input, () =>\n        this.checkForInvalidState(input)\n      );\n    }\n  }\n\n  private registerHtmlForClassObserver(\n    forElement: HTMLIxFormComponentElement<unknown>\n  ) {\n    if (this.htmlForClassObserver) {\n      this.htmlForClassObserver.destroy();\n    }\n\n    this.htmlForClassObserver = createClassMutationObserver(forElement, () =>\n      this.checkForInvalidState(forElement)\n    );\n  }\n\n  private checkForInvalidState(elementToCheck: HTMLElement) {\n    this.isInvalid =\n      elementToCheck.classList.contains('is-invalid') ||\n      elementToCheck.classList.contains('ix-invalid');\n  }\n\n  private async checkForInternalState() {\n    if (this.htmlFor) {\n      const forElement = document.getElementById(\n        this.htmlFor\n      ) as HTMLIxFormComponentElement<unknown>;\n      if (forElement) {\n        if (typeof forElement.required === 'boolean') {\n          this.required = forElement.required;\n        }\n\n        this.registerHtmlForClassObserver(forElement);\n        this.checkForInvalidState(forElement);\n      }\n    }\n\n    if (this.controlRef) {\n      const input = await this.controlRef.waitForCurrent();\n      this.required = (\n        input as HTMLInputElement | HTMLTextAreaElement\n      ).required;\n    }\n  }\n\n  private async focusOnClick() {\n    if (this.htmlFor) {\n      const target = document.getElementById(this.htmlFor);\n      if (target) {\n        let input: HTMLElement | null = null;\n        if (isIxInputFieldComponent(target)) {\n          input = await target.getNativeInputElement();\n        } else {\n          input = target;\n        }\n        if (typeof input.focus === 'function') {\n          input.focus();\n        }\n      }\n    }\n\n    if (this.controlRef) {\n      (await this.controlRef.waitForCurrent()).focus();\n    }\n  }\n\n  render() {\n    return (\n      <Host onClick={() => this.focusOnClick()}>\n        <label\n          htmlFor={this.htmlFor}\n          {...this.a11yAttributes}\n          ref={this.labelRef}\n        >\n          <ix-typography\n            color={this.isInvalid ? 'alarm' : 'soft'}\n            format=\"label\"\n          >\n            <slot></slot>\n            {this.required && <span>&nbsp;*</span>}\n          </ix-typography>\n        </label>\n      </Host>\n    );\n  }\n}\n","@import \"./field-wrapper.mixins.scss\";\n\n:host {\n  display: flex;\n  position: relative;\n  flex-direction: column;\n\n  .slot-wrapper {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 0.25rem;\n  }\n\n  .field-bottom,\n  .field-top {\n    display: flex;\n    flex-direction: row;\n    position: relative;\n    justify-content: space-between;\n    gap: 1rem;\n    width: min-content;\n    min-width: 100%;\n  }\n\n  .field-bottom .bottom-right {\n    margin-left: auto;\n    margin-right: 0px;\n  }\n\n  @include helper-text;\n\n  .bottom-text {\n    margin-top: 0.25rem;\n    margin-bottom: 0.25rem;\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 */\nimport { Component, Element, Host, Prop, h } from '@stencil/core';\nimport { FieldWrapperInterface } from '../utils/input';\nimport { MakeRef, makeRef } from '../utils/make-ref';\nimport { hasAnyText, renderHelperText } from './helper-text-util';\n\n/** @internal */\n@Component({\n  tag: 'ix-field-wrapper',\n  styleUrl: 'field-wrapper.scss',\n  shadow: true,\n})\nexport class FieldWrapper implements FieldWrapperInterface {\n  @Element() hostElement!: HTMLIxFieldWrapperElement;\n\n  /**\n   * Show text below the field component\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Label for the field component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Error text for the field component\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * Valid text for the field component\n   */\n  @Prop() validText?: string;\n\n  /**\n   * Info text for the field component\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Warning text for the field component\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * Is the field component invalid\n   */\n  @Prop() isInvalid: boolean = false;\n\n  /**\n   * Is the field component valid\n   */\n  @Prop() isValid: boolean = false;\n\n  /**\n   * Is the field component info\n   */\n  @Prop() isInfo: boolean = false;\n\n  /**\n   * Is the field component warning\n   */\n  @Prop() isWarning: boolean = false;\n\n  /**\n   * Show helper, error, info, warning text as tooltip\n   */\n  @Prop() showTextAsTooltip: boolean = false;\n\n  /**\n   * Show label as required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The id of the form element that the label is associated with\n   */\n  @Prop() htmlForLabel?: string;\n\n  /**\n   * The control element that the label is associated with\n   */\n  @Prop() controlRef?: MakeRef<HTMLElement>;\n\n  private readonly slotRef = makeRef<HTMLDivElement>();\n\n  render() {\n    const textOptions = {\n      invalidText: this.invalidText,\n      isInvalid: this.isInvalid,\n      isValid: this.isValid,\n      validText: this.validText,\n      isWarning: this.isWarning,\n      warningText: this.warningText,\n      isInfo: this.isInfo,\n      infoText: this.infoText,\n      helperText: this.helperText,\n    };\n    return (\n      <Host>\n        {this.label && (\n          <div class=\"field-top\">\n            <ix-field-label\n              required={this.required}\n              htmlFor={this.htmlForLabel}\n              controlRef={this.controlRef}\n              isInvalid={this.isInvalid}\n            >\n              {this.label}\n            </ix-field-label>\n          </div>\n        )}\n        <div\n          class={{\n            'slot-wrapper': true,\n          }}\n          ref={this.slotRef}\n        >\n          <slot></slot>\n        </div>\n        <div class={'field-bottom'}>\n          {!this.showTextAsTooltip && renderHelperText(textOptions)}\n          <div class=\"bottom-right\">\n            <slot name=\"bottom-right\"></slot>\n          </div>\n        </div>\n\n        {this.showTextAsTooltip === true && hasAnyText(textOptions) && (\n          <ix-tooltip\n            for={this.slotRef.waitForCurrent()}\n            showDelay={500}\n            placement=\"bottom\"\n          >\n            {renderHelperText(textOptions)}\n          </ix-tooltip>\n        )}\n      </Host>\n    );\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 */\nimport { IxComponent } from '../utils/internal';\n\nexport interface IxOverlayComponent extends IxComponent {\n  isPresent(): boolean;\n\n  willPresent?(): boolean;\n  willDismiss?(): boolean;\n\n  present(): void;\n  dismiss(): void;\n}\n\nexport class OverlayController {\n  overlays: Set<IxOverlayComponent> = new Set();\n\n  connected(instance: IxOverlayComponent): void {\n    this.overlays.add(instance);\n  }\n\n  disconnected(instance: IxOverlayComponent): void {\n    this.overlays.delete(instance);\n  }\n\n  present(instance: IxOverlayComponent): void {\n    if (instance.willPresent && !instance.willPresent()) {\n      return;\n    }\n    this.dismissOthers(instance);\n    instance.present();\n  }\n\n  dismiss(instance: IxOverlayComponent): void {\n    if (instance.willDismiss && !instance.willDismiss()) {\n      return;\n    }\n    instance.dismiss();\n  }\n\n  private dismissOthers(instance: IxOverlayComponent): void {\n    this.overlays.forEach((overlay) => {\n      if (overlay !== instance) {\n        this.dismiss(overlay);\n      }\n    });\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 { OverlayController } from '../utils/overlay';\n\nclass TooltipController extends OverlayController {}\n\nexport const tooltipController = new TooltipController();\n",":host {\n  display: inline-block;\n  position: fixed;\n  left: 0;\n  top: 0;\n  z-index: var(--theme-z-index-tooltip);\n\n  max-width: 18.25rem;\n  width: max-content;\n\n  opacity: 0;\n  visibility: collapse !important;\n  overflow-wrap: break-word;\n\n  border-radius: 0.25rem;\n\n  .tooltip-title {\n    display: flex;\n    align-items: center;\n\n    ::slotted(ix-icon) {\n      margin-right: 0.35rem;\n    }\n  }\n\n  .tooltip-container {\n    display: block;\n    position: relative;\n    width:  auto;\n    height: 100%;\n    background: var(--theme-tootlip--background);\n    color: var(--theme-color-std-text);\n    padding: 0.375rem 0.75rem 0.375rem 0.875rem;\n\n    box-shadow: var(--theme-shadow-4);\n    border-radius: inherit;\n  }\n}\n\n:host(.visible) {\n  opacity: 1;\n  visibility: visible !important;\n}\n\n:host(.visible) {\n  .arrow,\n  .arrow::before {\n    position: absolute;\n    width: 12px;\n    height: 12px;\n    background: inherit;\n  }\n\n  .arrow {\n    visibility: hidden;\n  }\n\n  .arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n    background-color: var(--theme-tootlip--background);\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 */\nimport {\n  arrow,\n  autoUpdate,\n  computePosition,\n  ComputePositionReturn,\n  flip,\n  hide,\n  offset,\n  shift,\n} from '@floating-ui/dom';\nimport {\n  Component,\n  Element,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { OnListener } from '../utils/listener';\nimport { tooltipController } from './tooltip-controller';\nimport { IxOverlayComponent } from '../utils/overlay';\nimport { resolveSelector } from '../utils/find-element';\nimport { ElementReference } from 'src/components';\n\ntype ArrowPosition = {\n  top?: string;\n  left?: string;\n  right?: string;\n};\n\nconst numberToPixel = (value?: number | null) =>\n  value != null ? `${value}px` : '';\n\n/**\n * @slot title-icon - Icon of tooltip title\n * @slot title-content - Content of tooltip title\n *\n * @since 1.4.0\n */\n@Component({\n  tag: 'ix-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true,\n})\nexport class Tooltip implements IxOverlayComponent {\n  /**\n   * CSS selector for hover trigger element e.g. `for=\"[data-my-custom-select]\"`\n   */\n  @Prop() for?: ElementReference;\n\n  /**\n   * Title of the tooltip\n   */\n  @Prop() titleContent?: string;\n\n  /**\n   * Define if the user can access the tooltip via mouse.\n   */\n  @Prop() interactive = false;\n\n  /**\n   * Initial placement of the tooltip.\n   * If the selected placement doesn't have enough space, the tooltip will be repositioned to another location.\n   * @since 1.5.0\n   */\n  @Prop() placement: 'top' | 'right' | 'bottom' | 'left' = 'top';\n\n  /** @internal */\n  @Prop() showDelay = 0;\n\n  /** @internal */\n  @Prop() hideDelay = 50;\n\n  /** @internal */\n  @Prop() animationFrame = false;\n\n  @State() visible = false;\n\n  @Element() hostElement!: HTMLIxTooltipElement;\n\n  private observer?: MutationObserver;\n  private hideTooltipTimeout?: NodeJS.Timeout;\n  private showTooltipTimeout?: NodeJS.Timeout;\n  private disposeAutoUpdate?: () => void;\n  private disposeListener?: () => void;\n\n  private get arrowElement(): HTMLElement {\n    return this.hostElement.shadowRoot!.querySelector('.arrow')!;\n  }\n\n  private destroyAutoUpdate() {\n    if (this.disposeAutoUpdate !== undefined) {\n      this.disposeAutoUpdate();\n    }\n  }\n\n  /** @internal */\n  @Method()\n  async showTooltip(anchorElement: Element) {\n    clearTimeout(this.hideTooltipTimeout);\n    await this.applyTooltipPosition(anchorElement);\n\n    this.showTooltipTimeout = setTimeout(() => {\n      tooltipController.present(this);\n      // Need to compute and apply tooltip position after initial render,\n      // because arrow has no valid bounding rect before that\n      this.applyTooltipPosition(anchorElement);\n    }, this.showDelay);\n  }\n\n  /** @internal */\n  @Method()\n  async hideTooltip() {\n    clearTimeout(this.showTooltipTimeout);\n    let hideDelay = 50;\n\n    if (this.interactive && this.hideDelay === hideDelay) {\n      hideDelay = 150;\n    }\n\n    this.hideTooltipTimeout = setTimeout(() => {\n      tooltipController.dismiss(this);\n    }, hideDelay);\n    this.destroyAutoUpdate();\n  }\n\n  private computeArrowPosition({\n    placement,\n    middlewareData,\n  }: ComputePositionReturn): ArrowPosition | undefined {\n    let { x, y } = middlewareData.arrow!;\n    const resetPosition = {\n      top: 'unset',\n      right: 'unset',\n      bottom: 'unset',\n      left: 'unset',\n    };\n\n    if (placement.startsWith('top')) {\n      return {\n        ...resetPosition,\n        left: numberToPixel(x),\n        top: numberToPixel(y),\n      };\n    }\n\n    if (placement.startsWith('right')) {\n      return {\n        ...resetPosition,\n        left: numberToPixel(-6),\n        top: numberToPixel(y),\n      };\n    }\n\n    if (placement.startsWith('bottom')) {\n      return {\n        ...resetPosition,\n        left: numberToPixel(x),\n        top: numberToPixel(-6),\n      };\n    }\n\n    if (placement.startsWith('left')) {\n      return {\n        ...resetPosition,\n        right: numberToPixel(-6),\n        top: numberToPixel(y),\n      };\n    }\n  }\n\n  private async computeTooltipPosition(target: Element) {\n    return computePosition(target, this.hostElement, {\n      strategy: 'fixed',\n      placement: this.placement,\n      middleware: [\n        shift(),\n        offset(12),\n        arrow({\n          element: this.arrowElement,\n        }),\n        flip({\n          fallbackStrategy: 'initialPlacement',\n          fallbackAxisSideDirection: 'end',\n          padding: 10,\n        }),\n        hide(),\n      ],\n    });\n  }\n\n  private applyTooltipArrowPosition(computeResponse: ComputePositionReturn) {\n    const arrowPosition = this.computeArrowPosition(computeResponse);\n    Object.assign(this.arrowElement.style, arrowPosition);\n  }\n\n  private async applyTooltipPosition(target: Element) {\n    if (!target) {\n      return;\n    }\n\n    return new Promise<ComputePositionReturn>((resolve) => {\n      this.destroyAutoUpdate();\n      this.disposeAutoUpdate = autoUpdate(\n        target,\n        this.hostElement,\n        async () => {\n          setTimeout(async () => {\n            const computeResponse = await this.computeTooltipPosition(target);\n\n            const isHidden =\n              computeResponse.middlewareData.hide?.referenceHidden;\n\n            if (isHidden) {\n              setTimeout(() => this.hideTooltip());\n              resolve(computeResponse);\n            }\n\n            if (computeResponse.middlewareData.arrow) {\n              this.applyTooltipArrowPosition(computeResponse);\n            }\n\n            const { x, y } = computeResponse;\n            Object.assign(this.hostElement.style, {\n              left: x !== null ? `${x}px` : '',\n              top: y !== null ? `${y}px` : '',\n            });\n\n            resolve(computeResponse);\n          });\n        },\n        {\n          ancestorResize: true,\n          ancestorScroll: true,\n          elementResize: true,\n          animationFrame: this.animationFrame,\n        }\n      );\n    });\n  }\n\n  private clearHideTimeout() {\n    if (this.interactive) {\n      clearTimeout(this.hideTooltipTimeout);\n    }\n  }\n\n  private async queryAnchorElements(): Promise<Array<HTMLElement> | undefined> {\n    if (typeof this.for === 'string') {\n      return resolveSelector(this.for, this.hostElement);\n    }\n\n    if (this.for instanceof HTMLElement) {\n      return Promise.resolve([this.for]);\n    }\n\n    if (this.for instanceof Promise) {\n      const element = await this.for;\n      return [element];\n    }\n  }\n\n  private async registerTriggerListener() {\n    const triggerElementList = await this.queryAnchorElements();\n\n    if (this.disposeListener) {\n      this.disposeListener();\n    }\n\n    if (!triggerElementList) {\n      return;\n    }\n\n    triggerElementList.forEach((element) => {\n      const onMouseEnter = () => {\n        this.showTooltip(element);\n      };\n\n      const onMouseLeave = () => {\n        this.hideTooltip();\n      };\n\n      const onFocusIn = () => {\n        if (this.showTooltipTimeout !== undefined) {\n          clearTimeout(this.showTooltipTimeout);\n        }\n\n        onMouseEnter();\n      };\n\n      const onFocusOut = () => {\n        this.hideTooltip();\n      };\n\n      element.addEventListener('mouseenter', onMouseEnter);\n      element.addEventListener('mouseleave', onMouseLeave);\n      element.addEventListener('focusin', onFocusIn);\n      element.addEventListener('focusout', onFocusOut);\n\n      this.disposeListener = () => {\n        element.removeEventListener('mouseenter', onMouseEnter);\n        element.removeEventListener('mouseleave', onMouseLeave);\n        element.removeEventListener('focusin', onFocusIn);\n        element.removeEventListener('focusout', onFocusOut);\n      };\n    });\n  }\n\n  private registerTooltipListener() {\n    const { hostElement } = this;\n    hostElement.addEventListener('mouseenter', () => this.clearHideTimeout());\n    hostElement.addEventListener('focusin', () => this.clearHideTimeout());\n\n    hostElement.addEventListener('mouseleave', () => this.hideTooltip());\n    hostElement.addEventListener('focusout', () => this.hideTooltip());\n  }\n\n  @OnListener<Tooltip>('keydown', (self) => self.visible)\n  async onKeydown(event: KeyboardEvent) {\n    if (event.code === 'Escape') {\n      this.hideTooltip();\n    }\n  }\n\n  componentWillLoad() {\n    this.registerTriggerListener();\n  }\n\n  componentDidLoad() {\n    this.observer = new MutationObserver(() => {\n      this.registerTriggerListener();\n    });\n\n    this.observer.observe(document.body, {\n      attributes: true,\n      attributeFilter: ['data-ix-tooltip'],\n      childList: true,\n      subtree: true,\n    });\n\n    this.registerTooltipListener();\n  }\n\n  connectedCallback() {\n    tooltipController.connected(this);\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n    this.destroyAutoUpdate();\n    tooltipController.disconnected(this);\n  }\n\n  isPresent(): boolean {\n    return this.visible;\n  }\n\n  present(): void {\n    this.visible = true;\n  }\n\n  dismiss(): void {\n    this.visible = false;\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          visible: this.visible,\n        }}\n        role=\"tooltip\"\n      >\n        <div class=\"tooltip-container\">\n          <div class={'tooltip-title'}>\n            <slot name=\"title-icon\"></slot>\n            <ix-typography format=\"h5\">\n              {this.titleContent}\n              <slot name=\"title-content\"></slot>\n            </ix-typography>\n          </div>\n          <div class={'tooltip-content'}>\n            <slot></slot>\n          </div>\n          <div class=\"arrow\"></div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ix-filter-chip_2.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-529f21c1.js');
+const index = require('./index-757233c7.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 IxFilterChipStyle0 = filterChipCss;
@@ -20,7 +20,7 @@ const FilterChip = class {
         this.closeClick.emit();
     }
     render() {
-        return (index.h(index.Host, { key: '215ed3c9b71df4ba795032725d76950f10a33184', class: { disabled: this.disabled, readonly: this.readonly }, title: this.el.textContent }, index.h("div", { key: '68f822ed7365a1b9375721e5fc9a9ce91bd79313', class: "slot-container" }, index.h("slot", { key: '8c334798a0c6c274d68564ba12b01d59054c338c' })), !this.disabled && !this.readonly ? (index.h("ix-icon-button", { ghost: true, oval: true, icon: 'close-small', size: "16", tabindex: this.disabled ? -1 : 0, variant: "primary", disabled: this.disabled, onClick: (e) => this.onCloseClick(e) })) : null));
+        return (index.h(index.Host, { key: 'cdcaa5bf0debe46267e41dc32888abd11739b532', class: { disabled: this.disabled, readonly: this.readonly }, title: this.el.textContent }, index.h("div", { key: '3ebd0c04ea93dff78d568bbec5b0c3d811953bc2', class: "slot-container" }, index.h("slot", { key: 'd549c6c2fb2d5f221a4bf9f2b1d55eaddffc85b4' })), !this.disabled && !this.readonly ? (index.h("ix-icon-button", { ghost: true, oval: true, icon: 'close-small', size: "16", tabindex: this.disabled ? -1 : 0, variant: "primary", disabled: this.disabled, onClick: (e) => this.onCloseClick(e) })) : null));
     }
     get el() { return index.getElement(this); }
 };
@@ -42,6 +42,14 @@ class IxSelectItemLabelChangeEvent extends CustomEvent {
         });
     }
 }
+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(.d-none){display:none}";
 const IxSelectItemStyle0 = selectItemCss;
@@ -50,6 +58,7 @@ const SelectItem = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.itemClick = index.createEvent(this, "itemClick", 7);
+        this.componentLoaded = false;
         this.label = undefined;
         this.value = undefined;
         this.selected = false;
@@ -75,20 +84,32 @@ const SelectItem = class {
         if (this.value === undefined || this.value === null) {
             throw Error('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) {
-        this.hostElement.dispatchEvent(new IxSelectItemLabelChangeEvent({
-            newValue: newValue,
-            oldValue: oldValue,
-        }));
+        if (this.componentLoaded) {
+            this.hostElement.dispatchEvent(new IxSelectItemLabelChangeEvent({
+                newValue: newValue,
+                oldValue: oldValue,
+            }));
+        }
     }
     render() {
-        return (index.h(index.Host, { key: '73a6d9e2c4df3541658f2bdce0a4ec42aea2c5e1' }, index.h("ix-dropdown-item", { key: 'c8d0563af535129de120a4899d683038f02dad57', class: {
+        return (index.h(index.Host, { key: '0f826c4130649aa925bca41b1fb411ffdf869ecb' }, index.h("ix-dropdown-item", { key: '1c315d23a369bcddd391e04cc6f064bcb8992f68', class: {
                 'select-item-checked': this.selected,
             }, checked: this.selected, label: this.label ? this.label : this.value, onItemClick: (e) => this.onItemClick(e) })));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
+        "value": ["onValueChange"],
         "label": ["labelChange"]
     }; }
 };