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

package/components/ix-input-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxInputGroup extends Components.IxInputGroup, HTMLElement {}
+export const IxInputGroup: {
+    prototype: IxInputGroup;
+    new (): IxInputGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-input-group.js

@@ -0,0 +1,152 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-BuJ6BWIi.js';
+import { g as getSlottedElements } from './p-Bi1VyG64.js';
+
+const inputGroupCss = ":host{position:relative;display:flex;width:100%;flex-wrap:wrap;align-items:stretch}: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 .group{display:flex;position:absolute;align-items:center;height:100%}:host .group-start{left:0px;height:2rem;margin-left:0.5rem;color:var(--theme-color-soft-text)}:host .group-end{right:0px;height:2rem;margin-right:0.5rem;color:var(--theme-color-soft-text)}:host ::slotted(*){display:flex}:host(.disabled){pointer-events:none}:host(.disabled) .group-start ::slotted(*),:host(.disabled) .group-end ::slotted(*){opacity:0.4 !important}";
+
+const InputGroup = /*@__PURE__*/ proxyCustomElement(class InputGroup extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.disabled = false;
+        this.inputPaddingLeft = 0;
+        this.inputPaddingRight = 0;
+    }
+    get inputElement() {
+        return this.hostElement.querySelector('input');
+    }
+    componentWillLoad() {
+        var _a;
+        const { valid } = this.inputElement.validity;
+        this.inputElement.addEventListener('valid', () => {
+            this.onValidInput();
+        });
+        this.inputElement.addEventListener('invalid', () => {
+            this.onInvalidInput();
+        });
+        this.inputElement.addEventListener('input', () => {
+            this.startSlotChanged();
+        });
+        (_a = this.inputElement.form) === null || _a === void 0 ? void 0 : _a.addEventListener('submit', () => {
+            this.startSlotChanged();
+        });
+        valid ? this.onValidInput() : this.onInvalidInput();
+        this.observer = new MutationObserver(() => {
+            this.slotChanged();
+            this.startSlotChanged();
+            this.endSlotChanged();
+        });
+        this.observer.observe(this.hostElement, {
+            subtree: true,
+            childList: true,
+            attributes: true,
+            characterData: true,
+        });
+    }
+    componentDidRender() {
+        this.prepareInputElement();
+    }
+    onValidInput() {
+        this.startSlotChanged();
+    }
+    onInvalidInput() {
+        this.startSlotChanged();
+    }
+    prepareInputElement() {
+        if (this.inputElement) {
+            this.inputElement.style.width = '100%';
+            if (this.inputPaddingRight !== 0) {
+                this.inputElement.style.paddingRight = this.inputPaddingRight + 'px';
+            }
+            else {
+                this.inputElement.style.paddingRight = '0.5rem';
+            }
+            if (this.inputPaddingLeft !== 0) {
+                this.inputElement.style.paddingLeft = this.inputPaddingLeft + 'px';
+            }
+            else {
+                this.inputElement.style.paddingLeft = '0.5rem';
+            }
+        }
+        else {
+            console.warn('You used the ix-input-group without an input tag, e.g. <input class="ix-form-control" />');
+        }
+    }
+    slotChanged() {
+        var _a;
+        this.disabled = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.disabled;
+    }
+    startSlotChanged() {
+        setTimeout(() => {
+            var _a, _b;
+            const startPadding = this.getChildrenWidth(this.startSlotRef);
+            if (startPadding !== 0) {
+                this.inputPaddingLeft = 11 + startPadding;
+            }
+            else {
+                this.inputPaddingLeft = 0;
+            }
+            if (!this.inputElement) {
+                return;
+            }
+            const isInputInvalid = !this.inputElement.validity.valid ||
+                this.inputElement.classList.contains('is-invalid');
+            const formWasValidated = ((_a = this.inputElement.form) === null || _a === void 0 ? void 0 : _a.classList.contains('was-validated')) ||
+                ((_b = this.inputElement.form) === null || _b === void 0 ? void 0 : _b.noValidate) === false;
+            if (formWasValidated && isInputInvalid) {
+                const left = this.inputPaddingLeft !== 0 ? this.inputPaddingLeft : 7;
+                this.inputElement.style.backgroundPosition = `left ${left}px center`;
+                this.inputPaddingLeft += 26;
+            }
+        });
+    }
+    endSlotChanged() {
+        setTimeout(() => {
+            this.inputPaddingRight = 15 + this.getChildrenWidth(this.endSlotRef);
+        });
+    }
+    getChildrenWidth(slotElement) {
+        if (!slotElement) {
+            return 0;
+        }
+        const endElements = getSlottedElements(slotElement);
+        if (endElements.length === 0) {
+            return 0;
+        }
+        let width = 0;
+        endElements.forEach((element) => {
+            width += element.getBoundingClientRect().width;
+        });
+        return width;
+    }
+    render() {
+        return (h(Host, { key: '24b0c17b0f760e00b0c04d976e1ca73e3f7add6a', class: { disabled: this.disabled } }, h("div", { key: 'd18998af36460aa37b025e4c53fbaa4f70c82533', class: "group group-start" }, h("slot", { key: '70d66198ddf8ba6d9e4676ed6055e370b956aecf', ref: (el) => (this.startSlotRef = el), name: "input-start" })), h("slot", { key: 'dfceaca91998ff431ebfc42113971c8b28f25c2a' }), h("div", { key: '910403e5b7e4370fb7f810253e4d304a0fa65f45', class: "group group-end" }, h("slot", { key: '1d1916855ed606041c9865a9f52a65b11ee076bc', ref: (el) => (this.endSlotRef = el), name: "input-end" }))));
+    }
+    get hostElement() { return this; }
+    static get style() { return inputGroupCss; }
+}, [1, "ix-input-group", {
+        "disabled": [32],
+        "inputPaddingLeft": [32],
+        "inputPaddingRight": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-input-group"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-input-group":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, InputGroup);
+            }
+            break;
+    } });
+}
+
+const IxInputGroup = InputGroup;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxInputGroup, defineCustomElement };
+//# sourceMappingURL=ix-input-group.js.map
+
+//# sourceMappingURL=ix-input-group.js.map

