npm - @siemens/ix - Versions diffs - 2.6.1 → 2.7.0 - Mend

@siemens/ix 2.6.1 → 2.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1128) hide show

package/dist/collection/components/checkbox/checkbox.css CHANGED Viewed

@@ -135,39 +135,72 @@
   border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active);
 }
-:host(:disabled) button,
 :host(.disabled) button {
   background-color: var(--theme-checkbox-unchecked--background--disabled);
   border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled);
 }
-:host(.checked:disabled) button,
 :host(.checked.disabled) button,
-:host(.indeterminate:disabled) button,
 :host(.indeterminate.disabled) button {
   background-color: var(--theme-checkbox-checked--background--disabled);
   border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled);
 }
 :host(.ix-info) button {
-  --theme-checkbox-unchecked--background: var(--theme-checkbox-unchecked--background--info);
-  --theme-checkbox-unchecked--background--hover: var(--theme-checkbox-unchecked--background--info--hover);
-  --theme-checkbox-unchecked--background--active: var(--theme-checkbox-unchecked--background--info--active);
-  --theme-checkbox-unchecked--border-color: var(--theme-checkbox-unchecked--border-color--info);
-  --theme-checkbox-unchecked--border-color--hover: var(--theme-checkbox-unchecked--border-color--info--hover);
-  --theme-checkbox-unchecked--border-color--active: var(--theme-checkbox-unchecked--border-color--info--active);
-  --theme-checkbox-checked--background: var(--theme-checkbox-checked--background--info);
-  --theme-checkbox-checked--background--hover: var(--theme-checkbox-checked--background--info--hover);
-  --theme-checkbox-checked--background--active: var(--theme-checkbox-checked--background--info--active);
-  --theme-checkbox-checked--border-color: var(--theme-checkbox-checked--border-color--info);
-  --theme-checkbox-checked--border-color--hover: var(--theme-checkbox-checked--border-color--info--hover);
-  --theme-checkbox-checked--border-color--active: var(--theme-checkbox-checked--border-color--info--active);
-  --theme-checkbox-mixed--background: var(--theme-checkbox-mixed--background--info);
-  --theme-checkbox-mixed--background--hover: var(--theme-checkbox-mixed--background--info--hover);
-  --theme-checkbox-mixed--background--active: var(--theme-checkbox-mixed--background--info--active);
-  --theme-checkbox-mixed--border-color: var(--theme-checkbox-mixed--border-color--info);
-  --theme-checkbox-mixed--border-color--hover: var(--theme-checkbox-mixed--border-color--info--hover);
-  --theme-checkbox-mixed--border-color--active: var(--theme-checkbox-mixed--border-color--info--active);
+  --theme-checkbox-unchecked--background: var(
+    --theme-checkbox-unchecked--background--info
+  );
+  --theme-checkbox-unchecked--background--hover: var(
+    --theme-checkbox-unchecked--background--info--hover
+  );
+  --theme-checkbox-unchecked--background--active: var(
+    --theme-checkbox-unchecked--background--info--active
+  );
+  --theme-checkbox-unchecked--border-color: var(
+    --theme-checkbox-unchecked--border-color--info
+  );
+  --theme-checkbox-unchecked--border-color--hover: var(
+    --theme-checkbox-unchecked--border-color--info--hover
+  );
+  --theme-checkbox-unchecked--border-color--active: var(
+    --theme-checkbox-unchecked--border-color--info--active
+  );
+  --theme-checkbox-checked--background: var(
+    --theme-checkbox-checked--background--info
+  );
+  --theme-checkbox-checked--background--hover: var(
+    --theme-checkbox-checked--background--info--hover
+  );
+  --theme-checkbox-checked--background--active: var(
+    --theme-checkbox-checked--background--info--active
+  );
+  --theme-checkbox-checked--border-color: var(
+    --theme-checkbox-checked--border-color--info
+  );
+  --theme-checkbox-checked--border-color--hover: var(
+    --theme-checkbox-checked--border-color--info--hover
+  );
+  --theme-checkbox-checked--border-color--active: var(
+    --theme-checkbox-checked--border-color--info--active
+  );
+  --theme-checkbox-mixed--background: var(
+    --theme-checkbox-mixed--background--info
+  );
+  --theme-checkbox-mixed--background--hover: var(
+    --theme-checkbox-mixed--background--info--hover
+  );
+  --theme-checkbox-mixed--background--active: var(
+    --theme-checkbox-mixed--background--info--active
+  );
+  --theme-checkbox-mixed--border-color: var(
+    --theme-checkbox-mixed--border-color--info
+  );
+  --theme-checkbox-mixed--border-color--hover: var(
+    --theme-checkbox-mixed--border-color--info--hover
+  );
+  --theme-checkbox-mixed--border-color--active: var(
+    --theme-checkbox-mixed--border-color--info--active
+  );
   background-color: var(--theme-checkbox-unchecked--background);
   border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color);
 }
@@ -200,39 +233,72 @@
   border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active);
 }
-:host(.ix-info:disabled) button,
 :host(.ix-info.disabled) button {
   background-color: var(--theme-checkbox-unchecked--background--disabled);
   border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled);
 }
-:host(.ix-info.checked:disabled) button,
 :host(.ix-info.checked.disabled) button,
