@siemens/ix 0.0.0-pr-1318-20240627080522 → 0.0.0-pr-1373-20240705054533

package/package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/siemens/ix",
     "directory": "packages/core"
   },
-  "version": "0.0.0-pr-1318-20240627080522",
+  "version": "0.0.0-pr-1373-20240705054533",
   "license": "MIT",
   "description": "Siemens iX Web Components",
   "main": "dist/index.cjs.js",
@@ -41,9 +41,9 @@
     "@stencil-community/eslint-plugin": "^0.7.1",
     "@stencil-community/postcss": "^2.2.0",
     "@stencil/angular-output-target": "^0.8.3",
-    "@stencil/react-output-target": "0.5.3",
+    "@stencil/react-output-target": "^0.5.3",
     "@stencil/sass": "^3.0.8",
-    "@stencil/vue-output-target": "0.8.8",
+    "@stencil/vue-output-target": "^0.8.7",
     "@testing-library/dom": "^8.11.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@types/animejs": "^3.1.4",

package/scss/components/form/_input.scss

@@ -8,7 +8,6 @@
  */
 @import 'common-variables';
 @import 'mixins/fonts';
-@import 'mixins/validation/form-component';
 
 @mixin element-input($feature-read-only: true) {
   & {
@@ -18,7 +17,7 @@
     padding: 0.25rem 0.5rem;
     background-color: var(--theme-input--background);
     color: var(--theme-input--color);
-    appearance: textfield;
+    -moz-appearance: textfield;
     text-overflow: ellipsis;
     border: var(--theme-input--border-thickness, 1px) solid
       var(--theme-input--border-color);
@@ -40,14 +39,14 @@
     color: var(--theme-input-hint--color);
   }
 
-  &:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).hover,
-  &:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):hover {
+  &.hover,
+  &:hover {
     border-color: var(--theme-input--border-color--hover) !important;
     background-color: var(--theme-input--background--hover);
   }
 
-  &:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).focus,
-  &:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):focus {
+  &.focus,
+  &:focus {
     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;
@@ -89,6 +88,7 @@
 }
 
 @mixin element-textarea {
+  height: 3.25rem;
   padding: 0.375rem 1.25rem 0.375rem 0.5rem;
 }
 
@@ -177,56 +177,6 @@
       display: none !important;
     }
   }
-
-  @include input-valid {
-  }
-
-  @include input-info {
-    & {
-      border-color: var(--theme-input--border-color--info);
-    }
-
-    &:hover {
-      border-color: var(--theme-input--border-color--info--hover) !important;
-    }
-
-    &:active {
-      border-color: var(--theme-input--border-color--info--active) !important;
-    }
-  }
-
-  @include input-warning {
-    & {
-      border-color: var(--theme-input--border-color--warning--active) !important;
-    }
-
-    &:hover {
-      border-color: var(--theme-input--border-color--warning--active) !important;
-    }
-
-    &:active {
-      border-color: var(--theme-input--border-color--warning--active) !important;
-    }
-  }
-
-  @include input-invalid {
-    & {
-      background-color: var(--theme-input--background--invalid);
-      border-color: var(--theme-input--border-color--invalid);
-    }
-
-    & {
-      border-color: var(--theme-input--border-color--invalid) !important;
-    }
-
-    &:hover {
-      border-color: var(--theme-input--border-color--invalid--hover) !important;
-    }
-
-    &:active {
-      border-color: var(--theme-input--border-color--invalid--active) !important;
-    }
-  }
 }
 
 @include form;

package/components/field-label.js

