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

package/dist/chunks/MazTable.vue_vue_type_style_index_0_scoped_cd8655c9_lang.Dj2OkfOV.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazTable.vue_vue_type_style_index_0_scoped_cd8655c9_lang.Dj2OkfOV.mjs","sources":["../../src/components/MazTable.vue"],"sourcesContent":["<script lang=\"ts\">\n/* eslint-disable import/first */\nexport interface HeadersEnriched {\n  label: string\n  key?: string\n  sortable?: boolean\n  hidden?: boolean\n  srOnly?: boolean\n  width?: string\n  maxWidth?: string\n  classes?: ThHTMLAttributes['class']\n  scope?: ThHTMLAttributes['scope']\n  align?: ThHTMLAttributes['align']\n  rowspan?: ThHTMLAttributes['rowspan']\n  colspan?: ThHTMLAttributes['colspan']\n  headers?: ThHTMLAttributes['headers']\n}\n\ntype HeadersNormalized = HeadersEnriched & {\n  thHeaders?: ThHTMLAttributes['headers']\n  sorted?: 'ASC' | 'DESC'\n}\n\nexport type Row<T extends Row<T>> = Record<string, any> & {\n  selected?: boolean\n  action?: (row: T) => unknown\n  classes?: HTMLAttributes['class']\n}\n\nexport type Header = string | HeadersEnriched\n\nexport interface MazTableTranslations {\n  searchByAllLabel?: string\n  searchByPlaceholder?: string\n  searchPlaceholder?: string\n  paginationAllLabel?: string\n  noResults?: string\n  actionHeader?: string\n  paginationRowsPerPage?: string\n  paginationOf?: string\n}\n\nexport interface MazTableProps<T extends Row<T>> {\n  /** class of the table element */\n  tableClass?: HTMLAttributes['class']\n  /** style of the table element */\n  tableStyle?: StyleValue\n  /** v-model of the table - list of selected rows */\n  modelValue?: (string | boolean | number)[]\n  /**\n   * size of the table\n   * @values `'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'mini'`\n   * @default `'md'`\n   */\n  size?: Size\n  /**\n   * Size of the search inputs\n   * @values `'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'mini'`\n   */\n  inputSize?: Size\n  /** title of the table */\n  title?: string\n  /** headers of the table */\n  headers?: Header[]\n  /** allow sort feature to all columns */\n  sortable?: boolean\n  /** align all headers */\n  headersAlign?: ThHTMLAttributes['align']\n  /** rows of the table - type: `Record<string, string | boolean | number>[]` ; */\n  rows?: T[]\n  /** add hover effect on rows */\n  hoverable?: boolean\n  /** enable search feature into the table header */\n  search?: boolean\n  /** disabled search in rows - useful to filtering data yourself or make search request to server */\n  noSearchInRow?: boolean\n  /** placeholder of the search input */\n  searchPlaceholder?: string\n  /** Disabled search by column (remove select input \"search by\") */\n  noSearchBy?: boolean\n  /** placeholder of the search by select */\n  searchByPlaceholder?: string\n  /** label of the search by of all options */\n  searchByAllLabel?: string\n  /** search query in input */\n  searchQuery?: string\n  /** add background color to odd rows */\n  backgroundOdd?: boolean\n  /** add background color to even rows */\n  backgroundEven?: boolean\n  /** add shodow to the table */\n  elevation?: boolean\n  /** no divider between rows */\n  divider?: boolean\n  /** caption of the table */\n  caption?: string\n  /**\n   * caption side\n   * @values `'top' | 'bottom'`\n   */\n  captionSide?: 'top' | 'bottom'\n  /** add pagination into the table footer */\n  pagination?: boolean\n  /** current page of pagination */\n  page?: number\n  /** number of items per page */\n  pageSize?: number\n  /** pages count */\n  totalPages?: number\n  /** label of the pagination all option */\n  paginationAllLabel?: string\n  /** no paginate rows - useful to make paginate request with your server */\n  noPaginateRows?: boolean\n  /** total number of items */\n  totalItems?: number\n  /** loading state */\n  loading?: boolean\n  /** Enable selection of rows */\n  selectable?: boolean\n  /** Enable selection of rows - key of the selected row */\n  selectedKey?: string\n  /**\n   * table layout\n   * @values `'auto' | 'fixed'`\n   */\n  tableLayout?: 'auto' | 'fixed'\n  /** color of the loading bar */\n  color?: Color\n  /**\n   * translations\n   * @default `{ searchByAllLabel: 'All', searchByPlaceholder: 'Search by', searchPlaceholder: 'Search', paginationAllLabel: 'All', noResults: 'No results' }`\n   * @type {Translations}\n   */\n  translations?: MazTableTranslations\n  /**\n   * Size radius of the component's border\n   * @values `'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'`\n   * @default 'lg'\n   */\n  roundedSize?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'\n  /**\n   * Enable scrollable on table\n   * @default `false`\n   */\n  scrollable?: boolean\n}\n\nexport interface MazTableProvide {\n  size: Ref<Size>\n  hoverable: Ref<boolean>\n  backgroundEven: Ref<boolean>\n  backgroundOdd: Ref<boolean>\n}\n\nexport const mazTableKey = 'maz-table' as const\n</script>\n\n<script lang=\"ts\" setup generic=\"T extends Row<T>\">\nimport type { MazSelectOption } from './MazSelect.vue'\nimport type { Color, Size } from './types'\n\nimport {\n  computed,\n  defineAsyncComponent,\n  type HTMLAttributes,\n  onBeforeMount,\n  provide,\n  type Ref,\n  ref,\n  type StyleValue,\n  type ThHTMLAttributes,\n  toRefs,\n  useSlots,\n  watch,\n} from 'vue'\n\nconst props = withDefaults(defineProps<MazTableProps<T>>(), {\n  tableClass: undefined,\n  tableStyle: undefined,\n  modelValue: undefined,\n  title: undefined,\n  size: 'md',\n  rows: undefined,\n  searchQuery: undefined,\n  headers: undefined,\n  headersAlign: 'left',\n  caption: undefined,\n  page: 1,\n  pageSize: 20,\n  totalItems: undefined,\n  selectedKey: undefined,\n  captionSide: 'bottom',\n  tableLayout: undefined,\n  searchPlaceholder: 'Search',\n  searchByPlaceholder: 'Search by',\n  searchByAllLabel: 'All',\n  paginationAllLabel: 'All',\n  color: 'primary',\n  totalPages: undefined,\n  roundedSize: 'lg',\n  scrollable: false,\n})\nconst emits = defineEmits<{\n  /**\n   * emitted when a row is selected\n   * @property {(Row | string | number | boolean)[]} value list of selected rows (if selectedKey is defined, it will be the value of the selectedKey of the row)\n   */\n  (event: 'update:model-value', value: (Row<T> | string | number | boolean)[] | undefined): void\n  /**\n   * emitted when enter a value in the search input\n   * @property {string} searchQuery search query\n   */\n  (event: 'update:search-query', searchQuery: string | undefined): void\n  /**\n   * emitted when the current page of the pagination change\n   * @property {number} page current page\n   */\n  (event: 'update:page', page: number): void\n  /**\n   * emitted when the page size of the pagination change\n   * @property {number} pageSize current page size\n   */\n  (event: 'update:page-size', pageSize: number): void\n}>()\n\nconst MazBtn = defineAsyncComponent(() => import('./MazBtn.vue'))\nconst MazCheckbox = defineAsyncComponent(() => import('./MazCheckbox.vue'))\nconst MazInput = defineAsyncComponent(() => import('./MazInput.vue'))\nconst MazLoadingBar = defineAsyncComponent(() => import('./MazLoadingBar.vue'))\nconst MazSelect = defineAsyncComponent(() => import('./MazSelect.vue'))\nconst MazTableCell = defineAsyncComponent(() => import('./MazTableCell.vue'))\nconst MazTableRow = defineAsyncComponent(() => import('./MazTableRow.vue'))\nconst MazTableTitle = defineAsyncComponent(() => import('./MazTableTitle.vue'))\n\nconst ArrowIcon = defineAsyncComponent(() => import('../../icons/arrow-up.svg'))\nconst ChevronDoubleIcon = defineAsyncComponent(() => import('../../icons/chevron-double-left.svg'))\nconst ChevronIcon = defineAsyncComponent(() => import('../../icons/chevron-left.svg'))\nconst SearchIcon = defineAsyncComponent(() => import('../../icons/magnifying-glass.svg'))\n\nconst defaultTranslations: Required<MazTableTranslations> = {\n  noResults: 'No results',\n  actionHeader: 'Actions',\n  searchByAllLabel: 'All',\n  searchByPlaceholder: 'Search by',\n  searchPlaceholder: 'Search',\n  paginationAllLabel: 'All',\n  paginationRowsPerPage: 'Rows per page',\n  paginationOf: 'of',\n}\n\nconst t = computed<Required<MazTableTranslations>>(() => {\n  const { translations, searchByAllLabel, searchByPlaceholder, searchPlaceholder, paginationAllLabel } = props\n\n  return {\n    ...defaultTranslations,\n    ...translations,\n    searchByAllLabel,\n    searchByPlaceholder,\n    searchPlaceholder,\n    paginationAllLabel,\n  }\n})\n\nconst hasDivider = computed<boolean>(\n  () => props.divider && !props.backgroundEven && !props.backgroundOdd,\n)\n\nconst { size, hoverable, backgroundEven, backgroundOdd } = toRefs(props)\n\nprovide<MazTableProvide>(mazTableKey, {\n  size,\n  hoverable,\n  backgroundEven,\n  backgroundOdd,\n})\n\nconst rowsNormalized = ref<T[]>(getNormalizedRows())\n\nconst isSelectable = computed<boolean>(() => props.selectable || !!props.selectedKey)\n\nconst currentPage = ref(props.page)\nwatch(\n  () => props.page,\n  (value) => {\n    currentPage.value = value\n  },\n)\nconst currentPageModel = computed({\n  get: () => currentPage.value,\n  set: (value) => {\n    currentPage.value = value\n    emits('update:page', value)\n  },\n})\n\nconst pageSizeOptions = computed<MazSelectOption[]>(() => [\n  { label: t.value.paginationAllLabel, value: Number.POSITIVE_INFINITY },\n  { label: 5, value: 5 },\n  { label: 10, value: 10 },\n  { label: 20, value: 20 },\n  { label: 50, value: 50 },\n  { label: 100, value: 100 },\n  { label: 200, value: 200 },\n])\nconst pageSizeModelInternal = ref(props.pageSize)\nwatch(\n  () => props.pageSize,\n  (value) => {\n    pageSizeModelInternal.value = value\n  },\n)\nconst pageSizeModel = computed({\n  get: () => pageSizeModelInternal.value,\n  set: (value) => {\n    pageSizeModelInternal.value = value\n    emits('update:page-size', value)\n  },\n})\n\nconst totalPagesInternal = computed(() => {\n  return props.totalPages\n    ?? (pageSizeModel.value === Number.POSITIVE_INFINITY || !props.rows?.length)\n    ? 1\n    : Math.ceil(props.rows.length / pageSizeModel.value)\n})\n\nfunction firstPage() {\n  currentPageModel.value = 1\n}\nfunction lastPage() {\n  currentPageModel.value = totalPagesInternal.value\n}\n\nfunction previousPage() {\n  currentPageModel.value = currentPageModel.value - 1\n}\nfunction nextPage() {\n  currentPageModel.value = currentPageModel.value + 1\n}\n\nconst rowsOfPage = computed(() => {\n  if (\n    !props.pagination\n    || props.noPaginateRows\n    || pageSizeModel.value === Number.POSITIVE_INFINITY\n  ) {\n    return rowsNormalized.value\n  }\n\n  const start = (currentPage.value - 1) * pageSizeModel.value\n  const end = start + pageSizeModel.value\n\n  return rowsNormalized.value.slice(start, end)\n})\n\nwatch(\n  () => [props.rows, props.modelValue],\n  () => {\n    rowsNormalized.value = getNormalizedRows()\n  },\n)\n\nconst sortedColumnIndex = ref<number>()\nconst sortType = ref<'ASC' | 'DESC'>()\n\nconst headersNormalized = ref<HeadersNormalized[]>(getNormalizedHeaders())\n\nconst searchByKey = ref<string>()\nconst searchByOptions = computed<MazSelectOption[]>(() => [\n  { label: props.searchByAllLabel, value: null },\n  ...headersNormalized.value.map((header) => {\n    return {\n      label: header.label,\n      value: header.key,\n    }\n  }),\n])\n\nconst searchQueryModelInternal = ref(props.searchQuery)\nwatch(\n  () => props.searchQuery,\n  (value) => {\n    searchQueryModelInternal.value = value\n  },\n)\nconst searchQueryModel = computed({\n  get: () => searchQueryModelInternal.value,\n  set: (value) => {\n    searchQueryModelInternal.value = value\n    emits('update:search-query', value)\n  },\n})\n\nfunction getSortedRows(rows: T[]) {\n  return [...rows].sort((a, b) => {\n    if (sortedColumnIndex.value === undefined || sortType.value === undefined)\n      return 0\n\n    const aValue = a[headersNormalized.value[sortedColumnIndex.value].key as string]\n    const bValue = b[headersNormalized.value[sortedColumnIndex.value].key as string]\n\n    // Comparez les valeurs en fonction du type de données\n    if (typeof aValue === 'string' && typeof bValue === 'string') {\n      return sortType.value === 'ASC'\n        ? aValue.localeCompare(bValue)\n        : bValue.localeCompare(aValue)\n    }\n    else {\n      return sortType.value === 'ASC' ? aValue - bValue : bValue - aValue\n    }\n  })\n}\n\nfunction getFilteredRows(rows: T[]) {\n  if (props.noSearchInRow || typeof searchQueryModel.value !== 'string')\n    return rowsOfPage.value\n\n  const query = searchQueryModel.value.toLowerCase()\n\n  return [...rows].filter((row) => {\n    if (searchByKey.value) {\n      return String(row[searchByKey.value]).toLowerCase().includes(query)\n    }\n\n    return Object.values(row).some((value) => {\n      if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {\n        return String(value).toLowerCase().includes(query)\n      }\n\n      return false\n    })\n  })\n}\n\nconst rowsFiltered = computed<T[]>(() => {\n  const filteredResults = getFilteredRows(rowsOfPage.value as T[])\n\n  return getSortedRows(filteredResults as T[])\n})\n\nconst slots = useSlots()\n\nconst hasHeader = computed<boolean>(() => props.search || !!props.title || !!slots.title)\nconst hasFooter = computed<boolean>(() => props.pagination)\n\nfunction getNormalizedHeaders(): HeadersNormalized[] {\n  return (\n    props.headers?.map(header =>\n      typeof header === 'string'\n        ? { label: header, align: props.headersAlign }\n        : { align: props.headersAlign, thHeaders: header.headers, ...header },\n    ) ?? []\n  )\n}\n\nfunction getNormalizedRows(): T[] {\n  return (\n    props.rows?.map(row => ({\n      selected: props.modelValue?.includes(props.selectedKey ? row[props.selectedKey] : row),\n      ...row,\n    })) ?? []\n  )\n}\n\nfunction sortColumn(columnIndex: number) {\n  if (columnIndex === sortedColumnIndex.value) {\n    const sortTypeValue = sortType.value === 'DESC' ? 'ASC' : undefined\n    sortType.value\n        = sortType.value === undefined ? 'DESC' : sortTypeValue\n  }\n  else {\n    sortType.value = 'DESC'\n  }\n  sortedColumnIndex.value = sortType.value === undefined ? undefined : columnIndex\n}\n\nconst allSelected = computed<boolean>({\n  get: () => {\n    return rowsFiltered.value.every(row => row.selected) ?? false\n  },\n  set: selectAll,\n})\n\nfunction selectAll(value: boolean) {\n  for (const row of rowsFiltered.value) {\n    row.selected = value\n  }\n\n  emitValues()\n}\n\nfunction selectRow(value: boolean, index: number) {\n  rowsFiltered.value[index].selected = value\n\n  emitValues()\n}\n\nfunction emitValues(selectedRows?: (T | string | number | boolean)[]) {\n  selectedRows = selectedRows ?? getSelectedRows()\n\n  const rows = selectedRows?.length ? selectedRows : undefined\n\n  emits('update:model-value', rows)\n}\n\nfunction getSelectedRows(): (T | string | number | boolean)[] {\n  // if (props.selectedKey === undefined) {\n  //   return\n  // }\n\n  return rowsFiltered.value\n    .filter(row => row.selected)\n    .map(row => (props.selectedKey ? row[props.selectedKey] : row))\n}\n\nonBeforeMount(() => {\n  const selectedRows = getSelectedRows()\n\n  if (selectedRows?.length) {\n    emitValues(selectedRows)\n  }\n})\n</script>\n\n<template>\n  <div class=\"m-table m-reset-css\" :class=\"{ '--has-header': hasHeader }\">\n    <div v-if=\"hasHeader\" class=\"m-table-header\">\n      <div v-if=\"title || $slots.title\" class=\"m-table-spacer\">\n        <slot name=\"title\">\n          <span class=\"m-table-header-title\">\n            {{ title }}\n          </span>\n        </slot>\n      </div>\n\n      <div v-if=\"search\" class=\"m-table-header-search\">\n        <MazSelect\n          v-if=\"!noSearchBy\"\n          v-model=\"searchByKey\"\n          :rounded-size\n          :color\n          :style=\"{ width: '8rem' }\"\n          :placeholder=\"t.searchByPlaceholder\"\n          :size=\"inputSize ?? size\"\n          :options=\"searchByOptions\"\n        />\n        <MazInput\n          v-model=\"searchQueryModel\"\n          :size=\"inputSize ?? size\"\n          :rounded-size\n          :color\n          :debounce=\"300\"\n          :placeholder=\"t.searchPlaceholder\"\n          :left-icon=\"SearchIcon\"\n        />\n      </div>\n    </div>\n    <div\n      class=\"m-table-wrapper\" :class=\"[`--rounded-${roundedSize}`, {\n        '--scrollable': scrollable,\n      }]\"\n    >\n      <table\n        :class=\"[{ '--elevation': elevation, '--has-layout': tableLayout }, tableClass]\"\n        :style=\"tableStyle\"\n      >\n        <caption v-if=\"caption || $slots.caption\">\n          <!--\n            @slot caption - add caption on top or bottom of the table\n          -->\n          <slot name=\"caption\">\n            {{ caption }}\n          </slot>\n        </caption>\n\n        <thead v-if=\"headersNormalized\">\n          <!--\n            @slot thead - content in thead element\n          -->\n          <slot name=\"thead\">\n            <MazTableRow no-hoverable>\n              <MazTableTitle\n                v-if=\"isSelectable\"\n                align=\"left\"\n                :class=\"`--${size}`\"\n                class=\"m-table-select-column\"\n              >\n                <MazCheckbox v-model=\"allSelected\" size=\"sm\" />\n              </MazTableTitle>\n              <MazTableTitle\n                v-for=\"(header, columnIndex) in headersNormalized\"\n                :key=\"columnIndex\"\n                :scope=\"header.scope\"\n                :align=\"header.align\"\n                :rowspan=\"header.rowspan\"\n                :colspan=\"header.colspan\"\n                :headers=\"header.thHeaders\"\n                :style=\"{ width: header.width, textAlign: header.align }\"\n                class=\"maz-group\"\n                :class=\"[\n                  { '--hidden': header.hidden, '--sortable': header.sortable ?? sortable },\n                  header.classes,\n                  `--${size}`,\n                ]\"\n                @click=\"(header.sortable ?? sortable) && sortColumn(columnIndex)\"\n              >\n                <span :class=\"{ 'maz-sr-only': header.srOnly }\">\n                  <!--\n                  @slot header - replace column header\n                    @binding {Object} header - header data\n                    @binding {String} label - header label\n                -->\n                  <slot name=\"header\" :header=\"header\" :label=\"header.label\">\n                    <!--\n                      @slot header-label-{key} - replace column header label\n                        @binding {Object} header - header data\n                        @binding {String} label - header label\n                    -->\n                    <slot :name=\"`header-label-${header.key}`\" :header=\"header\" :label=\"header.label\">\n                      {{ header.label }}\n                    </slot>\n\n                    <div v-if=\"header.sortable ?? sortable\" class=\"m-table-sort-icon-wrapper\">\n                      <ArrowIcon\n                        class=\"m-table-sort-icon maz-hidden group-hover:maz-block\"\n                        :class=\"{\n                          '--sorted': columnIndex === sortedColumnIndex,\n                          '--up': sortType === 'DESC',\n                          '--down': sortType === 'ASC',\n                        }\"\n                      />\n                    </div>\n                  </slot>\n                </span>\n              </MazTableTitle>\n              <MazTableTitle v-if=\"$slots.actions\" align=\"left\" :class=\"`--${size}`\">\n                <!--\n                  @slot actions-header - replace text of actions header\n                -->\n                <slot name=\"actions-header\">\n                  {{ t.actionHeader }}\n                </slot>\n              </MazTableTitle>\n            </MazTableRow>\n          </slot>\n        </thead>\n\n        <MazLoadingBar v-if=\"loading\" :color=\"color\" class=\"!maz-absolute\" />\n\n        <tbody :class=\"{ '--divider': hasDivider }\">\n          <slot>\n            <template v-if=\"rowsFiltered.length > 0\">\n              <MazTableRow\n                v-for=\"(row, rowIndex) in rowsFiltered\"\n                :key=\"rowIndex\"\n                :class=\"row.classes\"\n                @click=\"row.action && row.action(row)\"\n              >\n                <MazTableCell v-if=\"isSelectable\" class=\"m-table-select-column\">\n                  <!--\n                    @slot select - replace checkbox component\n                      @binding {Object} row - row data\n                      @binding {Boolean} selected - if selected or not\n                  -->\n                  <slot name=\"select\" :row=\"row\" :selected=\"row.selected\">\n                    <MazCheckbox\n                      size=\"sm\"\n                      :model-value=\"row.selected\"\n                      @update:model-value=\"selectRow($event, rowIndex)\"\n                    />\n                  </slot>\n                </MazTableCell>\n                <MazTableCell\n                  v-for=\"({ key, align, classes }, dataIndex) in headersNormalized\"\n                  :key=\"dataIndex\"\n                  :align=\"align\"\n                  :class=\"classes\"\n                >\n                  <!--\n                    @slot cell - replace all row cells\n                      @binding {Object} row - row data\n                      @binding {Boolean} value - cell value\n                  -->\n                  <slot v-if=\"key\" name=\"cell\" :row=\"row\" :value=\"row[key]\">\n                    <!--\n                      @slot cell-{key} - replace row cells of column\n                        @binding {Object} row - row data\n                        @binding {Boolean} value - cell value\n                    -->\n                    <slot :name=\"`cell-${key}`\" :row=\"row\" :value=\"row[key]\">\n                      {{ row[key] }}\n                    </slot>\n                  </slot>\n                </MazTableCell>\n                <MazTableCell v-if=\"$slots.actions\">\n                  <!--\n                    @slot actions - will add actions column\n                      @binding {Object} row - row data\n                  -->\n                  <slot name=\"actions\" :row=\"row\" />\n                </MazTableCell>\n              </MazTableRow>\n            </template>\n            <template v-else>\n              <MazTableRow>\n                <MazTableCell\n                  :colspan=\"\n                    headersNormalized.length + (isSelectable ? 1 : 0) + ($slots.actions ? 1 : 0)\n                  \"\n                >\n                  <!--\n                    @slot no-results - replace no results\n                  -->\n                  <slot name=\"no-results\">\n                    <p class=\"maz-text-center maz-text-muted\">\n                      <!--\n                        @slot no-results-text - replace no results test only\n                      -->\n                      <slot name=\"no-results-text\">\n                        {{ t.noResults }}\n                      </slot>\n                    </p>\n                  </slot>\n                </MazTableCell>\n              </MazTableRow>\n            </template>\n          </slot>\n        </tbody>\n      </table>\n    </div>\n\n    <div v-if=\"hasFooter\" class=\"m-table-footer\">\n      <div class=\"m-table-spacer\" />\n\n      <div v-if=\"pagination\" class=\"m-table-footer-pagination\">\n        <div class=\"m-table-footer-pagination-items-per-page\">\n          <span class=\"maz-hidden maz-text-sm tab-s:maz-block\"> {{ t.paginationRowsPerPage }} </span>\n          <MazSelect\n            v-model=\"pageSizeModel\"\n            :options=\"pageSizeOptions\"\n            :rounded-size\n            :size=\"inputSize ?? size\"\n            :color=\"color\"\n            list-position=\"top\"\n            :style=\"{ width: '5rem' }\"\n          />\n        </div>\n\n        <span v-if=\"totalPagesInternal\" class=\"maz-whitespace-nowrap maz-text-sm\">\n          {{ currentPageModel }} - {{ rowsFiltered.length }} {{ t.paginationOf }} {{ totalPagesInternal }}\n        </span>\n\n        <div class=\"m-table-footer-pagination-buttons\">\n          <MazBtn\n            :disabled=\"currentPageModel === 1\"\n            :size=\"inputSize ?? size\"\n            color=\"transparent\"\n            :rounded-size\n            no-elevation\n            @click=\"firstPage\"\n          >\n            <ChevronDoubleIcon class=\"maz-text-base\" />\n          </MazBtn>\n\n          <MazBtn\n            :disabled=\"currentPageModel === 1\"\n            :size=\"inputSize ?? size\"\n            color=\"transparent\"\n            :rounded-size\n            no-elevation\n            @click=\"previousPage\"\n          >\n            <ChevronIcon class=\"maz-text-base\" />\n          </MazBtn>\n          <MazBtn\n            :disabled=\"currentPageModel === totalPagesInternal\"\n            :size=\"inputSize ?? size\"\n            color=\"transparent\"\n            :rounded-size\n            no-elevation\n            @click=\"nextPage\"\n          >\n            <ChevronIcon class=\"maz-rotate-180 maz-text-base\" />\n          </MazBtn>\n\n          <MazBtn\n            :disabled=\"currentPageModel === totalPagesInternal\"\n            :size=\"inputSize ?? size\"\n            color=\"transparent\"\n            :rounded-size\n            no-elevation\n            @click=\"lastPage\"\n          >\n            <ChevronDoubleIcon class=\"maz-rotate-180 maz-text-base\" />\n          </MazBtn>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-table {\n  @apply maz-relative maz-max-w-full;\n\n  &-header {\n    @apply maz-flex maz-max-w-full maz-items-center maz-justify-between maz-gap-2 maz-bg-color maz-py-2;\n\n    &-search {\n      @apply maz-flex maz-items-center maz-gap-2;\n    }\n\n    &-title {\n      @apply maz-font-semibold;\n    }\n  }\n\n  &-footer {\n    @apply maz-flex maz-max-w-full maz-justify-between maz-gap-2 maz-bg-color maz-p-2;\n\n    &-pagination {\n      @apply maz-flex maz-items-center maz-gap-4;\n\n      &-buttons {\n        @apply maz-flex maz-items-center maz-gap-1;\n      }\n\n      &-items-per-page {\n        @apply maz-flex maz-items-center maz-gap-1;\n      }\n    }\n  }\n\n  &-wrapper {\n    @apply maz-border maz-border-solid maz-border-color-light;\n\n    &.--scrollable {\n      @apply maz-overflow-auto;\n    }\n\n    &:not(.--rounded-none) {\n      @apply maz-rounded-xl;\n    }\n\n    &.--rounded-sm {\n      @apply maz-rounded-sm;\n\n      table {\n        @apply maz-rounded-sm;\n\n        thead tr:hover:first-child {\n          @apply maz-rounded-b-sm;\n\n          th:first-child {\n            @apply maz-rounded-tl-sm;\n          }\n\n          th:last-child {\n            @apply maz-rounded-tr-sm;\n          }\n        }\n\n        tbody tr:hover:last-child {\n          @apply maz-rounded-b-sm;\n\n          td:first-child {\n            @apply maz-rounded-bl-sm;\n          }\n\n          td:last-child {\n            @apply maz-rounded-br-sm;\n          }\n        }\n      }\n    }\n\n    &.--rounded-md {\n      @apply maz-rounded-md;\n\n      table {\n        @apply maz-rounded-md;\n\n        thead tr:hover:first-child {\n          @apply maz-rounded-b-md;\n\n          th:first-child {\n            @apply maz-rounded-tl-md;\n          }\n\n          th:last-child {\n            @apply maz-rounded-tr-md;\n          }\n        }\n\n        tbody tr:hover:last-child {\n          @apply maz-rounded-b-md;\n\n          td:first-child {\n            @apply maz-rounded-bl-md;\n          }\n\n          td:last-child {\n            @apply maz-rounded-br-md;\n          }\n        }\n      }\n    }\n\n    &.--rounded-lg {\n      @apply maz-rounded-lg;\n\n      table {\n        @apply maz-rounded-lg;\n\n        thead tr:hover:first-child {\n          @apply maz-rounded-b-lg;\n\n          th:first-child {\n            @apply maz-rounded-tl-lg;\n          }\n\n          th:last-child {\n            @apply maz-rounded-tr-lg;\n          }\n        }\n\n        tbody tr:hover:last-child {\n          @apply maz-rounded-b-lg;\n\n          td:first-child {\n            @apply maz-rounded-bl-lg;\n          }\n\n          td:last-child {\n            @apply maz-rounded-br-lg;\n          }\n        }\n      }\n    }\n\n    &.--rounded-xl {\n      @apply maz-rounded-xl;\n\n      table {\n        @apply maz-rounded-xl;\n\n        thead tr:hover:first-child {\n          @apply maz-rounded-b-xl;\n\n          th:first-child {\n            @apply maz-rounded-tl-xl;\n          }\n\n          th:last-child {\n            @apply maz-rounded-tr-xl;\n          }\n        }\n\n        tbody tr:hover:last-child {\n          @apply maz-rounded-b-xl;\n\n          td:first-child {\n            @apply maz-rounded-bl-xl;\n          }\n\n          td:last-child {\n            @apply maz-rounded-br-xl;\n          }\n        }\n      }\n    }\n  }\n\n  &.--has-header {\n    @apply maz-rounded;\n  }\n\n  &:not(.--has-header) {\n    table {\n      @apply maz-rounded;\n    }\n  }\n\n  table {\n    @apply maz-table maz-w-full maz-border-collapse maz-bg-color;\n\n    table-layout: v-bind('tableLayout');\n\n    &.--has-layout {\n      @apply maz-w-full;\n    }\n\n    &.--elevation {\n      @apply maz-elevation;\n    }\n\n    & .m-table-select-column {\n      @apply maz-w-[2.9rem];\n    }\n\n    caption {\n      @apply maz-p-3;\n\n      caption-side: v-bind('captionSide');\n    }\n\n    thead {\n      @apply maz-break-all maz-border-b maz-border-color-light;\n\n      th {\n        @apply maz-gap-2 maz-break-all maz-font-normal maz-text-muted maz-tracking-tight;\n\n        &.--hidden {\n          @apply maz-hidden;\n        }\n\n        &.--sortable {\n          @apply maz-cursor-pointer hover:maz-bg-color-dark;\n        }\n\n        &.--xl {\n          @apply maz-px-5 maz-py-5 maz-text-lg;\n        }\n\n        &.--lg {\n          @apply maz-px-4 maz-py-4 maz-text-base;\n        }\n\n        &.--md {\n          @apply maz-px-3 maz-py-3 maz-text-sm;\n        }\n\n        &.--sm {\n          @apply maz-px-2 maz-py-2 maz-text-xs;\n        }\n\n        &.--xs {\n          @apply maz-px-1 maz-py-1 maz-text-xs;\n        }\n\n        &.--mini {\n          @apply maz-px-0.5 maz-py-0.5 maz-text-xs;\n        }\n\n        span {\n          @apply maz-inline-flex maz-items-center maz-gap-1;\n\n          .m-table-sort-icon-wrapper {\n            @apply maz-h-4 maz-w-4;\n          }\n\n          .m-table-sort-icon {\n            @apply maz-text-muted maz-transition-transform maz-duration-300 maz-ease-out;\n\n            &.--sorted {\n              @apply maz-block maz-text-normal;\n\n              &.--up {\n                @apply maz-rotate-0;\n              }\n\n              &.--down {\n                @apply maz-rotate-180;\n              }\n            }\n          }\n        }\n      }\n    }\n\n    tbody {\n      &.--divider {\n        @apply maz-divide-y maz-divide-color-light;\n      }\n    }\n  }\n}\n</style>\n"],"names":["mazTableKey","props","__props","emits","__emit","MazBtn","defineAsyncComponent","MazCheckbox","MazInput","MazLoadingBar","MazSelect","MazTableCell","MazTableRow","MazTableTitle","ArrowIcon","ChevronDoubleIcon","ChevronIcon","SearchIcon","defaultTranslations","t","computed","translations","searchByAllLabel","searchByPlaceholder","searchPlaceholder","paginationAllLabel","hasDivider","size","hoverable","backgroundEven","backgroundOdd","toRefs","provide","rowsNormalized","ref","getNormalizedRows","isSelectable","currentPage","watch","value","currentPageModel","pageSizeOptions","pageSizeModelInternal","pageSizeModel","totalPagesInternal","_a","firstPage","lastPage","previousPage","nextPage","rowsOfPage","start","end","sortedColumnIndex","sortType","headersNormalized","getNormalizedHeaders","searchByKey","searchByOptions","header","searchQueryModelInternal","searchQueryModel","getSortedRows","rows","b","aValue","bValue","getFilteredRows","query","row","rowsFiltered","filteredResults","slots","useSlots","hasHeader","hasFooter","sortColumn","columnIndex","sortTypeValue","allSelected","selectAll","emitValues","selectRow","index","selectedRows","getSelectedRows","onBeforeMount"],"mappings":"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"}

