@webitel/ui-sdk 26.4.22 → 26.4.24

package/dist/{wt-type-extension-value-input-C6mtsqcV.js → wt-type-extension-value-input-CaLK5owU.js}

@@ -1,6 +1,6 @@
 import { defineComponent as we, mergeModels as Re, useModel as Ae, computed as x, resolveComponent as $, createBlock as Z, renderSlot as F, createCommentVNode as De, unref as D, openBlock as ee, mergeProps as _, createVNode as P } from "vue";
-import { ag as ve, ah as Oe, O as Ee, ai as Ce, aj as qe, B as ke, ak as Se, al as te, am as xe } from "./install-BMvKjjLL.js";
-import { d as _e } from "./index-CjWTFyL0.js";
+import { ag as ve, ah as Oe, O as Ee, ai as Ce, aj as qe, B as ke, ak as Se, al as te, am as xe } from "./install-Kba4JYan.js";
+import { d as _e } from "./index-DYcoqLcD.js";
 import { get as Ue, set as Be } from "lodash-es";
 import "@aliasedDeps/api-services/axios";
 import * as e from "zod";

package/dist/{wt-vidstack-player-MG2DMhZn.js → wt-vidstack-player-Dhh2rK8W.js}

@@ -1,6 +1,6 @@
 import { defineComponent as lt, inject as ge, createElementBlock as mt, openBlock as G, normalizeClass as ye, unref as ot, createElementVNode as at, renderSlot as Wt, createVNode as U, useTemplateRef as qi, onMounted as _i, onBeforeUnmount as Ii, createBlock as Gt, createCommentVNode as Ut, toDisplayString as Vi, resolveComponent as Di, withCtx as _e, ref as us, provide as Ri, toRefs as Oi } 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 Ds, E as Rs, D as L, h as Q, o as x, j as Ni, k as f, m as l, n as M, p as Os, q as Hi, r as oe, t as W, V as J, v as w, C as b, S as gt, w as It, x as p, y as rt, z, I as Ns, A as Fi, B as Bi, F as tt, G as Ge, H as Hs, J as ps, K as Ue, L as Fs, M as Tt, N as Ke, O as de, P as Gi, Q as xt, R as Ui, U as Ki, W as Qi, X as Wi, Y as zi, Z as ji, _ as Yi, $ as Xi, a0 as Ji, a1 as Bs, a2 as T, a3 as _, a4 as ce, a5 as Zi, a6 as Vt, a7 as K, a8 as ta, a9 as ea, aa as sa, ab as ia, ac as ms, ad as aa, ae as na, af as v, ag as y, ah as ra, ai as oa, T as ha, u as la } from "./useVidstackSrc-D3dSiS_u.js";
