@ukic/canary-web-components 2.0.0-canary.0

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

@@ -0,0 +1,727 @@
+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, isSlotUsed, removeDisabledFalse, } 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() {
+    this.buttonIdNum = buttonIds++;
+    this.hasTooltip = false;
+    this.inheritedAttributes = {};
+    this.describedByEl = null;
+    this.describedById = null;
+    this.mutationObserver = null;
+    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();
+    };
+    // triggered when text content of sibling element in light DOM changes
+    this.mutationCallback = () => {
+      this.describedByContent = this.describedByEl.innerText;
+    };
+    this.describedByContent = null;
+    this.appearance = "default";
+    this.disabled = false;
+    this.disableTooltip = false;
+    this.download = false;
+    this.form = undefined;
+    this.formaction = undefined;
+    this.formenctype = undefined;
+    this.formmethod = undefined;
+    this.formnovalidate = undefined;
+    this.formtarget = undefined;
+    this.fullWidth = false;
+    this.href = undefined;
+    this.hreflang = undefined;
+    this.loading = false;
+    this.referrerpolicy = undefined;
+    this.rel = undefined;
+    this.size = "default";
+    this.target = undefined;
+    this.tooltipPlacement = "bottom";
+    this.type = "button";
+    this.variant = "primary";
+  }
+  disconnectedCallback() {
+    if (this.mutationObserver !== null && this.mutationObserver !== undefined) {
+      this.mutationObserver.disconnect();
+    }
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAttributes(this.el, [
+      ...IC_INHERITED_ARIA,
+      "aria-expanded",
+      "title",
+    ]);
+    removeDisabledFalse(this.disabled, this.el);
+    this.el.setAttribute("exportparts", "button");
+    const id = this.el.id;
+    this.id = id !== undefined ? id : null;
+    this.hasTooltip = this.variant === "icon" && this.disableTooltip === false;
+    if (!this.hasTooltip) {
+      const describedById = this.inheritedAttributes["aria-describedby"];
+      if (describedById !== undefined) {
+        this.describedById = describedById;
+        const el = this.el.parentElement.querySelector(`#${describedById}`);
+        this.describedByContent = el.innerText;
+        this.describedByEl = el;
+      }
+    }
+  }
+  componentDidLoad() {
+    this.updateTheme();
+    if (this.describedById) {
+      this.mutationObserver = new MutationObserver(this.mutationCallback);
+      this.mutationObserver.observe(this.describedByEl, {
+        characterData: true,
+        childList: true,
+        subtree: true,
+      });
+    }
+  }
+  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.removeAttribute("aria-label");
+    }
+    else {
+      this.buttonEl.setAttribute("aria-label", newValue);
+    }
+  }
+  hasIconSlot() {
+    const iconEl = this.el.querySelector(`[slot="icon"]`);
+    return iconEl !== null;
+  }
+  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.appearance = foregroundColor;
+    }
+  }
+  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,
+        form: this.form,
+        formaction: this.formaction,
+        formenctype: this.formenctype,
+        formmethod: this.formmethod,
+        formnovalidate: this.formnovalidate,
+        formtarget: this.formtarget,
+      }
+      : {
+        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}`;
+    }
+    else {
+      describedBy = this.describedById;
+    }
+    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": this.hasTooltip && ariaLabel ? null : describedBy, part: "button" }), this.hasIconSlot() && !this.loading && (h("div", { class: "icon-container" }, h("slot", { name: "icon" }))), this.loading ? (h("div", { class: "loading-container" }, h("ic-loading-indicator", { type: "linear", appearance: this.variant === "primary" ||
+          this.variant === "destructive" ||
+          this.appearance === IcThemeForegroundEnum.Dark ||
+          this.appearance === IcThemeForegroundEnum.Light
+          ? "light"
+          : "dark" }))) : (h("slot", null))));
+    };
+    return (h(Host, { class: {
+        ["disabled"]: this.disabled && !this.loading,
+        [`button-variant-${this.variant}`]: true,
+        [`button-size-${this.size}`]: true,
+        ["loading"]: this.loading,
+        ["loading-with-icon"]: this.loading && this.hasIconSlot(),
+        ["dark"]: this.appearance === IcThemeForegroundEnum.Dark,
+        ["light"]: this.appearance === IcThemeForegroundEnum.Light,
+        ["full-width"]: this.fullWidth,
+        ["with-badge"]: isSlotUsed(this.el, "badge"),
+      }, onClick: this.handleClick }, this.hasTooltip && (h("ic-tooltip", { class: { ["tooltip-disabled"]: this.disableTooltip }, ref: (el) => (this.tooltipEl = el), label: tooltipText, target: buttonId, placement: this.tooltipPlacement }, h(ButtonContent, null))), !this.hasTooltip && h(ButtonContent, null), this.describedByContent && (h("span", { id: describedBy, class: "ic-button-describedby" }, this.describedByContent))));
+  }
+  static get is() { return "ic-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ic-button.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ic-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "appearance": {
+        "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": "The appearance of the button, e.g. dark, light, or the default."
+        },
+        "attribute": "appearance",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the button will be in disabled state."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disableTooltip": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the ic-tooltip which is shown for icon variant will be disabled. Title or aria-label must be set if this prop is not applied."
+        },
+        "attribute": "disable-tooltip",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "download": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "string | boolean",
+          "resolved": "boolean | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the user can save the linked URL instead of navigating to it."
+        },
+        "attribute": "download",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "form": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The <form> element to associate the button with."
+        },
+        "attribute": "form",
+        "reflect": false
+      },
+      "formaction": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The URL that processes the information submitted by the button. It overrides the action attribute of the button's form owner. Does nothing if there is no form owner."
+        },
+        "attribute": "formaction",
+        "reflect": false
+      },
+      "formenctype": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The way the submitted form data is encoded."
+        },
+        "attribute": "formenctype",
+        "reflect": false
+      },
+      "formmethod": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The HTTP method used to submit the form."
+        },
+        "attribute": "formmethod",
+        "reflect": false
+      },
+      "formnovalidate": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the form will not be validated when submitted."
+        },
+        "attribute": "formnovalidate",
+        "reflect": false
+      },
+      "formtarget": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The place to display the response from submitting the form. It overrides the target attribute of the button's form owner."
+        },
+        "attribute": "formtarget",
+        "reflect": false
+      },
+      "fullWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the button will fill the width of the container."
+        },
+        "attribute": "full-width",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "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
+      },
+      "hreflang": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The human language of the linked URL."
+        },
+        "attribute": "hreflang",
+        "reflect": false
+      },
+      "loading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the button will be in loading state."
+        },
+        "attribute": "loading",
+        "reflect": false,
+        "defaultValue": "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
+      },
+      "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
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcSizes",
+          "resolved": "\"default\" | \"large\" | \"small\"",
+          "references": {
+            "IcSizes": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The size of the button to be displayed."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
+        },
+        "attribute": "target",
+        "reflect": false
+      },
+      "tooltipPlacement": {
+        "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": "tooltip-placement",
+        "reflect": false,
+        "defaultValue": "\"bottom\""
+      },
+      "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\""
+      },
+      "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 variant of the button to be displayed."
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "\"primary\""
+      }
+    };
+  }
+  static get states() {
+    return {
+      "describedByContent": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "icBlur",
+        "name": "icBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when button has blur"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "icFocus",
+        "name": "icFocus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when button has focus"
+        },
+        "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 listeners() {
+    return [{
+        "name": "click",
+        "method": "handleHostClick",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }, {
+        "name": "themeChange",
+        "method": "themeChangeHandler",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=ic-button.js.map