package/dist/chunks/MazTabsContent.vue_vue_type_script_setup_true_lang.BGqO0ynq.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MazTabsContent.vue_vue_type_script_setup_true_lang.BGqO0ynq.mjs","sources":["../../src/components/MazTabsContent.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { MazTabsProvide } from '@components/MazTabs.vue'\nimport { debounce } from '@helpers/debounce'\nimport { injectStrict } from '@helpers/injectStrict'\nimport { ref, watch } from 'vue'\n\nconst hideOverflow = ref(false)\n\nconst { currentTab } = injectStrict<MazTabsProvide>('maz-tabs')\n\nconst allowOverFlow = debounce(() => {\n  hideOverflow.value = false\n}, 700)\n\nfunction setOverflowHiddenTemp() {\n  hideOverflow.value = true\n  allowOverFlow()\n}\n\nwatch(\n  () => currentTab.value,\n  () => setOverflowHiddenTemp(),\n  { immediate: true },\n)\n</script>\n\n<template>\n  <div class=\"m-tabs-content m-reset-css maz-relative\" :class=\"{ 'maz-overflow-hidden': hideOverflow }\">\n    <slot />\n  </div>\n</template>\n"],"names":["hideOverflow","ref","currentTab","injectStrict","allowOverFlow","debounce","setOverflowHiddenTemp","watch"],"mappings":";;;;;;AAMM,UAAAA,IAAeC,EAAI,EAAK,GAExB,EAAE,YAAAC,EAAA,IAAeC,EAA6B,UAAU,GAExDC,IAAgBC,EAAS,MAAM;AACnC,MAAAL,EAAa,QAAQ;AAAA,OACpB,GAAG;AAEN,aAASM,IAAwB;AAC/B,MAAAN,EAAa,QAAQ,IACPI,EAAA;AAAA,IAAA;AAGhB,WAAAG;AAAA,MACE,MAAML,EAAW;AAAA,MACjB,MAAMI,EAAsB;AAAA,MAC5B,EAAE,WAAW,GAAK;AAAA,IACpB;;;;;;;"}
+{"version":3,"file":"MazTabsContent.vue_vue_type_script_setup_true_lang.BGqO0ynq.mjs","sources":["../../src/components/MazTabsContent.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { MazTabsProvide } from './MazTabs.vue'\nimport { ref, watch } from 'vue'\nimport { debounce } from '../helpers/debounce'\nimport { injectStrict } from '../helpers/injectStrict'\n\nconst hideOverflow = ref(false)\n\nconst { currentTab } = injectStrict<MazTabsProvide>('maz-tabs')\n\nconst allowOverFlow = debounce(() => {\n  hideOverflow.value = false\n}, 700)\n\nfunction setOverflowHiddenTemp() {\n  hideOverflow.value = true\n  allowOverFlow()\n}\n\nwatch(\n  () => currentTab.value,\n  () => setOverflowHiddenTemp(),\n  { immediate: true },\n)\n</script>\n\n<template>\n  <div class=\"m-tabs-content m-reset-css maz-relative\" :class=\"{ 'maz-overflow-hidden': hideOverflow }\">\n    <slot />\n  </div>\n</template>\n"],"names":["hideOverflow","ref","currentTab","injectStrict","allowOverFlow","debounce","setOverflowHiddenTemp","watch"],"mappings":";;;;;;AAMM,UAAAA,IAAeC,EAAI,EAAK,GAExB,EAAE,YAAAC,EAAA,IAAeC,EAA6B,UAAU,GAExDC,IAAgBC,EAAS,MAAM;AACnC,MAAAL,EAAa,QAAQ;AAAA,OACpB,GAAG;AAEN,aAASM,IAAwB;AAC/B,MAAAN,EAAa,QAAQ,IACPI,EAAA;AAAA,IAAA;AAGhB,WAAAG;AAAA,MACE,MAAML,EAAW;AAAA,MACjB,MAAMI,EAAsB;AAAA,MAC5B,EAAE,WAAW,GAAK;AAAA,IACpB;;;;;;;"}

