@leaflink/stash 42.5.0 → 42.5.2

package/dist/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../src/components/Modal/Modal.types.ts","../src/components/Modal/Modal.vue"],"sourcesContent":["export enum ModalSize {\n  Narrow = 'narrow',\n  Medium = 'medium',\n  Wide = 'wide',\n}\n\nexport type ModalSizes = `${ModalSize}`;\n\nexport enum ModalPosition {\n  Center = 'center',\n  Left = 'left',\n  Right = 'right',\n}\n\nexport type ModalPositions = `${ModalPosition}`;\n","<script lang=\"ts\">\n  import { ModalPositions, ModalSizes } from './Modal.types';\n\n  export * from './Modal.types';\n\n  export interface ModalProps {\n    /**\n     * Hides the \"close\" button\n     */\n    hideClose?: boolean;\n\n    /**\n     * Opens the modal when truthy; hides the modal when falsy.\n     * @deprecated Use `isOpen` instead\n     */\n    open?: boolean;\n\n    /**\n     * Opens the modal when truthy; hides the modal when falsy.\n     */\n    isOpen?: boolean;\n\n    /**\n     * Use v-model:is-open or :is-open instead of :model-value and v-model.\n     * @deprecated\n     */\n    modelValue?: boolean;\n\n    /**\n     * Sets a preset max-width on the modal.\n     * Options: default (648px), narrow (360px), wide (960px)\n     */\n    size?: ModalSizes;\n\n    /**\n     * Should the modal be scrollable within the content area. This prop is treated as `true` when the `position` prop is set to \"left\" or \"right\".\n     */\n    scrollable?: boolean;\n\n    /**\n     * Gives the modal body have a light gray background\n     */\n    contrast?: boolean;\n\n    /**\n     * Text to display in the modal header\n     */\n    title?: string;\n\n    /**\n     * Disables the default padding in the modal body.\n     */\n    disableBodyPadding?: boolean;\n\n    /**\n     * The position on the screen to display the modal.\n     */\n    position?: ModalPositions;\n\n    /**\n     * Hide the header. Typically used with the featuredContent slot to display a graphic and create a \"promo\" modal.\n     */\n    hideHeader?: boolean;\n\n    /**\n     * Add classes to the close button. This can be used with the hideHeader prop and featuredContent slot to\n     * accommodate images with different color backgrounds.\n     */\n    closeButtonColorClass?: string;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, onBeforeUnmount, ref, useSlots, watch } from 'vue';\n\n  import { FOCUS_ELEMENTS_SELECTOR } from '../../constants';\n  import { t } from '../../locale';\n  import Backdrop from '../Backdrop/Backdrop.vue';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({ name: 'll-modal' });\n\n  const props = withDefaults(defineProps<ModalProps>(), {\n    hideClose: false,\n    open: false,\n    isOpen: false,\n    modelValue: false,\n    size: 'medium',\n    scrollable: false,\n    contrast: false,\n    title: '',\n    position: 'center',\n    hideHeader: false,\n    closeButtonColorClass: 'tw-text-white/50',\n  });\n\n  const emit =\n    defineEmits<{\n      /**\n       * @deprecated Use the `update:is-open` event instead\n       */\n      (e: 'update:open', isOpen?: boolean): void;\n      (e: 'update:is-open', isOpen?: boolean): void;\n      (e: 'dismiss'): void;\n    }>();\n\n  const slots = useSlots();\n\n  const rootRef = ref<HTMLElement>();\n  const lastExternalFocusedElement = ref<HTMLElement>();\n  const focusElements = ref<HTMLElement[]>([]);\n  const firstFocusElement = ref<HTMLElement>();\n  const lastFocusElement = ref<HTMLElement>();\n  const initialPageScrollingElementStyle = ref({ height: '', overflow: '' });\n  const headerId = uniqueId('modal-header-');\n  const hasFooterContent = computed(() => !!slots.actions || !!slots.footer);\n  const isModalOpen = computed(() => props.open || props.isOpen);\n  const isDrawer = computed(() => props.position === 'left' || props.position === 'right');\n\n  function getPageScrollingElement() {\n    return (document.scrollingElement || document.body) as HTMLElement;\n  }\n\n  watch(\n    isModalOpen,\n    () => {\n      if (isModalOpen.value) {\n        Object.assign(initialPageScrollingElementStyle.value, {\n          height: getPageScrollingElement().style.height,\n          overflow: getPageScrollingElement().style.overflow,\n        });\n      }\n\n      Object.assign(getPageScrollingElement().style, {\n        overflow: isModalOpen.value ? 'hidden' : initialPageScrollingElementStyle.value.overflow, // Prevents page from scrolling when modal is open\n        height: isModalOpen.value ? '100%' : initialPageScrollingElementStyle.value.height, // Ensures the backdrop covers the entire page when modal is open; see https://github.com/LeafLink/stash/pull/713#issuecomment-1184602535\n      });\n    },\n    { immediate: true },\n  );\n\n  onBeforeUnmount(() => {\n    // In cases where the watchEffect for isModalOpen isn't triggered while closing/nagivating away from modal, this ensures scrolling returns to normal\n    Object.assign(getPageScrollingElement().style, {\n      overflow: initialPageScrollingElementStyle.value.overflow,\n      height: initialPageScrollingElementStyle.value.height,\n    });\n\n    // Clear focus trap tab listener\n    document.removeEventListener('keydown', handleTab);\n    lastExternalFocusedElement.value?.focus();\n  });\n\n  function dismiss() {\n    emit('update:open', false);\n    emit('update:is-open', false);\n    emit('dismiss');\n  }\n\n  // This watcher ensures the Tab key cycles through focusable elements within the modal.\n  watch(rootRef, () => {\n    if (!rootRef.value) {\n      return;\n    }\n\n    lastExternalFocusedElement.value = document.activeElement as HTMLElement;\n    rootRef.value.focus();\n\n    focusElements.value = Array.from(rootRef.value.querySelectorAll<HTMLElement>(FOCUS_ELEMENTS_SELECTOR));\n    firstFocusElement.value = focusElements.value[0];\n    lastFocusElement.value = focusElements.value[focusElements.value.length - 1];\n    document.addEventListener('keydown', handleTab);\n  });\n\n  function handleTab(e) {\n    if (e.key === 'Tab') {\n      if (e.shiftKey && document.activeElement === firstFocusElement.value) {\n        lastFocusElement.value?.focus();\n        e.preventDefault();\n      } else if (document.activeElement === lastFocusElement.value) {\n        firstFocusElement.value?.focus();\n        e.preventDefault();\n      }\n    }\n  }\n</script>\n\n<template>\n  <div\n    v-if=\"isModalOpen\"\n    ref=\"rootRef\"\n    class=\"stash-modal tw-fixed tw-inset-0 tw-overflow-y-auto\"\n    :class=\"{\n      'tw-invisible tw-z-behind': !isModalOpen,\n      'tw-visible tw-z-modal': isModalOpen,\n      'lg:tw-flex lg:tw-flex-col lg:tw-justify-center lg:tw-items-center': props.position === 'center',\n    }\"\n    data-test=\"ll-modal\"\n    tabindex=\"0\"\n    @keydown.esc=\"dismiss\"\n  >\n    <Backdrop class=\"stash-modal__backdrop\" @click.stop=\"dismiss\" />\n    <div\n      aria-modal=\"true\"\n      role=\"dialog\"\n      :aria-labelledby=\"headerId\"\n      class=\"stash-modal__dialog tw-flex tw-flex-col tw-h-screen tw-w-full lg:tw-shadow tw-relative\"\n      :class=\"[\n        `stash-modal__dialog--size-${props.size}`,\n        `stash-modal__dialog--position-${props.position}`,\n        {\n          'stash-modal__dialog--is-open': isModalOpen,\n          'stash-modal__dialog--is-drawer': isDrawer,\n          'stash-modal__dialog--is-contrast': props.contrast,\n          'stash-modal__dialog--is-scrollable': props.scrollable,\n          'lg:tw-w-[360px]': props.size === 'narrow',\n          'lg:tw-w-[648px]': props.size === 'medium',\n          'lg:tw-w-[960px]': props.size === 'wide',\n          'lg:tw-h-auto lg:tw-my-0 lg:tw-max-h-[90vh]': props.position === 'center',\n          'lg:tw-h-screen lg:tw-absolute': isDrawer,\n          'lg:tw-left-0': props.position === 'left',\n          'lg:tw-right-0': props.position === 'right',\n        },\n      ]\"\n      @click.stop\n    >\n      <header\n        v-if=\"!props.hideHeader\"\n        data-test=\"stash-modal__header\"\n        class=\"stash-modal__header tw-bg-purple tw-h-12 tw-grid tw-place-items-center\"\n        :class=\"{ 'lg:tw-rounded-t': !isDrawer }\"\n      >\n        <div class=\"tw-flex tw-place-items-center\">\n          <!-- @slot Adds an action to the left side of the header bar. An example usage is a modal with multiple pages and a back button can be inserted here -->\n          <slot name=\"headerAction\"></slot>\n        </div>\n\n        <h3 v-if=\"props.title\" :id=\"headerId\" class=\"tw-text-white tw-flex-1 tw-leading-6 tw-m-0\">\n          {{ props.title }}\n        </h3>\n\n        <Button\n          v-if=\"!props.hideClose\"\n          icon\n          data-test=\"ll-modal-close\"\n          :title=\"t('ll.closeModal')\"\n          type=\"button\"\n          @click=\"dismiss\"\n        >\n          <Icon class=\"tw-text-white\" name=\"close\" />\n        </Button>\n      </header>\n\n      <Button\n        v-if=\"!props.hideClose && props.hideHeader\"\n        class=\"tw-absolute tw-right-0 tw-top-0 tw-z-10\"\n        icon\n        data-test=\"ll-modal-close\"\n        type=\"button\"\n        :title=\"t('ll.closeModal')\"\n        @click=\"dismiss\"\n      >\n        <Icon class=\"tw-drop-shadow-md\" name=\"close\" :class=\"[props.closeButtonColorClass]\" />\n      </Button>\n\n      <div\n        v-if=\"!!slots['featured-content']\"\n        class=\"tw-relative stash-modal__featured-content\"\n        :class=\"{\n          'tw-rounded-t': props.hideHeader,\n        }\"\n      >\n        <slot name=\"featured-content\"></slot>\n      </div>\n\n      <div\n        class=\"stash-modal__body tw-flex-1 tw-overflow-y-auto\"\n        :class=\"[\n          {\n            'tw-p-3 lg:tw-p-6': !props.disableBodyPadding,\n            'lg:tw-overflow-y-visible': !props.scrollable && !isDrawer,\n            'lg:tw-rounded-b': !hasFooterContent && !isDrawer,\n            'tw-bg-white': !props.contrast,\n            'tw-bg-ice-200': props.contrast,\n          },\n        ]\"\n        data-test=\"stash-modal__body\"\n      >\n        <slot></slot>\n      </div>\n\n      <footer\n        v-if=\"hasFooterContent\"\n        class=\"stash-modal__footer tw-bg-ice-100 tw-border-ice-500 tw-p-3 lg:tw-p-6\"\n        :class=\"{ 'lg:tw-rounded-b': !isDrawer }\"\n      >\n        <!-- @slot Overrides the whole footer section. Used for rendering custom footers with more than 2 actions. If defined, \"actions\" slot will get ignored. -->\n        <slot name=\"footer\">\n          <div class=\"stash-modal__footer__actions tw-flex tw-flex-col tw-justify-end lg:tw-flex-row\">\n            <!-- @slot Modal footer actions, supports rendering up to 2 `<Button>` children -->\n            <slot name=\"actions\"></slot>\n          </div>\n        </slot>\n      </footer>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n  .stash-modal__header {\n    grid-template-columns: 48px 1fr 48px;\n  }\n\n  .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(1) {\n    order: 2;\n  }\n\n  .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(2) {\n    margin-bottom: var(--ll-space-2);\n    order: 1;\n  }\n\n  @media screen and (width >= 961px) {\n    .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(1) {\n      order: 1;\n    }\n\n    .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(2) {\n      margin-bottom: 0;\n      order: 2;\n    }\n\n    .stash-modal__footer__actions > :deep(.stash-button + .stash-button) {\n      margin-left: var(--grid-gutter);\n    }\n  }\n\n  .stash-modal__featured-content > :deep(*) {\n    border-radius: inherit;\n  }\n</style>\n"],"names":["ModalSize","ModalPosition","slots","useSlots","rootRef","ref","lastExternalFocusedElement","focusElements","firstFocusElement","lastFocusElement","initialPageScrollingElementStyle","headerId","uniqueId","hasFooterContent","computed","isModalOpen","props","isDrawer","getPageScrollingElement","watch","onBeforeUnmount","handleTab","_a","dismiss","emit","FOCUS_ELEMENTS_SELECTOR","e","_b"],"mappings":";;;;;;;;;;;;;;;AAAY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,SAAS,UACTA,EAAA,OAAO,QAHGA,IAAAA,KAAA,CAAA,CAAA,GAQAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,OAAO,QACPA,EAAA,QAAQ,SAHEA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;iBCoGJC,IAAQC,KAERC,IAAUC,KACVC,IAA6BD,KAC7BE,IAAgBF,EAAmB,CAAA,CAAE,GACrCG,IAAoBH,KACpBI,IAAmBJ,KACnBK,IAAmCL,EAAI,EAAE,QAAQ,IAAI,UAAU,IAAI,GACnEM,IAAWC,EAAS,eAAe,GACnCC,IAAmBC,EAAS,MAAM,CAAC,CAACZ,EAAM,WAAW,CAAC,CAACA,EAAM,MAAM,GACnEa,IAAcD,EAAS,MAAME,EAAM,QAAQA,EAAM,MAAM,GACvDC,IAAWH,EAAS,MAAME,EAAM,aAAa,UAAUA,EAAM,aAAa,OAAO;AAEvF,aAASE,IAA0B;AACzB,aAAA,SAAS,oBAAoB,SAAS;AAAA,IAChD;AAEA,IAAAC;AAAA,MACEJ;AAAA,MACA,MAAM;AACJ,QAAIA,EAAY,SACP,OAAA,OAAOL,EAAiC,OAAO;AAAA,UACpD,QAAQQ,IAA0B,MAAM;AAAA,UACxC,UAAUA,IAA0B,MAAM;AAAA,QAAA,CAC3C,GAGI,OAAA,OAAOA,EAAwB,EAAE,OAAO;AAAA,UAC7C,UAAUH,EAAY,QAAQ,WAAWL,EAAiC,MAAM;AAAA;AAAA,UAChF,QAAQK,EAAY,QAAQ,SAASL,EAAiC,MAAM;AAAA;AAAA,QAAA,CAC7E;AAAA,MACH;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IAAA,GAGpBU,EAAgB,MAAM;;AAEb,aAAA,OAAOF,EAAwB,EAAE,OAAO;AAAA,QAC7C,UAAUR,EAAiC,MAAM;AAAA,QACjD,QAAQA,EAAiC,MAAM;AAAA,MAAA,CAChD,GAGQ,SAAA,oBAAoB,WAAWW,CAAS,IACjDC,IAAAhB,EAA2B,UAA3B,QAAAgB,EAAkC;AAAA,IAAM,CACzC;AAED,aAASC,IAAU;AACjB,MAAAC,EAAK,eAAe,EAAK,GACzBA,EAAK,kBAAkB,EAAK,GAC5BA,EAAK,SAAS;AAAA,IAChB;AAGA,IAAAL,EAAMf,GAAS,MAAM;AACf,MAACA,EAAQ,UAIbE,EAA2B,QAAQ,SAAS,eAC5CF,EAAQ,MAAM,SAEdG,EAAc,QAAQ,MAAM,KAAKH,EAAQ,MAAM,iBAA8BqB,CAAuB,CAAC,GACnFjB,EAAA,QAAQD,EAAc,MAAM,CAAC,GAC/CE,EAAiB,QAAQF,EAAc,MAAMA,EAAc,MAAM,SAAS,CAAC,GAClE,SAAA,iBAAiB,WAAWc,CAAS;AAAA,IAAA,CAC/C;AAED,aAASA,EAAUK,GAAG;;AAChB,MAAAA,EAAE,QAAQ,UACRA,EAAE,YAAY,SAAS,kBAAkBlB,EAAkB,UAC7Dc,IAAAb,EAAiB,UAAjB,QAAAa,EAAwB,SACxBI,EAAE,eAAe,KACR,SAAS,kBAAkBjB,EAAiB,WACrDkB,IAAAnB,EAAkB,UAAlB,QAAAmB,EAAyB,SACzBD,EAAE,eAAe;AAAA,IAGvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Modal.js","sources":["../src/components/Modal/Modal.types.ts","../src/components/Modal/Modal.vue"],"sourcesContent":["export enum ModalSize {\n  Narrow = 'narrow',\n  Medium = 'medium',\n  Wide = 'wide',\n}\n\nexport type ModalSizes = `${ModalSize}`;\n\nexport enum ModalPosition {\n  Center = 'center',\n  Left = 'left',\n  Right = 'right',\n}\n\nexport type ModalPositions = `${ModalPosition}`;\n","<script lang=\"ts\">\n  import { ModalPositions, ModalSizes } from './Modal.types';\n\n  export * from './Modal.types';\n\n  export interface ModalProps {\n    /**\n     * Hides the \"close\" button\n     */\n    hideClose?: boolean;\n\n    /**\n     * Opens the modal when truthy; hides the modal when falsy.\n     * @deprecated Use `isOpen` instead\n     */\n    open?: boolean;\n\n    /**\n     * Opens the modal when truthy; hides the modal when falsy.\n     */\n    isOpen?: boolean;\n\n    /**\n     * Use v-model:is-open or :is-open instead of :model-value and v-model.\n     * @deprecated\n     */\n    modelValue?: boolean;\n\n    /**\n     * Sets a preset max-width on the modal.\n     * Options: default (648px), narrow (360px), wide (960px)\n     */\n    size?: ModalSizes;\n\n    /**\n     * Should the modal be scrollable within the content area. This prop is treated as `true` when the `position` prop is set to \"left\" or \"right\".\n     */\n    scrollable?: boolean;\n\n    /**\n     * Gives the modal body have a light gray background\n     */\n    contrast?: boolean;\n\n    /**\n     * Text to display in the modal header\n     */\n    title?: string;\n\n    /**\n     * Disables the default padding in the modal body.\n     */\n    disableBodyPadding?: boolean;\n\n    /**\n     * The position on the screen to display the modal.\n     */\n    position?: ModalPositions;\n\n    /**\n     * Hide the header. Typically used with the featuredContent slot to display a graphic and create a \"promo\" modal.\n     */\n    hideHeader?: boolean;\n\n    /**\n     * Add classes to the close button. This can be used with the hideHeader prop and featuredContent slot to\n     * accommodate images with different color backgrounds.\n     */\n    closeButtonColorClass?: string;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, onBeforeUnmount, ref, useSlots, watch } from 'vue';\n\n  import { FOCUS_ELEMENTS_SELECTOR } from '../../constants';\n  import { t } from '../../locale';\n  import Backdrop from '../Backdrop/Backdrop.vue';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({ name: 'll-modal' });\n\n  const props = withDefaults(defineProps<ModalProps>(), {\n    hideClose: false,\n    open: false,\n    isOpen: false,\n    modelValue: false,\n    size: 'medium',\n    scrollable: false,\n    contrast: false,\n    title: '',\n    position: 'center',\n    hideHeader: false,\n    closeButtonColorClass: 'tw-text-white/50',\n  });\n\n  const emit =\n    defineEmits<{\n      /**\n       * @deprecated Use the `update:is-open` event instead\n       */\n      (e: 'update:open', isOpen?: boolean): void;\n      (e: 'update:is-open', isOpen?: boolean): void;\n      (e: 'dismiss'): void;\n    }>();\n\n  const slots = useSlots();\n\n  const rootRef = ref<HTMLElement>();\n  const lastExternalFocusedElement = ref<HTMLElement>();\n  const focusElements = ref<HTMLElement[]>([]);\n  const firstFocusElement = ref<HTMLElement>();\n  const lastFocusElement = ref<HTMLElement>();\n  const initialPageScrollingElementStyle = ref({ height: '', overflow: '' });\n  const headerId = uniqueId('modal-header-');\n  const hasFooterContent = computed(() => !!slots.actions || !!slots.footer);\n  const isModalOpen = computed(() => props.open || props.isOpen);\n  const isDrawer = computed(() => props.position === 'left' || props.position === 'right');\n\n  function getPageScrollingElement() {\n    return (document.scrollingElement || document.body) as HTMLElement;\n  }\n\n  watch(\n    isModalOpen,\n    () => {\n      if (isModalOpen.value) {\n        Object.assign(initialPageScrollingElementStyle.value, {\n          height: getPageScrollingElement().style.height,\n          overflow: getPageScrollingElement().style.overflow,\n        });\n      }\n\n      Object.assign(getPageScrollingElement().style, {\n        overflow: isModalOpen.value ? 'hidden' : initialPageScrollingElementStyle.value.overflow, // Prevents page from scrolling when modal is open\n        height: isModalOpen.value ? '100%' : initialPageScrollingElementStyle.value.height, // Ensures the backdrop covers the entire page when modal is open; see https://github.com/LeafLink/stash/pull/713#issuecomment-1184602535\n      });\n    },\n    { immediate: true },\n  );\n\n  onBeforeUnmount(() => {\n    // In cases where the watchEffect for isModalOpen isn't triggered while closing/nagivating away from modal, this ensures scrolling returns to normal\n    Object.assign(getPageScrollingElement().style, {\n      overflow: initialPageScrollingElementStyle.value.overflow,\n      height: initialPageScrollingElementStyle.value.height,\n    });\n\n    // Clear focus trap tab listener\n    document.removeEventListener('keydown', handleTab);\n    lastExternalFocusedElement.value?.focus();\n  });\n\n  function dismiss() {\n    emit('update:open', false);\n    emit('update:is-open', false);\n    emit('dismiss');\n  }\n\n  // This watcher ensures the Tab key cycles through focusable elements within the modal.\n  watch(rootRef, () => {\n    if (!rootRef.value) {\n      return;\n    }\n\n    lastExternalFocusedElement.value = document.activeElement as HTMLElement;\n    rootRef.value.focus();\n\n    focusElements.value = Array.from(rootRef.value.querySelectorAll<HTMLElement>(FOCUS_ELEMENTS_SELECTOR));\n    firstFocusElement.value = focusElements.value[0];\n    lastFocusElement.value = focusElements.value[focusElements.value.length - 1];\n    document.addEventListener('keydown', handleTab);\n  });\n\n  function handleTab(e) {\n    if (e.key === 'Tab') {\n      if (e.shiftKey && document.activeElement === firstFocusElement.value) {\n        lastFocusElement.value?.focus();\n        e.preventDefault();\n      } else if (document.activeElement === lastFocusElement.value) {\n        firstFocusElement.value?.focus();\n        e.preventDefault();\n      }\n    }\n  }\n</script>\n\n<template>\n  <div\n    v-if=\"isModalOpen\"\n    ref=\"rootRef\"\n    class=\"stash-modal tw-fixed tw-inset-0 tw-overflow-y-auto\"\n    :class=\"{\n      'tw-invisible tw-z-behind': !isModalOpen,\n      'tw-visible tw-z-modal': isModalOpen,\n      'lg:tw-flex lg:tw-flex-col lg:tw-justify-center lg:tw-items-center': props.position === 'center',\n    }\"\n    data-test=\"ll-modal\"\n    tabindex=\"0\"\n    @keydown.esc=\"dismiss\"\n  >\n    <Backdrop class=\"stash-modal__backdrop\" @click.stop=\"dismiss\" />\n    <div\n      aria-modal=\"true\"\n      role=\"dialog\"\n      :aria-labelledby=\"headerId\"\n      class=\"stash-modal__dialog tw-flex tw-flex-col tw-h-screen tw-w-full lg:tw-shadow tw-relative\"\n      :class=\"[\n        `stash-modal__dialog--size-${props.size}`,\n        `stash-modal__dialog--position-${props.position}`,\n        {\n          'stash-modal__dialog--is-open': isModalOpen,\n          'stash-modal__dialog--is-drawer': isDrawer,\n          'stash-modal__dialog--is-contrast': props.contrast,\n          'stash-modal__dialog--is-scrollable': props.scrollable,\n          'lg:tw-w-[360px]': props.size === 'narrow',\n          'lg:tw-w-[648px]': props.size === 'medium',\n          'lg:tw-w-[960px]': props.size === 'wide',\n          'lg:tw-h-auto lg:tw-my-0 lg:tw-max-h-[90vh]': props.position === 'center',\n          'lg:tw-h-screen lg:tw-absolute': isDrawer,\n          'lg:tw-left-0': props.position === 'left',\n          'lg:tw-right-0': props.position === 'right',\n        },\n      ]\"\n      @click.stop\n    >\n      <header\n        v-if=\"!props.hideHeader\"\n        data-test=\"stash-modal__header\"\n        class=\"stash-modal__header tw-bg-purple tw-h-12 tw-grid tw-place-items-center\"\n        :class=\"{ 'lg:tw-rounded-t': !isDrawer }\"\n      >\n        <div class=\"tw-flex tw-place-items-center\">\n          <!-- @slot Adds an action to the left side of the header bar. An example usage is a modal with multiple pages and a back button can be inserted here -->\n          <slot name=\"headerAction\"></slot>\n        </div>\n\n        <h3 v-if=\"props.title\" :id=\"headerId\" class=\"tw-text-white tw-flex-1 tw-leading-6 tw-m-0\">\n          {{ props.title }}\n        </h3>\n\n        <Button\n          v-if=\"!props.hideClose\"\n          icon\n          data-test=\"ll-modal-close\"\n          :title=\"t('ll.closeModal')\"\n          type=\"button\"\n          @click=\"dismiss\"\n        >\n          <Icon class=\"tw-text-white\" name=\"close\" />\n        </Button>\n      </header>\n\n      <Button\n        v-if=\"!props.hideClose && props.hideHeader\"\n        class=\"tw-absolute tw-right-0 tw-top-0 tw-z-10\"\n        icon\n        data-test=\"ll-modal-close\"\n        type=\"button\"\n        :title=\"t('ll.closeModal')\"\n        @click=\"dismiss\"\n      >\n        <Icon class=\"tw-drop-shadow-md\" name=\"close\" :class=\"[props.closeButtonColorClass]\" />\n      </Button>\n\n      <div\n        v-if=\"!!slots['featured-content']\"\n        class=\"tw-relative stash-modal__featured-content\"\n        :class=\"{\n          'tw-rounded-t': props.hideHeader,\n        }\"\n      >\n        <slot name=\"featured-content\"></slot>\n      </div>\n\n      <div\n        class=\"stash-modal__body tw-flex-1 tw-overflow-y-auto\"\n        :class=\"[\n          {\n            'tw-p-3 lg:tw-p-6': !props.disableBodyPadding,\n            'lg:tw-overflow-y-visible': !props.scrollable && !isDrawer,\n            'lg:tw-rounded-b': !hasFooterContent && !isDrawer,\n            'tw-bg-white': !props.contrast,\n            'tw-bg-ice-200': props.contrast,\n          },\n        ]\"\n        data-test=\"stash-modal__body\"\n      >\n        <slot></slot>\n      </div>\n\n      <footer\n        v-if=\"hasFooterContent\"\n        class=\"stash-modal__footer tw-bg-ice-100 tw-border-ice-500 tw-p-3 lg:tw-p-6\"\n        :class=\"{ 'lg:tw-rounded-b': !isDrawer }\"\n      >\n        <!-- @slot Overrides the whole footer section. Used for rendering custom footers with more than 2 actions. If defined, \"actions\" slot will get ignored. -->\n        <slot name=\"footer\">\n          <div class=\"stash-modal__footer__actions tw-flex tw-flex-col tw-justify-end lg:tw-flex-row\">\n            <!-- @slot Modal footer actions, supports rendering up to 2 `<Button>` children -->\n            <slot name=\"actions\"></slot>\n          </div>\n        </slot>\n      </footer>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n  .stash-modal__header {\n    grid-template-columns: 48px 1fr 48px;\n  }\n\n  .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(1) {\n    order: 2;\n  }\n\n  .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(2) {\n    margin-bottom: var(--ll-space-2);\n    order: 1;\n  }\n\n  @media screen and (width >= 961px) {\n    .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(1) {\n      order: 1;\n    }\n\n    .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(2) {\n      margin-bottom: 0;\n      order: 2;\n    }\n\n    .stash-modal__footer__actions > :deep(.stash-button + .stash-button) {\n      margin-left: var(--grid-gutter);\n    }\n  }\n\n  .stash-modal__featured-content > :deep(*) {\n    border-radius: inherit;\n  }\n</style>\n"],"names":["ModalSize","ModalPosition","slots","useSlots","rootRef","ref","lastExternalFocusedElement","focusElements","firstFocusElement","lastFocusElement","initialPageScrollingElementStyle","headerId","uniqueId","hasFooterContent","computed","isModalOpen","props","isDrawer","getPageScrollingElement","watch","onBeforeUnmount","handleTab","_a","dismiss","emit","FOCUS_ELEMENTS_SELECTOR","e","_b"],"mappings":";;;;;;;;;;;;AAAY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,SAAS,UACTA,EAAA,OAAO,QAHGA,IAAAA,KAAA,CAAA,CAAA,GAQAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,OAAO,QACPA,EAAA,QAAQ,SAHEA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;iBCoGJC,IAAQC,KAERC,IAAUC,KACVC,IAA6BD,KAC7BE,IAAgBF,EAAmB,CAAA,CAAE,GACrCG,IAAoBH,KACpBI,IAAmBJ,KACnBK,IAAmCL,EAAI,EAAE,QAAQ,IAAI,UAAU,IAAI,GACnEM,IAAWC,EAAS,eAAe,GACnCC,IAAmBC,EAAS,MAAM,CAAC,CAACZ,EAAM,WAAW,CAAC,CAACA,EAAM,MAAM,GACnEa,IAAcD,EAAS,MAAME,EAAM,QAAQA,EAAM,MAAM,GACvDC,IAAWH,EAAS,MAAME,EAAM,aAAa,UAAUA,EAAM,aAAa,OAAO;AAEvF,aAASE,IAA0B;AACzB,aAAA,SAAS,oBAAoB,SAAS;AAAA,IAChD;AAEA,IAAAC;AAAA,MACEJ;AAAA,MACA,MAAM;AACJ,QAAIA,EAAY,SACP,OAAA,OAAOL,EAAiC,OAAO;AAAA,UACpD,QAAQQ,IAA0B,MAAM;AAAA,UACxC,UAAUA,IAA0B,MAAM;AAAA,QAAA,CAC3C,GAGI,OAAA,OAAOA,EAAwB,EAAE,OAAO;AAAA,UAC7C,UAAUH,EAAY,QAAQ,WAAWL,EAAiC,MAAM;AAAA;AAAA,UAChF,QAAQK,EAAY,QAAQ,SAASL,EAAiC,MAAM;AAAA;AAAA,QAAA,CAC7E;AAAA,MACH;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IAAA,GAGpBU,EAAgB,MAAM;;AAEb,aAAA,OAAOF,EAAwB,EAAE,OAAO;AAAA,QAC7C,UAAUR,EAAiC,MAAM;AAAA,QACjD,QAAQA,EAAiC,MAAM;AAAA,MAAA,CAChD,GAGQ,SAAA,oBAAoB,WAAWW,CAAS,IACjDC,IAAAhB,EAA2B,UAA3B,QAAAgB,EAAkC;AAAA,IAAM,CACzC;AAED,aAASC,IAAU;AACjB,MAAAC,EAAK,eAAe,EAAK,GACzBA,EAAK,kBAAkB,EAAK,GAC5BA,EAAK,SAAS;AAAA,IAChB;AAGA,IAAAL,EAAMf,GAAS,MAAM;AACf,MAACA,EAAQ,UAIbE,EAA2B,QAAQ,SAAS,eAC5CF,EAAQ,MAAM,SAEdG,EAAc,QAAQ,MAAM,KAAKH,EAAQ,MAAM,iBAA8BqB,CAAuB,CAAC,GACnFjB,EAAA,QAAQD,EAAc,MAAM,CAAC,GAC/CE,EAAiB,QAAQF,EAAc,MAAMA,EAAc,MAAM,SAAS,CAAC,GAClE,SAAA,iBAAiB,WAAWc,CAAS;AAAA,IAAA,CAC/C;AAED,aAASA,EAAUK,GAAG;;AAChB,MAAAA,EAAE,QAAQ,UACRA,EAAE,YAAY,SAAS,kBAAkBlB,EAAkB,UAC7Dc,IAAAb,EAAiB,UAAjB,QAAAa,EAAwB,SACxBI,EAAE,eAAe,KACR,SAAS,kBAAkBjB,EAAiB,WACrDkB,IAAAnB,EAAkB,UAAlB,QAAAmB,EAAyB,SACzBD,EAAE,eAAe;AAAA,IAGvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Modals.js

