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

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

@@ -4,14 +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 { S as StringHelper } from './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 CaptionTemplate } from './caption-template.js';
+import './checkbox.style.js';
 import { c as classnames } from './index2.js';
 import './types.js';
 import './types2.js';
@@ -281,7 +282,7 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         this.value = floatValue;
         this._onChange.emit(e);
       } });
-    return (h(Host, { class: host() }, label && h("bcm-label", { size: size, type: captionType, value: label, required: required, htmlFor: _id + "-base-input", id: _id + "-label" }), h("div", { class: inputContainer() }, h("div", { class: slotClass() }, h("slot", { name: "prefix" }, _prefix && _prefix.length > 0 && h("span", { innerHTML: _prefix }))), h("bcm-react-number", { disabled: disabled, class: "tw-flex-1", options: generalProps }), h("div", { class: slotClass() }, !disabled && isActiveClearable && (h("button", { class: clearButton(), onClick: event => this.handleClear(event) }, h("i", { class: "far fa-times" }))), h("slot", { name: "suffix" }, _suffix && _suffix.length > 0 && h("span", { innerHTML: _suffix })), h("div", { class: controls() }, h("button", { type: "button", disabled: disabled, class: classnames(controlsBtn(), controlsBtnUp()), onClick: this.up.bind(this), "aria-label": "Increase value" }, h("i", { class: "fas fa-caret-up" })), h("div", { class: controlsDivider() }), h("button", { type: "button", disabled: disabled, class: classnames(controlsBtn(), controlsBtnDown()), onClick: this.down.bind(this), "aria-label": "Decrease value" }, h("i", { class: "fas fa-caret-down" }))))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: this.customErrorMessage })));
+    return (h(Host, { class: host() }, label && h("bcm-label", { size: size, type: captionType, value: label, required: required, htmlFor: _id + "-base-input", id: _id + "-label" }), h("div", { class: inputContainer(), id: _id + "-container" }, h("div", { class: slotClass() }, h("slot", { name: "prefix" }, _prefix && _prefix.length > 0 && h("span", { innerHTML: _prefix }))), h("bcm-react-number", { disabled: disabled, class: "tw-flex-1", options: generalProps }), h("div", { class: slotClass() }, !disabled && isActiveClearable && (h("button", { class: clearButton(), onClick: event => this.handleClear(event) }, h("i", { class: "far fa-times" }))), h("slot", { name: "suffix" }, _suffix && _suffix.length > 0 && h("span", { innerHTML: _suffix })), h("div", { class: controls() }, h("button", { tabindex: "-1", type: "button", disabled: disabled, class: classnames(controlsBtn(), controlsBtnUp()), onClick: this.up.bind(this), "aria-label": "Increase value" }, h("i", { class: "fas fa-caret-up" })), h("div", { class: controlsDivider() }), h("button", { tabindex: "-1", type: "button", disabled: disabled, class: classnames(controlsBtn(), controlsBtnDown()), onClick: this.down.bind(this), "aria-label": "Decrease value" }, h("i", { class: "fas fa-caret-down" }))))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: this.customErrorMessage })));
   }
   get el() { return this; }
   static get watchers() { return {

package/dist/components/bcm-popconfirm-box-v2.d.ts

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

package/dist/components/bcm-popconfirm-box-v2.js

@@ -0,0 +1,132 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { B as Bcm } from './bcm.js';
+import { c as ce } from './index4.js';
+import { C as ColorHelper } from './color-helper.js';
+import { d as defineCustomElement$2 } from './button.js';
+
+const popConfirmStyle = ce({
+  slots: {
+    host: "bcm-ui-element tw-absolute tw-min-w-80 tw-shadow-2 tw-rounded-lg tw-bg-white tw-z-tooltip tw-invisible",
+    container: "tw-flex tw-flex-col tw-items-center tw-justify-start tw-gap-4 tw-text-wrap  tw-w-full",
+    header: "tw-flex tw-flex-row tw-justify-between tw-items-center tw-font-medium tw-w-full",
+    title: "tw-flex tw-flex-row tw-items-center tw-justify-start tw-gap-2",
+    body: "tw-font-normal",
+    footer: "tw-flex tw-flex-row tw-items-center tw-justify-center tw-w-full",
+    icon: ""
+  },
+  variants: {
+    size: {
+      small: {
+        container: "tw-p-4",
+        header: "tw-text-base",
+        body: "tw-text-2",
+        footer: "tw-gap-2"
+      },
+      medium: {
+        container: "tw-p-6",
+        header: "tw-text-5",
+        body: "tw-text-3",
+        footer: "tw-gap-2"
+      },
+      large: {
+        container: "tw-p-8 tw-gap-6",
+        header: "tw-text-6",
+        body: "tw-text-base",
+        footer: "tw-gap-3"
+      },
+    },
+    status: {
+      default: {},
+      info: {
+        icon: "tw-text-blue-600"
+      },
+      warning: {
+        icon: "tw-text-amber-600"
+      },
+      success: {
+        icon: "tw-text-emerald-600"
+      },
+      error: {
+        icon: "tw-text-red-600"
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+    status: "info",
+  },
+});
+
+const statusColor = {
+  info: "blue",
+  success: "emerald",
+  warning: "amber",
+  error: "red",
+};
+const statusIcons = {
+  info: "fa-solid fa-circle-info",
+  success: "fa-solid fa-circle-check",
+  warning: "fa-solid fa-triangle-exclamation",
+  error: "fa-solid fa-circle-x",
+};
+const BcmPopconfirmBoxV2$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.bcmCancel = createEvent(this, "bcm-cancel", 3);
+    this.description = "";
+    this.headerText = "";
+    this.cancelText = "Cancel";
+    this.okeyText = "Save";
+    this.size = Bcm.Size.medium;
+    this.status = Bcm.Status.info;
+    this.statusIcon = true;
+  }
+  render() {
+    var _a;
+    // style  props
+    const { size, status } = this;
+    // base props
+    const { headerText, cancelText, okeyText, description, statusIcon } = this;
+    // classes
+    const { host, container, header, title, body, footer, icon } = popConfirmStyle({ size, status });
+    const arrowColor = (_a = ColorHelper.getTwColorToHex(statusColor[status])[600]) !== null && _a !== void 0 ? _a : "white";
+    return (h(Host, { class: host(), style: { '--arrow-color': arrowColor } }, h("div", { class: container() }, h("header", { class: header() }, h("div", { class: title() }, statusIcon && (h("span", { class: icon() }, h("i", { class: statusIcons[status] }))), h("span", null, headerText))), h("main", { class: body() }, h("slot", null, description)), h("footer", { class: footer() }, h("bcm-button", { kind: "ghost", "full-width": true, size: size, onClick: () => this.bcmCancel.emit() }, cancelText), h("bcm-button", { color: statusColor[status], "full-width": true, size: size }, okeyText)))));
+  }
+  get el() { return this; }
+}, [4, "bcm-popconfirm-box-v2", {
+    "description": [1],
+    "headerText": [1, "header-text"],
+    "cancelText": [1, "cancel-text"],
+    "okeyText": [1, "okey-text"],
+    "size": [1],
+    "status": [1],
+    "statusIcon": [4, "status-icon"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-popconfirm-box-v2", "bcm-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-popconfirm-box-v2":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmPopconfirmBoxV2$1);
+      }
+      break;
+    case "bcm-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const BcmPopconfirmBoxV2 = BcmPopconfirmBoxV2$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmPopconfirmBoxV2, defineCustomElement };

package/dist/components/bcm-popconfirm-host.d.ts

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

package/dist/components/bcm-popconfirm-host.js

@@ -0,0 +1,158 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { G as Generate } from './generate.js';
+import { c as computePosition, o as offset, f as flip, s as shift, a as arrow } from './floating-ui.dom.esm.js';
+import { B as Bcm } from './bcm.js';
+
+class PopConfirmPosition {
+  constructor(ref) {
+    this.ref = null;
+    this.clickX = null;
+    this.clickY = null;
+    this.ref = ref;
+  }
+  update() {
+    const { ref, floating, placement } = this.ref;
+    let arrowElement = document.getElementById(`${floating.id}-arrow`);
+    if (!arrowElement) {
+      arrowElement = document.createElement("bcm-arrow");
+      arrowElement.setAttribute("id", `${floating.id}-arrow`);
+    }
+    floating.prepend(arrowElement);
+    if (this.clickX && this.clickY) {
+      ref.x = this.clickX;
+      ref.y = this.clickY;
+    }
+    computePosition(ref, floating, {
+      placement: placement,
+      middleware: [offset(10), flip(), shift({ padding: 5 }), arrow({ element: arrowElement })],
+    }).then(({ x, y, placement, middlewareData }) => {
+      Object.assign(floating.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      });
+      const { x: arrowX, y: arrowY } = middlewareData.arrow;
+      const placementParts = placement.split("-");
+      const staticSide = {
+        top: "bottom",
+        right: "left",
+        bottom: "top",
+        left: "right",
+      }[placementParts[0]];
+      arrowElement.setAttribute("position", staticSide);
+      Object.assign(arrowElement.style, {
+        left: arrowX != null ? `${arrowX}px` : "",
+        top: arrowY != null ? `${arrowY}px` : "",
+        right: "",
+        bottom: "",
+        [staticSide]: "-16px",
+      });
+    });
+  }
+  show() {
+    this.update();
+    this.ref.floating.classList.remove("tw-invisible");
+    this.ref.floating.classList.add("tw-visible");
+  }
+  hide() {
+    this.ref.floating.classList.remove("tw-visible");
+    this.ref.floating.classList.add("tw-invisible");
+  }
+  listener() {
+    window.addEventListener("resize", this.update.bind(this));
+    window.addEventListener("scroll", this.update.bind(this), true);
+    this.ref.ref.addEventListener("click", this.toggle.bind(this));
+    this.ref.floating.addEventListener("bcm-cancel", () => {
+      this.hide();
+    });
+  }
+  toggle() {
+    if (this.ref.floating.classList.contains("tw-invisible")) {
+      this.show();
+    }
+    else {
+      this.hide();
+    }
+  }
+}
+
+const BcmPopconfirmHost$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.bcmTooltipShow = createEvent(this, "bcmTooltipShow", 7);
+    this.bcmTooltipHide = createEvent(this, "bcmTooltipHide", 7);
+    this._id = Generate.UID();
+    this.message = "";
+    this.placement = Bcm.Placement.top;
+    this.trigger = Bcm.TriggerType.click;
+    this.status = Bcm.Status.info;
+    this.open = false;
+    this.size = Bcm.Size.medium;
+    this.openDelay = 0;
+    this.closeDelay = 0;
+    this.autoHide = false;
+    this.targetId = undefined;
+    this.tooltip = undefined;
+  }
+  emitShow() {
+    this.bcmTooltipShow.emit();
+  }
+  emitHide() {
+    this.bcmTooltipHide.emit();
+  }
+  connectedCallback() {
+    const obs = Generate.createComponent("bcm-popconfirm-box-v2", {
+      id: this._id + "-popconfirm-box",
+      description: this.message,
+      headerText: "hello",
+      status: this.status,
+    });
+    this.tooltip = new PopConfirmPosition({
+      ref: this.el,
+      floating: obs,
+      placement: this.placement,
+    });
+  }
+  componentDidLoad() {
+    this.tooltip.listener();
+  }
+  render() {
+    return (h(Host, { class: "tw-relative tw-inline-flex tw-h-fit tw-w-fit", role: "tooltip" }, h("slot", null)));
+  }
+  get el() { return this; }
+}, [4, "bcm-popconfirm-host", {
+    "_id": [513, "id"],
+    "message": [1],
+    "placement": [1],
+    "trigger": [1],
+    "status": [1],
+    "open": [1028],
+    "size": [1],
+    "openDelay": [2, "open-delay"],
+    "closeDelay": [2, "close-delay"],
+    "autoHide": [4, "auto-hide"],
+    "targetId": [1, "target-id"],
+    "tooltip": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-popconfirm-host"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-popconfirm-host":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmPopconfirmHost$1);
+      }
+      break;
+  } });
+}
+
+const BcmPopconfirmHost = BcmPopconfirmHost$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmPopconfirmHost, defineCustomElement };

