bromcom-ui 2.8.0-rc.10-h → 2.8.0-rc.10

package/dist/collection/components/other/modal-2/modal-2.js

@@ -0,0 +1,450 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+var __decorate = (this && this.__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;
+};
+import { IsLoad } from "@bcm/decorator";
+import { Generate } from "@bcm/helpers";
+import { Bcm } from "@bcm/model";
+import { delay } from "@bcm/utils";
+import { Host, h } from "@stencil/core";
+import cs from "classnames";
+export class BcmModal2 {
+  constructor() {
+    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: cs("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: cs("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" })))));
+  }
+  static get is() { return "bcm-modal-2"; }
+  static get properties() {
+    return {
+      "_id": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "id",
+        "reflect": true,
+        "defaultValue": "Generate.UID()"
+      },
+      "isShow": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-show",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "center": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "center",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "zIndex": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "z-index",
+        "reflect": false,
+        "defaultValue": "\"10400\""
+      },
+      "size": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "Bcm.Size.medium"
+      },
+      "backdrop": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean | \"static\"",
+          "resolved": "\"static\" | boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "backdrop",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "fullWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "full-width",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "fullScreen": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "full-screen",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "overflow": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "overflow",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isShowModal": {},
+      "shake": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "modalClose",
+        "name": "bcm-modal-close",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "modalOpen",
+        "name": "bcm-modal-open",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "modalBeforeClose",
+        "name": "bcm-modal-before-close",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "modalBeforeOpen",
+        "name": "bcm-modal-before-open",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "hide": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "show": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "handleClick",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "keydown",
+        "method": "handleKeyDown",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "bcm-modal-before-close",
+        "method": "hideModal",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "bcm-modal-before-open",
+        "method": "showModal",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+__decorate([
+  IsLoad()
+], BcmModal2.prototype, "el", void 0);

package/dist/collection/components/other/overlay/overlay.js

@@ -0,0 +1,101 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { Host, h } from "@stencil/core";
+import cs from "classnames";
+import colors from "tailwindcss/colors";
+export class BcmOverlay {
+  constructor() {
+    this.center = false;
+    this.color = colors.black;
+    this.opacity = "0.5";
+    this.zIndex = "10400";
+  }
+  render() {
+    return (h(Host, { class: cs("tw-fixed tw-inset-0 tw-transition", {
+        "tw-flex tw-items-center tw-justify-center": this.center,
+      }), style: {
+        backgroundColor: `${this.color}`,
+        opacity: this.opacity,
+        zIndex: this.zIndex,
+      } }, h("slot", null)));
+  }
+  static get is() { return "bcm-overlay"; }
+  static get properties() {
+    return {
+      "center": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "center",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"#000\"",
+          "resolved": "\"#000\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": false,
+        "defaultValue": "colors.black"
+      },
+      "opacity": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "opacity",
+        "reflect": false,
+        "defaultValue": "\"0.5\""
+      },
+      "zIndex": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "z-index",
+        "reflect": false,
+        "defaultValue": "\"10400\""
+      }
+    };
+  }
+}

package/dist/collection/components/other/scroll-area/scroll-area.js

@@ -0,0 +1,77 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { Host, h } from "@stencil/core";
+import cs from "classnames";
+export class BcmScrollArea {
+  constructor() {
+    this.width = "inherit";
+    this.height = "inherit";
+    this.isDisabled = false;
+  }
+  render() {
+    return (h(Host, { class: cs("tw-block", {
+        "tw-overflow-y-scroll tw-overscroll-contain": !this.isDisabled,
+      }), style: { width: this.width, height: this.height } }, h("slot", null)));
+  }
+  static get is() { return "bcm-scroll-area"; }
+  static get properties() {
+    return {
+      "width": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "width",
+        "reflect": false,
+        "defaultValue": "\"inherit\""
+      },
+      "height": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "height",
+        "reflect": false,
+        "defaultValue": "\"inherit\""
+      },
+      "isDisabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+}