@webitel/ui-sdk 26.2.86 → 26.2.87

package/dist/{wt-page-header-skJJlN5u.js → wt-page-header-CWRiJQtc.js}

@@ -1,5 +1,5 @@
 import { computed as f, resolveComponent as r, createBlock as i, openBlock as l, withCtx as a, renderSlot as n, createCommentVNode as c, createVNode as p, createTextVNode as s, toDisplayString as u } from "vue";
-import { _ as b } from "./install-hEc3TeL8.js";
+import { _ as b } from "./install-DGeFi2dK.js";
 const h = {
   __name: "wt-page-header",
   props: {

package/dist/{wt-pagination-Dt2AC82n.js → wt-pagination-Dz6jA59M.js}

@@ -1,4 +1,4 @@
-import { _ as p, D as _ } from "./install-hEc3TeL8.js";
+import { _ as p, D as _ } from "./install-DGeFi2dK.js";
 import { resolveComponent as c, resolveDirective as u, createElementBlock as g, openBlock as h, createElementVNode as o, createVNode as a, toDisplayString as m, withDirectives as d } from "vue";
 const f = {
   name: "WtPagination",

package/dist/{wt-player-DearTxra.js → wt-player-B1c7Mdcn.js}

@@ -1,5 +1,5 @@
 import { defineComponent as y, computed as m, watch as r, onMounted as w, createElementBlock as v, openBlock as B, normalizeClass as g, createElementVNode as s, createVNode as o } from "vue";
-import { E as e, _ as x } from "./install-hEc3TeL8.js";
+import { E as e, _ as x } from "./install-DGeFi2dK.js";
 const V = ["src", "loop", "autoplay"], _ = ["controls", "download"], b = /* @__PURE__ */ y({
   __name: "wt-player",
   props: {

package/dist/{wt-search-bar-qa44hCtR.js → wt-search-bar-Blxm_6Yq.js}

@@ -1,5 +1,5 @@
 import { defineComponent as O, toRefs as $, computed as y, resolveComponent as o, resolveDirective as A, createBlock as l, openBlock as s, unref as h, createSlots as E, withCtx as n, createVNode as p, createElementVNode as U, createCommentVNode as m, renderSlot as j, createTextVNode as K, toDisplayString as z, withDirectives as H } from "vue";
-import { z as P, D as R, _ as T } from "./install-hEc3TeL8.js";
+import { z as P, D as R, _ as T } from "./install-DGeFi2dK.js";
 const q = { class: "wt-search-bar__icon-controls" }, F = /* @__PURE__ */ O({
   __name: "wt-search-bar",
   props: {

package/dist/{wt-selection-popup-CM_F-Ovz.js → wt-selection-popup-h3v1zccP.js}

@@ -1,5 +1,5 @@
 import { resolveComponent as i, resolveDirective as $, createBlock as r, openBlock as t, mergeProps as x, withCtx as c, createVNode as f, createTextVNode as a, toDisplayString as s, unref as w, createElementVNode as h, renderSlot as k, createElementBlock as d, Fragment as z, renderList as D, normalizeClass as E, createCommentVNode as p, withDirectives as I } from "vue";
-import { _ as O, B as P } from "./install-hEc3TeL8.js";
+import { _ as O, B as P } from "./install-DGeFi2dK.js";
 const j = { class: "wt-selection-popup__options" }, A = ["onClick"], F = { class: "wt-selection-popup__item-header typo-subtitle-2" }, L = {
   key: 1,
   class: "popup-options__item-text"

package/dist/{wt-start-page-DdiZlBxs.js → wt-start-page-YxptzeST.js}

@@ -1,5 +1,5 @@
 import { inject as y, resolveComponent as _, createElementBlock as d, openBlock as a, createElementVNode as o, createBlock as u, createCommentVNode as h, createTextVNode as g, toDisplayString as l, createVNode as N, withCtx as f, defineComponent as w, computed as m, Fragment as E, renderList as k } from "vue";
-import { L as n, _ as p } from "./install-hEc3TeL8.js";
+import { L as n, _ as p } from "./install-DGeFi2dK.js";
 n.env.NODE_ENV;
 n.env.NODE_ENV;
 n.env.NODE_ENV;

package/dist/{wt-status-select-B-4AGxJJ.js → wt-status-select-Bx5wi_CU.js}

@@ -1,5 +1,5 @@
 import { resolveComponent as u, createBlock as d, openBlock as f, withCtx as c, createVNode as i } from "vue";
-import { _ as h } from "./install-hEc3TeL8.js";
+import { _ as h } from "./install-DGeFi2dK.js";
 const s = Object.freeze({
   ONLINE: "online",
   PAUSE: "pause",

package/dist/{wt-stepper-BX1slLpS.js → wt-stepper-C35fsYao.js}

@@ -1,5 +1,5 @@
 import { computed as i, resolveComponent as w, createElementBlock as s, openBlock as p, createElementVNode as r, renderSlot as n, Fragment as h, renderList as f, createCommentVNode as y, createVNode as S, normalizeClass as C, withCtx as N, createTextVNode as V, toDisplayString as d } from "vue";
-import { _ as k } from "./install-hEc3TeL8.js";
+import { _ as k } from "./install-DGeFi2dK.js";
 const x = { class: "wt-stepper" }, b = { class: "wt-stepper-header" }, g = { class: "wt-stepper-steps" }, B = { class: "wt-stepper-steps__wrapper" }, E = { class: "wt-stepper-description" }, $ = {
   __name: "wt-stepper",
   props: {

package/dist/{wt-table-BLiqAvgp.js → wt-table-DJD_zxOO.js}

@@ -1,5 +1,5 @@
 import { defineComponent as ee, useSlots as te, useTemplateRef as oe, ref as H, computed as _, onMounted as le, onUnmounted as ae, resolveComponent as L, resolveDirective as re, createBlock as f, openBlock as c, createSlots as W, withCtx as i, createCommentVNode as b, createElementBlock as U, createVNode as q, withModifiers as ne, Fragment as se, renderList as de, createElementVNode as $, normalizeStyle as ie, renderSlot as h, createTextVNode as K, toDisplayString as V, withDirectives as ce, nextTick as ue } from "vue";
-import { B as pe, _ as fe } from "./install-hEc3TeL8.js";
+import { B as pe, _ as fe } from "./install-DGeFi2dK.js";
 import { g as me } from "./sortQueryAdapters-M9bNEM3P.js";
 const ye = (r, C) => {
   let o = null, p = null, w = null, d = !1;

package/dist/{wt-table-actions-CV4L4At_.js → wt-table-actions-nWYEODef.js}

@@ -1,5 +1,5 @@
 import { defineComponent as C, computed as l, resolveComponent as p, resolveDirective as g, createElementBlock as S, openBlock as n, renderSlot as y, withDirectives as r, createCommentVNode as u, createVNode as A, createBlock as a, withCtx as B, normalizeClass as I } from "vue";
-import { _ as O } from "./install-hEc3TeL8.js";
+import { _ as O } from "./install-DGeFi2dK.js";
 const R = { class: "wt-table-actions" }, U = /* @__PURE__ */ C({
   __name: "wt-table-actions",
   props: {

package/dist/{wt-table-column-select-HTzEFsy_.js → wt-table-column-select-BbVgLs5X.js}

@@ -1,6 +1,6 @@
-import { d as C } from "./index-CIpl52ud.js";
+import { d as C } from "./index-ty_yVC6r.js";
 import { resolveComponent as a, resolveDirective as g, createElementBlock as c, openBlock as r, withDirectives as v, createVNode as s, withCtx as n, createTextVNode as i, toDisplayString as p, createElementVNode as h, normalizeClass as S, Fragment as k, renderList as D, withModifiers as y } from "vue";
-import { _ as P } from "./install-hEc3TeL8.js";
+import { _ as P } from "./install-DGeFi2dK.js";
 const H = {
   name: "WtTableColumnSelect",
   model: {

package/dist/{wt-tabs-Dv5GY718.js → wt-tabs-Drkf57D1.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as n, openBlock as r, normalizeClass as o, createElementVNode as a, Fragment as c, renderList as d, renderSlot as h, normalizeProps as u, guardReactiveProps as f, toDisplayString as v, normalizeStyle as m } from "vue";
-import { _ as p } from "./install-hEc3TeL8.js";
+import { _ as p } from "./install-DGeFi2dK.js";
 const _ = {
   name: "WtTabs",
   model: {

package/dist/{wt-tags-input-BmR8wGoy.js → wt-tags-input-GEPeeq_M.js}

@@ -1,5 +1,5 @@
-import { d as O } from "./index-BfPO5Xk6.js";
-import { F as h, _ as E, C as S, M as z, G as A, H as B } from "./install-hEc3TeL8.js";
+import { d as O } from "./index-DVKh-8_k.js";
+import { F as h, _ as E, C as S, M as z, G as A, H as B } from "./install-DGeFi2dK.js";
 import { resolveComponent as n, resolveDirective as R, createElementBlock as I, openBlock as v, normalizeClass as P, createBlock as p, createCommentVNode as c, createVNode as o, mergeProps as g, withCtx as a, renderSlot as b, normalizeProps as f, guardReactiveProps as $, createTextVNode as d, toDisplayString as r, toHandlers as j, createSlots as q, withDirectives as V, createElementVNode as w, vShow as H, withModifiers as N } from "vue";
 const D = {
   props: {

package/dist/{wt-timepicker-BPiIae1E.js → wt-timepicker-DpP589HP.js}

@@ -1,5 +1,5 @@
 import { defineComponent as q, toRefs as R, computed as o, resolveComponent as w, createElementBlock as O, openBlock as d, normalizeClass as j, unref as t, createBlock as r, createCommentVNode as m, createElementVNode as A, mergeProps as F, withCtx as x, renderSlot as G, normalizeProps as J, guardReactiveProps as K, createTextVNode as S, toDisplayString as y, nextTick as Q } from "vue";
-import { B as W, z as X, C as Y, M as Z, _ as ee } from "./install-hEc3TeL8.js";
+import { B as W, z as X, C as Y, M as Z, _ as ee } from "./install-DGeFi2dK.js";
 const le = { class: "wt-timepicker__wrapper" }, c = 3600, M = 60, ae = /* @__PURE__ */ q({
   __name: "wt-timepicker",
   props: {

package/dist/{wt-tree-DyVU1Ky2.js → wt-tree-CgHVfHlr.js}

@@ -1,6 +1,6 @@
 import { defineComponent as z, computed as L, ref as J, onMounted as K, watch as Q, resolveComponent as I, createElementBlock as v, openBlock as i, Fragment as x, createElementVNode as D, withDirectives as X, renderSlot as T, createBlock as w, createCommentVNode as b, renderList as A, normalizeClass as M, toDisplayString as O, createVNode as Y, withCtx as W, createSlots as U, normalizeProps as q, guardReactiveProps as F, vShow as Z, unref as N } from "vue";
-import { d as P } from "./index-BfPO5Xk6.js";
-import { W as _, _ as R } from "./install-hEc3TeL8.js";
+import { d as P } from "./index-DVKh-8_k.js";
+import { W as _, _ as R } from "./install-DGeFi2dK.js";
 const ee = { class: "wt-tree-line" }, te = { class: "wt-tree-line__icon-wrapper" }, ae = { class: "wt-tree-line__label typo-body-1" }, le = /* @__PURE__ */ z({
   __name: "wt-tree-line",
   props: {

package/dist/{wt-tree-table-DUgBokMr.js → wt-tree-table-CPdajAjw.js}

@@ -1,5 +1,5 @@
 import { computed as C, unref as B, defineComponent as z, ref as O, onMounted as D, resolveComponent as L, createElementBlock as d, openBlock as l, Fragment as $, createElementVNode as u, createCommentVNode as b, normalizeClass as T, renderList as m, renderSlot as p, createBlock as x, createTextVNode as U, toDisplayString as H, createSlots as W, withCtx as I, toRef as F, normalizeStyle as j, withModifiers as q, createVNode as G } from "vue";
-import { B as J, O as R, P as Q, _ as M } from "./install-hEc3TeL8.js";
+import { B as J, O as R, P as Q, _ as M } from "./install-DGeFi2dK.js";
 import { g as X } from "./sortQueryAdapters-M9bNEM3P.js";
 const Y = ({ headers: e }) => {
   const { t: y } = J();

package/dist/{wt-type-extension-value-input-VJ52ynBk.js → wt-type-extension-value-input-CvjxUfrG.js}

@@ -1,6 +1,6 @@
 import { defineComponent as Ae, mergeModels as Te, useModel as De, computed as _, resolveComponent as J, createBlock as Z, renderSlot as N, createCommentVNode as we, unref as w, openBlock as ee, mergeProps as x, createVNode as P } from "vue";
-import { ae as ve, af as Oe, N as qe, ag as ke, ah as Ee, B as Se, ai as Ce, aj as te, ak as _e } from "./install-hEc3TeL8.js";
-import { d as xe } from "./index-CIpl52ud.js";
+import { ae as ve, af as Oe, N as qe, ag as ke, ah as Ee, B as Se, ai as Ce, aj as te, ak as _e } from "./install-DGeFi2dK.js";
+import { d as xe } from "./index-ty_yVC6r.js";
 import { get as Ue, set as Le } from "lodash-es";
 import "@aliasedDeps/api-services/axios";
 import * as e from "zod";

package/dist/{wt-vidstack-player-DC8x2FiU.js → wt-vidstack-player-DshUz0St.js}

@@ -1,5 +1,5 @@
 import { defineComponent as qe, createElementBlock as Ie, openBlock as gt, createVNode as ie, useTemplateRef as ha, inject as nn, onMounted as ca, onBeforeUnmount as ua, normalizeClass as Xs, unref as Js, createElementVNode as yt, createBlock as is, createCommentVNode as ve, toDisplayString as da, renderSlot as os, ref as Ci, provide as pa, computed as Pi, withCtx as xi } from "vue";
-import { R as fa, S as ma, T as ga, U as ya, P as Ce, _ as Oe, V as ba, C as at } from "./install-hEc3TeL8.js";
+import { R as fa, S as ma, T as ga, U as ya, P as Ce, _ as Oe, V as ba, C as at } from "./install-DGeFi2dK.js";
 const dt = /* @__PURE__ */ Symbol(0);
 let ls = !1, Fs = !1, ot = null, ee = null, et = null, X = 0, te = [], Zs = {};
 const $a = () => {
@@ -3263,7 +3263,7 @@ class To {
     return "audio";
   }
   async load(t) {
-    return new (await import("./vidstack-audio-DhIoylIe.js")).AudioProvider(this.target, t);
+    return new (await import("./vidstack-audio-BTMWPDeY.js")).AudioProvider(this.target, t);
   }
 }
 class di {
@@ -3276,7 +3276,7 @@ class di {
     return "video";
   }
   async load(t) {
-    return new (await import("./vidstack-video-a48igqf9.js")).VideoProvider(this.target, t);
+    return new (await import("./vidstack-video-BX02sDjS.js")).VideoProvider(this.target, t);
   }
 }
 class pi extends di {
@@ -3286,7 +3286,7 @@ class pi extends di {
     return pi.supported && De(t);
   }
   async load(t) {
-    return new (await import("./vidstack-hls-z-cR6Ldm.js")).HLSProvider(this.target, t);
+    return new (await import("./vidstack-hls-BLw8Z4CV.js")).HLSProvider(this.target, t);
   }
 }
 class fi extends di {
@@ -3296,7 +3296,7 @@ class fi extends di {
     return fi.supported && li(t);
   }
   async load(t) {
-    return new (await import("./vidstack-dash-Bbnp7sJE.js")).DASHProvider(this.target, t);
+    return new (await import("./vidstack-dash-Bu3cfkXF.js")).DASHProvider(this.target, t);
   }
 }
 class So {
@@ -3318,7 +3318,7 @@ class So {
     return "video";
   }
   async load(t) {
-    return new (await import("./vidstack-vimeo-Bios76up.js")).VimeoProvider(this.target, t);
+    return new (await import("./vidstack-vimeo-B2W9MzTa.js")).VimeoProvider(this.target, t);
   }
   async loadPoster(t, e, s) {
     const { resolveVimeoVideoId: n, getVimeoVideoInfo: a } = await import("./vidstack-krOAtKMi-C50BTxmn.js");
@@ -3350,7 +3350,7 @@ class ko {
     return "video";
   }
   async load(t) {
-    return new (await import("./vidstack-youtube-NqLBxI85.js")).YouTubeProvider(this.target, t);
+    return new (await import("./vidstack-youtube-DHOYY--j.js")).YouTubeProvider(this.target, t);
   }
   async loadPoster(t, e, s) {
     const { findYouTubePoster: n, resolveYouTubeVideoId: a } = await import("./vidstack-Dm1xEU9Q-CXHNvShT.js"), r = v(t.src) && a(t.src);
@@ -3818,7 +3818,7 @@ class Ao extends Qt {
         throw n.code = "CAST_NOT_AVAILABLE", n;
       }
       if (_e("https://www.gstatic.com"), !this.#$) {
-        const n = await import("./vidstack-D2pY00kU-BKshL5RY.js").then((a) => a.v);
+        const n = await import("./vidstack-D2pY00kU-6EZp-HxO.js").then((a) => a.v);
         this.#$ = new n.GoogleCastLoader();
       }
       await this.#$.prompt(this.#s), t && this.#e.queue.enqueue("media-google-cast-request", t);
@@ -5511,7 +5511,7 @@ class Bo extends $(HTMLElement, Hn) {
     if (this.#e?.classList.contains("vds-google-cast"))
       return this.#e;
     const t = document.createElement("div");
-    return t.classList.add("vds-google-cast"), import("./vidstack-D_-9AA6_-Daameze-.js").then(({ insertContent: e }) => {
+    return t.classList.add("vds-google-cast"), import("./vidstack-D_-9AA6_-NTrI7qhk.js").then(({ insertContent: e }) => {
       e(t, this.#t.$state);
     }), t;
   }
@@ -10079,7 +10079,7 @@ const ic = /* @__PURE__ */ qe({
       ])
     ], 2));
   }
-}), yc = /* @__PURE__ */ Oe(gc, [["__scopeId", "data-v-4fb2b9f3"]]), bc = ["autoplay", "muted", "src"], $c = /* @__PURE__ */ qe({
+}), yc = /* @__PURE__ */ Oe(gc, [["__scopeId", "data-v-2edb1963"]]), bc = ["autoplay", "muted", "src"], $c = /* @__PURE__ */ qe({
   __name: "wt-vidstack-player",
   props: {
     src: {},
@@ -10172,7 +10172,7 @@ const ic = /* @__PURE__ */ qe({
       ], 40, bc)
     ], 2));
   }
-}), vc = /* @__PURE__ */ Oe($c, [["__scopeId", "data-v-815f577f"]]), Oc = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), vc = /* @__PURE__ */ Oe($c, [["__scopeId", "data-v-fe960280"]]), Oc = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: vc
 }, Symbol.toStringTag, { value: "Module" }));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-sdk",
-	"version": "26.2.86",
+	"version": "26.2.87",
 	"private": false,
 	"scripts": {
 		"make-all": "npm version patch --git-tag-version false && npm run build && (npm run build:types || true) && (npm run biome:format:all || true) && npm run publish-lib",

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

@@ -139,6 +139,7 @@ import note from './note.svg?raw';
 import numpad from './numpad.svg?raw';
 import options from './options.svg?raw';
 import pause from './pause.svg?raw';
+import pauseFilled from './pause--filled.svg?raw';
 import pin from './pin.svg?raw';
 import play from './play.svg?raw';
 import playerEnterFullscreen from './player-enter-fullscreen.svg?raw';
@@ -369,6 +370,7 @@ export default objCamelToKebab({
 	note,
 	numpad,
 	pause,
+	'pause--filled': pauseFilled,
 	play,
 	table,
 	treeExpand,

package/src/assets/icons/sprite/pause--filled.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.45029 2 2 6.45029 2 12C2 17.5497 6.45029 22 12 22C17.5497 22 22 17.5497 22 12C22 6.45029 17.5497 2 12 2ZM11 9C11 8.44772 10.5523 8 10 8C9.44772 8 9 8.44772 9 9V15C9 15.5523 9.44772 16 10 16C10.5523 16 11 15.5523 11 15V9ZM14 8C14.5523 8 15 8.44772 15 9V15C15 15.5523 14.5523 16 14 16C13.4477 16 13 15.5523 13 15V9C13 8.44772 13.4477 8 14 8Z" />
+</svg>

package/src/components/wt-badge-new/wt-badge.vue

@@ -1,9 +1,12 @@
 <template>
   <p-badge
-:value="props.value" :class="[
-    props.size`p-badge--${props.size}`,
-    props.severity`p-badge--${props.severity}`
-  ]" class="wt-badge typo-caption">
+    :value="props.value"
+    :class="[
+      props.size && `p-badge--${props.size}`,
+      props.severity && `p-badge--${props.severity}`
+    ]"
+    class="wt-badge typo-caption"
+  >
     <slot />
   </p-badge>
 </template>

package/src/components/wt-vidstack-player/components/layouts/video-layout.vue

@@ -80,7 +80,7 @@ const emit = defineEmits<{
   align-self: flex-start;
 }
 
-media-player[data-hocus] .video-display-panel {
+:deep(media-player[data-hocus]) :deep(.video-display-panel) {
   /* hover or focus within https://vidstack.io/docs/wc/player/components/core/player/?styling=css#player.attrs */
   background: var(--p-player-head-line-hover-background);
   opacity: 1;

package/src/components/wt-vidstack-player/wt-vidstack-player.vue

@@ -166,11 +166,6 @@ const onCanPlay = (ev: Event) => {
 }
 
 .wt-vidstack-player__player {
-  gap: var(--popup-sections-gap);
-  z-index: 1;
-  box-shadow: var(--elevation-10);
-  border-radius: var(--border-radius);
-  background: var(--wt-popup-background-color);
   position: relative;
   display: block;
   width: 100%;
@@ -231,16 +226,6 @@ const onCanPlay = (ev: Event) => {
 .wt-vidstack-player--md:not(.wt-vidstack-player--static) {
   overflow: visible;
   border-radius: 0;
-  display: flex;
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  justify-content: center;
-  align-items: center;
-  z-index: var(--popup-wrapper-z-index);
-  background: var(--wt-popup-shadow-color);
 }
 
 .wt-vidstack-player--lg {

package/src/locale/en/en.js

@@ -408,6 +408,7 @@ export default deepmerge(
 			},
 			[WtApplication.Meet]: {
 				theCameraIsTurnedOff: 'The camera is turned off',
+				theCallIsOnHold: 'On hold',
 			},
 		},
 		validation: {

package/src/locale/es/es.js

@@ -399,6 +399,7 @@ export default {
 		},
 		[WtApplication.Meet]: {
 			theCameraIsTurnedOff: 'La cámara está apagada',
+			theCallIsOnHold: 'En espera',
 		},
 	},
 	validation: {

package/src/locale/kz/kz.js

@@ -404,6 +404,7 @@ export default {
 		},
 		[WtApplication.Meet]: {
 			theCameraIsTurnedOff: 'Камера өшірілген',
+			theCallIsOnHold: 'Күту режимінде',
 		},
 	},
 	validation: {

package/src/locale/pl/pl.js

@@ -404,6 +404,7 @@ export default {
 		},
 		[WtApplication.Meet]: {
 			theCameraIsTurnedOff: 'Kamera jest wyłączona',
+			theCallIsOnHold: 'Na wstrzymaniu',
 		},
 	},
 	validation: {

package/src/locale/ro/ro.js

@@ -406,6 +406,7 @@ export default {
 		},
 		[WtApplication.Meet]: {
 			theCameraIsTurnedOff: 'Camera este oprită',
+			theCallIsOnHold: 'În așteptare',
 		},
 	},
 	validation: {

package/src/locale/ru/ru.js

@@ -401,6 +401,7 @@ export default {
 		},
 		[WtApplication.Meet]: {
 			theCameraIsTurnedOff: 'Камера выключена',
+			theCallIsOnHold: 'На удержании',
 		},
 	},
 	validation: {

package/src/locale/uk/uk.js

@@ -400,6 +400,7 @@ export default {
 		},
 		[WtApplication.Meet]: {
 			theCameraIsTurnedOff: 'Камера вимкнута',
+			theCallIsOnHold: 'На утриманні',
 		},
 	},
 	validation: {

package/src/locale/uz/uz.js

@@ -406,6 +406,7 @@ export default {
 		},
 		[WtApplication.Meet]: {
 			theCameraIsTurnedOff: 'Kamera o‘chirilgan',
+			theCallIsOnHold: 'Kutishda',
 		},
 	},
 	validation: {

package/src/locale/vi/vi.js

@@ -406,6 +406,7 @@ export default {
 		},
 		[WtApplication.Meet]: {
 			theCameraIsTurnedOff: 'Camera đã được tắt',
+			theCallIsOnHold: 'Đang giữ',
 		},
 	},
 	validation: {

package/src/modules/CallSession/modules/VideoCall/video-call.vue

@@ -17,9 +17,29 @@
       <slot v-if="!mainStream" :size="innerSize" name="overlay">
         <div class="video-call-overlay">
           <div
-            v-if="showReceiverOverlay"
+            v-if="showHoldOverlay"
             :class="[`video-call-receiver--${innerSize}`, innerSize === 'sm' ? 'typo-body-2' : 'typo-body-1']"
-            class="video-call-receiver video-call-receiver--muted"
+            class="video-call-receiver video-call-receiver__fallback-screen"
+          >
+            <wt-icon
+              :size="receiverVideoMutedIconSizes[innerSize]"
+              icon="pause--filled"
+              color="warning"
+            />
+
+            <span class="video-call-receiver-text typo-heading-4">
+              {{ holdDurationTime }}
+            </span>
+
+            <span class="video-call-hold-text">
+              {{ t(`WtApplication.${WtApplication.Meet}.theCallIsOnHold`) }}
+            </span>
+          </div>
+
+          <div
+            v-else-if="showReceiverOverlay"
+            :class="[`video-call-receiver--${innerSize}`, innerSize === 'sm' ? 'typo-body-2' : 'typo-body-1']"
+            class="video-call-receiver video-call-receiver__fallback-screen"
           >
             <wt-icon
               :size="receiverVideoMutedIconSizes[innerSize]"
@@ -56,7 +76,7 @@
           </div>
         </template>
 
-        <template v-else-if="props['sender:stream'] && props['receiver:stream']">
+        <template v-else-if="showSenderScreen">
           <wt-vidstack-player
             :class="`video-call-sender--${innerSize}`"
             :stream="props['sender:stream']"
@@ -110,7 +130,7 @@
   lang="ts"
 >
 import { WtVidstackPlayer } from '@webitel/ui-sdk/components';
-import { computed } from 'vue';
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { WtIcon } from '../../../../components';
@@ -120,6 +140,7 @@ import {
 	VideoCallControlsPanel,
 } from '../../../../components/wt-vidstack-player/components';
 import { ComponentSize, WtApplication } from '../../../../enums';
+import { convertDuration } from '../../../../scripts';
 import type { ResultCallbacks } from '../../../../types';
 import type { ScreenshotStatus } from '../../types';
 import { VideoCallAction } from './enums/VideoCallAction.enum';
@@ -138,6 +159,9 @@ const props = withDefaults(
 		'receiver:mic:enabled'?: boolean;
 		'receiver:video:enabled'?: boolean;
 
+		'call:onHold'?: boolean;
+		hideSenderOnHold?: boolean;
+
 		'screenshot:status'?: ScreenshotStatus | null;
 		'screenshot:loading'?: boolean;
 		'screenshot:src'?: string;
@@ -223,6 +247,30 @@ const senderStream = computed(() => props['sender:stream']);
 
 const receiverVideoEnabled = computed(() => props['receiver:video:enabled']);
 const senderVideoEnabled = computed(() => props['sender:video:enabled']);
+const isOnHold = computed(() => !!props['call:onHold']);
+
+const holdSecondsElapsed = ref(0);
+let holdTimerId: number | null = null;
+
+const startHoldTimer = () => {
+	holdSecondsElapsed.value = 0;
+	stopHoldTimer();
+	holdTimerId = window.setInterval(() => {
+		holdSecondsElapsed.value++;
+	}, 1000);
+};
+
+const stopHoldTimer = () => {
+	if (holdTimerId !== null) {
+		clearInterval(holdTimerId);
+		holdTimerId = null;
+	}
+};
+
+const resetHoldState = () => {
+	stopHoldTimer();
+	holdSecondsElapsed.value = 0;
+};
 
 const bothStreamsAvailable = computed(
 	() => !!receiverStream.value && !!senderStream.value,
@@ -236,7 +284,17 @@ const showReceiverOverlay = computed(
 		(receiverStream.value && !receiverVideoEnabled.value),
 );
 
+const showHoldOverlay = computed(() => isOnHold.value);
+
+const holdDurationTime = computed(() =>
+	convertDuration(holdSecondsElapsed.value),
+);
+
 const mainStream = computed(() => {
+	if (isOnHold.value) {
+		return null;
+	}
+
 	if (
 		(bothStreamsAvailable.value && !receiverVideoEnabled.value) ||
 		(!receiverStream.value && senderStream.value && !senderVideoEnabled.value)
@@ -251,13 +309,49 @@ const mainStream = computed(() => {
 	return receiverStream.value ?? senderStream.value;
 });
 
-const showSenderMutedScreen = computed(
-	() =>
-		bothStreamsAvailable.value &&
-		!senderVideoEnabled.value &&
-		!!receiverStream.value,
+const showSenderScreen = computed(() => {
+	if (!isOnHold.value) return bothStreamsAvailable.value;
+
+	return !props.hideSenderOnHold && senderStream.value && receiverStream.value;
+});
+
+const showSenderMutedScreen = computed(() => {
+	// If call is on hold but sender video exists — muted screen should NOT show
+	if (isOnHold.value && senderVideoEnabled.value && senderStream.value) {
+		return false;
+	}
+
+	const isActiveCall = !isOnHold.value;
+	const hasBothStreams = bothStreamsAvailable.value;
+	const senderVideoOff = !senderVideoEnabled.value;
+	const receiverHasStream = !!receiverStream.value;
+
+	// Show muted screen only when:
+	// - call is active
+	// - both participants connected
+	// - sender video disabled
+	// - receiver stream exists
+	return isActiveCall && hasBothStreams && senderVideoOff && receiverHasStream;
+});
+
+watch(
+	isOnHold,
+	(enableHold) => {
+		if (enableHold) {
+			startHoldTimer();
+		} else {
+			resetHoldState();
+		}
+	},
+	{
+		immediate: true,
+	},
 );
 
+onBeforeUnmount(() => {
+	stopHoldTimer();
+});
+
 const receiverVideoMutedIconSizes = {
 	[ComponentSize.SM]: ComponentSize.MD,
 	[ComponentSize.MD]: ComponentSize.LG,
@@ -367,7 +461,11 @@ const senderVideoMutedIconSizes = {
   text-align: center;
 }
 
-.video-call-receiver--muted {
+.video-call-receiver--sm .video-call-hold-text {
+  text-align: center;
+}
+
+.video-call-receiver__fallback-screen {
   display: flex;
   align-items: center;
   flex-direction: column;
@@ -377,6 +475,11 @@ const senderVideoMutedIconSizes = {
   gap: var(--spacing-xs);
 }
 
+.video-call-receiver--sm.video-call-receiver__fallback-screen {
+  justify-content: flex-end;
+  padding-bottom: calc(var(--p-player-control-bar-sm-height) + 24px);
+}
+
 .video-call-sender {
   flex: 0 0 auto;
 }

package/types/locale/en/en.d.ts

@@ -368,6 +368,7 @@ declare const _default: {
         };
         meet: {
             theCameraIsTurnedOff: string;
+            theCallIsOnHold: string;
         };
     };
     validation: {

package/types/locale/es/es.d.ts

@@ -411,6 +411,7 @@ declare namespace _default {
         }
         export namespace meet {
             let theCameraIsTurnedOff: string;
+            let theCallIsOnHold: string;
         }
     }
     export namespace validation {