@nmorph/nmorph-ui-kit 2.2.9 → 2.2.12

package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.vue2.js

@@ -0,0 +1,65 @@
+import './NmorphAutocomplete.css';
+import { defineComponent as N, ref as a, computed as p, watch as i } from "vue";
+import { useModifiers as _ } from "../../../utils/create-modifiers.js";
+import S from "../nmorph-text-input/NmorphTextInput.vue.js";
+import I from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
+import w from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import x from "../../../assets/icons/loader.svg.js";
+const D = /* @__PURE__ */ N({
+  __name: "NmorphAutocomplete",
+  props: {
+    modelValue: { type: String, required: !1, default: "" },
+    placeholder: { type: String, required: !1, default: "" },
+    clearable: { type: Boolean, required: !1, default: !0 },
+    list: { type: Array, required: !0, default: () => [] },
+    actionCallback: { type: Function, required: !1, default: void 0 },
+    zIndex: { type: Number, required: !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", "select"],
+  setup(d, { expose: c, emit: m }) {
+    c();
+    const o = d, t = a(o.modelValue), u = m, f = p(
+      () => _({
+        "nmorph-autocomplete": []
+      })
+    ), h = (e) => {
+      t.value = e, u("update:model-value", t.value);
+    }, r = a(!1), v = a(null), y = () => {
+      r.value = !1;
+    }, n = p(() => o.list.filter((e) => Object.keys(e).some((q) => String(e[q]).toLowerCase().includes(t.value.toLowerCase()))));
+    i(n, (e) => {
+      r.value = e.length > 0;
+    });
+    const g = (e) => {
+      u("select", e), t.value = e.value, setTimeout(() => {
+        r.value = !1;
+      });
+    }, b = () => {
+      r.value = n.value.length > 0;
+    }, l = a(!1);
+    i(t, async (e) => {
+      e !== "" && o.actionCallback && (l.value = !0, await o.actionCallback(), l.value = !1);
+    }), i(l, (e) => {
+      e && (r.value = !0);
+    });
+    const s = { props: o, initialValue: t, emit: u, modifiers: f, updateValueHandler: h, open: r, nmorphAutocompleteDOMRef: v, closeHandler: y, filteredList: n, clickHandler: g, focusHandler: b, loader: l, get NmorphIcon() {
+      return w;
+    }, get NmorphDropdown() {
+      return I;
+    }, get NmorphTextInput() {
+      return S;
+    }, get NmorphIconLoader() {
+      return x;
+    } };
+    return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
+  }
+});
+export {
+  D as default
+};

package/dist/components/form/nmorph-checkbox/NmorphCheckbox.css

@@ -0,0 +1 @@
+.nmorph-checkbox{--size: var(--height);display:inline-flex;align-items:center;cursor:pointer}.nmorph-checkbox .nmorph-checkbox__content{position:relative;display:flex;align-items:center;justify-content:center}.nmorph-checkbox .nmorph-checkbox__input-wrapper{position:relative;width:var(--size);height:var(--size)}.nmorph-checkbox input{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%}.nmorph-checkbox input:focus-visible{opacity:1;scale:.95;outline:2px solid var(--nmorph-accent-color)}.nmorph-checkbox .nmorph-checkbox__fake{border-radius:var(--default-border-radius);width:100%;height:100%;position:absolute;top:0;left:0;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-checkbox .nmorph-checkbox__label,.nmorph-checkbox .nmorph-checkbox__fake span{font-weight:400;font-size:var(--font-size-small);line-height:var(--line-height-regular)}.nmorph-checkbox .nmorph-checkbox__fake-checked{width:50%;height:50%;background:var(--nmorph-accent-color);border-radius:var(--border-radius-20);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.nmorph-checkbox .nmorph-checkbox__label{margin-left:var(--indentation-02);line-height:1}.nmorph-checkbox .nmorph-checkbox__fake span{line-height:.8}.nmorph-checkbox.nmorph-checkbox--button .nmorph-checkbox__fake{position:relative;display:flex;align-items:center;height:var(--size);padding:var(--indentation-03);border-radius:var(--default-border-radius);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-checkbox.nmorph--extra-thin-component .nmorph-checkbox__label,.nmorph-checkbox.nmorph--extra-thin-component .nmorph-checkbox__fake span{font-size:var(--font-size-extra-small);line-height:var(--line-height-line)}.nmorph-checkbox.nmorph--extra-thin-component.nmorph-checkbox--button .nmorph-checkbox__fake{padding:var(--indentation-02)}.nmorph-checkbox.nmorph-checkbox--checked .nmorph-checkbox__fake{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-checkbox.nmorph-checkbox--disabled{cursor:not-allowed;opacity:.6}

package/dist/components/form/nmorph-checkbox/NmorphCheckbox.vue.js

@@ -0,0 +1,96 @@
+import './NmorphCheckbox.css';
+import h from "./NmorphCheckbox.vue2.js";
+import { openBlock as o, createElementBlock as c, normalizeClass as i, createElementVNode as n, createCommentVNode as l, toDisplayString as a, renderSlot as r } from "vue";
+/* empty css                    */
+import t from "../../../_virtual/_plugin-vue_export-helper.js";
+const _ = {
+  key: 0,
+  class: "nmorph-checkbox__content"
+}, p = { class: "nmorph-checkbox__input-wrapper" }, k = ["disabled", "checked"], b = {
+  key: 0,
+  class: "nmorph-checkbox__fake-checked"
+}, m = {
+  key: 0,
+  class: "nmorph-checkbox__label"
+}, f = {
+  key: 1,
+  class: "nmorph-checkbox__label"
+}, x = {
+  key: 1,
+  class: "nmorph-checkbox__content"
+}, v = ["disabled", "checked"], y = {
+  key: 0,
+  class: "nmorph-checkbox__fake"
+}, u = {
+  key: 1,
+  class: "nmorph-checkbox__fake"
+};
+function C(s, d, g, e, N, D) {
+  return o(), c(
+    "label",
+    {
+      class: i(e.modifiers)
+    },
+    [
+      e.props.design === "checkbox" ? (o(), c("div", _, [
+        n("div", p, [
+          n("input", {
+            ref: "inputDOMRef",
+            type: "checkbox",
+            disabled: e.props.disabled,
+            checked: e.checked,
+            class: "nmorph-native-input",
+            onChange: e.handleChange
+          }, null, 40, k),
+          d[0] || (d[0] = n(
+            "div",
+            { class: "nmorph-checkbox__fake" },
+            null,
+            -1
+            /* HOISTED */
+          )),
+          e.checked ? (o(), c("div", b)) : l("v-if", !0)
+        ]),
+        e.props.label ? (o(), c("div", m, [
+          n(
+            "span",
+            null,
+            a(e.props.label),
+            1
+            /* TEXT */
+          )
+        ])) : (o(), c("div", f, [
+          r(s.$slots, "default")
+        ]))
+      ])) : l("v-if", !0),
+      e.props.design === "button" ? (o(), c("div", x, [
+        n("input", {
+          ref: "inputDOMRef",
+          type: "checkbox",
+          disabled: e.props.disabled,
+          checked: e.checked,
+          onChange: e.handleChange
+        }, null, 40, v),
+        e.props.label ? (o(), c("div", y, [
+          n(
+            "span",
+            null,
+            a(e.props.label),
+            1
+            /* TEXT */
+          )
+        ])) : (o(), c("div", u, [
+          r(s.$slots, "label", {}, () => [
+            r(s.$slots, "default")
+          ])
+        ]))
+      ])) : l("v-if", !0)
+    ],
+    2
+    /* CLASS */
+  );
+}
+const R = /* @__PURE__ */ t(h, [["render", C], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-checkbox/NmorphCheckbox.vue"]]);
+export {
+  R as default
+};

package/dist/components/form/nmorph-checkbox/NmorphCheckbox.vue2.js

@@ -0,0 +1,55 @@
+import './NmorphCheckbox.css';
+import { defineComponent as y, inject as u, watch as k, ref as i, computed as r } from "vue";
+import { useModifiers as x } from "../../../utils/create-modifiers.js";
+import { NmorphSelectionControlHeight as S } from "../../../types/index.js";
+const $ = /* @__PURE__ */ y({
+  __name: "NmorphCheckbox",
+  props: {
+    id: { type: String, required: !1, default: "" },
+    disabled: { type: Boolean, required: !1, default: !1 },
+    modelValue: { type: Boolean, required: !1, default: !1 },
+    label: { type: String, required: !1, default: "" },
+    design: { type: String, required: !1, default: "button" },
+    height: { type: null, required: !1 }
+  },
+  emits: ["update:model-value"],
+  setup(f, { expose: m, emit: v }) {
+    const l = u(
+      "checkbox-group-selected-value",
+      void 0
+    ), a = u(
+      "change-checkbox-value-handler",
+      void 0
+    ), n = u("checkbox-group-height", void 0), e = f;
+    k(
+      () => e.modelValue,
+      (_) => {
+        t.value = _;
+      }
+    );
+    const d = i(null);
+    m({ inputDOMRef: d });
+    const o = l !== void 0, t = o ? i(l.value) : i(e.modelValue), s = r(() => o ? l.value.includes(e.id) : e.modelValue), c = r(() => e.height || n?.value || "thin"), p = v, g = () => {
+      if (!e.disabled) {
+        if (!o) {
+          t.value = !t.value, p("update:model-value", t.value);
+          return;
+        }
+        a && Array.isArray(t.value) && a(e.id, t.value);
+      }
+    }, b = r(
+      () => x({
+        nmorph: [S[c.value]],
+        "nmorph-checkbox": [
+          `${s.value && "checked"}`,
+          `${e.disabled && "disabled"}`,
+          `${e.design === "button" && "button"}`
+        ]
+      })
+    ), h = { groupSelectedValue: l, changeValue: a, groupHeight: n, props: e, inputDOMRef: d, hasGroup: o, initialValue: t, checked: s, height: c, emit: p, handleChange: g, modifiers: b };
+    return Object.defineProperty(h, "__isScriptSetup", { enumerable: !1, value: !0 }), h;
+  }
+});
+export {
+  $ as default
+};

package/dist/components/form/nmorph-checkbox-group/NmorphCheckboxGroup.css

@@ -0,0 +1 @@
+.nmorph-checkbox-group{display:inline-block}.nmorph-checkbox-group .nmorph-checkbox-group__wrapper{display:flex;align-items:center}.nmorph-checkbox-group .nmorph-checkbox-group__content{display:flex;flex-flow:row wrap;width:100%}.nmorph-checkbox-group .nmorph-checkbox:not(:last-child){margin-right:var(--indentation-03)}.nmorph-checkbox-group.nmorph-checkbox-group--column .nmorph-checkbox-group__content{flex-direction:column}.nmorph-checkbox-group.nmorph-checkbox-group--column .nmorph-checkbox:not(:last-child){margin-right:var(--indentation-00);margin-bottom:var(--indentation-03)}.nmorph-checkbox-group.nmorph-checkbox-group--column .nmorph-checkbox:last-child{margin-bottom:var(--indentation-00)}

package/dist/components/form/nmorph-checkbox-group/NmorphCheckboxGroup.vue.js

@@ -0,0 +1,42 @@
+import './NmorphCheckboxGroup.css';
+import t from "./NmorphCheckboxGroup.vue2.js";
+import { openBlock as r, createElementBlock as l, normalizeClass as a, createElementVNode as d, Fragment as n, renderList as m, createBlock as h, renderSlot as p } from "vue";
+/* empty css                         */
+import _ from "../../../_virtual/_plugin-vue_export-helper.js";
+const b = { class: "nmorph-checkbox-group__wrapper" }, u = { class: "nmorph-checkbox-group__content" };
+function f(s, g, c, e, k, x) {
+  return r(), l(
+    "div",
+    {
+      class: a(e.modifiers)
+    },
+    [
+      d("div", b, [
+        d("div", u, [
+          (r(!0), l(
+            n,
+            null,
+            m(c.options, (o, i) => (r(), h(e.NmorphCheckbox, {
+              id: o.id,
+              key: i,
+              label: o.label,
+              "model-value": o.modelValue,
+              disabled: o.disabled || e.props.disabled,
+              design: e.props.design,
+              height: o.height || e.props.height
+            }, null, 8, ["id", "label", "model-value", "disabled", "design", "height"]))),
+            128
+            /* KEYED_FRAGMENT */
+          )),
+          p(s.$slots, "default")
+        ])
+      ])
+    ],
+    2
+    /* CLASS */
+  );
+}
+const y = /* @__PURE__ */ _(t, [["render", f], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-checkbox-group/NmorphCheckboxGroup.vue"]]);
+export {
+  y as default
+};

package/dist/components/form/nmorph-checkbox-group/NmorphCheckboxGroup.vue2.js

@@ -0,0 +1,46 @@
+import './NmorphCheckboxGroup.css';
+import { defineComponent as m, ref as h, watch as g, computed as d, provide as o } from "vue";
+import { useModifiers as b } from "../../../utils/create-modifiers.js";
+import y from "../nmorph-checkbox/NmorphCheckbox.vue.js";
+const _ = /* @__PURE__ */ m({
+  __name: "NmorphCheckboxGroup",
+  props: {
+    modelValue: { type: Array, required: !0, default: () => [] },
+    options: { type: Array, required: !1, default: () => [] },
+    design: { type: String, required: !1, default: "button" },
+    direction: { type: null, required: !1, default: "row" },
+    height: { type: null, required: !1, default: "thin" },
+    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(n, { expose: p, emit: s }) {
+    p();
+    const r = n, e = h([...r.modelValue]);
+    g(
+      () => r.modelValue,
+      (t) => {
+        e.value = [...t];
+      },
+      { deep: !0 }
+    );
+    const u = s, a = (t) => {
+      e.value = e.value.includes(t) ? e.value.filter((f) => f !== t) : [...e.value, t], u("update:model-value", e.value);
+    }, c = d(
+      () => b({
+        "nmorph-checkbox-group": [r.design, r.direction]
+      })
+    ), l = d(() => r.height);
+    o("checkbox-group-selected-value", e), o("change-checkbox-value-handler", a), o("checkbox-group-height", l);
+    const i = { props: r, initialValue: e, emit: u, changeHandler: a, modifiers: c, height: l, get NmorphCheckbox() {
+      return y;
+    } };
+    return Object.defineProperty(i, "__isScriptSetup", { enumerable: !1, value: !0 }), i;
+  }
+});
+export {
+  _ as default
+};

package/dist/components/form/nmorph-color-picker/NmorphColorPicker.css

@@ -0,0 +1 @@
+.nmorph-color-picker{display:inline-flex;flex:0 0 auto;flex-direction:column;align-items:flex-start;width:fit-content;max-width:100%}.nmorph-color-picker .nmorph-color-picker__content{position:relative;display:inline-flex;align-items:center;gap:var(--indentation-03);width:fit-content;max-width:100%;height:var(--height);padding:0 var(--default-indentation-input);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-color-picker .nmorph-color-picker__native{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.nmorph-color-picker .nmorph-color-picker__swatch{width:calc(var(--height) - var(--indentation-03));height:calc(var(--height) - var(--indentation-03));border-radius:var(--default-border-radius);flex:0 0 auto;box-shadow:inset 0 0 0 1px #ffffff40,0 0 0 1px #0000001f}.nmorph-color-picker .nmorph-color-picker__value{font-weight:400;font-size:var(--font-size-small);line-height:var(--line-height-regular);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:0 0 7ch;width:7ch;min-width:7ch;font-family:monospace;font-variant-numeric:tabular-nums;font-feature-settings:"tnum";user-select:none}.nmorph-color-picker.nmorph-color-picker--rgb .nmorph-color-picker__value{flex-basis:18ch;width:18ch;min-width:18ch}.nmorph-color-picker.nmorph-color-picker--hsl .nmorph-color-picker__value{flex-basis:20ch;width:20ch;min-width:20ch}.nmorph-color-picker.nmorph--thin-component .nmorph-color-picker__value{font-weight:400;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-color-picker.nmorph--thick-component .nmorph-color-picker__value{font-weight:400;font-size:var(--font-size-base);line-height:var(--line-height-regular)}.nmorph-color-picker.nmorph--focused .nmorph-color-picker__content{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);background:var(--nmorph-accent-color)}.nmorph-color-picker.nmorph--focused .nmorph-color-picker__value{color:var(--nmorph-focus-text-color)}.nmorph-color-picker.nmorph-color-picker--disabled{cursor:not-allowed;opacity:.6}.nmorph-color-picker.nmorph-color-picker--disabled .nmorph-color-picker__content{pointer-events:none}

package/dist/components/form/nmorph-color-picker/NmorphColorPicker.vue.js

@@ -0,0 +1,61 @@
+import './NmorphColorPicker.css';
+import t from "./NmorphColorPicker.vue2.js";
+import { openBlock as n, createElementBlock as i, normalizeClass as a, createElementVNode as e, normalizeStyle as c, toDisplayString as s, createCommentVNode as d } from "vue";
+/* empty css                       */
+import m from "../../../_virtual/_plugin-vue_export-helper.js";
+const p = { class: "nmorph-color-picker__content" }, _ = ["id", "name", "tabindex", "value", "disabled"], f = {
+  key: 0,
+  class: "nmorph-color-picker__value"
+};
+function u(h, r, k, o, v, b) {
+  return n(), i(
+    "div",
+    {
+      class: a(o.modifiers)
+    },
+    [
+      e("div", p, [
+        e("input", {
+          id: o.id,
+          ref: "inputDOMRef",
+          name: o.name,
+          tabindex: o.tabindex,
+          class: "nmorph-color-picker__native nmorph-native-input",
+          type: "color",
+          value: o.currentValue,
+          disabled: o.props.disabled,
+          onInput: o.handleInput,
+          onFocus: r[0] || (r[0] = (l) => {
+            o.focused = !0, o.emit("focus");
+          }),
+          onBlur: r[1] || (r[1] = (l) => {
+            o.focused = !1, o.emit("blur");
+          })
+        }, null, 40, _),
+        e(
+          "div",
+          {
+            class: "nmorph-color-picker__swatch",
+            style: c({ background: o.currentValue })
+          },
+          null,
+          4
+          /* STYLE */
+        ),
+        o.props.showValue ? (n(), i(
+          "span",
+          f,
+          s(o.displayValue),
+          1
+          /* TEXT */
+        )) : d("v-if", !0)
+      ])
+    ],
+    2
+    /* CLASS */
+  );
+}
+const N = /* @__PURE__ */ m(t, [["render", u], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-color-picker/NmorphColorPicker.vue"]]);
+export {
+  N as default
+};

package/dist/components/form/nmorph-color-picker/NmorphColorPicker.vue2.js

@@ -0,0 +1,66 @@
+import './NmorphColorPicker.css';
+import { defineComponent as R, ref as h, watch as j, onMounted as k, computed as C } from "vue";
+import { NmorphComponentHeight as B } from "../../../types/index.js";
+import { useModifiers as H } from "../../../utils/create-modifiers.js";
+import { useFormItemInput as L } from "../nmorph-form/use-form-item-input.js";
+const E = /* @__PURE__ */ R({
+  __name: "NmorphColorPicker",
+  props: {
+    modelValue: { type: String, required: !1, default: "" },
+    showValue: { type: Boolean, required: !1, default: !1 },
+    displayFormat: { type: String, required: !1, default: "hex" },
+    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"],
+  setup(_, { expose: q, emit: M }) {
+    const o = _, g = M, { id: V, name: S, tabindex: x } = L(o), s = (e, r = "#000000") => {
+      const t = e?.trim() || "";
+      return /^#[\da-f]{6}$/i.test(t) ? t.toLowerCase() : /^#[\da-f]{3}$/i.test(t) ? `#${t.slice(1).split("").map((a) => `${a}${a}`).join("").toLowerCase()}` : r;
+    }, c = h(null), m = () => {
+      const e = c.value || document.documentElement, r = getComputedStyle(e).getPropertyValue("--nmorph-accent-color").trim();
+      return s(r, "#006cb6");
+    }, n = h(s(o.modelValue)), b = h(!1);
+    j(
+      () => o.modelValue,
+      (e) => {
+        n.value = e ? s(e) : m();
+      }
+    );
+    const I = (e) => {
+      const r = e.target, t = s(r.value);
+      n.value = t, g("update:model-value", t);
+    }, p = (e) => [
+      parseInt(e.slice(1, 3), 16),
+      parseInt(e.slice(3, 5), 16),
+      parseInt(e.slice(5, 7), 16)
+    ], y = (e) => {
+      const [r, t, a] = p(e);
+      return `rgb(${r}, ${t}, ${a})`;
+    }, $ = (e) => {
+      const [r, t, a] = p(e).map((P) => P / 255), l = Math.max(r, t, a), u = Math.min(r, t, a), f = (l + u) / 2;
+      if (l === u)
+        return `hsl(0, 0%, ${Math.round(f * 100)}%)`;
+      const i = l - u, N = f > 0.5 ? i / (2 - l - u) : i / (l + u);
+      let d = 0;
+      return l === r ? d = (t - a) / i + (t < a ? 6 : 0) : l === t ? d = (a - r) / i + 2 : d = (r - t) / i + 4, `hsl(${Math.round(d * 60)}, ${Math.round(N * 100)}%, ${Math.round(f * 100)}%)`;
+    };
+    k(() => {
+      o.modelValue || (n.value = m());
+    }), q({ inputDOMRef: c });
+    const F = C(
+      () => H({
+        nmorph: [B[o.height], `${b.value && "focused"}`],
+        "nmorph-color-picker": [`${o.disabled && "disabled"}`, o.displayFormat]
+      })
+    ), w = C(() => o.displayFormat === "rgb" ? y(n.value) : o.displayFormat === "hsl" ? $(n.value) : n.value.toUpperCase()), v = { props: o, emit: g, id: V, name: S, tabindex: x, normalizeColor: s, inputDOMRef: c, resolveAccentColor: m, currentValue: n, focused: b, handleInput: I, hexToRgb: p, formatRgb: y, formatHsl: $, modifiers: F, displayValue: w };
+    return Object.defineProperty(v, "__isScriptSetup", { enumerable: !1, value: !0 }), v;
+  }
+});
+export {
+  E as default
+};

package/dist/components/form/nmorph-date-picker/NmorphDatePicker.css

@@ -0,0 +1 @@
+.nmorph-date-picker{--width: 200px;position:relative;width:var(--width)}.nmorph-date-picker .nmorph-date-picker__date-wrapper,.nmorph-date-picker .nmorph-date-picker__date-range-wrapper{height:100%}.nmorph-date-picker .nmorph-date-picker__input{display:flex;align-items:center;justify-content:space-between;height:100%;padding:0 var(--indentation-03);overflow:hidden;border-radius:var(--default-border-radius);cursor:pointer;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-date-picker .nmorph-date-picker__selected-value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-date-picker .nmorph-date-picker__input--open{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-date-picker .nmorph-date-picker__calendar-icon{margin-right:2px}.nmorph-date-picker .nmorph-date-picker__clear-button-wrapper{width:14px;height:14px;margin-right:1px}.nmorph-date-picker .nmorph-dropdown{padding:var(--indentation-03)}.nmorph-date-picker input{position:absolute;width:100%;height:100%;opacity:0;top:0;left:0;pointer-events:none}.nmorph-date-picker .nmorph-calendar{--table-data-cell-height: 42px}.nmorph-date-picker.nmorph-date-picker--daterange{--width: 250px}.nmorph-date-picker.nmorph-date-picker--daterange .nmorph-dropdown{display:flex;justify-content:space-between}.nmorph-date-picker.nmorph-date-picker--daterange .nmorph-date-picker__value-separator{padding:0 var(--indentation-03)}.nmorph-date-picker.nmorph-date-picker--daterange .nmorph-date-picker__selected-value{display:flex}.nmorph-date-picker.nmorph-date-picker--focus{outline:2px solid var(--nmorph-accent-color)}.nmorph-date-picker.nmorph-date-picker--disabled{cursor:not-allowed;opacity:.6}.nmorph-date-picker.nmorph-date-picker--disabled .nmorph-date-picker__date-wrapper{pointer-events:none}

package/dist/components/form/nmorph-date-picker/NmorphDatePicker.vue.js

@@ -0,0 +1,88 @@
+import './NmorphDatePicker.css';
+import p from "./NmorphDatePicker.vue2.js";
+import { openBlock as n, createElementBlock as m, normalizeClass as t, createElementVNode as o, withKeys as _, withModifiers as a, createVNode as r, withCtx as i, toDisplayString as s, createBlock as l, createCommentVNode as c } from "vue";
+/* empty css                      */
+import h from "../../../_virtual/_plugin-vue_export-helper.js";
+const f = { class: "nmorph-date-picker__date-wrapper" }, k = ["id", "name", "autocomplete", "onKeydown"], v = { class: "nmorph-date-picker__selected-value" }, y = { class: "nmorph-date-picker__clear-button-wrapper" }, u = { class: "nmorph-date-picker__content" };
+function w(D, C, d, e, N, x) {
+  return n(), m(
+    "div",
+    {
+      class: t(e.modifiers)
+    },
+    [
+      o("div", f, [
+        o(
+          "div",
+          {
+            ref: "nmorphInputDOMRef",
+            class: t(["nmorph-date-picker__input", { "nmorph-date-picker__input--open": e.open }]),
+            onClick: e.toggleOpen
+          },
+          [
+            o("input", {
+              id: e.id,
+              name: e.name,
+              autocomplete: e.autocomplete,
+              type: "date",
+              onFocus: a(e.focusHandler, ["prevent"]),
+              onBlur: e.blurHandler,
+              onKeydown: _(a(() => {
+              }, ["prevent"]), ["space"])
+            }, null, 40, k),
+            r(e.NmorphIcon, { class: "nmorph-date-picker__calendar-icon" }, {
+              default: i(() => [
+                r(e.NmorphIconCalendar)
+              ]),
+              _: 1
+              /* STABLE */
+            }),
+            o(
+              "div",
+              v,
+              s(e.displayValue),
+              1
+              /* TEXT */
+            ),
+            o("div", y, [
+              e.showClearButton ? (n(), l(e.NmorphClearButton, {
+                key: 0,
+                onClear: e.clearHandler
+              })) : c("v-if", !0)
+            ])
+          ],
+          2
+          /* CLASS */
+        ),
+        o("div", u, [
+          e.nmorphInputDOMRef ? (n(), l(e.NmorphDropdown, {
+            key: 0,
+            "fill-width": !1,
+            width: 324,
+            open: e.open,
+            "relative-element": e.nmorphInputDOMRef,
+            "z-index": e.props.zIndex,
+            onOnOutsideClick: e.closeHandler
+          }, {
+            default: i(() => [
+              r(e.NmorphDatePickerContent, {
+                "selected-values": e.selectedDate,
+                "initial-date": e.props.initialDate,
+                type: d.type,
+                onUpdateSelectedValue: e.updateSelectedDateHandler
+              }, null, 8, ["selected-values", "initial-date", "type"])
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["open", "relative-element", "z-index"])) : c("v-if", !0)
+        ])
+      ])
+    ],
+    2
+    /* CLASS */
+  );
+}
+const V = /* @__PURE__ */ h(p, [["render", w], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-date-picker/NmorphDatePicker.vue"]]);
+export {
+  V as default
+};

package/dist/components/form/nmorph-date-picker/NmorphDatePicker.vue2.js

@@ -0,0 +1,70 @@
+import './NmorphDatePicker.css';
+import { defineComponent as H, computed as l, ref as u } from "vue";
+import { useModifiers as k } from "../../../utils/create-modifiers.js";
+import { NmorphComponentHeight as w } from "../../../types/index.js";
+import B from "./inner-components/nmorph-clear-button/NmorphClearButton.vue.js";
+import O from "./inner-components/nmorph-date-picker-content/NmorphDatePickerContent.vue.js";
+import { useI18n as P } from "vue-i18n";
+import { useFormItemInput as V } from "../nmorph-form/use-form-item-input.js";
+import { formatDateIntl as d } from "../../data/nmorph-calendar/utils.js";
+import j from "../../../assets/icons/calendar.svg.js";
+import M from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import R from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
+const W = /* @__PURE__ */ H({
+  __name: "NmorphDatePicker",
+  props: {
+    placeholder: { type: String, required: !1, default: "" },
+    modelValue: { type: [Date, Array], required: !0, default: null },
+    type: { type: null, required: !1, default: "date" },
+    textSeparator: { type: String, required: !1, default: "-" },
+    initialDate: { type: Date, required: !1, default: () => /* @__PURE__ */ new Date() },
+    zIndex: { type: Number, required: !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(m, { expose: f, emit: c }) {
+    f();
+    const { t: s } = P(), r = m, { id: h, name: v, autocomplete: y } = V(r), n = l(() => r.placeholder ? r.placeholder : s("pickADate")), e = u(r.modelValue), p = c, a = u(!1), g = () => {
+      a.value = !0;
+    }, D = () => {
+      a.value = !1;
+    }, q = l(
+      () => k({
+        nmorph: [w[r.height]],
+        "nmorph-date-picker": [`${r.disabled && "disabled"}`, r.type, `${a.value && "focus"}`]
+      })
+    ), o = u(!1), N = u(null), b = () => {
+      o.value = !1;
+    }, I = () => {
+      o.value = !o.value;
+    }, _ = l(() => {
+      if (!e.value) return n.value;
+      if (Array.isArray(e.value)) {
+        if (e.value.length === 0) return n.value;
+        const t = d(e.value), x = r.type === "daterange" ? " - " : ", ";
+        return t.join(x);
+      } else
+        return d(e.value);
+    }), S = () => {
+      const t = Array.isArray(e.value) ? [] : null;
+      e.value = t, p("update:model-value", e.value);
+    }, A = (t) => {
+      e.value = t, p("update:model-value", e.value);
+    }, C = l(() => Array.isArray(e.value) ? e.value.length > 0 : !!e.value), i = { t: s, props: r, id: h, name: v, autocomplete: y, placeholderText: n, selectedDate: e, emit: p, focus: a, focusHandler: g, blurHandler: D, modifiers: q, open: o, nmorphInputDOMRef: N, closeHandler: b, toggleOpen: I, displayValue: _, clearHandler: S, updateSelectedDateHandler: A, showClearButton: C, get NmorphDropdown() {
+      return R;
+    }, get NmorphIcon() {
+      return M;
+    }, get NmorphIconCalendar() {
+      return j;
+    }, NmorphClearButton: B, NmorphDatePickerContent: O };
+    return Object.defineProperty(i, "__isScriptSetup", { enumerable: !1, value: !0 }), i;
+  }
+});
+export {
+  W as default
+};

package/dist/components/form/nmorph-date-picker/inner-components/nmorph-clear-button/NmorphClearButton.vue.js

@@ -0,0 +1,28 @@
+import t from "./NmorphClearButton.vue2.js";
+import { openBlock as n, createElementBlock as i, normalizeClass as m, createVNode as e, withModifiers as c, withCtx as p } from "vue";
+import a from "../../../../../_virtual/_plugin-vue_export-helper.js";
+function l(s, r, f, o, d, _) {
+  return n(), i(
+    "div",
+    {
+      class: m(o.modifiers)
+    },
+    [
+      e(o.NmorphIcon, {
+        onClick: r[0] || (r[0] = c((h) => o.emit("clear"), ["stop"]))
+      }, {
+        default: p(() => [
+          e(o.NmorphIconError)
+        ]),
+        _: 1
+        /* STABLE */
+      })
+    ],
+    2
+    /* CLASS */
+  );
+}
+const N = /* @__PURE__ */ a(t, [["render", l], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-date-picker/inner-components/nmorph-clear-button/NmorphClearButton.vue"]]);
+export {
+  N as default
+};