@anzusystems/common-admin 1.49.0 → 2.0.0-rc.1

package/dist/domains/dam/assetSelect/components/AssetSelectListBar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,322 @@
+import { DamAssetType as e } from "../../types/Asset.js";
+import { SORT_BY_SCORE_BEST as t, SORT_BY_SCORE_DATE as n } from "../../../filters/datatable/utils/datatableColumns.js";
+import { SortOrder as r } from "../../../api/types/SortOrder.js";
+import { useAssetListFilter as ee } from "../filter/AssetFilter.js";
+import { useAssetSelectStore as te } from "../store/assetSelectStore.js";
+import { useSidebar as i } from "../composables/assetSelectFilterSidebar.js";
+import { AssetSelectGridView as a, AssetSelectGridViewDefault as o, useGridView as s } from "../composables/assetSelectGridView.js";
+import ne from "../../../filters/datatable/components/ADatatableOrdering.js";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, mergeModels as _, normalizeClass as v, onMounted as re, openBlock as y, renderSlot as b, toDisplayString as x, unref as S, useModel as C, watch as w, withCtx as T, withModifiers as E } from "vue";
+import { useI18n as ie } from "vue-i18n";
+import { VIcon as D } from "vuetify/components/VIcon";
+import { VTooltip as O } from "vuetify/components/VTooltip";
+import { useDisplay as ae } from "vuetify";
+import { VBtn as k } from "vuetify/components/VBtn";
+import { VToolbar as oe } from "vuetify/components/VToolbar";
+import { VDivider as A } from "vuetify/components/VDivider";
+import { storeToRefs as se } from "pinia";
+//#region src/domains/dam/assetSelect/components/AssetSelectListBar.vue?vue&type=script&setup=true&lang.ts
+var j = { class: "d-flex flex-column w-100 px-1 align-center" }, M = { class: "d-flex justify-space-between w-100 align-center" }, N = { class: "d-flex align-center" }, P = { class: "d-flex align-center" }, F = /*@__PURE__*/ g({
+	__name: "AssetSelectListBar",
+	props: /*@__PURE__*/ _({
+		showTypes: {
+			type: Boolean,
+			default: !1
+		},
+		disableSort: {
+			type: Boolean,
+			default: !1
+		},
+		hideFilterToggle: {
+			type: Boolean,
+			default: !1
+		},
+		preselectAssetType: { default: void 0 },
+		preselectInPodcast: {
+			type: [Boolean, null],
+			default: void 0
+		}
+	}, {
+		sort: {
+			default: 1,
+			required: !1
+		},
+		sortModifiers: {}
+	}),
+	emits: /*@__PURE__*/ _(["typeChange", "sortByChange"], ["update:sort"]),
+	setup(g, { emit: _ }) {
+		let F = g, I = _, L = C(g, "sort"), { t: R } = ie(), { gridView: z, setGridView: B } = s(), { mdAndDown: V } = ae();
+		w(V, (e) => {
+			e && z.value === a.Table && B(o);
+		}, { immediate: !0 });
+		let { toggleSidebarLeft: H, sidebarLeft: U, toggleSidebarRight: W, sidebarRight: G } = i(), ce = te(), { filterData: K } = ee(), { assetType: q, inPodcast: J } = se(ce), Y = l(() => q.value === e.Image), X = l(() => q.value === e.Video), Z = l(() => q.value === e.Audio && J.value === !0), le = () => {
+			q.value = e.Image, J.value = null, K.podcastIds = [], I("typeChange", {
+				type: e.Image,
+				inPodcast: null
+			});
+		}, Q = () => {
+			q.value = e.Video, J.value = null, K.podcastIds = [], I("typeChange", {
+				type: e.Video,
+				inPodcast: null
+			});
+		}, $ = () => {
+			q.value = e.Audio, J.value = !0, I("typeChange", {
+				type: e.Audio,
+				inPodcast: !0
+			});
+		}, ue = [
+			{
+				id: 3,
+				titleT: "common.system.datatable.ordering.mostRelevant",
+				sortBy: {
+					key: t,
+					order: r.Desc
+				}
+			},
+			{
+				id: 1,
+				titleT: "common.system.datatable.ordering.mostRecent",
+				sortBy: {
+					key: n,
+					order: r.Desc
+				}
+			},
+			{
+				id: 2,
+				titleT: "common.system.datatable.ordering.oldest",
+				sortBy: {
+					key: n,
+					order: r.Asc
+				}
+			}
+		], de = (e, t) => {
+			let n = t.value.sortBy;
+			(n?.key !== e.sortBy?.key || n?.order !== e.sortBy?.order) && I("sortByChange", e);
+		};
+		return re(() => {
+			F.preselectAssetType === e.Audio && F.preselectInPodcast ? $() : F.preselectAssetType === e.Video && Q();
+		}), (e, t) => (y(), u(oe, {
+			density: "compact",
+			color: "transparent",
+			height: 46,
+			elevation: "0",
+			class: v([g.hideFilterToggle ? "" : "border-b", "subject-select__second-bar"])
+		}, {
+			default: T(() => [b(e.$slots, "second-bar", {}, () => [p("div", j, [p("div", M, [p("div", N, [
+				g.hideFilterToggle ? d("", !0) : (y(), u(k, {
+					key: 0,
+					"aria-label": S(R)("common.assetSelect.meta.filter.toggle"),
+					icon: "",
+					width: 30,
+					height: 30,
+					active: S(U),
+					onClick: S(H)
+				}, {
+					default: T(() => [h(D, {
+						icon: "mdi-tune",
+						size: 16
+					}), h(O, {
+						activator: "parent",
+						location: "bottom"
+					}, {
+						default: T(() => [m(x(S(R)("common.assetSelect.meta.filter.toggle")), 1)]),
+						_: 1
+					})]),
+					_: 1
+				}, 8, [
+					"aria-label",
+					"active",
+					"onClick"
+				])),
+				g.showTypes ? (y(), f(c, { key: 1 }, [
+					h(A, {
+						vertical: "",
+						class: "ml-1 mr-2 my-2"
+					}),
+					h(k, {
+						"aria-label": S(R)("common.assetSelect.assetType.image"),
+						icon: "",
+						width: 30,
+						height: 30,
+						class: "mr-1",
+						"data-cy": "button-image-types",
+						active: Y.value,
+						color: Y.value ? "secondary" : "",
+						variant: Y.value ? "flat" : "text",
+						onClick: E(le, ["stop"])
+					}, {
+						default: T(() => [h(D, {
+							icon: "mdi-image",
+							size: 16
+						}), h(O, {
+							activator: "parent",
+							location: "bottom"
+						}, {
+							default: T(() => [m(x(S(R)("common.assetSelect.assetType.image")), 1)]),
+							_: 1
+						})]),
+						_: 1
+					}, 8, [
+						"aria-label",
+						"active",
+						"color",
+						"variant"
+					]),
+					h(k, {
+						"aria-label": S(R)("common.assetSelect.assetType.video"),
+						icon: "",
+						width: 30,
+						height: 30,
+						class: "mr-1",
+						"data-cy": "button-video-types",
+						active: X.value,
+						color: X.value ? "secondary" : "",
+						variant: X.value ? "flat" : "text",
+						onClick: E(Q, ["stop"])
+					}, {
+						default: T(() => [h(D, {
+							icon: "mdi-video",
+							size: 16
+						}), h(O, {
+							activator: "parent",
+							location: "bottom"
+						}, {
+							default: T(() => [m(x(S(R)("common.assetSelect.assetType.video")), 1)]),
+							_: 1
+						})]),
+						_: 1
+					}, 8, [
+						"aria-label",
+						"active",
+						"color",
+						"variant"
+					]),
+					h(k, {
+						"aria-label": S(R)("common.assetSelect.filter.inPodcast"),
+						icon: "",
+						width: 30,
+						height: 30,
+						"data-cy": "button-in-podcast-types",
+						active: Z.value,
+						color: Z.value ? "secondary" : "",
+						variant: Z.value ? "flat" : "text",
+						onClick: E($, ["stop"])
+					}, {
+						default: T(() => [h(D, {
+							icon: "mdi-podcast",
+							size: 16
+						}), h(O, {
+							activator: "parent",
+							location: "bottom"
+						}, {
+							default: T(() => [m(x(S(R)("common.assetSelect.filter.inPodcast")), 1)]),
+							_: 1
+						})]),
+						_: 1
+					}, 8, [
+						"aria-label",
+						"active",
+						"color",
+						"variant"
+					])
+				], 64)) : d("", !0),
+				b(e.$slots, "second-bar-left")
+			]), p("div", P, [
+				b(e.$slots, "second-bar-right"),
+				g.disableSort ? d("", !0) : (y(), u(ne, {
+					key: 0,
+					modelValue: L.value,
+					"onUpdate:modelValue": t[0] ||= (e) => L.value = e,
+					"custom-options": ue,
+					"pagination-update-custom-cb": de
+				}, null, 8, ["modelValue"])),
+				h(k, {
+					"aria-label": S(R)("common.assetSelect.meta.grid.masonry"),
+					size: "x-small",
+					icon: "",
+					class: "text-medium-emphasis",
+					variant: "text",
+					onClick: t[1] ||= E((e) => S(B)(S(a).Masonry), ["stop"])
+				}, {
+					default: T(() => [h(D, { icon: "mdi-view-compact" }), h(O, {
+						activator: "parent",
+						location: "bottom"
+					}, {
+						default: T(() => [m(x(S(R)("common.assetSelect.meta.grid.masonry")), 1)]),
+						_: 1
+					})]),
+					_: 1
+				}, 8, ["aria-label"]),
+				h(k, {
+					"aria-label": S(R)("common.assetSelect.meta.grid.thumbnail"),
+					icon: "",
+					class: "text-medium-emphasis",
+					size: "x-small",
+					variant: "text",
+					onClick: t[2] ||= E((e) => S(B)(S(a).Thumbnail), ["stop"])
+				}, {
+					default: T(() => [h(D, { icon: "mdi-view-grid" }), h(O, {
+						activator: "parent",
+						location: "bottom"
+					}, {
+						default: T(() => [m(x(S(R)("common.assetSelect.meta.grid.thumbnail")), 1)]),
+						_: 1
+					})]),
+					_: 1
+				}, 8, ["aria-label"]),
+				S(V) ? d("", !0) : (y(), u(k, {
+					key: 1,
+					"aria-label": S(R)("common.assetSelect.meta.grid.table"),
+					size: "x-small",
+					icon: "",
+					class: "text-medium-emphasis",
+					variant: "text",
+					onClick: t[3] ||= E((e) => S(B)(S(a).Table), ["stop"])
+				}, {
+					default: T(() => [h(D, { icon: "mdi-view-headline" }), h(O, {
+						activator: "parent",
+						location: "bottom"
+					}, {
+						default: T(() => [m(x(S(R)("common.assetSelect.meta.grid.table")), 1)]),
+						_: 1
+					})]),
+					_: 1
+				}, 8, ["aria-label"])),
+				h(A, {
+					vertical: "",
+					class: "mx-1 my-2"
+				}),
+				h(k, {
+					"aria-label": S(R)("common.assetSelect.meta.info.toggle"),
+					icon: "",
+					class: "text-medium-emphasis",
+					width: 30,
+					height: 30,
+					active: S(G),
+					onClick: S(W)
+				}, {
+					default: T(() => [h(D, {
+						icon: "mdi-information-outline",
+						size: 16
+					}), h(O, {
+						activator: "parent",
+						location: "bottom"
+					}, {
+						default: T(() => [m(x(S(R)("common.assetSelect.meta.info.toggle")), 1)]),
+						_: 1
+					})]),
+					_: 1
+				}, 8, [
+					"aria-label",
+					"active",
+					"onClick"
+				])
+			])])])])]),
+			_: 3
+		}, 8, ["class"]));
+	}
+});
+//#endregion
+export { F as default };
+
+//# sourceMappingURL=AssetSelectListBar.vue_vue_type_script_setup_true_lang.js.map

