@webitel/ui-sdk 26.2.36-1 → 26.2.36

package/dist/{wt-filters-panel-wrapper-7vGMmAbn.js → wt-filters-panel-wrapper-B7tRYKMA.js}

@@ -1,5 +1,5 @@
 import { resolveComponent as r, createElementBlock as l, openBlock as o, normalizeClass as i, createElementVNode as s, renderSlot as c, createVNode as p } from "vue";
-import { _ as d } from "./install-CyiblPDy.js";
+import { _ as d } from "./install-D49JluQ7.js";
 const f = {
   name: "FiltersPanelWrapper",
   /**

package/dist/{wt-galleria-BFeVnHVi.js → wt-galleria-Bsbr1bg5.js}

@@ -1,5 +1,5 @@
 import { ref as k, onMounted as P, onUnmounted as D, useAttrs as j, computed as $, resolveComponent as w, createBlock as A, openBlock as I, mergeProps as J, unref as i, withCtx as c, createVNode as s, createTextVNode as F, toDisplayString as g, createElementVNode as v, renderSlot as K, defineComponent as Q, mergeModels as S, useModel as B, watch as E, nextTick as V, createElementBlock as L, Fragment as W, createCommentVNode as q, normalizeClass as M, withDirectives as X, vShow as Y } from "vue";
-import { _ as ee, D as te } from "./install-CyiblPDy.js";
+import { _ as ee, D as te } from "./install-D49JluQ7.js";
 const ne = () => {
   const t = k(!1), r = () => {
     t.value ? e() : p();

package/dist/{wt-navigation-menu-CfhusFd7.js → wt-navigation-menu-Cmz-hK26.js}

@@ -1,5 +1,5 @@
 import { resolveComponent as h, createElementBlock as l, openBlock as c, Fragment as w, renderList as b, createElementVNode as p, withDirectives as N, normalizeClass as C, createVNode as _, createTextVNode as k, toDisplayString as $, renderSlot as S, vShow as E, withCtx as A, ref as L, computed as v } from "vue";
-import { _ as g } from "./install-CyiblPDy.js";
+import { _ as g } from "./install-D49JluQ7.js";
 const V = { class: "nav-menu__category nav-menu-lvl-1" }, B = ["onClick"], D = {
   __name: "nav-menu-lvl-1",
   props: {

package/dist/{wt-notifications-bar-B4JPf10L.js → wt-notifications-bar-BjMqO2Ze.js}

@@ -1,5 +1,5 @@
 import { e as _ } from "./eventBus-CXab6CTV.js";
-import { E as v, _ as B } from "./install-CyiblPDy.js";
+import { E as v, _ as B } from "./install-D49JluQ7.js";
 import { resolveComponent as $, createElementBlock as d, openBlock as u, createVNode as g, TransitionGroup as x, withCtx as w, Fragment as N, renderList as b, createBlock as y, createTextVNode as k, toDisplayString as C } from "vue";
 const D = (t) => v(t) && (t.entity || t.module), i = (t) => (o) => (...n) => {
   var s;

package/dist/{wt-page-header-BXNc4udR.js → wt-page-header-B9JIqsgc.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-CyiblPDy.js";
+import { _ as b } from "./install-D49JluQ7.js";
 const h = {
   __name: "wt-page-header",
   props: {

package/dist/{wt-pagination-DX-rvjNO.js → wt-pagination-CeaLOD_o.js}

@@ -1,4 +1,4 @@
-import { _ as d, F as _ } from "./install-CyiblPDy.js";
+import { _ as d, F as _ } from "./install-D49JluQ7.js";
 import { resolveComponent as l, resolveDirective as u, createElementBlock as g, openBlock as h, createElementVNode as o, createVNode as a, toDisplayString as m, withDirectives as r } from "vue";
 const b = {
   name: "WtPagination",

package/dist/{wt-player-9-VydoG3.js → wt-player-DGDFhEmo.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 { G as e, _ as x } from "./install-CyiblPDy.js";
+import { G as e, _ as x } from "./install-D49JluQ7.js";
 const V = ["src", "loop", "autoplay"], _ = ["controls", "download"], b = /* @__PURE__ */ y({
   __name: "wt-player",
   props: {

package/dist/{wt-search-bar-CyuTYJIh.js → wt-search-bar-y4Luc7FG.js}

@@ -1,5 +1,5 @@
 import { defineComponent as E, toRefs as N, computed as O, resolveComponent as n, resolveDirective as z, createElementBlock as A, openBlock as h, normalizeClass as w, unref as i, createElementVNode as s, renderSlot as f, normalizeProps as P, guardReactiveProps as j, createVNode as l, createBlock as y, createCommentVNode as b, withCtx as p, createTextVNode as K, toDisplayString as R, withDirectives as U } from "vue";
-import { z as F, F as H, _ as T } from "./install-CyiblPDy.js";
+import { z as F, F as H, _ as T } from "./install-D49JluQ7.js";
 const q = { class: "wt-search-bar__wrapper" }, G = { class: "wt-search-bar__search-icon" }, J = ["placeholder", "value"], L = { class: "wt-search-bar__icon-controls" }, Q = /* @__PURE__ */ E({
   __name: "wt-search-bar",
   props: {

package/dist/{wt-selection-popup-B1jc36eK.js → wt-selection-popup-DzwOD_5c.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 B, normalizeClass as E, createCommentVNode as p, withDirectives as I } from "vue";
-import { _ as O, D as P } from "./install-CyiblPDy.js";
+import { _ as O, D as P } from "./install-D49JluQ7.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-Bdpd8uIu.js → wt-start-page-CWLfNV4N.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 { M as n, _ as p } from "./install-CyiblPDy.js";
+import { M as n, _ as p } from "./install-D49JluQ7.js";
 Symbol(n.env.NODE_ENV !== "production" ? "navigation failure" : "");
 Symbol(n.env.NODE_ENV !== "production" ? "router view location matched" : "");
 Symbol(n.env.NODE_ENV !== "production" ? "router view depth" : "");

package/dist/{wt-status-select-C_P6se9B.js → wt-status-select-CYyHqjsr.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-CyiblPDy.js";
+import { _ as h } from "./install-D49JluQ7.js";
 const s = Object.freeze({
   ONLINE: "online",
   PAUSE: "pause",

package/dist/{wt-stepper-GoQgRNvT.js → wt-stepper-fE6L-Ink.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-CyiblPDy.js";
+import { _ as k } from "./install-D49JluQ7.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-C7_QDxxw.js → wt-table-DEdYvYpN.js}

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

package/dist/{wt-table-actions-F254JhUH.js → wt-table-actions-DO_g65HT.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-CyiblPDy.js";
+import { _ as O } from "./install-D49JluQ7.js";
 const R = { class: "wt-table-actions" }, U = /* @__PURE__ */ C({
   __name: "wt-table-actions",
   props: {

package/dist/{wt-table-column-select-v4DFcmhU.js → wt-table-column-select-DhEoTSl5.js}

@@ -1,6 +1,6 @@
-import { d as g } from "./index-DBheLAHQ.js";
+import { d as g } from "./index-DdV90n8y.js";
 import { resolveComponent as a, resolveDirective as v, createElementBlock as r, openBlock as i, withDirectives as S, createVNode as s, withCtx as n, createTextVNode as p, toDisplayString as u, createElementVNode as m, normalizeClass as k, Fragment as D, renderList as y, withModifiers as P } from "vue";
-import { _ as H } from "./install-CyiblPDy.js";
+import { _ as H } from "./install-D49JluQ7.js";
 const L = {
   name: "WtTableColumnSelect",
   model: {

package/dist/{wt-tabs-DKoz5N5p.js → wt-tabs-CwG30TCB.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-CyiblPDy.js";
+import { _ as p } from "./install-D49JluQ7.js";
 const _ = {
   name: "WtTabs",
   model: {

package/dist/{wt-tags-input-Ufhsf9Nx.js → wt-tags-input-FFd4t0gL.js}

@@ -1,6 +1,6 @@
-import { d as M } from "./index-DUFLSW6-.js";
+import { d as M } from "./index-B752_prT.js";
 import { v as z } from "./validationMixin-CdZ8tacz.js";
-import { _ as C, H as S, J as V } from "./install-CyiblPDy.js";
+import { _ as C, H as S, J as V } from "./install-D49JluQ7.js";
 import { resolveComponent as a, resolveDirective as I, createElementBlock as N, openBlock as d, normalizeClass as P, createBlock as c, createCommentVNode as b, createVNode as o, mergeProps as m, withCtx as l, renderSlot as g, normalizeProps as f, guardReactiveProps as v, createTextVNode as s, toDisplayString as r, toHandlers as A, createSlots as D, withDirectives as h, createElementVNode as w, vShow as E, withModifiers as $ } from "vue";
 const j = {
   name: "WtTagsInput",

package/dist/{wt-time-input-CY7a9PNA.js → wt-time-input-CqEa2Tpx.js}

@@ -1,6 +1,6 @@
 import { v as c } from "./validationMixin-CdZ8tacz.js";
 import { resolveComponent as l, createElementBlock as f, openBlock as a, normalizeClass as v, createBlock as n, createCommentVNode as d, createElementVNode as s, mergeProps as o, withCtx as r, renderSlot as _, normalizeProps as h, guardReactiveProps as w, createTextVNode as u, toDisplayString as p, toHandlers as y } from "vue";
-import { _ as I } from "./install-CyiblPDy.js";
+import { _ as I } from "./install-D49JluQ7.js";
 const x = {
   name: "WtTimeInput",
   mixins: [

package/dist/{wt-timepicker-ByI7rjOg.js → wt-timepicker-Cdil__sF.js}

@@ -1,6 +1,6 @@
 import { v as p } from "./validationMixin-CdZ8tacz.js";
 import { resolveComponent as o, createElementBlock as w, openBlock as a, normalizeClass as M, createBlock as s, createCommentVNode as u, createElementVNode as k, mergeProps as _, withCtx as m, renderSlot as y, normalizeProps as S, guardReactiveProps as g, createTextVNode as v, toDisplayString as b } from "vue";
-import { _ as B } from "./install-CyiblPDy.js";
+import { _ as B } from "./install-D49JluQ7.js";
 const r = 3600, h = 60, H = {
   name: "WtTimepicker",
   mixins: [

package/dist/{wt-tree-DZCBTGII.js → wt-tree-D9Zg2F6z.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-DUFLSW6-.js";
-import { B as _, _ as R } from "./install-CyiblPDy.js";
+import { d as P } from "./index-B752_prT.js";
+import { B as _, _ as R } from "./install-D49JluQ7.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-DjE6sTve.js → wt-tree-table-BG6rwxsJ.js}

@@ -1,5 +1,5 @@
 import { computed as C, unref as B, defineComponent as V, ref as M, onMounted as O, resolveComponent as z, createElementBlock as d, openBlock as l, Fragment as $, createElementVNode as u, createCommentVNode as b, normalizeClass as L, renderList as v, 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 { D as J, O as R, P as Q, _ as D } from "./install-CyiblPDy.js";
+import { D as J, O as R, P as Q, _ as D } from "./install-D49JluQ7.js";
 import { g as X } from "./sortQueryAdapters-M9bNEM3P.js";
 const Y = ({ headers: t }) => {
   const { t: m } = J();

package/dist/{wt-type-extension-value-input-_5A6qy3D.js → wt-type-extension-value-input-P9R1yrL-.js}

@@ -1,6 +1,6 @@
 import { defineComponent as It, mergeModels as vt, useModel as wt, computed as ae, createBlock as Xe, renderSlot as fe, createCommentVNode as Tt, unref as M, openBlock as Qe, mergeProps as le, createVNode as he } from "vue";
-import { ae as At, af as Rt, N as Dt, ag as Ot, ah as kt, D as jt, ai as Je, aj as qt, ak as eo, al as St } from "./install-CyiblPDy.js";
-import { d as Et } from "./index-DBheLAHQ.js";
+import { ae as At, af as Rt, N as Dt, ag as Ot, ah as kt, D as jt, ai as Je, aj as qt, ak as eo, al as St } from "./install-D49JluQ7.js";
+import { d as Et } from "./index-DdV90n8y.js";
 import { get as _t, set as Ct } from "lodash-es";
 import "@aliasedDeps/api-services/axios";
 function g(a, l, p) {

package/dist/{wt-vidstack-player-D4597dQD.js → wt-vidstack-player-Ef3MMTIP.js}

@@ -14,7 +14,7 @@ var rp = (a, s, t, e) => ({
   }
 });
 import { defineComponent as ih, createElementBlock as nh, openBlock as Zs, createVNode as Er, useTemplateRef as VT, inject as zp, onMounted as _T, onBeforeUnmount as NT, normalizeClass as Sd, unref as xd, createElementVNode as ti, createBlock as xh, createCommentVNode as Yr, toDisplayString as RT, renderSlot as zh, ref as op, provide as HT, computed as hp, withCtx as lp } from "vue";
-import { Q as FT, R as BT, S as UT, T as WT, P as so, _ as ah, U as GT, C as qe } from "./install-CyiblPDy.js";
+import { Q as FT, R as BT, S as UT, T as WT, P as so, _ as ah, U as GT, C as qe } from "./install-D49JluQ7.js";
 const ds = Symbol(0);
 let Qh = !1, hc = !1, We = null, Pa = null, Te = null, de = 0, xa = [], Cd = {};
 const KT = () => {
@@ -3342,7 +3342,7 @@ class QS {
     return "audio";
   }
   async load(s) {
-    return new (await import("./vidstack-audio-lGnN1Ycy.js")).AudioProvider(this.target, s);
+    return new (await import("./vidstack-audio-CUfn923U.js")).AudioProvider(this.target, s);
   }
 }
 class Rd {
@@ -3357,7 +3357,7 @@ class Rd {
     return "video";
   }
   async load(s) {
-    return new (await import("./vidstack-video-tsYJg78F.js")).VideoProvider(this.target, s);
+    return new (await import("./vidstack-video-C5qRdN5F.js")).VideoProvider(this.target, s);
   }
 }
 const dl = class dl extends Rd {
@@ -3369,7 +3369,7 @@ const dl = class dl extends Rd {
     return dl.supported && oh(t);
   }
   async load(t) {
-    return new (await import("./vidstack-hls-BLPlktbS.js")).HLSProvider(this.target, t);
+    return new (await import("./vidstack-hls-CRqQuJy9.js")).HLSProvider(this.target, t);
   }
 };
 f(dl, "supported", Od());
@@ -3383,7 +3383,7 @@ const pl = class pl extends Rd {
     return pl.supported && Dd(t);
   }
   async load(t) {
-    return new (await import("./vidstack-dash-BGZztpZt.js")).DASHProvider(this.target, t);
+    return new (await import("./vidstack-dash-CdfIYTHz.js")).DASHProvider(this.target, t);
   }
 };
 f(pl, "supported", Wk());
@@ -3409,7 +3409,7 @@ class YS {
     return "video";
   }
   async load(s) {
-    return new (await import("./vidstack-vimeo-CKg8F_3s.js")).VimeoProvider(this.target, s);
+    return new (await import("./vidstack-vimeo-DoKmmXsP.js")).VimeoProvider(this.target, s);
   }
   async loadPoster(s, t, e) {
     const { resolveVimeoVideoId: n, getVimeoVideoInfo: r } = await import("./vidstack-krOAtKMi-B4IZWKdc.js");
@@ -3443,7 +3443,7 @@ class XS {
     return "video";
   }
   async load(s) {
-    return new (await import("./vidstack-youtube-DOw42Epm.js")).YouTubeProvider(this.target, s);
+    return new (await import("./vidstack-youtube-D_5jUX6n.js")).YouTubeProvider(this.target, s);
   }
   async loadPoster(s, t, e) {
     const { findYouTubePoster: n, resolveYouTubeVideoId: r } = await import("./vidstack-Dm1xEU9Q-qSXq3AI-.js"), h = O(s.src) && r(s.src);
@@ -3863,7 +3863,7 @@ class s0 extends ba {
         throw r.code = "CAST_NOT_AVAILABLE", r;
       }
       if (hh("https://www.gstatic.com"), !i(this, Dn)) {
-        const r = await import("./vidstack-D2pY00kU-DJbiUFY5.js").then((h) => h.v);
+        const r = await import("./vidstack-D2pY00kU-DJhyHK6P.js").then((h) => h.v);
         d(this, Dn, new r.GoogleCastLoader());
       }
       await i(this, Dn).prompt(i(this, Is)), t && i(this, q).queue.enqueue("media-google-cast-request", t);
@@ -5584,7 +5584,7 @@ _s = new WeakMap(), It = new WeakMap(), Xt = new WeakMap(), ys = new WeakSet(),
   if ((e = i(this, It)) != null && e.classList.contains("vds-google-cast"))
     return i(this, It);
   const t = document.createElement("div");
-  return t.classList.add("vds-google-cast"), import("./vidstack-D_-9AA6_-DZGmSuN8.js").then(({ insertContent: n }) => {
+  return t.classList.add("vds-google-cast"), import("./vidstack-D_-9AA6_-CRtJmkBB.js").then(({ insertContent: n }) => {
     n(t, i(this, _s).$state);
   }), t;
 }, f(Sg, "tagName", "media-provider");

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-sdk",
-	"version": "26.2.36-1",
+	"version": "26.2.36",
 	"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",
@@ -76,7 +76,7 @@
 		"@vuelidate/core": "^2.0.3",
 		"@vuelidate/validators": "^2.0.4",
 		"@webitel/api-services": ">=0.0.105",
-		"@webitel/styleguide": "~26.2",
+		"@webitel/styleguide": "^26.2.5",
 		"axios": "^1.8.3",
 		"date-fns": "^4.1.0",
 		"deep-copy": "^1.4.2",

package/src/components/wt-app-header/__tests__/WtAppNavigator.spec.js

@@ -1,19 +1,19 @@
 import { shallowMount } from '@vue/test-utils';
 
-import { WtApplication } from '@webitel/ui-sdk/enums';
+import WebitelApplications from '../../../enums/WebitelApplications/WebitelApplications.enum.js';
 import WtAppNavigator from '../wt-app-navigator.vue';
 
 const apps = [
 	{
-		name: WtApplication.Admin,
+		name: WebitelApplications.ADMIN,
 		href: '',
 	},
 	{
-		name: WtApplication.History,
+		name: WebitelApplications.HISTORY,
 		href: '',
 	},
 	{
-		name: WtApplication.Supervisor,
+		name: WebitelApplications.SUPERVISOR,
 		href: '',
 	},
 ];

package/src/components/wt-app-header/wt-app-navigator.vue

@@ -1,57 +1,37 @@
 <template>
-	<div
-		v-clickaway="close"
-		class="wt-app-navigator"
-	>
-		<wt-icon-btn
-			v-tooltip="$t('webitelUI.appNavigator.title')"
-			:class="{ active: isOpened }"
-			class="wt-app-navigator__btn"
-			icon="app-navigator"
-			@click="isOpened = !isOpened"
-		/>
-
-		<transition name="fade">
-			<nav
-				v-show="isOpened"
-				class="wt-app-navigator__nav-wrappe wt-scrollbar"
-			>
-				<h3 class="wt-app-navigator__nav-title typo-subtitle-1">
-					{{ $t('webitelUI.appNavigator.title') }}
-				</h3>
-				<ul class="wt-app-navigator__nav">
-					<li
-						v-for="app of formattedApps"
-						:key="app.name"
-						:class="{ active: app.currentApp }"
-						class="wt-app-navigator__card"
-					>
-						<a
-							:href="app.href"
-							:title="$t(`webitelUI.appNavigator.${app.name}`)"
-							class="wt-app-navigator__card__link"
-							target="_blank"
-						>
-							<img
-								:alt="`${app.name}-pic`"
-								:src="app.img"
-								class="wt-app-navigator__card__img"
-							/>
-							<p class="wt-app-navigator__card__title typo-overline">
-								{{ $t(`webitelUI.appNavigator.${app.name}`) }}
-							</p>
-						</a>
-					</li>
-				</ul>
-			</nav>
-		</transition>
-	</div>
+  <div v-clickaway="close" class="wt-app-navigator">
+    <wt-icon-btn
+v-tooltip="$t('webitelUI.appNavigator.title')" :class="{ active: isOpened }"
+      class="wt-app-navigator__btn" icon="app-navigator" @click="isOpened = !isOpened" />
+
+    <transition name="fade">
+      <nav v-show="isOpened" class="wt-app-navigator__nav-wrappe wt-scrollbar">
+        <h3 class="wt-app-navigator__nav-title typo-subtitle-1">
+          {{ $t('webitelUI.appNavigator.title') }}
+        </h3>
+        <ul class="wt-app-navigator__nav">
+          <li
+v-for="app of formattedApps" :key="app.name" :class="{ active: app.currentApp }"
+            class="wt-app-navigator__card">
+            <a
+:href="app.href" :title="$t(`webitelUI.appNavigator.${app.name}`)" class="wt-app-navigator__card__link"
+              target="_blank">
+              <img :alt="`${app.name}-pic`" :src="app.img" class="wt-app-navigator__card__img" />
+              <p class="wt-app-navigator__card__title typo-overline">
+                {{ $t(`webitelUI.appNavigator.${app.name}`) }}
+              </p>
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </transition>
+  </div>
 </template>
 
 <script setup>
 import { computed, ref } from 'vue';
 
-import { WtApplication } from '../../enums';
+import WebitelApplications from '../../enums/WebitelApplications/WebitelApplications.enum.js';
 import AdminDark from './assets/admin-dark.svg';
 import AdminLight from './assets/admin-light.svg';
 import AgentDark from './assets/agent-dark.svg';
@@ -68,31 +48,31 @@ import SupervisorDark from './assets/supervisor-dark.svg';
 import SupervisorLight from './assets/supervisor-light.svg';
 
 const pics = {
-	[WtApplication.Admin]: {
+	[WebitelApplications.ADMIN]: {
 		dark: AdminDark,
 		light: AdminLight,
 	},
-	[WtApplication.Agent]: {
+	[WebitelApplications.AGENT]: {
 		dark: AgentDark,
 		light: AgentLight,
 	},
-	[WtApplication.Analytics]: {
+	[WebitelApplications.ANALYTICS]: {
 		dark: AnalyticsDark,
 		light: AnalyticsLight,
 	},
-	[WtApplication.Crm]: {
+	[WebitelApplications.CRM]: {
 		dark: CrmDark,
 		light: CrmLight,
 	},
-	[WtApplication.History]: {
+	[WebitelApplications.HISTORY]: {
 		dark: HistoryDark,
 		light: HistoryLight,
 	},
-	[WtApplication.Audit]: {
+	[WebitelApplications.AUDIT]: {
 		dark: AuditDark,
 		light: AuditLight,
 	},
-	[WtApplication.Supervisor]: {
+	[WebitelApplications.SUPERVISOR]: {
 		dark: SupervisorDark,
 		light: SupervisorLight,
 	},
@@ -124,13 +104,13 @@ const props = defineProps({
 const isOpened = ref(false);
 
 const order = [
-	WtApplication.Agent,
-	WtApplication.Supervisor,
-	WtApplication.History,
-	WtApplication.Admin,
-	WtApplication.Audit,
-	WtApplication.Crm,
-	WtApplication.Analytics,
+	WebitelApplications.AGENT,
+	WebitelApplications.SUPERVISOR,
+	WebitelApplications.HISTORY,
+	WebitelApplications.ADMIN,
+	WebitelApplications.AUDIT,
+	WebitelApplications.CRM,
+	WebitelApplications.ANALYTICS,
 ];
 
 const formattedApps = computed(() =>
@@ -156,72 +136,72 @@ function close() {
 
 <style scoped>
 .wt-app-navigator {
-	display: flex;
-	position: relative;
-	align-items: center;
-	z-index: var(--wt-app-header-content-z-index);
+  display: flex;
+  position: relative;
+  align-items: center;
+  z-index: var(--wt-app-header-content-z-index);
 }
 
 .wt-app-navigator__nav-wrappe {
-	position: absolute;
-	top: 100%;
-	right: 0;
-	transition: var(--transition);
-	margin-top: var(--wt-app-header-content-panel-margin);
-	box-shadow: var(--elevation-10);
-	border-radius: var(--border-radius);
-	background: var(--wt-app-header-content-bg-color);
-	padding: var(--wt-app-header-content-gap);
-	max-height: var(--wt-app-navigator-max-height);
-	overflow: auto;
+  position: absolute;
+  top: 100%;
+  right: 0;
+  transition: var(--transition);
+  margin-top: var(--wt-app-header-content-panel-margin);
+  box-shadow: var(--elevation-10);
+  border-radius: var(--border-radius);
+  background: var(--wt-app-header-content-bg-color);
+  padding: var(--wt-app-header-content-gap);
+  max-height: var(--wt-app-navigator-max-height);
+  overflow: auto;
 }
 
 .wt-app-navigator__nav-title {
-	margin-bottom: var(--wt-app-header-content-gap);
-	text-align: center;
-	text-transform: uppercase;
+  margin-bottom: var(--wt-app-header-content-gap);
+  text-align: center;
+  text-transform: uppercase;
 }
 
 .wt-app-navigator__nav {
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-	grid-gap: var(--wt-app-navigator-item-gap);
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: var(--wt-app-navigator-item-gap);
 }
 
 .wt-app-navigator__card {
-	transition: var(--transition);
-	box-sizing: border-box;
-	border: var(--wt-app-navigator-item-border);
-	border-color: var(--wt-app-navigator-item-border-color);
-	border-radius: var(--border-radius);
-	width: var(--wt-app-navigator-item-width);
-	height: var(--wt-app-navigator-item-height);
+  transition: var(--transition);
+  box-sizing: border-box;
+  border: var(--wt-app-navigator-item-border);
+  border-color: var(--wt-app-navigator-item-border-color);
+  border-radius: var(--border-radius);
+  width: var(--wt-app-navigator-item-width);
+  height: var(--wt-app-navigator-item-height);
 }
 
 .wt-app-navigator__card.active,
 .wt-app-navigator__card:hover {
-	border-color: var(--wt-app-navigator-item-border-color--hover);
+  border-color: var(--wt-app-navigator-item-border-color--hover);
 }
 
 .wt-app-navigator__card__link {
-	display: inline-flex;
-	flex-direction: column;
-	justify-content: space-between;
-	cursor: pointer;
-	box-sizing: border-box;
-	padding: var(--wt-app-navigator-item-padding);
-	width: 100%;
-	height: 100%;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: space-between;
+  cursor: pointer;
+  box-sizing: border-box;
+  padding: var(--wt-app-navigator-item-padding);
+  width: 100%;
+  height: 100%;
 }
 
 .wt-app-navigator__card__img {
-	margin: auto;
-	width: var(--wt-app-navigator-item-pic-size);
-	height: var(--wt-app-navigator-item-pic-size);
+  margin: auto;
+  width: var(--wt-app-navigator-item-pic-size);
+  height: var(--wt-app-navigator-item-pic-size);
 }
 
 .wt-app-navigator__card__title {
-	color: var(--text-main-color);
-	text-align: center;
+  color: var(--text-main-color);
+  text-align: center;
 }
 </style>

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

@@ -45,5 +45,6 @@ export default {
   display: flex;
   position: relative;
   align-items: center;
+  gap: var(--spacing-sm);
 }
 </style>