@ukic/web-components 2.35.2 → 3.0.0-alpha.10

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

@@ -1,14 +1,54 @@
-import { Host, h, forceUpdate, } from "@stencil/core";
-import { isSlotUsed, onComponentRequiredPropUndefined, removeDisabledFalse, } from "../../utils/helpers";
+import { Host, h, } from "@stencil/core";
+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() {
-        this.hostMutationObserver = null;
-        this.hostMutationCallback = () => {
-            forceUpdate(this);
+        this.loopAttributes = () => {
+            const trackedAttributes = [
+                "loading",
+                "disabled",
+                "full-width",
+                "icon-placement",
+                "variant",
+                "size",
+                "theme",
+                "monochrome",
+            ];
+            const parentAttributes = this.el.parentElement.attributes;
+            for (let i = 0; i < trackedAttributes.length; i++) {
+                if (parentAttributes.getNamedItem(trackedAttributes[i]) !== null) {
+                    const attribute = parentAttributes.getNamedItem(trackedAttributes[i]);
+                    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();
@@ -17,18 +57,19 @@ export class ToggleButton {
             !this.loading &&
                 !this.disabled &&
                 this.icToggleChecked.emit({
-                    checked: this.toggleChecked,
+                    checked: this.checked,
                 });
         };
         this.accessibleLabel = undefined;
-        this.appearance = "default";
+        this.checked = false;
         this.disabled = false;
         this.fullWidth = false;
-        this.iconPlacement = undefined;
+        this.iconPlacement = "left";
         this.label = undefined;
         this.loading = false;
-        this.size = "default";
-        this.toggleChecked = false;
+        this.monochrome = false;
+        this.size = "medium";
+        this.theme = "inherit";
         this.tooltipPlacement = "bottom";
         this.variant = "default";
     }
@@ -37,8 +78,9 @@ export class ToggleButton {
     }
     componentWillLoad() {
         removeDisabledFalse(this.disabled, this.el);
-        const parentIconPlacement = this.el.parentElement.iconPlacement;
-        this.iconPosition = this.iconPlacement || parentIconPlacement;
+        if (isSlottedInGroup(this.el)) {
+            this.loopAttributes();
+        }
     }
     componentDidLoad() {
         onComponentRequiredPropUndefined([
@@ -47,36 +89,26 @@ export class ToggleButton {
                 propName: this.variant === "icon" ? "accessible-label" : "label",
             },
         ], "Toggle button");
-        if (typeof MutationObserver !== "undefined") {
-            this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
-            this.hostMutationObserver.observe(this.el, {
-                childList: true,
-            });
-        }
-    }
-    disconnectedCallback() {
-        if (this.hostMutationObserver !== null &&
-            this.hostMutationObserver !== undefined) {
-            this.hostMutationObserver.disconnect();
-        }
     }
     handleHostClick(e) {
         if (this.disabled) {
             e.stopImmediatePropagation();
         }
         else if (!this.loading) {
-            this.toggleChecked = !this.toggleChecked;
+            this.checked = !this.checked;
         }
     }
     render() {
         return (h(Host, { class: {
-                ["disabled"]: this.disabled,
-                ["checked"]: this.toggleChecked,
-                [`${this.appearance}`]: true,
-                ["icon"]: this.variant === "icon",
-                [`${this.size}`]: true,
-                ["loading"]: this.loading,
-            }, onFocus: this.handleFocus }, h("ic-button", { "aria-pressed": this.toggleChecked.toString(), variant: this.variant === "icon" ? "icon" : "secondary", onClick: this.handleClick, title: this.accessibleLabel, "aria-label": `${this.accessibleLabel ? this.accessibleLabel : this.label}, ${this.toggleChecked ? "ticked" : "unticked"}`, disabled: this.disabled, appearance: this.appearance, size: this.size, fullWidth: this.fullWidth, loading: this.loading, "aria-disabled": `${this.disabled}`, tooltipPlacement: this.tooltipPlacement }, this.variant !== "icon" && this.label, h("slot", null), isSlotUsed(this.el, "icon") && (h("slot", { name: "icon", slot: `${this.iconPosition ? `${this.iconPosition}-icon` : "icon"}` })), isSlotUsed(this.el, "badge") && (h("slot", { name: "badge", slot: "badge" })))));
+                [`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", { "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", null), isSlotUsed(this.el, "icon") && (h("slot", { name: "icon", slot: `${this.iconPlacement}-icon` })), isSlotUsed(this.el, "badge") && (h("slot", { name: "badge", slot: "badge" })))));
     }
     static get is() { return "ic-toggle-button"; }
     static get encapsulation() { return "shadow"; }
@@ -110,33 +142,27 @@ export class ToggleButton {
                 "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",
+                    "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "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\""
+                "attribute": "checked",
+                "reflect": true,
+                "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -154,7 +180,7 @@ export class ToggleButton {
             },
             "fullWidth": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -174,9 +200,15 @@ export class ToggleButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "\"left\" | \"right\" | \"top\"",
+                    "original": "IcIconPlacementOptions",
                     "resolved": "\"left\" | \"right\" | \"top\"",
-                    "references": {}
+                    "references": {
+                        "IcIconPlacementOptions": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcIconPlacementOptions"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
@@ -185,7 +217,8 @@ export class ToggleButton {
                     "text": "The placement of the icon in relation to the toggle button label."
                 },
                 "attribute": "icon-placement",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "\"left\""
             },
             "label": {
                 "type": "string",
@@ -206,7 +239,7 @@ export class ToggleButton {
             },
             "loading": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -222,12 +255,30 @@ export class ToggleButton {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "monochrome": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "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."
+                },
+                "attribute": "monochrome",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "size": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "IcSizes",
-                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
                     "references": {
                         "IcSizes": {
                             "location": "import",
@@ -244,25 +295,31 @@ export class ToggleButton {
                 },
                 "attribute": "size",
                 "reflect": false,
-                "defaultValue": "\"default\""
+                "defaultValue": "\"medium\""
             },
-            "toggleChecked": {
-                "type": "boolean",
+            "theme": {
+                "type": "string",
                 "mutable": true,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "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": "toggle-checked",
-                "reflect": true,
-                "defaultValue": "false"
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
             },
             "tooltipPlacement": {
                 "type": "string",
@@ -290,7 +347,7 @@ export class ToggleButton {
             },
             "variant": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "\"default\" | \"icon\"",
                     "resolved": "\"default\" | \"icon\"",

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  forceUpdate,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport {\n  IcButtonTooltipPlacement,\n  IcSizes,\n  IcThemeForeground,\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  private iconPosition: \"left\" | \"right\" | \"top\";\n  private hostMutationObserver: MutationObserver = null;\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  @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() 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 }) toggleChecked: boolean = false;\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 }) 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;\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    if (typeof MutationObserver !== \"undefined\") {\n      this.hostMutationObserver = new MutationObserver(\n        this.hostMutationCallback\n      );\n      this.hostMutationObserver.observe(this.el, {\n        childList: true,\n      });\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (\n      this.hostMutationObserver !== null &&\n      this.hostMutationObserver !== undefined\n    ) {\n      this.hostMutationObserver.disconnect();\n    }\n  }\n\n  private hostMutationCallback = (): void => {\n    forceUpdate(this);\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.toggleChecked = !this.toggleChecked;\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.toggleChecked,\n      });\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          [\"disabled\"]: this.disabled,\n          [\"checked\"]: this.toggleChecked,\n          [`${this.appearance}`]: true,\n          [\"icon\"]: this.variant === \"icon\",\n          [`${this.size}`]: true,\n          [\"loading\"]: this.loading,\n        }}\n        onFocus={this.handleFocus}\n      >\n        <ic-button\n          aria-pressed={this.toggleChecked.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.toggleChecked ? \"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          tooltipPlacement={this.tooltipPlacement}\n        >\n          {this.variant !== \"icon\" && this.label}\n          <slot />\n          {isSlotUsed(this.el, \"icon\") && (\n            <slot\n              name=\"icon\"\n              slot={`${\n                this.iconPosition ? `${this.iconPosition}-icon` : \"icon\"\n              }`}\n            ></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":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,KAAK,EAEL,MAAM,EACN,CAAC,EACD,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,UAAU,EACV,gCAAgC,EAChC,mBAAmB,EACnB,gBAAgB,GACjB,MAAM,qBAAqB,CAAC;AAQ7B;;;GAGG;AASH,MAAM,OAAO,YAAY;;QAwGf,mBAAc,GAAG,GAAG,EAAE;YAC5B,MAAM,iBAAiB,GAAa;gBAClC,SAAS;gBACT,UAAU;gBACV,YAAY;gBACZ,gBAAgB;gBAChB,SAAS;gBACT,MAAM;gBACN,OAAO;gBACP,YAAY;aACb,CAAC;YACF,MAAM,gBAAgB,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC;YAC1D,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,iBAAiB,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBAClD,IAAI,gBAAgB,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC;oBACjE,MAAM,SAAS,GAAG,gBAAgB,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;oBACtE,QAAQ,SAAS,CAAC,IAAI,EAAE,CAAC;wBACvB,KAAK,iBAAiB,CAAC,CAAC,CAAC;4BACvB,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC,KAAK,KAAK,OAAO,CAAC;4BAC3C,MAAM;wBACR,KAAK,iBAAiB,CAAC,CAAC,CAAC;4BACvB,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC,KAAK,KAAK,OAAO,CAAC;4BAC5C,MAAM;wBACR,KAAK,iBAAiB,CAAC,CAAC,CAAC;4BACvB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC,KAAK,KAAK,OAAO,CAAC;4BAC7C,MAAM;wBACR,KAAK,iBAAiB,CAAC,CAAC,CAAC;4BACvB,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC,KAAiC,CAAC;4BACjE,MAAM;wBACR,KAAK,iBAAiB,CAAC,CAAC,CAAC;4BACvB,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC,KAA2B,CAAC;4BACrD,MAAM;wBACR,KAAK,iBAAiB,CAAC,CAAC,CAAC;4BACvB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC,KAAgB,CAAC;4BACvC,MAAM;wBACR,KAAK,iBAAiB,CAAC,CAAC,CAAC;4BACvB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,KAAoB,CAAC;4BAC5C,MAAM;wBACR,KAAK,iBAAiB,CAAC,CAAC,CAAC;4BACvB,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC,KAAK,KAAK,OAAO,CAAC;4BAC9C,MAAM;oBACV,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAEM,gBAAW,GAAG,CAAC,EAAc,EAAE,EAAE;YACvC,EAAE,CAAC,wBAAwB,EAAE,CAAC;QAChC,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAS,EAAE;YAC/B,CAAC,IAAI,CAAC,OAAO;gBACX,CAAC,IAAI,CAAC,QAAQ;gBACd,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;oBACxB,OAAO,EAAE,IAAI,CAAC,OAAO;iBACtB,CAAC,CAAC;QACP,CAAC,CAAC;;uBApJyD,KAAK;wBAKlB,KAAK;yBASJ,KAAK;6BAKH,MAAM;;uBAUV,KAAK;0BAKF,KAAK;oBAKX,QAAQ;qBAKH,SAAS;gCAKH,QAAQ;uBAM3D,SAAS;;IAhDX,oBAAoB;QAClB,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;IAC9C,CAAC;IAuDD,iBAAiB;QACf,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;QAE5C,IAAI,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;YAC9B,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,gCAAgC,CAC9B;YACE;gBACE,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK;gBACjE,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,OAAO;aACjE;SACF,EACD,eAAe,CAChB,CAAC;IACJ,CAAC;IAGD,eAAe,CAAC,CAAQ;QACtB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,CAAC,CAAC,wBAAwB,EAAE,CAAC;QAC/B,CAAC;aAAM,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YACzB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC/B,CAAC;IACH,CAAC;IA2DD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,CAAC,YAAY,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;gBACpD,CAAC,2BAA2B,CAAC,EAAE,IAAI,CAAC,QAAQ;gBAC5C,CAAC,0BAA0B,CAAC,EAAE,IAAI,CAAC,OAAO;gBAC1C,CAAC,uBAAuB,CAAC,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;gBAClD,CAAC,oBAAoB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;gBACvC,CAAC,0BAA0B,CAAC,EAAE,IAAI,CAAC,OAAO;gBAC1C,CAAC,6BAA6B,CAAC,EAAE,IAAI,CAAC,UAAU;gBAChD,CAAC,YAAY,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;aACrD,EACD,OAAO,EAAE,IAAI,CAAC,WAAW;YAEzB,iCACgB,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,EACrC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,EACvD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAE,IAAI,CAAC,eAAe,gBACf,GACV,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,KACrD,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,EAAE,EAC3C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;gBAEtC,IAAI,CAAC,OAAO,KAAK,MAAM,IAAI,IAAI,CAAC,KAAK;gBACtC,eAAQ;gBACP,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,IAAI,CAC9B,YAAM,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,GAAG,IAAI,CAAC,aAAa,OAAO,GAAS,CAC9D;gBACA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,IAAI,CAC/B,YAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,CACxC,CACS,CACP,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 (parentAttributes.getNamedItem(trackedAttributes[i]) !== null) {\n        const attribute = parentAttributes.getNamedItem(trackedAttributes[i]);\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  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"]}

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

@@ -20,11 +20,7 @@ export const Default = {
 
 export const Checked = {
   render: (args) =>
-    html`<ic-toggle-button
-      label="Toggle"
-      toggle-checked="true"
-    ></ic-toggle-button>`,
-
+    html`<ic-toggle-button label="Toggle" checked="true"></ic-toggle-button>`,
   name: "Checked",
 };
 
@@ -34,7 +30,7 @@ export const Disabled = {
       <ic-toggle-button
         label="Toggle"
         disabled="true"
-        toggle-checked="true"
+        checked="true"
       ></ic-toggle-button>`,
 
   name: "Disabled",
@@ -79,7 +75,7 @@ export const Sizes = {
 export const WithBadge = {
   render: (args) =>
     html`<ic-toggle-button label="Toggle">
-        <ic-badge text-label="1" slot="badge" variant="success"></ic-badge>
+        <ic-badge label="1" slot="badge" variant="success"></ic-badge>
       </ic-toggle-button>
       <ic-toggle-button label="Toggle">
         <ic-badge slot="badge" variant="success" type="dot"></ic-badge>
@@ -88,25 +84,14 @@ export const WithBadge = {
   name: "With badge",
 };
 
-export const AppearanceDark = {
+export const Monochrome = {
   render: (args) =>
     html`<ic-toggle-button
       label="Toggle"
-      appearance="dark"
+      monochrome="true"
     ></ic-toggle-button>`,
 
-  name: "Appearance dark",
-};
-
-export const AppearanceLight = {
-  render: (args) =>
-    html`<div
-      style="background-color:#2c2f34; padding:6px 10px; width:fit-content"
-    >
-      <ic-toggle-button label="Toggle" appearance="light"></ic-toggle-button>
-    </div>`,
-
-  name: "Appearance light",
+  name: "Monochrome",
 };
 
 export const FullWidth = {
@@ -126,65 +111,12 @@ export const Loading = {
         <ic-toggle-button
           label="Toggle"
           loading="true"
-          toggle-checked="true"
-        ></ic-toggle-button>
-        <ic-toggle-button
-          variant="icon"
-          loading="true"
-          accessible-label="Refresh the page"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height="24px"
-            viewBox="0 0 24 24"
-            width="24px"
-            fill="#000000"
-          >
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path
-              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-            />
-          </svg>
-        </ic-toggle-button>
-        <ic-toggle-button
-          variant="icon"
-          loading="true"
-          toggle-checked="true"
-          accessible-label="Refresh the page"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height="24px"
-            viewBox="0 0 24 24"
-            width="24px"
-            fill="#000000"
-          >
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path
-              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-            />
-          </svg>
-        </ic-toggle-button>
-      </div>
-      <div
-        style="background-color:#2c2f34; padding:6px 10px; width:fit-content"
-      >
-        <ic-toggle-button
-          label="Toggle"
-          loading="true"
-          appearance="light"
-        ></ic-toggle-button>
-        <ic-toggle-button
-          label="Toggle"
-          loading="true"
-          toggle-checked="true"
-          appearance="light"
+          checked="true"
         ></ic-toggle-button>
         <ic-toggle-button
           variant="icon"
           loading="true"
           accessible-label="Refresh the page"
-          appearance="light"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -202,9 +134,8 @@ export const Loading = {
         <ic-toggle-button
           variant="icon"
           loading="true"
-          toggle-checked="true"
+          checked="true"
           accessible-label="Refresh the page"
-          appearance="light"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -224,19 +155,19 @@ export const Loading = {
         <ic-toggle-button
           label="Toggle"
           loading="true"
-          appearance="dark"
+          monochrome="true"
         ></ic-toggle-button>
         <ic-toggle-button
           label="Toggle"
           loading="true"
-          toggle-checked="true"
-          appearance="dark"
+          checked="true"
+          monochrome="true"
         ></ic-toggle-button>
         <ic-toggle-button
           variant="icon"
           loading="true"
           accessible-label="Refresh the page"
-          appearance="dark"
+          monochrome="true"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -254,9 +185,9 @@ export const Loading = {
         <ic-toggle-button
           variant="icon"
           loading="true"
-          toggle-checked="true"
+          checked="true"
           accessible-label="Refresh the page"
-          appearance="dark"
+          monochrome="true"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -348,52 +279,11 @@ export const IconOnly = {
           </svg>
         </ic-toggle-button>
       </div>
-      <div
-        style="background-color:#2c2f34; padding:6px 10px; width:fit-content"
-      >
-        <ic-toggle-button
-          variant="icon"
-          accessible-label="Refresh the page"
-          appearance="light"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height="24px"
-            viewBox="0 0 24 24"
-            width="24px"
-            fill="#000000"
-          >
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path
-              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-            />
-          </svg>
-        </ic-toggle-button>
-        <ic-toggle-button
-          variant="icon"
-          disabled="true"
-          accessible-label="Refresh the page"
-          appearance="light"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height="24px"
-            viewBox="0 0 24 24"
-            width="24px"
-            fill="#000000"
-          >
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path
-              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-            />
-          </svg>
-        </ic-toggle-button>
-      </div>
       <div style="padding:6px 10px; width:fit-content">
         <ic-toggle-button
           variant="icon"
           accessible-label="Refresh the page"
-          appearance="dark"
+          monochrome="true"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -412,7 +302,7 @@ export const IconOnly = {
           variant="icon"
           disabled="true"
           accessible-label="Refresh the page"
-          appearance="dark"
+          monochrome="true"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"

package/dist/collection/components/ic-toggle-button/test/basic/ic-toggle-button.spec.js

@@ -74,7 +74,7 @@ describe("ic-toggle-button component", () => {
         const page = await newSpecPage({
             components: [ToggleButton],
             html: `<ic-toggle-button label="Toggle">
-          <ic-badge text-label="1" slot="badge" variant="success"></ic-badge>
+          <ic-badge label="1" slot="badge" variant="success"></ic-badge>
         </ic-toggle-button>`,
         });
         expect(page.root).toMatchSnapshot();
@@ -89,16 +89,16 @@ describe("ic-toggle-button component", () => {
         await page.waitForChanges();
         expect(page.root).toMatchSnapshot("disabled-removed");
     });
-    it("should update toggleChecked value on click", async () => {
+    it("should update checked value on click", async () => {
         const page = await newSpecPage({
             components: [ToggleButton],
             html: `<ic-toggle-button label="Toggle" id='test-button' onclick='alert('test')'></ic-toggle-button>`,
         });
-        expect(page.rootInstance.toggleChecked).toBeFalsy();
+        expect(page.rootInstance.checked).toBeFalsy();
         const element = document.getElementById("test-button");
         element.click();
         await page.waitForChanges();
-        expect(page.rootInstance.toggleChecked).toBeTruthy();
+        expect(page.rootInstance.checked).toBeTruthy();
     });
     it("should emit icToggleChecked on click", async () => {
         const page = await newSpecPage({