@ukic/web-components 2.0.0-alpha.121

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

@@ -0,0 +1,613 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+import { Host, h, } from "@stencil/core";
+import { getThemeFromContext, inheritAttributes } from "../../utils/helpers";
+import { IC_INHERITED_ARIA } from "../../utils/constants";
+import { IcThemeForegroundEnum, } from "../../utils/types";
+let buttonIds = 0;
+/**
+ * @slot icon - Content will be placed to the left of the button label.
+ */
+export class Button {
+  constructor() {
+    // CalculatedWidth must have a default value, since width is only calculated once button is rendered (with text).
+    this.calculatedWidth = 68;
+    this.inheritedAttributes = {};
+    this.hasTooltip = false;
+    this.buttonIdNum = buttonIds++;
+    this.handleClick = () => {
+      if ((this.el.type === "submit" || this.el.type === "reset") &&
+        !!this.el.closest("FORM")) {
+        this.handleHiddenFormButtonClick(this.el.closest("FORM"));
+      }
+    };
+    this.onFocus = () => {
+      this.icFocus.emit();
+    };
+    this.onBlur = () => {
+      this.icBlur.emit();
+    };
+    this.disabled = false;
+    this.loading = false;
+    this.iconRight = false;
+    this.type = "button";
+    this.href = undefined;
+    this.target = undefined;
+    this.rel = undefined;
+    this.download = false;
+    this.hreflang = undefined;
+    this.referrerpolicy = undefined;
+    this.variant = "primary";
+    this.size = "default";
+    this.fullWidth = false;
+    this.withIcTooltip = false;
+    this.IcTooltipPlacement = "bottom";
+    this.buttonStyle = "default";
+    this.iconRightState = false;
+  }
+  setIconRightState() {
+    this.iconRightState = this.iconRight;
+  }
+  calculateWidth() {
+    // Assume even padding on left and right
+    this.calculatedWidth = this.el.offsetWidth - 2 * this.el.offsetLeft;
+  }
+  handleHostClick(event) {
+    if (this.disabled || this.loading) {
+      event.stopImmediatePropagation();
+    }
+  }
+  themeChangeHandler(ev) {
+    const theme = ev.detail;
+    this.updateTheme(theme.mode);
+  }
+  /**
+   * Sets focus on the native `button`
+   */
+  async setFocus() {
+    if (this.buttonEl) {
+      this.buttonEl.focus();
+    }
+  }
+  /**
+   * @internal Updates tooltip/aria-label text - needed as can't watch an aria attribute change.
+   */
+  async updateAriaLabel(newValue) {
+    if (this.hasTooltip) {
+      this.tooltipEl.label = newValue;
+      this.buttonEl.setAttribute("aria-label", newValue);
+    }
+  }
+  getLoadingBarWidth() {
+    return { width: `${this.calculatedWidth.toString()}px` };
+  }
+  hasIconSlot() {
+    const iconEl = this.el.querySelector(`[slot="icon"]`);
+    if (iconEl != null) {
+      return true;
+    }
+    return false;
+  }
+  handleHiddenFormButtonClick(form) {
+    const hiddenFormButton = document.createElement("button");
+    hiddenFormButton.setAttribute("type", this.el.type);
+    hiddenFormButton.style.display = "none";
+    form.appendChild(hiddenFormButton);
+    hiddenFormButton.click();
+    hiddenFormButton.remove();
+  }
+  updateTheme(newTheme = null) {
+    const foregroundColor = getThemeFromContext(this.el, newTheme || null);
+    if (foregroundColor !== IcThemeForegroundEnum.Default) {
+      this.buttonStyle = foregroundColor;
+    }
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAttributes(this.el, [
+      ...IC_INHERITED_ARIA,
+      "aria-expanded",
+      "title",
+    ]);
+    const id = this.el.id;
+    this.id = id !== undefined ? id : null;
+    this.hasTooltip = this.variant === "icon" || this.withIcTooltip;
+  }
+  componentDidLoad() {
+    this.calculateWidth();
+    this.setIconRightState();
+    this.updateTheme();
+  }
+  render() {
+    const TagType = (this.href && "a") || "button";
+    const _a = this.inheritedAttributes, { title, "aria-label": ariaLabel } = _a, restInheritedAttributes = __rest(_a, ["title", "aria-label"]);
+    const buttonAttrs = TagType === "button"
+      ? { type: this.type, disabled: this.disabled }
+      : {
+        download: this.download !== false ? this.download : null,
+        href: this.href,
+        rel: this.rel,
+        target: this.target,
+        referrerpolicy: this.referrerpolicy,
+        hreflang: this.hreflang,
+      };
+    const newTitle = title && title;
+    const titleAttr = this.hasTooltip ? {} : { title: newTitle };
+    let tooltipText = "";
+    if (this.hasTooltip) {
+      if (newTitle !== undefined) {
+        tooltipText = newTitle;
+      }
+      else if (ariaLabel !== null) {
+        tooltipText = ariaLabel;
+      }
+    }
+    let describedBy = null;
+    let buttonId = null;
+    if (this.hasTooltip) {
+      buttonId =
+        this.id !== null
+          ? `ic-button-with-tooltip-${this.id}`
+          : `ic-button-with-tooltip-${this.buttonIdNum}`;
+      describedBy = `ic-tooltip-${buttonId}`;
+    }
+    const ButtonContent = () => {
+      return (h(TagType, Object.assign({ class: "button", "aria-disabled": this.loading || this.disabled ? "true" : null, "aria-label": this.loading ? "Loading" : ariaLabel }, buttonAttrs, restInheritedAttributes, titleAttr, { onFocus: this.onFocus, onBlur: this.onBlur, ref: (el) => (this.buttonEl = el), id: buttonId, "aria-describedby": describedBy }), this.hasIconSlot() && !this.iconRightState && !this.loading && (h("div", { class: "icon-container" }, h("slot", { name: "icon" }))), this.loading ? (h("div", { class: "loading-container", style: this.getLoadingBarWidth() }, h("ic-loading-indicator", { type: "linear", dark: this.variant === "primary" ||
+          this.variant === "destructive" ||
+          this.buttonStyle === IcThemeForegroundEnum.Dark ||
+          this.buttonStyle === IcThemeForegroundEnum.Light }))) : (h("slot", null)), this.hasIconSlot() && this.iconRightState && !this.loading && (h("div", { class: "icon-container" }, h("slot", { name: "icon" })))));
+    };
+    return (h(Host, { class: {
+        ["disabled"]: this.disabled && !this.loading,
+        [`button-variant-${this.variant}`]: true,
+        [`button-size-${this.size}`]: true,
+        ["loading"]: this.loading,
+        ["dark"]: this.buttonStyle === IcThemeForegroundEnum.Dark,
+        ["light"]: this.buttonStyle === IcThemeForegroundEnum.Light,
+        ["full-width"]: this.fullWidth,
+      }, onClick: this.handleClick }, this.hasTooltip && (h("ic-tooltip", { ref: (el) => (this.tooltipEl = el), label: tooltipText, "element-id": buttonId, placement: this.IcTooltipPlacement }, h(ButtonContent, null))), !this.hasTooltip && h(ButtonContent, null)));
+  }
+  static get is() { return "ic-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ic-button.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ic-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Determines whether the button should be in disabled state."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "loading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Determines whether the button should be in loading state."
+        },
+        "attribute": "loading",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "iconRight": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Determines whether the icon should appear on the right hand side of the button."
+        },
+        "attribute": "icon-right",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcButtonTypes",
+          "resolved": "\"button\" | \"reset\" | \"submit\"",
+          "references": {
+            "IcButtonTypes": {
+              "location": "import",
+              "path": "./ic-button.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The type of the button."
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "\"button\""
+      },
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The URL that the link points to. This will render the button as an \"a\" tag."
+        },
+        "attribute": "href",
+        "reflect": false
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Where to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
+        },
+        "attribute": "target",
+        "reflect": false
+      },
+      "rel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The relationship of the linked URL as space-separated link types."
+        },
+        "attribute": "rel",
+        "reflect": false
+      },
+      "download": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "string | boolean",
+          "resolved": "boolean | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Prompts the user to save the linked URL instead of navigating to it."
+        },
+        "attribute": "download",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "hreflang": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Hints at the human language of the linked URL."
+        },
+        "attribute": "hreflang",
+        "reflect": false
+      },
+      "referrerpolicy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ReferrerPolicy",
+          "resolved": "\"\" | \"no-referrer\" | \"no-referrer-when-downgrade\" | \"origin\" | \"origin-when-cross-origin\" | \"same-origin\" | \"strict-origin\" | \"strict-origin-when-cross-origin\" | \"unsafe-url\"",
+          "references": {
+            "ReferrerPolicy": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "How much of the referrer to send when following the link."
+        },
+        "attribute": "referrerpolicy",
+        "reflect": false
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcButtonVariants",
+          "resolved": "\"destructive\" | \"icon\" | \"primary\" | \"secondary\" | \"tertiary\"",
+          "references": {
+            "IcButtonVariants": {
+              "location": "import",
+              "path": "./ic-button.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The button variant to be displayed."
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "\"primary\""
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcButtonSizes",
+          "resolved": "\"default\" | \"dense\" | \"emphasis\"",
+          "references": {
+            "IcButtonSizes": {
+              "location": "import",
+              "path": "./ic-button.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The size of the button to be displayed."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
+      "fullWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Fill the width of the container if true."
+        },
+        "attribute": "full-width",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "withIcTooltip": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Show an ic-tooltip displaying title or aria-label. Will always be shown for icon variant, so title or aria-label must be set."
+        },
+        "attribute": "with-ic-tooltip",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "IcTooltipPlacement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcButtonTooltipPlacement",
+          "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+          "references": {
+            "IcButtonTooltipPlacement": {
+              "location": "import",
+              "path": "./ic-button.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The position of the tooltip in relation to the button."
+        },
+        "attribute": "ic-tooltip-placement",
+        "reflect": false,
+        "defaultValue": "\"bottom\""
+      },
+      "buttonStyle": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "IcThemeForeground",
+          "resolved": "\"dark\" | \"default\" | \"light\"",
+          "references": {
+            "IcThemeForeground": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Determines the style of button to be displayed."
+        },
+        "attribute": "button-style",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      }
+    };
+  }
+  static get states() {
+    return {
+      "iconRightState": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "icFocus",
+        "name": "icFocus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when button has focus"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "icBlur",
+        "name": "icBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when button has blur"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets focus on the native `button`",
+          "tags": []
+        }
+      },
+      "updateAriaLabel": {
+        "complexType": {
+          "signature": "(newValue: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": [{
+              "name": "internal",
+              "text": "Updates tooltip/aria-label text - needed as can't watch an aria attribute change."
+            }]
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "iconRight",
+        "methodName": "setIconRightState"
+      }, {
+        "propName": "loading",
+        "methodName": "calculateWidth"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "handleHostClick",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }, {
+        "name": "icThemeChange",
+        "method": "themeChangeHandler",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=ic-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-button.js","sourceRoot":"","sources":["../../../src/components/ic-button/ic-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\n\nimport { getThemeFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcButtonSizes,\n  IcButtonTypes,\n  IcButtonVariants,\n  IcButtonTooltipPlacement,\n} from \"./ic-button.types\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\nlet buttonIds = 0;\n\n/**\n * @slot icon - Content will be placed to the left of the button label.\n */\n@Component({\n  tag: \"ic-button\",\n  styleUrl: \"ic-button.css\",\n  shadow: true,\n})\nexport class Button {\n  @Element() el: HTMLIcButtonElement;\n  /**\n   * Determines whether the button should be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * Determines whether the button should be in loading state.\n   */\n  @Prop() loading?: boolean = false;\n  /**\n   * Determines whether the icon should appear on the right hand side of the button.\n   */\n  @Prop() iconRight?: boolean = false;\n  /**\n   * The type of the button.\n   */\n  @Prop() type?: IcButtonTypes = \"button\";\n  /**\n   * The URL that the link points to. This will render the button as an \"a\" tag.\n   */\n  @Prop() href?: string;\n  /**\n   * Where to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n  /**\n   * Prompts the user to save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n  /**\n   * Hints at the human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n  /**\n   * The button variant to be displayed.\n   */\n  @Prop() variant?: IcButtonVariants = \"primary\";\n  /**\n   * The size of the button to be displayed.\n   */\n  @Prop() size?: IcButtonSizes = \"default\";\n  /**\n   * Fill the width of the container if true.\n   */\n  @Prop() fullWidth?: boolean = false;\n  /**\n   * Show an ic-tooltip displaying title or aria-label. Will always be shown for icon variant, so title or aria-label must be set.\n   */\n  @Prop() withIcTooltip?: boolean = false;\n  /**\n   * The position of the tooltip in relation to the button.\n   */\n  @Prop() IcTooltipPlacement?: IcButtonTooltipPlacement = \"bottom\";\n  /**\n   * Determines the style of button to be displayed.\n   */\n  @Prop({ mutable: true }) buttonStyle?: IcThemeForeground = \"default\";\n  /**\n   * Emitted when button has focus\n   */\n  @Event() icFocus!: EventEmitter<void>;\n  /**\n   * Emitted when button has blur\n   */\n  @Event() icBlur!: EventEmitter<void>;\n\n  // @State forces re-render of component on change.\n  @State() iconRightState: boolean = false;\n\n  // CalculatedWidth must have a default value, since width is only calculated once button is rendered (with text).\n  private calculatedWidth: number = 68;\n  private inheritedAttributes: { [k: string]: unknown } = {};\n  private buttonEl: HTMLElement;\n  private hasTooltip: boolean = false;\n  private buttonIdNum = buttonIds++;\n  private tooltipEl: HTMLIcTooltipElement;\n  private id: string;\n\n  @Watch(\"iconRight\")\n  setIconRightState(): void {\n    this.iconRightState = this.iconRight;\n  }\n\n  @Watch(\"loading\")\n  calculateWidth(): void {\n    // Assume even padding on left and right\n    this.calculatedWidth = this.el.offsetWidth - 2 * this.el.offsetLeft;\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(event: Event): void {\n    if (this.disabled || this.loading) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Listen(\"icThemeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.updateTheme(theme.mode);\n  }\n\n  /**\n   * Sets focus on the native `button`\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.buttonEl) {\n      this.buttonEl.focus();\n    }\n  }\n\n  /**\n   * @internal Updates tooltip/aria-label text - needed as can't watch an aria attribute change.\n   */\n  @Method()\n  async updateAriaLabel(newValue: string): Promise<void> {\n    if (this.hasTooltip) {\n      this.tooltipEl.label = newValue;\n      this.buttonEl.setAttribute(\"aria-label\", newValue);\n    }\n  }\n\n  private getLoadingBarWidth(): { [key: string]: string } {\n    return { width: `${this.calculatedWidth.toString()}px` };\n  }\n\n  private hasIconSlot(): boolean {\n    const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n    if (iconEl != null) {\n      return true;\n    }\n    return false;\n  }\n\n  private handleHiddenFormButtonClick(form: HTMLFormElement): void {\n    const hiddenFormButton = document.createElement(\"button\");\n\n    hiddenFormButton.setAttribute(\"type\", this.el.type);\n    hiddenFormButton.style.display = \"none\";\n\n    form.appendChild(hiddenFormButton);\n\n    hiddenFormButton.click();\n    hiddenFormButton.remove();\n  }\n\n  private handleClick = (): void => {\n    if (\n      (this.el.type === \"submit\" || this.el.type === \"reset\") &&\n      !!this.el.closest(\"FORM\")\n    ) {\n      this.handleHiddenFormButtonClick(this.el.closest(\"FORM\"));\n    }\n  };\n\n  private onFocus = () => {\n    this.icFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.icBlur.emit();\n  };\n\n  private updateTheme(newTheme: IcThemeForeground = null): void {\n    const foregroundColor = getThemeFromContext(this.el, newTheme || null);\n\n    if (foregroundColor !== IcThemeForegroundEnum.Default) {\n      this.buttonStyle = foregroundColor;\n    }\n  }\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, [\n      ...IC_INHERITED_ARIA,\n      \"aria-expanded\",\n      \"title\",\n    ]);\n\n    const id = this.el.id;\n    this.id = id !== undefined ? id : null;\n    this.hasTooltip = this.variant === \"icon\" || this.withIcTooltip;\n  }\n\n  componentDidLoad(): void {\n    this.calculateWidth();\n    this.setIconRightState();\n    this.updateTheme();\n  }\n\n  render() {\n    const TagType = (this.href && \"a\") || \"button\";\n    const {\n      title,\n      \"aria-label\": ariaLabel,\n      ...restInheritedAttributes\n    } = this.inheritedAttributes;\n    const buttonAttrs =\n      TagType === \"button\"\n        ? { type: this.type, disabled: this.disabled }\n        : {\n            download: this.download !== false ? this.download : null,\n            href: this.href,\n            rel: this.rel,\n            target: this.target,\n            referrerpolicy: this.referrerpolicy,\n            hreflang: this.hreflang,\n          };\n    const newTitle = title && (title as string);\n    const titleAttr = this.hasTooltip ? {} : { title: newTitle };\n    let tooltipText = \"\";\n    if (this.hasTooltip) {\n      if (newTitle !== undefined) {\n        tooltipText = newTitle;\n      } else if (ariaLabel !== null) {\n        tooltipText = ariaLabel as string;\n      }\n    }\n\n    let describedBy: string = null;\n    let buttonId: string = null;\n    if (this.hasTooltip) {\n      buttonId =\n        this.id !== null\n          ? `ic-button-with-tooltip-${this.id}`\n          : `ic-button-with-tooltip-${this.buttonIdNum}`;\n      describedBy = `ic-tooltip-${buttonId}`;\n    }\n\n    const ButtonContent = () => {\n      return (\n        <TagType\n          class=\"button\"\n          aria-disabled={this.loading || this.disabled ? \"true\" : null}\n          aria-label={this.loading ? \"Loading\" : ariaLabel}\n          {...buttonAttrs}\n          {...restInheritedAttributes}\n          {...titleAttr}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n          ref={(el) => (this.buttonEl = el)}\n          id={buttonId}\n          aria-describedby={describedBy}\n        >\n          {this.hasIconSlot() && !this.iconRightState && !this.loading && (\n            <div class=\"icon-container\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          {this.loading ? (\n            <div class=\"loading-container\" style={this.getLoadingBarWidth()}>\n              <ic-loading-indicator\n                type=\"linear\"\n                dark={\n                  this.variant === \"primary\" ||\n                  this.variant === \"destructive\" ||\n                  this.buttonStyle === IcThemeForegroundEnum.Dark ||\n                  this.buttonStyle === IcThemeForegroundEnum.Light\n                }\n              ></ic-loading-indicator>\n            </div>\n          ) : (\n            <slot />\n          )}\n\n          {this.hasIconSlot() && this.iconRightState && !this.loading && (\n            <div class=\"icon-container\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n        </TagType>\n      );\n    };\n\n    return (\n      <Host\n        class={{\n          [\"disabled\"]: this.disabled && !this.loading,\n          [`button-variant-${this.variant}`]: true,\n          [`button-size-${this.size}`]: true,\n          [\"loading\"]: this.loading,\n          [\"dark\"]: this.buttonStyle === IcThemeForegroundEnum.Dark,\n          [\"light\"]: this.buttonStyle === IcThemeForegroundEnum.Light,\n          [\"full-width\"]: this.fullWidth,\n        }}\n        onClick={this.handleClick}\n      >\n        {this.hasTooltip && (\n          <ic-tooltip\n            ref={(el) => (this.tooltipEl = el)}\n            label={tooltipText}\n            element-id={buttonId}\n            placement={this.IcTooltipPlacement}\n          >\n            <ButtonContent />\n          </ic-tooltip>\n        )}\n\n        {!this.hasTooltip && <ButtonContent />}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-button/ic-button.test.a11y.js

@@ -0,0 +1,11 @@
+import { fixture } from "@open-wc/testing-helpers";
+import { axe } from "jest-axe";
+import { checkShadowElementRendersCorrectly } from "../../utils/testa11y.helpers";
+describe("button component", () => {
+  it("passes accessibility", async () => {
+    const el = await fixture("<ic-button>Button</ic-button>");
+    checkShadowElementRendersCorrectly(el);
+    expect(await axe(el)).toHaveNoViolations();
+  });
+});
+//# sourceMappingURL=ic-button.test.a11y.js.map

package/dist/collection/components/ic-button/ic-button.test.a11y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-button.test.a11y.js","sourceRoot":"","sources":["../../../src/components/ic-button/ic-button.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,8BAA8B,CAAC;AAElF,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;EAChC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,+BAA+B,CAAC,CAAC;IAC1D,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../utils/testa11y.helpers\";\n\ndescribe(\"button component\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\"<ic-button>Button</ic-button>\");\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ic-button.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-button.types.js","sourceRoot":"","sources":["../../../src/components/ic-button/ic-button.types.ts"],"names":[],"mappings":"","sourcesContent":["export type IcButtonTypes = \"reset\" | \"submit\" | \"button\";\n\nexport type IcButtonVariants =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"icon\"\n  | \"destructive\";\n\nexport type IcButtonSizes = \"default\" | \"emphasis\" | \"dense\";\n\nexport type IcButtonStyles = \"default\" | \"dark\" | \"light\";\n\nexport type IcButtonTooltipPlacement = \"top\" | \"right\" | \"bottom\" | \"left\";\n"]}