bromcom-ui 2.12.1-test.0 → 3.0.0-preview.0

package/dist/components/old-input.js

@@ -10,7 +10,7 @@ import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './label.js';
 import { d as defineCustomElement$1 } from './tooltip.js';
 
-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}";
+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-ui-color-background-base-default);border:1px solid var(--bcm-ui-color-border-default);border-radius:var(--bcm-ui-radius);vertical-align:middle;overflow:hidden;padding:0 var(--bcm-ui-spacing-2);cursor:text}.input-base.disabled{background-color:var(--bcm-ui-color-background-disabled-disable);cursor:not-allowed}.input-base.disabled .bcm-input-element{color:var(--bcm-ui-color-text-disabled)}.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{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.input-base:not(.disabled):hover{border-color:var(--bcm-ui-color-border-primary-info)}.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-ui-color-border-error)}.input-base.input-size-small{font-size:var(--bcm-ui-font-size-4)}.input-base.input-size-medium{font-size:var(--bcm-ui-font-size-5)}.input-base.input-size-large{font-size:var(--bcm-ui-font-size-6)}.error .input-base{border-color:var(--bcm-ui-color-border-error)}.input-base input{color:var(--bcm-ui-color-text-default);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;font-weight:500;cursor:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;font-size:inherit;line-height:inherit}.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;font-weight:400;color:var(--bcm-ui-color-text-placeholder);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-ui-color-text-placeholder)}.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-ui-color-text-placeholder)}.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:var(--bcm-ui-color-text-label)}.bcm-label.tw-text-1{font-size:var(--bcm-ui-font-size-3);line-height:var(--bcm-ui-line-height-3)}.bcm-label.tw-text-2{font-size:var(--bcm-ui-font-size-4);line-height:var(--bcm-ui-line-height-4)}.bcm-label.tw-text-3{font-size:var(--bcm-ui-font-size-5);line-height:var(--bcm-ui-line-height-5)}.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 = {
@@ -371,7 +371,7 @@ const BcmOldInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       'full-width': fullWidth,
       'error': captionType == 'error' ? true : false
     });
