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

package/dist/components/bcm-expansion-panel-extra.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 BcmExpansionPanelExtra$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.el.slot = "extra";
+  }
+  render() {
+    return (h(Host, { class: classnames("bcm-expansion-panel__header-content tw-flex tw-items-center tw-gap-1") }, h("slot", null)));
+  }
+  get el() { return this; }
+}, [4, "bcm-expansion-panel-extra"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-expansion-panel-extra"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-expansion-panel-extra":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmExpansionPanelExtra$1);
+      }
+      break;
+  } });
+}
+
+const BcmExpansionPanelExtra = BcmExpansionPanelExtra$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmExpansionPanelExtra, defineCustomElement };

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

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

package/dist/components/bcm-expansion-panel-header.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 BcmExpansionPanelHeader$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.el.slot = "header";
+  }
+  render() {
+    return (h(Host, { class: classnames("bcm-expansion-panel__header-content tw-flex tw-items-center tw-justify-start tw-gap-1") }, h("slot", null)));
+  }
+  get el() { return this; }
+}, [4, "bcm-expansion-panel-header"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-expansion-panel-header"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-expansion-panel-header":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmExpansionPanelHeader$1);
+      }
+      break;
+  } });
+}
+
+const BcmExpansionPanelHeader = BcmExpansionPanelHeader$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmExpansionPanelHeader, defineCustomElement };

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

@@ -3,42 +3,125 @@
  * Copyright (c) Bromcom.
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { G as Generate } from './generate.js';
-import { c as classnames } from './index2.js';
-import { S as StringHelper } from './string-helper.js';
 import { C as ColorHelper } from './color-helper.js';
