@siemens/ix 3.0.0-alpha.4 → 3.0.0

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

@@ -18,9 +18,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  */
 import { Host, h, } from "@stencil/core";
 import { HookValidationLifecycle, } from "../utils/input";
+import { makeRef } from "../utils/make-ref";
 /**
- * @since 2.6.0
- * @form-ready 2.6.0
+ * @form-ready
  */
 export class RadiobuttonGroup {
     constructor() {
@@ -28,12 +28,21 @@ export class RadiobuttonGroup {
          * Alignment of the radio buttons in the group
          */
         this.direction = 'column';
+        /**
+         * Required state of the checkbox component
+         *
+         * @internal
+         */
+        this.required = false;
         this.isInvalid = false;
         this.isValid = false;
         this.isInfo = false;
         this.isWarning = false;
+        this.touched = false;
+        this.groupRef = makeRef();
         this.observer = new MutationObserver(() => {
             this.ensureOnlyLastRadioChecked();
+            this.hasNestedRequiredRadio();
         });
     }
     get radiobuttonElements() {
@@ -44,12 +53,13 @@ export class RadiobuttonGroup {
             childList: true,
             subtree: true,
             attributes: true,
-            attributeFilter: ['checked'],
+            attributeFilter: ['checked', 'required'],
         });
     }
     componentWillLoad() {
         this.selectInitialValue();
         this.ensureOnlyLastRadioChecked();
+        this.hasNestedRequiredRadio();
     }
     disconnectedCallback() {
         if (this.observer) {
@@ -73,7 +83,11 @@ export class RadiobuttonGroup {
             radio.checked = false;
         });
     }
+    hasNestedRequiredRadio() {
+        this.required = this.radiobuttonElements.some((radiobutton) => radiobutton.required);
+    }
     onValueChangeHandler(newValue) {
+        this.touched = true;
         this.radiobuttonElements.forEach((radiobutton) => {
             radiobutton.checked = radiobutton.value === newValue;
         });
@@ -88,17 +102,25 @@ export class RadiobuttonGroup {
             this.valueChange.emit(radiobutton.value);
         });
     }