package/dist/domains/dam/assetSelect/components/AssetSelectListBar.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetSelectListBar.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","_component_VToolbar","_normalizeClass","_withCtx","_renderSlot","_createElementVNode","_component_VBtn","_unref","_createVNode","_component_VIcon","_component_VTooltip","_createTextVNode","_toDisplayString","_createCommentVNode","_createElementBlock","_Fragment","_component_VDivider","_withModifiers","ADatatableOrdering","ADatatableOrdering_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","AssetSelectListBar_vue_vue_type_script_setup_true_lang_default","\"sort\"","\"sortModifiers\"","__emit","props","__props","emit","sortModel","useModel","useI18n","useGridView","useDisplay","mdAndDown","isMobile","gridView","AssetSelectGridView","setGridView","AssetSelectGridViewDefault","useSidebar","assetSelectStore","useAssetSelectStore","useAssetListFilter","storeToRefs","isImageActive","computed","assetType","DamAssetType","isVideoActive","isPodcastActive","inPodcast","setFilterImage","setFilterVideo","setFilterPodcast","customSortOptions","SORT_BY_SCORE_BEST","SortOrder","SORT_BY_SCORE_DATE","onSortUpdate","current","pagination","option","onMounted","openBlock","createBlock","VToolbar","normalizeClass","withCtx","renderSlot","_ctx","createElementVNode","createCommentVNode","VBtn","unref","t","sidebarLeft","toggleSidebarLeft","createVNode","VIcon","VTooltip","createTextVNode","toDisplayString","createElementBlock","Fragment","VDivider","withModifiers","_cache","$event","sidebarRight","toggleSidebarRight"],"sources":["../../../../../src/domains/dam/assetSelect/components/AssetSelectListBar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useI18n } from 'vue-i18n'\nimport {\n  AssetSelectGridView,\n  AssetSelectGridViewDefault,\n  useGridView,\n} from '@/domains/dam/assetSelect/composables/assetSelectGridView'\nimport { useSidebar } from '@/domains/dam/assetSelect/composables/assetSelectFilterSidebar'\nimport { computed, onMounted, type Ref, watch } from 'vue'\nimport { useDisplay } from 'vuetify'\nimport { DamAssetType, type DamAssetTypeType } from '@/domains/dam/types/Asset'\nimport { useAssetSelectStore } from '@/domains/dam/assetSelect/store/assetSelectStore'\nimport { storeToRefs } from 'pinia'\nimport ADatatableOrdering from '@/domains/filters/datatable/components/ADatatableOrdering.vue'\nimport {\n  type DatatableOrderingOption,\n  SORT_BY_SCORE_BEST,\n  SORT_BY_SCORE_DATE,\n} from '@/domains/filters/datatable/utils/datatableColumns'\nimport { SortOrder } from '@/domains/api/types/SortOrder'\nimport { useAssetListFilter } from '@/domains/dam/assetSelect/filter/AssetFilter'\nimport type { Pagination } from '@/domains/api/composables/pagination'\n\nconst props = withDefaults(\n  defineProps<{\n    showTypes?: boolean\n    disableSort?: boolean\n    hideFilterToggle?: boolean\n    preselectAssetType?: DamAssetTypeType | undefined\n    preselectInPodcast?: boolean | null | undefined\n  }>(),\n  {\n    showTypes: false,\n    disableSort: false,\n    hideFilterToggle: false,\n    preselectAssetType: undefined,\n    preselectInPodcast: undefined,\n  }\n)\nconst emit = defineEmits<{\n  (e: 'typeChange', data: { type: DamAssetTypeType; inPodcast: boolean | null }): void\n  (e: 'sortByChange', data: DatatableOrderingOption): void\n}>()\n\nconst sortModel = defineModel<number>('sort', { default: 1, required: false })\n\nconst { t } = useI18n()\nconst { gridView, setGridView } = useGridView()\nconst { mdAndDown } = useDisplay()\n\nwatch(\n  mdAndDown,\n  (isMobile) => {\n    if (isMobile && gridView.value === AssetSelectGridView.Table) {\n      setGridView(AssetSelectGridViewDefault)\n    }\n  },\n  { immediate: true }\n)\nconst { toggleSidebarLeft, sidebarLeft, toggleSidebarRight, sidebarRight } = useSidebar()\nconst assetSelectStore = useAssetSelectStore()\nconst { filterData } = useAssetListFilter()\nconst { assetType, inPodcast } = storeToRefs(assetSelectStore)\n\nconst isImageActive = computed(() => {\n  return assetType.value === DamAssetType.Image\n})\n\nconst isVideoActive = computed(() => {\n  return assetType.value === DamAssetType.Video\n})\n\nconst isPodcastActive = computed(() => {\n  return assetType.value === DamAssetType.Audio && inPodcast.value === true\n})\n\nconst setFilterImage = () => {\n  assetType.value = DamAssetType.Image\n  inPodcast.value = null\n  filterData.podcastIds = []\n  emit('typeChange', { type: DamAssetType.Image, inPodcast: null })\n}\n\nconst setFilterVideo = () => {\n  assetType.value = DamAssetType.Video\n  inPodcast.value = null\n  filterData.podcastIds = []\n  emit('typeChange', { type: DamAssetType.Video, inPodcast: null })\n}\n\nconst setFilterPodcast = () => {\n  assetType.value = DamAssetType.Audio\n  inPodcast.value = true\n  emit('typeChange', { type: DamAssetType.Audio, inPodcast: true })\n}\n\nconst customSortOptions = [\n  {\n    id: 3,\n    titleT: 'common.system.datatable.ordering.mostRelevant',\n    sortBy: { key: SORT_BY_SCORE_BEST, order: SortOrder.Desc },\n  },\n  {\n    id: 1,\n    titleT: 'common.system.datatable.ordering.mostRecent',\n    sortBy: { key: SORT_BY_SCORE_DATE, order: SortOrder.Desc },\n  },\n  {\n    id: 2,\n    titleT: 'common.system.datatable.ordering.oldest',\n    sortBy: { key: SORT_BY_SCORE_DATE, order: SortOrder.Asc },\n  },\n]\n\n// The pagination is shared by every asset select, so a dialog can open on a sort chosen in another one.\n// The ordering then adopts it, and that adoption must not reach the parent as a change -- it would fetch again.\nconst onSortUpdate = (option: DatatableOrderingOption, pagination: Ref<Pagination>) => {\n  const current = pagination.value.sortBy\n  if (current?.key === option.sortBy?.key && current?.order === option.sortBy?.order) return\n  emit('sortByChange', option)\n}\n\nonMounted(() => {\n  if (props.preselectAssetType === DamAssetType.Audio && props.preselectInPodcast) {\n    setFilterPodcast()\n    return\n  }\n  if (props.preselectAssetType === DamAssetType.Video) {\n    setFilterVideo()\n  }\n})\n</script>\n\n<template>\n  <VToolbar\n    density=\"compact\"\n    color=\"transparent\"\n    :height=\"46\"\n    elevation=\"0\"\n    :class=\"hideFilterToggle ? '' : 'border-b'\"\n    class=\"subject-select__second-bar\"\n  >\n    <slot name=\"second-bar\">\n      <div class=\"d-flex flex-column w-100 px-1 align-center\">\n        <div class=\"d-flex justify-space-between w-100 align-center\">\n          <div class=\"d-flex align-center\">\n            <VBtn\n              v-if=\"!hideFilterToggle\"\n              :aria-label=\"t('common.assetSelect.meta.filter.toggle')\"\n              icon\n              :width=\"30\"\n              :height=\"30\"\n              :active=\"sidebarLeft\"\n              @click=\"toggleSidebarLeft\"\n            >\n              <VIcon\n                icon=\"mdi-tune\"\n                :size=\"16\"\n              />\n              <VTooltip\n                activator=\"parent\"\n                location=\"bottom\"\n              >\n                {{ t('common.assetSelect.meta.filter.toggle') }}\n              </VTooltip>\n            </VBtn>\n            <template v-if=\"showTypes\">\n              <VDivider\n                vertical\n                class=\"ml-1 mr-2 my-2\"\n              />\n              <VBtn\n                :aria-label=\"t('common.assetSelect.assetType.image')\"\n                icon\n                :width=\"30\"\n                :height=\"30\"\n                class=\"mr-1\"\n                data-cy=\"button-image-types\"\n                :active=\"isImageActive\"\n                :color=\"isImageActive ? 'secondary' : ''\"\n                :variant=\"isImageActive ? 'flat' : 'text'\"\n                @click.stop=\"setFilterImage\"\n              >\n                <VIcon\n                  icon=\"mdi-image\"\n                  :size=\"16\"\n                />\n                <VTooltip\n                  activator=\"parent\"\n                  location=\"bottom\"\n                >\n                  {{ t('common.assetSelect.assetType.image') }}\n                </VTooltip>\n              </VBtn>\n              <VBtn\n                :aria-label=\"t('common.assetSelect.assetType.video')\"\n                icon\n                :width=\"30\"\n                :height=\"30\"\n                class=\"mr-1\"\n                data-cy=\"button-video-types\"\n                :active=\"isVideoActive\"\n                :color=\"isVideoActive ? 'secondary' : ''\"\n                :variant=\"isVideoActive ? 'flat' : 'text'\"\n                @click.stop=\"setFilterVideo\"\n              >\n                <VIcon\n                  icon=\"mdi-video\"\n                  :size=\"16\"\n                />\n                <VTooltip\n                  activator=\"parent\"\n                  location=\"bottom\"\n                >\n                  {{ t('common.assetSelect.assetType.video') }}\n                </VTooltip>\n              </VBtn>\n              <VBtn\n                :aria-label=\"t('common.assetSelect.filter.inPodcast')\"\n                icon\n                :width=\"30\"\n                :height=\"30\"\n                data-cy=\"button-in-podcast-types\"\n                :active=\"isPodcastActive\"\n                :color=\"isPodcastActive ? 'secondary' : ''\"\n                :variant=\"isPodcastActive ? 'flat' : 'text'\"\n                @click.stop=\"setFilterPodcast\"\n              >\n                <VIcon\n                  icon=\"mdi-podcast\"\n                  :size=\"16\"\n                />\n                <VTooltip\n                  activator=\"parent\"\n                  location=\"bottom\"\n                >\n                  {{ t('common.assetSelect.filter.inPodcast') }}\n                </VTooltip>\n              </VBtn>\n            </template>\n            <slot name=\"second-bar-left\" />\n          </div>\n          <div class=\"d-flex align-center\">\n            <slot name=\"second-bar-right\" />\n            <ADatatableOrdering\n              v-if=\"!disableSort\"\n              v-model=\"sortModel\"\n              :custom-options=\"customSortOptions\"\n              :pagination-update-custom-cb=\"onSortUpdate\"\n            />\n            <VBtn\n              :aria-label=\"t('common.assetSelect.meta.grid.masonry')\"\n              size=\"x-small\"\n              icon\n              class=\"text-medium-emphasis\"\n              variant=\"text\"\n              @click.stop=\"setGridView(AssetSelectGridView.Masonry)\"\n            >\n              <VIcon icon=\"mdi-view-compact\" />\n              <VTooltip\n                activator=\"parent\"\n                location=\"bottom\"\n              >\n                {{ t('common.assetSelect.meta.grid.masonry') }}\n              </VTooltip>\n            </VBtn>\n            <VBtn\n              :aria-label=\"t('common.assetSelect.meta.grid.thumbnail')\"\n              icon\n              class=\"text-medium-emphasis\"\n              size=\"x-small\"\n              variant=\"text\"\n              @click.stop=\"setGridView(AssetSelectGridView.Thumbnail)\"\n            >\n              <VIcon icon=\"mdi-view-grid\" />\n              <VTooltip\n                activator=\"parent\"\n                location=\"bottom\"\n              >\n                {{ t('common.assetSelect.meta.grid.thumbnail') }}\n              </VTooltip>\n            </VBtn>\n            <VBtn\n              v-if=\"!mdAndDown\"\n              :aria-label=\"t('common.assetSelect.meta.grid.table')\"\n              size=\"x-small\"\n              icon\n              class=\"text-medium-emphasis\"\n              variant=\"text\"\n              @click.stop=\"setGridView(AssetSelectGridView.Table)\"\n            >\n              <VIcon icon=\"mdi-view-headline\" />\n              <VTooltip\n                activator=\"parent\"\n                location=\"bottom\"\n              >\n                {{ t('common.assetSelect.meta.grid.table') }}\n              </VTooltip>\n            </VBtn>\n            <VDivider\n              vertical\n              class=\"mx-1 my-2\"\n            />\n            <VBtn\n              :aria-label=\"t('common.assetSelect.meta.info.toggle')\"\n              icon\n              class=\"text-medium-emphasis\"\n              :width=\"30\"\n              :height=\"30\"\n              :active=\"sidebarRight\"\n              @click=\"toggleSidebarRight\"\n            >\n              <VIcon\n                icon=\"mdi-information-outline\"\n                :size=\"16\"\n              />\n              <VTooltip\n                activator=\"parent\"\n                location=\"bottom\"\n              >\n                {{ t('common.assetSelect.meta.info.toggle') }}\n              </VTooltip>\n            </VBtn>\n          </div>\n        </div>\n      </div>\n    </slot>\n  </VToolbar>\n</template>\n"],"mappings":"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"}

