maz-ui 4.0.0-alpha.2 → 4.0.0-alpha.4

package/dist/components/MazDropzone.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazDropzone.mjs","sources":["../../src/components/MazDropzone.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DropzoneFile, DropzoneOptions } from 'dropzone'\n\nimport {\n  type ComponentPublicInstance,\n  computed,\n  defineAsyncComponent,\n  defineComponent,\n  onBeforeUnmount,\n  onMounted,\n  type PropType,\n  ref,\n} from 'vue'\n\nconst MazSpinner = defineAsyncComponent(() => import('@components/MazSpinner.vue'))\n\nfunction dropzoneFix<T>(component: T): T {\n  return (component as any).default ?? component\n}\n\nexport interface MazDropzoneOptions extends DropzoneOptions {\n  dictFilesDescriptions?: string\n  autoRemoveOnError?: boolean\n}\n\nexport interface MazDropzoneFile extends DropzoneFile {\n  manuallyAdded?: boolean\n}\n\nexport interface IMazDropzone extends Dropzone {\n  options: MazDropzoneOptions\n}\n\nexport interface MazDropzoneInstance extends ComponentPublicInstance {\n  manuallyAddFile: (file: DropzoneFile, fileUrl: string) => void\n  setOption: (option: string, value: unknown) => IMazDropzone['options']\n  processQueue: IMazDropzone['processQueue']\n  removeFile: IMazDropzone['removeFile']\n  removeAllFiles: IMazDropzone['removeAllFiles']\n  destroy: IMazDropzone['destroy']\n  disable: IMazDropzone['disable']\n  enable: IMazDropzone['enable']\n  accept: IMazDropzone['accept']\n  addFile: IMazDropzone['addFile']\n  resizeImage: IMazDropzone['resizeImage']\n  cancelUpload: IMazDropzone['cancelUpload']\n  getAcceptedFiles: () => MazDropzoneFile[]\n  getRejectedFiles: () => MazDropzoneFile[]\n  getFilesWithStatus: IMazDropzone['getFilesWithStatus']\n  getQueuedFiles: IMazDropzone['getQueuedFiles']\n  getUploadingFiles: IMazDropzone['getUploadingFiles']\n  getAddedFiles: IMazDropzone['getAddedFiles']\n  getActiveFiles: IMazDropzone['getActiveFiles']\n}\n\nconst previewTemplate = `<div class=\"dz-preview dz-file-preview maz-flex-1\">\n  <div class=\"dz-image\">\n      <div data-dz-thumbnail-bg></div>\n  </div>\n  <div class=\"dz-details\">\n      <div class=\"dz-filename\"><span data-dz-name></span></div>\n      <div class=\"dz-size\"><span data-dz-size></span></div>\n  </div>\n  <div class=\"dz-progress\">\n    <span class=\"dz-upload\" data-dz-uploadprogress></span>\n  </div>\n  <div class=\"dz-success-mark\">\n    <svg class=\"material-icons\" xmlns=\"http://www.w3.org/2000/svg\" height=\"6rem\" viewBox=\"0 0 24 24\" width=\"6rem\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\"/></svg>\n  </div>\n  <div class=\"dz-error-mark\">\n    <svg class=\"material-icons\" xmlns=\"http://www.w3.org/2000/svg\" height=\"6rem\" viewBox=\"0 0 24 24\" width=\"6rem\" fill=\"currentColor\"><path d=\"M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"/></svg>\n  </div>\n</div>`\n\nexport default defineComponent({\n  name: 'MazDropzone',\n  components: { MazSpinner },\n  props: {\n    options: { type: Object as PropType<MazDropzoneOptions>, required: true },\n    height: {\n      type: [Number, String] as PropType<number | string>,\n      default: '245px',\n    },\n    width: {\n      type: [Number, String] as PropType<number | string>,\n      default: '100%',\n    },\n    noDestroyOnUnmount: { type: Boolean, default: false },\n  },\n  emits: [\n    'thumbnail',\n    'error',\n    'drop',\n    'dragstart',\n    'dragend',\n    'dragenter',\n    'dragover',\n    'dragleave',\n    'paste',\n    'addedfile',\n    'addedfiles',\n    'removedfile',\n    'success',\n    'processing',\n    'processingmultiple',\n    'uploadprogress',\n    'totaluploadprogress',\n    'sending',\n    'sendingmultiple',\n    'canceled',\n    'canceledmultiple',\n    'complete',\n    'completemultiple',\n    'maxfilesexceeded',\n    'maxfilesreached',\n    'queuecomplete',\n    'reset',\n  ],\n  setup(props, { emit }) {\n    const ButtonElement = ref<HTMLButtonElement>()\n    const dropzoneReady = ref(false)\n    let dropzone: IMazDropzone\n    const dropzoneOptions = ref<MazDropzoneOptions>()\n\n    const dropzoneStyle = computed(() => ({\n      width: typeof props.width === 'number' ? `${props.width}px` : props.width,\n      height: typeof props.height === 'number' ? `${props.height}px` : props.height,\n    }))\n\n    const setOption = (option: string, value: unknown): MazDropzoneOptions => {\n      dropzone.options = {\n        ...dropzone.options,\n        [option]: value,\n      }\n      return dropzone.options\n    }\n    const manuallyAddFile: MazDropzoneInstance['manuallyAddFile'] = (file, fileUrl) => {\n      dropzone.emit('addedfile', file)\n      dropzone.emit('thumbnail', file, fileUrl)\n      dropzone.files.push(file)\n    }\n    const removeAllFiles: MazDropzoneInstance['removeAllFiles'] = shouldRemoveAllFiles =>\n      dropzone.removeAllFiles(shouldRemoveAllFiles)\n    const processQueue: MazDropzoneInstance['processQueue'] = () => dropzone.processQueue()\n    const destroy: MazDropzoneInstance['destroy'] = () => dropzone.destroy()\n    const disable: MazDropzoneInstance['disable'] = () => dropzone.disable()\n    const enable: MazDropzoneInstance['enable'] = () => dropzone.enable()\n    const accept: MazDropzoneInstance['accept'] = (file, done) => dropzone.accept(file, done)\n    const addFile: MazDropzoneInstance['addFile'] = file => dropzone.addFile(file)\n    const resizeImage: MazDropzoneInstance['resizeImage'] = (\n      file,\n      width,\n      height,\n      resizeMethod,\n      callback,\n    ) => dropzone.resizeImage(file, width, height, resizeMethod, callback)\n    const cancelUpload: MazDropzoneInstance['cancelUpload'] = file =>\n      dropzone.cancelUpload(file)\n    const getAcceptedFiles: MazDropzoneInstance['getAcceptedFiles'] = () =>\n      dropzone.getAcceptedFiles() as MazDropzoneFile[]\n    const getRejectedFiles: MazDropzoneInstance['getRejectedFiles'] = () =>\n      dropzone.getRejectedFiles() as MazDropzoneFile[]\n    const getFilesWithStatus: MazDropzoneInstance['getFilesWithStatus'] = () =>\n      dropzone.getFilesWithStatus(status)\n    const getQueuedFiles: MazDropzoneInstance['getQueuedFiles'] = () => dropzone.getQueuedFiles()\n    const getUploadingFiles: MazDropzoneInstance['getUploadingFiles'] = () =>\n      dropzone.getUploadingFiles()\n    const getAddedFiles: MazDropzoneInstance['getAddedFiles'] = () => dropzone.getAddedFiles()\n    const getActiveFiles: MazDropzoneInstance['getActiveFiles'] = () => dropzone.getActiveFiles()\n\n    const thumbnail: DropzoneOptions['thumbnail'] = (file: MazDropzoneFile, dataUrl) => {\n      emit('thumbnail', { file, dataUrl })\n      let thumbnailElement: HTMLImageElement\n      file.previewElement.classList.remove('dz-file-preview')\n      const ref = file.previewElement.querySelectorAll('[data-dz-thumbnail-bg]')\n\n      ref.forEach((r: Element) => {\n        thumbnailElement = r as HTMLImageElement\n        thumbnailElement.alt = file.name\n        thumbnailElement.style.backgroundImage = `url('${dataUrl}')`\n      })\n\n      if (file.status === 'success')\n        dropzone.emit('complete', file)\n    }\n\n    const error: DropzoneOptions['error'] = (file, message, xhr) => {\n      emit('error', { file, message, xhr })\n      if (dropzone.options.autoRemoveOnError) {\n        setTimeout(() => dropzone.removeFile(file), 3000)\n      }\n    }\n\n    const errorMultiple: DropzoneOptions['errormultiple'] = (files, message, xhr) => {\n      emit('error', { files, message, xhr })\n      if (dropzone.options.autoRemoveOnError) {\n        setTimeout(() => {\n          for (const file of files) dropzone.removeFile(file)\n        }, 3000)\n      }\n    }\n\n    onMounted(async () => {\n      const defaultOptions: MazDropzoneOptions = {\n        parallelUploads: props.options.maxFiles,\n        previewTemplate,\n        addRemoveLinks: true,\n      }\n\n      if (ButtonElement.value) {\n        const { default: DropzoneJs } = await import('dropzone')\n\n        const Constructor = dropzoneFix(DropzoneJs)\n\n        dropzone = new Constructor(ButtonElement.value, {\n          ...defaultOptions,\n          ...props.options,\n        })\n\n        if (dropzone) {\n          dropzoneOptions.value = dropzone.options as MazDropzoneOptions\n\n          dropzoneReady.value = true\n\n          /**\n           * Dropzone Events\n           */\n\n          dropzone.on('thumbnail', thumbnail)\n          dropzone.on('error', error)\n          dropzone.on('errormultiple', errorMultiple)\n          dropzone.on('drop', (e: DragEvent) => emit('drop', e))\n          dropzone.on('dragstart', (e: DragEvent) => emit('dragstart', e))\n          dropzone.on('dragend', (e: DragEvent) => emit('dragend', e))\n          dropzone.on('dragenter', (e: DragEvent) => emit('dragenter', e))\n          dropzone.on('dragover', (e: DragEvent) => emit('dragover', e))\n          dropzone.on('dragleave', (e: DragEvent) => emit('dragleave', e))\n          dropzone.on('paste', (e: DragEvent) => emit('paste', e))\n          dropzone.on('addedfile', (file: DropzoneFile) => emit('addedfile', file))\n          dropzone.on('addedfiles', (files: DropzoneFile[]) => emit('addedfiles', files))\n          dropzone.on('removedfile', (file: DropzoneFile) => emit('removedfile', file))\n          dropzone.on(\n            'success',\n            (file: DropzoneFile, response: Record<string, unknown> | string) =>\n              emit('success', { file, response }),\n          )\n          dropzone.on('successmultiple', (files: DropzoneFile[], responseText: string) =>\n            emit('success', { files, responseText }))\n          dropzone.on('processing', (file: DropzoneFile) => emit('processing', file))\n          dropzone.on('processingmultiple', (files: DropzoneFile[]) =>\n            emit('processingmultiple', files))\n          dropzone.on(\n            'uploadprogress',\n            (file: DropzoneFile, progress: number, bytesSent: number) =>\n              emit('uploadprogress', { file, progress, bytesSent }),\n          )\n          dropzone.on(\n            'totaluploadprogress',\n            (totalProgress: number, totalBytes: number, totalBytesSent: number) =>\n              emit('totaluploadprogress', {\n                totalProgress,\n                totalBytes,\n                totalBytesSent,\n              }),\n          )\n          dropzone.on('sending', (file: DropzoneFile, xhr: XMLHttpRequest, formData: FormData) =>\n            emit('sending', { file, xhr, formData }))\n          dropzone.on(\n            'sendingmultiple',\n            (files: DropzoneFile[], xhr: XMLHttpRequest, formData: FormData) =>\n              emit('sendingmultiple', { files, xhr, formData }),\n          )\n          dropzone.on('canceled', (file: DropzoneFile) => emit('canceled', file))\n          dropzone.on('canceledmultiple', (files: DropzoneFile[]) =>\n            emit('canceledmultiple', files))\n          dropzone.on('complete', (file: DropzoneFile) => emit('complete', file))\n          dropzone.on('completemultiple', (files: DropzoneFile[]) =>\n            emit('completemultiple', files))\n          dropzone.on('maxfilesexceeded', (file: DropzoneFile) => emit('maxfilesexceeded', file))\n          dropzone.on('maxfilesreached', (files: DropzoneFile[]) =>\n            emit('maxfilesreached', files))\n          dropzone.on('queuecomplete', () => {\n            if (getAcceptedFiles().every(file => file.manuallyAdded))\n              return\n            emit('queuecomplete')\n          })\n          dropzone.on('reset', () => emit('reset'))\n        }\n      }\n    })\n\n    onBeforeUnmount(() => {\n      if (!props.noDestroyOnUnmount)\n        dropzone.destroy()\n    })\n\n    return {\n      ButtonElement,\n      dropzoneReady,\n      dropzoneOptions,\n      dropzoneStyle,\n      setOption,\n      manuallyAddFile,\n      removeAllFiles,\n      processQueue,\n      destroy,\n      disable,\n      enable,\n      accept,\n      addFile,\n      resizeImage,\n      cancelUpload,\n      getAcceptedFiles,\n      getRejectedFiles,\n      getFilesWithStatus,\n      getQueuedFiles,\n      getUploadingFiles,\n      getAddedFiles,\n      getActiveFiles,\n    }\n  },\n})\n</script>\n\n<template>\n  <button\n    ref=\"ButtonElement\"\n    type=\"button\"\n    name=\"maz-dropzone\"\n    class=\"maz-dropzone m-reset-css\"\n    :style=\"[dropzoneStyle]\"\n  >\n    <template v-if=\"dropzoneReady\">\n      <slot :options=\"dropzoneOptions\">\n        <div class=\"dz-message\">\n          <slot name=\"icon\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              height=\"2em\"\n              width=\"2em\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              class=\"maz-dropzone__main-icon maz-text-normal\"\n              aria-hidden=\"true\"\n            >\n              <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n              <path\n                d=\"M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3zM8 13h2.55v3h2.9v-3H16l-4-4z\"\n              />\n            </svg>\n          </slot>\n          <p class=\"maz-my-2 maz-text-normal\">\n            {{ dropzoneOptions?.dictDefaultMessage }}\n          </p>\n          <p class=\"maz-my-0 maz-text-muted\">\n            {{ dropzoneOptions?.dictFilesDescriptions }}\n          </p>\n        </div>\n      </slot>\n    </template>\n    <MazSpinner v-else />\n  </button>\n</template>\n\n<style lang=\"postcss\">\n  @keyframes passing-through {\n  0% {\n    opacity: 0;\n    transform: translateY(40px);\n  }\n\n  30%,\n  70% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  100% {\n    opacity: 0;\n    transform: translateY(-40px);\n  }\n}\n\n@keyframes slide-in {\n  0% {\n    opacity: 0;\n    transform: translateY(40px);\n  }\n\n  30% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes pulse {\n  0% {\n    transform: scale(1);\n  }\n\n  10% {\n    transform: scale(1.1);\n  }\n\n  20% {\n    transform: scale(1);\n  }\n}\n\n.maz-dropzone {\n  @apply maz-m-0 maz-inline-flex maz-items-center maz-justify-center maz-overflow-auto\n      maz-rounded maz-border maz-border-dashed maz-border-color-light maz-bg-color\n      maz-p-4 maz-text-center maz-outline-none\n      maz-transition-all maz-duration-200 maz-ease-out;\n\n  min-height: 245px;\n\n  &:not(.dz-clickable) {\n    @apply maz-bg-color-light;\n  }\n\n  &.dz-clickable,\n  &.dz-clickable.dz-message,\n  &.dz-clickable.dz-message * {\n    @apply maz-cursor-pointer;\n  }\n\n  & .dz-message {\n    @apply maz-flex maz-flex-col maz-items-center maz-justify-center maz-text-center;\n  }\n\n  &.dz-clickable {\n    &:hover {\n      @apply maz-border-color-lighter maz-bg-color-light;\n\n      & .maz-dropzone__main-icon {\n        @apply maz-text-primary maz-transition-all maz-duration-200 maz-ease-out;\n      }\n    }\n  }\n\n  &.dz-started .dz-message {\n    @apply maz-hidden;\n  }\n\n  &.dz-drag-hover {\n    @apply maz-border-solid;\n\n    & .dz-message {\n      @apply maz-opacity-50;\n    }\n  }\n\n  & .dz-message .dz-button {\n    @apply maz-cursor-pointer maz-border-none maz-bg-transparent maz-p-0;\n  }\n\n  & .dz-details {\n    @apply maz-absolute maz-inset-0 maz-z-20 maz-flex maz-flex-col maz-items-center\n        maz-justify-center maz-rounded maz-px-4 maz-py-8 maz-text-center maz-leading-10 maz-text-white maz-opacity-0;\n\n    background-color: var(--maz-color-primary-alpha);\n    transition: opacity 0.2s linear;\n\n    & .dz-size {\n      & span {\n        @apply maz-text-base maz-text-white;\n      }\n    }\n\n    & .dz-filename {\n      width: 100%;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      overflow: hidden;\n\n      span {\n        color: white;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        overflow: hidden;\n      }\n    }\n  }\n\n  & .dz-image {\n    overflow: hidden;\n    position: relative;\n    display: block;\n    z-index: 10;\n    width: 100%;\n    height: 100%;\n    margin: 0 auto;\n\n    @apply maz-rounded maz-border-color-lighter;\n\n    & img {\n      display: block;\n    }\n\n    & > div[data-dz-thumbnail-bg] {\n      width: inherit;\n      height: inherit;\n      background-size: cover;\n      background-repeat: no-repeat;\n      background-position: center;\n    }\n  }\n\n  & .dz-preview {\n    position: relative;\n    display: inline-block;\n    vertical-align: top;\n    margin: 0;\n    min-height: auto;\n    height: 100%;\n    background: transparent;\n    max-width: 200px;\n    overflow: hidden;\n\n    &:not(:last-child) {\n      margin-right: 0.5rem;\n    }\n\n    &.dz-file-preview {\n      & .dz-image {\n        border-radius: 20px;\n        background: #999;\n        background: linear-gradient(to bottom, #eee, #ddd);\n      }\n\n      & .dz-details {\n        opacity: 1;\n      }\n    }\n\n    &.dz-image-preview {\n      background-color: transparent;\n\n      & .dz-details {\n        transition: opacity 0.2s linear;\n      }\n    }\n\n    & .dz-remove {\n      text-align: center;\n      display: block;\n      cursor: pointer;\n      position: absolute;\n      z-index: 30;\n      color: white;\n      top: inherit;\n      left: 5px;\n      right: 5px;\n      bottom: 5px;\n      padding: 10px 5px;\n      border: 2px white solid;\n      text-decoration: none;\n      text-transform: uppercase;\n      font-size: 0.8rem;\n      opacity: 0;\n      transition: all 300ms ease-in-out;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      overflow: hidden;\n\n      @apply maz-rounded;\n\n      &:hover {\n        @apply maz-bg-white maz-text-primary;\n      }\n    }\n\n    &:hover {\n      z-index: 1000;\n\n      & .dz-details,\n      & .dz-remove {\n        opacity: 1;\n      }\n\n      & .dz-image img {\n        transform: scale(1.05, 1.05);\n        filter: blur(8px);\n      }\n    }\n\n    & .dz-error-message {\n      pointer-events: none;\n      z-index: 1000;\n      position: absolute;\n      display: block;\n      display: none;\n      opacity: 0;\n      transition: opacity 0.3s ease;\n      border-radius: 8px;\n      top: 130px;\n      background: #be2626;\n      background: linear-gradient(to bottom, #be2626, #a92222);\n      padding: 0.5em 1.2em;\n      color: white;\n      margin-left: auto;\n      margin-right: auto;\n      left: 0;\n      width: 100%;\n      text-align: center;\n    }\n\n    & .dz-success-mark,\n    & .dz-error-mark {\n      pointer-events: none;\n      opacity: 0;\n      z-index: 500;\n      position: absolute;\n      display: block;\n      margin-left: auto;\n      margin-top: auto;\n      width: 100%;\n      top: 30%;\n      left: 0;\n\n      @apply maz-flex maz-flex-col maz-items-center maz-justify-center;\n\n      & .material-icons {\n        background-color: var(--maz-color-success-alpha);\n        border-radius: 50%;\n        color: white;\n        font-size: 70px;\n      }\n    }\n\n    & .dz-error-mark {\n      & .material-icons {\n        background-color: var(--maz-color-danger-alpha);\n      }\n    }\n\n    &.dz-success .dz-success-mark {\n      animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);\n    }\n\n    &.dz-error {\n      & .dz-error-message {\n        display: block;\n      }\n\n      & .dz-error-mark {\n        opacity: 1;\n        animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);\n      }\n\n      & .dz-details {\n        background-color: var(--maz-color-danger-alpha);\n      }\n\n      &:hover .dz-error-message {\n        opacity: 1;\n        pointer-events: auto;\n      }\n\n      & .dz-remove:hover {\n        @apply maz-text-danger;\n      }\n    }\n\n    & .dz-progress {\n      opacity: 1;\n      z-index: 1000;\n      pointer-events: none;\n      position: absolute;\n      height: 1rem;\n      top: 50%;\n      margin-top: -0.5rem;\n      transform: scale(1);\n      overflow: visible;\n      width: 50%;\n      left: 25%;\n\n      @apply maz-rounded-full maz-bg-gray-100;\n\n      & .dz-upload {\n        position: absolute;\n        transition: width 300ms ease-in-out;\n\n        @apply maz-absolute maz-inset-0 maz-w-0 maz-rounded-full maz-bg-success;\n      }\n\n      & .progress-title {\n        display: inline-block;\n        position: relative;\n        top: -30px;\n      }\n    }\n\n    &.dz-processing .dz-progress {\n      opacity: 1;\n      transition: all 0.2s linear;\n    }\n\n    &.dz-complete .dz-progress {\n      opacity: 0;\n      transition: opacity 0.4s ease-in;\n    }\n\n    &:not(.dz-processing) .dz-progress {\n      animation: pulse 6s ease infinite;\n    }\n  }\n}\n</style>\n"],"names":["MazSpinner","defineAsyncComponent","dropzoneFix","component","previewTemplate","_sfc_main","defineComponent","props","emit","ButtonElement","ref","dropzoneReady","dropzone","dropzoneOptions","dropzoneStyle","computed","setOption","option","value","manuallyAddFile","file","fileUrl","removeAllFiles","shouldRemoveAllFiles","processQueue","destroy","disable","enable","accept","done","addFile","resizeImage","width","height","resizeMethod","callback","cancelUpload","getAcceptedFiles","getRejectedFiles","getFilesWithStatus","getQueuedFiles","getUploadingFiles","getAddedFiles","getActiveFiles","thumbnail","dataUrl","thumbnailElement","r","error","message","xhr","errorMultiple","files","onMounted","defaultOptions","DropzoneJs","Constructor","e","response","responseText","progress","bytesSent","totalProgress","totalBytes","totalBytesSent","formData","onBeforeUnmount","_resolveComponent","_openBlock","_createElementBlock","_ctx","_renderSlot","_createElementVNode","_hoisted_1","_cache","_hoisted_2","_toDisplayString","_a"],"mappings":"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"}

