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

package/dist/cjs/bcm-result.cjs.entry.js

@@ -6,64 +6,33 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c591ecec.js');
-const index$1 = require('./index-95ae50d0.js');
+const index = require('./index-bb6ac306.js');
+const bcm = require('./bcm-51d38d17.js');
+const result_style = require('./result.style-f58d0ac4.js');
+require('./index-d3b89435.js');
 require('./_commonjsHelpers-ed84c3ca.js');
 
-const statuses = {
-  success: {
-    icon: 'far fa-check-circle',
-    color: 'green-6'
-  },
-  info: {
-    icon: 'far fa-info-circle',
-    color: 'blue-6'
-  },
-  warning: {
-    icon: 'far fa-warning',
-    color: 'warmyellow-6'
-  },
-  error: {
-    icon: 'far fa-times-circle',
-    color: 'grey-10'
-  }
-};
-
-const resultCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:host{display:block}:host(.hidden){display:none}.result{display:flex;flex-direction:column;align-items:center;padding:32px 24px}.result .content{margin-top:24px}.result .content .heading{margin-bottom:8px}.result .content .heading,.result .content .desc{display:block;text-align:center}.result .content .extra{background-color:#F5F5F5;padding:24px 24px;margin:32px 0}@media screen and (min-width: 576px){.result .content .extra{padding:24px 40px}}.result .content .buttons{display:flex;justify-content:center;grid-gap:8px;flex-wrap:wrap}";
-
 const BcmResult = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.status = null;
+    this.icon = undefined;
     this.heading = undefined;
     this.description = undefined;
-    this.hidden = false;
-    this.footerArea = undefined;
-    this.footerHtml = undefined;
-  }
-  getIcon() {
-    if (this.status != null) {
-      const icon = statuses[this.status].icon;
-      return (index.h("div", { class: "icon" }, index.h("bcm-icon", { icon: icon })));
-    }
-  }
-  componentDidRender() {
-    const slot = this.el.shadowRoot.querySelector('slot').assignedElements();
-    slot.map(el => {
-      if (String(el.tagName).toLowerCase() === 'bcm-result-footer') {
-        el.slot = 'footer';
-        this.footerArea = true;
-        this.footerHtml = el.innerHTML;
-        el.innerHTML = "";
-      }
-    });
+    this.status = bcm.Bcm.Status.default;
   }
   render() {
-    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null);
-    return (index.h(index.Host, { class: hostClasses }, index.h("div", { class: "result" }, this.getIcon(), index.h("div", { class: "content" }, index.h("span", { class: "heading size-5 weight-semibold" }, this.heading), index.h("span", { class: "desc size-2" }, this.description), index.h("div", { class: "extra" }, index.h("slot", null)), (this.footerArea && (index.h("div", { class: "buttons", innerHTML: this.footerHtml })))))));
+    const { icon, heading, description, status } = this;
+    const { host, iconStyle, headingStyle, descriptionStyle } = result_style.resultStyle({ status });
+    const statusIcon = {
+      default: icon || "",
+      info: "fa-regular fa-circle-info",
+      success: "fa-regular fa-circle-check",
+      warning: "fa-regular fa-triangle-exclamation",
+      error: "fa-regular fa-xmark-circle",
+    }[status];
+    return (index.h(index.Host, { class: host() }, index.h("div", { class: iconStyle() }, statusIcon && index.h("i", { class: statusIcon })), index.h("div", { class: headingStyle() }, heading), index.h("div", { class: descriptionStyle() }, description), index.h("slot", null), index.h("slot", { name: "footer" })));
   }
   get el() { return index.getElement(this); }
 };
-BcmResult.style = resultCss;
 
 exports.bcm_result = BcmResult;

package/dist/cjs/bcm-segment-picker-item.cjs.entry.js