package/dist/chunks/MazTabsContent.vue_vue_type_script_setup_true_lang.DariT_zv.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MazTabsContent.vue_vue_type_script_setup_true_lang.DariT_zv.cjs","sources":["../../src/components/MazTabsContent.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { MazTabsProvide } from '@components/MazTabs.vue'\nimport { debounce } from '@helpers/debounce'\nimport { injectStrict } from '@helpers/injectStrict'\nimport { ref, watch } from 'vue'\n\nconst hideOverflow = ref(false)\n\nconst { currentTab } = injectStrict<MazTabsProvide>('maz-tabs')\n\nconst allowOverFlow = debounce(() => {\n  hideOverflow.value = false\n}, 700)\n\nfunction setOverflowHiddenTemp() {\n  hideOverflow.value = true\n  allowOverFlow()\n}\n\nwatch(\n  () => currentTab.value,\n  () => setOverflowHiddenTemp(),\n  { immediate: true },\n)\n</script>\n\n<template>\n  <div class=\"m-tabs-content m-reset-css maz-relative\" :class=\"{ 'maz-overflow-hidden': hideOverflow }\">\n    <slot />\n  </div>\n</template>\n"],"names":["hideOverflow","ref","currentTab","injectStrict","allowOverFlow","debounce","setOverflowHiddenTemp","watch"],"mappings":"wKAMM,MAAAA,EAAeC,MAAI,EAAK,EAExB,CAAE,WAAAC,CAAA,EAAeC,EAAA,aAA6B,UAAU,EAExDC,EAAgBC,EAAAA,SAAS,IAAM,CACnCL,EAAa,MAAQ,IACpB,GAAG,EAEN,SAASM,GAAwB,CAC/BN,EAAa,MAAQ,GACPI,EAAA,CAAA,CAGhBG,OAAAA,EAAA,MACE,IAAML,EAAW,MACjB,IAAMI,EAAsB,EAC5B,CAAE,UAAW,EAAK,CACpB"}
+{"version":3,"file":"MazTabsContent.vue_vue_type_script_setup_true_lang.DariT_zv.cjs","sources":["../../src/components/MazTabsContent.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { MazTabsProvide } from './MazTabs.vue'\nimport { ref, watch } from 'vue'\nimport { debounce } from '../helpers/debounce'\nimport { injectStrict } from '../helpers/injectStrict'\n\nconst hideOverflow = ref(false)\n\nconst { currentTab } = injectStrict<MazTabsProvide>('maz-tabs')\n\nconst allowOverFlow = debounce(() => {\n  hideOverflow.value = false\n}, 700)\n\nfunction setOverflowHiddenTemp() {\n  hideOverflow.value = true\n  allowOverFlow()\n}\n\nwatch(\n  () => currentTab.value,\n  () => setOverflowHiddenTemp(),\n  { immediate: true },\n)\n</script>\n\n<template>\n  <div class=\"m-tabs-content m-reset-css maz-relative\" :class=\"{ 'maz-overflow-hidden': hideOverflow }\">\n    <slot />\n  </div>\n</template>\n"],"names":["hideOverflow","ref","currentTab","injectStrict","allowOverFlow","debounce","setOverflowHiddenTemp","watch"],"mappings":"wKAMM,MAAAA,EAAeC,MAAI,EAAK,EAExB,CAAE,WAAAC,CAAA,EAAeC,EAAA,aAA6B,UAAU,EAExDC,EAAgBC,EAAAA,SAAS,IAAM,CACnCL,EAAa,MAAQ,IACpB,GAAG,EAEN,SAASM,GAAwB,CAC/BN,EAAa,MAAQ,GACPI,EAAA,CAAA,CAGhBG,OAAAA,EAAA,MACE,IAAML,EAAW,MACjB,IAAMI,EAAsB,EAC5B,CAAE,UAAW,EAAK,CACpB"}

package/dist/chunks/{PhoneInput.9GQJbL9x.mjs → PhoneInput.DYm0yzgy.mjs}

@@ -1,9 +1,9 @@
-import { defineComponent as B, mergeModels as h, useModel as g, computed as u, ref as P, onMounted as F, openBlock as V, createBlock as I, mergeProps as z, unref as N } from "vue";
-import E from "../components/MazInput.mjs";
-import { a as M, u as $ } from "./MazInputPhoneNumber.B173m1hd.mjs";
-import { injectStrict as C } from "../helpers/injectStrict.mjs";
+import { defineComponent as f, mergeModels as h, useModel as g, computed as u, ref as P, onMounted as F, openBlock as V, createBlock as I, mergeProps as z, unref as N } from "vue";
+import { injectStrict as E } from "../helpers/injectStrict.mjs";
+import M from "../components/MazInput.mjs";
+import { a as $, u as C } from "./MazInputPhoneNumber.BluSBPXE.mjs";
 import { _ as L } from "./_plugin-vue_export-helper.CHgC5LLL.mjs";
