bromcom-ui 2.9.0-rc.8 → 2.9.0-rc.9

package/dist/esm/{bcm-colorful.entry.js → bcm-colorful_2.entry.js}

@@ -2,9 +2,22 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { r as registerInstance, c as createEvent, g as getElement } from './index-348b16ad.js';
-import { r as react, a as reactDom } from './index-6310a048.js';
-import { c as createCommonjsModule, a as commonjsGlobal } from './_commonjsHelpers-3016b722.js';
+import { r as registerInstance, c as createEvent, g as getElement, h as h$1, H as Host } from './index-0615c2b8.js';
+import { r as react, a as reactDom } from './index-a6d9d0af.js';
+import { c as createCommonjsModule, a as commonjsGlobal } from './_commonjsHelpers-be0d4ec8.js';
+import { G as Generate } from './generate-903ca965.js';
+import { N as NumberHelper } from './number-helper-3809b83b.js';
+import { S as StringHelper } from './string-helper-4a28f775.js';
+import { V as Validators } from './validators-c8f34de9.js';
+import { a as Bcm } from './bcm-ac17222c.js';
+import { C as CaptionTemplate } from './caption-template-e973a48c.js';
+import { I as InputTemplate } from './input-template-332be34e.js';
+import { c as classnames } from './index-b84bc8c9.js';
+import { d as delay } from './utils-b3338faf.js';
+import { I as IsLoad } from './is-load-decorator-6784aa87.js';
+import './package-9887f1c0.js';
+import './colors-e1c31f79.js';
+import './types-6f06fa1a.js';
 
 function u(){return (u=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);}return e}).apply(this,arguments)}function c(e,r){if(null==e)return {};var t,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r.indexOf(t=a[n])>=0||(o[t]=e[t]);return o}function i(e){var t=react.useRef(e),n=react.useRef(function(e){t.current&&t.current(e);});return t.current=e,n.current}var s=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=1),e>t?t:e<r?r:e},f=function(e){return "touches"in e},v=function(e){return e&&e.ownerDocument.defaultView||self},d=function(e,r,t){var n=e.getBoundingClientRect(),o=f(r)?function(e,r){for(var t=0;t<e.length;t++)if(e[t].identifier===r)return e[t];return e[0]}(r.touches,t):r;return {left:s((o.pageX-(n.left+v(e).pageXOffset))/n.width),top:s((o.pageY-(n.top+v(e).pageYOffset))/n.height)}},h=function(e){!f(e)&&e.preventDefault();},m=react.memo(function(o){var a=o.onMove,l=o.onKey,s=c(o,["onMove","onKey"]),m=react.useRef(null),g=i(a),p=i(l),b=react.useRef(null),_=react.useRef(!1),x=react.useMemo(function(){var e=function(e){h(e),(f(e)?e.touches.length>0:e.buttons>0)&&m.current?g(d(m.current,e,b.current)):t(!1);},r=function(){return t(!1)};function t(t){var n=_.current,o=v(m.current),a=t?o.addEventListener:o.removeEventListener;a(n?"touchmove":"mousemove",e),a(n?"touchend":"mouseup",r);}return [function(e){var r=e.nativeEvent,n=m.current;if(n&&(h(r),!function(e,r){return r&&!f(e)}(r,_.current)&&n)){if(f(r)){_.current=!0;var o=r.changedTouches||[];o.length&&(b.current=o[0].identifier);}n.focus(),g(d(n,r,b.current)),t(!0);}},function(e){var r=e.which||e.keyCode;r<37||r>40||(e.preventDefault(),p({left:39===r?.05:37===r?-.05:0,top:40===r?.05:38===r?-.05:0}));},t]},[p,g]),C=x[0],E=x[1],H=x[2];return react.useEffect(function(){return H},[H]),react.createElement("div",u({},s,{onTouchStart:C,onMouseDown:C,className:"react-colorful__interactive",ref:m,onKeyDown:E,tabIndex:0,role:"slider"}))}),g=function(e){return e.filter(Boolean).join(" ")},p=function(r){var t=r.color,n=r.left,o=r.top,a=void 0===o?.5:o,l=g(["react-colorful__pointer",r.className]);return react.createElement("div",{className:l,style:{top:100*a+"%",left:100*n+"%"}},react.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:t}}))},b=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=Math.pow(10,r)),Math.round(t*e)/t},x=function(e){return L(C(e))},C=function(e){return "#"===e[0]&&(e=e.substring(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:4===e.length?b(parseInt(e[3]+e[3],16)/255,2):1}:{r:parseInt(e.substring(0,2),16),g:parseInt(e.substring(2,4),16),b:parseInt(e.substring(4,6),16),a:8===e.length?b(parseInt(e.substring(6,8),16)/255,2):1}},w=function(e){return K(I(e))},y=function(e){var r=e.s,t=e.v,n=e.a,o=(200-r)*t/100;return {h:b(e.h),s:b(o>0&&o<200?r*t/100/(o<=100?o:200-o)*100:0),l:b(o/2),a:b(n,2)}},q=function(e){var r=y(e);return "hsl("+r.h+", "+r.s+"%, "+r.l+"%)"},I=function(e){var r=e.h,t=e.s,n=e.v,o=e.a;r=r/360*6,t/=100,n/=100;var a=Math.floor(r),l=n*(1-t),u=n*(1-(r-a)*t),c=n*(1-(1-r+a)*t),i=a%6;return {r:b(255*[n,u,l,l,c,n][i]),g:b(255*[c,n,n,u,l,l][i]),b:b(255*[l,l,c,n,n,u][i]),a:b(o,2)}},D=function(e){var r=e.toString(16);return r.length<2?"0"+r:r},K=function(e){var r=e.r,t=e.g,n=e.b,o=e.a,a=o<1?D(b(255*o)):"";return "#"+D(r)+D(t)+D(n)+a},L=function(e){var r=e.r,t=e.g,n=e.b,o=e.a,a=Math.max(r,t,n),l=a-Math.min(r,t,n),u=l?a===r?(t-n)/l:a===t?2+(n-r)/l:4+(r-t)/l:0;return {h:b(60*(u<0?u+6:u)),s:b(a?l/a*100:0),v:b(a/255*100),a:o}},S=react.memo(function(r){var t=r.hue,n=r.onChange,o=g(["react-colorful__hue",r.className]);return react.createElement("div",{className:o},react.createElement(m,{onMove:function(e){n({h:360*e.left});},onKey:function(e){n({h:s(t+360*e.left,0,360)});},"aria-label":"Hue","aria-valuenow":b(t),"aria-valuemax":"360","aria-valuemin":"0"},react.createElement(p,{className:"react-colorful__hue-pointer",left:t/360,color:q({h:t,s:100,v:100,a:1})})))}),T=react.memo(function(r){var t=r.hsva,n=r.onChange,o={backgroundColor:q({h:t.h,s:100,v:100,a:1})};return react.createElement("div",{className:"react-colorful__saturation",style:o},react.createElement(m,{onMove:function(e){n({s:100*e.left,v:100-100*e.top});},onKey:function(e){n({s:s(t.s+100*e.left,0,100),v:s(t.v-100*e.top,0,100)});},"aria-label":"Color","aria-valuetext":"Saturation "+b(t.s)+"%, Brightness "+b(t.v)+"%"},react.createElement(p,{className:"react-colorful__saturation-pointer",top:1-t.v/100,left:t.s/100,color:q(t)})))}),F=function(e,r){if(e===r)return !0;for(var t in e)if(e[t]!==r[t])return !1;return !0},X=function(e,r){return e.toLowerCase()===r.toLowerCase()||F(C(e),C(r))};function Y(e,t,l){var u=i(l),c=react.useState(function(){return e.toHsva(t)}),s=c[0],f=c[1],v=react.useRef({color:t,hsva:s});react.useEffect(function(){if(!e.equal(t,v.current.color)){var r=e.toHsva(t);v.current={hsva:r,color:t},f(r);}},[t,e]),react.useEffect(function(){var r;F(s,v.current.hsva)||e.equal(r=e.fromHsva(s),v.current.color)||(v.current={hsva:s,color:r},u(r));},[s,e,u]);var d=react.useCallback(function(e){f(function(r){return Object.assign({},r,e)});},[]);return [s,d]}var V="undefined"!=typeof window?react.useLayoutEffect:react.useEffect,$=function(){return ("undefined"!=typeof __webpack_nonce__?__webpack_nonce__:void 0)},J=new Map,Q=function(e){V(function(){var r=e.current?e.current.ownerDocument:document;if(void 0!==r&&!J.has(r)){var t=r.createElement("style");t.innerHTML='.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>\')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}',J.set(r,t);var n=$();n&&t.setAttribute("nonce",n),r.head.appendChild(t);}},[]);},U=function(t){var n=t.className,o=t.colorModel,a=t.color,l=void 0===a?o.defaultColor:a,i=t.onChange,s=c(t,["className","colorModel","color","onChange"]),f=react.useRef(null);Q(f);var v=Y(o,l,i),d=v[0],h=v[1],m=g(["react-colorful",n]);return react.createElement("div",u({},s,{ref:f,className:m}),react.createElement(T,{hsva:d,onChange:h}),react.createElement(S,{hue:d.h,onChange:h,className:"react-colorful__last-control"}))},W={defaultColor:"000",toHsva:x,fromHsva:function(e){return w({h:e.h,s:e.s,v:e.v,a:1})},equal:X},Z=function(r){return react.createElement(U,u({},r,{colorModel:W}))};
 
@@ -17220,4 +17233,350 @@ const BcmColorful = class {
 };
 BcmColorful.style = colorfulCss;
 
-export { BcmColorful as bcm_colorful };
+const inputCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-caption-area{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-size:12px;line-height:calc(12px + 8px);color:var(--bcm-new-ds-color-slate-400);display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;flex-wrap:nowrap;margin-top:2px}.bcm-caption-area__text{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.default{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.info{color:var(--bcm-new-ds-color-blue-500)}.bcm-caption-area__text.success{color:var(--bcm-new-ds-color-emerald-500)}.bcm-caption-area__text.warning{color:var(--bcm-new-ds-color-amber-500)}.bcm-caption-area__text.error{color:var(--bcm-new-ds-color-red-500)}.bcm-caption-area__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-caption-area__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-caption-area__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}*{box-sizing:border-box}.bcm-label{display:inline-flex;align-items:flex-start;grid-gap:2px}.bcm-label__text{margin-bottom:2px;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-block;color:var(--bcm-new-ds-color-slate-600)}.bcm-label__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-label__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-label__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}*{box-sizing:border-box}.bcm-input{display:inline-flex;flex-direction:column;width:100%;max-width:256px;margin-bottom:8px}.bcm-input.full-width{max-width:100%}.bcm-input.hidden{display:none}.bcm-input__container{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:flex;align-items:stretch;flex-direction:row;background-color:var(--bcm-new-ds-color-white);border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;box-sizing:border-box;cursor:text;padding:0 0 0 4px;position:relative;width:100%}.bcm-input__container.disabled{background-color:var(--bcm-new-ds-color-slate-50);cursor:not-allowed}.bcm-input__container.disabled .bcm-input-element{color:var(--bcm-new-ds-color-slate-500)}.bcm-input__container.readonly{background-color:var(--bcm-new-ds-color-slate-50);cursor:default}.bcm-input__container.readonly .bcm-input-element{color:var(--bcm-new-ds-color-slate-600)}.bcm-input__container:not(.disabled):hover .caret-container,.bcm-input__container:not(.disabled).focused .caret-container{opacity:1}.bcm-input__container:not(.disabled):hover .input-clear-button,.bcm-input__container:not(.disabled).focused .input-clear-button{opacity:1}.bcm-input__container:not(.disabled).focused{background-color:var(--bcm-new-ds-color-slate-50)}.bcm-input__container:not(.disabled):hover{border-color:var(--bcm-color-prime-blue-6)}.bcm-input__container.empty .input-clear-button{display:none}.bcm-input__container.invalid,.bcm-input__container.error{border-color:var(--bcm-new-ds-color-red-500)}.bcm-input__container .bcm-input-element{width:100%;color:var(--bcm-new-ds-color-slate-600);flex:1;border:none;background:transparent;box-shadow:unset;padding:0 4px;font-family:\"Inter\", sans-serif;cursor:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;overflow:hidden;text-overflow:ellipsis}.bcm-input__container .bcm-input-element::placeholder{font-family:\"Inter\", sans-serif;color:var(--bcm-new-ds-color-slate-300);user-select:none}.bcm-input__container .bcm-input-element::-webkit-search-decoration,.bcm-input__container .bcm-input-element::-webkit-search-cancel-button,.bcm-input__container .bcm-input-element::-webkit-search-results-button,.bcm-input__container .bcm-input-element::-webkit-search-results-decoration,.bcm-input__container .bcm-input-element::-webkit-calendar-picker-indicator,.bcm-input__container .bcm-input-element::-webkit-inner-spin-button,.bcm-input__container .bcm-input-element::-webkit-outer-spin-button{-webkit-appearance:none}.bcm-input__container .caret-container{width:30px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;border-left:1px solid #D9D9D9;transition:0.2s opacity;user-select:none;box-sizing:border-box}.bcm-input__container .caret-container .bcm-input-caret{display:flex;align-items:center;justify-content:center;color:var(--bcm-color-grey-7);cursor:pointer;flex:1}.bcm-input__container .caret-container .bcm-input-caret bcm-icon{line-height:1}.bcm-input__container .caret-container .bcm-input-caret:hover{color:var(--bcm-color-prime-blue-6)}.bcm-input__container .caret-container .bcm-input-caret:active{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container .bcm-input-caret:last-child{border-top:1px solid #D9D9D9}.bcm-input__container .caret-container.disabled{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container.disabled .bcm-input-caret{cursor:not-allowed}.bcm-input__container .input-suffix-content{display:flex;align-items:center;justify-content:center}.bcm-input__container .input-prefix:not(:empty){padding-left:4px}.bcm-input__container .input-suffix:not(:empty){min-width:24px;padding-right:4px}.bcm-input__container .input-prefix:not(:empty),.bcm-input__container .input-suffix:not(:empty){display:flex;align-items:center;justify-content:center;cursor:default;color:#64748a}.bcm-input__container .input-prefix:not(:empty) .unit-prefix,.bcm-input__container .input-suffix:not(:empty) .unit-prefix{color:#64748a}.bcm-input__container .input-prefix-button:not(:empty),.bcm-input__container .input-suffix-button:not(:empty){cursor:pointer}.bcm-input__container .caret-container,.bcm-input__container .input-clear-button{opacity:0}.bcm-input__container--small{font-size:12px}.bcm-input__container--medium{font-size:14px}.bcm-input__container--large{font-size:16px}.bcm-input__textarea.clearable .bcm-input-element{padding-right:24px}.bcm-input__textarea .input-clear-button{position:absolute;top:4px;right:0}";
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const BcmInput = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.focus = createEvent(this, "bcm-focus", 7);
+    this.blur = createEvent(this, "bcm-blur", 7);
+    this.clear = createEvent(this, "bcm-clear", 7);
+    this.change = createEvent(this, "bcm-change", 7);
+    this.input = createEvent(this, "bcm-input", 7);
+    this.isBlur = false;
+    this._id = Generate.UID();
+    this._internal_id = Generate.UID();
+    this.value = '';
+    this.size = Bcm.Size.medium;
+    this.label = undefined;
+    this.pattern = undefined;
+    this.tooltip = undefined;
+    this.placeholder = undefined;
+    this.disabled = false;
+    this.readonly = false;
+    this.clearable = false;
+    this.autocomplete = false;
+    this.name = undefined;
+    this.type = Bcm.InputType.text;
+    this.hidden = false;
+    this.required = false;
+    this.fullWidth = false;
+    this.noDefaultIcon = undefined;
+    this.disableWatchValue = false // datetimepicker
+    ;
+    this.passwordToggle = false // type password
+    ;
+    this.maxLength = null;
+    this.unitPrefix = null;
+    this.unit = undefined;
+    this.decimal = true;
+    this.min = undefined;
+    this.max = undefined;
+    this.step = undefined;
+    this.caption = undefined;
+    this.noCaption = false;
+    this.captionType = Bcm.Status.default;
+    this.captionError = undefined;
+    this.customErrorMessage = undefined;
+    this._prefix = undefined;
+    this._suffix = undefined;
+    this.captionCache = undefined;
+    this.captionTypeCache = undefined;
+    this.inValid = false;
+    this.valueCache = '';
+    this.focused = false;
+    this.isPasswordVisible = false;
+  }
+  connectedCallback() {
+    this.valueCache = this.value;
+    this.captionCache = this.caption;
+    this.captionTypeCache = this.captionType;
+  }
+  componentWillRender() {
+    const { type, isBlur, value } = this;
+    if (value) {
+      this.value.length > 0 && (this.checkPattern());
+      switch (type) {
+        case "number":
+          {
+            !this.checkValid("number") && (this.validationRange());
+          }
+          break;
+        case "email":
+          {
+            isBlur && (this.checkValid("email"));
+          }
+          break;
+        case "tel":
+          {
+            isBlur && (this.checkValid("phone"));
+          }
+          break;
+      }
+    }
+    else {
+      !this.required && (this.resetCaption());
+    }
+  }
+  async onBcmFocus() {
+    this.inputElement.focus();
+  }
+  async onBcmBlur() {
+    this.inputElement.blur();
+  }
+  async onBcmSelect() {
+    this.inputElement.select();
+  }
+  async set(data) {
+    await this.setValue(data);
+  }
+  async get() {
+    return this.value || null;
+  }
+  async setValue(value) {
+    this.inputElement.value = value;
+    this.handleChange();
+    return value;
+  }
+  async setClear() {
+    this.inputElement.value = '';
+    this.value = '';
+    await delay(10);
+    return Promise.resolve();
+  }
+  async resetCaption() {
+    await delay(10);
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+    this.inValid = false;
+    await delay(10);
+    return Promise.resolve();
+  }
+  async getValue() {
+    return this.value;
+  }
+  watchValue(newValue) {
+    this.inputElement.value = newValue;
+    if (!this.disableWatchValue && this.type != "number") {
+      this.handleChange();
+    }
+  }
+  listenKeyDown(e) {
+    if (!this.disabled && !this.readonly) {
+      this.onBcmFocus();
+      if (this.type == "number") {
+        var which = e.which || 0;
+        var key = e.key;
+        if (which == 38) { // up arrow
+          e.preventDefault(),
+            this.stepUpOrDown('up');
+        }
+        if (which == 40) { // down arrow
+          e.preventDefault(),
+            this.stepUpOrDown('down');
+        }
+        if ((which == 190 || which == 110 || key == ".") && this.value.indexOf(".") > -1) { //.
+          e.preventDefault();
+        }
+        if ((which == 189 || which == 109 || key == "-")) { //-
+          if (this.value.charAt(0) == '-' || this.value.indexOf("-") > -1) {
+            e.preventDefault();
+          }
+        }
+      }
+    }
+  }
+  handleFocus() {
+    this.focused = true;
+    this.focus.emit();
+    this.whatchHasFocus();
+  }
+  handleBlur() {
+    this.focused = false;
+    this.isBlur = true;
+    this.whatchHasFocus();
+    this.blur.emit();
+  }
+  handleChange() {
+    this.valueSync();
+  }
+  handleInput() {
+    if (this.type == "number" && this.maxLength) {
+      const inputValue = this.inputElement.value;
+      if (inputValue && inputValue.length > 0 && inputValue.length > this.maxLength) {
+        this.inputElement.value = inputValue.substring(0, this.maxLength);
+      }
+    }
+    this.valueSync();
+  }
+  valueSync() {
+    if (this.value != this.inputElement.value) {
+      this.value = this.inputElement.value;
+      this.change.emit(this.value);
+      return true;
+    }
+    this.input.emit(this.value);
+    return false;
+  }
+  handleClear(e) {
+    this.inputElement.value = '';
+    this.value = '';
+    this.inputElement.focus();
+    this.clear.emit(e);
+    this.change.emit(this.value);
+    e.stopPropagation();
+  }
+  changePasswordVisibility() {
+    this.isPasswordVisible = !this.isPasswordVisible;
+  }
+  setCaption(caption = null, captionType = null) {
+    this.caption = caption || this.captionCache;
+    this.captionType = captionType || this.captionTypeCache;
+    this.captionError = captionType == "error" ? caption : null;
+  }
+  stepUpOrDown(type) {
+    if (!this.inValid && !this.disabled && !this.readonly) {
+      let step = +(this.step) || 1;
+      let val = +(this.value);
+      if (type == 'up') {
+        val = +(val + step);
+      }
+      else {
+        val = +(val - step);
+      }
+      this.value = val.toString();
+      this.change.emit(this.value);
+    }
+  }
+  validationRange() {
+    const { min, max, value } = this;
+    if (value !== undefined) {
+      if ((min !== undefined) && (max !== undefined)) {
+        if (value < min || value > max) {
+          this.setCaption(StringHelper.getMessage('between', [min, max]), "error");
+          return false;
+        }
+      }
+      else if (min !== undefined) {
+        if (value < min) {
+          this.setCaption(StringHelper.getMessage('min', [min]), "error");
+          return false;
+        }
+      }
+      else if (max !== undefined) {
+        if (value > max) {
+          this.setCaption(StringHelper.getMessage('max', [max]), "error");
+          return false;
+        }
+      }
+    }
+    this.setCaption();
+    return true;
+  }
+  checkPattern() {
+    const { pattern, value } = this;
+    if (pattern) {
+      if (Validators.pattern(value, pattern)) {
+        this.setCaption();
+        this.inValid = false;
+      }
+      else {
+        this.setCaption(StringHelper.getMessage('pattern'), "error");
+        this.inValid = true;
+      }
+    }
+  }
+  checkValid(type) {
+    const { value } = this;
+    if (Validators.isValidate(value, type)) {
+      this.setCaption();
+      this.inValid = false;
+    }
+    else {
+      this.setCaption(StringHelper.getMessage(type), "error");
+      this.inValid = true;
+    }
+    return this.inValid;
+  }
+  whatchHasFocus() {
+    const { type, focused, valueCache, inValid } = this;
+    if (type == Bcm.InputType.number && inValid) {
+      console.log("whatchHasFocus");
+      if (focused) {
+        this.value = '';
+      }
+      else {
+        if (!StringHelper.isNullOrEmpty(this.value)) {
+          this.value = this.value ? this.fixToNumber(this.value) : '';
+        }
+        else {
+          this.value = valueCache;
+        }
+      }
+    }
+  }
+  fixToNumber(val) {
+    if (val) {
+      const decLen = NumberHelper.getDecimalLength(this.step);
+      return decLen > 0 ? NumberHelper.parseFloatFixed(val, decLen) : val;
+    }
+    return val;
+  }
+  eyeDropper() {
+    const eyeDropper = new window.EyeDropper();
+    eyeDropper
+      .open()
+      .then((color) => {
+      console.log("color: ", color.sRGBHex);
+      this.setValue(color.sRGBHex);
+    })
+      .catch((error) => {
+      if (error.name === "NotAllowedError") {
+        console.log("Permission to access sensor was denied.");
+      }
+      else if (error.name === "NotSupportedError") {
+        console.log("Sensor not supported.");
+      }
+    });
+  }
+  isEyeDropperSupported() {
+    return typeof window !== "undefined" && "EyeDropper" in window;
+  }
+  toggleLinked() {
+    const linkedElement = document.getElementById(`${this._id}-linked`);
+    if (linkedElement) {
+      linkedElement.toggle();
+    }
+  }
+  render() {
+    const { value, size, label, type, captionType, caption, captionError, placeholder, fullWidth, disabled, readonly, clearable, passwordToggle, isPasswordVisible, noDefaultIcon, unit, inValid, focused, unitPrefix, noCaption, required, hidden, _id, autocomplete } = this;
+    const isActiveClearable = (value === null || value === void 0 ? void 0 : value.length) > 0 && clearable;
+    const hostClasses = classnames('bcm-input', `bcm-input__container--${size}`, {
+      hidden,
+      // 'no-margin': noMargin,
+      'full-width': fullWidth
+    });
+    return (h$1(Host, { onfocus: () => this.onBcmFocus(), class: hostClasses, onClick: () => this.onBcmFocus() }, label && h$1("bcm-label", { onClick: () => this.toggleLinked(), tooltip: this.tooltip, type: captionType, value: label, required: required, htmlFor: _id }), h$1(InputTemplate, { id: _id, type: type, value: value, pattern: this.pattern, placeholder: placeholder, disabled: disabled, readonly: readonly, clearable: isActiveClearable, passwordToggle: passwordToggle, isPasswordVisible: isPasswordVisible, noDefaultIcon: noDefaultIcon, focused: focused, inValid: inValid, unitPrefix: unitPrefix, maxLength: this.maxLength, internalId: this._internal_id, captionType: captionType, unit: unit, size: size, handleFocus: () => this.handleFocus(), handleBlur: () => this.handleBlur(), handleChange: () => this.handleChange(), handleInput: () => this.handleInput(), steps: (e) => this.stepUpOrDown(e), changePasswordVisibility: () => this.changePasswordVisibility(), handleClear: (e) => this.handleClear(e), eyeDropper: () => this.eyeDropper(), isEyeDropperSupported: () => this.isEyeDropperSupported(), ref: (el) => this.inputElement = el, _suffix: this._suffix, _prefix: this._prefix, autocomplete: autocomplete }), h$1(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: this.customErrorMessage }), type == Bcm.InputType.color &&
+      h$1("bcm-linked", { targetId: this._id + "-container", id: this._id + "-linked" }, h$1("bcm-colorful", { id: this._id + "-picker", color: this.value, onBcmChange: e => this.setValue(e.detail) }))));
+  }
+  static get watchers() { return {
+    "value": ["watchValue"]
+  }; }
+};
+__decorate([
+  IsLoad()
+], BcmInput.prototype, "inputElement", void 0);
+BcmInput.style = inputCss;
+
+export { BcmColorful as bcm_colorful, BcmInput as bcm_input };

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

