@webitel/ui-sdk 25.12.48 → 25.12.50

package/dist/{vidstack-Bq6c3Bam-DEJ-5jcv.js → vidstack-Bq6c3Bam-DbaqiW-G.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-B4EtpXXD.js";
-import { R as ri } from "./vidstack-DqAw8m9J-ReUPOFHP.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-DM_Q0dji.js";
+import { R as ri } from "./vidstack-DqAw8m9J-DhoY5QSY.js";
 let q = null, K = [], z = [];
 function ht() {
   return q ?? (q = new AudioContext());

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

package/dist/{vidstack-DDXt6fpN-DHo4CIYR.js → vidstack-DDXt6fpN-CHfTn9BX.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-B4EtpXXD.js";
+import { M as w, l as f, e as A, f as P, U as O, b as S } from "./install-DM_Q0dji.js";
 var r, o, b, m;
 class J {
   constructor(t) {

package/dist/{vidstack-D_-9AA6_-ad2HIxVI.js → vidstack-D_-9AA6_-3vwSP2uy.js}

@@ -1,4 +1,4 @@
-import { c as d, a as i, I as l, e as m } from "./install-B4EtpXXD.js";
+import { c as d, a as i, I as l, e as m } from "./install-DM_Q0dji.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-ReUPOFHP.js → vidstack-DqAw8m9J-DhoY5QSY.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-B4EtpXXD.js";
+import { m as p, v as u } from "./install-DM_Q0dji.js";
 var o, a, n, d;
 class F {
   constructor(t) {

package/dist/{vidstack-audio-CAikPdW6.js → vidstack-audio-DWe9RnDc.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-B4EtpXXD.js";
-import { H as d, a as u } from "./vidstack-Bq6c3Bam-DEJ-5jcv.js";
+import { s as p } from "./install-DM_Q0dji.js";
+import { H as d, a as u } from "./vidstack-Bq6c3Bam-DbaqiW-G.js";
 class n extends d {
   constructor(t, s) {
     super(t, s);

package/dist/{vidstack-dash-CebXK5VO.js → vidstack-dash-B0eNUc8l.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-B4EtpXXD.js";
-import { VideoProvider as $t } from "./vidstack-video-BTCFVA94.js";
-import { R as jt } from "./vidstack-DqAw8m9J-ReUPOFHP.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-DM_Q0dji.js";
+import { VideoProvider as $t } from "./vidstack-video-BGBwzabO.js";
+import { R as jt } from "./vidstack-DqAw8m9J-DhoY5QSY.js";
 function W(n) {
   try {
     return new Intl.DisplayNames(navigator.languages, { type: "language" }).of(n) ?? null;

package/dist/{vidstack-google-cast-Bb5-TcI4.js → vidstack-google-cast-ChRMiIAe.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-B4EtpXXD.js";
-import { R as wt } from "./vidstack-DqAw8m9J-ReUPOFHP.js";
-import { g as Mt, a as Dt, b as it, h as st, l as Nt, c as Pt } from "./vidstack-D2pY00kU-DWEQ9_N8.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-DM_Q0dji.js";
+import { R as wt } from "./vidstack-DqAw8m9J-DhoY5QSY.js";
+import { g as Mt, a as Dt, b as it, h as st, l as Nt, c as Pt } from "./vidstack-D2pY00kU-Ilyikvhr.js";
 var g, _, at;
 class _t {
   constructor(t) {

package/dist/{vidstack-hls-CFWw21PX.js → vidstack-hls-DAdAA7tQ.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-B4EtpXXD.js";
-import { VideoProvider as yt } from "./vidstack-video-BTCFVA94.js";
-import { R as gt } from "./vidstack-DqAw8m9J-ReUPOFHP.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-DM_Q0dji.js";
+import { VideoProvider as yt } from "./vidstack-video-BGBwzabO.js";
+import { R as gt } from "./vidstack-DqAw8m9J-DhoY5QSY.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-BTCFVA94.js → vidstack-video-BGBwzabO.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-B4EtpXXD.js";
-import { H as _, a as B } from "./vidstack-Bq6c3Bam-DEJ-5jcv.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-DM_Q0dji.js";
+import { H as _, a as B } from "./vidstack-Bq6c3Bam-DbaqiW-G.js";
 var P, f, k, D, H;
 class G {
   constructor(t, e) {

package/dist/{vidstack-vimeo-D1nXJdHs.js → vidstack-vimeo-CGKxoSCH.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-B4EtpXXD.js";
-import { R as me } from "./vidstack-DqAw8m9J-ReUPOFHP.js";
-import { E as we } from "./vidstack-DDXt6fpN-DHo4CIYR.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-DM_Q0dji.js";
+import { R as me } from "./vidstack-DqAw8m9J-DhoY5QSY.js";
+import { E as we } from "./vidstack-DDXt6fpN-CHfTn9BX.js";
 import { resolveVimeoVideoId as Pe, getVimeoVideoInfo as Te } from "./vidstack-krOAtKMi-B4IZWKdc.js";
 const Ce = [
   "bufferend",

package/dist/{vidstack-youtube-MtnoA4Ft.js → vidstack-youtube-B9wXZ50D.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-B4EtpXXD.js";
-import { E as Z } from "./vidstack-DDXt6fpN-DHo4CIYR.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-DM_Q0dji.js";
+import { E as Z } from "./vidstack-DDXt6fpN-CHfTn9BX.js";
 import { resolveYouTubeVideoId as ee } from "./vidstack-Dm1xEU9Q-qSXq3AI-.js";
 const b = {
   Ended: 0,

package/dist/{vuex.esm-bundler-yJVenwQK.js → vuex.esm-bundler-C6nPH718.js}

@@ -1,4 +1,4 @@
-import { p as d } from "./install-B4EtpXXD.js";
+import { p as d } from "./install-DM_Q0dji.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.48",
+  "version": "25.12.50",
   "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.90",
-    "@webitel/styleguide": "^24.12.89",
+    "@webitel/styleguide": "^24.12.90",
     "autosize": "^6.0.1",
     "axios": "^1.8.3",
     "clipboard-copy": "^4.0.1",

package/src/components/index.js

@@ -11,6 +11,7 @@ import WtAppNavigator from './wt-app-header/wt-app-navigator.vue';
 import WtHeaderActions from './wt-app-header/wt-header-actions.vue';
 import WtAvatar from './wt-avatar/wt-avatar.vue';
 import WtBadge from './wt-badge/wt-badge.vue';
+import WtBadgeNew from './wt-badge-new/wt-badge.vue';
 import WtBreadcrumb from './wt-breadcrumb/wt-breadcrumb.vue';
 import WtButton from './wt-button/wt-button.vue';
 import WtButtonSelect from './wt-button-select/wt-button-select.vue';
@@ -81,6 +82,7 @@ const Components = {
   WtLogo,
   WtAvatar,
   WtBadge,
+  WtBadgeNew,
   WtIcon,
   WtIndicator,
   WtInputInfo,
@@ -157,6 +159,7 @@ export {
   WtAppNavigator,
   WtAvatar,
   WtBadge,
+  WtBadgeNew,
   WtBreadcrumb,
   WtButton,
   WtButtonSelect,

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

@@ -0,0 +1,49 @@
+<template>
+  <p-badge
+    :value="props.value"
+    :class="[
+      props.size && `p-badge--${props.size}`,
+      props.severity && `p-badge--${props.severity}`
+    ]"
+    class="wt-badge"
+  >
+    <slot />
+  </p-badge>
+</template>
+
+<script setup lang="ts">
+import { defineProps, withDefaults } from 'vue';
+
+import {ComponentSize} from "../../enums";
+
+interface Props {
+  value: string | number
+  severity?:
+    "secondary" |
+    "info" |
+    "success" |
+    "warn" |
+    "error" |
+    "online" |
+    "dnd" |
+    "busy" |
+    "pause" |
+    "onlineCc" |
+    "offline"
+  size?: ComponentSize
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: '',
+  severity: null,
+  size: ComponentSize.MD,
+})
+</script>
+
+<style lang="scss" scoped>
+@use '@webitel/styleguide/typography' as *;
+
+.wt-badge {
+  @extend %typo-caption;
+}
+</style>

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

@@ -3,6 +3,7 @@
     :class="{
         'p-button--width-by-content': widthByContent || icon,
         'p-button--wide': wide,
+        'p-button--with-badge': props.badge,
         'p-button--loading': showLoader,
         'p-button--icon': icon,
         [ `p-button--icon-${variant} p-button--icon-${size}` ]: icon,
@@ -23,8 +24,23 @@
     />
     <div class="wt-button__contents">
       <slot v-if="!icon"> no content provided</slot>
+
+      <wt-badge
+        v-if="props.badge"
+        :value="props.badge"
+        :severity="props.badgeSeverity"
+        :class="badgeClass"
+        :size="ComponentSize.MD"
+      >
+        <template #default>
+          <slot name="badge">
+            {{ props.badge }}
+          </slot>
+        </template>
+      </wt-badge>
+
       <wt-icon
-        v-else
+        v-if="icon"
         :icon="icon"
         :icon-prefix="iconPrefix"
         :size="iconButtonSizeMap[size]"
@@ -37,7 +53,9 @@
 import type { ButtonProps } from 'primevue';
 import { computed, defineEmits, defineProps, inject,ref, useAttrs, watch } from 'vue';
 
-import { ButtonColor, ButtonVariant, ComponentSize,  } from '../../enums';
+import { ButtonColor, ButtonVariant, ComponentSize } from '../../enums';
+import WtBadge from "../wt-badge-new/wt-badge.vue";
+import WtIcon from "../wt-icon/wt-icon.vue";
 
 const primevueSizeMap = {
   [ComponentSize.XS]: 'extra-small',
@@ -60,6 +78,9 @@ interface WtButtonProps extends  /* @vue-ignore */ ButtonProps {
   widthByContent?: boolean;
   icon?: string;
   iconPrefix?: string;
+  badge?: string;
+  badgeSeverity?: string;
+  badgeAbsolutePosition?: boolean;
   variant?: ButtonVariant;
 }
 
@@ -81,6 +102,10 @@ const attrs = useAttrs();
 
 const showLoader = ref(false);
 
+const badgeClass = computed(() => ({
+  'wt-badge--absolute': props.badgeAbsolutePosition
+}));
+
 // @Ler24
 // Compatibility mode for Vuex (old mode) and when there is no Vuex in project (new mode)
 const store = ref(null);
@@ -139,7 +164,26 @@ watch(
 </script>
 
 <style lang="scss">
-.wt-button__contents {
-  display: contents;
+.wt-button {
+  position: relative;
+
+  &.p-button {
+    &--with-badge {
+      overflow: visible;
+    }
+  }
+
+  &__contents {
+    display: contents;
+  }
+
+  .wt-badge {
+    &--absolute {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+  }
 }
+
 </style>

package/src/components/wt-table-actions/wt-table-actions.vue

@@ -37,50 +37,45 @@
       @click="$emit('input', 'refresh')"
     />
 
-    <wt-icon-btn
-      v-if="isSettings"
-      v-tooltip="$t('webitelUI.tableActions.expandFilters')"
-      :class="{ active: isSettingsActive }"
-      icon="filter"
-      @click="$emit('input', 'settings')"
-    />
+    <wt-badge 
+      :hidden="!isSettingsBadge"
+    >
+      <wt-icon-btn
+        v-if="isSettings"
+        v-tooltip="$t('webitelUI.tableActions.expandFilters')"
+        :class="{ active: isSettingsActive }"
+        icon="filter"
+        @click="$emit('input', 'settings')"
+      />
+    </wt-badge>
   </aside>
 </template>
 
-<script>
-export default {
-  name: 'WtTableActions',
-  props: {
-    icons: {
-      type: Array,
-      default: () => ['refresh'],
-    },
-    isSettingsActive: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    isImport() {
-      return this.icons.indexOf('import') !== -1;
-    },
-    isExport() {
-      return this.icons.indexOf('export') !== -1;
-    },
-    isFilterReset() {
-      return this.icons.indexOf('filter-reset') !== -1;
-    },
-    isColumnSelect() {
-      return this.icons.indexOf('column-select') !== -1;
-    },
-    isRefresh() {
-      return this.icons.indexOf('refresh') !== -1;
-    },
-    isSettings() {
-      return this.icons.indexOf('settings') !== -1;
-    },
-  },
-};
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  icons?: string[];
+  isSettingsActive?: boolean;
+  isSettingsBadge?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  icons: () => ['refresh'],
+  isSettingsActive: false,
+  isSettingsBadge: false,
+});
+
+defineEmits<{
+  input: [value: string];
+}>();
+
+const isImport = computed(() => props.icons.indexOf('import') !== -1);
+const isExport = computed(() => props.icons.indexOf('export') !== -1);
+const isFilterReset = computed(() => props.icons.indexOf('filter-reset') !== -1);
+const isColumnSelect = computed(() => props.icons.indexOf('column-select') !== -1);
+const isRefresh = computed(() => props.icons.indexOf('refresh') !== -1);
+const isSettings = computed(() => props.icons.indexOf('settings') !== -1);
 </script>
 
 <style lang="scss">

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

@@ -28,8 +28,11 @@
       :disabled="!props['mic:accessed']"
       :size="buttonSizeMap[size]"
       :icon="microphoneIcon"
+      :badge="micBadge"
+      badge-severity="error"
       variant="outlined"
       color="secondary"
+      badge-absolute-position
       rounded
       contains-icon
       @click="emit(VideoCallAction.Mic)"
@@ -40,8 +43,11 @@
       :disabled="!props['video:accessed']"
       :size="buttonSizeMap[size]"
       :icon="videoCamIcon"
+      :badge="videoBadge"
+      badge-severity="error"
       variant="outlined"
       color="secondary"
+      badge-absolute-position
       rounded
       contains-icon
       @click="emit(VideoCallAction.Video)"
@@ -136,6 +142,8 @@ const microphoneIcon = computed(() => {
   return 'mic';
 });
 
+const micBadge = computed(() => !props['mic:accessed'] ? '!' : null)
+
 const videoCamIcon = computed(() => {
   if (!props['video:accessed']) {
     return 'video-cam'; // todo
@@ -148,6 +156,8 @@ const videoCamIcon = computed(() => {
   return 'video-cam';
 });
 
+const videoBadge = computed(() => !props['video:accessed'] ? '!' : null)
+
 const recordIcon = computed(() => (props.recordings ? 'record-stop' : 'record-start'));
 
 const screenShotIcon = computed(() => {
@@ -182,6 +192,7 @@ const buttonSizeMap = {
 <style scoped lang="scss">
 .video-call-controls-panel {
   position: relative;
+  z-index: 1;
   display: flex;
   justify-content: center;
 }

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

@@ -125,7 +125,7 @@ const normalizedSrc = computed(() => {
   }
 
   return {
-    src: props.src?.src || '',
+    src: props.src?.src || null,
     type: props.src?.type || normalizedType.value
   };
 });

package/src/modules/CallSession/modules/ScreenSharing/screen-sharing.vue

@@ -60,15 +60,13 @@ const attrs = useAttrs();
 
   &__indicator {
     position: absolute;
-    width: 100%;
-    height: 100%;
     display: flex;
     align-items: end;
     justify-content: flex-end;
-    padding: var(--p-player-counter-position-padding-sm);
 
     &--sm {
-      position: relative;
+      right: var(--p-player-counter-position-padding-sm);
+      bottom: calc(var(--p-player-counter-position-padding-sm) + var(--p-player-control-bar-sm-height));
     }
 
     &--md {

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

@@ -76,13 +76,13 @@
         :actions="props.actions"
         :actions:settings:pressed="props['actions:settings:pressed']"
         :actions:chat:pressed="props['actions:chat:pressed']"
-        @[VideoCallAction.Screenshot]="([payload, options] = []) => emit(`action:${VideoCallAction.Screenshot}`, payload, options)"
-        @[VideoCallAction.Recordings]="([payload, options] = []) => emit(`action:${VideoCallAction.Recordings}`, payload, options)"
-        @[VideoCallAction.Mic]="([payload, options] = []) => emit(`action:${VideoCallAction.Mic}`, payload, options)"
-        @[VideoCallAction.Video]="([payload, options] = []) => emit(`action:${VideoCallAction.Video}`, payload, options)"
-        @[VideoCallAction.Settings]="([payload, options] = []) => emit(`action:${VideoCallAction.Settings}`, payload, options)"
-        @[VideoCallAction.Chat]="([payload, options] = []) => emit(`action:${VideoCallAction.Chat}`, payload, options)"
-        @[VideoCallAction.Hangup]="([payload, options] = []) => emit(`action:${VideoCallAction.Hangup}`, payload, options)"
+        @[VideoCallAction.Screenshot]="(payload, options) => emit(`action:${VideoCallAction.Screenshot}`, payload, options)"
+        @[VideoCallAction.Recordings]="(payload, options) => emit(`action:${VideoCallAction.Recordings}`, payload, options)"
+        @[VideoCallAction.Mic]="(payload, options) => emit(`action:${VideoCallAction.Mic}`, payload, options)"
+        @[VideoCallAction.Video]="(payload, options) => emit(`action:${VideoCallAction.Video}`, payload, options)"
+        @[VideoCallAction.Settings]="(payload, options) => emit(`action:${VideoCallAction.Settings}`, payload, options)"
+        @[VideoCallAction.Chat]="(payload, options) => emit(`action:${VideoCallAction.Chat}`, payload, options)"
+        @[VideoCallAction.Hangup]="(payload, options) => emit(`action:${VideoCallAction.Hangup}`, payload, options)"
       />
     </template>
   </wt-vidstack-player>
@@ -153,7 +153,7 @@ const emit = defineEmits<{
 const mainStream = computed(() => {
   if (!props['sender:video:enabled']) return null;
 
-  return props['receiver:stream'] || props['sender:stream'];
+  return props['sender:stream'] || props['receiver:stream'];
 })
 
 const senderVideoMutedIconSizes = {

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

@@ -1,5 +1,6 @@
 import PAutoComplete from 'primevue/autocomplete';
 import PAvatar from 'primevue/avatar';
+import PBadge from 'primevue/badge';
 import PBreadcrumb from 'primevue/breadcrumb';
 import PButton from 'primevue/button';
 import PCheckbox from 'primevue/checkbox';
@@ -57,6 +58,7 @@ const initPrimevue = (app) => {
   app.component('PDivider', changeComponentCompatMode(PDivider));
   app.component('PImage', changeComponentCompatMode(PImage));
   app.component('PGalleria', changeComponentCompatMode(PGalleria));
+  app.component('PBadge', changeComponentCompatMode(PBadge));
 
   app.directive('tooltip', Tooltip);
 };

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

@@ -0,0 +1,44 @@
+import { BadgeScheme } from '@webitel/styleguide/component-schemes';
+
+const colors = [
+  'secondary',
+  'info',
+  'success',
+  'warn',
+  'error',
+  'online',
+  'dnd',
+  'busy',
+  'pause',
+  'onlineCc',
+  'offline',
+];
+
+const generateCustomColorCss = ({ colorName, dt }) => `
+        .p-badge--${colorName} {
+            background: ${dt(`badge.${colorName}.background`)};
+            color: ${dt(`badge.${colorName}.color`)};
+        }
+`;
+
+const generateCustomSizeCss = ({ size, dt }) => `
+        .p-badge--${size} {
+            width: ${dt(`badge.${size}.width`)};
+            height: ${dt(`badge.${size}.height`)};
+        }
+`;
+
+const badge = {
+  root: BadgeScheme.sizes,
+  colorScheme: BadgeScheme.colorScheme,
+
+  css: ({ dt }) => `
+    ${generateCustomSizeCss({ size: 'sm', dt })}
+    ${generateCustomSizeCss({ size: 'md', dt })}
+    ${generateCustomSizeCss({ size: 'lg', dt })}
+    
+    ${colors.map((color) => generateCustomColorCss({ colorName: color, dt })).join('')}
+  `,
+};
+
+export default badge;

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

@@ -1,5 +1,6 @@
 import autocomplete from './autocomplete/autocomplete.js';
 import avatar from './avatar/avatar.js';
+import badge from './badge/badge.js';
 import breadcrumb from './breadcrumb/breadcrumb.js';
 import button from './button/button.js';
 import checkbox from './checkbox/checkbox.js';
@@ -22,6 +23,7 @@ const components = {
   avatar,
   breadcrumb,
   button,
+  badge,
   chip,
   checkbox,
   textarea,

package/types/components/index.d.ts

@@ -4,6 +4,7 @@ import WtAppHeader from './wt-app-header/wt-app-header.vue';
 import WtAppNavigator from './wt-app-header/wt-app-navigator.vue';
 import WtAvatar from './wt-avatar/wt-avatar.vue';
 import WtBadge from './wt-badge/wt-badge.vue';
+import WtBadgeNew from './wt-badge-new/wt-badge.vue';
 import WtBreadcrumb from './wt-breadcrumb/wt-breadcrumb.vue';
 import WtButton from './wt-button/wt-button.vue';
 import WtButtonSelect from './wt-button-select/wt-button-select.vue';
@@ -81,6 +82,7 @@ declare namespace Components {
     export { WtLogo };
     export { WtAvatar };
     export { WtBadge };
+    export { WtBadgeNew };
     export { WtIcon };
     export { WtIndicator };
     export { WtInputInfo };
@@ -150,4 +152,4 @@ declare namespace Components {
     export { WtVidstackPlayer };
     export { WtChatEmoji };
 }
-export { WtActionBar, WtAppHeader, WtAppNavigator, WtAvatar, WtBadge, WtBreadcrumb, WtButton, WtButtonSelect, WtChatEmoji, WtCheckbox, WtChip, WtConfirmDialog, WtContextMenu, WtCopyAction, WtDatepicker, WtDisplayChipItems, WtDivider, WtDualPanel, WtDummy, WtEmpty, WtErrorPage, WtExpansionPanel, WtFiltersPanelWrapper, WtGalleria, WtHeaderActions, WtHeadline, WtHint, WtIcon, WtIconAction, WtIconBtn, WtImage, WtIndicator, WtInput, WtInputInfo, WtIntersectionObserver, WtItemLink, WtLabel, WtLoadBar, WtLoader, WtLogo, WtNavigationBar, WtNavigationMenu, WtNotification, WtNotificationsBar, WtPageHeader, WtPageWrapper, WtPagination, WtPlayer, WtPopover, WtPopup, WtProgressBar, WtRadio, WtReplaceTransition, WtRoundedAction, WtSearchBar, WtSelect, WtSelectionPopup, WtSlider, WtStartPage, WtStatusSelect, WtStepper, WtSwitcher, WtTable, WtTableActions, WtTableColumnSelect, WtTabs, WtTagsInput, WtTextarea, WtTimeInput, WtTimepicker, WtTooltip, WtTree, WtTreeTable, WtTypeExtensionValueInput, WtVidstackPlayer };
+export { WtActionBar, WtAppHeader, WtAppNavigator, WtAvatar, WtBadge, WtBadgeNew, WtBreadcrumb, WtButton, WtButtonSelect, WtChatEmoji, WtCheckbox, WtChip, WtConfirmDialog, WtContextMenu, WtCopyAction, WtDatepicker, WtDisplayChipItems, WtDivider, WtDualPanel, WtDummy, WtEmpty, WtErrorPage, WtExpansionPanel, WtFiltersPanelWrapper, WtGalleria, WtHeaderActions, WtHeadline, WtHint, WtIcon, WtIconAction, WtIconBtn, WtImage, WtIndicator, WtInput, WtInputInfo, WtIntersectionObserver, WtItemLink, WtLabel, WtLoadBar, WtLoader, WtLogo, WtNavigationBar, WtNavigationMenu, WtNotification, WtNotificationsBar, WtPageHeader, WtPageWrapper, WtPagination, WtPlayer, WtPopover, WtPopup, WtProgressBar, WtRadio, WtReplaceTransition, WtRoundedAction, WtSearchBar, WtSelect, WtSelectionPopup, WtSlider, WtStartPage, WtStatusSelect, WtStepper, WtSwitcher, WtTable, WtTableActions, WtTableColumnSelect, WtTabs, WtTagsInput, WtTextarea, WtTimeInput, WtTimepicker, WtTooltip, WtTree, WtTreeTable, WtTypeExtensionValueInput, WtVidstackPlayer };