@siemens/ix 2.4.1 → 2.6.0

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

@@ -0,0 +1,326 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/*
+ * SPDX-FileCopyrightText: 2023 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 { Host, h, } from "@stencil/core";
+import { HookValidationLifecycle, } from "../utils/input";
+/**
+ * @since 2.6.0
+ * @form-ready 2.6.0
+ */
+export class RadiobuttonGroup {
+    constructor() {
+        this.observer = new MutationObserver(() => {
+            this.ensureOnlyLastRadioChecked();
+        });
+        this.helperText = undefined;
+        this.label = undefined;
+        this.value = undefined;
+        this.invalidText = undefined;
+        this.infoText = undefined;
+        this.warningText = undefined;
+        this.validText = undefined;
+        this.showTextAsTooltip = undefined;
+        this.direction = 'column';
+        this.isInvalid = false;
+        this.isValid = false;
+        this.isInfo = false;
+        this.isWarning = false;
+    }
+    get radiobuttonElements() {
+        return Array.from(this.hostElement.querySelectorAll('ix-radio'));
+    }
+    connectedCallback() {
+        this.observer.observe(this.hostElement, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['checked'],
+        });
+    }
+    componentWillLoad() {
+        this.selectInitialValue();
+        this.ensureOnlyLastRadioChecked();
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
+    selectInitialValue() {
+        if (!this.value) {
+            return;
+        }
+        this.radiobuttonElements.forEach((radiobutton) => {
+            radiobutton.checked = radiobutton.value === this.value;
+        });
+    }
+    ensureOnlyLastRadioChecked() {
+        const checkedRadios = this.radiobuttonElements.filter((radio) => radio.checked);
+        checkedRadios.forEach((radio, index) => {
+            if (index === checkedRadios.length - 1) {
+                return;
+            }
+            radio.checked = false;
+        });
+    }
+    onValueChangeHandler(newValue) {
+        this.radiobuttonElements.forEach((radiobutton) => {
+            radiobutton.checked = radiobutton.value === newValue;
+        });
+    }
+    onCheckedChangeHandler(event) {
+        this.radiobuttonElements.forEach((radiobutton) => {
+            if (radiobutton !== event.target) {
+                radiobutton.checked = false;
+                return;
+            }
+            radiobutton.checked = true;
+            this.valueChange.emit(radiobutton.value);
+        });
+    }
+    onClassField({ isInvalid, isInfo, isValid, isWarning }) {
+        this.isInvalid = isInvalid;
+        this.isInfo = isInfo;
+        this.isValid = isValid;
+        this.isWarning = isWarning;
+    }
+    render() {
+        return (h(Host, { key: 'e34f29dfa844a5d74969e0d7d4524ac0b35ed819' }, h("ix-field-wrapper", { key: 'f146673dd9ff78690cc0b52378793b0c94b20fac', 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: '9280999ed1c6630ae9500e2f73de26a12ea1c417', class: {
+                'checkbox-container': true,
+                'row-layout': this.direction === 'row',
+            } }, h("slot", { key: '7556d4a6396633bc085ebf5cb12070d7a3c673e5' })))));
+    }
+    static get is() { return "ix-radio-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["radio-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["radio-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Show text below the field component"
+                },
+                "attribute": "helper-text",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the field component"
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Value of the radiobutton group component"
+                },
+                "attribute": "value",
+                "reflect": false
+            },
+            "invalidText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error text for the field component"
+                },
+                "attribute": "invalid-text",
+                "reflect": false
+            },
+            "infoText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Info text for the field component"
+                },
+                "attribute": "info-text",
+                "reflect": false
+            },
+            "warningText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Warning text for the field component"
+                },
+                "attribute": "warning-text",
+                "reflect": false
+            },
+            "validText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Valid text for the field component"
+                },
+                "attribute": "valid-text",
+                "reflect": false
+            },
+            "showTextAsTooltip": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Show helper, info, warning, error and valid text as tooltip"
+                },
+                "attribute": "show-text-as-tooltip",
+                "reflect": false
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'column' | 'row'",
+                    "resolved": "\"column\" | \"row\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alignment of the radio buttons in the group"
+                },
+                "attribute": "direction",
+                "reflect": false,
+                "defaultValue": "'column'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isInvalid": {},
+            "isValid": {},
+            "isInfo": {},
+            "isWarning": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the value of the radiobutton group changes"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChangeHandler"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "checkedChange",
+                "method": "onCheckedChangeHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+__decorate([
+    HookValidationLifecycle({
+        includeChildren: true,
+    })
+], RadiobuttonGroup.prototype, "onClassField", null);
+//# sourceMappingURL=radio-group.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,100 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { expect } from "@playwright/test";
+import { test } from "../../../tests/utils/test/index";
+test('renders', async ({ mount, page }) => {
+    await mount(`
+      <ix-radio-group>
+        <ix-radio label="Option 1" value="option1"></ix-radio>
+        <ix-radio label="Option 2" value="option2"></ix-radio>
+        <ix-radio label="Option 3" value="option3"></ix-radio>
+      </ix-radio-group>
+    `);
+    const radioGroupElement = page.locator('ix-radio-group');
+    const radioOption1 = page.locator('ix-radio').nth(0);
+    const radioOption2 = page.locator('ix-radio').nth(1);
+    const radioOption3 = page.locator('ix-radio').nth(2);
+    await expect(radioGroupElement).toHaveClass(/hydrated/);
+    await expect(radioOption1).toHaveClass(/hydrated/);
+    await expect(radioOption2).toHaveClass(/hydrated/);
+    await expect(radioOption3).toHaveClass(/hydrated/);
+});
+test('initial checked', async ({ mount, page }) => {
+    await mount(`
+      <ix-radio-group>
+        <ix-radio label="Option 1" value="option1"></ix-radio>
+        <ix-radio label="Option 2" value="option2" checked></ix-radio>
+        <ix-radio label="Option 3" value="option3"></ix-radio>
+      </ix-radio-group>
+    `);
+    const radioGroupElement = page.locator('ix-radio-group');
+    const radioOption1 = page.locator('ix-radio').nth(0);
+    const radioOption2 = page.locator('ix-radio').nth(1);
+    const radioOption3 = page.locator('ix-radio').nth(2);
+    await expect(radioGroupElement).toHaveClass(/hydrated/);
+    await expect(radioOption1).toHaveClass(/hydrated/);
+    await expect(radioOption2).toHaveClass(/hydrated/);
+    await expect(radioOption3).toHaveClass(/hydrated/);
+    await expect(radioOption2.locator('.checkmark')).toBeAttached();
+});
+test('change checked', async ({ mount, page }) => {
+    await mount(`
+      <ix-radio-group>
+        <ix-radio label="Option 1" value="option1"></ix-radio>
+        <ix-radio label="Option 2" value="option2" checked></ix-radio>
+        <ix-radio label="Option 3" value="option3"></ix-radio>
+      </ix-radio-group>
+    `);
+    const radioGroupElement = page.locator('ix-radio-group');
+    const radioOption1 = page.locator('ix-radio').nth(0);
+    const radioOption2 = page.locator('ix-radio').nth(1);
+    const radioOption3 = page.locator('ix-radio').nth(2);
+    await expect(radioGroupElement).toHaveClass(/hydrated/);
+    await expect(radioOption1).toHaveClass(/hydrated/);
+    await expect(radioOption2).toHaveClass(/hydrated/);
+    await expect(radioOption2.locator('.checkmark')).toBeAttached();
+    await expect(radioOption3).toHaveClass(/hydrated/);
+    await radioOption3.click();
+    await expect(radioOption2).not.toHaveAttribute('checked');
+    await expect(radioOption2.locator('.checkmark')).not.toBeAttached();
+    await expect(radioOption3.locator('.checkmark')).toBeAttached();
+    await expect(radioOption3).toHaveAttribute('checked');
+});
+test('emit group changed change', async ({ mount, page }) => {
+    await mount(`
+      <ix-radio-group>
+        <ix-radio label="Option 1" value="option1"></ix-radio>
+        <ix-radio label="Option 2" value="option2" checked></ix-radio>
+        <ix-radio label="Option 3" value="option3"></ix-radio>
+      </ix-radio-group>
+    `);
+    const radioGroupElement = page.locator('ix-radio-group');
+    const radioOption3 = page.locator('ix-radio').nth(2);
+    const onValueChange = radioGroupElement.evaluate((el) => new Promise((resolve) => {
+        el.addEventListener('valueChange', (event) => {
+            const customEvent = event;
+            resolve(customEvent.detail);
+        });
+    }));
+    await radioOption3.click();
+    expect(await onValueChange).toEqual('option3');
+});
+test('disabled', async ({ mount, page }) => {
+    await mount(`
+      <ix-radio-group>
+        <ix-radio label="Option 1" value="option1"></ix-radio>
+        <ix-radio label="Option 2" value="option2" checked></ix-radio>
+        <ix-radio label="Option 3" value="option3" disabled></ix-radio>
+      </ix-radio-group>
+    `);
+    const radioOption3 = page.locator('ix-radio').nth(2);
+    await expect(radioOption3).not.toBeEnabled();
+    await expect(radioOption3.locator('.checkmark')).not.toBeAttached();
+});
+//# sourceMappingURL=radio-group.ct.js.map

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