-:host(.ix-info.indeterminate:disabled) button,
 :host(.ix-info.indeterminate.disabled) button {
   background-color: var(--theme-checkbox-checked--background--disabled);
   border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled);
 }
 :host(.ix-warning) button {
-  --theme-checkbox-unchecked--background: var(--theme-checkbox-unchecked--background--warning);
-  --theme-checkbox-unchecked--background--hover: var(--theme-checkbox-unchecked--background--warning--hover);
-  --theme-checkbox-unchecked--background--active: var(--theme-checkbox-unchecked--background--warning--active);
-  --theme-checkbox-unchecked--border-color: var(--theme-checkbox-unchecked--border-color--warning);
-  --theme-checkbox-unchecked--border-color--hover: var(--theme-checkbox-unchecked--border-color--warning--hover);
-  --theme-checkbox-unchecked--border-color--active: var(--theme-checkbox-unchecked--border-color--warning--active);
-  --theme-checkbox-checked--background: var(--theme-checkbox-checked--background--warning);
-  --theme-checkbox-checked--background--hover: var(--theme-checkbox-checked--background--warning--hover);
-  --theme-checkbox-checked--background--active: var(--theme-checkbox-checked--background--warning--active);
-  --theme-checkbox-checked--border-color: var(--theme-checkbox-checked--border-color--warning);
-  --theme-checkbox-checked--border-color--hover: var(--theme-checkbox-checked--border-color--warning--hover);
-  --theme-checkbox-checked--border-color--active: var(--theme-checkbox-checked--border-color--warning--active);
-  --theme-checkbox-mixed--background: var(--theme-checkbox-mixed--background--warning);
-  --theme-checkbox-mixed--background--hover: var(--theme-checkbox-mixed--background--warning--hover);
-  --theme-checkbox-mixed--background--active: var(--theme-checkbox-mixed--background--warning--active);
-  --theme-checkbox-mixed--border-color: var(--theme-checkbox-mixed--border-color--warning);
-  --theme-checkbox-mixed--border-color--hover: var(--theme-checkbox-mixed--border-color--warning--hover);
-  --theme-checkbox-mixed--border-color--active: var(--theme-checkbox-mixed--border-color--warning--active);
+  --theme-checkbox-unchecked--background: var(
+    --theme-checkbox-unchecked--background--warning
+  );
+  --theme-checkbox-unchecked--background--hover: var(
+    --theme-checkbox-unchecked--background--warning--hover
+  );
+  --theme-checkbox-unchecked--background--active: var(
+    --theme-checkbox-unchecked--background--warning--active
+  );
+  --theme-checkbox-unchecked--border-color: var(
+    --theme-checkbox-unchecked--border-color--warning
+  );
+  --theme-checkbox-unchecked--border-color--hover: var(
+    --theme-checkbox-unchecked--border-color--warning--hover
+  );
+  --theme-checkbox-unchecked--border-color--active: var(
+    --theme-checkbox-unchecked--border-color--warning--active
+  );
+  --theme-checkbox-checked--background: var(
+    --theme-checkbox-checked--background--warning
+  );
+  --theme-checkbox-checked--background--hover: var(
+    --theme-checkbox-checked--background--warning--hover
+  );
+  --theme-checkbox-checked--background--active: var(
+    --theme-checkbox-checked--background--warning--active
+  );
+  --theme-checkbox-checked--border-color: var(
+    --theme-checkbox-checked--border-color--warning
+  );
+  --theme-checkbox-checked--border-color--hover: var(
+    --theme-checkbox-checked--border-color--warning--hover
+  );
+  --theme-checkbox-checked--border-color--active: var(
+    --theme-checkbox-checked--border-color--warning--active
+  );
+  --theme-checkbox-mixed--background: var(
+    --theme-checkbox-mixed--background--warning
+  );
+  --theme-checkbox-mixed--background--hover: var(
+    --theme-checkbox-mixed--background--warning--hover
+  );
+  --theme-checkbox-mixed--background--active: var(
+    --theme-checkbox-mixed--background--warning--active
+  );
+  --theme-checkbox-mixed--border-color: var(
+    --theme-checkbox-mixed--border-color--warning
+  );
+  --theme-checkbox-mixed--border-color--hover: var(
+    --theme-checkbox-mixed--border-color--warning--hover
+  );
+  --theme-checkbox-mixed--border-color--active: var(
+    --theme-checkbox-mixed--border-color--warning--active
+  );
   background-color: var(--theme-checkbox-unchecked--background);
   border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color);
 }
@@ -265,39 +331,72 @@
   border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active);
 }
-:host(.ix-warning:disabled) button,
 :host(.ix-warning.disabled) button {
   background-color: var(--theme-checkbox-unchecked--background--disabled);
   border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled);
 }
-:host(.ix-warning.checked:disabled) button,
 :host(.ix-warning.checked.disabled) button,
