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

package/dist/collection/components/molecules/popconfirm-v2/pop-confirm-host.js

@@ -0,0 +1,309 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { Host, h } from "@stencil/core";
+import { Generate } from "../../../helper/generate";
+import { PopConfirmPosition } from "../../../helper/pop-confirm-helper";
+import Bcm from "../../../models/bcm";
+export class BcmPopconfirmHost {
+  constructor() {
+    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)));
+  }
+  static get is() { return "bcm-popconfirm-host"; }
+  static get properties() {
+    return {
+      "_id": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "id",
+        "reflect": true,
+        "defaultValue": "Generate.UID()"
+      },
+      "message": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "message",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "placement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "PlacementTypes",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "references": {
+            "PlacementTypes": {
+              "location": "import",
+              "path": "../../../models/bcm-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placement",
+        "reflect": false,
+        "defaultValue": "Bcm.Placement.top"
+      },
+      "trigger": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "TrigglerTypes",
+          "resolved": "\"click\" | \"custom\" | \"focus\" | \"hover\"",
+          "references": {
+            "TrigglerTypes": {
+              "location": "import",
+              "path": "../../../models/bcm-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "trigger",
+        "reflect": false,
+        "defaultValue": "Bcm.TriggerType.click"
+      },
+      "status": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Bcm.Status",
+          "resolved": "Status.default | Status.error | Status.info | Status.success | Status.warning",
+          "references": {
+            "Bcm": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "status",
+        "reflect": false,
+        "defaultValue": "Bcm.Status.info"
+      },
+      "open": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "open",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SizeTypes",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {
+            "SizeTypes": {
+              "location": "import",
+              "path": "../../../models/bcm-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "Bcm.Size.medium"
+      },
+      "openDelay": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "open-delay",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "closeDelay": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "close-delay",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "autoHide": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "auto-hide",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "targetId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "target-id",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "tooltip": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "bcmTooltipShow",
+        "name": "bcmTooltipShow",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "bcmTooltipHide",
+        "name": "bcmTooltipHide",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/molecules/popconfirm-v2/popconf.style.js

@@ -0,0 +1,57 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { tv } from "tailwind-variants";
+export const popConfirmStyle = tv({
+  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",
+  },
+});

package/dist/collection/components/molecules/popconfirm-v2/popconfirm-v2.js

@@ -0,0 +1,201 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { Host, h } from "@stencil/core";
+import Bcm from "../../../models/bcm";
+import { popConfirmStyle } from "./popconf.style";
+import { ColorHelper } from "../../../helper/color-helper";
+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",
+};
+export class BcmPopconfirmBoxV2 {
+  constructor() {
+    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)))));
+  }
+  static get is() { return "bcm-popconfirm-box-v2"; }
+  static get properties() {
+    return {
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "description",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "headerText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "header-text",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "cancelText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "cancel-text",
+        "reflect": false,
+        "defaultValue": "\"Cancel\""
+      },
+      "okeyText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "okey-text",
+        "reflect": false,
+        "defaultValue": "\"Save\""
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SizeTypes",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {
+            "SizeTypes": {
+              "location": "import",
+              "path": "../../../models/bcm-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "Bcm.Size.medium"
+      },
+      "status": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Bcm.Status",
+          "resolved": "Status.default | Status.error | Status.info | Status.success | Status.warning",
+          "references": {
+            "Bcm": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "status",
+        "reflect": false,
+        "defaultValue": "Bcm.Status.info"
+      },
+      "statusIcon": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "status-icon",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "bcmCancel",
+        "name": "bcm-cancel",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/molecules/popover/popover.js

@@ -5,6 +5,7 @@
 import { Generate, Popover } from "@bcm/helpers";
 import { Bcm } from "@bcm/model";
 import { Host, h } from "@stencil/core";
+import { popoverStyle } from "./popover.style";
 export class BcmPopover {
   constructor() {
     this._id = Generate.UID();
@@ -69,7 +70,8 @@ export class BcmPopover {
     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)));
   }
   static get is() { return "bcm-popover"; }
   static get properties() {

package/dist/collection/components/molecules/popover/popover.style.js

@@ -0,0 +1,42 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { tv } from "tailwind-variants";
+export const popoverStyle = tv({
+  slots: {
+    host: [
+      "bcm-popover tw-inline-flex tw-h-fit tw-w-fit",
+    ],
+    popover: [
+      "bcm-ui-element bcm-ui-content-display",
+      "tw-whitespace-normal tw-break-words",
+      "tw-absolute tw-top-0 tw-left-0 tw-z-tooltip",
+      "tw-opacity-0 tw-transition-opacity tw-duration-300",
+      "tw-max-w-xs",
+      "tw-pointer-events-none",
+      "tw-block tw-rounded-md",
+      "tw-bg-[--bcm-popover-bg] tw-text-[--bcm-popover-text]",
+      "tw-shadow-3"
+    ],
+    messageStyle: "tw-font-semibold tw-w-full tw-px-3 tw-py-1.5",
+    contentStyle: "tw-border-0 tw-border-t tw-border-solid tw-border-[--bcm-popover-text]",
+    dividerStyle: "tw-font-normal tw-px-3 tw-py-1.5",
+  },
+  variants: {
+    size: {
+      small: {
+        popover: "tw-text-size-3",
+      },
+      medium: {
+        popover: "tw-text-size-4",
+      },
+      large: {
+        popover: "tw-text-size-5",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+  },
+});

package/dist/collection/components/molecules/radio/radio-group.js

@@ -17,8 +17,8 @@ import { Generate } from "@bcm/helpers";
 import { Bcm } from "@bcm/model";
 import { CaptionTemplate } from "@bcm/template";
 import { delay } from "@bcm/utils";
-import cs from 'classnames';
 import { IsLoad } from "@bcm/decorator";
+import { radioGroupStyle } from "./radio-group.style";
 export class BcmRadioGroup {
   constructor() {
     this._id = Generate.UID();
@@ -126,7 +126,11 @@ export class BcmRadioGroup {
   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: cs("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 })));
   }
   static get is() { return "bcm-radio-group"; }

package/dist/collection/components/molecules/radio/radio-group.style.js

@@ -0,0 +1,37 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { tv } from "tailwind-variants";
+export const radioGroupStyle = tv({
+  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,
+  },
+});