@siemens/ix 2.6.0 → 2.7.0

package/dist/collection/components/input/tests/validation.ct.js

@@ -0,0 +1,21 @@
+/*
+ * SPDX-FileCopyrightText: 2025 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.
+ */
+import { test } from "../../../tests/utils/test/index";
+import { expect } from "@playwright/test";
+test.describe('validation', () => {
+    test('validation class should persist if provided by user', async ({ mount, page, }) => {
+        await mount('<ix-input class="ix-invalid"></ix-input>');
+        const input = page.locator('ix-input');
+        const shadowDomInput = input.locator('input');
+        await shadowDomInput.fill('my example');
+        await shadowDomInput.blur();
+        await expect(input).toHaveClass(/ix-invalid/);
+    });
+});
+//# sourceMappingURL=validation.ct.js.map

package/dist/collection/components/input/tests/validation.ct.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation.ct.js","sourceRoot":"","sources":["../../../../src/components/input/tests/validation.ct.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,IAAI,CAAC,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC/B,IAAI,CAAC,qDAAqD,EAAE,KAAK,EAAE,EACjE,KAAK,EACL,IAAI,GACL,EAAE,EAAE;QACH,MAAM,KAAK,CAAC,0CAA0C,CAAC,CAAC;QACxD,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QACvC,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAE9C,MAAM,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACxC,MAAM,cAAc,CAAC,IAAI,EAAE,CAAC;QAE5B,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2025 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 { test } from '@utils/test';\nimport { expect } from '@playwright/test';\n\ntest.describe('validation', () => {\n  test('validation class should persist if provided by user', async ({\n    mount,\n    page,\n  }) => {\n    await mount('<ix-input class=\"ix-invalid\"></ix-input>');\n    const input = page.locator('ix-input');\n    const shadowDomInput = input.locator('input');\n\n    await shadowDomInput.fill('my example');\n    await shadowDomInput.blur();\n\n    await expect(input).toHaveClass(/ix-invalid/);\n  });\n});\n"]}

package/dist/collection/components/input/textarea.css

@@ -211,9 +211,6 @@ input[type=number]::-webkit-inner-spin-button {
   display: none;
 }
 