@@ -0,0 +1,33 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-bb6ac306.js');
+const bcm = require('./bcm-51d38d17.js');
+const segmentPicker_style = require('./segment-picker.style-ce057603.js');
+require('./index-d3b89435.js');
+require('./_commonjsHelpers-ed84c3ca.js');
+
+const BcmSegmentPickerItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.click = index.createEvent(this, "bcm-click", 7);
+    this.size = bcm.Bcm.Size.medium;
+    this.text = "";
+    this.color = "--bcm-ui-color-background-primary-info-default";
+    this.value = "";
+    this.disabled = false;
+    this.active = false;
+  }
+  render() {
+    const { text, disabled, active, size } = this;
+    const { item } = segmentPicker_style.segmentPickerStyle({ size, disabled, active });
+    return (index.h(index.Host, { class: item(), onClick: () => this.click.emit() }, index.h("slot", null, text)));
+  }
+};
+
+exports.bcm_segment_picker_item = BcmSegmentPickerItem;

package/dist/cjs/bcm-segment-picker.cjs.entry.js

@@ -0,0 +1,67 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-bb6ac306.js');
+const bcm = require('./bcm-51d38d17.js');
+const segmentPicker_style = require('./segment-picker.style-ce057603.js');
+require('./index-d3b89435.js');
+require('./_commonjsHelpers-ed84c3ca.js');
+
+const BcmSegmentPicker = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.change = index.createEvent(this, "bcm-change", 7);
+    this.changeSegment = index.createEvent(this, "bcm-segment-picker:change", 7);
+    this.handleChange = (event) => {
+      event.preventDefault();
+      const target = event.target;
+      this.change.emit(target.value);
+      this.changeSegment.emit(target.value);
+      this.setSegmentItemActive(target.value);
+    };
+    this.setSegmentItemActive = (value) => {
+      const segmentItems = this.el.querySelectorAll("bcm-segment-picker-item");
+      segmentItems.forEach((item) => {
+        if (item.value == value) {
+          item.active = true;
+          this.value = value;
+          const color = item.getAttribute("color");
+          const { offsetWidth, offsetLeft } = item;
+          const { style } = this.el;
+          style.setProperty("--highlight-width", `${offsetWidth}px`);
+          style.setProperty("--highlight-x-pos", `${offsetLeft}px`);
+          style.setProperty("--highlight-color", `var(${color})`);
+        }
+        else {
+          item.active = false;
+        }
+      });
+    };
+    this.size = bcm.Bcm.Size.medium;
+    this.name = "";
+    this.value = "";
+    this.defaultValue = "";
+    this.disabled = false;
+    this.fullWidth = false;
+    this.block = false;
+    this.data = [];
+  }
+  componentDidLoad() {
+    const { defaultValue } = this;
+    if (defaultValue) {
+      this.setSegmentItemActive(defaultValue);
+    }
+  }
+  render() {
+    const { base } = segmentPicker_style.segmentPickerStyle({ size: this.size });
+    return (index.h(index.Host, { class: base(), "onbcm-click": this.handleChange }, index.h("slot", null)));
+  }
+  get el() { return index.getElement(this); }
+};
+
+exports.bcm_segment_picker = BcmSegmentPicker;

package/dist/cjs/bcm-select-group.cjs.entry.js

@@ -6,7 +6,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c591ecec.js');
+const index = require('./index-bb6ac306.js');
 const index$1 = require('./index-95ae50d0.js');
 require('./_commonjsHelpers-ed84c3ca.js');
 

package/dist/cjs/bcm-select-option.cjs.entry.js

@@ -6,7 +6,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c591ecec.js');
+const index = require('./index-bb6ac306.js');
 const index$1 = require('./index-95ae50d0.js');
 require('./_commonjsHelpers-ed84c3ca.js');
 

package/dist/cjs/bcm-skeleton.cjs.entry.js

@@ -6,21 +6,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-c591ecec.js');
+const index$1 = require('./index-bb6ac306.js');
 require('./color-helper-dc98a2ca.js');
 require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-7510539d.js');
-require('./number-helper-9d2d1d5a.js');
-require('./string-helper-1ee6dc21.js');
-require('./validators-9369c82a.js');
+const generate = require('./generate-eda14f12.js');
+require('./number-helper-d14c9546.js');
+require('./string-helper-cc89c9d6.js');
+require('./popover.style-e390b5a1.js');
 require('./element-dragger-a8562f82.js');
