@ukic/web-components 3.0.0 → 3.2.0

package/dist/collection/components/ic-toggle-button/ic-toggle-button.js

@@ -1,11 +1,99 @@
 import { Host, h, } from "@stencil/core";
-import { isSlotUsed, onComponentRequiredPropUndefined, removeDisabledFalse, } from "../../utils/helpers";
+import { isSlotUsed, onComponentRequiredPropUndefined, removeDisabledFalse, isSlottedInGroup, } from "../../utils/helpers";
 /**
  * @slot icon - Content will be displayed alongside the toggle button label.
  * @slot badge - Badge component overlaying the top right of the toggle button.
  */
 export class ToggleButton {
     constructor() {
+        /**
+         * 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;
+        /**
+         * 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.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();
         };
@@ -16,21 +104,15 @@ export class ToggleButton {
                     checked: this.checked,
                 });
         };
-        this.accessibleLabel = undefined;
-        this.appearance = "default";
-        this.disabled = false;
-        this.fullWidth = false;
-        this.iconPlacement = undefined;
-        this.label = undefined;
-        this.loading = false;
-        this.size = "default";
-        this.checked = false;
-        this.variant = "default";
+    }
+    watchDisabledHandler() {
+        removeDisabledFalse(this.disabled, this.el);
     }
     componentWillLoad() {
         removeDisabledFalse(this.disabled, this.el);
-        const parentIconPlacement = this.el.parentElement.iconPlacement;
-        this.iconPosition = this.iconPlacement || parentIconPlacement || "left";
+        if (isSlottedInGroup(this.el)) {
+            this.loopAttributes();
+        }
     }
     componentDidLoad() {
         onComponentRequiredPropUndefined([
@@ -49,14 +131,16 @@ export class ToggleButton {
         }
     }
     render() {
-        return (h(Host, { class: {
-                ["ic-toggle-button-disabled"]: this.disabled,
-                ["ic-toggle-button-checked"]: this.checked,
-                [`ic-toggle-button-${this.appearance}`]: true,
+        return (h(Host, { key: '52df8ea7e88a94edef05a3212d5abd8e7e4e5321', 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,
-            }, onFocus: this.handleFocus }, h("ic-button", { "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, appearance: this.appearance, size: this.size, fullWidth: this.fullWidth, loading: this.loading, "aria-disabled": `${this.disabled}` }, this.variant !== "icon" && this.label, h("slot", null), isSlotUsed(this.el, "icon") && (h("slot", { name: "icon", slot: `${this.iconPosition}-icon` })), isSlotUsed(this.el, "badge") && (h("slot", { name: "badge", slot: "badge" })))));
+                ["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: '332f1ce7a102149b54ddec12af25b110bd1b69ea', "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: '08cd5315510551d00f0e357297f34bf058dfa61c' }), isSlotUsed(this.el, "icon") && (h("slot", { key: '517575dc1d0a7a383ebb746a0945041ca269fad4', name: "icon", slot: `${this.iconPlacement}-icon` })), isSlotUsed(this.el, "badge") && (h("slot", { key: '533e591e1bbe1fc5a138ebf826044a6943b3ab01', name: "badge", slot: "badge" })))));
     }
     static get is() { return "ic-toggle-button"; }
     static get encapsulation() { return "shadow"; }
@@ -78,7 +162,7 @@ export class ToggleButton {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -87,39 +171,37 @@ export class ToggleButton {
                     "tags": [],
                     "text": "The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label",
                 "reflect": false
             },
-            "appearance": {
-                "type": "string",
-                "mutable": false,
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
                 "complexType": {
-                    "original": "IcThemeForeground",
-                    "resolved": "\"dark\" | \"default\" | \"light\"",
-                    "references": {
-                        "IcThemeForeground": {
-                            "location": "import",
-                            "path": "../../utils/types",
-                            "id": "src/utils/types.ts::IcThemeForeground"
-                        }
-                    }
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The appearance of the toggle button."
+                    "text": "If `true`, the toggle button will be in a checked state."
                 },
-                "attribute": "appearance",
-                "reflect": false,
-                "defaultValue": "\"default\""
+                "getter": false,
+                "setter": false,
+                "attribute": "checked",
+                "reflect": true,
+                "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -128,16 +210,18 @@ export class ToggleButton {
                     "tags": [],
                     "text": "If `true`, the toggle button will be in disabled state."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "fullWidth": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -146,6 +230,8 @@ export class ToggleButton {
                     "tags": [],
                     "text": "If `true`, the toggle button will fill the width of the container."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "full-width",
                 "reflect": false,
                 "defaultValue": "false"
@@ -154,9 +240,15 @@ export class ToggleButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "\"left\" | \"right\" | \"top\"",
-                    "resolved": "\"left\" | \"right\" | \"top\"",
-                    "references": {}
+                    "original": "IcIconPlacementOptions",
+                    "resolved": "\"left\" | \"right\" | \"top\" | undefined",
+                    "references": {
+                        "IcIconPlacementOptions": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcIconPlacementOptions"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
@@ -164,15 +256,18 @@ export class ToggleButton {
                     "tags": [],
                     "text": "The placement of the icon in relation to the toggle button label."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "icon-placement",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "\"left\""
             },
             "label": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -181,15 +276,17 @@ export class ToggleButton {
                     "tags": [],
                     "text": "The label to display in the toggle button. This is required for the default variant of toggle buttons."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false
             },
             "loading": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -198,16 +295,38 @@ export class ToggleButton {
                     "tags": [],
                     "text": "If `true`, the toggle button will be in loading state."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "loading",
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "monochrome": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the toggle button will display as black in the light theme, and white in dark theme."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "monochrome",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "size": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "IcSizes",
-                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
                     "references": {
                         "IcSizes": {
                             "location": "import",
@@ -222,42 +341,80 @@ export class ToggleButton {
                     "tags": [],
                     "text": "The size of the toggle button to be displayed."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": false,
-                "defaultValue": "\"default\""
+                "defaultValue": "\"medium\""
             },
-            "checked": {
-                "type": "boolean",
+            "theme": {
+                "type": "string",
                 "mutable": true,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the toggle button will be in a checked state."
+                    "text": "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."
                 },
-                "attribute": "checked",
-                "reflect": true,
-                "defaultValue": "false"
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
             },
-            "variant": {
+            "tooltipPlacement": {
                 "type": "string",
                 "mutable": false,
+                "complexType": {
+                    "original": "IcButtonTooltipPlacement",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined",
+                    "references": {
+                        "IcButtonTooltipPlacement": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcButtonTooltipPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The position of the tooltip in relation to the toggle button."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "tooltip-placement",
+                "reflect": false,
+                "defaultValue": "\"bottom\""
+            },
+            "variant": {
+                "type": "string",
+                "mutable": true,
                 "complexType": {
                     "original": "\"default\" | \"icon\"",
-                    "resolved": "\"default\" | \"icon\"",
+                    "resolved": "\"default\" | \"icon\" | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The variant of the toggle button."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variant",
                 "reflect": true,
                 "defaultValue": "\"default\""
@@ -283,6 +440,12 @@ export class ToggleButton {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "watchDisabledHandler"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "click",

package/dist/collection/components/ic-toggle-button/ic-toggle-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-toggle-button.js","sourceRoot":"","sources":["../../../src/components/ic-toggle-button/ic-toggle-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  Event,\n  EventEmitter,\n  Listen,\n  h,\n} from \"@stencil/core\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcSizes, IcThemeForeground } 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  private iconPosition: \"left\" | \"right\" | \"top\";\n\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   * The appearance of the toggle button.\n   */\n  @Prop() appearance?: IcThemeForeground = \"default\";\n\n  /**\n   * If `true`, the toggle button will be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If `true`, the toggle button will fill the width of the container.\n   */\n  @Prop() fullWidth?: boolean = false;\n\n  /**\n   * The placement of the icon in relation to the toggle button label.\n   */\n  @Prop() iconPlacement?: \"left\" | \"right\" | \"top\";\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() loading?: boolean = false;\n\n  /**\n   * The size of the toggle button to be displayed.\n   */\n  @Prop() size?: IcSizes = \"default\";\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   * The variant of the toggle button.\n   */\n  @Prop({ reflect: true }) variant: \"default\" | \"icon\" = \"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    const parentIconPlacement = (\n      this.el.parentElement as HTMLIcToggleButtonGroupElement\n    ).iconPlacement;\n    this.iconPosition = this.iconPlacement || parentIconPlacement || \"left\";\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 = (): 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-toggle-button-disabled\"]: this.disabled,\n          [\"ic-toggle-button-checked\"]: this.checked,\n          [`ic-toggle-button-${this.appearance}`]: true,\n          [\"ic-toggle-button-icon\"]: this.variant === \"icon\",\n          [`ic-toggle-button-${this.size}`]: true,\n          [\"ic-toggle-button-loading\"]: this.loading,\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          appearance={this.appearance}\n          size={this.size}\n          fullWidth={this.fullWidth}\n          loading={this.loading}\n          aria-disabled={`${this.disabled}`}\n        >\n          {this.variant !== \"icon\" && this.label}\n          <slot />\n          {isSlotUsed(this.el, \"icon\") && (\n            <slot name=\"icon\" slot={`${this.iconPosition}-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,"file":"ic-toggle-button.js","sourceRoot":"","sources":["../../../src/components/ic-toggle-button/ic-toggle-button.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}