@@ -2,11 +2,11 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { r as registerInstance, c as createEvent, h, a as getAssetPath, H as Host, g as getElement } from './index-348b16ad.js';
+import { r as registerInstance, c as createEvent, h, a as getAssetPath, H as Host, g as getElement } from './index-0615c2b8.js';
 import { E as ElementDragger, D as DragDirections } from './element-dragger-7ea06c76.js';
-import { c as classnames } from './index-ed9652af.js';
+import { c as classnames } from './index-b84bc8c9.js';
 import './utils-b3338faf.js';
-import './_commonjsHelpers-3016b722.js';
+import './_commonjsHelpers-be0d4ec8.js';
 
 const colorpickerCss = "@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{position:relative;margin:0 0 8px 0}.color-picker{position:relative;width:200px}.color-picker.open .picker{opacity:1;visibility:visible;transform:scale(1) translateY(56px)}.picker{width:300px;position:absolute;top:0;z-index:1;background-color:#ffffff;border:1px solid #F6F6F6;box-shadow:0px 3px 3.6px 0.4px rgba(0, 0, 0, 0.15);opacity:0;visibility:hidden;transition:transform 0.2s ease, opacity 0.3s ease;transform:scale(0.8) translateY(-100px)}.label{display:flex;flex-direction:column;color:var(--bcm-color-grey-9);margin-bottom:4px}.caption-area{min-height:20px}.input-caption{display:block}.input{display:flex;cursor:pointer;border:1px solid var(--bcm-color-grey-5);border-radius:2px}.color{position:relative;width:100%;height:166px;user-select:none}.color img{width:100%;height:100%;user-select:none;pointer-events:none}.color-indicator{position:absolute;top:0;left:0;width:17px;height:17px;border:1px solid rgba(255, 255, 255, 0.82);box-shadow:0px 1px 2px rgba(0, 0, 0, 0.25);transform:translate(0, 0);border-radius:100px;user-select:none;box-sizing:border-box;pointer-events:none}.colors{position:relative;width:100%;height:16px;margin-top:8px}.colors img{width:100%;user-select:none;pointer-events:none}.colors-holder{position:absolute;top:50%;left:0;width:100%;height:8px;overflow:hidden;transform:translateY(-50%);border-radius:8px;user-select:none}.colors-indicator{position:absolute;top:50%;left:0;width:17px;height:17px;border:2px solid rgba(255, 255, 255, 0.82);box-shadow:0px 1px 4px rgba(0, 0, 0, 0.25);transform:translateY(-50%);border-radius:100px;user-select:none;box-sizing:border-box;pointer-events:none}.transparency{position:relative;width:100%;height:16px;margin-top:8px}.transparency-holder{position:absolute;top:50%;left:0;width:100%;height:8px;overflow:hidden;transform:translateY(-50%);border-radius:8px;background:transparent none repeat center center/20px}.transparency-indicator{position:absolute;top:50%;left:0;width:17px;height:17px;border:2px solid rgba(255, 255, 255, 0.82);box-shadow:0px 1px 4px rgba(0, 0, 0, 0.25);transform:translateY(-50%);border-radius:100px;user-select:none;box-sizing:border-box}.colors-transparency{padding:16px}.active-color{display:flex;align-items:center;width:100%;height:30px}.active-color .color-thumb{width:100%;height:100%;background-color:transparent;border-radius:1px 0 0 1px}.active-color .color-text{font-size:14px;color:#656565;margin-left:8px}.icon{display:flex;align-items:center;justify-content:center;cursor:pointer;width:30px;color:var(--bcm-color-grey-6)}.color-input{border:none;width:100%;padding:10px;outline:none;-webkit-tap-highlight-color:transparent}";
 

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

