bromcom-ui 2.3.63 → 2.3.64

package/dist/bromcom-ui/app-globals-0f993ce5.js

@@ -0,0 +1,3 @@
+const globalScripts = () => {};
+
+export { globalScripts as g };

package/dist/{esm → bromcom-ui}/bcm-alert.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 { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-9dbea026.js';
 import { S as StatusProps, T as TypeProps } from './types-911a8837.js';
+import { c as classnames } from './index-43956e3c.js';
 
 const alertCss = "@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}.alert{display:flex;width:100%;box-sizing:border-box;padding:8px 16px;box-shadow:0px 2px 4px rgba(0, 0, 0, 0.15);border-radius:2px}.alert:not(.full-width){max-width:400px}.alert.has-slot{padding-top:16px;padding-bottom:16px}.alert.has-slot .title{font-size:16px}.alert.info{background-color:var(--bcm-color-blue-1);border:1px solid var(--bcm-color-blue-3)}.alert.error{background-color:var(--bcm-color-red-1);border:1px solid var(--bcm-color-red-3)}.alert.warning{background-color:var(--bcm-color-warmyellow-1);border:1px solid var(--bcm-color-warmyellow-3)}.alert.success{background-color:var(--bcm-color-green-1);border:1px solid var(--bcm-color-green-3)}.alert.banner{border:none}.text-content{width:100%}.title{position:relative;display:flex;align-items:center;padding-right:24px;padding-top:4px;padding-bottom:4px;font-size:14px;color:var(--bcm-color-grey-8)}.title .dismiss{position:absolute;right:0;top:5px;cursor:pointer}.title bcm-icon{margin-right:9px}p{margin-top:8px;margin-bottom:0;font-size:14px;line-height:22px;color:var(--bcm-color-grey-8)}p:not(.visible){display:none}p.hidden{display:none}.icon-content{padding-top:2px;padding-right:16px}";
 

package/dist/{esm → bromcom-ui}/bcm-autocomplete.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 autocompleteCss = "@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;height:fit-content}:host(.hidden){display:none}:host(.full-width){width:100%;height:100%}:host(.full-width) .bcm-autocomplete{max-height:100%;max-width:100%}.bcm-autocomplete{background-color:var(--bcm-color-grey-1);display:flex;flex-direction:column;height:100%;width:100%;min-width:256px;max-width:256px;position:relative}.bcm-autocomplete-result{position:relative}.bcm-autocomplete-result .viewport{position:absolute;overflow:hidden;height:0;transition:height 0.3s ease;background-color:#ffffff;width:100%;z-index:10000}.bcm-autocomplete-result.open .viewport{height:256px}";
 

package/dist/{esm → bromcom-ui}/bcm-avatar.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 avatarCss = "@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}:host(.hidden){display:none}.avatar{background-color:var(--bcm-color-grey-6);color:var(--bcm-color-grey-1);display:flex;justify-content:center;align-items:center;text-transform:uppercase;line-height:normal}.avatar img{width:100%;height:100%}button.avatar{outline:none;border:none;padding:0;margin:0;cursor:pointer}.ellipse,.ellipse>img{border-radius:100%}.square,.square>img{border-radius:2px}.small{width:24px;height:24px}.medium{width:32px;height:32px}.large{width:40px;height:40px}";
 

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

@@ -0,0 +1,45 @@
+import { r as registerInstance, h, f as Host } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
+import { e as extractColor, C as ColorPalette } from './utils-1feb01eb.js';
+
+const badgeCss = "@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}:host(.hidden){display:none}.success{background-color:#52C41A}.error{background-color:#F5222D}.default{background-color:#D9D9D9}.processing{background-color:#4293CF}.warning{background-color:#FA8C16}.badge-basic{padding:0 8px;border:1px solid #FFFFFF;color:var(--bcm-color-grey-1);border-radius:16px;font-size:14px;height:22px;display:inline-flex;align-items:center;justify-content:center}.badge-info{display:inline-flex;align-items:center}.badge-text{color:var(--bcm-color-grey-7);font-size:14px}.badge-dot{display:inline-block;width:8px;height:8px;border:1px solid #FFFFFF;margin-right:8px;border-radius:100%;box-sizing:border-box;margin-bottom:1px}.badge-dot.basic.medium{width:12px;height:12px;margin-bottom:-1px;line-height:1}.badge-dot.basic.large{width:16px;height:16px;margin-bottom:-1px;line-height:1}";
+
+/**
+ * @desc
+ * @param str
+ */
+const lowercase = (str) => str.toLowerCase();
+const BcmBadge = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.type = 'basic';
+    this.status = this.type === 'basic' ? 'error' : 'default';
+    this.hidden = false;
+    this.color = null;
+    this.size = 'small';
+  }
+  handleColor(color) {
+    var returnColor;
+    if (color) {
+      if (color.match(/^#[a-f0-9]{6}$/i) !== null || lowercase(color.substring(0, 3)) === "rgb") {
+        returnColor = color;
+      }
+      else {
+        returnColor = extractColor(ColorPalette, color);
+      }
+      return { backgroundColor: returnColor };
+    }
+  }
+  render() {
+    const dotClass = classnames('badge-dot', this.status, this.type, this.size);
+    if (this.type === 'info') {
+      return (h("div", { class: "badge-info" }, h("span", { class: dotClass, style: this.handleColor(this.color) }), h("span", { class: "badge-text" }, h("slot", null))));
+    }
+    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    return (h(Host, { class: hostClasses }, !this.value ? h("span", { class: dotClass, style: this.handleColor(this.color) })
+      : (h("span", { class: `badge-basic ${this.status}` }, " ", this.value, " "))));
+  }
+};
+BcmBadge.style = badgeCss;
+
+export { BcmBadge as bcm_badge };