package/dist/components/MazExpandAnimation.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazExpandAnimation.BEIRlAy-.css');const e=require("vue"),l=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),u=["aria-hidden"],m=e.defineComponent({inheritAttrs:!1,__name:"MazExpandAnimation",props:e.mergeModels({duration:{default:"300ms"},timingFunction:{default:"ease-in-out"}},{modelValue:{type:Boolean},modelModifiers:{}}),emits:["update:modelValue"],setup(d){const t=e.useModel(d,"modelValue"),o=e.ref(!t.value),i=e.ref();function r(){t.value||(o.value=!0)}function s(){t.value&&(o.value=!1)}return e.onMounted(()=>{var n,a;(n=i.value)==null||n.addEventListener("transitionstart",r,!1),(a=i.value)==null||a.addEventListener("transitionend",s,!1)}),e.onUnmounted(()=>{var n,a;(n=i.value)==null||n.removeEventListener("transitionstart",r,!1),(a=i.value)==null||a.removeEventListener("transitionend",s,!1)}),(n,a)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"expandAnimationRef",ref:i,class:e.normalizeClass(["m-expand-animation m-reset-css",{"m-expand-animation--expanded":t.value}]),"aria-hidden":!t.value,role:"region",style:e.normalizeStyle([{"--expand-animation-duration":n.duration,"--expand-animation-timing-function":n.timingFunction}])},[e.createElementVNode("div",e.mergeProps({class:"m-expand-animation__inner"},n.$attrs,{class:{"--overflow-hidden":o.value}}),[e.renderSlot(n.$slots,"default",{},void 0,!0)],16)],14,u))}}),f=l._export_sfc(m,[["__scopeId","data-v-2364df56"]]);exports.default=f;
+//# sourceMappingURL=MazExpandAnimation.cjs.map

