bromcom-ui 2.11.1 → 2.12.0-test.0

package/dist/esm/bcm-button_11.entry.js

@@ -0,0 +1,3326 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { h as h$1, r as registerInstance, c as createEvent, H as Host, g as getElement, a as getAssetPath } from './index-0615c2b8.js';
+import { s as snq, G as Generate } from './generate-bcc4b036.js';
+import { B as Bcm, a as Bcm$1 } from './bcm-a50d55ba.js';
+import { c as classnames } from './index-b84bc8c9.js';
+import { c as createStore } from './index-7e71bbc8.js';
+import { S as SlotTemplate } from './slot-template-7c36d3be.js';
+import { C as ColorHelper } from './color-helper-c0bb1d8a.js';
+import { r as react, a as reactDom } from './index-a6d9d0af.js';
+import { l as lodash } from './lodash-0a4396a7.js';
+import { I as IsLoad } from './is-load-decorator-8277e3b8.js';
+import { S as StringHelper } from './string-helper-85990695.js';
+import { d as delay, g as getChildElements } from './utils-57652744.js';
+import { N as NumberHelper } from './number-helper-f6f2817c.js';
+import { V as Validators } from './validators-2052b679.js';
+import { C as CaptionTemplate } from './caption-template-5c43c733.js';
+import { I as InputTemplate } from './input-template-673e33b3.js';
+import { c as ce } from './index-3bc8c6e3.js';
+import { L as LabelTemplate } from './label-template-c15569c4.js';
+import './datetime-helper-df25808a.js';
+import './element-dragger-89bb52fd.js';
+import { F as FloatingUI } from './floating-ui-3f4394da.js';
+import './types-6f06fa1a.js';
+import './types-9493a7ed.js';
+import { T as Tooltip } from './tooltip-helper-b27db4cd.js';
+import './package-255a905d.js';
+import './colors-df32bb43.js';
+import './_commonjsHelpers-be0d4ec8.js';
+import './colors-1d7854ea.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 } = createStore({
+  value: new Map(),
+  setData: {},
+  removeData: {}
+});
+const setValue = (val) => {
+  const data = Object.assign(Object.assign({}, val), (variantOptions[val.variant] && {
+    icon: variantOptions[val.variant].icon,
+    value: variantOptions[val.variant].text,
+    iconPosition: Bcm.IconPosition[variantOptions[val.variant].iconPosition],
+    variantColor: variantOptions[val.variant].color
+  }));
+  state.value.set(data.id, data);
+};
+const removeValue = (_id) => {
+  state.value.delete(_id);
+};
+const getValue = (id) => snq(() => state.value.get(id), {});
+const buttonState = {
+  setValue,
+  removeValue,
+  getValue
+};
+
+const ButtonTemplate = ({ value, type, componentClass, disabled, href, target, loading, isIconOnly, icon, iconPosition, id }) => {
+  const ButtonTagType = (href) ? Bcm.HtmlElementType.a : Bcm.HtmlElementType.button;
+  return (h$1(ButtonTagType, Object.assign({ id: id }, (type == Bcm.HtmlElementType.button && { type }), { class: componentClass, disabled: disabled, href: href, target: target, tabindex: "0" }),
+    h$1("span", { hidden: true },
+      h$1("slot", null)),
+    loading && h$1("span", { class: "bcm-button__container-loading" },
+      " ",
+      h$1("span", { class: "bcm-button__container-icon" },
+        h$1("i", { class: "far fa-spinner-third fa-spin" }),
+        " ")),
+    icon && h$1("span", { class: `${iconPosition} bcm-button__container-icon` },
+      h$1("i", { class: `${icon}` })),
+    !isIconOnly && (h$1(SlotTemplate, { className: "bcm-button__container-text", value: value })),
+    h$1("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-ghost-link-color-default:var(--bcm-new-ds-color-slate-700);--bcm-button-ghost-link-background-color-default:var(--bcm-new-ds-color-transparent);--bcm-button-ghost-link-border-default:var(--bcm-new-ds-color-transparent);--bcm-button-ghost-link-color-hover:var(--bcm-new-ds-color-slate-700);--bcm-button-ghost-link-background-color-hover:var(--bcm-new-ds-color-slate-200);--bcm-button-ghost-link-border-hover:var(--bcm-new-ds-color-transparent);--bcm-button-ghost-link-color-focus-visible:var(--bcm-new-ds-color-slate-700);--bcm-button-ghost-link-background-color-focus-visible:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-link-border-focus-visible:var(--bcm-new-ds-color-transparent);--bcm-button-ghost-link-color-active:var(--bcm-new-ds-color-slate-700);--bcm-button-ghost-link-background-color-active:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-link-border-active:var(--bcm-new-ds-color-transparent);--bcm-button-ghost-link-color-disabled:var(--bcm-new-ds-color-slate-500);--bcm-button-ghost-link-background-color-disabled:var(--bcm-new-ds-color-transparent);--bcm-button-ghost-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-kind-ghost-link{color:var(--bcm-button-ghost-link-color-default);background-color:var(--bcm-button-ghost-link-background-color-default);border-color:var(--bcm-button-ghost-link-border-default)}.bcm-button__container-kind-ghost-link:hover{color:var(--bcm-button-ghost-link-color-hover);background-color:var(--bcm-button-ghost-link-background-color-hover);border-color:var(--bcm-button-ghost-link-border-hover)}.bcm-button__container-kind-ghost-link:focus-visible{color:var(--bcm-button-ghost-link-color-focus-visible);background-color:var(--bcm-button-ghost-link-background-color-focus-visible);border-color:var(--bcm-button-ghost-link-border-focus-visible)}.bcm-button__container-kind-ghost-link:active{color:var(--bcm-button-ghost-link-color-active);background-color:var(--bcm-button-ghost-link-background-color-active);border-color:var(--bcm-button-ghost-link-border-active)}.bcm-button__container-kind-ghost-link:disabled{color:var(--bcm-button-ghost-link-color-disabled);background-color:var(--bcm-button-ghost-link-background-color-disabled);border-color:var(--bcm-button-ghost-link-border-disabled)}.bcm-button__container-kind-ghost-link.checked{color:var(--bcm-button-ghost-link-color-active);background-color:var(--bcm-button-ghost-link-background-color-active);border-color:var(--bcm-button-ghost-link-border-active)}.bcm-button__container-kind-ghost-link.disabled{color:var(--bcm-button-ghost-link-color-disabled);background-color:var(--bcm-button-ghost-link-background-color-disabled);border-color:var(--bcm-button-ghost-link-border-disabled)}.bcm-button__container-kind-ghost-link .bcm-button__container-loading{color:var(--bcm-button-ghost-link-color-default);background-color:var(--bcm-button-ghost-link-background-color-default);border-color:var(--bcm-button-ghost-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) {
+    registerInstance(this, hostRef);
+    this.bcmClick = createEvent(this, "bcm-click", 7);
+    this._id = Generate.UID();
+    this.hidden = false;
+    this.type = Bcm.ButtonType.button;
+    this.size = Bcm.Size.medium;
+    this.disabled = false;
+    this.kind = 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.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.dsColor('white'),
+        [`${prefix}-color-hover`]: ColorHelper.dsColor('white'),
+        [`${prefix}-color-focus-visible`]: ColorHelper.dsColor('white'),
+        [`${prefix}-color-active`]: ColorHelper.dsColor('white'),
+        [`${prefix}-color-disabled`]: ColorHelper.dsColor('white'),
+        [`${prefix}-background-color-default`]: ColorHelper.dsColor(color + '-500'),
+        [`${prefix}-background-color-hover`]: ColorHelper.dsColor(color + '-600'),
+        [`${prefix}-background-color-focus-visible`]: ColorHelper.dsColor(color + '-700'),
+        [`${prefix}-background-color-active`]: ColorHelper.dsColor(color + '-800'),
+        [`${prefix}-background-color-disabled`]: ColorHelper.dsColor('slate-400'),
+        [`${prefix}-border-default`]: ColorHelper.dsColor(color + '-500'),
+        [`${prefix}-border-hover`]: ColorHelper.dsColor(color + '-600'),
+        [`${prefix}-border-focus-visible`]: ColorHelper.dsColor(color + '-700'),
+        [`${prefix}-border-active`]: ColorHelper.dsColor(color + '-800'),
+        [`${prefix}-border-disabled`]: ColorHelper.dsColor('slate-400')
+      };
+    }
+    else if (kind == 'link') {
+      return {
+        [`${prefix}-color-default`]: ColorHelper.dsColor(color + '-500'),
+        [`${prefix}-color-hover`]: ColorHelper.dsColor(color + '-600'),
+        [`${prefix}-color-focus-visible`]: ColorHelper.dsColor(color + '-800'),
+        [`${prefix}-color-active`]: ColorHelper.dsColor(color + '-700'),
+        [`${prefix}-color-disabled`]: ColorHelper.dsColor('slate-400'),
+        [`${prefix}-background-color-default`]: ColorHelper.dsColor('transparent'),
+        [`${prefix}-background-color-hover`]: ColorHelper.dsColor('transparent'),
+        [`${prefix}-background-color-focus-visible`]: ColorHelper.dsColor('slate-50'),
+        [`${prefix}-background-color-active`]: ColorHelper.dsColor('slate-50'),
+        [`${prefix}-background-color-disabled`]: ColorHelper.dsColor('transparent'),
+        [`${prefix}-border-default`]: ColorHelper.dsColor('transparent'),
+        [`${prefix}-border-hover`]: ColorHelper.dsColor('transparent'),
+        [`${prefix}-border-focus-visible`]: ColorHelper.dsColor('slate-50'),
+        [`${prefix}-border-active`]: ColorHelper.dsColor('slate-50'),
+        [`${prefix}-border-disabled`]: ColorHelper.dsColor('transparent')
+      };
+    }
+    else if (kind == 'ghost') {
+      return {
+        [`${prefix}-color-default`]: ColorHelper.dsColor(color + '-600'),
+        [`${prefix}-color-hover`]: ColorHelper.dsColor(color + '-600'),
+        [`${prefix}-color-focus-visible`]: ColorHelper.dsColor(color + '-600'),
+        [`${prefix}-color-active`]: ColorHelper.dsColor(color + '-600'),
+        [`${prefix}-color-disabled`]: ColorHelper.dsColor(color + '-300'),
+        [`${prefix}-background-color-default`]: ColorHelper.dsColor(color + '-100'),
+        [`${prefix}-background-color-hover`]: ColorHelper.dsColor(color + '-200'),
+        [`${prefix}-background-color-focus-visible`]: ColorHelper.dsColor(color + '-400'),
+        [`${prefix}-background-color-active`]: ColorHelper.dsColor(color + '-300'),
+        [`${prefix}-background-color-disabled`]: ColorHelper.dsColor(color + '-50'),
+        [`${prefix}-border-default`]: ColorHelper.dsColor(color + '-300'),
+        [`${prefix}-border-hover`]: ColorHelper.dsColor(color + '-400'),
+        [`${prefix}-border-focus-visible`]: ColorHelper.dsColor(color + '-600'),
+        [`${prefix}-border-active`]: ColorHelper.dsColor(color + '-500'),
+        [`${prefix}-border-disabled`]: 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 = 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 = classnames(`${classPrefix}`, {
+      hidden,
+      'full-width': fullWidth,
+    });
+    return (h$1(Host, { class: hostClasses, style: this.setColor(variantColor), onClick: () => !disabled && this.bcmClick.emit(this.el) }, h$1(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 getElement(this); }
+};
+BcmButton.style = buttonCss;
+
+function u(){return (u=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);}return e}).apply(this,arguments)}function c(e,r){if(null==e)return {};var t,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r.indexOf(t=a[n])>=0||(o[t]=e[t]);return o}function i(e){var t=react.useRef(e),n=react.useRef(function(e){t.current&&t.current(e);});return t.current=e,n.current}var s=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=1),e>t?t:e<r?r:e},f=function(e){return "touches"in e},v=function(e){return e&&e.ownerDocument.defaultView||self},d=function(e,r,t){var n=e.getBoundingClientRect(),o=f(r)?function(e,r){for(var t=0;t<e.length;t++)if(e[t].identifier===r)return e[t];return e[0]}(r.touches,t):r;return {left:s((o.pageX-(n.left+v(e).pageXOffset))/n.width),top:s((o.pageY-(n.top+v(e).pageYOffset))/n.height)}},h=function(e){!f(e)&&e.preventDefault();},m=react.memo(function(o){var a=o.onMove,l=o.onKey,s=c(o,["onMove","onKey"]),m=react.useRef(null),g=i(a),p=i(l),b=react.useRef(null),_=react.useRef(!1),x=react.useMemo(function(){var e=function(e){h(e),(f(e)?e.touches.length>0:e.buttons>0)&&m.current?g(d(m.current,e,b.current)):t(!1);},r=function(){return t(!1)};function t(t){var n=_.current,o=v(m.current),a=t?o.addEventListener:o.removeEventListener;a(n?"touchmove":"mousemove",e),a(n?"touchend":"mouseup",r);}return [function(e){var r=e.nativeEvent,n=m.current;if(n&&(h(r),!function(e,r){return r&&!f(e)}(r,_.current)&&n)){if(f(r)){_.current=!0;var o=r.changedTouches||[];o.length&&(b.current=o[0].identifier);}n.focus(),g(d(n,r,b.current)),t(!0);}},function(e){var r=e.which||e.keyCode;r<37||r>40||(e.preventDefault(),p({left:39===r?.05:37===r?-.05:0,top:40===r?.05:38===r?-.05:0}));},t]},[p,g]),C=x[0],E=x[1],H=x[2];return react.useEffect(function(){return H},[H]),react.createElement("div",u({},s,{onTouchStart:C,onMouseDown:C,className:"react-colorful__interactive",ref:m,onKeyDown:E,tabIndex:0,role:"slider"}))}),g=function(e){return e.filter(Boolean).join(" ")},p=function(r){var t=r.color,n=r.left,o=r.top,a=void 0===o?.5:o,l=g(["react-colorful__pointer",r.className]);return react.createElement("div",{className:l,style:{top:100*a+"%",left:100*n+"%"}},react.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:t}}))},b=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=Math.pow(10,r)),Math.round(t*e)/t},x=function(e){return L(C(e))},C=function(e){return "#"===e[0]&&(e=e.substring(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:4===e.length?b(parseInt(e[3]+e[3],16)/255,2):1}:{r:parseInt(e.substring(0,2),16),g:parseInt(e.substring(2,4),16),b:parseInt(e.substring(4,6),16),a:8===e.length?b(parseInt(e.substring(6,8),16)/255,2):1}},w=function(e){return K(I(e))},y=function(e){var r=e.s,t=e.v,n=e.a,o=(200-r)*t/100;return {h:b(e.h),s:b(o>0&&o<200?r*t/100/(o<=100?o:200-o)*100:0),l:b(o/2),a:b(n,2)}},q=function(e){var r=y(e);return "hsl("+r.h+", "+r.s+"%, "+r.l+"%)"},I=function(e){var r=e.h,t=e.s,n=e.v,o=e.a;r=r/360*6,t/=100,n/=100;var a=Math.floor(r),l=n*(1-t),u=n*(1-(r-a)*t),c=n*(1-(1-r+a)*t),i=a%6;return {r:b(255*[n,u,l,l,c,n][i]),g:b(255*[c,n,n,u,l,l][i]),b:b(255*[l,l,c,n,n,u][i]),a:b(o,2)}},D=function(e){var r=e.toString(16);return r.length<2?"0"+r:r},K=function(e){var r=e.r,t=e.g,n=e.b,o=e.a,a=o<1?D(b(255*o)):"";return "#"+D(r)+D(t)+D(n)+a},L=function(e){var r=e.r,t=e.g,n=e.b,o=e.a,a=Math.max(r,t,n),l=a-Math.min(r,t,n),u=l?a===r?(t-n)/l:a===t?2+(n-r)/l:4+(r-t)/l:0;return {h:b(60*(u<0?u+6:u)),s:b(a?l/a*100:0),v:b(a/255*100),a:o}},S=react.memo(function(r){var t=r.hue,n=r.onChange,o=g(["react-colorful__hue",r.className]);return react.createElement("div",{className:o},react.createElement(m,{onMove:function(e){n({h:360*e.left});},onKey:function(e){n({h:s(t+360*e.left,0,360)});},"aria-label":"Hue","aria-valuenow":b(t),"aria-valuemax":"360","aria-valuemin":"0"},react.createElement(p,{className:"react-colorful__hue-pointer",left:t/360,color:q({h:t,s:100,v:100,a:1})})))}),T=react.memo(function(r){var t=r.hsva,n=r.onChange,o={backgroundColor:q({h:t.h,s:100,v:100,a:1})};return react.createElement("div",{className:"react-colorful__saturation",style:o},react.createElement(m,{onMove:function(e){n({s:100*e.left,v:100-100*e.top});},onKey:function(e){n({s:s(t.s+100*e.left,0,100),v:s(t.v-100*e.top,0,100)});},"aria-label":"Color","aria-valuetext":"Saturation "+b(t.s)+"%, Brightness "+b(t.v)+"%"},react.createElement(p,{className:"react-colorful__saturation-pointer",top:1-t.v/100,left:t.s/100,color:q(t)})))}),F=function(e,r){if(e===r)return !0;for(var t in e)if(e[t]!==r[t])return !1;return !0},X=function(e,r){return e.toLowerCase()===r.toLowerCase()||F(C(e),C(r))};function Y(e,t,l){var u=i(l),c=react.useState(function(){return e.toHsva(t)}),s=c[0],f=c[1],v=react.useRef({color:t,hsva:s});react.useEffect(function(){if(!e.equal(t,v.current.color)){var r=e.toHsva(t);v.current={hsva:r,color:t},f(r);}},[t,e]),react.useEffect(function(){var r;F(s,v.current.hsva)||e.equal(r=e.fromHsva(s),v.current.color)||(v.current={hsva:s,color:r},u(r));},[s,e,u]);var d=react.useCallback(function(e){f(function(r){return Object.assign({},r,e)});},[]);return [s,d]}var V="undefined"!=typeof window?react.useLayoutEffect:react.useEffect,$=function(){return ("undefined"!=typeof __webpack_nonce__?__webpack_nonce__:void 0)},J=new Map,Q=function(e){V(function(){var r=e.current?e.current.ownerDocument:document;if(void 0!==r&&!J.has(r)){var t=r.createElement("style");t.innerHTML='.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>\')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}',J.set(r,t);var n=$();n&&t.setAttribute("nonce",n),r.head.appendChild(t);}},[]);},U=function(t){var n=t.className,o=t.colorModel,a=t.color,l=void 0===a?o.defaultColor:a,i=t.onChange,s=c(t,["className","colorModel","color","onChange"]),f=react.useRef(null);Q(f);var v=Y(o,l,i),d=v[0],h=v[1],m=g(["react-colorful",n]);return react.createElement("div",u({},s,{ref:f,className:m}),react.createElement(T,{hsva:d,onChange:h}),react.createElement(S,{hue:d.h,onChange:h,className:"react-colorful__last-control"}))},W={defaultColor:"000",toHsva:x,fromHsva:function(e){return w({h:e.h,s:e.s,v:e.v,a:1})},equal:X},Z=function(r){return react.createElement(U,u({},r,{colorModel:W}))};
+
+const colorfulCss = "@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}.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-input{display:inline-flex;flex-direction:column;width:100%;max-width:256px;margin-bottom:8px}.bcm-input.full-width{max-width:100%}.bcm-input.hidden{display:none}.bcm-input__container{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:flex;align-items:stretch;flex-direction:row;background-color:var(--bcm-new-ds-color-white);border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;box-sizing:border-box;cursor:text;padding:0 0 0 4px;position:relative;width:100%}.bcm-input__container.disabled{background-color:var(--bcm-new-ds-color-slate-50);cursor:not-allowed}.bcm-input__container.disabled .bcm-input-element{color:var(--bcm-new-ds-color-slate-500)}.bcm-input__container.readonly{background-color:var(--bcm-new-ds-color-slate-50);cursor:default}.bcm-input__container.readonly .bcm-input-element{color:var(--bcm-new-ds-color-slate-600)}.bcm-input__container:not(.disabled):hover .caret-container,.bcm-input__container:not(.disabled).focused .caret-container{opacity:1}.bcm-input__container:not(.disabled):hover .input-clear-button,.bcm-input__container:not(.disabled).focused .input-clear-button{opacity:1}.bcm-input__container:not(.disabled).focused{background-color:var(--bcm-new-ds-color-slate-50)}.bcm-input__container:not(.disabled):hover{border-color:var(--bcm-color-prime-blue-6)}.bcm-input__container.empty .input-clear-button{display:none}.bcm-input__container.invalid,.bcm-input__container.error{border-color:var(--bcm-new-ds-color-red-500)}.bcm-input__container .bcm-input-element{width:100%;color:var(--bcm-new-ds-color-slate-600);flex:1;border:none;background:transparent;box-shadow:unset;padding:0 4px;font-family:\"Inter\", sans-serif;cursor:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;text-overflow:ellipsis}.bcm-input__container .bcm-input-element::placeholder{font-family:\"Inter\", sans-serif;color:var(--bcm-new-ds-color-slate-300);user-select:none}.bcm-input__container .bcm-input-element::-webkit-search-decoration,.bcm-input__container .bcm-input-element::-webkit-search-cancel-button,.bcm-input__container .bcm-input-element::-webkit-search-results-button,.bcm-input__container .bcm-input-element::-webkit-search-results-decoration,.bcm-input__container .bcm-input-element::-webkit-calendar-picker-indicator,.bcm-input__container .bcm-input-element::-webkit-inner-spin-button,.bcm-input__container .bcm-input-element::-webkit-outer-spin-button{-webkit-appearance:none}.bcm-input__container .caret-container{width:30px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;border-left:1px solid #D9D9D9;transition:0.2s opacity;user-select:none;box-sizing:border-box}.bcm-input__container .caret-container .bcm-input-caret{display:flex;align-items:center;justify-content:center;color:var(--bcm-color-grey-7);cursor:pointer;flex:1}.bcm-input__container .caret-container .bcm-input-caret bcm-icon{line-height:1}.bcm-input__container .caret-container .bcm-input-caret:hover{color:var(--bcm-color-prime-blue-6)}.bcm-input__container .caret-container .bcm-input-caret:active{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container .bcm-input-caret:last-child{border-top:1px solid #D9D9D9}.bcm-input__container .caret-container.disabled{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container.disabled .bcm-input-caret{cursor:not-allowed}.bcm-input__container .input-suffix-content{display:flex;align-items:center;justify-content:center}.bcm-input__container .input-prefix:not(:empty){padding-left:4px}.bcm-input__container .input-suffix:not(:empty){min-width:24px;padding-right:4px}.bcm-input__container .input-prefix:not(:empty),.bcm-input__container .input-suffix:not(:empty){display:flex;align-items:center;justify-content:center;cursor:default;color:#64748a}.bcm-input__container .input-prefix:not(:empty) .unit-prefix,.bcm-input__container .input-suffix:not(:empty) .unit-prefix{color:#64748a}.bcm-input__container .input-prefix-button:not(:empty),.bcm-input__container .input-suffix-button:not(:empty){cursor:pointer}.bcm-input__container .caret-container,.bcm-input__container .input-clear-button{opacity:0}.bcm-input__container--small{font-size:12px}.bcm-input__container--medium{font-size:14px}.bcm-input__container--large{font-size:16px}.bcm-input__textarea.clearable .bcm-input-element{padding-right:24px}.bcm-input__textarea .input-clear-button{position:absolute;top:4px;right:0}bcm-colorful{display:flex;flex-direction:column;width:256px;padding:8px;background-color:#fff;border-radius:4px}bcm-colorful .react-colorful{width:100%;gap:4px}bcm-colorful .react-colorful__saturation{margin:0 0 4px 0;border-radius:2px;border-bottom:none}bcm-colorful .react-colorful__hue,bcm-colorful .react-colorful__alpha{height:20px;border-radius:2px}bcm-colorful .react-colorful__hue-pointer,bcm-colorful .react-colorful__alpha-pointer{width:15px;height:15px}bcm-colorful .react-colorful__saturation-pointer{width:20px;height:20px}";
+
+const BcmColorful = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.bcmChange = createEvent(this, "bcmChange", 7);
+    this.color = "#3b82f6";
+  }
+  handleChange(e) {
+    this.bcmChange.emit(e);
+  }
+  componentDidRender() {
+    const { color } = this;
+    reactDom.render(react.createElement(Z, {
+      color,
+      onChange: lodash.debounce(this.handleChange.bind(this), 150),
+    }), this.el);
+  }
+  get el() { return getElement(this); }
+};
+BcmColorful.style = colorfulCss;
+
+// /**
+//  * 
+//  * @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$3 = (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) {
+    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: {
+        CHIP_GROUP: 'chip-group',
+        // 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',
+        DATE: 'date',
+        // 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',
+        NUMBER_INPUT: 'number-input',
+      },
+      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 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;
+    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 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 delay(10);
+    return Promise.resolve(true);
+  }
+  async resetCaption() {
+    await 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 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.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.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 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 = 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 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 = 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 = 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();
+  }
+  async handleSubmitForm(e) {
+    e.preventDefault();
+  }
+  render() {
+    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    return (h$1(Host, { class: hostClasses }, h$1("form", { class: "bcm-form", autocomplete: this.autocomplete ? "on" : "off" }, h$1("slot", null))));
+  }
+  get el() { return getElement(this); }
+};
+__decorate$3([
+  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 customIconList = {
+  "message-bot": "message-bot.svg",
+};
+const BcmIcon = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.hidden = false;
+    this.icon = undefined;
+  }
+  getIcon() {
+    const { icon } = this;
+    if (icon in customIconList) {
+      const _icon = getAssetPath("./static/" + customIconList[icon]);
+      return (h$1("div", { class: "tw-flex tw-h-fit tw-w-fit tw-items-center tw-justify-center" }, h$1("img", { src: `${_icon}`, alt: icon, class: "tw-h-fit tw-w-fit" })));
+    }
+    return h$1("i", { class: `${icon}` });
+  }
+  render() {
+    const { /*icon,*/ hidden } = this;
+    return h$1(Host, { class: `bcm-icon fa ${hidden ? "hidden" : ""}` }, this.getIcon());
+  }
+  static get assetsDirs() { return ["static"]; }
+  get el() { return getElement(this); }
+};
+BcmIcon.style = iconCss;
+
+const inputCss$1 = "@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}.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-input{display:inline-flex;flex-direction:column;width:100%;max-width:256px;margin-bottom:8px}.bcm-input.full-width{max-width:100%}.bcm-input.hidden{display:none}.bcm-input__container{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:flex;align-items:stretch;flex-direction:row;background-color:var(--bcm-new-ds-color-white);border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;box-sizing:border-box;cursor:text;padding:0 0 0 4px;position:relative;width:100%}.bcm-input__container.disabled{background-color:var(--bcm-new-ds-color-slate-50);cursor:not-allowed}.bcm-input__container.disabled .bcm-input-element{color:var(--bcm-new-ds-color-slate-500)}.bcm-input__container.readonly{background-color:var(--bcm-new-ds-color-slate-50);cursor:default}.bcm-input__container.readonly .bcm-input-element{color:var(--bcm-new-ds-color-slate-600)}.bcm-input__container:not(.disabled):hover .caret-container,.bcm-input__container:not(.disabled).focused .caret-container{opacity:1}.bcm-input__container:not(.disabled):hover .input-clear-button,.bcm-input__container:not(.disabled).focused .input-clear-button{opacity:1}.bcm-input__container:not(.disabled).focused{background-color:var(--bcm-new-ds-color-slate-50)}.bcm-input__container:not(.disabled):hover{border-color:var(--bcm-color-prime-blue-6)}.bcm-input__container.empty .input-clear-button{display:none}.bcm-input__container.invalid,.bcm-input__container.error{border-color:var(--bcm-new-ds-color-red-500)}.bcm-input__container .bcm-input-element{width:100%;color:var(--bcm-new-ds-color-slate-600);flex:1;border:none;background:transparent;box-shadow:unset;padding:0 4px;font-family:\"Inter\", sans-serif;cursor:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;text-overflow:ellipsis}.bcm-input__container .bcm-input-element::placeholder{font-family:\"Inter\", sans-serif;color:var(--bcm-new-ds-color-slate-300);user-select:none}.bcm-input__container .bcm-input-element::-webkit-search-decoration,.bcm-input__container .bcm-input-element::-webkit-search-cancel-button,.bcm-input__container .bcm-input-element::-webkit-search-results-button,.bcm-input__container .bcm-input-element::-webkit-search-results-decoration,.bcm-input__container .bcm-input-element::-webkit-calendar-picker-indicator,.bcm-input__container .bcm-input-element::-webkit-inner-spin-button,.bcm-input__container .bcm-input-element::-webkit-outer-spin-button{-webkit-appearance:none}.bcm-input__container .caret-container{width:30px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;border-left:1px solid #D9D9D9;transition:0.2s opacity;user-select:none;box-sizing:border-box}.bcm-input__container .caret-container .bcm-input-caret{display:flex;align-items:center;justify-content:center;color:var(--bcm-color-grey-7);cursor:pointer;flex:1}.bcm-input__container .caret-container .bcm-input-caret bcm-icon{line-height:1}.bcm-input__container .caret-container .bcm-input-caret:hover{color:var(--bcm-color-prime-blue-6)}.bcm-input__container .caret-container .bcm-input-caret:active{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container .bcm-input-caret:last-child{border-top:1px solid #D9D9D9}.bcm-input__container .caret-container.disabled{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container.disabled .bcm-input-caret{cursor:not-allowed}.bcm-input__container .input-suffix-content{display:flex;align-items:center;justify-content:center}.bcm-input__container .input-prefix:not(:empty){padding-left:4px}.bcm-input__container .input-suffix:not(:empty){min-width:24px;padding-right:4px}.bcm-input__container .input-prefix:not(:empty),.bcm-input__container .input-suffix:not(:empty){display:flex;align-items:center;justify-content:center;cursor:default;color:#64748a}.bcm-input__container .input-prefix:not(:empty) .unit-prefix,.bcm-input__container .input-suffix:not(:empty) .unit-prefix{color:#64748a}.bcm-input__container .input-prefix-button:not(:empty),.bcm-input__container .input-suffix-button:not(:empty){cursor:pointer}.bcm-input__container .caret-container,.bcm-input__container .input-clear-button{opacity:0}.bcm-input__container--small{font-size:12px}.bcm-input__container--medium{font-size:14px}.bcm-input__container--large{font-size:16px}.bcm-input__textarea.clearable .bcm-input-element{padding-right:24px}.bcm-input__textarea .input-clear-button{position:absolute;top:4px;right: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 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.isBlur = false;
+    this._id = Generate.UID();
+    this._internal_id = Generate.UID();
+    this.value = '';
+    this.size = Bcm.Size.medium;
+    this.label = undefined;
+    this.pattern = undefined;
+    this.tooltip = undefined;
+    this.placeholder = undefined;
+    this.disabled = false;
+    this.readonly = false;
+    this.clearable = false;
+    this.autocomplete = false;
+    this.name = undefined;
+    this.type = Bcm.InputType.text;
+    this.hidden = false;
+    this.required = false;
+    this.fullWidth = false;
+    this.noDefaultIcon = undefined;
+    this.disableWatchValue = false // datetimepicker
+    ;
+    this.passwordToggle = false // type password
+    ;
+    this.maxLength = null;
+    this.minLength = null;
+    this.unitPrefix = null;
+    this.unit = undefined;
+    this.decimal = true;
+    this.min = undefined;
+    this.max = undefined;
+    this.step = undefined;
+    this.caption = undefined;
+    this.noCaption = false;
+    this.captionType = Bcm.Status.default;
+    this.captionError = undefined;
+    this.customErrorMessage = undefined;
+    this._prefix = undefined;
+    this._suffix = undefined;
+    this.captionCache = undefined;
+    this.captionTypeCache = undefined;
+    this.inValid = false;
+    this.valueCache = '';
+    this.focused = false;
+    this.isPasswordVisible = false;
+  }
+  connectedCallback() {
+    this.valueCache = this.value;
+    this.captionCache = this.caption;
+    this.captionTypeCache = this.captionType;
+  }
+  componentWillRender() {
+    const { type, isBlur, value } = this;
+    if (value) {
+      this.value.length > 0 && (this.checkPattern());
+      switch (type) {
+        case "number":
+          {
+            !this.checkValid("number") && (this.validationRange());
+          }
+          break;
+        case "email":
+          {
+            isBlur && (this.checkValid("email"));
+          }
+          break;
+        case "tel":
+          {
+            isBlur && (this.checkValid("phone"));
+          }
+          break;
+        case "text":
+          {
+            isBlur && (this.checkLength());
+          }
+          break;
+      }
+    }
+    else {
+      !this.required && (this.resetCaption());
+    }
+  }
+  async onBcmFocus() {
+    this.inputElement.focus();
+  }
+  async onBcmBlur() {
+    this.inputElement.blur();
+  }
+  async onBcmSelect() {
+    this.inputElement.select();
+  }
+  async set(data) {
+    await this.setValue(data);
+  }
+  async get() {
+    return this.value || null;
+  }
+  async setValue(value) {
+    this.inputElement.value = value;
+    this.handleChange();
+    return value;
+  }
+  async setClear() {
+    this.inputElement.value = '';
+    this.value = '';
+    await delay(10);
+    return Promise.resolve();
+  }
+  async resetCaption() {
+    await delay(10);
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+    this.inValid = false;
+    await delay(10);
+    return Promise.resolve();
+  }
+  async getValue() {
+    return this.value;
+  }
+  watchValue(newValue) {
+    this.inputElement.value = newValue;
+    if (!this.disableWatchValue && this.type != "number") {
+      this.handleChange();
+    }
+  }
+  listenKeyDown(e) {
+    if (!this.disabled && !this.readonly) {
+      this.onBcmFocus();
+      if (this.type == "number") {
+        var which = e.which || 0;
+        var key = e.key;
+        if (which == 38) { // up arrow
+          e.preventDefault(),
+            this.stepUpOrDown('up');
+        }
+        if (which == 40) { // down arrow
+          e.preventDefault(),
+            this.stepUpOrDown('down');
+        }
+        if ((which == 190 || which == 110 || key == ".") && this.value.indexOf(".") > -1) { //.
+          e.preventDefault();
+        }
+        if ((which == 189 || which == 109 || key == "-")) { //-
+          if (this.value.charAt(0) == '-' || this.value.indexOf("-") > -1) {
+            e.preventDefault();
+          }
+        }
+      }
+    }
+  }
+  handleFocus() {
+    this.focused = true;
+    this.focus.emit();
+    this.whatchHasFocus();
+  }
+  handleBlur() {
+    this.focused = false;
+    this.isBlur = true;
+    this.whatchHasFocus();
+    this.blur.emit();
+  }
+  handleChange() {
+    this.valueSync();
+  }
+  handleInput() {
+    if (this.type == "number" && this.maxLength) {
+      const inputValue = this.inputElement.value;
+      if (inputValue && inputValue.length > 0 && inputValue.length > this.maxLength) {
+        this.inputElement.value = inputValue.substring(0, this.maxLength);
+      }
+    }
+    this.valueSync();
+  }
+  valueSync() {
+    if (this.value != this.inputElement.value) {
+      this.value = this.inputElement.value;
+      this.change.emit(this.value);
+      return true;
+    }
+    this.input.emit(this.value);
+    return false;
+  }
+  handleClear(e) {
+    this.inputElement.value = '';
+    this.value = '';
+    this.inputElement.focus();
+    this.clear.emit(e);
+    this.change.emit(this.value);
+    e.stopPropagation();
+  }
+  changePasswordVisibility() {
+    this.isPasswordVisible = !this.isPasswordVisible;
+  }
+  setCaption(caption = null, captionType = null) {
+    this.caption = caption || this.captionCache;
+    this.captionType = captionType || this.captionTypeCache;
+    this.captionError = captionType == "error" ? caption : null;
+  }
+  stepUpOrDown(type) {
+    if (!this.inValid && !this.disabled && !this.readonly) {
+      let step = +(this.step) || 1;
+      let val = +(this.value);
+      if (type == 'up') {
+        val = +(val + step);
+      }
+      else {
+        val = +(val - step);
+      }
+      this.value = val.toString();
+      this.change.emit(this.value);
+    }
+  }
+  validationRange() {
+    const { min, max, value } = this;
+    if (value !== undefined) {
+      if ((min !== undefined) && (max !== undefined)) {
+        if (value < min || value > max) {
+          this.setCaption(StringHelper.getMessage('between', [min, max]), "error");
+          return false;
+        }
+      }
+      else if (min !== undefined) {
+        if (value < min) {
+          this.setCaption(StringHelper.getMessage('min', [min]), "error");
+          return false;
+        }
+      }
+      else if (max !== undefined) {
+        if (value > max) {
+          this.setCaption(StringHelper.getMessage('max', [max]), "error");
+          return false;
+        }
+      }
+    }
+    this.setCaption();
+    return true;
+  }
+  checkLength() {
+    const { minLength, maxLength, value } = this;
+    if (minLength && maxLength) {
+      if (value.length < minLength || value.length > maxLength) {
+        this.setCaption(StringHelper.getMessage('betweenlength', [minLength, maxLength]), "error");
+        this.inValid = true;
+      }
+      else {
+        this.setCaption();
+        this.inValid = false;
+      }
+    }
+    else if (minLength) {
+      if (value.length < minLength) {
+        this.setCaption(StringHelper.getMessage('minlength', [minLength]), "error");
+        this.inValid = true;
+      }
+      else {
+        this.setCaption();
+        this.inValid = false;
+      }
+    }
+    else if (maxLength) {
+      if (value.length > maxLength) {
+        this.setCaption(StringHelper.getMessage('maxlength', [maxLength]), "error");
+        this.inValid = true;
+      }
+      else {
+        this.setCaption();
+        this.inValid = false;
+      }
+    }
+  }
+  checkPattern() {
+    const { pattern, value } = this;
+    if (pattern) {
+      if (Validators.pattern(value, pattern)) {
+        this.setCaption();
+        this.inValid = false;
+      }
+      else {
+        this.setCaption(StringHelper.getMessage('pattern'), "error");
+        this.inValid = true;
+      }
+    }
+  }
+  checkValid(type) {
+    const { value } = this;
+    if (Validators.isValidate(value, type)) {
+      this.setCaption();
+      this.inValid = false;
+    }
+    else {
+      this.setCaption(StringHelper.getMessage(type), "error");
+      this.inValid = true;
+    }
+    return this.inValid;
+  }
+  whatchHasFocus() {
+    const { type, focused, valueCache, inValid } = this;
+    if (type == Bcm.InputType.number && inValid) {
+      if (focused) {
+        this.value = '';
+      }
+      else {
+        if (!StringHelper.isNullOrEmpty(this.value)) {
+          this.value = this.value ? this.fixToNumber(this.value) : '';
+        }
+        else {
+          this.value = valueCache;
+        }
+      }
+    }
+  }
+  fixToNumber(val) {
+    if (val) {
+      const decLen = NumberHelper.getDecimalLength(this.step);
+      return decLen > 0 ? NumberHelper.parseFloatFixed(val, decLen) : val;
+    }
+    return val;
+  }
+  eyeDropper() {
+    const eyeDropper = new window.EyeDropper();
+    eyeDropper
+      .open()
+      .then((color) => {
+      this.setValue(color.sRGBHex);
+    })
+      .catch((error) => {
+      if (error.name === "NotAllowedError") {
+        console.log("Permission to access sensor was denied.");
+      }
+      else if (error.name === "NotSupportedError") {
+        console.log("Sensor not supported.");
+      }
+    });
+  }
+  isEyeDropperSupported() {
+    return typeof window !== "undefined" && "EyeDropper" in window;
+  }
+  toggleLinked() {
+    const linkedElement = document.getElementById(`${this._id}-linked`);
+    if (linkedElement) {
+      linkedElement.toggle();
+    }
+  }
+  render() {
+    const { value, size, label, type, captionType, caption, captionError, placeholder, fullWidth, disabled, readonly, clearable, passwordToggle, isPasswordVisible, noDefaultIcon, unit, inValid, focused, unitPrefix, noCaption, required, hidden, _id, autocomplete } = this;
+    const isActiveClearable = (value === null || value === void 0 ? void 0 : value.length) > 0 && clearable;
+    const hostClasses = classnames('bcm-input', `bcm-input__container--${size}`, {
+      hidden,
+      // 'no-margin': noMargin,
+      'full-width': fullWidth
+    });
+    return (h$1(Host, { onfocus: () => this.onBcmFocus(), class: hostClasses, onClick: () => this.onBcmFocus() }, label && h$1("bcm-label", { onClick: () => this.toggleLinked(), tooltip: this.tooltip, type: captionType, value: label, required: required, htmlFor: _id }), h$1(InputTemplate, { id: _id, type: type, value: value, pattern: this.pattern, placeholder: placeholder, disabled: disabled, readonly: readonly, clearable: isActiveClearable, passwordToggle: passwordToggle, isPasswordVisible: isPasswordVisible, noDefaultIcon: noDefaultIcon, focused: focused, inValid: inValid, unitPrefix: unitPrefix, maxLength: this.maxLength, internalId: this._internal_id, captionType: captionType, unit: unit, size: size, handleFocus: () => this.handleFocus(), handleBlur: () => this.handleBlur(), handleChange: () => this.handleChange(), handleInput: () => this.handleInput(), steps: (e) => this.stepUpOrDown(e), changePasswordVisibility: () => this.changePasswordVisibility(), handleClear: (e) => this.handleClear(e), eyeDropper: () => this.eyeDropper(), isEyeDropperSupported: () => this.isEyeDropperSupported(), ref: (el) => this.inputElement = el, _suffix: this._suffix, _prefix: this._prefix, autocomplete: autocomplete }), h$1(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: this.customErrorMessage }), type == Bcm.InputType.color &&
+      h$1("bcm-linked", { targetId: this._id + "-container", id: this._id + "-linked" }, h$1("bcm-colorful", { id: this._id + "-picker", color: this.value, onBcmChange: e => this.setValue(e.detail) }))));
+  }
+  static get watchers() { return {
+    "value": ["watchValue"]
+  }; }
+};
+__decorate$2([
+  IsLoad()
+], BcmInput.prototype, "inputElement", void 0);
+BcmInput.style = inputCss$1;
+
+const inputStyle = ce({
+  slots: {
+    host: "bcm-input2 bcm-ui-element tw-inline-flex tw-flex-col tw-w-full tw-max-w-64 tw-mb-2 ",
+    base: "",
+    inputContainer: ["bcm-input2__container", "tw-bg-color-base tw-border tw-border-solid tw-border-color tw-rounded", "tw-flex tw-items-center tw-justify-between tw-gap-2", "tw-px-3"],
+    input: [
+      "bcm-input2-element tw-w-full tw-h-full tw-flex-1 tw-outline-none tw-bg-transparent tw-border-0 tw-appearance-none tw-text-ellipsis",
+      "tw-text-color-default placeholder:tw-text-color-placeholder",
+      "[appearance:textfield][&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+    ],
+    slotClass: "tw-flex tw-items-center tw-justify-between tw-gap-2 empty:tw-hidden tw-text-color-placeholder",
+    clearButton: ["clear-button tw-cursor-pointer tw-appearance-none tw-border-0 tw-text-color-placeholder tw-text-size-inherit tw-bg-transparent tw-py-1 tw-px-2 -tw-mx-2", "hover:tw-text-color"],
+    controls: "number-controls -tw-mr-3 tw-flex tw-h-full tw-w-fit tw-flex-col tw-items-center tw-justify-between",
+    controlsBtn: [
+      "number-control-button tw-w-7 tw-flex-1 tw-cursor-pointer tw-appearance-none tw-border-0 tw-border-l tw-border-solid tw-border-color tw-bg-transparent tw-p-0 tw-text-2 tw-leading-none  tw-text-color-placeholder",
+    ],
+    controlsBtnUp: "number-control-up tw-rounded-tr-[3px]",
+    controlsBtnDown: "number-control-down tw-rounded-br-[3px]",
+    controlsDivider: "number-control-divider tw-h-0 tw-w-full tw-border-0 tw-border-b tw-border-solid  tw-border-color",
+  },
+  variants: {
+    size: {
+      small: {
+        host: "bcm-input2__container--small",
+        inputContainer: "input2-size-small tw-h-6",
+        input: "tw-text-2",
+      },
+      medium: {
+        host: "bcm-input2__container--medium",
+        inputContainer: "input2-size-medium tw-h-8",
+        input: "tw-text-3",
+      },
+      large: {
+        host: "bcm-input2__container--large",
+        inputContainer: "input2-size-large tw-h-10",
+        input: "tw-text-4",
+      },
+    },
+    fullWidth: {
+      true: {
+        host: "full-width tw-max-w-full",
+      },
+    },
+    noMargin: {
+      true: {
+        host: "no-margin tw-mb-0",
+      },
+    },
+    hidden: {
+      true: {
+        host: "hidden tw-hidden",
+      },
+    },
+    focused: {
+      true: {
+        host: "focused",
+      },
+    },
+    clearable: {
+      true: {
+        host: "clearable",
+      },
+    },
+    disabled: {
+      true: {
+        host: "disabled",
+        input: "",
+        inputContainer: "tw-bg-color-disabled tw-border-color-disabled tw-text-color-disabled tw-cursor-not-allowed",
+        controlsBtn: "tw-pointer-events-none",
+      },
+      false: {
+        controlsBtn: "hover:tw-bg-color-base-hover hover:tw-text-color",
+        inputContainer: ["has-[:not([disabled]):focus]:tw-ring", "has-[:not([disabled]):hover]:tw-border-color-primaryInfo"],
+      },
+    },
+    readonly: {
+      true: {
+        host: "readonly",
+      },
+    },
+    invalid: {
+      true: {
+        host: "invalid",
+        inputContainer: "tw-border-color-error has-[:not([disabled]):focus]:tw-ring-color-error has-[:not([disabled]):hover]:!tw-border-color-error",
+      },
+    },
+    unit: {
+      true: {
+        host: "unit",
+      },
+    },
+    error: {
+      true: {
+        host: "error",
+        inputContainer: "tw-border-color-error",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+    noMargin: false,
+    fullWidth: false,
+    hidden: false,
+    focused: false,
+    clearable: false,
+    disabled: false,
+    readonly: false,
+    invalid: false,
+    unit: false,
+    error: false,
+  },
+});
+
+const inputCss = "@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}.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-input{display:inline-flex;flex-direction:column;width:100%;max-width:256px;margin-bottom:8px}.bcm-input.full-width{max-width:100%}.bcm-input.hidden{display:none}.bcm-input__container{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:flex;align-items:stretch;flex-direction:row;background-color:var(--bcm-new-ds-color-white);border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;box-sizing:border-box;cursor:text;padding:0 0 0 4px;position:relative;width:100%}.bcm-input__container.disabled{background-color:var(--bcm-new-ds-color-slate-50);cursor:not-allowed}.bcm-input__container.disabled .bcm-input-element{color:var(--bcm-new-ds-color-slate-500)}.bcm-input__container.readonly{background-color:var(--bcm-new-ds-color-slate-50);cursor:default}.bcm-input__container.readonly .bcm-input-element{color:var(--bcm-new-ds-color-slate-600)}.bcm-input__container:not(.disabled):hover .caret-container,.bcm-input__container:not(.disabled).focused .caret-container{opacity:1}.bcm-input__container:not(.disabled):hover .input-clear-button,.bcm-input__container:not(.disabled).focused .input-clear-button{opacity:1}.bcm-input__container:not(.disabled).focused{background-color:var(--bcm-new-ds-color-slate-50)}.bcm-input__container:not(.disabled):hover{border-color:var(--bcm-color-prime-blue-6)}.bcm-input__container.empty .input-clear-button{display:none}.bcm-input__container.invalid,.bcm-input__container.error{border-color:var(--bcm-new-ds-color-red-500)}.bcm-input__container .bcm-input-element{width:100%;color:var(--bcm-new-ds-color-slate-600);flex:1;border:none;background:transparent;box-shadow:unset;padding:0 4px;font-family:\"Inter\", sans-serif;cursor:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;text-overflow:ellipsis}.bcm-input__container .bcm-input-element::placeholder{font-family:\"Inter\", sans-serif;color:var(--bcm-new-ds-color-slate-300);user-select:none}.bcm-input__container .bcm-input-element::-webkit-search-decoration,.bcm-input__container .bcm-input-element::-webkit-search-cancel-button,.bcm-input__container .bcm-input-element::-webkit-search-results-button,.bcm-input__container .bcm-input-element::-webkit-search-results-decoration,.bcm-input__container .bcm-input-element::-webkit-calendar-picker-indicator,.bcm-input__container .bcm-input-element::-webkit-inner-spin-button,.bcm-input__container .bcm-input-element::-webkit-outer-spin-button{-webkit-appearance:none}.bcm-input__container .caret-container{width:30px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;border-left:1px solid #D9D9D9;transition:0.2s opacity;user-select:none;box-sizing:border-box}.bcm-input__container .caret-container .bcm-input-caret{display:flex;align-items:center;justify-content:center;color:var(--bcm-color-grey-7);cursor:pointer;flex:1}.bcm-input__container .caret-container .bcm-input-caret bcm-icon{line-height:1}.bcm-input__container .caret-container .bcm-input-caret:hover{color:var(--bcm-color-prime-blue-6)}.bcm-input__container .caret-container .bcm-input-caret:active{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container .bcm-input-caret:last-child{border-top:1px solid #D9D9D9}.bcm-input__container .caret-container.disabled{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container.disabled .bcm-input-caret{cursor:not-allowed}.bcm-input__container .input-suffix-content{display:flex;align-items:center;justify-content:center}.bcm-input__container .input-prefix:not(:empty){padding-left:4px}.bcm-input__container .input-suffix:not(:empty){min-width:24px;padding-right:4px}.bcm-input__container .input-prefix:not(:empty),.bcm-input__container .input-suffix:not(:empty){display:flex;align-items:center;justify-content:center;cursor:default;color:#64748a}.bcm-input__container .input-prefix:not(:empty) .unit-prefix,.bcm-input__container .input-suffix:not(:empty) .unit-prefix{color:#64748a}.bcm-input__container .input-prefix-button:not(:empty),.bcm-input__container .input-suffix-button:not(:empty){cursor:pointer}.bcm-input__container .caret-container,.bcm-input__container .input-clear-button{opacity:0}.bcm-input__container--small{font-size:12px}.bcm-input__container--medium{font-size:14px}.bcm-input__container--large{font-size:16px}.bcm-input__textarea.clearable .bcm-input-element{padding-right:24px}.bcm-input__textarea .input-clear-button{position:absolute;top:4px;right:0}";
+
+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 BcmInput2 = 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._id = Generate.UID();
+    this._internal_id = Generate.UID();
+    this.value = "";
+    this.size = Bcm.Size.medium;
+    this.label = undefined;
+    this.pattern = undefined;
+    this.tooltip = undefined;
+    this.placeholder = undefined;
+    this.disabled = false;
+    this.readonly = false;
+    this.clearable = false;
+    this.autocomplete = false;
+    this.name = undefined;
+    this.type = Bcm.InputType.text;
+    this.hidden = false;
+    this.required = false;
+    this.fullWidth = false;
+    this.noDefaultIcon = undefined;
+    this.disableWatchValue = false;
+    this.passwordToggle = false;
+    this.maxLength = null;
+    this.minLength = null;
+    this.unitPrefix = null;
+    this.unit = undefined;
+    this.decimal = true;
+    this.min = undefined;
+    this.max = undefined;
+    this.step = undefined;
+    this.caption = undefined;
+    this.noCaption = false;
+    this.captionType = Bcm.Status.default;
+    this.captionError = undefined;
+    this.customErrorMessage = undefined;
+    this._prefix = undefined;
+    this._suffix = undefined;
+    this.captionCache = undefined;
+    this.captionTypeCache = undefined;
+    this.inValid = false;
+    this.valueCache = "";
+    this.focused = false;
+    this.isPasswordVisible = false;
+  }
+  async onBcmFocus() {
+    this.inputElement.focus();
+  }
+  async onBcmBlur() {
+    this.inputElement.blur();
+  }
+  async onBcmSelect() {
+    this.inputElement.select();
+  }
+  handleClear(e) {
+    this.inputElement.value = "";
+    this.value = "";
+    this.inputElement.focus();
+    this.clear.emit(e);
+    this.change.emit(this.value);
+    e.stopPropagation();
+  }
+  handleInput(_e) {
+    this.value = this.inputElement.value;
+    this.input.emit(this.value);
+    this.change.emit(this.value);
+  }
+  handleChange(_e) {
+    this.value = this.inputElement.value;
+    this.change.emit(this.value);
+  }
+  handleFocus(e) {
+    this.focused = true;
+    this.focus.emit(e);
+  }
+  handleBlur(e) {
+    this.focused = false;
+    this.blur.emit(e);
+  }
+  handleKeyUp(e) {
+    if (e.key === "Enter") {
+      this.blur.emit(e);
+    }
+  }
+  render() {
+    const { value, size, label, type, captionType, caption, captionError, placeholder, fullWidth, disabled, readonly, clearable, 
+    // passwordToggle,
+    // isPasswordVisible,
+    // noDefaultIcon,
+    unit, inValid, focused, 
+    // unitPrefix,
+    noCaption, required, hidden, _id, autocomplete, _prefix, _suffix, } = this;
+    const isActiveClearable = (value === null || value === void 0 ? void 0 : value.length) > 0 && clearable;
+    const { host, inputContainer, input, slotClass, clearButton, controls, controlsBtn, controlsBtnDown, controlsBtnUp, controlsDivider } = inputStyle({
+      size,
+      fullWidth,
+      // şüpheli kısımlar
+      focused: focused,
+      clearable: isActiveClearable,
+      disabled,
+      readonly,
+      invalid: inValid,
+      unit: (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
+      // 'empty': value?.length < 1,
+      error: captionType === "error",
+      hidden,
+    });
+    return (h$1(Host, { class: host(), onClick: () => this.onBcmFocus() }, label && h$1("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required, htmlFor: _id }), h$1("div", { class: inputContainer() }, h$1("div", { class: slotClass() }, h$1("slot", { name: "prefix" }, _prefix && _prefix.length > 0 && h$1("span", { innerHTML: _prefix }))), h$1("input", { class: input(), id: _id, type: type, value: value, pattern: this.pattern, placeholder: placeholder, disabled: disabled, readonly: readonly, ref: el => (this.inputElement = el), onInput: event => this.handleInput(event), onChange: event => this.handleChange(event), onFocus: event => this.handleFocus(event), onBlur: event => this.handleBlur(event), onKeyUp: event => this.handleKeyUp(event), autoComplete: autocomplete ? "on" : "off", required: required }), h$1("div", { class: slotClass() }, isActiveClearable && (h$1("button", { type: "button", class: clearButton(), onClick: event => this.handleClear(event) }, h$1("i", { class: "far fa-times" }))), h$1("slot", { name: "suffix" }, _suffix && _suffix.length > 0 && h$1("span", { innerHTML: _suffix })), type === "number" && (h$1("div", { class: controls() }, h$1("button", { type: "button", onClick: () => this.onBcmFocus(), class: classnames(controlsBtn(), controlsBtnUp()) }, h$1("i", { class: "fas fa-caret-up" })), h$1("div", { class: controlsDivider() }), h$1("button", { type: "button", onClick: () => this.onBcmFocus(), class: classnames(controlsBtn(), controlsBtnDown()) }, h$1("i", { class: "fas fa-caret-down" })))))), h$1(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: this.customErrorMessage })));
+  }
+};
+__decorate$1([
+  IsLoad()
+], BcmInput2.prototype, "inputElement", void 0);
+BcmInput2.style = inputCss;
+
+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 BcmLabel = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this._id = Generate.UID();
+    this.required = false;
+    this.value = undefined;
+    this.label = undefined;
+    this.size = "medium";
+    this.form = undefined;
+    this.htmlFor = undefined;
+    this.hidden = false;
+    this.type = Bcm.Status.default;
+    this.tooltip = undefined;
+  }
+  render() {
+    const { required, value, label, size, form, htmlFor, type, tooltip } = this;
+    return (h$1(Host, { class: "tw-inline-block tw-leading-none" }, h$1(LabelTemplate, { form: form, htmlFor: htmlFor, value: value || label, size: size, type: type, required: required, tooltip: tooltip })));
+  }
+  get el() { return getElement(this); }
+};
+__decorate([
+  IsLoad()
+], BcmLabel.prototype, "el", void 0);
+
+const BcmLinked = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.bcmOpen = createEvent(this, "bcm-open", 7);
+    this._id = Generate.UID();
+    this.placement = Bcm$1.Placement["bottom-start"];
+    this.trigger = Bcm$1.TriggerType.click;
+    this.targetId = "";
+    this.height = undefined;
+    this.maxHeight = undefined;
+    this.minHeight = "50px";
+    this.isOpen = false;
+    this.hideDelay = 500;
+    this.moveOverLayContainer = false;
+    this.isMouseOverLink = false;
+    window.addEventListener("scroll", () => this.calculatePosition(), true);
+    window.addEventListener("wheel", () => this.calculatePosition(), true);
+    window.addEventListener("resize", () => this.calculatePosition(), true);
+  }
+  target() {
+    const target = document.querySelectorAll(`[id="${this.targetId}"]`);
+    if (target.length > 0) {
+      target.length > 1 && console.warn(`[bcm-linked] - Target id "${this.targetId}" is duplicated`);
+      return target[0];
+    }
+    else {
+      // console.warn(`[bcm-linked] - id="${this._id}" was removed from the dom because id="${this.targetId}" could not be found.`);
+      this.el.remove();
+      return null;
+    }
+  }
+  detectClone() {
+    const linked = document.querySelectorAll(`[target-id="${this.targetId}"]`);
+    if (linked.length > 0) {
+      linked.forEach((item) => {
+        if (item.id !== this._id) {
+          console.warn(`[bcm-linked] - id="${this._id}" was removed from the dom because id="${this.targetId}" is duplicated.`);
+          item.remove();
+        }
+      });
+    }
+  }
+  dismissEvent() {
+    document.dispatchEvent(new CustomEvent("linked-data-dismiss", { detail: { id: this._id } }));
+  }
+  checkDataDismiss(e) {
+    Generate.findEventPathHasAttribute(e, "data-dismiss") && this.dismissEvent();
+  }
+  hideChildLinked() {
+    this.el.querySelectorAll("[is-linked][linked-is-open]").forEach(item => {
+      var _a;
+      (_a = document.querySelector(`#${item.getAttribute("is-linked")}[is-open]`)) === null || _a === void 0 ? void 0 : _a.hide(false);
+    });
+  }
+  calculatePosition() {
+    const el = this.el;
+    if (el && this.target()) {
+      if (this.isOpen) {
+        FloatingUI({
+          ref: this.target(),
+          floating: el,
+          placement: this.placement,
+          offset: 4,
+          autoHidden: el.getAttribute("main-linked") === "true" ? false : true,
+          autoSize: true,
+          style: {
+            height: this.height,
+            maxHeight: this.maxHeight,
+            minHeight: this.minHeight,
+          },
+        });
+      }
+      else {
+        el.style.visibility = "hidden";
+        el.style.opacity = "0";
+      }
+    }
+  }
+  init() {
+    const target = this.target();
+    this.trigger === Bcm$1.TriggerType.hover && this.listenMouseOver();
+    if (target) {
+      target.setAttribute("is-linked", this.el.id);
+      if (!Generate.getAncestor(target, "bcm-linked")) {
+        this.el.setAttribute("main-linked", "true");
+      }
+      else {
+        this.el.removeAttribute("main-linked");
+      }
+      if (this.moveOverLayContainer) {
+        const bcmOverlayContainer = document.querySelector("#bcm-overlay-container");
+        bcmOverlayContainer.appendChild(this.el);
+      }
+    }
+  }
+  componentDidLoad() {
+    this.init();
+  }
+  triggerWatch(newValue) {
+    if (newValue === Bcm$1.TriggerType.hover) {
+      this.listenMouseOver();
+    }
+  }
+  watchIsOpen() {
+    this.bcmOpen.emit(this.isOpen);
+  }
+  onLinkedDataDismis() {
+    this.hide(false);
+  }
+  onBcmFloatingIsHide(e) {
+    if (e.detail.id === this._id) {
+      this.hide(false);
+    }
+  }
+  async show(wait = true) {
+    wait && (await delay(50));
+    this.detectClone();
+    const target = this.target();
+    if (target) {
+      const bcmOverlayContainer = document.querySelector("#bcm-overlay-container");
+      bcmOverlayContainer.appendChild(this.el);
+      target.setAttribute("linked-is-open", "true");
+      this.isOpen = true;
+      this.calculatePosition();
+    }
+    else {
+      this.hide(false);
+    }
+    return this.isOpen;
+  }
+  async hide(wait = true) {
+    wait && (await delay(50));
+    const target = this.target();
+    this.isMouseOverLink = false;
+    if (target) {
+      target.removeAttribute("linked-is-open");
+      this.hideChildLinked();
+      this.isOpen = false;
+    }
+    return this.isOpen;
+  }
+  async toggle(wait = true) {
+    return this.isOpen ? await this.hide(wait) : await this.show(wait);
+  }
+  clickListener(e) {
+    if (!this.target())
+      return;
+    if (this.trigger === Bcm$1.TriggerType.hover || this.trigger === Bcm$1.TriggerType.custom)
+      return;
+    const isTarget = Generate.findEventPath(e, this.target());
+    const isSelf = Generate.findEventPath(e, this.el);
+    const isLinked = Generate.findEventPathWithNodeName(e, "BCM-LINKED");
+    if (!isTarget && !isSelf && !isLinked) {
+      this.hide();
+      this.bcmOpen.emit(this.isOpen);
+      return;
+    }
+    if (this.isOpen) {
+      isTarget && this.hide(false);
+      isSelf && this.checkDataDismiss(e);
+      if (this.el.getAttribute("main-linked") === "true" && !isTarget && !isSelf && !isLinked) {
+        this.dismissEvent();
+      }
+    }
+    else {
+      isTarget && this.show(false);
+    }
+  }
+  listenMouseOver() {
+    var _a, _b;
+    this.el.addEventListener("mouseover", () => (this.isMouseOverLink = true));
+    this.el.addEventListener("mouseleave", () => {
+      this.isMouseOverLink = false;
+      this.handleMouseLeave();
+    });
+    (_a = this.target()) === null || _a === void 0 ? void 0 : _a.addEventListener("mouseenter", this.handleMouseEnter.bind(this));
+    (_b = this.target()) === null || _b === void 0 ? void 0 : _b.addEventListener("mouseleave", this.handleMouseLeave.bind(this));
+  }
+  handleMouseLeave() {
+    setTimeout(() => {
+      !this.isMouseOverLink && this.hide();
+    }, this.hideDelay);
+  }
+  handleMouseEnter() {
+    clearTimeout(this.timeoutId);
+    this.isMouseOverLink = false;
+    this.show();
+  }
+  render() {
+    const openStyle = this.isOpen ? { visibility: "visible", opacity: "1" } : { visibility: "hidden", opacity: "0" };
+    return (h$1(Host, { class: "tw-invisible tw-absolute tw-left-0 tw-top-0 tw-z-tooltip  tw-block tw-overscroll-contain  tw-scroll-smooth tw-rounded tw-bg-white  tw-opacity-0 tw-shadow tw-transition-opacity tw-duration-100", style: Object.assign(Object.assign({}, openStyle), { overflow: "auto" }) }, h$1("slot", null)));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "trigger": ["triggerWatch"],
+    "isOpen": ["watchIsOpen"]
+  }; }
+};
+
+const NumberInput = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.focus = createEvent(this, "bcm-focus", 3);
+    this.blur = createEvent(this, "bcm-blur", 3);
+    this.clear = createEvent(this, "bcm-clear", 3);
+    this.change = createEvent(this, "bcm-change", 7);
+    this.input = createEvent(this, "bcm-input", 3);
+    this.beforeClear = createEvent(this, "bcm-input-before-clear", 3);
+    this._onChange = createEvent(this, "bcm-onchange", 3);
+    this.inValid = false;
+    this.onInput = () => {
+      var _a;
+      (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener("input", (e) => {
+        this.input.emit(e);
+      });
+    };
+    this.onChange = () => {
+      var _a;
+      (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener("change", (e) => {
+        this.change.emit(e);
+      });
+    };
+    this.onFocus = () => {
+      var _a;
+      (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener("focus", e => {
+        this.isFocus = true;
+        this.focus.emit(e);
+      });
+    };
+    this.onBlur = () => {
+      var _a;
+      (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener("blur", e => {
+        this.isFocus = false;
+        this.blur.emit(e);
+      });
+    };
+    this.onKeydown = () => {
+      var _a;
+      (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener("keydown", (e) => {
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          this.up();
+        }
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          this.down();
+        }
+      });
+    };
+    this.listener = () => {
+      this.onInput();
+      this.onChange();
+      this.onFocus();
+      this.onBlur();
+      this.onKeydown();
+    };
+    this._id = Generate.UID();
+    this.value = "";
+    this.defaultValue = undefined;
+    this._prefix = undefined;
+    this._suffix = undefined;
+    this.size = "medium";
+    this.min = undefined;
+    this.max = undefined;
+    this.step = 1;
+    this.label = undefined;
+    this.name = undefined;
+    this.fullWidth = false;
+    this.clearable = false;
+    this.readonly = false;
+    this.disabled = false;
+    this.required = false;
+    this.mode = "none";
+    this.placeholder = undefined;
+    this.thousandSeparator = false;
+    this.decimalSeparator = undefined;
+    this.decimalScale = undefined;
+    this.fixedDecimalScale = false;
+    this.allowNegative = false;
+    this.allowLeadingZeros = false;
+    this.unitPrefix = undefined;
+    this.unitSuffix = undefined;
+    this.caption = undefined;
+    this.noCaption = false;
+    this.captionType = Bcm$1.Status.default;
+    this.captionError = undefined;
+    this.customErrorMessage = undefined;
+    this.isFocus = false;
+    this.captionCache = undefined;
+    this.captionTypeCache = undefined;
+    this.valueCache = "";
+  }
+  connectedCallback() {
+    if (this.defaultValue)
+      this.value = +this.defaultValue;
+    this.valueCache = this.value;
+    this.captionCache = this.caption;
+    this.captionTypeCache = this.captionType;
+  }
+  componentDidLoad() {
+    this.listener();
+  }
+  up() {
+    if (this.disabled)
+      return;
+    if (!this.value)
+      this.value = Number(0);
+    this.value = +this.value + +this.step;
+    if (this.mode === "strict") {
+      if (this.max && +this.value > +this.max) {
+        this.value = this.max;
+      }
+    }
+  }
+  down() {
+    if (this.disabled)
+      return;
+    if (!this.value)
+      this.value = Number(0);
+    this.value = +this.value - +this.step;
+    if (this.mode === "strict") {
+      if (this.min && +this.value < +this.min) {
+        this.value = this.min;
+      }
+    }
+  }
+  handleClear(e) {
+    if (this.disabled)
+      return;
+    const event = this.beforeClear.emit(e);
+    if (event.defaultPrevented)
+      return;
+    this.value = "";
+    this.clear.emit(e);
+  }
+  checkLength() {
+    const { min, max, value } = this;
+    const minLength = min;
+    const maxLength = max;
+    let valuePoint = value === null || value === void 0 ? void 0 : value.toString();
+    if (min && max) {
+      if (+valuePoint < +min || +valuePoint > +max) {
+        this.setCaption(StringHelper.getMessage("betweenlength", [minLength, maxLength]), "error");
+        this.inValid = true;
+      }
+      else {
+        this.setCaption();
+        this.inValid = false;
+      }
+    }
+    else if (minLength) {
+      if (+valuePoint < +minLength) {
+        this.setCaption(StringHelper.getMessage("minlength", [minLength]), "error");
+        this.inValid = true;
+      }
+      else {
+        this.setCaption();
+        this.inValid = false;
+      }
+    }
+    else if (maxLength) {
+      if (valuePoint > maxLength) {
+        this.setCaption(StringHelper.getMessage("maxlength", [maxLength]), "error");
+        this.inValid = true;
+      }
+      else {
+        this.setCaption();
+        this.inValid = false;
+      }
+    }
+  }
+  watchValue() {
+    this.checkLength();
+  }
+  async onBcmFocus() {
+    this.inputElement.focus();
+  }
+  async onBcmBlur() {
+    this.inputElement.blur();
+  }
+  async onBcmSelect() {
+    this.inputElement.select();
+  }
+  async set(data) {
+    await this.setValue(data);
+  }
+  async get() {
+    return this.value || null;
+  }
+  async setValue(value) {
+    this.value = value;
+  }
+  async setClear() {
+    this.value = null;
+    await delay(10);
+    return Promise.resolve();
+  }
+  async resetCaption() {
+    await delay(10);
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+    this.inValid = false;
+    await delay(10);
+    return Promise.resolve();
+  }
+  setCaption(caption = null, captionType = null) {
+    this.caption = caption || this.captionCache;
+    this.captionType = captionType || this.captionTypeCache;
+    this.captionError = captionType == "error" ? caption : null;
+    return Promise.resolve();
+  }
+  disconnectedCallback() {
+    var _a, _b, _c, _d, _e;
+    (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.removeEventListener("input", this.onInput.bind(this));
+    (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.removeEventListener("change", this.onChange.bind(this));
+    (_c = this.inputElement) === null || _c === void 0 ? void 0 : _c.removeEventListener("focus", this.onFocus.bind(this));
+    (_d = this.inputElement) === null || _d === void 0 ? void 0 : _d.removeEventListener("blur", this.onBlur.bind(this));
+    (_e = this.inputElement) === null || _e === void 0 ? void 0 : _e.removeEventListener("keydown", this.onKeydown.bind(this));
+  }
+  render() {
+    const { _prefix, _suffix, noCaption, captionType, captionError, caption, required, _id, label, size, fullWidth, clearable, value, placeholder, thousandSeparator, decimalSeparator, decimalScale, fixedDecimalScale, allowNegative, allowLeadingZeros, unitPrefix, unitSuffix, min, max, step, defaultValue, disabled, mode, } = this;
+    const isActiveClearable = (value === null || value === void 0 ? void 0 : value.toString().length) > 0 && clearable;
+    const isInvalid = this.captionType == "error" || this.inValid;
+    const { host, inputContainer, slotClass, clearButton, controls, controlsBtn, controlsBtnDown, controlsBtnUp, controlsDivider, input } = inputStyle({
+      size,
+      fullWidth,
+      clearable: isActiveClearable,
+      disabled,
+      invalid: isInvalid,
+    });
+    const numericProps = {
+      placeholder,
+      thousandSeparator,
+      decimalSeparator,
+      decimalScale,
+      fixedDecimalScale,
+      allowNegative,
+      allowLeadingZeros,
+      prefix: unitPrefix,
+      suffix: unitSuffix,
+    };
+    /* input  props */
+    const inputProps = {
+      min,
+      max,
+      step,
+      value,
+      defaultValue,
+    };
+    const generalProps = Object.assign(Object.assign(Object.assign({ "id": _id + "-base-input", "name": this.name, disabled,
+      mode, "aria-label": label, "aria-labelledby": _id + "-label", "getInputRef": el => {
+        this.inputElement = el;
+      }, "className": input() }, numericProps), inputProps), { "onValueChange": (e) => {
+        const { floatValue } = e;
+        this.value = floatValue;
+        this._onChange.emit(e);
+      } });
+    return (h$1(Host, { class: host() }, label && h$1("bcm-label", { size: size, type: captionType, value: label, required: required, htmlFor: _id + "-base-input", id: _id + "-label" }), h$1("div", { class: inputContainer() }, h$1("div", { class: slotClass() }, h$1("slot", { name: "prefix" }, _prefix && _prefix.length > 0 && h$1("span", { innerHTML: _prefix }))), h$1("bcm-react-number", { disabled: disabled, class: "tw-flex-1", options: generalProps }), h$1("div", { class: slotClass() }, !disabled && isActiveClearable && (h$1("button", { class: clearButton(), onClick: event => this.handleClear(event) }, h$1("i", { class: "far fa-times" }))), h$1("slot", { name: "suffix" }, _suffix && _suffix.length > 0 && h$1("span", { innerHTML: _suffix })), h$1("div", { class: controls() }, h$1("button", { type: "button", disabled: disabled, class: classnames(controlsBtn(), controlsBtnUp()), onClick: this.up.bind(this), "aria-label": "Increase value" }, h$1("i", { class: "fas fa-caret-up" })), h$1("div", { class: controlsDivider() }), h$1("button", { type: "button", disabled: disabled, class: classnames(controlsBtn(), controlsBtnDown()), onClick: this.down.bind(this), "aria-label": "Decrease value" }, h$1("i", { class: "fas fa-caret-down" }))))), h$1(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: this.customErrorMessage })));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "value": ["watchValue"]
+  }; }
+};
+
+/**
+ * react-number-format - 5.3.1
+ * Author : Sudhanshu Yadav
+ * Copyright (c) 2016, 2023 to Sudhanshu Yadav, released under the MIT license.
+ * https://github.com/s-yadav/react-number-format
+ */
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest$1(s, e) {
+    var t = {};
+    for (var p in s) { if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        { t[p] = s[p]; } }
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        { for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                { t[p[i]] = s[p[i]]; }
+        } }
+    return t;
+}
+
+var SourceType;
+(function (SourceType) {
+    SourceType["event"] = "event";
+    SourceType["props"] = "prop";
+})(SourceType || (SourceType = {}));
+
+// basic noop function
+function noop() { }
+function memoizeOnce(cb) {
+    var lastArgs;
+    var lastValue = undefined;
+    return function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        if (lastArgs &&
+            args.length === lastArgs.length &&
+            args.every(function (value, index) { return value === lastArgs[index]; })) {
+            return lastValue;
+        }
+        lastArgs = args;
+        lastValue = cb.apply(void 0, args);
+        return lastValue;
+    };
+}
+function charIsNumber(char) {
+    return !!(char || '').match(/\d/);
+}
+function isNil(val) {
+    return val === null || val === undefined;
+}
+function isNanValue(val) {
+    return typeof val === 'number' && isNaN(val);
+}
+function isNotValidValue(val) {
+    return isNil(val) || isNanValue(val) || (typeof val === 'number' && !isFinite(val));
+}
+function escapeRegExp(str) {
+    return str.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&');
+}
+function getThousandsGroupRegex(thousandsGroupStyle) {
+    switch (thousandsGroupStyle) {
+        case 'lakh':
+            return /(\d+?)(?=(\d\d)+(\d)(?!\d))(\.\d+)?/g;
+        case 'wan':
+            return /(\d)(?=(\d{4})+(?!\d))/g;
+        case 'thousand':
+        default:
+            return /(\d)(?=(\d{3})+(?!\d))/g;
+    }
+}
+function applyThousandSeparator(str, thousandSeparator, thousandsGroupStyle) {
+    var thousandsGroupRegex = getThousandsGroupRegex(thousandsGroupStyle);
+    var index = str.search(/[1-9]/);
+    index = index === -1 ? str.length : index;
+    return (str.substring(0, index) +
+        str.substring(index, str.length).replace(thousandsGroupRegex, '$1' + thousandSeparator));
+}
+function usePersistentCallback(cb) {
+    var callbackRef = react.useRef(cb);
+    // keep the callback ref upto date
+    callbackRef.current = cb;
+    /**
+     * initialize a persistent callback which never changes
+     * through out the component lifecycle
+     */
+    var persistentCbRef = react.useRef(function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        return callbackRef.current.apply(callbackRef, args);
+    });
+    return persistentCbRef.current;
+}
+//spilt a float number into different parts beforeDecimal, afterDecimal, and negation
+function splitDecimal(numStr, allowNegative) {
+    if ( allowNegative === void 0 ) allowNegative = true;
+
+    var hasNegation = numStr[0] === '-';
+    var addNegation = hasNegation && allowNegative;
+    numStr = numStr.replace('-', '');
+    var parts = numStr.split('.');
+    var beforeDecimal = parts[0];
+    var afterDecimal = parts[1] || '';
+    return {
+        beforeDecimal: beforeDecimal,
+        afterDecimal: afterDecimal,
+        hasNegation: hasNegation,
+        addNegation: addNegation,
+    };
+}
+function fixLeadingZero(numStr) {
+    if (!numStr)
+        { return numStr; }
+    var isNegative = numStr[0] === '-';
+    if (isNegative)
+        { numStr = numStr.substring(1, numStr.length); }
+    var parts = numStr.split('.');
+    var beforeDecimal = parts[0].replace(/^0+/, '') || '0';
+    var afterDecimal = parts[1] || '';
+    return ("" + (isNegative ? '-' : '') + beforeDecimal + (afterDecimal ? ("." + afterDecimal) : ''));
+}
+/**
+ * limit decimal numbers to given scale
+ * Not used .fixedTo because that will break with big numbers
+ */
+function limitToScale(numStr, scale, fixedDecimalScale) {
+    var str = '';
+    var filler = fixedDecimalScale ? '0' : '';
+    for (var i = 0; i <= scale - 1; i++) {
+        str += numStr[i] || filler;
+    }
+    return str;
+}
+function repeat(str, count) {
+    return Array(count + 1).join(str);
+}
+function toNumericString(num) {
+    var _num = num + ''; // typecast number to string
+    // store the sign and remove it from the number.
+    var sign = _num[0] === '-' ? '-' : '';
+    if (sign)
+        { _num = _num.substring(1); }
+    // split the number into cofficient and exponent
+    var ref = _num.split(/[eE]/g);
+    var coefficient = ref[0];
+    var exponent = ref[1];
+    // covert exponent to number;
+    exponent = Number(exponent);
+    // if there is no exponent part or its 0, return the coffiecient with sign
+    if (!exponent)
+        { return sign + coefficient; }
+    coefficient = coefficient.replace('.', '');
+    /**
+     * for scientific notation the current decimal index will be after first number (index 0)
+     * So effective decimal index will always be 1 + exponent value
+     */
+    var decimalIndex = 1 + exponent;
+    var coffiecientLn = coefficient.length;
+    if (decimalIndex < 0) {
+        // if decimal index is less then 0 add preceding 0s
+        // add 1 as join will have
+        coefficient = '0.' + repeat('0', Math.abs(decimalIndex)) + coefficient;
+    }
+    else if (decimalIndex >= coffiecientLn) {
+        // if decimal index is less then 0 add leading 0s
+        coefficient = coefficient + repeat('0', decimalIndex - coffiecientLn);
+    }
+    else {
+        // else add decimal point at proper index
+        coefficient =
+            (coefficient.substring(0, decimalIndex) || '0') + '.' + coefficient.substring(decimalIndex);
+    }
+    return sign + coefficient;
+}
+/**
+ * This method is required to round prop value to given scale.
+ * Not used .round or .fixedTo because that will break with big numbers
+ */
+function roundToPrecision(numStr, scale, fixedDecimalScale) {
+    //if number is empty don't do anything return empty string
+    if (['', '-'].indexOf(numStr) !== -1)
+        { return numStr; }
+    var shouldHaveDecimalSeparator = (numStr.indexOf('.') !== -1 || fixedDecimalScale) && scale;
+    var ref = splitDecimal(numStr);
+    var beforeDecimal = ref.beforeDecimal;
+    var afterDecimal = ref.afterDecimal;
+    var hasNegation = ref.hasNegation;
+    var floatValue = parseFloat(("0." + (afterDecimal || '0')));
+    var floatValueStr = afterDecimal.length <= scale ? ("0." + afterDecimal) : floatValue.toFixed(scale);
+    var roundedDecimalParts = floatValueStr.split('.');
+    var intPart = beforeDecimal
+        .split('')
+        .reverse()
+        .reduce(function (roundedStr, current, idx) {
+        if (roundedStr.length > idx) {
+            return ((Number(roundedStr[0]) + Number(current)).toString() +
+                roundedStr.substring(1, roundedStr.length));
+        }
+        return current + roundedStr;
+    }, roundedDecimalParts[0]);
+    var decimalPart = limitToScale(roundedDecimalParts[1] || '', scale, fixedDecimalScale);
+    var negation = hasNegation ? '-' : '';
+    var decimalSeparator = shouldHaveDecimalSeparator ? '.' : '';
+    return ("" + negation + intPart + decimalSeparator + decimalPart);
+}
+/** set the caret positon in an input field **/
+function setCaretPosition(el, caretPos) {
+    el.value = el.value;
+    // ^ this is used to not only get 'focus', but
+    // to make sure we don't have it everything -selected-
+    // (it causes an issue in chrome, and having it doesn't hurt any other browser)
+    if (el !== null) {
+        /* @ts-ignore */
+        if (el.createTextRange) {
+            /* @ts-ignore */
+            var range = el.createTextRange();
+            range.move('character', caretPos);
+            range.select();
+            return true;
+        }
+        // (el.selectionStart === 0 added for Firefox bug)
+        if (el.selectionStart || el.selectionStart === 0) {
+            el.focus();
+            el.setSelectionRange(caretPos, caretPos);
+            return true;
+        }
+        // fail city, fortunately this never happens (as far as I've tested) :)
+        el.focus();
+        return false;
+    }
+}
+var findChangeRange = memoizeOnce(function (prevValue, newValue) {
+    var i = 0, j = 0;
+    var prevLength = prevValue.length;
+    var newLength = newValue.length;
+    while (prevValue[i] === newValue[i] && i < prevLength)
+        { i++; }
+    //check what has been changed from last
+    while (prevValue[prevLength - 1 - j] === newValue[newLength - 1 - j] &&
+        newLength - j > i &&
+        prevLength - j > i) {
+        j++;
+    }
+    return {
+        from: { start: i, end: prevLength - j },
+        to: { start: i, end: newLength - j },
+    };
+});
+/*
+  Returns a number whose value is limited to the given range
+*/
+function clamp(num, min, max) {
+    return Math.min(Math.max(num, min), max);
+}
+function geInputCaretPosition(el) {
+    /*Max of selectionStart and selectionEnd is taken for the patch of pixel and other mobile device caret bug*/
+    return Math.max(el.selectionStart, el.selectionEnd);
+}
+function addInputMode() {
+    return (typeof navigator !== 'undefined' &&
+        !(navigator.platform && /iPhone|iPod/.test(navigator.platform)));
+}
+function getDefaultChangeMeta(value) {
+    return {
+        from: {
+            start: 0,
+            end: 0,
+        },
+        to: {
+            start: 0,
+            end: value.length,
+        },
+        lastValue: '',
+    };
+}
+function defaultIsCharacterSame(ref) {
+    var currentValue = ref.currentValue;
+    var formattedValue = ref.formattedValue;
+    var currentValueIndex = ref.currentValueIndex;
+    var formattedValueIndex = ref.formattedValueIndex;
+
+    return currentValue[currentValueIndex] === formattedValue[formattedValueIndex];
+}
+function getCaretPosition(newFormattedValue, lastFormattedValue, curValue, curCaretPos, boundary, isValidInputCharacter, 
+/**
+ * format function can change the character, the caret engine relies on mapping old value and new value
+ * In such case if character is changed, parent can tell which chars are equivalent
+ * Some example, all allowedDecimalCharacters are updated to decimalCharacters, 2nd case if user is coverting
+ * number to different numeric system.
+ */
+isCharacterSame) {
+    if ( isCharacterSame === void 0 ) isCharacterSame = defaultIsCharacterSame;
+
+    /**
+     * if something got inserted on empty value, add the formatted character before the current value,
+     * This is to avoid the case where typed character is present on format characters
+     */
+    var firstAllowedPosition = boundary.findIndex(function (b) { return b; });
+    var prefixFormat = newFormattedValue.slice(0, firstAllowedPosition);
+    if (!lastFormattedValue && !curValue.startsWith(prefixFormat)) {
+        lastFormattedValue = prefixFormat;
+        curValue = prefixFormat + curValue;
+        curCaretPos = curCaretPos + prefixFormat.length;
+    }
+    var curValLn = curValue.length;
+    var formattedValueLn = newFormattedValue.length;
+    // create index map
+    var addedIndexMap = {};
+    var indexMap = new Array(curValLn);
+    for (var i = 0; i < curValLn; i++) {
+        indexMap[i] = -1;
+        for (var j = 0, jLn = formattedValueLn; j < jLn; j++) {
+            var isCharSame = isCharacterSame({
+                currentValue: curValue,
+                lastValue: lastFormattedValue,
+                formattedValue: newFormattedValue,
+                currentValueIndex: i,
+                formattedValueIndex: j,
+            });
+            if (isCharSame && addedIndexMap[j] !== true) {
+                indexMap[i] = j;
+                addedIndexMap[j] = true;
+                break;
+            }
+        }
+    }
+    /**
+     * For current caret position find closest characters (left and right side)
+     * which are properly mapped to formatted value.
+     * The idea is that the new caret position will exist always in the boundary of
+     * that mapped index
+     */
+    var pos = curCaretPos;
+    while (pos < curValLn && (indexMap[pos] === -1 || !isValidInputCharacter(curValue[pos]))) {
+        pos++;
+    }
+    // if the caret position is on last keep the endIndex as last for formatted value
+    var endIndex = pos === curValLn || indexMap[pos] === -1 ? formattedValueLn : indexMap[pos];
+    pos = curCaretPos - 1;
+    while (pos > 0 && indexMap[pos] === -1)
+        { pos--; }
+    var startIndex = pos === -1 || indexMap[pos] === -1 ? 0 : indexMap[pos] + 1;
+    /**
+     * case where a char is added on suffix and removed from middle, example 2sq345 becoming $2,345 sq
+     * there is still a mapping but the order of start index and end index is changed
+     */
+    if (startIndex > endIndex)
+        { return endIndex; }
+    /**
+     * given the current caret position if it closer to startIndex
+     * keep the new caret position on start index or keep it closer to endIndex
+     */
+    return curCaretPos - startIndex < endIndex - curCaretPos ? startIndex : endIndex;
+}
+/* This keeps the caret within typing area so people can't type in between prefix or suffix or format characters */
+function getCaretPosInBoundary(value, caretPos, boundary, direction) {
+    var valLn = value.length;
+    // clamp caret position to [0, value.length]
+    caretPos = clamp(caretPos, 0, valLn);
+    if (direction === 'left') {
+        while (caretPos >= 0 && !boundary[caretPos])
+            { caretPos--; }
+        // if we don't find any suitable caret position on left, set it on first allowed position
+        if (caretPos === -1)
+            { caretPos = boundary.indexOf(true); }
+    }
+    else {
+        while (caretPos <= valLn && !boundary[caretPos])
+            { caretPos++; }
+        // if we don't find any suitable caret position on right, set it on last allowed position
+        if (caretPos > valLn)
+            { caretPos = boundary.lastIndexOf(true); }
+    }
+    // if we still don't find caret position, set it at the end of value
+    if (caretPos === -1)
+        { caretPos = valLn; }
+    return caretPos;
+}
+function caretUnknownFormatBoundary(formattedValue) {
+    var boundaryAry = Array.from({ length: formattedValue.length + 1 }).map(function () { return true; });
+    for (var i = 0, ln = boundaryAry.length; i < ln; i++) {
+        // consider caret to be in boundary if it is before or after numeric value
+        boundaryAry[i] = Boolean(charIsNumber(formattedValue[i]) || charIsNumber(formattedValue[i - 1]));
+    }
+    return boundaryAry;
+}
+function useInternalValues(value, defaultValue, valueIsNumericString, format, removeFormatting, onValueChange) {
+    if ( onValueChange === void 0 ) onValueChange = noop;
+
+    var getValues = usePersistentCallback(function (value, valueIsNumericString) {
+        var formattedValue, numAsString;
+        if (isNotValidValue(value)) {
+            numAsString = '';
+            formattedValue = '';
+        }
+        else if (typeof value === 'number' || valueIsNumericString) {
+            numAsString = typeof value === 'number' ? toNumericString(value) : value;
+            formattedValue = format(numAsString);
+        }
+        else {
+            numAsString = removeFormatting(value, undefined);
+            formattedValue = format(numAsString);
+        }
+        return { formattedValue: formattedValue, numAsString: numAsString };
+    });
+    var ref = react.useState(function () {
+        return getValues(isNil(value) ? defaultValue : value, valueIsNumericString);
+    });
+    var values = ref[0];
+    var setValues = ref[1];
+    var _onValueChange = function (newValues, sourceInfo) {
+        if (newValues.formattedValue !== values.formattedValue) {
+            setValues({
+                formattedValue: newValues.formattedValue,
+                numAsString: newValues.value,
+            });
+        }
+        // call parent on value change if only if formatted value is changed
+        onValueChange(newValues, sourceInfo);
+    };
+    // if value is switch from controlled to uncontrolled, use the internal state's value to format with new props
+    var _value = value;
+    var _valueIsNumericString = valueIsNumericString;
+    if (isNil(value)) {
+        _value = values.numAsString;
+        _valueIsNumericString = true;
+    }
+    var newValues = getValues(_value, _valueIsNumericString);
+    react.useMemo(function () {
+        setValues(newValues);
+    }, [newValues.formattedValue]);
+    return [values, _onValueChange];
+}
+
+function defaultRemoveFormatting(value) {
+    return value.replace(/[^0-9]/g, '');
+}
+function defaultFormat(value) {
+    return value;
+}
+function NumberFormatBase(props) {
+    var type = props.type; if ( type === void 0 ) type = 'text';
+    var displayType = props.displayType; if ( displayType === void 0 ) displayType = 'input';
+    var customInput = props.customInput;
+    var renderText = props.renderText;
+    var getInputRef = props.getInputRef;
+    var format = props.format; if ( format === void 0 ) format = defaultFormat;
+    var removeFormatting = props.removeFormatting; if ( removeFormatting === void 0 ) removeFormatting = defaultRemoveFormatting;
+    var defaultValue = props.defaultValue;
+    var valueIsNumericString = props.valueIsNumericString;
+    var onValueChange = props.onValueChange;
+    var isAllowed = props.isAllowed;
+    var onChange = props.onChange; if ( onChange === void 0 ) onChange = noop;
+    var onKeyDown = props.onKeyDown; if ( onKeyDown === void 0 ) onKeyDown = noop;
+    var onMouseUp = props.onMouseUp; if ( onMouseUp === void 0 ) onMouseUp = noop;
+    var onFocus = props.onFocus; if ( onFocus === void 0 ) onFocus = noop;
+    var onBlur = props.onBlur; if ( onBlur === void 0 ) onBlur = noop;
+    var propValue = props.value;
+    var getCaretBoundary = props.getCaretBoundary; if ( getCaretBoundary === void 0 ) getCaretBoundary = caretUnknownFormatBoundary;
+    var isValidInputCharacter = props.isValidInputCharacter; if ( isValidInputCharacter === void 0 ) isValidInputCharacter = charIsNumber;
+    var isCharacterSame = props.isCharacterSame;
+    var otherProps = __rest$1(props, ["type", "displayType", "customInput", "renderText", "getInputRef", "format", "removeFormatting", "defaultValue", "valueIsNumericString", "onValueChange", "isAllowed", "onChange", "onKeyDown", "onMouseUp", "onFocus", "onBlur", "value", "getCaretBoundary", "isValidInputCharacter", "isCharacterSame"]);
+    var ref = useInternalValues(propValue, defaultValue, Boolean(valueIsNumericString), format, removeFormatting, onValueChange);
+    var ref_0 = ref[0];
+    var formattedValue = ref_0.formattedValue;
+    var numAsString = ref_0.numAsString;
+    var onFormattedValueChange = ref[1];
+    var lastUpdatedValue = react.useRef({ formattedValue: formattedValue, numAsString: numAsString });
+    var _onValueChange = function (values, source) {
+        lastUpdatedValue.current = { formattedValue: values.formattedValue, numAsString: values.value };
+        onFormattedValueChange(values, source);
+    };
+    var ref$1 = react.useState(false);
+    var mounted = ref$1[0];
+    var setMounted = ref$1[1];
+    var focusedElm = react.useRef(null);
+    var timeout = react.useRef({
+        setCaretTimeout: null,
+        focusTimeout: null,
+    });
+    react.useEffect(function () {
+        setMounted(true);
+        return function () {
+            clearTimeout(timeout.current.setCaretTimeout);
+            clearTimeout(timeout.current.focusTimeout);
+        };
+    }, []);
+    var _format = format;
+    var getValueObject = function (formattedValue, numAsString) {
+        var floatValue = parseFloat(numAsString);
+        return {
+            formattedValue: formattedValue,
+            value: numAsString,
+            floatValue: isNaN(floatValue) ? undefined : floatValue,
+        };
+    };
+    var setPatchedCaretPosition = function (el, caretPos, currentValue) {
+        // don't reset the caret position when the whole input content is selected
+        if (el.selectionStart === 0 && el.selectionEnd === el.value.length)
+            { return; }
+        /* setting caret position within timeout of 0ms is required for mobile chrome,
+        otherwise browser resets the caret position after we set it
+        We are also setting it without timeout so that in normal browser we don't see the flickering */
+        setCaretPosition(el, caretPos);
+        timeout.current.setCaretTimeout = setTimeout(function () {
+            if (el.value === currentValue && el.selectionStart !== el.selectionEnd) {
+                setCaretPosition(el, caretPos);
+            }
+        }, 0);
+    };
+    /* This keeps the caret within typing area so people can't type in between prefix or suffix */
+    var correctCaretPosition = function (value, caretPos, direction) {
+        return getCaretPosInBoundary(value, caretPos, getCaretBoundary(value), direction);
+    };
+    var getNewCaretPosition = function (inputValue, newFormattedValue, caretPos) {
+        var caretBoundary = getCaretBoundary(newFormattedValue);
+        var updatedCaretPos = getCaretPosition(newFormattedValue, formattedValue, inputValue, caretPos, caretBoundary, isValidInputCharacter, isCharacterSame);
+        //correct caret position if its outside of editable area
+        updatedCaretPos = getCaretPosInBoundary(newFormattedValue, updatedCaretPos, caretBoundary);
+        return updatedCaretPos;
+    };
+    var updateValueAndCaretPosition = function (params) {
+        var newFormattedValue = params.formattedValue; if ( newFormattedValue === void 0 ) newFormattedValue = '';
+        var input = params.input;
+        var setCaretPosition = params.setCaretPosition; if ( setCaretPosition === void 0 ) setCaretPosition = true;
+        var source = params.source;
+        var event = params.event;
+        var numAsString = params.numAsString;
+        var caretPos = params.caretPos;
+        if (input) {
+            //calculate caret position if not defined
+            if (caretPos === undefined && setCaretPosition) {
+                var inputValue = params.inputValue || input.value;
+                var currentCaretPosition = geInputCaretPosition(input);
+                /**
+                 * set the value imperatively, this is required for IE fix
+                 * This is also required as if new caret position is beyond the previous value.
+                 * Caret position will not be set correctly
+                 */
+                input.value = newFormattedValue;
+                //get the caret position
+                caretPos = getNewCaretPosition(inputValue, newFormattedValue, currentCaretPosition);
+            }
+            /**
+             * set the value imperatively, as we set the caret position as well imperatively.
+             * This is to keep value and caret position in sync
+             */
+            input.value = newFormattedValue;
+            //set caret position, and value imperatively when element is provided
+            if (setCaretPosition && caretPos !== undefined) {
+                //set caret position
+                setPatchedCaretPosition(input, caretPos, newFormattedValue);
+            }
+        }
+        if (newFormattedValue !== formattedValue) {
+            // trigger onValueChange synchronously, so parent is updated along with the number format. Fix for #277, #287
+            _onValueChange(getValueObject(newFormattedValue, numAsString), { event: event, source: source });
+        }
+    };
+    /**
+     * if the formatted value is not synced to parent, or if the formatted value is different from last synced value sync it
+     * we also don't need to sync to the parent if no formatting is applied
+     * if the formatting props is removed, in which case last formatted value will be different from the numeric string value
+     * in such case we need to inform the parent.
+     */
+    react.useEffect(function () {
+        var ref = lastUpdatedValue.current;
+        var lastFormattedValue = ref.formattedValue;
+        var lastNumAsString = ref.numAsString;
+        if (formattedValue !== lastFormattedValue &&
+            (formattedValue !== numAsString || lastFormattedValue !== lastNumAsString)) {
+            _onValueChange(getValueObject(formattedValue, numAsString), {
+                event: undefined,
+                source: SourceType.props,
+            });
+        }
+    }, [formattedValue, numAsString]);
+    // also if formatted value is changed from the props, we need to update the caret position
+    // keep the last caret position if element is focused
+    var currentCaretPosition = focusedElm.current
+        ? geInputCaretPosition(focusedElm.current)
+        : undefined;
+    // needed to prevent warning with useLayoutEffect on server
+    var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? react.useLayoutEffect : react.useEffect;
+    useIsomorphicLayoutEffect(function () {
+        var input = focusedElm.current;
+        if (formattedValue !== lastUpdatedValue.current.formattedValue && input) {
+            var caretPos = getNewCaretPosition(lastUpdatedValue.current.formattedValue, formattedValue, currentCaretPosition);
+            /**
+             * set the value imperatively, as we set the caret position as well imperatively.
+             * This is to keep value and caret position in sync
+             */
+            input.value = formattedValue;
+            setPatchedCaretPosition(input, caretPos, formattedValue);
+        }
+    }, [formattedValue]);
+    var formatInputValue = function (inputValue, event, source) {
+        var changeRange = findChangeRange(formattedValue, inputValue);
+        var changeMeta = Object.assign(Object.assign({}, changeRange), { lastValue: formattedValue });
+        var _numAsString = removeFormatting(inputValue, changeMeta);
+        var _formattedValue = _format(_numAsString);
+        // formatting can remove some of the number chars, so we need to fine number string again
+        _numAsString = removeFormatting(_formattedValue, undefined);
+        if (isAllowed && !isAllowed(getValueObject(_formattedValue, _numAsString))) {
+            //reset the caret position
+            var input = event.target;
+            var currentCaretPosition = geInputCaretPosition(input);
+            var caretPos = getNewCaretPosition(inputValue, formattedValue, currentCaretPosition);
+            input.value = formattedValue;
+            setPatchedCaretPosition(input, caretPos, formattedValue);
+            return false;
+        }
+        updateValueAndCaretPosition({
+            formattedValue: _formattedValue,
+            numAsString: _numAsString,
+            inputValue: inputValue,
+            event: event,
+            source: source,
+            setCaretPosition: true,
+            input: event.target,
+        });
+        return true;
+    };
+    var _onChange = function (e) {
+        var el = e.target;
+        var inputValue = el.value;
+        var changed = formatInputValue(inputValue, e, SourceType.event);
+        if (changed)
+            { onChange(e); }
+    };
+    var _onKeyDown = function (e) {
+        var el = e.target;
+        var key = e.key;
+        var selectionStart = el.selectionStart;
+        var selectionEnd = el.selectionEnd;
+        var value = el.value; if ( value === void 0 ) value = '';
+        var expectedCaretPosition;
+        //Handle backspace and delete against non numerical/decimal characters or arrow keys
+        if (key === 'ArrowLeft' || key === 'Backspace') {
+            expectedCaretPosition = Math.max(selectionStart - 1, 0);
+        }
+        else if (key === 'ArrowRight') {
+            expectedCaretPosition = Math.min(selectionStart + 1, value.length);
+        }
+        else if (key === 'Delete') {
+            expectedCaretPosition = selectionStart;
+        }
+        //if expectedCaretPosition is not set it means we don't want to Handle keyDown
+        // also if multiple characters are selected don't handle
+        if (expectedCaretPosition === undefined || selectionStart !== selectionEnd) {
+            onKeyDown(e);
+            return;
+        }
+        var newCaretPosition = expectedCaretPosition;
+        if (key === 'ArrowLeft' || key === 'ArrowRight') {
+            var direction = key === 'ArrowLeft' ? 'left' : 'right';
+            newCaretPosition = correctCaretPosition(value, expectedCaretPosition, direction);
+            // arrow left or right only moves the caret, so no need to handle the event, if we are handling it manually
+            if (newCaretPosition !== expectedCaretPosition) {
+                e.preventDefault();
+            }
+        }
+        else if (key === 'Delete' && !isValidInputCharacter(value[expectedCaretPosition])) {
+            // in case of delete go to closest caret boundary on the right side
+            newCaretPosition = correctCaretPosition(value, expectedCaretPosition, 'right');
+        }
+        else if (key === 'Backspace' && !isValidInputCharacter(value[expectedCaretPosition])) {
+            // in case of backspace go to closest caret boundary on the left side
+            newCaretPosition = correctCaretPosition(value, expectedCaretPosition, 'left');
+        }
+        if (newCaretPosition !== expectedCaretPosition) {
+            setPatchedCaretPosition(el, newCaretPosition, value);
+        }
+        /* NOTE: this is just required for unit test as we need to get the newCaretPosition,
+                Remove this when you find different solution */
+        /* @ts-ignore */
+        if (e.isUnitTestRun) {
+            setPatchedCaretPosition(el, newCaretPosition, value);
+        }
+        onKeyDown(e);
+    };
+    /** required to handle the caret position when click anywhere within the input **/
+    var _onMouseUp = function (e) {
+        var el = e.target;
+        /**
+         * NOTE: we have to give default value for value as in case when custom input is provided
+         * value can come as undefined when nothing is provided on value prop.
+         */
+        var selectionStart = el.selectionStart;
+        var selectionEnd = el.selectionEnd;
+        var value = el.value; if ( value === void 0 ) value = '';
+        if (selectionStart === selectionEnd) {
+            var caretPosition = correctCaretPosition(value, selectionStart);
+            if (caretPosition !== selectionStart) {
+                setPatchedCaretPosition(el, caretPosition, value);
+            }
+        }
+        onMouseUp(e);
+    };
+    var _onFocus = function (e) {
+        // Workaround Chrome and Safari bug https://bugs.chromium.org/p/chromium/issues/detail?id=779328
+        // (onFocus event target selectionStart is always 0 before setTimeout)
+        if (e.persist)
+            { e.persist(); }
+        var el = e.target;
+        focusedElm.current = el;
+        timeout.current.focusTimeout = setTimeout(function () {
+            var selectionStart = el.selectionStart;
+            var selectionEnd = el.selectionEnd;
+            var value = el.value; if ( value === void 0 ) value = '';
+            var caretPosition = correctCaretPosition(value, selectionStart);
+            //setPatchedCaretPosition only when everything is not selected on focus (while tabbing into the field)
+            if (caretPosition !== selectionStart &&
+                !(selectionStart === 0 && selectionEnd === value.length)) {
+                setPatchedCaretPosition(el, caretPosition, value);
+            }
+            onFocus(e);
+        }, 0);
+    };
+    var _onBlur = function (e) {
+        focusedElm.current = null;
+        clearTimeout(timeout.current.focusTimeout);
+        clearTimeout(timeout.current.setCaretTimeout);
+        onBlur(e);
+    };
+    // add input mode on element based on format prop and device once the component is mounted
+    var inputMode = mounted && addInputMode() ? 'numeric' : undefined;
+    var inputProps = Object.assign({ inputMode: inputMode }, otherProps, {
+        type: type,
+        value: formattedValue,
+        onChange: _onChange,
+        onKeyDown: _onKeyDown,
+        onMouseUp: _onMouseUp,
+        onFocus: _onFocus,
+        onBlur: _onBlur,
+    });
+    if (displayType === 'text') {
+        return renderText ? (react.createElement(react.Fragment, null, renderText(formattedValue, otherProps) || null)) : (react.createElement("span", Object.assign({}, otherProps, { ref: getInputRef }), formattedValue));
+    }
+    else if (customInput) {
+        var CustomInput = customInput;
+        /* @ts-ignore */
+        return react.createElement(CustomInput, Object.assign({}, inputProps, { ref: getInputRef }));
+    }
+    return react.createElement("input", Object.assign({}, inputProps, { ref: getInputRef }));
+}
+
+function format(numStr, props) {
+    var decimalScale = props.decimalScale;
+    var fixedDecimalScale = props.fixedDecimalScale;
+    var prefix = props.prefix; if ( prefix === void 0 ) prefix = '';
+    var suffix = props.suffix; if ( suffix === void 0 ) suffix = '';
+    var allowNegative = props.allowNegative;
+    var thousandsGroupStyle = props.thousandsGroupStyle; if ( thousandsGroupStyle === void 0 ) thousandsGroupStyle = 'thousand';
+    // don't apply formatting on empty string or '-'
+    if (numStr === '' || numStr === '-') {
+        return numStr;
+    }
+    var ref = getSeparators(props);
+    var thousandSeparator = ref.thousandSeparator;
+    var decimalSeparator = ref.decimalSeparator;
+    /**
+     * Keep the decimal separator
+     * when decimalScale is not defined or non zero and the numStr has decimal in it
+     * Or if decimalScale is > 0 and fixeDecimalScale is true (even if numStr has no decimal)
+     */
+    var hasDecimalSeparator = (decimalScale !== 0 && numStr.indexOf('.') !== -1) || (decimalScale && fixedDecimalScale);
+    var ref$1 = splitDecimal(numStr, allowNegative);
+    var beforeDecimal = ref$1.beforeDecimal;
+    var afterDecimal = ref$1.afterDecimal;
+    var addNegation = ref$1.addNegation; // eslint-disable-line prefer-const
+    //apply decimal precision if its defined
+    if (decimalScale !== undefined) {
+        afterDecimal = limitToScale(afterDecimal, decimalScale, !!fixedDecimalScale);
+    }
+    if (thousandSeparator) {
+        beforeDecimal = applyThousandSeparator(beforeDecimal, thousandSeparator, thousandsGroupStyle);
+    }
+    //add prefix and suffix when there is a number present
+    if (prefix)
+        { beforeDecimal = prefix + beforeDecimal; }
+    if (suffix)
+        { afterDecimal = afterDecimal + suffix; }
+    //restore negation sign
+    if (addNegation)
+        { beforeDecimal = '-' + beforeDecimal; }
+    numStr = beforeDecimal + ((hasDecimalSeparator && decimalSeparator) || '') + afterDecimal;
+    return numStr;
+}
+function getSeparators(props) {
+    var decimalSeparator = props.decimalSeparator; if ( decimalSeparator === void 0 ) decimalSeparator = '.';
+    var thousandSeparator = props.thousandSeparator;
+    var allowedDecimalSeparators = props.allowedDecimalSeparators;
+    if (thousandSeparator === true) {
+        thousandSeparator = ',';
+    }
+    if (!allowedDecimalSeparators) {
+        allowedDecimalSeparators = [decimalSeparator, '.'];
+    }
+    return {
+        decimalSeparator: decimalSeparator,
+        thousandSeparator: thousandSeparator,
+        allowedDecimalSeparators: allowedDecimalSeparators,
+    };
+}
+function handleNegation(value, allowNegative) {
+    if ( value === void 0 ) value = '';
+
+    var negationRegex = new RegExp('(-)');
+    var doubleNegationRegex = new RegExp('(-)(.)*(-)');
+    // Check number has '-' value
+    var hasNegation = negationRegex.test(value);
+    // Check number has 2 or more '-' values
+    var removeNegation = doubleNegationRegex.test(value);
+    //remove negation
+    value = value.replace(/-/g, '');
+    if (hasNegation && !removeNegation && allowNegative) {
+        value = '-' + value;
+    }
+    return value;
+}
+function getNumberRegex(decimalSeparator, global) {
+    return new RegExp(("(^-)|[0-9]|" + (escapeRegExp(decimalSeparator))), global ? 'g' : undefined);
+}
+function isNumericString(val, prefix, suffix) {
+    // for empty value we can always treat it as numeric string
+    if (val === '')
+        { return true; }
+    return (!(prefix === null || prefix === void 0 ? void 0 : prefix.match(/\d/)) && !(suffix === null || suffix === void 0 ? void 0 : suffix.match(/\d/)) && typeof val === 'string' && !isNaN(Number(val)));
+}
+function removeFormatting(value, changeMeta, props) {
+    var assign;
+
+    if ( changeMeta === void 0 ) changeMeta = getDefaultChangeMeta(value);
+    var allowNegative = props.allowNegative;
+    var prefix = props.prefix; if ( prefix === void 0 ) prefix = '';
+    var suffix = props.suffix; if ( suffix === void 0 ) suffix = '';
+    var decimalScale = props.decimalScale;
+    var from = changeMeta.from;
+    var to = changeMeta.to;
+    var start = to.start;
+    var end = to.end;
+    var ref = getSeparators(props);
+    var allowedDecimalSeparators = ref.allowedDecimalSeparators;
+    var decimalSeparator = ref.decimalSeparator;
+    var isBeforeDecimalSeparator = value[end] === decimalSeparator;
+    /**
+     * If only a number is added on empty input which matches with the prefix or suffix,
+     * then don't remove it, just return the same
+     */
+    if (charIsNumber(value) &&
+        (value === prefix || value === suffix) &&
+        changeMeta.lastValue === '') {
+        return value;
+    }
+    /** Check for any allowed decimal separator is added in the numeric format and replace it with decimal separator */
+    if (end - start === 1 && allowedDecimalSeparators.indexOf(value[start]) !== -1) {
+        var separator = decimalScale === 0 ? '' : decimalSeparator;
+        value = value.substring(0, start) + separator + value.substring(start + 1, value.length);
+    }
+    var stripNegation = function (value, start, end) {
+        /**
+         * if prefix starts with - we don't allow negative number to avoid confusion
+         * if suffix starts with - and the value length is same as suffix length, then the - sign is from the suffix
+         * In other cases, if the value starts with - then it is a negation
+         */
+        var hasNegation = false;
+        var hasDoubleNegation = false;
+        if (prefix.startsWith('-')) {
+            hasNegation = false;
+        }
+        else if (value.startsWith('--')) {
+            hasNegation = false;
+            hasDoubleNegation = true;
+        }
+        else if (suffix.startsWith('-') && value.length === suffix.length) {
+            hasNegation = false;
+        }
+        else if (value[0] === '-') {
+            hasNegation = true;
+        }
+        var charsToRemove = hasNegation ? 1 : 0;
+        if (hasDoubleNegation)
+            { charsToRemove = 2; }
+        // remove negation/double negation from start to simplify prefix logic as negation comes before prefix
+        if (charsToRemove) {
+            value = value.substring(charsToRemove);
+            // account for the removal of the negation for start and end index
+            start -= charsToRemove;
+            end -= charsToRemove;
+        }
+        return { value: value, start: start, end: end, hasNegation: hasNegation };
+    };
+    var toMetadata = stripNegation(value, start, end);
+    var hasNegation = toMetadata.hasNegation;
+    ((assign = toMetadata, value = assign.value, start = assign.start, end = assign.end));
+    var ref$1 = stripNegation(changeMeta.lastValue, from.start, from.end);
+    var fromStart = ref$1.start;
+    var fromEnd = ref$1.end;
+    var lastValue = ref$1.value;
+    // if only prefix and suffix part is updated reset the value to last value
+    // if the changed range is from suffix in the updated value, and the the suffix starts with the same characters, allow the change
+    var updatedSuffixPart = value.substring(start, end);
+    if (value.length &&
+        lastValue.length &&
+        (fromStart > lastValue.length - suffix.length || fromEnd < prefix.length) &&
+        !(updatedSuffixPart && suffix.startsWith(updatedSuffixPart))) {
+        value = lastValue;
+    }
+    /**
+     * remove prefix
+     * Remove whole prefix part if its present on the value
+     * If the prefix is partially deleted (in which case change start index will be less the prefix length)
+     * Remove only partial part of prefix.
+     */
+    var startIndex = 0;
+    if (value.startsWith(prefix))
+        { startIndex += prefix.length; }
+    else if (start < prefix.length)
+        { startIndex = start; }
+    value = value.substring(startIndex);
+    // account for deleted prefix for end
+    end -= startIndex;
+    /**
+     * Remove suffix
+     * Remove whole suffix part if its present on the value
+     * If the suffix is partially deleted (in which case change end index will be greater than the suffixStartIndex)
+     * remove the partial part of suffix
+     */
+    var endIndex = value.length;
+    var suffixStartIndex = value.length - suffix.length;
+    if (value.endsWith(suffix))
+        { endIndex = suffixStartIndex; }
+    // if the suffix is removed from the end
+    else if (end > suffixStartIndex)
+        { endIndex = end; }
+    // if the suffix is removed from start
+    else if (end > value.length - suffix.length)
+        { endIndex = end; }
+    value = value.substring(0, endIndex);
+    // add the negation back and handle for double negation
+    value = handleNegation(hasNegation ? ("-" + value) : value, allowNegative);
+    // remove non numeric characters
+    value = (value.match(getNumberRegex(decimalSeparator, true)) || []).join('');
+    // replace the decimalSeparator with ., and only keep the first separator, ignore following ones
+    var firstIndex = value.indexOf(decimalSeparator);
+    value = value.replace(new RegExp(escapeRegExp(decimalSeparator), 'g'), function (match, index) {
+        return index === firstIndex ? '.' : '';
+    });
+    //check if beforeDecimal got deleted and there is nothing after decimal,
+    //clear all numbers in such case while keeping the - sign
+    var ref$2 = splitDecimal(value, allowNegative);
+    var beforeDecimal = ref$2.beforeDecimal;
+    var afterDecimal = ref$2.afterDecimal;
+    var addNegation = ref$2.addNegation; // eslint-disable-line prefer-const
+    //clear only if something got deleted before decimal (cursor is before decimal)
+    if (to.end - to.start < from.end - from.start &&
+        beforeDecimal === '' &&
+        isBeforeDecimalSeparator &&
+        !parseFloat(afterDecimal)) {
+        value = addNegation ? '-' : '';
+    }
+    return value;
+}
+function getCaretBoundary(formattedValue, props) {
+    var prefix = props.prefix; if ( prefix === void 0 ) prefix = '';
+    var suffix = props.suffix; if ( suffix === void 0 ) suffix = '';
+    var boundaryAry = Array.from({ length: formattedValue.length + 1 }).map(function () { return true; });
+    var hasNegation = formattedValue[0] === '-';
+    // fill for prefix and negation
+    boundaryAry.fill(false, 0, prefix.length + (hasNegation ? 1 : 0));
+    // fill for suffix
+    var valLn = formattedValue.length;
+    boundaryAry.fill(false, valLn - suffix.length + 1, valLn + 1);
+    return boundaryAry;
+}
+function validateAndUpdateProps(props) {
+    var ref = getSeparators(props);
+    var thousandSeparator = ref.thousandSeparator;
+    var decimalSeparator = ref.decimalSeparator;
+    // eslint-disable-next-line prefer-const
+    var prefix = props.prefix; if ( prefix === void 0 ) prefix = '';
+    var allowNegative = props.allowNegative; if ( allowNegative === void 0 ) allowNegative = true;
+    if (thousandSeparator === decimalSeparator) {
+        throw new Error(("\n        Decimal separator can't be same as thousand separator.\n        thousandSeparator: " + thousandSeparator + " (thousandSeparator = {true} is same as thousandSeparator = \",\")\n        decimalSeparator: " + decimalSeparator + " (default value for decimalSeparator is .)\n     "));
+    }
+    if (prefix.startsWith('-') && allowNegative) {
+        // TODO: throw error in next major version
+        console.error(("\n      Prefix can't start with '-' when allowNegative is true.\n      prefix: " + prefix + "\n      allowNegative: " + allowNegative + "\n    "));
+        allowNegative = false;
+    }
+    return Object.assign(Object.assign({}, props), { allowNegative: allowNegative });
+}
+function useNumericFormat(props) {
+    // validate props
+    props = validateAndUpdateProps(props);
+    var suffix = props.suffix;
+    var allowNegative = props.allowNegative;
+    var allowLeadingZeros = props.allowLeadingZeros;
+    var onKeyDown = props.onKeyDown; if ( onKeyDown === void 0 ) onKeyDown = noop;
+    var onBlur = props.onBlur; if ( onBlur === void 0 ) onBlur = noop;
+    var thousandSeparator = props.thousandSeparator;
+    var decimalScale = props.decimalScale;
+    var fixedDecimalScale = props.fixedDecimalScale;
+    var prefix = props.prefix; if ( prefix === void 0 ) prefix = '';
+    var defaultValue = props.defaultValue;
+    var value = props.value;
+    var valueIsNumericString = props.valueIsNumericString;
+    var onValueChange = props.onValueChange;
+    var restProps = __rest$1(props, ["decimalSeparator", "allowedDecimalSeparators", "thousandsGroupStyle", "suffix", "allowNegative", "allowLeadingZeros", "onKeyDown", "onBlur", "thousandSeparator", "decimalScale", "fixedDecimalScale", "prefix", "defaultValue", "value", "valueIsNumericString", "onValueChange"]);
+    // get derived decimalSeparator and allowedDecimalSeparators
+    var ref = getSeparators(props);
+    var decimalSeparator = ref.decimalSeparator;
+    var allowedDecimalSeparators = ref.allowedDecimalSeparators;
+    var _format = function (numStr) { return format(numStr, props); };
+    var _removeFormatting = function (inputValue, changeMeta) { return removeFormatting(inputValue, changeMeta, props); };
+    var _value = isNil(value) ? defaultValue : value;
+    // try to figure out isValueNumericString based on format prop and value
+    var _valueIsNumericString = valueIsNumericString !== null && valueIsNumericString !== void 0 ? valueIsNumericString : isNumericString(_value, prefix, suffix);
+    if (!isNil(value)) {
+        _valueIsNumericString = _valueIsNumericString || typeof value === 'number';
+    }
+    else if (!isNil(defaultValue)) {
+        _valueIsNumericString = _valueIsNumericString || typeof defaultValue === 'number';
+    }
+    var roundIncomingValueToPrecision = function (value) {
+        if (isNotValidValue(value))
+            { return value; }
+        if (typeof value === 'number') {
+            value = toNumericString(value);
+        }
+        /**
+         * only round numeric or float string values coming through props,
+         * we don't need to do it for onChange events, as we want to prevent typing there
+         */
+        if (_valueIsNumericString && typeof decimalScale === 'number') {
+            return roundToPrecision(value, decimalScale, Boolean(fixedDecimalScale));
+        }
+        return value;
+    };
+    var ref$1 = useInternalValues(roundIncomingValueToPrecision(value), roundIncomingValueToPrecision(defaultValue), Boolean(_valueIsNumericString), _format, _removeFormatting, onValueChange);
+    var ref$1_0 = ref$1[0];
+    var numAsString = ref$1_0.numAsString;
+    var formattedValue = ref$1_0.formattedValue;
+    var _onValueChange = ref$1[1];
+    var _onKeyDown = function (e) {
+        var el = e.target;
+        var key = e.key;
+        var selectionStart = el.selectionStart;
+        var selectionEnd = el.selectionEnd;
+        var value = el.value; if ( value === void 0 ) value = '';
+        // if multiple characters are selected and user hits backspace, no need to handle anything manually
+        if (selectionStart !== selectionEnd) {
+            onKeyDown(e);
+            return;
+        }
+        // if user hits backspace, while the cursor is before prefix, and the input has negation, remove the negation
+        if (key === 'Backspace' &&
+            value[0] === '-' &&
+            selectionStart === prefix.length + 1 &&
+            allowNegative) {
+            // bring the cursor to after negation
+            setCaretPosition(el, 1);
+        }
+        // don't allow user to delete decimal separator when decimalScale and fixedDecimalScale is set
+        if (decimalScale && fixedDecimalScale) {
+            if (key === 'Backspace' && value[selectionStart - 1] === decimalSeparator) {
+                setCaretPosition(el, selectionStart - 1);
+                e.preventDefault();
+            }
+            else if (key === 'Delete' && value[selectionStart] === decimalSeparator) {
+                e.preventDefault();
+            }
+        }
+        // if user presses the allowed decimal separator before the separator, move the cursor after the separator
+        if ((allowedDecimalSeparators === null || allowedDecimalSeparators === void 0 ? void 0 : allowedDecimalSeparators.includes(key)) && value[selectionStart] === decimalSeparator) {
+            setCaretPosition(el, selectionStart + 1);
+        }
+        var _thousandSeparator = thousandSeparator === true ? ',' : thousandSeparator;
+        // move cursor when delete or backspace is pressed before/after thousand separator
+        if (key === 'Backspace' && value[selectionStart - 1] === _thousandSeparator) {
+            setCaretPosition(el, selectionStart - 1);
+        }
+        if (key === 'Delete' && value[selectionStart] === _thousandSeparator) {
+            setCaretPosition(el, selectionStart + 1);
+        }
+        onKeyDown(e);
+    };
+    var _onBlur = function (e) {
+        var _value = numAsString;
+        // if there no no numeric value, clear the input
+        if (!_value.match(/\d/g)) {
+            _value = '';
+        }
+        // clear leading 0s
+        if (!allowLeadingZeros) {
+            _value = fixLeadingZero(_value);
+        }
+        // apply fixedDecimalScale on blur event
+        if (fixedDecimalScale && decimalScale) {
+            _value = roundToPrecision(_value, decimalScale, fixedDecimalScale);
+        }
+        if (_value !== numAsString) {
+            var formattedValue = format(_value, props);
+            _onValueChange({
+                formattedValue: formattedValue,
+                value: _value,
+                floatValue: parseFloat(_value),
+            }, {
+                event: e,
+                source: SourceType.event,
+            });
+        }
+        onBlur(e);
+    };
+    var isValidInputCharacter = function (inputChar) {
+        if (inputChar === decimalSeparator)
+            { return true; }
+        return charIsNumber(inputChar);
+    };
+    var isCharacterSame = function (ref) {
+        var currentValue = ref.currentValue;
+        var lastValue = ref.lastValue;
+        var formattedValue = ref.formattedValue;
+        var currentValueIndex = ref.currentValueIndex;
+        var formattedValueIndex = ref.formattedValueIndex;
+
+        var curChar = currentValue[currentValueIndex];
+        var newChar = formattedValue[formattedValueIndex];
+        /**
+         * NOTE: as thousand separator and allowedDecimalSeparators can be same, we need to check on
+         * typed range if we have typed any character from allowedDecimalSeparators, in that case we
+         * consider different characters like , and . same within the range of updated value.
+         */
+        var typedRange = findChangeRange(lastValue, currentValue);
+        var to = typedRange.to;
+        if (currentValueIndex >= to.start &&
+            currentValueIndex < to.end &&
+            allowedDecimalSeparators &&
+            allowedDecimalSeparators.includes(curChar) &&
+            newChar === decimalSeparator) {
+            return true;
+        }
+        return curChar === newChar;
+    };
+    return Object.assign(Object.assign({}, restProps), { value: formattedValue, valueIsNumericString: false, isValidInputCharacter: isValidInputCharacter,
+        isCharacterSame: isCharacterSame, onValueChange: _onValueChange, format: _format, removeFormatting: _removeFormatting, getCaretBoundary: function (formattedValue) { return getCaretBoundary(formattedValue, props); }, onKeyDown: _onKeyDown, onBlur: _onBlur });
+}
+function NumericFormat(props) {
+    var numericFormatProps = useNumericFormat(props);
+    return react.createElement(NumberFormatBase, Object.assign({}, numericFormatProps));
+}
+
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+const BcmReactNumber = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.isRange = (value, min, max) => {
+      if (value === undefined) {
+        return true;
+      }
+      const minValid = min === undefined || value >= min;
+      const maxValid = max === undefined || value <= max;
+      return minValid && maxValid;
+    };
+    this.disabled = false;
+    this.options = undefined;
+  }
+  componentWillRender() {
+    this.init();
+  }
+  componentDidLoad() {
+    this.init();
+  }
+  init() {
+    const _a = this.options, { min, max, mode } = _a, rest = __rest(_a, ["min", "max", "mode"]);
+    const render = react.createElement(NumericFormat, Object.assign(Object.assign({}, rest), { isAllowed: (values) => {
+        if (mode === "strict") {
+          return this.isRange(values.floatValue, +min, +max);
+        }
+        return true;
+      }, onValueChange: e => {
+        if (this.options.onValueChange) {
+          this.options.onValueChange(e);
+        }
+      } }));
+    reactDom.render(render, this.el);
+  }
+  get el() { return getElement(this); }
+};
+
+const BcmTooltip = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.bcmTooltipShow = createEvent(this, "bcmTooltipShow", 7);
+    this.bcmTooltipHide = createEvent(this, "bcmTooltipHide", 7);
+    this._id = Generate.UID();
+    this.message = "";
+    this.placement = Bcm$1.Placement.top;
+    this.trigger = Bcm$1.TriggerType.click;
+    this.open = false;
+    this.color = "slate";
+    this.size = Bcm$1.Size.medium;
+    this.openDelay = 0;
+    this.closeDelay = 0;
+    this.autoHide = false;
+    this.targetId = undefined;
+    this.tooltip = undefined;
+  }
+  emitShow() {
+    this.bcmTooltipShow.emit();
+  }
+  emitHide() {
+    this.bcmTooltipHide.emit();
+  }
+  connectedCallback() {
+    this.tooltip = new 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,
+      autoHide: this.autoHide,
+      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.autoHide = this.autoHide;
+    this.tooltip.update();
+  }
+  disconnectedCallback() {
+    this.tooltip.destroy();
+  }
+  async show() {
+    this.tooltip.show();
+  }
+  async hide() {
+    this.tooltip.hide();
+  }
+  async toggle() {
+    this.tooltip.toggle();
+  }
+  render() {
+    return (h$1(Host, { class: "tw-inline-flex tw-h-fit tw-w-fit", role: "tooltip", "aria-hidden": "true" }, h$1("slot", null)));
+  }
+  get el() { return getElement(this); }
+};
+
+export { BcmButton as bcm_button, BcmColorful as bcm_colorful, BcmForm as bcm_form, BcmIcon as bcm_icon, BcmInput as bcm_input, BcmInput2 as bcm_input_2, BcmLabel as bcm_label, BcmLinked as bcm_linked, NumberInput as bcm_number_input, BcmReactNumber as bcm_react_number, BcmTooltip as bcm_tooltip };