package/dist/domains/dam/assetSelect/components/AssetSelectListTable.js

@@ -0,0 +1,7 @@
+import e from "./AssetSelectListTable.vue_vue_type_script_setup_true_lang.js";
+//#region src/domains/dam/assetSelect/components/AssetSelectListTable.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=AssetSelectListTable.js.map

package/dist/domains/dam/assetSelect/components/AssetSelectListTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetSelectListTable.js","names":["_sfc_main","AssetSelectListTable_vue_vue_type_script_setup_true_lang_default","AssetSelectListTable_default"],"sources":["../../../../../src/domains/dam/assetSelect/components/AssetSelectListTable.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useI18n } from 'vue-i18n'\nimport AssetSelectTableRowItem from '@/domains/dam/assetSelect/components/AssetSelectTableRowItem.vue'\nimport { useAssetSelectActions } from '@/domains/dam/assetSelect/composables/assetSelectListActions'\nimport type { IntegerId } from '@/shared/types/common'\nimport { useDamConfigName } from '@/domains/dam/composables/damConfigName'\n\nwithDefaults(\n  defineProps<{\n    extSystem: IntegerId\n  }>(),\n  {}\n)\n\nconst { t } = useI18n()\n\nconst { onItemClick, assetListItems, loader } = useAssetSelectActions(useDamConfigName())\n</script>\n\n<template>\n  <VTable\n    class=\"a-datatable a-datatable--dialog-sticky-fix\"\n    fixed-header\n  >\n    <thead>\n      <tr>\n        <th class=\"text-left\" />\n        <th class=\"text-left\">\n          {{ t('common.assetSelect.meta.table.image') }}\n        </th>\n        <th class=\"text-left\">\n          {{ t('common.assetSelect.model.texts.displayTitle') }}\n        </th>\n        <th class=\"text-left\">\n          {{ t('common.model.tracking.created') }}\n        </th>\n        <th class=\"text-left\">\n          {{ t('common.assetSelect.meta.table.advanced') }}\n        </th>\n        <th class=\"text-left\">\n          {{ t('common.assetSelect.model.mainFile.fileAttributes.mimeType') }}\n        </th>\n        <th class=\"text-left\">\n          {{ t('common.assetSelect.model.mainFile.fileAttributes.size') }}\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <AssetSelectTableRowItem\n        v-for=\"(item, index) in assetListItems\"\n        :key=\"item.asset.id\"\n        :index=\"index\"\n        :item=\"item\"\n        show-meta-icons\n        @item-click=\"onItemClick($event, extSystem)\"\n      />\n      <tr v-if=\"!loader && assetListItems.length === 0\">\n        <td\n          colspan=\"6\"\n          class=\"text-center\"\n        >\n          {{ t('common.assetSelect.meta.texts.noItemsFound') }}\n        </td>\n      </tr>\n    </tbody>\n  </VTable>\n</template>\n"],"mappings":""}

