@ukic/web-components 2.1.0-beta.15 → 2.1.0-beta.17

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

@@ -11,7 +11,7 @@ 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, removeDisabledFalse, } from "../../utils/helpers";
 import { IC_INHERITED_ARIA } from "../../utils/constants";
 import { IcThemeForegroundEnum, } from "../../utils/types";
 let buttonIds = 0;
@@ -20,9 +20,9 @@ let buttonIds = 0;
  */
 export class Button {
   constructor() {
-    this.inheritedAttributes = {};
-    this.hasTooltip = false;
     this.buttonIdNum = buttonIds++;
+    this.hasTooltip = false;
+    this.inheritedAttributes = {};
     this.handleClick = () => {
       if ((this.el.type === "submit" || this.el.type === "reset") &&
         !!this.el.closest("FORM")) {
@@ -35,27 +35,42 @@ export class Button {
     this.onBlur = () => {
       this.icBlur.emit();
     };
+    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";
+  }
+  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();
   }
   handleHostClick(event) {
     if (this.disabled || this.loading) {
@@ -101,20 +116,6 @@ export class Button {
       this.appearance = foregroundColor;
     }
   }
-  componentWillLoad() {
-    this.inheritedAttributes = inheritAttributes(this.el, [
-      ...IC_INHERITED_ARIA,
-      "aria-expanded",
-      "title",
-    ]);
-    this.el.setAttribute("exportparts", "button");
-    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"]);
@@ -170,6 +171,7 @@ 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,
@@ -190,6 +192,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,
@@ -208,7 +233,7 @@ export class Button {
         "reflect": false,
         "defaultValue": "false"
       },
-      "loading": {
+      "disableTooltip": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -220,36 +245,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": {
@@ -261,12 +281,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": {
@@ -278,12 +298,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": {
@@ -295,132 +315,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": {
@@ -432,45 +435,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"
             }
           }
         },
@@ -478,13 +457,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": {
@@ -496,29 +474,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": {
@@ -530,74 +514,92 @@ 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 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",
@@ -605,14 +607,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",