{"version":3,"file":"OzBaseSnackbar-a2904070.js","sources":["../../../app/javascript/library/v4/components/OzBaseSnackbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { sanitizeAndCamelCaseTitle } from '@@/bits/sanitize_and_transform_text'\nimport { SnackbarLoadingStatus, SnackbarNotificationType } from '@@/enums'\nimport OzBaseButton from '@@/library/v4/components/OzBaseButton.vue'\nimport OzIcon from '@@/library/v4/components/OzIcon.vue'\nimport OzLoadingSpinnerWithCheckmark from '@@/library/v4/components/OzLoadingSpinnerWithCheckmark.vue'\nimport OzPlainButton, {\n  OzPlainButtonColorScheme,\n  OzPlainButtonSizePreset,\n} from '@@/library/v4/components/OzPlainButton.vue'\nimport type { SnackbarLoadingState } from '@@/types'\n\nwithDefaults(\n  defineProps<{\n    /**\n     * Unique id associated with the snackbar\n     */\n    uid: string\n    /**\n     * Displayed message of the snackbar\n     */\n    message: string\n    /**\n     * Type of snakcbar notification\n     */\n    notificationType?: SnackbarNotificationType\n    /**\n     * Icon to display on the snackbar\n     */\n    iconName?: string\n    /**\n     * Text for clickable action\n     */\n    actionText?: string\n    /**\n     * Dark mode\n     */\n    darkMode?: boolean | 'auto'\n    shouldTruncate?: boolean\n    loadingState?: SnackbarLoadingState\n  }>(),\n  {\n    notificationType: SnackbarNotificationType.success,\n    iconName: undefined,\n    actionText: undefined,\n    darkMode: 'auto',\n    shouldTruncate: false,\n    loadingState: () => ({\n      progress: 0,\n      status: SnackbarLoadingStatus.loading,\n    }),\n  },\n)\n\nconst emit = defineEmits<{\n  (name: 'click', event: MouseEvent): void\n  (name: 'action-text-click', event: MouseEvent): void\n}>()\n\nconst actionTextClick = (event): void => {\n  emit('action-text-click', event)\n}\n</script>\n\n<script lang=\"ts\">\nexport default {}\n</script>\n\n<template>\n  <div v-if=\"actionText\">\n    <div class=\"relative flex\">\n      <OzBaseButton\n        :class=\"[\n          // default styles\n          'w-max max-w-[calc(100vw-64px)] py-2.5 px-3.5 flex items-center rounded-lg mb-2 pointer-events-auto font-sans',\n          (notificationType === SnackbarNotificationType.success ||\n            notificationType === SnackbarNotificationType.spinner) && {\n            'bg-canary-500 hover:bg-canary-400': darkMode === true,\n            'bg-grape-500 hover:bg-grape-600': darkMode === false,\n            'bg-grape-500 hover:bg-grape-600 dark:bg-canary-500 dark:hover:bg-canary-400': darkMode === 'auto',\n          },\n          // error snackbar styles\n          notificationType === SnackbarNotificationType.error && {\n            'bg-scarlet-600 hover:bg-danger-100': darkMode === true,\n            'bg-danger-100 hover:bg-scarlet-600': darkMode === false,\n            'bg-danger-100 hover:bg-scarlet-600 dark:bg-scarlet-600 dark:hover:bg-danger-100': darkMode === 'auto',\n          },\n        ]\"\n        @click=\"$emit('click', $event)\"\n      >\n        <OzIcon\n          v-if=\"iconName\"\n          :class=\"[\n            // default styles\n            'p-1 me-2 rounded-full',\n\n            // success snackbar styles\n            (notificationType === SnackbarNotificationType.success ||\n              notificationType === SnackbarNotificationType.spinner) && {\n              'text-dark-text-100 bg-light-text-400': darkMode === true,\n              'text-light-text-100 bg-dark-text-400': darkMode === false,\n              'text-light-text-100 bg-dark-text-400 dark:text-dark-text-100 dark:bg-light-text-400':\n                darkMode === 'auto',\n            },\n\n            // error snackbar styles\n            notificationType === SnackbarNotificationType.error && {\n              'text-light-text-100': true,\n              'bg-light-text-400': darkMode === true,\n              'bg-dark-text-400': darkMode === false,\n              'bg-dark-text-400 dark:bg-light-text-400': darkMode === 'auto',\n            },\n          ]\"\n          :name=\"iconName\"\n          :size=\"12\"\n        />\n        <OzLoadingSpinnerWithCheckmark\n          v-else-if=\"notificationType === SnackbarNotificationType.spinner\"\n          variation=\"snackbar\"\n          :size=\"20\"\n          :x-spinner-rail=\"true\"\n          :progress=\"loadingState.progress\"\n          :dark-mode=\"darkMode\"\n          :checkmark-icon=\"loadingState.status === SnackbarLoadingStatus.success ? 'checkmark' : 'error'\"\n          :is-checkmark=\"loadingState.status !== SnackbarLoadingStatus.loading\"\n          class=\"me-2\"\n        />\n        <div :class=\"shouldTruncate && 'flex overflow-hidden'\">\n          <span\n            :class=\"[\n              // default styles\n              'text-body-small break-words',\n\n              shouldTruncate && 'truncate',\n\n              // success snackbar styles\n              (notificationType === SnackbarNotificationType.success ||\n                notificationType === SnackbarNotificationType.spinner) && {\n                'text-dark-text-100': darkMode === true,\n                'text-light-text-100': darkMode === false,\n                'text-light-text-100 dark:text-dark-text-100': darkMode === 'auto',\n              },\n\n              // error snackbar styles\n              notificationType === SnackbarNotificationType.error && 'text-light-text-100 font-semibold',\n            ]\"\n            >{{ message }}\n          </span>\n        </div>\n        <p aria-hidden=\"true\" class=\"invisible ms-2\">{{ actionText }}</p>\n      </OzBaseButton>\n      <OzPlainButton\n        :data-testid=\"`snackbar${sanitizeAndCamelCaseTitle(actionText)}`\"\n        :text=\"actionText\"\n        :color-scheme=\"OzPlainButtonColorScheme.Bare\"\n        :size-preset=\"OzPlainButtonSizePreset.Bare\"\n        :class=\"[\n          'absolute top-2.5 end-3.5 pointer-events-auto',\n          'p-0 text-body-small font-semibold',\n          'z-10',\n          {\n            'text-dark-text-200': darkMode === true,\n            'text-light-text-200': darkMode === false,\n            'text-light-text-200 dark:text-dark-text-200': darkMode === 'auto',\n          },\n          {\n            'hover-hover:hover:text-dark-text-100': darkMode === true,\n            'hover-hover:hover:text-light-text-100': darkMode === false,\n            'hover-hover:hover:text-light-text-100 hover-hover:dark:hover:text-dark-text-100': darkMode === 'auto',\n          },\n        ]\"\n        @click.stop.prevent=\"actionTextClick\"\n      />\n    </div>\n  </div>\n  <OzBaseButton\n    v-else\n    :class=\"[\n      // default styles\n      'w-max max-w-[calc(100vw-64px)] py-2.5 px-3.5 flex items-center rounded-lg mb-2 pointer-events-auto font-sans',\n      (notificationType === SnackbarNotificationType.success ||\n        notificationType === SnackbarNotificationType.spinner) && {\n        'bg-canary-500 hover:bg-canary-400': darkMode === true,\n        'bg-grape-500 hover:bg-grape-600': darkMode === false,\n        'bg-grape-500 hover:bg-grape-600 dark:bg-canary-500 dark:hover:bg-canary-400': darkMode === 'auto',\n      },\n      // error snackbar styles\n      notificationType === SnackbarNotificationType.error && {\n        'bg-scarlet-600 hover:bg-danger-100': darkMode === true,\n        'bg-danger-100 hover:bg-scarlet-600': darkMode === false,\n        'bg-danger-100 hover:bg-scarlet-600 dark:bg-scarlet-600 dark:hover:bg-danger-100': darkMode === 'auto',\n      },\n    ]\"\n    @click=\"$emit('click', $event)\"\n  >\n    <OzIcon\n      v-if=\"iconName\"\n      :class=\"[\n        // default styles\n        'p-1 me-2 rounded-full',\n\n        // success snackbar styles\n        (notificationType === SnackbarNotificationType.success ||\n          notificationType === SnackbarNotificationType.spinner) && {\n          'text-dark-text-100 bg-light-text-400': darkMode === true,\n          'text-light-text-100 bg-dark-text-400': darkMode === false,\n          'text-light-text-100 bg-dark-text-400 dark:text-dark-text-100 dark:bg-light-text-400': darkMode === 'auto',\n        },\n\n        // error snackbar styles\n        notificationType === SnackbarNotificationType.error && {\n          'text-light-text-100': true,\n          'bg-light-text-400': darkMode === true,\n          'bg-dark-text-400': darkMode === false,\n          'bg-dark-text-400 dark:bg-light-text-400': darkMode === 'auto',\n        },\n      ]\"\n      :name=\"iconName\"\n      :size=\"12\"\n    />\n    <OzLoadingSpinnerWithCheckmark\n      v-else-if=\"notificationType === SnackbarNotificationType.spinner\"\n      variation=\"snackbar\"\n      :size=\"20\"\n      :x-spinner-rail=\"true\"\n      :progress=\"loadingState.progress\"\n      :dark-mode=\"darkMode\"\n      :checkmark-icon=\"loadingState.status === SnackbarLoadingStatus.success ? 'checkmark' : 'error'\"\n      :is-checkmark=\"loadingState.status !== SnackbarLoadingStatus.loading\"\n      class=\"me-2\"\n    />\n    <div :class=\"shouldTruncate && 'flex overflow-hidden'\">\n      <span\n        :class=\"[\n          // default styles\n          'text-body-small break-words',\n\n          shouldTruncate && 'truncate',\n\n          // success snackbar styles\n          (notificationType === SnackbarNotificationType.success ||\n            notificationType === SnackbarNotificationType.spinner) && {\n            'text-dark-text-100': darkMode === true,\n            'text-light-text-100': darkMode === false,\n            'text-light-text-100 dark:text-dark-text-100': darkMode === 'auto',\n          },\n\n          // error snackbar styles\n          notificationType === SnackbarNotificationType.error && 'text-light-text-100 font-semibold',\n        ]\"\n        >{{ message }}\n      </span>\n    </div>\n  </OzBaseButton>\n</template>\n"],"names":["__default__","event","emit"],"mappings":"uiCAiEA,MAAAA,EAAe,CAAA,8YANUC,GAAgB,CACvCC,EAAK,oBAAqBD,CAAK"}