bromcom-ui 2.10.1-rc.9 → 2.11.0

package/dist/components/list.js

@@ -13,7 +13,7 @@ import { S as StringHelper } from './string-helper.js';
 import './element-dragger.js';
 import { g as getPlacement, s as setPosition } from './popover-placement.js';
 import { p as pluralize, d as delay } from './utils.js';
-import { B as Bcm, a as Bcm$1 } from './bcm.js';
+import { a as Bcm, B as Bcm$1 } from './bcm.js';
 import { C as CaptionTemplate } from './caption-template.js';
 import { c as classnames } from './index2.js';
 import './types.js';
@@ -937,7 +937,7 @@ const BcmList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       status: Bcm$1.Status.default,
       indeterminate: "uncheck",
     };
-    this.shouldTriggerChange = true;
+    this.shouldTriggerChange = undefined;
     this.placement = Bcm$1.Placement["bottom-start"];
     this.disableChangeEvent = false;
     this.data = [];

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

@@ -4,7 +4,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-import { B as Bcm } from './bcm.js';
+import { a as Bcm } from './bcm.js';
 import { G as Generate } from './generate.js';
 import { d as defineCustomElement$2 } from './old-popover-box.js';
 

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}";
+const oldInputCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}*{box-sizing:border-box}.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:inline-block;width:100%;margin:0 0 8px 0}:host(.hidden){display:none}:host(.no-margin){margin:0}.input-container{display:flex;flex-direction:column;width:100%;max-width:256px}.input-container.full-width{max-width:100%}.input-base{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;flex:1 1 auto;display:inline-flex;align-items:stretch;justify-content:start;position:relative;background-color:var(--bcm-new-ds-color-white);border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;vertical-align:middle;overflow:hidden;padding:0 4px;cursor:text}.input-base.disabled{background-color:var(--bcm-new-ds-color-slate-50);cursor:not-allowed}.input-base.disabled .bcm-input-element{color:var(--bcm-new-ds-color-slate-300)}.input-base.readonly{background-color:var(--bcm-new-ds-color-slate-50);cursor:default}.input-base.readonly .bcm-input-element{color:var(--bcm-new-ds-color-slate-600)}.input-base:not(.disabled):hover .caret-container,.input-base:not(.disabled).focused .caret-container{opacity:1}.input-base:not(.disabled):hover .input-clear-button,.input-base:not(.disabled).focused .input-clear-button{opacity:1}.input-base:not(.disabled).focused{background-color:var(--bcm-new-ds-color-slate-50)}.input-base:not(.disabled):hover{border-color:var(--bcm-color-prime-blue-6)}.input-base.focused:not(.disabled) .caret-container{opacity:1}.input-base.focused:not(.disabled) .input-clear-button{opacity:1}.input-base:hover:not(.disabled) .caret-container{opacity:1}.input-base:hover:not(.disabled) .input-clear-button{opacity:1}.input-base.disabled{cursor:not-allowed}.input-base.readonly{cursor:default}.input-base.empty .input-clear-button{display:none}.input-base.invalid,.input-base.error{border-color:var(--bcm-new-ds-color-red-500)}.error .label{color:var(--bcm-new-ds-color-red-500) !important}.error .input-base{border-color:var(--bcm-new-ds-color-red-500) !important}.input-base input{color:var(--bcm-new-ds-color-slate-600);flex:1 1 auto;width:0%;border:none;border-radius:2px;background:none;box-shadow:none;padding:0;margin:0 4px;font-family:\"Inter\", sans-serif;cursor:inherit;-webkit-appearance:none;appearance:none}.input-base input::-webkit-search-decoration,.input-base input::-webkit-search-cancel-button,.input-base input::-webkit-search-results-button,.input-base input::-webkit-search-results-decoration{-webkit-appearance:none}.input-base input::placeholder{font-family:\"Inter\", sans-serif;color:var(--bcm-new-ds-color-slate-300);user-select:none}.input-base input:focus{outline:none}input::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input[type=number]{-moz-appearance:textfield}.input-prefix,.input-suffix{display:inline-flex;align-items:center;justify-content:center;cursor:default;color:var(--bcm-new-ds-color-slate-500)}.input-prefix ::slotted(*),.input-prefix>span{line-height:1;margin-left:4px}.input-suffix ::slotted(*),.input-suffix>span{line-height:1;margin-right:4px}.input-clear-button,.input-password-toggle{display:inline-flex;align-items:center;border:none;background:none;padding:0;cursor:pointer;margin-right:4px;transition:0.2s opacity}.input-clear-button:last-child,.input-clear-button:last-of-type,.input-password-toggle:last-child,.input-password-toggle:last-of-type{margin-right:8px}.input-clear-button:focus,.input-password-toggle:focus{outline:none}.input-clear-button{opacity:0}.label{display:flex;flex-direction:column;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;color:var(--bcm-new-ds-color-slate-600);margin-bottom:4px}.caption-area{min-height:20px}.input-caption{display:block}.unit.input-suffix{width:24px}.unit-prefix{display:inline-flex;flex:0 0 auto;align-items:center;cursor:default;color:var(--bcm-color-grey-8)}.caret-container{opacity:0;width:30px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-left:1px solid #D9D9D9;border-right:1px solid #D9D9D9;transition:0.2s opacity;user-select:none;box-sizing:border-box;margin-right:4px}.caret-container:last-of-type{margin-right:-space(\"xxxs\");border-right:none}.caret-container .caret{display:inline-flex;height:50%;width:100%;align-items:center;justify-content:center;color:var(--bcm-color-grey-7);cursor:pointer}.caret-container .caret:hover{color:var(--bcm-color-prime-blue-6)}.caret-container .caret:active{background-color:var(--bcm-color-grey-3)}.caret-container .caret:last-child{border-top:1px solid #D9D9D9}.caret-container.disabled{background-color:var(--bcm-color-grey-3)}.caret-container.disabled .caret{cursor:not-allowed}.default-icon{margin-right:8px}.input-large{height:40px}.input-medium{height:32px}.input-small{height:24px}.bcm-label{font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-bottom:4px;font-weight:500;color:#475569}.bcm-label.tw-text-1{font-size:10px;line-height:18px}.bcm-label.tw-text-2{font-size:12px;line-height:20px}.bcm-label.tw-text-3{font-size:14px;line-height:22px}.bcm-caption-area{color:#dc2626;font-weight:400;justify-content:space-between;align-items:flex-start;flex-direction:row;min-height:20px;display:flex;margin-top:4px;font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.bcm-caption-area.tw-text-1{font-size:10px;line-height:18px}.bcm-caption-area.tw-text-2{font-size:12px;line-height:20px}.bcm-caption-area.tw-text-3{font-size:14px;line-height:22px}";
 
 let id = 0;
 const defaultIcons = {

package/dist/components/radio.js

@@ -3,7 +3,7 @@
  * Copyright (c) Bromcom.
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as Bcm } from './bcm.js';
+import { B as Bcm } from './bcm.js';
 import './color-helper.js';
 import './validators.js';
 import { G as Generate } from './generate.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 { a as Bcm } from './bcm.js';
+import { B as Bcm } from './bcm.js';
 import { c as classnames } from './index2.js';
 import { u as useEvent, b as useLayoutUpdateEffect, _ as _typeof$3, c as warningOnce, d as useMemo, w as wrapperRaf, a as useLayoutEffect, e as canUseDom, s as supportRef, f as useComposeRef, i as isDOM, g as fillRef, h as findDOMNode, R as RefResizeObserver, j as composeRef } from './raf.js';
 import { r as react, a as reactDom, R as React } from './index3.js';

package/dist/components/search.js

@@ -4,7 +4,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { s as snq, G as Generate } from './generate.js';
-import { B as Bcm } from './bcm.js';
+import { a as Bcm } from './bcm.js';
 import { I as InputTemplate } from './input-template.js';
 import { d as delay } from './utils.js';
 import { c as createStore } from './index4.js';

package/dist/components/string-helper.js

@@ -2,7 +2,7 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { B as Bcm } from './bcm.js';
+import { a as Bcm } from './bcm.js';
 import { c as createCommonjsModule, a as commonjsGlobal } from './_commonjsHelpers.js';
 
 var slugify = createCommonjsModule(function (module, exports) {

package/dist/components/textarea.js

@@ -6,7 +6,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { c as classnames } from './index2.js';
 import { I as IsLoad } from './is-load-decorator.js';
 import { G as Generate } from './generate.js';
-import { B as Bcm } from './bcm.js';
+import { a as Bcm } from './bcm.js';
 import { C as CaptionTemplate } from './caption-template.js';
 import { I as InputTemplate } from './input-template.js';
 import { d as delay } from './utils.js';

package/dist/components/tooltip-helper.js

@@ -10,7 +10,7 @@ import { C as ColorHelper } from './color-helper.js';
 import './validators.js';
 import { G as Generate } from './generate.js';
 import './number-helper.js';
-import { a as Bcm } from './bcm.js';
+import { B as Bcm } from './bcm.js';
 
 class Tooltip {
   constructor({ message, targetId, placement = "top", color = "slate-700", trigger = "none", size = "medium", openDelay = 0, closeDelay = 0, autoHide = false, emitShow = () => { }, emitHide = () => { }, }) {

package/dist/components/tooltip.js

@@ -10,7 +10,7 @@ import './number-helper.js';
 import './string-helper.js';
 import { T as Tooltip } from './tooltip-helper.js';
 import './element-dragger.js';
-import { a as Bcm } from './bcm.js';
+import { B as Bcm } from './bcm.js';
 
 const BcmTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/esm/{_commonjsHelpers-7002e5de.js → _commonjsHelpers-be0d4ec8.js}

@@ -37,4 +37,4 @@ function commonjsRequire () {
 	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
 }
 
-export { commonjsGlobal as a, getDefaultExportFromCjs as b, createCommonjsModule as c, getAugmentedNamespace as g };
+export { commonjsGlobal as a, getAugmentedNamespace as b, createCommonjsModule as c, getDefaultExportFromCjs as g };

package/dist/esm/bcm-accordion.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-0615c2b8.js';
-import { G as Generate } from './generate-f51f2b02.js';
-import './package-ebccec3c.js';
-import './colors-ebea297f.js';
-import './_commonjsHelpers-7002e5de.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-4614b7f0.js';
+import { G as Generate } from './generate-ea4b5630.js';
+import './package-b6a53fde.js';
+import './colors-e1c31f79.js';
+import './_commonjsHelpers-be0d4ec8.js';
 
 const accordionCss = "@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}";
 

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

@@ -2,14 +2,14 @@
  * 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 { G as Generate, s as snq, S as StatusProps, T as TypeProps } from './generate-f51f2b02.js';
-import { c as classnames } from './index-00c8a8f7.js';
-import { c as createStore } from './index-7e71bbc8.js';
-import { S as StringHelper } from './string-helper-8f5da9ec.js';
-import './package-ebccec3c.js';
-import './colors-ebea297f.js';
-import './_commonjsHelpers-7002e5de.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4614b7f0.js';
+import { G as Generate, s as snq, S as StatusProps, T as TypeProps } from './generate-ea4b5630.js';
+import { c as classnames } from './index-b84bc8c9.js';
+import { c as createStore } from './index-f38e3364.js';
+import { S as StringHelper } from './string-helper-3526c4fe.js';
+import './package-b6a53fde.js';
+import './colors-e1c31f79.js';
+import './_commonjsHelpers-be0d4ec8.js';
 import './bcm-0f9cc27c.js';
 
 const { state } = createStore({

package/dist/esm/bcm-attendance-actions-comment.entry.js

@@ -0,0 +1,136 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4614b7f0.js';
+import './color-helper-c4fa9ebc.js';
+import './datetime-helper-df25808a.js';
+import { G as Generate } from './generate-ea4b5630.js';
+import './number-helper-148cd002.js';
+import './string-helper-3526c4fe.js';
+import './validators-78ec4f0a.js';
+import './element-dragger-7ea06c76.js';
+import { d as delay } from './utils-b3338faf.js';
+import { F as FloatingUI } from './floating-ui-a4e67246.js';
+import { a as Bcm } from './bcm-0f9cc27c.js';
+import { c as ce } from './index-3bc8c6e3.js';
+import './colors-1d7854ea.js';
+import './colors-e1c31f79.js';
+import './_commonjsHelpers-be0d4ec8.js';
+import './package-b6a53fde.js';
+
+const attendanceActionCommentStyle = ce({
+  slots: {
+    host: [
+      // "tw-flex tw-h-fit tw-w-full tw-min-w-[288px] tw-flex-col tw-items-start tw-rounded tw-p-4 tw-shadow-2",
+      "tw-w-fit",
+      "tw-absolute tw-left-0 tw-right-0 tw-z-tooltip tw-opacity-100 tw-transition-opacity tw-duration-300",
+      "tw-rounded tw-bg-white tw-shadow",
+      "bcm-ui-element bcm-attendance-actions tw-flex tw-flex-col tw-items-start tw-justify-start tw-p-4 tw-font-medium tw-text-slate-700",
+    ],
+    footer: ["tw-flex tw-w-full tw-flex-row tw-items-center tw-justify-end tw-gap-2 "],
+  },
+  variants: {
+    size: {
+      small: {},
+      medium: {},
+      large: {},
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+  },
+});
+
+const BcmAttendanceActionsComment = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.change = createEvent(this, "bcm-attendance-actions-comment-change", 3);
+    this.lateMinutes = null;
+    this.comment = null;
+    this._id = Generate.UID();
+    this.size = Bcm.Size.medium;
+    this.disabled = false;
+    this.selectedKey = null;
+    this.targetId = null;
+    this.isShow = false;
+    this.isLate = false;
+    this.selectedItem = null;
+  }
+  handleSave(lateMinutes, comment) {
+    this.change.emit({ lateMinutes, comment });
+    this.hide();
+  }
+  async show() {
+    const targetElement = document.getElementById(this.targetId);
+    FloatingUI({
+      ref: targetElement,
+      floating: this.el,
+      placement: "bottom-end",
+      offset: 8,
+      arrow: true,
+      arrowColor: "tw-bg-white",
+    });
+    this.isShow = true;
+    await delay(100);
+    if (this.isLate) {
+      this.focusInput();
+    }
+    else {
+      this.focusTextarea();
+    }
+  }
+  focusInput() {
+    const input = this.el.querySelector("bcm-input");
+    input === null || input === void 0 ? void 0 : input.onBcmSelect();
+  }
+  focusTextarea() {
+    const textarea = this.el.querySelector("bcm-textarea");
+    textarea === null || textarea === void 0 ? void 0 : textarea.onBcmSelect();
+  }
+  async hide() {
+    if (this.isShow) {
+      this.el.remove();
+    }
+  }
+  handleClickOutside(event) {
+    if (!Generate.findEventPath(event, this.el)) {
+      this.hide();
+    }
+  }
+  async formSubmit() {
+    var _a, _b, _c;
+    const { lateMinutes, comment, isLate } = this;
+    if (isLate) {
+      if (lateMinutes) {
+        if (!(lateMinutes >= 0 && lateMinutes <= 200)) {
+          return;
+        }
+      }
+    }
+    const { isValid } = await ((_a = this.el.querySelector("bcm-form")) === null || _a === void 0 ? void 0 : _a.submit());
+    if (!isValid)
+      return;
+    this.handleSave(lateMinutes || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.lateMin), comment || ((_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.comment));
+  }
+  render() {
+    var _a, _b;
+    const { size } = this;
+    const { host, footer } = attendanceActionCommentStyle({
+      size,
+    });
+    return (h(Host, { class: host(), onKeyDown: e => {
+        if (e.key === "Escape")
+          this.hide();
+      } }, h("bcm-form", { validation: true, style: { width: "256px" } }, this.isLate ? (h("bcm-input", { label: "Minus Late", required: true, name: "lateMin", id: this._id + "-input-dropdown-late-content-input", type: "number", size: this.size, autocomplete: false, "no-margin": true, min: 0, max: 200, value: (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.lateMin, placeholder: "Enter Minus Late", "onBcm-change": ({ detail }) => (this.lateMinutes = detail), onKeyDown: e => {
+        if (e.key === "Enter")
+          this.formSubmit();
+      } }, h("i", { slot: "prefix", class: "far fa-clock" }))) : null, h("bcm-textarea", { name: "comment", value: (_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.comment, size: this.size, "onBcm-change": ({ detail }) => (this.comment = detail), label: "Description", "no-caption": true, rows: 4, onKeyDown: e => {
+        if (e.key === "Enter")
+          this.formSubmit();
+      } }), h("footer", { class: footer() }, h("bcm-button", { class: "tw-order-2", icon: "fas fa-save", "icon-position": "prefix", size: this.size, onClick: () => this.formSubmit() }, "Save"), h("bcm-button", { class: "tw-order-1", icon: "fas fa-times", kind: "ghost", size: this.size, "icon-position": "prefix", onClick: () => this.hide() }, "Close")))));
+  }
+  get el() { return getElement(this); }
+};
+
+export { BcmAttendanceActionsComment as bcm_attendance_actions_comment };

package/dist/esm/bcm-attendance-actions-dropdown.entry.js

@@ -0,0 +1,97 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4614b7f0.js';
+import './color-helper-c4fa9ebc.js';
+import './datetime-helper-df25808a.js';
+import { G as Generate } from './generate-ea4b5630.js';
+import './number-helper-148cd002.js';
+import './string-helper-3526c4fe.js';
+import './validators-78ec4f0a.js';
+import './element-dragger-7ea06c76.js';
+import { F as FloatingUI } from './floating-ui-a4e67246.js';
+import { a as Bcm } from './bcm-0f9cc27c.js';
+import { c as classnames } from './index-b84bc8c9.js';
+import { c as ce } from './index-3bc8c6e3.js';
+import './colors-1d7854ea.js';
+import './utils-b3338faf.js';
+import './colors-e1c31f79.js';
+import './_commonjsHelpers-be0d4ec8.js';
+import './package-b6a53fde.js';
+
+const attendanceActionDropdownStyle = ce({
+  slots: {
+    host: [
+      "tw-w-fit",
+      "tw-absolute tw-left-0 tw-right-0 tw-z-tooltip tw-opacity-100 tw-transition-opacity tw-duration-300",
+      "tw-overscroll-contain  tw-scroll-smooth tw-rounded tw-bg-white tw-shadow tw-max-h-64 tw-overflow-y-auto",
+      "bcm-ui-element bcm-attendance-actions tw-flex tw-flex-col tw-items-start tw-justify-start tw-p-2 tw-font-medium tw-text-slate-700"
+    ],
+    dataItem: ["tw-flex tw-w-full tw-cursor-pointer tw-flex-row tw-items-start tw-justify-start tw-gap-2 tw-rounded  hover:tw-bg-blue-100"],
+    key: ["tw-font-mono tw-text-slate-600"],
+    selectedItem: ["tw-bg-blue-100"],
+  },
+  variants: {
+    size: {
+      small: {
+        dataItem: ["tw-text-2.5 tw-px-2.5 tw-py-2"],
+      },
+      medium: {
+        dataItem: ["tw-text-3 tw-px-3 tw-py-2"],
+      },
+      large: {
+        dataItem: ["tw-text-4 tw-px-4 tw-py-2"],
+      },
+    }
+  },
+  defaultVariants: {
+    size: "medium"
+  },
+});
+
+const BcmAttendanceActionsDropdown = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.change = createEvent(this, "bcm-attendance-actions-dropdown-change", 3);
+    this._id = Generate.UID();
+    this.size = Bcm.Size.medium;
+    this.disabled = false;
+    this.selectedKey = null;
+    this.targetId = null;
+    this.isShow = false;
+    this.data = [];
+  }
+  handleSelectItem(item) {
+    this.selectedKey = item.key;
+    this.change.emit(item);
+  }
+  async show() {
+    const targetElement = document.getElementById(this.targetId);
+    FloatingUI({
+      ref: targetElement,
+      floating: this.el,
+      placement: "bottom-end",
+      offset: 4,
+    });
+    this.isShow = true;
+  }
+  async hide() {
+    if (this.isShow) {
+      this.el.remove();
+    }
+  }
+  handleClickOutside() {
+    this.hide();
+  }
+  render() {
+    const { size } = this;
+    const { host, dataItem, selectedItem, key } = attendanceActionDropdownStyle({
+      size,
+    });
+    return (h(Host, { class: host() }, this.data.map((item) => (h("div", { class: classnames(dataItem(), this.selectedKey === item.key && selectedItem()), onClick: () => this.handleSelectItem(item) }, h("span", { class: key() }, item.key, " - "), h("span", null, item.value))))));
+  }
+  get el() { return getElement(this); }
+};
+
+export { BcmAttendanceActionsDropdown as bcm_attendance_actions_dropdown };