-:host(.ix-warning.indeterminate:disabled) button,
 :host(.ix-warning.indeterminate.disabled) button {
   background-color: var(--theme-checkbox-checked--background--disabled);
   border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled);
 }
 :host(.ix-invalid--required) button {
-  --theme-checkbox-unchecked--background: var(--theme-checkbox-unchecked--background--invalid);
-  --theme-checkbox-unchecked--background--hover: var(--theme-checkbox-unchecked--background--invalid--hover);
-  --theme-checkbox-unchecked--background--active: var(--theme-checkbox-unchecked--background--invalid--active);
-  --theme-checkbox-unchecked--border-color: var(--theme-checkbox-unchecked--border-color--invalid);
-  --theme-checkbox-unchecked--border-color--hover: var(--theme-checkbox-unchecked--border-color--invalid--hover);
-  --theme-checkbox-unchecked--border-color--active: var(--theme-checkbox-unchecked--border-color--invalid--active);
-  --theme-checkbox-checked--background: var(--theme-checkbox-checked--background--invalid);
-  --theme-checkbox-checked--background--hover: var(--theme-checkbox-checked--background--invalid--hover);
-  --theme-checkbox-checked--background--active: var(--theme-checkbox-checked--background--invalid--active);
-  --theme-checkbox-checked--border-color: var(--theme-checkbox-checked--border-color--invalid);
-  --theme-checkbox-checked--border-color--hover: var(--theme-checkbox-checked--border-color--invalid--hover);
-  --theme-checkbox-checked--border-color--active: var(--theme-checkbox-checked--border-color--invalid--active);
-  --theme-checkbox-mixed--background: var(--theme-checkbox-mixed--background--invalid);
-  --theme-checkbox-mixed--background--hover: var(--theme-checkbox-mixed--background--invalid--hover);
-  --theme-checkbox-mixed--background--active: var(--theme-checkbox-mixed--background--invalid--active);
-  --theme-checkbox-mixed--border-color: var(--theme-checkbox-mixed--border-color--invalid);
-  --theme-checkbox-mixed--border-color--hover: var(--theme-checkbox-mixed--border-color--invalid--hover);
-  --theme-checkbox-mixed--border-color--active: var(--theme-checkbox-mixed--border-color--invalid--active);
+  --theme-checkbox-unchecked--background: var(
+    --theme-checkbox-unchecked--background--invalid
+  );
+  --theme-checkbox-unchecked--background--hover: var(
+    --theme-checkbox-unchecked--background--invalid--hover
+  );
+  --theme-checkbox-unchecked--background--active: var(
+    --theme-checkbox-unchecked--background--invalid--active
+  );
+  --theme-checkbox-unchecked--border-color: var(
+    --theme-checkbox-unchecked--border-color--invalid
+  );
+  --theme-checkbox-unchecked--border-color--hover: var(
+    --theme-checkbox-unchecked--border-color--invalid--hover
+  );
+  --theme-checkbox-unchecked--border-color--active: var(
+    --theme-checkbox-unchecked--border-color--invalid--active
+  );
+  --theme-checkbox-checked--background: var(
+    --theme-checkbox-checked--background--invalid
+  );
+  --theme-checkbox-checked--background--hover: var(
+    --theme-checkbox-checked--background--invalid--hover
+  );
+  --theme-checkbox-checked--background--active: var(
+    --theme-checkbox-checked--background--invalid--active
+  );
+  --theme-checkbox-checked--border-color: var(
+    --theme-checkbox-checked--border-color--invalid
+  );
+  --theme-checkbox-checked--border-color--hover: var(
+    --theme-checkbox-checked--border-color--invalid--hover
+  );
+  --theme-checkbox-checked--border-color--active: var(
+    --theme-checkbox-checked--border-color--invalid--active
+  );
+  --theme-checkbox-mixed--background: var(
+    --theme-checkbox-mixed--background--invalid
+  );
+  --theme-checkbox-mixed--background--hover: var(
+    --theme-checkbox-mixed--background--invalid--hover
+  );
+  --theme-checkbox-mixed--background--active: var(
+    --theme-checkbox-mixed--background--invalid--active
+  );
+  --theme-checkbox-mixed--border-color: var(
+    --theme-checkbox-mixed--border-color--invalid
+  );
+  --theme-checkbox-mixed--border-color--hover: var(
+    --theme-checkbox-mixed--border-color--invalid--hover
+  );
+  --theme-checkbox-mixed--border-color--active: var(
+    --theme-checkbox-mixed--border-color--invalid--active
+  );
   background-color: var(--theme-checkbox-unchecked--background);
   border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color);
 }
@@ -330,39 +429,72 @@
   border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active);
 }
-:host(.ix-invalid--required:disabled) button,
 :host(.ix-invalid--required.disabled) button {
   background-color: var(--theme-checkbox-unchecked--background--disabled);
   border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled);
 }
-:host(.ix-invalid--required.checked:disabled) button,
 :host(.ix-invalid--required.checked.disabled) button,
