@ukic/web-components 3.0.0 → 3.2.0

package/dist/collection/components/ic-checkbox/ic-checkbox.css

@@ -442,7 +442,6 @@ video {
 
 
 :host(.ic-checkbox-disabled) {
-  color: var(--ic-architectural-200);
   pointer-events: none;
 }
 
@@ -455,6 +454,11 @@ video {
   align-items: center;
 }
 
+:host(.ic-data-table-checkbox) .container {
+  padding: 0;
+  margin-bottom: 0;
+}
+
 :host(.ic-checkbox-small) .container {
   margin-bottom: var(--ic-space-xxxs);
 }
@@ -469,8 +473,8 @@ video {
   left: 0;
   height: var(--ic-space-lg);
   width: var(--ic-space-lg);
-  background-color: var(--ic-architectural-white);
-  border: var(--ic-border-width) solid var(--ic-architectural-400);
+  background-color: var(--ic-checkbox-background-unselected);
+  border: var(--ic-border-width) solid var(--ic-checkbox-border-unselected);
   border-radius: var(--ic-border-radius);
   outline: none;
   cursor: pointer;
@@ -478,6 +482,11 @@ video {
   flex-shrink: 0;
 }
 
+:host .container svg {
+  width: var(--ic-space-lg);
+  height: var(--ic-space-lg);
+}
+
 :host(.ic-checkbox-small) .checkbox,
 :host(.ic-checkbox-small) .container svg {
   width: var(--ic-space-md);
@@ -491,51 +500,59 @@ video {
 }
 
 .checkbox:checked {
-  background-color: var(--ic-action-default);
-  border: var(--ic-border-width) solid var(--ic-action-default);
+  background-color: var(--ic-checkbox-background-selected);
+  border: var(--ic-border-width) solid var(--ic-checkbox-background-selected);
   transition: var(--ic-easing-transition-slow);
 }
 
 .checkbox:checked:disabled {
-  background-color: var(--ic-architectural-200);
+  background-color: var(--ic-checkbox-background-selected-disabled);
+  border: var(--ic-border-width) solid
+    var(--ic-checkbox-background-selected-disabled);
 }
 
 .checkbox:indeterminate,
 .checkbox.indeterminate:checked {
-  background-color: var(--ic-architectural-white);
-  border: 0.125rem solid var(--ic-action-default);
+  background-color: var(--ic-checkbox-background-indeterminate);
+  border: 0.125rem solid var(--ic-checkbox-background-indeterminate);
+}
+
+.checkbox:indeterminate:disabled,
+.checkbox.indeterminate:checked:disabled {
+  background-color: var(--ic-checkbox-background-indeterminate-disabled);
+  border: 0.125rem solid var(--ic-checkbox-background-indeterminate-disabled);
 }
 
 .checkbox:checked:hover {
-  background-color: var(--ic-action-default-hover);
+  background-color: var(--ic-checkbox-background-selected-hover);
 }
 
 .checkbox:indeterminate:hover,
 .checkbox.indeterminate:checked:hover {
-  background-color: var(--ic-action-default-bg-hover-no-alpha);
-  border: 0.125rem solid var(--ic-action-default-hover);
+  background-color: var(--ic-checkbox-background-indeterminate-hover);
+  border: 0.125rem solid var(--ic-checkbox-background-indeterminate-hover);
 }
 
 .checkbox:checked:active {
-  background-color: var(--ic-action-default-active);
+  background-color: var(--ic-checkbox-background-selected-pressed);
 }
 
 .checkbox:indeterminate:active,
 .checkbox.indeterminate:checked:active {
-  background-color: var(--ic-action-default-bg-active-no-alpha);
-  border: 0.125rem solid var(--ic-action-default-active);
+  background-color: var(--ic-checkbox-background-indeterminate-pressed);
+  border: 0.125rem solid var(--ic-checkbox-background-indeterminate-pressed);
 }
 
 .checkbox:hover {
-  background-color: var(--ic-action-default-bg-hover-no-alpha);
-  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-hover);
-  border: var(--ic-border-width) solid var(--ic-action-default-hover);
+  box-shadow: 0 0 0 0.25rem var(--ic-checkbox-action-background-hover);
+  border: var(--ic-border-width) solid
+    var(--ic-checkbox-border-unselected-hover);
 }
 
 .checkbox:active {
-  background-color: var(--ic-action-default-bg-active-no-alpha);
-  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);
-  border: var(--ic-border-width) solid var(--ic-action-default-active);
+  box-shadow: 0 0 0 0.25rem var(--ic-checkbox-action-background-pressed);
+  border: var(--ic-border-width) solid
+    var(--ic-checkbox-border-unselected-pressed);
 }
 
 .checkbox:focus {
@@ -543,11 +560,21 @@ video {
 }
 
 .checkbox:disabled {
-  border: var(--ic-border-width) dashed var(--ic-architectural-200);
+  border: var(--ic-border-width) dashed
+    var(--ic-checkbox-border-unselected-disabled);
 }
 
 .checkbox-label {
   padding-left: var(--ic-space-sm);
+  color: var(--ic-checkbox-text);
+
+  --ic-typography-color: var(--ic-checkbox-text);
+}
+
+:host(.ic-checkbox-disabled) .checkbox-label {
+  color: var(--ic-checkbox-text-disabled);
+
+  --ic-typography-color: var(--ic-checkbox-text-disabled);
 }
 
 .checkbox-label:hover {
@@ -558,7 +585,7 @@ video {
   position: relative;
   right: calc(-1 * var(--ic-space-lg));
   margin-left: calc(-1 * var(--ic-space-lg));
-  fill: white;
+  fill: var(--ic-checkbox-icon-pressed);
   z-index: 1;
   background-color: transparent;
   pointer-events: none;
@@ -582,7 +609,7 @@ video {
   right: -1.188rem;
   margin-left: -0.875rem;
   z-index: 1;
-  background-color: var(--ic-action-default);
+  background-color: var(--ic-checkbox-icon-indeterminate);
   pointer-events: none;
   flex-shrink: 0;
 }
@@ -599,26 +626,17 @@ video {
   margin-left: -1.25rem;
 }
 
-.container:hover .indeterminate-symbol {
-  background-color: var(--ic-action-default-hover);
-}
-
-.container:active .indeterminate-symbol {
-  background-color: var(--ic-action-default-active);
-}
-
 .additional-field-wrapper {
   margin-left: calc(var(--ic-space-md) + var(--ic-space-lg));
   margin-top: calc(var(--ic-space-sm) / 2);
 }
 
 .branch-corner {
-  color: var(--ic-action-default);
   height: var(--ic-space-md);
   width: var(--ic-space-xl);
   border-radius: 0 0 0 0.188rem;
-  border-bottom: 0.125rem solid var(--ic-action-default);
-  border-left: 0.125rem solid var(--ic-action-default);
+  border-bottom: 0.125rem solid var(--ic-checkbox-required-bar);
+  border-left: 0.125rem solid var(--ic-checkbox-required-bar);
 }
 
 .dynamic-container {
@@ -629,7 +647,10 @@ video {
 }
 
 .dynamic-text {
-  color: var(--ic-action-default);
+  color: var(--ic-checkbox-required-text);
+
+  --ic-typography-color: var(--ic-checkbox-required-text);
+
   margin-top: calc(var(--ic-space-sm) / 2);
   margin-bottom: var(--ic-space-xs);
   border-radius: 2%;
@@ -673,3 +694,27 @@ video {
     display: none;
   }
 }
+
+/* Right to left */
+.checkmark:dir(rtl) {
+  right: 0;
+}
+
+.checkbox-label:dir(rtl) {
+  padding-right: var(--ic-space-sm);
+  padding-left: 0;
+}
+
+.indeterminate-symbol:dir(rtl) {
+  right: 0.288rem;
+}
+
+.branch-corner:dir(rtl) {
+  border-radius: 0 0 0.188rem;
+  border-right: 0.125rem solid var(--ic-action-default);
+  border-left: none;
+}
+
+.dynamic-container:dir(rtl) {
+  margin: var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0;
+}

package/dist/collection/components/ic-checkbox/ic-checkbox.js

@@ -6,6 +6,40 @@ import { isSlotUsed, onComponentRequiredPropUndefined, renderHiddenInput, remove
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export class Checkbox {
     constructor() {
+        /**
+         * The style of additionalField that will be displayed if used.
+         */
+        this.additionalFieldDisplay = "static";
+        /**
+         * If `true`, the checkbox will be set to the checked state. This is only the initial state and will be updated to unchecked if the checkbox is clicked.
+         */
+        this.checked = false;
+        this.initiallyChecked = this.checked;
+        /**
+         * If `true`, the checkbox will be set to the disabled state.
+         */
+        this.disabled = false;
+        /**
+         * The text to be displayed when dynamic.
+         */
+        this.dynamicText = "This selection requires additional answers";
+        /**
+         * If `true`, the indeterminate state will be displayed when checked.
+         */
+        this.indeterminate = false;
+        this.displayIndeterminate = this.indeterminate;
+        /**
+         * If `true`, the checkbox will behave like a native checkbox where the `indeterminate` prop sets the indeterminate visual styling, independent of the `checked` state.
+         */
+        this.nativeIndeterminateBehaviour = false;
+        /**
+         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        this.theme = "inherit";
+        /**
+         * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
+         */
+        this.hideLabel = false;
         this.handleClick = () => {
             this.checked = !this.checked;
             this.displayIndeterminate = this.nativeIndeterminateBehaviour
@@ -16,26 +50,14 @@ export class Checkbox {
         this.handleFormReset = () => {
             this.checked = this.initiallyChecked;
         };
-        this.additionalFieldDisplay = "static";
-        this.checked = false;
-        this.initiallyChecked = this.checked;
-        this.disabled = false;
-        this.dynamicText = "This selection requires additional answers";
-        this.form = undefined;
-        this.groupLabel = undefined;
-        this.indeterminate = false;
-        this.displayIndeterminate = this.indeterminate;
-        this.label = undefined;
-        this.name = undefined;
-        this.nativeIndeterminateBehaviour = false;
-        this.size = undefined;
-        this.value = undefined;
-        this.hideLabel = false;
+    }
+    watchDisabledHandler() {
+        removeDisabledFalse(this.disabled, this.el);
     }
     watchIndeterminateHandler() {
         this.displayIndeterminate = this.nativeIndeterminateBehaviour
             ? this.indeterminate
-            : this.indeterminate && this.checked;
+            : this.indeterminate && !!this.checked;
     }
     componentWillLoad() {
         removeDisabledFalse(this.disabled, this.el);
@@ -76,27 +98,28 @@ export class Checkbox {
      * Sets focus on the checkbox.
      */
     async setFocus() {
-        var _a;
-        (_a = this.el.shadowRoot.querySelector(".checkbox")) === null || _a === void 0 ? void 0 : _a.focus();
+        var _a, _b;
+        (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".checkbox")) === null || _b === void 0 ? void 0 : _b.focus();
     }
     render() {
-        const { additionalFieldDisplay, checked, disabled, dynamicText, el, form, displayIndeterminate, groupLabel, label, name, size, value, } = this;
+        const { additionalFieldDisplay, checked, disabled, dynamicText, el, form, displayIndeterminate, groupLabel, label, name, size, value, theme, } = this;
         const id = `ic-checkbox-${isPropDefined(label) || value}-${groupLabel}`.replace(/ /g, "-");
         const parentElementSize = el.parentElement
             .size;
         checked
             ? renderHiddenInput(true, el, name, checked && value, disabled)
             : removeHiddenInput(el);
-        return (h(Host, { class: {
-                "ic-checkbox-disabled": disabled,
+        return (h(Host, { key: '1b4f1fd6e5e8848ef63134541cbc314fe5976b2b', class: {
+                "ic-checkbox-disabled": !!disabled,
                 [`ic-checkbox-${size || parentElementSize}`]: true,
-            } }, h("div", { class: "container" }, displayIndeterminate && h("div", { class: "indeterminate-symbol" }), !displayIndeterminate && checked && (h("svg", { class: "checkmark", width: "1.5rem", height: "1.5rem", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "fill-rule": "evenodd", "clip-rule": "evenodd" }, h("title", null, "checkmark icon"), h("path", { d: "M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z" }))), h("input", { role: "checkbox", class: {
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            } }, h("div", { key: '3ec8b6cc45dcf275c6340c2d7321e335c9383ac5', class: "container" }, displayIndeterminate && h("div", { key: 'd38202c75ef2f3a90a8b57efcb4030fc222e1038', class: "indeterminate-symbol" }), !displayIndeterminate && checked && (h("svg", { key: '134ea738eb2858a4a27ed8792edb7668790d59a7', class: "checkmark", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "fill-rule": "evenodd", "clip-rule": "evenodd" }, h("title", { key: 'e8113684e52bb9e6b66200886a8aef0e4eeeaf28' }, "checkmark icon"), h("path", { key: '342f98d89977388cfabb77fdf08cb4ecb7d7cc14', d: "M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z" }))), h("input", { key: '1b0ad31864fc8d7b7d40bc50e975162cf387ae01', role: "checkbox", class: {
                 checkbox: true,
-                checked,
-                indeterminate: displayIndeterminate,
-            }, type: "checkbox", name: name, id: id, value: value, disabled: disabled ? true : null, checked: checked, indeterminate: displayIndeterminate, onClick: this.handleClick, form: form, "aria-label": this.hideLabel ? this.label : undefined }), !this.hideLabel && (h("ic-typography", { class: "checkbox-label", variant: "body" }, h("label", { htmlFor: id }, label)))), isSlotUsed(el, "additional-field") && (h("div", { class: "dynamic-container", ref: (el) => (this.additionalFieldContainer = el) }, additionalFieldDisplay === "dynamic" && (h("div", { class: "branch-corner" })), h("div", null, additionalFieldDisplay === "dynamic" && (h("ic-typography", { variant: "caption" }, h("p", { class: "dynamic-text", "aria-live": "polite" }, dynamicText))), h("div", { class: {
+                checked: !!checked,
+                indeterminate: !!displayIndeterminate,
+            }, type: "checkbox", name: name, id: id, value: value, disabled: disabled, checked: checked, indeterminate: displayIndeterminate, onClick: this.handleClick, form: form, "aria-label": this.hideLabel ? this.label : undefined }), !this.hideLabel && (h("ic-typography", { key: '4e0aacf944928ed74162bb779ea2aa7f69cfd88d', class: "checkbox-label", variant: "body" }, h("label", { key: 'cd6a349ecf42e327806161ff4eb38680a4b9d91b', htmlFor: id }, label)))), isSlotUsed(el, "additional-field") && (h("div", { key: 'd658a44ea59a92e254ec4d5e097b43205c81d06a', class: "dynamic-container", ref: (el) => (this.additionalFieldContainer = el) }, additionalFieldDisplay === "dynamic" && (h("div", { key: 'ed31c233420f6f8c88951e7d208c7bcc418d382a', class: "branch-corner" })), h("div", { key: '9cffdb6170b03336348940da135cb8c686235610' }, additionalFieldDisplay === "dynamic" && (h("ic-typography", { key: 'c6b1518d6f7641afaba0befc8de0a8ccb23cc7e9', variant: "caption" }, h("p", { key: '931a9b34320375e0ff79014aa9ae4e9100a3c860', class: "dynamic-text", "aria-live": "polite" }, dynamicText))), h("div", { key: '1d1034308c125fd0ec86a5bcfe91103742141b8c', class: {
                 "additional-field-wrapper": additionalFieldDisplay === "static",
-            } }, h("slot", { name: "additional-field" })))))));
+            } }, h("slot", { key: '6b3c352f0fb38399cfdea480687fc69d39358e7a', name: "additional-field" })))))));
     }
     static get is() { return "ic-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -118,7 +141,7 @@ export class Checkbox {
                 "mutable": false,
                 "complexType": {
                     "original": "IcAdditionalFieldTypes",
-                    "resolved": "\"dynamic\" | \"static\"",
+                    "resolved": "\"dynamic\" | \"static\" | undefined",
                     "references": {
                         "IcAdditionalFieldTypes": {
                             "location": "import",
@@ -128,11 +151,13 @@ export class Checkbox {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The style of additionalField that will be displayed if used."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "additional-field-display",
                 "reflect": true,
                 "defaultValue": "\"static\""
@@ -142,15 +167,17 @@ export class Checkbox {
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the checkbox will be set to the checked state."
+                    "text": "If `true`, the checkbox will be set to the checked state. This is only the initial state and will be updated to unchecked if the checkbox is clicked."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "checked",
                 "reflect": true,
                 "defaultValue": "false"
@@ -160,7 +187,7 @@ export class Checkbox {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -169,6 +196,8 @@ export class Checkbox {
                     "tags": [],
                     "text": "If `true`, the checkbox will be set to the disabled state."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -178,15 +207,17 @@ export class Checkbox {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The text to be displayed when dynamic."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "dynamic-text",
                 "reflect": false,
                 "defaultValue": "\"This selection requires additional answers\""
@@ -196,7 +227,7 @@ export class Checkbox {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -205,6 +236,8 @@ export class Checkbox {
                     "tags": [],
                     "text": "The <form> element to associate the checkbox with."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "form",
                 "reflect": false
             },
@@ -213,15 +246,17 @@ export class Checkbox {
                 "mutable": true,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The group label for the checkbox."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "group-label",
                 "reflect": false
             },
@@ -230,15 +265,17 @@ export class Checkbox {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the indeterminate state will be displayed when checked."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "indeterminate",
                 "reflect": false,
                 "defaultValue": "false"
@@ -257,6 +294,8 @@ export class Checkbox {
                     "tags": [],
                     "text": "The label for the checkbox."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false
             },
@@ -265,15 +304,17 @@ export class Checkbox {
                 "mutable": true,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false
             },
@@ -282,15 +323,17 @@ export class Checkbox {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the checkbox will behave like a native checkbox where the `indeterminate` prop sets the indeterminate visual styling, independent of the `checked` state."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "native-indeterminate-behaviour",
                 "reflect": false,
                 "defaultValue": "false"
@@ -300,7 +343,7 @@ export class Checkbox {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSizes",
-                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
                     "references": {
                         "IcSizes": {
                             "location": "import",
@@ -315,9 +358,37 @@ export class Checkbox {
                     "tags": [],
                     "text": "The size of the checkbox to be displayed. This does not affect the font size of the label. If a checkbox is contained in a checkbox group, this will override the size set on checkbox group."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": false
             },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
+            },
             "value": {
                 "type": "string",
                 "mutable": false,
@@ -332,6 +403,8 @@ export class Checkbox {
                     "tags": [],
                     "text": "The value for the checkbox."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false
             },
@@ -340,15 +413,17 @@ export class Checkbox {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the label will be hidden and the required label value will be applied as an aria-label."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "hide-label",
                 "reflect": false,
                 "defaultValue": "false"
@@ -407,6 +482,9 @@ export class Checkbox {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "disabled",
+                "methodName": "watchDisabledHandler"
+            }, {
                 "propName": "indeterminate",
                 "methodName": "watchIndeterminateHandler"
             }];