package/dist/domains/dam/assetSelect/components/AssetSelectListTable.vue.d.ts

@@ -0,0 +1,7 @@
+import { IntegerId } from '../../../../shared/types/common';
+type __VLS_Props = {
+    extSystem: IntegerId;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/domains/dam/assetSelect/components/AssetSelectListTable.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,42 @@
+import { useDamConfigName as e } from "../../composables/damConfigName.js";
+import { useAssetSelectActions as t } from "../composables/assetSelectListActions.js";
+import n from "./AssetSelectTableRowItem.js";
+import { Fragment as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, openBlock as l, renderList as u, toDisplayString as d, unref as f, withCtx as p } from "vue";
+import { useI18n as m } from "vue-i18n";
+import { VTable as h } from "vuetify/components/VTable";
+//#region src/domains/dam/assetSelect/components/AssetSelectListTable.vue?vue&type=script&setup=true&lang.ts
+var g = { class: "text-left" }, _ = { class: "text-left" }, v = { class: "text-left" }, y = { class: "text-left" }, b = { class: "text-left" }, x = { class: "text-left" }, S = { key: 0 }, C = {
+	colspan: "6",
+	class: "text-center"
+}, w = /*@__PURE__*/ c({
+	__name: "AssetSelectListTable",
+	props: { extSystem: {} },
+	setup(c) {
+		let { t: w } = m(), { onItemClick: T, assetListItems: E, loader: D } = t(e());
+		return (e, t) => (l(), i(h, {
+			class: "a-datatable a-datatable--dialog-sticky-fix",
+			"fixed-header": ""
+		}, {
+			default: p(() => [s("thead", null, [s("tr", null, [
+				t[1] ||= s("th", { class: "text-left" }, null, -1),
+				s("th", g, d(f(w)("common.assetSelect.meta.table.image")), 1),
+				s("th", _, d(f(w)("common.assetSelect.model.texts.displayTitle")), 1),
+				s("th", v, d(f(w)("common.model.tracking.created")), 1),
+				s("th", y, d(f(w)("common.assetSelect.meta.table.advanced")), 1),
+				s("th", b, d(f(w)("common.assetSelect.model.mainFile.fileAttributes.mimeType")), 1),
+				s("th", x, d(f(w)("common.assetSelect.model.mainFile.fileAttributes.size")), 1)
+			])]), s("tbody", null, [(l(!0), o(r, null, u(f(E), (e, r) => (l(), i(n, {
+				key: e.asset.id,
+				index: r,
+				item: e,
+				"show-meta-icons": "",
+				onItemClick: t[0] ||= (e) => f(T)(e, c.extSystem)
+			}, null, 8, ["index", "item"]))), 128)), !f(D) && f(E).length === 0 ? (l(), o("tr", S, [s("td", C, d(f(w)("common.assetSelect.meta.texts.noItemsFound")), 1)])) : a("", !0)])]),
+			_: 1
+		}));
+	}
+});
+//#endregion
+export { w as default };
+
+//# sourceMappingURL=AssetSelectListTable.vue_vue_type_script_setup_true_lang.js.map

package/dist/domains/dam/assetSelect/components/AssetSelectListTable.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetSelectListTable.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_component_VTable","_withCtx","_createElementVNode","_toDisplayString","_unref","_createElementBlock","_Fragment","_renderList","AssetSelectTableRowItem","_createCommentVNode","AssetSelectTableRowItem_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","AssetSelectListTable_vue_vue_type_script_setup_true_lang_default","useI18n","useAssetSelectActions","useDamConfigName","openBlock","createBlock","VTable","withCtx","createElementVNode","_cache","toDisplayString","unref","t","createElementBlock","Fragment","renderList","assetListItems","item","onItemClick","$event","__props","loader","createCommentVNode"],"sources":["../../../../../src/domains/dam/assetSelect/components/AssetSelectListTable.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useI18n } from 'vue-i18n'\nimport AssetSelectTableRowItem from '@/domains/dam/assetSelect/components/AssetSelectTableRowItem.vue'\nimport { useAssetSelectActions } from '@/domains/dam/assetSelect/composables/assetSelectListActions'\nimport type { IntegerId } from '@/shared/types/common'\nimport { useDamConfigName } from '@/domains/dam/composables/damConfigName'\n\nwithDefaults(\n  defineProps<{\n    extSystem: IntegerId\n  }>(),\n  {}\n)\n\nconst { t } = useI18n()\n\nconst { onItemClick, assetListItems, loader } = useAssetSelectActions(useDamConfigName())\n</script>\n\n<template>\n  <VTable\n    class=\"a-datatable a-datatable--dialog-sticky-fix\"\n    fixed-header\n  >\n    <thead>\n      <tr>\n        <th class=\"text-left\" />\n        <th class=\"text-left\">\n          {{ t('common.assetSelect.meta.table.image') }}\n        </th>\n        <th class=\"text-left\">\n          {{ t('common.assetSelect.model.texts.displayTitle') }}\n        </th>\n        <th class=\"text-left\">\n          {{ t('common.model.tracking.created') }}\n        </th>\n        <th class=\"text-left\">\n          {{ t('common.assetSelect.meta.table.advanced') }}\n        </th>\n        <th class=\"text-left\">\n          {{ t('common.assetSelect.model.mainFile.fileAttributes.mimeType') }}\n        </th>\n        <th class=\"text-left\">\n          {{ t('common.assetSelect.model.mainFile.fileAttributes.size') }}\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <AssetSelectTableRowItem\n        v-for=\"(item, index) in assetListItems\"\n        :key=\"item.asset.id\"\n        :index=\"index\"\n        :item=\"item\"\n        show-meta-icons\n        @item-click=\"onItemClick($event, extSystem)\"\n      />\n      <tr v-if=\"!loader && assetListItems.length === 0\">\n        <td\n          colspan=\"6\"\n          class=\"text-center\"\n        >\n          {{ t('common.assetSelect.meta.texts.noItemsFound') }}\n        </td>\n      </tr>\n    </tbody>\n  </VTable>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAcA,IAAM,EAAE,SAAMsB,EAAQ,GAEhB,EAAE,gBAAa,mBAAgB,cAAWC,EAAsBC,EAAiB,CAAC;E,kBAItFxB,EAAA,GAAAC,EA6CSC,GAAA;GA5CP,OAAM;GACN,gBAAA;;GAEA,SAAAC,QAsBQ,CAtBRC,EAsBQ,SAAA,MAAA,CArBNA,EAoBK,MAAA,MAAA;IAnBH,AAAA0B,EAAA,OAAA1B,EAAwB,MAAA,EAApB,OAAM,YAAW,GAAA,MAAA,EAAA;IACrBA,EAEK,MAFLS,GAEKR,EADAC,EAAA2B,CAAA,CAAC,CAAA,qCAAA,CAAA,GAAA,CAAA;IAEN7B,EAEK,MAFLU,GAEKT,EADAC,EAAA2B,CAAA,CAAC,CAAA,6CAAA,CAAA,GAAA,CAAA;IAEN7B,EAEK,MAFLW,GAEKV,EADAC,EAAA2B,CAAA,CAAC,CAAA,+BAAA,CAAA,GAAA,CAAA;IAEN7B,EAEK,MAFLY,GAEKX,EADAC,EAAA2B,CAAA,CAAC,CAAA,wCAAA,CAAA,GAAA,CAAA;IAEN7B,EAEK,MAFLa,GAEKZ,EADAC,EAAA2B,CAAA,CAAC,CAAA,2DAAA,CAAA,GAAA,CAAA;IAEN7B,EAEK,MAFLc,GAEKb,EADAC,EAAA2B,CAAA,CAAC,CAAA,uDAAA,CAAA,GAAA,CAAA;G,MAIV7B,EAiBQ,SAAA,MAAA,EAhBNJ,EAAA,EAAA,GAAAO,EAOEC,GAAA,MAAAC,EANwBH,EAAA+B,CAAA,IAAhB,GAAM,OADhBrC,EAAA,GAAAC,EAOES,GAAA;IALC,KAAK4B,EAAK,MAAM;IACT;IACD;IACP,mBAAA;IACC,aAAU,AAAAR,EAAA,QAAA,MAAExB,EAAAiC,CAAA,CAAW,CAACC,GAAQC,EAAA,SAAS;G,yCAEjC,CAAAnC,EAAAoC,CAAA,KAAUpC,EAAA+B,CAAA,CAAc,CAAC,WAAM,KAA1CrC,EAAA,GAAAO,EAOK,MAAAY,GAAA,CANHf,EAKK,MALLgB,GAKKf,EADAC,EAAA2B,CAAA,CAAC,CAAA,4CAAA,CAAA,GAAA,CAAA,C"}