-import '../assets/PhoneInput.utJQQXVJ.css';const S = /* @__PURE__ */ B({
+import '../assets/PhoneInput.BBnKae_d.css';const S = /* @__PURE__ */ f({
   __name: "PhoneInput",
   props: /* @__PURE__ */ h({
     style: {},
@@ -49,7 +49,7 @@ import '../assets/PhoneInput.utJQQXVJ.css';const S = /* @__PURE__ */ B({
   }),
   emits: ["update:modelValue"],
   setup(l) {
-    const { getPhoneNumberExample: p, getAsYouTypeFormat: m, loadExamples: c } = M(), { sanitizePhoneNumber: y } = $(), { results: n, selectedCountry: s } = C("data"), r = g(l, "modelValue"), v = u(() => {
+    const { getPhoneNumberExample: p, getAsYouTypeFormat: m, loadExamples: c } = $(), { sanitizePhoneNumber: y } = C(), { results: n, selectedCountry: s } = E("data"), r = g(l, "modelValue"), v = u(() => {
       const e = n.value.isValid ? n.value.formatNational : r.value;
       return m(s.value, e) || e;
     }), t = P(!1), d = u({
@@ -73,14 +73,14 @@ import '../assets/PhoneInput.utJQQXVJ.css';const S = /* @__PURE__ */ B({
         const a = b(s.value);
         return (o = n.value) != null && o.isValid || !a ? e : a;
       }
-    }), f = u(() => l.placeholder ? { placeholder: i.value } : { label: i.value });
+    }), B = u(() => l.placeholder ? { placeholder: i.value } : { label: i.value });
     return F(() => {
       l.noExample || c();
-    }), (e, o) => (V(), I(E, z({
+    }), (e, o) => (V(), I(M, z({
       id: e.id,
       modelValue: d.value,
       "onUpdate:modelValue": o[0] || (o[0] = (a) => d.value = a)
-    }, { ...e.$attrs, ...f.value }, {
+    }, { ...e.$attrs, ...B.value }, {
       disabled: e.disabled,
       color: e.color,
       error: e.error,
@@ -100,8 +100,8 @@ import '../assets/PhoneInput.utJQQXVJ.css';const S = /* @__PURE__ */ B({
       onBlur: o[2] || (o[2] = (a) => t.value = !1)
     }), null, 16, ["id", "modelValue", "disabled", "color", "error", "size", "success", "name", "inputmode", "autocomplete", "class"]));
   }
-}), A = /* @__PURE__ */ L(S, [["__scopeId", "data-v-f91473ad"]]);
+}), A = /* @__PURE__ */ L(S, [["__scopeId", "data-v-c8556160"]]);
 export {
   A as default
 };
-//# sourceMappingURL=PhoneInput.9GQJbL9x.mjs.map
+//# sourceMappingURL=PhoneInput.DYm0yzgy.mjs.map

package/dist/chunks/PhoneInput.DYm0yzgy.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneInput.DYm0yzgy.mjs","sources":["../../src/components/MazInputPhoneNumber/PhoneInput.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { CountryCode } from 'libphonenumber-js'\nimport type { MazInputPhoneNumberInjectedData } from '../MazInputPhoneNumber.vue'\nimport type { MazInputPhoneNumberTranslations } from './types'\nimport { computed, onMounted, ref } from 'vue'\nimport { injectStrict } from '../../helpers/injectStrict'\nimport MazInput, { type MazInputProps } from '../MazInput.vue'\nimport { useLibphonenumber } from './useLibphonenumber'\nimport { useMazInputPhoneNumber } from './useMazInputPhoneNumber'\n\ntype PhoneInputProps = Omit<MazInputProps, 'modelValue'> & {\n  id: string\n  locales: MazInputPhoneNumberTranslations\n  noExample: boolean\n  hasRadius: boolean\n  autoFormat: boolean\n}\n\nconst { placeholder, label, noExample, locales, autoFormat, name, inputmode, autocomplete } = defineProps<PhoneInputProps>()\n\nconst { getPhoneNumberExample, getAsYouTypeFormat, loadExamples } = useLibphonenumber()\nconst { sanitizePhoneNumber } = useMazInputPhoneNumber()\nconst { results, selectedCountry } = injectStrict<MazInputPhoneNumberInjectedData>('data')\n\nconst modelValue = defineModel<string | undefined | null>()\n\nconst asYouTypeFormatted = computed(() => {\n  const phoneNumberToFormat = results.value.isValid ? results.value.formatNational : modelValue.value\n  return getAsYouTypeFormat(selectedCountry.value, phoneNumberToFormat) || phoneNumberToFormat\n})\n\nconst inputFocused = ref(false)\nconst displayedPhoneNumber = computed({\n  get: () => !inputFocused.value && autoFormat ? asYouTypeFormatted.value : modelValue.value,\n  set: (value) => {\n    modelValue.value = sanitizePhoneNumber(value)\n  },\n})\n\nfunction getCountryPhoneNumberExample(selectedCountry?: CountryCode | undefined | null) {\n  const example = getPhoneNumberExample(selectedCountry)\n  return example ? `${locales.phoneInput.example} ${example}` : undefined\n}\nconst inputLabelOrPlaceholder = computed(() => {\n  if (label || placeholder) {\n    return label || placeholder\n  }\n\n  const defaultPlaceholder = locales.phoneInput.placeholder\n\n  if (noExample || !inputFocused.value) {\n    return defaultPlaceholder\n  }\n  else {\n    const phoneExample = getCountryPhoneNumberExample(selectedCountry.value)\n    return results.value?.isValid || !phoneExample ? defaultPlaceholder : phoneExample\n  }\n})\n\nconst inputProps = computed(() => {\n  return placeholder\n    ? { placeholder: inputLabelOrPlaceholder.value }\n    : { label: inputLabelOrPlaceholder.value }\n})\n\nonMounted(() => {\n  if (!noExample)\n    loadExamples()\n})\n</script>\n\n<template>\n  <MazInput\n    :id\n    v-model=\"displayedPhoneNumber\"\n    v-bind=\"{ ...$attrs, ...inputProps }\"\n    :disabled\n    :color\n    :error\n    :size\n    :success\n    :name\n    :inputmode\n    :autocomplete\n    class=\"m-phone-input\"\n    :class=\"[\n      {\n        '--border-radius': hasRadius,\n        '--error': error || !results.isValid,\n        '--focused': inputFocused,\n      },\n    ]\"\n    @focus=\"inputFocused = true\"\n    @blur=\"inputFocused = false\"\n  />\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-phone-input {\n  @apply maz-min-w-52 maz-flex-1;\n\n  &.--error,\n  &.--focused {\n    @apply maz-z-1;\n  }\n}\n\n/** RESPONSIVE */\n.m-phone-number-input {\n  &.--responsive .m-phone-input {\n    @apply -maz-mt-0.5 maz-flex-none mob-m:-maz-ml-0.5 mob-m:maz-mt-0 mob-m:maz-flex-auto;\n\n    &.--border-radius {\n      &:deep(.m-input-wrapper) {\n        @apply maz-rounded-t-none mob-m:maz-rounded-l-none mob-m:maz-rounded-tr;\n      }\n    }\n  }\n\n  &.--row .m-phone-input {\n    @apply -maz-ml-0.5;\n\n    &.--border-radius {\n      &:deep(.m-input-wrapper) {\n        @apply maz-rounded-l-none;\n      }\n    }\n  }\n\n  &.--col .m-phone-input {\n    @apply -maz-mt-0.5 maz-ml-0 maz-flex-none;\n\n    &.--border-radius {\n      &:deep(.m-input-wrapper) {\n        @apply maz-rounded-t-none maz-rounded-bl;\n      }\n    }\n  }\n}\n</style>\n"],"names":["getPhoneNumberExample","getAsYouTypeFormat","loadExamples","useLibphonenumber","sanitizePhoneNumber","useMazInputPhoneNumber","results","selectedCountry","injectStrict","modelValue","_useModel","__props","asYouTypeFormatted","computed","phoneNumberToFormat","inputFocused","ref","displayedPhoneNumber","value","getCountryPhoneNumberExample","example","inputLabelOrPlaceholder","defaultPlaceholder","phoneExample","_a","inputProps","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,UAAM,EAAE,uBAAAA,GAAuB,oBAAAC,GAAoB,cAAAC,EAAA,IAAiBC,EAAkB,GAChF,EAAE,qBAAAC,EAAoB,IAAIC,EAAuB,GACjD,EAAE,SAAAC,GAAS,iBAAAC,MAAoBC,EAA8C,MAAM,GAEnFC,IAAaC,EAAuCC,GAAA,YAAA,GAEpDC,IAAqBC,EAAS,MAAM;AACxC,YAAMC,IAAsBR,EAAQ,MAAM,UAAUA,EAAQ,MAAM,iBAAiBG,EAAW;AAC9F,aAAOR,EAAmBM,EAAgB,OAAOO,CAAmB,KAAKA;AAAA,IAAA,CAC1E,GAEKC,IAAeC,EAAI,EAAK,GACxBC,IAAuBJ,EAAS;AAAA,MACpC,KAAK,MAAM,CAACE,EAAa,SAASJ,EAAU,aAAGC,EAAmB,QAAQH,EAAW;AAAA,MACrF,KAAK,CAACS,MAAU;AACH,QAAAT,EAAA,QAAQL,EAAoBc,CAAK;AAAA,MAAA;AAAA,IAC9C,CACD;AAED,aAASC,EAA6BZ,GAAkD;AAChF,YAAAa,IAAUpB,EAAsBO,CAAe;AAC9C,aAAAa,IAAU,GAAGT,EAAO,QAAC,WAAW,OAAO,IAAIS,CAAO,KAAK;AAAA,IAAA;AAE1D,UAAAC,IAA0BR,EAAS,MAAM;;AACzC,UAAAF,EAAA,SAASA,EAAW;AACf,eAAAA,EAAA,SAASA,EAAA;AAGZ,YAAAW,IAAqBX,UAAQ,WAAW;AAE9C,UAAIA,EAAA,aAAa,CAACI,EAAa;AACtB,eAAAO;AAEJ;AACG,cAAAC,IAAeJ,EAA6BZ,EAAgB,KAAK;AACvE,gBAAOiB,IAAAlB,EAAQ,UAAR,QAAAkB,EAAe,WAAW,CAACD,IAAeD,IAAqBC;AAAA,MAAA;AAAA,IACxE,CACD,GAEKE,IAAaZ,EAAS,MACnBF,EAAA,cACH,EAAE,aAAaU,EAAwB,UACvC,EAAE,OAAOA,EAAwB,MAAM,CAC5C;AAED,WAAAK,EAAU,MAAM;AACd,MAAKf,EAAS,aACCT,EAAA;AAAA,IAAA,CAChB;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{PhoneInput.D5DG4S60.cjs → PhoneInput.wXP8tsCy.cjs}

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../assets/PhoneInput.utJQQXVJ.css');const o=require("vue"),f=require("../components/MazInput.cjs"),p=require("./MazInputPhoneNumber.EZVh1Yx5.cjs"),g=require("../helpers/injectStrict.cjs"),P=require("./_plugin-vue_export-helper.BHFhmbuH.cjs"),V=o.defineComponent({__name:"PhoneInput",props:o.mergeModels({style:{},class:{},placeholder:{},label:{},topLabel:{},assistiveText:{},name:{},color:{},type:{},required:{type:Boolean},disabled:{type:Boolean},readonly:{type:Boolean},id:{},error:{type:Boolean},success:{type:Boolean},warning:{type:Boolean},hint:{},inputClasses:{},noBorder:{type:Boolean},noRadius:{type:Boolean},inputmode:{},size:{},debounce:{type:[Boolean,Number]},debounceDelay:{},validButton:{type:Boolean},validButtonLoading:{type:Boolean},autoFocus:{type:Boolean},borderActive:{type:Boolean},leftIcon:{type:[String,Function,Object]},rightIcon:{type:[String,Function,Object]},roundedSize:{},block:{type:Boolean},autocomplete:{},locales:{},noExample:{type:Boolean},hasRadius:{type:Boolean},autoFormat:{type:Boolean}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(t){const{getPhoneNumberExample:c,getAsYouTypeFormat:m,loadExamples:y}=p.useLibphonenumber(),{sanitizePhoneNumber:b}=p.useMazInputPhoneNumber(),{results:u,selectedCountry:s}=g.injectStrict("data"),r=o.useModel(t,"modelValue"),v=o.computed(()=>{const e=u.value.isValid?u.value.formatNational:r.value;return m(s.value,e)||e}),a=o.ref(!1),d=o.computed({get:()=>!a.value&&t.autoFormat?v.value:r.value,set:e=>{r.value=b(e)}});function B(e){const l=c(e);return l?`${t.locales.phoneInput.example} ${l}`:void 0}const i=o.computed(()=>{var l;if(t.label||t.placeholder)return t.label||t.placeholder;const e=t.locales.phoneInput.placeholder;if(t.noExample||!a.value)return e;{const n=B(s.value);return(l=u.value)!=null&&l.isValid||!n?e:n}}),h=o.computed(()=>t.placeholder?{placeholder:i.value}:{label:i.value});return o.onMounted(()=>{t.noExample||y()}),(e,l)=>(o.openBlock(),o.createBlock(f.default,o.mergeProps({id:e.id,modelValue:d.value,"onUpdate:modelValue":l[0]||(l[0]=n=>d.value=n)},{...e.$attrs,...h.value},{disabled:e.disabled,color:e.color,error:e.error,size:e.size,success:e.success,name:e.name,inputmode:e.inputmode,autocomplete:e.autocomplete,class:["m-phone-input",[{"--border-radius":e.hasRadius,"--error":e.error||!o.unref(u).isValid,"--focused":a.value}]],onFocus:l[1]||(l[1]=n=>a.value=!0),onBlur:l[2]||(l[2]=n=>a.value=!1)}),null,16,["id","modelValue","disabled","color","error","size","success","name","inputmode","autocomplete","class"]))}}),F=P._export_sfc(V,[["__scopeId","data-v-f91473ad"]]);exports.default=F;
-//# sourceMappingURL=PhoneInput.D5DG4S60.cjs.map
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../assets/PhoneInput.BBnKae_d.css');const o=require("vue"),f=require("../helpers/injectStrict.cjs"),g=require("../components/MazInput.cjs"),p=require("./MazInputPhoneNumber.TorVuc9s.cjs"),P=require("./_plugin-vue_export-helper.BHFhmbuH.cjs"),V=o.defineComponent({__name:"PhoneInput",props:o.mergeModels({style:{},class:{},placeholder:{},label:{},topLabel:{},assistiveText:{},name:{},color:{},type:{},required:{type:Boolean},disabled:{type:Boolean},readonly:{type:Boolean},id:{},error:{type:Boolean},success:{type:Boolean},warning:{type:Boolean},hint:{},inputClasses:{},noBorder:{type:Boolean},noRadius:{type:Boolean},inputmode:{},size:{},debounce:{type:[Boolean,Number]},debounceDelay:{},validButton:{type:Boolean},validButtonLoading:{type:Boolean},autoFocus:{type:Boolean},borderActive:{type:Boolean},leftIcon:{type:[String,Function,Object]},rightIcon:{type:[String,Function,Object]},roundedSize:{},block:{type:Boolean},autocomplete:{},locales:{},noExample:{type:Boolean},hasRadius:{type:Boolean},autoFormat:{type:Boolean}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(t){const{getPhoneNumberExample:c,getAsYouTypeFormat:m,loadExamples:y}=p.useLibphonenumber(),{sanitizePhoneNumber:b}=p.useMazInputPhoneNumber(),{results:u,selectedCountry:s}=f.injectStrict("data"),r=o.useModel(t,"modelValue"),v=o.computed(()=>{const e=u.value.isValid?u.value.formatNational:r.value;return m(s.value,e)||e}),a=o.ref(!1),d=o.computed({get:()=>!a.value&&t.autoFormat?v.value:r.value,set:e=>{r.value=b(e)}});function B(e){const l=c(e);return l?`${t.locales.phoneInput.example} ${l}`:void 0}const i=o.computed(()=>{var l;if(t.label||t.placeholder)return t.label||t.placeholder;const e=t.locales.phoneInput.placeholder;if(t.noExample||!a.value)return e;{const n=B(s.value);return(l=u.value)!=null&&l.isValid||!n?e:n}}),h=o.computed(()=>t.placeholder?{placeholder:i.value}:{label:i.value});return o.onMounted(()=>{t.noExample||y()}),(e,l)=>(o.openBlock(),o.createBlock(g.default,o.mergeProps({id:e.id,modelValue:d.value,"onUpdate:modelValue":l[0]||(l[0]=n=>d.value=n)},{...e.$attrs,...h.value},{disabled:e.disabled,color:e.color,error:e.error,size:e.size,success:e.success,name:e.name,inputmode:e.inputmode,autocomplete:e.autocomplete,class:["m-phone-input",[{"--border-radius":e.hasRadius,"--error":e.error||!o.unref(u).isValid,"--focused":a.value}]],onFocus:l[1]||(l[1]=n=>a.value=!0),onBlur:l[2]||(l[2]=n=>a.value=!1)}),null,16,["id","modelValue","disabled","color","error","size","success","name","inputmode","autocomplete","class"]))}}),F=P._export_sfc(V,[["__scopeId","data-v-c8556160"]]);exports.default=F;
+//# sourceMappingURL=PhoneInput.wXP8tsCy.cjs.map

package/dist/chunks/PhoneInput.wXP8tsCy.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneInput.wXP8tsCy.cjs","sources":["../../src/components/MazInputPhoneNumber/PhoneInput.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { CountryCode } from 'libphonenumber-js'\nimport type { MazInputPhoneNumberInjectedData } from '../MazInputPhoneNumber.vue'\nimport type { MazInputPhoneNumberTranslations } from './types'\nimport { computed, onMounted, ref } from 'vue'\nimport { injectStrict } from '../../helpers/injectStrict'\nimport MazInput, { type MazInputProps } from '../MazInput.vue'\nimport { useLibphonenumber } from './useLibphonenumber'\nimport { useMazInputPhoneNumber } from './useMazInputPhoneNumber'\n\ntype PhoneInputProps = Omit<MazInputProps, 'modelValue'> & {\n  id: string\n  locales: MazInputPhoneNumberTranslations\n  noExample: boolean\n  hasRadius: boolean\n  autoFormat: boolean\n}\n\nconst { placeholder, label, noExample, locales, autoFormat, name, inputmode, autocomplete } = defineProps<PhoneInputProps>()\n\nconst { getPhoneNumberExample, getAsYouTypeFormat, loadExamples } = useLibphonenumber()\nconst { sanitizePhoneNumber } = useMazInputPhoneNumber()\nconst { results, selectedCountry } = injectStrict<MazInputPhoneNumberInjectedData>('data')\n\nconst modelValue = defineModel<string | undefined | null>()\n\nconst asYouTypeFormatted = computed(() => {\n  const phoneNumberToFormat = results.value.isValid ? results.value.formatNational : modelValue.value\n  return getAsYouTypeFormat(selectedCountry.value, phoneNumberToFormat) || phoneNumberToFormat\n})\n\nconst inputFocused = ref(false)\nconst displayedPhoneNumber = computed({\n  get: () => !inputFocused.value && autoFormat ? asYouTypeFormatted.value : modelValue.value,\n  set: (value) => {\n    modelValue.value = sanitizePhoneNumber(value)\n  },\n})\n\nfunction getCountryPhoneNumberExample(selectedCountry?: CountryCode | undefined | null) {\n  const example = getPhoneNumberExample(selectedCountry)\n  return example ? `${locales.phoneInput.example} ${example}` : undefined\n}\nconst inputLabelOrPlaceholder = computed(() => {\n  if (label || placeholder) {\n    return label || placeholder\n  }\n\n  const defaultPlaceholder = locales.phoneInput.placeholder\n\n  if (noExample || !inputFocused.value) {\n    return defaultPlaceholder\n  }\n  else {\n    const phoneExample = getCountryPhoneNumberExample(selectedCountry.value)\n    return results.value?.isValid || !phoneExample ? defaultPlaceholder : phoneExample\n  }\n})\n\nconst inputProps = computed(() => {\n  return placeholder\n    ? { placeholder: inputLabelOrPlaceholder.value }\n    : { label: inputLabelOrPlaceholder.value }\n})\n\nonMounted(() => {\n  if (!noExample)\n    loadExamples()\n})\n</script>\n\n<template>\n  <MazInput\n    :id\n    v-model=\"displayedPhoneNumber\"\n    v-bind=\"{ ...$attrs, ...inputProps }\"\n    :disabled\n    :color\n    :error\n    :size\n    :success\n    :name\n    :inputmode\n    :autocomplete\n    class=\"m-phone-input\"\n    :class=\"[\n      {\n        '--border-radius': hasRadius,\n        '--error': error || !results.isValid,\n        '--focused': inputFocused,\n      },\n    ]\"\n    @focus=\"inputFocused = true\"\n    @blur=\"inputFocused = false\"\n  />\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-phone-input {\n  @apply maz-min-w-52 maz-flex-1;\n\n  &.--error,\n  &.--focused {\n    @apply maz-z-1;\n  }\n}\n\n/** RESPONSIVE */\n.m-phone-number-input {\n  &.--responsive .m-phone-input {\n    @apply -maz-mt-0.5 maz-flex-none mob-m:-maz-ml-0.5 mob-m:maz-mt-0 mob-m:maz-flex-auto;\n\n    &.--border-radius {\n      &:deep(.m-input-wrapper) {\n        @apply maz-rounded-t-none mob-m:maz-rounded-l-none mob-m:maz-rounded-tr;\n      }\n    }\n  }\n\n  &.--row .m-phone-input {\n    @apply -maz-ml-0.5;\n\n    &.--border-radius {\n      &:deep(.m-input-wrapper) {\n        @apply maz-rounded-l-none;\n      }\n    }\n  }\n\n  &.--col .m-phone-input {\n    @apply -maz-mt-0.5 maz-ml-0 maz-flex-none;\n\n    &.--border-radius {\n      &:deep(.m-input-wrapper) {\n        @apply maz-rounded-t-none maz-rounded-bl;\n      }\n    }\n  }\n}\n</style>\n"],"names":["getPhoneNumberExample","getAsYouTypeFormat","loadExamples","useLibphonenumber","sanitizePhoneNumber","useMazInputPhoneNumber","results","selectedCountry","injectStrict","modelValue","_useModel","__props","asYouTypeFormatted","computed","phoneNumberToFormat","inputFocused","ref","displayedPhoneNumber","value","getCountryPhoneNumberExample","example","inputLabelOrPlaceholder","defaultPlaceholder","phoneExample","_a","inputProps","onMounted"],"mappings":"qnCAoBA,KAAM,CAAE,sBAAAA,EAAuB,mBAAAC,EAAoB,aAAAC,CAAA,EAAiBC,EAAAA,kBAAkB,EAChF,CAAE,oBAAAC,CAAoB,EAAIC,yBAAuB,EACjD,CAAE,QAAAC,EAAS,gBAAAC,GAAoBC,EAAAA,aAA8C,MAAM,EAEnFC,EAAaC,EAAAA,SAAuCC,EAAA,YAAA,EAEpDC,EAAqBC,EAAAA,SAAS,IAAM,CACxC,MAAMC,EAAsBR,EAAQ,MAAM,QAAUA,EAAQ,MAAM,eAAiBG,EAAW,MAC9F,OAAOR,EAAmBM,EAAgB,MAAOO,CAAmB,GAAKA,CAAA,CAC1E,EAEKC,EAAeC,MAAI,EAAK,EACxBC,EAAuBJ,EAAAA,SAAS,CACpC,IAAK,IAAM,CAACE,EAAa,OAASJ,EAAU,WAAGC,EAAmB,MAAQH,EAAW,MACrF,IAAMS,GAAU,CACHT,EAAA,MAAQL,EAAoBc,CAAK,CAAA,CAC9C,CACD,EAED,SAASC,EAA6BZ,EAAkD,CAChF,MAAAa,EAAUpB,EAAsBO,CAAe,EAC9C,OAAAa,EAAU,GAAGT,EAAO,QAAC,WAAW,OAAO,IAAIS,CAAO,GAAK,MAAA,CAE1D,MAAAC,EAA0BR,EAAAA,SAAS,IAAM,OACzC,GAAAF,EAAA,OAASA,EAAW,YACf,OAAAA,EAAA,OAASA,EAAA,YAGZ,MAAAW,EAAqBX,UAAQ,WAAW,YAE9C,GAAIA,EAAA,WAAa,CAACI,EAAa,MACtB,OAAAO,EAEJ,CACG,MAAAC,EAAeJ,EAA6BZ,EAAgB,KAAK,EACvE,OAAOiB,EAAAlB,EAAQ,QAAR,MAAAkB,EAAe,SAAW,CAACD,EAAeD,EAAqBC,CAAA,CACxE,CACD,EAEKE,EAAaZ,EAAAA,SAAS,IACnBF,EAAA,YACH,CAAE,YAAaU,EAAwB,OACvC,CAAE,MAAOA,EAAwB,KAAM,CAC5C,EAEDK,OAAAA,EAAAA,UAAU,IAAM,CACTf,EAAS,WACCT,EAAA,CAAA,CAChB"}

package/dist/chunks/{fullscreen-img.directive.CrLLYi0D.mjs → fullscreen-img.directive.CEBhPyiD.mjs}

@@ -1,11 +1,11 @@
-import '../assets/fullscreen-img.hjNozahA.css';var ue = Object.defineProperty;
+import '../assets/fullscreen-img.Dnt1uj_5.css';var ue = Object.defineProperty;
 var ce = (l, e, s) => e in l ? ue(l, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : l[e] = s;
 var f = (l, e, s) => ce(l, typeof e != "symbol" ? e + "" : e, s);
 import { mount as me } from "../helpers/mountComponent.mjs";
-import { defineComponent as de, defineAsyncComponent as X, ref as u, reactive as ve, computed as j, watch as fe, onMounted as pe, onBeforeUnmount as he, openBlock as H, createElementBlock as $, withModifiers as h, withKeys as ge, createVNode as I, unref as _, createCommentVNode as Y, createElementVNode as B, normalizeClass as ye, withDirectives as we, vShow as Le } from "vue";
-import be from "../components/MazSpinner.mjs";
-import { checkAvailability as Ee } from "../helpers/checkAvailability.mjs";
-import { _ as Ie } from "./_plugin-vue_export-helper.CHgC5LLL.mjs";
+import { defineComponent as de, defineAsyncComponent as X, ref as u, reactive as ve, computed as j, watch as fe, onMounted as pe, onBeforeUnmount as he, openBlock as H, createElementBlock as $, withModifiers as h, withKeys as ge, createVNode as b, unref as _, createCommentVNode as Y, createElementVNode as B, normalizeClass as ye, withDirectives as we, vShow as Le } from "vue";
+import Ee from "../components/MazSpinner.mjs";
+import { checkAvailability as Ie } from "../helpers/checkAvailability.mjs";
+import { _ as be } from "./_plugin-vue_export-helper.CHgC5LLL.mjs";
 const xe = ["onKeypress"], ke = { class: "m-fullscreen-img-scroller" }, Ae = ["src", "alt"], Ce = /* @__PURE__ */ de({
   __name: "MazFullscreenImg",
   props: {
@@ -27,9 +27,9 @@ const xe = ["onKeypress"], ke = { class: "m-fullscreen-img-scroller" }, Ae = ["s
     const s = l, r = e, k = X(() => import("./x-mark.DTWA3lfG.mjs")), g = X(() => import("./chevron-left.njfuF_Vt.mjs")), A = u(!1), y = u(!1), w = u(!1), C = u(!1), c = u(!1), v = ve({
       running: !1,
       ended: !1
-    }), z = u(s.clickedElement), G = j(() => s.clickedElement.getBoundingClientRect()), L = u(), P = u(s.src), M = u(s.alt), W = u(), a = u(), b = u(!0), J = j(() => ({
+    }), z = u(s.clickedElement), G = j(() => s.clickedElement.getBoundingClientRect()), L = u(), P = u(s.src), M = u(s.alt), W = u(), a = u(), E = u(!0), J = j(() => ({
       "--is-zoomed": c.value,
-      "--invisible": b.value,
+      "--invisible": E.value,
       "--absolute": !c.value
     }));
     function Q() {
@@ -43,11 +43,11 @@ const xe = ["onKeypress"], ke = { class: "m-fullscreen-img-scroller" }, Ae = ["s
       },
       { immediate: !0 }
     );
-    function E() {
+    function I() {
       r("before-close"), ie();
     }
     function D(t) {
-      t.key === "Escape" && (t.preventDefault(), E()), (t.key === "ArrowLeft" || t.key === "ArrowRight") && (t.preventDefault(), O(t.key === "ArrowRight" ? "next" : "previous"));
+      t.key === "Escape" && (t.preventDefault(), I()), (t.key === "ArrowLeft" || t.key === "ArrowRight") && (t.preventDefault(), O(t.key === "ArrowRight" ? "next" : "previous"));
     }
     function ee() {
       document.documentElement.classList.add("--m-fullscreen-open");
@@ -67,14 +67,14 @@ const xe = ["onKeypress"], ke = { class: "m-fullscreen-img-scroller" }, Ae = ["s
       M.value = i, P.value = o ?? P.value;
     }
     function O(t) {
-      b.value = !0;
+      E.value = !0;
       const n = document.querySelector(
         `.m-fullscreen-img-instance.${s.openInstanceClass}`
       );
       if (n) {
         const o = N(), i = o.indexOf(n), m = t === "next" ? i + 1 : i - 1, d = o[ne(o, m)];
-        z.value = d, d && se(n, d), r(t), A.value = !1, y.value = !0, Ee(() => A.value === !0, () => {
-          b.value = !1, c.value ? R() : p();
+        z.value = d, d && se(n, d), r(t), A.value = !1, y.value = !0, Ie(() => A.value === !0, () => {
+          E.value = !1, c.value ? R() : p();
         }, {
           expectedValue: !0,
           interval: 100,
@@ -95,7 +95,7 @@ const xe = ["onKeypress"], ke = { class: "m-fullscreen-img-scroller" }, Ae = ["s
     }
     function V(t) {
       var o;
-      v.running = !0, b.value = !1;
+      v.running = !0, E.value = !1;
       const n = (o = a.value) == null ? void 0 : o.animate(t, {
         duration: s.animation.duration,
         easing: s.animation.easing
@@ -193,8 +193,8 @@ const xe = ["onKeypress"], ke = { class: "m-fullscreen-img-scroller" }, Ae = ["s
       role: "button",
       class: "m-fullscreen-img m-reset-css",
       tabindex: "0",
-      onClick: h(E, ["stop"]),
-      onKeypress: ge(h(E, ["prevent"]), ["esc"])
+      onClick: h(I, ["stop"]),
+      onKeypress: ge(h(I, ["prevent"]), ["esc"])
     }, [
       w.value && C.value ? (H(), $("button", {
         key: 0,
@@ -202,7 +202,7 @@ const xe = ["onKeypress"], ke = { class: "m-fullscreen-img-scroller" }, Ae = ["s
         class: "m-fullscreen-btn --next",
         onClick: n[0] || (n[0] = h((o) => O("next"), ["stop"]))
       }, [
-        I(_(g), { class: "maz-rotate-180" })
+        b(_(g), { class: "maz-rotate-180" })
       ])) : Y("", !0),
       w.value && C.value ? (H(), $("button", {
         key: 1,
@@ -210,14 +210,14 @@ const xe = ["onKeypress"], ke = { class: "m-fullscreen-img-scroller" }, Ae = ["s
         class: "m-fullscreen-btn --previous",
         onClick: n[1] || (n[1] = h((o) => O("previous"), ["stop"]))
       }, [
-        I(_(g))
+        b(_(g))
       ])) : Y("", !0),
       B("button", {
         type: "button",
         class: "m-fullscreen-btn --close",
-        onClick: E
+        onClick: I
       }, [
-        I(_(k))
+        b(_(k))
       ]),
       B("div", ke, [
         B("img", {
@@ -230,13 +230,13 @@ const xe = ["onKeypress"], ke = { class: "m-fullscreen-img-scroller" }, Ae = ["s
           onLoad: Q,
           onClick: n[2] || (n[2] = h((o) => t.zoom && oe(), ["stop"]))
         }, null, 42, Ae),
-        we(I(be, { class: "m-fullscreen-img-loader" }, null, 512), [
+        we(b(Ee, { class: "m-fullscreen-img-loader" }, null, 512), [
           [Le, y.value]
         ])
       ])
     ], 40, xe));
   }
-}), ze = /* @__PURE__ */ Ie(Ce, [["__scopeId", "data-v-3b977d1e"]]), U = "m-fullscreen-is-open";
+}), ze = /* @__PURE__ */ be(Ce, [["__scopeId", "data-v-9d1598d9"]]), U = "m-fullscreen-is-open";
 class Pe {
   constructor() {
     f(this, "options");
@@ -326,4 +326,4 @@ const Be = {
 export {
   Be as d
 };
-//# sourceMappingURL=fullscreen-img.directive.CrLLYi0D.mjs.map
+//# sourceMappingURL=fullscreen-img.directive.CEBhPyiD.mjs.map

package/dist/chunks/fullscreen-img.directive.CEBhPyiD.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fullscreen-img.directive.CEBhPyiD.mjs","sources":["../../src/directives/vFullscreenImg/MazFullscreenImg.vue","../../src/directives/vFullscreenImg/fullscreen-img.handler.ts","../../src/directives/vFullscreenImg/fullscreen-img.directive.ts"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { computed, defineAsyncComponent, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'\nimport MazSpinner from '../../components/MazSpinner.vue'\n\nimport { checkAvailability } from '../../helpers/checkAvailability'\n\nconst props = withDefaults(defineProps<MazFullscreenImgProps>(), {\n  zoom: true,\n  offset: undefined,\n  destroy: undefined,\n  alt: undefined,\n  animation: () => ({\n    duration: 300,\n    easing: 'ease-in-out',\n  }),\n  clickedElementBounds: undefined,\n  openInstanceClass: 'm-fullscreen-img-instance',\n})\n\nconst emits = defineEmits(['close', 'previous', 'next', 'before-close'])\n\nconst XMark = defineAsyncComponent(() => import('../../../icons/x-mark.svg'))\nconst ChevronLeft = defineAsyncComponent(() => import('../../../icons/chevron-left.svg'))\n\nexport interface MazFullscreenImgProps {\n  src: string\n  clickedElementBounds?: {\n    top: number\n    left: number\n    height: number\n    width: number\n  }\n  offset?: number\n  animation?: {\n    duration?: number\n    easing?: string\n  }\n  openInstanceClass?: string\n  clickedElement: HTMLElement\n  destroy?: () => void\n  alt?: string | null\n  zoom?: boolean\n}\n\nconst imageLoaded = ref(false)\nconst showLoader = ref(false)\nconst loadedOnce = ref(false)\nconst hasMultipleInstances = ref(false)\nconst isZoomed = ref(false)\nconst animationState = reactive({\n  running: false,\n  ended: false,\n})\n\nconst currentClickedElement = ref(props.clickedElement)\nconst currentClickedElementBounds = computed(() => props.clickedElement.getBoundingClientRect())\nconst isLandscapeImage = ref()\n\nconst currentSrc = ref(props.src)\nconst currentAlt = ref<string | null | undefined>(props.alt)\n\nconst FullscreenImgElement = ref<HTMLDivElement>()\nconst ImgElement = ref<HTMLImageElement>()\nconst hideImage = ref(true)\n\nconst imageZoomClasses = computed<HTMLAttributes['class']>(() => {\n  return {\n    '--is-zoomed': isZoomed.value,\n    '--invisible': hideImage.value,\n    '--absolute': !isZoomed.value,\n  }\n})\n\nfunction onImageLoaded() {\n  if (ImgElement.value) {\n    isLandscapeImage.value = ImgElement.value?.naturalWidth > ImgElement.value?.naturalHeight\n  }\n\n  imageLoaded.value = true\n  showLoader.value = false\n  loadedOnce.value = true\n}\n\nwatch(\n  loadedOnce,\n  (value) => {\n    if (value) {\n      openFullscreen()\n    }\n  },\n  { immediate: true },\n)\n\nfunction close() {\n  emits('before-close')\n  closeFullscreen()\n}\n\nfunction keydownLister(e: KeyboardEvent) {\n  if (e.key === 'Escape') {\n    e.preventDefault()\n    close()\n  }\n\n  if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n    e.preventDefault()\n    nextPreviousImage(e.key === 'ArrowRight' ? 'next' : 'previous')\n  }\n}\n\nfunction addClassToDocument() {\n  document.documentElement.classList.add('--m-fullscreen-open')\n}\n\nfunction removeClassFromDocument() {\n  document.documentElement.classList.remove('--m-fullscreen-open')\n}\n\nfunction getAllInstances(): HTMLElement[] {\n  return [...document.querySelectorAll('.m-fullscreen-img-instance')] as HTMLElement[]\n}\n\nfunction getNewInstanceIndex(allInstances: HTMLElement[], newInstanceIndex: number): number {\n  if (newInstanceIndex < 0) {\n    return allInstances.length - 1\n  }\n  if (newInstanceIndex >= allInstances.length) {\n    return 0\n  }\n  return newInstanceIndex\n}\n\nfunction useNextInstance(currentInstance: HTMLElement, nextInstance: HTMLElement) {\n  currentInstance.classList.remove(props.openInstanceClass)\n  nextInstance.classList.add(props.openInstanceClass)\n\n  const src: string | null = nextInstance.getAttribute('data-src')\n  const alt: string | null = nextInstance.getAttribute('data-alt')\n\n  currentAlt.value = alt\n  currentSrc.value = src ?? currentSrc.value\n}\n\nfunction nextPreviousImage(which: 'next' | 'previous'): void {\n  hideImage.value = true\n\n  const currentInstance: HTMLElement | null = document.querySelector(\n    `.m-fullscreen-img-instance.${props.openInstanceClass}`,\n  )\n\n  if (currentInstance) {\n    const allInstances = getAllInstances()\n    const currentInstanceIndex = allInstances.indexOf(currentInstance)\n    const newInstanceIndex\n        = which === 'next' ? currentInstanceIndex + 1 : currentInstanceIndex - 1\n\n    const nextInstance = allInstances[getNewInstanceIndex(allInstances, newInstanceIndex)]\n    currentClickedElement.value = nextInstance\n\n    if (nextInstance) {\n      useNextInstance(currentInstance, nextInstance)\n    }\n\n    emits(which)\n\n    imageLoaded.value = false\n    showLoader.value = true\n\n    checkAvailability(() => imageLoaded.value === true, () => {\n      hideImage.value = false\n      if (isZoomed.value) {\n        setZoomStyles()\n      }\n      else {\n        setEndAnimationStyles()\n      }\n    }, {\n      expectedValue: true,\n      interval: 100,\n      maxAttempts: 50,\n    })\n  }\n}\n\nfunction setZoomStyles() {\n  const imgElement = ImgElement.value\n\n  if (!imgElement) {\n    console.error('[maz-ui](vFullscreenImg) ImgElement is not defined')\n    return\n  }\n\n  imgElement.style.removeProperty('max-width')\n  imgElement.style.removeProperty('max-height')\n  imgElement?.style.removeProperty('top')\n  imgElement?.style.removeProperty('left')\n\n  if (!isLandscapeImage.value) {\n    imgElement.style.width = `100vw`\n    imgElement.style.removeProperty('height')\n  }\n  else {\n    imgElement.style.height = `100vh`\n    imgElement.style.removeProperty('width')\n  }\n}\n\nfunction toggleZoom() {\n  if (isZoomed.value) {\n    isZoomed.value = !isZoomed.value\n    setEndAnimationStyles()\n  }\n  else {\n    isZoomed.value = !isZoomed.value\n    setZoomStyles()\n  }\n}\n\nfunction runAnimation(frames: Keyframe[] | PropertyIndexedKeyframes) {\n  animationState.running = true\n  hideImage.value = false\n\n  const animation = ImgElement.value?.animate(frames, {\n    duration: props.animation.duration,\n    easing: props.animation.easing,\n  })\n\n  if (!animation) {\n    console.error('[maz-ui](vFullscreenImg) animation is not defined')\n    animationState.running = false\n    animationState.ended = true\n    return\n  }\n\n  return animation\n}\n\nfunction getPositionsOfClikedElement(offset = props.offset ?? 0) {\n  const width = currentClickedElement.value.clientWidth || 1\n  const height = currentClickedElement.value.clientHeight || 1\n\n  const windowWidth = window.innerWidth\n  const windowHeight = window.innerHeight\n\n  const scale = Math.min(\n    (windowWidth - 2 * offset) / width,\n    (windowHeight - 2 * offset) / height,\n  )\n\n  const centerX = (windowWidth - width * scale) / 2\n  const centerY = (windowHeight - height * scale) / 2\n\n  return {\n    centerX,\n    centerY,\n    width,\n    height,\n    scale,\n  }\n}\n\nfunction getAnimationFrames({ trigger }: { trigger: 'open' | 'close' }) {\n  const { width, height, scale, centerX, centerY } = getPositionsOfClikedElement()\n\n  const { top, left, width: clickedElementWidth, height: clickedElementHeight } = currentClickedElementBounds.value\n\n  const frames = [\n    {\n      top: `${top}px`,\n      left: `${left}px`,\n      width: `${clickedElementWidth}px`,\n      height: `${clickedElementHeight}px`,\n      opacity: 0,\n    },\n    {\n      top: `${centerY}px`,\n      left: `${centerX}px`,\n      width: `${width * scale}px`,\n      height: `${height * scale}px`,\n      opacity: 1,\n    },\n  ]\n\n  return {\n    frames: trigger === 'open' ? frames : frames.reverse(),\n  }\n}\n\nfunction setEndAnimationStyles() {\n  const { height, width, scale } = getPositionsOfClikedElement()\n\n  const finalStyles = isLandscapeImage.value\n    ? {\n        width: `${width * scale}px`,\n        maxHeight: `${height * scale}px`,\n      }\n    : {\n        height: `${height * scale}px`,\n        maxWidth: `${width * scale}px`,\n      }\n\n  if (!ImgElement.value) {\n    console.error('[maz-ui](vFullscreenImg) ImgElement is not defined')\n    return\n  }\n\n  if (isLandscapeImage.value) {\n    ImgElement.value.style.removeProperty('height')\n    ImgElement.value.style.removeProperty('maxHeight')\n  }\n  else {\n    ImgElement.value.style.removeProperty('width')\n    ImgElement.value.style.removeProperty('maxWidth')\n  }\n\n  Object.assign(ImgElement.value.style, finalStyles)\n}\n\nfunction openFullscreen() {\n  const { frames } = getAnimationFrames({\n    trigger: 'open',\n  })\n\n  const openAnimation = runAnimation(frames)\n\n  if (!openAnimation) {\n    console.error('[maz-ui](vFullscreenImg) open animation is not defined')\n    setEndAnimationStyles()\n    return\n  }\n\n  openAnimation.onfinish = () => {\n    setEndAnimationStyles()\n    animationState.running = false\n    animationState.ended = true\n  }\n}\n\nfunction closeFullscreen() {\n  const { frames } = getAnimationFrames({\n    trigger: 'close',\n  })\n\n  const closeAnimation = runAnimation(frames)\n\n  function onFinish() {\n    emits('close')\n    FullscreenImgElement.value?.remove()\n    props.destroy?.()\n    animationState.running = false\n    animationState.ended = true\n  }\n\n  if (!closeAnimation) {\n    console.error('[maz-ui](vFullscreenImg) close animation is not defined')\n    onFinish()\n    return\n  }\n\n  closeAnimation.onfinish = onFinish\n}\n\nfunction onResizeWindow() {\n  if (!isZoomed.value) {\n    setEndAnimationStyles()\n  }\n}\n\nonMounted(() => {\n  showLoader.value = true\n  document.addEventListener('keydown', keydownLister)\n  window.addEventListener('resize', onResizeWindow)\n  addClassToDocument()\n  hasMultipleInstances.value = getAllInstances().length > 1\n})\n\nonBeforeUnmount(() => {\n  document.removeEventListener('keydown', keydownLister)\n  window.removeEventListener('resize', onResizeWindow)\n  removeClassFromDocument()\n})\n</script>\n\n<template>\n  <div\n    ref=\"FullscreenImgElement\"\n    role=\"button\"\n    class=\"m-fullscreen-img m-reset-css\"\n    tabindex=\"0\"\n    @click.stop=\"close\"\n    @keypress.esc.prevent=\"close\"\n  >\n    <button\n      v-if=\"loadedOnce && hasMultipleInstances\"\n      type=\"button\"\n      class=\"m-fullscreen-btn --next\"\n      @click.stop=\"nextPreviousImage('next')\"\n    >\n      <ChevronLeft class=\"maz-rotate-180\" />\n    </button>\n    <button\n      v-if=\"loadedOnce && hasMultipleInstances\"\n      type=\"button\"\n      class=\"m-fullscreen-btn --previous\"\n      @click.stop=\"nextPreviousImage('previous')\"\n    >\n      <ChevronLeft />\n    </button>\n\n    <button type=\"button\" class=\"m-fullscreen-btn --close\" @click=\"close\">\n      <XMark />\n    </button>\n\n    <div class=\"m-fullscreen-img-scroller\">\n      <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions, vuejs-accessibility/click-events-have-key-events -->\n      <img\n        ref=\"ImgElement\"\n        :src=\"currentSrc\"\n        :alt=\"currentAlt ?? undefined\"\n        tabindex=\"0\"\n        :class=\"[imageZoomClasses]\"\n        @load=\"onImageLoaded\"\n        @click.stop=\"zoom && toggleZoom()\"\n      >\n\n      <MazSpinner v-show=\"showLoader\" class=\"m-fullscreen-img-loader\" />\n    </div>\n  </div>\n</template>\n\n<style lang=\"postcss\">\n  html.--m-fullscreen-open {\n  @apply maz-h-screen maz-overflow-hidden;\n}\n</style>\n\n<style lang=\"postcss\" scoped>\n  .m-fullscreen-img {\n  @apply maz-fixed maz-inset-0 maz-z-default-backdrop maz-h-screen maz-w-screen maz-items-center maz-bg-overlay maz-outline-none maz-backdrop-blur;\n\n  .m-fullscreen-img-scroller {\n    @apply maz-flex maz-h-screen maz-w-screen maz-overflow-auto maz-flex-center;\n  }\n\n  img {\n    @apply maz-z-2 maz-outline-none maz-cursor-zoom-in maz-object-center maz-object-contain;\n\n    &.--is-zoomed {\n      @apply maz-cursor-zoom-out;\n    }\n\n    &.--invisible {\n      @apply maz-invisible;\n    }\n\n    &.--absolute {\n      @apply maz-absolute;\n    }\n  }\n\n  .m-fullscreen-img-loader {\n    @apply maz-absolute maz-text-2xl maz-z-15;\n  }\n\n  .m-fullscreen-btn {\n    @apply maz-absolute maz-z-15 maz-flex maz-h-20 maz-w-[7%] maz-min-w-[5em] maz-cursor-pointer maz-p-4 maz-transition-colors maz-duration-200;\n\n    svg {\n      @apply maz-text-3xl maz-transition-transform maz-duration-300 maz-ease-in-out;\n    }\n\n    &:hover {\n      svg {\n        @apply maz-scale-150;\n      }\n    }\n\n    &.--close {\n      @apply maz-right-0 maz-top-0 maz-items-start maz-justify-end;\n    }\n\n    &.--previous {\n      @apply maz-left-0 maz-top-1/2 maz-h-screen maz--translate-y-1/2 maz-transform maz-items-center maz-justify-start;\n    }\n\n    &.--next {\n      @apply maz-right-0 maz-top-1/2 maz-h-screen maz--translate-y-1/2 maz-transform maz-items-center maz-justify-end;\n    }\n  }\n}\n</style>\n","import type { DirectiveBinding } from 'vue'\n\nimport type { MazFullscreenImgProps } from './MazFullscreenImg.vue'\nimport { mount } from '../../helpers/mountComponent'\nimport MazFullscreenImg from './MazFullscreenImg.vue'\n\nexport interface vFullscreenImgOptions {\n  disabled?: boolean\n  scaleOnHover?: boolean\n  blurOnHover?: boolean\n  zoom?: boolean\n  offset?: number\n  animation?: {\n    duration?: number\n    easing?: string\n  }\n}\n\ninterface vFullscreenImgBindingOptions extends vFullscreenImgOptions {\n  src: string\n  alt?: string | null\n}\n\nexport type vFullscreenImgBindingValue = string | vFullscreenImgBindingOptions | undefined\n\nexport type vFullscreenImgBinding = DirectiveBinding<vFullscreenImgBindingValue>\n\nconst STATE_OPEN_CLASS = 'm-fullscreen-is-open'\n\nexport class FullscreenImgHandler {\n  private options: vFullscreenImgBindingOptions\n  private defaultOptions: vFullscreenImgOptions = {\n    scaleOnHover: false,\n    blurOnHover: false,\n    disabled: false,\n    zoom: true,\n    offset: 80,\n    animation: {\n      duration: 300,\n      easing: 'ease-in-out',\n    },\n  }\n\n  private mouseEnterListener: () => void\n  private mouseLeaveListener: () => void\n  private renderPreviewListener: () => void\n\n  private buildOptions(\n    el: HTMLElement,\n    binding: vFullscreenImgBinding,\n  ): vFullscreenImgBindingOptions {\n    const options\n      = typeof binding.value === 'object' ? binding.value : { src: binding.value, alt: undefined }\n\n    const src = options?.src ?? this.getImgSrc(el)\n    const alt = options?.alt ?? this.getImgAlt(el)\n\n    return {\n      ...this.defaultOptions,\n      ...options,\n      src,\n      alt,\n    }\n  }\n\n  get allInstances(): HTMLElement[] {\n    return [...document.querySelectorAll('.m-fullscreen-img-instance')] as HTMLElement[]\n  }\n\n  private getImgSrc(el: HTMLElement) {\n    const imgSrc = this.options?.src || el.getAttribute('src') || el.getAttribute('data-src')\n\n    if (!imgSrc) {\n      throw new Error(\n        '[maz-ui](fullscreen-img) src of image must be provided by `v-fullscreen=\"\"`, `v-fullscreen=\"{ src: \"\" }\"`, `src=\"\"` or `data-src=\"\"` atributes',\n      )\n    }\n\n    return imgSrc\n  }\n\n  private getImgAlt(el: HTMLElement) {\n    return this.options?.alt || el.getAttribute('alt') || el.getAttribute('data-alt')\n  }\n\n  public create(el: HTMLElement, binding: vFullscreenImgBinding) {\n    this.options = this.buildOptions(el, binding)\n\n    if (this.options.disabled)\n      return\n\n    el.style.cursor = 'move'\n\n    if (this.options.scaleOnHover || this.options.blurOnHover) {\n      el.style.transition = 'all 200ms ease-in-out'\n    }\n\n    /**\n     * Set class & data attribute to use it with previous & next functions\n     */\n    el.classList.add('m-fullscreen-img-instance')\n\n    el.setAttribute('data-src', this.getImgSrc(el))\n\n    const alt = this.getImgAlt(el)\n    if (alt) {\n      el.setAttribute('data-alt', alt)\n    }\n\n    this.mouseEnterListener = () => this.mouseEnter(el)\n    this.mouseLeaveListener = () => this.mouseLeave(el)\n    this.renderPreviewListener = () => this.renderPreview(el)\n\n    el.addEventListener('mouseenter', this.mouseEnterListener)\n    el.addEventListener('mouseleave', this.mouseLeaveListener)\n    el.addEventListener('click', this.renderPreviewListener)\n  }\n\n  public update(el: HTMLElement, binding: vFullscreenImgBinding): void {\n    this.options = this.buildOptions(el, binding)\n  }\n\n  public remove(el: HTMLElement): void {\n    el.removeEventListener('mouseenter', this.mouseEnterListener)\n    el.removeEventListener('mouseleave', this.mouseLeaveListener)\n    el.removeEventListener('click', this.renderPreviewListener)\n\n    el.classList.remove('m-fullscreen-img-instance')\n\n    el.style.cursor = ''\n  }\n\n  private renderPreview(el: HTMLElement) {\n    el.classList.add(STATE_OPEN_CLASS)\n\n    return mount<typeof MazFullscreenImg, MazFullscreenImgProps>(MazFullscreenImg, {\n      props: {\n        ...this.options,\n        openInstanceClass: STATE_OPEN_CLASS,\n        clickedElement: el,\n        clickedElementBounds: el.getBoundingClientRect(),\n      },\n      addDestroyInProps: true,\n    })\n  }\n\n  private mouseLeave(el: HTMLElement): void {\n    if (this.options.scaleOnHover)\n      el.style.transform = ''\n    if (this.options.blurOnHover)\n      el.style.filter = ''\n    el.style.zIndex = ''\n  }\n\n  private mouseEnter(el: HTMLElement): void {\n    el.style.zIndex = '1'\n    if (this.options.scaleOnHover)\n      el.style.transform = 'scale(1.04)'\n    if (this.options.blurOnHover)\n      el.style.filter = 'blur(3px)'\n  }\n}\n","import type { ObjectDirective } from 'vue'\nimport { FullscreenImgHandler, type vFullscreenImgBindingValue } from './fullscreen-img.handler'\n\nlet instance: FullscreenImgHandler\n\nconst directive = {\n  mounted(el: HTMLElement, binding) {\n    instance = new FullscreenImgHandler()\n    return instance.create(el, binding)\n  },\n  updated(el: HTMLElement, binding) {\n    return instance.update(el, binding)\n  },\n  unmounted(el: HTMLElement) {\n    return instance.remove(el)\n  },\n} satisfies ObjectDirective<HTMLElement, vFullscreenImgBindingValue>\n\nexport { directive as vFullscreenImg }\n"],"names":["props","__props","emits","__emit","XMark","defineAsyncComponent","ChevronLeft","imageLoaded","ref","showLoader","loadedOnce","hasMultipleInstances","isZoomed","animationState","reactive","currentClickedElement","currentClickedElementBounds","computed","isLandscapeImage","currentSrc","currentAlt","FullscreenImgElement","ImgElement","hideImage","imageZoomClasses","onImageLoaded","_a","_b","watch","value","openFullscreen","close","closeFullscreen","keydownLister","e","nextPreviousImage","addClassToDocument","removeClassFromDocument","getAllInstances","getNewInstanceIndex","allInstances","newInstanceIndex","useNextInstance","currentInstance","nextInstance","src","alt","which","currentInstanceIndex","checkAvailability","setZoomStyles","setEndAnimationStyles","imgElement","toggleZoom","runAnimation","frames","animation","getPositionsOfClikedElement","offset","width","height","windowWidth","windowHeight","scale","centerX","centerY","getAnimationFrames","trigger","top","left","clickedElementWidth","clickedElementHeight","finalStyles","openAnimation","closeAnimation","onFinish","onResizeWindow","onMounted","onBeforeUnmount","STATE_OPEN_CLASS","FullscreenImgHandler","__publicField","el","binding","options","imgSrc","mount","MazFullscreenImg","instance","directive"],"mappings":"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"}

package/dist/chunks/{fullscreen-img.directive.CeREtf7H.cjs → fullscreen-img.directive.CK-8DToy.cjs}

@@ -1,2 +1,2 @@
-"use strict";require('../assets/fullscreen-img.hjNozahA.css');var ee=Object.defineProperty;var te=(a,e,r)=>e in a?ee(a,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):a[e]=r;var v=(a,e,r)=>te(a,typeof e!="symbol"?e+"":e,r);const ne=require("../helpers/mountComponent.cjs"),n=require("vue"),se=require("../components/MazSpinner.cjs"),re=require("../helpers/checkAvailability.cjs"),oe=require("./_plugin-vue_export-helper.BHFhmbuH.cjs"),ie=["onKeypress"],le={class:"m-fullscreen-img-scroller"},ae=["src","alt"],ue=n.defineComponent({__name:"MazFullscreenImg",props:{src:{},clickedElementBounds:{default:void 0},offset:{default:void 0},animation:{default:()=>({duration:300,easing:"ease-in-out"})},openInstanceClass:{default:"m-fullscreen-img-instance"},clickedElement:{},destroy:{type:Function,default:void 0},alt:{default:void 0},zoom:{type:Boolean,default:!0}},emits:["close","previous","next","before-close"],setup(a,{emit:e}){const r=a,i=e,I=n.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./x-mark.Dz-FO7Es.cjs"))),h=n.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./chevron-left.BYUi62el.cjs"))),k=n.ref(!1),g=n.ref(!1),y=n.ref(!1),x=n.ref(!1),c=n.ref(!1),f=n.reactive({running:!1,ended:!1}),A=n.ref(r.clickedElement),D=n.computed(()=>r.clickedElement.getBoundingClientRect()),w=n.ref(),C=n.ref(r.src),_=n.ref(r.alt),H=n.ref(),u=n.ref(),L=n.ref(!0),R=n.computed(()=>({"--is-zoomed":c.value,"--invisible":L.value,"--absolute":!c.value}));function Z(){var t,s;u.value&&(w.value=((t=u.value)==null?void 0:t.naturalWidth)>((s=u.value)==null?void 0:s.naturalHeight)),k.value=!0,g.value=!1,y.value=!0}n.watch(y,t=>{t&&U()},{immediate:!0});function E(){i("before-close"),G()}function S(t){t.key==="Escape"&&(t.preventDefault(),E()),(t.key==="ArrowLeft"||t.key==="ArrowRight")&&(t.preventDefault(),P(t.key==="ArrowRight"?"next":"previous"))}function K(){document.documentElement.classList.add("--m-fullscreen-open")}function T(){document.documentElement.classList.remove("--m-fullscreen-open")}function F(){return[...document.querySelectorAll(".m-fullscreen-img-instance")]}function X(t,s){return s<0?t.length-1:s>=t.length?0:s}function j(t,s){t.classList.remove(r.openInstanceClass),s.classList.add(r.openInstanceClass);const o=s.getAttribute("data-src"),l=s.getAttribute("data-alt");_.value=l,C.value=o??C.value}function P(t){L.value=!0;const s=document.querySelector(`.m-fullscreen-img-instance.${r.openInstanceClass}`);if(s){const o=F(),l=o.indexOf(s),m=t==="next"?l+1:l-1,d=o[X(o,m)];A.value=d,d&&j(s,d),i(t),k.value=!1,g.value=!0,re.checkAvailability(()=>k.value===!0,()=>{L.value=!1,c.value?$():p()},{expectedValue:!0,interval:100,maxAttempts:50})}}function $(){const t=u.value;if(!t){console.error("[maz-ui](vFullscreenImg) ImgElement is not defined");return}t.style.removeProperty("max-width"),t.style.removeProperty("max-height"),t==null||t.style.removeProperty("top"),t==null||t.style.removeProperty("left"),w.value?(t.style.height="100vh",t.style.removeProperty("width")):(t.style.width="100vw",t.style.removeProperty("height"))}function Y(){c.value?(c.value=!c.value,p()):(c.value=!c.value,$())}function B(t){var o;f.running=!0,L.value=!1;const s=(o=u.value)==null?void 0:o.animate(t,{duration:r.animation.duration,easing:r.animation.easing});if(!s){console.error("[maz-ui](vFullscreenImg) animation is not defined"),f.running=!1,f.ended=!0;return}return s}function M(t=r.offset??0){const s=A.value.clientWidth||1,o=A.value.clientHeight||1,l=window.innerWidth,m=window.innerHeight,d=Math.min((l-2*t)/s,(m-2*t)/o),z=(l-s*d)/2,O=(m-o*d)/2;return{centerX:z,centerY:O,width:s,height:o,scale:d}}function N({trigger:t}){const{width:s,height:o,scale:l,centerX:m,centerY:d}=M(),{top:z,left:O,width:J,height:Q}=D.value,q=[{top:`${z}px`,left:`${O}px`,width:`${J}px`,height:`${Q}px`,opacity:0},{top:`${d}px`,left:`${m}px`,width:`${s*l}px`,height:`${o*l}px`,opacity:1}];return{frames:t==="open"?q:q.reverse()}}function p(){const{height:t,width:s,scale:o}=M(),l=w.value?{width:`${s*o}px`,maxHeight:`${t*o}px`}:{height:`${t*o}px`,maxWidth:`${s*o}px`};if(!u.value){console.error("[maz-ui](vFullscreenImg) ImgElement is not defined");return}w.value?(u.value.style.removeProperty("height"),u.value.style.removeProperty("maxHeight")):(u.value.style.removeProperty("width"),u.value.style.removeProperty("maxWidth")),Object.assign(u.value.style,l)}function U(){const{frames:t}=N({trigger:"open"}),s=B(t);if(!s){console.error("[maz-ui](vFullscreenImg) open animation is not defined"),p();return}s.onfinish=()=>{p(),f.running=!1,f.ended=!0}}function G(){const{frames:t}=N({trigger:"close"}),s=B(t);function o(){var l,m;i("close"),(l=H.value)==null||l.remove(),(m=r.destroy)==null||m.call(r),f.running=!1,f.ended=!0}if(!s){console.error("[maz-ui](vFullscreenImg) close animation is not defined"),o();return}s.onfinish=o}function V(){c.value||p()}return n.onMounted(()=>{g.value=!0,document.addEventListener("keydown",S),window.addEventListener("resize",V),K(),x.value=F().length>1}),n.onBeforeUnmount(()=>{document.removeEventListener("keydown",S),window.removeEventListener("resize",V),T()}),(t,s)=>(n.openBlock(),n.createElementBlock("div",{ref_key:"FullscreenImgElement",ref:H,role:"button",class:"m-fullscreen-img m-reset-css",tabindex:"0",onClick:n.withModifiers(E,["stop"]),onKeypress:n.withKeys(n.withModifiers(E,["prevent"]),["esc"])},[y.value&&x.value?(n.openBlock(),n.createElementBlock("button",{key:0,type:"button",class:"m-fullscreen-btn --next",onClick:s[0]||(s[0]=n.withModifiers(o=>P("next"),["stop"]))},[n.createVNode(n.unref(h),{class:"maz-rotate-180"})])):n.createCommentVNode("",!0),y.value&&x.value?(n.openBlock(),n.createElementBlock("button",{key:1,type:"button",class:"m-fullscreen-btn --previous",onClick:s[1]||(s[1]=n.withModifiers(o=>P("previous"),["stop"]))},[n.createVNode(n.unref(h))])):n.createCommentVNode("",!0),n.createElementVNode("button",{type:"button",class:"m-fullscreen-btn --close",onClick:E},[n.createVNode(n.unref(I))]),n.createElementVNode("div",le,[n.createElementVNode("img",{ref_key:"ImgElement",ref:u,src:C.value,alt:_.value??void 0,tabindex:"0",class:n.normalizeClass([R.value]),onLoad:Z,onClick:s[2]||(s[2]=n.withModifiers(o=>t.zoom&&Y(),["stop"]))},null,42,ae),n.withDirectives(n.createVNode(se.default,{class:"m-fullscreen-img-loader"},null,512),[[n.vShow,g.value]])])],40,ie))}}),ce=oe._export_sfc(ue,[["__scopeId","data-v-3b977d1e"]]),W="m-fullscreen-is-open";class me{constructor(){v(this,"options");v(this,"defaultOptions",{scaleOnHover:!1,blurOnHover:!1,disabled:!1,zoom:!0,offset:80,animation:{duration:300,easing:"ease-in-out"}});v(this,"mouseEnterListener");v(this,"mouseLeaveListener");v(this,"renderPreviewListener")}buildOptions(e,r){const i=typeof r.value=="object"?r.value:{src:r.value,alt:void 0},I=(i==null?void 0:i.src)??this.getImgSrc(e),h=(i==null?void 0:i.alt)??this.getImgAlt(e);return{...this.defaultOptions,...i,src:I,alt:h}}get allInstances(){return[...document.querySelectorAll(".m-fullscreen-img-instance")]}getImgSrc(e){var i;const r=((i=this.options)==null?void 0:i.src)||e.getAttribute("src")||e.getAttribute("data-src");if(!r)throw new Error('[maz-ui](fullscreen-img) src of image must be provided by `v-fullscreen=""`, `v-fullscreen="{ src: "" }"`, `src=""` or `data-src=""` atributes');return r}getImgAlt(e){var r;return((r=this.options)==null?void 0:r.alt)||e.getAttribute("alt")||e.getAttribute("data-alt")}create(e,r){if(this.options=this.buildOptions(e,r),this.options.disabled)return;e.style.cursor="move",(this.options.scaleOnHover||this.options.blurOnHover)&&(e.style.transition="all 200ms ease-in-out"),e.classList.add("m-fullscreen-img-instance"),e.setAttribute("data-src",this.getImgSrc(e));const i=this.getImgAlt(e);i&&e.setAttribute("data-alt",i),this.mouseEnterListener=()=>this.mouseEnter(e),this.mouseLeaveListener=()=>this.mouseLeave(e),this.renderPreviewListener=()=>this.renderPreview(e),e.addEventListener("mouseenter",this.mouseEnterListener),e.addEventListener("mouseleave",this.mouseLeaveListener),e.addEventListener("click",this.renderPreviewListener)}update(e,r){this.options=this.buildOptions(e,r)}remove(e){e.removeEventListener("mouseenter",this.mouseEnterListener),e.removeEventListener("mouseleave",this.mouseLeaveListener),e.removeEventListener("click",this.renderPreviewListener),e.classList.remove("m-fullscreen-img-instance"),e.style.cursor=""}renderPreview(e){return e.classList.add(W),ne.mount(ce,{props:{...this.options,openInstanceClass:W,clickedElement:e,clickedElementBounds:e.getBoundingClientRect()},addDestroyInProps:!0})}mouseLeave(e){this.options.scaleOnHover&&(e.style.transform=""),this.options.blurOnHover&&(e.style.filter=""),e.style.zIndex=""}mouseEnter(e){e.style.zIndex="1",this.options.scaleOnHover&&(e.style.transform="scale(1.04)"),this.options.blurOnHover&&(e.style.filter="blur(3px)")}}let b;const de={mounted(a,e){return b=new me,b.create(a,e)},updated(a,e){return b.update(a,e)},unmounted(a){return b.remove(a)}};exports.directive=de;
-//# sourceMappingURL=fullscreen-img.directive.CeREtf7H.cjs.map
+"use strict";require('../assets/fullscreen-img.Dnt1uj_5.css');var ee=Object.defineProperty;var te=(a,e,r)=>e in a?ee(a,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):a[e]=r;var v=(a,e,r)=>te(a,typeof e!="symbol"?e+"":e,r);const ne=require("../helpers/mountComponent.cjs"),n=require("vue"),se=require("../components/MazSpinner.cjs"),re=require("../helpers/checkAvailability.cjs"),oe=require("./_plugin-vue_export-helper.BHFhmbuH.cjs"),ie=["onKeypress"],le={class:"m-fullscreen-img-scroller"},ae=["src","alt"],ue=n.defineComponent({__name:"MazFullscreenImg",props:{src:{},clickedElementBounds:{default:void 0},offset:{default:void 0},animation:{default:()=>({duration:300,easing:"ease-in-out"})},openInstanceClass:{default:"m-fullscreen-img-instance"},clickedElement:{},destroy:{type:Function,default:void 0},alt:{default:void 0},zoom:{type:Boolean,default:!0}},emits:["close","previous","next","before-close"],setup(a,{emit:e}){const r=a,i=e,I=n.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./x-mark.Dz-FO7Es.cjs"))),h=n.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./chevron-left.BYUi62el.cjs"))),k=n.ref(!1),g=n.ref(!1),y=n.ref(!1),x=n.ref(!1),c=n.ref(!1),f=n.reactive({running:!1,ended:!1}),A=n.ref(r.clickedElement),D=n.computed(()=>r.clickedElement.getBoundingClientRect()),w=n.ref(),C=n.ref(r.src),_=n.ref(r.alt),H=n.ref(),u=n.ref(),L=n.ref(!0),R=n.computed(()=>({"--is-zoomed":c.value,"--invisible":L.value,"--absolute":!c.value}));function Z(){var t,s;u.value&&(w.value=((t=u.value)==null?void 0:t.naturalWidth)>((s=u.value)==null?void 0:s.naturalHeight)),k.value=!0,g.value=!1,y.value=!0}n.watch(y,t=>{t&&U()},{immediate:!0});function E(){i("before-close"),G()}function S(t){t.key==="Escape"&&(t.preventDefault(),E()),(t.key==="ArrowLeft"||t.key==="ArrowRight")&&(t.preventDefault(),P(t.key==="ArrowRight"?"next":"previous"))}function K(){document.documentElement.classList.add("--m-fullscreen-open")}function T(){document.documentElement.classList.remove("--m-fullscreen-open")}function F(){return[...document.querySelectorAll(".m-fullscreen-img-instance")]}function X(t,s){return s<0?t.length-1:s>=t.length?0:s}function j(t,s){t.classList.remove(r.openInstanceClass),s.classList.add(r.openInstanceClass);const o=s.getAttribute("data-src"),l=s.getAttribute("data-alt");_.value=l,C.value=o??C.value}function P(t){L.value=!0;const s=document.querySelector(`.m-fullscreen-img-instance.${r.openInstanceClass}`);if(s){const o=F(),l=o.indexOf(s),m=t==="next"?l+1:l-1,d=o[X(o,m)];A.value=d,d&&j(s,d),i(t),k.value=!1,g.value=!0,re.checkAvailability(()=>k.value===!0,()=>{L.value=!1,c.value?$():p()},{expectedValue:!0,interval:100,maxAttempts:50})}}function $(){const t=u.value;if(!t){console.error("[maz-ui](vFullscreenImg) ImgElement is not defined");return}t.style.removeProperty("max-width"),t.style.removeProperty("max-height"),t==null||t.style.removeProperty("top"),t==null||t.style.removeProperty("left"),w.value?(t.style.height="100vh",t.style.removeProperty("width")):(t.style.width="100vw",t.style.removeProperty("height"))}function Y(){c.value?(c.value=!c.value,p()):(c.value=!c.value,$())}function B(t){var o;f.running=!0,L.value=!1;const s=(o=u.value)==null?void 0:o.animate(t,{duration:r.animation.duration,easing:r.animation.easing});if(!s){console.error("[maz-ui](vFullscreenImg) animation is not defined"),f.running=!1,f.ended=!0;return}return s}function M(t=r.offset??0){const s=A.value.clientWidth||1,o=A.value.clientHeight||1,l=window.innerWidth,m=window.innerHeight,d=Math.min((l-2*t)/s,(m-2*t)/o),z=(l-s*d)/2,O=(m-o*d)/2;return{centerX:z,centerY:O,width:s,height:o,scale:d}}function N({trigger:t}){const{width:s,height:o,scale:l,centerX:m,centerY:d}=M(),{top:z,left:O,width:J,height:Q}=D.value,q=[{top:`${z}px`,left:`${O}px`,width:`${J}px`,height:`${Q}px`,opacity:0},{top:`${d}px`,left:`${m}px`,width:`${s*l}px`,height:`${o*l}px`,opacity:1}];return{frames:t==="open"?q:q.reverse()}}function p(){const{height:t,width:s,scale:o}=M(),l=w.value?{width:`${s*o}px`,maxHeight:`${t*o}px`}:{height:`${t*o}px`,maxWidth:`${s*o}px`};if(!u.value){console.error("[maz-ui](vFullscreenImg) ImgElement is not defined");return}w.value?(u.value.style.removeProperty("height"),u.value.style.removeProperty("maxHeight")):(u.value.style.removeProperty("width"),u.value.style.removeProperty("maxWidth")),Object.assign(u.value.style,l)}function U(){const{frames:t}=N({trigger:"open"}),s=B(t);if(!s){console.error("[maz-ui](vFullscreenImg) open animation is not defined"),p();return}s.onfinish=()=>{p(),f.running=!1,f.ended=!0}}function G(){const{frames:t}=N({trigger:"close"}),s=B(t);function o(){var l,m;i("close"),(l=H.value)==null||l.remove(),(m=r.destroy)==null||m.call(r),f.running=!1,f.ended=!0}if(!s){console.error("[maz-ui](vFullscreenImg) close animation is not defined"),o();return}s.onfinish=o}function V(){c.value||p()}return n.onMounted(()=>{g.value=!0,document.addEventListener("keydown",S),window.addEventListener("resize",V),K(),x.value=F().length>1}),n.onBeforeUnmount(()=>{document.removeEventListener("keydown",S),window.removeEventListener("resize",V),T()}),(t,s)=>(n.openBlock(),n.createElementBlock("div",{ref_key:"FullscreenImgElement",ref:H,role:"button",class:"m-fullscreen-img m-reset-css",tabindex:"0",onClick:n.withModifiers(E,["stop"]),onKeypress:n.withKeys(n.withModifiers(E,["prevent"]),["esc"])},[y.value&&x.value?(n.openBlock(),n.createElementBlock("button",{key:0,type:"button",class:"m-fullscreen-btn --next",onClick:s[0]||(s[0]=n.withModifiers(o=>P("next"),["stop"]))},[n.createVNode(n.unref(h),{class:"maz-rotate-180"})])):n.createCommentVNode("",!0),y.value&&x.value?(n.openBlock(),n.createElementBlock("button",{key:1,type:"button",class:"m-fullscreen-btn --previous",onClick:s[1]||(s[1]=n.withModifiers(o=>P("previous"),["stop"]))},[n.createVNode(n.unref(h))])):n.createCommentVNode("",!0),n.createElementVNode("button",{type:"button",class:"m-fullscreen-btn --close",onClick:E},[n.createVNode(n.unref(I))]),n.createElementVNode("div",le,[n.createElementVNode("img",{ref_key:"ImgElement",ref:u,src:C.value,alt:_.value??void 0,tabindex:"0",class:n.normalizeClass([R.value]),onLoad:Z,onClick:s[2]||(s[2]=n.withModifiers(o=>t.zoom&&Y(),["stop"]))},null,42,ae),n.withDirectives(n.createVNode(se.default,{class:"m-fullscreen-img-loader"},null,512),[[n.vShow,g.value]])])],40,ie))}}),ce=oe._export_sfc(ue,[["__scopeId","data-v-9d1598d9"]]),W="m-fullscreen-is-open";class me{constructor(){v(this,"options");v(this,"defaultOptions",{scaleOnHover:!1,blurOnHover:!1,disabled:!1,zoom:!0,offset:80,animation:{duration:300,easing:"ease-in-out"}});v(this,"mouseEnterListener");v(this,"mouseLeaveListener");v(this,"renderPreviewListener")}buildOptions(e,r){const i=typeof r.value=="object"?r.value:{src:r.value,alt:void 0},I=(i==null?void 0:i.src)??this.getImgSrc(e),h=(i==null?void 0:i.alt)??this.getImgAlt(e);return{...this.defaultOptions,...i,src:I,alt:h}}get allInstances(){return[...document.querySelectorAll(".m-fullscreen-img-instance")]}getImgSrc(e){var i;const r=((i=this.options)==null?void 0:i.src)||e.getAttribute("src")||e.getAttribute("data-src");if(!r)throw new Error('[maz-ui](fullscreen-img) src of image must be provided by `v-fullscreen=""`, `v-fullscreen="{ src: "" }"`, `src=""` or `data-src=""` atributes');return r}getImgAlt(e){var r;return((r=this.options)==null?void 0:r.alt)||e.getAttribute("alt")||e.getAttribute("data-alt")}create(e,r){if(this.options=this.buildOptions(e,r),this.options.disabled)return;e.style.cursor="move",(this.options.scaleOnHover||this.options.blurOnHover)&&(e.style.transition="all 200ms ease-in-out"),e.classList.add("m-fullscreen-img-instance"),e.setAttribute("data-src",this.getImgSrc(e));const i=this.getImgAlt(e);i&&e.setAttribute("data-alt",i),this.mouseEnterListener=()=>this.mouseEnter(e),this.mouseLeaveListener=()=>this.mouseLeave(e),this.renderPreviewListener=()=>this.renderPreview(e),e.addEventListener("mouseenter",this.mouseEnterListener),e.addEventListener("mouseleave",this.mouseLeaveListener),e.addEventListener("click",this.renderPreviewListener)}update(e,r){this.options=this.buildOptions(e,r)}remove(e){e.removeEventListener("mouseenter",this.mouseEnterListener),e.removeEventListener("mouseleave",this.mouseLeaveListener),e.removeEventListener("click",this.renderPreviewListener),e.classList.remove("m-fullscreen-img-instance"),e.style.cursor=""}renderPreview(e){return e.classList.add(W),ne.mount(ce,{props:{...this.options,openInstanceClass:W,clickedElement:e,clickedElementBounds:e.getBoundingClientRect()},addDestroyInProps:!0})}mouseLeave(e){this.options.scaleOnHover&&(e.style.transform=""),this.options.blurOnHover&&(e.style.filter=""),e.style.zIndex=""}mouseEnter(e){e.style.zIndex="1",this.options.scaleOnHover&&(e.style.transform="scale(1.04)"),this.options.blurOnHover&&(e.style.filter="blur(3px)")}}let b;const de={mounted(a,e){return b=new me,b.create(a,e)},updated(a,e){return b.update(a,e)},unmounted(a){return b.remove(a)}};exports.directive=de;
+//# sourceMappingURL=fullscreen-img.directive.CK-8DToy.cjs.map

package/dist/chunks/fullscreen-img.directive.CK-8DToy.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fullscreen-img.directive.CK-8DToy.cjs","sources":["../../src/directives/vFullscreenImg/MazFullscreenImg.vue","../../src/directives/vFullscreenImg/fullscreen-img.handler.ts","../../src/directives/vFullscreenImg/fullscreen-img.directive.ts"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { computed, defineAsyncComponent, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'\nimport MazSpinner from '../../components/MazSpinner.vue'\n\nimport { checkAvailability } from '../../helpers/checkAvailability'\n\nconst props = withDefaults(defineProps<MazFullscreenImgProps>(), {\n  zoom: true,\n  offset: undefined,\n  destroy: undefined,\n  alt: undefined,\n  animation: () => ({\n    duration: 300,\n    easing: 'ease-in-out',\n  }),\n  clickedElementBounds: undefined,\n  openInstanceClass: 'm-fullscreen-img-instance',\n})\n\nconst emits = defineEmits(['close', 'previous', 'next', 'before-close'])\n\nconst XMark = defineAsyncComponent(() => import('../../../icons/x-mark.svg'))\nconst ChevronLeft = defineAsyncComponent(() => import('../../../icons/chevron-left.svg'))\n\nexport interface MazFullscreenImgProps {\n  src: string\n  clickedElementBounds?: {\n    top: number\n    left: number\n    height: number\n    width: number\n  }\n  offset?: number\n  animation?: {\n    duration?: number\n    easing?: string\n  }\n  openInstanceClass?: string\n  clickedElement: HTMLElement\n  destroy?: () => void\n  alt?: string | null\n  zoom?: boolean\n}\n\nconst imageLoaded = ref(false)\nconst showLoader = ref(false)\nconst loadedOnce = ref(false)\nconst hasMultipleInstances = ref(false)\nconst isZoomed = ref(false)\nconst animationState = reactive({\n  running: false,\n  ended: false,\n})\n\nconst currentClickedElement = ref(props.clickedElement)\nconst currentClickedElementBounds = computed(() => props.clickedElement.getBoundingClientRect())\nconst isLandscapeImage = ref()\n\nconst currentSrc = ref(props.src)\nconst currentAlt = ref<string | null | undefined>(props.alt)\n\nconst FullscreenImgElement = ref<HTMLDivElement>()\nconst ImgElement = ref<HTMLImageElement>()\nconst hideImage = ref(true)\n\nconst imageZoomClasses = computed<HTMLAttributes['class']>(() => {\n  return {\n    '--is-zoomed': isZoomed.value,\n    '--invisible': hideImage.value,\n    '--absolute': !isZoomed.value,\n  }\n})\n\nfunction onImageLoaded() {\n  if (ImgElement.value) {\n    isLandscapeImage.value = ImgElement.value?.naturalWidth > ImgElement.value?.naturalHeight\n  }\n\n  imageLoaded.value = true\n  showLoader.value = false\n  loadedOnce.value = true\n}\n\nwatch(\n  loadedOnce,\n  (value) => {\n    if (value) {\n      openFullscreen()\n    }\n  },\n  { immediate: true },\n)\n\nfunction close() {\n  emits('before-close')\n  closeFullscreen()\n}\n\nfunction keydownLister(e: KeyboardEvent) {\n  if (e.key === 'Escape') {\n    e.preventDefault()\n    close()\n  }\n\n  if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n    e.preventDefault()\n    nextPreviousImage(e.key === 'ArrowRight' ? 'next' : 'previous')\n  }\n}\n\nfunction addClassToDocument() {\n  document.documentElement.classList.add('--m-fullscreen-open')\n}\n\nfunction removeClassFromDocument() {\n  document.documentElement.classList.remove('--m-fullscreen-open')\n}\n\nfunction getAllInstances(): HTMLElement[] {\n  return [...document.querySelectorAll('.m-fullscreen-img-instance')] as HTMLElement[]\n}\n\nfunction getNewInstanceIndex(allInstances: HTMLElement[], newInstanceIndex: number): number {\n  if (newInstanceIndex < 0) {\n    return allInstances.length - 1\n  }\n  if (newInstanceIndex >= allInstances.length) {\n    return 0\n  }\n  return newInstanceIndex\n}\n\nfunction useNextInstance(currentInstance: HTMLElement, nextInstance: HTMLElement) {\n  currentInstance.classList.remove(props.openInstanceClass)\n  nextInstance.classList.add(props.openInstanceClass)\n\n  const src: string | null = nextInstance.getAttribute('data-src')\n  const alt: string | null = nextInstance.getAttribute('data-alt')\n\n  currentAlt.value = alt\n  currentSrc.value = src ?? currentSrc.value\n}\n\nfunction nextPreviousImage(which: 'next' | 'previous'): void {\n  hideImage.value = true\n\n  const currentInstance: HTMLElement | null = document.querySelector(\n    `.m-fullscreen-img-instance.${props.openInstanceClass}`,\n  )\n\n  if (currentInstance) {\n    const allInstances = getAllInstances()\n    const currentInstanceIndex = allInstances.indexOf(currentInstance)\n    const newInstanceIndex\n        = which === 'next' ? currentInstanceIndex + 1 : currentInstanceIndex - 1\n\n    const nextInstance = allInstances[getNewInstanceIndex(allInstances, newInstanceIndex)]\n    currentClickedElement.value = nextInstance\n\n    if (nextInstance) {\n      useNextInstance(currentInstance, nextInstance)\n    }\n\n    emits(which)\n\n    imageLoaded.value = false\n    showLoader.value = true\n\n    checkAvailability(() => imageLoaded.value === true, () => {\n      hideImage.value = false\n      if (isZoomed.value) {\n        setZoomStyles()\n      }\n      else {\n        setEndAnimationStyles()\n      }\n    }, {\n      expectedValue: true,\n      interval: 100,\n      maxAttempts: 50,\n    })\n  }\n}\n\nfunction setZoomStyles() {\n  const imgElement = ImgElement.value\n\n  if (!imgElement) {\n    console.error('[maz-ui](vFullscreenImg) ImgElement is not defined')\n    return\n  }\n\n  imgElement.style.removeProperty('max-width')\n  imgElement.style.removeProperty('max-height')\n  imgElement?.style.removeProperty('top')\n  imgElement?.style.removeProperty('left')\n\n  if (!isLandscapeImage.value) {\n    imgElement.style.width = `100vw`\n    imgElement.style.removeProperty('height')\n  }\n  else {\n    imgElement.style.height = `100vh`\n    imgElement.style.removeProperty('width')\n  }\n}\n\nfunction toggleZoom() {\n  if (isZoomed.value) {\n    isZoomed.value = !isZoomed.value\n    setEndAnimationStyles()\n  }\n  else {\n    isZoomed.value = !isZoomed.value\n    setZoomStyles()\n  }\n}\n\nfunction runAnimation(frames: Keyframe[] | PropertyIndexedKeyframes) {\n  animationState.running = true\n  hideImage.value = false\n\n  const animation = ImgElement.value?.animate(frames, {\n    duration: props.animation.duration,\n    easing: props.animation.easing,\n  })\n\n  if (!animation) {\n    console.error('[maz-ui](vFullscreenImg) animation is not defined')\n    animationState.running = false\n    animationState.ended = true\n    return\n  }\n\n  return animation\n}\n\nfunction getPositionsOfClikedElement(offset = props.offset ?? 0) {\n  const width = currentClickedElement.value.clientWidth || 1\n  const height = currentClickedElement.value.clientHeight || 1\n\n  const windowWidth = window.innerWidth\n  const windowHeight = window.innerHeight\n\n  const scale = Math.min(\n    (windowWidth - 2 * offset) / width,\n    (windowHeight - 2 * offset) / height,\n  )\n\n  const centerX = (windowWidth - width * scale) / 2\n  const centerY = (windowHeight - height * scale) / 2\n\n  return {\n    centerX,\n    centerY,\n    width,\n    height,\n    scale,\n  }\n}\n\nfunction getAnimationFrames({ trigger }: { trigger: 'open' | 'close' }) {\n  const { width, height, scale, centerX, centerY } = getPositionsOfClikedElement()\n\n  const { top, left, width: clickedElementWidth, height: clickedElementHeight } = currentClickedElementBounds.value\n\n  const frames = [\n    {\n      top: `${top}px`,\n      left: `${left}px`,\n      width: `${clickedElementWidth}px`,\n      height: `${clickedElementHeight}px`,\n      opacity: 0,\n    },\n    {\n      top: `${centerY}px`,\n      left: `${centerX}px`,\n      width: `${width * scale}px`,\n      height: `${height * scale}px`,\n      opacity: 1,\n    },\n  ]\n\n  return {\n    frames: trigger === 'open' ? frames : frames.reverse(),\n  }\n}\n\nfunction setEndAnimationStyles() {\n  const { height, width, scale } = getPositionsOfClikedElement()\n\n  const finalStyles = isLandscapeImage.value\n    ? {\n        width: `${width * scale}px`,\n        maxHeight: `${height * scale}px`,\n      }\n    : {\n        height: `${height * scale}px`,\n        maxWidth: `${width * scale}px`,\n      }\n\n  if (!ImgElement.value) {\n    console.error('[maz-ui](vFullscreenImg) ImgElement is not defined')\n    return\n  }\n\n  if (isLandscapeImage.value) {\n    ImgElement.value.style.removeProperty('height')\n    ImgElement.value.style.removeProperty('maxHeight')\n  }\n  else {\n    ImgElement.value.style.removeProperty('width')\n    ImgElement.value.style.removeProperty('maxWidth')\n  }\n\n  Object.assign(ImgElement.value.style, finalStyles)\n}\n\nfunction openFullscreen() {\n  const { frames } = getAnimationFrames({\n    trigger: 'open',\n  })\n\n  const openAnimation = runAnimation(frames)\n\n  if (!openAnimation) {\n    console.error('[maz-ui](vFullscreenImg) open animation is not defined')\n    setEndAnimationStyles()\n    return\n  }\n\n  openAnimation.onfinish = () => {\n    setEndAnimationStyles()\n    animationState.running = false\n    animationState.ended = true\n  }\n}\n\nfunction closeFullscreen() {\n  const { frames } = getAnimationFrames({\n    trigger: 'close',\n  })\n\n  const closeAnimation = runAnimation(frames)\n\n  function onFinish() {\n    emits('close')\n    FullscreenImgElement.value?.remove()\n    props.destroy?.()\n    animationState.running = false\n    animationState.ended = true\n  }\n\n  if (!closeAnimation) {\n    console.error('[maz-ui](vFullscreenImg) close animation is not defined')\n    onFinish()\n    return\n  }\n\n  closeAnimation.onfinish = onFinish\n}\n\nfunction onResizeWindow() {\n  if (!isZoomed.value) {\n    setEndAnimationStyles()\n  }\n}\n\nonMounted(() => {\n  showLoader.value = true\n  document.addEventListener('keydown', keydownLister)\n  window.addEventListener('resize', onResizeWindow)\n  addClassToDocument()\n  hasMultipleInstances.value = getAllInstances().length > 1\n})\n\nonBeforeUnmount(() => {\n  document.removeEventListener('keydown', keydownLister)\n  window.removeEventListener('resize', onResizeWindow)\n  removeClassFromDocument()\n})\n</script>\n\n<template>\n  <div\n    ref=\"FullscreenImgElement\"\n    role=\"button\"\n    class=\"m-fullscreen-img m-reset-css\"\n    tabindex=\"0\"\n    @click.stop=\"close\"\n    @keypress.esc.prevent=\"close\"\n  >\n    <button\n      v-if=\"loadedOnce && hasMultipleInstances\"\n      type=\"button\"\n      class=\"m-fullscreen-btn --next\"\n      @click.stop=\"nextPreviousImage('next')\"\n    >\n      <ChevronLeft class=\"maz-rotate-180\" />\n    </button>\n    <button\n      v-if=\"loadedOnce && hasMultipleInstances\"\n      type=\"button\"\n      class=\"m-fullscreen-btn --previous\"\n      @click.stop=\"nextPreviousImage('previous')\"\n    >\n      <ChevronLeft />\n    </button>\n\n    <button type=\"button\" class=\"m-fullscreen-btn --close\" @click=\"close\">\n      <XMark />\n    </button>\n\n    <div class=\"m-fullscreen-img-scroller\">\n      <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions, vuejs-accessibility/click-events-have-key-events -->\n      <img\n        ref=\"ImgElement\"\n        :src=\"currentSrc\"\n        :alt=\"currentAlt ?? undefined\"\n        tabindex=\"0\"\n        :class=\"[imageZoomClasses]\"\n        @load=\"onImageLoaded\"\n        @click.stop=\"zoom && toggleZoom()\"\n      >\n\n      <MazSpinner v-show=\"showLoader\" class=\"m-fullscreen-img-loader\" />\n    </div>\n  </div>\n</template>\n\n<style lang=\"postcss\">\n  html.--m-fullscreen-open {\n  @apply maz-h-screen maz-overflow-hidden;\n}\n</style>\n\n<style lang=\"postcss\" scoped>\n  .m-fullscreen-img {\n  @apply maz-fixed maz-inset-0 maz-z-default-backdrop maz-h-screen maz-w-screen maz-items-center maz-bg-overlay maz-outline-none maz-backdrop-blur;\n\n  .m-fullscreen-img-scroller {\n    @apply maz-flex maz-h-screen maz-w-screen maz-overflow-auto maz-flex-center;\n  }\n\n  img {\n    @apply maz-z-2 maz-outline-none maz-cursor-zoom-in maz-object-center maz-object-contain;\n\n    &.--is-zoomed {\n      @apply maz-cursor-zoom-out;\n    }\n\n    &.--invisible {\n      @apply maz-invisible;\n    }\n\n    &.--absolute {\n      @apply maz-absolute;\n    }\n  }\n\n  .m-fullscreen-img-loader {\n    @apply maz-absolute maz-text-2xl maz-z-15;\n  }\n\n  .m-fullscreen-btn {\n    @apply maz-absolute maz-z-15 maz-flex maz-h-20 maz-w-[7%] maz-min-w-[5em] maz-cursor-pointer maz-p-4 maz-transition-colors maz-duration-200;\n\n    svg {\n      @apply maz-text-3xl maz-transition-transform maz-duration-300 maz-ease-in-out;\n    }\n\n    &:hover {\n      svg {\n        @apply maz-scale-150;\n      }\n    }\n\n    &.--close {\n      @apply maz-right-0 maz-top-0 maz-items-start maz-justify-end;\n    }\n\n    &.--previous {\n      @apply maz-left-0 maz-top-1/2 maz-h-screen maz--translate-y-1/2 maz-transform maz-items-center maz-justify-start;\n    }\n\n    &.--next {\n      @apply maz-right-0 maz-top-1/2 maz-h-screen maz--translate-y-1/2 maz-transform maz-items-center maz-justify-end;\n    }\n  }\n}\n</style>\n","import type { DirectiveBinding } from 'vue'\n\nimport type { MazFullscreenImgProps } from './MazFullscreenImg.vue'\nimport { mount } from '../../helpers/mountComponent'\nimport MazFullscreenImg from './MazFullscreenImg.vue'\n\nexport interface vFullscreenImgOptions {\n  disabled?: boolean\n  scaleOnHover?: boolean\n  blurOnHover?: boolean\n  zoom?: boolean\n  offset?: number\n  animation?: {\n    duration?: number\n    easing?: string\n  }\n}\n\ninterface vFullscreenImgBindingOptions extends vFullscreenImgOptions {\n  src: string\n  alt?: string | null\n}\n\nexport type vFullscreenImgBindingValue = string | vFullscreenImgBindingOptions | undefined\n\nexport type vFullscreenImgBinding = DirectiveBinding<vFullscreenImgBindingValue>\n\nconst STATE_OPEN_CLASS = 'm-fullscreen-is-open'\n\nexport class FullscreenImgHandler {\n  private options: vFullscreenImgBindingOptions\n  private defaultOptions: vFullscreenImgOptions = {\n    scaleOnHover: false,\n    blurOnHover: false,\n    disabled: false,\n    zoom: true,\n    offset: 80,\n    animation: {\n      duration: 300,\n      easing: 'ease-in-out',\n    },\n  }\n\n  private mouseEnterListener: () => void\n  private mouseLeaveListener: () => void\n  private renderPreviewListener: () => void\n\n  private buildOptions(\n    el: HTMLElement,\n    binding: vFullscreenImgBinding,\n  ): vFullscreenImgBindingOptions {\n    const options\n      = typeof binding.value === 'object' ? binding.value : { src: binding.value, alt: undefined }\n\n    const src = options?.src ?? this.getImgSrc(el)\n    const alt = options?.alt ?? this.getImgAlt(el)\n\n    return {\n      ...this.defaultOptions,\n      ...options,\n      src,\n      alt,\n    }\n  }\n\n  get allInstances(): HTMLElement[] {\n    return [...document.querySelectorAll('.m-fullscreen-img-instance')] as HTMLElement[]\n  }\n\n  private getImgSrc(el: HTMLElement) {\n    const imgSrc = this.options?.src || el.getAttribute('src') || el.getAttribute('data-src')\n\n    if (!imgSrc) {\n      throw new Error(\n        '[maz-ui](fullscreen-img) src of image must be provided by `v-fullscreen=\"\"`, `v-fullscreen=\"{ src: \"\" }\"`, `src=\"\"` or `data-src=\"\"` atributes',\n      )\n    }\n\n    return imgSrc\n  }\n\n  private getImgAlt(el: HTMLElement) {\n    return this.options?.alt || el.getAttribute('alt') || el.getAttribute('data-alt')\n  }\n\n  public create(el: HTMLElement, binding: vFullscreenImgBinding) {\n    this.options = this.buildOptions(el, binding)\n\n    if (this.options.disabled)\n      return\n\n    el.style.cursor = 'move'\n\n    if (this.options.scaleOnHover || this.options.blurOnHover) {\n      el.style.transition = 'all 200ms ease-in-out'\n    }\n\n    /**\n     * Set class & data attribute to use it with previous & next functions\n     */\n    el.classList.add('m-fullscreen-img-instance')\n\n    el.setAttribute('data-src', this.getImgSrc(el))\n\n    const alt = this.getImgAlt(el)\n    if (alt) {\n      el.setAttribute('data-alt', alt)\n    }\n\n    this.mouseEnterListener = () => this.mouseEnter(el)\n    this.mouseLeaveListener = () => this.mouseLeave(el)\n    this.renderPreviewListener = () => this.renderPreview(el)\n\n    el.addEventListener('mouseenter', this.mouseEnterListener)\n    el.addEventListener('mouseleave', this.mouseLeaveListener)\n    el.addEventListener('click', this.renderPreviewListener)\n  }\n\n  public update(el: HTMLElement, binding: vFullscreenImgBinding): void {\n    this.options = this.buildOptions(el, binding)\n  }\n\n  public remove(el: HTMLElement): void {\n    el.removeEventListener('mouseenter', this.mouseEnterListener)\n    el.removeEventListener('mouseleave', this.mouseLeaveListener)\n    el.removeEventListener('click', this.renderPreviewListener)\n\n    el.classList.remove('m-fullscreen-img-instance')\n\n    el.style.cursor = ''\n  }\n\n  private renderPreview(el: HTMLElement) {\n    el.classList.add(STATE_OPEN_CLASS)\n\n    return mount<typeof MazFullscreenImg, MazFullscreenImgProps>(MazFullscreenImg, {\n      props: {\n        ...this.options,\n        openInstanceClass: STATE_OPEN_CLASS,\n        clickedElement: el,\n        clickedElementBounds: el.getBoundingClientRect(),\n      },\n      addDestroyInProps: true,\n    })\n  }\n\n  private mouseLeave(el: HTMLElement): void {\n    if (this.options.scaleOnHover)\n      el.style.transform = ''\n    if (this.options.blurOnHover)\n      el.style.filter = ''\n    el.style.zIndex = ''\n  }\n\n  private mouseEnter(el: HTMLElement): void {\n    el.style.zIndex = '1'\n    if (this.options.scaleOnHover)\n      el.style.transform = 'scale(1.04)'\n    if (this.options.blurOnHover)\n      el.style.filter = 'blur(3px)'\n  }\n}\n","import type { ObjectDirective } from 'vue'\nimport { FullscreenImgHandler, type vFullscreenImgBindingValue } from './fullscreen-img.handler'\n\nlet instance: FullscreenImgHandler\n\nconst directive = {\n  mounted(el: HTMLElement, binding) {\n    instance = new FullscreenImgHandler()\n    return instance.create(el, binding)\n  },\n  updated(el: HTMLElement, binding) {\n    return instance.update(el, binding)\n  },\n  unmounted(el: HTMLElement) {\n    return instance.remove(el)\n  },\n} satisfies ObjectDirective<HTMLElement, vFullscreenImgBindingValue>\n\nexport { directive as vFullscreenImg }\n"],"names":["props","__props","emits","__emit","XMark","defineAsyncComponent","ChevronLeft","imageLoaded","ref","showLoader","loadedOnce","hasMultipleInstances","isZoomed","animationState","reactive","currentClickedElement","currentClickedElementBounds","computed","isLandscapeImage","currentSrc","currentAlt","FullscreenImgElement","ImgElement","hideImage","imageZoomClasses","onImageLoaded","_a","_b","watch","value","openFullscreen","close","closeFullscreen","keydownLister","e","nextPreviousImage","addClassToDocument","removeClassFromDocument","getAllInstances","getNewInstanceIndex","allInstances","newInstanceIndex","useNextInstance","currentInstance","nextInstance","src","alt","which","currentInstanceIndex","checkAvailability","setZoomStyles","setEndAnimationStyles","imgElement","toggleZoom","runAnimation","frames","animation","getPositionsOfClikedElement","offset","width","height","windowWidth","windowHeight","scale","centerX","centerY","getAnimationFrames","trigger","top","left","clickedElementWidth","clickedElementHeight","finalStyles","openAnimation","closeAnimation","onFinish","onResizeWindow","onMounted","onBeforeUnmount","STATE_OPEN_CLASS","FullscreenImgHandler","__publicField","el","binding","options","imgSrc","mount","MazFullscreenImg","instance","directive"],"mappings":"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"}