@ukic/web-components 2.1.0-beta.16 → 2.1.0-beta.18

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

@@ -20,9 +20,12 @@ let buttonIds = 0;
  */
 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,27 +38,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.download = false;
-    this.hreflang = undefined;
-    this.referrerpolicy = undefined;
-    this.variant = "primary";
-    this.size = "default";
-    this.fullWidth = false;
     this.disableTooltip = false;
-    this.tooltipPlacement = "bottom";
-    this.appearance = "default";
+    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) {
@@ -101,21 +146,6 @@ export class Button {
       this.appearance = foregroundColor;
     }
   }
-  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;
-  }
-  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"]);
@@ -158,6 +188,9 @@ 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, 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" ||
@@ -171,10 +204,11 @@ export class Button {
         [`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,
-      }, 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)));
+      }, 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"; }
@@ -191,6 +225,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,
@@ -209,7 +266,7 @@ export class Button {
         "reflect": false,
         "defaultValue": "false"
       },
-      "loading": {
+      "disableTooltip": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -221,36 +278,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": {
@@ -262,12 +314,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": {
@@ -279,12 +331,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": {
@@ -296,132 +348,115 @@ 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",
-        "reflect": false,
-        "defaultValue": "false"
+        "attribute": "formmethod",
+        "reflect": false
       },
-      "hreflang": {
-        "type": "string",
+      "formnovalidate": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The human language of the linked URL."
+          "text": "If `true`, the form will not be validated when submitted."
         },
-        "attribute": "hreflang",
+        "attribute": "formnovalidate",
         "reflect": false
       },
-      "referrerpolicy": {
+      "formtarget": {
         "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"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "How much of the referrer to send when following the link."
+          "text": "The place to display the response from submitting the form. It overrides the target attribute of the button's form owner."
         },
-        "attribute": "referrerpolicy",
+        "attribute": "formtarget",
         "reflect": false
       },
-      "variant": {
-        "type": "string",
+      "fullWidth": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "IcButtonVariants",
-          "resolved": "\"destructive\" | \"icon\" | \"primary\" | \"secondary\" | \"tertiary\"",
-          "references": {
-            "IcButtonVariants": {
-              "location": "import",
-              "path": "./ic-button.types"
-            }
-          }
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The variant of the button to be displayed."
+          "text": "If `true`, the button will fill the width of the container."
         },
-        "attribute": "variant",
+        "attribute": "full-width",
         "reflect": false,
-        "defaultValue": "\"primary\""
+        "defaultValue": "false"
       },
-      "size": {
+      "href": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "IcButtonSizes",
-          "resolved": "\"default\" | \"large\" | \"small\"",
-          "references": {
-            "IcButtonSizes": {
-              "location": "import",
-              "path": "./ic-button.types"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The size of the button to be displayed."
+          "text": "The URL that the link points to. This will render the button as an \"a\" tag."
         },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "\"default\""
+        "attribute": "href",
+        "reflect": false
       },
-      "fullWidth": {
-        "type": "boolean",
+      "hreflang": {
+        "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 human language of the linked URL."
         },
-        "attribute": "full-width",
-        "reflect": false,
-        "defaultValue": "false"
+        "attribute": "hreflang",
+        "reflect": false
       },
-      "disableTooltip": {
+      "loading": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -433,45 +468,21 @@ export class Button {
         "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": "If `true`, the button will be in loading state."
         },
-        "attribute": "disable-tooltip",
+        "attribute": "loading",
         "reflect": false,
         "defaultValue": "false"
       },
-      "tooltipPlacement": {
+      "referrerpolicy": {
         "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\""
-      },
-      "appearance": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "IcThemeForeground",
-          "resolved": "\"dark\" | \"default\" | \"light\"",
+          "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": {
-            "IcThemeForeground": {
-              "location": "import",
-              "path": "../../utils/types"
+            "ReferrerPolicy": {
+              "location": "global"
             }
           }
         },
@@ -479,13 +490,12 @@ export class Button {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The appearance of the button, e.g. dark, light, or the default."
+          "text": "How much of the referrer to send when following the link."
         },
-        "attribute": "appearance",
-        "reflect": false,
-        "defaultValue": "\"default\""
+        "attribute": "referrerpolicy",
+        "reflect": false
       },
-      "form": {
+      "rel": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -497,29 +507,35 @@ export class Button {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The <form> element to associate the button with."
+          "text": "The relationship of the linked URL as space-separated link types."
         },
-        "attribute": "form",
+        "attribute": "rel",
         "reflect": false
       },
-      "formaction": {
+      "size": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "IcButtonSizes",
+          "resolved": "\"default\" | \"large\" | \"small\"",
+          "references": {
+            "IcButtonSizes": {
+              "location": "import",
+              "path": "./ic-button.types"
+            }
+          }
         },
         "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."
+          "text": "The size of the button to be displayed."
         },
-        "attribute": "formaction",
-        "reflect": false
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "\"default\""
       },
-      "formenctype": {
+      "target": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -531,74 +547,97 @@ export class Button {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The way the submitted form data is encoded."
+          "text": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
         },
-        "attribute": "formenctype",
+        "attribute": "target",
         "reflect": false
       },
-      "formmethod": {
+      "tooltipPlacement": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "IcButtonTooltipPlacement",
+          "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+          "references": {
+            "IcButtonTooltipPlacement": {
+              "location": "import",
+              "path": "./ic-button.types"
+            }
+          }
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The HTTP method used to submit the form."
+          "text": "The position of the tooltip in relation to the button."
         },
-        "attribute": "formmethod",
-        "reflect": false
+        "attribute": "tooltip-placement",
+        "reflect": false,
+        "defaultValue": "\"bottom\""
       },
-      "formnovalidate": {
-        "type": "boolean",
+      "type": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
+          "original": "IcButtonTypes",
+          "resolved": "\"button\" | \"reset\" | \"submit\"",
+          "references": {
+            "IcButtonTypes": {
+              "location": "import",
+              "path": "./ic-button.types"
+            }
+          }
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the form will not be validated when submitted."
+          "text": "The type of the button."
         },
-        "attribute": "formnovalidate",
-        "reflect": false
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "\"button\""
       },
-      "formtarget": {
+      "variant": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "IcButtonVariants",
+          "resolved": "\"destructive\" | \"icon\" | \"primary\" | \"secondary\" | \"tertiary\"",
+          "references": {
+            "IcButtonVariants": {
+              "location": "import",
+              "path": "./ic-button.types"
+            }
+          }
         },
         "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."
+          "text": "The variant of the button to be displayed."
         },
-        "attribute": "formtarget",
-        "reflect": false
+        "attribute": "variant",
+        "reflect": false,
+        "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",
@@ -606,14 +645,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",