@ukic/web-components 3.3.0 → 3.4.0

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

@@ -457,6 +457,16 @@ video {
   );
 }
 
+: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);
@@ -534,9 +544,12 @@ video {
 
 :host(.expand-toggle-group-child) ::part(button) {
   width: 100%;
+}
+
+:host(.expand-toggle-group-child:not(.ic-toggle-button-loading))
+  ::part(button) {
   min-height: inherit;
-  white-space: inherit;
-  height: inherit;
+  height: auto;
 }
 
 :host ic-button {
@@ -547,7 +560,6 @@ video {
 :host(.expand-toggle-group-child) ic-button {
   min-width: 100%;
   min-height: 100%;
-  white-space: normal;
   height: 100%;
 }
 
@@ -569,27 +581,48 @@ video {
 }
 
 :host ::part(button) {
-  border: var(--ic-border-width) solid var(--toggle-button-border);
+  border: none;
   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 ::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) {
-  border: var(--ic-space-1px) dashed var(--toggle-button-border);
   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)

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

@@ -1,5 +1,15 @@
 import { Host, h, } from "@stencil/core";
 import { isSlotUsed, onComponentRequiredPropUndefined, removeDisabledFalse, isSlottedInGroup, } from "../../utils/helpers";
+const TRACKED_ATTRIBUTES = [
+    "loading",
+    "disabled",
+    "full-width",
+    "icon-placement",
+    "variant",
+    "size",
+    "theme",
+    "monochrome",
+];
 /**
  * @slot icon - Content will be displayed alongside the toggle button label.
  * @slot badge - Badge component overlaying the top right of the toggle button.
@@ -46,72 +56,58 @@ export class ToggleButton {
          * 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() {
@@ -131,16 +127,18 @@ export class ToggleButton {
         }
     }
     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: 'e34299dc13ff4f36657b4fea7c88d5d478fa85c1', 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: '9f6f52717db592139175316c88a781eaa98adb65', "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: 'c180d619e44820ba7a0f597070f0cea2d26a4830' }), isSlotUsed(this.el, "icon") && (h("slot", { key: 'b2a2545a6b0ed44a7911da313306ed6de84c7862', name: "icon", slot: `${iconPlacement}-icon` })), isSlotUsed(this.el, "badge") && (h("slot", { key: 'c7de6d7eb51d0f444ede14995f708ffcd42174a1', name: "badge", slot: "badge" })))));
     }
     static get is() { return "ic-toggle-button"; }
     static get encapsulation() { return "shadow"; }
@@ -181,11 +179,11 @@ export class ToggleButton {
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean | undefined",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the toggle button will be in a checked state."
@@ -201,11 +199,11 @@ export class ToggleButton {
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean | undefined",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the toggle button will be in disabled state."
@@ -221,11 +219,11 @@ export class ToggleButton {
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean | undefined",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the toggle button will fill the width of the container."
@@ -241,7 +239,7 @@ export class ToggleButton {
                 "mutable": false,
                 "complexType": {
                     "original": "IcIconPlacementOptions",
-                    "resolved": "\"left\" | \"right\" | \"top\" | undefined",
+                    "resolved": "\"left\" | \"right\" | \"top\"",
                     "references": {
                         "IcIconPlacementOptions": {
                             "location": "import",
@@ -251,7 +249,7 @@ export class ToggleButton {
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The placement of the icon in relation to the toggle button label."
@@ -286,11 +284,11 @@ export class ToggleButton {
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean | undefined",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the toggle button will be in loading state."
@@ -306,11 +304,11 @@ export class ToggleButton {
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean | undefined",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the toggle button will display as black in the light theme, and white in dark theme."
@@ -326,7 +324,7 @@ export class ToggleButton {
                 "mutable": true,
                 "complexType": {
                     "original": "IcSizes",
-                    "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
                     "references": {
                         "IcSizes": {
                             "location": "import",
@@ -336,7 +334,7 @@ export class ToggleButton {
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The size of the toggle button to be displayed."
@@ -352,7 +350,7 @@ export class ToggleButton {
                 "mutable": true,
                 "complexType": {
                     "original": "IcThemeMode",
-                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
                     "references": {
                         "IcThemeMode": {
                             "location": "import",
@@ -362,7 +360,7 @@ export class ToggleButton {
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "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."
@@ -378,7 +376,7 @@ export class ToggleButton {
                 "mutable": false,
                 "complexType": {
                     "original": "IcButtonTooltipPlacement",
-                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
                     "references": {
                         "IcButtonTooltipPlacement": {
                             "location": "import",
@@ -388,7 +386,7 @@ export class ToggleButton {
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The position of the tooltip in relation to the toggle button."
@@ -404,11 +402,11 @@ export class ToggleButton {
                 "mutable": true,
                 "complexType": {
                     "original": "\"default\" | \"icon\"",
-                    "resolved": "\"default\" | \"icon\" | undefined",
+                    "resolved": "\"default\" | \"icon\"",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The variant of the toggle button."

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  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,"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\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"]}