@ukic/canary-web-components 3.0.0-canary.31 → 3.0.0-canary.33

package/dist/esm/ic-toggle-button_2.entry.js

@@ -0,0 +1,449 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a7a720e7.js';
+import { o as onComponentRequiredPropUndefined, N as isSlottedInGroup, r as removeDisabledFalse, i as isSlotUsed } from './helpers-063369f4.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(: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  )}:host(.ic-toggle-button-hide-outline){--toggle-button-border:transparent !important;--toggle-button-border-hover:transparent !important;--toggle-button-border-active:transparent !important}:host(.ic-toggle-button-hide-outline) ::part(button):focus{border:none}:host(.expand-toggle-group-child.ic-toggle-button-hide-outline) ::part(button):focus,:host(.expand-toggle-group-child.ic-toggle-button-hide-outline.ic-toggle-button-checked) ::part(button):focus{box-shadow:var(--ic-border-focus)}@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",
+    "outline",
+];
+const ToggleButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.icToggleChecked = createEvent(this, "icToggleChecked", 7);
+        /**
+         * If `true`, the toggle button will be in a checked state.
+         */
+        this.checked = false;
+        /**
+         * If `true`, the toggle button will be in disabled state.
+         */
+        this.disabled = false;
+        /**
+         * If `true`, the toggle button will fill the width of the container.
+         */
+        this.fullWidth = false;
+        /**
+         * The placement of the icon in relation to the toggle button label.
+         */
+        this.iconPlacement = "left";
+        /**
+         * If `true`, the toggle button will be in loading state.
+         */
+        this.loading = false;
+        /**
+         * If `true`, the toggle button will display as black in the light theme, and white in dark theme.
+         */
+        this.monochrome = false;
+        /**
+         * If `true`, the toggle button will display with an outline.
+         */
+        this.outline = true;
+        /**
+         * The size of the toggle button to be displayed.
+         */
+        this.size = "medium";
+        /**
+         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        this.theme = "inherit";
+        /**
+         * The position of the tooltip in relation to the toggle button.
+         */
+        this.tooltipPlacement = "bottom";
+        /**
+         * The variant of the toggle button.
+         */
+        this.variant = "default";
+        this.handleFocus = (ev) => {
+            ev.stopImmediatePropagation();
+        };
+        this.handleClick = () => {
+            if (!this.loading && !this.disabled) {
+                this.icToggleChecked.emit({
+                    checked: this.checked,
+                });
+            }
+        };
+    }
+    watchDisabledHandler() {
+        this.syncPropsFromToggleButtonGroup();
+    }
+    componentWillLoad() {
+        this.syncPropsFromToggleButtonGroup();
+    }
+    componentDidLoad() {
+        onComponentRequiredPropUndefined([
+            {
+                prop: this.variant === "icon" ? this.accessibleLabel : this.label,
+                propName: this.variant === "icon" ? "accessible-label" : "label",
+            },
+        ], "Toggle button");
+    }
+    handleHostClick(e) {
+        if (this.disabled) {
+            e.stopImmediatePropagation();
+        }
+        else if (!this.loading) {
+            this.checked = !this.checked;
+        }
+    }
+    syncPropsFromToggleButtonGroup() {
+        var _a;
+        let groupDisabled = false;
+        if (isSlottedInGroup(this.el)) {
+            const parentAttributes = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.attributes;
+            if (parentAttributes) {
+                const groupDisabledAttr = parentAttributes.getNamedItem("disabled");
+                if (groupDisabledAttr && groupDisabledAttr.value !== "false") {
+                    groupDisabled = true;
+                }
+                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 = groupDisabled
+                                ? true
+                                : 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;
+                        case TRACKED_ATTRIBUTES[8]:
+                            this.outline = attribute.value !== "false";
+                            break;
+                    }
+                }
+                if (groupDisabled) {
+                    this.disabled = true;
+                }
+            }
+        }
+        removeDisabledFalse(this.disabled, this.el);
+    }
+    render() {
+        const { accessibleLabel, checked, disabled, fullWidth, iconPlacement, monochrome, label, loading, outline, size, theme, tooltipPlacement, variant, } = this;
+        const iconVariant = variant === "icon";
+        return (h(Host, { key: '74d882ab9a0ea86b7f1b1eaa74a40ee32fd44800', 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-hide-outline": !outline,
+                [`ic-toggle-button-${size}`]: true,
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            }, onFocus: this.handleFocus }, h("ic-button", { key: '067df9f2c2b9a6f6a21d1a70ddac41b7ae1c9f13', "aria-pressed": `${checked}`, variant: iconVariant ? "icon-tertiary" : "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: 'e6b0d906bda4695ab9e64da852a99da851001974' }), isSlotUsed(this.el, "icon") && (h("slot", { key: '70b5c83cca0a126ab9eafa9d84327c83e6936ce8', name: "icon", slot: `${iconPlacement}-icon` })), isSlotUsed(this.el, "badge") && (h("slot", { key: 'c43ead3695a0f7a019b3eb0aa4b396f85c0e96eb', name: "badge", slot: "badge" })))));
+    }
+    static get delegatesFocus() { return true; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "disabled": ["watchDisabledHandler"]
+    }; }
+};
+ToggleButton.style = IcToggleButtonStyle0;
+
+const icToggleButtonGroupCss = "/*! 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}:root{display:block}:host{display:flex;flex-direction:row;width:-moz-fit-content;width:fit-content;min-width:-moz-min-content;min-width:min-content;border:var(--ic-border-width) solid var(--ic-toggle-button-unselected-border);border-radius:var(--ic-border-radius)}:host(.ic-toggle-button-group-full-width){width:100%;max-width:100%}:host(.ic-toggle-button-group-loading){min-width:-moz-max-content;min-width:max-content}:host(:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-transition-duration-fast);outline:none}::slotted(ic-toggle-button){flex-grow:1;width:-moz-min-content;width:min-content;--toggle-button-border:none !important;--toggle-button-border-hover:none !important;--toggle-button-border-active:none !important}::slotted(ic-toggle-button:not(:last-of-type)){border-right:var(--ic-border-width) solid\n    var(--ic-toggle-button-unselected-border)}:host(.ic-toggle-button-group-disabled){border:var(--ic-space-1px) dashed\n    var(--ic-toggle-button-unselected-border-disabled);pointer-events:none}:host(.ic-toggle-button-group-disabled) ::slotted(ic-toggle-button:not(:last-of-type)){border-right:var(--ic-space-1px) dashed\n    var(--ic-toggle-button-unselected-border-disabled)}:host(.ic-toggle-button-group-monochrome){border:var(--ic-border-width) solid\n    var(--ic-toggle-button-unselected-border-monochrome)}:host(.ic-toggle-button-group-monochrome) ::slotted(ic-toggle-button:not(:last-of-type)){border-right:var(--ic-border-width) solid\n    var(--ic-toggle-button-unselected-border-monochrome)}:host(.ic-toggle-button-group-disabled.ic-toggle-button-group-monochrome){border:var(--ic-border-width) dashed\n    var(--ic-toggle-button-unselected-border-disabled-monochrome)}:host(.ic-toggle-button-group-disabled.ic-toggle-button-group-monochrome) ::slotted(ic-toggle-button:not(:last-of-type)){border-right:var(--ic-border-width) solid\n    var(--ic-toggle-button-unselected-border-disabled-monochrome)}:host(.ic-toggle-button-group-hide-outline){--ic-toggle-button-unselected-border:transparent;--ic-toggle-button-unselected-border-disabled:transparent;--ic-toggle-button-unselected-border-monochrome:transparent;--ic-toggle-button-unselected-border-disabled-monochrome:transparent}";
+const IcToggleButtonGroupStyle0 = icToggleButtonGroupCss;
+
+const TOGGLE_GROUP = "IC-TOGGLE-BUTTON-GROUP";
+const ToggleButtonGroup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.icChange = createEvent(this, "icChange", 7);
+        this.lastKeyPressed = {
+            key: null,
+            shift: false,
+        };
+        this.externallySetActiveToggle = null;
+        /**
+         * The accessible label of the toggle button group component to provide context for screen reader users.
+         */
+        this.accessibleLabel = "Toggle button group";
+        /**
+         * If `true`, the toggle button group will be set to the disabled state.
+         */
+        this.disabled = false;
+        /**
+         * If `true`, the toggle button group will fill the width of the container.
+         */
+        this.fullWidth = false;
+        /**
+         * If `true`, the toggle button group will be in loading state.
+         */
+        this.loading = false;
+        /**
+         * If `true`, the toggle button group will display as black in the light theme, and white in dark theme.
+         */
+        this.monochrome = false;
+        /**
+         * If `true`, the toggle button group will display with an outline.
+         */
+        this.outline = true;
+        /**
+         * 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`.
+         */
+        this.selectMethod = "manual";
+        /**
+         * Sets whether single or multiple options can be toggled. If `multi`, then the `selectMethod` is always `manual`.
+         */
+        this.selectType = "single";
+        /**
+         * The size of the toggle buttons to be displayed. This does not affect the font size of the accessible label.
+         */
+        this.size = "medium";
+        /**
+         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        this.theme = "inherit";
+        /**
+         * The position of the tooltip in relation to the toggle buttons.
+         */
+        this.tooltipPlacement = "bottom";
+        /**
+         * The variant of the toggle button.
+         */
+        this.variant = "default";
+        this.keyListener = (ev) => {
+            this.lastKeyPressed = {
+                key: ev.key,
+                shift: ev.shiftKey,
+            };
+        };
+        this.handleHostFocus = ({ target, relatedTarget }) => {
+            var _a;
+            if (this.disabled) {
+                target === null || target === void 0 ? void 0 : target.blur();
+                return;
+            }
+            if (this.loading)
+                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();
+            }
+            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
+                toggleButtons.filter((el) => el.checked)[0].focus();
+            }
+        };
+        this.handleKeyDown = ({ key }) => {
+            if (key !== "ArrowDown" &&
+                key !== "ArrowRight" &&
+                key !== "ArrowLeft" &&
+                key !== "ArrowUp")
+                return;
+            const toggleButtonOptions = this.getAllToggleButtons();
+            let targetToggle;
+            if (this.externallySetActiveToggle) {
+                targetToggle =
+                    toggleButtonOptions[this.getNextItemToSelect(toggleButtonOptions.indexOf(toggleButtonOptions.filter((el) => el === this.externallySetActiveToggle)[0]), key === "ArrowDown" || key === "ArrowRight")];
+            }
+            else {
+                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) => {
+            const toggleButtonOptions = this.getAllToggleButtons();
+            const numToggles = toggleButtonOptions.length - 1;
+            if (currentItem < 1) {
+                currentItem = 0;
+            }
+            let nextItem = movingDown ? currentItem + 1 : currentItem - 1;
+            if (nextItem < 0) {
+                nextItem = numToggles;
+            }
+            else if (nextItem > numToggles) {
+                nextItem = 0;
+            }
+            if (toggleButtonOptions[nextItem].disabled) {
+                nextItem = this.getNextItemToSelect(nextItem, movingDown);
+            }
+            return nextItem;
+        };
+        this.getAllToggleButtons = () => Array.from(this.el.querySelectorAll("ic-toggle-button"));
+    }
+    watchDisabledHandler() {
+        this.getAllToggleButtons().forEach((el) => {
+            el.disabled = this.disabled;
+        });
+        removeDisabledFalse(this.disabled, this.el);
+    }
+    watchFullWidthHandler() {
+        this.getAllToggleButtons().forEach((el) => {
+            el.fullWidth = this.fullWidth;
+        });
+    }
+    watchLoadingHandler() {
+        this.getAllToggleButtons().forEach((el) => {
+            el.loading = this.loading;
+        });
+    }
+    watchMonochromeHandler() {
+        this.getAllToggleButtons().forEach((el) => {
+            el.monochrome = this.monochrome;
+        });
+    }
+    watchOutlineHandler() {
+        this.getAllToggleButtons().forEach((el) => {
+            el.outline = this.outline;
+        });
+    }
+    watchSizeHandler() {
+        this.getAllToggleButtons().forEach((el) => {
+            el.size = this.size;
+        });
+    }
+    watchThemeHandler() {
+        this.getAllToggleButtons().forEach((el) => {
+            el.theme = this.theme;
+        });
+    }
+    watchTooltipPlacementHandler() {
+        this.getAllToggleButtons().forEach((el) => {
+            el.tooltipPlacement = this.tooltipPlacement;
+        });
+    }
+    watchVariantHandler() {
+        this.getAllToggleButtons().forEach((el) => {
+            el.variant = this.variant;
+        });
+    }
+    selectHandler(ev, tabTarget) {
+        const allToggles = this.getAllToggleButtons();
+        let clickedToggle = ev.target;
+        if (tabTarget)
+            tabTarget.focus(); // tabTarget used in proxySelectHandler
+        if (this.selectType === "single") {
+            if (!clickedToggle && tabTarget) {
+                clickedToggle = tabTarget;
+            }
+            allToggles.forEach((el) => {
+                if (el.id !== clickedToggle.id && el.checked) {
+                    el.checked = false;
+                }
+            });
+            this.icChange.emit({
+                checked: ev.detail.checked,
+                selectedOption: clickedToggle,
+            });
+        }
+        else {
+            const toggledOptions = allToggles.filter((el) => el.checked && !el.disabled);
+            this.icChange.emit({
+                checked: toggledOptions.map((opt) => opt.checked),
+                toggledOptions: toggledOptions.map((opt) => ({
+                    toggleButton: opt,
+                })),
+                selectedOption: clickedToggle,
+            });
+        }
+    }
+    /**
+     * @internal Used to enable other components to set the active toggle button when toggle button group is in a shadow dom.
+     */
+    async setActiveToggle(toggle) {
+        this.externallySetActiveToggle = toggle;
+    }
+    componentWillLoad() {
+        if (this.selectType === "multi")
+            this.selectMethod = "manual";
+        document.addEventListener("keydown", this.keyListener);
+        removeDisabledFalse(this.disabled, this.el);
+    }
+    componentDidLoad() {
+        this.getAllToggleButtons().forEach((el, i) => {
+            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) => {
+                this.handleKeyDown(ev);
+            });
+            el.classList.add("expand-toggle-group-child");
+        });
+    }
+    disconnectedCallback() {
+        document === null || document === void 0 ? void 0 : document.removeEventListener("keydown", this.keyListener);
+    }
+    render() {
+        const { accessibleLabel, disabled, fullWidth, loading, monochrome, outline, theme, } = this;
+        return (h(Host, { key: '5ae12c9f09c65a04cbe1f19850998c0d942327c8', role: "group", "aria-label": accessibleLabel, tabindex: disabled ? -1 : 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-toggle-button-group-hide-outline": !outline,
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            }, onFocus: this.handleHostFocus }, h("slot", { key: '02c4f4cd7df626d4032246bdbcd7e07d2167ba52' })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "disabled": ["watchDisabledHandler"],
+        "fullWidth": ["watchFullWidthHandler"],
+        "loading": ["watchLoadingHandler"],
+        "monochrome": ["watchMonochromeHandler"],
+        "outline": ["watchOutlineHandler"],
+        "size": ["watchSizeHandler"],
+        "theme": ["watchThemeHandler"],
+        "tooltipPlacement": ["watchTooltipPlacementHandler"],
+        "variant": ["watchVariantHandler"]
+    }; }
+};
+ToggleButtonGroup.style = IcToggleButtonGroupStyle0;
+
+export { ToggleButton as ic_toggle_button, ToggleButtonGroup as ic_toggle_button_group };
+
+//# sourceMappingURL=ic-toggle-button_2.entry.js.map