-:host(.ix-invalid--required.indeterminate:disabled) button,
 :host(.ix-invalid--required.indeterminate.disabled) button {
   background-color: var(--theme-checkbox-checked--background--disabled);
   border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled);
 }
 :host(.ix-invalid) button {
-  --theme-checkbox-unchecked--background: var(--theme-checkbox-unchecked--background--invalid);
-  --theme-checkbox-unchecked--background--hover: var(--theme-checkbox-unchecked--background--invalid--hover);
-  --theme-checkbox-unchecked--background--active: var(--theme-checkbox-unchecked--background--invalid--active);
-  --theme-checkbox-unchecked--border-color: var(--theme-checkbox-unchecked--border-color--invalid);
-  --theme-checkbox-unchecked--border-color--hover: var(--theme-checkbox-unchecked--border-color--invalid--hover);
-  --theme-checkbox-unchecked--border-color--active: var(--theme-checkbox-unchecked--border-color--invalid--active);
-  --theme-checkbox-checked--background: var(--theme-checkbox-checked--background--invalid);
-  --theme-checkbox-checked--background--hover: var(--theme-checkbox-checked--background--invalid--hover);
-  --theme-checkbox-checked--background--active: var(--theme-checkbox-checked--background--invalid--active);
-  --theme-checkbox-checked--border-color: var(--theme-checkbox-checked--border-color--invalid);
-  --theme-checkbox-checked--border-color--hover: var(--theme-checkbox-checked--border-color--invalid--hover);
-  --theme-checkbox-checked--border-color--active: var(--theme-checkbox-checked--border-color--invalid--active);
-  --theme-checkbox-mixed--background: var(--theme-checkbox-mixed--background--invalid);
-  --theme-checkbox-mixed--background--hover: var(--theme-checkbox-mixed--background--invalid--hover);
-  --theme-checkbox-mixed--background--active: var(--theme-checkbox-mixed--background--invalid--active);
-  --theme-checkbox-mixed--border-color: var(--theme-checkbox-mixed--border-color--invalid);
-  --theme-checkbox-mixed--border-color--hover: var(--theme-checkbox-mixed--border-color--invalid--hover);
-  --theme-checkbox-mixed--border-color--active: var(--theme-checkbox-mixed--border-color--invalid--active);
+  --theme-checkbox-unchecked--background: var(
+    --theme-checkbox-unchecked--background--invalid
+  );
+  --theme-checkbox-unchecked--background--hover: var(
+    --theme-checkbox-unchecked--background--invalid--hover
+  );
+  --theme-checkbox-unchecked--background--active: var(
+    --theme-checkbox-unchecked--background--invalid--active
+  );
+  --theme-checkbox-unchecked--border-color: var(
+    --theme-checkbox-unchecked--border-color--invalid
+  );
+  --theme-checkbox-unchecked--border-color--hover: var(
+    --theme-checkbox-unchecked--border-color--invalid--hover
+  );
+  --theme-checkbox-unchecked--border-color--active: var(
+    --theme-checkbox-unchecked--border-color--invalid--active
+  );
+  --theme-checkbox-checked--background: var(
+    --theme-checkbox-checked--background--invalid
+  );
+  --theme-checkbox-checked--background--hover: var(
+    --theme-checkbox-checked--background--invalid--hover
+  );
+  --theme-checkbox-checked--background--active: var(
+    --theme-checkbox-checked--background--invalid--active
+  );
+  --theme-checkbox-checked--border-color: var(
+    --theme-checkbox-checked--border-color--invalid
+  );
+  --theme-checkbox-checked--border-color--hover: var(
+    --theme-checkbox-checked--border-color--invalid--hover
+  );
+  --theme-checkbox-checked--border-color--active: var(
+    --theme-checkbox-checked--border-color--invalid--active
+  );
+  --theme-checkbox-mixed--background: var(
+    --theme-checkbox-mixed--background--invalid
+  );
+  --theme-checkbox-mixed--background--hover: var(
+    --theme-checkbox-mixed--background--invalid--hover
+  );
+  --theme-checkbox-mixed--background--active: var(
+    --theme-checkbox-mixed--background--invalid--active
+  );
+  --theme-checkbox-mixed--border-color: var(
+    --theme-checkbox-mixed--border-color--invalid
+  );
+  --theme-checkbox-mixed--border-color--hover: var(
+    --theme-checkbox-mixed--border-color--invalid--hover
+  );
+  --theme-checkbox-mixed--border-color--active: var(
+    --theme-checkbox-mixed--border-color--invalid--active
+  );
   background-color: var(--theme-checkbox-unchecked--background);
   border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color);
 }
@@ -395,27 +527,20 @@
   border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active);
 }
-:host(.ix-invalid:disabled) button,
 :host(.ix-invalid.disabled) button {
   background-color: var(--theme-checkbox-unchecked--background--disabled);
   border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled);
 }
-:host(.ix-invalid.checked:disabled) button,
 :host(.ix-invalid.checked.disabled) button,
-:host(.ix-invalid.indeterminate:disabled) button,
 :host(.ix-invalid.indeterminate.disabled) button {
   background-color: var(--theme-checkbox-checked--background--disabled);
   border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled);
 }
-:host(:disabled),
 :host(.disabled) {
   pointer-events: none;
 }