-textarea {
-  padding: 0.375rem 1.25rem 0.375rem 0.5rem;
-}
 textarea {
   font-feature-settings: "clig" off, "liga" off;
   font-family: Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;
@@ -356,6 +353,9 @@ textarea:disabled::-moz-placeholder, textarea.disabled::-moz-placeholder {
 textarea:disabled::placeholder, textarea.disabled::placeholder {
   color: transparent;
 }
+textarea {
+  padding: calc(0.375rem - var(--theme-input--border-thickness)) calc(0.5rem - var(--theme-input--border-thickness));
+}
 
 textarea ~ .valid-feedback,
 textarea ~ .invalid-feedback,

package/dist/collection/components/input/textarea.js

@@ -85,10 +85,10 @@ export class Textarea {
         return (await this.getNativeInputElement()).focus();
     }
     render() {
-        return (h(Host, { key: '55f9acbe1f37fd80ce6d6104c06c057b2014dc47', class: {
+        return (h(Host, { key: '952c321d9c45ebf78962aca11974f95dcfd7b18a', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, h("ix-field-wrapper", { key: 'd38e875d3de15093496a1ae8e3d0e06272e3f4fc', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.textAreaRef }, !!this.maxLength && this.maxLength > 0 && (h("ix-typography", { key: 'c85143e3e8866490d3673d0183741e1f914692ce', class: "bottom-text", slot: "bottom-right", color: "soft" }, this.value.length, "/", this.maxLength)), h("div", { key: '790d620ea6157129ee00798edd4076b73769c705', class: "input-wrapper" }, h(TextareaElement, { key: '3242925ed8673d49974da380b7c2e8833170511e', minLength: this.minLength, maxLength: this.maxLength, textareaCols: this.textareaCols, textareaRows: this.textareaRows, textareaHeight: this.textareaHeight, textareaWidth: this.textareaWidth, resizeBehavior: this.resizeBehavior, readonly: this.readonly, disabled: this.disabled, isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, textAreaRef: this.textAreaRef, valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => onInputBlur(this, this.textAreaRef.current) })))));
+            } }, h("ix-field-wrapper", { key: '78c62b4ed783ffe4545de3bfa17ff9fbe5dcde2f', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.textAreaRef }, !!this.maxLength && this.maxLength > 0 && (h("ix-typography", { key: 'b05c5008923f91643f710f9953ae374f44d88c11', class: "bottom-text", slot: "bottom-right", color: "soft" }, this.value.length, "/", this.maxLength)), h("div", { key: 'bb7a292373d01721499c2128b057cad95c0fe59d', class: "input-wrapper" }, h(TextareaElement, { key: '1769ad294d552d2cd99113dfdcddc77ec517826a', minLength: this.minLength, maxLength: this.maxLength, textareaCols: this.textareaCols, textareaRows: this.textareaRows, textareaHeight: this.textareaHeight, textareaWidth: this.textareaWidth, resizeBehavior: this.resizeBehavior, readonly: this.readonly, disabled: this.disabled, isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, textAreaRef: this.textAreaRef, valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => onInputBlur(this, this.textAreaRef.current) })))));
     }
     static get is() { return "ix-textarea"; }
     static get encapsulation() { return "shadow"; }
@@ -110,7 +110,7 @@ export class Textarea {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -127,7 +127,7 @@ export class Textarea {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -216,7 +216,7 @@ export class Textarea {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -233,7 +233,7 @@ export class Textarea {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -250,7 +250,7 @@ export class Textarea {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -267,7 +267,7 @@ export class Textarea {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -284,7 +284,7 @@ export class Textarea {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -301,7 +301,7 @@ export class Textarea {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -318,7 +318,7 @@ export class Textarea {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -335,7 +335,7 @@ export class Textarea {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -352,7 +352,7 @@ export class Textarea {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -369,7 +369,7 @@ export class Textarea {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -386,7 +386,7 @@ export class Textarea {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -427,7 +427,7 @@ export class Textarea {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -444,7 +444,7 @@ export class Textarea {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -536,7 +536,7 @@ export class Textarea {
                             "id": "global::HTMLFormElement"
                         }
                     },
-                    "return": "Promise<HTMLFormElement>"
+                    "return": "Promise<HTMLFormElement | null>"
                 },
                 "docs": {
                     "text": "",

package/dist/collection/components/input/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/components/input/textarea.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 {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  State,\n  h,\n} from '@stencil/core';\nimport {\n  HookValidationLifecycle,\n  IxInputFieldComponent,\n  ValidationResults,\n} from '../utils/input';\nimport { MakeRef, makeRef } from '../utils/make-ref';\nimport { TextareaElement } from './input.fc';\nimport { mapValidationResult, onInputBlur } from './input.util';\n\nexport type TextareaResizeBehavior =\n  | 'both'\n  | 'horizontal'\n  | 'vertical'\n  | 'none';\n\n/**\n * @since 2.6.0\n * @form-ready 2.6.0\n */\n@Component({\n  tag: 'ix-textarea',\n  styleUrl: 'textarea.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Textarea implements IxInputFieldComponent<string> {\n  @Element() hostElement!: HTMLIxTextareaElement;\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * The name of the textarea field.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * The placeholder text for the textarea field.\n   */\n  @Prop({ reflect: true }) placeholder?: string;\n\n  /**\n   * The value of the textarea field.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  /**\n   * Determines if the textarea field is required.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Determines if the textarea field is disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Determines if the textarea field is readonly.\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * The helper text for the textarea field.\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * The info text for the textarea field.\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Determines if the text should be displayed as a tooltip.\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  /**\n   * The valid text for the textarea field.\n   */\n  @Prop() validText?: string;\n\n  /**\n   * The warning text for the textarea field.\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * The label for the textarea field.\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /**\n   * The error text for the textarea field.\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * The height of the textarea field (e.g. \"52px\").\n   */\n  @Prop() textareaHeight?: string;\n\n  /**\n   * The width of the textarea field (e.g. \"200px\").\n   */\n  @Prop() textareaWidth?: string;\n\n  /**\n   * The height of the textarea specified by number of rows.\n   */\n  @Prop() textareaRows?: number;\n\n  /**\n   * The width of the textarea specified by number of characters.\n   */\n  @Prop() textareaCols?: number;\n\n  /**\n   * Determines the resize behavior of the textarea field.\n   * Resizing can be enabled in one direction, both directions or completely disabled.\n   */\n  @Prop() resizeBehavior: TextareaResizeBehavior = 'both';\n\n  /**\n   * The maximum length of the textarea field.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * The minimum length of the textarea field.\n   */\n  @Prop() minLength?: number;\n\n  /**\n   * Event emitted when the value of the textarea field changes.\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  /**\n   * Event emitted when the validity state of the textarea field changes.\n   */\n  @Event() validityStateChange!: EventEmitter<ValidityState>;\n\n  /**\n   * Event emitted when the textarea field loses focus.\n   */\n  @Event() ixBlur!: EventEmitter<void>;\n\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n  @State() isInvalidByRequired = false;\n\n  private readonly textAreaRef = makeRef<HTMLTextAreaElement>();\n\n  @HookValidationLifecycle()\n  updateClassMappings(result: ValidationResults) {\n    mapValidationResult(this, result);\n  }\n\n  componentWillLoad() {\n    this.updateFormInternalValue(this.value);\n  }\n\n  updateFormInternalValue(value: string) {\n    this.formInternals.setFormValue(value);\n    this.value = value;\n  }\n\n  /** @internal */\n  @Method()\n  async getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return this.formInternals.form;\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(!!this.value);\n  }\n\n  /**\n   * Get the native textarea element.\n   */\n  @Method()\n  getNativeInputElement(): Promise<HTMLTextAreaElement> {\n    return this.textAreaRef.waitForCurrent();\n  }\n\n  /**\n   * Focuses the input field\n   */\n  @Method()\n  async focusInput(): Promise<void> {\n    return (await this.getNativeInputElement()).focus();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          readonly: this.readonly,\n        }}\n      >\n        <ix-field-wrapper\n          required={this.required}\n          label={this.label}\n          helperText={this.helperText}\n          invalidText={this.invalidText}\n          infoText={this.infoText}\n          warningText={this.warningText}\n          validText={this.validText}\n          showTextAsTooltip={this.showTextAsTooltip}\n          isInvalid={this.isInvalid}\n          isValid={this.isValid}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          controlRef={this.textAreaRef as unknown as MakeRef<HTMLElement>}\n        >\n          {!!this.maxLength && this.maxLength > 0 && (\n            <ix-typography class=\"bottom-text\" slot=\"bottom-right\" color=\"soft\">\n              {this.value.length}/{this.maxLength}\n            </ix-typography>\n          )}\n          <div class=\"input-wrapper\">\n            <TextareaElement\n              minLength={this.minLength}\n              maxLength={this.maxLength}\n              textareaCols={this.textareaCols}\n              textareaRows={this.textareaRows}\n              textareaHeight={this.textareaHeight}\n              textareaWidth={this.textareaWidth}\n              resizeBehavior={this.resizeBehavior}\n              readonly={this.readonly}\n              disabled={this.disabled}\n              isInvalid={this.isInvalid}\n              required={this.required}\n              value={this.value}\n              placeholder={this.placeholder}\n              textAreaRef={this.textAreaRef}\n              valueChange={(value) => this.valueChange.emit(value)}\n              updateFormInternalValue={(value) =>\n                this.updateFormInternalValue(value)\n              }\n              onBlur={() => onInputBlur(this, this.textAreaRef.current)}\n            ></TextareaElement>\n          </div>\n        </ix-field-wrapper>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/components/input/textarea.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 {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  State,\n  h,\n} from '@stencil/core';\nimport {\n  HookValidationLifecycle,\n  IxInputFieldComponent,\n  ValidationResults,\n} from '../utils/input';\nimport { makeRef } from '../utils/make-ref';\nimport { TextareaElement } from './input.fc';\nimport { mapValidationResult, onInputBlur } from './input.util';\n\nexport type TextareaResizeBehavior =\n  | 'both'\n  | 'horizontal'\n  | 'vertical'\n  | 'none';\n\n/**\n * @since 2.6.0\n * @form-ready 2.6.0\n */\n@Component({\n  tag: 'ix-textarea',\n  styleUrl: 'textarea.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Textarea implements IxInputFieldComponent<string> {\n  @Element() hostElement!: HTMLIxTextareaElement;\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * The name of the textarea field.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * The placeholder text for the textarea field.\n   */\n  @Prop({ reflect: true }) placeholder?: string;\n\n  /**\n   * The value of the textarea field.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  /**\n   * Determines if the textarea field is required.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Determines if the textarea field is disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Determines if the textarea field is readonly.\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * The helper text for the textarea field.\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * The info text for the textarea field.\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Determines if the text should be displayed as a tooltip.\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  /**\n   * The valid text for the textarea field.\n   */\n  @Prop() validText?: string;\n\n  /**\n   * The warning text for the textarea field.\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * The label for the textarea field.\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /**\n   * The error text for the textarea field.\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * The height of the textarea field (e.g. \"52px\").\n   */\n  @Prop() textareaHeight?: string;\n\n  /**\n   * The width of the textarea field (e.g. \"200px\").\n   */\n  @Prop() textareaWidth?: string;\n\n  /**\n   * The height of the textarea specified by number of rows.\n   */\n  @Prop() textareaRows?: number;\n\n  /**\n   * The width of the textarea specified by number of characters.\n   */\n  @Prop() textareaCols?: number;\n\n  /**\n   * Determines the resize behavior of the textarea field.\n   * Resizing can be enabled in one direction, both directions or completely disabled.\n   */\n  @Prop() resizeBehavior: TextareaResizeBehavior = 'both';\n\n  /**\n   * The maximum length of the textarea field.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * The minimum length of the textarea field.\n   */\n  @Prop() minLength?: number;\n\n  /**\n   * Event emitted when the value of the textarea field changes.\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  /**\n   * Event emitted when the validity state of the textarea field changes.\n   */\n  @Event() validityStateChange!: EventEmitter<ValidityState>;\n\n  /**\n   * Event emitted when the textarea field loses focus.\n   */\n  @Event() ixBlur!: EventEmitter<void>;\n\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n  @State() isInvalidByRequired = false;\n\n  private readonly textAreaRef = makeRef<HTMLTextAreaElement>();\n\n  @HookValidationLifecycle()\n  updateClassMappings(result: ValidationResults) {\n    mapValidationResult(this, result);\n  }\n\n  componentWillLoad() {\n    this.updateFormInternalValue(this.value);\n  }\n\n  updateFormInternalValue(value: string) {\n    this.formInternals.setFormValue(value);\n    this.value = value;\n  }\n\n  /** @internal */\n  @Method()\n  async getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return this.formInternals.form;\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(!!this.value);\n  }\n\n  /**\n   * Get the native textarea element.\n   */\n  @Method()\n  getNativeInputElement(): Promise<HTMLTextAreaElement> {\n    return this.textAreaRef.waitForCurrent();\n  }\n\n  /**\n   * Focuses the input field\n   */\n  @Method()\n  async focusInput(): Promise<void> {\n    return (await this.getNativeInputElement()).focus();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          readonly: this.readonly,\n        }}\n      >\n        <ix-field-wrapper\n          required={this.required}\n          label={this.label}\n          helperText={this.helperText}\n          invalidText={this.invalidText}\n          infoText={this.infoText}\n          warningText={this.warningText}\n          validText={this.validText}\n          showTextAsTooltip={this.showTextAsTooltip}\n          isInvalid={this.isInvalid}\n          isValid={this.isValid}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          controlRef={this.textAreaRef}\n        >\n          {!!this.maxLength && this.maxLength > 0 && (\n            <ix-typography class=\"bottom-text\" slot=\"bottom-right\" color=\"soft\">\n              {this.value.length}/{this.maxLength}\n            </ix-typography>\n          )}\n          <div class=\"input-wrapper\">\n            <TextareaElement\n              minLength={this.minLength}\n              maxLength={this.maxLength}\n              textareaCols={this.textareaCols}\n              textareaRows={this.textareaRows}\n              textareaHeight={this.textareaHeight}\n              textareaWidth={this.textareaWidth}\n              resizeBehavior={this.resizeBehavior}\n              readonly={this.readonly}\n              disabled={this.disabled}\n              isInvalid={this.isInvalid}\n              required={this.required}\n              value={this.value}\n              placeholder={this.placeholder}\n              textAreaRef={this.textAreaRef}\n              valueChange={(value) => this.valueChange.emit(value)}\n              updateFormInternalValue={(value) =>\n                this.updateFormInternalValue(value)\n              }\n              onBlur={() => onInputBlur(this, this.textAreaRef.current)}\n            ></TextareaElement>\n          </div>\n        </ix-field-wrapper>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/input-group/input-group.js

@@ -124,7 +124,7 @@ export class InputGroup {
         return width;
     }
     render() {
-        return (h(Host, { key: '14b39750443afa04ff5aec92500f1caadae7c999', class: { disabled: this.disabled } }, h("div", { key: '3fc82d83edf57457c7caf29b525d417008d59793', class: "group group-start" }, h("slot", { key: '4233fcfc1a643c6c3ade5ee07c3895a3175f91a5', name: "input-start" })), h("slot", { key: '21a780e71bb8ff5380656ed91fdc3d657f906edb' }), h("div", { key: '97daccc51ac8756c816820da74ea0027a88602e8', class: "group group-end" }, h("slot", { key: 'be5edf58af140972c314a14ff3d88da1fdeb5de9', name: "input-end" }))));
+        return (h(Host, { key: '672090bc95ebe5316373e8059a4d9832d7803360', class: { disabled: this.disabled } }, h("div", { key: 'eeb2ff4eb6dde0a76819db2c59961bd2a60f21dd', class: "group group-start" }, h("slot", { key: 'e9e29a9630a75fe02dc4b9f1e1618f409d9bf79f', name: "input-start" })), h("slot", { key: 'ba879afb3daf79d47ccc144bb15dde19066a6b0b' }), h("div", { key: 'd4ff700431fb7ae6fec3b3994afd1a7baeb405c1', class: "group group-end" }, h("slot", { key: '33b5dd1e62b79372656b1c22e9e9cc77fd4252c8', name: "input-end" }))));
     }
     static get is() { return "ix-input-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-group/input-group.js.map

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

package/dist/collection/components/key-value/key-value.js

@@ -20,7 +20,7 @@ export class KeyValue {
         this.value = undefined;
     }
     render() {
-        return (h(Host, { key: '44e8dc174bc1098bbb777be9e35a09a5d4590c0a', class: `keyValue keyValue--${this.labelPosition === 'top' ? 'column' : 'row'}` }, this.icon && (h("ix-icon", { key: 'f1aa9eddfeeb2abca0865660bfa86fbf57fa9e45', name: this.icon, size: "24", class: "keyValue__icon" })), h("div", { key: '09373c9da3a2554872e7c4de98f622c12ae29d2d', class: "keyValue__content" }, h("div", { key: 'ac0959a100949b8cc4c277ff94597f334a980437', class: "content__label" }, this.label), h("div", { key: 'e9ae9c4098d307801376b4e341ba9c42d806e106', class: {
+        return (h(Host, { key: '195f88cef96aedc49ec5810b7474cfce3454aba2', class: `keyValue keyValue--${this.labelPosition === 'top' ? 'column' : 'row'}` }, this.icon && (h("ix-icon", { key: '561114ef9e34f47d35dd9dc484fade62c9e8a408', name: this.icon, size: "24", class: "keyValue__icon" })), h("div", { key: 'e747dbd0b15a3e8f93aea4503b99311c8473a703', class: "keyValue__content" }, h("div", { key: '6d8374a50acc00de0373b7c37766f7ca7bd68161', class: "content__label" }, this.label), h("div", { key: '1744e77f960a9720e42a7756b5a12cf24b127a02', class: {
                 content__value: true,
                 'has-customValue': this.value === undefined,
             } }, this.value !== undefined ? (this.value) : (h("slot", { name: "custom-value" }))))));
@@ -44,11 +44,11 @@ export class KeyValue {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Optional key value icon"
@@ -102,11 +102,11 @@ export class KeyValue {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Optional key value text value"

package/dist/collection/components/key-value/key-value.js.map

@@ -1 +1 @@
-{"version":3,"file":"key-value.js","sourceRoot":"","sources":["../../../src/components/key-value/key-value.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIzD;;;;GAIG;AAMH,MAAM,OAAO,QAAQ;;;;6BAc4B,KAAK;;;IAOpD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,sBACL,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAC5C,EAAE;YAED,IAAI,CAAC,IAAI,IAAI,CACZ,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,gBAAgB,GAAW,CACtE;YACD,4DAAK,KAAK,EAAC,mBAAmB;gBAC5B,4DAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAO;gBAC9C,4DACE,KAAK,EAAE;wBACL,cAAc,EAAE,IAAI;wBACpB,iBAAiB,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;qBAC5C,IAEA,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAC1B,IAAI,CAAC,KAAK,CACX,CAAC,CAAC,CAAC,CACF,YAAM,IAAI,EAAC,cAAc,GAAQ,CAClC,CACG,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nexport type KeyValueLabelPosition = 'top' | 'left';\n\n/**\n * @slot custom-value - Optional custom value at key value instead of text value\n *\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-key-value',\n  styleUrl: 'key-value.scss',\n  shadow: true,\n})\nexport class KeyValue {\n  /**\n   * Optional key value icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Key value label\n   */\n  @Prop() label!: string;\n\n  /**\n   * Optional key value label position - 'top' or 'left'\n   */\n  @Prop() labelPosition: KeyValueLabelPosition = 'top';\n\n  /**\n   * Optional key value text value\n   */\n  @Prop() value: string;\n\n  render() {\n    return (\n      <Host\n        class={`keyValue keyValue--${\n          this.labelPosition === 'top' ? 'column' : 'row'\n        }`}\n      >\n        {this.icon && (\n          <ix-icon name={this.icon} size=\"24\" class=\"keyValue__icon\"></ix-icon>\n        )}\n        <div class=\"keyValue__content\">\n          <div class=\"content__label\">{this.label}</div>\n          <div\n            class={{\n              content__value: true,\n              'has-customValue': this.value === undefined,\n            }}\n          >\n            {this.value !== undefined ? (\n              this.value\n            ) : (\n              <slot name=\"custom-value\"></slot>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"key-value.js","sourceRoot":"","sources":["../../../src/components/key-value/key-value.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIzD;;;;GAIG;AAMH,MAAM,OAAO,QAAQ;;;;6BAc4B,KAAK;;;IAOpD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,sBACL,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAC5C,EAAE;YAED,IAAI,CAAC,IAAI,IAAI,CACZ,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,gBAAgB,GAAW,CACtE;YACD,4DAAK,KAAK,EAAC,mBAAmB;gBAC5B,4DAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAO;gBAC9C,4DACE,KAAK,EAAE;wBACL,cAAc,EAAE,IAAI;wBACpB,iBAAiB,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;qBAC5C,IAEA,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAC1B,IAAI,CAAC,KAAK,CACX,CAAC,CAAC,CAAC,CACF,YAAM,IAAI,EAAC,cAAc,GAAQ,CAClC,CACG,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nexport type KeyValueLabelPosition = 'top' | 'left';\n\n/**\n * @slot custom-value - Optional custom value at key value instead of text value\n *\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-key-value',\n  styleUrl: 'key-value.scss',\n  shadow: true,\n})\nexport class KeyValue {\n  /**\n   * Optional key value icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Key value label\n   */\n  @Prop() label!: string;\n\n  /**\n   * Optional key value label position - 'top' or 'left'\n   */\n  @Prop() labelPosition: KeyValueLabelPosition = 'top';\n\n  /**\n   * Optional key value text value\n   */\n  @Prop() value?: string;\n\n  render() {\n    return (\n      <Host\n        class={`keyValue keyValue--${\n          this.labelPosition === 'top' ? 'column' : 'row'\n        }`}\n      >\n        {this.icon && (\n          <ix-icon name={this.icon} size=\"24\" class=\"keyValue__icon\"></ix-icon>\n        )}\n        <div class=\"keyValue__content\">\n          <div class=\"content__label\">{this.label}</div>\n          <div\n            class={{\n              content__value: true,\n              'has-customValue': this.value === undefined,\n            }}\n          >\n            {this.value !== undefined ? (\n              this.value\n            ) : (\n              <slot name=\"custom-value\"></slot>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/key-value-list/key-value-list.js

@@ -12,10 +12,10 @@ import { h, Host } from "@stencil/core";
  */
 export class KeyValueList {
     constructor() {
-        this.striped = undefined;
+        this.striped = false;
     }
     render() {
-        return (h(Host, { key: 'fa00b89511cc190656652267cb8248aa962a787c', class: { keyValueList: true, 'keyValueList--striped': this.striped } }, h("slot", { key: '43a50b29be3802511b623891ea26e8f1495461b0' })));
+        return (h(Host, { key: 'd4ab851c75a56ddf32af42d1d4bfe8c4f5b3d8be', class: { keyValueList: true, 'keyValueList--striped': this.striped } }, h("slot", { key: '9fdfc75d9d264eeee5f10fc71f1915418aa1550d' })));
     }
     static get is() { return "ix-key-value-list"; }
     static get encapsulation() { return "shadow"; }
@@ -46,7 +46,8 @@ export class KeyValueList {
                     "text": "Optional striped key value list style"
                 },
                 "attribute": "striped",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/key-value-list/key-value-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"key-value-list.js","sourceRoot":"","sources":["../../../src/components/key-value-list/key-value-list.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAMH,MAAM,OAAO,YAAY;;;;IAMvB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,uBAAuB,EAAE,IAAI,CAAC,OAAO,EAAE;YAEpE,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-key-value-list',\n  styleUrl: 'key-value-list.scss',\n  shadow: true,\n})\nexport class KeyValueList {\n  /**\n   * Optional striped key value list style\n   */\n  @Prop() striped: boolean;\n\n  render() {\n    return (\n      <Host\n        class={{ keyValueList: true, 'keyValueList--striped': this.striped }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"key-value-list.js","sourceRoot":"","sources":["../../../src/components/key-value-list/key-value-list.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAMH,MAAM,OAAO,YAAY;;uBAII,KAAK;;IAEhC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,uBAAuB,EAAE,IAAI,CAAC,OAAO,EAAE;YAEpE,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-key-value-list',\n  styleUrl: 'key-value-list.scss',\n  shadow: true,\n})\nexport class KeyValueList {\n  /**\n   * Optional striped key value list style\n   */\n  @Prop() striped: boolean = false;\n\n  render() {\n    return (\n      <Host\n        class={{ keyValueList: true, 'keyValueList--striped': this.striped }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/kpi/kpi.js

@@ -33,13 +33,13 @@ export class Kpi {
         return tooltip;
     }
     render() {
-        return (h(Host, { key: 'a15aba9d140c89b2072909e2518c344da4c93a5d', title: this.getTooltipText(), tabindex: "1", class: {
+        return (h(Host, { key: '42de079241d3111b251c1b21a62da8648dba75ae', title: this.getTooltipText(), tabindex: "1", class: {
                 stacked: this.orientation === 'vertical',
-            } }, h("div", { key: '5116d6ee8bf39c59b5a75de087e819544e5d55d7', class: {
+            } }, h("div", { key: '4ccd603dc47d5862edde0df1574befdc7b7403e3', class: {
                 'kpi-container': true,
                 alarm: this.state === 'alarm',
                 warning: this.state === 'warning',
-            } }, h("span", { key: '55034df17c563c3d11d8b04fbd09417dbc33aa39', class: "kpi-label" }, this.getStateIcon(), h("span", { key: '7034420124a2120271bbde7b36012de65aecb2e1', class: "kpi-label-text" }, this.label)), h("span", { key: '2985854b162f37b387f3f9d7a1a2ad07d42cd8bd', class: "kpi-value-container" }, h("span", { key: 'a3ef308e885ddd1c2b521a76afa2af8ea9a5562d', class: "kpi-value" }, this.value), this.unit ? h("span", { class: "kpi-unit" }, this.unit) : ''))));
+            } }, h("span", { key: '298b314f3c06a1ce37e02df95a24b6d04420e709', class: "kpi-label" }, this.getStateIcon(), h("span", { key: 'f5b66bf28c956724d83da05b818d55b29cd327f4', class: "kpi-label-text" }, this.label)), h("span", { key: '2e6d79c01baa2015d44a0f28aa5c945227abba83', class: "kpi-value-container" }, h("span", { key: 'fabe09ae4c0eb74f5343aebbef54ac2695f2ce72', class: "kpi-value" }, this.value), this.unit ? h("span", { class: "kpi-unit" }, this.unit) : ''))));
     }
     static get is() { return "ix-kpi"; }
     static get encapsulation() { return "shadow"; }
@@ -60,11 +60,11 @@ export class Kpi {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -77,11 +77,11 @@ export class Kpi {
                 "mutable": false,
                 "complexType": {
                     "original": "string | number",
-                    "resolved": "number | string",
+                    "resolved": "number | string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -94,11 +94,11 @@ export class Kpi {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""

package/dist/collection/components/kpi/kpi.js.map

@@ -1 +1 @@
-{"version":3,"file":"kpi.js","sourceRoot":"","sources":["../../../src/components/kpi/kpi.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,GAAG;;;;;qBAmBmC,SAAS;2BAKT,YAAY;;IAErD,YAAY;QAClB,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;YACnB,KAAK,OAAO;gBACV,OAAO,CACL,eACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,OAAO,EACb,IAAI,EAAC,IAAI,GACA,CACZ,CAAC;YAEJ,KAAK,SAAS;gBACZ,OAAO,CACL,eACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,SAAS,EACf,IAAI,EAAC,IAAI,GACA,CACZ,CAAC;YAEJ;gBACE,OAAO,EAAE,CAAC;QACd,CAAC;IACH,CAAC;IAEO,cAAc;QACpB,IAAI,OAAO,GAAG,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;QAE7C,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAC5C,CAAC;QAED,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI,CAAC,WAAW,KAAK,UAAU;aACzC;YAED,4DACE,KAAK,EAAE;oBACL,eAAe,EAAE,IAAI;oBACrB,KAAK,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;oBAC7B,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;iBAClC;gBAED,6DAAM,KAAK,EAAC,WAAW;oBACpB,IAAI,CAAC,YAAY,EAAE;oBACpB,6DAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC3C;gBACP,6DAAM,KAAK,EAAC,qBAAqB;oBAC/B,6DAAM,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,KAAK,CAAQ;oBAC1C,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAM,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,IAAI,CAAQ,CAAC,CAAC,CAAC,EAAE,CACtD,CACH,CACD,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 */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-kpi',\n  styleUrl: 'kpi.scss',\n  shadow: true,\n})\nexport class Kpi {\n  /**\n   *\n   */\n  @Prop() label: string;\n\n  /**\n   *\n   */\n  @Prop() value: string | number;\n\n  /**\n   *\n   */\n  @Prop() unit: string;\n\n  /**\n   *\n   */\n  @Prop() state: 'neutral' | 'warning' | 'alarm' = 'neutral';\n\n  /**\n   *\n   */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  private getStateIcon() {\n    switch (this.state) {\n      case 'alarm':\n        return (\n          <ix-icon\n            color=\"kpi-display-icon--color\"\n            name={'alarm'}\n            size=\"16\"\n          ></ix-icon>\n        );\n\n      case 'warning':\n        return (\n          <ix-icon\n            color=\"kpi-display-icon--color\"\n            name={'warning'}\n            size=\"16\"\n          ></ix-icon>\n        );\n\n      default:\n        return '';\n    }\n  }\n\n  private getTooltipText() {\n    let tooltip = `${this.label}: ${this.value}`;\n\n    if (this.unit) {\n      tooltip = tooltip.concat(` ${this.unit}`);\n    }\n\n    return tooltip;\n  }\n\n  render() {\n    return (\n      <Host\n        title={this.getTooltipText()}\n        tabindex=\"1\"\n        class={{\n          stacked: this.orientation === 'vertical',\n        }}\n      >\n        <div\n          class={{\n            'kpi-container': true,\n            alarm: this.state === 'alarm',\n            warning: this.state === 'warning',\n          }}\n        >\n          <span class=\"kpi-label\">\n            {this.getStateIcon()}\n            <span class=\"kpi-label-text\">{this.label}</span>\n          </span>\n          <span class=\"kpi-value-container\">\n            <span class=\"kpi-value\">{this.value}</span>\n            {this.unit ? <span class=\"kpi-unit\">{this.unit}</span> : ''}\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"kpi.js","sourceRoot":"","sources":["../../../src/components/kpi/kpi.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,GAAG;;;;;qBAmBmC,SAAS;2BAKT,YAAY;;IAErD,YAAY;QAClB,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;YACnB,KAAK,OAAO;gBACV,OAAO,CACL,eACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,OAAO,EACb,IAAI,EAAC,IAAI,GACA,CACZ,CAAC;YAEJ,KAAK,SAAS;gBACZ,OAAO,CACL,eACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,SAAS,EACf,IAAI,EAAC,IAAI,GACA,CACZ,CAAC;YAEJ;gBACE,OAAO,EAAE,CAAC;QACd,CAAC;IACH,CAAC;IAEO,cAAc;QACpB,IAAI,OAAO,GAAG,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;QAE7C,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAC5C,CAAC;QAED,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI,CAAC,WAAW,KAAK,UAAU;aACzC;YAED,4DACE,KAAK,EAAE;oBACL,eAAe,EAAE,IAAI;oBACrB,KAAK,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;oBAC7B,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;iBAClC;gBAED,6DAAM,KAAK,EAAC,WAAW;oBACpB,IAAI,CAAC,YAAY,EAAE;oBACpB,6DAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC3C;gBACP,6DAAM,KAAK,EAAC,qBAAqB;oBAC/B,6DAAM,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,KAAK,CAAQ;oBAC1C,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAM,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,IAAI,CAAQ,CAAC,CAAC,CAAC,EAAE,CACtD,CACH,CACD,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 */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-kpi',\n  styleUrl: 'kpi.scss',\n  shadow: true,\n})\nexport class Kpi {\n  /**\n   *\n   */\n  @Prop() label?: string;\n\n  /**\n   *\n   */\n  @Prop() value?: string | number;\n\n  /**\n   *\n   */\n  @Prop() unit?: string;\n\n  /**\n   *\n   */\n  @Prop() state: 'neutral' | 'warning' | 'alarm' = 'neutral';\n\n  /**\n   *\n   */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  private getStateIcon() {\n    switch (this.state) {\n      case 'alarm':\n        return (\n          <ix-icon\n            color=\"kpi-display-icon--color\"\n            name={'alarm'}\n            size=\"16\"\n          ></ix-icon>\n        );\n\n      case 'warning':\n        return (\n          <ix-icon\n            color=\"kpi-display-icon--color\"\n            name={'warning'}\n            size=\"16\"\n          ></ix-icon>\n        );\n\n      default:\n        return '';\n    }\n  }\n\n  private getTooltipText() {\n    let tooltip = `${this.label}: ${this.value}`;\n\n    if (this.unit) {\n      tooltip = tooltip.concat(` ${this.unit}`);\n    }\n\n    return tooltip;\n  }\n\n  render() {\n    return (\n      <Host\n        title={this.getTooltipText()}\n        tabindex=\"1\"\n        class={{\n          stacked: this.orientation === 'vertical',\n        }}\n      >\n        <div\n          class={{\n            'kpi-container': true,\n            alarm: this.state === 'alarm',\n            warning: this.state === 'warning',\n          }}\n        >\n          <span class=\"kpi-label\">\n            {this.getStateIcon()}\n            <span class=\"kpi-label-text\">{this.label}</span>\n          </span>\n          <span class=\"kpi-value-container\">\n            <span class=\"kpi-value\">{this.value}</span>\n            {this.unit ? <span class=\"kpi-unit\">{this.unit}</span> : ''}\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/layout-auto/layout-auto.js

@@ -77,7 +77,7 @@ export class LayoutForm {
         });
     }
     render() {
-        return (h(Host, { key: '0dd50d7088ab95ce631e5d3888055691b0499e81' }, h("div", { key: '4fd6fb7902a4fbe3232178bf260dd7fe2babdf4b', class: "container" }, h("slot", { key: '4548597f8071865d8203100a0ecbdc5fcab91293' }))));
+        return (h(Host, { key: '20fe6dcd672b6265ffb69b366b5b7f2643a3672d' }, h("div", { key: 'ccec00c512d84f6361eaeca019be096ce445e898', class: "container" }, h("slot", { key: '754ce662b54f7b401848e2f12cc1813033dad2e0' }))));
     }
     static get is() { return "ix-layout-auto"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/layout-grid/layout-grid.js

@@ -17,12 +17,12 @@ export class LayoutGrid {
         this.columns = 12;
     }
     render() {
-        return (h(Host, { key: 'c94b508ccf7ff23d457bec9444d69eb97c9b46a2', class: {
+        return (h(Host, { key: '257edb50ece6ae7d3029eb61e4750a766800a226', class: {
                 'no-margin': this.noMargin,
             }, style: {
                 '--ix-layout-grid-columns': `${this.columns}`,
                 '--ix-layout-grid-gutter': `${this.gap}px`,
-            } }, h("slot", { key: '5a8180b92db51b02dbc3ddd805fa3f2eacd886c0' })));
+            } }, h("slot", { key: '15aa39cb0220b9b11c5f2d2bdbf1966085402096' })));
     }
     static get is() { return "ix-layout-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/link-button/link-button.js

@@ -17,13 +17,13 @@ export class LinkButton {
         this.target = '_self';
     }
     render() {
-        return (h(Host, { key: '599582323c6ca9cfdbc9079e94ccac90dc42f87e' }, h("a", { key: '26a781d9d710fa6d3e16a00c9319d7007e4751ef', title: this.url, tabindex: "0", class: {
+        return (h(Host, { key: 'e3419b23a7cf8cfb5f686098ea48148750f95ec3' }, h("a", { key: 'd7c083c55985791d3a49f854537d5b89b270b44c', title: this.url, tabindex: "0", class: {
                 'link-button': true,
                 disabled: this.disabled,
-            }, href: this.disabled ? undefined : this.url, target: this.target }, h("ix-icon", { key: '58de8c25f49ff1d186e9c9b6329bbb3f8ca1c09f', class: "icon", name: 'chevron-right-small', size: "16" }), h("div", { key: 'd07d29e4a52ff43c71cf521c1db445a53e98de8f', class: {
+            }, href: this.disabled ? undefined : this.url, target: this.target }, h("ix-icon", { key: '1b08e1a5b8a119d665e1fe001b0c3c92e1bd4874', class: "icon", name: 'chevron-right-small', size: "16" }), h("div", { key: '9cb9f475670cb4993ac27ea3383f5f28210766f3', class: {
                 link: true,
                 disabled: this.disabled,
-            } }, h("slot", { key: 'ab9c2a95cf9f71c3227e9bca068d49124bd5dd8b' })))));
+            } }, h("slot", { key: '866e85c5c6336d9eb17ec452aaa25e85bfb94018' })))));
     }
     static get is() { return "ix-link-button"; }
     static get encapsulation() { return "shadow"; }
@@ -62,11 +62,11 @@ export class LinkButton {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Url for the link button"

package/dist/collection/components/link-button/link-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"link-button.js","sourceRoot":"","sources":["../../../src/components/link-button/link-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAMH,MAAM,OAAO,UAAU;;wBAIF,KAAK;;sBAYkC,OAAO;;IAEjE,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,0DACE,KAAK,EAAE,IAAI,CAAC,GAAG,EACf,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE;oBACL,aAAa,EAAE,IAAI;oBACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB,EACD,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,EAC1C,MAAM,EAAE,IAAI,CAAC,MAAM;gBAEnB,gEACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAE,qBAAqB,EAC3B,IAAI,EAAC,IAAI,GACA;gBACX,4DACE,KAAK,EAAE;wBACL,IAAI,EAAE,IAAI;wBACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;qBACxB;oBAED,8DAAa,CACT,CACJ,CACC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-link-button',\n  styleUrl: 'link-button.scss',\n  shadow: true,\n})\nexport class LinkButton {\n  /**\n   * Disable the link button\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Url for the link button\n   */\n  @Prop() url: string;\n\n  /**\n   * Specifies where to open the link\n   *\n   * https://www.w3schools.com/html/html_links.asp\n   */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  render() {\n    return (\n      <Host>\n        <a\n          title={this.url}\n          tabindex=\"0\"\n          class={{\n            'link-button': true,\n            disabled: this.disabled,\n          }}\n          href={this.disabled ? undefined : this.url}\n          target={this.target}\n        >\n          <ix-icon\n            class=\"icon\"\n            name={'chevron-right-small'}\n            size=\"16\"\n          ></ix-icon>\n          <div\n            class={{\n              link: true,\n              disabled: this.disabled,\n            }}\n          >\n            <slot></slot>\n          </div>\n        </a>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"link-button.js","sourceRoot":"","sources":["../../../src/components/link-button/link-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAMH,MAAM,OAAO,UAAU;;wBAIF,KAAK;;sBAYkC,OAAO;;IAEjE,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,0DACE,KAAK,EAAE,IAAI,CAAC,GAAG,EACf,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE;oBACL,aAAa,EAAE,IAAI;oBACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB,EACD,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,EAC1C,MAAM,EAAE,IAAI,CAAC,MAAM;gBAEnB,gEACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAE,qBAAqB,EAC3B,IAAI,EAAC,IAAI,GACA;gBACX,4DACE,KAAK,EAAE;wBACL,IAAI,EAAE,IAAI;wBACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;qBACxB;oBAED,8DAAa,CACT,CACJ,CACC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-link-button',\n  styleUrl: 'link-button.scss',\n  shadow: true,\n})\nexport class LinkButton {\n  /**\n   * Disable the link button\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Url for the link button\n   */\n  @Prop() url?: string;\n\n  /**\n   * Specifies where to open the link\n   *\n   * https://www.w3schools.com/html/html_links.asp\n   */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  render() {\n    return (\n      <Host>\n        <a\n          title={this.url}\n          tabindex=\"0\"\n          class={{\n            'link-button': true,\n            disabled: this.disabled,\n          }}\n          href={this.disabled ? undefined : this.url}\n          target={this.target}\n        >\n          <ix-icon\n            class=\"icon\"\n            name={'chevron-right-small'}\n            size=\"16\"\n          ></ix-icon>\n          <div\n            class={{\n              link: true,\n              disabled: this.disabled,\n            }}\n          >\n            <slot></slot>\n          </div>\n        </a>\n      </Host>\n    );\n  }\n}\n"]}