npm - @ukic/web-components - Versions diffs - 2.19.0 → 2.21.0 - Mend

@ukic/web-components 2.19.0 → 2.21.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 (590) hide show

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

@@ -6,7 +6,6 @@ import { isSlotUsed, onComponentRequiredPropUndefined, renderHiddenInput, remove
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export class Checkbox {
     constructor() {
-        this.IC_TEXT_FIELD = "ic-text-field";
         this.handleClick = () => {
             this.checked = !this.checked;
             this.icCheck.emit();
@@ -37,6 +36,12 @@ export class Checkbox {
     componentWillLoad() {
         removeDisabledFalse(this.disabled, this.el);
         addFormResetListener(this.el, this.handleFormReset);
+        const checkboxGroup = this.el.parentElement;
+        if (checkboxGroup) {
+            if (!this.name)
+                this.name = checkboxGroup.name;
+            this.groupLabel = checkboxGroup.label;
+        }
     }
     componentDidLoad() {
         onComponentRequiredPropUndefined([
@@ -46,21 +51,18 @@ export class Checkbox {
     }
     componentDidRender() {
         if (this.additionalFieldDisplay === "static") {
-            const textfield = this.el.querySelector(this.IC_TEXT_FIELD);
+            const textfield = this.el.querySelector("ic-text-field");
             if (!this.checked) {
-                textfield && textfield.setAttribute("disabled", "");
+                textfield === null || textfield === void 0 ? void 0 : textfield.setAttribute("disabled", "");
             }
             else {
-                textfield && textfield.removeAttribute("disabled");
+                textfield === null || textfield === void 0 ? void 0 : textfield.removeAttribute("disabled");
             }
         }
         else if (this.additionalFieldContainer) {
-            if (!this.checked) {
-                this.additionalFieldContainer.style.display = "none";
-            }
-            else {
-                this.additionalFieldContainer.style.display = "flex";
-            }
+            this.additionalFieldContainer.style.display = !this.checked
+                ? "none"
+                : "flex";
         }
     }
     disconnectedCallback() {
@@ -70,28 +72,28 @@ export class Checkbox {
      * Sets focus on the checkbox.
      */
     async setFocus() {
-        const checkboxEl = this.el.shadowRoot.querySelector(".checkbox");
-        if (checkboxEl) {
-            checkboxEl.focus();
-        }
+        var _a;
+        (_a = this.el.shadowRoot.querySelector(".checkbox")) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        let id = `ic-checkbox-${isPropDefined(this.label) ? this.label : this.value}-${this.groupLabel}`;
-        id = id.replace(/ /g, "-");
-        const parentElementSize = this.el.parentElement.size;
-        this.checked
-            ? renderHiddenInput(true, this.el, this.name, this.checked && this.value, this.disabled)
-            : removeHiddenInput(this.el);
+        const { additionalFieldDisplay, checked, disabled, dynamicText, el, form, formaction, formenctype, formmethod, formnovalidate, formtarget, indeterminate, groupLabel, label, name, size, small, value, } = 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: {
-                ["disabled"]: this.disabled,
-                ["small"]: this.small,
-                [`${this.size || parentElementSize}`]: true,
-            } }, h("div", { class: "container" }, this.checked && !this.indeterminate && (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" }))), this.checked && this.indeterminate && (h("div", { class: "indeterminate-symbol" })), h("input", { role: "checkbox", class: {
-                ["checkbox"]: true,
-                ["checked"]: this.checked,
-                ["indeterminate"]: this.indeterminate,
-            }, type: "checkbox", name: this.name, id: id, value: this.value, disabled: this.disabled ? true : null, checked: this.checked, indeterminate: this.indeterminate, onClick: this.handleClick, form: this.form, formaction: this.formaction, formenctype: this.formenctype, formmethod: this.formmethod, formnovalidate: this.formnovalidate, formtarget: this.formtarget }), h("ic-typography", { class: "checkbox-label", variant: "body" }, h("label", { htmlFor: id }, this.label))), isSlotUsed(this.el, "additional-field") && (h("div", { class: "dynamic-container", ref: (el) => (this.additionalFieldContainer = el) }, this.additionalFieldDisplay === "dynamic" && (h("div", { class: "branch-corner" })), h("div", null, this.additionalFieldDisplay === "dynamic" && (h("ic-typography", { variant: "caption" }, h("p", { class: "dynamic-text", "aria-live": "polite" }, this.dynamicText))), h("div", { class: {
-                "additional-field-wrapper": this.additionalFieldDisplay === "static",
+                disabled,
+                small,
+                [`${size || parentElementSize}`]: true,
+            } }, h("div", { class: "container" }, checked &&
+            (!indeterminate ? (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("div", { class: "indeterminate-symbol" }))), h("input", { role: "checkbox", class: {
+                checkbox: true,
+                checked,
+                indeterminate,
+            }, type: "checkbox", name: name, id: id, value: value, disabled: disabled ? true : null, checked: checked, indeterminate: indeterminate, onClick: this.handleClick, form: form, formaction: formaction, formenctype: formenctype, formmethod: formmethod, formnovalidate: formnovalidate, formtarget: formtarget }), 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: {
+                "additional-field-wrapper": additionalFieldDisplay === "static",
             } }, h("slot", { name: "additional-field" })))))));
     }
     static get is() { return "ic-checkbox"; }

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} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes, IcSizes } 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 private IC_TEXT_FIELD: string = \"ic-text-field\";\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.\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\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 URL that processes the information submitted by the checkbox. It overrides the action attribute of the checkbox's form owner. Does nothing if there is no form owner.\n /\n @Prop() formaction?: string;\n\n /\n The way the submitted form data is encoded.\n /\n @Prop() formenctype?: string;\n\n /\n The HTTP method used to submit the form.\n /\n @Prop() formmethod?: string;\n\n /\n If `true`, the form will not be validated when submitted.\n /\n @Prop() formnovalidate?: boolean;\n\n /\n The place to display the response from submitting the form. It overrides the target attribute of the checkbox's form owner.\n /\n @Prop() formtarget?: string;\n\n /\n The group label for the checkbox.\n /\n @Prop() groupLabel: string;\n\n /\n If `true`, the indeterminate state will be displayed when checked.\n /\n @Prop() indeterminate: boolean = false;\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() name: string;\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 @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n /\n @Prop() small?: boolean = false;\n\n /\n The value for the checkbox.\n /\n @Prop() value!: string;\n\n /\n @deprecated This event should not be used anymore. Use icCheck instead.\n /\n @Event() checkboxChecked: EventEmitter<void>;\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\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(this.IC_TEXT_FIELD);\n if (!this.checked) {\n textfield && textfield.setAttribute(\"disabled\", \"\");\n } else {\n textfield && textfield.removeAttribute(\"disabled\");\n }\n } else if (this.additionalFieldContainer) {\n if (!this.checked) {\n this.additionalFieldContainer.style.display = \"none\";\n } else {\n this.additionalFieldContainer.style.display = \"flex\";\n }\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 const checkboxEl: HTMLElement =\n this.el.shadowRoot.querySelector(\".checkbox\");\n if (checkboxEl) {\n checkboxEl.focus();\n }\n }\n\n private handleClick = () => {\n this.checked = !this.checked;\n this.icCheck.emit();\n this.checkboxChecked.emit();\n };\n\n private handleFormReset = (): void => {\n this.checked = this.initiallyChecked;\n };\n\n render() {\n let id = `ic-checkbox-${\n isPropDefined(this.label) ? this.label : this.value\n }-${this.groupLabel}`;\n\n id = id.replace(/ /g, \"-\");\n\n const parentElementSize = (\n this.el.parentElement as HTMLIcCheckboxGroupElement\n ).size;\n\n this.checked\n ? renderHiddenInput(\n true,\n this.el,\n this.name,\n this.checked && this.value,\n this.disabled\n )\n : removeHiddenInput(this.el);\n\n return (\n <Host\n class={{\n [\"disabled\"]: this.disabled,\n [\"small\"]: this.small,\n [`${this.size \|\| parentElementSize}`]: true,\n }}\n >\n <div class=\"container\">\n {this.checked && !this.indeterminate && (\n <svg\n class=\"checkmark\"\n width=\"1.5rem\"\n height=\"1.5rem\"\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 {this.checked && this.indeterminate && (\n <div class=\"indeterminate-symbol\" />\n )}\n <input\n role=\"checkbox\"\n class={{\n [\"checkbox\"]: true,\n [\"checked\"]: this.checked,\n [\"indeterminate\"]: this.indeterminate,\n }}\n type=\"checkbox\"\n name={this.name}\n id={id}\n value={this.value}\n disabled={this.disabled ? true : null}\n checked={this.checked}\n indeterminate={this.indeterminate}\n onClick={this.handleClick}\n form={this.form}\n formaction={this.formaction}\n formenctype={this.formenctype}\n formmethod={this.formmethod}\n formnovalidate={this.formnovalidate}\n formtarget={this.formtarget}\n ></input>\n <ic-typography class=\"checkbox-label\" variant=\"body\">\n <label htmlFor={id}>{this.label}</label>\n </ic-typography>\n </div>\n {isSlotUsed(this.el, \"additional-field\") && (\n <div\n class=\"dynamic-container\"\n ref={(el) => (this.additionalFieldContainer = el)}\n >\n {this.additionalFieldDisplay === \"dynamic\" && (\n <div class=\"branch-corner\"></div>\n )}\n <div>\n {this.additionalFieldDisplay === \"dynamic\" && (\n <ic-typography variant=\"caption\">\n <p class=\"dynamic-text\" aria-live=\"polite\">\n {this.dynamicText}\n </p>\n </ic-typography>\n )}\n <div\n class={{\n \"additional-field-wrapper\":\n this.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} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes, IcSizes } 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.\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\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 URL that processes the information submitted by the checkbox. It overrides the action attribute of the checkbox's form owner. Does nothing if there is no form owner.\n /\n @Prop() formaction?: string;\n\n /\n The way the submitted form data is encoded.\n /\n @Prop() formenctype?: string;\n\n /\n The HTTP method used to submit the form.\n /\n @Prop() formmethod?: string;\n\n /\n If `true`, the form will not be validated when submitted.\n /\n @Prop() formnovalidate?: boolean;\n\n /\n The place to display the response from submitting the form. It overrides the target attribute of the checkbox's form owner.\n /\n @Prop() formtarget?: string;\n\n /\n The group label for the checkbox.\n /\n @Prop() groupLabel: string;\n\n /\n If `true`, the indeterminate state will be displayed when checked.\n /\n @Prop() indeterminate: boolean = false;\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() name: string;\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 @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n /\n @Prop() small?: boolean = false;\n\n /\n The value for the checkbox.\n /\n @Prop() value!: string;\n\n /\n @deprecated This event should not be used anymore. Use icCheck instead.\n /\n @Event() checkboxChecked: EventEmitter<void>;\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.icCheck.emit();\n this.checkboxChecked.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 formaction,\n formenctype,\n formmethod,\n formnovalidate,\n formtarget,\n indeterminate,\n groupLabel,\n label,\n name,\n size,\n small,\n value,\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 disabled,\n small,\n [`${size \|\| parentElementSize}`]: true,\n }}\n >\n <div class=\"container\">\n {checked &&\n (!indeterminate ? (\n <svg\n class=\"checkmark\"\n width=\"1.5rem\"\n height=\"1.5rem\"\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 <div class=\"indeterminate-symbol\" />\n ))}\n <input\n role=\"checkbox\"\n class={{\n checkbox: true,\n checked,\n indeterminate,\n }}\n type=\"checkbox\"\n name={name}\n id={id}\n value={value}\n disabled={disabled ? true : null}\n checked={checked}\n indeterminate={indeterminate}\n onClick={this.handleClick}\n form={form}\n formaction={formaction}\n formenctype={formenctype}\n formmethod={formmethod}\n formnovalidate={formnovalidate}\n formtarget={formtarget}\n ></input>\n <ic-typography class=\"checkbox-label\" variant=\"body\">\n <label htmlFor={id}>{label}</label>\n </ic-typography>\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"]}

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

@@ -14,6 +14,16 @@ export class CheckboxGroup {
         this.validationStatus = "";
         this.validationText = "";
     }
+    labelNameHandler(newValue, oldValue, propName) {
+        Array.from(this.el.querySelectorAll("ic-checkbox")).forEach((checkbox) => {
+            if (propName === "label")
+                checkbox.groupLabel = newValue;
+            else if (checkbox.name === oldValue) {
+                // If the checkbox name has been set by the parent, then override it
+                checkbox.name = newValue;
+            }
+        });
+    }
     handleChange(ev) {
         //don't pass on the event if it has come from slotted text field
         //otherwise any icChange handler bound to the checkbox group will also run
@@ -25,20 +35,15 @@ export class CheckboxGroup {
         removeDisabledFalse(this.disabled, this.el);
     }
     componentDidLoad() {
-        Array.from(this.el.querySelectorAll("ic-checkbox")).forEach((checkbox) => {
-            if (!checkbox.name)
-                checkbox.name = this.name;
-            checkbox.groupLabel = this.label;
-        });
         onComponentRequiredPropUndefined([
             { prop: this.label, propName: "label" },
             { prop: this.name, propName: "name" },
         ], "Checkbox Group");
     }
-    selectHandler(ev) {
-        const checkedOptions = Array.from(this.el.querySelectorAll("ic-checkbox")).filter((checkbox) => checkbox.checked && !checkbox.disabled);
+    selectHandler({ target }) {
+        const checkedOptions = Array.from(this.el.querySelectorAll("ic-checkbox")).filter(({ checked, disabled }) => checked && !disabled);
         this.icChange.emit({
-            value: checkedOptions.map((opt) => opt.value),
+            value: checkedOptions.map(({ value }) => value),
             checkedOptions: checkedOptions.map((opt) => {
                 var _a;
                 return ({
@@ -46,17 +51,15 @@ export class CheckboxGroup {
                     textFieldValue: (_a = opt.querySelector("ic-text-field")) === null || _a === void 0 ? void 0 : _a.value,
                 });
             }),
-            selectedOption: ev.target,
+            selectedOption: target,
         });
     }
     render() {
-        const describedBy = getInputDescribedByText(this.name, this.helperText !== "", this.validationStatus !== "");
-        const hadValidationStatus = hasValidationStatus(this.validationStatus, this.disabled);
-        return (h(Host, { class: { ["small"]: this.small, [`${this.size}`]: true } }, (this.validationStatus === "error" ||
-            this.required ||
-            this.hideLabel) && (h("span", { id: "screenReaderOnlyText", class: "screen-reader-only-text", "aria-hidden": "true" }, this.label, " ", this.validationStatus === "error" ? "invalid data " : null, " ", this.required ? "required" : null)), h("fieldset", { id: this.name, "aria-labelledby": `${this.validationStatus === "error" || this.required || this.hideLabel
+        const { disabled, helperText, hideLabel, label, name, required, size, small, validationStatus, validationText, } = this;
+        const describedBy = getInputDescribedByText(name, helperText !== "", validationStatus !== "");
+        return (h(Host, { class: { ["small"]: small, [`${size}`]: true } }, (validationStatus === "error" || required || hideLabel) && (h("span", { id: "screenReaderOnlyText", class: "screen-reader-only-text", "aria-hidden": "true" }, label, " ", validationStatus === "error" ? "invalid data " : null, " ", required ? "required" : null)), h("fieldset", { id: name, "aria-labelledby": `${validationStatus === "error" || required || hideLabel
                 ? "screenReaderOnlyText"
-                : ""} ${describedBy}`.trim(), disabled: this.disabled }, !this.hideLabel && (h("legend", null, h("ic-input-label", { class: { [`${this.validationStatus}`]: true }, label: this.label, helperText: this.helperText, required: this.required, disabled: this.disabled, for: this.name }))), h("div", { class: "checkboxes-container" }, h("slot", null))), hadValidationStatus && (h("ic-input-validation", { for: this.name, ariaLiveMode: "polite", status: this.validationStatus, message: this.validationText }))));
+                : ""} ${describedBy}`.trim(), disabled: disabled }, !hideLabel && (h("legend", null, h("ic-input-label", { class: { [`${validationStatus}`]: true }, label: label, helperText: helperText, required: required, disabled: disabled, for: name }))), h("div", { class: "checkboxes-container" }, h("slot", null))), hasValidationStatus(validationStatus, disabled) && (h("ic-input-validation", { for: name, ariaLiveMode: "polite", status: validationStatus, message: validationText }))));
     }
     static get is() { return "ic-checkbox-group"; }
     static get encapsulation() { return "shadow"; }
@@ -292,6 +295,15 @@ export class CheckboxGroup {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "label",
+                "methodName": "labelNameHandler"
+            }, {
+                "propName": "name",
+                "methodName": "labelNameHandler"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "icChange",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-checkbox-group.js","sourceRoot":"","sources":["../../../src/components/ic-checkbox-group/ic-checkbox-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,MAAM,EACN,OAAO,EACP,KAAK,~~GAEN~~,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,uBAAuB,EACvB,mBAAmB,EACnB,gCAAgC,EAChC,mBAAmB,GACpB,MAAM,qBAAqB,CAAC;AAS7B,6DAA6D;AAC7D,MAAM,OAAO,aAAa;;wBAMI,KAAK;0BAKJ,EAAE;yBAKF,KAAK;;;~~wBAeN~~,KAAK;oBAKR,SAAS;qBAKT,KAAK;gCAKyB,EAAE;8BAKxB,EAAE;;~~IAQnC~~,~~YAAY~~,~~CAAC~~,~~EAAe;QAC1B~~,~~gEAAgE;QAChE~~,~~0EAA0E~~;~~QAC1E~~,~~IAAK~~,~~EAAE,~~CAAC,~~MAAsB~~,CAAC,~~OAAO~~,~~KAAK~~,~~eAAe,~~EAAE,CAAC~~;YAC3D~~,~~EAAE~~,CAAC,~~wBAAwB~~,~~EAAE,~~CAAC~~;QAChC~~,CAAC~~;IACH~~,CAAC~~;IAED~~,~~iBAAiB;QACf~~,~~mBAAmB,~~CAAC,~~IAAI,~~CAAC,QAAQ,EAAE,IAAI,~~CAAC~~,~~EAAE~~,~~CAAC,CAAC~~;~~IAC9C~~,CAAC~~;IAED~~,~~gBAAgB;QACd~~,~~KAAK~~,CAAC,IAAI,CAAC,IAAI,~~CAAC~~,EAAE,CAAC,~~gBAAgB~~,CAAC,~~aAAa~~,CAAC,CAAC,CAAC,~~OAAO~~,CAAC,CAAC,~~QAAQ~~,~~EAAE~~,~~EAAE~~;~~YACvE~~,~~IAAI~~,CAAC,~~QAAQ~~,CAAC,~~IAAI;gBAAE~~,~~QAAQ~~,~~CAAC~~,~~IAAI~~,~~GAAG~~,~~IAAI~~,CAAC,~~IAAI~~,CAAC;~~YAC9C~~,~~QAAQ~~,CAAC,~~UAAU~~,~~GAAG~~,IAAI,CAAC,~~KAAK~~,CAAC~~;QACnC~~,CAAC,CAAC,CAAC;~~QAEH~~,gCAAgC,CAC9B;YACE,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE;YACvC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE;SACtC,EACD,gBAAgB,CACjB,CAAC;IACJ,CAAC;IAGD,aAAa,CAAC,EAAe;~~QAC3B~~,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAC/B,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,aAAa,CAAC,CACxC,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE,~~CAAC~~,~~QAAQ,~~CAAC,OAAO,IAAI,CAAC,QAAQ,CAAC,~~QAAQ,~~CAAC~~,CAAC~~;~~QAC/D~~,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;YACjB,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC,~~GAAG~~,EAAE,EAAE,~~CAAC~~,~~GAAG,~~CAAC,KAAK,CAAC;~~YAC7C~~,cAAc,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;;gBAAC,OAAA,CAAC;oBAC3C,QAAQ,EAAE,GAAG;oBACb,cAAc,EAAE,MAAA,GAAG,CAAC,aAAa,CAAC,eAAe,CAAC,0CAAE,KAAK;iBAC1D,CAAC,CAAA;aAAA,CAAC;YACH,cAAc,EAAE,~~EAAE,CAAC,~~MAA+B;~~SACnD~~,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,MAAM,~~WAAW~~,~~GAAG~~,~~uBAAuB~~,~~CACzC~~,~~IAAI~~,~~CAAC~~,~~IAAI,~~EACT,~~IAAI~~,~~CAAC~~,~~UAAU~~,~~KAAK~~,~~EAAE~~,~~EACtB~~,IAAI,~~CAAC~~,gBAAgB,~~KAAK~~,~~EAAE~~,~~CAC7B~~,CAAC;~~QACF~~,MAAM,~~mBAAmB~~,GAAG,~~mBAAmB~~,~~CAC7C~~,IAAI,~~CAAC~~,~~gBAAgB~~,~~EACrB~~,~~IAAI~~,~~CAAC~~,~~QAAQ~~,~~CACd~~,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE,~~IAAI,CAAC,~~KAAK,EAAE,CAAC,GAAG,IAAI,~~CAAC,IAAI,~~EAAE,CAAC,EAAE,IAAI,EAAE;~~YAC3D~~,CAAC,~~IAAI,CAAC,~~gBAAgB,KAAK,OAAO~~;gBACjC~~,IAAI,~~CAAC,~~QAAQ~~;gBACb~~,IAAI,~~CAAC,~~SAAS,CAAC,IAAI,~~CACnB~~,YACE,EAAE,EAAC,sBAAsB,EACzB,KAAK,EAAC,yBAAyB,iBACnB,MAAM;gBAEjB,~~IAAI,CAAC,~~KAAK~~;gBAAE~~,~~GAAG;gBACf,IAAI,CAAC,~~gBAAgB,KAAK,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI;gBAAE,GAAG;~~gBAC/D~~,~~IAAI,CAAC,~~QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,~~CAC7B~~,CACR;YACD,gBACE,EAAE,EAAE,IAAI,~~CAAC~~,~~IAAI,qBACI,~~GACf,~~IAAI,CAAC,~~gBAAgB,KAAK,OAAO,IAAI,~~IAAI,CAAC,~~QAAQ,IAAI,~~IAAI,CAAC,~~SAAS;~~oBAClE~~,CAAC,CAAC,sBAAsB;oBACxB,CAAC,CAAC,EACN,IAAI,WAAW,EAAE,CAAC,IAAI,EAAE,EACxB,QAAQ,EAAE,~~IAAI,CAAC,~~QAAQ;~~gBAEtB~~,CAAC,~~IAAI,CAAC,~~SAAS,IAAI,~~CAClB~~;oBACE,sBACE,KAAK,EAAE,EAAE,CAAC,GAAG,~~IAAI,CAAC,~~gBAAgB,EAAE,CAAC,EAAE,IAAI,EAAE,~~EAC7C~~,KAAK,EAAE,~~IAAI,CAAC,~~KAAK,~~EACjB~~,UAAU,EAAE,~~IAAI,CAAC,~~UAAU,~~EAC3B~~,QAAQ,EAAE,~~IAAI,CAAC,~~QAAQ,~~EACvB~~,QAAQ,EAAE,~~IAAI,CAAC,~~QAAQ,~~EACvB~~,GAAG,EAAE,IAAI,~~CAAC~~,~~IAAI,GACE,~~CACX,CACV;gBACD,WAAK,KAAK,EAAC,sBAAsB;oBAC/B,eAAa,CACT,CACG;YACV,mBAAmB,IAAI,~~CACtB~~,2BACE,GAAG,EAAE,IAAI,~~CAAC~~,~~IAAI,EACd,~~YAAY,EAAC,QAAQ,EACrB,MAAM,EAAE,~~IAAI,CAAC,~~gBAAgB,~~EAC7B~~,OAAO,EAAE,~~IAAI,CAAC,~~cAAc,~~GACP~~,CACxB,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Listen,\n Element,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\nimport {\n getInputDescribedByText,\n hasValidationStatus,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcInformationStatusOrEmpty, IcSizes } from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-checkbox-group.types\";\n\n@Component({\n tag: \"ic-checkbox-group\",\n styleUrl: \"ic-checkbox-group.css\",\n shadow: true,\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class CheckboxGroup {\n @Element() el: HTMLIcCheckboxGroupElement;\n\n /*\n If `true`, the checkbox group will be set to the disabled state.\n /\n @Prop() disabled: boolean = false;\n\n /\n The helper text that will be displayed for additional field guidance.\n /\n @Prop() helperText: 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 The label for the checkbox group to be displayed.\n /\n @Prop() label!: string;\n\n /\n The name for the checkbox group to differentiate from other groups.\n /\n @Prop() name!: string;\n\n /\n If `true`, the checkbox group will require a value.\n /\n @Prop() required: boolean = false;\n\n /\n The size of the checkboxes to be displayed. This does not affect the font size of the label.\n /\n @Prop() size?: IcSizes = \"default\";\n\n /\n @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n /\n @Prop() small: boolean = false;\n\n /\n The validation status - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n /\n The validation text - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() validationText: string = \"\";\n\n /\n Emitted when a checkbox is checked.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n @Listen(\"icChange\")\n handleChange(ev: CustomEvent): void {\n //don't pass on the event if it has come from slotted text field\n //otherwise any icChange handler bound to the checkbox group will also run\n if ((ev.target as HTMLElement).tagName === \"IC-TEXT-FIELD\") {\n ev.stopImmediatePropagation();\n }\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n ~~Array.from(this.el.querySelectorAll(\"ic-checkbox\")).forEach((checkbox) => {\n if (!checkbox.name) checkbox.name = this.name;\n checkbox.groupLabel = this.label;\n });\n\n~~ onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.name, propName: \"name\" },\n ],\n \"Checkbox Group\"\n );\n }\n\n @Listen(\"icCheck\")\n selectHandler(ev: CustomEvent): void {\n const checkedOptions = Array.from(\n this.el.querySelectorAll(\"ic-checkbox\")\n ).filter((~~checkbox~~) => ~~checkbox.~~checked && !~~checkbox.~~disabled);\n this.icChange.emit({\n value: checkedOptions.map((~~opt~~) => ~~opt.~~value),\n checkedOptions: checkedOptions.map((opt) => ({\n checkbox: opt,\n textFieldValue: opt.querySelector(\"ic-text-field\")?.value,\n })),\n selectedOption: ~~ev.~~target as HTMLIcCheckboxElement,\n });\n }\n\n render() {\n const describedBy = getInputDescribedByText(\n ~~this.~~name,\n ~~this.~~helperText !== \"\",\n ~~this.~~validationStatus !== \"\"\n );\n ~~const hadValidationStatus = hasValidationStatus(~~\n ~~this.validationStatus,\n this.disabled\n~~ ~~);\n\n~~ return (\n <Host class={{ [\"small\"]: ~~this.~~small, [`${~~this.~~size}`]: true }}>\n {(~~this.~~validationStatus === \"error\" ~~\|\|\n this.~~required ~~\|\|\n this.~~hideLabel) && (\n <span\n id=\"screenReaderOnlyText\"\n class=\"screen-reader-only-text\"\n aria-hidden=\"true\"\n >\n {~~this.~~label}~~{\"~~ ~~\"}\n~~ {~~this.~~validationStatus === \"error\" ? \"invalid data \" : null}{\" \"}\n {~~this.~~required ? \"required\" : null}\n </span>\n )}\n <fieldset\n id={~~this.~~name}\n aria-labelledby={`${\n ~~this.~~validationStatus === \"error\" \|\| ~~this.~~required \|\| ~~this.~~hideLabel\n ? \"screenReaderOnlyText\"\n : \"\"\n } ${describedBy}`.trim()}\n disabled={~~this.~~disabled}\n >\n {!~~this.~~hideLabel && (\n <legend>\n <ic-input-label\n class={{ [`${~~this.~~validationStatus}`]: true }}\n label={~~this.~~label}\n helperText={~~this.~~helperText}\n required={~~this.~~required}\n disabled={~~this.~~disabled}\n for={~~this.~~name}\n ></ic-input-label>\n </legend>\n )}\n <div class=\"checkboxes-container\">\n <slot></slot>\n </div>\n </fieldset>\n {~~hadValidationStatus~~ && (\n <ic-input-validation\n for={~~this.~~name}\n ariaLiveMode=\"polite\"\n status={~~this.~~validationStatus}\n message={~~this.~~validationText}\n ></ic-input-validation>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-checkbox-group.js","sourceRoot":"","sources":["../../../src/components/ic-checkbox-group/ic-checkbox-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Listen,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from \"@stencil/core\";\nimport {\n getInputDescribedByText,\n hasValidationStatus,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcInformationStatusOrEmpty, IcSizes } from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-checkbox-group.types\";\n\n@Component({\n tag: \"ic-checkbox-group\",\n styleUrl: \"ic-checkbox-group.css\",\n shadow: true,\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class CheckboxGroup {\n @Element() el: HTMLIcCheckboxGroupElement;\n\n /*\n If `true`, the checkbox group will be set to the disabled state.\n /\n @Prop() disabled: boolean = false;\n\n /\n The helper text that will be displayed for additional field guidance.\n /\n @Prop() helperText: 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 The label for the checkbox group to be displayed.\n /\n @Prop() label!: string;\n\n /\n The name for the checkbox group to differentiate from other groups.\n /\n @Prop() name!: string;\n\n @Watch(\"label\")\n @Watch(\"name\")\n labelNameHandler(\n newValue: string,\n oldValue: string,\n propName: \"label\" \| \"name\"\n ): void {\n Array.from(this.el.querySelectorAll(\"ic-checkbox\")).forEach((checkbox) => {\n if (propName === \"label\") checkbox.groupLabel = newValue;\n else if (checkbox.name === oldValue) {\n // If the checkbox name has been set by the parent, then override it\n checkbox.name = newValue;\n }\n });\n }\n\n /\n If `true`, the checkbox group will require a value.\n /\n @Prop() required: boolean = false;\n\n /\n The size of the checkboxes to be displayed. This does not affect the font size of the label.\n /\n @Prop() size?: IcSizes = \"default\";\n\n /\n @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n /\n @Prop() small: boolean = false;\n\n /\n The validation status - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n /\n The validation text - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() validationText: string = \"\";\n\n /\n Emitted when a checkbox is checked.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n @Listen(\"icChange\")\n handleChange(ev: CustomEvent): void {\n //don't pass on the event if it has come from slotted text field\n //otherwise any icChange handler bound to the checkbox group will also run\n if ((ev.target as HTMLElement).tagName === \"IC-TEXT-FIELD\") {\n ev.stopImmediatePropagation();\n }\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.name, propName: \"name\" },\n ],\n \"Checkbox Group\"\n );\n }\n\n @Listen(\"icCheck\")\n selectHandler({ target }: CustomEvent): void {\n const checkedOptions = Array.from(\n this.el.querySelectorAll(\"ic-checkbox\")\n ).filter(({ checked, disabled }) => checked && !disabled);\n this.icChange.emit({\n value: checkedOptions.map(({ value }) => value),\n checkedOptions: checkedOptions.map((opt) => ({\n checkbox: opt,\n textFieldValue: opt.querySelector(\"ic-text-field\")?.value,\n })),\n selectedOption: target as HTMLIcCheckboxElement,\n });\n }\n\n render() {\n const {\n disabled,\n helperText,\n hideLabel,\n label,\n name,\n required,\n size,\n small,\n validationStatus,\n validationText,\n } = this;\n\n const describedBy = getInputDescribedByText(\n name,\n helperText !== \"\",\n validationStatus !== \"\"\n );\n\n return (\n <Host class={{ [\"small\"]: small, [`${size}`]: true }}>\n {(validationStatus === \"error\" \|\| required \|\| hideLabel) && (\n <span\n id=\"screenReaderOnlyText\"\n class=\"screen-reader-only-text\"\n aria-hidden=\"true\"\n >\n {label} {validationStatus === \"error\" ? \"invalid data \" : null}{\" \"}\n {required ? \"required\" : null}\n </span>\n )}\n <fieldset\n id={name}\n aria-labelledby={`${\n validationStatus === \"error\" \|\| required \|\| hideLabel\n ? \"screenReaderOnlyText\"\n : \"\"\n } ${describedBy}`.trim()}\n disabled={disabled}\n >\n {!hideLabel && (\n <legend>\n <ic-input-label\n class={{ [`${validationStatus}`]: true }}\n label={label}\n helperText={helperText}\n required={required}\n disabled={disabled}\n for={name}\n ></ic-input-label>\n </legend>\n )}\n <div class=\"checkboxes-container\">\n <slot></slot>\n </div>\n </fieldset>\n {hasValidationStatus(validationStatus, disabled) && (\n <ic-input-validation\n for={name}\n ariaLiveMode=\"polite\"\n status={validationStatus}\n message={validationText}\n ></ic-input-validation>\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-checkbox-group/test/basic/ic-checkbox-group.spec.js CHANGED Viewed

@@ -206,5 +206,17 @@ describe("ic-checkbox-group", () => {
         //test disconnected callback
         page.setContent("");
     });
+    it("should test labelNameHandler", async () => {
+        const page = await newSpecPage({
+            components: [Checkbox, CheckboxGroup],
+            html: `<ic-checkbox-group label="test label" name="test">
+      <ic-checkbox value="test" label="test label"></ic-checkbox>
+    </ic-checkbox-group>`,
+        });
+        expect(page.root).toMatchSnapshot();
+        page.root.label = "new label";
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+    });
 });
 //# sourceMappingURL=ic-checkbox-group.spec.js.map

package/dist/collection/components/ic-checkbox-group/test/basic/ic-checkbox-group.spec.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-checkbox-group.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-checkbox-group/test/basic/ic-checkbox-group.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { CheckboxGroup } from \"../../ic-checkbox-group\";\nimport { Checkbox } from \"../../../ic-checkbox/ic-checkbox\";\nimport { TextField } from \"../../../ic-text-field/ic-text-field\";\n\ndescribe(\"ic-checkbox-group\", () => {\n it(\"should render\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders\");\n });\n\n it(\"should render as required\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\" required>\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-required\");\n });\n\n it(\"should render as helper text\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\" helper-text=\"helper test\">\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-with-helpertext\");\n });\n\n it(\"should test checkbox option as submit on form\", async () => {\n const page = await newSpecPage({\n components: [Checkbox],\n html: `<form id=\"new-form\"></form><ic-checkbox id=\"ic-checkbox\" label=\"IC Checkbox Test\" value=\"test-value\" form=\"new-form\" selected></ic-checkbox>`,\n });\n\n expect(page.root).toMatchSnapshot();\n });\n\n it(\"should render checked\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n <ic-checkbox value=\"test\" checked label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-checked\");\n });\n\n it(\"should render indeterminate\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n <ic-checkbox value=\"test\" checked indeterminate label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-indeterminate\");\n });\n\n it(\"should render an aria label when label hidden\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\">\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-hidden-label\");\n });\n\n it(\"should render in a disabled state\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n <ic-checkbox value=\"test\" disabled label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-disabled\");\n });\n\n it(\"should render with validation status\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-with-validation\");\n });\n\n it(\"should render with hidden dynamic additional field\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox, TextField],\n html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n <ic-checkbox value=\"test\" additional-field-display=\"dynamic\" label=\"test label\">\n <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n </ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-with-dynamic-field\");\n });\n\n it(\"should render with dynamic additional field when checked\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox, TextField],\n html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n <ic-checkbox value=\"test\" label=\"test label\" additional-field-display=\"dynamic\" checked>\n <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n </ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\n \"renders-with-dynamic-field-when-checked\"\n );\n });\n\n it(\"should render with disabled static additional field\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox, TextField],\n html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n <ic-checkbox value=\"test\" label=\"test label\" additional-field-display=\"static\">\n <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n </ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-with-disabled-additional-field\");\n });\n\n it(\"should remove disabled attribute from static additional field when checked\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox, TextField],\n html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n <ic-checkbox value=\"test\" label=\"test label\" additional-field-display=\"static\" checked>\n <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n </ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\n \"renders-with-disabled-attribute-removed-from-field\"\n );\n });\n\n it(\"should pass the size on the checkbox group to the child checkboxes when there's no size set on them individually\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\" size=\"small\">\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot();\n\n const checkboxes = page.root.querySelectorAll(\"ic-checkbox\");\n\n checkboxes.forEach((checkbox) => {\n expect(checkbox.classList.contains(\"small\")).toBe(true);\n });\n });\n\n it(\"should prioritise the size on an individual checkbox over the size on the checkbox group\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\" size=\"large\">\n <ic-checkbox value=\"test\" label=\"test label\" id=\"large-checkbox\"></ic-checkbox>\n <ic-checkbox value=\"test\" label=\"test label\" size=\"small\" id=\"small-checkbox\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n const smallCheckbox = page.root.querySelector(\n \"ic-checkbox#small-checkbox\"\n ) as HTMLIcCheckboxElement;\n expect(smallCheckbox[\"size\"]).toMatch(\"small\");\n\n const largeCheckbox = page.root.querySelector(\n \"ic-checkbox:not(#small-checkbox)\"\n ) as HTMLIcCheckboxElement;\n expect(largeCheckbox.classList.contains(\"large\")).toBe(true);\n\n expect(page.root).toMatchSnapshot();\n });\n\n it(\"should change checked state\", async () => {\n const page = await newSpecPage({\n components: [Checkbox],\n html: `<ic-checkbox value=\"test\" label=\"test label\" checked></ic-checkbox>`,\n });\n\n expect(page.root.checked).toBe(true);\n\n page.rootInstance.handleClick();\n await page.waitForChanges();\n\n expect(page.root.checked).toBe(false);\n });\n\n it(\"should call 'setFocus' when checkbox is focused\", async () => {\n const page = await newSpecPage({\n components: [Checkbox],\n html: `<ic-checkbox value=\"test\" label=\"test label\" checked></ic-checkbox>`,\n });\n\n //Can't expect anything in this test - this is to increase code coverage only\n await page.rootInstance.setFocus().toHaveBeenCalled;\n });\n\n it(\"should emit icCheck on click\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n const eventSpy = jest.fn();\n\n page.win.addEventListener(\"icCheck\", eventSpy);\n\n page.root\n .querySelector(\"ic-checkbox\")\n .shadowRoot.querySelector(\"input\")\n .click();\n\n await page.waitForChanges();\n\n expect(eventSpy).toHaveBeenCalled();\n });\n\n it(\"should test form reset event\", async () => {\n const page = await newSpecPage({\n components: [Checkbox],\n html: `<form>\n <ic-checkbox value=\"test\" label=\"test label\" checked></ic-checkbox> \n <button id=\"resetButton\" type=\"reset\">Reset</button> \n </form>`,\n });\n\n expect(page.root.checked).toBe(true);\n\n page.root.checked = false;\n await page.waitForChanges();\n\n expect(page.root.checked).toBe(false);\n\n await page.rootInstance.handleFormReset();\n await page.waitForChanges();\n\n expect(page.root.checked).toBe(true);\n\n //test disconnected callback\n page.setContent(\"\");\n });\n});\n"]}
1	+ {"version":3,"file":"ic-checkbox-group.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-checkbox-group/test/basic/ic-checkbox-group.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { CheckboxGroup } from \"../../ic-checkbox-group\";\nimport { Checkbox } from \"../../../ic-checkbox/ic-checkbox\";\nimport { TextField } from \"../../../ic-text-field/ic-text-field\";\n\ndescribe(\"ic-checkbox-group\", () => {\n it(\"should render\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders\");\n });\n\n it(\"should render as required\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\" required>\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-required\");\n });\n\n it(\"should render as helper text\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\" helper-text=\"helper test\">\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-with-helpertext\");\n });\n\n it(\"should test checkbox option as submit on form\", async () => {\n const page = await newSpecPage({\n components: [Checkbox],\n html: `<form id=\"new-form\"></form><ic-checkbox id=\"ic-checkbox\" label=\"IC Checkbox Test\" value=\"test-value\" form=\"new-form\" selected></ic-checkbox>`,\n });\n\n expect(page.root).toMatchSnapshot();\n });\n\n it(\"should render checked\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n <ic-checkbox value=\"test\" checked label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-checked\");\n });\n\n it(\"should render indeterminate\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n <ic-checkbox value=\"test\" checked indeterminate label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-indeterminate\");\n });\n\n it(\"should render an aria label when label hidden\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\">\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-hidden-label\");\n });\n\n it(\"should render in a disabled state\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n <ic-checkbox value=\"test\" disabled label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-disabled\");\n });\n\n it(\"should render with validation status\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-with-validation\");\n });\n\n it(\"should render with hidden dynamic additional field\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox, TextField],\n html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n <ic-checkbox value=\"test\" additional-field-display=\"dynamic\" label=\"test label\">\n <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n </ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-with-dynamic-field\");\n });\n\n it(\"should render with dynamic additional field when checked\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox, TextField],\n html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n <ic-checkbox value=\"test\" label=\"test label\" additional-field-display=\"dynamic\" checked>\n <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n </ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\n \"renders-with-dynamic-field-when-checked\"\n );\n });\n\n it(\"should render with disabled static additional field\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox, TextField],\n html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n <ic-checkbox value=\"test\" label=\"test label\" additional-field-display=\"static\">\n <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n </ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-with-disabled-additional-field\");\n });\n\n it(\"should remove disabled attribute from static additional field when checked\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox, TextField],\n html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n <ic-checkbox value=\"test\" label=\"test label\" additional-field-display=\"static\" checked>\n <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n </ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\n \"renders-with-disabled-attribute-removed-from-field\"\n );\n });\n\n it(\"should pass the size on the checkbox group to the child checkboxes when there's no size set on them individually\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\" size=\"small\">\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot();\n\n const checkboxes = page.root.querySelectorAll(\"ic-checkbox\");\n\n checkboxes.forEach((checkbox) => {\n expect(checkbox.classList.contains(\"small\")).toBe(true);\n });\n });\n\n it(\"should prioritise the size on an individual checkbox over the size on the checkbox group\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\" size=\"large\">\n <ic-checkbox value=\"test\" label=\"test label\" id=\"large-checkbox\"></ic-checkbox>\n <ic-checkbox value=\"test\" label=\"test label\" size=\"small\" id=\"small-checkbox\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n const smallCheckbox = page.root.querySelector(\n \"ic-checkbox#small-checkbox\"\n ) as HTMLIcCheckboxElement;\n expect(smallCheckbox[\"size\"]).toMatch(\"small\");\n\n const largeCheckbox = page.root.querySelector(\n \"ic-checkbox:not(#small-checkbox)\"\n ) as HTMLIcCheckboxElement;\n expect(largeCheckbox.classList.contains(\"large\")).toBe(true);\n\n expect(page.root).toMatchSnapshot();\n });\n\n it(\"should change checked state\", async () => {\n const page = await newSpecPage({\n components: [Checkbox],\n html: `<ic-checkbox value=\"test\" label=\"test label\" checked></ic-checkbox>`,\n });\n\n expect(page.root.checked).toBe(true);\n\n page.rootInstance.handleClick();\n await page.waitForChanges();\n\n expect(page.root.checked).toBe(false);\n });\n\n it(\"should call 'setFocus' when checkbox is focused\", async () => {\n const page = await newSpecPage({\n components: [Checkbox],\n html: `<ic-checkbox value=\"test\" label=\"test label\" checked></ic-checkbox>`,\n });\n\n //Can't expect anything in this test - this is to increase code coverage only\n await page.rootInstance.setFocus().toHaveBeenCalled;\n });\n\n it(\"should emit icCheck on click\", async () => {\n const page = await newSpecPage({\n components: [CheckboxGroup, Checkbox],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n const eventSpy = jest.fn();\n\n page.win.addEventListener(\"icCheck\", eventSpy);\n\n page.root\n .querySelector(\"ic-checkbox\")\n .shadowRoot.querySelector(\"input\")\n .click();\n\n await page.waitForChanges();\n\n expect(eventSpy).toHaveBeenCalled();\n });\n\n it(\"should test form reset event\", async () => {\n const page = await newSpecPage({\n components: [Checkbox],\n html: `<form>\n <ic-checkbox value=\"test\" label=\"test label\" checked></ic-checkbox> \n <button id=\"resetButton\" type=\"reset\">Reset</button> \n </form>`,\n });\n\n expect(page.root.checked).toBe(true);\n\n page.root.checked = false;\n await page.waitForChanges();\n\n expect(page.root.checked).toBe(false);\n\n await page.rootInstance.handleFormReset();\n await page.waitForChanges();\n\n expect(page.root.checked).toBe(true);\n\n //test disconnected callback\n page.setContent(\"\");\n });\n\n it(\"should test labelNameHandler\", async () => {\n const page = await newSpecPage({\n components: [Checkbox, CheckboxGroup],\n html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox> \n </ic-checkbox-group>`,\n });\n\n expect(page.root).toMatchSnapshot();\n\n page.root.label = \"new label\";\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n });\n});\n"]}

package/dist/collection/components/ic-chip/ic-chip.css CHANGED Viewed

@@ -524,7 +524,11 @@ ic-tooltip:focus-within {
 }
 .chip.disabled ic-typography {
-  color: var(--ic-architectural-200);
+  color: var(--ic-architectural-500);
+}
+.filled.disabled ic-typography {
+  color: var(--ic-architectural-600);
 }
 .dismiss-icon {

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

@@ -12,23 +12,20 @@ export class Chip {
             this.icDismiss.emit();
         };
         this.mouseEnterHandler = () => {
-            this.isHovered = true;
+            this.hovered = true;
         };
         this.mouseLeaveHandler = () => {
-            this.isHovered = false;
+            this.hovered = false;
         };
         this.setChipColour = () => {
-            if (convertToRGBA(this.customColor) !== null) {
-                const colorRGBA = convertToRGBA(this.customColor);
-                const rgbaValue = `rgba(${colorRGBA.r.toString()}, ${colorRGBA.g.toString()}, ${colorRGBA.b.toString()}, ${colorRGBA.a.toString()})`;
-                const brightness = (colorRGBA.r * 299 + colorRGBA.g * 587 + colorRGBA.b * 114) / 1000;
-                const foregroundColour = brightness > 133.3505
-                    ? "var(--ic-architectural-black)"
-                    : "var(--ic-architectural-white)";
-                this.el.setAttribute("style", `--chip-custom-color: ${rgbaValue}; --chip-custom-foreground-color: ${foregroundColour};`);
+            const colorRGBA = convertToRGBA(this.customColor);
+            if (colorRGBA) {
+                const { r, g, b, a } = colorRGBA;
+                const foregroundColour = (r * 299 + g * 587 + b * 114) / 1000 > 133.3505 ? "black" : "white";
+                this.el.setAttribute("style", `--chip-custom-color: rgba(${r}, ${g}, ${b}, ${a}); --chip-custom-foreground-color: var(--ic-architectural-${foregroundColour})`);
             }
         };
-        this.isHovered = false;
+        this.hovered = false;
         this.visible = true;
         this.appearance = undefined;
         this.customColor = null;
@@ -40,13 +37,13 @@ export class Chip {
         this.variant = "filled";
     }
     customColorHandler() {
-        if (!this.dismissible && this.customColor !== null) {
+        if (!this.dismissible) {
             this.setChipColour();
         }
     }
     componentWillLoad() {
         removeDisabledFalse(this.disabled, this.el);
-        if (!this.dismissible && this.customColor !== null) {
+        if (!this.dismissible) {
             this.setChipColour();
         }
         if (this.appearance === "outline") {
@@ -54,10 +51,6 @@ export class Chip {
         }
     }
     componentDidLoad() {
-        var _a;
-        this.dismissible &&
-            ((_a = this.el.shadowRoot
-                .querySelector("span.ic-tooltip-label")) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-hidden", "true"));
         onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Chip");
     }
     handleClick() {
@@ -67,24 +60,21 @@ export class Chip {
      * Sets focus on the chip.
      */
     async setFocus() {
-        if (this.el.shadowRoot.querySelector("button")) {
-            this.el.shadowRoot.querySelector("button").focus();
-        }
+        var _a;
+        (_a = this.el.shadowRoot.querySelector("button")) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        const { label, appearance, variant, size, dismissible, visible, disabled, isHovered, } = this;
+        const { label, appearance, variant, size, dismissible, visible, disabled, hovered, } = this;
         return (visible && (h("div", { class: {
-                ["chip"]: true,
+                chip: true,
                 [`${appearance}`]: appearance !== undefined,
                 [`${variant}`]: true,
                 [`${size}`]: true,
-                ["disabled"]: disabled,
-                ["dismissible"]: dismissible,
-                ["hovered"]: isHovered,
-                ["white-background"]: this.variant === "outlined" && !this.transparentBackground,
-            } }, isSlotUsed(this.el, "icon") && (h("div", { class: "icon" }, h("slot", { name: "icon" }))), h("ic-typography", { variant: "label", "apply-vertical-margins": false, class: "label" }, h("span", null, label)), dismissible && (h("ic-tooltip", { label: "Dismiss", target: "dismiss-icon", class: { ["tooltip-disabled"]: disabled } }, h("button", { id: "dismiss-icon", class: {
-                ["dismiss-icon"]: true,
-            }, "aria-label": `Dismiss ${label} chip`, disabled: disabled, tabindex: disabled ? -1 : 0, onClick: this.dismissAction, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler, innerHTML: dismissIcon }))), isSlotUsed(this.el, "badge") && h("slot", { name: "badge" }))));
+                disabled,
+                dismissible,
+                hovered,
+                "white-background": this.variant === "outlined" && !this.transparentBackground,
+            } }, isSlotUsed(this.el, "icon") && (h("div", { class: "icon" }, h("slot", { name: "icon" }))), h("ic-typography", { variant: "label", "apply-vertical-margins": false, class: "label" }, h("span", null, label)), dismissible && (h("ic-tooltip", { label: "Dismiss", target: "dismiss-icon", class: { "tooltip-disabled": disabled } }, h("button", { id: "dismiss-icon", class: "dismiss-icon", "aria-label": `Dismiss ${label} chip`, disabled: disabled, tabindex: disabled ? -1 : 0, onClick: this.dismissAction, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler, innerHTML: dismissIcon }))), isSlotUsed(this.el, "badge") && h("slot", { name: "badge" }))));
     }
     static get is() { return "ic-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -274,7 +264,7 @@ export class Chip {
     }
     static get states() {
         return {
-            "isHovered": {},
+            "hovered": {},
             "visible": {}
         };
     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-chip.js","sourceRoot":"","sources":["../../../src/components/ic-chip/ic-chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n State,\n Listen,\n Event,\n EventEmitter,\n Element,\n Method,\n Watch,\n} from \"@stencil/core\";\nimport {\n onComponentRequiredPropUndefined,\n isSlotUsed,\n removeDisabledFalse,\n convertToRGBA,\n} from \"../../utils/helpers\";\nimport { IcChipAppearance } from \"./ic-chip.types\";\nimport { IcColor, IcEmphasisType, IcSizes } from \"../../utils/types\";\nimport dismissIcon from \"../../assets/dismiss-icon.svg\";\n\n/*\n @slot icon - Content will be rendered at the start of the chip.\n * @slot badge - Badge component overlaying the top right of the chip.\n /\n@Component({\n tag: \"ic-chip\",\n styleUrl: \"ic-chip.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Chip {\n @Element() el: HTMLIcChipElement;\n\n @State() isHovered: boolean = false;\n @State() visible: boolean = true;\n\n /\n @deprecated This prop should not be used anymore. Use variant prop instead.\n /\n @Prop() appearance?: IcChipAppearance;\n\n /\n The custom chip colour. This prop will be applied to the chip component if `dismissible` is set to `false`.\n * Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n /\n @Prop() customColor?: IcColor = null;\n\n @Watch(\"customColor\")\n customColorHandler(): void {\n if (!this.dismissible && this.customColor !== null) {\n this.setChipColour();\n }\n }\n\n /\n If `true`, the chip will appear disabled.\n /\n @Prop() disabled?: boolean = false;\n\n /\n If `true`, the chip will have a close button at the end to dismiss it.\n /\n @Prop() dismissible?: boolean = false;\n\n /\n The text rendered within the chip.\n /\n @Prop() label!: string;\n\n /\n The size of the chip.\n /\n @Prop() size?: IcSizes = \"default\";\n\n /\n If `true`, the outlined variant of chip will have a transparent background rather than white.\n /\n @Prop() transparentBackground?: boolean = true;\n\n /\n The emphasis of the chip.\n /\n @Prop() variant?: IcEmphasisType = \"filled\";\n\n /\n @deprecated This event should not be used anymore. Use icDismiss instead.\n /\n @Event() dismiss: EventEmitter<void>;\n\n /\n Is emitted when the user dismisses the chip.\n /\n @Event() icDismiss: EventEmitter<void>;\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n if (!this.dismissible && this.customColor !== null) {\n this.setChipColour();\n }\n\n if (this.appearance === \"outline\") {\n this.variant = \"outlined\";\n }\n }\n\n componentDidLoad(): void {\n this.dismissible &&\n this.el.shadowRoot\n .querySelector(\"span.ic-tooltip-label\")\n ?.setAttribute(\"aria-hidden\", \"true\");\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Chip\"\n );\n }\n\n @Listen(\"icDismiss\", { capture: true })\n handleClick(): void {\n this.visible = !this.visible;\n }\n\n /\n Sets focus on the chip.\n /\n @Method()\n async setFocus(): Promise<void> {\n if (this.el.shadowRoot.querySelector(\"button\")) {\n this.el.shadowRoot.querySelector(\"button\").focus();\n }\n }\n\n private dismissAction = (): void => {\n this.dismiss.emit();\n this.icDismiss.emit();\n };\n\n private mouseEnterHandler = (): void => {\n this.isHovered = true;\n };\n\n private mouseLeaveHandler = (): void => {\n this.isHovered = false;\n };\n\n private setChipColour = () => {\n if (convertToRGBA(this.customColor) !== null) {\n const colorRGBA = convertToRGBA(this.customColor);\n const rgbaValue = `rgba(${colorRGBA.r.toString()}, ${colorRGBA.g.toString()}, ${colorRGBA.b.toString()}, ${colorRGBA.a.toString()})`;\n\n const brightness =\n (colorRGBA.r 299 + colorRGBA.g * 587 + colorRGBA.b * 114) / 1000;\n const foregroundColour =\n brightness > 133.3505\n ? \"var(--ic-architectural-black)\"\n : \"var(--ic-architectural-white)\";\n\n this.el.setAttribute(\n \"style\",\n `--chip-custom-color: ${rgbaValue}; --chip-custom-foreground-color: ${foregroundColour};`\n );\n }\n };\n\n render() {\n const {\n label,\n appearance,\n variant,\n size,\n dismissible,\n visible,\n disabled,\n isHovered,\n } = this;\n\n return (\n visible && (\n <div\n class={{\n [\"chip\"]: true,\n [`${appearance}`]: appearance !== undefined,\n [`${variant}`]: true,\n [`${size}`]: true,\n [\"disabled\"]: disabled,\n [\"dismissible\"]: dismissible,\n [\"hovered\"]: isHovered,\n [\"white-background\"]:\n this.variant === \"outlined\" && !this.transparentBackground,\n }}\n >\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon\">\n <slot name=\"icon\" />\n </div>\n )}\n <ic-typography\n variant=\"label\"\n apply-vertical-margins={false}\n class=\"label\"\n >\n <span>{label}</span>\n </ic-typography>\n {dismissible && (\n <ic-tooltip\n label=\"Dismiss\"\n target=\"dismiss-icon\"\n class={{ [\"tooltip-disabled\"]: disabled }}\n >\n <button\n id=\"dismiss-icon\"\n class={{\n [\"dismiss-icon\"]: true,\n }}\n aria-label={`Dismiss ${label} chip`}\n disabled={disabled}\n tabindex={disabled ? -1 : 0}\n onClick={this.dismissAction}\n onMouseEnter={this.mouseEnterHandler}\n onMouseLeave={this.mouseLeaveHandler}\n innerHTML={dismissIcon}\n ></button>\n </ic-tooltip>\n )}\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n </div>\n )\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-chip.js","sourceRoot":"","sources":["../../../src/components/ic-chip/ic-chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n State,\n Listen,\n Event,\n EventEmitter,\n Element,\n Method,\n Watch,\n} from \"@stencil/core\";\nimport {\n onComponentRequiredPropUndefined,\n isSlotUsed,\n removeDisabledFalse,\n convertToRGBA,\n} from \"../../utils/helpers\";\nimport { IcChipAppearance } from \"./ic-chip.types\";\nimport { IcColor, IcEmphasisType, IcSizes } from \"../../utils/types\";\nimport dismissIcon from \"../../assets/dismiss-icon.svg\";\n\n/*\n @slot icon - Content will be rendered at the start of the chip.\n * @slot badge - Badge component overlaying the top right of the chip.\n /\n@Component({\n tag: \"ic-chip\",\n styleUrl: \"ic-chip.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Chip {\n @Element() el: HTMLIcChipElement;\n\n @State() hovered: boolean = false;\n @State() visible: boolean = true;\n\n /\n @deprecated This prop should not be used anymore. Use variant prop instead.\n /\n @Prop() appearance?: IcChipAppearance;\n\n /\n The custom chip colour. This prop will be applied to the chip component if `dismissible` is set to `false`.\n * Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n /\n @Prop() customColor?: IcColor = null;\n\n @Watch(\"customColor\")\n customColorHandler(): void {\n if (!this.dismissible) {\n this.setChipColour();\n }\n }\n\n /\n If `true`, the chip will appear disabled.\n /\n @Prop() disabled?: boolean = false;\n\n /\n If `true`, the chip will have a close button at the end to dismiss it.\n /\n @Prop() dismissible?: boolean = false;\n\n /\n The text rendered within the chip.\n /\n @Prop() label!: string;\n\n /\n The size of the chip.\n /\n @Prop() size?: IcSizes = \"default\";\n\n /\n If `true`, the outlined variant of chip will have a transparent background rather than white.\n /\n @Prop() transparentBackground?: boolean = true;\n\n /\n The emphasis of the chip.\n /\n @Prop() variant?: IcEmphasisType = \"filled\";\n\n /\n @deprecated This event should not be used anymore. Use icDismiss instead.\n /\n @Event() dismiss: EventEmitter<void>;\n\n /\n Is emitted when the user dismisses the chip.\n /\n @Event() icDismiss: EventEmitter<void>;\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n if (!this.dismissible) {\n this.setChipColour();\n }\n\n if (this.appearance === \"outline\") {\n this.variant = \"outlined\";\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Chip\"\n );\n }\n\n @Listen(\"icDismiss\", { capture: true })\n handleClick(): void {\n this.visible = !this.visible;\n }\n\n /\n Sets focus on the chip.\n /\n @Method()\n async setFocus(): Promise<void> {\n this.el.shadowRoot.querySelector(\"button\")?.focus();\n }\n\n private dismissAction = (): void => {\n this.dismiss.emit();\n this.icDismiss.emit();\n };\n\n private mouseEnterHandler = (): void => {\n this.hovered = true;\n };\n\n private mouseLeaveHandler = (): void => {\n this.hovered = false;\n };\n\n private setChipColour = () => {\n const colorRGBA = convertToRGBA(this.customColor);\n if (colorRGBA) {\n const { r, g, b, a } = colorRGBA;\n const foregroundColour =\n (r 299 + g * 587 + b * 114) / 1000 > 133.3505 ? \"black\" : \"white\";\n this.el.setAttribute(\n \"style\",\n `--chip-custom-color: rgba(${r}, ${g}, ${b}, ${a}); --chip-custom-foreground-color: var(--ic-architectural-${foregroundColour})`\n );\n }\n };\n\n render() {\n const {\n label,\n appearance,\n variant,\n size,\n dismissible,\n visible,\n disabled,\n hovered,\n } = this;\n\n return (\n visible && (\n <div\n class={{\n chip: true,\n [`${appearance}`]: appearance !== undefined,\n [`${variant}`]: true,\n [`${size}`]: true,\n disabled,\n dismissible,\n hovered,\n \"white-background\":\n this.variant === \"outlined\" && !this.transparentBackground,\n }}\n >\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon\">\n <slot name=\"icon\" />\n </div>\n )}\n <ic-typography\n variant=\"label\"\n apply-vertical-margins={false}\n class=\"label\"\n >\n <span>{label}</span>\n </ic-typography>\n {dismissible && (\n <ic-tooltip\n label=\"Dismiss\"\n target=\"dismiss-icon\"\n class={{ \"tooltip-disabled\": disabled }}\n >\n <button\n id=\"dismiss-icon\"\n class=\"dismiss-icon\"\n aria-label={`Dismiss ${label} chip`}\n disabled={disabled}\n tabindex={disabled ? -1 : 0}\n onClick={this.dismissAction}\n onMouseEnter={this.mouseEnterHandler}\n onMouseLeave={this.mouseLeaveHandler}\n innerHTML={dismissIcon}\n ></button>\n </ic-tooltip>\n )}\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n </div>\n )\n );\n }\n}\n"]}