@@ -1,38 +1,28 @@
-import { defineComponent as _, openBlock as r, createBlock as i, TransitionGroup as u, withCtx as p, createElementBlock as d, Fragment as f, renderList as c, unref as v, resolveDynamicComponent as M, mergeProps as L, toHandlers as g, createSlots as k, createElementVNode as y } from "vue";
+import { defineComponent as p, openBlock as s, createBlock as c, TransitionGroup as d, withCtx as a, createElementBlock as m, Fragment as f, renderList as l, unref as v, resolveDynamicComponent as M, mergeProps as L, toHandlers as g, createSlots as k, createElementVNode as y } from "vue";
 import h from "./useModals.js";
 import { _ as B } from "./_plugin-vue_export-helper-dad06003.js";
-import "./merge-b14fad9d.js";
-import "./_Uint8Array-06e4d083.js";
-import "./isArrayLike-09233e52.js";
-import "./isObjectLike-54341556.js";
-import "./_MapCache-65811284.js";
-import "./_baseAssignValue-dd1499b4.js";
-import "./identity-452d03fd.js";
-import "./_initCloneObject-161353b9.js";
-import "./_getPrototype-3e6fccd6.js";
-import "./_overArg-6d920d99.js";
-import "./isPlainObject-55c7f916.js";
-const C = ["innerHTML"], H = /* @__PURE__ */ _({
+import "lodash-es/merge";
+const C = ["innerHTML"], H = /* @__PURE__ */ p({
   __name: "Modals",
   setup(T) {
     const t = h();
-    function m(s, o) {
+    function _(n, o) {
       var e;
-      return (e = s.options) != null && e.disableDefaultListeners ? {} : {
+      return (e = n.options) != null && e.disableDefaultListeners ? {} : {
         dismiss: () => t.close({ index: o }),
         close: () => t.close({ index: o }),
         cancel: () => t.close({ index: o })
       };
     }
-    return (s, o) => (r(), i(u, { name: "modals" }, {
-      default: p(() => [
-        (r(!0), d(f, null, c(v(t).active, (e, n) => (r(), i(M(e.component), L({
-          key: `modal-${n}`
-        }, e.attributes, { "is-open": !0 }, g(m(e, n))), k({ _: 2 }, [
-          c(e.slots, (a, l) => ({
-            name: l,
-            fn: p(() => [
-              y("div", { innerHTML: a }, null, 8, C)
+    return (n, o) => (s(), c(d, { name: "modals" }, {
+      default: a(() => [
+        (s(!0), m(f, null, l(v(t).active, (e, r) => (s(), c(M(e.component), L({
+          key: `modal-${r}`
+        }, e.attributes, { "is-open": !0 }, g(_(e, r))), k({ _: 2 }, [
+          l(e.slots, (i, u) => ({
+            name: u,
+            fn: a(() => [
+              y("div", { innerHTML: i }, null, 8, C)
             ])
           }))
         ]), 1040))), 128))
@@ -41,8 +31,8 @@ const C = ["innerHTML"], H = /* @__PURE__ */ _({
     }));
   }
 });
-const q = /* @__PURE__ */ B(H, [["__scopeId", "data-v-d5d094e6"]]);
+const w = /* @__PURE__ */ B(H, [["__scopeId", "data-v-d5d094e6"]]);
 export {
-  q as default
+  w as default
 };
 //# sourceMappingURL=Modals.js.map

package/dist/Modals.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modals.js","sources":["../src/components/Modals/Modals.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { DeepReadonly } from 'vue';\n\n  import useModals, { type Modal } from '../../composables/useModals/useModals';\n\n  const modals = useModals();\n\n  function getListeners(modal: DeepReadonly<Modal>, index: number) {\n    if (modal.options?.disableDefaultListeners) {\n      return {};\n    }\n\n    return {\n      dismiss: () => modals.close({ index }),\n      close: () => modals.close({ index }),\n      cancel: () => modals.close({ index }),\n    };\n  }\n</script>\n\n<template>\n  <TransitionGroup name=\"modals\">\n    <component\n      :is=\"modal.component\"\n      v-for=\"(modal, index) in modals.active\"\n      :key=\"`modal-${index}`\"\n      v-bind=\"modal.attributes\"\n      :is-open=\"true\"\n      v-on=\"getListeners(modal, index)\"\n    >\n      <template v-for=\"(value, name) in modal.slots\" :key=\"name\" #[name]>\n        <div v-html=\"value\" />\n      </template>\n    </component>\n  </TransitionGroup>\n</template>\n\n<style scoped>\n  .modals-enter-active,\n  .modals-leave-active {\n    --swing-timing-function: cubic-bezier(0.25, 0.8, 0.5, 1); /* \"swing\" from the $transition sass map */\n    transition: opacity 165ms var(--swing-timing-function);\n  }\n\n  .modals-enter-from,\n  .modals-leave-to {\n    opacity: 0;\n  }\n\n  .modals-enter-active :deep(.stash-modal__dialog--position-center),\n  .modals-leave-active :deep(.stash-modal__dialog--position-center) {\n    transition: transform 165ms var(--swing-timing-function);\n  }\n\n  .modals-enter-from :deep(.stash-modal__dialog--position-center),\n  .modals-leave-to :deep(.stash-modal__dialog--position-center) {\n    transform: translateY(20px);\n  }\n\n  .modals-enter-active :deep(.stash-modal__dialog--is-drawer),\n  .modals-leave-active :deep(.stash-modal__dialog--is-drawer) {\n    transition: transform 165ms var(--swing-timing-function);\n  }\n\n  .modals-enter-from :deep(.stash-modal__dialog--position-left),\n  .modals-leave-to :deep(.stash-modal__dialog--position-left) {\n    transform: translateX(-50px);\n  }\n\n  .modals-enter-from :deep(.stash-modal__dialog--position-right),\n  .modals-leave-to :deep(.stash-modal__dialog--position-right) {\n    transform: translateX(50px);\n  }\n</style>\n"],"names":["modals","useModals","getListeners","modal","index","_a"],"mappings":";;;;;;;;;;;;;;;;;AAKE,UAAMA,IAASC;AAEN,aAAAC,EAAaC,GAA4BC,GAAe;;AAC3D,cAAAC,IAAAF,EAAM,YAAN,QAAAE,EAAe,0BACV,KAGF;AAAA,QACL,SAAS,MAAML,EAAO,MAAM,EAAE,OAAAI,GAAO;AAAA,QACrC,OAAO,MAAMJ,EAAO,MAAM,EAAE,OAAAI,GAAO;AAAA,QACnC,QAAQ,MAAMJ,EAAO,MAAM,EAAE,OAAAI,GAAO;AAAA,MAAA;AAAA,IAExC;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Modals.js","sources":["../src/components/Modals/Modals.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { DeepReadonly } from 'vue';\n\n  import useModals, { type Modal } from '../../composables/useModals/useModals';\n\n  const modals = useModals();\n\n  function getListeners(modal: DeepReadonly<Modal>, index: number) {\n    if (modal.options?.disableDefaultListeners) {\n      return {};\n    }\n\n    return {\n      dismiss: () => modals.close({ index }),\n      close: () => modals.close({ index }),\n      cancel: () => modals.close({ index }),\n    };\n  }\n</script>\n\n<template>\n  <TransitionGroup name=\"modals\">\n    <component\n      :is=\"modal.component\"\n      v-for=\"(modal, index) in modals.active\"\n      :key=\"`modal-${index}`\"\n      v-bind=\"modal.attributes\"\n      :is-open=\"true\"\n      v-on=\"getListeners(modal, index)\"\n    >\n      <template v-for=\"(value, name) in modal.slots\" :key=\"name\" #[name]>\n        <div v-html=\"value\" />\n      </template>\n    </component>\n  </TransitionGroup>\n</template>\n\n<style scoped>\n  .modals-enter-active,\n  .modals-leave-active {\n    --swing-timing-function: cubic-bezier(0.25, 0.8, 0.5, 1); /* \"swing\" from the $transition sass map */\n    transition: opacity 165ms var(--swing-timing-function);\n  }\n\n  .modals-enter-from,\n  .modals-leave-to {\n    opacity: 0;\n  }\n\n  .modals-enter-active :deep(.stash-modal__dialog--position-center),\n  .modals-leave-active :deep(.stash-modal__dialog--position-center) {\n    transition: transform 165ms var(--swing-timing-function);\n  }\n\n  .modals-enter-from :deep(.stash-modal__dialog--position-center),\n  .modals-leave-to :deep(.stash-modal__dialog--position-center) {\n    transform: translateY(20px);\n  }\n\n  .modals-enter-active :deep(.stash-modal__dialog--is-drawer),\n  .modals-leave-active :deep(.stash-modal__dialog--is-drawer) {\n    transition: transform 165ms var(--swing-timing-function);\n  }\n\n  .modals-enter-from :deep(.stash-modal__dialog--position-left),\n  .modals-leave-to :deep(.stash-modal__dialog--position-left) {\n    transform: translateX(-50px);\n  }\n\n  .modals-enter-from :deep(.stash-modal__dialog--position-right),\n  .modals-leave-to :deep(.stash-modal__dialog--position-right) {\n    transform: translateX(50px);\n  }\n</style>\n"],"names":["modals","useModals","getListeners","modal","index","_a"],"mappings":";;;;;;;AAKE,UAAMA,IAASC;AAEN,aAAAC,EAAaC,GAA4BC,GAAe;;AAC3D,cAAAC,IAAAF,EAAM,YAAN,QAAAE,EAAe,0BACV,KAGF;AAAA,QACL,SAAS,MAAML,EAAO,MAAM,EAAE,OAAAI,GAAO;AAAA,QACrC,OAAO,MAAMJ,EAAO,MAAM,EAAE,OAAAI,GAAO;AAAA,QACnC,QAAQ,MAAMJ,EAAO,MAAM,EAAE,OAAAI,GAAO;AAAA,MAAA;AAAA,IAExC;;;;;;;;;;;;;;;;;;;"}

package/dist/ModalsPlugin.js

@@ -1,30 +1,20 @@
-import { createVNode as r, h as a, render as l } from "vue";
-import i from "./Modals.js";
+import { createVNode as l, h as o, render as r } from "vue";
+import n from "./Modals.js";
 import "./useModals.js";
-import "./merge-b14fad9d.js";
-import "./_Uint8Array-06e4d083.js";
-import "./isArrayLike-09233e52.js";
-import "./isObjectLike-54341556.js";
-import "./_MapCache-65811284.js";
-import "./_baseAssignValue-dd1499b4.js";
-import "./identity-452d03fd.js";
-import "./_initCloneObject-161353b9.js";
-import "./_getPrototype-3e6fccd6.js";
-import "./_overArg-6d920d99.js";
-import "./isPlainObject-55c7f916.js";
+import "lodash-es/merge";
 import "./_plugin-vue_export-helper-dad06003.js";
-const M = {
-  install(o, t) {
-    const e = (t == null ? void 0 : t.mountNodeId) || "stash-modals-mount-node";
-    let m = document.getElementById(e);
-    if (!m) {
-      m = document.createElement("div"), m.id = e, t != null && t.mountNodeClass && m.classList.add(t.mountNodeClass);
-      const d = r(a(i));
-      document.body.appendChild(m), d.appContext = o._context, l(d, m);
+const C = {
+  install(a, e) {
+    const t = (e == null ? void 0 : e.mountNodeId) || "stash-modals-mount-node";
+    let d = document.getElementById(t);
+    if (!d) {
+      d = document.createElement("div"), d.id = t, e != null && e.mountNodeClass && d.classList.add(e.mountNodeClass);
+      const m = l(o(n));
+      document.body.appendChild(d), m.appContext = a._context, r(m, d);
     }
   }
 };
 export {
-  M as default
+  C as default
 };
 //# sourceMappingURL=ModalsPlugin.js.map

package/dist/ModalsPlugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalsPlugin.js","sources":["../src/plugins/ModalsPlugin.ts"],"sourcesContent":["import { App, createVNode, h, Plugin, render } from 'vue';\n\nimport Modals from '../components/Modals/Modals.vue';\n\nexport interface ModalsPluginOptions {\n  mountNodeClass?: string;\n  mountNodeId?: string;\n}\n\nexport default <Plugin>{\n  install(app: App, options?: ModalsPluginOptions) {\n    const mountNodeId = options?.mountNodeId || 'stash-modals-mount-node';\n    let mountNode = document.getElementById(mountNodeId);\n\n    if (!mountNode) {\n      mountNode = document.createElement('div');\n      mountNode.id = mountNodeId;\n\n      if (options?.mountNodeClass) {\n        mountNode.classList.add(options.mountNodeClass);\n      }\n\n      const vNode = createVNode(h(Modals));\n      document.body.appendChild(mountNode);\n      vNode.appContext = app._context;\n\n      render(vNode, mountNode);\n    }\n  },\n};\n"],"names":["ModalsPlugin","app","options","mountNodeId","mountNode","vNode","createVNode","h","Modals","render"],"mappings":";;;;;;;;;;;;;;;AASA,MAAuBA,IAAA;AAAA,EACrB,QAAQC,GAAUC,GAA+B;AACzC,UAAAC,KAAcD,KAAA,gBAAAA,EAAS,gBAAe;AACxC,QAAAE,IAAY,SAAS,eAAeD,CAAW;AAEnD,QAAI,CAACC,GAAW;AACF,MAAAA,IAAA,SAAS,cAAc,KAAK,GACxCA,EAAU,KAAKD,GAEXD,KAAA,QAAAA,EAAS,kBACDE,EAAA,UAAU,IAAIF,EAAQ,cAAc;AAGhD,YAAMG,IAAQC,EAAYC,EAAEC,CAAM,CAAC;AAC1B,eAAA,KAAK,YAAYJ,CAAS,GACnCC,EAAM,aAAaJ,EAAI,UAEvBQ,EAAOJ,GAAOD,CAAS;AAAA,IACzB;AAAA,EACF;AACF;"}
+{"version":3,"file":"ModalsPlugin.js","sources":["../src/plugins/ModalsPlugin.ts"],"sourcesContent":["import { App, createVNode, h, Plugin, render } from 'vue';\n\nimport Modals from '../components/Modals/Modals.vue';\n\nexport interface ModalsPluginOptions {\n  mountNodeClass?: string;\n  mountNodeId?: string;\n}\n\nexport default <Plugin>{\n  install(app: App, options?: ModalsPluginOptions) {\n    const mountNodeId = options?.mountNodeId || 'stash-modals-mount-node';\n    let mountNode = document.getElementById(mountNodeId);\n\n    if (!mountNode) {\n      mountNode = document.createElement('div');\n      mountNode.id = mountNodeId;\n\n      if (options?.mountNodeClass) {\n        mountNode.classList.add(options.mountNodeClass);\n      }\n\n      const vNode = createVNode(h(Modals));\n      document.body.appendChild(mountNode);\n      vNode.appContext = app._context;\n\n      render(vNode, mountNode);\n    }\n  },\n};\n"],"names":["ModalsPlugin","app","options","mountNodeId","mountNode","vNode","createVNode","h","Modals","render"],"mappings":";;;;;AASA,MAAuBA,IAAA;AAAA,EACrB,QAAQC,GAAUC,GAA+B;AACzC,UAAAC,KAAcD,KAAA,gBAAAA,EAAS,gBAAe;AACxC,QAAAE,IAAY,SAAS,eAAeD,CAAW;AAEnD,QAAI,CAACC,GAAW;AACF,MAAAA,IAAA,SAAS,cAAc,KAAK,GACxCA,EAAU,KAAKD,GAEXD,KAAA,QAAAA,EAAS,kBACDE,EAAA,UAAU,IAAIF,EAAQ,cAAc;AAGhD,YAAMG,IAAQC,EAAYC,EAAEC,CAAM,CAAC;AAC1B,eAAA,KAAK,YAAYJ,CAAS,GACnCC,EAAM,aAAaJ,EAAI,UAEvBQ,EAAOJ,GAAOD,CAAS;AAAA,IACzB;AAAA,EACF;AACF;"}

package/dist/ObfuscateText.js

@@ -3,11 +3,9 @@ import V from "./Button.js";
 import K from "./Icon.js";
 import { _ as M } from "./_plugin-vue_export-helper-dad06003.js";
 import "./Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js";
-import "./Icon.vue_used_vue_type_style_index_0_lang.module-d2507af3.js";
-import "./uniqueId-847efe53.js";
-import "./toString-7d5bf363.js";
-import "./isObjectLike-54341556.js";
+import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
+import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 const N = /* @__PURE__ */ g({
   name: "ll-obfuscate-text",
   __name: "ObfuscateText",
@@ -21,7 +19,7 @@ const N = /* @__PURE__ */ g({
     showToggle: { type: Boolean, default: !1 }
   },
   setup(c) {
-    const i = c, t = d(!1), p = b(), f = h(() => {
+    const i = c, t = d(!1), f = b(), p = h(() => {
       const { showToggle: s, text: e, obfuscateAll: r, lengthToKeep: a, maskChar: l, maskCharCount: n, position: m } = i;
       if (s && t.value)
         return e;
@@ -31,10 +29,10 @@ const N = /* @__PURE__ */ g({
       return m === "end" ? (o = e.substring(0, a), o + l.repeat(n)) : (o = e.substring(e.length - a), l.repeat(n) + o);
     });
     return (s, e) => (u(), C("span", null, [
-      _(x(f.value) + " ", 1),
+      _(x(p.value) + " ", 1),
       s.showToggle ? (u(), T(V, {
         key: 0,
-        class: k(v(p)["obfuscation-toggle-button"]),
+        class: k(v(f)["obfuscation-toggle-button"]),
         icon: "",
         type: "button",
         onClick: e[0] || (e[0] = (r) => t.value = !t.value)
@@ -54,8 +52,8 @@ const N = /* @__PURE__ */ g({
   "obfuscation-toggle-button": "_obfuscation-toggle-button_16egb_2"
 }, O = {
   $style: A
-}, H = /* @__PURE__ */ M(N, [["__cssModules", O]]);
+}, q = /* @__PURE__ */ M(N, [["__cssModules", O]]);
 export {
-  H as default
+  q as default
 };
 //# sourceMappingURL=ObfuscateText.js.map

package/dist/ObfuscateText.js.map

@@ -1 +1 @@
-{"version":3,"file":"ObfuscateText.js","sources":["../src/components/ObfuscateText/ObfuscateText.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, ref, useCssModule } from 'vue';\n\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({ name: 'll-obfuscate-text' });\n\n  export interface ObfuscateTextProps {\n    /**\n     * The full text\n     */\n    text: string;\n\n    /**\n     * Character to obfuscate text with\n     */\n    maskChar?: string;\n\n    /**\n     * The number of masked characters to display\n     */\n    maskCharCount?: number;\n\n    /**\n     * Num of characters to keep revealed.\n     * Default will obfuscate entire string\n     * with length of maskCharCount.\n     */\n    lengthToKeep?: number;\n\n    /**\n     * Position to start obfuscating text\n     */\n    position?: 'start' | 'end';\n    /**\n     * Whether or not to obfuscate all characters.\n     * @deprecated omit the lengthToKeep prop to achieve the same result\n     */\n    obfuscateAll?: boolean;\n    /**\n     * Displays a button for toggling text visibility\n     */\n    showToggle?: boolean;\n  }\n\n  const isFullTextVisible = ref(false);\n  const classes = useCssModule();\n\n  const props = withDefaults(defineProps<ObfuscateTextProps>(), {\n    maskChar: '•',\n    maskCharCount: 10,\n    lengthToKeep: 0,\n    position: 'start',\n    obfuscateAll: false,\n    showToggle: false,\n  });\n\n  const obfuscatedText = computed(() => {\n    const { showToggle, text, obfuscateAll, lengthToKeep, maskChar, maskCharCount, position } = props;\n\n    if (showToggle && isFullTextVisible.value) {\n      return text;\n    }\n\n    if (obfuscateAll || !lengthToKeep) {\n      return maskChar.repeat(maskCharCount);\n    }\n\n    let charsToKeep;\n\n    if (position === 'end') {\n      charsToKeep = text.substring(0, lengthToKeep);\n\n      return charsToKeep + maskChar.repeat(maskCharCount);\n    } else {\n      charsToKeep = text.substring(text.length - lengthToKeep);\n\n      return maskChar.repeat(maskCharCount) + charsToKeep;\n    }\n  });\n</script>\n\n<template>\n  <span\n    >{{ obfuscatedText }}\n    <Button\n      v-if=\"showToggle\"\n      :class=\"classes['obfuscation-toggle-button']\"\n      icon\n      type=\"button\"\n      @click=\"isFullTextVisible = !isFullTextVisible\"\n    >\n      <Icon\n        :name=\"isFullTextVisible ? 'hide' : 'show'\"\n        class=\"cursor-pointer\"\n        :data-test=\"isFullTextVisible ? 'hide-toggle-icon' : 'show-toggle-icon'\"\n      />\n    </Button>\n  </span>\n</template>\n\n<style module>\n  .obfuscation-toggle-button {\n    height: auto;\n    width: auto;\n    padding: 0;\n    margin-left: 4px;\n  }\n</style>\n"],"names":["isFullTextVisible","ref","classes","useCssModule","obfuscatedText","computed","showToggle","text","obfuscateAll","lengthToKeep","maskChar","maskCharCount","position","props","charsToKeep"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;iBA8CQA,IAAoBC,EAAI,EAAK,GAC7BC,IAAUC,KAWVC,IAAiBC,EAAS,MAAM;AAC9B,YAAA,EAAE,YAAAC,GAAY,MAAAC,GAAM,cAAAC,GAAc,cAAAC,GAAc,UAAAC,GAAU,eAAAC,GAAe,UAAAC,EAAa,IAAAC;AAExF,UAAAP,KAAcN,EAAkB;AAC3B,eAAAO;AAGL,UAAAC,KAAgB,CAACC;AACZ,eAAAC,EAAS,OAAOC,CAAa;AAGlC,UAAAG;AAEJ,aAAIF,MAAa,SACDE,IAAAP,EAAK,UAAU,GAAGE,CAAY,GAErCK,IAAcJ,EAAS,OAAOC,CAAa,MAElDG,IAAcP,EAAK,UAAUA,EAAK,SAASE,CAAY,GAEhDC,EAAS,OAAOC,CAAa,IAAIG;AAAA,IAC1C,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ObfuscateText.js","sources":["../src/components/ObfuscateText/ObfuscateText.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, ref, useCssModule } from 'vue';\n\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({ name: 'll-obfuscate-text' });\n\n  export interface ObfuscateTextProps {\n    /**\n     * The full text\n     */\n    text: string;\n\n    /**\n     * Character to obfuscate text with\n     */\n    maskChar?: string;\n\n    /**\n     * The number of masked characters to display\n     */\n    maskCharCount?: number;\n\n    /**\n     * Num of characters to keep revealed.\n     * Default will obfuscate entire string\n     * with length of maskCharCount.\n     */\n    lengthToKeep?: number;\n\n    /**\n     * Position to start obfuscating text\n     */\n    position?: 'start' | 'end';\n    /**\n     * Whether or not to obfuscate all characters.\n     * @deprecated omit the lengthToKeep prop to achieve the same result\n     */\n    obfuscateAll?: boolean;\n    /**\n     * Displays a button for toggling text visibility\n     */\n    showToggle?: boolean;\n  }\n\n  const isFullTextVisible = ref(false);\n  const classes = useCssModule();\n\n  const props = withDefaults(defineProps<ObfuscateTextProps>(), {\n    maskChar: '•',\n    maskCharCount: 10,\n    lengthToKeep: 0,\n    position: 'start',\n    obfuscateAll: false,\n    showToggle: false,\n  });\n\n  const obfuscatedText = computed(() => {\n    const { showToggle, text, obfuscateAll, lengthToKeep, maskChar, maskCharCount, position } = props;\n\n    if (showToggle && isFullTextVisible.value) {\n      return text;\n    }\n\n    if (obfuscateAll || !lengthToKeep) {\n      return maskChar.repeat(maskCharCount);\n    }\n\n    let charsToKeep;\n\n    if (position === 'end') {\n      charsToKeep = text.substring(0, lengthToKeep);\n\n      return charsToKeep + maskChar.repeat(maskCharCount);\n    } else {\n      charsToKeep = text.substring(text.length - lengthToKeep);\n\n      return maskChar.repeat(maskCharCount) + charsToKeep;\n    }\n  });\n</script>\n\n<template>\n  <span\n    >{{ obfuscatedText }}\n    <Button\n      v-if=\"showToggle\"\n      :class=\"classes['obfuscation-toggle-button']\"\n      icon\n      type=\"button\"\n      @click=\"isFullTextVisible = !isFullTextVisible\"\n    >\n      <Icon\n        :name=\"isFullTextVisible ? 'hide' : 'show'\"\n        class=\"cursor-pointer\"\n        :data-test=\"isFullTextVisible ? 'hide-toggle-icon' : 'show-toggle-icon'\"\n      />\n    </Button>\n  </span>\n</template>\n\n<style module>\n  .obfuscation-toggle-button {\n    height: auto;\n    width: auto;\n    padding: 0;\n    margin-left: 4px;\n  }\n</style>\n"],"names":["isFullTextVisible","ref","classes","useCssModule","obfuscatedText","computed","showToggle","text","obfuscateAll","lengthToKeep","maskChar","maskCharCount","position","props","charsToKeep"],"mappings":";;;;;;;;;;;;;;;;;;;;;iBA8CQA,IAAoBC,EAAI,EAAK,GAC7BC,IAAUC,KAWVC,IAAiBC,EAAS,MAAM;AAC9B,YAAA,EAAE,YAAAC,GAAY,MAAAC,GAAM,cAAAC,GAAc,cAAAC,GAAc,UAAAC,GAAU,eAAAC,GAAe,UAAAC,EAAa,IAAAC;AAExF,UAAAP,KAAcN,EAAkB;AAC3B,eAAAO;AAGL,UAAAC,KAAgB,CAACC;AACZ,eAAAC,EAAS,OAAOC,CAAa;AAGlC,UAAAG;AAEJ,aAAIF,MAAa,SACDE,IAAAP,EAAK,UAAU,GAAGE,CAAY,GAErCK,IAAcJ,EAAS,OAAOC,CAAa,MAElDG,IAAcP,EAAK,UAAUA,EAAK,SAASE,CAAY,GAEhDC,EAAS,OAAOC,CAAa,IAAIG;AAAA,IAC1C,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/PageNavigation.js

@@ -1,25 +1,21 @@
 import { t as N } from "./locale.js";
 import O from "./Dropdown.js";
 import A from "./Icon.js";
-import { a as D } from "./_MapCache-65811284.js";
+import D from "lodash-es/isFunction";
 import B from "./Chip.js";
-import { resolveComponent as _, openBlock as r, createElementBlock as b, mergeProps as y, createElementVNode as n, normalizeClass as i, toDisplayString as c, Fragment as w, createBlock as m, withCtx as v, createTextVNode as u, createCommentVNode as k, normalizeStyle as S, renderList as I, createVNode as $ } from "vue";
+import { resolveComponent as _, openBlock as r, createElementBlock as b, mergeProps as y, createElementVNode as n, normalizeClass as i, toDisplayString as c, Fragment as w, createBlock as v, withCtx as m, createTextVNode as u, createCommentVNode as k, normalizeStyle as S, renderList as I, createVNode as $ } from "vue";
 import { _ as C } from "./_plugin-vue_export-helper-dad06003.js";
-import "./get-27d90892.js";
-import "./isObjectLike-54341556.js";
-import "./toString-7d5bf363.js";
+import "lodash-es/get";
 import "./constants.js";
 import "./clickoutside.js";
 import "./utils/calculateElementOverflow.js";
 import "./utils/helpers.js";
-import "./capitalize-667d9f60.js";
-import "./_createCompounder-ae01a723.js";
-import "./isPlainObject-55c7f916.js";
-import "./_getPrototype-3e6fccd6.js";
-import "./_overArg-6d920d99.js";
-import "./Icon.vue_used_vue_type_style_index_0_lang.module-d2507af3.js";
-import "./uniqueId-847efe53.js";
+import "lodash-es/camelCase";
+import "lodash-es/isFinite";
+import "lodash-es/isPlainObject";
+import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
+import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "./colors-13e95ebf.js";
 import "./utils/colorScheme.js";
 const M = "_link_5hoi4_176", z = "_badge_5hoi4_225", E = {
@@ -119,7 +115,7 @@ const M = "_link_5hoi4_176", z = "_badge_5hoi4_225", E = {
   }
 }, V = ["data-id"], F = ["data-id", "onClick"], P = ["href"], T = ["aria-selected", "data-id"], W = ["href"];
 function R(e, h, t, d, l, a) {
-  const f = _("ll-chip"), p = _("router-link");
+  const f = _("ll-chip"), g = _("router-link");
   return a.isDisabled ? (r(), b("li", y({
     key: 0,
     "aria-disabled": "true",
@@ -129,25 +125,25 @@ function R(e, h, t, d, l, a) {
       class: i([e.$style.link, { [e.$style["dropdown-link"]]: t.isDropdown }, e.$style["is-disabled"]])
     }, c(t.label), 3)
   ], 16, V)) : (r(), b(w, { key: 1 }, [
-    t.to ? (r(), m(p, {
+    t.to ? (r(), v(g, {
       key: 0,
       custom: "",
       to: t.to
     }, {
-      default: v(({ route: g, navigate: s }) => {
+      default: m(({ route: p, navigate: s }) => {
         var o;
         return [
           n("li", y({
             role: "tab",
             "data-id": t.index,
-            class: [{ [e.$style["is-active"]]: a.hasActiveClass(g.path) }, "cursor-pointer"]
+            class: [{ [e.$style["is-active"]]: a.hasActiveClass(p.path) }, "cursor-pointer"]
           }, e.$attrs, { onClick: s }), [
             n("a", {
               class: i([e.$style.link, { [e.$style["dropdown-link"]]: t.isDropdown }]),
               href: ((o = t.to) == null ? void 0 : o.name) || t.to
             }, [
               u(c(t.label) + " ", 1),
-              t.badge ? (r(), m(f, {
+              t.badge ? (r(), v(f, {
                 key: 0,
                 radius: "pill",
                 shade: "main",
@@ -155,7 +151,7 @@ function R(e, h, t, d, l, a) {
                 class: i(e.$style.badge),
                 color: t.badgeColor
               }, {
-                default: v(() => [
+                default: m(() => [
                   u(c(t.badge), 1)
                 ]),
                 _: 1
@@ -177,7 +173,7 @@ function R(e, h, t, d, l, a) {
         href: t.href
       }, [
         u(c(t.label) + " ", 1),
-        t.badge ? (r(), m(f, {
+        t.badge ? (r(), v(f, {
           key: 0,
           radius: "pill",
           shade: "main",
@@ -185,7 +181,7 @@ function R(e, h, t, d, l, a) {
           class: i(e.$style.badge),
           color: t.badgeColor
         }, {
-          default: v(() => [
+          default: m(() => [
             u(c(t.badge), 1)
           ]),
           _: 1
@@ -288,7 +284,7 @@ const j = {
   }
 }, Y = { class: "container" }, Z = ["onClick"];
 function x(e, h, t, d, l, a) {
-  const f = _("NavItem"), p = _("ll-icon"), g = _("ll-dropdown");
+  const f = _("NavItem"), g = _("ll-icon"), p = _("ll-dropdown");
   return r(), b("div", Y, [
     n("nav", {
       class: i([e.$style.tabs, { [e.$style["is-scrollable"]]: !l.hasIntersectionObserver }])
@@ -300,7 +296,7 @@ function x(e, h, t, d, l, a) {
           width: `calc(100% - ${l.toggleWidth}px)`
         })
       }, [
-        (r(!0), b(w, null, I(t.items, (s, o) => (r(), m(f, {
+        (r(!0), b(w, null, I(t.items, (s, o) => (r(), v(f, {
           key: o,
           class: i([e.$style.item, { [e.$style["is-invisible"]]: l.overflowIds.includes(`${o}`) }]),
           badge: s.badge,
@@ -314,12 +310,12 @@ function x(e, h, t, d, l, a) {
           disabled: s.disabled
         }, null, 8, ["class", "badge", "badge-color", "data-id", "href", "index", "is-active", "label", "to", "disabled"]))), 128))
       ], 6),
-      $(g, {
+      $(p, {
         ref: "toggle",
         class: i([e.$style.dropdown, { [e.$style["is-visible"]]: l.overflowIds.length }]),
         offset: { x: -1 }
       }, {
-        toggle: v(({ toggle: s }) => [
+        toggle: m(({ toggle: s }) => [
           n("button", {
             "aria-haspopup": "true",
             class: i([e.$style.link, e.$style["dropdown-toggle"]]),
@@ -328,17 +324,17 @@ function x(e, h, t, d, l, a) {
             onClick: s
           }, [
             u(c(l.moreText) + " ", 1),
-            $(p, {
+            $(g, {
               name: "caret-down",
               class: i(e.$style["dropdown-icon"])
             }, null, 8, ["class"])
           ], 10, Z)
         ]),
-        default: v(() => [
+        default: m(() => [
           n("ul", {
             class: i(e.$style["dropdown-list"])
           }, [
-            (r(!0), b(w, null, I(t.items, (s, o) => (r(), m(f, {
+            (r(!0), b(w, null, I(t.items, (s, o) => (r(), v(f, {
               key: o,
               class: i({ hidden: !l.overflowIds.includes(`${o}`) }),
               href: s.href,
@@ -358,9 +354,9 @@ function x(e, h, t, d, l, a) {
 }
 const ee = {
   $style: Q
-}, Ce = /* @__PURE__ */ C(X, [["render", x], ["__cssModules", ee]]);
+}, we = /* @__PURE__ */ C(X, [["render", x], ["__cssModules", ee]]);
 export {
   q as NavItem,
-  Ce as default
+  we as default
 };
 //# sourceMappingURL=PageNavigation.js.map

package/dist/PageNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageNavigation.js","sources":["../src/components/PageNavigation/components/NavItem.vue","../src/components/PageNavigation/PageNavigation.vue"],"sourcesContent":["<script>\n  import isFunction from 'lodash-es/isFunction';\n\n  import Chip from '../../Chip/Chip.vue';\n\n  export default {\n    name: 'nav-item',\n\n    components: {\n      'll-chip': Chip,\n    },\n\n    inheritAttrs: false,\n\n    props: {\n      /**\n       * Used to display the bubble count, i.e. orders, messages\n       */\n      badge: {\n        type: [Number, String],\n        default: 0,\n      },\n\n      /**\n       * The background color of the badge.\n       * Currently limited to a subset of brand colors.\n       */\n      badgeColor: {\n        type: String,\n        default: 'blue',\n        validator: (value) => ['blue', 'red'].includes(value),\n      },\n\n      /**\n       * Private/inherited - Item index.\n       */\n      index: {\n        type: Number,\n        required: true,\n      },\n      /**\n       * Private/inherited - Whether the current tab `index` matches `activeIndex`\n       */\n      isActive: Boolean,\n      /**\n       * Private/inherited - Whether the item is inside the dropdown\n       */\n      isDropdown: Boolean,\n      /**\n       * Used to render an `<a>` tag. Denotes the target href of the link.\n       */\n      href: {\n        default: '',\n        type: String,\n      },\n      /**\n       * The nav item label\n       */\n      label: {\n        default: '',\n        type: String,\n      },\n      /**\n       * Used to render a `<router-link>`. Denotes the target route of the link.\n       * See: https://router.vuejs.org/api/#router-link\n       */\n      to: {\n        default: '',\n        type: [Object, String],\n      },\n      /**\n       * Will render a plain text item if true.\n       * Accepts a function to ensure the value is up-to-date, such as when it comes from vuex\n       */\n      disabled: {\n        default: false,\n        type: [Boolean, Function],\n      },\n    },\n\n    computed: {\n      isDisabled() {\n        if (isFunction(this.disabled)) {\n          return this.disabled();\n        }\n\n        return this.disabled;\n      },\n    },\n\n    methods: {\n      /**\n       * Customer Active Class matcher.\n       *\n       * This attempts to match the URL ignoring the path params.\n       */\n      hasActiveClass(path) {\n        if (path === this.$route.path) {\n          return true;\n        } else if (this.$route.path.includes(path)) {\n          const sliceIndex = (this.$route.path.length - this.$route.path.lastIndexOf('/')) * -1;\n          const parentPath = this.$route.path.slice(0, sliceIndex);\n\n          return path === parentPath;\n        }\n      },\n    },\n  };\n</script>\n\n<template>\n  <li v-if=\"isDisabled\" aria-disabled=\"true\" :data-id=\"index\" v-bind=\"$attrs\">\n    <span :class=\"[$style.link, { [$style['dropdown-link']]: isDropdown }, $style['is-disabled']]\">{{ label }}</span>\n  </li>\n  <template v-else>\n    <router-link v-if=\"to\" v-slot=\"{ route, navigate }\" custom :to=\"to\">\n      <li\n        role=\"tab\"\n        :data-id=\"index\"\n        :class=\"[{ [$style['is-active']]: hasActiveClass(route.path) }, 'cursor-pointer']\"\n        v-bind=\"$attrs\"\n        @click=\"navigate\"\n      >\n        <a :class=\"[$style.link, { [$style['dropdown-link']]: isDropdown }]\" :href=\"to?.name || to\">\n          {{ label }}\n          <ll-chip v-if=\"badge\" radius=\"pill\" shade=\"main\" size=\"small\" :class=\"$style.badge\" :color=\"badgeColor\">{{\n            badge\n          }}</ll-chip>\n        </a>\n      </li>\n    </router-link>\n    <li\n      v-else\n      role=\"tab\"\n      :aria-selected=\"isActive || null\"\n      :class=\"{ [$style['is-active']]: isActive }\"\n      :data-id=\"index\"\n      v-bind=\"$attrs\"\n    >\n      <a :class=\"[$style.link, { [$style['dropdown-link']]: isDropdown }]\" :href=\"href\">\n        {{ label }}\n        <ll-chip v-if=\"badge\" radius=\"pill\" shade=\"main\" size=\"small\" :class=\"$style.badge\" :color=\"badgeColor\">{{\n          badge\n        }}</ll-chip>\n      </a>\n    </li>\n  </template>\n</template>\n\n<style lang=\"scss\" module>\n  .link {\n    border-bottom: border(medium, transparent);\n    color: var(--color-ice-700);\n    display: block;\n    font-family: $font-family-primary;\n    font-weight: typo('h3', 'weight');\n    line-height: 1.75em;\n    padding: space(1) 0;\n    transition: color $primary-transition;\n    white-space: nowrap;\n\n    &:hover,\n    &:focus {\n      color: var(--color-blue);\n      outline: 0;\n      text-decoration: none;\n    }\n\n    .is-active & {\n      color: var(--color-blue);\n\n      &,\n      &:hover,\n      &:focus {\n        background-color: transparent;\n        border-bottom-color: var(--color-blue);\n      }\n\n      &:focus {\n        color: var(--color-blue);\n      }\n    }\n\n    &.is-disabled {\n      pointer-events: none;\n      color: var(--color-ice-500);\n    }\n  }\n\n  .dropdown-link {\n    border-bottom: 0;\n    border-radius: $border-radius;\n    font-size: typo('button', 'size');\n    height: space(4);\n    line-height: space(4);\n    padding: 0 space(1);\n    transition: none;\n\n    &:hover,\n    &:focus,\n    &:active {\n      background: var(--color-blue);\n      color: var(--color-white);\n      text-decoration: none;\n    }\n\n    .is-active &,\n    .is-active &:hover,\n    .is-active &:focus {\n      color: var(--color-blue);\n    }\n  }\n\n  .badge {\n    margin-left: 2px;\n  }\n</style>\n","<script>\n  import { t } from '../../locale';\n  import Dropdown from '../Dropdown/Dropdown.vue';\n  import Icon from '../Icon/Icon.vue';\n  import NavItem from './components/NavItem.vue';\n\n  export { default as NavItem } from './components/NavItem.vue';\n\n  export default {\n    name: 'll-page-navigation',\n\n    components: {\n      'll-dropdown': Dropdown,\n      'll-icon': Icon,\n      NavItem,\n    },\n\n    props: {\n      /**\n       * Index of active tab (zero-based)\n       */\n      activeIndex: {\n        type: Number,\n        default: 0,\n      },\n      /**\n       * Array of tabs. A `tab` is an object containing a `label` and either an `href` | `to`\n       */\n      items: {\n        type: Array,\n        default: () => [],\n      },\n    },\n\n    data() {\n      return {\n        hasIntersectionObserver: 'IntersectionObserver' in window,\n        observer: undefined,\n        overflowIds: [],\n        toggleWidth: 0,\n        moreText: t('ll.pageNavigation.more'),\n      };\n    },\n\n    watch: {\n      items() {\n        this.destroyObserver();\n        this.observe();\n      },\n    },\n\n    mounted() {\n      this.observe();\n    },\n\n    activated() {\n      this.observe();\n    },\n\n    deactivated() {\n      this.destroyObserver();\n    },\n\n    beforeUnmount() {\n      this.destroyObserver();\n    },\n\n    methods: {\n      /**\n       * Event emitted when a tab is clicked, with the target tab index.\n       */\n      observe() {\n        if (this.hasIntersectionObserver) {\n          const tabs = Array.from(this.$refs.tabList.children);\n\n          const options = {\n            root: this.$refs.tabList,\n            rootMargin: '0px 0px 0px 0px',\n            threshold: Array.from({ length: 100 }).map((v, i) => (i + 1) / 100),\n          };\n\n          this.observer = new IntersectionObserver((entries) => {\n            entries.forEach((entry) => {\n              const dataId = entry.target.getAttribute('data-id');\n\n              /**\n               * Check for partial intersection.\n               * Zooming out can result in ratio of approx 0.984\n               * Anything higher will result in nav items disappearing\n               */\n              if (entry.intersectionRatio > 0.96) {\n                // show tab, hide in dropdown\n                if (this.overflowIds.includes(dataId)) {\n                  this.overflowIds.splice(this.overflowIds.indexOf(dataId), 1);\n                }\n              } else {\n                // hide tab, show in dropdown\n                if (!this.overflowIds.includes(dataId)) {\n                  this.overflowIds.push(dataId);\n                }\n              }\n            });\n          }, options);\n\n          tabs.forEach((element) => {\n            this.observer.observe(element);\n          });\n\n          this.toggleWidth = this.$refs.toggle.$el?.getBoundingClientRect().width;\n        }\n      },\n\n      destroyObserver() {\n        if (this.observer) {\n          this.observer.disconnect();\n          this.observer = undefined;\n        }\n      },\n    },\n  };\n</script>\n\n<template>\n  <div class=\"container\">\n    <nav :class=\"[$style.tabs, { [$style['is-scrollable']]: !hasIntersectionObserver }]\">\n      <ul\n        ref=\"tabList\"\n        :class=\"$style.list\"\n        :style=\"{\n          width: `calc(100% - ${toggleWidth}px)`,\n        }\"\n      >\n        <NavItem\n          v-for=\"(item, index) in items\"\n          :key=\"index\"\n          :class=\"[$style.item, { [$style['is-invisible']]: overflowIds.includes(`${index}`) }]\"\n          :badge=\"item.badge\"\n          :badge-color=\"item.badgeColor\"\n          :data-id=\"index\"\n          :href=\"item.href\"\n          :index=\"index\"\n          :is-active=\"index === activeIndex\"\n          :label=\"item.label\"\n          :to=\"item.to\"\n          :disabled=\"item.disabled\"\n        />\n      </ul>\n      <ll-dropdown\n        ref=\"toggle\"\n        :class=\"[$style.dropdown, { [$style['is-visible']]: overflowIds.length }]\"\n        :offset=\"{ x: -1 }\"\n      >\n        <template #toggle=\"{ toggle }\">\n          <button\n            aria-haspopup=\"true\"\n            :class=\"[$style.link, $style['dropdown-toggle']]\"\n            type=\"button\"\n            aria-expanded=\"false\"\n            @click=\"toggle\"\n          >\n            {{ moreText }}\n            <ll-icon name=\"caret-down\" :class=\"$style['dropdown-icon']\" />\n          </button>\n        </template>\n\n        <template #default>\n          <ul :class=\"$style['dropdown-list']\">\n            <NavItem\n              v-for=\"(item, index) in items\"\n              :key=\"index\"\n              :class=\"{ hidden: !overflowIds.includes(`${index}`) }\"\n              :href=\"item.href\"\n              :index=\"index\"\n              :is-active=\"index === activeIndex\"\n              :is-dropdown=\"true\"\n              :label=\"item.label\"\n              :to=\"item.to\"\n              :disabled=\"item?.disabled ?? false\"\n            />\n          </ul>\n        </template>\n      </ll-dropdown>\n    </nav>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n  .link {\n    border-bottom: border(medium, transparent);\n    color: var(--color-ice-700);\n    display: block;\n    font-family: $font-family-primary;\n    font-weight: typo('h3', 'weight');\n    line-height: 1.75em;\n    padding: space(1) 0;\n    transition: color $secondary-transition;\n    white-space: nowrap;\n\n    &:hover,\n    &:focus {\n      color: var(--color-blue);\n      outline: 0;\n      text-decoration: none;\n    }\n\n    .is-active & {\n      color: var(--color-blue);\n\n      &,\n      &:hover,\n      &:focus {\n        background-color: transparent;\n        border-bottom-color: var(--color-blue);\n      }\n\n      &:focus {\n        color: var(--color-blue);\n      }\n    }\n  }\n\n  .tabs {\n    position: relative;\n\n    &.is-scrollable {\n      margin-right: 0;\n      max-width: 100%;\n      overflow: auto;\n    }\n  }\n\n  .list {\n    display: inline-flex;\n    list-style: none;\n    overflow: hidden;\n    padding: 0;\n    position: relative;\n  }\n\n  .item {\n    padding: 0 space(2) 0 0;\n\n    @include breakpoint('md') {\n      padding-right: space(3);\n    }\n\n    &.is-active {\n      transition: none !important;\n    }\n  }\n\n  .is-invisible {\n    visibility: hidden;\n  }\n\n  .tabs .dropdown {\n    display: inline-flex;\n    height: 100%;\n    position: absolute;\n    right: 0;\n    top: 0;\n    visibility: hidden;\n\n    &.is-visible {\n      visibility: visible;\n    }\n  }\n\n  .dropdown-list {\n    @include elevation('high');\n\n    background: var(--color-white);\n    border: none;\n    border-radius: $border-radius;\n    display: block;\n    list-style: none;\n    margin-top: 0;\n    min-width: 140px;\n    padding: space(1);\n    position: static;\n    right: -(space(1));\n    top: 100%;\n    z-index: z-index(control);\n\n    .is-open & {\n      display: block;\n    }\n\n    &::before {\n      @include corner;\n\n      border-left: border(thin, var(--color-blue));\n      border-top: border(thin, var(--color-blue));\n      content: '';\n      display: none;\n      right: space(2);\n    }\n  }\n\n  .dropdown-toggle {\n    background: transparent;\n    border: 0;\n    border-bottom: border(medium, transparent);\n    color: var(--color-blue);\n    display: flex;\n    padding-left: space(1);\n\n    &:hover,\n    &:focus {\n      color: var(--color-blue-hover);\n    }\n\n    .has-active & {\n      border-bottom-color: var(--color-blue);\n    }\n  }\n\n  .dropdown-icon {\n    height: icon('default', 'height');\n    position: relative;\n    top: 1px;\n    vertical-align: bottom;\n    width: icon('default', 'width');\n  }\n</style>\n"],"names":["_sfc_main","Chip","value","isFunction","path","sliceIndex","parentPath","$options","_openBlock","_createElementBlock","_mergeProps","$props","_ctx","_createElementVNode","_normalizeClass","_Fragment","_createBlock","_component_router_link","route","navigate","_a","_createTextVNode","_toDisplayString","_component_ll_chip","Dropdown","Icon","NavItem","t","tabs","options","v","i","entries","entry","dataId","element","_hoisted_1","$data","_normalizeStyle","_renderList","item","index","_component_NavItem","_createVNode","_component_ll_dropdown","_withCtx","toggle","_component_ll_icon"],"mappings":"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"}
+{"version":3,"file":"PageNavigation.js","sources":["../src/components/PageNavigation/components/NavItem.vue","../src/components/PageNavigation/PageNavigation.vue"],"sourcesContent":["<script>\n  import isFunction from 'lodash-es/isFunction';\n\n  import Chip from '../../Chip/Chip.vue';\n\n  export default {\n    name: 'nav-item',\n\n    components: {\n      'll-chip': Chip,\n    },\n\n    inheritAttrs: false,\n\n    props: {\n      /**\n       * Used to display the bubble count, i.e. orders, messages\n       */\n      badge: {\n        type: [Number, String],\n        default: 0,\n      },\n\n      /**\n       * The background color of the badge.\n       * Currently limited to a subset of brand colors.\n       */\n      badgeColor: {\n        type: String,\n        default: 'blue',\n        validator: (value) => ['blue', 'red'].includes(value),\n      },\n\n      /**\n       * Private/inherited - Item index.\n       */\n      index: {\n        type: Number,\n        required: true,\n      },\n      /**\n       * Private/inherited - Whether the current tab `index` matches `activeIndex`\n       */\n      isActive: Boolean,\n      /**\n       * Private/inherited - Whether the item is inside the dropdown\n       */\n      isDropdown: Boolean,\n      /**\n       * Used to render an `<a>` tag. Denotes the target href of the link.\n       */\n      href: {\n        default: '',\n        type: String,\n      },\n      /**\n       * The nav item label\n       */\n      label: {\n        default: '',\n        type: String,\n      },\n      /**\n       * Used to render a `<router-link>`. Denotes the target route of the link.\n       * See: https://router.vuejs.org/api/#router-link\n       */\n      to: {\n        default: '',\n        type: [Object, String],\n      },\n      /**\n       * Will render a plain text item if true.\n       * Accepts a function to ensure the value is up-to-date, such as when it comes from vuex\n       */\n      disabled: {\n        default: false,\n        type: [Boolean, Function],\n      },\n    },\n\n    computed: {\n      isDisabled() {\n        if (isFunction(this.disabled)) {\n          return this.disabled();\n        }\n\n        return this.disabled;\n      },\n    },\n\n    methods: {\n      /**\n       * Customer Active Class matcher.\n       *\n       * This attempts to match the URL ignoring the path params.\n       */\n      hasActiveClass(path) {\n        if (path === this.$route.path) {\n          return true;\n        } else if (this.$route.path.includes(path)) {\n          const sliceIndex = (this.$route.path.length - this.$route.path.lastIndexOf('/')) * -1;\n          const parentPath = this.$route.path.slice(0, sliceIndex);\n\n          return path === parentPath;\n        }\n      },\n    },\n  };\n</script>\n\n<template>\n  <li v-if=\"isDisabled\" aria-disabled=\"true\" :data-id=\"index\" v-bind=\"$attrs\">\n    <span :class=\"[$style.link, { [$style['dropdown-link']]: isDropdown }, $style['is-disabled']]\">{{ label }}</span>\n  </li>\n  <template v-else>\n    <router-link v-if=\"to\" v-slot=\"{ route, navigate }\" custom :to=\"to\">\n      <li\n        role=\"tab\"\n        :data-id=\"index\"\n        :class=\"[{ [$style['is-active']]: hasActiveClass(route.path) }, 'cursor-pointer']\"\n        v-bind=\"$attrs\"\n        @click=\"navigate\"\n      >\n        <a :class=\"[$style.link, { [$style['dropdown-link']]: isDropdown }]\" :href=\"to?.name || to\">\n          {{ label }}\n          <ll-chip v-if=\"badge\" radius=\"pill\" shade=\"main\" size=\"small\" :class=\"$style.badge\" :color=\"badgeColor\">{{\n            badge\n          }}</ll-chip>\n        </a>\n      </li>\n    </router-link>\n    <li\n      v-else\n      role=\"tab\"\n      :aria-selected=\"isActive || null\"\n      :class=\"{ [$style['is-active']]: isActive }\"\n      :data-id=\"index\"\n      v-bind=\"$attrs\"\n    >\n      <a :class=\"[$style.link, { [$style['dropdown-link']]: isDropdown }]\" :href=\"href\">\n        {{ label }}\n        <ll-chip v-if=\"badge\" radius=\"pill\" shade=\"main\" size=\"small\" :class=\"$style.badge\" :color=\"badgeColor\">{{\n          badge\n        }}</ll-chip>\n      </a>\n    </li>\n  </template>\n</template>\n\n<style lang=\"scss\" module>\n  .link {\n    border-bottom: border(medium, transparent);\n    color: var(--color-ice-700);\n    display: block;\n    font-family: $font-family-primary;\n    font-weight: typo('h3', 'weight');\n    line-height: 1.75em;\n    padding: space(1) 0;\n    transition: color $primary-transition;\n    white-space: nowrap;\n\n    &:hover,\n    &:focus {\n      color: var(--color-blue);\n      outline: 0;\n      text-decoration: none;\n    }\n\n    .is-active & {\n      color: var(--color-blue);\n\n      &,\n      &:hover,\n      &:focus {\n        background-color: transparent;\n        border-bottom-color: var(--color-blue);\n      }\n\n      &:focus {\n        color: var(--color-blue);\n      }\n    }\n\n    &.is-disabled {\n      pointer-events: none;\n      color: var(--color-ice-500);\n    }\n  }\n\n  .dropdown-link {\n    border-bottom: 0;\n    border-radius: $border-radius;\n    font-size: typo('button', 'size');\n    height: space(4);\n    line-height: space(4);\n    padding: 0 space(1);\n    transition: none;\n\n    &:hover,\n    &:focus,\n    &:active {\n      background: var(--color-blue);\n      color: var(--color-white);\n      text-decoration: none;\n    }\n\n    .is-active &,\n    .is-active &:hover,\n    .is-active &:focus {\n      color: var(--color-blue);\n    }\n  }\n\n  .badge {\n    margin-left: 2px;\n  }\n</style>\n","<script>\n  import { t } from '../../locale';\n  import Dropdown from '../Dropdown/Dropdown.vue';\n  import Icon from '../Icon/Icon.vue';\n  import NavItem from './components/NavItem.vue';\n\n  export { default as NavItem } from './components/NavItem.vue';\n\n  export default {\n    name: 'll-page-navigation',\n\n    components: {\n      'll-dropdown': Dropdown,\n      'll-icon': Icon,\n      NavItem,\n    },\n\n    props: {\n      /**\n       * Index of active tab (zero-based)\n       */\n      activeIndex: {\n        type: Number,\n        default: 0,\n      },\n      /**\n       * Array of tabs. A `tab` is an object containing a `label` and either an `href` | `to`\n       */\n      items: {\n        type: Array,\n        default: () => [],\n      },\n    },\n\n    data() {\n      return {\n        hasIntersectionObserver: 'IntersectionObserver' in window,\n        observer: undefined,\n        overflowIds: [],\n        toggleWidth: 0,\n        moreText: t('ll.pageNavigation.more'),\n      };\n    },\n\n    watch: {\n      items() {\n        this.destroyObserver();\n        this.observe();\n      },\n    },\n\n    mounted() {\n      this.observe();\n    },\n\n    activated() {\n      this.observe();\n    },\n\n    deactivated() {\n      this.destroyObserver();\n    },\n\n    beforeUnmount() {\n      this.destroyObserver();\n    },\n\n    methods: {\n      /**\n       * Event emitted when a tab is clicked, with the target tab index.\n       */\n      observe() {\n        if (this.hasIntersectionObserver) {\n          const tabs = Array.from(this.$refs.tabList.children);\n\n          const options = {\n            root: this.$refs.tabList,\n            rootMargin: '0px 0px 0px 0px',\n            threshold: Array.from({ length: 100 }).map((v, i) => (i + 1) / 100),\n          };\n\n          this.observer = new IntersectionObserver((entries) => {\n            entries.forEach((entry) => {\n              const dataId = entry.target.getAttribute('data-id');\n\n              /**\n               * Check for partial intersection.\n               * Zooming out can result in ratio of approx 0.984\n               * Anything higher will result in nav items disappearing\n               */\n              if (entry.intersectionRatio > 0.96) {\n                // show tab, hide in dropdown\n                if (this.overflowIds.includes(dataId)) {\n                  this.overflowIds.splice(this.overflowIds.indexOf(dataId), 1);\n                }\n              } else {\n                // hide tab, show in dropdown\n                if (!this.overflowIds.includes(dataId)) {\n                  this.overflowIds.push(dataId);\n                }\n              }\n            });\n          }, options);\n\n          tabs.forEach((element) => {\n            this.observer.observe(element);\n          });\n\n          this.toggleWidth = this.$refs.toggle.$el?.getBoundingClientRect().width;\n        }\n      },\n\n      destroyObserver() {\n        if (this.observer) {\n          this.observer.disconnect();\n          this.observer = undefined;\n        }\n      },\n    },\n  };\n</script>\n\n<template>\n  <div class=\"container\">\n    <nav :class=\"[$style.tabs, { [$style['is-scrollable']]: !hasIntersectionObserver }]\">\n      <ul\n        ref=\"tabList\"\n        :class=\"$style.list\"\n        :style=\"{\n          width: `calc(100% - ${toggleWidth}px)`,\n        }\"\n      >\n        <NavItem\n          v-for=\"(item, index) in items\"\n          :key=\"index\"\n          :class=\"[$style.item, { [$style['is-invisible']]: overflowIds.includes(`${index}`) }]\"\n          :badge=\"item.badge\"\n          :badge-color=\"item.badgeColor\"\n          :data-id=\"index\"\n          :href=\"item.href\"\n          :index=\"index\"\n          :is-active=\"index === activeIndex\"\n          :label=\"item.label\"\n          :to=\"item.to\"\n          :disabled=\"item.disabled\"\n        />\n      </ul>\n      <ll-dropdown\n        ref=\"toggle\"\n        :class=\"[$style.dropdown, { [$style['is-visible']]: overflowIds.length }]\"\n        :offset=\"{ x: -1 }\"\n      >\n        <template #toggle=\"{ toggle }\">\n          <button\n            aria-haspopup=\"true\"\n            :class=\"[$style.link, $style['dropdown-toggle']]\"\n            type=\"button\"\n            aria-expanded=\"false\"\n            @click=\"toggle\"\n          >\n            {{ moreText }}\n            <ll-icon name=\"caret-down\" :class=\"$style['dropdown-icon']\" />\n          </button>\n        </template>\n\n        <template #default>\n          <ul :class=\"$style['dropdown-list']\">\n            <NavItem\n              v-for=\"(item, index) in items\"\n              :key=\"index\"\n              :class=\"{ hidden: !overflowIds.includes(`${index}`) }\"\n              :href=\"item.href\"\n              :index=\"index\"\n              :is-active=\"index === activeIndex\"\n              :is-dropdown=\"true\"\n              :label=\"item.label\"\n              :to=\"item.to\"\n              :disabled=\"item?.disabled ?? false\"\n            />\n          </ul>\n        </template>\n      </ll-dropdown>\n    </nav>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n  .link {\n    border-bottom: border(medium, transparent);\n    color: var(--color-ice-700);\n    display: block;\n    font-family: $font-family-primary;\n    font-weight: typo('h3', 'weight');\n    line-height: 1.75em;\n    padding: space(1) 0;\n    transition: color $secondary-transition;\n    white-space: nowrap;\n\n    &:hover,\n    &:focus {\n      color: var(--color-blue);\n      outline: 0;\n      text-decoration: none;\n    }\n\n    .is-active & {\n      color: var(--color-blue);\n\n      &,\n      &:hover,\n      &:focus {\n        background-color: transparent;\n        border-bottom-color: var(--color-blue);\n      }\n\n      &:focus {\n        color: var(--color-blue);\n      }\n    }\n  }\n\n  .tabs {\n    position: relative;\n\n    &.is-scrollable {\n      margin-right: 0;\n      max-width: 100%;\n      overflow: auto;\n    }\n  }\n\n  .list {\n    display: inline-flex;\n    list-style: none;\n    overflow: hidden;\n    padding: 0;\n    position: relative;\n  }\n\n  .item {\n    padding: 0 space(2) 0 0;\n\n    @include breakpoint('md') {\n      padding-right: space(3);\n    }\n\n    &.is-active {\n      transition: none !important;\n    }\n  }\n\n  .is-invisible {\n    visibility: hidden;\n  }\n\n  .tabs .dropdown {\n    display: inline-flex;\n    height: 100%;\n    position: absolute;\n    right: 0;\n    top: 0;\n    visibility: hidden;\n\n    &.is-visible {\n      visibility: visible;\n    }\n  }\n\n  .dropdown-list {\n    @include elevation('high');\n\n    background: var(--color-white);\n    border: none;\n    border-radius: $border-radius;\n    display: block;\n    list-style: none;\n    margin-top: 0;\n    min-width: 140px;\n    padding: space(1);\n    position: static;\n    right: -(space(1));\n    top: 100%;\n    z-index: z-index(control);\n\n    .is-open & {\n      display: block;\n    }\n\n    &::before {\n      @include corner;\n\n      border-left: border(thin, var(--color-blue));\n      border-top: border(thin, var(--color-blue));\n      content: '';\n      display: none;\n      right: space(2);\n    }\n  }\n\n  .dropdown-toggle {\n    background: transparent;\n    border: 0;\n    border-bottom: border(medium, transparent);\n    color: var(--color-blue);\n    display: flex;\n    padding-left: space(1);\n\n    &:hover,\n    &:focus {\n      color: var(--color-blue-hover);\n    }\n\n    .has-active & {\n      border-bottom-color: var(--color-blue);\n    }\n  }\n\n  .dropdown-icon {\n    height: icon('default', 'height');\n    position: relative;\n    top: 1px;\n    vertical-align: bottom;\n    width: icon('default', 'width');\n  }\n</style>\n"],"names":["_sfc_main","Chip","value","isFunction","path","sliceIndex","parentPath","$options","_openBlock","_createElementBlock","_mergeProps","$props","_ctx","_createElementVNode","_normalizeClass","_Fragment","_createBlock","_component_router_link","route","navigate","_a","_createTextVNode","_toDisplayString","_component_ll_chip","Dropdown","Icon","NavItem","t","tabs","options","v","i","entries","entry","dataId","element","_hoisted_1","$data","_normalizeStyle","_renderList","item","index","_component_NavItem","_createVNode","_component_ll_dropdown","_withCtx","toggle","_component_ll_icon"],"mappings":"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"}