-:host(:disabled) button,
-:host(:disabled) label,
-:host(:disabled) input,
 :host(.disabled) button,
 :host(.disabled) label,
 :host(.disabled) input {

package/dist/collection/components/checkbox/checkbox.js CHANGED Viewed

@@ -19,6 +19,7 @@ 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";
+import { a11yBoolean } from "../utils/a11y";
 /**
  * @since 2.6.0
  * @form-ready 2.6.0
@@ -78,13 +79,13 @@ export class Checkbox {
         }
     }
     render() {
-        return (h(Host, { key: '2b7e1abca080e177d16c5b4a38e6a6da3d43a934', "aria-checked": `${this.checked}`, "aria-disabled": `${this.disabled}`, role: "checkbox", class: {
+        return (h(Host, { key: '9f2dfb28e104211b4c74190ce34782e927c359be', "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), role: "checkbox", class: {
                 disabled: this.disabled,
                 checked: this.checked,
                 indeterminate: this.indeterminate,
-            } }, h("label", { key: '22875af8489648471425485045e0d4833c942a2e' }, h("input", { key: 'd3a8ea36c89114bec173f48d777c0cc9b7b4beea', "aria-checked": `${this.checked}`, disabled: this.disabled, checked: this.checked, ref: this.inputRef, type: "checkbox", onChange: () => this.setCheckedState(!this.checked) }), h("button", { key: 'a013746af7808d088de26dfad03bdb38ed47b879', disabled: this.disabled, class: {
+            } }, h("label", { key: 'f5e2ae66239974ec5f91c1898b3c82a8efc06178' }, h("input", { key: '465622f5215ebb9bf62f7d6a44adfd55dbeb251a', "aria-checked": a11yBoolean(this.checked), disabled: this.disabled, checked: this.checked, ref: this.inputRef, type: "checkbox", onChange: () => this.setCheckedState(!this.checked) }), h("button", { key: '3e16d5cb70ecdb1c46f3ec05d87708dce31cc32a', disabled: this.disabled, class: {
                 checked: this.checked,
-            }, onClick: () => this.setCheckedState(!this.checked) }, this.renderCheckmark()), h("ix-typography", { key: '57871c7f84a4bdf917e3f833063bac1881412b64', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, h("slot", { key: '7273efd58eaf8fcadd8d30184ef817659e23f476' })))));
+            }, onClick: () => this.setCheckedState(!this.checked) }, this.renderCheckmark()), h("ix-typography", { key: 'a525f43a85e83bb23ddb204afa2b5600a0441c2d', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, h("slot", { key: '531c5b1a6bb0748e59e378c898de733cc13da0c5' })))));
     }
     static get is() { return "ix-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -106,7 +107,7 @@ export class Checkbox {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -141,7 +142,7 @@ export class Checkbox {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -296,7 +297,7 @@ export class Checkbox {
                             "id": "global::HTMLFormElement"
                         }
                     },
-                    "return": "Promise<HTMLFormElement>"
+                    "return": "Promise<HTMLFormElement | null>"
                 },
                 "docs": {
                     "text": "",

package/dist/collection/components/checkbox/checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;;;;;;;AAEH,OAAO,EACL,eAAe,EACf,SAAS,EACT,KAAK,EAEL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,CAAC,EACD,OAAO,EACP,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,uBAAuB,EAAmB,MAAM,gBAAgB,CAAC;AAC1E,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C;;;GAGG;AAOH,MAAM,OAAO,QAAQ;;QAoDF,aAAQ,GAAG,OAAO,CAAmB,CAAC,WAAW,EAAE,EAAE;YACpE,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QACrC,CAAC,CAAC,CAAC;;qBAzCsC,IAAI;;uBAUc,KAAK;wBAKnB,KAAK;6BAKA,KAAK;wBAOnB,KAAK;;IAgBjC,eAAe,CAAC,UAAmB;QACzC,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;QAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACxC,CAAC;IAGD,eAAe;QACb,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAGD,aAAa;QACX,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAED,uBAAuB;;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,MAAA,IAAI,CAAC,KAAK,mCAAI,IAAI,CAAC,CAAC;QACtD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QACxC,CAAC;IACH,CAAC;IAED,gBAAgB;IAEhB,aAAa;QACX,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACvC,CAAC;IAED,gBAAgB;IAEhB,wBAAwB;QACtB,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAClD,CAAC;IAGD,mBAAmB;QACjB,2CAA2C;IAC7C,CAAC;IAEO,eAAe;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,OAAO,CACL,WACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B;gBAElC,YACE,CAAC,EAAC,+CAA+C,EACjD,MAAM,EAAC,gCAAgC,kBAC1B,GAAG,GAChB,CACE,CACP,CAAC;QACJ,CAAC;QAED,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,OAAO,CACL,WACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B;gBAElC,YAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,aAAa,GAAG;gBAClD,YACE,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,GAAG,EACL,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,GAAG,EACV,IAAI,EAAC,gCAAgC,GACrC,CACE,CACP,CAAC;QACJ,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qEACW,~~GAAG~~,IAAI,CAAC,OAAO,~~EAAE~~,~~mBAChB~~,~~GAAG~~,IAAI,CAAC,QAAQ,~~EAAE~~,~~EACjC~~,IAAI,EAAC,UAAU,EACf,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,aAAa,EAAE,IAAI,CAAC,aAAa;aAClC;YAED;gBACE,8EACgB,~~GAAG~~,IAAI,CAAC,OAAO,~~EAAE~~,~~EAC/B~~,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,GACnD;gBACF,+DACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;wBACL,OAAO,EAAE,IAAI,CAAC,OAAO;qBACtB,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,IAEjD,IAAI,CAAC,eAAe,EAAE,CAChB;gBACT,sEACE,MAAM,EAAC,OAAO,EACd,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK;oBAExC,IAAI,CAAC,KAAK;oBACX,8DAAa,CACC,CACV,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAtFC;IADC,uBAAuB,EAAE;mDAGzB","sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n AttachInternals,\n Component,\n Event,\n EventEmitter,\n Host,\n Prop,\n Watch,\n h,\n Element,\n Method,\n} from '@stencil/core';\nimport { HookValidationLifecycle, IxFormComponent } from '../utils/input';\nimport { makeRef } from '../utils/make-ref';\n\n/\n @since 2.6.0\n * @form-ready 2.6.0\n /\n@Component({\n tag: 'ix-checkbox',\n styleUrl: 'checkbox.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class Checkbox implements IxFormComponent<string> {\n @Element() hostElement!: HTMLIxCheckboxElement;\n\n @AttachInternals() formInternals!: ElementInternals;\n\n /\n Name of the checkbox component\n /\n @Prop({ reflect: true }) name?: string;\n\n /\n Value of the checkbox component\n /\n @Prop({ reflect: true }) value: string = 'on';\n\n /\n Label for the checkbox component\n /\n @Prop() label?: string;\n\n /\n Checked state of the checkbox component\n /\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n /\n Disabled state of the checkbox component\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n Indeterminate state of the checkbox component\n /\n @Prop({ reflect: true }) indeterminate: boolean = false;\n\n /\n Required state of the checkbox component.\n \n If true, checkbox needs to be checked to be valid\n /\n @Prop({ reflect: true }) required = false;\n\n /\n Event emitted when the checked state of the checkbox changes\n /\n @Event() checkedChange!: EventEmitter<boolean>;\n\n /\n Event emitted when the value of the checkbox changes\n /\n @Event() valueChange!: EventEmitter<string>;\n\n private readonly inputRef = makeRef<HTMLInputElement>((checkboxRef) => {\n checkboxRef.checked = this.checked;\n });\n\n private setCheckedState(newChecked: boolean) {\n this.checked = newChecked;\n this.checkedChange.emit(this.checked);\n }\n\n @Watch('checked')\n onCheckedChange() {\n this.updateFormInternalValue();\n }\n\n @Watch('value')\n onValueChange() {\n this.valueChange.emit(this.value);\n }\n\n componentWillLoad() {\n this.updateFormInternalValue();\n }\n\n updateFormInternalValue() {\n if (this.checked) {\n this.formInternals.setFormValue(this.value ?? 'on');\n } else {\n this.formInternals.setFormValue(null);\n }\n }\n\n /* @internal /\n @Method()\n hasValidValue(): Promise<boolean> {\n return Promise.resolve(this.checked);\n }\n\n /* @internal /\n @Method()\n getAssociatedFormElement(): Promise<HTMLFormElement \| null> {\n return Promise.resolve(this.formInternals.form);\n }\n\n @HookValidationLifecycle()\n updateClassMappings() {\n /* This function is intentionally empty */\n }\n\n private renderCheckmark() {\n if (this.checked) {\n return (\n <svg\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 18 18\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3.65625 8.15625L8.4375 12.9375L14.625 3.9375\"\n stroke=\"var(--ix-checkbox-check-color)\"\n stroke-width=\"2\"\n />\n </svg>\n );\n }\n\n if (this.indeterminate) {\n return (\n <svg\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 18 18\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect width=\"18\" height=\"18\" fill=\"transparent\" />\n <rect\n x=\"3\"\n y=\"8\"\n width=\"12\"\n height=\"2\"\n fill=\"var(--ix-checkbox-check-color)\"\n />\n </svg>\n );\n }\n }\n\n render() {\n return (\n <Host\n aria-checked={~~`${~~this.checked}`}\n aria-disabled={~~`${~~this.disabled}`}\n role=\"checkbox\"\n class={{\n disabled: this.disabled,\n checked: this.checked,\n indeterminate: this.indeterminate,\n }}\n >\n <label>\n <input\n aria-checked={~~`${~~this.checked}`}\n disabled={this.disabled}\n checked={this.checked}\n ref={this.inputRef}\n type=\"checkbox\"\n onChange={() => this.setCheckedState(!this.checked)}\n />\n <button\n disabled={this.disabled}\n class={{\n checked: this.checked,\n }}\n onClick={() => this.setCheckedState(!this.checked)}\n >\n {this.renderCheckmark()}\n </button>\n <ix-typography\n format=\"label\"\n textColor={this.disabled ? 'weak' : 'std'}\n >\n {this.label}\n <slot></slot>\n </ix-typography>\n </label>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n AttachInternals,\n Component,\n Event,\n EventEmitter,\n Host,\n Prop,\n Watch,\n h,\n Element,\n Method,\n} from '@stencil/core';\nimport { HookValidationLifecycle, IxFormComponent } from '../utils/input';\nimport { makeRef } from '../utils/make-ref';\nimport { a11yBoolean } from '../utils/a11y';\n\n/\n @since 2.6.0\n * @form-ready 2.6.0\n /\n@Component({\n tag: 'ix-checkbox',\n styleUrl: 'checkbox.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class Checkbox implements IxFormComponent<string> {\n @Element() hostElement!: HTMLIxCheckboxElement;\n\n @AttachInternals() formInternals!: ElementInternals;\n\n /\n Name of the checkbox component\n /\n @Prop({ reflect: true }) name?: string;\n\n /\n Value of the checkbox component\n /\n @Prop({ reflect: true }) value: string = 'on';\n\n /\n Label for the checkbox component\n /\n @Prop() label?: string;\n\n /\n Checked state of the checkbox component\n /\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n /\n Disabled state of the checkbox component\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n Indeterminate state of the checkbox component\n /\n @Prop({ reflect: true }) indeterminate: boolean = false;\n\n /\n Required state of the checkbox component.\n \n If true, checkbox needs to be checked to be valid\n /\n @Prop({ reflect: true }) required = false;\n\n /\n Event emitted when the checked state of the checkbox changes\n /\n @Event() checkedChange!: EventEmitter<boolean>;\n\n /\n Event emitted when the value of the checkbox changes\n /\n @Event() valueChange!: EventEmitter<string>;\n\n private readonly inputRef = makeRef<HTMLInputElement>((checkboxRef) => {\n checkboxRef.checked = this.checked;\n });\n\n private setCheckedState(newChecked: boolean) {\n this.checked = newChecked;\n this.checkedChange.emit(this.checked);\n }\n\n @Watch('checked')\n onCheckedChange() {\n this.updateFormInternalValue();\n }\n\n @Watch('value')\n onValueChange() {\n this.valueChange.emit(this.value);\n }\n\n componentWillLoad() {\n this.updateFormInternalValue();\n }\n\n updateFormInternalValue() {\n if (this.checked) {\n this.formInternals.setFormValue(this.value ?? 'on');\n } else {\n this.formInternals.setFormValue(null);\n }\n }\n\n /* @internal /\n @Method()\n hasValidValue(): Promise<boolean> {\n return Promise.resolve(this.checked);\n }\n\n /* @internal /\n @Method()\n getAssociatedFormElement(): Promise<HTMLFormElement \| null> {\n return Promise.resolve(this.formInternals.form);\n }\n\n @HookValidationLifecycle()\n updateClassMappings() {\n /* This function is intentionally empty */\n }\n\n private renderCheckmark() {\n if (this.checked) {\n return (\n <svg\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 18 18\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3.65625 8.15625L8.4375 12.9375L14.625 3.9375\"\n stroke=\"var(--ix-checkbox-check-color)\"\n stroke-width=\"2\"\n />\n </svg>\n );\n }\n\n if (this.indeterminate) {\n return (\n <svg\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 18 18\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect width=\"18\" height=\"18\" fill=\"transparent\" />\n <rect\n x=\"3\"\n y=\"8\"\n width=\"12\"\n height=\"2\"\n fill=\"var(--ix-checkbox-check-color)\"\n />\n </svg>\n );\n }\n }\n\n render() {\n return (\n <Host\n aria-checked={a11yBoolean(this.checked)}\n aria-disabled={a11yBoolean(this.disabled)}\n role=\"checkbox\"\n class={{\n disabled: this.disabled,\n checked: this.checked,\n indeterminate: this.indeterminate,\n }}\n >\n <label>\n <input\n aria-checked={a11yBoolean(this.checked)}\n disabled={this.disabled}\n checked={this.checked}\n ref={this.inputRef}\n type=\"checkbox\"\n onChange={() => this.setCheckedState(!this.checked)}\n />\n <button\n disabled={this.disabled}\n class={{\n checked: this.checked,\n }}\n onClick={() => this.setCheckedState(!this.checked)}\n >\n {this.renderCheckmark()}\n </button>\n <ix-typography\n format=\"label\"\n textColor={this.disabled ? 'weak' : 'std'}\n >\n {this.label}\n <slot></slot>\n </ix-typography>\n </label>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/checkbox/tests/checkbox.ct.js CHANGED Viewed

@@ -36,6 +36,26 @@ test(`disabled`, async ({ mount, page }) => {
     const checkboxElement = page.locator('ix-checkbox');
     await expect(checkboxElement).toBeDisabled();
 });
+test(`disabled = undefined`, async ({ mount, page }) => {
+    await mount(`<ix-checkbox label="some label"></ix-checkbox>`);
+    const checkboxElement = page.locator('ix-checkbox');
+    const nativeInput = checkboxElement.locator('input');
+    const label = checkboxElement.locator('ix-typography');
+    const checkedChange$ = checkboxElement.evaluate((element) => {
+        // Needs to be tested because at runtime undefined assignment could happen
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        element.disabled = undefined;
+        return new Promise((resolve) => {
+            element.addEventListener('checkedChange', () => resolve());
+        });
+    });
+    await checkboxElement.click();
+    await checkedChange$;
+    await expect(checkboxElement).not.toHaveClass(/disabled/);
+    await expect(nativeInput).not.toBeDisabled();
+    const checkboxLabelColor = 'rgba(245, 252, 255, 0.93)';
+    await expect(label).toHaveCSS('color', checkboxLabelColor);
+});
 test('label', async ({ mount, page }) => {
     await mount(`<ix-checkbox label="some label"></ix-checkbox>`);
     const checkboxElement = page.locator('ix-checkbox').locator('label');

package/dist/collection/components/checkbox/tests/checkbox.ct.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.ct.js","sourceRoot":"","sources":["../../../../src/components/checkbox/tests/checkbox.ct.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,YAAY,EAAE,qBAAqB,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,IAAI,CAAC,YAAY,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAC3C,MAAM,KAAK,CAAC,+DAA+D,CAAC,CAAC;IAE7E,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IACzC,qBAAqB,CAAC,WAAW,CAAC,CAAC;IACnC,MAAM,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,KAAK,EAAE,CAAC;IAE1C,MAAM,QAAQ,GAAG,MAAM,YAAY,CAAC,WAAW,EAAE,eAAe,EAAE,IAAI,CAAC,CAAC;IACxE,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC9B,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,uBAAuB,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACtD,MAAM,KAAK,CACT,oFAAoF,CACrF,CAAC;IAEF,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IACzC,qBAAqB,CAAC,WAAW,CAAC,CAAC;IACnC,MAAM,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,KAAK,EAAE,CAAC;IAE1C,MAAM,QAAQ,GAAG,MAAM,YAAY,CAAC,WAAW,EAAE,eAAe,EAAE,IAAI,CAAC,CAAC;IACxE,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;AACxC,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,2BAA2B,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAC1D,MAAM,KAAK,CACT,uEAAuE,CACxE,CAAC;IAEF,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IACzC,qBAAqB,CAAC,WAAW,CAAC,CAAC;IACnC,MAAM,QAAQ,GAAG,MAAM,YAAY,CAAC,WAAW,EAAE,eAAe,EAAE,IAAI,CAAC,CAAC;IACxE,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC9B,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACzC,MAAM,KAAK,CAAC,yDAAyD,CAAC,CAAC;IACvE,MAAM,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IACpD,MAAM,MAAM,CAAC,eAAe,CAAC,CAAC,YAAY,EAAE,CAAC;AAC/C,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACtC,MAAM,KAAK,CAAC,gDAAgD,CAAC,CAAC;IAC9D,MAAM,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IACrE,MAAM,MAAM,CAAC,eAAe,CAAC,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;AACzD,CAAC,CAAC,CAAC","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 { getFormValue, preventFormSubmission, test } from '@utils/test';\nimport { expect } from '@playwright/test';\n\ntest(`form-ready`, async ({ mount, page }) => {\n await mount(`<form><ix-checkbox name=\"my-field-name\"></ix-checkbox></form>`);\n\n const formElement = page.locator('form');\n preventFormSubmission(formElement);\n await page.locator('ix-checkbox').click();\n\n const formData = await getFormValue(formElement, 'my-field-name', page);\n expect(formData).toBe('on');\n});\n\ntest(`form-ready with value`, async ({ mount, page }) => {\n await mount(\n `<form><ix-checkbox name=\"my-field-name\" value=\"custom-value\"></ix-checkbox></form>`\n );\n\n const formElement = page.locator('form');\n preventFormSubmission(formElement);\n await page.locator('ix-checkbox').click();\n\n const formData = await getFormValue(formElement, 'my-field-name', page);\n expect(formData).toBe('custom-value');\n});\n\ntest(`form-ready default active`, async ({ mount, page }) => {\n await mount(\n `<form><ix-checkbox name=\"my-field-name\" checked></ix-checkbox></form>`\n );\n\n const formElement = page.locator('form');\n preventFormSubmission(formElement);\n const formData = await getFormValue(formElement, 'my-field-name', page);\n expect(formData).toBe('on');\n});\n\ntest(`disabled`, async ({ mount, page }) => {\n await mount(`<ix-checkbox label=\"some label\" disabled></ix-checkbox>`);\n const checkboxElement = page.locator('ix-checkbox');\n await expect(checkboxElement).toBeDisabled();\n});\n\ntest('label', async ({ mount, page }) => {\n await mount(`<ix-checkbox label=\"some label\"></ix-checkbox>`);\n const checkboxElement = page.locator('ix-checkbox').locator('label');\n await expect(checkboxElement).toHaveText('some label');\n});\n"]}
1	+ {"version":3,"file":"checkbox.ct.js","sourceRoot":"","sources":["../../../../src/components/checkbox/tests/checkbox.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 { getFormValue, preventFormSubmission, test } from '@utils/test';\nimport { expect } from '@playwright/test';\n\ntest(`form-ready`, async ({ mount, page }) => {\n await mount(`<form><ix-checkbox name=\"my-field-name\"></ix-checkbox></form>`);\n\n const formElement = page.locator('form');\n preventFormSubmission(formElement);\n await page.locator('ix-checkbox').click();\n\n const formData = await getFormValue(formElement, 'my-field-name', page);\n expect(formData).toBe('on');\n});\n\ntest(`form-ready with value`, async ({ mount, page }) => {\n await mount(\n `<form><ix-checkbox name=\"my-field-name\" value=\"custom-value\"></ix-checkbox></form>`\n );\n\n const formElement = page.locator('form');\n preventFormSubmission(formElement);\n await page.locator('ix-checkbox').click();\n\n const formData = await getFormValue(formElement, 'my-field-name', page);\n expect(formData).toBe('custom-value');\n});\n\ntest(`form-ready default active`, async ({ mount, page }) => {\n await mount(\n `<form><ix-checkbox name=\"my-field-name\" checked></ix-checkbox></form>`\n );\n\n const formElement = page.locator('form');\n preventFormSubmission(formElement);\n const formData = await getFormValue(formElement, 'my-field-name', page);\n expect(formData).toBe('on');\n});\n\ntest(`disabled`, async ({ mount, page }) => {\n await mount(`<ix-checkbox label=\"some label\" disabled></ix-checkbox>`);\n const checkboxElement = page.locator('ix-checkbox');\n await expect(checkboxElement).toBeDisabled();\n});\n\ntest(`disabled = undefined`, async ({ mount, page }) => {\n await mount(`<ix-checkbox label=\"some label\"></ix-checkbox>`);\n const checkboxElement = page.locator('ix-checkbox');\n const nativeInput = checkboxElement.locator('input');\n const label = checkboxElement.locator('ix-typography');\n\n const checkedChange$ = checkboxElement.evaluate(\n (element: HTMLIxCheckboxElement) => {\n // Needs to be tested because at runtime undefined assignment could happen\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n element.disabled = undefined as any;\n return new Promise<void>((resolve) => {\n element.addEventListener('checkedChange', () => resolve());\n });\n }\n );\n\n await checkboxElement.click();\n await checkedChange$;\n\n await expect(checkboxElement).not.toHaveClass(/disabled/);\n await expect(nativeInput).not.toBeDisabled();\n\n const checkboxLabelColor = 'rgba(245, 252, 255, 0.93)';\n await expect(label).toHaveCSS('color', checkboxLabelColor);\n});\n\ntest('label', async ({ mount, page }) => {\n await mount(`<ix-checkbox label=\"some label\"></ix-checkbox>`);\n const checkboxElement = page.locator('ix-checkbox').locator('label');\n await expect(checkboxElement).toHaveText('some label');\n});\n"]}

package/dist/collection/components/checkbox-group/checkbox-group.js CHANGED Viewed

@@ -36,10 +36,10 @@ export class CheckboxGroup {
         this.isWarning = isWarning;
     }
     render() {
-        return (h(Host, { key: '3b3403b167dbcd69cce94ece70070d6d4a633fd5' }, h("ix-field-wrapper", { key: '47692f7cadd2bf1798302f4854d0c16efca49dd4', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, validText: this.validText, warningText: this.warningText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isInfo: this.isInfo, isValid: this.isValid, isWarning: this.isWarning }, h("div", { key: '82181467dda161e570576dd4644c5cc45584ac3a', class: {
+        return (h(Host, { key: '27aee735ce40e2c2f3b019afad6a44ed1029c2c6' }, h("ix-field-wrapper", { key: '70b0666837cc8ed83defc9844cc58003f489a22e', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, validText: this.validText, warningText: this.warningText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isInfo: this.isInfo, isValid: this.isValid, isWarning: this.isWarning }, h("div", { key: '59485040ff9509b58b7bd8f7f50e53970585ffb5', class: {
                 'checkbox-container': true,
                 'row-layout': this.direction === 'row',
-            } }, h("slot", { key: 'a1fe76fc0d07422227cddc9d8e2b51ef1894311a' })))));
+            } }, h("slot", { key: 'af5f7db97a6efec492299336428bbb9ded00fbca' })))));
     }
     static get is() { return "ix-checkbox-group"; }
     static get encapsulation() { return "shadow"; }
@@ -60,7 +60,7 @@ export class CheckboxGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -77,7 +77,7 @@ export class CheckboxGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -112,7 +112,7 @@ export class CheckboxGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -129,7 +129,7 @@ export class CheckboxGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -146,7 +146,7 @@ export class CheckboxGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -163,7 +163,7 @@ export class CheckboxGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,