bromcom-ui 2.8.0-rc.1 → 2.8.0-rc.10-b

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

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

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

@@ -0,0 +1,60 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { I as IsLoad } from './is-load-decorator.js';
+import './color-helper.js';
+import './validators.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 classnames } from './index2.js';
+
+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")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const BcmModal2Footer$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this._id = Generate.UID();
+    this.el.slot = "footer";
+  }
+  render() {
+    return (h(Host, { class: classnames("tw-flex tw-flex-row tw-items-center tw-justify-end tw-gap-2 tw-px-6 tw-pb-6 tw-pt-2") }, h("slot", null)));
+  }
+  get el() { return this; }
+}, [4, "bcm-modal-2-footer", {
+    "_id": [1537, "id"]
+  }]);
+__decorate([
+  IsLoad()
+], BcmModal2Footer$1.prototype, "el", void 0);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-modal-2-footer"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-modal-2-footer":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmModal2Footer$1);
+      }
+      break;
+  } });
+}
+
+const BcmModal2Footer = BcmModal2Footer$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmModal2Footer, defineCustomElement };

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

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

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

@@ -0,0 +1,59 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { I as IsLoad } from './is-load-decorator.js';
+import './color-helper.js';
+import './validators.js';
+import { G as Generate } from './generate.js';
+import './number-helper.js';
+import './string-helper.js';
+import './element-dragger.js';
+import './bcm.js';
+
+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")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const BcmModal2Header$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this._id = Generate.UID();
+    this.el.slot = "header";
+  }
+  render() {
+    return (h(Host, { class: "tw-w-full tw-flex-none tw-overflow-hidden tw-rounded-t-lg tw-bg-primary-400 tw-pt-1" }, h("div", { class: "tw-flex tw-w-full tw-items-center tw-justify-between tw-bg-primary-50 tw-px-4 tw-py-3 tw-text-4 tw-font-medium tw-text-slate-600" }, h("span", null, h("slot", null)), h("button", { type: "button", class: "tw-focus:tw-outline-none tw-flex tw-h-8 tw-w-8 tw-cursor-pointer tw-items-center tw-justify-center tw-bg-transparent tw-text-5 tw-text-slate-700 tw-transition tw-duration-150 tw-ease-in-out hover:tw-text-slate-900", "data-dismiss": true }, h("i", { class: "far fa-times" })))));
+  }
+  get el() { return this; }
+}, [4, "bcm-modal-2-header", {
+    "_id": [1537, "id"]
+  }]);
+__decorate([
+  IsLoad()
+], BcmModal2Header$1.prototype, "el", void 0);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-modal-2-header"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-modal-2-header":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmModal2Header$1);
+      }
+      break;
+  } });
+}
+
+const BcmModal2Header = BcmModal2Header$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmModal2Header, defineCustomElement };

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

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

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

