@leaflink/stash 50.10.0 → 50.12.0

package/dist/DataViewToolbar.js

@@ -1,17 +1,18 @@
-import { defineComponent as M, inject as $, ref as j, computed as k, onBeforeMount as U, openBlock as o, createElementBlock as s, normalizeClass as W, unref as e, createElementVNode as y, createBlock as F, createCommentVNode as n, renderSlot as J, toDisplayString as K, Fragment as L, createVNode as r, withCtx as x } from "vue";
-import { t as S } from "./locale.js";
-import _ from "./Button.js";
-import O from "./Checkbox.js";
+import { defineComponent as $, inject as j, ref as M, computed as U, onBeforeMount as W, openBlock as a, createElementBlock as l, normalizeClass as F, unref as e, createElementVNode as h, createBlock as J, createCommentVNode as s, renderSlot as K, toDisplayString as L, Fragment as O, createVNode as i, withCtx as v } from "vue";
+import { u as q } from "./usePaginationStats-d_q39naC.js";
+import { t as n } from "./locale.js";
+import x from "./Button.js";
+import G from "./Checkbox.js";
 import "lodash-es/cloneDeep";
-import C from "./Icon.js";
-import { D as B } from "./DataView.keys-C7eaZg2G.js";
-const q = { class: "tw-flex tw-place-items-center" }, G = { class: "tw-flex tw-items-center tw-gap-x-2 lg:tw-gap-x-6" }, H = {
+import k from "./Icon.js";
+import { D as y } from "./DataView.keys-aSOnA4AD.js";
+const H = { class: "tw-flex tw-place-items-center" }, Q = { class: "tw-flex tw-items-center tw-gap-x-2 lg:tw-gap-x-6" }, X = {
   key: 0,
   class: "tw-flex tw-items-center"
-}, Q = {
+}, Y = {
   key: 0,
   class: "tw-mr-1.5"
-}, le = /* @__PURE__ */ M({
+}, ne = /* @__PURE__ */ $({
   __name: "DataViewToolbar",
   props: {
     allRowsSelected: { type: Boolean, default: !1 },
@@ -21,96 +22,96 @@ const q = { class: "tw-flex tw-place-items-center" }, G = { class: "tw-flex tw-i
     hasTabsAbove: { type: Boolean, default: !1 }
   },
   emits: ["select"],
-  setup(E, { emit: P }) {
-    const t = E, V = P, {
-      isWithinModule: d,
+  setup(S, { emit: _ }) {
+    const t = S, C = _, {
+      isWithinModule: r,
       variant: m,
       density: p,
-      currentPage: l,
+      currentPage: d,
       hasToolbar: w,
-      isPaginationEnabled: N,
-      isSelectable: R,
+      isPaginateNextDisabled: B,
+      isPaginationEnabled: P,
+      isSelectable: E,
       pageCount: f,
-      pageSize: v,
-      totalDataCount: b,
-      goPrevPage: T,
-      goNextPage: z,
-      isEmpty: A,
-      isLoading: D
-    } = $(B.key, B.defaults), h = j(0), i = k(() => t.radius ? t.radius : d.value ? "none" : m.value === "table" ? t.hasTabsAbove ? "rounded-top-right" : "rounded-top" : "rounded"), I = k(() => {
-      const u = v.value * (l.value - 1) + 1, a = Math.min(v.value * l.value, b.value), c = b.value;
-      return S("ll.pageStats", { from: u, to: a, total: c });
-    });
+      pageSize: N,
+      totalDataCount: V,
+      goPrevPage: D,
+      goNextPage: R,
+      isEmpty: T,
+      isLoading: u
+    } = j(y.key, y.defaults), b = M(0), c = U(() => t.radius ? t.radius : r.value ? "none" : m.value === "table" ? t.hasTabsAbove ? "rounded-top-right" : "rounded-top" : "rounded"), z = q({ currentPage: d, pageSize: N, totalItems: V });
     function g() {
-      V("select"), h.value++;
+      C("select"), b.value++;
     }
-    return U(() => {
+    return W(() => {
       w && (w.value = !0);
-    }), (u, a) => (o(), s("div", {
-      class: W(["stash-data-view-toolbar tw-flex tw-min-h-15 tw-items-center tw-justify-between tw-bg-white tw-py-1.5 tw-shadow", {
-        "tw-border-t tw-border-ice-200": e(d),
-        "tw-rounded-tr": i.value === "rounded-top-right",
-        "tw-rounded": i.value === "rounded",
-        "tw-rounded-t": i.value === "rounded-top",
-        "tw-mb-3": e(m) !== "table" && !e(d),
+    }), (A, o) => (a(), l("div", {
+      class: F(["stash-data-view-toolbar tw-flex tw-min-h-15 tw-items-center tw-justify-between tw-bg-white tw-py-1.5 tw-shadow", {
+        "tw-border-t tw-border-ice-200": e(r),
+        "tw-rounded-tr": c.value === "rounded-top-right",
+        "tw-rounded": c.value === "rounded",
+        "tw-rounded-t": c.value === "rounded-top",
+        "tw-mb-3": e(m) !== "table" && !e(r),
         "tw-px-0": e(p) === "compact",
         "lg:tw-px-3": e(p) === "comfortable"
       }]),
       "data-test": "stash-data-view-toolbar"
     }, [
-      y("div", q, [
-        e(R) && !e(A) ? (o(), F(O, {
-          key: h.value,
+      h("div", H, [
+        e(E) && !e(T) ? (a(), J(G, {
+          key: b.value,
           checked: t.allRowsSelected,
           indeterminate: t.someRowsSelected && !t.allRowsSelected,
-          title: e(S)("ll.selectAll"),
-          disabled: e(D),
+          title: e(n)("ll.selectAll"),
+          disabled: e(u),
           "onUpdate:indeterminate": g,
           "onUpdate:checked": g
-        }, null, 8, ["checked", "indeterminate", "title", "disabled"])) : n("", !0),
-        y("div", G, [
-          J(u.$slots, "default")
+        }, null, 8, ["checked", "indeterminate", "title", "disabled"])) : s("", !0),
+        h("div", Q, [
+          K(A.$slots, "default")
         ])
       ]),
-      e(N) ? (o(), s("div", H, [
-        t.hidePageStats ? n("", !0) : (o(), s("span", Q, K(I.value), 1)),
-        e(f) > 1 ? (o(), s(L, { key: 1 }, [
-          r(_, {
+      e(P) ? (a(), l("div", X, [
+        t.hidePageStats ? s("", !0) : (a(), l("span", Y, L(e(n)("ll.pageStats", e(z))), 1)),
+        e(f) > 1 ? (a(), l(O, { key: 1 }, [
+          i(x, {
             icon: "",
+            "aria-label": e(n)("ll.previous"),
             class: "tw-size-9 tw-p-1.5",
             "data-test": "button|prev-page",
-            disabled: e(l) === 1,
-            onClick: a[0] || (a[0] = (c) => e(T)({ shouldEmit: !0 }))
+            disabled: e(u) || e(d) === 1,
+            onClick: o[0] || (o[0] = (I) => e(D)({ shouldEmit: !0 }))
           }, {
-            default: x(() => [
-              r(C, {
+            default: v(() => [
+              i(k, {
                 name: "chevron-left",
                 size: "dense"
               })
             ]),
             _: 1
-          }, 8, ["disabled"]),
-          r(_, {
+          }, 8, ["aria-label", "disabled"]),
+          i(x, {
             icon: "",
+            "aria-label": e(n)("ll.next"),
             class: "tw-h-9 tw-w-9 tw-p-1.5",
             "data-test": "button|next-page",
-            disabled: e(l) === e(f),
-            onClick: a[1] || (a[1] = (c) => e(z)({ shouldEmit: !0 }))
+            disabled: e(u) || e(B) || e(d) === e(f),
+            onClick: o[1] || (o[1] = (I) => e(R)({ shouldEmit: !0 }))
           }, {
-            default: x(() => [
-              r(C, {
+            default: v(() => [
+              i(k, {
                 name: "chevron-right",
                 size: "dense"
               })
             ]),
             _: 1
-          }, 8, ["disabled"])
-        ], 64)) : n("", !0)
-      ])) : n("", !0)
+          }, 8, ["aria-label", "disabled"])
+        ], 64)) : s("", !0)
+      ])) : s("", !0)
     ], 2));
   }
 });
 export {
-  le as default
+  ne as default
 };
 //# sourceMappingURL=DataViewToolbar.js.map

package/dist/DataViewToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataViewToolbar.js","sources":["../src/components/DataViewToolbar/DataViewToolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, inject, onBeforeMount, ref } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Checkbox from '../Checkbox/Checkbox.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import Icon from '../Icon/Icon.vue';\n  import { ToolbarRadiuses } from './DataViewToolbar.types';\n\n  export interface DataViewToolbarProps {\n    /**\n     * When DataView has `variant=\"table\"` and Table has `is-selectable` enabled, it provides a way to flag\n     * a checkbox whenever all rows are selected, just like the standalone version on TableHeaderRow.\n     */\n    allRowsSelected?: boolean;\n\n    /**\n     * Hides the page statistics (ex: \"1 - 12 of 20\") in the toolbar\n     */\n    hidePageStats?: boolean;\n\n    /**\n     * Controls the corners of DataViewToolbar with the \"border-radius\" CSS property. The default value is \"rounded\".\n     */\n    radius?: ToolbarRadiuses;\n\n    /**\n     * When DataView has variant=\"table\" and Table has `is-selectable` enabled, it provides a way to flag\n     * a checkbox whenever one or more, but not all rows are selected, just like the standalone\n     * version on TableHeaderRow.\n     */\n    someRowsSelected?: boolean;\n\n    /**\n     * When DataView has tabs above it, we need to remove the top left rounded corner\n     */\n    hasTabsAbove?: boolean;\n  }\n\n  const props = withDefaults(defineProps<DataViewToolbarProps>(), {\n    allRowsSelected: false,\n    hidePageStats: false,\n    radius: undefined,\n    someRowsSelected: false,\n    hasTabsAbove: false,\n  });\n\n  const emit = defineEmits<{\n    (e: 'select'): void;\n  }>();\n\n  const {\n    isWithinModule,\n    variant: dataViewVariant,\n    density,\n    currentPage,\n    hasToolbar,\n    isPaginationEnabled,\n    isSelectable,\n    pageCount,\n    pageSize,\n    totalDataCount,\n    goPrevPage,\n    goNextPage,\n    isEmpty,\n    isLoading,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const checkboxKey = ref(0);\n\n  const computedRadius = computed<ToolbarRadiuses>(() => {\n    if (props.radius) {\n      return props.radius;\n    }\n\n    if (isWithinModule.value) {\n      return 'none';\n    }\n\n    if (dataViewVariant.value === 'table') {\n      if (props.hasTabsAbove) {\n        return 'rounded-top-right';\n      }\n\n      return 'rounded-top';\n    }\n\n    return 'rounded';\n  });\n\n  // #region pagination\n  const pageStats = computed(() => {\n    const from = pageSize.value * (currentPage.value - 1) + 1;\n    const to = Math.min(pageSize.value * currentPage.value, totalDataCount.value);\n    const total = totalDataCount.value;\n\n    return t('ll.pageStats', { from, to, total });\n  });\n  // #endregion pagination\n\n  function onSelect() {\n    emit('select');\n\n    /**\n     * In Vue (as of this writing), if a user checks a native checkbox but the v-model is `false` and does not change from `false`, then the checkbox will display as checked even though the v-model is still `false`.\n     * Forcing a re-render with a `key` change allows the checkbox to stay unchecked if its v-model is still `false` and its v-model not been changed.\n     * To verify that this is necessary, test the \"select all\" checkbox in the SelectionWithSomeDisabled story in Table.story.ts with and without the `key` attribute.\n     */\n    checkboxKey.value++;\n  }\n\n  onBeforeMount(() => {\n    if (hasToolbar) {\n      hasToolbar.value = true;\n    }\n  });\n</script>\n\n<template>\n  <div\n    class=\"stash-data-view-toolbar tw-flex tw-min-h-15 tw-items-center tw-justify-between tw-bg-white tw-py-1.5 tw-shadow\"\n    :class=\"{\n      'tw-border-t tw-border-ice-200': isWithinModule,\n      'tw-rounded-tr': computedRadius === 'rounded-top-right',\n      'tw-rounded': computedRadius === 'rounded',\n      'tw-rounded-t': computedRadius === 'rounded-top',\n      'tw-mb-3': dataViewVariant !== 'table' && !isWithinModule,\n      'tw-px-0': density === 'compact',\n      'lg:tw-px-3': density === 'comfortable',\n    }\"\n    data-test=\"stash-data-view-toolbar\"\n  >\n    <div class=\"tw-flex tw-place-items-center\">\n      <Checkbox\n        v-if=\"isSelectable && !isEmpty\"\n        :key=\"checkboxKey\"\n        :checked=\"props.allRowsSelected\"\n        :indeterminate=\"props.someRowsSelected && !props.allRowsSelected\"\n        :title=\"t('ll.selectAll')\"\n        :disabled=\"isLoading\"\n        @update:indeterminate=\"onSelect\"\n        @update:checked=\"onSelect\"\n      />\n      <div class=\"tw-flex tw-items-center tw-gap-x-2 lg:tw-gap-x-6\">\n        <!-- @slot default -->\n        <slot></slot>\n      </div>\n    </div>\n\n    <!-- Pagination -->\n    <div v-if=\"isPaginationEnabled\" class=\"tw-flex tw-items-center\">\n      <span v-if=\"!props.hidePageStats\" class=\"tw-mr-1.5\">\n        {{ pageStats }}\n      </span>\n      <template v-if=\"pageCount > 1\">\n        <Button\n          icon\n          class=\"tw-size-9 tw-p-1.5\"\n          data-test=\"button|prev-page\"\n          :disabled=\"currentPage === 1\"\n          @click=\"goPrevPage({ shouldEmit: true })\"\n        >\n          <Icon name=\"chevron-left\" size=\"dense\" />\n        </Button>\n        <Button\n          icon\n          class=\"tw-h-9 tw-w-9 tw-p-1.5\"\n          data-test=\"button|next-page\"\n          :disabled=\"currentPage === pageCount\"\n          @click=\"goNextPage({ shouldEmit: true })\"\n        >\n          <Icon name=\"chevron-right\" size=\"dense\" />\n        </Button>\n      </template>\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","isWithinModule","dataViewVariant","density","currentPage","hasToolbar","isPaginationEnabled","isSelectable","pageCount","pageSize","totalDataCount","goPrevPage","goNextPage","isEmpty","isLoading","inject","DATA_VIEW_INJECTION","checkboxKey","ref","computedRadius","computed","pageStats","from","to","total","t","onSelect","onBeforeMount"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAwCE,UAAMA,IAAQC,GAQRC,IAAOC,GAIP;AAAA,MACJ,gBAAAC;AAAA,MACA,SAASC;AAAA,MACT,SAAAC;AAAA,MACA,aAAAC;AAAA,MACA,YAAAC;AAAA,MACA,qBAAAC;AAAA,MACA,cAAAC;AAAA,MACA,WAAAC;AAAA,MACA,UAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,MACA,SAAAC;AAAA,MACA,WAAAC;AAAA,IACE,IAAAC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ,GAE1DC,IAAcC,EAAI,CAAC,GAEnBC,IAAiBC,EAA0B,MAC3CvB,EAAM,SACDA,EAAM,SAGXI,EAAe,QACV,SAGLC,EAAgB,UAAU,UACxBL,EAAM,eACD,sBAGF,gBAGF,SACR,GAGKwB,IAAYD,EAAS,MAAM;AAC/B,YAAME,IAAOb,EAAS,SAASL,EAAY,QAAQ,KAAK,GAClDmB,IAAK,KAAK,IAAId,EAAS,QAAQL,EAAY,OAAOM,EAAe,KAAK,GACtEc,IAAQd,EAAe;AAE7B,aAAOe,EAAE,gBAAgB,EAAE,MAAAH,GAAM,IAAAC,GAAI,OAAAC,GAAO;AAAA,IAAA,CAC7C;AAGD,aAASE,IAAW;AAClB,MAAA3B,EAAK,QAAQ,GAODkB,EAAA;AAAA,IAAA;AAGd,WAAAU,EAAc,MAAM;AAClB,MAAItB,MACFA,EAAW,QAAQ;AAAA,IACrB,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DataViewToolbar.js","sources":["../src/components/DataViewToolbar/DataViewToolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, inject, onBeforeMount, ref } from 'vue';\n\n  import usePaginationStats from '../../composables/usePaginationStats/usePaginationStats';\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Checkbox from '../Checkbox/Checkbox.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import Icon from '../Icon/Icon.vue';\n  import { ToolbarRadiuses } from './DataViewToolbar.types';\n\n  export interface DataViewToolbarProps {\n    /**\n     * When DataView has `variant=\"table\"` and Table has `is-selectable` enabled, it provides a way to flag\n     * a checkbox whenever all rows are selected, just like the standalone version on TableHeaderRow.\n     */\n    allRowsSelected?: boolean;\n\n    /**\n     * Hides the page statistics (ex: \"1 - 12 of 20\") in the toolbar\n     */\n    hidePageStats?: boolean;\n\n    /**\n     * Controls the corners of DataViewToolbar with the \"border-radius\" CSS property. The default value is \"rounded\".\n     */\n    radius?: ToolbarRadiuses;\n\n    /**\n     * When DataView has variant=\"table\" and Table has `is-selectable` enabled, it provides a way to flag\n     * a checkbox whenever one or more, but not all rows are selected, just like the standalone\n     * version on TableHeaderRow.\n     */\n    someRowsSelected?: boolean;\n\n    /**\n     * When DataView has tabs above it, we need to remove the top left rounded corner\n     */\n    hasTabsAbove?: boolean;\n  }\n\n  const props = withDefaults(defineProps<DataViewToolbarProps>(), {\n    allRowsSelected: false,\n    hidePageStats: false,\n    radius: undefined,\n    someRowsSelected: false,\n    hasTabsAbove: false,\n  });\n\n  const emit = defineEmits<{\n    (e: 'select'): void;\n  }>();\n\n  const {\n    isWithinModule,\n    variant: dataViewVariant,\n    density,\n    currentPage,\n    hasToolbar,\n    isPaginateNextDisabled,\n    isPaginationEnabled,\n    isSelectable,\n    pageCount,\n    pageSize,\n    totalDataCount,\n    goPrevPage,\n    goNextPage,\n    isEmpty,\n    isLoading,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const checkboxKey = ref(0);\n\n  const computedRadius = computed<ToolbarRadiuses>(() => {\n    if (props.radius) {\n      return props.radius;\n    }\n\n    if (isWithinModule.value) {\n      return 'none';\n    }\n\n    if (dataViewVariant.value === 'table') {\n      if (props.hasTabsAbove) {\n        return 'rounded-top-right';\n      }\n\n      return 'rounded-top';\n    }\n\n    return 'rounded';\n  });\n\n  const pageStats = usePaginationStats({ currentPage, pageSize, totalItems: totalDataCount });\n\n  function onSelect() {\n    emit('select');\n\n    /**\n     * In Vue (as of this writing), if a user checks a native checkbox but the v-model is `false` and does not change from `false`, then the checkbox will display as checked even though the v-model is still `false`.\n     * Forcing a re-render with a `key` change allows the checkbox to stay unchecked if its v-model is still `false` and its v-model not been changed.\n     * To verify that this is necessary, test the \"select all\" checkbox in the SelectionWithSomeDisabled story in Table.story.ts with and without the `key` attribute.\n     */\n    checkboxKey.value++;\n  }\n\n  onBeforeMount(() => {\n    if (hasToolbar) {\n      hasToolbar.value = true;\n    }\n  });\n</script>\n\n<template>\n  <div\n    class=\"stash-data-view-toolbar tw-flex tw-min-h-15 tw-items-center tw-justify-between tw-bg-white tw-py-1.5 tw-shadow\"\n    :class=\"{\n      'tw-border-t tw-border-ice-200': isWithinModule,\n      'tw-rounded-tr': computedRadius === 'rounded-top-right',\n      'tw-rounded': computedRadius === 'rounded',\n      'tw-rounded-t': computedRadius === 'rounded-top',\n      'tw-mb-3': dataViewVariant !== 'table' && !isWithinModule,\n      'tw-px-0': density === 'compact',\n      'lg:tw-px-3': density === 'comfortable',\n    }\"\n    data-test=\"stash-data-view-toolbar\"\n  >\n    <div class=\"tw-flex tw-place-items-center\">\n      <Checkbox\n        v-if=\"isSelectable && !isEmpty\"\n        :key=\"checkboxKey\"\n        :checked=\"props.allRowsSelected\"\n        :indeterminate=\"props.someRowsSelected && !props.allRowsSelected\"\n        :title=\"t('ll.selectAll')\"\n        :disabled=\"isLoading\"\n        @update:indeterminate=\"onSelect\"\n        @update:checked=\"onSelect\"\n      />\n      <div class=\"tw-flex tw-items-center tw-gap-x-2 lg:tw-gap-x-6\">\n        <!-- @slot default -->\n        <slot></slot>\n      </div>\n    </div>\n\n    <!-- Pagination -->\n    <div v-if=\"isPaginationEnabled\" class=\"tw-flex tw-items-center\">\n      <span v-if=\"!props.hidePageStats\" class=\"tw-mr-1.5\">\n        {{ t('ll.pageStats', pageStats) }}\n      </span>\n      <template v-if=\"pageCount > 1\">\n        <Button\n          icon\n          :aria-label=\"t('ll.previous')\"\n          class=\"tw-size-9 tw-p-1.5\"\n          data-test=\"button|prev-page\"\n          :disabled=\"isLoading || currentPage === 1\"\n          @click=\"goPrevPage({ shouldEmit: true })\"\n        >\n          <Icon name=\"chevron-left\" size=\"dense\" />\n        </Button>\n        <Button\n          icon\n          :aria-label=\"t('ll.next')\"\n          class=\"tw-h-9 tw-w-9 tw-p-1.5\"\n          data-test=\"button|next-page\"\n          :disabled=\"isLoading || isPaginateNextDisabled || currentPage === pageCount\"\n          @click=\"goNextPage({ shouldEmit: true })\"\n        >\n          <Icon name=\"chevron-right\" size=\"dense\" />\n        </Button>\n      </template>\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","isWithinModule","dataViewVariant","density","currentPage","hasToolbar","isPaginateNextDisabled","isPaginationEnabled","isSelectable","pageCount","pageSize","totalDataCount","goPrevPage","goNextPage","isEmpty","isLoading","inject","DATA_VIEW_INJECTION","checkboxKey","ref","computedRadius","computed","pageStats","usePaginationStats","onSelect","onBeforeMount"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAyCE,UAAMA,IAAQC,GAQRC,IAAOC,GAIP;AAAA,MACJ,gBAAAC;AAAA,MACA,SAASC;AAAA,MACT,SAAAC;AAAA,MACA,aAAAC;AAAA,MACA,YAAAC;AAAA,MACA,wBAAAC;AAAA,MACA,qBAAAC;AAAA,MACA,cAAAC;AAAA,MACA,WAAAC;AAAA,MACA,UAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,MACA,SAAAC;AAAA,MACA,WAAAC;AAAA,IACE,IAAAC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ,GAE1DC,IAAcC,EAAI,CAAC,GAEnBC,IAAiBC,EAA0B,MAC3CxB,EAAM,SACDA,EAAM,SAGXI,EAAe,QACV,SAGLC,EAAgB,UAAU,UACxBL,EAAM,eACD,sBAGF,gBAGF,SACR,GAEKyB,IAAYC,EAAmB,EAAE,aAAAnB,GAAa,UAAAM,GAAU,YAAYC,GAAgB;AAE1F,aAASa,IAAW;AAClB,MAAAzB,EAAK,QAAQ,GAODmB,EAAA;AAAA,IAAA;AAGd,WAAAO,EAAc,MAAM;AAClB,MAAIpB,MACFA,EAAW,QAAQ;AAAA,IACrB,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Dropdown.js

@@ -1,5 +1,5 @@
 import { defineComponent as I, ref as r, useCssModule as q, watch as C, onMounted as K, onBeforeUnmount as R, computed as U, withDirectives as _, openBlock as m, createElementBlock as k, renderSlot as x, createElementVNode as E, normalizeClass as b, createTextVNode as V, toDisplayString as W, createVNode as S, createBlock as Y, Transition as F, withCtx as j, unref as M, normalizeStyle as G, vShow as H, nextTick as A } from "vue";
-import { KEY_CODES as d } from "./constants.js";
+import { KEY_CODES as f } from "./constants.js";
 import J from "./directives/clickoutside.js";
 import Q from "./utils/calculateElementOverflow.js";
 import { getMountPoint as X } from "./utils/helpers.js";
@@ -22,7 +22,7 @@ const ee = ["aria-expanded"], te = {
   },
   emits: ["toggle", "dismiss"],
   setup(D, { expose: $, emit: L }) {
-    const a = D, p = L, t = r(null), w = r(null), f = [], s = r(f), i = r(-1), l = r(!1), g = r({}), T = q();
+    const a = D, p = L, t = r(null), w = r(null), d = [], s = r(d), i = r(-1), l = r(!1), g = r({}), T = q();
     C(l, (e) => {
       e || (i.value = -1), p("toggle", e);
     }), C(i, (e, o) => {
@@ -33,7 +33,7 @@ const ee = ["aria-expanded"], te = {
         const c = X();
         t.value && c.appendChild(t.value);
       }
-      (e = t.value) != null && e.querySelector(".stash-menu") ? s.value = ((o = t.value) == null ? void 0 : o.querySelectorAll(".stash-menu-item")) ?? f : s.value = ((n = t.value) == null ? void 0 : n.querySelectorAll(".dropdown__item")) ?? f, window.addEventListener("resize", () => u());
+      (e = t.value) != null && e.querySelector(".stash-menu") ? s.value = ((o = t.value) == null ? void 0 : o.querySelectorAll(".stash-menu-item")) ?? d : s.value = ((n = t.value) == null ? void 0 : n.querySelectorAll(".dropdown__item")) ?? d, window.addEventListener("resize", () => u());
     }), R(() => {
       var e, o;
       window.removeEventListener("resize", () => u()), (o = (e = t == null ? void 0 : t.value) == null ? void 0 : e.parentNode) == null || o.removeChild(t.value);
@@ -50,14 +50,14 @@ const ee = ["aria-expanded"], te = {
       l.value ? l.value = !1 : (l.value = !0, await z(), (e = t.value) == null || e.focus());
     }
     function N(e) {
-      if (e.keyCode === d.ESCAPE)
+      if (e.keyCode === f.ESCAPE)
         u();
-      else if (e.keyCode === d.DOWN && i.value < s.value.length - 1)
-        l.value && i.value++;
-      else if (e.keyCode === d.UP && i.value > -1)
-        l.value && i.value--;
-      else if (e.keyCode === d.ENTER && i.value !== -1)
-        l.value && s[i.value].click();
+      else if (e.keyCode === f.DOWN && i.value < s.value.length - 1 && l.value)
+        i.value++;
+      else if (e.keyCode === f.UP && i.value > -1 && l.value)
+        i.value--;
+      else if (e.keyCode === f.ENTER && i.value !== -1 && l.value)
+        s[i.value].click();
       else
         return;
       e.preventDefault();

package/dist/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../src/components/Dropdown/Dropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, nextTick, onBeforeUnmount, onMounted, ref, useCssModule, watch } from 'vue';\n\n  import { KEY_CODES } from '../../constants';\n  import vClickoutside from '../../directives/clickoutside/clickoutside';\n  import calculateElementOverflow from '../../utils/calculateElementOverflow';\n  import { getMountPoint } from '../../utils/helpers';\n  import Icon from '../Icon/Icon.vue';\n\n  export type DropdownOffset = {\n    x?: number;\n    y?: number;\n  };\n\n  export interface DropdownProps {\n    /**\n     * Used to position the dropdown relative to target\n     * Options: left, right\n     */\n    align?: 'left' | 'right';\n    /**\n     * When passed, text with caret is displayed instead of default kebab menu.\n     */\n    label?: string;\n    /**\n     * If true, dropdown will remain open when clicking on its content. Otherwise, it'll close automatically on click.\n     */\n    closeManually?: boolean;\n    /**\n     * Used to horizontally and vertically offset the dropdown in pixels\n     * Keep in mind, `x` value is relative to `align` value.\n     */\n    offset?: DropdownOffset;\n    /**\n     * If `reattach` is true, the contents will be mounted in the mount point container,\n     * so as to circumvent clipping issues from a parent's overflow property.\n     */\n    reattach?: boolean;\n    /**\n     * Custom class to apply to the default dropdown content element\n     */\n    contentClass?: string | string[];\n    /**\n     * Removes content container's max width\n     */\n    fluidContent?: boolean;\n  }\n\n  type DropdownStyles = {\n    left?: string;\n    right?: string;\n    top?: string;\n  };\n\n  defineOptions({\n    name: 'll-dropdown',\n  });\n\n  const props = withDefaults(defineProps<DropdownProps>(), {\n    align: 'right',\n    label: '',\n    closeManually: false,\n    offset: () => ({}),\n    reattach: true,\n    contentClass: '',\n    fluidContent: false,\n  });\n\n  const emit = defineEmits<{\n    toggle: [isActive: boolean];\n    dismiss: [];\n  }>();\n\n  const contentRef = ref<HTMLElement | null>(null);\n  const dropdownRef = ref<HTMLDivElement | null>(null);\n\n  const DEFAULT_ITEMS_LIST = [] as unknown as NodeListOf<Element>;\n\n  const items = ref<NodeListOf<Element>>(DEFAULT_ITEMS_LIST);\n  const itemIndex = ref(-1);\n  const isActive = ref(false);\n\n  const styles = ref<DropdownStyles>({});\n  const classes = useCssModule();\n\n  watch(isActive, (val) => {\n    if (!val) {\n      itemIndex.value = -1;\n    }\n\n    emit('toggle', val);\n  });\n\n  watch(itemIndex, (next, prev) => {\n    next in items.value && items.value[next].classList.add('tw-bg-ice-200');\n    prev in items.value && items.value[prev].classList.remove('tw-bg-ice-200');\n  });\n\n  onMounted(() => {\n    if (props.reattach) {\n      const target = getMountPoint();\n\n      contentRef.value && target.appendChild(contentRef.value);\n    }\n\n    // if stash-menu exists, use it's items\n    if (contentRef.value?.querySelector('.stash-menu')) {\n      items.value = contentRef.value?.querySelectorAll('.stash-menu-item') ?? DEFAULT_ITEMS_LIST;\n    } else {\n      items.value = contentRef.value?.querySelectorAll('.dropdown__item') ?? DEFAULT_ITEMS_LIST;\n    }\n\n    // avoid calling dismiss with ResizeEvent because it's target is the Window element and it's not a valid Node element to be passed to dismiss\n    window.addEventListener('resize', () => dismiss());\n  });\n\n  onBeforeUnmount(() => {\n    window.removeEventListener('resize', () => dismiss());\n    contentRef?.value?.parentNode?.removeChild(contentRef.value);\n  });\n\n  /**\n   * Dismisses the Dropdown.\n   */\n  function dismiss(event?: Event) {\n    if (\n      props.closeManually &&\n      (contentRef.value?.contains(event?.target as HTMLElement) || contentRef.value === event?.target)\n    ) {\n      return;\n    }\n\n    const wasOpen = isActive.value;\n\n    isActive.value = false;\n\n    if (wasOpen) {\n      emit('dismiss');\n    }\n  }\n\n  /**\n   * Opens or closes the Dropdown. If opening, positions and focuses its content.\n   */\n  async function toggle() {\n    if (isActive.value) {\n      isActive.value = false;\n    } else {\n      isActive.value = true;\n      await calculateOffset();\n      contentRef.value?.focus();\n    }\n  }\n\n  /**\n   * Handles all user keyboard input on the Dropdown.\n   * @param {KeyboardEvent} e The native keydown event.\n   */\n  function onKeyDown(e: KeyboardEvent) {\n    if (e.keyCode === KEY_CODES.ESCAPE) {\n      dismiss();\n    } else if (e.keyCode === KEY_CODES.DOWN && itemIndex.value < items.value.length - 1) {\n      isActive.value && itemIndex.value++;\n    } else if (e.keyCode === KEY_CODES.UP && itemIndex.value > -1) {\n      isActive.value && itemIndex.value--;\n    } else if (e.keyCode === KEY_CODES.ENTER && itemIndex.value !== -1) {\n      isActive.value && items[itemIndex.value].click();\n    } else {\n      return;\n    }\n\n    e.preventDefault(); // if keyDown did something / we didn't return\n  }\n\n  /**\n   * Reset any page overflow offset\n   */\n  function resetOffset() {\n    contentRef.value?.style.setProperty('--offset', '0');\n  }\n\n  /**\n   * Calculate the position for the Dropdown content element,\n   * relative to the viewport.\n   * Repositions the dropdown content element (& arrow)\n   * if it overflows the page (including gutter).\n   */\n  async function calculateOffset() {\n    await nextTick();\n\n    const toggleBCR = dropdownRef.value?.getBoundingClientRect() || ({} as DOMRect);\n    const top = toggleBCR.top + toggleBCR.height;\n    const offset = {\n      x: 0,\n      y: 0,\n      ...props.offset,\n    };\n\n    if (props.reattach) {\n      styles.value = {\n        left: props.align === 'left' ? `${Math.round(toggleBCR.left) + offset.x}px` : undefined,\n        right:\n          props.align === 'right'\n            ? `${document.documentElement.clientWidth - Math.round(toggleBCR.right) + offset.x}px`\n            : undefined,\n        top: `${window.scrollY + top + offset.y}px`,\n      };\n      await nextTick(); // wait for style updates to sync in the DOM\n    }\n\n    const overflow = calculateElementOverflow(contentRef?.value);\n\n    if (overflow) {\n      const direction = props.align === 'left' ? '-' : '';\n      contentRef.value?.style.setProperty('--offset', `${direction}${overflow.value}`);\n    }\n  }\n\n  defineExpose({\n    isActive: computed(() => isActive.value),\n    toggle,\n    dismiss,\n  });\n</script>\n\n<template>\n  <div\n    ref=\"dropdownRef\"\n    v-clickoutside=\"dismiss\"\n    class=\"tw-relative tw-inline-block\"\n    data-test=\"ll-dropdown\"\n    @keydown=\"onKeyDown\"\n  >\n    <!-- @slot Toggle component slot, receives `toggle` method to trigger Dropdown display -->\n    <slot name=\"toggle\" :is-active=\"isActive\" :toggle=\"toggle\">\n      <button\n        data-test=\"button|toggle\"\n        :aria-expanded=\"isActive\"\n        :class=\"[label ? 'tw-min-w-auto tw-outline-none' : 'tw-rounded tw-p-3']\"\n        @click=\"toggle\"\n      >\n        <span v-if=\"label\" class=\"tw-flex tw-items-center tw-font-medium tw-text-blue-500 hover:tw-text-blue-700\">\n          {{ label }}\n          <Icon name=\"caret-down\" />\n        </span>\n        <Icon v-else name=\"ellipsis\" />\n      </button>\n    </slot>\n\n    <transition name=\"fade\" @after-leave=\"resetOffset\">\n      <div\n        v-show=\"isActive\"\n        ref=\"contentRef\"\n        data-test=\"ll-dropdown-content\"\n        :class=\"[\n          classes.content,\n          contentClass,\n          {\n            'tw-left-0 after:tw-left-6': props.align === 'left',\n            'tw-right-0': props.align === 'right',\n            'tw-max-w-[360px]': !props.fluidContent,\n          },\n        ]\"\n        :style=\"styles\"\n      >\n        <!-- @slot Dropdown content slot. Receives `dismiss` method, to trigger manual close. You must call dismiss with parentheses. Receives `is-active` prop.  -->\n        <slot :dismiss=\"dismiss\" :is-active=\"isActive\"></slot>\n      </div>\n    </transition>\n  </div>\n</template>\n\n<style module>\n  .content {\n    --offset: 0;\n\n    @apply tw-shadow-2xl\n      tw-bg-white\n      tw-border\n      tw-border-solid\n      tw-border-blue-500\n      tw-rounded\n      tw-absolute\n      tw-z-[301]\n      tw-min-w-[200px];\n\n    transform: translateX(calc(var(--offset) * 1px));\n  }\n\n  /**\n  * TODO: these global styles should be componentized in https://leaflink.atlassian.net/browse/STASH-566\n  */\n  :global(.dropdown__list) {\n    @apply tw-bg-white tw-list-none tw-m-1.5 tw-p-0;\n  }\n\n  :global(.dropdown__item) {\n    @apply tw-block tw-mx-0 tw-mt-0 tw-mb-1.5 tw-w-full first:tw-mt-0 last:tw-mb-0;\n  }\n\n  :global(.dropdown__item) button {\n    @apply tw-border-none tw-text-left tw-p-1.5;\n  }\n\n  :global(.dropdown__item) :where(a, button) {\n    @apply tw-rounded\n    tw-text-ice-700\n      tw-block\n      tw-py-[10px]\n      tw-px-1.5\n      tw-w-full\n      disabled:tw-text-ice-500\n      disabled:tw-cursor-default\n      hover:tw-bg-ice-200\n      hover:tw-text-ice-700\n      hover:tw-no-underline\n      tw-transition-all\n      tw-duration-fast\n      tw-ease-swing;\n  }\n</style>\n"],"names":["props","__props","emit","__emit","contentRef","ref","dropdownRef","DEFAULT_ITEMS_LIST","items","itemIndex","isActive","styles","classes","useCssModule","watch","val","next","prev","onMounted","target","getMountPoint","_a","_b","_c","dismiss","onBeforeUnmount","event","wasOpen","toggle","calculateOffset","onKeyDown","KEY_CODES","resetOffset","nextTick","toggleBCR","top","offset","overflow","calculateElementOverflow","direction","__expose","computed"],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","sources":["../src/components/Dropdown/Dropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, nextTick, onBeforeUnmount, onMounted, ref, useCssModule, watch } from 'vue';\n\n  import { KEY_CODES } from '../../constants';\n  import vClickoutside from '../../directives/clickoutside/clickoutside';\n  import calculateElementOverflow from '../../utils/calculateElementOverflow';\n  import { getMountPoint } from '../../utils/helpers';\n  import Icon from '../Icon/Icon.vue';\n\n  export type DropdownOffset = {\n    x?: number;\n    y?: number;\n  };\n\n  export interface DropdownProps {\n    /**\n     * Used to position the dropdown relative to target\n     * Options: left, right\n     */\n    align?: 'left' | 'right';\n    /**\n     * When passed, text with caret is displayed instead of default kebab menu.\n     */\n    label?: string;\n    /**\n     * If true, dropdown will remain open when clicking on its content. Otherwise, it'll close automatically on click.\n     */\n    closeManually?: boolean;\n    /**\n     * Used to horizontally and vertically offset the dropdown in pixels\n     * Keep in mind, `x` value is relative to `align` value.\n     */\n    offset?: DropdownOffset;\n    /**\n     * If `reattach` is true, the contents will be mounted in the mount point container,\n     * so as to circumvent clipping issues from a parent's overflow property.\n     */\n    reattach?: boolean;\n    /**\n     * Custom class to apply to the default dropdown content element\n     */\n    contentClass?: string | string[];\n    /**\n     * Removes content container's max width\n     */\n    fluidContent?: boolean;\n  }\n\n  type DropdownStyles = {\n    left?: string;\n    right?: string;\n    top?: string;\n  };\n\n  defineOptions({\n    name: 'll-dropdown',\n  });\n\n  const props = withDefaults(defineProps<DropdownProps>(), {\n    align: 'right',\n    label: '',\n    closeManually: false,\n    offset: () => ({}),\n    reattach: true,\n    contentClass: '',\n    fluidContent: false,\n  });\n\n  const emit = defineEmits<{\n    toggle: [isActive: boolean];\n    dismiss: [];\n  }>();\n\n  const contentRef = ref<HTMLElement | null>(null);\n  const dropdownRef = ref<HTMLDivElement | null>(null);\n\n  const DEFAULT_ITEMS_LIST = [] as unknown as NodeListOf<Element>;\n\n  const items = ref<NodeListOf<Element>>(DEFAULT_ITEMS_LIST);\n  const itemIndex = ref(-1);\n  const isActive = ref(false);\n\n  const styles = ref<DropdownStyles>({});\n  const classes = useCssModule();\n\n  watch(isActive, (val) => {\n    if (!val) {\n      itemIndex.value = -1;\n    }\n\n    emit('toggle', val);\n  });\n\n  watch(itemIndex, (next, prev) => {\n    if (next in items.value) {\n      items.value[next].classList.add('tw-bg-ice-200');\n    }\n    if (prev in items.value) {\n      items.value[prev].classList.remove('tw-bg-ice-200');\n    }\n  });\n\n  onMounted(() => {\n    if (props.reattach) {\n      const target = getMountPoint();\n\n      if (contentRef.value) {\n        target.appendChild(contentRef.value);\n      }\n    }\n\n    // if stash-menu exists, use it's items\n    if (contentRef.value?.querySelector('.stash-menu')) {\n      items.value = contentRef.value?.querySelectorAll('.stash-menu-item') ?? DEFAULT_ITEMS_LIST;\n    } else {\n      items.value = contentRef.value?.querySelectorAll('.dropdown__item') ?? DEFAULT_ITEMS_LIST;\n    }\n\n    // avoid calling dismiss with ResizeEvent because it's target is the Window element and it's not a valid Node element to be passed to dismiss\n    window.addEventListener('resize', () => dismiss());\n  });\n\n  onBeforeUnmount(() => {\n    window.removeEventListener('resize', () => dismiss());\n    contentRef?.value?.parentNode?.removeChild(contentRef.value);\n  });\n\n  /**\n   * Dismisses the Dropdown.\n   */\n  function dismiss(event?: Event) {\n    if (\n      props.closeManually &&\n      (contentRef.value?.contains(event?.target as HTMLElement) || contentRef.value === event?.target)\n    ) {\n      return;\n    }\n\n    const wasOpen = isActive.value;\n\n    isActive.value = false;\n\n    if (wasOpen) {\n      emit('dismiss');\n    }\n  }\n\n  /**\n   * Opens or closes the Dropdown. If opening, positions and focuses its content.\n   */\n  async function toggle() {\n    if (isActive.value) {\n      isActive.value = false;\n    } else {\n      isActive.value = true;\n      await calculateOffset();\n      contentRef.value?.focus();\n    }\n  }\n\n  /**\n   * Handles all user keyboard input on the Dropdown.\n   * @param {KeyboardEvent} e The native keydown event.\n   */\n  function onKeyDown(e: KeyboardEvent) {\n    if (e.keyCode === KEY_CODES.ESCAPE) {\n      dismiss();\n    } else if (e.keyCode === KEY_CODES.DOWN && itemIndex.value < items.value.length - 1 && isActive.value) {\n      itemIndex.value++;\n    } else if (e.keyCode === KEY_CODES.UP && itemIndex.value > -1 && isActive.value) {\n      itemIndex.value--;\n    } else if (e.keyCode === KEY_CODES.ENTER && itemIndex.value !== -1 && isActive.value) {\n      items[itemIndex.value].click();\n    } else {\n      return;\n    }\n\n    e.preventDefault(); // if keyDown did something / we didn't return\n  }\n\n  /**\n   * Reset any page overflow offset\n   */\n  function resetOffset() {\n    contentRef.value?.style.setProperty('--offset', '0');\n  }\n\n  /**\n   * Calculate the position for the Dropdown content element,\n   * relative to the viewport.\n   * Repositions the dropdown content element (& arrow)\n   * if it overflows the page (including gutter).\n   */\n  async function calculateOffset() {\n    await nextTick();\n\n    const toggleBCR = dropdownRef.value?.getBoundingClientRect() || ({} as DOMRect);\n    const top = toggleBCR.top + toggleBCR.height;\n    const offset = {\n      x: 0,\n      y: 0,\n      ...props.offset,\n    };\n\n    if (props.reattach) {\n      styles.value = {\n        left: props.align === 'left' ? `${Math.round(toggleBCR.left) + offset.x}px` : undefined,\n        right:\n          props.align === 'right'\n            ? `${document.documentElement.clientWidth - Math.round(toggleBCR.right) + offset.x}px`\n            : undefined,\n        top: `${window.scrollY + top + offset.y}px`,\n      };\n      await nextTick(); // wait for style updates to sync in the DOM\n    }\n\n    const overflow = calculateElementOverflow(contentRef?.value);\n\n    if (overflow) {\n      const direction = props.align === 'left' ? '-' : '';\n      contentRef.value?.style.setProperty('--offset', `${direction}${overflow.value}`);\n    }\n  }\n\n  defineExpose({\n    isActive: computed(() => isActive.value),\n    toggle,\n    dismiss,\n  });\n</script>\n\n<template>\n  <div\n    ref=\"dropdownRef\"\n    v-clickoutside=\"dismiss\"\n    class=\"tw-relative tw-inline-block\"\n    data-test=\"ll-dropdown\"\n    @keydown=\"onKeyDown\"\n  >\n    <!-- @slot Toggle component slot, receives `toggle` method to trigger Dropdown display -->\n    <slot name=\"toggle\" :is-active=\"isActive\" :toggle=\"toggle\">\n      <button\n        data-test=\"button|toggle\"\n        :aria-expanded=\"isActive\"\n        :class=\"[label ? 'tw-min-w-auto tw-outline-none' : 'tw-rounded tw-p-3']\"\n        @click=\"toggle\"\n      >\n        <span v-if=\"label\" class=\"tw-flex tw-items-center tw-font-medium tw-text-blue-500 hover:tw-text-blue-700\">\n          {{ label }}\n          <Icon name=\"caret-down\" />\n        </span>\n        <Icon v-else name=\"ellipsis\" />\n      </button>\n    </slot>\n\n    <transition name=\"fade\" @after-leave=\"resetOffset\">\n      <div\n        v-show=\"isActive\"\n        ref=\"contentRef\"\n        data-test=\"ll-dropdown-content\"\n        :class=\"[\n          classes.content,\n          contentClass,\n          {\n            'tw-left-0 after:tw-left-6': props.align === 'left',\n            'tw-right-0': props.align === 'right',\n            'tw-max-w-[360px]': !props.fluidContent,\n          },\n        ]\"\n        :style=\"styles\"\n      >\n        <!-- @slot Dropdown content slot. Receives `dismiss` method, to trigger manual close. You must call dismiss with parentheses. Receives `is-active` prop.  -->\n        <slot :dismiss=\"dismiss\" :is-active=\"isActive\"></slot>\n      </div>\n    </transition>\n  </div>\n</template>\n\n<style module>\n  .content {\n    --offset: 0;\n\n    @apply tw-shadow-2xl\n      tw-bg-white\n      tw-border\n      tw-border-solid\n      tw-border-blue-500\n      tw-rounded\n      tw-absolute\n      tw-z-[301]\n      tw-min-w-[200px];\n\n    transform: translateX(calc(var(--offset) * 1px));\n  }\n\n  /**\n  * TODO: these global styles should be componentized in https://leaflink.atlassian.net/browse/STASH-566\n  */\n  :global(.dropdown__list) {\n    @apply tw-bg-white tw-list-none tw-m-1.5 tw-p-0;\n  }\n\n  :global(.dropdown__item) {\n    @apply tw-block tw-mx-0 tw-mt-0 tw-mb-1.5 tw-w-full first:tw-mt-0 last:tw-mb-0;\n  }\n\n  :global(.dropdown__item) button {\n    @apply tw-border-none tw-text-left tw-p-1.5;\n  }\n\n  :global(.dropdown__item) :where(a, button) {\n    @apply tw-rounded\n    tw-text-ice-700\n      tw-block\n      tw-py-[10px]\n      tw-px-1.5\n      tw-w-full\n      disabled:tw-text-ice-500\n      disabled:tw-cursor-default\n      hover:tw-bg-ice-200\n      hover:tw-text-ice-700\n      hover:tw-no-underline\n      tw-transition-all\n      tw-duration-fast\n      tw-ease-swing;\n  }\n</style>\n"],"names":["props","__props","emit","__emit","contentRef","ref","dropdownRef","DEFAULT_ITEMS_LIST","items","itemIndex","isActive","styles","classes","useCssModule","watch","val","next","prev","onMounted","target","getMountPoint","_a","_b","_c","dismiss","onBeforeUnmount","event","wasOpen","toggle","calculateOffset","onKeyDown","KEY_CODES","resetOffset","nextTick","toggleBCR","top","offset","overflow","calculateElementOverflow","direction","__expose","computed"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA0DE,UAAMA,IAAQC,GAURC,IAAOC,GAKPC,IAAaC,EAAwB,IAAI,GACzCC,IAAcD,EAA2B,IAAI,GAE7CE,IAAqB,CAAC,GAEtBC,IAAQH,EAAyBE,CAAkB,GACnDE,IAAYJ,EAAI,EAAE,GAClBK,IAAWL,EAAI,EAAK,GAEpBM,IAASN,EAAoB,EAAE,GAC/BO,IAAUC,EAAa;AAEvB,IAAAC,EAAAJ,GAAU,CAACK,MAAQ;AACvB,MAAKA,MACHN,EAAU,QAAQ,KAGpBP,EAAK,UAAUa,CAAG;AAAA,IAAA,CACnB,GAEKD,EAAAL,GAAW,CAACO,GAAMC,MAAS;AAC3B,MAAAD,KAAQR,EAAM,SAChBA,EAAM,MAAMQ,CAAI,EAAE,UAAU,IAAI,eAAe,GAE7CC,KAAQT,EAAM,SAChBA,EAAM,MAAMS,CAAI,EAAE,UAAU,OAAO,eAAe;AAAA,IACpD,CACD,GAEDC,EAAU,MAAM;;AACd,UAAIlB,EAAM,UAAU;AAClB,cAAMmB,IAASC,EAAc;AAE7B,QAAIhB,EAAW,SACNe,EAAA,YAAYf,EAAW,KAAK;AAAA,MACrC;AAIF,OAAIiB,IAAAjB,EAAW,UAAX,QAAAiB,EAAkB,cAAc,iBAClCb,EAAM,UAAQc,IAAAlB,EAAW,UAAX,gBAAAkB,EAAkB,iBAAiB,wBAAuBf,IAExEC,EAAM,UAAQe,IAAAnB,EAAW,UAAX,gBAAAmB,EAAkB,iBAAiB,uBAAsBhB,GAIzE,OAAO,iBAAiB,UAAU,MAAMiB,EAAA,CAAS;AAAA,IAAA,CAClD,GAEDC,EAAgB,MAAM;;AACpB,aAAO,oBAAoB,UAAU,MAAMD,EAAA,CAAS,IACpDF,KAAAD,IAAAjB,KAAA,gBAAAA,EAAY,UAAZ,gBAAAiB,EAAmB,eAAnB,QAAAC,EAA+B,YAAYlB,EAAW;AAAA,IAAK,CAC5D;AAKD,aAASoB,EAAQE,GAAe;;AAE5B,UAAA1B,EAAM,mBACLqB,IAAAjB,EAAW,UAAX,QAAAiB,EAAkB,SAASK,KAAA,gBAAAA,EAAO,WAA0BtB,EAAW,WAAUsB,KAAA,gBAAAA,EAAO;AAEzF;AAGF,YAAMC,IAAUjB,EAAS;AAEzB,MAAAA,EAAS,QAAQ,IAEbiB,KACFzB,EAAK,SAAS;AAAA,IAChB;AAMF,mBAAe0B,IAAS;;AACtB,MAAIlB,EAAS,QACXA,EAAS,QAAQ,MAEjBA,EAAS,QAAQ,IACjB,MAAMmB,EAAgB,IACtBR,IAAAjB,EAAW,UAAX,QAAAiB,EAAkB;AAAA,IACpB;AAOF,aAASS,EAAU,GAAkB;AAC/B,UAAA,EAAE,YAAYC,EAAU;AAClB,QAAAP,EAAA;AAAA,eACC,EAAE,YAAYO,EAAU,QAAQtB,EAAU,QAAQD,EAAM,MAAM,SAAS,KAAKE,EAAS;AACpF,QAAAD,EAAA;AAAA,eACD,EAAE,YAAYsB,EAAU,MAAMtB,EAAU,QAAQ,MAAMC,EAAS;AAC9D,QAAAD,EAAA;AAAA,eACD,EAAE,YAAYsB,EAAU,SAAStB,EAAU,UAAU,MAAMC,EAAS;AACvE,QAAAF,EAAAC,EAAU,KAAK,EAAE,MAAM;AAAA;AAE7B;AAGF,QAAE,eAAe;AAAA,IAAA;AAMnB,aAASuB,IAAc;;AACrB,OAAAX,IAAAjB,EAAW,UAAX,QAAAiB,EAAkB,MAAM,YAAY,YAAY;AAAA,IAAG;AASrD,mBAAeQ,IAAkB;;AAC/B,YAAMI,EAAS;AAEf,YAAMC,MAAYb,IAAAf,EAAY,UAAZ,gBAAAe,EAAmB,4BAA4B,CAAC,GAC5Dc,IAAMD,EAAU,MAAMA,EAAU,QAChCE,IAAS;AAAA,QACb,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAGpC,EAAM;AAAA,MACX;AAEA,MAAIA,EAAM,aACRW,EAAO,QAAQ;AAAA,QACb,MAAMX,EAAM,UAAU,SAAS,GAAG,KAAK,MAAMkC,EAAU,IAAI,IAAIE,EAAO,CAAC,OAAO;AAAA,QAC9E,OACEpC,EAAM,UAAU,UACZ,GAAG,SAAS,gBAAgB,cAAc,KAAK,MAAMkC,EAAU,KAAK,IAAIE,EAAO,CAAC,OAChF;AAAA,QACN,KAAK,GAAG,OAAO,UAAUD,IAAMC,EAAO,CAAC;AAAA,MACzC,GACA,MAAMH,EAAS;AAGX,YAAAI,IAAWC,EAAyBlC,KAAA,gBAAAA,EAAY,KAAK;AAE3D,UAAIiC,GAAU;AACZ,cAAME,IAAYvC,EAAM,UAAU,SAAS,MAAM;AACtC,SAAAsB,IAAAlB,EAAA,UAAA,QAAAkB,EAAO,MAAM,YAAY,YAAY,GAAGiB,CAAS,GAAGF,EAAS,KAAK;AAAA,MAAE;AAAA,IACjF;AAGW,WAAAG,EAAA;AAAA,MACX,UAAUC,EAAS,MAAM/B,EAAS,KAAK;AAAA,MACvC,QAAAkB;AAAA,MACA,SAAAJ;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Field.vue_vue_type_script_setup_true_lang-DEizIcDo.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.vue_vue_type_script_setup_true_lang-DEizIcDo.js","sources":["../src/components/Field/Field.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { FieldProps } from './Field.types';\n\n  export * from './Field.types';\n</script>\n\n<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, useAttrs, useSlots } from 'vue';\n\n  import Label from '../Label/Label.vue';\n\n  defineOptions({\n    inheritAttrs: false,\n  });\n\n  const props = withDefaults(defineProps<FieldProps>(), {\n    addBottomSpace: false,\n    errorText: undefined,\n    hintText: undefined,\n    id: undefined,\n    errorId: undefined,\n    isRequired: false,\n    label: undefined,\n    showOptionalInLabel: false,\n    fieldset: false,\n    isDisabled: false,\n    disabled: false,\n  });\n  const attrs = useAttrs();\n  const slots = useSlots();\n  const fieldId = computed(() => props.id || uniqueId('stash-field-'));\n  const fieldErrorId = computed(() => props.errorId || uniqueId('stash-field-error-'));\n  const labelId = computed(() => uniqueId('stash-field-label-'));\n  const hasError = computed(() => !!props.errorText);\n  const wrapperElement = computed(() => (props.fieldset ? 'fieldset' : 'div'));\n\n  // Any attributes that are unique to form elements, you want to exclude from\n  // being bound from the root element.\n  const rootAttrs = computed(() => {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { placeholder, ...otherAttrs } = attrs;\n\n    return otherAttrs;\n  });\n</script>\n\n<template>\n  <component\n    :is=\"wrapperElement\"\n    data-test=\"stash-field\"\n    class=\"stash-field\"\n    :class=\"[\n      { 'tw-p-0': props.fieldset },\n      { 'tw-mb-9': props.addBottomSpace && !props.errorText && !props.hintText && !slots.hint },\n      { 'tw-mb-4': props.addBottomSpace && (props.errorText || props.hintText || slots.hint) },\n      { 'stash-field--disabled': props.isDisabled || props.disabled },\n      { 'stash-field--is-read-only': props.isReadOnly },\n      { 'stash-field--is-required': props.isRequired },\n      { 'stash-field--has-error': hasError },\n    ]\"\n    v-bind=\"rootAttrs\"\n  >\n    <Label\n      v-if=\"props.label\"\n      :id=\"labelId\"\n      :for=\"fieldId\"\n      :has-error=\"hasError\"\n      :is-required=\"isRequired\"\n      :show-optional=\"props.showOptionalInLabel\"\n      :legend=\"props.fieldset\"\n      :disabled=\"props.isDisabled || props.disabled\"\n    >\n      {{ props.label }}\n    </Label>\n\n    <!-- @slot for the form field; the Label can also be rendered here instead of using the label prop -->\n    <slot\n      :field-id=\"fieldId\"\n      :field-error-id=\"fieldErrorId\"\n      :has-error=\"hasError\"\n      :is-required=\"isRequired\"\n      :is-read-only=\"props.isReadOnly\"\n      :disabled=\"props.isDisabled || props.disabled\"\n      :label-id=\"labelId\"\n      :show-optional-in-label=\"props.showOptionalInLabel\"\n    ></slot>\n\n    <span\n      v-if=\"props.errorText\"\n      :id=\"fieldErrorId\"\n      class=\"stash-field-error tw-mt-1 tw-block tw-whitespace-pre-line tw-text-xs tw-text-red-500\"\n      data-test=\"stash-field-error\"\n    >\n      {{ props.errorText }}\n    </span>\n\n    <span\n      v-else-if=\"props.hintText && !props.isReadOnly\"\n      class=\"stash-field-hint tw-mt-1 tw-block tw-whitespace-pre-line tw-text-xs\"\n      data-test=\"stash-field-hint\"\n    >\n      {{ props.hintText }}\n    </span>\n\n    <div\n      v-else-if=\"slots.hint && !props.isReadOnly\"\n      class=\"stash-field-hint tw-mt-1 tw-whitespace-pre-line tw-text-xs\"\n      data-test=\"stash-field-hint\"\n    >\n      <!-- @slot for displaying hint text below the field -->\n      <slot name=\"hint\"></slot>\n    </div>\n  </component>\n</template>\n"],"names":["props","__props","attrs","useAttrs","slots","useSlots","fieldId","computed","uniqueId","fieldErrorId","labelId","hasError","wrapperElement","rootAttrs","placeholder","otherAttrs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBE,UAAMA,IAAQC,GAaRC,IAAQC,EAAS,GACjBC,IAAQC,EAAS,GACjBC,IAAUC,EAAS,MAAMP,EAAM,MAAMQ,EAAS,cAAc,CAAC,GAC7DC,IAAeF,EAAS,MAAMP,EAAM,WAAWQ,EAAS,oBAAoB,CAAC,GAC7EE,IAAUH,EAAS,MAAMC,EAAS,oBAAoB,CAAC,GACvDG,IAAWJ,EAAS,MAAM,CAAC,CAACP,EAAM,SAAS,GAC3CY,IAAiBL,EAAS,MAAOP,EAAM,WAAW,aAAa,KAAM,GAIrEa,IAAYN,EAAS,MAAM;AAE/B,YAAM,EAAE,aAAAO,GAAa,GAAGC,EAAA,IAAeb;AAEhC,aAAAa;AAAA,IAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Field.vue_vue_type_script_setup_true_lang-DEizIcDo.js","sources":["../src/components/Field/Field.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { FieldProps } from './Field.types';\n\n  export * from './Field.types';\n</script>\n\n<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, useAttrs, useSlots } from 'vue';\n\n  import Label from '../Label/Label.vue';\n\n  defineOptions({\n    inheritAttrs: false,\n  });\n\n  const props = withDefaults(defineProps<FieldProps>(), {\n    addBottomSpace: false,\n    errorText: undefined,\n    hintText: undefined,\n    id: undefined,\n    errorId: undefined,\n    isRequired: false,\n    label: undefined,\n    showOptionalInLabel: false,\n    fieldset: false,\n    isDisabled: false,\n    disabled: false,\n  });\n  const attrs = useAttrs();\n  const slots = useSlots();\n  const fieldId = computed(() => props.id || uniqueId('stash-field-'));\n  const fieldErrorId = computed(() => props.errorId || uniqueId('stash-field-error-'));\n  const labelId = computed(() => uniqueId('stash-field-label-'));\n  const hasError = computed(() => !!props.errorText);\n  const wrapperElement = computed(() => (props.fieldset ? 'fieldset' : 'div'));\n\n  // Any attributes that are unique to form elements, you want to exclude from\n  // being bound from the root element.\n  const rootAttrs = computed(() => {\n    const { placeholder, ...otherAttrs } = attrs;\n\n    return otherAttrs;\n  });\n</script>\n\n<template>\n  <component\n    :is=\"wrapperElement\"\n    data-test=\"stash-field\"\n    class=\"stash-field\"\n    :class=\"[\n      { 'tw-p-0': props.fieldset },\n      { 'tw-mb-9': props.addBottomSpace && !props.errorText && !props.hintText && !slots.hint },\n      { 'tw-mb-4': props.addBottomSpace && (props.errorText || props.hintText || slots.hint) },\n      { 'stash-field--disabled': props.isDisabled || props.disabled },\n      { 'stash-field--is-read-only': props.isReadOnly },\n      { 'stash-field--is-required': props.isRequired },\n      { 'stash-field--has-error': hasError },\n    ]\"\n    v-bind=\"rootAttrs\"\n  >\n    <Label\n      v-if=\"props.label\"\n      :id=\"labelId\"\n      :for=\"fieldId\"\n      :has-error=\"hasError\"\n      :is-required=\"isRequired\"\n      :show-optional=\"props.showOptionalInLabel\"\n      :legend=\"props.fieldset\"\n      :disabled=\"props.isDisabled || props.disabled\"\n    >\n      {{ props.label }}\n    </Label>\n\n    <!-- @slot for the form field; the Label can also be rendered here instead of using the label prop -->\n    <slot\n      :field-id=\"fieldId\"\n      :field-error-id=\"fieldErrorId\"\n      :has-error=\"hasError\"\n      :is-required=\"isRequired\"\n      :is-read-only=\"props.isReadOnly\"\n      :disabled=\"props.isDisabled || props.disabled\"\n      :label-id=\"labelId\"\n      :show-optional-in-label=\"props.showOptionalInLabel\"\n    ></slot>\n\n    <span\n      v-if=\"props.errorText\"\n      :id=\"fieldErrorId\"\n      class=\"stash-field-error tw-mt-1 tw-block tw-whitespace-pre-line tw-text-xs tw-text-red-500\"\n      data-test=\"stash-field-error\"\n    >\n      {{ props.errorText }}\n    </span>\n\n    <span\n      v-else-if=\"props.hintText && !props.isReadOnly\"\n      class=\"stash-field-hint tw-mt-1 tw-block tw-whitespace-pre-line tw-text-xs\"\n      data-test=\"stash-field-hint\"\n    >\n      {{ props.hintText }}\n    </span>\n\n    <div\n      v-else-if=\"slots.hint && !props.isReadOnly\"\n      class=\"stash-field-hint tw-mt-1 tw-whitespace-pre-line tw-text-xs\"\n      data-test=\"stash-field-hint\"\n    >\n      <!-- @slot for displaying hint text below the field -->\n      <slot name=\"hint\"></slot>\n    </div>\n  </component>\n</template>\n"],"names":["props","__props","attrs","useAttrs","slots","useSlots","fieldId","computed","uniqueId","fieldErrorId","labelId","hasError","wrapperElement","rootAttrs","placeholder","otherAttrs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBE,UAAMA,IAAQC,GAaRC,IAAQC,EAAS,GACjBC,IAAQC,EAAS,GACjBC,IAAUC,EAAS,MAAMP,EAAM,MAAMQ,EAAS,cAAc,CAAC,GAC7DC,IAAeF,EAAS,MAAMP,EAAM,WAAWQ,EAAS,oBAAoB,CAAC,GAC7EE,IAAUH,EAAS,MAAMC,EAAS,oBAAoB,CAAC,GACvDG,IAAWJ,EAAS,MAAM,CAAC,CAACP,EAAM,SAAS,GAC3CY,IAAiBL,EAAS,MAAOP,EAAM,WAAW,aAAa,KAAM,GAIrEa,IAAYN,EAAS,MAAM;AAC/B,YAAM,EAAE,aAAAO,GAAa,GAAGC,EAAA,IAAeb;AAEhC,aAAAa;AAAA,IAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/FilterDropdown.js

@@ -4,7 +4,7 @@ import { t as C } from "./locale.js";
 import D from "./Button.js";
 import "lodash-es/cloneDeep";
 import "lodash-es/uniqueId";
-import { D as F } from "./DataView.keys-C7eaZg2G.js";
+import { D as F } from "./DataView.keys-aSOnA4AD.js";
 import { D as G } from "./DataViewFilters.keys-BLu07FiP.js";
 import $ from "./Dropdown.js";
 import q from "./FilterChip.js";

package/dist/Filters.js.map

@@ -1 +1 @@
-{"version":3,"file":"Filters.js","sources":["../src/components/Filters/Filters.vue"],"sourcesContent":["<script>\n  import cloneDeep from 'lodash-es/cloneDeep';\n  import merge from 'lodash-es/merge';\n  import { nextTick, ref, toRefs } from 'vue';\n\n  import useValidation from '../../composables/useValidation/useValidation';\n  import { LLLV_CHANGE_TRIGGERS } from '../../constants';\n  import { t } from '../../locale';\n  import { persistentStorage } from '../../storage';\n  import Button from '../Button/Button.vue';\n  import Checkbox from '../Checkbox/Checkbox.vue';\n  import DatePicker from '../DatePicker/DatePicker.vue';\n  import Input from '../Input/Input.vue';\n  import InputOptions from '../InputOptions/InputOptions.vue';\n  import Radio from '../Radio/Radio.vue';\n  import Select from '../Select/Select.vue';\n\n  export default {\n    name: 'll-filters',\n\n    components: {\n      'll-button': Button,\n      'll-checkbox': Checkbox,\n      'll-input': Input,\n      'll-input-options': InputOptions,\n      'll-radio': Radio,\n      'll-select': Select,\n      DatePicker,\n    },\n\n    props: {\n      /**\n       * Whether to disable the Apply button\n       */\n      disableApply: Boolean,\n      /**\n       * Whether to disable the Clear button\n       */\n      disableClear: Boolean,\n      /**\n       * Whether to disable the sticky filters\n       * If disabled, a default pre-selected value(s) can be added to\n       * the filter component's attributes\n       */\n      disablePersistency: Boolean,\n      /**\n       * Filters schema\n       */\n      schema: {\n        type: Array,\n        default: () => [],\n      },\n      /**\n       * Validation schema function that returns an object\n       */\n      validationSchema: {\n        type: Function,\n        default: () => () => undefined,\n      },\n    },\n\n    emits: ['change', 'submit', 'reset'],\n\n    setup(props) {\n      const { validationSchema: getValidationSchema } = toRefs(props);\n      const validationSchema = getValidationSchema.value();\n      const validationValues = ref({});\n\n      // Without ref, `this.validation` will always evaluate to its initial value of `undefined` due to lack of reactivity.\n      const validation = ref();\n\n      function initValidation() {\n        if (validationSchema?.toString() !== '[object Object]') {\n          return;\n        }\n\n        validationValues.value = Object.keys(validationSchema).reduce((values, fieldName) => {\n          values[fieldName] = undefined;\n\n          return values;\n        }, {});\n\n        const validationRules = Object.entries(validationSchema).reduce((rules, [fieldName, fieldRules]) => {\n          rules[fieldName] = fieldRules.map((fieldRule) => {\n            return fieldRule(validationValues);\n          });\n\n          return rules;\n        }, {});\n\n        validation.value = useValidation({ rules: validationRules, values: validationValues });\n        validation.value.validate();\n      }\n\n      return {\n        validation,\n        validationValues,\n        initValidation,\n      };\n    },\n\n    data() {\n      return {\n        applyText: t('ll.apply'),\n        clearText: t('ll.clear'),\n        filters: {},\n        filterValues: {},\n        forceRenderCount: 0,\n      };\n    },\n\n    watch: {\n      filterValues: {\n        /**\n         * Maps filters to a partcular object structure:\n         * @param {IFilterSchemaItem} newFilterValues all selected filters\n         * @returns {IFilter}\n         */\n        handler: function (newFilterValues) {\n          const filters = Object.keys(newFilterValues).reduce((acc, i) => {\n            const schema = this.schema[i];\n\n            if (!schema || !schema.fieldToFilter) {\n              return acc;\n            }\n\n            const item = newFilterValues[i];\n\n            // Ignore empty string or undefined/null filter values\n            if (item === '' || item == null) {\n              return acc;\n            }\n\n            const trackBy = schema.attributes.trackBy || 'id';\n            const isObject = typeof item === 'object';\n            const isCustomFilterComponent = typeof schema.type === 'object';\n            // TODO: remove handling of schema.attributes.multiple when we remove the vue-multiselect version of Select\n            const isMultiple =\n              (isCustomFilterComponent && schema.attributes.multiple) ||\n              (!isCustomFilterComponent &&\n                schema.type.includes('ll-select') &&\n                (schema.attributes.multiple || !schema.attributes.single));\n            const filterBy = isMultiple\n              ? // local storage might have item stored as an object from the old Select\n                (Array.isArray(item) ? item : [item]).map((v) => v[trackBy])\n              : isObject\n              ? [item[trackBy]]\n              : [item];\n\n            const groupedWith = schema.groupedWith;\n\n            if (groupedWith) {\n              filterBy[0] = {\n                index: groupedWith,\n                value: newFilterValues[groupedWith],\n              };\n              filterBy.push({\n                index: Number(i),\n                value: newFilterValues[i],\n              });\n            }\n\n            filterBy.length &&\n              (acc[schema.fieldToFilter] = {\n                // don't add to `filters` if no filterBy\n                filterBy,\n                filterType: schema.type, // Informs the applied filter count\n                isMultiple,\n                ...('fn' in schema && { customFilter: schema.fn }),\n              });\n\n            return acc;\n          }, {});\n\n          this.filters = filters;\n          this.$emit('change', filters);\n        },\n\n        deep: true,\n        immediate: true,\n      },\n\n      filters() {\n        if (this.validation) {\n          this.updateValidationValues();\n        }\n      },\n    },\n\n    async created() {\n      // initFilterValues updates the filterValues so using await nextTick() forces the code\n      // after it to wait until nextTick is done, at which point the filterValues will\n      // be done initializing. Otherwise, applyFilters sometimes applies the wrong\n      // filters because filterValues is not done updating.\n      this.initFilterValues();\n      await nextTick();\n      this.initValidation();\n      this.applyFilters({ trigger: LLLV_CHANGE_TRIGGERS.LOAD });\n    },\n\n    methods: {\n      initFilterValues() {\n        if (this.disablePersistency) {\n          this.filterValues = this.getDefaultFilterValues();\n\n          return;\n        }\n\n        this.filterValues = this.getPersistentFilterValues() || this.getDefaultFilterValues();\n      },\n\n      /**\n       * Apply the selected filters and save them to localStorage.\n       * ListView calls this method using a ref to Filters.\n       * The trigger option is used in ListView.\n       * @param {object} [options] - optional parameters\n       * @param {string} [options.trigger] - the action that triggered this function call\n       */\n      async applyFilters({ trigger = LLLV_CHANGE_TRIGGERS.APPLY } = {}) {\n        if (this.validation) {\n          await this.validation.validate();\n\n          if (this.validation.hasErrors) {\n            return;\n          }\n        }\n\n        if (!this.disablePersistency) {\n          this.persistFilterValues(this.filterValues);\n        }\n\n        this.$emit('submit', { trigger });\n      },\n\n      resetFilters() {\n        this.filterValues = this.getDefaultFilterValues();\n\n        this.forceRenderCount++;\n\n        if (!this.disablePersistency) {\n          this.persistFilterValues(this.filterValues);\n        }\n\n        // Emit after filters are updated\n        this.$nextTick(() => {\n          this.$emit('reset');\n        });\n      },\n\n      /**\n       * Returns pre-defined filter values to become the default values\n       */\n      getDefaultFilterValues() {\n        return this.schema.reduce((acc, item, filterIndex) => {\n          if (item.type === 'll-checkbox') {\n            acc[filterIndex] = item.attributes.checked || false;\n          } else if (Object.prototype.hasOwnProperty.call(item.attributes, 'modelValue')) {\n            acc[filterIndex] = item.attributes.modelValue;\n          }\n\n          return acc;\n        }, {});\n      },\n\n      /**\n       * Intended for external use, when filter values need to be set for the user\n       */\n      setFilterValues(newValues) {\n        this.filterValues = merge({}, this.filterValues, newValues);\n        this.forceRenderCount++;\n      },\n\n      updateValidationValues() {\n        const validatable = Object.keys(this.validationSchema());\n\n        this.schema.forEach((fieldSchema, filterIndex) => {\n          const fieldToFilter = fieldSchema.fieldToFilter;\n          const validate = validatable.includes(fieldToFilter);\n\n          if (validate) {\n            const filter = this.filters[fieldToFilter];\n\n            /**\n             * Get all validatable fields.\n             * Use parsed value of filters that are set,\n             * otherwise fall back to `filterValue` value if not set.\n             */\n            const filterValue = filter\n              ? filter.isMultiple\n                ? filter.filterBy\n                : filter.filterBy[0]\n              : this.filterValues[filterIndex];\n\n            this.validationValues[fieldToFilter] = filterValue;\n          }\n        });\n      },\n\n      /**\n       * Change handler for filter fields\n       */\n      onChange(filter, filterValues, filterIndex) {\n        if (filter.on?.change) {\n          // Maps to `on.change` handlers in the filter schema.\n          filter.on.change(filterValues, filterIndex);\n        }\n      },\n\n      /**\n       * Select input event handler for filter fields\n       */\n      onSelectInput(newValue, filter, filterIndex) {\n        if (newValue === undefined) {\n          delete this.filterValues[filterIndex]; // prevent undefined filterValues which cause an empty result list\n        } else {\n          this.filterValues[filterIndex] = newValue;\n        }\n\n        this.onChange(filter, this.filterValues, filterIndex);\n      },\n\n      /**\n       * Get filter values from local storage.\n       * @returns {any}\n       */\n      getPersistentFilterValues() {\n        return persistentStorage.get('filter-values');\n      },\n\n      /**\n       * Clone new filterValues to remove reactivity, and save them to localStorage.\n       * @param {object} newValues - the filterValues to be persisted in localStorage\n       */\n      persistFilterValues(newValues) {\n        persistentStorage.set('filter-values', cloneDeep(newValues));\n      },\n    },\n  };\n</script>\n\n<template>\n  <div class=\"tw-ll-grid tw-grid-cols-4 md:tw-grid-cols-12\">\n    <template v-for=\"(filter, filterIndex) in schema\">\n      <div\n        v-if=\"!filter.hidden\"\n        :key=\"`${filterIndex} ${forceRenderCount}`\"\n        class=\"field-wrapper tw-col-span-4 md:tw-col-span-3\"\n        :class=\"{ 'max-md:tw-hidden': !filter.type, 'tw-flex tw-items-end': filter.type === 'll-checkbox' }\"\n        :data-test=\"`filter|${filter.fieldToFilter}`\"\n      >\n        <!-- Filter component -->\n        <ll-select\n          v-if=\"filter.type === 'll-select'\"\n          v-bind=\"filter.attributes\"\n          :error=\"validation?.fields[filter.fieldToFilter] && validation?.getError(filter.fieldToFilter)\"\n          :label=\"filter.label\"\n          :model-value=\"filterValues[filterIndex]\"\n          @update:model-value=\"(newValue) => onSelectInput(newValue, filter, filterIndex)\"\n        />\n        <ll-checkbox\n          v-else-if=\"filter.type === 'll-checkbox'\"\n          v-model:checked=\"filterValues[filterIndex]\"\n          v-bind=\"filter.attributes\"\n          :error-text=\"validation?.fields[filter.fieldToFilter] && validation?.getError(filter.fieldToFilter)\"\n          :label=\"filter.label\"\n          @update:checked=\"onChange(filter, filterValues, filterIndex)\"\n        />\n        <ll-radio\n          v-else-if=\"filter.type === 'll-radio'\"\n          v-model:checked=\"filterValues[filterIndex]\"\n          v-bind=\"filter.attributes\"\n          :error-text=\"validation?.fields[filter.fieldToFilter] && validation?.getError(filter.fieldToFilter)\"\n          :label=\"filter.label\"\n          @update:checked=\"onChange(filter, filterValues, filterIndex)\"\n        />\n        <component\n          v-bind=\"filter.attributes\"\n          :is=\"filter.type\"\n          v-else-if=\"filter.type\"\n          v-model=\"filterValues[filterIndex]\"\n          :error-text=\"validation?.fields[filter.fieldToFilter] && validation?.getError(filter.fieldToFilter)\"\n          :label=\"filter.label\"\n          @update:model-value=\"onChange(filter, filterValues, filterIndex)\"\n        >\n          <template v-if=\"filter.slots && filter.slots.selected\" #selected=\"{ option }\">\n            <component :is=\"filter.slots.selected\" v-bind=\"option.props\" />\n          </template>\n          <template v-if=\"filter.slots && filter.slots.option\" #option=\"{ option }\">\n            <component :is=\"filter.slots.option\" v-bind=\"option.props\" />\n          </template>\n          <template v-if=\"filter.slots && filter.slots.prepend\" #prepend>\n            <!-- eslint-disable-next-line vue/no-v-html -->\n            <span v-html=\"filter.slots.prepend\"></span>\n          </template>\n          <template v-if=\"filter.slots && filter.slots.append\" #append>\n            <!-- eslint-disable-next-line vue/no-v-html -->\n            <span v-html=\"filter.slots.append\"></span>\n          </template>\n        </component>\n      </div>\n    </template>\n    <div\n      class=\"button-grid tw-col-span-4 tw-flex tw-items-end tw-justify-end md:tw-col-span-12\"\n      :class=\"$style['filter-button-group']\"\n    >\n      <ll-button secondary data-test=\"button|reset-filters\" :disabled=\"disableClear\" @click=\"resetFilters\">\n        {{ clearText }}\n      </ll-button>\n      <ll-button\n        primary\n        data-test=\"button|apply-filters\"\n        :disabled=\"disableApply || validation?.hasErrors\"\n        @click=\"applyFilters\"\n      >\n        {{ applyText }}\n      </ll-button>\n    </div>\n  </div>\n</template>\n\n<style module>\n  .filter-button-group {\n    @media screen('max-md') {\n      display: flex;\n      flex-direction: column-reverse;\n    }\n\n    button {\n      @media screen('max-md') {\n        width: 100% !important;\n      }\n\n      &:nth-child(2) {\n        @media screen('max-md') {\n          margin-bottom: theme('spacing.3');\n        }\n      }\n    }\n  }\n</style>\n"],"names":["_sfc_main","Button","Checkbox","Input","InputOptions","Radio","Select","DatePicker","props","getValidationSchema","toRefs","validationSchema","validationValues","ref","validation","initValidation","values","fieldName","validationRules","rules","fieldRules","fieldRule","useValidation","t","newFilterValues","filters","acc","i","schema","item","trackBy","isObject","isCustomFilterComponent","isMultiple","filterBy","v","groupedWith","nextTick","LLLV_CHANGE_TRIGGERS","trigger","filterIndex","newValues","merge","validatable","fieldSchema","fieldToFilter","filter","filterValue","filterValues","_a","newValue","persistentStorage","cloneDeep","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_openBlock","_createElementBlock","_Fragment","_renderList","$props","_createCommentVNode","$data","_normalizeClass","_createBlock","_component_ll_select","_mergeProps","$setup","_b","$options","_component_ll_checkbox","$event","_c","_d","_component_ll_radio","_e","_f","_resolveDynamicComponent","_g","_h","_createSlots","_withCtx","option","_createElementVNode","_ctx","_createVNode","_component_ll_button","_createTextVNode","_toDisplayString"],"mappings":";;;;;;;;;;;;;;;;;GAiBOA,KAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,aAAaC;AAAA,IACb,eAAeC;AAAA,IACf,YAAYC;AAAA,IACZ,oBAAoBC;AAAA,IACpB,YAAYC;AAAA,IACZ,aAAaC;AAAA,IACb,YAAAC;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,cAAc;AAAA;AAAA;AAAA;AAAA,IAId,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMd,oBAAoB;AAAA;AAAA;AAAA;AAAA,IAIpB,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS,MAAM,CAAE;AAAA,IAClB;AAAA;AAAA;AAAA;AAAA,IAID,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS,MAAM,MAAA;AAAA;AAAA,IAChB;AAAA,EACF;AAAA,EAED,OAAO,CAAC,UAAU,UAAU,OAAO;AAAA,EAEnC,MAAMC,GAAO;AACX,UAAM,EAAE,kBAAkBC,MAAwBC,EAAOF,CAAK,GACxDG,IAAmBF,EAAoB,MAAO,GAC9CG,IAAmBC,EAAI,EAAE,GAGzBC,IAAaD,EAAK;AAExB,aAASE,IAAiB;AACxB,WAAIJ,KAAA,gBAAAA,EAAkB,gBAAe;AACnC;AAGF,MAAAC,EAAiB,QAAQ,OAAO,KAAKD,CAAgB,EAAE,OAAO,CAACK,GAAQC,OACrED,EAAOC,CAAS,IAAI,QAEbD,IACN,EAAE;AAEL,YAAME,IAAkB,OAAO,QAAQP,CAAgB,EAAE,OAAO,CAACQ,GAAO,CAACF,GAAWG,CAAU,OAC5FD,EAAMF,CAAS,IAAIG,EAAW,IAAI,CAACC,MAC1BA,EAAUT,CAAgB,CAClC,GAEMO,IACN,EAAE;AAEL,MAAAL,EAAW,QAAQQ,EAAc,EAAE,OAAOJ,GAAiB,QAAQN,GAAkB,GACrFE,EAAW,MAAM,SAAU;AAAA,IAC7B;AAEA,WAAO;AAAA,MACL,YAAAA;AAAA,MACA,kBAAAF;AAAA,MACA,gBAAAG;AAAA,IACD;AAAA,EACF;AAAA,EAED,OAAO;AACL,WAAO;AAAA,MACL,WAAWQ,EAAE,UAAU;AAAA,MACvB,WAAWA,EAAE,UAAU;AAAA,MACvB,SAAS,CAAE;AAAA,MACX,cAAc,CAAE;AAAA,MAChB,kBAAkB;AAAA,IACnB;AAAA,EACF;AAAA,EAED,OAAO;AAAA,IACL,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMZ,SAAS,SAAUC,GAAiB;AAClC,cAAMC,IAAU,OAAO,KAAKD,CAAe,EAAE,OAAO,CAACE,GAAKC,MAAM;AAC9D,gBAAMC,IAAS,KAAK,OAAOD,CAAC;AAE5B,cAAI,CAACC,KAAU,CAACA,EAAO;AACrB,mBAAOF;AAGT,gBAAMG,IAAOL,EAAgBG,CAAC;AAG9B,cAAIE,MAAS,MAAMA,KAAQ;AACzB,mBAAOH;AAGT,gBAAMI,IAAUF,EAAO,WAAW,WAAW,MACvCG,IAAW,OAAOF,KAAS,UAC3BG,IAA0B,OAAOJ,EAAO,QAAS,UAEjDK,IACHD,KAA2BJ,EAAO,WAAW,YAC7C,CAACI,KACAJ,EAAO,KAAK,SAAS,WAAW,MAC/BA,EAAO,WAAW,YAAY,CAACA,EAAO,WAAW,SAChDM,IAAWD;AAAA;AAAA,aAEZ,MAAM,QAAQJ,CAAI,IAAIA,IAAO,CAACA,CAAI,GAAG,IAAI,CAACM,MAAMA,EAAEL,CAAO,CAAC;AAAA,cAC3DC,IACA,CAACF,EAAKC,CAAO,CAAC,IACd,CAACD,CAAI,GAEHO,IAAcR,EAAO;AAE3B,iBAAIQ,MACFF,EAAS,CAAC,IAAI;AAAA,YACZ,OAAOE;AAAA,YACP,OAAOZ,EAAgBY,CAAW;AAAA,UACnC,GACDF,EAAS,KAAK;AAAA,YACZ,OAAO,OAAOP,CAAC;AAAA,YACf,OAAOH,EAAgBG,CAAC;AAAA,UAC1B,CAAC,IAGHO,EAAS,WACNR,EAAIE,EAAO,aAAa,IAAI;AAAA;AAAA,YAE3B,UAAAM;AAAA,YACA,YAAYN,EAAO;AAAA;AAAA,YACnB,YAAAK;AAAA,YACA,GAAI,QAAQL,KAAU,EAAE,cAAcA,EAAO,GAAC;AAAA,UAChD,IAEKF;AAAA,QACR,GAAE,EAAE;AAEL,aAAK,UAAUD,GACf,KAAK,MAAM,UAAUA,CAAO;AAAA,MAC7B;AAAA,MAED,MAAM;AAAA,MACN,WAAW;AAAA,IACZ;AAAA,IAED,UAAU;AACR,MAAI,KAAK,cACP,KAAK,uBAAwB;AAAA,IAEhC;AAAA,EACF;AAAA,EAED,MAAM,UAAU;AAKd,SAAK,iBAAkB,GACvB,MAAMY,EAAU,GAChB,KAAK,eAAgB,GACrB,KAAK,aAAa,EAAE,SAASC,EAAqB,KAAK,CAAC;AAAA,EACzD;AAAA,EAED,SAAS;AAAA,IACP,mBAAmB;AACjB,UAAI,KAAK,oBAAoB;AAC3B,aAAK,eAAe,KAAK,uBAAwB;AAEjD;AAAA,MACF;AAEA,WAAK,eAAe,KAAK,0BAAyB,KAAM,KAAK,uBAAwB;AAAA,IACtF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASD,MAAM,aAAa,EAAE,SAAAC,IAAUD,EAAqB,MAAI,IAAM,CAAA,GAAI;AAChE,MAAI,KAAK,eACP,MAAM,KAAK,WAAW,SAAU,GAE5B,KAAK,WAAW,eAKjB,KAAK,sBACR,KAAK,oBAAoB,KAAK,YAAY,GAG5C,KAAK,MAAM,UAAU,EAAE,SAAAC,EAAQ,CAAC;AAAA,IACjC;AAAA,IAED,eAAe;AACb,WAAK,eAAe,KAAK,uBAAwB,GAEjD,KAAK,oBAEA,KAAK,sBACR,KAAK,oBAAoB,KAAK,YAAY,GAI5C,KAAK,UAAU,MAAM;AACnB,aAAK,MAAM,OAAO;AAAA,MACpB,CAAC;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,yBAAyB;AACvB,aAAO,KAAK,OAAO,OAAO,CAACb,GAAKG,GAAMW,OAChCX,EAAK,SAAS,gBAChBH,EAAIc,CAAW,IAAIX,EAAK,WAAW,WAAW,KACrC,OAAO,UAAU,eAAe,KAAKA,EAAK,YAAY,YAAY,MAC3EH,EAAIc,CAAW,IAAIX,EAAK,WAAW,aAG9BH,IACN,EAAE;AAAA,IACN;AAAA;AAAA;AAAA;AAAA,IAKD,gBAAgBe,GAAW;AACzB,WAAK,eAAeC,EAAM,CAAE,GAAE,KAAK,cAAcD,CAAS,GAC1D,KAAK;AAAA,IACN;AAAA,IAED,yBAAyB;AACvB,YAAME,IAAc,OAAO,KAAK,KAAK,iBAAgB,CAAE;AAEvD,WAAK,OAAO,QAAQ,CAACC,GAAaJ,MAAgB;AAChD,cAAMK,IAAgBD,EAAY;AAGlC,YAFiBD,EAAY,SAASE,CAAa,GAErC;AACZ,gBAAMC,IAAS,KAAK,QAAQD,CAAa,GAOnCE,IAAcD,IAChBA,EAAO,aACLA,EAAO,WACPA,EAAO,SAAS,CAAC,IACnB,KAAK,aAAaN,CAAW;AAEjC,eAAK,iBAAiBK,CAAa,IAAIE;AAAA,QACzC;AAAA,MACF,CAAC;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,SAASD,GAAQE,GAAcR,GAAa;;AAC1C,OAAIS,IAAAH,EAAO,OAAP,QAAAG,EAAW,UAEbH,EAAO,GAAG,OAAOE,GAAcR,CAAW;AAAA,IAE7C;AAAA;AAAA;AAAA;AAAA,IAKD,cAAcU,GAAUJ,GAAQN,GAAa;AAC3C,MAAIU,MAAa,SACf,OAAO,KAAK,aAAaV,CAAW,IAEpC,KAAK,aAAaA,CAAW,IAAIU,GAGnC,KAAK,SAASJ,GAAQ,KAAK,cAAcN,CAAW;AAAA,IACrD;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,4BAA4B;AAC1B,aAAOW,EAAkB,IAAI,eAAe;AAAA,IAC7C;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,oBAAoBV,GAAW;AAC7B,MAAAU,EAAkB,IAAI,iBAAiBC,EAAUX,CAAS,CAAC;AAAA,IAC5D;AAAA,EACF;AACF,GAIIY,KAAA,EAAA,OAAM,+CAA8C,GArV3DC,KAAA,CAAA,WAAA,GAAAC,KAAA,CAAA,WAAA,GAAAC,KAAA,CAAA,WAAA;;;;AAqVE,SAAAC,EAAA,GAAAC,EA4EM,OA5ENL,IA4EM;AAAA,KA3EJI,EAAA,EAAA,GAAAC,EA0DWC,SAhZfC,EAsV8CC,EAAA,QAtV9C,CAsVsBf,GAAQN,MAAW;;AAtVzC,aAAAiB,EAAA,GAAAC,EAAAC,GAAA,MAAA;AAAA,QAwVeb,EAAO,SAxVtBgB,EAAA,IAAA,EAAA,UAuVMJ,EAwDM,OAAA;AAAA,UAtDH,KAAG,GAAKlB,CAAW,IAAIuB,EAAgB,gBAAA;AAAA,UACxC,OA1VRC,EA0Vc,CAAA,gDACyB,EAAA,oBAAA,CAAAlB,EAAO,MAAI,wBAA0BA,EAAO,SAAI,cAAA,CAAA,CAAA;AAAA,UAC9E,aAAS,UAAYA,EAAO,aAAa;AAAA;UAIlCA,EAAO,SAAI,eADnBW,KAAAQ,EAOEC,GAPFC,EAOE;AAAA,YAtWV,KAAA;AAAA,YAAA,SAAA;AAAA,UAiWkB,GAAArB,EAAO,YAAU;AAAA,YACxB,SAAOG,IAAAmB,EAAA,eAAA,gBAAAnB,EAAY,OAAOH,EAAO,qBAAkBuB,IAAAD,iBAAA,gBAAAC,EAAY,SAASvB,EAAO;AAAA,YAC/E,OAAOA,EAAO;AAAA,YACd,eAAaiB,EAAY,aAACvB,CAAW;AAAA,YACrC,uBAAkB,CAAGU,MAAaoB,EAAA,cAAcpB,GAAUJ,GAAQN,CAAW;AAAA,qFAGnEM,EAAO,SAAI,iBADxBW,KAAAQ,EAOEM,GAPFJ,EAOE;AAAA,YA9WV,KAAA;AAAA,YAyWkB,SAASJ,EAAY,aAACvB,CAAW;AAAA,YAzWnD,oBAyW2B,CAAAgC,MAAAT,EAAA,aAAavB,CAAW,IAAAgC;AAAA,YAzWnD,SAAA;AAAA,UA0WkB,GAAA1B,EAAO,YAAU;AAAA,YACxB,gBAAY2B,IAAAL,EAAA,eAAA,gBAAAK,EAAY,OAAO3B,EAAO,qBAAkB4B,IAAAN,iBAAA,gBAAAM,EAAY,SAAS5B,EAAO;AAAA,YACpF,OAAOA,EAAO;AAAA,YACd,2BAAgBwB,EAAQ,SAACxB,GAAQiB,EAAA,cAAcvB,CAAW;AAAA,mFAGhDM,EAAO,SAAI,cADxBW,KAAAQ,EAOEU,GAPFR,EAOE;AAAA,YAtXV,KAAA;AAAA,YAiXkB,SAASJ,EAAY,aAACvB,CAAW;AAAA,YAjXnD,oBAiX2B,CAAAgC,MAAAT,EAAA,aAAavB,CAAW,IAAAgC;AAAA,YAjXnD,SAAA;AAAA,UAkXkB,GAAA1B,EAAO,YAAU;AAAA,YACxB,gBAAY8B,IAAAR,EAAA,eAAA,gBAAAQ,EAAY,OAAO9B,EAAO,qBAAkB+B,IAAAT,iBAAA,gBAAAS,EAAY,SAAS/B,EAAO;AAAA,YACpF,OAAOA,EAAO;AAAA,YACd,2BAAgBwB,EAAQ,SAACxB,GAAQiB,EAAA,cAAcvB,CAAW;AAAA,mFAKhDM,EAAO,QAHpBW,EAAA,GAAAQ,EAuBYa,EArBLhC,EAAO,IAAI,GAFlBqB,EAuBY;AAAA,YA9YpB,KAAA;AAAA,YAAA,SAAA;AAAA,UAwXkB,GAAArB,EAAO,YAAU;AAAA,YAxXnC,YA2XmBiB,EAAA,aAAavB,CAAW;AAAA,YA3X3C,uBA2XmB,CAAA,CAAAgC,MAAAT,EAAA,aAAavB,CAAW,IAGZgC,GAAA,CAAAA,MAAAF,EAAA,SAASxB,GAAQiB,EAAY,cAAEvB,CAAW,CAAA;AAAA,YAF9D,gBAAYuC,IAAAX,EAAA,eAAA,gBAAAW,EAAY,OAAOjC,EAAO,qBAAkBkC,IAAAZ,iBAAA,gBAAAY,EAAY,SAASlC,EAAO;AAAA,YACpF,OAAOA,EAAO;AAAA,UA7XzB,CAAA,GAAAmC,EAAA,EAAA,GAAA,EAAA,GAAA;AAAA,YAgY0BnC,EAAO,SAASA,EAAO,MAAM;cAhYvD,MAgYkE;AAAA,cAhYlE,IAiYYoC,EAAA,CAA+D,EADG,QAAAC,QAAM;AAAA,iBACxE1B,EAAA,GAAAQ,EAA+Da,EAA/ChC,EAAO,MAAM,QAAQ,GAArCqB,EAA+D,EAjY3E,SAAA,GAiY2D,GAAAgB,EAAO,KAAK,GAAA,MAAA,EAAA;AAAA;cAjYvE,KAAA;AAAA,gBAAA;AAAA,YAmY0BrC,EAAO,SAASA,EAAO,MAAM;cAnYvD,MAmYgE;AAAA,cAnYhE,IAoYYoC,EAAA,CAA6D,EADC,QAAAC,QAAM;AAAA,iBACpE1B,EAAA,GAAAQ,EAA6Da,EAA7ChC,EAAO,MAAM,MAAM,GAAnCqB,EAA6D,EApYzE,SAAA,GAoYyD,GAAAgB,EAAO,KAAK,GAAA,MAAA,EAAA;AAAA;cApYrE,KAAA;AAAA,gBAAA;AAAA,YAsY0BrC,EAAO,SAASA,EAAO,MAAM;cAtYvD,MAsYiE;AAAA,cAtYjE,IAAAoC,EAwYY,MAA2C;AAAA,gBAA3CE,EAA2C,QAAA;AAAA,kBAArC,WAAQtC,EAAO,MAAM;AAAA,gBAxYvC,GAAA,MAAA,GAAAS,EAAA;AAAA;cAAA,KAAA;AAAA,gBAAA;AAAA,YA0Y0BT,EAAO,SAASA,EAAO,MAAM;cA1YvD,MA0YgE;AAAA,cA1YhE,IAAAoC,EA4YY,MAA0C;AAAA,gBAA1CE,EAA0C,QAAA;AAAA,kBAApC,WAAQtC,EAAO,MAAM;AAAA,gBA5YvC,GAAA,MAAA,GAAAU,EAAA;AAAA;cAAA,KAAA;AAAA,gBAAA;AAAA,qFAAAM,EAAA,IAAA,EAAA;AAAA,QAAA,GAAA,IAAAR,EAAA;AAAA;;IAiZI8B,EAeM,OAAA;AAAA,MAdJ,OAlZNpB,EAAA,CAkZY,mFACEqB,EAAM,OAAA,qBAAA,CAAA,CAAA;AAAA;MAEdC,EAEYC,GAAA;AAAA,QAFD,WAAA;AAAA,QAAU,aAAU;AAAA,QAAwB,UAAU1B,EAAY;AAAA,QAAG,SAAOS,EAAY;AAAA;QArZzG,SAAAY,EAsZQ,MAAe;AAAA,UAtZvBM,EAAAC,EAsZW1B,EAAS,SAAA,GAAA,CAAA;AAAA;QAtZpB,GAAA;AAAA;MAwZMuB,EAOYC,GAAA;AAAA,QANV,SAAA;AAAA,QACA,aAAU;AAAA,QACT,UAAU1B,EAAA,kBAAgBZ,IAAAmB,EAAA,eAAA,gBAAAnB,EAAY;AAAA,QACtC,SAAOqB,EAAY;AAAA;QA5Z5B,SAAAY,EA8ZQ,MAAe;AAAA,UA9ZvBM,EAAAC,EA8ZW1B,EAAS,SAAA,GAAA,CAAA;AAAA;QA9ZpB,GAAA;AAAA;;;;;;;"}
+{"version":3,"file":"Filters.js","sources":["../src/components/Filters/Filters.vue"],"sourcesContent":["<script>\n  import cloneDeep from 'lodash-es/cloneDeep';\n  import merge from 'lodash-es/merge';\n  import { nextTick, ref, toRefs } from 'vue';\n\n  import useValidation from '../../composables/useValidation/useValidation';\n  import { LLLV_CHANGE_TRIGGERS } from '../../constants';\n  import { t } from '../../locale';\n  import { persistentStorage } from '../../storage';\n  import Button from '../Button/Button.vue';\n  import Checkbox from '../Checkbox/Checkbox.vue';\n  import DatePicker from '../DatePicker/DatePicker.vue';\n  import Input from '../Input/Input.vue';\n  import InputOptions from '../InputOptions/InputOptions.vue';\n  import Radio from '../Radio/Radio.vue';\n  import Select from '../Select/Select.vue';\n\n  export default {\n    name: 'll-filters',\n\n    components: {\n      'll-button': Button,\n      'll-checkbox': Checkbox,\n      'll-input': Input,\n      'll-input-options': InputOptions,\n      'll-radio': Radio,\n      'll-select': Select,\n      DatePicker,\n    },\n\n    props: {\n      /**\n       * Whether to disable the Apply button\n       */\n      disableApply: Boolean,\n      /**\n       * Whether to disable the Clear button\n       */\n      disableClear: Boolean,\n      /**\n       * Whether to disable the sticky filters\n       * If disabled, a default pre-selected value(s) can be added to\n       * the filter component's attributes\n       */\n      disablePersistency: Boolean,\n      /**\n       * Filters schema\n       */\n      schema: {\n        type: Array,\n        default: () => [],\n      },\n      /**\n       * Validation schema function that returns an object\n       */\n      validationSchema: {\n        type: Function,\n        default: () => () => undefined,\n      },\n    },\n\n    emits: ['change', 'submit', 'reset'],\n\n    setup(props) {\n      const { validationSchema: getValidationSchema } = toRefs(props);\n      const validationSchema = getValidationSchema.value();\n      const validationValues = ref({});\n\n      // Without ref, `this.validation` will always evaluate to its initial value of `undefined` due to lack of reactivity.\n      const validation = ref();\n\n      function initValidation() {\n        if (validationSchema?.toString() !== '[object Object]') {\n          return;\n        }\n\n        validationValues.value = Object.keys(validationSchema).reduce((values, fieldName) => {\n          values[fieldName] = undefined;\n\n          return values;\n        }, {});\n\n        const validationRules = Object.entries(validationSchema).reduce((rules, [fieldName, fieldRules]) => {\n          rules[fieldName] = fieldRules.map((fieldRule) => {\n            return fieldRule(validationValues);\n          });\n\n          return rules;\n        }, {});\n\n        validation.value = useValidation({ rules: validationRules, values: validationValues });\n        validation.value.validate();\n      }\n\n      return {\n        validation,\n        validationValues,\n        initValidation,\n      };\n    },\n\n    data() {\n      return {\n        applyText: t('ll.apply'),\n        clearText: t('ll.clear'),\n        filters: {},\n        filterValues: {},\n        forceRenderCount: 0,\n      };\n    },\n\n    watch: {\n      filterValues: {\n        /**\n         * Maps filters to a partcular object structure:\n         * @param {IFilterSchemaItem} newFilterValues all selected filters\n         * @returns {IFilter}\n         */\n        handler: function (newFilterValues) {\n          const filters = Object.keys(newFilterValues).reduce((acc, i) => {\n            const schema = this.schema[i];\n\n            if (!schema || !schema.fieldToFilter) {\n              return acc;\n            }\n\n            const item = newFilterValues[i];\n\n            // Ignore empty string or undefined/null filter values\n            if (item === '' || item == null) {\n              return acc;\n            }\n\n            const trackBy = schema.attributes.trackBy || 'id';\n            const isObject = typeof item === 'object';\n            const isCustomFilterComponent = typeof schema.type === 'object';\n            // TODO: remove handling of schema.attributes.multiple when we remove the vue-multiselect version of Select\n            const isMultiple =\n              (isCustomFilterComponent && schema.attributes.multiple) ||\n              (!isCustomFilterComponent &&\n                schema.type.includes('ll-select') &&\n                (schema.attributes.multiple || !schema.attributes.single));\n            const filterBy = isMultiple\n              ? // local storage might have item stored as an object from the old Select\n                (Array.isArray(item) ? item : [item]).map((v) => v[trackBy])\n              : isObject\n                ? [item[trackBy]]\n                : [item];\n\n            const groupedWith = schema.groupedWith;\n\n            if (groupedWith) {\n              filterBy[0] = {\n                index: groupedWith,\n                value: newFilterValues[groupedWith],\n              };\n              filterBy.push({\n                index: Number(i),\n                value: newFilterValues[i],\n              });\n            }\n\n            if (filterBy.length) {\n              acc[schema.fieldToFilter] = {\n                // don't add to `filters` if no filterBy\n                filterBy,\n                filterType: schema.type, // Informs the applied filter count\n                isMultiple,\n                ...('fn' in schema && { customFilter: schema.fn }),\n              };\n            }\n\n            return acc;\n          }, {});\n\n          this.filters = filters;\n          this.$emit('change', filters);\n        },\n\n        deep: true,\n        immediate: true,\n      },\n\n      filters() {\n        if (this.validation) {\n          this.updateValidationValues();\n        }\n      },\n    },\n\n    async created() {\n      // initFilterValues updates the filterValues so using await nextTick() forces the code\n      // after it to wait until nextTick is done, at which point the filterValues will\n      // be done initializing. Otherwise, applyFilters sometimes applies the wrong\n      // filters because filterValues is not done updating.\n      this.initFilterValues();\n      await nextTick();\n      this.initValidation();\n      this.applyFilters({ trigger: LLLV_CHANGE_TRIGGERS.LOAD });\n    },\n\n    methods: {\n      initFilterValues() {\n        if (this.disablePersistency) {\n          this.filterValues = this.getDefaultFilterValues();\n\n          return;\n        }\n\n        this.filterValues = this.getPersistentFilterValues() || this.getDefaultFilterValues();\n      },\n\n      /**\n       * Apply the selected filters and save them to localStorage.\n       * ListView calls this method using a ref to Filters.\n       * The trigger option is used in ListView.\n       * @param {object} [options] - optional parameters\n       * @param {string} [options.trigger] - the action that triggered this function call\n       */\n      async applyFilters({ trigger = LLLV_CHANGE_TRIGGERS.APPLY } = {}) {\n        if (this.validation) {\n          await this.validation.validate();\n\n          if (this.validation.hasErrors) {\n            return;\n          }\n        }\n\n        if (!this.disablePersistency) {\n          this.persistFilterValues(this.filterValues);\n        }\n\n        this.$emit('submit', { trigger });\n      },\n\n      resetFilters() {\n        this.filterValues = this.getDefaultFilterValues();\n\n        this.forceRenderCount++;\n\n        if (!this.disablePersistency) {\n          this.persistFilterValues(this.filterValues);\n        }\n\n        // Emit after filters are updated\n        this.$nextTick(() => {\n          this.$emit('reset');\n        });\n      },\n\n      /**\n       * Returns pre-defined filter values to become the default values\n       */\n      getDefaultFilterValues() {\n        return this.schema.reduce((acc, item, filterIndex) => {\n          if (item.type === 'll-checkbox') {\n            acc[filterIndex] = item.attributes.checked || false;\n          } else if (Object.prototype.hasOwnProperty.call(item.attributes, 'modelValue')) {\n            acc[filterIndex] = item.attributes.modelValue;\n          }\n\n          return acc;\n        }, {});\n      },\n\n      /**\n       * Intended for external use, when filter values need to be set for the user\n       */\n      setFilterValues(newValues) {\n        this.filterValues = merge({}, this.filterValues, newValues);\n        this.forceRenderCount++;\n      },\n\n      updateValidationValues() {\n        const validatable = Object.keys(this.validationSchema());\n\n        this.schema.forEach((fieldSchema, filterIndex) => {\n          const fieldToFilter = fieldSchema.fieldToFilter;\n          const validate = validatable.includes(fieldToFilter);\n\n          if (validate) {\n            const filter = this.filters[fieldToFilter];\n\n            /**\n             * Get all validatable fields.\n             * Use parsed value of filters that are set,\n             * otherwise fall back to `filterValue` value if not set.\n             */\n            const filterValue = filter\n              ? filter.isMultiple\n                ? filter.filterBy\n                : filter.filterBy[0]\n              : this.filterValues[filterIndex];\n\n            this.validationValues[fieldToFilter] = filterValue;\n          }\n        });\n      },\n\n      /**\n       * Change handler for filter fields\n       */\n      onChange(filter, filterValues, filterIndex) {\n        if (filter.on?.change) {\n          // Maps to `on.change` handlers in the filter schema.\n          filter.on.change(filterValues, filterIndex);\n        }\n      },\n\n      /**\n       * Select input event handler for filter fields\n       */\n      onSelectInput(newValue, filter, filterIndex) {\n        if (newValue === undefined) {\n          delete this.filterValues[filterIndex]; // prevent undefined filterValues which cause an empty result list\n        } else {\n          this.filterValues[filterIndex] = newValue;\n        }\n\n        this.onChange(filter, this.filterValues, filterIndex);\n      },\n\n      /**\n       * Get filter values from local storage.\n       * @returns {any}\n       */\n      getPersistentFilterValues() {\n        return persistentStorage.get('filter-values');\n      },\n\n      /**\n       * Clone new filterValues to remove reactivity, and save them to localStorage.\n       * @param {object} newValues - the filterValues to be persisted in localStorage\n       */\n      persistFilterValues(newValues) {\n        persistentStorage.set('filter-values', cloneDeep(newValues));\n      },\n    },\n  };\n</script>\n\n<template>\n  <div class=\"tw-ll-grid tw-grid-cols-4 md:tw-grid-cols-12\">\n    <template v-for=\"(filter, filterIndex) in schema\">\n      <div\n        v-if=\"!filter.hidden\"\n        :key=\"`${filterIndex} ${forceRenderCount}`\"\n        class=\"field-wrapper tw-col-span-4 md:tw-col-span-3\"\n        :class=\"{ 'max-md:tw-hidden': !filter.type, 'tw-flex tw-items-end': filter.type === 'll-checkbox' }\"\n        :data-test=\"`filter|${filter.fieldToFilter}`\"\n      >\n        <!-- Filter component -->\n        <ll-select\n          v-if=\"filter.type === 'll-select'\"\n          v-bind=\"filter.attributes\"\n          :error=\"validation?.fields[filter.fieldToFilter] && validation?.getError(filter.fieldToFilter)\"\n          :label=\"filter.label\"\n          :model-value=\"filterValues[filterIndex]\"\n          @update:model-value=\"(newValue) => onSelectInput(newValue, filter, filterIndex)\"\n        />\n        <ll-checkbox\n          v-else-if=\"filter.type === 'll-checkbox'\"\n          v-model:checked=\"filterValues[filterIndex]\"\n          v-bind=\"filter.attributes\"\n          :error-text=\"validation?.fields[filter.fieldToFilter] && validation?.getError(filter.fieldToFilter)\"\n          :label=\"filter.label\"\n          @update:checked=\"onChange(filter, filterValues, filterIndex)\"\n        />\n        <ll-radio\n          v-else-if=\"filter.type === 'll-radio'\"\n          v-model:checked=\"filterValues[filterIndex]\"\n          v-bind=\"filter.attributes\"\n          :error-text=\"validation?.fields[filter.fieldToFilter] && validation?.getError(filter.fieldToFilter)\"\n          :label=\"filter.label\"\n          @update:checked=\"onChange(filter, filterValues, filterIndex)\"\n        />\n        <component\n          v-bind=\"filter.attributes\"\n          :is=\"filter.type\"\n          v-else-if=\"filter.type\"\n          v-model=\"filterValues[filterIndex]\"\n          :error-text=\"validation?.fields[filter.fieldToFilter] && validation?.getError(filter.fieldToFilter)\"\n          :label=\"filter.label\"\n          @update:model-value=\"onChange(filter, filterValues, filterIndex)\"\n        >\n          <template v-if=\"filter.slots && filter.slots.selected\" #selected=\"{ option }\">\n            <component :is=\"filter.slots.selected\" v-bind=\"option.props\" />\n          </template>\n          <template v-if=\"filter.slots && filter.slots.option\" #option=\"{ option }\">\n            <component :is=\"filter.slots.option\" v-bind=\"option.props\" />\n          </template>\n          <template v-if=\"filter.slots && filter.slots.prepend\" #prepend>\n            <!-- eslint-disable-next-line vue/no-v-html -->\n            <span v-html=\"filter.slots.prepend\"></span>\n          </template>\n          <template v-if=\"filter.slots && filter.slots.append\" #append>\n            <!-- eslint-disable-next-line vue/no-v-html -->\n            <span v-html=\"filter.slots.append\"></span>\n          </template>\n        </component>\n      </div>\n    </template>\n    <div\n      class=\"button-grid tw-col-span-4 tw-flex tw-items-end tw-justify-end md:tw-col-span-12\"\n      :class=\"$style['filter-button-group']\"\n    >\n      <ll-button secondary data-test=\"button|reset-filters\" :disabled=\"disableClear\" @click=\"resetFilters\">\n        {{ clearText }}\n      </ll-button>\n      <ll-button\n        primary\n        data-test=\"button|apply-filters\"\n        :disabled=\"disableApply || validation?.hasErrors\"\n        @click=\"applyFilters\"\n      >\n        {{ applyText }}\n      </ll-button>\n    </div>\n  </div>\n</template>\n\n<style module>\n  .filter-button-group {\n    @media screen('max-md') {\n      display: flex;\n      flex-direction: column-reverse;\n    }\n\n    button {\n      @media screen('max-md') {\n        width: 100% !important;\n      }\n\n      &:nth-child(2) {\n        @media screen('max-md') {\n          margin-bottom: theme('spacing.3');\n        }\n      }\n    }\n  }\n</style>\n"],"names":["_sfc_main","Button","Checkbox","Input","InputOptions","Radio","Select","DatePicker","props","getValidationSchema","toRefs","validationSchema","validationValues","ref","validation","initValidation","values","fieldName","validationRules","rules","fieldRules","fieldRule","useValidation","t","newFilterValues","filters","acc","i","schema","item","trackBy","isObject","isCustomFilterComponent","isMultiple","filterBy","v","groupedWith","nextTick","LLLV_CHANGE_TRIGGERS","trigger","filterIndex","newValues","merge","validatable","fieldSchema","fieldToFilter","filter","filterValue","filterValues","_a","newValue","persistentStorage","cloneDeep","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_openBlock","_createElementBlock","_Fragment","_renderList","$props","_createCommentVNode","$data","_normalizeClass","_createBlock","_component_ll_select","_mergeProps","$setup","_b","$options","_component_ll_checkbox","$event","_c","_d","_component_ll_radio","_e","_f","_resolveDynamicComponent","_g","_h","_createSlots","_withCtx","option","_createElementVNode","_ctx","_createVNode","_component_ll_button","_createTextVNode","_toDisplayString"],"mappings":"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"}

package/dist/Icon.js

@@ -96,6 +96,9 @@ const v = [
   "image",
   "import",
   "keyboard-return",
+  "tier-1",
+  "tier-2",
+  "tier-3",
   "license-approved",
   "license-certificate",
   "lightbulb",

package/dist/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../src/components/Icon/Icon.types.ts","../src/components/Icon/Icon.vue"],"sourcesContent":["export const iconNames = [\n  'action-dots',\n  'activity',\n  'alert-bell',\n  'archive',\n  'arrow-down',\n  'arrow-left',\n  'arrow-right',\n  'arrow-up',\n  'badge-discount',\n  'badge-seller-elite',\n  'badge-seller-power',\n  'badge-seller-verified',\n  'book-customer',\n  'building-office',\n  'bulk-add',\n  'calendar-reschedule',\n  'calendar',\n  'camera',\n  'caret-down',\n  'caret-up',\n  'change-log',\n  'check',\n  'chevron-down',\n  'chevron-left',\n  'chevron-right',\n  'chevron-up',\n  'circle-check',\n  'circle-close',\n  'circle-dollar',\n  'circle-empty',\n  'circle-info',\n  'circle-partial',\n  'circle-percent',\n  'circle-question-mark',\n  'circle-status',\n  'circle-warning',\n  'clipboard-checkmark',\n  'clipboard-inventory',\n  'close',\n  'combine',\n  'compass',\n  'contact',\n  'contract',\n  'copy',\n  'credit-card',\n  'credit-profile',\n  'dashboard',\n  'document-accept',\n  'document-invoice',\n  'document-recieved',\n  'document-sent',\n  'document-view',\n  'document',\n  'dolly',\n  'download',\n  'edit',\n  'ellipsis',\n  'envelope-open',\n  'envelope',\n  'equals',\n  'export',\n  'figma',\n  'file-csv',\n  'file',\n  'filter-funnel',\n  'filter-line',\n  'flag',\n  'folder',\n  'folder-bar-graph',\n  'folder-orders',\n  'font-bold',\n  'font-clear-format',\n  'font-italic',\n  'font-underline',\n  'gear',\n  'github',\n  'globe',\n  'graph-bar-chart',\n  'graph-line-chart',\n  'graph-pie-chart',\n  'hazard',\n  'hazard-outline',\n  'headset-agent',\n  'headset-mic',\n  'heart-filled',\n  'heart-outline',\n  'help-question-mark',\n  'hide',\n  'history',\n  'home',\n  'image',\n  'import',\n  'keyboard-return',\n  'license-approved',\n  'license-certificate',\n  'lightbulb',\n  'link-add',\n  'link-unlink',\n  'link',\n  'list-bulleted',\n  'list-items',\n  'list-numbered',\n  'loading-big',\n  'loading-empty',\n  'loading-small',\n  'location',\n  'lock-unlock',\n  'lock',\n  'logo-facebook',\n  'logo-instagram',\n  'logo-linkedin',\n  'logo-ll',\n  'logo-metrc',\n  'logo-plaid',\n  'logo-x',\n  'logo-youtube',\n  'logout',\n  'medical',\n  'megaphone-sound',\n  'megaphone',\n  'menu',\n  'message-dispute',\n  'message-reply',\n  'message',\n  'minus',\n  'mj-leaf',\n  'money',\n  'note-add',\n  'note',\n  'open-in-new',\n  'paperclip',\n  'paper-plane',\n  'performance',\n  'phone',\n  'plus',\n  'preview',\n  'print',\n  'product-menu-manage',\n  'product-menu-search',\n  'product-menu',\n  'queue-add',\n  'queue',\n  'recent',\n  'refresh',\n  'register',\n  'reply',\n  'report-download',\n  'sample',\n  'save',\n  'scale-law',\n  'scale-weight',\n  'search',\n  'seed-cycle',\n  'share',\n  'shop-bag-browse',\n  'shop-bag-reorder',\n  'shop-bag',\n  'shop-basket',\n  'shop-cart-add',\n  'shop-cart',\n  'show',\n  'sign-dollar',\n  'sign-percent',\n  'sort',\n  'split',\n  'star-filled',\n  'star-outline',\n  'storefront',\n  'submit',\n  'swap-horizontal',\n  'swap-vertical',\n  'tag-star',\n  'tag',\n  'test-results',\n  'ticket-star',\n  'ticket',\n  'tool-dropper',\n  'tool-wrench',\n  'transfer',\n  'trashcan',\n  'truck',\n  'upload',\n  'user-add',\n  'user-admin',\n  'user-check',\n  'user',\n  'view-card',\n  'view-detailed',\n  'view-list',\n  'warehouse',\n  'working',\n] as const;\n\nexport type IconName = (typeof iconNames)[number];\n\nexport enum IconSizes {\n  Standard = 'standard',\n  Dense = 'dense',\n  Small = 'small',\n  Large = 'large',\n}\n\nexport type IconSize = `${IconSizes}`;\n","<script lang=\"ts\">\n  export * from './Icon.types';\n</script>\n\n<script lang=\"ts\" setup>\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, inject, useCssModule } from 'vue';\n  import InlineSvg from 'vue-inline-svg';\n\n  import { StashProvideState } from '../../../types/misc';\n  import { IconName, iconNames, IconSize } from './Icon.types';\n\n  export interface IconProps {\n    id?: string;\n\n    /**\n     * The filename of the icon that should be displayed\n     */\n    name: IconName;\n\n    /**\n     * Accessible, short-text description for the icon. Not rendered as part of the graphic, but\n     * browsers usually display it as a tooltip and screen readers use this.\n     */\n    title?: string;\n\n    /**\n     * The size of the icon\n     * Options: large (32x32px), default (24x24px), dense (20x20px), small (14x14px).\n     */\n    size?: IconSize;\n\n    /**\n     * @deprecated Use the `size` prop with value \"dense\" instead\n     */\n    dense?: boolean;\n\n    /**\n`     * @deprecated Use the `size` prop with value \"small\" instead\n     */\n    small?: boolean;\n\n    /**\n     * Icon's custom static path. It'll default to either the staticPath defined on the library installation or '/static' if none are provided.\n     */\n    staticPath?: string;\n  }\n\n  defineOptions({\n    name: 'll-icon',\n  });\n\n  const props = withDefaults(defineProps<IconProps>(), {\n    id: () => uniqueId('ll-icon-'),\n    size: 'standard',\n    title: '',\n    staticPath: '',\n  });\n  const classes = useCssModule();\n  const stashOptions = inject<Partial<StashProvideState>>('stashOptions', {\n    staticPath: '/static',\n  });\n\n  const computedName = computed<IconName>(() => {\n    if (iconNames.includes(props.name)) {\n      return props.name;\n    }\n\n    return 'mj-leaf';\n  });\n\n  const computedStaticPath = computed(() => {\n    return props.staticPath || stashOptions?.staticPath;\n  });\n\n  /**\n   * Event handler to add the use tag for the specific icon we need to the svg\n   */\n  const transformSvgSource = (svgElem: SVGElement) => {\n    if (!svgElem) {\n      return svgElem;\n    }\n\n    const useNode = document.createElement('use');\n    useNode.setAttribute('href', `#${computedName.value}`);\n\n    // Grab icon from sprite\n    const symbolNode = svgElem.querySelector(`#${computedName.value}`);\n\n    // This really shouldn't happen but if the spritesheet gets out of sync with the `IconName` type it could\n    if (!symbolNode) {\n      // still insert <use> element but it will not be found (this is more for tests than anything else)\n      svgElem.insertBefore(useNode, svgElem.firstChild);\n      return svgElem;\n    }\n\n    /**\n     * Repeatedly inlining the entire spritesheet was causing failures in mobile Safari, and also\n     * performance issues on long list pages where the svg was being inlined over and over.\n     * Since the SVG is cached after the first request, this callback is just removing the unnecessary\n     * <symbol> nodes to slim down the DOM manipulation and insertion.\n     */\n    // Replace all children with just the one <symbol> element and <use> element\n    svgElem.replaceChildren(symbolNode, useNode);\n\n    return svgElem;\n  };\n</script>\n\n<!-- Use inline svg so that requests to pull the spritesheet are done via JS and avoid\n  browser restrictions for different domains for svgs.  inline svg also caches the requests\n  so we don't load the spritesheet multiple times\n  Reference: https://oreillymedia.github.io/Using_SVG/extras/ch10-cors.html -->\n<template>\n  <InlineSvg\n    :id=\"props.id\"\n    role=\"presentation\"\n    :aria-labelledby=\"props.id\"\n    class=\"stash-icon\"\n    :class=\"[\n      classes.icon,\n      `icon--${props.name}`,\n      {\n        [classes.standard]: props.size === 'standard',\n        [classes.dense]: props.size === 'dense' || props.dense,\n        [classes.small]: props.size === 'small' || props.small,\n        [classes.large]: props.size === 'large',\n      },\n    ]\"\n    data-test=\"stash-icon\"\n    :src=\"`${computedStaticPath}/spritesheet.svg`\"\n    :title=\"props.title\"\n    :transform-source=\"transformSvgSource\"\n  />\n</template>\n\n<style module>\n  .icon {\n    display: inline-block;\n    fill: currentcolor;\n    vertical-align: middle;\n  }\n\n  .standard {\n    height: 24px;\n    min-height: 24px;\n    min-width: 24px;\n    width: 24px;\n  }\n\n  .dense {\n    height: 20px;\n    min-height: 20px;\n    min-width: 20px;\n    width: 20px;\n  }\n\n  .small {\n    height: 14px;\n    min-height: 14px;\n    min-width: 14px;\n    width: 14px;\n  }\n\n  .large {\n    height: 32px;\n    min-height: 32px;\n    min-width: 32px;\n    width: 32px;\n  }\n</style>\n"],"names":["iconNames","IconSizes","props","__props","classes","useCssModule","stashOptions","inject","computedName","computed","computedStaticPath","transformSvgSource","svgElem","useNode","symbolNode"],"mappings":";;;;AAAO,MAAMA,IAAY;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAIY,IAAAC,sBAAAA,OACVA,EAAA,WAAW,YACXA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SAJEA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;AChJV,UAAMC,IAAQC,GAMRC,IAAUC,EAAa,GACvBC,IAAeC,EAAmC,gBAAgB;AAAA,MACtE,YAAY;AAAA,IAAA,CACb,GAEKC,IAAeC,EAAmB,MAClCT,EAAU,SAASE,EAAM,IAAI,IACxBA,EAAM,OAGR,SACR,GAEKQ,IAAqBD,EAAS,MAC3BP,EAAM,eAAcI,KAAA,gBAAAA,EAAc,WAC1C,GAKKK,IAAqB,CAACC,MAAwB;AAClD,UAAI,CAACA;AACI,eAAAA;AAGH,YAAAC,IAAU,SAAS,cAAc,KAAK;AAC5C,MAAAA,EAAQ,aAAa,QAAQ,IAAIL,EAAa,KAAK,EAAE;AAGrD,YAAMM,IAAaF,EAAQ,cAAc,IAAIJ,EAAa,KAAK,EAAE;AAGjE,aAAKM,KAaGF,EAAA,gBAAgBE,GAAYD,CAAO,GAEpCD,MAbGA,EAAA,aAAaC,GAASD,EAAQ,UAAU,GACzCA;AAAA,IAaX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Icon.js","sources":["../src/components/Icon/Icon.types.ts","../src/components/Icon/Icon.vue"],"sourcesContent":["/**\n * To add a new icon, follow these steps:\n *\n * https://github.com/LeafLink/stash/blob/main/CONTRIBUTING.md#adding-a-new-icon\n */\nexport const iconNames = [\n  'action-dots',\n  'activity',\n  'alert-bell',\n  'archive',\n  'arrow-down',\n  'arrow-left',\n  'arrow-right',\n  'arrow-up',\n  'badge-discount',\n  'badge-seller-elite',\n  'badge-seller-power',\n  'badge-seller-verified',\n  'book-customer',\n  'building-office',\n  'bulk-add',\n  'calendar-reschedule',\n  'calendar',\n  'camera',\n  'caret-down',\n  'caret-up',\n  'change-log',\n  'check',\n  'chevron-down',\n  'chevron-left',\n  'chevron-right',\n  'chevron-up',\n  'circle-check',\n  'circle-close',\n  'circle-dollar',\n  'circle-empty',\n  'circle-info',\n  'circle-partial',\n  'circle-percent',\n  'circle-question-mark',\n  'circle-status',\n  'circle-warning',\n  'clipboard-checkmark',\n  'clipboard-inventory',\n  'close',\n  'combine',\n  'compass',\n  'contact',\n  'contract',\n  'copy',\n  'credit-card',\n  'credit-profile',\n  'dashboard',\n  'document-accept',\n  'document-invoice',\n  'document-recieved',\n  'document-sent',\n  'document-view',\n  'document',\n  'dolly',\n  'download',\n  'edit',\n  'ellipsis',\n  'envelope-open',\n  'envelope',\n  'equals',\n  'export',\n  'figma',\n  'file-csv',\n  'file',\n  'filter-funnel',\n  'filter-line',\n  'flag',\n  'folder',\n  'folder-bar-graph',\n  'folder-orders',\n  'font-bold',\n  'font-clear-format',\n  'font-italic',\n  'font-underline',\n  'gear',\n  'github',\n  'globe',\n  'graph-bar-chart',\n  'graph-line-chart',\n  'graph-pie-chart',\n  'hazard',\n  'hazard-outline',\n  'headset-agent',\n  'headset-mic',\n  'heart-filled',\n  'heart-outline',\n  'help-question-mark',\n  'hide',\n  'history',\n  'home',\n  'image',\n  'import',\n  'keyboard-return',\n  'tier-1',\n  'tier-2',\n  'tier-3',\n  'license-approved',\n  'license-certificate',\n  'lightbulb',\n  'link-add',\n  'link-unlink',\n  'link',\n  'list-bulleted',\n  'list-items',\n  'list-numbered',\n  'loading-big',\n  'loading-empty',\n  'loading-small',\n  'location',\n  'lock-unlock',\n  'lock',\n  'logo-facebook',\n  'logo-instagram',\n  'logo-linkedin',\n  'logo-ll',\n  'logo-metrc',\n  'logo-plaid',\n  'logo-x',\n  'logo-youtube',\n  'logout',\n  'medical',\n  'megaphone-sound',\n  'megaphone',\n  'menu',\n  'message-dispute',\n  'message-reply',\n  'message',\n  'minus',\n  'mj-leaf',\n  'money',\n  'note-add',\n  'note',\n  'open-in-new',\n  'paperclip',\n  'paper-plane',\n  'performance',\n  'phone',\n  'plus',\n  'preview',\n  'print',\n  'product-menu-manage',\n  'product-menu-search',\n  'product-menu',\n  'queue-add',\n  'queue',\n  'recent',\n  'refresh',\n  'register',\n  'reply',\n  'report-download',\n  'sample',\n  'save',\n  'scale-law',\n  'scale-weight',\n  'search',\n  'seed-cycle',\n  'share',\n  'shop-bag-browse',\n  'shop-bag-reorder',\n  'shop-bag',\n  'shop-basket',\n  'shop-cart-add',\n  'shop-cart',\n  'show',\n  'sign-dollar',\n  'sign-percent',\n  'sort',\n  'split',\n  'star-filled',\n  'star-outline',\n  'storefront',\n  'submit',\n  'swap-horizontal',\n  'swap-vertical',\n  'tag-star',\n  'tag',\n  'test-results',\n  'ticket-star',\n  'ticket',\n  'tool-dropper',\n  'tool-wrench',\n  'transfer',\n  'trashcan',\n  'truck',\n  'upload',\n  'user-add',\n  'user-admin',\n  'user-check',\n  'user',\n  'view-card',\n  'view-detailed',\n  'view-list',\n  'warehouse',\n  'working',\n] as const;\n\nexport type IconName = (typeof iconNames)[number];\n\nexport enum IconSizes {\n  Standard = 'standard',\n  Dense = 'dense',\n  Small = 'small',\n  Large = 'large',\n}\n\nexport type IconSize = `${IconSizes}`;\n","<script lang=\"ts\">\n  export * from './Icon.types';\n</script>\n\n<script lang=\"ts\" setup>\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, inject, useCssModule } from 'vue';\n  import InlineSvg from 'vue-inline-svg';\n\n  import { StashProvideState } from '../../../types/misc';\n  import { IconName, iconNames, IconSize } from './Icon.types';\n\n  export interface IconProps {\n    id?: string;\n\n    /**\n     * The filename of the icon that should be displayed\n     */\n    name: IconName;\n\n    /**\n     * Accessible, short-text description for the icon. Not rendered as part of the graphic, but\n     * browsers usually display it as a tooltip and screen readers use this.\n     */\n    title?: string;\n\n    /**\n     * The size of the icon\n     * Options: large (32x32px), default (24x24px), dense (20x20px), small (14x14px).\n     */\n    size?: IconSize;\n\n    /**\n     * @deprecated Use the `size` prop with value \"dense\" instead\n     */\n    dense?: boolean;\n\n    /**\n`     * @deprecated Use the `size` prop with value \"small\" instead\n     */\n    small?: boolean;\n\n    /**\n     * Icon's custom static path. It'll default to either the staticPath defined on the library installation or '/static' if none are provided.\n     */\n    staticPath?: string;\n  }\n\n  defineOptions({\n    name: 'll-icon',\n  });\n\n  const props = withDefaults(defineProps<IconProps>(), {\n    id: () => uniqueId('ll-icon-'),\n    size: 'standard',\n    title: '',\n    staticPath: '',\n  });\n  const classes = useCssModule();\n  const stashOptions = inject<Partial<StashProvideState>>('stashOptions', {\n    staticPath: '/static',\n  });\n\n  const computedName = computed<IconName>(() => {\n    if (iconNames.includes(props.name)) {\n      return props.name;\n    }\n\n    return 'mj-leaf';\n  });\n\n  const computedStaticPath = computed(() => {\n    return props.staticPath || stashOptions?.staticPath;\n  });\n\n  /**\n   * Event handler to add the use tag for the specific icon we need to the svg\n   */\n  const transformSvgSource = (svgElem: SVGElement) => {\n    if (!svgElem) {\n      return svgElem;\n    }\n\n    const useNode = document.createElement('use');\n    useNode.setAttribute('href', `#${computedName.value}`);\n\n    // Grab icon from sprite\n    const symbolNode = svgElem.querySelector(`#${computedName.value}`);\n\n    // This really shouldn't happen but if the spritesheet gets out of sync with the `IconName` type it could\n    if (!symbolNode) {\n      // still insert <use> element but it will not be found (this is more for tests than anything else)\n      svgElem.insertBefore(useNode, svgElem.firstChild);\n      return svgElem;\n    }\n\n    /**\n     * Repeatedly inlining the entire spritesheet was causing failures in mobile Safari, and also\n     * performance issues on long list pages where the svg was being inlined over and over.\n     * Since the SVG is cached after the first request, this callback is just removing the unnecessary\n     * <symbol> nodes to slim down the DOM manipulation and insertion.\n     */\n    // Replace all children with just the one <symbol> element and <use> element\n    svgElem.replaceChildren(symbolNode, useNode);\n\n    return svgElem;\n  };\n</script>\n\n<!-- Use inline svg so that requests to pull the spritesheet are done via JS and avoid\n  browser restrictions for different domains for svgs.  inline svg also caches the requests\n  so we don't load the spritesheet multiple times\n  Reference: https://oreillymedia.github.io/Using_SVG/extras/ch10-cors.html -->\n<template>\n  <InlineSvg\n    :id=\"props.id\"\n    role=\"presentation\"\n    :aria-labelledby=\"props.id\"\n    class=\"stash-icon\"\n    :class=\"[\n      classes.icon,\n      `icon--${props.name}`,\n      {\n        [classes.standard]: props.size === 'standard',\n        [classes.dense]: props.size === 'dense' || props.dense,\n        [classes.small]: props.size === 'small' || props.small,\n        [classes.large]: props.size === 'large',\n      },\n    ]\"\n    data-test=\"stash-icon\"\n    :src=\"`${computedStaticPath}/spritesheet.svg`\"\n    :title=\"props.title\"\n    :transform-source=\"transformSvgSource\"\n  />\n</template>\n\n<style module>\n  .icon {\n    display: inline-block;\n    fill: currentcolor;\n    vertical-align: middle;\n  }\n\n  .standard {\n    height: 24px;\n    min-height: 24px;\n    min-width: 24px;\n    width: 24px;\n  }\n\n  .dense {\n    height: 20px;\n    min-height: 20px;\n    min-width: 20px;\n    width: 20px;\n  }\n\n  .small {\n    height: 14px;\n    min-height: 14px;\n    min-width: 14px;\n    width: 14px;\n  }\n\n  .large {\n    height: 32px;\n    min-height: 32px;\n    min-width: 32px;\n    width: 32px;\n  }\n</style>\n"],"names":["iconNames","IconSizes","props","__props","classes","useCssModule","stashOptions","inject","computedName","computed","computedStaticPath","transformSvgSource","svgElem","useNode","symbolNode"],"mappings":";;;;AAKO,MAAMA,IAAY;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAIY,IAAAC,sBAAAA,OACVA,EAAA,WAAW,YACXA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SAJEA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;ACxJV,UAAMC,IAAQC,GAMRC,IAAUC,EAAa,GACvBC,IAAeC,EAAmC,gBAAgB;AAAA,MACtE,YAAY;AAAA,IAAA,CACb,GAEKC,IAAeC,EAAmB,MAClCT,EAAU,SAASE,EAAM,IAAI,IACxBA,EAAM,OAGR,SACR,GAEKQ,IAAqBD,EAAS,MAC3BP,EAAM,eAAcI,KAAA,gBAAAA,EAAc,WAC1C,GAKKK,IAAqB,CAACC,MAAwB;AAClD,UAAI,CAACA;AACI,eAAAA;AAGH,YAAAC,IAAU,SAAS,cAAc,KAAK;AAC5C,MAAAA,EAAQ,aAAa,QAAQ,IAAIL,EAAa,KAAK,EAAE;AAGrD,YAAMM,IAAaF,EAAQ,cAAc,IAAIJ,EAAa,KAAK,EAAE;AAGjE,aAAKM,KAaGF,EAAA,gBAAgBE,GAAYD,CAAO,GAEpCD,MAbGA,EAAA,aAAaC,GAASD,EAAQ,UAAU,GACzCA;AAAA,IAaX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}