package/dist/components/MazExpandAnimation.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazExpandAnimation.cjs","sources":["../../src/components/MazExpandAnimation.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, onUnmounted, ref } from 'vue'\n\nexport interface MazExpandAnimationProps {\n  /**\n   * Duration of the animation in milliseconds\n   * @default '300ms'\n   */\n  duration?: string\n  /**\n   * Timing function of the animation\n   * @default 'ease-in-out'\n   */\n  timingFunction?: string\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nwithDefaults(defineProps<MazExpandAnimationProps>(), {\n  duration: '300ms',\n  timingFunction: 'ease-in-out',\n})\n\nconst isOpen = defineModel<boolean>()\nconst hasOverflowHidden = ref(!isOpen.value)\n\nconst expandAnimationRef = ref<HTMLDivElement>()\n\nfunction onTransitionStart() {\n  if (!isOpen.value) {\n    hasOverflowHidden.value = true\n  }\n}\n\nfunction onTransitionEnd() {\n  if (isOpen.value) {\n    hasOverflowHidden.value = false\n  }\n}\n\nonMounted(() => {\n  expandAnimationRef.value?.addEventListener('transitionstart', onTransitionStart, false)\n  expandAnimationRef.value?.addEventListener('transitionend', onTransitionEnd, false)\n})\n\nonUnmounted(() => {\n  expandAnimationRef.value?.removeEventListener('transitionstart', onTransitionStart, false)\n  expandAnimationRef.value?.removeEventListener('transitionend', onTransitionEnd, false)\n})\n</script>\n\n<template>\n  <div\n    ref=\"expandAnimationRef\"\n    class=\"m-expand-animation m-reset-css\"\n    :class=\"{ 'm-expand-animation--expanded': isOpen }\"\n    :aria-hidden=\"!isOpen\"\n    role=\"region\"\n    :style=\"[{ '--expand-animation-duration': duration, '--expand-animation-timing-function': timingFunction }]\"\n  >\n    <div\n      class=\"m-expand-animation__inner\"\n      v-bind=\"$attrs\"\n      :class=\"{\n        '--overflow-hidden': hasOverflowHidden,\n      }\"\n    >\n      <!-- @slot Default Slot - Display content -->\n      <slot />\n    </div>\n  </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-expand-animation {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows var(--expand-animation-duration) var(--expand-animation-timing-function);\n\n  &__inner.--overflow-hidden {\n    overflow: hidden;\n  }\n\n  &--expanded {\n    grid-template-rows: 1fr;\n  }\n}\n</style>\n"],"names":["isOpen","_useModel","__props","hasOverflowHidden","ref","expandAnimationRef","onTransitionStart","onTransitionEnd","onMounted","_a","_b","onUnmounted"],"mappings":"gcAyBM,MAAAA,EAASC,EAAAA,SAAqBC,EAAA,YAAA,EAC9BC,EAAoBC,EAAAA,IAAI,CAACJ,EAAO,KAAK,EAErCK,EAAqBD,EAAAA,IAAoB,EAE/C,SAASE,GAAoB,CACtBN,EAAO,QACVG,EAAkB,MAAQ,GAC5B,CAGF,SAASI,GAAkB,CACrBP,EAAO,QACTG,EAAkB,MAAQ,GAC5B,CAGFK,OAAAA,EAAAA,UAAU,IAAM,UACdC,EAAAJ,EAAmB,QAAnB,MAAAI,EAA0B,iBAAiB,kBAAmBH,EAAmB,KACjFI,EAAAL,EAAmB,QAAnB,MAAAK,EAA0B,iBAAiB,gBAAiBH,EAAiB,GAAK,CACnF,EAEDI,EAAAA,YAAY,IAAM,UAChBF,EAAAJ,EAAmB,QAAnB,MAAAI,EAA0B,oBAAoB,kBAAmBH,EAAmB,KACpFI,EAAAL,EAAmB,QAAnB,MAAAK,EAA0B,oBAAoB,gBAAiBH,EAAiB,GAAK,CACtF"}

package/dist/components/MazExpandAnimation.mjs

@@ -0,0 +1,49 @@
+import { defineComponent as l, mergeModels as m, useModel as u, ref as r, onMounted as f, onUnmounted as p, openBlock as v, createElementBlock as c, normalizeClass as _, normalizeStyle as x, createElementVNode as E, mergeProps as h, renderSlot as g } from "vue";
+import { _ as M } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
+import '../assets/MazExpandAnimation.BEIRlAy-.css';const A = ["aria-hidden"], y = /* @__PURE__ */ l({
+  inheritAttrs: !1,
+  __name: "MazExpandAnimation",
+  props: /* @__PURE__ */ m({
+    duration: { default: "300ms" },
+    timingFunction: { default: "ease-in-out" }
+  }, {
+    modelValue: { type: Boolean },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(d) {
+    const a = u(d, "modelValue"), i = r(!a.value), t = r();
+    function o() {
+      a.value || (i.value = !0);
+    }
+    function s() {
+      a.value && (i.value = !1);
+    }
+    return f(() => {
+      var e, n;
+      (e = t.value) == null || e.addEventListener("transitionstart", o, !1), (n = t.value) == null || n.addEventListener("transitionend", s, !1);
+    }), p(() => {
+      var e, n;
+      (e = t.value) == null || e.removeEventListener("transitionstart", o, !1), (n = t.value) == null || n.removeEventListener("transitionend", s, !1);
+    }), (e, n) => (v(), c("div", {
+      ref_key: "expandAnimationRef",
+      ref: t,
+      class: _(["m-expand-animation m-reset-css", { "m-expand-animation--expanded": a.value }]),
+      "aria-hidden": !a.value,
+      role: "region",
+      style: x([{ "--expand-animation-duration": e.duration, "--expand-animation-timing-function": e.timingFunction }])
+    }, [
+      E("div", h({ class: "m-expand-animation__inner" }, e.$attrs, {
+        class: {
+          "--overflow-hidden": i.value
+        }
+      }), [
+        g(e.$slots, "default", {}, void 0, !0)
+      ], 16)
+    ], 14, A));
+  }
+}), V = /* @__PURE__ */ M(y, [["__scopeId", "data-v-2364df56"]]);
+export {
+  V as default
+};
+//# sourceMappingURL=MazExpandAnimation.mjs.map

package/dist/components/MazExpandAnimation.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazExpandAnimation.mjs","sources":["../../src/components/MazExpandAnimation.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, onUnmounted, ref } from 'vue'\n\nexport interface MazExpandAnimationProps {\n  /**\n   * Duration of the animation in milliseconds\n   * @default '300ms'\n   */\n  duration?: string\n  /**\n   * Timing function of the animation\n   * @default 'ease-in-out'\n   */\n  timingFunction?: string\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nwithDefaults(defineProps<MazExpandAnimationProps>(), {\n  duration: '300ms',\n  timingFunction: 'ease-in-out',\n})\n\nconst isOpen = defineModel<boolean>()\nconst hasOverflowHidden = ref(!isOpen.value)\n\nconst expandAnimationRef = ref<HTMLDivElement>()\n\nfunction onTransitionStart() {\n  if (!isOpen.value) {\n    hasOverflowHidden.value = true\n  }\n}\n\nfunction onTransitionEnd() {\n  if (isOpen.value) {\n    hasOverflowHidden.value = false\n  }\n}\n\nonMounted(() => {\n  expandAnimationRef.value?.addEventListener('transitionstart', onTransitionStart, false)\n  expandAnimationRef.value?.addEventListener('transitionend', onTransitionEnd, false)\n})\n\nonUnmounted(() => {\n  expandAnimationRef.value?.removeEventListener('transitionstart', onTransitionStart, false)\n  expandAnimationRef.value?.removeEventListener('transitionend', onTransitionEnd, false)\n})\n</script>\n\n<template>\n  <div\n    ref=\"expandAnimationRef\"\n    class=\"m-expand-animation m-reset-css\"\n    :class=\"{ 'm-expand-animation--expanded': isOpen }\"\n    :aria-hidden=\"!isOpen\"\n    role=\"region\"\n    :style=\"[{ '--expand-animation-duration': duration, '--expand-animation-timing-function': timingFunction }]\"\n  >\n    <div\n      class=\"m-expand-animation__inner\"\n      v-bind=\"$attrs\"\n      :class=\"{\n        '--overflow-hidden': hasOverflowHidden,\n      }\"\n    >\n      <!-- @slot Default Slot - Display content -->\n      <slot />\n    </div>\n  </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-expand-animation {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows var(--expand-animation-duration) var(--expand-animation-timing-function);\n\n  &__inner.--overflow-hidden {\n    overflow: hidden;\n  }\n\n  &--expanded {\n    grid-template-rows: 1fr;\n  }\n}\n</style>\n"],"names":["isOpen","_useModel","__props","hasOverflowHidden","ref","expandAnimationRef","onTransitionStart","onTransitionEnd","onMounted","_a","_b","onUnmounted"],"mappings":";;;;;;;;;;;;;;AAyBM,UAAAA,IAASC,EAAqBC,GAAA,YAAA,GAC9BC,IAAoBC,EAAI,CAACJ,EAAO,KAAK,GAErCK,IAAqBD,EAAoB;AAE/C,aAASE,IAAoB;AACvB,MAACN,EAAO,UACVG,EAAkB,QAAQ;AAAA,IAC5B;AAGF,aAASI,IAAkB;AACzB,MAAIP,EAAO,UACTG,EAAkB,QAAQ;AAAA,IAC5B;AAGF,WAAAK,EAAU,MAAM;;AACd,OAAAC,IAAAJ,EAAmB,UAAnB,QAAAI,EAA0B,iBAAiB,mBAAmBH,GAAmB,MACjFI,IAAAL,EAAmB,UAAnB,QAAAK,EAA0B,iBAAiB,iBAAiBH,GAAiB;AAAA,IAAK,CACnF,GAEDI,EAAY,MAAM;;AAChB,OAAAF,IAAAJ,EAAmB,UAAnB,QAAAI,EAA0B,oBAAoB,mBAAmBH,GAAmB,MACpFI,IAAAL,EAAmB,UAAnB,QAAAK,EAA0B,oBAAoB,iBAAiBH,GAAiB;AAAA,IAAK,CACtF;;;;;;;;;;;;;;;;;;"}

package/dist/components/MazFullscreenLoader.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazFullscreenLoader.DTW_WUM6.css');const e=require("vue"),l=require("./MazSpinner.cjs"),n=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),s={key:0},c=e.defineComponent({__name:"MazFullscreenLoader",props:{color:{default:"primary"},size:{default:"3em"},teleportSelector:{default:"body"}},setup(u){function t(){document.documentElement.classList.add("--maz-fullscreen-loader-present")}function r(){document.documentElement.classList.remove("--maz-fullscreen-loader-present")}return e.onMounted(()=>{t()}),e.onUnmounted(()=>{r()}),(o,d)=>(e.openBlock(),e.createBlock(e.Teleport,{to:o.teleportSelector},[e.createElementVNode("div",e.mergeProps({class:"m-fullscreen-loader m-reset-css"},o.$attrs),[e.createVNode(l.default,{color:o.color,size:o.size},null,8,["color","size"]),o.$slots.default?(e.openBlock(),e.createElementBlock("span",s,[e.renderSlot(o.$slots,"default",{},void 0,!0)])):e.createCommentVNode("",!0)],16)],8,["to"]))}}),a=n._export_sfc(c,[["__scopeId","data-v-bc98dd46"]]);exports.default=a;
+//# sourceMappingURL=MazFullscreenLoader.cjs.map

package/dist/components/MazFullscreenLoader.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazFullscreenLoader.cjs","sources":["../../src/components/MazFullscreenLoader.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color } from '@components/types'\nimport MazSpinner from '@components/MazSpinner.vue'\nimport { onMounted, onUnmounted } from 'vue'\n\nconst { color = 'primary', size = '3em', teleportSelector = 'body' } = defineProps<MazFullscreenLoaderProps>()\n\nexport interface MazFullscreenLoaderProps {\n  /** The color of the spinner */\n  color?: Color\n  /** The size of the spinner */\n  size?: string\n  /** The selector to teleport the loader */\n  teleportSelector?: string\n}\n\nfunction addClassToDocument() {\n  document.documentElement.classList.add('--maz-fullscreen-loader-present')\n}\n\nfunction removeClassFromDocument() {\n  document.documentElement.classList.remove('--maz-fullscreen-loader-present')\n}\n\nonMounted(() => {\n  addClassToDocument()\n})\n\nonUnmounted(() => {\n  removeClassFromDocument()\n})\n</script>\n\n<template>\n  <Teleport :to=\"teleportSelector\">\n    <div\n      class=\"m-fullscreen-loader m-reset-css\"\n      v-bind=\"$attrs\"\n    >\n      <MazSpinner :color=\"color\" :size=\"size\" />\n\n      <span v-if=\"$slots.default\">\n        <slot />\n      </span>\n    </div>\n  </Teleport>\n</template>\n\n<style lang=\"postcss\">\n  html.--maz-fullscreen-loader-present {\n  overflow-y: hidden;\n  height: 100vh;\n}\n</style>\n\n<style lang=\"postcss\" scoped>\n.m-fullscreen-loader {\n  @apply maz-fixed maz-inset-0 maz-z-default-backdrop maz-flex maz-flex-col maz-gap-2 maz-bg-overlay maz-text-center maz-backdrop-blur maz-flex-center;\n}\n</style>\n"],"names":["addClassToDocument","removeClassFromDocument","onMounted","onUnmounted"],"mappings":"6XAgBA,SAASA,GAAqB,CACnB,SAAA,gBAAgB,UAAU,IAAI,iCAAiC,CAAA,CAG1E,SAASC,GAA0B,CACxB,SAAA,gBAAgB,UAAU,OAAO,iCAAiC,CAAA,CAG7EC,OAAAA,EAAAA,UAAU,IAAM,CACKF,EAAA,CAAA,CACpB,EAEDG,EAAAA,YAAY,IAAM,CACQF,EAAA,CAAA,CACzB"}

package/dist/components/MazFullscreenLoader.mjs

