bromcom-ui 2.10.1-rc.10 → 2.10.1-rc.11

package/dist/esm/{bcm-button_15.entry.js → bcm-button_18.entry.js}

@@ -2,8 +2,8 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { h as h$2, 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-80f589b2.js';
+import { h as h$2, r as registerInstance, c as createEvent, H as Host, g as getElement, f as forceUpdate, a as getAssetPath } from './index-0615c2b8.js';
+import { s as snq, G as Generate } from './generate-c1065765.js';
 import { B as Bcm, a as Bcm$1 } from './bcm-0f9cc27c.js';
 import { c as classnames } from './index-00c8a8f7.js';
 import { c as createStore } from './index-7e71bbc8.js';
@@ -13,20 +13,19 @@ import { C as CaptionTemplate } from './caption-template-0c32ce16.js';
 import { d as delay, p as pluralize, g as getChildElements } from './utils-57652744.js';
 import { I as IsLoad } from './is-load-decorator-8277e3b8.js';
 import { c as createCommonjsModule, a as commonjsGlobal, g as getAugmentedNamespace, b as getDefaultExportFromCjs } from './_commonjsHelpers-7002e5de.js';
-import './datetime-helper-df25808a.js';
-import { N as NumberHelper } from './number-helper-aeb5881f.js';
+import { D as DateTimeHelper, V as Validators } from './validators-3881959b.js';
+import { N as NumberHelper } from './number-helper-d42f27d5.js';
 import { S as StringHelper } from './string-helper-8f5da9ec.js';
-import { V as Validators } from './validators-b5e106d5.js';
-import './element-dragger-89bb52fd.js';
+import { D as DragDirections, E as ElementDragger } from './element-dragger-89bb52fd.js';
 import './types-6f06fa1a.js';
 import './types-9493a7ed.js';
-import { I as InputTemplate } from './input-template-a5d07ba6.js';
+import { g as getPlacement, s as setPosition } from './popover-placement-279ce860.js';
 import { L as LabelTemplate } from './label-template-ad2e8119.js';
+import { I as InputTemplate } from './input-template-74229cd2.js';
 import { F as FloatingUI } from './floating-ui-a4e67246.js';
-import { J as JsonParse } from './json-parse-decarator-5195f510.js';
-import { g as getPlacement, s as setPosition } from './popover-placement-279ce860.js';
-import { T as Tooltip } from './tooltip-helper-d339c58a.js';
-import './package-5e39e390.js';
+import { J as JsonParse } from './json-parse-decarator-a301c8b7.js';
+import { T as Tooltip } from './tooltip-helper-61f3e8cb.js';
+import './package-5c7049c1.js';
 import './colors-ebea297f.js';
 import './colors-1d7854ea.js';
 
@@ -381,7 +380,7 @@ BcmButton.style = buttonCss;
 
 const checkboxCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .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-checkbox{outline:none;border:none;--bcm-checkbox-primary-color-default:var(--bcm-new-ds-color-blue-500);--bcm-checkbox-secondary-color-default:var(--bcm-new-ds-color-white);--bcm-checkbox-primary-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-checkbox-secondary-color-hover:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-checkbox-secondary-color-focus-visible:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-active:var(--bcm-new-ds-color-blue-700);--bcm-checkbox-secondary-color-active:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-disabled:var(--bcm-new-ds-color-slate-300);--bcm-checkbox-secondary-color-disabled:var(--bcm-new-ds-color-slate-200);display:inline-flex;width:fit-content;flex-direction:column;margin-bottom:8px}.bcm-checkbox:focus,.bcm-checkbox:hover,.bcm-checkbox:active{outline:none;border:none}.bcm-checkbox *{box-sizing:border-box}.bcm-checkbox input[type=radio],.bcm-checkbox input[type=checkbox]{-webkit-appearance:none;appearance:none;background-color:#fff;margin:0;display:none}.bcm-checkbox__input{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap;padding-top:4px}.bcm-checkbox.hidden{display:none}.bcm-checkbox :hover{cursor:pointer}.bcm-checkbox[disabled] :hover,.bcm-checkbox.disabled :hover{cursor:not-allowed}.bcm-checkbox .slot{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-weight:500;color:var(--bcm-new-ds-color-slate-600)}.bcm-checkbox .slot:not(:empty){margin-left:8px;margin-right:8px}.bcm-checkbox-size-small .slot{font-size:12px;line-height:calc(12px + 8px);margin-top:-2.5px}.bcm-checkbox-size-small .bcm-checkbox__input{min-height:calc(24px - 4px)}.bcm-checkbox-size-small .bcm-checkbox__label-icon{width:14px;height:14px;min-width:14px;font-size:calc(10px - 2px)}.bcm-checkbox-size-medium .slot{font-size:calc(12px + 1px);line-height:calc(12px + 8px);margin-top:-1.5px}.bcm-checkbox-size-medium .bcm-checkbox__input{min-height:calc(32px - 4px)}.bcm-checkbox-size-medium .bcm-checkbox__label-icon{width:16px;height:16px;min-width:16px;font-size:10px}.bcm-checkbox-size-large .slot{font-size:16px;line-height:calc(16px + 8px);margin-top:-1.5px}.bcm-checkbox-size-large .bcm-checkbox__input{min-height:calc(32px - 4px)}.bcm-checkbox-size-large .bcm-checkbox__label-icon{width:18px;height:18px;min-width:18px;font-size:12px}.bcm-checkbox__label{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap}.bcm-checkbox__label-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap;border-width:1px;border-style:solid;border-radius:2px}.bcm-checkbox__label-icon-indeterminate{position:relative}.bcm-checkbox__label-icon-indeterminate:after{content:\"\";display:block;position:absolute;width:70%;height:1.5px;background:var(--bcm-new-ds-color-white)}.bcm-checkbox__label-icon.bcm-radio__icon{width:16px;height:16px;box-sizing:border-box;border-radius:100px}.bcm-checkbox__label-icon.bcm-radio__icon .bcm-radio__icon-inner{width:10px;height:10px;border-radius:100px;background-color:var(--bcm-new-ds-color-white)}.bcm-checkbox .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-default);color:var(--bcm-checkbox-secondary-color-default);border-color:var(--bcm-new-ds-color-slate-300)}.bcm-checkbox .bcm-checkbox__label-icon-checked,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-default);border-color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-default);background-color:var(--bcm-checkbox-secondary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox:hover .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-hover);color:var(--bcm-checkbox-secondary-color-hover);border-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-hover);border-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-hover);background-color:var(--bcm-checkbox-secondary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-focus-visible);color:var(--bcm-checkbox-secondary-color-focus-visible);border-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-focus-visible);border-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-focus-visible);background-color:var(--bcm-checkbox-secondary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:active .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-active);color:var(--bcm-checkbox-secondary-color-active);border-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-active);border-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-active);background-color:var(--bcm-checkbox-secondary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-disabled);color:var(--bcm-checkbox-secondary-color-disabled);border-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-disabled);border-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-disabled);background-color:var(--bcm-checkbox-secondary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[no-margin] .bcm-checkbox__input{margin:0;min-height:0;padding:0}";
 
-var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$8 = (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);
@@ -533,7 +532,7 @@ const BcmCheckbox = class {
     "checked": ["watchChecked"]
   }; }
 };