@@ -0,0 +1,207 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+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 { 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 { 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';
+
+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")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const BcmModal2$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.modalClose = createEvent(this, "bcm-modal-close", 7);
+    this.modalOpen = createEvent(this, "bcm-modal-open", 7);
+    this.modalBeforeClose = createEvent(this, "bcm-modal-before-close", 7);
+    this.modalBeforeOpen = createEvent(this, "bcm-modal-before-open", 7);
+    this._id = Generate.UID();
+    this.isShow = false;
+    this.center = false;
+    this.zIndex = "10400";
+    this.size = Bcm.Size.medium;
+    this.backdrop = true;
+    this.fullWidth = false;
+    this.fullScreen = false;
+    this.overflow = true;
+    this.isShowModal = false;
+    this.shake = false;
+  }
+  // Listen to the click event on the component and its children
+  handleClick(e) {
+    // Check if the click event is triggered on a child element with "data-dismiss" attribute
+    const dismiss = Generate.findEventPathHasAttribute(e, "data-dismiss");
+    // Check if the click event is triggered on the overlay element and backdrop is "static"
+    const target = e.target;
+    const isClickOverlay = target.attributes.getNamedItem("is-click-overlay");
+    if (isClickOverlay && this.backdrop === "static") {
+      // Shake the modal if the overlay is clicked and backdrop is "static"
+      this.shakeModal();
+    }
+    else if (dismiss || isClickOverlay) {
+      // Hide the modal if the "data-dismiss" element is clicked
+      this.hide();
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }
+  // Listen to the keydown event on the document element
+  handleKeyDown(ev) {
+    // Get the top modal in the DOM with "is-show" attribute
+    const topModal = Array.from(document.querySelectorAll("bcm-modal-2[is-show]")).pop();
+    if (topModal !== this.el) {
+      return;
+    }
+    if (ev.key === "Escape") {
+      if (this.backdrop === "static") {
+        // Shake the modal if the backdrop is "static" and Escape key is pressed
+        this.shakeModal();
+      }
+      else {
+        // Hide the modal if Escape key is pressed
+        this.hide();
+      }
+      ev.preventDefault();
+      ev.stopPropagation();
+      ev.stopImmediatePropagation();
+    }
+  }
+  // Shake the modal by toggling "shake" state
+  shakeModal() {
+    this.shake = true;
+    setTimeout(() => (this.shake = false), 300);
+  }
+  // Hide the modal by emitting "bcm-modal-before-close" event
+  async hide() {
+    this.modalBeforeClose.emit();
+  }
+  // Listen to "bcm-modal-before-close" event and hide the modal if defaultPrevented is not set
+  async hideModal(e) {
+    if (e.defaultPrevented) {
+      return;
+    }
+    if (e.target === this.el) {
+      this.isShowModal = false;
+      await delay(150);
+      this.isShow = false;
+      this.modalClose.emit();
+    }
+  }
+  // Show the modal by emitting "bcm-modal-before-open" event
+  async show() {
+    this.modalBeforeOpen.emit();
+  }
+  // Listen to "bcm-modal-before-open" event and show the modal if defaultPrevented is not set
+  async showModal(e) {
+    if (e.defaultPrevented) {
+      return;
+    }
+    if (e.target === this.el) {
+      this.isShow = true;
+      await delay(50);
+      this.isShowModal = true;
+      document.body.appendChild(this.el);
+      this.modalOpen.emit();
+    }
+  }
+  // Get the width of the modal based on the size
+  getWidth(size) {
+    const sizes = {
+      small: "576px",
+      medium: "768px",
+      large: "992px",
+      xlarge: "1024px",
+      xxlarge: "1200px",
+      xxxlarge: "1700px",
+    };
+    return sizes[size] || size;
+  }
+  // Get the modal size
+  setSize() {
+    const { fullScreen, fullWidth, size, overflow } = this;
+    let minHeight = "auto";
+    let height = "auto";
+    let width = fullWidth ? "100%" : this.getWidth(size);
+    if (fullScreen) {
+      height = overflow ? "100vh" : "auto";
+      width = "100vw";
+      minHeight = "100vh";
+    }
+    return { width, minHeight, height };
+  }
+  render() {
+    return (h(Host, { class: { "tw-hidden": !this.isShow } }, h("bcm-overlay", { "z-index": +this.zIndex - 1, opacity: this.isShowModal ? "0.5" : "0" }), h("div", { class: classnames("tw-fixed tw-inset-0", "tw-flex tw-h-full tw-w-full tw-items-start tw-justify-center", "tw-overflow-y-scroll tw-overscroll-contain tw-font-sans", this.center ? "tw-items-center" : ""), style: {
+        zIndex: this.zIndex,
+      }, "is-click-overlay": true }, h("div", { class: classnames("tw-flex tw-w-full tw-flex-col", "tw-relative tw-z-modal tw-bg-white", "tw--translate-y-[20px] tw-transform tw-opacity-0 tw-transition tw-duration-300 tw-ease-in-out", this.fullScreen ? "" : `tw-m-4 tw-rounded-lg ${this.overflow ? "tw-max-h-[90vh]" : ""} `, this.shake ? "tw-animate-shake" : ""), style: Object.assign(Object.assign({}, this.setSize()), (this.isShowModal
+        ? {
+          transform: "translateY(0)",
+          opacity: "1",
+        }
+        : {})) }, h("slot", { name: "header" }), h("bcm-scroll-area", { "is-disabled": !this.overflow }, h("slot", null)), h("slot", { name: "footer" })))));
+  }
+  get el() { return this; }
+}, [4, "bcm-modal-2", {
+    "_id": [1537, "id"],
+    "isShow": [1540, "is-show"],
+    "center": [4],
+    "zIndex": [1, "z-index"],
+    "size": [8],
+    "backdrop": [8],
+    "fullWidth": [4, "full-width"],
+    "fullScreen": [4, "full-screen"],
+    "overflow": [4],
+    "isShowModal": [32],
+    "shake": [32],
+    "hide": [64],
+    "show": [64]
+  }, [[0, "click", "handleClick"], [4, "keydown", "handleKeyDown"], [0, "bcm-modal-before-close", "hideModal"], [0, "bcm-modal-before-open", "showModal"]]]);
+__decorate([
+  IsLoad()
+], BcmModal2$1.prototype, "el", void 0);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-modal-2", "bcm-overlay", "bcm-scroll-area"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-modal-2":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmModal2$1);
+      }
+      break;
+    case "bcm-overlay":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "bcm-scroll-area":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const BcmModal2 = BcmModal2$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmModal2, defineCustomElement };

