npm - @esri/calcite-components - Versions diffs - 1.0.0-next.596 → 1.0.0-next.598 - Mend

@esri/calcite-components 1.0.0-next.596 → 1.0.0-next.598

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1195) hide show

package/dist/collection/components/button/button.js CHANGED Viewed

@@ -1,10 +1,10 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.596
+ * v1.0.0-next.598
  */
 import "form-request-submit-polyfill/form-request-submit-polyfill";
-import { Component, Element, h, Method, Prop, Build, State, Watch } from "@stencil/core";
+import { h, Build } from "@stencil/core";
 import { CSS, TEXT } from "./resources";
 import { closestElementCrossShadowBoundary } from "../../utils/dom";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
@@ -106,21 +106,15 @@ export class Button {
   render() {
     const childElType = this.href ? "a" : "button";
     const Tag = childElType;
-    const loaderNode = this.hasLoader ? (h("div", { class: CSS.buttonLoader },
-      h("calcite-loader", { active: true, class: this.loading ? CSS.loadingIn : CSS.loadingOut, inline: true, label: this.intlLoading, scale: "m" }))) : null;
+    const loaderNode = this.hasLoader ? (h("div", { class: CSS.buttonLoader }, h("calcite-loader", { active: true, class: this.loading ? CSS.loadingIn : CSS.loadingOut, inline: true, label: this.intlLoading, scale: "m" }))) : null;
     const iconStartEl = (h("calcite-icon", { class: { [CSS.icon]: true, [CSS.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
     const iconEndEl = (h("calcite-icon", { class: { [CSS.icon]: true, [CSS.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
-    const contentEl = (h("span", { class: CSS.content },
-      h("slot", null)));
+    const contentEl = (h("span", { class: CSS.content }, h("slot", null)));
     return (h(Tag, { "aria-label": getLabelText(this), class: {
         [CSS.contentSlotted]: this.hasContent,
         [CSS.iconStartEmpty]: !this.iconStart,
         [CSS.iconEndEmpty]: !this.iconEnd
-      }, disabled: this.disabled || this.loading, href: childElType === "a" && this.href, name: childElType === "button" && this.name, onClick: this.handleClick, ref: (el) => (this.childEl = el), rel: childElType === "a" && this.rel, tabIndex: this.disabled || this.loading ? -1 : null, target: childElType === "a" && this.target, type: childElType === "button" && this.type },
-      loaderNode,
-      this.iconStart ? iconStartEl : null,
-      this.hasContent ? contentEl : null,
-      this.iconEnd ? iconEndEl : null));
+      }, disabled: this.disabled || this.loading, href: childElType === "a" && this.href, name: childElType === "button" && this.name, onClick: this.handleClick, ref: (el) => (this.childEl = el), rel: childElType === "a" && this.rel, tabIndex: this.disabled || this.loading ? -1 : null, target: childElType === "a" && this.target, type: childElType === "button" && this.type }, loaderNode, this.iconStart ? iconStartEl : null, this.hasContent ? contentEl : null, this.iconEnd ? iconEndEl : null));
   }
   //--------------------------------------------------------------------------
   //
@@ -155,426 +149,438 @@ export class Button {
   }
   static get is() { return "calcite-button"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["button.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["button.css"]
-  }; }
-  static get properties() { return {
-    "alignment": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "ButtonAlignment",
-        "resolved": "\"center\" | \"end\" | \"icon-end-space-between\" | \"icon-start-space-between\" | \"space-between\" | \"start\"",
-        "references": {
-          "ButtonAlignment": {
-            "location": "import",
-            "path": "./interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "optionally specify alignment of button elements."
-      },
-      "attribute": "alignment",
-      "reflect": true,
-      "defaultValue": "\"center\""
-    },
-    "appearance": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "ButtonAppearance",
-        "resolved": "\"clear\" | \"minimal\" | \"outline\" | \"solid\" | \"transparent\"",
-        "references": {
-          "ButtonAppearance": {
-            "location": "import",
-            "path": "./interfaces"
+  static get originalStyleUrls() {
+    return {
+      "$": ["button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "alignment": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ButtonAlignment",
+          "resolved": "\"center\" | \"end\" | \"icon-end-space-between\" | \"icon-start-space-between\" | \"space-between\" | \"start\"",
+          "references": {
+            "ButtonAlignment": {
+              "location": "import",
+              "path": "./interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "specify the appearance style of the button, defaults to solid."
-      },
-      "attribute": "appearance",
-      "reflect": true,
-      "defaultValue": "\"solid\""
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Applies to the aria-label attribute on the button or hyperlink"
-      },
-      "attribute": "label",
-      "reflect": false
-    },
-    "color": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "ButtonColor",
-        "resolved": "\"blue\" | \"inverse\" | \"neutral\" | \"red\"",
-        "references": {
-          "ButtonColor": {
-            "location": "import",
-            "path": "./interfaces"
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "optionally specify alignment of button elements."
+        },
+        "attribute": "alignment",
+        "reflect": true,
+        "defaultValue": "\"center\""
+      },
+      "appearance": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ButtonAppearance",
+          "resolved": "\"clear\" | \"minimal\" | \"outline\" | \"solid\" | \"transparent\"",
+          "references": {
+            "ButtonAppearance": {
+              "location": "import",
+              "path": "./interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "specify the color of the button, defaults to blue"
-      },
-      "attribute": "color",
-      "reflect": true,
-      "defaultValue": "\"blue\""
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "is the button disabled"
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "href": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "optionally pass a href - used to determine if the component should render as a button or an anchor"
-      },
-      "attribute": "href",
-      "reflect": true
-    },
-    "iconEnd": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "optionally pass an icon to display at the end of a button - accepts calcite ui icon names"
-      },
-      "attribute": "icon-end",
-      "reflect": true
-    },
-    "iconFlipRtl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "FlipContext",
-        "resolved": "\"both\" | \"end\" | \"start\"",
-        "references": {
-          "FlipContext": {
-            "location": "import",
-            "path": "../interfaces"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "specify the appearance style of the button, defaults to solid."
+        },
+        "attribute": "appearance",
+        "reflect": true,
+        "defaultValue": "\"solid\""
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Applies to the aria-label attribute on the button or hyperlink"
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ButtonColor",
+          "resolved": "\"blue\" | \"inverse\" | \"neutral\" | \"red\"",
+          "references": {
+            "ButtonColor": {
+              "location": "import",
+              "path": "./interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "flip the icon(s) in rtl"
-      },
-      "attribute": "icon-flip-rtl",
-      "reflect": true
-    },
-    "iconStart": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "optionally pass an icon to display at the start of a button - accepts calcite ui icon names"
-      },
-      "attribute": "icon-start",
-      "reflect": true
-    },
-    "intlLoading": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Loading\""
-          }],
-        "text": "string to override English loading text"
-      },
-      "attribute": "intl-loading",
-      "reflect": false,
-      "defaultValue": "TEXT.loading"
-    },
-    "loading": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "optionally add a calcite-loader component to the button, disabling interaction."
-      },
-      "attribute": "loading",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The name attribute to apply to the button"
-      },
-      "attribute": "name",
-      "reflect": true
-    },
-    "rel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The rel attribute to apply to the hyperlink"
-      },
-      "attribute": "rel",
-      "reflect": true
-    },
-    "form": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "\u2013 this property is no longer needed if placed inside a form."
-          }],
-        "text": "The form ID to associate with the component"
-      },
-      "attribute": "form",
-      "reflect": false
-    },
-    "round": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "optionally add a round style to the button"
-      },
-      "attribute": "round",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "scale": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Scale",
-        "resolved": "\"l\" | \"m\" | \"s\"",
-        "references": {
-          "Scale": {
-            "location": "import",
-            "path": "../interfaces"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "specify the color of the button, defaults to blue"
+        },
+        "attribute": "color",
+        "reflect": true,
+        "defaultValue": "\"blue\""
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "is the button disabled"
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "optionally pass a href - used to determine if the component should render as a button or an anchor"
+        },
+        "attribute": "href",
+        "reflect": true
+      },
+      "iconEnd": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies an icon to display at the end of the component."
+        },
+        "attribute": "icon-end",
+        "reflect": true
+      },
+      "iconFlipRtl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "FlipContext",
+          "resolved": "\"both\" | \"end\" | \"start\"",
+          "references": {
+            "FlipContext": {
+              "location": "import",
+              "path": "../interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "specify the scale of the button, defaults to m"
-      },
-      "attribute": "scale",
-      "reflect": true,
-      "defaultValue": "\"m\""
-    },
-    "splitChild": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "\"primary\" | \"secondary\" | false",
-        "resolved": "\"primary\" | \"secondary\" | boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "is the button a child of a calcite-split-button"
-      },
-      "attribute": "split-child",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "target": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The target attribute to apply to the hyperlink"
-      },
-      "attribute": "target",
-      "reflect": true
-    },
-    "type": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The type attribute to apply to the button"
-      },
-      "attribute": "type",
-      "reflect": true,
-      "defaultValue": "\"button\""
-    },
-    "width": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Width",
-        "resolved": "\"auto\" | \"full\" | \"half\"",
-        "references": {
-          "Width": {
-            "location": "import",
-            "path": "../interfaces"
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "When true, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`)."
+        },
+        "attribute": "icon-flip-rtl",
+        "reflect": true
+      },
+      "iconStart": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies an icon to display at the start of the component."
+        },
+        "attribute": "icon-start",
+        "reflect": true
+      },
+      "intlLoading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Loading\""
+            }],
+          "text": "string to override English loading text"
+        },
+        "attribute": "intl-loading",
+        "reflect": false,
+        "defaultValue": "TEXT.loading"
+      },
+      "loading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "optionally add a calcite-loader component to the button, disabling interaction."
+        },
+        "attribute": "loading",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The name attribute to apply to the button"
+        },
+        "attribute": "name",
+        "reflect": true
+      },
+      "rel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The rel attribute to apply to the hyperlink"
+        },
+        "attribute": "rel",
+        "reflect": true
+      },
+      "form": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "\u2013 this property is no longer needed if placed inside a form."
+            }],
+          "text": "The form ID to associate with the component"
+        },
+        "attribute": "form",
+        "reflect": false
+      },
+      "round": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "optionally add a round style to the button"
+        },
+        "attribute": "round",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "scale": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Scale",
+          "resolved": "\"l\" | \"m\" | \"s\"",
+          "references": {
+            "Scale": {
+              "location": "import",
+              "path": "../interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "specify the width of the button, defaults to auto"
-      },
-      "attribute": "width",
-      "reflect": true,
-      "defaultValue": "\"auto\""
-    }
-  }; }
-  static get states() { return {
-    "hasContent": {},
-    "hasLoader": {}
-  }; }
-  static get methods() { return {
-    "setFocus": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "specify the scale of the button, defaults to m"
+        },
+        "attribute": "scale",
+        "reflect": true,
+        "defaultValue": "\"m\""
+      },
+      "splitChild": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "\"primary\" | \"secondary\" | false",
+          "resolved": "\"primary\" | \"secondary\" | boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "is the button a child of a calcite-split-button"
+        },
+        "attribute": "split-child",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The target attribute to apply to the hyperlink"
+        },
+        "attribute": "target",
+        "reflect": true
+      },
+      "type": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The type attribute to apply to the button"
+        },
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "\"button\""
+      },
+      "width": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Width",
+          "resolved": "\"auto\" | \"full\" | \"half\"",
+          "references": {
+            "Width": {
+              "location": "import",
+              "path": "../interfaces"
+            }
           }
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Sets focus on the component.",
-        "tags": []
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "specify the width of the button, defaults to auto"
+        },
+        "attribute": "width",
+        "reflect": true,
+        "defaultValue": "\"auto\""
       }
-    }
-  }; }
+    };
+  }
+  static get states() {
+    return {
+      "hasContent": {},
+      "hasLoader": {}
+    };
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets focus on the component.",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "loading",
-      "methodName": "loadingChanged"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "loading",
+        "methodName": "loadingChanged"
+      }];
+  }
 }