-    const baseClasses = classnames('input-base', 'input-' + size, {
+    const baseClasses = classnames('input-base', 'input-size-' + size, {
       'invalid': inValid,
       'unit': (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
       'focused': hasFocus,
@@ -381,7 +381,9 @@ const BcmOldInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     });
     const inputClass = size === 'large' ? 'size-3' : 'size-2';
     const hostClasses = classnames(this.hidden ? 'hidden' : null, this.noMargin ? 'no-margin' : null);
-    return (h(Host, { class: hostClasses }, h("div", { class: containerClasses }, label && h("div", null, h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required, htmlFor: this.inputId })), h("div", { class: baseClasses }, h("span", { class: "input-prefix" }, h("slot", { name: "prefix" }), unitPrefix && h("span", { class: classnames(inputClass, 'unit-prefix') }, unitPrefix)), h("input", { "bcm-internal-id": this._id, id: this.inputId, class: inputClass, ref: el => (this.inputElement = el), onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: this.handleChange, onInput: this.handleInput, maxLength: this.maxLength, type: type === 'password' && isPasswordVisible ? 'text' :
+    return (h(Host, { class: hostClasses }, h("div", { class: containerClasses }, label && h("div", null, h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required, htmlFor: this.inputId })), h("div", { class: baseClasses }, h("span", { class: "input-prefix" }, h("slot", { name: "prefix" }), unitPrefix && h("span", { class: classnames(inputClass, 'unit-prefix') }, unitPrefix)), h("input", { "bcm-internal-id": this._id, id: this.inputId,
+      // class={inputClass}
+      ref: el => (this.inputElement = el), onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: this.handleChange, onInput: this.handleInput, maxLength: this.maxLength, type: type === 'password' && isPasswordVisible ? 'text' :
         type === 'number' ? 'text' : type, placeholder: placeholder, value: type === 'number' && !this.hasFocus
         ? value + (value && (unit === null || unit === void 0 ? void 0 : unit.length) > 0 ? ' ' + unit : '')
         : value, disabled: this.disabled, readonly: this.readonly }), clearable && !this.disabled && (h("button", { class: "input-clear-button", onClick: this.handleClear }, h("svg", { style: { "fill": "#595959", "width": "14px", "height": "14px" }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512" }, h("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("button", { class: "input-password-toggle", onClick: this.changePasswordVisibility }, h("bcm-icon", { icon: isPasswordVisible ? "far fa-eye-invisible" : "far fa-eye" }))), Object.keys(defaultIcons).includes(type) && !noDefaultIcon && (h("span", { class: "input-suffix default-icon", innerHTML: defaultIcons[type] })), type === 'number' && (h("div", { class: classnames('caret-container', { 'unit': (unit === null || unit === void 0 ? void 0 : unit.length) > 0 }, { 'disabled': inValid }, { 'disabled': readonly }) }, h("span", { class: "caret", onClick: inValid == false && this.incrementNumber }, h("bcm-icon", { icon: "far fa-caret-up" })), h("span", { class: "caret", onClick: inValid == false && this.decrementNumber }, h("bcm-icon", { icon: "far fa-caret-down" })))), type !== 'number' && (h("span", { class: "input-suffix" }, h("slot", { name: "suffix" })))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption }))));

package/dist/components/old-popover-box.js

@@ -11,7 +11,7 @@ import { G as Generate } from './generate.js';
 import { N as NumberHelper } from './number-helper.js';
 import { S as StringHelper } from './string-helper.js';
 
-const oldPopoverBoxCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-popover-box{display:none;position:absolute;transition:transform 0.2s ease-in-out;}.bcm-popover-box .bcm-pop-box{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-size:10px;line-height:calc(10px + 8px);box-shadow:0 4px 12px 2px rgba(17, 24, 38, 0.1);border-radius:4px;position:absolute;box-sizing:border-box;background-color:#FFFFFF;border:1px solid #FFFFFF;z-index:-99999;overflow:hidden;visibility:hidden;width:fit-content;position:absolute;display:block;overflow:hidden;visibility:hidden;z-index:-99999;filter:drop-shadow(0px 1px 6px rgba(0, 0, 0, 0.25))}.bcm-popover-box .bcm-pop-box.bcm-pop-open{overflow:unset;visibility:visible;height:unset}.bcm-popover-box .bcm-pop-box .bcm-pop-heading,.bcm-popover-box .bcm-pop-box .bcm-pop-content{display:block}.bcm-popover-box .bcm-pop-box .bcm-pop-heading:not(:empty){padding:4px 16px;border-bottom:1px solid #D9D9D9;color:var(--bcm-color-grey-9)}.bcm-popover-box .bcm-pop-box .bcm-pop-content:not(:empty){padding:8px 16px;color:var(--bcm-color-grey-8)}.bcm-popover-box::after{content:\"\";position:absolute;display:none;border:6px solid;z-index:10900;pointer-events:none}.bcm-popover-box.bcm-pop-open{display:block;z-index:10900}.bcm-popover-box.bcm-pop-open .bcm-pop-box{z-index:10900;overflow:unset;visibility:unset}.bcm-popover-box.bcm-pop-open::after{display:block}.bcm-popover-box.top .bcm-pop-box{bottom:100%;margin-bottom:16px}.bcm-popover-box.top::after{bottom:100%;margin-bottom:4px;border-color:#FFFFFF transparent transparent transparent}.bcm-popover-box.bottom .bcm-pop-box{top:100%;margin-top:16px}.bcm-popover-box.bottom::after{top:100%;margin-top:4px;border-color:transparent transparent #FFFFFF transparent}.bcm-popover-box.left .bcm-pop-box{right:100%;margin-right:16px}.bcm-popover-box.left::after{right:100%;margin-right:4px;border-color:transparent transparent transparent #FFFFFF}.bcm-popover-box.right .bcm-pop-box{left:100%;margin-left:16px}.bcm-popover-box.right::after{left:100%;margin-left:4px;border-color:transparent #FFFFFF transparent transparent}.bcm-popover-box.top.center .bcm-pop-box,.bcm-popover-box.bottom.center .bcm-pop-box{left:50%;transform:translateX(-50%)}.bcm-popover-box.top.center::after,.bcm-popover-box.bottom.center::after{left:50%;transform:translateX(-50%)}.bcm-popover-box.top.start .bcm-pop-box,.bcm-popover-box.bottom.start .bcm-pop-box{left:0}.bcm-popover-box.top.start::after,.bcm-popover-box.bottom.start::after{left:16px}.bcm-popover-box.top.end .bcm-pop-box,.bcm-popover-box.bottom.end .bcm-pop-box{right:0}.bcm-popover-box.top.end::after,.bcm-popover-box.bottom.end::after{right:16px}.bcm-popover-box.left.center .bcm-pop-box,.bcm-popover-box.right.center .bcm-pop-box{top:50%;transform:translateY(-50%)}.bcm-popover-box.left.center::after,.bcm-popover-box.right.center::after{top:50%;transform:translateY(-50%)}.bcm-popover-box.left.start .bcm-pop-box,.bcm-popover-box.right.start .bcm-pop-box{top:0}.bcm-popover-box.left.start::after,.bcm-popover-box.right.start::after{top:12px}.bcm-popover-box.left.end .bcm-pop-box,.bcm-popover-box.right.end .bcm-pop-box{bottom:0}.bcm-popover-box.left.end::after,.bcm-popover-box.right.end::after{bottom:12px}.bcm-popover-box.top{transform:translateY(1px)}.bcm-popover-box.bottom{transform:translateY(-1px)}.bcm-popover-box.left{transform:translateX(1px)}.bcm-popover-box.right{transform:translateX(-1px)}.bcm-popover-box.top.bcm-pop-open,.bcm-popover-box.bottom.bcm-pop-open{transform:translateY(0)}.bcm-popover-box.left.bcm-pop-open,.bcm-popover-box.right.bcm-pop-open{transform:translateX(0)}.bcm-popover-box.bcm-pop-linked.top .bcm-pop-box{margin:0 0 2px 0}.bcm-popover-box.bcm-pop-linked.bottom .bcm-pop-box{margin:2px 0 0 0}.bcm-popover-box.bcm-pop-linked.left .bcm-pop-box{margin:0 2px 0 0}.bcm-popover-box.bcm-pop-linked.right .bcm-pop-box{margin:0 0 0 2px}.bcm-popover-box.bcm-pop-linked .bcm-pop-box{filter:unset;border-radius:8px;box-shadow:0 2px 6px 1px rgba(17, 24, 38, 0.1)}.bcm-popover-box.bcm-pop-linked::after{display:none}";
+const oldPopoverBoxCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-popover-box{display:none;position:absolute;transition:transform 0.2s ease-in-out;}.bcm-popover-box .bcm-pop-box{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-size:10px;line-height:calc(10px + 8px);box-shadow:var(--bcm-ui-box-shadow-4);border-radius:var(--bcm-ui-radius);position:absolute;box-sizing:border-box;background-color:#FFFFFF;border:1px solid #FFFFFF;color:var(--bcm-ui-color-text-default);z-index:-99999;overflow:hidden;visibility:hidden;width:fit-content;position:absolute;display:block;overflow:hidden;visibility:hidden;z-index:-99999;filter:drop-shadow(0px 1px 6px rgba(0, 0, 0, 0.25))}.bcm-popover-box .bcm-pop-box.bcm-pop-open{overflow:unset;visibility:visible;height:unset}.bcm-popover-box .bcm-pop-box .bcm-pop-heading,.bcm-popover-box .bcm-pop-box .bcm-pop-content{display:block}.bcm-popover-box .bcm-pop-box .bcm-pop-heading:not(:empty){padding:4px 16px;border-bottom:1px solid #D9D9D9;color:var(--bcm-color-grey-9)}.bcm-popover-box .bcm-pop-box .bcm-pop-content:not(:empty){padding:8px 16px;color:var(--bcm-color-grey-8)}.bcm-popover-box::after{content:\"\";position:absolute;display:none;border:6px solid;z-index:10900;pointer-events:none}.bcm-popover-box.bcm-pop-open{display:block;z-index:10900}.bcm-popover-box.bcm-pop-open .bcm-pop-box{z-index:10900;overflow:unset;visibility:unset}.bcm-popover-box.bcm-pop-open::after{display:block}.bcm-popover-box.top .bcm-pop-box{bottom:100%;margin-bottom:16px}.bcm-popover-box.top::after{bottom:100%;margin-bottom:4px;border-color:#FFFFFF transparent transparent transparent}.bcm-popover-box.bottom .bcm-pop-box{top:100%;margin-top:16px}.bcm-popover-box.bottom::after{top:100%;margin-top:4px;border-color:transparent transparent #FFFFFF transparent}.bcm-popover-box.left .bcm-pop-box{right:100%;margin-right:16px}.bcm-popover-box.left::after{right:100%;margin-right:4px;border-color:transparent transparent transparent #FFFFFF}.bcm-popover-box.right .bcm-pop-box{left:100%;margin-left:16px}.bcm-popover-box.right::after{left:100%;margin-left:4px;border-color:transparent #FFFFFF transparent transparent}.bcm-popover-box.top.center .bcm-pop-box,.bcm-popover-box.bottom.center .bcm-pop-box{left:50%;transform:translateX(-50%)}.bcm-popover-box.top.center::after,.bcm-popover-box.bottom.center::after{left:50%;transform:translateX(-50%)}.bcm-popover-box.top.start .bcm-pop-box,.bcm-popover-box.bottom.start .bcm-pop-box{left:0}.bcm-popover-box.top.start::after,.bcm-popover-box.bottom.start::after{left:16px}.bcm-popover-box.top.end .bcm-pop-box,.bcm-popover-box.bottom.end .bcm-pop-box{right:0}.bcm-popover-box.top.end::after,.bcm-popover-box.bottom.end::after{right:16px}.bcm-popover-box.left.center .bcm-pop-box,.bcm-popover-box.right.center .bcm-pop-box{top:50%;transform:translateY(-50%)}.bcm-popover-box.left.center::after,.bcm-popover-box.right.center::after{top:50%;transform:translateY(-50%)}.bcm-popover-box.left.start .bcm-pop-box,.bcm-popover-box.right.start .bcm-pop-box{top:0}.bcm-popover-box.left.start::after,.bcm-popover-box.right.start::after{top:12px}.bcm-popover-box.left.end .bcm-pop-box,.bcm-popover-box.right.end .bcm-pop-box{bottom:0}.bcm-popover-box.left.end::after,.bcm-popover-box.right.end::after{bottom:12px}.bcm-popover-box.top{transform:translateY(1px)}.bcm-popover-box.bottom{transform:translateY(-1px)}.bcm-popover-box.left{transform:translateX(1px)}.bcm-popover-box.right{transform:translateX(-1px)}.bcm-popover-box.top.bcm-pop-open,.bcm-popover-box.bottom.bcm-pop-open{transform:translateY(0)}.bcm-popover-box.left.bcm-pop-open,.bcm-popover-box.right.bcm-pop-open{transform:translateX(0)}.bcm-popover-box.bcm-pop-linked.top .bcm-pop-box{margin:0 0 2px 0}.bcm-popover-box.bcm-pop-linked.bottom .bcm-pop-box{margin:2px 0 0 0}.bcm-popover-box.bcm-pop-linked.left .bcm-pop-box{margin:0 2px 0 0}.bcm-popover-box.bcm-pop-linked.right .bcm-pop-box{margin:0 0 0 2px}.bcm-popover-box.bcm-pop-linked .bcm-pop-box{filter:unset;border-radius:8px;box-shadow:0 2px 6px 1px rgba(17, 24, 38, 0.1)}.bcm-popover-box.bcm-pop-linked::after{display:none}";
 
 const OldBcmPopoverBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/popconfirm-box.js

@@ -4,20 +4,13 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-import { C as ColorHelper } from './color-helper.js';
 import { G as Generate } from './generate.js';
 import { S as StringHelper } from './string-helper.js';
 import { s as setPosition } from './popover-placement.js';
-import { d as defineCustomElement$3 } from './button.js';
-import { d as defineCustomElement$2 } from './icon.js';
-import { d as defineCustomElement$1 } from './text.js';
+import { d as defineCustomElement$1 } from './button.js';
 
-const popconfirmBoxCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-popconfirm-box{position:absolute;transition:transform 0.2s ease-in-out;}.bcm-popconfirm-box .bcm-pop-box{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-size:10px;line-height:calc(10px + 8px);box-shadow:0 4px 12px 2px rgba(17, 24, 38, 0.1);border-radius:4px;position:absolute;box-sizing:border-box;background-color:#FFFFFF;border:1px solid #FFFFFF;z-index:-99999;overflow:hidden;visibility:hidden;width:230px;filter:drop-shadow(0px 1px 6px rgba(0, 0, 0, 0.25));padding:8px 16px}.bcm-popconfirm-box .bcm-pop-box .bcm-pop-content{display:flex;flex-direction:row;align-items:flex-start}.bcm-popconfirm-box .bcm-pop-box .bcm-pop-content-icon{margin-right:8px;min-width:16px}.bcm-popconfirm-box .bcm-pop-box .bcm-pop-content-text{display:flex;flex-direction:row;align-items:center;text-align:left;padding-top:1px}.bcm-popconfirm-box .bcm-pop-box .bcm-pop-buttons{display:flex;justify-content:flex-end;margin-top:8px}.bcm-popconfirm-box .bcm-pop-box .bcm-pop-buttons bcm-button:first-child{margin-right:8px}.bcm-popconfirm-box::after{content:\"\";position:absolute;display:none;border:6px solid;z-index:10900;pointer-events:none}.bcm-popconfirm-box.bcm-pop-open{display:block;z-index:10900}.bcm-popconfirm-box.bcm-pop-open .bcm-pop-box{z-index:10900;overflow:unset;visibility:unset}.bcm-popconfirm-box.bcm-pop-open::after{display:block}.bcm-popconfirm-box.top .bcm-pop-box{bottom:100%;margin-bottom:16px}.bcm-popconfirm-box.top::after{bottom:100%;margin-bottom:4px;border-color:#FFFFFF transparent transparent transparent}.bcm-popconfirm-box.bottom .bcm-pop-box{top:100%;margin-top:16px}.bcm-popconfirm-box.bottom::after{top:100%;margin-top:4px;border-color:transparent transparent #FFFFFF transparent}.bcm-popconfirm-box.left .bcm-pop-box{right:100%;margin-right:16px}.bcm-popconfirm-box.left::after{right:100%;margin-right:4px;border-color:transparent transparent transparent #FFFFFF}.bcm-popconfirm-box.right .bcm-pop-box{left:100%;margin-left:16px}.bcm-popconfirm-box.right::after{left:100%;margin-left:4px;border-color:transparent #FFFFFF transparent transparent}.bcm-popconfirm-box.top.center .bcm-pop-box,.bcm-popconfirm-box.bottom.center .bcm-pop-box{left:50%;transform:translateX(-50%)}.bcm-popconfirm-box.top.center::after,.bcm-popconfirm-box.bottom.center::after{left:50%;transform:translateX(-50%)}.bcm-popconfirm-box.top.start .bcm-pop-box,.bcm-popconfirm-box.bottom.start .bcm-pop-box{left:0}.bcm-popconfirm-box.top.start::after,.bcm-popconfirm-box.bottom.start::after{left:16px}.bcm-popconfirm-box.top.end .bcm-pop-box,.bcm-popconfirm-box.bottom.end .bcm-pop-box{right:0}.bcm-popconfirm-box.top.end::after,.bcm-popconfirm-box.bottom.end::after{right:16px}.bcm-popconfirm-box.left.center .bcm-pop-box,.bcm-popconfirm-box.right.center .bcm-pop-box{top:50%;transform:translateY(-50%)}.bcm-popconfirm-box.left.center::after,.bcm-popconfirm-box.right.center::after{top:50%;transform:translateY(-50%)}.bcm-popconfirm-box.left.start .bcm-pop-box,.bcm-popconfirm-box.right.start .bcm-pop-box{top:0}.bcm-popconfirm-box.left.start::after,.bcm-popconfirm-box.right.start::after{top:12px}.bcm-popconfirm-box.left.end .bcm-pop-box,.bcm-popconfirm-box.right.end .bcm-pop-box{bottom:0}.bcm-popconfirm-box.left.end::after,.bcm-popconfirm-box.right.end::after{bottom:12px}.bcm-popconfirm-box.top{transform:translateY(1px)}.bcm-popconfirm-box.bottom{transform:translateY(-1px)}.bcm-popconfirm-box.left{transform:translateX(1px)}.bcm-popconfirm-box.right{transform:translateX(-1px)}.bcm-popconfirm-box.top.bcm-pop-open,.bcm-popconfirm-box.bottom.bcm-pop-open{transform:translateY(0)}.bcm-popconfirm-box.left.bcm-pop-open,.bcm-popconfirm-box.right.bcm-pop-open{transform:translateX(0)}";
+const popconfirmBoxCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-popconfirm-box{position:absolute;transition:transform 0.2s ease-in-out;}.bcm-popconfirm-box .bcm-pop-box{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-size:10px;line-height:calc(10px + 8px);box-shadow:var(--bcm-ui-box-shadow-4);border-radius:var(--bcm-ui-radius);position:absolute;box-sizing:border-box;background-color:#FFFFFF;border:1px solid #FFFFFF;color:var(--bcm-ui-color-text-default);z-index:-99999;overflow:hidden;visibility:hidden;width:256px;filter:drop-shadow(0px 1px 6px rgba(0, 0, 0, 0.25));padding:var(--bcm-ui-spacing-4)}.bcm-popconfirm-box .bcm-pop-box .bcm-pop-content{display:flex;flex-direction:row;align-items:flex-start}.bcm-popconfirm-box .bcm-pop-box .bcm-pop-content-icon{margin-right:var(--bcm-ui-spacing-2-5);min-width:16px;color:var(--bcm-ui-color-text-default);font-size:var(--bcm-ui-font-size-5);line-height:var(--bcm-ui-line-height-5)}.bcm-popconfirm-box .bcm-pop-box .bcm-pop-content-icon.error{color:var(--bcm-ui-color-text-error)}.bcm-popconfirm-box .bcm-pop-box .bcm-pop-content-icon.warning{color:var(--bcm-ui-color-text-warning)}.bcm-popconfirm-box .bcm-pop-box .bcm-pop-content-icon.info{color:var(--bcm-ui-color-text-primary)}.bcm-popconfirm-box .bcm-pop-box .bcm-pop-content-text{display:flex;flex-direction:row;align-items:center;text-align:left;padding-top:1px;color:var(--bcm-ui-color-text-default);font-size:var(--bcm-ui-font-size-4);line-height:var(--bcm-ui-line-height-4)}.bcm-popconfirm-box .bcm-pop-box .bcm-pop-buttons{display:flex;justify-content:flex-end;margin-top:var(--bcm-ui-spacing-6)}.bcm-popconfirm-box .bcm-pop-box .bcm-pop-buttons bcm-button:first-child{margin-right:8px}.bcm-popconfirm-box::after{content:\"\";position:absolute;display:none;border:6px solid;z-index:10900;pointer-events:none}.bcm-popconfirm-box.bcm-pop-open{display:block;z-index:10900}.bcm-popconfirm-box.bcm-pop-open .bcm-pop-box{z-index:10900;overflow:unset;visibility:unset}.bcm-popconfirm-box.bcm-pop-open::after{display:block}.bcm-popconfirm-box.top .bcm-pop-box{bottom:100%;margin-bottom:16px}.bcm-popconfirm-box.top::after{bottom:100%;margin-bottom:4px;border-color:#FFFFFF transparent transparent transparent}.bcm-popconfirm-box.bottom .bcm-pop-box{top:100%;margin-top:16px}.bcm-popconfirm-box.bottom::after{top:100%;margin-top:4px;border-color:transparent transparent #FFFFFF transparent}.bcm-popconfirm-box.left .bcm-pop-box{right:100%;margin-right:16px}.bcm-popconfirm-box.left::after{right:100%;margin-right:4px;border-color:transparent transparent transparent #FFFFFF}.bcm-popconfirm-box.right .bcm-pop-box{left:100%;margin-left:16px}.bcm-popconfirm-box.right::after{left:100%;margin-left:4px;border-color:transparent #FFFFFF transparent transparent}.bcm-popconfirm-box.top.center .bcm-pop-box,.bcm-popconfirm-box.bottom.center .bcm-pop-box{left:50%;transform:translateX(-50%)}.bcm-popconfirm-box.top.center::after,.bcm-popconfirm-box.bottom.center::after{left:50%;transform:translateX(-50%)}.bcm-popconfirm-box.top.start .bcm-pop-box,.bcm-popconfirm-box.bottom.start .bcm-pop-box{left:0}.bcm-popconfirm-box.top.start::after,.bcm-popconfirm-box.bottom.start::after{left:16px}.bcm-popconfirm-box.top.end .bcm-pop-box,.bcm-popconfirm-box.bottom.end .bcm-pop-box{right:0}.bcm-popconfirm-box.top.end::after,.bcm-popconfirm-box.bottom.end::after{right:16px}.bcm-popconfirm-box.left.center .bcm-pop-box,.bcm-popconfirm-box.right.center .bcm-pop-box{top:50%;transform:translateY(-50%)}.bcm-popconfirm-box.left.center::after,.bcm-popconfirm-box.right.center::after{top:50%;transform:translateY(-50%)}.bcm-popconfirm-box.left.start .bcm-pop-box,.bcm-popconfirm-box.right.start .bcm-pop-box{top:0}.bcm-popconfirm-box.left.start::after,.bcm-popconfirm-box.right.start::after{top:12px}.bcm-popconfirm-box.left.end .bcm-pop-box,.bcm-popconfirm-box.right.end .bcm-pop-box{bottom:0}.bcm-popconfirm-box.left.end::after,.bcm-popconfirm-box.right.end::after{bottom:12px}.bcm-popconfirm-box.top{transform:translateY(1px)}.bcm-popconfirm-box.bottom{transform:translateY(-1px)}.bcm-popconfirm-box.left{transform:translateX(1px)}.bcm-popconfirm-box.right{transform:translateX(-1px)}.bcm-popconfirm-box.top.bcm-pop-open,.bcm-popconfirm-box.bottom.bcm-pop-open{transform:translateY(0)}.bcm-popconfirm-box.left.bcm-pop-open,.bcm-popconfirm-box.right.bcm-pop-open{transform:translateX(0)}";
 
-const statuses = {
-  error: ['fal fa-times-circle', 'red-6'],
-  warning: ['fal fa-exclamation-circle', 'warmyellow-6'],
-};
 const BcmPopconfirmBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -95,12 +88,19 @@ const BcmPopconfirmBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
   }
   render() {
     const { message, cancelText, okeyText, open, placement_string, status } = this;
-    const statusies = statuses[status];
+    // const statuses = {
+    //     error: ['fa-solid fa-circle-xmark', 'red-6'],
+    //     warning: ['fa-solid fa-triangle-exclamation', 'warmyellow-6'],
+    // }
     const boxClasses = classnames('bcm-pop-box');
     const hostClasses = classnames('bcm-popconfirm-box', placement_string, {
       'bcm-pop-open': open,
     });
-    return (h(Host, { class: hostClasses }, h("div", { class: boxClasses }, h("div", { class: "bcm-pop-content" }, h("div", { class: "bcm-pop-content-icon size-3", style: { color: ColorHelper.convertColorToHex(statusies[1]) } }, h("bcm-icon", { icon: statusies[0] })), h("div", { class: "bcm-pop-content-text" }, h("bcm-text", { scale: "size-2", innerHTML: message }))), h("div", { class: "bcm-pop-buttons" }, h("bcm-button", { size: "small", onClick: () => this.handleCancel(), outline: true }, cancelText), h("bcm-button", { size: "small", onClick: () => this.handleConfirm() }, okeyText)))));
+    return (h(Host, { class: hostClasses }, h("div", { class: boxClasses }, h("div", { class: "bcm-pop-content" }, h("div", { class: classnames('bcm-pop-content-icon', status) }, h("i", { class: classnames({
+        'fa-solid fa-circle-xmark': status === 'error',
+        'fa-solid fa-triangle-exclamation': status === 'warning',
+        'fa-solid fa-info-circle': status === 'info',
+      }) })), h("div", { class: "bcm-pop-content-text" }, message)), h("div", { class: "bcm-pop-buttons" }, h("bcm-button", { size: "small", onClick: () => this.handleCancel(), outline: true }, cancelText), h("bcm-button", { size: "small", onClick: () => this.handleConfirm() }, okeyText)))));
   }
   get el() { return this; }
   static get style() { return popconfirmBoxCss; }
@@ -123,7 +123,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["bcm-popconfirm-box", "bcm-button", "bcm-icon", "bcm-text"];
+  const components = ["bcm-popconfirm-box", "bcm-button"];
   components.forEach(tagName => { switch (tagName) {
     case "bcm-popconfirm-box":
       if (!customElements.get(tagName)) {
@@ -131,16 +131,6 @@ function defineCustomElement() {
       }
       break;
     case "bcm-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "bcm-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "bcm-text":
       if (!customElements.get(tagName)) {
         defineCustomElement$1();
       }

package/dist/components/popover.style.js

@@ -0,0 +1,108 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { s as snq } from './generate.js';
+import { c as ce } from './index4.js';
+
+class DateTimeHelper {
+}
+DateTimeHelper.convertTimeStampToDate = (timestamp) => new Date(timestamp);
+
+class Validators {
+}
+Validators.compareTwoArrayIsSame = (arr1, arr2) => snq(() => arr1.length === arr2.length && arr1.every((v, i) => v === arr2[i]));
+Validators.isEmailValid = (str) => /^(([^<>()\[\]\\.,;:\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,}))$/.test(str);
+Validators.isUrlValid = (str) => /^(?:(?:https?|ftp):\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:\/\S*)?$/i.test(str);
+Validators.isNumberValid = (str) => /^[+-]?\d+$/.test(str);
+Validators.isNumberFloatValid = (str) => /^\d+(\.\d+)?$/.test(str);
+Validators.isPhoneValid = (str) => /^(?=.*[0-9])[- +()0-9]+$/.test(str);
+Validators.pattern = (str, pattern) => new RegExp(pattern).test(str);
+Validators.isValidate = (str, type) => {
+  switch (type) {
+    case 'email':
+      return Validators.isEmailValid(str);
+    case 'url':
+      return Validators.isUrlValid(str);
+    case 'number':
+      return Validators.isNumberValid(str) || Validators.isNumberFloatValid(str);
+    case 'phone':
+      return Validators.isPhoneValid(str);
+    default:
+      return true;
+  }
+};
+
+const tooltipStyle = ce({
+  slots: {
+    host: [
+      "bcm-tooltip tw-inline-flex tw-h-fit tw-w-fit",
+    ],
+    tooltip: [
+      "bcm-ui-element bcm-ui-content-display",
+      "tw-whitespace-normal tw-break-words tw-font-semibold",
+      "tw-absolute tw-top-0 tw-left-0 tw-z-tooltip",
+      "tw-opacity-0 tw-transition-opacity tw-duration-300",
+      "tw-max-w-xs tw-py-1 tw-px-3",
+      "tw-pointer-events-none",
+      "tw-block tw-rounded-md",
+      "tw-bg-[--bcm-tooltip-bg] tw-text-[--bcm-tooltip-text]"
+    ]
+  },
+  variants: {
+    size: {
+      small: {
+        tooltip: "tw-text-size-3",
+      },
+      medium: {
+        tooltip: "tw-text-size-4",
+      },
+      large: {
+        tooltip: "tw-text-size-5",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+  },
+});
+
+const popoverStyle = ce({
+  slots: {
+    host: [
+      "bcm-popover tw-inline-flex tw-h-fit tw-w-fit",
+    ],
+    popover: [
+      "bcm-ui-element bcm-ui-content-display",
+      "tw-whitespace-normal tw-break-words",
+      "tw-absolute tw-top-0 tw-left-0 tw-z-tooltip",
+      "tw-opacity-0 tw-transition-opacity tw-duration-300",
+      "tw-max-w-xs",
+      "tw-pointer-events-none",
+      "tw-block tw-rounded-md",
+      "tw-bg-[--bcm-popover-bg] tw-text-[--bcm-popover-text]",
+      "tw-shadow-3"
+    ],
+    messageStyle: "tw-font-semibold tw-w-full tw-px-3 tw-py-1.5",
+    contentStyle: "tw-border-0 tw-border-t tw-border-solid tw-border-[--bcm-popover-text]",
+    dividerStyle: "tw-font-normal tw-px-3 tw-py-1.5",
+  },
+  variants: {
+    size: {
+      small: {
+        popover: "tw-text-size-3",
+      },
+      medium: {
+        popover: "tw-text-size-4",
+      },
+      large: {
+        popover: "tw-text-size-5",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+  },
+});
+
+export { DateTimeHelper as D, Validators as V, popoverStyle as p, tooltipStyle as t };

package/dist/components/radio.js

@@ -3,14 +3,79 @@
  * Copyright (c) Bromcom.
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { B as Bcm } from './bcm.js';
+import { a as Bcm } from './bcm.js';
 import './color-helper.js';
-import './validators.js';
+import './popover.style.js';
 import { G as Generate } from './generate.js';
 import './number-helper.js';
 import './string-helper.js';
 import './element-dragger.js';
-import { c as classnames } from './index2.js';
+import { c as ce } from './index4.js';
+
+const radioStyle = ce({
+  slots: {
+    host: [
+      "bcm-radio",
+      "bcm-ui-element bcm-ui-inputs",
+      "tw-cursor-pointer tw-font-sans tw-mb-1.5 tw-mt-1",
+    ],
+    label: ["tw-inline-flex tw-flex-row tw-gap-2 tw-mr-2 tw-items-center"],
+    input: [
+      "tw-flex tw-items-center tw-justify-center",
+      "tw-appearance-none tw-border tw-border-solid tw-rounded-full tw-cursor-pointer tw-transition tw-ease-in-out",
+      "tw-m-0",
+      "before:tw-content-[''] before:tw-absolute before:tw-rounded-full",
+      "focus:tw-outline-none focus:tw-shadow-outline",
+      // default
+      "tw-border-[--bcm-radio-border] tw-bg-[--bcm-radio-bg]",
+      "checked:tw-border-[--bcm-radio-checked-border]",
+      "checked:before:tw-bg-[--bcm-radio-checked-dot]",
+    ],
+  },
+  variants: {
+    size: {
+      small: {
+        host: "tw-text-size-4",
+        input: "tw-w-3.5 tw-h-3.5 before:tw-w-2 before:tw-h-2"
+      },
+      medium: {
+        host: "tw-text-size-5",
+        input: "tw-w-4 tw-h-4 before:tw-w-2.5 before:tw-h-2.5"
+      },
+      large: {
+        host: "tw-text-size-6",
+        input: "tw-w-4.5 tw-h-4.5 before:tw-w-3 before:tw-h-3"
+      },
+    },
+    disabled: {
+      true: {
+        host: "tw-cursor-not-allowed tw-text-color-disabled",
+        label: "tw-cursor-not-allowed ",
+        input: [
+          "disabled:tw-border-slate-400 disabled:tw-bg-slate-200 disabled:tw-cursor-not-allowed",
+          "disabled:checked:tw-border-slate-400",
+          "disabled:checked:before:tw-bg-slate-400",
+        ]
+      },
+      false: {
+        host: "tw-cursor-pointer tw-text-[--bcm-radio-text]",
+        label: "tw-cursor-pointer",
+        input: [
+          // hover
+          "hover:tw-border-[--bcm-radio-border-hover]",
+          "hover:checked:tw-border-[--bcm-radio-checked-border-hover]",
+          "hover:checked:before:tw-bg-[--bcm-radio-checked-dot-hover]",
+        ]
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+    disabled: false,
+  },
+});
+
+const radioCss = "@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}:root{--bcm-radio-text:var(--bcm-ui-color-text-default);--bcm-radio-border:var(--bcm-ui-color-border-default);--bcm-radio-border-hover:var(--bcm-ui-color-border-primary-info);--bcm-radio-bg:var(--bcm-ui-color-background-default-default);--bcm-radio-checked-border:var(--bcm-ui-color-background-primary-info-default);--bcm-radio-checked-dot:var(--bcm-ui-color-background-primary-info-default);--bcm-radio-checked-border-hover:var(--bcm-ui-color-background-primary-info-hover);--bcm-radio-checked-dot-hover:var(--bcm-ui-color-background-primary-info-hover)}";
 
 const BcmRadio = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -28,29 +93,19 @@ const BcmRadio = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   render() {
     const { value, size, disabled, checked, _id, color } = this;
-    return (h(Host, { class: classnames("tw-cursor-pointer tw-font-sans tw-mb-1.5 tw-mt-1", {
-        "tw-cursor-pointer tw-text-slate-600": !disabled,
-        "tw-cursor-not-allowed tw-text-slate-400": disabled,
-        "tw-text-1": size === Bcm.Size.small,
-        "tw-text-2.5": size === Bcm.Size.medium,
-        "tw-text-4": size === Bcm.Size.large,
-      }), style: (Generate.getTwColor(color)) }, h("label", { class: classnames("tw-inline-flex tw-flex-row tw-gap-2 tw-mr-2 tw-items-center", disabled ? "tw-cursor-not-allowed" : "tw-cursor-pointer"), htmlFor: _id + '-input' }, h("input", { role: "radio", "aria-label": "radio", id: _id + '-input', type: "radio", value: value, checked: checked, disabled: disabled, class: classnames("tw-flex tw-items-center tw-justify-center", "tw-relative tw-appearance-none tw-border tw-border-solid tw-rounded-full tw-cursor-pointer tw-transition tw-ease-in-out ", "tw-m-0", "before:tw-content-[''] before:tw-absolute before:tw-rounded-full", {
-        "tw-w-4 tw-h-4 before:tw-w-2.5 before:tw-h-2.5": size === Bcm.Size.medium,
-        "tw-w-3.5 tw-h-3.5 before:tw-w-2 before:tw-h-2": size === Bcm.Size.small,
-        "tw-w-4.5 tw-h-4.5 before:tw-w-3 before:tw-h-3": size === Bcm.Size.large,
-      }, "focus:tw-outline-none focus:tw-shadow-outline", 
-      // default
-      `tw-border-slate-400 tw-bg-slate-50`, `checked:tw-border-default-500`, `checked:before:tw-bg-default-500`, 
-      // disabled
-      `disabled:tw-border-slate-400 disabled:tw-bg-slate-200 disabled:tw-cursor-not-allowed`, `disabled:checked:tw-border-slate-400`, `disabled:checked:before:tw-bg-slate-400`, !disabled && classnames(
-      // hover
-      `hover:tw-border-default-600`, `hover:checked:tw-border-default-600`, `hover:checked:before:tw-bg-default-600`, 
-      // focus-visible 
-      `focus-visible:tw-border-default-800 focus-visible:tw-shadow-sm`, `focus-visible:checked:tw-border-default-800`, `focus-visible:checked:before:tw-bg-default-800`, 
-      // active
-      `active:tw-border-default-700`, `active:checked:tw-border-default-700`, `active:checked:before:tw-bg-default-700`)), onChange: () => this.radioChange.emit(), onFocus: () => this.focus.emit(), onBlur: () => this.blur.emit() }), h("slot", null))));
+    const style = Object.assign({}, color && Generate.getTwColor({
+      color: color,
+      tones: {
+        700: ["border-hover", "checked-dot", "checked-border"],
+        800: ["checked-border-hover", "checked-dot-hover"],
+      },
+      variable: "--bcm-radio",
+    }));
+    const { host, label, input } = radioStyle({ size, disabled });
+    return (h(Host, { class: host(), style: style }, h("label", { class: label(), htmlFor: _id + '-input' }, h("input", { role: "radio", "aria-label": "radio", id: _id + '-input', type: "radio", value: value, checked: checked, disabled: disabled, class: input(), onChange: () => this.radioChange.emit(), onFocus: () => this.focus.emit(), onBlur: () => this.blur.emit() }), h("slot", null))));
   }
   get el() { return this; }
+  static get style() { return radioCss; }
 }, [4, "bcm-radio", {
     "_id": [513, "id"],
     "checked": [4],

package/dist/components/rc-overflow.js

@@ -4,7 +4,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
 import './color-helper.js';
-import './validators.js';
+import './popover.style.js';
 import { G as Generate } from './generate.js';
 import './number-helper.js';
 import { S as StringHelper } from './string-helper.js';

package/dist/components/rc-picker.js

@@ -3,7 +3,7 @@
  * Copyright (c) Bromcom.
  */
 import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent } from '@stencil/core/internal/client';
-import { B as Bcm } from './bcm.js';
+import { a as Bcm } from './bcm.js';
 import { u as useEvent, a as useLayoutUpdateEffect, _ as _typeof$3, c as canUseDom, b as useLayoutEffect, s as supportRef, d as useComposeRef, i as isDOM, w as wrapperRaf, f as fillRef, e as findDOMNode, R as RefResizeObserver, g as composeRef, h as warningOnce, F as ForwardOverflow } from './Overflow.js';
 import { r as react, a as reactDom, R as React } from './index3.js';
 import { c as classnames } from './index2.js';
@@ -14471,7 +14471,7 @@ exports.default = locale;
 
 const enUS = /*@__PURE__*/getDefaultExportFromCjs(en_US);
 
-const rcPickerCss = "@charset \"UTF-8\";@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-date{font-family:\"Inter\", sans-serif;font-size:14px;line-height:22px;font-weight:500;display:flex;align-items:stretch;flex-direction:row;background-color:#fff;border:1px solid #cbd5e1;color:#334155;border-radius:4px;box-sizing:border-box;cursor:text;padding:0 0 0 4px;position:relative;width:100%;}.bcm-date--large{height:40px;font-size:16px}.bcm-date--medium{height:32px;font-size:14px}.bcm-date--small{height:24px;font-size:12px}.bcm-date:hover{border:1px solid #4293cf}.bcm-date:hover.bcm-date--existed{}.bcm-date:hover.bcm-date--existed .bcm-date-clear{visibility:visible;opacity:1}.bcm-date:hover.bcm-date--existed .bcm-date-suffix{opacity:0}.bcm-date-focused{background-color:#f8fafc}.bcm-date-suffix{color:#334155}.bcm-date-suffix:not(:empty){display:flex;align-items:center;justify-content:center}.bcm-date-suffix::before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;font-family:\"Font Awesome 6 Pro\";font-weight:400;line-height:1;box-sizing:border-box;padding:0 4px;cursor:pointer}.bcm-date--datetime .bcm-date-suffix::before{content:\"\\e0d2\"}.bcm-date--date .bcm-date-suffix::before{content:\"\\f133\"}.bcm-date--time .bcm-date-suffix::before{content:\"\\f017\"}.bcm-date-input{position:relative;display:inline-flex;width:100%;padding:0 4px;color:#334155}.bcm-date-input-placeholder{color:#94a3b8}.bcm-date-input>input{color:inherit;width:100%;flex:1;border:none;background:transparent;box-shadow:unset;line-height:22px;font-family:\"Inter\", sans-serif;cursor:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;overflow:hidden;text-overflow:ellipsis;font-weight:500}.bcm-date-input>input::placeholder{font-family:\"Inter\", sans-serif;color:#cbd5e1;user-select:none}.bcm-date-input>input::-webkit-search-decoration,.bcm-date-input>input::-webkit-search-cancel-button,.bcm-date-input>input::-webkit-search-results-button,.bcm-date-input>input::-webkit-search-results-decoration,.bcm-date-input>input::-webkit-calendar-picker-indicator,.bcm-date-input>input::-webkit-inner-spin-button,.bcm-date-input>input::-webkit-outer-spin-button{-webkit-appearance:none}.bcm-date-input>input::-moz-placeholder{opacity:1}.bcm-date-input>input:placeholder-shown{text-overflow:ellipsis}.bcm-date-clear{color:#334155;display:flex;flex-direction:column;align-items:center;justify-content:center;width:20px;font-size:20px;padding-bottom:3px;line-height:1;cursor:pointer;font-weight:400;visibility:hidden;position:absolute;right:4px;padding:4px;opacity:0;transition:opacity 0.2s}.bcm-date-clear-btn::after{content:\"×\"}.bcm-date-disabled{background-color:#f8fafc;color:#a0aec0;cursor:not-allowed}.bcm-date-disabled input{color:#a0aec0}.bcm-date-disabled:hover{border:1px solid #cbd5e1}.bcm-date-disabled .bcm-date-input{cursor:not-allowed}.bcm-date-disabled .bcm-date-suffix:before{cursor:not-allowed}.bcm-date-disabled .bcm-date-clear{cursor:not-allowed}.bcm-date--error{border:1px solid #e53e3e}.bcm-date--error:hover{border:1px solid #e53e3e}.bcm-date-range{padding:0 4px}.bcm-date-range .bcm-date-clear{flex:none}.bcm-date-range-separator{color:#94a3b8;padding:0 4px;display:flex;align-items:center;justify-content:center}.bcm-date-focused .bcm-date-active-bar{position:absolute;bottom:0;left:0;height:2px;background-color:#4293cf;transition:all 0.3s}.bcm-date-dropdown{position:absolute;z-index:10800;top:-9999;left:-9999;border-radius:4px}.bcm-date-dropdown-placement-bottomLeft,.bcm-date-dropdown-placement-bottomRight{top:0;display:block}.bcm-date-dropdown-placement-topLeft,.bcm-date-dropdown-placement-topRight{bottom:0;display:block}.bcm-date-dropdown-hidden{display:none}.bcm-date-dropdown .bcm-date-panel-container{font-family:\"Inter\", sans-serif;font-size:14px;line-height:22px;font-weight:400;box-shadow:0 4px 12px 0 rgba(17, 24, 39, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);background-color:#fff}.bcm-date-dropdown .bcm-date-panels{display:inline-flex}.bcm-date-dropdown .bcm-date-decade-panel,.bcm-date-dropdown .bcm-date-year-panel,.bcm-date-dropdown .bcm-date-month-panel,.bcm-date-dropdown .bcm-date-week-panel,.bcm-date-dropdown .bcm-date-date-panel{width:256px}.bcm-date-dropdown .bcm-date-time-panel{width:auto;padding-top:4px;min-width:auto}.bcm-date-dropdown .bcm-date-time-panel .bcm-date-content{width:100%;table-layout:fixed;border-collapse:collapse;text-align:center;display:flex;flex:auto;height:224px}.bcm-date-dropdown .bcm-date-time-panel-column{flex:1 0 auto;width:56px;margin:4px 0;padding:0;overflow-y:hidden;text-align:start;list-style:none;transition:background 0.2s;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(0, 0, 0, 0.45) transparent;position:relative}.bcm-date-dropdown .bcm-date-time-panel-column:not(:first-child){border-inline-start:1px solid rgba(5, 5, 5, 0.06)}.bcm-date-dropdown .bcm-date-time-panel-column-active{background:rgba(0, 0, 255, 0.1)}.bcm-date-dropdown .bcm-date-time-panel-column:hover{overflow-y:auto}.bcm-date-dropdown .bcm-date-time-panel-column>li{margin:0;padding:0}.bcm-date-dropdown .bcm-date-time-panel-column>li.disabled{opacity:0.5}.bcm-date-dropdown .bcm-date-time-panel-column>li.bcm-date-time-panel-cell{margin-inline:4px}.bcm-date-dropdown .bcm-date-time-panel-column>li.bcm-date-time-panel-cell .bcm-date-time-panel-cell-inner{display:block;width:48px;height:28px;margin:0;padding-block:0;padding-inline-end:0;padding-inline-start:14px;color:rgba(0, 0, 0, 0.88);line-height:28px;border-radius:4px;cursor:pointer;transition:background 0.2s}.bcm-date-dropdown .bcm-date-time-panel-column>li.bcm-date-time-panel-cell .bcm-date-time-panel-cell-inner:hover{background:rgba(0, 0, 0, 0.04)}.bcm-date-dropdown .bcm-date-time-panel-column>li.bcm-date-time-panel-cell-selected .bcm-date-time-panel-cell-inner{background:#e6f4ff}.bcm-date-dropdown .bcm-date-time-panel-column>li.bcm-date-time-panel-cell-disabled .bcm-date-time-panel-cell-inner{pointer-events:none;color:rgba(0, 0, 0, 0.25)}.bcm-date-dropdown .bcm-date-datetime-panel{display:flex;flex-direction:row;align-items:stretch}.bcm-date-dropdown .bcm-date-datetime-panel .bcm-date-time-panel{padding-top:8px}.bcm-date-dropdown .bcm-date-datetime-panel .bcm-date-time-panel .bcm-date-header{display:none}.bcm-date-dropdown .bcm-date-header{padding:0 8px;color:rgba(0, 0, 0, 0.88);border-bottom:1px solid rgba(5, 5, 5, 0.06);display:flex;flex-direction:row;align-items:center;justify-content:space-between;font-size:18px}.bcm-date-dropdown .bcm-date-header>*{flex:none}.bcm-date-dropdown .bcm-date-header>button{min-width:20px}.bcm-date-dropdown .bcm-date-header button{padding:0;color:rgba(0, 0, 0, 0.45);line-height:40px;background:transparent;border:0;cursor:pointer;transition:color 0.2s;font-size:inherit}.bcm-date-dropdown .bcm-date-header button:hover{color:#3b82f6}.bcm-date-dropdown .bcm-date-header-view{flex:auto;text-align:center;font-weight:600;line-height:40px;gap:8px;font-size:14px}.bcm-date-dropdown .bcm-date-header-view button{color:inherit;font-weight:inherit;vertical-align:top;padding:0 4px}.bcm-date-dropdown .bcm-date-body{padding:8px 18px}.bcm-date-dropdown .bcm-date-content{text-align:center;width:100%;table-layout:fixed;border-collapse:collapse}.bcm-date-dropdown .bcm-date-content thead tr th{color:#334155;font-weight:400;font-size:12px;line-height:16px;padding:8px 0;text-align:center;text-transform:uppercase}.bcm-date-dropdown .bcm-date-cell{position:relative}.bcm-date-dropdown .bcm-date-cell::before{position:absolute;top:50%;inset-inline-start:0;inset-inline-end:0;z-index:1;height:24px;transform:translateY(-50%);transition:all 0.3s;content:\"\"}.bcm-date-dropdown .bcm-date-cell-inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid transparent;transition:background 0.2s, border 0.2s;cursor:pointer;color:#94a3b8}.bcm-date-dropdown .bcm-date-cell-inner:hover{background:#e2e8f0;color:#64748b}.bcm-date-dropdown .bcm-date-cell-in-view .bcm-date-cell-inner{color:#334155}.bcm-date-dropdown .bcm-date-cell-today .bcm-date-cell-inner{border:1px solid #3b82f6;color:#3b82f6}.bcm-date-dropdown .bcm-date-cell-today .bcm-date-cell-inner:hover{background:#e2e8f0;color:#64748b}.bcm-date-dropdown .bcm-date-cell-selected .bcm-date-cell-inner{color:#fff;background:#3b82f6}.bcm-date-dropdown .bcm-date-cell-selected .bcm-date-cell-inner:hover{background:#2563eb;color:#fff}.bcm-date-dropdown .bcm-date-cell-in-range .bcm-date-cell-inner{background:#bfdbfe}.bcm-date-dropdown .bcm-date-cell-in-range::before{background:#bfdbfe}.bcm-date-dropdown .bcm-date-cell-range-hover .bcm-date-cell-inner{background:#93c5fd;color:#334155}.bcm-date-dropdown .bcm-date-cell-range-hover::before{background:#93c5fd}.bcm-date-dropdown .bcm-date-cell-range-start .bcm-date-cell-inner{background-color:#3b82f6;color:#fff;border-radius:4px 0 0 4px}.bcm-date-dropdown .bcm-date-cell-range-start .bcm-date-cell-inner:hover{background:#3b82f6;color:#fff;border-radius:4px 0 0 4px}.bcm-date-dropdown .bcm-date-cell-range-start::before{background:#bfdbfe;inset-inline-start:50%}.bcm-date-dropdown .bcm-date-cell-range-end .bcm-date-cell-inner{background-color:#3b82f6;color:#fff;border-radius:0 4px 4px 0}.bcm-date-dropdown .bcm-date-cell-range-end .bcm-date-cell-inner:hover{background:#3b82f6;color:#fff;border-radius:4px 0 0 4px}.bcm-date-dropdown .bcm-date-cell-range-end::before{background:#bfdbfe;inset-inline-end:50%}.bcm-date-dropdown .bcm-date-cell-range-hover-start .bcm-date-cell-inner{background-color:#93c5fd;color:#334155}.bcm-date-dropdown .bcm-date-cell-range-hover-start .bcm-date-cell-inner:hover{background:#93c5fd;color:#334155;border-radius:4px 0 0 4px}.bcm-date-dropdown .bcm-date-cell-range-hover-end .bcm-date-cell-inner:hover{background:#93c5fd;color:#334155;border-radius:0 4px 4px 0}.bcm-date-dropdown .bcm-date-cell-disabled .bcm-date-cell-inner{pointer-events:none;color:rgba(0, 0, 0, 0.25)}.bcm-date-dropdown .bcm-date-cell-disabled::before{background:rgba(0, 0, 0, 0.04)}.bcm-date-dropdown .bcm-date-footer{border-top:1px solid rgba(5, 5, 5, 0.06);width:min-content;min-width:100%;line-height:38px;text-align:center}.bcm-date-dropdown .bcm-date-footer .bcm-date-today-btn{color:#3b82f6;cursor:pointer;padding:0 8px}.bcm-date-dropdown .bcm-date-footer .bcm-date-today-btn:hover{color:#2563eb}.bcm-date-dropdown .bcm-date-ranges{margin:0;margin-bottom:0;padding:4px 12px;overflow:hidden;line-height:34px;text-align:start;list-style:none;display:flex;justify-content:space-between}.bcm-date-dropdown .bcm-date-ranges>li{display:inline-block}.bcm-date-dropdown .bcm-date-ranges .bcm-date-ok{margin-inline-start:auto}.bcm-date-dropdown .bcm-date-ranges .bcm-date-ok>button{font-size:14px;color:#fff;background-color:#3b82f6;box-shadow:0 2px 0 rgba(5, 145, 255, 0.1);height:24px;padding:0 7px;border-radius:4px;outline:none;border:none;cursor:pointer;transition:background-color 0.3s}.bcm-date-dropdown .bcm-date-ranges .bcm-date-ok>button:hover{background-color:#2563eb}.bcm-date-dropdown .bcm-date-now{text-align:right}.bcm-date-dropdown .bcm-date-now-btn{color:#3b82f6;text-decoration:none;background-color:transparent;outline:none;cursor:pointer;transition:color 0.3s;-webkit-text-decoration-skip:objects}.bcm-date-dropdown .bcm-date-now-btn:hover{color:#2563eb}.bcm-date-dropdown .bcm-date-range-wrapper{display:flex;position:relative}";
+const rcPickerCss = "@charset \"UTF-8\";@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-date{font-family:\"Inter\", sans-serif;font-weight:500;display:flex;align-items:stretch;flex-direction:row;background-color:var(--bcm-ui-color-background-base-default);border:1px solid var(--bcm-ui-color-border-default);border-radius:var(--bcm-ui-radius);box-sizing:border-box;cursor:text;padding:0 0 0 var(--bcm-ui-spacing-2);position:relative;width:100%;}.bcm-date--small{height:24px;font-size:var(--bcm-ui-font-size-4);line-height:var(--bcm-ui-line-height-4)}.bcm-date--medium{height:32px;font-size:var(--bcm-ui-font-size-5);line-height:var(--bcm-ui-line-height-5)}.bcm-date--large{height:40px;font-size:var(--bcm-ui-font-size-6);line-height:var(--bcm-ui-line-height-6)}.bcm-date:hover{border-color:var(--bcm-ui-color-border-primary-info)}.bcm-date:hover.bcm-date--existed{}.bcm-date:hover.bcm-date--existed .bcm-date-clear{visibility:visible;opacity:1}.bcm-date:hover.bcm-date--existed .bcm-date-suffix{opacity:0}.bcm-date-focused{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.bcm-date-suffix{color:var(--bcm-ui-color-text-placeholder)}.bcm-date-suffix:not(:empty){display:flex;align-items:center;justify-content:center}.bcm-date-suffix::before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;font-family:\"Font Awesome 6 Pro\";font-weight:400;line-height:1;box-sizing:border-box;padding:0 4px;cursor:pointer}.bcm-date--datetime .bcm-date-suffix::before{content:\"\\e0d2\"}.bcm-date--date .bcm-date-suffix::before{content:\"\\f133\"}.bcm-date--time .bcm-date-suffix::before{content:\"\\f017\"}.bcm-date-input{position:relative;display:inline-flex;width:100%;padding:0 4px;color:#334155}.bcm-date-input-placeholder{color:var(--bcm-ui-color-text-placeholder)}.bcm-date-input>input{color:inherit;width:100%;flex:1;border:none;background:transparent;box-shadow:unset;line-height:inherit;font-size:inherit;font-family:\"Inter\", sans-serif;cursor:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;overflow:hidden;text-overflow:ellipsis;font-weight:500}.bcm-date-input>input::placeholder{font-family:\"Inter\", sans-serif;font-weight:400;color:var(--bcm-ui-color-text-placeholder);user-select:none}.bcm-date-input>input::-webkit-search-decoration,.bcm-date-input>input::-webkit-search-cancel-button,.bcm-date-input>input::-webkit-search-results-button,.bcm-date-input>input::-webkit-search-results-decoration,.bcm-date-input>input::-webkit-calendar-picker-indicator,.bcm-date-input>input::-webkit-inner-spin-button,.bcm-date-input>input::-webkit-outer-spin-button{-webkit-appearance:none}.bcm-date-input>input::-moz-placeholder{opacity:1}.bcm-date-input>input:placeholder-shown{text-overflow:ellipsis}.bcm-date-clear{color:var(--bcm-ui-color-text-placeholder);display:flex;flex-direction:column;align-items:center;justify-content:center;width:20px;font-size:20px;padding-bottom:3px;line-height:1;cursor:pointer;font-weight:400;visibility:hidden;position:absolute;right:4px;padding:4px;opacity:0;transition:opacity 0.2s}.bcm-date-clear-btn::after{content:\"×\"}.bcm-date-disabled{background-color:var(--bcm-ui-color-background-disabled-disable);color:var(--bcm-ui-color-text-disabled);cursor:not-allowed}.bcm-date-disabled input{color:var(--bcm-ui-color-text-disabled)}.bcm-date-disabled:hover{border:1px solid #cbd5e1}.bcm-date-disabled .bcm-date-input{cursor:not-allowed}.bcm-date-disabled .bcm-date-suffix:before{cursor:not-allowed}.bcm-date-disabled .bcm-date-clear{cursor:not-allowed}.bcm-date--error{border:1px solid var(--bcm-ui-color-border-error)}.bcm-date--error:hover{border:1px solid var(--bcm-ui-color-border-error)}.bcm-date-range{padding:0 4px}.bcm-date-range .bcm-date-clear{flex:none}.bcm-date-range-separator{color:var(--bcm-ui-color-text-placeholder);padding:0 4px;display:flex;align-items:center;justify-content:center}.bcm-date-focused .bcm-date-active-bar{position:absolute;bottom:0;left:0;height:2px;background-color:#4293cf;transition:all 0.3s}.bcm-date-dropdown{position:absolute;z-index:10800;top:-9999;left:-9999;border-radius:4px}.bcm-date-dropdown-placement-bottomLeft,.bcm-date-dropdown-placement-bottomRight{top:0;display:block}.bcm-date-dropdown-placement-topLeft,.bcm-date-dropdown-placement-topRight{bottom:0;display:block}.bcm-date-dropdown-hidden{display:none}.bcm-date-dropdown .bcm-date-panel-container{font-family:\"Inter\", sans-serif;font-size:14px;line-height:22px;font-weight:400;box-shadow:0 4px 12px 0 rgba(17, 24, 39, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);background-color:#fff}.bcm-date-dropdown .bcm-date-panels{display:inline-flex}.bcm-date-dropdown .bcm-date-decade-panel,.bcm-date-dropdown .bcm-date-year-panel,.bcm-date-dropdown .bcm-date-month-panel,.bcm-date-dropdown .bcm-date-week-panel,.bcm-date-dropdown .bcm-date-date-panel{width:256px}.bcm-date-dropdown .bcm-date-time-panel{width:auto;padding-top:4px;min-width:auto}.bcm-date-dropdown .bcm-date-time-panel .bcm-date-content{width:100%;table-layout:fixed;border-collapse:collapse;text-align:center;display:flex;flex:auto;height:224px}.bcm-date-dropdown .bcm-date-time-panel-column{flex:1 0 auto;width:56px;margin:4px 0;padding:0;overflow-y:hidden;text-align:start;list-style:none;transition:background 0.2s;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(0, 0, 0, 0.45) transparent;position:relative}.bcm-date-dropdown .bcm-date-time-panel-column:not(:first-child){border-inline-start:1px solid rgba(5, 5, 5, 0.06)}.bcm-date-dropdown .bcm-date-time-panel-column-active{background:rgba(0, 0, 255, 0.1)}.bcm-date-dropdown .bcm-date-time-panel-column:hover{overflow-y:auto}.bcm-date-dropdown .bcm-date-time-panel-column>li{margin:0;padding:0}.bcm-date-dropdown .bcm-date-time-panel-column>li.disabled{opacity:0.5}.bcm-date-dropdown .bcm-date-time-panel-column>li.bcm-date-time-panel-cell{margin-inline:4px}.bcm-date-dropdown .bcm-date-time-panel-column>li.bcm-date-time-panel-cell .bcm-date-time-panel-cell-inner{display:block;width:48px;height:28px;margin:0;padding-block:0;padding-inline-end:0;padding-inline-start:14px;color:rgba(0, 0, 0, 0.88);line-height:28px;border-radius:4px;cursor:pointer;transition:background 0.2s}.bcm-date-dropdown .bcm-date-time-panel-column>li.bcm-date-time-panel-cell .bcm-date-time-panel-cell-inner:hover{background:rgba(0, 0, 0, 0.04)}.bcm-date-dropdown .bcm-date-time-panel-column>li.bcm-date-time-panel-cell-selected .bcm-date-time-panel-cell-inner{background:#e6f4ff}.bcm-date-dropdown .bcm-date-time-panel-column>li.bcm-date-time-panel-cell-disabled .bcm-date-time-panel-cell-inner{pointer-events:none;color:rgba(0, 0, 0, 0.25)}.bcm-date-dropdown .bcm-date-datetime-panel{display:flex;flex-direction:row;align-items:stretch}.bcm-date-dropdown .bcm-date-datetime-panel .bcm-date-time-panel{padding-top:8px}.bcm-date-dropdown .bcm-date-datetime-panel .bcm-date-time-panel .bcm-date-header{display:none}.bcm-date-dropdown .bcm-date-header{padding:0 8px;color:rgba(0, 0, 0, 0.88);border-bottom:1px solid rgba(5, 5, 5, 0.06);display:flex;flex-direction:row;align-items:center;justify-content:space-between;font-size:18px}.bcm-date-dropdown .bcm-date-header>*{flex:none}.bcm-date-dropdown .bcm-date-header>button{min-width:20px}.bcm-date-dropdown .bcm-date-header button{padding:0;color:rgba(0, 0, 0, 0.45);line-height:40px;background:transparent;border:0;cursor:pointer;transition:color 0.2s;font-size:inherit}.bcm-date-dropdown .bcm-date-header button:hover{color:#3b82f6}.bcm-date-dropdown .bcm-date-header-view{flex:auto;text-align:center;font-weight:600;line-height:40px;gap:8px;font-size:14px}.bcm-date-dropdown .bcm-date-header-view button{color:inherit;font-weight:inherit;vertical-align:top;padding:0 4px}.bcm-date-dropdown .bcm-date-body{padding:8px 18px}.bcm-date-dropdown .bcm-date-content{text-align:center;width:100%;table-layout:fixed;border-collapse:collapse}.bcm-date-dropdown .bcm-date-content thead tr th{color:#334155;font-weight:400;font-size:12px;line-height:16px;padding:8px 0;text-align:center;text-transform:uppercase}.bcm-date-dropdown .bcm-date-cell{position:relative}.bcm-date-dropdown .bcm-date-cell::before{position:absolute;top:50%;inset-inline-start:0;inset-inline-end:0;z-index:1;height:24px;transform:translateY(-50%);transition:all 0.3s;content:\"\"}.bcm-date-dropdown .bcm-date-cell-inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid transparent;transition:background 0.2s, border 0.2s;cursor:pointer;color:#94a3b8}.bcm-date-dropdown .bcm-date-cell-inner:hover{background:#e2e8f0;color:#64748b}.bcm-date-dropdown .bcm-date-cell-in-view .bcm-date-cell-inner{color:#334155}.bcm-date-dropdown .bcm-date-cell-today .bcm-date-cell-inner{border:1px solid #3b82f6;color:#3b82f6}.bcm-date-dropdown .bcm-date-cell-today .bcm-date-cell-inner:hover{background:#e2e8f0;color:#64748b}.bcm-date-dropdown .bcm-date-cell-selected .bcm-date-cell-inner{color:#fff;background:#3b82f6}.bcm-date-dropdown .bcm-date-cell-selected .bcm-date-cell-inner:hover{background:#2563eb;color:#fff}.bcm-date-dropdown .bcm-date-cell-in-range .bcm-date-cell-inner{background:#bfdbfe}.bcm-date-dropdown .bcm-date-cell-in-range::before{background:#bfdbfe}.bcm-date-dropdown .bcm-date-cell-range-hover .bcm-date-cell-inner{background:#93c5fd;color:#334155}.bcm-date-dropdown .bcm-date-cell-range-hover::before{background:#93c5fd}.bcm-date-dropdown .bcm-date-cell-range-start .bcm-date-cell-inner{background-color:#3b82f6;color:#fff;border-radius:4px 0 0 4px}.bcm-date-dropdown .bcm-date-cell-range-start .bcm-date-cell-inner:hover{background:#3b82f6;color:#fff;border-radius:4px 0 0 4px}.bcm-date-dropdown .bcm-date-cell-range-start::before{background:#bfdbfe;inset-inline-start:50%}.bcm-date-dropdown .bcm-date-cell-range-end .bcm-date-cell-inner{background-color:#3b82f6;color:#fff;border-radius:0 4px 4px 0}.bcm-date-dropdown .bcm-date-cell-range-end .bcm-date-cell-inner:hover{background:#3b82f6;color:#fff;border-radius:4px 0 0 4px}.bcm-date-dropdown .bcm-date-cell-range-end::before{background:#bfdbfe;inset-inline-end:50%}.bcm-date-dropdown .bcm-date-cell-range-hover-start .bcm-date-cell-inner{background-color:#93c5fd;color:#334155}.bcm-date-dropdown .bcm-date-cell-range-hover-start .bcm-date-cell-inner:hover{background:#93c5fd;color:#334155;border-radius:4px 0 0 4px}.bcm-date-dropdown .bcm-date-cell-range-hover-end .bcm-date-cell-inner:hover{background:#93c5fd;color:#334155;border-radius:0 4px 4px 0}.bcm-date-dropdown .bcm-date-cell-disabled .bcm-date-cell-inner{pointer-events:none;color:rgba(0, 0, 0, 0.25)}.bcm-date-dropdown .bcm-date-cell-disabled::before{background:rgba(0, 0, 0, 0.04)}.bcm-date-dropdown .bcm-date-footer{border-top:1px solid rgba(5, 5, 5, 0.06);width:min-content;min-width:100%;line-height:38px;text-align:center}.bcm-date-dropdown .bcm-date-footer .bcm-date-today-btn{color:#3b82f6;cursor:pointer;padding:0 8px}.bcm-date-dropdown .bcm-date-footer .bcm-date-today-btn:hover{color:#2563eb}.bcm-date-dropdown .bcm-date-ranges{margin:0;margin-bottom:0;padding:4px 12px;overflow:hidden;line-height:34px;text-align:start;list-style:none;display:flex;justify-content:space-between}.bcm-date-dropdown .bcm-date-ranges>li{display:inline-block}.bcm-date-dropdown .bcm-date-ranges .bcm-date-ok{margin-inline-start:auto}.bcm-date-dropdown .bcm-date-ranges .bcm-date-ok>button{font-size:14px;color:#fff;background-color:#3b82f6;box-shadow:0 2px 0 rgba(5, 145, 255, 0.1);height:24px;padding:0 7px;border-radius:4px;outline:none;border:none;cursor:pointer;transition:background-color 0.3s}.bcm-date-dropdown .bcm-date-ranges .bcm-date-ok>button:hover{background-color:#2563eb}.bcm-date-dropdown .bcm-date-now{text-align:right}.bcm-date-dropdown .bcm-date-now-btn{color:#3b82f6;text-decoration:none;background-color:transparent;outline:none;cursor:pointer;transition:color 0.3s;-webkit-text-decoration-skip:objects}.bcm-date-dropdown .bcm-date-now-btn:hover{color:#2563eb}.bcm-date-dropdown .bcm-date-range-wrapper{display:flex;position:relative}";
 
 const BcmRcPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
   constructor() {

package/dist/components/result.style.js

@@ -0,0 +1,54 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { c as ce } from './index4.js';
+
+const resultStyle = ce({
+  slots: {
+    host: [
+      "bcm-result bcm-ui-element bcm-ui-feedback",
+      "tw-flex tw-flex-col tw-items-center tw-justify-center ",
+      "tw-rounded-cards",
+      "tw-py-8 tw-px-6 tw-w-full",
+      "tw-text-size-5 tw-text-color-default tw-font-medium tw-text-center tw-text-balanced"
+    ],
+    iconStyle: "tw-text-size-11 tw-mb-6 empty:tw-hidden",
+    headingStyle: "tw-text-size-7 tw-font-semibold tw-text-color-header tw-mb-2 empty:tw-hidden",
+    descriptionStyle: "empty:tw-hidden",
+    footer: [
+      "tw-flex tw-justify-center tw-items-center empty:tw-hidden",
+      "tw-gap-2",
+      "tw-mt-8",
+    ],
+  },
+  variants: {
+    status: {
+      default: {
+        host: "",
+        iconStyle: "tw-text-color-primary",
+      },
+      success: {
+        host: "",
+        iconStyle: "tw-text-color-success",
+      },
+      warning: {
+        host: "",
+        iconStyle: "tw-text-color-warning",
+      },
+      error: {
+        host: "",
+        iconStyle: "tw-text-color-error",
+      },
+      info: {
+        host: "",
+        iconStyle: "tw-text-color-primary",
+      },
+    },
+  },
+  defaultVariants: {
+    status: "default",
+  },
+});
+
+export { resultStyle as r };