@@ -0,0 +1,38 @@
+import { defineComponent as l, onMounted as s, onUnmounted as n, openBlock as o, createBlock as a, Teleport as c, createElementVNode as d, mergeProps as m, createVNode as u, createElementBlock as p, renderSlot as i, createCommentVNode as f } from "vue";
+import z from "./MazSpinner.mjs";
+import { _ } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
+import '../assets/MazFullscreenLoader.DTW_WUM6.css';const v = { key: 0 }, k = /* @__PURE__ */ l({
+  __name: "MazFullscreenLoader",
+  props: {
+    color: { default: "primary" },
+    size: { default: "3em" },
+    teleportSelector: { default: "body" }
+  },
+  setup(C) {
+    function t() {
+      document.documentElement.classList.add("--maz-fullscreen-loader-present");
+    }
+    function r() {
+      document.documentElement.classList.remove("--maz-fullscreen-loader-present");
+    }
+    return s(() => {
+      t();
+    }), n(() => {
+      r();
+    }), (e, E) => (o(), a(c, { to: e.teleportSelector }, [
+      d("div", m({ class: "m-fullscreen-loader m-reset-css" }, e.$attrs), [
+        u(z, {
+          color: e.color,
+          size: e.size
+        }, null, 8, ["color", "size"]),
+        e.$slots.default ? (o(), p("span", v, [
+          i(e.$slots, "default", {}, void 0, !0)
+        ])) : f("", !0)
+      ], 16)
+    ], 8, ["to"]));
+  }
+}), y = /* @__PURE__ */ _(k, [["__scopeId", "data-v-bc98dd46"]]);
+export {
+  y as default
+};
+//# sourceMappingURL=MazFullscreenLoader.mjs.map

package/dist/components/MazFullscreenLoader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazFullscreenLoader.mjs","sources":["../../src/components/MazFullscreenLoader.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color } from '@components/types'\nimport MazSpinner from '@components/MazSpinner.vue'\nimport { onMounted, onUnmounted } from 'vue'\n\nconst { color = 'primary', size = '3em', teleportSelector = 'body' } = defineProps<MazFullscreenLoaderProps>()\n\nexport interface MazFullscreenLoaderProps {\n  /** The color of the spinner */\n  color?: Color\n  /** The size of the spinner */\n  size?: string\n  /** The selector to teleport the loader */\n  teleportSelector?: string\n}\n\nfunction addClassToDocument() {\n  document.documentElement.classList.add('--maz-fullscreen-loader-present')\n}\n\nfunction removeClassFromDocument() {\n  document.documentElement.classList.remove('--maz-fullscreen-loader-present')\n}\n\nonMounted(() => {\n  addClassToDocument()\n})\n\nonUnmounted(() => {\n  removeClassFromDocument()\n})\n</script>\n\n<template>\n  <Teleport :to=\"teleportSelector\">\n    <div\n      class=\"m-fullscreen-loader m-reset-css\"\n      v-bind=\"$attrs\"\n    >\n      <MazSpinner :color=\"color\" :size=\"size\" />\n\n      <span v-if=\"$slots.default\">\n        <slot />\n      </span>\n    </div>\n  </Teleport>\n</template>\n\n<style lang=\"postcss\">\n  html.--maz-fullscreen-loader-present {\n  overflow-y: hidden;\n  height: 100vh;\n}\n</style>\n\n<style lang=\"postcss\" scoped>\n.m-fullscreen-loader {\n  @apply maz-fixed maz-inset-0 maz-z-default-backdrop maz-flex maz-flex-col maz-gap-2 maz-bg-overlay maz-text-center maz-backdrop-blur maz-flex-center;\n}\n</style>\n"],"names":["addClassToDocument","removeClassFromDocument","onMounted","onUnmounted"],"mappings":";;;;;;;;;;;AAgBA,aAASA,IAAqB;AACnB,eAAA,gBAAgB,UAAU,IAAI,iCAAiC;AAAA,IAAA;AAG1E,aAASC,IAA0B;AACxB,eAAA,gBAAgB,UAAU,OAAO,iCAAiC;AAAA,IAAA;AAG7E,WAAAC,EAAU,MAAM;AACK,MAAAF,EAAA;AAAA,IAAA,CACpB,GAEDG,EAAY,MAAM;AACQ,MAAAF,EAAA;AAAA,IAAA,CACzB;;;;;;;;;;;;;"}

package/dist/components/MazGallery.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazGallery.ChuEM3_y.css');const e=require("vue"),i=require("../chunks/fullscreen-img.directive.CeREtf7H.cjs"),f=require("../chunks/lazy-img.directive.BeENE6S9.cjs"),v=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),p={class:"m-gallery__wrapper maz-flex maz-flex-1"},z=["alt"],A={key:0,class:"m-gallery__remaining-layer maz-flex maz-bg-overlay maz-flex-center"},b={class:"maz-text-2xl maz-text-white"},B=e.defineComponent({__name:"MazGallery",props:{images:{type:Array,default:()=>[]},imagesShownCount:{type:Number,default:5},noRemaining:{type:Boolean,default:!1},height:{type:[Number,String],default:150},noHeight:{type:Boolean,default:!1},width:{type:[Number,String],default:"100%"},noWidth:{type:Boolean,default:!1},noRadius:{type:Boolean,default:!1},noZoom:{type:Boolean,default:!1},hasEmptyLayer:{type:Boolean,default:!0},lazy:{type:Boolean,default:!0},blur:{type:Boolean,default:!0},scale:{type:Boolean,default:!0},separatorColor:{type:String,default:"transparent"}},setup(t){const a=t,g=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("../chunks/no-photography.BPChQgKp.cjs")));e.onBeforeMount(()=>{a.imagesShownCount>5&&console.warn('[MazUI](m-gallery) The maximum of "images-shown-count" is 5')});const m=e.computed(()=>{const n=a.noWidth,r=a.width,o=a.noHeight,l=a.height;return{...n?{}:{flex:`0 0 ${typeof r}`=="number"?`${r}px`:r,width:typeof r=="number"?`${r}px`:r},...o?{}:{height:typeof l=="number"?`${l}px`:`${l}`,minHeight:typeof l=="number"?`${l}px`:`${l}`}}}),s=e.computed(()=>a.imagesShownCount<=5?a.imagesShownCount:5),c=e.computed(()=>a.images.length-(a.images.length<s.value?a.images.length:s.value)),u=e.computed(()=>a.images.map(n=>typeof n=="object"?{...n,thumbnail:n.thumbnail??n.src}:{src:n,thumbnail:n,alt:void 0})),d=e.computed(()=>u.value.slice(0,s.value)),h=e.computed(()=>u.value.slice(s.value,a.images.length));function y(n){return a.noRemaining?!1:(c.value&&n+1)===d.value.length}return(n,r)=>t.images.length>0||t.hasEmptyLayer?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["m-gallery m-reset-css",{"maz-rounded":!t.noRadius}]),style:e.normalizeStyle([m.value,{"--gallery-separator-color":t.separatorColor}])},[e.createElementVNode("section",p,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.value,(o,l)=>(e.openBlock(),e.createElementBlock("figure",{key:l,class:e.normalizeClass(["m-gallery__item !maz-my-0 maz-flex maz-flex-center",[`m-gallery__item--${l+1}`]])},[e.withDirectives(e.createElementVNode("img",{class:"m-gallery__item__image maz-flex-1",src:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",alt:o.alt,loading:"lazy"},null,8,z),[[e.unref(f.directive),{src:o.thumbnail,disabled:!t.lazy},"bg-image"],[e.unref(i.directive),{src:o.src,alt:o.alt,disabled:t.noZoom||y(l),blurOnHover:t.blur,scaleOnHover:t.scale}]]),y(l)?e.withDirectives((e.openBlock(),e.createElementBlock("div",A,[e.createElementVNode("span",b,"+"+e.toDisplayString(c.value),1)])),[[e.unref(i.directive),{src:o.src,alt:o.alt,disabled:t.noZoom,blurOnHover:!1,scaleOnHover:t.scale}]]):e.createCommentVNode("",!0)],2))),128)),t.hasEmptyLayer&&t.images.length===0?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["empty-layer maz-flex maz-w-full maz-bg-color-light maz-text-normal maz-flex-center",{"maz-rounded-xl":!t.noRadius}]),style:e.normalizeStyle([m.value])},[e.createVNode(e.unref(g),{class:"maz-h-8 maz-w-8"})],6)):e.createCommentVNode("",!0)]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(h.value,(o,l)=>e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:l,class:"m-gallery__hidden"})),[[e.unref(i.directive),{src:o.src,disabled:t.noZoom}]])),128))],6)):e.createCommentVNode("",!0)}}),x=v._export_sfc(B,[["__scopeId","data-v-b484d6ae"]]);exports.default=x;
+//# sourceMappingURL=MazGallery.cjs.map