-require('./bcm-1d1fcf21.js');
-const index = require('./index-5279dea2.js');
+require('./bcm-51d38d17.js');
+const index = require('./index-d3b89435.js');
 require('./colors-56282b00.js');
 require('./utils-fc077139.js');
 require('./colors-250d0982.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-a60955f7.js');
+require('./package-f644e6eb.js');
 
 const skeletonStyle = index.ce({
   slots: {

package/dist/cjs/bcm-tab-pane.cjs.entry.js

@@ -6,7 +6,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c591ecec.js');
+const index = require('./index-bb6ac306.js');
 const index$1 = require('./index-95ae50d0.js');
 require('./_commonjsHelpers-ed84c3ca.js');
 

package/dist/cjs/bcm-table.cjs.entry.js

@@ -6,24 +6,25 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c591ecec.js');
+const index = require('./index-bb6ac306.js');
 const watermark = require('./watermark-2c23c8f1.js');
 require('./color-helper-dc98a2ca.js');
 require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-7510539d.js');
-require('./number-helper-9d2d1d5a.js');
-const stringHelper = require('./string-helper-1ee6dc21.js');
-require('./validators-9369c82a.js');
+const generate = require('./generate-eda14f12.js');
+require('./number-helper-d14c9546.js');
+const stringHelper = require('./string-helper-cc89c9d6.js');
+require('./popover.style-e390b5a1.js');
 require('./element-dragger-a8562f82.js');
-require('./bcm-1d1fcf21.js');
+require('./bcm-51d38d17.js');
 const index$1 = require('./index-95ae50d0.js');
-require('./types-cc4adee7.js');
+require('./types-e4c4d1b2.js');
 require('./types-7523fd99.js');
 require('./colors-56282b00.js');
 require('./utils-fc077139.js');
 require('./colors-250d0982.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-a60955f7.js');
+require('./package-f644e6eb.js');
+require('./index-d3b89435.js');
 
 // DO NOT UPDATE MANUALLY: Generated from script during build time
 var VERSION$4 = '29.0.0';

package/dist/cjs/bcm-tabs-content.cjs.entry.js

@@ -6,7 +6,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c591ecec.js');
+const index = require('./index-bb6ac306.js');
 const index$1 = require('./index-95ae50d0.js');
 const utils = require('./utils-fc077139.js');
 const types = require('./types-3871235f.js');

package/dist/cjs/bcm-tag.cjs.entry.js

@@ -6,15 +6,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-c591ecec.js');
-const generate = require('./generate-7510539d.js');
-const bcm = require('./bcm-1d1fcf21.js');
+const index$1 = require('./index-bb6ac306.js');
+const generate = require('./generate-eda14f12.js');
+const bcm = require('./bcm-51d38d17.js');
 const index = require('./index-95ae50d0.js');
-const numberHelper = require('./number-helper-9d2d1d5a.js');
+const numberHelper = require('./number-helper-d14c9546.js');
 const utils = require('./utils-fc077139.js');
 const colors = require('./colors-56282b00.js');
 const types = require('./types-7523fd99.js');
-require('./package-a60955f7.js');
+require('./package-f644e6eb.js');
 require('./colors-250d0982.js');
 require('./_commonjsHelpers-ed84c3ca.js');
 

package/dist/cjs/bcm-time-picker.cjs.entry.js

@@ -6,14 +6,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c591ecec.js');
+const index = require('./index-bb6ac306.js');
 const index$1 = require('./index-95ae50d0.js');
-const isLoadDecorator = require('./is-load-decorator-15036f37.js');
-const generate = require('./generate-7510539d.js');
-const bcm = require('./bcm-1d1fcf21.js');
+const isLoadDecorator = require('./is-load-decorator-60805e8b.js');
+const generate = require('./generate-eda14f12.js');
+const bcm = require('./bcm-51d38d17.js');
 const utils = require('./utils-fc077139.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-a60955f7.js');
+require('./package-f644e6eb.js');
 require('./colors-250d0982.js');
 
 const timePickerCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:host{display:inline-flex;width:100%;max-width:256px}:host(.full-width){max-width:100%}:host(.hidden){display:none}:host(.linked-component){display:none}";

package/dist/cjs/bcm-timeline-item.cjs.entry.js

@@ -6,7 +6,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c591ecec.js');
+const index = require('./index-bb6ac306.js');
 const index$1 = require('./index-95ae50d0.js');
 require('./_commonjsHelpers-ed84c3ca.js');
 

package/dist/cjs/bcm-timeline.cjs.entry.js

@@ -6,7 +6,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c591ecec.js');
+const index = require('./index-bb6ac306.js');
 const index$1 = require('./index-95ae50d0.js');
 require('./_commonjsHelpers-ed84c3ca.js');
 

package/dist/cjs/bcm-toast.cjs.entry.js

@@ -6,22 +6,195 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c591ecec.js');
-const index$1 = require('./index-95ae50d0.js');
-const generate = require('./generate-7510539d.js');
-const stringHelper = require('./string-helper-1ee6dc21.js');
-const bcm = require('./bcm-1d1fcf21.js');
+const index$1 = require('./index-bb6ac306.js');
+const index$2 = require('./index-95ae50d0.js');
+const generate = require('./generate-eda14f12.js');
+const stringHelper = require('./string-helper-cc89c9d6.js');
+const bcm = require('./bcm-51d38d17.js');
 const utils = require('./utils-fc077139.js');
+const index = require('./index-d3b89435.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-a60955f7.js');
+require('./package-f644e6eb.js');
 require('./colors-250d0982.js');
 
+const toastStyle = index.ce({
+  slots: {
+    base: [
+      "bcm-toast",
+      "bcm-ui-element bcm-ui-content-display",
+      "tw-pointer-events-auto tw-transform tw-transition tw-duration-300 tw-ease-in-out",
+      "tw-flex tw-min-w-[256px] tw-max-w-[560px] tw-flex-col tw-gap-6 tw-rounded-lg tw-border tw-font-sans tw-font-normal tw-shadow-4",
+      "tw-border-gray-300 tw-bg-white tw-text-color-default",
+      "tw-p-7",
+      "tw-transform tw-transition tw-duration-300 tw-ease-in-out ",
+    ],
+    containerStyle: [
+      "tw-pointer-events-none tw-overflow-hidden tw-z-50",
+      "tw-fixed tw-flex",
+      "tw-p-4 tw-gap-4"
+    ],
+    header: ["tw-flex tw-items-center tw-justify-between tw-gap-5"],
+    headerLeft: ["tw-flex tw-items-center tw-gap-2.5"],
+    headerRight: ["tw-flex tw-items-baseline tw-gap-2"],
+    headerIcon: ["tw-text-size-8 "],
+    headerText: [],
+    descriptionStyle: ["tw-text-size-6 empty:tw-hidden tw-font-medium"],
+  },
+  variants: {
+    size: {
+      small: {
+        base: [],
+      },
+      medium: {
+        base: [],
+      },
+      large: {
+        base: [],
+      },
+    },
+    position: {
+      top: {
+        containerStyle: [
+          "tw-flex-col-reverse tw-top-4 tw-w-fit tw-left-0 tw-right-0 tw-mx-auto"
+        ]
+      },
+      bottom: {
+        containerStyle: [
+          "tw-flex-col tw-bottom-4 tw-w-fit tw-left-0 tw-right-0 tw-mx-auto"
+        ]
+      },
+      "top-start": {
+        containerStyle: [
+          "tw-flex-col-reverse tw-top-4 tw-left-4"
+        ]
+      },
+      "top-end": {
+        containerStyle: [
+          "tw-flex-col-reverse tw-top-4 tw-right-4"
+        ]
+      },
+      "bottom-start": {
+        containerStyle: [
+          "tw-flex-col tw-bottom-4 tw-left-4"
+        ]
+      },
+      "bottom-end": {
+        containerStyle: [
+          "tw-flex-col tw-bottom-4 tw-right-4"
+        ]
+      },
+    },
+    visibleContainer: {
+      true: {
+        base: [
+          "tw-translate-y-0 tw-opacity-100 "
+        ],
+      },
+      false: {
+        base: [
+          "tw-opacity-0"
+        ],
+      },
+    },
+    positionSplit: {
+      top: "",
+      bottom: "",
+    },
+    status: {
+      default: {
+        headerIcon: "",
+      },
+      success: {
+        headerIcon: "tw-text-color-success",
+      },
+      error: {
+        headerIcon: "tw-text-color-error",
+      },
+      warning: {
+        headerIcon: "tw-text-color-warning",
+      },
+      info: {
+        headerIcon: "tw-text-color-primary",
+      },
+    },
+    messageIcon: {
+      true: "",
+      false: "",
+    },
+    description: {
+      true: {
+        headerText: "tw-text-size-8 tw-font-semibold"
+      },
+      false: {
+        headerText: "tw-text-size-6"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      visibleContainer: false,
+      positionSplit: "top",
+      class: {
+        base: [
+          "tw-translate-y-[-100%]"
+        ]
+      },
+    },
+    {
+      visibleContainer: false,
+      positionSplit: "bottom",
+      class: {
+        base: [
+          "tw-translate-y-[100%]"
+        ]
+      },
+    },
+    {
+      messageIcon: false,
+      status: "success",
+      class: {
+        headerIcon: "fa-solid fa-check-circle",
+      },
+    },
+    {
+      messageIcon: false,
+      status: "error",
+      class: {
+        headerIcon: "fa-solid fa-exclamation-circle",
+      },
+    },
+    {
+      messageIcon: false,
+      status: "warning",
+      class: {
+        headerIcon: "fa-solid fa-exclamation-triangle",
+      },
+    },
+    {
+      messageIcon: false,
+      status: "info",
+      class: {
+        headerIcon: "fa-solid fa-info-circle",
+      }
+    }
+  ],
+  defaultVariants: {
+    size: "medium",
+    position: "bottom",
+    visibleContainer: false,
+    positionSplit: "bottom",
+    status: "default",
+    messageIcon: false,
+    description: false,
+  },
+});
+
 const BcmToast = class {
   constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.bcmToastClose = index.createEvent(this, "bcm-toast-close", 7);
-    this.bcmToastOpen = index.createEvent(this, "bcm-toast-open", 7);
-    this.bcmToastView = index.createEvent(this, "bcm-toast-view", 7);
+    index$1.registerInstance(this, hostRef);
+    this.bcmToastClose = index$1.createEvent(this, "bcm-toast-close", 7);
+    this.bcmToastOpen = index$1.createEvent(this, "bcm-toast-open", 7);
+    this.bcmToastView = index$1.createEvent(this, "bcm-toast-view", 7);
     this._id = generate.Generate.UID();
     this.status = undefined;
     this.message = "";
@@ -76,46 +249,29 @@ const BcmToast = class {
     if (!container) {
       container = document.createElement("div");
       container.id = containerId;
-      const classlist = index$1.classnames("tw-pointer-events-none tw-overflow-hidden tw-z-50", "tw-fixed tw-flex", "tw-p-4 tw-gap-4", {
-        "tw-flex-col-reverse tw-inset-x-0 tw-top-4 tw-mx-auto": this.position === bcm.Bcm$1.Placement.top,
-        "tw-flex-col tw-inset-x-0 tw-bottom-4 tw-mx-auto": this.position === bcm.Bcm$1.Placement.bottom,
-        "tw-flex-col-reverse tw-top-4 tw-left-4": this.position === bcm.Bcm$1.Placement["top-start"],
-        "tw-flex-col-reverse tw-top-4 tw-right-4": this.position === bcm.Bcm$1.Placement["top-end"],
-        "tw-flex-col tw-bottom-4 tw-left-4": this.position === bcm.Bcm$1.Placement["bottom-start"],
-        "tw-flex-col tw-bottom-4 tw-right-4": this.position === bcm.Bcm$1.Placement["bottom-end"],
-      });
+      const { containerStyle } = toastStyle({ position: this.position });
+      const classlist = containerStyle();
       container.classList.add(...classlist.split(" "));
       document.body.appendChild(container);
     }
     return container;
   }
   render() {
-    return (index.h(index.Host, { class: "tw-hidden" }, index.h("div", { class: index$1.classnames({ "tw-hidden": !this.visible }), id: this._id + "-container", onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, index.h("div", { class: index$1.classnames("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-transform tw-transition tw-duration-300 tw-ease-in-out ", {
-        "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",
-      }) }, index.h("div", { class: "tw-flex tw-items-center tw-justify-between tw-gap-5" }, index.h("div", { class: "tw-flex tw-items-center tw-gap-3 " }, this.status && (index.h("i", { class: index$1.classnames("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",
-      }) })), index.h("span", { class: index$1.classnames({
-        "tw-text-4": !this.description,
-        "tw-text-6 tw-font-medium": this.description,
-      }) }, !this.description && this.status && index.h("span", null, stringHelper.StringHelper.capitalize(this.status), ": "), this.message)), index.h("div", { class: "tw-flex tw-items-baseline tw-gap-2" }, this.viewButton && (index.h("button", { onClick: () => this.bcmToastView.emit(), title: "View details", class: index$1.classnames("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", {
+    const { position, visibleContainer, messageIcon, status, description } = this;
+    const positionSplit = position.split("-")[0] || "bottom";
+    const { base, header, headerLeft, headerRight, headerIcon, headerText, descriptionStyle } = toastStyle({
+      position: position,
+      visibleContainer,
+      positionSplit,
+      status,
+      messageIcon: messageIcon ? true : false,
+      description: description ? true : false
+    });
+    return (index$1.h(index$1.Host, { class: "tw-hidden" }, index$1.h("div", { class: index$2.classnames({ "tw-hidden": !this.visible }), id: this._id + "-container", onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, index$1.h("div", { class: base() }, index$1.h("div", { class: header() }, index$1.h("div", { class: headerLeft() }, this.status && (index$1.h("i", { class: headerIcon() + " " + messageIcon })), index$1.h("span", { class: headerText() }, !this.description && this.status && index$1.h("span", null, stringHelper.StringHelper.capitalize(this.status), ": "), this.message)), index$1.h("div", { class: headerRight() }, this.viewButton && (index$1.h("button", { onClick: () => this.bcmToastView.emit(), title: "View details", class: index$2.classnames("tw-appearance-none tw-border-0 ", "tw-cursor-pointer tw-rounded tw-bg-transparent tw-p-0 tw-px-2 tw-text-size-6 tw-text-inherit", "hover:tw-bg-color-default-hover", "active:tw-bg-color-default-active", "tw-transition tw-duration-300 tw-ease-in-out", {
         "tw-font-medium": this.description,
-      }) }, "View")), this.closeButton && (index.h("button", { title: "Close", onClick: () => this.hide(), class: index$1.classnames("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") }, index.h("i", { class: "fal fa-times" }))))), this.description && index.h("div", { class: "tw-text-3 " }, this.description), index.h("slot", null)))));
+      }) }, "View")), this.closeButton && (index$1.h("button", { title: "Close", onClick: () => this.hide(), class: index$2.classnames("tw-appearance-none tw-border-0 ", "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-size-8 tw-text-inherit", "hover:tw-bg-color-default-hover", "active:tw-bg-color-default-active") }, index$1.h("i", { class: "fa-regular fa-times" }))))), this.description && index$1.h("div", { class: descriptionStyle() }, this.description), index$1.h("div", { class: descriptionStyle() }, index$1.h("slot", null))))));
   }
-  get el() { return index.getElement(this); }
+  get el() { return index$1.getElement(this); }
 };
 
 exports.bcm_toast = BcmToast;

package/dist/cjs/bcm-treeview-group.cjs.entry.js

@@ -6,7 +6,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c591ecec.js');
+const index = require('./index-bb6ac306.js');
 
 const treeviewGroupCss = "";