package/dist/domains/dam/assetSelect/components/AssetSelectListTiles.js

@@ -0,0 +1,8 @@
+import e from "./AssetSelectListTiles.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                     */
+//#region src/domains/dam/assetSelect/components/AssetSelectListTiles.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=AssetSelectListTiles.js.map

package/dist/domains/dam/assetSelect/components/AssetSelectListTiles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetSelectListTiles.js","names":["_sfc_main","AssetSelectListTiles_vue_vue_type_script_setup_true_lang_default","AssetSelectListTiles_default"],"sources":["../../../../../src/domains/dam/assetSelect/components/AssetSelectListTiles.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport AssetSelectTilesItem from '@/domains/dam/assetSelect/components/AssetSelectTilesItem.vue'\nimport { useGridView } from '@/domains/dam/assetSelect/composables/assetSelectGridView'\nimport { useAssetSelectActions } from '@/domains/dam/assetSelect/composables/assetSelectListActions'\nimport { useI18n } from 'vue-i18n'\nimport type { IntegerId } from '@/shared/types/common'\nimport { useDamConfigName } from '@/domains/dam/composables/damConfigName'\n\nwithDefaults(\n  defineProps<{\n    extSystem: IntegerId\n  }>(),\n  {}\n)\n\nconst { gridView } = useGridView()\nconst { onItemClick, assetListItems, loader } = useAssetSelectActions(useDamConfigName())\n\nconst { t } = useI18n()\n</script>\n\n<template>\n  <div\n    class=\"asset-list-tiles\"\n    :class=\"'asset-list-tiles--' + gridView\"\n  >\n    <AssetSelectTilesItem\n      v-for=\"(item, index) in assetListItems\"\n      :key=\"item.asset.id\"\n      :index=\"index\"\n      :item=\"item\"\n      show-meta-icons\n      @item-click=\"onItemClick($event, extSystem)\"\n    />\n  </div>\n  <div\n    v-if=\"!loader && assetListItems.length === 0\"\n    class=\"text-body-large d-flex w-100 h-100 align-center justify-center\"\n  >\n    {{ t('common.assetSelect.meta.texts.noItemsFound') }}\n  </div>\n</template>\n\n<style lang=\"scss\">\n// css similar to '.dam-image-grid' in admin-dam, for now renamed here to new class to avoid conflicts\n// consider refactor later according how much different both versions will be\n\n$class-name-root: 'asset-list-tiles';\n$bg-color-light: #f9f9f9;\n$bg-color-dark: #1e1e1e;\n$border-color-light: #e8e9ea;\n$border-color-dark: #2c2c2c;\n$shadow-color-light: #959595;\n$shadow-color-dark: #3d3d3d;\n$bg-color-actions-light: #fff;\n$bg-color-actions-dark: #1a1a1a;\n\n.#{$class-name-root} {\n  display: flex;\n  flex-wrap: wrap;\n  max-width: 100%;\n  padding: 2px;\n\n  &__item {\n    user-select: none;\n    flex-grow: 2;\n    max-width: 600px;\n    padding: 10px;\n    position: relative;\n    overflow: hidden;\n    min-width: 200px;\n    min-height: 260px;\n\n    &-card {\n      border-radius: 5px;\n      overflow: hidden;\n\n      img.anzu-common-asset-image__img {\n        display: block;\n        height: 200px;\n        min-width: 100%;\n        object-fit: cover;\n        width: 100%;\n      }\n\n      &:hover {\n        .#{$class-name-root}__item-card-actions {\n          display: block;\n        }\n      }\n\n      &-actions {\n        border-radius: 4px;\n        position: absolute;\n        top: -2px;\n        right: -5px;\n        display: none;\n        overflow: hidden;\n      }\n    }\n\n    &-text,\n    &-text .text-truncate {\n      font-weight: 500;\n      line-height: 30px;\n      min-height: 38px;\n      max-height: 38px;\n    }\n\n    &--pointer {\n      cursor: pointer;\n    }\n  }\n\n  &--thumbnail {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    width: 100%;\n\n    .#{$class-name-root}__item {\n      min-width: unset;\n      max-width: unset;\n\n      img:not(.img-svg) {\n        object-fit: contain;\n        padding-left: 6px;\n        padding-right: 6px;\n        padding-top: 6px;\n        background-color: transparent !important;\n      }\n    }\n  }\n\n  .#{$class-name-root}__selected-triangle {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    z-index: 1;\n\n    &__bg {\n      content: '';\n      width: 0;\n      height: 0;\n      border-style: solid;\n      border-width: 0 60px 60px 0;\n      border-color: transparent #608a32 transparent transparent;\n      top: 0;\n      right: 0;\n      position: absolute;\n    }\n\n    &__icon {\n      position: absolute;\n      display: block;\n      width: 16px;\n      height: 16px;\n      top: -3px;\n      right: 0;\n    }\n  }\n}\n\n.v-theme--light {\n  .#{$class-name-root} {\n    &__item {\n      &-card {\n        background-color: $bg-color-light;\n        border: 1px solid $border-color-light;\n\n        &:hover {\n          box-shadow: 0 0 3px 1px $shadow-color-light;\n        }\n\n        &-actions {\n          background-color: $bg-color-actions-light;\n        }\n      }\n\n      &--selected {\n        .#{$class-name-root}__item-card {\n          border-color: #608a32;\n        }\n      }\n\n      &--active {\n        .#{$class-name-root}__item-card {\n          border-color: blue;\n        }\n      }\n    }\n  }\n}\n\n.v-theme--dark {\n  .#{$class-name-root} {\n    &__item {\n      &-card {\n        background-color: $bg-color-dark;\n        border: 1px solid $border-color-dark;\n\n        &:hover {\n          box-shadow: 0 0 3px 1px $shadow-color-dark;\n        }\n\n        &-actions {\n          background-color: $bg-color-actions-dark;\n        }\n      }\n\n      &--selected {\n        .#{$class-name-root}__item-card {\n          border-color: #608a32;\n        }\n      }\n\n      &--active {\n        .#{$class-name-root}__item-card {\n          border-color: blue;\n        }\n      }\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/domains/dam/assetSelect/components/AssetSelectListTiles.vue.d.ts

