@nmorph/nmorph-ui-kit 2.2.19 → 2.2.21

package/dist/components/feedback/nmorph-tooltip/NmorphTooltip.vue.js

@@ -1,21 +1,21 @@
 import './NmorphTooltip.css';
 import f from "./NmorphTooltip.vue2.js";
-import { openBlock as t, createElementBlock as n, normalizeStyle as a, normalizeClass as h, createElementVNode as e, renderSlot as d, createBlock as c, TransitionGroup as p, withCtx as _, createCommentVNode as r, toDisplayString as m } from "vue";
+import { openBlock as t, createElementBlock as n, normalizeStyle as a, normalizeClass as h, createElementVNode as e, renderSlot as d, createBlock as c, TransitionGroup as _, withCtx as p, createCommentVNode as r, toDisplayString as m } from "vue";
 /* empty css                   */
 import v from "../../../_virtual/_plugin-vue_export-helper.js";
 const y = { ref: "slotDOMRef" }, k = { class: "nmorph-tooltip__shadow-content" }, u = {
   key: 0,
   class: "nmorph-tooltip__triangle"
-}, w = {
+}, x = {
   key: 0,
   class: "nmorph-tooltip__info-content"
-}, x = { class: "nmorph-tooltip__shadow-content" }, C = { key: 0 };
-function M(l, s, i, o, g, T) {
+}, C = { class: "nmorph-tooltip__shadow-content" }, M = { key: 0 };
+function g(l, s, i, o, w, T) {
   return t(), n(
     "div",
     {
       class: h(o.modifiers),
-      style: a({ "--nmorph-tooltip-width": o.width })
+      style: a(o.styles)
     },
     [
       e(
@@ -36,12 +36,12 @@ function M(l, s, i, o, g, T) {
             512
             /* NEED_PATCH */
           ),
-          o.props.forceCoordinate ? (t(), c(p, {
+          o.props.forceCoordinate ? (t(), c(_, {
             key: 0,
             name: "opacity",
             tag: "div"
           }, {
-            default: _(() => [
+            default: p(() => [
               o.showTooltip && o.props.text ? (t(), n(
                 "div",
                 {
@@ -68,14 +68,14 @@ function M(l, s, i, o, g, T) {
             ]),
             _: 1
             /* STABLE */
-          })) : (t(), c(p, {
+          })) : (t(), c(_, {
             key: 1,
             name: "opacity",
             tag: "div"
           }, {
-            default: _(() => [
-              o.showTooltip ? (t(), n("div", w, [
-                e("div", x, [
+            default: p(() => [
+              o.showTooltip ? (t(), n("div", x, [
+                e("div", C, [
                   s[0] || (s[0] = e(
                     "div",
                     { class: "nmorph-tooltip__triangle" },
@@ -85,7 +85,7 @@ function M(l, s, i, o, g, T) {
                   )),
                   o.props.text ? (t(), n(
                     "span",
-                    C,
+                    M,
                     m(i.text),
                     1
                     /* TEXT */
@@ -105,7 +105,7 @@ function M(l, s, i, o, g, T) {
     /* CLASS, STYLE */
   );
 }
-const E = /* @__PURE__ */ v(f, [["render", M], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-tooltip/NmorphTooltip.vue"]]);
+const E = /* @__PURE__ */ v(f, [["render", g], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-tooltip/NmorphTooltip.vue"]]);
 export {
   E as default
 };

package/dist/components/feedback/nmorph-tooltip/NmorphTooltip.vue2.js

@@ -1,37 +1,51 @@
 import './NmorphTooltip.css';
-import { defineComponent as _, ref as o, computed as i } from "vue";
-import { useModifiers as h } from "../../../utils/create-modifiers.js";
-import { usePlacement as y } from "../../../hooks/use-placement.js";
-const w = /* @__PURE__ */ _({
+import { defineComponent as w, ref as r, computed as n } from "vue";
+import { useModifiers as S } from "../../../utils/create-modifiers.js";
+import { usePlacement as _ } from "../../../hooks/use-placement.js";
+import { useZIndex as g } from "../../../hooks/use-z-index.js";
+const z = /* @__PURE__ */ w({
   __name: "NmorphTooltip",
   props: {
     text: { type: String, required: !1, default: "" },
     position: { type: null, required: !1, default: "top" },
     forceShow: { type: Boolean, required: !1, default: !1 },
-    forceCoordinate: { type: [Object, null], required: !1, default: null }
+    forceCoordinate: { type: [Object, null], required: !1, default: null },
+    zIndex: { type: Number, required: !1, default: void 0 },
+    width: { type: [Number, String], required: !1, default: void 0 },
+    maxWidth: { type: [Number, String], required: !1, default: void 0 },
+    height: { type: [Number, String], required: !1, default: void 0 }
   },
-  setup(u, { expose: f }) {
-    const e = u, t = o(e.forceShow), n = o(null), r = o(null), { placement: l } = y({
+  setup(c, { expose: m }) {
+    const e = c, t = r(e.forceShow), l = r(null), d = r(null), { placement: a } = _({
       initialPlacement: e.position,
-      contentDOMElement: n,
-      relativeElement: r
-    }), c = i(
-      () => h({
+      contentDOMElement: l,
+      relativeElement: d
+    }), h = n(
+      () => S({
         "nmorph-tooltip": [
-          l.value,
+          a.value,
           `${!!e.forceCoordinate?.x && !!e.forceCoordinate?.y && "force-coords"}`
         ]
       })
-    ), p = () => {
+    ), v = () => {
       t.value = !0;
-    }, d = () => {
+    }, x = () => {
       e.forceShow || (t.value = !1);
-    }, m = i(() => e.forceCoordinate ? "100%" : "auto"), s = o(null);
-    f({ tooltipBody: s });
-    const a = { props: e, showTooltip: t, tooltipDOMRef: n, slotDOMRef: r, placement: l, modifiers: c, handleMouseEnter: p, handleMouseLeave: d, width: m, tooltipBody: s };
-    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
+    }, o = (i) => typeof i == "number" ? `${i}px` : i, s = n(() => e.forceCoordinate ? "100%" : "auto"), u = g(
+      () => t.value,
+      () => e.zIndex
+    ), y = n(() => ({
+      "--nmorph-tooltip-width": s.value,
+      "--nmorph-tooltip-z-index": u.value,
+      ...e.width !== void 0 && { "--width": o(e.width) },
+      ...e.maxWidth !== void 0 && { "--max-width": o(e.maxWidth) },
+      ...e.height !== void 0 && { "--height": o(e.height) }
+    })), f = r(null);
+    m({ tooltipBody: f });
+    const p = { props: e, showTooltip: t, tooltipDOMRef: l, slotDOMRef: d, placement: a, modifiers: h, handleMouseEnter: v, handleMouseLeave: x, getCssSize: o, rootWidth: s, zIndex: u, styles: y, tooltipBody: f };
+    return Object.defineProperty(p, "__isScriptSetup", { enumerable: !1, value: !0 }), p;
   }
 });
 export {
-  w as default
+  z as default
 };

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

@@ -64,8 +64,8 @@ function V(a, s, S, e, z, A) {
             ])
           ])) : e.virtualEnabled ? (l(), t("div", {
             key: 1,
-            ref: e.virtualList.containerRef,
             id: e.listboxId,
+            ref: e.virtualList.containerRef,
             class: i(["nmorph-autocomplete__list nmorph-autocomplete__list--virtual", { "nmorph-autocomplete__list--dynamic": e.virtualDynamicHeight }]),
             style: m({ "--autocomplete-virtual-item-height": `${e.virtualItemHeight}px`, maxHeight: e.virtualMaxHeight }),
             role: "listbox",

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

@@ -1 +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;justify-content:space-between;align-items:center;height:100%;padding:0 var(--indentation-03);overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-outset);cursor:pointer}.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:var(--nmorph-shadow-inset)}.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;top:0;left:0;width:100%;height:100%;opacity: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}
+.nmorph-date-picker{--width: 200px;--date-picker-calendar-cell-height: 42px;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;justify-content:space-between;align-items:center;height:100%;padding:0 var(--indentation-03);overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-outset);cursor:pointer}.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:var(--nmorph-shadow-inset)}.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;top:0;left:0;width:100%;height:100%;opacity:0;pointer-events:none}.nmorph-date-picker .nmorph-calendar{--table-data-cell-height: var(--date-picker-calendar-cell-height)}.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

@@ -1,17 +1,18 @@
 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";
+import { openBlock as n, createElementBlock as m, normalizeStyle as _, normalizeClass as t, createElementVNode as o, withKeys as s, withModifiers as a, createVNode as r, withCtx as i, toDisplayString as h, 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) {
+import f from "../../../_virtual/_plugin-vue_export-helper.js";
+const k = { class: "nmorph-date-picker__date-wrapper" }, v = ["id", "name", "autocomplete", "onKeydown"], y = { class: "nmorph-date-picker__selected-value" }, w = { class: "nmorph-date-picker__clear-button-wrapper" }, D = { class: "nmorph-date-picker__content" };
+function u(C, N, d, e, x, B) {
   return n(), m(
     "div",
     {
-      class: t(e.modifiers)
+      class: t(e.modifiers),
+      style: _(e.styles)
     },
     [
-      o("div", f, [
+      o("div", k, [
         o(
           "div",
           {
@@ -27,9 +28,9 @@ function w(D, C, d, e, N, x) {
               type: "date",
               onFocus: a(e.focusHandler, ["prevent"]),
               onBlur: e.blurHandler,
-              onKeydown: _(a(() => {
+              onKeydown: s(a(() => {
               }, ["prevent"]), ["space"])
-            }, null, 40, k),
+            }, null, 40, v),
             r(e.NmorphIcon, { class: "nmorph-date-picker__calendar-icon" }, {
               default: i(() => [
                 r(e.NmorphIconCalendar)
@@ -39,12 +40,12 @@ function w(D, C, d, e, N, x) {
             }),
             o(
               "div",
-              v,
-              s(e.displayValue),
+              y,
+              h(e.displayValue),
               1
               /* TEXT */
             ),
-            o("div", y, [
+            o("div", w, [
               e.showClearButton ? (n(), l(e.NmorphClearButton, {
                 key: 0,
                 onClear: e.clearHandler
@@ -54,7 +55,7 @@ function w(D, C, d, e, N, x) {
           2
           /* CLASS */
         ),
-        o("div", u, [
+        o("div", D, [
           e.nmorphInputDOMRef ? (n(), l(e.NmorphDropdown, {
             key: 0,
             "fill-width": !1,
@@ -78,11 +79,11 @@ function w(D, C, d, e, N, x) {
         ])
       ])
     ],
-    2
-    /* CLASS */
+    6
+    /* CLASS, STYLE */
   );
 }
-const V = /* @__PURE__ */ h(p, [["render", w], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-date-picker/NmorphDatePicker.vue"]]);
+const V = /* @__PURE__ */ f(p, [["render", u], ["__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

@@ -1,16 +1,16 @@
 import './NmorphDatePicker.css';
-import { defineComponent as H, computed as l, ref as u } from "vue";
-import { useModifiers as O } from "../../../utils/create-modifiers.js";
-import { NmorphComponentHeight as k } from "../../../types/index.js";
-import w from "./inner-components/nmorph-clear-button/NmorphClearButton.vue.js";
-import B 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 { formatDate as s } from "../../data/nmorph-calendar/utils.js";
-import j from "../../../assets/icons/calendar.svg.js";
+import { defineComponent as O, computed as a, ref as u } from "vue";
+import { useModifiers as k } from "../../../utils/create-modifiers.js";
+import { NmorphComponentHeight as B } from "../../../types/index.js";
+import P from "./inner-components/nmorph-clear-button/NmorphClearButton.vue.js";
+import V from "./inner-components/nmorph-date-picker-content/NmorphDatePickerContent.vue.js";
+import { useI18n as $ } from "vue-i18n";
+import { useFormItemInput as j } from "../nmorph-form/use-form-item-input.js";
+import { formatDate as f } from "../../data/nmorph-calendar/utils.js";
+import z from "../../../assets/icons/calendar.svg.js";
 import L from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 import M from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
-const X = /* @__PURE__ */ H({
+const Z = /* @__PURE__ */ O({
   __name: "NmorphDatePicker",
   props: {
     placeholder: { type: String, required: !1, default: "" },
@@ -25,6 +25,8 @@ const X = /* @__PURE__ */ H({
     dateFormatter: { type: Function, required: !1, default: void 0 },
     valueSeparator: { type: String, required: !1, default: ", " },
     rangeSeparator: { type: String, required: !1, default: " - " },
+    width: { type: [Number, String], required: !1, default: void 0 },
+    calendarCellHeight: { type: [Number, String], required: !1, default: void 0 },
     id: { type: String, required: !1 },
     name: { type: String, required: !1 },
     autocomplete: { type: String, required: !1 },
@@ -33,22 +35,27 @@ const X = /* @__PURE__ */ H({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value"],
-  setup(m, { expose: f, emit: c }) {
-    f();
-    const { t: p } = P(), e = m, { id: y, name: v, autocomplete: h } = V(e), n = l(() => e.placeholder ? e.placeholder : p("pickADate")), t = u(e.modelValue), d = c, a = u(!1), g = () => {
-      a.value = !0;
-    }, q = () => {
-      a.value = !1;
-    }, S = l(
-      () => O({
-        nmorph: [k[e.height]],
-        "nmorph-date-picker": [`${e.disabled && "disabled"}`, e.type, `${a.value && "focus"}`]
+  setup(m, { expose: c, emit: y }) {
+    c();
+    const { t: p } = $(), e = m, { id: h, name: v, autocomplete: g } = j(e), n = a(() => e.placeholder ? e.placeholder : p("pickADate")), t = u(e.modelValue), d = y, l = u(!1), q = () => {
+      l.value = !0;
+    }, S = () => {
+      l.value = !1;
+    }, N = a(
+      () => k({
+        nmorph: [B[e.height]],
+        "nmorph-date-picker": [`${e.disabled && "disabled"}`, e.type, `${l.value && "focus"}`]
       })
-    ), o = u(!1), D = u(null), N = () => {
+    ), i = (r) => typeof r == "number" ? `${r}px` : r, b = a(() => ({
+      ...e.width !== void 0 && { "--width": i(e.width) },
+      ...e.calendarCellHeight !== void 0 && {
+        "--date-picker-calendar-cell-height": i(e.calendarCellHeight)
+      }
+    })), o = u(!1), D = u(null), C = () => {
       o.value = !1;
-    }, b = () => {
+    }, _ = () => {
       o.value = !o.value;
-    }, _ = l(() => {
+    }, A = a(() => {
       if (!t.value) return n.value;
       const r = {
         locale: e.dateLocale,
@@ -58,25 +65,25 @@ const X = /* @__PURE__ */ H({
       };
       if (Array.isArray(t.value)) {
         if (t.value.length === 0) return n.value;
-        const C = s(t.value, r), x = e.type === "daterange" ? e.rangeSeparator : e.valueSeparator;
-        return C.join(x);
+        const F = f(t.value, r), x = e.type === "daterange" ? e.rangeSeparator : e.valueSeparator;
+        return F.join(x);
       } else
-        return s(t.value, r);
-    }), A = () => {
+        return f(t.value, r);
+    }), H = () => {
       const r = Array.isArray(t.value) ? [] : null;
       t.value = r, d("update:model-value", t.value);
     }, I = (r) => {
       t.value = r, d("update:model-value", t.value);
-    }, F = l(() => Array.isArray(t.value) ? t.value.length > 0 : !!t.value), i = { t: p, props: e, id: y, name: v, autocomplete: h, placeholderText: n, selectedDate: t, emit: d, focus: a, focusHandler: g, blurHandler: q, modifiers: S, open: o, nmorphInputDOMRef: D, closeHandler: N, toggleOpen: b, displayValue: _, clearHandler: A, updateSelectedDateHandler: I, showClearButton: F, get NmorphDropdown() {
+    }, w = a(() => Array.isArray(t.value) ? t.value.length > 0 : !!t.value), s = { t: p, props: e, id: h, name: v, autocomplete: g, placeholderText: n, selectedDate: t, emit: d, focus: l, focusHandler: q, blurHandler: S, modifiers: N, getCssSize: i, styles: b, open: o, nmorphInputDOMRef: D, closeHandler: C, toggleOpen: _, displayValue: A, clearHandler: H, updateSelectedDateHandler: I, showClearButton: w, get NmorphDropdown() {
       return M;
     }, get NmorphIcon() {
       return L;
     }, get NmorphIconCalendar() {
-      return j;
-    }, NmorphClearButton: w, NmorphDatePickerContent: B };
-    return Object.defineProperty(i, "__isScriptSetup", { enumerable: !1, value: !0 }), i;
+      return z;
+    }, NmorphClearButton: P, NmorphDatePickerContent: V };
+    return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
   }
 });
 export {
-  X as default
+  Z as default
 };

package/dist/components/form/nmorph-number-input/NmorphNumberInput.css

@@ -1 +1 @@
-.nmorph-number-input{display:inline-flex;flex-direction:column;align-items:flex-start}.nmorph-number-input .nmorph-number-input__content{display:flex;align-items:center;width:100%}.nmorph-number-input .nmorph-number-input__input-content{display:flex;width:100%;height:var(--height);height:100%;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);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-number-input .nmorph-number-input__decrease .nmorph-button__content{border-top-right-radius:0;border-bottom-right-radius:0}.nmorph-number-input .nmorph-number-input__increase .nmorph-button__content{border-top-left-radius:0;border-bottom-left-radius:0}.nmorph-number-input input{width:auto;width:100%;padding:var(--indentation-00) var(--default-indentation-input);text-align:center;background:var(--nmorph-main-color);border:none;border-top:1px solid var(--nmorph-main-color);border-bottom:1px solid 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);transition:ease-in-out var(--transition-01) background;transition:background 0s;appearance:textfield}.nmorph-number-input input:focus{background:var(--nmorph-accent-color);outline:none}.nmorph-number-input input::-webkit-inner-spin-button,.nmorph-number-input input::-webkit-outer-spin-button{margin:0;appearance:none}.nmorph-number-input .nmorph-number-input__action-btns{display:flex;flex-direction:column}.nmorph-number-input.nmorph-number-input--disabled{cursor:not-allowed;opacity:.6}.nmorph-number-input.nmorph-number-input--disabled .nmorph-number-input__input-content{pointer-events:none}.nmorph-number-input.nmorph-number-input--action-btn-position-right input{border-top-left-radius:var(--default-border-radius);border-bottom-left-radius:var(--default-border-radius)}.nmorph-number-input.nmorph-number-input--action-btn-position-right .nmorph-number-input__decrease,.nmorph-number-input.nmorph-number-input--action-btn-position-right .nmorph-number-input__increase{display:flex;justify-content:center;width:100%}.nmorph-number-input.nmorph-number-input--action-btn-position-right .nmorph-number-input__decrease .nmorph-button__content{border-radius:0;border-top-right-radius:var(--default-border-radius)}.nmorph-number-input.nmorph-number-input--action-btn-position-right .nmorph-number-input__increase .nmorph-button__content{border-radius:0;border-bottom-right-radius:var(--default-border-radius)}.nmorph-number-input.nmorph-number-input--action-btn-position-right .nmorph-button{--height: var(--nmorph-number-input-right-action-height);width:100%}
+.nmorph-number-input{display:inline-flex;flex-direction:column;align-items:flex-start}.nmorph-number-input .nmorph-number-input__content{display:flex;align-items:center;width:100%}.nmorph-number-input .nmorph-number-input__input-content{display:flex;width:100%;height:var(--height);height:100%;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);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-number-input .nmorph-number-input__decrease .nmorph-button__content{border-top-right-radius:0;border-bottom-right-radius:0}.nmorph-number-input .nmorph-number-input__increase .nmorph-button__content{border-top-left-radius:0;border-bottom-left-radius:0}.nmorph-number-input input{width:auto;width:100%;padding:var(--indentation-00) var(--default-indentation-input);text-align:center;background:var(--nmorph-main-color);border:none;border-top:1px solid var(--nmorph-main-color);border-bottom:1px solid 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);transition:ease-in-out var(--transition-01) background;transition:background 0s;appearance:textfield}.nmorph-number-input input:focus{background:var(--nmorph-accent-color);outline:none}.nmorph-number-input input::-webkit-inner-spin-button,.nmorph-number-input input::-webkit-outer-spin-button{margin:0;appearance:none}.nmorph-number-input .nmorph-number-input__action-btns{display:flex;flex-direction:column}.nmorph-number-input.nmorph-number-input--disabled{cursor:not-allowed;opacity:.6}.nmorph-number-input.nmorph-number-input--disabled .nmorph-number-input__input-content{pointer-events:none}.nmorph-number-input.nmorph-number-input--action-btn-position-right input{border-top-left-radius:var(--default-border-radius);border-bottom-left-radius:var(--default-border-radius)}.nmorph-number-input.nmorph-number-input--action-btn-position-right .nmorph-number-input__decrease,.nmorph-number-input.nmorph-number-input--action-btn-position-right .nmorph-number-input__increase{display:flex;justify-content:center;width:100%}.nmorph-number-input.nmorph-number-input--action-btn-position-right .nmorph-number-input__increase .nmorph-button__content{border-radius:0;border-top-right-radius:var(--default-border-radius)}.nmorph-number-input.nmorph-number-input--action-btn-position-right .nmorph-number-input__decrease .nmorph-button__content{border-radius:0;border-bottom-right-radius:var(--default-border-radius)}.nmorph-number-input.nmorph-number-input--action-btn-position-right .nmorph-button{--height: var(--nmorph-number-input-right-action-height);width:100%}

package/dist/components/form/nmorph-number-input/NmorphNumberInput.vue.js

@@ -12,7 +12,7 @@ const _ = { class: "nmorph-number-input__content" }, s = { class: "nmorph-number
 }, B = {
   key: 2,
   class: "nmorph-number-input__action-btns"
-}, g = { class: "nmorph-number-input__decrease" }, u = { class: "nmorph-number-input__increase" };
+}, g = { class: "nmorph-number-input__increase" }, u = { class: "nmorph-number-input__decrease" };
 function I(N, y, r, n, v, x) {
   return o(), a(
     "div",
@@ -63,8 +63,8 @@ function I(N, y, r, n, v, x) {
             e("div", g, [
               i(n.NmorphButton, {
                 "style-type": "transparent",
-                disabled: n.minBtnDisabled,
-                onClick: n.decreaseHandler
+                disabled: n.maxBtnDisabled,
+                onClick: n.increaseHandler
               }, {
                 default: t(() => [
                   i(n.NmorphIcon, {
@@ -72,7 +72,7 @@ function I(N, y, r, n, v, x) {
                     height: n.actionBtnIconSize
                   }, {
                     default: t(() => [
-                      i(n.NmorphIconMinusThin)
+                      i(n.NmorphIconPlusThin)
                     ]),
                     _: 1
                     /* STABLE */
@@ -85,8 +85,8 @@ function I(N, y, r, n, v, x) {
             e("div", u, [
               i(n.NmorphButton, {
                 "style-type": "transparent",
-                disabled: n.maxBtnDisabled,
-                onClick: n.increaseHandler
+                disabled: n.minBtnDisabled,
+                onClick: n.decreaseHandler
               }, {
                 default: t(() => [
                   i(n.NmorphIcon, {
@@ -94,7 +94,7 @@ function I(N, y, r, n, v, x) {
                     height: n.actionBtnIconSize
                   }, {
                     default: t(() => [
-                      i(n.NmorphIconPlusThin)
+                      i(n.NmorphIconMinusThin)
                     ]),
                     _: 1
                     /* STABLE */

package/dist/components/form/nmorph-select/NmorphSelect.vue.js

@@ -1,23 +1,24 @@
 import './NmorphSelect.css';
 import w from "./NmorphSelect.vue2.js";
-import { openBlock as r, createElementBlock as n, normalizeClass as x, createElementVNode as t, withKeys as a, withModifiers as l, Fragment as d, renderList as c, toDisplayString as _, createBlock as i, mergeProps as h, createVNode as f, withCtx as m, normalizeStyle as s, renderSlot as b, createCommentVNode as k } from "vue";
+import { openBlock as r, createElementBlock as l, normalizeStyle as c, normalizeClass as x, createElementVNode as t, withKeys as a, withModifiers as n, Fragment as d, renderList as h, toDisplayString as _, createBlock as i, mergeProps as m, createVNode as f, withCtx as s, renderSlot as b, createCommentVNode as k } from "vue";
 /* empty css                  */
 import H from "../../../_virtual/_plugin-vue_export-helper.js";
-const N = { class: "nmorph-select__content" }, S = ["id", "name", "autocomplete", "tabindex", "disabled", "aria-expanded", "aria-controls", "aria-activedescendant", "onKeydown"], u = ["value"], I = {
+const N = { class: "nmorph-select__content" }, S = ["id", "name", "autocomplete", "tabindex", "disabled", "aria-expanded", "aria-controls", "aria-activedescendant", "onKeydown"], I = ["value"], O = {
   key: 0,
   class: "nmorph-select__selected-value"
-}, O = {
+}, u = {
   key: 1,
   class: "nmorph-select__selected-value"
 }, C = {
   key: 2,
   class: "nmorph-select__selected-value"
 }, D = ["id"];
-function E(p, v, y, e, M, R) {
-  return r(), n(
+function E(y, v, p, e, M, R) {
+  return r(), l(
     "div",
     {
-      class: x(e.modifiers)
+      class: x(e.modifiers),
+      style: c(e.styles)
     },
     [
       t("div", N, [
@@ -34,22 +35,22 @@ function E(p, v, y, e, M, R) {
           onFocus: e.focusHandler,
           onBlur: e.blurHandler,
           onKeydown: [
-            a(l(e.spaceHandler, ["prevent"]), ["space"]),
-            a(l(e.arrowDownHandler, ["prevent"]), ["arrow-down"]),
-            a(l(e.arrowUpHandler, ["prevent"]), ["arrow-up"]),
-            a(l(e.enterHandler, ["prevent"]), ["enter"]),
-            a(l(e.escapeHandler, ["prevent"]), ["escape"]),
-            a(l(e.homeHandler, ["prevent"]), ["home"]),
-            a(l(e.endHandler, ["prevent"]), ["end"])
+            a(n(e.spaceHandler, ["prevent"]), ["space"]),
+            a(n(e.arrowDownHandler, ["prevent"]), ["arrow-down"]),
+            a(n(e.arrowUpHandler, ["prevent"]), ["arrow-up"]),
+            a(n(e.enterHandler, ["prevent"]), ["enter"]),
+            a(n(e.escapeHandler, ["prevent"]), ["escape"]),
+            a(n(e.homeHandler, ["prevent"]), ["home"]),
+            a(n(e.endHandler, ["prevent"]), ["end"])
           ]
         }, [
-          (r(!0), n(
+          (r(!0), l(
             d,
             null,
-            c(e.nativeOptions, (o) => (r(), n("option", {
+            h(e.nativeOptions, (o) => (r(), l("option", {
               key: o,
               value: o
-            }, null, 8, u))),
+            }, null, 8, I))),
             128
             /* KEYED_FRAGMENT */
           ))
@@ -60,26 +61,26 @@ function E(p, v, y, e, M, R) {
             ref: "nmorphSelectDOMRef",
             class: "nmorph-select__selected-values-line",
             "aria-hidden": "true",
-            onClick: l(e.clickHandler, ["stop"])
+            onClick: n(e.clickHandler, ["stop"])
           },
           [
-            typeof e.initialValue == "string" ? (r(), n(
+            typeof e.initialValue == "string" ? (r(), l(
               "div",
-              I,
+              O,
               _(e.selectedValueTitle),
               1
               /* TEXT */
-            )) : e.initialValue.length === 0 ? (r(), n(
+            )) : e.initialValue.length === 0 ? (r(), l(
               "div",
-              O,
+              u,
               _(e.computedNoElementPlaceholder),
               1
               /* TEXT */
-            )) : (r(), n("div", C, [
-              (r(!0), n(
+            )) : (r(), l("div", C, [
+              (r(!0), l(
                 d,
                 null,
-                c(e.tags, (o) => (r(), i(e.NmorphTagItem, h({
+                h(e.tags, (o) => (r(), i(e.NmorphTagItem, m({
                   key: o.value
                 }, { ref_for: !0 }, o, {
                   transparent: "",
@@ -92,7 +93,7 @@ function E(p, v, y, e, M, R) {
               ))
             ])),
             f(e.NmorphIcon, { class: "nmorph-select__chevron" }, {
-              default: m(() => [
+              default: s(() => [
                 e.props.loading ? (r(), i(e.NmorphIconLoader, { key: 0 })) : (r(), i(e.NmorphIconChevronDown, { key: 1 }))
               ]),
               _: 1
@@ -116,7 +117,7 @@ function E(p, v, y, e, M, R) {
         onOnOutsideClick: e.closeHandler,
         onOnEscapeKeydown: e.escapeHandler
       }, {
-        default: m(() => [
+        default: s(() => [
           t("div", {
             id: e.listboxId,
             ref: "optionsDOMRef",
@@ -128,18 +129,18 @@ function E(p, v, y, e, M, R) {
               class: "nmorph-select__chevron",
               size: "medium"
             }, {
-              default: m(() => [
+              default: s(() => [
                 f(e.NmorphIconChevronDown)
               ]),
               _: 1
               /* STABLE */
-            })) : e.virtualEnabled ? (r(), n(
+            })) : e.virtualEnabled ? (r(), l(
               "div",
               {
                 key: 1,
                 ref: e.virtualList.containerRef,
                 class: "nmorph-select__virtual-list",
-                style: s({ maxHeight: e.virtualMaxHeight }),
+                style: c({ maxHeight: e.virtualMaxHeight }),
                 onScroll: v[0] || (v[0] = (...o) => e.virtualList.scrollHandler && e.virtualList.scrollHandler(...o))
               },
               [
@@ -147,20 +148,20 @@ function E(p, v, y, e, M, R) {
                   "div",
                   {
                     class: "nmorph-select__virtual-spacer",
-                    style: s(e.virtualSpacerStyle)
+                    style: c(e.virtualSpacerStyle)
                   },
                   [
                     t(
                       "div",
                       {
                         class: "nmorph-select__virtual-content",
-                        style: s(e.virtualContentStyle)
+                        style: c(e.virtualContentStyle)
                       },
                       [
-                        (r(!0), n(
+                        (r(!0), l(
                           d,
                           null,
-                          c(e.virtualOptions, (o) => (r(), i(e.NmorphSelectOption, h({
+                          h(e.virtualOptions, (o) => (r(), i(e.NmorphSelectOption, m({
                             id: e.getOptionId(o.item.value),
                             ref_for: !0,
                             ref: (g) => e.setVirtualOptionRef(g, o.index),
@@ -183,14 +184,14 @@ function E(p, v, y, e, M, R) {
               ],
               36
               /* STYLE, NEED_HYDRATION */
-            )) : (r(), n(
+            )) : (r(), l(
               d,
               { key: 2 },
               [
-                (r(!0), n(
+                (r(!0), l(
                   d,
                   null,
-                  c(y.options, (o) => (r(), i(e.NmorphSelectOption, h({
+                  h(p.options, (o) => (r(), i(e.NmorphSelectOption, m({
                     id: e.getOptionId(o.value),
                     key: o.value
                   }, { ref_for: !0 }, o, {
@@ -200,7 +201,7 @@ function E(p, v, y, e, M, R) {
                   128
                   /* KEYED_FRAGMENT */
                 )),
-                b(p.$slots, "default")
+                b(y.$slots, "default")
               ],
               64
               /* STABLE_FRAGMENT */
@@ -211,8 +212,8 @@ function E(p, v, y, e, M, R) {
         /* FORWARDED */
       }, 8, ["open", "relative-element", "fill-width", "width", "min-width", "z-index", "aria-label"])) : k("v-if", !0)
     ],
-    2
-    /* CLASS */
+    6
+    /* CLASS, STYLE */
   );
 }
 const B = /* @__PURE__ */ H(w, [["render", E], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-select/NmorphSelect.vue"]]);