package/dist/{esm → bromcom-ui}/bcm-breadcrumb.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 breadcrumbCss = "@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}*{box-sizing:border-box}:host{display:inline-block}:host(.hidden){display:none}::-webkit-details-marker{display:none}.breadcrumb{margin:0;padding:0;list-style-type:none;display:flex}.breadcrumb li+li::before{content:\"/\";display:inline-block;text-align:center;color:var(--bcm-color-grey-7);width:24px}.breadcrumb-item{font-size:14px;display:inline-flex;color:var(--bcm-color-grey-7)}.breadcrumb-item:last-child .non-link-item{color:var(--bcm-color-grey-8)}.breadcrumb-item .non-link-item{display:inline-flex}.breadcrumb-item .non-link-item bcm-icon{margin-right:4px}.dropdown{position:relative}.dropdown summary{display:inline-flex;align-items:center;cursor:pointer}.dropdown summary:focus{outline:none}.dropdown summary:hover{color:var(--bcm-color-prime-blue-6)}.dropdown summary:active{color:var(--bcm-color-grey-8)}.dropdown summary.open{color:var(--bcm-color-grey-8)}.dropdown summary bcm-icon{margin-left:4px}.dropdown-menu{position:absolute;min-width:140px;background-color:var(--bcm-color-grey-1);box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);margin-top:4px}.dropdown-menu .dropdown-item{display:flex;padding:4px 8px}.dropdown-menu .dropdown-item bcm-link{width:100%}";
 

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