package/components/ix-input-group.js.map

@@ -0,0 +1 @@
+{"file":"ix-input-group.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/input-group/input-group.scss?tag=ix-input-group&encapsulation=shadow","src/components/input-group/input-group.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n@import 'mixins/shadow-dom/host-disabled';\n\n:host {\n  @include ix-component;\n\n  position: relative;\n  display: flex;\n  width: 100%;\n  flex-wrap: wrap;\n  align-items: stretch;\n\n  .group {\n    display: flex;\n    position: absolute;\n    align-items: center;\n    height: 100%;\n  }\n\n  .group-start {\n    left: 0px;\n    height: 2rem;\n    margin-left: 0.5rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  .group-end {\n    right: 0px;\n    height: 2rem;\n    margin-right: 0.5rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  ::slotted(*) {\n    display: flex;\n  }\n}\n\n@include host-disabled {\n  .group-start,\n  .group-end {\n    ::slotted(*) {\n      opacity: 0.4 !important;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, State } from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n/**\n * @deprecated Will be removed with 4.0.0\n * Use the 'ix-input' component instead\n */\n@Component({\n  tag: 'ix-input-group',\n  styleUrl: 'input-group.scss',\n  shadow: true,\n})\nexport class InputGroup {\n  @Element() hostElement!: HTMLIxInputGroupElement;\n\n  @State() disabled = false;\n\n  @State() inputPaddingLeft = 0;\n  @State() inputPaddingRight = 0;\n\n  startSlotRef?: HTMLElement;\n  endSlotRef?: HTMLElement;\n\n  private get inputElement() {\n    return this.hostElement.querySelector('input') as HTMLInputElement;\n  }\n\n  private observer?: MutationObserver;\n\n  componentWillLoad() {\n    const { valid } = this.inputElement.validity;\n    this.inputElement.addEventListener('valid', () => {\n      this.onValidInput();\n    });\n    this.inputElement.addEventListener('invalid', () => {\n      this.onInvalidInput();\n    });\n    this.inputElement.addEventListener('input', () => {\n      this.startSlotChanged();\n    });\n\n    this.inputElement.form?.addEventListener('submit', () => {\n      this.startSlotChanged();\n    });\n\n    valid ? this.onValidInput() : this.onInvalidInput();\n\n    this.observer = new MutationObserver(() => {\n      this.slotChanged();\n      this.startSlotChanged();\n      this.endSlotChanged();\n    });\n\n    this.observer.observe(this.hostElement, {\n      subtree: true,\n      childList: true,\n      attributes: true,\n      characterData: true,\n    });\n  }\n\n  componentDidRender() {\n    this.prepareInputElement();\n  }\n\n  private onValidInput() {\n    this.startSlotChanged();\n  }\n\n  private onInvalidInput() {\n    this.startSlotChanged();\n  }\n\n  private prepareInputElement() {\n    if (this.inputElement) {\n      this.inputElement.style.width = '100%';\n\n      if (this.inputPaddingRight !== 0) {\n        this.inputElement.style.paddingRight = this.inputPaddingRight + 'px';\n      } else {\n        this.inputElement.style.paddingRight = '0.5rem';\n      }\n\n      if (this.inputPaddingLeft !== 0) {\n        this.inputElement.style.paddingLeft = this.inputPaddingLeft + 'px';\n      } else {\n        this.inputElement.style.paddingLeft = '0.5rem';\n      }\n    } else {\n      console.warn(\n        'You used the ix-input-group without an input tag, e.g. <input class=\"ix-form-control\" />'\n      );\n    }\n  }\n\n  private slotChanged() {\n    this.disabled = this.inputElement?.disabled;\n  }\n\n  private startSlotChanged() {\n    setTimeout(() => {\n      const startPadding = this.getChildrenWidth(this.startSlotRef);\n\n      if (startPadding !== 0) {\n        this.inputPaddingLeft = 11 + startPadding;\n      } else {\n        this.inputPaddingLeft = 0;\n      }\n\n      if (!this.inputElement) {\n        return;\n      }\n\n      const isInputInvalid =\n        !this.inputElement.validity.valid ||\n        this.inputElement.classList.contains('is-invalid');\n\n      const formWasValidated =\n        this.inputElement.form?.classList.contains('was-validated') ||\n        this.inputElement.form?.noValidate === false;\n\n      if (formWasValidated && isInputInvalid) {\n        const left = this.inputPaddingLeft !== 0 ? this.inputPaddingLeft : 7;\n        this.inputElement.style.backgroundPosition = `left ${left}px center`;\n        this.inputPaddingLeft += 26;\n      }\n    });\n  }\n\n  private endSlotChanged() {\n    setTimeout(() => {\n      this.inputPaddingRight = 15 + this.getChildrenWidth(this.endSlotRef);\n    });\n  }\n\n  private getChildrenWidth(slotElement: Element | undefined) {\n    if (!slotElement) {\n      return 0;\n    }\n\n    const endElements = getSlottedElements<HTMLElement>(slotElement);\n    if (endElements.length === 0) {\n      return 0;\n    }\n\n    let width = 0;\n\n    endElements.forEach((element) => {\n      width += element.getBoundingClientRect().width;\n    });\n\n    return width;\n  }\n\n  render() {\n    return (\n      <Host class={{ disabled: this.disabled }}>\n        <div class=\"group group-start\">\n          <slot\n            ref={(el) => (this.startSlotRef = el as HTMLElement)}\n            name=\"input-start\"\n          ></slot>\n        </div>\n        <slot></slot>\n        <div class=\"group group-end\">\n          <slot\n            ref={(el) => (this.endSlotRef = el as HTMLElement)}\n            name=\"input-end\"\n          ></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-input.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxInput extends Components.IxInput, HTMLElement {}
+export const IxInput: {
+    prototype: IxInput;
+    new (): IxInput;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-input.js

@@ -0,0 +1,248 @@
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-BuJ6BWIi.js';
+import { x as iconEye, z as iconEyeCancelled } from './p-CGwHQeMX.js';
+import { H as HookValidationLifecycle } from './p-D9LaIICQ.js';
+import { m as makeRef } from './p-bcj7UEIC.js';
+import { m as mapValidationResult, a as addDisposableChangesAndVisibilityObservers, b as adjustPaddingForStartAndEnd, c as SlotStart, I as InputElement, g as getAriaAttributesForInput, d as checkAllowedKeys, o as onInputBlur, S as SlotEnd } from './p-Bvsx56zn.js';
+import { d as defineCustomElement$7 } from './p-Bu-j8wxy.js';
+import { d as defineCustomElement$6 } from './p-BMU8AlMD.js';
+import { d as defineCustomElement$5 } from './p-BXjBChze.js';
+import { d as defineCustomElement$4 } from './p-BygLxZIM.js';
+import { d as defineCustomElement$3 } from './p-DyHdZRT0.js';
+import { d as defineCustomElement$2 } from './p-DyMgW0fR.js';
+
+const inputCss = "input{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:auto;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}input[type=number]{text-align:right}input[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input:-webkit-autofill,input:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input::-moz-placeholder{color:var(--theme-input-hint--color)}input::placeholder{color:var(--theme-input-hint--color)}input.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),input:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),input:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),input:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),input:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only,input:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only::-moz-placeholder,input:read-only::-moz-placeholder{color:transparent}input:-moz-read-only::placeholder{color:transparent}input.read-only::placeholder,input:read-only::placeholder{color:transparent}input:disabled,input.disabled{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}input:disabled::-moz-placeholder,input.disabled::-moz-placeholder{color:transparent}input:disabled::placeholder,input.disabled::placeholder{color:transparent}textarea{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:auto;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}textarea[type=number]{text-align:right}textarea[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea:-webkit-autofill,textarea:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea::-moz-placeholder{color:var(--theme-input-hint--color)}textarea::placeholder{color:var(--theme-input-hint--color)}textarea.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),textarea:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),textarea:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),textarea:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),textarea:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only,textarea:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only::-moz-placeholder,textarea:read-only::-moz-placeholder{color:transparent}textarea:-moz-read-only::placeholder{color:transparent}textarea.read-only::placeholder,textarea:read-only::placeholder{color:transparent}textarea:disabled,textarea.disabled{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}textarea:disabled::-moz-placeholder,textarea.disabled::-moz-placeholder{color:transparent}textarea:disabled::placeholder,textarea.disabled::placeholder{color:transparent}textarea{min-height:2rem;height:3.25rem;padding:calc(0.375rem - var(--theme-input--border-thickness)) calc(0.5rem - var(--theme-input--border-thickness))}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]),input.ix-info:not(.disabled):not(:disabled):not([disabled]){border-color:var(--theme-input--border-color--info)}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):hover,input.ix-info:not(.disabled):not(:disabled):not([disabled]):hover{border-color:var(--theme-input--border-color--info--hover) !important}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):active,input.ix-info:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--info--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]),input.ix-warning:not(.disabled):not(:disabled):not([disabled]){border-color:var(--theme-input--border-color--warning--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):hover,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):hover{border-color:var(--theme-input--border-color--warning--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):active,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--warning--active) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]),input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]){background-color:var(--theme-input--background--invalid);border-color:var(--theme-input--border-color--invalid) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):hover,input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):hover{border-color:var(--theme-input--border-color--invalid--hover) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active,input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--invalid--active) !important}:host{display:inline-block;position:relative;width:auto}: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 .input-wrapper{display:flex;position:relative;align-items:center;width:100%;height:100%}:host input{width:100%;height:100%}:host .start-container,:host .end-container{display:flex;position:absolute;align-items:center;justify-content:center;z-index:1}:host .start-container{left:0}:host .end-container{right:0}:host .start-container ::slotted(*){margin-left:0.5rem}:host .start-container ::slotted(ix-icon.size-24),:host .start-container ::slotted(ix-icon-button.btn-icon-16){margin-left:0.25rem}:host .start-container ::slotted(ix-icon-button.btn-icon-32){margin-left:0}:host .end-container ::slotted(*){margin-right:0.5rem}:host .end-container ::slotted(ix-icon.size-24),:host .end-container ::slotted(ix-icon-button.btn-icon-16){margin-right:0.25rem}:host .end-container ::slotted(ix-icon-button.btn-icon-32){margin-right:0}:host .bottom-text{margin-top:0.25rem;margin-bottom:0.25rem}:host(.disabled){pointer-events:none}:host(.disabled) input,:host(.disabled) textarea{pointer-events:none}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) input{border-color:var(--theme-input--border-color--info)}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) input:hover{border-color:var(--theme-input--border-color--info--hover) !important}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) input:active{border-color:var(--theme-input--border-color--info--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) input{border-color:var(--theme-input--border-color--warning--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) input:hover{border-color:var(--theme-input--border-color--warning--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) input:active{border-color:var(--theme-input--border-color--warning--active) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input{background-color:var(--theme-input--background--invalid);border-color:var(--theme-input--border-color--invalid) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input:hover,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input:hover{border-color:var(--theme-input--border-color--invalid--hover) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input:active,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input:active{border-color:var(--theme-input--border-color--invalid--active) !important}:host .password-eye{margin-left:0.125rem;color:red}:host .password-eye.eye-hidden{display:none}";
+
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+let inputIds = 0;
+const Input = /*@__PURE__*/ proxyCustomElement(class Input extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.valueChange = createEvent(this, "valueChange", 7);
+        this.validityStateChange = createEvent(this, "validityStateChange", 7);
+        this.ixBlur = createEvent(this, "ixBlur", 7);
+        this.formInternals = this.attachInternals();
+        /**
+         * The type of the text field. Possible values are 'text', 'email', or 'password'.
+         */
+        this.type = 'text';
+        /**
+         * The value of the text field.
+         */
+        this.value = '';
+        /**
+         * Specifies whether the text field is required.
+         */
+        this.required = false;
+        /**
+         * Specifies whether the text field is disabled.
+         */
+        this.disabled = false;
+        /**
+         * Specifies whether the text field is readonly.
+         */
+        this.readonly = false;
+        this.isInvalid = false;
+        this.isValid = false;
+        this.isInfo = false;
+        this.isWarning = false;
+        this.isInvalidByRequired = false;
+        this.inputType = 'text';
+        this.inputRef = makeRef();
+        this.slotEndRef = makeRef();
+        this.slotStartRef = makeRef();
+        this.inputId = `input-${inputIds++}`;
+        this.touched = false;
+    }
+    updateClassMappings(result) {
+        mapValidationResult(this, result);
+    }
+    updateInputType() {
+        this.inputType = this.type;
+    }
+    componentWillLoad() {
+        this.updateFormInternalValue(this.value);
+        this.inputType = this.type;
+    }
+    connectedCallback() {
+        this.disposableChangesAndVisibilityObservers =
+            addDisposableChangesAndVisibilityObservers(this.hostElement, this.updatePaddings.bind(this));
+    }
+    updatePaddings() {
+        adjustPaddingForStartAndEnd(this.slotStartRef.current, this.slotEndRef.current, this.inputRef.current);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.disposableChangesAndVisibilityObservers) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+    updateFormInternalValue(value) {
+        this.formInternals.setFormValue(value);
+        this.value = value;
+    }
+    /** @internal */
+    async getAssociatedFormElement() {
+        return this.formInternals.form;
+    }
+    /** @internal */
+    hasValidValue() {
+        return Promise.resolve(!!this.value);
+    }
+    /**
+     * Returns the native input element used in the text field.
+     */
+    getNativeInputElement() {
+        return this.inputRef.waitForCurrent();
+    }
+    /**
+     * Returns the validity state of the input field.
+     */
+    async getValidityState() {
+        const input = await this.inputRef.waitForCurrent();
+        return Promise.resolve(input.validity);
+    }
+    /**
+     * Focuses the input field
+     */
+    async focusInput() {
+        return (await this.getNativeInputElement()).focus();
+    }
+    /**
+     * Returns whether the text field has been touched.
+     * @internal
+     */
+    isTouched() {
+        return Promise.resolve(this.touched);
+    }
+    render() {
+        var _a;
+        const inputAria = getAriaAttributesForInput(this);
+        return (h(Host, { key: 'b069d91c5aca4f679c93b1d440f6ad48cb28d2af', class: {
+                disabled: this.disabled,
+                readonly: this.readonly,
+            } }, h("ix-field-wrapper", { key: 'a101bf7a971898a1209b832ee5534ab0a835c493', 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: '3cbe94c3408fac2409a4ba53d51a9c48c62516cf', class: "input-wrapper" }, h(SlotStart, { key: '813456b81fe7cb3c6630a5366dd8a281bb8cd869', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h(InputElement, { key: 'f271a11579c1a710a2dd21d6f807c44f7e40dce8', 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);
+                this.touched = true;
+            }, ariaAttributes: inputAria }), h(SlotEnd, { key: 'ca0be4a9ab7182ef66750d710e2275f9586eb361', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("ix-icon-button", { key: 'f1371a3cc2ac0497f8bfa5cc54f82f2c7133c555', color: "color-weak-text", class: {
+                'password-eye': true,
+                'eye-hidden': this.type !== 'password',
+            }, ghost: true, icon: this.inputType === 'password' ? iconEye : iconEyeCancelled, onClick: () => {
+                if (this.inputType === 'password') {
+                    this.inputType = 'text';
+                    return;
+                }
+                this.inputType = 'password';
+            } }))), !!this.maxLength && this.maxLength > 0 && (h("ix-typography", { key: 'cb783fa80a4ce1fb46b2f69c81e5ca8eb37137f1', class: "bottom-text", slot: "bottom-right", textColor: "soft" }, (_a = this.value) === null || _a === void 0 ? void 0 :
+            _a.length, "/", this.maxLength)))));
+    }
+    static get formAssociated() { return true; }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "type": ["updateInputType"]
+    }; }
+    static get style() { return inputCss; }
+}, [65, "ix-input", {
+        "type": [1],
+        "name": [513],
+        "placeholder": [513],
+        "value": [1537],
+        "required": [516],
+        "disabled": [516],
+        "readonly": [516],
+        "helperText": [1, "helper-text"],
+        "infoText": [1, "info-text"],
+        "showTextAsTooltip": [4, "show-text-as-tooltip"],
+        "validText": [1, "valid-text"],
+        "warningText": [1, "warning-text"],
+        "label": [513],
+        "invalidText": [1, "invalid-text"],
+        "pattern": [1],
+        "maxLength": [2, "max-length"],
+        "minLength": [2, "min-length"],
+        "allowedCharactersPattern": [1, "allowed-characters-pattern"],
+        "isInvalid": [32],
+        "isValid": [32],
+        "isInfo": [32],
+        "isWarning": [32],
+        "isInvalidByRequired": [32],
+        "inputType": [32],
+        "getAssociatedFormElement": [64],
+        "hasValidValue": [64],
+        "getNativeInputElement": [64],
+        "getValidityState": [64],
+        "focusInput": [64],
+        "isTouched": [64]
+    }, undefined, {
+        "type": ["updateInputType"]
+    }]);
+__decorate([
+    HookValidationLifecycle()
+], Input.prototype, "updateClassMappings", null);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-input", "ix-field-label", "ix-field-wrapper", "ix-icon-button", "ix-spinner", "ix-tooltip", "ix-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-input":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Input);
+            }
+            break;
+        case "ix-field-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "ix-field-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "ix-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ix-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ix-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ix-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const IxInput = Input;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxInput, defineCustomElement };
+//# sourceMappingURL=ix-input.js.map
+
+//# sourceMappingURL=ix-input.js.map

