bromcom-ui 2.3.54 → 2.3.58

package/dist/esm/{bcm-empty_6.entry.js → bcm-listbox_5.entry.js}

@@ -1,69 +1,6 @@
-import { r as registerInstance, h, a as getAssetPath, H as Host, g as getElement, c as createEvent } from './index-8fe7aea4.js';
+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, d as delay } from './utils-b7fba7c4.js';
-
-/**
- * 'image' prop predefined values
- */
-var ImageProps;
-(function (ImageProps) {
-  ImageProps["default"] = "default.svg";
-  ImageProps["simple"] = "simple.svg";
-})(ImageProps || (ImageProps = {}));
-/**
- * 'size' prop predefined values
- */
-var SizeProps;
-(function (SizeProps) {
-  SizeProps["small"] = "small";
-  SizeProps["medium"] = "medium";
-  SizeProps["big"] = "big";
-})(SizeProps || (SizeProps = {}));
-
-const emptyCss = "@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}.empty.small{max-width:100px}.empty.medium{max-width:140px}.empty.big{max-width:200px}.text{font-size:14px;color:var(--bcm-color-grey-8)}.content{text-align:center}img{max-width:100%}";
-
-const BcmEmpty = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Component Properties
-     */
-    this._image = ImageProps.default;
-    this.size = SizeProps.medium;
-    this.hidden = false;
-  }
-  /**
-  * @ComponentMethod
-  */
-  componentWillLoad() {
-    this.parseImage(this._image);
-  }
-  /**
-  * @desc
-  * @param newValue
-  * @returns {void}
-  */
-  parseImage(newValue) {
-    if (newValue) {
-      newValue in ImageProps
-        ? this.image = ImageProps[newValue]
-        : this.image = ImageProps.default;
-    }
-  }
-  render() {
-    const classes = classnames('empty', {
-      [this.size]: this.size
-    });
-    const hostClasses = classnames(this.hidden ? 'hidden' : null);
-    return (h(Host, { class: hostClasses }, h("div", { class: classes }, h("img", { src: getAssetPath(`./static/${this.image}`) }), h("div", { class: "content" }, this.text && (h("span", { class: "text" }, this.text)), h("slot", null)))));
-  }
-  static get assetsDirs() { return ["static"]; }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "_image": ["parseImage"]
-  }; }
-};
-BcmEmpty.style = emptyCss;
+import { g as getChilds, d as delay } from './utils-de9aee67.js';
 
 const listboxCss = "@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;width:fit-content;height:fit-content;background-color:#ffffff}:host(.hidden){display:none}:host(.flex){width:100%;height:100%}:host(.flex) .bcm-listbox{max-height:100%;max-width:100%;height:100%;min-width:100%}:host(.full-width){width:100%}:host(.full-width) .bcm-listbox{max-width:100%;min-width:100%}.bcm-listbox{flex:1;background-color:var(--bcm-color-grey-1);width:fit-content;display:flex;flex-direction:column;height:100%;width:100%;min-width:256px;max-width:256px;min-height:auto;max-height:300px;box-sizing:border-box;border:1px solid var(--bcm-color-grey-5)}.bcm-listbox-list{flex:1;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;border-bottom:none}.bcm-listbox-list.loading{min-height:150px;position:relative;margin:0 8px 8px 8px}.bcm-listbox-list .loading{display:none;align-items:center;justify-content:center;height:100%;width:100%;position:absolute;background-color:rgba(255, 255, 255, 0.03)}.bcm-listbox-list .loading.show{display:flex}.bcm-listbox-list .list-container.hidden{display:none}.bcm-listbox .search{padding:8px;padding-bottom:0}.bcm-listbox .search.hidden{display:none !important}.bcm-listbox .empty{display:none;align-items:center;justify-content:center;flex:1;height:100%}.bcm-listbox .empty.show{display:flex}.bcm-listbox-footer{text-align:right;padding:4px 8px;background-color:var(--bcm-color-grey-3)}.label{display:block;color:var(--bcm-color-grey-9);margin-bottom:4px}.listbox-item{display:flex;align-items:stretch;justify-content:flex-start;flex-direction:column;color:var(--bcm-color-grey-8);user-select:none;background-color:var(--bcm-color-grey-1)}.listbox-item.hidden{display:none}.listbox-item .divider{padding:0 8px}.listbox-item-container{display:flex;align-items:center;justify-content:flex-start;flex-direction:row;padding-left:8px;width:100%}.listbox-item-container .check-content{display:flex;align-items:center;justify-content:flex-start;width:16px;min-width:16px;margin-right:4px}.listbox-item-container .check-content .indeterminate{width:16px;height:16px;position:relative;display:block;padding-right:8px;cursor:pointer}.listbox-item-container .check-content .indeterminate:after{content:\"\";position:absolute;top:50%;left:9px;width:10px;height:10px;background-color:var(--bcm-color-prime-blue-6);transform:translate(-50%, -50%);opacity:1;z-index:1}.listbox-item-container .check-content .indeterminate:before{content:\"\";position:absolute;top:-1px;left:0px;width:16px;height:100%;border-radius:2px;background-color:transparent;border:1px solid var(--bcm-color-grey-5);opacity:1;z-index:2}.listbox-item-container .check-content .indeterminate:hover:before{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}.listbox-item-container-text-content{display:flex;align-items:center;justify-content:flex-start;flex-direction:row;cursor:pointer;width:100%;padding:4px 8px 4px 4px}.listbox-item-container.disabled{color:var(--bcm-color-grey-6)}.listbox-item-container.selected{color:var(--bcm-color-prime-blue-6)}.listbox-item-container.selected:hover:not(.disabled){color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}.listbox-item-container:hover:not(.disabled),.listbox-item-container:active:not(.disabled){color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}.caption-area{margin-bottom:8px;min-height:20px}.input-caption{display:block}.error.label{color:var(--bcm-color-red-6) !important}.error.bcm-listbox{border:1px solid var(--bcm-color-red-6) !important}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}.input-large{height:38px}.input-medium{height:30px}.input-small{height:20px}";
 
@@ -364,6 +301,7 @@ const BcmListbox = class {
         ? this.size = _config['size']
         : this.size = 'medium';
     }
