bromcom-ui 2.3.55 → 2.3.59

package/dist/{esm → bromcom-ui}/bcm-colorpicker.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, a as getAssetPath, H as Host, g as getElement } from './index-8fe7aea4.js';
-import { c as classnames } from './index-e58a2d48.js';
-import './utils-b7fba7c4.js';
-import { E as ElementDragger, D as DragDirections } from './element-dragger-03ac2a5e.js';
+import { r as registerInstance, e as createEvent, h, f as Host, i as getAssetPath, g as getElement } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
+import './utils-1feb01eb.js';
+import { E as ElementDragger, D as DragDirections } from './element-dragger-e40f0410.js';
 
 const colorpickerCss = "@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}:host{position:relative;margin:0 0 8px 0}.color-picker{position:relative;width:200px}.color-picker.open .picker{opacity:1;visibility:visible;transform:scale(1) translateY(56px)}.picker{width:300px;position:absolute;top:0;z-index:1;background-color:#ffffff;border:1px solid #F6F6F6;box-shadow:0px 3px 3.6px 0.4px rgba(0, 0, 0, 0.15);opacity:0;visibility:hidden;transition:transform 0.2s ease, opacity 0.3s ease;transform:scale(0.8) translateY(-100px)}.label{display:flex;flex-direction:column;color:var(--bcm-color-grey-9);margin-bottom:4px}.caption-area{min-height:20px}.input-caption{display:block}.input{display:flex;cursor:pointer;border:1px solid var(--bcm-color-grey-5);border-radius:2px}.color{position:relative;width:100%;height:166px;user-select:none}.color img{width:100%;height:100%;user-select:none;pointer-events:none}.color-indicator{position:absolute;top:0;left:0;width:17px;height:17px;border:1px solid rgba(255, 255, 255, 0.82);box-shadow:0px 1px 2px rgba(0, 0, 0, 0.25);transform:translate(0, 0);border-radius:100%;user-select:none;box-sizing:border-box;pointer-events:none}.colors{position:relative;width:100%;height:16px;margin-top:8px}.colors img{width:100%;user-select:none;pointer-events:none}.colors-holder{position:absolute;top:50%;left:0;width:100%;height:8px;overflow:hidden;transform:translateY(-50%);border-radius:8px;user-select:none}.colors-indicator{position:absolute;top:50%;left:0;width:17px;height:17px;border:2px solid rgba(255, 255, 255, 0.82);box-shadow:0px 1px 4px rgba(0, 0, 0, 0.25);transform:translateY(-50%);border-radius:100%;user-select:none;box-sizing:border-box;pointer-events:none}.transparency{position:relative;width:100%;height:16px;margin-top:8px}.transparency-holder{position:absolute;top:50%;left:0;width:100%;height:8px;overflow:hidden;transform:translateY(-50%);border-radius:8px;background:transparent none repeat center center/20px}.transparency-indicator{position:absolute;top:50%;left:0;width:17px;height:17px;border:2px solid rgba(255, 255, 255, 0.82);box-shadow:0px 1px 4px rgba(0, 0, 0, 0.25);transform:translateY(-50%);border-radius:100%;user-select:none;box-sizing:border-box}.colors-transparency{padding:16px}.active-color{display:flex;align-items:center;width:100%;height:30px}.active-color .color-thumb{width:100%;height:100%;background-color:transparent;border-radius:1px 0 0 1px}.active-color .color-text{font-size:14px;color:#656565;margin-left:8px}.icon{display:flex;align-items:center;justify-content:center;cursor:pointer;width:30px;color:var(--bcm-color-grey-6)}.color-input{border:none;width:100%;padding:10px;outline:none;-webkit-tap-highlight-color:transparent}";
 
@@ -395,7 +395,7 @@ const BcmColorPicker = class {
       open: this.open
     });
     const captionClasses = classnames('size-1', 'input-caption', 'caption-' + captionType);
