npm - @ukic/web-components - Versions diffs - 3.20.0 → 3.22.0 - Mend

@ukic/web-components 3.20.0 → 3.22.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 (642) hide show

package/dist/collection/components/ic-card-vertical/ic-card-vertical.css CHANGED Viewed

@@ -712,3 +712,10 @@ button {
     outline-color: Highlight;
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  .card,
+  .toggle-button {
+    transition: none;
+  }
+}

package/dist/collection/components/ic-card-vertical/ic-card-vertical.stories.js CHANGED Viewed

@@ -21,7 +21,7 @@ const defaultArgs = {
 };
 export default {
-  title: "Web Components/Card",
+  title: "Web Components/Card Vertical",
   component: "ic-card-vertical",
 };

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

@@ -694,11 +694,6 @@ video {
     -webkit-appearance: revert;
        -moz-appearance: revert;
             appearance: revert;
-    transition: none;
-  }
-  .checkbox:checked {
-    transition: none;
   }
   .checkbox:focus-visible {
@@ -744,3 +739,10 @@ video {
 .dynamic-container:dir(rtl) {
   margin: var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0;
 }
+@media (prefers-reduced-motion: reduce) {
+  .checkbox,
+  .checkbox:checked {
+    transition: none;
+  }
+}

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

@@ -4,7 +4,6 @@ import { isSlotUsed, onComponentRequiredPropUndefined, renderHiddenInput, remove
  * @slot additional-field - Content to be displayed alongside a checkbox.
  * @slot label - Label for the checkbox.
  */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export class Checkbox {
     constructor() {
         /**
@@ -130,17 +129,17 @@ export class Checkbox {
             ? renderHiddenInput(el, value, name, disabled)
             : removeHiddenInput(el);
         const LabelContent = () => this.hasLabelSlot() ? (h("slot", { name: "label" })) : (h("ic-typography", { class: "checkbox-label", variant: "body" }, h("label", { htmlFor: inputId }, label)));
-        return (h(Host, { key: '7554612ca8fba3490ff568295eea1bfab40707a9', class: {
+        return (h(Host, { key: 'cbbef34df584e10e50b731c4ea44b4c5a5f29917', class: {
                 "ic-checkbox-disabled": disabled,
                 [`ic-checkbox-${size}`]: !!size,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("div", { key: '858b6c8812f827d1805ae6aea8a02760ddaef38a', class: "container" }, displayIndeterminate ? (h("div", { class: "indeterminate-symbol" })) : (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", { key: '1b2729f5f417f5fbea44639369b5ad23f7c937e8', role: "checkbox", class: {
+            } }, h("div", { key: 'b15e0cc68627b692ea251994d13c707a71935332', class: "container" }, displayIndeterminate ? (h("div", { class: "indeterminate-symbol" })) : (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", { key: '8443271bb0f24104dadfc95c0f0e97551f8f32fb', role: "checkbox", class: {
                 checkbox: true,
                 checked,
                 indeterminate: displayIndeterminate,
-            }, ref: (el) => (this.checkboxEl = el), type: "checkbox", name: name, id: inputId, value: value, disabled: disabled, checked: checked, indeterminate: displayIndeterminate, onClick: handleClick, form: form, "aria-label": hideLabel || this.hasLabelSlot() ? label : undefined }), !hideLabel && h(LabelContent, { key: '62bdb97c7d1dd473236dd5a9b294aaf1eb6e01c7' })), h("span", { key: '3d798c60b58dfcb3cf907569094e84a09e5e291c', id: `${inputId}-additional-field-description`, role: "alert", class: "sr-only" }, isDynamicAdditionalField && checked ? dynamicText : ""), isSlotUsed(el, "additional-field") && (h("div", { key: 'a8276e2dcd983bee6547ac802de050348263ca9b', class: "dynamic-container", ref: (el) => (this.additionalFieldContainer = el) }, isDynamicAdditionalField && h("div", { key: '9235762858b354b09bbdf956c5a2041041162f77', class: "branch-corner" }), h("div", { key: 'cb92bb94e296830a3132f752b0c7689671275383', class: "dynamic-field-container" }, isDynamicAdditionalField && (h("ic-typography", { key: '318cdd04a078d79aa98138a664e60ee308799f43', variant: "caption" }, h("p", { key: 'ce5182b3ca908fc98ca9303d014d0c05f0bf3c0b', class: "dynamic-text" }, isDynamicAdditionalField && checked ? dynamicText : ""))), h("div", { key: '352457e47762a12c320dc7df9635fa38bbc0d675', class: {
+            }, ref: (el) => (this.checkboxEl = el), type: "checkbox", name: name, id: inputId, value: value, disabled: disabled, checked: checked, indeterminate: displayIndeterminate, onClick: handleClick, form: form, "aria-label": hideLabel || this.hasLabelSlot() ? label : undefined }), !hideLabel && h(LabelContent, { key: '29c975e697e9b5e8f32c845111686e23ee4de32f' })), h("span", { key: '3901c6b2f84633d2cb0bf6602e1644760dfa78dd', id: `${inputId}-additional-field-description`, role: "alert", class: "sr-only" }, isDynamicAdditionalField && checked ? dynamicText : ""), isSlotUsed(el, "additional-field") && (h("div", { key: '68b7bbd59a084ff452924d0fb82446c0a5b46900', class: "dynamic-container", ref: (el) => (this.additionalFieldContainer = el) }, isDynamicAdditionalField && h("div", { key: '2095e98f6a8ae633892a83f8a8a9a37941186802', class: "branch-corner" }), h("div", { key: 'f92c2ff935d5d72a70bba8479bc7a2b27705da1d', class: "dynamic-field-container" }, isDynamicAdditionalField && (h("ic-typography", { key: '1e69f0fb80ad6f047bd2943b5b348bd539b567ce', variant: "caption" }, h("p", { key: '27f350e13e088275e340332570e3eee32c7ad1be', class: "dynamic-text" }, isDynamicAdditionalField && checked ? dynamicText : ""))), h("div", { key: '98795e79ffb9d719d9d1aae8931f67f8009c273f', class: {
                 "additional-field-wrapper": !isDynamicAdditionalField,
-            } }, h("slot", { key: '1d9225d692fbe869375109c97c9ec479be89e69f', name: "additional-field" })))))));
+            } }, h("slot", { key: '36a8e7ffaa67981e3054240dda02b04936280f91', name: "additional-field" })))))));
     }
     static get is() { return "ic-checkbox"; }
     static get encapsulation() { return "shadow"; }

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} from \"../../utils/helpers\";\n\n/*\n @slot additional-field - Content to be displayed alongside a checkbox.\n * @slot label - Label for the 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 checkboxEl?: HTMLInputElement;\n private labelSlot: HTMLElement \| null;\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 = false;\n @State() initiallyChecked = this.checked;\n\n /\n If `true`, the checkbox will be set to the disabled state.\n /\n @Prop() disabled = 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 = \"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 label will be hidden and the required label value will be applied as an aria-label.\n /\n @Prop() hideLabel = false;\n\n /\n If `true`, the indeterminate state will be displayed when checked.\n /\n @Prop() indeterminate = false;\n @State() displayIndeterminate = this.indeterminate;\n @Watch(\"indeterminate\")\n watchIndeterminateHandler(): void {\n this.displayIndeterminate =\n this.indeterminate && (this.nativeIndeterminateBehaviour \|\| 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 = 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({ mutable: true }) 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 = \"\";\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 { parentElement } = this.el;\n if (parentElement?.tagName === \"IC-CHECKBOX-GROUP\") {\n const { name, label, size } = parentElement as HTMLIcCheckboxGroupElement;\n\n if (!this.name) this.name = name;\n if (!this.size) this.size = size;\n this.groupLabel = label;\n }\n }\n\n componentDidLoad(): void {\n if (this.hasLabelSlot()) {\n this.arrangeLabel();\n } else {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Checkbox\"\n );\n }\n }\n\n componentDidRender(): void {\n if (this.additionalFieldDisplay === \"static\") {\n this.el\n .querySelectorAll(\"ic-text-field\")\n .forEach((textfield) =>\n textfield.setAttribute(\"disabled\", `${!this.checked}`)\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.checkboxEl?.focus();\n }\n\n private getCheckboxGroupId() {\n return `ic-checkbox-${this.label}-${this.groupLabel}`.replace(/ /g, \"-\");\n }\n\n private hasLabelSlot() {\n this.labelSlot = this.el.querySelector('[slot=\"label\"]');\n return !!this.labelSlot;\n }\n\n private arrangeLabel() {\n if (this.labelSlot) {\n this.label = this.labelSlot.textContent?.trim() \|\| \"\";\n this.labelSlot.setAttribute(\"for\", this.getCheckboxGroupId());\n if (this.disabled) {\n this.labelSlot.setAttribute(\"aria-disabled\", \"true\");\n }\n }\n }\n\n private handleClick = () => {\n this.checked = !this.checked;\n this.displayIndeterminate =\n !this.nativeIndeterminateBehaviour && 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 displayIndeterminate,\n dynamicText,\n el,\n form,\n handleClick,\n hideLabel,\n label,\n name,\n size,\n theme,\n value,\n } = this;\n\n const inputId = this.getCheckboxGroupId();\n\n const isDynamicAdditionalField = additionalFieldDisplay === \"dynamic\";\n\n checked\n ? renderHiddenInput(el, value, name, disabled)\n : removeHiddenInput(el);\n\n const LabelContent = () =>\n this.hasLabelSlot() ? (\n <slot name=\"label\"></slot>\n ) : (\n <ic-typography class=\"checkbox-label\" variant=\"body\">\n <label htmlFor={inputId}>{label}</label>\n </ic-typography>\n );\n\n return (\n <Host\n class={{\n \"ic-checkbox-disabled\": disabled,\n [`ic-checkbox-${size}`]: !!size,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <div class=\"container\">\n {displayIndeterminate ? (\n <div class=\"indeterminate-symbol\" />\n ) : (\n 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 )}\n <input\n role=\"checkbox\"\n class={{\n checkbox: true,\n checked,\n indeterminate: displayIndeterminate,\n }}\n ref={(el) => (this.checkboxEl = el)}\n type=\"checkbox\"\n name={name}\n id={inputId}\n value={value}\n disabled={disabled}\n checked={checked}\n indeterminate={displayIndeterminate}\n onClick={handleClick}\n form={form}\n aria-label={hideLabel \|\| this.hasLabelSlot() ? label : undefined}\n ></input>\n {!hideLabel && <LabelContent />}\n </div>\n <span\n id={`${inputId}-additional-field-description`}\n role=\"alert\"\n class=\"sr-only\"\n >\n {isDynamicAdditionalField && checked ? dynamicText : \"\"}\n </span>\n {isSlotUsed(el, \"additional-field\") && (\n <div\n class=\"dynamic-container\"\n ref={(el) => (this.additionalFieldContainer = el)}\n >\n {isDynamicAdditionalField && <div class=\"branch-corner\"></div>}\n <div class=\"dynamic-field-container\">\n {isDynamicAdditionalField && (\n <ic-typography variant=\"caption\">\n <p class=\"dynamic-text\">\n {isDynamicAdditionalField && checked ? dynamicText : \"\"}\n </p>\n </ic-typography>\n )}\n <div\n class={{\n \"additional-field-wrapper\": !isDynamicAdditionalField,\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} from \"../../utils/helpers\";\n\n/*\n @slot additional-field - Content to be displayed alongside a checkbox.\n * @slot label - Label for the checkbox.\n /\n@Component({\n tag: \"ic-checkbox\",\n styleUrl: \"ic-checkbox.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Checkbox {\n private additionalFieldContainer?: HTMLDivElement;\n private checkboxEl?: HTMLInputElement;\n private labelSlot: HTMLElement \| null;\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 = false;\n @State() initiallyChecked = this.checked;\n\n /\n If `true`, the checkbox will be set to the disabled state.\n /\n @Prop() disabled = 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 = \"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 label will be hidden and the required label value will be applied as an aria-label.\n /\n @Prop() hideLabel = false;\n\n /\n If `true`, the indeterminate state will be displayed when checked.\n /\n @Prop() indeterminate = false;\n @State() displayIndeterminate = this.indeterminate;\n @Watch(\"indeterminate\")\n watchIndeterminateHandler(): void {\n this.displayIndeterminate =\n this.indeterminate && (this.nativeIndeterminateBehaviour \|\| 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 = 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({ mutable: true }) 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 = \"\";\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 { parentElement } = this.el;\n if (parentElement?.tagName === \"IC-CHECKBOX-GROUP\") {\n const { name, label, size } = parentElement as HTMLIcCheckboxGroupElement;\n\n if (!this.name) this.name = name;\n if (!this.size) this.size = size;\n this.groupLabel = label;\n }\n }\n\n componentDidLoad(): void {\n if (this.hasLabelSlot()) {\n this.arrangeLabel();\n } else {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Checkbox\"\n );\n }\n }\n\n componentDidRender(): void {\n if (this.additionalFieldDisplay === \"static\") {\n this.el\n .querySelectorAll(\"ic-text-field\")\n .forEach((textfield) =>\n textfield.setAttribute(\"disabled\", `${!this.checked}`)\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.checkboxEl?.focus();\n }\n\n private getCheckboxGroupId() {\n return `ic-checkbox-${this.label}-${this.groupLabel}`.replace(/ /g, \"-\");\n }\n\n private hasLabelSlot() {\n this.labelSlot = this.el.querySelector('[slot=\"label\"]');\n return !!this.labelSlot;\n }\n\n private arrangeLabel() {\n if (this.labelSlot) {\n this.label = this.labelSlot.textContent?.trim() \|\| \"\";\n this.labelSlot.setAttribute(\"for\", this.getCheckboxGroupId());\n if (this.disabled) {\n this.labelSlot.setAttribute(\"aria-disabled\", \"true\");\n }\n }\n }\n\n private handleClick = () => {\n this.checked = !this.checked;\n this.displayIndeterminate =\n !this.nativeIndeterminateBehaviour && 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 displayIndeterminate,\n dynamicText,\n el,\n form,\n handleClick,\n hideLabel,\n label,\n name,\n size,\n theme,\n value,\n } = this;\n\n const inputId = this.getCheckboxGroupId();\n\n const isDynamicAdditionalField = additionalFieldDisplay === \"dynamic\";\n\n checked\n ? renderHiddenInput(el, value, name, disabled)\n : removeHiddenInput(el);\n\n const LabelContent = () =>\n this.hasLabelSlot() ? (\n <slot name=\"label\"></slot>\n ) : (\n <ic-typography class=\"checkbox-label\" variant=\"body\">\n <label htmlFor={inputId}>{label}</label>\n </ic-typography>\n );\n\n return (\n <Host\n class={{\n \"ic-checkbox-disabled\": disabled,\n [`ic-checkbox-${size}`]: !!size,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <div class=\"container\">\n {displayIndeterminate ? (\n <div class=\"indeterminate-symbol\" />\n ) : (\n 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 )}\n <input\n role=\"checkbox\"\n class={{\n checkbox: true,\n checked,\n indeterminate: displayIndeterminate,\n }}\n ref={(el) => (this.checkboxEl = el)}\n type=\"checkbox\"\n name={name}\n id={inputId}\n value={value}\n disabled={disabled}\n checked={checked}\n indeterminate={displayIndeterminate}\n onClick={handleClick}\n form={form}\n aria-label={hideLabel \|\| this.hasLabelSlot() ? label : undefined}\n ></input>\n {!hideLabel && <LabelContent />}\n </div>\n <span\n id={`${inputId}-additional-field-description`}\n role=\"alert\"\n class=\"sr-only\"\n >\n {isDynamicAdditionalField && checked ? dynamicText : \"\"}\n </span>\n {isSlotUsed(el, \"additional-field\") && (\n <div\n class=\"dynamic-container\"\n ref={(el) => (this.additionalFieldContainer = el)}\n >\n {isDynamicAdditionalField && <div class=\"branch-corner\"></div>}\n <div class=\"dynamic-field-container\">\n {isDynamicAdditionalField && (\n <ic-typography variant=\"caption\">\n <p class=\"dynamic-text\">\n {isDynamicAdditionalField && checked ? dynamicText : \"\"}\n </p>\n </ic-typography>\n )}\n <div\n class={{\n \"additional-field-wrapper\": !isDynamicAdditionalField,\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

@@ -3,8 +3,8 @@ import { getInputDescribedByText, hasValidationStatus, onComponentRequiredPropUn
 const CHECKBOX_SELECTOR = "ic-checkbox";
 /**
  * @slot helper-text - Content is set as the helper text for the checkbox group.
+ * @slot label - Content is placed as the label text.
  */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export class CheckboxGroup {
     constructor() {
         /**
@@ -118,11 +118,11 @@ export class CheckboxGroup {
         const describedBy = getInputDescribedByText(this.el, name, helperText !== "", validationStatus !== "");
         const renderSRText = validationStatus === "error" || required || hideLabel;
         const showValidation = hasValidationStatus(validationStatus, disabled);
-        return (h(Host, { key: '862a97d086caec6a36b54a83d7dc73cab51ec26e', class: {
+        return (h(Host, { key: '710f409b81bb1cc6efa8c881216646cb653170bc', class: {
                 "ic-checkbox-group-disabled": !!disabled,
                 [`ic-checkbox-group-${size}`]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, renderSRText && (h("span", { key: '2099c60d533ff668ad2e3770bbe487182ba5c8c3', id: "screenReaderOnlyText", class: "screen-reader-only-text", "aria-hidden": "true" }, label, " ", validationStatus === "error" ? "invalid data " : null, " ", required ? "required" : null)), h("fieldset", { key: '43ab035620d2c0a7b9325b3441fa51e1dac77e3a', id: name, "aria-labelledby": `${renderSRText ? "screenReaderOnlyText" : ""} ${describedBy}`.trim(), disabled: disabled }, !hideLabel && (h("legend", { key: '3bff3341981e4f02aa73a21abee555be9f8aa863' }, h("ic-input-label", { key: '949a4b31d5021b96870fcf63c595d06b4a84baf5', class: { [`${validationStatus}`]: true }, label: label, helperText: helperText, required: required, disabled: disabled, useLabelTag: false }, h("slot", { key: '90ae6ee756ee2415828ac81ebcc5e84a80999c5d', name: "helper-text", slot: "helper-text" })))), h("div", { key: '7bf7695658a85157da695af6e8fb6a9b8be276e3', class: "checkboxes-container" }, h("slot", { key: '30d42a9d6cc00ac71280f88e462cb851d79ef61e' }))), h("ic-input-validation", { key: '44a98a0c788e457319d44421328fcb59ab8e9244', class: {
+            } }, renderSRText && (h("span", { key: 'f51c5a809b512cd8ed608ca46cb3b7e8da917dd9', id: "screenReaderOnlyText", class: "screen-reader-only-text", "aria-hidden": "true" }, label, " ", validationStatus === "error" ? "invalid data " : null, " ", required ? "required" : null)), h("fieldset", { key: '8107a3e6abf16406b201ae7fe5984cf65dc24e6a', id: name, "aria-labelledby": `${renderSRText ? "screenReaderOnlyText" : ""} ${describedBy}`.trim(), disabled: disabled }, !hideLabel && (h("legend", { key: '1f2d96c8b95e5d23d3d1503e16795141c00d10f2' }, h("ic-input-label", { key: '1d0b955aca0e814dda4536bd88c42602bea1ddd2', class: { [`${validationStatus}`]: true }, label: label, helperText: helperText, required: required, disabled: disabled, useLabelTag: false }, h("slot", { key: 'ebe59cbdf8de2d90ef6989354fbbf3ab7c63a275', name: "label", slot: "label" }), h("slot", { key: '425574841027cbf70673fc48ca1558257e8824ec', name: "helper-text", slot: "helper-text" })))), h("div", { key: 'a3df30cadd95a802d580e309f0f35397547023a8', class: "checkboxes-container" }, h("slot", { key: '46f74eb5f9241075b8f504de918af9a5644642fb' }))), h("ic-input-validation", { key: 'b800e52c3348e67ddbfbc8fc5ada934c1e1ace5b', class: {
                 "show-validation": showValidation,
             }, for: name, ariaLiveMode: validationAriaLive, status: showValidation ? validationStatus : "", message: showValidation ? validationText : "" })));
     }

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":"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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 {\n IcAriaLive,\n IcInformationStatusOrEmpty,\n IcSizes,\n IcThemeMode,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-checkbox-group.types\";\n\nconst CHECKBOX_SELECTOR = \"ic-checkbox\";\n\n/*\n @slot helper-text - Content is set as the helper text for the checkbox group.\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 private checkboxes: HTMLIcCheckboxElement[];\n\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 @Watch(\"disabled\")\n watchDisabledHandler(): void {\n this.checkboxes.forEach((checkbox) => {\n checkbox.disabled = this.disabled;\n });\n removeDisabledFalse(this.disabled, this.el);\n }\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(CHECKBOX_SELECTOR)).forEach(\n (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 /\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 = \"medium\";\n @Watch(\"size\")\n watchSizeHandler(): void {\n this.checkboxes.forEach((checkbox) => {\n checkbox.size = this.size;\n });\n }\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 @Watch(\"theme\")\n watchThemeHandler(newValue: IcThemeMode): void {\n Array.from(this.el.querySelectorAll(CHECKBOX_SELECTOR)).forEach(\n (checkbox) => {\n checkbox.theme = newValue;\n }\n );\n }\n\n /\n The value of the `aria-live` attribute on the validation message.\n /\n @Prop() validationAriaLive: IcAriaLive = \"polite\";\n\n /\n The validation status - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n /\n The text to display as the validation message.\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 this.setCheckboxProps();\n removeDisabledFalse(this.disabled, this.el);\n this.watchThemeHandler(this.theme);\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(CHECKBOX_SELECTOR)\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 private setCheckboxProps = () => {\n this.checkboxes = Array.from(this.el.querySelectorAll(CHECKBOX_SELECTOR));\n\n this.checkboxes.forEach((checkbox) => {\n if (!checkbox.disabled) {\n checkbox.disabled = this.disabled;\n }\n if (!checkbox.size) {\n checkbox.size = this.size;\n }\n });\n };\n\n render() {\n const {\n disabled,\n helperText,\n hideLabel,\n label,\n name,\n required,\n size,\n theme,\n validationAriaLive,\n validationStatus,\n validationText,\n } = this;\n\n const describedBy = getInputDescribedByText(\n this.el,\n name,\n helperText !== \"\",\n validationStatus !== \"\"\n );\n\n const renderSRText = validationStatus === \"error\" \|\| required \|\| hideLabel;\n\n const showValidation = hasValidationStatus(validationStatus, disabled);\n\n return (\n <Host\n class={{\n \"ic-checkbox-group-disabled\": !!disabled,\n [`ic-checkbox-group-${size}`]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n {renderSRText && (\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 renderSRText ? \"screenReaderOnlyText\" : \"\"\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 useLabelTag={false}\n >\n <slot name=\"helper-text\" slot=\"helper-text\"></slot>\n </ic-input-label>\n </legend>\n )}\n <div class=\"checkboxes-container\">\n <slot></slot>\n </div>\n </fieldset>\n <ic-input-validation\n class={{\n \"show-validation\": showValidation,\n }}\n for={name}\n ariaLiveMode={validationAriaLive}\n status={showValidation ? validationStatus : \"\"}\n message={showValidation ? validationText : \"\"}\n ></ic-input-validation>\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 {\n IcAriaLive,\n IcInformationStatusOrEmpty,\n IcSizes,\n IcThemeMode,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-checkbox-group.types\";\n\nconst CHECKBOX_SELECTOR = \"ic-checkbox\";\n\n/*\n @slot helper-text - Content is set as the helper text for the checkbox group.\n * @slot label - Content is placed as the label text.\n /\n@Component({\n tag: \"ic-checkbox-group\",\n styleUrl: \"ic-checkbox-group.css\",\n shadow: true,\n})\nexport class CheckboxGroup {\n private checkboxes: HTMLIcCheckboxElement[];\n\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 @Watch(\"disabled\")\n watchDisabledHandler(): void {\n this.checkboxes.forEach((checkbox) => {\n checkbox.disabled = this.disabled;\n });\n removeDisabledFalse(this.disabled, this.el);\n }\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(CHECKBOX_SELECTOR)).forEach(\n (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 /\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 = \"medium\";\n @Watch(\"size\")\n watchSizeHandler(): void {\n this.checkboxes.forEach((checkbox) => {\n checkbox.size = this.size;\n });\n }\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 @Watch(\"theme\")\n watchThemeHandler(newValue: IcThemeMode): void {\n Array.from(this.el.querySelectorAll(CHECKBOX_SELECTOR)).forEach(\n (checkbox) => {\n checkbox.theme = newValue;\n }\n );\n }\n\n /\n The value of the `aria-live` attribute on the validation message.\n /\n @Prop() validationAriaLive: IcAriaLive = \"polite\";\n\n /\n The validation status - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n /\n The text to display as the validation message.\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 this.setCheckboxProps();\n removeDisabledFalse(this.disabled, this.el);\n this.watchThemeHandler(this.theme);\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(CHECKBOX_SELECTOR)\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 private setCheckboxProps = () => {\n this.checkboxes = Array.from(this.el.querySelectorAll(CHECKBOX_SELECTOR));\n\n this.checkboxes.forEach((checkbox) => {\n if (!checkbox.disabled) {\n checkbox.disabled = this.disabled;\n }\n if (!checkbox.size) {\n checkbox.size = this.size;\n }\n });\n };\n\n render() {\n const {\n disabled,\n helperText,\n hideLabel,\n label,\n name,\n required,\n size,\n theme,\n validationAriaLive,\n validationStatus,\n validationText,\n } = this;\n\n const describedBy = getInputDescribedByText(\n this.el,\n name,\n helperText !== \"\",\n validationStatus !== \"\"\n );\n\n const renderSRText = validationStatus === \"error\" \|\| required \|\| hideLabel;\n\n const showValidation = hasValidationStatus(validationStatus, disabled);\n\n return (\n <Host\n class={{\n \"ic-checkbox-group-disabled\": !!disabled,\n [`ic-checkbox-group-${size}`]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n {renderSRText && (\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 renderSRText ? \"screenReaderOnlyText\" : \"\"\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 useLabelTag={false}\n >\n <slot name=\"label\" slot=\"label\"></slot>\n <slot name=\"helper-text\" slot=\"helper-text\"></slot>\n </ic-input-label>\n </legend>\n )}\n <div class=\"checkboxes-container\">\n <slot></slot>\n </div>\n </fieldset>\n <ic-input-validation\n class={{\n \"show-validation\": showValidation,\n }}\n for={name}\n ariaLiveMode={validationAriaLive}\n status={showValidation ? validationStatus : \"\"}\n message={showValidation ? validationText : \"\"}\n ></ic-input-validation>\n </Host>\n );\n }\n}\n"]}

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

@@ -15,6 +15,7 @@ const defaultArgs = {
   hideGroupLabel: false,
   indeterminate: false,
   label: "Checkbox label",
+  name: "checkbox-group",
   nativeIndeterminateBehaviour: false,
   required: false,
   size: "medium",
@@ -368,6 +369,39 @@ export const HelperText = {
   name: "Helper text",
 };
+export const SlottedGroupLabel = {
+  render: () => html`
+    <ic-checkbox-group
+      label="Coffee extras"
+      name="group1"
+      helper-text="Helper text provided by prop"
+    >
+      <ic-checkbox value="valueName1" label="Sugar"></ic-checkbox>
+      <ic-checkbox value="valueName2" label="Milk" checked></ic-checkbox>
+      <ic-checkbox value="valueName3" label="salt" Disabled></ic-checkbox>
+    </ic-checkbox-group>
+    <br />
+    <ic-checkbox-group label="More coffee extras" name="group2">
+      <ic-typography variant="caption" slot="label">
+        <span>
+          Slotted label with a
+          <ic-link href="#">helpful link to guidance</ic-link> and language tag
+          example <span lang="fr">exemple de texte en français</span>
+        </span>
+      </ic-typography>
+      <ic-checkbox value="valueName1" label="Shortbread"></ic-checkbox>
+      <ic-checkbox value="valueName2" label="Scone" checked></ic-checkbox>
+      <ic-checkbox
+        value="valueName3"
+        label="Ham Sandwich"
+        Disabled
+      ></ic-checkbox>
+    </ic-checkbox-group>
+  `,
+  name: "Slotted group label",
+};
 export const Validation = {
   render: () => html`
     <ic-checkbox-group
@@ -861,6 +895,7 @@ export const Playground = {
       size=${args.size}
       helper-text=${args.helperText}
       hide-label=${args.hideGroupLabel}
+      name=${args.name}
       required=${args.required}
       validation-aria-live=${args.validationAriaLive}
       validation-status=${args.validationStatus === "no status"

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

@@ -487,16 +487,29 @@ video {
 }
 .chip.small {
-  padding: var(--ic-space-1px) var(--ic-space-xxxs);
+  padding: var(--ic-space-xxxs) var(--ic-space-xs);
   border-radius: calc(var(--ic-space-md) - var(--ic-space-xxxs));
 }
+.chip.medium {
+  padding: calc(var(--ic-space-xxs) - var(--ic-space-1px)) var(--ic-space-xs);
+  border-radius: var(--ic-space-md);
+}
 .chip.large {
   padding: calc(var(--ic-space-xs) - var(--ic-space-1px)) var(--ic-space-xs);
   border-radius: calc(var(--ic-space-md) + var(--ic-space-xxs));
 }
-.label {
+.label.small {
+  padding: 0 var(--ic-space-xxs);
+}
+.label.medium {
+  padding: 0 calc(var(--ic-space-xs) - var(--ic-space-xxxs));
+}
+.label.large {
   padding: 0 var(--ic-space-xs);
 }
@@ -596,7 +609,6 @@ ic-tooltip:focus-within {
 .icon,
 ic-tooltip {
-  width: var(--ic-space-lg);
   height: var(--ic-space-lg);
 }

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

@@ -109,7 +109,11 @@ export class Chip {
                 hovered,
                 "non-transparent": variant === "outlined" && !transparentBackground,
                 "full-width": fullWidth,
-            } }, isSlotUsed(this.el, "icon") && (h("div", { key: '3d12f1e7c932cd91f0835f3fe7c76ec6784bc44f', class: "icon" }, h("slot", { key: '5307ba63af7c7342cf32072ccebf02788265e0f5', name: "icon" }))), h("ic-typography", { key: '71a528ad758c4a09dbe1bfa879f4ca0b4a9177b7', variant: "label", "apply-vertical-margins": false, class: { label: true, "in-ag-grid": isElInAGGrid(this.el) } }, h("span", { key: '85e3af35df8a3f2243bc0b36130a6238b6c6200d' }, label)), dismissible && (h("ic-tooltip", { key: '6d68a771210b186192f7f4486d578a1cb706dda9', label: dismissLabel, target: "dismiss-icon", class: { "tooltip-disabled": disabled } }, h("button", { key: '24917885cac2c78593cb721ce14254c20de85905', id: "dismiss-icon", class: "dismiss-icon", ref: (el) => (this.buttonEl = el), "aria-label": `${dismissLabel} ${ariaLabel}`, disabled: disabled, tabindex: disabled ? -1 : 0, onClick: this.dismissAction, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler, innerHTML: dismissIcon }))), isSlotUsed(this.el, "badge") && h("slot", { key: '4a2bf278717384d8d7a1c830788520a385feb638', name: "badge" }))), dismissible && (h("div", { key: '55bd826c4bd73c42d24a7a1aa1cdc52fd3a00d59', class: "sr-only", "aria-live": "polite" }, !visible ? `Dismissed ${ariaLabel}` : ""))));
+            } }, isSlotUsed(this.el, "icon") && (h("div", { key: '3d12f1e7c932cd91f0835f3fe7c76ec6784bc44f', class: "icon" }, h("slot", { key: '5307ba63af7c7342cf32072ccebf02788265e0f5', name: "icon" }))), h("ic-typography", { key: 'e30c971835f38594a238e36d849fd1625aeb4e38', variant: "label", "apply-vertical-margins": false, class: {
+                label: true,
+                [`${size}`]: true,
+                "in-ag-grid": isElInAGGrid(this.el),
+            } }, h("span", { key: '40f476a368fbb16cee45b53c7de24d85b94a21a7' }, label)), dismissible && (h("ic-tooltip", { key: 'd8ff86e2c616f8233104b364bb8f698473c3448a', label: dismissLabel, target: "dismiss-icon", class: { "tooltip-disabled": disabled } }, h("button", { key: '290db0fd020cc7114403e9c6145c1cc454537476', id: "dismiss-icon", class: "dismiss-icon", ref: (el) => (this.buttonEl = el), "aria-label": `${dismissLabel} ${ariaLabel}`, disabled: disabled, tabindex: disabled ? -1 : 0, onClick: this.dismissAction, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler, innerHTML: dismissIcon }))), isSlotUsed(this.el, "badge") && h("slot", { key: 'd4f25acf6b19a63c9683d6aac41a04319cbea203', name: "badge" }))), dismissible && (h("div", { key: '6f5d1ad6395e82d3ec7cd588aa3944922e7a13de', class: "sr-only", "aria-live": "polite" }, !visible ? `Dismissed ${ariaLabel}` : ""))));
     }
     static get is() { return "ic-chip"; }
     static get encapsulation() { return "shadow"; }

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":"AAAA,OAAO,EACL,SAAS,EACT,CAAC,EACD,IAAI,EACJ,KAAK,EACL,MAAM,EACN,KAAK,EAEL,OAAO,EACP,MAAM,EACN,KAAK,EACL,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,gCAAgC,EAChC,UAAU,EACV,mBAAmB,EACnB,aAAa,EACb,YAAY,EACZ,4BAA4B,EAC5B,uBAAuB,GACxB,MAAM,qBAAqB,CAAC;AAQ7B,OAAO,WAAW,MAAM,+BAA+B,CAAC;AAExD;;;GAGG;AAQH,MAAM,OAAO,IAAI;IAPjB;QAaW,oBAAe,GAAsC,IAAI,CAAC;QAC1D,YAAO,GAAG,KAAK,CAAC;QAChB,YAAO,GAAG,IAAI,CAAC;QAyBxB;;WAEG;QACK,aAAQ,GAAG,KAAK,CAAC;QAMzB;;WAEG;QACK,gBAAW,GAAG,KAAK,CAAC;QAE5B;;WAEG;QACK,iBAAY,GAAG,SAAS,CAAC;QAEjC;;;WAGG;QACK,cAAS,GAAG,KAAK,CAAC;QAO1B;;WAEG;QACK,SAAI,GAAY,QAAQ,CAAC;QACjC;;;WAGG;QACK,UAAK,GAAgB,SAAS,CAAC;QAEvC;;WAEG;QACK,0BAAqB,GAAG,IAAI,CAAC;QAErC;;WAEG;QACK,YAAO,GAAmB,QAAQ,CAAC;QA2CnC,kBAAa,GAAG,GAAG,EAAE;YAC3B,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;QACxB,CAAC,CAAC;QAEM,sBAAiB,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,CAAC,CAAC;QAEM,sBAAiB,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACvB,CAAC,CAAC;KAuFH;IA7MC,kBAAkB;QAChB,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,IAAI,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACtE,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;YAC5B,OAAO;QACT,CAAC;QAED,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,CAAC;QACjC,IAAI,CAAC,eAAe,GAAG,4BAA4B,CACjD,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CACrC,CAAC;QACF,IAAI,CAAC,EAAE,CAAC,YAAY,CAClB,OAAO,EACP,6BAA6B,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CACrD,CAAC;IACJ,CAAC;IAOD,oBAAoB;QAClB,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;IAC9C,CAAC;IAgDD,oBAAoB;;QAClB,MAAA,IAAI,CAAC,oBAAoB,0CAAE,UAAU,EAAE,CAAC;IAC1C,CAAC;IAED,iBAAiB;QACf,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;QAC5C,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAED,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,MAAM,CACP,CAAC;QAEF,IAAI,CAAC,oBAAoB,GAAG,IAAI,gBAAgB,CAAC,CAAC,YAAY,EAAE,EAAE,CAChE,uBAAuB,CAAC,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,CAC/D,CAAC;QACF,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;YACzC,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC;IACL,CAAC;IAGD,WAAW;QACT,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC/B,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,QAAQ;;QACZ,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,EAAE,CAAC;IACzB,CAAC;IAcD,MAAM;QACJ,MAAM,EACJ,KAAK,EACL,OAAO,EACP,IAAI,EACJ,WAAW,EACX,OAAO,EACP,QAAQ,EACR,OAAO,EACP,KAAK,EACL,eAAe,EACf,YAAY,EACZ,qBAAqB,EACrB,SAAS,GACV,GAAG,IAAI,CAAC;QAET,MAAM,SAAS,GAAG,GAAG,KAAK,OAAO,CAAC;QAElC,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,mBAAmB,EAAE,CAAC,OAAO;gBAC7B,CAAC,YAAY,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,SAAS;gBAC1C,CAAC,WAAW,eAAe,OAAO,CAAC,EACjC,OAAO,KAAK,QAAQ,IAAI,CAAC,CAAC,eAAe;gBAC3C,oBAAoB,EAAE,SAAS;aAChC;YAEA,OAAO,IAAI,CACV,4DACE,KAAK,EAAE;oBACL,IAAI,EAAE,IAAI;oBACV,CAAC,GAAG,OAAO,EAAE,CAAC,EAAE,IAAI;oBACpB,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,IAAI;oBACjB,QAAQ;oBACR,WAAW;oBACX,OAAO;oBACP,iBAAiB,EACf,OAAO,KAAK,UAAU,IAAI,CAAC,qBAAqB;oBAClD,YAAY,EAAE,SAAS;iBACxB;gBAEA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,IAAI,CAC9B,4DAAK,KAAK,EAAC,MAAM;oBACf,6DAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACP;gBACD,sEACE,OAAO,EAAC,OAAO,4BACS,KAAK,EAC7B,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;oBAE3D,+DAAO,KAAK,CAAQ,CACN;gBACf,WAAW,IAAI,CACd,mEACE,KAAK,EAAE,YAAY,EACnB,MAAM,EAAC,cAAc,EACrB,KAAK,EAAE,EAAE,kBAAkB,EAAE,QAAQ,EAAE;oBAEvC,+DACE,EAAE,EAAC,cAAc,EACjB,KAAK,EAAC,cAAc,EACpB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,gBACrB,GAAG,YAAY,IAAI,SAAS,EAAE,EAC1C,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC3B,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,YAAY,EAAE,IAAI,CAAC,iBAAiB,EACpC,YAAY,EAAE,IAAI,CAAC,iBAAiB,EACpC,SAAS,EAAE,WAAW,GACd,CACC,CACd;gBACA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,IAAI,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACvD,CACP;YACA,WAAW,IAAI,CACd,4DAAK,KAAK,EAAC,SAAS,eAAW,QAAQ,IACpC,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CACrC,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n h,\n Prop,\n State,\n Listen,\n Event,\n EventEmitter,\n Element,\n Method,\n Watch,\n Host,\n} from \"@stencil/core\";\nimport {\n onComponentRequiredPropUndefined,\n isSlotUsed,\n removeDisabledFalse,\n convertToRGBA,\n isElInAGGrid,\n getBrandForegroundAppearance,\n renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport {\n IcBrandForegroundNoDefault,\n IcColor,\n IcEmphasisType,\n IcSizes,\n IcThemeMode,\n} 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 private buttonEl?: HTMLButtonElement;\n private hostMutationObserver?: MutationObserver;\n\n @Element() el: HTMLIcChipElement;\n\n @State() foregroundColor: IcBrandForegroundNoDefault \| null = null;\n @State() hovered = false;\n @State() visible = true;\n\n /\n The custom chip colour. This will override the theme colour.\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;\n @Watch(\"customColor\")\n customColorHandler(): void {\n const colorRGBA = this.customColor && convertToRGBA(this.customColor);\n if (!colorRGBA) {\n this.foregroundColor = null;\n return;\n }\n\n const { r, g, b, a } = colorRGBA;\n this.foregroundColor = getBrandForegroundAppearance(\n (r 299 + g * 587 + b * 114) / 1000\n );\n this.el.setAttribute(\n \"style\",\n `--chip-custom-color: rgba(${r}, ${g}, ${b}, ${a});`\n );\n }\n\n /*\n If `true`, the chip will appear disabled.\n /\n @Prop() disabled = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /\n If `true`, the chip will have a close button at the end to dismiss it.\n /\n @Prop() dismissible = false;\n\n /\n The text in the dismiss button tooltip and aria label. Makes the user aware of the action resulting from clicking the 'Dismiss chip' button.\n /\n @Prop() dismissLabel = \"Dismiss\";\n\n /\n Specify whether the chip fills the full width of the container.\n * If `true`, this overrides the --input-width CSS variable.\n /\n @Prop() fullWidth = 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 = \"medium\";\n /\n Sets the chip to the dark or light theme colors. \"inherit\" will set the color based on the system settings or ic-theme component.\n * Setting the \"customColor\" prop will override this.\n /\n @Prop() theme: IcThemeMode = \"inherit\";\n\n /\n If `true`, the outlined variant of chip will have a transparent background rather than the theme defined color.\n /\n @Prop() transparentBackground = true;\n\n /\n The emphasis of the chip.\n /\n @Prop() variant: IcEmphasisType = \"filled\";\n\n /\n Is emitted when the user dismisses the chip.\n /\n @Event() icDismiss: EventEmitter<void>;\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n this.customColorHandler();\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Chip\"\n );\n\n this.hostMutationObserver = new MutationObserver((mutationList) =>\n renderDynamicChildSlots(mutationList, [\"icon\", \"badge\"], this)\n );\n this.hostMutationObserver.observe(this.el, {\n childList: true,\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.buttonEl?.focus();\n }\n\n private dismissAction = () => {\n this.icDismiss.emit();\n };\n\n private mouseEnterHandler = () => {\n this.hovered = true;\n };\n\n private mouseLeaveHandler = () => {\n this.hovered = false;\n };\n\n render() {\n const {\n label,\n variant,\n size,\n dismissible,\n visible,\n disabled,\n hovered,\n theme,\n foregroundColor,\n dismissLabel,\n transparentBackground,\n fullWidth,\n } = this;\n\n const ariaLabel = `${label} chip`;\n\n return (\n <Host\n class={{\n \"ic-chip-dismissed\": !visible,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n [`ic-chip-${foregroundColor}-text`]:\n variant === \"filled\" && !!foregroundColor,\n \"ic-chip-full-width\": fullWidth,\n }}\n >\n {visible && (\n <div\n class={{\n chip: true,\n [`${variant}`]: true,\n [`${size}`]: true,\n disabled,\n dismissible,\n hovered,\n \"non-transparent\":\n variant === \"outlined\" && !transparentBackground,\n \"full-width\": fullWidth,\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: true, \"in-ag-grid\": isElInAGGrid(this.el) }}\n >\n <span>{label}</span>\n </ic-typography>\n {dismissible && (\n <ic-tooltip\n label={dismissLabel}\n target=\"dismiss-icon\"\n class={{ \"tooltip-disabled\": disabled }}\n >\n <button\n id=\"dismiss-icon\"\n class=\"dismiss-icon\"\n ref={(el) => (this.buttonEl = el)}\n aria-label={`${dismissLabel} ${ariaLabel}`}\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 {dismissible && (\n <div class=\"sr-only\" aria-live=\"polite\">\n {!visible ? `Dismissed ${ariaLabel}` : \"\"}\n </div>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-chip.js","sourceRoot":"","sources":["../../../src/components/ic-chip/ic-chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,CAAC,EACD,IAAI,EACJ,KAAK,EACL,MAAM,EACN,KAAK,EAEL,OAAO,EACP,MAAM,EACN,KAAK,EACL,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,gCAAgC,EAChC,UAAU,EACV,mBAAmB,EACnB,aAAa,EACb,YAAY,EACZ,4BAA4B,EAC5B,uBAAuB,GACxB,MAAM,qBAAqB,CAAC;AAQ7B,OAAO,WAAW,MAAM,+BAA+B,CAAC;AAExD;;;GAGG;AAQH,MAAM,OAAO,IAAI;IAPjB;QAaW,oBAAe,GAAsC,IAAI,CAAC;QAC1D,YAAO,GAAG,KAAK,CAAC;QAChB,YAAO,GAAG,IAAI,CAAC;QAyBxB;;WAEG;QACK,aAAQ,GAAG,KAAK,CAAC;QAMzB;;WAEG;QACK,gBAAW,GAAG,KAAK,CAAC;QAE5B;;WAEG;QACK,iBAAY,GAAG,SAAS,CAAC;QAEjC;;;WAGG;QACK,cAAS,GAAG,KAAK,CAAC;QAO1B;;WAEG;QACK,SAAI,GAAY,QAAQ,CAAC;QACjC;;;WAGG;QACK,UAAK,GAAgB,SAAS,CAAC;QAEvC;;WAEG;QACK,0BAAqB,GAAG,IAAI,CAAC;QAErC;;WAEG;QACK,YAAO,GAAmB,QAAQ,CAAC;QA2CnC,kBAAa,GAAG,GAAG,EAAE;YAC3B,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;QACxB,CAAC,CAAC;QAEM,sBAAiB,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,CAAC,CAAC;QAEM,sBAAiB,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACvB,CAAC,CAAC;KA2FH;IAjNC,kBAAkB;QAChB,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,IAAI,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACtE,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;YAC5B,OAAO;QACT,CAAC;QAED,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,CAAC;QACjC,IAAI,CAAC,eAAe,GAAG,4BAA4B,CACjD,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CACrC,CAAC;QACF,IAAI,CAAC,EAAE,CAAC,YAAY,CAClB,OAAO,EACP,6BAA6B,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CACrD,CAAC;IACJ,CAAC;IAOD,oBAAoB;QAClB,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;IAC9C,CAAC;IAgDD,oBAAoB;;QAClB,MAAA,IAAI,CAAC,oBAAoB,0CAAE,UAAU,EAAE,CAAC;IAC1C,CAAC;IAED,iBAAiB;QACf,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;QAC5C,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAED,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,MAAM,CACP,CAAC;QAEF,IAAI,CAAC,oBAAoB,GAAG,IAAI,gBAAgB,CAAC,CAAC,YAAY,EAAE,EAAE,CAChE,uBAAuB,CAAC,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,CAC/D,CAAC;QACF,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;YACzC,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC;IACL,CAAC;IAGD,WAAW;QACT,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC/B,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,QAAQ;;QACZ,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,EAAE,CAAC;IACzB,CAAC;IAcD,MAAM;QACJ,MAAM,EACJ,KAAK,EACL,OAAO,EACP,IAAI,EACJ,WAAW,EACX,OAAO,EACP,QAAQ,EACR,OAAO,EACP,KAAK,EACL,eAAe,EACf,YAAY,EACZ,qBAAqB,EACrB,SAAS,GACV,GAAG,IAAI,CAAC;QAET,MAAM,SAAS,GAAG,GAAG,KAAK,OAAO,CAAC;QAElC,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,mBAAmB,EAAE,CAAC,OAAO;gBAC7B,CAAC,YAAY,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,SAAS;gBAC1C,CAAC,WAAW,eAAe,OAAO,CAAC,EACjC,OAAO,KAAK,QAAQ,IAAI,CAAC,CAAC,eAAe;gBAC3C,oBAAoB,EAAE,SAAS;aAChC;YAEA,OAAO,IAAI,CACV,4DACE,KAAK,EAAE;oBACL,IAAI,EAAE,IAAI;oBACV,CAAC,GAAG,OAAO,EAAE,CAAC,EAAE,IAAI;oBACpB,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,IAAI;oBACjB,QAAQ;oBACR,WAAW;oBACX,OAAO;oBACP,iBAAiB,EACf,OAAO,KAAK,UAAU,IAAI,CAAC,qBAAqB;oBAClD,YAAY,EAAE,SAAS;iBACxB;gBAEA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,IAAI,CAC9B,4DAAK,KAAK,EAAC,MAAM;oBACf,6DAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACP;gBACD,sEACE,OAAO,EAAC,OAAO,4BACS,KAAK,EAC7B,KAAK,EAAE;wBACL,KAAK,EAAE,IAAI;wBACX,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,IAAI;wBACjB,YAAY,EAAE,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC;qBACpC;oBAED,+DAAO,KAAK,CAAQ,CACN;gBACf,WAAW,IAAI,CACd,mEACE,KAAK,EAAE,YAAY,EACnB,MAAM,EAAC,cAAc,EACrB,KAAK,EAAE,EAAE,kBAAkB,EAAE,QAAQ,EAAE;oBAEvC,+DACE,EAAE,EAAC,cAAc,EACjB,KAAK,EAAC,cAAc,EACpB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,gBACrB,GAAG,YAAY,IAAI,SAAS,EAAE,EAC1C,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC3B,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,YAAY,EAAE,IAAI,CAAC,iBAAiB,EACpC,YAAY,EAAE,IAAI,CAAC,iBAAiB,EACpC,SAAS,EAAE,WAAW,GACd,CACC,CACd;gBACA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,IAAI,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACvD,CACP;YACA,WAAW,IAAI,CACd,4DAAK,KAAK,EAAC,SAAS,eAAW,QAAQ,IACpC,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CACrC,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n h,\n Prop,\n State,\n Listen,\n Event,\n EventEmitter,\n Element,\n Method,\n Watch,\n Host,\n} from \"@stencil/core\";\nimport {\n onComponentRequiredPropUndefined,\n isSlotUsed,\n removeDisabledFalse,\n convertToRGBA,\n isElInAGGrid,\n getBrandForegroundAppearance,\n renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport {\n IcBrandForegroundNoDefault,\n IcColor,\n IcEmphasisType,\n IcSizes,\n IcThemeMode,\n} 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 private buttonEl?: HTMLButtonElement;\n private hostMutationObserver?: MutationObserver;\n\n @Element() el: HTMLIcChipElement;\n\n @State() foregroundColor: IcBrandForegroundNoDefault \| null = null;\n @State() hovered = false;\n @State() visible = true;\n\n /\n The custom chip colour. This will override the theme colour.\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;\n @Watch(\"customColor\")\n customColorHandler(): void {\n const colorRGBA = this.customColor && convertToRGBA(this.customColor);\n if (!colorRGBA) {\n this.foregroundColor = null;\n return;\n }\n\n const { r, g, b, a } = colorRGBA;\n this.foregroundColor = getBrandForegroundAppearance(\n (r 299 + g * 587 + b * 114) / 1000\n );\n this.el.setAttribute(\n \"style\",\n `--chip-custom-color: rgba(${r}, ${g}, ${b}, ${a});`\n );\n }\n\n /*\n If `true`, the chip will appear disabled.\n /\n @Prop() disabled = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /\n If `true`, the chip will have a close button at the end to dismiss it.\n /\n @Prop() dismissible = false;\n\n /\n The text in the dismiss button tooltip and aria label. Makes the user aware of the action resulting from clicking the 'Dismiss chip' button.\n /\n @Prop() dismissLabel = \"Dismiss\";\n\n /\n Specify whether the chip fills the full width of the container.\n * If `true`, this overrides the --input-width CSS variable.\n /\n @Prop() fullWidth = 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 = \"medium\";\n /\n Sets the chip to the dark or light theme colors. \"inherit\" will set the color based on the system settings or ic-theme component.\n * Setting the \"customColor\" prop will override this.\n /\n @Prop() theme: IcThemeMode = \"inherit\";\n\n /\n If `true`, the outlined variant of chip will have a transparent background rather than the theme defined color.\n /\n @Prop() transparentBackground = true;\n\n /\n The emphasis of the chip.\n /\n @Prop() variant: IcEmphasisType = \"filled\";\n\n /\n Is emitted when the user dismisses the chip.\n /\n @Event() icDismiss: EventEmitter<void>;\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n this.customColorHandler();\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Chip\"\n );\n\n this.hostMutationObserver = new MutationObserver((mutationList) =>\n renderDynamicChildSlots(mutationList, [\"icon\", \"badge\"], this)\n );\n this.hostMutationObserver.observe(this.el, {\n childList: true,\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.buttonEl?.focus();\n }\n\n private dismissAction = () => {\n this.icDismiss.emit();\n };\n\n private mouseEnterHandler = () => {\n this.hovered = true;\n };\n\n private mouseLeaveHandler = () => {\n this.hovered = false;\n };\n\n render() {\n const {\n label,\n variant,\n size,\n dismissible,\n visible,\n disabled,\n hovered,\n theme,\n foregroundColor,\n dismissLabel,\n transparentBackground,\n fullWidth,\n } = this;\n\n const ariaLabel = `${label} chip`;\n\n return (\n <Host\n class={{\n \"ic-chip-dismissed\": !visible,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n [`ic-chip-${foregroundColor}-text`]:\n variant === \"filled\" && !!foregroundColor,\n \"ic-chip-full-width\": fullWidth,\n }}\n >\n {visible && (\n <div\n class={{\n chip: true,\n [`${variant}`]: true,\n [`${size}`]: true,\n disabled,\n dismissible,\n hovered,\n \"non-transparent\":\n variant === \"outlined\" && !transparentBackground,\n \"full-width\": fullWidth,\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={{\n label: true,\n [`${size}`]: true,\n \"in-ag-grid\": isElInAGGrid(this.el),\n }}\n >\n <span>{label}</span>\n </ic-typography>\n {dismissible && (\n <ic-tooltip\n label={dismissLabel}\n target=\"dismiss-icon\"\n class={{ \"tooltip-disabled\": disabled }}\n >\n <button\n id=\"dismiss-icon\"\n class=\"dismiss-icon\"\n ref={(el) => (this.buttonEl = el)}\n aria-label={`${dismissLabel} ${ariaLabel}`}\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 {dismissible && (\n <div class=\"sr-only\" aria-live=\"polite\">\n {!visible ? `Dismissed ${ariaLabel}` : \"\"}\n </div>\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-classification-banner/ic-classification-banner.js CHANGED Viewed

@@ -20,6 +20,10 @@ export class ClassificationBanner {
          * The optional text that will be displayed before classification to specify relevant country/countries.
          */
         this.country = "uk";
+        /**
+         * The custom text that will appear on the banner. If set, the `additionalSelectors`, `country` and `upTo` props are ignored.
+         */
+        this.customClassificationText = "";
         /**
          * If `true`, the banner will appear inline with the page, instead of sticking to the bottom of the page.
          */
@@ -32,7 +36,7 @@ export class ClassificationBanner {
     render() {
         const { inline, upTo } = this;
         // In case of unrecognized props, fallback to default
-        let { country, additionalSelectors, classification } = this;
+        let { country, additionalSelectors, classification, customClassificationText, } = this;
         if (!country)
             country = "";
         if (!additionalSelectors)
@@ -40,12 +44,16 @@ export class ClassificationBanner {
         if (!classification ||
             (classification && !classificationText[classification]))
             classification = "default";
-        return (h(Host, { key: '4d06c781318ef854931702315e73054f65b85259', class: { ["ic-classification-banner-inline"]: !!inline } }, h("banner", { key: '251f6ced1270c823b1be9e39375139756adcd3e2', "aria-label": "Protective marking", class: {
+        if (!customClassificationText)
+            customClassificationText = "";
+        return (h(Host, { key: 'dbf7b4fe92229fd32723c06070338a3611939bd5', class: { ["ic-classification-banner-inline"]: !!inline } }, h("banner", { key: '23e95a6a2ca33447e1b64cda93690cf6781bd14f', "aria-label": "Protective marking", class: {
                 ["classification-banner"]: true,
                 [`${classification}`]: classification,
-            } }, classification !== "default" ? (h("span", { class: "offscreen" }, "The protective marking of this page is:", " ")) : null, h("ic-typography", { key: '3fd3a609c017ed0b5b24296464bae43dcf8cba67', variant: "caption-uppercase" }, classification === "default"
-            ? classificationText[classification]
-            : `${upTo ? "up to" : ""}
+            } }, classification !== "default" ? (h("span", { class: "offscreen" }, "The protective marking of this page is:", " ")) : null, h("ic-typography", { key: 'ff41a45d594eeeffe2f078b3ae3a99792a6f38c3', variant: "caption-uppercase" }, customClassificationText !== ""
+            ? customClassificationText
+            : classification === "default"
+                ? classificationText[classification]
+                : `${upTo ? "up to" : ""}
                ${country}
                ${classificationText[classification]}
                ${additionalSelectors}`))));
@@ -130,6 +138,26 @@ export class ClassificationBanner {
                 "reflect": false,
                 "defaultValue": "\"uk\""
             },
+            "customClassificationText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The custom text that will appear on the banner. If set, the `additionalSelectors`, `country` and `upTo` props are ignored."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "custom-classification-text",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
             "inline": {
                 "type": "boolean",
                 "mutable": false,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-classification-banner.js","sourceRoot":"","sources":["../../../src/components/ic-classification-banner/ic-classification-banner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD,MAAM,kBAAkB,GAAG;IACzB,OAAO,EAAE,4BAA4B;IACrC,QAAQ,EAAE,UAAU;IACpB,oBAAoB,EAAE,oBAAoB;IAC1C,MAAM,EAAE,QAAQ;IAChB,YAAY,EAAE,YAAY;CAC3B,CAAC;AAOF,MAAM,OAAO,oBAAoB;IALjC;QAME;;WAEG;QACK,wBAAmB,GAAY,EAAE,CAAC;QAC1C;;WAEG;QACK,mBAAc,GAA0B,SAAS,CAAC;QAC1D;;WAEG;QACK,YAAO,GAAY,IAAI,CAAC;QAChC;;WAEG;QACK,WAAM,GAAa,KAAK,CAAC;QACjC;;WAEG;QACK,SAAI,GAAa,KAAK,CAAC;~~KAyChC~~;~~IAvCC~~,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QAE9B,qDAAqD;QACrD,IAAI,~~EAAE~~,OAAO,~~EAAE~~,mBAAmB,~~EAAE~~,cAAc,~~EAAE~~,GAAG,IAAI,CAAC;~~QAC5D~~,IAAI,CAAC,OAAO;YAAE,OAAO,GAAG,EAAE,CAAC;QAC3B,IAAI,CAAC,mBAAmB;YAAE,mBAAmB,GAAG,EAAE,CAAC;QACnD,IACE,CAAC,cAAc;YACf,CAAC,cAAc,IAAI,CAAC,kBAAkB,CAAC,cAAc,CAAC,CAAC;YAEvD,cAAc,GAAG,SAAS,CAAC;~~QAE7B~~,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,CAAC,iCAAiC,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE;YAC5D,6EACa,oBAAoB,EAC/B,KAAK,EAAE;oBACL,CAAC,uBAAuB,CAAC,EAAE,IAAI;oBAC/B,CAAC,GAAG,cAAc,EAAE,CAAC,EAAE,cAAc;iBACtC;gBAEA,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,CAC9B,YAAM,KAAK,EAAC,WAAW;;oBACmB,GAAG,CACtC,CACR,CAAC,CAAC,CAAC,IAAI;gBACR,sEAAe,OAAO,EAAC,mBAAmB,IACvC,cAAc,KAAK,SAAS;~~oBAC3B~~,CAAC,CAAC,kBAAkB,CAAC,cAAc,CAAC;~~oBACpC~~,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;iBACrB,OAAO;iBACP,kBAAkB,CAAC,cAAc,CAAC;iBAClC,mBAAmB,EAAE,CACZ,CACT,CACJ,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, Prop, h, Host } from \"@stencil/core\";\nimport { IcProtectiveMarkings } from \"./ic-classification-banner.types\";\n\nconst classificationText = {\n default: \"protective marking not set\",\n official: \"official\",\n \"official-sensitive\": \"official-sensitive\",\n secret: \"secret\",\n \"top-secret\": \"top secret\",\n};\n\n@Component({\n tag: \"ic-classification-banner\",\n styleUrl: \"ic-classification-banner.css\",\n shadow: true,\n})\nexport class ClassificationBanner {\n /*\n The additional information that will be displayed after the classification.\n /\n @Prop() additionalSelectors?: string = \"\";\n /\n The classification level to be displayed - also determines the banner and text colour.\n /\n @Prop() classification?: IcProtectiveMarkings = \"default\";\n /\n The optional text that will be displayed before classification to specify relevant country/countries.\n /\n @Prop() country?: string = \"uk\";\n /\n If `true`, the banner will appear inline with the page, instead of sticking to the bottom of the page.\n /\n @Prop() inline?: boolean = false;\n /\n If `true`, \"Up to\" will be displayed before the classification and country.\n */\n @Prop() upTo?: boolean = false;\n\n render() {\n const { inline, upTo } = this;\n\n // In case of unrecognized props, fallback to default\n let { country, additionalSelectors, classification } = this;\n if (!country) country = \"\";\n if (!additionalSelectors) additionalSelectors = \"\";\n if (\n !classification \|\|\n (classification && !classificationText[classification])\n )\n classification = \"default\";\n\n return (\n <Host class={{ [\"ic-classification-banner-inline\"]: !!inline }}>\n <banner\n aria-label=\"Protective marking\"\n class={{\n [\"classification-banner\"]: true,\n [`${classification}`]: classification,\n }}\n >\n {classification !== \"default\" ? (\n <span class=\"offscreen\">\n The protective marking of this page is:{\" \"}\n </span>\n ) : null}\n <ic-typography variant=\"caption-uppercase\">\n {classification === \"default\"\n ? classificationText[classification]\n : `${upTo ? \"up to\" : \"\"} \n ${country} \n ${classificationText[classification]} \n ${additionalSelectors}`}\n </ic-typography>\n </banner>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-classification-banner.js","sourceRoot":"","sources":["../../../src/components/ic-classification-banner/ic-classification-banner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD,MAAM,kBAAkB,GAAG;IACzB,OAAO,EAAE,4BAA4B;IACrC,QAAQ,EAAE,UAAU;IACpB,oBAAoB,EAAE,oBAAoB;IAC1C,MAAM,EAAE,QAAQ;IAChB,YAAY,EAAE,YAAY;CAC3B,CAAC;AAOF,MAAM,OAAO,oBAAoB;IALjC;QAME;;WAEG;QACK,wBAAmB,GAAY,EAAE,CAAC;QAC1C;;WAEG;QACK,mBAAc,GAA0B,SAAS,CAAC;QAC1D;;WAEG;QACK,YAAO,GAAY,IAAI,CAAC;QAChC;;WAEG;QACK,6BAAwB,GAAY,EAAE,CAAC;QAC/C;;WAEG;QACK,WAAM,GAAa,KAAK,CAAC;QACjC;;WAEG;QACK,SAAI,GAAa,KAAK,CAAC;KAiDhC;IA/CC,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QAE9B,qDAAqD;QACrD,IAAI,EACF,OAAO,EACP,mBAAmB,EACnB,cAAc,EACd,wBAAwB,GACzB,GAAG,IAAI,CAAC;QACT,IAAI,CAAC,OAAO;YAAE,OAAO,GAAG,EAAE,CAAC;QAC3B,IAAI,CAAC,mBAAmB;YAAE,mBAAmB,GAAG,EAAE,CAAC;QACnD,IACE,CAAC,cAAc;YACf,CAAC,cAAc,IAAI,CAAC,kBAAkB,CAAC,cAAc,CAAC,CAAC;YAEvD,cAAc,GAAG,SAAS,CAAC;QAC7B,IAAI,CAAC,wBAAwB;YAAE,wBAAwB,GAAG,EAAE,CAAC;QAE7D,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,CAAC,iCAAiC,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE;YAC5D,6EACa,oBAAoB,EAC/B,KAAK,EAAE;oBACL,CAAC,uBAAuB,CAAC,EAAE,IAAI;oBAC/B,CAAC,GAAG,cAAc,EAAE,CAAC,EAAE,cAAc;iBACtC;gBAEA,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,CAC9B,YAAM,KAAK,EAAC,WAAW;;oBACmB,GAAG,CACtC,CACR,CAAC,CAAC,CAAC,IAAI;gBACR,sEAAe,OAAO,EAAC,mBAAmB,IACvC,wBAAwB,KAAK,EAAE;oBAC9B,CAAC,CAAC,wBAAwB;oBAC1B,CAAC,CAAC,cAAc,KAAK,SAAS;wBAC9B,CAAC,CAAC,kBAAkB,CAAC,cAAc,CAAC;wBACpC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;iBACrB,OAAO;iBACP,kBAAkB,CAAC,cAAc,CAAC;iBAClC,mBAAmB,EAAE,CACZ,CACT,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from \"@stencil/core\";\nimport { IcProtectiveMarkings } from \"./ic-classification-banner.types\";\n\nconst classificationText = {\n default: \"protective marking not set\",\n official: \"official\",\n \"official-sensitive\": \"official-sensitive\",\n secret: \"secret\",\n \"top-secret\": \"top secret\",\n};\n\n@Component({\n tag: \"ic-classification-banner\",\n styleUrl: \"ic-classification-banner.css\",\n shadow: true,\n})\nexport class ClassificationBanner {\n /*\n The additional information that will be displayed after the classification.\n /\n @Prop() additionalSelectors?: string = \"\";\n /\n The classification level to be displayed - also determines the banner and text colour.\n /\n @Prop() classification?: IcProtectiveMarkings = \"default\";\n /\n The optional text that will be displayed before classification to specify relevant country/countries.\n /\n @Prop() country?: string = \"uk\";\n /\n The custom text that will appear on the banner. If set, the `additionalSelectors`, `country` and `upTo` props are ignored.\n /\n @Prop() customClassificationText?: string = \"\";\n /\n If `true`, the banner will appear inline with the page, instead of sticking to the bottom of the page.\n /\n @Prop() inline?: boolean = false;\n /\n If `true`, \"Up to\" will be displayed before the classification and country.\n */\n @Prop() upTo?: boolean = false;\n\n render() {\n const { inline, upTo } = this;\n\n // In case of unrecognized props, fallback to default\n let {\n country,\n additionalSelectors,\n classification,\n customClassificationText,\n } = this;\n if (!country) country = \"\";\n if (!additionalSelectors) additionalSelectors = \"\";\n if (\n !classification \|\|\n (classification && !classificationText[classification])\n )\n classification = \"default\";\n if (!customClassificationText) customClassificationText = \"\";\n\n return (\n <Host class={{ [\"ic-classification-banner-inline\"]: !!inline }}>\n <banner\n aria-label=\"Protective marking\"\n class={{\n [\"classification-banner\"]: true,\n [`${classification}`]: classification,\n }}\n >\n {classification !== \"default\" ? (\n <span class=\"offscreen\">\n The protective marking of this page is:{\" \"}\n </span>\n ) : null}\n <ic-typography variant=\"caption-uppercase\">\n {customClassificationText !== \"\"\n ? customClassificationText\n : classification === \"default\"\n ? classificationText[classification]\n : `${upTo ? \"up to\" : \"\"} \n ${country} \n ${classificationText[classification]} \n ${additionalSelectors}`}\n </ic-typography>\n </banner>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-classification-banner/ic-classification-banner.stories.js CHANGED Viewed

@@ -4,6 +4,7 @@ const defaultArgs = {
   additionalSelectors: "",
   classification: "official",
   country: "uk",
+  customClassificationText: "",
   inline: true,
   upTo: false,
 };
@@ -99,6 +100,36 @@ export const AdditionalSelectors = {
   name: "Additional selectors",
 };
+export const CustomClassificationStrings = {
+  render: () =>
+    html`<ic-classification-banner
+        inline="true"
+        custom-classification-text="Custom Unknown classification"
+      ></ic-classification-banner>
+      <ic-classification-banner
+        classification="official"
+        inline="true"
+        custom-classification-text="Custom Official classification"
+      ></ic-classification-banner>
+      <ic-classification-banner
+        classification="official-sensitive"
+        inline="true"
+        custom-classification-text="Custom Official-Sensitive classification"
+      ></ic-classification-banner>
+      <ic-classification-banner
+        classification="secret"
+        inline="true"
+        custom-classification-text="Custom Secret classification"
+      ></ic-classification-banner>
+      <ic-classification-banner
+        classification="top-secret"
+        inline="true"
+        custom-classification-text="Custom Top Secret classification"
+      ></ic-classification-banner>`,
+  name: "Custom Classifications",
+};
 export const Playground = {
   render: (args) =>
     html`<ic-classification-banner
@@ -107,6 +138,7 @@ export const Playground = {
       up-to=${args.upTo}
       country=${args.country}
       additional-selectors=${args.additionalSelectors}
+      custom-classification-text=${args.customClassificationText}
     ></ic-classification-banner>`,
   args: defaultArgs,

package/dist/collection/components/ic-data-list/ic-data-list.js CHANGED Viewed

@@ -19,10 +19,10 @@ export class DataList {
             Array.from(el.children).forEach((child) => child.setAttribute("size", "small"));
         }
         const hasHeading = heading || el.querySelector('[slot="heading"]');
-        return (h(Host, { key: '1c611db796f79fc54af3a89e4b7ed0439e09f8ce', class: {
+        return (h(Host, { key: '57df6c957322ddb4cdda3901c64e919656abf92e', class: {
                 "ic-data-list-small": size === "small",
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("div", { key: '5936cad1baba390f150bb72a2ef5b0ee7eaf5750', class: "heading", id: "data-list-heading" }, h("slot", { key: '2d0080f2848355022ea118f8ef2f78cafb584bf3', name: "heading" }, h("ic-typography", { key: 'dee1629146c3e50998552ae3c814eee17bc196c5', variant: "h3" }, heading))), h("div", { key: 'bb1c6bf91cfcd71205acd3d15b504057d3fd566f', class: { divider: true, "divider-no-heading": !hasHeading } }), h("ul", { key: '838380d006c00c28fb309aef1f57ab3bd8534102', "aria-labelledby": "data-list-heading", class: "rows" }, h("slot", { key: '6f84ce3a6716791113f5288a17c3a9a2416552d9' }))));
+            } }, h("div", { key: '273e0ce2fcde309669514b332964e129d1ef42a6', class: "heading", id: "data-list-heading" }, h("slot", { key: '1be24c7150c268064207cf58f083ab9bd8cb27c7', name: "heading" }, h("ic-typography", { key: '30858cd0d5c66204a030449c5b8212c1c41d1838', variant: "h3" }, heading))), h("div", { key: '2f13fa15abc8053f312ff21454b6a89d15b4eabd', class: { divider: true, "divider-no-heading": !hasHeading } }), h("ul", { key: '582dd8f21ce4e3a9dd845aa46294ebe2c5163d01', "aria-labelledby": "data-list-heading", class: "rows" }, h("slot", { key: '42b137d71f0c9e3f836f1efdde58f62d90b080a4' }))));
     }
     static get is() { return "ic-data-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-data-row/ic-data-row.js CHANGED Viewed

@@ -68,12 +68,12 @@ export class DataRow {
     }
     render() {
         const { el, listSize, hasEndComponent, label, renderCellContent, size, theme, value, } = this;
-        return (h(Host, { key: '720dc55ba7e1000ce6837a15d9d7accc726cc1ff', class: {
+        return (h(Host, { key: 'd5c6ff5a373e32e4e310dd0ddb6bbcfea0f2704a', class: {
                 ["ic-data-row-small"]: size === "small",
                 ["breakpoint-medium"]: listSize === "m",
                 ["breakpoint-xs"]: listSize === "xs",
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, role: "listitem" }, h("div", { key: '28e63fbb09ad16bcc6843a85047635e91006a220', class: "data" }, h("div", { key: '698f607af4b50db1bc837d83df0f46ee9cc4201f', class: "text-cells" }, (isSlotUsed(el, "label") || label) && renderCellContent("label"), (isSlotUsed(el, "value") || value) && renderCellContent("value")), hasEndComponent && (h("div", { key: '1febd59bc77239e0cedcc64953c0a5d2b4bbba6d', class: "end-component" }, h("slot", { key: 'dfa67b2ff598520d1b3f47a1479e4448aa84986f', name: "end-component" })))), h("div", { key: '989733a9cf32e8d452c4c2d4ae24844c7d38ece2', class: "divider" })));
+            }, role: "listitem" }, h("div", { key: 'b2867cd3b8a493ec7e4f4cff48849d94560c1fdc', class: "data" }, h("div", { key: 'd3fd667e4612907b81081ddae99c3228e2dbb954', class: "text-cells" }, (isSlotUsed(el, "label") || label) && renderCellContent("label"), (isSlotUsed(el, "value") || value) && renderCellContent("value")), hasEndComponent && (h("div", { key: 'dbbb33f8a2726f801dc72ca1f11544073ba8bc69', class: "end-component" }, h("slot", { key: 'fd4b247214447bac2a7a5bc9385a8f91cb44436f', name: "end-component" })))), h("div", { key: '8e19fde06b9fa34a3295e37fe726f163593f6674', class: "divider" })));
     }
     static get is() { return "ic-data-row"; }
     static get encapsulation() { return "shadow"; }