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

package/dist/collection/components/molecules/drawer/drawer.js

@@ -12,17 +12,18 @@ 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 { IsLoad } from '@bcm/decorator';
-import { Generate } from '@bcm/helpers';
-import { Bcm } from '@bcm/model';
-import { h, Host } from '@stencil/core';
-import cs from 'classnames';
+import { IsLoad } from "@bcm/decorator";
+import { Generate } from "@bcm/helpers";
+import { Bcm } from "@bcm/model";
+import { Host, h } from "@stencil/core";
+import cs from "classnames";
 export class BcmDrawer {
   constructor() {
     this._id = Generate.UID();
     this._title = undefined;
     this.position = Bcm.Position.right;
     this.fullWidth = false;
+    this.zIndex = "10350";
     this._open = false;
     this._close = false;
   }
@@ -43,10 +44,10 @@ export class BcmDrawer {
   }
   _openHandler() {
     if (this._open) {
-      document.body.classList.add('bcm-disable-scroll');
+      document.body.classList.add("bcm-disable-scroll");
     }
     else {
-      document.body.classList.remove('bcm-disable-scroll');
+      document.body.classList.remove("bcm-disable-scroll");
     }
   }
   keyboardNavigation(e) {
@@ -58,40 +59,29 @@ export class BcmDrawer {
   }
   disconnectedCallback() {
     this._open = false;
-    document.body.classList.remove('bcm-disable-scroll');
+    document.body.classList.remove("bcm-disable-scroll");
     this.el.remove();
   }
   render() {
-    const hostClasses = cs('bcm-drawer', {
-      'bcm-drawer--open': this._open,
-    });
-    const contentClasses = cs('bcm-drawer__content', `bcm-drawer__content--position-${this.position}`, {
-      'bcm-drawer__content--open': this._open,
-      'bcm-drawer__content--close': this._close,
-      'full-width': this.fullWidth,
-    });
-    const overlay = cs('bcm-drawer__overlay', {
-      'bcm-drawer__overlay--open': this._open,
-      'bcm-drawer__overlay--close': this._close,
-    });
-    return (h(Host, { class: hostClasses }, h("div", { class: overlay, onClick: () => this.hide() }), h("div", { class: contentClasses }, h("div", { class: "bcm-drawer__content-header" }, h("bcm-text", { class: "bcm-drawer__content-header-title", "font-size": "6", weight: "600", color: "slate-800" }, this._title, " ", h("slot", { name: "header" })), h("div", { class: "bcm-drawer__content-header-close size-4", onClick: () => this.hide() }, h("bcm-icon", { icon: "fal fa-times" }))), h("div", { style: { 'overflow': 'auto', 'flex': '1' } }, h("div", { class: "bcm-drawer__content-body" }, h("slot", null))), h("div", { class: "bcm-drawer__content-footer" }, h("slot", { name: "footer" })))));
+    const { _title, position, fullWidth, zIndex, _open } = this;
+    return (h(Host, { class: cs("bcm-ui-element bcm-navigation bcm-drawer", "tw-absolute -tw-left-full -tw-top-full tw-h-screen tw-w-screen tw-select-none tw-overflow-hidden", {
+        "tw-invisible": !_open,
+        "tw-visible": _open,
+      }) }, h("bcm-overlay", { "z-index": +zIndex - 1, opacity: _open ? "0.5" : "0", onClick: () => this.hide() }), h("section", { class: cs("tw-fixed tw-z-drawer tw-flex tw-h-full tw-select-text tw-flex-col tw-items-stretch tw-justify-start tw-overflow-hidden tw-bg-slate-100 tw-transition tw-delay-100 tw-duration-200 tw-ease-in-out ", {
+        "tw-min-w-[500px]": !fullWidth,
+        "tw-w-full": fullWidth,
+        "tw-right-0 tw-top-0 tw-translate-x-full": position == Bcm.Position.right,
+        "tw-left-0 tw-top-0 -tw-translate-x-full": position == Bcm.Position.left,
+        "tw-bottom-0 tw-left-0 tw-max-h-[500px] tw-w-full tw-translate-y-full": position == Bcm.Position.bottom,
+        "tw-left-0 tw-top-0 tw-max-h-[500px] tw-w-full -tw-translate-y-full": position == Bcm.Position.top,
+      }), style: Object.assign(Object.assign({}, (_open && { transform: "translateX(0)" })), { zIndex }) }, h("header", { class: "tw-mb-2 tw-flex tw-flex-row tw-items-center tw-justify-between tw-px-6 tw-pb-0 tw-pt-6" }, h("bcm-text", { "font-size": "6", weight: "600", color: "slate-800" }, _title, " ", h("slot", { name: "header" })), h("div", { class: "-tw-mr-1 -tw-mt-1 tw-cursor-pointer tw-px-1 tw-py-2 tw-text-size-7 tw-text-slate-500 hover:tw-text-slate-800", onClick: () => this.hide() }, h("i", { class: "fal fa-times" }))), h("div", { class: "tw-flex-1 tw-overflow-auto" }, h("div", { class: "tw-px-6 tw-pb-6 tw-pt-0" }, h("slot", null))), h("footer", { class: " tw-px-6 tw-py-3" }, h("slot", { name: "footer" })))));
   }
   static get is() { return "bcm-drawer"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["drawer.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["drawer.css"]
-    };
-  }
   static get properties() {
     return {
       "_id": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -164,6 +154,24 @@ export class BcmDrawer {
         "attribute": "full-width",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "zIndex": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "z-index",
+        "reflect": false,
+        "defaultValue": "\"10350\""
       }
     };
   }

package/dist/collection/components/molecules/dropdown/dropdown.js

@@ -12,19 +12,19 @@ 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 cs from 'classnames';
-import { IsLoad } from '../../../decorators/is-load-decorator';
-import { JsonParse } from '../../../decorators/json-parse-decarator';
-import { Generate } from '../../../helper/generate';
-import Bcm from '../../../models/bcm';
+import { h, Host } from "@stencil/core";
+import cs from "classnames";
+import { IsLoad } from "../../../decorators/is-load-decorator";
+import { JsonParse } from "../../../decorators/json-parse-decarator";
+import { Generate } from "../../../helper/generate";
+import Bcm from "../../../models/bcm";
 export class BcmDropdown {
   constructor() {
     this.isOpen = undefined;
     this._id = Generate.UID();
     this.menuId = Generate.UID();
     this.hidden = false;
-    this.type = 'dropdown';
+    this.type = "dropdown";
     this.size = Bcm.Size.medium;
     this.disabled = false;
     this.kind = Bcm.Kind.solid;
@@ -33,7 +33,7 @@ export class BcmDropdown {
     this.target = undefined;
     this.value = undefined;
     this.noStyle = false;
-    this.dropdownIcon = 'fas fa-angle-down';
+    this.dropdownIcon = "fas fa-angle-down";
     this.linkedComponent = undefined;
     this.loading = false;
     this.variant = undefined;
@@ -42,8 +42,8 @@ export class BcmDropdown {
     this.iconPosition = Bcm.IconPosition.prefix;
     this.placement = undefined;
     this.height = undefined;
-    this.maxHeight = '500px';
-    this.minHeight = '50px';
+    this.maxHeight = "500px";
+    this.minHeight = "50px";
     this.stopDeepClean = false;
     this.selectable = true;
     this.color = undefined;
@@ -57,7 +57,7 @@ export class BcmDropdown {
   async setActive(id = null) {
     var _a, _b;
     (_b = (_a = document
-      .getElementById(`${this.menuId}`)) === null || _a === void 0 ? void 0 : _a.querySelectorAll('bcm-menu')) === null || _b === void 0 ? void 0 : _b.forEach(item => {
+      .getElementById(`${this.menuId}`)) === null || _a === void 0 ? void 0 : _a.querySelectorAll("bcm-menu")) === null || _b === void 0 ? void 0 : _b.forEach(item => {
       item.setActive(id);
     });
   }
@@ -66,36 +66,25 @@ export class BcmDropdown {
   }
   componentDidLoad() {
     var _a;
-    const bcmContent = this.el.querySelector('bcm-content');
+    const bcmContent = this.el.querySelector("bcm-content");
     if (bcmContent) {
       (_a = document.getElementById(this.menuId)) === null || _a === void 0 ? void 0 : _a.appendChild(bcmContent);
     }
   }
   render() {
     const { size, kind, disabled, icon, color, href, target, loading, type, variant, fullWidth, isOpen } = this;
-    const hostClasses = cs('bcm-dropdown', 'bcm-dropdown__type-' + type, {
-      'full-width': fullWidth,
-      'no-style': this.noStyle,
-      'hidden': this.hidden || this.linkedComponent,
-    });
-    const attributes = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (disabled && { disabled })), (loading && { loading })), (kind && { kind })), (size && { size })), (variant && { variant })), (color && { color })), (this.menuId && { 'menu-id': this.menuId }));
-    const iconClasses = cs('bcm-dropdown__icon', {
-      'bcm-dropdown__icon--open': isOpen,
-    });
-    const dropdownIcon = (h("span", { class: iconClasses }, h("bcm-icon", { icon: this.dropdownIcon })));
-    return (h(Host, { class: hostClasses }, h("span", { hidden: true }, h("slot", null)), this.noStyle && h("slot", null), !this.noStyle && (h("bcm-button", Object.assign({ class: "main-button", id: `${this._id}-button` }, attributes, (icon && { icon }), (href && type === 'split' && { href }), (target && type === 'split' && { target }), (fullWidth && { fullWidth })), h("slot", null), type === 'dropdown' && dropdownIcon)), !this.noStyle && type === 'split' && (h("bcm-button", Object.assign({ id: `${this._id}-button-split`, class: "split-button" }, attributes), dropdownIcon)), h("bcm-linked", { id: `${this.menuId}`, "target-id": `${this._id}-button${type === 'split' ? '-split' : ''}`, placement: this.placement || (type === 'dropdown' ? 'bottom-start' : 'bottom-end'), "max-height": this.maxHeight, "min-height": this.minHeight, height: this.height, "on-bcm-open": e => { var _a; return ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.id) == this.menuId && (this.isOpen = e.detail); } }, this.data && this.data.length > 0 && h("bcm-menu", { data: this.data, selectable: this.selectable, "on-bcm-click": e => this.bcmClick.emit(e.detail) }))));
+    const attributes = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (disabled && { disabled })), (loading && { loading })), (kind && { kind })), (size && { size })), (variant && { variant })), (color && { color })), (this.menuId && { "menu-id": this.menuId }));
+    const DropdownIcon = () => (h("span", { class: cs("tw-flex tw-items-center tw-justify-center tw-transition-transform tw-duration-200", {
+        "tw-rotate-180": isOpen,
+      }) }, h("bcm-icon", { icon: this.dropdownIcon })));
+    return (h(Host, { class: cs("tw-preflight", "bcm-ui-element bcm-ui-action bcm-dropdown", "type-" + type, {
+        "tw-w-full": fullWidth,
+        "tw-pointer-events-none tw-cursor-not-allowed": disabled,
+        "no-style": this.noStyle,
+        "tw-hidden": this.hidden || this.linkedComponent,
+      }) }, this.noStyle && h("slot", null), !this.noStyle && (h("bcm-button", Object.assign({ class: "main-button", id: `${this._id}-button` }, attributes, (icon && { icon }), (href && type === "split" && { href }), (target && type === "split" && { target }), (fullWidth && { fullWidth })), h("slot", null), type === "dropdown" && h(DropdownIcon, null))), !this.noStyle && type === "split" && (h("bcm-button", Object.assign({ id: `${this._id}-button-split`, class: "split-button" }, attributes), h(DropdownIcon, null))), h("bcm-linked", { id: `${this.menuId}`, "target-id": `${this._id}-button${type === "split" ? "-split" : ""}`, placement: this.placement || (type === "dropdown" ? "bottom-start" : "bottom-end"), "max-height": this.maxHeight, "min-height": this.minHeight, height: this.height, "on-bcm-open": e => { var _a; return ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.id) == this.menuId && (this.isOpen = e.detail); } }, this.data && this.data.length > 0 && h("bcm-menu", { data: this.data, selectable: this.selectable, "on-bcm-click": e => this.bcmClick.emit(e.detail) }))));
   }
   static get is() { return "bcm-dropdown"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["dropdown.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["dropdown.css"]
-    };
-  }
   static get properties() {
     return {
       "isOpen": {
@@ -173,7 +162,7 @@ export class BcmDropdown {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "'dropdown' | 'split'",
+          "original": "\"dropdown\" | \"split\"",
           "resolved": "\"dropdown\" | \"split\"",
           "references": {}
         },
@@ -185,7 +174,7 @@ export class BcmDropdown {
         },
         "attribute": "type",
         "reflect": false,
-        "defaultValue": "'dropdown'"
+        "defaultValue": "\"dropdown\""
       },
       "size": {
         "type": "string",
@@ -232,14 +221,9 @@ export class BcmDropdown {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "KindTypes",
-          "resolved": "\"ghost\" | \"link\" | \"solid\"",
-          "references": {
-            "KindTypes": {
-              "location": "import",
-              "path": "../../../models/bcm-types"
-            }
-          }
+          "original": "\"solid\" | \"ghost\"",
+          "resolved": "\"ghost\" | \"solid\"",
+          "references": {}
         },
         "required": false,
         "optional": false,
@@ -289,9 +273,14 @@ export class BcmDropdown {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "TargetTypes",
+          "resolved": "\"blank\" | \"parent\" | \"self\" | \"top\"",
+          "references": {
+            "TargetTypes": {
+              "location": "import",
+              "path": "../../../models/bcm-types"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -353,7 +342,7 @@ export class BcmDropdown {
         },
         "attribute": "dropdown-icon",
         "reflect": false,
-        "defaultValue": "'fas fa-angle-down'"
+        "defaultValue": "\"fas fa-angle-down\""
       },
       "linkedComponent": {
         "type": "string",
@@ -395,7 +384,7 @@ export class BcmDropdown {
         "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",
@@ -526,7 +515,7 @@ export class BcmDropdown {
         },
         "attribute": "max-height",
         "reflect": false,
-        "defaultValue": "'500px'"
+        "defaultValue": "\"500px\""
       },
       "minHeight": {
         "type": "string",
@@ -544,7 +533,7 @@ export class BcmDropdown {
         },
         "attribute": "min-height",
         "reflect": false,
-        "defaultValue": "'50px'"
+        "defaultValue": "\"50px\""
       },
       "stopDeepClean": {
         "type": "boolean",
@@ -681,5 +670,5 @@ __decorate([
   IsLoad()
 ], BcmDropdown.prototype, "el", void 0);
 __decorate([
-  JsonParse('data', true)
+  JsonParse("data", true)
 ], BcmDropdown.prototype, "dataChanged", null);

package/dist/collection/components/molecules/empty/empty.js

@@ -12,19 +12,24 @@ 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 { IsLoad } from '../../../decorators/is-load-decorator';
+import { IsLoad } from "@bcm/decorator";
+import { Host, h } from "@stencil/core";
+import { Generate } from "../../../helper/generate";
 export class BcmEmpty {
   constructor() {
+    this._id = Generate.UID();
+    this.headerText = undefined;
     this.icon = undefined;
+    this.description = undefined;
   }
   render() {
-    return (h(Host, { class: "tw-h-full tw-flex tw-flex-col tw-items-center tw-justify-center tw-w-full tw-flex-1 tw-bg-slate-50 tw-text-center tw-rounded tw-gap-3" }, this.icon && h("i", { class: `tw-text-8 tw-text-amber-400 ${this.icon}` }), h("bcm-typography", { class: "tw-text-slate-400 tw-text-2" }, h("slot", null))));
+    const { icon, headerText, description } = this;
+    return (h(Host, { class: "bcm-ui-element bcm-ui-feedback bcm-empty tw-flex tw-h-full tw-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-3 tw-text-center" }, icon && h("i", { class: icon }), !icon && (h("svg", { width: "105", height: "99", viewBox: "0 0 105 99", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M44.8676 98.6269C69.2871 98.6269 89.083 94.928 89.083 90.3652C89.083 85.8024 69.2871 82.1035 44.8676 82.1035C20.4481 82.1035 0.652176 85.8024 0.652176 90.3652C0.652176 94.928 20.4481 98.6269 44.8676 98.6269Z", fill: "#FEF3C7" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M80.2396 66.0939L64.6363 46.8906C63.8876 45.9867 62.7933 45.4396 61.6409 45.4396H28.093C26.9413 45.4396 25.847 45.9867 25.0983 46.8906L9.49566 66.0939V76.1263H80.2402V66.0939H80.2396Z", fill: "#FDE68A" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M22.7152 20.6543H67.0193C67.7112 20.6543 68.3748 20.9292 68.864 21.4184C69.3532 21.9076 69.628 22.5712 69.628 23.263V84.1396C69.628 84.8314 69.3532 85.495 68.864 85.9842C68.3748 86.4734 67.7112 86.7483 67.0193 86.7483H22.7152C22.0233 86.7483 21.3598 86.4734 20.8706 85.9842C20.3814 85.495 20.1065 84.8314 20.1065 84.1396V23.263C20.1065 22.5712 20.3814 21.9076 20.8706 21.4184C21.3598 20.9292 22.0233 20.6543 22.7152 20.6543V20.6543Z", fill: "#FEF3C7" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M28.4857 27.1454H61.2489C61.5948 27.1454 61.9266 27.2829 62.1712 27.5275C62.4158 27.7721 62.5533 28.1038 62.5533 28.4498V44.7261C62.5533 45.072 62.4158 45.4038 62.1712 45.6484C61.9266 45.893 61.5948 46.0304 61.2489 46.0304H28.4857C28.1397 46.0304 27.808 45.893 27.5633 45.6484C27.3187 45.4038 27.1813 45.072 27.1813 44.7261V28.4498C27.1813 28.1038 27.3187 27.7721 27.5633 27.5275C27.808 27.2829 28.1397 27.1454 28.4857 27.1454V27.1454ZM28.6565 53.1111H61.078C61.4693 53.1111 61.8445 53.2665 62.1212 53.5432C62.3978 53.8198 62.5533 54.1951 62.5533 54.5863C62.5533 54.9776 62.3978 55.3528 62.1212 55.6294C61.8445 55.9061 61.4693 56.0615 61.078 56.0615H28.6565C28.2653 56.0615 27.89 55.9061 27.6134 55.6294C27.3367 55.3528 27.1813 54.9776 27.1813 54.5863C27.1813 54.1951 27.3367 53.8198 27.6134 53.5432C27.89 53.2665 28.2653 53.1111 28.6565 53.1111V53.1111ZM28.6565 60.7826H61.078C61.4694 60.7826 61.8447 60.9381 62.1214 61.2148C62.3981 61.4915 62.5536 61.8668 62.5536 62.2582C62.5536 62.6495 62.3981 63.0248 62.1214 63.3015C61.8447 63.5782 61.4694 63.7337 61.078 63.7337H28.6565C28.2652 63.7337 27.8899 63.5782 27.6132 63.3015C27.3364 63.0248 27.181 62.6495 27.181 62.2582C27.181 61.8668 27.3364 61.4915 27.6132 61.2148C27.8899 60.9381 28.2652 60.7826 28.6565 60.7826V60.7826ZM80.0954 89.1535C79.59 91.1563 77.8148 92.6491 75.703 92.6491H14.0315C11.9198 92.6491 10.1446 91.1556 9.63979 89.1535C9.54351 88.7718 9.49488 88.3797 9.495 87.9861V66.0946H26.6589C28.5548 66.0946 30.0828 67.6911 30.0828 69.6293V69.6554C30.0828 71.593 31.6285 73.1576 33.5244 73.1576H56.2102C58.1061 73.1576 59.6517 71.5787 59.6517 69.6404V69.6326C59.6517 67.6943 61.1798 66.0939 63.0757 66.0939H80.2396V87.9867C80.2396 88.3891 80.1894 88.7798 80.0954 89.1535V89.1535Z", fill: "#FBBF24" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M82.2528 21.7122L77.7985 23.4404C77.6841 23.4849 77.5594 23.4962 77.4388 23.473C77.3183 23.4498 77.2067 23.393 77.117 23.3092C77.0272 23.2254 76.963 23.118 76.9316 22.9993C76.9002 22.8806 76.903 22.7555 76.9396 22.6383L78.2028 18.5902C76.5143 16.6702 75.523 14.3289 75.523 11.8024C75.523 5.28391 82.1217 0 90.2622 0C98.4006 0 105 5.28391 105 11.8024C105 18.3209 98.4013 23.6048 90.2615 23.6048C87.3085 23.6048 84.5589 22.9096 82.2528 21.7122Z", fill: "#FDE68A" }), h("path", { d: "M96.0678 13.9337C97.094 13.9337 97.9259 13.1117 97.9259 12.0978C97.9259 11.0839 97.094 10.262 96.0678 10.262C95.0417 10.262 94.2098 11.0839 94.2098 12.0978C94.2098 13.1117 95.0417 13.9337 96.0678 13.9337Z", fill: "white" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M86.3139 13.7041H82.5978L84.4878 10.4915L86.3139 13.7041ZM88.6363 10.4915H91.8874V13.7041H88.6363V10.4915Z", fill: "white" }))), h("section", null, headerText && h("div", { class: "tw-text-size-5 tw-font-medium tw-text-slate-700" }, " ", headerText, " "), description && h("div", { class: "tw-text-size-4 tw-font-normal tw-text-slate-600" }, " ", description, " ")), h("section", { class: "tw-px-3 tw-py-1" }, h("slot", { name: "actions" }))));
   }
   static get is() { return "bcm-empty"; }
   static get properties() {
     return {
-      "icon": {
+      "_id": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -38,8 +43,60 @@ export class BcmEmpty {
           "tags": [],
           "text": ""
         },
+        "attribute": "id",
+        "reflect": true,
+        "defaultValue": "Generate.UID()"
+      },
+      "headerText": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "header-text",
+        "reflect": false
+      },
+      "icon": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
         "attribute": "icon",
         "reflect": false
+      },
+      "description": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "description",
+        "reflect": false
       }
     };
   }

package/dist/collection/components/molecules/error-layout/error-layout.js

@@ -12,37 +12,15 @@ 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 cs from 'classnames';
-import { IsLoad } from '../../../decorators/is-load-decorator';
+import { IsLoad } from "@bcm/decorator";
+import { Bcm } from "@bcm/model";
+import { Host, h } from "@stencil/core";
+import cs from "classnames";
 export class BcmErrorLayout {
   constructor() {
-    this.size = 'medium';
     this.hidden = false;
     this.items = [];
-    this.itemsProp = [];
-  }
-  connectedCallback() { }
-  disconnectedCallback() { }
-  componentWillLoad() {
-    this.parseItems(this.items);
-  }
-  componentDidLoad() { }
-  componentWillRender() { }
-  componentDidRender() { }
-  componentWillUpdate() { }
-  componentDidUpdate() { }
-  /**
-   * @desc
-   * @param newValue
-   * @returns {void}
-   */
-  parseItems(newValue) {
-    if (newValue) {
-      typeof newValue == 'string'
-        ? this.itemsProp = JSON.parse(newValue)
-        : this.itemsProp = newValue;
-    }
+    this.size = Bcm.Size.medium;
   }
   async set(val) {
     this.items = val;
@@ -51,51 +29,22 @@ export class BcmErrorLayout {
     this.items = [];
   }
   render() {
-    const { itemsProp } = this;
-    const classes = cs('error-layout', this.size);
-    const hostClasses = cs(this.hidden ? 'hidden' : null);
-    return (h(Host, { class: hostClasses }, itemsProp.length > 0 && (h("div", { class: classes }, this.itemsProp.map((item) => h("li", null, h("span", null, item)))))));
+    const { items, hidden } = this;
+    const data = typeof items == "string" ? JSON.parse(items) : items;
+    return (h(Host, { class: cs("bcm-ui-element bcm-ui-feedback bcm-error-layout", "tw-flex tw-flex-col tw-items-start tw-justify-start", "tw-rounded-lg tw-border-2 tw-border-solid tw-border-red-200 tw-bg-red-100 tw-p-3 tw-font-medium tw-text-red-400", {
+        "tw-text-size-2": this.size == Bcm.Size.small,
+        "tw-text-size-3": this.size == Bcm.Size.medium,
+        "tw-text-size-4": this.size == Bcm.Size.large,
+      }, {
+        "tw-hidden": hidden,
+      }) }, (data === null || data === void 0 ? void 0 : data.length) > 0 && (data === null || data === void 0 ? void 0 : data.map(item => h("li", null, item, " ")))));
   }
   static get is() { return "bcm-error-layout"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["error-layout.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["error-layout.css"]
-    };
-  }
   static get properties() {
     return {
-      "size": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "SizeProp",
-          "resolved": "\"large\" | \"medium\" | \"small\"",
-          "references": {
-            "SizeProp": {
-              "location": "import",
-              "path": "./types"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'medium'"
-      },
       "hidden": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -115,8 +64,8 @@ export class BcmErrorLayout {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "Array<object> | string",
-          "resolved": "object[] | string",
+          "original": "Array<string> | string",
+          "resolved": "string | string[]",
           "references": {
             "Array": {
               "location": "global"
@@ -132,14 +81,32 @@ export class BcmErrorLayout {
         "attribute": "items",
         "reflect": false,
         "defaultValue": "[]"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SizeTypes",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {
+            "SizeTypes": {
+              "location": "import",
+              "path": "@bcm/model"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "Bcm.Size.medium"
       }
     };
   }
-  static get states() {
-    return {
-      "itemsProp": {}
-    };
-  }
   static get methods() {
     return {
       "set": {
@@ -180,12 +147,6 @@ export class BcmErrorLayout {
     };
   }
   static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "items",
-        "methodName": "parseItems"
-      }];
-  }
 }
 __decorate([
   IsLoad()