bromcom-ui 2.3.68 → 2.3.69

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

@@ -0,0 +1,67 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ce8878ec.js');
+const index$1 = require('./index-2f62bdaf.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}";
+
+const types = {
+  normal: 'div',
+  button: 'button'
+};
+const iconSizes = {
+  small: '16',
+  medium: '20',
+  large: '24',
+};
+const BcmAvatar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.plate = 'ellipse';
+    this.size = 'medium';
+    this.type = 'normal';
+    this.hidden = false;
+    this.isFallback = false;
+  }
+  handleError() {
+    this.isFallback = true;
+  }
+  getCustomSizes(customSize) {
+    return {
+      textSize: Math.round(parseInt(customSize) / 3),
+      iconSize: Math.round(parseInt(customSize) / 2),
+    };
+  }
+  getIcon(size, custom) {
+    const currentSize = custom ? this.getCustomSizes(size).iconSize : iconSizes[size];
+    return (index.h("bcm-icon", { icon: "user", type: "outlined", color: "grey-1", size: currentSize }));
+  }
+  getFirstLetters(name) {
+    const splitted = name.split(' ');
+    if (splitted.length === 1)
+      return splitted[0].substring(0, 2);
+    return splitted[0].charAt(0) + splitted[splitted.length - 1].charAt(0);
+  }
+  render() {
+    const isCustom = !Object.keys(iconSizes).includes(this.size);
+    const Wrapper = types[this.type];
+    const classes = index$1.classnames('avatar', 'size-2', this.plate, {
+      [`${this.size}`]: !isCustom
+    });
+    const customStyles = {
+      width: this.size + 'px',
+      height: this.size + 'px',
+      fontSize: this.getCustomSizes(this.size).textSize + 'px'
+    };
+    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null);
+    return (index.h(index.Host, { class: hostClasses }, index.h(Wrapper, { class: classes, style: isCustom && customStyles }, this.isFallback ? (this.name ? this.getFirstLetters(this.name) : this.getIcon(this.size, isCustom))
+      : this.image ? index.h("img", { src: this.image, alt: this.alt })
+        : this.name ? this.getFirstLetters(this.name)
+          : this.getIcon(this.size, isCustom))));
+  }
+};
+BcmAvatar.style = avatarCss;
+
+exports.bcm_avatar = BcmAvatar;

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

@@ -0,0 +1,50 @@
+'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');
+
+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) {
+    index.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 = utils.extractColor(colors.ColorPalette, color);
+      }
+      return { backgroundColor: returnColor };
+    }
+  }
+  render() {
+    const dotClass = index$1.classnames('badge-dot', this.status, this.type, this.size);
+    if (this.type === 'info') {
+      return (index.h("div", { class: "badge-info" }, index.h("span", { class: dotClass, style: this.handleColor(this.color) }), index.h("span", { class: "badge-text" }, index.h("slot", null))));
+    }
+    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null);
+    return (index.h(index.Host, { class: hostClasses }, !this.value ? index.h("span", { class: dotClass, style: this.handleColor(this.color) })
+      : (index.h("span", { class: `badge-basic ${this.status}` }, " ", this.value, " "))));
+  }
+};
+BcmBadge.style = badgeCss;
+
+exports.bcm_badge = BcmBadge;

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

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ce8878ec.js');
+const index$1 = require('./index-2f62bdaf.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%}";
+
+const BcmBreadcrumb = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.bcmBreadcrumb = index.createEvent(this, "bcm-breadcrumb-click", 7);
+    this.hidden = false;
+  }
+  handleClickOutside(e) {
+    if (!this.host.contains(e.target)) {
+      if (this.isOpen)
+        this.isOpen = false;
+    }
+  }
+  handleOpen() {
+    this.isOpen = !this.isOpen;
+  }
+  handleItemClick(item) {
+    this.bcmBreadcrumb.emit(item);
+  }
+  decideRender(item, isLast) {
+    let iconExist = false;
+    let labelExist = false;
+    let hrefExist = false;
+    let dropdownExist = false;
+    Object.keys(item).map(prop => {
+      prop === 'icon' && (iconExist = true);
+      prop === 'label' && (labelExist = true);
+      prop === 'href' && (hrefExist = true);
+      prop === 'dropdown' && (dropdownExist = true);
+    });
+    if (dropdownExist) {
+      return (index.h("details", { class: "dropdown", open: this.isOpen }, index.h("summary", { onClick: () => this.handleOpen(), class: this.isOpen && 'open' }, index.h("span", null, iconExist ? index.h("bcm-icon", { icon: item.icon, size: 16 }) : null, labelExist ? item.label : null), index.h("bcm-icon", { icon: "down", size: 12 })), index.h("div", { class: "dropdown-menu" }, item.dropdown.map(link => (index.h("span", { class: "size-2 dropdown-item" }, index.h("bcm-link", { target: link.target, href: link.href, icon: link.icon ? link.icon : null }, link.label ? link.label : null)))))));
+    }
+    else if (!hrefExist || isLast) {
+      return (index.h("span", { class: "non-link-item" }, iconExist ? index.h("bcm-icon", { icon: item.icon, size: 16 }) : null, labelExist ? item.label : null));
+    }
+    return (index.h("bcm-link", { target: item.target, href: item.href, icon: iconExist ? item.icon : null }, labelExist ? item.label : null));
+  }
+  render() {
+    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null);
+    return (index.h(index.Host, { class: hostClasses }, index.h("ul", { class: "breadcrumb" }, this.items.map((item, index$1) => (index.h("li", { class: "breadcrumb-item", onClick: () => this.handleItemClick(item) }, this.decideRender(item, index$1 === this.items.length - 1)))))));
+  }
+  get host() { return index.getElement(this); }
+};
+BcmBreadcrumb.style = breadcrumbCss;
+
+exports.bcm_breadcrumb = BcmBreadcrumb;

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