package/components/ix-input.js.map

@@ -0,0 +1 @@
+{"file":"ix-input.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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 '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  addDisposableChangesAndVisibilityObservers,\n  adjustPaddingForStartAndEnd,\n  checkAllowedKeys,\n  DisposableChangesAndVisibilityObservers,\n  getAriaAttributesForInput,\n  mapValidationResult,\n  onInputBlur,\n} from './input.util';\n\nlet inputIds = 0;\n\n/**\n * @form-ready\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  private readonly inputId = `input-${inputIds++}`;\n  private touched = false;\n\n  private disposableChangesAndVisibilityObservers?: DisposableChangesAndVisibilityObservers;\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  connectedCallback(): void {\n    this.disposableChangesAndVisibilityObservers =\n      addDisposableChangesAndVisibilityObservers(\n        this.hostElement,\n        this.updatePaddings.bind(this)\n      );\n  }\n\n  private updatePaddings() {\n    adjustPaddingForStartAndEnd(\n      this.slotStartRef.current,\n      this.slotEndRef.current,\n      this.inputRef.current\n    );\n  }\n\n  disconnectedCallback(): void {\n    this.disposableChangesAndVisibilityObservers?.();\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   * Returns the validity state of the input field.\n   */\n  @Method()\n  async getValidityState(): Promise<ValidityState> {\n    const input = await this.inputRef.waitForCurrent();\n    return Promise.resolve(input.validity);\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  /**\n   * Returns whether the text field has been touched.\n   * @internal\n   */\n  @Method()\n  isTouched(): Promise<boolean> {\n    return Promise.resolve(this.touched);\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={() => {\n                onInputBlur(this, this.inputRef.current);\n                this.touched = true;\n              }}\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\n              class=\"bottom-text\"\n              slot=\"bottom-right\"\n              textColor=\"soft\"\n            >\n              {this.value?.length}/{this.maxLength}\n            </ix-typography>\n          )}\n        </ix-field-wrapper>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-key-value-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxKeyValueList extends Components.IxKeyValueList, HTMLElement {}
+export const IxKeyValueList: {
+    prototype: IxKeyValueList;
+    new (): IxKeyValueList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-key-value-list.js

@@ -0,0 +1,42 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-BuJ6BWIi.js';
+
+const keyValueListCss = ":host(.keyValueList) ::slotted(ix-key-value){border-bottom:1px solid var(--theme-color-weak-bdr)}:host(.keyValueList.keyValueList--striped) ::slotted(ix-key-value:nth-child(odd)){background:var(--theme-color-ghost-alt)}";
+
+const KeyValueList = /*@__PURE__*/ proxyCustomElement(class KeyValueList extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * Optional striped key value list style
+         */
+        this.striped = false;
+    }
+    render() {
+        return (h(Host, { key: '27163734dfd54def57dd0186263161898c7b4dfe', class: { keyValueList: true, 'keyValueList--striped': this.striped } }, h("slot", { key: '0d28e89b4b194cd499653bd76132f205ab55d10b' })));
+    }
+    static get style() { return keyValueListCss; }
+}, [1, "ix-key-value-list", {
+        "striped": [4]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-key-value-list"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-key-value-list":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, KeyValueList);
+            }
+            break;
+    } });
+}
+
+const IxKeyValueList = KeyValueList;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxKeyValueList, defineCustomElement };
+//# sourceMappingURL=ix-key-value-list.js.map
+
+//# sourceMappingURL=ix-key-value-list.js.map

