npm - @siemens/ix - Versions diffs - 2.6.0 → 2.6.1 - Mend

@siemens/ix 2.6.0 → 2.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (311) hide show

package/dist/esm/ix-input.entry.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-97874de0.js';
-import { e as iconEye, f as iconEyeCancelled } from './index-ad2af369.js';
+import { e as iconEye, f as iconEyeCancelled } from './index-2b76ea55.js';
 import { H as HookValidationLifecycle } from './validation-45aa490c.js';
 import { m as makeRef } from './make-ref-4b76e9b5.js';
-import { m as mapValidationResult, a as adjustPaddingForStartAndEnd, b as SlotStart, I as InputElement, c as checkAllowedKeys, o as onInputBlur, S as SlotEnd, g as getAriaAttributesForInput } from './input.util-715860e3.js';
+import { m as mapValidationResult, a as adjustPaddingForStartAndEnd, b as SlotStart, I as InputElement, c as checkAllowedKeys, o as onInputBlur, S as SlotEnd, g as getAriaAttributesForInput } from './input.util-c855b2ed.js';
 import './a11y-b10c12e0.js';
 import './rwd.util-d8e00a88.js';
 import './anime.es-a5520566.js';
@@ -114,10 +114,10 @@ const Input = class {
     render() {
         var _a;
         const inputAria = getAriaAttributesForInput(this);
-        return (h(Host, { key: '842ff9fc4e182372da40d4bcb4f89653fc1c90fd', class: {
+        return (h(Host, { key: 'f625dc7d2ed058f53940ccda73db408a3d7017a5', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, h("ix-field-wrapper", { key: '3614d6006a3c55191f6fce25c70c1383b46fec0b', htmlForLabel: this.inputId, required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: '71ba199ce76ca1ac0135a403827e47aec4c88977', class: "input-wrapper" }, h(SlotStart, { key: 'f6a8ea82539d59e475e6e62d498ea7150de90506', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h(InputElement, { key: '4c4ff361edcf9d5b780825142ba64bee79531153', id: this.inputId, readonly: this.readonly, disabled: this.disabled, maxLength: this.maxLength, minLength: this.minLength, pattern: this.pattern, type: this.inputType, isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, inputRef: this.inputRef, onKeyPress: (event) => checkAllowedKeys(this, event), valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => onInputBlur(this, this.inputRef.current), ariaAttributes: inputAria }), h(SlotEnd, { key: '9b0dab754362fbe7abf36c505209da7063490a52', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("ix-icon-button", { key: '6003d03e3d8efd967c932fc05e2270f83a102ae4', color: "color-weak-text", class: {
+            } }, h("ix-field-wrapper", { key: 'c018215d637253e021247473c35701ff94d3f028', htmlForLabel: this.inputId, required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: 'cc9ee3d23a14d0e10351f294fae72aeec82fbf64', class: "input-wrapper" }, h(SlotStart, { key: 'f32e50c55492dc1423b91f05209c1e9914b50f28', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h(InputElement, { key: 'ca17d2fee580dbe2e8d176018d0e55565bef5f33', id: this.inputId, readonly: this.readonly, disabled: this.disabled, maxLength: this.maxLength, minLength: this.minLength, pattern: this.pattern, type: this.inputType, isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, inputRef: this.inputRef, onKeyPress: (event) => checkAllowedKeys(this, event), valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => onInputBlur(this, this.inputRef.current), ariaAttributes: inputAria }), h(SlotEnd, { key: '5664747770d85defa36d460b4aa3e497a802bca2', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("ix-icon-button", { key: 'f680b65ba0355746be49646d25a2074cc4a9caac', color: "color-weak-text", class: {
                 'password-eye': true,
                 'eye-hidden': this.type !== 'password',
             }, ghost: true, icon: this.inputType === 'password' ? iconEye : iconEyeCancelled, onClick: () => {
@@ -126,7 +126,7 @@ const Input = class {
                     return;
                 }
                 this.inputType = 'password';
-            } }))), !!this.maxLength && this.maxLength > 0 && (h("ix-typography", { key: 'ecb767e15d688a8f93237a2572fcdf2343c087c6', class: "bottom-text", slot: "bottom-right", color: "soft" }, (_a = this.value) === null || _a === void 0 ? void 0 :
+            } }))), !!this.maxLength && this.maxLength > 0 && (h("ix-typography", { key: 'baa09803b87cd3efce3cce29cb735b5d0a290832', class: "bottom-text", slot: "bottom-right", color: "soft" }, (_a = this.value) === null || _a === void 0 ? void 0 :
             _a.length, "/", this.maxLength)))));
     }
     static get formAssociated() { return true; }

package/dist/esm/ix-input.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-input.entry.js","mappings":"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","names":[],"sources":["src/components/input/input.scss?tag=ix-input&encapsulation=shadow","src/components/input/input.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 'components/form/input';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/validation/form-component';\n@import './input.mixins.scss';\n\n@include input-field;\n\n:host {\n .password-eye {\n margin-left: 0.125rem;\n color: red;\n\n &.eye-hidden {\n display: none;\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 { iconEye, iconEyeCancelled } from '@siemens/ix-icons/icons';\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Method,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport { A11yAttributes } from '../utils/a11y';\nimport {\n HookValidationLifecycle,\n IxInputFieldComponent,\n ValidationResults,\n} from '../utils/input';\nimport { MakeRef, makeRef } from '../utils/make-ref';\nimport { InputElement, SlotEnd, SlotStart } from './input.fc';\nimport {\n adjustPaddingForStartAndEnd,\n checkAllowedKeys,\n getAriaAttributesForInput,\n mapValidationResult,\n onInputBlur,\n} from './input.util';\n\nlet inputIds = 0;\n\n/\n @since 2.6.0\n * @form-ready 2.6.0\n /\n@Component({\n tag: 'ix-input',\n styleUrl: 'input.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class Input implements IxInputFieldComponent<string> {\n @Element() hostElement!: HTMLIxInputElement;\n @AttachInternals() formInternals!: ElementInternals;\n\n /\n The type of the text field. Possible values are 'text', 'email', or 'password'.\n /\n @Prop() type: 'text' \| 'email' \| 'password' \| 'tel' \| 'url' = 'text';\n\n /\n The name of the text field.\n /\n @Prop({ reflect: true }) name?: string;\n\n /\n The placeholder text for the text field.\n /\n @Prop({ reflect: true }) placeholder?: string;\n\n /\n The value of the text field.\n /\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n /\n Specifies whether the text field is required.\n /\n @Prop({ reflect: true }) required: boolean = false;\n\n /\n Specifies whether the text field is disabled.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n Specifies whether the text field is readonly.\n /\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /\n The helper text for the text field.\n /\n @Prop() helperText?: string;\n\n /\n The info text for the text field.\n /\n @Prop() infoText?: string;\n\n /\n Specifies whether to show the text as a tooltip.\n /\n @Prop() showTextAsTooltip?: boolean;\n\n /\n The valid text for the text field.\n /\n @Prop() validText?: string;\n\n /\n The warning text for the text field.\n /\n @Prop() warningText?: string;\n\n /\n The label for the text field.\n /\n @Prop({ reflect: true }) label?: string;\n\n /\n The error text for the text field.\n /\n @Prop() invalidText?: string;\n\n /\n The pattern for the text field.\n /\n @Prop() pattern?: string;\n\n /\n The maximum length of the text field.\n /\n @Prop() maxLength?: number;\n\n /\n The minimum length of the text field.\n /\n @Prop() minLength?: number;\n\n /\n The allowed characters pattern for the text field.\n /\n @Prop() allowedCharactersPattern?: string;\n\n /\n Event emitted when the value of the text field changes.\n /\n @Event() valueChange!: EventEmitter<string>;\n\n /\n Event emitted when the validity state of the text field changes.\n /\n @Event() validityStateChange!: EventEmitter<ValidityState>;\n\n /\n Event emitted when the text field loses focus.\n /\n @Event() ixBlur!: EventEmitter<void>;\n\n @State() isInvalid = false;\n @State() isValid = false;\n @State() isInfo = false;\n @State() isWarning = false;\n @State() isInvalidByRequired = false;\n\n @State() inputType = 'text';\n\n private readonly inputRef = makeRef<HTMLInputElement>();\n private readonly slotEndRef = makeRef<HTMLDivElement>();\n private readonly slotStartRef = makeRef<HTMLDivElement>();\n\n private readonly inputId = `input-${inputIds++}`;\n\n @HookValidationLifecycle()\n updateClassMappings(result: ValidationResults) {\n mapValidationResult(this, result);\n }\n\n @Watch('type')\n updateInputType() {\n this.inputType = this.type;\n }\n\n componentWillLoad() {\n this.updateFormInternalValue(this.value);\n this.inputType = this.type;\n }\n\n componentDidRender() {\n this.updatePaddings();\n }\n\n private updatePaddings() {\n adjustPaddingForStartAndEnd(\n this.slotStartRef.current,\n this.slotEndRef.current,\n this.inputRef.current\n );\n }\n\n updateFormInternalValue(value: string) {\n this.formInternals.setFormValue(value);\n this.value = value;\n }\n\n /* @internal /\n @Method()\n async getAssociatedFormElement(): Promise<HTMLFormElement \| null> {\n return this.formInternals.form;\n }\n\n /* @internal /\n @Method()\n hasValidValue(): Promise<boolean> {\n return Promise.resolve(!!this.value);\n }\n\n /\n Returns the native input element used in the text field.\n /\n @Method()\n getNativeInputElement() {\n return this.inputRef.waitForCurrent();\n }\n\n /\n Focuses the input field\n */\n @Method()\n async focusInput(): Promise<void> {\n return (await this.getNativeInputElement()).focus();\n }\n\n render() {\n const inputAria: A11yAttributes = getAriaAttributesForInput(this);\n return (\n <Host\n class={{\n disabled: this.disabled,\n readonly: this.readonly,\n }}\n >\n <ix-field-wrapper\n htmlForLabel={this.inputId}\n required={this.required}\n label={this.label}\n helperText={this.helperText}\n invalidText={this.invalidText}\n infoText={this.infoText}\n warningText={this.warningText}\n validText={this.validText}\n showTextAsTooltip={this.showTextAsTooltip}\n isInvalid={this.isInvalid}\n isValid={this.isValid}\n isInfo={this.isInfo}\n isWarning={this.isWarning}\n controlRef={this.inputRef as unknown as MakeRef<HTMLElement>}\n >\n <div class=\"input-wrapper\">\n <SlotStart\n slotStartRef={this.slotStartRef}\n onSlotChange={() => this.updatePaddings()}\n ></SlotStart>\n <InputElement\n id={this.inputId}\n readonly={this.readonly}\n disabled={this.disabled}\n maxLength={this.maxLength}\n minLength={this.minLength}\n pattern={this.pattern}\n type={this.inputType}\n isInvalid={this.isInvalid}\n required={this.required}\n value={this.value}\n placeholder={this.placeholder}\n inputRef={this.inputRef}\n onKeyPress={(event) => checkAllowedKeys(this, event)}\n valueChange={(value) => this.valueChange.emit(value)}\n updateFormInternalValue={(value) =>\n this.updateFormInternalValue(value)\n }\n onBlur={() => onInputBlur(this, this.inputRef.current)}\n ariaAttributes={inputAria}\n ></InputElement>\n <SlotEnd\n slotEndRef={this.slotEndRef}\n onSlotChange={() => this.updatePaddings()}\n >\n <ix-icon-button\n color=\"color-weak-text\"\n class={{\n 'password-eye': true,\n 'eye-hidden': this.type !== 'password',\n }}\n ghost\n icon={\n this.inputType === 'password' ? iconEye : iconEyeCancelled\n }\n onClick={() => {\n if (this.inputType === 'password') {\n this.inputType = 'text';\n return;\n }\n\n this.inputType = 'password';\n }}\n ></ix-icon-button>\n </SlotEnd>\n </div>\n {!!this.maxLength && this.maxLength > 0 && (\n <ix-typography class=\"bottom-text\" slot=\"bottom-right\" color=\"soft\">\n {this.value?.length}/{this.maxLength}\n </ix-typography>\n )}\n </ix-field-wrapper>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-input.entry.js","mappings":"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","names":[],"sources":["src/components/input/input.scss?tag=ix-input&encapsulation=shadow","src/components/input/input.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 'components/form/input';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/validation/form-component';\n@import './input.mixins.scss';\n\n@include input-field;\n\n:host {\n .password-eye {\n margin-left: 0.125rem;\n color: red;\n\n &.eye-hidden {\n display: none;\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 { iconEye, iconEyeCancelled } from '@siemens/ix-icons/icons';\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Method,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport { A11yAttributes } from '../utils/a11y';\nimport {\n HookValidationLifecycle,\n IxInputFieldComponent,\n ValidationResults,\n} from '../utils/input';\nimport { makeRef } from '../utils/make-ref';\nimport { InputElement, SlotEnd, SlotStart } from './input.fc';\nimport {\n adjustPaddingForStartAndEnd,\n checkAllowedKeys,\n getAriaAttributesForInput,\n mapValidationResult,\n onInputBlur,\n} from './input.util';\n\nlet inputIds = 0;\n\n/\n @since 2.6.0\n * @form-ready 2.6.0\n * @slot start - Element will be displayed at the start of the input\n * @slot end - Element will be displayed at the end of the input\n /\n@Component({\n tag: 'ix-input',\n styleUrl: 'input.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class Input implements IxInputFieldComponent<string> {\n @Element() hostElement!: HTMLIxInputElement;\n @AttachInternals() formInternals!: ElementInternals;\n\n /\n The type of the text field. Possible values are 'text', 'email', or 'password'.\n /\n @Prop() type: 'text' \| 'email' \| 'password' \| 'tel' \| 'url' = 'text';\n\n /\n The name of the text field.\n /\n @Prop({ reflect: true }) name?: string;\n\n /\n The placeholder text for the text field.\n /\n @Prop({ reflect: true }) placeholder?: string;\n\n /\n The value of the text field.\n /\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n /\n Specifies whether the text field is required.\n /\n @Prop({ reflect: true }) required: boolean = false;\n\n /\n Specifies whether the text field is disabled.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n Specifies whether the text field is readonly.\n /\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /\n The helper text for the text field.\n /\n @Prop() helperText?: string;\n\n /\n The info text for the text field.\n /\n @Prop() infoText?: string;\n\n /\n Specifies whether to show the text as a tooltip.\n /\n @Prop() showTextAsTooltip?: boolean;\n\n /\n The valid text for the text field.\n /\n @Prop() validText?: string;\n\n /\n The warning text for the text field.\n /\n @Prop() warningText?: string;\n\n /\n The label for the text field.\n /\n @Prop({ reflect: true }) label?: string;\n\n /\n The error text for the text field.\n /\n @Prop() invalidText?: string;\n\n /\n The pattern for the text field.\n /\n @Prop() pattern?: string;\n\n /\n The maximum length of the text field.\n /\n @Prop() maxLength?: number;\n\n /\n The minimum length of the text field.\n /\n @Prop() minLength?: number;\n\n /\n The allowed characters pattern for the text field.\n /\n @Prop() allowedCharactersPattern?: string;\n\n /\n Event emitted when the value of the text field changes.\n /\n @Event() valueChange!: EventEmitter<string>;\n\n /\n Event emitted when the validity state of the text field changes.\n /\n @Event() validityStateChange!: EventEmitter<ValidityState>;\n\n /\n Event emitted when the text field loses focus.\n /\n @Event() ixBlur!: EventEmitter<void>;\n\n @State() isInvalid = false;\n @State() isValid = false;\n @State() isInfo = false;\n @State() isWarning = false;\n @State() isInvalidByRequired = false;\n\n @State() inputType = 'text';\n\n private readonly inputRef = makeRef<HTMLInputElement>();\n private readonly slotEndRef = makeRef<HTMLDivElement>();\n private readonly slotStartRef = makeRef<HTMLDivElement>();\n\n private readonly inputId = `input-${inputIds++}`;\n\n @HookValidationLifecycle()\n updateClassMappings(result: ValidationResults) {\n mapValidationResult(this, result);\n }\n\n @Watch('type')\n updateInputType() {\n this.inputType = this.type;\n }\n\n componentWillLoad() {\n this.updateFormInternalValue(this.value);\n this.inputType = this.type;\n }\n\n componentDidRender() {\n this.updatePaddings();\n }\n\n private updatePaddings() {\n adjustPaddingForStartAndEnd(\n this.slotStartRef.current,\n this.slotEndRef.current,\n this.inputRef.current\n );\n }\n\n updateFormInternalValue(value: string) {\n this.formInternals.setFormValue(value);\n this.value = value;\n }\n\n /* @internal /\n @Method()\n async getAssociatedFormElement(): Promise<HTMLFormElement \| null> {\n return this.formInternals.form;\n }\n\n /* @internal /\n @Method()\n hasValidValue(): Promise<boolean> {\n return Promise.resolve(!!this.value);\n }\n\n /\n Returns the native input element used in the text field.\n /\n @Method()\n getNativeInputElement() {\n return this.inputRef.waitForCurrent();\n }\n\n /\n Focuses the input field\n */\n @Method()\n async focusInput(): Promise<void> {\n return (await this.getNativeInputElement()).focus();\n }\n\n render() {\n const inputAria: A11yAttributes = getAriaAttributesForInput(this);\n return (\n <Host\n class={{\n disabled: this.disabled,\n readonly: this.readonly,\n }}\n >\n <ix-field-wrapper\n htmlForLabel={this.inputId}\n required={this.required}\n label={this.label}\n helperText={this.helperText}\n invalidText={this.invalidText}\n infoText={this.infoText}\n warningText={this.warningText}\n validText={this.validText}\n showTextAsTooltip={this.showTextAsTooltip}\n isInvalid={this.isInvalid}\n isValid={this.isValid}\n isInfo={this.isInfo}\n isWarning={this.isWarning}\n controlRef={this.inputRef}\n >\n <div class=\"input-wrapper\">\n <SlotStart\n slotStartRef={this.slotStartRef}\n onSlotChange={() => this.updatePaddings()}\n ></SlotStart>\n <InputElement\n id={this.inputId}\n readonly={this.readonly}\n disabled={this.disabled}\n maxLength={this.maxLength}\n minLength={this.minLength}\n pattern={this.pattern}\n type={this.inputType}\n isInvalid={this.isInvalid}\n required={this.required}\n value={this.value}\n placeholder={this.placeholder}\n inputRef={this.inputRef}\n onKeyPress={(event) => checkAllowedKeys(this, event)}\n valueChange={(value) => this.valueChange.emit(value)}\n updateFormInternalValue={(value) =>\n this.updateFormInternalValue(value)\n }\n onBlur={() => onInputBlur(this, this.inputRef.current)}\n ariaAttributes={inputAria}\n ></InputElement>\n <SlotEnd\n slotEndRef={this.slotEndRef}\n onSlotChange={() => this.updatePaddings()}\n >\n <ix-icon-button\n color=\"color-weak-text\"\n class={{\n 'password-eye': true,\n 'eye-hidden': this.type !== 'password',\n }}\n ghost\n icon={\n this.inputType === 'password' ? iconEye : iconEyeCancelled\n }\n onClick={() => {\n if (this.inputType === 'password') {\n this.inputType = 'text';\n return;\n }\n\n this.inputType = 'password';\n }}\n ></ix-icon-button>\n </SlotEnd>\n </div>\n {!!this.maxLength && this.maxLength > 0 && (\n <ix-typography class=\"bottom-text\" slot=\"bottom-right\" color=\"soft\">\n {this.value?.length}/{this.maxLength}\n </ix-typography>\n )}\n </ix-field-wrapper>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/ix-menu.entry.js CHANGED Viewed

@@ -1,13 +1,13 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-97874de0.js';
 import { a as anime } from './anime.es-a5520566.js';
-import { s as showAppSwitch } from './index-60d17930.js';
+import { s as showAppSwitch } from './index-7421df0c.js';
 import { a as useContextConsumer, A as ApplicationLayoutContext } from './context-42311cff.js';
 import { a as applicationLayoutService } from './service-c7fc628b.js';
 import { m as menuController } from './menu-service-f974814b.js';
 import { a as convertToRemString } from './rwd.util-d8e00a88.js';
 import { t as themeSwitcher } from './theme-switcher-5fcf712d.js';
 import './animation-4a73b1c3.js';
-import './modal-101eef04.js';
+import './modal-4b3f8800.js';
 import './typed-event-ad6484c5.js';
 import './breakpoints-d5c2f627.js';

package/dist/esm/ix-number-input.entry.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-97874de0.js';
-import { g as iconMinus, h as iconPlus } from './index-ad2af369.js';
+import { g as iconMinus, h as iconPlus } from './index-2b76ea55.js';
 import { H as HookValidationLifecycle } from './validation-45aa490c.js';
 import { m as makeRef } from './make-ref-4b76e9b5.js';
-import { m as mapValidationResult, a as adjustPaddingForStartAndEnd, b as SlotStart, I as InputElement, c as checkAllowedKeys, o as onInputBlur, S as SlotEnd, d as checkInternalValidity } from './input.util-715860e3.js';
+import { m as mapValidationResult, a as adjustPaddingForStartAndEnd, b as SlotStart, I as InputElement, c as checkAllowedKeys, o as onInputBlur, S as SlotEnd, d as checkInternalValidity } from './input.util-c855b2ed.js';
 import './a11y-b10c12e0.js';
 import './rwd.util-d8e00a88.js';
 import './anime.es-a5520566.js';
@@ -108,16 +108,16 @@ const NumberInput = class {
     }
     render() {
         const showStepperButtons = this.showStepperButtons && (this.disabled || this.readonly) === false;
-        return (h(Host, { key: '257156c1c5ec77ef4426b3a8818941f0b28062c6', class: {
+        return (h(Host, { key: 'd44d46cba0a85db489b707e79978d7835cd7f6db', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, h("ix-field-wrapper", { key: 'ab953fa1af86d3f0415b709fff3871e17f00453a', id: this.numberInputId, required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: '82ab33e39746a47d1c387f953b3862bd47547a4b', class: {
+            } }, h("ix-field-wrapper", { key: '258921ecc2d462c97026ba1b0bfc783c277cef41', id: this.numberInputId, required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: '88f56233a0fff77353f8e5710e7503e61877a391', class: {
                 'input-wrapper': true,
                 'show-stepper-buttons': !!this.showStepperButtons,
-            } }, h(SlotStart, { key: '252e87d3380c33806b2a1af84b98d672e2f0980f', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h(InputElement, { key: 'd2cbab2e83934c970e9b8fce0390d5ad01234646', id: this.numberInputId, readonly: this.readonly, disabled: this.disabled, min: this.min, max: this.max, pattern: this.pattern, type: 'number', isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, inputRef: this.inputRef, onKeyPress: (event) => checkAllowedKeys(this, event), valueChange: (value) => this.valueChange.emit(Number(value)), updateFormInternalValue: (value) => this.updateFormInternalValue(Number(value)), onBlur: () => onInputBlur(this, this.inputRef.current) }), h(SlotEnd, { key: '9a9a6de11186692b3707d85315a124256124ad2f', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("div", { key: '97a24bdb25e6a6818038f662eb14a94e4e79d7a0', class: {
+            } }, h(SlotStart, { key: 'c74d37bb1153f84bd326b4c84308d0ef87c2af53', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h(InputElement, { key: 'e538819db34d4e7b3a345f992f79cd7d528b3fae', id: this.numberInputId, readonly: this.readonly, disabled: this.disabled, min: this.min, max: this.max, pattern: this.pattern, type: 'number', isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, inputRef: this.inputRef, onKeyPress: (event) => checkAllowedKeys(this, event), valueChange: (value) => this.valueChange.emit(Number(value)), updateFormInternalValue: (value) => this.updateFormInternalValue(Number(value)), onBlur: () => onInputBlur(this, this.inputRef.current) }), h(SlotEnd, { key: '91bff359e6340bace9a9669da1ee056da40bb977', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("div", { key: '9f002e7ccfb5f77e76d4e1179af333ca20f99cd2', class: {
                 'number-stepper-container': true,
                 'container-hidden': !showStepperButtons,
-            } }, h("ix-icon-button", { key: '89d6c0aea01ea12ad5342cf825f9f43748e5f47a', ghost: true, icon: iconMinus, size: "16", class: "number-stepper-button step-minus", onClick: () => {
+            } }, h("ix-icon-button", { key: '6fa92f4a99603300ba0815bbab96f5c3c01f35b6', ghost: true, icon: iconMinus, size: "16", class: "number-stepper-button step-minus", onClick: () => {
                 if (!this.inputRef.current) {
                     return;
                 }
@@ -125,7 +125,7 @@ const NumberInput = class {
                 checkInternalValidity(this, this.inputRef.current);
                 this.updateFormInternalValue(Number(this.inputRef.current.value));
                 this.valueChange.emit(this.value);
-            } }), h("ix-icon-button", { key: '7a913f64e5abf65be33268df93eae3635452b51b', ghost: true, icon: iconPlus, size: "16", class: "number-stepper-button step-plus", onClick: () => {
+            } }), h("ix-icon-button", { key: '514c2c7164156b86b09a6aa2c999e00128e4527e', ghost: true, icon: iconPlus, size: "16", class: "number-stepper-button step-plus", onClick: () => {
                 if (!this.inputRef.current) {
                     return;
                 }

package/dist/esm/ix-number-input.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-number-input.entry.js","mappings":"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","names":[],"sources":["src/components/input/number-input.scss?tag=ix-number-input&encapsulation=shadow","src/components/input/number-input.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 './input.mixins.scss';\n\n@include input-field;\n\n:host {\n .input-wrapper.show-stepper-buttons {\n input[type='number'] {\n min-width: 6rem;\n }\n }\n\n .number-stepper-container {\n display: flex;\n position: relative;\n flex-direction: row;\n flex-wrap: nowrap;\n margin-right: 0.25rem;\n\n &.container-hidden {\n display: none;\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 { iconMinus, iconPlus } from '@siemens/ix-icons/icons';\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Method,\n Prop,\n State,\n h,\n} from '@stencil/core';\nimport {\n HookValidationLifecycle,\n IxInputFieldComponent,\n ValidationResults,\n} from '../utils/input';\nimport { MakeRef, makeRef } from '../utils/make-ref';\nimport { InputElement, SlotEnd, SlotStart } from './input.fc';\nimport {\n adjustPaddingForStartAndEnd,\n checkAllowedKeys,\n checkInternalValidity,\n mapValidationResult,\n onInputBlur,\n} from './input.util';\n\nlet numberInputIds = 0;\n\n/\n @since 2.6.0\n * @form-ready 2.6.0\n /\n@Component({\n tag: 'ix-number-input',\n styleUrl: 'number-input.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NumberInput implements IxInputFieldComponent<number> {\n @Element() hostElement!: HTMLIxNumberInputElement;\n @AttachInternals() formInternals!: ElementInternals;\n\n /\n name of the input element\n /\n @Prop({ reflect: true }) name?: string;\n\n /\n placeholder of the input element\n /\n @Prop({ reflect: true }) placeholder?: string;\n\n /\n The value of the input field\n /\n @Prop({ reflect: true, mutable: true }) value: number = 0;\n\n /\n Indicates if the field is required\n /\n @Prop({ reflect: true }) required: boolean = false;\n\n /\n Disables the input field\n /\n @Prop() disabled: boolean = false;\n\n /\n Indicates if the field is read-only\n /\n @Prop() readonly: boolean = false;\n\n /\n The helper text for the input field\n /\n @Prop() helperText?: string;\n\n /\n The info text for the input field\n /\n @Prop() infoText?: string;\n\n /\n Indicates if the text should be shown as a tooltip\n /\n @Prop() showTextAsTooltip?: boolean;\n\n /\n The valid text for the input field\n /\n @Prop() validText?: string;\n\n /\n The warning text for the input field\n /\n @Prop() warningText?: string;\n\n /\n The label for the input field\n /\n @Prop({ reflect: true }) label?: string;\n\n /\n The error text for the input field\n /\n @Prop() invalidText?: string;\n\n /\n The pattern for the input field\n /\n @Prop() pattern?: string;\n\n /\n The minimum value for the input field\n /\n @Prop() min?: string \| number;\n\n /\n The maximum value for the input field\n /\n @Prop() max?: string \| number;\n\n /\n The allowed characters pattern for the input field\n /\n @Prop() allowedCharactersPattern?: string;\n\n /\n Indicates if the stepper buttons should be shown\n /\n @Prop() showStepperButtons?: boolean;\n\n /\n Event emitted when the value of the input field changes\n /\n @Event() valueChange!: EventEmitter<number>;\n\n /\n Event emitted when the validity state of the input field changes\n /\n @Event() validityStateChange!: EventEmitter<ValidityState>;\n\n /\n Event emitted when the input field loses focus\n /\n @Event() ixBlur!: EventEmitter<void>;\n\n @State() isInvalid = false;\n @State() isValid = false;\n @State() isInfo = false;\n @State() isWarning = false;\n @State() isInvalidByRequired = false;\n\n private readonly inputRef = makeRef<HTMLInputElement>();\n private readonly slotEndRef = makeRef<HTMLDivElement>();\n private readonly slotStartRef = makeRef<HTMLDivElement>();\n private readonly numberInputId = `number-input-${numberInputIds++}`;\n\n @HookValidationLifecycle()\n updateClassMappings(result: ValidationResults) {\n mapValidationResult(this, result);\n }\n\n componentWillLoad() {\n this.updateFormInternalValue(this.value);\n }\n\n componentDidRender() {\n this.updatePaddings();\n }\n\n private updatePaddings() {\n adjustPaddingForStartAndEnd(\n this.slotStartRef.current,\n this.slotEndRef.current,\n this.inputRef.current\n );\n }\n\n updateFormInternalValue(value: number) {\n this.formInternals.setFormValue(value.toString());\n this.value = value;\n }\n\n /* @internal /\n @Method()\n async getAssociatedFormElement(): Promise<HTMLFormElement \| null> {\n return this.formInternals.form;\n }\n\n /* @internal /\n @Method()\n hasValidValue(): Promise<boolean> {\n return Promise.resolve(!!this.value);\n }\n\n /\n Returns the native input element used under the hood\n /\n @Method()\n getNativeInputElement(): Promise<HTMLInputElement> {\n return this.inputRef.waitForCurrent();\n }\n\n /\n Focuses the input field\n */\n @Method()\n async focusInput(): Promise<void> {\n return (await this.getNativeInputElement()).focus();\n }\n\n render() {\n const showStepperButtons =\n this.showStepperButtons && (this.disabled \|\| this.readonly) === false;\n\n return (\n <Host\n class={{\n disabled: this.disabled,\n readonly: this.readonly,\n }}\n >\n <ix-field-wrapper\n id={this.numberInputId}\n required={this.required}\n label={this.label}\n helperText={this.helperText}\n invalidText={this.invalidText}\n infoText={this.infoText}\n warningText={this.warningText}\n validText={this.validText}\n showTextAsTooltip={this.showTextAsTooltip}\n isInvalid={this.isInvalid}\n isValid={this.isValid}\n isInfo={this.isInfo}\n isWarning={this.isWarning}\n controlRef={this.inputRef as unknown as MakeRef<HTMLElement>}\n >\n <div\n class={{\n 'input-wrapper': true,\n 'show-stepper-buttons': !!this.showStepperButtons,\n }}\n >\n <SlotStart\n slotStartRef={this.slotStartRef}\n onSlotChange={() => this.updatePaddings()}\n ></SlotStart>\n <InputElement\n id={this.numberInputId}\n readonly={this.readonly}\n disabled={this.disabled}\n min={this.min}\n max={this.max}\n pattern={this.pattern}\n type={'number'}\n isInvalid={this.isInvalid}\n required={this.required}\n value={this.value}\n placeholder={this.placeholder}\n inputRef={this.inputRef}\n onKeyPress={(event) => checkAllowedKeys(this, event)}\n valueChange={(value) => this.valueChange.emit(Number(value))}\n updateFormInternalValue={(value) =>\n this.updateFormInternalValue(Number(value))\n }\n onBlur={() => onInputBlur(this, this.inputRef.current)}\n ></InputElement>\n <SlotEnd\n slotEndRef={this.slotEndRef}\n onSlotChange={() => this.updatePaddings()}\n >\n <div\n class={{\n 'number-stepper-container': true,\n 'container-hidden': !showStepperButtons,\n }}\n >\n <ix-icon-button\n ghost\n icon={iconMinus}\n size=\"16\"\n class=\"number-stepper-button step-minus\"\n onClick={() => {\n if (!this.inputRef.current) {\n return;\n }\n this.inputRef.current.stepDown();\n checkInternalValidity(this, this.inputRef.current);\n this.updateFormInternalValue(\n Number(this.inputRef.current.value)\n );\n this.valueChange.emit(this.value);\n }}\n ></ix-icon-button>\n <ix-icon-button\n ghost\n icon={iconPlus}\n size=\"16\"\n class=\"number-stepper-button step-plus\"\n onClick={() => {\n if (!this.inputRef.current) {\n return;\n }\n this.inputRef.current.stepUp();\n checkInternalValidity(this, this.inputRef.current);\n this.updateFormInternalValue(\n Number(this.inputRef.current.value)\n );\n this.valueChange.emit(this.value);\n }}\n ></ix-icon-button>\n </div>\n </SlotEnd>\n </div>\n </ix-field-wrapper>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-number-input.entry.js","mappings":"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","names":[],"sources":["src/components/input/number-input.scss?tag=ix-number-input&encapsulation=shadow","src/components/input/number-input.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 './input.mixins.scss';\n\n@include input-field;\n\n:host {\n .input-wrapper.show-stepper-buttons {\n input[type='number'] {\n min-width: 6rem;\n }\n }\n\n .number-stepper-container {\n display: flex;\n position: relative;\n flex-direction: row;\n flex-wrap: nowrap;\n margin-right: 0.25rem;\n\n &.container-hidden {\n display: none;\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 { iconMinus, iconPlus } from '@siemens/ix-icons/icons';\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Method,\n Prop,\n State,\n h,\n} from '@stencil/core';\nimport {\n HookValidationLifecycle,\n IxInputFieldComponent,\n ValidationResults,\n} from '../utils/input';\nimport { makeRef } from '../utils/make-ref';\nimport { InputElement, SlotEnd, SlotStart } from './input.fc';\nimport {\n adjustPaddingForStartAndEnd,\n checkAllowedKeys,\n checkInternalValidity,\n mapValidationResult,\n onInputBlur,\n} from './input.util';\n\nlet numberInputIds = 0;\n\n/\n @since 2.6.0\n * @form-ready 2.6.0\n * @slot start - Element will be displayed at the start of the input\n * @slot end - Element will be displayed at the end of the input\n /\n@Component({\n tag: 'ix-number-input',\n styleUrl: 'number-input.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NumberInput implements IxInputFieldComponent<number> {\n @Element() hostElement!: HTMLIxNumberInputElement;\n @AttachInternals() formInternals!: ElementInternals;\n\n /\n name of the input element\n /\n @Prop({ reflect: true }) name?: string;\n\n /\n placeholder of the input element\n /\n @Prop({ reflect: true }) placeholder?: string;\n\n /\n The value of the input field\n /\n @Prop({ reflect: true, mutable: true }) value: number = 0;\n\n /\n Indicates if the field is required\n /\n @Prop({ reflect: true }) required: boolean = false;\n\n /\n Disables the input field\n /\n @Prop() disabled: boolean = false;\n\n /\n Indicates if the field is read-only\n /\n @Prop() readonly: boolean = false;\n\n /\n The helper text for the input field\n /\n @Prop() helperText?: string;\n\n /\n The info text for the input field\n /\n @Prop() infoText?: string;\n\n /\n Indicates if the text should be shown as a tooltip\n /\n @Prop() showTextAsTooltip?: boolean;\n\n /\n The valid text for the input field\n /\n @Prop() validText?: string;\n\n /\n The warning text for the input field\n /\n @Prop() warningText?: string;\n\n /\n The label for the input field\n /\n @Prop({ reflect: true }) label?: string;\n\n /\n The error text for the input field\n /\n @Prop() invalidText?: string;\n\n /\n The pattern for the input field\n /\n @Prop() pattern?: string;\n\n /\n The minimum value for the input field\n /\n @Prop() min?: string \| number;\n\n /\n The maximum value for the input field\n /\n @Prop() max?: string \| number;\n\n /\n The allowed characters pattern for the input field\n /\n @Prop() allowedCharactersPattern?: string;\n\n /\n Indicates if the stepper buttons should be shown\n /\n @Prop() showStepperButtons?: boolean;\n\n /\n Event emitted when the value of the input field changes\n /\n @Event() valueChange!: EventEmitter<number>;\n\n /\n Event emitted when the validity state of the input field changes\n /\n @Event() validityStateChange!: EventEmitter<ValidityState>;\n\n /\n Event emitted when the input field loses focus\n /\n @Event() ixBlur!: EventEmitter<void>;\n\n @State() isInvalid = false;\n @State() isValid = false;\n @State() isInfo = false;\n @State() isWarning = false;\n @State() isInvalidByRequired = false;\n\n private readonly inputRef = makeRef<HTMLInputElement>();\n private readonly slotEndRef = makeRef<HTMLDivElement>();\n private readonly slotStartRef = makeRef<HTMLDivElement>();\n private readonly numberInputId = `number-input-${numberInputIds++}`;\n\n @HookValidationLifecycle()\n updateClassMappings(result: ValidationResults) {\n mapValidationResult(this, result);\n }\n\n componentWillLoad() {\n this.updateFormInternalValue(this.value);\n }\n\n componentDidRender() {\n this.updatePaddings();\n }\n\n private updatePaddings() {\n adjustPaddingForStartAndEnd(\n this.slotStartRef.current,\n this.slotEndRef.current,\n this.inputRef.current\n );\n }\n\n updateFormInternalValue(value: number) {\n this.formInternals.setFormValue(value.toString());\n this.value = value;\n }\n\n /* @internal /\n @Method()\n async getAssociatedFormElement(): Promise<HTMLFormElement \| null> {\n return this.formInternals.form;\n }\n\n /* @internal /\n @Method()\n hasValidValue(): Promise<boolean> {\n return Promise.resolve(!!this.value);\n }\n\n /\n Returns the native input element used under the hood\n /\n @Method()\n getNativeInputElement(): Promise<HTMLInputElement> {\n return this.inputRef.waitForCurrent();\n }\n\n /\n Focuses the input field\n */\n @Method()\n async focusInput(): Promise<void> {\n return (await this.getNativeInputElement()).focus();\n }\n\n render() {\n const showStepperButtons =\n this.showStepperButtons && (this.disabled \|\| this.readonly) === false;\n\n return (\n <Host\n class={{\n disabled: this.disabled,\n readonly: this.readonly,\n }}\n >\n <ix-field-wrapper\n id={this.numberInputId}\n required={this.required}\n label={this.label}\n helperText={this.helperText}\n invalidText={this.invalidText}\n infoText={this.infoText}\n warningText={this.warningText}\n validText={this.validText}\n showTextAsTooltip={this.showTextAsTooltip}\n isInvalid={this.isInvalid}\n isValid={this.isValid}\n isInfo={this.isInfo}\n isWarning={this.isWarning}\n controlRef={this.inputRef}\n >\n <div\n class={{\n 'input-wrapper': true,\n 'show-stepper-buttons': !!this.showStepperButtons,\n }}\n >\n <SlotStart\n slotStartRef={this.slotStartRef}\n onSlotChange={() => this.updatePaddings()}\n ></SlotStart>\n <InputElement\n id={this.numberInputId}\n readonly={this.readonly}\n disabled={this.disabled}\n min={this.min}\n max={this.max}\n pattern={this.pattern}\n type={'number'}\n isInvalid={this.isInvalid}\n required={this.required}\n value={this.value}\n placeholder={this.placeholder}\n inputRef={this.inputRef}\n onKeyPress={(event) => checkAllowedKeys(this, event)}\n valueChange={(value) => this.valueChange.emit(Number(value))}\n updateFormInternalValue={(value) =>\n this.updateFormInternalValue(Number(value))\n }\n onBlur={() => onInputBlur(this, this.inputRef.current)}\n ></InputElement>\n <SlotEnd\n slotEndRef={this.slotEndRef}\n onSlotChange={() => this.updatePaddings()}\n >\n <div\n class={{\n 'number-stepper-container': true,\n 'container-hidden': !showStepperButtons,\n }}\n >\n <ix-icon-button\n ghost\n icon={iconMinus}\n size=\"16\"\n class=\"number-stepper-button step-minus\"\n onClick={() => {\n if (!this.inputRef.current) {\n return;\n }\n this.inputRef.current.stepDown();\n checkInternalValidity(this, this.inputRef.current);\n this.updateFormInternalValue(\n Number(this.inputRef.current.value)\n );\n this.valueChange.emit(this.value);\n }}\n ></ix-icon-button>\n <ix-icon-button\n ghost\n icon={iconPlus}\n size=\"16\"\n class=\"number-stepper-button step-plus\"\n onClick={() => {\n if (!this.inputRef.current) {\n return;\n }\n this.inputRef.current.stepUp();\n checkInternalValidity(this, this.inputRef.current);\n this.updateFormInternalValue(\n Number(this.inputRef.current.value)\n );\n this.valueChange.emit(this.value);\n }}\n ></ix-icon-button>\n </div>\n </SlotEnd>\n </div>\n </ix-field-wrapper>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/ix-select.entry.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-97874de0.js';
+import { a as a11yBoolean } from './a11y-b10c12e0.js';
 import { A as ArrowFocusController } from './focus-664aef4f.js';
-import { O as OnListener } from './listener-18b29507.js';
-import { c as createMutationObserver } from './mutation-observer-db8757e6.js';
 import { H as HookValidationLifecycle } from './validation-45aa490c.js';
+import { O as OnListener } from './listener-18b29507.js';
 import { m as makeRef } from './make-ref-4b76e9b5.js';
-import { a as a11yBoolean } from './a11y-b10c12e0.js';
+import { c as createMutationObserver } from './mutation-observer-db8757e6.js';
 import './disposable-event-listener-ff2cb862.js';
 const selectCss = ":host{display:inline-block;position:relative;min-height:2rem;height:auto;border-radius:var(--theme-input--border-radius)}: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 .d-none{display:none}:host .select{position:relative;display:flex;align-items:center;width:100%;background-color:var(--theme-input--background);border:var(--theme-input--border-thickness) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);padding:0 0 0 0.5rem;box-shadow:var(--theme-inset-shadow-1) !important}:host .select:not(.disabled):not(:disabled){cursor:pointer}:host .select:not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover)}:host .select:focus-within{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline:1px solid #119fff;outline-offset:var(--theme-input--focus--outline-offset)}:host .select.readonly,:host .select.disabled{box-shadow:none !important;border:none;border-radius:0;cursor:pointer}:host .select.readonly,:host .select.readonly:hover,:host .select.readonly:active,:host .select.disabled,:host .select.disabled:hover,:host .select.disabled:active{background-color:transparent !important}:host .select.readonly:focus,:host .select.readonly:focus-within,:host .select.readonly:focus-visible,:host .select.disabled:focus,:host .select.disabled:focus-within,:host .select.disabled:focus-visible{outline:none}:host .select.readonly input:focus,:host .select.readonly input:focus-visible,:host .select.disabled input:focus,:host .select.disabled input:focus-visible{outline:none}:host .select.disabled{border-bottom:var(--theme-input--border-thickness) solid var(--theme-color-weak-bdr)}:host .select.disabled input{color:var(--theme-color-weak-text)}:host .select.readonly{border-bottom:var(--theme-input--border-thickness) solid var(--theme-color-soft-bdr)}:host .select.readonly input{color:var(--theme-color-std-text)}:host .hidden{display:none !important}:host .trigger{display:flex;align-items:center;flex-grow:1;height:100%}:host .input-container{display:flex;position:relative;align-items:flex-start;width:100%;height:100%}:host .input-container .chips{position:relative;display:flex;align-items:center;flex-wrap:wrap;height:100%;max-height:3.5rem;flex-grow:1;overflow-y:auto}:host .input-container .chips>ix-filter-chip{margin:0.1rem}:host .input-container ix-icon-button{height:1.875rem;width:1.875rem;min-height:1.875rem;min-width:1.875rem}:host .input-container input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);background:transparent;height:1.75rem;width:100%}:host .input-container input,:host .input-container input:hover,:host .input-container input:focus-visible{border:none;outline:none}:host .input-container input::-moz-placeholder{color:var(--theme-input-select-icon--color)}:host .input-container input::placeholder{color:var(--theme-input-select-icon--color)}:host .input-container input.hide-placeholder::-moz-placeholder{opacity:0}:host .input-container input.hide-placeholder::placeholder{opacity:0}:host .dropdown-visible{--ix-icon-button-color:var(--theme-color-dynamic--hover)}:host .add-item{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%}:host .select-list-header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;height:2rem;color:var(--theme-select-list-item-hint--color);margin:0 0.5rem 0 1rem}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) .select{border-color:var(--theme-input--border-color--info)}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) .select:hover{border-color:var(--theme-input--border-color--info--hover) !important}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) .select:active{border-color:var(--theme-input--border-color--info--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) .select{border-color:var(--theme-input--border-color--warning)}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) .select:hover{border-color:var(--theme-input--border-color--warning--hover) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) .select:active{border-color:var(--theme-input--border-color--warning--active) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) .select,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) .select{border-color:var(--theme-input--border-color--invalid);background-color:var(--theme-input--background--invalid);box-shadow:none}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) .select:hover,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) .select:hover{border-color:var(--theme-input--border-color--invalid--hover) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) .select:active,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) .select:active{border-color:var(--theme-input--border-color--invalid--active) !important}";
@@ -44,7 +44,8 @@ const Select = class {
             hostRef.$hostElement$["s-ei"] = this.formInternals;
         }
         this.dropdownWrapperRef = makeRef();
-        this.dropdownAnchor = makeRef();
+        this.dropdownAnchorRef = makeRef();
+        this.inputRef = makeRef();
         this.itemObserver = createMutationObserver(() => {
             if (!this.arrowFocusController) {
                 return;
@@ -126,10 +127,10 @@ const Select = class {
         this.updateSelection();
     }
     watchDropdownShow(show) {
-        if (show) {
-            this.arrowFocusController = new ArrowFocusController(this.visibleNonShadowItems, this.dropdownRef, this.focusControllerCallbackBind);
+        if (show && this.dropdownElement) {
+            this.arrowFocusController = new ArrowFocusController(this.visibleNonShadowItems, this.dropdownElement, this.focusControllerCallbackBind);
             this.arrowFocusController.wrap = !this.editable;
-            this.itemObserver.observe(this.dropdownRef, {
+            this.itemObserver.observe(this.dropdownElement, {
                 childList: true,
                 subtree: true,
             });
@@ -167,7 +168,7 @@ const Select = class {
     }
     focusDropdownItem(index) {
         var _a, _b;
-        this.navigationItem = null;
+        this.navigationItem = undefined;
         if (index < this.visibleNonShadowItems.length) {
             const nestedDropdownItem = (_b = (_a = this.visibleNonShadowItems[index]) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('ix-dropdown-item');
             if (!nestedDropdownItem) {
@@ -191,6 +192,7 @@ const Select = class {
         this.updateSelection();
     }
     emitAddItem(value) {
+        var _a;
         if (value === undefined || value.trim() === '') {
             return false;
         }
@@ -201,7 +203,7 @@ const Select = class {
         const newItem = document.createElement('ix-select-item');
         newItem.value = value;
         newItem.label = value;
-        this.customItemsContainerRef.appendChild(newItem);
+        (_a = this.customItemsContainerElement) === null || _a === void 0 ? void 0 : _a.appendChild(newItem);
         this.clearInput();
         this.itemClick(value);
         return false;
@@ -225,7 +227,7 @@ const Select = class {
         }
     }
     updateSelection() {
-        var _a;
+        var _a, _b;
         let ids = [];
         if (this.value) {
             ids = Array.isArray(this.value) ? [...this.value] : [this.value];
@@ -242,12 +244,12 @@ const Select = class {
         });
         this.selectedLabels = this.selectedItems.map((item) => item.label);
         if (((_a = this.selectedLabels) === null || _a === void 0 ? void 0 : _a.length) && this.isSingleMode) {
-            this.inputValue = this.selectedLabels[0];
+            this.inputValue = (_b = this.selectedLabels[0]) !== null && _b !== void 0 ? _b : '';
         }
         else {
             this.inputValue = '';
         }
-        this.inputRef && (this.inputRef.value = this.inputValue);
+        this.inputElement && (this.inputElement.value = this.inputValue);
     }
     emitValueChange(value) {
         const { defaultPrevented } = this.valueChange.emit(value);
@@ -255,7 +257,7 @@ const Select = class {
             return true;
         }
         if (!value) {
-            this.itemSelectionChange.emit(null);
+            this.itemSelectionChange.emit([]);
         }
         else {
             this.itemSelectionChange.emit(Array.isArray(value) ? value : [value]);
@@ -265,10 +267,10 @@ const Select = class {
     }
     componentDidLoad() {
         var _a;
-        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.addEventListener('input', () => {
+        (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener('input', () => {
             var _a;
             this.dropdownShow = true;
-            this.inputChange.emit((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value);
+            this.inputChange.emit((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value);
         });
     }
     componentWillLoad() {
@@ -293,13 +295,13 @@ const Select = class {
         var _a, _b;
         this.dropdownShow = event.detail;
         if (event.detail) {
-            (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
-            (_b = this.inputRef) === null || _b === void 0 ? void 0 : _b.select();
+            (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus();
+            (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.select();
             this.removeHiddenFromItems();
             this.isDropdownEmpty = this.isEveryDropdownItemHidden;
         }
         else {
-            this.navigationItem = null;
+            this.navigationItem = undefined;
             this.updateSelection();
             this.inputFilterText = '';
         }
@@ -322,19 +324,21 @@ const Select = class {
         if (this.isMultipleMode) {
             return;
         }
-        if (!this.itemExists(this.inputFilterText.trim()) &&
-            !this.itemExists(el === null || el === void 0 ? void 0 : el.label)) {
-            if (this.editable) {
-                const defaultPrevented = this.emitAddItem(this.inputFilterText.trim());
-                if (defaultPrevented) {
-                    return;
-                }
+        const trimmedInput = this.inputFilterText.trim();
+        const itemLabel = el === null || el === void 0 ? void 0 : el.label;
+        if (this.editable &&
+            !this.itemExists(trimmedInput) &&
+            !this.itemExists(itemLabel)) {
+            const defaultPrevented = this.emitAddItem(trimmedInput);
+            if (defaultPrevented) {
+                return;
             }
         }
         this.dropdownShow = false;
         this.updateSelection();
     }
     async onArrowNavigation(event, key) {
+        var _a;
         if (event.defaultPrevented) {
             return;
         }
@@ -378,14 +382,12 @@ const Select = class {
             return;
         }
         if (this.isAddItemVisible() &&
-            this.addItemRef.contains(await this.navigationItem.getDropdownItemElement())) {
+            ((_a = this.addItemElement) === null || _a === void 0 ? void 0 : _a.contains(await this.navigationItem.getDropdownItemElement()))) {
             if (moveUp) {
                 this.applyFocusTo(this.visibleItems.pop());
             }
-            else {
-                if (this.visibleItems.length) {
-                    this.applyFocusTo(this.visibleItems.shift());
-                }
+            else if (this.visibleItems.length) {
+                this.applyFocusTo(this.visibleItems.shift());
             }
             return;
         }
@@ -432,19 +434,20 @@ const Select = class {
         var _a, _b;
         if (this.addItemButton) {
             (_b = (_a = this.addItemButton.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button')) === null || _b === void 0 ? void 0 : _b.focus();
-            this.navigationItem = this.addItemRef;
+            this.navigationItem = this.addItemElement;
         }
     }
     filterItemsWithTypeahead() {
-        var _a;
-        this.inputFilterText = ((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value) || '';
+        var _a, _b;
+        this.inputFilterText = (_b = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
         if (this.isSingleMode && this.inputFilterText === this.selectedLabels[0]) {
             return;
         }
         if (this.inputFilterText) {
             this.items.forEach((item) => {
+                var _a;
                 item.classList.remove('d-none');
-                if (!item.label.toLowerCase().includes(this.inputFilterText.toLowerCase())) {
+                if (!((_a = item.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(this.inputFilterText.toLowerCase()))) {
                     item.classList.add('d-none');
                 }
             });
@@ -463,8 +466,8 @@ const Select = class {
         });
     }
     clearInput() {
-        if (this.inputRef) {
-            this.inputRef.value = '';
+        if (this.inputElement) {
+            this.inputElement.value = '';
         }
         this.inputFilterText = '';
     }
@@ -519,37 +522,50 @@ const Select = class {
      * Returns the native input element used in the component.
      */
     getNativeInputElement() {
-        return Promise.resolve(this.inputRef);
+        if (this.inputElement) {
+            return Promise.resolve(this.inputElement);
+        }
+        else {
+            return Promise.reject(new Error('Input element not found'));
+        }
     }
     /**
      * Focuses the input field
      */
     async focusInput() {
-        return (await this.getNativeInputElement()).focus();
+        const inputElement = await this.getNativeInputElement();
+        if (inputElement) {
+            inputElement.focus();
+        }
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: '99abe58329d0fcd9911caacef49b66274489814f', "aria-disabled": a11yBoolean(this.disabled), class: {
+        return (h(Host, { key: 'e303aff09c9bfc570154e79b6276c609ed12c531', "aria-disabled": a11yBoolean(this.disabled), class: {
                 disabled: this.disabled,
-            } }, h("ix-field-wrapper", { key: '89c8de8e9f35f0c5183be8dcd8e6b891016f6ef3', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: 'e103c45c3df1dbf9f4dd23e2d062a39b39d6b995', class: {
+            } }, h("ix-field-wrapper", { key: '257e201bdca4c09533c569dfe1d53efd46ef9efe', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: 'a94e63733189753312269744dfc48178e4a38e6e', class: {
                 select: true,
                 disabled: this.disabled,
                 readonly: this.readonly,
             }, ref: (ref) => {
-                this.dropdownAnchor(ref);
+                this.dropdownAnchorRef(ref);
                 if (!this.editable)
                     this.dropdownWrapperRef(ref);
-            } }, h("div", { key: '2bafbbf9195ac7303c2e1fb2331481cf3af078ee', class: "input-container" }, h("div", { key: 'c69296e322974fd1659d9794bc4469c7faab6ba0', class: "chips" }, this.isMultipleMode
+            } }, h("div", { key: '86746135a307b00ca720636200f2f8b06d148605', class: "input-container" }, h("div", { key: 'da77d6ccc888fd2f8e171b33414741c24014563c', class: "chips" }, this.isMultipleMode
             ? (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (h("ix-filter-chip", { disabled: this.disabled || this.readonly, key: item.value, onCloseClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     this.itemClick(item.value);
                 } }, item.label)))
-            : '', h("div", { key: '49b13da2a7e8230b41b8365394694d6f9991b367', class: "trigger" }, h("input", { key: 'fbafa635a105fec9f43756e0e767d4567355d224', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, required: this.required, type: "text", class: {
+            : '', h("div", { key: '49c977ee154d514bb1066b781eacaea57d5ca49e', class: "trigger" }, h("input", { key: '431842c51aceb1b187032aab9d690e84853f71ae', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, required: this.required, type: "text", class: {
                 'allow-clear': this.allowClear && !!((_b = this.selectedLabels) === null || _b === void 0 ? void 0 : _b.length),
-            }, placeholder: this.placeholderValue(), value: (_c = this.inputValue) !== null && _c !== void 0 ? _c : '', ref: (ref) => (this.inputRef = ref), onBlur: (e) => this.onInputBlur(e), onFocus: () => {
-                this.navigationItem = null;
+            }, placeholder: this.placeholderValue(), value: (_c = this.inputValue) !== null && _c !== void 0 ? _c : '', ref: (ref) => {
+                this.inputElement = ref;
+                this.inputRef(ref);
+            }, onBlur: (e) => this.onInputBlur(e), onFocus: () => {
+                this.navigationItem = undefined;
             }, onInput: () => this.filterItemsWithTypeahead(), onKeyDown: (e) => this.onKeyDown(e) }), this.allowClear &&
+            !this.disabled &&
+            !this.readonly &&
             (((_d = this.selectedLabels) === null || _d === void 0 ? void 0 : _d.length) || this.inputFilterText) ? (h("ix-icon-button", { class: "clear", icon: 'clear', ghost: true, oval: true, size: "16", onClick: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -557,27 +573,27 @@ const Select = class {
             } })) : null, this.disabled || this.readonly ? null : (h("ix-icon-button", { "data-select-dropdown": true, class: { 'dropdown-visible': this.dropdownShow }, icon: "chevron-down-small", ghost: true, ref: (ref) => {
                 if (this.editable)
                     this.dropdownWrapperRef(ref);
-            } }))))))), h("ix-dropdown", { key: '1ce2a1c9e706231b16729de9ab6860a3040cf6b8', ref: (ref) => (this.dropdownRef = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
+            } }))))))), h("ix-dropdown", { key: '8d4ee01533ee9843a836a9b4c986ab5db0be4db9', ref: (ref) => (this.dropdownElement = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
                 'd-none': this.disabled || this.readonly,
-            }, anchor: this.dropdownAnchor.waitForCurrent(), trigger: this.dropdownWrapperRef.waitForCurrent(), onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom-start", overwriteDropdownStyle: async () => {
+            }, anchor: this.dropdownAnchorRef.waitForCurrent(), trigger: this.dropdownWrapperRef.waitForCurrent(), onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom-start", overwriteDropdownStyle: async () => {
                 var _a, _b;
                 const minWidth = (_b = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.select')) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width;
                 return {
                     minWidth: `${minWidth}px`,
                 };
-            } }, h("div", { key: '9a60476d90a72bb423434438d947ed5acd237a0b', class: {
+            } }, h("div", { key: '3897bfc9748d7044d038c413f046ba693ac7f03d', class: {
                 'select-list-header': true,
                 hidden: this.hideListHeader || this.isDropdownEmpty,
-            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), h("slot", { key: '375d3631327065cfed363398941c79550a34e4bd', onSlotchange: () => {
+            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), h("slot", { key: '71fada597f8ae68598a1444b96c66fe85cf56258', onSlotchange: () => {
                 this.updateSelection();
-            } }), h("div", { key: '86946fcba90f1d30760539b778449c53c99caa18', ref: (ref) => (this.customItemsContainerRef = ref), class: "d-contents" }), this.isAddItemVisible() ? (h("ix-dropdown-item", { "data-testid": "add-item", icon: 'plus', class: {
+            } }), h("div", { key: 'bbb7e303d5443707e576d2dc2a9597bdf37bff7c', ref: (ref) => (this.customItemsContainerElement = ref), class: "d-contents" }), this.isAddItemVisible() ? (h("ix-dropdown-item", { "data-testid": "add-item", icon: 'plus', class: {
                 'add-item': true,
             }, label: this.inputFilterText, onItemClick: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 this.emitAddItem(this.inputFilterText);
-            }, onFocus: () => (this.navigationItem = this.addItemRef), ref: (ref) => {
-                this.addItemRef = ref;
+            }, onFocus: () => (this.navigationItem = this.addItemElement), ref: (ref) => {
+                this.addItemElement = ref;
             } })) : null, this.isDropdownEmpty && !this.editable ? (h("div", { class: "select-list-header" }, this.i18nNoMatches)) : (''))));
     }
     static get formAssociated() { return true; }