bromcom-ui 2.8.0-rc.0 → 2.8.0-rc.10-t

package/dist/collection/helper/generate.js

@@ -7,6 +7,7 @@ import { StatusProps } from "../components/molecules/alert/types";
 import { version } from "../../package.json";
 import { Build } from "@stencil/core";
 import snq from "snq";
+import colors from 'tailwindcss/colors';
 const allowedDomains = ["localhost", "beta-regression.bromcomcloud.com", "beta-scrum.bromcomcloud.com", "beta-kanban.bromcomcloud.com"];
 const isAllowedDomain = () => {
   const hostname = window.location.hostname;
@@ -40,6 +41,17 @@ export class Generate {
     });
     observer.observe(document.documentElement, { childList: true, subtree: true });
   }
+  static getTwColor(color, variable = "--bcm-color-default") {
+    if (!color || !colors[color]) {
+      return false;
+    }
+    const colorObj = colors[color];
+    const result = {};
+    for (const [key, value] of Object.entries(colorObj)) {
+      result[`${variable}-${key}`] = value;
+    }
+    return result;
+  }
 }
 Generate.UID = (prefix = "bcm") => `${prefix}${Math.random().toString(36).substr(2, 9)}`;
 Generate.getIconAttrWithStatusType = (status, loading = false) => {

package/dist/collection/helper/tooltip-helper.js

@@ -110,7 +110,7 @@ export class Tooltip {
       this.el = document.getElementById(this.id);
       if (this.el) {
         await delay(this.closeDelay);
-        this.el.remove();
+        this.el && this.el.remove();
         this.emitHide();
       }
     };

package/dist/collection/templates/tag-template.js

@@ -8,7 +8,7 @@ import cs from 'classnames';
 import { NumberHelper } from '../helper/number-helper';
 import { extractColor } from '../utils/utils';
 import { ColorPalette } from '../global/variables/colors';
-import { ColorProps } from '../components/atoms/tag/types';
+import { ColorProps } from '../components/other_deprecated/tag/types';
 export const TagTemplate = ({ _id, color, customStyle, size, checked, hidden, value, type, onDismiss, onSelect }) => {
   !size && (size = Bcm.FontSize['size-1']);
   const getColor = (color) => {

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

@@ -17,15 +17,13 @@ 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 colorInputCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:host{display:block}";
-
 const BcmColorInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this._id = Generate.UID();
-    this.label = "Color Picker";
-    this.placeholder = "Color Picker";
+    this.label = "";
+    this.placeholder = "";
     this.value = "";
     this.required = false;
     this.disabled = false;
@@ -45,14 +43,12 @@ const BcmColorInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   }
   handleInputChanged(e) {
     this.getPickerElement().color = e.detail;
-    console.log("handleInputChanged: ", e.detail);
   }
   eyeDropper() {
     const eyeDropper = new window.EyeDropper();
     eyeDropper
       .open()
       .then((color) => {
-      console.log("color: ", color.sRGBHex);
       this.handleChange(color.sRGBHex);
     })
       .catch((error) => {
@@ -68,12 +64,11 @@ const BcmColorInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     return typeof window !== "undefined" && "EyeDropper" in window;
   }
   render() {
-    return (h(Host, null, h("bcm-input", { id: this._id + "-color", fullWidth: this.fullWidth, label: this.label, placeholder: this.placeholder, type: "text", "onBcm-change": e => this.handleInputChanged(e) }, h("i", { slot: "prefix", class: "tw-rounded-full tw-w-4 tw-h-4 tw-border tw-border-gray-100 tw-flex tw-items-center tw-justify-center", style: {
+    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) }, 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: {
         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) }))));
   }
   get el() { return this; }
-  static get style() { return colorInputCss; }
 }, [0, "bcm-color-input", {
     "_id": [1537, "id"],
     "label": [1],

package/dist/components/bcm-list.js

@@ -325,7 +325,7 @@ const findItem = (id, itemId, items) => {
   if (dataSource) {
     dataSource.forEach(item => {
       if (itemId.includes(item.id)) {
-        checkedProcess(id, item, true);
+        checkedProcess(id, item);
         if (item.parentId) {
           indeterminateStatus(id, item.parentId);
         }

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,