@@ -1,127 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { b as a11yHostAttributes } from './a11y.js';
-import { m as makeRef } from './make-ref.js';
-import { d as defineCustomElement$1 } from './typography.js';
-
-function isIxInputFieldComponent(obj) {
-    return (obj &&
-        'getAssociatedFormElement' in obj &&
-        typeof obj.getAssociatedFormElement === 'function' &&
-        'getNativeInputElement' in obj &&
-        typeof obj.getNativeInputElement === 'function');
-}
-
-const fieldLabelCss = ":host{display:inline-block;position:relative;margin-top:0.5rem;margin-bottom:0.25rem}";
-const IxFieldLabelStyle0 = fieldLabelCss;
-
-const FormFieldLabel = /*@__PURE__*/ proxyCustomElement(class FormFieldLabel extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.observer = new MutationObserver(() => this.checkForRequired());
-        this.a11yAttributes = {};
-        this.labelRef = makeRef();
-        this.required = undefined;
-        this.htmlFor = undefined;
-        this.controlRef = undefined;
-    }
-    connectedCallback() {
-        this.registerObserver();
-    }
-    disconnectedCallback() {
-        this.destroyObserver();
-    }
-    componentWillRender() {
-        this.checkForRequired();
-    }
-    componentWillLoad() {
-        this.a11yAttributes = a11yHostAttributes(this.hostElement);
-    }
-    destroyObserver() {
-        if (this.observer) {
-            this.observer.disconnect();
-        }
-    }
-    registerObserver() {
-        if (typeof window === 'undefined') {
-            return;
-        }
-        this.destroyObserver();
-        if (!this.htmlFor) {
-            return;
-        }
-        this.observer.observe(window.document, {
-            childList: true,
-            subtree: true,
-        });
-    }
-    async checkForRequired() {
-        if (this.htmlFor) {
-            const forElement = document.getElementById(this.htmlFor);
-            if (forElement && typeof forElement.required === 'boolean') {
-                this.required = forElement.required;
-            }
-        }
-        if (this.controlRef) {
-            const input = await this.controlRef.waitForCurrent();
-            this.required = input.required;
-        }
-    }
-    async focusOnClick() {
-        if (this.htmlFor) {
-            const target = document.getElementById(this.htmlFor);
-            if (target) {
-                let input = null;
-                if (isIxInputFieldComponent(target)) {
-                    input = await target.getNativeInputElement();
-                }
-                else {
-                    input = target;
-                }
-                if (typeof input.focus === 'function') {
-                    input.focus();
-                }
-            }
-        }
-        if (this.controlRef) {
-            (await this.controlRef.waitForCurrent()).focus();
-        }
-    }
-    render() {
-        return (h(Host, { key: '592ea81fa356fe38e4285116d8adea47b220dbd7', onClick: () => this.focusOnClick() }, h("label", Object.assign({ key: '2324be02438bc1807946b721a97c59b691d45db3', htmlFor: this.htmlFor }, this.a11yAttributes, { ref: this.labelRef }), h("ix-typography", { key: '3f4eeee6788394ee0afc92898f98284432213670', color: "soft", format: "label" }, h("slot", { key: '8a48ad5fe9ae212e0efb7cd9d507d5de3ef7ce99' }), this.required && h("span", { key: 'c387f27c7d1fef89f3ed5ecde0d113116a7b83fd' }, "\u00A0*")))));
-    }
-    get hostElement() { return this; }
-    static get watchers() { return {
-        "htmlFor": ["registerObserver"]
-    }; }
-    static get style() { return IxFieldLabelStyle0; }
-}, [1, "ix-field-label", {
-        "required": [1540],
-        "htmlFor": [513, "html-for"],
-        "controlRef": [16]
-    }, undefined, {
-        "htmlFor": ["registerObserver"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ix-field-label", "ix-typography"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ix-field-label":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, FormFieldLabel);
-            }
-            break;
-        case "ix-typography":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { FormFieldLabel as F, defineCustomElement as d };
-
-//# sourceMappingURL=field-label.js.map

package/components/field-label.js.map

@@ -1 +0,0 @@
-{"file":"field-label.js","mappings":"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","names":[],"sources":["src/components/utils/field/index.ts","src/components/field-label/field-label.scss?tag=ix-field-label&encapsulation=shadow","src/components/field-label/field-label.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { EventEmitter } from '@stencil/core';\nimport { IxComponent } from '../internal';\n\nexport * from './validation';\n\nexport interface FieldWrapperInterface {\n  /**\n   * Label for the field component\n   */\n  label?: string;\n  /**\n   * Show text below the field component which show additional information\n   */\n  helperText?: string;\n  /**\n   * Info text for the field component\n   */\n  infoText?: string;\n  /**\n   * Warning text for the field component\n   */\n  warningText?: string;\n  /**\n   * Error text for the field component\n   */\n  invalidText?: string;\n  /**\n   * Valid text for the field component\n   */\n  validText?: string;\n  /**\n   * Show helper, info, warning, error and valid text as tooltip\n   */\n  showTextAsTooltip?: boolean;\n}\n\nexport type HTMLIxFormComponentElement<T> = HTMLElement & IxFormComponent<T>;\nexport type HTMLIxInputFieldComponentElement<T> =\n  HTMLIxFormComponentElement<T> & IxInputFieldComponent<T>;\n\nexport interface IxFormValidationState {\n  // Annotate as @State()\n  isInvalid: boolean;\n  // Annotate as @State()\n  isValid: boolean;\n  // Annotate as @State()\n  isInfo: boolean;\n  // Annotate as @State()\n  isWarning: boolean;\n}\n\nexport interface IxFormComponent<T = string> extends IxComponent {\n  // Private internal\n  formInternals: ElementInternals;\n\n  // Annotate as @Prop({ reflect: true })\n  required?: boolean;\n  // Annotate as @Prop({ reflect: true })\n  name?: string;\n  // Annotate as @Prop()\n  value?: T;\n  // Annotate as @Prop()\n  disabled: boolean;\n\n  valueChange: EventEmitter<T>;\n  updateFormInternalValue(value: T): void;\n  hasValidValue(): Promise<boolean>;\n  getValidityState?(): Promise<ValidityState>;\n  getAssociatedFormElement(): Promise<HTMLFormElement | null>;\n}\n\nexport interface IxInputFieldComponent<T = string>\n  extends IxFormComponent<T>,\n    IxFormValidationState,\n    FieldWrapperInterface {\n  // Annotate as @Prop()\n  placeholder?: string;\n  // Annotate as @Prop()\n  readonly: boolean;\n\n  ixBlur: EventEmitter<void>;\n\n  // Annotate as @Method()\n  getNativeInputElement(): Promise<HTMLInputElement | HTMLTextAreaElement>;\n}\n\nexport function isIxInputFieldComponent(\n  obj: HTMLElement\n): obj is HTMLIxInputFieldComponentElement<unknown> {\n  return (\n    obj &&\n    'getAssociatedFormElement' in obj &&\n    typeof obj.getAssociatedFormElement === 'function' &&\n    'getNativeInputElement' in obj &&\n    typeof obj.getNativeInputElement === 'function'\n  );\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: inline-block;\n  position: relative;\n\n  margin-top: 0.5rem;\n  margin-bottom: 0.25rem;\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Host, Prop, h, Element, Watch } from '@stencil/core';\nimport { IxComponent } from '../utils/internal';\nimport {\n  HTMLIxFormComponentElement,\n  isIxInputFieldComponent,\n} from '../utils/field';\nimport { A11yAttributes, a11yHostAttributes } from '../utils/a11y';\nimport { MakeRef, makeRef } from '../utils/make-ref';\n\n@Component({\n  tag: 'ix-field-label',\n  styleUrl: 'field-label.scss',\n  shadow: true,\n})\nexport class FormFieldLabel implements IxComponent {\n  @Element() hostElement!: HTMLIxFieldLabelElement;\n\n  /**\n   * A value is required or must be checked for the form to be submittable\n   */\n  @Prop({ reflect: true, mutable: true }) required?: boolean;\n\n  /**\n   * The id of the form element that the label is associated with\n   */\n  @Prop({ reflect: true }) htmlFor?: string;\n\n  /** @internal */\n  @Prop() controlRef?: MakeRef<HTMLElement>;\n\n  private observer = new MutationObserver(() => this.checkForRequired());\n  private a11yAttributes: A11yAttributes = {};\n  private labelRef = makeRef<HTMLLabelElement>();\n\n  connectedCallback() {\n    this.registerObserver();\n  }\n\n  disconnectedCallback(): void {\n    this.destroyObserver();\n  }\n\n  componentWillRender() {\n    this.checkForRequired();\n  }\n\n  componentWillLoad(): void | Promise<void> {\n    this.a11yAttributes = a11yHostAttributes(this.hostElement);\n  }\n\n  private destroyObserver() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  @Watch('htmlFor')\n  private registerObserver() {\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    this.destroyObserver();\n\n    if (!this.htmlFor) {\n      return;\n    }\n\n    this.observer.observe(window.document, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  private async checkForRequired() {\n    if (this.htmlFor) {\n      const forElement = document.getElementById(\n        this.htmlFor\n      ) as HTMLIxFormComponentElement<unknown>;\n      if (forElement && typeof forElement.required === 'boolean') {\n        this.required = forElement.required;\n      }\n    }\n\n    if (this.controlRef) {\n      const input = await this.controlRef.waitForCurrent();\n      this.required = (\n        input as HTMLInputElement | HTMLTextAreaElement\n      ).required;\n    }\n  }\n\n  private async focusOnClick() {\n    if (this.htmlFor) {\n      const target = document.getElementById(this.htmlFor);\n      if (target) {\n        let input: HTMLElement | null = null;\n        if (isIxInputFieldComponent(target)) {\n          input = await target.getNativeInputElement();\n        } else {\n          input = target;\n        }\n        if (typeof input.focus === 'function') {\n          input.focus();\n        }\n      }\n    }\n\n    if (this.controlRef) {\n      (await this.controlRef.waitForCurrent()).focus();\n    }\n  }\n\n  render() {\n    return (\n      <Host onClick={() => this.focusOnClick()}>\n        <label\n          htmlFor={this.htmlFor}\n          {...this.a11yAttributes}\n          ref={this.labelRef}\n        >\n          <ix-typography color=\"soft\" format=\"label\">\n            <slot></slot>\n            {this.required && <span>&nbsp;*</span>}\n          </ix-typography>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/field-wrapper.js

@@ -1,97 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { m as makeRef } from './make-ref.js';
-import { r as renderHelperText } from './helper-text-util.js';
-import { d as defineCustomElement$3 } from './field-label.js';
-import { d as defineCustomElement$2 } from './tooltip.js';
-import { d as defineCustomElement$1 } from './typography.js';
-
-const fieldWrapperCss = ":host{display:flex;position:relative;flex-direction:column}:host .slot-wrapper{display:flex;position:relative;align-items:center;justify-content:flex-start;gap:0.25rem}:host .field-bottom,:host .field-top{display:flex;flex-direction:row;position:relative;align-items:baseline;justify-content:space-between;gap:1rem;width:-moz-min-content;width:min-content;min-width:100%}:host .field-bottom .bottom-right{margin-left:auto;margin-right:0px}:host .bottom-text{display:flex;position:relative;align-items:flex-start;justify-content:flex-start;gap:0.25rem;margin-right:0.25rem}:host .text-icon{margin:0.125rem}:host .text-icon.invalid{color:var(--theme-helper-icon--color--invalid)}:host .text-icon.info{color:var(--theme-helper-icon--color--info)}:host .text-icon.warning{color:var(--theme-helper-icon--color--warning)}:host .text-icon.valid{color:var(--theme-helper-icon--color--valid)}:host .bottom-text{margin-top:0.25rem}:host(.text-behind-slotted-element){flex-direction:row;align-items:flex-start}:host(.text-behind-slotted-element) .bottom-text{margin-top:0.5rem;margin-left:0.5rem}";
-const IxFieldWrapperStyle0 = fieldWrapperCss;
-
-const FieldWrapper = /*@__PURE__*/ proxyCustomElement(class FieldWrapper extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.slotRef = makeRef();
-        this.helperText = undefined;
-        this.label = undefined;
-        this.invalidText = undefined;
-        this.validText = undefined;
-        this.infoText = undefined;
-        this.warningText = undefined;
-        this.isInvalid = false;
-        this.isValid = false;
-        this.isInfo = false;
-        this.isWarning = false;
-        this.showTextAsTooltip = false;
-        this.required = false;
-        this.htmlForLabel = undefined;
-        this.controlRef = undefined;
-    }
-    render() {
-        const textOptions = {
-            invalidText: this.invalidText,
-            isInvalid: this.isInvalid,
-            isValid: this.isValid,
-            validText: this.validText,
-            isWarning: this.isWarning,
-            warningText: this.warningText,
-            isInfo: this.isInfo,
-            infoText: this.infoText,
-            helperText: this.helperText,
-        };
-        return (h(Host, { key: 'abac5f314a561b000189c733e3f91a371dc3e4b7' }, h("div", { key: '007488d9b928ee7b5ad2f56a80860d32306ec77f', class: "field-top" }, this.label && (h("ix-field-label", { key: '13267ade8d55d0233160e9f796616d2e65999a34', required: this.required, htmlFor: this.htmlForLabel, controlRef: this.controlRef }, this.label)), h("slot", { key: '6b7c58e1ff035f8f3cfa4e0b7b0d7f9cbbd9c572', name: "label" }), h("slot", { key: 'f174f3f66045d74ad4e31d44dca9bf05f4e33db4', name: "top-right" })), h("div", { key: '08216ad8711e4df6df1177392fba6445b31fab87', class: {
-                'slot-wrapper': true,
-            }, ref: this.slotRef }, h("slot", { key: '10222a8ce126fadcf97e41610fc0b72f52330bd0' })), h("div", { key: '942bfe9452312713d3d63d56c4eede5711af4fde', class: 'field-bottom' }, !this.showTextAsTooltip && renderHelperText(textOptions), h("div", { key: '9ec72ec64106298218deb4d5be627a325e579936', class: "bottom-right" }, h("slot", { key: '5ec6a10b820193843cb29d1b09c77d3793799b35', name: "bottom-right" }))), this.showTextAsTooltip === true && (h("ix-tooltip", { key: '93eb798d342a4187e521f1072cf34f1e5cb9b5da', for: this.slotRef.waitForCurrent(), showDelay: 500 }, renderHelperText(textOptions)))));
-    }
-    get hostElement() { return this; }
-    static get style() { return IxFieldWrapperStyle0; }
-}, [1, "ix-field-wrapper", {
-        "helperText": [1, "helper-text"],
-        "label": [1],
-        "invalidText": [1, "invalid-text"],
-        "validText": [1, "valid-text"],
-        "infoText": [1, "info-text"],
-        "warningText": [1, "warning-text"],
-        "isInvalid": [4, "is-invalid"],
-        "isValid": [4, "is-valid"],
-        "isInfo": [4, "is-info"],
-        "isWarning": [4, "is-warning"],
-        "showTextAsTooltip": [4, "show-text-as-tooltip"],
-        "required": [4],
-        "htmlForLabel": [1, "html-for-label"],
-        "controlRef": [16]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ix-field-wrapper", "ix-field-label", "ix-tooltip", "ix-typography"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ix-field-wrapper":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, FieldWrapper);
-            }
-            break;
-        case "ix-field-label":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "ix-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "ix-typography":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { FieldWrapper as F, defineCustomElement as d };
-
-//# sourceMappingURL=field-wrapper.js.map

package/components/field-wrapper.js.map

@@ -1 +0,0 @@
-{"file":"field-wrapper.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,+jCAA+jC,CAAC;AACxlC,6BAAe,eAAe;;MCUjB,YAAY;;;;;QAyEf,YAAO,GAAG,OAAO,EAAkB,CAAC;;;;;;;yBArCf,KAAK;uBAKP,KAAK;sBAKN,KAAK;yBAKF,KAAK;iCAKG,KAAK;wBAKd,KAAK;;;;IAcjC,MAAM;QACJ,MAAM,WAAW,GAAG;YAClB,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,UAAU,EAAE,IAAI,CAAC,UAAU;SAC5B,CAAC;QACF,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,WAAW,IACnB,IAAI,CAAC,KAAK,KACT,uEACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,UAAU,EAAE,IAAI,CAAC,UAAU,IAE1B,IAAI,CAAC,KAAK,CACI,CAClB,EACD,6DAAM,IAAI,EAAC,OAAO,GAAQ,EAC1B,6DAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,EACN,4DACE,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;aACrB,EACD,GAAG,EAAE,IAAI,CAAC,OAAO,IAEjB,8DAAa,CACT,EACN,4DAAK,KAAK,EAAE,cAAc,IACvB,CAAC,IAAI,CAAC,iBAAiB,IAAI,gBAAgB,CAAC,WAAW,CAAC,EACzD,4DAAK,KAAK,EAAC,cAAc,IACvB,6DAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B,CACF,EACL,IAAI,CAAC,iBAAiB,KAAK,IAAI,KAC9B,mEAAY,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,SAAS,EAAE,GAAG,IAC3D,gBAAgB,CAAC,WAAW,CAAC,CACnB,CACd,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/field-wrapper/field-wrapper.scss?tag=ix-field-wrapper&encapsulation=shadow","src/components/field-wrapper/field-wrapper.tsx"],"sourcesContent":["@import \"./field-wrapper.mixins.scss\";\n\n:host {\n  display: flex;\n  position: relative;\n  flex-direction: column;\n\n  .slot-wrapper {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 0.25rem;\n  }\n\n  .field-bottom,\n  .field-top {\n    display: flex;\n    flex-direction: row;\n    position: relative;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: 1rem;\n    width: min-content;\n    min-width: 100%;\n  }\n\n  .field-bottom .bottom-right {\n    margin-left: auto;\n    margin-right: 0px;\n  }\n\n  @include helper-text;\n\n  .bottom-text {\n    margin-top: 0.25rem;\n  }\n}\n\n:host(.text-behind-slotted-element) {\n  flex-direction: row;\n  align-items: flex-start;\n\n  .bottom-text {\n    margin-top: 0.5rem;\n    margin-left: 0.5rem;\n  }\n}\n","import { Component, Element, Host, Prop, h } from '@stencil/core';\nimport { FieldWrapperInterface } from '../utils/field';\nimport { MakeRef, makeRef } from '../utils/make-ref';\nimport { renderHelperText } from './helper-text-util';\n\n/** @internal */\n@Component({\n  tag: 'ix-field-wrapper',\n  styleUrl: 'field-wrapper.scss',\n  shadow: true,\n})\nexport class FieldWrapper implements FieldWrapperInterface {\n  @Element() hostElement!: HTMLIxFieldWrapperElement;\n\n  /**\n   * Show text below the field component\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Label for the field component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Error text for the field component\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * Valid text for the field component\n   */\n  @Prop() validText?: string;\n\n  /**\n   * Info text for the field component\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Warning text for the field component\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * Is the field component invalid\n   */\n  @Prop() isInvalid: boolean = false;\n\n  /**\n   * Is the field component valid\n   */\n  @Prop() isValid: boolean = false;\n\n  /**\n   * Is the field component info\n   */\n  @Prop() isInfo: boolean = false;\n\n  /**\n   * Is the field component warning\n   */\n  @Prop() isWarning: boolean = false;\n\n  /**\n   * Show helper, error, info, warning text as tooltip\n   */\n  @Prop() showTextAsTooltip: boolean = false;\n\n  /**\n   * Show label as required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The id of the form element that the label is associated with\n   */\n  @Prop() htmlForLabel?: string;\n\n  /**\n   * The control element that the label is associated with\n   */\n  @Prop() controlRef?: MakeRef<HTMLElement>;\n\n  private slotRef = makeRef<HTMLDivElement>();\n\n  render() {\n    const textOptions = {\n      invalidText: this.invalidText,\n      isInvalid: this.isInvalid,\n      isValid: this.isValid,\n      validText: this.validText,\n      isWarning: this.isWarning,\n      warningText: this.warningText,\n      isInfo: this.isInfo,\n      infoText: this.infoText,\n      helperText: this.helperText,\n    };\n    return (\n      <Host>\n        <div class=\"field-top\">\n          {this.label && (\n            <ix-field-label\n              required={this.required}\n              htmlFor={this.htmlForLabel}\n              controlRef={this.controlRef}\n            >\n              {this.label}\n            </ix-field-label>\n          )}\n          <slot name=\"label\"></slot>\n          <slot name=\"top-right\"></slot>\n        </div>\n        <div\n          class={{\n            'slot-wrapper': true,\n          }}\n          ref={this.slotRef}\n        >\n          <slot></slot>\n        </div>\n        <div class={'field-bottom'}>\n          {!this.showTextAsTooltip && renderHelperText(textOptions)}\n          <div class=\"bottom-right\">\n            <slot name=\"bottom-right\"></slot>\n          </div>\n        </div>\n        {this.showTextAsTooltip === true && (\n          <ix-tooltip for={this.slotRef.waitForCurrent()} showDelay={500}>\n            {renderHelperText(textOptions)}\n          </ix-tooltip>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/helper-text-util.js

@@ -1,48 +0,0 @@
-import { h } from '@stencil/core/internal/client';
-
-/* Siemens iX Icons */
-const iconCalendar = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='scheduler' transform='translate(64.000000, 64.000000)'><path d='M384,1.42108547e-14 L384,384 L1.42108547e-14,384 L1.42108547e-14,1.42108547e-14 L384,1.42108547e-14 Z M341.333333,128 L42.6666667,128 L42.6666667,341.333333 L341.333333,341.333333 L341.333333,128 Z M128,256 L128,298.666667 L85.3333333,298.666667 L85.3333333,256 L128,256 Z M213.333333,256 L213.333333,298.666667 L170.666667,298.666667 L170.666667,256 L213.333333,256 Z M298.666667,256 L298.666667,298.666667 L256,298.666667 L256,256 L298.666667,256 Z M128,170.666667 L128,213.333333 L85.3333333,213.333333 L85.3333333,170.666667 L128,170.666667 Z M213.333333,170.666667 L213.333333,213.333333 L170.666667,213.333333 L170.666667,170.666667 L213.333333,170.666667 Z M298.666667,170.666667 L298.666667,213.333333 L256,213.333333 L256,170.666667 L298.666667,170.666667 Z M341.333333,42.6666667 L42.6666667,42.6666667 L42.6666667,85.3333333 L341.333333,85.3333333 L341.333333,42.6666667 Z' id='Combined-Shape'/></g></g></svg>";
-const iconError = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='add' transform='translate(42.666667, 42.666667)'><path d='M213.333333,3.55271368e-14 C331.136,3.55271368e-14 426.666667,95.5306667 426.666667,213.333333 C426.666667,331.136 331.136,426.666667 213.333333,426.666667 C95.5306667,426.666667 3.55271368e-14,331.136 3.55271368e-14,213.333333 C3.55271368e-14,95.5306667 95.5306667,3.55271368e-14 213.333333,3.55271368e-14 Z M213.333333,42.6666667 C119.232,42.6666667 42.6666667,119.232 42.6666667,213.333333 C42.6666667,307.434667 119.232,384 213.333333,384 C307.434667,384 384,307.434667 384,213.333333 C384,119.232 307.434667,42.6666667 213.333333,42.6666667 Z M262.250667,134.250667 L292.416,164.416 L243.498667,213.333333 L292.416,262.250667 L262.250667,292.416 L213.333333,243.498667 L164.416,292.416 L134.250667,262.250667 L183.168,213.333333 L134.250667,164.416 L164.416,134.250667 L213.333333,183.168 L262.250667,134.250667 Z' id='error'/></g></g></svg>";
-const iconEyeCancelled = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'><path fill-rule='evenodd' d='M47.0849493,2.84217094e-14 L185.740632,138.655563 C194.095501,134.657276 203.45297,132.418278 213.333333,132.418278 C248.679253,132.418278 277.333333,161.072358 277.333333,196.418278 C277.333333,206.299034 275.094157,215.656855 271.095572,224.011976 L409.751616,362.666662 L379.581717,392.836561 L320.374817,333.628896 C291.246618,353.329494 255.728838,367.084945 213.333333,367.084945 C64,367.084945 7.10542736e-15,196.418278 7.10542736e-15,196.418278 C7.10542736e-15,196.418278 22.862032,135.452859 73.1408088,86.3974274 L16.9150553,30.169894 L47.0849493,2.84217094e-14 Z M103.440016,116.694904 C74.7091717,144.512844 55.9626236,177.598744 46.7136,196.424891 C64.7370667,233.114811 119.071573,324.418278 213.333333,324.418278 C242.440012,324.418278 267.739844,315.712374 289.339919,302.595012 L240.926035,254.180993 C232.571166,258.17928 223.213696,260.418278 213.333333,260.418278 C177.987413,260.418278 149.333333,231.764198 149.333333,196.418278 C149.333333,186.537915 151.572331,177.180445 155.570618,168.825577 Z M213.333333,25.7516113 C362.666667,25.7516113 426.666667,196.418278 426.666667,196.418278 C426.666667,196.418278 412.428071,234.387867 381.712212,274.508373 L351.151213,243.941206 C364.581948,225.697449 374.142733,208.239347 379.954347,196.410385 C361.9296,159.721745 307.595093,68.418278 213.333333,68.418278 C201.495833,68.418278 190.287983,69.858232 179.702584,72.449263 L145.662385,38.4000762 C165.913597,30.494948 188.437631,25.7516113 213.333333,25.7516113 Z' transform='translate(42.667 59.582)'/></svg>";
-const iconEye = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='Shape' transform='translate(42.666667, 85.333333)'><path d='M213.333333,1.42108547e-14 C64,1.42108547e-14 7.10542736e-15,170.666667 7.10542736e-15,170.666667 C7.10542736e-15,170.666667 64,341.333333 213.333333,341.333333 C362.666667,341.333333 426.666667,170.666667 426.666667,170.666667 C426.666667,170.666667 362.666667,1.42108547e-14 213.333333,1.42108547e-14 Z M213.333333,298.666667 C119.071573,298.666667 64.7370667,207.3632 46.7136,170.67328 C64.7850667,133.88928 119.114667,42.6666667 213.333333,42.6666667 C307.595093,42.6666667 361.9296,133.970133 379.954347,170.658773 C361.8816,207.444053 307.552,298.666667 213.333333,298.666667 Z M213.333333,96 C172.096427,96 138.666667,129.42976 138.666667,170.666667 C138.666667,211.903573 172.096427,245.333333 213.333333,245.333333 C254.57024,245.333333 288,211.903573 288,170.666667 C288,129.42976 254.57024,96 213.333333,96 Z M213.333333,202.666667 C195.688747,202.666667 181.333333,188.311253 181.333333,170.666667 C181.333333,153.02208 195.688747,138.666667 213.333333,138.666667 C230.97792,138.666667 245.333333,153.02208 245.333333,170.666667 C245.333333,188.311253 230.97792,202.666667 213.333333,202.666667 Z'/></g></g></svg>";
-const iconInfo = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='add' transform='translate(42.666667, 42.666667)'><path d='M213.333333,3.55271368e-14 C95.51296,3.55271368e-14 3.55271368e-14,95.51168 3.55271368e-14,213.333333 C3.55271368e-14,331.153707 95.51296,426.666667 213.333333,426.666667 C331.154987,426.666667 426.666667,331.153707 426.666667,213.333333 C426.666667,95.51168 331.154987,3.55271368e-14 213.333333,3.55271368e-14 Z M213.333333,384 C119.227947,384 42.6666667,307.43872 42.6666667,213.333333 C42.6666667,119.227947 119.227947,42.6666667 213.333333,42.6666667 C307.44,42.6666667 384,119.227947 384,213.333333 C384,307.43872 307.44,384 213.333333,384 Z M240.04672,128 C240.04672,143.46752 228.785067,154.666667 213.55008,154.666667 C197.698773,154.666667 186.713387,143.46752 186.713387,127.704107 C186.713387,112.5536 197.99616,101.333333 213.55008,101.333333 C228.785067,101.333333 240.04672,112.5536 240.04672,128 Z M192.04672,192 L234.713387,192 L234.713387,320 L192.04672,320 L192.04672,192 Z' id='Shape'/></g></g></svg>";
-const iconMinus = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='add' transform='translate(64.000000, 234.666667)'><rect id='Combined-Shape' x='0' y='0' width='384' height='42.6666667'/></g></g></svg>";
-const iconPlus = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='uncollapse' transform='translate(64.000000, 64.000000)'><path d='M213.333333,1.42108547e-14 L213.333,170.666 L384,170.666667 L384,213.333333 L213.333,213.333 L213.333333,384 L170.666667,384 L170.666,213.333 L1.42108547e-14,213.333333 L1.42108547e-14,170.666667 L170.666,170.666 L170.666667,1.42108547e-14 L213.333333,1.42108547e-14 Z'/></g></g></svg>";
-const iconSuccess = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='add-copy' transform='translate(42.666667, 42.666667)'><path d='M213.333333,3.55271368e-14 C95.51296,3.55271368e-14 3.55271368e-14,95.51296 3.55271368e-14,213.333333 C3.55271368e-14,331.153707 95.51296,426.666667 213.333333,426.666667 C331.153707,426.666667 426.666667,331.153707 426.666667,213.333333 C426.666667,95.51296 331.153707,3.55271368e-14 213.333333,3.55271368e-14 Z M213.333333,384 C119.227947,384 42.6666667,307.43872 42.6666667,213.333333 C42.6666667,119.227947 119.227947,42.6666667 213.333333,42.6666667 C307.43872,42.6666667 384,119.227947 384,213.333333 C384,307.43872 307.438933,384 213.333333,384 Z M293.669333,137.114453 L323.835947,167.281067 L192,299.66912 L112.916693,220.585813 L143.083307,190.4192 L192,239.335893 L293.669333,137.114453 Z' id='Shape'/></g></g></svg>";
-const iconWarning = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='add' transform='translate(32.000000, 42.666667)'><path d='M246.312928,5.62892705 C252.927596,9.40873724 258.409564,14.8907053 262.189374,21.5053731 L444.667042,340.84129 C456.358134,361.300701 449.250007,387.363834 428.790595,399.054926 C422.34376,402.738832 415.04715,404.676552 407.622001,404.676552 L42.6666667,404.676552 C19.1025173,404.676552 7.10542736e-15,385.574034 7.10542736e-15,362.009885 C7.10542736e-15,354.584736 1.93772021,347.288125 5.62162594,340.84129 L188.099293,21.5053731 C199.790385,1.04596203 225.853517,-6.06216498 246.312928,5.62892705 Z M225.144334,42.6739678 L42.6666667,362.009885 L407.622001,362.009885 L225.144334,42.6739678 Z M224,272 C239.238095,272 250.666667,283.264 250.666667,298.624 C250.666667,313.984 239.238095,325.248 224,325.248 C208.415584,325.248 197.333333,313.984 197.333333,298.282667 C197.333333,283.264 208.761905,272 224,272 Z M245.333333,106.666667 L245.333333,234.666667 L202.666667,234.666667 L202.666667,106.666667 L245.333333,106.666667 Z' id='Combined-Shape'/></g></g></svg>";
-
-/*
- * 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.
- */
-function renderHelperText({ isInvalid, invalidText, isWarning, warningText, isInfo, infoText, isValid, validText, helperText, }) {
-    if (isInvalid && invalidText !== undefined) {
-        return (h("ix-typography", { color: "alarm", class: "bottom-text" },
-            h("ix-icon", { class: "text-icon invalid", name: iconError, size: "16" }),
-            invalidText));
-    }
-    if (isWarning && warningText !== undefined) {
-        return (h("ix-typography", { color: "std", class: "bottom-text" },
-            h("ix-icon", { class: "text-icon warning", name: iconWarning, size: "16" }),
-            warningText));
-    }
-    if (isInfo && infoText !== undefined) {
-        return (h("ix-typography", { color: "std", class: "bottom-text" },
-            h("ix-icon", { class: "text-icon info", name: iconInfo, size: "16" }),
-            infoText));
-    }
-    if (isValid && validText !== undefined) {
-        return (h("ix-typography", { color: "std", class: "bottom-text" },
-            h("ix-icon", { class: "text-icon valid", name: iconSuccess, size: "16" }),
-            validText));
-    }
-    return (helperText && (h("ix-typography", { class: "bottom-text", color: "soft" }, helperText)));
-}
-
-export { iconMinus as a, iconPlus as b, iconEye as c, iconEyeCancelled as d, iconCalendar as i, renderHelperText as r };
-
-//# sourceMappingURL=helper-text-util.js.map