package/dist/components/MazGallery.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazGallery.cjs","sources":["../../src/components/MazGallery.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { MazGalleryImage } from '@components/types'\nimport { vFullscreenImg } from '@directives/vFullscreenImg'\nimport { vLazyImg } from '@directives/vLazyImg'\nimport { computed, defineAsyncComponent, onBeforeMount, type PropType } from 'vue'\n\nconst props = defineProps({\n  /**\n   *  Array of string or object: `['https://via.placeholder.com/500', 'https://via.placeholder.com/600']` or `[{ slug: 'https://via.placeholder.com/500', alt: 'image descripton' }, { slug: 'https://via.placeholder.com/600', alt: 'image descripton' }]`\n   */\n  images: {\n    type: Array as PropType<MazGalleryImage[]>,\n    default: () => [],\n  },\n  /** Images count shown (max: 5) */\n  imagesShownCount: { type: Number, default: 5 },\n  /** Remove transparent layer with the remain count (ex: +2) */\n  noRemaining: { type: Boolean, default: false },\n  /** Height of gallery */\n  height: { type: [Number, String], default: 150 },\n  /** Remove default height - useful to set height with css */\n  noHeight: { type: Boolean, default: false },\n  /** Width of gallery */\n  width: { type: [Number, String], default: '100%' },\n  /** Remove default width */\n  noWidth: { type: Boolean, default: false },\n  /** Disable the border radius of the gallery */\n  noRadius: { type: Boolean, default: false },\n  /** Disable full size display when clicking on image */\n  noZoom: { type: Boolean, default: false },\n  /** Layer with photography icon when no images is provided */\n  hasEmptyLayer: { type: Boolean, default: true },\n  /** Lazy load image - if false, images are directly loaded */\n  lazy: { type: Boolean, default: true },\n  /** Disable blur effect on image hover */\n  blur: { type: Boolean, default: true },\n  /** Disable scale animation effect on image hover */\n  scale: { type: Boolean, default: true },\n  /** Choose color of borders between images - Should be a CSS color or CSS variable - Ex: `#000` or `var(--maz-color-bg-light)` */\n  separatorColor: { type: String, default: 'transparent' },\n})\n\nconst NoPhotographyIcon = defineAsyncComponent(() => import('@icons/no-photography.svg'))\n\nonBeforeMount(() => {\n  if (props.imagesShownCount > 5)\n\n    console.warn('[MazUI](m-gallery) The maximum of \"images-shown-count\" is 5')\n})\n\nconst sizeStyle = computed(() => {\n  const noWidth = props.noWidth\n  const width = props.width\n  const noHeight = props.noHeight\n  const height = props.height\n\n  return {\n    ...(noWidth\n      ? {}\n      : {\n          flex: `0 0 ${typeof width}` === 'number' ? `${width}px` : width,\n          width: typeof width === 'number' ? `${width}px` : width,\n        }),\n    ...(noHeight\n      ? {}\n      : {\n          height: typeof height === 'number' ? `${height}px` : `${height}`,\n          minHeight: typeof height === 'number' ? `${height}px` : `${height}`,\n        }),\n  }\n})\nconst imagesCount = computed(() => {\n  return props.imagesShownCount <= 5 ? props.imagesShownCount : 5\n})\nconst numberImagesRemaining = computed(() => {\n  return (\n    props.images.length\n    - (props.images.length < imagesCount.value ? props.images.length : imagesCount.value)\n  )\n})\nconst imagesNormalized = computed(() => {\n  return props.images.map(image =>\n    typeof image === 'object'\n      ? { ...image, thumbnail: image.thumbnail ?? image.src }\n      : { src: image, thumbnail: image, alt: undefined },\n  )\n})\nconst imagesShown = computed(() => {\n  return imagesNormalized.value.slice(0, imagesCount.value)\n})\nconst imagesHidden = computed(() => {\n  return imagesNormalized.value.slice(imagesCount.value, props.images.length)\n})\nfunction shouldHaveRemainingLayer(index: number): boolean {\n  if (props.noRemaining)\n    return false\n\n  return (numberImagesRemaining.value && index + 1) === imagesShown.value.length\n}\n</script>\n\n<template>\n  <div\n    v-if=\"images.length > 0 || hasEmptyLayer\"\n    class=\"m-gallery m-reset-css\"\n    :style=\"[sizeStyle, { '--gallery-separator-color': separatorColor }]\"\n    :class=\"{ 'maz-rounded': !noRadius }\"\n  >\n    <section class=\"m-gallery__wrapper maz-flex maz-flex-1\">\n      <figure\n        v-for=\"(image, i) in imagesShown\"\n        :key=\"i\"\n        class=\"m-gallery__item !maz-my-0 maz-flex maz-flex-center\"\n        :class=\"[`m-gallery__item--${i + 1}`]\"\n      >\n        <img\n          v-lazy-img:bg-image=\"{ src: image.thumbnail, disabled: !lazy }\"\n          v-fullscreen-img=\"{\n            src: image.src,\n            alt: image.alt,\n            disabled: noZoom || shouldHaveRemainingLayer(i),\n            blurOnHover: blur,\n            scaleOnHover: scale,\n          }\"\n          class=\"m-gallery__item__image maz-flex-1\"\n          src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n          :alt=\"image.alt\"\n          loading=\"lazy\"\n        >\n        <div\n          v-if=\"shouldHaveRemainingLayer(i)\"\n          v-fullscreen-img=\"{\n            src: image.src,\n            alt: image.alt,\n            disabled: noZoom,\n            blurOnHover: false,\n            scaleOnHover: scale,\n          }\"\n          class=\"m-gallery__remaining-layer maz-flex maz-bg-overlay maz-flex-center\"\n        >\n          <span class=\"maz-text-2xl maz-text-white\">+{{ numberImagesRemaining }}</span>\n        </div>\n      </figure>\n      <div\n        v-if=\"hasEmptyLayer && images.length === 0\"\n        class=\"empty-layer maz-flex maz-w-full maz-bg-color-light maz-text-normal maz-flex-center\"\n        :class=\"{ 'maz-rounded-xl': !noRadius }\"\n        :style=\"[sizeStyle]\"\n      >\n        <NoPhotographyIcon class=\"maz-h-8 maz-w-8\" />\n      </div>\n    </section>\n    <div\n      v-for=\"(image, i) in imagesHidden\"\n      :key=\"i\"\n      v-fullscreen-img=\"{ src: image.src, disabled: noZoom }\"\n      class=\"m-gallery__hidden\"\n    />\n  </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-gallery {\n  @apply maz-relative maz-overflow-hidden maz-flex;\n\n  &__hidden {\n    @apply maz-hidden;\n  }\n\n  &__item {\n    @apply maz-absolute maz-top-0 maz-m-0 maz-h-1/2 maz-w-full\n        maz-overflow-hidden maz-border-l-2 maz-p-0;\n\n    border-color: var(--gallery-separator-color);\n\n    &--1 {\n      left: 0;\n      height: 100%;\n\n      &:not(:last-child) {\n        width: 50%;\n      }\n    }\n\n    &--2 {\n      left: 50%;\n      width: 50%;\n      height: 50%;\n\n      &:last-child {\n        height: 100%;\n      }\n\n      &:nth-last-child(4) {\n        width: 25%;\n      }\n    }\n\n    &--3 {\n      top: 50%;\n      left: 50%;\n      width: 25%;\n\n      &:last-child {\n        width: 50%;\n      }\n\n      &:nth-last-child(3) {\n        top: 0;\n        left: 75%;\n      }\n    }\n\n    &--4 {\n      @apply maz-border-t-2;\n\n      border-color: var(--gallery-separator-color);\n      top: 50%;\n      left: 50%;\n      width: 25%;\n\n      &:last-child {\n        left: 75%;\n        width: 25%;\n      }\n    }\n\n    &--5 {\n      @apply maz-border-t-2;\n\n      border-color: var(--gallery-separator-color);\n      top: 50%;\n      left: 75%;\n      width: 25%;\n    }\n\n    &:first-child {\n      border-left: 0;\n    }\n\n    &--3:last-child,\n    &--3:nth-last-child(2),\n    &--4:last-child,\n    &--5 {\n      @apply maz-border-t-2;\n\n      border-color: var(--gallery-separator-color);\n    }\n\n    &__image {\n      height: 100%;\n      max-width: 100%;\n      width: 100%;\n      background-position: center center;\n      background-size: cover;\n      background-repeat: no-repeat;\n      background-color: hsl(0deg 0% 0% / 50%);\n    }\n  }\n\n  &__remaining-layer {\n    position: absolute;\n    inset: 0;\n\n    a span {\n      color: hsl(0deg 0% 100%);\n      font-size: 2rem;\n    }\n  }\n}\n</style>\n"],"names":["props","__props","NoPhotographyIcon","defineAsyncComponent","onBeforeMount","sizeStyle","computed","noWidth","width","noHeight","height","imagesCount","numberImagesRemaining","imagesNormalized","image","imagesShown","imagesHidden","shouldHaveRemainingLayer","index"],"mappings":"mjCAMA,MAAMA,EAAQC,EAoCRC,EAAoBC,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,uCAA2B,CAAA,CAAC,EAExFC,EAAAA,cAAc,IAAM,CACdJ,EAAM,iBAAmB,GAE3B,QAAQ,KAAK,6DAA6D,CAAA,CAC7E,EAEK,MAAAK,EAAYC,EAAAA,SAAS,IAAM,CAC/B,MAAMC,EAAUP,EAAM,QAChBQ,EAAQR,EAAM,MACdS,EAAWT,EAAM,SACjBU,EAASV,EAAM,OAEd,MAAA,CACL,GAAIO,EACA,CAAA,EACA,CACE,KAAM,OAAO,OAAOC,CAAK,IAAO,SAAW,GAAGA,CAAK,KAAOA,EAC1D,MAAO,OAAOA,GAAU,SAAW,GAAGA,CAAK,KAAOA,CACpD,EACJ,GAAIC,EACA,CAAA,EACA,CACE,OAAQ,OAAOC,GAAW,SAAW,GAAGA,CAAM,KAAO,GAAGA,CAAM,GAC9D,UAAW,OAAOA,GAAW,SAAW,GAAGA,CAAM,KAAO,GAAGA,CAAM,EAAA,CAEzE,CAAA,CACD,EACKC,EAAcL,EAAAA,SAAS,IACpBN,EAAM,kBAAoB,EAAIA,EAAM,iBAAmB,CAC/D,EACKY,EAAwBN,EAAAA,SAAS,IAEnCN,EAAM,OAAO,QACVA,EAAM,OAAO,OAASW,EAAY,MAAQX,EAAM,OAAO,OAASW,EAAY,MAElF,EACKE,EAAmBP,EAAAA,SAAS,IACzBN,EAAM,OAAO,OAClB,OAAOc,GAAU,SACb,CAAE,GAAGA,EAAO,UAAWA,EAAM,WAAaA,EAAM,GAAA,EAChD,CAAE,IAAKA,EAAO,UAAWA,EAAO,IAAK,MAAU,CACrD,CACD,EACKC,EAAcT,EAAAA,SAAS,IACpBO,EAAiB,MAAM,MAAM,EAAGF,EAAY,KAAK,CACzD,EACKK,EAAeV,EAAAA,SAAS,IACrBO,EAAiB,MAAM,MAAMF,EAAY,MAAOX,EAAM,OAAO,MAAM,CAC3E,EACD,SAASiB,EAAyBC,EAAwB,CACxD,OAAIlB,EAAM,YACD,IAEDY,EAAsB,OAASM,EAAQ,KAAOH,EAAY,MAAM,MAAA"}

package/dist/components/MazGallery.mjs

@@ -0,0 +1,125 @@
+import { defineComponent as H, defineAsyncComponent as S, onBeforeMount as R, computed as m, openBlock as r, createElementBlock as s, normalizeClass as c, normalizeStyle as p, createElementVNode as d, Fragment as x, renderList as w, withDirectives as y, unref as i, toDisplayString as $, createCommentVNode as f, createVNode as N } from "vue";
+import { d as g } from "../chunks/fullscreen-img.directive.CrLLYi0D.mjs";
+import { d as k } from "../chunks/lazy-img.directive.DqXA0UFo.mjs";
+import { _ as E } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
+import '../assets/MazGallery.ChuEM3_y.css';const I = { class: "m-gallery__wrapper maz-flex maz-flex-1" }, L = ["alt"], O = {
+  key: 0,
+  class: "m-gallery__remaining-layer maz-flex maz-bg-overlay maz-flex-center"
+}, _ = { class: "maz-text-2xl maz-text-white" }, M = /* @__PURE__ */ H({
+  __name: "MazGallery",
+  props: {
+    /**
+     *  Array of string or object: `['https://via.placeholder.com/500', 'https://via.placeholder.com/600']` or `[{ slug: 'https://via.placeholder.com/500', alt: 'image descripton' }, { slug: 'https://via.placeholder.com/600', alt: 'image descripton' }]`
+     */
+    images: {
+      type: Array,
+      default: () => []
+    },
+    /** Images count shown (max: 5) */
+    imagesShownCount: { type: Number, default: 5 },
+    /** Remove transparent layer with the remain count (ex: +2) */
+    noRemaining: { type: Boolean, default: !1 },
+    /** Height of gallery */
+    height: { type: [Number, String], default: 150 },
+    /** Remove default height - useful to set height with css */
+    noHeight: { type: Boolean, default: !1 },
+    /** Width of gallery */
+    width: { type: [Number, String], default: "100%" },
+    /** Remove default width */
+    noWidth: { type: Boolean, default: !1 },
+    /** Disable the border radius of the gallery */
+    noRadius: { type: Boolean, default: !1 },
+    /** Disable full size display when clicking on image */
+    noZoom: { type: Boolean, default: !1 },
+    /** Layer with photography icon when no images is provided */
+    hasEmptyLayer: { type: Boolean, default: !0 },
+    /** Lazy load image - if false, images are directly loaded */
+    lazy: { type: Boolean, default: !0 },
+    /** Disable blur effect on image hover */
+    blur: { type: Boolean, default: !0 },
+    /** Disable scale animation effect on image hover */
+    scale: { type: Boolean, default: !0 },
+    /** Choose color of borders between images - Should be a CSS color or CSS variable - Ex: `#000` or `var(--maz-color-bg-light)` */
+    separatorColor: { type: String, default: "transparent" }
+  },
+  setup(e) {
+    const t = e, B = S(() => import("../chunks/no-photography.B6pz0xMN.mjs"));
+    R(() => {
+      t.imagesShownCount > 5 && console.warn('[MazUI](m-gallery) The maximum of "images-shown-count" is 5');
+    });
+    const h = m(() => {
+      const l = t.noWidth, o = t.width, n = t.noHeight, a = t.height;
+      return {
+        ...l ? {} : {
+          flex: `0 0 ${typeof o}` == "number" ? `${o}px` : o,
+          width: typeof o == "number" ? `${o}px` : o
+        },
+        ...n ? {} : {
+          height: typeof a == "number" ? `${a}px` : `${a}`,
+          minHeight: typeof a == "number" ? `${a}px` : `${a}`
+        }
+      };
+    }), u = m(() => t.imagesShownCount <= 5 ? t.imagesShownCount : 5), A = m(() => t.images.length - (t.images.length < u.value ? t.images.length : u.value)), z = m(() => t.images.map(
+      (l) => typeof l == "object" ? { ...l, thumbnail: l.thumbnail ?? l.src } : { src: l, thumbnail: l, alt: void 0 }
+    )), v = m(() => z.value.slice(0, u.value)), C = m(() => z.value.slice(u.value, t.images.length));
+    function b(l) {
+      return t.noRemaining ? !1 : (A.value && l + 1) === v.value.length;
+    }
+    return (l, o) => e.images.length > 0 || e.hasEmptyLayer ? (r(), s("div", {
+      key: 0,
+      class: c(["m-gallery m-reset-css", { "maz-rounded": !e.noRadius }]),
+      style: p([h.value, { "--gallery-separator-color": e.separatorColor }])
+    }, [
+      d("section", I, [
+        (r(!0), s(x, null, w(v.value, (n, a) => (r(), s("figure", {
+          key: a,
+          class: c(["m-gallery__item !maz-my-0 maz-flex maz-flex-center", [`m-gallery__item--${a + 1}`]])
+        }, [
+          y(d("img", {
+            class: "m-gallery__item__image maz-flex-1",
+            src: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
+            alt: n.alt,
+            loading: "lazy"
+          }, null, 8, L), [
+            [i(k), { src: n.thumbnail, disabled: !e.lazy }, "bg-image"],
+            [i(g), {
+              src: n.src,
+              alt: n.alt,
+              disabled: e.noZoom || b(a),
+              blurOnHover: e.blur,
+              scaleOnHover: e.scale
+            }]
+          ]),
+          b(a) ? y((r(), s("div", O, [
+            d("span", _, "+" + $(A.value), 1)
+          ])), [
+            [i(g), {
+              src: n.src,
+              alt: n.alt,
+              disabled: e.noZoom,
+              blurOnHover: !1,
+              scaleOnHover: e.scale
+            }]
+          ]) : f("", !0)
+        ], 2))), 128)),
+        e.hasEmptyLayer && e.images.length === 0 ? (r(), s("div", {
+          key: 0,
+          class: c(["empty-layer maz-flex maz-w-full maz-bg-color-light maz-text-normal maz-flex-center", { "maz-rounded-xl": !e.noRadius }]),
+          style: p([h.value])
+        }, [
+          N(i(B), { class: "maz-h-8 maz-w-8" })
+        ], 6)) : f("", !0)
+      ]),
+      (r(!0), s(x, null, w(C.value, (n, a) => y((r(), s("div", {
+        key: a,
+        class: "m-gallery__hidden"
+      })), [
+        [i(g), { src: n.src, disabled: e.noZoom }]
+      ])), 128))
+    ], 6)) : f("", !0);
+  }
+}), W = /* @__PURE__ */ E(M, [["__scopeId", "data-v-b484d6ae"]]);
+export {
+  W as default
+};
+//# sourceMappingURL=MazGallery.mjs.map