-import { T as da, U as ca, V as ua, X as pa, _ as dt, Q as zt, Y as ma, C as Y } from "./install-BMvKjjLL.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 Ds, E as Rs, D as L, h as Q, o as x, j as Ni, k as f, m as l, n as M, p as Os, q as Hi, r as oe, t as W, V as J, v as w, C as b, S as gt, w as It, x as p, y as rt, z, I as Ns, A as Fi, B as Bi, F as tt, G as Ge, H as Hs, J as ps, K as Ue, L as Fs, M as Tt, N as Ke, O as de, P as Gi, Q as xt, R as Ui, U as Ki, W as Qi, X as Wi, Y as zi, Z as ji, _ as Yi, $ as Xi, a0 as Ji, a1 as Bs, a2 as T, a3 as _, a4 as ce, a5 as Zi, a6 as Vt, a7 as K, a8 as ta, a9 as ea, aa as sa, ab as ia, ac as ms, ad as aa, ae as na, af as v, ag as y, ah as ra, ai as oa, T as ha, u as la } from "./useVidstackSrc-BLenyTd1.js";
+import { T as da, U as ca, V as ua, X as pa, _ as dt, Q as zt, Y as ma, C as Y } from "./install-Kba4JYan.js";
 import { _ as fa } from "./wt-slider.vue_vue_type_script_setup_true_lang-DlaRDHxo.js";
 const Gs = ft();
 function $() {
@@ -2070,7 +2070,7 @@ class cn {
     return "audio";
   }
   async load(t) {
-    return new (await import("./vidstack-audio-B2KUAd7p.js")).AudioProvider(this.target, t);
+    return new (await import("./vidstack-audio-DKdutLh1.js")).AudioProvider(this.target, t);
   }
 }
 class je {
@@ -2083,7 +2083,7 @@ class je {
     return "video";
   }
   async load(t) {
-    return new (await import("./vidstack-video-vCkAWywh.js")).VideoProvider(this.target, t);
+    return new (await import("./vidstack-video-BSn9S8zZ.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-DqYT1QHJ.js")).HLSProvider(this.target, t);
+    return new (await import("./vidstack-hls-C_PLdy-5.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-HMWdH_gZ.js")).DASHProvider(this.target, t);
+    return new (await import("./vidstack-dash-BaikuV9e.js")).DASHProvider(this.target, t);
   }
 }
 class un {
@@ -2125,7 +2125,7 @@ class un {
     return "video";
   }
   async load(t) {
-    return new (await import("./vidstack-vimeo-DyetBgp9.js")).VimeoProvider(this.target, t);
+    return new (await import("./vidstack-vimeo-De_W3vND.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 pn {
     return "video";
   }
   async load(t) {
-    return new (await import("./vidstack-youtube-Dl5m33Pu.js")).YouTubeProvider(this.target, t);
+    return new (await import("./vidstack-youtube-CkreCdqK.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 bn extends Pt {
         throw i.code = "CAST_NOT_AVAILABLE", i;
       }
       if (te("https://www.gstatic.com"), !this.#v) {
-        const i = await import("./vidstack-D2pY00kU-Cno9fdPB.js").then((n) => n.v);
+        const i = await import("./vidstack-D2pY00kU-D6TCmA-4.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 Mr extends v(HTMLElement, ii) {
     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_-Cyne3PF1.js").then(({ insertContent: e }) => {
+    return t.classList.add("vds-google-cast"), import("./vidstack-D_-9AA6_-DC3xAnIB.js").then(({ insertContent: e }) => {
       e(t, this.#t.$state);
     }), t;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-sdk",
-	"version": "26.4.22",
+	"version": "26.4.24",
 	"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/on-demand/wt-chat-emoji/wt-chat-emoji.vue

@@ -12,18 +12,23 @@
       wide
       @click="togglePicker"
     />
-    <div
-      v-if="isOpened"
-      ref="emojiPickerWrapper"
-      class="wt-chat-emoji__wrapper"
-    ></div>
-  </div>
+		<teleport 
+			:disabled="!popupTeleportTo"
+		 	:to="teleportValue"
+		>
+			<div
+				v-if="isOpened"
+				ref="emojiPickerWrapper"
+				class="wt-chat-emoji__wrapper"
+			></div>
+		</teleport>
+	</div>
 </template>
 
 <script setup>
 import { ComponentSize } from '@webitel/ui-sdk/enums';
 import * as EmojiPicker from 'emoji-picker-element/picker'; ///!not delete
-import { nextTick, onBeforeUnmount, ref } from 'vue';
+import { computed, nextTick, onBeforeUnmount, ref } from 'vue';
 
 import { eventBus } from '../../../scripts';
 
@@ -32,6 +37,15 @@ const props = defineProps({
 		type: String,
 		default: ComponentSize.MD,
 	},
+	/**
+	 * @author HlukhovYe
+	 * teleport popup to specific element, pass selector
+	 * https://webitel.atlassian.net/browse/WTEL-8731
+	 */
+	popupTeleportTo: {
+		type: String,
+		default: '',
+	},
 });
 
 const emit = defineEmits([
@@ -42,6 +56,9 @@ const emojiPickerWrapper = ref(null);
 const isOpened = ref(false);
 const picker = ref(null);
 
+// Teleport's to prop is required even if it's disabled
+const teleportValue = computed(() => props.popupTeleportTo || 'body');
+
 const initPicker = async () => {
 	if (picker.value) return;
 
@@ -93,10 +110,18 @@ onBeforeUnmount(() => {
 .wt-chat-emoji {
   position: relative;
   width: 100%;
+}
+
+.wt-chat-emoji__wrapper {
+	position: absolute;
+	left: 50%;
+	bottom: calc(100% + var(--spacing-xs));
+	z-index: calc(var(--popup-wrapper-z-index) - 1);
+}
 
-  :deep() emoji-picker {
-    --background: var(--content-wrapper-color);
-    --border-color: var(--secondary-color);
-  }
+:deep() emoji-picker {
+	--background: var(--content-wrapper-color);
+	--border-color: var(--secondary-color);
+	transform: translateX(-50%);
 }
 </style>

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

@@ -1,13 +1,16 @@
 <template>
-	<PAvatar
+  <PAvatar
     :class="[`p-avatar-${props.size}`]"
     :shape="props.shape"
-    :label="avatarLetters"
-		:style="{ background: `var(${avatarLettersBackground})`, color: `var(${avatarLettersColor})` }"
+    :style="{ background: `var(${avatarLettersBackground})`, color: `var(${avatarLettersColor})` }"
     class="wt-avatar"
   >
-		<template #default>
-			<wt-badge v-if="badge" :color-variable="badgeColorVar" :icon-badge="isBadge ? props.status : null" />
+    <template #default>
+      <wt-badge v-if="badge" :color-variable="badgeColorVar" :icon-badge="isBadge ? props.status : null" />
+
+      <span v-if="isLetterAvatar && !bot" class="wt-avatar__letters-text">
+        {{ avatarLetters }}
+      </span>
 
       <div
         v-if="bot"
@@ -19,9 +22,9 @@
         />
       </div>
 
-			<img v-if="!isLetterAvatar && !bot" :src="imgSrc" alt="avatar" class="wt-avatar__img" />
-		</template>
-	</PAvatar>
+      <img v-if="!isLetterAvatar && !bot" :src="imgSrc" alt="avatar" class="wt-avatar__img" />
+    </template>
+  </PAvatar>
 </template>
 
 <script setup>
@@ -237,15 +240,6 @@ const badgeColorVar = computed(() => {
 	user-select: none;
 }
 
-.wt-avatar__letters {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	border-radius: 50%;
-	height: 100%;
-	width: 100%;
-}
-
 .wt-avatar__img {
 	border-radius: 50%;
 	width: 100%;
@@ -260,4 +254,12 @@ const badgeColorVar = computed(() => {
   border-radius: 50%;
   background-color: var(--p-avatar-bot-background);
 }
+
+.wt-avatar__letters-text {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+}
 </style>

package/types/components/on-demand/wt-chat-emoji/wt-chat-emoji.vue.d.ts

@@ -5,6 +5,15 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: StringConstructor;
         default: "md";
     };
+    /**
+     * @author HlukhovYe
+     * teleport popup to specific element, pass selector
+     * https://webitel.atlassian.net/browse/WTEL-8731
+     */
+    popupTeleportTo: {
+        type: StringConstructor;
+        default: string;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "insert-emoji": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -12,8 +21,18 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: StringConstructor;
         default: "md";
     };
+    /**
+     * @author HlukhovYe
+     * teleport popup to specific element, pass selector
+     * https://webitel.atlassian.net/browse/WTEL-8731
+     */
+    popupTeleportTo: {
+        type: StringConstructor;
+        default: string;
+    };
 }>> & Readonly<{
     "onInsert-emoji"?: (...args: any[]) => any;
 }>, {
     size: string;
+    popupTeleportTo: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;