@@ -0,0 +1,242 @@
+import { r as registerInstance, h, f as Host, g as getElement } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
+
+/**
+ * 'type' prop variantOption
+ */
+const variantOptions = {
+  save: {
+    text: "Save",
+    class: "success",
+    icon: "save",
+    iconPosition: "prefix",
+  },
+  ok: {
+    text: "Ok",
+    class: "success",
+    icon: "check",
+    iconPosition: "prefix",
+  },
+  new: {
+    text: "New",
+    class: "success",
+    icon: "plus",
+    iconPosition: "prefix",
+  },
+  add: {
+    text: "Add",
+    class: "success",
+    icon: "plus",
+    iconPosition: "prefix",
+  },
+  create: {
+    text: "Create",
+    class: "success",
+    icon: "form",
+    iconPosition: "prefix",
+  },
+  prev: {
+    text: "Prev",
+    class: "",
+    icon: "arrow-left",
+    iconPosition: "prefix",
+  },
+  next: {
+    text: "Next",
+    class: "",
+    icon: "arrow-right",
+    iconPosition: "suffix",
+  },
+  apply: {
+    text: "Apply",
+    class: "",
+    icon: "check-circle",
+    iconPosition: "prefix",
+  },
+  submit: {
+    text: "Submit",
+    class: "",
+    icon: "save",
+    iconPosition: "prefix",
+  },
+  send: {
+    text: "Send",
+    class: "success",
+    icon: "send",
+    iconPosition: "prefix",
+  },
+  delete: {
+    text: "Delete",
+    class: "warning",
+    icon: "delete",
+    iconPosition: "prefix",
+  },
+  cancel: {
+    text: "Cancel",
+    class: "warning",
+    icon: "close",
+    iconPosition: "prefix",
+  },
+  decline: {
+    text: "Decline",
+    class: "warning",
+    icon: "stop",
+    iconPosition: "prefix",
+  },
+  close: {
+    text: "Close",
+    class: "warning",
+    icon: "close-circle",
+    iconPosition: "prefix",
+  },
+  archive: {
+    text: "Archive",
+    class: "warning",
+    icon: "folder-open",
+    iconPosition: "prefix",
+  },
+  remove: {
+    text: "Remove",
+    class: "warning",
+    icon: "minus-circle",
+    iconPosition: "prefix",
+  },
+  edit: {
+    text: "Edit",
+    class: "",
+    icon: "edit",
+    iconPosition: "prefix",
+  },
+  export: {
+    text: "Export",
+    class: "",
+    icon: "export",
+    iconPosition: "prefix",
+  },
+  import: {
+    text: "Import",
+    class: "",
+    icon: "import",
+    iconPosition: "prefix",
+  },
+  filter: {
+    text: "Filter",
+    class: "",
+    icon: "filter",
+    iconPosition: "prefix",
+  },
+  update: {
+    text: "Update",
+    class: "",
+    icon: "sync",
+    iconPosition: "prefix",
+  },
+  download: {
+    text: "Download",
+    class: "",
+    icon: "download",
+    iconPosition: "prefix",
+  },
+};
+/**
+ * 'type' prop variant
+ */
+var VariantProps;
+(function (VariantProps) {
+  VariantProps["save"] = "save";
+  VariantProps["ok"] = "ok";
+  VariantProps["new"] = "new";
+  VariantProps["add"] = "add";
+  VariantProps["create"] = "create";
+  VariantProps["apply"] = "apply";
+  VariantProps["prev"] = "prev";
+  VariantProps["next"] = "next";
+  VariantProps["send"] = "send";
+  VariantProps["delete"] = "delete";
+  VariantProps["cancel"] = "cancel";
+  VariantProps["decline"] = "decline";
+  VariantProps["close"] = "close";
+  VariantProps["archive"] = "archive";
+  VariantProps["remove"] = "remove";
+  VariantProps["edit"] = "edit";
+  VariantProps["export"] = "export";
+  VariantProps["import"] = "import";
+  VariantProps["filter"] = "filter";
+  VariantProps["update"] = "update";
+  VariantProps["download"] = "download";
+})(VariantProps || (VariantProps = {}));
+const iconSizes = {
+  default: {
+    large: 16,
+    medium: 14,
+    small: 14,
+  },
+  iconOnly: {
+    large: 20,
+    medium: 18,
+    small: 16,
+  },
+};
+
+const buttonsCss = "@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;width:fit-content}:host(.hidden){display:none}:host(.full-width){width:100%}.button{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;border-radius:2px;position:relative;margin:0;padding:0}.button.full-width{width:100%}.button.full-width.variant span{flex: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{color:var(--bcm-color-grey-1);background-color:var(--bcm-color-prime-blue-6);border:1px solid var(--bcm-color-prime-blue-6)}.solid .loading{background-color:var(--bcm-color-prime-blue-6)}.solid.outline{color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-5)}.solid.outline .loading{background-color:var(--bcm-color-grey-1)}.solid.outline:hover,.solid.outline:focus{color:var(--bcm-color-prime-blue-5);background-color:var(--bcm-color-grey-1)}.solid.outline:active{color:var(--bcm-color-prime-blue-7);background-color:var(--bcm-color-grey-1)}.solid:hover,.solid:focus{background-color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.solid:active{background-color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.solid: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}.ghost{color:var(--bcm-color-prime-blue-6);background-color:transparent;border:1px solid var(--bcm-color-prime-blue-6)}.ghost .loading{background-color:var(--bcm-color-grey-1)}.ghost.outline{color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-1)}.ghost:hover,.ghost:focus{color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.ghost:active{color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.ghost:disabled{color:var(--bcm-color-grey-6);border-color:var(--bcm-color-grey-5);cursor:not-allowed}.variant.large bcm-icon.prefix{margin-right:4px}.variant span{flex:1}.variant.success.solid{color:var(--bcm-color-grey-1);background-color:var(--bcm-color-bc-green-5);border:1px solid var(--bcm-color-bc-green-5)}.variant.success.solid .loading{background-color:var(--bcm-color-bc-green-5)}.variant.success.solid.outline{color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-5)}.variant.success.solid.outline .loading{background-color:var(--bcm-color-grey-1)}.variant.success.solid.outline:hover,.variant.success.solid.outline:focus{color:var(--bcm-color-bc-green-4);background-color:var(--bcm-color-grey-1)}.variant.success.solid.outline:active{color:var(--bcm-color-bc-green-6);background-color:var(--bcm-color-grey-1)}.variant.success.solid:hover,.variant.success.solid:focus{background-color:var(--bcm-color-bc-green-4);border-color:var(--bcm-color-bc-green-4)}.variant.success.solid:active{background-color:var(--bcm-color-bc-green-6);border-color:var(--bcm-color-bc-green-6)}.variant.success.solid: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}.variant.success.ghost{color:var(--bcm-color-bc-green-5);background-color:transparent;border:1px solid var(--bcm-color-bc-green-5)}.variant.success.ghost .loading{background-color:var(--bcm-color-grey-1)}.variant.success.ghost.outline{color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-1)}.variant.success.ghost:hover,.variant.success.ghost:focus{color:var(--bcm-color-bc-green-4);border-color:var(--bcm-color-bc-green-4)}.variant.success.ghost:active{color:var(--bcm-color-bc-green-6);border-color:var(--bcm-color-bc-green-6)}.variant.success.ghost:disabled{color:var(--bcm-color-grey-6);border-color:var(--bcm-color-grey-5);cursor:not-allowed}.variant.warning.solid{color:var(--bcm-color-grey-1);background-color:var(--bcm-color-bc-red-5);border:1px solid var(--bcm-color-bc-red-5)}.variant.warning.solid .loading{background-color:var(--bcm-color-bc-red-5)}.variant.warning.solid.outline{color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-5)}.variant.warning.solid.outline .loading{background-color:var(--bcm-color-grey-1)}.variant.warning.solid.outline:hover,.variant.warning.solid.outline:focus{color:var(--bcm-color-bc-red-4);background-color:var(--bcm-color-grey-1)}.variant.warning.solid.outline:active{color:var(--bcm-color-bc-red-6);background-color:var(--bcm-color-grey-1)}.variant.warning.solid:hover,.variant.warning.solid:focus{background-color:var(--bcm-color-bc-red-4);border-color:var(--bcm-color-bc-red-4)}.variant.warning.solid:active{background-color:var(--bcm-color-bc-red-6);border-color:var(--bcm-color-bc-red-6)}.variant.warning.solid: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}.variant.warning.ghost{color:var(--bcm-color-bc-red-5);background-color:transparent;border:1px solid var(--bcm-color-bc-red-5)}.variant.warning.ghost .loading{background-color:var(--bcm-color-grey-1)}.variant.warning.ghost.outline{color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-1)}.variant.warning.ghost:hover,.variant.warning.ghost:focus{color:var(--bcm-color-bc-red-4);border-color:var(--bcm-color-bc-red-4)}.variant.warning.ghost:active{color:var(--bcm-color-bc-red-6);border-color:var(--bcm-color-bc-red-6)}.variant.warning.ghost:disabled{color:var(--bcm-color-grey-6);border-color:var(--bcm-color-grey-5);cursor:not-allowed}.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}.ghost-link{width:auto;min-width:40px;color:var(--bcm-color-prime-blue-6);background-color:transparent}.ghost-link .loading{background-color:var(--bcm-color-grey-1)}.ghost-link.outline{color:var(--bcm-color-grey-1)}.ghost-link:hover,.ghost-link:focus{color:var(--bcm-color-prime-blue-5)}.ghost-link:active{color:var(--bcm-color-prime-blue-7)}.ghost-link:disabled{color:var(--bcm-color-grey-6);cursor:not-allowed}.ghost-link.large bcm-icon.prefix{margin-right:8px}.ghost-link.large:not(.rounded){padding-left:8px}.ghost-link.large:not(.rounded):not(.with_suffix){padding-right:5px}.ghost-link.rounded{border-radius:2px}.solid-link,.link{width:auto;min-width:40px;color:var(--bcm-color-grey-1);background-color:var(--bcm-color-prime-blue-6)}.solid-link .loading,.link .loading{background-color:var(--bcm-color-prime-blue-6)}.solid-link.outline,.link.outline{color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1)}.solid-link.outline .loading,.link.outline .loading{background-color:var(--bcm-color-grey-1)}.solid-link.outline:hover,.solid-link.outline:focus,.link.outline:hover,.link.outline:focus{color:var(--bcm-color-prime-blue-5)}.solid-link.outline:active,.link.outline:active{color:var(--bcm-color-prime-blue-7)}.solid-link:hover,.solid-link:focus,.link:hover,.link:focus{background-color:var(--bcm-color-prime-blue-5)}.solid-link:active,.link:active{background-color:var(--bcm-color-prime-blue-7)}.solid-link:disabled,.link:disabled{color:var(--bcm-color-grey-6) !important;background-color:var(--bcm-color-grey-3) !important;cursor:not-allowed}.solid-link.large bcm-icon.prefix,.link.large bcm-icon.prefix{margin-right:8px}.solid-link.large:not(.rounded),.link.large:not(.rounded){padding-left:8px}.solid-link.large:not(.rounded):not(.with_suffix),.link.large:not(.rounded):not(.with_suffix){padding-right:5px}.solid-link.rounded,.link.rounded{border-radius:2px}:host-context(.split_summary.open) .solid{background-color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}:host-context(.split_summary.open) .solid.outline{color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7);background-color:var(--bcm-color-grey-1)}:host-context(.split_summary) .large:not(.rounded) bcm-icon.prefix{margin-right:4px}:host-context(.split_summary) .large:not(.rounded) bcm-icon.suffix{margin-left:4px}";
+
+const BcmButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.kind = 'solid';
+    this.size = 'medium';
+    this.disabled = false;
+    this.outline = false;
+    this.iconPosition = 'prefix';
+    this.loading = false;
+    this.type = 'button';
+    this.hidden = false;
+    this.dataDismiss = false;
+    this.fullWidth = false;
+  }
+  handleOnClick(e) {
+    if (this.host.contains(e.target)) {
+      if (this.disabled) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    }
+  }
+  render() {
+    const { size, kind, disabled, outline, icon, iconPosition, href, target, loading, variant, fullWidth } = this;
+    const isIconOnly = this.host.childNodes.length < 1 && this.icon ? true : false;
+    const isSuffixExist = this.host.querySelectorAll('[slot="suffix"]').length > 0;
+    const iconSize = isIconOnly ? iconSizes.iconOnly[size] : iconSizes.default[size];
+    const Component = (href && !disabled) ? 'a' : 'button';
+    const hostClasses = classnames(this.hidden ? 'hidden' : null, {
+      'full-width': fullWidth
+    });
+    const classes = classnames('button', size, kind, {
+      'size-2': size === 'small' || size === 'medium',
+      'size-3': size === 'large',
+      'rounded': isIconOnly,
+      'outline': outline,
+      'with_suffix': isSuffixExist,
+      'full-width': fullWidth
+    });
+    if (variant in VariantProps) {
+      const classes = classnames('button', size, kind, 'variant', variantOptions[variant].class, {
+        'size-2': size === 'small' || size === 'medium',
+        'size-3': size === 'large',
+        'outline': outline,
+        'full-width': fullWidth
+      });
+      const icon = variantOptions[variant].icon;
+      const iconPosition = variantOptions[variant].iconPosition;
+      return (h(Host, { class: hostClasses }, h(Component, { class: classes, disabled: disabled, href: href, target: target }, loading && h("div", { class: "loading" }, " ", h("bcm-icon", { type: "animated", class: "prefix", icon: "loading", size: iconSize }), " "), icon && iconPosition === "prefix" && h("bcm-icon", { type: "outlined", class: "prefix", icon: icon, size: iconSize }), h("span", null, variantOptions[variant].text), icon && iconPosition === "suffix" && h("bcm-icon", { type: "outlined", class: "suffix", icon: icon, size: iconSize }))));
+    }
+    else if (isIconOnly) {
+      return (h(Host, { class: hostClasses }, h(Component, { class: classes, disabled: disabled, href: href, target: target }, loading && h("div", { class: "loading" }, " ", h("bcm-icon", { type: "animated", class: "prefix", icon: "loading", size: iconSize }), " "), h("bcm-icon", { icon: icon, size: iconSize, type: "outlined" }))));
+    }
+    return (h(Host, { class: hostClasses }, h(Component, { class: classes, disabled: disabled, href: href, target: target }, loading && h("div", { class: "loading" }, " ", h("bcm-icon", { type: "animated", class: "prefix", icon: "loading", size: iconSize }), " "), icon && iconPosition === "prefix" && h("bcm-icon", { type: "outlined", class: "prefix", icon: icon, size: iconSize }), h("slot", null), icon && iconPosition === "suffix" && h("bcm-icon", { type: "outlined", class: "suffix", icon: icon, size: iconSize }), h("slot", { name: "suffix" }))));
+  }
+  get host() { return getElement(this); }
+};
+BcmButton.style = buttonsCss;
+
+export { BcmButton as bcm_button };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-8fe7aea4.js';
+import { r as registerInstance, h, f as Host } from './index-9dbea026.js';
 
 const BcmCardFooter = class {
   constructor(hostRef) {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-8fe7aea4.js';
+import { r as registerInstance, h, f as Host } from './index-9dbea026.js';
 
 const BcmCardHeader = class {
   constructor(hostRef) {

package/dist/{esm → bromcom-ui}/bcm-card.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 cardCss = "@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%}:host(.hidden){display:none}.card{width:100%;background-color:var(--bcm-color-grey-1);border:1px solid var(--bcm-color-grey-5);border-radius:2px}.card.medium .header,.card.medium .footer{padding:16px 24px}.card.medium .card-body{padding:24px}.card.small .header,.card.small .footer{padding:8px 16px}.card.small .card-body{padding:16px}.card .header{border-bottom:1px solid #D9D9D9}.card .footer{border-top:1px solid #D9D9D9}";
 

package/dist/{esm → bromcom-ui}/bcm-checkbox-group.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 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;width:100%}:host(.hidden){display:none}:host(.error) .label{color:var(--bcm-color-red-6) !important}.group-container{display:flex;gap:24px}.group-container.vertical{gap:unset;flex-direction:column}.group-container.button{gap:unset}.group-container.full-width{max-width:100%}.indeterminate{padding:0 0 16px 0;margin-bottom:16px;border-bottom:1px solid #efefef;}.indeterminate input{display:none}.indeterminate label{display:flex;align-items:center;font-size:14px;color:var(--bcm-color-grey-8);cursor:pointer}.indeterminate label .icon-checked{display:none}.indeterminate span{position:relative;display:flex;align-items:center;justify-content:center;width:16px;height:16px;border:1px solid #D9D9D9;margin-right:8px;border-radius:2px}.indeterminate span:after{content:\"\";position:absolute;top:50%;left:50%;width:10px;height:10px;background-color:var(--bcm-color-prime-blue-6);transform:translate(-50%, -50%);opacity:0}.indeterminate bcm-icon{filter:brightness(0) invert(1)}.indeterminate input[disabled]+label{cursor:not-allowed}.indeterminate input[disabled]+label span{background-color:var(--bcm-color-grey-3);border-color:var(--bcm-color-grey-5)}.indeterminate input[disabled]+label span:after{background-color:var(--bcm-color-grey-6)}.indeterminate input[disabled]+label bcm-icon{filter:brightness(0);opacity:0.3}.indeterminate input:not([disabled])+label:hover span{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}.indeterminate.bcm-uncheck label span{background-color:#ffffff}.indeterminate.bcm-determinate bcm-icon{display:block}.indeterminate.bcm-determinate label span{background-color:var(--bcm-color-prime-blue-6);border-color:transparent}.indeterminate.bcm-determinate label span:after{opacity:0}.indeterminate.bcm-indeterminate bcm-icon{display:none !important}.indeterminate.bcm-indeterminate label span{background-color:#ffffff}.indeterminate.bcm-indeterminate label span:after{opacity:1}.label{display:flex;flex-direction:column;color:var(--bcm-color-grey-9);margin-bottom:8px}";
 

package/dist/{cjs/bcm-checkbox.cjs.entry.js → bromcom-ui/bcm-checkbox-lite.entry.js}

@@ -1,143 +1,43 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ce8878ec.js');
-const index$1 = require('./index-2f62bdaf.js');
-const colors = require('./colors-7fb8d76f.js');
-const utils = require('./utils-60414768.js');
-
-/**
- * 'color' prop predefined values
- */
-var ColorProps;
-(function (ColorProps) {
-  ColorProps["black"] = "black";
-  ColorProps["white"] = "white";
-  ColorProps["prime-blue"] = "prime-blue";
-  ColorProps["grey"] = "grey";
-  ColorProps["blue"] = "blue";
-  ColorProps["warmyellow"] = "warmyellow";
-  ColorProps["yellow"] = "yellow";
-  ColorProps["limegreen"] = "limegreen";
-  ColorProps["red"] = "red";
-  ColorProps["darkorange"] = "darkorange";
-  ColorProps["orange"] = "orange";
-  ColorProps["green"] = "green";
-  ColorProps["turquosie"] = "turquosie";
-  ColorProps["cobaltblue"] = "cobaltblue";
-  ColorProps["magenta"] = "magenta";
-  ColorProps["purple"] = "purple";
-  ColorProps["bc-red"] = "bc-red";
-  ColorProps["bc-blue"] = "bc-blue";
-  ColorProps["bc-green"] = "bc-green";
-  ColorProps["bc-orange"] = "bc-orange";
-})(ColorProps || (ColorProps = {}));
+import { r as registerInstance, h, f as Host, g as getElement } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
 
 const checkboxCss = "@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}input{display:none}.svg-icon{filter:brightness(0) invert(1);width:12px;height:12px}label{display:flex;align-items:flex-start;font-size:14px;color:var(--bcm-color-grey-8);cursor:pointer}label span.icon{display:flex;align-items:center;justify-content:center;min-width:16px;min-height:16px;border:1px solid #D9D9D9;margin-right:8px;border-radius:2px;margin-top:2px;background-color:var(--bcm-color-grey-1)}:host(.indeterminate) label span.icon{position:relative}:host(.indeterminate) label span.icon::after{content:\"\";position:absolute;top:50%;left:8px;width:10px;height:10px;background-color:var(--bcm-color-prime-blue-6);transform:translate(-50%, -50%);opacity:1;z-index:1}:host(.indeterminate) label span.icon::before{content:\"\";position:absolute;top:-1px;left:-1px;width:16px;height:100%;border-radius:2px;background-color:var(--bcm-color-grey-1);border:1px solid var(--bcm-color-grey-5);opacity:1;z-index:1}:host(.indeterminate) label span.icon:hover:not(.disabled):before{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}input:checked+label span.icon{background-color:var(--bcm-color-prime-blue-6);border-color:transparent}input:checked+label .icon-checked{display:block}bcm-icon{filter:brightness(0) invert(1)}input[disabled]+label{cursor:not-allowed}input[disabled]+label span.icon{background-color:var(--bcm-color-grey-3);border-color:var(--bcm-color-grey-5)}input[disabled]+label bcm-icon{filter:brightness(0);opacity:0.3}input:not([disabled])+label:hover span.icon{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}:host(.error) input:not([disabled])+label span.icon{border-color:var(--bcm-color-red-6)}.caption-area{margin-bottom:8px;min-height:20px;display:block}.input-caption{display:block}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}.radio-button{background-color:var(--bcm-color-grey-1);color:var(--bcm-color-grey-8);border:1px solid var(--bcm-color-grey-5);padding:0 16px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.radio-button>span.icon{display:none}.radio-button>span.slot{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;user-select:none}.radio-button:hover:not(.disabled){color:var(--bcm-color-prime-blue-5)}.radio-button:active:not(.disabled){color:var(--bcm-color-prime-blue-7)}.radio-button.disabled{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-6);cursor:not-allowed}.radio-button.checked.disabled{background-color:var(--bcm-color-grey-4);color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-5)}.radio-button.checked.solid{color:var(--bcm-color-grey-1);background-color:var(--bcm-color-prime-blue-6);border-color:var(--bcm-color-prime-blue-6)}.radio-button.checked.solid:hover{background-color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.radio-button.checked.solid:active{background-color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.radio-button.checked.outline{background-color:var(--bcm-color-grey-1);color:var(--bcm-color-prime-blue-6);border-color:var(--bcm-color-prime-blue-6)}.radio-button.checked.outline:hover{color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.radio-button.checked.outline:active{color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.radio-button.large{height:40px}.radio-button.medium{height:32px}.radio-button.small{height:24px}";
 
-const BcmCheckbox = class {
+const BcmCheckboxLite = class {
   constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.blur = index.createEvent(this, "bcm-blur", 7);
-    this.focus = index.createEvent(this, "bcm-focus", 7);
-    this.change = index.createEvent(this, "bcm-change", 7);
+    registerInstance(this, hostRef);
     /**
      * Component Properties
      */
     this.value = '';
     this.name = 'checkbox';
     this.checked = false;
+    this.indeterminate = false;
     this.disabled = false;
     this.readOnly = false;
     this.hidden = false;
     this.required = false;
-    this.optionType = 'default';
-    this.buttonStyle = 'solid';
-    this.size = 'medium';
     this.noCaption = false;
     this.captionType = 'default';
   }
-  /**
-  * @ComponentMethod
-  */
-  connectedCallback() {
-    this.handleChange = this.handleChange.bind(this);
-    this.captionCache = this.caption;
-    this.captionTypeCache = this.captionType;
-  }
-  async setClear() {
-    if (this.inputElement.checked == true) {
-      this.inputElement.checked = false;
-      this.handleChange();
-    }
-  }
-  async resetCaption() {
-    this.caption = this.captionCache;
-    this.captionType = this.captionTypeCache;
-    this.captionError = null;
-  }
-  componentDidLoad() {
-    this.value = this.inputElement.checked;
-    this.checked = this.value;
-  }
-  /**
-   * @desc
-   * @param event
-   * @returns
-   */
-  handleChange() {
-    this.value = this.inputElement.checked;
-    this.checked = this.value;
-    this.change.emit({
-      name: this.name,
-      value: this.value
-    });
-  }
-  handleFocus() {
-    this.focus.emit();
-  }
-  handleBlur() {
-    this.blur.emit();
-  }
-  /**
-   * @desc
-   * @param name -
-   * @returns {void}
-   */
-  async check(uncheck) {
-    this.inputElement.checked = uncheck;
-    this.handleChange();
-  }
-  getColor(color) {
-    if (this.color !== 'default' && this.optionType == 'button' && this.checked)
-      return {
-        // color:              extractColor(ColorPalette, ColorProps[color] + '-6'),
-        borderColor: utils.extractColor(colors.ColorPalette, ColorProps[color] + '-5'),
-        backgroundColor: utils.extractColor(colors.ColorPalette, ColorProps[color] + '-5')
-      };
-  }
+  connectedCallback() { }
+  disconnectedCallback() { }
+  componentWillLoad() { }
+  componentDidLoad() { }
+  componentWillRender() { }
+  componentDidRender() { }
+  componentWillUpdate() { }
+  componentDidUpdate() { }
   render() {
-    const { disabled, checked, readOnly, name, handleChange, required, caption, captionError, captionType, noCaption, buttonStyle, size, optionType } = this;
-    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null, {
-      'error': captionType == 'error' ? true : false
-    });
-    const captionClasses = index$1.classnames('size-1', 'input-caption', 'caption-' + captionType);
-    const defaultClasses = index$1.classnames();
-    const buttonClasses = index$1.classnames('radio-button', buttonStyle, size, {
-      'size-2': size === 'small' || size === 'medium',
-      'size-3': size === 'large',
-      'checked': checked,
-      'disabled': disabled,
+    const { disabled, checked, readOnly, name, required } = this;
+    const hostClasses = classnames(this.hidden ? 'hidden' : null, {
+      'indeterminate': this.indeterminate
     });
-    var fontColor = utils.extractColor(colors.ColorPalette, ColorProps[this.color] + '-6');
-    var style = "<style>.radio-button:not(.checked):hover{color: " + fontColor + "} </style>";
-    return (index.h(index.Host, { class: hostClasses, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }, index.h("input", { id: name, type: "checkbox", checked: checked, disabled: disabled, required: required, readOnly: readOnly, onChange: handleChange, ref: el => (this.inputElement = el) }), optionType == 'button' && (index.h("span", { innerHTML: style })), index.h("label", { title: optionType == 'button' ? this.el.innerHTML : null, htmlFor: name, class: optionType == 'default' ? defaultClasses : buttonClasses, style: this.getColor(this.color) }, index.h("span", { class: "icon" }, index.h("bcm-icon", { class: "icon-checked", icon: "component-check", size: "small", type: "default" })), index.h("span", { class: "slot" }, index.h("slot", null))), !noCaption && (index.h("div", { class: "caption-area" }, captionType == "error"
-      ? index.h("span", { class: captionClasses }, " ", captionError, " ")
-      : caption && index.h("span", { class: captionClasses }, " ", caption, " ")))));
+    const iconClasses = classnames('icon');
+    return (h(Host, { class: hostClasses }, h("input", { id: name, type: "checkbox", checked: checked, disabled: disabled, required: required, readOnly: readOnly }), h("label", { htmlFor: name }, h("span", { class: iconClasses }, h("svg", { class: "svg-icon icon-checked", width: "11", height: "9", viewBox: "0 0 11 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1.91308 4.03516H1.91326C1.99256 4.03525 2.07081 4.05331 2.14213 4.08798C2.21341 4.12262 2.27591 4.17295 2.32497 4.2352L1.91308 4.03516ZM1.91308 4.03516H1.09394C0.890308 4.03516 0.776602 4.26975 0.902321 4.4292L0.902371 4.42927L4.11214 8.49567L4.11218 8.49573C4.32247 8.76188 4.72568 8.76114 4.93667 8.49617L4.93708 8.49566L10.6597 1.24398C10.6598 1.24378 10.66 1.24358 10.6602 1.24338C10.7884 1.08295 10.6699 0.85 10.4689 0.85H9.6498C9.48941 0.85 9.33668 0.9235 9.2376 1.05044C9.23751 1.05055 9.23742 1.05066 9.23734 1.05077L4.52403 7.02157M1.91308 4.03516L4.52403 7.02157M4.52403 7.02157L2.32506 4.23531L4.52403 7.02157Z", fill: "#BFBFBF", stroke: "#BFBFBF", "stroke-width": "0.3" }))))));
   }
-  get el() { return index.getElement(this); }
+  get el() { return getElement(this); }
 };
-BcmCheckbox.style = checkboxCss;
+BcmCheckboxLite.style = checkboxCss;
 
-exports.bcm_checkbox = BcmCheckbox;
+export { BcmCheckboxLite as bcm_checkbox_lite };

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

@@ -1,7 +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 { C as ColorPalette } from './colors-7c7b35e9.js';
-import { e as extractColor } from './utils-de9aee67.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 { e as extractColor, C as ColorPalette } from './utils-1feb01eb.js';
 
 /**
  * 'color' prop predefined values

package/dist/bromcom-ui/bcm-collapse-group.entry.js

@@ -0,0 +1,44 @@
+import { r as registerInstance, h, f as Host, g as getElement } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
+
+const BcmCollapseGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.openId = null;
+    this.borderless = false;
+    this.open = false;
+    this.multiple = false;
+    this.hidden = false;
+  }
+  handleOpen(e) {
+    if (this.el === e.target.parentElement) {
+      const openId = e.detail;
+      this.el.querySelectorAll('bcm-collapse').forEach(el => {
+        if (this.multiple == false) {
+          el.id === openId ? el.open = true : el.open = false;
+        }
+        else {
+          el.id === openId && (el.open = el.open == true ? true : false);
+        }
+      });
+    }
+  }
+  componentDidLoad() {
+    const childs = this.el.querySelectorAll("bcm-collapse");
+    childs.forEach((element, index) => {
+      if (element.borderless == false) {
+        element.borderless = this.borderless;
+      }
+      if (childs.length == index + 1) {
+        element.noBorder = true;
+      }
+    });
+  }
+  render() {
+    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    return (h(Host, { class: hostClasses }, h("slot", null)));
+  }
+  get el() { return getElement(this); }
+};
+
+export { BcmCollapseGroup as bcm_collapse_group };

package/dist/{esm → bromcom-ui}/bcm-collapse.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';
 
 const collapseCss = "@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}*{box-sizing:border-box}::-webkit-details-marker{display:none}:host{display:block}:host(.hidden){display:none}:host(:not(:first-child)) .collapse{border-top:none}.collapse{border:1px solid var(--bcm-color-grey-5)}.collapse.borderless{border:none}.collapse.borderless:not(.no-border){border-bottom:1px solid var(--bcm-color-grey-5)}.collapse.borderless .collapse-header{border-bottom:none}.collapse.borderless .collapse-body{background-color:var(--bcm-color-grey-2);padding:0 40px 16px}.collapse:not(.open) .collapse-header{border-bottom:none}.collapse-header{display:flex;align-items:center;color:var(--bcm-color-grey-9);padding:16px;background-color:var(--bcm-color-grey-2);border-bottom:1px solid var(--bcm-color-grey-5);cursor:default;user-select:none}.collapse-header:focus{outline:none}.collapse-header .collapse-icon{margin-right:8px}.collapse-body{padding:16px;background-color:var(--bcm-color-grey-1);color:var(--bcm-color-grey-8)}";