@leaflink/stash 44.0.0-beta.6 → 44.0.0-beta.8

package/dist/DescriptionListTerm.js

@@ -2,7 +2,7 @@ import { defineComponent as r, inject as a, openBlock as n, createElementBlock a
 import { D as l } from "./DescriptionList.keys-c906ce05.js";
 const p = ["data-variant"], w = {
   key: 0,
-  class: "hidden md:tw-inline"
+  class: "tw-hidden md:tw-inline"
 }, k = /* @__PURE__ */ r({
   __name: "DescriptionListTerm",
   setup(_) {

package/dist/DescriptionListTerm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DescriptionListTerm.js","sources":["../src/components/DescriptionListTerm/DescriptionListTerm.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject } from 'vue';\n\n  import { DESCRIPTION_LIST_INJECTION } from '../DescriptionList/DescriptionList.keys';\n\n  const descriptionListInjectedValues = inject(DESCRIPTION_LIST_INJECTION.key);\n  if (!descriptionListInjectedValues) {\n    throw new Error('DescriptionListDetail must be used within a DescriptionList component.');\n  }\n  const { variant } = descriptionListInjectedValues;\n</script>\n\n<template>\n  <dt\n    class=\"stash-description-list-term tw-font-medium tw-text-ice-900\"\n    :class=\"{\n      'md:tw-w-2/5 md:tw-max-w-[10.5rem]': variant === 'columns',\n      'tw-mr-1.5': variant === 'inline',\n      'tw-pb-1.5': variant === 'stacked',\n      'tw-pb-1.5 md:tw-pb-0': variant !== 'stacked',\n    }\"\n    data-test=\"stash-description-list-term\"\n    :data-variant=\"variant\"\n  >\n    <!-- @slot Default slot, for rendering a term -->\n    <slot></slot><span v-if=\"variant === 'inline'\" class=\"hidden md:tw-inline\">:</span>\n  </dt>\n</template>\n"],"names":["descriptionListInjectedValues","inject","DESCRIPTION_LIST_INJECTION","variant"],"mappings":";;;;;;;;AAKQ,UAAAA,IAAgCC,EAAOC,EAA2B,GAAG;AAC3E,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,wEAAwE;AAEpF,UAAA,EAAE,SAAAG,EAAY,IAAAH;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DescriptionListTerm.js","sources":["../src/components/DescriptionListTerm/DescriptionListTerm.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject } from 'vue';\n\n  import { DESCRIPTION_LIST_INJECTION } from '../DescriptionList/DescriptionList.keys';\n\n  const descriptionListInjectedValues = inject(DESCRIPTION_LIST_INJECTION.key);\n  if (!descriptionListInjectedValues) {\n    throw new Error('DescriptionListDetail must be used within a DescriptionList component.');\n  }\n  const { variant } = descriptionListInjectedValues;\n</script>\n\n<template>\n  <dt\n    class=\"stash-description-list-term tw-font-medium tw-text-ice-900\"\n    :class=\"{\n      'md:tw-w-2/5 md:tw-max-w-[10.5rem]': variant === 'columns',\n      'tw-mr-1.5': variant === 'inline',\n      'tw-pb-1.5': variant === 'stacked',\n      'tw-pb-1.5 md:tw-pb-0': variant !== 'stacked',\n    }\"\n    data-test=\"stash-description-list-term\"\n    :data-variant=\"variant\"\n  >\n    <!-- @slot Default slot, for rendering a term -->\n    <slot></slot><span v-if=\"variant === 'inline'\" class=\"tw-hidden md:tw-inline\">:</span>\n  </dt>\n</template>\n"],"names":["descriptionListInjectedValues","inject","DESCRIPTION_LIST_INJECTION","variant"],"mappings":";;;;;;;;AAKQ,UAAAA,IAAgCC,EAAOC,EAA2B,GAAG;AAC3E,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,wEAAwE;AAEpF,UAAA,EAAE,SAAAG,EAAY,IAAAH;;;;;;;;;;;;;;;;"}

package/dist/Dialog.js

@@ -1,4 +1,4 @@
-import { defineComponent as K, useSlots as Z, useAttrs as z, useCssModule as A, ref as C, computed as n, watchEffect as H, nextTick as L, openBlock as s, createBlock as f, Transition as q, withCtx as m, createElementBlock as p, mergeProps as P, unref as e, withKeys as Y, createElementVNode as a, normalizeClass as o, createCommentVNode as r, toDisplayString as _, renderSlot as j, createTextVNode as T, createVNode as F } from "vue";
+import { defineComponent as K, useSlots as Z, useAttrs as z, useCssModule as A, ref as C, computed as l, watchEffect as H, nextTick as L, openBlock as s, createBlock as f, Transition as q, withCtx as m, createElementBlock as p, mergeProps as P, unref as e, withKeys as Y, createElementVNode as a, normalizeClass as o, createCommentVNode as r, toDisplayString as _, renderSlot as j, createTextVNode as T, createVNode as F } from "vue";
 import S from "lodash-es/capitalize";
 import G from "lodash-es/uniqueId";
 import { S as B, a as I, b as J } from "./statusLevels-a8b041f4.js";
@@ -7,7 +7,7 @@ import D from "./Button.js";
 import O from "./Icon.js";
 import { _ as Q } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/get";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-b2ee90e6.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 const R = ["open", "aria-labelledby", "data-test", "onKeydown"], U = ["id"], W = {
@@ -30,73 +30,73 @@ const R = ["open", "aria-labelledby", "data-test", "onKeydown"], U = ["id"], W =
   },
   emits: ["update:open", "cancel"],
   setup(M, { emit: y }) {
-    const t = M, b = Z(), i = z(), l = A(), g = G("dialog-header-"), d = C(!1), h = C(), E = n(() => t.confirmText || (t.alert ? c("ll.okay") : c("ll.confirm"))), v = n(() => !!b.default || t.description), N = n(
+    const t = M, g = Z(), d = z(), n = A(), b = G("dialog-header-"), i = C(!1), w = C(), E = l(() => t.confirmText || (t.alert ? c("ll.okay") : c("ll.confirm"))), k = l(() => !!g.default || t.description), N = l(
       () => t.status ? B[S(t.status)] : B.Info
-    ), w = n(
+    ), h = l(
       () => t.status ? I[S(t.status)] : I.Info
-    ), V = n(() => t.dangerZone || t.status === J.Error);
-    function x() {
+    ), V = l(() => t.dangerZone || t.status === J.Error);
+    function v() {
       y("update:open", !1), y("cancel");
     }
     async function $(u) {
-      d.value = !0;
-      const k = i.onConfirm;
-      await k(u), d.value = !1;
+      i.value = !0;
+      const x = d.onConfirm;
+      await x(u), i.value = !1;
     }
     return H(() => {
       t.open && L(function() {
-        h.value.focus();
+        w.value.focus();
       });
-    }), (u, k) => (s(), f(q, { name: "fade" }, {
+    }), (u, x) => (s(), f(q, { name: "fade" }, {
       default: m(() => [
         t.open ? (s(), p("dialog", P({
           key: 0,
           ref_key: "root",
-          ref: h,
+          ref: w,
           open: t.open,
           tabindex: "0",
-          "aria-labelledby": e(g),
+          "aria-labelledby": e(b),
           "aria-modal": "true",
-          class: e(l).dialog,
-          "data-test": e(i)["data-test"] || "ll-dialog"
-        }, e(i), {
-          onKeydown: Y(x, ["esc"])
+          class: e(n).dialog,
+          "data-test": e(d)["data-test"] || "ll-dialog"
+        }, e(d), {
+          onKeydown: Y(v, ["esc"])
         }), [
           a("div", {
             class: o([
-              e(l).body,
-              `tw-border-${w.value}`,
+              e(n).body,
+              `tw-border-${h.value}`,
               {
                 "tw-border-t-6": t.status
               }
             ])
           }, [
             a("div", {
-              class: o(e(l).content)
+              class: o(e(n).content)
             }, [
               a("div", {
-                class: o(["tw-flex tw-items-center", v.value && "tw-mb-1.5"])
+                class: o(["tw-flex tw-items-center", k.value && "tw-mb-1.5"])
               }, [
                 t.status ? (s(), f(O, {
                   key: 0,
                   "data-test": "dialog-status-icon",
                   name: N.value,
-                  class: o(`tw-text-${w.value}`)
+                  class: o(`tw-text-${h.value}`)
                 }, null, 8, ["name", "class"])) : r("", !0),
                 a("h3", {
-                  id: e(g),
+                  id: e(b),
                   class: o({ "tw-ml-1.5 tw-mt-px": t.status })
                 }, _(t.header), 11, U)
               ], 2),
-              v.value ? (s(), p("p", W, [
-                e(b).default ? j(u.$slots, "default", { key: 0 }) : (s(), p("span", {
+              k.value ? (s(), p("p", W, [
+                e(g).default ? j(u.$slots, "default", { key: 0 }) : (s(), p("span", {
                   key: 1,
                   innerHTML: t.description
                 }, null, 8, X))
               ])) : r("", !0)
             ], 2),
             a("footer", {
-              class: o(e(l).footer)
+              class: o([e(n).footer, "lg:max-xl:tw-bg-blue-300 md:max-lg:tw-bg-orange-300"])
             }, [
               a("div", tt, [
                 a("div", {
@@ -106,7 +106,7 @@ const R = ["open", "aria-labelledby", "data-test", "onKeydown"], U = ["id"], W =
                     key: 0,
                     "data-test": "button|cancel",
                     secondary: "",
-                    onClick: x
+                    onClick: v
                   }, {
                     default: m(() => [
                       T(_(t.cancelText), 1)
@@ -115,7 +115,7 @@ const R = ["open", "aria-labelledby", "data-test", "onKeydown"], U = ["id"], W =
                   })),
                   F(D, {
                     "data-test": "button|confirm",
-                    disabled: t.disabled || d.value,
+                    disabled: t.disabled || i.value,
                     color: V.value ? "red" : "blue",
                     class: o({
                       "tw-w-full": t.alert
@@ -136,16 +136,16 @@ const R = ["open", "aria-labelledby", "data-test", "onKeydown"], U = ["id"], W =
       _: 3
     }));
   }
-}), ot = "_dialog_1n595_176", at = "_body_1n595_193", st = "_grey_1n595_206", nt = "_content_1n595_211", lt = "_footer_1n595_216", rt = {
+}), ot = "_dialog_17klt_2", at = "_body_17klt_19", st = "_grey_17klt_32", lt = "_content_17klt_42", nt = "_footer_17klt_47", rt = {
   dialog: ot,
   body: at,
   grey: st,
-  content: nt,
-  footer: lt
+  content: lt,
+  footer: nt
 }, ct = {
   $style: rt
-}, wt = /* @__PURE__ */ Q(et, [["__cssModules", ct]]);
+}, ht = /* @__PURE__ */ Q(et, [["__cssModules", ct]]);
 export {
-  wt as default
+  ht as default
 };
 //# sourceMappingURL=Dialog.js.map

package/dist/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../src/components/Dialog/Dialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import capitalize from 'lodash-es/capitalize';\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, nextTick, ref, useAttrs, useCssModule, useSlots, watchEffect } from 'vue';\n\n  import {\n    StatusColor,\n    StatusColors,\n    StatusIcon,\n    StatusIcons,\n    StatusSeverities,\n    StatusSeverity,\n  } from '../../../types/statusLevels';\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface DialogProps {\n    /**\n     * Shows or hides the dialog.\n     * Usage: v-model:open=\"isOpen\"\n     */\n    open?: boolean;\n\n    /**\n     * Whether the confirmation button is enabled or not.\n     */\n    disabled?: boolean;\n\n    /**\n     * Is this a dangerous action? Will turn the confirmation button red.\n     */\n    dangerZone?: boolean;\n\n    /**\n     * Header text.\n     */\n    header?: string;\n\n    /**\n     * Description text.\n     */\n    description?: string;\n\n    /**\n     * Cancel button text.\n     */\n    cancelText?: string;\n\n    /**\n     * Confirm button text.\n     */\n    confirmText?: string;\n\n    /**\n     * Treats it like an Alert Dialog, with only the confirmation button showing.\n     *\n     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Window/alert}\n     */\n    alert?: boolean;\n\n    /**\n     * Adds a top accent border and icon next to the header.\n     * This behaves similarly to the Alert component in respect to the levels, icons, and colors\n     * passing `error` will treat the dialog the same as `dangerZone`\n     */\n    status?: StatusSeverity;\n  }\n\n  const props = withDefaults(defineProps<DialogProps>(), {\n    open: false,\n    disabled: false,\n    dangerZone: false,\n    header: t('ll.areYouSure'),\n    description: '',\n    cancelText: t('ll.cancel'),\n    confirmText: '',\n    alert: false,\n    status: undefined,\n  });\n\n  defineOptions({\n    name: 'll-dialog',\n    inheritAttrs: false,\n  });\n\n  const emits =\n    defineEmits<{\n      (e: 'update:open', value: boolean): void;\n      (e: 'cancel'): void;\n    }>();\n\n  const slots = useSlots();\n  const attrs = useAttrs();\n  const classes = useCssModule();\n  const headerId = uniqueId('dialog-header-');\n\n  const isConfirming = ref(false);\n  const root = ref();\n\n  /**\n   * Set the default confirm button text to \"Confirm\".\n   * If the `alert` prop is true, the default text is \"Okay\".\n   * If the `confirmText` prop is provided, `confirmText` is used whether or not\n   * the alert prop is true.\n   */\n  const modifiedConfirmText = computed(() => props.confirmText || (props.alert ? t('ll.okay') : t('ll.confirm')));\n\n  const hasDescription = computed(() => !!slots.default || props.description);\n\n  const statusIcon = computed<StatusIcon>(() =>\n    props.status ? StatusIcons[capitalize(props.status)] : StatusIcons.Info,\n  );\n  const statusColor = computed<StatusColor>(() =>\n    props.status ? StatusColors[capitalize(props.status)] : StatusColors.Info,\n  );\n\n  const computedDangerZone = computed(() => props.dangerZone || props.status === StatusSeverities.Error);\n\n  function cancel() {\n    emits('update:open', false);\n    emits('cancel');\n  }\n\n  async function handleConfirm(event: Event) {\n    isConfirming.value = true;\n\n    // useAttrs returns a Record<string, unknown> type, which causes\n    // TS errors when trying to call a passed listener\n    const onConfirm = attrs.onConfirm as (event: Event) => void;\n\n    // Call the parent confirm listener and await it. Using Async/Await lets\n    // us await even non-promises. Pass the event so modifiers can work.\n    await onConfirm(event);\n    isConfirming.value = false;\n  }\n\n  watchEffect(() => {\n    if (props.open) {\n      // Move focus to confirm button\n      nextTick(function () {\n        root.value.focus();\n      });\n    }\n  });\n</script>\n\n<template>\n  <transition name=\"fade\">\n    <dialog\n      v-if=\"props.open\"\n      ref=\"root\"\n      :open=\"props.open\"\n      tabindex=\"0\"\n      :aria-labelledby=\"headerId\"\n      aria-modal=\"true\"\n      :class=\"classes.dialog\"\n      :data-test=\"attrs['data-test'] || 'll-dialog'\"\n      v-bind=\"attrs\"\n      @keydown.esc=\"cancel\"\n    >\n      <div\n        :class=\"[\n          classes.body,\n          `tw-border-${statusColor}`,\n          {\n            'tw-border-t-6': props.status,\n          },\n        ]\"\n      >\n        <div :class=\"classes.content\">\n          <div class=\"tw-flex tw-items-center\" :class=\"hasDescription && 'tw-mb-1.5'\">\n            <Icon\n              v-if=\"props.status\"\n              data-test=\"dialog-status-icon\"\n              :name=\"statusIcon\"\n              :class=\"`tw-text-${statusColor}`\"\n            />\n            <h3 :id=\"headerId\" :class=\"{ 'tw-ml-1.5 tw-mt-px': props.status }\">{{ props.header }}</h3>\n          </div>\n\n          <p v-if=\"hasDescription\" class=\"tw-mb-0\">\n            <slot v-if=\"slots.default\"></slot>\n            <span v-else v-html=\"props.description\"></span>\n          </p>\n        </div>\n\n        <footer :class=\"classes.footer\">\n          <div class=\"tw-text-right\">\n            <div :class=\"{ 'button-grid': !props.alert }\">\n              <Button v-if=\"!props.alert\" data-test=\"button|cancel\" secondary @click=\"cancel\">\n                {{ props.cancelText }}\n              </Button>\n\n              <Button\n                data-test=\"button|confirm\"\n                :disabled=\"props.disabled || isConfirming\"\n                :color=\"computedDangerZone ? 'red' : 'blue'\"\n                :class=\"{\n                  'tw-w-full': props.alert,\n                }\"\n                @click=\"handleConfirm\"\n              >\n                {{ modifiedConfirmText }}\n              </Button>\n            </div>\n          </div>\n        </footer>\n      </div>\n    </dialog>\n  </transition>\n</template>\n\n<style lang=\"scss\" module>\n  .dialog {\n    background: rgb(0 0 0 / 30%);\n    bottom: 0;\n    display: flex;\n    flex-direction: column;\n    left: 0;\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    place-content: center;\n    position: fixed;\n    right: 0;\n    top: 0;\n    z-index: z-index('dialog');\n    width: 100%;\n    height: 100vh;\n  }\n\n  .body {\n    @include elevation('low');\n\n    background: var(--color-white);\n    border-radius: $border-radius;\n    color: var(--color-ice-700);\n    display: flex;\n    flex-direction: column;\n    margin: 0 auto;\n    max-height: 100vh;\n    max-width: 360px;\n    transition: transform $primary-transition;\n    width: 100%;\n\n    &.grey {\n      background: var(--color-ice-200);\n      border-radius: $border-radius;\n    }\n  }\n\n  .content {\n    flex-grow: 1;\n    padding: space(3) var(--grid-gutter);\n  }\n\n  .footer {\n    background: var(--color-ice-200);\n    border-top: border('thin', var(--color-ice-500));\n    display: initial; // TEMP. Will need to fix marketplace `footer` style\n    padding: space(3) var(--grid-gutter);\n\n    @include breakpoint('md') {\n      border-bottom-left-radius: $border-radius;\n      border-bottom-right-radius: $border-radius;\n    }\n  }\n\n  :global(.fade-enter-from),\n  :global(.fade-leave-active) {\n    .body {\n      transform: translate3d(0, #{space(2)}, 0);\n    }\n  }\n</style>\n"],"names":["slots","useSlots","attrs","useAttrs","classes","useCssModule","headerId","uniqueId","isConfirming","ref","root","modifiedConfirmText","computed","props","t","hasDescription","statusIcon","StatusIcons","capitalize","statusColor","StatusColors","computedDangerZone","StatusSeverities","cancel","emits","handleConfirm","event","onConfirm","watchEffect","nextTick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA4FQA,IAAQC,KACRC,IAAQC,KACRC,IAAUC,KACVC,IAAWC,EAAS,gBAAgB,GAEpCC,IAAeC,EAAI,EAAK,GACxBC,IAAOD,KAQPE,IAAsBC,EAAS,MAAMC,EAAM,gBAAgBA,EAAM,QAAQC,EAAE,SAAS,IAAIA,EAAE,YAAY,EAAE,GAExGC,IAAiBH,EAAS,MAAM,CAAC,CAACZ,EAAM,WAAWa,EAAM,WAAW,GAEpEG,IAAaJ;AAAA,MAAqB,MACtCC,EAAM,SAASI,EAAYC,EAAWL,EAAM,MAAM,CAAC,IAAII,EAAY;AAAA,IAAA,GAE/DE,IAAcP;AAAA,MAAsB,MACxCC,EAAM,SAASO,EAAaF,EAAWL,EAAM,MAAM,CAAC,IAAIO,EAAa;AAAA,IAAA,GAGjEC,IAAqBT,EAAS,MAAMC,EAAM,cAAcA,EAAM,WAAWS,EAAiB,KAAK;AAErG,aAASC,IAAS;AAChB,MAAAC,EAAM,eAAe,EAAK,GAC1BA,EAAM,QAAQ;AAAA,IAChB;AAEA,mBAAeC,EAAcC,GAAc;AACzC,MAAAlB,EAAa,QAAQ;AAIrB,YAAMmB,IAAYzB,EAAM;AAIxB,YAAMyB,EAAUD,CAAK,GACrBlB,EAAa,QAAQ;AAAA,IACvB;AAEA,WAAAoB,EAAY,MAAM;AAChB,MAAIf,EAAM,QAERgB,EAAS,WAAY;AACnB,QAAAnB,EAAK,MAAM;MAAM,CAClB;AAAA,IACH,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Dialog.js","sources":["../src/components/Dialog/Dialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import capitalize from 'lodash-es/capitalize';\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, nextTick, ref, useAttrs, useCssModule, useSlots, watchEffect } from 'vue';\n\n  import {\n    StatusColor,\n    StatusColors,\n    StatusIcon,\n    StatusIcons,\n    StatusSeverities,\n    StatusSeverity,\n  } from '../../../types/statusLevels';\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface DialogProps {\n    /**\n     * Shows or hides the dialog.\n     * Usage: v-model:open=\"isOpen\"\n     */\n    open?: boolean;\n\n    /**\n     * Whether the confirmation button is enabled or not.\n     */\n    disabled?: boolean;\n\n    /**\n     * Is this a dangerous action? Will turn the confirmation button red.\n     */\n    dangerZone?: boolean;\n\n    /**\n     * Header text.\n     */\n    header?: string;\n\n    /**\n     * Description text.\n     */\n    description?: string;\n\n    /**\n     * Cancel button text.\n     */\n    cancelText?: string;\n\n    /**\n     * Confirm button text.\n     */\n    confirmText?: string;\n\n    /**\n     * Treats it like an Alert Dialog, with only the confirmation button showing.\n     *\n     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Window/alert}\n     */\n    alert?: boolean;\n\n    /**\n     * Adds a top accent border and icon next to the header.\n     * This behaves similarly to the Alert component in respect to the levels, icons, and colors\n     * passing `error` will treat the dialog the same as `dangerZone`\n     */\n    status?: StatusSeverity;\n  }\n\n  const props = withDefaults(defineProps<DialogProps>(), {\n    open: false,\n    disabled: false,\n    dangerZone: false,\n    header: t('ll.areYouSure'),\n    description: '',\n    cancelText: t('ll.cancel'),\n    confirmText: '',\n    alert: false,\n    status: undefined,\n  });\n\n  defineOptions({\n    name: 'll-dialog',\n    inheritAttrs: false,\n  });\n\n  const emits =\n    defineEmits<{\n      (e: 'update:open', value: boolean): void;\n      (e: 'cancel'): void;\n    }>();\n\n  const slots = useSlots();\n  const attrs = useAttrs();\n  const classes = useCssModule();\n  const headerId = uniqueId('dialog-header-');\n\n  const isConfirming = ref(false);\n  const root = ref();\n\n  /**\n   * Set the default confirm button text to \"Confirm\".\n   * If the `alert` prop is true, the default text is \"Okay\".\n   * If the `confirmText` prop is provided, `confirmText` is used whether or not\n   * the alert prop is true.\n   */\n  const modifiedConfirmText = computed(() => props.confirmText || (props.alert ? t('ll.okay') : t('ll.confirm')));\n\n  const hasDescription = computed(() => !!slots.default || props.description);\n\n  const statusIcon = computed<StatusIcon>(() =>\n    props.status ? StatusIcons[capitalize(props.status)] : StatusIcons.Info,\n  );\n  const statusColor = computed<StatusColor>(() =>\n    props.status ? StatusColors[capitalize(props.status)] : StatusColors.Info,\n  );\n\n  const computedDangerZone = computed(() => props.dangerZone || props.status === StatusSeverities.Error);\n\n  function cancel() {\n    emits('update:open', false);\n    emits('cancel');\n  }\n\n  async function handleConfirm(event: Event) {\n    isConfirming.value = true;\n\n    // useAttrs returns a Record<string, unknown> type, which causes\n    // TS errors when trying to call a passed listener\n    const onConfirm = attrs.onConfirm as (event: Event) => void;\n\n    // Call the parent confirm listener and await it. Using Async/Await lets\n    // us await even non-promises. Pass the event so modifiers can work.\n    await onConfirm(event);\n    isConfirming.value = false;\n  }\n\n  watchEffect(() => {\n    if (props.open) {\n      // Move focus to confirm button\n      nextTick(function () {\n        root.value.focus();\n      });\n    }\n  });\n</script>\n\n<template>\n  <transition name=\"fade\">\n    <dialog\n      v-if=\"props.open\"\n      ref=\"root\"\n      :open=\"props.open\"\n      tabindex=\"0\"\n      :aria-labelledby=\"headerId\"\n      aria-modal=\"true\"\n      :class=\"classes.dialog\"\n      :data-test=\"attrs['data-test'] || 'll-dialog'\"\n      v-bind=\"attrs\"\n      @keydown.esc=\"cancel\"\n    >\n      <div\n        :class=\"[\n          classes.body,\n          `tw-border-${statusColor}`,\n          {\n            'tw-border-t-6': props.status,\n          },\n        ]\"\n      >\n        <div :class=\"classes.content\">\n          <div class=\"tw-flex tw-items-center\" :class=\"hasDescription && 'tw-mb-1.5'\">\n            <Icon\n              v-if=\"props.status\"\n              data-test=\"dialog-status-icon\"\n              :name=\"statusIcon\"\n              :class=\"`tw-text-${statusColor}`\"\n            />\n            <h3 :id=\"headerId\" :class=\"{ 'tw-ml-1.5 tw-mt-px': props.status }\">{{ props.header }}</h3>\n          </div>\n\n          <p v-if=\"hasDescription\" class=\"tw-mb-0\">\n            <slot v-if=\"slots.default\"></slot>\n            <!-- eslint-disable-next-line vue/no-v-html -->\n            <span v-else v-html=\"props.description\"></span>\n          </p>\n        </div>\n\n        <footer :class=\"classes.footer\" class=\"lg:max-xl:tw-bg-blue-300 md:max-lg:tw-bg-orange-300\">\n          <div class=\"tw-text-right\">\n            <div :class=\"{ 'button-grid': !props.alert }\">\n              <Button v-if=\"!props.alert\" data-test=\"button|cancel\" secondary @click=\"cancel\">\n                {{ props.cancelText }}\n              </Button>\n\n              <Button\n                data-test=\"button|confirm\"\n                :disabled=\"props.disabled || isConfirming\"\n                :color=\"computedDangerZone ? 'red' : 'blue'\"\n                :class=\"{\n                  'tw-w-full': props.alert,\n                }\"\n                @click=\"handleConfirm\"\n              >\n                {{ modifiedConfirmText }}\n              </Button>\n            </div>\n          </div>\n        </footer>\n      </div>\n    </dialog>\n  </transition>\n</template>\n\n<style module>\n  .dialog {\n    background: rgb(0 0 0 / 30%);\n    bottom: 0;\n    display: flex;\n    flex-direction: column;\n    left: 0;\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    place-content: center;\n    position: fixed;\n    right: 0;\n    top: 0;\n    z-index: theme('zIndex.dialog');\n    width: 100%;\n    height: 100vh;\n  }\n\n  .body {\n    @apply tw-shadow;\n\n    background: var(--color-white);\n    color: var(--color-ice-700);\n    display: flex;\n    flex-direction: column;\n    margin: 0 auto;\n    max-height: 100vh;\n    max-width: 360px;\n    transition: transform theme('transitionDuration.150') theme('transitionTimingFunction.swing');\n    width: 100%;\n\n    &.grey {\n      background: var(--color-ice-200);\n      border-radius: theme('borderRadius.DEFAULT');\n    }\n\n    @media screen('md') {\n      border-radius: theme('borderRadius.DEFAULT');\n    }\n  }\n\n  .content {\n    flex-grow: 1;\n    padding: theme('spacing.6') var(--grid-gutter);\n  }\n\n  .footer {\n    background: var(--color-ice-200);\n    border-top: theme('borderWidth.DEFAULT') solid var(--color-ice-500);\n    display: initial; /* TEMP. Will need to fix marketplace `footer` style */\n    padding: theme('spacing.6') var(--grid-gutter);\n\n    @media screen('md') {\n      border-bottom-left-radius: theme('borderRadius.DEFAULT');\n      border-bottom-right-radius: theme('borderRadius.DEFAULT');\n    }\n  }\n\n  :global(.fade-enter-from),\n  :global(.fade-leave-active) {\n    .body {\n      transform: translate3d(0, theme('spacing.3'), 0);\n    }\n  }\n</style>\n"],"names":["slots","useSlots","attrs","useAttrs","classes","useCssModule","headerId","uniqueId","isConfirming","ref","root","modifiedConfirmText","computed","props","t","hasDescription","statusIcon","StatusIcons","capitalize","statusColor","StatusColors","computedDangerZone","StatusSeverities","cancel","emits","handleConfirm","event","onConfirm","watchEffect","nextTick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA4FQA,IAAQC,KACRC,IAAQC,KACRC,IAAUC,KACVC,IAAWC,EAAS,gBAAgB,GAEpCC,IAAeC,EAAI,EAAK,GACxBC,IAAOD,KAQPE,IAAsBC,EAAS,MAAMC,EAAM,gBAAgBA,EAAM,QAAQC,EAAE,SAAS,IAAIA,EAAE,YAAY,EAAE,GAExGC,IAAiBH,EAAS,MAAM,CAAC,CAACZ,EAAM,WAAWa,EAAM,WAAW,GAEpEG,IAAaJ;AAAA,MAAqB,MACtCC,EAAM,SAASI,EAAYC,EAAWL,EAAM,MAAM,CAAC,IAAII,EAAY;AAAA,IAAA,GAE/DE,IAAcP;AAAA,MAAsB,MACxCC,EAAM,SAASO,EAAaF,EAAWL,EAAM,MAAM,CAAC,IAAIO,EAAa;AAAA,IAAA,GAGjEC,IAAqBT,EAAS,MAAMC,EAAM,cAAcA,EAAM,WAAWS,EAAiB,KAAK;AAErG,aAASC,IAAS;AAChB,MAAAC,EAAM,eAAe,EAAK,GAC1BA,EAAM,QAAQ;AAAA,IAChB;AAEA,mBAAeC,EAAcC,GAAc;AACzC,MAAAlB,EAAa,QAAQ;AAIrB,YAAMmB,IAAYzB,EAAM;AAIxB,YAAMyB,EAAUD,CAAK,GACrBlB,EAAa,QAAQ;AAAA,IACvB;AAEA,WAAAoB,EAAY,MAAM;AAChB,MAAIf,EAAM,QAERgB,EAAS,WAAY;AACnB,QAAAnB,EAAK,MAAM;MAAM,CAClB;AAAA,IACH,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Divider.js

@@ -1,13 +1,13 @@
 import { openBlock as t, createElementBlock as s, normalizeClass as r, renderSlot as o } from "vue";
 import { _ as a } from "./_plugin-vue_export-helper-dad06003.js";
-const c = "_separator_1k1sz_2", l = {
+const c = "_separator_5w47w_2", l = {
   separator: c
 }, n = {
   name: "ll-divider"
 };
 function p(e, i, _, f, m, u) {
   return t(), s("div", {
-    class: r(["text-uppercase tw-flex tw-items-center tw-text-center", e.$style.separator]),
+    class: r(["tw-flex tw-items-center tw-text-center tw-uppercase", e.$style.separator]),
     role: "separator"
   }, [
     o(e.$slots, "default")
@@ -15,8 +15,8 @@ function p(e, i, _, f, m, u) {
 }
 const d = {
   $style: l
-}, k = /* @__PURE__ */ a(n, [["render", p], ["__cssModules", d]]);
+}, v = /* @__PURE__ */ a(n, [["render", p], ["__cssModules", d]]);
 export {
-  k as default
+  v as default
 };
 //# sourceMappingURL=Divider.js.map

package/dist/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sources":["../src/components/Divider/Divider.vue"],"sourcesContent":["<script>\n  export default {\n    name: 'll-divider',\n  };\n</script>\n\n<template>\n  <div class=\"text-uppercase tw-flex tw-items-center tw-text-center\" :class=\"$style.separator\" role=\"separator\">\n    <slot></slot>\n  </div>\n</template>\n\n<style module>\n  .separator::before,\n  .separator::after {\n    border-bottom: 1px solid var(--color-ice-200);\n    content: '';\n    flex: 1;\n  }\n\n  .separator:not(:empty)::before {\n    margin-right: var(--ll-space-2);\n  }\n\n  .separator:not(:empty)::after {\n    margin-left: var(--ll-space-2);\n  }\n</style>\n"],"names":["_sfc_main","_createElementBlock","_normalizeClass","_ctx","_renderSlot"],"mappings":";;;;GACOA,IAAU;AAAA,EACb,MAAM;;;cAKRC,EAEM,OAAA;AAAA,IAFD,OAAMC,EAAA,CAAA,yDAAgEC,EAAA,OAAO,SAAS,CAAA;AAAA,IAAE,MAAK;AAAA;IAChGC,EAAaD,EAAA,QAAA,SAAA;AAAA;;;;;"}
+{"version":3,"file":"Divider.js","sources":["../src/components/Divider/Divider.vue"],"sourcesContent":["<script>\n  export default {\n    name: 'll-divider',\n  };\n</script>\n\n<template>\n  <div class=\"tw-flex tw-items-center tw-text-center tw-uppercase\" :class=\"$style.separator\" role=\"separator\">\n    <slot></slot>\n  </div>\n</template>\n\n<style module>\n  .separator::before,\n  .separator::after {\n    border-bottom: 1px solid var(--color-ice-200);\n    content: '';\n    flex: 1;\n  }\n\n  .separator:not(:empty)::before {\n    margin-right: theme('spacing.3');\n  }\n\n  .separator:not(:empty)::after {\n    margin-left: theme('spacing.3');\n  }\n</style>\n"],"names":["_sfc_main","_createElementBlock","_normalizeClass","_ctx","_renderSlot"],"mappings":";;;;GACOA,IAAU;AAAA,EACb,MAAM;;;cAKRC,EAEM,OAAA;AAAA,IAFD,OAAMC,EAAA,CAAA,uDAA8DC,EAAA,OAAO,SAAS,CAAA;AAAA,IAAE,MAAK;AAAA;IAC9FC,EAAaD,EAAA,QAAA,SAAA;AAAA;;;;;"}

package/dist/Expand.js

@@ -1,4 +1,4 @@
-import { _ as m } from "./Expand.vue_vue_type_script_setup_true_lang-5fe03d51.js";
+import { _ as m } from "./Expand.vue_vue_type_script_setup_true_lang-1751f4a6.js";
 import "vue";
 export {
   m as default

package/dist/{Expand.vue_vue_type_script_setup_true_lang-5fe03d51.js → Expand.vue_vue_type_script_setup_true_lang-1751f4a6.js}

@@ -1,8 +1,7 @@
-import { defineComponent as y, ref as c, onMounted as u, openBlock as s, createBlock as v, resolveDynamicComponent as x, normalizeClass as g, withCtx as i, createVNode as m, Transition as E, createElementBlock as n, Fragment as k, renderSlot as d, createCommentVNode as w, withDirectives as C, vShow as B } from "vue";
-const _ = {
-  name: "ll-expand"
-}, $ = /* @__PURE__ */ y({
-  ..._,
+import { defineComponent as y, ref as c, onMounted as u, openBlock as s, createBlock as x, resolveDynamicComponent as v, normalizeClass as m, withCtx as i, createVNode as E, Transition as g, createElementBlock as n, Fragment as k, renderSlot as d, createCommentVNode as w, withDirectives as C, vShow as B } from "vue";
+const $ = /* @__PURE__ */ y({
+  name: "ll-expand",
+  __name: "Expand",
   props: {
     is: { default: "div" },
     isExpanded: { type: Boolean, default: !1 },
@@ -15,13 +14,13 @@ const _ = {
     u(() => {
       !o.isExpanded && t.value && (t.value.style.overflow = "hidden");
     });
-    const f = (e) => {
+    const p = (e) => {
       e.style.visibility = "hidden", e.style.height = "auto";
       const a = e.offsetHeight;
       e.style.visibility = "", e.style.display = "", e.style.height = 0, requestAnimationFrame(() => {
         e.style.height = `${a}px`;
       });
-    }, p = (e) => {
+    }, f = (e) => {
       e.style.height = "", e.style.overflow = "", r("after-expand");
     }, h = (e) => {
       const a = e.offsetHeight;
@@ -29,18 +28,18 @@ const _ = {
         e.style.height = 0;
       });
     };
-    return (e, a) => (s(), v(x(o.is), {
-      class: g(["stash-expand ll-expand", {
-        "is-expanded": e.isExpanded,
-        "is-collapsed": !e.isExpanded
+    return (e, a) => (s(), x(v(o.is), {
+      class: m(["stash-expand", {
+        "stash-expand--expanded": e.isExpanded,
+        "stash-expand--collapsed": !e.isExpanded
       }]),
       "data-test": "stash-expand"
     }, {
       default: i(() => [
-        m(E, {
+        E(g, {
           name: e.transitionName,
-          onAfterEnter: p,
-          onEnter: f,
+          onAfterEnter: f,
+          onEnter: p,
           onLeave: h
         }, {
           default: i(() => [
@@ -72,4 +71,4 @@ const _ = {
 export {
   $ as _
 };
-//# sourceMappingURL=Expand.vue_vue_type_script_setup_true_lang-5fe03d51.js.map
+//# sourceMappingURL=Expand.vue_vue_type_script_setup_true_lang-1751f4a6.js.map

package/dist/Expand.vue_vue_type_script_setup_true_lang-1751f4a6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Expand.vue_vue_type_script_setup_true_lang-1751f4a6.js","sources":["../src/components/Expand/Expand.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { onMounted, ref } from 'vue';\n\n  defineOptions({\n    name: 'll-expand',\n  });\n\n  export type ExpandOuterElement = 'div' | 'td' | 'li';\n\n  export interface ExpandProps {\n    /**\n     * The root element to use as the root element the expand transition gets applied to\n     */\n    is?: ExpandOuterElement;\n\n    /**\n     * Dictates whether the content is expanded or collapsed\n     */\n    isExpanded?: boolean;\n\n    /**\n     * Whether to only render content on expand\n     */\n    isLazy?: boolean;\n\n    /**\n     * The name of the transition to pass to the transition component\n     * @see: https://vuejs.org/guide/built-ins/transition.html#css-based-transitions\n     */\n    transitionName?: string;\n  }\n\n  const props = withDefaults(defineProps<ExpandProps>(), {\n    is: 'div',\n    isExpanded: false,\n    isLazy: false,\n    transitionName: 'expand',\n  });\n\n  const emit =\n    defineEmits<{\n      (e: 'after-expand'): void;\n    }>();\n\n  const contentRef = ref<HTMLElement | null>(null);\n\n  onMounted(() => {\n    if (!props.isExpanded && contentRef.value) {\n      contentRef.value.style.overflow = 'hidden';\n    }\n  });\n\n  /**\n   * Expands the element\n   * @param {object} element - the element being expanded\n   * @returns {void}\n   */\n  const onExpand = (element) => {\n    // Trick to calculate the height of the hidden element\n    element.style.visibility = 'hidden';\n    element.style.height = 'auto';\n\n    const height = element.offsetHeight;\n\n    // Restore default styling\n    element.style.visibility = '';\n    element.style.display = '';\n\n    // Set height on the element to zero\n    element.style.height = 0;\n\n    // Set expanded height after the other height change takes affect\n    requestAnimationFrame(() => {\n      element.style.height = `${height}px`;\n    });\n  };\n\n  /**\n   * Resores default styling after the expand animation is completed\n   * @param {object} element - the element being expanded\n   * @returns {void}\n   */\n  const afterExpand = (element) => {\n    element.style.height = '';\n    element.style.overflow = '';\n    emit('after-expand');\n  };\n\n  /**\n   * Collapses the element\n   * @param {object} element - the element being expanded\n   * @returns {void}\n   */\n  const onCollapse = (element) => {\n    const height = element.offsetHeight;\n\n    // Set height to the expanded height\n    element.style.height = `${height}px`;\n    element.style.overflow = 'hidden';\n\n    // Set height to zero after the other height change takes affect\n    requestAnimationFrame(() => {\n      element.style.height = 0;\n    });\n  };\n</script>\n\n<template>\n  <component\n    :is=\"props.is\"\n    class=\"stash-expand\"\n    data-test=\"stash-expand\"\n    :class=\"{\n      'stash-expand--expanded': isExpanded,\n      'stash-expand--collapsed': !isExpanded,\n    }\"\n  >\n    <transition :name=\"transitionName\" @after-enter=\"afterExpand\" @enter=\"onExpand\" @leave=\"onCollapse\">\n      <template v-if=\"isLazy\">\n        <div v-if=\"isExpanded\" ref=\"contentRef\">\n          <slot></slot>\n        </div>\n      </template>\n      <template v-else>\n        <div v-show=\"isExpanded\" ref=\"contentRef\">\n          <slot></slot>\n        </div>\n      </template>\n    </transition>\n  </component>\n</template>\n"],"names":["contentRef","ref","onMounted","props","onExpand","element","height","afterExpand","emit","onCollapse"],"mappings":";;;;;;;;;;;;iBA4CQA,IAAaC,EAAwB,IAAI;AAE/C,IAAAC,EAAU,MAAM;AACd,MAAI,CAACC,EAAM,cAAcH,EAAW,UACvBA,EAAA,MAAM,MAAM,WAAW;AAAA,IACpC,CACD;AAOK,UAAAI,IAAW,CAACC,MAAY;AAE5B,MAAAA,EAAQ,MAAM,aAAa,UAC3BA,EAAQ,MAAM,SAAS;AAEvB,YAAMC,IAASD,EAAQ;AAGvB,MAAAA,EAAQ,MAAM,aAAa,IAC3BA,EAAQ,MAAM,UAAU,IAGxBA,EAAQ,MAAM,SAAS,GAGvB,sBAAsB,MAAM;AAClB,QAAAA,EAAA,MAAM,SAAS,GAAGC,CAAM;AAAA,MAAA,CACjC;AAAA,IAAA,GAQGC,IAAc,CAACF,MAAY;AAC/B,MAAAA,EAAQ,MAAM,SAAS,IACvBA,EAAQ,MAAM,WAAW,IACzBG,EAAK,cAAc;AAAA,IAAA,GAQfC,IAAa,CAACJ,MAAY;AAC9B,YAAMC,IAASD,EAAQ;AAGf,MAAAA,EAAA,MAAM,SAAS,GAAGC,CAAM,MAChCD,EAAQ,MAAM,WAAW,UAGzB,sBAAsB,MAAM;AAC1B,QAAAA,EAAQ,MAAM,SAAS;AAAA,MAAA,CACxB;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Field.js

@@ -1,7 +1,7 @@
-import { _ as o } from "./Field.vue_vue_type_script_setup_true_lang-4483019d.js";
+import { _ as o } from "./Field.vue_vue_type_script_setup_true_lang-42ba3c5a.js";
 import "vue";
 import "lodash-es/uniqueId";
-import "./Label.vue_vue_type_script_setup_true_lang-2de35913.js";
+import "./Label.vue_vue_type_script_setup_true_lang-4b02087f.js";
 import "./locale.js";
 import "lodash-es/get";
 export {

package/dist/Field.vue.d.ts

@@ -78,7 +78,7 @@ export default _default;
 
 export declare interface FieldProps {
     /**
-     * Adds spacing under the field that is consistent whether or not hint/error text is displayed.
+     * Adds spacing under the field that is consistent whether hint/error text is displayed.
      */
     addBottomSpace?: boolean;
     /**

package/dist/{Field.vue_vue_type_script_setup_true_lang-4483019d.js → Field.vue_vue_type_script_setup_true_lang-42ba3c5a.js}

@@ -1,6 +1,6 @@
 import { defineComponent as x, useAttrs as k, useSlots as T, computed as a, openBlock as l, createBlock as m, resolveDynamicComponent as B, mergeProps as O, unref as f, withCtx as v, normalizeClass as R, createTextVNode as q, toDisplayString as p, createCommentVNode as s, createElementBlock as o, renderSlot as c } from "vue";
 import h from "lodash-es/uniqueId";
-import { _ as E } from "./Label.vue_vue_type_script_setup_true_lang-2de35913.js";
+import { _ as E } from "./Label.vue_vue_type_script_setup_true_lang-4b02087f.js";
 const L = ["aria-labelledby"], S = ["id"], C = {
   key: 4,
   class: "tw-mt-1 tw-block tw-whitespace-pre-line tw-text-xs",
@@ -93,4 +93,4 @@ const L = ["aria-labelledby"], S = ["id"], C = {
 export {
   z as _
 };
-//# sourceMappingURL=Field.vue_vue_type_script_setup_true_lang-4483019d.js.map
+//# sourceMappingURL=Field.vue_vue_type_script_setup_true_lang-42ba3c5a.js.map

package/dist/Field.vue_vue_type_script_setup_true_lang-42ba3c5a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.vue_vue_type_script_setup_true_lang-42ba3c5a.js","sources":["../src/components/Field/Field.vue"],"sourcesContent":["<script lang=\"ts\">\n  export default {\n    inheritAttrs: false,\n  };\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  export interface FieldProps {\n    /**\n     * Adds spacing under the field that is consistent whether hint/error text is displayed.\n     */\n    addBottomSpace?: boolean;\n\n    /**\n     * Error text to display. Replaces `hintText` (if provided) & adds error styling.\n     */\n    errorText?: string;\n\n    /**\n     * Displays text below the input; hidden when the isReadOnly prop is truthy.\n     */\n    hintText?: string;\n\n    /**\n     * ID for the Label and Input; must be unique\n     */\n    id?: string;\n\n    /**\n     * ID for the error text element; useful for aria-errormessage\n     */\n    errorId?: string;\n\n    /**\n     * Whether it's a readonly field.\n     */\n    isReadOnly?: boolean;\n\n    /**\n     * Whether the field is required.\n     */\n    isRequired?: boolean;\n\n    /**\n     * Label to render above the input.\n     */\n    label?: string;\n\n    /**\n     * Show \"(optional)\" to the right of the label text\n     */\n    showOptionalInLabel?: boolean;\n\n    /**\n     * Indicates wheter the field is a fieldset or not\n     */\n    fieldset?: boolean;\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  });\n  const attrs = useAttrs();\n  const slots = useSlots();\n  const fieldId = computed(() => props.id || uniqueId('field-'));\n  const fieldErrorId = computed(() => props.errorId || uniqueId('field-error-'));\n  const labelId = computed(() => uniqueId('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    v-bind=\"rootAttrs\"\n    :is=\"wrapperElement\"\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    ]\"\n  >\n    <Label\n      v-if=\"props.label\"\n      :id=\"labelId\"\n      :class=\"{ 'tw-mb-1.5': !!props.isReadOnly }\"\n      :for=\"fieldId\"\n      :has-error=\"hasError\"\n      :is-required=\"isRequired\"\n      :show-optional=\"props.showOptionalInLabel\"\n      :legend=\"props.fieldset\"\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    <template v-if=\"props.isReadOnly\">\n      <div :aria-labelledby=\"labelId\">\n        <slot\n          :field-id=\"fieldId\"\n          :field-error-id=\"fieldErrorId\"\n          :has-error=\"hasError\"\n          :is-required=\"isRequired\"\n          :label-id=\"labelId\"\n          :show-optional-in-label=\"props.showOptionalInLabel\"\n        ></slot>\n      </div>\n    </template>\n    <template v-else>\n      <slot\n        :field-id=\"fieldId\"\n        :field-error-id=\"fieldErrorId\"\n        :has-error=\"hasError\"\n        :is-required=\"isRequired\"\n        :label-id=\"labelId\"\n        :show-optional-in-label=\"props.showOptionalInLabel\"\n      ></slot>\n    </template>\n\n    <span\n      v-if=\"props.errorText\"\n      :id=\"fieldErrorId\"\n      class=\"tw-mt-1 tw-block tw-whitespace-pre-line tw-text-xs tw-text-red-500\"\n      data-test=\"field-error\"\n    >\n      {{ props.errorText }}\n    </span>\n\n    <span v-else-if=\"props.hintText\" class=\"tw-mt-1 tw-block tw-whitespace-pre-line tw-text-xs\" data-test=\"field-hint\">\n      <span v-if=\"!props.isReadOnly\">{{ props.hintText }}</span>\n    </span>\n\n    <div v-else-if=\"slots.hint\" class=\"tw-mt-1 tw-whitespace-pre-line tw-text-xs\" data-test=\"field-hint\">\n      <!-- @slot for displaying hint text below the field -->\n      <slot v-if=\"!props.isReadOnly\" name=\"hint\"></slot>\n    </div>\n  </component>\n</template>\n"],"names":["attrs","useAttrs","slots","useSlots","fieldId","computed","props","uniqueId","fieldErrorId","labelId","hasError","wrapperElement","rootAttrs","placeholder","otherAttrs"],"mappings":";;;;;;;;;;;OACiB;AAAA,EACb,cAAc;AAChB;;;;;;;;;;;;;;;;iBAwEMA,IAAQC,KACRC,IAAQC,KACRC,IAAUC,EAAS,MAAMC,EAAM,MAAMC,EAAS,QAAQ,CAAC,GACvDC,IAAeH,EAAS,MAAMC,EAAM,WAAWC,EAAS,cAAc,CAAC,GACvEE,IAAUJ,EAAS,MAAME,EAAS,cAAc,CAAC,GACjDG,IAAWL,EAAS,MAAM,CAAC,CAACC,EAAM,SAAS,GAC3CK,IAAiBN,EAAS,MAAOC,EAAM,WAAW,aAAa,KAAM,GAIrEM,IAAYP,EAAS,MAAM;AAC/B,YAAM,EAAE,aAAAQ,GAAa,GAAGC,EAAA,IAAed;AAEhC,aAAAc;AAAA,IAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/FileUpload.js

@@ -5,15 +5,15 @@ import F from "./Icon.js";
 import { resolveComponent as g, openBlock as r, createElementBlock as o, normalizeClass as d, createVNode as h, withModifiers as c, withCtx as y, createTextVNode as T, toDisplayString as p, createElementVNode as f, Fragment as v, createBlock as O, createCommentVNode as S, renderSlot as w, renderList as C, withDirectives as U, mergeProps as M, vShow as N } from "vue";
 import { _ as P } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/get";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-b2ee90e6.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js";
 import "lodash-es/uniqueId";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-const A = "_button_oi2f6_201", L = {
-  "file-dropbox": "_file-dropbox_oi2f6_176",
-  "is-dragging": "_is-dragging_oi2f6_184",
-  "is-disabled": "_is-disabled_oi2f6_192",
-  "upload-icon": "_upload-icon_oi2f6_196",
-  "remove-button": "_remove-button_oi2f6_201",
+const A = "_button_19hp2_29", L = {
+  "file-dropbox": "_file-dropbox_19hp2_2",
+  "is-dragging": "_is-dragging_19hp2_10",
+  "is-disabled": "_is-disabled_19hp2_19",
+  "upload-icon": "_upload-icon_19hp2_24",
+  "remove-button": "_remove-button_19hp2_29",
   button: A
 }, E = Object.freeze({
   CSV: {

package/dist/FileUpload.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.js","sources":["../src/components/FileUpload/FileUpload.vue"],"sourcesContent":["<script>\n  import InlineSvg from 'vue-inline-svg';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  export const FILE_TYPES = Object.freeze({\n    CSV: {\n      ACCEPTS: ['text/csv'],\n      EXTENSION: ['csv'],\n      MIME_TYPES: ['text/csv', 'application/octet-stream', 'application/vnd.ms-excel'],\n      ILLUSTRATION: 'csv',\n    },\n    PDF: {\n      ACCEPTS: ['application/pdf'],\n      EXTENSION: ['pdf'],\n      MIME_TYPES: ['application/pdf'],\n      ILLUSTRATION: 'pdf',\n    },\n    PNG: {\n      ACCEPTS: ['image/png'],\n      EXTENSION: ['png'],\n      MIME_TYPES: ['image/png'],\n      ILLUSTRATION: 'image',\n    },\n    JPEG: {\n      ACCEPTS: ['image/jpeg'],\n      EXTENSION: ['jpg', 'jpeg'],\n      MIME_TYPES: ['image/jpeg'],\n      ILLUSTRATION: 'image',\n    },\n    DOC: {\n      ACCEPTS: ['application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'],\n      EXTENSION: ['doc', 'docx'],\n      MIME_TYPES: ['application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'],\n      ILLUSTRATION: 'document',\n    },\n    XLS: {\n      ACCEPTS: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],\n      EXTENSION: ['xls', 'xlsx'],\n      MIME_TYPES: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],\n      ILLUSTRATION: 'csv',\n    },\n  });\n\n  // TODO: convert to enum (typescript)\n  export const Sizes = Object.freeze({\n    Dense: 'dense',\n    Standard: 'standard',\n  });\n\n  export default {\n    name: 'll-file-upload',\n\n    components: {\n      'll-icon': Icon,\n      'll-button': Button,\n      InlineSvg,\n    },\n\n    inject: ['stashOptions'],\n\n    inheritAttrs: false,\n\n    props: {\n      files: {\n        type: Array,\n        default: () => [],\n      },\n\n      /**\n       * The file types accepted by the input\n       */\n      fileTypes: {\n        type: Array,\n        default: () => Object.keys(FILE_TYPES),\n      },\n\n      /**\n       * Shows only an upload button\n       */\n      buttonOnly: {\n        type: Boolean,\n        default: false,\n      },\n\n      /**\n       * Disables the upload button\n       */\n      disabled: {\n        type: Boolean,\n        default: false,\n      },\n\n      /**\n       * When using the drag and drop feature, hide the icon\n       * and display everything on one line.\n       */\n      size: {\n        type: String,\n        default: 'standard',\n        validator: (value) => Object.values(Sizes).includes(value),\n      },\n    },\n\n    emits: ['file-select', 'file-delete', 'file-error'],\n\n    setup() {\n      return {\n        Sizes,\n      };\n    },\n\n    data() {\n      return {\n        isDraggingOver: false,\n        removeText: t('ll.fileUpload.remove'),\n        fileUploadUploadFileText: t('ll.fileUpload.uploadFile'),\n        fileUploadDragDropFileHereText: t('ll.fileUpload.dragDropFileHere'),\n        fileUploadOrText: t('ll.fileUpload.or'),\n      };\n    },\n\n    computed: {\n      inputAttrs() {\n        const attrs = { ...this.$attrs };\n\n        delete attrs['data-test'];\n        delete attrs.class;\n        delete attrs.type;\n        delete attrs.accept;\n\n        return attrs;\n      },\n\n      /**\n       * @returns {Array} A list of accepted file types\n       */\n      acceptedMimeTypes() {\n        return this.fileTypes.map((fileType) => this.fileMeta[fileType].MIME_TYPES).reduce(this.flattenArray);\n      },\n\n      /**\n       * @returns {Array} A list of accepted file types\n       */\n      acceptedFileExtensions() {\n        return this.fileTypes.map((fileType) => this.fileMeta[fileType].EXTENSION).reduce(this.flattenArray);\n      },\n\n      fileMeta() {\n        return FILE_TYPES;\n      },\n\n      illustrationPath() {\n        return `${this.stashOptions?.staticPath}/illustrations/FileUpload/${\n          FILE_TYPES[this.fileTypes[0]].ILLUSTRATION\n        }.svg`;\n      },\n    },\n\n    methods: {\n      openFileDialog() {\n        if (this.$refs.fileUpload) {\n          this.$refs.fileUpload.value = '';\n          this.$refs.fileUpload.click();\n        }\n      },\n\n      /**\n       * Sets file(s) to selected file(s) from dialogue\n       * @param {Object} event - file select event that contains file(s)\n       * @returns {Array} An array of files\n       */\n      handleFileInput(event) {\n        const files = [...event.target.files];\n\n        this.$emit('file-select', { event, files });\n      },\n\n      handleDragEnter() {\n        this.isDraggingOver = true;\n      },\n\n      handleDragLeave() {\n        this.isDraggingOver = false;\n      },\n\n      /**\n       * Sets file to dropped file if it is proper file type\n       * @param {Object} event - file select event that contains file\n       */\n      async handleDropFile(event) {\n        if (this.disabled) {\n          return;\n        }\n\n        const files = [...event.dataTransfer.files];\n\n        this.isDraggingOver = false;\n\n        if (this.acceptedMimeTypes.length) {\n          try {\n            const mimeTypePromises = await Promise.all(files.map((file) => this.readMimeType(file)));\n            const allCorrectMimeTypes = mimeTypePromises.every((mimeType) => this.acceptedMimeTypes.includes(mimeType));\n\n            if (!allCorrectMimeTypes) {\n              throw new Error('One or more files contains an unacceptable mime type.');\n            }\n\n            const allCorrectFileExtensions = files.every((file) => {\n              const extension = file.name.split('.').pop();\n\n              return this.acceptedFileExtensions.includes(extension);\n            });\n\n            if (!allCorrectFileExtensions) {\n              throw new Error('One or more files contains an unacceptable extension.');\n            }\n\n            this.$emit('file-select', { event, files });\n          } catch (error) {\n            this.handleFileError(error);\n          }\n        } else {\n          this.$emit('file-select', { event, files });\n        }\n      },\n\n      handleFileError(error) {\n        const message = this.t('ll.fileUpload.errors.incorrectFileType', {\n          fileTypes: this.acceptedFileExtensions.join(', '),\n        });\n\n        if (this.$attrs['file-error']) {\n          this.$emit('file-error', message);\n        } else {\n          this.$notify.warning(message);\n        }\n\n        throw error;\n      },\n\n      handleFileDelete(file) {\n        this.$emit('file-delete', file);\n      },\n\n      /**\n       * Check for the mime type on the uploaded File object\n       * Otherwise load the file and attempt to read it\n       * @param file The Uploaded File object\n       */\n      readMimeType(file) {\n        return new Promise((resolve, reject) => {\n          if (file.type) {\n            return resolve(file.type);\n          } else if (window.FileReader) {\n            const fileReader = new FileReader();\n\n            fileReader.onload = () => {\n              const mimeType = fileReader.result.match(/[^:]\\w+\\/[\\w-+\\d.]+(?=;|,)/)\n                ? fileReader.result.match(/[^:]\\w+\\/[\\w-+\\d.]+(?=;|,)/)[0]\n                : '';\n\n              resolve(mimeType);\n            };\n\n            fileReader.readAsDataURL(file);\n          } else {\n            reject(new Error('Failed to read file.'));\n          }\n        });\n      },\n\n      flattenArray(a, b) {\n        return a.concat(b);\n      },\n    },\n  };\n</script>\n\n<template>\n  <div :class=\"$attrs.class\" :data-test=\"$attrs['data-test']\">\n    <div v-if=\"buttonOnly\">\n      <ll-button secondary type=\"button\" :disabled=\"disabled || null\" @click.stop.prevent=\"openFileDialog\">\n        {{ fileUploadUploadFileText }}\n      </ll-button>\n    </div>\n    <div\n      v-else\n      class=\"tw-rounded tw-p-6\"\n      :class=\"[$style['file-dropbox'], isDraggingOver && $style['is-dragging'], disabled && $style['is-disabled']]\"\n      @dragover.prevent=\"handleDragEnter\"\n      @drop.prevent=\"handleDropFile\"\n      @dragleave.prevent=\"handleDragLeave\"\n    >\n      <div\n        class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-text-center\"\n        :class=\"[{ 'md:flex-row tw-items-center': size === Sizes.Dense }]\"\n      >\n        <template v-if=\"!files.length\">\n          <InlineSvg v-if=\"size !== Sizes.Dense\" :src=\"illustrationPath\" name=\"file\" width=\"84\" height=\"96\" />\n          <span class=\"tw-text-ice-900\">\n            {{ fileUploadDragDropFileHereText }}\n          </span>\n          <span :class=\"size === Sizes.Dense ? 'md:ml-1 md:mr-2 md:my-0 my-1 tw-text-ice-900' : 'tw-mt-1.5 my-1'\">\n            {{ fileUploadOrText }}\n          </span>\n          <ll-button\n            class=\"tw-mt-1.5\"\n            secondary\n            type=\"button\"\n            :class=\"$style['file-select-button']\"\n            :disabled=\"disabled\"\n            @click.stop.prevent=\"openFileDialog\"\n          >\n            <!-- @slot for custom submit text -->\n            <slot name=\"submitText\">{{ fileUploadUploadFileText }}</slot>\n          </ll-button>\n        </template>\n        <template v-else>\n          <div v-for=\"file in files\" :key=\"file.name\">\n            <ll-icon name=\"file\" />\n            <span>{{ file.name }}</span>\n            <ll-button\n              :class=\"[$style['remove-button'], $style['button']]\"\n              @click.stop.prevent=\"handleFileDelete(file)\"\n            >\n              {{ removeText }}\n            </ll-button>\n          </div>\n        </template>\n      </div>\n      <div v-if=\"$slots.hint && !files.length\" class=\"tw-mt-6 tw-text-center tw-text-xs tw-text-ice-700\">\n        <!-- @slot for displaying helpful text and/or links -->\n        <slot name=\"hint\"></slot>\n      </div>\n    </div>\n    <input\n      v-show=\"false\"\n      v-bind=\"inputAttrs\"\n      ref=\"fileUpload\"\n      type=\"file\"\n      :accept=\"fileTypes.map((fileType) => fileMeta[fileType].ACCEPTS).reduce(flattenArray)\"\n      :multiple=\"$attrs['multiple']\"\n      @change=\"handleFileInput($event)\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n  .file-dropbox {\n    background: var(--color-ice-200);\n    background-image: url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23C5C9D4FF' stroke-width='1' stroke-dasharray='5 %2c 5' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\");\n    background-repeat: no-repeat;\n    border: border('thin');\n    border-color: transparent;\n  }\n\n  .is-dragging {\n    background-image: none;\n    border-color: var(--color-ice-500);\n\n    & > * {\n      pointer-events: none;\n    }\n  }\n\n  .is-disabled {\n    cursor: no-drop;\n  }\n\n  // Constrain the upload icon for drag/drop to the required size\n  .upload-icon {\n    height: 98px;\n    width: 84px;\n  }\n\n  .remove-button.button {\n    background: transparent;\n    border: none;\n    color: var(--color-red-500);\n\n    &:hover {\n      background: transparent;\n      border: none;\n    }\n  }\n</style>\n"],"names":["FILE_TYPES","Sizes","_sfc_main","Icon","Button","InlineSvg","value","t","attrs","fileType","_a","event","files","file","mimeType","extension","error","message","resolve","reject","fileReader","a","b","_hoisted_3","_createElementBlock","_normalizeClass","_ctx","$props","_hoisted_2","_createVNode","_component_ll_button","$options","$data","args","_createElementVNode","$setup","_Fragment","_renderList","_component_ll_icon","_toDisplayString","_withModifiers","$event","_createBlock","_component_InlineSvg","_renderSlot","_openBlock","_hoisted_4","_mergeProps","_cache"],"mappings":"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"}
+{"version":3,"file":"FileUpload.js","sources":["../src/components/FileUpload/FileUpload.vue"],"sourcesContent":["<script>\n  import InlineSvg from 'vue-inline-svg';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  export const FILE_TYPES = Object.freeze({\n    CSV: {\n      ACCEPTS: ['text/csv'],\n      EXTENSION: ['csv'],\n      MIME_TYPES: ['text/csv', 'application/octet-stream', 'application/vnd.ms-excel'],\n      ILLUSTRATION: 'csv',\n    },\n    PDF: {\n      ACCEPTS: ['application/pdf'],\n      EXTENSION: ['pdf'],\n      MIME_TYPES: ['application/pdf'],\n      ILLUSTRATION: 'pdf',\n    },\n    PNG: {\n      ACCEPTS: ['image/png'],\n      EXTENSION: ['png'],\n      MIME_TYPES: ['image/png'],\n      ILLUSTRATION: 'image',\n    },\n    JPEG: {\n      ACCEPTS: ['image/jpeg'],\n      EXTENSION: ['jpg', 'jpeg'],\n      MIME_TYPES: ['image/jpeg'],\n      ILLUSTRATION: 'image',\n    },\n    DOC: {\n      ACCEPTS: ['application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'],\n      EXTENSION: ['doc', 'docx'],\n      MIME_TYPES: ['application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'],\n      ILLUSTRATION: 'document',\n    },\n    XLS: {\n      ACCEPTS: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],\n      EXTENSION: ['xls', 'xlsx'],\n      MIME_TYPES: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],\n      ILLUSTRATION: 'csv',\n    },\n  });\n\n  // TODO: convert to enum (typescript)\n  export const Sizes = Object.freeze({\n    Dense: 'dense',\n    Standard: 'standard',\n  });\n\n  export default {\n    name: 'll-file-upload',\n\n    components: {\n      'll-icon': Icon,\n      'll-button': Button,\n      InlineSvg,\n    },\n\n    inject: ['stashOptions'],\n\n    inheritAttrs: false,\n\n    props: {\n      files: {\n        type: Array,\n        default: () => [],\n      },\n\n      /**\n       * The file types accepted by the input\n       */\n      fileTypes: {\n        type: Array,\n        default: () => Object.keys(FILE_TYPES),\n      },\n\n      /**\n       * Shows only an upload button\n       */\n      buttonOnly: {\n        type: Boolean,\n        default: false,\n      },\n\n      /**\n       * Disables the upload button\n       */\n      disabled: {\n        type: Boolean,\n        default: false,\n      },\n\n      /**\n       * When using the drag and drop feature, hide the icon\n       * and display everything on one line.\n       */\n      size: {\n        type: String,\n        default: 'standard',\n        validator: (value) => Object.values(Sizes).includes(value),\n      },\n    },\n\n    emits: ['file-select', 'file-delete', 'file-error'],\n\n    setup() {\n      return {\n        Sizes,\n      };\n    },\n\n    data() {\n      return {\n        isDraggingOver: false,\n        removeText: t('ll.fileUpload.remove'),\n        fileUploadUploadFileText: t('ll.fileUpload.uploadFile'),\n        fileUploadDragDropFileHereText: t('ll.fileUpload.dragDropFileHere'),\n        fileUploadOrText: t('ll.fileUpload.or'),\n      };\n    },\n\n    computed: {\n      inputAttrs() {\n        const attrs = { ...this.$attrs };\n\n        delete attrs['data-test'];\n        delete attrs.class;\n        delete attrs.type;\n        delete attrs.accept;\n\n        return attrs;\n      },\n\n      /**\n       * @returns {Array} A list of accepted file types\n       */\n      acceptedMimeTypes() {\n        return this.fileTypes.map((fileType) => this.fileMeta[fileType].MIME_TYPES).reduce(this.flattenArray);\n      },\n\n      /**\n       * @returns {Array} A list of accepted file types\n       */\n      acceptedFileExtensions() {\n        return this.fileTypes.map((fileType) => this.fileMeta[fileType].EXTENSION).reduce(this.flattenArray);\n      },\n\n      fileMeta() {\n        return FILE_TYPES;\n      },\n\n      illustrationPath() {\n        return `${this.stashOptions?.staticPath}/illustrations/FileUpload/${\n          FILE_TYPES[this.fileTypes[0]].ILLUSTRATION\n        }.svg`;\n      },\n    },\n\n    methods: {\n      openFileDialog() {\n        if (this.$refs.fileUpload) {\n          this.$refs.fileUpload.value = '';\n          this.$refs.fileUpload.click();\n        }\n      },\n\n      /**\n       * Sets file(s) to selected file(s) from dialogue\n       * @param {Object} event - file select event that contains file(s)\n       * @returns {Array} An array of files\n       */\n      handleFileInput(event) {\n        const files = [...event.target.files];\n\n        this.$emit('file-select', { event, files });\n      },\n\n      handleDragEnter() {\n        this.isDraggingOver = true;\n      },\n\n      handleDragLeave() {\n        this.isDraggingOver = false;\n      },\n\n      /**\n       * Sets file to dropped file if it is proper file type\n       * @param {Object} event - file select event that contains file\n       */\n      async handleDropFile(event) {\n        if (this.disabled) {\n          return;\n        }\n\n        const files = [...event.dataTransfer.files];\n\n        this.isDraggingOver = false;\n\n        if (this.acceptedMimeTypes.length) {\n          try {\n            const mimeTypePromises = await Promise.all(files.map((file) => this.readMimeType(file)));\n            const allCorrectMimeTypes = mimeTypePromises.every((mimeType) => this.acceptedMimeTypes.includes(mimeType));\n\n            if (!allCorrectMimeTypes) {\n              throw new Error('One or more files contains an unacceptable mime type.');\n            }\n\n            const allCorrectFileExtensions = files.every((file) => {\n              const extension = file.name.split('.').pop();\n\n              return this.acceptedFileExtensions.includes(extension);\n            });\n\n            if (!allCorrectFileExtensions) {\n              throw new Error('One or more files contains an unacceptable extension.');\n            }\n\n            this.$emit('file-select', { event, files });\n          } catch (error) {\n            this.handleFileError(error);\n          }\n        } else {\n          this.$emit('file-select', { event, files });\n        }\n      },\n\n      handleFileError(error) {\n        const message = this.t('ll.fileUpload.errors.incorrectFileType', {\n          fileTypes: this.acceptedFileExtensions.join(', '),\n        });\n\n        if (this.$attrs['file-error']) {\n          this.$emit('file-error', message);\n        } else {\n          this.$notify.warning(message);\n        }\n\n        throw error;\n      },\n\n      handleFileDelete(file) {\n        this.$emit('file-delete', file);\n      },\n\n      /**\n       * Check for the mime type on the uploaded File object\n       * Otherwise load the file and attempt to read it\n       * @param file The Uploaded File object\n       */\n      readMimeType(file) {\n        return new Promise((resolve, reject) => {\n          if (file.type) {\n            return resolve(file.type);\n          } else if (window.FileReader) {\n            const fileReader = new FileReader();\n\n            fileReader.onload = () => {\n              const mimeType = fileReader.result.match(/[^:]\\w+\\/[\\w-+\\d.]+(?=;|,)/)\n                ? fileReader.result.match(/[^:]\\w+\\/[\\w-+\\d.]+(?=;|,)/)[0]\n                : '';\n\n              resolve(mimeType);\n            };\n\n            fileReader.readAsDataURL(file);\n          } else {\n            reject(new Error('Failed to read file.'));\n          }\n        });\n      },\n\n      flattenArray(a, b) {\n        return a.concat(b);\n      },\n    },\n  };\n</script>\n\n<template>\n  <div :class=\"$attrs.class\" :data-test=\"$attrs['data-test']\">\n    <div v-if=\"buttonOnly\">\n      <ll-button secondary type=\"button\" :disabled=\"disabled || null\" @click.stop.prevent=\"openFileDialog\">\n        {{ fileUploadUploadFileText }}\n      </ll-button>\n    </div>\n    <div\n      v-else\n      class=\"tw-rounded tw-p-6\"\n      :class=\"[$style['file-dropbox'], isDraggingOver && $style['is-dragging'], disabled && $style['is-disabled']]\"\n      @dragover.prevent=\"handleDragEnter\"\n      @drop.prevent=\"handleDropFile\"\n      @dragleave.prevent=\"handleDragLeave\"\n    >\n      <div\n        class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-text-center\"\n        :class=\"[{ 'md:flex-row tw-items-center': size === Sizes.Dense }]\"\n      >\n        <template v-if=\"!files.length\">\n          <InlineSvg v-if=\"size !== Sizes.Dense\" :src=\"illustrationPath\" name=\"file\" width=\"84\" height=\"96\" />\n          <span class=\"tw-text-ice-900\">\n            {{ fileUploadDragDropFileHereText }}\n          </span>\n          <span :class=\"size === Sizes.Dense ? 'md:ml-1 md:mr-2 md:my-0 my-1 tw-text-ice-900' : 'tw-mt-1.5 my-1'\">\n            {{ fileUploadOrText }}\n          </span>\n          <ll-button\n            class=\"tw-mt-1.5\"\n            secondary\n            type=\"button\"\n            :class=\"$style['file-select-button']\"\n            :disabled=\"disabled\"\n            @click.stop.prevent=\"openFileDialog\"\n          >\n            <!-- @slot for custom submit text -->\n            <slot name=\"submitText\">{{ fileUploadUploadFileText }}</slot>\n          </ll-button>\n        </template>\n        <template v-else>\n          <div v-for=\"file in files\" :key=\"file.name\">\n            <ll-icon name=\"file\" />\n            <span>{{ file.name }}</span>\n            <ll-button\n              :class=\"[$style['remove-button'], $style['button']]\"\n              @click.stop.prevent=\"handleFileDelete(file)\"\n            >\n              {{ removeText }}\n            </ll-button>\n          </div>\n        </template>\n      </div>\n      <div v-if=\"$slots.hint && !files.length\" class=\"tw-mt-6 tw-text-center tw-text-xs tw-text-ice-700\">\n        <!-- @slot for displaying helpful text and/or links -->\n        <slot name=\"hint\"></slot>\n      </div>\n    </div>\n    <input\n      v-show=\"false\"\n      v-bind=\"inputAttrs\"\n      ref=\"fileUpload\"\n      type=\"file\"\n      :accept=\"fileTypes.map((fileType) => fileMeta[fileType].ACCEPTS).reduce(flattenArray)\"\n      :multiple=\"$attrs['multiple']\"\n      @change=\"handleFileInput($event)\"\n    />\n  </div>\n</template>\n\n<style module>\n  .file-dropbox {\n    background: var(--color-ice-200);\n    background-image: url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23C5C9D4FF' stroke-width='1' stroke-dasharray='5 %2c 5' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\");\n    background-repeat: no-repeat;\n    border: theme('borderWidth.DEFAULT') solid var(--color-ice-500);\n    border-color: transparent;\n  }\n\n  .is-dragging {\n    background-image: none;\n    border-color: var(--color-ice-500);\n\n    & > * {\n      pointer-events: none;\n    }\n  }\n\n  .is-disabled {\n    cursor: no-drop;\n  }\n\n  /* Constrain the upload icon for drag/drop to the required size */\n  .upload-icon {\n    height: 98px;\n    width: 84px;\n  }\n\n  .remove-button.button {\n    background: transparent;\n    border: none;\n    color: var(--color-red-500);\n\n    &:hover {\n      background: transparent;\n      border: none;\n    }\n  }\n</style>\n"],"names":["FILE_TYPES","Sizes","_sfc_main","Icon","Button","InlineSvg","value","t","attrs","fileType","_a","event","files","file","mimeType","extension","error","message","resolve","reject","fileReader","a","b","_hoisted_3","_createElementBlock","_normalizeClass","_ctx","$props","_hoisted_2","_createVNode","_component_ll_button","$options","$data","args","_createElementVNode","$setup","_Fragment","_renderList","_component_ll_icon","_toDisplayString","_withModifiers","$event","_createBlock","_component_InlineSvg","_renderSlot","_openBlock","_hoisted_4","_mergeProps","_cache"],"mappings":"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"}