@base-framework/ui 1.2.14 → 1.2.16

package/dist/mobile-nav-wrapper-C7cKTxaV.js

@@ -1,499 +0,0 @@
-import { Button as g, Div as l, Label as b, Span as w, Ul as r, H4 as S, Nav as d, H3 as h, OnState as B, UseParent as N } from "@base-framework/atoms";
-import { Component as n, Atom as i, NavLink as L, router as u } from "@base-framework/base";
-import { U as o, B as p } from "./buttons-C-_NH7ie.js";
-import { Icons as c } from "./icons.es.js";
-class C extends n {
-  /**
-   * This will declare the props for the compiler.
-   *
-   * @returns {void}
-   */
-  declareProps() {
-    this.class = "", this.checkCallBack = null;
-  }
-  /**
-   * This will render the component.
-   *
-   * @override
-   * @returns {object}
-   */
-  render() {
-    const e = this.state;
-    return g({
-      class: this.class || "",
-      onState: [
-        ["selected", {
-          selected: !0
-        }],
-        ["active", {
-          active: !0
-        }]
-      ],
-      click: () => {
-        if (e.toggle("active"), !this.checkCallBack)
-          return;
-        const t = e.active ? this : null;
-        this.checkCallBack(t);
-      }
-    }, this.children);
-  }
-  /**
-   * This will set up the states.
-   *
-   * @override
-   * @protected
-   * @returns {object}
-   */
-  setupStates() {
-    return {
-      selected: !1,
-      active: !1
-    };
-  }
-  /**
-   * This will update the states.
-   *
-   * @param {object} selected
-   * @returns {void}
-   */
-  update(e) {
-    this.state.set({
-      selected: e,
-      active: e
-    });
-  }
-}
-const y = i(({ options: s, click: e }, t) => ({
-  tag: "li",
-  ...{
-    class: `relative flex flex-row w-auto text-left p-0 transition-all cursor-pointer min-w-[48px] option${s ? " sub" : ""}`,
-    click: e
-  },
-  children: t
-})), P = (s, e = null, t = !1) => [
-  e && l({
-    class: "icon w-12 rounded-md flex items-center justify-center min-w-12",
-    onState: ["selected", {
-      selected: !0
-    }]
-  }, [
-    o({ size: "sm" }, e)
-  ]),
-  b({ class: "label flex flex-auto text-sm items-center cursor-pointer whitespace-nowrap" }, s),
-  t && w(
-    {
-      class: "flex justify-center items-center px-1 transition-all text-muted-foreground mr-2",
-      onState: [
-        ["selected", {
-          rotate: !0
-        }],
-        ["active", {
-          rotate: !0
-        }]
-      ]
-    },
-    [
-      o({ size: "xs" }, c.chevron.single.down)
-    ]
-  )
-];
-class f extends n {
-  /**
-   * This will declare the props for the compiler.
-   *
-   * @returns {void}
-   */
-  declareProps() {
-    this.label = "", this.icon = null, this.href = null, this.exact = !1, this.options = null, this.content = null, this.callBack = null, this.checkCallBack = null, this.link = null;
-  }
-  /**
-   * This will render the component.
-   *
-   * @override
-   * @returns {object}
-   */
-  render() {
-    const e = !this.options && this.callBack;
-    return y(
-      { options: this.options, click: e },
-      [
-        this.addLink()
-      ]
-    );
-  }
-  /**
-   * This will add the link.
-   *
-   * @returns {object}
-   * @protected
-   */
-  addLink() {
-    const e = this.options && this.options.length > 0, t = this.content || P(String(this.label), this.icon, e);
-    return this.href ? new L(
-      {
-        class: "flex flex-auto flex-row rounded-md transition-all overflow-x-hidden",
-        cache: "link",
-        href: this.href,
-        activeClass: "selected",
-        exact: this.exact || !1
-      },
-      t
-    ) : new C({
-      class: "flex flex-auto flex-row rounded-md transition-all overflow-x-hidden",
-      cache: "link",
-      checkCallBack: this.checkCallBack
-    }, t);
-  }
-  /**
-   * This will check if the link is selected.
-   *
-   * @returns {boolean}
-   */
-  isSelected() {
-    return this.link.state.get("selected");
-  }
-  update(e) {
-    this.link.update(e);
-  }
-}
-const I = i(({ map: s }, e) => r({ class: "navigation-group flex flex-col gap-2 list-none m-0 py-2 px-0", map: s }, [
-  S({ class: "text-muted-foreground text-sm py-0 px-4 whitespace-nowrap" }, e)
-]));
-class $ extends n {
-  /**
-   * This will declare the props for the compiler.
-   *
-   * @returns {void}
-   */
-  declareProps() {
-    this.options = [], this.class = "", this.mobileBorder = !1;
-  }
-  /**
-   * This will render the component.
-   *
-   * @returns {object}
-   */
-  render() {
-    const e = this.mapOptions(this.options), t = this.class || "", a = this.mobileBorder ? "border md:border-0 rounded-md" : "";
-    return d({ class: `navigation flex flex-auto flex-col ${t}` }, [
-      r({
-        class: `relative group flex flex-col gap-2 py-2 px-2 list-none m-0 ${a}`,
-        map: e
-      }),
-      ...this.addSubs()
-    ]);
-  }
-  /**
-   * This will get the options.
-   *
-   * @param {array} options
-   * @returns {array}
-   */
-  mapOptions(e = []) {
-    return [e.map((a) => a.group ? this.addGroup(a) : this.addLink(a)), (a) => a];
-  }
-  /**
-   * This will get the subs.
-   *
-   * @returns {array}
-   */
-  addSubs() {
-    return [];
-  }
-  /**
-   * This will add a group.
-   *
-   * @param {object} option
-   * @returns {object}
-   */
-  addGroup(e) {
-    const t = this.mapOptions(e.options);
-    return I({ map: t }, e.group);
-  }
-  /**
-   * This will add a link.
-   *
-   * @param {object} option
-   * @returns {object}
-   */
-  addLink(e) {
-    return new f(e);
-  }
-}
-class x extends $ {
-  onCreated() {
-    this.links = [];
-  }
-  /**
-   * This will set up the sub nav.
-   *
-   * @param {object} link
-   * @returns {object}
-   */
-  setupSubNav(e) {
-    return new O(
-      {
-        parentLink: e,
-        options: e.options
-      }
-    );
-  }
-  /**
-   * This will add a sub navigation.
-   *
-   * @param {object} link
-   * @returns {object}
-   */
-  addSubNav(e) {
-    const t = this.setupSubNav(e);
-    return e.sub = t, t;
-  }
-  /**
-   * This will add a link.
-   *
-   * @param {object} option
-   * @returns {object}
-   */
-  addLink(e) {
-    const t = new f(e);
-    if (this.links.push(t), !t.options)
-      return t;
-    const a = this.addSubNav(t);
-    return {
-      class: "child-group",
-      link: t,
-      sub: a
-    };
-  }
-}
-const z = (s, e) => new RegExp(`${s}($|/|\\.).*`).test(e), M = (s, e) => {
-  const t = s.link.panel.pathname;
-  return !t && s.isSelected() ? !0 : s.exact ? e === t : z(t, e);
-};
-class O extends x {
-  /**
-   * This will declare the props for the compiler.
-   *
-   * @returns {void}
-   */
-  declareProps() {
-    super.declareProps(), this.parentLink = null, this.mainClassName = "";
-  }
-  /**
-   * This will render the component.
-   *
-   * @returns {object}
-   */
-  render() {
-    const e = `navigation flex flex-auto flex-col sub ${this.mainClassName || ""}`, t = this.mapOptions(this.options);
-    return d({ class: e, onState: this.onState() }, [
-      r({ class: "relative group flex flex-col gap-2 py-2 px-0 list-none m-0" }, [...t, ...this.addSubs(), this.addWatcher()])
-    ]);
-  }
-  /**
-   * This will add awatcher to update the links
-   * when the path changes.
-   *
-   * @returns {object}
-   */
-  addWatcher() {
-    return {
-      watch: {
-        value: ["[[path]]", u.data],
-        callBack: this.updateLinks.bind(this)
-      }
-    };
-  }
-  /**
-   * This will set up the on state.
-   *
-   * @returns {array}
-   */
-  onState() {
-    return [
-      ["selected", { active: !0 }],
-      ["active", { active: !0 }]
-    ];
-  }
-  /**
-   * This will set up the states.
-   *
-   * @returns {object}
-   */
-  setupStates() {
-    return {
-      remotes: [
-        {
-          /**
-           * This will link the state to the parent link.
-           */
-          id: this.parentLink.link.getId(),
-          selected: null,
-          active: null
-        }
-      ]
-    };
-  }
-  /**
-   * This will update the links after setup.
-   *
-   * @returns {void}
-   */
-  afterSetup() {
-    const e = u.data.path;
-    this.updateLinks(e);
-  }
-  /**
-   * This will update the links.
-   *
-   * @param {string} value
-   * @returns {void}
-   */
-  updateLinks(e) {
-    let t = !1;
-    for (const a of this.links)
-      if (a.rendered && (t = M(a, e), t === !0))
-        break;
-    this.parentLink.update(t);
-  }
-}
-const E = (s) => h({ class: "text-lg ml-2" }, s), H = (s) => l({ class: "sticky flex flex-row items-center bg-popover lg:hidden top-0 z-10 border-0 border-b" }, [
-  p({
-    variant: "icon",
-    class: "m-2",
-    click: (e, { state: t }) => t.toggle("open"),
-    icon: c.arrows.left
-  }),
-  s.title && E(s.title)
-]), T = () => l({
-  class: `
-			absolute inset-0 bg-black/40 z-[-1] fadeIn
-			transition-opacity duration-200
-		`,
-  click: (s, { state: e }) => e.open = !1
-});
-class U extends n {
-  /**
-   * This will declare the props for the compiler.
-   *
-   * @returns {void}
-   */
-  declareProps() {
-    this.title = "";
-  }
-  /**
-   * This will render the modal component.
-   *
-   * @returns {object}
-   */
-  render() {
-    return l({
-      class: "fixed inset-0 z-50",
-      style: "[[typeClass]]"
-    }, [
-      T(),
-      // Popover Content
-      l({
-        class: `
-					absolute popIn w-auto p-0 bg-popover m-auto shadow-lg rounded-md top-0 bottom-0 left-2 right-2 max-h-[85vh] text-inherit block
-				`,
-        dataSet: ["open", ["expanded", !0, "true"]]
-      }, [
-        l({ class: "flex flex-auto flex-col w-full h-full overflow-y-auto max-h-[85vh] rounded-md bg-popover border" }, [
-          H({ title: this.title }),
-          l({ class: "flex flex-auto flex-col" }, this.children)
-        ])
-      ])
-    ]);
-  }
-  /**
-   * This will setup the states.
-   *
-   * @returns {object}
-   */
-  setupStates() {
-    return {
-      open: {
-        id: this.parent.getId(),
-        callBack: (a) => {
-          a === !1 && (document.documentElement.style.overflowY = "auto", this.destroy());
-        }
-      }
-    };
-  }
-  /**
-   * This will add the body scroll lock.
-   *
-   * @returns {void}
-   */
-  afterSetup() {
-    document.documentElement.style.overflowY = "hidden";
-  }
-  /**
-   * This will override the set up to use the body.
-   *
-   * @param {object} container
-   */
-  setContainer(e) {
-    this.container = app.root;
-  }
-}
-const m = () => p({ class: "m-2", variant: "ghost", addState() {
-  return {
-    open: !1
-  };
-}, click: (s, { state: e }) => e.toggle("open") }, [
-  o({}, c.bar.three)
-]), A = (s) => h({ class: "text-lg ml-2" }, s), G = (s) => l({ class: "flex flex-auto flex-row items-center lg:hidden" }, [
-  m(),
-  s.title && A(s.title)
-]), v = (s, e) => {
-  s.forEach((t) => {
-    if (t.options) {
-      v(t.options, e);
-      return;
-    }
-    t.callBack = e;
-  });
-}, k = (s) => l({ class: "bg-background flex flex-auto flex-col w-full relative" }, [
-  B(
-    "open",
-    (e) => e ? [
-      new U({ title: s.title }, [
-        N(({ state: t }) => {
-          const a = (W) => t.open = !1;
-          return v(s.options, a), new x(
-            {
-              options: s.options
-            }
-          );
-        })
-      ])
-    ] : null
-  )
-]), q = i((s) => l({ cache: "mobileNav", class: "inline-flex relative lg:hidden" }, [
-  l([
-    m(),
-    k(s)
-  ])
-])), F = i((s) => l({ cache: "mobileNav", class: "flex flex-auto flex-col w-full relative lg:hidden" }, [
-  l({ class: "flex flex-auto flex-col w-full" }, [
-    G(s),
-    k(s)
-  ])
-]));
-export {
-  T as B,
-  x as I,
-  f as M,
-  m as N,
-  H as P,
-  O as S,
-  G as T,
-  q as a,
-  F as b,
-  C as c,
-  $ as d,
-  I as e,
-  U as f
-};