bromcom-ui 2.8.0-rc.9 → 2.8.1-rc.0

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

@@ -0,0 +1,1518 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-ddfd6d8f.js');
+const generate = require('./generate-411c1529.js');
+const bcm = require('./bcm-634604e3.js');
+const index$2 = require('./index-fdbf5226.js');
+const index = require('./index-4506fcd7.js');
+const slotTemplate = require('./slot-template-3e59d7d8.js');
+const colorHelper = require('./color-helper-d6d2028b.js');
+const captionTemplate = require('./caption-template-8d099fd6.js');
+const utils = require('./utils-fc077139.js');
+const isLoadDecorator = require('./is-load-decorator-137dded1.js');
+const labelTemplate = require('./label-template-cc69bc21.js');
+const stringHelper = require('./string-helper-45cffee0.js');
+require('./datetime-helper-eaf4fadb.js');
+require('./number-helper-91446798.js');
+require('./validators-c131b7c6.js');
+const tooltipHelper = require('./tooltip-helper-dee255e9.js');
+require('./element-dragger-a8562f82.js');
+require('./colors-e1d142ad.js');
+require('./_commonjsHelpers-bd20f4c0.js');
+require('./colors-56282b00.js');
+require('./floating-ui-74eb26d6.js');
+
+const variantOptions = {
+  save: {
+    text: 'Save',
+    color: 'emerald',
+    icon: 'far fa-save',
+    iconPosition: 'prefix',
+  },
+  ok: {
+    text: 'Ok',
+    color: 'emerald',
+    icon: 'far fa-check',
+    iconPosition: 'prefix',
+  },
+  new: {
+    text: 'New',
+    color: 'emerald',
+    icon: 'far fa-plus',
+    iconPosition: 'prefix',
+  },
+  add: {
+    text: 'Add',
+    color: 'emerald',
+    icon: 'far fa-plus',
+    iconPosition: 'prefix',
+  },
+  create: {
+    text: 'Create',
+    color: 'emerald',
+    icon: 'far fa-plus',
+    iconPosition: 'prefix',
+  },
+  prev: {
+    text: 'Prev',
+    color: '',
+    icon: 'far fa-arrow-left',
+    iconPosition: 'prefix',
+  },
+  next: {
+    text: 'Next',
+    color: '',
+    icon: 'far fa-arrow-right',
+    iconPosition: 'suffix',
+  },
+  apply: {
+    text: 'Apply',
+    color: '',
+    icon: 'far fa-check-circle',
+    iconPosition: 'prefix',
+  },
+  submit: {
+    text: 'Submit',
+    color: '',
+    icon: 'far fa-save',
+    iconPosition: 'prefix',
+  },
+  send: {
+    text: 'Send',
+    color: 'emerald',
+    icon: 'far fa-paper-plane',
+    iconPosition: 'prefix',
+  },
+  delete: {
+    text: 'Delete',
+    color: 'red',
+    icon: 'far fa-trash',
+    iconPosition: 'prefix',
+  },
+  cancel: {
+    text: 'Cancel',
+    color: 'red',
+    icon: 'far fa-times',
+    iconPosition: 'prefix',
+  },
+  decline: {
+    text: 'Decline',
+    color: 'red',
+    icon: 'far fa-ban',
+    iconPosition: 'prefix',
+  },
+  close: {
+    text: 'Close',
+    color: 'red',
+    icon: 'far fa-times-circle',
+    iconPosition: 'prefix',
+  },
+  archive: {
+    text: 'Archive',
+    color: 'red',
+    icon: 'far fa-folder-open',
+    iconPosition: 'prefix',
+  },
+  remove: {
+    text: 'Remove',
+    color: 'red',
+    icon: 'far fa-minus-circle',
+    iconPosition: 'prefix',
+  },
+  edit: {
+    text: 'Edit',
+    color: '',
+    icon: 'far fa-edit',
+    iconPosition: 'prefix',
+  },
+  export: {
+    text: 'Export',
+    color: '',
+    icon: 'far fa-sign-out',
+    iconPosition: 'prefix',
+  },
+  import: {
+    text: 'Import',
+    color: '',
+    icon: 'far fa-sign-in',
+    iconPosition: 'prefix',
+  },
+  filter: {
+    text: 'Filter',
+    color: '',
+    icon: 'far fa-filter',
+    iconPosition: 'prefix',
+  },
+  update: {
+    text: 'Update',
+    color: '',
+    icon: 'far fa-sync',
+    iconPosition: 'prefix',
+  },
+  reset: {
+    text: "Reset",
+    color: "",
+    icon: 'far fa-sync',
+    iconPosition: "prefix",
+  },
+  download: {
+    text: 'Download',
+    color: '',
+    icon: 'far fa-download',
+    iconPosition: 'prefix',
+  },
+};
+var VariantProps;
+(function (VariantProps) {
+  VariantProps["save"] = "save";
+  VariantProps["submit"] = "submit";
+  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["reset"] = "Reset";
+  VariantProps["download"] = "download";
+})(VariantProps || (VariantProps = {}));
+
+const { state: state$1 } = index.createStore({
+  value: new Map(),
+  setData: {},
+  removeData: {}
+});
+const setValue$1 = (val) => {
+  const data = Object.assign(Object.assign({}, val), (variantOptions[val.variant] && {
+    icon: variantOptions[val.variant].icon,
+    value: variantOptions[val.variant].text,
+    iconPosition: bcm.Bcm.IconPosition[variantOptions[val.variant].iconPosition],
+    variantColor: variantOptions[val.variant].color
+  }));
+  state$1.value.set(data.id, data);
+};
+const removeValue = (_id) => {
+  state$1.value.delete(_id);
+};
+const getValue$1 = (id) => generate.snq(() => state$1.value.get(id), {});
+const buttonState = {
+  setValue: setValue$1,
+  removeValue,
+  getValue: getValue$1
+};
+
+const ButtonTemplate = ({ value, type, componentClass, disabled, href, target, loading, isIconOnly, icon, iconPosition, id }) => {
+  const ButtonTagType = (href) ? bcm.Bcm.HtmlElementType.a : bcm.Bcm.HtmlElementType.button;
+  return (index$1.h(ButtonTagType, Object.assign({ id: id }, (type == bcm.Bcm.HtmlElementType.button && { type }), { class: componentClass, disabled: disabled, href: href, target: target, tabindex: "0" }),
+    index$1.h("span", { hidden: true },
+      index$1.h("slot", null)),
+    loading && index$1.h("span", { class: "bcm-button__container-loading" },
+      " ",
+      index$1.h("span", { class: "bcm-button__container-icon" },
+        index$1.h("i", { class: "far fa-spinner-third fa-spin" }),
+        " ")),
+    icon && index$1.h("span", { class: `${iconPosition} bcm-button__container-icon` },
+      index$1.h("i", { class: `${icon}` })),
+    !isIconOnly && (index$1.h(slotTemplate.SlotTemplate, { className: "bcm-button__container-text", value: value })),
+    index$1.h("slot", { name: "suffix" })));
+};
+
+const buttonCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .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}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-button{display:inline-flex;width:fit-content;height:fit-content;--bcm-button-solid-color-default:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-default:var(--bcm-new-ds-color-blue-500);--bcm-button-solid-border-default:var(--bcm-new-ds-color-blue-500);--bcm-button-solid-color-hover:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-button-solid-border-hover:var(--bcm-new-ds-color-blue-600);--bcm-button-solid-color-focus-visible:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-button-solid-border-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-button-solid-color-active:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-active:var(--bcm-new-ds-color-blue-700);--bcm-button-solid-border-active:var(--bcm-new-ds-color-blue-700);--bcm-button-solid-color-disabled:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-disabled:var(--bcm-new-ds-color-slate-400);--bcm-button-solid-border-disabled:var(--bcm-new-ds-color-slate-400);--bcm-button-ghost-color-default:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-background-color-default:var(--bcm-new-ds-color-slate-100);--bcm-button-ghost-border-default:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-color-hover:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-background-color-hover:var(--bcm-new-ds-color-slate-200);--bcm-button-ghost-border-hover:var(--bcm-new-ds-color-slate-400);--bcm-button-ghost-color-focus-visible:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-background-color-focus-visible:var(--bcm-new-ds-color-slate-400);--bcm-button-ghost-border-focus-visible:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-color-active:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-background-color-active:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-border-active:var(--bcm-new-ds-color-slate-500);--bcm-button-ghost-color-disabled:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-background-color-disabled:var(--bcm-new-ds-color-slate-50);--bcm-button-ghost-border-disabled:var(--bcm-new-ds-color-slate-200);--bcm-button-link-color-default:var(--bcm-new-ds-color-blue-500);--bcm-button-link-background-color-default:var(--bcm-new-ds-color-transparent);--bcm-button-link-border-default:var(--bcm-new-ds-color-transparent);--bcm-button-link-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-button-link-background-color-hover:var(--bcm-new-ds-color-transparent);--bcm-button-link-border-hover:var(--bcm-new-ds-color-transparent);--bcm-button-link-color-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-button-link-background-color-focus-visible:var(--bcm-new-ds-color-slate-50);--bcm-button-link-border-focus-visible:var(--bcm-new-ds-color-slate-50);--bcm-button-link-color-active:var(--bcm-new-ds-color-blue-700);--bcm-button-link-background-color-active:var(--bcm-new-ds-color-slate-50);--bcm-button-link-border-active:var(--bcm-new-ds-color-slate-50);--bcm-button-link-color-disabled:var(--bcm-new-ds-color-slate-400);--bcm-button-link-background-color-disabled:var(--bcm-new-ds-color-transparent);--bcm-button-link-border-disabled:var(--bcm-new-ds-color-transparent)}.bcm-button.full-width{width:100%}.bcm-button.full-width .bcm-button__container{width:100%}.bcm-button:after,.bcm-button:before{content:\"\";clear:both}.bcm-button__container{border:none;color:inherit;background-color:inherit;padding:0;margin:0;font:inherit;cursor:pointer;outline:none;text-decoration:none;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:4px 12px;outline:none;border-radius:4px;transition:background-color 0.1s ease-in-out;position:relative;min-width:40px;border-width:1px;border-style:solid;border-color:initial}.bcm-button__container:hover,.bcm-button__container:focus,.bcm-button__container:active{outline:none;text-decoration:none}.bcm-button__container-loading{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;display:flex;align-items:center;justify-content:center}.bcm-button__container-kind-solid{color:var(--bcm-button-solid-color-default);background-color:var(--bcm-button-solid-background-color-default);border-color:var(--bcm-button-solid-border-default)}.bcm-button__container-kind-solid:hover{color:var(--bcm-button-solid-color-hover);background-color:var(--bcm-button-solid-background-color-hover);border-color:var(--bcm-button-solid-border-hover)}.bcm-button__container-kind-solid:focus-visible{color:var(--bcm-button-solid-color-focus-visible);background-color:var(--bcm-button-solid-background-color-focus-visible);border-color:var(--bcm-button-solid-border-focus-visible)}.bcm-button__container-kind-solid:active{color:var(--bcm-button-solid-color-active);background-color:var(--bcm-button-solid-background-color-active);border-color:var(--bcm-button-solid-border-active)}.bcm-button__container-kind-solid:disabled{color:var(--bcm-button-solid-color-disabled);background-color:var(--bcm-button-solid-background-color-disabled);border-color:var(--bcm-button-solid-border-disabled)}.bcm-button__container-kind-solid.checked{color:var(--bcm-button-solid-color-active);background-color:var(--bcm-button-solid-background-color-active);border-color:var(--bcm-button-solid-border-active)}.bcm-button__container-kind-solid.disabled{color:var(--bcm-button-solid-color-disabled);background-color:var(--bcm-button-solid-background-color-disabled);border-color:var(--bcm-button-solid-border-disabled)}.bcm-button__container-kind-solid .bcm-button__container-loading{color:var(--bcm-button-solid-color-default);background-color:var(--bcm-button-solid-background-color-default);border-color:var(--bcm-button-solid-border-default)}.bcm-button__container-kind-ghost{color:var(--bcm-button-ghost-color-default);background-color:var(--bcm-button-ghost-background-color-default);border-color:var(--bcm-button-ghost-border-default)}.bcm-button__container-kind-ghost:not([disabled]) .bcm-icon{color:var(--bcm-new-ds-color-slate-500)}.bcm-button__container-kind-ghost:hover{color:var(--bcm-button-ghost-color-hover);background-color:var(--bcm-button-ghost-background-color-hover);border-color:var(--bcm-button-ghost-border-hover)}.bcm-button__container-kind-ghost:focus-visible{color:var(--bcm-button-ghost-color-focus-visible);background-color:var(--bcm-button-ghost-background-color-focus-visible);border-color:var(--bcm-button-ghost-border-focus-visible)}.bcm-button__container-kind-ghost:active{color:var(--bcm-button-ghost-color-active);background-color:var(--bcm-button-ghost-background-color-active);border-color:var(--bcm-button-ghost-border-active)}.bcm-button__container-kind-ghost:disabled{color:var(--bcm-button-ghost-color-disabled);background-color:var(--bcm-button-ghost-background-color-disabled);border-color:var(--bcm-button-ghost-border-disabled)}.bcm-button__container-kind-ghost.checked{color:var(--bcm-button-ghost-color-active);background-color:var(--bcm-button-ghost-background-color-active);border-color:var(--bcm-button-ghost-border-active)}.bcm-button__container-kind-ghost.disabled{color:var(--bcm-button-ghost-color-disabled);background-color:var(--bcm-button-ghost-background-color-disabled);border-color:var(--bcm-button-ghost-border-disabled)}.bcm-button__container-kind-ghost .bcm-button__container-loading{color:var(--bcm-button-ghost-color-default);background-color:var(--bcm-button-ghost-background-color-default);border-color:var(--bcm-button-ghost-border-default)}.bcm-button__container-kind-link{color:var(--bcm-button-link-color-default);background-color:var(--bcm-button-link-background-color-default);border-color:var(--bcm-button-link-border-default)}.bcm-button__container-kind-link:hover{color:var(--bcm-button-link-color-hover);background-color:var(--bcm-button-link-background-color-hover);border-color:var(--bcm-button-link-border-hover)}.bcm-button__container-kind-link:focus-visible{color:var(--bcm-button-link-color-focus-visible);background-color:var(--bcm-button-link-background-color-focus-visible);border-color:var(--bcm-button-link-border-focus-visible)}.bcm-button__container-kind-link:active{color:var(--bcm-button-link-color-active);background-color:var(--bcm-button-link-background-color-active);border-color:var(--bcm-button-link-border-active)}.bcm-button__container-kind-link:disabled{color:var(--bcm-button-link-color-disabled);background-color:var(--bcm-button-link-background-color-disabled);border-color:var(--bcm-button-link-border-disabled)}.bcm-button__container-kind-link.checked{color:var(--bcm-button-link-color-active);background-color:var(--bcm-button-link-background-color-active);border-color:var(--bcm-button-link-border-active)}.bcm-button__container-kind-link.disabled{color:var(--bcm-button-link-color-disabled);background-color:var(--bcm-button-link-background-color-disabled);border-color:var(--bcm-button-link-border-disabled)}.bcm-button__container-kind-link .bcm-button__container-loading{color:var(--bcm-button-link-color-default);background-color:var(--bcm-button-link-background-color-default);border-color:var(--bcm-button-link-border-default)}.bcm-button__container[disabled]{cursor:not-allowed}.bcm-button__container-text{order:3;display:flex;align-items:center;gap:8px;white-space:nowrap}.bcm-button__container-icon{min-height:calc(12px + 8px)}.bcm-button__container-icon.prefix{order:2}.bcm-button__container-icon.suffix{order:4}.bcm-button__container-size-small{font-size:12px;line-height:calc(12px + 8px);padding:calc(4px - 3px) 12px;min-height:calc(calc(12px + 8px) + calc(calc(4px - 2px)) * 2)}.bcm-button__container-size-small .bcm-button__container-icon{min-height:calc(12px + 8px)}.bcm-button__container-size-medium{font-size:calc(12px + 1px);line-height:calc(12px + 8px);padding:calc(4px + 1px) 12px;min-height:calc(calc(12px + 8px) + calc(calc(4px + 2px)) * 2)}.bcm-button__container-size-medium .bcm-button__container-icon{min-height:calc(12px + 8px)}.bcm-button__container-size-large{font-size:16px;line-height:calc(16px + 8px);padding:calc(8px - 1px) 12px;min-height:calc(calc(16px + 8px) + (calc(8px) * 2))}.bcm-button__container-size-large .bcm-button__container-icon{min-height:calc(16px + 8px)}";
+
+const BcmButton = class {
+  constructor(hostRef) {
+    index$1.registerInstance(this, hostRef);
+    this.bcmClick = index$1.createEvent(this, "bcm-click", 7);
+    this._id = generate.Generate.UID();
+    this.hidden = false;
+    this.type = bcm.Bcm.ButtonType.button;
+    this.size = bcm.Bcm.Size.medium;
+    this.disabled = false;
+    this.kind = bcm.Bcm.Kind.solid;
+    this.outline = false;
+    this.icon = undefined;
+    this.href = undefined;
+    this.target = undefined;
+    this.value = undefined;
+    this.loading = false;
+    this.variant = undefined;
+    this.dataDismiss = false;
+    this.fullWidth = false;
+    this.iconPosition = bcm.Bcm.IconPosition.prefix;
+    this.color = undefined;
+    this.checked = false;
+  }
+  handleOnClick(e) {
+    if (this.disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+  }
+  componentWillRender() {
+    const { size, kind, icon, iconPosition, disabled, outline, href, type, target, loading, variant, fullWidth, hidden, value } = this;
+    buttonState.setValue({
+      id: this._id,
+      size,
+      type,
+      kind,
+      icon,
+      iconPosition,
+      disabled,
+      outline,
+      href,
+      target,
+      loading,
+      variant,
+      fullWidth,
+      hidden,
+      value,
+      isIconOnly: !!(this.isHaveChildNodes() && this.icon),
+    });
+  }
+  getStateData() {
+    return buttonState.getValue(this._id);
+  }
+  isHaveChildNodes() {
+    const childNodes = Array.from(this.el.childNodes);
+    return childNodes.find(node => node.nodeType === Node.TEXT_NODE) === undefined;
+  }
+  setColor(color = this.color) {
+    if (!color)
+      return;
+    const { kind } = this;
+    const prefix = `--bcm-button-${kind}`;
+    if (kind === 'solid') {
+      return {
+        [`${prefix}-color-default`]: colorHelper.ColorHelper.dsColor('white'),
+        [`${prefix}-color-hover`]: colorHelper.ColorHelper.dsColor('white'),
+        [`${prefix}-color-focus-visible`]: colorHelper.ColorHelper.dsColor('white'),
+        [`${prefix}-color-active`]: colorHelper.ColorHelper.dsColor('white'),
+        [`${prefix}-color-disabled`]: colorHelper.ColorHelper.dsColor('white'),
+        [`${prefix}-background-color-default`]: colorHelper.ColorHelper.dsColor(color + '-500'),
+        [`${prefix}-background-color-hover`]: colorHelper.ColorHelper.dsColor(color + '-600'),
+        [`${prefix}-background-color-focus-visible`]: colorHelper.ColorHelper.dsColor(color + '-700'),
+        [`${prefix}-background-color-active`]: colorHelper.ColorHelper.dsColor(color + '-800'),
+        [`${prefix}-background-color-disabled`]: colorHelper.ColorHelper.dsColor('slate-400'),
+        [`${prefix}-border-default`]: colorHelper.ColorHelper.dsColor(color + '-500'),
+        [`${prefix}-border-hover`]: colorHelper.ColorHelper.dsColor(color + '-600'),
+        [`${prefix}-border-focus-visible`]: colorHelper.ColorHelper.dsColor(color + '-700'),
+        [`${prefix}-border-active`]: colorHelper.ColorHelper.dsColor(color + '-800'),
+        [`${prefix}-border-disabled`]: colorHelper.ColorHelper.dsColor('slate-400')
+      };
+    }
+    else if (kind == 'link') {
+      return {
+        [`${prefix}-color-default`]: colorHelper.ColorHelper.dsColor(color + '-500'),
+        [`${prefix}-color-hover`]: colorHelper.ColorHelper.dsColor(color + '-600'),
+        [`${prefix}-color-focus-visible`]: colorHelper.ColorHelper.dsColor(color + '-800'),
+        [`${prefix}-color-active`]: colorHelper.ColorHelper.dsColor(color + '-700'),
+        [`${prefix}-color-disabled`]: colorHelper.ColorHelper.dsColor('slate-400'),
+        [`${prefix}-background-color-default`]: colorHelper.ColorHelper.dsColor('transparent'),
+        [`${prefix}-background-color-hover`]: colorHelper.ColorHelper.dsColor('transparent'),
+        [`${prefix}-background-color-focus-visible`]: colorHelper.ColorHelper.dsColor('slate-50'),
+        [`${prefix}-background-color-active`]: colorHelper.ColorHelper.dsColor('slate-50'),
+        [`${prefix}-background-color-disabled`]: colorHelper.ColorHelper.dsColor('transparent'),
+        [`${prefix}-border-default`]: colorHelper.ColorHelper.dsColor('transparent'),
+        [`${prefix}-border-hover`]: colorHelper.ColorHelper.dsColor('transparent'),
+        [`${prefix}-border-focus-visible`]: colorHelper.ColorHelper.dsColor('slate-50'),
+        [`${prefix}-border-active`]: colorHelper.ColorHelper.dsColor('slate-50'),
+        [`${prefix}-border-disabled`]: colorHelper.ColorHelper.dsColor('transparent')
+      };
+    }
+    else if (kind == 'ghost') {
+      return {
+        [`${prefix}-color-default`]: colorHelper.ColorHelper.dsColor(color + '-600'),
+        [`${prefix}-color-hover`]: colorHelper.ColorHelper.dsColor(color + '-600'),
+        [`${prefix}-color-focus-visible`]: colorHelper.ColorHelper.dsColor(color + '-600'),
+        [`${prefix}-color-active`]: colorHelper.ColorHelper.dsColor(color + '-600'),
+        [`${prefix}-color-disabled`]: colorHelper.ColorHelper.dsColor(color + '-300'),
+        [`${prefix}-background-color-default`]: colorHelper.ColorHelper.dsColor(color + '-100'),
+        [`${prefix}-background-color-hover`]: colorHelper.ColorHelper.dsColor(color + '-200'),
+        [`${prefix}-background-color-focus-visible`]: colorHelper.ColorHelper.dsColor(color + '-400'),
+        [`${prefix}-background-color-active`]: colorHelper.ColorHelper.dsColor(color + '-300'),
+        [`${prefix}-background-color-disabled`]: colorHelper.ColorHelper.dsColor(color + '-50'),
+        [`${prefix}-border-default`]: colorHelper.ColorHelper.dsColor(color + '-300'),
+        [`${prefix}-border-hover`]: colorHelper.ColorHelper.dsColor(color + '-400'),
+        [`${prefix}-border-focus-visible`]: colorHelper.ColorHelper.dsColor(color + '-600'),
+        [`${prefix}-border-active`]: colorHelper.ColorHelper.dsColor(color + '-500'),
+        [`${prefix}-border-disabled`]: colorHelper.ColorHelper.dsColor(color + '-200'),
+      };
+    }
+    return;
+  }
+  render() {
+    const { size, kind, disabled, outline, type, href, target, loading, variantColor, fullWidth, hidden, icon, iconPosition, value, isIconOnly, iconSize } = this.getStateData();
+    const classPrefix = 'bcm-button';
+    let componentClass = index$2.classnames('bcm-button__container', `bcm-button__container-size-${size}`, `bcm-button__container-kind-${outline ? 'ghost' : kind}`, {
+      'full-width': fullWidth,
+      'checked': this.checked,
+      'disabled': disabled,
+    });
+    const hostClasses = index$2.classnames(`${classPrefix}`, {
+      hidden,
+      'full-width': fullWidth,
+    });
+    return (index$1.h(index$1.Host, { class: hostClasses, style: this.setColor(variantColor), onClick: () => !disabled && this.bcmClick.emit(this.el) }, index$1.h(ButtonTemplate, { type: type, value: value, componentClass: componentClass, disabled: disabled, href: href, target: target, icon: icon, loading: loading, iconSize: iconSize, isIconOnly: isIconOnly, iconPosition: iconPosition })));
+  }
+  get el() { return index$1.getElement(this); }
+};
+BcmButton.style = buttonCss;
+
+const checkboxCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .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}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-caption-area{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-size:12px;line-height:calc(12px + 8px);color:var(--bcm-new-ds-color-slate-400);display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;flex-wrap:nowrap;margin-top:2px}.bcm-caption-area__text{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.default{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.info{color:var(--bcm-new-ds-color-blue-500)}.bcm-caption-area__text.success{color:var(--bcm-new-ds-color-emerald-500)}.bcm-caption-area__text.warning{color:var(--bcm-new-ds-color-amber-500)}.bcm-caption-area__text.error{color:var(--bcm-new-ds-color-red-500)}.bcm-caption-area__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-caption-area__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-caption-area__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}*{box-sizing:border-box}.bcm-label{display:inline-flex;align-items:flex-start;grid-gap:2px}.bcm-label__text{margin-bottom:2px;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-block;color:var(--bcm-new-ds-color-slate-600)}.bcm-label__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-label__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-label__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}*{box-sizing:border-box}.bcm-checkbox{outline:none;border:none;--bcm-checkbox-primary-color-default:var(--bcm-new-ds-color-blue-500);--bcm-checkbox-secondary-color-default:var(--bcm-new-ds-color-white);--bcm-checkbox-primary-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-checkbox-secondary-color-hover:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-checkbox-secondary-color-focus-visible:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-active:var(--bcm-new-ds-color-blue-700);--bcm-checkbox-secondary-color-active:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-disabled:var(--bcm-new-ds-color-slate-300);--bcm-checkbox-secondary-color-disabled:var(--bcm-new-ds-color-slate-200);display:inline-flex;width:fit-content;flex-direction:column;margin-bottom:8px}.bcm-checkbox:focus,.bcm-checkbox:hover,.bcm-checkbox:active{outline:none;border:none}.bcm-checkbox *{box-sizing:border-box}.bcm-checkbox input[type=radio],.bcm-checkbox input[type=checkbox]{-webkit-appearance:none;appearance:none;background-color:#fff;margin:0;display:none}.bcm-checkbox__input{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap;padding-top:4px}.bcm-checkbox.hidden{display:none}.bcm-checkbox :hover{cursor:pointer}.bcm-checkbox[disabled] :hover,.bcm-checkbox.disabled :hover{cursor:not-allowed}.bcm-checkbox .slot{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-weight:500;color:var(--bcm-new-ds-color-slate-600)}.bcm-checkbox .slot:not(:empty){margin-left:8px;margin-right:8px}.bcm-checkbox-size-small .slot{font-size:12px;line-height:calc(12px + 8px);margin-top:-2.5px}.bcm-checkbox-size-small .bcm-checkbox__input{min-height:calc(24px - 4px)}.bcm-checkbox-size-small .bcm-checkbox__label-icon{width:14px;height:14px;min-width:14px;font-size:calc(10px - 2px)}.bcm-checkbox-size-medium .slot{font-size:calc(12px + 1px);line-height:calc(12px + 8px);margin-top:-1.5px}.bcm-checkbox-size-medium .bcm-checkbox__input{min-height:calc(32px - 4px)}.bcm-checkbox-size-medium .bcm-checkbox__label-icon{width:16px;height:16px;min-width:16px;font-size:10px}.bcm-checkbox-size-large .slot{font-size:16px;line-height:calc(16px + 8px);margin-top:-1.5px}.bcm-checkbox-size-large .bcm-checkbox__input{min-height:calc(32px - 4px)}.bcm-checkbox-size-large .bcm-checkbox__label-icon{width:18px;height:18px;min-width:18px;font-size:12px}.bcm-checkbox__label{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap}.bcm-checkbox__label-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap;border-width:1px;border-style:solid;border-radius:2px}.bcm-checkbox__label-icon-indeterminate{position:relative}.bcm-checkbox__label-icon-indeterminate:after{content:\"\";display:block;position:absolute;width:70%;height:1.5px;background:var(--bcm-new-ds-color-white)}.bcm-checkbox__label-icon.bcm-radio__icon{width:16px;height:16px;box-sizing:border-box;border-radius:100px}.bcm-checkbox__label-icon.bcm-radio__icon .bcm-radio__icon-inner{width:10px;height:10px;border-radius:100px;background-color:var(--bcm-new-ds-color-white)}.bcm-checkbox .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-default);color:var(--bcm-checkbox-secondary-color-default);border-color:var(--bcm-new-ds-color-slate-300)}.bcm-checkbox .bcm-checkbox__label-icon-checked,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-default);border-color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-default);background-color:var(--bcm-checkbox-secondary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox:hover .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-hover);color:var(--bcm-checkbox-secondary-color-hover);border-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-hover);border-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-hover);background-color:var(--bcm-checkbox-secondary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-focus-visible);color:var(--bcm-checkbox-secondary-color-focus-visible);border-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-focus-visible);border-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-focus-visible);background-color:var(--bcm-checkbox-secondary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:active .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-active);color:var(--bcm-checkbox-secondary-color-active);border-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-active);border-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-active);background-color:var(--bcm-checkbox-secondary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-disabled);color:var(--bcm-checkbox-secondary-color-disabled);border-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-disabled);border-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-disabled);background-color:var(--bcm-checkbox-secondary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[no-margin] .bcm-checkbox__input{margin:0;min-height:0;padding:0}";
+
+var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const BcmCheckbox = class {
+  constructor(hostRef) {
+    index$1.registerInstance(this, hostRef);
+    this.blur = index$1.createEvent(this, "bcm-blur", 7);
+    this.focus = index$1.createEvent(this, "bcm-focus", 7);
+    this.change = index$1.createEvent(this, "bcm-change", 7);
+    this.changeCheckbox = index$1.createEvent(this, "bcm-change-checkbox", 7);
+    this._id = generate.Generate.UID();
+    this.inGroup = false;
+    this.value = false;
+    this.checked = false;
+    this.name = undefined;
+    this.disabled = false;
+    this.hidden = false;
+    this.required = false;
+    this.label = undefined;
+    this.readonly = false;
+    this.size = bcm.Bcm.Size.medium;
+    this.indeterminate = null;
+    this.color = "blue";
+    this.caption = undefined;
+    this.noCaption = false;
+    this.captionError = undefined;
+    this.captionType = bcm.Bcm.Status.default;
+    this.captionCache = undefined;
+    this.captionTypeCache = undefined;
+  }
+  connectedCallback() {
+    this.captionCache = this.caption;
+    this.captionTypeCache = this.captionType;
+    this.value = this.checked;
+  }
+  componentDidRender() {
+    this.inputElement.checked = this.checked;
+  }
+  async onBcmFocus() {
+    this.el.focus();
+  }
+  async onBcmBlur() {
+    this.el.blur();
+  }
+  async setClear() {
+    this.check(false);
+    this.handleChange();
+    await utils.delay(10);
+    return Promise.resolve();
+  }
+  async resetCaption() {
+    await utils.delay(10);
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+    await utils.delay(10);
+    return Promise.resolve();
+  }
+  handleChange() {
+    this.checked = this.inputElement.checked;
+    this.value = this.checked;
+    if (!this.indeterminate) {
+      this.changeCheckbox.emit();
+      this.change.emit({
+        name: this.name,
+        value: this.checked
+      });
+    }
+  }
+  watchIndeterminate(newValue, oldValue) {
+    if (newValue != oldValue) {
+      this.inputElement.checked = this.indeterminate == bcm.Bcm.IndeterminateType.determinate ? true : false;
+      this.handleChange();
+    }
+  }
+  async set(data) {
+    if (typeof data === 'boolean') {
+      await this.check(data);
+    }
+  }
+  async get() {
+    return this.checked || false;
+  }
+  async check(uncheck = true) {
+    this.inputElement.checked = uncheck;
+    this.handleChange();
+  }
+  handleKeyUp(ev) {
+    if (ev.keyCode == bcm.Bcm.KeyCode.space || ev.keyCode == bcm.Bcm.KeyCode.enter) {
+      if (!this.disabled && !this.readonly) {
+        this.inputElement.checked = !this.inputElement.checked;
+        this.handleChange();
+      }
+      ev.stopPropagation();
+      ev.preventDefault();
+      return false;
+    }
+  }
+  watchChecked() {
+    if (this.checked) {
+      this.resetCaption();
+    }
+    this.value = this.checked;
+  }
+  setColor(color = this.color) {
+    if (!color)
+      return;
+    const prefix = `--bcm-checkbox`;
+    return {
+      [`${prefix}-primary-color-default`]: colorHelper.ColorHelper.dsColor(color + '-500'),
+      [`${prefix}-primary-color-hover`]: colorHelper.ColorHelper.dsColor(color + '-600'),
+      [`${prefix}-primary-color-focus-visible`]: colorHelper.ColorHelper.dsColor(color + '-800'),
+      [`${prefix}-primary-color-active`]: colorHelper.ColorHelper.dsColor(color + '-700'),
+      // [`${prefix}-primary-color-disabled`]: ColorHelper.dsColor(color + '-300'),
+      [`${prefix}-secondary-color-default`]: colorHelper.ColorHelper.dsColor('white'),
+      [`${prefix}-secondary-color-hover`]: colorHelper.ColorHelper.dsColor('slate-50'),
+      [`${prefix}-secondary-color-focus-visible`]: colorHelper.ColorHelper.dsColor('slate-50'),
+      [`${prefix}-secondary-color-active`]: colorHelper.ColorHelper.dsColor('slate-50'),
+      // [`${prefix}-secondary-color-disabled`]: ColorHelper.dsColor('slate-200')
+    };
+  }
+  render() {
+    const { label, _id, indeterminate, hidden, disabled, checked, readonly, required, caption, captionError, captionType, noCaption, size } = this;
+    //////
+    const bcmCheckboxClass = index$2.classnames('bcm-checkbox', `bcm-checkbox-size-${size}`, {
+      'error': captionType == bcm.Bcm.Status.error,
+      hidden,
+      checked,
+      disabled,
+      required,
+      readonly,
+    });
+    const bcmCheckboxIconClass = index$2.classnames('bcm-checkbox__label-icon', 'bcm-checkbox__label-icon-lite', 'bcm-checkbox__label-icon-' + indeterminate, {
+      'bcm-checkbox__label-icon-checked': checked,
+    });
+    const bcmCheckboxLabelClass = index$2.classnames('bcm-checkbox__label');
+    const bcmCheckboxInputClass = index$2.classnames('bcm-checkbox__input');
+    return (index$1.h(index$1.Host, { tabindex: "0", onFocus: () => this.focus.emit(this.el), onBlur: () => this.blur.emit(this.el), style: this.setColor(this.color), class: bcmCheckboxClass, disabled: disabled }, index$1.h("span", { hidden: true }, index$1.h("slot", null)), label && index$1.h("bcm-label", { htmlFor: `input-${_id}`, type: captionType, value: label, required: required }), index$1.h("div", { class: bcmCheckboxInputClass }, index$1.h("input", { id: `input-${_id}`, type: "checkbox", checked: checked, disabled: disabled, required: required, readonly: readonly, onChange: () => { !disabled && !readonly && (this.handleChange()); }, ref: el => (this.inputElement = el) }), index$1.h("label", { class: bcmCheckboxLabelClass, htmlFor: `input-${_id}` }, index$1.h("span", { class: bcmCheckboxIconClass }, index$1.h("bcm-icon", { icon: "far fa-check" })), index$1.h(slotTemplate.SlotTemplate, { className: "slot" }))), index$1.h(captionTemplate.CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
+  }
+  get el() { return index$1.getElement(this); }
+  static get watchers() { return {
+    "indeterminate": ["watchIndeterminate"],
+    "checked": ["watchChecked"]
+  }; }
+};
+__decorate$2([
+  isLoadDecorator.IsLoad()
+], BcmCheckbox.prototype, "el", void 0);
+BcmCheckbox.style = checkboxCss;
+
+const { state } = index.createStore({
+  group: new Map(),
+  allChecked: true,
+  allUnchecked: true,
+  changeInderminate: {},
+});
+const setValue = async ({ fullWidth, optionType, buttonStyle, size, defaultCheckedItems, el, id, label, required, captionType, hidden, direction, childs, indeterminate, gap, noCaption, }) => {
+  if (el) {
+    state.group.set(id, {
+      fullWidth,
+      optionType,
+      buttonStyle,
+      size,
+      defaultCheckedItems,
+      label,
+      required,
+      captionType,
+      hidden,
+      direction,
+      indeterminate,
+      gap,
+      noCaption,
+      childs: childs === null || childs === void 0 ? void 0 : childs.map(child => {
+        child.checked && (state.allUnchecked = false);
+        !child.checked && (state.allChecked = false);
+        // fullWidth && (fullWidth == 'flex' ? (child.style.flex = 'auto') : (child.style.width = '100%'));
+        optionType && (child.optionType = optionType);
+        buttonStyle && (child.buttonStyle = buttonStyle);
+        size && (child.size = size);
+        defaultCheckedItems && defaultCheckedItems.find(e => e === child.name) && (child.checked = true);
+        child.noCaption = noCaption;
+        return {
+          id: child.id || generate.Generate.UID(),
+          checked: child.checked || false,
+          name: child.name,
+          size: child.size,
+          buttonStyle: child.buttonStyle,
+          optionType: child.optionType,
+          style: child.style,
+          noCaption: child.noCaption,
+          color: child.color,
+          disabled: child.disabled,
+          readonly: child.readonly,
+          label: child.label || child.name,
+          slot: child.slot || generate.snq(() => child.querySelector('.slot').textContent, child.textContent),
+          required: child.required || required,
+          el: child,
+          captionType,
+          hidden,
+        };
+      }),
+      indeterminateState: !state.allChecked && !state.allUnchecked ? 'indeterminate' : state.allChecked ? 'determinate' : 'uncheck',
+    });
+  }
+};
+const getProperty = id => {
+  return generate.snq(() => state.group.get(id), {});
+};
+const getValue = (id, name) => {
+  var _a;
+  const group = getProperty(id);
+  let value = {};
+  (_a = group.childs) === null || _a === void 0 ? void 0 : _a.map(child => {
+    if (name) {
+      if (child.name === name) {
+        value[child.name] = {
+          value: !!child.checked,
+          name: child.name,
+        };
+      }
+    }
+    else {
+      value[child.name] = {
+        value: !!child.checked,
+        name: child.name,
+      };
+    }
+  });
+  return value;
+};
+const getCheckedList = id => {
+  var _a;
+  const group = getProperty(id);
+  let value = {};
+  (_a = group.childs) === null || _a === void 0 ? void 0 : _a.map(child => {
+    if (child.checked === true) {
+      value[child.name] = {
+        value: !!child.checked,
+        name: child.name,
+      };
+    }
+  });
+  return value;
+};
+const setClear = id => {
+  var _a;
+  (_a = getProperty(id).childs) === null || _a === void 0 ? void 0 : _a.forEach(child => {
+    child.checked = false;
+  });
+  checkInderminate(id);
+};
+const setCheckedItems = (id, items, checked, reset) => {
+  var _a;
+  const checkedItems = items && (typeof items == 'string' ? JSON.parse(items) : items);
+  (_a = getProperty(id).childs) === null || _a === void 0 ? void 0 : _a.forEach(child => {
+    if (checkedItems) {
+      const checkedItem = checkedItems.find(e => e === child.name || e.name === child.name);
+      if (checkedItem) {
+        if (typeof checkedItem == 'object') {
+          Object.keys(checkedItem).map(key => {
+            if (key === 'checked') {
+              child.checked = checkedItem[key];
+            }
+            else {
+              child.checked = checked;
+            }
+          });
+        }
+        else {
+          child.checked = checked;
+        }
+      }
+      else {
+        reset && (child.checked = false);
+      }
+    }
+    else {
+      child.checked = false;
+    }
+  });
+  checkInderminate(id);
+};
+const resetCaption = id => {
+  var _a;
+  // const noCaption = getProperty(id).noCaption;
+  (_a = getProperty(id).childs) === null || _a === void 0 ? void 0 : _a.forEach(child => {
+    child.resetCaption();
+    // child.noCaption = noCaption;
+  });
+};
+const changeIndeterminate = id => {
+  var _a;
+  const group = getProperty(id);
+  if (!group.disabled) {
+    let checkAll = true;
+    if (group.indeterminateState === 'determinate') {
+      checkAll = false;
+    }
+    (_a = getProperty(id).childs) === null || _a === void 0 ? void 0 : _a.map(child => {
+      child.checked = checkAll;
+    });
+    checkInderminate(id);
+  }
+};
+const checkInderminate = id => {
+  var _a;
+  const group = getProperty(id);
+  let allChecked = true;
+  let allUnchecked = true;
+  (_a = group.childs) === null || _a === void 0 ? void 0 : _a.map(child => {
+    child.checked && (allUnchecked = false);
+    !child.checked && (allChecked = false);
+  });
+  group.indeterminateState = !allChecked && !allUnchecked ? 'indeterminate' : allChecked ? 'determinate' : 'uncheck';
+};
+const onChange = (obj) => {
+  var _a;
+  (_a = getProperty(obj.id).childs) === null || _a === void 0 ? void 0 : _a.map(child => {
+    child.checked = child.id === obj.childId ? !child.checked : child.checked;
+  });
+  checkInderminate(obj.id);
+};
+const removeState = id => {
+  return Promise.resolve(state.group.delete(id));
+};
+const getStatesKeys = id => {
+  return Object.keys(state.group.get(id));
+};
+const checkBoxGroupState = {
+  setValue,
+  getValue,
+  setCheckedItems,
+  getCheckedList,
+  getProperty,
+  setClear,
+  resetCaption,
+  onChange,
+  getStatesKeys,
+  state,
+  removeState,
+  changeIndeterminate,
+};
+
+const CheckboxGroupTemplate = ({ customStyle, groupContainerClasses, onBcmSelect, items }) => {
+  return (index$1.h("div", { class: groupContainerClasses, style: customStyle }, items.childs && items.childs.map((checkbox) => {
+    return (index$1.h("bcm-checkbox", { id: checkbox.id, name: checkbox.name, color: checkbox.color, checked: checkbox.checked, disabled: checkbox.disabled, readonly: checkbox.readonly, required: checkbox.required, noCaption: checkbox.noCaption, "no-margin": true, size: checkbox.size, "full-width": checkbox.fullWidth, onClick: (e) => { !checkbox.disabled && !checkbox.readonly && (onBcmSelect(checkbox.id), e.preventDefault()); } }, checkbox.slot || checkbox.label));
+  })));
+};
+
+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}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-checkbox-group{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-bottom:8px}.bcm-checkbox-group.hidden{display:none}.bcm-checkbox-group__container{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;width:100%}.bcm-checkbox-group__container.full-width{max-width:100%}.bcm-checkbox-group__container.vertical{gap:8px;flex-direction:column}.bcm-checkbox-group__container.button{gap:unset}.bcm-checkbox-group__container.indeterminate{padding-top:16px;margin-top:16px;border-top:1px solid #efefef}";
+
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const BcmCheckboxGroup = class {
+  constructor(hostRef) {
+    index$1.registerInstance(this, hostRef);
+    this.change = index$1.createEvent(this, "bcm-change", 7);
+    this.groupCheckedList = index$1.createEvent(this, "bcm-group-checked-list", 7);
+    this._id = generate.Generate.UID();
+    this.direction = bcm.Bcm.Direction.horizontal;
+    this.items = [];
+    this.indeterminate = false;
+    this.name = undefined;
+    this.value = undefined;
+    this.disabled = false;
+    this.readonly = false;
+    this.hidden = false;
+    this.required = false;
+    this.label = undefined;
+    this.gap = undefined;
+    this.defaultValue = undefined;
+    this.fullWidth = false;
+    this.optionType = 'default';
+    this.buttonStyle = 'solid';
+    this.size = bcm.Bcm.Size.medium;
+    this.caption = undefined;
+    this.noCaption = false;
+    this.captionType = bcm.Bcm.Status.default;
+    this.tick = {};
+  }
+  componentDidLoad() {
+    this.initState();
+  }
+  disconnectedCallback() {
+    checkBoxGroupState.removeState(this._id);
+  }
+  componentShouldUpdate(newVal, oldVal, propName) {
+    if (propName == 'tick' && newVal !== oldVal) {
+      const isHaveChild = generate.snq(() => checkBoxGroupState.getProperty(this._id).childs.length > 0, false);
+      if (isHaveChild) {
+        this.getValue().then(values => this.value = values);
+      }
+    }
+    if (this.getOptions().indexOf(propName) > -1 && newVal !== oldVal) {
+      this.initState();
+    }
+  }
+  getOptions() {
+    return generate.snq(() => checkBoxGroupState.getStatesKeys(this._id), []);
+  }
+  async initState() {
+    const { fullWidth, optionType, buttonStyle, size, noCaption, defaultValue, label, required, captionType, hidden, direction, indeterminate, gap, items } = this;
+    const defaultCheckedItems = defaultValue && (typeof defaultValue == 'string' ? JSON.parse(defaultValue) : defaultValue);
+    const childElements = items.length > 0 ? items : await this.getCheckboxes();
+    await checkBoxGroupState.setValue({
+      id: this._id,
+      el: this.el,
+      indeterminate,
+      fullWidth,
+      optionType,
+      buttonStyle,
+      size,
+      defaultCheckedItems,
+      label,
+      noCaption,
+      required,
+      captionType,
+      hidden,
+      gap,
+      direction,
+      childs: childElements
+    });
+    const slotArea = this.el.querySelector(`#bcm-checkbox-group__items-${this._id}`);
+    if (slotArea) {
+      slotArea.innerHTML && (slotArea.innerHTML = '');
+    }
+    this.value = await this.getValue();
+  }
+  async markForCheck() {
+    await utils.delay(10);
+    this.tick = generate.Generate.UID();
+  }
+  async onBcmFocus() {
+    //focus first item
+    const childs = this.getCheckboxes();
+    if (childs.length > 0) {
+      childs[0].onBcmFocus();
+    }
+  }
+  async onBcmBlur() {
+    this.el.blur();
+  }
+  async setClear() {
+    checkBoxGroupState.setClear(this._id);
+    await utils.delay(10);
+    this.getCheckboxes().forEach(item => {
+      item.setClear();
+    });
+    this.markForCheck();
+    await utils.delay(10);
+    return Promise.resolve();
+  }
+  async resetCaption() {
+    await utils.delay(10);
+    this.getCheckboxes().forEach(item => {
+      item.resetCaption();
+    });
+    await utils.delay(10);
+    return Promise.resolve();
+  }
+  async set(data) {
+    if (Array.isArray(data)) {
+      await this.check(data, true, true);
+    }
+  }
+  async get() {
+    const checklist = await this.getCheckedList() && Object.keys(await this.getCheckedList());
+    return checklist.length > 0 ? checklist : [];
+  }
+  async check(items, checked = true, reset = false) {
+    checkBoxGroupState.setCheckedItems(this._id, items, checked, reset);
+    this.markForCheck();
+  }
+  async getValue(name) {
+    return Promise.resolve(checkBoxGroupState.getValue(this._id, name));
+  }
+  async getCheckedList() {
+    return checkBoxGroupState.getCheckedList(this._id);
+  }
+  handleItemsChange() {
+    this.initState();
+  }
+  getCheckboxes() {
+    return utils.getChildElements(this.el, 'bcm-checkbox:not(#bcm-indeterminate-element)');
+  }
+  async getCheckbox(id) {
+    const element = this.el.querySelector(`bcm-checkbox[id="${id}"]`);
+    if (element) {
+      const name = element["name"];
+      const value = await this.getValue(name);
+      return { element, event: generate.snq(() => value[name], null) };
+    }
+    return {};
+  }
+  async indeterminateClick() {
+    checkBoxGroupState.changeIndeterminate(this._id);
+    this.markForCheck();
+  }
+  async changeCheckBox(id) {
+    checkBoxGroupState.onChange({ id: this._id, childId: id });
+    this.markForCheck();
+    await utils.delay(10);
+    this.value = await this.getValue();
+    this.change.emit({ value: this.value, changed: Object.assign({}, await this.getCheckbox(id)) });
+    this.groupCheckedList.emit(await this.getCheckedList());
+  }
+  getItems() {
+    return checkBoxGroupState.getProperty(this._id);
+  }
+  render() {
+    const items = this.getItems();
+    const { disabled, captionType, label, indeterminate, indeterminateState, required, direction, optionType, hidden, fullWidth, gap } = items;
+    const bcmChechboxGroup = index$2.classnames('bcm-checkbox-group', direction, optionType, {
+      hidden,
+      'full-width': fullWidth
+    });
+    const bcmChechboxGroupContainer = index$2.classnames('bcm-checkbox-group__container', optionType, {
+      [direction]: optionType === 'default',
+      indeterminate,
+      hidden,
+      'full-width': fullWidth
+    });
+    return (index$1.h(index$1.Host, { class: bcmChechboxGroup }, index$1.h("span", { hidden: true, id: `bcm-checkbox-group__items-${this._id}` }, index$1.h("slot", null)), index$1.h("div", { class: "bcm-checkbox-group__label" }, label &&
+      index$1.h("div", null, index$1.h(labelTemplate.LabelTemplate, { size: this.size, type: captionType, value: label, required: required }))), indeterminate &&
+      index$1.h("bcm-checkbox", { onClick: (e) => { this.indeterminateClick(), e.preventDefault(); }, "no-caption": true, id: "bcm-indeterminate-element", indeterminate: indeterminateState, disabled: disabled }, "Check All"), index$1.h(CheckboxGroupTemplate, { items: items, groupContainerClasses: bcmChechboxGroupContainer, customStyle: gap && ({ 'gap': gap }), onBcmSelect: (id) => this.changeCheckBox(id) })));
+  }
+  get el() { return index$1.getElement(this); }
+  static get watchers() { return {
+    "items": ["handleItemsChange"]
+  }; }
+};
+__decorate$1([
+  isLoadDecorator.IsLoad()
+], BcmCheckboxGroup.prototype, "el", void 0);
+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;
+  }
+  selfValidation(input) {
+    let validation = this.response(true);
+    if (input.captionError != null || input.captionType == 'error') {
+      validation = this.response(false, input.captionError);
+    }
+    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}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:host{display:block;margin-bottom:8px}:host(.hidden){display:none}";
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const BcmForm = class {
+  constructor(hostRef) {
+    index$1.registerInstance(this, hostRef);
+    this.bcmForm = index$1.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: {
+        // Birbirinin aynısı
+        INPUT: 'input',
+        TEXTAREA: 'textarea',
+        //çok benzer
+        SWITCH: 'switch',
+        CHECKBOX: 'checkbox',
+        RADIO_GROUP: 'radio-group',
+        CHECKBOX_GROUP: 'checkbox-group',
+        RANGE: 'range',
+        // sadece value fırlatıyor
+        FORM: 'form',
+        FORM_GROUP: 'form-group',
+        // *En vakit alacak => içinde select, autocomplete, listbox, treeview özellikleri var
+        LIST: 'list',
+        //
+        COLORPICKER: 'colorpicker',
+        // picker aslında tek komponent hepsi datetimepicker
+        DATE_PICKER: 'date-picker',
+        TIME_PICKER: 'time-picker',
+        DATETIME_PICKER: 'datetime-picker',
+        // silinecek komponentler
+        SELECT: 'select',
+        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 = "";
+    this.value = undefined;
+    this.autocomplete = false;
+  }
+  handleSubmit() {
+    // if (lowercase(e.target.nodeName) === 'bcm-button') {
+    //     if (e.target.type === 'submit') {
+    //         this.submitFunction()
+    //     }
+    // }
+  }
+  async submitFunction() {
+    this.formData = {};
+    this.inputs = [];
+    this.selector = this.el;
+    await this.getInputs();
+    await utils.delay(10);
+    const usrFrmData = await this.userFormData();
+    var formData = { isValid: true, formData: usrFrmData };
+    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: usrFrmData };
+      if (this.name) {
+        this.returnCaption = Object.assign(Object.assign({}, this.returnCaption), { formName: this.name });
+      }
+      this.bcmForm.emit(this.returnCaption);
+      return this.returnCaption;
+    }
+  }
+  async submit() {
+    return Promise.resolve(this.submitFunction());
+  }
+  async set(data) {
+    var _a;
+    const validate = this.validation;
+    this.validation = false;
+    // debugger
+    this.selector = this.el;
+    await this.getInputs();
+    if (data && ((_a = this.inputs) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      for (const key of Object.keys(data)) {
+        const item = this.inputs.find(item => item.name === key);
+        if (item) {
+          try {
+            await item.set(data[key]);
+          }
+          catch (error) {
+            console.log(item.nodeName, "set", error);
+          }
+        }
+      }
+    }
+    this.validation = validate;
+  }
+  async get() {
+    var _a;
+    let formData = {};
+    this.selector = this.el;
+    const inputsCache = this.inputs;
+    await this.getInputs();
+    ((_a = this.inputs) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.inputs.forEach(async (item) => {
+      try {
+        const value = await item.get();
+        formData = Object.assign(Object.assign({}, formData), { [item.name]: value });
+      }
+      catch (error) {
+        console.log(`${item.nodeName} get error`);
+      }
+    });
+    this.inputs = inputsCache;
+    await utils.delay(10);
+    return Promise.resolve(formData);
+  }
+  async setClear() {
+    this.formData = {};
+    this.inputs = [];
+    this.selector = this.el;
+    let clear = [];
+    await this.getInputs();
+    this.inputs.forEach(async (item) => {
+      try {
+        clear.push(await item.setClear());
+      }
+      catch (error) {
+        console.log(error);
+      }
+    });
+    await Promise.all(clear).then(() => {
+      this.formData = {};
+      this.inputs = [];
+      this.duplicateInput = [];
+      this.isValid = true;
+      this.returnCaption = [];
+    });
+    await utils.delay(10);
+    return Promise.resolve(true);
+  }
+  async resetCaption() {
+    await utils.delay(10);
+    this.formData = {};
+    this.inputs = [];
+    this.selector = this.el;
+    await this.getInputs();
+    for (const item of this.inputs) {
+      try {
+        await item.resetCaption();
+      }
+      catch (error) {
+        console.log(item.nodeName, "rc p");
+      }
+    }
+    await utils.delay(10);
+    return Promise.resolve();
+  }
+  async config(_config) {
+    if (_config['validation']) {
+      typeof _config['validation'] == 'boolean'
+        ? this.validation = _config['validation']
+        : this.validation = false;
+    }
+    return true;
+  }
+  async 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) => { var _a; return !input['s-hn'] || ((_a = input['s-hn']) === null || _a === void 0 ? void 0 : _a.nodeName) !== 'BcmForm'; });
+    // debugger;
+    for (const item of rootInputs) {
+      if (stringHelper.StringHelper.lowercase(item.nodeName) == "bcm-checkbox-group") {
+        let checkboxs = item.querySelectorAll("bcm-checkbox");
+        if (checkboxs) {
+          for (const checkbox of checkboxs) {
+            this.duplicateInput.push(checkbox.name);
+          }
+        }
+      }
+      if (stringHelper.StringHelper.lowercase(item.nodeName) == "bcm-form") {
+        const groupInputs = Array.from(item.querySelectorAll('bcm-' + Object.values(this.Bromcom.inputComponents).join(',bcm-')));
+        let itemObject = {};
+        for (const element of groupInputs) {
+          var name = element.name;
+          var value = element.value;
+          itemObject = Object.assign(Object.assign({}, itemObject), { [name]: value });
+          this.duplicateInput.push(element.name);
+        }
+        item.value = itemObject;
+        let checkboxs = item.querySelectorAll("bcm-checkbox");
+        if (checkboxs) {
+          for (const checkbox of checkboxs) {
+            this.duplicateInput.push(checkbox.name);
+          }
+        }
+      }
+    }
+    await utils.delay(10);
+    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());
+  }
+  isListComponent(item) {
+    return ['bcm-list'].includes(item.toLowerCase());
+  }
+  async userFormData() {
+    this.formData = {};
+    this.isValid = true;
+    this.returnCaption = [];
+    for (const item of this.inputs) {
+      // const isListComponent = this.isListComponent(item.tagName);
+      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 (isListComponent) {
+        //     valid = !(input.value && input.value.length > 0) && validate.required(input.value)
+        // } else
+        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 = utils.getChildElements(input, 'bcm-checkbox:not(#bcm-indeterminate-element)');
+          if (childsCheckbox && childsCheckbox.length > 0) {
+            for (const element of childsCheckbox) {
+              if (element && element.required === true) {
+                valid = validate.required(element.checked);
+                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) {
+          if (!valid['valid']) {
+            input.captionError = valid['message'];
+            input.captionType = valid['type'];
+          }
+          else {
+            input.captionError = null;
+            input.captionType = "default";
+          }
+          await utils.delay(10);
+          const selfValidation = validate.selfValidation(input);
+          if (valid['valid']) {
+            if (!selfValidation['valid']) {
+              input.captionError = selfValidation['message'];
+              input.captionType = selfValidation['type'];
+            }
+          }
+        }
+        let name = input.name;
+        let value = input.captionError;
+        !input.hidden && input.captionType == 'error' && (this.returnCaption = [...Array.from(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 isGroupComponent = this.isGroupComponent(e.target.tagName);
+    let target;
+    if (isWrapperComponent) {
+      target = e.target.getInput && await e.target.getInput() || e.target;
+    }
+    else if (isGroupComponent) {
+      let req = false;
+      const childsCheckbox = utils.getChildElements(e.target, 'bcm-checkbox:not(#bcm-indeterminate-element)');
+      childsCheckbox.length > 0 && (childsCheckbox.forEach((element) => {
+        if (element && element.required === true) {
+          req = true;
+        }
+      }));
+      target = Object.assign(Object.assign({}, e.target), { required: req });
+    }
+    else {
+      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 if (isGroupComponent) {
+          const childsCheckbox = utils.getChildElements(e.target, 'bcm-checkbox:not(#bcm-indeterminate-element)');
+          childsCheckbox.length > 0 && (childsCheckbox.forEach((element) => {
+            if (element && element.required === true) {
+              valid = validate.required(element.checked);
+              if (!valid['valid']) {
+                element.noCaption = false;
+                element.captionError = valid['message'];
+                element.captionType = valid['type'];
+              }
+              else {
+                element.noCaption = e.target.noCaption;
+                element.captionError = null;
+                element.captionType = "default";
+              }
+            }
+          }));
+        }
+        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 = await this.userFormData();
+  }
+  render() {
+    const hostClasses = index$2.classnames(this.hidden ? 'hidden' : null);
+    return (index$1.h(index$1.Host, { class: hostClasses }, index$1.h("form", { class: "bcm-form", autocomplete: this.autocomplete ? "on" : "off" }, index$1.h("slot", null))));
+  }
+  get el() { return index$1.getElement(this); }
+};
+__decorate([
+  isLoadDecorator.IsLoad()
+], BcmForm.prototype, "el", void 0);
+BcmForm.style = formCss;
+
+const iconCss = "@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}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-icon.hidden{display:none}";
+
+const BcmIcon = class {
+  constructor(hostRef) {
+    index$1.registerInstance(this, hostRef);
+    this.hidden = false;
+    this.icon = undefined;
+  }
+  render() {
+    const { icon, hidden } = this;
+    return (index$1.h(index$1.Host, { class: `bcm-icon fa ${hidden ? 'hidden' : ''}` }, index$1.h("i", { class: `${icon}` })));
+  }
+  get el() { return index$1.getElement(this); }
+};
+BcmIcon.style = iconCss;
+
+const labelCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .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}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-label{display:inline-flex;align-items:flex-start;grid-gap:2px}.bcm-label__text{margin-bottom:2px;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-block;color:var(--bcm-new-ds-color-slate-600)}.bcm-label__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-label__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-label__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}";
+
+const BcmLabel = class {
+  constructor(hostRef) {
+    index$1.registerInstance(this, hostRef);
+    this._id = generate.Generate.UID();
+    this.required = false;
+    this.value = undefined;
+    this.size = "medium";
+    this.form = undefined;
+    this.htmlFor = undefined;
+    this.hidden = false;
+    this.type = bcm.Bcm.Status.default;
+    this.tooltip = undefined;
+  }
+  render() {
+    const { required, value, size, form, htmlFor, hidden, type, tooltip } = this;
+    const hostClasses = index$2.classnames('bcm-label', { hidden });
+    const Label = (index$1.h(labelTemplate.LabelTemplate, { form: form, htmlFor: htmlFor, value: value, size: size, type: type, required: required }));
+    return (index$1.h(index$1.Host, { class: hostClasses }, Label, tooltip && (index$1.h("bcm-tooltip", { message: tooltip, placement: 'top', trigger: 'hover' }, index$1.h("bcm-icon", { icon: "far fa-question-circle" })))));
+  }
+  get el() { return index$1.getElement(this); }
+};
+BcmLabel.style = labelCss;
+
+const BcmTooltip = class {
+  constructor(hostRef) {
+    index$1.registerInstance(this, hostRef);
+    this.bcmTooltipShow = index$1.createEvent(this, "bcmTooltipShow", 7);
+    this.bcmTooltipHide = index$1.createEvent(this, "bcmTooltipHide", 7);
+    this._id = generate.Generate.UID();
+    this.message = "";
+    this.placement = bcm.Bcm$1.Placement.top;
+    this.trigger = bcm.Bcm$1.TriggerType.click;
+    this.open = false;
+    this.color = "slate";
+    this.size = bcm.Bcm$1.Size.medium;
+    this.openDelay = 0;
+    this.closeDelay = 0;
+    this.targetId = undefined;
+    this.tooltip = undefined;
+  }
+  emitShow() {
+    this.bcmTooltipShow.emit();
+  }
+  emitHide() {
+    this.bcmTooltipHide.emit();
+  }
+  connectedCallback() {
+    this.tooltip = new tooltipHelper.Tooltip({
+      targetId: this.targetId || this._id,
+      message: this.message,
+      placement: this.placement,
+      color: this.color,
+      trigger: this.trigger,
+      size: this.size,
+      openDelay: this.openDelay,
+      closeDelay: this.closeDelay,
+      emitShow: () => this.emitShow(),
+      emitHide: () => this.emitHide(),
+    });
+  }
+  componentDidLoad() {
+    this.tooltip.listener();
+  }
+  componentDidRender() {
+    this.tooltip.message = this.message;
+    this.tooltip.placement = this.placement;
+    this.tooltip.color = this.color;
+    this.tooltip.trigger = this.trigger;
+    this.tooltip.size = this.size;
+    this.tooltip.openDelay = this.openDelay;
+    this.tooltip.closeDelay = this.closeDelay;
+    this.tooltip.update();
+  }
+  disconnectedCallback() {
+    this.tooltip.destroy();
+  }
+  async show() {
+    this.tooltip.show();
+  }
+  async hide() {
+    this.tooltip.hide();
+  }
+  async toggle() {
+    this.tooltip.toggle();
+  }
+  render() {
+    return (index$1.h(index$1.Host, { "aria-describedby": "tooltip", class: "tw-inline-flex tw-h-fit tw-w-fit" }, index$1.h("slot", null)));
+  }
+  get el() { return index$1.getElement(this); }
+};
+
+exports.bcm_button = BcmButton;
+exports.bcm_checkbox = BcmCheckbox;
+exports.bcm_checkbox_group = BcmCheckboxGroup;
+exports.bcm_form = BcmForm;
+exports.bcm_icon = BcmIcon;
+exports.bcm_label = BcmLabel;
+exports.bcm_tooltip = BcmTooltip;