@ukic/web-components 2.1.0-beta.9 → 2.3.0

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

@@ -11,18 +11,23 @@ var __rest = (this && this.__rest) || function (s, e) {
   return t;
 };
 import { Host, h, } from "@stencil/core";
-import { getThemeFromContext, inheritAttributes } from "../../utils/helpers";
+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.
+ * @slot icon - Deprecated. This slot should not be used anymore. Use left-icon or right-icon slot instead.
+ * @slot left-icon - Content will be placed to the left of the button label.
+ * @slot right-icon - Content will be placed to the right of the button label.
  */
 export class Button {
   constructor() {
-    this.inheritedAttributes = {};
-    this.hasTooltip = false;
     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")) {
@@ -35,21 +40,69 @@ export class Button {
     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.loading = false;
-    this.type = "button";
-    this.href = undefined;
-    this.target = undefined;
-    this.rel = undefined;
+    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.variant = "primary";
+    this.rel = undefined;
     this.size = "default";
-    this.fullWidth = false;
-    this.disableTooltip = false;
+    this.target = undefined;
     this.tooltipPlacement = "bottom";
-    this.appearance = "default";
+    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) {
@@ -74,15 +127,23 @@ export class Button {
   async updateAriaLabel(newValue) {
     if (this.hasTooltip) {
       this.tooltipEl.label = newValue;
+      this.buttonEl.setAttribute("aria-label", null);
+    }
+    else {
       this.buttonEl.setAttribute("aria-label", newValue);
     }
   }
   hasIconSlot() {
     const iconEl = this.el.querySelector(`[slot="icon"]`);
-    if (iconEl != null) {
-      return true;
-    }
-    return false;
+    return iconEl !== null;
+  }
+  hasLeftIconSlot() {
+    const iconEl = this.el.querySelector(`[slot="left-icon"]`);
+    return iconEl !== null;
+  }
+  hasRightIconSlot() {
+    const iconEl = this.el.querySelector(`[slot="right-icon"]`);
+    return iconEl !== null;
   }
   handleHiddenFormButtonClick(form) {
     const hiddenFormButton = document.createElement("button");
@@ -98,24 +159,20 @@ export class Button {
       this.appearance = 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";
-  }
-  componentDidLoad() {
-    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 }
+      ? {
+        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,
@@ -144,23 +201,31 @@ export class Button {
           : `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": describedBy }), 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" ||
+      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.hasLeftIconSlot() && !this.loading && (h("div", { class: "icon-container" }, h("slot", { name: "left-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))));
+          : "dark" }))) : (h("slot", null)), this.hasRightIconSlot() && !this.loading && (h("div", { class: "icon-container" }, h("slot", { name: "right-icon" })))));
     };
     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() ||
+            this.hasLeftIconSlot() ||
+            this.hasRightIconSlot()),
         ["dark"]: this.appearance === IcThemeForegroundEnum.Dark,
         ["light"]: this.appearance === IcThemeForegroundEnum.Light,
         ["full-width"]: this.fullWidth,
-      }, 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)));
+        ["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"; }
@@ -177,6 +242,29 @@ export class Button {
   }
   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,
@@ -195,7 +283,7 @@ export class Button {
         "reflect": false,
         "defaultValue": "false"
       },
-      "loading": {
+      "disableTooltip": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -207,36 +295,31 @@ export class Button {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the button will be in loading state."
+          "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": "loading",
+        "attribute": "disable-tooltip",
         "reflect": false,
         "defaultValue": "false"
       },
-      "type": {
-        "type": "string",
+      "download": {
+        "type": "any",
         "mutable": false,
         "complexType": {
-          "original": "IcButtonTypes",
-          "resolved": "\"button\" | \"reset\" | \"submit\"",
-          "references": {
-            "IcButtonTypes": {
-              "location": "import",
-              "path": "./ic-button.types"
-            }
-          }
+          "original": "string | boolean",
+          "resolved": "boolean | string",
+          "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The type of the button."
+          "text": "If `true`, the user can save the linked URL instead of navigating to it."
         },
-        "attribute": "type",
+        "attribute": "download",
         "reflect": false,
-        "defaultValue": "\"button\""
+        "defaultValue": "false"
       },
-      "href": {
+      "form": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -248,12 +331,12 @@ export class Button {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The URL that the link points to. This will render the button as an \"a\" tag."
+          "text": "The <form> element to associate the button with."
         },
-        "attribute": "href",
+        "attribute": "form",
         "reflect": false
       },
-      "target": {
+      "formaction": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -265,12 +348,12 @@ export class Button {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
+          "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": "target",
+        "attribute": "formaction",
         "reflect": false
       },
-      "rel": {
+      "formenctype": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -282,29 +365,97 @@ export class Button {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The relationship of the linked URL as space-separated link types."
+          "text": "The way the submitted form data is encoded."
         },
-        "attribute": "rel",
+        "attribute": "formenctype",
         "reflect": false
       },
-      "download": {
-        "type": "any",
+      "formmethod": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string | boolean",
-          "resolved": "boolean | string",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the user can save the linked URL instead of navigating to it."
+          "text": "The HTTP method used to submit the form."
         },
-        "attribute": "download",
+        "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,
@@ -322,6 +473,24 @@ export class Button {
         "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,
@@ -343,39 +512,33 @@ export class Button {
         "attribute": "referrerpolicy",
         "reflect": false
       },
-      "variant": {
+      "rel": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "IcButtonVariants",
-          "resolved": "\"destructive\" | \"icon\" | \"primary\" | \"secondary\" | \"tertiary\"",
-          "references": {
-            "IcButtonVariants": {
-              "location": "import",
-              "path": "./ic-button.types"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The variant of the button to be displayed."
+          "text": "The relationship of the linked URL as space-separated link types."
         },
-        "attribute": "variant",
-        "reflect": false,
-        "defaultValue": "\"primary\""
+        "attribute": "rel",
+        "reflect": false
       },
       "size": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "IcButtonSizes",
+          "original": "IcSizes",
           "resolved": "\"default\" | \"large\" | \"small\"",
           "references": {
-            "IcButtonSizes": {
+            "IcSizes": {
               "location": "import",
-              "path": "./ic-button.types"
+              "path": "../../utils/types"
             }
           }
         },
@@ -389,50 +552,54 @@ export class Button {
         "reflect": false,
         "defaultValue": "\"default\""
       },
-      "fullWidth": {
-        "type": "boolean",
+      "target": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the button will fill the width of the container."
+          "text": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
         },
-        "attribute": "full-width",
-        "reflect": false,
-        "defaultValue": "false"
+        "attribute": "target",
+        "reflect": false
       },
-      "disableTooltip": {
-        "type": "boolean",
+      "tooltipPlacement": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
+          "original": "IcButtonTooltipPlacement",
+          "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+          "references": {
+            "IcButtonTooltipPlacement": {
+              "location": "import",
+              "path": "./ic-button.types"
+            }
+          }
         },
         "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."
+          "text": "The position of the tooltip in relation to the button."
         },
-        "attribute": "disable-tooltip",
+        "attribute": "tooltip-placement",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "\"bottom\""
       },
-      "tooltipPlacement": {
+      "type": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "IcButtonTooltipPlacement",
-          "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+          "original": "IcButtonTypes",
+          "resolved": "\"button\" | \"reset\" | \"submit\"",
           "references": {
-            "IcButtonTooltipPlacement": {
+            "IcButtonTypes": {
               "location": "import",
               "path": "./ic-button.types"
             }
@@ -442,22 +609,22 @@ export class Button {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The position of the tooltip in relation to the button."
+          "text": "The type of the button."
         },
-        "attribute": "tooltip-placement",
+        "attribute": "type",
         "reflect": false,
-        "defaultValue": "\"bottom\""
+        "defaultValue": "\"button\""
       },
-      "appearance": {
+      "variant": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
-          "original": "IcThemeForeground",
-          "resolved": "\"dark\" | \"default\" | \"light\"",
+          "original": "IcButtonVariants",
+          "resolved": "\"destructive\" | \"icon\" | \"primary\" | \"secondary\" | \"tertiary\"",
           "references": {
-            "IcThemeForeground": {
+            "IcButtonVariants": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "./ic-button.types"
             }
           }
         },
@@ -465,24 +632,29 @@ export class Button {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The appearance of the button, e.g. dark, light, or the default."
+          "text": "The variant of the button to be displayed."
         },
-        "attribute": "appearance",
+        "attribute": "variant",
         "reflect": false,
-        "defaultValue": "\"default\""
+        "defaultValue": "\"primary\""
       }
     };
   }
+  static get states() {
+    return {
+      "describedByContent": {}
+    };
+  }
   static get events() {
     return [{
-        "method": "icFocus",
-        "name": "icFocus",
+        "method": "icBlur",
+        "name": "icBlur",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when button has focus"
+          "text": "Emitted when button has blur"
         },
         "complexType": {
           "original": "void",
@@ -490,14 +662,14 @@ export class Button {
           "references": {}
         }
       }, {
-        "method": "icBlur",
-        "name": "icBlur",
+        "method": "icFocus",
+        "name": "icFocus",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when button has blur"
+          "text": "Emitted when button has focus"
         },
         "complexType": {
           "original": "void",