bromcom-ui 2.9.0-rc.8 → 2.9.0

package/dist/esm/tooltip-helper-e5246812.js

@@ -0,0 +1,155 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import './element-dragger-89bb52fd.js';
+import { S as StringHelper } from './string-helper-b0e05041.js';
+import { d as delay } from './utils-57652744.js';
+import { F as FloatingUI } from './floating-ui-8a0c54d6.js';
+import { C as ColorHelper } from './color-helper-845ba523.js';
+import './validators-22975416.js';
+import { G as Generate } from './generate-7a1258c4.js';
+import './number-helper-fe7d1aca.js';
+import { a as Bcm } from './bcm-d45dc47d.js';
+
+class Tooltip {
+  constructor({ message, targetId, placement = "top", color = "slate-700", trigger = "none", size = "medium", openDelay = 0, closeDelay = 0, autoHide = false, emitShow = () => { }, emitHide = () => { }, }) {
+    this.destroy = () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        this.el.remove();
+        this.emitHide();
+      }
+      this.removeListener();
+    };
+    this.target = () => document.getElementById(this.targetId);
+    this.sizeClass = () => {
+      switch (this.size) {
+        case Bcm.Size.small:
+          return "tw-text-1";
+        case Bcm.Size.medium:
+          return "tw-text-2";
+        case Bcm.Size.large:
+          return "tw-text-3";
+        default:
+          return "tw-text-2";
+      }
+    };
+    this.init = () => {
+      const { tone, colorName } = ColorHelper.parseColor(this.color, 700);
+      const dc = Generate.getTwColor({
+        color: colorName,
+        tones: {
+          [tone]: ["bg"],
+        },
+        variable: "--bcm-tooltip",
+      });
+      const style = Object.assign(Object.assign({}, dc), (dc["--bcm-tooltip-bg"] && { "--bcm-tooltip-text": ColorHelper.reverseColor(dc["--bcm-tooltip-bg"]) }));
+      this.el = Generate.createElement("div", {
+        "id": `${this.targetId}-tooltip-box`,
+        "class": `
+            tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-pointer-events-none tw-max-w-xs tw-py-1 tw-px-2 tw-rounded tw-bg-[--bcm-tooltip-bg] tw-text-[--bcm-tooltip-text] ${this.sizeClass()} tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300`,
+        "role": "tooltip",
+        "aria-hidden": "true",
+        "style": ColorHelper.generateStyleString(style),
+        "innerHTML": StringHelper.trim(this.message),
+      });
+    };
+    this.update = () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        this.hide();
+        this.show();
+      }
+    };
+    this.listener = () => {
+      window.addEventListener("resize", this.calculatePosition.bind(this));
+      window.addEventListener("scroll", this.calculatePosition.bind(this), true);
+      window.addEventListener("wheel", this.calculatePosition.bind(this));
+      if (this.trigger && this.target()) {
+        switch (this.trigger) {
+          case "click":
+            this.target().addEventListener("click", this.toggle.bind(this));
+            this.autoHide && this.target().addEventListener("mouseleave", this.hide.bind(this));
+            break;
+          case "hover":
+            this.target().addEventListener("mouseenter", this.show.bind(this));
+            this.target().addEventListener("mouseleave", this.hide.bind(this));
+            break;
+          case "focus":
+            this.target().addEventListener("focus", this.show.bind(this), true);
+            this.target().addEventListener("blur", this.hide.bind(this), true);
+            break;
+        }
+      }
+      this.calculatePosition();
+    };
+    this.removeListener = () => {
+      window.removeEventListener("resize", this.calculatePosition.bind(this));
+      window.removeEventListener("scroll", this.calculatePosition.bind(this), true);
+      window.removeEventListener("wheel", this.calculatePosition.bind(this));
+      if (this.target()) {
+        this.target().removeEventListener("click", this.toggle.bind(this));
+        this.target().removeEventListener("mouseenter", this.show.bind(this));
+        this.target().removeEventListener("mouseleave", this.hide.bind(this));
+        this.target().removeEventListener("focus", this.show.bind(this), true);
+        this.target().removeEventListener("blur", this.hide.bind(this), true);
+      }
+    };
+    this.calculatePosition = () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        FloatingUI({
+          ref: this.target(),
+          floating: this.el,
+          placement: this.placement,
+          offset: 8,
+          arrow: true,
+          arrowColor: `tw-bg-[--bcm-tooltip-bg]`,
+        });
+      }
+    };
+    this.show = async () => {
+      if (this.message) {
+        this.init();
+        await delay(this.openDelay);
+        this.calculatePosition();
+        this.emitShow();
+      }
+      else {
+        this.hide();
+      }
+    };
+    this.hide = async () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        await delay(this.closeDelay);
+        this.el && this.el.remove();
+        this.emitHide();
+      }
+    };
+    this.toggle = () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        this.hide();
+      }
+      else {
+        this.show();
+      }
+    };
+    this.message = message;
+    this.targetId = targetId;
+    this.placement = placement;
+    this.color = color;
+    this.id = targetId + "-tooltip-box";
+    this.trigger = trigger;
+    this.size = size;
+    this.openDelay = openDelay;
+    this.closeDelay = closeDelay;
+    this.autoHide = autoHide;
+    this.emitShow = emitShow;
+    this.emitHide = emitHide;
+  }
+}
+
+export { Tooltip as T };

package/dist/esm/{utils-b3338faf.js → utils-57652744.js}

@@ -120,4 +120,4 @@ const pluralize = (function () {
   return text;
 })();
 
-export { getChildElements as a, dropInComponent as b, getChilds as c, delay as d, extractColor as e, getTransform as g, pluralize as p };
+export { getTransform as a, dropInComponent as b, getChilds as c, delay as d, extractColor as e, getChildElements as g, pluralize as p };

package/dist/esm/{validators-77fbe47e.js → validators-22975416.js}

@@ -2,7 +2,11 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { s as snq } from './generate-e008f24f.js';
+import { s as snq } from './generate-7a1258c4.js';
+
+class DateTimeHelper {
+}
+DateTimeHelper.convertTimeStampToDate = (timestamp) => new Date(timestamp);
 
 class Validators {
 }
@@ -28,4 +32,4 @@ Validators.isValidate = (str, type) => {
   }
 };
 
-export { Validators as V };
+export { DateTimeHelper as D, Validators as V };