@rypen-dev/shared-components 8.1.9 → 8.1.10

package/dist/index.js

@@ -1,4 +1,4 @@
-import { computed as E, createElementBlock as d, openBlock as u, createTextVNode as P, createCommentVNode as C, toDisplayString as b, Fragment as N, createElementVNode as e, unref as X, normalizeClass as M, ref as I, withKeys as _, onBeforeMount as he, onMounted as G, watch as O, withDirectives as z, vModelText as oe, renderList as R, renderSlot as q, useSlots as ve, createBlock as ee, Transition as Ae, withCtx as j, createVNode as F, reactive as U, normalizeStyle as K, resolveDirective as te, nextTick as pe } from "vue";
+import { computed as E, createElementBlock as d, openBlock as u, createTextVNode as P, createCommentVNode as C, toDisplayString as b, Fragment as N, createElementVNode as e, unref as X, normalizeClass as k, ref as I, withKeys as _, onBeforeMount as he, onMounted as G, watch as O, withDirectives as z, vModelText as oe, renderList as R, renderSlot as q, useSlots as ve, createBlock as ee, Transition as Ae, withCtx as j, createVNode as F, reactive as U, normalizeStyle as K, resolveDirective as te, nextTick as pe } from "vue";
 import le from "moment";
 var Z = { exports: {} }, ne;
 function ye() {
@@ -73,9 +73,9 @@ function ye() {
           return arguments.length > 1 && arguments[1] !== void 0 && arguments[1] ? /^[ABCEGHJKLMNPRSTVXYabceghjklmnprstvxy]{1}\d{1}[A-Za-z]{1}\d{1}[A-Za-z]{1}\d{1}$/.test(i) : /^[0-9]{5}$/.test(i);
         }, y = function(i) {
           return /^[0-9]{10}$/.test(i);
-        }, k = /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/, h = /^[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/;
+        }, M = /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/, h = /^[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/;
         s.empty = o, s.validEmail = g, s.validZip = A, s.validPhone = y, s.validUrl = function(i) {
-          return arguments.length > 1 && arguments[1] !== void 0 && !arguments[1] ? h.test(i) : k.test(i);
+          return arguments.length > 1 && arguments[1] !== void 0 && !arguments[1] ? h.test(i) : M.test(i);
         }, s.validCardNumber = function(i) {
           return function(p) {
             if (!/^[\d\-\s]+$/.test(p)) return !1;
@@ -106,11 +106,11 @@ function ye() {
           return new Promise(function(f, g) {
             var A = document.scrollingElement;
             typeof a == "string" && (a = document.querySelector(a) || g()), typeof a != "number" && (a = a.getBoundingClientRect().top + A.scrollTop), a += o;
-            var y = A.scrollTop, k = a - y, h = 0;
+            var y = A.scrollTop, M = a - y, h = 0;
             (function i() {
               var p = function(x, S, w, m) {
                 return (x /= m / 2) < 1 ? w / 2 * x * x + S : -w / 2 * (--x * (x - 2) - 1) + S;
-              }(h += 20, y, k, r);
+              }(h += 20, y, M, r);
               A.scrollTop = p, h < r ? setTimeout(i, 20) : f();
             })();
           });
@@ -176,8 +176,8 @@ function ye() {
           var f = !(arguments.length > 2 && arguments[2] !== void 0) || arguments[2], g = a(r, o);
           if (g) {
             var A = g.split("_"), y = "";
-            return f ? A.forEach(function(k, h) {
-              y = y + (h === 0 ? "" : " ") + k.charAt(0).toUpperCase() + k.slice(1).toLowerCase();
+            return f ? A.forEach(function(M, h) {
+              y = y + (h === 0 ? "" : " ") + M.charAt(0).toUpperCase() + M.slice(1).toLowerCase();
             }) : y = A.join(" "), y;
           }
           return "";
@@ -289,7 +289,7 @@ const xe = /* @__PURE__ */ JSON.parse(`[{"name":"United States","code":"US"},{"n
   setup(t) {
     return (c, n) => (u(), d("svg", Be, [
       e("g", {
-        class: M(["error-icon", { on: t.on }])
+        class: k(["error-icon", { on: t.on }])
       }, n[0] || (n[0] = [
         e("path", {
           class: "path outline",
@@ -350,7 +350,7 @@ const xe = /* @__PURE__ */ JSON.parse(`[{"name":"United States","code":"US"},{"n
     return c({
       triggerBlur: g
     }), (A, y) => (u(), d("div", {
-      class: M(["input-container date", t.cssClass])
+      class: k(["input-container date", t.cssClass])
     }, [
       e("input", {
         type: "date",
@@ -393,7 +393,7 @@ const xe = /* @__PURE__ */ JSON.parse(`[{"name":"United States","code":"US"},{"n
       s.value = "", l("change", "");
     }
     return (g, A) => (u(), d("div", {
-      class: M(["input-container", t.cssClass])
+      class: k(["input-container", t.cssClass])
     }, [
       e("input", {
         type: "text",
@@ -462,7 +462,7 @@ const xe = /* @__PURE__ */ JSON.parse(`[{"name":"United States","code":"US"},{"n
     he(() => {
       l.image && l.image.ImageUrl && (o.value = l.imageBasePath + l.image.ImageUrl), r.value = new FileReader(), r.value.addEventListener("load", w);
     }), G(() => {
-      a.value = k(), a.value && g.value && (["drag", "drop"].forEach((m) => {
+      a.value = M(), a.value && g.value && (["drag", "drop"].forEach((m) => {
         g.value.addEventListener(m, (v) => {
           v.preventDefault(), v.stopPropagation();
         });
@@ -476,7 +476,7 @@ const xe = /* @__PURE__ */ JSON.parse(`[{"name":"United States","code":"US"},{"n
         });
       }), g.value.addEventListener("drop", h));
     });
-    function k() {
+    function M() {
       const m = document.createElement("div");
       return ("draggable" in m || "ondragstart" in m && "ondrop" in m) && "FormData" in window && "FileReader" in window;
     }
@@ -516,10 +516,10 @@ const xe = /* @__PURE__ */ JSON.parse(`[{"name":"United States","code":"US"},{"n
         ]))) : C("", !0)
       ])) : C("", !0),
       e("div", {
-        class: M(["file-upload-drop", y.value])
+        class: k(["file-upload-drop", y.value])
       }, [
         e("div", {
-          class: M(["drop-target", { over: f.value }]),
+          class: k(["drop-target", { over: f.value }]),
           ref_key: "droptargetref",
           ref: g
         }, [
@@ -592,7 +592,7 @@ const xe = /* @__PURE__ */ JSON.parse(`[{"name":"United States","code":"US"},{"n
       n.file && (a.value = n.assetBasePath + n.file), s.value = new FileReader(), s.value.addEventListener("load", g);
     });
     function o(y) {
-      const { value: k, files: h } = y.target;
+      const { value: M, files: h } = y.target;
       h[0] && (f(h[0]), l("change", h[0]));
     }
     function f(y) {
@@ -602,15 +602,15 @@ const xe = /* @__PURE__ */ JSON.parse(`[{"name":"United States","code":"US"},{"n
       a.value = s.value.result;
     }
     const A = E(() => (n.disabled || n.updating ? "disabled" : "") + " " + (n.cssClass || ""));
-    return (y, k) => (u(), d("span", Re, [
+    return (y, M) => (u(), d("span", Re, [
       t.showFilePath && t.file ? (u(), d("span", Te, [
-        k[0] || (k[0] = e("i", { class: "fa-regular fa-circle-check" }, null, -1)),
+        M[0] || (M[0] = e("i", { class: "fa-regular fa-circle-check" }, null, -1)),
         P(" " + b(t.file.name), 1)
       ])) : C("", !0),
       e("span", Ve, [
         e("label", {
           for: t.id,
-          class: M(["button", A.value])
+          class: k(["button", A.value])
         }, b(t.text), 11, Fe),
         e("input", {
           type: "file",
@@ -692,9 +692,9 @@ const xe = /* @__PURE__ */ JSON.parse(`[{"name":"United States","code":"US"},{"n
   emits: ["search", "select", "enter"],
   setup(t, { expose: c, emit: n }) {
     const l = t, s = n, a = I(""), r = I(""), o = I(!1), f = I(null), g = I(null), A = E(() => r.value && r.value.length >= l.minimumLength && o.value && (!l.loading || l.suggestions.length > 0)), y = W.debounce((m) => {
-      r.value = m, k();
+      r.value = m, M();
     });
-    function k() {
+    function M() {
       const m = l.useExternalValue ? l.externalValue : a.value;
       (m.length === 0 || m.length >= l.minimumLength) && s("search", m);
     }
@@ -726,10 +726,10 @@ const xe = /* @__PURE__ */ JSON.parse(`[{"name":"United States","code":"US"},{"n
     }, { immediate: !0 }), c({
       focusInput: p
     }), (m, v) => (u(), d("div", {
-      class: M(["lookup-container", { small: t.small }])
+      class: k(["lookup-container", { small: t.small }])
     }, [
       e("div", {
-        class: M(["input-container", { loading: t.loading, suggestions: A.value, small: t.small, error: t.invalid }])
+        class: k(["input-container", { loading: t.loading, suggestions: A.value, small: t.small, error: t.invalid }])
       }, [
         t.useExternalValue ? (u(), d("input", {
           key: 0,
@@ -782,7 +782,7 @@ const xe = /* @__PURE__ */ JSON.parse(`[{"name":"United States","code":"US"},{"n
   },
   setup(t) {
     return (c, n) => (u(), d("div", {
-      class: M(["generic-loader", t.cssClass])
+      class: k(["generic-loader", t.cssClass])
     }, n[0] || (n[0] = [
       e("span", null, null, -1)
     ]), 2));
@@ -888,11 +888,11 @@ const tt = /* @__PURE__ */ Q(Xe, [["render", et]]), at = { class: "modal-wrapper
     return (o, f) => (u(), ee(Ae, { name: "modal" }, {
       default: j(() => [
         e("div", {
-          class: M(["modal-mask hide-for-print", t.maskCssClass]),
+          class: k(["modal-mask hide-for-print", t.maskCssClass]),
           onClick: r
         }, [
           e("div", {
-            class: M(["modal-container", t.cssClass])
+            class: k(["modal-container", t.cssClass])
           }, [
             t.closeable ? (u(), d("a", {
               key: 0,
@@ -913,7 +913,7 @@ const tt = /* @__PURE__ */ Q(Xe, [["render", et]]), at = { class: "modal-wrapper
             ])) : C("", !0),
             e("div", at, [
               e("div", {
-                class: M(["modal-grid", { "with-footer": a.value }])
+                class: k(["modal-grid", { "with-footer": a.value }])
               }, [
                 e("div", nt, [
                   e("div", rt, [
@@ -974,7 +974,8 @@ const tt = /* @__PURE__ */ Q(Xe, [["render", et]]), at = { class: "modal-wrapper
     emitOnInput: {
       type: Boolean,
       default: !1
-    }
+    },
+    cssClass: String
   },
   emits: ["change"],
   setup(t, { emit: c }) {
@@ -992,7 +993,7 @@ const tt = /* @__PURE__ */ Q(Xe, [["render", et]]), at = { class: "modal-wrapper
       const v = m.clipboardData || window.clipboardData;
       v && !n.test(v.getData("text")) && m.preventDefault();
     }
-    function k(m) {
+    function M(m) {
       const { key: v } = m;
       v === "ArrowUp" ? x() : v === "ArrowDown" ? S() : v === "Enter" ? a.value.blur() : l.enforceNumbersOnly && v.length === 1 && !m.ctrlKey && !m.shiftKey && isNaN(v) && m.preventDefault();
     }
@@ -1028,12 +1029,13 @@ const tt = /* @__PURE__ */ Q(Xe, [["render", et]]), at = { class: "modal-wrapper
       inputmode: "numeric",
       ref_key: "inputref",
       ref: a,
-      onKeydown: k,
+      onKeydown: M,
       onInput: f,
       onBlur: g,
       onFocus: A,
-      onPaste: y
-    }, null, 40, it));
+      onPaste: y,
+      class: k(t.cssClass)
+    }, null, 42, it));
   }
 }, dt = { class: "pagination" }, gt = { key: 1 }, mt = { key: 0 }, ft = ["onClick"], ht = {
   key: 0,
@@ -1081,7 +1083,7 @@ const tt = /* @__PURE__ */ Q(Xe, [["render", et]]), at = { class: "modal-wrapper
     function y(h) {
       h !== n.pageIndex && (l("navigate", h), l("top"));
     }
-    function k() {
+    function M() {
       if (s.splice(0), a.value = !1, r.splice(0), f.value = !1, o.splice(0), n.totalPages > 0)
         if (n.totalPages > n.maxVisiblePages) {
           let h = 0;
@@ -1095,11 +1097,11 @@ const tt = /* @__PURE__ */ Q(Xe, [["render", et]]), at = { class: "modal-wrapper
             r.push(h);
     }
     return O(() => n.loading, (h, i) => {
-      !h && i && k();
+      !h && i && M();
     }), (h, i) => (u(), d("nav", null, [
       e("ul", dt, [
         e("li", {
-          class: M(["pagination-previous", { disabled: !t.hasPreviousPage }])
+          class: k(["pagination-previous", { disabled: !t.hasPreviousPage }])
         }, [
           t.hasPreviousPage ? (u(), d("a", {
             key: 0,
@@ -1112,7 +1114,7 @@ const tt = /* @__PURE__ */ Q(Xe, [["render", et]]), at = { class: "modal-wrapper
         ], 2),
         t.totalPages > 0 ? (u(), d(N, { key: 0 }, [
           (u(!0), d(N, null, R(s, (p) => (u(), d("li", {
-            class: M({ current: p === t.pageIndex })
+            class: k({ current: p === t.pageIndex })
           }, [
             p === t.pageIndex ? (u(), d("span", mt, b(p + 1), 1)) : (u(), d("a", {
               key: 1,
@@ -1121,7 +1123,7 @@ const tt = /* @__PURE__ */ Q(Xe, [["render", et]]), at = { class: "modal-wrapper
           ], 2))), 256)),
           a.value ? (u(), d("li", ht)) : C("", !0),
           (u(!0), d(N, null, R(r, (p) => (u(), d("li", {
-            class: M({ current: p === t.pageIndex })
+            class: k({ current: p === t.pageIndex })
           }, [
             p === t.pageIndex ? (u(), d("span", vt, b(p + 1), 1)) : (u(), d("a", {
               key: 1,
@@ -1130,7 +1132,7 @@ const tt = /* @__PURE__ */ Q(Xe, [["render", et]]), at = { class: "modal-wrapper
           ], 2))), 256)),
           f.value ? (u(), d("li", pt)) : C("", !0),
           (u(!0), d(N, null, R(o, (p) => (u(), d("li", {
-            class: M({ current: p === t.pageIndex })
+            class: k({ current: p === t.pageIndex })
           }, [
             p === t.pageIndex ? (u(), d("span", yt, b(p + 1), 1)) : (u(), d("a", {
               key: 1,
@@ -1141,7 +1143,7 @@ const tt = /* @__PURE__ */ Q(Xe, [["render", et]]), at = { class: "modal-wrapper
           e("span", { class: "disabled" }, "1", -1)
         ]))),
         e("li", {
-          class: M(["pagination-next", { disabled: !t.hasNextPage }])
+          class: k(["pagination-next", { disabled: !t.hasNextPage }])
         }, [
           t.hasNextPage ? (u(), d("a", {
             key: 0,
@@ -1224,12 +1226,12 @@ const re = /* @__PURE__ */ Q(Ct, [["render", St]]), Bt = { class: "image-selecto
       return n.selectedImage && (n.variant && n.variant.ImageUrl === D || n.product && n.product.PrimaryImage && n.product.PrimaryImage.ImageUrl === D);
     });
     function A() {
-      k(-1);
+      M(-1);
     }
     function y() {
-      k(1);
+      M(1);
     }
-    function k(D) {
+    function M(D) {
       let T = s.value + D;
       T < 0 ? T = 0 : T > x.value && (T = x.value), s.value = T;
     }
@@ -1242,7 +1244,7 @@ const re = /* @__PURE__ */ Q(Ct, [["render", St]]), Bt = { class: "image-selecto
       e("div", kt, [
         e("div", Mt, [
           e("div", {
-            class: M(["image-container", { empty: t.showEmpty && t.selectedImage === "" }]),
+            class: k(["image-container", { empty: t.showEmpty && t.selectedImage === "" }]),
             style: K(m.value)
           }, [
             ge.value ? (u(), d("small", Et, "*Image may not be representative of actual product with options currently selected")) : C("", !0)
@@ -1269,10 +1271,10 @@ const re = /* @__PURE__ */ Q(Ct, [["render", St]]), Bt = { class: "image-selecto
           })
         ], 8, Pt)) : C("", !0),
         e("div", {
-          class: M(["image-nav-list", B.value])
+          class: k(["image-nav-list", B.value])
         }, [
           e("a", {
-            class: M(["variant-image", { current: g.value }]),
+            class: k(["variant-image", { current: g.value }]),
             onClick: f,
             style: K(H.value)
           }, [
@@ -1283,7 +1285,7 @@ const re = /* @__PURE__ */ Q(Ct, [["render", St]]), Bt = { class: "image-selecto
           ], 6),
           t.product ? (u(), d(N, { key: 0 }, [
             (u(!0), d(N, null, R(t.product.AdditionalImages, (V, me) => (u(), d("a", {
-              class: M({ current: r(V) }),
+              class: k({ current: r(V) }),
               onClick: (fe) => o(V),
               style: K(H.value)
             }, [
@@ -1293,7 +1295,7 @@ const re = /* @__PURE__ */ Q(Ct, [["render", St]]), Bt = { class: "image-selecto
               }, null, 8, Rt)
             ], 14, Lt))), 256)),
             (u(!0), d(N, null, R(t.product.LifeStyleImages, (V, me) => (u(), d("a", {
-              class: M({ current: r(V) }),
+              class: k({ current: r(V) }),
               onClick: (fe) => o(V),
               style: K(H.value)
             }, [
@@ -1381,7 +1383,7 @@ const re = /* @__PURE__ */ Q(Ct, [["render", St]]), Bt = { class: "image-selecto
         w = l.options.slice();
       f.splice(0), f.push(...w);
     }
-    function k(w) {
+    function M(w) {
       w.value = w, s("update", w), g.value && g.value.blur(), o.value = !1;
     }
     function h() {
@@ -1416,7 +1418,7 @@ const re = /* @__PURE__ */ Q(Ct, [["render", St]]), Bt = { class: "image-selecto
       tabindex: "0"
     }, [
       e("div", {
-        class: M(["input-container select false-select", S.value])
+        class: k(["input-container select false-select", S.value])
       }, [
         e("span", Qt, b(a.value ? a.value.Name : "Select"), 1),
         e("div", Yt, [
@@ -1447,8 +1449,8 @@ const re = /* @__PURE__ */ Q(Ct, [["render", St]]), Bt = { class: "image-selecto
             (u(!0), d(N, null, R(f, (v) => (u(), d("a", {
               key: v.Id,
               role: "option",
-              class: M(["option", { active: a.value && a.value.Id === v.Id }]),
-              onClick: (B) => k(v)
+              class: k(["option", { active: a.value && a.value.Id === v.Id }]),
+              onClick: (B) => M(v)
             }, b(v.Name), 11, Jt))), 128))
           ], 8, Gt)
         ])
@@ -1513,12 +1515,12 @@ const re = /* @__PURE__ */ Q(Ct, [["render", St]]), Bt = { class: "image-selecto
     }
     const g = I(0);
     function A() {
-      k(h.value);
+      M(h.value);
     }
     function y() {
-      k(i.value);
+      M(i.value);
     }
-    function k(x) {
+    function M(x) {
       o(), g.value = x, l("change", x), a();
     }
     const h = E(() => g.value === 0 ? n.slides.length - 1 : g.value - 1), i = E(() => g.value === n.slides.length - 1 ? 0 : g.value + 1);
@@ -1529,14 +1531,14 @@ const re = /* @__PURE__ */ Q(Ct, [["render", St]]), Bt = { class: "image-selecto
       const w = te("touch"), m = te("touch-options");
       return t.slides.length > 1 ? (u(), d("div", {
         key: 0,
-        class: M(["slideshow", { small: t.small }]),
+        class: k(["slideshow", { small: t.small }]),
         onMouseover: o,
         onMouseout: a
       }, [
         e("div", qt, [
           z((u(), d("div", null, [
             (u(!0), d(N, null, R(t.slides, (v, B) => (u(), d("div", {
-              class: M(["slide", { current: B == g.value, prev: B === h.value, next: B === i.value }]),
+              class: k(["slide", { current: B == g.value, prev: B === h.value, next: B === i.value }]),
               style: K(p(v))
             }, null, 6))), 256))
           ])), [
@@ -1568,8 +1570,8 @@ const re = /* @__PURE__ */ Q(Ct, [["render", St]]), Bt = { class: "image-selecto
         e("nav", jt, [
           (u(!0), d(N, null, R(t.slides, (v, B) => (u(), d("a", {
             "aria-label": B,
-            class: M({ current: B == g.value }),
-            onClick: (H) => k(B)
+            class: k({ current: B == g.value }),
+            onClick: (H) => M(B)
           }, null, 10, Wt))), 256))
         ])
       ], 34)) : (u(), d("div", zt, [
@@ -1612,7 +1614,7 @@ const re = /* @__PURE__ */ Q(Ct, [["render", St]]), Bt = { class: "image-selecto
     return O(() => n.value, (r) => {
       r !== s.value && (s.value = r);
     }, { immediate: !0 }), (r, o) => (u(), d("div", {
-      class: M(["switch", t.cssClass])
+      class: k(["switch", t.cssClass])
     }, [
       e("input", {
         id: t.id,
@@ -1649,7 +1651,7 @@ const re = /* @__PURE__ */ Q(Ct, [["render", St]]), Bt = { class: "image-selecto
   setup(t) {
     return (c, n) => (u(), d("svg", Xt, [
       e("g", {
-        class: M(["success-icon", { on: t.on }])
+        class: k(["success-icon", { on: t.on }])
       }, n[0] || (n[0] = [
         e("path", {
           class: "path circle",
@@ -1705,9 +1707,9 @@ const re = /* @__PURE__ */ Q(Ct, [["render", St]]), Bt = { class: "image-selecto
       f(h, y);
     }
     function y() {
-      s("update", k.value, l.name);
+      s("update", M.value, l.name);
     }
-    const k = E(() => {
+    const M = E(() => {
       let h = a.value;
       return r.value === n.WEEKS ? h = h * 7 : r.value === n.YEARS && (h = h * 365), h;
     });