ablok-components 0.3.58 → 0.3.59

package/dist/components/molecules/location-list/location-list.vue.js

@@ -0,0 +1,98 @@
+import { defineComponent as b, openBlock as s, createElementBlock as i, toDisplayString as o, createCommentVNode as u, Fragment as k, renderList as v, normalizeClass as C, createElementVNode as S } from "vue";
+const V = {
+  class: "location-list",
+  "data-testid": "location-list"
+}, $ = {
+  key: 0,
+  class: "location-list__label"
+}, D = {
+  key: 1,
+  class: "location-list__items"
+}, L = ["data-testid", "onClick"], N = { class: "location-list__title" }, w = {
+  key: 0,
+  class: "location-list__description"
+}, K = {
+  key: 1,
+  class: "location-list__distance"
+}, T = {
+  key: 2,
+  class: "location-list__empty"
+}, x = /* @__PURE__ */ b({
+  __name: "location-list",
+  props: {
+    modelValue: {
+      type: null,
+      default: null
+    },
+    locations: {
+      type: Array,
+      default: () => []
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    titleKey: {
+      type: String,
+      default: "title"
+    },
+    descriptionKey: {
+      type: String,
+      default: "address"
+    },
+    emptyText: {
+      type: String,
+      default: "No locations found."
+    },
+    showDistance: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  emits: ["update:modelValue", "select"],
+  setup(l, { emit: y }) {
+    const r = l, d = y;
+    function m(t) {
+      return t?.[r.titleKey] || t?.label || t?.name || "Location";
+    }
+    function _(t) {
+      return t?.[r.descriptionKey] || t?.description || t?.subtitle || "";
+    }
+    function a(t, n = 0) {
+      return t ? typeof t != "object" ? t : t.id ?? t.value ?? m(t) ?? n : n;
+    }
+    function f(t, n = 0) {
+      return `${a(t, n)}`.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+    }
+    function p(t, n = 0) {
+      return a(r.modelValue) === a(t, n);
+    }
+    function g(t) {
+      return Number.isFinite(t) ? t >= 1e3 ? `${(t / 1e3).toFixed(1)} km` : `${Math.round(t)} m` : "—";
+    }
+    function h(t) {
+      d("update:modelValue", t), d("select", t);
+    }
+    return (t, n) => (s(), i("div", V, [
+      l.label ? (s(), i("p", $, o(l.label), 1)) : u("", !0),
+      l.locations.length ? (s(), i("div", D, [
+        (s(!0), i(k, null, v(l.locations, (e, c) => (s(), i("button", {
+          key: a(e, c),
+          type: "button",
+          class: C(["location-list__item", {
+            "location-list__item--active": p(e, c)
+          }]),
+          "data-testid": `location-option-${f(e, c)}`,
+          onClick: (B) => h(e)
+        }, [
+          S("strong", N, o(m(e)), 1),
+          _(e) ? (s(), i("small", w, o(_(e)), 1)) : u("", !0),
+          l.showDistance && e?.distance !== void 0 && e?.distance !== null ? (s(), i("small", K, o(g(Number(e.distance))) + " away ", 1)) : u("", !0)
+        ], 10, L))), 128))
+      ])) : (s(), i("p", T, o(l.emptyText), 1))
+    ]));
+  }
+});
+export {
+  x as default
+};

package/dist/components/molecules/location-list/location-list.vue3.js

@@ -0,0 +1,5 @@
+import o from "./location-list.vue.js";
+/* empty css                   */
+export {
+  o as default
+};

package/dist/components/molecules/media-thumbnails/media-thumbnails.vue.js

@@ -0,0 +1,55 @@
+import { defineComponent as o, ref as u, openBlock as d, createElementBlock as r, createVNode as s, withCtx as _, createElementVNode as m, normalizeClass as f } from "vue";
+import h from "../../templates/base-carousel/base-carousel.vue.js";
+/* empty css                                               */
+import b from "../../atoms/base-image/base-image.vue.js";
+/* empty css                                     */
+const v = { class: "media-thumbnails" }, C = ["onClick", "title"], V = { class: "img-container" }, B = /* @__PURE__ */ o({
+  __name: "media-thumbnails",
+  props: {
+    modelValue: {
+      default: null
+    },
+    config: {
+      type: Object,
+      default: null
+    },
+    messages: {
+      type: Object,
+      default: {}
+    },
+    assets: {
+      type: Array,
+      default: []
+    }
+  },
+  emits: ["update:modelValue", "select"],
+  setup(i, { emit: n }) {
+    const l = n, a = u(-1);
+    function c(t) {
+      a.value = t, l("update:modelValue", t), l("select", t);
+    }
+    return (t, $) => (d(), r("div", v, [
+      s(h, { items: i.assets }, {
+        "carousel-item": _((e) => [
+          m("button", {
+            type: "button",
+            class: f(["carousel__item media-thumbnails__thumbnail", e.index === i.modelValue || e.index === a.value ? "is-active" : ""]),
+            onClick: (k) => c(e.index),
+            title: `${t.$t("thumbnails.thumbnail")} ${e.index + 1}`
+          }, [
+            m("div", V, [
+              s(b, {
+                src: e.item.thumbnail || e.item.src,
+                class: "img-fluid"
+              }, null, 8, ["src"])
+            ])
+          ], 10, C)
+        ]),
+        _: 1
+      }, 8, ["items"])
+    ]));
+  }
+});
+export {
+  B as default
+};

package/dist/components/molecules/media-thumbnails/media-thumbnails.vue3.js

@@ -0,0 +1,5 @@
+import o from "./media-thumbnails.vue.js";
+/* empty css                      */
+export {
+  o as default
+};

package/dist/components/molecules/popover-notifications/popover-notifications.vue.js

@@ -0,0 +1,135 @@
+import { defineComponent as B, ref as f, computed as I, watch as C, onMounted as S, onBeforeUnmount as V, openBlock as h, createElementBlock as T, normalizeClass as q, Fragment as z, renderList as H, createBlock as N, normalizeStyle as $, withCtx as E, renderSlot as L, createElementVNode as p, toDisplayString as U, withModifiers as R } from "vue";
+import j from "../../templates/popover-dialog/popover-dialog.vue.js";
+/* empty css                                                 */
+import { sanitizeHtml as A } from "../../../composables/useSanitize.js";
+const D = { class: "popover-notification__header d-flex justify-content-between mb-2" }, F = { class: "popover-notification__title" }, Q = ["onClick"], G = ["innerHTML"], J = 240, X = /* @__PURE__ */ B({
+  __name: "popover-notifications",
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: !1
+    },
+    id: {
+      type: String,
+      default: () => `popover-notifications-${Math.random().toString(36).substr(2, 9)}`
+    },
+    items: {
+      type: Array,
+      default: () => []
+    },
+    debounceItem: {
+      type: Number,
+      default: 0
+    },
+    closeTimeout: {
+      type: Number,
+      default: 8e3
+    },
+    collapsible: {
+      type: Boolean,
+      default: !0
+    },
+    collapseItems: {
+      type: Number,
+      default: 3
+    }
+  },
+  setup(y, { expose: g }) {
+    const l = y, n = f([]), i = f([]), u = f(null), s = /* @__PURE__ */ new Map(), b = I(
+      () => n.value.map((e) => ({
+        ...e,
+        content: A(e.content || "")
+      }))
+    ), c = f(!1), k = I(() => c.value ? [...b.value].reverse() : b.value);
+    function m(e, o) {
+      o === !1 && _(e);
+    }
+    function r(e) {
+      const o = s.get(e);
+      o && (clearTimeout(o), s.delete(e));
+    }
+    function w(e) {
+      const o = e.closeTimeout ?? l.closeTimeout;
+      r(e.id), o && s.set(e.id, window.setTimeout(() => {
+        r(e.id), _(e);
+      }, o));
+    }
+    function _(e) {
+      e.visible === !1 && s.has(e.id) || (r(e.id), e.visible = !1, s.set(e.id, window.setTimeout(() => {
+        n.value = n.value.filter((o) => o.id !== e.id), s.delete(e.id), n.value.length === 0 && (c.value = !1);
+      }, J)));
+    }
+    function x(e) {
+      if (l.collapsible && n.value.length >= l.collapseItems) {
+        const t = n.value.shift();
+        t && r(t.id);
+      }
+      l.collapsible && n.value.length + 1 >= l.collapseItems && (c.value = !0), n.value.forEach((t) => {
+        t.stackIndex = (t.stackIndex ?? 0) + 1;
+      });
+      const o = { ...e, closeTimeout: e.closeTimeout ?? l.closeTimeout, visible: !0, stackIndex: 0 };
+      n.value.push(o), w(o);
+    }
+    C(() => l.items, (e, o) => {
+      const t = e.filter((v) => !o.some((a) => a.id === v.id));
+      t.length && (i.value = [...i.value, ...t], d());
+    });
+    function d() {
+      u.value !== null || !i.value.length || (u.value = window.setTimeout(() => {
+        u.value = null;
+        const e = i.value.shift();
+        e && x(e), i.value.length > 0 && d();
+      }, n.value.length ? l.debounceItem : 0));
+    }
+    function M(e) {
+      i.value.push(e), d();
+    }
+    return S(() => {
+      i.value = [...l.items], l.collapsible && i.value.length >= l.collapseItems && (c.value = !0), d();
+    }), V(() => {
+      u.value !== null && clearTimeout(u.value);
+      for (const e of s.values())
+        clearTimeout(e);
+      s.clear();
+    }), g({
+      addItem: M
+    }), (e, o) => (h(), T("div", {
+      class: q(["popover-notifications", { "popover-notifications--stacked": c.value }])
+    }, [
+      (h(!0), T(z, null, H(k.value, (t, v) => (h(), N(j, {
+        key: t.id,
+        id: t.id,
+        "close-timeout": 0,
+        type: "manual",
+        class: "popover-notification",
+        modelValue: t.visible,
+        "onUpdate:modelValue": [(a) => t.visible = a, (a) => m(t, a)],
+        style: $({ "--stack-index": t.stackIndex ?? v })
+      }, {
+        default: E(() => [
+          L(e.$slots, "item", {
+            item: t,
+            removeItem: m
+          }, () => [
+            p("div", D, [
+              p("span", F, U(t.title), 1),
+              p("button", {
+                type: "button",
+                class: "btn btn-close p-0",
+                onClick: R((a) => m(t, !1), ["stop"]),
+                "aria-label": "Close notification"
+              }, null, 8, Q)
+            ]),
+            p("span", {
+              innerHTML: t.content
+            }, null, 8, G)
+          ])
+        ]),
+        _: 2
+      }, 1032, ["id", "modelValue", "onUpdate:modelValue", "style"]))), 128))
+    ], 2));
+  }
+});
+export {
+  X as default
+};