package/dist/components/bcm-overlay.d.ts

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

package/dist/components/bcm-overlay.js

@@ -0,0 +1,10 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { B as BcmOverlay$1, d as defineCustomElement$1 } from './overlay.js';
+
+const BcmOverlay = BcmOverlay$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmOverlay, defineCustomElement };

package/dist/components/bcm-popover.js

@@ -176,7 +176,7 @@ const BcmPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   emitHide() {
     this.bcmPopoverHide.emit();
   }
-  componentWillLoad() {
+  connectedCallback() {
     this.popover = new Popover({
       targetId: this.targetId || this._id,
       content: this.content,

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

@@ -42,7 +42,7 @@ const BcmRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.value = null;
     this.defaultValue = undefined;
     this.size = Bcm.Size.medium;
-    this.disabled = false;
+    this.disabled = undefined;
     this.hidden = false;
     this.required = false;
     this.gap = undefined;
@@ -70,15 +70,28 @@ const BcmRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     var _a, _b, _c;
     this.value = (_c = (_b = (_a = this.radios) === null || _a === void 0 ? void 0 : _a.find(radio => radio.checked)) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : null;
   }
-  componentWillLoad() {
+  setRadioUpdate() {
     var _a;
     (_a = this.radios) === null || _a === void 0 ? void 0 : _a.forEach(radio => {
-      radio.disabled = radio.disabled || this.disabled;
+      radio.disabled = this.disabled || radio.disabled;
       radio.size = this.size;
       if (this.defaultValue) {
         radio.checked = radio.value == this.defaultValue;
       }
     });
+  }
+  watchDisabled(newVal, _oldVal) {
+    var _a;
+    (_a = this.radios) === null || _a === void 0 ? void 0 : _a.forEach(radio => radio.disabled = newVal);
+  }
+  watchDefaultValue(newVal, _oldVal) {
+    var _a;
+    (_a = this.radios) === null || _a === void 0 ? void 0 : _a.forEach(radio => radio.checked = radio.value == newVal);
+    this.updateValue();
+    this.change.emit(this.value);
+  }
+  componentWillLoad() {
+    this.setRadioUpdate();
     this.updateValue();
   }
   handleChange(e) {
@@ -132,12 +145,16 @@ const BcmRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       ((_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; }
+  static get watchers() { return {
+    "disabled": ["watchDisabled"],
+    "defaultValue": ["watchDefaultValue"]
+  }; }
 }, [4, "bcm-radio-group", {
     "_id": [513, "id"],
     "label": [1],
     "name": [1],
     "value": [1032],
-    "defaultValue": [8, "default-value"],
+    "defaultValue": [1032, "default-value"],
     "size": [1],
     "disabled": [4],
     "hidden": [4],

package/dist/components/bcm-scroll-area.d.ts

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

package/dist/components/bcm-scroll-area.js

@@ -0,0 +1,10 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { B as BcmScrollArea$1, d as defineCustomElement$1 } from './scroll-area.js';
+
+const BcmScrollArea = BcmScrollArea$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmScrollArea, defineCustomElement };

package/dist/components/bcm-stepper.js

@@ -3,16 +3,16 @@
  * Copyright (c) Bromcom.
  */
 import { h, proxyCustomElement, HTMLElement, createEvent, forceUpdate, Host } from '@stencil/core/internal/client';
+import { I as IsLoad } from './is-load-decorator.js';
 import { G as Generate, s as snq } from './generate.js';
-import { c as classnames } from './index2.js';
 import './color-helper.js';
 import './validators.js';
 import './number-helper.js';
 import './string-helper.js';
 import './element-dragger.js';
-import { g as getChildElements, d as delay } from './utils.js';
+import { g as getChildElements } from './utils.js';
 import { a as Bcm } from './bcm.js';
-import { I as IsLoad } from './is-load-decorator.js';
+import { c as classnames } from './index2.js';
 import './types.js';
 import './types2.js';
 import { s as stepperStates, d as defineCustomElement$2 } from './step.js';
@@ -145,7 +145,8 @@ const BcmStepper$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     return Promise.resolve(this.getActiveIndex());
   }
   async next(idx) {
-    const index = idx || this.getActiveIndex();
+    let index;
+    idx == 0 ? (index = 0) : index == 1 ? (index = 1) : (index = idx || this.getActiveIndex());
     const step = await this.getCurrentStep();
     const lastStep = this.getItems()[this.getItems().length - 1];
     if (step.valid) {
@@ -160,43 +161,32 @@ const BcmStepper$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     forceUpdate(this.el);
     return Promise.resolve(this.getActiveIndex());
   }
-  async setActive(index, force = false) {
+  async setActive(index) {
     if (!index)
       return;
-    if (force) {
-      if (this.getActiveIndex() < index) {
-        while (this.getActiveIndex() < index) {
-          await this.next();
-          await delay(100);
-        }
-      }
-      else {
-        while (this.getActiveIndex() > index) {
-          await this.prev();
-          await delay(100);
-        }
-      }
+    if (typeof index != "number") {
+      console.warn("index must be a number");
+      return;
     }
-    else {
-      if (this.linear) {
-        const prevStepIsValid = this.getItems()
-          .filter(item => item.index < index)
-          .map(item => ({
-          id: item.id,
-          status: item.status,
-          disabled: item.disabled,
-        }))
-          .every(item => !item.disabled && (item.status === "success" || item.status === "default"));
-        console.log("prevStepIsValid", prevStepIsValid);
-        if (prevStepIsValid) {
-          await this.next(index - 1);
-        }
-      }
-      else {
-        stepperStates.setActiveIndex(this.stepperId, index);
+    if (this.linear) {
+      const prevSteps = this.getItems().filter(item => item.index < index);
+      const prevStepIsValid = prevSteps === null || prevSteps === void 0 ? void 0 : prevSteps.map(item => ({
+        id: item.id,
+        status: item.status,
+        disabled: item.disabled,
+      })).every(item => item.status == "success" || item.status == "default");
+      if (prevStepIsValid) {
+        prevSteps === null || prevSteps === void 0 ? void 0 : prevSteps.forEach(item => {
+          item.status = "success";
+          item.disabled = false;
+        });
         await this.next(index - 1);
       }
     }
+    else {
+      stepperStates.setActiveIndex(this.stepperId, index);
+      await this.next(index - 1);
+    }
   }
   async reset() {
     await this.onStepChange(1);