npm - @ukic/web-components - Versions diffs - 3.13.0 → 3.15.0 - Mend

@ukic/web-components 3.13.0 → 3.15.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 (510) hide show

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

@@ -32,7 +32,6 @@ export class Button {
         this.mutationObserver = null;
         this.hostMutationObserver = null;
         this.ariaLabel = "";
-        this.describedByContent = "";
         this.title = "";
         /**
          * If `fileUpload` is set to `true`, this is the accepted list of file types.
@@ -133,11 +132,31 @@ export class Button {
             this.icBlur.emit();
         };
         /**
-         * Triggered when text content of sibling element in light DOM changes
+         * Creates/updates clone of aria-describedby element node tree in shadow dom
+         * Required due to ids being scoped to the shadow dom
+         */
+        this.updateAriaDescribedbyClone = () => {
+            var _a, _b;
+            if (this.describedbyNode) {
+                const wrapper = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("#describedby-wrapper");
+                if (!wrapper) {
+                    (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.appendChild(Object.assign(document.createElement("div"), {
+                        id: "describedby-wrapper",
+                        className: "ic-button-describedby",
+                    }));
+                }
+                while (wrapper === null || wrapper === void 0 ? void 0 : wrapper.firstChild)
+                    wrapper.firstChild.remove();
+                wrapper === null || wrapper === void 0 ? void 0 : wrapper.appendChild(this.describedbyNode);
+            }
+        };
+        /**
+         * Triggered when light dom aria-describedby element updates
          */
         this.mutationCallback = () => {
             var _a;
-            this.describedByContent = (_a = this.describedbyEl) === null || _a === void 0 ? void 0 : _a.innerText;
+            if (this.describedbyEl)
+                this.describedbyNode = (_a = this.describedbyEl) === null || _a === void 0 ? void 0 : _a.cloneNode(true);
         };
         /**
          * Triggered when attributes of host element change
@@ -226,6 +245,9 @@ export class Button {
             }
         };
     }
+    watchDescribedbyNodeHandler() {
+        this.updateAriaDescribedbyClone();
+    }
     watchDisabledHandler() {
         removeDisabledFalse(this.disabled, this.el);
     }
@@ -245,8 +267,7 @@ export class Button {
         this.setHasTooltip();
     }
     componentWillLoad() {
-        var _a;
-        const _b = inheritAttributes(this.el, [...IC_INHERITED_ARIA, "title"]), { title, "aria-label": ariaLabel } = _b, restInheritedAttributes = __rest(_b, ["title", "aria-label"]);
+        const _a = inheritAttributes(this.el, [...IC_INHERITED_ARIA, "title"]), { title, "aria-label": ariaLabel } = _a, restInheritedAttributes = __rest(_a, ["title", "aria-label"]);
         this.title = title;
         this.ariaLabel = ariaLabel;
         this.inheritedAttributes = restInheritedAttributes;
@@ -258,10 +279,10 @@ export class Button {
             const describedById = this.inheritedAttributes["aria-describedby"];
             if (describedById) {
                 this.describedById = describedById;
-                const el = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector(`#${describedById}`);
+                const el = document.querySelector(`#${describedById}`);
                 if (el) {
-                    this.describedByContent = el.innerText;
                     this.describedbyEl = el;
+                    this.describedbyNode = el.cloneNode(true);
                 }
             }
         }
@@ -287,6 +308,7 @@ export class Button {
             if (this.hasRouterSlot())
                 this.arrangeRouterItem();
         }
+        this.updateAriaDescribedbyClone();
     }
     componentWillRender() {
         const iconEl = this.getSlottedIcon("left") || this.getSlottedIcon("right");
@@ -342,7 +364,7 @@ export class Button {
         }
     }
     render() {
-        const { ariaControlsId, ariaLabel, ariaOwnsId, buttonIdNum, describedByContent, describedById, disabled, download, dropdown, dropdownExpanded, form, formaction, formenctype, formmethod, formnovalidate, formtarget, fullWidth, handleClick, handleKeyDown, hasTooltip, href, hreflang, id, inheritedAttributes, isIconVariant, loading, monochrome, onBlur, onFocus, referrerpolicy, rel, size, target, theme, title, tooltipFixedPositioning, tooltipPlacement, transparentBackground, type, variant, } = this;
+        const { ariaControlsId, ariaLabel, ariaOwnsId, buttonIdNum, describedById, disabled, download, dropdown, dropdownExpanded, form, formaction, formenctype, formmethod, formnovalidate, formtarget, fullWidth, handleClick, handleKeyDown, hasTooltip, href, hreflang, id, inheritedAttributes, isIconVariant, loading, monochrome, onBlur, onFocus, referrerpolicy, rel, size, target, theme, title, tooltipFixedPositioning, tooltipPlacement, transparentBackground, type, variant, } = this;
         const TagType = href ? "a" : "button";
         const buttonAttrs = TagType === "button"
             ? {
@@ -376,7 +398,7 @@ export class Button {
                 variant !== "destructive" && (h("span", { class: dropdownExpanded
                     ? "dropdown-expanded"
                     : "arrow-dropdown", innerHTML: arrowDropdown }))))));
-        return (h(Host, { key: '1f58739b62e290b1b86fa82c9153e04711196367', class: {
+        return (h(Host, { key: '4e15c7ddb5f7d220f52848c36fc9b26932daeb8e', class: {
                 "ic-button-disabled": disabled && !loading,
                 "ic-button-full-width": fullWidth,
                 "ic-button-loading": loading,
@@ -392,7 +414,7 @@ export class Button {
                 monochrome,
                 "top-icon": isSlotUsed(this.el, "top-icon"),
                 "with-badge": isSlotUsed(this.el, "badge"),
-            }, onClick: handleClick, onKeyDown: handleKeyDown, "aria-owns": ariaOwnsId, "aria-controls": ariaControlsId, "aria-expanded": dropdown && `${dropdownExpanded}` }, hasTooltip && (h("ic-tooltip", { key: 'fa067eeedb2f960436c693a0d8978a46eea9cc68', id: describedby, label: title || ariaLabel, target: buttonId, placement: tooltipPlacement, fixedPositioning: tooltipFixedPositioning, silent: isIconVariant() && !!ariaLabel }, h(ButtonContent, { key: 'a3565789687668d376a8c6e6044a0c3b1e864532' }))), isSlotUsed(this.el, "badge") && h("slot", { key: '1bacc47dfc65cce6880600906512a9262b6773cc', name: "badge" }), !hasTooltip && h(ButtonContent, { key: 'd00dc87862ffc939fc5c8341c686dddbc642eb02' }), describedByContent && (h("span", { key: '1d25a9c513d23e6a23e2e1d81ad036d1df47363c', id: describedby, class: "ic-button-describedby" }, describedByContent))));
+            }, onClick: handleClick, onKeyDown: handleKeyDown, "aria-owns": ariaOwnsId, "aria-controls": ariaControlsId, "aria-expanded": dropdown && `${dropdownExpanded}` }, hasTooltip && (h("ic-tooltip", { key: 'a6b3305c993a950f41b2cc44812a35239b4ef717', id: describedby, label: title || ariaLabel, target: buttonId, placement: tooltipPlacement, fixedPositioning: tooltipFixedPositioning, silent: isIconVariant() && !!ariaLabel }, h(ButtonContent, { key: '146f8c894991641b88313d8947c5ac4e1d204049' }))), isSlotUsed(this.el, "badge") && h("slot", { key: '4aede0d2f30748690130dfba00612b3adc859c10', name: "badge" }), !hasTooltip && h(ButtonContent, { key: 'bf1fd18f9c47ea1199babace3584855499a2776c' })));
     }
     static get is() { return "ic-button"; }
     static get encapsulation() { return "shadow"; }
@@ -1104,7 +1126,7 @@ export class Button {
     static get states() {
         return {
             "ariaLabel": {},
-            "describedByContent": {},
+            "describedbyNode": {},
             "title": {}
         };
     }
@@ -1185,6 +1207,9 @@ export class Button {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "describedbyNode",
+                "methodName": "watchDescribedbyNodeHandler"
+            }, {
                 "propName": "disabled",
                 "methodName": "watchDisabledHandler"
             }, {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-button.js","sourceRoot":"","sources":["../../../src/components/ic-button/ic-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Method,\n Prop,\n State,\n forceUpdate,\n h,\n Watch,\n Fragment,\n} from \"@stencil/core\";\n\nimport {\n getBrandFromContext,\n handleHiddenFormButtonClick,\n inheritAttributes,\n isSlotUsed,\n removeDisabledFalse,\n renderFileHiddenInput,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport { IcButtonTypes, IcButtonVariants } from \"./ic-button.types\";\nimport {\n IcSizes,\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundEnum,\n IcThemeMode,\n IcButtonTooltipPlacement,\n IcIconPlacementOptions,\n} from \"../../utils/types\";\nimport arrowDropdown from \"../../assets/arrow-dropdown.svg\";\n\nlet buttonIds = 0;\n\n/*\n @slot left-icon - Content will be placed to the left of the button label.\n * @slot right-icon - Content will be placed to the right of the button label.\n * @slot top-icon - Content will be placed above the button label.\n * @slot badge - Badge component overlaying the top right of the button.\n * @slot router-item - Handle routing by nesting your routes in this slot. Setting loading to true will have no impact on this slot.\n /\n@Component({\n tag: \"ic-button\",\n styleUrl: \"ic-button.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Button {\n private buttonEl?: HTMLElement;\n private buttonIdNum = buttonIds++;\n private hasTooltip = false;\n private id: string \| null;\n private inheritedAttributes: { [k: string]: string } = {};\n private describedbyEl: HTMLElement \| null = null;\n private describedById?: string;\n private mutationObserver: MutationObserver \| null = null;\n private hostMutationObserver: MutationObserver \| null = null;\n private routerSlot: HTMLElement \| null;\n\n @Element() el: HTMLIcButtonElement;\n\n @State() ariaLabel = \"\";\n @State() describedByContent? = \"\";\n @State() title = \"\";\n\n /\n If `fileUpload` is set to `true`, this is the accepted list of file types.\n /\n @Prop() accept = \"\";\n\n /*\n @internal Used to identify any related child component\n /\n @Prop() ariaControlsId?: string \| boolean;\n\n /\n @internal Used to identify any related child component\n /\n @Prop() ariaOwnsId?: string \| boolean;\n\n /\n If `true`, the button will be in disabled state.\n /\n @Prop() disabled = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /\n If `true`, the ic-tooltip which is shown for icon variant will be disabled. Title or aria-label must be set if this prop is not applied.\n /\n @Prop() disableTooltip = false;\n\n /\n If `true`, the user can save the linked URL instead of navigating to it.\n /\n @Prop() download: string \| boolean = false;\n\n /\n If `true`, the button will show a dropdown icon.\n /\n @Prop() dropdown = false;\n\n /\n If `true`, the aria-expanded value will be set to true. This is only applied if the dropdown prop is also true.\n /\n @Prop({ mutable: true, reflect: true }) dropdownExpanded = false;\n\n /\n If `true`, when the button is clicked the native file explorer will be launched.\n /\n @Prop() fileUpload = false;\n\n /\n The name of the control for the file input, which is submitted with the form data.\n /\n @Prop() fileInputName = `ic-button-file-upload-input-${buttonIds++}`;\n\n /\n The <form> element to associate the button with.\n /\n @Prop() form?: string;\n\n /\n The URL that processes the information submitted by the button. It overrides the action attribute of the button'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 button's form owner.\n /\n @Prop() formtarget?: string;\n\n /\n If `true`, the button will fill the width of the container.\n /\n @Prop() fullWidth = false;\n\n /\n The URL that the link points to. This will render the button as an \"a\" tag.\n /\n @Prop() href?: string;\n\n /\n The human language of the linked URL.\n /\n @Prop() hreflang?: string;\n\n /\n If `true`, the button will be in loading state.\n /\n @Prop() loading = false;\n\n /\n If `true`, the button will display as monochromatic in either `light` or `dark` theme.\n /\n @Prop({ mutable: true }) monochrome = false;\n\n /\n If `fileUpload` is set to `true`, this boolean determines whether multiple files are accepted.\n /\n @Prop() multiple = false;\n\n /\n How much of the referrer to send when following the link.\n /\n @Prop() referrerpolicy?: ReferrerPolicy;\n\n /\n The relationship of the linked URL as space-separated link types.\n /\n @Prop() rel?: string;\n\n /\n The list of the files that have been selected by a user.\n /\n @Prop() selectedFiles?: FileList;\n\n /\n The size of the button to be displayed.\n /\n @Prop() size: IcSizes = \"medium\";\n\n /\n The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n /\n @Prop() target?: string;\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({ mutable: true }) theme: IcThemeMode = \"inherit\";\n\n /\n Setting to `true` can help in situations where tooltip content is clipped by a parent element.\n /\n @Prop() tooltipFixedPositioning: boolean = false;\n\n /\n The position of the tooltip in relation to the button.\n /\n @Prop() tooltipPlacement: IcButtonTooltipPlacement = \"bottom\";\n\n /\n If `true`, the secondary & tertiary variants of button will have a transparent background when not hovered, pressed or loading.\n /\n @Prop() transparentBackground = true;\n\n /\n The type of the button.\n /\n @Prop() type: IcButtonTypes = \"button\";\n\n /\n The variant of the button to be displayed.\n /\n @Prop({ mutable: true }) variant: IcButtonVariants = \"primary\";\n @Watch(\"variant\")\n watchVariantHandler(newVariant: IcButtonVariants): void {\n if (newVariant === \"icon\") this.variant = \"icon-tertiary\";\n }\n\n /\n Emitted when button has blur\n /\n @Event() icBlur!: EventEmitter<void>;\n\n /\n If `fileUpload` is set to `true`, this will be emitted when a file is selected in the native explorer.\n /\n @Event() icFileSelection!: EventEmitter<FileList>;\n\n /\n Emitted when button has focus\n /\n @Event() icFocus!: EventEmitter<void>;\n\n disconnectedCallback(): void {\n this.mutationObserver?.disconnect();\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillUpdate(): void {\n if (this.loading) {\n this.el.style.setProperty(\n \"--min-width\",\n `${this.el.getBoundingClientRect().width}px`\n );\n }\n this.setHasTooltip();\n }\n\n componentWillLoad(): void {\n const {\n title,\n \"aria-label\": ariaLabel,\n ...restInheritedAttributes\n } = inheritAttributes(this.el, [...IC_INHERITED_ARIA, \"title\"]);\n\n this.title = title;\n this.ariaLabel = ariaLabel;\n this.inheritedAttributes = restInheritedAttributes;\n\n removeDisabledFalse(this.disabled, this.el);\n\n this.el.setAttribute(\"exportparts\", \"button\");\n\n this.id = this.el.id \|\| null;\n this.setHasTooltip();\n\n if (!this.hasTooltip) {\n const describedById = this.inheritedAttributes[\"aria-describedby\"];\n if (describedById) {\n this.describedById = describedById;\n const el = this.el.parentElement?.querySelector<HTMLElement>(\n `#${describedById}`\n );\n if (el) {\n this.describedByContent = el.innerText;\n this.describedbyEl = el;\n }\n }\n }\n\n if (this.variant === \"icon\") {\n this.variant = \"icon-tertiary\";\n }\n }\n\n componentDidLoad(): void {\n this.updateTheme();\n\n if (typeof MutationObserver !== \"undefined\") {\n if (this.describedbyEl && this.describedById) {\n this.mutationObserver = new MutationObserver(this.mutationCallback);\n this.mutationObserver.observe(this.describedbyEl, {\n characterData: true,\n childList: true,\n subtree: true,\n });\n }\n\n this.hostMutationObserver = new MutationObserver(\n this.hostMutationCallback\n );\n this.hostMutationObserver.observe(this.el, {\n attributes: true,\n });\n\n if (this.hasRouterSlot()) this.arrangeRouterItem();\n }\n }\n\n componentWillRender(): void {\n const iconEl = this.getSlottedIcon(\"left\") \|\| this.getSlottedIcon(\"right\");\n iconEl?.setAttribute(\"viewBox\", \"0 0 24 24\");\n }\n\n @Listen(\"click\", { capture: true })\n handleHostClick(event: Event): void {\n if (!this.hasRouterSlot()) {\n if (this.fileUpload) {\n renderFileHiddenInput(\n this.icFileSelection,\n this.el,\n !!this.multiple,\n !!this.disabled,\n this.accept,\n this.fileInputName,\n this.selectedFiles\n );\n }\n if (this.disabled \|\| this.loading) {\n event.stopImmediatePropagation();\n }\n if (this.dropdown) {\n this.dropdownExpanded = !this.dropdownExpanded;\n }\n }\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler({ detail }: CustomEvent<IcBrand>): void {\n this.updateTheme(detail.mode);\n }\n\n /\n Sets focus on the native `button`.\n /\n @Method()\n async setFocus(): Promise<void> {\n this.buttonEl?.focus();\n }\n\n private async closeButtonTooltip(ev: KeyboardEvent) {\n const tooltip = this.el.shadowRoot?.querySelector(\"ic-tooltip\");\n if (tooltip && (await tooltip.isTooltipVisible())) {\n tooltip.displayTooltip(false);\n ev.preventDefault();\n ev.stopImmediatePropagation();\n }\n }\n\n private getSlottedIcon = (position: IcIconPlacementOptions) =>\n this.el.querySelector(`[slot=\"${position}-icon\"]`);\n\n private hasRouterSlot() {\n this.routerSlot = this.el.querySelector('[slot=\"router-item\"]');\n if (this.routerSlot) {\n this.routerSlot.ariaLabel = this.routerSlot.textContent;\n }\n return !!this.routerSlot;\n }\n\n private handleClick = () => {\n if (\n (this.el.type === \"submit\" \|\| this.el.type === \"reset\") &&\n !this.hasRouterSlot() &&\n (this.form \|\| !!this.el.closest(\"FORM\"))\n ) {\n const form = this.form\n ? document.querySelector<HTMLFormElement>(`form[id=${this.form}]`)\n : this.el.closest<HTMLFormElement>(\"FORM\");\n\n handleHiddenFormButtonClick(form, this.el);\n }\n };\n\n private handleKeyDown = (ev: KeyboardEvent) => {\n if (ev.key === \"Escape\" && this.hasTooltip) {\n this.closeButtonTooltip(ev);\n }\n };\n\n private onFocus = () => {\n this.icFocus.emit();\n };\n\n private onBlur = () => {\n this.icBlur.emit();\n };\n\n private updateTheme(mode: IcBrandForeground \| null = null) {\n const foregroundColor = getBrandFromContext(this.el, mode);\n if (foregroundColor !== IcBrandForegroundEnum.Default) {\n this.theme =\n foregroundColor === IcBrandForegroundEnum.Light\n ? IcBrandForegroundEnum.Dark\n : IcBrandForegroundEnum.Light;\n this.monochrome = true;\n }\n }\n\n /\n Triggered when text content of sibling element in light DOM changes\n /\n private mutationCallback = () => {\n this.describedByContent = this.describedbyEl?.innerText;\n };\n\n /\n Triggered when attributes of host element change\n * @param mutationList the list of changes made to the host element\n */\n private hostMutationCallback = (mutationList: MutationRecord[]) => {\n let forceComponentUpdate = false;\n mutationList.forEach(({ attributeName }) => {\n if (attributeName) {\n const attribute = this.el.getAttribute(attributeName);\n if (attribute) {\n if (attributeName === \"title\") this.title = attribute;\n else if (attributeName === \"aria-label\") this.ariaLabel = attribute;\n\n if (IC_INHERITED_ARIA.includes(attributeName)) {\n this.inheritedAttributes[attributeName] = attribute;\n forceComponentUpdate = true;\n }\n }\n }\n });\n if (forceComponentUpdate) {\n forceUpdate(this);\n }\n };\n\n private setHasTooltip = () => {\n this.hasTooltip =\n !this.disableTooltip && (!!this.title \|\| !!this.isIconVariant());\n };\n\n private isIconVariant = () => this.variant.startsWith(\"icon\");\n\n private arrangeRouterItem = () => {\n const setStyles = (\n element: HTMLElement \| SVGElement,\n styles: { [key: string]: string }\n ) => {\n Object.entries(styles).forEach(([key, value]) => {\n element.style.setProperty(key, value);\n });\n };\n\n if (this.routerSlot) {\n const icTypography = document.createElement(\"ic-typography\");\n\n setStyles(icTypography, {\n \"font-family\": \"var(--ic-font-body-family)\",\n \"font-size\": \"0.875rem\",\n \"font-weight\": \"600\",\n });\n setStyles(this.routerSlot, {\n gap: \"0\",\n });\n\n const icon = this.routerSlot.querySelector(\"svg\");\n const iconSlot = icon?.getAttribute(\"slot\");\n const iconWrapper = document.createElement(\"div\");\n\n if (icon) {\n setStyles(icon, {\n fill: \"currentcolor\",\n });\n\n if (iconSlot === \"top-icon\") {\n setStyles(this.routerSlot, {\n display: \"flex\",\n \"flex-direction\": \"column\",\n \"--height\": \"fit-content\",\n });\n } else if (iconSlot) {\n const marginPlacement = iconSlot === \"left-icon\" ? \"right\" : \"left\";\n setStyles(iconWrapper, {\n [`margin-${marginPlacement}`]: \"var(--ic-space-xs)\",\n });\n }\n\n iconWrapper.append(icon);\n }\n\n const badge = this.routerSlot.querySelector(\"ic-badge\");\n const label = this.routerSlot.textContent?.trim();\n\n if (badge) iconWrapper.append(badge);\n if (label) icTypography.textContent = label;\n\n this.routerSlot.textContent = \"\";\n\n if (iconSlot === \"right-icon\") {\n this.routerSlot.append(icTypography);\n this.routerSlot.append(iconWrapper);\n } else {\n this.routerSlot.append(iconWrapper);\n this.routerSlot.append(icTypography);\n }\n }\n };\n\n render() {\n const {\n ariaControlsId,\n ariaLabel,\n ariaOwnsId,\n buttonIdNum,\n describedByContent,\n describedById,\n disabled,\n download,\n dropdown,\n dropdownExpanded,\n form,\n formaction,\n formenctype,\n formmethod,\n formnovalidate,\n formtarget,\n fullWidth,\n handleClick,\n handleKeyDown,\n hasTooltip,\n href,\n hreflang,\n id,\n inheritedAttributes,\n isIconVariant,\n loading,\n monochrome,\n onBlur,\n onFocus,\n referrerpolicy,\n rel,\n size,\n target,\n theme,\n title,\n tooltipFixedPositioning,\n tooltipPlacement,\n transparentBackground,\n type,\n variant,\n } = this;\n\n const TagType = href ? \"a\" : \"button\";\n const buttonAttrs =\n TagType === \"button\"\n ? {\n type,\n disabled,\n form,\n formaction,\n formenctype,\n formmethod,\n formnovalidate,\n formtarget,\n }\n : {\n download: download !== false ? download : null,\n href,\n rel,\n target,\n referrerpolicy,\n hreflang,\n };\n\n const buttonId = hasTooltip\n ? `ic-button-with-tooltip-${id \|\| buttonIdNum}`\n : undefined;\n\n const describedby = !hasTooltip ? describedById : `ic-tooltip-${buttonId}`;\n\n const hasLeftIcon = !!this.getSlottedIcon(\"left\");\n const hasRightIcon = !!this.getSlottedIcon(\"right\");\n\n const ButtonContent = () =>\n this.hasRouterSlot() ? (\n <slot name=\"router-item\"></slot>\n ) : (\n <TagType\n class=\"button\"\n tabindex={0}\n aria-disabled={loading \|\| disabled ? \"true\" : null}\n aria-label={loading ? \"Loading\" : ariaLabel}\n aria-expanded={dropdown && `${dropdownExpanded}`}\n {...buttonAttrs}\n {...inheritedAttributes}\n onFocus={onFocus}\n onBlur={onBlur}\n ref={(el) => (this.buttonEl = el)}\n aria-describedby={describedby}\n part=\"button\"\n >\n {loading ? (\n <div class=\"loading-container\">\n <ic-loading-indicator\n type=\"linear\"\n monochrome={monochrome}\n theme={theme}\n ></ic-loading-indicator>\n </div>\n ) : (\n <Fragment>\n {(hasLeftIcon \|\|\n (!!this.getSlottedIcon(\"top\") && !hasRightIcon)) && (\n <div class=\"icon-container\">\n <slot name={`${hasLeftIcon ? \"left\" : \"top\"}-icon`} />\n </div>\n )}\n <slot />\n {!dropdown\n ? hasRightIcon && (\n <div class={{ \"icon-container\": true, \"right-icon\": true }}>\n <slot name=\"right-icon\" />\n </div>\n )\n : variant !== \"icon\" &&\n variant !== \"destructive\" && (\n <span\n class={\n dropdownExpanded\n ? \"dropdown-expanded\"\n : \"arrow-dropdown\"\n }\n innerHTML={arrowDropdown}\n />\n )}\n </Fragment>\n )}\n </TagType>\n );\n\n return (\n <Host\n class={{\n \"ic-button-disabled\": disabled && !loading,\n \"ic-button-full-width\": fullWidth,\n \"ic-button-loading\": loading,\n [`ic-button-size-${size}`]: true,\n [`ic-button-variant-${variant}`]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n background:\n (variant === \"secondary\" \|\| variant === \"tertiary\") &&\n !transparentBackground &&\n !disabled,\n \"dropdown-no-icon\":\n dropdown &&\n !isSlotUsed(this.el, \"icon\") &&\n !isSlotUsed(this.el, \"left-icon\"),\n monochrome,\n \"top-icon\": isSlotUsed(this.el, \"top-icon\"),\n \"with-badge\": isSlotUsed(this.el, \"badge\"),\n }}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n aria-owns={ariaOwnsId}\n aria-controls={ariaControlsId}\n aria-expanded={dropdown && `${dropdownExpanded}`}\n >\n {hasTooltip && (\n <ic-tooltip\n id={describedby}\n label={title \|\| ariaLabel}\n target={buttonId}\n placement={tooltipPlacement}\n fixedPositioning={tooltipFixedPositioning}\n silent={isIconVariant() && !!ariaLabel}\n >\n <ButtonContent />\n </ic-tooltip>\n )}\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n {!hasTooltip && <ButtonContent />}\n {describedByContent && (\n <span id={describedby} class=\"ic-button-describedby\">\n {describedByContent}\n </span>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-button.js","sourceRoot":"","sources":["../../../src/components/ic-button/ic-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Method,\n Prop,\n State,\n forceUpdate,\n h,\n Watch,\n Fragment,\n} from \"@stencil/core\";\n\nimport {\n getBrandFromContext,\n handleHiddenFormButtonClick,\n inheritAttributes,\n isSlotUsed,\n removeDisabledFalse,\n renderFileHiddenInput,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport { IcButtonTypes, IcButtonVariants } from \"./ic-button.types\";\nimport {\n IcSizes,\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundEnum,\n IcThemeMode,\n IcButtonTooltipPlacement,\n IcIconPlacementOptions,\n} from \"../../utils/types\";\nimport arrowDropdown from \"../../assets/arrow-dropdown.svg\";\n\nlet buttonIds = 0;\n\n/*\n @slot left-icon - Content will be placed to the left of the button label.\n * @slot right-icon - Content will be placed to the right of the button label.\n * @slot top-icon - Content will be placed above the button label.\n * @slot badge - Badge component overlaying the top right of the button.\n * @slot router-item - Handle routing by nesting your routes in this slot. Setting loading to true will have no impact on this slot.\n /\n@Component({\n tag: \"ic-button\",\n styleUrl: \"ic-button.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Button {\n private buttonEl?: HTMLElement;\n private buttonIdNum = buttonIds++;\n private hasTooltip = false;\n private id: string \| null;\n private inheritedAttributes: { [k: string]: string } = {};\n private describedbyEl: HTMLElement \| null = null;\n private describedById?: string;\n private mutationObserver: MutationObserver \| null = null;\n private hostMutationObserver: MutationObserver \| null = null;\n private routerSlot: HTMLElement \| null;\n\n @Element() el: HTMLIcButtonElement;\n\n @State() ariaLabel = \"\";\n @State() describedbyNode: Node \| null;\n @Watch(\"describedbyNode\")\n watchDescribedbyNodeHandler(): void {\n this.updateAriaDescribedbyClone();\n }\n @State() title = \"\";\n\n /\n If `fileUpload` is set to `true`, this is the accepted list of file types.\n /\n @Prop() accept = \"\";\n\n /*\n @internal Used to identify any related child component\n /\n @Prop() ariaControlsId?: string \| boolean;\n\n /\n @internal Used to identify any related child component\n /\n @Prop() ariaOwnsId?: string \| boolean;\n\n /\n If `true`, the button will be in disabled state.\n /\n @Prop() disabled = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /\n If `true`, the ic-tooltip which is shown for icon variant will be disabled. Title or aria-label must be set if this prop is not applied.\n /\n @Prop() disableTooltip = false;\n\n /\n If `true`, the user can save the linked URL instead of navigating to it.\n /\n @Prop() download: string \| boolean = false;\n\n /\n If `true`, the button will show a dropdown icon.\n /\n @Prop() dropdown = false;\n\n /\n If `true`, the aria-expanded value will be set to true. This is only applied if the dropdown prop is also true.\n /\n @Prop({ mutable: true, reflect: true }) dropdownExpanded = false;\n\n /\n If `true`, when the button is clicked the native file explorer will be launched.\n /\n @Prop() fileUpload = false;\n\n /\n The name of the control for the file input, which is submitted with the form data.\n /\n @Prop() fileInputName = `ic-button-file-upload-input-${buttonIds++}`;\n\n /\n The <form> element to associate the button with.\n /\n @Prop() form?: string;\n\n /\n The URL that processes the information submitted by the button. It overrides the action attribute of the button'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 button's form owner.\n /\n @Prop() formtarget?: string;\n\n /\n If `true`, the button will fill the width of the container.\n /\n @Prop() fullWidth = false;\n\n /\n The URL that the link points to. This will render the button as an \"a\" tag.\n /\n @Prop() href?: string;\n\n /\n The human language of the linked URL.\n /\n @Prop() hreflang?: string;\n\n /\n If `true`, the button will be in loading state.\n /\n @Prop() loading = false;\n\n /\n If `true`, the button will display as monochromatic in either `light` or `dark` theme.\n /\n @Prop({ mutable: true }) monochrome = false;\n\n /\n If `fileUpload` is set to `true`, this boolean determines whether multiple files are accepted.\n /\n @Prop() multiple = false;\n\n /\n How much of the referrer to send when following the link.\n /\n @Prop() referrerpolicy?: ReferrerPolicy;\n\n /\n The relationship of the linked URL as space-separated link types.\n /\n @Prop() rel?: string;\n\n /\n The list of the files that have been selected by a user.\n /\n @Prop() selectedFiles?: FileList;\n\n /\n The size of the button to be displayed.\n /\n @Prop() size: IcSizes = \"medium\";\n\n /\n The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n /\n @Prop() target?: string;\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({ mutable: true }) theme: IcThemeMode = \"inherit\";\n\n /\n Setting to `true` can help in situations where tooltip content is clipped by a parent element.\n /\n @Prop() tooltipFixedPositioning: boolean = false;\n\n /\n The position of the tooltip in relation to the button.\n /\n @Prop() tooltipPlacement: IcButtonTooltipPlacement = \"bottom\";\n\n /\n If `true`, the secondary & tertiary variants of button will have a transparent background when not hovered, pressed or loading.\n /\n @Prop() transparentBackground = true;\n\n /\n The type of the button.\n /\n @Prop() type: IcButtonTypes = \"button\";\n\n /\n The variant of the button to be displayed.\n /\n @Prop({ mutable: true }) variant: IcButtonVariants = \"primary\";\n @Watch(\"variant\")\n watchVariantHandler(newVariant: IcButtonVariants): void {\n if (newVariant === \"icon\") this.variant = \"icon-tertiary\";\n }\n\n /\n Emitted when button has blur\n /\n @Event() icBlur!: EventEmitter<void>;\n\n /\n If `fileUpload` is set to `true`, this will be emitted when a file is selected in the native explorer.\n /\n @Event() icFileSelection!: EventEmitter<FileList>;\n\n /\n Emitted when button has focus\n /\n @Event() icFocus!: EventEmitter<void>;\n\n disconnectedCallback(): void {\n this.mutationObserver?.disconnect();\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillUpdate(): void {\n if (this.loading) {\n this.el.style.setProperty(\n \"--min-width\",\n `${this.el.getBoundingClientRect().width}px`\n );\n }\n this.setHasTooltip();\n }\n\n componentWillLoad(): void {\n const {\n title,\n \"aria-label\": ariaLabel,\n ...restInheritedAttributes\n } = inheritAttributes(this.el, [...IC_INHERITED_ARIA, \"title\"]);\n\n this.title = title;\n this.ariaLabel = ariaLabel;\n this.inheritedAttributes = restInheritedAttributes;\n\n removeDisabledFalse(this.disabled, this.el);\n\n this.el.setAttribute(\"exportparts\", \"button\");\n\n this.id = this.el.id \|\| null;\n this.setHasTooltip();\n\n if (!this.hasTooltip) {\n const describedById = this.inheritedAttributes[\"aria-describedby\"];\n if (describedById) {\n this.describedById = describedById;\n const el = document.querySelector<HTMLElement>(`#${describedById}`);\n if (el) {\n this.describedbyEl = el;\n this.describedbyNode = el.cloneNode(true);\n }\n }\n }\n\n if (this.variant === \"icon\") {\n this.variant = \"icon-tertiary\";\n }\n }\n\n componentDidLoad(): void {\n this.updateTheme();\n\n if (typeof MutationObserver !== \"undefined\") {\n if (this.describedbyEl && this.describedById) {\n this.mutationObserver = new MutationObserver(this.mutationCallback);\n this.mutationObserver.observe(this.describedbyEl, {\n characterData: true,\n childList: true,\n subtree: true,\n });\n }\n\n this.hostMutationObserver = new MutationObserver(\n this.hostMutationCallback\n );\n this.hostMutationObserver.observe(this.el, {\n attributes: true,\n });\n\n if (this.hasRouterSlot()) this.arrangeRouterItem();\n }\n\n this.updateAriaDescribedbyClone();\n }\n\n componentWillRender(): void {\n const iconEl = this.getSlottedIcon(\"left\") \|\| this.getSlottedIcon(\"right\");\n iconEl?.setAttribute(\"viewBox\", \"0 0 24 24\");\n }\n\n @Listen(\"click\", { capture: true })\n handleHostClick(event: Event): void {\n if (!this.hasRouterSlot()) {\n if (this.fileUpload) {\n renderFileHiddenInput(\n this.icFileSelection,\n this.el,\n !!this.multiple,\n !!this.disabled,\n this.accept,\n this.fileInputName,\n this.selectedFiles\n );\n }\n if (this.disabled \|\| this.loading) {\n event.stopImmediatePropagation();\n }\n if (this.dropdown) {\n this.dropdownExpanded = !this.dropdownExpanded;\n }\n }\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler({ detail }: CustomEvent<IcBrand>): void {\n this.updateTheme(detail.mode);\n }\n\n /\n Sets focus on the native `button`.\n /\n @Method()\n async setFocus(): Promise<void> {\n this.buttonEl?.focus();\n }\n\n private async closeButtonTooltip(ev: KeyboardEvent) {\n const tooltip = this.el.shadowRoot?.querySelector(\"ic-tooltip\");\n if (tooltip && (await tooltip.isTooltipVisible())) {\n tooltip.displayTooltip(false);\n ev.preventDefault();\n ev.stopImmediatePropagation();\n }\n }\n\n private getSlottedIcon = (position: IcIconPlacementOptions) =>\n this.el.querySelector(`[slot=\"${position}-icon\"]`);\n\n private hasRouterSlot() {\n this.routerSlot = this.el.querySelector('[slot=\"router-item\"]');\n if (this.routerSlot) {\n this.routerSlot.ariaLabel = this.routerSlot.textContent;\n }\n return !!this.routerSlot;\n }\n\n private handleClick = () => {\n if (\n (this.el.type === \"submit\" \|\| this.el.type === \"reset\") &&\n !this.hasRouterSlot() &&\n (this.form \|\| !!this.el.closest(\"FORM\"))\n ) {\n const form = this.form\n ? document.querySelector<HTMLFormElement>(`form[id=${this.form}]`)\n : this.el.closest<HTMLFormElement>(\"FORM\");\n\n handleHiddenFormButtonClick(form, this.el);\n }\n };\n\n private handleKeyDown = (ev: KeyboardEvent) => {\n if (ev.key === \"Escape\" && this.hasTooltip) {\n this.closeButtonTooltip(ev);\n }\n };\n\n private onFocus = () => {\n this.icFocus.emit();\n };\n\n private onBlur = () => {\n this.icBlur.emit();\n };\n\n private updateTheme(mode: IcBrandForeground \| null = null) {\n const foregroundColor = getBrandFromContext(this.el, mode);\n if (foregroundColor !== IcBrandForegroundEnum.Default) {\n this.theme =\n foregroundColor === IcBrandForegroundEnum.Light\n ? IcBrandForegroundEnum.Dark\n : IcBrandForegroundEnum.Light;\n this.monochrome = true;\n }\n }\n\n /\n Creates/updates clone of aria-describedby element node tree in shadow dom\n * Required due to ids being scoped to the shadow dom\n /\n private updateAriaDescribedbyClone = () => {\n if (this.describedbyNode) {\n const wrapper = this.el.shadowRoot?.querySelector(\"#describedby-wrapper\");\n if (!wrapper) {\n this.el.shadowRoot?.appendChild(\n Object.assign(document.createElement(\"div\"), {\n id: \"describedby-wrapper\",\n className: \"ic-button-describedby\",\n })\n );\n }\n\n while (wrapper?.firstChild) wrapper.firstChild.remove();\n wrapper?.appendChild(this.describedbyNode);\n }\n };\n\n /\n Triggered when light dom aria-describedby element updates\n /\n private mutationCallback = () => {\n if (this.describedbyEl)\n this.describedbyNode = this.describedbyEl?.cloneNode(true);\n };\n\n /\n Triggered when attributes of host element change\n * @param mutationList the list of changes made to the host element\n */\n private hostMutationCallback = (mutationList: MutationRecord[]) => {\n let forceComponentUpdate = false;\n mutationList.forEach(({ attributeName }) => {\n if (attributeName) {\n const attribute = this.el.getAttribute(attributeName);\n if (attribute) {\n if (attributeName === \"title\") this.title = attribute;\n else if (attributeName === \"aria-label\") this.ariaLabel = attribute;\n\n if (IC_INHERITED_ARIA.includes(attributeName)) {\n this.inheritedAttributes[attributeName] = attribute;\n forceComponentUpdate = true;\n }\n }\n }\n });\n if (forceComponentUpdate) {\n forceUpdate(this);\n }\n };\n\n private setHasTooltip = () => {\n this.hasTooltip =\n !this.disableTooltip && (!!this.title \|\| !!this.isIconVariant());\n };\n\n private isIconVariant = () => this.variant.startsWith(\"icon\");\n\n private arrangeRouterItem = () => {\n const setStyles = (\n element: HTMLElement \| SVGElement,\n styles: { [key: string]: string }\n ) => {\n Object.entries(styles).forEach(([key, value]) => {\n element.style.setProperty(key, value);\n });\n };\n\n if (this.routerSlot) {\n const icTypography = document.createElement(\"ic-typography\");\n\n setStyles(icTypography, {\n \"font-family\": \"var(--ic-font-body-family)\",\n \"font-size\": \"0.875rem\",\n \"font-weight\": \"600\",\n });\n setStyles(this.routerSlot, {\n gap: \"0\",\n });\n\n const icon = this.routerSlot.querySelector(\"svg\");\n const iconSlot = icon?.getAttribute(\"slot\");\n const iconWrapper = document.createElement(\"div\");\n\n if (icon) {\n setStyles(icon, {\n fill: \"currentcolor\",\n });\n\n if (iconSlot === \"top-icon\") {\n setStyles(this.routerSlot, {\n display: \"flex\",\n \"flex-direction\": \"column\",\n \"--height\": \"fit-content\",\n });\n } else if (iconSlot) {\n const marginPlacement = iconSlot === \"left-icon\" ? \"right\" : \"left\";\n setStyles(iconWrapper, {\n [`margin-${marginPlacement}`]: \"var(--ic-space-xs)\",\n });\n }\n\n iconWrapper.append(icon);\n }\n\n const badge = this.routerSlot.querySelector(\"ic-badge\");\n const label = this.routerSlot.textContent?.trim();\n\n if (badge) iconWrapper.append(badge);\n if (label) icTypography.textContent = label;\n\n this.routerSlot.textContent = \"\";\n\n if (iconSlot === \"right-icon\") {\n this.routerSlot.append(icTypography);\n this.routerSlot.append(iconWrapper);\n } else {\n this.routerSlot.append(iconWrapper);\n this.routerSlot.append(icTypography);\n }\n }\n };\n\n render() {\n const {\n ariaControlsId,\n ariaLabel,\n ariaOwnsId,\n buttonIdNum,\n describedById,\n disabled,\n download,\n dropdown,\n dropdownExpanded,\n form,\n formaction,\n formenctype,\n formmethod,\n formnovalidate,\n formtarget,\n fullWidth,\n handleClick,\n handleKeyDown,\n hasTooltip,\n href,\n hreflang,\n id,\n inheritedAttributes,\n isIconVariant,\n loading,\n monochrome,\n onBlur,\n onFocus,\n referrerpolicy,\n rel,\n size,\n target,\n theme,\n title,\n tooltipFixedPositioning,\n tooltipPlacement,\n transparentBackground,\n type,\n variant,\n } = this;\n\n const TagType = href ? \"a\" : \"button\";\n const buttonAttrs =\n TagType === \"button\"\n ? {\n type,\n disabled,\n form,\n formaction,\n formenctype,\n formmethod,\n formnovalidate,\n formtarget,\n }\n : {\n download: download !== false ? download : null,\n href,\n rel,\n target,\n referrerpolicy,\n hreflang,\n };\n\n const buttonId = hasTooltip\n ? `ic-button-with-tooltip-${id \|\| buttonIdNum}`\n : undefined;\n\n const describedby = !hasTooltip ? describedById : `ic-tooltip-${buttonId}`;\n\n const hasLeftIcon = !!this.getSlottedIcon(\"left\");\n const hasRightIcon = !!this.getSlottedIcon(\"right\");\n\n const ButtonContent = () =>\n this.hasRouterSlot() ? (\n <slot name=\"router-item\"></slot>\n ) : (\n <TagType\n class=\"button\"\n tabindex={0}\n aria-disabled={loading \|\| disabled ? \"true\" : null}\n aria-label={loading ? \"Loading\" : ariaLabel}\n aria-expanded={dropdown && `${dropdownExpanded}`}\n {...buttonAttrs}\n {...inheritedAttributes}\n onFocus={onFocus}\n onBlur={onBlur}\n ref={(el) => (this.buttonEl = el)}\n aria-describedby={describedby}\n part=\"button\"\n >\n {loading ? (\n <div class=\"loading-container\">\n <ic-loading-indicator\n type=\"linear\"\n monochrome={monochrome}\n theme={theme}\n ></ic-loading-indicator>\n </div>\n ) : (\n <Fragment>\n {(hasLeftIcon \|\|\n (!!this.getSlottedIcon(\"top\") && !hasRightIcon)) && (\n <div class=\"icon-container\">\n <slot name={`${hasLeftIcon ? \"left\" : \"top\"}-icon`} />\n </div>\n )}\n <slot />\n {!dropdown\n ? hasRightIcon && (\n <div class={{ \"icon-container\": true, \"right-icon\": true }}>\n <slot name=\"right-icon\" />\n </div>\n )\n : variant !== \"icon\" &&\n variant !== \"destructive\" && (\n <span\n class={\n dropdownExpanded\n ? \"dropdown-expanded\"\n : \"arrow-dropdown\"\n }\n innerHTML={arrowDropdown}\n />\n )}\n </Fragment>\n )}\n </TagType>\n );\n\n return (\n <Host\n class={{\n \"ic-button-disabled\": disabled && !loading,\n \"ic-button-full-width\": fullWidth,\n \"ic-button-loading\": loading,\n [`ic-button-size-${size}`]: true,\n [`ic-button-variant-${variant}`]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n background:\n (variant === \"secondary\" \|\| variant === \"tertiary\") &&\n !transparentBackground &&\n !disabled,\n \"dropdown-no-icon\":\n dropdown &&\n !isSlotUsed(this.el, \"icon\") &&\n !isSlotUsed(this.el, \"left-icon\"),\n monochrome,\n \"top-icon\": isSlotUsed(this.el, \"top-icon\"),\n \"with-badge\": isSlotUsed(this.el, \"badge\"),\n }}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n aria-owns={ariaOwnsId}\n aria-controls={ariaControlsId}\n aria-expanded={dropdown && `${dropdownExpanded}`}\n >\n {hasTooltip && (\n <ic-tooltip\n id={describedby}\n label={title \|\| ariaLabel}\n target={buttonId}\n placement={tooltipPlacement}\n fixedPositioning={tooltipFixedPositioning}\n silent={isIconVariant() && !!ariaLabel}\n >\n <ButtonContent />\n </ic-tooltip>\n )}\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n {!hasTooltip && <ButtonContent />}\n </Host>\n );\n }\n}\n"]}

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

@@ -150,19 +150,19 @@ export class CardVertical {
             rel: rel,
             target: target,
         };
-        return (h(Host, { key: '2dc8070692fc796401c84c6156d1f66c8053310a', class: {
+        return (h(Host, { key: 'aeff3ef22b085acbf30dacb5d3ae0167451044b9', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h(Component, Object.assign({ key: 'a1a8763990ed7e5ac5eecfc69e4b29ab184b9e6e', class: {
+            } }, h(Component, Object.assign({ key: 'a451e5f53149283ee77878ccc3e699beae669f24', class: {
                 card: true,
                 clickable: !!clickable && !disabled,
                 disabled: !!disabled,
                 fullwidth: !!fullWidth,
                 focussed: isFocussed,
                 monochrome: monochrome,
-            }, tabindex: clickable && !parentIsAnchorTag ? 0 : undefined, "aria-disabled": disabled ? "true" : null, disabled: disabled }, attrs), isSlotUsed(this.el, "image-top") && (h("div", { key: '2c12f461a8b8972d8a4de1a6560a2c52ecadc36f', class: "image-top" }, h("slot", { key: '9afec40e5ef6b57a10ca922d7f3da378f962200f', name: "image-top" }))), h("div", { key: 'bb92939da24dbfa2fb2e4bc2606d4f7ef9d2ba37', class: "card-header" }, isSlotUsed(this.el, "icon") && (h("div", { key: '165af9342325b430548209cf2bcd5b9781b752fd', class: "icon" }, h("slot", { key: '4b2cdd47b1f2abfc16097dee848b630c93c1b835', name: "icon" }))), h("div", { key: '02f1b6357a696bc43b9d5cc7c8030647b52e311c', class: "card-title" }, h("slot", { key: 'b71ca0fa6a4aeb1cf75579920a66f58abe11d5ae', name: "heading" }, h("ic-typography", { key: '63f9c6478987888f41a53d5beadec2b3deaa52ae', variant: "h4" }, h("p", { key: '6d642c20d4656a408cf439c969a1895cb834c15e' }, heading)))), isSlotUsed(this.el, "interaction-button") && (h("div", { key: '7a44d7d2c17cd980fa14da2a65aa68ddd8832f77', class: "interaction-button" }, h("slot", { key: '6a9e0f0ca96125d94d39b31474c82ffe088ea475', name: "interaction-button" })))), (subheading || isSlotUsed(this.el, "subheading")) && (h("div", { key: 'dc19ca8ae488c30aa1fc58e56db23fc0dc2a2c0f', class: "subheading" }, h("slot", { key: 'bae9a057f813ef5c5df04befed60d09ccb106857', name: "subheading" }, h("ic-typography", { key: '13a32e2d9bc3258b65edf8a5c385f181f39a2c8d', variant: "subtitle-small" }, subheading)))), isSlotUsed(this.el, "adornment") && (h("div", { key: 'c359631c9d1ed0643290e1db2a5e521d6702b29d', class: "adornment" }, h("slot", { key: '398a65927df066f96bffc5b59b95fd27ec558c12', name: "adornment" }))), isSlotUsed(this.el, "image-mid") && (h("div", { key: '463a2495779d1faca6efd98a3e1425e3486fc0d1', class: "image-mid" }, h("slot", { key: '049daa3cbf2542b0a47951a8758bb50a1ad699e2', name: "image-mid" }))), (message || isSlotUsed(this.el, "message")) && (h("div", { key: '9f6b4ea8e3a8cfa0e8ad58366f4e2a198cb0f8f6', class: "card-message" }, message && (h("ic-typography", { key: '1a32ff3958de50ea5732a0fb52616d04c6ebedcc', variant: "body" }, message)), isSlotUsed(this.el, "message") && h("slot", { key: '0dabb8f6ed9bd42a0982284fa4976734c0d5e16f', name: "message" }))), (isSlotUsed(this.el, "interaction-controls") || expandable) && (h("div", { key: '2d6292c895df325c53cffc72a330720855644c59', class: "interaction-area" }, h("div", { key: 'a8c4c10d85a5608f49dbccb8cb65443d56d64a3f', class: "interaction-controls" }, h("slot", { key: '5caebe86117ec6ef31d096a284aa035153e02a56', name: "interaction-controls" })), expandable && (h("ic-tooltip", { key: '1d66d84f3181cc1694cdf779befca1610c538f71', id: "ic-tooltip-expand-button", label: "Toggle expandable area", silent: true }, h("button", { key: 'eaa2b9484428dab89fb67677b80a09a6174b011b', class: {
+            }, tabindex: clickable && !parentIsAnchorTag ? 0 : undefined, "aria-disabled": disabled ? "true" : null, disabled: disabled }, attrs), isSlotUsed(this.el, "image-top") && (h("div", { key: '2ec35ab8d6e1224c0a393c92a72e403e4c5fc8fc', class: "image-top" }, h("slot", { key: 'c859ae1e242284b586df2ce7627c316021b8ef54', name: "image-top" }))), h("div", { key: '55f21501b3d95e1f5bf3a69542dab57d00379e63', class: "card-header" }, isSlotUsed(this.el, "icon") && (h("div", { key: 'f95e7224d6e8548f33a8861025a1651a3bc953a4', class: "icon" }, h("slot", { key: '1102f6f88e830613365cb0bfe3e5c4481b3a207e', name: "icon" }))), h("div", { key: '3122872ef284640debbf7182d36f9cd4c6032ae4', class: "card-title" }, h("slot", { key: 'f51213257b0ff6e195852ca006e9cba35103f210', name: "heading" }, h("ic-typography", { key: '7d82fce416b7579ac23e2154ef512bd8f3181bc3', variant: "h4" }, h("p", { key: 'ad083279b8f012f16d67c182c37bcc6383710ba5' }, heading)))), isSlotUsed(this.el, "interaction-button") && (h("div", { key: 'bb47af0b373f295cb1bcd1b72df6c325e257c2ed', class: "interaction-button" }, h("slot", { key: 'fd0fc056e51febf6d9abe76d7ffb0773836e52d3', name: "interaction-button" })))), (subheading || isSlotUsed(this.el, "subheading")) && (h("div", { key: '32851c6c59b9ee76aa490210f5888fe410067ca3', class: "subheading" }, h("slot", { key: '5757fd2fd2618f03fee208b855384c29861cadc6', name: "subheading" }, h("ic-typography", { key: '1f206ca1eaf0bcd5693abf3fc3f97303582a5deb', variant: "subtitle-small" }, subheading)))), isSlotUsed(this.el, "adornment") && (h("div", { key: 'ceef939617ce12be984f15673e9ef4e71110234c', class: "adornment" }, h("slot", { key: '127e2dfa77b74a19070e90361d26fe1358539ca2', name: "adornment" }))), isSlotUsed(this.el, "image-mid") && (h("div", { key: '0cbc0b6a9638969db6fabcde40ad46044afc4b88', class: "image-mid" }, h("slot", { key: '3e8ae6e25570ed03e7fea0ae4fdd7a779d3022b1', name: "image-mid" }))), (message || isSlotUsed(this.el, "message")) && (h("div", { key: '9da59f1aeaa1fcf4bc2a0aa1bd50d3f86faa2af7', class: "card-message" }, message && (h("ic-typography", { key: '4620229c479b782ad5ee0c8e3a7acdf6a8a70d7b', variant: "body" }, message)), isSlotUsed(this.el, "message") && h("slot", { key: '959e101cc933319cf297d0f0ebbd46299a24cbd5', name: "message" }))), (isSlotUsed(this.el, "interaction-controls") || expandable) && (h("div", { key: 'c4263a3d5f8e22f31cf0e55a868dbf0f52b00692', class: "interaction-area" }, h("div", { key: 'bd5e1d3ff137004ff5c696f611dae1bfefd26e1a', class: "interaction-controls" }, h("slot", { key: '5985495f8f12c825aafcab517d3add5f9741d460', name: "interaction-controls" })), expandable && (h("ic-tooltip", { key: 'e3b12f780303019b7f95ce5a98d7b7194c242c9a', id: "ic-tooltip-expand-button", label: "Toggle expandable area", silent: true }, h("button", { key: '9857a37a37571bd21f500527149ed8bc3806c4f4', class: {
                 "toggle-button": true,
                 [`toggle-button-${this.areaExpanded ? "expanded" : "closed"}`]: true,
-            }, "aria-label": "Toggle expandable area", "aria-expanded": `${this.areaExpanded}`, "aria-controls": this.areaExpanded ? "expanded-content-area" : null, onClick: this.toggleExpanded, innerHTML: chevronIcon }))))), isSlotUsed(this.el, "expanded-content") && this.areaExpanded && (h("div", { key: 'd896c331bad9e027c4b56dd1fce75bc530218516', class: "expanded-content", id: "expanded-content-area" }, h("slot", { key: '7fc81de39ef8a949674f22089d413bf946befdd7', name: "expanded-content" }))), isSlotUsed(this.el, "badge") && h("slot", { key: '283bff90fab9be3b640ab7d04384d7ce2873bad8', name: "badge" }))));
+            }, "aria-label": "Toggle expandable area", "aria-expanded": `${this.areaExpanded}`, "aria-controls": this.areaExpanded ? "expanded-content-area" : null, onClick: this.toggleExpanded, innerHTML: chevronIcon }))))), isSlotUsed(this.el, "expanded-content") && this.areaExpanded && (h("div", { key: '080d0198d37d939cfc506abc5933caac7eaa383d', class: "expanded-content", id: "expanded-content-area" }, h("slot", { key: '6c9b5dd6bfa46d466034255231047b2682e19f96', name: "expanded-content" }))), isSlotUsed(this.el, "badge") && h("slot", { key: '1f68304dd15e605320258bf8d14d2df3b0caf344', name: "badge" }))));
     }
     static get is() { return "ic-card-vertical"; }
     static get encapsulation() { return "shadow"; }

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

@@ -565,8 +565,6 @@ video {
 }
 .checkbox-label {
-  color: var(--ic-checkbox-text);
   --ic-typography-color: var(--ic-checkbox-text);
 }
@@ -575,9 +573,18 @@ video {
   display: inline-block;
 }
+::slotted([slot="label"]) {
+  padding-left: var(--ic-space-sm) !important;
+  color: var(--ic-checkbox-text);
+}
 :host(.ic-checkbox-disabled) .checkbox-label {
   color: var(--ic-checkbox-text-disabled);
+  --ic-typography-color: var(--ic-checkbox-text-disabled);
+}
+:host(.ic-checkbox-disabled) ::slotted([slot="label"]) {
+  color: var(--ic-checkbox-text-disabled);
   --ic-typography-color: var(--ic-checkbox-text-disabled);
 }

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

@@ -2,6 +2,7 @@ import { Host, h, } from "@stencil/core";
 import { isSlotUsed, onComponentRequiredPropUndefined, renderHiddenInput, removeHiddenInput, addFormResetListener, removeFormResetListener, removeDisabledFalse, } from "../../utils/helpers";
 /**
  * @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 {
@@ -75,7 +76,12 @@ export class Checkbox {
         }
     }
     componentDidLoad() {
-        onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Checkbox");
+        if (this.hasLabelSlot()) {
+            this.arrangeLabel();
+        }
+        else {
+            onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Checkbox");
+        }
     }
     componentDidRender() {
         if (this.additionalFieldDisplay === "static") {
@@ -99,24 +105,42 @@ export class Checkbox {
         var _a;
         (_a = this.checkboxEl) === null || _a === void 0 ? void 0 : _a.focus();
     }
+    getCheckboxGroupId() {
+        return `ic-checkbox-${this.label}-${this.groupLabel}`.replace(/ /g, "-");
+    }
+    hasLabelSlot() {
+        this.labelSlot = this.el.querySelector('[slot="label"]');
+        return !!this.labelSlot;
+    }
+    arrangeLabel() {
+        var _a;
+        if (this.labelSlot) {
+            this.label = ((_a = this.labelSlot.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || "";
+            this.labelSlot.setAttribute("for", this.getCheckboxGroupId());
+            if (this.disabled) {
+                this.labelSlot.setAttribute("aria-disabled", "true");
+            }
+        }
+    }
     render() {
-        const { additionalFieldDisplay, checked, disabled, displayIndeterminate, dynamicText, el, form, groupLabel, handleClick, hideLabel, label, name, size, theme, value, } = this;
-        const id = `ic-checkbox-${label}-${groupLabel}`.replace(/ /g, "-");
+        const { additionalFieldDisplay, checked, disabled, displayIndeterminate, dynamicText, el, form, handleClick, hideLabel, label, name, size, theme, value, } = this;
+        const inputId = this.getCheckboxGroupId();
         const isDynamicAdditionalField = additionalFieldDisplay === "dynamic";
         checked
             ? renderHiddenInput(el, value, name, disabled)
             : removeHiddenInput(el);
-        return (h(Host, { key: '153b0b333ca1d0755d4e52dd9119d48cd1c246cc', class: {
+        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: 'b9aee197d23b8380b224aaa9f332d24c20406518', class: {
                 "ic-checkbox-disabled": disabled,
                 [`ic-checkbox-${size}`]: !!size,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("div", { key: 'c0f56ee4fbbdd38fea208d133cdd1fa91a41d6c7', 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: 'f8335e54b2f765591b3781d76a01632c34065855', role: "checkbox", class: {
+            } }, h("div", { key: 'a027b311fa8a9cc5ef753a426fc3f73e8d6f97a4', 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: '5f3ce7e559134302640a03d2312782552e9ab018', role: "checkbox", class: {
                 checkbox: true,
                 checked,
                 indeterminate: displayIndeterminate,
-            }, ref: (el) => (this.checkboxEl = el), type: "checkbox", name: name, id: id, value: value, disabled: disabled, checked: checked, indeterminate: displayIndeterminate, onClick: handleClick, form: form, "aria-label": hideLabel ? label : undefined }), !hideLabel && (h("ic-typography", { key: '2ba4862a349e6b3f34c050c434ce247687f0dfd8', class: "checkbox-label", variant: "body" }, h("label", { key: 'a3f3c733b5dc0a0acdf89d3b7db603e965102618', htmlFor: id }, label)))), h("span", { key: 'e671e1532bdfea4a1c5d85cbb8cde2cc41044757', id: `${id}-additional-field-description`, role: "alert", class: "sr-only" }, isDynamicAdditionalField && checked ? dynamicText : ""), isSlotUsed(el, "additional-field") && (h("div", { key: 'b562e4d2bf3cb6651c6a95aedb8a8e4991d1d1e7', class: "dynamic-container", ref: (el) => (this.additionalFieldContainer = el) }, isDynamicAdditionalField && h("div", { key: '9c6d8a88882fe32f1f272c3df42eeca896459284', class: "branch-corner" }), h("div", { key: '7a88d8ae6fc193a3b2e08e82eb47a6b0228ce40b', class: "dynamic-field-container" }, isDynamicAdditionalField && (h("ic-typography", { key: '64fdfe413653b6583789de3ee56c91c18522764e', variant: "caption" }, h("p", { key: '0075205b0805a37b362658d70152bb180c290f0c', class: "dynamic-text" }, isDynamicAdditionalField && checked ? dynamicText : ""))), h("div", { key: 'd6494d984bd1de5b08265fe1f8b2deb0a45e7d3a', 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: 'e75420d60d9fdc9170a7f54c96575936c8da122d' })), h("span", { key: 'c3fccdab4f27feaeab35df33734723d9f14487cc', id: `${inputId}-additional-field-description`, role: "alert", class: "sr-only" }, isDynamicAdditionalField && checked ? dynamicText : ""), isSlotUsed(el, "additional-field") && (h("div", { key: 'ceb57398c6a3dea8cec4eb4a8e0ba940f6f15c0a', class: "dynamic-container", ref: (el) => (this.additionalFieldContainer = el) }, isDynamicAdditionalField && h("div", { key: '41f097eb38e5dfd739b7de22cffb03ff3043d3e6', class: "branch-corner" }), h("div", { key: '15b7e382cf7c9bf23a68016f5f2a449ae92dc03b', class: "dynamic-field-container" }, isDynamicAdditionalField && (h("ic-typography", { key: 'd0551674a9d5d6d6d01cf842aff133072ce4d1be', variant: "caption" }, h("p", { key: '81f3345ea6625aa9d8644d5c410c7b24c1365975', class: "dynamic-text" }, isDynamicAdditionalField && checked ? dynamicText : ""))), h("div", { key: '970766071c9e70042e87e243e3415b73c189b51f', class: {
                 "additional-field-wrapper": !isDynamicAdditionalField,
-            } }, h("slot", { key: '905f210aaf41f4ba5d7c24e92bd19dbb17b81355', name: "additional-field" })))))));
+            } }, h("slot", { key: '3ff910a1d7a01312baeb70a965aaaa157ae66e6e', 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 /\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\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 onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Checkbox\"\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 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 groupLabel,\n handleClick,\n hideLabel,\n label,\n name,\n size,\n theme,\n value,\n } = this;\n\n const id = `ic-checkbox-${label}-${groupLabel}`.replace(/ /g, \"-\");\n\n const isDynamicAdditionalField = additionalFieldDisplay === \"dynamic\";\n\n checked\n ? renderHiddenInput(el, value, name, disabled)\n : removeHiddenInput(el);\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={id}\n value={value}\n disabled={disabled}\n checked={checked}\n indeterminate={displayIndeterminate}\n onClick={handleClick}\n form={form}\n aria-label={hideLabel ? label : undefined}\n ></input>\n {!hideLabel && (\n <ic-typography class=\"checkbox-label\" variant=\"body\">\n <label htmlFor={id}>{label}</label>\n </ic-typography>\n )}\n </div>\n <span\n id={`${id}-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})\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"]}

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

@@ -315,6 +315,29 @@ export const ConditionalStatic = {
   name: "Conditional static",
 };
+export const SlottedLabel = {
+  render: (args) => html`
+    <ic-checkbox-group label="Pick your coffee" name="group1">
+      <ic-checkbox value="valueName1" label="Americano"></ic-checkbox>
+      <ic-checkbox value="valueName2" checked>
+        <span slot="label">
+          Coffee <ic-status-tag label="hot" status="warning"></ic-status-tag>
+        </span>
+      </ic-checkbox>
+      <ic-checkbox value="valueName3" checked>
+        <span slot="label">
+          <b>Slot Coffee</b>
+        </span>
+      </ic-checkbox>
+      <ic-checkbox value="valueName4" disabled>
+        <span slot="label"> <b>OUT OF STOCK</b> Big Coffee </span>
+      </ic-checkbox>
+    </ic-checkbox-group>
+  `,
+  name: "Slotted label",
+};
 export const HelperText = {
   render: (args) => html`
     <ic-checkbox-group
@@ -799,6 +822,35 @@ export const RTL = {
   name: "RTL",
 };
+export const Internationalisation = {
+  render: (args) => html`
+      <p>Each checkbox in this group is set to a different language by being wrapped in a <code>&lt;span lang=""&gt;</code></p>
+      <ic-checkbox-group
+        label="International Coffee"
+      >
+        <span lang="fr">
+          <ic-checkbox value="valueName1" label="Cafe au lait"></ic-checkbox>
+        </span>
+        <span lang="it">
+          <ic-checkbox value="valueName2" label="Americano" checked></ic-checkbox>
+        </span>
+        <ic-checkbox value="valueName3" label="Flat White"></ic-checkbox>
+      </ic-checkbox-group>
+      <p>This whole checkbox group has been wrapped in a <code>&lt;span lang="fr"&gt;</code> and will read in French</p>
+      <span lang="fr">
+      <ic-checkbox-group
+        label="Boissons"
+      >
+          <ic-checkbox value="valueName1" label="Limonade"></ic-checkbox>
+          <ic-checkbox value="valueName2" label="Chocolat Chaud" checked></ic-checkbox>
+          <ic-checkbox value="valueName3" label="Jus"></ic-checkbox>
+      </ic-checkbox-group>
+      </span>
+    </>
+ `,
+  name: "Internationalisation",
+};
 const inlineRadioSelector = "inline-radio";
 export const Playground = {