-__decorate$6([
+__decorate$8([
   IsLoad()
 ], BcmCheckbox.prototype, "el", void 0);
 BcmCheckbox.style = checkboxCss;
@@ -769,8 +768,8 @@ var Wc={},Yc=new Map,Zc=new Map,$c=["abort","abort",Xb,"animationEnd",Yb,"animat
 "seeking","stalled","stalled","suspend","suspend","timeupdate","timeUpdate",$b,"transitionEnd","waiting","waiting"];function ad(a,b){for(var c=0;c<a.length;c+=2){var d=a[c],e=a[c+1],f="on"+(e[0].toUpperCase()+e.slice(1));f={phasedRegistrationNames:{bubbled:f,captured:f+"Capture"},dependencies:[d],eventPriority:b};Zc.set(d,b);Yc.set(d,f);Wc[e]=f;}}
 ad("blur blur cancel cancel click click close close contextmenu contextMenu copy copy cut cut auxclick auxClick dblclick doubleClick dragend dragEnd dragstart dragStart drop drop focus focus input input invalid invalid keydown keyDown keypress keyPress keyup keyUp mousedown mouseDown mouseup mouseUp paste paste pause pause play play pointercancel pointerCancel pointerdown pointerDown pointerup pointerUp ratechange rateChange reset reset seeked seeked submit submit touchcancel touchCancel touchend touchEnd touchstart touchStart volumechange volumeChange".split(" "),0);
 ad("drag drag dragenter dragEnter dragexit dragExit dragleave dragLeave dragover dragOver mousemove mouseMove mouseout mouseOut mouseover mouseOver pointermove pointerMove pointerout pointerOut pointerover pointerOver scroll scroll toggle toggle touchmove touchMove wheel wheel".split(" "),1);ad($c,2);for(var bd="change selectionchange textInput compositionstart compositionend compositionupdate".split(" "),cd=0;cd<bd.length;cd++)Zc.set(bd[cd],0);
-var dd=scheduler.unstable_UserBlockingPriority,ed=scheduler.unstable_runWithPriority,fd=!0;function F$1(a,b){vc(b,a,!1);}function vc(a,b,c){var d=Zc.get(b);switch(void 0===d?2:d){case 0:d=gd.bind(null,b,1,a);break;case 1:d=hd.bind(null,b,1,a);break;default:d=id.bind(null,b,1,a);}c?a.addEventListener(b,d,!0):a.addEventListener(b,d,!1);}function gd(a,b,c,d){Ja||Ha();var e=id,f=Ja;Ja=!0;try{Ga(e,a,b,c,d);}finally{(Ja=f)||La();}}function hd(a,b,c,d){ed(dd,id.bind(null,a,b,c,d));}
-function id(a,b,c,d){if(fd)if(0<Ac.length&&-1<Hc.indexOf(a))a=Kc(null,a,b,c,d),Ac.push(a);else {var e=Rc(a,b,c,d);if(null===e)Lc(a,d);else if(-1<Hc.indexOf(a))a=Kc(e,a,b,c,d),Ac.push(a);else if(!Oc(e,a,b,c,d)){Lc(a,d);a=rc(a,d,null,b);try{Ma(sc,a);}finally{qc(a);}}}}
+var dd=scheduler.unstable_UserBlockingPriority,ed=scheduler.unstable_runWithPriority,fd=!0;function F$1(a,b){vc(b,a,!1);}function vc(a,b,c){var d=Zc.get(b);switch(void 0===d?2:d){case 0:d=gd.bind(null,b,1,a);break;case 1:d=hd.bind(null,b,1,a);break;default:d=id$1.bind(null,b,1,a);}c?a.addEventListener(b,d,!0):a.addEventListener(b,d,!1);}function gd(a,b,c,d){Ja||Ha();var e=id$1,f=Ja;Ja=!0;try{Ga(e,a,b,c,d);}finally{(Ja=f)||La();}}function hd(a,b,c,d){ed(dd,id$1.bind(null,a,b,c,d));}
+function id$1(a,b,c,d){if(fd)if(0<Ac.length&&-1<Hc.indexOf(a))a=Kc(null,a,b,c,d),Ac.push(a);else {var e=Rc(a,b,c,d);if(null===e)Lc(a,d);else if(-1<Hc.indexOf(a))a=Kc(e,a,b,c,d),Ac.push(a);else if(!Oc(e,a,b,c,d)){Lc(a,d);a=rc(a,d,null,b);try{Ma(sc,a);}finally{qc(a);}}}}
 function Rc(a,b,c,d){c=nc(d);c=tc(c);if(null!==c){var e=dc(c);if(null===e)c=null;else {var f=e.tag;if(13===f){c=ec(e);if(null!==c)return c;c=null;}else if(3===f){if(e.stateNode.hydrate)return 3===e.tag?e.stateNode.containerInfo:null;c=null;}else e!==c&&(c=null);}}a=rc(a,d,c,b);try{Ma(sc,a);}finally{qc(a);}return null}
 var jd={animationIterationCount:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridArea:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,
 floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},kd=["Webkit","ms","Moz","O"];Object.keys(jd).forEach(function(a){kd.forEach(function(b){b=b+a.charAt(0).toUpperCase()+a.substring(1);jd[b]=jd[a];});});function ld(a,b,c){return null==b||"boolean"===typeof b||""===b?"":c||"number"!==typeof b||0===b||jd.hasOwnProperty(a)&&jd[a]?(""+b).trim():b+"px"}
@@ -988,7 +987,7 @@ function gk(a){return !(!a||1!==a.nodeType&&9!==a.nodeType&&11!==a.nodeType&&(8!
 function ik(a,b,c,d,e){var f=c._reactRootContainer;if(f){var g=f._internalRoot;if("function"===typeof e){var h=e;e=function(){var a=ck(g);h.call(a);};}bk(b,g,a,e);}else {f=c._reactRootContainer=hk(c,d);g=f._internalRoot;if("function"===typeof e){var k=e;e=function(){var a=ck(g);k.call(a);};}Nj(function(){bk(b,g,a,e);});}return ck(g)}function jk(a,b,c){var d=3<arguments.length&&void 0!==arguments[3]?arguments[3]:null;return {$$typeof:$a,key:null==d?null:""+d,children:a,containerInfo:b,implementation:c}}
 wc=function(a){if(13===a.tag){var b=hg(Gg(),150,100);Ig(a,b);ek(a,b);}};xc=function(a){13===a.tag&&(Ig(a,3),ek(a,3));};yc=function(a){if(13===a.tag){var b=Gg();b=Hg(b,a,null);Ig(a,b);ek(a,b);}};
 za=function(a,b,c){switch(b){case "input":Cb(a,c);b=c.name;if("radio"===c.type&&null!=b){for(c=a;c.parentNode;)c=c.parentNode;c=c.querySelectorAll("input[name="+JSON.stringify(""+b)+'][type="radio"]');for(b=0;b<c.length;b++){var d=c[b];if(d!==a&&d.form===a.form){var e=Qd(d);if(!e)throw Error(u$1(90));yb(d);Cb(d,e);}}}break;case "textarea":Kb(a,c);break;case "select":b=c.value,null!=b&&Hb(a,!!c.multiple,b,!1);}};Fa=Mj;
-Ga=function(a,b,c,d,e){var f=W$1;W$1|=4;try{return cg(98,a.bind(null,b,c,d,e))}finally{W$1=f,W$1===V$1&&gg();}};Ha=function(){(W$1&(1|fj|gj))===V$1&&(Lj(),Dj());};Ia=function(a,b){var c=W$1;W$1|=2;try{return a(b)}finally{W$1=c,W$1===V$1&&gg();}};function kk(a,b){var c=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;if(!gk(b))throw Error(u$1(200));return jk(a,b,null,c)}var lk={Events:[Nc,Pd,Qd,xa,ta,Xd,function(a){jc(a,Wd);},Da,Ea,id,mc,Dj,{current:!1}]};
+Ga=function(a,b,c,d,e){var f=W$1;W$1|=4;try{return cg(98,a.bind(null,b,c,d,e))}finally{W$1=f,W$1===V$1&&gg();}};Ha=function(){(W$1&(1|fj|gj))===V$1&&(Lj(),Dj());};Ia=function(a,b){var c=W$1;W$1|=2;try{return a(b)}finally{W$1=c,W$1===V$1&&gg();}};function kk(a,b){var c=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;if(!gk(b))throw Error(u$1(200));return jk(a,b,null,c)}var lk={Events:[Nc,Pd,Qd,xa,ta,Xd,function(a){jc(a,Wd);},Da,Ea,id$1,mc,Dj,{current:!1}]};
 (function(a){var b=a.findFiberByHostInstance;return Yj(objectAssign({},a,{overrideHookState:null,overrideProps:null,setSuspenseHandler:null,scheduleUpdate:null,currentDispatcherRef:Wa.ReactCurrentDispatcher,findHostInstanceByFiber:function(a){a=hc(a);return null===a?null:a.stateNode},findFiberByHostInstance:function(a){return b?b(a):null},findHostInstancesForRefresh:null,scheduleRefresh:null,scheduleRoot:null,setRefreshHandler:null,getCurrentFiber:null}))})({findFiberByHostInstance:tc,bundleType:0,version:"16.14.0",
 rendererPackageName:"react-dom"});var __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=lk;var createPortal=kk;var findDOMNode$1=function(a){if(null==a)return null;if(1===a.nodeType)return a;var b=a._reactInternalFiber;if(void 0===b){if("function"===typeof a.render)throw Error(u$1(188));throw Error(u$1(268,Object.keys(a)));}a=hc(b);a=null===a?null:a.stateNode;return a};
 var flushSync=function(a,b){if((W$1&(fj|gj))!==V$1)throw Error(u$1(187));var c=W$1;W$1|=1;try{return cg(99,a.bind(null,b))}finally{W$1=c,gg();}};var hydrate=function(a,b,c){if(!gk(b))throw Error(u$1(200));return ik(null,a,b,!0,c)};var render=function(a,b,c){if(!gk(b))throw Error(u$1(200));return ik(null,a,b,!1,c)};
@@ -23042,7 +23041,7 @@ const moment$1 = /*#__PURE__*/Object.freeze({
   'default': hooks
 });
 
-var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$7 = (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);
@@ -23190,10 +23189,1598 @@ const BcmDate = class {
   }
   get el() { return getElement(this); }
 };
-__decorate$5([
+__decorate$7([
   IsLoad()
 ], BcmDate.prototype, "el", void 0);
 
+const datePickerCss = "@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:inline-flex;width:100%;max-width:256px}:host(.full-width){max-width:100%}:host(.hidden){display:none}:host(.linked-component){display:none}";
+
+var __decorate$6 = (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 BcmDatePicker = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this._id = Generate.UID();
+    this.date = new Date();
+    this.value = undefined;
+    this.endDate = null;
+    this.range = false;
+    this.hidden = false;
+    this.name = undefined;
+    this.fullWidth = false;
+    this.required = false;
+    this.label = undefined;
+    this.placeholder = undefined;
+    this.disabledDates = '';
+    this.disabled = false;
+    this.noMargin = false;
+    this.noCaption = false;
+    this.caption = '';
+    this.captionError = undefined;
+    this.captionType = 'default';
+    this.alignment = undefined;
+    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
+    this.placement = Bcm.Placement['bottom-start'];
+    this.linkedComponent = undefined;
+    this.clearable = false;
+    this.stateStartDate = null;
+    this.stateEndDate = null;
+  }
+  handleStartDateChange() {
+    this.handleDate();
+  }
+  handleEndDateChange() {
+    this.handleDate();
+  }
+  /**
+   * @desc
+   */
+  handlePickerLoad() {
+    this.value = this.picker.value;
+  }
+  /**
+   * @desc
+   * @param event
+   */
+  handlePickerChange(event) {
+    this.value = event.detail;
+  }
+  /**
+   * @desc
+   * @param value
+   */
+  async set(value) {
+    return this.picker.set(value);
+  }
+  async get() {
+    var _a;
+    return ((_a = this.value) === null || _a === void 0 ? void 0 : _a.timestamp) || null;
+  }
+  /**
+   * @desc
+   * @param disabled
+   */
+  async setDisabled(disabled) {
+    this.disabled = disabled;
+  }
+  async setClear() {
+    await this.picker.setClear();
+    await delay(10);
+    return Promise.resolve();
+  }
+  async setStartDate(dateOrTime) {
+    if (dateOrTime) {
+      dateOrTime = DateTimeHelper.convertTimeStampToDate(new Date(dateOrTime).getTime());
+      this.stateStartDate = dateOrTime;
+    }
+    else {
+      this.setClear();
+    }
+  }
+  async setEndDate(dateOrTime) {
+    if (dateOrTime) {
+      dateOrTime = DateTimeHelper.convertTimeStampToDate(new Date(dateOrTime).getTime());
+      this.stateEndDate = dateOrTime;
+    }
+    else {
+      this.setClear();
+    }
+  }
+  /* mp --- */
+  handleDate() {
+    if (this.range) {
+      if (this.stateStartDate && this.stateEndDate) {
+        this.set(this.stateStartDate + '-' + this.stateEndDate);
+      }
+    }
+    else {
+      this.set(this.stateStartDate);
+    }
+  }
+  /**
+   * @desc
+   */
+  async getInput() {
+    return await this.picker.getInput();
+  }
+  /**
+   * @desc
+   */
+  async open() {
+    return await this.picker.open();
+  }
+  /**
+   * @desc
+   */
+  async getValue() {
+    return this.value;
+  }
+  /**
+   * @desc
+   */
+  async isValid() {
+    return await this.picker.isValid();
+  }
+  async resetCaption() {
+    await delay(10);
+    await this.picker.resetCaption();
+    this.captionType = 'default';
+    this.captionError = null;
+    await delay(10);
+    return Promise.resolve();
+  }
+  render() {
+    const hostClasses = classnames(this.hidden ? 'hidden' : null, {
+      'full-width': this.fullWidth,
+      'linked-component': this.linkedComponent,
+    });
+    return (h$2(Host, { class: hostClasses }, h$2("bcm-datetime-picker", { "linked-component": this.linkedComponent, id: this._id, name: this.name, type: this.range ? 'range' : 'date', date: this.date, placeholder: this.placeholder, fullWidth: this.fullWidth, ref: el => (this.picker = el), required: this.required, clearable: this.clearable, label: this.label, "end-date": this.endDate, disabled: this.disabled, disabledDates: this.disabledDates, "on-bcm-load": () => this.handlePickerLoad(), "on-bcm-change": (e) => this.handlePickerChange(e), noCaption: this.noCaption, caption: this.caption, captionError: this.captionError, captionType: this.captionType, alignment: this.alignment, placement: this.placement, noMargin: this.noMargin })));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "stateStartDate": ["handleStartDateChange"],
+    "stateEndDate": ["handleEndDateChange"]
+  }; }
+};
+__decorate$6([
+  IsLoad()
+], BcmDatePicker.prototype, "el", void 0);
+BcmDatePicker.style = datePickerCss;
+
+var Months;
+(function (Months) {
+  Months["january"] = "january";
+  Months["february"] = "february";
+  Months["march"] = "march";
+  Months["april"] = "april";
+  Months["may"] = "may";
+  Months["june"] = "june";
+  Months["july"] = "july";
+  Months["august"] = "august";
+  Months["september"] = "september";
+  Months["october"] = "october";
+  Months["november"] = "november";
+  Months["december"] = "december";
+})(Months || (Months = {}));
+var Days;
+(function (Days) {
+  Days["sunday"] = "sunday";
+  Days["monday"] = "monday";
+  Days["tuesday"] = "tuesday";
+  Days["wednesday"] = "wednesday";
+  Days["thursday"] = "thursday";
+  Days["friday"] = "friday";
+  Days["saturday"] = "saturday";
+})(Days || (Days = {}));
+/**
+ * 'type' prop predefined values
+ */
+var Types;
+(function (Types) {
+  Types["datetime"] = "datetime";
+  Types["range"] = "range";
+  Types["date"] = "date";
+  Types["time"] = "time";
+})(Types || (Types = {}));
+
+const datetimePickerCss = "@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}:host{display:inline-flex;flex-direction:column;position:relative;width:100%;max-width:256px;margin:0;margin-bottom:8px}:host(.full-width){max-width:100%}:host(.no-margin){margin:0}:host(.hidden){display:none}:host(.linked-component){display:none}.toggle{cursor:pointer}.toggle.disabled{cursor:not-allowed}.modules{display:flex}.picker-label{user-select:none;line-height:1}.datetime-picker{position:absolute;top:-1000px;display:inline-flex;flex-direction:column;box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);opacity:0;visibility:hidden;transition:transform 0.2s ease, opacity 0.3s ease;transform:scale(0.8) translateY(-100px);background-color:#ffffff;min-height:356px;max-height:356px;box-sizing:border-box;z-index:-1000}.datetime-picker.alignment-left{left:0}.datetime-picker.alignment-right{right:0}.datetime-picker.open{top:calc(100% - 28px);z-index:10000;opacity:1;visibility:visible;transform:scale(1) translateY(0)}.datetime-picker.open.no-caption{top:100%}.actions{display:flex;align-items:center;justify-content:space-between;padding:8px;margin-top:auto;border-top:1px solid var(--bcm-color-grey-6)}.actions .current-date{font-size:14px;line-height:22px;color:var(--bcm-color-prime-blue-6);text-transform:capitalize}.date-container+.time-container{border-left:1px solid #cecece}.time-container{width:185px}.time-container .bcm-datetime-picker__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;max-height:60px;border-bottom:1px solid var(--bcm-color-grey-4)}.time-container .bcm-datetime-picker__header .now{font-size:14px;line-height:22px;cursor:pointer;color:var(--bcm-color-prime-blue-6);user-select:none}.time-container .bcm-datetime-picker__content{position:relative;display:flex}.time-container .hours,.time-container .minutes,.time-container .time-period{position:relative;flex:1 1 100%;max-width:100%;height:280px;overflow:hidden}.time-container .hours .items>span,.time-container .minutes .items>span,.time-container .time-period .items>span{font-size:14px;color:var(--bcm-color-grey-8)}.time-container .hours .items>span.selected,.time-container .minutes .items>span.selected,.time-container .time-period .items>span.selected{color:var(--bcm-color-prime-blue-6)}.date-container{width:364px;}.date-container .bcm-datetime-picker__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;max-height:60px;border-bottom:1px solid var(--bcm-color-grey-4)}.date-container .bcm-datetime-picker__header .month-year-wrapper{display:flex;align-items:center;justify-content:center;margin:0 4px;min-width:125px}.date-container .bcm-datetime-picker__header .month-year{font-size:16px;line-height:24px}.date-container .bcm-datetime-picker__header .month-year{display:flex;align-items:center}.date-container .bcm-datetime-picker__header .month-year button{display:flex;align-items:center;box-shadow:none;background:transparent;outline:none;appearance:none;border:none;color:var(--bcm-color-prime-blue-6);cursor:pointer}.date-container .bcm-datetime-picker__header .month{text-transform:capitalize}.date-container .bcm-datetime-picker__header .year{padding-left:4px}.date-container .bcm-datetime-picker__header .today{font-size:14px;line-height:22px;cursor:pointer;color:var(--bcm-color-prime-blue-6);user-select:none}.date-container .bcm-datetime-picker__content{display:flex}.date-container .years{position:relative;flex:0 0 70px;max-width:70px;height:280px;overflow:hidden;background-color:var(--bcm-color-grey-2)}.date-container .days{width:100%}.date-container .day-numbers,.date-container .day-labels{display:grid;grid-template-columns:repeat(7, 1fr)}.date-container .day-numbers{padding:24px 24px}.date-container .day-numbers>span,.date-container .day-labels span{text-align:center}.date-container .day-numbers>span{position:relative;padding-bottom:100%;cursor:pointer}.date-container .day-numbers>span.not-this-month{color:var(--bcm-color-grey-4)}.date-container .day-numbers>span.is-weekend{color:var(--bcm-color-prime-blue-3)}.date-container .day-numbers>span.is-disabled-date:not(.today){color:var(--bcm-color-grey-4);cursor:not-allowed}.date-container .day-numbers>span.is-disabled-date:not(.today):before{opacity:0 !important}.date-container .day-numbers>span.today{color:var(--bcm-color-prime-blue-6)}.date-container .day-numbers>span.today:before{opacity:1;background-color:var(--bcm-color-prime-blue-2);border:1px solid var(--bcm-color-prime-blue-6)}.date-container .day-numbers>span.selected-start{background:linear-gradient(90deg, white 50%, #8abde2 50%) !important}.date-container .day-numbers>span.selected-end{background:linear-gradient(90deg, #8abde2 50%, white 50%) !important}.date-container .day-numbers>span.range{background:#8abde2}.date-container .day-numbers>span.range:not(.today){color:#ffffff}.date-container .day-numbers>span.range:not(.today):before{background-color:var(--bcm-color-prime-blue-6)}.date-container .day-numbers>span.range.is-weekend:not(.today){color:var(--bcm-color-prime-blue-2)}.date-container .day-numbers>span.selected,.date-container .day-numbers>span.selected-end{color:#ffffff}.date-container .day-numbers>span.selected:before,.date-container .day-numbers>span.selected-end:before{opacity:1;background-color:var(--bcm-color-prime-blue-6)}.date-container .day-numbers.start-1>span:first-child{grid-column:1}.date-container .day-numbers.start-2>span:first-child{grid-column:2}.date-container .day-numbers.start-3>span:first-child{grid-column:3}.date-container .day-numbers.start-4>span:first-child{grid-column:4}.date-container .day-numbers.start-5>span:first-child{grid-column:5}.date-container .day-numbers.start-6>span:first-child{grid-column:6}.date-container .day-numbers.start-7>span:first-child{grid-column:7}.date-container .day-numbers>span:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background-color:var(--bcm-color-grey-4);opacity:0;box-sizing:border-box}.date-container .day-numbers>span:hover.not-this-month:not(.is-weekend){color:var(--bcm-color-grey-6)}.date-container .day-numbers>span:hover:before{opacity:1}.date-container .day-numbers .number{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.date-container .day-labels{padding:24px 40px 0 40px}.date-container .day-labels span{font-size:12px;color:var(--bcm-color-grey-6)}.date-container .day-labels span:nth-child(7n+6),.date-container .day-labels span:nth-child(7n+7){color:var(--bcm-color-prime-blue-3)}.years .items,.hours .items,.minutes .items,.time-period .items{position:relative;display:flex;flex-direction:column;z-index:0;transform:translateY(0);scroll-behavior:smooth}.years .items>span,.hours .items>span,.minutes .items>span,.time-period .items>span{text-align:center;font-size:12px;min-height:26px;max-height:26px;line-height:26px;color:var(--bcm-color-grey-8);user-select:none}.years:before,.years:after,.hours:before,.hours:after,.minutes:before,.minutes:after,.time-period:before,.time-period:after{content:\"\";position:absolute;left:0;width:100%;height:40px}.years:before,.hours:before,.minutes:before,.time-period:before{top:-40px;box-shadow:0 10px 100px 70px #ffffff;z-index:1}.years:after,.hours:after,.minutes:after,.time-period:after{bottom:-40px;box-shadow:0 -10px 100px 70px #ffffff;z-index:2}.select-strip{position:absolute;width:100%;top:50%;left:0;transform:translateY(-50%);min-height:26px;max-height:26px;border:1px solid var(--bcm-color-grey-5);border-left:0;border-right:0;pointer-events:none;box-sizing:border-box}.bcm-label{font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-bottom:4px;font-weight:500;color:#475569}.bcm-label.tw-text-1{font-size:10px;line-height:18px}.bcm-label.tw-text-2{font-size:12px;line-height:20px}.bcm-label.tw-text-3{font-size:14px;line-height:22px}.bcm-caption-area{color:#dc2626;font-weight:400;justify-content:space-between;align-items:flex-start;flex-direction:row;min-height:20px;display:flex;margin-top:4px;font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.bcm-caption-area.tw-text-1{font-size:10px;line-height:18px}.bcm-caption-area.tw-text-2{font-size:12px;line-height:20px}.bcm-caption-area.tw-text-3{font-size:14px;line-height:22px}.picker-input-container{display:flex;flex-direction:column;align-items:flex-start;justify-content:stretch}";
+
+var __decorate$5 = (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 stringify = JSON.stringify;
+const BcmDatetimePicker = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.load = createEvent(this, "bcm-load", 7);
+    this.change = createEvent(this, "bcm-change", 7);
+    this.bcmOpen = createEvent(this, "bcm-open", 7);
+    this.inputId = null;
+    this.emptyState = false;
+    this.initialized = false;
+    this.disabledDatesList = { min: null, max: null, dates: [] };
+    this.dayNumbers = [];
+    this.valueText = null;
+    this.dataIsValid = false;
+    this._id = Generate.UID();
+    this.date = new Date();
+    this.endDate = null;
+    this.type = Types.datetime;
+    this.disabled = false;
+    this.disabledDates = '';
+    this.value = null;
+    this._open = false;
+    this.hidden = false;
+    this.name = undefined;
+    this.fullWidth = false;
+    this.required = false;
+    this.label = undefined;
+    this.placeholder = undefined;
+    this.minYear = 1900;
+    this.maxYear = 2200;
+    this.noCaption = false;
+    this.noMargin = false;
+    this.captionError = undefined;
+    this.caption = '';
+    this.captionType = 'default';
+    this.alignment = undefined;
+    this.placement = Bcm.Placement['bottom-start'];
+    this.linkedComponent = undefined;
+    this.clearable = false;
+    this.years = [];
+    this.hours = [];
+    this.minutes = [];
+    this.hasDateModule = false;
+    this.hasTimeModule = false;
+    this.renderDate = undefined;
+    this.selectedDate = undefined;
+    this.selectedEndDate = undefined;
+    this.error = false;
+    this.errorText = '';
+    this.tick = {};
+  }
+  markForCheck() {
+    this.tick = Generate.UID();
+  }
+  openChanged() {
+    this.bcmOpen.emit(this._open);
+  }
+  /**
+   * @ComponentMethod
+   */
+  componentWillLoad() {
+    this.inputId = 'picker-input-' + this._id;
+    this.hasDateModule = this.type === Types.datetime
+      || this.type === Types.date
+      || this.type === Types.range;
+    this.hasTimeModule = this.type === Types.datetime
+      || this.type === Types.time;
+    this.prepareDisabledDates();
+    this.setData();
+    // Generate year, hour, minute sequences
+    // #
+    if (!this.initialized) {
+      for (let i = this.minYear; i <= this.maxYear; i++)
+        this.years.push(i);
+      for (let i = 0; i <= 23; i++)
+        this.hours.push(i);
+      for (let i = 0; i <= 59; i++)
+        this.minutes.push(i);
+      this.load.emit();
+    }
+    this.initialized = true;
+  }
+  /**
+   * @ComponentMethod
+   */
+  componentDidRender() {
+    // Create years selection
+    // #
+    if (this.hasDateModule && !this.yearsDragger) {
+      this.createDragSelection('years', this.yearsElement, this.yearsWrapperElement, this.yearsStripElement, DragDirections.y);
+      this.createWheelChange('years', this.yearsWrapperElement, this.yearsStripElement);
+      this.setDragSelection('years', this.currentDate.year);
+    }
+    // Create hours selection
+    // #
+    if (this.hasTimeModule && !this.hoursDragger) {
+      this.createDragSelection('hours', this.hoursElement, this.hoursWrapperElement, this.timeStripElement, DragDirections.y);
+      this.createWheelChange('hours', this.hoursWrapperElement, this.timeStripElement);
+      this.setDragSelection('hours', this.currentDate.hour);
+    }
+    // Create minutes selection
+    // #
+    if (this.hasTimeModule && !this.minutesDragger) {
+      this.createDragSelection('minutes', this.minutesElement, this.minutesWrapperElement, this.timeStripElement, DragDirections.y);
+      this.createWheelChange('minutes', this.minutesWrapperElement, this.timeStripElement);
+      this.setDragSelection('minutes', this.currentDate.minute);
+    }
+  }
+  /**
+   * @desc
+   * @param newValue
+   */
+  renderDateChange() {
+    if (!this.initialized)
+      return;
+    this.setData();
+    this.hasDateModule && this.setDragSelection('years', this.currentDate.year);
+  }
+  /**
+   * @desc
+   * @param newValue
+   */
+  openChange(newValue) {
+    if (newValue) {
+      this.calculateLocation();
+      // Create years selection
+      // #
+      if (this.hasDateModule) {
+        this.createDragSelection('years', this.yearsElement, this.yearsWrapperElement, this.yearsStripElement, DragDirections.y);
+        this.createWheelChange('years', this.yearsWrapperElement, this.yearsStripElement);
+        this.setDragSelection('years', this.currentDate.year);
+      }
+      // Create hours selection
+      // #
+      if (this.hasTimeModule) {
+        this.createDragSelection('hours', this.hoursElement, this.hoursWrapperElement, this.timeStripElement, DragDirections.y);
+        this.createWheelChange('hours', this.hoursWrapperElement, this.timeStripElement);
+        this.setDragSelection('hours', this.currentDate.hour, true);
+      }
+      // Create minutes selection
+      // #
+      if (this.hasTimeModule) {
+        this.createDragSelection('minutes', this.minutesElement, this.minutesWrapperElement, this.timeStripElement, DragDirections.y);
+        this.createWheelChange('minutes', this.minutesWrapperElement, this.timeStripElement);
+        this.setDragSelection('minutes', this.currentDate.minute, true);
+      }
+      this.markForCheck();
+      forceUpdate(this.el);
+    }
+  }
+  /**
+   * @desc
+   * @param newValue
+   */
+  valueChange(newValue, oldValue) {
+    const errorObject1 = { isValid: false, value: this.valueText };
+    const errorObject2 = { isValid: false, value: this.inputElement.value };
+    if (!newValue) {
+      this.change.emit();
+      return;
+    }
+    if (this.type !== Types.range && this.error) {
+      this.change.emit(errorObject2);
+      return;
+    }
+    try {
+      if ((oldValue && stringify(newValue.dateObject) !== stringify(oldValue.dateObject)) || (!oldValue && newValue)) {
+        if (this.type === Types.date || this.type === Types.datetime) {
+          this.change.emit(newValue);
+        }
+        if (this.type === Types.time) {
+          this.change.emit(newValue);
+          // this.change.emit({
+          //     time: newValue.time,
+          //     timeObject: newValue.dateObject
+          // })
+        }
+        if (this.type === Types.range) {
+          const dateObject = newValue.dateObject;
+          if (dateObject.start.date && dateObject.end.date) {
+            if (newValue.isValid) {
+              this.change.emit({
+                isValid: newValue.isValid,
+                value: newValue.value,
+                start: dateObject.start,
+                end: dateObject.end
+              });
+            }
+          }
+          else {
+            this.change.emit(errorObject1);
+          }
+        }
+      }
+    }
+    catch (exception) { }
+  }
+  /**
+   * @desc
+   * @param newValue -
+   */
+  disabledDatesChange(newValue) {
+    if (newValue) {
+      this.prepareDisabledDates();
+    }
+  }
+  /**
+   * @desc
+   * @param date
+   */
+  stringToDate(date) {
+    const isDate = !!date.getMonth;
+    if (!isDate) {
+      return new Date(Date.parse(this.switchDDMM(date)));
+    }
+    return date;
+  }
+  /**
+   * @desc
+   * @param date
+   */
+  dateToString(date) {
+    if (!(date instanceof Date))
+      return false;
+  }
+  /**
+  *
+  * @param str
+  */
+  switchDDMM(str) {
+    if (!str)
+      return;
+    const parts = str.split('/');
+    if (str.indexOf('/') === -1 || parts.length !== 3)
+      return str;
+    return `${parts[1]}/${parts[0]}/${parts[2]}`;
+  }
+  /**
+  * @desc
+  */
+  setData() {
+    this.date = this.stringToDate(this.date);
+    if (!this.initialized && !this.renderDate) {
+      this.renderDate = this.date && this.date || new Date();
+    }
+    if (!this.initialized && this.endDate) {
+      this.selectedEndDate = this.stringToDate(this.endDate);
+      //this.currentEndDate = this.createDateObject(this.selectedEndDate)
+    }
+    const date = this.renderDate;
+    this.currentDate = this.createDateObject(date);
+    // Calculate days in current
+    // month
+    this.dayNumbers = this.getMonthDayNumbers(date).map(day => {
+      return {
+        day,
+        thisMonth: true,
+        isWeekend: this.getDayIsWeekend(date, day),
+        today: this.getIsCurrentDate(date, day),
+        date: this.getTargetDayDate(date, day)
+      };
+    });
+    // Add prev month days to
+    // empty columns
+    if (this.currentDate.year > this.minYear) {
+      let targetMonth = new Date(new Date(date).setMonth(this.currentDate.month - 1, 1));
+      let targetMonthDayNumbers = this.getMonthDayNumbers(targetMonth).reverse();
+      let max = this.currentDate.monthFirstDay;
+      for (let i = 1; i < (max === 0 ? 7 : max); i++) {
+        const day = targetMonthDayNumbers[i - 1];
+        this.dayNumbers.unshift({
+          day,
+          prevMonth: true,
+          isWeekend: this.getDayIsWeekend(targetMonth, day),
+          date: this.getTargetDayDate(targetMonth, day)
+        });
+      }
+    }
+    // Add next month days to
+    // rest of columns
+    if (this.currentDate.year < this.maxYear) {
+      let targetMonth = new Date(new Date(date).setMonth(this.currentDate.month + 1));
+      let targetMonthDayNumbers = this.getMonthDayNumbers(targetMonth);
+      let max = 42 - this.dayNumbers.length;
+      for (let i = 0; i < max; i++) {
+        const day = targetMonthDayNumbers[i];
+        this.dayNumbers.push({
+          day,
+          nextMonth: true,
+          isWeekend: this.getDayIsWeekend(targetMonth, day),
+          date: this.getTargetDayDate(targetMonth, day)
+        });
+      }
+    }
+    if (!this.emptyState) {
+      this.valueText = this.getValueText();
+    }
+    forceUpdate(this.el);
+  }
+  /**
+   * @desc
+   */
+  prepareDisabledDates() {
+    if (!this.disabledDates)
+      return;
+    let disabledDatesData = null;
+    if (typeof this.disabledDates === 'string') {
+      try {
+        disabledDatesData = JSON.parse(this.disabledDates);
+      }
+      catch (e) {
+        return;
+      }
+    }
+    else
+      disabledDatesData = this.disabledDates;
+    // Convert dates to list
+    // #
+    if (disabledDatesData.dates && disabledDatesData.dates.length && !!disabledDatesData.dates.length) {
+      const disabledDates = disabledDatesData.dates.map(date => {
+        const tempDate = new Date(date);
+        if (tempDate.toString().toLowerCase() === 'invalid date')
+          return null;
+        else
+          return tempDate;
+      }).filter(date => date);
+      this.disabledDatesList.dates = disabledDates;
+    }
+    // Get min & max range
+    // #
+    if (disabledDatesData.min &&
+      disabledDatesData.max && (disabledDatesData.min.getTime() > disabledDatesData.max.getTime() ||
+      disabledDatesData.max.getTime() < disabledDatesData.min.getTime())) {
+      return;
+    }
+    if (disabledDatesData.min && disabledDatesData.min instanceof Date) {
+      this.disabledDatesList.min = new Date(disabledDatesData.min.toDateString());
+    }
+    else {
+      delete this.disabledDatesList.min;
+    }
+    if (disabledDatesData.max && disabledDatesData.max instanceof Date) {
+      this.disabledDatesList.max = new Date(disabledDatesData.max.toDateString());
+    }
+    else {
+      delete this.disabledDatesList.max;
+    }
+    const value = this.inputElement && this.inputElement.value;
+    value && this.setDataFromText(value);
+  }
+  /**
+   *
+   * @param target
+   * @param wheelTriggerElement
+   * @param strip
+   */
+  createWheelChange(target, wheelTriggerElement, strip) {
+    /**
+     * [ Mouse Event: wheel ]
+     */
+    wheelTriggerElement.addEventListener('wheel', (event) => {
+      const moveDown = event.deltaY > 0;
+      const dragger = this[target + 'Dragger'];
+      const draggerOffsetY = dragger.getOffset().top;
+      const childIdx = this.getTargetChildByDragPosition({ y: draggerOffsetY }, strip);
+      let nextChild = moveDown ? childIdx + 1 : childIdx - 1;
+      // Array bounds check
+      // #
+      nextChild < 0
+        ? (nextChild = 0) : typeof this[target][nextChild] === 'undefined'
+        ? (nextChild = this[target].length - 1) : nextChild;
+      if (this.type == "time" && !this.selectedDate) {
+        this.setTime();
+      }
+      this.setDragSelection(target, this[target][nextChild], true, true);
+    });
+  }
+  /**
+   * @desc
+   */
+  createDragSelection(target, element, dragTriggerElement, strip, direction) {
+    const dragger = target + 'Dragger';
+    this[dragger] = new ElementDragger({
+      target: element,
+      trigger: dragTriggerElement,
+      direction: direction,
+      useTransform: true,
+      limit: {
+        y: {
+          max: strip.offsetTop - (strip.offsetHeight / 2),
+          min: (element.offsetHeight - (strip.offsetTop + strip.offsetHeight / 2)) * -1
+        }
+      }
+    });
+    /**
+     * [ ElementDragger Event: end ]
+     */
+    this[dragger].on('end', (pos) => {
+      const childIdx = this.getTargetChildByDragPosition(pos, strip);
+      // Select target child when dragging
+      // end
+      this.selectTargetChildByDragIdx(childIdx, strip, this[dragger]);
+      // Set target value
+      // #
+      this.setDragSelection(target, this[target][childIdx], false);
+    });
+  }
+  /**
+   * @desc Calculates which child in center of strip
+   * for drag areas
+   */
+  getTargetChildByDragPosition({ y }, strip) {
+    const stripHeight = strip.offsetHeight;
+    const stripCenter = stripHeight / 2;
+    const stripTriggerY = strip.offsetTop - (stripCenter);
+    const childY = -(y - stripTriggerY - (stripCenter));
+    return Math.floor(childY / stripHeight);
+  }
+  /**
+   * @esc
+   * @param target
+   * @param childIdx
+   */
+  selectTargetChildByDragIdx(childIdx, strip, dragger, anim = true) {
+    const y = ((strip.offsetHeight / 2) + strip.offsetTop) - ((childIdx + 1) * (strip.offsetHeight));
+    dragger.setPosition({ y, anim });
+  }
+  /**
+   * @desc
+   * @param year
+   */
+  setDragSelection(target, value, scroll = true, anim = false) {
+    // if (!value) return
+    const childIdx = this[target].findIndex((itemValue) => itemValue === value);
+    scroll && this.selectTargetChildByDragIdx(childIdx, this[target === 'years' ? target + 'StripElement' : 'timeStripElement'], this[target + 'Dragger'], anim);
+    switch (target) {
+      case 'years':
+        this.date.setFullYear(value);
+        break;
+      case 'hours':
+        this.date.setHours(value);
+        break;
+      case 'minutes':
+        this.date.setMinutes(value);
+        break;
+    }
+    this.renderDate = this.date;
+    this.setData();
+    if (this.selectedDate) {
+      this.setValue();
+    }
+  }
+  /**
+   * @desc
+   * @returns
+   */
+  getHours12() {
+    const hours = (this.date.getHours() + 24) % 12 || 12;
+    return hours > 12 ? hours - 12 : hours;
+  }
+  /**
+   * @desc
+   * @param date
+   * @param excludeTime -
+   */
+  createDateObject(date, { excludeTime = false, exactMonthNumber = false } = {}) {
+    const dateYear = date.getFullYear();
+    const year = dateYear >= this.maxYear
+      ? this.maxYear : dateYear <= this.minYear
+      ? this.minYear : dateYear;
+    return Object.assign(Object.assign({ year, day: date.getDate(), month: date.getMonth() + (exactMonthNumber ? 1 : 0), dayOfWeek: date.getDay(), monthFirstDay: new Date(new Date(date).setDate(1)).getDay() }, !excludeTime && { hour: date.getHours() }), !excludeTime && { minute: date.getMinutes() });
+  }
+  /**
+   * @desc
+   * @param max
+   */
+  generateDaysArrayFromMax(max) {
+    return Array.from(Array(max + 1).keys()).slice(1);
+  }
+  /**
+   * @desc
+   * @param date
+   */
+  getMonthDayNumbers(date) {
+    const totalDays = this.getDaysInMonth(date.getMonth(), date.getFullYear());
+    return this.generateDaysArrayFromMax(totalDays);
+  }
+  /**
+   * @desc
+   * @param date
+   * @param day
+   */
+  getTargetDayDate(date, day) {
+    return new Date(new Date(date).setDate(day));
+  }
+  /**
+   * @desc
+   * @param date
+   * @param day
+   */
+  getDayIsWeekend(date, day) {
+    const dayOfWeek = new Date(new Date(date).setDate(day)).getDay();
+    return (dayOfWeek === 6) || (dayOfWeek === 0);
+  }
+  /**
+   * @desc
+   * @param date
+   */
+  getClock(date) {
+    date = date || new Date();
+    const hours = date.getHours();
+    const minutes = date.getMinutes();
+    const seconds = date.getSeconds();
+    const milis = date.getMilliseconds();
+    return { hours, minutes, seconds, milis };
+  }
+  /**
+   * @desc
+   */
+  setValue(reset) {
+    var _a, _b, _c;
+    const date = new Date(this.date.setHours(Number(this.currentDate.hour), Number(this.currentDate.minute)));
+    if (reset) {
+      this.value = null;
+      return;
+    }
+    this.dataIsValid = true;
+    if (this.type === Types.datetime) {
+      const dateObject = Object.assign({}, this.currentDate);
+      dateObject.month += 1;
+      if (((_a = this.value) === null || _a === void 0 ? void 0 : _a.value) != this.valueText) {
+        this.value = {
+          isValid: this.dataIsValid,
+          date: date,
+          timestamp: date.getTime(),
+          dateObject,
+          value: this.valueText
+        };
+      }
+    }
+    if (this.type === Types.date) {
+      const dateObject = Object.assign({}, this.currentDate);
+      delete dateObject.hour;
+      delete dateObject.minute;
+      dateObject.month += 1;
+      if (((_b = this.value) === null || _b === void 0 ? void 0 : _b.value) != this.valueText) {
+        this.value = {
+          isValid: this.dataIsValid,
+          date,
+          timestamp: date.getTime(),
+          dateObject,
+          value: this.valueText
+        };
+      }
+    }
+    if (this.type === Types.time) {
+      const getTimeText = this.getTimeText();
+      const dateObject = Object.assign({}, this.currentDate);
+      dateObject.month += 1;
+      this.value = {
+        isValid: this.dataIsValid,
+        date: date,
+        timestamp: date.getTime(),
+        time: getTimeText,
+        dateObject,
+        timeObject: {
+          hours: this.currentDate.hour,
+          minutes: this.currentDate.minute
+        },
+        value: getTimeText
+      };
+      this.inputElement.value = getTimeText;
+    }
+    if (this.type === Types.range) {
+      if (((_c = this.value) === null || _c === void 0 ? void 0 : _c.value) != this.valueText) {
+        this.value = {
+          isValid: this.dataIsValid,
+          dateObject: {
+            start: Object.assign({}, this.selectedDate && {
+              date: this.selectedDate,
+              timestamp: this.selectedDate.getTime(),
+              detail: this.createDateObject(this.selectedDate, {
+                excludeTime: true,
+                exactMonthNumber: true
+              })
+            }),
+            end: Object.assign({}, this.selectedEndDate && {
+              date: this.selectedEndDate,
+              timestamp: this.selectedEndDate.getTime(),
+              detail: this.createDateObject(this.selectedEndDate, {
+                excludeTime: true,
+                exactMonthNumber: true
+              })
+            })
+          },
+          value: this.valueText
+        };
+      }
+    }
+  }
+  /**
+   * @desc
+   * @param month
+   */
+  setMonth(month) {
+    this.renderDate.setDate(1);
+    this.renderDate = new Date(this.renderDate.setMonth(month));
+    this.setDragSelection('years', this.currentDate.year);
+  }
+  /**
+   * @desc
+   * @param popupClosing -
+   */
+  checkRangeValidation({ popupClosing = false } = {}) {
+    if (this.type !== Types.range)
+      return true;
+    const errorText = 'date range invalid';
+    if (popupClosing && (!this.selectedDate || this.selectedDate && !this.selectedEndDate)) {
+      this.setError(true, errorText);
+      return false;
+    }
+    if (!popupClosing) {
+      this.setError(false);
+      return true;
+    }
+    return true;
+  }
+  /**
+   * @desc
+   * @param value
+   * @param max
+   * @returns
+   */
+  pad(value, max) {
+    return value < max ? '0' : '';
+  }
+  /**
+   * @desc
+   * @returns
+   */
+  isInputClearable() {
+    if (this.inputElement && this.inputElement.value) {
+      return true;
+    }
+    return false;
+  }
+  /**
+   * @desc
+   * @param date
+   */
+  isDisabledDate(date) {
+    if (!!this.disabledDatesList.dates.map(d => this.isSameDate(d, date)).filter(d => d).length)
+      return true;
+    if (this.disabledDatesList.min) {
+      const minDate = new Date(this.disabledDatesList.min);
+      if (minDate && minDate.getTime() > date.getTime())
+        return true;
+    }
+    if (this.disabledDatesList.max) {
+      const maxDate = new Date(this.disabledDatesList.max);
+      if (maxDate && new Date(maxDate.setDate(maxDate.getDate() + 1)).getTime() < date.getTime())
+        return true;
+    }
+  }
+  /**
+  * @desc
+  * @param date
+  */
+  setDate(date, isUserSelect, notClosePicker = false) {
+    const isRange = this.type === Types.range;
+    const isEndSelect = !!this.selectedEndDate;
+    // Check disabled date
+    // #
+    if ((this.type === Types.date || this.type === Types.datetime) && this.isDisabledDate(date)) {
+      return;
+    }
+    this.emptyState = false;
+    if (!isRange || (isRange && !isEndSelect)) {
+      this.date = new Date(date.setHours(this.currentDate.hour, this.currentDate.minute));
+    }
+    isRange && this.checkRangeValidation();
+    if (isRange && this.selectedDate && this.selectedEndDate) {
+      this.selectedDate = null;
+      this.selectedEndDate = null;
+    }
+    if (isUserSelect) {
+      const newDate = new Date(date);
+      !isRange
+        ? this.selectedDate = newDate
+        : !this.selectedDate
+          ? this.selectedDate = newDate
+          : this.selectedDate.getTime() > newDate.getTime()
+            ? (this.selectedEndDate = this.selectedDate) && (this.selectedDate = newDate)
+            : this.selectedEndDate = newDate;
+      !isRange && (this._open = notClosePicker);
+      this.renderDate = this.date;
+      this.valueText = this.getValueText();
+      this.setValue();
+      const splitText = this.valueText.split('/');
+      const newValue = this.valueText ? this.changeFormat(new Date(splitText[1] + "/" + splitText[0] + "/" + splitText[2])) : '';
+      this.inputElement.value = newValue;
+    }
+  }
+  setDataFromText(text, updateData = false, openPicker = true) {
+    let update = false;
+    let errorState = '';
+    const parsed = this.parse(text);
+    if ((this.type === Types.date || this.type === Types.datetime) && this.isDisabledDate(parsed.date)) {
+      parsed.dateIsValid = false;
+      errorState = 'disabled-date';
+    }
+    // Check mode datetime
+    // #
+    if (this.type === Types.datetime && parsed.dateIsValid && parsed.timeIsValid) {
+      updateData && this.setDate(parsed.date, true, openPicker);
+      updateData && this.setTime(parsed.timeSections[0], parsed.timeSections[1]);
+      update = true;
+    }
+    // Check mode date
+    // #
+    if (this.type === Types.date && parsed.dateIsValid) {
+      updateData && this.setDate(parsed.date, true, openPicker);
+      update = true;
+    }
+    // Check mode time
+    // #
+    if (this.type === Types.time && parsed.timeIsValid) {
+      updateData && this.setTime(parsed.timeSections[0], parsed.timeSections[1]);
+      update = true;
+    }
+    // Check mode range
+    // #
+    if (this.type === Types.range) {
+      if (parsed.dateIsValid && !this.selectedDate) {
+        updateData && this.setDate(parsed.date, true, openPicker);
+        update = true;
+      }
+      if (parsed.date2IsValid && !this.selectedEndDate) {
+        updateData && this.setDate(parsed.date2, true, openPicker);
+        update = true;
+      }
+      if (this.selectedDate && this.selectedEndDate && parsed.rangeIsValid) {
+        if (this.isSameDate(parsed.date2, this.selectedEndDate) && !this.isSameDate(parsed.date, this.selectedDate)) {
+          this.selectedDate = null;
+          updateData && this.setDate(parsed.date, true, openPicker);
+          update = true;
+        }
+        if (this.isSameDate(parsed.date, this.selectedDate) && !this.isSameDate(parsed.date2, this.selectedEndDate)) {
+          this.selectedEndDate = null;
+          updateData && this.setDate(parsed.date2, true, openPicker);
+          update = true;
+        }
+      }
+      if (this.selectedDate && this.selectedEndDate && !parsed.rangeIsValid && updateData) {
+        this.selectedDate = null;
+        this.selectedEndDate = null;
+      }
+    }
+    // Fix: render warning
+    if (update) {
+      if (updateData) {
+        this.renderDate = this.date;
+      }
+      this.setError(false);
+    }
+    else {
+      if (this.type === Types.range && this.selectedDate && this.selectedEndDate && parsed.rangeIsValid) {
+        this.setError(false);
+      }
+      else {
+        if (errorState) {
+          this.setError(true, (errorState === 'disabled-date' && 'selected date is not allowed'));
+        }
+        else {
+          if (text) {
+            this.setError(true, (this.type === Types.datetime && 'invalid date or time') ||
+              (this.type === Types.range && 'invalid date range') ||
+              (this.type === Types.date && 'The selected date is not allowed.') ||
+              (this.type === Types.time && 'invalid time'));
+          }
+          this.setValue(true);
+        }
+      }
+      const splitText = text.split('/');
+      const newValue = text && !this.error ? this.changeFormat(new Date(splitText[1] + "/" + splitText[0] + "/" + splitText[2])) : '';
+      this.inputElement.value = newValue;
+    }
+  }
+  /**
+   * @desc
+   */
+  setDateToday() {
+    const date = new Date();
+    if (this.type === Types.range) {
+      this.selectedDate = null;
+      this.selectedEndDate = null;
+    }
+    this.setDate(date, true, false);
+  }
+  HourContentDblClick(e) {
+    const getPath = Generate.findEventPathWithNodeName(e, 'SPAN');
+    if (getPath && getPath.classList.contains('selected')) {
+      this.setValue();
+      this._open = false;
+    }
+  }
+  /**
+  * @desc
+  */
+  setTime(hours, minutes) {
+    this.renderDate = new Date(this.date.setHours(Number(hours || this.getClock().hours), Number(minutes || this.getClock().minutes)));
+    if (this.type === Types.time) {
+      this.selectedDate = this.date;
+    }
+    const hour = this.currentDate.hour || new Date().getHours();
+    const minute = this.currentDate.minute || new Date().getMinutes();
+    this.setDragSelection('hours', hour, true, true);
+    this.setDragSelection('minutes', minute, true, true);
+  }
+  /**
+   * @desc
+   * @param state
+   * @param error
+   */
+  setError(state = false, error = '') {
+    this.error = state;
+    this.errorText = !state ? '' : error;
+  }
+  /**
+   * @desc
+   */
+  getError() {
+    const { error, errorText } = this;
+    return { valid: !error, error, errorText };
+  }
+  /**
+   * @desc
+   * @param month
+   * @param year
+   */
+  getDaysInMonth(month, year) {
+    return new Date(year, month + 1, 0).getDate();
+  }
+  /**
+   * @desc
+   * @param date
+   * @param day
+   * @returns
+   */
+  getIsCurrentDate(date, day) {
+    const today = new Date();
+    return today.getDate() === day
+      && today.getMonth() === date.getMonth()
+      && today.getFullYear() === date.getFullYear();
+  }
+  /**
+   * @desc
+   * @param date1
+   * @param date2
+   */
+  isSameDate(date1, date2) {
+    return (date1.getFullYear() === date2.getFullYear() &&
+      date1.getMonth() === date2.getMonth() &&
+      date1.getDate() === date2.getDate());
+  }
+  /**
+   * @desc
+   * @param date
+   * @returns
+   */
+  getSelected(date, endDate = false) {
+    const selectPart = endDate ? 'EndDate' : 'Date';
+    const targetDate = new Date(this['selected' + selectPart]);
+    const year = targetDate.getFullYear();
+    const month = targetDate.getMonth();
+    const day = targetDate.getDate();
+    const isSelected = date.getDate() === day
+      && date.getMonth() === month
+      && date.getFullYear() === year;
+    return isSelected;
+  }
+  /**
+   * @desc
+   * @param date
+   */
+  getDateIsInRange(date) {
+    if (this.type !== Types.range || (!this.selectedDate || !this.selectedEndDate))
+      return;
+    const current = date.getTime();
+    const start = this.selectedDate.getTime();
+    const end = this.selectedEndDate.getTime();
+    return current > start && current < end;
+  }
+  /**
+   * @desc
+   */
+  getMonthText() {
+    return Object.values(Months)[this.renderDate.getMonth()];
+  }
+  /**
+   * @desc
+   */
+  getCurrentDateText() {
+    const dayText = Object.values(Days)[this.currentDate.dayOfWeek];
+    const monthText = Object.values(Months)[this.currentDate.month];
+    const text = `${dayText}, ${this.currentDate.day}th ${monthText} ${this.currentDate.year}`;
+    return text;
+  }
+  /**
+  * @desc
+  * @returns
+  */
+  getTimeText() {
+    const { hour, minute } = this.currentDate;
+    return `${hour < 10 ? '0' + hour : hour}:${minute < 10 ? '0' + minute : minute}`;
+  }
+  /**
+   *
+   */
+  getValueText() {
+    if (!this.selectedDate)
+      return '';
+    const selectedDate = this.selectedDate;
+    const year = selectedDate.getFullYear();
+    const day = selectedDate.getDate();
+    const baseMonth = selectedDate.getMonth();
+    const month = baseMonth + 1;
+    let text = '';
+    if (this.type === Types.date || this.type === Types.datetime) {
+      text = `${day < 10 ? '0' + day : day}/${month < 10 ? '0' + month : month}/${year}`;
+    }
+    if (this.type === Types.time) {
+      text = this.getTimeText();
+    }
+    if (this.type === Types.datetime) {
+      text = `${text} ${this.getTimeText()}`;
+    }
+    if (this.type === Types.range) {
+      text = `${day < 10 ? '0' + day : day}/${month < 10 ? '0' + month : month}/${year}`;
+    }
+    if (this.type === Types.range && this.selectedEndDate) {
+      const endDate = this.selectedEndDate;
+      const endYear = endDate.getFullYear();
+      const endDay = endDate.getDate();
+      const endBaseMonth = endDate.getMonth();
+      const endMonth = endBaseMonth + 1;
+      text += `-${endDay < 10 ? '0' + endDay : endDay}/${endMonth < 10 ? '0' + endMonth : endMonth}/${endYear}`;
+    }
+    this.setDataFromText(text);
+    return text;
+  }
+  parseDate(input) {
+    var parts = input.split('/');
+    var day = parseInt(parts[0], 10);
+    var month = parseInt(parts[1], 10) - 1;
+    var year = parseInt(parts[2], 10);
+    if (isNaN(day) || isNaN(month) || isNaN(year)) {
+      return 'invalid date';
+    }
+    var date = new Date(year, month, day);
+    if (date.getDate() !== day || date.getMonth() !== month || date.getFullYear() !== year) {
+      return 'invalid date';
+    }
+    return date;
+  }
+  /**
+   * @desc
+   * @param dateStr
+   */
+  parse(dateStr) {
+    const sections = dateStr.split(this.type === Types.range ? '-' : ' ');
+    // const sections: Array<string> = dateStr.split("-")
+    const sectionDate = this.switchDDMM(sections[0]);
+    const sectionDate2 = this.switchDDMM(sections[1]);
+    const sectionTime = this.type === Types.datetime ? sections[1] : sections[0];
+    const date = new Date(sectionDate);
+    const date2 = new Date(sectionDate2);
+    const dateCheck = date.toString().toLowerCase() !== 'invalid date' && this.parseDate(dateStr) !== 'invalid date';
+    const dateCheck2 = date2.toString().toLowerCase() !== 'invalid date';
+    const regDate = /^((0?[1-9]|1[0-2])(-|\/)(0?[1-9]|[12]\d|3[01])(-|\/)[12]\d{3})$/;
+    const regDateCheck = regDate.test(sectionDate);
+    const regDateCheck2 = regDate.test(sectionDate2);
+    const regTime = /\b([01][0-9]|2[0-3]):([0-5][0-9])\b/;
+    const regTimeCheck = regTime.test(sectionTime);
+    const dateIsValid = dateCheck && regDateCheck;
+    const date2IsValid = dateCheck2 && regDateCheck2;
+    const timeSections = regTimeCheck ? sectionTime.split(':') : '';
+    return {
+      date,
+      date2,
+      timeSections,
+      dateIsValid,
+      date2IsValid,
+      rangeIsValid: dateIsValid && date2IsValid,
+      timeIsValid: regTimeCheck
+    };
+  }
+  /**
+   * @desc
+   */
+  getPrevMonth() {
+    this.setMonth(this.renderDate.getMonth() - 1);
+  }
+  /**
+   * @desc
+   */
+  getNextMonth() {
+    this.setMonth(this.renderDate.getMonth() + 1);
+  }
+  /**
+   * @desc
+   * @param idx
+   */
+  yearClick(idx) {
+    if (this.yearsDragger.busy)
+      return;
+    this.setDragSelection('years', this.years[idx], true, true);
+  }
+  /**
+   * @desc
+   * @param idx
+   */
+  hourClick(idx) {
+    if (this.hoursDragger.busy)
+      return;
+    if (!this.selectedDate) {
+      this.setTime();
+    }
+    this.setDragSelection('hours', this.hours[idx], true, true);
+  }
+  /**
+   * @desc
+   * @param idx
+   */
+  minuteClick(idx) {
+    if (this.minutesDragger.busy)
+      return;
+    if (!this.selectedDate) {
+      this.setTime();
+    }
+    this.setDragSelection('minutes', this.minutes[idx], true, true);
+  }
+  /**
+   * @desc
+   */
+  openPicker() {
+    if (this.disabled)
+      return;
+    !this._open && (this._open = true);
+  }
+  /**
+   * @desc
+   * @param date
+   */
+  handleDayNumber(date) {
+    if (this.type === Types.range
+      && this.selectedDate
+      && !this.selectedEndDate
+      && this.isSameDate(this.selectedDate, date))
+      return;
+    this.setDate(date, true);
+  }
+  /**
+   * @desc
+   * @param value
+   */
+  handleInputInput(value) {
+    this.setDataFromText(value, true);
+  }
+  /**
+   * @desc
+   * @param event -
+   */
+  handleInputChange(event) {
+    this.setDataFromText(this.inputElement.value, true, false);
+    event.stopPropagation();
+  }
+  /**
+   * @desc
+   */
+  async handleInputClear() {
+    this.selectedDate = null;
+    this.selectedEndDate = null;
+    this.emptyState = true;
+    this.renderDate = new Date();
+    this._open = false;
+    this.setValue(true);
+    this.setError();
+    this.getValueText();
+    await this.inputElement.setClear();
+    await delay(10);
+    return Promise.resolve();
+  }
+  /**
+   * @desc
+   * @param event
+   */
+  handleWheel(event) {
+    event.preventDefault();
+  }
+  /**
+   * @desc
+   * @param event
+   */
+  handleWindowClick(event) {
+    if (this._open) {
+      const list = document.getElementById(`picker-vp-${this._id}`);
+      const isClickInside = Generate.findEventPath(event, this.el);
+      const isClickList = list ? (Generate.findEventPath(event, list)) : false;
+      if (!isClickInside && !isClickList) {
+        this._open = false;
+      }
+    }
+  }
+  openToggle() {
+    if (this.disabled)
+      return;
+    this._open = !this._open;
+  }
+  /**
+   * @desc
+   */
+  async open() {
+    await delay(50);
+    this.openToggle();
+  }
+  /**
+   * @desc
+   */
+  async close() {
+    this._open = false;
+  }
+  /**
+   * @desc
+   */
+  async getValue() {
+    return this.value;
+  }
+  /**
+   * @param
+   * @param disabled
+   */
+  async setDisabled(disabled) {
+    this.disabled = disabled;
+  }
+  changeFormat(date, reverseDay = false) {
+    if (!date)
+      return;
+    const pad = (n) => n < 10 ? `0${n}` : n;
+    const day = pad(new Date(date).getDate());
+    const month = pad(new Date(date).getMonth() + 1);
+    const year = new Date(date).getFullYear();
+    const hours = pad(new Date(date).getHours());
+    const minutes = pad(new Date(date).getMinutes());
+    if (this.type == "range" || this.type == "date") {
+      return reverseDay ? `${month}/${day}/${year}` : `${day}/${month}/${year}`;
+    }
+    return reverseDay ? `${month}/${day}/${year} ${hours}:${minutes}` : `${day}/${month}/${year} ${hours}:${minutes}`;
+  }
+  isTime(value) {
+    return /^([0-1]?[0-9]|2[0-4]):([0-5][0-9])(:[0-5][0-9])?$/.test(value);
+  }
+  getHHMM(date) {
+    if (!date)
+      return;
+    const pad = (n) => n < 10 ? `0${n}` : n;
+    const hours = pad(new Date(date).getHours());
+    const minutes = pad(new Date(date).getMinutes());
+    return `${hours}:${minutes}`;
+  }
+  /**
+   * @desc
+   * @param dateOrTime
+   */
+  async set(dateOrTime) {
+    if (dateOrTime) {
+      if (typeof dateOrTime === "number") {
+        dateOrTime = new Date(dateOrTime);
+      }
+      if (this.type == "time") {
+        let time = dateOrTime;
+        if (!this.isTime(dateOrTime)) {
+          time = this.getHHMM(dateOrTime);
+        }
+        this.setDataFromText(time, true, false);
+      }
+      else {
+        const split = dateOrTime.toString().split('-');
+        const parseDate0 = Date.parse(split[0]);
+        if (split[0] && !isNaN(parseDate0)) {
+          var date = this.changeFormat(DateTimeHelper.convertTimeStampToDate(new Date(split[0]).getTime()));
+          if (split[1] && !isNaN(Date.parse(split[1]))) {
+            var date2 = this.changeFormat(DateTimeHelper.convertTimeStampToDate(new Date(split[1]).getTime()));
+            date = date + "-" + date2;
+          }
+          this.setDataFromText(date, true, false);
+        }
+        else {
+          this.setDataFromText('', true, false);
+        }
+      }
+    }
+    else {
+      this.setClear();
+    }
+  }
+  async get() {
+    var _a;
+    return ((_a = this.value) === null || _a === void 0 ? void 0 : _a.timestamp) || null;
+  }
+  async setClear() {
+    await this.handleInputClear();
+    return Promise.resolve();
+  }
+  /**
+   * @desc
+   */
+  async getInput() {
+    return this.inputElement;
+  }
+  /**
+   * @desc
+   * @returns
+   */
+  async isValid() {
+    return this.getError();
+  }
+  async resetCaption() {
+    await delay(10);
+    await this.inputElement.resetCaption();
+    this.captionType = 'default';
+    this.captionError = null;
+    await delay(10);
+    return Promise.resolve();
+  }
+  addZeroBefore(n) {
+    return (n < 10 ? '0' : '') + n;
+  }
+  formatDate(date, format) {
+    const map = {
+      mm: this.addZeroBefore(date.getMonth() + 1),
+      dd: this.addZeroBefore(date.getDate()),
+      yyyy: this.addZeroBefore(date.getFullYear()),
+      hh: this.addZeroBefore(date.getHours()),
+      mi: this.addZeroBefore(date.getMinutes()),
+    };
+    return format.replace(/mm|dd|yyyy|hh|mi/gi, matched => map[matched]);
+  }
+  handleResize() {
+    this.calculateLocation();
+  }
+  handleWheels(event) {
+    if (this._open) {
+      const list = document.querySelector(`#picker-vp-${this._id}`);
+      const isClickInside = list && Generate.findEventPath(event, list);
+      if (isClickInside) {
+        this.calculateLocation();
+      }
+      else {
+        this._open = false;
+      }
+    }
+  }
+  componentDidLoad() {
+    const picker = this.el.shadowRoot.querySelector(`#picker-vp-${this._id}`);
+    //move to body
+    if (picker) {
+      document.body.appendChild(picker);
+      this.calculateLocation();
+    }
+  }
+  disconnectedCallback() {
+    this.el.innerHTML = '';
+    const pickerBox = document.getElementById(`picker-vp-${this._id}`);
+    if (pickerBox) {
+      pickerBox.remove();
+    }
+  }
+  async calculateLocation() {
+    const pickerBox = document.getElementById(`picker-vp-${this._id}`);
+    const placementArray = this.placement.split('-');
+    if (this.alignment) {
+      this.placement = placementArray[0] + (this.alignment == "right" ? "-end" : "-start");
+    }
+    var placement = this.placement;
+    const targetElementId = this.linkedComponent ? this.linkedComponent : this._id;
+    const target = document.getElementById(targetElementId);
+    if (target) {
+      const targetElement = this.linkedComponent ? target : target.shadowRoot.querySelector(`#picker-input-${this._id}`) || target.shadowRoot.querySelector("bcm-datetime-picker").shadowRoot.querySelector(`#picker-input-${this._id}`);
+      if (pickerBox && targetElement) {
+        getPlacement(pickerBox, targetElement, placement, (place) => (placement = place));
+        await delay(10);
+        let pos = setPosition(placement, targetElement);
+        let captionAreaHeight = this.noCaption ? 0 : 20;
+        let labelAreaHeight = 0;
+        // if (this.fullWidth) {
+        //     pickerBox.style.width = targetElement.offsetWidth + 'px';
+        // }
+        getPlacement(pickerBox, targetElement, placement, (place) => (placement = place));
+        await delay(10);
+        pos = setPosition(placement, targetElement);
+        if (this.linkedComponent) {
+          pickerBox.style.top = (placement.split('-')[0] == 'top' ? pos[0] - pickerBox.offsetHeight : pos[0]) + 'px';
+        }
+        else {
+          pickerBox.style.top = (placement.split('-')[0] == 'top' ? pos[0] - pickerBox.offsetHeight + labelAreaHeight : pos[0] - captionAreaHeight) + 'px';
+        }
+        switch (placement.split('-')[1]) {
+          case "start":
+            pickerBox.style.left = pos[1] + 'px';
+            break;
+          case "center":
+            pickerBox.style.left = pos[1] - pickerBox.offsetWidth / 2 + 'px';
+            break;
+          case "end":
+            pickerBox.style.left = pos[1] - pickerBox.offsetWidth + 'px';
+            break;
+        }
+        pickerBox.classList.toggle('bcm-list--top', placement.split('-')[0] == 'top');
+      }
+    }
+  }
+  handleKeyDown(ev) {
+    const keycode = ev.keyCode || ev.which;
+    if (keycode === Bcm.KeyCode.escape) {
+      if (this._open) {
+        this._open = false;
+        ev.preventDefault();
+        ev.stopPropagation();
+        ev.stopImmediatePropagation();
+        this.markForCheck();
+      }
+    }
+  }
+  render() {
+    const dayNumbersClasses = classnames('day-numbers');
+    const datetimePickerClasses = classnames('datetime-picker', 'datetime-picker-wrapper', {
+      'open': this._open,
+      'no-caption': this.noCaption,
+    });
+    const hostClasses = classnames(this.hidden ? 'hidden' : null, {
+      'full-width': this.fullWidth,
+      'linked-component': this.linkedComponent,
+      'no-margin': this.noMargin,
+    });
+    const toggleClasses = classnames('toggle', {
+      disabled: this.disabled
+    });
+    const clockIcon = `<svg style="fill: #595959; width: 14px; height: 14px;"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"/></svg>`;
+    const calendarIcon = `<svg style="fill: #595959; width: 14px; height: 14px;"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"/></svg>`;
+    const errorIcon = `<svg style="fill: #ef4444; width: 14px; height: 14px;"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm42-104c0 23.2-18.8 42-42 42s-42-18.8-42-42 18.8-42 42-42 42 18.8 42 42zm-81.4-211.4l6.8 136c.3 6.4 5.6 11.4 12 11.4h41.2c6.4 0 11.7-5.1 12-11.4l6.8-136c.3-6.9-5.1-12.6-12-12.6h-54.8c-6.9 0-12.4 5.7-12 12.6z"/></svg>`;
+    const inputIcon = this.type == "time" ? clockIcon : calendarIcon;
+    return (h$2(Host, { class: hostClasses, "bcm-internal-id": this.inputId }, this.label && (h$2("div", { class: "picker-label", onClick: () => this.openToggle() }, h$2(LabelTemplate, { size: "medium", type: this.captionType, value: this.label, required: this.required, htmlFor: this._id }))), h$2("bcm-old-input", { ref: el => (this.inputElement = el), placeholder: this.placeholder || 'Select ' + (this.type === Types.datetime ? 'date and time' : '') + (this.type === Types.date ? 'date' : '') + (this.type === Types.time ? 'time' : '') + (this.type === Types.range ? 'date range' : ''), value: this.valueText, required: this.required, fullWidth: this.fullWidth, disabled: this.disabled, name: this.name, id: this.inputId, clearable: this.clearable, onClick: () => this.openPicker(), "no-margin": true, disableWatchValue: true, "on-bcm-clear": () => this.handleInputClear(), "on-bcm-change": (e) => this.handleInputChange(e),
+      // on-bcm-input={(e: CustomEvent) => this.handleInputInput(e.detail)}
+      noCaption: this.noCaption, captionError: this.captionError, caption: this.caption, captionType: this.captionType }, this.error && (h$2("span", { slot: "suffix" }, h$2("span", { id: "error-icon", class: toggleClasses, innerHTML: errorIcon, title: this.errorText }))), h$2("span", { slot: "suffix", onClick: () => this.openPicker() }, h$2("span", { id: "calender-icon", class: toggleClasses, innerHTML: inputIcon }))), h$2("div", { id: "picker-vp-" + this._id, class: datetimePickerClasses, onWheel: (e) => this.handleWheel(e) }, h$2("div", { class: "modules" }, this.hasDateModule && (h$2("div", { class: "date-container" }, h$2("div", { class: "bcm-datetime-picker__header" }, h$2("span", null), h$2("div", { class: "month-year" }, h$2("button", { onClick: () => this.getPrevMonth() }, h$2("bcm-icon", { icon: "far fa-chevron-left" })), h$2("div", { class: "month-year-wrapper" }, h$2("span", { class: "month" }, this.getMonthText()), ",", h$2("span", { class: "year" }, this.date.getFullYear())), h$2("button", { onClick: () => this.getNextMonth() }, h$2("bcm-icon", { icon: "far fa-chevron-right" }))), h$2("span", { class: "today", onClick: () => this.setDateToday() }, "Today")), h$2("div", { class: "bcm-datetime-picker__content" }, h$2("div", { class: "years", ref: el => (this.yearsWrapperElement = el) }, h$2("div", { class: "items", ref: el => (this.yearsElement = el) }, this.years.map((year, idx) => h$2("span", { onClick: () => this.yearClick(idx) }, year))), h$2("div", { class: "select-strip", ref: el => (this.yearsStripElement = el) })), h$2("div", { class: "days" }, h$2("div", { class: "day-labels" }, h$2("span", null, "Mo"), h$2("span", null, "Tu"), h$2("span", null, "We"), h$2("span", null, "Th"), h$2("span", null, "Fr"), h$2("span", null, "Sa"), h$2("span", null, "Su")), h$2("div", { class: dayNumbersClasses }, this.dayNumbers.map(day => (h$2("span", { class: {
+        'is-disabled-date': (this.type === Types.date || this.type === Types.datetime) && this.isDisabledDate(day.date),
+        'not-this-month': !day.thisMonth,
+        'is-weekend': day.isWeekend,
+        'today': day.today,
+        'selected': this.getSelected(day.date),
+        'selected-start': this.getSelected(day.date) && this.selectedEndDate && this.type === Types.range,
+        'selected-end': this.getSelected(day.date, true) && this.type === Types.range,
+        'range': this.getDateIsInRange(day.date) && this.type === Types.range
+      }, onClick: () => this.handleDayNumber(day.date) }, h$2("span", { class: "number" }, day.day))))))))), this.hasTimeModule && (h$2("div", { class: "time-container" }, h$2("div", { class: "bcm-datetime-picker__header" }, h$2("div", { class: "month-year" }, h$2("span", { class: "month" }, this.getTimeText())), h$2("span", { class: "now", onClick: () => { this.setTime(), this.type == "time" && (this._open = false); } }, "Now")), h$2("div", { class: "bcm-datetime-picker__content", onDblClick: (e) => { this.HourContentDblClick(e); } }, h$2("div", { class: "hours", ref: el => (this.hoursWrapperElement = el) }, h$2("div", { class: "items", ref: el => (this.hoursElement = el) }, this.hours.map((hour, idx) => h$2("span", { class: this.currentDate.hour === hour ? 'selected' : '', onClick: () => this.hourClick(idx) }, (hour < 10 && '0') + hour)))), h$2("div", { class: "minutes", ref: el => (this.minutesWrapperElement = el) }, h$2("div", { class: "items", ref: el => (this.minutesElement = el) }, this.minutes.map((minute, idx) => h$2("span", { class: this.currentDate.minute === minute ? 'selected' : '', onClick: () => this.minuteClick(idx) }, (minute < 10 && '0') + minute)))), h$2("div", { class: "select-strip", ref: el => (this.timeStripElement = el) }))))))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "_open": ["openChanged", "openChange"],
+    "renderDate": ["renderDateChange"],
+    "value": ["valueChange"],
+    "disabledDates": ["disabledDatesChange"]
+  }; }
+};
+__decorate$5([
+  IsLoad()
+], BcmDatetimePicker.prototype, "el", void 0);
+BcmDatetimePicker.style = datetimePickerCss;
+
 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$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -24059,7 +25646,7 @@ const BcmLabel = class {
   }
   render() {
     const { required, value, label, size, form, htmlFor, type, tooltip } = this;
-    return (h$2(Host, { class: "tw-inline-block" }, h$2(LabelTemplate, { form: form, htmlFor: htmlFor, value: value || label, size: size, type: type, required: required, tooltip: tooltip })));
+    return (h$2(Host, { class: "tw-inline-block tw-leading-none" }, h$2(LabelTemplate, { form: form, htmlFor: htmlFor, value: value || label, size: size, type: type, required: required, tooltip: tooltip })));
   }
   get el() { return getElement(this); }
 };
@@ -25760,6 +27347,388 @@ __decorate$1([
 ], BcmList.prototype, "dataChanged", null);
 BcmList.style = listCss;
 
+const oldInputCss = "@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}.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:inline-block;width:100%;margin:0 0 8px 0}:host(.hidden){display:none}:host(.no-margin){margin:0}.input-container{display:flex;flex-direction:column;width:100%;max-width:256px}.input-container.full-width{max-width:100%}.input-base{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;flex:1 1 auto;display:inline-flex;align-items:stretch;justify-content:start;position:relative;background-color:var(--bcm-new-ds-color-white);border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;vertical-align:middle;overflow:hidden;padding:0 4px;cursor:text}.input-base.disabled{background-color:var(--bcm-new-ds-color-slate-50);cursor:not-allowed}.input-base.disabled .bcm-input-element{color:var(--bcm-new-ds-color-slate-300)}.input-base.readonly{background-color:var(--bcm-new-ds-color-slate-50);cursor:default}.input-base.readonly .bcm-input-element{color:var(--bcm-new-ds-color-slate-600)}.input-base:not(.disabled):hover .caret-container,.input-base:not(.disabled).focused .caret-container{opacity:1}.input-base:not(.disabled):hover .input-clear-button,.input-base:not(.disabled).focused .input-clear-button{opacity:1}.input-base:not(.disabled).focused{background-color:var(--bcm-new-ds-color-slate-50)}.input-base:not(.disabled):hover{border-color:var(--bcm-color-prime-blue-6)}.input-base.focused:not(.disabled) .caret-container{opacity:1}.input-base.focused:not(.disabled) .input-clear-button{opacity:1}.input-base:hover:not(.disabled) .caret-container{opacity:1}.input-base:hover:not(.disabled) .input-clear-button{opacity:1}.input-base.disabled{cursor:not-allowed}.input-base.readonly{cursor:default}.input-base.empty .input-clear-button{display:none}.input-base.invalid,.input-base.error{border-color:var(--bcm-new-ds-color-red-500)}.error .label{color:var(--bcm-new-ds-color-red-500) !important}.error .input-base{border-color:var(--bcm-new-ds-color-red-500) !important}.input-base input{color:var(--bcm-new-ds-color-slate-600);flex:1 1 auto;width:0%;border:none;border-radius:2px;background:none;box-shadow:none;padding:0;margin:0 4px;font-family:\"Inter\", sans-serif;cursor:inherit;-webkit-appearance:none;appearance:none}.input-base input::-webkit-search-decoration,.input-base input::-webkit-search-cancel-button,.input-base input::-webkit-search-results-button,.input-base input::-webkit-search-results-decoration{-webkit-appearance:none}.input-base input::placeholder{font-family:\"Inter\", sans-serif;color:var(--bcm-new-ds-color-slate-300);user-select:none}.input-base input:focus{outline:none}input::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input[type=number]{-moz-appearance:textfield}.input-prefix,.input-suffix{display:inline-flex;align-items:center;justify-content:center;cursor:default;color:var(--bcm-new-ds-color-slate-500)}.input-prefix ::slotted(*),.input-prefix>span{line-height:1;margin-left:4px}.input-suffix ::slotted(*),.input-suffix>span{line-height:1;margin-right:4px}.input-clear-button,.input-password-toggle{display:inline-flex;align-items:center;border:none;background:none;padding:0;cursor:pointer;margin-right:4px;transition:0.2s opacity}.input-clear-button:last-child,.input-clear-button:last-of-type,.input-password-toggle:last-child,.input-password-toggle:last-of-type{margin-right:8px}.input-clear-button:focus,.input-password-toggle:focus{outline:none}.input-clear-button{opacity:0}.label{display:flex;flex-direction:column;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;color:var(--bcm-new-ds-color-slate-600);margin-bottom:4px}.caption-area{min-height:20px}.input-caption{display:block}.unit.input-suffix{width:24px}.unit-prefix{display:inline-flex;flex:0 0 auto;align-items:center;cursor:default;color:var(--bcm-color-grey-8)}.caret-container{opacity:0;width:30px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-left:1px solid #D9D9D9;border-right:1px solid #D9D9D9;transition:0.2s opacity;user-select:none;box-sizing:border-box;margin-right:4px}.caret-container:last-of-type{margin-right:-space(\"xxxs\");border-right:none}.caret-container .caret{display:inline-flex;height:50%;width:100%;align-items:center;justify-content:center;color:var(--bcm-color-grey-7);cursor:pointer}.caret-container .caret:hover{color:var(--bcm-color-prime-blue-6)}.caret-container .caret:active{background-color:var(--bcm-color-grey-3)}.caret-container .caret:last-child{border-top:1px solid #D9D9D9}.caret-container.disabled{background-color:var(--bcm-color-grey-3)}.caret-container.disabled .caret{cursor:not-allowed}.default-icon{margin-right:8px}.input-large{height:40px}.input-medium{height:32px}.input-small{height:24px}.bcm-label{font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-bottom:4px;font-weight:500;color:#475569}.bcm-label.tw-text-1{font-size:10px;line-height:18px}.bcm-label.tw-text-2{font-size:12px;line-height:20px}.bcm-label.tw-text-3{font-size:14px;line-height:22px}.bcm-caption-area{color:#dc2626;font-weight:400;justify-content:space-between;align-items:flex-start;flex-direction:row;min-height:20px;display:flex;margin-top:4px;font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.bcm-caption-area.tw-text-1{font-size:10px;line-height:18px}.bcm-caption-area.tw-text-2{font-size:12px;line-height:20px}.bcm-caption-area.tw-text-3{font-size:14px;line-height:22px}";
+
+let id = 0;
+const defaultIcons = {
+  email: '<svg style="fill: #595959; width: 14px; height: 14px"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"/></svg>',
+  tel: '<svg style="fill: #595959; width: 14px; height: 14px"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M476.5 22.9L382.3 1.2c-21.6-5-43.6 6.2-52.3 26.6l-43.5 101.5c-8 18.6-2.6 40.6 13.1 53.4l40 32.7C311 267.8 267.8 311 215.4 339.5l-32.7-40c-12.8-15.7-34.8-21.1-53.4-13.1L27.7 329.9c-20.4 8.7-31.5 30.7-26.6 52.3l21.7 94.2c4.8 20.9 23.2 35.5 44.6 35.5C312.3 512 512 313.7 512 67.5c0-21.4-14.6-39.8-35.5-44.6zM69.3 464l-20.9-90.7 98.2-42.1 55.7 68.1c98.8-46.4 150.6-98 197-197l-68.1-55.7 42.1-98.2L464 69.3C463 286.9 286.9 463 69.3 464z"/></svg>',
+  search: '<svg style="fill: #595959; width: 14px; height: 14px"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M508.5 468.9L387.1 347.5c-2.3-2.3-5.3-3.5-8.5-3.5h-13.2c31.5-36.5 50.6-84 50.6-136C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c52 0 99.5-19.1 136-50.6v13.2c0 3.2 1.3 6.2 3.5 8.5l121.4 121.4c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17zM208 368c-88.4 0-160-71.6-160-160S119.6 48 208 48s160 71.6 160 160-71.6 160-160 160z"/></svg>',
+  url: '<svg style="fill: #595959; width: 14px; height: 14px"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M314.222 197.78c51.091 51.091 54.377 132.287 9.75 187.16-6.242 7.73-2.784 3.865-84.94 86.02-54.696 54.696-143.266 54.745-197.99 0-54.711-54.69-54.734-143.255 0-197.99 32.773-32.773 51.835-51.899 63.409-63.457 7.463-7.452 20.331-2.354 20.486 8.192a173.31 173.31 0 0 0 4.746 37.828c.966 4.029-.272 8.269-3.202 11.198L80.632 312.57c-32.755 32.775-32.887 85.892 0 118.8 32.775 32.755 85.892 32.887 118.8 0l75.19-75.2c32.718-32.725 32.777-86.013 0-118.79a83.722 83.722 0 0 0-22.814-16.229c-4.623-2.233-7.182-7.25-6.561-12.346 1.356-11.122 6.296-21.885 14.815-30.405l4.375-4.375c3.625-3.626 9.177-4.594 13.76-2.294 12.999 6.524 25.187 15.211 36.025 26.049zM470.958 41.04c-54.724-54.745-143.294-54.696-197.99 0-82.156 82.156-78.698 78.29-84.94 86.02-44.627 54.873-41.341 136.069 9.75 187.16 10.838 10.838 23.026 19.525 36.025 26.049 4.582 2.3 10.134 1.331 13.76-2.294l4.375-4.375c8.52-8.519 13.459-19.283 14.815-30.405.621-5.096-1.938-10.113-6.561-12.346a83.706 83.706 0 0 1-22.814-16.229c-32.777-32.777-32.718-86.065 0-118.79l75.19-75.2c32.908-32.887 86.025-32.755 118.8 0 32.887 32.908 32.755 86.025 0 118.8l-45.848 45.84c-2.93 2.929-4.168 7.169-3.202 11.198a173.31 173.31 0 0 1 4.746 37.828c.155 10.546 13.023 15.644 20.486 8.192 11.574-11.558 30.636-30.684 63.409-63.457 54.733-54.735 54.71-143.3-.001-197.991z"/></svg>'
+};
+const BcmOldInput = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.focus = createEvent(this, "bcm-focus", 7);
+    this.blur = createEvent(this, "bcm-blur", 7);
+    this.clear = createEvent(this, "bcm-clear", 7);
+    this.change = createEvent(this, "bcm-change", 7);
+    this.input = createEvent(this, "bcm-input", 7);
+    this.inputId = `input-${++id}`;
+    this.isBlur = false;
+    this.type = 'text';
+    this.value = '';
+    this.size = "medium";
+    this.label = undefined;
+    this.noCaption = false;
+    this.noMargin = false;
+    this.captionError = undefined;
+    this.caption = undefined;
+    this.captionType = 'default';
+    this.placeholder = undefined;
+    this.fullWidth = false;
+    this.disabled = false;
+    this.readonly = false;
+    this.clearable = false;
+    this.passwordToggle = undefined;
+    this.noDefaultIcon = undefined;
+    this._id = undefined;
+    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
+    this.name = undefined;
+    this.unit = null;
+    this.unitPrefix = null;
+    this.decimal = undefined;
+    this.min = null;
+    this.max = null;
+    this.step = null;
+    this.hidden = false;
+    this.required = false;
+    this.disableWatchValue = false;
+    this.maxLength = null;
+    this.tooltip = undefined;
+    this.inValid = false;
+    this.valueCache = undefined;
+    this.captionCache = undefined;
+    this.captionTypeCache = undefined;
+    this.hasFocus = false;
+    this.isPasswordVisible = false;
+  }
+  async setFocus() {
+    this.inputElement.focus();
+  }
+  async removeFocus() {
+    this.inputElement.blur();
+  }
+  async select() {
+    return this.inputElement.select();
+  }
+  async setValue(value) {
+    this.inputElement.value = value;
+    this.value = value;
+    this.handleChange();
+    return value;
+  }
+  async setClear() {
+    this.inputElement.value = '';
+    this.value = '';
+    await delay(10);
+    return Promise.resolve();
+  }
+  async resetCaption() {
+    await delay(10);
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+    await delay(10);
+    return Promise.resolve();
+  }
+  async getValue() {
+    return this.value;
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.focus.emit();
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.isBlur = true;
+    if (this.type == "email") {
+      this.isEmailValid();
+    }
+    if (this.type == "tel") {
+      this.isTelValid();
+    }
+    this.blur.emit();
+  }
+  handleChange() {
+    this.value = this.inputElement.value;
+    this.change.emit(this.value);
+  }
+  handleInput() {
+    if (this.type == "number") {
+      if (this.decimal == "false") {
+        this.inputElement.value = this.inputElement.value.replace(/[^0-9-]/g, '');
+      }
+      else {
+        this.inputElement.value = this.inputElement.value.replace(/[^0-9.,-]/g, '');
+      }
+      this.inputElement.value = this.inputElement.value.replace(/(\..*)\./g, '$1').replace(/(\-.*)\-/g, '$1');
+    }
+    this.value = this.inputElement.value;
+    this.input.emit(this.value);
+  }
+  handleClear(e) {
+    this.inputElement.value = '';
+    this.value = '';
+    this.inputElement.focus();
+    this.change.emit(this.value);
+    this.clear.emit(e);
+    e.stopPropagation();
+  }
+  changePasswordVisibility() {
+    this.isPasswordVisible = !this.isPasswordVisible;
+  }
+  incrementNumber() {
+    if (!this.inValid && !this.disabled && !this.readonly) {
+      let step = this.getNumberStep();
+      let val = Number(this.value) + Number(step);
+      this.value = this.numberDecimal(val);
+    }
+  }
+  decrementNumber() {
+    if (!this.inValid && !this.disabled && !this.readonly) {
+      let step = this.getNumberStep();
+      let val = Number(this.value) - Number(step);
+      this.value = this.numberDecimal(val);
+    }
+  }
+  getNumberStep(step = Number(this.step)) {
+    let returnStep = 1;
+    if (step && Number(step) == step)
+      returnStep = step;
+    return Number(returnStep);
+  }
+  connectedCallback() {
+    this.changePasswordVisibility = this.changePasswordVisibility.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleInput = this.handleInput.bind(this);
+    this.handleClear = this.handleClear.bind(this);
+    this.incrementNumber = this.incrementNumber.bind(this);
+    this.decrementNumber = this.decrementNumber.bind(this);
+    this.valueCache = this.value;
+    this.captionCache = this.caption;
+    this.captionTypeCache = this.captionType;
+  }
+  validationRange(val = JSON.stringify({
+    "value": this.value,
+    "min": this.min,
+    "max": this.max
+  })) {
+    let cap = null;
+    let capType = null;
+    let returnValidation = true;
+    let item = JSON.parse(val);
+    let { length, value, min, max } = item;
+    length = parseFloat(length);
+    value = parseFloat(value);
+    min = parseFloat(min);
+    max = parseFloat(max);
+    length !== 0 && (value && (min && max && ((value < min || value > max) && (cap = "Please enter a value between " + min + " and " + max + ".",
+      capType = "error",
+      returnValidation = false)) || min && !max && (value < min && (cap = "Please enter a value greater than or equal to " + min + ".",
+      capType = "error",
+      returnValidation = false)) || !min && max && (value > max && (cap = "Please enter a value less than or equal to " + max + ".",
+      capType = "error",
+      returnValidation = false))));
+    this.setCaption(cap, capType);
+    return returnValidation;
+  }
+  setCaption(caption = null, captionType = null) {
+    this.caption = caption ? caption : this.captionCache;
+    this.captionType = captionType ? captionType : this.captionTypeCache;
+    this.captionError = captionType == "error" ? caption : null;
+  }
+  isEmailValid() {
+    const { value } = this;
+    const regexp = new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
+    let cap = null;
+    let capType = null;
+    if (value && !regexp.test(value)) {
+      cap = "Please enter a valid email address.",
+        capType = "error",
+        this.inValid = true;
+    }
+    else {
+      this.inValid = false;
+    }
+    this.setCaption(cap, capType);
+    return this.inValid;
+  }
+  isTelValid() {
+    const { value } = this;
+    const regexp = new RegExp(/^(?=.*[0-9])[- +()0-9]+$/);
+    let cap = null;
+    let capType = null;
+    if (value && !regexp.test(value)) {
+      cap = "Please enter a valid phone number.",
+        capType = "error",
+        this.inValid = true;
+    }
+    else {
+      this.inValid = false;
+    }
+    this.setCaption(cap, capType);
+    return this.inValid;
+  }
+  isNumberValid(caption = "Invalid number", captionType = "error") {
+    const { value } = this;
+    if (value && Number(value) != value) {
+      this.inValid = true;
+      this.setCaption(caption, captionType);
+      return true;
+    }
+    this.inValid = false;
+    return false;
+  }
+  setNumberUnit() {
+    const { value, unit } = this;
+    if (Number(value) == value && (unit === null || unit === void 0 ? void 0 : unit.length) > 0 && !value)
+      this.value = 0;
+  }
+  numberDecimal(val = '') {
+    let decLen = this.getDecimalLength();
+    if (val && decLen)
+      return parseFloat(val).toFixed(decLen);
+    return val;
+  }
+  numberNotDecimal(val = 0) {
+    return Math.trunc(val);
+  }
+  getDecimalLength() {
+    const { step } = this;
+    let returnDecimalLength = 0, splitted, splitDec;
+    if (step && Number(step) == step) {
+      if (String(step).includes(".")) {
+        splitted = String(step).split('.');
+        splitDec = splitted[splitted.length - 1].length;
+      }
+      else {
+        splitDec = 0;
+      }
+      returnDecimalLength = splitDec;
+    }
+    return Number(returnDecimalLength);
+  }
+  componentWillRender() {
+    const { type } = this;
+    if (type == "number" && this.value) {
+      if (!this.isNumberValid()) {
+        this.validationRange();
+      }
+    }
+    if (this.isBlur) {
+      if (type == "email" && this.value) {
+        this.isEmailValid();
+      }
+      if (type == "tel" && this.value) {
+        this.isTelValid();
+      }
+    }
+  }
+  componentWillLoad() {
+    const { type, value } = this;
+    if (type == "number" && Number(value) == value) {
+      this.value = this.numberDecimal(value);
+    }
+  }
+  numberControl(e) {
+    if (!this.disabled && !this.readonly) {
+      if (this.type == "number") {
+        var which = e.which || 0;
+        var key = e.key;
+        which == 38 && ( // up arrow
+        e.preventDefault(),
+          this.incrementNumber());
+        which == 40 && ( // down arrow
+        e.preventDefault(),
+          this.decrementNumber());
+        key == "." && String(this.value).includes(".") && ( // dot: shouldn't be more than one
+        e.preventDefault());
+        if (which == 8 || //backspace / delete
+          which == 9 || //tab
+          which == 13 || //enter
+          which == 16 || //shift
+          which == 17 || //ctrl
+          which == 18 || //alt
+          which == 46 || //delete
+          (which == 110 && (this.type == 'number' && this.decimal != false)) || //decimal point
+          // (which == 188 && key == ",") || //comma
+          (which == 190 && key == "." && (this.type == 'number' && this.decimal != false)) || //period
+          (which == 189 && this.inputElement.value.length == 0) || //-
+          (which == 109 && this.inputElement.value.length == 0) || //-
+          (which >= 35 && which <= 40) || //end, home, left arrow, up arrow, right arrow, down arrow
+          (which >= 48 && which <= 57) || //0-9
+          (which >= 96 && which <= 105) //0-9(numpad)
+        )
+          return true;
+        e.preventDefault();
+        if (this.decimal == true) {
+          this.value = this.numberDecimal(this.value);
+        }
+        else if (this.decimal == false) {
+          this.value = this.numberNotDecimal(this.value);
+        }
+      }
+    }
+  }
+  whatchHasFocus() {
+    const { type, hasFocus, value, valueCache, inValid } = this;
+    if (type == "number") {
+      this.isNumberValid();
+      let inValidState = false;
+      if (hasFocus == true) {
+        if (inValid == true) {
+          this.value = '';
+          inValidState = true;
+        }
+      }
+      else {
+        if (this.value == '' && inValid == false) {
+          this.value = valueCache;
+          inValidState = true;
+        }
+        if (value != valueCache && inValid == false && inValidState == false) {
+          this.value = value ? this.numberDecimal(value) : '';
+        }
+      }
+    }
+  }
+  watchValue() {
+    if (!this.disableWatchValue && this.type != 'number') {
+      this.handleChange();
+    }
+  }
+  render() {
+    const { value, size, label, type, captionType, caption, captionError, placeholder, fullWidth, disabled, readonly, clearable, passwordToggle, isPasswordVisible, noDefaultIcon, unit, inValid, hasFocus, unitPrefix, noCaption, required } = this;
+    const containerClasses = classnames('input-container', {
+      'full-width': fullWidth,
+      'error': captionType == 'error' ? true : false
+    });
+    const baseClasses = classnames('input-base', 'input-' + size, {
+      'invalid': inValid,
+      'unit': (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
+      'focused': hasFocus,
+      'disabled': disabled,
+      'readonly': readonly,
+      'empty': (value === null || value === void 0 ? void 0 : value.length) < 1
+    });
+    const inputClass = size === 'large' ? 'size-3' : 'size-2';
+    const hostClasses = classnames(this.hidden ? 'hidden' : null, this.noMargin ? 'no-margin' : null);
+    return (h$2(Host, { class: hostClasses }, h$2("div", { class: containerClasses }, label && h$2("div", null, h$2("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required, htmlFor: this.inputId })), h$2("div", { class: baseClasses }, h$2("span", { class: "input-prefix" }, h$2("slot", { name: "prefix" }), unitPrefix && h$2("span", { class: classnames(inputClass, 'unit-prefix') }, unitPrefix)), h$2("input", { "bcm-internal-id": this._id, id: this.inputId, class: inputClass, ref: el => (this.inputElement = el), onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: this.handleChange, onInput: this.handleInput, maxLength: this.maxLength, type: type === 'password' && isPasswordVisible ? 'text' :
+        type === 'number' ? 'text' : type, placeholder: placeholder, value: type === 'number' && !this.hasFocus
+        ? value + (value && (unit === null || unit === void 0 ? void 0 : unit.length) > 0 ? ' ' + unit : '')
+        : value, disabled: this.disabled, readonly: this.readonly }), clearable && !this.disabled && (h$2("button", { class: "input-clear-button", onClick: this.handleClear }, h$2("svg", { style: { "fill": "#595959", "width": "14px", "height": "14px" }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512" }, h$2("path", { d: "M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z" })))), type === 'password' && passwordToggle && (h$2("button", { class: "input-password-toggle", onClick: this.changePasswordVisibility }, h$2("bcm-icon", { icon: isPasswordVisible ? "far fa-eye-invisible" : "far fa-eye" }))), Object.keys(defaultIcons).includes(type) && !noDefaultIcon && (h$2("span", { class: "input-suffix default-icon", innerHTML: defaultIcons[type] })), type === 'number' && (h$2("div", { class: classnames('caret-container', { 'unit': (unit === null || unit === void 0 ? void 0 : unit.length) > 0 }, { 'disabled': inValid }, { 'disabled': readonly }) }, h$2("span", { class: "caret", onClick: inValid == false && this.incrementNumber }, h$2("bcm-icon", { icon: "far fa-caret-up" })), h$2("span", { class: "caret", onClick: inValid == false && this.decrementNumber }, h$2("bcm-icon", { icon: "far fa-caret-down" })))), type !== 'number' && (h$2("span", { class: "input-suffix" }, h$2("slot", { name: "suffix" })))), h$2(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption }))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "hasFocus": ["whatchHasFocus"],
+    "value": ["watchValue"]
+  }; }
+};
+BcmOldInput.style = oldInputCss;
+
 function _extends$4() {
   _extends$4 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -37811,4 +39780,4 @@ const BcmTooltip = class {
   get el() { return getElement(this); }
 };
 
-export { BcmButton as bcm_button, BcmCheckbox as bcm_checkbox, BcmColorful as bcm_colorful, BcmDate as bcm_date, BcmForm as bcm_form, BcmIcon as bcm_icon, BcmInput as bcm_input, BcmLabel as bcm_label, BcmLinked as bcm_linked, BcmList as bcm_list, BcmRcOverflow as bcm_rc_overflow, BcmRcPicker as bcm_rc_picker, BcmSearch as bcm_search, BcmSwitch as bcm_switch, BcmTooltip as bcm_tooltip };
+export { BcmButton as bcm_button, BcmCheckbox as bcm_checkbox, BcmColorful as bcm_colorful, BcmDate as bcm_date, BcmDatePicker as bcm_date_picker, BcmDatetimePicker as bcm_datetime_picker, BcmForm as bcm_form, BcmIcon as bcm_icon, BcmInput as bcm_input, BcmLabel as bcm_label, BcmLinked as bcm_linked, BcmList as bcm_list, BcmOldInput as bcm_old_input, BcmRcOverflow as bcm_rc_overflow, BcmRcPicker as bcm_rc_picker, BcmSearch as bcm_search, BcmSwitch as bcm_switch, BcmTooltip as bcm_tooltip };