npm - @ukic/web-components - Versions diffs - 3.3.0 → 3.5.0 - Mend

@ukic/web-components 3.3.0 → 3.5.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 (554) hide show

package/dist/components/ic-toggle-button-group.js CHANGED Viewed

@@ -65,52 +65,43 @@ const ToggleButtonGroup = /*@__PURE__*/ proxyCustomElement(class ToggleButtonGro
                 shift: ev.shiftKey,
             };
         };
-        this.setSlottedAria = (el) => {
-            var _a, _b, _c;
-            const btn = (_c = (_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("ic-button")) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector("button");
-            let aria = btn.getAttribute("aria-label") || "";
-            aria += ", ";
-            aria += this.accessibleLabel;
-            btn.setAttribute("aria-label", aria);
-        };
-        this.handleHostFocus = (ev) => {
-            if (this.loading || this.disabled) {
-                return null;
+        this.handleHostFocus = ({ target, relatedTarget }) => {
+            var _a;
+            if (this.loading || this.disabled)
+                return;
+            const el = target;
+            const relEl = relatedTarget;
+            const toggleButtons = Array.from((el === null || el === void 0 ? void 0 : el.querySelectorAll("ic-toggle-button")) || []);
+            const noToggleButtonsChecked = toggleButtons.every((el) => !el.checked);
+            const { shift } = this.lastKeyPressed;
+            if (((noToggleButtonsChecked || this.selectType !== "single") && !shift) ||
+                (noToggleButtonsChecked && shift && (relEl === null || relEl === void 0 ? void 0 : relEl.tagName) == TOGGLE_GROUP)) {
+                (_a = toggleButtons[0]) === null || _a === void 0 ? void 0 : _a.focus();
             }
-            const el = ev.target;
-            const relEl = ev.relatedTarget;
-            const toggleButtons = Array.from(el.querySelectorAll("ic-toggle-button"));
-            if (((toggleButtons.every((el) => !el.checked) ||
-                this.selectType !== "single") &&
-                this.lastKeyPressed.shift === false) ||
-                (toggleButtons.every((el) => !el.checked) &&
-                    this.lastKeyPressed.shift === true &&
-                    relEl.tagName == TOGGLE_GROUP)) {
-                toggleButtons[0].focus();
-            }
-            else if (this.lastKeyPressed.shift === false ||
-                (this.lastKeyPressed.shift === true && relEl.tagName == TOGGLE_GROUP)) {
+            else if (!shift || (relEl === null || relEl === void 0 ? void 0 : relEl.tagName) == TOGGLE_GROUP) {
                 // if checked is true and selectMethod is "single", focus that toggle
-                const toggledButton = toggleButtons.filter((el) => el.checked);
-                toggledButton[0].focus();
+                toggleButtons.filter((el) => el.checked)[0].focus();
             }
         };
-        this.handleKeyDown = (event) => {
+        this.handleKeyDown = ({ key }) => {
+            if (key !== "ArrowDown" &&
+                key !== "ArrowRight" &&
+                key !== "ArrowLeft" &&
+                key !== "ArrowUp")
+                return;
             const toggleButtonOptions = this.getAllToggleButtons();
-            const focussedChild = toggleButtonOptions.indexOf(toggleButtonOptions.filter((el) => el === document.activeElement)[0]);
-            switch (event.key) {
-                case "ArrowDown":
-                case "ArrowRight":
-                    this.selectMethod === "auto"
-                        ? this.proxySelectHandler(toggleButtonOptions[this.getNextItemToSelect(focussedChild, true)])
-                        : toggleButtonOptions[this.getNextItemToSelect(focussedChild, true)].focus();
-                    break;
-                case "ArrowUp":
-                case "ArrowLeft":
-                    this.selectMethod === "auto"
-                        ? this.proxySelectHandler(toggleButtonOptions[this.getNextItemToSelect(focussedChild, false)])
-                        : toggleButtonOptions[this.getNextItemToSelect(focussedChild, false)].focus();
-                    break;
+            const targetToggle = toggleButtonOptions[this.getNextItemToSelect(toggleButtonOptions.indexOf(toggleButtonOptions.filter((el) => el === document.activeElement)[0]), key === "ArrowDown" || key === "ArrowRight")];
+            if (this.selectMethod === "auto") {
+                // trigger selectHandler when unable to add 'target'
+                targetToggle.checked = true;
+                this.selectHandler(new CustomEvent("icToggleChecked", {
+                    detail: {
+                        checked: targetToggle.checked,
+                    },
+                }), targetToggle);
+            }
+            else {
+                targetToggle.focus();
             }
         };
         this.getNextItemToSelect = (currentItem, movingDown) => {
@@ -131,6 +122,7 @@ const ToggleButtonGroup = /*@__PURE__*/ proxyCustomElement(class ToggleButtonGro
             }
             return nextItem;
         };
+        this.getAllToggleButtons = () => Array.from(this.el.querySelectorAll("ic-toggle-button"));
     }
     watchDisabledHandler() {
         this.getAllToggleButtons().forEach((el) => {
@@ -176,8 +168,8 @@ const ToggleButtonGroup = /*@__PURE__*/ proxyCustomElement(class ToggleButtonGro
     selectHandler(ev, tabTarget) {
         const allToggles = this.getAllToggleButtons();
         let clickedToggle = ev.target;
-        // tabTarget used in proxySelectHandler
-        tabTarget && tabTarget.focus();
+        if (tabTarget)
+            tabTarget.focus(); // tabTarget used in proxySelectHandler
         if (this.selectType === "single") {
             if (!clickedToggle && tabTarget) {
                 clickedToggle = tabTarget;
@@ -193,7 +185,7 @@ const ToggleButtonGroup = /*@__PURE__*/ proxyCustomElement(class ToggleButtonGro
             });
         }
         else {
-            const toggledOptions = this.getAllToggleButtons().filter((el) => el.checked && !el.disabled);
+            const toggledOptions = allToggles.filter((el) => el.checked && !el.disabled);
             this.icChange.emit({
                 checked: toggledOptions.map((opt) => opt.checked),
                 toggledOptions: toggledOptions.map((opt) => ({
@@ -204,13 +196,20 @@ const ToggleButtonGroup = /*@__PURE__*/ proxyCustomElement(class ToggleButtonGro
         }
     }
     componentWillLoad() {
-        this.selectType === "multi" && (this.selectMethod = "manual");
+        if (this.selectType === "multi")
+            this.selectMethod = "manual";
         document.addEventListener("keydown", this.keyListener);
         removeDisabledFalse(this.disabled, this.el);
     }
     componentDidLoad() {
         this.getAllToggleButtons().forEach((el, i) => {
-            this.setSlottedAria(el);
+            var _a, _b, _c;
+            const btn = (_c = (_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("ic-button")) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector("button");
+            if (btn) {
+                const btnAriaLabel = btn.getAttribute("aria-label");
+                const aria = btnAriaLabel ? `${btnAriaLabel}, ` : "";
+                btn.setAttribute("aria-label", `${aria}${this.accessibleLabel}`);
+            }
             el.id = i.toString();
             el.tabIndex = -1;
             el.addEventListener("keydown", (ev) => {
@@ -222,28 +221,15 @@ const ToggleButtonGroup = /*@__PURE__*/ proxyCustomElement(class ToggleButtonGro
     disconnectedCallback() {
         document === null || document === void 0 ? void 0 : document.removeEventListener("keydown", this.keyListener);
     }
-    // trigger selectHandler when unable to add 'target'
-    proxySelectHandler(toggle) {
-        toggle.checked = true;
-        const customEv = new CustomEvent("icToggleChecked", {
-            detail: {
-                checked: toggle.checked,
-            },
-        });
-        this.selectHandler(customEv, toggle);
-    }
-    getAllToggleButtons() {
-        return Array.from(this.el.querySelectorAll("ic-toggle-button"));
-    }
     render() {
-        return (h(Host, { key: '5ff90397f901e294f15f3f560eac22d575b61c62', role: "group", "aria-label": this.accessibleLabel, tabindex: 0, class: {
-                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-                ["ic-toggle-button-group-full-width"]: !!this.fullWidth,
-                ["ic-toggle-button-group-loading"]: !!this.loading,
-                ["ic-toggle-button-group-disabled"]: this.disabled,
-                [`ic-toggle-button-group-monochrome`]: !!this.monochrome,
-                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-            }, onFocus: this.handleHostFocus }, h("slot", { key: 'c30679fee25ec96c7d28123d9758173737922e18' })));
+        const { accessibleLabel, disabled, fullWidth, loading, monochrome, theme } = this;
+        return (h(Host, { key: 'c82ba602f319c2074da44667618cc5d7b7c3499b', role: "group", "aria-label": accessibleLabel, tabindex: 0, class: {
+                "ic-toggle-button-group-disabled": disabled,
+                "ic-toggle-button-group-full-width": fullWidth,
+                "ic-toggle-button-group-loading": loading,
+                "ic-toggle-button-group-monochrome": monochrome,
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            }, onFocus: this.handleHostFocus }, h("slot", { key: '98defd37fd3f5c87d4d0aceefd1b5ac0c5ad6123' })));
     }
     get el() { return this; }
     static get watchers() { return {

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

	@@ -1 +1 @@
1	- {"file":"ic-toggle-button-group.js","mappings":"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","names":[],"sources":["src/components/ic-toggle-button-group/ic-toggle-button-group.css?tag=ic-toggle-button-group&encapsulation=shadow","src/components/ic-toggle-button-group/ic-toggle-button-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/* PARENT HOST /\n\n:root {\n display: block;\n}\n\n:host {\n display: flex;\n flex-direction: row;\n width: fit-content;\n min-width: min-content;\n border: var(--ic-border-width) solid var(--ic-toggle-button-unselected-border);\n border-radius: var(--ic-border-radius);\n}\n\n:host(.ic-toggle-button-group-full-width) {\n width: 100%;\n max-width: 100%;\n}\n\n:host(.ic-toggle-button-group-loading) {\n min-width: max-content;\n}\n\n:host(:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n transition: var(--ic-transition-duration-fast);\n outline: none;\n}\n\n/ CHILDREN SLOTTED /\n\n::slotted(ic-toggle-button) {\n flex-grow: 1;\n width: min-content;\n\n --toggle-button-border: none !important;\n --toggle-button-border-hover: none !important;\n --toggle-button-border-active: none !important;\n}\n\n::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border);\n}\n\n/ DISABLED /\n:host(.ic-toggle-button-group-disabled) {\n border: var(--ic-space-1px) dashed\n var(--ic-toggle-button-unselected-border-disabled);\n pointer-events: none;\n}\n\n:host(.ic-toggle-button-group-disabled)\n ::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-space-1px) dashed\n var(--ic-toggle-button-unselected-border-disabled);\n}\n\n:host(.ic-toggle-button-group-monochrome) {\n border: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-monochrome);\n}\n\n:host(.ic-toggle-button-group-monochrome)\n ::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-monochrome);\n}\n\n:host(.ic-toggle-button-group-disabled.ic-toggle-button-group-monochrome) {\n border: var(--ic-border-width) dashed\n var(--ic-toggle-button-unselected-border-disabled-monochrome);\n}\n\n:host(.ic-toggle-button-group-disabled.ic-toggle-button-group-monochrome)\n ::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-disabled-monochrome);\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Listen,\n Element,\n Event,\n EventEmitter,\n State,\n Watch,\n} from \"@stencil/core\";\nimport {\n IcSizes,\n IcSelectTypes,\n IcSelectMethodTypes,\n IcThemeMode,\n IcButtonTooltipPlacement,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-toggle-button-group.types\";\nimport { removeDisabledFalse } from \"../../utils/helpers\";\n\ninterface lastKey {\n key: string \| null;\n shift: boolean;\n}\n\nconst TOGGLE_GROUP = \"IC-TOGGLE-BUTTON-GROUP\";\n\n@Component({\n tag: \"ic-toggle-button-group\",\n styleUrl: \"ic-toggle-button-group.css\",\n shadow: true,\n})\nexport class ToggleButtonGroup {\n @Element() el: HTMLIcToggleButtonGroupElement;\n\n @State() lastKeyPressed: lastKey = {\n key: null,\n shift: false,\n };\n\n /\n The accessible label of the toggle button group component to provide context for screen reader users.\n /\n @Prop() accessibleLabel?: string = \"Toggle button group\";\n\n /\n If `true`, the toggle button group will be set to the disabled state.\n /\n @Prop() disabled: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.disabled = this.disabled;\n });\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /\n If `true`, the toggle button group will fill the width of the container.\n /\n @Prop() fullWidth?: boolean = false;\n @Watch(\"fullWidth\")\n watchFullWidthHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.fullWidth = this.fullWidth;\n });\n }\n\n /\n The placement of the icons in relation to the toggle button labels.\n /\n @Prop() iconPlacement?: \"left\" \| \"right\" \| \"top\";\n\n /\n If `true`, the toggle button group will be in loading state.\n /\n @Prop() loading?: boolean = false;\n @Watch(\"loading\")\n watchLoadingHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.loading = this.loading;\n });\n }\n\n /\n If `true`, the toggle button group will display as black in the light theme, and white in dark theme.\n /\n @Prop() monochrome?: boolean = false;\n @Watch(\"monochrome\")\n watchMonochromeHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.monochrome = this.monochrome;\n });\n }\n\n /\n If `auto`, controls are toggled automatically when navigated to. If `manual`, the controls must be actioned to change their toggled state. The value of this prop is ignored if `selectType` is set to`multi`.\n /\n @Prop({ mutable: true }) selectMethod?: IcSelectMethodTypes = \"manual\";\n\n /\n Sets whether single or multiple options can be toggled. If `multi`, then the `selectMethod` is always `manual`.\n /\n @Prop() selectType?: IcSelectTypes = \"single\";\n\n /\n The size of the toggle buttons to be displayed. This does not affect the font size of the accessible label.\n /\n @Prop() size?: IcSizes = \"medium\";\n @Watch(\"size\")\n watchSizeHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.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(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.theme = this.theme;\n });\n }\n\n /\n The position of the tooltip in relation to the toggle buttons.\n /\n @Prop() tooltipPlacement: IcButtonTooltipPlacement = \"bottom\";\n @Watch(\"tooltipPlacement\")\n watchTooltipPlacementHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.tooltipPlacement = this.tooltipPlacement;\n });\n }\n\n /\n The variant of the toggle button.\n /\n @Prop({ reflect: true }) variant: \"default\" \| \"icon\" = \"default\";\n @Watch(\"variant\")\n watchVariantHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.variant = this.variant;\n });\n }\n\n /\n Emitted when a toggle button is selected.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n @Listen(\"icToggleChecked\")\n selectHandler(ev: CustomEvent, tabTarget?: HTMLIcToggleButtonElement): void {\n const allToggles = this.getAllToggleButtons();\n let clickedToggle = ev.target as HTMLIcToggleButtonElement;\n // tabTarget used in proxySelectHandler\n tabTarget && tabTarget.focus();\n if (this.selectType === \"single\") {\n if (!clickedToggle && tabTarget) {\n clickedToggle = tabTarget;\n }\n allToggles.forEach((el) => {\n if (el.id !== clickedToggle.id && el.checked) {\n el.checked = false;\n }\n });\n\n this.icChange.emit({\n checked: ev.detail.checked,\n selectedOption: clickedToggle,\n });\n } else {\n const toggledOptions = this.getAllToggleButtons().filter(\n (el) => el.checked && !el.disabled\n );\n\n this.icChange.emit({\n checked: toggledOptions.map((opt) => opt.checked!),\n toggledOptions: toggledOptions.map((opt) => ({\n toggleButton: opt,\n })),\n selectedOption: clickedToggle,\n });\n }\n }\n\n componentWillLoad(): void {\n this.selectType === \"multi\" && (this.selectMethod = \"manual\");\n this.selectMethod === \"auto\" && this.selectType === \"single\";\n document.addEventListener(\"keydown\", this.keyListener);\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n this.getAllToggleButtons().forEach((el, i) => {\n this.setSlottedAria(el);\n el.id = i.toString();\n el.tabIndex = -1;\n el.addEventListener(\"keydown\", (ev) => {\n this.handleKeyDown(ev);\n });\n el.classList.add(\"expand-toggle-group-child\");\n });\n }\n\n disconnectedCallback(): void {\n document?.removeEventListener(\"keydown\", this.keyListener);\n }\n\n private keyListener = (ev: KeyboardEvent) => {\n this.lastKeyPressed = {\n key: ev.key,\n shift: ev.shiftKey,\n };\n };\n\n private setSlottedAria = (el: HTMLIcToggleButtonElement) => {\n const btn = el.shadowRoot\n ?.querySelector(\"ic-button\")\n ?.shadowRoot?.querySelector(\"button\") as HTMLButtonElement;\n let aria = btn.getAttribute(\"aria-label\") \|\| \"\";\n aria += \", \";\n aria += this.accessibleLabel;\n btn.setAttribute(\"aria-label\", aria);\n };\n\n private handleHostFocus = (ev: FocusEvent): void \| null => {\n if (this.loading \|\| this.disabled) {\n return null;\n }\n const el = ev.target as HTMLIcToggleButtonGroupElement;\n const relEl = ev.relatedTarget as HTMLIcToggleButtonElement;\n const toggleButtons = Array.from(el.querySelectorAll(\"ic-toggle-button\"));\n if (\n ((toggleButtons.every((el) => !el.checked) \|\|\n this.selectType !== \"single\") &&\n this.lastKeyPressed.shift === false) \|\|\n (toggleButtons.every((el) => !el.checked) &&\n this.lastKeyPressed.shift === true &&\n relEl.tagName == TOGGLE_GROUP)\n ) {\n toggleButtons[0].focus();\n } else if (\n this.lastKeyPressed.shift === false \|\|\n (this.lastKeyPressed.shift === true && relEl.tagName == TOGGLE_GROUP)\n ) {\n // if checked is true and selectMethod is \"single\", focus that toggle\n const toggledButton = toggleButtons.filter((el) => el.checked);\n toggledButton[0].focus();\n }\n };\n\n // trigger selectHandler when unable to add 'target'\n private proxySelectHandler(toggle: HTMLIcToggleButtonElement): void {\n toggle.checked = true;\n const customEv = new CustomEvent(\"icToggleChecked\", {\n detail: {\n checked: toggle.checked,\n },\n });\n this.selectHandler(customEv, toggle);\n }\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n const toggleButtonOptions = this.getAllToggleButtons();\n const focussedChild = toggleButtonOptions.indexOf(\n toggleButtonOptions.filter((el) => el === document.activeElement)[0]\n );\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n this.selectMethod === \"auto\"\n ? this.proxySelectHandler(\n toggleButtonOptions[this.getNextItemToSelect(focussedChild, true)]\n )\n : toggleButtonOptions[\n this.getNextItemToSelect(focussedChild, true)\n ].focus();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n this.selectMethod === \"auto\"\n ? this.proxySelectHandler(\n toggleButtonOptions[\n this.getNextItemToSelect(focussedChild, false)\n ]\n )\n : toggleButtonOptions[\n this.getNextItemToSelect(focussedChild, false)\n ].focus();\n break;\n case \"Tab\":\n break;\n }\n };\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const toggleButtonOptions = this.getAllToggleButtons();\n const numToggles = toggleButtonOptions.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n if (nextItem < 0) {\n nextItem = numToggles;\n } else if (nextItem > numToggles) {\n nextItem = 0;\n }\n\n if (toggleButtonOptions[nextItem].disabled) {\n nextItem = this.getNextItemToSelect(nextItem, movingDown);\n }\n\n return nextItem;\n };\n\n private getAllToggleButtons(): HTMLIcToggleButtonElement[] {\n return Array.from(this.el.querySelectorAll(\"ic-toggle-button\"));\n }\n\n render() {\n return (\n <Host\n role=\"group\"\n aria-label={this.accessibleLabel}\n tabindex={0}\n class={{\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n [\"ic-toggle-button-group-full-width\"]: !!this.fullWidth,\n [\"ic-toggle-button-group-loading\"]: !!this.loading,\n [\"ic-toggle-button-group-disabled\"]: this.disabled,\n [`ic-toggle-button-group-monochrome`]: !!this.monochrome,\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n onFocus={this.handleHostFocus}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-toggle-button-group.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,2zIAA2zI,CAAC;AAC31I,kCAAe,sBAAsB;;AC2BrC,MAAM,YAAY,GAAG,wBAAwB,CAAC;MAOjC,iBAAiB;IAL9B;;;;;QAQW,mBAAc,GAAY;YACjC,GAAG,EAAE,IAAI;YACT,KAAK,EAAE,KAAK;SACb,CAAC;;;;QAKM,oBAAe,GAAG,qBAAqB,CAAC;;;;QAKxC,aAAQ,GAAG,KAAK,CAAC;;;;QAYjB,cAAS,GAAG,KAAK,CAAC;;;;QAgBlB,YAAO,GAAG,KAAK,CAAC;;;;QAWhB,eAAU,GAAG,KAAK,CAAC;;;;QAWF,iBAAY,GAAwB,QAAQ,CAAC;;;;QAK9D,eAAU,GAAkB,QAAQ,CAAC;;;;QAKrC,SAAI,GAAY,QAAQ,CAAC;;;;QAWzB,UAAK,GAAgB,SAAS,CAAC;;;;QAW/B,qBAAgB,GAA6B,QAAQ,CAAC;;;;QAWrC,YAAO,GAAuB,SAAS,CAAC;QAgFzD,gBAAW,GAAG,CAAC,EAAiB;YACtC,IAAI,CAAC,cAAc,GAAG;gBACpB,GAAG,EAAE,EAAE,CAAC,GAAG;gBACX,KAAK,EAAE,EAAE,CAAC,QAAQ;aACnB,CAAC;SACH,CAAC;QAEM,oBAAe,GAAG,CAAC,EAAE,MAAM,EAAE,aAAa,EAAc;;YAC9D,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1C,MAAM,EAAE,GAAG,MAA+C,CAAC;YAC3D,MAAM,KAAK,GAAG,aAAiD,CAAC;YAChE,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAC9B,CAAA,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,gBAAgB,CAAC,kBAAkB,CAAC,KAAI,EAAE,CAC/C,CAAC;YACF,MAAM,sBAAsB,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;YACxE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,cAAc,CAAC;YACtC,IACE,CAAC,CAAC,sBAAsB,IAAI,IAAI,CAAC,UAAU,KAAK,QAAQ,KAAK,CAAC,KAAK;iBAClE,sBAAsB,IAAI,KAAK,IAAI,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,KAAI,YAAY,CAAC,EACnE;gBACA,MAAA,aAAa,CAAC,CAAC,CAAC,0CAAE,KAAK,EAAE,CAAC;aAC3B;iBAAM,IAAI,CAAC,KAAK,IAAI,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,KAAI,YAAY,EAAE;;gBAEnD,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;aACrD;SACF,CAAC;QAEM,kBAAa,GAAG,CAAC,EAAE,GAAG,EAAiB;YAC7C,IACE,GAAG,KAAK,WAAW;gBACnB,GAAG,KAAK,YAAY;gBACpB,GAAG,KAAK,WAAW;gBACnB,GAAG,KAAK,SAAS;gBAEjB,OAAO;YAET,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;YACvD,MAAM,YAAY,GAChB,mBAAmB,CACjB,IAAI,CAAC,mBAAmB,CACtB,mBAAmB,CAAC,OAAO,CACzB,mBAAmB,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CACrE,EACD,GAAG,KAAK,WAAW,IAAI,GAAG,KAAK,YAAY,CAC5C,CACF,CAAC;YAEJ,IAAI,IAAI,CAAC,YAAY,KAAK,MAAM,EAAE;;gBAEhC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;gBAC5B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,iBAAiB,EAAE;oBACjC,MAAM,EAAE;wBACN,OAAO,EAAE,YAAY,CAAC,OAAO;qBAC9B;iBACF,CAAC,EACF,YAAY,CACb,CAAC;aACH;iBAAM;gBACL,YAAY,CAAC,KAAK,EAAE,CAAC;aACtB;SACF,CAAC;QAEM,wBAAmB,GAAG,CAAC,WAAmB,EAAE,UAAmB;YACrE,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;YACvD,MAAM,UAAU,GAAG,mBAAmB,CAAC,MAAM,GAAG,CAAC,CAAC;YAElD,IAAI,WAAW,GAAG,CAAC,EAAE;gBACnB,WAAW,GAAG,CAAC,CAAC;aACjB;YAED,IAAI,QAAQ,GAAG,UAAU,GAAG,WAAW,GAAG,CAAC,GAAG,WAAW,GAAG,CAAC,CAAC;YAC9D,IAAI,QAAQ,GAAG,CAAC,EAAE;gBAChB,QAAQ,GAAG,UAAU,CAAC;aACvB;iBAAM,IAAI,QAAQ,GAAG,UAAU,EAAE;gBAChC,QAAQ,GAAG,CAAC,CAAC;aACd;YAED,IAAI,mBAAmB,CAAC,QAAQ,CAAC,CAAC,QAAQ,EAAE;gBAC1C,QAAQ,GAAG,IAAI,CAAC,mBAAmB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;aAC3D;YAED,OAAO,QAAQ,CAAC;SACjB,CAAC;QAEM,wBAAmB,GAAG,MAC5B,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;KAwB5D;IA1RC,oBAAoB;QAClB,IAAI,CAAC,mBAAmB,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE;YACpC,EAAE,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;SAC7B,CAAC,CAAC;QACH,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;KAC7C;IAOD,qBAAqB;QACnB,IAAI,CAAC,mBAAmB,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE;YACpC,EAAE,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;SAC/B,CAAC,CAAC;KACJ;IAYD,mBAAmB;QACjB,IAAI,CAAC,mBAAmB,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE;YACpC,EAAE,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;SAC3B,CAAC,CAAC;KACJ;IAOD,sBAAsB;QACpB,IAAI,CAAC,mBAAmB,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE;YACpC,EAAE,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;SACjC,CAAC,CAAC;KACJ;IAiBD,gBAAgB;QACd,IAAI,CAAC,mBAAmB,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE;YACpC,EAAE,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;SACrB,CAAC,CAAC;KACJ;IAOD,iBAAiB;QACf,IAAI,CAAC,mBAAmB,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE;YACpC,EAAE,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;SACvB,CAAC,CAAC;KACJ;IAOD,4BAA4B;QAC1B,IAAI,CAAC,mBAAmB,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE;YACpC,EAAE,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC;SAC7C,CAAC,CAAC;KACJ;IAOD,mBAAmB;QACjB,IAAI,CAAC,mBAAmB,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE;YACpC,EAAE,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;SAC3B,CAAC,CAAC;KACJ;IAQD,aAAa,CAAC,EAAe,EAAE,SAAqC;QAClE,MAAM,UAAU,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC9C,IAAI,aAAa,GAAG,EAAE,CAAC,MAAmC,CAAC;QAE3D,IAAI,SAAS;YAAE,SAAS,CAAC,KAAK,EAAE,CAAC;QAEjC,IAAI,IAAI,CAAC,UAAU,KAAK,QAAQ,EAAE;YAChC,IAAI,CAAC,aAAa,IAAI,SAAS,EAAE;gBAC/B,aAAa,GAAG,SAAS,CAAC;aAC3B;YACD,UAAU,CAAC,OAAO,CAAC,CAAC,EAAE;gBACpB,IAAI,EAAE,CAAC,EAAE,KAAK,aAAa,CAAC,EAAE,IAAI,EAAE,CAAC,OAAO,EAAE;oBAC5C,EAAE,CAAC,OAAO,GAAG,KAAK,CAAC;iBACpB;aACF,CAAC,CAAC;YAEH,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;gBACjB,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO;gBAC1B,cAAc,EAAE,aAAa;aAC9B,CAAC,CAAC;SACJ;aAAM;YACL,MAAM,cAAc,GAAG,UAAU,CAAC,MAAM,CACtC,CAAC,EAAE,KAAK,EAAE,CAAC,OAAO,IAAI,CAAC,EAAE,CAAC,QAAQ,CACnC,CAAC;YAEF,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;gBACjB,OAAO,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,OAAO,CAAC;gBACjD,cAAc,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC,GAAG,MAAM;oBAC3C,YAAY,EAAE,GAAG;iBAClB,CAAC,CAAC;gBACH,cAAc,EAAE,aAAa;aAC9B,CAAC,CAAC;SACJ;KACF;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,UAAU,KAAK,OAAO;YAAE,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC;QAE9D,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QACvD,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;KAC7C;IAED,gBAAgB;QACd,IAAI,CAAC,mBAAmB,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,CAAC;;YACvC,MAAM,GAAG,GAAG,MAAA,MAAA,MAAA,EAAE,CAAC,UAAU,0CACrB,aAAa,CAAC,WAAW,CAAC,0CAC1B,UAAU,0CAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;YACxC,IAAI,GAAG,EAAE;gBACP,MAAM,YAAY,GAAG,GAAG,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;gBACpD,MAAM,IAAI,GAAG,YAAY,GAAG,GAAG,YAAY,IAAI,GAAG,EAAE,CAAC;gBACrD,GAAG,CAAC,YAAY,CAAC,YAAY,EAAE,GAAG,IAAI,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;aAClE;YAED,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,QAAQ,EAAE,CAAC;YACrB,EAAE,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;YACjB,EAAE,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,EAAE;gBAChC,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;aACxB,CAAC,CAAC;YACH,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;SAC/C,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;KAC5D;IA2FD,MAAM;QACJ,MAAM,EAAE,eAAe,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,GACxE,IAAI,CAAC;QAEP,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,OAAO,gBACA,eAAe,EAC3B,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE;gBACL,iCAAiC,EAAE,QAAQ;gBAC3C,mCAAmC,EAAE,SAAS;gBAC9C,gCAAgC,EAAE,OAAO;gBACzC,mCAAmC,EAAE,UAAU;gBAC/C,CAAC,YAAY,KAAK,EAAE,GAAG,KAAK,KAAK,SAAS;aAC3C,EACD,OAAO,EAAE,IAAI,CAAC,eAAe,IAE7B,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-toggle-button-group/ic-toggle-button-group.css?tag=ic-toggle-button-group&encapsulation=shadow","src/components/ic-toggle-button-group/ic-toggle-button-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/* PARENT HOST /\n\n:root {\n display: block;\n}\n\n:host {\n display: flex;\n flex-direction: row;\n width: fit-content;\n min-width: min-content;\n border: var(--ic-border-width) solid var(--ic-toggle-button-unselected-border);\n border-radius: var(--ic-border-radius);\n}\n\n:host(.ic-toggle-button-group-full-width) {\n width: 100%;\n max-width: 100%;\n}\n\n:host(.ic-toggle-button-group-loading) {\n min-width: max-content;\n}\n\n:host(:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n transition: var(--ic-transition-duration-fast);\n outline: none;\n}\n\n/ CHILDREN SLOTTED /\n\n::slotted(ic-toggle-button) {\n flex-grow: 1;\n width: min-content;\n\n --toggle-button-border: none !important;\n --toggle-button-border-hover: none !important;\n --toggle-button-border-active: none !important;\n}\n\n::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border);\n}\n\n/ DISABLED /\n:host(.ic-toggle-button-group-disabled) {\n border: var(--ic-space-1px) dashed\n var(--ic-toggle-button-unselected-border-disabled);\n pointer-events: none;\n}\n\n:host(.ic-toggle-button-group-disabled)\n ::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-space-1px) dashed\n var(--ic-toggle-button-unselected-border-disabled);\n}\n\n:host(.ic-toggle-button-group-monochrome) {\n border: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-monochrome);\n}\n\n:host(.ic-toggle-button-group-monochrome)\n ::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-monochrome);\n}\n\n:host(.ic-toggle-button-group-disabled.ic-toggle-button-group-monochrome) {\n border: var(--ic-border-width) dashed\n var(--ic-toggle-button-unselected-border-disabled-monochrome);\n}\n\n:host(.ic-toggle-button-group-disabled.ic-toggle-button-group-monochrome)\n ::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-disabled-monochrome);\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Listen,\n Element,\n Event,\n EventEmitter,\n State,\n Watch,\n} from \"@stencil/core\";\nimport {\n IcSizes,\n IcSelectTypes,\n IcSelectMethodTypes,\n IcThemeMode,\n IcButtonTooltipPlacement,\n IcIconPlacementOptions,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-toggle-button-group.types\";\nimport { removeDisabledFalse } from \"../../utils/helpers\";\n\ninterface lastKey {\n key: string \| null;\n shift: boolean;\n}\n\nconst TOGGLE_GROUP = \"IC-TOGGLE-BUTTON-GROUP\";\n\n@Component({\n tag: \"ic-toggle-button-group\",\n styleUrl: \"ic-toggle-button-group.css\",\n shadow: true,\n})\nexport class ToggleButtonGroup {\n @Element() el: HTMLIcToggleButtonGroupElement;\n\n @State() lastKeyPressed: lastKey = {\n key: null,\n shift: false,\n };\n\n /\n The accessible label of the toggle button group component to provide context for screen reader users.\n /\n @Prop() accessibleLabel = \"Toggle button group\";\n\n /\n If `true`, the toggle button group will be set to the disabled state.\n /\n @Prop() disabled = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.disabled = this.disabled;\n });\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /\n If `true`, the toggle button group will fill the width of the container.\n /\n @Prop() fullWidth = false;\n @Watch(\"fullWidth\")\n watchFullWidthHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.fullWidth = this.fullWidth;\n });\n }\n\n /\n The placement of the icons in relation to the toggle button labels.\n /\n @Prop() iconPlacement?: IcIconPlacementOptions;\n\n /\n If `true`, the toggle button group will be in loading state.\n /\n @Prop() loading = false;\n @Watch(\"loading\")\n watchLoadingHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.loading = this.loading;\n });\n }\n\n /\n If `true`, the toggle button group will display as black in the light theme, and white in dark theme.\n /\n @Prop() monochrome = false;\n @Watch(\"monochrome\")\n watchMonochromeHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.monochrome = this.monochrome;\n });\n }\n\n /\n If `auto`, controls are toggled automatically when navigated to. If `manual`, the controls must be actioned to change their toggled state. The value of this prop is ignored if `selectType` is set to`multi`.\n /\n @Prop({ mutable: true }) selectMethod: IcSelectMethodTypes = \"manual\";\n\n /\n Sets whether single or multiple options can be toggled. If `multi`, then the `selectMethod` is always `manual`.\n /\n @Prop() selectType: IcSelectTypes = \"single\";\n\n /\n The size of the toggle buttons to be displayed. This does not affect the font size of the accessible label.\n /\n @Prop() size: IcSizes = \"medium\";\n @Watch(\"size\")\n watchSizeHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.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(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.theme = this.theme;\n });\n }\n\n /\n The position of the tooltip in relation to the toggle buttons.\n /\n @Prop() tooltipPlacement: IcButtonTooltipPlacement = \"bottom\";\n @Watch(\"tooltipPlacement\")\n watchTooltipPlacementHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.tooltipPlacement = this.tooltipPlacement;\n });\n }\n\n /\n The variant of the toggle button.\n /\n @Prop({ reflect: true }) variant: \"default\" \| \"icon\" = \"default\";\n @Watch(\"variant\")\n watchVariantHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.variant = this.variant;\n });\n }\n\n /\n Emitted when a toggle button is selected.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n @Listen(\"icToggleChecked\")\n selectHandler(ev: CustomEvent, tabTarget?: HTMLIcToggleButtonElement): void {\n const allToggles = this.getAllToggleButtons();\n let clickedToggle = ev.target as HTMLIcToggleButtonElement;\n\n if (tabTarget) tabTarget.focus(); // tabTarget used in proxySelectHandler\n\n if (this.selectType === \"single\") {\n if (!clickedToggle && tabTarget) {\n clickedToggle = tabTarget;\n }\n allToggles.forEach((el) => {\n if (el.id !== clickedToggle.id && el.checked) {\n el.checked = false;\n }\n });\n\n this.icChange.emit({\n checked: ev.detail.checked,\n selectedOption: clickedToggle,\n });\n } else {\n const toggledOptions = allToggles.filter(\n (el) => el.checked && !el.disabled\n );\n\n this.icChange.emit({\n checked: toggledOptions.map((opt) => opt.checked),\n toggledOptions: toggledOptions.map((opt) => ({\n toggleButton: opt,\n })),\n selectedOption: clickedToggle,\n });\n }\n }\n\n componentWillLoad(): void {\n if (this.selectType === \"multi\") this.selectMethod = \"manual\";\n if (this.selectMethod === \"auto\") this.selectType === \"single\";\n document.addEventListener(\"keydown\", this.keyListener);\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n this.getAllToggleButtons().forEach((el, i) => {\n const btn = el.shadowRoot\n ?.querySelector(\"ic-button\")\n ?.shadowRoot?.querySelector(\"button\");\n if (btn) {\n const btnAriaLabel = btn.getAttribute(\"aria-label\");\n const aria = btnAriaLabel ? `${btnAriaLabel}, ` : \"\";\n btn.setAttribute(\"aria-label\", `${aria}${this.accessibleLabel}`);\n }\n\n el.id = i.toString();\n el.tabIndex = -1;\n el.addEventListener(\"keydown\", (ev) => {\n this.handleKeyDown(ev);\n });\n el.classList.add(\"expand-toggle-group-child\");\n });\n }\n\n disconnectedCallback(): void {\n document?.removeEventListener(\"keydown\", this.keyListener);\n }\n\n private keyListener = (ev: KeyboardEvent) => {\n this.lastKeyPressed = {\n key: ev.key,\n shift: ev.shiftKey,\n };\n };\n\n private handleHostFocus = ({ target, relatedTarget }: FocusEvent) => {\n if (this.loading \|\| this.disabled) return;\n\n const el = target as HTMLIcToggleButtonGroupElement \| null;\n const relEl = relatedTarget as HTMLIcToggleButtonElement \| null;\n const toggleButtons = Array.from(\n el?.querySelectorAll(\"ic-toggle-button\") \|\| []\n );\n const noToggleButtonsChecked = toggleButtons.every((el) => !el.checked);\n const { shift } = this.lastKeyPressed;\n if (\n ((noToggleButtonsChecked \|\| this.selectType !== \"single\") && !shift) \|\|\n (noToggleButtonsChecked && shift && relEl?.tagName == TOGGLE_GROUP)\n ) {\n toggleButtons[0]?.focus();\n } else if (!shift \|\| relEl?.tagName == TOGGLE_GROUP) {\n // if checked is true and selectMethod is \"single\", focus that toggle\n toggleButtons.filter((el) => el.checked)[0].focus();\n }\n };\n\n private handleKeyDown = ({ key }: KeyboardEvent) => {\n if (\n key !== \"ArrowDown\" &&\n key !== \"ArrowRight\" &&\n key !== \"ArrowLeft\" &&\n key !== \"ArrowUp\"\n )\n return;\n\n const toggleButtonOptions = this.getAllToggleButtons();\n const targetToggle =\n toggleButtonOptions[\n this.getNextItemToSelect(\n toggleButtonOptions.indexOf(\n toggleButtonOptions.filter((el) => el === document.activeElement)[0]\n ),\n key === \"ArrowDown\" \|\| key === \"ArrowRight\"\n )\n ];\n\n if (this.selectMethod === \"auto\") {\n // trigger selectHandler when unable to add 'target'\n targetToggle.checked = true;\n this.selectHandler(\n new CustomEvent(\"icToggleChecked\", {\n detail: {\n checked: targetToggle.checked,\n },\n }),\n targetToggle\n );\n } else {\n targetToggle.focus();\n }\n };\n\n private getNextItemToSelect = (currentItem: number, movingDown: boolean) => {\n const toggleButtonOptions = this.getAllToggleButtons();\n const numToggles = toggleButtonOptions.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n if (nextItem < 0) {\n nextItem = numToggles;\n } else if (nextItem > numToggles) {\n nextItem = 0;\n }\n\n if (toggleButtonOptions[nextItem].disabled) {\n nextItem = this.getNextItemToSelect(nextItem, movingDown);\n }\n\n return nextItem;\n };\n\n private getAllToggleButtons = () =>\n Array.from(this.el.querySelectorAll(\"ic-toggle-button\"));\n\n render() {\n const { accessibleLabel, disabled, fullWidth, loading, monochrome, theme } =\n this;\n\n return (\n <Host\n role=\"group\"\n aria-label={accessibleLabel}\n tabindex={0}\n class={{\n \"ic-toggle-button-group-disabled\": disabled,\n \"ic-toggle-button-group-full-width\": fullWidth,\n \"ic-toggle-button-group-loading\": loading,\n \"ic-toggle-button-group-monochrome\": monochrome,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n onFocus={this.handleHostFocus}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1,13 +1,23 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { r as removeDisabledFalse, a0 as isSlottedInGroup, o as onComponentRequiredPropUndefined, i as isSlotUsed } from './helpers.js';
+import { r as removeDisabledFalse, a1 as isSlottedInGroup, o as onComponentRequiredPropUndefined, i as isSlotUsed } from './helpers.js';
 import { d as defineCustomElement$5 } from './ic-button2.js';
 import { d as defineCustomElement$4 } from './ic-loading-indicator2.js';
 import { d as defineCustomElement$3 } from './ic-tooltip2.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
-const icToggleButtonCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{--toggle-button-border:var(--ic-toggle-button-unselected-border);--toggle-button-text-colour:var(--ic-toggle-button-unselected-text);--toggle-button-border-hover:var(--ic-toggle-button-unselected-border-hover);--toggle-button-text-colour-hover:var(\n    --ic-toggle-button-unselected-text-hover\n  );--toggle-button-border-active:var(\n    --ic-toggle-button-unselected-border-pressed\n  );--toggle-button-text-colour-active:var(\n    --ic-toggle-button-unselected-text-pressed\n  )}:host(.ic-toggle-button-checked){--toggle-button-border:var(--ic-toggle-button-selected-border);--toggle-button-text-colour:var(--ic-toggle-button-selected-text);--toggle-button-border-hover:var(--ic-toggle-button-selected-border-hover);--toggle-button-text-colour-hover:var(--ic-toggle-button-selected-text);--toggle-button-border-active:var(\n    --ic-toggle-button-selected-border-pressed\n  );--toggle-button-text-colour-active:var(--ic-toggle-button-selected-text)}:host(.ic-toggle-button-monochrome){--toggle-button-border:var(--ic-toggle-button-unselected-border-monochrome);--toggle-button-text-colour:var(\n    --ic-toggle-button-unselected-text-monochrome\n  );--toggle-button-border-hover:var(\n    --ic-toggle-button-unselected-border-hover-monochrome\n  );--toggle-button-text-colour-hover:var(\n    --ic-toggle-button-unselected-text-monochrome\n  );--toggle-button-border-active:var(\n    --ic-toggle-button-unselected-border-pressed-monochrome\n  );--toggle-button-text-colour-active:var(\n    --ic-toggle-button-unselected-text-monochrome\n  )}:host(.ic-toggle-button-monochrome.ic-toggle-button-checked){--toggle-button-border:var(--ic-toggle-button-selected-border-monochrome);--toggle-button-text-colour:var(--ic-toggle-button-selected-text-monochrome);--toggle-button-border-hover:var(\n    --ic-toggle-button-selected-border-hover-monochrome\n  );--toggle-button-text-colour-hover:var(\n    --ic-toggle-button-selected-text-monochrome\n  );--toggle-button-border-active:var(\n    --ic-toggle-button-selected-border-pressed-monochrome\n  );--toggle-button-text-colour-active:var(\n    --ic-toggle-button-selected-text-monochrome\n  )}:host(.ic-toggle-button-disabled){--toggle-button-border:var(--ic-toggle-button-unselected-border-disabled);--toggle-button-text-colour:var(--ic-toggle-button-unselected-text-disabled)}:host(.ic-toggle-button-disabled.ic-toggle-button-monochrome){--toggle-button-border:var(\n    --ic-toggle-button-unselected-border-disabled-monochrome\n  );--toggle-button-text-colour:var(\n    --ic-toggle-button-unselected-text-disabled-monochrome\n  )}:host(.ic-toggle-button-disabled.ic-toggle-button-checked){--toggle-button-border:var(--ic-toggle-button-selected-border-disabled);--toggle-button-text-colour:var(--ic-toggle-button-selected-text-disabled)}:host(.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome){--toggle-button-border:var(\n    --ic-toggle-button-selected-border-disabled-monochrome\n  );--toggle-button-text-colour:var(\n    --ic-toggle-button-selected-text-disabled-monochrome\n  )}:host(.expand-toggle-group-child) ::part(button){width:100%;min-height:inherit;white-space:inherit;height:inherit}:host ic-button{--icon-width:var(--ic-space-lg);--icon-height:var(--ic-space-lg)}:host(.expand-toggle-group-child) ic-button{min-width:100%;min-height:100%;white-space:normal;height:100%}:host(.expand-toggle-group-child) ::part(button):focus,:host(.expand-toggle-group-child.ic-toggle-button-checked) ::part(button):focus{box-shadow:inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-default),\n    var(--ic-border-focus)}:host(.expand-toggle-group-child.ic-toggle-button-light) ::part(button):focus,:host(.expand-toggle-group-child.ic-toggle-button-dark) ::part(button):focus{box-shadow:inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-monochrome-dark),\n    var(--ic-border-focus)}:host(:focus){z-index:1}:host ::part(button){border:var(--ic-border-width) solid var(--toggle-button-border);color:var(--toggle-button-text-colour)}:host ::part(button):hover{border:var(--ic-border-width) solid var(--toggle-button-border-hover);color:var(--toggle-button-text-colour-hover);background-color:var(--ic-toggle-button-unselected-background-hover)}:host ::part(button):active{border:var(--ic-border-width) solid var(--toggle-button-border-active);color:var(--toggle-button-text-colour-active);background-color:var(--ic-toggle-button-unselected-background-pressed)}:host(.ic-toggle-button-disabled) ::part(button){border:var(--ic-space-1px) dashed var(--toggle-button-border);color:var(--toggle-button-text-colour)}:host(.ic-toggle-button-checked) ::part(button){background-color:var(--ic-toggle-button-selected-background);box-shadow:inset 0 0 0 var(--ic-space-xxxs)\n    var(--ic-toggle-button-selected-text)}:host(.ic-toggle-button-checked) ::part(button):focus{box-shadow:inset 0 0 0 var(--ic-space-xxxs)\n      var(--ic-toggle-button-selected-border-focus),\n    var(--ic-border-focus)}:host(.ic-toggle-button-checked) ::part(button):hover{background-color:var(--ic-toggle-button-selected-background-hover)}:host(.ic-toggle-button-checked) ::part(button):active,:host(.ic-toggle-button-icon.ic-toggle-button-checked) ::part(button):active{background-color:var(--ic-toggle-button-selected-background-pressed)}:host(.ic-toggle-button-monochrome) ::part(button):hover{background-color:var(\n    --ic-toggle-button-unselected-background-hover-monochrome\n  )}:host(.ic-toggle-button-monochrome) ::part(button):active{background-color:var(\n    --ic-toggle-button-unselected-background-pressed-monochrome\n  )}:host(.ic-toggle-button-monochrome.ic-toggle-button-checked) ::part(button){background-color:var(--ic-toggle-button-selected-background-monochrome)}:host(.ic-toggle-button-monochrome.ic-toggle-button-checked) ::part(button):hover{background-color:var(\n    --ic-toggle-button-selected-background-hover-monochrome\n  )}:host(.ic-toggle-button-monochrome.ic-toggle-button-checked) ::part(button):active,:host(.ic-toggle-button-icon.ic-toggle-button-monochrome.ic-toggle-button-checked) ::part(button):active{background-color:var(\n    --ic-toggle-button-selected-background-pressed-monochrome\n  )}:host(.ic-toggle-button-monochrome.ic-toggle-button-checked) ::part(button):focus{box-shadow:inset 0 0 0 var(--ic-space-xxxs)\n      var(--ic-toggle-button-selected-text),\n    var(--ic-border-focus)}:host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button){background-color:transparent}:host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button)::before{background-image:radial-gradient(\n    var(--ic-toggle-button-selected-background-disabled) 95%,\n    white 20%\n  );background-repeat:no-repeat}:host(.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome) ::part(button),:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome) ::part(button)::before{background-image:radial-gradient(\n    var(--ic-toggle-button-selected-background-disabled-monochrome) 95%,\n    white 20%\n  );background-repeat:no-repeat}:host(.ic-toggle-button-icon) ::part(button){height:calc(var(--ic-space-xl) + var(--ic-space-xs));width:calc(var(--ic-space-xl) + var(--ic-space-xs))}:host(.ic-toggle-button-icon) ::part(button):active{background-color:var(--ic-action-default-bg-pressed)}:host(.ic-toggle-button-icon.ic-toggle-button-dark) ::part(button):active{background-color:var(--ic-action-dark-bg-pressed)}:host(.ic-toggle-button-icon.ic-toggle-button-light) ::part(button):active{background-color:var(--ic-action-light-bg-pressed)}:host(.ic-toggle-button-icon.ic-toggle-button-small) ::part(button){height:var(--ic-space-xl);width:var(--ic-space-xl)}:host(.ic-toggle-button-icon.ic-toggle-button-large) ::part(button){height:var(--ic-space-xxl);width:var(--ic-space-xxl)}:host(.ic-toggle-button-checked.ic-toggle-button-loading) ::part(button){--loading-button-background:var(\n    --ic-toggle-button-selected-background-pressed\n  );background-color:var(--ic-toggle-button-selected-background-pressed)}:host(.ic-toggle-button-loading) ::part(button){--loading-button-background:var(\n    --ic-toggle-button-unselected-background-pressed\n  );background-color:var(--ic-toggle-button-unselected-background-pressed)}:host(.ic-toggle-button-checked.ic-toggle-button-loading) ::part(ic-loading-container){--inner-color:var(--ic-toggle-button-loading-bar)}:host(.ic-toggle-button-loading) ::part(ic-loading-container){--inner-color:var(--ic-toggle-button-selected-loading-bar)}:host(.ic-toggle-button-checked.ic-toggle-button-loading.ic-toggle-button-monochrome) ::part(button){--loading-button-background:var(\n    --ic-toggle-button-selected-background-pressed-monochrome\n  );background-color:var(\n    --ic-toggle-button-selected-background-pressed-monochrome\n  )}:host(.ic-toggle-button-loading.ic-toggle-button-monochrome) ::part(button){--loading-button-background:var(\n    --ic-toggle-button-unselected-background-pressed-monochrome\n  );background-color:var(\n    --ic-toggle-button-unselected-background-pressed-monochrome\n  )}@media (forced-colors: active){:host(.ic-toggle-button-checked) ::part(button),:host(.ic-toggle-button-checked) ::part(button):hover{background-color:Highlight}:host(.ic-toggle-button-checked.ic-toggle-button-light) ::part(button),:host(.ic-toggle-button-checked.ic-toggle-button-light) ::part(button):hover{background-color:Highlight}:host(.ic-toggle-button-checked.ic-toggle-button-dark) ::part(button),:host(.ic-toggle-button-checked.ic-toggle-button-dark) ::part(button):hover{background-color:Highlight}:host(.ic-toggle-button-checked.ic-toggle-button-disabled) ::part(button){background-color:GrayText}:host(.ic-toggle-button-checked.ic-toggle-button-loading) ::part(button),:host(.ic-toggle-button-checked.ic-toggle-button-loading) ::part(button):hover{--loading-button-background:Highlight}}";
+const icToggleButtonCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{--toggle-button-border:var(--ic-toggle-button-unselected-border);--toggle-button-text-colour:var(--ic-toggle-button-unselected-text);--toggle-button-border-hover:var(--ic-toggle-button-unselected-border-hover);--toggle-button-text-colour-hover:var(\n    --ic-toggle-button-unselected-text-hover\n  );--toggle-button-border-active:var(\n    --ic-toggle-button-unselected-border-pressed\n  );--toggle-button-text-colour-active:var(\n    --ic-toggle-button-unselected-text-pressed\n  )}:host(:not(.expand-toggle-group-child)){display:inline-block;border-radius:var(--ic-border-radius);border:var(--ic-border-width) solid var(--toggle-button-border)}:host(.ic-toggle-button-full-width:not(.expand-toggle-group-child)){width:100%}:host(.ic-toggle-button-checked){--toggle-button-border:var(--ic-toggle-button-selected-border);--toggle-button-text-colour:var(--ic-toggle-button-selected-text);--toggle-button-border-hover:var(--ic-toggle-button-selected-border-hover);--toggle-button-text-colour-hover:var(--ic-toggle-button-selected-text);--toggle-button-border-active:var(\n    --ic-toggle-button-selected-border-pressed\n  );--toggle-button-text-colour-active:var(--ic-toggle-button-selected-text)}:host(.ic-toggle-button-monochrome){--toggle-button-border:var(--ic-toggle-button-unselected-border-monochrome);--toggle-button-text-colour:var(\n    --ic-toggle-button-unselected-text-monochrome\n  );--toggle-button-border-hover:var(\n    --ic-toggle-button-unselected-border-hover-monochrome\n  );--toggle-button-text-colour-hover:var(\n    --ic-toggle-button-unselected-text-monochrome\n  );--toggle-button-border-active:var(\n    --ic-toggle-button-unselected-border-pressed-monochrome\n  );--toggle-button-text-colour-active:var(\n    --ic-toggle-button-unselected-text-monochrome\n  )}:host(.ic-toggle-button-monochrome.ic-toggle-button-checked){--toggle-button-border:var(--ic-toggle-button-selected-border-monochrome);--toggle-button-text-colour:var(--ic-toggle-button-selected-text-monochrome);--toggle-button-border-hover:var(\n    --ic-toggle-button-selected-border-hover-monochrome\n  );--toggle-button-text-colour-hover:var(\n    --ic-toggle-button-selected-text-monochrome\n  );--toggle-button-border-active:var(\n    --ic-toggle-button-selected-border-pressed-monochrome\n  );--toggle-button-text-colour-active:var(\n    --ic-toggle-button-selected-text-monochrome\n  )}:host(.ic-toggle-button-disabled){--toggle-button-border:var(--ic-toggle-button-unselected-border-disabled);--toggle-button-text-colour:var(--ic-toggle-button-unselected-text-disabled)}:host(.ic-toggle-button-disabled.ic-toggle-button-monochrome){--toggle-button-border:var(\n    --ic-toggle-button-unselected-border-disabled-monochrome\n  );--toggle-button-text-colour:var(\n    --ic-toggle-button-unselected-text-disabled-monochrome\n  )}:host(.ic-toggle-button-disabled.ic-toggle-button-checked){--toggle-button-border:var(--ic-toggle-button-selected-border-disabled);--toggle-button-text-colour:var(--ic-toggle-button-selected-text-disabled)}:host(.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome){--toggle-button-border:var(\n    --ic-toggle-button-selected-border-disabled-monochrome\n  );--toggle-button-text-colour:var(\n    --ic-toggle-button-selected-text-disabled-monochrome\n  )}:host(.expand-toggle-group-child) ::part(button){width:100%}:host(.expand-toggle-group-child:not(.ic-toggle-button-loading)) ::part(button){min-height:inherit;height:auto}:host ic-button{--icon-width:var(--ic-space-lg);--icon-height:var(--ic-space-lg)}:host(.expand-toggle-group-child) ic-button{min-width:100%;min-height:100%;height:100%}:host(.expand-toggle-group-child) ::part(button):focus,:host(.expand-toggle-group-child.ic-toggle-button-checked) ::part(button):focus{box-shadow:inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-default),\n    var(--ic-border-focus)}:host(.expand-toggle-group-child.ic-toggle-button-light) ::part(button):focus,:host(.expand-toggle-group-child.ic-toggle-button-dark) ::part(button):focus{box-shadow:inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-monochrome-dark),\n    var(--ic-border-focus)}:host(:focus){z-index:1}:host ::part(button){border:none;color:var(--toggle-button-text-colour)}:host ::part(button):hover{color:var(--toggle-button-text-colour-hover);background-color:var(--ic-toggle-button-unselected-background-hover)}:host ::part(button):active{color:var(--toggle-button-text-colour-active);background-color:var(--ic-toggle-button-unselected-background-pressed)}:host ::part(button):focus{border:var(--ic-border-width) solid var(--toggle-button-border)}:host ::part(button):hover:focus{border:var(--ic-border-width) solid var(--toggle-button-border-hover)}:host ::part(button):active:focus{border:var(--ic-border-width) solid var(--toggle-button-border-active)}:host(.ic-toggle-button-disabled) ::part(button){color:var(--toggle-button-text-colour)}:host(:not(.expand-toggle-group-child)):has(ic-button:hover){border:var(--ic-border-width) solid var(--toggle-button-border-hover)}:host(:not(.expand-toggle-group-child)):has(ic-button:active){border:var(--ic-border-width) solid var(--toggle-button-border-active)}:host(:not(.expand-toggle-group-child).ic-toggle-button-disabled){border:var(--ic-border-width) dashed var(--toggle-button-border)}:host(.ic-toggle-button-checked) ::part(button){background-color:var(--ic-toggle-button-selected-background);box-shadow:inset 0 0 0 var(--ic-space-xxxs)\n    var(--ic-toggle-button-selected-text)}:host(.ic-toggle-button-checked) ::part(button):focus{box-shadow:inset 0 0 0 var(--ic-space-xxxs)\n      var(--ic-toggle-button-selected-border-focus),\n    var(--ic-border-focus)}:host(.ic-toggle-button-checked) ::part(button):hover{background-color:var(--ic-toggle-button-selected-background-hover)}:host(.ic-toggle-button-checked) ::part(button):active,:host(.ic-toggle-button-icon.ic-toggle-button-checked) ::part(button):active{background-color:var(--ic-toggle-button-selected-background-pressed)}:host(.ic-toggle-button-monochrome) ::part(button):hover{background-color:var(\n    --ic-toggle-button-unselected-background-hover-monochrome\n  )}:host(.ic-toggle-button-monochrome) ::part(button):active{background-color:var(\n    --ic-toggle-button-unselected-background-pressed-monochrome\n  )}:host(.ic-toggle-button-monochrome.ic-toggle-button-checked) ::part(button){background-color:var(--ic-toggle-button-selected-background-monochrome)}:host(.ic-toggle-button-monochrome.ic-toggle-button-checked) ::part(button):hover{background-color:var(\n    --ic-toggle-button-selected-background-hover-monochrome\n  )}:host(.ic-toggle-button-monochrome.ic-toggle-button-checked) ::part(button):active,:host(.ic-toggle-button-icon.ic-toggle-button-monochrome.ic-toggle-button-checked) ::part(button):active{background-color:var(\n    --ic-toggle-button-selected-background-pressed-monochrome\n  )}:host(.ic-toggle-button-monochrome.ic-toggle-button-checked) ::part(button):focus{box-shadow:inset 0 0 0 var(--ic-space-xxxs)\n      var(--ic-toggle-button-selected-text),\n    var(--ic-border-focus)}:host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button){background-color:transparent}:host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button)::before{background-image:radial-gradient(\n    var(--ic-toggle-button-selected-background-disabled) 95%,\n    white 20%\n  );background-repeat:no-repeat}:host(.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome) ::part(button),:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome) ::part(button)::before{background-image:radial-gradient(\n    var(--ic-toggle-button-selected-background-disabled-monochrome) 95%,\n    white 20%\n  );background-repeat:no-repeat}:host(.ic-toggle-button-icon) ::part(button){height:calc(var(--ic-space-xl) + var(--ic-space-xs));width:calc(var(--ic-space-xl) + var(--ic-space-xs))}:host(.ic-toggle-button-icon) ::part(button):active{background-color:var(--ic-action-default-bg-pressed)}:host(.ic-toggle-button-icon.ic-toggle-button-dark) ::part(button):active{background-color:var(--ic-action-dark-bg-pressed)}:host(.ic-toggle-button-icon.ic-toggle-button-light) ::part(button):active{background-color:var(--ic-action-light-bg-pressed)}:host(.ic-toggle-button-icon.ic-toggle-button-small) ::part(button){height:var(--ic-space-xl);width:var(--ic-space-xl)}:host(.ic-toggle-button-icon.ic-toggle-button-large) ::part(button){height:var(--ic-space-xxl);width:var(--ic-space-xxl)}:host(.ic-toggle-button-checked.ic-toggle-button-loading) ::part(button){--loading-button-background:var(\n    --ic-toggle-button-selected-background-pressed\n  );background-color:var(--ic-toggle-button-selected-background-pressed)}:host(.ic-toggle-button-loading) ::part(button){--loading-button-background:var(\n    --ic-toggle-button-unselected-background-pressed\n  );background-color:var(--ic-toggle-button-unselected-background-pressed)}:host(.ic-toggle-button-checked.ic-toggle-button-loading) ::part(ic-loading-container){--inner-color:var(--ic-toggle-button-loading-bar)}:host(.ic-toggle-button-loading) ::part(ic-loading-container){--inner-color:var(--ic-toggle-button-selected-loading-bar)}:host(.ic-toggle-button-checked.ic-toggle-button-loading.ic-toggle-button-monochrome) ::part(button){--loading-button-background:var(\n    --ic-toggle-button-selected-background-pressed-monochrome\n  );background-color:var(\n    --ic-toggle-button-selected-background-pressed-monochrome\n  )}:host(.ic-toggle-button-loading.ic-toggle-button-monochrome) ::part(button){--loading-button-background:var(\n    --ic-toggle-button-unselected-background-pressed-monochrome\n  );background-color:var(\n    --ic-toggle-button-unselected-background-pressed-monochrome\n  )}@media (forced-colors: active){:host(.ic-toggle-button-checked) ::part(button),:host(.ic-toggle-button-checked) ::part(button):hover{background-color:Highlight}:host(.ic-toggle-button-checked.ic-toggle-button-light) ::part(button),:host(.ic-toggle-button-checked.ic-toggle-button-light) ::part(button):hover{background-color:Highlight}:host(.ic-toggle-button-checked.ic-toggle-button-dark) ::part(button),:host(.ic-toggle-button-checked.ic-toggle-button-dark) ::part(button):hover{background-color:Highlight}:host(.ic-toggle-button-checked.ic-toggle-button-disabled) ::part(button){background-color:GrayText}:host(.ic-toggle-button-checked.ic-toggle-button-loading) ::part(button),:host(.ic-toggle-button-checked.ic-toggle-button-loading) ::part(button):hover{--loading-button-background:Highlight}}";
 const IcToggleButtonStyle0 = icToggleButtonCss;
+const TRACKED_ATTRIBUTES = [
+    "loading",
+    "disabled",
+    "full-width",
+    "icon-placement",
+    "variant",
+    "size",
+    "theme",
+    "monochrome",
+];
 const ToggleButton = /*@__PURE__*/ proxyCustomElement(class ToggleButton extends HTMLElement {
     constructor() {
         super();
@@ -54,72 +64,58 @@ const ToggleButton = /*@__PURE__*/ proxyCustomElement(class ToggleButton extends
          * The variant of the toggle button.
          */
         this.variant = "default";
-        this.loopAttributes = () => {
-            var _a;
-            const trackedAttributes = [
-                "loading",
-                "disabled",
-                "full-width",
-                "icon-placement",
-                "variant",
-                "size",
-                "theme",
-                "monochrome",
-            ];
-            const parentAttributes = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.attributes;
-            for (let i = 0; i < trackedAttributes.length; i++) {
-                if (parentAttributes &&
-                    parentAttributes.getNamedItem(trackedAttributes[i]) !== null) {
-                    const attribute = parentAttributes.getNamedItem(trackedAttributes[i]);
-                    if (attribute) {
-                        switch (attribute.name) {
-                            case trackedAttributes[0]:
-                                this.loading = attribute.value !== "false";
-                                break;
-                            case trackedAttributes[1]:
-                                this.disabled = attribute.value !== "false";
-                                break;
-                            case trackedAttributes[2]:
-                                this.fullWidth = attribute.value !== "false";
-                                break;
-                            case trackedAttributes[3]:
-                                this.iconPlacement = attribute.value;
-                                break;
-                            case trackedAttributes[4]:
-                                this.variant = attribute.value;
-                                break;
-                            case trackedAttributes[5]:
-                                this.size = attribute.value;
-                                break;
-                            case trackedAttributes[6]:
-                                this.theme = attribute.value;
-                                break;
-                            case trackedAttributes[7]:
-                                this.monochrome = attribute.value !== "false";
-                                break;
-                        }
-                    }
-                }
-            }
-        };
         this.handleFocus = (ev) => {
             ev.stopImmediatePropagation();
         };
         this.handleClick = () => {
-            !this.loading &&
-                !this.disabled &&
+            if (!this.loading && !this.disabled) {
                 this.icToggleChecked.emit({
                     checked: this.checked,
                 });
+            }
         };
     }
     watchDisabledHandler() {
         removeDisabledFalse(this.disabled, this.el);
     }
     componentWillLoad() {
+        var _a;
         removeDisabledFalse(this.disabled, this.el);
-        if (isSlottedInGroup(this.el)) {
-            this.loopAttributes();
+        if (!isSlottedInGroup(this.el))
+            return;
+        const parentAttributes = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.attributes;
+        if (!parentAttributes)
+            return;
+        for (let i = 0; i < TRACKED_ATTRIBUTES.length; i++) {
+            const attribute = parentAttributes.getNamedItem(TRACKED_ATTRIBUTES[i]);
+            if (!attribute)
+                continue;
+            switch (attribute.name) {
+                case TRACKED_ATTRIBUTES[0]:
+                    this.loading = attribute.value !== "false";
+                    break;
+                case TRACKED_ATTRIBUTES[1]:
+                    this.disabled = attribute.value !== "false";
+                    break;
+                case TRACKED_ATTRIBUTES[2]:
+                    this.fullWidth = attribute.value !== "false";
+                    break;
+                case TRACKED_ATTRIBUTES[3]:
+                    this.iconPlacement = attribute.value;
+                    break;
+                case TRACKED_ATTRIBUTES[4]:
+                    this.variant = attribute.value;
+                    break;
+                case TRACKED_ATTRIBUTES[5]:
+                    this.size = attribute.value;
+                    break;
+                case TRACKED_ATTRIBUTES[6]:
+                    this.theme = attribute.value;
+                    break;
+                case TRACKED_ATTRIBUTES[7]:
+                    this.monochrome = attribute.value !== "false";
+                    break;
+            }
         }
     }
     componentDidLoad() {
@@ -139,16 +135,18 @@ const ToggleButton = /*@__PURE__*/ proxyCustomElement(class ToggleButton extends
         }
     }
     render() {
-        return (h(Host, { key: 'c2130c0d6effca56347c9f898018b9125caa04e0', class: {
-                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-                ["ic-toggle-button-disabled"]: !!this.disabled,
-                ["ic-toggle-button-checked"]: !!this.checked,
-                ["ic-toggle-button-icon"]: this.variant === "icon",
-                [`ic-toggle-button-${this.size}`]: true,
-                ["ic-toggle-button-loading"]: !!this.loading,
-                ["ic-toggle-button-monochrome"]: !!this.monochrome,
-                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-            }, onFocus: this.handleFocus }, h("ic-button", { key: '99bad5b60f57cbecc96c02beff4ab248592abe5d', "aria-pressed": this.checked.toString(), variant: this.variant === "icon" ? "icon" : "secondary", onClick: this.handleClick, title: this.accessibleLabel, "aria-label": `${this.accessibleLabel ? this.accessibleLabel : this.label}, ${this.checked ? "ticked" : "unticked"}`, disabled: this.disabled, size: this.size, fullWidth: this.fullWidth, loading: this.loading, tooltipPlacement: this.tooltipPlacement }, this.variant !== "icon" && this.label, h("slot", { key: '449862b1dca9d441f3b37f4992d02c9666bc5fce' }), isSlotUsed(this.el, "icon") && (h("slot", { key: '7822805ee7c57ddddbab7ae2e1f881ea410a4c7d', name: "icon", slot: `${this.iconPlacement}-icon` })), isSlotUsed(this.el, "badge") && (h("slot", { key: 'c41f62db8ed4a6ab62e0af047c27be442c7aacfb', name: "badge", slot: "badge" })))));
+        const { accessibleLabel, checked, disabled, fullWidth, iconPlacement, monochrome, label, loading, size, theme, tooltipPlacement, variant, } = this;
+        const iconVariant = variant === "icon";
+        return (h(Host, { key: '64acdb10437030311b26805c7a5b4fb4e53a7641', class: {
+                "ic-toggle-button-checked": checked,
+                "ic-toggle-button-disabled": disabled,
+                "ic-toggle-button-icon": iconVariant,
+                "ic-toggle-button-loading": loading,
+                "ic-toggle-button-monochrome": monochrome,
+                "ic-toggle-button-full-width": fullWidth,
+                [`ic-toggle-button-${size}`]: true,
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            }, onFocus: this.handleFocus }, h("ic-button", { key: '7ec9db00accaa2e67f4797534f4ad2b304da6397', "aria-pressed": `${checked}`, variant: iconVariant ? "icon" : "secondary", onClick: this.handleClick, title: accessibleLabel, "aria-label": `${accessibleLabel ? accessibleLabel : label}, ${checked ? "ticked" : "unticked"}`, disabled: disabled, size: size, fullWidth: fullWidth, loading: loading, tooltipPlacement: tooltipPlacement }, !iconVariant && label, h("slot", { key: 'e84bac663f0dababe84c49180fbeabaaff23c24d' }), isSlotUsed(this.el, "icon") && (h("slot", { key: 'ee8b32317edb8d9f0dfcbdb0daa106a53bcf26d4', name: "icon", slot: `${iconPlacement}-icon` })), isSlotUsed(this.el, "badge") && (h("slot", { key: 'baa79552fb587d8f1167874dc55f47bbf9cf711b', name: "badge", slot: "badge" })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }

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

	@@ -1 +1 @@
1	- {"file":"ic-toggle-button.js","mappings":"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","names":[],"sources":["src/components/ic-toggle-button/ic-toggle-button.css?tag=ic-toggle-button&encapsulation=shadow","src/components/ic-toggle-button/ic-toggle-button.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/* VARIABLES FOR IC-TOGGLE-BUTTON-GROUP /\n:host {\n --toggle-button-border: var(--ic-toggle-button-unselected-border);\n --toggle-button-text-colour: var(--ic-toggle-button-unselected-text);\n --toggle-button-border-hover: var(--ic-toggle-button-unselected-border-hover);\n --toggle-button-text-colour-hover: var(\n --ic-toggle-button-unselected-text-hover\n );\n --toggle-button-border-active: var(\n --ic-toggle-button-unselected-border-pressed\n );\n --toggle-button-text-colour-active: var(\n --ic-toggle-button-unselected-text-pressed\n );\n}\n\n:host(.ic-toggle-button-checked) {\n --toggle-button-border: var(--ic-toggle-button-selected-border);\n --toggle-button-text-colour: var(--ic-toggle-button-selected-text);\n --toggle-button-border-hover: var(--ic-toggle-button-selected-border-hover);\n --toggle-button-text-colour-hover: var(--ic-toggle-button-selected-text);\n --toggle-button-border-active: var(\n --ic-toggle-button-selected-border-pressed\n );\n --toggle-button-text-colour-active: var(--ic-toggle-button-selected-text);\n}\n\n:host(.ic-toggle-button-monochrome) {\n --toggle-button-border: var(--ic-toggle-button-unselected-border-monochrome);\n --toggle-button-text-colour: var(\n --ic-toggle-button-unselected-text-monochrome\n );\n --toggle-button-border-hover: var(\n --ic-toggle-button-unselected-border-hover-monochrome\n );\n --toggle-button-text-colour-hover: var(\n --ic-toggle-button-unselected-text-monochrome\n );\n --toggle-button-border-active: var(\n --ic-toggle-button-unselected-border-pressed-monochrome\n );\n --toggle-button-text-colour-active: var(\n --ic-toggle-button-unselected-text-monochrome\n );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked) {\n --toggle-button-border: var(--ic-toggle-button-selected-border-monochrome);\n --toggle-button-text-colour: var(--ic-toggle-button-selected-text-monochrome);\n --toggle-button-border-hover: var(\n --ic-toggle-button-selected-border-hover-monochrome\n );\n --toggle-button-text-colour-hover: var(\n --ic-toggle-button-selected-text-monochrome\n );\n --toggle-button-border-active: var(\n --ic-toggle-button-selected-border-pressed-monochrome\n );\n --toggle-button-text-colour-active: var(\n --ic-toggle-button-selected-text-monochrome\n );\n}\n\n:host(.ic-toggle-button-disabled) {\n --toggle-button-border: var(--ic-toggle-button-unselected-border-disabled);\n --toggle-button-text-colour: var(--ic-toggle-button-unselected-text-disabled);\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-monochrome) {\n --toggle-button-border: var(\n --ic-toggle-button-unselected-border-disabled-monochrome\n );\n --toggle-button-text-colour: var(\n --ic-toggle-button-unselected-text-disabled-monochrome\n );\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked) {\n --toggle-button-border: var(--ic-toggle-button-selected-border-disabled);\n --toggle-button-text-colour: var(--ic-toggle-button-selected-text-disabled);\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome) {\n --toggle-button-border: var(\n --ic-toggle-button-selected-border-disabled-monochrome\n );\n --toggle-button-text-colour: var(\n --ic-toggle-button-selected-text-disabled-monochrome\n );\n}\n\n:host(.expand-toggle-group-child) ::part(button) {\n width: 100%;\n min-height: inherit;\n white-space: inherit;\n height: inherit;\n}\n\n:host ic-button {\n --icon-width: var(--ic-space-lg);\n --icon-height: var(--ic-space-lg);\n}\n\n:host(.expand-toggle-group-child) ic-button {\n min-width: 100%;\n min-height: 100%;\n white-space: normal;\n height: 100%;\n}\n\n:host(.expand-toggle-group-child) ::part(button):focus,\n:host(.expand-toggle-group-child.ic-toggle-button-checked)\n ::part(button):focus {\n box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-default),\n var(--ic-border-focus);\n}\n\n:host(.expand-toggle-group-child.ic-toggle-button-light) ::part(button):focus,\n:host(.expand-toggle-group-child.ic-toggle-button-dark) ::part(button):focus {\n box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-monochrome-dark),\n var(--ic-border-focus);\n}\n\n:host(:focus) {\n z-index: 1;\n}\n\n:host ::part(button) {\n border: var(--ic-border-width) solid var(--toggle-button-border);\n color: var(--toggle-button-text-colour);\n}\n\n:host ::part(button):hover {\n border: var(--ic-border-width) solid var(--toggle-button-border-hover);\n color: var(--toggle-button-text-colour-hover);\n background-color: var(--ic-toggle-button-unselected-background-hover);\n}\n\n:host ::part(button):active {\n border: var(--ic-border-width) solid var(--toggle-button-border-active);\n color: var(--toggle-button-text-colour-active);\n background-color: var(--ic-toggle-button-unselected-background-pressed);\n}\n\n:host(.ic-toggle-button-disabled) ::part(button) {\n border: var(--ic-space-1px) dashed var(--toggle-button-border);\n color: var(--toggle-button-text-colour);\n}\n\n:host(.ic-toggle-button-checked) ::part(button) {\n background-color: var(--ic-toggle-button-selected-background);\n box-shadow: inset 0 0 0 var(--ic-space-xxxs)\n var(--ic-toggle-button-selected-text);\n}\n\n:host(.ic-toggle-button-checked) ::part(button):focus {\n box-shadow: inset 0 0 0 var(--ic-space-xxxs)\n var(--ic-toggle-button-selected-border-focus),\n var(--ic-border-focus);\n}\n\n:host(.ic-toggle-button-checked) ::part(button):hover {\n background-color: var(--ic-toggle-button-selected-background-hover);\n}\n\n:host(.ic-toggle-button-checked) ::part(button):active,\n:host(.ic-toggle-button-icon.ic-toggle-button-checked) ::part(button):active {\n background-color: var(--ic-toggle-button-selected-background-pressed);\n}\n\n:host(.ic-toggle-button-monochrome) ::part(button):hover {\n background-color: var(\n --ic-toggle-button-unselected-background-hover-monochrome\n );\n}\n\n:host(.ic-toggle-button-monochrome) ::part(button):active {\n background-color: var(\n --ic-toggle-button-unselected-background-pressed-monochrome\n );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked) ::part(button) {\n background-color: var(--ic-toggle-button-selected-background-monochrome);\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked)\n ::part(button):hover {\n background-color: var(\n --ic-toggle-button-selected-background-hover-monochrome\n );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked)\n ::part(button):active,\n:host(.ic-toggle-button-icon.ic-toggle-button-monochrome.ic-toggle-button-checked)\n ::part(button):active {\n background-color: var(\n --ic-toggle-button-selected-background-pressed-monochrome\n );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked)\n ::part(button):focus {\n box-shadow: inset 0 0 0 var(--ic-space-xxxs)\n var(--ic-toggle-button-selected-text),\n var(--ic-border-focus);\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),\n:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked)\n ::part(button) {\n background-color: transparent;\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),\n:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked)\n ::part(button)::before {\n background-image: radial-gradient(\n var(--ic-toggle-button-selected-background-disabled) 95%,\n white 20%\n );\n background-repeat: no-repeat;\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome)\n ::part(button),\n:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome)\n ::part(button)::before {\n background-image: radial-gradient(\n var(--ic-toggle-button-selected-background-disabled-monochrome) 95%,\n white 20%\n );\n background-repeat: no-repeat;\n}\n\n:host(.ic-toggle-button-icon) ::part(button) {\n height: calc(var(--ic-space-xl) + var(--ic-space-xs));\n width: calc(var(--ic-space-xl) + var(--ic-space-xs));\n}\n\n:host(.ic-toggle-button-icon) ::part(button):active {\n background-color: var(--ic-action-default-bg-pressed);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-dark) ::part(button):active {\n background-color: var(--ic-action-dark-bg-pressed);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-light) ::part(button):active {\n background-color: var(--ic-action-light-bg-pressed);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-small) ::part(button) {\n height: var(--ic-space-xl);\n width: var(--ic-space-xl);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-large) ::part(button) {\n height: var(--ic-space-xxl);\n width: var(--ic-space-xxl);\n}\n\n:host(.ic-toggle-button-checked.ic-toggle-button-loading) ::part(button) {\n --loading-button-background: var(\n --ic-toggle-button-selected-background-pressed\n );\n\n background-color: var(--ic-toggle-button-selected-background-pressed);\n}\n\n:host(.ic-toggle-button-loading) ::part(button) {\n --loading-button-background: var(\n --ic-toggle-button-unselected-background-pressed\n );\n\n background-color: var(--ic-toggle-button-unselected-background-pressed);\n}\n\n:host(.ic-toggle-button-checked.ic-toggle-button-loading)\n ::part(ic-loading-container) {\n --inner-color: var(--ic-toggle-button-loading-bar);\n}\n\n:host(.ic-toggle-button-loading) ::part(ic-loading-container) {\n --inner-color: var(--ic-toggle-button-selected-loading-bar);\n}\n\n:host(.ic-toggle-button-checked.ic-toggle-button-loading.ic-toggle-button-monochrome)\n ::part(button) {\n --loading-button-background: var(\n --ic-toggle-button-selected-background-pressed-monochrome\n );\n\n background-color: var(\n --ic-toggle-button-selected-background-pressed-monochrome\n );\n}\n\n:host(.ic-toggle-button-loading.ic-toggle-button-monochrome) ::part(button) {\n --loading-button-background: var(\n --ic-toggle-button-unselected-background-pressed-monochrome\n );\n\n background-color: var(\n --ic-toggle-button-unselected-background-pressed-monochrome\n );\n}\n\n@media (forced-colors: active) {\n :host(.ic-toggle-button-checked) ::part(button),\n :host(.ic-toggle-button-checked) ::part(button):hover {\n background-color: Highlight;\n }\n\n :host(.ic-toggle-button-checked.ic-toggle-button-light) ::part(button),\n :host(.ic-toggle-button-checked.ic-toggle-button-light) ::part(button):hover {\n background-color: Highlight;\n }\n\n :host(.ic-toggle-button-checked.ic-toggle-button-dark) ::part(button),\n :host(.ic-toggle-button-checked.ic-toggle-button-dark) ::part(button):hover {\n background-color: Highlight;\n }\n\n :host(.ic-toggle-button-checked.ic-toggle-button-disabled) ::part(button) {\n background-color: GrayText;\n }\n\n :host(.ic-toggle-button-checked.ic-toggle-button-loading) ::part(button),\n :host(.ic-toggle-button-checked.ic-toggle-button-loading)\n ::part(button):hover {\n --loading-button-background: Highlight;\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n Event,\n EventEmitter,\n Listen,\n h,\n Watch,\n} from \"@stencil/core\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n isSlottedInGroup,\n} from \"../../utils/helpers\";\nimport {\n IcSizes,\n IcThemeMode,\n IcIconPlacementOptions,\n IcButtonTooltipPlacement,\n} from \"../../utils/types\";\n\n/\n @slot icon - Content will be displayed alongside the toggle button label.\n * @slot badge - Badge component overlaying the top right of the toggle button.\n /\n\n@Component({\n tag: \"ic-toggle-button\",\n styleUrl: \"ic-toggle-button.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class ToggleButton {\n @Element() el: HTMLIcToggleButtonElement;\n\n /\n The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons.\n /\n @Prop() accessibleLabel?: string;\n\n /\n If `true`, the toggle button will be in a checked state.\n /\n @Prop({ mutable: true, reflect: true }) checked?: boolean = false;\n\n /\n If `true`, the toggle button will be in disabled state.\n /\n @Prop({ mutable: true }) disabled?: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /\n If `true`, the toggle button will fill the width of the container.\n /\n @Prop({ mutable: true }) fullWidth?: boolean = false;\n\n /\n The placement of the icon in relation to the toggle button label.\n /\n @Prop() iconPlacement?: IcIconPlacementOptions = \"left\";\n\n /\n The label to display in the toggle button. This is required for the default variant of toggle buttons.\n /\n @Prop() label?: string;\n\n /\n If `true`, the toggle button will be in loading state.\n /\n @Prop({ mutable: true }) loading?: boolean = false;\n\n /\n If `true`, the toggle button will display as black in the light theme, and white in dark theme.\n /\n @Prop({ mutable: true }) monochrome?: boolean = false;\n\n /\n The size of the toggle button to be displayed.\n /\n @Prop({ mutable: true }) size?: IcSizes = \"medium\";\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 The position of the tooltip in relation to the toggle button.\n /\n @Prop() tooltipPlacement?: IcButtonTooltipPlacement = \"bottom\";\n\n /\n The variant of the toggle button.\n /\n @Prop({ reflect: true, mutable: true }) variant?: \"default\" \| \"icon\" =\n \"default\";\n\n /\n Emitted when the user clicks a toggle button.\n */\n @Event() icToggleChecked: EventEmitter<{\n checked: boolean;\n }>;\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n if (isSlottedInGroup(this.el)) {\n this.loopAttributes();\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [\n {\n prop: this.variant === \"icon\" ? this.accessibleLabel : this.label,\n propName: this.variant === \"icon\" ? \"accessible-label\" : \"label\",\n },\n ],\n \"Toggle button\"\n );\n }\n\n @Listen(\"click\", { capture: true })\n handleHostClick(e: Event): void {\n if (this.disabled) {\n e.stopImmediatePropagation();\n } else if (!this.loading) {\n this.checked = !this.checked;\n }\n }\n\n private loopAttributes = () => {\n const trackedAttributes: string[] = [\n \"loading\",\n \"disabled\",\n \"full-width\",\n \"icon-placement\",\n \"variant\",\n \"size\",\n \"theme\",\n \"monochrome\",\n ];\n const parentAttributes = this.el.parentElement?.attributes;\n for (let i = 0; i < trackedAttributes.length; i++) {\n if (\n parentAttributes &&\n parentAttributes.getNamedItem(trackedAttributes[i]) !== null\n ) {\n const attribute = parentAttributes.getNamedItem(trackedAttributes[i]);\n if (attribute) {\n switch (attribute.name) {\n case trackedAttributes[0]:\n this.loading = attribute.value !== \"false\";\n break;\n case trackedAttributes[1]:\n this.disabled = attribute.value !== \"false\";\n break;\n case trackedAttributes[2]:\n this.fullWidth = attribute.value !== \"false\";\n break;\n case trackedAttributes[3]:\n this.iconPlacement = attribute.value as \"left\" \| \"right\" \| \"top\";\n break;\n case trackedAttributes[4]:\n this.variant = attribute.value as \"default\" \| \"icon\";\n break;\n case trackedAttributes[5]:\n this.size = attribute.value as IcSizes;\n break;\n case trackedAttributes[6]:\n this.theme = attribute.value as IcThemeMode;\n break;\n case trackedAttributes[7]:\n this.monochrome = attribute.value !== \"false\";\n break;\n }\n }\n }\n }\n };\n\n private handleFocus = (ev: FocusEvent) => {\n ev.stopImmediatePropagation();\n };\n\n private handleClick = (): void => {\n !this.loading &&\n !this.disabled &&\n this.icToggleChecked.emit({\n checked: this.checked!,\n });\n };\n\n render() {\n return (\n <Host\n class={{\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n [\"ic-toggle-button-disabled\"]: !!this.disabled,\n [\"ic-toggle-button-checked\"]: !!this.checked,\n [\"ic-toggle-button-icon\"]: this.variant === \"icon\",\n [`ic-toggle-button-${this.size}`]: true,\n [\"ic-toggle-button-loading\"]: !!this.loading,\n [\"ic-toggle-button-monochrome\"]: !!this.monochrome,\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n onFocus={this.handleFocus}\n >\n <ic-button\n aria-pressed={this.checked!.toString()}\n variant={this.variant === \"icon\" ? \"icon\" : \"secondary\"}\n onClick={this.handleClick}\n title={this.accessibleLabel}\n aria-label={`${\n this.accessibleLabel ? this.accessibleLabel : this.label\n }, ${this.checked ? \"ticked\" : \"unticked\"}`}\n disabled={this.disabled}\n size={this.size}\n fullWidth={this.fullWidth}\n loading={this.loading}\n tooltipPlacement={this.tooltipPlacement}\n >\n {this.variant !== \"icon\" && this.label}\n <slot />\n {isSlotUsed(this.el, \"icon\") && (\n <slot name=\"icon\" slot={`${this.iconPlacement}-icon`}></slot>\n )}\n {isSlotUsed(this.el, \"badge\") && (\n <slot name=\"badge\" slot=\"badge\"></slot>\n )}\n </ic-button>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-toggle-button.js","mappings":"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","names":[],"sources":["src/components/ic-toggle-button/ic-toggle-button.css?tag=ic-toggle-button&encapsulation=shadow","src/components/ic-toggle-button/ic-toggle-button.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/* VARIABLES FOR IC-TOGGLE-BUTTON-GROUP /\n:host {\n --toggle-button-border: var(--ic-toggle-button-unselected-border);\n --toggle-button-text-colour: var(--ic-toggle-button-unselected-text);\n --toggle-button-border-hover: var(--ic-toggle-button-unselected-border-hover);\n --toggle-button-text-colour-hover: var(\n --ic-toggle-button-unselected-text-hover\n );\n --toggle-button-border-active: var(\n --ic-toggle-button-unselected-border-pressed\n );\n --toggle-button-text-colour-active: var(\n --ic-toggle-button-unselected-text-pressed\n );\n}\n\n:host(:not(.expand-toggle-group-child)) {\n display: inline-block;\n border-radius: var(--ic-border-radius);\n border: var(--ic-border-width) solid var(--toggle-button-border);\n}\n\n:host(.ic-toggle-button-full-width:not(.expand-toggle-group-child)) {\n width: 100%;\n}\n\n:host(.ic-toggle-button-checked) {\n --toggle-button-border: var(--ic-toggle-button-selected-border);\n --toggle-button-text-colour: var(--ic-toggle-button-selected-text);\n --toggle-button-border-hover: var(--ic-toggle-button-selected-border-hover);\n --toggle-button-text-colour-hover: var(--ic-toggle-button-selected-text);\n --toggle-button-border-active: var(\n --ic-toggle-button-selected-border-pressed\n );\n --toggle-button-text-colour-active: var(--ic-toggle-button-selected-text);\n}\n\n:host(.ic-toggle-button-monochrome) {\n --toggle-button-border: var(--ic-toggle-button-unselected-border-monochrome);\n --toggle-button-text-colour: var(\n --ic-toggle-button-unselected-text-monochrome\n );\n --toggle-button-border-hover: var(\n --ic-toggle-button-unselected-border-hover-monochrome\n );\n --toggle-button-text-colour-hover: var(\n --ic-toggle-button-unselected-text-monochrome\n );\n --toggle-button-border-active: var(\n --ic-toggle-button-unselected-border-pressed-monochrome\n );\n --toggle-button-text-colour-active: var(\n --ic-toggle-button-unselected-text-monochrome\n );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked) {\n --toggle-button-border: var(--ic-toggle-button-selected-border-monochrome);\n --toggle-button-text-colour: var(--ic-toggle-button-selected-text-monochrome);\n --toggle-button-border-hover: var(\n --ic-toggle-button-selected-border-hover-monochrome\n );\n --toggle-button-text-colour-hover: var(\n --ic-toggle-button-selected-text-monochrome\n );\n --toggle-button-border-active: var(\n --ic-toggle-button-selected-border-pressed-monochrome\n );\n --toggle-button-text-colour-active: var(\n --ic-toggle-button-selected-text-monochrome\n );\n}\n\n:host(.ic-toggle-button-disabled) {\n --toggle-button-border: var(--ic-toggle-button-unselected-border-disabled);\n --toggle-button-text-colour: var(--ic-toggle-button-unselected-text-disabled);\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-monochrome) {\n --toggle-button-border: var(\n --ic-toggle-button-unselected-border-disabled-monochrome\n );\n --toggle-button-text-colour: var(\n --ic-toggle-button-unselected-text-disabled-monochrome\n );\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked) {\n --toggle-button-border: var(--ic-toggle-button-selected-border-disabled);\n --toggle-button-text-colour: var(--ic-toggle-button-selected-text-disabled);\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome) {\n --toggle-button-border: var(\n --ic-toggle-button-selected-border-disabled-monochrome\n );\n --toggle-button-text-colour: var(\n --ic-toggle-button-selected-text-disabled-monochrome\n );\n}\n\n:host(.expand-toggle-group-child) ::part(button) {\n width: 100%;\n}\n\n:host(.expand-toggle-group-child:not(.ic-toggle-button-loading))\n ::part(button) {\n min-height: inherit;\n height: auto;\n}\n\n:host ic-button {\n --icon-width: var(--ic-space-lg);\n --icon-height: var(--ic-space-lg);\n}\n\n:host(.expand-toggle-group-child) ic-button {\n min-width: 100%;\n min-height: 100%;\n height: 100%;\n}\n\n:host(.expand-toggle-group-child) ::part(button):focus,\n:host(.expand-toggle-group-child.ic-toggle-button-checked)\n ::part(button):focus {\n box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-default),\n var(--ic-border-focus);\n}\n\n:host(.expand-toggle-group-child.ic-toggle-button-light) ::part(button):focus,\n:host(.expand-toggle-group-child.ic-toggle-button-dark) ::part(button):focus {\n box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-monochrome-dark),\n var(--ic-border-focus);\n}\n\n:host(:focus) {\n z-index: 1;\n}\n\n:host ::part(button) {\n border: none;\n color: var(--toggle-button-text-colour);\n}\n\n:host ::part(button):hover {\n color: var(--toggle-button-text-colour-hover);\n background-color: var(--ic-toggle-button-unselected-background-hover);\n}\n\n:host ::part(button):active {\n color: var(--toggle-button-text-colour-active);\n background-color: var(--ic-toggle-button-unselected-background-pressed);\n}\n\n:host ::part(button):focus {\n border: var(--ic-border-width) solid var(--toggle-button-border);\n}\n\n:host ::part(button):hover:focus {\n border: var(--ic-border-width) solid var(--toggle-button-border-hover);\n}\n\n:host ::part(button):active:focus {\n border: var(--ic-border-width) solid var(--toggle-button-border-active);\n}\n\n:host(.ic-toggle-button-disabled) ::part(button) {\n color: var(--toggle-button-text-colour);\n}\n\n:host(:not(.expand-toggle-group-child)):has(ic-button:hover) {\n border: var(--ic-border-width) solid var(--toggle-button-border-hover);\n}\n\n:host(:not(.expand-toggle-group-child)):has(ic-button:active) {\n border: var(--ic-border-width) solid var(--toggle-button-border-active);\n}\n\n:host(:not(.expand-toggle-group-child).ic-toggle-button-disabled) {\n border: var(--ic-border-width) dashed var(--toggle-button-border);\n}\n\n:host(.ic-toggle-button-checked) ::part(button) {\n background-color: var(--ic-toggle-button-selected-background);\n box-shadow: inset 0 0 0 var(--ic-space-xxxs)\n var(--ic-toggle-button-selected-text);\n}\n\n:host(.ic-toggle-button-checked) ::part(button):focus {\n box-shadow: inset 0 0 0 var(--ic-space-xxxs)\n var(--ic-toggle-button-selected-border-focus),\n var(--ic-border-focus);\n}\n\n:host(.ic-toggle-button-checked) ::part(button):hover {\n background-color: var(--ic-toggle-button-selected-background-hover);\n}\n\n:host(.ic-toggle-button-checked) ::part(button):active,\n:host(.ic-toggle-button-icon.ic-toggle-button-checked) ::part(button):active {\n background-color: var(--ic-toggle-button-selected-background-pressed);\n}\n\n:host(.ic-toggle-button-monochrome) ::part(button):hover {\n background-color: var(\n --ic-toggle-button-unselected-background-hover-monochrome\n );\n}\n\n:host(.ic-toggle-button-monochrome) ::part(button):active {\n background-color: var(\n --ic-toggle-button-unselected-background-pressed-monochrome\n );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked) ::part(button) {\n background-color: var(--ic-toggle-button-selected-background-monochrome);\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked)\n ::part(button):hover {\n background-color: var(\n --ic-toggle-button-selected-background-hover-monochrome\n );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked)\n ::part(button):active,\n:host(.ic-toggle-button-icon.ic-toggle-button-monochrome.ic-toggle-button-checked)\n ::part(button):active {\n background-color: var(\n --ic-toggle-button-selected-background-pressed-monochrome\n );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked)\n ::part(button):focus {\n box-shadow: inset 0 0 0 var(--ic-space-xxxs)\n var(--ic-toggle-button-selected-text),\n var(--ic-border-focus);\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),\n:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked)\n ::part(button) {\n background-color: transparent;\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),\n:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked)\n ::part(button)::before {\n background-image: radial-gradient(\n var(--ic-toggle-button-selected-background-disabled) 95%,\n white 20%\n );\n background-repeat: no-repeat;\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome)\n ::part(button),\n:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome)\n ::part(button)::before {\n background-image: radial-gradient(\n var(--ic-toggle-button-selected-background-disabled-monochrome) 95%,\n white 20%\n );\n background-repeat: no-repeat;\n}\n\n:host(.ic-toggle-button-icon) ::part(button) {\n height: calc(var(--ic-space-xl) + var(--ic-space-xs));\n width: calc(var(--ic-space-xl) + var(--ic-space-xs));\n}\n\n:host(.ic-toggle-button-icon) ::part(button):active {\n background-color: var(--ic-action-default-bg-pressed);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-dark) ::part(button):active {\n background-color: var(--ic-action-dark-bg-pressed);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-light) ::part(button):active {\n background-color: var(--ic-action-light-bg-pressed);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-small) ::part(button) {\n height: var(--ic-space-xl);\n width: var(--ic-space-xl);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-large) ::part(button) {\n height: var(--ic-space-xxl);\n width: var(--ic-space-xxl);\n}\n\n:host(.ic-toggle-button-checked.ic-toggle-button-loading) ::part(button) {\n --loading-button-background: var(\n --ic-toggle-button-selected-background-pressed\n );\n\n background-color: var(--ic-toggle-button-selected-background-pressed);\n}\n\n:host(.ic-toggle-button-loading) ::part(button) {\n --loading-button-background: var(\n --ic-toggle-button-unselected-background-pressed\n );\n\n background-color: var(--ic-toggle-button-unselected-background-pressed);\n}\n\n:host(.ic-toggle-button-checked.ic-toggle-button-loading)\n ::part(ic-loading-container) {\n --inner-color: var(--ic-toggle-button-loading-bar);\n}\n\n:host(.ic-toggle-button-loading) ::part(ic-loading-container) {\n --inner-color: var(--ic-toggle-button-selected-loading-bar);\n}\n\n:host(.ic-toggle-button-checked.ic-toggle-button-loading.ic-toggle-button-monochrome)\n ::part(button) {\n --loading-button-background: var(\n --ic-toggle-button-selected-background-pressed-monochrome\n );\n\n background-color: var(\n --ic-toggle-button-selected-background-pressed-monochrome\n );\n}\n\n:host(.ic-toggle-button-loading.ic-toggle-button-monochrome) ::part(button) {\n --loading-button-background: var(\n --ic-toggle-button-unselected-background-pressed-monochrome\n );\n\n background-color: var(\n --ic-toggle-button-unselected-background-pressed-monochrome\n );\n}\n\n@media (forced-colors: active) {\n :host(.ic-toggle-button-checked) ::part(button),\n :host(.ic-toggle-button-checked) ::part(button):hover {\n background-color: Highlight;\n }\n\n :host(.ic-toggle-button-checked.ic-toggle-button-light) ::part(button),\n :host(.ic-toggle-button-checked.ic-toggle-button-light) ::part(button):hover {\n background-color: Highlight;\n }\n\n :host(.ic-toggle-button-checked.ic-toggle-button-dark) ::part(button),\n :host(.ic-toggle-button-checked.ic-toggle-button-dark) ::part(button):hover {\n background-color: Highlight;\n }\n\n :host(.ic-toggle-button-checked.ic-toggle-button-disabled) ::part(button) {\n background-color: GrayText;\n }\n\n :host(.ic-toggle-button-checked.ic-toggle-button-loading) ::part(button),\n :host(.ic-toggle-button-checked.ic-toggle-button-loading)\n ::part(button):hover {\n --loading-button-background: Highlight;\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n Event,\n EventEmitter,\n Listen,\n h,\n Watch,\n} from \"@stencil/core\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n isSlottedInGroup,\n} from \"../../utils/helpers\";\nimport {\n IcSizes,\n IcThemeMode,\n IcIconPlacementOptions,\n IcButtonTooltipPlacement,\n} from \"../../utils/types\";\n\nconst TRACKED_ATTRIBUTES = [\n \"loading\",\n \"disabled\",\n \"full-width\",\n \"icon-placement\",\n \"variant\",\n \"size\",\n \"theme\",\n \"monochrome\",\n];\n\n/\n @slot icon - Content will be displayed alongside the toggle button label.\n * @slot badge - Badge component overlaying the top right of the toggle button.\n /\n\n@Component({\n tag: \"ic-toggle-button\",\n styleUrl: \"ic-toggle-button.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class ToggleButton {\n @Element() el: HTMLIcToggleButtonElement;\n\n /\n The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons.\n /\n @Prop() accessibleLabel?: string;\n\n /\n If `true`, the toggle button will be in a checked state.\n /\n @Prop({ mutable: true, reflect: true }) checked = false;\n\n /\n If `true`, the toggle button will be in disabled state.\n /\n @Prop({ mutable: true }) disabled = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /\n If `true`, the toggle button will fill the width of the container.\n /\n @Prop({ mutable: true }) fullWidth = false;\n\n /\n The placement of the icon in relation to the toggle button label.\n /\n @Prop() iconPlacement: IcIconPlacementOptions = \"left\";\n\n /\n The label to display in the toggle button. This is required for the default variant of toggle buttons.\n /\n @Prop() label?: string;\n\n /\n If `true`, the toggle button will be in loading state.\n /\n @Prop({ mutable: true }) loading = false;\n\n /\n If `true`, the toggle button will display as black in the light theme, and white in dark theme.\n /\n @Prop({ mutable: true }) monochrome = false;\n\n /\n The size of the toggle button to be displayed.\n /\n @Prop({ mutable: true }) size: IcSizes = \"medium\";\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 The position of the tooltip in relation to the toggle button.\n /\n @Prop() tooltipPlacement: IcButtonTooltipPlacement = \"bottom\";\n\n /\n The variant of the toggle button.\n /\n @Prop({ reflect: true, mutable: true }) variant: \"default\" \| \"icon\" =\n \"default\";\n\n /\n Emitted when the user clicks a toggle button.\n */\n @Event() icToggleChecked: EventEmitter<{\n checked: boolean;\n }>;\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n if (!isSlottedInGroup(this.el)) return;\n\n const parentAttributes = this.el.parentElement?.attributes;\n if (!parentAttributes) return;\n\n for (let i = 0; i < TRACKED_ATTRIBUTES.length; i++) {\n const attribute = parentAttributes.getNamedItem(TRACKED_ATTRIBUTES[i]);\n if (!attribute) continue;\n\n switch (attribute.name) {\n case TRACKED_ATTRIBUTES[0]:\n this.loading = attribute.value !== \"false\";\n break;\n case TRACKED_ATTRIBUTES[1]:\n this.disabled = attribute.value !== \"false\";\n break;\n case TRACKED_ATTRIBUTES[2]:\n this.fullWidth = attribute.value !== \"false\";\n break;\n case TRACKED_ATTRIBUTES[3]:\n this.iconPlacement = attribute.value as IcIconPlacementOptions;\n break;\n case TRACKED_ATTRIBUTES[4]:\n this.variant = attribute.value as \"default\" \| \"icon\";\n break;\n case TRACKED_ATTRIBUTES[5]:\n this.size = attribute.value as IcSizes;\n break;\n case TRACKED_ATTRIBUTES[6]:\n this.theme = attribute.value as IcThemeMode;\n break;\n case TRACKED_ATTRIBUTES[7]:\n this.monochrome = attribute.value !== \"false\";\n break;\n }\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [\n {\n prop: this.variant === \"icon\" ? this.accessibleLabel : this.label,\n propName: this.variant === \"icon\" ? \"accessible-label\" : \"label\",\n },\n ],\n \"Toggle button\"\n );\n }\n\n @Listen(\"click\", { capture: true })\n handleHostClick(e: Event): void {\n if (this.disabled) {\n e.stopImmediatePropagation();\n } else if (!this.loading) {\n this.checked = !this.checked;\n }\n }\n\n private handleFocus = (ev: FocusEvent) => {\n ev.stopImmediatePropagation();\n };\n\n private handleClick = () => {\n if (!this.loading && !this.disabled) {\n this.icToggleChecked.emit({\n checked: this.checked,\n });\n }\n };\n\n render() {\n const {\n accessibleLabel,\n checked,\n disabled,\n fullWidth,\n iconPlacement,\n monochrome,\n label,\n loading,\n size,\n theme,\n tooltipPlacement,\n variant,\n } = this;\n\n const iconVariant = variant === \"icon\";\n\n return (\n <Host\n class={{\n \"ic-toggle-button-checked\": checked,\n \"ic-toggle-button-disabled\": disabled,\n \"ic-toggle-button-icon\": iconVariant,\n \"ic-toggle-button-loading\": loading,\n \"ic-toggle-button-monochrome\": monochrome,\n \"ic-toggle-button-full-width\": fullWidth,\n [`ic-toggle-button-${size}`]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n onFocus={this.handleFocus}\n >\n <ic-button\n aria-pressed={`${checked}`}\n variant={iconVariant ? \"icon\" : \"secondary\"}\n onClick={this.handleClick}\n title={accessibleLabel}\n aria-label={`${accessibleLabel ? accessibleLabel : label}, ${\n checked ? \"ticked\" : \"unticked\"\n }`}\n disabled={disabled}\n size={size}\n fullWidth={fullWidth}\n loading={loading}\n tooltipPlacement={tooltipPlacement}\n >\n {!iconVariant && label}\n <slot />\n {isSlotUsed(this.el, \"icon\") && (\n <slot name=\"icon\" slot={`${iconPlacement}-icon`}></slot>\n )}\n {isSlotUsed(this.el, \"badge\") && (\n <slot name=\"badge\" slot=\"badge\"></slot>\n )}\n </ic-button>\n </Host>\n );\n }\n}\n"],"version":3}