@nmorph/nmorph-ui-kit 2.2.7 → 2.2.10

package/dist/components/form/nmorph-select-button/NmorphSelectButton.vue2.js

@@ -0,0 +1,44 @@
+import './NmorphSelectButton.css';
+import { defineComponent as p, ref as f, watch as m, computed as c, provide as i } from "vue";
+import { useModifiers as b } from "../../../utils/create-modifiers.js";
+import h from "./components/nmorph-select-button-item/NmorphSelectButtonItem.vue.js";
+const q = /* @__PURE__ */ p({
+  __name: "NmorphSelectButton",
+  props: {
+    modelValue: { type: String, required: !1, default: "" },
+    options: { type: Array, required: !1, default: () => [] },
+    fill: { type: Boolean, required: !1, default: !1 },
+    id: { type: String, required: !1 },
+    name: { type: String, required: !1 },
+    autocomplete: { type: String, required: !1 },
+    height: { type: null, required: !1, default: "basic" },
+    disabled: { type: Boolean, required: !1, default: !1 },
+    tabindex: { type: Number, required: !1 }
+  },
+  emits: ["update:model-value"],
+  setup(u, { expose: d, emit: n }) {
+    d();
+    const e = u, r = n, t = f(e.modelValue);
+    m(
+      () => e.modelValue,
+      (l) => {
+        t.value = l;
+      }
+    );
+    const s = c(
+      () => b({
+        "nmorph-select-button": [`${e.disabled && "disabled"}`, `${e.fill && "fill"}`, e.height]
+      })
+    ), a = (l) => {
+      e.disabled || (t.value = l, r("update:model-value", l));
+    };
+    i("select-button-selected-value", t), i("select-button-change-handler", a);
+    const o = { props: e, emit: r, initialValue: t, modifiers: s, changeHandler: a, get NmorphSelectButtonItem() {
+      return h;
+    } };
+    return Object.defineProperty(o, "__isScriptSetup", { enumerable: !1, value: !0 }), o;
+  }
+});
+export {
+  q as default
+};

package/dist/components/form/nmorph-select-button/components/nmorph-select-button-item/NmorphSelectButtonItem.css

