@webitel/ui-sdk 26.4.45 → 26.4.47

package/dist/{wt-vidstack-player-CAcoio5I.js → wt-vidstack-player-Dc5539rN.js}

@@ -1,6 +1,6 @@
 import { defineComponent as lt, inject as ye, createElementBlock as mt, openBlock as G, normalizeClass as be, unref as ot, createElementVNode as at, renderSlot as ut, createVNode as W, computed as _i, onMounted as Ii, onBeforeUnmount as Vi, createBlock as Ut, createCommentVNode as Kt, toDisplayString as Di, createSlots as Ds, withCtx as Qt, resolveComponent as Ri, ref as us, provide as Oi, toRefs as Ni } from "vue";
-import { a as q, c as ft, i as B, b as Ie, d as S, e as nt, f as Ve, l as O, s as Zt, g as Rs, E as Os, D as L, h as Q, o as P, j as Hi, k as f, m as l, n as M, p as Ns, q as Fi, r as oe, t as z, V as J, v as w, C as b, S as gt, w as Vt, x as p, y as rt, z as j, I as Hs, A as Bi, B as Gi, F as tt, G as Ge, H as Fs, J as ps, K as Ue, L as Bs, M as kt, N as Ke, O as de, P as Ui, Q as xt, R as Ki, U as Qi, W as Wi, X as zi, Y as ji, Z as Yi, _ as Xi, $ as Ji, a0 as Zi, a1 as Gs, a2 as T, a3 as _, a4 as ce, a5 as ta, a6 as Dt, a7 as U, a8 as ea, a9 as sa, aa as ia, ab as aa, ac as ms, ad as na, ae as ra, af as v, ag as y, ah as oa, ai as ha, T as la, u as da } from "./useVidstackSrc-_rF-gU3O.js";
-import { T as ca, U as ua, V as pa, X as ma, _ as yt, Q as ue, C as K, Y as fa } from "./install-C5xKFRc9.js";
+import { a as q, c as ft, i as B, b as Ie, d as S, e as nt, f as Ve, l as O, s as Zt, g as Rs, E as Os, D as L, h as Q, o as P, j as Hi, k as f, m as l, n as M, p as Ns, q as Fi, r as oe, t as z, V as J, v as w, C as b, S as gt, w as Vt, x as p, y as rt, z as j, I as Hs, A as Bi, B as Gi, F as tt, G as Ge, H as Fs, J as ps, K as Ue, L as Bs, M as kt, N as Ke, O as de, P as Ui, Q as xt, R as Ki, U as Qi, W as Wi, X as zi, Y as ji, Z as Yi, _ as Xi, $ as Ji, a0 as Zi, a1 as Gs, a2 as T, a3 as _, a4 as ce, a5 as ta, a6 as Dt, a7 as U, a8 as ea, a9 as sa, aa as ia, ab as aa, ac as ms, ad as na, ae as ra, af as v, ag as y, ah as oa, ai as ha, T as la, u as da } from "./useVidstackSrc-B4lBHDtL.js";
+import { T as ca, U as ua, V as pa, X as ma, _ as yt, Q as ue, C as K, Y as fa } from "./install-B49SbjQe.js";
 import { _ as ga } from "./wt-slider.vue_vue_type_script_setup_true_lang-DlaRDHxo.js";
 const Us = ft();
 function $() {
@@ -2070,7 +2070,7 @@ class un {
     return "audio";
   }
   async load(t) {
-    return new (await import("./vidstack-audio-Yun2Ft-H.js")).AudioProvider(this.target, t);
+    return new (await import("./vidstack-audio-CoiAV2Qd.js")).AudioProvider(this.target, t);
   }
 }
 class je {
@@ -2083,7 +2083,7 @@ class je {
     return "video";
   }
   async load(t) {
-    return new (await import("./vidstack-video-kGR0RM6h.js")).VideoProvider(this.target, t);
+    return new (await import("./vidstack-video-BPBmZ4Ql.js")).VideoProvider(this.target, t);
   }
 }
 class Ye extends je {
@@ -2093,7 +2093,7 @@ class Ye extends je {
     return Ye.supported && Ge(t);
   }
   async load(t) {
-    return new (await import("./vidstack-hls-CIrbdAl1.js")).HLSProvider(this.target, t);
+    return new (await import("./vidstack-hls-DQ-qnHp3.js")).HLSProvider(this.target, t);
   }
 }
 class Xe extends je {
@@ -2103,7 +2103,7 @@ class Xe extends je {
     return Xe.supported && Ue(t);
   }
   async load(t) {
-    return new (await import("./vidstack-dash-u2mEPhH4.js")).DASHProvider(this.target, t);
+    return new (await import("./vidstack-dash-DKXmtGQy.js")).DASHProvider(this.target, t);
   }
 }
 class pn {
@@ -2125,7 +2125,7 @@ class pn {
     return "video";
   }
   async load(t) {
-    return new (await import("./vidstack-vimeo-D-twj4RR.js")).VimeoProvider(this.target, t);
+    return new (await import("./vidstack-vimeo-Cqgqxfvi.js")).VimeoProvider(this.target, t);
   }
   async loadPoster(t, e, s) {
     const { resolveVimeoVideoId: i, getVimeoVideoInfo: n } = await import("./vidstack-krOAtKMi-C50BTxmn.js");
@@ -2157,7 +2157,7 @@ class mn {
     return "video";
   }
   async load(t) {
-    return new (await import("./vidstack-youtube-C9ELPiVF.js")).YouTubeProvider(this.target, t);
+    return new (await import("./vidstack-youtube-28jmCYrI.js")).YouTubeProvider(this.target, t);
   }
   async loadPoster(t, e, s) {
     const { findYouTubePoster: i, resolveYouTubeVideoId: n } = await import("./vidstack-Dm1xEU9Q-CXHNvShT.js"), r = S(t.src) && n(t.src);
@@ -2625,7 +2625,7 @@ class vn extends Ct {
         throw i.code = "CAST_NOT_AVAILABLE", i;
       }
       if (te("https://www.gstatic.com"), !this.#v) {
-        const i = await import("./vidstack-D2pY00kU-CkOGeeZp.js").then((n) => n.v);
+        const i = await import("./vidstack-D2pY00kU-CJ_ABXE-.js").then((n) => n.v);
         this.#v = new i.GoogleCastLoader();
       }
       await this.#v.prompt(this.#s), t && this.#e.queue.enqueue("media-google-cast-request", t);
@@ -8022,7 +8022,7 @@ class Lr extends v(HTMLElement, ai) {
     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_-BY4XbHI-.js").then(({ insertContent: e }) => {
+    return t.classList.add("vds-google-cast"), import("./vidstack-D_-9AA6_-BRA9dr6r.js").then(({ insertContent: e }) => {
       e(t, this.#t.$state);
     }), t;
   }
@@ -8796,7 +8796,7 @@ const zo = { class: "controls-group__actions" }, jo = /* @__PURE__ */ lt({
       }, null, 8, ["icon", "color", "disabled"])
     ]));
   }
