@six-group/ui-library 3.0.0-beta.1.8 → 4.0.0-beta.1

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

@@ -1,4 +1,4 @@
-import { Component, Element, h, Method, Prop, State, Event } from '@stencil/core';
+import { h } from '@stencil/core';
 import { hasSlot } from '../../utils/slot';
 /**
  * @since 1.0
@@ -22,24 +22,20 @@ export class SixButton {
     this.hasLabel = false;
     this.hasPrefix = false;
     this.hasSuffix = false;
-    /** The button's type. */
     this.type = 'primary';
-    /** The button's size. */
     this.size = 'medium';
-    /** Set to true to draw the button with a caret for use with dropdowns, popovers, etc. */
     this.caret = false;
-    /** Set to true to disable the button. */
     this.disabled = false;
-    /** Set to true to draw the button in a loading state. */
     this.loading = false;
-    /** Set to true to draw a pill-style button with rounded edges. */
     this.pill = false;
-    /** Set to true to draw a circle button. */
     this.circle = false;
-    /** Indicates if activating the button should submit the form. Ignored when `href` is set. */
     this.submit = false;
-    /** Indicates if activating the button should reset the form. */
     this.reset = false;
+    this.name = undefined;
+    this.value = undefined;
+    this.href = undefined;
+    this.target = undefined;
+    this.download = undefined;
   }
   connectedCallback() {
     this.handleBlur = this.handleBlur.bind(this);
@@ -81,386 +77,388 @@ export class SixButton {
     const isLink = !!this.href;
     const isButton = !isLink;
     const Button = isLink ? 'a' : 'button';
-    return (h("div", { onClick: this.handleClick, class: { 'button-wrapper--disabled': this.disabled } },
-      h(Button, { ref: (el) => (this.button = el), part: "base", class: {
-          button: true,
-          // Types
-          'button--secondary': this.type === 'secondary',
-          'button--primary': this.type === 'primary',
-          'button--link': this.type === 'link',
-          'button--success': this.type === 'success',
-          'button--warning': this.type === 'warning',
-          'button--danger': this.type === 'danger',
-          'button--action': this.type === 'action',
-          // Sizes
-          'button--small': this.size === 'small',
-          'button--medium': this.size === 'medium',
-          'button--large': this.size === 'large',
-          // Modifiers
-          'button--caret': this.caret,
-          'button--circle': this.circle,
-          'button--disabled': this.disabled,
-          'button--focused': this.hasFocus,
-          'button--loading': this.loading,
-          'button--pill': this.pill,
-          'button--has-label': this.hasLabel,
-          'button--has-prefix': this.hasPrefix,
-          'button--has-suffix': this.hasSuffix,
-        }, disabled: isButton ? this.disabled : null, type: isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : null, name: isButton ? this.name : null, value: isButton ? this.value : null, href: isLink && this.href, target: isLink && this.target ? this.target : null, download: isLink && this.download ? this.download : null, rel: isLink && this.target ? 'noreferrer noopener' : null, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, "data-testid": "button" },
-        h("span", { part: "prefix", class: "button__prefix" },
-          h("slot", { onSlotchange: this.handleSlotChange, name: "prefix" })),
-        h("span", { part: "label", class: "button__label" },
-          h("slot", { onSlotchange: this.handleSlotChange })),
-        h("span", { part: "suffix", class: "button__suffix" },
-          h("slot", { onSlotchange: this.handleSlotChange, name: "suffix" })),
-        this.caret && (h("span", { part: "caret", class: "button__caret" },
-          h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" },
-            h("polyline", { points: "6 9 12 15 18 9" })))),
-        this.loading && h("six-spinner", null))));
+    return (h("div", { onClick: this.handleClick, class: { 'button-wrapper--disabled': this.disabled } }, h(Button, { ref: (el) => (this.button = el), part: "base", class: {
+        button: true,
+        // Types
+        'button--secondary': this.type === 'secondary',
+        'button--primary': this.type === 'primary',
+        'button--link': this.type === 'link',
+        'button--success': this.type === 'success',
+        'button--warning': this.type === 'warning',
+        'button--danger': this.type === 'danger',
+        'button--action': this.type === 'action',
+        // Sizes
+        'button--small': this.size === 'small',
+        'button--medium': this.size === 'medium',
+        'button--large': this.size === 'large',
+        // Modifiers
+        'button--caret': this.caret,
+        'button--circle': this.circle,
+        'button--disabled': this.disabled,
+        'button--focused': this.hasFocus,
+        'button--loading': this.loading,
+        'button--pill': this.pill,
+        'button--has-label': this.hasLabel,
+        'button--has-prefix': this.hasPrefix,
+        'button--has-suffix': this.hasSuffix,
+      }, disabled: isButton ? this.disabled : null, type: isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : null, name: isButton ? this.name : null, value: isButton ? this.value : null, href: isLink && this.href, target: isLink && this.target ? this.target : null, download: isLink && this.download ? this.download : null, rel: isLink && this.target ? 'noreferrer noopener' : null, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, "data-testid": "button" }, h("span", { part: "prefix", class: "button__prefix" }, h("slot", { onSlotchange: this.handleSlotChange, name: "prefix" })), h("span", { part: "label", class: "button__label" }, h("slot", { onSlotchange: this.handleSlotChange })), h("span", { part: "suffix", class: "button__suffix" }, h("slot", { onSlotchange: this.handleSlotChange, name: "suffix" })), this.caret && (h("span", { part: "caret", class: "button__caret" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "6 9 12 15 18 9" })))), this.loading && h("six-spinner", null))));
   }
   static get is() { return "six-button"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["six-button.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["six-button.css"]
-  }; }
-  static get properties() { return {
-    "type": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'secondary' | 'primary' | 'link' | 'success' | 'warning' | 'danger' | 'action'",
-        "resolved": "\"action\" | \"danger\" | \"link\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The button's type."
-      },
-      "attribute": "type",
-      "reflect": true,
-      "defaultValue": "'primary'"
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'small' | 'medium' | 'large'",
-        "resolved": "\"large\" | \"medium\" | \"small\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The button's size."
-      },
-      "attribute": "size",
-      "reflect": true,
-      "defaultValue": "'medium'"
-    },
-    "caret": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to draw the button with a caret for use with dropdowns, popovers, etc."
-      },
-      "attribute": "caret",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to disable the button."
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "loading": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to draw the button in a loading state."
-      },
-      "attribute": "loading",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "pill": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to draw a pill-style button with rounded edges."
-      },
-      "attribute": "pill",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "circle": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to draw a circle button."
-      },
-      "attribute": "circle",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "submit": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indicates if activating the button should submit the form. Ignored when `href` is set."
-      },
-      "attribute": "submit",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "reset": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indicates if activating the button should reset the form."
-      },
-      "attribute": "reset",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "An optional name for the button. Ignored when `href` is set."
-      },
-      "attribute": "name",
-      "reflect": false
-    },
-    "value": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "An optional value for the button. Ignored when `href` is set."
-      },
-      "attribute": "value",
-      "reflect": false
-    },
-    "href": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`."
-      },
-      "attribute": "href",
-      "reflect": false
-    },
-    "target": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'_blank' | '_parent' | '_self' | '_top'",
-        "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Tells the browser where to open the link. Only used when `href` is set."
-      },
-      "attribute": "target",
-      "reflect": false
-    },
-    "download": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Tells the browser to download the linked file as this filename. Only used when `href` is set."
-      },
-      "attribute": "download",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "hasFocus": {},
-    "hasLabel": {},
-    "hasPrefix": {},
-    "hasSuffix": {}
-  }; }
-  static get events() { return [{
-      "method": "sixBlur",
-      "name": "six-button-blur",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the button loses focus."
-      },
-      "complexType": {
-        "original": "EmptyPayload",
-        "resolved": "undefined",
-        "references": {
-          "EmptyPayload": {
-            "location": "import",
-            "path": "../../utils/types"
+  static get originalStyleUrls() {
+    return {
+      "$": ["six-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["six-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'secondary' | 'primary' | 'link' | 'success' | 'warning' | 'danger' | 'action'",
+          "resolved": "\"action\" | \"danger\" | \"link\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The button's type."
+        },
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "'primary'"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'small' | 'medium' | 'large'",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The button's size."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'medium'"
+      },
+      "caret": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to true to draw the button with a caret for use with dropdowns, popovers, etc."
+        },
+        "attribute": "caret",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to true to disable the button."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "loading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to true to draw the button in a loading state."
+        },
+        "attribute": "loading",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "pill": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to true to draw a pill-style button with rounded edges."
+        },
+        "attribute": "pill",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "circle": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to true to draw a circle button."
+        },
+        "attribute": "circle",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "submit": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates if activating the button should submit the form. Ignored when `href` is set."
+        },
+        "attribute": "submit",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "reset": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates if activating the button should reset the form."
+        },
+        "attribute": "reset",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "An optional name for the button. Ignored when `href` is set."
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "An optional value for the button. Ignored when `href` is set."
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`."
+        },
+        "attribute": "href",
+        "reflect": false
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'_blank' | '_parent' | '_self' | '_top'",
+          "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tells the browser where to open the link. Only used when `href` is set."
+        },
+        "attribute": "target",
+        "reflect": false
+      },
+      "download": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tells the browser to download the linked file as this filename. Only used when `href` is set."
+        },
+        "attribute": "download",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasFocus": {},
+      "hasLabel": {},
+      "hasPrefix": {},
+      "hasSuffix": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sixBlur",
+        "name": "six-button-blur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the button loses focus."
+        },
+        "complexType": {
+          "original": "EmptyPayload",
+          "resolved": "undefined",
+          "references": {
+            "EmptyPayload": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
           }
         }
-      }
-    }, {
-      "method": "sixFocus",
-      "name": "six-button-focus",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the button gains focus."
-      },
-      "complexType": {
-        "original": "EmptyPayload",
-        "resolved": "undefined",
-        "references": {
-          "EmptyPayload": {
-            "location": "import",
-            "path": "../../utils/types"
+      }, {
+        "method": "sixFocus",
+        "name": "six-button-focus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the button gains focus."
+        },
+        "complexType": {
+          "original": "EmptyPayload",
+          "resolved": "undefined",
+          "references": {
+            "EmptyPayload": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
           }
         }
-      }
-    }]; }
-  static get methods() { return {
-    "setFocus": {
-      "complexType": {
-        "signature": "(options?: FocusOptions) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "(options?: FocusOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "FocusOptions": {
+              "location": "global"
+            }
           },
-          "FocusOptions": {
-            "location": "global"
-          }
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Sets focus on the button.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Sets focus on the button.",
-        "tags": []
-      }
-    },
-    "removeFocus": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "removeFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Removes focus from the button.",
-        "tags": []
+        "docs": {
+          "text": "Removes focus from the button.",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "host"; }
 }
+//# sourceMappingURL=six-button.js.map