@@ -0,0 +1 @@
+.nmorph-select-button-item{display:inline-flex;align-items:center;justify-content:center;height:var(--item-size);padding:0 var(--indentation-04);border-radius:var(--default-border-radius);cursor:pointer;opacity:.45;font-size:var(--item-font-size)}.nmorph-select-button-item input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.nmorph-select-button-item:focus-visible{outline:2px solid var(--nmorph-accent-color);outline-offset:2px}.nmorph-select-button-item.nmorph-select-button-item--checked{opacity:1;background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-select-button-item.nmorph-select-button-item--disabled{cursor:not-allowed;opacity:.6}

package/dist/components/form/nmorph-select-button/components/nmorph-select-button-item/NmorphSelectButtonItem.vue.js

@@ -0,0 +1,32 @@
+import './NmorphSelectButtonItem.css';
+import r from "./NmorphSelectButtonItem.vue2.js";
+import { openBlock as c, createElementBlock as i, withKeys as t, withModifiers as o, normalizeClass as l, createElementVNode as a, renderSlot as d } from "vue";
+/* empty css                            */
+import s from "../../../../../_virtual/_plugin-vue_export-helper.js";
+const p = ["tabindex", "onKeydown"], m = ["value", "checked", "disabled"];
+function f(n, h, _, e, b, k) {
+  return c(), i("label", {
+    class: l(e.modifiers),
+    tabindex: e.props.tabindex,
+    onClick: o(e.clickHandler, ["prevent"]),
+    onKeydown: [
+      t(o(e.clickHandler, ["prevent"]), ["space"]),
+      t(o(e.clickHandler, ["prevent"]), ["enter"])
+    ]
+  }, [
+    a("input", {
+      ref: "inputDOMRef",
+      type: "radio",
+      value: e.props.value,
+      checked: e.checked,
+      disabled: e.props.disabled,
+      tabindex: "-1",
+      class: "nmorph-native-input"
+    }, null, 8, m),
+    d(n.$slots, "default")
+  ], 42, p);
+}
+const w = /* @__PURE__ */ s(r, [["render", f], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-select-button/components/nmorph-select-button-item/NmorphSelectButtonItem.vue"]]);
+export {
+  w as default
+};

package/dist/components/form/nmorph-select-button/components/nmorph-select-button-item/NmorphSelectButtonItem.vue2.js

@@ -0,0 +1,35 @@
+import './NmorphSelectButtonItem.css';
+import { defineComponent as c, inject as i, ref as p, computed as d } from "vue";
+import { useModifiers as f } from "../../../../../utils/create-modifiers.js";
+const v = /* @__PURE__ */ c({
+  __name: "NmorphSelectButtonItem",
+  props: {
+    value: { type: String, required: !0 },
+    id: { type: String, required: !1 },
+    name: { type: String, required: !1 },
+    autocomplete: { type: String, required: !1 },
+    disabled: { type: Boolean, required: !1, default: !1 },
+    tabindex: { type: Number, required: !1, default: 0 }
+  },
+  setup(o, { expose: s }) {
+    const r = i(
+      "select-button-selected-value",
+      void 0
+    ), t = i(
+      "select-button-change-handler",
+      void 0
+    ), e = o, n = p(null);
+    s({ inputDOMRef: n });
+    const l = d(() => r?.value === e.value), u = d(
+      () => f({
+        "nmorph-select-button-item": [`${l.value && "checked"}`, `${e.disabled && "disabled"}`]
+      })
+    ), a = { selectedValue: r, changeHandler: t, props: e, inputDOMRef: n, checked: l, modifiers: u, clickHandler: () => {
+      e.disabled || t && t(e.value);
+    } };
+    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
+  }
+});
+export {
+  v as default
+};

package/dist/components/form/nmorph-slider/NmorphSlider.css

@@ -0,0 +1 @@
+.nmorph-slider{position:relative;width:100%;height:20px;--slider-height: 24px;--value-fixed-container-height: 18px;cursor:pointer}.nmorph-slider .nmorph-slider__content{display:flex;align-items:center}.nmorph-slider .nmorph-slider__input-wrapper{display:flex;align-items:center;width:100%;height:var(--value-fixed-container-height);border-radius:var(--default-border-radius);background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-slider .nmorph-slider__input-container{position:relative;display:flex;align-items:center;width:100%;height:var(--slider-height);touch-action:none}.nmorph-slider .nmorph-slider__thumb{position:absolute;z-index:1;border:0;border-radius:var(--default-border-radius);height:20px;background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-slider .nmorph-slider__thumb--smooth{transition:left ease-in-out .2s}.nmorph-slider .nmorph-slider__value{display:flex;justify-content:center;width:var(--value-fixed-container-width);margin-left:var(--indentation-04)}.nmorph-slider .nmorph-slide__native-input{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;background:transparent;appearance:none}.nmorph-slider .nmorph-slide__native-input::-webkit-slider-runnable-track{height:var(--slider-height);background:transparent}.nmorph-slider .nmorph-slide__native-input::-moz-range-track{height:var(--slider-height);background:transparent}.nmorph-slider .nmorph-slide__native-input::-webkit-slider-thumb{visibility:hidden}.nmorph-slider .nmorph-slide__native-input::-moz-range-thumb{visibility:hidden}.nmorph-slider.nmorph-slider--fill,.nmorph-slider.nmorph-slider--fill .nmorph-slider__content{width:100%}.nmorph-slider.nmorph-slider--disabled{cursor:not-allowed;opacity:.6}.nmorph-slider.nmorph-slider--disabled .nmorph-slider__input-content{pointer-events:none}.nmorph-slider .nmorph-slider__thumb{width:var(--nmorph-slider-thumb-width)}

package/dist/components/form/nmorph-slider/NmorphSlider.vue.js

@@ -0,0 +1,73 @@
+import './NmorphSlider.css';
+import t from "./NmorphSlider.vue2.js";
+import { openBlock as n, createElementBlock as l, normalizeStyle as r, normalizeClass as i, createElementVNode as e, createBlock as a, createCommentVNode as d } from "vue";
+/* empty css                  */
+import s from "../../../_virtual/_plugin-vue_export-helper.js";
+const m = { class: "nmorph-slider__content" }, c = { class: "nmorph-slider__input-wrapper" }, p = ["id", "name", "tabindex", "value", "min", "max", "step", "disabled"];
+function h(_, b, f, o, v, x) {
+  return n(), l(
+    "div",
+    {
+      class: i(o.modifiers),
+      style: r({ "--nmorph-slider-thumb-width": o.thumbWidthCss })
+    },
+    [
+      e("div", m, [
+        e("div", c, [
+          e(
+            "div",
+            {
+              ref: "sliderContainer",
+              class: "nmorph-slider__input-container",
+              onPointerdown: o.pointerDownHandler
+            },
+            [
+              o.tooltipVisible && !o.props.disabled ? (n(), a(o.NmorphTooltip, {
+                key: 0,
+                ref: "tooltipRootRef",
+                text: String(o.thumbValue),
+                "force-show": "",
+                "force-coordinate": { x: o.thumbXPercentPosition.tooltip, y: "24px" },
+                "block-position": ""
+              }, null, 8, ["text", "force-coordinate"])) : d("v-if", !0),
+              e(
+                "div",
+                {
+                  ref: "sliderFirst",
+                  class: i(["nmorph-slider__thumb", { "nmorph-slider__thumb--smooth": o.transitionEnabled }]),
+                  style: r({ left: o.thumbXPercentPosition.thumb }),
+                  onMouseenter: o.handleMouseEnter,
+                  onMouseleave: o.handleMouseLeave
+                },
+                null,
+                38
+                /* CLASS, STYLE, NEED_HYDRATION */
+              ),
+              e("input", {
+                id: o.id,
+                name: o.name,
+                tabindex: o.tabindex,
+                class: "nmorph-slide__native-input",
+                type: "range",
+                value: o.thumbValue,
+                min: o.props.min,
+                max: o.props.max,
+                step: o.props.step,
+                disabled: o.props.disabled,
+                onInput: o.nativeInputHandler
+              }, null, 40, p)
+            ],
+            544
+            /* NEED_HYDRATION, NEED_PATCH */
+          )
+        ])
+      ])
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const N = /* @__PURE__ */ s(t, [["render", h], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-slider/NmorphSlider.vue"]]);
+export {
+  N as default
+};

package/dist/components/form/nmorph-slider/NmorphSlider.vue2.js

@@ -0,0 +1,83 @@
+import './NmorphSlider.css';
+import { defineComponent as U, computed as I, ref as o, watch as L, onMounted as k, onUnmounted as A } from "vue";
+import { useModifiers as G } from "../../../utils/create-modifiers.js";
+import { useFormItemInput as J } from "../nmorph-form/use-form-item-input.js";
+import K from "../../feedback/nmorph-tooltip/NmorphTooltip.vue.js";
+const m = 50, re = /* @__PURE__ */ U({
+  __name: "NmorphSlider",
+  props: {
+    modelValue: { type: Number, required: !1, default: 0 },
+    max: { type: Number, required: !1, default: 100 },
+    min: { type: Number, required: !1, default: 0 },
+    step: { type: Number, required: !1, default: 1 },
+    showTooltip: { type: Boolean, required: !1, default: !0 },
+    id: { type: String, required: !1 },
+    name: { type: String, required: !1 },
+    autocomplete: { type: String, required: !1 },
+    disabled: { type: Boolean, required: !1, default: !1 },
+    tabindex: { type: Number, required: !1 }
+  },
+  emits: ["update:model-value"],
+  setup(M, { expose: T, emit: W }) {
+    T();
+    const e = M, { id: q, name: _, tabindex: N } = J(e), S = I(
+      () => G({
+        nmorph: [],
+        "nmorph-slider": [`${e.disabled && "disabled"}`]
+      })
+    ), H = `${m}px`, c = o(e.showTooltip), w = W, n = o(e.modelValue), p = o(null);
+    L(n, () => {
+      w("update:model-value", n.value);
+    }), L(
+      () => e.modelValue,
+      (t) => {
+        n.value = t;
+      }
+    );
+    const x = o(null), O = I(() => {
+      const t = s.value - s.value, r = e.max - e.min + t, l = (n.value - e.min) / r * 100, u = p.value?.clientWidth || 0, d = m / u * 100, $ = d / 2;
+      let D = l - $;
+      const y = `${Math.max(0, Math.min(100 - d, D))}%`, g = u / 100, F = m / 2 / g, E = (x.value?.tooltipBody.clientWidth ?? 24) / 2 / g, X = E === 1 / 0 ? 1.714 : E, j = `${parseFloat(y) + F - X}%`;
+      return {
+        thumb: y,
+        tooltip: j
+      };
+    }), s = o(0), f = o(0), h = () => {
+      s.value = window.innerWidth, f.value = window.innerHeight;
+    };
+    k(() => {
+      typeof window < "u" && (s.value = window.innerWidth, f.value = window.innerHeight, window.addEventListener("resize", h));
+    }), A(() => {
+      typeof window < "u" && (document.removeEventListener("pointermove", a), document.removeEventListener("pointerup", i), document.removeEventListener("pointercancel", i), window.removeEventListener("resize", h));
+    });
+    const v = (t) => {
+      b.value = !1;
+      const r = p.value?.getBoundingClientRect();
+      let l = 0;
+      if (r) {
+        const u = t - r.left, d = r.width;
+        l = Math.max(0, Math.min(1, u / d)), n.value = e.min + l * (e.max - e.min);
+      }
+      n.value = Math.round(n.value / e.step) * e.step, n.value = Math.max(e.min, Math.min(e.max, n.value));
+    }, a = (t) => {
+      t.preventDefault(), v(t.clientX);
+    }, i = () => {
+      document.removeEventListener("pointermove", a), document.removeEventListener("pointerup", i), document.removeEventListener("pointercancel", i), b.value = !0;
+    }, V = (t) => {
+      e.disabled || t.pointerType === "mouse" && t.button !== 0 || (t.preventDefault(), v(t.clientX), document.addEventListener("pointermove", a), document.addEventListener("pointerup", i), document.addEventListener("pointercancel", i));
+    }, z = o(null), C = () => {
+      e.showTooltip && (c.value = !0);
+    }, B = () => {
+      e.showTooltip && (c.value = !1);
+    }, R = (t) => {
+      const r = t.target;
+      n.value = Number(r.value);
+    }, b = o(!0), P = { props: e, id: q, name: _, tabindex: N, modifiers: S, thumbWidth: m, thumbWidthCss: H, tooltipVisible: c, emit: w, thumbValue: n, sliderContainer: p, tooltipRootRef: x, thumbXPercentPosition: O, windowWidth: s, windowHeight: f, resizeWindowHandler: h, updateThumbValue: v, pointerMove: a, pointerUp: i, pointerDownHandler: V, sliderFirst: z, handleMouseEnter: C, handleMouseLeave: B, nativeInputHandler: R, transitionEnabled: b, get NmorphTooltip() {
+      return K;
+    } };
+    return Object.defineProperty(P, "__isScriptSetup", { enumerable: !1, value: !0 }), P;
+  }
+});
+export {
+  re as default
+};

package/dist/components/form/nmorph-switch/NmorphSwitch.css

@@ -0,0 +1 @@
+.nmorph-switch{--height: 20px;--offset: 3px;--thumb-height: 14px;width:40px;height:var(--height);overflow:hidden;border-radius:var(--border-radius-999);cursor:pointer}.nmorph-switch .nmorph-switch__content{position:relative;height:100%;border-radius:var(--border-radius-999);font-weight:400;font-size:var(--font-size-small);line-height:var(--line-height-regular);background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-switch .nmorph-switch__bg-content{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:flex-end;width:100%;height:100%;padding:8px}.nmorph-switch .nmorph-switch__bg-content.nmorph-switch__bg-content--enable{justify-content:flex-start;color:var(--nmorph-focus-text-color)}.nmorph-switch input{width:100%;height:var(--height);opacity:0}.nmorph-switch .nmorph-switch-thumb{position:absolute;top:var(--offset);left:var(--offset);width:var(--thumb-height);height:var(--thumb-height);border-radius:var(--border-radius-999);transition:left ease-in-out var(--transition-02);display:flex;justify-content:center;align-items:center;background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-switch.nmorph-switch--disabled{cursor:not-allowed;opacity:.6}.nmorph-switch.nmorph-switch--disabled .nmorph-switch__input-content{pointer-events:none}.nmorph-switch.nmorph-switch--on .nmorph-switch__content{background:var(--nmorph-accent-color);box-shadow:none}.nmorph-switch.nmorph-switch--on .nmorph-switch-thumb{left:calc(100% - 16px);box-shadow:none}.nmorph-switch.nmorph-switch--loading{cursor:not-allowed;opacity:.6}.nmorph-switch.nmorph-switch--loading .nmorph-switch__input-content{pointer-events:none}.nmorph-switch.nmorph-switch--focus{outline:2px solid var(--nmorph-accent-color)}.nmorph-switch.nmorph-switch--focus .nmorph-switch__content{scale:.95}

package/dist/components/form/nmorph-switch/NmorphSwitch.vue.js

@@ -0,0 +1,63 @@
+import './NmorphSwitch.css';
+import l from "./NmorphSwitch.vue2.js";
+import { openBlock as r, createElementBlock as t, normalizeClass as a, createElementVNode as e, renderSlot as i, createBlock as c, withCtx as d, createVNode as s } from "vue";
+/* empty css                  */
+import m from "../../../_virtual/_plugin-vue_export-helper.js";
+const h = ["id", "name", "value", "disabled", "tabindex"], f = { class: "nmorph-switch-thumb" };
+function b(n, p, _, o, k, u) {
+  return r(), t(
+    "div",
+    {
+      class: a(o.modifiers)
+    },
+    [
+      e("div", {
+        class: "nmorph-switch__content",
+        onClick: o.changeHandler
+      }, [
+        e("input", {
+          id: o.id,
+          ref: "inputDOMRef",
+          name: o.name,
+          type: "checkbox",
+          value: o.initialValue,
+          disabled: o.props.disabled,
+          tabindex: o.tabindex,
+          class: "nmorph-native-input",
+          onFocus: o.focusHandler,
+          onBlur: o.blurHandler
+        }, null, 40, h),
+        e(
+          "div",
+          {
+            class: a(["nmorph-switch__bg-content", { "nmorph-switch__bg-content--enable": o.initialValue }])
+          },
+          [
+            o.initialValue ? i(n.$slots, "bg-on", { key: 0 }) : i(n.$slots, "bg-off", { key: 1 })
+          ],
+          2
+          /* CLASS */
+        ),
+        e("div", f, [
+          o.props.loading ? (r(), c(o.NmorphIcon, {
+            key: 0,
+            width: "14px",
+            height: "14px"
+          }, {
+            default: d(() => [
+              s(o.NmorphIconLoader)
+            ]),
+            _: 1
+            /* STABLE */
+          })) : o.initialValue ? i(n.$slots, "thumb-on", { key: 1 }) : i(n.$slots, "thumb-off", { key: 2 })
+        ])
+      ])
+    ],
+    2
+    /* CLASS */
+  );
+}
+const x = /* @__PURE__ */ m(l, [["render", b], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-switch/NmorphSwitch.vue"]]);
+export {
+  x as default
+};

package/dist/components/form/nmorph-switch/NmorphSwitch.vue2.js

@@ -0,0 +1,57 @@
+import './NmorphSwitch.css';
+import { defineComponent as h, ref as o, computed as y, watch as V } from "vue";
+import { useModifiers as _ } from "../../../utils/create-modifiers.js";
+import { useFormItemInput as q } from "../nmorph-form/use-form-item-input.js";
+import N from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import S from "../../../assets/icons/loader.svg.js";
+const H = /* @__PURE__ */ h({
+  __name: "NmorphSwitch",
+  props: {
+    modelValue: { type: [Boolean, String, Number], required: !1, default: !1 },
+    loading: { type: Boolean, required: !1, default: !1 },
+    activeValue: { type: [Boolean, String, Number], required: !1, default: !0 },
+    inactiveValue: { type: [Boolean, String, Number], required: !1, default: !1 },
+    id: { type: String, required: !1 },
+    name: { type: String, required: !1 },
+    autocomplete: { type: String, required: !1 },
+    disabled: { type: Boolean, required: !1, default: !1 },
+    tabindex: { type: Number, required: !1 }
+  },
+  emits: ["update:model-value"],
+  setup(i, { expose: s, emit: d }) {
+    const e = i, { id: f, name: m, tabindex: p } = q(e), l = d, t = o(!1), c = () => {
+      t.value = !0;
+    }, v = () => {
+      t.value = !1;
+    }, b = y(
+      () => _({
+        "nmorph-switch": [
+          `${e.disabled && "disabled"}`,
+          `${a.value ? "on" : "off"}`,
+          `${e.loading && "loading"}`,
+          `${t.value && "focus"}`
+        ]
+      })
+    ), a = o(e.modelValue === e.activeValue), g = () => {
+      if (e.disabled) return;
+      a.value = !a.value;
+      const r = a.value ? e.activeValue : e.inactiveValue;
+      l("update:model-value", r);
+    }, u = o(null);
+    s({ inputDOMRef: u }), V(
+      () => e.modelValue,
+      (r) => {
+        a.value = r === e.activeValue;
+      }
+    );
+    const n = { props: e, id: f, name: m, tabindex: p, emit: l, focus: t, focusHandler: c, blurHandler: v, modifiers: b, initialValue: a, changeHandler: g, inputDOMRef: u, get NmorphIcon() {
+      return N;
+    }, get NmorphIconLoader() {
+      return S;
+    } };
+    return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
+  }
+});
+export {
+  H as default
+};

package/dist/components/form/nmorph-text-input/NmorphTextInput.vue.js

@@ -0,0 +1,67 @@
+import p from "./NmorphTextInput.vue2.js";
+import { openBlock as o, createElementBlock as t, normalizeStyle as c, normalizeClass as s, createElementVNode as r, renderSlot as m, createCommentVNode as l, mergeProps as h, withKeys as _, createBlock as i, withCtx as a, createVNode as f, resolveDynamicComponent as y } from "vue";
+import u from "../../../_virtual/_plugin-vue_export-helper.js";
+const b = { class: "nmorph-text-input__input-side" }, x = {
+  key: 0,
+  class: "nmorph-text-input__prepend-icon"
+}, v = ["id", "name", "autocomplete", "tabindex", "type", "placeholder", "disabled", "value"];
+function k(d, n, B, e, N, C) {
+  return o(), t(
+    "div",
+    {
+      class: s(e.modifiers),
+      style: c(e.styles)
+    },
+    [
+      r("div", b, [
+        e.slots["prepend-icon"] ? (o(), t("div", x, [
+          m(d.$slots, "prepend-icon")
+        ])) : l("v-if", !0),
+        r("input", h({
+          id: e.id,
+          ref: "inputDOMRef",
+          name: e.name,
+          autocomplete: e.autocomplete,
+          tabindex: e.tabindex,
+          class: "nmorph-native-input",
+          type: e.type,
+          placeholder: e.props.placeholder,
+          disabled: e.props.disabled,
+          value: e.props.modelValue
+        }, e.props.inputAttrs, {
+          onInput: e.handleInput,
+          onFocus: e.handleFocus,
+          onBlur: e.handleBlur,
+          onKeyup: n[0] || (n[0] = _((I) => e.emit("on-enter"), ["enter"]))
+        }), null, 16, v),
+        e.props.typePassword || e.props.clearable ? (o(), i(e.NmorphButton, {
+          key: 1,
+          disabled: e.props.disabled,
+          class: "nmorph-text-input__password-btn",
+          "style-type": "transparent",
+          width: "32px",
+          height: e.props.height,
+          onClick: e.actionButtonClickHandler
+        }, {
+          default: a(() => [
+            f(e.NmorphIcon, null, {
+              default: a(() => [
+                (o(), i(y(e.actionIcon)))
+              ]),
+              _: 1
+              /* STABLE */
+            })
+          ]),
+          _: 1
+          /* STABLE */
+        }, 8, ["disabled", "height"])) : l("v-if", !0)
+      ])
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const z = /* @__PURE__ */ u(p, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-text-input/NmorphTextInput.vue"]]);
+export {
+  z as default
+};

package/dist/components/form/nmorph-text-input/NmorphTextInput.vue2.js

@@ -0,0 +1,63 @@
+import { defineComponent as E, useSlots as O, computed as n, ref as l } from "vue";
+import { NmorphComponentHeight as $ } from "../../../types/index.js";
+import { useModifiers as j } from "../../../utils/create-modifiers.js";
+import { useFormItemInput as k } from "../nmorph-form/use-form-item-input.js";
+import F from "../../../assets/icons/eye-blocked.svg.js";
+import H from "../../../assets/icons/eye.svg.js";
+import M from "../../basic/nmorph-button/NmorphButton.vue.js";
+import A from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import D from "../../../assets/icons/error.svg.js";
+const U = /* @__PURE__ */ E({
+  __name: "NmorphTextInput",
+  props: {
+    placeholder: { type: String, required: !1, default: "" },
+    typePassword: { type: Boolean, required: !1, default: !1 },
+    modelValue: { type: String, required: !1, default: "" },
+    clearable: { type: Boolean, required: !1, default: !1 },
+    indentation: { type: String, required: !1, default: "" },
+    inputAttrs: { type: Object, required: !1, default: () => ({}) },
+    id: { type: String, required: !1 },
+    name: { type: String, required: !1 },
+    autocomplete: { type: String, required: !1 },
+    height: { type: null, required: !1, default: "basic" },
+    disabled: { type: Boolean, required: !1, default: !1 },
+    tabindex: { type: Number, required: !1 }
+  },
+  emits: ["update:model-value", "focus", "blur", "on-enter"],
+  setup(f, { expose: m, emit: h }) {
+    const s = O(), e = f, { id: y, name: b, autocomplete: v, tabindex: g } = k(e), q = n(
+      () => j({
+        nmorph: [$[e.height], `${a.value && "focused"}`],
+        "nmorph-text-input": [
+          `${e.typePassword && "password"}`,
+          `${(e.typePassword || e.clearable) && "with-action"}`
+        ]
+      })
+    ), x = (P) => {
+      const C = P.target;
+      r("update:model-value", C.value);
+    }, t = l(!1), I = () => {
+      e.clearable ? r("update:model-value", "") : t.value = !t.value;
+    }, N = n(() => e.typePassword && !t.value && !e.clearable ? "password" : "text"), a = l(!1), _ = () => {
+      r("focus"), a.value = !0;
+    }, w = () => {
+      r("blur"), a.value = !1;
+    }, o = l(null), u = () => {
+      o.value?.focus();
+    }, p = () => {
+      o.value?.blur();
+    }, i = () => {
+      o.value?.select();
+    };
+    m({ inputDOMRef: o, focus: u, blur: p, select: i });
+    const r = h, S = n(() => e.clearable ? D : t.value ? F : H), d = n(() => e.indentation || (s["prepend-icon"] ? "28px" : "8px")), B = n(() => ({ "--nmorph-text-input-indentation": d.value })), c = { slots: s, props: e, id: y, name: b, autocomplete: v, tabindex: g, modifiers: q, handleInput: x, showPassword: t, actionButtonClickHandler: I, type: N, focused: a, handleFocus: _, handleBlur: w, inputDOMRef: o, focus: u, blur: p, select: i, emit: r, actionIcon: S, indentation: d, styles: B, get NmorphIcon() {
+      return A;
+    }, get NmorphButton() {
+      return M;
+    } };
+    return Object.defineProperty(c, "__isScriptSetup", { enumerable: !1, value: !0 }), c;
+  }
+});
+export {
+  U as default
+};

package/dist/components/navigation/nmorph-backtop/NmorphBacktop.css

@@ -0,0 +1 @@
+.nmorph-backtop{position:fixed;opacity:0;transition:opacity .2s ease-in-out}.nmorph-backtop .nmorph-backtop__up-icon{transform:rotate(180deg)}.nmorph-backtop.nmorph-backtop--show{opacity:1}.nmorph-backtop.nmorph-backtop--common .nmorph-button{background:var(--nmorph-overlay-color);border-radius:4px}.nmorph-backtop{right:var(--nmorph-backtop-right);bottom:var(--nmorph-backtop-bottom)}

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

@@ -0,0 +1,56 @@
+import './NmorphBacktop.css';
+import p from "./NmorphBacktop.vue2.js";
+import { openBlock as l, createElementBlock as a, normalizeStyle as i, createElementVNode as t, normalizeClass as c, withModifiers as m, renderSlot as s, createVNode as r, withCtx as e } from "vue";
+/* empty css                   */
+import d from "../../../_virtual/_plugin-vue_export-helper.js";
+function h(n, f, _, o, k, b) {
+  return l(), a(
+    "div",
+    {
+      style: i({ "--nmorph-backtop-right": `${o.props.right}px`, "--nmorph-backtop-bottom": `${o.props.bottom}px` })
+    },
+    [
+      t(
+        "div",
+        {
+          ref: "selfDOMEl",
+          class: c(o.modifiers)
+        },
+        [
+          t("div", {
+            onClick: m(o.scrollToTopHandler, ["stop"])
+          }, [
+            s(n.$slots, "default", {}, () => [
+              r(o.NmorphButton, {
+                "style-type": o.props.design === "nmorph" ? "default" : "transparent"
+              }, {
+                default: e(() => [
+                  r(o.NmorphIcon, {
+                    class: "nmorph-backtop__up-icon",
+                    color: o.props.design === "nmorph" ? void 0 : "var(--nmorph-white-color)"
+                  }, {
+                    default: e(() => [
+                      r(o.NmorphIconChevronDown)
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["color"])
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["style-type"])
+            ])
+          ])
+        ],
+        2
+        /* CLASS */
+      )
+    ],
+    4
+    /* STYLE */
+  );
+}
+const x = /* @__PURE__ */ d(p, [["render", h], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-backtop/NmorphBacktop.vue"]]);
+export {
+  x as default
+};

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

@@ -0,0 +1,50 @@
+import './NmorphBacktop.css';
+import { defineComponent as h, computed as v, ref as l, onMounted as g, onUnmounted as b } from "vue";
+import { useModifiers as N } from "../../../utils/create-modifiers.js";
+import _ from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import y from "../../basic/nmorph-button/NmorphButton.vue.js";
+import E from "../../../assets/icons/chevron-down.svg.js";
+const I = /* @__PURE__ */ h({
+  __name: "NmorphBacktop",
+  props: {
+    right: { type: Number, required: !1, default: 40 },
+    bottom: { type: Number, required: !1, default: 40 },
+    visibilityHeight: { type: Number, required: !1, default: 200 },
+    design: { type: String, required: !1, default: "nmorph" }
+  },
+  emits: ["click"],
+  setup(a, { expose: m, emit: p }) {
+    m();
+    const t = a, i = p, c = v(
+      () => N({
+        "nmorph-backtop": [`${o.value && "show"}`, t.design]
+      })
+    ), e = l(null), r = l(null), o = l(!1), n = (s) => {
+      if (!s) return;
+      const d = s.target;
+      o.value = d.scrollTop > t.visibilityHeight;
+    }, f = () => {
+      i("click"), e.value && e.value.scrollTo({
+        top: 0,
+        left: 0,
+        behavior: "smooth"
+      });
+    };
+    g(() => {
+      r.value && (e.value = r.value.parentElement?.parentElement, e.value?.addEventListener("scroll", n));
+    }), b(() => {
+      e.value && e.value?.removeEventListener("scroll", n);
+    });
+    const u = { props: t, emit: i, modifiers: c, container: e, selfDOMEl: r, showButton: o, scrollHandler: n, scrollToTopHandler: f, get NmorphButton() {
+      return y;
+    }, get NmorphIcon() {
+      return _;
+    }, get NmorphIconChevronDown() {
+      return E;
+    } };
+    return Object.defineProperty(u, "__isScriptSetup", { enumerable: !1, value: !0 }), u;
+  }
+});
+export {
+  I as default
+};

package/dist/components/navigation/nmorph-breadcrumb/NmorphBreadcrumb.css

@@ -0,0 +1 @@
+.nmorph-breadcrumb,.nmorph-breadcrumb .nmorph-breadcrumb__content{display:flex}.nmorph-breadcrumb .nmorph-breadcrumb__separator{margin:0 var(--indentation-03)}