@nmorph/nmorph-ui-kit 2.2.53 → 2.2.54

package/dist/components/form/nmorph-time-picker/NmorphTimePicker.vue.js

@@ -1,192 +1,247 @@
 import './NmorphTimePicker.css';
-import b from "./NmorphTimePicker.vue2.js";
-import { openBlock as i, createElementBlock as n, normalizeStyle as v, normalizeClass as a, createElementVNode as r, withKeys as m, withModifiers as t, createVNode as d, withCtx as p, toDisplayString as c, createCommentVNode as _, createBlock as f, Fragment as s, renderList as h } from "vue";
-/* empty css                      */
-import u from "../../../_virtual/_plugin-vue_export-helper.js";
-const y = ["aria-expanded", "aria-controls", "tabindex", "onKeydown"], w = ["id", "name", "autocomplete", "step", "value", "disabled"], x = { class: "nmorph-time-picker__selected-value" }, C = ["id"], H = {
+import { defineComponent as he, ref as j, computed as a, watch as ve, openBlock as s, createElementBlock as u, normalizeStyle as fe, normalizeClass as f, createElementVNode as d, withKeys as F, withModifiers as k, unref as l, createVNode as x, withCtx as H, toDisplayString as w, createCommentVNode as K, createBlock as _e, Fragment as y, renderList as P } from "vue";
+import { useI18n as be } from "vue-i18n";
+import { useModifiers as q } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as ke } from "../../../utils/common.js";
+import { useFocusableInput as xe } from "../../../hooks/use-focusable-input.js";
+import { useFormItemInput as we, useFormItemModel as ye } from "../nmorph-form/use-form-item-input.js";
+import { NmorphComponentHeight as G } from "../../../types/common.types.js";
+import J from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                      */
+import Se from "../../../assets/icons/clock.svg.js";
+import Ce from "../../../assets/icons/circle-close.svg.js";
+import ge from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
+/* empty css                                                   */
+const Te = ["aria-expanded", "aria-controls", "tabindex", "onKeydown"], Ve = ["id", "name", "autocomplete", "step", "value", "disabled"], $e = { class: "nmorph-time-picker__selected-value" }, Be = ["id"], Ie = {
   class: "nmorph-time-picker__column",
   role: "listbox",
   "aria-label": "Hours"
-}, g = ["disabled", "onClick"], O = {
+}, Ne = ["disabled", "onClick"], Oe = {
   class: "nmorph-time-picker__column",
   role: "listbox",
   "aria-label": "Minutes"
-}, N = ["disabled", "onClick"], M = {
+}, Me = ["disabled", "onClick"], ze = {
   class: "nmorph-time-picker__column",
   role: "listbox",
   "aria-label": "Seconds"
-}, V = ["disabled", "onClick"];
-function I(S, l, z, e, B, D) {
-  return i(), n(
-    "div",
-    {
-      class: a(e.modifiers),
-      style: v(e.styles)
-    },
-    [
-      r("div", {
-        ref: "inputDOMRef",
+}, Fe = ["disabled", "onClick"], Qe = /* @__PURE__ */ he({
+  __name: "NmorphTimePicker",
+  props: {
+    modelValue: { default: null },
+    placeholder: { default: "" },
+    hourStep: { default: 1 },
+    minuteStep: { default: 5 },
+    secondStep: { default: 1 },
+    showSeconds: { type: Boolean, default: !1 },
+    minTime: { default: "" },
+    maxTime: { default: "" },
+    clearable: { type: Boolean, default: !0 },
+    zIndex: { default: void 0 },
+    width: { default: void 0 },
+    id: {},
+    name: {},
+    autocomplete: {},
+    height: { default: "basic" },
+    disabled: { type: Boolean, default: !1 },
+    tabindex: {}
+  },
+  emits: ["update:model-value", "focus", "blur"],
+  setup(Q, { expose: W, emit: X }) {
+    const n = Q, S = X, { t: Y } = be(), { id: C, name: R, autocomplete: Z, tabindex: ee } = we(n), { modelValue: p, updateModelValue: g } = ye(
+      n,
+      (t) => S("update:model-value", t),
+      null
+    ), c = j(!1), {
+      elementRef: _,
+      focused: te,
+      handleFocus: D,
+      handleBlur: E
+    } = xe({
+      onFocus: () => S("focus"),
+      onBlur: () => S("blur")
+    }), b = (t) => String(t).padStart(2, "0"), T = (t) => Math.max(1, Math.floor(Number.isFinite(t) ? t : 1)), v = (t) => {
+      if (!t) return null;
+      const o = t.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);
+      if (!o) return null;
+      const e = Number(o[1]), m = Number(o[2]), h = Number(o[3] || 0);
+      return e > 23 || m > 59 || h > 59 ? null : { hour: e, minute: m, second: h };
+    }, A = (t) => {
+      const o = `${b(t.hour)}:${b(t.minute)}`;
+      return n.showSeconds ? `${o}:${b(t.second)}` : o;
+    }, V = (t) => t.hour * 3600 + t.minute * 60 + t.second, U = a(() => v(n.minTime)), L = a(() => v(n.maxTime)), oe = a(() => v(p.value)), r = j(oe.value || { hour: 0, minute: 0, second: 0 }), ne = a(() => n.placeholder || Y("pickATime"));
+    ve(p, (t) => {
+      const o = v(t);
+      o && (r.value = o);
+    });
+    const $ = (t) => {
+      const o = V(t);
+      return !!(U.value && o < V(U.value) || L.value && o > V(L.value));
+    }, B = (t, o, e) => {
+      const m = T(e), h = /* @__PURE__ */ new Set();
+      for (let i = 0; i <= o; i += m) h.add(i);
+      return h.add(r.value[t]), Array.from(h).filter((i) => i >= 0 && i <= o).sort((i, z) => i - z).map((i) => {
+        const z = { ...r.value, [t]: i };
+        return {
+          label: b(i),
+          value: i,
+          disabled: $(z)
+        };
+      });
+    }, le = a(() => B("hour", 23, n.hourStep)), ae = a(() => B("minute", 59, n.minuteStep)), ie = a(() => B("second", 59, n.secondStep)), I = (t, o) => {
+      const e = { ...r.value, [t]: o };
+      $(e) || (r.value = e, g(A(e)));
+    }, se = () => {
+      g(null), c.value = !1;
+    }, N = () => {
+      c.value = !1;
+    }, O = () => {
+      n.disabled || (c.value = !c.value);
+    }, re = (t) => {
+      const o = t.target, e = v(o.value);
+      !e || $(e) || (r.value = e, g(A(e)));
+    }, ue = a(() => p.value || ne.value), de = a(
+      () => n.showSeconds ? T(n.secondStep) : T(n.minuteStep) * 60
+    ), ce = a(() => n.clearable && !!p.value && !n.disabled), me = a(
+      () => q({
+        nmorph: [G[n.height]],
+        "nmorph-time-picker": [
+          n.disabled && "disabled",
+          c.value && "open",
+          te.value && "focus",
+          !p.value && "placeholder"
+        ]
+      })
+    ), M = a(
+      () => q({
+        nmorph: [G[n.height]]
+      })
+    ), pe = a(
+      () => ke({
+        "--width": n.width
+      })
+    );
+    return W({ inputDOMRef: _ }), (t, o) => (s(), u("div", {
+      class: f(me.value),
+      style: fe(pe.value)
+    }, [
+      d("div", {
+        ref_key: "inputDOMRef",
+        ref: _,
         class: "nmorph-time-picker__input",
         role: "combobox",
-        "aria-expanded": e.open,
-        "aria-controls": `${e.id}-dropdown`,
-        tabindex: e.props.disabled ? -1 : e.tabindex,
-        onClick: e.toggleOpen,
-        onFocus: l[0] || (l[0] = (...o) => e.focusHandler && e.focusHandler(...o)),
-        onBlur: l[1] || (l[1] = (...o) => e.blurHandler && e.blurHandler(...o)),
+        "aria-expanded": c.value,
+        "aria-controls": `${l(C)}-dropdown`,
+        tabindex: n.disabled ? -1 : l(ee),
+        onClick: O,
+        onFocus: o[0] || (o[0] = //@ts-ignore
+        (...e) => l(D) && l(D)(...e)),
+        onBlur: o[1] || (o[1] = //@ts-ignore
+        (...e) => l(E) && l(E)(...e)),
         onKeydown: [
-          m(t(e.toggleOpen, ["prevent"]), ["space"]),
-          m(t(e.toggleOpen, ["prevent"]), ["enter"]),
-          m(t(e.closeHandler, ["prevent"]), ["escape"])
+          F(k(O, ["prevent"]), ["space"]),
+          F(k(O, ["prevent"]), ["enter"]),
+          F(k(N, ["prevent"]), ["escape"])
         ]
       }, [
-        r("input", {
-          id: e.id,
+        d("input", {
+          id: l(C),
           class: "nmorph-time-picker__native",
-          name: e.name,
-          autocomplete: e.autocomplete,
+          name: l(R),
+          autocomplete: l(Z),
           type: "time",
-          step: e.inputStep,
-          value: e.modelValue || "",
-          disabled: e.props.disabled,
-          onInput: e.nativeInputHandler
-        }, null, 40, w),
-        d(e.NmorphIcon, { class: "nmorph-time-picker__clock-icon" }, {
-          default: p(() => [
-            d(e.NmorphIconClock)
+          step: de.value,
+          value: l(p) || "",
+          disabled: n.disabled,
+          onInput: re
+        }, null, 40, Ve),
+        x(l(J), { class: "nmorph-time-picker__clock-icon" }, {
+          default: H(() => [
+            x(l(Se))
           ]),
           _: 1
-          /* STABLE */
         }),
-        r(
-          "div",
-          x,
-          c(e.displayValue),
-          1
-          /* TEXT */
-        ),
-        e.showClearButton ? (i(), n("button", {
+        d("div", $e, w(ue.value), 1),
+        ce.value ? (s(), u("button", {
           key: 0,
           class: "nmorph-time-picker__clear",
           type: "button",
           "aria-label": "Clear time",
-          onClick: t(e.clearHandler, ["stop"])
+          onClick: k(se, ["stop"])
         }, [
-          d(e.NmorphIcon, {
+          x(l(J), {
             width: "14px",
             height: "14px"
           }, {
-            default: p(() => [
-              d(e.NmorphIconCircleClose)
+            default: H(() => [
+              x(l(Ce))
             ]),
             _: 1
-            /* STABLE */
           })
-        ])) : _("v-if", !0)
-      ], 40, y),
-      e.inputDOMRef && !e.props.disabled ? (i(), f(e.NmorphDropdown, {
+        ])) : K("", !0)
+      ], 40, Te),
+      l(_) && !n.disabled ? (s(), _e(l(ge), {
         key: 0,
-        open: e.open,
-        "relative-element": e.inputDOMRef,
-        width: e.props.showSeconds ? 216 : 152,
+        open: c.value,
+        "relative-element": l(_),
+        width: n.showSeconds ? 216 : 152,
         "fill-width": !1,
-        "z-index": e.props.zIndex,
-        "aria-label": e.name,
-        onOnOutsideClick: e.closeHandler,
-        onOnEscapeKeydown: e.closeHandler
+        "z-index": n.zIndex,
+        "aria-label": l(R),
+        onOnOutsideClick: N,
+        onOnEscapeKeydown: N
       }, {
-        default: p(() => [
-          r("div", {
-            id: `${e.id}-dropdown`,
-            class: a(["nmorph-time-picker__panel", { "nmorph-time-picker__panel--with-seconds": e.props.showSeconds }])
+        default: H(() => [
+          d("div", {
+            id: `${l(C)}-dropdown`,
+            class: f(["nmorph-time-picker__panel", { "nmorph-time-picker__panel--with-seconds": n.showSeconds }])
           }, [
-            r("div", H, [
-              (i(!0), n(
-                s,
-                null,
-                h(e.hourOptions, (o) => (i(), n("button", {
-                  key: o.value,
-                  type: "button",
-                  class: a(["nmorph-time-picker__option", [
-                    e.optionHeightModifiers,
-                    { "nmorph-time-picker__option--active": o.value === e.pickerValue.hour }
-                  ]]),
-                  disabled: o.disabled,
-                  onClick: (k) => e.selectUnit("hour", o.value)
-                }, c(o.label), 11, g))),
-                128
-                /* KEYED_FRAGMENT */
-              ))
+            d("div", Ie, [
+              (s(!0), u(y, null, P(le.value, (e) => (s(), u("button", {
+                key: e.value,
+                type: "button",
+                class: f(["nmorph-time-picker__option", [
+                  M.value,
+                  { "nmorph-time-picker__option--active": e.value === r.value.hour }
+                ]]),
+                disabled: e.disabled,
+                onClick: (m) => I("hour", e.value)
+              }, w(e.label), 11, Ne))), 128))
             ]),
-            l[3] || (l[3] = r(
-              "div",
-              { class: "nmorph-time-picker__separator" },
-              ":",
-              -1
-              /* CACHED */
-            )),
-            r("div", O, [
-              (i(!0), n(
-                s,
-                null,
-                h(e.minuteOptions, (o) => (i(), n("button", {
-                  key: o.value,
+            o[3] || (o[3] = d("div", { class: "nmorph-time-picker__separator" }, ":", -1)),
+            d("div", Oe, [
+              (s(!0), u(y, null, P(ae.value, (e) => (s(), u("button", {
+                key: e.value,
+                type: "button",
+                class: f(["nmorph-time-picker__option", [
+                  M.value,
+                  { "nmorph-time-picker__option--active": e.value === r.value.minute }
+                ]]),
+                disabled: e.disabled,
+                onClick: (m) => I("minute", e.value)
+              }, w(e.label), 11, Me))), 128))
+            ]),
+            n.showSeconds ? (s(), u(y, { key: 0 }, [
+              o[2] || (o[2] = d("div", { class: "nmorph-time-picker__separator" }, ":", -1)),
+              d("div", ze, [
+                (s(!0), u(y, null, P(ie.value, (e) => (s(), u("button", {
+                  key: e.value,
                   type: "button",
-                  class: a(["nmorph-time-picker__option", [
-                    e.optionHeightModifiers,
-                    { "nmorph-time-picker__option--active": o.value === e.pickerValue.minute }
+                  class: f(["nmorph-time-picker__option", [
+                    M.value,
+                    { "nmorph-time-picker__option--active": e.value === r.value.second }
                   ]]),
-                  disabled: o.disabled,
-                  onClick: (k) => e.selectUnit("minute", o.value)
-                }, c(o.label), 11, N))),
-                128
-                /* KEYED_FRAGMENT */
-              ))
-            ]),
-            e.props.showSeconds ? (i(), n(
-              s,
-              { key: 0 },
-              [
-                l[2] || (l[2] = r(
-                  "div",
-                  { class: "nmorph-time-picker__separator" },
-                  ":",
-                  -1
-                  /* CACHED */
-                )),
-                r("div", M, [
-                  (i(!0), n(
-                    s,
-                    null,
-                    h(e.secondOptions, (o) => (i(), n("button", {
-                      key: o.value,
-                      type: "button",
-                      class: a(["nmorph-time-picker__option", [
-                        e.optionHeightModifiers,
-                        { "nmorph-time-picker__option--active": o.value === e.pickerValue.second }
-                      ]]),
-                      disabled: o.disabled,
-                      onClick: (k) => e.selectUnit("second", o.value)
-                    }, c(o.label), 11, V))),
-                    128
-                    /* KEYED_FRAGMENT */
-                  ))
-                ])
-              ],
-              64
-              /* STABLE_FRAGMENT */
-            )) : _("v-if", !0)
-          ], 10, C)
+                  disabled: e.disabled,
+                  onClick: (m) => I("second", e.value)
+                }, w(e.label), 11, Fe))), 128))
+              ])
+            ], 64)) : K("", !0)
+          ], 10, Be)
         ]),
         _: 1
-        /* STABLE */
-      }, 8, ["open", "relative-element", "width", "z-index", "aria-label"])) : _("v-if", !0)
-    ],
-    6
-    /* CLASS, STYLE */
-  );
-}
-const F = /* @__PURE__ */ u(b, [["render", I], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-time-picker/NmorphTimePicker.vue"]]);
+      }, 8, ["open", "relative-element", "width", "z-index", "aria-label"])) : K("", !0)
+    ], 6));
+  }
+});
 export {
-  F as default
+  Qe as default
 };

package/dist/components/form/nmorph-time-picker/NmorphTimePicker.vue3.js

@@ -0,0 +1,6 @@
+import './NmorphTimePicker.css';
+import o from "./NmorphTimePicker.vue.js";
+/* empty css                      */
+export {
+  o as default
+};

package/dist/components/navigation/nmorph-backtop/NmorphBacktop.vue.js

@@ -1,61 +1,98 @@
 import './NmorphBacktop.css';
-import a from "./NmorphBacktop.vue2.js";
-import { openBlock as e, createElementBlock as p, createBlock as c, Teleport as i, createElementVNode as t, normalizeStyle as s, normalizeClass as d, withModifiers as m, renderSlot as f, createVNode as r, withCtx as l } from "vue";
-/* empty css                   */
-import h from "../../../_virtual/_plugin-vue_export-helper.js";
-const _ = { ref: "placeholderDOMEl" };
-function k(n, v, y, o, b, N) {
-  return e(), p(
-    "div",
-    _,
-    [
-      (e(), c(i, {
-        to: o.props.teleportTo,
-        disabled: !o.isMounted || o.props.teleportDisabled
+import { defineComponent as S, computed as m, ref as r, onMounted as D, onUnmounted as B, openBlock as f, createElementBlock as C, createBlock as z, Teleport as H, createElementVNode as v, normalizeStyle as $, normalizeClass as N, withModifiers as O, renderSlot as I, createVNode as i, unref as a, withCtx as h } from "vue";
+import { useModifiers as V } from "../../../utils/create-modifiers.js";
+import Y from "../../basic/nmorph-button/NmorphButton.vue.js";
+/* empty css                                          */
+import L from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                      */
+import A from "../../../assets/icons/chevron-down.svg.js";
+const P = /* @__PURE__ */ S({
+  __name: "NmorphBacktop",
+  props: {
+    right: { default: 40 },
+    bottom: { default: 40 },
+    visibilityHeight: { default: 200 },
+    design: { default: "nmorph" },
+    zIndex: { default: 10 },
+    teleportTo: { default: "body" },
+    teleportDisabled: { type: Boolean, default: !1 }
+  },
+  emits: ["click"],
+  setup(b, { emit: w }) {
+    const e = b, y = w, _ = m(
+      () => V({
+        "nmorph-backtop": [n.value && "show", e.design]
+      })
+    ), k = m(() => ({
+      "--nmorph-backtop-right": `${e.right}px`,
+      "--nmorph-backtop-bottom": `${e.bottom}px`,
+      "--nmorph-backtop-z-index": e.zIndex
+    })), g = (t) => t === window, E = (t) => g(t) ? window.scrollY || document.documentElement.scrollTop || document.body.scrollTop || 0 : t.scrollTop, T = (t) => {
+      let l = t?.parentElement ?? null;
+      for (; l; ) {
+        const p = window.getComputedStyle(l), M = p.overflowY || p.overflow;
+        if (["auto", "scroll", "overlay"].includes(M) && l.scrollHeight > l.clientHeight) return l;
+        l = l.parentElement;
+      }
+      return window;
+    }, o = r(null), c = r(null), u = r(null), n = r(!1), d = r(!1), s = () => {
+      if (!o.value) {
+        n.value = !1;
+        return;
+      }
+      n.value = E(o.value) > e.visibilityHeight;
+    }, x = () => {
+      y("click"), o.value && o.value.scrollTo({
+        top: 0,
+        left: 0,
+        behavior: "smooth"
+      });
+    };
+    return D(() => {
+      o.value = T(c.value ?? u.value), o.value.addEventListener("scroll", s), s(), d.value = !0;
+    }), B(() => {
+      o.value && o.value.removeEventListener("scroll", s);
+    }), (t, l) => (f(), C("div", {
+      ref_key: "placeholderDOMEl",
+      ref: c
+    }, [
+      (f(), z(H, {
+        to: e.teleportTo,
+        disabled: !d.value || e.teleportDisabled
       }, [
-        t(
-          "div",
-          {
-            ref: "selfDOMEl",
-            class: d(o.modifiers),
-            style: s(o.styles)
-          },
-          [
-            t("div", {
-              onClick: m(o.scrollToTopHandler, ["stop"])
-            }, [
-              f(n.$slots, "default", {}, () => [
-                r(o.NmorphButton, {
-                  "style-type": o.props.design === "nmorph" ? "default" : "transparent"
-                }, {
-                  default: l(() => [
-                    r(o.NmorphIcon, {
-                      class: "nmorph-backtop__up-icon",
-                      color: o.props.design === "nmorph" ? void 0 : "var(--nmorph-contrast-text-color)"
-                    }, {
-                      default: l(() => [
-                        r(o.NmorphIconChevronDown)
-                      ]),
-                      _: 1
-                      /* STABLE */
-                    }, 8, ["color"])
-                  ]),
-                  _: 1
-                  /* STABLE */
-                }, 8, ["style-type"])
-              ])
+        v("div", {
+          ref_key: "selfDOMEl",
+          ref: u,
+          class: N(_.value),
+          style: $(k.value)
+        }, [
+          v("div", {
+            onClick: O(x, ["stop"])
+          }, [
+            I(t.$slots, "default", {}, () => [
+              i(a(Y), {
+                "style-type": e.design === "nmorph" ? "default" : "transparent"
+              }, {
+                default: h(() => [
+                  i(a(L), {
+                    class: "nmorph-backtop__up-icon",
+                    color: e.design === "nmorph" ? void 0 : "var(--nmorph-contrast-text-color)"
+                  }, {
+                    default: h(() => [
+                      i(a(A))
+                    ]),
+                    _: 1
+                  }, 8, ["color"])
+                ]),
+                _: 1
+              }, 8, ["style-type"])
             ])
-          ],
-          6
-          /* CLASS, STYLE */
-        )
+          ])
+        ], 6)
       ], 8, ["to", "disabled"]))
-    ],
-    512
-    /* NEED_PATCH */
-  );
-}
-const E = /* @__PURE__ */ h(a, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-backtop/NmorphBacktop.vue"]]);
+    ], 512));
+  }
+});
 export {
-  E as default
+  P as default
 };

package/dist/components/navigation/nmorph-backtop/NmorphBacktop.vue3.js

@@ -0,0 +1,6 @@
+import './NmorphBacktop.css';
+import o from "./NmorphBacktop.vue.js";
+/* empty css                   */
+export {
+  o as default
+};

package/dist/components/navigation/nmorph-breadcrumb/NmorphBreadcrumb.vue.js

@@ -1,48 +1,40 @@
 import './NmorphBreadcrumb.css';
-import a from "./NmorphBreadcrumb.vue2.js";
-import { openBlock as e, createElementBlock as o, normalizeClass as c, renderSlot as d, Fragment as s, renderList as i, createElementVNode as l, toDisplayString as b, createCommentVNode as p } from "vue";
-/* empty css                      */
-import _ from "../../../_virtual/_plugin-vue_export-helper.js";
-const u = ["id"], f = {
+import { defineComponent as l, ref as u, provide as p, computed as i, openBlock as e, createElementBlock as r, normalizeClass as b, renderSlot as _, Fragment as f, renderList as h, createElementVNode as v, unref as g, toDisplayString as k, createCommentVNode as y } from "vue";
+import { useModifiers as B } from "../../../utils/create-modifiers.js";
+import { generateUUID as C } from "../../../utils/common.js";
+const I = ["id"], N = {
   key: 0,
   class: "nmorph-breadcrumb__separator"
-};
-function h(m, v, k, r, g, y) {
-  return e(), o(
-    "div",
-    {
-      class: c(r.modifiers)
-    },
-    [
-      d(m.$slots, "default"),
-      (e(!0), o(
-        s,
-        null,
-        i(r.breadcrumbs, (n, t) => (e(), o("div", {
-          key: t,
-          class: "nmorph-breadcrumb__content"
-        }, [
-          l("div", {
-            id: `nmorph-breadcrumb-${r.breadcrumbId}-${n.itemId}-element`,
-            class: "nmorph-breadcrumb__element"
-          }, null, 8, u),
-          t < r.breadcrumbs.length - 1 ? (e(), o(
-            "div",
-            f,
-            b(r.props.separator),
-            1
-            /* TEXT */
-          )) : p("v-if", !0)
-        ]))),
-        128
-        /* KEYED_FRAGMENT */
-      ))
-    ],
-    2
-    /* CLASS */
-  );
-}
-const I = /* @__PURE__ */ _(a, [["render", h], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-breadcrumb/NmorphBreadcrumb.vue"]]);
+}, U = /* @__PURE__ */ l({
+  __name: "NmorphBreadcrumb",
+  props: {
+    separator: { default: "/" }
+  },
+  setup(n) {
+    const m = n, t = u([]), o = C();
+    p("breadcrumb-data", { breadcrumbs: t, breadcrumbId: o });
+    const s = i(
+      () => B({
+        "nmorph-breadcrumb": []
+      })
+    );
+    return (d, $) => (e(), r("div", {
+      class: b(s.value)
+    }, [
+      _(d.$slots, "default"),
+      (e(!0), r(f, null, h(t.value, (c, a) => (e(), r("div", {
+        key: a,
+        class: "nmorph-breadcrumb__content"
+      }, [
+        v("div", {
+          id: `nmorph-breadcrumb-${g(o)}-${c.itemId}-element`,
+          class: "nmorph-breadcrumb__element"
+        }, null, 8, I),
+        a < t.value.length - 1 ? (e(), r("div", N, k(m.separator), 1)) : y("", !0)
+      ]))), 128))
+    ], 2));
+  }
+});
 export {
-  I as default
+  U as default
 };