npm - @ukic/web-components - Versions diffs - 3.0.0-alpha.11 → 3.0.0-alpha.13 - Mend

@ukic/web-components 3.0.0-alpha.11 → 3.0.0-alpha.13

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 (985) hide show

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

@@ -6,32 +6,50 @@ import { isSlotUsed, onComponentRequiredPropUndefined, renderHiddenInput, remove
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export class Checkbox {
     constructor() {
-        this.handleClick = () => {
-            this.checked = !this.checked;
-            this.displayIndeterminate = this.nativeIndeterminateBehaviour
-                ? false
-                : this.indeterminate && this.checked;
-            this.icCheck.emit();
-        };
-        this.handleFormReset = () => {
-            this.checked = this.initiallyChecked;
-        };
+        /**
+         * 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";
-        this.form = undefined;
-        this.groupLabel = undefined;
+        /**
+         * If `true`, the indeterminate state will be displayed when checked.
+         */
         this.indeterminate = false;
         this.displayIndeterminate = this.indeterminate;
-        this.label = undefined;
-        this.name = undefined;
+        /**
+         * 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;
-        this.size = undefined;
+        /**
+         * 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";
-        this.value = undefined;
+        /**
+         * 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
+                ? false
+                : this.indeterminate && this.checked;
+            this.icCheck.emit();
+        };
+        this.handleFormReset = () => {
+            this.checked = this.initiallyChecked;
+        };
     }
     watchDisabledHandler() {
         removeDisabledFalse(this.disabled, this.el);
@@ -39,7 +57,7 @@ export class Checkbox {
     watchIndeterminateHandler() {
         this.displayIndeterminate = this.nativeIndeterminateBehaviour
             ? this.indeterminate
-            : this.indeterminate && this.checked;
+            : this.indeterminate && !!this.checked;
     }
     componentWillLoad() {
         removeDisabledFalse(this.disabled, this.el);
@@ -80,8 +98,8 @@ 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, theme, } = this;
@@ -91,17 +109,17 @@ export class Checkbox {
         checked
             ? renderHiddenInput(true, el, name, checked && value, disabled)
             : removeHiddenInput(el);
-        return (h(Host, { class: {
-                "ic-checkbox-disabled": disabled,
+        return (h(Host, { key: '657eacf1576a595f2a7078cf14a07e39603ddaec', class: {
+                "ic-checkbox-disabled": !!disabled,
                 [`ic-checkbox-${size || parentElementSize}`]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("div", { class: "container" }, displayIndeterminate && h("div", { class: "indeterminate-symbol" }), !displayIndeterminate && checked && (h("svg", { class: "checkmark", 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: {
+            } }, h("div", { key: '2f9ab7ae4fa7adfca5d9143821d6baae03492562', class: "container" }, displayIndeterminate && h("div", { key: 'c04e36e2ff4b15d96a6a1bf204e0ae9c57f2d3e3', class: "indeterminate-symbol" }), !displayIndeterminate && checked && (h("svg", { key: '48b5e0da871b6cec1667c022027bf8cdea1fcc15', class: "checkmark", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "fill-rule": "evenodd", "clip-rule": "evenodd" }, h("title", { key: 'bf871a24d38ddeeb0b23a7cae6c65982ae69fc6a' }, "checkmark icon"), h("path", { key: 'ad9b4ee3132636a9a938fabc072796f2820df63f', 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: '262d0be4ec5ed6e7f7ac701f8b8800f1fbd91825', 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: 'e52458082502589354a8e1b5a9b975629ddd22a8', class: "checkbox-label", variant: "body" }, h("label", { key: 'e7099f15c2055bffb2b4c79a2e579731bfb4f517', htmlFor: id }, label)))), isSlotUsed(el, "additional-field") && (h("div", { key: '87c419e79ece414a7ffe59f91442fd8ac7c5e570', class: "dynamic-container", ref: (el) => (this.additionalFieldContainer = el) }, additionalFieldDisplay === "dynamic" && (h("div", { key: 'dedde96cef590e12940cd60878d80121df0f7dd8', class: "branch-corner" })), h("div", { key: 'fec451e9f5705f32fc6c0083f9b2c924940a2c18' }, additionalFieldDisplay === "dynamic" && (h("ic-typography", { key: '477d00ba3c2249c0cbaef7240ecdaddb59fde9fc', variant: "caption" }, h("p", { key: 'a95ddf7079b19b3f6adb5855a5ed334cc35b5dcc', class: "dynamic-text", "aria-live": "polite" }, dynamicText))), h("div", { key: '4663bb912a77f3abb675959e37b58026aaba522d', class: {
                 "additional-field-wrapper": additionalFieldDisplay === "static",
-            } }, h("slot", { name: "additional-field" })))))));
+            } }, h("slot", { key: 'fe74a16f4fd159051e7a0f73893dfc77f39c45d7', name: "additional-field" })))))));
     }
     static get is() { return "ic-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -123,7 +141,7 @@ export class Checkbox {
                 "mutable": false,
                 "complexType": {
                     "original": "IcAdditionalFieldTypes",
-                    "resolved": "\"dynamic\" | \"static\"",
+                    "resolved": "\"dynamic\" | \"static\" | undefined",
                     "references": {
                         "IcAdditionalFieldTypes": {
                             "location": "import",
@@ -133,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\""
@@ -147,7 +167,7 @@ export class Checkbox {
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -156,6 +176,8 @@ export class Checkbox {
                     "tags": [],
                     "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"
@@ -165,7 +187,7 @@ export class Checkbox {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -174,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"
@@ -183,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\""
@@ -201,7 +227,7 @@ export class Checkbox {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -210,6 +236,8 @@ export class Checkbox {
                     "tags": [],
                     "text": "The <form> element to associate the checkbox with."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "form",
                 "reflect": false
             },
@@ -218,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
             },
@@ -235,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"
@@ -262,6 +294,8 @@ export class Checkbox {
                     "tags": [],
                     "text": "The label for the checkbox."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false
             },
@@ -270,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
             },
@@ -287,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"
@@ -305,7 +343,7 @@ export class Checkbox {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSizes",
-                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
                     "references": {
                         "IcSizes": {
                             "location": "import",
@@ -320,6 +358,8 @@ 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
             },
@@ -328,7 +368,7 @@ export class Checkbox {
                 "mutable": false,
                 "complexType": {
                     "original": "IcThemeMode",
-                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                     "references": {
                         "IcThemeMode": {
                             "location": "import",
@@ -343,6 +383,8 @@ export class Checkbox {
                     "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\""
@@ -361,6 +403,8 @@ export class Checkbox {
                     "tags": [],
                     "text": "The value for the checkbox."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false
             },
@@ -369,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"

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-checkbox.js","sourceRoot":"","sources":["../../../src/components/ic-checkbox/ic-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n State,\n Method,\n Watch,\n} from \"@stencil/core\";\nimport {\n IcAdditionalFieldTypes,\n IcSizes,\n IcThemeMode,\n} from \"../../utils/types\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n removeHiddenInput,\n addFormResetListener,\n removeFormResetListener,\n removeDisabledFalse,\n isPropDefined,\n} from \"../../utils/helpers\";\n\n/*\n @slot additional-field - Content to be displayed alongside a checkbox.\n /\n@Component({\n tag: \"ic-checkbox\",\n styleUrl: \"ic-checkbox.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class Checkbox {\n private additionalFieldContainer: HTMLDivElement;\n\n @Element() el: HTMLIcCheckboxElement;\n\n /\n The style of additionalField that will be displayed if used.\n /\n @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n \"static\";\n\n /\n 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.\n /\n @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\n @State() initiallyChecked = this.checked;\n\n /\n If `true`, the checkbox will be set to the disabled state.\n /\n @Prop() disabled?: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /\n The text to be displayed when dynamic.\n /\n\n @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n /\n The <form> element to associate the checkbox with.\n /\n @Prop() form?: string;\n\n /\n The group label for the checkbox.\n /\n @Prop({ mutable: true }) groupLabel: string;\n\n /\n If `true`, the indeterminate state will be displayed when checked.\n /\n @Prop() indeterminate: boolean = false;\n @State() displayIndeterminate = this.indeterminate;\n\n @Watch(\"indeterminate\")\n watchIndeterminateHandler(): void {\n this.displayIndeterminate = this.nativeIndeterminateBehaviour\n ? this.indeterminate\n : this.indeterminate && this.checked;\n }\n\n /\n The label for the checkbox.\n /\n @Prop() label!: string;\n\n /\n The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.\n /\n @Prop({ mutable: true }) name: string;\n\n /\n If `true`, the checkbox will behave like a native checkbox where the `indeterminate` prop sets the indeterminate visual styling, independent of the `checked` state.\n /\n @Prop() nativeIndeterminateBehaviour: boolean = false;\n\n /\n 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.\n /\n @Prop() size?: IcSizes;\n\n /\n 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.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n The value for the checkbox.\n /\n @Prop() value!: string;\n\n /\n If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n /\n @Prop() hideLabel = false;\n\n /\n Emitted when a checkbox has been checked.\n /\n @Event() icCheck: EventEmitter<void>;\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n addFormResetListener(this.el, this.handleFormReset);\n\n const checkboxGroup = this.el.parentElement as HTMLIcCheckboxGroupElement;\n if (checkboxGroup) {\n if (!this.name) this.name = checkboxGroup.name;\n this.groupLabel = checkboxGroup.label;\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.value, propName: \"value\" },\n ],\n \"Checkbox\"\n );\n }\n\n componentDidRender(): void {\n if (this.additionalFieldDisplay === \"static\") {\n const textfield = this.el.querySelector(\"ic-text-field\");\n if (!this.checked) {\n textfield?.setAttribute(\"disabled\", \"\");\n } else {\n textfield?.removeAttribute(\"disabled\");\n }\n } else if (this.additionalFieldContainer) {\n this.additionalFieldContainer.style.display = !this.checked\n ? \"none\"\n : \"flex\";\n }\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n }\n\n /\n Sets focus on the checkbox.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.el.shadowRoot.querySelector<HTMLElement>(\".checkbox\")?.focus();\n }\n\n private handleClick = () => {\n this.checked = !this.checked;\n this.displayIndeterminate = this.nativeIndeterminateBehaviour\n ? false\n : this.indeterminate && this.checked;\n this.icCheck.emit();\n };\n\n private handleFormReset = (): void => {\n this.checked = this.initiallyChecked;\n };\n\n render() {\n const {\n additionalFieldDisplay,\n checked,\n disabled,\n dynamicText,\n el,\n form,\n displayIndeterminate,\n groupLabel,\n label,\n name,\n size,\n value,\n theme,\n } = this;\n\n const id = `ic-checkbox-${\n isPropDefined(label) \|\| value\n }-${groupLabel}`.replace(/ /g, \"-\");\n\n const parentElementSize = (el.parentElement as HTMLIcCheckboxGroupElement)\n .size;\n\n checked\n ? renderHiddenInput(true, el, name, checked && value, disabled)\n : removeHiddenInput(el);\n\n return (\n <Host\n class={{\n \"ic-checkbox-disabled\": disabled,\n [`ic-checkbox-${size \|\| parentElementSize}`]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <div class=\"container\">\n {displayIndeterminate && <div class=\"indeterminate-symbol\" />}\n {!displayIndeterminate && checked && (\n <svg\n class=\"checkmark\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n >\n <title>checkmark icon</title>\n <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\" />\n </svg>\n )}\n <input\n role=\"checkbox\"\n class={{\n checkbox: true,\n checked,\n indeterminate: displayIndeterminate,\n }}\n type=\"checkbox\"\n name={name}\n id={id}\n value={value}\n disabled={disabled ? true : null}\n checked={checked}\n indeterminate={displayIndeterminate}\n onClick={this.handleClick}\n form={form}\n aria-label={this.hideLabel ? this.label : undefined}\n ></input>\n {!this.hideLabel && (\n <ic-typography class=\"checkbox-label\" variant=\"body\">\n <label htmlFor={id}>{label}</label>\n </ic-typography>\n )}\n </div>\n {isSlotUsed(el, \"additional-field\") && (\n <div\n class=\"dynamic-container\"\n ref={(el) => (this.additionalFieldContainer = el)}\n >\n {additionalFieldDisplay === \"dynamic\" && (\n <div class=\"branch-corner\"></div>\n )}\n <div>\n {additionalFieldDisplay === \"dynamic\" && (\n <ic-typography variant=\"caption\">\n <p class=\"dynamic-text\" aria-live=\"polite\">\n {dynamicText}\n </p>\n </ic-typography>\n )}\n <div\n class={{\n \"additional-field-wrapper\":\n additionalFieldDisplay === \"static\",\n }}\n >\n <slot name=\"additional-field\"></slot>\n </div>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-checkbox.js","sourceRoot":"","sources":["../../../src/components/ic-checkbox/ic-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n State,\n Method,\n Watch,\n} from \"@stencil/core\";\nimport {\n IcAdditionalFieldTypes,\n IcSizes,\n IcThemeMode,\n} from \"../../utils/types\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n removeHiddenInput,\n addFormResetListener,\n removeFormResetListener,\n removeDisabledFalse,\n isPropDefined,\n} from \"../../utils/helpers\";\n\n/*\n @slot additional-field - Content to be displayed alongside a checkbox.\n /\n@Component({\n tag: \"ic-checkbox\",\n styleUrl: \"ic-checkbox.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class Checkbox {\n private additionalFieldContainer?: HTMLDivElement;\n\n @Element() el: HTMLIcCheckboxElement;\n\n /\n The style of additionalField that will be displayed if used.\n /\n @Prop({ reflect: true }) additionalFieldDisplay?: IcAdditionalFieldTypes =\n \"static\";\n\n /\n 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.\n /\n @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\n @State() initiallyChecked = this.checked;\n\n /\n If `true`, the checkbox will be set to the disabled state.\n /\n @Prop() disabled?: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /\n The text to be displayed when dynamic.\n /\n\n @Prop() dynamicText?: string = \"This selection requires additional answers\";\n\n /\n The <form> element to associate the checkbox with.\n /\n @Prop() form?: string;\n\n /\n The group label for the checkbox.\n /\n @Prop({ mutable: true }) groupLabel?: string;\n\n /\n If `true`, the indeterminate state will be displayed when checked.\n /\n @Prop() indeterminate?: boolean = false;\n @State() displayIndeterminate = this.indeterminate;\n\n @Watch(\"indeterminate\")\n watchIndeterminateHandler(): void {\n this.displayIndeterminate = this.nativeIndeterminateBehaviour\n ? this.indeterminate\n : this.indeterminate && !!this.checked;\n }\n\n /\n The label for the checkbox.\n /\n @Prop() label!: string;\n\n /\n The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.\n /\n @Prop({ mutable: true }) name?: string;\n\n /\n If `true`, the checkbox will behave like a native checkbox where the `indeterminate` prop sets the indeterminate visual styling, independent of the `checked` state.\n /\n @Prop() nativeIndeterminateBehaviour?: boolean = false;\n\n /\n 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.\n /\n @Prop() size?: IcSizes;\n\n /\n 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.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n The value for the checkbox.\n /\n @Prop() value!: string;\n\n /\n If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n /\n @Prop() hideLabel?: boolean = false;\n\n /\n Emitted when a checkbox has been checked.\n /\n @Event() icCheck: EventEmitter<void>;\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n addFormResetListener(this.el, this.handleFormReset);\n\n const checkboxGroup = this.el.parentElement as HTMLIcCheckboxGroupElement;\n if (checkboxGroup) {\n if (!this.name) this.name = checkboxGroup.name;\n this.groupLabel = checkboxGroup.label;\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.value, propName: \"value\" },\n ],\n \"Checkbox\"\n );\n }\n\n componentDidRender(): void {\n if (this.additionalFieldDisplay === \"static\") {\n const textfield = this.el.querySelector(\"ic-text-field\");\n if (!this.checked) {\n textfield?.setAttribute(\"disabled\", \"\");\n } else {\n textfield?.removeAttribute(\"disabled\");\n }\n } else if (this.additionalFieldContainer) {\n this.additionalFieldContainer.style.display = !this.checked\n ? \"none\"\n : \"flex\";\n }\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n }\n\n /\n Sets focus on the checkbox.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.el.shadowRoot?.querySelector<HTMLElement>(\".checkbox\")?.focus();\n }\n\n private handleClick = () => {\n this.checked = !this.checked;\n this.displayIndeterminate = this.nativeIndeterminateBehaviour\n ? false\n : this.indeterminate && this.checked;\n this.icCheck.emit();\n };\n\n private handleFormReset = (): void => {\n this.checked = this.initiallyChecked;\n };\n\n render() {\n const {\n additionalFieldDisplay,\n checked,\n disabled,\n dynamicText,\n el,\n form,\n displayIndeterminate,\n groupLabel,\n label,\n name,\n size,\n value,\n theme,\n } = this;\n\n const id = `ic-checkbox-${\n isPropDefined(label) \|\| value\n }-${groupLabel}`.replace(/ /g, \"-\");\n\n const parentElementSize = (el.parentElement as HTMLIcCheckboxGroupElement)\n .size;\n\n checked\n ? renderHiddenInput(true, el, name!, checked && value, disabled)\n : removeHiddenInput(el);\n\n return (\n <Host\n class={{\n \"ic-checkbox-disabled\": !!disabled,\n [`ic-checkbox-${size \|\| parentElementSize}`]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <div class=\"container\">\n {displayIndeterminate && <div class=\"indeterminate-symbol\" />}\n {!displayIndeterminate && checked && (\n <svg\n class=\"checkmark\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n >\n <title>checkmark icon</title>\n <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\" />\n </svg>\n )}\n <input\n role=\"checkbox\"\n class={{\n checkbox: true,\n checked: !!checked,\n indeterminate: !!displayIndeterminate,\n }}\n type=\"checkbox\"\n name={name}\n id={id}\n value={value}\n disabled={disabled}\n checked={checked}\n indeterminate={displayIndeterminate}\n onClick={this.handleClick}\n form={form}\n aria-label={this.hideLabel ? this.label : undefined}\n ></input>\n {!this.hideLabel && (\n <ic-typography class=\"checkbox-label\" variant=\"body\">\n <label htmlFor={id}>{label}</label>\n </ic-typography>\n )}\n </div>\n {isSlotUsed(el, \"additional-field\") && (\n <div\n class=\"dynamic-container\"\n ref={(el) => (this.additionalFieldContainer = el)}\n >\n {additionalFieldDisplay === \"dynamic\" && (\n <div class=\"branch-corner\"></div>\n )}\n <div>\n {additionalFieldDisplay === \"dynamic\" && (\n <ic-typography variant=\"caption\">\n <p class=\"dynamic-text\" aria-live=\"polite\">\n {dynamicText}\n </p>\n </ic-typography>\n )}\n <div\n class={{\n \"additional-field-wrapper\":\n additionalFieldDisplay === \"static\",\n }}\n >\n <slot name=\"additional-field\"></slot>\n </div>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"]}