bromcom-ui 2.8.0-rc.8 → 3.0.0-rc.0

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

@@ -12,164 +12,134 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
         r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-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 { IsLoad } from '../../../decorators/is-load-decorator';
+// import { ColorHelper } from "@bcm/helpers";
+import { IsLoad } from "@bcm/decorator";
+import { Generate } from "@bcm/helpers";
+import { Host, h } from "@stencil/core";
+import cs from "classnames";
+import Bcm from "../../../models/bcm";
+import { IconTemplate } from "../../../templates/icon-template";
+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.kind = Bcm.Kind.solid;
+    this.kind = undefined;
     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,
-      size,
-      type,
-      kind,
-      icon,
-      iconPosition,
-      disabled,
-      outline,
-      href,
-      target,
-      loading,
-      variant,
-      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 + '-500'),
-        [`${prefix}-background-color-hover`]: ColorHelper.dsColor(color + '-600'),
-        [`${prefix}-background-color-focus-visible`]: ColorHelper.dsColor(color + '-700'),
-        [`${prefix}-background-color-active`]: ColorHelper.dsColor(color + '-800'),
-        [`${prefix}-background-color-disabled`]: ColorHelper.dsColor('slate-400'),
-        [`${prefix}-border-default`]: ColorHelper.dsColor(color + '-500'),
-        [`${prefix}-border-hover`]: ColorHelper.dsColor(color + '-600'),
-        [`${prefix}-border-focus-visible`]: ColorHelper.dsColor(color + '-700'),
-        [`${prefix}-border-active`]: ColorHelper.dsColor(color + '-800'),
-        [`${prefix}-border-disabled`]: ColorHelper.dsColor('slate-400')
-      };
-    }
-    else if (kind == 'link') {
-      return {
-        [`${prefix}-color-default`]: ColorHelper.dsColor(color + '-500'),
-        [`${prefix}-color-hover`]: ColorHelper.dsColor(color + '-600'),
-        [`${prefix}-color-focus-visible`]: ColorHelper.dsColor(color + '-800'),
-        [`${prefix}-color-active`]: ColorHelper.dsColor(color + '-700'),
-        [`${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 + '-600'),
-        [`${prefix}-color-hover`]: ColorHelper.dsColor(color + '-600'),
-        [`${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,
-    });
-    const hostClasses = cs(`${classPrefix}`, {
-      hidden,
-      'full-width': fullWidth,
-    });
-    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 })));
-  }
-  static get is() { return "bcm-button"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["button.scss"]
+    /* style definitions */
+    const { color, kind, size, variant, fullWidth, outline } = this;
+    /* Common Attributes */
+    const { _id, 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 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,
     };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["button.css"]
+    const linkAttributes = {
+      href: href,
+      target: target,
+      rel: rel,
+      download: download,
     };
+    const commonAttributes = Object.assign({ "disabled": disabled, "aria-disabled": disabled, "tabindex": disabled && -1 }, (!disabled && {
+      onClick: e => {
+        this.bcmButtonClick.emit(e);
+        this.bcmClick.emit(e);
+      },
+    }));
+    const buttonKind = kind || (outline ? Bcm.Kind.ghost : Bcm.Kind.solid);
+    /** Variant:
+     * The variant prop determines the button's appearance.
+     * If the variant prop is not set, the button will render in the default style.
+     * Props is always a priority.
+     */
+    const variantExists = variant && variantOptions[variant];
+    const buttonText = text || (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 buttonColor = buttonKind != "ghost" && (color || (variantExists && variantOptions[variant].color));
+    return (h(Host, { class: cs("tw-preflight", "bcm-ui-element bcm-ui-action bcm-button tw-relative tw-inline-flex tw-w-auto", {
+        "tw-w-full": fullWidth,
+        "tw-cursor-not-allowed": disabled,
+        "tw-pointer-events-none": disabled || loading,
+      }) }, h(Tag, Object.assign({ id: _id + "-button", class: cs("bcm-ui-element-button", buttonKind, size, {
+        "colored": buttonColor,
+        "disabled": disabled,
+        "tw-w-full": fullWidth,
+      }), style: Object.assign({}, Generate.getTwColor({ color: buttonColor })) }, commonAttributes, (this.isLink() ? linkAttributes : buttonAttributes)), buttonIcon && h(IconTemplate, { icon: buttonIcon, className: cs(buttonIconPosition === Bcm.IconPosition.prefix ? "tw-order-first" : "tw-order-last") }), h("slot", null, buttonText), loading && (h("div", { class: "tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center tw-rounded-md tw-bg-inherit" }, h("i", { class: "far fa-spinner-third fa-spin" }))))));
   }
+  static get is() { return "bcm-button"; }
   static get properties() {
     return {
-      "_id": {
+      "type": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
+        "complexType": {
+          "original": "ButtonTypes",
+          "resolved": "\"button\" | \"reset\" | \"submit\"",
+          "references": {
+            "ButtonTypes": {
+              "location": "import",
+              "path": "@bcm/model"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "Bcm.ButtonType.button"
+      },
+      "form": {
+        "type": "string",
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -181,16 +151,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,
@@ -199,22 +168,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,
@@ -222,22 +185,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,
@@ -245,13 +202,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",
@@ -263,22 +236,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\" | \"link\" | \"solid\"",
-          "references": {
-            "KindTypes": {
-              "location": "import",
-              "path": "../../../models/bcm-types"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
         "required": false,
         "optional": false,
@@ -286,17 +253,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": "@bcm/model"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -304,13 +275,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",
@@ -322,29 +293,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",
@@ -356,12 +328,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",
@@ -376,12 +349,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,
@@ -390,16 +363,15 @@ 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\"",
+          "resolved": "\"filter\" | \"remove\" | \"cancel\" | \"close\" | \"reset\" | \"submit\" | \"apply\" | \"download\" | \"save\" | \"ok\" | \"new\" | \"add\" | \"create\" | \"send\" | \"delete\" | \"decline\" | \"archive\" | \"prev\" | \"next\" | \"edit\" | \"export\" | \"import\" | \"update\"",
           "references": {
             "VariantProp": {
               "location": "import",
@@ -418,7 +390,7 @@ export class BcmButton {
       },
       "dataDismiss": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -434,9 +406,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",
@@ -448,20 +437,20 @@ 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"
+              "path": "@bcm/model"
             }
           }
         },
@@ -471,16 +460,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,
@@ -489,12 +478,30 @@ export class BcmButton {
           "tags": [],
           "text": ""
         },
-        "attribute": "color",
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "kind": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"solid\" | \"ghost\"",
+          "resolved": "\"ghost\" | \"solid\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "kind",
         "reflect": false
       },
-      "checked": {
+      "outline": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -506,14 +513,140 @@ export class BcmButton {
           "tags": [],
           "text": ""
         },
-        "attribute": "checked",
+        "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
+      },
+      "loading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "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": "@bcm/model"
+            }
+          }
+        },
+        "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,
@@ -521,7 +654,7 @@ export class BcmButton {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "This is the click event."
         },
         "complexType": {
           "original": "any",
@@ -531,15 +664,6 @@ export class BcmButton {
       }];
   }
   static get elementRef() { return "el"; }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "handleOnClick",
-        "target": undefined,
-        "capture": true,
-        "passive": false
-      }];
-  }
 }
 __decorate([
   IsLoad()