package/dist/components/bcm-popconfirm.js

@@ -5,11 +5,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
 import { G as Generate } from './generate.js';
-import { a 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 './popconfirm-box.js';
-import { d as defineCustomElement$2 } from './text.js';
+import { B as Bcm } from './bcm.js';
+import { d as defineCustomElement$3 } from './button.js';
+import { d as defineCustomElement$2 } from './popconfirm-box.js';
 
 const popconfirmCss = "@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-popconfirm{display:inline-flex}";
 
@@ -111,7 +109,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["bcm-popconfirm", "bcm-button", "bcm-icon", "bcm-popconfirm-box", "bcm-text"];
+  const components = ["bcm-popconfirm", "bcm-button", "bcm-popconfirm-box"];
   components.forEach(tagName => { switch (tagName) {
     case "bcm-popconfirm":
       if (!customElements.get(tagName)) {
@@ -119,21 +117,11 @@ function defineCustomElement$1() {
       }
       break;
     case "bcm-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "bcm-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "bcm-popconfirm-box":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }
       break;
-    case "bcm-text":
+    case "bcm-popconfirm-box":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

package/dist/components/bcm-popover.js

@@ -4,12 +4,12 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { C as ColorHelper } from './color-helper.js';
-import './validators.js';
+import { p as popoverStyle } from './popover.style.js';
 import { G as Generate } from './generate.js';
 import './number-helper.js';
 import { S as StringHelper } from './string-helper.js';
 import './element-dragger.js';
-import { B as Bcm } from './bcm.js';
+import { a as Bcm } from './bcm.js';
 import { d as delay } from './utils.js';
 import { F as FloatingUI } from './floating-ui.js';
 
@@ -34,15 +34,15 @@ class Popover {
         variable: "--bcm-popover",
       });
       const style = Object.assign(Object.assign({}, dc), (dc["--bcm-popover-bg"] && { "--bcm-popover-text": ColorHelper.reverseColor(dc["--bcm-popover-bg"]) }));
-      const inner = `<div class="tw-z-[1] tw-rounded tw-py-2">
-            ${this.message ? `<div class="tw-font-medium tw-w-full tw-pb-1 tw-px-4">${StringHelper.trim(this.message)}</div>` : ""}
-            ${this.content ? `<div class="tw-font-normal tw-px-4">${StringHelper.trim(this.content)}</div>` : ""}
+      const { popover, messageStyle, contentStyle, dividerStyle } = popoverStyle({ size: "medium" });
+      const inner = `<div class="tw-z-[1] tw-rounded-md">
+            ${this.message ? `<div class="${messageStyle()}">${StringHelper.trim(this.message)}</div>` : ""}
+            ${this.message && this.content ? `<div class="${dividerStyle()}"></div>` : ""}
+            ${this.content ? `<div class="${contentStyle()}">${StringHelper.trim(this.content)}</div>` : ""}
         </div>`;
       this.el = Generate.createElement("div", {
         "id": `${this.targetId}-popover-box`,
-        "class": `
-            tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-pointer-events-none tw-max-w-[256px] tw-rounded tw-bg-[--bcm-popover-bg] tw-text-[--bcm-popover-text] tw-text-3 tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300
-            tw-shadow`,
+        "class": popover(),
         "role": "popover",
         "aria-hidden": "true",
         "style": ColorHelper.generateStyleString(style),
@@ -104,7 +104,7 @@ class Popover {
       }
     };
     this.show = async () => {
-      if (this.message) {
+      if (this.message || this.content) {
         this.init();
         await delay(this.openDelay);
         this.calculatePosition();
@@ -214,7 +214,8 @@ const BcmPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.popover.toggle();
   }
   render() {
-    return (h(Host, { class: "tw-inline-flex tw-h-fit tw-w-fit", role: "tooltip", "aria-hidden": "true" }, h("slot", null)));
+    const { popover } = popoverStyle();
+    return (h(Host, { class: popover(), role: "tooltip", "aria-hidden": "true" }, h("slot", null)));
   }
   get el() { return this; }
 }, [4, "bcm-popover", {

package/dist/components/bcm-progress.js

@@ -6,7 +6,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { c as classnames } from './index2.js';
 import { C as ColorHelper } from './color-helper.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$2 } from './icon.js';
 
 // export const lineSizes = {

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

@@ -4,23 +4,58 @@
  */
 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 CaptionTemplate } from './caption-template.js';
-import { c as classnames } from './index2.js';
+import './checkbox.style.js';
+import './index2.js';
 import './types.js';
 import './types2.js';
 import { I as IsLoad } from './is-load-decorator.js';
+import { c as ce } from './index4.js';
 import { d as defineCustomElement$5 } from './icon.js';
 import { d as defineCustomElement$4 } from './label.js';
 import { d as defineCustomElement$3 } from './radio.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 
+const radioGroupStyle = ce({
+  slots: {
+    host: [
+      "bcm-radio-group",
+      "bcm-ui-element bcm-ui-inputs",
+      "tw-mb-2 tw-flex tw-flex-col",
+    ],
+    radioGroupContainer: [
+      "bcm-radio-group__container",
+      "tw-flex tw-flex-wrap",
+    ],
+  },
+  variants: {
+    direction: {
+      vertical: {
+        radioGroupContainer: ["tw-flex-col"],
+      },
+      horizontal: {
+        radioGroupContainer: ["tw-flex-row tw-gap-2"],
+      },
+    },
+    fullWidth: {
+      true: {
+        host: ["tw-w-full"],
+      }
+    },
+  },
+  defaultVariants: {
+    direction: "horizontal",
+    fullWidth: 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;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
@@ -141,7 +176,11 @@ const BcmRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   render() {
     var _a, _b;
     const { direction, fullWidth, gap, label, size, required, disabled, caption, captionError, captionType, noCaption } = this;
-    return (h(Host, { class: "tw-mb-2 tw-flex tw-flex-col", role: "radiogroup", "aria-labelledby": "radiogroup" }, label && h("bcm-label", { type: captionType, value: label, required: required }), h("div", { class: classnames("tw-flex tw-flex-wrap", direction == Bcm.Direction.horizontal ? "tw-flex-row" : "tw-flex-col", fullWidth && "tw-w-full"), style: { "gap": gap } }, h("slot", null), ((_a = this.Items) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+    const { host, radioGroupContainer } = radioGroupStyle({
+      direction,
+      fullWidth
+    });
+    return (h(Host, { class: host(), role: "radiogroup", "aria-labelledby": "radiogroup" }, label && h("bcm-label", { type: captionType, value: label, required: required }), h("div", { class: radioGroupContainer(), style: { "gap": gap } }, h("slot", null), ((_a = this.Items) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
       ((_b = this.Items) === null || _b === void 0 ? void 0 : _b.map(item => (h("bcm-radio", { id: item.id, value: item.value, disabled: disabled || item.disabled, checked: item.checked, color: item.color, size: size }, item.label))))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
   }
   get el() { return this; }

package/dist/components/bcm-range.js

@@ -5,7 +5,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.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';
 
 const rangeCss = "@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-range{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;width:100%;position:relative;display:block;margin:16px 0}.bcm-range input[type=range]{position:absolute;pointer-events:none;-webkit-appearance:none;z-index:4;height:30px;width:100%;top:-17px;opacity:0}.bcm-range input[type=range].single{display:none}.bcm-range input[type=range]::-webkit-slider-thumb{pointer-events:all;width:30px;height:30px;border-radius:0;border:0 none;background-color:red;-webkit-appearance:none;cursor:pointer}.bcm-range__container-bar{width:calc(100% - 24px);left:12px;position:relative}.bcm-range__container-bar-track{position:absolute;top:-2px;width:100%;height:4px;background-color:var(--bcm-new-ds-color-slate-300);z-index:1}.bcm-range__container-bar-range{position:absolute;top:-2px;left:22.22%;right:22.22%;height:4px;background-color:var(--bcm-new-ds-color-blue-500);z-index:2}.bcm-range__container-bar-thumb{position:absolute;top:0;width:16px;height:16px;background-color:var(--bcm-new-ds-color-blue-500);border-radius:50%;z-index:3;transition:box-shadow 0.2s ease-in-out;display:flex;align-items:center;justify-content:center}.bcm-range__container-bar-thumb>span{display:flex;width:100%;height:100%}.bcm-range__container-bar-thumb.hover{box-shadow:0px 2px 2px rgba(0, 0, 0, 0.1), 0px 3px 1px rgba(0, 0, 0, 0.05), 0px 1px 5px rgba(0, 0, 0, 0.1);cursor:pointer}.bcm-range__container-bar-thumb.hidden{display:none}.bcm-range__container-bar-thumb.left{left:22.22222%;transform:translate(-8px, -8px)}.bcm-range__container-bar-thumb.right{right:0%;transform:translate(8px, -8px)}.bcm-range .ticks{position:absolute;z-index:0;top:0;left:0;width:100%;display:flex;justify-content:space-between;padding:4px 0;user-select:none}.bcm-range .tick{position:relative;display:flex;justify-content:center;width:1px;color:var(--bcm-new-ds-color-slate-300);cursor:pointer;height:8px;line-height:32px;margin-bottom:8px;z-index:-1;transition:color 0.1s ease-in-out}.bcm-range .tick::before,.bcm-range .tick::after{content:\" \";position:absolute;width:1px;height:8px;background-color:var(--bcm-new-ds-color-slate-300);z-index:-1;transition:background-color 0.1s ease-in-out}.bcm-range .tick::before{top:-16px}.bcm-range .tick::after{top:0}.bcm-range .tick.hover{color:var(--bcm-new-ds-color-slate-400)}.bcm-range .tick.hover::before,.bcm-range .tick.hover::after{background-color:var(--bcm-new-ds-color-slate-400)}.bcm-range .touch{position:absolute;width:calc(100% + 48px);left:-24px;top:-17px;opacity:0;height:45px;z-index:2;background-color:transparent;display:flex;flex-direction:row;justify-content:space-between}.bcm-range .touch-point{cursor:pointer;flex:1;border:1px solid var(--bcm-new-ds-color-slate-300);box-sizing:border-box;background-color:var(--bcm-new-ds-color-slate-300)}.bcm-range .touch-point:hover{border-color:var(--bcm-new-ds-color-blue-500);background-color:var(--bcm-new-ds-color-blue-500)}.bcm-range .touch::after,.bcm-range .touch::before{content:\"\";position:absolute;width:24px;height:100%;top:0}.bcm-range .touch::before{left:0}.bcm-range .touch::after{right:0}.bcm-range.vertical{margin:0 16px;padding:12px 0}.bcm-range.vertical .touch{width:calc(100% + 12px);left:-6px;top:-17px}.bcm-range.vertical .touch::after,.bcm-range.vertical .touch::before{width:12px}.bcm-range.vertical .bcm-range__container{transform:rotate(270deg)}.bcm-range.vertical .bcm-range__container .ticks .tick-text{position:absolute;top:0px;width:100%;transform:rotate(90deg)}";

package/dist/components/bcm-resizable-pane.d.ts

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

package/dist/components/bcm-resizable-pane.js

@@ -0,0 +1,60 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const BcmResizablePane$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.initialLeftPanelWidth = 50;
+    this.isDragging = false;
+    this.startClientX = 0;
+    this.leftPanelWidth = this.initialLeftPanelWidth;
+  }
+  onMouseMove(event) {
+    if (!this.isDragging) {
+      return;
+    }
+    const diff = event.clientX - this.startClientX;
+    const containerWidth = this.el.offsetWidth;
+    this.leftPanelWidth = Math.max(0, Math.min(100, this.leftPanelWidth + (diff / containerWidth) * 100));
+    this.startClientX = event.clientX;
+  }
+  onMouseUp() {
+    this.isDragging = false;
+  }
+  handleMouseDown(event) {
+    this.isDragging = true;
+    this.startClientX = event.clientX;
+  }
+  render() {
+    const rightPanelWidth = 100 - this.leftPanelWidth;
+    return (h(Host, { class: "tw-block tw-h-full tw-w-full" }, h("div", { class: "resizable-panes tw-flex tw-h-full" }, h("div", { class: "panel panel-left tw-flex-1 ", style: { flexBasis: `${this.leftPanelWidth}%` } }, h("slot", { name: "left-panel" })), h("div", { class: "splitter tw-flex tw-cursor-ew-resize tw-items-center tw-justify-center tw-bg-gray-300 tw-p-1 tw-text-color-gray-500", role: "separator", tabIndex: 0, "aria-orientation": "vertical", "aria-valuenow": this.leftPanelWidth, title: "Interact to resize", onMouseDown: event => this.handleMouseDown(event) }, h("slot", { name: "splitter" }, h("i", { class: "fa-light fa-grip-lines-vertical" }))), h("div", { class: "panel panel-right tw-flex-1 ", style: { flexBasis: `${rightPanelWidth}%` } }, h("slot", { name: "right-panel" })))));
+  }
+  get el() { return this; }
+}, [4, "bcm-resizable-pane", {
+    "initialLeftPanelWidth": [2, "initial-left-panel-width"],
+    "isDragging": [32],
+    "startClientX": [32],
+    "leftPanelWidth": [32]
+  }, [[9, "mousemove", "onMouseMove"], [9, "mouseup", "onMouseUp"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-resizable-pane"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-resizable-pane":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmResizablePane$1);
+      }
+      break;
+  } });
+}
+
+const BcmResizablePane = BcmResizablePane$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmResizablePane, defineCustomElement };

package/dist/components/{bcm-checkbox-lite.d.ts → bcm-result-footer.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface BcmCheckboxLite extends Components.BcmCheckboxLite, HTMLElement {}
-export const BcmCheckboxLite: {
-  prototype: BcmCheckboxLite;
-  new (): BcmCheckboxLite;
+interface BcmResultFooter extends Components.BcmResultFooter, HTMLElement {}
+export const BcmResultFooter: {
+  prototype: BcmResultFooter;
+  new (): BcmResultFooter;
 };
 /**
  * Used to define this component and all nested components recursively.