@leaflink/stash 44.0.0-beta.5 → 44.0.0-beta.7

package/dist/DescriptionListTerm.js

@@ -1,17 +1,17 @@
-import { defineComponent as a, inject as o, openBlock as i, createElementBlock as n, normalizeClass as c, unref as e, renderSlot as m, createCommentVNode as d } from "vue";
+import { defineComponent as r, inject as a, openBlock as n, createElementBlock as i, normalizeClass as c, unref as e, renderSlot as m, createCommentVNode as d } from "vue";
 import { D as l } from "./DescriptionList.keys-c906ce05.js";
 const p = ["data-variant"], w = {
   key: 0,
   class: "hidden md:tw-inline"
-}, k = /* @__PURE__ */ a({
+}, k = /* @__PURE__ */ r({
   __name: "DescriptionListTerm",
   setup(_) {
-    const s = o(l.key);
+    const s = a(l.key);
     if (!s)
       throw new Error("DescriptionListDetail must be used within a DescriptionList component.");
     const { variant: t } = s;
-    return (r, u) => (i(), n("dt", {
-      class: c(["stash-description-list-term tw-text-medium tw-text-ice-900", {
+    return (o, u) => (n(), i("dt", {
+      class: c(["stash-description-list-term tw-font-medium tw-text-ice-900", {
         "md:tw-w-2/5 md:tw-max-w-[10.5rem]": e(t) === "columns",
         "tw-mr-1.5": e(t) === "inline",
         "tw-pb-1.5": e(t) === "stacked",
@@ -20,8 +20,8 @@ const p = ["data-variant"], w = {
       "data-test": "stash-description-list-term",
       "data-variant": e(t)
     }, [
-      m(r.$slots, "default"),
-      e(t) === "inline" ? (i(), n("span", w, ":")) : d("", !0)
+      m(o.$slots, "default"),
+      e(t) === "inline" ? (n(), i("span", w, ":")) : d("", !0)
     ], 10, p));
   }
 });

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-text-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=\"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.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\">\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Divider.js

@@ -1,21 +1,21 @@
-import { openBlock as s, createElementBlock as t, normalizeClass as r, renderSlot as o } from "vue";
+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 l = "_separator_1k1sz_2", n = {
-  separator: l
-}, c = {
+const c = "_separator_1k1sz_2", l = {
+  separator: c
+}, n = {
   name: "ll-divider"
 };
 function p(e, i, _, f, m, u) {
-  return s(), t("div", {
-    class: r(["align-middle text-uppercase tw-flex tw-text-center", e.$style.separator]),
+  return t(), s("div", {
+    class: r(["text-uppercase tw-flex tw-items-center tw-text-center", e.$style.separator]),
     role: "separator"
   }, [
     o(e.$slots, "default")
   ], 2);
 }
 const d = {
-  $style: n
-}, k = /* @__PURE__ */ a(c, [["render", p], ["__cssModules", d]]);
+  $style: l
+}, k = /* @__PURE__ */ a(n, [["render", p], ["__cssModules", d]]);
 export {
   k as default
 };

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=\"align-middle text-uppercase tw-flex 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,sDAA6DC,EAAA,OAAO,SAAS,CAAA;AAAA,IAAE,MAAK;AAAA;IAC7FC,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=\"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;;;;;"}

package/dist/Dropdown.js

@@ -1,5 +1,5 @@
-import { defineComponent as R, ref as u, useCssModule as z, watch as C, onMounted as I, onBeforeUnmount as q, computed as K, withDirectives as _, openBlock as v, createElementBlock as k, renderSlot as x, createElementVNode as E, normalizeClass as b, createTextVNode as U, toDisplayString as V, createVNode as S, createBlock as W, Transition as Y, withCtx as F, unref as M, normalizeStyle as j, vShow as G, nextTick as A } from "vue";
-import { KEY_CODES as d } from "./constants.js";
+import { defineComponent as R, ref as u, useCssModule as z, watch as C, onMounted as I, onBeforeUnmount as q, computed as K, withDirectives as _, openBlock as v, createElementBlock as k, renderSlot as b, createElementVNode as x, normalizeClass as E, createTextVNode as U, toDisplayString as V, createVNode as S, createBlock as W, Transition as Y, withCtx as F, unref as M, normalizeStyle as j, vShow as G, nextTick as A } from "vue";
+import { KEY_CODES as f } from "./constants.js";
 import H from "./clickoutside.js";
 import J from "./utils/calculateElementOverflow.js";
 import { getMountPoint as Q } from "./utils/helpers.js";
@@ -29,18 +29,18 @@ const Z = ["aria-expanded"], ee = {
   },
   emits: ["toggle", "dismiss"],
   setup(D, { expose: $, emit: p }) {
-    const a = D, t = u(null), w = u(null), f = [], s = u(f), i = u(-1), o = u(!1), g = u({}), L = z();
+    const a = D, t = u(null), w = u(null), d = [], s = u(d), i = u(-1), o = u(!1), g = u({}), L = z();
     C(o, (e) => {
       e || (i.value = -1), p("toggle", e);
     }), C(i, (e, l) => {
-      e in s.value && s.value[e].classList.add("is-highlighted"), l in s.value && s.value[l].classList.remove("is-highlighted");
+      e in s.value && s.value[e].classList.add("tw-bg-ice-200"), l in s.value && s.value[l].classList.remove("tw-bg-ice-200");
     }), I(() => {
       var e, l, n;
       if (a.reattach) {
         const c = Q();
         t.value && c.appendChild(t.value);
       }
-      (e = t.value) != null && e.querySelector(".stash-menu") ? s.value = ((l = t.value) == null ? void 0 : l.querySelectorAll(".stash-menu-item")) ?? f : s.value = ((n = t.value) == null ? void 0 : n.querySelectorAll(".dropdown__item")) ?? f, window.addEventListener("resize", () => r());
+      (e = t.value) != null && e.querySelector(".stash-menu") ? s.value = ((l = t.value) == null ? void 0 : l.querySelectorAll(".stash-menu-item")) ?? d : s.value = ((n = t.value) == null ? void 0 : n.querySelectorAll(".dropdown__item")) ?? d, window.addEventListener("resize", () => r());
     }), q(() => {
       var e, l;
       window.removeEventListener("resize", () => r()), (l = (e = t.value) == null ? void 0 : e.parentNode) == null || l.removeChild(t.value);
@@ -57,13 +57,13 @@ const Z = ["aria-expanded"], ee = {
       o.value ? o.value = !1 : (o.value = !0, await O(), (e = t.value) == null || e.focus());
     }
     function T(e) {
-      if (e.keyCode === d.ESCAPE)
+      if (e.keyCode === f.ESCAPE)
         r();
-      else if (e.keyCode === d.DOWN && i.value < s.value.length - 1)
+      else if (e.keyCode === f.DOWN && i.value < s.value.length - 1)
         o.value && i.value++;
-      else if (e.keyCode === d.UP && i.value > -1)
+      else if (e.keyCode === f.UP && i.value > -1)
         o.value && i.value--;
-      else if (e.keyCode === d.ENTER && i.value !== -1)
+      else if (e.keyCode === f.ENTER && i.value !== -1)
         o.value && s[i.value].click();
       else
         return;
@@ -103,14 +103,14 @@ const Z = ["aria-expanded"], ee = {
       "data-test": "ll-dropdown",
       onKeydown: T
     }, [
-      x(e.$slots, "toggle", {
+      b(e.$slots, "toggle", {
         isActive: o.value,
         toggle: m
       }, () => [
-        E("button", {
+        x("button", {
           "data-test": "button|toggle",
           "aria-expanded": o.value,
-          class: b([e.label ? "button--tertiary tw-min-w-auto tw-outline-none" : "button--icon button tw-rounded"]),
+          class: E([e.label ? "button--tertiary tw-min-w-auto tw-outline-none" : "button--icon button tw-rounded"]),
           onClick: m
         }, [
           e.label ? (v(), k("span", ee, [
@@ -127,11 +127,11 @@ const Z = ["aria-expanded"], ee = {
         onAfterLeave: N
       }, {
         default: F(() => [
-          _(E("div", {
+          _(x("div", {
             ref_key: "contentRef",
             ref: t,
             "data-test": "ll-dropdown-content",
-            class: b([
+            class: E([
               M(L).content,
               e.contentClass,
               {
@@ -142,7 +142,7 @@ const Z = ["aria-expanded"], ee = {
             ]),
             style: j(g.value)
           }, [
-            x(e.$slots, "default", {
+            b(e.$slots, "default", {
               dismiss: r,
               isActive: o.value
             })

package/dist/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../src/components/Dropdown/Dropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, nextTick, onBeforeUnmount, onMounted, ref, useCssModule, watch } from 'vue';\n\n  import { KEY_CODES } from '../../constants';\n  import vClickoutside from '../../directives/clickoutside/clickoutside';\n  import calculateElementOverflow from '../../utils/calculateElementOverflow';\n  import { getMountPoint } from '../../utils/helpers';\n  import Icon from '../Icon/Icon.vue';\n\n  export type DropdownOffset = {\n    x?: number;\n    y?: number;\n  };\n\n  export interface DropdownProps {\n    /**\n     * Used to position the dropdown relative to target\n     * Options: left, right\n     */\n    align?: 'left' | 'right';\n    /**\n     * When passed, text with caret is displayed instead of default kebab menu.\n     */\n    label?: string;\n    /**\n     * If true, dropdown will remain open when clicking on its content. Otherwise, it'll close automatically on click.\n     */\n    closeManually?: boolean;\n    /**\n     * Used to horizontally and vertically offset the dropdown in pixels\n     * Keep in mind, `x` value is relative to `align` value.\n     */\n    offset?: DropdownOffset;\n    /**\n     * If `reattach` is true, the contents will be mounted in the mount point container,\n     * so as to circumvent clipping issues from a parent's overflow property.\n     */\n    reattach?: boolean;\n    /**\n     * Custom class to apply to the default dropdown content element\n     */\n    contentClass?: string | string[];\n    /**\n     * Removes content container's max width\n     */\n    fluidContent?: boolean;\n  }\n\n  type DropdownStyles = {\n    left?: string;\n    right?: string;\n    top?: string;\n  };\n\n  defineOptions({\n    name: 'll-dropdown',\n  });\n\n  const props = withDefaults(defineProps<DropdownProps>(), {\n    align: 'right',\n    label: '',\n    closeManually: false,\n    offset: () => ({}),\n    reattach: true,\n    contentClass: '',\n    fluidContent: false,\n  });\n\n  const emit =\n    defineEmits<{\n      toggle: [isActive: boolean];\n      dismiss: [];\n    }>();\n\n  const contentRef = ref<HTMLElement | null>(null);\n  const dropdownRef = ref<HTMLDivElement | null>(null);\n\n  const DEFAULT_ITEMS_LIST = [] as unknown as NodeListOf<Element>;\n\n  const items = ref<NodeListOf<Element>>(DEFAULT_ITEMS_LIST);\n  const itemIndex = ref(-1);\n  const isActive = ref(false);\n\n  const styles = ref<DropdownStyles>({});\n  const classes = useCssModule();\n\n  watch(isActive, (val) => {\n    if (!val) {\n      itemIndex.value = -1;\n    }\n\n    emit('toggle', val);\n  });\n\n  watch(itemIndex, (next, prev) => {\n    next in items.value && items.value[next].classList.add('is-highlighted');\n    prev in items.value && items.value[prev].classList.remove('is-highlighted');\n  });\n\n  onMounted(() => {\n    if (props.reattach) {\n      const target = getMountPoint();\n\n      contentRef.value && target.appendChild(contentRef.value);\n    }\n\n    // if stash-menu exists, use it's items\n    if (contentRef.value?.querySelector('.stash-menu')) {\n      items.value = contentRef.value?.querySelectorAll('.stash-menu-item') ?? DEFAULT_ITEMS_LIST;\n    } else {\n      items.value = contentRef.value?.querySelectorAll('.dropdown__item') ?? DEFAULT_ITEMS_LIST;\n    }\n\n    // avoid calling dismiss with ResizeEvent because it's target is the Window element and it's not a valid Node element to be passed to dismiss\n    window.addEventListener('resize', () => dismiss());\n  });\n\n  onBeforeUnmount(() => {\n    window.removeEventListener('resize', () => dismiss());\n    contentRef.value?.parentNode?.removeChild(contentRef.value);\n  });\n\n  /**\n   * Dismisses the Dropdown.\n   */\n  function dismiss(event?: Event) {\n    if (\n      props.closeManually &&\n      (contentRef.value?.contains(event?.target as HTMLElement) || contentRef.value === event?.target)\n    ) {\n      return;\n    }\n\n    const wasOpen = isActive.value;\n\n    isActive.value = false;\n\n    if (wasOpen) {\n      emit('dismiss');\n    }\n  }\n\n  /**\n   * Opens or closes the Dropdown. If opening, positions and focuses its content.\n   */\n  async function toggle() {\n    if (isActive.value) {\n      isActive.value = false;\n    } else {\n      isActive.value = true;\n      await calculateOffset();\n      contentRef.value?.focus();\n    }\n  }\n\n  /**\n   * Handles all user keyboard input on the Dropdown.\n   * @param {KeyboardEvent} e The native keydown event.\n   */\n  function onKeyDown(e: KeyboardEvent) {\n    if (e.keyCode === KEY_CODES.ESCAPE) {\n      dismiss();\n    } else if (e.keyCode === KEY_CODES.DOWN && itemIndex.value < items.value.length - 1) {\n      isActive.value && itemIndex.value++;\n    } else if (e.keyCode === KEY_CODES.UP && itemIndex.value > -1) {\n      isActive.value && itemIndex.value--;\n    } else if (e.keyCode === KEY_CODES.ENTER && itemIndex.value !== -1) {\n      isActive.value && items[itemIndex.value].click();\n    } else {\n      return;\n    }\n\n    e.preventDefault(); // if keyDown did something / we didn't return\n  }\n\n  /**\n   * Reset any page overflow offset\n   */\n  function resetOffset() {\n    contentRef.value?.style.setProperty('--offset', '0');\n  }\n\n  /**\n   * Calculate the position for the Dropdown content element,\n   * relative to the viewport.\n   * Repositions the dropdown content element (& arrow)\n   * if it overflows the page (including gutter).\n   */\n  async function calculateOffset() {\n    await nextTick();\n\n    const toggleBCR = dropdownRef.value?.getBoundingClientRect() || ({} as DOMRect);\n    const top = toggleBCR.top + toggleBCR.height;\n    const offset = {\n      x: 0,\n      y: 0,\n      ...props.offset,\n    };\n\n    if (props.reattach) {\n      styles.value = {\n        left: props.align === 'left' ? `${Math.round(toggleBCR.left) + offset.x}px` : undefined,\n        right:\n          props.align === 'right'\n            ? `${document.documentElement.clientWidth - Math.round(toggleBCR.right) + offset.x}px`\n            : undefined,\n        top: `${window.scrollY + top + offset.y}px`,\n      };\n      await nextTick(); // wait for style updates to sync in the DOM\n    }\n\n    const overflow = calculateElementOverflow(contentRef?.value);\n\n    if (overflow) {\n      const direction = props.align === 'left' ? '-' : '';\n      contentRef.value?.style.setProperty('--offset', `${direction}${overflow.value}`);\n    }\n  }\n\n  defineExpose({\n    isActive: computed(() => isActive.value),\n    toggle,\n    dismiss,\n  });\n</script>\n\n<template>\n  <div\n    ref=\"dropdownRef\"\n    v-clickoutside=\"dismiss\"\n    class=\"tw-relative tw-inline-block\"\n    data-test=\"ll-dropdown\"\n    @keydown=\"onKeyDown\"\n  >\n    <!-- @slot Toggle component slot, receives `toggle` method to trigger Dropdown display -->\n    <slot name=\"toggle\" :is-active=\"isActive\" :toggle=\"toggle\">\n      <button\n        data-test=\"button|toggle\"\n        :aria-expanded=\"isActive\"\n        :class=\"[label ? 'button--tertiary tw-min-w-auto tw-outline-none' : 'button--icon button tw-rounded']\"\n        @click=\"toggle\"\n      >\n        <span v-if=\"label\" class=\"tw-flex tw-items-center tw-font-medium tw-text-blue-500 hover:tw-text-blue-700\">\n          {{ label }}\n          <Icon name=\"caret-down\" />\n        </span>\n        <Icon v-else name=\"ellipsis\" />\n      </button>\n    </slot>\n\n    <transition name=\"fade\" @after-leave=\"resetOffset\">\n      <div\n        v-show=\"isActive\"\n        ref=\"contentRef\"\n        data-test=\"ll-dropdown-content\"\n        :class=\"[\n          classes.content,\n          contentClass,\n          {\n            'tw-left-0 after:tw-left-6': props.align === 'left',\n            'tw-right-0': props.align === 'right',\n            'tw-max-w-[360px]': !props.fluidContent,\n          },\n        ]\"\n        :style=\"styles\"\n      >\n        <!-- @slot Dropdown content slot. Receives `dismiss` method, to trigger manual close. You must call dismiss with parentheses. Receives `is-active` prop.  -->\n        <slot :dismiss=\"dismiss\" :is-active=\"isActive\"></slot>\n      </div>\n    </transition>\n  </div>\n</template>\n\n<style module>\n  .content {\n    --offset: 0;\n\n    @apply tw-shadow\n      tw-bg-white\n      tw-border\n      tw-border-solid\n      tw-border-blue-500\n      tw-rounded\n      tw-absolute\n      tw-z-control\n      tw-min-w-[200px];\n\n    transform: translateX(calc(var(--offset) * 1px));\n  }\n\n  /**\n  * TODO: these global styles should be componentized in https://leaflink.atlassian.net/browse/STASH-566\n  */\n  :global(.dropdown__list) {\n    @apply tw-bg-white tw-list-none tw-m-1.5 tw-p-0;\n  }\n\n  :global(.dropdown__item) {\n    @apply tw-block tw-mx-0 tw-mt-0 tw-mb-1.5 tw-w-full first:tw-mt-0 last:tw-mb-0;\n  }\n\n  :global(.dropdown__item) button {\n    @apply tw-border-none tw-text-left tw-p-1.5;\n  }\n\n  :global(.dropdown__item) :where(a, button) {\n    @apply tw-rounded\n    tw-text-ice-700\n      tw-block\n      tw-py-[10px]\n      tw-px-1.5\n      tw-w-full\n      disabled:tw-text-ice-500\n      disabled:tw-cursor-default\n      hover:tw-bg-ice-200\n      hover:tw-text-ice-700\n      hover:tw-no-underline\n      tw-transition-all\n      tw-duration-fast\n      tw-ease-swing;\n  }\n</style>\n"],"names":["contentRef","ref","dropdownRef","DEFAULT_ITEMS_LIST","items","itemIndex","isActive","styles","classes","useCssModule","watch","val","emit","next","prev","onMounted","props","target","getMountPoint","_a","_b","_c","dismiss","onBeforeUnmount","event","wasOpen","toggle","calculateOffset","onKeyDown","KEY_CODES","resetOffset","nextTick","toggleBCR","top","offset","overflow","calculateElementOverflow","direction","__expose","computed"],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","sources":["../src/components/Dropdown/Dropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, nextTick, onBeforeUnmount, onMounted, ref, useCssModule, watch } from 'vue';\n\n  import { KEY_CODES } from '../../constants';\n  import vClickoutside from '../../directives/clickoutside/clickoutside';\n  import calculateElementOverflow from '../../utils/calculateElementOverflow';\n  import { getMountPoint } from '../../utils/helpers';\n  import Icon from '../Icon/Icon.vue';\n\n  export type DropdownOffset = {\n    x?: number;\n    y?: number;\n  };\n\n  export interface DropdownProps {\n    /**\n     * Used to position the dropdown relative to target\n     * Options: left, right\n     */\n    align?: 'left' | 'right';\n    /**\n     * When passed, text with caret is displayed instead of default kebab menu.\n     */\n    label?: string;\n    /**\n     * If true, dropdown will remain open when clicking on its content. Otherwise, it'll close automatically on click.\n     */\n    closeManually?: boolean;\n    /**\n     * Used to horizontally and vertically offset the dropdown in pixels\n     * Keep in mind, `x` value is relative to `align` value.\n     */\n    offset?: DropdownOffset;\n    /**\n     * If `reattach` is true, the contents will be mounted in the mount point container,\n     * so as to circumvent clipping issues from a parent's overflow property.\n     */\n    reattach?: boolean;\n    /**\n     * Custom class to apply to the default dropdown content element\n     */\n    contentClass?: string | string[];\n    /**\n     * Removes content container's max width\n     */\n    fluidContent?: boolean;\n  }\n\n  type DropdownStyles = {\n    left?: string;\n    right?: string;\n    top?: string;\n  };\n\n  defineOptions({\n    name: 'll-dropdown',\n  });\n\n  const props = withDefaults(defineProps<DropdownProps>(), {\n    align: 'right',\n    label: '',\n    closeManually: false,\n    offset: () => ({}),\n    reattach: true,\n    contentClass: '',\n    fluidContent: false,\n  });\n\n  const emit =\n    defineEmits<{\n      toggle: [isActive: boolean];\n      dismiss: [];\n    }>();\n\n  const contentRef = ref<HTMLElement | null>(null);\n  const dropdownRef = ref<HTMLDivElement | null>(null);\n\n  const DEFAULT_ITEMS_LIST = [] as unknown as NodeListOf<Element>;\n\n  const items = ref<NodeListOf<Element>>(DEFAULT_ITEMS_LIST);\n  const itemIndex = ref(-1);\n  const isActive = ref(false);\n\n  const styles = ref<DropdownStyles>({});\n  const classes = useCssModule();\n\n  watch(isActive, (val) => {\n    if (!val) {\n      itemIndex.value = -1;\n    }\n\n    emit('toggle', val);\n  });\n\n  watch(itemIndex, (next, prev) => {\n    next in items.value && items.value[next].classList.add('tw-bg-ice-200');\n    prev in items.value && items.value[prev].classList.remove('tw-bg-ice-200');\n  });\n\n  onMounted(() => {\n    if (props.reattach) {\n      const target = getMountPoint();\n\n      contentRef.value && target.appendChild(contentRef.value);\n    }\n\n    // if stash-menu exists, use it's items\n    if (contentRef.value?.querySelector('.stash-menu')) {\n      items.value = contentRef.value?.querySelectorAll('.stash-menu-item') ?? DEFAULT_ITEMS_LIST;\n    } else {\n      items.value = contentRef.value?.querySelectorAll('.dropdown__item') ?? DEFAULT_ITEMS_LIST;\n    }\n\n    // avoid calling dismiss with ResizeEvent because it's target is the Window element and it's not a valid Node element to be passed to dismiss\n    window.addEventListener('resize', () => dismiss());\n  });\n\n  onBeforeUnmount(() => {\n    window.removeEventListener('resize', () => dismiss());\n    contentRef.value?.parentNode?.removeChild(contentRef.value);\n  });\n\n  /**\n   * Dismisses the Dropdown.\n   */\n  function dismiss(event?: Event) {\n    if (\n      props.closeManually &&\n      (contentRef.value?.contains(event?.target as HTMLElement) || contentRef.value === event?.target)\n    ) {\n      return;\n    }\n\n    const wasOpen = isActive.value;\n\n    isActive.value = false;\n\n    if (wasOpen) {\n      emit('dismiss');\n    }\n  }\n\n  /**\n   * Opens or closes the Dropdown. If opening, positions and focuses its content.\n   */\n  async function toggle() {\n    if (isActive.value) {\n      isActive.value = false;\n    } else {\n      isActive.value = true;\n      await calculateOffset();\n      contentRef.value?.focus();\n    }\n  }\n\n  /**\n   * Handles all user keyboard input on the Dropdown.\n   * @param {KeyboardEvent} e The native keydown event.\n   */\n  function onKeyDown(e: KeyboardEvent) {\n    if (e.keyCode === KEY_CODES.ESCAPE) {\n      dismiss();\n    } else if (e.keyCode === KEY_CODES.DOWN && itemIndex.value < items.value.length - 1) {\n      isActive.value && itemIndex.value++;\n    } else if (e.keyCode === KEY_CODES.UP && itemIndex.value > -1) {\n      isActive.value && itemIndex.value--;\n    } else if (e.keyCode === KEY_CODES.ENTER && itemIndex.value !== -1) {\n      isActive.value && items[itemIndex.value].click();\n    } else {\n      return;\n    }\n\n    e.preventDefault(); // if keyDown did something / we didn't return\n  }\n\n  /**\n   * Reset any page overflow offset\n   */\n  function resetOffset() {\n    contentRef.value?.style.setProperty('--offset', '0');\n  }\n\n  /**\n   * Calculate the position for the Dropdown content element,\n   * relative to the viewport.\n   * Repositions the dropdown content element (& arrow)\n   * if it overflows the page (including gutter).\n   */\n  async function calculateOffset() {\n    await nextTick();\n\n    const toggleBCR = dropdownRef.value?.getBoundingClientRect() || ({} as DOMRect);\n    const top = toggleBCR.top + toggleBCR.height;\n    const offset = {\n      x: 0,\n      y: 0,\n      ...props.offset,\n    };\n\n    if (props.reattach) {\n      styles.value = {\n        left: props.align === 'left' ? `${Math.round(toggleBCR.left) + offset.x}px` : undefined,\n        right:\n          props.align === 'right'\n            ? `${document.documentElement.clientWidth - Math.round(toggleBCR.right) + offset.x}px`\n            : undefined,\n        top: `${window.scrollY + top + offset.y}px`,\n      };\n      await nextTick(); // wait for style updates to sync in the DOM\n    }\n\n    const overflow = calculateElementOverflow(contentRef?.value);\n\n    if (overflow) {\n      const direction = props.align === 'left' ? '-' : '';\n      contentRef.value?.style.setProperty('--offset', `${direction}${overflow.value}`);\n    }\n  }\n\n  defineExpose({\n    isActive: computed(() => isActive.value),\n    toggle,\n    dismiss,\n  });\n</script>\n\n<template>\n  <div\n    ref=\"dropdownRef\"\n    v-clickoutside=\"dismiss\"\n    class=\"tw-relative tw-inline-block\"\n    data-test=\"ll-dropdown\"\n    @keydown=\"onKeyDown\"\n  >\n    <!-- @slot Toggle component slot, receives `toggle` method to trigger Dropdown display -->\n    <slot name=\"toggle\" :is-active=\"isActive\" :toggle=\"toggle\">\n      <button\n        data-test=\"button|toggle\"\n        :aria-expanded=\"isActive\"\n        :class=\"[label ? 'button--tertiary tw-min-w-auto tw-outline-none' : 'button--icon button tw-rounded']\"\n        @click=\"toggle\"\n      >\n        <span v-if=\"label\" class=\"tw-flex tw-items-center tw-font-medium tw-text-blue-500 hover:tw-text-blue-700\">\n          {{ label }}\n          <Icon name=\"caret-down\" />\n        </span>\n        <Icon v-else name=\"ellipsis\" />\n      </button>\n    </slot>\n\n    <transition name=\"fade\" @after-leave=\"resetOffset\">\n      <div\n        v-show=\"isActive\"\n        ref=\"contentRef\"\n        data-test=\"ll-dropdown-content\"\n        :class=\"[\n          classes.content,\n          contentClass,\n          {\n            'tw-left-0 after:tw-left-6': props.align === 'left',\n            'tw-right-0': props.align === 'right',\n            'tw-max-w-[360px]': !props.fluidContent,\n          },\n        ]\"\n        :style=\"styles\"\n      >\n        <!-- @slot Dropdown content slot. Receives `dismiss` method, to trigger manual close. You must call dismiss with parentheses. Receives `is-active` prop.  -->\n        <slot :dismiss=\"dismiss\" :is-active=\"isActive\"></slot>\n      </div>\n    </transition>\n  </div>\n</template>\n\n<style module>\n  .content {\n    --offset: 0;\n\n    @apply tw-shadow\n      tw-bg-white\n      tw-border\n      tw-border-solid\n      tw-border-blue-500\n      tw-rounded\n      tw-absolute\n      tw-z-control\n      tw-min-w-[200px];\n\n    transform: translateX(calc(var(--offset) * 1px));\n  }\n\n  /**\n  * TODO: these global styles should be componentized in https://leaflink.atlassian.net/browse/STASH-566\n  */\n  :global(.dropdown__list) {\n    @apply tw-bg-white tw-list-none tw-m-1.5 tw-p-0;\n  }\n\n  :global(.dropdown__item) {\n    @apply tw-block tw-mx-0 tw-mt-0 tw-mb-1.5 tw-w-full first:tw-mt-0 last:tw-mb-0;\n  }\n\n  :global(.dropdown__item) button {\n    @apply tw-border-none tw-text-left tw-p-1.5;\n  }\n\n  :global(.dropdown__item) :where(a, button) {\n    @apply tw-rounded\n    tw-text-ice-700\n      tw-block\n      tw-py-[10px]\n      tw-px-1.5\n      tw-w-full\n      disabled:tw-text-ice-500\n      disabled:tw-cursor-default\n      hover:tw-bg-ice-200\n      hover:tw-text-ice-700\n      hover:tw-no-underline\n      tw-transition-all\n      tw-duration-fast\n      tw-ease-swing;\n  }\n</style>\n"],"names":["contentRef","ref","dropdownRef","DEFAULT_ITEMS_LIST","items","itemIndex","isActive","styles","classes","useCssModule","watch","val","emit","next","prev","onMounted","props","target","getMountPoint","_a","_b","_c","dismiss","onBeforeUnmount","event","wasOpen","toggle","calculateOffset","onKeyDown","KEY_CODES","resetOffset","nextTick","toggleBCR","top","offset","overflow","calculateElementOverflow","direction","__expose","computed"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA0EQA,IAAaC,EAAwB,IAAI,GACzCC,IAAcD,EAA2B,IAAI,GAE7CE,IAAqB,CAAA,GAErBC,IAAQH,EAAyBE,CAAkB,GACnDE,IAAYJ,EAAI,EAAE,GAClBK,IAAWL,EAAI,EAAK,GAEpBM,IAASN,EAAoB,CAAA,CAAE,GAC/BO,IAAUC;AAEV,IAAAC,EAAAJ,GAAU,CAACK,MAAQ;AACvB,MAAKA,MACHN,EAAU,QAAQ,KAGpBO,EAAK,UAAUD,CAAG;AAAA,IAAA,CACnB,GAEKD,EAAAL,GAAW,CAACQ,GAAMC,MAAS;AACvB,MAAAD,KAAAT,EAAM,SAASA,EAAM,MAAMS,CAAI,EAAE,UAAU,IAAI,eAAe,GAC9DC,KAAAV,EAAM,SAASA,EAAM,MAAMU,CAAI,EAAE,UAAU,OAAO,eAAe;AAAA,IAAA,CAC1E,GAEDC,EAAU,MAAM;;AACd,UAAIC,EAAM,UAAU;AAClB,cAAMC,IAASC;AAEf,QAAAlB,EAAW,SAASiB,EAAO,YAAYjB,EAAW,KAAK;AAAA,MACzD;AAGA,OAAImB,IAAAnB,EAAW,UAAX,QAAAmB,EAAkB,cAAc,iBAClCf,EAAM,UAAQgB,IAAApB,EAAW,UAAX,gBAAAoB,EAAkB,iBAAiB,wBAAuBjB,IAExEC,EAAM,UAAQiB,IAAArB,EAAW,UAAX,gBAAAqB,EAAkB,iBAAiB,uBAAsBlB,GAIzE,OAAO,iBAAiB,UAAU,MAAMmB,EAAS,CAAA;AAAA,IAAA,CAClD,GAEDC,EAAgB,MAAM;;AACpB,aAAO,oBAAoB,UAAU,MAAMD,EAAS,CAAA,IACpDF,KAAAD,IAAAnB,EAAW,UAAX,gBAAAmB,EAAkB,eAAlB,QAAAC,EAA8B,YAAYpB,EAAW;AAAA,IAAK,CAC3D;AAKD,aAASsB,EAAQE,GAAe;;AAE5B,UAAAR,EAAM,mBACLG,IAAAnB,EAAW,UAAX,QAAAmB,EAAkB,SAASK,KAAA,gBAAAA,EAAO,WAA0BxB,EAAW,WAAUwB,KAAA,gBAAAA,EAAO;AAEzF;AAGF,YAAMC,IAAUnB,EAAS;AAEzB,MAAAA,EAAS,QAAQ,IAEbmB,KACFb,EAAK,SAAS;AAAA,IAElB;AAKA,mBAAec,IAAS;;AACtB,MAAIpB,EAAS,QACXA,EAAS,QAAQ,MAEjBA,EAAS,QAAQ,IACjB,MAAMqB,EAAgB,IACtBR,IAAAnB,EAAW,UAAX,QAAAmB,EAAkB;AAAA,IAEtB;AAMA,aAASS,EAAU,GAAkB;AAC/B,UAAA,EAAE,YAAYC,EAAU;AAClB,QAAAP;eACC,EAAE,YAAYO,EAAU,QAAQxB,EAAU,QAAQD,EAAM,MAAM,SAAS;AAChF,QAAAE,EAAS,SAASD,EAAU;AAAA,eACnB,EAAE,YAAYwB,EAAU,MAAMxB,EAAU,QAAQ;AACzD,QAAAC,EAAS,SAASD,EAAU;AAAA,eACnB,EAAE,YAAYwB,EAAU,SAASxB,EAAU,UAAU;AAC9D,QAAAC,EAAS,SAASF,EAAMC,EAAU,KAAK,EAAE;;AAEzC;AAGF,QAAE,eAAe;AAAA,IACnB;AAKA,aAASyB,IAAc;;AACrB,OAAAX,IAAAnB,EAAW,UAAX,QAAAmB,EAAkB,MAAM,YAAY,YAAY;AAAA,IAClD;AAQA,mBAAeQ,IAAkB;;AAC/B,YAAMI,EAAS;AAEf,YAAMC,MAAYb,IAAAjB,EAAY,UAAZ,gBAAAiB,EAAmB,4BAA4B,CAAA,GAC3Dc,IAAMD,EAAU,MAAMA,EAAU,QAChCE,IAAS;AAAA,QACb,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAGlB,EAAM;AAAA,MAAA;AAGX,MAAIA,EAAM,aACRT,EAAO,QAAQ;AAAA,QACb,MAAMS,EAAM,UAAU,SAAS,GAAG,KAAK,MAAMgB,EAAU,IAAI,IAAIE,EAAO,CAAC,OAAO;AAAA,QAC9E,OACElB,EAAM,UAAU,UACZ,GAAG,SAAS,gBAAgB,cAAc,KAAK,MAAMgB,EAAU,KAAK,IAAIE,EAAO,CAAC,OAChF;AAAA,QACN,KAAK,GAAG,OAAO,UAAUD,IAAMC,EAAO,CAAC;AAAA,MAAA,GAEzC,MAAMH,EAAS;AAGX,YAAAI,IAAWC,EAAyBpC,KAAA,gBAAAA,EAAY,KAAK;AAE3D,UAAImC,GAAU;AACZ,cAAME,IAAYrB,EAAM,UAAU,SAAS,MAAM;AACtC,SAAAI,IAAApB,EAAA,UAAA,QAAAoB,EAAO,MAAM,YAAY,YAAY,GAAGiB,CAAS,GAAGF,EAAS,KAAK;AAAA,MAC/E;AAAA,IACF;AAEa,WAAAG,EAAA;AAAA,MACX,UAAUC,EAAS,MAAMjC,EAAS,KAAK;AAAA,MACvC,QAAAoB;AAAA,MACA,SAAAJ;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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-b6a57ae9.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-b6a57ae9.js}

@@ -30,9 +30,9 @@ const _ = {
       });
     };
     return (e, a) => (s(), v(x(o.is), {
-      class: g(["stash-expand ll-expand", {
-        "is-expanded": e.isExpanded,
-        "is-collapsed": !e.isExpanded
+      class: g(["stash-expand", {
+        "stash-expand--expanded": e.isExpanded,
+        "stash-expand--collapsed": !e.isExpanded
       }]),
       "data-test": "stash-expand"
     }, {
@@ -72,4 +72,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-b6a57ae9.js.map

package/dist/{Expand.vue_vue_type_script_setup_true_lang-5fe03d51.js.map → Expand.vue_vue_type_script_setup_true_lang-b6a57ae9.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Expand.vue_vue_type_script_setup_true_lang-5fe03d51.js","sources":["../src/components/Expand/Expand.vue"],"sourcesContent":["<script lang=\"ts\">\n  export default {\n    name: 'll-expand',\n  };\n</script>\n\n<script setup lang=\"ts\">\n  import { onMounted, ref } from 'vue';\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     * Dictates whether the content is expanded or collapsed\n     */\n    isExpanded?: boolean;\n    /**\n     * Whether to only render content on expand\n     */\n    isLazy?: boolean;\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 ll-expand\"\n    data-test=\"stash-expand\"\n    :class=\"{\n      'is-expanded': isExpanded,\n      'is-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":";AACE,UAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;iBAwCMA,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Expand.vue_vue_type_script_setup_true_lang-b6a57ae9.js","sources":["../src/components/Expand/Expand.vue"],"sourcesContent":["<script lang=\"ts\">\n  export default {\n    name: 'll-expand',\n  };\n</script>\n\n<script setup lang=\"ts\">\n  import { onMounted, ref } from 'vue';\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     * Dictates whether the content is expanded or collapsed\n     */\n    isExpanded?: boolean;\n    /**\n     * Whether to only render content on expand\n     */\n    isLazy?: boolean;\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":";AACE,UAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;iBAwCMA,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/FileUpload.js

@@ -1,8 +1,8 @@
-import { I } from "./index-79ce320f.js";
+import { I as D } from "./index-79ce320f.js";
 import { t as u } from "./locale.js";
-import x from "./Button.js";
+import I from "./Button.js";
 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 T, createTextVNode as y, 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 { 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";
@@ -59,8 +59,8 @@ const A = "_button_oi2f6_201", L = {
   name: "ll-file-upload",
   components: {
     "ll-icon": F,
-    "ll-button": x,
-    InlineSvg: I
+    "ll-button": I,
+    InlineSvg: D
   },
   inject: ["stashOptions"],
   inheritAttrs: !1,
@@ -202,11 +202,11 @@ const A = "_button_oi2f6_201", L = {
         if (e.type)
           return t(e.type);
         if (window.FileReader) {
-          const a = new FileReader();
-          a.onload = () => {
-            const n = a.result.match(/[^:]\w+\/[\w-+\d.]+(?=;|,)/) ? a.result.match(/[^:]\w+\/[\w-+\d.]+(?=;|,)/)[0] : "";
-            t(n);
-          }, a.readAsDataURL(e);
+          const n = new FileReader();
+          n.onload = () => {
+            const a = n.result.match(/[^:]\w+\/[\w-+\d.]+(?=;|,)/) ? n.result.match(/[^:]\w+\/[\w-+\d.]+(?=;|,)/)[0] : "";
+            t(a);
+          }, n.readAsDataURL(e);
         } else
           i(new Error("Failed to read file."));
       });
@@ -215,64 +215,64 @@ const A = "_button_oi2f6_201", L = {
       return e.concat(t);
     }
   }
-}, z = ["data-test"], R = { key: 0 }, j = { class: "tw-text-ice-900" }, X = {
+}, j = ["data-test"], z = { key: 0 }, R = { class: "tw-text-ice-900" }, X = {
   key: 0,
-  class: "text-small tw-mt-6 tw-text-center tw-text-ice-700"
+  class: "tw-mt-6 tw-text-center tw-text-xs tw-text-ice-700"
 }, Y = ["accept", "multiple"];
-function B(e, t, i, a, n, l) {
-  const m = g("ll-button"), b = g("InlineSvg"), D = g("ll-icon");
+function B(e, t, i, n, a, l) {
+  const m = g("ll-button"), b = g("InlineSvg"), x = g("ll-icon");
   return r(), o("div", {
     class: d(e.$attrs.class),
     "data-test": e.$attrs["data-test"]
   }, [
-    i.buttonOnly ? (r(), o("div", R, [
+    i.buttonOnly ? (r(), o("div", z, [
       h(m, {
         secondary: "",
         type: "button",
         disabled: i.disabled || null,
         onClick: c(l.openFileDialog, ["stop", "prevent"])
       }, {
-        default: T(() => [
-          y(p(n.fileUploadUploadFileText), 1)
+        default: y(() => [
+          T(p(a.fileUploadUploadFileText), 1)
         ]),
         _: 1
       }, 8, ["disabled", "onClick"])
     ])) : (r(), o("div", {
       key: 1,
-      class: d(["tw-rounded tw-p-6", [e.$style["file-dropbox"], n.isDraggingOver && e.$style["is-dragging"], i.disabled && e.$style["is-disabled"]]]),
+      class: d(["tw-rounded tw-p-6", [e.$style["file-dropbox"], a.isDraggingOver && e.$style["is-dragging"], i.disabled && e.$style["is-disabled"]]]),
       onDragover: t[0] || (t[0] = c((...s) => l.handleDragEnter && l.handleDragEnter(...s), ["prevent"])),
       onDrop: t[1] || (t[1] = c((...s) => l.handleDropFile && l.handleDropFile(...s), ["prevent"])),
       onDragleave: t[2] || (t[2] = c((...s) => l.handleDragLeave && l.handleDragLeave(...s), ["prevent"]))
     }, [
       f("div", {
-        class: d(["tw-flex-column align-center align-middle tw-flex tw-text-center", [{ "md:flex-row tw-items-center": i.size === a.Sizes.Dense }]])
+        class: d(["tw-flex tw-flex-col tw-items-center tw-justify-center tw-text-center", [{ "md:flex-row tw-items-center": i.size === n.Sizes.Dense }]])
       }, [
         i.files.length ? (r(!0), o(v, { key: 1 }, C(i.files, (s) => (r(), o("div", {
           key: s.name
         }, [
-          h(D, { name: "file" }),
+          h(x, { name: "file" }),
           f("span", null, p(s.name), 1),
           h(m, {
             class: d([e.$style["remove-button"], e.$style.button]),
             onClick: c((H) => l.handleFileDelete(s), ["stop", "prevent"])
           }, {
-            default: T(() => [
-              y(p(n.removeText), 1)
+            default: y(() => [
+              T(p(a.removeText), 1)
             ]),
             _: 2
           }, 1032, ["class", "onClick"])
         ]))), 128)) : (r(), o(v, { key: 0 }, [
-          i.size !== a.Sizes.Dense ? (r(), O(b, {
+          i.size !== n.Sizes.Dense ? (r(), O(b, {
             key: 0,
             src: l.illustrationPath,
             name: "file",
             width: "84",
             height: "96"
           }, null, 8, ["src"])) : S("", !0),
-          f("span", j, p(n.fileUploadDragDropFileHereText), 1),
+          f("span", R, p(a.fileUploadDragDropFileHereText), 1),
           f("span", {
-            class: d(i.size === a.Sizes.Dense ? "md:ml-1 md:mr-2 md:my-0 my-1 tw-text-ice-900" : "tw-mt-1.5 my-1")
-          }, p(n.fileUploadOrText), 3),
+            class: d(i.size === n.Sizes.Dense ? "md:ml-1 md:mr-2 md:my-0 my-1 tw-text-ice-900" : "tw-mt-1.5 my-1")
+          }, p(a.fileUploadOrText), 3),
           h(m, {
             class: d(["tw-mt-1.5", e.$style["file-select-button"]]),
             secondary: "",
@@ -280,9 +280,9 @@ function B(e, t, i, a, n, l) {
             disabled: i.disabled,
             onClick: c(l.openFileDialog, ["stop", "prevent"])
           }, {
-            default: T(() => [
+            default: y(() => [
               w(e.$slots, "submitText", {}, () => [
-                y(p(n.fileUploadUploadFileText), 1)
+                T(p(a.fileUploadUploadFileText), 1)
               ])
             ]),
             _: 3
@@ -302,7 +302,7 @@ function B(e, t, i, a, n, l) {
     }), null, 16, Y), [
       [N, !1]
     ])
-  ], 10, z);
+  ], 10, j);
 }
 const V = {
   $style: L

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-column align-center align-middle tw-flex 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=\"text-small tw-mt-6 tw-text-center 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 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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"}