@siemens/ix 3.0.0-alpha.3 → 3.0.0-alpha.4

package/dist/collection/components/event-list-item/event-list-item.js

@@ -59,6 +59,7 @@ export class EventListItem {
         return {
             "itemColor": {
                 "type": "string",
+                "attribute": "item-color",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -76,11 +77,11 @@ export class EventListItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "item-color",
                 "reflect": false
             },
             "selected": {
                 "type": "boolean",
+                "attribute": "selected",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -95,12 +96,12 @@ export class EventListItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "selected",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -115,12 +116,12 @@ export class EventListItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "chevron": {
                 "type": "boolean",
+                "attribute": "chevron",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -135,7 +136,6 @@ export class EventListItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "chevron",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/dist/collection/components/expanding-search/expanding-search.js

@@ -115,6 +115,7 @@ export class ExpandingSearch {
         return {
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -129,11 +130,11 @@ export class ExpandingSearch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -148,12 +149,12 @@ export class ExpandingSearch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": false,
                 "defaultValue": "'Enter text here'"
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -168,12 +169,12 @@ export class ExpandingSearch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "fullWidth": {
                 "type": "boolean",
+                "attribute": "full-width",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -191,12 +192,12 @@ export class ExpandingSearch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "full-width",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "variant": {
                 "type": "string",
+                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "ButtonVariant",
@@ -217,12 +218,12 @@ export class ExpandingSearch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variant",
                 "reflect": false,
                 "defaultValue": "'primary'"
             },
             "outline": {
                 "type": "boolean",
+                "attribute": "outline",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -237,12 +238,12 @@ export class ExpandingSearch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "outline",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "ghost": {
                 "type": "boolean",
+                "attribute": "ghost",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -257,7 +258,6 @@ export class ExpandingSearch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "ghost",
                 "reflect": false,
                 "defaultValue": "true"
             }

package/dist/collection/components/field-label/field-label.js

@@ -113,7 +113,7 @@ export class FormFieldLabel {
         }
     }
     render() {
-        return (h(Host, { key: '4b00ea62a90eae362b7236d82a08f031c075c10d', onClick: () => this.focusOnClick() }, h("label", Object.assign({ key: '1c3e406baa6b6414cacf17961279bcd7ad1545ca', htmlFor: this.htmlFor }, this.a11yAttributes, { ref: this.labelRef }), h("ix-typography", { key: '54c5e7cbd6c505edbe2c37a20ecbecd91deb441b', textColor: this.isInvalid ? 'alarm' : 'soft', format: "label" }, h("slot", { key: '9638a38954088cff1cd539f1b49ef70778b4ff21' }), this.required && h("span", { key: 'b30063403d1e99121191ce945665781cba7ba34b' }, "\u00A0*")))));
+        return (h(Host, { key: '4b00ea62a90eae362b7236d82a08f031c075c10d', onClick: () => this.focusOnClick() }, h("label", Object.assign({ key: '1c3e406baa6b6414cacf17961279bcd7ad1545ca', htmlFor: this.htmlFor }, this.a11yAttributes, { ref: this.labelRef }), h("ix-typography", { key: '54c5e7cbd6c505edbe2c37a20ecbecd91deb441b', textColor: this.isInvalid ? 'alarm' : 'soft', format: "label" }, h("slot", { key: '9638a38954088cff1cd539f1b49ef70778b4ff21' }), this.required && h("span", { key: 'b30063403d1e99121191ce945665781cba7ba34b' }, "*")))));
     }
     static get is() { return "ix-field-label"; }
     static get encapsulation() { return "shadow"; }
@@ -131,6 +131,7 @@ export class FormFieldLabel {
         return {
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -145,11 +146,11 @@ export class FormFieldLabel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": true
             },
             "htmlFor": {
                 "type": "string",
+                "attribute": "html-for",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -164,11 +165,11 @@ export class FormFieldLabel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "html-for",
                 "reflect": true
             },
             "controlRef": {
                 "type": "unknown",
+                "attribute": "control-ref",
                 "mutable": false,
                 "complexType": {
                     "original": "| MakeRef<HTMLElement>\n    | MakeRef<HTMLInputElement>\n    | MakeRef<HTMLTextAreaElement>",
@@ -207,6 +208,7 @@ export class FormFieldLabel {
             },
             "isInvalid": {
                 "type": "boolean",
+                "attribute": "is-invalid",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -224,7 +226,6 @@ export class FormFieldLabel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "is-invalid",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/dist/collection/components/field-label/field-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-label.js","sourceRoot":"","sources":["../../../src/components/field-label/field-label.tsx"],"names":[],"mappings":"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","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\nimport { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { A11yAttributes, a11yHostAttributes } from '../utils/a11y';\nimport {\n  ClassMutationObserver,\n  createClassMutationObserver,\n  HTMLIxFormComponentElement,\n  isIxInputFieldComponent,\n} from '../utils/input';\nimport { IxComponent } from '../utils/internal';\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?:\n    | MakeRef<HTMLElement>\n    | MakeRef<HTMLInputElement>\n    | MakeRef<HTMLTextAreaElement>;\n\n  /** @internal */\n  @Prop({ mutable: true }) isInvalid: boolean = false;\n\n  private readonly htmlForObserver = new MutationObserver(() =>\n    this.checkForInternalState()\n  );\n  private htmlForClassObserver?: ClassMutationObserver;\n  private controlRefClassObserver?: ClassMutationObserver;\n  private a11yAttributes: A11yAttributes = {};\n  private readonly labelRef = makeRef<HTMLLabelElement>();\n\n  connectedCallback() {\n    this.registerHtmlForObserver();\n    this.registerControlRefObserver();\n  }\n\n  disconnectedCallback(): void {\n    if (this.htmlForObserver) {\n      this.htmlForObserver.disconnect();\n    }\n    if (this.htmlForClassObserver) {\n      this.htmlForClassObserver.destroy();\n    }\n    if (this.controlRefClassObserver) {\n      this.controlRefClassObserver.destroy();\n    }\n  }\n\n  componentWillRender() {\n    this.checkForInternalState();\n  }\n\n  componentWillLoad(): void | Promise<void> {\n    this.a11yAttributes = a11yHostAttributes(this.hostElement);\n  }\n\n  @Watch('htmlFor')\n  private registerHtmlForObserver() {\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    if (this.htmlForObserver) {\n      this.htmlForObserver.disconnect();\n    }\n\n    if (this.htmlFor) {\n      this.htmlForObserver.observe(window.document, {\n        childList: true,\n        subtree: true,\n      });\n    }\n  }\n\n  @Watch('controlRef')\n  private async registerControlRefObserver() {\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    if (this.controlRefClassObserver) {\n      this.controlRefClassObserver.destroy();\n    }\n\n    if (this.controlRef) {\n      const input = await this.controlRef.waitForCurrent();\n\n      this.controlRefClassObserver = createClassMutationObserver(input, () =>\n        this.checkForInvalidState(input)\n      );\n    }\n  }\n\n  private registerHtmlForClassObserver(\n    forElement: HTMLIxFormComponentElement<unknown>\n  ) {\n    if (this.htmlForClassObserver) {\n      this.htmlForClassObserver.destroy();\n    }\n\n    this.htmlForClassObserver = createClassMutationObserver(forElement, () =>\n      this.checkForInvalidState(forElement)\n    );\n  }\n\n  private checkForInvalidState(elementToCheck: HTMLElement) {\n    this.isInvalid =\n      elementToCheck.classList.contains('is-invalid') ||\n      elementToCheck.classList.contains('ix-invalid');\n  }\n\n  private async checkForInternalState() {\n    if (this.htmlFor) {\n      const forElement = document.getElementById(\n        this.htmlFor\n      ) as HTMLIxFormComponentElement<unknown>;\n      if (forElement) {\n        if (typeof forElement.required === 'boolean') {\n          this.required = forElement.required;\n        }\n\n        this.registerHtmlForClassObserver(forElement);\n        this.checkForInvalidState(forElement);\n      }\n    }\n\n    if (this.controlRef) {\n      const input = await this.controlRef.waitForCurrent();\n      this.required = (\n        input as HTMLInputElement | HTMLTextAreaElement\n      ).required;\n    }\n  }\n\n  private async focusOnClick() {\n    if (this.htmlFor) {\n      const target = document.getElementById(this.htmlFor);\n      if (target) {\n        let input: HTMLElement | null = null;\n        if (isIxInputFieldComponent(target)) {\n          input = await target.getNativeInputElement();\n        } else {\n          input = target;\n        }\n        if (typeof input.focus === 'function') {\n          input.focus();\n        }\n      }\n    }\n\n    if (this.controlRef) {\n      (await this.controlRef.waitForCurrent()).focus();\n    }\n  }\n\n  render() {\n    return (\n      <Host onClick={() => this.focusOnClick()}>\n        <label\n          htmlFor={this.htmlFor}\n          {...this.a11yAttributes}\n          ref={this.labelRef}\n        >\n          <ix-typography\n            textColor={this.isInvalid ? 'alarm' : 'soft'}\n            format=\"label\"\n          >\n            <slot></slot>\n            {this.required && <span>&nbsp;*</span>}\n          </ix-typography>\n        </label>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"field-label.js","sourceRoot":"","sources":["../../../src/components/field-label/field-label.tsx"],"names":[],"mappings":"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","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\nimport { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { A11yAttributes, a11yHostAttributes } from '../utils/a11y';\nimport {\n  ClassMutationObserver,\n  createClassMutationObserver,\n  HTMLIxFormComponentElement,\n  isIxInputFieldComponent,\n} from '../utils/input';\nimport { IxComponent } from '../utils/internal';\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?:\n    | MakeRef<HTMLElement>\n    | MakeRef<HTMLInputElement>\n    | MakeRef<HTMLTextAreaElement>;\n\n  /** @internal */\n  @Prop({ mutable: true }) isInvalid: boolean = false;\n\n  private readonly htmlForObserver = new MutationObserver(() =>\n    this.checkForInternalState()\n  );\n  private htmlForClassObserver?: ClassMutationObserver;\n  private controlRefClassObserver?: ClassMutationObserver;\n  private a11yAttributes: A11yAttributes = {};\n  private readonly labelRef = makeRef<HTMLLabelElement>();\n\n  connectedCallback() {\n    this.registerHtmlForObserver();\n    this.registerControlRefObserver();\n  }\n\n  disconnectedCallback(): void {\n    if (this.htmlForObserver) {\n      this.htmlForObserver.disconnect();\n    }\n    if (this.htmlForClassObserver) {\n      this.htmlForClassObserver.destroy();\n    }\n    if (this.controlRefClassObserver) {\n      this.controlRefClassObserver.destroy();\n    }\n  }\n\n  componentWillRender() {\n    this.checkForInternalState();\n  }\n\n  componentWillLoad(): void | Promise<void> {\n    this.a11yAttributes = a11yHostAttributes(this.hostElement);\n  }\n\n  @Watch('htmlFor')\n  private registerHtmlForObserver() {\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    if (this.htmlForObserver) {\n      this.htmlForObserver.disconnect();\n    }\n\n    if (this.htmlFor) {\n      this.htmlForObserver.observe(window.document, {\n        childList: true,\n        subtree: true,\n      });\n    }\n  }\n\n  @Watch('controlRef')\n  private async registerControlRefObserver() {\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    if (this.controlRefClassObserver) {\n      this.controlRefClassObserver.destroy();\n    }\n\n    if (this.controlRef) {\n      const input = await this.controlRef.waitForCurrent();\n\n      this.controlRefClassObserver = createClassMutationObserver(input, () =>\n        this.checkForInvalidState(input)\n      );\n    }\n  }\n\n  private registerHtmlForClassObserver(\n    forElement: HTMLIxFormComponentElement<unknown>\n  ) {\n    if (this.htmlForClassObserver) {\n      this.htmlForClassObserver.destroy();\n    }\n\n    this.htmlForClassObserver = createClassMutationObserver(forElement, () =>\n      this.checkForInvalidState(forElement)\n    );\n  }\n\n  private checkForInvalidState(elementToCheck: HTMLElement) {\n    this.isInvalid =\n      elementToCheck.classList.contains('is-invalid') ||\n      elementToCheck.classList.contains('ix-invalid');\n  }\n\n  private async checkForInternalState() {\n    if (this.htmlFor) {\n      const forElement = document.getElementById(\n        this.htmlFor\n      ) as HTMLIxFormComponentElement<unknown>;\n      if (forElement) {\n        if (typeof forElement.required === 'boolean') {\n          this.required = forElement.required;\n        }\n\n        this.registerHtmlForClassObserver(forElement);\n        this.checkForInvalidState(forElement);\n      }\n    }\n\n    if (this.controlRef) {\n      const input = await this.controlRef.waitForCurrent();\n      this.required = (\n        input as HTMLInputElement | HTMLTextAreaElement\n      ).required;\n    }\n  }\n\n  private async focusOnClick() {\n    if (this.htmlFor) {\n      const target = document.getElementById(this.htmlFor);\n      if (target) {\n        let input: HTMLElement | null = null;\n        if (isIxInputFieldComponent(target)) {\n          input = await target.getNativeInputElement();\n        } else {\n          input = target;\n        }\n        if (typeof input.focus === 'function') {\n          input.focus();\n        }\n      }\n    }\n\n    if (this.controlRef) {\n      (await this.controlRef.waitForCurrent()).focus();\n    }\n  }\n\n  render() {\n    return (\n      <Host onClick={() => this.focusOnClick()}>\n        <label\n          htmlFor={this.htmlFor}\n          {...this.a11yAttributes}\n          ref={this.labelRef}\n        >\n          <ix-typography\n            textColor={this.isInvalid ? 'alarm' : 'soft'}\n            format=\"label\"\n          >\n            <slot></slot>\n            {this.required && <span>*</span>}\n          </ix-typography>\n        </label>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/field-label/tests/field-label.ct.js

@@ -18,7 +18,7 @@ regressionTest('renders', async ({ mount, page }) => {
 regressionTest('required', async ({ mount, page }) => {
     await mount(`<ix-field-label required>MyLabel</ix-field-label>`);
     const labelElement = page.locator('ix-field-label');
-    await expect(labelElement).toHaveText('MyLabel *');
+    await expect(labelElement).toHaveText('MyLabel*');
 });
 regressionTest('focus native input by label click', async ({ mount, page }) => {
     await mount(`

package/dist/collection/components/field-label/tests/field-label.ct.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-label.ct.js","sourceRoot":"","sources":["../../../../src/components/field-label/tests/field-label.ct.ts"],"names":[],"mappings":"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","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 { expect } from '@playwright/test';\nimport { regressionTest } from '@utils/test';\n\nregressionTest('renders', async ({ mount, page }) => {\n  await mount(`<ix-field-label>My Label</ix-field-label>`);\n  const fieldLabelElement = page.locator('ix-field-label');\n  await expect(fieldLabelElement).toHaveClass(/hydrated/);\n  await expect(\n    fieldLabelElement.locator('label').locator('ix-typography')\n  ).toHaveClass(/typography-label/);\n  await expect(fieldLabelElement.filter({ hasText: 'My Label' })).toHaveText(\n    'My Label'\n  );\n});\n\nregressionTest('required', async ({ mount, page }) => {\n  await mount(`<ix-field-label required>MyLabel</ix-field-label>`);\n  const labelElement = page.locator('ix-field-label');\n  await expect(labelElement).toHaveText('MyLabel *');\n});\n\nregressionTest('focus native input by label click', async ({ mount, page }) => {\n  await mount(`\n    <ix-field-label html-for=\"input\">MyLabel</ix-field-label>\n    <input data-testid=\"input\" id=\"input\" />\n  `);\n  const labelElement = page.locator('ix-field-label');\n  await labelElement.click();\n\n  const inputElement = page.getByTestId('input');\n  await expect(inputElement).toBeFocused();\n});\n\nregressionTest.describe('click label', () => {\n  ['ix-input', 'ix-number-input', 'ix-date-input', 'ix-textarea'].forEach(\n    (selector) => {\n      regressionTest(\n        `focus ${selector} by external label click`,\n        async ({ mount, page }) => {\n          await mount(`\n        <ix-field-label html-for=\"input\">MyLabel</ix-field-label>\n        <${selector} id=\"input\"></${selector}>\n      `);\n          const labelElement = page.locator('ix-field-label');\n          await labelElement.click();\n\n          const component = page.locator(selector);\n          const focusElement =\n            selector !== 'ix-textarea'\n              ? component.locator('input')\n              : component.locator('textarea');\n          await expect(focusElement).toBeFocused();\n        }\n      );\n\n      regressionTest(\n        `focus ${selector} by embedded label click`,\n        async ({ mount, page }) => {\n          await mount(`\n        <${selector} label=\"MyLabel\"></${selector}>\n      `);\n\n          const component = page.locator(selector);\n          await expect(component).toHaveClass(/hydrated/);\n\n          const labelElement = component\n            .locator('ix-field-wrapper')\n            .locator('ix-field-label');\n\n          await labelElement.click();\n\n          const focusElement =\n            selector !== 'ix-textarea'\n              ? component.locator('input')\n              : component.locator('textarea');\n\n          await expect(focusElement).toBeFocused();\n        }\n      );\n    }\n  );\n});\n\nregressionTest('valid color', async ({ mount, page }) => {\n  await mount(`<ix-field-label>LabelValid</ix-field-label>`);\n\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(labelElement).not.toHaveAttribute('is-invalid');\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-soft-text);'\n  );\n});\n\nregressionTest('invalid color', async ({ mount, page }) => {\n  await mount(`<ix-field-label is-invalid>LabelInvalid</ix-field-label>`);\n\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(labelElement).toHaveAttribute('is-invalid');\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-alarm-text);'\n  );\n});\n\nregressionTest('valid color with valid text field', async ({ mount, page }) => {\n  await mount(`\n    <ix-input label=\"label text\">valid field</ix-input>\n  `);\n\n  const fieldElement = page.locator('ix-input');\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(fieldElement).not.toHaveClass(/ix-invalid--required/);\n\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-soft-text);'\n  );\n});\n\nregressionTest(\n  'invalid color with invalid text field',\n  async ({ mount, page }) => {\n    await mount(`\n    <ix-input label=\"invalid label text\" required>invalid field</ix-input>\n  `);\n\n    const fieldElement = page.locator('ix-input');\n    const inputElement = fieldElement.locator('input');\n    await expect(inputElement).toBeVisible();\n\n    const labelElement = page.locator('ix-field-label');\n\n    await inputElement.focus();\n    await inputElement.blur();\n\n    await expect(fieldElement).toHaveClass(/ix-invalid--required/);\n    await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n      'style',\n      'color: var(--theme-color-alarm-text);'\n    );\n  }\n);\n\nregressionTest(\n  'valid color with valid textarea field',\n  async ({ mount, page }) => {\n    await mount(`\n    <ix-textarea label=\"label text\">valid field</ix-textarea>\n  `);\n\n    const fieldElement = page.locator('ix-textarea');\n    const labelElement = page.locator('ix-field-label');\n\n    await expect(fieldElement).not.toHaveClass(/ix-invalid--required/);\n\n    await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n      'style',\n      'color: var(--theme-color-soft-text);'\n    );\n  }\n);\n\nregressionTest(\n  'invalid color with invalid textarea field',\n  async ({ mount, page }) => {\n    await mount(`\n    <ix-textarea label=\"invalid label text\" required>invalid field</ix-textarea>\n  `);\n\n    const fieldElement = page.locator('ix-textarea');\n    const textareaElement = fieldElement.locator('textarea');\n    await expect(textareaElement).toBeVisible();\n\n    const labelElement = page.locator('ix-field-label');\n\n    await textareaElement.focus();\n    await textareaElement.blur();\n\n    await expect(fieldElement).toHaveClass(/ix-invalid--required/);\n\n    await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n      'style',\n      'color: var(--theme-color-alarm-text);'\n    );\n  }\n);\n"]}
+{"version":3,"file":"field-label.ct.js","sourceRoot":"","sources":["../../../../src/components/field-label/tests/field-label.ct.ts"],"names":[],"mappings":"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","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 { expect } from '@playwright/test';\nimport { regressionTest } from '@utils/test';\n\nregressionTest('renders', async ({ mount, page }) => {\n  await mount(`<ix-field-label>My Label</ix-field-label>`);\n  const fieldLabelElement = page.locator('ix-field-label');\n  await expect(fieldLabelElement).toHaveClass(/hydrated/);\n  await expect(\n    fieldLabelElement.locator('label').locator('ix-typography')\n  ).toHaveClass(/typography-label/);\n  await expect(fieldLabelElement.filter({ hasText: 'My Label' })).toHaveText(\n    'My Label'\n  );\n});\n\nregressionTest('required', async ({ mount, page }) => {\n  await mount(`<ix-field-label required>MyLabel</ix-field-label>`);\n  const labelElement = page.locator('ix-field-label');\n  await expect(labelElement).toHaveText('MyLabel*');\n});\n\nregressionTest('focus native input by label click', async ({ mount, page }) => {\n  await mount(`\n    <ix-field-label html-for=\"input\">MyLabel</ix-field-label>\n    <input data-testid=\"input\" id=\"input\" />\n  `);\n  const labelElement = page.locator('ix-field-label');\n  await labelElement.click();\n\n  const inputElement = page.getByTestId('input');\n  await expect(inputElement).toBeFocused();\n});\n\nregressionTest.describe('click label', () => {\n  ['ix-input', 'ix-number-input', 'ix-date-input', 'ix-textarea'].forEach(\n    (selector) => {\n      regressionTest(\n        `focus ${selector} by external label click`,\n        async ({ mount, page }) => {\n          await mount(`\n        <ix-field-label html-for=\"input\">MyLabel</ix-field-label>\n        <${selector} id=\"input\"></${selector}>\n      `);\n          const labelElement = page.locator('ix-field-label');\n          await labelElement.click();\n\n          const component = page.locator(selector);\n          const focusElement =\n            selector !== 'ix-textarea'\n              ? component.locator('input')\n              : component.locator('textarea');\n          await expect(focusElement).toBeFocused();\n        }\n      );\n\n      regressionTest(\n        `focus ${selector} by embedded label click`,\n        async ({ mount, page }) => {\n          await mount(`\n        <${selector} label=\"MyLabel\"></${selector}>\n      `);\n\n          const component = page.locator(selector);\n          await expect(component).toHaveClass(/hydrated/);\n\n          const labelElement = component\n            .locator('ix-field-wrapper')\n            .locator('ix-field-label');\n\n          await labelElement.click();\n\n          const focusElement =\n            selector !== 'ix-textarea'\n              ? component.locator('input')\n              : component.locator('textarea');\n\n          await expect(focusElement).toBeFocused();\n        }\n      );\n    }\n  );\n});\n\nregressionTest('valid color', async ({ mount, page }) => {\n  await mount(`<ix-field-label>LabelValid</ix-field-label>`);\n\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(labelElement).not.toHaveAttribute('is-invalid');\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-soft-text);'\n  );\n});\n\nregressionTest('invalid color', async ({ mount, page }) => {\n  await mount(`<ix-field-label is-invalid>LabelInvalid</ix-field-label>`);\n\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(labelElement).toHaveAttribute('is-invalid');\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-alarm-text);'\n  );\n});\n\nregressionTest('valid color with valid text field', async ({ mount, page }) => {\n  await mount(`\n    <ix-input label=\"label text\">valid field</ix-input>\n  `);\n\n  const fieldElement = page.locator('ix-input');\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(fieldElement).not.toHaveClass(/ix-invalid--required/);\n\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-soft-text);'\n  );\n});\n\nregressionTest(\n  'invalid color with invalid text field',\n  async ({ mount, page }) => {\n    await mount(`\n    <ix-input label=\"invalid label text\" required>invalid field</ix-input>\n  `);\n\n    const fieldElement = page.locator('ix-input');\n    const inputElement = fieldElement.locator('input');\n    await expect(inputElement).toBeVisible();\n\n    const labelElement = page.locator('ix-field-label');\n\n    await inputElement.focus();\n    await inputElement.blur();\n\n    await expect(fieldElement).toHaveClass(/ix-invalid--required/);\n    await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n      'style',\n      'color: var(--theme-color-alarm-text);'\n    );\n  }\n);\n\nregressionTest(\n  'valid color with valid textarea field',\n  async ({ mount, page }) => {\n    await mount(`\n    <ix-textarea label=\"label text\">valid field</ix-textarea>\n  `);\n\n    const fieldElement = page.locator('ix-textarea');\n    const labelElement = page.locator('ix-field-label');\n\n    await expect(fieldElement).not.toHaveClass(/ix-invalid--required/);\n\n    await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n      'style',\n      'color: var(--theme-color-soft-text);'\n    );\n  }\n);\n\nregressionTest(\n  'invalid color with invalid textarea field',\n  async ({ mount, page }) => {\n    await mount(`\n    <ix-textarea label=\"invalid label text\" required>invalid field</ix-textarea>\n  `);\n\n    const fieldElement = page.locator('ix-textarea');\n    const textareaElement = fieldElement.locator('textarea');\n    await expect(textareaElement).toBeVisible();\n\n    const labelElement = page.locator('ix-field-label');\n\n    await textareaElement.focus();\n    await textareaElement.blur();\n\n    await expect(fieldElement).toHaveClass(/ix-invalid--required/);\n\n    await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n      'style',\n      'color: var(--theme-color-alarm-text);'\n    );\n  }\n);\n"]}

package/dist/collection/components/field-wrapper/field-wrapper.js

@@ -70,6 +70,7 @@ export class FieldWrapper {
         return {
             "helperText": {
                 "type": "string",
+                "attribute": "helper-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -84,11 +85,11 @@ export class FieldWrapper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "helper-text",
                 "reflect": false
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -103,11 +104,11 @@ export class FieldWrapper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false
             },
             "invalidText": {
                 "type": "string",
+                "attribute": "invalid-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -122,11 +123,11 @@ export class FieldWrapper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "invalid-text",
                 "reflect": false
             },
             "validText": {
                 "type": "string",
+                "attribute": "valid-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -141,11 +142,11 @@ export class FieldWrapper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "valid-text",
                 "reflect": false
             },
             "infoText": {
                 "type": "string",
+                "attribute": "info-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -160,11 +161,11 @@ export class FieldWrapper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "info-text",
                 "reflect": false
             },
             "warningText": {
                 "type": "string",
+                "attribute": "warning-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -179,11 +180,11 @@ export class FieldWrapper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "warning-text",
                 "reflect": false
             },
             "isInvalid": {
                 "type": "boolean",
+                "attribute": "is-invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -198,12 +199,12 @@ export class FieldWrapper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "is-invalid",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "isValid": {
                 "type": "boolean",
+                "attribute": "is-valid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -218,12 +219,12 @@ export class FieldWrapper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "is-valid",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "isInfo": {
                 "type": "boolean",
+                "attribute": "is-info",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -238,12 +239,12 @@ export class FieldWrapper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "is-info",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "isWarning": {
                 "type": "boolean",
+                "attribute": "is-warning",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -258,12 +259,12 @@ export class FieldWrapper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "is-warning",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "showTextAsTooltip": {
                 "type": "boolean",
+                "attribute": "show-text-as-tooltip",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -278,12 +279,12 @@ export class FieldWrapper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-text-as-tooltip",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -298,12 +299,12 @@ export class FieldWrapper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "htmlForLabel": {
                 "type": "string",
+                "attribute": "html-for-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -318,11 +319,11 @@ export class FieldWrapper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "html-for-label",
                 "reflect": false
             },
             "controlRef": {
                 "type": "unknown",
+                "attribute": "control-ref",
                 "mutable": false,
                 "complexType": {
                     "original": "| MakeRef<HTMLElement>\n    | MakeRef<HTMLInputElement>\n    | MakeRef<HTMLTextAreaElement>",

package/dist/collection/components/field-wrapper/field-wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-wrapper.js","sourceRoot":"","sources":["../../../src/components/field-wrapper/field-wrapper.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EAAW,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAElE,gBAAgB;AAMhB,MAAM,OAAO,YAAY;IALzB;QAsCE;;WAEG;QACK,cAAS,GAAY,KAAK,CAAC;QAEnC;;WAEG;QACK,YAAO,GAAY,KAAK,CAAC;QAEjC;;WAEG;QACK,WAAM,GAAY,KAAK,CAAC;QAEhC;;WAEG;QACK,cAAS,GAAY,KAAK,CAAC;QAEnC;;WAEG;QACK,sBAAiB,GAAY,KAAK,CAAC;QAE3C;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAejB,YAAO,GAAG,OAAO,EAAkB,CAAC;KAuDtD;IArDC,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,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,KAAK,IAAI,CACb,4DAAK,KAAK,EAAC,WAAW;gBACpB,uEACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,SAAS,EAAE,IAAI,CAAC,SAAS,IAExB,IAAI,CAAC,KAAK,CACI,CACb,CACP;YACD,4DACE,KAAK,EAAE;oBACL,cAAc,EAAE,IAAI;iBACrB,EACD,GAAG,EAAE,IAAI,CAAC,OAAO;gBAEjB,8DAAa,CACT;YACN,4DAAK,KAAK,EAAE,cAAc;gBACvB,CAAC,IAAI,CAAC,iBAAiB,IAAI,gBAAgB,CAAC,WAAW,CAAC;gBACzD,4DAAK,KAAK,EAAC,cAAc;oBACvB,6DAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B,CACF;YAEL,IAAI,CAAC,iBAAiB,KAAK,IAAI,IAAI,UAAU,CAAC,WAAW,CAAC,IAAI,CAC7D,mEACE,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC,cAAc,EAAE,EAClC,SAAS,EAAE,GAAG,EACd,SAAS,EAAC,QAAQ,IAEjB,gBAAgB,CAAC,WAAW,CAAC,CACnB,CACd,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 { Component, Element, Host, Prop, h } from '@stencil/core';\nimport { FieldWrapperInterface } from '../utils/input';\nimport { MakeRef, makeRef } from '../utils/make-ref';\nimport { hasAnyText, renderHelperText } from './helper-text-util';\n\n/** @internal */\n@Component({\n  tag: 'ix-field-wrapper',\n  styleUrl: 'field-wrapper.scss',\n  shadow: true,\n})\nexport class FieldWrapper implements FieldWrapperInterface {\n  @Element() hostElement!: HTMLIxFieldWrapperElement;\n\n  /**\n   * Show text below the field component\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Label for the field component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Error text for the field component\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * Valid text for the field component\n   */\n  @Prop() validText?: string;\n\n  /**\n   * Info text for the field component\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Warning text for the field component\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * Is the field component invalid\n   */\n  @Prop() isInvalid: boolean = false;\n\n  /**\n   * Is the field component valid\n   */\n  @Prop() isValid: boolean = false;\n\n  /**\n   * Is the field component info\n   */\n  @Prop() isInfo: boolean = false;\n\n  /**\n   * Is the field component warning\n   */\n  @Prop() isWarning: boolean = false;\n\n  /**\n   * Show helper, error, info, warning text as tooltip\n   */\n  @Prop() showTextAsTooltip: boolean = false;\n\n  /**\n   * Show label as required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The id of the form element that the label is associated with\n   */\n  @Prop() htmlForLabel?: string;\n\n  /**\n   * The control element that the label is associated with\n   */\n  @Prop() controlRef?:\n    | MakeRef<HTMLElement>\n    | MakeRef<HTMLInputElement>\n    | MakeRef<HTMLTextAreaElement>;\n\n  private readonly slotRef = makeRef<HTMLDivElement>();\n\n  render() {\n    const textOptions = {\n      invalidText: this.invalidText,\n      isInvalid: this.isInvalid,\n      isValid: this.isValid,\n      validText: this.validText,\n      isWarning: this.isWarning,\n      warningText: this.warningText,\n      isInfo: this.isInfo,\n      infoText: this.infoText,\n      helperText: this.helperText,\n    };\n    return (\n      <Host>\n        {this.label && (\n          <div class=\"field-top\">\n            <ix-field-label\n              required={this.required}\n              htmlFor={this.htmlForLabel}\n              controlRef={this.controlRef}\n              isInvalid={this.isInvalid}\n            >\n              {this.label}\n            </ix-field-label>\n          </div>\n        )}\n        <div\n          class={{\n            'slot-wrapper': true,\n          }}\n          ref={this.slotRef}\n        >\n          <slot></slot>\n        </div>\n        <div class={'field-bottom'}>\n          {!this.showTextAsTooltip && renderHelperText(textOptions)}\n          <div class=\"bottom-right\">\n            <slot name=\"bottom-right\"></slot>\n          </div>\n        </div>\n\n        {this.showTextAsTooltip === true && hasAnyText(textOptions) && (\n          <ix-tooltip\n            for={this.slotRef.waitForCurrent()}\n            showDelay={500}\n            placement=\"bottom\"\n          >\n            {renderHelperText(textOptions)}\n          </ix-tooltip>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"field-wrapper.js","sourceRoot":"","sources":["../../../src/components/field-wrapper/field-wrapper.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EAAW,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAElE,gBAAgB;AAMhB,MAAM,OAAO,YAAY;IALzB;QAsCE;;WAEG;QACK,cAAS,GAAY,KAAK,CAAC;QAEnC;;WAEG;QACK,YAAO,GAAY,KAAK,CAAC;QAEjC;;WAEG;QACK,WAAM,GAAY,KAAK,CAAC;QAEhC;;WAEG;QACK,cAAS,GAAY,KAAK,CAAC;QAEnC;;WAEG;QACK,sBAAiB,GAAY,KAAK,CAAC;QAE3C;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAejB,YAAO,GAAG,OAAO,EAAkB,CAAC;KAuDtD;IArDC,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,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,KAAK,IAAI,CACb,4DAAK,KAAK,EAAC,WAAW;gBACpB,uEACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,SAAS,EAAE,IAAI,CAAC,SAAS,IAExB,IAAI,CAAC,KAAK,CACI,CACb,CACP;YACD,4DACE,KAAK,EAAE;oBACL,cAAc,EAAE,IAAI;iBACrB,EACD,GAAG,EAAE,IAAI,CAAC,OAAO;gBAEjB,8DAAa,CACT;YACN,4DAAK,KAAK,EAAE,cAAc;gBACvB,CAAC,IAAI,CAAC,iBAAiB,IAAI,gBAAgB,CAAC,WAAW,CAAC;gBACzD,4DAAK,KAAK,EAAC,cAAc;oBACvB,6DAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B,CACF;YAEL,IAAI,CAAC,iBAAiB,KAAK,IAAI,IAAI,UAAU,CAAC,WAAW,CAAC,IAAI,CAC7D,mEACE,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC,cAAc,EAAE,EAClC,SAAS,EAAE,GAAG,EACd,SAAS,EAAC,QAAQ,IAEjB,gBAAgB,CAAC,WAAW,CAAC,CACnB,CACd,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 { Component, Element, Host, Prop, h } from '@stencil/core';\nimport { FieldWrapperInterface } from '../utils/input';\nimport { MakeRef, makeRef } from '../utils/make-ref';\nimport { hasAnyText, renderHelperText } from './helper-text-util';\n\n/** @internal */\n@Component({\n  tag: 'ix-field-wrapper',\n  styleUrl: 'field-wrapper.scss',\n  shadow: true,\n})\nexport class FieldWrapper implements FieldWrapperInterface {\n  @Element() hostElement!: HTMLIxFieldWrapperElement;\n\n  /**\n   * Show text below the field component\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Label for the field component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Error text for the field component\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * Valid text for the field component\n   */\n  @Prop() validText?: string;\n\n  /**\n   * Info text for the field component\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Warning text for the field component\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * Is the field component invalid\n   */\n  @Prop() isInvalid: boolean = false;\n\n  /**\n   * Is the field component valid\n   */\n  @Prop() isValid: boolean = false;\n\n  /**\n   * Is the field component info\n   */\n  @Prop() isInfo: boolean = false;\n\n  /**\n   * Is the field component warning\n   */\n  @Prop() isWarning: boolean = false;\n\n  /**\n   * Show helper, error, info, warning text as tooltip\n   */\n  @Prop() showTextAsTooltip: boolean = false;\n\n  /**\n   * Show label as required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The id of the form element that the label is associated with\n   */\n  @Prop() htmlForLabel?: string;\n\n  /**\n   * The control element that the label is associated with\n   */\n  @Prop() controlRef?:\n    | MakeRef<HTMLElement>\n    | MakeRef<HTMLInputElement>\n    | MakeRef<HTMLTextAreaElement>;\n\n  private readonly slotRef = makeRef<HTMLDivElement>();\n\n  render() {\n    const textOptions = {\n      invalidText: this.invalidText,\n      isInvalid: this.isInvalid,\n      isValid: this.isValid,\n      validText: this.validText,\n      isWarning: this.isWarning,\n      warningText: this.warningText,\n      isInfo: this.isInfo,\n      infoText: this.infoText,\n      helperText: this.helperText,\n    };\n    return (\n      <Host>\n        {this.label && (\n          <div class=\"field-top\">\n            <ix-field-label\n              required={this.required}\n              htmlFor={this.htmlForLabel}\n              controlRef={this.controlRef}\n              isInvalid={this.isInvalid}\n            >\n              {this.label}\n            </ix-field-label>\n          </div>\n        )}\n        <div\n          class={{\n            'slot-wrapper': true,\n          }}\n          ref={this.slotRef}\n        >\n          <slot></slot>\n        </div>\n        <div class={'field-bottom'}>\n          {!this.showTextAsTooltip && renderHelperText(textOptions)}\n          <div class=\"bottom-right\">\n            <slot name=\"bottom-right\"></slot>\n          </div>\n        </div>\n\n        {this.showTextAsTooltip === true && hasAnyText(textOptions) && (\n          <ix-tooltip\n            for={this.slotRef.waitForCurrent()}\n            showDelay={500}\n            placement=\"bottom\"\n          >\n            {renderHelperText(textOptions)}\n          </ix-tooltip>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/filter-chip/filter-chip.js

@@ -44,6 +44,7 @@ export class FilterChip {
         return {
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -58,12 +59,12 @@ export class FilterChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "readonly": {
                 "type": "boolean",
+                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -81,7 +82,6 @@ export class FilterChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "readonly",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/dist/collection/components/flip-tile/flip-tile.js

@@ -123,6 +123,7 @@ export class FlipTile {
         return {
             "state": {
                 "type": "string",
+                "attribute": "state",
                 "mutable": false,
                 "complexType": {
                     "original": "FlipTileState",
@@ -143,11 +144,11 @@ export class FlipTile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "state",
                 "reflect": false
             },
             "height": {
                 "type": "any",
+                "attribute": "height",
                 "mutable": false,
                 "complexType": {
                     "original": "number | 'auto'",
@@ -165,12 +166,12 @@ export class FlipTile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "height",
                 "reflect": false,
                 "defaultValue": "15.125"
             },
             "width": {
                 "type": "any",
+                "attribute": "width",
                 "mutable": false,
                 "complexType": {
                     "original": "number | 'auto'",
@@ -188,12 +189,12 @@ export class FlipTile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "width",
                 "reflect": false,
                 "defaultValue": "16"
             },
             "index": {
                 "type": "number",
+                "attribute": "index",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -211,7 +212,6 @@ export class FlipTile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "index",
                 "reflect": false,
                 "defaultValue": "0"
             }

package/dist/collection/components/flip-tile-content/flip-tile-content.js

@@ -35,6 +35,7 @@ export class FlipTileContent {
         return {
             "contentVisible": {
                 "type": "boolean",
+                "attribute": "content-visible",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -52,7 +53,6 @@ export class FlipTileContent {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "content-visible",
                 "reflect": false,
                 "defaultValue": "false"
             }