-}), th = { class: "video-display-panel__head" }, eh = { class: "video-display-panel__title" }, sh = { class: "video-display-panel__controls" }, ih = /* @__PURE__ */ lt({
+}), th = { class: "video-display-panel__head" }, eh = ["title"], sh = { class: "video-display-panel__controls" }, ih = /* @__PURE__ */ lt({
   __name: "video-display-panel",
   props: {
     title: {},
@@ -8835,7 +8835,10 @@ const zo = { class: "controls-group__actions" }, jo = /* @__PURE__ */ lt({
             class: "video-display-panel__avatar"
           }, null, 8, ["username"])) : Kt("", !0)
         ], !0),
-        at("span", eh, Di(r.title || r.username), 1)
+        at("span", {
+          class: "video-display-panel__title typo-body-2-bold",
+          title: r.title || r.username
+        }, Di(r.title || r.username), 9, eh)
       ]),
       at("div", sh, [
         W(Jo, { onToggle: h }),
@@ -8854,7 +8857,7 @@ const zo = { class: "controls-group__actions" }, jo = /* @__PURE__ */ lt({
       ])
     ], 2));
   }
-}), ah = /* @__PURE__ */ yt(ih, [["__scopeId", "data-v-617f1fa9"]]), nh = { class: "video-display-panel-wrapper" }, rh = { class: "video-layout-content" }, oh = { class: "video-layout-controls" }, hh = /* @__PURE__ */ lt({
+}), ah = /* @__PURE__ */ yt(ih, [["__scopeId", "data-v-f72cdda8"]]), nh = { class: "video-display-panel-wrapper" }, rh = { class: "video-layout-content" }, oh = { class: "video-layout-controls" }, hh = /* @__PURE__ */ lt({
   __name: "video-layout",
   props: {
     title: {},
@@ -8862,7 +8865,8 @@ const zo = { class: "controls-group__actions" }, jo = /* @__PURE__ */ lt({
     closable: { type: Boolean },
     hideVideoDisplayPanel: { type: Boolean },
     hideControlsPanel: { type: Boolean },
-    hideExpand: { type: Boolean }
+    hideExpand: { type: Boolean },
+    countdownTimeMode: { type: Boolean }
   },
   emits: ["close-player", "close-session", "make-screenshot", "toggle-record"],
   setup(a, { emit: t }) {
@@ -8893,12 +8897,14 @@ const zo = { class: "controls-group__actions" }, jo = /* @__PURE__ */ lt({
       ]),
       at("div", oh, [
         s.hideControlsPanel ? Kt("", !0) : ut(n.$slots, "controls-panel", { key: 0 }, () => [
-          W(ot(yh))
+          W(ot(yh), {
+            "countdown-time-mode": s.countdownTimeMode
+          }, null, 8, ["countdown-time-mode"])
         ], !0)
       ])
     ], 2));
   }
-}), lh = /* @__PURE__ */ yt(hh, [["__scopeId", "data-v-5e27fce0"]]), dh = { class: "play-button" }, ch = /* @__PURE__ */ lt({
+}), lh = /* @__PURE__ */ yt(hh, [["__scopeId", "data-v-e3192d93"]]), dh = { class: "play-button" }, ch = /* @__PURE__ */ lt({
   __name: "play-button",
   setup(a) {
     const { size: t } = ye("size");
@@ -8937,17 +8943,23 @@ const zo = { class: "controls-group__actions" }, jo = /* @__PURE__ */ lt({
   }
 }), fh = /* @__PURE__ */ yt(mh, [["__scopeId", "data-v-fbc2d9f8"]]), gh = /* @__PURE__ */ lt({
   __name: "playback-controls-panel",
+  props: {
+    countdownTimeMode: { type: Boolean, default: !1 }
+  },
   setup(a) {
-    return (t, e) => (G(), Ut(ot(Yo), { class: "playback-control-panel" }, {
+    const t = a;
+    return (e, s) => (G(), Ut(ot(Yo), { class: "playback-control-panel" }, {
       default: Qt(() => [
         W(uh),
         W(fh),
-        W(la)
+        W(la, {
+          countdown: t.countdownTimeMode
+        }, null, 8, ["countdown"])
       ], void 0, !0),
       _: 1
     }));
   }
-}), yh = /* @__PURE__ */ yt(gh, [["__scopeId", "data-v-e27c3292"]]), bh = ["autoplay", "muted", "src"], vh = /* @__PURE__ */ lt({
+}), yh = /* @__PURE__ */ yt(gh, [["__scopeId", "data-v-9d70f28d"]]), bh = ["autoplay", "muted", "src"], vh = /* @__PURE__ */ lt({
   __name: "wt-vidstack-player",
   props: {
     src: {},
@@ -8957,6 +8969,7 @@ const zo = { class: "controls-group__actions" }, jo = /* @__PURE__ */ lt({
     title: { default: "" },
     username: { default: "" },
     closable: { type: Boolean, default: !1 },
+    countdownTimeMode: { type: Boolean, default: !1 },
     static: { type: Boolean, default: !1 },
     stream: {},
     size: {},
@@ -9014,6 +9027,7 @@ const zo = { class: "controls-group__actions" }, jo = /* @__PURE__ */ lt({
           "hide-video-display-panel": e.hideVideoDisplayPanel,
           title: e.title,
           username: e.username,
+          "countdown-time-mode": e.countdownTimeMode,
           onClosePlayer: g[0] || (g[0] = (C) => s("close"))
         }, Ds({
           "controls-panel": Qt(() => [
@@ -9031,11 +9045,11 @@ const zo = { class: "controls-group__actions" }, jo = /* @__PURE__ */ lt({
             ]),
             key: "0"
           } : void 0
-        ]), 1032, ["autoplay", "closable", "hide-controls-panel", "hide-expand", "hide-video-display-panel", "title", "username"])
+        ]), 1032, ["autoplay", "closable", "hide-controls-panel", "hide-expand", "hide-video-display-panel", "title", "username", "countdown-time-mode"])
       ], 40, bh)
     ], 2));
   }
-}), $h = /* @__PURE__ */ yt(vh, [["__scopeId", "data-v-c2776ce5"]]), Lh = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), $h = /* @__PURE__ */ yt(vh, [["__scopeId", "data-v-cb7058f6"]]), Lh = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: $h
 }, Symbol.toStringTag, { value: "Module" }));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-sdk",
