@leaflink/stash 44.0.0-beta.1 → 44.0.0-beta.11

package/dist/ConfirmationCodeInput.js

@@ -1,6 +1,6 @@
 import { defineComponent as k, useCssModule as C, ref as m, watch as y, openBlock as c, createElementBlock as i, createElementVNode as E, Fragment as I, renderList as N, withDirectives as T, normalizeClass as p, unref as f, vModelText as D, toDisplayString as v, createCommentVNode as _ } from "vue";
 import { _ as S } from "./_plugin-vue_export-helper-dad06003.js";
-const B = { class: "tw-flex tw-gap-6 tw-mb-3" }, M = ["onUpdate:modelValue", "onPaste", "onKeyup", "onClick"], K = /* @__PURE__ */ k({
+const z = { class: "tw-mb-3 tw-flex tw-gap-6" }, q = ["onUpdate:modelValue", "onPaste", "onKeyup", "onClick"], B = /* @__PURE__ */ k({
   __name: "ConfirmationCodeInput",
   props: {
     digitCount: { default: 6 },
@@ -10,10 +10,10 @@ const B = { class: "tw-flex tw-gap-6 tw-mb-3" }, M = ["onUpdate:modelValue", "on
   emits: ["update:model-value"],
   setup(x, { emit: d }) {
     const a = x, l = C(), s = m([]), n = m();
-    function w(e) {
+    function g(e) {
       e.data && e.target.nextElementSibling ? e.target.nextElementSibling.focus() : e.data == null && e.target.previousElementSibling && e.target.previousElementSibling.focus();
     }
-    function g(e, o) {
+    function h(e, o) {
       if (e.preventDefault(), s.value[o]) {
         n.value[o].focus();
         return;
@@ -23,7 +23,7 @@ const B = { class: "tw-flex tw-gap-6 tw-mb-3" }, M = ["onUpdate:modelValue", "on
         u && (t = r + 1);
       }), n.value[t].focus();
     }
-    function h(e, o) {
+    function w(e, o) {
       if (e.key !== "Backspace" && !new RegExp("^([0-9])$").test(e.key)) {
         e.preventDefault();
         return;
@@ -74,9 +74,9 @@ const B = { class: "tw-flex tw-gap-6 tw-mb-3" }, M = ["onUpdate:modelValue", "on
       ref: "otpCont",
       class: "stash-confirmation-code-input tw-inline-block",
       "data-test": "stash-confirmation-code-input",
-      onInput: w
+      onInput: g
     }, [
-      E("div", B, [
+      E("div", z, [
         (c(!0), i(I, null, N(a.digitCount, (t, u) => T((c(), i("input", {
           key: t,
           ref_for: !0,
@@ -86,40 +86,40 @@ const B = { class: "tw-flex tw-gap-6 tw-mb-3" }, M = ["onUpdate:modelValue", "on
           "data-test": "stash-confirmation-code-input__otp",
           type: "text",
           maxlength: "1",
-          class: p(["tw-p-2 tw-border focus:tw-border-blue-500 tw-text-center tw-text-ice-900 tw-font-medium tw-text-base", [
+          class: p(["tw-border tw-p-2 tw-text-center tw-text-base tw-font-medium tw-text-ice-900 focus:tw-border-blue-500", [
             f(l).otpCodeInput,
             { [f(l)["has-error"]]: !!a.errorText },
             { [f(l)["has-success"]]: !!a.successText }
           ]]),
           inputmode: "numeric",
           onPaste: (r) => t === 1 && b(r),
-          onKeyup: (r) => h(r, u),
-          onClick: (r) => g(r, u)
-        }, null, 42, M)), [
+          onKeyup: (r) => w(r, u),
+          onClick: (r) => h(r, u)
+        }, null, 42, q)), [
           [D, s.value[t - 1]]
         ])), 128))
       ]),
       a.errorText ? (c(), i("small", {
         key: 0,
-        class: p(["tw-block tw-text-red-500 tw-text-center", f(l).error]),
+        class: p(["tw-block tw-text-center tw-text-red-500", f(l).error]),
         "data-test": "field-error"
       }, v(a.errorText), 3)) : _("", !0),
       a.successText ? (c(), i("small", {
         key: 1,
-        class: p(["tw-block tw-text-green-500 tw-text-center", f(l).error]),
+        class: p(["tw-block tw-text-center tw-text-green-500", f(l).error]),
         "data-test": "field-error"
       }, v(a.successText), 3)) : _("", !0)
     ], 544));
   }
-}), P = "_otpCodeInput_1wm2s_2", U = "_error_1wm2s_21", $ = {
-  otpCodeInput: P,
-  "has-error": "_has-error_1wm2s_9",
-  "has-success": "_has-success_1wm2s_13",
-  error: U
-}, j = {
-  $style: $
-}, V = /* @__PURE__ */ S(K, [["__cssModules", j]]);
+}), M = "_otpCodeInput_1qtz8_2", K = "_error_1qtz8_21", P = {
+  otpCodeInput: M,
+  "has-error": "_has-error_1qtz8_9",
+  "has-success": "_has-success_1qtz8_13",
+  error: K
+}, U = {
+  $style: P
+}, F = /* @__PURE__ */ S(B, [["__cssModules", U]]);
 export {
-  V as default
+  F as default
 };
 //# sourceMappingURL=ConfirmationCodeInput.js.map

package/dist/ConfirmationCodeInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmationCodeInput.js","sources":["../src/components/ConfirmationCodeInput/ConfirmationCodeInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { Ref, ref, useCssModule, watch } from 'vue';\n\n  const classes = useCssModule();\n\n  export interface VerificationCodeInputProps {\n    digitCount?: number;\n    /**\n     * Error text to display.\n     */\n    errorText?: string;\n    /**\n     * Success text to display.\n     */\n    successText?: string;\n  }\n\n  const props = withDefaults(defineProps<VerificationCodeInputProps>(), {\n    digitCount: 6,\n    errorText: undefined,\n    successText: undefined,\n  });\n\n  const emit =\n    defineEmits<{\n      (e: 'update:model-value', value: number | null): void;\n    }>();\n\n  const data: Ref<Array<string>> = ref([]);\n  const inputEl = ref();\n\n  function handleOtpInput(e) {\n    if (e.data && e.target.nextElementSibling) {\n      e.target.nextElementSibling.focus();\n    } else if (e.data == null && e.target.previousElementSibling) {\n      e.target.previousElementSibling.focus();\n    }\n  }\n\n  function handleFocus(event, elementIndex: number) {\n    event.preventDefault();\n\n    if (data.value[elementIndex]) {\n      inputEl.value[elementIndex].focus();\n\n      return;\n    }\n\n    let focusedIndex = 0;\n\n    data.value.forEach((value, index) => {\n      if (value) {\n        focusedIndex = index + 1;\n      }\n    });\n\n    inputEl.value[focusedIndex].focus();\n  }\n\n  function handleKeyUp(e: KeyboardEvent, index: number) {\n    if (e.key !== 'Backspace' && !new RegExp('^([0-9])$').test(e.key)) {\n      e.preventDefault();\n      return;\n    }\n\n    let focusedIndex = 0;\n\n    if (index !== 0) {\n      focusedIndex = index - 1;\n    } else {\n      focusedIndex = 0;\n    }\n\n    if (e.key === 'Backspace') {\n      if (index + 1 === data.value.length - 1 && data.value[index]) {\n        inputEl.value[index + 1].focus();\n        return;\n      }\n\n      if (data.value[index]) {\n        return;\n      }\n\n      data.value[focusedIndex] = '';\n      inputEl.value[focusedIndex].focus();\n\n      return;\n    }\n\n    if (!new RegExp('^([0-9])$').test(e.key) && !data.value[index]) {\n      data.value[focusedIndex] = '';\n      inputEl.value[focusedIndex].focus();\n      return;\n    }\n  }\n\n  function handlePaste(e: ClipboardEvent) {\n    const pasteData = e.clipboardData?.getData('text');\n\n    if (isNaN(Number(pasteData))) {\n      inputEl.value[0].focus();\n      return;\n    }\n\n    let nextEl = inputEl.value[0].nextElementSibling;\n    if (pasteData) {\n      for (let i = 1; i < pasteData.length; i++) {\n        if (nextEl) {\n          data.value[i] = pasteData[i];\n          nextEl = nextEl.nextElementSibling;\n        }\n      }\n    }\n  }\n\n  watch(\n    () => data,\n    (newVal) => {\n      if (newVal.value.join('') === '') {\n        emit('update:model-value', null);\n      } else {\n        if (isNaN(Number(newVal.value[0]))) {\n          data.value[0] = '';\n          return;\n        }\n        emit('update:model-value', Number(newVal.value.join('')));\n      }\n    },\n    { deep: true },\n  );\n</script>\n\n<template>\n  <form\n    ref=\"otpCont\"\n    class=\"stash-confirmation-code-input tw-inline-block\"\n    data-test=\"stash-confirmation-code-input\"\n    @input=\"handleOtpInput\"\n  >\n    <div class=\"tw-flex tw-gap-6 tw-mb-3\">\n      <template v-for=\"(field, index) in props.digitCount\" :key=\"field\">\n        <input\n          ref=\"inputEl\"\n          v-model=\"data[field - 1]\"\n          data-test=\"stash-confirmation-code-input__otp\"\n          type=\"text\"\n          maxlength=\"1\"\n          class=\"tw-p-2 tw-border focus:tw-border-blue-500 tw-text-center tw-text-ice-900 tw-font-medium tw-text-base\"\n          :class=\"[\n            classes.otpCodeInput,\n            { [classes['has-error']]: !!props.errorText },\n            { [classes['has-success']]: !!props.successText },\n          ]\"\n          inputmode=\"numeric\"\n          @paste=\"field === 1 && handlePaste($event)\"\n          @keyup=\"handleKeyUp($event, index)\"\n          @click=\"(evt) => handleFocus(evt, index)\"\n        />\n      </template>\n    </div>\n    <small\n      v-if=\"props.errorText\"\n      class=\"tw-block tw-text-red-500 tw-text-center\"\n      :class=\"classes.error\"\n      data-test=\"field-error\"\n    >\n      {{ props.errorText }}\n    </small>\n    <small\n      v-if=\"props.successText\"\n      class=\"tw-block tw-text-green-500 tw-text-center\"\n      :class=\"classes.error\"\n      data-test=\"field-error\"\n    >\n      {{ props.successText }}\n    </small>\n  </form>\n</template>\n\n<style module>\n  .otpCodeInput {\n    border-radius: 4px;\n    caret-color: transparent;\n    height: 36px;\n    width: 36px;\n  }\n\n  .otpCodeInput.has-error:not(:focus) {\n    border-color: theme('colors.red.500');\n  }\n\n  .otpCodeInput.has-success:not(:focus) {\n    border-color: theme('colors.green.500');\n  }\n\n  .otpCodeInput:focus {\n    outline: none;\n  }\n\n  .error {\n    margin-top: 4px;\n    white-space: pre-line;\n  }\n</style>\n"],"names":["classes","useCssModule","data","ref","inputEl","handleOtpInput","handleFocus","event","elementIndex","focusedIndex","value","index","handleKeyUp","handlePaste","pasteData","_a","nextEl","i","watch","newVal","emit"],"mappings":";;;;;;;;;;;iBAGQA,IAAUC,KAyBVC,IAA2BC,EAAI,CAAA,CAAE,GACjCC,IAAUD;AAEhB,aAASE,EAAe,GAAG;AACzB,MAAI,EAAE,QAAQ,EAAE,OAAO,qBACnB,EAAA,OAAO,mBAAmB,UACnB,EAAE,QAAQ,QAAQ,EAAE,OAAO,0BAClC,EAAA,OAAO,uBAAuB;IAEpC;AAES,aAAAC,EAAYC,GAAOC,GAAsB;AAG5C,UAFJD,EAAM,eAAe,GAEjBL,EAAK,MAAMM,CAAY,GAAG;AACpB,QAAAJ,EAAA,MAAMI,CAAY,EAAE,MAAM;AAElC;AAAA,MACF;AAEA,UAAIC,IAAe;AAEnB,MAAAP,EAAK,MAAM,QAAQ,CAACQ,GAAOC,MAAU;AACnC,QAAID,MACFD,IAAeE,IAAQ;AAAA,MACzB,CACD,GAEOP,EAAA,MAAMK,CAAY,EAAE,MAAM;AAAA,IACpC;AAES,aAAAG,EAAY,GAAkBD,GAAe;AAChD,UAAA,EAAE,QAAQ,eAAe,CAAC,IAAI,OAAO,WAAW,EAAE,KAAK,EAAE,GAAG,GAAG;AACjE,UAAE,eAAe;AACjB;AAAA,MACF;AAEA,UAAIF,IAAe;AAQf,UANAE,MAAU,IACZF,IAAeE,IAAQ,IAERF,IAAA,GAGb,EAAE,QAAQ,aAAa;AACrB,YAAAE,IAAQ,MAAMT,EAAK,MAAM,SAAS,KAAKA,EAAK,MAAMS,CAAK,GAAG;AAC5D,UAAAP,EAAQ,MAAMO,IAAQ,CAAC,EAAE,MAAM;AAC/B;AAAA,QACF;AAEI,YAAAT,EAAK,MAAMS,CAAK;AAClB;AAGG,QAAAT,EAAA,MAAMO,CAAY,IAAI,IACnBL,EAAA,MAAMK,CAAY,EAAE,MAAM;AAElC;AAAA,MACF;AAEA,UAAI,CAAC,IAAI,OAAO,WAAW,EAAE,KAAK,EAAE,GAAG,KAAK,CAACP,EAAK,MAAMS,CAAK,GAAG;AACzD,QAAAT,EAAA,MAAMO,CAAY,IAAI,IACnBL,EAAA,MAAMK,CAAY,EAAE,MAAM;AAClC;AAAA,MACF;AAAA,IACF;AAEA,aAASI,EAAY,GAAmB;;AACtC,YAAMC,KAAYC,IAAA,EAAE,kBAAF,gBAAAA,EAAiB,QAAQ;AAE3C,UAAI,MAAM,OAAOD,CAAS,CAAC,GAAG;AACpB,QAAAV,EAAA,MAAM,CAAC,EAAE,MAAM;AACvB;AAAA,MACF;AAEA,UAAIY,IAASZ,EAAQ,MAAM,CAAC,EAAE;AAC9B,UAAIU;AACF,iBAASG,IAAI,GAAGA,IAAIH,EAAU,QAAQG;AACpC,UAAID,MACFd,EAAK,MAAMe,CAAC,IAAIH,EAAUG,CAAC,GAC3BD,IAASA,EAAO;AAAA,IAIxB;AAEA,WAAAE;AAAA,MACE,MAAMhB;AAAA,MACN,CAACiB,MAAW;AACV,YAAIA,EAAO,MAAM,KAAK,EAAE,MAAM;AAC5B,UAAAC,EAAK,sBAAsB,IAAI;AAAA,aAC1B;AACL,cAAI,MAAM,OAAOD,EAAO,MAAM,CAAC,CAAC,CAAC,GAAG;AAC7B,YAAAjB,EAAA,MAAM,CAAC,IAAI;AAChB;AAAA,UACF;AACA,UAAAkB,EAAK,sBAAsB,OAAOD,EAAO,MAAM,KAAK,EAAE,CAAC,CAAC;AAAA,QAC1D;AAAA,MACF;AAAA,MACA,EAAE,MAAM,GAAK;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ConfirmationCodeInput.js","sources":["../src/components/ConfirmationCodeInput/ConfirmationCodeInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { Ref, ref, useCssModule, watch } from 'vue';\n\n  const classes = useCssModule();\n\n  export interface VerificationCodeInputProps {\n    digitCount?: number;\n    /**\n     * Error text to display.\n     */\n    errorText?: string;\n    /**\n     * Success text to display.\n     */\n    successText?: string;\n  }\n\n  const props = withDefaults(defineProps<VerificationCodeInputProps>(), {\n    digitCount: 6,\n    errorText: undefined,\n    successText: undefined,\n  });\n\n  const emit =\n    defineEmits<{\n      (e: 'update:model-value', value: number | null): void;\n    }>();\n\n  const data: Ref<Array<string>> = ref([]);\n  const inputEl = ref();\n\n  function handleOtpInput(e) {\n    if (e.data && e.target.nextElementSibling) {\n      e.target.nextElementSibling.focus();\n    } else if (e.data == null && e.target.previousElementSibling) {\n      e.target.previousElementSibling.focus();\n    }\n  }\n\n  function handleFocus(event, elementIndex: number) {\n    event.preventDefault();\n\n    if (data.value[elementIndex]) {\n      inputEl.value[elementIndex].focus();\n\n      return;\n    }\n\n    let focusedIndex = 0;\n\n    data.value.forEach((value, index) => {\n      if (value) {\n        focusedIndex = index + 1;\n      }\n    });\n\n    inputEl.value[focusedIndex].focus();\n  }\n\n  function handleKeyUp(e: KeyboardEvent, index: number) {\n    if (e.key !== 'Backspace' && !new RegExp('^([0-9])$').test(e.key)) {\n      e.preventDefault();\n      return;\n    }\n\n    let focusedIndex = 0;\n\n    if (index !== 0) {\n      focusedIndex = index - 1;\n    } else {\n      focusedIndex = 0;\n    }\n\n    if (e.key === 'Backspace') {\n      if (index + 1 === data.value.length - 1 && data.value[index]) {\n        inputEl.value[index + 1].focus();\n        return;\n      }\n\n      if (data.value[index]) {\n        return;\n      }\n\n      data.value[focusedIndex] = '';\n      inputEl.value[focusedIndex].focus();\n\n      return;\n    }\n\n    if (!new RegExp('^([0-9])$').test(e.key) && !data.value[index]) {\n      data.value[focusedIndex] = '';\n      inputEl.value[focusedIndex].focus();\n      return;\n    }\n  }\n\n  function handlePaste(e: ClipboardEvent) {\n    const pasteData = e.clipboardData?.getData('text');\n\n    if (isNaN(Number(pasteData))) {\n      inputEl.value[0].focus();\n      return;\n    }\n\n    let nextEl = inputEl.value[0].nextElementSibling;\n    if (pasteData) {\n      for (let i = 1; i < pasteData.length; i++) {\n        if (nextEl) {\n          data.value[i] = pasteData[i];\n          nextEl = nextEl.nextElementSibling;\n        }\n      }\n    }\n  }\n\n  watch(\n    () => data,\n    (newVal) => {\n      if (newVal.value.join('') === '') {\n        emit('update:model-value', null);\n      } else {\n        if (isNaN(Number(newVal.value[0]))) {\n          data.value[0] = '';\n          return;\n        }\n        emit('update:model-value', Number(newVal.value.join('')));\n      }\n    },\n    { deep: true },\n  );\n</script>\n\n<template>\n  <form\n    ref=\"otpCont\"\n    class=\"stash-confirmation-code-input tw-inline-block\"\n    data-test=\"stash-confirmation-code-input\"\n    @input=\"handleOtpInput\"\n  >\n    <div class=\"tw-mb-3 tw-flex tw-gap-6\">\n      <template v-for=\"(field, index) in props.digitCount\" :key=\"field\">\n        <input\n          ref=\"inputEl\"\n          v-model=\"data[field - 1]\"\n          data-test=\"stash-confirmation-code-input__otp\"\n          type=\"text\"\n          maxlength=\"1\"\n          class=\"tw-border tw-p-2 tw-text-center tw-text-base tw-font-medium tw-text-ice-900 focus:tw-border-blue-500\"\n          :class=\"[\n            classes.otpCodeInput,\n            { [classes['has-error']]: !!props.errorText },\n            { [classes['has-success']]: !!props.successText },\n          ]\"\n          inputmode=\"numeric\"\n          @paste=\"field === 1 && handlePaste($event)\"\n          @keyup=\"handleKeyUp($event, index)\"\n          @click=\"(evt) => handleFocus(evt, index)\"\n        />\n      </template>\n    </div>\n    <small\n      v-if=\"props.errorText\"\n      class=\"tw-block tw-text-center tw-text-red-500\"\n      :class=\"classes.error\"\n      data-test=\"field-error\"\n    >\n      {{ props.errorText }}\n    </small>\n    <small\n      v-if=\"props.successText\"\n      class=\"tw-block tw-text-center tw-text-green-500\"\n      :class=\"classes.error\"\n      data-test=\"field-error\"\n    >\n      {{ props.successText }}\n    </small>\n  </form>\n</template>\n\n<style module>\n  .otpCodeInput {\n    border-radius: 4px;\n    caret-color: transparent;\n    height: 36px;\n    width: 36px;\n  }\n\n  .otpCodeInput.has-error:not(:focus) {\n    border-color: var(--color-red-500);\n  }\n\n  .otpCodeInput.has-success:not(:focus) {\n    border-color: var(--color-green-500);\n  }\n\n  .otpCodeInput:focus {\n    outline: none;\n  }\n\n  .error {\n    margin-top: 4px;\n    white-space: pre-line;\n  }\n</style>\n"],"names":["classes","useCssModule","data","ref","inputEl","handleOtpInput","handleFocus","event","elementIndex","focusedIndex","value","index","handleKeyUp","handlePaste","pasteData","_a","nextEl","i","watch","newVal","emit"],"mappings":";;;;;;;;;;;iBAGQA,IAAUC,KAyBVC,IAA2BC,EAAI,CAAA,CAAE,GACjCC,IAAUD;AAEhB,aAASE,EAAe,GAAG;AACzB,MAAI,EAAE,QAAQ,EAAE,OAAO,qBACnB,EAAA,OAAO,mBAAmB,UACnB,EAAE,QAAQ,QAAQ,EAAE,OAAO,0BAClC,EAAA,OAAO,uBAAuB;IAEpC;AAES,aAAAC,EAAYC,GAAOC,GAAsB;AAG5C,UAFJD,EAAM,eAAe,GAEjBL,EAAK,MAAMM,CAAY,GAAG;AACpB,QAAAJ,EAAA,MAAMI,CAAY,EAAE,MAAM;AAElC;AAAA,MACF;AAEA,UAAIC,IAAe;AAEnB,MAAAP,EAAK,MAAM,QAAQ,CAACQ,GAAOC,MAAU;AACnC,QAAID,MACFD,IAAeE,IAAQ;AAAA,MACzB,CACD,GAEOP,EAAA,MAAMK,CAAY,EAAE,MAAM;AAAA,IACpC;AAES,aAAAG,EAAY,GAAkBD,GAAe;AAChD,UAAA,EAAE,QAAQ,eAAe,CAAC,IAAI,OAAO,WAAW,EAAE,KAAK,EAAE,GAAG,GAAG;AACjE,UAAE,eAAe;AACjB;AAAA,MACF;AAEA,UAAIF,IAAe;AAQf,UANAE,MAAU,IACZF,IAAeE,IAAQ,IAERF,IAAA,GAGb,EAAE,QAAQ,aAAa;AACrB,YAAAE,IAAQ,MAAMT,EAAK,MAAM,SAAS,KAAKA,EAAK,MAAMS,CAAK,GAAG;AAC5D,UAAAP,EAAQ,MAAMO,IAAQ,CAAC,EAAE,MAAM;AAC/B;AAAA,QACF;AAEI,YAAAT,EAAK,MAAMS,CAAK;AAClB;AAGG,QAAAT,EAAA,MAAMO,CAAY,IAAI,IACnBL,EAAA,MAAMK,CAAY,EAAE,MAAM;AAElC;AAAA,MACF;AAEA,UAAI,CAAC,IAAI,OAAO,WAAW,EAAE,KAAK,EAAE,GAAG,KAAK,CAACP,EAAK,MAAMS,CAAK,GAAG;AACzD,QAAAT,EAAA,MAAMO,CAAY,IAAI,IACnBL,EAAA,MAAMK,CAAY,EAAE,MAAM;AAClC;AAAA,MACF;AAAA,IACF;AAEA,aAASI,EAAY,GAAmB;;AACtC,YAAMC,KAAYC,IAAA,EAAE,kBAAF,gBAAAA,EAAiB,QAAQ;AAE3C,UAAI,MAAM,OAAOD,CAAS,CAAC,GAAG;AACpB,QAAAV,EAAA,MAAM,CAAC,EAAE,MAAM;AACvB;AAAA,MACF;AAEA,UAAIY,IAASZ,EAAQ,MAAM,CAAC,EAAE;AAC9B,UAAIU;AACF,iBAASG,IAAI,GAAGA,IAAIH,EAAU,QAAQG;AACpC,UAAID,MACFd,EAAK,MAAMe,CAAC,IAAIH,EAAUG,CAAC,GAC3BD,IAASA,EAAO;AAAA,IAIxB;AAEA,WAAAE;AAAA,MACE,MAAMhB;AAAA,MACN,CAACiB,MAAW;AACV,YAAIA,EAAO,MAAM,KAAK,EAAE,MAAM;AAC5B,UAAAC,EAAK,sBAAsB,IAAI;AAAA,aAC1B;AACL,cAAI,MAAM,OAAOD,EAAO,MAAM,CAAC,CAAC,CAAC,GAAG;AAC7B,YAAAjB,EAAA,MAAM,CAAC,IAAI;AAChB;AAAA,UACF;AACA,UAAAkB,EAAK,sBAAsB,OAAOD,EAAO,MAAM,KAAK,EAAE,CAAC,CAAC;AAAA,QAC1D;AAAA,MACF;AAAA,MACA,EAAE,MAAM,GAAK;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ContextSwitcher.js

@@ -1,15 +1,16 @@
 import { defineComponent as k, computed as _, resolveComponent as C, openBlock as s, createElementBlock as l, Fragment as u, renderList as g, normalizeClass as d, toDisplayString as f, createBlock as x, withCtx as E, createTextVNode as S } from "vue";
 import { APPS as a } from "./constants.js";
 import { setPersistentItem as b, getPersistentItem as T, removePersistentItem as v } from "./utils/storage.js";
+import "@leaflink/snitch";
 import "./utils/helpers.js";
 import "lodash-es/camelCase";
 import "lodash-es/get";
 import "lodash-es/isFinite";
 import "lodash-es/isPlainObject";
 const R = {
-  class: "stash-context-switcher tw-bg-purple-700 tw-flex tw-text-center tw-p-1.5 tw-mx-auto tw-w-64 tw-rounded-full tw-border tw-border-white/10",
+  class: "stash-context-switcher tw-mx-auto tw-flex tw-w-64 tw-rounded-full tw-border tw-border-white/10 tw-bg-purple-700 tw-p-1.5 tw-text-center",
   "data-test": "stash-context-switcher"
-}, N = ["href", "onClick"], h = "-last-session", K = /* @__PURE__ */ k({
+}, N = ["href", "onClick"], h = "-last-session", O = /* @__PURE__ */ k({
   name: "ll-context-switcher",
   __name: "ContextSwitcher",
   props: {
@@ -56,12 +57,12 @@ const R = {
         }, [
           t.hasBaseRoute ? (s(), l("a", {
             key: 0,
-            class: d(["!tw-capitalize !tw-no-underline tw-w-1/2 tw-leading-none tw-font-semibold tw-py-2.5 tw-rounded-full tw-cursor-pointer", e.activeApp === t.app ? "tw-text-white tw-bg-royal-500" : "tw-text-ice-500"]),
+            class: d(["tw-w-1/2 tw-cursor-pointer tw-rounded-full tw-py-2.5 tw-font-semibold !tw-capitalize tw-leading-none !tw-no-underline", e.activeApp === t.app ? "tw-text-white tw-bg-royal-500" : "tw-text-ice-500"]),
             href: `/${t.name}`,
             onClick: (c) => m(c, t.app)
           }, f(t.app), 11, N)) : (s(), x(r, {
             key: 1,
-            class: d(["!tw-capitalize !tw-no-underline tw-w-1/2 tw-leading-none tw-font-semibold tw-py-2.5 tw-rounded-full tw-cursor-pointer", e.activeApp === t.app ? "tw-text-white tw-bg-royal-500" : "tw-text-ice-500"]),
+            class: d(["tw-w-1/2 tw-cursor-pointer tw-rounded-full tw-py-2.5 tw-font-semibold !tw-capitalize tw-leading-none !tw-no-underline", e.activeApp === t.app ? "tw-text-white tw-bg-royal-500" : "tw-text-ice-500"]),
             to: { name: t.name, query: o.routeQuery },
             "data-test-route": JSON.stringify({ name: t.name, query: o.routeQuery }),
             onClick: (c) => m(c, t.app)
@@ -77,6 +78,6 @@ const R = {
   }
 });
 export {
-  K as default
+  O as default
 };
 //# sourceMappingURL=ContextSwitcher.js.map

package/dist/ContextSwitcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextSwitcher.js","sources":["../src/components/ContextSwitcher/ContextSwitcher.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed } from 'vue';\n  import type { LocationQuery } from 'vue-router';\n\n  import { APPS } from '../../constants';\n  import { getPersistentItem, removePersistentItem, setPersistentItem } from '../../utils/storage';\n\n  defineOptions({\n    name: 'll-context-switcher',\n  });\n\n  type AppValues = typeof APPS[keyof typeof APPS];\n\n  export interface ContextSwitcherProps {\n    /**\n     * The current app that is active. Choices are 'marketplace' | 'payments'.\n     */\n    activeApp: AppValues;\n\n    /**\n     * Portal access to both marketplace and payments.\n     */\n    portalAccess?: {\n      commercePortal: boolean;\n      paymentsPortal: boolean;\n    };\n\n    /**\n     * Url to replace the other app if current user does not have portal access.\n     */\n    limitedAccessUrl: string;\n\n    routeQuery?: LocationQuery;\n  }\n\n  const props = withDefaults(defineProps<ContextSwitcherProps>(), {\n    portalAccess: () => ({\n      commercePortal: false,\n      paymentsPortal: false,\n    }),\n    routeQuery: () => ({}),\n  });\n\n  const emit =\n    defineEmits<{\n      /**\n       * Fires on click of the context switcher.\n       * @deprecated Use `switch` instead.\n       */\n      (e: 'click', urlInfo: { from: string; to: string }): void;\n      /**\n       * Fires on click of the context switcher.\n       */\n      (e: 'switch', evt: MouseEvent, urlInfo: { from: string; to: string }): void;\n    }>();\n\n  interface ContextItem {\n    app: AppValues;\n    name: string;\n    hasBaseRoute: boolean;\n  }\n\n  const CONTEXT_SWITCHER_STORAGE_KEY = '-last-session';\n\n  const routes = computed<ContextItem[]>(() => {\n    return [\n      {\n        app: APPS.MARKETPLACE,\n        name: props.portalAccess.commercePortal ? 'dashboard' : props.limitedAccessUrl,\n        hasBaseRoute: props.portalAccess.commercePortal,\n      },\n      {\n        app: APPS.PAYMENTS,\n        name: props.portalAccess.paymentsPortal ? 'payments' : props.limitedAccessUrl,\n        hasBaseRoute: false,\n      },\n    ];\n  });\n\n  /**\n   * Saves the current url in local storage before leaving the current app, if user has access to both apps\n   * If a previous session url exists, redirect users there instead then remove the local storage item afterward.\n   *\n   * @param event - Event from user click.\n   * @param app - App name of the clicked link, is a key of `APPS`.\n   */\n  function handleClick(event: MouseEvent, app: AppValues) {\n    if (app === props.activeApp) {\n      return;\n    }\n\n    const currentLocation = window.location.href;\n    let destination = (event.target as HTMLAnchorElement).href;\n\n    if (props.portalAccess.paymentsPortal && props.portalAccess.commercePortal) {\n      const appRoute = app === APPS.PAYMENTS ? APPS.MARKETPLACE : APPS.PAYMENTS;\n      const currentSessionName = `${appRoute}${CONTEXT_SWITCHER_STORAGE_KEY}`;\n      const prevSessionName = `${app}${CONTEXT_SWITCHER_STORAGE_KEY}`;\n\n      // save the current url in local storage\n      setPersistentItem(currentSessionName, currentLocation, { global: true });\n\n      // get the other app's url from local storage\n      const prevSessionUrl = getPersistentItem(prevSessionName, { global: true });\n\n      // if it exists, redirect users to such location and remove the item from local storage\n      if (prevSessionUrl) {\n        event.preventDefault();\n        destination = prevSessionUrl;\n        window.location.href = prevSessionUrl;\n        removePersistentItem(prevSessionName, { global: true });\n      }\n    }\n\n    emit('click', { from: currentLocation, to: destination });\n    emit('switch', event, { from: currentLocation, to: destination });\n  }\n</script>\n\n<template>\n  <div\n    class=\"\n      stash-context-switcher\n      tw-bg-purple-700 tw-flex tw-text-center tw-p-1.5 tw-mx-auto tw-w-64 tw-rounded-full tw-border tw-border-white/10\n    \"\n    data-test=\"stash-context-switcher\"\n  >\n    <template v-for=\"route in routes\" :key=\"route.app\">\n      <!-- render anchor tag to override base route in Payments -->\n      <a\n        v-if=\"route.hasBaseRoute\"\n        class=\"\n          !tw-capitalize !tw-no-underline\n          tw-w-1/2 tw-leading-none tw-font-semibold tw-py-2.5 tw-rounded-full tw-cursor-pointer\n        \"\n        :class=\"props.activeApp === route.app ? 'tw-text-white tw-bg-royal-500' : 'tw-text-ice-500'\"\n        :href=\"`/${route.name}`\"\n        @click=\"(evt) => handleClick(evt, route.app)\"\n      >\n        {{ route.app }}\n      </a>\n\n      <router-link\n        v-else\n        class=\"\n          !tw-capitalize !tw-no-underline\n          tw-w-1/2 tw-leading-none tw-font-semibold tw-py-2.5 tw-rounded-full tw-cursor-pointer\n        \"\n        :class=\"props.activeApp === route.app ? 'tw-text-white tw-bg-royal-500' : 'tw-text-ice-500'\"\n        :to=\"{ name: route.name, query: routeQuery }\"\n        :data-test-route=\"JSON.stringify({ name: route.name, query: routeQuery })\"\n        @click=\"(evt) => handleClick(evt, route.app)\"\n      >\n        {{ route.app }}\n      </router-link>\n    </template>\n  </div>\n</template>\n"],"names":["CONTEXT_SWITCHER_STORAGE_KEY","routes","computed","APPS","props","handleClick","event","app","currentLocation","destination","currentSessionName","prevSessionName","setPersistentItem","prevSessionUrl","getPersistentItem","removePersistentItem","emit"],"mappings":";;;;;;;;;;;4BA8DQA,IAA+B;;;;;;;;;;;;;;iBAE/BC,IAASC,EAAwB,MAC9B;AAAA,MACL;AAAA,QACE,KAAKC,EAAK;AAAA,QACV,MAAMC,EAAM,aAAa,iBAAiB,cAAcA,EAAM;AAAA,QAC9D,cAAcA,EAAM,aAAa;AAAA,MACnC;AAAA,MACA;AAAA,QACE,KAAKD,EAAK;AAAA,QACV,MAAMC,EAAM,aAAa,iBAAiB,aAAaA,EAAM;AAAA,QAC7D,cAAc;AAAA,MAChB;AAAA,IAAA,CAEH;AASQ,aAAAC,EAAYC,GAAmBC,GAAgB;AAClD,UAAAA,MAAQH,EAAM;AAChB;AAGI,YAAAI,IAAkB,OAAO,SAAS;AACpC,UAAAC,IAAeH,EAAM,OAA6B;AAEtD,UAAIF,EAAM,aAAa,kBAAkBA,EAAM,aAAa,gBAAgB;AAE1E,cAAMM,IAAqB,GADVH,MAAQJ,EAAK,WAAWA,EAAK,cAAcA,EAAK,QAC3B,GAAGH,CAA4B,IAC/DW,IAAkB,GAAGJ,CAAG,GAAGP,CAA4B;AAG7D,QAAAY,EAAkBF,GAAoBF,GAAiB,EAAE,QAAQ,GAAM,CAAA;AAGvE,cAAMK,IAAiBC,EAAkBH,GAAiB,EAAE,QAAQ,IAAM;AAG1E,QAAIE,MACFP,EAAM,eAAe,GACPG,IAAAI,GACd,OAAO,SAAS,OAAOA,GACvBE,EAAqBJ,GAAiB,EAAE,QAAQ,GAAM,CAAA;AAAA,MAE1D;AAEA,MAAAK,EAAK,SAAS,EAAE,MAAMR,GAAiB,IAAIC,GAAa,GACxDO,EAAK,UAAUV,GAAO,EAAE,MAAME,GAAiB,IAAIC,GAAa;AAAA,IAClE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ContextSwitcher.js","sources":["../src/components/ContextSwitcher/ContextSwitcher.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed } from 'vue';\n  import type { LocationQuery } from 'vue-router';\n\n  import { APPS } from '../../constants';\n  import { getPersistentItem, removePersistentItem, setPersistentItem } from '../../utils/storage';\n\n  defineOptions({\n    name: 'll-context-switcher',\n  });\n\n  type AppValues = typeof APPS[keyof typeof APPS];\n\n  export interface ContextSwitcherProps {\n    /**\n     * The current app that is active. Choices are 'marketplace' | 'payments'.\n     */\n    activeApp: AppValues;\n\n    /**\n     * Portal access to both marketplace and payments.\n     */\n    portalAccess?: {\n      commercePortal: boolean;\n      paymentsPortal: boolean;\n    };\n\n    /**\n     * Url to replace the other app if current user does not have portal access.\n     */\n    limitedAccessUrl: string;\n\n    routeQuery?: LocationQuery;\n  }\n\n  const props = withDefaults(defineProps<ContextSwitcherProps>(), {\n    portalAccess: () => ({\n      commercePortal: false,\n      paymentsPortal: false,\n    }),\n    routeQuery: () => ({}),\n  });\n\n  const emit =\n    defineEmits<{\n      /**\n       * Fires on click of the context switcher.\n       * @deprecated Use `switch` instead.\n       */\n      (e: 'click', urlInfo: { from: string; to: string }): void;\n      /**\n       * Fires on click of the context switcher.\n       */\n      (e: 'switch', evt: MouseEvent, urlInfo: { from: string; to: string }): void;\n    }>();\n\n  interface ContextItem {\n    app: AppValues;\n    name: string;\n    hasBaseRoute: boolean;\n  }\n\n  const CONTEXT_SWITCHER_STORAGE_KEY = '-last-session';\n\n  const routes = computed<ContextItem[]>(() => {\n    return [\n      {\n        app: APPS.MARKETPLACE,\n        name: props.portalAccess.commercePortal ? 'dashboard' : props.limitedAccessUrl,\n        hasBaseRoute: props.portalAccess.commercePortal,\n      },\n      {\n        app: APPS.PAYMENTS,\n        name: props.portalAccess.paymentsPortal ? 'payments' : props.limitedAccessUrl,\n        hasBaseRoute: false,\n      },\n    ];\n  });\n\n  /**\n   * Saves the current url in local storage before leaving the current app, if user has access to both apps\n   * If a previous session url exists, redirect users there instead then remove the local storage item afterward.\n   *\n   * @param event - Event from user click.\n   * @param app - App name of the clicked link, is a key of `APPS`.\n   */\n  function handleClick(event: MouseEvent, app: AppValues) {\n    if (app === props.activeApp) {\n      return;\n    }\n\n    const currentLocation = window.location.href;\n    let destination = (event.target as HTMLAnchorElement).href;\n\n    if (props.portalAccess.paymentsPortal && props.portalAccess.commercePortal) {\n      const appRoute = app === APPS.PAYMENTS ? APPS.MARKETPLACE : APPS.PAYMENTS;\n      const currentSessionName = `${appRoute}${CONTEXT_SWITCHER_STORAGE_KEY}`;\n      const prevSessionName = `${app}${CONTEXT_SWITCHER_STORAGE_KEY}`;\n\n      // save the current url in local storage\n      setPersistentItem(currentSessionName, currentLocation, { global: true });\n\n      // get the other app's url from local storage\n      const prevSessionUrl = getPersistentItem(prevSessionName, { global: true });\n\n      // if it exists, redirect users to such location and remove the item from local storage\n      if (prevSessionUrl) {\n        event.preventDefault();\n        destination = prevSessionUrl;\n        window.location.href = prevSessionUrl;\n        removePersistentItem(prevSessionName, { global: true });\n      }\n    }\n\n    emit('click', { from: currentLocation, to: destination });\n    emit('switch', event, { from: currentLocation, to: destination });\n  }\n</script>\n\n<template>\n  <div\n    class=\"\n      stash-context-switcher\n      tw-mx-auto tw-flex tw-w-64 tw-rounded-full tw-border tw-border-white/10 tw-bg-purple-700 tw-p-1.5 tw-text-center\n    \"\n    data-test=\"stash-context-switcher\"\n  >\n    <template v-for=\"route in routes\" :key=\"route.app\">\n      <!-- render anchor tag to override base route in Payments -->\n      <a\n        v-if=\"route.hasBaseRoute\"\n        class=\"\n          tw-w-1/2 tw-cursor-pointer tw-rounded-full tw-py-2.5 tw-font-semibold\n          !tw-capitalize\n          tw-leading-none\n          !tw-no-underline\n        \"\n        :class=\"props.activeApp === route.app ? 'tw-text-white tw-bg-royal-500' : 'tw-text-ice-500'\"\n        :href=\"`/${route.name}`\"\n        @click=\"(evt) => handleClick(evt, route.app)\"\n      >\n        {{ route.app }}\n      </a>\n\n      <router-link\n        v-else\n        class=\"\n          tw-w-1/2 tw-cursor-pointer tw-rounded-full tw-py-2.5 tw-font-semibold\n          !tw-capitalize\n          tw-leading-none\n          !tw-no-underline\n        \"\n        :class=\"props.activeApp === route.app ? 'tw-text-white tw-bg-royal-500' : 'tw-text-ice-500'\"\n        :to=\"{ name: route.name, query: routeQuery }\"\n        :data-test-route=\"JSON.stringify({ name: route.name, query: routeQuery })\"\n        @click=\"(evt) => handleClick(evt, route.app)\"\n      >\n        {{ route.app }}\n      </router-link>\n    </template>\n  </div>\n</template>\n"],"names":["CONTEXT_SWITCHER_STORAGE_KEY","routes","computed","APPS","props","handleClick","event","app","currentLocation","destination","currentSessionName","prevSessionName","setPersistentItem","prevSessionUrl","getPersistentItem","removePersistentItem","emit"],"mappings":";;;;;;;;;;;;4BA8DQA,IAA+B;;;;;;;;;;;;;;iBAE/BC,IAASC,EAAwB,MAC9B;AAAA,MACL;AAAA,QACE,KAAKC,EAAK;AAAA,QACV,MAAMC,EAAM,aAAa,iBAAiB,cAAcA,EAAM;AAAA,QAC9D,cAAcA,EAAM,aAAa;AAAA,MACnC;AAAA,MACA;AAAA,QACE,KAAKD,EAAK;AAAA,QACV,MAAMC,EAAM,aAAa,iBAAiB,aAAaA,EAAM;AAAA,QAC7D,cAAc;AAAA,MAChB;AAAA,IAAA,CAEH;AASQ,aAAAC,EAAYC,GAAmBC,GAAgB;AAClD,UAAAA,MAAQH,EAAM;AAChB;AAGI,YAAAI,IAAkB,OAAO,SAAS;AACpC,UAAAC,IAAeH,EAAM,OAA6B;AAEtD,UAAIF,EAAM,aAAa,kBAAkBA,EAAM,aAAa,gBAAgB;AAE1E,cAAMM,IAAqB,GADVH,MAAQJ,EAAK,WAAWA,EAAK,cAAcA,EAAK,QAC3B,GAAGH,CAA4B,IAC/DW,IAAkB,GAAGJ,CAAG,GAAGP,CAA4B;AAG7D,QAAAY,EAAkBF,GAAoBF,GAAiB,EAAE,QAAQ,GAAM,CAAA;AAGvE,cAAMK,IAAiBC,EAAkBH,GAAiB,EAAE,QAAQ,IAAM;AAG1E,QAAIE,MACFP,EAAM,eAAe,GACPG,IAAAI,GACd,OAAO,SAAS,OAAOA,GACvBE,EAAqBJ,GAAiB,EAAE,QAAQ,GAAM,CAAA;AAAA,MAE1D;AAEA,MAAAK,EAAK,SAAS,EAAE,MAAMR,GAAiB,IAAIC,GAAa,GACxDO,EAAK,UAAUV,GAAO,EAAE,MAAME,GAAiB,IAAIC,GAAa;AAAA,IAClE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Copy.js

@@ -12,7 +12,7 @@ import "lodash-es/camelCase";
 import "lodash-es/get";
 import "lodash-es/isFinite";
 import "lodash-es/isPlainObject";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js";
 import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";

package/dist/CurrencyInput.js

@@ -6,9 +6,9 @@ import "./utils/i18n.js";
 import "./constants.js";
 import "./locale.js";
 import "lodash-es/get";
-import "./Field.vue_vue_type_script_setup_true_lang-475832fe.js";
+import "./Field.vue_vue_type_script_setup_true_lang-42ba3c5a.js";
 import "lodash-es/uniqueId";
-import "./Label.vue_vue_type_script_setup_true_lang-1d29d98a.js";
+import "./Label.vue_vue_type_script_setup_true_lang-4b02087f.js";
 import "./Icon.js";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";

package/dist/DataView.js

@@ -8,7 +8,7 @@ import "./Icon.js";
 import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-import "./Paginate.vue_used_vue_type_style_index_0_lang.module-bfccf992.js";
+import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
 function _(e) {
   const n = e[0] === "-" ? "desc" : "asc";
   return { id: n === "asc" ? e : e.slice(1), order: n };

package/dist/DataViewFilters.js

@@ -6,16 +6,16 @@ import { _ as Z } from "./Box.vue_vue_type_script_setup_true_lang-69e5176b.js";
 import A from "./Button.js";
 import T from "lodash-es/cloneDeep";
 import $ from "./Icon.js";
-import "./Paginate.vue_used_vue_type_style_index_0_lang.module-bfccf992.js";
+import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
 import { D as G } from "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
 import q from "./FilterChip.js";
-import { _ as H } from "./Label.vue_vue_type_script_setup_true_lang-1d29d98a.js";
+import { _ as H } from "./Label.vue_vue_type_script_setup_true_lang-4b02087f.js";
 import K from "./Modal.js";
 import X from "./SearchBar.js";
 import { D as Y } from "./DataViewFilters.keys-c80ffabe.js";
 import { i as L } from "./isDefined-2ce6cde4.js";
 import "lodash-es/get";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js";
 import "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
@@ -26,7 +26,7 @@ import "./Backdrop.js";
 import "./Input.js";
 import "lodash-es/isNil";
 import "./utils/i18n.js";
-import "./Field.vue_vue_type_script_setup_true_lang-475832fe.js";
+import "./Field.vue_vue_type_script_setup_true_lang-42ba3c5a.js";
 function Pe({
   schema: a,
   dataViewRef: w
@@ -82,8 +82,8 @@ function Pe({
 }
 const ee = {
   key: 1,
-  class: "tw-col-span-12 tw-row-start-2 md:tw-row-start-1 md:tw-col-start-7 lg:tw-col-start-5 lg:tw-col-span-8"
-}, te = { class: "tw-hidden md:tw-block" }, le = { class: "tw-flex tw-gap-4" }, re = { class: "tw-inline-flex tw-items-center tw-gap-3" }, se = { class: "tw-flex tw-flex-col-reverse lg:tw-flex-row lg:tw-justify-end tw-gap-gutter" }, Te = /* @__PURE__ */ R({
+  class: "tw-col-span-12 tw-row-start-2 md:tw-col-start-7 md:tw-row-start-1 lg:tw-col-span-8 lg:tw-col-start-5"
+}, te = { class: "tw-hidden md:tw-block" }, le = { class: "tw-flex tw-gap-4" }, re = { class: "tw-inline-flex tw-items-center tw-gap-3" }, se = { class: "tw-flex tw-flex-col-reverse tw-gap-gutter lg:tw-flex-row lg:tw-justify-end" }, Te = /* @__PURE__ */ R({
   __name: "DataViewFilters",
   props: {
     filtersLabelText: { default: n("ll.filterBy") },
@@ -135,7 +135,7 @@ const ee = {
     return O(r, () => {
       r.value && w("open-drawer");
     }), (s, d) => (c(), v(Z, {
-      class: J(["stash-data-view-filters tw-grid tw-grid-cols-12 tw-p-3 tw-gap-6", { "lg:tw-p-6": t(D) === "comfortable", "tw-mb-3": !t(b) }]),
+      class: J(["stash-data-view-filters tw-grid tw-grid-cols-12 tw-gap-6 tw-p-3", { "lg:tw-p-6": t(D) === "comfortable", "tw-mb-3": !t(b) }]),
       radius: t(b) ? "none" : "rounded",
       "data-test": "stash-data-view-filters",
       "disable-padding": ""

package/dist/DataViewFilters.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataViewFilters.js","sources":["../src/components/DataViewFilters/useFilters.ts","../src/components/DataViewFilters/DataViewFilters.vue"],"sourcesContent":["import cloneDeep from 'lodash-es/cloneDeep';\nimport { computed, ComputedRef, Ref, ref } from 'vue';\n\nimport isDefined from '../../composables/useValidation/utils/isDefined';\nimport DataView from '../DataView/DataView.vue';\n\ntype DataViewInstance = InstanceType<typeof DataView>;\n\n/**\n * Contains metadata and configuration for the filters.\n * @see https://www.typescriptlang.org/docs/handbook/2/mapped-types.html\n */\nexport type UseFiltersSchema<Values extends object, Groups extends string> = {\n  [Property in keyof Values]: {\n    defaultValue?: Values[Property];\n    group?: Groups;\n    isActive?: (value: Values[Property]) => boolean;\n  };\n};\n\nexport interface UseFiltersArgs<Values extends object, Groups extends string> {\n  schema: UseFiltersSchema<Values, Groups>;\n  /** A ref for an instance of DataView */\n  dataViewRef: Ref<unknown>; // Note: using `Ref<InstanceType<typeof DataView>>` here causes type errors when providing a value for this argument\n}\n\nexport interface UseFiltersReturnType<Values = object, Groups extends string = string> {\n  applyFilters: () => void;\n  resetAllFilters: () => void;\n  resetFilterGroup: (group: string) => void; // Note: group is intentionally not typed as `Groups` since there is no way to pass in a Groups type to UseFiltersReturnType within DataViewFilters.vue\n  undoWorkingFilters: () => void;\n  activeFiltersCounts: ComputedRef<Record<Groups, number>>;\n  totalActiveFiltersCount: ComputedRef<number>;\n  appliedFilters: Ref<Values>;\n  workingFilters: Ref<Values>;\n}\n\n/**\n * Provides utility functions for working with `DataViewFilters`.\n */\nexport function useFilters<Values extends object, Groups extends string>({\n  schema,\n  dataViewRef,\n}: UseFiltersArgs<Values, Groups>): UseFiltersReturnType<Values, Groups> {\n  const appliedFilters = ref({}) as Ref<Values>;\n  const workingFilters = ref({}) as Ref<Values>;\n\n  for (const filterName in schema) {\n    // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n    appliedFilters.value[filterName] = schema[filterName].defaultValue;\n    // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n    workingFilters.value[filterName] = schema[filterName].defaultValue;\n  }\n\n  const dvRef = dataViewRef as Ref<DataViewInstance>;\n\n  /**\n   * For when an \"Apply\" button is clicked. It does the following:\n   *   1) applies the working filter state\n   *   2) sets the current page to 1\n   *   3) emits the \"update\" event from DataView\n   */\n  function applyFilters() {\n    appliedFilters.value = cloneDeep(workingFilters.value);\n    dvRef.value.updateCurrentFilters(appliedFilters.value, { shouldEmit: true });\n  }\n\n  /**\n   * For when a \"Reset all\" button is clicked. It does the following:\n   *   1) applies the defaultValue filter values to all filters\n   *   2) sets the current page to 1\n   *   3) emits the \"update\" event from DataView\n   */\n  function resetAllFilters() {\n    for (const filterName in schema) {\n      // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n      appliedFilters.value[filterName] = schema[filterName].defaultValue;\n      // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n      workingFilters.value[filterName] = schema[filterName].defaultValue;\n    }\n\n    dvRef.value.updateCurrentFilters(appliedFilters.value, { shouldEmit: true });\n  }\n\n  /**\n   * For when a \"Reset\" button is clicked. It does the following:\n   *   1) applies the defaultValue filter values to the given filter group\n   *   2) sets the current page to 1\n   *   3) emits the \"update\" event from DataView\n   */\n  function resetFilterGroup(group: Groups) {\n    for (const filterName in schema) {\n      if (schema[filterName].group === group) {\n        // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n        appliedFilters.value[filterName] = schema[filterName].defaultValue;\n        // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n        workingFilters.value[filterName] = schema[filterName].defaultValue;\n      }\n    }\n\n    dvRef.value.updateCurrentFilters(appliedFilters.value, { shouldEmit: true });\n  }\n\n  /**\n   * Resets the `workingFilters` to match the `appliedFilters`. This can be used when the FilterDrawer or a FilterDropdown is dismissed without clicking \"Reset\" or \"Apply\".\n   */\n  function undoWorkingFilters() {\n    workingFilters.value = cloneDeep(appliedFilters.value);\n  }\n\n  const activeFiltersCounts = computed(() => {\n    const counts = {} as Record<Groups, number>;\n\n    for (const filterName in schema) {\n      const config = schema[filterName];\n      const value = appliedFilters.value[filterName];\n      const isActive = config.isActive?.(value) || isDefined(value);\n\n      if (isActive && config.group) {\n        counts[config.group] = (counts[config.group] ?? 0) + 1;\n      }\n    }\n\n    return counts;\n  });\n\n  const totalActiveFiltersCount = computed(() => {\n    let count = 0;\n\n    for (const filterName in schema) {\n      const config = schema[filterName];\n      const value = appliedFilters.value[filterName];\n      const isActive = config.isActive?.(value) || isDefined(value);\n\n      if (isActive) {\n        count += 1;\n      }\n    }\n\n    return count;\n  });\n\n  return {\n    applyFilters,\n    resetAllFilters,\n    // @ts-expect-error \"could be instantiated with a different subtype\": TODO: figure out how to resolve the types\n    resetFilterGroup,\n    undoWorkingFilters,\n    activeFiltersCounts,\n    totalActiveFiltersCount,\n    appliedFilters,\n    workingFilters,\n  };\n}\n\nexport default useFilters;\n","<script lang=\"ts\">\n  export * from './DataViewFilters.keys';\n  export * from './DataViewFilters.types';\n  export * from './useFilters';\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, inject, provide, ref, watch } from 'vue';\n\n  import useMediaQuery from '../../composables/useMediaQuery/useMediaQuery';\n  import { SCREEN_SIZES } from '../../constants';\n  import { t } from '../../locale';\n  import Box from '../Box/Box.vue';\n  import Button from '../Button/Button.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import FilterChip from '../FilterChip/FilterChip.vue';\n  import Icon from '../Icon/Icon.vue';\n  import Label from '../Label/Label.vue';\n  import Modal, { type ModalProps } from '../Modal/Modal.vue';\n  import SearchBar, { SearchBarProps } from '../SearchBar/SearchBar.vue';\n  import { DATA_VIEW_FILTERS_UTILS_INJECTION } from './DataViewFilters.keys';\n  import type { DrawerStyle, OnApplyFilters } from './DataViewFilters.types';\n  import type { UseFiltersReturnType } from './useFilters';\n\n  export interface DataViewFiltersProps {\n    filtersLabelText?: string;\n    /**\n     * Props to pass to the `SearchBar` component.\n     */\n    searchBarProps?: SearchBarProps;\n    showSearch?: boolean;\n    /** 'cascade' displays all fields within every filter group; 'nested' displays only the group names and requires clicking a group to view its fields */\n    drawerStyle?: DrawerStyle;\n    drawerProps?: ModalProps;\n    showDrawerPreviousButton?: boolean;\n    /**\n     * Required when using filters. This prop should contain the return value of the `useFilters()` composable.\n     */\n    useFiltersInstance?: UseFiltersReturnType;\n    onApply?: OnApplyFilters;\n    /** The name of the active filter group. The active filter group is determined by which instance of FilterDropdown or FilterDrawerItem is open. */\n    activeGroup?: string;\n  }\n\n  export interface DataViewFiltersSlots {\n    default?: void;\n    drawer?: void;\n    'filters-label'?: void;\n  }\n\n  const props = withDefaults(defineProps<DataViewFiltersProps>(), {\n    filtersLabelText: t('ll.filterBy'),\n    isLoading: false,\n    drawerStyle: 'nested',\n    drawerProps: undefined,\n    searchBarProps: undefined,\n    showDrawerPreviousButton: false,\n    showSearch: true,\n    useFiltersInstance: undefined,\n    onApply: undefined,\n    activeGroup: '',\n  });\n\n  const emit =\n    defineEmits<{\n      /** When the drawer is opened */\n      (e: 'open-drawer'): void;\n      /** When the drawer is dismissed */\n      (e: 'dismiss'): void;\n      /** When the \"Previous\" button in the header is clicked */\n      (e: 'previous'): void;\n      /** When the \"Reset\" button is clicked while viewing a filter group */\n      (e: 'reset-group'): void;\n      /** When one of the \"Reset All\" buttons is clicked */\n      (e: 'reset-all'): void;\n    }>();\n\n  const slots = defineSlots<DataViewFiltersSlots>();\n\n  const isDesktop = useMediaQuery(`(min-width: ${SCREEN_SIZES.lg})`);\n\n  const {\n    density,\n    isLoading: isDataViewLoading,\n    isWithinModule,\n    currentSearch,\n    updateCurrentSearch,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  provide(DATA_VIEW_FILTERS_UTILS_INJECTION.key, { useFiltersInstance: props.useFiltersInstance, drawerStyle: props.drawerStyle});\n\n  const totalActiveFiltersCount = computed(() => props.useFiltersInstance?.totalActiveFiltersCount.value ?? 0);\n  const activeGroupActiveFiltersCount = computed(\n    () => props.useFiltersInstance?.activeFiltersCounts.value[props.activeGroup] ?? 0,\n  );\n  const isDrawerOpen = ref(false);\n\n  async function handleApplyClick() {\n    const { preventDismiss } = (await props.onApply?.()) || props.useFiltersInstance?.applyFilters() || {};\n\n    if (!preventDismiss) {\n      isDrawerOpen.value = false;\n    }\n  }\n\n  function handleResetGroupClick() {\n    props.useFiltersInstance?.resetFilterGroup(props.activeGroup);\n    emit('reset-group');\n    isDrawerOpen.value = false;\n  }\n\n  function handleResetAllClick() {\n    props.useFiltersInstance?.resetAllFilters();\n    emit('reset-all');\n    isDrawerOpen.value = false;\n  }\n\n  function onDismiss() {\n    props.useFiltersInstance?.undoWorkingFilters();\n    isDrawerOpen.value = false;\n    emit('dismiss');\n  }\n\n  watch(isDrawerOpen, () => {\n    if (isDrawerOpen.value) {\n      emit('open-drawer');\n    }\n  });\n</script>\n\n<template>\n  <Box\n    class=\"stash-data-view-filters tw-grid tw-grid-cols-12 tw-p-3 tw-gap-6\"\n    :class=\"{ 'lg:tw-p-6': density === 'comfortable', 'tw-mb-3': !isWithinModule }\"\n    :radius=\"isWithinModule ? 'none' : 'rounded'\"\n    data-test=\"stash-data-view-filters\"\n    disable-padding\n  >\n    <SearchBar\n      v-if=\"props.showSearch\"\n      class=\"tw-col-span-12 md:tw-col-span-6 lg:tw-col-span-4\"\n      data-test=\"stash-data-view-filters|search-bar\"\n      :is-loading=\"isDataViewLoading\"\n      :label=\"t('ll.search')\"\n      :model-value=\"currentSearch\"\n      v-bind=\"props.searchBarProps\"\n      @search=\"(searchTerm) => updateCurrentSearch(searchTerm, { shouldEmit: true })\"\n    />\n    <div\n      v-if=\"slots.default\"\n      class=\"tw-col-span-12 tw-row-start-2 md:tw-row-start-1 md:tw-col-start-7 lg:tw-col-start-5 lg:tw-col-span-8\"\n    >\n      <div class=\"tw-hidden md:tw-block\">\n        <slot name=\"filters-label\">\n          <Label>{{ props.filtersLabelText }}</Label>\n        </slot>\n      </div>\n      <div class=\"tw-flex tw-gap-4\">\n        <FilterChip\n          secondary\n          class=\"!tw-flex tw-w-full tw-justify-center tw-gap-4 md:!tw-inline-flex md:tw-w-auto\"\n          data-test=\"stash-data-view-filters|drawer-toggle-button\"\n          :filter-count=\"totalActiveFiltersCount\"\n          @click=\"isDrawerOpen = true\"\n        >\n          <span class=\"tw-inline-flex tw-items-center tw-gap-3\">\n            <Icon name=\"filter-line\" class=\"tw-text-ice-700\" />\n            <span>{{ t('ll.filters') }}</span>\n          </span>\n        </FilterChip>\n        <slot v-if=\"isDesktop\"></slot>\n        <Button v-if=\"totalActiveFiltersCount > 0 && isDesktop\" inline @click=\"handleResetAllClick\">\n          {{ t('ll.resetAll') }}\n        </Button>\n      </div>\n    </div>\n    <Modal\n      v-if=\"slots.drawer\"\n      data-test=\"stash-data-view-filters|drawer\"\n      disable-body-padding\n      position=\"right\"\n      :is-open=\"isDrawerOpen\"\n      :title=\"t('ll.allFilters')\"\n      v-bind=\"props.drawerProps\"\n      @dismiss=\"onDismiss\"\n    >\n      <template #headerAction>\n        <Button\n          v-if=\"props.showDrawerPreviousButton\"\n          icon\n          class=\"tw-text-ice-100\"\n          data-test=\"stash-data-view-filters|drawer-previous-button\"\n          :aria-label=\"t('ll.previous')\"\n          :title=\"t('ll.previous')\"\n          @click=\"emit('previous')\"\n        >\n          <Icon name=\"chevron-left\" />\n        </Button>\n      </template>\n\n      <slot name=\"drawer\"></slot>\n\n      <template #footer>\n        <div class=\"tw-flex tw-flex-col-reverse lg:tw-flex-row lg:tw-justify-end tw-gap-gutter\">\n          <Button\n            v-if=\"!props.showDrawerPreviousButton && totalActiveFiltersCount > 0\"\n            secondary\n            :disabled=\"isDataViewLoading\"\n            @click=\"handleResetAllClick\"\n          >\n            {{ t('ll.resetAll') }}\n          </Button>\n          <Button\n            v-if=\"\n              (props.showDrawerPreviousButton || props.drawerStyle === 'cascade') && activeGroupActiveFiltersCount > 0\n            \"\n            secondary\n            :disabled=\"isDataViewLoading\"\n            @click=\"handleResetGroupClick\"\n          >\n            {{ t('ll.reset') }}\n          </Button>\n          <Button\n            v-if=\"props.showDrawerPreviousButton || props.drawerStyle === 'cascade'\"\n            :disabled=\"isDataViewLoading\"\n            @click=\"handleApplyClick\"\n          >\n            {{ t('ll.apply') }}\n          </Button>\n        </div>\n      </template>\n    </Modal>\n  </Box>\n</template>\n"],"names":["useFilters","schema","dataViewRef","appliedFilters","ref","workingFilters","filterName","dvRef","applyFilters","cloneDeep","resetAllFilters","resetFilterGroup","group","undoWorkingFilters","activeFiltersCounts","computed","counts","config","value","_a","isDefined","totalActiveFiltersCount","count","slots","_useSlots","isDesktop","useMediaQuery","SCREEN_SIZES","density","isDataViewLoading","isWithinModule","currentSearch","updateCurrentSearch","inject","DATA_VIEW_INJECTION","provide","DATA_VIEW_FILTERS_UTILS_INJECTION","props","activeGroupActiveFiltersCount","isDrawerOpen","handleApplyClick","preventDismiss","_b","handleResetGroupClick","emit","handleResetAllClick","onDismiss","watch"],"mappings":"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"}
+{"version":3,"file":"DataViewFilters.js","sources":["../src/components/DataViewFilters/useFilters.ts","../src/components/DataViewFilters/DataViewFilters.vue"],"sourcesContent":["import cloneDeep from 'lodash-es/cloneDeep';\nimport { computed, ComputedRef, Ref, ref } from 'vue';\n\nimport isDefined from '../../composables/useValidation/utils/isDefined';\nimport DataView from '../DataView/DataView.vue';\n\ntype DataViewInstance = InstanceType<typeof DataView>;\n\n/**\n * Contains metadata and configuration for the filters.\n * @see https://www.typescriptlang.org/docs/handbook/2/mapped-types.html\n */\nexport type UseFiltersSchema<Values extends object, Groups extends string> = {\n  [Property in keyof Values]: {\n    defaultValue?: Values[Property];\n    group?: Groups;\n    isActive?: (value: Values[Property]) => boolean;\n  };\n};\n\nexport interface UseFiltersArgs<Values extends object, Groups extends string> {\n  schema: UseFiltersSchema<Values, Groups>;\n  /** A ref for an instance of DataView */\n  dataViewRef: Ref<unknown>; // Note: using `Ref<InstanceType<typeof DataView>>` here causes type errors when providing a value for this argument\n}\n\nexport interface UseFiltersReturnType<Values = object, Groups extends string = string> {\n  applyFilters: () => void;\n  resetAllFilters: () => void;\n  resetFilterGroup: (group: string) => void; // Note: group is intentionally not typed as `Groups` since there is no way to pass in a Groups type to UseFiltersReturnType within DataViewFilters.vue\n  undoWorkingFilters: () => void;\n  activeFiltersCounts: ComputedRef<Record<Groups, number>>;\n  totalActiveFiltersCount: ComputedRef<number>;\n  appliedFilters: Ref<Values>;\n  workingFilters: Ref<Values>;\n}\n\n/**\n * Provides utility functions for working with `DataViewFilters`.\n */\nexport function useFilters<Values extends object, Groups extends string>({\n  schema,\n  dataViewRef,\n}: UseFiltersArgs<Values, Groups>): UseFiltersReturnType<Values, Groups> {\n  const appliedFilters = ref({}) as Ref<Values>;\n  const workingFilters = ref({}) as Ref<Values>;\n\n  for (const filterName in schema) {\n    // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n    appliedFilters.value[filterName] = schema[filterName].defaultValue;\n    // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n    workingFilters.value[filterName] = schema[filterName].defaultValue;\n  }\n\n  const dvRef = dataViewRef as Ref<DataViewInstance>;\n\n  /**\n   * For when an \"Apply\" button is clicked. It does the following:\n   *   1) applies the working filter state\n   *   2) sets the current page to 1\n   *   3) emits the \"update\" event from DataView\n   */\n  function applyFilters() {\n    appliedFilters.value = cloneDeep(workingFilters.value);\n    dvRef.value.updateCurrentFilters(appliedFilters.value, { shouldEmit: true });\n  }\n\n  /**\n   * For when a \"Reset all\" button is clicked. It does the following:\n   *   1) applies the defaultValue filter values to all filters\n   *   2) sets the current page to 1\n   *   3) emits the \"update\" event from DataView\n   */\n  function resetAllFilters() {\n    for (const filterName in schema) {\n      // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n      appliedFilters.value[filterName] = schema[filterName].defaultValue;\n      // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n      workingFilters.value[filterName] = schema[filterName].defaultValue;\n    }\n\n    dvRef.value.updateCurrentFilters(appliedFilters.value, { shouldEmit: true });\n  }\n\n  /**\n   * For when a \"Reset\" button is clicked. It does the following:\n   *   1) applies the defaultValue filter values to the given filter group\n   *   2) sets the current page to 1\n   *   3) emits the \"update\" event from DataView\n   */\n  function resetFilterGroup(group: Groups) {\n    for (const filterName in schema) {\n      if (schema[filterName].group === group) {\n        // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n        appliedFilters.value[filterName] = schema[filterName].defaultValue;\n        // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n        workingFilters.value[filterName] = schema[filterName].defaultValue;\n      }\n    }\n\n    dvRef.value.updateCurrentFilters(appliedFilters.value, { shouldEmit: true });\n  }\n\n  /**\n   * Resets the `workingFilters` to match the `appliedFilters`. This can be used when the FilterDrawer or a FilterDropdown is dismissed without clicking \"Reset\" or \"Apply\".\n   */\n  function undoWorkingFilters() {\n    workingFilters.value = cloneDeep(appliedFilters.value);\n  }\n\n  const activeFiltersCounts = computed(() => {\n    const counts = {} as Record<Groups, number>;\n\n    for (const filterName in schema) {\n      const config = schema[filterName];\n      const value = appliedFilters.value[filterName];\n      const isActive = config.isActive?.(value) || isDefined(value);\n\n      if (isActive && config.group) {\n        counts[config.group] = (counts[config.group] ?? 0) + 1;\n      }\n    }\n\n    return counts;\n  });\n\n  const totalActiveFiltersCount = computed(() => {\n    let count = 0;\n\n    for (const filterName in schema) {\n      const config = schema[filterName];\n      const value = appliedFilters.value[filterName];\n      const isActive = config.isActive?.(value) || isDefined(value);\n\n      if (isActive) {\n        count += 1;\n      }\n    }\n\n    return count;\n  });\n\n  return {\n    applyFilters,\n    resetAllFilters,\n    // @ts-expect-error \"could be instantiated with a different subtype\": TODO: figure out how to resolve the types\n    resetFilterGroup,\n    undoWorkingFilters,\n    activeFiltersCounts,\n    totalActiveFiltersCount,\n    appliedFilters,\n    workingFilters,\n  };\n}\n\nexport default useFilters;\n","<script lang=\"ts\">\n  export * from './DataViewFilters.keys';\n  export * from './DataViewFilters.types';\n  export * from './useFilters';\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, inject, provide, ref, watch } from 'vue';\n\n  import useMediaQuery from '../../composables/useMediaQuery/useMediaQuery';\n  import { SCREEN_SIZES } from '../../constants';\n  import { t } from '../../locale';\n  import Box from '../Box/Box.vue';\n  import Button from '../Button/Button.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import FilterChip from '../FilterChip/FilterChip.vue';\n  import Icon from '../Icon/Icon.vue';\n  import Label from '../Label/Label.vue';\n  import Modal, { type ModalProps } from '../Modal/Modal.vue';\n  import SearchBar, { SearchBarProps } from '../SearchBar/SearchBar.vue';\n  import { DATA_VIEW_FILTERS_UTILS_INJECTION } from './DataViewFilters.keys';\n  import type { DrawerStyle, OnApplyFilters } from './DataViewFilters.types';\n  import type { UseFiltersReturnType } from './useFilters';\n\n  export interface DataViewFiltersProps {\n    filtersLabelText?: string;\n    /**\n     * Props to pass to the `SearchBar` component.\n     */\n    searchBarProps?: SearchBarProps;\n    showSearch?: boolean;\n    /** 'cascade' displays all fields within every filter group; 'nested' displays only the group names and requires clicking a group to view its fields */\n    drawerStyle?: DrawerStyle;\n    drawerProps?: ModalProps;\n    showDrawerPreviousButton?: boolean;\n    /**\n     * Required when using filters. This prop should contain the return value of the `useFilters()` composable.\n     */\n    useFiltersInstance?: UseFiltersReturnType;\n    onApply?: OnApplyFilters;\n    /** The name of the active filter group. The active filter group is determined by which instance of FilterDropdown or FilterDrawerItem is open. */\n    activeGroup?: string;\n  }\n\n  export interface DataViewFiltersSlots {\n    default?: void;\n    drawer?: void;\n    'filters-label'?: void;\n  }\n\n  const props = withDefaults(defineProps<DataViewFiltersProps>(), {\n    filtersLabelText: t('ll.filterBy'),\n    isLoading: false,\n    drawerStyle: 'nested',\n    drawerProps: undefined,\n    searchBarProps: undefined,\n    showDrawerPreviousButton: false,\n    showSearch: true,\n    useFiltersInstance: undefined,\n    onApply: undefined,\n    activeGroup: '',\n  });\n\n  const emit =\n    defineEmits<{\n      /** When the drawer is opened */\n      (e: 'open-drawer'): void;\n      /** When the drawer is dismissed */\n      (e: 'dismiss'): void;\n      /** When the \"Previous\" button in the header is clicked */\n      (e: 'previous'): void;\n      /** When the \"Reset\" button is clicked while viewing a filter group */\n      (e: 'reset-group'): void;\n      /** When one of the \"Reset All\" buttons is clicked */\n      (e: 'reset-all'): void;\n    }>();\n\n  const slots = defineSlots<DataViewFiltersSlots>();\n\n  const isDesktop = useMediaQuery(`(min-width: ${SCREEN_SIZES.lg})`);\n\n  const {\n    density,\n    isLoading: isDataViewLoading,\n    isWithinModule,\n    currentSearch,\n    updateCurrentSearch,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  provide(DATA_VIEW_FILTERS_UTILS_INJECTION.key, { useFiltersInstance: props.useFiltersInstance, drawerStyle: props.drawerStyle});\n\n  const totalActiveFiltersCount = computed(() => props.useFiltersInstance?.totalActiveFiltersCount.value ?? 0);\n  const activeGroupActiveFiltersCount = computed(\n    () => props.useFiltersInstance?.activeFiltersCounts.value[props.activeGroup] ?? 0,\n  );\n  const isDrawerOpen = ref(false);\n\n  async function handleApplyClick() {\n    const { preventDismiss } = (await props.onApply?.()) || props.useFiltersInstance?.applyFilters() || {};\n\n    if (!preventDismiss) {\n      isDrawerOpen.value = false;\n    }\n  }\n\n  function handleResetGroupClick() {\n    props.useFiltersInstance?.resetFilterGroup(props.activeGroup);\n    emit('reset-group');\n    isDrawerOpen.value = false;\n  }\n\n  function handleResetAllClick() {\n    props.useFiltersInstance?.resetAllFilters();\n    emit('reset-all');\n    isDrawerOpen.value = false;\n  }\n\n  function onDismiss() {\n    props.useFiltersInstance?.undoWorkingFilters();\n    isDrawerOpen.value = false;\n    emit('dismiss');\n  }\n\n  watch(isDrawerOpen, () => {\n    if (isDrawerOpen.value) {\n      emit('open-drawer');\n    }\n  });\n</script>\n\n<template>\n  <Box\n    class=\"stash-data-view-filters tw-grid tw-grid-cols-12 tw-gap-6 tw-p-3\"\n    :class=\"{ 'lg:tw-p-6': density === 'comfortable', 'tw-mb-3': !isWithinModule }\"\n    :radius=\"isWithinModule ? 'none' : 'rounded'\"\n    data-test=\"stash-data-view-filters\"\n    disable-padding\n  >\n    <SearchBar\n      v-if=\"props.showSearch\"\n      class=\"tw-col-span-12 md:tw-col-span-6 lg:tw-col-span-4\"\n      data-test=\"stash-data-view-filters|search-bar\"\n      :is-loading=\"isDataViewLoading\"\n      :label=\"t('ll.search')\"\n      :model-value=\"currentSearch\"\n      v-bind=\"props.searchBarProps\"\n      @search=\"(searchTerm) => updateCurrentSearch(searchTerm, { shouldEmit: true })\"\n    />\n    <div\n      v-if=\"slots.default\"\n      class=\"tw-col-span-12 tw-row-start-2 md:tw-col-start-7 md:tw-row-start-1 lg:tw-col-span-8 lg:tw-col-start-5\"\n    >\n      <div class=\"tw-hidden md:tw-block\">\n        <slot name=\"filters-label\">\n          <Label>{{ props.filtersLabelText }}</Label>\n        </slot>\n      </div>\n      <div class=\"tw-flex tw-gap-4\">\n        <FilterChip\n          secondary\n          class=\"!tw-flex tw-w-full tw-justify-center tw-gap-4 md:!tw-inline-flex md:tw-w-auto\"\n          data-test=\"stash-data-view-filters|drawer-toggle-button\"\n          :filter-count=\"totalActiveFiltersCount\"\n          @click=\"isDrawerOpen = true\"\n        >\n          <span class=\"tw-inline-flex tw-items-center tw-gap-3\">\n            <Icon name=\"filter-line\" class=\"tw-text-ice-700\" />\n            <span>{{ t('ll.filters') }}</span>\n          </span>\n        </FilterChip>\n        <slot v-if=\"isDesktop\"></slot>\n        <Button v-if=\"totalActiveFiltersCount > 0 && isDesktop\" inline @click=\"handleResetAllClick\">\n          {{ t('ll.resetAll') }}\n        </Button>\n      </div>\n    </div>\n    <Modal\n      v-if=\"slots.drawer\"\n      data-test=\"stash-data-view-filters|drawer\"\n      disable-body-padding\n      position=\"right\"\n      :is-open=\"isDrawerOpen\"\n      :title=\"t('ll.allFilters')\"\n      v-bind=\"props.drawerProps\"\n      @dismiss=\"onDismiss\"\n    >\n      <template #headerAction>\n        <Button\n          v-if=\"props.showDrawerPreviousButton\"\n          icon\n          class=\"tw-text-ice-100\"\n          data-test=\"stash-data-view-filters|drawer-previous-button\"\n          :aria-label=\"t('ll.previous')\"\n          :title=\"t('ll.previous')\"\n          @click=\"emit('previous')\"\n        >\n          <Icon name=\"chevron-left\" />\n        </Button>\n      </template>\n\n      <slot name=\"drawer\"></slot>\n\n      <template #footer>\n        <div class=\"tw-flex tw-flex-col-reverse tw-gap-gutter lg:tw-flex-row lg:tw-justify-end\">\n          <Button\n            v-if=\"!props.showDrawerPreviousButton && totalActiveFiltersCount > 0\"\n            secondary\n            :disabled=\"isDataViewLoading\"\n            @click=\"handleResetAllClick\"\n          >\n            {{ t('ll.resetAll') }}\n          </Button>\n          <Button\n            v-if=\"\n              (props.showDrawerPreviousButton || props.drawerStyle === 'cascade') && activeGroupActiveFiltersCount > 0\n            \"\n            secondary\n            :disabled=\"isDataViewLoading\"\n            @click=\"handleResetGroupClick\"\n          >\n            {{ t('ll.reset') }}\n          </Button>\n          <Button\n            v-if=\"props.showDrawerPreviousButton || props.drawerStyle === 'cascade'\"\n            :disabled=\"isDataViewLoading\"\n            @click=\"handleApplyClick\"\n          >\n            {{ t('ll.apply') }}\n          </Button>\n        </div>\n      </template>\n    </Modal>\n  </Box>\n</template>\n"],"names":["useFilters","schema","dataViewRef","appliedFilters","ref","workingFilters","filterName","dvRef","applyFilters","cloneDeep","resetAllFilters","resetFilterGroup","group","undoWorkingFilters","activeFiltersCounts","computed","counts","config","value","_a","isDefined","totalActiveFiltersCount","count","slots","_useSlots","isDesktop","useMediaQuery","SCREEN_SIZES","density","isDataViewLoading","isWithinModule","currentSearch","updateCurrentSearch","inject","DATA_VIEW_INJECTION","provide","DATA_VIEW_FILTERS_UTILS_INJECTION","props","activeGroupActiveFiltersCount","isDrawerOpen","handleApplyClick","preventDismiss","_b","handleResetGroupClick","emit","handleResetAllClick","onDismiss","watch"],"mappings":"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"}

package/dist/DataViewSortButton.js

@@ -1,15 +1,15 @@
-import { defineComponent as g, inject as y, openBlock as r, createBlock as n, withCtx as o, createVNode as i, createTextVNode as d, toDisplayString as l, unref as e, createElementVNode as c, createElementBlock as f, Fragment as w, renderList as D, normalizeClass as k, createCommentVNode as m } from "vue";
-import { t as S } from "./locale.js";
+import { defineComponent as y, useCssModule as D, inject as S, openBlock as r, createBlock as d, withCtx as o, createVNode as i, createTextVNode as n, toDisplayString as l, unref as t, createElementVNode as c, createElementBlock as f, Fragment as k, renderList as V, normalizeClass as b, createCommentVNode as m } from "vue";
+import { t as B } from "./locale.js";
 import u from "./Button.js";
 import "lodash-es/cloneDeep";
 import h from "./Icon.js";
-import "./Paginate.vue_used_vue_type_style_index_0_lang.module-bfccf992.js";
-import { D as b } from "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
-import V from "./Dropdown.js";
-import v from "./IconLabel.js";
-import { _ as B } from "./_plugin-vue_export-helper-dad06003.js";
+import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
+import { D as C } from "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
+import E from "./Dropdown.js";
+import I from "./IconLabel.js";
+import { _ as N } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/get";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js";
 import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
@@ -20,40 +20,40 @@ import "./utils/helpers.js";
 import "lodash-es/camelCase";
 import "lodash-es/isFinite";
 import "lodash-es/isPlainObject";
-const I = {
+const v = {
   class: "dropdown__list",
   "data-test": "stash-data-view-sort-button|sort-menu"
-}, E = ["onClick"], N = ["onClick"], A = /* @__PURE__ */ g({
+}, A = ["onClick"], M = ["onClick"], T = /* @__PURE__ */ y({
   __name: "DataViewSortButton",
   props: {
     sortOptions: { default: () => [] }
   },
-  setup(C) {
-    const _ = C, { currentSortId: a, currentSortOrder: s, updateCurrentSort: p } = y(
-      b.key,
-      b.defaults
+  setup(x) {
+    const _ = x, p = D(), { currentSortId: s, currentSortOrder: a, updateCurrentSort: w } = S(
+      C.key,
+      C.defaults
     );
-    return (T, L) => _.sortOptions.length ? (r(), n(V, {
+    return (q, F) => _.sortOptions.length ? (r(), d(E, {
       key: 0,
       align: "left",
       class: "stash-data-view-sort-button",
       "data-test": "stash-data-view-sort-button"
     }, {
-      toggle: o(({ isActive: t, toggle: x }) => [
+      toggle: o(({ isActive: e, toggle: g }) => [
         i(u, {
           "icon-label": "",
-          "aria-expanded": t.toString(),
+          "aria-expanded": e.toString(),
           class: "tw-text-blue-500",
           "data-test": "stash-data-view-sort-button|sort-menu-button",
-          onClick: x
+          onClick: g
         }, {
           default: o(() => [
-            i(v, {
+            i(I, {
               icon: "sort",
               stacked: ""
             }, {
               default: o(() => [
-                d(l(e(S)("ll.sort")), 1)
+                n(l(t(B)("ll.sort")), 1)
               ]),
               _: 1
             })
@@ -62,57 +62,66 @@ const I = {
         }, 1032, ["aria-expanded", "onClick"])
       ]),
       default: o(() => [
-        c("ul", I, [
-          (r(!0), f(w, null, D(_.sortOptions, (t) => (r(), f(w, {
-            key: t.id
+        c("ul", v, [
+          (r(!0), f(k, null, V(_.sortOptions, (e) => (r(), f(k, {
+            key: e.id
           }, [
             c("li", {
-              class: k(["dropdown__item rounded", { "is-selected": t.id === e(a) && e(s) === "asc" }]),
-              onClick: () => e(p)(t.id, { sortOrder: "asc", shouldEmit: !0 })
+              class: b(["dropdown__item tw-rounded", [
+                t(p).dropdown__item,
+                { "tw-bg-blue-100 tw-text-ice-700": e.id === t(s) && t(a) === "asc" }
+              ]]),
+              onClick: () => t(w)(e.id, { sortOrder: "asc", shouldEmit: !0 })
             }, [
               i(u, {
                 inline: "",
                 class: "tw-h-9"
               }, {
                 default: o(() => [
-                  d(l(t.labelAsc) + " ", 1),
-                  t.id === e(a) && e(s) === "asc" ? (r(), n(h, {
+                  n(l(e.labelAsc) + " ", 1),
+                  e.id === t(s) && t(a) === "asc" ? (r(), d(h, {
                     key: 0,
                     name: "check",
-                    class: "tw-text-blue-500 tw-ml-auto"
+                    class: "tw-ml-auto tw-text-blue-500"
                   })) : m("", !0)
                 ]),
                 _: 2
               }, 1024)
-            ], 10, E),
+            ], 10, A),
             c("li", {
-              class: k(["dropdown__item rounded", { "is-selected": t.id === e(a) && e(s) === "desc" }]),
-              onClick: () => e(p)(t.id, { sortOrder: "desc", shouldEmit: !0 })
+              class: b(["dropdown__item tw-rounded", [
+                t(p).dropdown__item,
+                { "tw-bg-blue-100 tw-text-ice-700": e.id === t(s) && t(a) === "desc" }
+              ]]),
+              onClick: () => t(w)(e.id, { sortOrder: "desc", shouldEmit: !0 })
             }, [
               i(u, {
                 inline: "",
                 class: "tw-h-9"
               }, {
                 default: o(() => [
-                  d(l(t.labelDesc) + " ", 1),
-                  t.id === e(a) && e(s) === "desc" ? (r(), n(h, {
+                  n(l(e.labelDesc) + " ", 1),
+                  e.id === t(s) && t(a) === "desc" ? (r(), d(h, {
                     key: 0,
                     name: "check",
-                    class: "tw-text-blue-500 tw-ml-auto"
+                    class: "tw-ml-auto tw-text-blue-500"
                   })) : m("", !0)
                 ]),
                 _: 2
               }, 1024)
-            ], 10, N)
+            ], 10, M)
           ], 64))), 128))
         ])
       ]),
       _: 1
     })) : m("", !0);
   }
-});
-const rt = /* @__PURE__ */ B(A, [["__scopeId", "data-v-e33a9680"]]);
+}), z = "_dropdown__item_ozq17_2", L = {
+  dropdown__item: z
+}, j = {
+  $style: L
+}, nt = /* @__PURE__ */ N(T, [["__cssModules", j]]);
 export {
-  rt as default
+  nt as default
 };
 //# sourceMappingURL=DataViewSortButton.js.map

package/dist/DataViewSortButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataViewSortButton.js","sources":["../src/components/DataViewSortButton/DataViewSortButton.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { inject } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import Dropdown from '../Dropdown/Dropdown.vue';\n  import Icon from '../Icon/Icon.vue';\n  import IconLabel from '../IconLabel/IconLabel.vue';\n  import { SortOption } from './DataViewSortButton.types';\n\n  export interface DataViewToolbarProps {\n    /**\n     * An array of sort options to display in the dropdown.\n     */\n    sortOptions?: SortOption[];\n  }\n\n  const props = withDefaults(defineProps<DataViewToolbarProps>(), {\n    sortOptions: () => [],\n  });\n\n  const { currentSortId, currentSortOrder, updateCurrentSort } = inject(\n    DATA_VIEW_INJECTION.key,\n    DATA_VIEW_INJECTION.defaults,\n  );\n</script>\n\n<template>\n  <Dropdown\n    v-if=\"props.sortOptions.length\"\n    align=\"left\"\n    class=\"stash-data-view-sort-button\"\n    data-test=\"stash-data-view-sort-button\"\n  >\n    <template #toggle=\"{ isActive, toggle }\">\n      <Button\n        icon-label\n        :aria-expanded=\"isActive.toString()\"\n        class=\"tw-text-blue-500\"\n        data-test=\"stash-data-view-sort-button|sort-menu-button\"\n        @click=\"toggle\"\n      >\n        <IconLabel icon=\"sort\" stacked>\n          {{ t('ll.sort') }}\n        </IconLabel>\n      </Button>\n    </template>\n    <ul class=\"dropdown__list\" data-test=\"stash-data-view-sort-button|sort-menu\">\n      <template v-for=\"sortOption in props.sortOptions\" :key=\"sortOption.id\">\n        <li\n          class=\"dropdown__item rounded\"\n          :class=\"{ 'is-selected': sortOption.id === currentSortId && currentSortOrder === 'asc' }\"\n          @click=\"() => updateCurrentSort(sortOption.id, { sortOrder: 'asc', shouldEmit: true })\"\n        >\n          <Button inline class=\"tw-h-9\">\n            {{ sortOption.labelAsc }}\n            <Icon\n              v-if=\"sortOption.id === currentSortId && currentSortOrder === 'asc'\"\n              name=\"check\"\n              class=\"tw-text-blue-500 tw-ml-auto\"\n            />\n          </Button>\n        </li>\n        <li\n          class=\"dropdown__item rounded\"\n          :class=\"{ 'is-selected': sortOption.id === currentSortId && currentSortOrder === 'desc' }\"\n          @click=\"() => updateCurrentSort(sortOption.id, { sortOrder: 'desc', shouldEmit: true })\"\n        >\n          <Button inline class=\"tw-h-9\">\n            {{ sortOption.labelDesc }}\n            <Icon\n              v-if=\"sortOption.id === currentSortId && currentSortOrder === 'desc'\"\n              name=\"check\"\n              class=\"tw-text-blue-500 tw-ml-auto\"\n            />\n          </Button>\n        </li>\n      </template>\n    </ul>\n  </Dropdown>\n</template>\n\n<style scoped>\n  .dropdown__item > button {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n</style>\n"],"names":["currentSortId","currentSortOrder","updateCurrentSort","inject","DATA_VIEW_INJECTION"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAsBQ,EAAE,eAAAA,GAAe,kBAAAC,GAAkB,mBAAAC,EAAsB,IAAAC;AAAA,MAC7DC,EAAoB;AAAA,MACpBA,EAAoB;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DataViewSortButton.js","sources":["../src/components/DataViewSortButton/DataViewSortButton.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { inject, useCssModule } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import Dropdown from '../Dropdown/Dropdown.vue';\n  import Icon from '../Icon/Icon.vue';\n  import IconLabel from '../IconLabel/IconLabel.vue';\n  import { SortOption } from './DataViewSortButton.types';\n\n  export interface DataViewToolbarProps {\n    /**\n     * An array of sort options to display in the dropdown.\n     */\n    sortOptions?: SortOption[];\n  }\n\n  const props = withDefaults(defineProps<DataViewToolbarProps>(), {\n    sortOptions: () => [],\n  });\n  const classes = useCssModule();\n\n  const { currentSortId, currentSortOrder, updateCurrentSort } = inject(\n    DATA_VIEW_INJECTION.key,\n    DATA_VIEW_INJECTION.defaults,\n  );\n</script>\n\n<template>\n  <Dropdown\n    v-if=\"props.sortOptions.length\"\n    align=\"left\"\n    class=\"stash-data-view-sort-button\"\n    data-test=\"stash-data-view-sort-button\"\n  >\n    <template #toggle=\"{ isActive, toggle }\">\n      <Button\n        icon-label\n        :aria-expanded=\"isActive.toString()\"\n        class=\"tw-text-blue-500\"\n        data-test=\"stash-data-view-sort-button|sort-menu-button\"\n        @click=\"toggle\"\n      >\n        <IconLabel icon=\"sort\" stacked>\n          {{ t('ll.sort') }}\n        </IconLabel>\n      </Button>\n    </template>\n    <ul class=\"dropdown__list\" data-test=\"stash-data-view-sort-button|sort-menu\">\n      <template v-for=\"sortOption in props.sortOptions\" :key=\"sortOption.id\">\n        <li\n          class=\"dropdown__item tw-rounded\"\n          :class=\"[\n            classes.dropdown__item,\n            { 'tw-bg-blue-100 tw-text-ice-700': sortOption.id === currentSortId && currentSortOrder === 'asc' },\n          ]\"\n          @click=\"() => updateCurrentSort(sortOption.id, { sortOrder: 'asc', shouldEmit: true })\"\n        >\n          <Button inline class=\"tw-h-9\">\n            {{ sortOption.labelAsc }}\n            <Icon\n              v-if=\"sortOption.id === currentSortId && currentSortOrder === 'asc'\"\n              name=\"check\"\n              class=\"tw-ml-auto tw-text-blue-500\"\n            />\n          </Button>\n        </li>\n        <li\n          class=\"dropdown__item tw-rounded\"\n          :class=\"[\n            classes.dropdown__item,\n            { 'tw-bg-blue-100 tw-text-ice-700': sortOption.id === currentSortId && currentSortOrder === 'desc' },\n          ]\"\n          @click=\"() => updateCurrentSort(sortOption.id, { sortOrder: 'desc', shouldEmit: true })\"\n        >\n          <Button inline class=\"tw-h-9\">\n            {{ sortOption.labelDesc }}\n            <Icon\n              v-if=\"sortOption.id === currentSortId && currentSortOrder === 'desc'\"\n              name=\"check\"\n              class=\"tw-ml-auto tw-text-blue-500\"\n            />\n          </Button>\n        </li>\n      </template>\n    </ul>\n  </Dropdown>\n</template>\n\n<style module>\n  .dropdown__item > button {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n</style>\n"],"names":["classes","useCssModule","currentSortId","currentSortOrder","updateCurrentSort","inject","DATA_VIEW_INJECTION"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAqBQA,IAAUC,KAEV,EAAE,eAAAC,GAAe,kBAAAC,GAAkB,mBAAAC,EAAsB,IAAAC;AAAA,MAC7DC,EAAoB;AAAA,MACpBA,EAAoB;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}