@base-framework/ui 1.2.14 → 1.2.16

package/dist/confirmation-DIaNfDm8.js

@@ -0,0 +1,751 @@
+import { Component as c, Html as m, Dom as y, base as w, Data as T, Builder as b, DateTime as g } from "@base-framework/base";
+import { Li as v, Span as u, Div as r, Ul as D, Button as S, I as x, OnState as B, Time as Y } from "@base-framework/atoms";
+import { ar as k, b0 as C, f as h, al as N, F as O } from "./full-page-B0EJ6uzY.js";
+import { List as F, DynamicTime as E } from "@base-framework/organisms";
+class X extends c {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.removingClass = "";
+  }
+  /**
+   * This will remove the component from the DOM after a delay.
+   *
+   * @returns {void}
+   */
+  remove() {
+    this.prepareDestroy(), this.removeContext();
+    const t = this.panel, s = this.removingClass;
+    if (!s) {
+      m.removeElement(t);
+      return;
+    }
+    y.addClass(t, s), w.on("animationend", t, (o) => m.removeElement(t));
+  }
+}
+const L = (e) => u({ class: "ml-auto text-xs tracking-widest opacity-60" }, e), M = (e) => u({ class: "flex w-4 h-4", html: e }), P = (e) => u({ class: "flex-auto" }, e), I = (e, t) => v({
+  class: "relative flex cursor-pointer hover:bg-muted/50 select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  click: () => t(e)
+}, [
+  e.icon && M(e.icon),
+  P(e.label),
+  e.shortcut && L(e.shortcut)
+]), A = (e, t) => D({ class: "grid gap-2" }, [
+  e.map((s) => I(s, t))
+]), U = (e) => r({ class: "w-full z-10" }, [
+  r({
+    class: "max-h-60 border rounded-md overflow-y-auto p-1 grid gap-2 divide-y divide-border",
+    for: ["groups", (t) => A(t, e)]
+  })
+]), z = ({ label: e, icon: t, toggleDropdown: s }) => S({
+  cache: "button",
+  class: `inline-flex items-center justify-between rounded-md border
+			px-2 py-2 text-sm font-medium hover:bg-muted
+			focus:outline-none transition duration-150 ease-in-out`,
+  click: s
+}, [
+  e && u(e),
+  t && x({ html: t })
+]), $ = ({ onSelect: e }) => r([
+  B(
+    "open",
+    (t, s, o) => t ? new k({
+      cache: "dropdown",
+      parent: o,
+      button: o.button
+    }, [
+      U(e)
+    ]) : null
+  )
+]);
+class Z extends c {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.label = null, this.icon = null, this.onSelect = null, this.groups = [];
+  }
+  /**
+   * Initializes component data.
+   *
+   * @returns {Data}
+   */
+  setData() {
+    return new T({
+      groups: this.groups || []
+    });
+  }
+  /**
+   * Initializes the component state.
+   *
+   * @returns {object}
+   */
+  setupStates() {
+    return {
+      open: !1,
+      selectedItem: null
+    };
+  }
+  /**
+   * Toggles the dropdown open state.
+   *
+   * @returns {void}
+   */
+  toggleDropdown() {
+    this.state.toggle("open");
+  }
+  /**
+   * Handles item selection within the dropdown.
+   *
+   * @param {object} item - The selected item object
+   * @returns {void}
+   */
+  handleSelect(t) {
+    this.state.selectedItem = t, this.state.open = !1, typeof this.onSelect == "function" && this.onSelect(t);
+  }
+  /**
+   * Renders the Dropdown component.
+   *
+   * @returns {object}
+   */
+  render() {
+    return r({ class: "relative" }, [
+      z({
+        label: this.label,
+        icon: this.icon,
+        toggleDropdown: this.toggleDropdown.bind(this)
+      }),
+      $({ onSelect: this.handleSelect.bind(this) })
+    ]);
+  }
+}
+const H = (e) => b.render(e, app.root);
+class W extends c {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.title = null, this.description = null, this.size = null, this.type = null, this.hidePrimaryButton = !1, this.hideFooter = !1, this.icon = null, this.onSubmit = null, this.onClose = null, this.back = !1;
+  }
+  /**
+   * This will render the modal component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const t = this.getMainClass(), s = this.title || "", o = this.description || null;
+    return C(
+      {
+        class: t,
+        title: s,
+        description: o,
+        options: this.headerOptions(),
+        buttons: this.getButtons(),
+        hideFooter: this.hideFooter,
+        onSubmit: (i) => {
+          let n = !0;
+          this.onSubmit && (n = this.onSubmit(i)), n !== !1 && this.destroy();
+        },
+        icon: this.icon,
+        back: this.back ?? !1,
+        aria: { expanded: ["open"] }
+      },
+      this.children
+    );
+  }
+  /**
+   * This will setup the states.
+   *
+   * @returns {object}
+   */
+  setupStates() {
+    return {
+      open: {
+        state: !1,
+        callBack: (t) => {
+          t || this.destroy();
+        }
+      }
+    };
+  }
+  /**
+   * This will get the header options.
+   *
+   * @returns {Array<object>}
+   */
+  headerOptions() {
+    return [];
+  }
+  /**
+   * This will get the buttons for the modal.
+   *
+   * @returns {array}
+   */
+  getButtons() {
+    return [
+      h({ variant: "outline", click: () => this.destroy() }, "Cancel"),
+      this.hidePrimaryButton !== !0 && h({ variant: "primary", type: "submit" }, "Save")
+    ];
+  }
+  /**
+   * This will check if the click was outside the component.
+   *
+   * @param {object} element
+   * @returns {boolean}
+   */
+  isOutsideClick(t) {
+    return !this.panel.contains(t);
+  }
+  /**
+   * This will get the size class.
+   *
+   * @returns {string}
+   */
+  getSizeClass() {
+    switch (this.size) {
+      // case 'sm':
+      // 	return 'sm max-w-[646px]';
+      case "lg":
+        return "lg max-w-[900px]";
+      case "xl":
+        return "xl max-w-[1400px]";
+      default:
+        return "md max-w-[760px]";
+    }
+  }
+  /**
+   * This will get the type class.
+   *
+   * @returns {string}
+   */
+  getTypeClass() {
+    switch (this.type) {
+      case "right":
+        return "right right-0";
+      case "left":
+        return "left left-0";
+      case "drawer":
+        return "drawer";
+      default:
+        return "";
+    }
+  }
+  /**
+   * This will get the modal class.
+   *
+   * @returns {string}
+   */
+  getMainClass() {
+    return this.getSizeClass() + " " + this.getTypeClass();
+  }
+  /**
+   * This will override the set up to use the app shell.
+   *
+   * @param {object} container
+   */
+  setContainer(t) {
+    this.container = app.root;
+  }
+  /**
+   * This will open the modal.
+   *
+   * @returns {void}
+   */
+  open() {
+    H(this), this.showModal();
+  }
+  /**
+   * This will destroy the modal.
+   *
+   * @returns {void}
+   */
+  close() {
+    this.destroy();
+  }
+  /**
+   * This will show the modal.
+   *
+   * @protected
+   * @returns {void}
+   */
+  showModal() {
+    globalThis.setTimeout(() => this.panel.showPopover(), 10), this.state.open = !0, document.documentElement.style.overflowY = "hidden";
+  }
+  /**
+   * This will hide the modal.
+   *
+   * @protected
+   * @returns {void}
+   */
+  beforeDestroy() {
+    this?.panel?.hidePopover(), this.state.open = !1, typeof this.onClose == "function" && this.onClose(this), document.documentElement.style.overflowY = "auto";
+  }
+}
+class G {
+  /**
+   * Creates an instance of DrawerGesture.
+   *
+   * @param {object} [options={}]
+   * @param {HTMLElement} [options.modal=null] - The modal element (panel) reference
+   * @param {HTMLElement} [options.modalContent=null] - The modal content element reference
+   * @param {HTMLElement} [options.modalBody=null] - The scrollable body element reference
+   * @param {number} [options.closeThreshold=150] - Pixels to drag before closing
+   * @param {number} [options.snapThreshold=50] - Pixels to drag before snapping
+   * @param {Function} [options.onClose=null] - Callback when drawer should close
+   */
+  constructor(t = {}) {
+    const {
+      modal: s = null,
+      modalContent: o = null,
+      modalBody: i = null,
+      closeThreshold: n = 150,
+      snapThreshold: a = 50,
+      onClose: p = null
+    } = t;
+    this.modal = s, this.modalContent = o, this.modalBody = i, this.closeThreshold = n, this.snapThreshold = a, this.onClose = p, this.reset();
+  }
+  /**
+   * Resets the drag state to initial values
+   *
+   * @returns {void}
+   */
+  reset() {
+    this.state = {
+      isDragging: !1,
+      startY: 0,
+      currentY: 0,
+      startScrollTop: 0,
+      canDrag: !1
+    };
+  }
+  /**
+   * Checks if the viewport is mobile size
+   *
+   * @returns {boolean}
+   */
+  isMobile() {
+    return window.innerWidth < 1024;
+  }
+  /**
+   * Handles touch start event
+   *
+   * @param {TouchEvent} e - The touch event
+   * @returns {void}
+   */
+  handleTouchStart(t) {
+    if (!this.modalBody)
+      return;
+    const s = t.touches[0];
+    this.state.startY = s.clientY, this.state.currentY = s.clientY, this.state.startScrollTop = this.modalBody.scrollTop, this.state.canDrag = this.modalBody.scrollTop === 0;
+  }
+  /**
+   * Handles touch move event
+   *
+   * @param {TouchEvent} e - The touch event
+   * @returns {void}
+   */
+  handleTouchMove(t) {
+    if (!this.modalContent || !this.modalBody)
+      return;
+    const s = t.touches[0];
+    this.state.currentY = s.clientY;
+    const o = this.getDeltaY();
+    if (!this.state.isDragging && this.state.canDrag && o > 0 && this.modalBody.scrollTop === 0 && (this.state.isDragging = !0), this.state.isDragging && o > 0) {
+      t.preventDefault();
+      const i = this.calculateTranslateY(o);
+      this.modalContent.style.transform = `translateY(${i}px)`, this.modalContent.style.transition = "none";
+      const n = this.calculateBackdropOpacity(o);
+      this.updateBackdropOpacity(n);
+    } else this.modalBody.scrollTop > 0 && (this.state.canDrag = !1);
+  }
+  /**
+   * Handles touch end event
+   *
+   * @param {TouchEvent} e - The touch event
+   * @returns {void}
+   */
+  handleTouchEnd(t) {
+    if (!this.modalContent)
+      return;
+    const s = this.getDeltaY();
+    this.state.isDragging && (this.modalContent.style.transition = "transform 0.3s ease-out, opacity 0.3s ease-out", s > this.closeThreshold ? this.animateClose() : this.snapBack()), this.state.isDragging = !1, this.state.canDrag = !1;
+  }
+  /**
+   * Gets current drag delta Y
+   *
+   * @returns {number} The vertical drag distance in pixels
+   */
+  getDeltaY() {
+    return this.state.currentY - this.state.startY;
+  }
+  /**
+   * Calculates translateY with rubber band damping effect.
+   * The further you drag, the more resistance is applied.
+   *
+   * @param {number} deltaY - The raw drag distance
+   * @returns {number} The damped translation distance
+   */
+  calculateTranslateY(t) {
+    const s = 1 - t / (window.innerHeight * 2);
+    return t * Math.max(s, 0.5);
+  }
+  /**
+   * Calculates backdrop opacity based on drag distance.
+   * Opacity decreases as the drawer is dragged down.
+   *
+   * @param {number} deltaY - The drag distance
+   * @returns {number} Opacity value between 0 and 1
+   */
+  calculateBackdropOpacity(t) {
+    return Math.max(0, 1 - t / this.closeThreshold);
+  }
+  /**
+   * Updates the backdrop opacity via CSS custom property
+   *
+   * @param {number} opacity - The opacity value (0-1)
+   * @returns {void}
+   */
+  updateBackdropOpacity(t) {
+    this.modal && this.modal.style.setProperty("--backdrop-opacity", t.toString());
+  }
+  /**
+   * Animates the drawer closing by translating the entire modal off-screen
+   *
+   * @returns {void}
+   */
+  animateClose() {
+    !this.modal || !this.modalContent || (this.modalContent.style.transform = "translateY(0)", this.modalContent.style.transition = "none", this.modal.style.transition = "transform 0.3s ease-out, opacity 0.3s ease-out", this.modal.style.transform = "translateY(100%)", this.updateBackdropOpacity(0), setTimeout(() => {
+      this.onClose && this.onClose();
+    }, 300));
+  }
+  /**
+   * Snaps the drawer back to its original position
+   *
+   * @returns {void}
+   */
+  snapBack() {
+    this.modalContent && (this.modalContent.style.transform = "translateY(0)", this.updateBackdropOpacity(1));
+  }
+  /**
+   * Checks if currently dragging
+   *
+   * @returns {boolean}
+   */
+  isDragging() {
+    return this.state.isDragging;
+  }
+  /**
+   * Cleans up resources and resets state
+   *
+   * @returns {void}
+   */
+  destroy() {
+    this.reset(), this.modal = null, this.onClose = null;
+  }
+}
+class tt extends W {
+  /**
+   * Declares the component props
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    super.declareProps(), this.type = "drawer", this.swipeToClose = !0, this.closeThreshold = 150, this.snapThreshold = 50, this.gesture = null, this.modalContent = null, this.modalBody = null;
+  }
+  /**
+   * Gets extra props to pass to ModalContainer
+   *
+   * @returns {object}
+   */
+  getContainerProps() {
+    const t = {};
+    return this.swipeToClose && (t.gestureHandlers = this.getGestureHandlers()), t;
+  }
+  /**
+   * Renders the drawer with gesture handlers
+   *
+   * @returns {object}
+   */
+  render() {
+    const t = this.getMainClass(), s = this.title || "", o = this.description || null, i = this.getContainerProps();
+    return C(
+      {
+        class: t,
+        title: s,
+        description: o,
+        options: this.headerOptions(),
+        buttons: this.getButtons(),
+        hideFooter: this.hideFooter,
+        onSubmit: (n) => {
+          let a = !0;
+          this.onSubmit && (a = this.onSubmit(n)), a !== !1 && this.destroy();
+        },
+        icon: this.icon,
+        back: this.back ?? !1,
+        aria: { expanded: ["open"] },
+        ...i
+      },
+      this.children
+    );
+  }
+  /**
+   * Shows the modal and initializes gesture handling
+   *
+   * @protected
+   * @returns {void}
+   */
+  showModal() {
+    super.showModal(), this.swipeToClose && !this.gesture && (this.gesture = new G({
+      // @ts-ignore
+      modal: this.panel,
+      // @ts-ignore
+      modalContent: this.modalContent,
+      // @ts-ignore
+      modalBody: this.modalBody,
+      closeThreshold: this.closeThreshold,
+      snapThreshold: this.snapThreshold,
+      onClose: () => this.destroy()
+    }));
+  }
+  /**
+   * Gets gesture event handlers for modal content.
+   * Returns event props to be spread onto the modal-content element.
+   * Handlers are bound methods that will work once gesture is initialized.
+   *
+   * @returns {object}
+   */
+  getGestureHandlers() {
+    return this.swipeToClose ? {
+      touchstart: (t) => this.gesture?.handleTouchStart(t),
+      touchmove: (t) => this.gesture?.handleTouchMove(t),
+      touchend: (t) => this.gesture?.handleTouchEnd(t)
+    } : {};
+  }
+  /**
+   * Cleans up before destroy
+   *
+   * @protected
+   * @returns {void}
+   */
+  beforeDestroy() {
+    this.gesture && (this.gesture.destroy(), this.gesture = null), super.beforeDestroy();
+  }
+}
+let _ = 0;
+class et extends c {
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    return r({ class: "notification-container pointer-events-none inset-auto bg-transparent backdrop:bg-transparent overflow-visible fixed bottom-[80px] right-0 z-50 p-5", popover: "manual" }, [
+      new F({
+        cache: "list",
+        key: "id",
+        role: "list",
+        rowItem: (t) => new N(t)
+      })
+    ]);
+  }
+  /**
+   * This will add a notification.
+   *
+   * @param {object} props
+   * @returns {void}
+   */
+  addNotice(t = {}) {
+    t.id = _++, t.callBack = () => this.removeNotice(t), this?.list?.append([t]), this?.panel?.hidePopover(), this?.panel?.showPopover();
+  }
+  /**
+   * This will remove a notification.
+   *
+   * @param {object} notice
+   * @returns {void}
+   */
+  removeNotice(t) {
+    this?.list?.delete(t.id), this?.list?.isEmpty() && this?.panel?.hidePopover();
+  }
+}
+const d = {
+  ONLINE: "online",
+  OFFLINE: "offline",
+  BUSY: "busy",
+  AWAY: "away"
+}, l = {
+  ONLINE: "bg-green-500",
+  OFFLINE: "bg-gray-500",
+  BUSY: "bg-red-500",
+  AWAY: "bg-yellow-500"
+}, j = (e = "") => (e = e.toUpperCase(), l[e] || l.OFFLINE), st = (e) => r({
+  class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${j(e)}`
+}), ot = ({ propName: e = "status" } = {}) => r({
+  class: "absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full",
+  onSet: [e, {
+    [l.ONLINE]: d.ONLINE,
+    [l.OFFLINE]: d.OFFLINE,
+    [l.BUSY]: d.BUSY,
+    [l.AWAY]: d.AWAY
+  }]
+}), it = ({ dateTime: e = "", remoteTimeZone: t = "America/Denver", filter: s = null }) => Y([
+  new E({
+    dateTime: e,
+    filter: s || ((o) => {
+      const i = g.getLocalTime(o, !0, !1, t);
+      return g.getTimeFrame(i);
+    })
+  })
+]), q = (e) => b.render(e, app.root), f = {
+  info: {
+    borderColor: "border-blue-500",
+    bgColor: "bg-muted/10",
+    iconColor: "text-blue-500"
+  },
+  warning: {
+    bgColor: "bg-muted/10",
+    borderColor: "border-warning",
+    iconColor: "text-warning"
+  },
+  destructive: {
+    bgColor: "bg-muted/10",
+    borderColor: "border-destructive",
+    iconColor: "text-red-500"
+  },
+  success: {
+    bgColor: "bg-muted/10",
+    borderColor: "border-emerald-500",
+    iconColor: "text-emerald-500"
+  },
+  default: {
+    borderColor: "border",
+    bgColor: "bg-muted/10",
+    iconColor: "text-muted-foreground"
+  }
+};
+class J extends c {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.title = null, this.description = null, this.type = "", this.icon = null, this.onClose = null, this.hideFooter = !1, this.buttons = null;
+  }
+  /**
+   * This will render the modal component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const t = (p) => {
+      p.target === this.panel && this.close();
+    }, { borderColor: s, bgColor: o, iconColor: i } = f[this.type] || f.default, n = `${this.getMainClass()} ${o} ${s}`, a = this.title || "Dialog Title";
+    return O({
+      class: n,
+      title: a,
+      click: t,
+      icon: this.icon,
+      iconColor: i,
+      description: this.description,
+      buttons: this.getButtons()
+    }, this.children);
+  }
+  /**
+   * This will get the buttons for the modal.
+   *
+   * @returns {array|null}
+   */
+  getButtons() {
+    return this.hideFooter ? null : this.buttons ? this.buttons : [
+      h({ variant: "outline", click: () => this.close() }, "Close")
+    ];
+  }
+  /**
+   * This will setup the states.
+   *
+   * @returns {object}
+   */
+  setupStates() {
+    return {
+      open: !1
+    };
+  }
+  /**
+   * This will get the modal class.
+   *
+   * @returns {string}
+   */
+  getMainClass() {
+    return "";
+  }
+  /**
+   * This will open the modal.
+   *
+   * @returns {void}
+   */
+  open() {
+    q(this), this.panel.showModal(), this.state.open = !0;
+  }
+  /**
+   * This will close the modal.
+   *
+   * @returns {void}
+   */
+  close() {
+    this.state.open = !1, this.panel.close(), typeof this.onClose == "function" && this.onClose(), this.destroy();
+  }
+}
+class nt extends J {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.confirmTextLabel = null, this.confirmed = null;
+  }
+  /**
+   * This will get the buttons for the modal.
+   *
+   * @returns {array}
+   */
+  getButtons() {
+    const t = this.confirmTextLabel || "Confirm";
+    return [
+      h({ variant: "outline", click: () => this.close() }, "Cancel"),
+      h({ variant: "primary", click: () => this.confirm() }, t)
+    ];
+  }
+  /**
+   * This will confirm the action.
+   *
+   * @returns {void}
+   */
+  confirm() {
+    this.confirmed && this.confirmed(), this.close();
+  }
+}
+export {
+  nt as C,
+  X as D,
+  W as M,
+  et as N,
+  d as S,
+  it as T,
+  J as a,
+  tt as b,
+  U as c,
+  I as d,
+  Z as e,
+  l as f,
+  st as g,
+  ot as h,
+  j as i
+};