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

package/dist/components/bcm-toast.js

@@ -6,8 +6,181 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { c as classnames } from './index2.js';
 import { G as Generate } from './generate.js';
 import { S as StringHelper } from './string-helper.js';
-import { a as Bcm } from './bcm.js';
+import { B as Bcm } from './bcm.js';
 import { d as delay } from './utils.js';
+import { c as ce } from './index4.js';
+
+const toastStyle = ce({
+  slots: {
+    base: [
+      "bcm-toast",
+      "bcm-ui-element bcm-ui-content-display",
+      "tw-pointer-events-auto tw-transform tw-transition tw-duration-300 tw-ease-in-out",
+      "tw-flex tw-min-w-[256px] tw-max-w-[560px] tw-flex-col tw-gap-6 tw-rounded-lg tw-border tw-font-sans tw-font-normal tw-shadow-4",
+      "tw-border-gray-300 tw-bg-white tw-text-color-default",
+      "tw-p-7",
+      "tw-transform tw-transition tw-duration-300 tw-ease-in-out ",
+    ],
+    containerStyle: [
+      "tw-pointer-events-none tw-overflow-hidden tw-z-50",
+      "tw-fixed tw-flex",
+      "tw-p-4 tw-gap-4"
+    ],
+    header: ["tw-flex tw-items-center tw-justify-between tw-gap-5"],
+    headerLeft: ["tw-flex tw-items-center tw-gap-2.5"],
+    headerRight: ["tw-flex tw-items-baseline tw-gap-2"],
+    headerIcon: ["tw-text-size-8 "],
+    headerText: [],
+    descriptionStyle: ["tw-text-size-6 empty:tw-hidden tw-font-medium"],
+  },
+  variants: {
+    size: {
+      small: {
+        base: [],
+      },
+      medium: {
+        base: [],
+      },
+      large: {
+        base: [],
+      },
+    },
+    position: {
+      top: {
+        containerStyle: [
+          "tw-flex-col-reverse tw-top-4 tw-w-fit tw-left-0 tw-right-0 tw-mx-auto"
+        ]
+      },
+      bottom: {
+        containerStyle: [
+          "tw-flex-col tw-bottom-4 tw-w-fit tw-left-0 tw-right-0 tw-mx-auto"
+        ]
+      },
+      "top-start": {
+        containerStyle: [
+          "tw-flex-col-reverse tw-top-4 tw-left-4"
+        ]
+      },
+      "top-end": {
+        containerStyle: [
+          "tw-flex-col-reverse tw-top-4 tw-right-4"
+        ]
+      },
+      "bottom-start": {
+        containerStyle: [
+          "tw-flex-col tw-bottom-4 tw-left-4"
+        ]
+      },
+      "bottom-end": {
+        containerStyle: [
+          "tw-flex-col tw-bottom-4 tw-right-4"
+        ]
+      },
+    },
+    visibleContainer: {
+      true: {
+        base: [
+          "tw-translate-y-0 tw-opacity-100 "
+        ],
+      },
+      false: {
+        base: [
+          "tw-opacity-0"
+        ],
+      },
+    },
+    positionSplit: {
+      top: "",
+      bottom: "",
+    },
+    status: {
+      default: {
+        headerIcon: "",
+      },
+      success: {
+        headerIcon: "tw-text-color-success",
+      },
+      error: {
+        headerIcon: "tw-text-color-error",
+      },
+      warning: {
+        headerIcon: "tw-text-color-warning",
+      },
+      info: {
+        headerIcon: "tw-text-color-primary",
+      },
+    },
+    messageIcon: {
+      true: "",
+      false: "",
+    },
+    description: {
+      true: {
+        headerText: "tw-text-size-8 tw-font-semibold"
+      },
+      false: {
+        headerText: "tw-text-size-6"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      visibleContainer: false,
+      positionSplit: "top",
+      class: {
+        base: [
+          "tw-translate-y-[-100%]"
+        ]
+      },
+    },
+    {
+      visibleContainer: false,
+      positionSplit: "bottom",
+      class: {
+        base: [
+          "tw-translate-y-[100%]"
+        ]
+      },
+    },
+    {
+      messageIcon: false,
+      status: "success",
+      class: {
+        headerIcon: "fa-solid fa-check-circle",
+      },
+    },
+    {
+      messageIcon: false,
+      status: "error",
+      class: {
+        headerIcon: "fa-solid fa-exclamation-circle",
+      },
+    },
+    {
+      messageIcon: false,
+      status: "warning",
+      class: {
+        headerIcon: "fa-solid fa-exclamation-triangle",
+      },
+    },
+    {
+      messageIcon: false,
+      status: "info",
+      class: {
+        headerIcon: "fa-solid fa-info-circle",
+      }
+    }
+  ],
+  defaultVariants: {
+    size: "medium",
+    position: "bottom",
+    visibleContainer: false,
+    positionSplit: "bottom",
+    status: "default",
+    messageIcon: false,
+    description: false,
+  },
+});
 
 const BcmToast$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -70,44 +243,27 @@ const BcmToast$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (!container) {
       container = document.createElement("div");
       container.id = containerId;
-      const classlist = classnames("tw-pointer-events-none tw-overflow-hidden tw-z-50", "tw-fixed tw-flex", "tw-p-4 tw-gap-4", {
-        "tw-flex-col-reverse tw-inset-x-0 tw-top-4 tw-mx-auto": this.position === Bcm.Placement.top,
-        "tw-flex-col tw-inset-x-0 tw-bottom-4 tw-mx-auto": this.position === Bcm.Placement.bottom,
-        "tw-flex-col-reverse tw-top-4 tw-left-4": this.position === Bcm.Placement["top-start"],
-        "tw-flex-col-reverse tw-top-4 tw-right-4": this.position === Bcm.Placement["top-end"],
-        "tw-flex-col tw-bottom-4 tw-left-4": this.position === Bcm.Placement["bottom-start"],
-        "tw-flex-col tw-bottom-4 tw-right-4": this.position === Bcm.Placement["bottom-end"],
-      });
+      const { containerStyle } = toastStyle({ position: this.position });
+      const classlist = containerStyle();
       container.classList.add(...classlist.split(" "));
       document.body.appendChild(container);
     }
     return container;
   }
   render() {
-    return (h(Host, { class: "tw-hidden" }, h("div", { class: classnames({ "tw-hidden": !this.visible }), id: this._id + "-container", onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { class: classnames("tw-pointer-events-auto tw-transform tw-transition tw-duration-300 tw-ease-in-out", "tw-flex tw-min-w-[256px] tw-max-w-[420px] tw-flex-col tw-gap-2 tw-rounded-lg tw-border tw-font-sans tw-font-normal tw-shadow-2", "tw-border-gray-300 tw-bg-white tw-text-slate-600", {
-        "tw-p-4": !this.description,
-        "tw-p-6": this.description,
-      }, "tw-transform tw-transition tw-duration-300 tw-ease-in-out ", {
-        "tw-translate-y-0 tw-opacity-100 ": this.visibleContainer,
-        "tw-opacity-0": !this.visibleContainer,
-        "tw-translate-y-[-100%]": !this.visibleContainer && this.position.split("-")[0] === "top",
-        "tw-translate-y-[100%]": !this.visibleContainer && this.position.split("-")[0] === "bottom",
-      }) }, h("div", { class: "tw-flex tw-items-center tw-justify-between tw-gap-5" }, h("div", { class: "tw-flex tw-items-center tw-gap-3 " }, this.status && (h("i", { class: classnames("tw-text-6", this.messageIcon ? this.messageIcon : "far", {
-        "tw-text-emerald-500": this.status === "success",
-        "tw-text-red-500": this.status === "error",
-        "tw-text-amber-500": this.status === "warning",
-        "tw-text-blue-500": this.status === "info",
-      }, {
-        "fa-check-circle": !this.messageIcon && this.status === "success",
-        "fa-exclamation-circle": !this.messageIcon && this.status === "error",
-        "fa-exclamation-triangle": !this.messageIcon && this.status === "warning",
-        "fa-info-circle": !this.messageIcon && this.status === "info",
-      }) })), h("span", { class: classnames({
-        "tw-text-4": !this.description,
-        "tw-text-6 tw-font-medium": this.description,
-      }) }, !this.description && this.status && h("span", null, StringHelper.capitalize(this.status), ": "), this.message)), h("div", { class: "tw-flex tw-items-baseline tw-gap-2" }, this.viewButton && (h("button", { onClick: () => this.bcmToastView.emit(), title: "View details", class: classnames("tw-cursor-pointer tw-rounded tw-bg-transparent tw-p-0 tw-px-1 tw-text-4 tw-text-inherit", "hover:tw-bg-gray-100 hover:tw-text-slate-800", "active:tw-bg-gray-200", "tw-transition tw-duration-300 tw-ease-in-out", {
+    const { position, visibleContainer, messageIcon, status, description } = this;
+    const positionSplit = position.split("-")[0] || "bottom";
+    const { base, header, headerLeft, headerRight, headerIcon, headerText, descriptionStyle } = toastStyle({
+      position: position,
+      visibleContainer,
+      positionSplit,
+      status,
+      messageIcon: messageIcon ? true : false,
+      description: description ? true : false
+    });
+    return (h(Host, { class: "tw-hidden" }, h("div", { class: classnames({ "tw-hidden": !this.visible }), id: this._id + "-container", onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { class: base() }, h("div", { class: header() }, h("div", { class: headerLeft() }, this.status && (h("i", { class: headerIcon() + " " + messageIcon })), h("span", { class: headerText() }, !this.description && this.status && h("span", null, StringHelper.capitalize(this.status), ": "), this.message)), h("div", { class: headerRight() }, this.viewButton && (h("button", { onClick: () => this.bcmToastView.emit(), title: "View details", class: classnames("tw-appearance-none tw-border-0 ", "tw-cursor-pointer tw-rounded tw-bg-transparent tw-p-0 tw-px-2 tw-text-size-6 tw-text-inherit", "hover:tw-bg-color-default-hover", "active:tw-bg-color-default-active", "tw-transition tw-duration-300 tw-ease-in-out", {
         "tw-font-medium": this.description,
-      }) }, "View")), this.closeButton && (h("button", { title: "Close", onClick: () => this.hide(), class: classnames("tw-rounded tw-bg-transparent tw-p-0", "tw-flex tw-h-6 tw-w-6 tw-cursor-pointer tw-items-center tw-justify-center tw-text-3 tw-text-inherit", "hover:tw-bg-gray-100 hover:tw-text-slate-800", "active:tw-bg-gray-200") }, h("i", { class: "fal fa-times" }))))), this.description && h("div", { class: "tw-text-3 " }, this.description), h("slot", null)))));
+      }) }, "View")), this.closeButton && (h("button", { title: "Close", onClick: () => this.hide(), class: classnames("tw-appearance-none tw-border-0 ", "tw-rounded tw-bg-transparent tw-p-0", "tw-flex tw-h-6 tw-w-6 tw-cursor-pointer tw-items-center tw-justify-center tw-text-size-8 tw-text-inherit", "hover:tw-bg-color-default-hover", "active:tw-bg-color-default-active") }, h("i", { class: "fa-regular fa-times" }))))), this.description && h("div", { class: descriptionStyle() }, this.description), h("div", { class: descriptionStyle() }, h("slot", null))))));
   }
   get el() { return this; }
 }, [4, "bcm-toast", {

package/dist/components/bcm.js

@@ -73,7 +73,7 @@ var Bcm;
     Kind["solid"] = "solid";
     Kind["ghost"] = "ghost";
     Kind["link"] = "link";
-    Kind["ghost-link"] = "ghost-link";
+    Kind["outline"] = "outline";
   })(Bcm.Kind || (Bcm.Kind = {}));
   (function (ButtonType) {
     ButtonType["button"] = "button";
@@ -444,7 +444,13 @@ var Bcm;
     ListType["select"] = "select";
     ListType["autocomplete"] = "autocomplete";
   })(Bcm.ListType || (Bcm.ListType = {}));
+  (function (Target) {
+    Target["blank"] = "_blank";
+    Target["parent"] = "_parent";
+    Target["self"] = "_self";
+    Target["top"] = "_top";
+  })(Bcm.Target || (Bcm.Target = {}));
 })(Bcm || (Bcm = {}));
 const Bcm$1 = Bcm;
 
-export { Bcm as B, Bcm$1 as a };
+export { Bcm$1 as B, Bcm as a };