@@ -0,0 +1,7 @@
+import { IntegerId } from '../../../../shared/types/common';
+type __VLS_Props = {
+    extSystem: IntegerId;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/domains/dam/assetSelect/components/AssetSelectListTiles.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,28 @@
+import { useDamConfigName as e } from "../../composables/damConfigName.js";
+import { useAssetSelectActions as t } from "../composables/assetSelectListActions.js";
+import { useGridView as n } from "../composables/assetSelectGridView.js";
+import r from "./AssetSelectTilesItem.js";
+import { Fragment as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, defineComponent as l, normalizeClass as u, openBlock as d, renderList as f, toDisplayString as p, unref as m } from "vue";
+import { useI18n as h } from "vue-i18n";
+//#region src/domains/dam/assetSelect/components/AssetSelectListTiles.vue?vue&type=script&setup=true&lang.ts
+var g = {
+	key: 0,
+	class: "text-body-large d-flex w-100 h-100 align-center justify-center"
+}, _ = /*@__PURE__*/ l({
+	__name: "AssetSelectListTiles",
+	props: { extSystem: {} },
+	setup(l) {
+		let { gridView: _ } = n(), { onItemClick: v, assetListItems: y, loader: b } = t(e()), { t: x } = h();
+		return (e, t) => (d(), s(i, null, [c("div", { class: u(["asset-list-tiles", "asset-list-tiles--" + m(_)]) }, [(d(!0), s(i, null, f(m(y), (e, n) => (d(), a(r, {
+			key: e.asset.id,
+			index: n,
+			item: e,
+			"show-meta-icons": "",
+			onItemClick: t[0] ||= (e) => m(v)(e, l.extSystem)
+		}, null, 8, ["index", "item"]))), 128))], 2), !m(b) && m(y).length === 0 ? (d(), s("div", g, p(m(x)("common.assetSelect.meta.texts.noItemsFound")), 1)) : o("", !0)], 64));
+	}
+});
+//#endregion
+export { _ as default };
+
+//# sourceMappingURL=AssetSelectListTiles.vue_vue_type_script_setup_true_lang.js.map

package/dist/domains/dam/assetSelect/components/AssetSelectListTiles.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetSelectListTiles.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_Fragment","_createElementVNode","_normalizeClass","_unref","_renderList","_createBlock","AssetSelectTilesItem","_toDisplayString","_createCommentVNode","AssetSelectTilesItem_default","_hoisted_1","AssetSelectListTiles_vue_vue_type_script_setup_true_lang_default","useGridView","useAssetSelectActions","useDamConfigName","useI18n","openBlock","createElementBlock","Fragment","createElementVNode","normalizeClass","unref","gridView","renderList","assetListItems","createBlock","item","_cache","onItemClick","$event","__props","loader","toDisplayString","t","createCommentVNode"],"sources":["../../../../../src/domains/dam/assetSelect/components/AssetSelectListTiles.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport AssetSelectTilesItem from '@/domains/dam/assetSelect/components/AssetSelectTilesItem.vue'\nimport { useGridView } from '@/domains/dam/assetSelect/composables/assetSelectGridView'\nimport { useAssetSelectActions } from '@/domains/dam/assetSelect/composables/assetSelectListActions'\nimport { useI18n } from 'vue-i18n'\nimport type { IntegerId } from '@/shared/types/common'\nimport { useDamConfigName } from '@/domains/dam/composables/damConfigName'\n\nwithDefaults(\n  defineProps<{\n    extSystem: IntegerId\n  }>(),\n  {}\n)\n\nconst { gridView } = useGridView()\nconst { onItemClick, assetListItems, loader } = useAssetSelectActions(useDamConfigName())\n\nconst { t } = useI18n()\n</script>\n\n<template>\n  <div\n    class=\"asset-list-tiles\"\n    :class=\"'asset-list-tiles--' + gridView\"\n  >\n    <AssetSelectTilesItem\n      v-for=\"(item, index) in assetListItems\"\n      :key=\"item.asset.id\"\n      :index=\"index\"\n      :item=\"item\"\n      show-meta-icons\n      @item-click=\"onItemClick($event, extSystem)\"\n    />\n  </div>\n  <div\n    v-if=\"!loader && assetListItems.length === 0\"\n    class=\"text-body-large d-flex w-100 h-100 align-center justify-center\"\n  >\n    {{ t('common.assetSelect.meta.texts.noItemsFound') }}\n  </div>\n</template>\n\n<style lang=\"scss\">\n// css similar to '.dam-image-grid' in admin-dam, for now renamed here to new class to avoid conflicts\n// consider refactor later according how much different both versions will be\n\n$class-name-root: 'asset-list-tiles';\n$bg-color-light: #f9f9f9;\n$bg-color-dark: #1e1e1e;\n$border-color-light: #e8e9ea;\n$border-color-dark: #2c2c2c;\n$shadow-color-light: #959595;\n$shadow-color-dark: #3d3d3d;\n$bg-color-actions-light: #fff;\n$bg-color-actions-dark: #1a1a1a;\n\n.#{$class-name-root} {\n  display: flex;\n  flex-wrap: wrap;\n  max-width: 100%;\n  padding: 2px;\n\n  &__item {\n    user-select: none;\n    flex-grow: 2;\n    max-width: 600px;\n    padding: 10px;\n    position: relative;\n    overflow: hidden;\n    min-width: 200px;\n    min-height: 260px;\n\n    &-card {\n      border-radius: 5px;\n      overflow: hidden;\n\n      img.anzu-common-asset-image__img {\n        display: block;\n        height: 200px;\n        min-width: 100%;\n        object-fit: cover;\n        width: 100%;\n      }\n\n      &:hover {\n        .#{$class-name-root}__item-card-actions {\n          display: block;\n        }\n      }\n\n      &-actions {\n        border-radius: 4px;\n        position: absolute;\n        top: -2px;\n        right: -5px;\n        display: none;\n        overflow: hidden;\n      }\n    }\n\n    &-text,\n    &-text .text-truncate {\n      font-weight: 500;\n      line-height: 30px;\n      min-height: 38px;\n      max-height: 38px;\n    }\n\n    &--pointer {\n      cursor: pointer;\n    }\n  }\n\n  &--thumbnail {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    width: 100%;\n\n    .#{$class-name-root}__item {\n      min-width: unset;\n      max-width: unset;\n\n      img:not(.img-svg) {\n        object-fit: contain;\n        padding-left: 6px;\n        padding-right: 6px;\n        padding-top: 6px;\n        background-color: transparent !important;\n      }\n    }\n  }\n\n  .#{$class-name-root}__selected-triangle {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    z-index: 1;\n\n    &__bg {\n      content: '';\n      width: 0;\n      height: 0;\n      border-style: solid;\n      border-width: 0 60px 60px 0;\n      border-color: transparent #608a32 transparent transparent;\n      top: 0;\n      right: 0;\n      position: absolute;\n    }\n\n    &__icon {\n      position: absolute;\n      display: block;\n      width: 16px;\n      height: 16px;\n      top: -3px;\n      right: 0;\n    }\n  }\n}\n\n.v-theme--light {\n  .#{$class-name-root} {\n    &__item {\n      &-card {\n        background-color: $bg-color-light;\n        border: 1px solid $border-color-light;\n\n        &:hover {\n          box-shadow: 0 0 3px 1px $shadow-color-light;\n        }\n\n        &-actions {\n          background-color: $bg-color-actions-light;\n        }\n      }\n\n      &--selected {\n        .#{$class-name-root}__item-card {\n          border-color: #608a32;\n        }\n      }\n\n      &--active {\n        .#{$class-name-root}__item-card {\n          border-color: blue;\n        }\n      }\n    }\n  }\n}\n\n.v-theme--dark {\n  .#{$class-name-root} {\n    &__item {\n      &-card {\n        background-color: $bg-color-dark;\n        border: 1px solid $border-color-dark;\n\n        &:hover {\n          box-shadow: 0 0 3px 1px $shadow-color-dark;\n        }\n\n        &-actions {\n          background-color: $bg-color-actions-dark;\n        }\n      }\n\n      &--selected {\n        .#{$class-name-root}__item-card {\n          border-color: #608a32;\n        }\n      }\n\n      &--active {\n        .#{$class-name-root}__item-card {\n          border-color: blue;\n        }\n      }\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;EAeA,IAAM,EAAE,gBAAac,EAAY,GAC3B,EAAE,gBAAa,mBAAgB,cAAWC,EAAsBC,EAAiB,CAAC,GAElF,EAAE,SAAMC,EAAQ;E,mCAIpBd,EAYM,OAAA,EAXJ,OAAKC,EAAA,CAAC,oBAAkB,uBACOC,EAAAmB,CAAA,CAAQ,CAAA,E,KAEvCxB,EAAA,EAAA,GAAAC,EAOEC,GAAA,MAAAI,EANwBD,EAAAqB,CAAA,IAAhB,GAAM,OADhB1B,EAAA,GAAAO,EAOEC,GAAA;GALC,KAAKoB,EAAK,MAAM;GACT;GACD;GACP,mBAAA;GACC,aAAU,AAAAC,EAAA,QAAA,MAAExB,EAAAyB,CAAA,CAAW,CAACC,GAAQC,EAAA,SAAS;E,8CAIrC,CAAA3B,EAAA4B,CAAA,KAAU5B,EAAAqB,CAAA,CAAc,CAAC,WAAM,KADxC1B,EAAA,GAAAC,EAKM,OALNW,GAKMH,EADDJ,EAAA8B,CAAA,CAAC,CAAA,4CAAA,CAAA,GAAA,CAAA,K"}