@@ -0,0 +1,246 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ce8878ec.js');
+const index$1 = require('./index-2f62bdaf.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) {
+    index.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 = index$1.classnames(this.hidden ? 'hidden' : null, {
+      'full-width': fullWidth
+    });
+    const classes = index$1.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 = index$1.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 (index.h(index.Host, { class: hostClasses }, index.h(Component, { class: classes, disabled: disabled, href: href, target: target }, loading && index.h("div", { class: "loading" }, " ", index.h("bcm-icon", { type: "animated", class: "prefix", icon: "loading", size: iconSize }), " "), icon && iconPosition === "prefix" && index.h("bcm-icon", { type: "outlined", class: "prefix", icon: icon, size: iconSize }), index.h("span", null, variantOptions[variant].text), icon && iconPosition === "suffix" && index.h("bcm-icon", { type: "outlined", class: "suffix", icon: icon, size: iconSize }))));
+    }
+    else if (isIconOnly) {
+      return (index.h(index.Host, { class: hostClasses }, index.h(Component, { class: classes, disabled: disabled, href: href, target: target }, loading && index.h("div", { class: "loading" }, " ", index.h("bcm-icon", { type: "animated", class: "prefix", icon: "loading", size: iconSize }), " "), index.h("bcm-icon", { icon: icon, size: iconSize, type: "outlined" }))));
+    }
+    return (index.h(index.Host, { class: hostClasses }, index.h(Component, { class: classes, disabled: disabled, href: href, target: target }, loading && index.h("div", { class: "loading" }, " ", index.h("bcm-icon", { type: "animated", class: "prefix", icon: "loading", size: iconSize }), " "), icon && iconPosition === "prefix" && index.h("bcm-icon", { type: "outlined", class: "prefix", icon: icon, size: iconSize }), index.h("slot", null), icon && iconPosition === "suffix" && index.h("bcm-icon", { type: "outlined", class: "suffix", icon: icon, size: iconSize }), index.h("slot", { name: "suffix" }))));
+  }
+  get host() { return index.getElement(this); }
+};
+BcmButton.style = buttonsCss;
+
+exports.bcm_button = BcmButton;

package/dist/cjs/bcm-card-footer.cjs.entry.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ce8878ec.js');
+
+const BcmCardFooter = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", null)));
+  }
+};
+
+exports.bcm_card_footer = BcmCardFooter;

package/dist/cjs/bcm-card-header.cjs.entry.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ce8878ec.js');
+
+const BcmCardHeader = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", null)));
+  }
+};
+
+exports.bcm_card_header = BcmCardHeader;

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

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ce8878ec.js');
+const index$1 = require('./index-2f62bdaf.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}";
+
+const BcmCard = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.size = 'medium';
+    this.hidden = false;
+  }
+  componentDidRender() {
+    const slot = this.host.shadowRoot.querySelector('slot').assignedElements();
+    slot.map(el => {
+      if (String(el.tagName).toLowerCase() === 'bcm-card-header') {
+        el.slot = 'header';
+        this.header = true;
+      }
+      if (String(el.tagName).toLowerCase() === 'bcm-card-footer') {
+        el.slot = 'footer';
+        this.footer = true;
+      }
+    });
+  }
+  render() {
+    const classes = index$1.classnames('card', this.size);
+    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null);
+    return (index.h(index.Host, { class: hostClasses }, index.h("div", { class: classes }, this.header && (index.h("div", { class: "header size-3 weight-semibold" }, index.h("slot", { name: "header" }))), index.h("div", { class: "card-body" }, index.h("slot", null)), this.footer && (index.h("div", { class: "footer" }, index.h("slot", { name: "footer" }))))));
+  }
+  get host() { return index.getElement(this); }
+};
+BcmCard.style = cardCss;
+
+exports.bcm_card = BcmCard;