-	"version": "26.4.45",
+	"version": "26.4.47",
 	"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/components/wt-table-column-select/wt-table-column-select.vue

@@ -24,6 +24,13 @@
 							icon="search"
 						/>
 					</template>
+					<template #suffix>
+						<wt-icon-btn 
+							v-if="search"
+							icon="close--filled"
+							@click="search = ''"
+						/>
+					</template>
 				</wt-input-text>
         <div class="wt-table-column-select__popup-list-wrap">
           <ul
@@ -52,7 +59,7 @@
 					<wt-empty 
 						v-else
 						:image="darkMode ? EmptyImageDark : EmptyImageLight"
-						:title="$t('webitelUI.empty.text.filters')"
+						:text="$t('webitelUI.empty.text.filters')"
 					/>
         </div>
       </template>

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

@@ -21,7 +21,7 @@
 
     <div class="video-layout-controls">
       <slot v-if="!props.hideControlsPanel" name="controls-panel">
-        <playback-controls-panel />
+        <playback-controls-panel :countdown-time-mode="props.countdownTimeMode"/>
       </slot>
     </div>
   </media-controls>
@@ -43,6 +43,7 @@ const props = defineProps<{
 	hideVideoDisplayPanel?: boolean;
 	hideControlsPanel?: boolean;
 	hideExpand?: boolean;
+	countdownTimeMode?: boolean;
 }>();
 
 const emit = defineEmits<{

package/src/components/wt-vidstack-player/components/panels/playback-controls-panel/playback-controls-panel.vue

@@ -4,15 +4,25 @@
 
     <time-slider />
 
-    <time-group />
+    <time-group :countdown="props.countdownTimeMode"/>
   </controls-group>
 </template>
 
 <script setup lang="ts">
+import { defineProps, withDefaults } from 'vue';
 import { ControlsGroup } from '../../../../../components/wt-vidstack-player/components';
 import PlayButton from './components/buttons/play-button.vue';
 import TimeSlider from './components/sliders/time-slider.vue';
 import TimeGroup from './components/time-group.vue';
+
+const props = withDefaults(
+	defineProps<{
+		countdownTimeMode?: boolean;
+	}>(),
+	{
+		countdownTimeMode: false,
+	},
+);
 </script>
 
 <style scoped>

package/src/components/wt-vidstack-player/components/panels/video-display-panel/video-display-panel.vue

@@ -13,7 +13,10 @@
         />
       </slot>
 
-      <span class="video-display-panel__title">
+      <span
+        class="video-display-panel__title typo-body-2-bold"
+        :title="props.title || props.username"
+      >
         {{ props.title || props.username }}
       </span>
     </div>
@@ -123,8 +126,9 @@ onMounted(() => {
 });
 </script>
 
-<style  scoped>.video-display-panel {
-display: flex;
+<style  scoped>
+.video-display-panel {
+  display: flex;
   justify-content: space-between;
   padding: var(--p-player-headline-sm-padding);
   background: var(--p-player-head-line-background);
@@ -135,43 +139,42 @@ display: flex;
 }
 
 .video-display-panel .video-display-panel__head {
-font-family: 'Montserrat', monospace;
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 24px;
-  text-transform: none;
-    display: flex;
-    align-items: center;
-    gap: var(--p-player-headline-sm-gap);
-    min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--p-player-headline-sm-gap);
+  min-width: 0;
 }
 
 .video-display-panel .video-display-panel__title {
-white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
 }
 
 .video-display-panel .video-display-panel__controls {
-display: flex;
-    align-items: center;
-    gap: var(--p-player-headline-sm-gap);
+  display: flex;
+  align-items: center;
+  gap: var(--p-player-headline-sm-gap);
 }
 
 .video-display-panel .video-display-panel--sm {
-gap: var(--p-player-headline-sm-gap);
+  gap: var(--p-player-headline-sm-gap);
 }
 
 .video-display-panel .video-display-panel--md {
-padding: var(--p-player-headline-md-padding);
-    gap: var(--p-player-headline-md-gap);
+  padding: var(--p-player-headline-md-padding);
+  gap: var(--p-player-headline-md-gap);
 
-    .video-display-panel__controls {
-      gap: var(--p-player-headline-md-gap);
+  .video-display-panel__controls {
+    gap: var(--p-player-headline-md-gap);
+  }
 }
 
-  .video-display-panel--lg {
-gap: var(--p-player-headline-lg-gap);
+.video-display-panel--lg {
+  gap: var(--p-player-headline-lg-gap);
+  /* https://webitel.atlassian.net/browse/WTEL-9345 */
+  line-height: 24px;
 }
-}</style>
+
+</style>

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

@@ -30,6 +30,7 @@
         :hide-video-display-panel="props.hideVideoDisplayPanel"
         :title="props.title"
         :username="props.username"
+        :countdown-time-mode="props.countdownTimeMode"
         @close-player="emit('close')"
       >
         <template v-if="$slots['avatar']" #avatar>
@@ -67,6 +68,7 @@ interface Props {
 	title?: string;
 	username?: string;
 	closable?: boolean;
+	countdownTimeMode?: boolean;
 	static?: boolean;
 	stream?: MediaStream;
 	size?: ComponentSize;
@@ -85,6 +87,7 @@ const props = withDefaults(defineProps<Props>(), {
 	title: '',
 	username: '',
 	closable: false,
+	countdownTimeMode: false,
 	static: false,
 	hideControlsPanel: false,
 	videoObjectFit: 'contain',

package/types/components/wt-vidstack-player/components/layouts/video-layout.vue.d.ts

@@ -5,6 +5,7 @@ type __VLS_Props = {
     hideVideoDisplayPanel?: boolean;
     hideControlsPanel?: boolean;
     hideExpand?: boolean;
+    countdownTimeMode?: boolean;
 };
 declare var __VLS_17: {}, __VLS_25: {}, __VLS_27: {};
 type __VLS_Slots = {} & {

package/types/components/wt-vidstack-player/components/panels/playback-controls-panel/playback-controls-panel.vue.d.ts

@@ -1,3 +1,8 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Props = {
+    countdownTimeMode?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    countdownTimeMode: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/types/components/wt-vidstack-player/wt-vidstack-player.vue.d.ts

@@ -10,6 +10,7 @@ interface Props {
     title?: string;
     username?: string;
     closable?: boolean;
+    countdownTimeMode?: boolean;
     static?: boolean;
     stream?: MediaStream;
     size?: ComponentSize;
@@ -43,6 +44,7 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     username: string;
     closable: boolean;
     autoplay: boolean;
+    countdownTimeMode: boolean;
     muted: boolean;
     hideControlsPanel: boolean;
     mime: string;