-import { d as defineCustomElement$3 } from './icon.js';
+import { G as Generate } from './generate.js';
+import { c as ce } from './index4.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 
-const expansionPanelCss = "@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-expansion-panel{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:block;width:100%;background-color:var(--bcm-new-ds-color-white);border-radius:8px;border:1px solid var(--bcm-new-ds-color-slate-300);box-sizing:border-box}.bcm-expansion-panel+.bcm-expansion-panel{margin-top:4px}.bcm-expansion-panel__header{display:flex;align-items:center;justify-content:flex-start;user-select:none;min-height:50px;border-radius:8px;padding:4px 24px;color:var(--bcm-new-ds-color-slate-700);font-weight:600}.bcm-expansion-panel__header-content{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:8px}.bcm-expansion-panel__header:hover{cursor:pointer}.bcm-expansion-panel__header-title{order:1;user-select:none;width:100%;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:4px}.bcm-expansion-panel__header-title-description{margin-left:calc(4px / 2);color:var(--bcm-new-ds-color-slate-500);font-size:12px;line-height:calc(12px + 8px)}.bcm-expansion-panel__header-tooltip{line-height:1;color:var(--bcm-new-ds-color-slate-800)}.bcm-expansion-panel__header-toggle{height:100%;order:0;width:20px;display:flex;align-items:center;justify-content:center;transform:rotate(0deg);transition:transform 0.2s ease-in-out;font-size:12px}.bcm-expansion-panel__header-extra{display:none}.bcm-expansion-panel__header-extra:not(:empty){cursor:default;display:flex;align-items:center;order:5;line-height:1;padding:0 8px}.bcm-expansion-panel__header-extra .bcm-expansion-panel__extra-content{display:flex;align-items:center}.bcm-expansion-panel__body{display:none;padding:12px 24px}.bcm-expansion-panel--icon-right .bcm-expansion-panel__header{justify-content:space-between;padding-left:24px}.bcm-expansion-panel--icon-right .bcm-expansion-panel__header-toggle{order:6}.bcm-expansion-panel--invalid .bcm-expansion-panel__header-toggle,.bcm-expansion-panel--invalid .bcm-expansion-panel__header-content{color:var(--bcm-new-ds-color-red-500)}.bcm-expansion-panel--expanded{border-bottom:1px solid var(--bcm-color-grey-5)}.bcm-expansion-panel--expanded .bcm-expansion-panel__header{border-radius:8px 8px 0 0}.bcm-expansion-panel--expanded .bcm-expansion-panel__header-toggle{transform:rotate(180deg)}.bcm-expansion-panel--expanded .bcm-expansion-panel__body{display:block}";
+const expansionPanelStyle = ce({
+  slots: {
+    base: "",
+    host: ["bcm-expansion-panel bcm-ui-element bcm-ui-feedback", "tw-block tw-w-full tw-bg-color-surface-card tw-rounded-cards tw-border tw-border-solid tw-border-color", "[&+.bcm-expansion-panel]:tw-mt-1"],
+    header: [
+      "bcm-expansion-panel__header",
+      "tw-flex tw-items-center tw-justify-start tw-gap-2 tw-select-none tw-min-h-14 tw-p-4 tw-text-color  tw-cursor-pointer",
+      "tw-border-solid tw-border-t-0 tw-border-x-0 tw-border-b",
+    ],
+    headerTitle: ["bcm-expansion-panel__header-title", "tw-order-1 tw-select-none tw-w-full tw-flex tw-items-baseline tw-justify-start tw-gap-2", "tw-text-size-6 tw-font-semibold "],
+    headerTitleDescription: ["bcm-expansion-panel__header-title-description", "tw-text-color-helper tw-text-size-3 tw-font-normal"],
+    headerTooltip: ["bcm-expansion-panel__header-tooltip", "tw-leading-none tw-text-size-5 tw-text-color-helper"],
+    headerExtra: ["bcm-expansion-panel__header-extra", "empty:tw-hidden tw-flex tw-items-center tw-order-5 tw-leading-none tw-py-0 tw-px-2"],
+    headerToggle: ["bcm-expansion-panel__header-toggle", "tw-h-full tw-w-5 tw-flex tw-items-center tw-justify-center  tw-transition-transform tw-duration-200 tw-text-size-5"],
+    body: "bcm-expansion-panel__body tw-p-4",
+  },
+  variants: {
+    valid: {
+      true: {
+        host: "bcm-expansion-panel--valid",
+      },
+      false: {
+        host: "bcm-expansion-panel--invalid",
+        headerToggle: "tw-text-red-500",
+        headerTitle: "tw-text-red-500",
+      },
+    },
+    expanded: {
+      true: {
+        host: ["bcm-expansion-panel--expanded", "tw-border-b"],
+        header: "tw-rounded-t-cards tw-rounded-b-none tw-border-b-color",
+        headerToggle: "tw-rotate-180",
+        body: "tw-block",
+      },
+      false: {
+        host: "bcm-expansion-panel--collapsed",
+        header: "tw-rounded-cards  tw-border-b-transparent",
+        headerToggle: "tw-rotate-0 ",
+        body: "tw-hidden",
+      },
+    },
+    disabled: {
+      true: {
+        host: "bcm-expansion-panel--disabled ",
+      },
+      false: {
+        host: "",
+      },
+    },
+    hideToggle: {
+      true: {
+        host: "bcm-expansion-panel--hide-toggle",
+      },
+      false: {
+        host: "",
+      },
+    },
+    expandIconPosition: {
+      right: {
+        host: "bcm-expansion-panel--icon-right",
+        // header: "tw-justify-between tw-pl-6",
+        headerToggle: "tw-order-6",
+      },
+      left: {
+        host: "bcm-expansion-panel--icon-left ",
+        // headerToggle: "tw-pr-6",
+      },
+    },
+    hidden: {
+      true: {
+        host: "hidden",
+      },
+      false: {
+        host: "",
+      },
+    },
+  },
+  defaultVariants: {
+    valid: true,
+    expanded: false,
+    disabled: false,
+    hideToggle: false,
+    expandIconPosition: "right",
+    hidden: false,
+  },
+});
 
 const BcmExpansionPanel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.bcmOpen = createEvent(this, "bcm-open", 7);
+    this.bcmExpansionPanelOpen = createEvent(this, "bcm-expansion-panel-open", 7);
     this.bcmClose = createEvent(this, "bcm-close", 7);
+    this.bcmExpansionPanelClose = createEvent(this, "bcm-expansion-panel-close", 7);
     this.bcmExtra = createEvent(this, "bcm-extra", 7);
