bromcom-ui 2.3.58 → 2.3.59

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/{esm → bromcom-ui}/bcm-badge.entry.js

@@ -1,7 +1,6 @@
-import { r as registerInstance, h, H as Host } 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, 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}";
 

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/bromcom-ui/bcm-checkbox-group.entry.js

@@ -0,0 +1,269 @@
+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}";
+
+const BcmCheckboxGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.groupChange = createEvent(this, "bcm-group-change", 7);
+    this.groupCheckedList = createEvent(this, "bcm-group-checked-list", 7);
+    /**
+     * Private variables
+     */
+    this.checkboxes = [];
+    /**
+     * Component Properties
+     */
+    this.direction = 'horizontal';
+    this.items = [];
+    this.indeterminate = false;
+    this.disabled = false;
+    this.hidden = false;
+    this.required = false;
+    this.label = null;
+    this.gap = null;
+    this.fullWidth = "false";
+    this.optionType = 'default';
+    this.buttonStyle = 'solid';
+    this.size = 'medium';
+    this.noCaption = false;
+    this.captionType = 'default';
+    /**
+     * Component State Variables
+     */
+    this.indeterminateState = 'uncheck';
+    this.checkboxesProp = [];
+  }
+  /**
+   * @ComponentMethod
+   */
+  componentWillLoad() {
+    this.parseItems(this.items);
+    this.parseOptions();
+  }
+  /**
+   * @ComponentMethod
+   */
+  connectedCallback() { }
+  componentDidLoad() {
+    let checkboxesInit = [];
+    checkboxesInit = this.getAllInputs();
+    checkboxesInit.map(checkbox => {
+      if (this.fullWidth != "false") {
+        if (this.fullWidth === "flex") {
+          checkbox.style.flex = "auto";
+        }
+        else {
+          checkbox.style.width = "100%";
+        }
+      }
+      this.optionType && (checkbox.optionType = this.optionType);
+      this.buttonStyle && (checkbox.buttonStyle = this.buttonStyle);
+      this.size && (checkbox.size = this.size);
+      // this.required == true && checkbox.required == true && (
+      //     checkbox.required = true
+      // )
+      this.disabled == true && (checkbox.disabled = true);
+    });
+    this.groupChecked().then(values => this.value = values);
+  }
+  async setClear() {
+    const checkboxesInit = this.getAllInputs();
+    checkboxesInit.map(checkbox => {
+      checkbox.setClear();
+      checkbox.noCaption = this.noCaption;
+    });
+  }
+  async resetCaption() {
+    const checkboxesInit = this.getAllInputs();
+    checkboxesInit.map(checkbox => {
+      checkbox.resetCaption();
+      checkbox.noCaption = this.noCaption;
+    });
+  }
+  /**
+  * @ComponentMethod
+  */
+  componentDidRender() {
+    let slotElements;
+    slotElements = this.el.shadowRoot.querySelector('slot').assignedElements();
+    this.checkboxes = [];
+    // Get only bcm-checkbox elements from 
+    // slot childs
+    slotElements.map(element => {
+      String(element.tagName).toLowerCase() == 'bcm-checkbox'
+        && this.checkboxes.push(element);
+    });
+    this.setIndeterminateState();
+    if (this.items.length > 0) {
+      let checkboxesInit = [];
+      checkboxesInit = this.getAllInputs();
+      checkboxesInit.map(checkbox => {
+        this.defaultValueState && (this.defaultValueState.find(e => e === checkbox.name) && checkbox.check(checkbox.name));
+      });
+    }
+  }
+  componentDidUpdate() {
+    this.handleChange();
+  }
+  /**
+   * @desc
+   */
+  inputChange() {
+    this.groupChecked().then(values => this.value = values);
+    this.setIndeterminateState();
+  }
+  /**
+   * @desc Returns merged slot and prop
+   * checkbox items
+   * @returns {Array<BcmCheckbox>}
+   */
+  getAllInputs() {
+    return [
+      ...this.checkboxes,
+      ...this.el.shadowRoot.querySelectorAll('bcm-checkbox')
+    ];
+  }
+  /**
+   * @desc
+   * @returns {void}
+   */
+  setIndeterminateState() {
+    let state = 'uncheck';
+    let allChecked = true;
+    let allUnchecked = true;
+    this.getAllInputs().map((checkbox) => {
+      checkbox.checked && (allUnchecked = false);
+      !checkbox.checked && (allChecked = false);
+    });
+    !allChecked && !allUnchecked
+      ? state = 'indeterminate'
+      : allChecked
+        ? state = 'determinate'
+        : state = 'uncheck';
+    this.indeterminateState = state;
+  }
+  /**
+   * @desc
+   * @param event
+   */
+  indeterminateClick() {
+    if (this.disabled == false) {
+      let checkAll = true;
+      if (this.indeterminateState == 'determinate') {
+        checkAll = false;
+      }
+      this.getAllInputs().map((checkbox) => {
+        checkbox.check(checkAll);
+      });
+    }
+  }
+  parseOptions() {
+    if (this.defaultValue) {
+      this.defaultValueState = JSON.parse(this.defaultValue);
+    }
+  }
+  /**
+   * @desc
+   * @param newValue
+   * @returns {void}
+   */
+  parseItems(newValue) {
+    if (newValue) {
+      typeof newValue == 'string'
+        ? this.checkboxesProp = JSON.parse(newValue)
+        : this.checkboxesProp = newValue;
+    }
+  }
+  /**
+   * @desc
+   * @param name -
+   * @returns {boolean | Array<any>}
+   */
+  async check(options) {
+    if (options) {
+      typeof options == 'string'
+        ? options = JSON.parse(options)
+        : options = options;
+    }
+    let checkboxes = [];
+    checkboxes = this.getAllInputs();
+    const inBoth = (list1, list2) => list1.filter(a => true === list2.some(b => a.name === b.name));
+    let optionsArray = options;
+    inBoth(checkboxes, options).map(item => {
+      item.check(optionsArray.find(x => x.name === item.name).checked);
+    });
+  }
+  /**
+   * @desc
+   * @param name -
+   * @returns {boolean | Array<any>}
+   */
+  async groupChecked(name) {
+    let retVal = null;
+    let checkeds = {};
+    let checkboxes = [];
+    if (typeof retVal != 'boolean' && !retVal) {
+      retVal = checkeds;
+    }
+    // Merge slotted items with prop items
+    // #
+    checkboxes = this.getAllInputs();
+    checkboxes.map(checkbox => {
+      checkbox.checked && (checkeds[checkbox.name] = {
+        value: true,
+        name: checkbox.name
+      });
+      !checkbox.checked && (checkeds[checkbox.name] = {
+        value: false,
+        name: checkbox.name
+      });
+      if (checkbox.name === name) {
+        retVal = checkbox.checked;
+      }
+    });
+    return retVal;
+  }
+  handleChange() {
+    let checkeds = {};
+    let changes = {};
+    let checkboxes = [];
+    checkboxes = this.getAllInputs();
+    checkboxes.map(checkbox => {
+      checkbox.checked && (checkeds[checkbox.name] = {
+        value: true,
+        name: checkbox.name
+      });
+      changes[checkbox.name] = {
+        value: checkbox.checked ? true : false,
+        name: checkbox.name
+      };
+    });
+    this.groupChange.emit(changes);
+    this.groupCheckedList.emit(checkeds);
+  }
+  render() {
+    const { checkboxesProp, indeterminate, disabled, label, required, captionType } = this;
+    const groupContainerClasses = classnames('group-container', this.direction, this.optionType, this.fullWidth, {
+      'full-width': this.fullWidth
+    });
+    const indeterminateClasses = classnames('indeterminate', 'bcm-' + this.indeterminateState, {
+      'disabled': disabled
+    });
+    const hostClasses = classnames(this.hidden ? 'hidden' : null, {
+      'error': captionType == 'error' ? true : false
+    });
+    var customStyle = {};
+    this.gap && (customStyle = { 'gap': this.gap });
+    return (h(Host, { class: hostClasses, "on-bcm-change": () => this.inputChange() }, label && h("div", null, h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required })), indeterminate && (h("div", { class: indeterminateClasses }, h("input", { id: "bcm-indeterminate-element", type: "checkbox", disabled: disabled }), h("label", { htmlFor: "bcm-indeterminate-element", "on-click": () => this.indeterminateClick() }, h("span", null, h("bcm-icon", { class: "icon-checked", icon: "component-check", size: "small", type: "default" })), "Check All"))), h("div", { class: groupContainerClasses, style: customStyle }, checkboxesProp && this.checkboxesProp.map((checkbox) => h("bcm-checkbox", { name: checkbox.name, checked: checkbox.checked, disabled: checkbox.disabled, required: this.required === true && checkbox.required === true && (true), noCaption: this.noCaption, optionType: this.optionType, buttonStyle: this.buttonStyle, size: this.size, "full-width": this.fullWidth }, checkbox.label)), h("slot", null))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "defaultValue": ["parseOptions"],
+    "items": ["parseItems"]
+  }; }
+};
+BcmCheckboxGroup.style = groupCss;
+
+export { BcmCheckboxGroup as bcm_checkbox_group };