@siemens/ix 0.0.0-20240522074328 → 0.0.0-pr-1318-20240627080522

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":["import {\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/field';\n\n/**\n * @since 2.4.0\n * @form-ready 2.4.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   * 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 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          <slot name=\"label\" slot=\"label\"></slot>\n\n          <div class={'checkbox-container'}>\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,99 @@
+/*
+ * 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) => {
+            resolve(event.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: CustomEvent) => {\n          resolve(event.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.js

@@ -12,7 +12,7 @@ import { h, Host } from "@stencil/core";
  */
 export class Row {
     render() {
-        return (h(Host, { key: '1ffd343609151d842c357f2e7663e4c772b8ef5a' }, h("slot", { key: 'f3c73ee49974fb8baa706a9b699fe703166f2f96' })));
+        return (h(Host, { key: '1cdde89ce2ab014d88b527ccbb2e6595e22b0e97' }, h("slot", { key: '2a8a95a0a76548282485977964fa06b07a63c9e1' })));
     }
     static get is() { return "ix-row"; }
     static get encapsulation() { return "shadow"; }

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 */
@@ -77,6 +93,12 @@
 :host ::-webkit-scrollbar-button {
   display: none;
 }
+@-moz-document url-prefix() {
+  :host * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
 :host ::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
@@ -105,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);
@@ -240,4 +263,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;
 }