bromcom-ui 2.7.38-rc.9 → 2.8.0-rc.1

package/dist/collection/components/other/toast/toast.js

@@ -0,0 +1,365 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        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 cs from "classnames";
+import { IsLoad } from "../../../decorators/is-load-decorator";
+import { Generate } from "../../../helper/generate";
+import { StringHelper } from "../../../helper/string-helper";
+import Bcm from "../../../models/bcm";
+import { delay } from "../../../utils/utils";
+export class BcmToast {
+  constructor() {
+    this._id = Generate.UID();
+    this.status = undefined;
+    this.message = "";
+    this.description = "";
+    this.duration = 3000;
+    this.position = Bcm.Placement.bottom;
+    this.messageIcon = undefined;
+    this.viewButton = false;
+    this.closeButton = true;
+    this.visible = false;
+    this.visibleContainer = false;
+  }
+  async show() {
+    const container = document.getElementById(this._id + "-container");
+    if (container) {
+      document.body.appendChild(container);
+    }
+    this.visible = true;
+    await delay(50);
+    this.visibleContainer = true;
+    this.bcmToastOpen.emit();
+    if (this.timer) {
+      clearTimeout(this.timer);
+    }
+    this.timer = setTimeout(() => this.hide(), this.duration);
+    return this.el;
+  }
+  async hide() {
+    this.visibleContainer = false;
+    clearTimeout(this.timer);
+    this.bcmToastClose.emit();
+    await delay(100);
+    this.visible = false;
+  }
+  handleMouseEnter() {
+    clearTimeout(this.timer);
+  }
+  handleMouseLeave() {
+    if (this.visible) {
+      this.timer = setTimeout(() => this.hide(), 1000);
+    }
+  }
+  render() {
+    return (h(Host, { class: "tw-hidden" }, h("div", { class: cs({ "tw-hidden": !this.visible }), id: this._id + "-container", onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { class: cs("tw-pointer-events-auto tw-transform tw-transition tw-duration-300 tw-ease-in-out", "tw-flex tw-min-w-[256px] tw-max-w-[420px] tw-flex-col tw-gap-2 tw-rounded-lg tw-border tw-font-sans tw-font-normal tw-shadow-2", "tw-border-gray-300 tw-bg-white tw-text-slate-600", {
+        "tw-p-4": !this.description,
+        "tw-p-6": this.description,
+      }, "tw-fixed tw-z-50", "tw-transform tw-transition tw-duration-300 tw-ease-in-out ", {
+        "tw-inset-x-0 tw-top-4 tw-mx-auto": this.position === Bcm.Placement.top,
+        "tw-inset-x-0 tw-bottom-4 tw-mx-auto": this.position === Bcm.Placement.bottom,
+        "tw-top-4 tw-left-4": this.position === Bcm.Placement["top-start"],
+        "tw-top-4 tw-right-4": this.position === Bcm.Placement["top-end"],
+        "tw-bottom-4 tw-left-4": this.position === Bcm.Placement["bottom-start"],
+        "tw-bottom-4 tw-right-4": this.position === Bcm.Placement["bottom-end"],
+        "tw-translate-y-0 tw-opacity-100 ": this.visibleContainer,
+        "tw-opacity-0": !this.visibleContainer,
+        "tw-translate-y-[-100%]": !this.visibleContainer && this.position.split("-")[0] === "top",
+        "tw-translate-y-[100%]": !this.visibleContainer && this.position.split("-")[0] === "bottom",
+      }) }, h("div", { class: "tw-flex tw-items-center tw-justify-between tw-gap-5" }, h("div", { class: "tw-flex tw-items-center tw-gap-3 " }, this.status && (h("i", { class: cs("tw-text-6", this.messageIcon ? this.messageIcon : "far", {
+        "tw-text-emerald-500": this.status === "success",
+        "tw-text-red-500": this.status === "error",
+        "tw-text-amber-500": this.status === "warning",
+        "tw-text-blue-500": this.status === "info",
+      }, {
+        "fa-check-circle": !this.messageIcon && this.status === "success",
+        "fa-exclamation-circle": !this.messageIcon && this.status === "error",
+        "fa-exclamation-triangle": !this.messageIcon && this.status === "warning",
+        "fa-info-circle": !this.messageIcon && this.status === "info",
+      }) })), h("span", { class: cs({
+        "tw-text-4": !this.description,
+        "tw-text-6 tw-font-medium": this.description,
+      }) }, !this.description && this.status && h("span", null, StringHelper.capitalize(this.status), ": "), this.message)), h("div", { class: "tw-flex tw-items-baseline tw-gap-2" }, this.viewButton && (h("button", { onClick: () => this.bcmToastView.emit(), title: "View details", class: cs("tw-cursor-pointer tw-rounded tw-bg-transparent tw-p-0 tw-px-1 tw-text-4 tw-text-inherit", "hover:tw-bg-gray-100 hover:tw-text-slate-800", "active:tw-bg-gray-200", "tw-transition tw-duration-300 tw-ease-in-out", {
+        "tw-font-medium": this.description,
+      }) }, "View")), this.closeButton && (h("button", { title: "Close", onClick: () => this.hide(), class: cs("tw-rounded tw-bg-transparent tw-p-0", "tw-flex tw-h-6 tw-w-6 tw-cursor-pointer tw-items-center tw-justify-center tw-text-3 tw-text-inherit", "hover:tw-bg-gray-100 hover:tw-text-slate-800", "active:tw-bg-gray-200") }, h("i", { class: "fal fa-times" }))))), this.description && h("div", { class: "tw-text-3 " }, this.description), h("slot", null)))));
+  }
+  static get is() { return "bcm-toast"; }
+  static get properties() {
+    return {
+      "_id": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "id",
+        "reflect": true,
+        "defaultValue": "Generate.UID()"
+      },
+      "status": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"success\" | \"error\" | \"warning\" | \"info\"",
+          "resolved": "\"error\" | \"info\" | \"success\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "status",
+        "reflect": false
+      },
+      "message": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "message",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "description",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "duration": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "duration",
+        "reflect": false,
+        "defaultValue": "3000"
+      },
+      "position": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "PlacementTypes",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "references": {
+            "PlacementTypes": {
+              "location": "import",
+              "path": "../../../models/bcm-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "position",
+        "reflect": false,
+        "defaultValue": "Bcm.Placement.bottom"
+      },
+      "messageIcon": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "message-icon",
+        "reflect": false
+      },
+      "viewButton": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "view-button",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "closeButton": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "close-button",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "visible": {},
+      "visibleContainer": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "bcmToastClose",
+        "name": "bcm-toast-close",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "bcmToastOpen",
+        "name": "bcm-toast-open",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "bcmToastView",
+        "name": "bcm-toast-view",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "show": {
+        "complexType": {
+          "signature": "() => Promise<HTMLElement>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<HTMLElement>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "hide": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}
+__decorate([
+  IsLoad()
+], BcmToast.prototype, "el", void 0);

package/dist/collection/components/other_deprecated/select/select.js

@@ -1175,7 +1175,7 @@ export class BcmSelect {
       'overflow': 'hidden',
       'display': 'block'
     };
-    return (h(Host, { class: hostClasses, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }, h("div", { class: container }, label && h("bcm-label", { onClick: () => this.handleOpen(false), tooltip: this.tooltip, type: captionType, value: label, required: required }), h("div", { id: "selected-container", class: selected, onClick: (e) => this.handleOpen(e), tabIndex: -1 }, h("span", { class: selectedText, title: this.selectText && (this.selectText) }, (this.selectText && (this.selectText)), ((!this.selectText && (this.onShowVisibleTags.length > 0 || this.onShowHiddenTags.length > 0)) && (h("span", { id: "tagcontainer", class: "tag-container" }, h("span", null, this.onShowVisibleTags.map((item) => (h("bcm-old-tag", { _internal_id: this._internal_id, customStyle: customStyleTag, onClick: () => this.handleClickTag(), type: "dissmisable", value: item[this.objectMapping['text']], title: item[this.objectMapping['text']], id: item[this.objectMapping['id']], class: "tag" })))), h("span", null, this.onShowHiddenTags.length > 0 && (h("bcm-old-tag", { _internal_id: this._internal_id, title: this.hiddenTagsString, customStyle: customStyleOtherTag, onClick: (e) => this.showHiddenTags(e), color: this.otherTagStatus ? 'prime-blue' : 'grey-9', type: "dissmisable", value: "+ " + this.onShowHiddenTags.length + " item" + (this.onShowHiddenTags.length > 1 ? 's' : '') + " selected", id: "other-tag" })))))), (!(this.selectText || this.onShowVisibleTags.length > 0 || this.onShowHiddenTags.length > 0) && placeholder && (h("span", { class: "placeholder" }, " ", placeholder, " ")))), h("div", { class: "buttons" }, clearable && value && (h("button", { class: "select-clear-button", onClick: (e) => this.clickClear(e) }, h("svg", { style: { "fill": "#595959", "width": "14px", "height": "14px" }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { d: "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z" })))), h("span", { class: this.isOpen ? 'open' : 'close' }, h("svg", { style: { "fill": "#595959", "width": "14px", "height": "14px" }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512" }, h("path", { d: "M168.5 164.2l148 146.8c4.7 4.7 4.7 12.3 0 17l-19.8 19.8c-4.7 4.7-12.3 4.7-17 0L160 229.3 40.3 347.8c-4.7 4.7-12.3 4.7-17 0L3.5 328c-4.7-4.7-4.7-12.3 0-17l148-146.8c4.7-4.7 12.3-4.7 17 0z" }))))), h("div", { class: menu, style: optionViewportStyle }, h("div", { class: optionsViewport })), !noCaption && (h("div", { class: "caption-area" }, captionType == "error"
+    return (h(Host, { class: hostClasses, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }, h("div", { class: container }, label && h("bcm-label", { onClick: () => this.handleOpen(false), tooltip: this.tooltip, type: captionType, value: label, required: required }), h("div", { id: "selected-container", class: selected, onClick: (e) => this.handleOpen(e) }, h("span", { class: selectedText, title: this.selectText && (this.selectText) }, (this.selectText && (this.selectText)), ((!this.selectText && (this.onShowVisibleTags.length > 0 || this.onShowHiddenTags.length > 0)) && (h("span", { id: "tagcontainer", class: "tag-container" }, h("span", null, this.onShowVisibleTags.map((item) => (h("bcm-old-tag", { _internal_id: this._internal_id, customStyle: customStyleTag, onClick: () => this.handleClickTag(), type: "dissmisable", value: item[this.objectMapping['text']], title: item[this.objectMapping['text']], id: item[this.objectMapping['id']], class: "tag" })))), h("span", null, this.onShowHiddenTags.length > 0 && (h("bcm-old-tag", { _internal_id: this._internal_id, title: this.hiddenTagsString, customStyle: customStyleOtherTag, onClick: (e) => this.showHiddenTags(e), color: this.otherTagStatus ? 'prime-blue' : 'grey-9', type: "dissmisable", value: "+ " + this.onShowHiddenTags.length + " item" + (this.onShowHiddenTags.length > 1 ? 's' : '') + " selected", id: "other-tag" })))))), (!(this.selectText || this.onShowVisibleTags.length > 0 || this.onShowHiddenTags.length > 0) && placeholder && (h("span", { class: "placeholder" }, " ", placeholder, " ")))), h("div", { class: "buttons" }, clearable && value && (h("button", { class: "select-clear-button", onClick: (e) => this.clickClear(e) }, h("svg", { style: { "fill": "#595959", "width": "14px", "height": "14px" }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { d: "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z" })))), h("span", { class: this.isOpen ? 'open' : 'close' }, h("svg", { style: { "fill": "#595959", "width": "14px", "height": "14px" }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512" }, h("path", { d: "M168.5 164.2l148 146.8c4.7 4.7 4.7 12.3 0 17l-19.8 19.8c-4.7 4.7-12.3 4.7-17 0L160 229.3 40.3 347.8c-4.7 4.7-12.3 4.7-17 0L3.5 328c-4.7-4.7-4.7-12.3 0-17l148-146.8c4.7-4.7 12.3-4.7 17 0z" }))))), h("div", { class: menu, style: optionViewportStyle }, h("div", { class: optionsViewport })), !noCaption && (h("div", { class: "caption-area" }, captionType == "error"
       ? h("span", { class: captionClasses }, " ", captionError, " ")
       : caption && h("span", { class: captionClasses }, " ", caption, " "))))));
   }

package/dist/collection/global/components/_checkbox.css

@@ -410,6 +410,7 @@
   appearance: none;
   background-color: #fff;
   margin: 0;
+  display: none;
 }
 .bcm-checkbox__input {
   display: flex;

package/dist/collection/global/helper/index.js

@@ -0,0 +1,5 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+export * from "./toast";

package/dist/collection/global/helper/index.ts

@@ -0,0 +1 @@
+export * from "./toast";

package/dist/collection/global/helper/toast.js

@@ -0,0 +1,114 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+export class Toast {
+  /**
+   * Creates an instance of Toast.
+   * @param {ToastOptions & ToastEvents} [options={}]
+   * @example
+   * const toast = new Toast();
+   * @example
+   * const toast = new Toast({
+   * id: "my-toast",
+   * message: "Hello World",
+   * status: "success",
+   * description: "This is a description",
+   * duration: 5000,
+   * position: "top",
+   * "message-icon": "check",
+   * "view-button": true,
+   * "close-button": true,
+   * bcmToastView: (event) => {
+   * // This Event fires when the view button is clicked
+   * // do something
+   * },
+   * bcmToastClose: (event) => {
+   * // This Event fires when the toast is closed
+   * // do something
+   * },
+   * bcmToastOpen: (event) => {
+   * // This Event fires when the toast is opened
+   * // do something
+   * }
+   * });
+   * toast.show();
+   */
+  constructor(options) {
+    this.options = options;
+    this.createElement();
+    this.listeners();
+    this.setAttributes();
+    return this.element;
+  }
+  createElement() {
+    var _a;
+    let el;
+    ((_a = this.options) === null || _a === void 0 ? void 0 : _a.id) && (el = document.getElementById(this.options.id));
+    if (el) {
+      this.element = el;
+    }
+    else {
+      const tag = "bcm-toast";
+      this.element = document.createElement(tag);
+    }
+    document.body.appendChild(this.element);
+    return this.element;
+  }
+  listeners() {
+    this.options.bcmToastView && this.element.addEventListener("bcm-toast-view", this.options.bcmToastView);
+    this.options.bcmToastClose && this.element.addEventListener("bcm-toast-close", this.options.bcmToastClose);
+    this.options.bcmToastOpen && this.element.addEventListener("bcm-toast-open", this.options.bcmToastOpen);
+  }
+  setAttributes() {
+    for (let key in this.options) {
+      this.element.setAttribute(key, this.options[key]);
+    }
+  }
+  /**
+   * Shows the toast
+   * @returns {HTMLElement} The element that was shown
+   * @example
+   * const toast = new Toast();
+   * toast.show();
+   * @example
+   * const toast = new Toast();
+   * toast.show().then(() => {
+   *   // do something
+   * });
+   * @example
+   * const toast = new Toast();
+   * toast.show().then(() => {
+   *  // do something
+   * }).catch(() => {
+   * // do something else
+   * });
+   */
+  show() {
+    this.element.show();
+    return this.element;
+  }
+  /**
+   * Hides the toast
+   * @returns {HTMLElement} The element that was hidden
+   * @example
+   * const toast = new Toast();
+   * toast.hide();
+   * @example
+   * const toast = new Toast();
+   * toast.hide().then(() => {
+   *    // do something
+   * });
+   * @example
+   * const toast = new Toast();
+   * toast.hide().then(() => {
+   *   // do something
+   * }).catch(() => {
+   *  // do something else
+   * });
+   */
+  hide() {
+    this.element.hide();
+    return this.element;
+  }
+}

package/dist/collection/global/helper/toast.ts

@@ -0,0 +1,136 @@
+interface ToastOptions {
+    "id"?: string;
+    "message"?: string;
+    "status"?: "success" | "error" | "warning" | "info";
+    "description"?: string;
+    "duration"?: number;
+    "position"?: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end";
+    "message-icon"?: string;
+    "view-button"?: boolean;
+    "close-button"?: boolean;
+}
+
+interface ToastEvents {
+    bcmToastView?: (event: any) => void;
+    bcmToastClose?: (event: any) => void;
+    bcmToastOpen?: (event: any) => void;
+}
+
+export class Toast {
+    element: any;
+    options: ToastOptions & ToastEvents;
+
+    /**
+     * Creates an instance of Toast.
+     * @param {ToastOptions & ToastEvents} [options={}]
+     * @example
+     * const toast = new Toast();
+     * @example
+     * const toast = new Toast({
+     * id: "my-toast",
+     * message: "Hello World",
+     * status: "success",
+     * description: "This is a description",
+     * duration: 5000,
+     * position: "top",
+     * "message-icon": "check",
+     * "view-button": true,
+     * "close-button": true,
+     * bcmToastView: (event) => {
+     * // This Event fires when the view button is clicked
+     * // do something
+     * },
+     * bcmToastClose: (event) => {
+     * // This Event fires when the toast is closed
+     * // do something
+     * },
+     * bcmToastOpen: (event) => {
+     * // This Event fires when the toast is opened
+     * // do something
+     * }
+     * });
+     * toast.show();
+     */
+    constructor(options: ToastOptions & ToastEvents) {
+        this.options = options;
+
+        this.createElement();
+        this.listeners();
+        this.setAttributes();
+        return this.element;
+    }
+
+    private createElement() {
+        let el: any;
+        this.options?.id && (el = document.getElementById(this.options.id));
+        if (el) {
+            this.element = el;
+        } else {
+            const tag = "bcm-toast";
+            this.element = document.createElement(tag);
+        }
+
+        document.body.appendChild(this.element);
+        return this.element;
+    }
+
+    private listeners() {
+        this.options.bcmToastView && this.element.addEventListener("bcm-toast-view", this.options.bcmToastView);
+        this.options.bcmToastClose && this.element.addEventListener("bcm-toast-close", this.options.bcmToastClose);
+        this.options.bcmToastOpen && this.element.addEventListener("bcm-toast-open", this.options.bcmToastOpen);
+    }
+
+    private setAttributes() {
+        for (let key in this.options) {
+            this.element.setAttribute(key, this.options[key]);
+        }
+    }
+
+    /**
+     * Shows the toast
+     * @returns {HTMLElement} The element that was shown
+     * @example
+     * const toast = new Toast();
+     * toast.show();
+     * @example
+     * const toast = new Toast();
+     * toast.show().then(() => {
+     *   // do something
+     * });
+     * @example
+     * const toast = new Toast();
+     * toast.show().then(() => {
+     *  // do something
+     * }).catch(() => {
+     * // do something else
+     * });
+     */
+    show() {
+        this.element.show();
+        return this.element;
+    }
+
+    /**
+     * Hides the toast
+     * @returns {HTMLElement} The element that was hidden
+     * @example
+     * const toast = new Toast();
+     * toast.hide();
+     * @example
+     * const toast = new Toast();
+     * toast.hide().then(() => {
+     *    // do something
+     * });
+     * @example
+     * const toast = new Toast();
+     * toast.hide().then(() => {
+     *   // do something
+     * }).catch(() => {
+     *  // do something else
+     * });
+     */
+    hide() {
+        this.element.hide();
+        return this.element;
+    }
+}