+    this.bcmExpansionPanelExtra = createEvent(this, "bcm-expansion-panel-extra", 7);
+    this.bcmExpansionPanelToggle = createEvent(this, "bcm-expansion-panel-toggle", 7);
     this._id = Generate.UID();
     this.expanded = false;
     this.disabled = false;
     this.hidden = false;
     this.valid = true;
     this.hideToggle = false;
-    this.expandIconPosition = 'right';
-    this.headerColor = 'white';
+    this.expandIconPosition = "right";
     this.tooltip = undefined;
     this.tooltipDefaultValue = {
-      message: '',
-      placement: 'top',
-      trigger: 'hover',
-      icon: 'fas fa-question-circle',
-      color: 'grey-8',
+      message: "",
+      placement: "top",
+      trigger: "hover",
+      icon: "fas fa-question-circle",
+      color: "slate-700",
     };
   }
-  componentWillRender() {
-    this.restoreSlots();
-  }
   componentDidLoad() {
     this.checkExpanded();
   }
@@ -57,81 +140,64 @@ const BcmExpansionPanel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     return tool;
   }
   checkExpanded() {
-    this.expanded = !!this.el['expanded'];
-  }
-  restoreSlots() {
-    const slots = this.el.querySelectorAll('bcm-expansion-panel-header, bcm-expansion-panel-description, bcm-expansion-panel-extra');
-    if (slots) {
-      slots.forEach(element => {
-        let slotName = StringHelper.lowercase(StringHelper.split(element.nodeName, '-').pop());
-        element.slot = slotName;
-        element.classList.add(`bcm-expansion-panel__${slotName}-content`);
-        let color = element.getAttribute('color');
-        if (color) {
-          color = color == 'white' ? color : color + '-50';
-          this.headerColor = color;
-        }
-      });
-    }
+    this.expanded = !!this.el["expanded"];
   }
   toggle() {
     if (this.disabled) {
       return;
     }
     this.expanded = !this.expanded;
+    this.bcmExpansionPanelToggle.emit(this._id);
     if (this.expanded) {
       this.bcmOpen.emit(this._id);
+      this.bcmExpansionPanelOpen.emit(this._id);
     }
     else {
       this.bcmClose.emit(this._id);
+      this.bcmExpansionPanelClose.emit(this._id);
     }
   }
   clickExtra(e) {
     e.stopPropagation();
     this.bcmExtra.emit(e);
+    this.bcmExpansionPanelExtra.emit(e);
   }
   render() {
     const { _id, expanded, disabled, hidden, hideToggle, tooltip, valid } = this;
     const { message, placement, icon, trigger, color } = tooltip ? this.createTooltip() : {};
-    const hostClasses = classnames('bcm-expansion-panel', valid ? 'bcm-expansion-panel--valid' : 'bcm-expansion-panel--invalid', {
-      'bcm-expansion-panel--expanded': expanded,
-      'bcm-expansion-panel--disabled': disabled,
-      'bcm-expansion-panel--hide-toggle': hideToggle,
-      'bcm-expansion-panel--icon-right': this.expandIconPosition === 'right',
+    const { host, header, headerTitle, headerTitleDescription, headerTooltip, headerExtra, headerToggle, body } = expansionPanelStyle({
+      valid,
+      expanded,
+      disabled,
+      hideToggle,
+      expandIconPosition: this.expandIconPosition,
       hidden,
     });
-    return (h(Host, { class: hostClasses }, h("div", { class: "bcm-expansion-panel__header", onClick: () => this.toggle(), style: { 'background-color': ColorHelper.dsColor(this.headerColor) } }, h("div", { class: "bcm-expansion-panel__header-title" }, h("span", { id: _id + '-header' }, h("slot", { name: "header" })), tooltip && (h("span", { class: "bcm-expansion-panel__header-tooltip", style: Object.assign({}, color && { color: ColorHelper.convertColorToHex(color) }) }, h("bcm-tooltip", { message: message, placement: placement, trigger: trigger, "aria-label": message }, h("bcm-icon", { color: color, icon: icon })))), h("span", { id: _id + '-description', class: "bcm-expansion-panel__header-title-description" }, h("slot", { name: "description" }))), h("span", { id: _id + '-extra', class: "bcm-expansion-panel__header-extra", onClick: (e) => this.clickExtra(e) }, h("slot", { name: "extra" })), !hideToggle && (h("div", { class: "bcm-expansion-panel__header-toggle" }, h("bcm-icon", { icon: "far fa-chevron-down" })))), h("div", { class: "bcm-expansion-panel__body", id: _id + '-body' }, h("slot", null))));
+    return (h(Host, { class: host() }, h("div", { class: header(), onClick: () => this.toggle() }, h("div", { class: headerTitle() }, h("span", { id: _id + "-header" }, h("slot", { name: "header" })), tooltip && (h("span", { class: headerTooltip(), style: Object.assign({}, (color && { color: ColorHelper.getTwColor(color) })) }, h("bcm-tooltip", { message: message, placement: placement, trigger: trigger, "aria-label": message }, h("i", { class: icon })))), h("span", { id: _id + "-description", class: headerTitleDescription() }, h("slot", { name: "description" }))), h("span", { id: _id + "-extra", class: headerExtra(), onClick: e => this.clickExtra(e) }, h("slot", { name: "extra" })), !hideToggle && (h("div", { class: headerToggle() }, h("i", { class: "fas fa-chevron-down" })))), h("div", { class: body(), id: _id + "-body" }, h("slot", null))));
   }
   get el() { return this; }
-  static get style() { return expansionPanelCss; }
 }, [4, "bcm-expansion-panel", {
-    "_id": [1537, "id"],
+    "_id": [513, "id"],
     "expanded": [1028],
-    "disabled": [1028],
-    "hidden": [1028],
-    "valid": [1028],
-    "hideToggle": [1028, "hide-toggle"],
-    "expandIconPosition": [1025, "expand-icon-position"],
-    "tooltip": [1032],
-    "headerColor": [32],
+    "disabled": [4],
+    "hidden": [4],
+    "valid": [4],
+    "hideToggle": [4, "hide-toggle"],
+    "expandIconPosition": [1, "expand-icon-position"],
+    "tooltip": [8],
     "tooltipDefaultValue": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["bcm-expansion-panel", "bcm-icon", "bcm-tooltip"];
+  const components = ["bcm-expansion-panel", "bcm-tooltip"];
   components.forEach(tagName => { switch (tagName) {
     case "bcm-expansion-panel":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, BcmExpansionPanel$1);
       }
       break;
-    case "bcm-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
     case "bcm-tooltip":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();

package/dist/components/bcm-form-2.js

@@ -6,7 +6,7 @@ import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } fr
 import { I as IsLoad } from './is-load-decorator.js';
 import { G as Generate, s as snq } from './generate.js';
 import { S as StringHelper } from './string-helper.js';
-import { a as Bcm } from './bcm.js';
+import { B as Bcm } from './bcm.js';
 
 const BcmFormComponents = [
   'BCM-INPUT',

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

@@ -4,17 +4,18 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host, Fragment } 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 './checkbox.style.js';
 import { c as classnames } from './index2.js';
 import './types.js';
 import './types2.js';
-import { c as ce } from './index5.js';
+import { c as ce } from './index4.js';
 import { d as defineCustomElement$9 } from './button.js';
 import { d as defineCustomElement$8 } from './colorful.js';
 import { d as defineCustomElement$7 } from './icon.js';

package/dist/components/bcm-item.js

@@ -4,7 +4,7 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { G as Generate } 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 { C as ColorHelper } from './color-helper.js';
 

package/dist/components/bcm-modal-2-footer.js

@@ -4,7 +4,7 @@
  */
 import { proxyCustomElement, HTMLElement, 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';

package/dist/components/bcm-modal-2-header.js

@@ -4,7 +4,7 @@
  */
 import { proxyCustomElement, HTMLElement, 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';

package/dist/components/bcm-modal-2.js

@@ -4,13 +4,13 @@
  */
 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 { d as delay } from './utils.js';
-import { B as Bcm } from './bcm.js';
+import { a as Bcm } from './bcm.js';
 import { c as classnames } from './index2.js';
 import { d as defineCustomElement$3 } from './overlay.js';
 import { d as defineCustomElement$2 } from './scroll-area.js';

package/dist/components/bcm-modal-footer.d.ts

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

package/dist/components/bcm-modal-footer.js

@@ -0,0 +1,47 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import './color-helper.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 { m as modalStyle } from './modal.style.js';
+
+const BcmModalFooter$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this._id = Generate.UID();
+    this.el.slot = "footer";
+  }
+  render() {
+    const { footerContent } = modalStyle();
+    return (h(Host, { class: footerContent() }, h("slot", null)));
+  }
+  get el() { return this; }
+}, [4, "bcm-modal-footer", {
+    "_id": [513, "id"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-modal-footer"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-modal-footer":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmModalFooter$1);
+      }
+      break;
+  } });
+}
+
+const BcmModalFooter = BcmModalFooter$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmModalFooter, defineCustomElement };