@@ -2,7 +2,7 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-348b16ad.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-0615c2b8.js';
 
 const BcmContent = class {
   constructor(hostRef) {

package/dist/esm/bcm-date-picker.entry.js

@@ -2,16 +2,16 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-348b16ad.js';
-import { c as classnames } from './index-ed9652af.js';
-import { I as IsLoad } from './is-load-decorator-07d3502a.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-0615c2b8.js';
+import { c as classnames } from './index-b84bc8c9.js';
+import { I as IsLoad } from './is-load-decorator-6784aa87.js';
 import { D as DateTimeHelper } from './datetime-helper-df25808a.js';
-import { G as Generate } from './generate-e008f24f.js';
-import { a as Bcm } from './bcm-9f50af9c.js';
+import { G as Generate } from './generate-903ca965.js';
+import { a as Bcm } from './bcm-ac17222c.js';
 import { d as delay } from './utils-b3338faf.js';
-import './_commonjsHelpers-3016b722.js';
-import './package-00ece356.js';
-import './colors-44c95e7e.js';
+import './_commonjsHelpers-be0d4ec8.js';
+import './package-9887f1c0.js';
+import './colors-e1c31f79.js';
 
 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-block;width:100%;max-width:256px}:host(.full-width){max-width:100%}:host(.hidden){display:none}:host(.linked-component){display:none}";
 

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

@@ -0,0 +1,120 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0615c2b8.js';
+import { I as IsLoad } from './is-load-decorator-6784aa87.js';
+import './color-helper-c4fa9ebc.js';
+import './datetime-helper-df25808a.js';
+import { G as Generate } from './generate-903ca965.js';
+import './number-helper-3809b83b.js';
+import './string-helper-4a28f775.js';
+import './validators-c8f34de9.js';
+import './element-dragger-7ea06c76.js';
+import { B as Bcm } from './bcm-ac17222c.js';
+import { C as CaptionTemplate } from './caption-template-e973a48c.js';
+import { c as classnames } from './index-b84bc8c9.js';
+import './types-6f06fa1a.js';
+import { L as LabelTemplate } from './label-template-f156f33f.js';
+import './types-9493a7ed.js';
+import { h as hooks } from './moment-24231dde.js';
+import './colors-1d7854ea.js';
+import './utils-b3338faf.js';
+import './colors-e1c31f79.js';
+import './_commonjsHelpers-be0d4ec8.js';
+import './package-9887f1c0.js';
+import './slot-template-46035685.js';
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const BcmDate = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.change = createEvent(this, "bcm-change", 7);
+    this.onChange = (e) => {
+      this.value = this.getValueObject(e.detail);
+      this.change.emit(this.value);
+    };
+    this.getValueObject = (value) => {
+      if (value && hooks(value).isValid()) {
+        return {
+          isValid: hooks(value).isValid(),
+          date: hooks(value).toDate(),
+          timestamp: hooks(value).valueOf(),
+          dateObject: {
+            year: hooks(value).year(),
+            day: hooks(value).date(),
+            month: hooks(value).month(),
+            dayOfWeek: hooks(value).day(),
+            monthFirstDay: hooks(value).startOf("month").day(),
+          },
+          value: hooks(value).format(this.format),
+        };
+      }
+      else {
+        return null;
+      }
+    };
+    this._id = Generate.UID();
+    this.name = undefined;
+    this.value = undefined;
+    this.label = undefined;
+    this.placeholder = undefined;
+    this.size = Bcm.Size.medium;
+    this.fullWidth = false;
+    this.required = false;
+    this.clearable = false;
+    this.caption = undefined;
+    this.noCaption = false;
+    this.captionType = Bcm.Status.default;
+    this.captionError = undefined;
+    this.type = undefined;
+    this.format = "DD/MM/YYYY";
+    this.showTime = false;
+    this.showToday = true;
+    this.showNow = true;
+  }
+  async getValue() {
+    var _a;
+    return ((_a = this.getValueObject(this.value)) === null || _a === void 0 ? void 0 : _a.value) || null;
+  }
+  async get() {
+    var _a;
+    return ((_a = this.getValueObject(this.value)) === null || _a === void 0 ? void 0 : _a.timestamp) || null;
+  }
+  async set(value) {
+    this.value = value;
+  }
+  async setClear() {
+    this.value = null;
+  }
+  async resetCaption() {
+    this.captionType = "default";
+    this.captionError = null;
+  }
+  async getInput() {
+    return this.el.querySelector("input");
+  }
+  async isValid() {
+    var _a;
+    return ((_a = this.getValueObject(this.value)) === null || _a === void 0 ? void 0 : _a.isValid) || false;
+  }
+  render() {
+    const { label, size, captionType, required, _id } = this;
+    return (h(Host, { class: classnames("bcm-ui-element bcm-ui-action", "tw-inline-flex tw-flex-col") }, label && h(LabelTemplate, { size: size, type: captionType, value: label, required: required, htmlFor: _id }), h("bcm-rc-picker", { onBcmRCPickerChange: e => this.onChange(e), type: this.type, format: this.format, "show-time": this.showTime, clearable: this.clearable, val: this.value }), h(CaptionTemplate, { noCaption: this.noCaption, captionType: this.captionType, captionError: this.captionError, caption: this.caption })));
+  }
+  get el() { return getElement(this); }
+};
+__decorate([
+  IsLoad()
+], BcmDate.prototype, "el", void 0);
+
+export { BcmDate as bcm_date };