-    return (h(Host, null, h("div", { class: classes, onClick: () => this.handleClick() }, label && h("label", { class: "label size-1" }, " ", label, " ", required && ('*'), " "), h("div", { class: "input" }, h("div", { class: "active-color" }, h("div", { class: "color-thumb", style: { backgroundColor: this.value } })), h("span", { class: "icon", slot: "suffix" }, h("bcm-icon", { icon: "bg-colors" }))), !noCaption && (h("div", { class: "caption-area" }, captionType == "error"
+    return (h(Host, null, h("div", { class: classes, onClick: () => this.handleClick() }, label && h("div", null, h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required })), h("div", { class: "input" }, h("div", { class: "active-color" }, h("div", { class: "color-thumb", style: { backgroundColor: this.value } })), h("span", { class: "icon", slot: "suffix" }, h("bcm-icon", { icon: "bg-colors" }))), !noCaption && (h("div", { class: "caption-area" }, captionType == "error"
       ? h("span", { class: captionClasses }, " ", captionError, " ")
       : caption && h("span", { class: captionClasses }, " ", caption, " "))), h("div", { class: "picker" }, h("div", { class: "input" }, h("input", { type: "text", class: "color-input", maxlength: "7", ref: el => (this.inputElement = el), onKeyUp: (e) => this.handleColorInputKeyUp(e) })), h("div", { class: "color", onMouseDown: () => this.mouseState = 'down', style: { backgroundColor: this.hsvtorgb({ h: this.h, s: this.s, v: this.v }).hex }, ref: el => (this.colorElement = el) }, h("img", { src: getAssetPath('./static/color.svg') }), h("div", { class: "color-indicator", ref: el => (this.colorIndicatorElement = el) })), h("div", { class: "colors-transparency" }, h("div", { class: "colors", onMouseDown: () => this.mouseState = 'down', ref: el => (this.colorsElement = el) }, h("div", { class: "colors-holder" }, h("img", { src: getAssetPath('./static/colors.svg') })), h("div", { class: "colors-indicator", ref: el => (this.colorsIndicatorElement = el) })))))));
   }

package/dist/{esm → bromcom-ui}/bcm-comment-editor.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8fe7aea4.js';
-import { c as classnames } from './index-e58a2d48.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
 
 const commentEditorCss = "@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}:host{display:block}:host(.hidden){display:none}.comment-editor{display:flex}.comment{width:100%;margin-left:16px}bcm-button{margin-top:24px}";
 

package/dist/{esm → bromcom-ui}/bcm-comment-group.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host } from './index-8fe7aea4.js';
-import { c as classnames } from './index-e58a2d48.js';
+import { r as registerInstance, h, f as Host } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
 
 const commentGroupCss = "@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}:host{display:block}:host(.hidden){display:none}.comment-group{width:500px}.comment-group.full-width{width:100%}";
 

package/dist/{esm → bromcom-ui}/bcm-comment.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-8fe7aea4.js';
-import { c as classnames } from './index-e58a2d48.js';
+import { r as registerInstance, e as createEvent, h, f as Host } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
 import { L as LikeStatusProps } from './types-acccf7c5.js';
 
 const commentCss = "@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}:host{display:block}:host(.hidden){display:none}.comment-item{display:flex}.info{display:flex}.info bcm-text+bcm-text{margin-left:8px}.text-content{margin-left:16px}.actions{display:flex;flex-direction:row;align-items:center;margin-top:8px;margin-bottom:32px}.actions .action{display:flex;align-items:center;cursor:pointer;user-select:none;color:var(--bcm-color-grey-7)}.actions .action+.action{margin-left:8px}.actions .action:active{color:var(--bcm-color-grey-8)}.actions .action.active{color:var(--bcm-color-grey-7)}.actions .action.reply{color:var(--bcm-color-grey-7)}.actions .action.reply.active{color:var(--bcm-color-grey-8)}.actions .action bcm-icon{margin-right:4px}.editor{height:0;overflow:hidden;margin-bottom:0;transform:translateY(-2px);transition:transform 0.3s ease, margin 0.2s ease}.editor.active{height:auto;transform:translateY(0);margin-bottom:32px}";

package/dist/{esm → bromcom-ui}/bcm-content.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host } from './index-8fe7aea4.js';
-import { c as classnames } from './index-e58a2d48.js';
+import { r as registerInstance, h, f as Host } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
 
 const BcmContent = class {
   constructor(hostRef) {

package/dist/{esm → bromcom-ui}/bcm-date-picker.entry.js

@@ -1,12 +1,12 @@
-import { r as registerInstance, h, H as Host } from './index-8fe7aea4.js';
-import { c as classnames } from './index-e58a2d48.js';
+import { r as registerInstance, h, f as Host } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
+import { D as DateTimeHelper } from './datetime-helper-c373f888.js';
 
 const datePickerCss = "@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}:host{display:inline-block;width:100%;max-width:256px}:host(.full-width){max-width:100%}:host(.hidden){display:none}";
 
 const BcmDatePicker = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.cacheRangeDate = [];
     this.date = new Date();
     this.endDate = null;
     this.range = false;
@@ -20,6 +20,14 @@ const BcmDatePicker = class {
     this.captionType = 'default';
     this.alignment = 'left';
     this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
+    this.stateStartDate = null;
+    this.stateEndDate = null;
+  }
+  handleStartDateChange() {
+    this.handleDate();
+  }
+  handleEndDateChange() {
+    this.handleDate();
   }
   /**
    * @desc
@@ -48,47 +56,38 @@ const BcmDatePicker = class {
   async setDisabled(disabled) {
     this.disabled = disabled;
   }
-  /* mp --- */
-  formatDate(date, format) {
-    const map = {
-      mm: date.getMonth() + 1,
-      dd: date.getDate(),
-      yyyy: date.getFullYear()
-    };
-    return format.replace(/mm|dd|yyyy/gi, matched => map[matched]);
-  }
-  // @Method()
-  // async setaDate(dateOrTime: string | Date){
-  //     return this.set(String(this.formatDate(dateOrTime, 'dd/mm/yyyy')))
-  // }
   async setClear() {
     this.picker.setClear();
   }
   async setStartDate(dateOrTime) {
-    if (dateOrTime instanceof Date) {
-      this.cacheRangeDate[0] = String(this.formatDate(dateOrTime, 'dd/mm/yyyy'));
-      if (this.range == false) {
-        return this.set(this.formatDate(dateOrTime, 'dd/mm/yyyy'));
-      }
-      return true;
+    if (dateOrTime) {
+      dateOrTime = DateTimeHelper.convertTimeStampToDate(new Date(dateOrTime).getTime());
+      this.stateStartDate = dateOrTime;
     }
     else {
       this.setClear();
     }
   }
   async setEndDate(dateOrTime) {
-    if (dateOrTime instanceof Date) {
-      this.cacheRangeDate[1] = String(this.formatDate(dateOrTime, 'dd/mm/yyyy'));
-      if (this.range && this.cacheRangeDate[0]) {
-        return this.set(this.cacheRangeDate[0] + '-' + this.cacheRangeDate[1]);
-      }
-      return true;
+    if (dateOrTime) {
+      dateOrTime = DateTimeHelper.convertTimeStampToDate(new Date(dateOrTime).getTime());
+      this.stateEndDate = dateOrTime;
     }
     else {
       this.setClear();
     }
   }
   /* mp --- */
+  handleDate() {
+    if (this.range) {
+      if (this.stateStartDate && this.stateEndDate) {
+        this.set(this.stateStartDate + '-' + this.stateEndDate);
+      }
+    }
+    else {
+      this.set(this.stateStartDate);
+    }
+  }
   /**
    * @desc
    */
@@ -116,6 +115,10 @@ const BcmDatePicker = class {
     });
     return (h(Host, { class: hostClasses }, h("bcm-datetime-picker", { id: this._internal_id, name: this.name, type: this.range ? 'range' : 'date', date: this.date, fullWidth: this.fullWidth, ref: el => (this.picker = el), required: this.required, label: this.label, "end-date": this.endDate, disabled: this.disabled, disabledDates: this.disabledDates, "on-bcm-load": () => this.handlePickerLoad(), "on-bcm-change": (e) => this.handlePickerChange(e), noCaption: this.noCaption, caption: this.caption, captionType: this.captionType, alignment: this.alignment })));
   }
+  static get watchers() { return {
+    "stateStartDate": ["handleStartDateChange"],
+    "stateEndDate": ["handleEndDateChange"]
+  }; }
 };
 BcmDatePicker.style = datePickerCss;
 

package/dist/{esm/bcm-datetime-picker_2.entry.js → bromcom-ui/bcm-datetime-picker.entry.js}

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-8fe7aea4.js';
-import { c as classnames } from './index-e58a2d48.js';
-import { d as delay } from './utils-b7fba7c4.js';
-import { D as DragDirections, E as ElementDragger } from './element-dragger-03ac2a5e.js';
-import { p as popoverPlacement, a as popoverBoxPlacement } from './popover-placement-a4ab1587.js';
+import { r as registerInstance, e as createEvent, j as forceUpdate, h, f as Host, g as getElement } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
+import './utils-1feb01eb.js';
+import { D as DragDirections, E as ElementDragger } from './element-dragger-e40f0410.js';
+import { D as DateTimeHelper } from './datetime-helper-c373f888.js';
 
 var Months;
 (function (Months) {
@@ -40,7 +40,7 @@ var Types;
   Types["time"] = "time";
 })(Types || (Types = {}));
 
-const datetimePickerCss = "@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}:host{display:flex;position:relative;width:100%;max-width:256px;margin:0}:host(.full-width){max-width:100%}:host(.hidden){display:none}.toggle{cursor:pointer}.toggle.disabled{cursor:not-allowed}.modules{display:flex}.datetime-picker{position:absolute;top:-1000px;display:inline-flex;flex-direction:column;box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);opacity:0;visibility:hidden;transition:transform 0.2s ease, opacity 0.3s ease;transform:scale(0.8) translateY(-100px);background-color:#ffffff;min-height:356px;max-height:356px;box-sizing:border-box;z-index:-1000}.datetime-picker.alignment-left{left:0}.datetime-picker.alignment-right{right:0}.datetime-picker.open{top:calc( 100% - 28px );z-index:10000;opacity:1;visibility:visible;transform:scale(1) translateY(0)}.datetime-picker.open.no-caption{top:100%}.actions{display:flex;align-items:center;justify-content:space-between;padding:8px;margin-top:auto;border-top:1px solid var(--bcm-color-grey-6)}.actions .current-date{font-size:14px;line-height:22px;color:var(--bcm-color-prime-blue-6);text-transform:capitalize}.date-container+.time-container{border-left:1px solid #cecece}.time-container{width:185px}.time-container .header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;max-height:60px;border-bottom:1px solid var(--bcm-color-grey-4)}.time-container .header .now{font-size:14px;line-height:22px;cursor:pointer;color:var(--bcm-color-prime-blue-6);user-select:none}.time-container .content{position:relative;display:flex}.time-container .hours,.time-container .minutes,.time-container .time-period{position:relative;flex:1 1 100%;max-width:100%;height:280px;overflow:hidden}.time-container .hours .items>span,.time-container .minutes .items>span,.time-container .time-period .items>span{font-size:14px;color:var(--bcm-color-grey-8)}.time-container .hours .items>span.selected,.time-container .minutes .items>span.selected,.time-container .time-period .items>span.selected{color:var(--bcm-color-prime-blue-6)}.date-container{width:364px;}.date-container .header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;max-height:60px;border-bottom:1px solid var(--bcm-color-grey-4)}.date-container .header .month-year-wrapper{display:flex;align-items:center;justify-content:center;margin:0 4px;min-width:125px}.date-container .header .month-year{font-size:16px;line-height:24px}.date-container .header .month-year{display:flex;align-items:center}.date-container .header .month-year button{display:flex;align-items:center;box-shadow:none;background:transparent;outline:none;appearance:none;border:none;color:var(--bcm-color-prime-blue-6);cursor:pointer}.date-container .header .month{text-transform:capitalize}.date-container .header .year{padding-left:4px}.date-container .header .today{font-size:14px;line-height:22px;cursor:pointer;color:var(--bcm-color-prime-blue-6);user-select:none}.date-container .content{display:flex}.date-container .years{position:relative;flex:0 0 70px;max-width:70px;height:280px;overflow:hidden;background-color:var(--bcm-color-grey-2)}.date-container .days{width:100%}.date-container .day-numbers,.date-container .day-labels{display:grid;grid-template-columns:repeat(7, 1fr)}.date-container .day-numbers{padding:24px 24px}.date-container .day-numbers>span,.date-container .day-labels span{text-align:center}.date-container .day-numbers>span{position:relative;padding-bottom:calc(100% / 1);cursor:pointer}.date-container .day-numbers>span.not-this-month{color:var(--bcm-color-grey-4)}.date-container .day-numbers>span.is-weekend{color:var(--bcm-color-prime-blue-3)}.date-container .day-numbers>span.is-disabled-date:not(.today){color:var(--bcm-color-grey-4);cursor:not-allowed}.date-container .day-numbers>span.is-disabled-date:not(.today):before{opacity:0 !important}.date-container .day-numbers>span.today{color:var(--bcm-color-prime-blue-6)}.date-container .day-numbers>span.today:before{opacity:1;background-color:var(--bcm-color-prime-blue-2);border:1px solid var(--bcm-color-prime-blue-6)}.date-container .day-numbers>span.selected-start{background:linear-gradient(90deg, white 50%, #8abde2 50%) !important}.date-container .day-numbers>span.selected-end{background:linear-gradient(90deg, #8abde2 50%, white 50%) !important}.date-container .day-numbers>span.range{background:#8abde2}.date-container .day-numbers>span.range:not(.today){color:#ffffff}.date-container .day-numbers>span.range:not(.today):before{background-color:var(--bcm-color-prime-blue-6)}.date-container .day-numbers>span.range.is-weekend:not(.today){color:var(--bcm-color-prime-blue-2)}.date-container .day-numbers>span.selected,.date-container .day-numbers>span.selected-end{color:#ffffff}.date-container .day-numbers>span.selected:before,.date-container .day-numbers>span.selected-end:before{opacity:1;background-color:var(--bcm-color-prime-blue-6)}.date-container .day-numbers.start-1>span:first-child{grid-column:1}.date-container .day-numbers.start-2>span:first-child{grid-column:2}.date-container .day-numbers.start-3>span:first-child{grid-column:3}.date-container .day-numbers.start-4>span:first-child{grid-column:4}.date-container .day-numbers.start-5>span:first-child{grid-column:5}.date-container .day-numbers.start-6>span:first-child{grid-column:6}.date-container .day-numbers.start-7>span:first-child{grid-column:7}.date-container .day-numbers>span:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background-color:var(--bcm-color-grey-4);opacity:0;box-sizing:border-box}.date-container .day-numbers>span:hover.not-this-month:not(.is-weekend){color:var(--bcm-color-grey-6)}.date-container .day-numbers>span:hover:before{opacity:1}.date-container .day-numbers .number{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.date-container .day-labels{padding:24px 40px 0 40px}.date-container .day-labels span{font-size:12px;color:var(--bcm-color-grey-6)}.date-container .day-labels span:nth-child(7n+6),.date-container .day-labels span:nth-child(7n+7){color:var(--bcm-color-prime-blue-3)}.years .items,.hours .items,.minutes .items,.time-period .items{position:relative;display:flex;flex-direction:column;z-index:0;transform:translateY(0)}.years .items>span,.hours .items>span,.minutes .items>span,.time-period .items>span{text-align:center;font-size:12px;min-height:26px;max-height:26px;line-height:26px;color:var(--bcm-color-grey-8);user-select:none}.years:before,.years:after,.hours:before,.hours:after,.minutes:before,.minutes:after,.time-period:before,.time-period:after{content:\"\";position:absolute;left:0;width:100%;height:40px}.years:before,.hours:before,.minutes:before,.time-period:before{top:-40px;box-shadow:0 10px 100px 70px #ffffff;z-index:1}.years:after,.hours:after,.minutes:after,.time-period:after{bottom:-40px;box-shadow:0 -10px 100px 70px #ffffff;z-index:2}.select-strip{position:absolute;width:100%;top:50%;left:0;transform:translateY(-50%);min-height:26px;max-height:26px;border:1px solid var(--bcm-color-grey-5);border-left:0;border-right:0;pointer-events:none;box-sizing:border-box}";
+const datetimePickerCss = "@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}:host{display:inline-block;position:relative;width:100%;max-width:256px;margin:0}:host(.full-width){max-width:100%}:host(.hidden){display:none}.toggle{cursor:pointer}.toggle.disabled{cursor:not-allowed}.modules{display:flex}.datetime-picker{position:absolute;top:-1000px;display:inline-flex;flex-direction:column;box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);opacity:0;visibility:hidden;transition:transform 0.2s ease, opacity 0.3s ease;transform:scale(0.8) translateY(-100px);background-color:#ffffff;min-height:356px;max-height:356px;box-sizing:border-box;z-index:-1000}.datetime-picker.alignment-left{left:0}.datetime-picker.alignment-right{right:0}.datetime-picker.open{top:calc( 100% - 28px );z-index:10000;opacity:1;visibility:visible;transform:scale(1) translateY(0)}.datetime-picker.open.no-caption{top:100%}.actions{display:flex;align-items:center;justify-content:space-between;padding:8px;margin-top:auto;border-top:1px solid var(--bcm-color-grey-6)}.actions .current-date{font-size:14px;line-height:22px;color:var(--bcm-color-prime-blue-6);text-transform:capitalize}.date-container+.time-container{border-left:1px solid #cecece}.time-container{width:185px}.time-container .header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;max-height:60px;border-bottom:1px solid var(--bcm-color-grey-4)}.time-container .header .now{font-size:14px;line-height:22px;cursor:pointer;color:var(--bcm-color-prime-blue-6);user-select:none}.time-container .content{position:relative;display:flex}.time-container .hours,.time-container .minutes,.time-container .time-period{position:relative;flex:1 1 100%;max-width:100%;height:280px;overflow:hidden}.time-container .hours .items>span,.time-container .minutes .items>span,.time-container .time-period .items>span{font-size:14px;color:var(--bcm-color-grey-8)}.time-container .hours .items>span.selected,.time-container .minutes .items>span.selected,.time-container .time-period .items>span.selected{color:var(--bcm-color-prime-blue-6)}.date-container{width:364px;}.date-container .header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;max-height:60px;border-bottom:1px solid var(--bcm-color-grey-4)}.date-container .header .month-year-wrapper{display:flex;align-items:center;justify-content:center;margin:0 4px;min-width:125px}.date-container .header .month-year{font-size:16px;line-height:24px}.date-container .header .month-year{display:flex;align-items:center}.date-container .header .month-year button{display:flex;align-items:center;box-shadow:none;background:transparent;outline:none;appearance:none;border:none;color:var(--bcm-color-prime-blue-6);cursor:pointer}.date-container .header .month{text-transform:capitalize}.date-container .header .year{padding-left:4px}.date-container .header .today{font-size:14px;line-height:22px;cursor:pointer;color:var(--bcm-color-prime-blue-6);user-select:none}.date-container .content{display:flex}.date-container .years{position:relative;flex:0 0 70px;max-width:70px;height:280px;overflow:hidden;background-color:var(--bcm-color-grey-2)}.date-container .days{width:100%}.date-container .day-numbers,.date-container .day-labels{display:grid;grid-template-columns:repeat(7, 1fr)}.date-container .day-numbers{padding:24px 24px}.date-container .day-numbers>span,.date-container .day-labels span{text-align:center}.date-container .day-numbers>span{position:relative;padding-bottom:calc(100% / 1);cursor:pointer}.date-container .day-numbers>span.not-this-month{color:var(--bcm-color-grey-4)}.date-container .day-numbers>span.is-weekend{color:var(--bcm-color-prime-blue-3)}.date-container .day-numbers>span.is-disabled-date:not(.today){color:var(--bcm-color-grey-4);cursor:not-allowed}.date-container .day-numbers>span.is-disabled-date:not(.today):before{opacity:0 !important}.date-container .day-numbers>span.today{color:var(--bcm-color-prime-blue-6)}.date-container .day-numbers>span.today:before{opacity:1;background-color:var(--bcm-color-prime-blue-2);border:1px solid var(--bcm-color-prime-blue-6)}.date-container .day-numbers>span.selected-start{background:linear-gradient(90deg, white 50%, #8abde2 50%) !important}.date-container .day-numbers>span.selected-end{background:linear-gradient(90deg, #8abde2 50%, white 50%) !important}.date-container .day-numbers>span.range{background:#8abde2}.date-container .day-numbers>span.range:not(.today){color:#ffffff}.date-container .day-numbers>span.range:not(.today):before{background-color:var(--bcm-color-prime-blue-6)}.date-container .day-numbers>span.range.is-weekend:not(.today){color:var(--bcm-color-prime-blue-2)}.date-container .day-numbers>span.selected,.date-container .day-numbers>span.selected-end{color:#ffffff}.date-container .day-numbers>span.selected:before,.date-container .day-numbers>span.selected-end:before{opacity:1;background-color:var(--bcm-color-prime-blue-6)}.date-container .day-numbers.start-1>span:first-child{grid-column:1}.date-container .day-numbers.start-2>span:first-child{grid-column:2}.date-container .day-numbers.start-3>span:first-child{grid-column:3}.date-container .day-numbers.start-4>span:first-child{grid-column:4}.date-container .day-numbers.start-5>span:first-child{grid-column:5}.date-container .day-numbers.start-6>span:first-child{grid-column:6}.date-container .day-numbers.start-7>span:first-child{grid-column:7}.date-container .day-numbers>span:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background-color:var(--bcm-color-grey-4);opacity:0;box-sizing:border-box}.date-container .day-numbers>span:hover.not-this-month:not(.is-weekend){color:var(--bcm-color-grey-6)}.date-container .day-numbers>span:hover:before{opacity:1}.date-container .day-numbers .number{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.date-container .day-labels{padding:24px 40px 0 40px}.date-container .day-labels span{font-size:12px;color:var(--bcm-color-grey-6)}.date-container .day-labels span:nth-child(7n+6),.date-container .day-labels span:nth-child(7n+7){color:var(--bcm-color-prime-blue-3)}.years .items,.hours .items,.minutes .items,.time-period .items{position:relative;display:flex;flex-direction:column;z-index:0;transform:translateY(0)}.years .items>span,.hours .items>span,.minutes .items>span,.time-period .items>span{text-align:center;font-size:12px;min-height:26px;max-height:26px;line-height:26px;color:var(--bcm-color-grey-8);user-select:none}.years:before,.years:after,.hours:before,.hours:after,.minutes:before,.minutes:after,.time-period:before,.time-period:after{content:\"\";position:absolute;left:0;width:100%;height:40px}.years:before,.hours:before,.minutes:before,.time-period:before{top:-40px;box-shadow:0 10px 100px 70px #ffffff;z-index:1}.years:after,.hours:after,.minutes:after,.time-period:after{bottom:-40px;box-shadow:0 -10px 100px 70px #ffffff;z-index:2}.select-strip{position:absolute;width:100%;top:50%;left:0;transform:translateY(-50%);min-height:26px;max-height:26px;border:1px solid var(--bcm-color-grey-5);border-left:0;border-right:0;pointer-events:none;box-sizing:border-box}";
 
 const stringify = JSON.stringify;
 const BcmDatetimePicker = class {
@@ -925,6 +925,7 @@ const BcmDatetimePicker = class {
    */
   parse(dateStr) {
     const sections = dateStr.split(this.type === Types.range ? '-' : ' ');
+    // const sections: Array<string> = dateStr.split("-")
     const sectionDate = this.switchDDMM(sections[0]);
     const sectionDate2 = this.switchDDMM(sections[1]);
     const sectionTime = this.type === Types.datetime ? sections[1] : sections[0];
@@ -1140,22 +1141,49 @@ const BcmDatetimePicker = class {
   async setDisabled(disabled) {
     this.disabled = disabled;
   }
+  changeFormat(date) {
+    if (!date)
+      return;
+    const pad = (n) => n < 10 ? `0${n}` : n;
+    const day = new Date(date).getDate();
+    const month = new Date(date).getMonth() + 1;
+    const year = new Date(date).getFullYear();
+    const hours = new Date(date).getHours();
+    const minutes = new Date(date).getMinutes();
+    if (this.type == "range" || this.type == "datetime") {
+      return `${month}/${day}/${year}`;
+    }
+    return `${month}/${day}/${year} ${pad(hours)}:${pad(minutes)}`;
+  }
   /**
    * @desc
    * @param dateOrTime
    */
   async set(dateOrTime) {
-    const isString = typeof dateOrTime === 'string';
-    if (isString) {
-      //     this.setDataFromText(dateOrTime as string, true, false)
-      this.setDataFromText(dateOrTime, true, false);
-    }
-    else if (dateOrTime instanceof Date) {
-      this.setDataFromText(this.formatDate(new Date(dateOrTime), 'dd/mm/yyyy hh:mi'), true, false);
-    }
-    else {
-      this.setClear();
-    }
+    // contains -
+    // const split = dateOrTime.toString().split('-')
+    // var date: any = DateTimeHelper.convertTimeStampToDate(new Date(split[0]).getTime()).toString()
+    // if (split.length > 1) {
+    //     var date2 = DateTimeHelper.convertTimeStampToDate(new Date(split[1]).getTime())
+    //     date = date + "-" + date2
+    // }
+    const split = dateOrTime.toString().split('-');
+    var date = this.changeFormat(DateTimeHelper.convertTimeStampToDate(new Date(split[0]).getTime()));
+    if (split.length > 1) {
+      var date2 = this.changeFormat(DateTimeHelper.convertTimeStampToDate(new Date(split[1]).getTime()));
+      date = date + "-" + date2;
+    }
+    this.setDataFromText(date, true, false);
+    // dateOrTime = DateTimeHelper.convertTimeStampToDate(new Date(dateOrTime).getTime())
+    // const isString: boolean = typeof dateOrTime === 'string'
+    // if ( isString ) {
+    //     //     this.setDataFromText(dateOrTime as string, true, false)
+    // } else if( dateOrTime instanceof Date){   
+    //     this.setDataFromText(this.formatDate(new Date(dateOrTime), 'dd/mm/yyyy hh:mi') as string, true, false)
+    // }
+    // else{
+    //     this.setClear()
+    // }
   }
   async setClear() {
     this.handleInputClear();
@@ -1227,136 +1255,4 @@ const BcmDatetimePicker = class {
 };
 BcmDatetimePicker.style = datetimePickerCss;
 
-const tooltipCss = "@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}:host{display:inline-flex}:host(.hidden){display:none}:host(:focus){outline:none}.tooltip{position:relative;}.tooltip .box{position:absolute;display:none;box-sizing:border-box;background-color:#262626;border:1px solid #262626;border-radius:2px;z-index:10700;width:max-content;padding:4px 8px;color:var(--bcm-color-grey-1)}.tooltip::after{content:\"\";position:absolute;display:none;border:6px solid;z-index:10700}.tooltip.open .box,.tooltip.open::after{display:block}.tooltip.top .box{bottom:100%;margin-bottom:8px}.tooltip.top::after{bottom:100%;margin-bottom:-4px;border-color:#262626 transparent transparent transparent}.tooltip.bottom .box{top:100%;margin-top:8px}.tooltip.bottom::after{top:100%;margin-top:-4px;border-color:transparent transparent #262626 transparent}.tooltip.left .box{right:100%;margin-right:8px}.tooltip.left::after{right:100%;margin-right:-4px;border-color:transparent transparent transparent #262626}.tooltip.right .box{left:100%;margin-left:8px}.tooltip.right::after{left:100%;margin-left:-4px;border-color:transparent #262626 transparent transparent}.tooltip.top.center .box,.tooltip.bottom.center .box{left:50%;transform:translateX(-50%)}.tooltip.top.center::after,.tooltip.bottom.center::after{left:50%;transform:translateX(-50%)}.tooltip.top.start .box,.tooltip.bottom.start .box{left:0}.tooltip.top.start::after,.tooltip.bottom.start::after{left:8px}.tooltip.top.end .box,.tooltip.bottom.end .box{right:0}.tooltip.top.end::after,.tooltip.bottom.end::after{right:8px}.tooltip.left.center .box,.tooltip.right.center .box{top:50%;transform:translateY(-50%)}.tooltip.left.center::after,.tooltip.right.center::after{top:50%;transform:translateY(-50%)}.tooltip.left.start .box,.tooltip.right.start .box{top:0}.tooltip.left.start::after,.tooltip.right.start::after{top:4px}.tooltip.left.end .box,.tooltip.right.end .box{bottom:0}.tooltip.left.end::after,.tooltip.right.end::after{bottom:4px}";
-
-const BcmTooltip = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.onShow = createEvent(this, "bcm-show", 7);
-    this.onHide = createEvent(this, "bcm-hide", 7);
-    this.placement = 'top';
-    this.trigger = 'hover';
-    this.hidden = false;
-    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
-  }
-  async show() {
-    // Prevent subsequent calls
-    if (this.open) {
-      return;
-    }
-    this.open = true;
-    this.onShow.emit();
-  }
-  async hide() {
-    // Prevent subsequent calls
-    if (!this.open) {
-      return;
-    }
-    this.open = false;
-    this.onHide.emit();
-  }
-  handleClickOutside(e) {
-    if (!this.host.contains(e.target)) {
-      if (this.open) {
-        this.open = false;
-      }
-    }
-  }
-  async handleOpen() {
-    await this.createElement();
-    var tooltipBox = document.getElementById("box" + this._internal_id).shadowRoot.querySelector(".tooltip-box");
-    if (tooltipBox && tooltipBox.querySelector(".box")) {
-      var tooltipBoxIn = tooltipBox.querySelector(".box");
-      popoverPlacement(tooltipBoxIn, this.host, this.placement, (place) => this.placement = place);
-      tooltipBox.classList.toggle("open");
-    }
-  }
-  async createElement() {
-    var target = this.host.getBoundingClientRect();
-    var placementString = String([...this.getPlacement()]).replace(',', ' ');
-    var element;
-    if (!document.getElementById("box" + this._internal_id)) {
-      element = document.createElement("bcm-tooltip-box");
-      element.setAttribute("id", "box" + this._internal_id);
-    }
-    else {
-      element = document.getElementById("box" + this._internal_id);
-    }
-    element.setAttribute("message", this.message);
-    // element.setAttribute("placement", placementString)
-    element.style.position = "absolute";
-    // element.style.top = target.top + "px"
-    // element.style.left = (target.left + (target.width / 2)) + "px"
-    element.setAttribute("placement", placementString);
-    // element.style.zIndex = "999999999"
-    document.body.appendChild(element);
-    await delay(50);
-    var tooltipBox = document.getElementById("box" + this._internal_id).shadowRoot.querySelector(".tooltip-box");
-    if (tooltipBox && tooltipBox.querySelector(".box")) {
-      var tooltipBoxIn = tooltipBox.querySelector(".box");
-      popoverPlacement(tooltipBoxIn, this.host, this.placement, (place) => this.placement = place);
-    }
-    element.style.top = popoverBoxPlacement(this.placement, target)[0] + "px";
-    element.style.left = popoverBoxPlacement(this.placement, target)[1] + "px";
-  }
-  hasTrigger(trigger) {
-    return this.trigger === trigger;
-  }
-  getPlacement() {
-    const placements = this.placement.split('-');
-    if (placements.length === 1) {
-      placements.push('center');
-    }
-    return placements;
-  }
-  /*
-      Trigger Functions
-  */
-  handleMouseOver() {
-    if (this.hasTrigger('hover')) {
-      this.show();
-    }
-  }
-  handleMouseOut() {
-    if (this.hasTrigger('hover')) {
-      this.hide();
-    }
-  }
-  handleClick() {
-    if (this.hasTrigger('click')) {
-      this.open ? this.hide() : this.show();
-    }
-  }
-  handleFocus() {
-    if (this.hasTrigger('focus')) {
-      this.show();
-    }
-  }
-  handleBlur() {
-    if (this.hasTrigger('focus')) {
-      this.hide();
-    }
-  }
-  async componentDidRender() {
-    await this.createElement();
-    var tooltipBox = document.getElementById("box" + this._internal_id).shadowRoot.querySelector(".tooltip-box");
-    if (tooltipBox && tooltipBox.querySelector(".box")) {
-      var tooltipBoxIn = tooltipBox.querySelector(".box");
-      popoverPlacement(tooltipBoxIn, this.host, this.placement, (place) => this.placement = place);
-    }
-  }
-  render() {
-    const classes = classnames('tooltip', ...this.getPlacement(), {
-    // 'open': this.open
-    });
-    const hostClasses = classnames(this.hidden ? 'hidden' : null);
-    return (h(Host, { class: hostClasses, onClick: () => this.handleClick(), onMouseOver: () => this.handleMouseOver(), onMouseOut: () => this.handleMouseOut(), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur(), tabindex: 0 }, h("span", { class: classes }, h("span", { class: "box size-2" }, this.message), h("slot", null))));
-  }
-  get host() { return getElement(this); }
-  static get watchers() { return {
-    "open": ["handleOpen"]
-  }; }
-};
-BcmTooltip.style = tooltipCss;
-
-export { BcmDatetimePicker as bcm_datetime_picker, BcmTooltip as bcm_tooltip };
+export { BcmDatetimePicker as bcm_datetime_picker };

package/dist/bromcom-ui/bcm-divider.entry.js

@@ -0,0 +1,24 @@
+import { r as registerInstance, h, f as Host } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
+
+const dividerCss = "@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}:host{display:flex;justify-content:center}:host(.hidden){display:none}.divider{background-color:var(--bcm-color-grey-5)}.divider.horizontal{height:1px;margin:4px 0}.divider.vertical{height:100%;width:1px;margin:0 4px}";
+
+const BcmBadge = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.direction = 'horizontal';
+    this.width = '100';
+    this.hidden = false;
+  }
+  render() {
+    const classes = classnames('divider', this.direction);
+    const styles = {
+      width: this.width + '%'
+    };
+    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    return (h(Host, { class: hostClasses }, h("div", { class: classes, style: this.direction === 'horizontal' && styles })));
+  }
+};
+BcmBadge.style = dividerCss;
+
+export { BcmBadge as bcm_divider };

package/dist/{esm → bromcom-ui}/bcm-dropdown-button.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8fe7aea4.js';
-import { c as classnames } from './index-e58a2d48.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
 import { i as iconSizes } from './types-0e4b533d.js';
 
 const dropdownButtonCss = "@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}.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}:host{display:inline-block}:host(.hidden){display:none}button,a{border:none;outline:0;cursor:pointer;display:flex;align-items:center;justify-content:center;text-align:center;font-family:\"Roboto\", sans-serif;padding:unset;text-decoration:none;box-sizing:border-box;position:relative;border:none}.button .loading{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.button.rounded{border-radius:100%}.button.rounded .loading{border-radius:100%}.button:before,.button:after{content:\"\"}.solid button,.solid a{color:var(--bcm-color-grey-1);background-color:var(--bcm-color-prime-blue-6);border:1px solid var(--bcm-color-prime-blue-6)}.solid button .loading,.solid a .loading{background-color:var(--bcm-color-prime-blue-6)}.solid button:hover,.solid button:focus,.solid a:hover,.solid a:focus{background-color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.solid button:active,.solid a:active{background-color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.solid button:disabled,.solid a:disabled{color:var(--bcm-color-grey-6) !important;background-color:var(--bcm-color-grey-3) !important;border-color:var(--bcm-color-grey-5);cursor:not-allowed}.solid.outline button,.solid.outline a{color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-5)}.solid.outline button .loading,.solid.outline a .loading{background-color:var(--bcm-color-grey-1)}.solid.outline button:hover,.solid.outline button:focus,.solid.outline a:hover,.solid.outline a:focus{color:var(--bcm-color-prime-blue-5);background-color:var(--bcm-color-grey-1)}.solid.outline button:active,.solid.outline a:active{color:var(--bcm-color-prime-blue-7);background-color:var(--bcm-color-grey-1)}.ghost button,.ghost a{color:var(--bcm-color-prime-blue-6);background-color:transparent;border:1px solid var(--bcm-color-prime-blue-6)}.ghost button .loading,.ghost a .loading{background-color:var(--bcm-color-grey-1)}.ghost button:hover,.ghost button:focus,.ghost a:hover,.ghost a:focus{color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.ghost button:active,.ghost a:active{color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.ghost button:disabled,.ghost a:disabled{color:var(--bcm-color-grey-6);border-color:var(--bcm-color-grey-5);cursor:not-allowed}.ghost.outline button,.ghost.outline a{color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-1)}.button>bcm-icon.prefix{margin-right:4px}.button>bcm-icon.suffix{margin-left:4px}.large{min-height:40px;min-width:120px}.large bcm-icon.prefix{margin-right:16px}.large bcm-icon.suffix{margin-left:16px}.large:not(.rounded){padding:0 16px}.large:not(.rounded).with_suffix{padding-right:0}.medium{min-height:32px;min-width:32px}.medium:not(.rounded){padding:0 16px}.medium:not(.rounded).with_suffix{padding-right:0}.small{min-height:24px;min-width:24px}.small:not(.rounded){padding:0 8px}.small:not(.rounded).with_suffix{padding-right:0}.dropdown-button{display:flex;align-items:center;justify-content:center;flex-direction:row;border-radius:2px}.dropdown-button.split.solid .button:not(:disabled){border-right-color:var(--bcm-color-prime-blue-7)}.dropdown-button.split.outline .button:not(:disabled){border-right-color:var(--bcm-color-grey-5)}.dropdown-button.split button.large bcm-icon.prefix,.dropdown-button.split a.large bcm-icon.prefix{margin-right:8px}.dropdown-button.split button.large.button,.dropdown-button.split a.large.button{padding:0 16px}.dropdown-button.split button.large.caret,.dropdown-button.split a.large.caret{border-left:0px;padding:0;min-width:40px}.dropdown-button.split button.medium bcm-icon.prefix,.dropdown-button.split a.medium bcm-icon.prefix{margin-right:8px}.dropdown-button.split button.medium.button,.dropdown-button.split a.medium.button{padding:0 8px}.dropdown-button.split button.medium.caret,.dropdown-button.split a.medium.caret{border-left:0px;padding:0;min-width:30px}.dropdown-button.split button.small bcm-icon.prefix,.dropdown-button.split a.small bcm-icon.prefix{margin-right:16px}.dropdown-button.split button.small.button,.dropdown-button.split a.small.button{padding:0 8px}.dropdown-button.split button.small.caret,.dropdown-button.split a.small.caret{border-left:0px;padding:0;min-width:30px}";

package/dist/{esm/bcm-dropdown-group_2.entry.js → bromcom-ui/bcm-dropdown-group.entry.js}

@@ -1,6 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8fe7aea4.js';
-import { c as classnames } from './index-e58a2d48.js';
-import { i as iconSizes } from './types-0e4b533d.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
 
 const dropdownGroupCss = "@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}:host{display:block}@media screen and (min-width: 576px){:host{width:100%}}:host(.hidden){display:none}.dropdown-group{--const-padding-vertical-sub:8px;--const-padding-horizontal-sub:40px;--group-shadow:0px 4px 4px rgba(0, 0, 0, 0.25)}.dropdown-group ::slotted(bcm-dropdown-item){--padding-vertical-sub:var(--const-padding-vertical-sub);--padding-horizontal-sub:var(--const-padding-horizontal-sub);--hover-color:var(--bcm-color-prime-blue-6);--selected-bg-color:var(--bcm-color-prime-blue-6)}.dropdown-group.open .title{background-color:var(--bcm-color-prime-blue-6);color:#ffffff}.dropdown-group.open .title:hover:not(.disabled){background-color:var(--bcm-color-prime-blue-7);color:#ffffff}.dropdown-group.open .inner{display:block}.inner{position:absolute;top:calc(100% + 5px);display:none;transition:height 0.3s ease;background-color:#ffffff;border-radius:2px;box-shadow:var(--group-shadow)}@media screen and (min-width: 576px){.inner{position:relative;box-shadow:none}}.title{display:flex;align-items:center;justify-content:space-between;color:var(--bcm-color-grey-8);cursor:pointer;padding:8px 8px;height:100%}.title .text-content{display:flex;align-items:center}.title .collapse-icon{margin-left:8px}.title ::slotted(bcm-icon){margin-right:10px}.title:hover{color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}@media screen and (min-width: 576px){.title{padding:var(--const-padding-vertical-sub) var(--const-padding-horizontal-sub)}}.dropdown-group .title{padding:var(--const-padding-vertical-sub) var(--const-padding-horizontal-sub);white-space:nowrap}.dropdown-group .inner{position:relative;box-shadow:none}.dropdown-group.right{position:relative;--nowrap-sub:nowrap}.dropdown-group.right .inner{position:absolute;top:0;left:100%;margin-left:2px;box-shadow:var(--group-shadow)}@media screen and (min-width: 576px){.dropdown-group.right .inner{position:relative;left:0;box-shadow:none}}";
 
@@ -56,36 +55,4 @@ const BcmDropdownGroup = class {
 };
 BcmDropdownGroup.style = dropdownGroupCss;
 
-const dropdownItemCss = "@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}:host{display:block}@media screen and (min-width: 576px){:host{width:100%}}:host(.hidden){display:none}.dropdown-item{--padding-vertical:8px;--padding-horizontal:8px;--nowrap:normal}.dropdown-item{border:none;outline:0;cursor:pointer;display:flex;align-items:center;justify-content:center;text-align:center;font-family:\"Roboto\", sans-serif;color:var(--bcm-color-grey-8);background-color:transparent;text-decoration:none;box-sizing:border-box;position:relative;border:none;padding:var(--padding-vertical-sub, var(--padding-vertical)) var(--padding-horizontal-sub, var(--padding-horizontal));white-space:var(--nowrap-sub, var(--nowrap));min-width:150px;width:100%;cursor:pointer}.dropdown-item.disabled{color:var(--bcm-color-grey-6)}.dropdown-item.selected{background-color:var(--bcm-color-prime-blue-6);color:#ffffff}.dropdown-item.selected:hover:not(.disabled){background-color:var(--bcm-color-prime-blue-7);color:#ffffff}.dropdown-item:hover:not(.disabled){color:var(--hover-color, var(--bcm-color-prime-blue-6));background-color:var(--hover-bg-color, var(--bcm-color-prime-blue-1))}.dropdown-item bcm-icon{margin-right:10px}";
-
-const BcmDropdownItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.menuItemSelected = createEvent(this, "bcm-dropdown-item-selected", 7);
-    this.size = 'medium';
-    this.disabled = false;
-    this._id = (Math.random() * 4).toString(16).replace('.', '');
-    this.hidden = false;
-  }
-  /**
-   * @desc
-   */
-  handleClick() {
-    this.menuItemSelected.emit(this._id);
-  }
-  render() {
-    const { disabled, icon, target, href, size } = this;
-    const iconSize = iconSizes.default[size];
-    const Component = (href && !disabled) ? 'a' : 'button';
-    const classes = classnames('dropdown-item', size, {
-      'size-2': size === 'small' || size === 'medium',
-      'size-3': size === 'large',
-    });
-    const hostClasses = classnames(this.hidden ? 'hidden' : null);
-    return (h(Host, { class: hostClasses, onClick: () => this.handleClick() }, h(Component, { class: classes, disabled: disabled, href: href, target: target }, icon && h("bcm-icon", { type: "outlined", class: "prefix", icon: icon, size: iconSize }), h("slot", null))));
-  }
-  get el() { return getElement(this); }
-};
-BcmDropdownItem.style = dropdownItemCss;
-
-export { BcmDropdownGroup as bcm_dropdown_group, BcmDropdownItem as bcm_dropdown_item };
+export { BcmDropdownGroup as bcm_dropdown_group };