@@ -0,0 +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 { test } from '@utils/test';\n\ntest('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\ntest('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')).toBeAttached();\n});\n\ntest('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')).toBeAttached();\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.toBeAttached();\n  await expect(radioOption3.locator('.checkmark')).toBeAttached();\n  await expect(radioOption3).toHaveAttribute('checked');\n});\n\ntest('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\ntest('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.toBeAttached();\n});\n"]}

package/dist/collection/components/row/row.css

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

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

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -12,7 +12,7 @@ import { h, Host } from "@stencil/core";
  */
 export class Row {
     render() {
-        return (h(Host, { key: 'b8813e92c151d3f0a6d063a4f03b50f384ef1127' }, h("slot", { key: '5246811d7fb18593758b07a32e58fee15ba34d51' })));
+        return (h(Host, { key: '89172693b9ba7a6cbe639e50e72992d5028af953' }, h("slot", { key: 'bb424e5fe98e377dd765192debdf0a268bb4f7a2' })));
     }
     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: 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 } 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;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"]}

package/dist/collection/components/select/select.css

@@ -58,6 +58,22 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 :host {
   /* width */
   /* Track */
@@ -111,6 +127,7 @@
   position: relative;
   display: flex;
   align-items: center;
+  width: 100%;
   background-color: var(--theme-input--background);
   border: var(--theme-input--border-thickness) solid var(--theme-input--border-color);
   border-radius: var(--theme-input--border-radius);
@@ -196,6 +213,12 @@
 :host .input-container .chips > ix-filter-chip {
   margin: 0.1rem;
 }
+:host .input-container ix-icon-button {
+  height: 1.875rem;
+  width: 1.875rem;
+  min-height: 1.875rem;
+  min-width: 1.875rem;
+}
 :host .input-container input {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -246,4 +269,39 @@
   height: 2rem;
   color: var(--theme-select-list-item-hint--color);
   margin: 0 0.5rem 0 1rem;
+}
+
+:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) .select {
+  border-color: var(--theme-input--border-color--info);
+}
+:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) .select:hover {
+  border-color: var(--theme-input--border-color--info--hover) !important;
+}
+:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) .select:active {
+  border-color: var(--theme-input--border-color--info--active) !important;
+}
+
+:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) .select {
+  border-color: var(--theme-input--border-color--warning);
+}
+:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) .select:hover {
+  border-color: var(--theme-input--border-color--warning--hover) !important;
+}
+:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) .select:active {
+  border-color: var(--theme-input--border-color--warning--active) !important;
+}
+
+:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) .select,
+:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) .select {
+  border-color: var(--theme-input--border-color--invalid);
+  background-color: var(--theme-input--background--invalid);
+  box-shadow: none;
+}
+:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) .select:hover,
+:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) .select:hover {
+  border-color: var(--theme-input--border-color--invalid--hover) !important;
+}
+:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) .select:active,
+:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) .select:active {
+  border-color: var(--theme-input--border-color--invalid--active) !important;
 }