package/components/ix-key-value-list.js.map

@@ -0,0 +1 @@
+{"file":"ix-key-value-list.js","mappings":";;AAAA,MAAM,eAAe,GAAG,6NAA6N;;MCgBxO,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,GAAA;;;;AAME;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAWjC;IATC,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EACH,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,uBAAuB,EAAE,IAAI,CAAC,OAAO,EAAE,EAAA,EAEpE,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/key-value-list/key-value-list.scss?tag=ix-key-value-list&encapsulation=shadow","src/components/key-value-list/key-value-list.tsx"],"sourcesContent":[":host(.keyValueList) {\n  ::slotted(ix-key-value) {\n    border-bottom: 1px solid var(--theme-color-weak-bdr);\n  }\n}\n\n:host(.keyValueList.keyValueList--striped) {\n  ::slotted(ix-key-value:nth-child(odd)) {\n    background: var(--theme-color-ghost-alt);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-key-value-list',\n  styleUrl: 'key-value-list.scss',\n  shadow: true,\n})\nexport class KeyValueList {\n  /**\n   * Optional striped key value list style\n   */\n  @Prop() striped: boolean = false;\n\n  render() {\n    return (\n      <Host\n        class={{ keyValueList: true, 'keyValueList--striped': this.striped }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-key-value.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxKeyValue extends Components.IxKeyValue, HTMLElement {}
+export const IxKeyValue: {
+    prototype: IxKeyValue;
+    new (): IxKeyValue;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-key-value.js

@@ -0,0 +1,48 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-BuJ6BWIi.js';
+
+const keyValueCss = ":host(.keyValue){display:flex;flex-direction:row;align-items:center;gap:1rem}:host(.keyValue) .keyValue__icon{padding:0.25rem 0}:host(.keyValue) .keyValue__content{display:flex;flex-grow:1;align-items:flex-start}:host(.keyValue) .keyValue__content,:host(.keyValue) .keyValue__content .content__label,:host(.keyValue) .keyValue__content .content__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}:host(.keyValue) .keyValue__content .content__label{color:var(--theme-color-soft-text)}:host(.keyValue) .keyValue__content .content__value{width:100%}:host(.keyValue.keyValue--column){padding:0.5rem 0;border-bottom:1px solid var(--theme-color-soft-bdr)}:host(.keyValue.keyValue--column) .keyValue__content{flex-direction:column}:host(.keyValue.keyValue--column) .keyValue__content .content__label,:host(.keyValue.keyValue--column) .keyValue__content .content__value:not(.has-customValue){padding:2px 0}:host(.keyValue.keyValue--row){padding:0.25rem 0}:host(.keyValue.keyValue--row) .keyValue__content{flex-direction:row;gap:1rem;align-items:center}:host(.keyValue.keyValue--row) .keyValue__content .content__label,:host(.keyValue.keyValue--row) .keyValue__content .content__value:not(.has-customValue){padding:6px 0}:host(.keyValue.keyValue--row) .keyValue__content .content__label{min-width:8rem}";
+
+const KeyValue = /*@__PURE__*/ proxyCustomElement(class KeyValue extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * Optional key value label position - 'top' or 'left'
+         */
+        this.labelPosition = 'top';
+    }
+    render() {
+        return (h(Host, { key: '627e22cd186d5d4adafe301f273beb7d45328211', class: `keyValue keyValue--${this.labelPosition === 'top' ? 'column' : 'row'}` }, this.icon && (h("ix-icon", { key: 'aeaf3c43ca177ab355db565ff9f7fa65a6c2da6f', name: this.icon, size: "24", class: "keyValue__icon" })), h("div", { key: 'b8503aecf4002ebdefb64f98457f7cfc712d0f2b', class: "keyValue__content" }, h("div", { key: 'bd3748240d54d858fd470996e418bf09cf1ac0e0', class: "content__label" }, this.label), h("div", { key: '346189cd065f1ba86e65bb7731557112555f8561', class: {
+                content__value: true,
+                'has-customValue': this.value === undefined,
+            } }, this.value !== undefined ? (this.value) : (h("slot", { name: "custom-value" }))))));
+    }
+    static get style() { return keyValueCss; }
+}, [1, "ix-key-value", {
+        "icon": [1],
+        "label": [1],
+        "labelPosition": [1, "label-position"],
+        "value": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-key-value"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-key-value":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, KeyValue);
+            }
+            break;
+    } });
+}
+
+const IxKeyValue = KeyValue;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxKeyValue, defineCustomElement };
+//# sourceMappingURL=ix-key-value.js.map
+
+//# sourceMappingURL=ix-key-value.js.map