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

package/dist/components/bcm-attendance-actions-dropdown.js

@@ -4,15 +4,15 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } 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 './string-helper.js';
 import './element-dragger.js';
 import { F as FloatingUI } from './floating-ui.js';
-import { B as Bcm } from './bcm.js';
+import { a as Bcm } from './bcm.js';
 import { c as classnames } from './index2.js';
-import { c as ce } from './index5.js';
+import { c as ce } from './index4.js';
 
 const attendanceActionDropdownStyle = ce({
   slots: {

package/dist/components/bcm-attendance-actions.js

@@ -4,14 +4,14 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } 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 './string-helper.js';
 import './element-dragger.js';
-import { B as Bcm } from './bcm.js';
+import { a as Bcm } from './bcm.js';
 import { c as classnames } from './index2.js';
-import { c as ce } from './index5.js';
+import { c as ce } from './index4.js';
 
 // --bcm-attendance-actions-button-bg: #F1F5F9; /* slate-100 */
 // --bcm-attendance-actions-button-text: #334155; /* slate-700 */

package/dist/components/bcm-autocomplete.js

@@ -4,10 +4,9 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-import { d as defineCustomElement$j } from './avatar.js';
-import { d as defineCustomElement$i } from './badge.js';
-import { d as defineCustomElement$h } from './checkbox.js';
-import { d as defineCustomElement$g } from './checkbox-lite.js';
+import { d as defineCustomElement$i } from './avatar.js';
+import { d as defineCustomElement$h } from './badge.js';
+import { d as defineCustomElement$g } from './checkbox.js';
 import { d as defineCustomElement$f } from './divider.js';
 import { d as defineCustomElement$e } from './empty.js';
 import { d as defineCustomElement$d } from './icon.js';
@@ -174,7 +173,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["bcm-autocomplete", "bcm-avatar", "bcm-badge", "bcm-checkbox", "bcm-checkbox-lite", "bcm-divider", "bcm-empty", "bcm-icon", "bcm-label", "bcm-listbox", "bcm-listbox-group", "bcm-listbox-item", "bcm-old-input", "bcm-old-search", "bcm-text", "bcm-tooltip", "bcm-treeview", "bcm-treeview-item", "bcm-typography"];
+  const components = ["bcm-autocomplete", "bcm-avatar", "bcm-badge", "bcm-checkbox", "bcm-divider", "bcm-empty", "bcm-icon", "bcm-label", "bcm-listbox", "bcm-listbox-group", "bcm-listbox-item", "bcm-old-input", "bcm-old-search", "bcm-text", "bcm-tooltip", "bcm-treeview", "bcm-treeview-item", "bcm-typography"];
   components.forEach(tagName => { switch (tagName) {
     case "bcm-autocomplete":
       if (!customElements.get(tagName)) {
@@ -182,21 +181,16 @@ function defineCustomElement$1() {
       }
       break;
     case "bcm-avatar":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$j();
-      }
-      break;
-    case "bcm-badge":
       if (!customElements.get(tagName)) {
         defineCustomElement$i();
       }
       break;
-    case "bcm-checkbox":
+    case "bcm-badge":
       if (!customElements.get(tagName)) {
         defineCustomElement$h();
       }
       break;
-    case "bcm-checkbox-lite":
+    case "bcm-checkbox":
       if (!customElements.get(tagName)) {
         defineCustomElement$g();
       }

package/dist/components/bcm-button-group.js

@@ -4,7 +4,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { G as Generate, s as snq } from './generate.js';
-import { a as Bcm } from './bcm.js';
+import { B as Bcm } from './bcm.js';
 import { c as classnames } from './index2.js';
 import { S as StringHelper } from './string-helper.js';
 

package/dist/components/bcm-caption.js

@@ -3,13 +3,14 @@
  * Copyright (c) Bromcom.
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { a as Bcm } from './bcm.js';
+import { B as Bcm } from './bcm.js';
 import './string-helper.js';
 import { C as CaptionTemplate } from './caption-template.js';
+import './checkbox.style.js';
 import './index2.js';
 import './types.js';
 import './color-helper.js';
-import './validators.js';
+import './popover.style.js';
 import './generate.js';
 import './number-helper.js';
 import './element-dragger.js';

package/dist/components/bcm-checkbox-group.js

@@ -2,24 +2,18 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { G as Generate, s as snq } from './generate.js';
-import { a as Bcm } from './bcm.js';
+import { B as Bcm } from './bcm.js';
 import { d as delay, g as getChildElements } from './utils.js';
-import { c as createStore } from './index4.js';
-import { L as LabelTemplate, d as defineCustomElement$3 } from './label.js';
+import { c as createStore } from './index5.js';
 import { I as IsLoad } from './is-load-decorator.js';
+import { c as ce } from './index4.js';
 import { d as defineCustomElement$5 } from './checkbox.js';
 import { d as defineCustomElement$4 } from './icon.js';
+import { d as defineCustomElement$3 } from './label.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 
-const CheckboxGroupTemplate = ({ customStyle, groupContainerClasses, onBcmSelect, items }) => {
-  return (h("div", { class: groupContainerClasses, style: customStyle }, items.childs && items.childs.map((checkbox) => {
-    return (h("bcm-checkbox", { id: checkbox.id, name: checkbox.name, color: checkbox.color, checked: checkbox.checked, disabled: checkbox.disabled, readonly: checkbox.readonly, required: checkbox.required, noCaption: checkbox.noCaption, "no-margin": true, size: checkbox.size, "full-width": checkbox.fullWidth, onClick: (e) => { !checkbox.disabled && !checkbox.readonly && (onBcmSelect(checkbox.id), e.preventDefault()); } }, checkbox.slot || checkbox.label));
-  })));
-};
-
 const { state } = createStore({
   group: new Map(),
   allChecked: true,
@@ -213,7 +207,41 @@ const checkBoxGroupState = {
   changeIndeterminate,
 };
 
-const groupCss = "@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-checkbox-group{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-bottom:8px}.bcm-checkbox-group.hidden{display:none}.bcm-checkbox-group__container{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;width:100%}.bcm-checkbox-group__container.full-width{max-width:100%}.bcm-checkbox-group__container.vertical{gap:8px;flex-direction:column}.bcm-checkbox-group__container.button{gap:unset}.bcm-checkbox-group__container.indeterminate{padding-top:8px;margin-top:8px;border-top:1px solid #efefef}";
+const checkboxGroupStyle = ce({
+  slots: {
+    host: [
+      "bcm-checkbox-group",
+      "bcm-ui-element bcm-ui-inputs",
+      "tw-flex tw-flex-col tw-items-start tw-w-full",
+      "tw-mb-2 tw-gap-1",
+    ],
+    checkboxGroupContainer: [
+      "bcm-checkbox-group__container",
+      "tw-flex tw-w-full",
+      "tw-items-start tw-justify-start",
+    ],
+  },
+  variants: {
+    direction: {
+      vertical: {
+        checkboxGroupContainer: ["tw-flex-col tw-gap-2"],
+      },
+      horizontal: {
+        checkboxGroupContainer: ["tw-flex-row tw-gap-2.5"],
+      },
+    },
+    indeterminate: {
+      true: {
+        checkboxGroupContainer: ["indeterminate tw-pt-2 tw-border-0 tw-border-t tw-border-solid tw-border-color"],
+      }
+    },
+  },
+  defaultVariants: {
+    direction: "vertical",
+    fullWidth: false,
+    indeterminate: false,
+  },
+});
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -384,44 +412,38 @@ const BcmCheckboxGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
   }
   render() {
     const items = this.getItems();
-    const { disabled, captionType, label, indeterminate, indeterminateState, required, direction, optionType, hidden, fullWidth, gap } = items;
-    const bcmChechboxGroup = classnames('bcm-checkbox-group', direction, optionType, {
-      hidden,
-      'full-width': fullWidth
-    });
-    const bcmChechboxGroupContainer = classnames('bcm-checkbox-group__container', optionType, {
-      [direction]: optionType === 'default',
-      indeterminate,
-      hidden,
-      'full-width': fullWidth
+    const { disabled, captionType, label, indeterminate, indeterminateState, required, direction, gap } = items;
+    const { host, checkboxGroupContainer } = checkboxGroupStyle({
+      direction,
+      indeterminate
     });
-    return (h(Host, { class: bcmChechboxGroup }, h("span", { hidden: true, id: `bcm-checkbox-group__items-${this._id}` }, h("slot", null)), h("div", { class: "bcm-checkbox-group__label" }, label &&
-      h("div", null, h(LabelTemplate, { size: this.size, type: captionType, value: label, required: required }))), indeterminate &&
-      h("bcm-checkbox", { onClick: (e) => { this.indeterminateClick(), e.preventDefault(); }, "no-caption": true, "no-margin": true, id: "bcm-indeterminate-element", indeterminate: indeterminateState, disabled: disabled }, "Check All"), h(CheckboxGroupTemplate, { items: items, groupContainerClasses: bcmChechboxGroupContainer, customStyle: gap && ({ 'gap': gap }), onBcmSelect: (id) => this.changeCheckBox(id) })));
+    return (h(Host, { class: host() }, h("span", { hidden: true, id: `bcm-checkbox-group__items-${this._id}` }, h("slot", null)), label && h("bcm-label", { type: captionType, value: label, required: required }), indeterminate &&
+      h("bcm-checkbox", { onClick: (e) => { this.indeterminateClick(), e.preventDefault(); }, "no-caption": true, "no-margin": true, id: "bcm-indeterminate-element", indeterminate: indeterminateState, disabled: disabled }, "Check All"), h("div", { class: checkboxGroupContainer(), style: gap && ({ 'gap': gap }) }, items.childs && items.childs.map((checkbox) => {
+      return (h("bcm-checkbox", { id: checkbox.id, name: checkbox.name, color: checkbox.color, checked: checkbox.checked, disabled: checkbox.disabled, readonly: checkbox.readonly, required: checkbox.required, noCaption: checkbox.noCaption, "no-margin": true, size: checkbox.size, "full-width": checkbox.fullWidth, onClick: (e) => { !checkbox.disabled && !checkbox.readonly && (this.changeCheckBox(checkbox.id), e.preventDefault()); } }, checkbox.slot || checkbox.label));
+    }))));
   }
   get el() { return this; }
   static get watchers() { return {
     "items": ["handleItemsChange"]
   }; }
-  static get style() { return groupCss; }
 }, [4, "bcm-checkbox-group", {
-    "_id": [1025],
-    "direction": [1025],
-    "items": [1025],
+    "_id": [1],
+    "direction": [1],
+    "items": [1],
     "indeterminate": [1028],
-    "name": [1025],
-    "value": [1032],
-    "disabled": [1028],
-    "readonly": [1028],
-    "hidden": [1028],
-    "required": [1028],
-    "label": [1025],
-    "gap": [1025],
-    "defaultValue": [1025, "default-value"],
-    "fullWidth": [1544, "full-width"],
+    "name": [1],
+    "value": [8],
+    "disabled": [4],
+    "readonly": [4],
+    "hidden": [4],
+    "required": [4],
+    "label": [1],
+    "gap": [1],
+    "defaultValue": [1, "default-value"],
+    "fullWidth": [520, "full-width"],
     "optionType": [1025, "option-type"],
     "buttonStyle": [1025, "button-style"],
-    "size": [1025],
+    "size": [1],
     "caption": [1025],
     "noCaption": [1028, "no-caption"],
     "captionType": [1025, "caption-type"],

package/dist/components/bcm-chip-group.js

@@ -4,28 +4,27 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } 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 './string-helper.js';
 import './element-dragger.js';
-import { B as Bcm } from './bcm.js';
+import { a as Bcm } from './bcm.js';
 import { C as CaptionTemplate } from './caption-template.js';
-import { c as classnames } from './index2.js';
+import './checkbox.style.js';
+import './index2.js';
 import './types.js';
-import { L as LabelTemplate, d as defineCustomElement$6 } from './label.js';
 import './types2.js';
 import { d as defineCustomElement$a } from './avatar.js';
 import { d as defineCustomElement$9 } from './badge.js';
 import { d as defineCustomElement$8 } from './chip.js';
 import { d as defineCustomElement$7 } from './icon.js';
+import { d as defineCustomElement$6 } from './label.js';
 import { d as defineCustomElement$5 } from './list.js';
 import { d as defineCustomElement$4 } from './rc-overflow.js';
 import { d as defineCustomElement$3 } from './search.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 
-const chipGroupCss = "@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-chip-group .bcm-chip{cursor:pointer}";
-
 const BcmChipGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -117,11 +116,9 @@ const BcmChipGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   }
   render() {
     const { label, required, noCaption, captionType, captionError, caption } = this;
-    const hostClasses = classnames("bcm-chip-group");
-    return (h(Host, { class: hostClasses }, label && (h("div", null, h(LabelTemplate, { type: captionType, value: label, required: required }))), h("div", { class: "tw-flex tw-flex-wrap tw-gap-1" }, h("slot", null)), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
+    return (h(Host, { class: "bcm-chip-group [&_.bcm-chip]:tw-cursor-pointer" }, label && h("bcm-label", { type: captionType, value: label, required: required }), h("div", { class: "tw-flex tw-flex-wrap tw-gap-1" }, h("slot", null)), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
   }
   get el() { return this; }
-  static get style() { return chipGroupCss; }
 }, [4, "bcm-chip-group", {
     "_id": [1537, "id"],
     "name": [1],

package/dist/components/bcm-color-input.js

@@ -4,12 +4,13 @@
  */
 import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } 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 './string-helper.js';
 import './element-dragger.js';
 import './bcm.js';
+import { c as ce } from './index4.js';
 import { d as defineCustomElement$7 } from './colorful.js';
 import { d as defineCustomElement$6 } from './icon.js';
 import { d as defineCustomElement$5 } from './input.js';
@@ -17,6 +18,19 @@ import { d as defineCustomElement$4 } from './label.js';
 import { d as defineCustomElement$3 } from './linked.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 
+const colorInputStyle = ce({
+  slots: {
+    host: [
+      "bcm-color-input",
+      "bcm-ui-element bcm-ui-inputs",
+      "tw-block",
+    ],
+    prefixIcon: "tw-flex tw-h-4 tw-w-4 tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-gray-100",
+  },
+  variants: {},
+  defaultVariants: {},
+});
+
 const BcmColorInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -64,7 +78,8 @@ const BcmColorInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     return typeof window !== "undefined" && "EyeDropper" in window;
   }
   render() {
-    return (h(Host, { class: "tw-block" }, h("bcm-input", { id: this._id + "-color", fullWidth: this.fullWidth, label: this.label, placeholder: this.placeholder, type: "text", "onBcm-change": e => this.handleInputChanged(e), value: this.value }, h("i", { slot: "prefix", class: "tw-flex tw-h-4 tw-w-4 tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-gray-100", style: {
+    const { host, prefixIcon } = colorInputStyle();
+    return (h(Host, { class: host() }, h("bcm-input", { id: this._id + "-color", fullWidth: this.fullWidth, label: this.label, placeholder: this.placeholder, type: "text", "onBcm-change": e => this.handleInputChanged(e), value: this.value }, h("i", { slot: "prefix", class: prefixIcon(), style: {
         backgroundColor: this.value,
       } }), this.isEyeDropperSupported() && h("i", { slot: "suffix", class: "far fa-eye-dropper", onClick: () => this.eyeDropper() })), h("bcm-linked", { targetId: this._id + "-color-container" }, h("bcm-colorful", { id: this._id + "-picker", color: this.value, onBcmChange: e => this.handleChange(e.detail) }))));
   }

package/dist/components/bcm-date-picker.js

@@ -5,9 +5,9 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
 import { I as IsLoad } from './is-load-decorator.js';
-import { D as DateTimeHelper } from './validators.js';
+import { D as DateTimeHelper } from './popover.style.js';
 import { G as Generate } from './generate.js';
-import { a as Bcm } from './bcm.js';
+import { B as Bcm } from './bcm.js';
 import { d as delay } from './utils.js';
 import { d as defineCustomElement$6 } from './datetime-picker.js';
 import { d as defineCustomElement$5 } from './icon.js';

package/dist/components/bcm-date.js

@@ -5,13 +5,14 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { I as IsLoad } from './is-load-decorator.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 { B as Bcm } from './bcm.js';
+import { a as Bcm } from './bcm.js';
 import { C as CaptionTemplate } from './caption-template.js';
+import './checkbox.style.js';
 import { c as classnames } from './index2.js';
 import './types.js';
 import './types2.js';

package/dist/components/bcm-drawer.js

@@ -4,17 +4,66 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } 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 './string-helper.js';
 import './element-dragger.js';
-import { B as Bcm } from './bcm.js';
-import { c as classnames } from './index2.js';
-import { d as defineCustomElement$3 } from './icon.js';
-import { d as defineCustomElement$2 } from './text.js';
+import { a as Bcm } from './bcm.js';
+import { c as ce } from './index4.js';
 
-const drawerCss = "@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-drawer{user-select:none;position:absolute;width:100vw;height:100vh;top:-100%;left:-100%;overflow:hidden;visibility:hidden}.bcm-drawer--open{visibility:visible;top:0;left:0}.bcm-drawer__content{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;user-select:text;position:fixed;width:100%;height:100%;background-color:#f1f5f9;z-index:10350;transition:transform 0.2s ease-in-out;transform:translateX(-100%);visibility:hidden;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}.bcm-drawer__content-body{padding:0 24px 24px 24px}.bcm-drawer__content.full-width{max-width:100%}.bcm-drawer__content-header{padding:24px 24px 0 24px;display:flex;justify-content:space-between;align-items:flex-start;color:var(--bcm-color-grey-8);margin-bottom:8px}.bcm-drawer__content-header-close{padding:4px 8px;margin-right:-4px;margin-top:-4px;color:var(--bcm-color-grey-7)}.bcm-drawer__content-header-close:hover{cursor:pointer;color:var(--bcm-color-grey-8)}.bcm-drawer__content-footer{padding:12px 24px}.bcm-drawer__content--position-left,.bcm-drawer__content--position-right{max-width:500px}.bcm-drawer__content--position-left.full-width,.bcm-drawer__content--position-right.full-width{max-width:100%}.bcm-drawer__content--position-top,.bcm-drawer__content--position-bottom{max-height:500px}.bcm-drawer__content--position-top.full-width,.bcm-drawer__content--position-bottom.full-width{max-height:100%}.bcm-drawer__content--position-left{transform:translateX(-100%);top:0;left:0}.bcm-drawer__content--position-top{transform:translateY(-100%);top:0;left:0}.bcm-drawer__content--position-right{transform:translateX(100%);top:0;right:0}.bcm-drawer__content--position-bottom{transform:translateY(100%);bottom:0;left:0}.bcm-drawer__content--open{transform:translateX(0);visibility:visible}.bcm-drawer__content--close{visibility:visible}.bcm-drawer__overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);z-index:10349;visibility:hidden;opacity:0;transition:opacity 0.3s ease-in-out}.bcm-drawer__overlay--close{opacity:0;visibility:visible;transform:translateX(-100%)}.bcm-drawer__overlay--open{opacity:1;visibility:visible;transform:translateX(0)}";
+const drawerStyle = ce({
+  slots: {
+    host: ["bcm-drawer bcm-ui-element bcm-ui-content-display", "tw-user-select-none tw-absolute tw-overflow-hidden", "tw-w-screen tw-h-screen"],
+    content: ["bcm-drawer__content", "tw-flex tw-flex-col tw-items-stretch tw-justify-start", "tw-w-full tw-h-full tw-bg-color-surface-modal", "tw-fixed tw-user-select-text", "tw-z-drawer tw-overflow-hidden"],
+    contentHeader: ["bcm-drawer__content-header", "tw-px-6 tw-pt-6 tw-pb-0 tw-flex tw-justify-between tw-items-start", "tw-text-color tw-mb-2"],
+    contentHeaderTitle: ["bcm-drawer__content-header-title", "tw-text-size-6 tw-font-semibold"],
+    contentHeaderClose: ["bcm-drawer__content-header-close tw-text-size-6", "tw-px-2 tw-py-1 -tw-mr-1 -tw-mt-1 tw-text-color", "hover:tw-cursor-pointer"],
+    contentBody: ["bcm-drawer__content-body", "tw-px-6 tw-pt-0 tw-pb-6"],
+    contentFooter: ["bcm-drawer__content-footer", "tw-py-3 tw-px-6"],
+    overlay: ["bcm-drawer__overlay", "tw-fixed tw-bg-color-transparent-background tw-z-drawer-bd", "tw-top-0 tw-left-0 tw-w-full tw-h-full"],
+  },
+  variants: {
+    isShow: {
+      true: {
+        host: ["bcm-drawer--open", "tw-visible tw-top-0 tw-left-0"],
+        content: ["bcm-drawer__content--open"],
+        overlay: ["bcm-drawer__overlay--open", "tw-opacity-100 tw-visible tw-transform tw--translate-x-0"],
+      },
+      false: {
+        host: ["-tw-top-full -tw-left-full tw-invisible"],
+        content: ["bcm-drawer__content--close"],
+        overlay: ["bcm-drawer__overlay--close", "tw-opacity-0 tw-invisible tw-transform tw--translate-x-full"],
+      },
+    },
+    fullWidth: {
+      true: {
+        content: ["full-width tw-max-w-full"],
+      },
+    },
+    position: {
+      right: {
+        content: ["bcm-drawer__content--position-right"],
+      },
+      left: {
+        content: ["bcm-drawer__content--position-left"],
+      },
+      top: {
+        content: ["bcm-drawer__content--position-top"],
+      },
+      bottom: {
+        content: ["bcm-drawer__content--position-bottom"],
+      },
+    },
+  },
+  defaultVariants: {
+    isShow: false,
+    fullWidth: false,
+    position: "right",
+  },
+});
+
+const drawerCss = "@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-drawer__content{transition:transform 0.2s ease-in-out;transform:translateX(-100%);visibility:hidden}.bcm-drawer__content--position-left,.bcm-drawer__content--position-right{max-width:500px}.bcm-drawer__content--position-left.full-width,.bcm-drawer__content--position-right.full-width{max-width:100%}.bcm-drawer__content--position-top,.bcm-drawer__content--position-bottom{max-height:500px}.bcm-drawer__content--position-top.full-width,.bcm-drawer__content--position-bottom.full-width{max-height:100%}.bcm-drawer__content--position-left{transform:translateX(-100%);top:0;left:0}.bcm-drawer__content--position-top{transform:translateY(-100%);top:0;left:0}.bcm-drawer__content--position-right{transform:translateX(100%);top:0;right:0}.bcm-drawer__content--position-bottom{transform:translateY(100%);bottom:0;left:0}.bcm-drawer__content--open{transform:translateX(0);visibility:visible}.bcm-drawer__content--close{visibility:visible}.bcm-drawer__overlay{transition:opacity 0.3s ease-in-out}";
 
 const BcmDrawer$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -65,19 +114,12 @@ const BcmDrawer$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.el.remove();
   }
   render() {
-    const hostClasses = classnames('bcm-drawer', {
-      'bcm-drawer--open': this._open,
-    });
-    const contentClasses = classnames('bcm-drawer__content', `bcm-drawer__content--position-${this.position}`, {
-      'bcm-drawer__content--open': this._open,
-      'bcm-drawer__content--close': this._close,
-      'full-width': this.fullWidth,
-    });
-    const overlay = classnames('bcm-drawer__overlay', {
-      'bcm-drawer__overlay--open': this._open,
-      'bcm-drawer__overlay--close': this._close,
+    const { host, content, overlay, contentHeader, contentHeaderTitle, contentHeaderClose, contentBody, contentFooter } = drawerStyle({
+      isShow: this._open,
+      fullWidth: this.fullWidth,
+      position: this.position,
     });
-    return (h(Host, { class: hostClasses }, h("div", { class: overlay, onClick: () => this.hide() }), h("div", { class: contentClasses }, h("div", { class: "bcm-drawer__content-header" }, h("bcm-text", { class: "bcm-drawer__content-header-title", "font-size": "6", weight: "600", color: "slate-800" }, this._title, " ", h("slot", { name: "header" })), h("div", { class: "bcm-drawer__content-header-close size-4", onClick: () => this.hide() }, h("bcm-icon", { icon: "fal fa-times" }))), h("div", { style: { 'overflow': 'auto', 'flex': '1' } }, h("div", { class: "bcm-drawer__content-body" }, h("slot", null))), h("div", { class: "bcm-drawer__content-footer" }, h("slot", { name: "footer" })))));
+    return (h(Host, { class: host() }, h("div", { class: overlay(), onClick: () => this.hide() }), h("div", { class: content() }, h("div", { class: contentHeader() }, h("span", { class: contentHeaderTitle() }, this._title, " ", h("slot", { name: "header" })), h("div", { class: contentHeaderClose(), onClick: () => this.hide() }, h("i", { class: "fa-solid fa-xmark" }))), h("div", { class: "tw-overflow-auto tw-flex-1" }, h("div", { class: contentBody() }, h("slot", null))), h("div", { class: contentFooter() }, h("slot", { name: "footer" })))));
   }
   get el() { return this; }
   static get watchers() { return {
@@ -98,23 +140,13 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["bcm-drawer", "bcm-icon", "bcm-text"];
+  const components = ["bcm-drawer"];
   components.forEach(tagName => { switch (tagName) {
     case "bcm-drawer":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, BcmDrawer$1);
       }
       break;
-    case "bcm-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "bcm-text":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
   } });
 }
 

package/dist/components/bcm-dropdown.js

@@ -7,7 +7,7 @@ import { c as classnames } from './index2.js';
 import { I as IsLoad } from './is-load-decorator.js';
 import { J as JsonParse } from './json-parse-decarator.js';
 import { G as Generate } from './generate.js';
-import { a as Bcm } from './bcm.js';
+import { B as Bcm } from './bcm.js';
 import { d as defineCustomElement$5 } from './button.js';
 import { d as defineCustomElement$4 } from './icon.js';
 import { d as defineCustomElement$3 } from './linked.js';
@@ -41,7 +41,7 @@ const BcmDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.kind = Bcm.Kind.solid;
     this.icon = undefined;
     this.href = undefined;
-    this.target = undefined;
+    this.target = Bcm.Target["_blank"];
     this.value = undefined;
     this.noStyle = false;
     this.dropdownIcon = 'fas fa-angle-down';
@@ -117,7 +117,7 @@ const BcmDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "kind": [1025],
     "icon": [1025],
     "href": [1025],
-    "target": [1025],
+    "target": [1],
     "value": [1025],
     "noStyle": [1028, "no-style"],
     "dropdownIcon": [1025, "dropdown-icon"],

package/dist/components/bcm-expansion-panel-description.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BcmExpansionPanelDescription extends Components.BcmExpansionPanelDescription, HTMLElement {}
+export const BcmExpansionPanelDescription: {
+  prototype: BcmExpansionPanelDescription;
+  new (): BcmExpansionPanelDescription;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/bcm-expansion-panel-description.js

@@ -0,0 +1,36 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+
+const BcmExpansionPanelDescription$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.el.slot = "description";
+  }
+  render() {
+    return (h(Host, { class: classnames("") }, h("slot", null)));
+  }
+  get el() { return this; }
+}, [4, "bcm-expansion-panel-description"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-expansion-panel-description"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-expansion-panel-description":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmExpansionPanelDescription$1);
+      }
+      break;
+  } });
+}
+
+const BcmExpansionPanelDescription = BcmExpansionPanelDescription$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmExpansionPanelDescription, defineCustomElement };

package/dist/components/bcm-expansion-panel-extra.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BcmExpansionPanelExtra extends Components.BcmExpansionPanelExtra, HTMLElement {}
+export const BcmExpansionPanelExtra: {
+  prototype: BcmExpansionPanelExtra;
+  new (): BcmExpansionPanelExtra;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;