@webitel/ui-sdk 25.10.66 → 25.10.68

package/dist/{vidstack-Bq6c3Bam-LsSTFDin.js → vidstack-Bq6c3Bam-CcgXYtx3.js}

@@ -5,8 +5,8 @@ var ot = (n) => {
 var Xt = (n, t, s) => t in n ? Qt(n, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : n[t] = s;
 var M = (n, t, s) => Xt(n, typeof t != "symbol" ? t + "" : t, s), X = (n, t, s) => t.has(n) || ot("Cannot " + s);
 var i = (n, t, s) => (X(n, t, "read from private field"), s ? s.call(n) : t.get(n)), d = (n, t, s) => t.has(n) ? ot("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(n) : t.set(n, s), c = (n, t, s, r) => (X(n, t, "write to private field"), r ? r.call(n, s) : t.set(n, s), s), a = (n, t, s) => (X(n, t, "access private method"), s);
-import { y as Yt, x as ut, z as j, A as Zt, b as ti, E as nt, e as lt, B as _, C as ii, F as ei, d as si, G as ai, l as rt, H as dt, D as ni, L as Y, J as Z } from "./install-CW8oHjb5.js";
-import { R as ri } from "./vidstack-DqAw8m9J-CfsZRUOX.js";
+import { y as Yt, x as ut, z as j, A as Zt, b as ti, E as nt, e as lt, B as _, C as ii, F as ei, d as si, G as ai, l as rt, H as dt, D as ni, L as Y, J as Z } from "./install-BX7DtU4E.js";
+import { R as ri } from "./vidstack-DqAw8m9J-C_JvCAxU.js";
 let q = null, z = [], J = [];
 function ht() {
   return q ?? (q = new AudioContext());

package/dist/{vidstack-D2pY00kU-BwJtWNq2.js → vidstack-D2pY00kU-Dd_evVt0.js}

@@ -5,7 +5,7 @@ var w = (t) => {
 var P = (t, e, a) => e in t ? _(t, e, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[e] = a;
 var u = (t, e, a) => P(t, typeof e != "symbol" ? e + "" : e, a), C = (t, e, a) => e.has(t) || w("Cannot " + a);
 var c = (t, e, a) => (C(t, e, "read from private field"), a ? a.call(t) : e.get(t)), m = (t, e, a) => e.has(t) ? w("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, a), y = (t, e, a, o) => (C(t, e, "write to private field"), o ? o.call(t, a) : e.set(t, a), a), s = (t, e, a) => (C(t, e, "access private method"), a);
-import { l as b, h as A, S as O, C as D, d as R, m as M } from "./install-CW8oHjb5.js";
+import { l as b, h as A, S as O, C as D, d as R, m as M } from "./install-BX7DtU4E.js";
 function G() {
   return "https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1";
 }
@@ -94,7 +94,7 @@ class F {
   async load(e) {
     if (!c(this, n))
       throw Error("[vidstack] google cast player was not initialized");
-    return new (await import("./vidstack-google-cast-C7wR4EmH.js")).GoogleCastProvider(c(this, n), e);
+    return new (await import("./vidstack-google-cast-B7elqrpL.js")).GoogleCastProvider(c(this, n), e);
   }
 }
 n = new WeakMap(), r = new WeakSet(), S = async function(e) {

package/dist/{vidstack-DDXt6fpN-CA2iLYFD.js → vidstack-DDXt6fpN-C7cfgYWh.js}

@@ -5,7 +5,7 @@ var g = (s) => {
 var w = (s, t, i) => t in s ? y(s, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : s[t] = i;
 var c = (s, t, i) => w(s, typeof t != "symbol" ? t + "" : t, i), h = (s, t, i) => t.has(s) || g("Cannot " + i);
 var e = (s, t, i) => (h(s, t, "read from private field"), i ? i.call(s) : t.get(s)), l = (s, t, i) => t.has(s) ? g("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(s) : t.set(s, i), p = (s, t, i, a) => (h(s, t, "write to private field"), a ? a.call(s, i) : t.set(s, i), i), u = (s, t, i) => (h(s, t, "access private method"), i);
-import { J as M, l as f, e as A, d as P, R as O, b as S } from "./install-CW8oHjb5.js";
+import { J as M, l as f, e as A, d as P, R as O, b as S } from "./install-BX7DtU4E.js";
 var r, o, b, m;
 class W {
   constructor(t) {

package/dist/{vidstack-D_-9AA6_-PulLI2mI.js → vidstack-D_-9AA6_-Dg186Vwc.js}

@@ -1,4 +1,4 @@
-import { c as d, a as i, I as l, e as m } from "./install-CW8oHjb5.js";
+import { c as d, a as i, I as l, e as m } from "./install-BX7DtU4E.js";
 const p = /* @__PURE__ */ i(
   '<svg viewBox="0 0 32 32" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"></svg>'
 );

package/dist/{vidstack-DqAw8m9J-CfsZRUOX.js → vidstack-DqAw8m9J-C_JvCAxU.js}

@@ -3,7 +3,7 @@ var l = (i) => {
 };
 var c = (i, t, s) => t.has(i) || l("Cannot " + s);
 var r = (i, t, s) => (c(i, t, "read from private field"), s ? s.call(i) : t.get(i)), e = (i, t, s) => t.has(i) ? l("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(i) : t.set(i, s), h = (i, t, s, f) => (c(i, t, "write to private field"), f ? f.call(i, s) : t.set(i, s), s), m = (i, t, s) => (c(i, t, "access private method"), s);
-import { j as p, t as u } from "./install-CW8oHjb5.js";
+import { j as p, t as u } from "./install-BX7DtU4E.js";
 var o, a, n, d;
 class F {
   constructor(t) {

package/dist/{vidstack-audio-CnObeLGZ.js → vidstack-audio-DsdkNpLr.js}

@@ -1,8 +1,8 @@
 var a = Object.defineProperty;
 var o = (i, e, t) => e in i ? a(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
 var r = (i, e, t) => o(i, typeof e != "symbol" ? e + "" : e, t);
-import { s as p } from "./install-CW8oHjb5.js";
-import { H as d, a as u } from "./vidstack-Bq6c3Bam-LsSTFDin.js";
+import { s as p } from "./install-BX7DtU4E.js";
+import { H as d, a as u } from "./vidstack-Bq6c3Bam-CcgXYtx3.js";
 class n extends d {
   constructor(t, s) {
     super(t, s);

package/dist/{vidstack-dash-CrnWMZAr.js → vidstack-dash-CTibUY2Y.js}

@@ -5,9 +5,9 @@ var Y = (n) => {
 var wt = (n, t, e) => t in n ? vt(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
 var I = (n, t, e) => wt(n, typeof t != "symbol" ? t + "" : t, e), b = (n, t, e) => t.has(n) || Y("Cannot " + e);
 var i = (n, t, e) => (b(n, t, "read from private field"), e ? e.call(n) : t.get(n)), f = (n, t, e) => t.has(n) ? Y("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(n) : t.set(n, e), p = (n, t, e, r) => (b(n, t, "write to private field"), r ? r.call(n, e) : t.set(n, e), e), h = (n, t, e) => (b(n, t, "access private method"), e);
-import { o as Et, b as _, p as Lt, d as At, Q as z, l as J, e as Dt, D as N, f as xt, g as O, T as Mt, L as q, q as Ct, r as Nt, t as Rt, h as Ft, j as Z, k as Pt, m as qt, n as _t } from "./install-CW8oHjb5.js";
-import { VideoProvider as $t } from "./vidstack-video-CdqnqAr9.js";
-import { R as jt } from "./vidstack-DqAw8m9J-CfsZRUOX.js";
+import { o as Et, b as _, p as Lt, d as At, Q as z, l as J, e as Dt, D as N, f as xt, g as O, T as Mt, L as q, q as Ct, r as Nt, t as Rt, h as Ft, j as Z, k as Pt, m as qt, n as _t } from "./install-BX7DtU4E.js";
+import { VideoProvider as $t } from "./vidstack-video-Bu1K77pl.js";
+import { R as jt } from "./vidstack-DqAw8m9J-C_JvCAxU.js";
 function W(n) {
   try {
     return new Intl.DisplayNames(navigator.languages, { type: "language" }).of(n) ?? null;

package/dist/{vidstack-google-cast-C7wR4EmH.js → vidstack-google-cast-B7elqrpL.js}

@@ -5,9 +5,9 @@ var W = (d) => {
 var vt = (d, t, s) => t in d ? Lt(d, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : d[t] = s;
 var G = (d, t, s) => vt(d, typeof t != "symbol" ? t + "" : t, s), O = (d, t, s) => t.has(d) || W("Cannot " + s);
 var e = (d, t, s) => (O(d, t, "read from private field"), s ? s.call(d) : t.get(d)), T = (d, t, s) => t.has(d) ? W("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(d) : t.set(d, s), l = (d, t, s, i) => (O(d, t, "write to private field"), i ? i.call(d, s) : t.set(d, s), s), r = (d, t, s) => (O(d, t, "access private method"), s);
-import { y as St, K as L, U as Z, x as At, D as tt, d as V, l as et, e as It, V as bt, L as Rt } from "./install-CW8oHjb5.js";
-import { R as wt } from "./vidstack-DqAw8m9J-CfsZRUOX.js";
-import { g as Mt, a as Dt, b as it, h as st, l as Nt, c as Pt } from "./vidstack-D2pY00kU-BwJtWNq2.js";
+import { y as St, K as L, U as Z, x as At, D as tt, d as V, l as et, e as It, V as bt, L as Rt } from "./install-BX7DtU4E.js";
+import { R as wt } from "./vidstack-DqAw8m9J-C_JvCAxU.js";
+import { g as Mt, a as Dt, b as it, h as st, l as Nt, c as Pt } from "./vidstack-D2pY00kU-Dd_evVt0.js";
 var g, _, at;
 class _t {
   constructor(t) {

package/dist/{vidstack-hls-C6Idke2U.js → vidstack-hls-CVaO-8ff.js}

@@ -5,9 +5,9 @@ var N = (n) => {
 var ot = (n, t, i) => t in n ? rt(n, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : n[t] = i;
 var _ = (n, t, i) => ot(n, typeof t != "symbol" ? t + "" : t, i), R = (n, t, i) => t.has(n) || N("Cannot " + i);
 var e = (n, t, i) => (R(n, t, "read from private field"), i ? i.call(n) : t.get(n)), p = (n, t, i) => t.has(n) ? N("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(n) : t.set(n, i), f = (n, t, i, s) => (R(n, t, "write to private field"), s ? s.call(n, i) : t.set(n, i), i), a = (n, t, i) => (R(n, t, "access private method"), i);
-import { i as ht, b as C, p as at, d as O, Q as V, l as j, e as dt, D as x, f as ut, T as ct, g as k, L as $, h as lt, j as q, k as pt, m as ft, n as vt } from "./install-CW8oHjb5.js";
-import { VideoProvider as yt } from "./vidstack-video-CdqnqAr9.js";
-import { R as gt } from "./vidstack-DqAw8m9J-CfsZRUOX.js";
+import { i as ht, b as C, p as at, d as O, Q as V, l as j, e as dt, D as x, f as ut, T as ct, g as k, L as $, h as lt, j as q, k as pt, m as ft, n as vt } from "./install-BX7DtU4E.js";
+import { VideoProvider as yt } from "./vidstack-video-Bu1K77pl.js";
+import { R as gt } from "./vidstack-DqAw8m9J-C_JvCAxU.js";
 const Lt = (n) => ut(n);
 var T, h, o, D, b, r, E, M, U, F, Q, K, W, B, J, X, Y, z, G, Z, tt;
 class St {

package/dist/{vidstack-video-CdqnqAr9.js → vidstack-video-Bu1K77pl.js}

@@ -5,8 +5,8 @@ var b = (i) => {
 var N = (i, t, e) => t in i ? $(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
 var m = (i, t, e) => N(i, typeof t != "symbol" ? t + "" : t, e), E = (i, t, e) => t.has(i) || b("Cannot " + e);
 var s = (i, t, e) => (E(i, t, "read from private field"), e ? e.call(i) : t.get(i)), r = (i, t, e) => t.has(i) ? b("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(i) : t.set(i, e), c = (i, t, e, n) => (E(i, t, "write to private field"), n ? n.call(i, e) : t.set(i, e), e), p = (i, t, e) => (E(i, t, "access private method"), e);
-import { s as U, u as V, v as A, w as q, x as C, l as F, D as Y, E as _, T as j, g as v } from "./install-CW8oHjb5.js";
-import { H as z, a as B } from "./vidstack-Bq6c3Bam-LsSTFDin.js";
+import { s as U, u as V, v as A, w as q, x as C, l as F, D as Y, E as _, T as j, g as v } from "./install-BX7DtU4E.js";
+import { H as z, a as B } from "./vidstack-Bq6c3Bam-CcgXYtx3.js";
 var P, f, k, D, H;
 class G {
   constructor(t, e) {

package/dist/{vidstack-vimeo-9Y9DFwy9.js → vidstack-vimeo-DnvfVz1H.js}

@@ -5,9 +5,9 @@ var N = (r) => {
 var de = (r, c, e) => c in r ? ue(r, c, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[c] = e;
 var b = (r, c, e) => de(r, typeof c != "symbol" ? c + "" : c, e), S = (r, c, e) => c.has(r) || N("Cannot " + e);
 var t = (r, c, e) => (S(r, c, "read from private field"), e ? e.call(r) : c.get(r)), f = (r, c, e) => c.has(r) ? N("Cannot add the same private member more than once") : c instanceof WeakSet ? c.add(r) : c.set(r, e), u = (r, c, e, i) => (S(r, c, "write to private field"), i ? i.call(r, e) : c.set(r, e), e), o = (r, c, e) => (S(r, c, "access private method"), e);
-import { y as fe, J as U, K as C, p as pe, e as q, d as Q, b as ye, M as _, L as R, l as be, N as ke, T as ve, Q as J } from "./install-CW8oHjb5.js";
-import { R as me } from "./vidstack-DqAw8m9J-CfsZRUOX.js";
-import { E as we } from "./vidstack-DDXt6fpN-CA2iLYFD.js";
+import { y as fe, J as U, K as C, p as pe, e as q, d as Q, b as ye, M as _, L as R, l as be, N as ke, T as ve, Q as J } from "./install-BX7DtU4E.js";
+import { R as me } from "./vidstack-DqAw8m9J-C_JvCAxU.js";
+import { E as we } from "./vidstack-DDXt6fpN-C7cfgYWh.js";
 import { resolveVimeoVideoId as Pe, getVimeoVideoInfo as Te } from "./vidstack-krOAtKMi-B4IZWKdc.js";
 const Ce = [
   "bufferend",

package/dist/{vidstack-youtube-C3w6gYqB.js → vidstack-youtube-Cj2UsmZj.js}

@@ -5,8 +5,8 @@ var B = (r) => {
 var N = (r, n, e) => n in r ? K(r, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[n] = e;
 var T = (r, n, e) => N(r, typeof n != "symbol" ? n + "" : n, e), R = (r, n, e) => n.has(r) || B("Cannot " + e);
 var s = (r, n, e) => (R(r, n, "read from private field"), e ? e.call(r) : n.get(r)), p = (r, n, e) => n.has(r) ? B("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(r) : n.set(r, e), l = (r, n, e, t) => (R(r, n, "write to private field"), t ? t.call(r, e) : n.set(r, e), e), o = (r, n, e) => (R(r, n, "access private method"), e);
-import { y as q, J as z, p as A, e as G, b as H, M as Q, K as C, O as W, t as $, P as X } from "./install-CW8oHjb5.js";
-import { E as Z } from "./vidstack-DDXt6fpN-CA2iLYFD.js";
+import { y as q, J as z, p as A, e as G, b as H, M as Q, K as C, O as W, t as $, P as X } from "./install-BX7DtU4E.js";
+import { E as Z } from "./vidstack-DDXt6fpN-C7cfgYWh.js";
 import { resolveYouTubeVideoId as ee } from "./vidstack-Dm1xEU9Q-qSXq3AI-.js";
 const b = {
   Ended: 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.10.66",
+  "version": "25.10.68",
   "private": false,
   "scripts": {
     "make-all": "npm version patch --git-tag-version false && npm run build && (npm run build:types || true) && (npm run lint:fix || true) && npm run publish-lib",
@@ -56,7 +56,7 @@
     "@vuepic/vue-datepicker": "^4.5.1",
     "@vueuse/components": "^13.0.0",
     "@webitel/api-services": "^0.0.60",
-    "@webitel/styleguide": "^24.12.79",
+    "@webitel/styleguide": "^24.12.80",
     "autosize": "^6.0.1",
     "axios": "^1.8.3",
     "clipboard-copy": "^4.0.1",

package/src/assets/icons/sprite/index.js

@@ -201,6 +201,7 @@ import sttSearch from './stt-search.svg';
 import table from './table.svg';
 import telegramBot from './telegram-bot.svg';
 import tick from './tick.svg';
+import tile from './tile.svg';
 import treeCollapse from './tree-collapse.svg';
 import treeCorner from './tree-corner.svg';
 import treeCross from './tree-cross.svg';
@@ -446,6 +447,7 @@ export default objCamelToKebab({
   checkboxTick,
   log,
   downloadPdf,
+  tile,
 
   recordStart,
   recordStop,

package/src/assets/icons/sprite/tile.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 13C9.65685 13 11 14.3431 11 16V19C11 20.6569 9.65685 22 8 22H5C3.34315 22 2 20.6569 2 19V16C2 14.3431 3.34315 13 5 13H8ZM5 15H8C8.55229 15 9 15.4477 9 16V19C9 19.5523 8.55228 20 8 20H5C4.44772 20 4 19.5523 4 19V16C4 15.4477 4.44772 15 5 15Z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 2C9.65685 2 11 3.34315 11 5V8C11 9.65685 9.65685 11 8 11H5C3.34315 11 2 9.65685 2 8V5C2 3.34315 3.34315 2 5 2H8ZM5 4H8C8.55229 4 9 4.44772 9 5V8C9 8.55228 8.55228 9 8 9H5C4.44772 9 4 8.55228 4 8V5C4 4.44771 4.44772 4 5 4Z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 13C20.6569 13 22 14.3431 22 16V19C22 20.6569 20.6569 22 19 22H16C14.3431 22 13 20.6569 13 19V16C13 14.3431 14.3431 13 16 13H19ZM16 15H19C19.5523 15 20 15.4477 20 16V19C20 19.5523 19.5523 20 19 20H16C15.4477 20 15 19.5523 15 19V16C15 15.4477 15.4477 15 16 15Z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 2C20.6569 2 22 3.34315 22 5V8C22 9.65685 20.6569 11 19 11H16C14.3431 11 13 9.65685 13 8V5C13 3.34315 14.3431 2 16 2H19ZM16 4H19C19.5523 4 20 4.44772 20 5V8C20 8.55228 19.5523 9 19 9H16C15.4477 9 15 8.55228 15 8V5C15 4.44771 15.4477 4 16 4Z"/>
+</svg>

package/src/components/index.js

@@ -27,6 +27,7 @@ import WtEmpty from './wt-empty/wt-empty.vue';
 import WtErrorPage from './wt-error-page/wt-error-page.vue';
 import WtExpansionPanel from './wt-expansion-panel/wt-expansion-panel.vue';
 import WtFiltersPanelWrapper from './wt-filters-panel-wrapper/wt-filters-panel-wrapper.vue';
+import WtGalleria from './wt-galleria/wt-galleria.vue';
 import WtHeadline from './wt-headline/wt-headline.vue';
 import WtHint from './wt-hint/wt-hint.vue';
 import WtIcon from './wt-icon/wt-icon.vue';
@@ -145,6 +146,7 @@ const Components = {
   WtStartPage,
   WtSelectionPopup,
   WtDisplayChipItems,
+  WtGalleria,
   WtVidstackPlayer,
   WtChatEmoji,
 };
@@ -173,6 +175,7 @@ export {
   WtErrorPage,
   WtExpansionPanel,
   WtFiltersPanelWrapper,
+  WtGalleria,
   WtHeaderActions,
   WtHeadline,
   WtHint,

package/src/components/wt-galleria/types/WtGalleria.d.ts

@@ -0,0 +1,6 @@
+export type WtGalleriaItem = {
+  src: string;
+  thumbnailSrc: string;
+  title: string;
+  description?: string;
+};

package/src/components/wt-galleria/wt-galleria.vue

@@ -0,0 +1,229 @@
+<template>
+  <p-galleria
+    ref="galleria" 
+    v-model:visible="visible"
+    v-model:active-index="activeIndex"
+    :value="value"
+    :show-thumbnails="showThumbnails"
+    full-screen
+    circular
+    show-item-navigators
+    :num-visible="5"
+    :pt="{
+        root: {
+            class: [{ 'flex flex-col': fullScreen }],
+        },
+        content: {
+            class: ['relative', { 'wt-galleria__content--fullscreen': fullScreen }]
+        },
+        thumbnails: 'wt-galleria__thumbnails',
+        closeButton: {
+          style: { display: fullScreen ? 'none' : 'block' },
+        },
+    }"
+  >
+    <template #item="{item}: {item: WtGalleriaItem}">
+      <div 
+        class="wt-galleria__image-container"
+        :class="{ 'wt-galleria__image-container--preview': !fullScreen }"
+      >
+        <wt-loader v-if="isImageOnLoad" />
+        <img 
+          v-show="!isImageOnLoad"
+          class="wt-galleria__image" 
+          :class="{ 'wt-galleria__image--fullscreen': fullScreen }"
+          :src="item.src" 
+          :alt="item.title" 
+          @load="onImageLoad"
+        />
+      </div>
+    </template>
+    <template #thumbnail="{item}: {item: WtGalleriaItem}">
+        <img :src="item.thumbnailSrc" :alt="item.title" class="wt-galleria__thumbnail" />
+    </template>
+    <template #closeicon>
+      <wt-icon 
+        icon="close"
+      />
+    </template>
+    <template #previousitemicon>
+      <wt-icon 
+        icon="arrow-left"
+      />
+    </template>
+    <template #nextitemicon>
+      <wt-icon 
+        icon="arrow-right"
+      />
+    </template>
+    <template #previousthumbnailicon>
+      <wt-icon 
+        icon="arrow-left"
+      />
+    </template>
+    <template #nextthumbnailicon>
+      <wt-icon 
+        icon="arrow-right"
+      />
+    </template>
+    <template #footer>
+      <div class="wt-galleria__footer">
+        <wt-icon 
+          icon="tile"
+          @click="toggleThumbnails"
+        />
+        <span v-if="value.length" class="wt-galleria__footer-info">
+            <span>{{ activeIndex + 1 }}/{{ value.length }}</span>
+            <span>{{ value[activeIndex].title }}</span>
+            <span>{{ value[activeIndex].description }}</span>
+        </span>
+        <div class="wt-galleria__footer-actions">
+          <wt-icon 
+            icon="download"
+            @click="emit('download', activeIndex)"
+          />
+          <wt-icon 
+            icon="bucket"
+            @click="handleDelete"
+          />
+          <wt-icon 
+            :icon="fullScreen ? 'collapse' : 'expand'"
+            @click="toggleFullScreen"
+          />
+        </div>
+      </div>
+    </template>
+  </p-galleria>
+  <delete-confirmation-popup
+    :shown="isDeleteConfirmationPopup"
+    :callback="deleteCallback"
+    :delete-count="deleteCount"
+    @close="closeDelete"
+  />
+</template>
+
+<script setup lang="ts">
+import { useDeleteConfirmationPopup } from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/composables/useDeleteConfirmationPopup';
+import type { GalleriaProps } from 'primevue';
+import { computed, defineModel, defineProps, ref, useTemplateRef,watch } from 'vue';
+
+import { useGalleriaFullscreen } from '../../composables'
+import DeleteConfirmationPopup from '../../modules/DeleteConfirmationPopup/components/delete-confirmation-popup.vue';
+import type { WtGalleriaItem } from './types/WtGalleria.d.ts';
+interface Props extends GalleriaProps{
+  value: WtGalleriaItem[];
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits(['download', 'delete']);
+
+const visible = defineModel<boolean>('visible', { required: true });
+const activeIndex = defineModel<number>('activeIndex', { default: 0, required: false });
+const currentImage = computed(() => props.value[activeIndex.value]);
+const galleria = useTemplateRef('galleria')
+const isImageOnLoad = ref(true)
+
+const showThumbnails = ref(true);
+
+const { 
+  fullScreen,
+  toggleFullScreen
+} = useGalleriaFullscreen(galleria)
+
+const {
+  isVisible: isDeleteConfirmationPopup,
+  deleteCount,
+  deleteCallback,
+
+  askDeleteConfirmation,
+  closeDelete,
+} = useDeleteConfirmationPopup();
+
+const toggleThumbnails = () => {
+  showThumbnails.value = !showThumbnails.value
+}
+
+const onImageLoad = () => {
+  isImageOnLoad.value = false
+}
+
+const handleDelete = () => {
+  if (fullScreen.value) toggleFullScreen()
+  askDeleteConfirmation({
+    deleteCount: 1,
+    callback: () => emit('delete', activeIndex)
+  })
+}
+
+watch(() => currentImage.value, () => {
+  isImageOnLoad.value = true
+}, { deep: true })
+
+watch(() => visible.value, () => {
+  if (!visible.value) {
+    activeIndex.value = 0
+  }
+})
+
+watch(() => props.value, () => {
+  if (!props.value.length) { 
+    visible.value = false
+  }
+})
+</script>
+
+<style lang="scss">
+@use '@webitel/styleguide/typography' as *;
+
+.wt-galleria__image-container {
+  max-width: 100%; 
+  display: flex;
+  align-items: center;
+  background: transparent;
+}
+
+.wt-galleria__content--fullscreen {
+  flex: 1 1 0;
+  justify-content: center;
+}
+
+.wt-galleria__image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.wt-galleria__thumbnails {
+  position: absolute;
+  width: 100%;
+  left: 0;
+  bottom: 0;
+}
+
+.wt-galleria__thumbnail {
+  object-fit: cover;
+}
+
+.wt-galleria__footer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.wt-galleria__footer-info {
+  display: flex;
+  gap: 0.5rem;
+  @extend %typo-body-2
+}
+
+.wt-galleria__footer svg {
+  cursor: pointer;
+}
+
+.wt-galleria__footer-actions {
+  margin-left: auto;
+  display: flex;
+  gap: 0.5rem;
+}
+</style>

package/src/components/wt-popup/_variables.scss

@@ -1,5 +1,5 @@
 :root {
-  --popup-wrapper-z-index: 11;
+  --popup-wrapper-z-index: 12;
 
   --popup-shadow-opacity: 0.8;
   --wt-popup-shadow-color: hsla(0, 0%, 0%, var(--popup-shadow-opacity));

package/src/composables/index.ts

@@ -5,6 +5,7 @@ export * from './useCard/useCardComponent';
 export * from './useCard/useCardTabs';
 export * from './useClose/useClose';
 export * from './useDestroyableSortable/useDestroyableSortable';
+export * from './useGalleriaFullscreen/useGalleriaFullscreen';
 export * from './useRepresentableAgentPauseCause/useRepresentableAgentPauseCause';
 export * from './useValidate/useValidate';
 export * from './useWtTable/useWtTable';

package/src/composables/useCard/useCardComponent.js

@@ -15,6 +15,7 @@ export const useCardComponent = (params) => {
     updateItem,
     setId,
     resetState,
+    onLoadErrorHandler,
   } = params;
 
   const router = useRouter();
@@ -63,6 +64,9 @@ export const useCardComponent = (params) => {
       const { id } = route.params;
       await setId(id);
       await loadItem();
+    } catch (err) {
+      if (!onLoadErrorHandler) throw err;
+        onLoadErrorHandler(err)
     } finally {
       isLoading.value = false;
     }

package/src/composables/useGalleriaFullscreen/useGalleriaFullscreen.ts

@@ -0,0 +1,65 @@
+import { computed, onMounted, onUnmounted,ref } from 'vue';
+
+export const useGalleriaFullscreen = (galleriaRef) => {
+  const containerId = computed(() => galleriaRef.value?.container?.$id);
+  const fullScreen = ref(false);
+  const toggleFullScreen = () => {
+    if (fullScreen.value) {
+      closeFullScreen();
+    } else {
+      openFullScreen();
+    }
+  };
+  const onFullScreenChange = () => {
+    fullScreen.value = !fullScreen.value;
+  };
+  const openFullScreen = () => {
+    const element = document.getElementById(containerId.value)
+    if (element.requestFullscreen) {
+      element.requestFullscreen();
+    } else if (element.mozRequestFullScreen) {
+      /* Firefox */
+      element.mozRequestFullScreen();
+    } else if (element.webkitRequestFullscreen) {
+      /* Chrome, Safari & Opera */
+      element.webkitRequestFullscreen();
+    } else if (element.msRequestFullscreen) {
+      /* IE/Edge */
+      element.msRequestFullscreen();
+    }
+  };
+  const closeFullScreen = () => {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    } else if (document.mozCancelFullScreen) {
+      document.mozCancelFullScreen();
+    } else if (document.webkitExitFullscreen) {
+      document.webkitExitFullscreen();
+    } else if (document.msExitFullscreen) {
+      document.msExitFullscreen();
+    }
+  };
+  const bindDocumentListeners = () => {
+    document.addEventListener('fullscreenchange', onFullScreenChange);
+    document.addEventListener('mozfullscreenchange', onFullScreenChange);
+    document.addEventListener('webkitfullscreenchange', onFullScreenChange);
+    document.addEventListener('msfullscreenchange', onFullScreenChange);
+  };
+  const unbindDocumentListeners = () => {
+    document.removeEventListener('fullscreenchange', onFullScreenChange);
+    document.removeEventListener('mozfullscreenchange', onFullScreenChange);
+    document.removeEventListener('webkitfullscreenchange', onFullScreenChange);
+    document.removeEventListener('msfullscreenchange', onFullScreenChange);
+  };
+
+  onMounted(() => {
+    bindDocumentListeners();
+  });
+  onUnmounted(() => {
+    unbindDocumentListeners();
+  });
+  return {
+    fullScreen,
+    toggleFullScreen,
+  };
+};

package/src/modules/CardStoreModule/composables/useCardStore.js

@@ -4,7 +4,8 @@ import { useStore } from 'vuex';
 import getNamespacedState from '../../../store/helpers/getNamespacedState.js';
 
 // eslint-disable-next-line import/prefer-default-export
-export const useCardStore = (namespace) => {
+
+export const useCardStore = (namespace, { onLoadErrorHandler }) => {
   const store = useStore();
 
   const cardNamespace = `${namespace}/card`;
@@ -16,8 +17,13 @@ export const useCardStore = (namespace) => {
     () => getNamespacedState(store.state, cardNamespace).itemInstance,
   );
 
-  function loadItem(payload) {
-    return store.dispatch(`${cardNamespace}/LOAD_ITEM`, payload);
+  async function loadItem(payload) {
+    try {
+      return await store.dispatch(`${cardNamespace}/LOAD_ITEM`, payload);
+    } catch (err) {
+      if (!onLoadErrorHandler) throw err;
+      onLoadErrorHandler(err)
+    }
   }
 
   function addItem(payload) {

package/src/plugins/primevue/primevue.plugin.js

@@ -8,6 +8,7 @@ import PColumn from 'primevue/column';
 import PrimeVue from 'primevue/config';
 import PTable from 'primevue/datatable';
 import PDivider from 'primevue/divider';
+import PGalleria from 'primevue/galleria';
 import PImage from 'primevue/image';
 import PInputText from 'primevue/inputtext';
 import PMenubar from 'primevue/menubar';
@@ -53,6 +54,7 @@ const initPrimevue = (app) => {
   app.component('PSlider', changeComponentCompatMode(PSlider));
   app.component('PDivider', changeComponentCompatMode(PDivider));
   app.component('PImage', changeComponentCompatMode(PImage));
+  app.component('PGalleria', changeComponentCompatMode(PGalleria));
 
   app.directive('tooltip', Tooltip);
 };

package/src/plugins/primevue/theme/components/components.js

@@ -5,6 +5,7 @@ import button from './button/button.js';
 import checkbox from './checkbox/checkbox.js';
 import chip from './chip/chip.js';
 import divider from './divider/divider.js';
+import galleria from './galleria/galleria.js';
 import image from './image/image.js';
 import menubar from './menubar/menubar.js';
 import popover from './popover/popover.js';
@@ -32,6 +33,7 @@ const components = {
   tooltip,
   datatable: table,
   toolbar,
+  galleria,
 };
 
 export default components;