bromcom-ui 2.3.58 → 2.3.62

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

@@ -1,979 +1,6 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-8fe7aea4.js';
-import { c as classnames } from './index-e58a2d48.js';
-import { C as ColorPalette } from './colors-7c7b35e9.js';
-import { e as extractColor, g as getChilds, d as delay } from './utils-de9aee67.js';
-import { S as StatusProps } from './types-911a8837.js';
-import { p as popoverPlacement, a as popoverBoxPlacement } from './popover-placement-a4ab1587.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;
-
-/**
- * '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 = {}));
-
-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 {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.blur = createEvent(this, "bcm-blur", 7);
-    this.focus = createEvent(this, "bcm-focus", 7);
-    this.change = createEvent(this, "bcm-change", 7);
-    /**
-     * Component Properties
-     */
-    this.value = '';
-    this.name = 'checkbox';
-    this.checked = 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: extractColor(ColorPalette, ColorProps[color] + '-5'),
-        backgroundColor: extractColor(ColorPalette, ColorProps[color] + '-5')
-      };
-  }
-  render() {
-    const { disabled, checked, readOnly, name, handleChange, required, caption, captionError, captionType, noCaption, buttonStyle, size, optionType } = this;
-    const hostClasses = classnames(this.hidden ? 'hidden' : null, {
-      'error': captionType == 'error' ? true : false
-    });
-    const captionClasses = classnames('size-1', 'input-caption', 'caption-' + captionType);
-    const defaultClasses = classnames();
-    const buttonClasses = classnames('radio-button', buttonStyle, size, {
-      'size-2': size === 'small' || size === 'medium',
-      'size-3': size === 'large',
-      'checked': checked,
-      'disabled': disabled,
-    });
-    var fontColor = extractColor(ColorPalette, ColorProps[this.color] + '-6');
-    var style = "<style>.radio-button:not(.checked):hover{color: " + fontColor + "} </style>";
-    return (h(Host, { class: hostClasses, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }, h("input", { id: name, type: "checkbox", checked: checked, disabled: disabled, required: required, readOnly: readOnly, onChange: handleChange, ref: el => (this.inputElement = el) }), optionType == 'button' && (h("span", { innerHTML: style })), h("label", { title: optionType == 'button' ? this.el.innerHTML : null, htmlFor: name, class: optionType == 'default' ? defaultClasses : buttonClasses, style: this.getColor(this.color) }, h("span", { class: "icon" }, h("bcm-icon", { class: "icon-checked", icon: "component-check", size: "small", type: "default" })), h("span", { class: "slot" }, h("slot", null))), !noCaption && (h("div", { class: "caption-area" }, captionType == "error"
-      ? h("span", { class: captionClasses }, " ", captionError, " ")
-      : caption && h("span", { class: captionClasses }, " ", caption, " ")))));
-  }
-  get el() { return getElement(this); }
-};
-BcmCheckbox.style = checkboxCss;
-
-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;
-
-// /**
-//  * 
-//  * @param type 
-//  */
-// export const required = (value:any) => {
-//   if ( value || value != null ) {
-//     return true
-//   } else {
-//     return true
-//   }
-// }
-class rules {
-  constructor() { }
-  response(status, message) {
-    return Object.assign(Object.assign({ valid: status }, (message && { message })), (!status && { type: 'error' }));
-  }
-  required(value, componentValidation) {
-    let validation = this.response(true);
-    if (value == '' || value == "" || value == undefined || value == null || value === false) {
-      validation = this.response(false, 'This field is required.');
-    }
-    if (componentValidation) {
-      if (!componentValidation.valid) {
-        validation = this.response(false, componentValidation.errorText);
-      }
-      if (value instanceof Object) {
-        if (value.isValid) {
-          if (value.isValid == false)
-            validation = this.response(false, 'This field is required.');
-        }
-      }
-    }
-    return validation;
-  }
-}
-const validate = new rules;
-
-const formCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:block;margin-bottom:8px}:host(.hidden){display:none}";
-
-/**
- * @desc
- * @param str
- */
-const lowercase = (str) => str.toLowerCase();
-const BcmForm = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.bcmForm = createEvent(this, "bcm-form", 7);
-    this.formData = {};
-    this.inputs = [];
-    this.duplicateInput = [];
-    this.isValid = true;
-    this.returnCaption = [];
-    this.Bromcom = {
-      errors: {
-        targetFormNotExist: 'target form is not exist --> ',
-      },
-      inputComponents: {
-        FORM_GROUP: 'form-group',
-        FORM: 'form',
-        INPUT: 'input',
-        TEXTAREA: 'textarea',
-        RADIO_GROUP: 'radio-group',
-        CHECKBOX: 'checkbox',
-        CHECKBOX_GROUP: 'checkbox-group',
-        SELECT: 'select',
-        DATE_PICKER: 'date-picker',
-        TIME_PICKER: 'time-picker',
-        DATETIME_PICKER: 'datetime-picker',
-        COLORPICKER: 'colorpicker',
-        LIST: 'list',
-        SWITCH: 'switch',
-        LISTBOX: 'listbox'
-      },
-      helpers: {
-        randomId: function () {
-          return Math.random().toString(16).slice(2, -1);
-        },
-      },
-    };
-    this._id = (Math.random() * 4).toString(16).replace('.', '');
-    this.hidden = false;
-    this.validation = false;
-    this.name = "";
-  }
-  handleSubmit(e) {
-    if (lowercase(e.target.nodeName) === 'bcm-button') {
-      if (e.target.type === 'submit') {
-        this.submitFunction();
-      }
-    }
-  }
-  async submitFunction() {
-    this.formData = {};
-    this.inputs = [];
-    this.selector = this.el;
-    this.getInputs();
-    var formData = { isValid: true, formData: await this.userFormData() };
-    if (this.name) {
-      formData = Object.assign(Object.assign({}, formData), { formName: this.name });
-    }
-    if (this.isValid) {
-      this.bcmForm.emit(formData);
-      return formData;
-    }
-    else {
-      this.returnCaption = { isValid: false, 'message': 'Please fill in all inputs', 'errorDetails': this.returnCaption, formData: await this.userFormData() };
-      if (this.name) {
-        this.returnCaption = Object.assign(Object.assign({}, this.returnCaption), { formName: this.name });
-      }
-      this.bcmForm.emit(this.returnCaption);
-      return this.returnCaption;
-    }
-  }
-  async submit() {
-    const returnValue = this.submitFunction();
-    return Promise.resolve(returnValue);
-  }
-  async setClear() {
-    this.formData = {};
-    this.inputs = [];
-    this.selector = this.el;
-    this.getInputs();
-    for (const item of this.inputs) {
-      try {
-        await item.setClear();
-      }
-      catch (error) {
-        console.log(item.nodeName, "sc p");
-      }
-    }
-  }
-  async resetCaption() {
-    this.formData = {};
-    this.inputs = [];
-    this.selector = this.el;
-    this.getInputs();
-    for (const item of this.inputs) {
-      try {
-        await item.resetCaption();
-      }
-      catch (error) {
-        console.log(item.nodeName, "rc p");
-      }
-    }
-  }
-  async config(_config) {
-    if (_config['validation']) {
-      typeof _config['validation'] == 'boolean'
-        ? this.validation = _config['validation']
-        : this.validation = false;
-    }
-    return true;
-  }
-  getInputs() {
-    var form = this.selector;
-    if (!form) {
-      console.warn(this.Bromcom.errors.targetFormNotExist + this.selector);
-      return;
-    }
-    const inputs = Array.from(form.querySelectorAll('bcm-' + Object.values(this.Bromcom.inputComponents).join(',bcm-')));
-    this.duplicateInput = [];
-    // s-hn: Stencil private flag that contains host web component
-    // https://github.com/ionic-team/stencil/blob/45388e95edb46ef357eb9ae37cd32bbb5bc1ed23/src/runtime/vdom/vdom-render.ts#L116
-    const rootInputs = inputs.filter((input) => !input['s-hn']);
-    rootInputs.forEach(element => {
-      var item = element;
-      if (lowercase(item.nodeName) == "bcm-checkbox-group") {
-        item.querySelectorAll("bcm-checkbox").forEach(element => {
-          this.duplicateInput.push(element.name);
-        });
-      }
-      if (lowercase(item.nodeName) == "bcm-form") {
-        // console.log(item)
-        const groupInputs = Array.from(item.querySelectorAll('bcm-' + Object.values(this.Bromcom.inputComponents).join(',bcm-')));
-        var itemObject;
-        groupInputs.forEach(element => {
-          var name = element.name;
-          var value = element.value;
-          itemObject = Object.assign(Object.assign({}, itemObject), { [name]: value });
-          this.duplicateInput.push(element.name);
-        });
-        item.value = itemObject;
-        // item.querySelectorAll("bcm-checkbox").forEach(element => {
-        //     this.duplicateInput.push(element.name)
-        // });
-      }
-    });
-    this.inputs = rootInputs;
-  }
-  getItemValue(item) {
-    const tagName = item.tagName.toLowerCase().replace('bcm-', '');
-    switch (tagName) {
-      /*   case 'date-picker':
-        case 'datetime-picker':
-            return item.value.timestamp
-        case 'time-picker':
-            return item.value.time */
-      default:
-        return item.value;
-    }
-  }
-  isWrapperComponent(item) {
-    return ['bcm-datetime-picker', 'bcm-date-picker', 'bcm-time-picker'].includes(item.toLowerCase());
-  }
-  isGroupComponent(item) {
-    return ['bcm-checkbox-group'].includes(item.toLowerCase());
-  }
-  async userFormData() {
-    this.formData = {};
-    this.isValid = true;
-    this.returnCaption = [];
-    for (const item of this.inputs) {
-      const isGroupComponent = this.isGroupComponent(item.tagName);
-      const isWrapperComponent = this.isWrapperComponent(item.tagName);
-      const wrapperComponent = isWrapperComponent && item;
-      const input = isWrapperComponent
-        ? await item.getInput() && item
-        : item;
-      // input.caption = ''
-      // input.captionType = ''
-      if (this.validation) {
-        let valid = null;
-        if (isWrapperComponent) {
-          const isPickerValid = await wrapperComponent.isValid();
-          valid = validate.required(input.value, isPickerValid);
-          if (valid) {
-            if (input.value instanceof Object) {
-              if (input.value["isValid"] == false) {
-                valid = validate.required("", isPickerValid);
-              }
-            }
-            else {
-              valid = validate.required(input.value, isPickerValid);
-            }
-          }
-        }
-        else if (isGroupComponent) {
-          const childsCheckbox = getChilds(input, "bcm-checkbox");
-          childsCheckbox.length > 0 && (childsCheckbox.forEach((element) => {
-            if (element && element.required === true) {
-              valid = validate.required(element.value);
-              if (!valid['valid']) {
-                element.noCaption = false;
-                element.captionError = valid['message'];
-                element.captionType = valid['type'];
-              }
-              else {
-                element.noCaption = input.noCaption;
-                element.captionError = null;
-                element.captionType = "default";
-              }
-            }
-          }));
-        }
-        else {
-          valid = validate.required(input.value);
-        }
-        if (input.required && !valid['valid']) {
-          input.captionError = valid['message'];
-          input.captionType = valid['type'];
-        }
-        else {
-          input.captionError = null;
-          input.captionType = "default";
-        }
-        let name = input.name;
-        let value = input.captionError;
-        input.captionType == 'error' && (
-        // console.error([name], ': ', value),   
-        this.returnCaption = [...this.returnCaption, { [name]: value }],
-          this.isValid = false);
-      }
-      if (input.name && !this.duplicateInput.includes(input.name)) {
-        var itemValue = this.getItemValue(input);
-        if (!itemValue || itemValue == undefined || itemValue == null) {
-          itemValue = null;
-        }
-        this.formData[input.name] = itemValue;
-      }
-    }
-    return this.formData;
-  }
-  async handleChange(e) {
-    const isWrapperComponent = this.isWrapperComponent(e.target.tagName);
-    const target = isWrapperComponent
-      ? e.target.getInput && await e.target.getInput() || e.target
-      : e.target;
-    const value = e.target.value;
-    const wrapperComponent = isWrapperComponent && e.target;
-    var isPickerValid;
-    if (isWrapperComponent) {
-      isPickerValid = await wrapperComponent.isValid();
-    }
-    const tick = setTimeout(() => {
-      if (target.required) {
-        let valid = null;
-        if (isWrapperComponent) {
-          valid = validate.required(value, isPickerValid);
-          if (valid) {
-            if (value instanceof Object) {
-              if (value["isValid"] == false) {
-                valid = validate.required("", isPickerValid);
-              }
-            }
-            else {
-              valid = validate.required(value, isPickerValid);
-            }
-          }
-        }
-        else {
-          valid = validate.required(value);
-        }
-        if (valid['valid']) {
-          target.captionError = null;
-          target.captionType = null;
-        }
-        else {
-          target.captionError = valid['message'];
-          target.captionType = valid['type'];
-        }
-      }
-      clearTimeout(tick);
-    });
-    this.value = this.userFormData();
-  }
-  render() {
-    const hostClasses = classnames(this.hidden ? 'hidden' : null);
-    return (h(Host, { class: hostClasses }, h("form", { class: "bcm-form" }, h("slot", null))));
-  }
-  get el() { return getElement(this); }
-};
-BcmForm.style = formCss;
+import { r as registerInstance, 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';
 
 const loadingSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSI+PHN0eWxlPgpAa2V5ZnJhbWVzIGEwX3QgeyAwJSB7IHRyYW5zZm9ybTogdHJhbnNsYXRlKDhweCw4cHgpIHJvdGF0ZSgwZGVnKSB0cmFuc2xhdGUoLTcuNXB4LC03cHgpOyB9IDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZSg4cHgsOHB4KSByb3RhdGUoMzYwZGVnKSB0cmFuc2xhdGUoLTcuNXB4LC03cHgpOyB9IH0KQGtleWZyYW1lcyBhMF9kIHsgMCUgeyBkOiBwYXRoKCdNMTQsN0MxMy43LDcsMTMuNSw2LjgsMTMuNSw2LjVDMTMuNSw1LjgsMTMuNCw1LDEzLjEsNC40QzEyLjgsMy43LDEyLjQsMy4xLDExLjksMi42QzExLjQsMi4xLDEwLjgsMS42LDEwLjEsMS40QzkuNCwxLjEsOC43LC45LDcuOSwuOUM3LjYsLjksNy40LC43LDcuNCwuNUM3LjQsLjIsNy42LDAsNy45LDBDOC44LDAsOS42LC4yLDEwLjQsLjVDMTEuMiwuOCwxMS45LDEuMywxMi41LDEuOUMxMy4xLDIuNSwxMy42LDMuMiwxMy45LDRDMTQuMyw0LjgsMTQuNCw1LjcsMTQuNCw2LjVDMTQuNCw2LjgsMTQuMiw3LDE0LDdMMTQsN1onKTsgfSAxMDAlIHsgZDogcGF0aCgnTTE0LDdDMTMuNyw3LDEzLjUsNi44LDEzLjUsNi41QzEzLjUsNS44LDEzLjQsNSwxMy4xLDQuNEMxMi44LDMuNywxMi40LDMuMSwxMS45LDIuNkMxMS40LDIuMSwxMC44LDEuNiwxMC4xLDEuNEM5LjQsMS4xLDguNywuOSw3LjksLjlDNy42LC45LDcuNCwuNyw3LjQsLjVDNy40LC4yLDcuNiwwLDcuOSwwQzguOCwwLDkuNiwuMiwxMC40LC41QzExLjIsLjgsMTEuOSwxLjMsMTIuNSwxLjlDMTMuMSwyLjUsMTMuNiwzLjIsMTMuOSw0QzE0LjMsNC44LDE0LjQsNS43LDE0LjQsNi41QzE0LjQsNi44LDE0LjIsNywxNCw3TDE0LDdaJyk7IH0gfQo8L3N0eWxlPjxwYXRoIGQ9Ik0xNCA3Yy0wLjMgMC0wLjUtMC4yLTAuNS0wLjVjMC0wLjctMC4xLTEuNS0wLjQtMi4xYy0wLjMtMC43LTAuNy0xLjMtMS4yLTEuOGMtMC41LTAuNS0xLjEtMS0xLjgtMS4yYy0wLjctMC4zLTEuNC0wLjUtMi4yLTAuNWMtMC4zIDAtMC41LTAuMi0wLjUtMC40YzAtMC4zIC4yLTAuNSAuNS0wLjVjLjkgMCAxLjcgLjIgMi41IC41Yy44IC4zIDEuNSAuOCAyLjEgMS40Yy42IC42IDEuMSAxLjMgMS40IDIuMWMuNCAuOCAuNSAxLjcgLjUgMi41YzAgLjMtMC4yIC41LTAuNCAuNVoiIGZpbGw9IiMxODkwZmYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDgsOCkgdHJhbnNsYXRlKC03LjUsLTcpIiBzdHlsZT0iYW5pbWF0aW9uOiAxcyBsaW5lYXIgaW5maW5pdGUgYm90aCBhMF90LCAxcyBsaW5lYXIgaW5maW5pdGUgYm90aCBhMF9kOyIvPjwvc3ZnPg==';
 
@@ -6242,7 +5269,9 @@ const BcmIcon = class {
     let fillPattern = /(<path [\S\s]*?fill=")[^"]+("[\S\s]*?>)/gim;
     // Replace fill colors with given prop
     // -->
-    if (this.type == 'multi-color') ;
+    if (this.type == 'multi-color') {
+      // multicolor icon
+    }
     else {
       svgTemplate = svgTemplate.replace(fillPattern, '$1' + color + '$2');
     }
@@ -6368,1303 +5397,4 @@ const BcmIcon = class {
 };
 BcmIcon.style = iconCss;
 
-const inputCss = "@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:100%;margin:0 0 8px 0}:host(.hidden){display:none}:host(.no-margin){margin:0}.input-container{display:flex;flex-direction:column;width:100%;max-width:256px}.input-container.full-width{max-width:100%}.input-base{flex:1 1 auto;display:inline-flex;align-items:stretch;justify-content:start;position:relative;background-color:var(--bcm-color-grey-1);border:1px solid var(--bcm-color-grey-5);border-radius:2px;vertical-align:middle;overflow:hidden;padding:0 4px;cursor:text}.input-base.focused:not(.disabled){border-color:var(--bcm-color-prime-blue-5);box-shadow:0px 0px 4px var(--bcm-color-prime-blue-6)}.input-base.focused:not(.disabled) .caret-container{opacity:1}.input-base.focused:not(.disabled) .input-clear-button{opacity:1}.input-base:hover:not(.disabled){border-color:var(--bcm-color-prime-blue-6)}.input-base:hover:not(.disabled) .caret-container{opacity:1}.input-base:hover:not(.disabled) .input-clear-button{opacity:1}.input-base.disabled{background-color:var(--bcm-color-grey-3);cursor:not-allowed}.input-base.empty .input-clear-button{display:none}.input-base.invalid{border-color:var(--bcm-color-red-6)}.error .label{color:var(--bcm-color-red-6) !important}.error .input-base{border:1px solid var(--bcm-color-red-6) !important}.input-base input{color:var(--bcm-color-grey-8);flex:1 1 auto;width:0%;border:none;border-radius:2px;background:none;box-shadow:none;padding:0;margin:0 4px;font-family:\"Roboto\", sans-serif;cursor:inherit;-webkit-appearance:none;appearance:none}.input-base input::-webkit-search-decoration,.input-base input::-webkit-search-cancel-button,.input-base input::-webkit-search-results-button,.input-base input::-webkit-search-results-decoration{-webkit-appearance:none}.input-base input::placeholder{color:var(--bcm-color-grey-6);user-select:none}.input-base input:focus{outline:none}input::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input[type=number]{-moz-appearance:textfield}.input-prefix,.input-suffix{display:inline-flex;align-items:center;justify-content:center;cursor:default;color:var(--bcm-color-grey-7)}.input-prefix ::slotted(*),.input-prefix>span{margin-left:4px}.input-suffix ::slotted(*),.input-suffix>span{margin-right:4px}.input-clear-button,.input-password-toggle{display:inline-flex;align-items:center;border:none;background:none;padding:0;cursor:pointer;margin-right:4px;transition:0.2s opacity}.input-clear-button:last-child,.input-clear-button:last-of-type,.input-password-toggle:last-child,.input-password-toggle:last-of-type{margin-right:8px}.input-clear-button:focus,.input-password-toggle:focus{outline:none}.input-clear-button{opacity:0}.label{display:flex;flex-direction:column;color:var(--bcm-color-grey-9);margin-bottom:4px}.caption-area{min-height:20px}.input-caption{display:block}.unit.input-suffix{width:24px}.unit-prefix{display:inline-flex;flex:0 0 auto;align-items:center;cursor:default;color:var(--bcm-color-grey-8)}.caret-container{opacity:0;width:30px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-left:1px solid #D9D9D9;border-right:1px solid #D9D9D9;transition:0.2s opacity;user-select:none;box-sizing:border-box;margin-right:4px}.caret-container:last-of-type{margin-right:-4px;border-right:none}.caret-container .caret{display:inline-flex;height:50%;width:100%;align-items:center;justify-content:center;color:var(--bcm-color-grey-7);cursor:pointer}.caret-container .caret:hover{color:var(--bcm-color-prime-blue-6)}.caret-container .caret:active{background-color:var(--bcm-color-grey-3)}.caret-container .caret:last-child{border-top:1px solid #D9D9D9}.caret-container.disabled{background-color:var(--bcm-color-grey-3)}.caret-container.disabled .caret{cursor:not-allowed}.default-icon{margin-right:8px}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}.input-large{height:38px}.input-medium{height:30px}.input-small{height:20px}";
-
-let id = 0;
-const defaultIcons = {
-  email: 'mail',
-  tel: 'phone',
-  search: 'search',
-  url: 'link'
-};
-const iconSizes$1 = {
-  'small': 14,
-  'medium': 16,
-  'large': 18
-};
-const BcmInput = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.focus = createEvent(this, "bcm-focus", 7);
-    this.blur = createEvent(this, "bcm-blur", 7);
-    this.clear = createEvent(this, "bcm-clear", 7);
-    this.change = createEvent(this, "bcm-change", 7);
-    this.input = createEvent(this, "bcm-input", 7);
-    this.inputId = `input-${++id}`;
-    this.type = 'text';
-    this.value = '';
-    this.size = "medium";
-    this.noCaption = false;
-    this.noMargin = false;
-    this.captionType = 'default';
-    this.fullWidth = false;
-    this.disabled = false;
-    this.readonly = false;
-    this.clearable = false;
-    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
-    this.unit = null;
-    this.unitPrefix = null;
-    this.min = null;
-    this.max = null;
-    this.step = null;
-    this.hidden = false;
-    this.required = false;
-    this.disableWatchValue = false;
-    this.maxLength = null;
-    this.inValid = false;
-    this.hasFocus = false;
-    this.isBlur = false;
-    this.isPasswordVisible = false;
-  }
-  async setFocus() {
-    this.inputElement.focus();
-  }
-  async removeFocus() {
-    this.inputElement.blur();
-  }
-  async select() {
-    return this.inputElement.select();
-  }
-  async setValue(value) {
-    this.inputElement.value = value;
-    this.value = value;
-    this.handleChange();
-    return value;
-  }
-  async setClear() {
-    this.inputElement.value = '';
-    this.value = '';
-  }
-  async resetCaption() {
-    this.caption = this.captionCache;
-    this.captionType = this.captionTypeCache;
-    this.captionError = null;
-  }
-  async getValue() {
-    return this.value;
-  }
-  handleFocus() {
-    this.hasFocus = true;
-    this.focus.emit();
-  }
-  handleBlur() {
-    this.hasFocus = false;
-    this.isBlur = true;
-    if (this.type == "email") {
-      this.isEmailValid();
-    }
-    if (this.type == "tel") {
-      this.isTelValid();
-    }
-    this.blur.emit();
-  }
-  handleChange() {
-    this.value = this.inputElement.value;
-    this.change.emit(this.value);
-  }
-  handleInput() {
-    if (this.type == "number") {
-      if (this.decimal == "false") {
-        this.inputElement.value = this.inputElement.value.replace(/[^0-9-]/g, '');
-      }
-      else {
-        this.inputElement.value = this.inputElement.value.replace(/[^0-9.,-]/g, '');
-      }
-      this.inputElement.value = this.inputElement.value.replace(/(\..*)\./g, '$1').replace(/(\-.*)\-/g, '$1');
-    }
-    this.value = this.inputElement.value;
-    this.input.emit(this.value);
-  }
-  handleClear(e) {
-    this.inputElement.value = '';
-    this.value = '';
-    this.inputElement.focus();
-    this.change.emit(this.value);
-    this.clear.emit(e);
-    e.stopPropagation();
-  }
-  changePasswordVisibility() {
-    this.isPasswordVisible = !this.isPasswordVisible;
-  }
-  incrementNumber() {
-    if (!this.inValid && !this.disabled && !this.readonly) {
-      let step = this.getNumberStep();
-      let val = Number(this.value) + Number(step);
-      this.value = this.numberDecimal(val);
-    }
-  }
-  decrementNumber() {
-    if (!this.inValid && !this.disabled && !this.readonly) {
-      let step = this.getNumberStep();
-      let val = Number(this.value) - Number(step);
-      this.value = this.numberDecimal(val);
-    }
-  }
-  getNumberStep(step = Number(this.step)) {
-    let returnStep = 1;
-    if (step && Number(step) == step)
-      returnStep = step;
-    return Number(returnStep);
-  }
-  connectedCallback() {
-    this.changePasswordVisibility = this.changePasswordVisibility.bind(this);
-    this.handleChange = this.handleChange.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleInput = this.handleInput.bind(this);
-    this.handleClear = this.handleClear.bind(this);
-    this.incrementNumber = this.incrementNumber.bind(this);
-    this.decrementNumber = this.decrementNumber.bind(this);
-    this.valueCache = this.value;
-    this.captionCache = this.caption;
-    this.captionTypeCache = this.captionType;
-  }
-  validationRange(val = JSON.stringify({
-    "value": this.value,
-    "min": this.min,
-    "max": this.max
-  })) {
-    let cap = null;
-    let capType = null;
-    let returnValidation = true;
-    let item = JSON.parse(val);
-    let { length, value, min, max } = item;
-    length = parseFloat(length);
-    value = parseFloat(value);
-    min = parseFloat(min);
-    max = parseFloat(max);
-    length !== 0 && (value && (min && max && ((value < min || value > max) && (cap = "Please enter a value between " + min + " and " + max + ".",
-      capType = "error",
-      returnValidation = false)) || min && !max && (value < min && (cap = "Please enter a value greater than or equal to " + min + ".",
-      capType = "error",
-      returnValidation = false)) || !min && max && (value > max && (cap = "Please enter a value less than or equal to " + max + ".",
-      capType = "error",
-      returnValidation = false))));
-    this.setCaption(cap, capType);
-    return returnValidation;
-  }
-  setCaption(caption = null, captionType = null) {
-    this.caption = caption ? caption : this.captionCache;
-    this.captionType = captionType ? captionType : this.captionTypeCache;
-    this.captionError = captionType == "error" ? caption : null;
-  }
-  isEmailValid() {
-    const { value } = this;
-    const regexp = new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
-    let cap = null;
-    let capType = null;
-    if (value && !regexp.test(value)) {
-      cap = "Please enter a valid email address.",
-        capType = "error",
-        this.inValid = true;
-    }
-    else {
-      this.inValid = false;
-    }
-    this.setCaption(cap, capType);
-    return this.inValid;
-  }
-  isTelValid() {
-    const { value } = this;
-    const regexp = new RegExp(/^(?=.*[0-9])[- +()0-9]+$/);
-    let cap = null;
-    let capType = null;
-    if (value && !regexp.test(value)) {
-      cap = "Please enter a valid phone number.",
-        capType = "error",
-        this.inValid = true;
-    }
-    else {
-      this.inValid = false;
-    }
-    this.setCaption(cap, capType);
-    return this.inValid;
-  }
-  isNumberValid(caption = "Invalid number", captionType = "error") {
-    const { value } = this;
-    if (value && Number(value) != value) {
-      this.inValid = true;
-      this.setCaption(caption, captionType);
-      return true;
-    }
-    this.inValid = false;
-    return false;
-  }
-  setNumberUnit() {
-    const { value, unit } = this;
-    if (Number(value) == value && (unit === null || unit === void 0 ? void 0 : unit.length) > 0 && !value)
-      this.value = 0;
-  }
-  numberDecimal(val = '') {
-    let decLen = this.getDecimalLength();
-    if (val && decLen)
-      return parseFloat(val).toFixed(decLen);
-    return val;
-  }
-  numberNotDecimal(val = 0) {
-    return Math.trunc(val);
-  }
-  getDecimalLength() {
-    const { step } = this;
-    let returnDecimalLength = 0, splitted, splitDec;
-    if ( step && Number(step) == step) {
-      if (String(step).includes(".")) {
-        splitted = String(step).split('.');
-        splitDec = splitted[splitted.length - 1].length;
-      }
-      else {
-        splitDec = 0;
-      }
-      returnDecimalLength = splitDec;
-    }
-    return Number(returnDecimalLength);
-  }
-  componentWillRender() {
-    const { type } = this;
-    if (type == "number" && this.value) {
-      if (!this.isNumberValid()) {
-        this.validationRange();
-      }
-    }
-    if (this.isBlur) {
-      if (type == "email" && this.value) {
-        this.isEmailValid();
-      }
-      if (type == "tel" && this.value) {
-        this.isTelValid();
-      }
-    }
-  }
-  componentWillLoad() {
-    const { type, value } = this;
-    if (type == "number" && Number(value) == value) {
-      this.value = this.numberDecimal(value);
-    }
-  }
-  numberControl(e) {
-    if (!this.disabled && !this.readonly) {
-      if (this.type == "number") {
-        var which = e.which || 0;
-        var key = e.key;
-        which == 38 && ( // up arrow
-        e.preventDefault(),
-          this.incrementNumber());
-        which == 40 && ( // down arrow
-        e.preventDefault(),
-          this.decrementNumber());
-        key == "." && String(this.value).includes(".") && ( // dot: shouldn't be more than one
-        e.preventDefault());
-        if (which == 8 || //backspace / delete
-          which == 9 || //tab
-          which == 13 || //enter
-          which == 16 || //shift
-          which == 17 || //ctrl
-          which == 18 || //alt
-          which == 46 || //delete
-          (which == 110 && (this.type == 'number' && this.decimal != false)) || //decimal point
-          // (which == 188 && key == ",") || //comma
-          (which == 190 && key == "." && (this.type == 'number' && this.decimal != false)) || //period
-          (which == 189 && this.inputElement.value.length == 0) || //-
-          (which == 109 && this.inputElement.value.length == 0) || //-
-          (which >= 35 && which <= 40) || //end, home, left arrow, up arrow, right arrow, down arrow
-          (which >= 48 && which <= 57) || //0-9
-          (which >= 96 && which <= 105) //0-9(numpad)
-        )
-          return true;
-        e.preventDefault();
-        if (this.decimal == true) {
-          this.value = this.numberDecimal(this.value);
-        }
-        else if (this.decimal == false) {
-          this.value = this.numberNotDecimal(this.value);
-        }
-      }
-    }
-  }
-  whatchHasFocus() {
-    const { type, hasFocus, value, valueCache, inValid } = this;
-    if (type == "number") {
-      this.isNumberValid();
-      let inValidState = false;
-      if (hasFocus == true) {
-        if (inValid == true) {
-          this.value = '';
-          inValidState = true;
-        }
-      }
-      else {
-        if (this.value == '' && inValid == false) {
-          this.value = valueCache;
-          inValidState = true;
-        }
-        if (value != valueCache && inValid == false && inValidState == false) {
-          this.value = value ? this.numberDecimal(value) : '';
-        }
-      }
-    }
-  }
-  watchValue() {
-    if (!this.disableWatchValue && this.type != 'number') {
-      this.handleChange();
-    }
-  }
-  render() {
-    const { value, size, label, type, captionType, caption, captionError, placeholder, fullWidth, disabled, readonly, clearable, passwordToggle, isPasswordVisible, noDefaultIcon, unit, inValid, hasFocus, unitPrefix, noCaption, required } = this;
-    const containerClasses = classnames('input-container', {
-      'full-width': fullWidth,
-      'error': captionType == 'error' ? true : false
-    });
-    const baseClasses = classnames('input-base', 'input-' + size, {
-      'invalid': inValid,
-      'unit': (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
-      'focused': hasFocus,
-      'disabled': disabled,
-      'readonly': readonly,
-      'empty': (value === null || value === void 0 ? void 0 : value.length) < 1
-    });
-    const inputClass = size === 'large' ? 'size-3' : 'size-2';
-    const captionClasses = classnames('size-1', 'input-caption', 'caption-' + captionType);
-    const hostClasses = classnames(this.hidden ? 'hidden' : null, this.noMargin ? 'no-margin' : null);
-    return (h(Host, { class: hostClasses }, h("div", { class: containerClasses }, label && h("div", null, h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required, htmlFor: this.inputId })), h("div", { class: baseClasses }, h("span", { class: "input-prefix" }, h("slot", { name: "prefix" }), unitPrefix && h("span", { class: classnames(inputClass, 'unit-prefix') }, unitPrefix)), h("input", { "bcm-internal-id": this._id, id: this.inputId, class: inputClass, ref: el => (this.inputElement = el), onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: this.handleChange, onInput: this.handleInput, maxLength: this.maxLength, type: type === 'password' && isPasswordVisible ? 'text' :
-        type === 'number' ? 'text' : type, placeholder: placeholder, value: type === 'number' && !this.hasFocus
-        ? value + (value && (unit === null || unit === void 0 ? void 0 : unit.length) > 0 ? ' ' + unit : '')
-        : value, disabled: this.disabled, readonly: this.readonly }), clearable && !this.disabled && (h("button", { class: "input-clear-button", onClick: this.handleClear }, h("bcm-icon", { icon: "close-circle", type: "fill", size: iconSizes$1[size], color: "grey-7" }))), type === 'password' && passwordToggle && (h("button", { class: "input-password-toggle", onClick: this.changePasswordVisibility }, h("bcm-icon", { icon: isPasswordVisible ? "eye-invisible" : "eye", type: "outlined", size: iconSizes$1[size], color: "grey-7" }))), Object.keys(defaultIcons).includes(type) && !noDefaultIcon && (h("span", { class: "input-suffix default-icon" }, h("bcm-icon", { icon: defaultIcons[type], type: "outlined", size: iconSizes$1[size], color: "grey-7" }))), type === 'number' && (h("div", { class: classnames('caret-container', { 'unit': (unit === null || unit === void 0 ? void 0 : unit.length) > 0 }, { 'disabled': inValid }, { 'disabled': readonly }) }, h("span", { class: "caret", onClick: inValid == false && this.incrementNumber }, h("bcm-icon", { icon: "caret-up", type: "outlined", color: "grey-7", size: 8 })), h("span", { class: "caret", onClick: inValid == false && this.decrementNumber }, h("bcm-icon", { icon: "caret-down", type: "outlined", color: "grey-7", size: 8 })))), type !== 'number' && (h("span", { class: "input-suffix" }, h("slot", { name: "suffix" })))), !noCaption && (h("div", { class: "caption-area" }, captionType == "error"
-      ? h("span", { class: captionClasses }, " ", captionError, " ")
-      : caption && h("span", { class: captionClasses }, " ", caption, " "))))));
-  }
-  static get watchers() { return {
-    "hasFocus": ["whatchHasFocus"],
-    "value": ["watchValue"]
-  }; }
-};
-BcmInput.style = inputCss;
-
-class Generate {
-}
-Generate.UID = () => Math.random().toString(36).substr(2, 9);
-Generate.getIconAttrWithStatusType = (status, loading = false) => {
-  if (loading)
-    return { icon: 'loading', color: 'blue-6' };
-  switch (status) {
-    case StatusProps.info:
-      return { color: 'blue-6', icon: 'info-circle' };
-    case StatusProps.error:
-      return { color: 'red-6', icon: 'close-circle' };
-    case StatusProps.warning:
-      return { color: 'warmyellow-6', icon: 'exclamation-circle' };
-    case StatusProps.success:
-      return { color: 'green-6', icon: 'check-circle' };
-  }
-};
-Generate.createComponent = (element, props) => {
-  let box = document.createElement(element);
-  Object.keys(props).forEach(key => {
-    box[key] = props[key];
-  });
-  document.body.appendChild(box);
-  return box;
-};
-Generate.debounceInput = (func, wait, immediate) => {
-  let timeout;
-  return function () {
-    let context = this, args = arguments;
-    let later = function () {
-      timeout = null;
-      if (!immediate)
-        func.apply(context, args);
-    };
-    let callNow = immediate && !timeout;
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-    if (callNow)
-      func.apply(context, args);
-  };
-};
-Generate.flatArray = (arr) => {
-  return arr.reduce((acc, val) => {
-    return acc.concat(Array.isArray(val) ? Generate.flatArray(val) : val);
-  }, []);
-};
-
-var Bcm;
-(function (Bcm) {
-  let HtmlElementType;
-  (function (HtmlElementType) {
-    HtmlElementType["div"] = "div";
-    HtmlElementType["span"] = "span";
-    HtmlElementType["button"] = "button";
-    HtmlElementType["a"] = "a";
-    HtmlElementType["input"] = "input";
-    HtmlElementType["textarea"] = "textarea";
-    HtmlElementType["select"] = "select";
-    HtmlElementType["option"] = "option";
-    HtmlElementType["img"] = "img";
-    HtmlElementType["table"] = "table";
-    HtmlElementType["tr"] = "tr";
-    HtmlElementType["td"] = "td";
-    HtmlElementType["th"] = "th";
-    HtmlElementType["tbody"] = "tbody";
-    HtmlElementType["thead"] = "thead";
-    HtmlElementType["tfoot"] = "tfoot";
-    HtmlElementType["ul"] = "ul";
-    HtmlElementType["li"] = "li";
-    HtmlElementType["form"] = "form";
-    HtmlElementType["label"] = "label";
-    HtmlElementType["main"] = "main";
-    HtmlElementType["header"] = "header";
-    HtmlElementType["footer"] = "footer";
-    HtmlElementType["section"] = "section";
-    HtmlElementType["article"] = "article";
-    HtmlElementType["nav"] = "nav";
-    HtmlElementType["aside"] = "aside";
-  })(HtmlElementType = Bcm.HtmlElementType || (Bcm.HtmlElementType = {}));
-  let Status;
-  (function (Status) {
-    Status["info"] = "info";
-    Status["error"] = "error";
-    Status["warning"] = "warning";
-    Status["success"] = "success";
-    Status["default"] = "default";
-  })(Status = Bcm.Status || (Bcm.Status = {}));
-  let Shape;
-  (function (Shape) {
-    Shape["ellipse"] = "ellipse";
-    Shape["square"] = "square";
-  })(Shape = Bcm.Shape || (Bcm.Shape = {}));
-  let Direction;
-  (function (Direction) {
-    Direction["horizontal"] = "horizontal";
-    Direction["vertical"] = "vertical";
-  })(Direction = Bcm.Direction || (Bcm.Direction = {}));
-  let PreDefinedIconSize;
-  (function (PreDefinedIconSize) {
-    PreDefinedIconSize[PreDefinedIconSize["large"] = 48] = "large";
-    PreDefinedIconSize[PreDefinedIconSize["medium"] = 24] = "medium";
-    PreDefinedIconSize[PreDefinedIconSize["default"] = 16] = "default";
-    PreDefinedIconSize[PreDefinedIconSize["small"] = 12] = "small";
-    PreDefinedIconSize[PreDefinedIconSize["xsmall"] = 8] = "xsmall";
-  })(PreDefinedIconSize = Bcm.PreDefinedIconSize || (Bcm.PreDefinedIconSize = {}));
-  let IconSize;
-  (function (IconSize) {
-    IconSize["small"] = "16";
-    IconSize["medium"] = "20";
-    IconSize["large"] = "24";
-  })(IconSize = Bcm.IconSize || (Bcm.IconSize = {}));
-  let Size;
-  (function (Size) {
-    Size["small"] = "small";
-    Size["medium"] = "medium";
-    Size["large"] = "large";
-    Size["xsmall"] = "xsmall";
-    Size["xlarge"] = "xlarge";
-    Size["xxlarge"] = "xxlarge";
-    Size["xxxlarge"] = "xxxlarge";
-  })(Size = Bcm.Size || (Bcm.Size = {}));
-  let Kind;
-  (function (Kind) {
-    Kind["solid"] = "solid";
-    Kind["ghost"] = "ghost";
-    Kind["link"] = "link";
-    Kind["solid-link"] = "solid-link";
-    Kind["ghost-link"] = "ghost-link";
-  })(Kind = Bcm.Kind || (Bcm.Kind = {}));
-  let ButtonType;
-  (function (ButtonType) {
-    ButtonType["button"] = "button";
-    ButtonType["reset"] = "reset";
-    ButtonType["submit"] = "submit";
-  })(ButtonType = Bcm.ButtonType || (Bcm.ButtonType = {}));
-  let IconPosition;
-  (function (IconPosition) {
-    IconPosition["prefix"] = "prefix";
-    IconPosition["suffix"] = "suffix";
-  })(IconPosition = Bcm.IconPosition || (Bcm.IconPosition = {}));
-  let TagType;
-  (function (TagType) {
-    TagType["basic"] = "basic";
-    TagType["add"] = "add";
-    TagType["checkable"] = "checkable";
-    TagType["dissmisable"] = "dissmisable";
-  })(TagType = Bcm.TagType || (Bcm.TagType = {}));
-  let FontSize;
-  (function (FontSize) {
-    FontSize["size-1"] = "size-1";
-    FontSize["size-2"] = "size-2";
-    FontSize["size-3"] = "size-3";
-    FontSize["size-4"] = "size-4";
-    FontSize["size-5"] = "size-5";
-    FontSize["size-6"] = "size-6";
-    FontSize["size-7"] = "size-7";
-    FontSize["size-8"] = "size-8";
-    FontSize["size-9"] = "size-9";
-  })(FontSize = Bcm.FontSize || (Bcm.FontSize = {}));
-  let FontSizeValue;
-  (function (FontSizeValue) {
-    FontSizeValue[FontSizeValue["size-1"] = 12] = "size-1";
-    FontSizeValue[FontSizeValue["size-2"] = 14] = "size-2";
-    FontSizeValue[FontSizeValue["size-3"] = 16] = "size-3";
-    FontSizeValue[FontSizeValue["size-4"] = 20] = "size-4";
-    FontSizeValue[FontSizeValue["size-5"] = 24] = "size-5";
-    FontSizeValue[FontSizeValue["size-6"] = 30] = "size-6";
-    FontSizeValue[FontSizeValue["size-7"] = 38] = "size-7";
-    FontSizeValue[FontSizeValue["size-8"] = 46] = "size-8";
-    FontSizeValue[FontSizeValue["size-9"] = 56] = "size-9";
-  })(FontSizeValue = Bcm.FontSizeValue || (Bcm.FontSizeValue = {}));
-  let FontWeight;
-  (function (FontWeight) {
-    FontWeight["thin"] = "thin";
-    FontWeight["light"] = "light";
-    FontWeight["regular"] = "regular";
-    FontWeight["medium"] = "medium";
-    FontWeight["bold"] = "bold";
-    FontWeight["black"] = "black";
-  })(FontWeight = Bcm.FontWeight || (Bcm.FontWeight = {}));
-  let ColorPalette;
-  (function (ColorPalette) {
-    ColorPalette["default"] = "default";
-    ColorPalette["black"] = "black";
-    ColorPalette["white"] = "white";
-    ColorPalette["prime-blue"] = "prime-blue";
-    ColorPalette["prime-blue-1"] = "prime-blue-1";
-    ColorPalette["prime-blue-2"] = "prime-blue-2";
-    ColorPalette["prime-blue-3"] = "prime-blue-3";
-    ColorPalette["prime-blue-4"] = "prime-blue-4";
-    ColorPalette["prime-blue-5"] = "prime-blue-5";
-    ColorPalette["prime-blue-6"] = "prime-blue-6";
-    ColorPalette["prime-blue-7"] = "prime-blue-7";
-    ColorPalette["prime-blue-8"] = "prime-blue-8";
-    ColorPalette["prime-blue-9"] = "prime-blue-9";
-    ColorPalette["prime-blue-10"] = "prime-blue-10";
-    ColorPalette["grey"] = "grey";
-    ColorPalette["grey-1"] = "grey-1";
-    ColorPalette["grey-2"] = "grey-2";
-    ColorPalette["grey-3"] = "grey-3";
-    ColorPalette["grey-4"] = "grey-4";
-    ColorPalette["grey-5"] = "grey-5";
-    ColorPalette["grey-6"] = "grey-6";
-    ColorPalette["grey-7"] = "grey-7";
-    ColorPalette["grey-8"] = "grey-8";
-    ColorPalette["grey-9"] = "grey-9";
-    ColorPalette["grey-10"] = "grey-10";
-    ColorPalette["blue"] = "blue";
-    ColorPalette["blue-1"] = "blue-1";
-    ColorPalette["blue-2"] = "blue-2";
-    ColorPalette["blue-3"] = "blue-3";
-    ColorPalette["blue-4"] = "blue-4";
-    ColorPalette["blue-5"] = "blue-5";
-    ColorPalette["blue-6"] = "blue-6";
-    ColorPalette["blue-7"] = "blue-7";
-    ColorPalette["blue-8"] = "blue-8";
-    ColorPalette["blue-9"] = "blue-9";
-    ColorPalette["blue-10"] = "blue-10";
-    ColorPalette["warmyellow"] = "warmyellow";
-    ColorPalette["warmyellow-1"] = "warmyellow-1";
-    ColorPalette["warmyellow-2"] = "warmyellow-2";
-    ColorPalette["warmyellow-3"] = "warmyellow-3";
-    ColorPalette["warmyellow-4"] = "warmyellow-4";
-    ColorPalette["warmyellow-5"] = "warmyellow-5";
-    ColorPalette["warmyellow-6"] = "warmyellow-6";
-    ColorPalette["warmyellow-7"] = "warmyellow-7";
-    ColorPalette["warmyellow-8"] = "warmyellow-8";
-    ColorPalette["warmyellow-9"] = "warmyellow-9";
-    ColorPalette["warmyellow-10"] = "warmyellow-10";
-    ColorPalette["yellow"] = "yellow";
-    ColorPalette["yellow-1"] = "yellow-1";
-    ColorPalette["yellow-2"] = "yellow-2";
-    ColorPalette["yellow-3"] = "yellow-3";
-    ColorPalette["yellow-4"] = "yellow-4";
-    ColorPalette["yellow-5"] = "yellow-5";
-    ColorPalette["yellow-6"] = "yellow-6";
-    ColorPalette["yellow-7"] = "yellow-7";
-    ColorPalette["yellow-8"] = "yellow-8";
-    ColorPalette["yellow-9"] = "yellow-9";
-    ColorPalette["yellow-10"] = "yellow-10";
-    ColorPalette["limegreen"] = "limegreen";
-    ColorPalette["limegreen-1"] = "limegreen-1";
-    ColorPalette["limegreen-2"] = "limegreen-2";
-    ColorPalette["limegreen-3"] = "limegreen-3";
-    ColorPalette["limegreen-4"] = "limegreen-4";
-    ColorPalette["limegreen-5"] = "limegreen-5";
-    ColorPalette["limegreen-6"] = "limegreen-6";
-    ColorPalette["limegreen-7"] = "limegreen-7";
-    ColorPalette["limegreen-8"] = "limegreen-8";
-    ColorPalette["limegreen-9"] = "limegreen-9";
-    ColorPalette["limegreen-10"] = "limegreen-10";
-    ColorPalette["red"] = "red";
-    ColorPalette["red-1"] = "red-1";
-    ColorPalette["red-2"] = "red-2";
-    ColorPalette["red-3"] = "red-3";
-    ColorPalette["red-4"] = "red-4";
-    ColorPalette["red-5"] = "red-5";
-    ColorPalette["red-6"] = "red-6";
-    ColorPalette["red-7"] = "red-7";
-    ColorPalette["red-8"] = "red-8";
-    ColorPalette["red-9"] = "red-9";
-    ColorPalette["red-10"] = "red-10";
-    ColorPalette["darkorange"] = "darkorange";
-    ColorPalette["darkorange-1"] = "darkorange-1";
-    ColorPalette["darkorange-2"] = "darkorange-2";
-    ColorPalette["darkorange-3"] = "darkorange-3";
-    ColorPalette["darkorange-4"] = "darkorange-4";
-    ColorPalette["darkorange-5"] = "darkorange-5";
-    ColorPalette["darkorange-6"] = "darkorange-6";
-    ColorPalette["darkorange-7"] = "darkorange-7";
-    ColorPalette["darkorange-8"] = "darkorange-8";
-    ColorPalette["darkorange-9"] = "darkorange-9";
-    ColorPalette["darkorange-10"] = "darkorange-10";
-    ColorPalette["orange"] = "orange";
-    ColorPalette["orange-1"] = "orange-1";
-    ColorPalette["orange-2"] = "orange-2";
-    ColorPalette["orange-3"] = "orange-3";
-    ColorPalette["orange-4"] = "orange-4";
-    ColorPalette["orange-5"] = "orange-5";
-    ColorPalette["orange-6"] = "orange-6";
-    ColorPalette["orange-7"] = "orange-7";
-    ColorPalette["orange-8"] = "orange-8";
-    ColorPalette["orange-9"] = "orange-9";
-    ColorPalette["orange-10"] = "orange-10";
-    ColorPalette["green"] = "green";
-    ColorPalette["green-1"] = "green-1";
-    ColorPalette["green-2"] = "green-2";
-    ColorPalette["green-3"] = "green-3";
-    ColorPalette["green-4"] = "green-4";
-    ColorPalette["green-5"] = "green-5";
-    ColorPalette["green-6"] = "green-6";
-    ColorPalette["green-7"] = "green-7";
-    ColorPalette["green-8"] = "green-8";
-    ColorPalette["green-9"] = "green-9";
-    ColorPalette["green-10"] = "green-10";
-    ColorPalette["turquosie"] = "turquosie";
-    ColorPalette["turquosie-1"] = "turquosie-1";
-    ColorPalette["turquosie-2"] = "turquosie-2";
-    ColorPalette["turquosie-3"] = "turquosie-3";
-    ColorPalette["turquosie-4"] = "turquosie-4";
-    ColorPalette["turquosie-5"] = "turquosie-5";
-    ColorPalette["turquosie-6"] = "turquosie-6";
-    ColorPalette["turquosie-7"] = "turquosie-7";
-    ColorPalette["turquosie-8"] = "turquosie-8";
-    ColorPalette["turquosie-9"] = "turquosie-9";
-    ColorPalette["turquosie-10"] = "turquosie-10";
-    ColorPalette["cobaltblue"] = "cobaltblue";
-    ColorPalette["cobaltblue-1"] = "cobaltblue-1";
-    ColorPalette["cobaltblue-2"] = "cobaltblue-2";
-    ColorPalette["cobaltblue-3"] = "cobaltblue-3";
-    ColorPalette["cobaltblue-4"] = "cobaltblue-4";
-    ColorPalette["cobaltblue-5"] = "cobaltblue-5";
-    ColorPalette["cobaltblue-6"] = "cobaltblue-6";
-    ColorPalette["cobaltblue-7"] = "cobaltblue-7";
-    ColorPalette["cobaltblue-8"] = "cobaltblue-8";
-    ColorPalette["cobaltblue-9"] = "cobaltblue-9";
-    ColorPalette["cobaltblue-10"] = "cobaltblue-10";
-    ColorPalette["magenta"] = "magenta";
-    ColorPalette["magenta-1"] = "magenta-1";
-    ColorPalette["magenta-2"] = "magenta-2";
-    ColorPalette["magenta-3"] = "magenta-3";
-    ColorPalette["magenta-4"] = "magenta-4";
-    ColorPalette["magenta-5"] = "magenta-5";
-    ColorPalette["magenta-6"] = "magenta-6";
-    ColorPalette["magenta-7"] = "magenta-7";
-    ColorPalette["magenta-8"] = "magenta-8";
-    ColorPalette["magenta-9"] = "magenta-9";
-    ColorPalette["magenta-10"] = "magenta-10";
-    ColorPalette["purple"] = "purple";
-    ColorPalette["purple-1"] = "purple-1";
-    ColorPalette["purple-2"] = "purple-2";
-    ColorPalette["purple-3"] = "purple-3";
-    ColorPalette["purple-4"] = "purple-4";
-    ColorPalette["purple-5"] = "purple-5";
-    ColorPalette["purple-6"] = "purple-6";
-    ColorPalette["purple-7"] = "purple-7";
-    ColorPalette["purple-8"] = "purple-8";
-    ColorPalette["purple-9"] = "purple-9";
-    ColorPalette["purple-10"] = "purple-10";
-    ColorPalette["bc-red"] = "bc-red";
-    ColorPalette["bc-red-1"] = "bc-red-1";
-    ColorPalette["bc-red-2"] = "bc-red-2";
-    ColorPalette["bc-red-3"] = "bc-red-3";
-    ColorPalette["bc-red-4"] = "bc-red-4";
-    ColorPalette["bc-red-5"] = "bc-red-5";
-    ColorPalette["bc-red-6"] = "bc-red-6";
-    ColorPalette["bc-red-7"] = "bc-red-7";
-    ColorPalette["bc-red-8"] = "bc-red-8";
-    ColorPalette["bc-red-9"] = "bc-red-9";
-    ColorPalette["bc-blue"] = "bc-blue";
-    ColorPalette["bc-blue-1"] = "bc-blue-1";
-    ColorPalette["bc-blue-2"] = "bc-blue-2";
-    ColorPalette["bc-blue-3"] = "bc-blue-3";
-    ColorPalette["bc-blue-4"] = "bc-blue-4";
-    ColorPalette["bc-blue-5"] = "bc-blue-5";
-    ColorPalette["bc-blue-6"] = "bc-blue-6";
-    ColorPalette["bc-blue-7"] = "bc-blue-7";
-    ColorPalette["bc-blue-8"] = "bc-blue-8";
-    ColorPalette["bc-blue-9"] = "bc-blue-9";
-    ColorPalette["bc-green"] = "bc-green";
-    ColorPalette["bc-green-1"] = "bc-green-1";
-    ColorPalette["bc-green-2"] = "bc-green-2";
-    ColorPalette["bc-green-3"] = "bc-green-3";
-    ColorPalette["bc-green-4"] = "bc-green-4";
-    ColorPalette["bc-green-5"] = "bc-green-5";
-    ColorPalette["bc-green-6"] = "bc-green-6";
-    ColorPalette["bc-green-7"] = "bc-green-7";
-    ColorPalette["bc-green-8"] = "bc-green-8";
-    ColorPalette["bc-green-9"] = "bc-green-9";
-    ColorPalette["bc-orange"] = "bc-orange";
-    ColorPalette["bc-orange-1"] = "bc-orange-1";
-    ColorPalette["bc-orange-2"] = "bc-orange-2";
-    ColorPalette["bc-orange-3"] = "bc-orange-3";
-    ColorPalette["bc-orange-4"] = "bc-orange-4";
-    ColorPalette["bc-orange-5"] = "bc-orange-5";
-    ColorPalette["bc-orange-6"] = "bc-orange-6";
-    ColorPalette["bc-orange-7"] = "bc-orange-7";
-    ColorPalette["bc-orange-8"] = "bc-orange-8";
-    ColorPalette["bc-orange-9"] = "bc-orange-9";
-  })(ColorPalette = Bcm.ColorPalette || (Bcm.ColorPalette = {}));
-  let InputType;
-  (function (InputType) {
-    InputType["text"] = "text";
-    InputType["number"] = "number";
-    InputType["email"] = "email";
-    InputType["password"] = "password";
-    InputType["url"] = "url";
-    InputType["search"] = "search";
-    InputType["tel"] = "tel";
-    InputType["hidden"] = "hidden";
-  })(InputType = Bcm.InputType || (Bcm.InputType = {}));
-  let KeyCode;
-  (function (KeyCode) {
-    KeyCode[KeyCode["backspace"] = 8] = "backspace";
-    KeyCode[KeyCode["tab"] = 9] = "tab";
-    KeyCode[KeyCode["enter"] = 13] = "enter";
-    KeyCode[KeyCode["shift"] = 16] = "shift";
-    KeyCode[KeyCode["ctrl"] = 17] = "ctrl";
-    KeyCode[KeyCode["alt"] = 18] = "alt";
-    KeyCode[KeyCode["pause"] = 19] = "pause";
-    KeyCode[KeyCode["capslock"] = 20] = "capslock";
-    KeyCode[KeyCode["escape"] = 27] = "escape";
-    KeyCode[KeyCode["space"] = 32] = "space";
-    KeyCode[KeyCode["pageup"] = 33] = "pageup";
-    KeyCode[KeyCode["pagedown"] = 34] = "pagedown";
-    KeyCode[KeyCode["end"] = 35] = "end";
-    KeyCode[KeyCode["home"] = 36] = "home";
-    KeyCode[KeyCode["left"] = 37] = "left";
-    KeyCode[KeyCode["up"] = 38] = "up";
-    KeyCode[KeyCode["right"] = 39] = "right";
-    KeyCode[KeyCode["down"] = 40] = "down";
-    KeyCode[KeyCode["insert"] = 45] = "insert";
-    KeyCode[KeyCode["delete"] = 46] = "delete";
-    KeyCode[KeyCode["f1"] = 112] = "f1";
-    KeyCode[KeyCode["f2"] = 113] = "f2";
-    KeyCode[KeyCode["f3"] = 114] = "f3";
-    KeyCode[KeyCode["f4"] = 115] = "f4";
-    KeyCode[KeyCode["f5"] = 116] = "f5";
-    KeyCode[KeyCode["f6"] = 117] = "f6";
-    KeyCode[KeyCode["f7"] = 118] = "f7";
-    KeyCode[KeyCode["f8"] = 119] = "f8";
-    KeyCode[KeyCode["f9"] = 120] = "f9";
-    KeyCode[KeyCode["f10"] = 121] = "f10";
-    KeyCode[KeyCode["f11"] = 122] = "f11";
-    KeyCode[KeyCode["f12"] = 123] = "f12";
-    KeyCode[KeyCode["numlock"] = 144] = "numlock";
-    KeyCode[KeyCode["scrolllock"] = 145] = "scrolllock";
-    KeyCode[KeyCode["semicolon"] = 186] = "semicolon";
-    KeyCode[KeyCode["equal"] = 187] = "equal";
-    KeyCode[KeyCode["comma"] = 188] = "comma";
-    KeyCode[KeyCode["dash"] = 189] = "dash";
-    KeyCode[KeyCode["period"] = 190] = "period";
-    KeyCode[KeyCode["slash"] = 191] = "slash";
-    KeyCode[KeyCode["backslash"] = 220] = "backslash";
-    KeyCode[KeyCode["bracketleft"] = 219] = "bracketleft";
-    KeyCode[KeyCode["bracketright"] = 221] = "bracketright";
-    KeyCode[KeyCode["quote"] = 222] = "quote";
-    KeyCode[KeyCode["backtick"] = 192] = "backtick";
-    KeyCode[KeyCode["a"] = 65] = "a";
-  })(KeyCode = Bcm.KeyCode || (Bcm.KeyCode = {}));
-  Bcm.FormErrorMessages = {
-    'email': 'Please enter a valid email address',
-    'password': 'Please enter a valid password',
-    'url': 'Please enter a valid URL',
-    'phone': 'Please enter a valid phone number',
-    'search': 'Please enter a valid search term',
-    'number': 'Please enter a valid number',
-    'text': 'Please enter a valid text',
-    'required': 'This field is required',
-    'minlength': 'This field must be at least {0} characters long',
-    'maxlength': 'This field must be at most {0} characters long',
-    'min': 'This field must be at least {0}',
-    'max': 'This field must be at most {0}',
-    'between': 'This field must be between {0} and {1}',
-    'pattern': 'This field is invalid',
-    'date': 'Please enter a valid date',
-    'time': 'Please enter a valid time',
-    'datetime': 'Please enter a valid date and time',
-    'datetime-local': 'Please enter a valid date and time',
-    'month': 'Please enter a valid month',
-    'week': 'Please enter a valid week',
-    'color': 'Please enter a valid color',
-    'file': 'Please enter a valid file',
-    'range': 'Please enter a valid range',
-    'radio': 'Please select a valid option',
-    'checkbox': 'Please select a valid option',
-    'select': 'Please select a valid option',
-    'multiple': 'Please select a valid option',
-  };
-  let IndeterminateType;
-  (function (IndeterminateType) {
-    IndeterminateType["uncheck"] = "uncheck";
-    IndeterminateType["indeterminate"] = "indeterminate";
-    IndeterminateType["determinate"] = "determinate"; // true
-  })(IndeterminateType = Bcm.IndeterminateType || (Bcm.IndeterminateType = {}));
-  let Placement;
-  (function (Placement) {
-    Placement["top"] = "top";
-    Placement["top-start"] = "top-start";
-    Placement["top-end"] = "top-end";
-    Placement["bottom"] = "bottom";
-    Placement["bottom-start"] = "bottom-start";
-    Placement["bottom-end"] = "bottom-end";
-    Placement["left"] = "left";
-    Placement["left-start"] = "left-start";
-    Placement["left-end"] = "left-end";
-    Placement["right"] = "right";
-    Placement["right-start"] = "right-start";
-    Placement["right-end"] = "right-end";
-  })(Placement = Bcm.Placement || (Bcm.Placement = {}));
-  let TriggerType;
-  (function (TriggerType) {
-    TriggerType["hover"] = "hover";
-    TriggerType["click"] = "click";
-    TriggerType["focus"] = "focus";
-  })(TriggerType = Bcm.TriggerType || (Bcm.TriggerType = {}));
-})(Bcm || (Bcm = {}));
-const Bcm$1 = Bcm;
-
-class StringHelper {
-}
-StringHelper.lowercase = (str) => str.toLowerCase();
-StringHelper.uppercase = (str) => str.toUpperCase();
-StringHelper.capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
-StringHelper.camelCase = (str) => str.replace(/\s(.)/g, function ($1) { return $1.toUpperCase(); }).replace(/\s/g, '');
-StringHelper.kebabCase = (str) => str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-StringHelper.snakeCase = (str) => str.replace(/([a-z])([A-Z])/g, '$1_$2').toLowerCase();
-StringHelper.titleCase = (str) => str.replace(/\w\S*/g, function (txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); });
-StringHelper.trim = (str) => str.trim();
-StringHelper.trimLeft = (str) => str.trimLeft();
-StringHelper.trimRight = (str) => str.trimRight();
-StringHelper.trimAll = (str) => str.trim().replace(/\s+/g, ' ');
-StringHelper.replace = (str, search, replace) => str.replace(search, replace);
-StringHelper.remove = (str, search) => str.replace(search, '');
-StringHelper.isNullOrEmpty = (str) => str === null || str === undefined || str === '';
-StringHelper.localizationMessage = (str, args) => str.replace(/{(\d+)}/g, (match, number) => typeof args[number] != 'undefined' ? args[number] : match);
-StringHelper.getMessage = (type, args) => StringHelper.localizationMessage(Bcm$1.FormErrorMessages[type], args);
-StringHelper.split = (str, separator) => str.split(separator);
-StringHelper.textContains = (str, search) => str.indexOf(search) !== -1;
-
-const SlotTemplate = ({ value, className, name }) => {
-  return StringHelper.isNullOrEmpty(value) ? h("span", { class: className },
-    h("slot", Object.assign({}, (name && { name: name })))) : h("span", { class: className }, value);
-};
-
-const LabelTemplate = ({ required, value, size, form, htmlFor, type }) => {
-  size = size || Bcm$1.FontSize['size-1'];
-  type = type || Bcm$1.Status.default;
-  const labelClasses = classnames('bcm-label__text', size, {
-    'bcm-label__text-error': type === Bcm$1.Status.error,
-  });
-  return (h("label", { form: form, htmlFor: htmlFor, class: labelClasses },
-    " ",
-    h(SlotTemplate, { value: value }),
-    " ",
-    required && ('*')));
-};
-
-const labelCss = "@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}.bcm-label{display:flex;align-items:center;grid-gap:2px}.bcm-label__text{display:inline-block;color:var(--bcm-color-grey-9);margin-bottom:4px}.bcm-label__text-error{color:var(--bcm-color-red-6)}";
-
-const BcmLabel = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /** Props **/
-    this._id = Generate.UID();
-    this.required = false;
-    this.size = Bcm$1.FontSize['size-1'];
-    this.hidden = false;
-    this.type = Bcm$1.Status.default;
-  }
-  render() {
-    const { required, value, size, form, htmlFor, hidden, type, tooltip } = this;
-    const hostClasses = classnames('bcm-label', { hidden });
-    const Label = (h(LabelTemplate, { form: form, htmlFor: htmlFor, value: value, size: size, type: type, required: required }));
-    return (h(Host, null, h("div", { class: hostClasses }, Label, tooltip && (h("bcm-tooltip", { message: tooltip, placement: 'top', trigger: 'hover' }, h("bcm-icon", { color: "grey-8", icon: "question-circle", type: "fill" }))))));
-  }
-  get el() { return getElement(this); }
-};
-BcmLabel.style = labelCss;
-
-const switchCss = "@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;margin:0 0 8px 0}:host(.hidden){display:none}*{box-sizing:border-box}.wrapper{display:inline-flex;padding-top:0px;padding-bottom:5px}.wrapper .active-text{color:var(--bcm-color-prime-blue-6);margin-left:4px}.wrapper .inactive-text{color:var(--bcm-color-grey-6);margin-right:4px}.container{display:flex;justify-content:space-between;align-items:center;border-radius:16px;background-color:var(--bcm-color-grey-6);position:relative}.container .handle{padding:1px;position:absolute;background-color:var(--bcm-color-grey-1);display:inline-flex;align-items:center;justify-content:center;border-radius:16px;transition:all 0.2s ease-in-out;box-shadow:0px 2px 2px rgba(0, 0, 0, 0.1), 0px 3px 1px rgba(0, 0, 0, 0.05), 0px 1px 5px rgba(0, 0, 0, 0.1)}.container .icon-active{opacity:0}.container .icon-inactive{opacity:1}.container.small{width:28px;min-width:28px;height:16px;padding:4px}.container.small .handle{width:12px;height:12px;left:4px}.container.small.switch-checked .handle{left:12px}.container.small:active:not(.disabled) .handle{width:16px}.container.small:active.switch-checked:not(.disabled) .handle{left:8px}.container.small .spinner{box-sizing:border-box;display:inline-flex;width:9px;height:9px;border-radius:50%;border:1px solid var(--bcm-color-grey-1);border-top-color:var(--bcm-color-grey-6);animation:spinner 1.5s linear infinite}.container.medium{width:44px;min-width:44px;height:22px;padding:4px}.container.medium .handle{width:16px;height:16px;left:4px}.container.medium.switch-checked .handle{left:24px}.container.medium:active:not(.disabled) .handle{width:22px}.container.medium:active.switch-checked:not(.disabled) .handle{left:18px}.container.medium .spinner{box-sizing:border-box;display:inline-flex;width:13px;height:13px;border-radius:50%;border:1px solid var(--bcm-color-grey-1);border-top-color:var(--bcm-color-grey-6);animation:spinner 1.5s linear infinite}.container.switch-checked{background-color:var(--bcm-color-prime-blue-6)}.container.switch-checked .icon-active{color:var(--bcm-color-grey-1);opacity:1}.container.switch-checked .icon-inactive{opacity:0}.container.switch-checked .spinner{border-top-color:var(--bcm-color-prime-blue-6)}.wrapper.disabled{opacity:40%;cursor:not-allowed}@keyframes spinner{to{transform:rotate(360deg)}}input[type=checkbox]{position:absolute;width:0;height:0;opacity:0}.label{display:flex;flex-direction:column;color:var(--bcm-color-grey-9);padding-right:4px;margin-right:8px;margin-bottom:8px}.caption-area{min-height:20px}.input-caption{display:block}:host(.error) .label{color:var(--bcm-color-red-6) !important}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}";
-
-const BcmSwitch = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.change = createEvent(this, "bcm-change", 7);
-    this.focus = createEvent(this, "bcm-focus", 7);
-    this.blur = createEvent(this, "bcm-blur", 7);
-    this.checked = false;
-    this.size = 'medium';
-    this.pending = false;
-    this.disabled = false;
-    this.hidden = false;
-    this.value = '';
-    this.label = null;
-    this.required = false;
-    this.noCaption = false;
-    this.captionType = 'default';
-  }
-  connectedCallback() {
-    this.captionCache = this.caption;
-    this.captionTypeCache = this.captionType;
-  }
-  handleClick() {
-    this.checked = this.input.checked;
-    this.value = this.checked;
-    this.change.emit(this.checked);
-  }
-  componentDidLoad() {
-    this.value = this.checked;
-  }
-  handleFocus() {
-    this.focus.emit();
-  }
-  handleBlur() {
-    this.blur.emit();
-  }
-  componentWillRender() {
-    if (this.pending) {
-      this.disabled = true;
-    }
-  }
-  async setClear() {
-    if (this.input.checked == true) {
-      this.input.checked = false;
-      this.checked = this.input.checked;
-      this.value = this.checked;
-      this.change.emit(this.checked);
-    }
-  }
-  async resetCaption() {
-    this.caption = this.captionCache;
-    this.captionType = this.captionTypeCache;
-    this.captionError = null;
-  }
-  render() {
-    const { checked, size, activeIcon, inactiveIcon, activeText, inactiveText, pending, disabled, label, required, noCaption, captionType, captionError, caption } = this;
-    const classes = classnames('container', size, {
-      'switch-checked': checked,
-      'disabled': disabled
-    });
-    const wrapperClass = classnames('wrapper', {
-      'checked': checked,
-      'disabled': disabled
-    });
-    const captionClasses = classnames('size-1', 'input-caption', 'caption-' + captionType);
-    const isPermitted = (condition) => {
-      return (condition && size === 'medium');
-    };
-    const isMedium = size === 'medium';
-    const hostClasses = classnames('bcm-switch', this.hidden ? 'hidden' : null);
-    return (h(Host, { class: hostClasses }, label && h("div", null, h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required })), h("label", { class: wrapperClass }, isPermitted(inactiveText) && h("span", { class: "inactive-text size-1" }, inactiveText), h("div", { class: classes }, isMedium && h("bcm-icon", { icon: activeIcon, size: 14, class: "icon-active" }), h("span", { class: "handle" }, pending && h("span", { class: "spinner" })), isMedium && h("bcm-icon", { icon: inactiveIcon, size: 14, class: "icon-inactive" })), h("input", { onClick: () => this.handleClick(), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur(), ref: el => (this.input = el), checked: checked, type: "checkbox", class: "switch", disabled: disabled }), isPermitted(activeText) && h("span", { class: "active-text size-1" }, activeText)), !noCaption && (h("div", { class: "caption-area" }, captionType == "error"
-      ? h("span", { class: captionClasses }, " ", captionError, " ")
-      : caption && h("span", { class: captionClasses }, " ", caption, " ")))));
-  }
-};
-BcmSwitch.style = switchCss;
-
-const textareaCss = "@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:100%;margin:0 0 8px 0}:host(.hidden){display:none}.textarea-wrapper{width:256px}.textarea-wrapper.full-width{width:100%}.textarea-wrapper:hover .clear-button{opacity:1}.textarea-container{position:relative;width:100%;border:1px solid var(--bcm-color-grey-5);border-radius:2px}.textarea-container.empty .clear-button{display:none}.textarea-container.focused:not(.disabled){outline:none;border-color:var(--bcm-color-prime-blue-5);box-shadow:0px 0px 4px var(--bcm-color-prime-blue-6)}.textarea-container:hover:not(:disabled){border-color:var(--bcm-color-prime-blue-6)}.textarea-container textarea{resize:vertical;display:flex;flex:1 1 auto;align-items:center;color:var(--bcm-color-grey-8);width:100%;background-color:var(--bcm-color-grey-1);border:none;border-radius:2px;box-shadow:none;font-family:\"Roboto\", sans-serif;-webkit-appearance:none;box-sizing:border-box}.textarea-container textarea::-webkit-search-decoration,.textarea-container textarea::-webkit-search-cancel-button,.textarea-container textarea::-webkit-search-results-button,.textarea-container textarea::-webkit-search-results-decoration{-webkit-appearance:none}.textarea-container textarea::placeholder{color:var(--bcm-color-grey-6);user-select:none}.textarea-container textarea:focus:not(:disabled){outline:none;border-color:none;box-shadow:none}.textarea-container textarea:hover:not(:disabled){border-color:none}.textarea-container textarea:disabled{background-color:var(--bcm-color-grey-3);cursor:not-allowed}.textarea-container textarea.clearable{padding-right:32px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.label{display:flex;flex-direction:column;color:var(--bcm-color-grey-9);margin-bottom:4px}.caption-area{min-height:20px;display:flex;flex-direction:row;justify-content:space-between}.input-caption{display:block}.clear-button{position:absolute;opacity:0;right:10px;top:7px;display:inline-flex;align-items:center;border:none;background:none;padding:0;cursor:pointer}.clear-button:focus{outline:none}.textarea-footer{display:flex;justify-content:space-between;margin-bottom:8px;min-height:20px}.textarea-footer .count{color:var(--bcm-color-grey-7);margin-left:4px}.textarea-footer .count:only-child{margin-left:auto}.size-large{padding:7px 12px;min-height:38px}.size-large~.clear-button{top:12px}.size-medium{padding:4px 12px;min-height:30px}.size-medium~.clear-button{top:7px}.size-small{padding:0px 12px;min-height:20px}.size-small~.clear-button{top:2px}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}.error .label{color:var(--bcm-color-red-6) !important}.error .textarea-container{border:1px solid var(--bcm-color-red-6) !important}";
-
-let id$1 = 0;
-const BcmTextarea = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.focus = createEvent(this, "bcm-focus", 7);
-    this.blur = createEvent(this, "bcm-blur", 7);
-    this.clear = createEvent(this, "bcm-clear", 7);
-    this.change = createEvent(this, "bcm-change", 7);
-    this.input = createEvent(this, "bcm-input", 7);
-    this.textareaId = `textarea-${++id$1}`;
-    this.valueLength = 0;
-    this.noCaption = false;
-    this.captionType = 'default';
-    this.rows = 1;
-    this.size = 'medium';
-    this.resize = 'vertical';
-    this.hidden = false;
-    this.required = false;
-    this.hasFocus = false;
-  }
-  async setFocus() {
-    this.textarea.focus();
-  }
-  async removeFocus() {
-    this.textarea.blur();
-  }
-  async select() {
-    return this.textarea.select();
-  }
-  async setValue(value) {
-    this.textarea.value = value;
-    this.value = value;
-    this.handleChange();
-    return value;
-  }
-  async setClear() {
-    this.textarea.value = '';
-    this.value = '';
-  }
-  async resetCaption() {
-    this.caption = this.captionCache;
-    this.captionType = this.captionTypeCache;
-    this.captionError = null;
-  }
-  async getValue() {
-    return this.value;
-  }
-  handleFocus() {
-    this.hasFocus = true;
-    this.focus.emit();
-  }
-  handleBlur() {
-    this.hasFocus = false;
-    this.blur.emit();
-  }
-  handleChange() {
-    this.value = this.textarea.value;
-    this.change.emit(this.value);
-  }
-  watchValue() {
-    this.handleChange();
-  }
-  handleInput() {
-    this.value = this.textarea.value;
-    this.setTextareaHeight();
-    this.input.emit(this.value);
-  }
-  handleClear(e) {
-    this.value = '';
-    this.clear.emit();
-    this.textarea.focus();
-    e.stopPropagation();
-  }
-  setTextareaHeight() {
-    if (this.resize === 'auto') {
-      this.textarea.style.height = 'auto';
-      this.textarea.style.height = (this.textarea.scrollHeight + 2) + 'px';
-    }
-    else {
-      this.textarea.style.height = undefined;
-    }
-  }
-  connectedCallback() {
-    this.handleChange = this.handleChange.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleInput = this.handleInput.bind(this);
-    this.handleClear = this.handleClear.bind(this);
-    this.setTextareaHeight = this.setTextareaHeight.bind(this);
-    this.captionCache = this.caption;
-    this.captionTypeCache = this.captionType;
-  }
-  componentWillRender() {
-    this.valueLength = this.value ? this.value.length : 0;
-    // this.fullWidth 
-    //     ? this.el.style.width = '100%'
-    //     : this.el.style.width = 'initial'
-  }
-  render() {
-    const { fullWidth, size, rows, disabled, clearable, label, hasFocus, noCaption, caption, captionError, captionType, value, resize, maxLength, placeholder, valueLength, required } = this;
-    const wrapperClasses = classnames('textarea-wrapper', {
-      'full-width': fullWidth,
-      'error': captionType == 'error' ? true : false
-    });
-    const contanerClasses = classnames('textarea-container', 'resize-' + resize, 'textarea-' + size, {
-      'empty': (value === null || value === void 0 ? void 0 : value.length) < 1,
-      'focused': hasFocus,
-      'disabled': disabled,
-    });
-    const captionClasses = classnames('size-1', 'input-caption', 'caption-' + captionType);
-    const countClasses = classnames('size-1', 'input-caption', 'caption-default');
-    const textareaClasses = classnames('size-' + size, {
-      'size-3': size === 'large',
-      'size-2': size === 'small' || size === 'medium',
-      'clearable': clearable
-    });
-    const hostClasses = classnames(this.hidden ? 'hidden' : null);
-    return (h(Host, { class: hostClasses }, h("div", { class: wrapperClasses }, label && h("div", null, h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required, htmlFor: this.textareaId })), h("div", { class: contanerClasses }, h("textarea", { ref: el => (this.textarea = el), onInput: this.handleInput, onFocus: this.handleFocus, onChange: this.handleChange, onBlur: this.handleBlur, class: textareaClasses, id: this.textareaId, value: value, rows: rows, disabled: disabled, maxlength: maxLength, placeholder: placeholder }), clearable && (h("button", { class: "clear-button", onClick: this.handleClear }, h("bcm-icon", { icon: "close-circle", type: "fill", size: 18, color: "grey-7" })))), !noCaption || maxLength ? (h("div", { class: "caption-area" }, h("span", null, captionType == "error"
-      ? h("span", { class: captionClasses }, " ", captionError, " ")
-      : caption && h("span", { class: captionClasses }, " ", caption, " ")), maxLength && h("span", { class: countClasses }, " ", `${valueLength}/${maxLength}`, " "))) : null)));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "value": ["watchValue"]
-  }; }
-};
-BcmTextarea.style = textareaCss;
-
-const tooltipCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:inline-flex}:host(.hidden){display:none}:host(:focus){outline:none}.tooltip{position:relative;}.tooltip .box{position:absolute;display:none;box-sizing:border-box;background-color:#262626;border:1px solid #262626;border-radius:2px;z-index:10700;width:max-content;padding:4px 8px;color:var(--bcm-color-grey-1)}.tooltip::after{content:\"\";position:absolute;display:none;border:6px solid;z-index:10700;pointer-events:none}.tooltip.open .box,.tooltip.open::after{display:block}.tooltip.top .box{bottom:100%;margin-bottom:8px}.tooltip.top::after{bottom:100%;margin-bottom:-4px;border-color:#262626 transparent transparent transparent}.tooltip.bottom .box{top:100%;margin-top:8px}.tooltip.bottom::after{top:100%;margin-top:-4px;border-color:transparent transparent #262626 transparent}.tooltip.left .box{right:100%;margin-right:8px}.tooltip.left::after{right:100%;margin-right:-4px;border-color:transparent transparent transparent #262626}.tooltip.right .box{left:100%;margin-left:8px}.tooltip.right::after{left:100%;margin-left:-4px;border-color:transparent #262626 transparent transparent}.tooltip.top.center .box,.tooltip.bottom.center .box{left:50%;transform:translateX(-50%)}.tooltip.top.center::after,.tooltip.bottom.center::after{left:50%;transform:translateX(-50%)}.tooltip.top.start .box,.tooltip.bottom.start .box{left:0}.tooltip.top.start::after,.tooltip.bottom.start::after{left:8px}.tooltip.top.end .box,.tooltip.bottom.end .box{right:0}.tooltip.top.end::after,.tooltip.bottom.end::after{right:8px}.tooltip.left.center .box,.tooltip.right.center .box{top:50%;transform:translateY(-50%)}.tooltip.left.center::after,.tooltip.right.center::after{top:50%;transform:translateY(-50%)}.tooltip.left.start .box,.tooltip.right.start .box{top:0}.tooltip.left.start::after,.tooltip.right.start::after{top:4px}.tooltip.left.end .box,.tooltip.right.end .box{bottom:0}.tooltip.left.end::after,.tooltip.right.end::after{bottom:4px}";
-
-const BcmTooltip = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.onShow = createEvent(this, "bcm-show", 7);
-    this.onHide = createEvent(this, "bcm-hide", 7);
-    this.placement = 'top';
-    this.trigger = 'hover';
-    this.hidden = false;
-    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
-  }
-  async show() {
-    // Prevent subsequent calls
-    if (this.open) {
-      return;
-    }
-    this.open = true;
-    this.onShow.emit();
-  }
-  async hide() {
-    // Prevent subsequent calls
-    if (!this.open) {
-      return;
-    }
-    this.open = false;
-    this.onHide.emit();
-  }
-  handleClickOutside(e) {
-    if (!this.host.contains(e.target)) {
-      if (this.open) {
-        this.open = false;
-      }
-    }
-  }
-  async handleOpen() {
-    await this.createElement();
-    var tooltipBox = document.getElementById("box" + this._internal_id).shadowRoot.querySelector(".tooltip-box");
-    if (tooltipBox && tooltipBox.querySelector(".box")) {
-      var tooltipBoxIn = tooltipBox.querySelector(".box");
-      popoverPlacement(tooltipBoxIn, this.host, this.placement, (place) => this.placement = place);
-      tooltipBox.classList.toggle("open");
-    }
-  }
-  async createElement() {
-    var target = this.host.getBoundingClientRect();
-    var placementString = String([...this.getPlacement()]).replace(',', ' ');
-    var element;
-    if (!document.getElementById("box" + this._internal_id)) {
-      element = document.createElement("bcm-tooltip-box");
-      element.setAttribute("id", "box" + this._internal_id);
-    }
-    else {
-      element = document.getElementById("box" + this._internal_id);
-    }
-    element.setAttribute("message", this.message);
-    // element.setAttribute("placement", placementString)
-    element.style.position = "absolute";
-    // element.style.top = target.top + "px"
-    // element.style.left = (target.left + (target.width / 2)) + "px"
-    element.setAttribute("placement", placementString);
-    // element.style.zIndex = "999999999"
-    document.body.appendChild(element);
-    await delay(50);
-    var tooltipBox = document.getElementById("box" + this._internal_id).shadowRoot.querySelector(".tooltip-box");
-    if (tooltipBox && tooltipBox.querySelector(".box")) {
-      var tooltipBoxIn = tooltipBox.querySelector(".box");
-      popoverPlacement(tooltipBoxIn, this.host, this.placement, (place) => this.placement = place);
-    }
-    element.style.top = popoverBoxPlacement(this.placement, target)[0] + "px";
-    element.style.left = popoverBoxPlacement(this.placement, target)[1] + "px";
-  }
-  hasTrigger(trigger) {
-    return this.trigger === trigger;
-  }
-  getPlacement() {
-    const placements = this.placement.split('-');
-    if (placements.length === 1) {
-      placements.push('center');
-    }
-    return placements;
-  }
-  /*
-      Trigger Functions
-  */
-  handleMouseOver() {
-    if (this.hasTrigger('hover')) {
-      this.show();
-    }
-  }
-  handleMouseOut() {
-    if (this.hasTrigger('hover')) {
-      this.hide();
-    }
-  }
-  handleClick() {
-    if (this.hasTrigger('click')) {
-      this.open ? this.hide() : this.show();
-    }
-  }
-  handleFocus() {
-    if (this.hasTrigger('focus')) {
-      this.show();
-    }
-  }
-  handleBlur() {
-    if (this.hasTrigger('focus')) {
-      this.hide();
-    }
-  }
-  async componentDidRender() {
-    await this.createElement();
-    var tooltipBox = document.getElementById("box" + this._internal_id).shadowRoot.querySelector(".tooltip-box");
-    if (tooltipBox && tooltipBox.querySelector(".box")) {
-      var tooltipBoxIn = tooltipBox.querySelector(".box");
-      popoverPlacement(tooltipBoxIn, this.host, this.placement, (place) => this.placement = place);
-    }
-  }
-  render() {
-    const classes = classnames('tooltip', ...this.getPlacement(), {
-    // 'open': this.open
-    });
-    const hostClasses = classnames(this.hidden ? 'hidden' : null);
-    return (h(Host, { class: hostClasses, onClick: () => this.handleClick(), onMouseOver: () => this.handleMouseOver(), onMouseOut: () => this.handleMouseOut(), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur(), tabindex: 0 }, h("span", { class: classes }, h("span", { class: "box size-2" }, this.message), h("slot", null))));
-  }
-  get host() { return getElement(this); }
-  static get watchers() { return {
-    "open": ["handleOpen"]
-  }; }
-};
-BcmTooltip.style = tooltipCss;
-
-const tooltipBoxCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:inline-flex}:host(.hidden){display:none}:host(:focus){outline:none}.tooltip-box{position:relative;}.tooltip-box .box{position:absolute;display:none;box-sizing:border-box;background-color:#262626;border:1px solid #262626;border-radius:2px;z-index:10700;width:max-content;padding:4px 8px;color:var(--bcm-color-grey-1)}.tooltip-box::after{content:\"\";position:absolute;display:none;border:6px solid;z-index:10700;pointer-events:none}.tooltip-box.open .box,.tooltip-box.open::after{display:block}.tooltip-box.top .box{bottom:100%;margin-bottom:8px}.tooltip-box.top::after{bottom:100%;margin-bottom:-4px;border-color:#262626 transparent transparent transparent}.tooltip-box.bottom .box{top:100%;margin-top:8px}.tooltip-box.bottom::after{top:100%;margin-top:-4px;border-color:transparent transparent #262626 transparent}.tooltip-box.left .box{right:100%;margin-right:8px}.tooltip-box.left::after{right:100%;margin-right:-4px;border-color:transparent transparent transparent #262626}.tooltip-box.right .box{left:100%;margin-left:8px}.tooltip-box.right::after{left:100%;margin-left:-4px;border-color:transparent #262626 transparent transparent}.tooltip-box.top.center .box,.tooltip-box.bottom.center .box{left:50%;transform:translateX(-50%)}.tooltip-box.top.center::after,.tooltip-box.bottom.center::after{left:50%;transform:translateX(-50%)}.tooltip-box.top.start .box,.tooltip-box.bottom.start .box{left:0}.tooltip-box.top.start::after,.tooltip-box.bottom.start::after{left:8px}.tooltip-box.top.end .box,.tooltip-box.bottom.end .box{right:0}.tooltip-box.top.end::after,.tooltip-box.bottom.end::after{right:8px}.tooltip-box.left.center .box,.tooltip-box.right.center .box{top:50%;transform:translateY(-50%)}.tooltip-box.left.center::after,.tooltip-box.right.center::after{top:50%;transform:translateY(-50%)}.tooltip-box.left.start .box,.tooltip-box.right.start .box{top:0}.tooltip-box.left.start::after,.tooltip-box.right.start::after{top:4px}.tooltip-box.left.end .box,.tooltip-box.right.end .box{bottom:0}.tooltip-box.left.end::after,.tooltip-box.right.end::after{bottom:4px}.tooltip-box a{color:var(--bcm-color-grey-1)}";
-
-const BcmTooltipBox = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.hidden = false;
-  }
-  connectedCallback() { }
-  disconnectedCallback() { }
-  componentWillLoad() { }
-  componentDidLoad() { }
-  componentWillRender() { }
-  componentDidRender() { }
-  componentWillUpdate() { }
-  componentDidUpdate() { }
-  async openBox(open) {
-    this.open = open;
-  }
-  render() {
-    const classes = classnames('tooltip-box', this.open, this.placement);
-    const boxClasses = classnames('box');
-    const hostClasses = classnames(this.hidden ? 'hidden' : null);
-    return (h(Host, { class: hostClasses }, h("div", { class: classes }, h("div", { class: boxClasses, innerHTML: this.message }))));
-  }
-  get el() { return getElement(this); }
-};
-BcmTooltipBox.style = tooltipBoxCss;
-
-export { BcmButton as bcm_button, BcmCheckbox as bcm_checkbox, BcmCheckboxGroup as bcm_checkbox_group, BcmForm as bcm_form, BcmIcon as bcm_icon, BcmInput as bcm_input, BcmLabel as bcm_label, BcmSwitch as bcm_switch, BcmTextarea as bcm_textarea, BcmTooltip as bcm_tooltip, BcmTooltipBox as bcm_tooltip_box };
+export { BcmIcon as bcm_icon };