package/dist/components/molecules/popover-notifications/popover-notifications.vue3.js

@@ -0,0 +1,5 @@
+import o from "./popover-notifications.vue.js";
+/* empty css                           */
+export {
+  o as default
+};

package/dist/components/molecules/popover-tooltip/popover-tooltip.vue.js

@@ -0,0 +1,134 @@
+import { defineComponent as $, computed as V, ref as p, openBlock as n, createElementBlock as i, createElementVNode as l, renderSlot as d, createVNode as k, normalizeClass as S, withCtx as B, unref as f, createCommentVNode as u, toDisplayString as C } from "vue";
+import z from "../../templates/popover-dialog/popover-dialog.vue.js";
+/* empty css                                                 */
+import { useSanitize as m } from "../../../composables/useSanitize.js";
+const L = { class: "popover-tooltip" }, M = ["popovertarget", "disabled", "aria-describedby", "aria-label"], T = { class: "popover-tooltip__content d-flex flex-column" }, H = {
+  key: 0,
+  class: "popover-tooltip__header d-flex p-3 border-bottom"
+}, N = ["innerHTML"], D = { class: "popover-tooltip__body" }, x = ["innerHTML"], E = {
+  key: 1,
+  class: "popover-tooltip__footer d-flex p-3 border-top"
+}, j = /* @__PURE__ */ $({
+  __name: "popover-tooltip",
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: !1
+    },
+    id: {
+      type: String,
+      default: () => `popover-tooltip-${Math.random().toString(36).substr(2, 9)}`
+    },
+    size: {
+      type: String
+    },
+    exclusive: {
+      type: Boolean,
+      default: !0
+    },
+    header: {
+      type: Boolean,
+      default: !1
+    },
+    footer: {
+      type: Boolean,
+      default: !1
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    content: {
+      type: String,
+      default: ""
+    },
+    hover: {
+      type: Boolean,
+      default: !0
+    },
+    hoverDelay: {
+      type: Number,
+      default: 400
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    ariaLabel: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["update:modelValue", "confirm", "cancel"],
+  setup(e, { emit: c }) {
+    const r = e, v = c, b = m(() => r.title), y = m(() => r.content), a = V({
+      get() {
+        return r.modelValue;
+      },
+      set(t) {
+        v("update:modelValue", t);
+      }
+    }), g = p(), h = p();
+    return (t, o) => (n(), i("span", L, [
+      l("button", {
+        type: "button",
+        popovertarget: e.id,
+        disabled: e.disabled,
+        "aria-describedby": e.id,
+        "aria-label": e.ariaLabel || t.$te("common.moreInfo") ? t.$t("common.moreInfo") : void 0,
+        ref_key: "trigger",
+        ref: g
+      }, [
+        d(t.$slots, "button", {}, () => [
+          o[3] || (o[3] = l("span", { class: "popover-tooltip__trigger" }, " i ", -1))
+        ])
+      ], 8, M),
+      k(z, {
+        id: e.id,
+        modelValue: a.value,
+        "onUpdate:modelValue": o[2] || (o[2] = (s) => a.value = s),
+        hover: e.hover,
+        "hover-delay": e.hoverDelay,
+        ref_key: "dialog",
+        ref: h,
+        role: "tooltip",
+        class: S(e.size ? `popover-tooltip--${e.size}` : "")
+      }, {
+        default: B(() => [
+          l("div", T, [
+            e.header ? (n(), i("div", H, [
+              e.title ? (n(), i("h5", {
+                key: 0,
+                class: "popover-tooltip__title",
+                innerHTML: f(b)
+              }, null, 8, N)) : u("", !0),
+              l("button", {
+                type: "button",
+                class: "btn-close ms-auto border-radius-none",
+                "aria-label": "Close",
+                onClick: o[0] || (o[0] = (s) => a.value = !1)
+              })
+            ])) : u("", !0),
+            l("div", D, [
+              d(t.$slots, "default", {}, () => [
+                l("span", { innerHTML: f(y) }, null, 8, x)
+              ])
+            ]),
+            e.footer ? (n(), i("div", E, [
+              d(t.$slots, "footer"),
+              l("button", {
+                type: "button",
+                class: "btn ms-auto",
+                onClick: o[1] || (o[1] = (s) => a.value = !1)
+              }, C(t.$t("common.close")), 1)
+            ])) : u("", !0)
+          ])
+        ]),
+        _: 3
+      }, 8, ["id", "modelValue", "hover", "hover-delay", "class"])
+    ]));
+  }
+});
+export {
+  j as default
+};

package/dist/components/molecules/popover-tooltip/popover-tooltip.vue3.js

@@ -0,0 +1,5 @@
+import o from "./popover-tooltip.vue.js";
+/* empty css                     */
+export {
+  o as default
+};

package/dist/components/molecules/progress-steps/progress-steps.vue.js

@@ -0,0 +1,84 @@
+import { defineComponent as f, openBlock as o, createElementBlock as a, createElementVNode as l, Fragment as g, renderList as h, normalizeClass as b, renderSlot as n, unref as u } from "vue";
+import { sanitizeHtml as c } from "../../../composables/useSanitize.js";
+const _ = { class: "progress-steps" }, y = { class: "progress-steps__list" }, v = { class: "progress-step" }, k = ["checked", "id", "value", "disabled", "read-only", "required", "onChange"], $ = ["for"], H = ["innerHTML"], L = ["for"], V = ["innerHTML"], B = /* @__PURE__ */ f({
+  __name: "progress-steps",
+  props: {
+    modelValue: {
+      type: Number,
+      default: 0
+    },
+    progress: {
+      type: Number,
+      default: 0
+    },
+    steps: {
+      type: Array
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    reveal: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:modelValue", "update:progress"],
+  setup(s, { emit: p }) {
+    const i = s, d = p;
+    function m(r) {
+      d("update:modelValue", r), r >= i.progress && d("update:progress", r);
+    }
+    return (r, C) => (o(), a("div", _, [
+      l("ul", y, [
+        (o(!0), a(g, null, h(s.steps, (t, e) => (o(), a("li", {
+          key: e,
+          class: b(["progress-steps__step", {
+            "progress-steps__step--disabled": e > s.progress + (s.reveal ? 1 : 0),
+            "progress-steps__step--active": e === (s.modelValue || 0)
+          }])
+        }, [
+          n(r.$slots, "step", {}, () => [
+            l("div", v, [
+              l("input", {
+                type: "radio",
+                checked: e <= (s.progress || 0),
+                id: `step-${e}`,
+                name: "step",
+                class: "form-check-input",
+                value: t.value,
+                disabled: t.disabled || e > s.progress + (s.reveal ? 1 : 0),
+                "read-only": t.readOnly,
+                required: t.required,
+                onChange: (M) => m(e)
+              }, null, 40, k),
+              l("label", {
+                for: `step-${e}`
+              }, [
+                n(r.$slots, "button", { step: t }, () => [
+                  l("span", {
+                    class: "btn rounded-circle",
+                    innerHTML: u(c)(t.text || "")
+                  }, null, 8, H)
+                ])
+              ], 8, $),
+              l("label", {
+                for: `step-${e}`
+              }, [
+                n(r.$slots, "label", { step: t }, () => [
+                  l("span", {
+                    class: "form-check-label",
+                    innerHTML: u(c)(t.label || "")
+                  }, null, 8, V)
+                ])
+              ], 8, L)
+            ])
+          ])
+        ], 2))), 128))
+      ])
+    ]));
+  }
+});
+export {
+  B as default
+};

package/dist/components/molecules/progress-steps/progress-steps.vue3.js

@@ -0,0 +1,5 @@
+import o from "./progress-steps.vue.js";
+/* empty css                    */
+export {
+  o as default
+};

package/dist/components/molecules/qr-code/qr-code.vue.js

@@ -0,0 +1,103 @@
+import { defineComponent as p, ref as f, computed as m, watch as g, onMounted as y, openBlock as a, createElementBlock as i } from "vue";
+import l from "qr-code-styling";
+const w = { class: "qr-code" }, h = ["innerHTML"], C = /* @__PURE__ */ p({
+  __name: "qr-code",
+  props: {
+    data: null,
+    image: null,
+    download: {
+      type: Boolean,
+      default: !1
+    },
+    filename: {
+      type: String,
+      default: "qr-code"
+    }
+  },
+  emits: ["update:dataUrl"],
+  setup(s, { expose: c, emit: v }) {
+    const e = s, o = f(), t = m(() => ({
+      width: 300,
+      height: 300,
+      type: "canvas",
+      data: e.data,
+      ...e.image ? { image: e.image } : {},
+      margin: 10,
+      qrOptions: {
+        typeNumber: 0,
+        mode: "Byte",
+        errorCorrectionLevel: "Q"
+      },
+      imageOptions: {
+        hideBackgroundDots: !0,
+        imageSize: 0.4,
+        margin: 20,
+        crossOrigin: "anonymous"
+      },
+      dotsOptions: {
+        // color: '#21C8C8',
+        // gradient: {
+        //   type: 'linear', // 'radial'
+        //   rotation: 0,
+        //   colorStops: [{ offset: 0, color: '#8688B2' }, { offset: 1, color: '#77779C' }]
+        // },
+        type: "rounded"
+      },
+      backgroundOptions: {
+        color: "#ffffff"
+        // gradient: {
+        //   type: 'linear', // 'radial'
+        //   rotation: 0,
+        //   colorStops: [{ offset: 0, color: '#ededff' }, { offset: 1, color: '#e6e7ff' }]
+        // },
+      },
+      cornersSquareOptions: {
+        color: "#333333",
+        type: "extra-rounded"
+        // gradient: {
+        //   type: 'linear', // 'radial'
+        //   rotation: 180,
+        //   colorStops: [{ offset: 0, color: '#25456e' }, { offset: 1, color: '#4267b2' }]
+        // },
+      },
+      cornersDotOptions: {
+        color: "#333333",
+        type: "dot"
+        // gradient: {
+        //   type: 'linear', // 'radial'
+        //   rotation: 180,
+        //   colorStops: [{ offset: 0, color: '#00266e' }, { offset: 1, color: '#4060b3' }]
+        // },
+      }
+    }));
+    function r(n = null, u = null) {
+      typeof window < "u" && (o.value && (o.value.innerHTML = ""), new l(n || t.value).append(o.value));
+    }
+    function d() {
+      new l({
+        ...t.value,
+        width: 1200,
+        height: 1200
+      }).download({ name: e.filename, extension: "png" });
+    }
+    return g(() => t.value, r, { deep: !0, immediate: !0 }), y(() => {
+      typeof window < "u" && r();
+    }), c({
+      download: d
+    }), (n, u) => (a(), i("div", w, [
+      e.download ? (a(), i("button", {
+        key: 0,
+        class: "btn btn-outline-contrast mb-3",
+        onClick: d,
+        innerHTML: n.$t("qrlink.download")
+      }, null, 8, h)) : (a(), i("div", {
+        key: 1,
+        ref_key: "canvas",
+        ref: o
+      }, null, 512))
+    ]));
+  }
+});
+export {
+  C as default
+};

package/dist/components/molecules/qr-code/qr-code.vue3.js

@@ -0,0 +1,5 @@
+import o from "./qr-code.vue.js";
+/* empty css             */
+export {
+  o as default
+};