package/dist/esm/bcm-datetime-picker.entry.js

@@ -2,21 +2,21 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-348b16ad.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-0615c2b8.js';
 import { D as DragDirections, E as ElementDragger } from './element-dragger-7ea06c76.js';
-import { c as classnames } from './index-ed9652af.js';
+import { c as classnames } from './index-b84bc8c9.js';
 import { D as DateTimeHelper } from './datetime-helper-df25808a.js';
 import { d as delay } from './utils-b3338faf.js';
-import { G as Generate } from './generate-e008f24f.js';
-import { a as Bcm } from './bcm-9f50af9c.js';
-import { g as getPlacement, s as setPosition } from './popover-placement-78f86f15.js';
-import { L as LabelTemplate } from './label-template-98dafeb3.js';
-import { I as IsLoad } from './is-load-decorator-07d3502a.js';
-import './_commonjsHelpers-3016b722.js';
-import './package-00ece356.js';
-import './colors-44c95e7e.js';
-import './string-helper-6bd24967.js';
-import './slot-template-672e941d.js';
+import { G as Generate } from './generate-903ca965.js';
+import { a as Bcm } from './bcm-ac17222c.js';
+import { g as getPlacement, s as setPosition } from './popover-placement-018109c4.js';
+import { L as LabelTemplate } from './label-template-f156f33f.js';
+import { I as IsLoad } from './is-load-decorator-6784aa87.js';
+import './_commonjsHelpers-be0d4ec8.js';
+import './package-9887f1c0.js';
+import './colors-e1c31f79.js';
+import './string-helper-4a28f775.js';
+import './slot-template-46035685.js';
 
 var Months;
 (function (Months) {

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

@@ -2,11 +2,11 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-348b16ad.js';
-import { G as Generate } from './generate-e008f24f.js';
-import './package-00ece356.js';
-import './colors-44c95e7e.js';
-import './_commonjsHelpers-3016b722.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-0615c2b8.js';
+import { G as Generate } from './generate-903ca965.js';
+import './package-9887f1c0.js';
+import './colors-e1c31f79.js';
+import './_commonjsHelpers-be0d4ec8.js';
 
 const defaultCss = "@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}";