bromcom-ui 2.12.1-test.1 → 3.0.0-preview.0

package/dist/collection/components/atoms/button/button.js

@@ -2,146 +2,138 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { h, Host } from '@stencil/core';
-import { Generate } from '../../../helper/generate';
-import Bcm from '../../../models/bcm';
-import cs from 'classnames';
-import buttonState from "../states/button.states";
-import { ButtonTemplate } from '../../../templates/button-template';
-import { ColorHelper } from '../../../helper/color-helper';
+import { Host, h } from "@stencil/core";
+import { Generate } from "../../../helper/generate";
+import Bcm from "../../../models/bcm";
+import { buttonStyle } from "./button.style";
+import { variantOptions } from "./types";
 export class BcmButton {
   constructor() {
-    this._id = Generate.UID();
-    this.hidden = false;
+    // isLink returns true if the button should be rendered as a link
+    this.isLink = () => !!this.href;
     this.type = Bcm.ButtonType.button;
+    this.form = undefined;
+    this.formAction = undefined;
+    this.formMethod = undefined;
+    this.formEnctype = undefined;
+    this.formTarget = undefined;
+    this.formNoValidate = undefined;
+    this.href = undefined;
+    this.target = Bcm.Target["_blank"];
+    this.rel = "noreferrer noopener";
+    this.download = undefined;
+    this._id = Generate.UID();
+    this.value = undefined;
+    this.name = undefined;
+    this.variant = undefined;
+    this.dataDismiss = false;
+    this.color = undefined;
+    this.checked = false;
     this.size = Bcm.Size.medium;
     this.disabled = false;
+    this.hidden = false;
     this.kind = Bcm.Kind.solid;
     this.outline = false;
+    this.filled = true;
     this.icon = undefined;
-    this.href = undefined;
-    this.target = undefined;
-    this.value = undefined;
     this.loading = false;
-    this.variant = undefined;
-    this.dataDismiss = false;
+    this.text = undefined;
     this.fullWidth = false;
     this.iconPosition = Bcm.IconPosition.prefix;
-    this.color = undefined;
-    this.checked = false;
-  }
-  handleOnClick(e) {
-    if (this.disabled) {
-      e.preventDefault();
-      e.stopPropagation();
-      return false;
-    }
   }
-  componentWillRender() {
-    const { size, kind, icon, iconPosition, disabled, outline, href, type, target, loading, variant, fullWidth, hidden, value } = this;
-    buttonState.setValue({
-      id: this._id,
+  render() {
+    /* style definitions */
+    const { color, kind, size, variant, fullWidth, outline } = this;
+    /* Common Attributes */
+    const { value, name, dataDismiss, disabled, loading, icon, iconPosition, text } = this;
+    /* Button Attributes */
+    const { type, form, formAction, formMethod, formEnctype, formTarget, formNoValidate, checked } = this;
+    /* Link Attributes */
+    const { href, target, rel, download } = this;
+    /* Tag */
+    const Tag = this.isLink() ? "a" : "button";
+    const buttonKind = outline ? "ghost" : kind;
+    const variantExists = variant && variantOptions[variant];
+    const buttonText = text || value || (variantExists && variantOptions[variant].text);
+    const buttonIcon = icon || (variantExists && variantOptions[variant].icon);
+    const buttonIconPosition = iconPosition || (variantExists && variantOptions[variant].iconPosition);
+    /* if kind is ghost, color is overridden. */
+    const buttonAttributes = {
+      "type": type,
+      "form": form,
+      "formaction": formAction,
+      "formmethod": formMethod,
+      "formenctype": formEnctype,
+      "formtarget": formTarget,
+      "formnovalidate": formNoValidate,
+      "value": value,
+      "name": name,
+      "data-dismiss": dataDismiss,
+      "data-checked": checked,
+    };
+    const linkAttributes = {
+      href: href,
+      target: target,
+      rel: rel,
+      download: download,
+    };
+    const commonAttributes = Object.assign(Object.assign({ "aria-label": buttonText || "button" }, (!disabled && {
+      onClick: e => {
+        this.bcmButtonClick.emit(e);
+        this.bcmClick.emit(e);
+      },
+    })), (disabled && {
+      "disabled": true,
+      "aria-disabled": true,
+      "tabindex": -1,
+      "onClick": e => {
+        e.preventDefault();
+        e.stopPropagation();
+      },
+    }));
+    const { hostStyle, containerStyle, textStyle } = buttonStyle({
       size,
-      type,
-      kind,
-      icon,
-      iconPosition,
-      disabled,
-      outline,
-      href,
-      target,
-      loading,
-      variant,
+      kind: buttonKind,
       fullWidth,
-      hidden,
-      value,
-      isIconOnly: !!(this.isHaveChildNodes() && this.icon),
-    });
-  }
-  getStateData() {
-    return buttonState.getValue(this._id);
-  }
-  isHaveChildNodes() {
-    const childNodes = Array.from(this.el.childNodes);
-    return childNodes.find(node => node.nodeType === Node.TEXT_NODE) === undefined;
-  }
-  setColor(color = this.color) {
-    if (!color)
-      return;
-    const { kind } = this;
-    const prefix = `--bcm-button-${kind}`;
-    if (kind === 'solid') {
-      return {
-        [`${prefix}-color-default`]: ColorHelper.dsColor('white'),
-        [`${prefix}-color-hover`]: ColorHelper.dsColor('white'),
-        [`${prefix}-color-focus-visible`]: ColorHelper.dsColor('white'),
-        [`${prefix}-color-active`]: ColorHelper.dsColor('white'),
-        [`${prefix}-color-disabled`]: ColorHelper.dsColor('white'),
-        [`${prefix}-background-color-default`]: ColorHelper.dsColor(color + '-700'),
-        [`${prefix}-background-color-hover`]: ColorHelper.dsColor(color + '-800'),
-        [`${prefix}-background-color-focus-visible`]: ColorHelper.dsColor(color + '-900'),
-        [`${prefix}-background-color-active`]: ColorHelper.dsColor(color + '-900'),
-        [`${prefix}-background-color-disabled`]: ColorHelper.dsColor('slate-400'),
-        [`${prefix}-border-default`]: ColorHelper.dsColor(color + '-700'),
-        [`${prefix}-border-hover`]: ColorHelper.dsColor(color + '-800'),
-        [`${prefix}-border-focus-visible`]: ColorHelper.dsColor(color + '-900'),
-        [`${prefix}-border-active`]: ColorHelper.dsColor(color + '-900'),
-        [`${prefix}-border-disabled`]: ColorHelper.dsColor('slate-400')
-      };
-    }
-    else if (kind == 'link') {
-      return {
-        [`${prefix}-color-default`]: ColorHelper.dsColor(color + '-700'),
-        [`${prefix}-color-hover`]: ColorHelper.dsColor(color + '-800'),
-        [`${prefix}-color-focus-visible`]: ColorHelper.dsColor(color + '-900'),
-        [`${prefix}-color-active`]: ColorHelper.dsColor(color + '-900'),
-        [`${prefix}-color-disabled`]: ColorHelper.dsColor('slate-400'),
-        [`${prefix}-background-color-default`]: ColorHelper.dsColor('transparent'),
-        [`${prefix}-background-color-hover`]: ColorHelper.dsColor('transparent'),
-        [`${prefix}-background-color-focus-visible`]: ColorHelper.dsColor('slate-50'),
-        [`${prefix}-background-color-active`]: ColorHelper.dsColor('slate-50'),
-        [`${prefix}-background-color-disabled`]: ColorHelper.dsColor('transparent'),
-        [`${prefix}-border-default`]: ColorHelper.dsColor('transparent'),
-        [`${prefix}-border-hover`]: ColorHelper.dsColor('transparent'),
-        [`${prefix}-border-focus-visible`]: ColorHelper.dsColor('slate-50'),
-        [`${prefix}-border-active`]: ColorHelper.dsColor('slate-50'),
-        [`${prefix}-border-disabled`]: ColorHelper.dsColor('transparent')
-      };
-    }
-    else if (kind == 'ghost') {
-      return {
-        [`${prefix}-color-default`]: ColorHelper.dsColor(color + '-700'),
-        [`${prefix}-color-hover`]: ColorHelper.dsColor(color + '-800'),
-        [`${prefix}-color-focus-visible`]: ColorHelper.dsColor(color + '-600'),
-        [`${prefix}-color-active`]: ColorHelper.dsColor(color + '-600'),
-        [`${prefix}-color-disabled`]: ColorHelper.dsColor(color + '-300'),
-        [`${prefix}-background-color-default`]: ColorHelper.dsColor(color + '-100'),
-        [`${prefix}-background-color-hover`]: ColorHelper.dsColor(color + '-200'),
-        [`${prefix}-background-color-focus-visible`]: ColorHelper.dsColor(color + '-400'),
-        [`${prefix}-background-color-active`]: ColorHelper.dsColor(color + '-300'),
-        [`${prefix}-background-color-disabled`]: ColorHelper.dsColor(color + '-50'),
-        [`${prefix}-border-default`]: ColorHelper.dsColor(color + '-300'),
-        [`${prefix}-border-hover`]: ColorHelper.dsColor(color + '-400'),
-        [`${prefix}-border-focus-visible`]: ColorHelper.dsColor(color + '-600'),
-        [`${prefix}-border-active`]: ColorHelper.dsColor(color + '-500'),
-        [`${prefix}-border-disabled`]: ColorHelper.dsColor(color + '-200'),
-      };
-    }
-    return;
-  }
-  render() {
-    const { size, kind, disabled, outline, type, href, target, loading, variantColor, fullWidth, hidden, icon, iconPosition, value, isIconOnly, iconSize } = this.getStateData();
-    const classPrefix = 'bcm-button';
-    let componentClass = cs('bcm-button__container', `bcm-button__container-size-${size}`, `bcm-button__container-kind-${outline ? 'ghost' : kind}`, {
-      'full-width': fullWidth,
-      'checked': this.checked,
-      'disabled': disabled,
+      checked: this.checked,
+      disabled,
     });
-    const hostClasses = cs(`${classPrefix}`, {
-      hidden,
-      'full-width': fullWidth,
+    const tones = {
+      solid: {
+        "white": ["text", "text-hover", "text-active"],
+        "700": ["bg", "border"],
+        "800": ["bg-hover", "border-hover"],
+        "900": ["bg-active", "border-active"],
+      },
+      ghost: {
+        "700": ["text"],
+        "800": ["text-hover"],
+        "900": ["text-active"],
+        "100": ["bg"],
+        "200": ["bg-hover"],
+        "300": ["bg-active", "border"],
+        "400": ["border-hover"],
+        "500": ["border-active"],
+      },
+      link: {
+        "transparent": ["bg", "bg-hover", "bg-active", "border", "border-hover", "border-active"],
+        "700": ["text"],
+        "800": ["text-hover"],
+        "900": ["text-active"],
+      },
+    };
+    const buttonColor = {
+      solid: color || (variantExists && variantOptions[variant].color),
+      ghost: "slate",
+      link: color || (variantExists && variantOptions[variant].color) || "blue",
+    };
+    const dc = Generate.getTwColor({
+      color: buttonColor[buttonKind],
+      tones: tones[buttonKind],
+      variable: `--bcm-button`,
     });
-    return (h(Host, { class: hostClasses, style: this.setColor(variantColor), onClick: () => !disabled && this.bcmClick.emit(this.el) }, h(ButtonTemplate, { type: type, value: value, componentClass: componentClass, disabled: disabled, href: href, target: target, icon: icon, loading: loading, iconSize: iconSize, isIconOnly: isIconOnly, iconPosition: iconPosition })));
+    const style = Object.assign({}, dc);
+    return (h(Host, { class: hostStyle(), style: style }, h(Tag, Object.assign({ class: containerStyle() }, commonAttributes, (this.isLink() ? linkAttributes : buttonAttributes)), h("slot", { name: "prefix" }), buttonIcon && (h("span", { class: `${buttonIconPosition == "suffix" ? "tw-order-1" : "tw-order-0"} bcm-button__container-icon` }, h("i", { class: `${buttonIcon}` }))), h("span", { class: textStyle() }, h("slot", null, buttonText)), h("slot", { name: "suffix" }), loading && (h("div", { class: "tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center tw-rounded-[--bcm-button-radius] tw-bg-inherit" }, h("i", { class: "far fa-spinner-third fa-spin" }))))));
   }
   static get is() { return "bcm-button"; }
   static get originalStyleUrls() {
@@ -156,9 +148,32 @@ export class BcmButton {
   }
   static get properties() {
     return {
-      "_id": {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ButtonTypes",
+          "resolved": "\"button\" | \"reset\" | \"submit\"",
+          "references": {
+            "ButtonTypes": {
+              "location": "import",
+              "path": "../../../models/bcm-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "Bcm.ButtonType.button"
+      },
+      "form": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -170,16 +185,15 @@ export class BcmButton {
           "tags": [],
           "text": ""
         },
-        "attribute": "id",
-        "reflect": true,
-        "defaultValue": "Generate.UID()"
+        "attribute": "form",
+        "reflect": false
       },
-      "hidden": {
-        "type": "boolean",
-        "mutable": true,
+      "formAction": {
+        "type": "string",
+        "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
@@ -188,22 +202,16 @@ export class BcmButton {
           "tags": [],
           "text": ""
         },
-        "attribute": "hidden",
-        "reflect": true,
-        "defaultValue": "false"
+        "attribute": "formaction",
+        "reflect": false
       },
-      "type": {
+      "formMethod": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
-          "original": "ButtonTypes",
-          "resolved": "\"button\" | \"reset\" | \"submit\"",
-          "references": {
-            "ButtonTypes": {
-              "location": "import",
-              "path": "../../../models/bcm-types"
-            }
-          }
+          "original": "\"post\" | \"get\"",
+          "resolved": "\"get\" | \"post\"",
+          "references": {}
         },
         "required": false,
         "optional": false,
@@ -211,22 +219,16 @@ export class BcmButton {
           "tags": [],
           "text": ""
         },
-        "attribute": "type",
-        "reflect": false,
-        "defaultValue": "Bcm.ButtonType.button"
+        "attribute": "formmethod",
+        "reflect": false
       },
-      "size": {
+      "formEnctype": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
-          "original": "SizeTypes",
-          "resolved": "\"large\" | \"medium\" | \"small\"",
-          "references": {
-            "SizeTypes": {
-              "location": "import",
-              "path": "../../../models/bcm-types"
-            }
-          }
+          "original": "\"application/x-www-form-urlencoded\" | \"multipart/form-data\" | \"text/plain\"",
+          "resolved": "\"application/x-www-form-urlencoded\" | \"multipart/form-data\" | \"text/plain\"",
+          "references": {}
         },
         "required": false,
         "optional": false,
@@ -234,13 +236,29 @@ export class BcmButton {
           "tags": [],
           "text": ""
         },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "Bcm.Size.medium"
+        "attribute": "formenctype",
+        "reflect": false
       },
-      "disabled": {
+      "formTarget": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\" | string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "formtarget",
+        "reflect": false
+      },
+      "formNoValidate": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -252,22 +270,16 @@ export class BcmButton {
           "tags": [],
           "text": ""
         },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
+        "attribute": "formnovalidate",
+        "reflect": false
       },
-      "kind": {
+      "href": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
-          "original": "KindTypes",
-          "resolved": "\"ghost\" | \"ghost-link\" | \"link\" | \"solid\"",
-          "references": {
-            "KindTypes": {
-              "location": "import",
-              "path": "../../../models/bcm-types"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
         "required": false,
         "optional": false,
@@ -275,17 +287,21 @@ export class BcmButton {
           "tags": [],
           "text": ""
         },
-        "attribute": "kind",
-        "reflect": false,
-        "defaultValue": "Bcm.Kind.solid"
+        "attribute": "href",
+        "reflect": false
       },
-      "outline": {
-        "type": "boolean",
-        "mutable": true,
+      "target": {
+        "type": "string",
+        "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
+          "original": "TargetTypes",
+          "resolved": "\"blank\" | \"parent\" | \"self\" | \"top\"",
+          "references": {
+            "TargetTypes": {
+              "location": "import",
+              "path": "../../../models/bcm-types"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -293,13 +309,13 @@ export class BcmButton {
           "tags": [],
           "text": ""
         },
-        "attribute": "outline",
+        "attribute": "target",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "Bcm.Target[\"_blank\"]"
       },
-      "icon": {
+      "rel": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -311,29 +327,30 @@ export class BcmButton {
           "tags": [],
           "text": ""
         },
-        "attribute": "icon",
-        "reflect": false
+        "attribute": "rel",
+        "reflect": false,
+        "defaultValue": "\"noreferrer noopener\""
       },
-      "href": {
+      "download": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""
         },
-        "attribute": "href",
+        "attribute": "download",
         "reflect": false
       },
-      "target": {
+      "_id": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -345,12 +362,13 @@ export class BcmButton {
           "tags": [],
           "text": ""
         },
-        "attribute": "target",
-        "reflect": false
+        "attribute": "id",
+        "reflect": true,
+        "defaultValue": "Generate.UID()"
       },
       "value": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -365,12 +383,12 @@ export class BcmButton {
         "attribute": "value",
         "reflect": false
       },
-      "loading": {
-        "type": "boolean",
-        "mutable": true,
+      "name": {
+        "type": "string",
+        "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
@@ -379,13 +397,12 @@ export class BcmButton {
           "tags": [],
           "text": ""
         },
-        "attribute": "loading",
-        "reflect": false,
-        "defaultValue": "false"
+        "attribute": "name",
+        "reflect": false
       },
       "variant": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "VariantProp",
           "resolved": "\"filter\" | \"remove\" | \"cancel\" | \"close\" | \"reset\" | \"submit\" | \"apply\" | \"download\" | \"save\" | \"ok\" | \"new\" | \"add\" | \"create\" | \"prev\" | \"next\" | \"send\" | \"delete\" | \"decline\" | \"archive\" | \"edit\" | \"export\" | \"import\" | \"update\"",
@@ -407,7 +424,7 @@ export class BcmButton {
       },
       "dataDismiss": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -423,9 +440,26 @@ export class BcmButton {
         "reflect": false,
         "defaultValue": "false"
       },
-      "fullWidth": {
+      "color": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": false
+      },
+      "checked": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -437,18 +471,18 @@ export class BcmButton {
           "tags": [],
           "text": ""
         },
-        "attribute": "full-width",
+        "attribute": "checked",
         "reflect": false,
         "defaultValue": "false"
       },
-      "iconPosition": {
+      "size": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
-          "original": "IconPositionTypes",
-          "resolved": "\"prefix\" | \"suffix\"",
+          "original": "SizeTypes",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
           "references": {
-            "IconPositionTypes": {
+            "SizeTypes": {
               "location": "import",
               "path": "../../../models/bcm-types"
             }
@@ -460,16 +494,16 @@ export class BcmButton {
           "tags": [],
           "text": ""
         },
-        "attribute": "icon-position",
+        "attribute": "size",
         "reflect": false,
-        "defaultValue": "Bcm.IconPosition.prefix"
+        "defaultValue": "Bcm.Size.medium"
       },
-      "color": {
-        "type": "any",
-        "mutable": true,
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
         "complexType": {
-          "original": "any",
-          "resolved": "any",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
@@ -478,12 +512,102 @@ export class BcmButton {
           "tags": [],
           "text": ""
         },
-        "attribute": "color",
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "hidden": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hidden",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "kind": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"solid\" | \"ghost\" | \"link\" | \"outline\"",
+          "resolved": "\"ghost\" | \"link\" | \"outline\" | \"solid\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "kind",
+        "reflect": false,
+        "defaultValue": "Bcm.Kind.solid"
+      },
+      "outline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "outline",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "filled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "filled",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon",
         "reflect": false
       },
-      "checked": {
+      "loading": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -495,14 +619,87 @@ export class BcmButton {
           "tags": [],
           "text": ""
         },
-        "attribute": "checked",
+        "attribute": "loading",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "text": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "text",
+        "reflect": false
+      },
+      "fullWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "full-width",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "iconPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IconPositionTypes",
+          "resolved": "\"prefix\" | \"suffix\"",
+          "references": {
+            "IconPositionTypes": {
+              "location": "import",
+              "path": "../../../models/bcm-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon-position",
+        "reflect": false,
+        "defaultValue": "Bcm.IconPosition.prefix"
       }
     };
   }
   static get events() {
     return [{
+        "method": "bcmButtonClick",
+        "name": "bcm-button-click",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "This is the button click event."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
         "method": "bcmClick",
         "name": "bcm-click",
         "bubbles": true,
@@ -510,7 +707,7 @@ export class BcmButton {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "This is the click event."
         },
         "complexType": {
           "original": "any",
@@ -520,13 +717,4 @@ export class BcmButton {
       }];
   }
   static get elementRef() { return "el"; }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "handleOnClick",
-        "target": undefined,
-        "capture": true,
-        "passive": false
-      }];
-  }
 }