package/dist/components/MazGallery.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazGallery.mjs","sources":["../../src/components/MazGallery.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { MazGalleryImage } from '@components/types'\nimport { vFullscreenImg } from '@directives/vFullscreenImg'\nimport { vLazyImg } from '@directives/vLazyImg'\nimport { computed, defineAsyncComponent, onBeforeMount, type PropType } from 'vue'\n\nconst props = defineProps({\n  /**\n   *  Array of string or object: `['https://via.placeholder.com/500', 'https://via.placeholder.com/600']` or `[{ slug: 'https://via.placeholder.com/500', alt: 'image descripton' }, { slug: 'https://via.placeholder.com/600', alt: 'image descripton' }]`\n   */\n  images: {\n    type: Array as PropType<MazGalleryImage[]>,\n    default: () => [],\n  },\n  /** Images count shown (max: 5) */\n  imagesShownCount: { type: Number, default: 5 },\n  /** Remove transparent layer with the remain count (ex: +2) */\n  noRemaining: { type: Boolean, default: false },\n  /** Height of gallery */\n  height: { type: [Number, String], default: 150 },\n  /** Remove default height - useful to set height with css */\n  noHeight: { type: Boolean, default: false },\n  /** Width of gallery */\n  width: { type: [Number, String], default: '100%' },\n  /** Remove default width */\n  noWidth: { type: Boolean, default: false },\n  /** Disable the border radius of the gallery */\n  noRadius: { type: Boolean, default: false },\n  /** Disable full size display when clicking on image */\n  noZoom: { type: Boolean, default: false },\n  /** Layer with photography icon when no images is provided */\n  hasEmptyLayer: { type: Boolean, default: true },\n  /** Lazy load image - if false, images are directly loaded */\n  lazy: { type: Boolean, default: true },\n  /** Disable blur effect on image hover */\n  blur: { type: Boolean, default: true },\n  /** Disable scale animation effect on image hover */\n  scale: { type: Boolean, default: true },\n  /** Choose color of borders between images - Should be a CSS color or CSS variable - Ex: `#000` or `var(--maz-color-bg-light)` */\n  separatorColor: { type: String, default: 'transparent' },\n})\n\nconst NoPhotographyIcon = defineAsyncComponent(() => import('@icons/no-photography.svg'))\n\nonBeforeMount(() => {\n  if (props.imagesShownCount > 5)\n\n    console.warn('[MazUI](m-gallery) The maximum of \"images-shown-count\" is 5')\n})\n\nconst sizeStyle = computed(() => {\n  const noWidth = props.noWidth\n  const width = props.width\n  const noHeight = props.noHeight\n  const height = props.height\n\n  return {\n    ...(noWidth\n      ? {}\n      : {\n          flex: `0 0 ${typeof width}` === 'number' ? `${width}px` : width,\n          width: typeof width === 'number' ? `${width}px` : width,\n        }),\n    ...(noHeight\n      ? {}\n      : {\n          height: typeof height === 'number' ? `${height}px` : `${height}`,\n          minHeight: typeof height === 'number' ? `${height}px` : `${height}`,\n        }),\n  }\n})\nconst imagesCount = computed(() => {\n  return props.imagesShownCount <= 5 ? props.imagesShownCount : 5\n})\nconst numberImagesRemaining = computed(() => {\n  return (\n    props.images.length\n    - (props.images.length < imagesCount.value ? props.images.length : imagesCount.value)\n  )\n})\nconst imagesNormalized = computed(() => {\n  return props.images.map(image =>\n    typeof image === 'object'\n      ? { ...image, thumbnail: image.thumbnail ?? image.src }\n      : { src: image, thumbnail: image, alt: undefined },\n  )\n})\nconst imagesShown = computed(() => {\n  return imagesNormalized.value.slice(0, imagesCount.value)\n})\nconst imagesHidden = computed(() => {\n  return imagesNormalized.value.slice(imagesCount.value, props.images.length)\n})\nfunction shouldHaveRemainingLayer(index: number): boolean {\n  if (props.noRemaining)\n    return false\n\n  return (numberImagesRemaining.value && index + 1) === imagesShown.value.length\n}\n</script>\n\n<template>\n  <div\n    v-if=\"images.length > 0 || hasEmptyLayer\"\n    class=\"m-gallery m-reset-css\"\n    :style=\"[sizeStyle, { '--gallery-separator-color': separatorColor }]\"\n    :class=\"{ 'maz-rounded': !noRadius }\"\n  >\n    <section class=\"m-gallery__wrapper maz-flex maz-flex-1\">\n      <figure\n        v-for=\"(image, i) in imagesShown\"\n        :key=\"i\"\n        class=\"m-gallery__item !maz-my-0 maz-flex maz-flex-center\"\n        :class=\"[`m-gallery__item--${i + 1}`]\"\n      >\n        <img\n          v-lazy-img:bg-image=\"{ src: image.thumbnail, disabled: !lazy }\"\n          v-fullscreen-img=\"{\n            src: image.src,\n            alt: image.alt,\n            disabled: noZoom || shouldHaveRemainingLayer(i),\n            blurOnHover: blur,\n            scaleOnHover: scale,\n          }\"\n          class=\"m-gallery__item__image maz-flex-1\"\n          src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n          :alt=\"image.alt\"\n          loading=\"lazy\"\n        >\n        <div\n          v-if=\"shouldHaveRemainingLayer(i)\"\n          v-fullscreen-img=\"{\n            src: image.src,\n            alt: image.alt,\n            disabled: noZoom,\n            blurOnHover: false,\n            scaleOnHover: scale,\n          }\"\n          class=\"m-gallery__remaining-layer maz-flex maz-bg-overlay maz-flex-center\"\n        >\n          <span class=\"maz-text-2xl maz-text-white\">+{{ numberImagesRemaining }}</span>\n        </div>\n      </figure>\n      <div\n        v-if=\"hasEmptyLayer && images.length === 0\"\n        class=\"empty-layer maz-flex maz-w-full maz-bg-color-light maz-text-normal maz-flex-center\"\n        :class=\"{ 'maz-rounded-xl': !noRadius }\"\n        :style=\"[sizeStyle]\"\n      >\n        <NoPhotographyIcon class=\"maz-h-8 maz-w-8\" />\n      </div>\n    </section>\n    <div\n      v-for=\"(image, i) in imagesHidden\"\n      :key=\"i\"\n      v-fullscreen-img=\"{ src: image.src, disabled: noZoom }\"\n      class=\"m-gallery__hidden\"\n    />\n  </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-gallery {\n  @apply maz-relative maz-overflow-hidden maz-flex;\n\n  &__hidden {\n    @apply maz-hidden;\n  }\n\n  &__item {\n    @apply maz-absolute maz-top-0 maz-m-0 maz-h-1/2 maz-w-full\n        maz-overflow-hidden maz-border-l-2 maz-p-0;\n\n    border-color: var(--gallery-separator-color);\n\n    &--1 {\n      left: 0;\n      height: 100%;\n\n      &:not(:last-child) {\n        width: 50%;\n      }\n    }\n\n    &--2 {\n      left: 50%;\n      width: 50%;\n      height: 50%;\n\n      &:last-child {\n        height: 100%;\n      }\n\n      &:nth-last-child(4) {\n        width: 25%;\n      }\n    }\n\n    &--3 {\n      top: 50%;\n      left: 50%;\n      width: 25%;\n\n      &:last-child {\n        width: 50%;\n      }\n\n      &:nth-last-child(3) {\n        top: 0;\n        left: 75%;\n      }\n    }\n\n    &--4 {\n      @apply maz-border-t-2;\n\n      border-color: var(--gallery-separator-color);\n      top: 50%;\n      left: 50%;\n      width: 25%;\n\n      &:last-child {\n        left: 75%;\n        width: 25%;\n      }\n    }\n\n    &--5 {\n      @apply maz-border-t-2;\n\n      border-color: var(--gallery-separator-color);\n      top: 50%;\n      left: 75%;\n      width: 25%;\n    }\n\n    &:first-child {\n      border-left: 0;\n    }\n\n    &--3:last-child,\n    &--3:nth-last-child(2),\n    &--4:last-child,\n    &--5 {\n      @apply maz-border-t-2;\n\n      border-color: var(--gallery-separator-color);\n    }\n\n    &__image {\n      height: 100%;\n      max-width: 100%;\n      width: 100%;\n      background-position: center center;\n      background-size: cover;\n      background-repeat: no-repeat;\n      background-color: hsl(0deg 0% 0% / 50%);\n    }\n  }\n\n  &__remaining-layer {\n    position: absolute;\n    inset: 0;\n\n    a span {\n      color: hsl(0deg 0% 100%);\n      font-size: 2rem;\n    }\n  }\n}\n</style>\n"],"names":["props","__props","NoPhotographyIcon","defineAsyncComponent","onBeforeMount","sizeStyle","computed","noWidth","width","noHeight","height","imagesCount","numberImagesRemaining","imagesNormalized","image","imagesShown","imagesHidden","shouldHaveRemainingLayer","index"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,UAAMA,IAAQC,GAoCRC,IAAoBC,EAAqB,MAAM,OAAO,uCAA2B,CAAC;AAExF,IAAAC,EAAc,MAAM;AAClB,MAAIJ,EAAM,mBAAmB,KAE3B,QAAQ,KAAK,6DAA6D;AAAA,IAAA,CAC7E;AAEK,UAAAK,IAAYC,EAAS,MAAM;AAC/B,YAAMC,IAAUP,EAAM,SAChBQ,IAAQR,EAAM,OACdS,IAAWT,EAAM,UACjBU,IAASV,EAAM;AAEd,aAAA;AAAA,QACL,GAAIO,IACA,CAAA,IACA;AAAA,UACE,MAAM,OAAO,OAAOC,CAAK,MAAO,WAAW,GAAGA,CAAK,OAAOA;AAAA,UAC1D,OAAO,OAAOA,KAAU,WAAW,GAAGA,CAAK,OAAOA;AAAA,QACpD;AAAA,QACJ,GAAIC,IACA,CAAA,IACA;AAAA,UACE,QAAQ,OAAOC,KAAW,WAAW,GAAGA,CAAM,OAAO,GAAGA,CAAM;AAAA,UAC9D,WAAW,OAAOA,KAAW,WAAW,GAAGA,CAAM,OAAO,GAAGA,CAAM;AAAA,QAAA;AAAA,MAEzE;AAAA,IAAA,CACD,GACKC,IAAcL,EAAS,MACpBN,EAAM,oBAAoB,IAAIA,EAAM,mBAAmB,CAC/D,GACKY,IAAwBN,EAAS,MAEnCN,EAAM,OAAO,UACVA,EAAM,OAAO,SAASW,EAAY,QAAQX,EAAM,OAAO,SAASW,EAAY,MAElF,GACKE,IAAmBP,EAAS,MACzBN,EAAM,OAAO;AAAA,MAAI,OACtB,OAAOc,KAAU,WACb,EAAE,GAAGA,GAAO,WAAWA,EAAM,aAAaA,EAAM,IAAA,IAChD,EAAE,KAAKA,GAAO,WAAWA,GAAO,KAAK,OAAU;AAAA,IACrD,CACD,GACKC,IAAcT,EAAS,MACpBO,EAAiB,MAAM,MAAM,GAAGF,EAAY,KAAK,CACzD,GACKK,IAAeV,EAAS,MACrBO,EAAiB,MAAM,MAAMF,EAAY,OAAOX,EAAM,OAAO,MAAM,CAC3E;AACD,aAASiB,EAAyBC,GAAwB;AACxD,aAAIlB,EAAM,cACD,MAEDY,EAAsB,SAASM,IAAQ,OAAOH,EAAY,MAAM;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/MazIcon.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../chunks/MazIcon.vue_vue_type_script_setup_true_lang.C5NwBerh.cjs");exports.default=e._sfc_main;
+//# sourceMappingURL=MazIcon.cjs.map

package/dist/components/MazIcon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazIcon.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/MazIcon.mjs

@@ -0,0 +1,5 @@
+import { _ as f } from "../chunks/MazIcon.vue_vue_type_script_setup_true_lang.CLoEj0Zf.mjs";
+export {
+  f as default
+};
+//# sourceMappingURL=MazIcon.mjs.map

package/dist/components/MazIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazIcon.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/MazInput.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazInput.C5uUOQLJ.css');const e=require("vue"),M=require("../composables/useInstanceUniqId.cjs"),A=require("../helpers/debounce.cjs"),D=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),L=["for"],T={key:0,class:"m-input-wrapper-left"},F=["id","name","placeholder","aria-label","type","inputmode","disabled","readonly","autocomplete","required"],O={key:1,class:"m-input-wrapper-right"},U=e.defineComponent({inheritAttrs:!1,__name:"MazInput",props:{style:{default:void 0},class:{default:void 0},modelValue:{default:void 0},placeholder:{default:void 0},label:{default:void 0},topLabel:{},assistiveText:{},name:{default:void 0},color:{default:"primary"},type:{default:"text"},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},id:{default:void 0},error:{type:Boolean,default:!1},success:{type:Boolean,default:!1},warning:{type:Boolean,default:!1},hint:{default:void 0},inputClasses:{default:void 0},noBorder:{type:Boolean,default:!1},noRadius:{type:Boolean,default:!1},inputmode:{default:"text"},size:{default:"md"},debounce:{type:[Boolean,Number],default:!1},debounceDelay:{default:500},validButton:{type:Boolean,default:!1},validButtonLoading:{type:Boolean,default:!1},autoFocus:{type:Boolean,default:!1},borderActive:{type:Boolean,default:!1},leftIcon:{type:[String,Function,Object],default:void 0},rightIcon:{type:[String,Function,Object],default:void 0},roundedSize:{default:void 0},block:{type:Boolean},autocomplete:{}},emits:["update:model-value","focus","blur","click","change","input"],setup(b,{emit:y}){const t=b,n=y,d=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./MazIcon.cjs"))),c=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./MazBtn.cjs"))),v=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("../chunks/eye-slash.C65GdgwJ.cjs"))),k=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("../chunks/eye.CzqaR8eU.cjs"))),z=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("../chunks/check._ETzZCli.cjs"))),r=e.ref(!1),l=e.ref(!1),m=e.ref(),p=M.useInstanceUniqId({componentName:"MazInput",providedId:t.id});e.onMounted(()=>{var o;t.autoFocus&&((o=m.value)==null||o.focus())});const f=e.computed(()=>t.type==="password"),h=e.computed(()=>r.value?"text":t.type),g=e.computed(()=>{if(!t.noBorder){if(t.error)return"maz-border-danger";if(t.success)return"maz-border-success";if(t.warning)return"maz-border-warning";if(l.value||t.borderActive){if(t.color==="black")return"maz-border-black";if(t.color==="danger")return"maz-border-danger";if(t.color==="info")return"maz-border-info";if(t.color==="primary")return"maz-border-primary";if(t.color==="secondary")return"maz-border-secondary";if(t.color==="success")return"maz-border-success";if(t.color==="warning")return"maz-border-warning";if(t.color==="white")return"maz-border-white"}return"--default-border"}}),i=e.useSlots(),B=A.debounce(o=>{n("update:model-value",o)},typeof t.debounce=="number"?t.debounce:t.debounceDelay??500);function C(o){if(t.debounce)return B(o);n("update:model-value",o)}const s=e.computed({get:()=>t.modelValue,set:o=>C(o)}),I=e.computed(()=>s.value!==void 0&&s.value!==""),w=e.computed(()=>(!!t.label||!!t.hint)&&(l.value||!!I.value||!!t.placeholder||["date","month","week"].includes(t.type))),V=e.computed(()=>!!t.label||!!t.hint);function N(){return!!i["right-icon"]||f.value||!!i["valid-button"]||t.validButton||!!t.rightIcon}function S(){return!!i["left-icon"]||!!t.leftIcon}function q(o){n("focus",o),l.value=!0}function E(o){n("blur",o),l.value=!1}function $(o){return n("change",o)}function P(o){return n("input",o)}return(o,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["m-input",[{"--is-focused":l.value||o.borderActive,"--should-up":w.value,"--has-label":V.value,"--is-disabled":o.disabled,"--is-readonly":o.readonly,"--has-z-2":o.error||o.warning||o.success,"--has-state":o.error||o.warning||o.success,"--block":o.block},t.class,`--${o.color}`]]),style:e.normalizeStyle(o.style)},[o.topLabel?(e.openBlock(),e.createElementBlock("label",{key:0,for:e.unref(p),class:"m-input-top-label"},e.toDisplayString(o.topLabel),9,L)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["m-input-wrapper m-reset-css",[o.inputClasses,g.value,o.roundedSize?`--rounded-${o.roundedSize}`:{"maz-rounded":!o.noRadius},{"--block":o.block}]])},[S()?(e.openBlock(),e.createElementBlock("div",T,[o.$slots["left-icon"]||o.leftIcon?e.renderSlot(o.$slots,"left-icon",{key:0},()=>[typeof o.leftIcon=="string"?(e.openBlock(),e.createBlock(e.unref(d),{key:0,name:o.leftIcon,class:"maz-text-xl maz-text-muted"},null,8,["name"])):o.leftIcon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.leftIcon),{key:1,class:"maz-text-xl maz-text-muted"})):e.createCommentVNode("",!0)],!0):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["m-input-wrapper-input",[`--${o.size}`,{"--top-label":!!o.topLabel}]])},[e.withDirectives(e.createElementVNode("input",e.mergeProps({id:e.unref(p)},o.$attrs,{ref_key:"input",ref:m,"onUpdate:modelValue":a[0]||(a[0]=u=>s.value=u),name:o.name,placeholder:o.placeholder,"aria-label":o.label||o.placeholder,type:h.value,inputmode:o.inputmode,disabled:o.disabled,readonly:o.readonly,autocomplete:o.autocomplete,required:o.required,class:"m-input-input"},e.toHandlers({blur:E,focus:q,change:$,input:P},!0),{onClick:a[1]||(a[1]=u=>o.$emit("click",u))}),null,16,F),[[e.vModelDynamic,s.value]]),o.label||o.hint?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["m-input-label",[{"maz-text-danger-600":o.error,"maz-text-success-600":o.success,"maz-text-warning-600":o.warning}]])},e.toDisplayString(o.hint||o.label),3)):e.createCommentVNode("",!0)],2),N()?(e.openBlock(),e.createElementBlock("div",O,[o.$slots["right-icon"]||o.rightIcon?e.renderSlot(o.$slots,"right-icon",{key:0},()=>[typeof o.rightIcon=="string"?(e.openBlock(),e.createBlock(e.unref(d),{key:0,name:o.rightIcon,class:"maz-text-xl maz-text-muted"},null,8,["name"])):o.rightIcon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.rightIcon),{key:1,class:"maz-text-xl maz-text-muted"})):e.createCommentVNode("",!0)],!0):e.createCommentVNode("",!0),f.value?(e.openBlock(),e.createBlock(e.unref(c),{key:1,color:"transparent",tabindex:"-1",size:"mini",onClick:a[2]||(a[2]=e.withModifiers(u=>r.value=!r.value,["stop"]))},{default:e.withCtx(()=>[r.value?(e.openBlock(),e.createBlock(e.unref(v),{key:0,class:"maz-text-xl maz-text-muted"})):(e.openBlock(),e.createBlock(e.unref(k),{key:1,class:"maz-text-xl maz-text-muted"}))]),_:1})):e.createCommentVNode("",!0),o.$slots["valid-button"]||o.validButton?e.renderSlot(o.$slots,"valid-button",{key:2},()=>[e.createVNode(e.unref(c),{color:"transparent",disabled:o.disabled,tabindex:"-1",loading:o.validButtonLoading,class:"m-input-valid-button",size:"mini",type:"submit"},{default:e.withCtx(()=>[e.createVNode(e.unref(z),{class:"maz-text-2xl maz-text-normal"})]),_:1},8,["disabled","loading"])],!0):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)],2),o.assistiveText?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["m-input-bottom-text",[{"maz-text-danger-600":o.error,"maz-text-success-600":o.success,"maz-text-warning-600":o.warning,"maz-text-muted":!o.error&&!o.success&&!o.warning}]])},e.toDisplayString(o.assistiveText),3)):e.createCommentVNode("",!0)],6))}}),j=D._export_sfc(U,[["__scopeId","data-v-51071941"]]);exports.default=j;
+//# sourceMappingURL=MazInput.cjs.map

package/dist/components/MazInput.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazInput.cjs","sources":["../../src/components/MazInput.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends ModelValueSimple\">\nimport type { Color, Icon, ModelValueSimple, Size } from '@components/types'\nimport { useInstanceUniqId } from '@composables/useInstanceUniqId'\nimport { debounce as debounceFn } from '@helpers/debounce'\nimport {\n  computed,\n  defineAsyncComponent,\n  type HTMLAttributes,\n  onMounted,\n  ref,\n  useSlots,\n} from 'vue'\n\nexport interface MazInputProps<T = ModelValueSimple> {\n  /** The style of the component */\n  style?: HTMLAttributes['style']\n  /** The class of the component */\n  class?: HTMLAttributes['class']\n  /**\n   * The value of the input\n   * @model\n   */\n  modelValue?: T | undefined\n  /** The placeholder of the input */\n  placeholder?: string\n  /**\n   * The label of the component\n   * This label will be displayed inside the input and will be up when the input is focused\n   */\n  label?: string\n  /**\n   * The top label of the component\n   * This label will be displayed above the input\n   */\n  topLabel?: string\n  /**\n   * The additional text of the component\n   * This text will be displayed below the input\n   */\n  assistiveText?: string\n  /** The attribut name of the input */\n  name?: string\n  /** The color of the component */\n  color?: Color\n  /** The attribut type of the input */\n  type?:\n    | 'text'\n    | 'date'\n    | 'number'\n    | 'tel'\n    | 'search'\n    | 'url'\n    | 'password'\n    | 'month'\n    | 'time'\n    | 'week'\n    | 'email'\n  /** The attribut required of the input */\n  required?: boolean\n  /** The attribut disabled of the input */\n  disabled?: boolean\n  /** The attribut readonly of the input */\n  readonly?: boolean\n  /** The attribut id of the input */\n  id?: string\n  /** Enable error state UI */\n  error?: boolean\n  /** Enable success state UI */\n  success?: boolean\n  /** Enable warning state UI */\n  warning?: boolean\n  /** The hint will replace the label */\n  hint?: string\n  /** The class of the input wrapper div element */\n  inputClasses?: string\n  /** Remove the border of the input */\n  noBorder?: boolean\n  /** Remove the radius of the input */\n  noRadius?: boolean\n  /** The attribut inputmode of the input */\n  inputmode?: HTMLAttributes['inputmode']\n  /** The size of the component */\n  size?: Size\n  /** Enable debounce on input - can be `boolean | number`, if it is a number, it is used for the debounce delay */\n  debounce?: boolean | number\n  /**\n   * The delay of the debounce\n   * @deprecated use debounce instead\n   */\n  debounceDelay?: number\n  /** Display the valid button - this button has type=\"submit\"  */\n  validButton?: boolean\n  /** Display the loading state on the valid button */\n  validButtonLoading?: boolean\n  /** if true the input will be focus on render */\n  autoFocus?: boolean\n  /** if true the component has the colorized border by default, not only on focus */\n  borderActive?: boolean\n  /**\n   * The left icon of the input\n   * `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`\n   */\n  leftIcon?: string | Icon\n  /**\n   * The right icon of the input\n   * `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`\n   */\n  rightIcon?: string | Icon\n  /**\n   * Size radius of the component's border\n   * @values `'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'`\n   */\n  roundedSize?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'\n  /** The input will be displayed in full width */\n  block?: boolean\n  /** The attribut autocomplete of the input */\n  autocomplete?: string\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\nconst props = withDefaults(defineProps<MazInputProps<T>>(), {\n  style: undefined,\n  class: undefined,\n  modelValue: undefined,\n  placeholder: undefined,\n  label: undefined,\n  name: undefined,\n  id: undefined,\n  color: 'primary',\n  type: 'text',\n  required: false,\n  disabled: false,\n  readonly: false,\n  error: false,\n  success: false,\n  warning: false,\n  hint: undefined,\n  inputClasses: undefined,\n  noBorder: false,\n  noRadius: false,\n  inputmode: 'text',\n  size: 'md',\n  debounce: false,\n  /** @deprecated use debounce instead */\n  debounceDelay: 500,\n  validButton: false,\n  validButtonLoading: false,\n  autoFocus: false,\n  borderActive: false,\n  leftIcon: undefined,\n  rightIcon: undefined,\n  roundedSize: undefined,\n})\n\nconst emits = defineEmits<{\n  /**\n   * Event emitted when the input value change\n   * @property {string | number | null | undefined | boolean} value - the new value\n   */\n  'update:model-value': [value?: T]\n  /**\n   * Event emitted when the input is focused\n   * @property {Event} event - focus event\n   */\n  'focus': [event: Event]\n  /**\n   * Event emitted when the input is blurred\n   * @property {Event} event - blur event\n   */\n  'blur': [event: Event]\n  /**\n   * Event emitted when the input is clicked\n   * @property {Event} event - click event\n   */\n  'click': [event: Event]\n  /**\n   * Event emitted when the input is changed\n   * @property {Event} event - change event\n   */\n  'change': [event: Event]\n  /**\n   * Event emitted when the input is changed\n   * @property {Event} event - change event\n   */\n  'input': [event: Event]\n}>()\n\nconst MazIcon = defineAsyncComponent(() => import('@components/MazIcon.vue'))\nconst MazBtn = defineAsyncComponent(() => import('@components/MazBtn.vue'))\n\nconst EyeOffIcon = defineAsyncComponent(() => import('@icons/eye-slash.svg'))\nconst EyeIcon = defineAsyncComponent(() => import('@icons/eye.svg'))\nconst CheckIcon = defineAsyncComponent(() => import('@icons/check.svg'))\n\nconst hasPasswordVisible = ref(false)\nconst isFocused = ref(false)\nconst input = ref<HTMLElement | undefined>()\n\nconst instanceId = useInstanceUniqId({\n  componentName: 'MazInput',\n  providedId: props.id,\n})\n\nonMounted(() => {\n  if (props.autoFocus) {\n    input.value?.focus()\n  }\n})\n\nconst isPasswordType = computed(() => props.type === 'password')\n\nconst inputType = computed(() => (hasPasswordVisible.value ? 'text' : props.type))\n\n// eslint-disable-next-line sonarjs/cognitive-complexity\nconst borderStyle = computed(() => {\n  if (props.noBorder)\n    return undefined\n  if (props.error)\n    return 'maz-border-danger'\n  if (props.success)\n    return 'maz-border-success'\n  if (props.warning)\n    return 'maz-border-warning'\n\n  if (isFocused.value || props.borderActive) {\n    if (props.color === 'black')\n      return 'maz-border-black'\n    if (props.color === 'danger')\n      return 'maz-border-danger'\n    if (props.color === 'info')\n      return 'maz-border-info'\n    if (props.color === 'primary')\n      return 'maz-border-primary'\n    if (props.color === 'secondary')\n      return 'maz-border-secondary'\n    if (props.color === 'success')\n      return 'maz-border-success'\n    if (props.color === 'warning')\n      return 'maz-border-warning'\n    if (props.color === 'white')\n      return 'maz-border-white'\n  }\n  return '--default-border'\n})\n\nconst slots = useSlots()\n\nconst debounceEmitValue = debounceFn(\n  (value?: T) => {\n    emits('update:model-value', value)\n  },\n  typeof props.debounce === 'number' ? props.debounce : props.debounceDelay ?? 500,\n)\n\nfunction emitValue(value?: T) {\n  if (props.debounce)\n    return debounceEmitValue(value)\n  emits('update:model-value', value)\n}\n\nconst model = computed({\n  get: () => props.modelValue,\n  set: (value?: T) => emitValue(value),\n})\n\nconst hasValue = computed(() => model.value !== undefined && model.value !== '')\n\nconst shouldUp = computed(() => {\n  return (\n    (!!props.label || !!props.hint)\n    && (isFocused.value\n      || !!hasValue.value\n      || !!props.placeholder\n      || ['date', 'month', 'week'].includes(props.type))\n  )\n})\n\nconst hasLabel = computed(() => !!props.label || !!props.hint)\n\nfunction hasRightPart(): boolean {\n  return (\n    !!slots['right-icon']\n    || isPasswordType.value\n    || !!slots['valid-button']\n    || props.validButton\n    || !!props.rightIcon\n  )\n}\n\nfunction hasLeftPart(): boolean {\n  return !!slots['left-icon'] || !!props.leftIcon\n}\n\nfunction focus(event: Event) {\n  emits('focus', event)\n  isFocused.value = true\n}\n\nfunction blur(event: Event) {\n  emits('blur', event)\n  isFocused.value = false\n}\n\nfunction change(event: Event) {\n  return emits('change', event)\n}\nfunction emitInputEvent(event: Event) {\n  return emits('input', event)\n}\n</script>\n\n<template>\n  <div\n    class=\"m-input\" :class=\"[\n      {\n        '--is-focused': isFocused || borderActive,\n        '--should-up': shouldUp,\n        '--has-label': hasLabel,\n        '--is-disabled': disabled,\n        '--is-readonly': readonly,\n        '--has-z-2': error || warning || success,\n        '--has-state': error || warning || success,\n        '--block': block,\n      },\n      props.class,\n      `--${color}`,\n    ]\" :style\n  >\n    <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->\n    <label v-if=\"topLabel\" :for=\"instanceId\" class=\"m-input-top-label\">{{ topLabel }}</label>\n\n    <div\n      class=\"m-input-wrapper m-reset-css\"\n      :class=\"[\n        inputClasses,\n        borderStyle,\n        !roundedSize ? { 'maz-rounded': !noRadius } : `--rounded-${roundedSize}`,\n        { '--block': block },\n      ]\"\n    >\n      <div v-if=\"hasLeftPart()\" class=\"m-input-wrapper-left\">\n        <!--\n          @slot left-icon - The icon to display on the left of the input\n        -->\n        <slot v-if=\"$slots['left-icon'] || leftIcon\" name=\"left-icon\">\n          <MazIcon v-if=\"typeof leftIcon === 'string'\" :name=\"leftIcon\" class=\"maz-text-xl maz-text-muted\" />\n          <Component :is=\"leftIcon\" v-else-if=\"leftIcon\" class=\"maz-text-xl maz-text-muted\" />\n        </slot>\n      </div>\n\n      <div class=\"m-input-wrapper-input\" :class=\"[`--${size}`, { '--top-label': !!topLabel }]\">\n        <input\n          :id=\"instanceId\"\n          v-bind=\"$attrs\"\n          ref=\"input\"\n          v-model=\"model\"\n          :name\n          :placeholder\n          :aria-label=\"label || placeholder\"\n          :type=\"inputType\"\n          :inputmode\n          :disabled\n          :readonly\n          :autocomplete\n          :required\n          class=\"m-input-input\"\n          v-on=\"{\n            blur,\n            focus,\n            change,\n            input: emitInputEvent,\n          }\"\n          @click=\"$emit('click', $event)\"\n        >\n\n        <span\n          v-if=\"label || hint\" class=\"m-input-label\" :class=\"[\n            {\n              'maz-text-danger-600': error,\n              'maz-text-success-600': success,\n              'maz-text-warning-600': warning,\n            },\n          ]\"\n        >\n          {{ hint || label }}\n        </span>\n      </div>\n\n      <div v-if=\"hasRightPart()\" class=\"m-input-wrapper-right\">\n        <!--\n          @slot right-icon - The icon to display on the right of the input\n        -->\n        <slot v-if=\"$slots['right-icon'] || rightIcon\" name=\"right-icon\">\n          <MazIcon v-if=\"typeof rightIcon === 'string'\" :name=\"rightIcon\" class=\"maz-text-xl maz-text-muted\" />\n          <Component :is=\"rightIcon\" v-else-if=\"rightIcon\" class=\"maz-text-xl maz-text-muted\" />\n        </slot>\n\n        <MazBtn\n          v-if=\"isPasswordType\" color=\"transparent\" tabindex=\"-1\" size=\"mini\"\n          @click.stop=\"hasPasswordVisible = !hasPasswordVisible\"\n        >\n          <EyeOffIcon v-if=\"hasPasswordVisible\" class=\"maz-text-xl maz-text-muted\" />\n          <EyeIcon v-else class=\"maz-text-xl maz-text-muted\" />\n        </MazBtn>\n\n        <!--\n          @slot valid-button - Replace the valid button by your own\n        -->\n        <slot v-if=\"$slots['valid-button'] || validButton\" name=\"valid-button\">\n          <MazBtn\n            color=\"transparent\" :disabled=\"disabled\" tabindex=\"-1\" :loading=\"validButtonLoading\"\n            class=\"m-input-valid-button\" size=\"mini\" type=\"submit\"\n          >\n            <CheckIcon class=\"maz-text-2xl maz-text-normal\" />\n          </MazBtn>\n        </slot>\n      </div>\n    </div>\n\n    <div\n      v-if=\"assistiveText\" class=\"m-input-bottom-text\" :class=\"[\n        {\n          'maz-text-danger-600': error,\n          'maz-text-success-600': success,\n          'maz-text-warning-600': warning,\n          'maz-text-muted': !error && !success && !warning,\n        },\n      ]\"\n    >\n      {{ assistiveText }}\n    </div>\n  </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-input {\n  @apply maz-inline-flex maz-flex-col maz-align-top maz-items-start;\n\n  &.--block {\n    @apply maz-w-full;\n  }\n\n  &-top-label {\n    @apply maz-mb-2 maz-text-normal;\n  }\n\n  &-bottom-text {\n    @apply maz-mt-1 maz-text-sm;\n  }\n\n  &-wrapper {\n    @apply maz-relative maz-z-1 maz-flex maz-flex-1 maz-overflow-hidden maz-border maz-border-solid maz-bg-color maz-transition-colors maz-duration-300;\n\n    &.--block {\n      @apply maz-w-full;\n    }\n\n    &.--default-border {\n      @apply maz-border-border dark:maz-border-color-lighter;\n    }\n\n    &-input {\n      @apply maz-relative maz-flex maz-w-full maz-max-w-full maz-flex-1 maz-items-center;\n\n      &.--xl {\n        height: calc(4rem - (var(--maz-border-width) * 2));\n\n        & .m-input-input,\n        & .m-input-label {\n          @apply maz-text-xl;\n        }\n      }\n\n      &.--lg {\n        height: calc(3.5rem - (var(--maz-border-width) * 2));\n\n        & .m-input-input,\n        & .m-input-label {\n          @apply maz-text-lg;\n        }\n      }\n\n      &.--md {\n        height: calc(3rem - (var(--maz-border-width) * 2));\n      }\n\n      &.--sm {\n        height: calc(2.5rem - (var(--maz-border-width) * 2));\n\n        & .m-input-input,\n        & .m-input-label {\n          @apply maz-text-sm;\n        }\n      }\n\n      &.--xs {\n        height: calc(2rem - (var(--maz-border-width) * 2));\n\n        & .m-input-input,\n        & .m-input-label {\n          @apply maz-text-xs;\n        }\n      }\n\n      &.--mini {\n        height: calc(1.5rem - (var(--maz-border-width) * 2));\n\n        & .m-input-input,\n        & .m-input-label {\n          @apply maz-text-xs;\n        }\n      }\n    }\n\n    &-right,\n    &-left {\n      @apply maz-relative maz-z-1 maz-flex maz-space-x-1 maz-py-1 maz-flex-center;\n    }\n\n    &-right {\n      @apply maz-pr-2;\n    }\n\n    &-left {\n      @apply maz-pl-2;\n    }\n\n    &.--rounded {\n      &-sm {\n        @apply maz-rounded-sm;\n      }\n\n      &-md {\n        @apply maz-rounded-md;\n      }\n\n      &-lg {\n        @apply maz-rounded;\n      }\n\n      &-xl {\n        @apply maz-rounded-xl;\n      }\n\n      &-full {\n        @apply maz-rounded-full;\n      }\n    }\n  }\n\n  &-input {\n    @apply maz-m-0 maz-h-full maz-w-full maz-appearance-none maz-truncate maz-border-none maz-bg-transparent maz-px-4 maz-py-0 maz-text-normal maz-shadow-none maz-outline-none;\n\n    &:-webkit-autofill,\n    &:-webkit-autofill:hover,\n    &:-webkit-autofill:focus {\n      -webkit-text-fill-color: var(--maz-color-text);\n      box-shadow: 0 0 0 1000px var(--maz-color-primary-50) inset;\n      transition: background-color 5000s ease-in-out 0s;\n    }\n\n    &::placeholder {\n      @apply maz-text-muted;\n    }\n  }\n\n  &-label {\n    @apply maz-pointer-events-none maz-absolute maz-left-3 maz-w-full maz-origin-top-left maz-items-center maz-overflow-hidden maz-truncate maz-whitespace-nowrap maz-text-start maz-leading-6;\n\n    width: calc(100% + 1.3rem);\n    transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n  }\n\n  &:not(.--should-up) {\n    & .m-input-label {\n      width: calc(100% - 0.75rem);\n    }\n  }\n\n  &.--should-up {\n    & .m-input-label {\n      transform: scale(0.8) translateY(-0.65em);\n    }\n  }\n\n  &:not(.--has-state) {\n    @apply maz-text-muted;\n  }\n\n  &.--has-z-2 {\n    & .m-input-wrapper {\n      @apply maz-z-2;\n    }\n  }\n\n  &.--is-readonly {\n    & .m-input-input {\n      @apply maz-cursor-default;\n    }\n  }\n\n  &.--is-disabled {\n    & .m-input-wrapper {\n      @apply maz-bg-color-lighter maz-text-muted;\n    }\n\n    & .m-input-input {\n      @apply maz-cursor-not-allowed maz-text-muted;\n    }\n  }\n\n  &:not(.--is-disabled) {\n    & .m-input-wrapper {\n      @apply dark:maz-bg-color-light;\n    }\n  }\n\n  &.--is-focused {\n    & .m-input-wrapper {\n      @apply maz-z-3;\n    }\n  }\n\n  &.--has-label {\n    .m-input-label {\n      @apply maz-pr-3;\n\n      [dir='rtl'] & {\n        @apply maz-pr-0 maz-pl-3;\n      }\n    }\n\n    .m-input-input {\n      @apply maz-px-3 maz-pt-4;\n    }\n  }\n}\n\nhtml.dark,\n.m-input.dark {\n  & .m-input-input {\n    &:-webkit-autofill,\n    &:-webkit-autofill:hover,\n    &:-webkit-autofill:focus {\n      -webkit-text-fill-color: var(--maz-color-text);\n      box-shadow: 0 0 0 1000px var(--maz-color-bg-lighter) inset;\n      transition: background-color 5000s ease-in-out 0s;\n    }\n  }\n}\n</style>\n"],"names":["props","__props","emits","__emit","MazIcon","defineAsyncComponent","MazBtn","EyeOffIcon","EyeIcon","CheckIcon","hasPasswordVisible","ref","isFocused","input","instanceId","useInstanceUniqId","onMounted","_a","isPasswordType","computed","inputType","borderStyle","slots","useSlots","debounceEmitValue","debounceFn","value","emitValue","model","hasValue","shouldUp","hasLabel","hasRightPart","hasLeftPart","focus","event","blur","change","emitInputEvent"],"mappings":"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"}