package/dist/components/bcm-modal-header.d.ts

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

package/dist/components/bcm-modal-header.js

@@ -0,0 +1,45 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import './color-helper.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';
+
+const BcmModalHeader$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this._id = Generate.UID();
+    this.el.slot = "header";
+  }
+  render() {
+    return (h(Host, { class: "tw-inline" }, h("slot", null)));
+  }
+  get el() { return this; }
+}, [4, "bcm-modal-header", {
+    "_id": [513, "id"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-modal-header"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-modal-header":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmModalHeader$1);
+      }
+      break;
+  } });
+}
+
+const BcmModalHeader = BcmModalHeader$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmModalHeader, defineCustomElement };

package/dist/components/bcm-modal.js

@@ -3,14 +3,13 @@
  * Copyright (c) Bromcom.
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
-import { a as Bcm } from './bcm.js';
+import { B as Bcm } from './bcm.js';
 import { S as StringHelper } from './string-helper.js';
 import { S as SlotTemplate } from './slot-template.js';
 import { G as Generate } from './generate.js';
-import { d as defineCustomElement$2 } from './icon.js';
+import { m as modalStyle } from './modal.style.js';
 
-const modalCss = "@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-modal{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;flex-wrap:nowrap;width:100%;height:100%;position:fixed;z-index:-1;opacity:0;top:0;left:0;visibility:hidden;overflow:auto;padding:24px;transition:opacity 0.5s ease, visibility 0.4s ease-in-out, 0.3s z-index}.bcm-modal__show{opacity:1;z-index:10500;visibility:visible;transition:opacity 0.2s ease, visibility 0.4s ease-in-out, 0.3s z-index}.bcm-modal__show .bcm-modal__container{transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;transform:translateY(0)}.bcm-modal .overlay{position:fixed;width:100vw;height:100vh;z-index:1;top:0;left:0;opacity:0.6;background-color:var(--bcm-new-ds-color-slate-900)}.bcm-modal__container{display:flex;flex-direction:column;width:100%;box-shadow:0 2px 6px 1px rgba(17, 24, 38, 0.1);border-radius:8px;background-color:var(--bcm-new-ds-color-white);z-index:2;transform:translateY(-50px);transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out}.bcm-modal__container.portrait{max-width:312px}.bcm-modal__container.landscape{max-width:475px}.bcm-modal__container.small{max-width:576px}.bcm-modal__container.medium{max-width:768px}.bcm-modal__container.large{max-width:992px}.bcm-modal__container.xlarge{max-width:1024px}.bcm-modal__container.xxlarge{max-width:1200px}.bcm-modal__container.xxxlarge{max-width:1700px}.bcm-modal__container.full-width{width:100%;max-width:100%}.bcm-modal__container.custom-size main{overflow:auto;height:100%;width:100%}.bcm-modal__container-main{color:var(--bcm-color-grey-8);padding:0}.bcm-modal__container-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:nowrap;padding:12px 24px;font-size:16px;line-height:calc(16px + 8px);font-weight:500;color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-new-ds-color-slate-100);position:relative}.bcm-modal__container-header span.full-width{width:100%}.bcm-modal__container-header-close{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;padding:8px;cursor:pointer;color:var(--bcm-new-ds-color-slate-500);transition:color 0.1s ease-in-out}.bcm-modal__container-header-close:hover{color:var(--bcm-new-ds-color-slate-600)}.bcm-modal__container-header-close:active{color:var(--bcm-new-ds-color-slate-700)}.bcm-modal__container-header-close:focus-visible{color:var(--bcm-new-ds-color-slate-800)}.bcm-modal__container-header:after{border-radius:8px 8px 0 0;content:\"\";display:block;width:100%;height:4px;background-color:var(--bcm-color-primary-500);position:absolute;top:-4px;left:0}.bcm-modal__container-footer-content{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-end;flex-wrap:nowrap;padding:12px 24px 24px;grid-gap:8px}";
+const modalCss = "@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-modal{transition:opacity 0.5s ease, visibility 0.4s ease-in-out, 0.3s z-index}.bcm-modal__show{transition:opacity 0.2s ease, visibility 0.4s ease-in-out, 0.3s z-index}.bcm-modal__show .bcm-modal__container{transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;transform:translateY(0)}.bcm-modal__container{transform:translateY(-100px);transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out}";
 
 const BcmModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -35,8 +34,6 @@ const BcmModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (bcmSlots) {
       bcmSlots.forEach(el => {
         let slotName = StringHelper.lowercase(StringHelper.split(el.nodeName, '-').pop());
-        el.slot = slotName;
-        el.classList.add(`bcm-modal__container-${slotName}-content`);
         this.modalSlots[slotName] = el;
       });
     }
