@webitel/ui-sdk 25.12.30 → 25.12.32

package/dist/{vidstack-Bq6c3Bam-iboJqKVr.js → vidstack-Bq6c3Bam-7dUj8HJJ.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 N = (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 { A as Yt, z as ut, B as j, C as Zt, b as ti, E as nt, e as lt, F as _, G as ii, H as ei, f as si, J as ai, l as rt, K as dt, D as ni, L as Y, M as Z } from "./install-D_xtJZB0.js";
-import { R as ri } from "./vidstack-DqAw8m9J-DRb_cwVy.js";
+import { A as Yt, z as ut, B as j, C as Zt, b as ti, E as nt, e as lt, F as _, G as ii, H as ei, f as si, J as ai, l as rt, K as dt, D as ni, L as Y, M as Z } from "./install-DPTNK_y8.js";
+import { R as ri } from "./vidstack-DqAw8m9J-Un0fJP1z.js";
 let q = null, K = [], z = [];
 function ht() {
   return q ?? (q = new AudioContext());

package/dist/{vidstack-D2pY00kU-Ct14APC8.js → vidstack-D2pY00kU-B4w_mKZl.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, k as A, V as O, G as D, f as R, o as G } from "./install-D_xtJZB0.js";
+import { l as b, k as A, V as O, G as D, f as R, o as G } from "./install-DPTNK_y8.js";
 function M() {
   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-BWfbN1oJ.js")).GoogleCastProvider(c(this, n), e);
+    return new (await import("./vidstack-google-cast-DcYQ7uwa.js")).GoogleCastProvider(c(this, n), e);
   }
 }
 n = new WeakMap(), r = new WeakSet(), S = async function(e) {

package/dist/{vidstack-DDXt6fpN-Dt79RJ4W.js → vidstack-DDXt6fpN-CDgv4Ulh.js}

@@ -5,7 +5,7 @@ var g = (s) => {
 var M = (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) => M(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 { M as w, l as f, e as A, f as P, U as O, b as S } from "./install-D_xtJZB0.js";
+import { M as w, l as f, e as A, f as P, U as O, b as S } from "./install-DPTNK_y8.js";
 var r, o, b, m;
 class J {
   constructor(t) {

package/dist/{vidstack-D_-9AA6_-DDXWcVDN.js → vidstack-D_-9AA6_-CT5H9lb4.js}

@@ -1,4 +1,4 @@
-import { c as d, a as i, I as l, e as m } from "./install-D_xtJZB0.js";
+import { c as d, a as i, I as l, e as m } from "./install-DPTNK_y8.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-DRb_cwVy.js → vidstack-DqAw8m9J-Un0fJP1z.js}

@@ -3,7 +3,7 @@ var l = (i) => {
 };
 var m = (i, t, s) => t.has(i) || l("Cannot " + s);
 var r = (i, t, s) => (m(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) => (m(i, t, "write to private field"), f ? f.call(i, s) : t.set(i, s), s), c = (i, t, s) => (m(i, t, "access private method"), s);
-import { m as p, v as u } from "./install-D_xtJZB0.js";
+import { m as p, v as u } from "./install-DPTNK_y8.js";
 var o, a, n, d;
 class F {
   constructor(t) {

package/dist/{vidstack-audio-ciWGdZoD.js → vidstack-audio-CiqSEu9s.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-D_xtJZB0.js";
-import { H as d, a as u } from "./vidstack-Bq6c3Bam-iboJqKVr.js";
+import { s as p } from "./install-DPTNK_y8.js";
+import { H as d, a as u } from "./vidstack-Bq6c3Bam-7dUj8HJJ.js";
 class n extends d {
   constructor(t, s) {
     super(t, s);

package/dist/{vidstack-dash-BjbkCaQh.js → vidstack-dash-X_IrTs8m.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 { r as Et, b as _, d as Lt, f as At, Q as z, l as J, e as Dt, D as N, h as xt, j as O, T as Mt, L as q, t as Ct, u as Nt, v as Rt, k as Ft, m as Z, n as Pt, o as qt, q as _t } from "./install-D_xtJZB0.js";
-import { VideoProvider as $t } from "./vidstack-video-5xriTd1y.js";
-import { R as jt } from "./vidstack-DqAw8m9J-DRb_cwVy.js";
+import { r as Et, b as _, d as Lt, f as At, Q as z, l as J, e as Dt, D as N, h as xt, j as O, T as Mt, L as q, t as Ct, u as Nt, v as Rt, k as Ft, m as Z, n as Pt, o as qt, q as _t } from "./install-DPTNK_y8.js";
+import { VideoProvider as $t } from "./vidstack-video-BSFI-cVG.js";
+import { R as jt } from "./vidstack-DqAw8m9J-Un0fJP1z.js";
 function W(n) {
   try {
     return new Intl.DisplayNames(navigator.languages, { type: "language" }).of(n) ?? null;

package/dist/{vidstack-google-cast-BWfbN1oJ.js → vidstack-google-cast-DcYQ7uwa.js}

@@ -5,9 +5,9 @@ var Q = (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) || Q("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) ? Q("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 { A as St, N as L, W as Z, z as At, D as tt, f as V, l as et, e as It, X as bt, L as Rt } from "./install-D_xtJZB0.js";
-import { R as wt } from "./vidstack-DqAw8m9J-DRb_cwVy.js";
-import { g as Mt, a as Dt, b as it, h as st, l as Nt, c as Pt } from "./vidstack-D2pY00kU-Ct14APC8.js";
+import { A as St, N as L, W as Z, z as At, D as tt, f as V, l as et, e as It, X as bt, L as Rt } from "./install-DPTNK_y8.js";
+import { R as wt } from "./vidstack-DqAw8m9J-Un0fJP1z.js";
+import { g as Mt, a as Dt, b as it, h as st, l as Nt, c as Pt } from "./vidstack-D2pY00kU-B4w_mKZl.js";
 var g, _, at;
 class _t {
   constructor(t) {

package/dist/{vidstack-hls-BqpGa4dW.js → vidstack-hls-2XBuX8OU.js}

@@ -5,9 +5,9 @@ var q = (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) || q("Cannot " + i);
 var e = (n, t, i) => (R(n, t, "read from private field"), i ? i.call(n) : t.get(n)), f = (n, t, i) => t.has(n) ? q("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(n) : t.set(n, i), p = (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, d as at, f as O, Q as N, l as V, e as dt, D as x, h as ut, T as ct, j, L as $, k as lt, m as k, n as ft, o as pt, q as vt } from "./install-D_xtJZB0.js";
-import { VideoProvider as yt } from "./vidstack-video-5xriTd1y.js";
-import { R as gt } from "./vidstack-DqAw8m9J-DRb_cwVy.js";
+import { i as ht, b as C, d as at, f as O, Q as N, l as V, e as dt, D as x, h as ut, T as ct, j, L as $, k as lt, m as k, n as ft, o as pt, q as vt } from "./install-DPTNK_y8.js";
+import { VideoProvider as yt } from "./vidstack-video-BSFI-cVG.js";
+import { R as gt } from "./vidstack-DqAw8m9J-Un0fJP1z.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-5xriTd1y.js → vidstack-video-BSFI-cVG.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 y = (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, w as V, x as A, y as j, z as C, l as q, D as z, E as F, T as Y, j as v } from "./install-D_xtJZB0.js";
-import { H as _, a as B } from "./vidstack-Bq6c3Bam-iboJqKVr.js";
+import { s as U, w as V, x as A, y as j, z as C, l as q, D as z, E as F, T as Y, j as v } from "./install-DPTNK_y8.js";
+import { H as _, a as B } from "./vidstack-Bq6c3Bam-7dUj8HJJ.js";
 var P, f, k, D, H;
 class G {
   constructor(t, e) {

package/dist/{vidstack-vimeo-BC8x2jc8.js → vidstack-vimeo-DgfVtsI6.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 { A as fe, M as U, N as C, d as pe, e as q, f as Q, b as ye, O as _, L as R, l as be, P as ke, T as ve, Q as W } from "./install-D_xtJZB0.js";
-import { R as me } from "./vidstack-DqAw8m9J-DRb_cwVy.js";
-import { E as we } from "./vidstack-DDXt6fpN-Dt79RJ4W.js";
+import { A as fe, M as U, N as C, d as pe, e as q, f as Q, b as ye, O as _, L as R, l as be, P as ke, T as ve, Q as W } from "./install-DPTNK_y8.js";
+import { R as me } from "./vidstack-DqAw8m9J-Un0fJP1z.js";
+import { E as we } from "./vidstack-DDXt6fpN-CDgv4Ulh.js";
 import { resolveVimeoVideoId as Pe, getVimeoVideoInfo as Te } from "./vidstack-krOAtKMi-B4IZWKdc.js";
 const Ce = [
   "bufferend",

package/dist/{vidstack-youtube-B8OrDxFV.js → vidstack-youtube-RFa4SZBA.js}

@@ -5,8 +5,8 @@ var B = (r) => {
 var q = (r, n, e) => n in r ? A(r, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[n] = e;
 var T = (r, n, e) => q(r, typeof n != "symbol" ? n + "" : n, e), M = (r, n, e) => n.has(r) || B("Cannot " + e);
 var s = (r, n, e) => (M(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) => (M(r, n, "write to private field"), t ? t.call(r, e) : n.set(r, e), e), o = (r, n, e) => (M(r, n, "access private method"), e);
-import { A as z, M as G, d as H, e as J, b as K, O as Q, N as C, R as W, v as $, S as X } from "./install-D_xtJZB0.js";
-import { E as Z } from "./vidstack-DDXt6fpN-Dt79RJ4W.js";
+import { A as z, M as G, d as H, e as J, b as K, O as Q, N as C, R as W, v as $, S as X } from "./install-DPTNK_y8.js";
+import { E as Z } from "./vidstack-DDXt6fpN-CDgv4Ulh.js";
 import { resolveYouTubeVideoId as ee } from "./vidstack-Dm1xEU9Q-qSXq3AI-.js";
 const b = {
   Ended: 0,

package/dist/{vuex.esm-bundler-BOZ1SHXV.js → vuex.esm-bundler-D3tAy2Z7.js}

@@ -1,4 +1,4 @@
-import { p as d } from "./install-D_xtJZB0.js";
+import { p as d } from "./install-DPTNK_y8.js";
 import { inject as lt, effectScope as dt, reactive as vt, watch as J, computed as pt } from "vue";
 function ht() {
   return W().__VUE_DEVTOOLS_GLOBAL_HOOK__;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.12.30",
+  "version": "25.12.32",
   "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",
@@ -282,6 +282,10 @@
       "types": "./types/modules*",
       "import": "./src/modules*"
     },
+    "./modules/CallSession": {
+      "types": "./types/modules/CallSession/index.d.ts",
+      "import": "./src/modules/CallSession/index.ts"
+    },
     "./plugins*": {
       "types": "./types/plugins*",
       "import": "./src/plugins*"
@@ -300,6 +304,10 @@
     },
     "./dist*": {
       "import": "./dist*"
+    },
+    "./src/types": {
+      "types": "./types/index.d.ts",
+      "import": "./src/types/index.ts"
     }
   }
 }

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

@@ -82,7 +82,7 @@ import docs from './docs.svg';
 import done from './done.svg';
 import doneFilled from './done--filled.svg';
 import download from './download.svg';
-import downloadPdf from './download-pdf.svg'
+import downloadPdf from './download-pdf.svg';
 import edit from './edit.svg';
 import elevenlabs from './elevenlabs.svg';
 import email from './email.svg';
@@ -223,6 +223,7 @@ import variableSelect from './variable-select.svg';
 import versions from './versions.svg';
 import videoCam from './video-cam.svg';
 import videoCamOff from './video-cam-off.svg';
+import videoCamOffFilled from './video-cam-off--filled.svg';
 import webitelLogo from './webitel-logo.svg';
 import zoomIn from './zoom-in.svg';
 import zoomOut from './zoom-out.svg';
@@ -397,6 +398,7 @@ export default objCamelToKebab({
   user,
   union,
   videoCamOff,
+  'video-cam-off--filled': videoCamOffFilled,
   videoCam,
   zoomIn,
   zoomOut,

package/src/assets/icons/sprite/video-cam-off--filled.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M38.1536 49.3335C41.644 49.3335 44.6267 47.2091 45.8125 44.2137C45.9803 43.7897 46.1109 43.3461 46.2031 42.8908C46.305 42.3871 46.3594 41.8664 46.3594 41.3335V38.0054L54.289 43.8075C56.092 45.1269 58.6666 43.8726 58.6666 41.6747V22.3257C58.6666 20.1278 56.092 18.8736 54.289 20.1929L46.3594 25.995V22.6669C46.3594 22.134 46.305 21.6133 46.2031 21.1096C46.1109 20.6543 45.9803 20.2107 45.8125 19.7867C44.6267 16.7913 41.644 14.6669 38.1536 14.6669H13.539C9.00747 14.6669 5.33331 18.2486 5.33331 22.6669V41.3335C5.33331 45.7518 9.00747 49.3335 13.539 49.3335H38.1536ZM31.9974 38.6669C31.081 39.5806 29.5935 39.5806 28.6771 38.6669L25.6901 35.6877L22.7031 38.6669C21.7867 39.5806 20.2992 39.5806 19.3828 38.6669C18.4666 37.7531 18.4665 36.2706 19.3828 35.357L22.3828 32.3674L19.3802 29.3752C18.4638 28.4615 18.4638 26.979 19.3802 26.0653C20.2965 25.1521 21.7816 25.1521 22.6979 26.0653L25.6901 29.0497L28.6823 26.0653C29.5987 25.1523 31.0838 25.152 32 26.0653C32.9164 26.979 32.9164 28.4615 32 29.3752L28.9974 32.3674L31.9974 35.357C32.9136 36.2706 32.9133 37.7531 31.9974 38.6669Z" />
+</svg>

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

@@ -4,9 +4,11 @@
     :class="{ 'wt-switcher--label-left': labelLeft }"
   >
     <p-toggle-switch
-      v-model="model"
+      :key="switcherKey"
+      :model-value="model"
       :input-id="switcherId"
       :disabled="disabled"
+      @update:model-value="handleSwitcherClick"
     />
     <wt-label
       v-if="hasLabel"
@@ -32,7 +34,8 @@
 
 <script setup lang="ts">
 import { ToggleSwitchProps } from 'primevue/toggleswitch';
-import { computed, defineModel, defineProps, useSlots, withDefaults } from 'vue';
+import { computed, defineEmits, defineModel, defineProps,
+          nextTick, ref, useSlots, withDefaults } from 'vue';
 
 interface LabelProps {
   [key: string]: any;
@@ -43,6 +46,7 @@ interface Props extends ToggleSwitchProps {
   labelLeft?: boolean;
   disabled?: boolean;
   labelProps?: LabelProps;
+  controlled?: boolean;  // for controlled mode, when need to sync visual state with model
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -50,9 +54,13 @@ const props = withDefaults(defineProps<Props>(), {
   labelLeft: false,
   disabled: false,
   labelProps: () => ({}),
+  controlled: false
 });
 
 const model = defineModel<boolean>();
+const switcherKey = ref(0);
+
+const emit = defineEmits(['update:modelValue']);
 
 const slots = useSlots();
 
@@ -61,6 +69,15 @@ const hasLabel = computed(() => {
 });
 
 const switcherId = `switcher-${Math.random().toString(36).slice(2, 11)}`;
+
+const handleSwitcherClick = () => {
+  if (props.controlled) {
+    nextTick(() => {
+      switcherKey.value++
+    })
+  }
+  emit('update:modelValue', !model.value);
+}
 </script>
 
 <style lang="scss">

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

@@ -15,7 +15,17 @@
         :multiple="multiple"
         :allow-parent="allowParent"
         @update:model-value="emit('update:modelValue', $event)"
-      />
+      >
+        <template
+          v-if="$slots['item-prefix']"
+          #item-prefix="slotProps"
+        >
+          <slot
+            name="item-prefix"
+            v-bind="slotProps"
+          />
+        </template>
+      </wt-tree-line>
     </div>
     <div
       v-if="mode === WtTreeMode.List"

package/src/components/wt-tree-line/wt-tree-line.vue

@@ -18,6 +18,16 @@
         @click="collapsed = !collapsed"
       />
     </div>
+    <slot
+      name="item-prefix"
+      class="mr-1"
+      :data="data"
+      :root-data="rootData || data"
+      :nested-level="nestedLevel"
+      :active="displayActiveState"
+      :has-children="!!(data[childrenProp] && data[childrenProp].length)"
+      :selected-parent="selectedParent"
+    />
     <div
       :class="{
       active: displayActiveState,
@@ -55,7 +65,17 @@
         :root-data="rootData || data"
         @open-parent="onOpenParent"
         @update:model-value="emit('update:modelValue', $event)"
-      />
+      >
+        <template
+          v-if="$slots['item-prefix']"
+          #item-prefix="slotProps"
+        >
+          <slot
+            name="item-prefix"
+            v-bind="slotProps"
+          />
+        </template>
+      </wt-tree-line>
     </div>
   </wt-expand-transition>
 </template>

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

@@ -4,7 +4,7 @@
     :class="`video-layout--${size}`"
   >
     <video-display-panel
-      v-if="!props.hideDisplayPanel"
+      :class="{'video-display-panel--hidden': props.hideDisplayPanel}"
       :title="props.title"
       :username="props.username"
       :closable="props.closable"
@@ -49,6 +49,12 @@ const emit = defineEmits<{
 .video-layout {
   position: relative;
 
+  .video-display-panel {
+    &--hidden {
+      visibility: hidden;
+    }
+  }
+
   &--sm {
     border-radius: var(--p-player-wrapper-sm-border-radius);
   }

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

@@ -1,116 +1,152 @@
 <template>
   <controls-group class="video-call-controls-panel">
     <wt-button
-      v-if="props.screenshotCallback"
+      v-if="shownActionsMap[VideoCallAction.Screenshot]"
       rounded
       contains-icon
       variant="outlined"
       color="secondary"
-      :loading="props.screenshotIsLoading"
+      :loading="isScreenshotLoading"
       :size="size"
       :icon="screenShotIcon"
-      @click="props.screenshotCallback"
+      @click="onScreenshotClick"
     />
 
     <wt-button
-      v-if="props.recordingsCallback"
+      v-if="shownActionsMap[VideoCallAction.Recordings]"
       rounded
       contains-icon
       variant="outlined"
       color="secondary"
       :size="size"
       :icon="recordIcon"
-      @click="props.recordingsCallback"
+      @click="emit(VideoCallAction.Recordings)"
     />
 
     <wt-button
-      v-if="props.micCallback"
+      v-if="shownActionsMap[VideoCallAction.Mic]"
       rounded
       contains-icon
       variant="outlined"
       color="secondary"
       :size="size"
       :icon="microphoneIcon"
-      @click="props.micCallback"
+      @click="emit(VideoCallAction.Mic)"
     />
 
     <wt-button
-      v-if="props.videoCallback"
+      v-if="shownActionsMap[VideoCallAction.Video]"
       rounded
       contains-icon
       variant="outlined"
       color="secondary"
       :size="size"
       :icon="videoCamIcon"
-      @click="props.videoCallback"
+      @click="emit(VideoCallAction.Video)"
     />
 
     <wt-button
-      v-if="props.settingsCallback"
+      v-if="shownActionsMap[VideoCallAction.Settings]"
       :size="size"
       icon="settings"
       variant="outlined"
       color="secondary"
       rounded
       contains-icon
-      @click="props.settingsCallback"
+      @click="emit(VideoCallAction.Settings)"
     />
 
     <wt-button
-      v-if="props.chatCallback"
+      v-if="shownActionsMap[VideoCallAction.Chat]"
       :size="size"
       icon="chat"
       variant="outlined"
       color="secondary"
       rounded
       contains-icon
-      @click="props.chatCallback"
+      @click="emit(VideoCallAction.Chat)"
     />
 
     <wt-button
-      v-if="props.callStateCallback"
+      v-if="shownActionsMap[VideoCallAction.Hangup]"
       :size="size"
-      :icon="callStateIcon"
-      :color="callStateButtonColor"
+      icon="call-end--filled"
+      color="error"
       rounded
       contains-icon
-      @click="props.callStateCallback"
+      @click="emit(VideoCallAction.Hangup)"
     />
   </controls-group>
 </template>
 
 <script setup lang="ts">
-import {computed, inject} from 'vue';
+import {computed, inject, ref} from 'vue';
 
 import {ControlsGroup} from '../../../../../components/wt-vidstack-player/components'
+import { ComponentSize } from '../../../../../enums';
+import { VideoCallAction } from '../../../../../modules/CallSession/modules/VideoCall/enums/VideoCallAction.enum';
 import {ScreenshotStatus} from '../../../../../modules/CallSession/types';
+import { ResultCallbacks } from '../../../../../types';
+
+const props = defineProps<{
+  'actions': VideoCallAction[];
+
+  'mic:enabled': boolean;
+  'mic:accessed': boolean;
+  'video:enabled': boolean;
+  'video:accessed': boolean;
+  'screenshot:status': ScreenshotStatus | null;
+  'screenshot:loading': boolean;
+  'recordings': boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: typeof VideoCallAction.Screenshot, payload?: unknown, options?: ResultCallbacks): void;
+  (e: typeof VideoCallAction.Recordings, payload?: unknown, options?: ResultCallbacks): void;
+  (e: typeof VideoCallAction.Mic, payload?: unknown, options?: ResultCallbacks): void;
+  (e: typeof VideoCallAction.Video, payload?: unknown, options?: ResultCallbacks): void;
+  (e: typeof VideoCallAction.Settings, payload?: unknown, options?: ResultCallbacks): void;
+  (e: typeof VideoCallAction.Chat, payload?: unknown, options?: ResultCallbacks): void;
+  (e: typeof VideoCallAction.Hangup, payload?: unknown, options?: ResultCallbacks): void;
+}>();
+
+const { size } = inject('size') as { size: ComponentSize };
+
+const shownActionsMap = computed(() => {
+  return props.actions.reduce<Record<VideoCallAction, boolean>>((acc, action) => {
+    acc[action] = true;
+    return acc;
+  }, {} as Record<VideoCallAction, boolean>);
+});
 
-interface Props {
-  recordings: boolean
-  isMicMuted: boolean
-  isVideoMuted: boolean
-  isCallStarted: boolean
-  screenshotIsLoading: boolean
-  screenshotStatus: ScreenshotStatus | null
-
-  screenshotCallback?: () => void
-  recordingsCallback?: () => void
-  micCallback?: () => void
-  videoCallback?: () => void
-  settingsCallback?: () => void
-  chatCallback?: () => void
-  callStateCallback?: () => void
-}
+const microphoneIcon = computed(() => {
+  if (props['mic:accessed']) {
+    return 'mic'; // todo
+  }
+
+  if (!props['mic:enabled']) {
+    return 'mic-muted';
+  }
+
+  return 'mic';
+});
 
-const props = defineProps<Props>();
+const videoCamIcon = computed(() => {
+  if (!props['video:accessed']) {
+    return 'video-cam'; // todo
+  }
+
+  if (!props['video:enabled']) {
+    return 'video-cam-off';
+  }
 
-const {size} = inject('size');
+  return 'video-cam';
+});
 
-const microphoneIcon = computed(() => (props.isMicMuted ? 'mic' : 'mic-muted'));
-const videoCamIcon = computed(() => (props.isVideoMuted ? 'video-cam' : 'video-cam-off'));
 const recordIcon = computed(() => (props.recordings ? 'record-stop' : 'record-start'));
+
 const screenShotIcon = computed(() => {
-  switch (props.screenshotStatus) {
+  switch (props['screenshot:status']) {
     case 'done':
       return 'screenshot-done';
     case 'error':
@@ -119,8 +155,17 @@ const screenShotIcon = computed(() => {
       return 'screenshot';
   }
 });
-const callStateIcon = computed(() => (props.isCallStarted ? 'call-end--filled' : 'call--filled'));
-const callStateButtonColor = computed(() => (props.isCallStarted ? 'error' : 'success'));
+
+const isScreenshotLoading = ref(false);
+
+const onScreenshotClick = () => {
+  isScreenshotLoading.value = true;
+  emit(VideoCallAction.Screenshot, null, {
+    onComplete: () => {
+      isScreenshotLoading.value = false;
+    },
+  });
+};
 </script>
 
 <style scoped lang="scss">