-    onClassField({ isInvalid, isInfo, isValid, isWarning }) {
-        this.isInvalid = isInvalid;
+    onClassField({ isInvalid, isInfo, isValid, isWarning, isInvalidByRequired, }) {
+        this.isInvalid = isInvalid || isInvalidByRequired;
         this.isInfo = isInfo;
         this.isValid = isValid;
         this.isWarning = isWarning;
     }
+    /** @internal */
+    hasValidValue() {
+        return Promise.resolve(!!Array.from(this.hostElement.querySelectorAll('ix-radio')).find((radio) => radio.checked));
+    }
+    /** @internal */
+    isTouched() {
+        return Promise.resolve(this.touched);
+    }
     render() {
-        return (h(Host, { key: 'cd598d36a86107d79eccf16bd0b4ca4f69c301f4' }, h("ix-field-wrapper", { key: '90d159cb14dc5d4329421ed75ae06569230aa704', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, isInvalid: this.isInvalid }, h("div", { key: '1729d3d1a216b3d96c4422f5e5098226c04aa902', class: {
+        return (h(Host, { key: '82f7344f3c62f6d3edab91ab97575a353349409d', onIxBlur: () => (this.touched = true), ref: this.groupRef }, h("ix-field-wrapper", { key: 'c820bb3ca72f60391ad8607466d5c129792c811a', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, isInvalid: this.isInvalid, controlRef: this.groupRef }, h("div", { key: '7df5d5acb15bc90da19687c95033b187f74238c6', class: {
                 'checkbox-container': true,
                 'row-layout': this.direction === 'row',
-            } }, h("slot", { key: 'd416793b6d3b0369a10b3e0797090f7c0bd35c32' })))));
+            } }, h("slot", { key: 'abb7dd22d12f81ec87c816d68b368c5485ccb821' })))));
     }
     static get is() { return "ix-radio-group"; }
     static get encapsulation() { return "shadow"; }
@@ -285,6 +307,29 @@ export class RadiobuttonGroup {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "'column'"
+            },
+            "required": {
+                "type": "boolean",
+                "attribute": "required",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Required state of the checkbox component"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -314,6 +359,50 @@ export class RadiobuttonGroup {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "hasValidValue": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            },
+            "isTouched": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            }
+        };
+    }
     static get elementRef() { return "hostElement"; }
     static get watchers() {
         return [{

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

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-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 */\nimport {\n  Component,\n  Element,\n  EventEmitter,\n  Host,\n  Event,\n  Listen,\n  Prop,\n  State,\n  h,\n  Watch,\n} from '@stencil/core';\nimport {\n  ValidationResults,\n  HookValidationLifecycle,\n  FieldWrapperInterface,\n  IxFormValidationState,\n} from '../utils/input';\n\n/**\n * @since 2.6.0\n * @form-ready 2.6.0\n */\n@Component({\n  tag: 'ix-radio-group',\n  styleUrl: 'radio-group.scss',\n  shadow: true,\n})\nexport class RadiobuttonGroup\n  implements FieldWrapperInterface, IxFormValidationState\n{\n  @Element() hostElement!: HTMLIxRadioGroupElement;\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   * Value of the radiobutton group component\n   */\n  @Prop() value?: string;\n\n  /**\n   * Error text for the field component\n   */\n  @Prop() invalidText?: 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   * Valid text for the field component\n   */\n  @Prop() validText?: string;\n\n  /**\n   * Show helper, info, warning, error and valid text as tooltip\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  /**\n   * Alignment of the radio buttons in the group\n   */\n  @Prop() direction: 'column' | 'row' = 'column';\n\n  /**\n   * Event emitted when the value of the radiobutton group changes\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n\n  private readonly observer = new MutationObserver(() => {\n    this.ensureOnlyLastRadioChecked();\n  });\n\n  private get radiobuttonElements() {\n    return Array.from(this.hostElement.querySelectorAll('ix-radio'));\n  }\n\n  connectedCallback(): void {\n    this.observer.observe(this.hostElement, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['checked'],\n    });\n  }\n\n  componentWillLoad(): void | Promise<void> {\n    this.selectInitialValue();\n    this.ensureOnlyLastRadioChecked();\n  }\n\n  disconnectedCallback(): void {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  private selectInitialValue() {\n    if (!this.value) {\n      return;\n    }\n    this.radiobuttonElements.forEach((radiobutton) => {\n      radiobutton.checked = radiobutton.value === this.value;\n    });\n  }\n\n  private ensureOnlyLastRadioChecked() {\n    const checkedRadios = this.radiobuttonElements.filter(\n      (radio) => radio.checked\n    );\n    checkedRadios.forEach((radio, index) => {\n      if (index === checkedRadios.length - 1) {\n        return;\n      }\n      radio.checked = false;\n    });\n  }\n\n  @Watch('value')\n  onValueChangeHandler(newValue: string) {\n    this.radiobuttonElements.forEach((radiobutton) => {\n      radiobutton.checked = radiobutton.value === newValue;\n    });\n  }\n\n  @Listen('checkedChange')\n  onCheckedChangeHandler(event: CustomEvent<boolean>) {\n    this.radiobuttonElements.forEach((radiobutton) => {\n      if (radiobutton !== event.target) {\n        radiobutton.checked = false;\n        return;\n      }\n      radiobutton.checked = true;\n      this.valueChange.emit(radiobutton.value);\n    });\n  }\n\n  @HookValidationLifecycle({\n    includeChildren: true,\n  })\n  onClassField({ isInvalid, isInfo, isValid, isWarning }: ValidationResults) {\n    this.isInvalid = isInvalid;\n    this.isInfo = isInfo;\n    this.isValid = isValid;\n    this.isWarning = isWarning;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-field-wrapper\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          isValid={this.isValid}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          isInvalid={this.isInvalid}\n        >\n          <div\n            class={{\n              'checkbox-container': true,\n              'row-layout': this.direction === 'row',\n            }}\n          >\n            <slot></slot>\n          </div>\n        </ix-field-wrapper>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-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 */\nimport {\n  Component,\n  Element,\n  EventEmitter,\n  Host,\n  Event,\n  Listen,\n  Prop,\n  State,\n  h,\n  Watch,\n  Method,\n} from '@stencil/core';\nimport {\n  ValidationResults,\n  HookValidationLifecycle,\n  FieldWrapperInterface,\n  IxFormValidationState,\n} from '../utils/input';\nimport { makeRef } from '../utils/make-ref';\n\n/**\n * @form-ready\n */\n@Component({\n  tag: 'ix-radio-group',\n  styleUrl: 'radio-group.scss',\n  shadow: true,\n})\nexport class RadiobuttonGroup\n  implements FieldWrapperInterface, IxFormValidationState\n{\n  @Element() hostElement!: HTMLIxRadioGroupElement;\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   * Value of the radiobutton group component\n   */\n  @Prop() value?: string;\n\n  /**\n   * Error text for the field component\n   */\n  @Prop() invalidText?: 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   * Valid text for the field component\n   */\n  @Prop() validText?: string;\n\n  /**\n   * Show helper, info, warning, error and valid text as tooltip\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  /**\n   * Alignment of the radio buttons in the group\n   */\n  @Prop() direction: 'column' | 'row' = 'column';\n\n  /**\n   * Required state of the checkbox component\n   *\n   * @internal\n   */\n  @Prop() required?: boolean = false;\n\n  /**\n   * Event emitted when the value of the radiobutton group changes\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n\n  private touched = false;\n  private readonly groupRef = makeRef<HTMLIxRadioGroupElement>();\n\n  private readonly observer = new MutationObserver(() => {\n    this.ensureOnlyLastRadioChecked();\n    this.hasNestedRequiredRadio();\n  });\n\n  private get radiobuttonElements() {\n    return Array.from(this.hostElement.querySelectorAll('ix-radio'));\n  }\n\n  connectedCallback(): void {\n    this.observer.observe(this.hostElement, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['checked', 'required'],\n    });\n  }\n\n  componentWillLoad(): void | Promise<void> {\n    this.selectInitialValue();\n    this.ensureOnlyLastRadioChecked();\n    this.hasNestedRequiredRadio();\n  }\n\n  disconnectedCallback(): void {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  private selectInitialValue() {\n    if (!this.value) {\n      return;\n    }\n    this.radiobuttonElements.forEach((radiobutton) => {\n      radiobutton.checked = radiobutton.value === this.value;\n    });\n  }\n\n  private ensureOnlyLastRadioChecked() {\n    const checkedRadios = this.radiobuttonElements.filter(\n      (radio) => radio.checked\n    );\n    checkedRadios.forEach((radio, index) => {\n      if (index === checkedRadios.length - 1) {\n        return;\n      }\n      radio.checked = false;\n    });\n  }\n\n  private hasNestedRequiredRadio() {\n    this.required = this.radiobuttonElements.some(\n      (radiobutton) => radiobutton.required\n    );\n  }\n\n  @Watch('value')\n  onValueChangeHandler(newValue: string) {\n    this.touched = true;\n    this.radiobuttonElements.forEach((radiobutton) => {\n      radiobutton.checked = radiobutton.value === newValue;\n    });\n  }\n\n  @Listen('checkedChange')\n  onCheckedChangeHandler(event: CustomEvent<boolean>) {\n    this.radiobuttonElements.forEach((radiobutton) => {\n      if (radiobutton !== event.target) {\n        radiobutton.checked = false;\n        return;\n      }\n      radiobutton.checked = true;\n      this.valueChange.emit(radiobutton.value);\n    });\n  }\n\n  @HookValidationLifecycle({\n    includeChildren: true,\n  })\n  onClassField({\n    isInvalid,\n    isInfo,\n    isValid,\n    isWarning,\n    isInvalidByRequired,\n  }: ValidationResults) {\n    this.isInvalid = isInvalid || isInvalidByRequired;\n    this.isInfo = isInfo;\n    this.isValid = isValid;\n    this.isWarning = isWarning;\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(\n      !!Array.from(this.hostElement.querySelectorAll('ix-radio')).find(\n        (radio) => radio.checked\n      )\n    );\n  }\n\n  /** @internal */\n  @Method()\n  isTouched(): Promise<boolean> {\n    return Promise.resolve(this.touched);\n  }\n\n  render() {\n    return (\n      <Host onIxBlur={() => (this.touched = true)} ref={this.groupRef}>\n        <ix-field-wrapper\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          isValid={this.isValid}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          isInvalid={this.isInvalid}\n          controlRef={this.groupRef}\n        >\n          <div\n            class={{\n              'checkbox-container': true,\n              'row-layout': this.direction === 'row',\n            }}\n          >\n            <slot></slot>\n          </div>\n        </ix-field-wrapper>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/radio-group/test/radio-group.ct.js

@@ -25,6 +25,23 @@ regressionTest('renders', async ({ mount, page }) => {
     await expect(radioOption2).toHaveClass(/hydrated/);
     await expect(radioOption3).toHaveClass(/hydrated/);
 });
+regressionTest('required', async ({ mount, page }) => {
+    await mount(`
+      <ix-radio-group label="example">
+        <ix-radio label="Option 1" value="option1"></ix-radio>
+        <ix-radio label="Option 2" value="option2" required></ix-radio>
+        <ix-radio label="Option 3" value="option3"></ix-radio>
+      </ix-radio-group>
+    `);
+    const radioGroupElement = page.locator('ix-radio-group');
+    await expect(radioGroupElement).toHaveClass(/hydrated/);
+    await expect(radioGroupElement).toHaveText(/example\*/);
+    const radioOption1 = page.locator('ix-radio').nth(0);
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await expect(radioGroupElement).toHaveClass(/ix-invalid--required/);
+    await expect(radioOption1).toHaveClass(/ix-invalid--required/);
+});
 regressionTest('initial checked', async ({ mount, page }) => {
     await mount(`
       <ix-radio-group>

package/dist/collection/components/radio-group/test/radio-group.ct.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.ct.js","sourceRoot":"","sources":["../../../../src/components/radio-group/test/radio-group.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(\n    `\n      <ix-radio-group>\n        <ix-radio label=\"Option 1\" value=\"option1\"></ix-radio>\n        <ix-radio label=\"Option 2\" value=\"option2\"></ix-radio>\n        <ix-radio label=\"Option 3\" value=\"option3\"></ix-radio>\n      </ix-radio-group>\n    `\n  );\n  const radioGroupElement = page.locator('ix-radio-group');\n  const radioOption1 = page.locator('ix-radio').nth(0);\n  const radioOption2 = page.locator('ix-radio').nth(1);\n  const radioOption3 = page.locator('ix-radio').nth(2);\n  await expect(radioGroupElement).toHaveClass(/hydrated/);\n  await expect(radioOption1).toHaveClass(/hydrated/);\n  await expect(radioOption2).toHaveClass(/hydrated/);\n  await expect(radioOption3).toHaveClass(/hydrated/);\n});\n\nregressionTest('initial checked', async ({ mount, page }) => {\n  await mount(\n    `\n      <ix-radio-group>\n        <ix-radio label=\"Option 1\" value=\"option1\"></ix-radio>\n        <ix-radio label=\"Option 2\" value=\"option2\" checked></ix-radio>\n        <ix-radio label=\"Option 3\" value=\"option3\"></ix-radio>\n      </ix-radio-group>\n    `\n  );\n  const radioGroupElement = page.locator('ix-radio-group');\n  const radioOption1 = page.locator('ix-radio').nth(0);\n  const radioOption2 = page.locator('ix-radio').nth(1);\n  const radioOption3 = page.locator('ix-radio').nth(2);\n  await expect(radioGroupElement).toHaveClass(/hydrated/);\n  await expect(radioOption1).toHaveClass(/hydrated/);\n  await expect(radioOption2).toHaveClass(/hydrated/);\n  await expect(radioOption3).toHaveClass(/hydrated/);\n\n  await expect(radioOption2.locator('.checkmark')).toBeVisible();\n});\n\nregressionTest('change checked', async ({ mount, page }) => {\n  await mount(\n    `\n      <ix-radio-group>\n        <ix-radio label=\"Option 1\" value=\"option1\"></ix-radio>\n        <ix-radio label=\"Option 2\" value=\"option2\" checked></ix-radio>\n        <ix-radio label=\"Option 3\" value=\"option3\"></ix-radio>\n      </ix-radio-group>\n    `\n  );\n  const radioGroupElement = page.locator('ix-radio-group');\n  const radioOption1 = page.locator('ix-radio').nth(0);\n  const radioOption2 = page.locator('ix-radio').nth(1);\n  const radioOption3 = page.locator('ix-radio').nth(2);\n  await expect(radioGroupElement).toHaveClass(/hydrated/);\n  await expect(radioOption1).toHaveClass(/hydrated/);\n  await expect(radioOption2).toHaveClass(/hydrated/);\n  await expect(radioOption2.locator('.checkmark')).toBeVisible();\n  await expect(radioOption3).toHaveClass(/hydrated/);\n\n  await radioOption3.click();\n\n  await expect(radioOption2).not.toHaveAttribute('checked');\n  await expect(radioOption2.locator('.checkmark')).not.toBeVisible();\n  await expect(radioOption3.locator('.checkmark')).toBeVisible();\n  await expect(radioOption3).toHaveAttribute('checked');\n});\n\nregressionTest('emit group changed change', async ({ mount, page }) => {\n  await mount(\n    `\n      <ix-radio-group>\n        <ix-radio label=\"Option 1\" value=\"option1\"></ix-radio>\n        <ix-radio label=\"Option 2\" value=\"option2\" checked></ix-radio>\n        <ix-radio label=\"Option 3\" value=\"option3\"></ix-radio>\n      </ix-radio-group>\n    `\n  );\n  const radioGroupElement = page.locator('ix-radio-group');\n  const radioOption3 = page.locator('ix-radio').nth(2);\n\n  const onValueChange = radioGroupElement.evaluate<string>(\n    (el) =>\n      new Promise((resolve) => {\n        el.addEventListener('valueChange', (event) => {\n          const customEvent = event as CustomEvent<string>;\n          resolve(customEvent.detail);\n        });\n      })\n  );\n\n  await radioOption3.click();\n\n  expect(await onValueChange).toEqual('option3');\n});\n\nregressionTest('disabled', async ({ mount, page }) => {\n  await mount(\n    `\n      <ix-radio-group>\n        <ix-radio label=\"Option 1\" value=\"option1\"></ix-radio>\n        <ix-radio label=\"Option 2\" value=\"option2\" checked></ix-radio>\n        <ix-radio label=\"Option 3\" value=\"option3\" disabled></ix-radio>\n      </ix-radio-group>\n    `\n  );\n  const radioOption3 = page.locator('ix-radio').nth(2);\n  await expect(radioOption3).not.toBeEnabled();\n  await expect(radioOption3.locator('.checkmark')).not.toBeVisible();\n});\n"]}
+{"version":3,"file":"radio-group.ct.js","sourceRoot":"","sources":["../../../../src/components/radio-group/test/radio-group.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(\n    `\n      <ix-radio-group>\n        <ix-radio label=\"Option 1\" value=\"option1\"></ix-radio>\n        <ix-radio label=\"Option 2\" value=\"option2\"></ix-radio>\n        <ix-radio label=\"Option 3\" value=\"option3\"></ix-radio>\n      </ix-radio-group>\n    `\n  );\n  const radioGroupElement = page.locator('ix-radio-group');\n  const radioOption1 = page.locator('ix-radio').nth(0);\n  const radioOption2 = page.locator('ix-radio').nth(1);\n  const radioOption3 = page.locator('ix-radio').nth(2);\n  await expect(radioGroupElement).toHaveClass(/hydrated/);\n  await expect(radioOption1).toHaveClass(/hydrated/);\n  await expect(radioOption2).toHaveClass(/hydrated/);\n  await expect(radioOption3).toHaveClass(/hydrated/);\n});\n\nregressionTest('required', async ({ mount, page }) => {\n  await mount(\n    `\n      <ix-radio-group label=\"example\">\n        <ix-radio label=\"Option 1\" value=\"option1\"></ix-radio>\n        <ix-radio label=\"Option 2\" value=\"option2\" required></ix-radio>\n        <ix-radio label=\"Option 3\" value=\"option3\"></ix-radio>\n      </ix-radio-group>\n    `\n  );\n  const radioGroupElement = page.locator('ix-radio-group');\n  await expect(radioGroupElement).toHaveClass(/hydrated/);\n  await expect(radioGroupElement).toHaveText(/example\\*/);\n\n  const radioOption1 = page.locator('ix-radio').nth(0);\n  await page.keyboard.press('Tab');\n  await page.keyboard.press('Tab');\n\n  await expect(radioGroupElement).toHaveClass(/ix-invalid--required/);\n  await expect(radioOption1).toHaveClass(/ix-invalid--required/);\n});\n\nregressionTest('initial checked', async ({ mount, page }) => {\n  await mount(\n    `\n      <ix-radio-group>\n        <ix-radio label=\"Option 1\" value=\"option1\"></ix-radio>\n        <ix-radio label=\"Option 2\" value=\"option2\" checked></ix-radio>\n        <ix-radio label=\"Option 3\" value=\"option3\"></ix-radio>\n      </ix-radio-group>\n    `\n  );\n  const radioGroupElement = page.locator('ix-radio-group');\n  const radioOption1 = page.locator('ix-radio').nth(0);\n  const radioOption2 = page.locator('ix-radio').nth(1);\n  const radioOption3 = page.locator('ix-radio').nth(2);\n  await expect(radioGroupElement).toHaveClass(/hydrated/);\n  await expect(radioOption1).toHaveClass(/hydrated/);\n  await expect(radioOption2).toHaveClass(/hydrated/);\n  await expect(radioOption3).toHaveClass(/hydrated/);\n\n  await expect(radioOption2.locator('.checkmark')).toBeVisible();\n});\n\nregressionTest('change checked', async ({ mount, page }) => {\n  await mount(\n    `\n      <ix-radio-group>\n        <ix-radio label=\"Option 1\" value=\"option1\"></ix-radio>\n        <ix-radio label=\"Option 2\" value=\"option2\" checked></ix-radio>\n        <ix-radio label=\"Option 3\" value=\"option3\"></ix-radio>\n      </ix-radio-group>\n    `\n  );\n  const radioGroupElement = page.locator('ix-radio-group');\n  const radioOption1 = page.locator('ix-radio').nth(0);\n  const radioOption2 = page.locator('ix-radio').nth(1);\n  const radioOption3 = page.locator('ix-radio').nth(2);\n  await expect(radioGroupElement).toHaveClass(/hydrated/);\n  await expect(radioOption1).toHaveClass(/hydrated/);\n  await expect(radioOption2).toHaveClass(/hydrated/);\n  await expect(radioOption2.locator('.checkmark')).toBeVisible();\n  await expect(radioOption3).toHaveClass(/hydrated/);\n\n  await radioOption3.click();\n\n  await expect(radioOption2).not.toHaveAttribute('checked');\n  await expect(radioOption2.locator('.checkmark')).not.toBeVisible();\n  await expect(radioOption3.locator('.checkmark')).toBeVisible();\n  await expect(radioOption3).toHaveAttribute('checked');\n});\n\nregressionTest('emit group changed change', async ({ mount, page }) => {\n  await mount(\n    `\n      <ix-radio-group>\n        <ix-radio label=\"Option 1\" value=\"option1\"></ix-radio>\n        <ix-radio label=\"Option 2\" value=\"option2\" checked></ix-radio>\n        <ix-radio label=\"Option 3\" value=\"option3\"></ix-radio>\n      </ix-radio-group>\n    `\n  );\n  const radioGroupElement = page.locator('ix-radio-group');\n  const radioOption3 = page.locator('ix-radio').nth(2);\n\n  const onValueChange = radioGroupElement.evaluate<string>(\n    (el) =>\n      new Promise((resolve) => {\n        el.addEventListener('valueChange', (event) => {\n          const customEvent = event as CustomEvent<string>;\n          resolve(customEvent.detail);\n        });\n      })\n  );\n\n  await radioOption3.click();\n\n  expect(await onValueChange).toEqual('option3');\n});\n\nregressionTest('disabled', async ({ mount, page }) => {\n  await mount(\n    `\n      <ix-radio-group>\n        <ix-radio label=\"Option 1\" value=\"option1\"></ix-radio>\n        <ix-radio label=\"Option 2\" value=\"option2\" checked></ix-radio>\n        <ix-radio label=\"Option 3\" value=\"option3\" disabled></ix-radio>\n      </ix-radio-group>\n    `\n  );\n  const radioOption3 = page.locator('ix-radio').nth(2);\n  await expect(radioOption3).not.toBeEnabled();\n  await expect(radioOption3.locator('.checkmark')).not.toBeVisible();\n});\n"]}

package/dist/collection/components/row/row.js

@@ -7,12 +7,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h, Host } from "@stencil/core";
-/**
- * @since 2.0.0
- */
 export class Row {
     render() {
-        return (h(Host, { key: '80ca71d97810db517f4b4f7992449b19c6337076' }, h("slot", { key: '1bae8e11e1ca4a4625b17489110e460a5cfe5002' })));
+        return (h(Host, { key: 'd196cf5b6609b66fd1d8e60175373e6463faec5c' }, h("slot", { key: 'cd5208fe0e779fb69579e8f9bbc1af21572d8bbc' })));
     }
     static get is() { return "ix-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"row.js","sourceRoot":"","sources":["../../../src/components/row/row.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AAMH,MAAM,OAAO,GAAG;IACd,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAa,CACR,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 } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-row',\n  styleUrl: 'row.scss',\n  shadow: true,\n})\nexport class Row {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"row.js","sourceRoot":"","sources":["../../../src/components/row/row.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,GAAG;IACd,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAa,CACR,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 } from '@stencil/core';\n\n@Component({\n  tag: 'ix-row',\n  styleUrl: 'row.scss',\n  shadow: true,\n})\nexport class Row {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/select/select.js

@@ -25,20 +25,17 @@ import { OnListener } from "../utils/listener";
 import { makeRef } from "../utils/make-ref";
 import { createMutationObserver } from "../utils/mutation-observer";
 /**
- * @form-ready 2.6.0
+ * @form-ready
  */
 export class Select {
     constructor() {
         /**
          * A Boolean attribute indicating that an option with a non-empty string value must be selected
-         *
-         * @since 2.6.0
          */
         this.required = false;
         /**
          * Current selected value.
          * This corresponds to the value property of ix-select-items
-         * @since 2.0.0
          */
         this.value = [];
         /**
@@ -75,14 +72,10 @@ export class Select {
         this.i18nSelectListHeader = 'Select an option';
         /**
          * Information inside of dropdown if no items where found with current filter text
-         *
-         * @since 1.5.0
          */
         this.i18nNoMatches = 'No matches';
         /**
          * Hide list header
-         *
-         * @since 1.5.0
          */
         this.hideListHeader = false;
         this.dropdownShow = false;
@@ -566,9 +559,9 @@ export class Select {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: 'fe5a9d201aa6fa9bae2f5cb24057bf161d545d10', "aria-disabled": a11yBoolean(this.disabled), class: {
+        return (h(Host, { key: '9c96e0484bd918417dcbfde85e300e81ee76ff14', "aria-disabled": a11yBoolean(this.disabled), class: {
                 disabled: this.disabled,
-            } }, h("ix-field-wrapper", { key: 'c28aa0804523d6a799c055899194a62e05dcd1a5', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: 'fa78c9596e67642237ccf2bf027f3a4450b2cccb', class: {
+            } }, h("ix-field-wrapper", { key: '2361bfc2f09908d32ee86ffea1ad3e03e0b0e35e', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: '3bc425f480a9709262a4a75d0efc3a0edd344208', class: {
                 select: true,
                 disabled: this.disabled,
                 readonly: this.readonly,
@@ -576,13 +569,13 @@ export class Select {
                 this.dropdownAnchorRef(ref);
                 if (!this.editable)
                     this.dropdownWrapperRef(ref);
-            } }, h("div", { key: 'c0e4e52e89640cb3dd31950f4457bbf0209363ac', class: "input-container" }, h("div", { key: '53375714b199123d27fdb57d51102f7d0be912bb', class: "chips" }, this.isMultipleMode
+            } }, h("div", { key: '36fb0119739e50e0b7ad33206b9ac2af13a2d02a', class: "input-container" }, h("div", { key: '69cd6098ab12694ccbb9f379fe306d20e058ab7d', class: "chips" }, this.isMultipleMode
             ? (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (h("ix-filter-chip", { disabled: this.disabled || this.readonly, key: item.value, onCloseClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     this.itemClick(item.value);
                 } }, item.label)))
-            : '', h("div", { key: '42cac6b1306e7b0339c47857a41685952465280c', class: "trigger" }, h("input", { key: '94fe4f82da75de234fb134fb7792f78cb87d2c37', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, required: this.required, type: "text", class: {
+            : '', h("div", { key: '10b6f384260f0137b92063c6277601b30d91e71e', class: "trigger" }, h("input", { key: '71222c3c2fce7115a28e1ddc798c1c947195b6c0', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, required: this.required, type: "text", class: {
                 'allow-clear': this.allowClear && !!((_b = this.selectedLabels) === null || _b === void 0 ? void 0 : _b.length),
             }, placeholder: this.placeholderValue(), value: (_c = this.inputValue) !== null && _c !== void 0 ? _c : '', ref: (ref) => {
                 this.inputElement = ref;
@@ -599,7 +592,7 @@ export class Select {
             } })) : null, this.disabled || this.readonly ? null : (h("ix-icon-button", { "data-select-dropdown": true, key: "dropdown", class: { 'dropdown-visible': this.dropdownShow }, icon: iconChevronDownSmall, ghost: true, ref: (ref) => {
                 if (this.editable)
                     this.dropdownWrapperRef(ref);
-            } }))))))), h("ix-dropdown", { key: '82133f6945c1b7b1f043bdb5a80fbe53e506f8f6', ref: (ref) => (this.dropdownElement = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
+            } }))))))), h("ix-dropdown", { key: 'aac8cbe6759915570b9f940a024a0c124b88d7cb', ref: (ref) => (this.dropdownElement = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
                 'display-none': this.disabled || this.readonly,
             }, anchor: this.dropdownAnchorRef.waitForCurrent(), trigger: this.dropdownWrapperRef.waitForCurrent(), onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom-start", overwriteDropdownStyle: async () => {
                 var _a, _b;
@@ -615,12 +608,12 @@ export class Select {
                     styleOverwrites.maxWidth = `min(${this.dropdownMaxWidth}, 100%)`;
                 }
                 return styleOverwrites;
-            } }, h("div", { key: '6e843696ec1bf3fe827e22e1aeda1cb07bbd51d6', class: {
+            } }, h("div", { key: '20c61f1e345f4203e0017480aecb16ba6559db53', class: {
                 'select-list-header': true,
                 hidden: this.hideListHeader || this.isDropdownEmpty,
-            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), h("slot", { key: 'c6756d5bb0c13bc88dfd5acd6e5596151c694bcc', onSlotchange: () => {
+            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), h("slot", { key: 'f16a3d974086f0ed7701b6b6ded216c7a3be1603', onSlotchange: () => {
                 this.updateSelection();
-            } }), h("div", { key: '3dd0a1342c1261899088bb8ca0dadff69e5d2c1a', ref: (ref) => (this.customItemsContainerElement = ref) }), this.isAddItemVisible() ? (h("ix-dropdown-item", { "data-testid": "add-item", icon: iconPlus, class: {
+            } }), h("div", { key: '6a1053c8bcd639b88a88ec1583514c1066e39677', ref: (ref) => (this.customItemsContainerElement = ref) }), this.isAddItemVisible() ? (h("ix-dropdown-item", { "data-testid": "add-item", icon: iconPlus, class: {
                 'add-item': true,
             }, label: this.inputFilterText, onItemClick: (e) => {
                 e.preventDefault();
@@ -657,10 +650,7 @@ export class Select {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "2.6.0"
-                        }],
+                    "tags": [],
                     "text": "A string that represents the element's name attribute,\ncontaining a name that identifies the element when submitting the form."
                 },
                 "getter": false,
@@ -679,10 +669,7 @@ export class Select {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "2.6.0"
-                        }],
+                    "tags": [],
                     "text": "A Boolean attribute indicating that an option with a non-empty string value must be selected"
                 },
                 "getter": false,
@@ -702,10 +689,7 @@ export class Select {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "2.6.0"
-                        }],
+                    "tags": [],
                     "text": "Label for the select component"
                 },
                 "getter": false,
@@ -724,10 +708,7 @@ export class Select {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "2.6.0"
-                        }],
+                    "tags": [],
                     "text": "Warning text for the select component"
                 },
                 "getter": false,
@@ -746,10 +727,7 @@ export class Select {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "2.6.0"
-                        }],
+                    "tags": [],
                     "text": "Info text for the select component"
                 },
                 "getter": false,
@@ -768,10 +746,7 @@ export class Select {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "2.6.0"
-                        }],
+                    "tags": [],
                     "text": "Error text for the select component"
                 },
                 "getter": false,
@@ -790,10 +765,7 @@ export class Select {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "2.6.0"
-                        }],
+                    "tags": [],
                     "text": "Valid text for the select component"
                 },
                 "getter": false,
@@ -812,10 +784,7 @@ export class Select {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "2.6.0"
-                        }],
+                    "tags": [],
                     "text": "Helper text for the select component"
                 },
                 "getter": false,
@@ -834,10 +803,7 @@ export class Select {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "2.6.0"
-                        }],
+                    "tags": [],
                     "text": "Show helper, error, info, warning text as tooltip"
                 },
                 "getter": false,
@@ -856,10 +822,7 @@ export class Select {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "2.0.0"
-                        }],
+                    "tags": [],
                     "text": "Current selected value.\nThis corresponds to the value property of ix-select-items"
                 },
                 "getter": false,
@@ -1039,10 +1002,7 @@ export class Select {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "1.5.0"
-                        }],
+                    "tags": [],
                     "text": "Information inside of dropdown if no items where found with current filter text"
                 },
                 "getter": false,
@@ -1062,10 +1022,7 @@ export class Select {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "1.5.0"
-                        }],
+                    "tags": [],
                     "text": "Hide list header"
                 },
                 "getter": false,
@@ -1085,10 +1042,7 @@ export class Select {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "2.7.0"
-                        }],
+                    "tags": [],
                     "text": "The width of the dropdown element with value and unit (e.g. \"200px\" or \"12.5rem\")."
                 },
                 "getter": false,
@@ -1107,10 +1061,7 @@ export class Select {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "2.7.0"
-                        }],
+                    "tags": [],
                     "text": "The maximum width of the dropdown element with value and unit (e.g. \"200px\" or \"12.5rem\").\nBy default the maximum width of the dropdown element is set to 100%."
                 },
                 "getter": false,
@@ -1141,10 +1092,7 @@ export class Select {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "2.0.0"
-                        }],
+                    "tags": [],
                     "text": "Value changed"
                 },
                 "complexType": {
@@ -1159,10 +1107,7 @@ export class Select {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "2.0.0"
-                        }],
+                    "tags": [],
                     "text": "Event dispatched whenever the text input changes."
                 },
                 "complexType": {