@@ -122,25 +119,20 @@ const BcmModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     document.body.classList.remove(disableScrollClass);
   }
   render() {
-    const { isShow, size, fullWidth, hidden, width, height } = this;
-    const bcmModalContainer = classnames('bcm-modal__container', size, {
-      'custom-size': width || height,
-      'full-width': fullWidth,
-      'bcm-modal__show': isShow,
+    const { isShow, size, fullWidth, width, height } = this;
+    const { host, container, main, headerHost, headerClose, footerHost, overlay, } = modalStyle({
+      size,
+      isShow,
+      fullWidth,
     });
-    const bcmModalHostClasses = classnames('bcm-modal', {
-      hidden,
-      'bcm-modal__show': isShow,
-    });
-    const mainClasses = classnames('bcm-modal__container-main', 'size-2');
     const FooterTemplate = () => {
-      return (this.modalSlots['footer'] && (h("footer", { class: "bcm-modal__container-footer" }, h("slot", { name: "footer" }))));
+      return (this.modalSlots['footer'] && (h("footer", { class: footerHost() }, h("slot", { name: "footer" }))));
     };
     const HeaderTemplate = () => {
-      return (this.modalSlots['header'] && (h("header", { class: "bcm-modal__container-header" }, h(SlotTemplate, { name: "header", className: 'full-width' }), h("div", { class: "bcm-modal__container-header-close", onClick: () => this.hide() }, h("bcm-icon", { icon: "far fa-times" })))));
+      return (this.modalSlots['header'] && (h("header", { class: headerHost() }, h("slot", { name: "header" }), h("div", { class: headerClose(), onClick: () => this.hide() }, h("i", { class: "fa-solid fa-xmark" })))));
     };
     const customStyle = Object.assign(Object.assign({}, (width && { width: width })), (height && { height: height }));
-    return (h(Host, { class: `tw-overscroll-contain  ${bcmModalHostClasses}` }, h("div", { class: "overlay", onClick: () => this.handleBackdrop() }), h("div", { class: bcmModalContainer, style: customStyle }, h(HeaderTemplate, null), h("main", { class: mainClasses }, h("article", null, h(SlotTemplate, null))), h(FooterTemplate, null))));
+    return (h(Host, { class: host() }, h("div", { class: overlay(), onClick: () => this.handleBackdrop() }), h("div", { class: container(), style: customStyle }, h(HeaderTemplate, null), h("main", { class: main() }, h("article", null, h(SlotTemplate, null))), h(FooterTemplate, null))));
   }
   get el() { return this; }
   static get watchers() { return {
@@ -163,18 +155,13 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["bcm-modal", "bcm-icon"];
+  const components = ["bcm-modal"];
   components.forEach(tagName => { switch (tagName) {
     case "bcm-modal":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, BcmModal$1);
       }
       break;
-    case "bcm-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
   } });
 }