package/dist/domains/dam/assetSelect/components/AssetSelectTableRowItem.js

@@ -0,0 +1,8 @@
+import e from "./AssetSelectTableRowItem.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                        */
+//#region src/domains/dam/assetSelect/components/AssetSelectTableRowItem.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=AssetSelectTableRowItem.js.map

package/dist/domains/dam/assetSelect/components/AssetSelectTableRowItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetSelectTableRowItem.js","names":["_sfc_main","AssetSelectTableRowItem_vue_vue_type_script_setup_true_lang_default","AssetSelectTableRowItem_default"],"sources":["../../../../../src/domains/dam/assetSelect/components/AssetSelectTableRowItem.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { AssetSelectListItem } from '@/domains/dam/assetSelect/store/assetSelectStore'\nimport { useI18n } from 'vue-i18n'\nimport { useAssetItemActions } from '@/domains/dam/assetSelect/composables/assetSelectItemActions'\nimport AssetImagePreview from '@/domains/dam/assetSelect/components/AssetImagePreview.vue'\nimport type { DocId } from '@/shared/types/common'\nimport { prettyBytes } from '@/shared/utils/file'\nimport ADatetime from '@/domains/ui/datetime/components/ADatetime.vue'\nimport { toRef } from 'vue'\nimport AssetImageMetaIcons from '@/domains/dam/assetDetail/components/AssetImageMetaIcons.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    index: number\n    item: AssetSelectListItem\n    showMetaIcons?: boolean\n  }>(),\n  {\n    showMetaIcons: false,\n  }\n)\n\nconst emit = defineEmits<{\n  (e: 'itemClick', data: { assetId: DocId; index: number }): void\n}>()\n\nconst { t } = useI18n()\n\nconst IMAGE_HEIGHT = 72\nconst IMAGE_WIDTH = 128\n\nconst item = toRef(props, 'item')\n\nconst { asset, tableImageProperties, assetType, assetStatus } = useAssetItemActions(item)\n\nconst onItemClick = () => {\n  emit('itemClick', { assetId: asset.value.id, index: props.index })\n}\n</script>\n\n<template>\n  <tr\n    class=\"a-datatable__row\"\n    :class=\"{\n      'a-datatable__row--selected': item.selected,\n      'asset-list-table__item--active': item.active,\n    }\"\n    @click.stop.exact=\"onItemClick\"\n  >\n    <td>\n      <VIcon\n        v-if=\"item.selected\"\n        icon=\"mdi-checkbox-outline\"\n        :size=\"20\"\n      />\n      <VIcon\n        v-else\n        icon=\"mdi-checkbox-blank-outline\"\n        :size=\"20\"\n      />\n    </td>\n    <td>\n      <AssetImagePreview\n        :asset-type=\"assetType\"\n        :asset-status=\"assetStatus\"\n        :src=\"tableImageProperties.url\"\n        :background-color=\"tableImageProperties.bgColor\"\n        :width=\"IMAGE_WIDTH\"\n        :height=\"IMAGE_HEIGHT\"\n        :icon-size=\"20\"\n        :fallback-height=\"IMAGE_HEIGHT\"\n      />\n    </td>\n    <td>\n      {{ asset.texts.displayTitle || t('common.damImage.asset.list.noTitle') }}\n    </td>\n    <td>\n      <ADatetime :date-time=\"asset.createdAt\" />\n    </td>\n    <td>\n      <AssetImageMetaIcons\n        :asset-file-properties=\"item.asset.assetFileProperties\"\n        :asset-type=\"assetType\"\n        disable-absolute\n      />\n    </td>\n    <td>\n      {{ asset.mainFile?.fileAttributes.mimeType }}\n    </td>\n    <td>\n      {{ prettyBytes(asset.mainFile?.fileAttributes.size || 0) }}\n    </td>\n  </tr>\n</template>\n\n<style lang=\"scss\">\n// The row of the asset the side panel shows, framed as the active tile is.\n.asset-list-table__item--active {\n  outline: 1px solid blue;\n  outline-offset: -1px;\n}\n</style>\n"],"mappings":""}

package/dist/domains/dam/assetSelect/components/AssetSelectTableRowItem.vue.d.ts

@@ -0,0 +1,22 @@
+import { AssetSelectListItem } from '../store/assetSelectStore';
+import { DocId } from '../../../../shared/types/common';
+type __VLS_Props = {
+    index: number;
+    item: AssetSelectListItem;
+    showMetaIcons?: boolean;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    itemClick: (data: {
+        assetId: DocId;
+        index: number;
+    }) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onItemClick?: ((data: {
+        assetId: DocId;
+        index: number;
+    }) => any) | undefined;
+}>, {
+    showMetaIcons: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;