+    this.searchSub = this.objectMapping['items'];
     if (_config['mapping']) {
       if (_config['mapping']['id']) {
         this.objectMapping['id'] = String(_config['mapping']['id']);
@@ -399,15 +337,14 @@ const BcmListbox = class {
       if (_config['mapping']['selected']) {
         this.objectMapping['selected'] = _config['mapping']['selected'];
       }
-      if (this.treeview) {
-        if (_config['mapping']['items']) {
-          this.objectMapping['items'] = _config['mapping']['items'];
-          this.searchSub = this.objectMapping['items'];
-        }
-      }
-      else {
+      if (_config['mapping']['items']) {
+        this.objectMapping['items'] = _config['mapping']['items'];
         this.searchSub = this.objectMapping['items'];
       }
+      // if ( this.treeview ) {
+      // }else{
+      //     this.searchSub = this.objectMapping['items']
+      // }
     }
     sessionStorage.setItem(this._internal_id + "-config", JSON.stringify(_config));
     // forceUpdate(this.el)
@@ -654,7 +591,7 @@ const BcmListbox = class {
     //         this.listboxChecked.emit(item[this.objectMapping['id']])
     //     }
     // }
-    return (h("bcm-listbox-item", Object.assign({ _internal_id: this._internal_id, id: String(item[this.objectMapping['id']]), text: item[this.objectMapping['text']] }, (item[this.objectMapping['icon']] && { icon: item[this.objectMapping['icon']] }), (item[this.objectMapping['avatar']] && { avatar: item[this.objectMapping['avatar']] }), (item[this.objectMapping['avatarName']] && { avatarName: item[this.objectMapping['avatarName']] }), (item[this.objectMapping['avatarImage']] && { avatarImage: item[this.objectMapping['avatarImage']] }), (item[this.objectMapping['secondaryText']] && { secondaryText: item[this.objectMapping['secondaryText']] }), (item[this.objectMapping['tooltipText']] && { tooltipText: item[this.objectMapping['tooltipText']] }), (item[this.objectMapping['checked']] === true && { checked: item[this.objectMapping['checked']] }), (item[this.objectMapping['disabled']] === true && { disabled: true }), (item[this.objectMapping['selected']] === true && this.checkboxes == false && { selected: item[this.objectMapping['selected']] }), (this.template && { template: this.template }), (this.checkboxes && { checkboxes: true }), (this.size && { size: this.size }), { itemObject: item, objectMapping: this.objectMapping })));
+    return (h("bcm-listbox-item", Object.assign({ _internal_id: this._internal_id, id: String(item[this.objectMapping['id']]), text: item[this.objectMapping['text']] }, (item[this.objectMapping['icon']] && { icon: item[this.objectMapping['icon']] }), (item[this.objectMapping['avatar']] && { avatar: item[this.objectMapping['avatar']] }), (item[this.objectMapping['avatarName']] && { avatarName: item[this.objectMapping['avatarName']] }), (item[this.objectMapping['avatarImage']] && { avatarImage: item[this.objectMapping['avatarImage']] }), (item[this.objectMapping['secondaryText']] && { secondaryText: item[this.objectMapping['secondaryText']] }), (item[this.objectMapping['tooltipText']] && { tooltipText: item[this.objectMapping['tooltipText']] }), (Boolean(item[this.objectMapping['checked']]) === Boolean(true) && { checked: Boolean(item[this.objectMapping['checked']]) }), (item[this.objectMapping['disabled']] === true && { disabled: true }), (Boolean(item[this.objectMapping['selected']]) === Boolean(true) && this.checkboxes == false && { selected: Boolean(item[this.objectMapping['selected']]) }), (this.template && { template: this.template }), (this.checkboxes && { checkboxes: true }), (this.size && { size: this.size }), { itemObject: item, objectMapping: this.objectMapping })));
   }
   /**
    * @desc
@@ -949,10 +886,7 @@ const BcmListbox = class {
       customStyles = Object.assign(Object.assign({}, customStyles), { 'height': this.height });
     }
     const captionClasses = classnames('size-1', 'input-caption', 'caption-' + captionType);
-    const labelClasses = classnames('size-1', 'label', {
-      'error': captionType == 'error' ? true : false
-    });
-    return (h(Host, { class: hostClasses, style: customStyles, "bcm-internal-id": this._internal_id }, !innerComponent && label && h("label", { class: labelClasses }, " ", label, " ", required && ('*'), "  "), treeview === true && (h("bcm-treeview", { _internal_id: this._internal_id })), treeview == false && (h("div", { class: bcmListbox, style: customStyles }, search && (h("div", { class: "search", id: "search", style: { 'display': String(showSearch) == 'false' ? 'none' : 'block' } }, h("bcm-search", { _internal_id: this._internal_id, searchPlaceholder: this.searchPlaceholder, searchValue: searchText, "on-bcm-focus": () => this.handleFocus(true), "on-bcm-blur": () => this.handleFocus(false), data: searchData, returnField: returnField, searchFields: searchFields, searchSub: searchSub, clearable: true }), h("bcm-divider", null))), h("div", { id: "bcm-listbox-list", class: "bcm-listbox-list loading", style: customStylesList }, checkboxes && (h("div", { class: classes, id: "checkall" }, h("div", { class: classesContainer, onClick: () => this.handleIndeterminateClick() }, h("div", { class: "check-content" }, indeterminateState == 'indeterminate' && (h("span", { class: "indeterminate" })) || (h("bcm-checkbox", { onClick: (e) => this.handleCheckboxClick(e), checked: checked, noCaption: true }))), h("div", { class: textContent }, "Select All")), h("div", { class: "divider" }, h("bcm-divider", null)))), 
+    return (h(Host, { class: hostClasses, style: customStyles, "bcm-internal-id": this._internal_id }, !innerComponent && label && h("div", null, h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required })), treeview === true && (h("bcm-treeview", { _internal_id: this._internal_id })), treeview == false && (h("div", { class: bcmListbox, style: customStyles }, search && (h("div", { class: "search", id: "search", style: { 'display': String(showSearch) == 'false' ? 'none' : 'block' } }, h("bcm-search", { _internal_id: this._internal_id, searchPlaceholder: this.searchPlaceholder, searchValue: searchText, "on-bcm-focus": () => this.handleFocus(true), "on-bcm-blur": () => this.handleFocus(false), data: searchData, returnField: returnField, searchFields: searchFields, searchSub: searchSub, clearable: true }), h("bcm-divider", null))), h("div", { id: "bcm-listbox-list", class: "bcm-listbox-list loading", style: customStylesList }, checkboxes && (h("div", { class: classes, id: "checkall" }, h("div", { class: classesContainer, onClick: () => this.handleIndeterminateClick() }, h("div", { class: "check-content" }, indeterminateState == 'indeterminate' && (h("span", { class: "indeterminate" })) || (h("bcm-checkbox", { onClick: (e) => this.handleCheckboxClick(e), checked: checked, noCaption: true }))), h("div", { class: textContent }, "Select All")), h("div", { class: "divider" }, h("bcm-divider", null)))), 
     // this.empty == false && (
     h("div", { id: "list-container", class: listContainer, style: listContainerStyle }, this.items.length !== 0 && this.items.map((item) => ((item.type === 'group' ? this.recursiveGroupRenderer(item) : this.itemRenderer(item)))))
     // )
@@ -2307,4 +2241,4 @@ const BcmtreeviewItem = class {
 };
 BcmtreeviewItem.style = treeviewItemCss;
 
-export { BcmEmpty as bcm_empty, BcmListbox as bcm_listbox, BcmListboxGroup as bcm_listbox_group, BcmListboxItem as bcm_listbox_item, Bcmtreeview as bcm_treeview, BcmtreeviewItem as bcm_treeview_item };
+export { BcmListbox as bcm_listbox, BcmListboxGroup as bcm_listbox_group, BcmListboxItem as bcm_listbox_item, Bcmtreeview as bcm_treeview, BcmtreeviewItem as bcm_treeview_item };

package/dist/esm/bcm-modal.entry.js

@@ -0,0 +1,193 @@
+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';
+
+/**
+ * 'status' prop predefined values
+ */
+var StatusProps;
+(function (StatusProps) {
+  StatusProps["info"] = "info";
+  StatusProps["error"] = "error";
+  StatusProps["warning"] = "warning";
+  StatusProps["success"] = "success";
+  StatusProps["none"] = "none";
+})(StatusProps || (StatusProps = {}));
+/**
+ * 'type' prop predefined values
+ */
+var TypeProps;
+(function (TypeProps) {
+  TypeProps["modal"] = "modal";
+  TypeProps["information"] = "information";
+  TypeProps["confirmation"] = "confirmation";
+})(TypeProps || (TypeProps = {}));
+/**
+ * 'type' prop predefined values
+ */
+var OrientationProps;
+(function (OrientationProps) {
+  OrientationProps["portrait"] = "portrait";
+  OrientationProps["landscape"] = "landscape";
+})(OrientationProps || (OrientationProps = {}));
+
+const modalCss = "@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}.modal{display:flex;position:fixed;justify-content:center;align-items:flex-start;top:0;left:0;opacity:0;margin:0;padding:80px 40px 40px;overflow:hidden;overflow-y:auto;background-color:rgba(0, 0, 0, 0.5);box-sizing:border-box;z-index:-1000;width:100vw;height:100vh;visibility:hidden}.modal.show{visibility:visible;top:0;opacity:1;z-index:10500}.overlay{position:fixed;width:100vw;height:100vh;z-index:1;top:0;left:0}.card{display:flex;flex-direction:column;width:100%;box-shadow:0px 4px 12px rgba(0, 0, 0, 0.15);border-radius:2px;background-color:#fff;z-index:2}.card.portrait{max-width:312px}.card.landscape{max-width:475px}.card.small{width:576px}.card.medium{width:768px}.card.large{width:992px}.card.x-large{width:1024px}.card.xx-large{width:1200px}.card.xxx-large{width:1700px}.card.full-width{width:100%}.text-content{font-size:14px;line-height:22px;color:var(--bcm-color-grey-8);padding:0}.title{position:relative;display:flex;align-items:center;justify-content:flex-start;padding-right:24px;font-size:16px;line-height:24px;font-weight:500;color:var(--bcm-color-grey-9)}.title bcm-icon{margin-right:8px}p:not(.with-status){margin:0}p.with-status{padding-left:32px}header{position:relative;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;font-size:16px;line-height:24px;font-weight:500;color:var(--bcm-color-grey-9);background-color:var(--bcm-color-grey-2);border-bottom:1px solid var(--bcm-color-grey-5)}header bcm-icon{cursor:pointer}footer{position:relative;display:flex;align-items:flex-start;justify-content:flex-end;padding:10px 16px;border-top:1px solid var(--bcm-color-grey-5);background-color:var(--bcm-color-grey-2)}footer bcm-button+bcm-button{margin-left:8px}.footer{display:flex;align-items:flex-start;justify-content:flex-end}.footer bcm-button+bcm-button{margin-left:8px}";
+
+/**
+ * @desc
+ * @param str
+ */
+const lowercase = (str) => str.toLowerCase();
+const BcmModal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ok = createEvent(this, "bcm-ok", 7);
+    this.cancel = createEvent(this, "bcm-cancel", 7);
+    this.slotHeader = false;
+    this.slotContent = false;
+    this.slotFooter = false;
+    this.slotHeaderHtml = '';
+    this.slotContentHtml = '';
+    this.slotFooterHtml = '';
+    this.bodyStyleOverflow = '';
+    this.type = TypeProps.modal;
+    this.status = StatusProps.none;
+    this.okText = 'OK';
+    this.cancelText = 'Cancel';
+    this.isShow = false;
+    this.hidden = false;
+    this.size = 'medium';
+    this.fullWidth = false;
+    this.backdrop = true;
+  }
+  /**
+   * @StencilMethod
+   */
+  componentWillLoad() {
+    if (this.type !== TypeProps.modal && this.status === StatusProps.none)
+      this.status = StatusProps.info;
+    // if ( this.el.querySelector('bcm-modal-header')  ) { 
+    //     this.slotHeaderHtml = this.el.querySelector('bcm-modal-header').innerHTML
+    //     this.slotHeader = true 
+    // }
+    // if ( this.el.querySelector('bcm-modal-content') ) { 
+    //     this.slotContentHtml = this.el.querySelector('bcm-modal-content').outerHTML
+    //     this.slotContent = true 
+    // }
+    // if ( this.el.querySelector('bcm-modal-footer')  ) { 
+    //     this.slotFooter = true 
+    // }
+  }
+  componentDidRender() {
+    const slot = this.el.shadowRoot.querySelector('slot').assignedElements();
+    slot.map(el => {
+      if (String(el.tagName).toLowerCase() === 'bcm-modal-header') {
+        el.slot = 'header';
+        this.headerArea = true;
+      }
+      if (String(el.tagName).toLowerCase() === 'bcm-modal-footer') {
+        el.slot = 'footer';
+        this.footerArea = true;
+      }
+    });
+  }
+  /**
+   * @desc
+   * @returns {BcmIcon}
+   */
+  getIcon() {
+    switch (this.status) {
+      case StatusProps.info:
+        return h("bcm-icon", { type: "outlined", icon: "info-circle", size: "medium", color: "prime-blue-6" });
+      case StatusProps.error:
+        return h("bcm-icon", { type: "outlined", icon: "close-circle", size: "medium", color: "red-6" });
+      case StatusProps.warning:
+        return h("bcm-icon", { type: "outlined", icon: "exclamation-circle", size: "medium", color: "warmyellow-6" });
+      case StatusProps.success:
+        return h("bcm-icon", { type: "outlined", icon: "check-circle", size: "medium", color: "green-6" });
+    }
+  }
+  /**
+   * @desc
+   */
+  handleOk() {
+    this.ok.emit();
+    this.isShow = false;
+  }
+  /**
+   * @desc
+   */
+  handleCancel() {
+    this.cancel.emit();
+    this.isShow = false;
+  }
+  /**
+   * @desc
+   * @returns {BcmIcon}
+   */
+  getFooterActions() {
+    return ((this.footerArea && (h("footer", null, " ", h("slot", { name: "footer" }), " "))));
+  }
+  handleSubmit(e) {
+    if (lowercase(e.target.nodeName) === 'bcm-button') {
+      if (e.target.dataDismiss) {
+        this.dismiss();
+      }
+    }
+  }
+  /**
+   * @desc Removes component itself
+   */
+  dismiss() {
+    this.isShow = false;
+    document.querySelector("body").style.overflow = this.bodyStyleOverflow;
+    // this.el.remove()
+  }
+  handleBackdrop() {
+    if (this.backdrop == true) {
+      this.dismiss();
+    }
+  }
+  /**
+   * @desc
+   */
+  async hide() {
+    this.dismiss();
+  }
+  /**
+   * @desc
+   */
+  async show() {
+    this.isShow = true;
+    if (document.querySelector("body").style.overflow != "hidden") {
+      this.bodyStyleOverflow = document.querySelector("body").style.overflow;
+    }
+    document.querySelector("body").style.overflow = "hidden";
+    // const bcmTabs = this.el.querySelector('bcm-tabs')
+    // if ( bcmTabs ) {
+    //     var getActiveTab = await bcmTabs.getActiveTab()
+    //     bcmTabs.active( getActiveTab )
+    // }
+  }
+  keyboardNavigation(e) {
+    if (this.backdrop == true) {
+      const which = e.which || 0;
+      if (which == 27) {
+        e.preventDefault();
+        this.dismiss();
+      }
+    }
+  }
+  render() {
+    const { type, status, headerTitle, isShow, headerArea, size, fullWidth } = this;
+    const cardClasses = classnames('card', status, size, fullWidth ? 'full-width' : null);
+    const modal = classnames('modal', {
+      'show': isShow
+    });
+    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    return (h(Host, { class: hostClasses }, h("div", { class: modal }, h("div", { class: "overlay", onClick: () => this.handleBackdrop() }), h("div", { class: cardClasses }, type === TypeProps.modal && (headerArea && (h("header", null, h("slot", { name: "header" }), " ", h("bcm-icon", { icon: "close", color: "grey-10", onClick: () => this.dismiss() })))), h("div", { class: "text-content" }, type !== TypeProps.modal && (h("span", { class: "title" }, this.getIcon(), headerArea && (h("slot", { name: "header" })), !headerArea && (headerTitle))), h("p", { class: type !== TypeProps.modal ? 'with-status' : '' }, h("slot", null)), type !== TypeProps.modal && this.getFooterActions()), type === TypeProps.modal && (this.getFooterActions())))));
+  }
+  get el() { return getElement(this); }
+};
+BcmModal.style = modalCss;
+
+export { BcmModal as bcm_modal };

package/dist/esm/bcm-popconfirm-box.entry.js

@@ -1,7 +1,7 @@
 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';
 
-const popconfirmBoxCss = "@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}.popconfirm-box{position:relative;}.popconfirm-box .box{position:absolute;display:none;box-sizing:border-box;background-color:#FFFFFF;border:1px solid #FFFFFF;border-radius:2px;z-index:10700;width:230px;filter:drop-shadow(0px 1px 6px rgba(0, 0, 0, 0.25));padding:8px 16px}.popconfirm-box .box .content{display:flex}.popconfirm-box .box .content .icon{margin-right:8px;margin-top:4px}.popconfirm-box .box .buttons{display:flex;justify-content:flex-end;margin-top:8px}.popconfirm-box .box .buttons bcm-button:first-child{margin-right:8px}.popconfirm-box::after{content:\"\";position:absolute;display:none;border:6px solid;z-index:10700}.popconfirm-box.open .box,.popconfirm-box.open::after{display:block}.popconfirm-box.top .box{bottom:100%;margin-bottom:16px}.popconfirm-box.top::after{bottom:100%;margin-bottom:4px;border-color:#FFFFFF transparent transparent transparent}.popconfirm-box.bottom .box{top:100%;margin-top:16px}.popconfirm-box.bottom::after{top:100%;margin-top:4px;border-color:transparent transparent #FFFFFF transparent}.popconfirm-box.left .box{right:100%;margin-right:16px}.popconfirm-box.left::after{right:100%;margin-right:4px;border-color:transparent transparent transparent #FFFFFF}.popconfirm-box.right .box{left:100%;margin-left:16px}.popconfirm-box.right::after{left:100%;margin-left:4px;border-color:transparent #FFFFFF transparent transparent}.popconfirm-box.top.center .box,.popconfirm-box.bottom.center .box{left:50%;transform:translateX(-50%)}.popconfirm-box.top.center::after,.popconfirm-box.bottom.center::after{left:50%;transform:translateX(-50%)}.popconfirm-box.top.start .box,.popconfirm-box.bottom.start .box{left:0}.popconfirm-box.top.start::after,.popconfirm-box.bottom.start::after{left:16px}.popconfirm-box.top.end .box,.popconfirm-box.bottom.end .box{right:0}.popconfirm-box.top.end::after,.popconfirm-box.bottom.end::after{right:16px}.popconfirm-box.left.center .box,.popconfirm-box.right.center .box{top:50%;transform:translateY(-50%)}.popconfirm-box.left.center::after,.popconfirm-box.right.center::after{top:50%;transform:translateY(-50%)}.popconfirm-box.left.start .box,.popconfirm-box.right.start .box{top:0}.popconfirm-box.left.start::after,.popconfirm-box.right.start::after{top:12px}.popconfirm-box.left.end .box,.popconfirm-box.right.end .box{bottom:0}.popconfirm-box.left.end::after,.popconfirm-box.right.end::after{bottom:12px}";
+const popconfirmBoxCss = "@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}.popconfirm-box{position:relative;}.popconfirm-box .box{position:absolute;display:none;box-sizing:border-box;background-color:#FFFFFF;border:1px solid #FFFFFF;border-radius:2px;z-index:10700;width:230px;filter:drop-shadow(0px 1px 6px rgba(0, 0, 0, 0.25));padding:8px 16px}.popconfirm-box .box .content{display:flex}.popconfirm-box .box .content .icon{margin-right:8px;margin-top:4px}.popconfirm-box .box .buttons{display:flex;justify-content:flex-end;margin-top:8px}.popconfirm-box .box .buttons bcm-button:first-child{margin-right:8px}.popconfirm-box::after{content:\"\";position:absolute;display:none;border:6px solid;z-index:10700;pointer-events:none}.popconfirm-box.open .box,.popconfirm-box.open::after{display:block}.popconfirm-box.top .box{bottom:100%;margin-bottom:16px}.popconfirm-box.top::after{bottom:100%;margin-bottom:4px;border-color:#FFFFFF transparent transparent transparent}.popconfirm-box.bottom .box{top:100%;margin-top:16px}.popconfirm-box.bottom::after{top:100%;margin-top:4px;border-color:transparent transparent #FFFFFF transparent}.popconfirm-box.left .box{right:100%;margin-right:16px}.popconfirm-box.left::after{right:100%;margin-right:4px;border-color:transparent transparent transparent #FFFFFF}.popconfirm-box.right .box{left:100%;margin-left:16px}.popconfirm-box.right::after{left:100%;margin-left:4px;border-color:transparent #FFFFFF transparent transparent}.popconfirm-box.top.center .box,.popconfirm-box.bottom.center .box{left:50%;transform:translateX(-50%)}.popconfirm-box.top.center::after,.popconfirm-box.bottom.center::after{left:50%;transform:translateX(-50%)}.popconfirm-box.top.start .box,.popconfirm-box.bottom.start .box{left:0}.popconfirm-box.top.start::after,.popconfirm-box.bottom.start::after{left:16px}.popconfirm-box.top.end .box,.popconfirm-box.bottom.end .box{right:0}.popconfirm-box.top.end::after,.popconfirm-box.bottom.end::after{right:16px}.popconfirm-box.left.center .box,.popconfirm-box.right.center .box{top:50%;transform:translateY(-50%)}.popconfirm-box.left.center::after,.popconfirm-box.right.center::after{top:50%;transform:translateY(-50%)}.popconfirm-box.left.start .box,.popconfirm-box.right.start .box{top:0}.popconfirm-box.left.start::after,.popconfirm-box.right.start::after{top:12px}.popconfirm-box.left.end .box,.popconfirm-box.right.end .box{bottom:0}.popconfirm-box.left.end::after,.popconfirm-box.right.end::after{bottom:12px}";
 
 const statuses = {
   error: ['close-circle', 'red-6'],

package/dist/esm/bcm-popconfirm.entry.js

@@ -1,9 +1,9 @@
 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 { d as delay } from './utils-b7fba7c4.js';
+import { d as delay } from './utils-de9aee67.js';
 import { p as popoverPlacement, a as popoverBoxPlacement } from './popover-placement-a4ab1587.js';
 
-const popconfirmCss = "@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}.popconfirm{position:relative;}.popconfirm .box{position:absolute;display:none;box-sizing:border-box;background-color:#FFFFFF;border:1px solid #FFFFFF;border-radius:2px;z-index:10700;width:230px;filter:drop-shadow(0px 1px 6px rgba(0, 0, 0, 0.25));padding:8px 16px}.popconfirm .box .content{display:flex}.popconfirm .box .content .icon{margin-right:8px;margin-top:4px}.popconfirm .box .buttons{display:flex;justify-content:flex-end;margin-top:8px}.popconfirm .box .buttons bcm-button:first-child{margin-right:8px}.popconfirm::after{content:\"\";position:absolute;display:none;border:6px solid;z-index:10700}.popconfirm.open .box,.popconfirm.open::after{display:block}.popconfirm.top .box{bottom:100%;margin-bottom:16px}.popconfirm.top::after{bottom:100%;margin-bottom:4px;border-color:#FFFFFF transparent transparent transparent}.popconfirm.bottom .box{top:100%;margin-top:16px}.popconfirm.bottom::after{top:100%;margin-top:4px;border-color:transparent transparent #FFFFFF transparent}.popconfirm.left .box{right:100%;margin-right:16px}.popconfirm.left::after{right:100%;margin-right:4px;border-color:transparent transparent transparent #FFFFFF}.popconfirm.right .box{left:100%;margin-left:16px}.popconfirm.right::after{left:100%;margin-left:4px;border-color:transparent #FFFFFF transparent transparent}.popconfirm.top.center .box,.popconfirm.bottom.center .box{left:50%;transform:translateX(-50%)}.popconfirm.top.center::after,.popconfirm.bottom.center::after{left:50%;transform:translateX(-50%)}.popconfirm.top.start .box,.popconfirm.bottom.start .box{left:0}.popconfirm.top.start::after,.popconfirm.bottom.start::after{left:16px}.popconfirm.top.end .box,.popconfirm.bottom.end .box{right:0}.popconfirm.top.end::after,.popconfirm.bottom.end::after{right:16px}.popconfirm.left.center .box,.popconfirm.right.center .box{top:50%;transform:translateY(-50%)}.popconfirm.left.center::after,.popconfirm.right.center::after{top:50%;transform:translateY(-50%)}.popconfirm.left.start .box,.popconfirm.right.start .box{top:0}.popconfirm.left.start::after,.popconfirm.right.start::after{top:12px}.popconfirm.left.end .box,.popconfirm.right.end .box{bottom:0}.popconfirm.left.end::after,.popconfirm.right.end::after{bottom:12px}";
+const popconfirmCss = "@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}.popconfirm{position:relative;}.popconfirm .box{position:absolute;display:none;box-sizing:border-box;background-color:#FFFFFF;border:1px solid #FFFFFF;border-radius:2px;z-index:10700;width:230px;filter:drop-shadow(0px 1px 6px rgba(0, 0, 0, 0.25));padding:8px 16px}.popconfirm .box .content{display:flex}.popconfirm .box .content .icon{margin-right:8px;margin-top:4px}.popconfirm .box .buttons{display:flex;justify-content:flex-end;margin-top:8px}.popconfirm .box .buttons bcm-button:first-child{margin-right:8px}.popconfirm::after{content:\"\";position:absolute;display:none;border:6px solid;z-index:10700;pointer-events:none}.popconfirm.open .box,.popconfirm.open::after{display:block}.popconfirm.top .box{bottom:100%;margin-bottom:16px}.popconfirm.top::after{bottom:100%;margin-bottom:4px;border-color:#FFFFFF transparent transparent transparent}.popconfirm.bottom .box{top:100%;margin-top:16px}.popconfirm.bottom::after{top:100%;margin-top:4px;border-color:transparent transparent #FFFFFF transparent}.popconfirm.left .box{right:100%;margin-right:16px}.popconfirm.left::after{right:100%;margin-right:4px;border-color:transparent transparent transparent #FFFFFF}.popconfirm.right .box{left:100%;margin-left:16px}.popconfirm.right::after{left:100%;margin-left:4px;border-color:transparent #FFFFFF transparent transparent}.popconfirm.top.center .box,.popconfirm.bottom.center .box{left:50%;transform:translateX(-50%)}.popconfirm.top.center::after,.popconfirm.bottom.center::after{left:50%;transform:translateX(-50%)}.popconfirm.top.start .box,.popconfirm.bottom.start .box{left:0}.popconfirm.top.start::after,.popconfirm.bottom.start::after{left:16px}.popconfirm.top.end .box,.popconfirm.bottom.end .box{right:0}.popconfirm.top.end::after,.popconfirm.bottom.end::after{right:16px}.popconfirm.left.center .box,.popconfirm.right.center .box{top:50%;transform:translateY(-50%)}.popconfirm.left.center::after,.popconfirm.right.center::after{top:50%;transform:translateY(-50%)}.popconfirm.left.start .box,.popconfirm.right.start .box{top:0}.popconfirm.left.start::after,.popconfirm.right.start::after{top:12px}.popconfirm.left.end .box,.popconfirm.right.end .box{bottom:0}.popconfirm.left.end::after,.popconfirm.right.end::after{bottom:12px}";
 
 const BcmPopconfirm = class {
   constructor(hostRef) {

package/dist/esm/bcm-popover-box.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-8fe7aea4.js';
 import { c as classnames } from './index-e58a2d48.js';
 
-const popoverBoxCss = "@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}.popover-box{position:relative;}.popover-box .box{position:absolute;display:none;box-sizing:border-box;background-color:#FFFFFF;border:1px solid #FFFFFF;border-radius:2px;z-index:10700;width:230px;filter:drop-shadow(0px 1px 6px rgba(0, 0, 0, 0.25))}.popover-box .box .heading,.popover-box .box .content{display:block}.popover-box .box .heading{padding:4px 16px;border-bottom:1px solid #D9D9D9;color:var(--bcm-color-grey-9)}.popover-box .box .content{padding:8px 16px;color:var(--bcm-color-grey-8)}.popover-box::after{content:\"\";position:absolute;display:none;border:6px solid;z-index:10700}.popover-box.open .box,.popover-box.open::after{display:block}.popover-box.top .box{bottom:100%;margin-bottom:16px}.popover-box.top::after{bottom:100%;margin-bottom:4px;border-color:#FFFFFF transparent transparent transparent}.popover-box.bottom .box{top:100%;margin-top:16px}.popover-box.bottom::after{top:100%;margin-top:4px;border-color:transparent transparent #FFFFFF transparent}.popover-box.left .box{right:100%;margin-right:16px}.popover-box.left::after{right:100%;margin-right:4px;border-color:transparent transparent transparent #FFFFFF}.popover-box.right .box{left:100%;margin-left:16px}.popover-box.right::after{left:100%;margin-left:4px;border-color:transparent #FFFFFF transparent transparent}.popover-box.top.center .box,.popover-box.bottom.center .box{left:50%;transform:translateX(-50%)}.popover-box.top.center::after,.popover-box.bottom.center::after{left:50%;transform:translateX(-50%)}.popover-box.top.start .box,.popover-box.bottom.start .box{left:0}.popover-box.top.start::after,.popover-box.bottom.start::after{left:16px}.popover-box.top.end .box,.popover-box.bottom.end .box{right:0}.popover-box.top.end::after,.popover-box.bottom.end::after{right:16px}.popover-box.left.center .box,.popover-box.right.center .box{top:50%;transform:translateY(-50%)}.popover-box.left.center::after,.popover-box.right.center::after{top:50%;transform:translateY(-50%)}.popover-box.left.start .box,.popover-box.right.start .box{top:0}.popover-box.left.start::after,.popover-box.right.start::after{top:12px}.popover-box.left.end .box,.popover-box.right.end .box{bottom:0}.popover-box.left.end::after,.popover-box.right.end::after{bottom:12px}";
+const popoverBoxCss = "@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}.popover-box{position:relative;}.popover-box .box{position:absolute;display:none;box-sizing:border-box;background-color:#FFFFFF;border:1px solid #FFFFFF;border-radius:2px;z-index:10700;width:230px;filter:drop-shadow(0px 1px 6px rgba(0, 0, 0, 0.25))}.popover-box .box .heading,.popover-box .box .content{display:block}.popover-box .box .heading{padding:4px 16px;border-bottom:1px solid #D9D9D9;color:var(--bcm-color-grey-9)}.popover-box .box .content{padding:8px 16px;color:var(--bcm-color-grey-8)}.popover-box::after{content:\"\";position:absolute;display:none;border:6px solid;z-index:10700;pointer-events:none}.popover-box.open .box,.popover-box.open::after{display:block}.popover-box.top .box{bottom:100%;margin-bottom:16px}.popover-box.top::after{bottom:100%;margin-bottom:4px;border-color:#FFFFFF transparent transparent transparent}.popover-box.bottom .box{top:100%;margin-top:16px}.popover-box.bottom::after{top:100%;margin-top:4px;border-color:transparent transparent #FFFFFF transparent}.popover-box.left .box{right:100%;margin-right:16px}.popover-box.left::after{right:100%;margin-right:4px;border-color:transparent transparent transparent #FFFFFF}.popover-box.right .box{left:100%;margin-left:16px}.popover-box.right::after{left:100%;margin-left:4px;border-color:transparent #FFFFFF transparent transparent}.popover-box.top.center .box,.popover-box.bottom.center .box{left:50%;transform:translateX(-50%)}.popover-box.top.center::after,.popover-box.bottom.center::after{left:50%;transform:translateX(-50%)}.popover-box.top.start .box,.popover-box.bottom.start .box{left:0}.popover-box.top.start::after,.popover-box.bottom.start::after{left:16px}.popover-box.top.end .box,.popover-box.bottom.end .box{right:0}.popover-box.top.end::after,.popover-box.bottom.end::after{right:16px}.popover-box.left.center .box,.popover-box.right.center .box{top:50%;transform:translateY(-50%)}.popover-box.left.center::after,.popover-box.right.center::after{top:50%;transform:translateY(-50%)}.popover-box.left.start .box,.popover-box.right.start .box{top:0}.popover-box.left.start::after,.popover-box.right.start::after{top:12px}.popover-box.left.end .box,.popover-box.right.end .box{bottom:0}.popover-box.left.end::after,.popover-box.right.end::after{bottom:12px}";
 
 const BcmPopoverBox = class {
   constructor(hostRef) {

package/dist/esm/bcm-popover.entry.js

@@ -1,9 +1,9 @@
 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 { d as delay } from './utils-b7fba7c4.js';
+import { d as delay } from './utils-de9aee67.js';
 import { p as popoverPlacement, a as popoverBoxPlacement } from './popover-placement-a4ab1587.js';
 
-const popoverCss = "@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}.popover{position:relative;}.popover .box{position:absolute;display:none;box-sizing:border-box;background-color:#FFFFFF;border:1px solid #FFFFFF;border-radius:2px;z-index:10700;width:230px;filter:drop-shadow(0px 1px 6px rgba(0, 0, 0, 0.25))}.popover .box .heading,.popover .box .content{display:block}.popover .box .heading{padding:4px 16px;border-bottom:1px solid #D9D9D9;color:var(--bcm-color-grey-9)}.popover .box .content{padding:8px 16px;color:var(--bcm-color-grey-8)}.popover::after{content:\"\";position:absolute;display:none;border:6px solid;z-index:10700}.popover.open .box,.popover.open::after{display:block}.popover.top .box{bottom:100%;margin-bottom:16px}.popover.top::after{bottom:100%;margin-bottom:4px;border-color:#FFFFFF transparent transparent transparent}.popover.bottom .box{top:100%;margin-top:16px}.popover.bottom::after{top:100%;margin-top:4px;border-color:transparent transparent #FFFFFF transparent}.popover.left .box{right:100%;margin-right:16px}.popover.left::after{right:100%;margin-right:4px;border-color:transparent transparent transparent #FFFFFF}.popover.right .box{left:100%;margin-left:16px}.popover.right::after{left:100%;margin-left:4px;border-color:transparent #FFFFFF transparent transparent}.popover.top.center .box,.popover.bottom.center .box{left:50%;transform:translateX(-50%)}.popover.top.center::after,.popover.bottom.center::after{left:50%;transform:translateX(-50%)}.popover.top.start .box,.popover.bottom.start .box{left:0}.popover.top.start::after,.popover.bottom.start::after{left:16px}.popover.top.end .box,.popover.bottom.end .box{right:0}.popover.top.end::after,.popover.bottom.end::after{right:16px}.popover.left.center .box,.popover.right.center .box{top:50%;transform:translateY(-50%)}.popover.left.center::after,.popover.right.center::after{top:50%;transform:translateY(-50%)}.popover.left.start .box,.popover.right.start .box{top:0}.popover.left.start::after,.popover.right.start::after{top:12px}.popover.left.end .box,.popover.right.end .box{bottom:0}.popover.left.end::after,.popover.right.end::after{bottom:12px}";
+const popoverCss = "@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}.popover{position:relative;}.popover .box{position:absolute;display:none;box-sizing:border-box;background-color:#FFFFFF;border:1px solid #FFFFFF;border-radius:2px;z-index:10700;width:230px;filter:drop-shadow(0px 1px 6px rgba(0, 0, 0, 0.25))}.popover .box .heading,.popover .box .content{display:block}.popover .box .heading{padding:4px 16px;border-bottom:1px solid #D9D9D9;color:var(--bcm-color-grey-9)}.popover .box .content{padding:8px 16px;color:var(--bcm-color-grey-8)}.popover::after{content:\"\";position:absolute;display:none;border:6px solid;z-index:10700;pointer-events:none}.popover.open .box,.popover.open::after{display:block}.popover.top .box{bottom:100%;margin-bottom:16px}.popover.top::after{bottom:100%;margin-bottom:4px;border-color:#FFFFFF transparent transparent transparent}.popover.bottom .box{top:100%;margin-top:16px}.popover.bottom::after{top:100%;margin-top:4px;border-color:transparent transparent #FFFFFF transparent}.popover.left .box{right:100%;margin-right:16px}.popover.left::after{right:100%;margin-right:4px;border-color:transparent transparent transparent #FFFFFF}.popover.right .box{left:100%;margin-left:16px}.popover.right::after{left:100%;margin-left:4px;border-color:transparent #FFFFFF transparent transparent}.popover.top.center .box,.popover.bottom.center .box{left:50%;transform:translateX(-50%)}.popover.top.center::after,.popover.bottom.center::after{left:50%;transform:translateX(-50%)}.popover.top.start .box,.popover.bottom.start .box{left:0}.popover.top.start::after,.popover.bottom.start::after{left:16px}.popover.top.end .box,.popover.bottom.end .box{right:0}.popover.top.end::after,.popover.bottom.end::after{right:16px}.popover.left.center .box,.popover.right.center .box{top:50%;transform:translateY(-50%)}.popover.left.center::after,.popover.right.center::after{top:50%;transform:translateY(-50%)}.popover.left.start .box,.popover.right.start .box{top:0}.popover.left.start::after,.popover.right.start::after{top:12px}.popover.left.end .box,.popover.right.end .box{bottom:0}.popover.left.end::after,.popover.right.end::after{bottom:12px}";
 
 const BcmPopover = class {
   constructor(hostRef) {

package/dist/esm/bcm-pulldown-group_2.entry.js

@@ -1,6 +1,6 @@
 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 { g as getChilds } from './utils-b7fba7c4.js';
+import { g as getChilds } from './utils-de9aee67.js';
 
 const pulldownGroupCss = "@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}.pulldown-group{--const-padding-vertical-sub:12px;--const-padding-horizontal-sub:40px;--group-shadow:0px 4px 4px rgba(0, 0, 0, 0.25)}.pulldown-group ::slotted(bcm-pulldown-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)}.pulldown-group.open .title{color:var(--bcm-color-prime-blue-6)}.pulldown-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;font-size:14px;line-height:22px;color:var(--bcm-color-grey-7);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)}}.pulldown-group.sub-group .title{padding:var(--const-padding-vertical-sub) var(--const-padding-horizontal-sub);white-space:nowrap}.pulldown-group.sub-group .inner{position:relative;box-shadow:none}.pulldown-group.sub-group.right{position:relative;--nowrap-sub:nowrap}.pulldown-group.sub-group.right .inner{position:absolute;top:0;left:100%;margin-left:2px;box-shadow:var(--group-shadow)}@media screen and (min-width: 576px){.pulldown-group.sub-group.right .inner{position:relative;left:0;box-shadow:none}}";
 

package/dist/esm/bcm-pulldown.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, i as isTargetComponent } from './utils-b7fba7c4.js';
+import { g as getChilds, i as isTargetComponent } from './utils-de9aee67.js';
 
 const pulldownCss = "@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}.pulldown{position:relative;display:flex;align-items:center;box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);background-color:#ffffff}@media screen and (min-width: 576px){.pulldown{flex-direction:column;align-items:flex-start}}@media screen and (min-width: 576px){.pulldown>*{width:100%}}::slotted(*){height:100%}";
 

package/dist/esm/bcm-radio-group.entry.js

@@ -0,0 +1,120 @@
+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';
+
+const groupCss = "@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;margin:0 0 8px 0}:host(.hidden){display:none}:host(.error) label{color:var(--bcm-color-red-6) !important}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}.radio-group{display:flex}.radio-group.horizontal{flex-direction:row;margin-bottom:5px}.radio-group.horizontal ::slotted(bcm-radio:not(:last-of-type)){margin-right:16px}.radio-group.horizontal bcm-radio:not(:last-of-type){margin-right:16px}.radio-group.vertical{flex-direction:column}.radio-group.vertical label{margin-bottom:4px}.radio-group.vertical ::slotted(bcm-radio:not(:last-of-type)){margin-bottom:8px}.radio-group.vertical bcm-radio:not(:last-of-type){margin-bottom:8px}.label{display:flex;flex-direction:column;color:var(--bcm-color-grey-9);padding-right:4px;margin-right:8px;margin-bottom:8px}.caption-area{min-height:20px}.input-caption{display:block}";
+
+const BcmRadioGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.change = createEvent(this, "bcm-change", 7);
+    this.childRadios = [];
+    this.direction = 'horizontal';
+    this.optionType = 'default';
+    this.buttonStyle = 'solid';
+    this.size = 'medium';
+    this.disabled = false;
+    this.hidden = false;
+    this.label = null;
+    this.required = false;
+    this.noCaption = false;
+    this.captionType = 'default';
+    this.radioOptions = [];
+    this.usingSlots = true;
+  }
+  async setData(_data) {
+    setTimeout(() => {
+      this.options = _data;
+    }, 100);
+    return Promise.resolve(true);
+  }
+  async getValue() {
+    return this.value;
+  }
+  async check(value) {
+    this.defaultValue = value;
+    this.value = value;
+  }
+  async setClear() {
+    this.value = '';
+  }
+  async resetCaption() {
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+  }
+  parseOptions(newValue) {
+    if (newValue) {
+      typeof newValue === 'string'
+        ? this.radioOptions = JSON.parse(newValue)
+        : this.radioOptions = newValue;
+      if (this.radioOptions.length > 0)
+        this.usingSlots = false;
+    }
+  }
+  // If checked radio changes, emits change event
+  handleChange(newValue) {
+    this.change.emit(newValue);
+  }
+  // Controls radios styles and states
+  controlRadio(elements) {
+    elements.forEach((radio) => {
+      radio.checked = this.value ? radio.value === this.value : this.defaultValue ? radio.value === this.defaultValue : null;
+      radio.disabled = this.disabled;
+      radio.optionType = this.optionType;
+      radio.buttonStyle = this.buttonStyle;
+      radio.size = this.size;
+      radio.addEventListener('bcm-change', (e) => {
+        e.stopPropagation();
+        if (e.detail.checked) {
+          this.value = radio.value;
+        }
+      }, { once: true });
+    });
+  }
+  connectedCallback() {
+    this.captionCache = this.caption;
+    this.captionTypeCache = this.captionType;
+  }
+  componentWillLoad() {
+    this.parseOptions(this.options);
+  }
+  componentDidRender() {
+    let elements = [];
+    if (this.usingSlots) {
+      elements = this.host.shadowRoot.querySelector('slot').assignedElements();
+      this.childRadios = [];
+      elements.map(el => {
+        String(el.tagName).toLowerCase() == 'bcm-radio' && this.childRadios.push(el);
+      });
+      this.controlRadio(this.childRadios);
+    }
+    else {
+      elements = Array.from(this.host.shadowRoot.querySelectorAll('bcm-radio'));
+      this.controlRadio(elements);
+    }
+  }
+  render() {
+    const { label, required, noCaption, caption, captionError, captionType } = this;
+    const classes = classnames('radio-group', {
+      [this.direction]: this.optionType === 'default'
+    });
+    const hostClasses = classnames(this.hidden ? 'hidden' : null, {
+      'error': captionType == 'error' ? true : false
+    });
+    const captionClasses = classnames('size-1', 'input-caption', 'caption-' + captionType);
+    if (this.radioOptions) {
+      return (h(Host, { class: hostClasses }, label && h("div", null, h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required })), h("div", { class: classes }, this.radioOptions && this.radioOptions.map(radio => (h("bcm-radio", { value: radio.value, disabled: radio.disabled, checked: radio.checked }, " ", radio.label, " "))), h("slot", null)), !noCaption && (h("div", { class: "caption-area" }, captionType == "error"
+        ? h("span", { class: captionClasses }, " ", captionError, " ")
+        : caption && h("span", { class: captionClasses }, " ", caption, " ")))));
+    }
+    return (h(Host, { class: hostClasses }, h("div", { class: classes }, h("slot", null))));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "options": ["parseOptions"],
+    "value": ["handleChange"]
+  }; }
+};
+BcmRadioGroup.style = groupCss;
+
+export { BcmRadioGroup as bcm_radio_group };