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/cjs/ix-input.cjs.entry.js CHANGED Viewed

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-757233c7.js');
-const index$1 = require('./index-d2117dc0.js');
+const index$1 = require('./index-b44a6617.js');
 const validation = require('./validation-1e3dd5ee.js');
 const makeRef = require('./make-ref-499e1e41.js');
-const input_util = require('./input.util-1c2fa43d.js');
+const input_util = require('./input.util-54d161e6.js');
 require('./a11y-ae470f01.js');
 require('./rwd.util-ee53cbd1.js');
 require('./anime.es-e2814360.js');
@@ -118,10 +118,10 @@ const Input = class {
     render() {
         var _a;
         const inputAria = input_util.getAriaAttributesForInput(this);
-        return (index.h(index.Host, { key: '842ff9fc4e182372da40d4bcb4f89653fc1c90fd', class: {
+        return (index.h(index.Host, { key: 'f625dc7d2ed058f53940ccda73db408a3d7017a5', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, index.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 }, index.h("div", { key: '71ba199ce76ca1ac0135a403827e47aec4c88977', class: "input-wrapper" }, index.h(input_util.SlotStart, { key: 'f6a8ea82539d59e475e6e62d498ea7150de90506', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), index.h(input_util.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) => input_util.checkAllowedKeys(this, event), valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => input_util.onInputBlur(this, this.inputRef.current), ariaAttributes: inputAria }), index.h(input_util.SlotEnd, { key: '9b0dab754362fbe7abf36c505209da7063490a52', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, index.h("ix-icon-button", { key: '6003d03e3d8efd967c932fc05e2270f83a102ae4', color: "color-weak-text", class: {
+            } }, index.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 }, index.h("div", { key: 'cc9ee3d23a14d0e10351f294fae72aeec82fbf64', class: "input-wrapper" }, index.h(input_util.SlotStart, { key: 'f32e50c55492dc1423b91f05209c1e9914b50f28', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), index.h(input_util.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) => input_util.checkAllowedKeys(this, event), valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => input_util.onInputBlur(this, this.inputRef.current), ariaAttributes: inputAria }), index.h(input_util.SlotEnd, { key: '5664747770d85defa36d460b4aa3e497a802bca2', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, index.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' ? index$1.iconEye : index$1.iconEyeCancelled, onClick: () => {
@@ -130,7 +130,7 @@ const Input = class {
                     return;
                 }
                 this.inputType = 'password';
-            } }))), !!this.maxLength && this.maxLength > 0 && (index.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 && (index.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/cjs/ix-input.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-input.entry.cjs.js","mappings":"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","names":["makeRef","mapValidationResult","adjustPaddingForStartAndEnd","getAriaAttributesForInput","h","Host","SlotStart","InputElement","checkAllowedKeys","onInputBlur","SlotEnd","iconEye","iconEyeCancelled","HookValidationLifecycle"],"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.cjs.js","mappings":"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","names":["makeRef","mapValidationResult","adjustPaddingForStartAndEnd","getAriaAttributesForInput","h","Host","SlotStart","InputElement","checkAllowedKeys","onInputBlur","SlotEnd","iconEye","iconEyeCancelled","HookValidationLifecycle"],"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/cjs/ix-menu.cjs.entry.js CHANGED Viewed

@@ -4,14 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-757233c7.js');
 const anime_es = require('./anime.es-e2814360.js');
-const index$1 = require('./index-74904d8b.js');
+const index$1 = require('./index-492e6488.js');
 const context = require('./context-6644f454.js');
 const service = require('./service-39a8e5fe.js');
 const menuService = require('./menu-service-9936f670.js');
 const rwd_util = require('./rwd.util-ee53cbd1.js');
 const themeSwitcher = require('./theme-switcher-88b70d73.js');
 require('./animation-99234008.js');
-require('./modal-a49409aa.js');
+require('./modal-923c83a6.js');
 require('./typed-event-8032c0c0.js');
 require('./breakpoints-5d1583fb.js');

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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-757233c7.js');
-const index$1 = require('./index-d2117dc0.js');
+const index$1 = require('./index-b44a6617.js');
 const validation = require('./validation-1e3dd5ee.js');
 const makeRef = require('./make-ref-499e1e41.js');
-const input_util = require('./input.util-1c2fa43d.js');
+const input_util = require('./input.util-54d161e6.js');
 require('./a11y-ae470f01.js');
 require('./rwd.util-ee53cbd1.js');
 require('./anime.es-e2814360.js');
@@ -112,16 +112,16 @@ const NumberInput = class {
     }
     render() {
         const showStepperButtons = this.showStepperButtons && (this.disabled || this.readonly) === false;
-        return (index.h(index.Host, { key: '257156c1c5ec77ef4426b3a8818941f0b28062c6', class: {
+        return (index.h(index.Host, { key: 'd44d46cba0a85db489b707e79978d7835cd7f6db', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, index.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 }, index.h("div", { key: '82ab33e39746a47d1c387f953b3862bd47547a4b', class: {
+            } }, index.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 }, index.h("div", { key: '88f56233a0fff77353f8e5710e7503e61877a391', class: {
                 'input-wrapper': true,
                 'show-stepper-buttons': !!this.showStepperButtons,
-            } }, index.h(input_util.SlotStart, { key: '252e87d3380c33806b2a1af84b98d672e2f0980f', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), index.h(input_util.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) => input_util.checkAllowedKeys(this, event), valueChange: (value) => this.valueChange.emit(Number(value)), updateFormInternalValue: (value) => this.updateFormInternalValue(Number(value)), onBlur: () => input_util.onInputBlur(this, this.inputRef.current) }), index.h(input_util.SlotEnd, { key: '9a9a6de11186692b3707d85315a124256124ad2f', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, index.h("div", { key: '97a24bdb25e6a6818038f662eb14a94e4e79d7a0', class: {
+            } }, index.h(input_util.SlotStart, { key: 'c74d37bb1153f84bd326b4c84308d0ef87c2af53', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), index.h(input_util.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) => input_util.checkAllowedKeys(this, event), valueChange: (value) => this.valueChange.emit(Number(value)), updateFormInternalValue: (value) => this.updateFormInternalValue(Number(value)), onBlur: () => input_util.onInputBlur(this, this.inputRef.current) }), index.h(input_util.SlotEnd, { key: '91bff359e6340bace9a9669da1ee056da40bb977', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, index.h("div", { key: '9f002e7ccfb5f77e76d4e1179af333ca20f99cd2', class: {
                 'number-stepper-container': true,
                 'container-hidden': !showStepperButtons,
-            } }, index.h("ix-icon-button", { key: '89d6c0aea01ea12ad5342cf825f9f43748e5f47a', ghost: true, icon: index$1.iconMinus, size: "16", class: "number-stepper-button step-minus", onClick: () => {
+            } }, index.h("ix-icon-button", { key: '6fa92f4a99603300ba0815bbab96f5c3c01f35b6', ghost: true, icon: index$1.iconMinus, size: "16", class: "number-stepper-button step-minus", onClick: () => {
                 if (!this.inputRef.current) {
                     return;
                 }
@@ -129,7 +129,7 @@ const NumberInput = class {
                 input_util.checkInternalValidity(this, this.inputRef.current);
                 this.updateFormInternalValue(Number(this.inputRef.current.value));
                 this.valueChange.emit(this.value);
-            } }), index.h("ix-icon-button", { key: '7a913f64e5abf65be33268df93eae3635452b51b', ghost: true, icon: index$1.iconPlus, size: "16", class: "number-stepper-button step-plus", onClick: () => {
+            } }), index.h("ix-icon-button", { key: '514c2c7164156b86b09a6aa2c999e00128e4527e', ghost: true, icon: index$1.iconPlus, size: "16", class: "number-stepper-button step-plus", onClick: () => {
                 if (!this.inputRef.current) {
                     return;
                 }

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

	@@ -1 +1 @@
1	- {"file":"ix-number-input.entry.cjs.js","mappings":"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","names":["makeRef","mapValidationResult","adjustPaddingForStartAndEnd","h","Host","SlotStart","InputElement","checkAllowedKeys","onInputBlur","SlotEnd","iconMinus","checkInternalValidity","iconPlus","HookValidationLifecycle"],"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.cjs.js","mappings":"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","names":["makeRef","mapValidationResult","adjustPaddingForStartAndEnd","h","Host","SlotStart","InputElement","checkAllowedKeys","onInputBlur","SlotEnd","iconMinus","checkInternalValidity","iconPlus","HookValidationLifecycle"],"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/cjs/ix-select.cjs.entry.js CHANGED Viewed

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-757233c7.js');
+const a11y = require('./a11y-ae470f01.js');
 const focus = require('./focus-935fb067.js');
-const listener = require('./listener-9ec23f49.js');
-const mutationObserver = require('./mutation-observer-babb20a5.js');
 const validation = require('./validation-1e3dd5ee.js');
+const listener = require('./listener-9ec23f49.js');
 const makeRef = require('./make-ref-499e1e41.js');
-const a11y = require('./a11y-ae470f01.js');
+const mutationObserver = require('./mutation-observer-babb20a5.js');
 require('./disposable-event-listener-1ed769b9.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}";
@@ -48,7 +48,8 @@ const Select = class {
             hostRef.$hostElement$["s-ei"] = this.formInternals;
         }
         this.dropdownWrapperRef = makeRef.makeRef();
-        this.dropdownAnchor = makeRef.makeRef();
+        this.dropdownAnchorRef = makeRef.makeRef();
+        this.inputRef = makeRef.makeRef();
         this.itemObserver = mutationObserver.createMutationObserver(() => {
             if (!this.arrowFocusController) {
                 return;
@@ -130,10 +131,10 @@ const Select = class {
         this.updateSelection();
     }
     watchDropdownShow(show) {
-        if (show) {
-            this.arrowFocusController = new focus.ArrowFocusController(this.visibleNonShadowItems, this.dropdownRef, this.focusControllerCallbackBind);
+        if (show && this.dropdownElement) {
+            this.arrowFocusController = new focus.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,
             });
@@ -171,7 +172,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) {
@@ -195,6 +196,7 @@ const Select = class {
         this.updateSelection();
     }
     emitAddItem(value) {
+        var _a;
         if (value === undefined || value.trim() === '') {
             return false;
         }
@@ -205,7 +207,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;
@@ -229,7 +231,7 @@ const Select = class {
         }
     }
     updateSelection() {
-        var _a;
+        var _a, _b;
         let ids = [];
         if (this.value) {
             ids = Array.isArray(this.value) ? [...this.value] : [this.value];
@@ -246,12 +248,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);
@@ -259,7 +261,7 @@ const Select = class {
             return true;
         }
         if (!value) {
-            this.itemSelectionChange.emit(null);
+            this.itemSelectionChange.emit([]);
         }
         else {
             this.itemSelectionChange.emit(Array.isArray(value) ? value : [value]);
@@ -269,10 +271,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() {
@@ -297,13 +299,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 = '';
         }
@@ -326,19 +328,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;
         }
@@ -382,14 +386,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;
         }
@@ -436,19 +438,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');
                 }
             });
@@ -467,8 +470,8 @@ const Select = class {
         });
     }
     clearInput() {
-        if (this.inputRef) {
-            this.inputRef.value = '';
+        if (this.inputElement) {
+            this.inputElement.value = '';
         }
         this.inputFilterText = '';
     }
@@ -523,37 +526,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 (index.h(index.Host, { key: '99abe58329d0fcd9911caacef49b66274489814f', "aria-disabled": a11y.a11yBoolean(this.disabled), class: {
+        return (index.h(index.Host, { key: 'e303aff09c9bfc570154e79b6276c609ed12c531', "aria-disabled": a11y.a11yBoolean(this.disabled), class: {
                 disabled: this.disabled,
-            } }, index.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 }, index.h("div", { key: 'e103c45c3df1dbf9f4dd23e2d062a39b39d6b995', class: {
+            } }, index.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 }, index.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);
-            } }, index.h("div", { key: '2bafbbf9195ac7303c2e1fb2331481cf3af078ee', class: "input-container" }, index.h("div", { key: 'c69296e322974fd1659d9794bc4469c7faab6ba0', class: "chips" }, this.isMultipleMode
+            } }, index.h("div", { key: '86746135a307b00ca720636200f2f8b06d148605', class: "input-container" }, index.h("div", { key: 'da77d6ccc888fd2f8e171b33414741c24014563c', class: "chips" }, this.isMultipleMode
             ? (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (index.h("ix-filter-chip", { disabled: this.disabled || this.readonly, key: item.value, onCloseClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     this.itemClick(item.value);
                 } }, item.label)))
-            : '', index.h("div", { key: '49b13da2a7e8230b41b8365394694d6f9991b367', class: "trigger" }, index.h("input", { key: 'fbafa635a105fec9f43756e0e767d4567355d224', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, required: this.required, type: "text", class: {
+            : '', index.h("div", { key: '49c977ee154d514bb1066b781eacaea57d5ca49e', class: "trigger" }, index.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) ? (index.h("ix-icon-button", { class: "clear", icon: 'clear', ghost: true, oval: true, size: "16", onClick: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -561,27 +577,27 @@ const Select = class {
             } })) : null, this.disabled || this.readonly ? null : (index.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);
-            } }))))))), index.h("ix-dropdown", { key: '1ce2a1c9e706231b16729de9ab6860a3040cf6b8', ref: (ref) => (this.dropdownRef = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
+            } }))))))), index.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`,
                 };
-            } }, index.h("div", { key: '9a60476d90a72bb423434438d947ed5acd237a0b', class: {
+            } }, index.h("div", { key: '3897bfc9748d7044d038c413f046ba693ac7f03d', class: {
                 'select-list-header': true,
                 hidden: this.hideListHeader || this.isDropdownEmpty,
-            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), index.h("slot", { key: '375d3631327065cfed363398941c79550a34e4bd', onSlotchange: () => {
+            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), index.h("slot", { key: '71fada597f8ae68598a1444b96c66fe85cf56258', onSlotchange: () => {
                 this.updateSelection();
-            } }), index.h("div", { key: '86946fcba90f1d30760539b778449c53c99caa18', ref: (ref) => (this.customItemsContainerRef = ref), class: "d-contents" }), this.isAddItemVisible() ? (index.h("ix-dropdown-item", { "data-testid": "add-item", icon: 'plus', class: {
+            } }), index.h("div", { key: 'bbb7e303d5443707e576d2dc2a9597bdf37bff7c', ref: (ref) => (this.customItemsContainerElement = ref), class: "d-contents" }), this.isAddItemVisible() ? (index.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 ? (index.h("div", { class: "select-list-header" }, this.i18nNoMatches)) : (''))));
     }
     static get formAssociated() { return true; }