package/dist/bromcom-ui/bcm-dropdown-item.entry.js

@@ -0,0 +1,37 @@
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
+import { i as iconSizes } from './types-0e4b533d.js';
+
+const dropdownItemCss = "@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}:host{display:block}@media screen and (min-width: 576px){:host{width:100%}}:host(.hidden){display:none}.dropdown-item{--padding-vertical:8px;--padding-horizontal:8px;--nowrap:normal}.dropdown-item{border:none;outline:0;cursor:pointer;display:flex;align-items:center;justify-content:center;text-align:center;font-family:\"Roboto\", sans-serif;color:var(--bcm-color-grey-8);background-color:transparent;text-decoration:none;box-sizing:border-box;position:relative;border:none;padding:var(--padding-vertical-sub, var(--padding-vertical)) var(--padding-horizontal-sub, var(--padding-horizontal));white-space:var(--nowrap-sub, var(--nowrap));min-width:150px;width:100%;cursor:pointer}.dropdown-item.disabled{color:var(--bcm-color-grey-6)}.dropdown-item.selected{background-color:var(--bcm-color-prime-blue-6);color:#ffffff}.dropdown-item.selected:hover:not(.disabled){background-color:var(--bcm-color-prime-blue-7);color:#ffffff}.dropdown-item:hover:not(.disabled){color:var(--hover-color, var(--bcm-color-prime-blue-6));background-color:var(--hover-bg-color, var(--bcm-color-prime-blue-1))}.dropdown-item bcm-icon{margin-right:10px}";
+
+const BcmDropdownItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.menuItemSelected = createEvent(this, "bcm-dropdown-item-selected", 7);
+    this.size = 'medium';
+    this.disabled = false;
+    this._id = (Math.random() * 4).toString(16).replace('.', '');
+    this.hidden = false;
+  }
+  /**
+   * @desc
+   */
+  handleClick() {
+    this.menuItemSelected.emit(this._id);
+  }
+  render() {
+    const { disabled, icon, target, href, size } = this;
+    const iconSize = iconSizes.default[size];
+    const Component = (href && !disabled) ? 'a' : 'button';
+    const classes = classnames('dropdown-item', size, {
+      'size-2': size === 'small' || size === 'medium',
+      'size-3': size === 'large',
+    });
+    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    return (h(Host, { class: hostClasses, onClick: () => this.handleClick() }, h(Component, { class: classes, disabled: disabled, href: href, target: target }, icon && h("bcm-icon", { type: "outlined", class: "prefix", icon: icon, size: iconSize }), h("slot", null))));
+  }
+  get el() { return getElement(this); }
+};
+BcmDropdownItem.style = dropdownItemCss;
+
+export { BcmDropdownItem as bcm_dropdown_item };

package/dist/{esm → bromcom-ui}/bcm-dropdown-list.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-8fe7aea4.js';
-import { c as classnames } from './index-e58a2d48.js';
+import { r as registerInstance, h, f as Host, g as getElement } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
 
 const dropdownListCss = "@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}:host{display:block}:host(.hidden){display:none}";
 

package/dist/{esm → bromcom-ui}/bcm-dropdown.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8fe7aea4.js';
-import { c as classnames } from './index-e58a2d48.js';
-import { g as getChilds } from './utils-b7fba7c4.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
+import { a as getChilds } from './utils-1feb01eb.js';
 
 const dropdownCss = "@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}:host{display:inline-block;width:fit-content}:host(.hidden){display:none}*{box-sizing:border-box}::-webkit-details-marker{display:none}summary{display:inline-block}.items-container{--group-shadow:0px 4px 4px rgba(0, 0, 0, 0.25)}details{position:relative}.items-container{min-width:150px;transition:height 0.3s ease;position:absolute;left:0;transition:height 0.3s ease;background-color:#ffffff;border-radius:2px;box-shadow:var(--group-shadow);z-index:10000}";