@webitel/ui-sdk 26.6.83 → 26.6.85

package/dist/{wt-chat-emoji-D4dD09cG.js → wt-chat-emoji-yV5DEH_U.js}

@@ -1,4 +1,4 @@
-import "./components-B2L1ZiHW.js";
+import "./components-BuLx9sx8.js";
 import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { l as t } from "./enums-De8CDKZ1.js";
 import { t as n } from "./wt-button-dC4nOW56.js";

package/dist/{wt-datepicker-Dj4InHRH.js → wt-datepicker-slYQKBRT.js}

@@ -3,10 +3,10 @@ import { d as t, f as n, l as r, r as i } from "./enums-De8CDKZ1.js";
 import { a, i as o, n as s, r as c, t as l } from "./toZonedTime-B8L5kbse.js";
 import { t as u } from "./vue-i18n-Db_oYfO8.js";
 import { t as d } from "./useValidation-DGl2otXJ.js";
-import { computed as f, createBlock as p, createCommentVNode as m, createElementBlock as ee, createElementVNode as h, createTextVNode as g, createVNode as _, defineComponent as v, guardReactiveProps as y, mergeModels as b, mergeProps as x, nextTick as S, normalizeProps as C, onMounted as w, onUnmounted as T, openBlock as E, renderSlot as D, resolveComponent as O, toDisplayString as k, toRefs as A, unref as j, useModel as M, useTemplateRef as N, vShow as P, watch as F, withCtx as I, withDirectives as L } from "vue";
-import R from "primevue/datepicker";
+import { computed as f, createBlock as p, createCommentVNode as m, createElementBlock as ee, createElementVNode as h, createTextVNode as g, createVNode as _, defineComponent as v, guardReactiveProps as y, mergeModels as b, mergeProps as x, nextTick as S, normalizeProps as C, onMounted as w, onUnmounted as T, openBlock as E, renderSlot as D, resolveComponent as O, toDisplayString as k, toRefs as A, unref as j, useModel as M, useTemplateRef as N, vShow as P, withCtx as F, withDirectives as I } from "vue";
+import L from "primevue/datepicker";
 //#region node_modules/date-fns-tz/dist/esm/fromZonedTime/index.js
-function z(e, t, n) {
+function R(e, t, n) {
 	if (typeof e == "string" && !e.match(c)) return s(e, {
 		...n,
 		timeZone: t
@@ -16,6 +16,34 @@ function z(e, t, n) {
 	return new Date(r + i);
 }
 //#endregion
+//#region src/components/wt-datepicker/_internals/composables/useOverlayAnchor.ts
+function z() {
+	let e = null;
+	function t(e, t) {
+		e.style.width !== t && (e.style.width = t, e.style.minWidth = "");
+	}
+	function n(e, t, n) {
+		e.style.transformOrigin !== t && (e.style.transformOrigin = t, e.style.top = n);
+	}
+	function r(r) {
+		e?.disconnect();
+		let i = r.style.width, a = r.style.transformOrigin, o = r.style.top;
+		e = new MutationObserver(() => {
+			t(r, i), n(r, a, o);
+		}), e.observe(r, {
+			attributes: !0,
+			attributeFilter: ["style"]
+		});
+	}
+	function i() {
+		e?.disconnect(), e = null;
+	}
+	return T(i), {
+		lock: r,
+		unlock: i
+	};
+}
+//#endregion
 //#region src/components/wt-datepicker/_internals/composables/usePreventZeroPad.ts
 function B(e) {
 	let t = null;
@@ -48,24 +76,15 @@ function B(e) {
 }
 //#endregion
 //#region src/components/wt-datepicker/_internals/composables/useRestoreOnBlur.ts
-function V(e, t, n) {
-	let r = null;
-	function i() {
-		F(e, (e) => {
-			e !== null && (r = e);
-		}, { immediate: !0 });
-	}
-	function a() {
-		if (n()) return;
-		let e = t();
-		e && e.rawValue === null && r !== null && S(() => {
-			e.updateModel(new Date(r.getTime()));
+function V(e, t) {
+	function n() {
+		if (t()) return;
+		let n = e();
+		n && n.rawValue === null && S(() => {
+			n.updateModel(/* @__PURE__ */ new Date());
 		});
 	}
-	return {
-		onBlur: a,
-		watchRestoreOnBlurLastValidValue: i
-	};
+	return { onBlur: n };
 }
 //#endregion
 //#region src/components/wt-datepicker/wt-datepicker.vue?vue&type=script&setup=true&lang.ts
@@ -195,14 +214,12 @@ var H = { class: "wt-datepicker" }, U = { class: "wt-datepicker__button-bar" },
 					s.value = null;
 					return;
 				}
-				let t = o.timezone ? z(e, o.timezone) : e;
+				let t = o.timezone ? R(e, o.timezone) : e;
 				s.value = t.getTime();
 			}
 		}), b = N("datepicker"), w = `datepicker-${Math.random().toString(36).slice(2, 11)}`;
 		B(() => b.value?.$el?.querySelector("input"));
-		let { onBlur: T, watchRestoreOnBlurLastValidValue: F } = V(v, () => b.value, () => !!o.clearable);
-		F();
-		let J = f(() => o.placholder || `dd/mm/yyyy ${o.showTime ? "hh:mm" : ""}`), Y = () => {
+		let { onBlur: T } = V(() => b.value, () => !!o.clearable), J = f(() => o.placholder || `dd/mm/yyyy ${o.showTime ? "hh:mm" : ""}`), { lock: Y, unlock: X } = z(), Z = () => {
 			if (o.showTime && v.value) {
 				let e = v.value;
 				S(() => {
@@ -212,23 +229,25 @@ var H = { class: "wt-datepicker" }, U = { class: "wt-datepicker__button-bar" },
 			setTimeout(() => {
 				b.value?.alignOverlay();
 				let e = b.value?.overlay;
-				e && (e.style.minWidth = "");
+				e && (e.style.minWidth = "", Y(e));
 			}, 0);
-		}, X = f(() => o.required ? `${o.label}*` : o.label), { v: Z, customValidators: Q } = A(o), { isValidation: te, invalid: ne, validationText: $, validationTextColor: re } = d({
-			v: Z,
-			customValidators: Q
+		}, Q = () => {
+			X();
+		}, te = f(() => o.required ? `${o.label}*` : o.label), { v: ne, customValidators: re } = A(o), { isValidation: ie, invalid: ae, validationText: $, validationTextColor: oe } = d({
+			v: ne,
+			customValidators: re
 		});
 		return (a, o) => {
 			let s = O("wt-label"), l = O("wt-button"), u = O("wt-icon-btn"), d = O("wt-message");
 			return E(), ee("div", H, [
 				_(s, x(e.labelProps, { disabled: e.disabled }, {
 					for: w,
-					invalid: j(ne)
+					invalid: j(ae)
 				}), {
-					default: I(() => [D(a.$slots, "label", C(y({ label: e.label })), () => [g(k(X.value), 1)], !0)], void 0, !0),
+					default: F(() => [D(a.$slots, "label", C(y({ label: e.label })), () => [g(k(te.value), 1)], !0)], void 0, !0),
 					_: 3
 				}, 16, ["disabled", "invalid"]),
-				_(j(R), {
+				_(j(L), {
 					ref_key: "datepicker",
 					ref: b,
 					id: w,
@@ -254,29 +273,30 @@ var H = { class: "wt-datepicker" }, U = { class: "wt-datepicker__button-bar" },
 						minute: { class: "typo-body-2" },
 						panel: { style: { maxWidth: "380px" } }
 					},
-					onShow: Y,
+					onShow: Z,
+					onHide: Q,
 					onBlur: j(T)
 				}, {
-					buttonbar: I(({ todayCallback: i, clearCallback: a }) => [h("div", U, [_(l, {
+					buttonbar: F(({ todayCallback: i, clearCallback: a }) => [h("div", U, [_(l, {
 						color: j(n).SECONDARY,
 						variant: j(t).OUTLINED,
 						size: j(r).SM,
 						onClick: i
 					}, {
-						default: I(() => [g(k(j(c)("reusable.today")), 1)], void 0, !0),
+						default: F(() => [g(k(j(c)("reusable.today")), 1)], void 0, !0),
 						_: 1
 					}, 8, [
 						"color",
 						"variant",
 						"size",
 						"onClick"
-					]), L(_(l, {
+					]), I(_(l, {
 						color: j(n).SECONDARY,
 						variant: j(t).OUTLINED,
 						size: j(r).SM,
 						onClick: a
 					}, {
-						default: I(() => [g(k(j(c)("reusable.clear")), 1)], void 0, !0),
+						default: F(() => [g(k(j(c)("reusable.clear")), 1)], void 0, !0),
 						_: 1
 					}, 8, [
 						"color",
@@ -284,35 +304,35 @@ var H = { class: "wt-datepicker" }, U = { class: "wt-datepicker__button-bar" },
 						"size",
 						"onClick"
 					]), [[P, e.clearable && v.value]])])]),
-					prevbutton: I(({ actionCallback: e }) => [_(u, {
+					prevbutton: F(({ actionCallback: e }) => [_(u, {
 						icon: "arrow-left",
 						onClick: e
 					}, null, 8, ["onClick"])]),
-					nextbutton: I(({ actionCallback: e }) => [_(u, {
+					nextbutton: F(({ actionCallback: e }) => [_(u, {
 						icon: "arrow-right",
 						onClick: e
 					}, null, 8, ["onClick"])]),
-					clearicon: I(({ clearCallback: e }) => [_(u, {
+					clearicon: F(({ clearCallback: e }) => [_(u, {
 						icon: "close",
 						class: "wt-datepicker__clear-icon",
 						onClick: e
 					}, null, 8, ["onClick"])]),
-					hourincrementbutton: I(({ callbacks: e }) => [h("span", {
+					hourincrementbutton: F(({ callbacks: e }) => [h("span", {
 						onMousedown: e.mousedown,
 						onMouseup: e.mouseup,
 						onMouseleave: e.mouseleave
 					}, [_(u, { icon: "arrow-up" })], 40, W)]),
-					hourdecrementbutton: I(({ callbacks: e }) => [h("span", {
+					hourdecrementbutton: F(({ callbacks: e }) => [h("span", {
 						onMousedown: e.mousedown,
 						onMouseup: e.mouseup,
 						onMouseleave: e.mouseleave
 					}, [_(u, { icon: "arrow-down" })], 40, G)]),
-					minuteincrementbutton: I(({ callbacks: e }) => [h("span", {
+					minuteincrementbutton: F(({ callbacks: e }) => [h("span", {
 						onMousedown: e.mousedown,
 						onMouseup: e.mouseup,
 						onMouseleave: e.mouseleave
 					}, [_(u, { icon: "arrow-up" })], 40, K)]),
-					minutedecrementbutton: I(({ callbacks: e }) => [h("span", {
+					minutedecrementbutton: F(({ callbacks: e }) => [h("span", {
 						onMousedown: e.mousedown,
 						onMouseup: e.mouseup,
 						onMouseleave: e.mouseleave
@@ -329,13 +349,13 @@ var H = { class: "wt-datepicker" }, U = { class: "wt-datepicker__button-bar" },
 					"show-clear",
 					"onBlur"
 				]),
-				j(te) && j($) ? (E(), p(d, {
+				j(ie) && j($) ? (E(), p(d, {
 					key: 0,
-					color: j(re),
+					color: j(oe),
 					variant: j(i).SIMPLE,
 					size: j(r).SM
 				}, {
-					default: I(() => [g(k(j($)), 1)], void 0, !0),
+					default: F(() => [g(k(j($)), 1)], void 0, !0),
 					_: 1
 				}, 8, [
 					"color",
@@ -345,6 +365,6 @@ var H = { class: "wt-datepicker" }, U = { class: "wt-datepicker__button-bar" },
 			]);
 		};
 	}
-}), [["__scopeId", "data-v-4be684aa"]]);
+}), [["__scopeId", "data-v-d1bf89b4"]]);
 //#endregion
 export { J as default };

package/dist/{wt-display-chip-items-CSqQ0S_z.js → wt-display-chip-items-Cvehy_gX.js}

@@ -1,4 +1,4 @@
-import { C as e, i as t } from "./components-B2L1ZiHW.js";
+import { C as e, i as t } from "./components-BuLx9sx8.js";
 import { t as n } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { t as r } from "./displayText-CtaxzaBz.js";
 import { Fragment as i, computed as a, createCommentVNode as o, createElementBlock as s, createTextVNode as c, createVNode as l, defineComponent as u, openBlock as d, renderList as f, renderSlot as p, toDisplayString as m, unref as h, withCtx as g } from "vue";

package/dist/{wt-send-message-popup-D1SPWpd0.js → wt-send-message-popup-DbS2qd1N.js}

@@ -1,5 +1,5 @@
 import { n as e, r as t } from "./clients-IxWZVjVW.js";
-import { n } from "./components-B2L1ZiHW.js";
+import { n } from "./components-BuLx9sx8.js";
 import { t as r } from "./vue-i18n-Db_oYfO8.js";
 import { createBlock as i, createTextVNode as a, createVNode as o, defineComponent as s, inject as c, mergeProps as l, onMounted as u, openBlock as d, ref as f, resolveComponent as p, toDisplayString as m, unref as h, withCtx as g } from "vue";
 //#endregion

package/dist/{wt-type-extension-value-input-C0NYBiHc.js → wt-type-extension-value-input-DIa6DhuQ.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./clients-IxWZVjVW.js";
-import { a as t, o as n, r, s as i } from "./components-B2L1ZiHW.js";
+import { a as t, o as n, r, s as i } from "./components-BuLx9sx8.js";
 import { t as a } from "./enums-De8CDKZ1.js";
 import { t as o } from "./vue-i18n-Db_oYfO8.js";
 import { computed as s, createBlock as c, createCommentVNode as l, createVNode as u, defineComponent as d, mergeModels as f, mergeProps as p, openBlock as m, renderSlot as h, resolveComponent as g, unref as _, useModel as v } from "vue";

package/dist/{wt-vidstack-player-BhGCF8P9.js → wt-vidstack-player-DADeF449.js}

@@ -1,4 +1,4 @@
-import { w as e } from "./components-B2L1ZiHW.js";
+import { w as e } from "./components-BuLx9sx8.js";
 import { t } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { l as n } from "./enums-De8CDKZ1.js";
 import "./wt-button-dC4nOW56.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-sdk",
-	"version": "26.6.83",
+	"version": "26.6.85",
 	"private": false,
 	"scripts": {
 		"dev": "npm run docs:dev",

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

@@ -9,6 +9,6 @@
   min-width: 0;
   border-radius: var(--wt-card-border-radius);
   padding: var(--wt-card-padding);
-  box-shadow: var(--elevation-5);
+  box-shadow: var(--elevation-3);
 }
 </style>

package/src/components/wt-datepicker/_internals/composables/useOverlayAnchor.ts

@@ -0,0 +1,56 @@
+import { onUnmounted } from 'vue';
+
+// Prevents PrimeVue's currentView watcher from:
+// - widening the overlay when switching to the month/year grid
+// - flipping the overlay between above/below the input when panel height changes
+export function useOverlayAnchor() {
+	let observer: MutationObserver | null = null;
+
+	// https://webitel.atlassian.net/browse/WTEL-9906
+	function lockWidth(panel: HTMLElement, lockedWidth: string) {
+		if (panel.style.width !== lockedWidth) {
+			panel.style.width = lockedWidth;
+			panel.style.minWidth = '';
+		}
+	}
+
+	// https://webitel.atlassian.net/browse/WTEL-9860?focusedCommentId=766440
+	function lockSide(panel: HTMLElement, lockedSide: string, lockedTop: string) {
+		if (panel.style.transformOrigin !== lockedSide) {
+			panel.style.transformOrigin = lockedSide;
+			panel.style.top = lockedTop;
+		}
+	}
+
+	function lock(panel: HTMLElement) {
+		observer?.disconnect();
+
+		const lockedWidth = panel.style.width;
+		const lockedSide = panel.style.transformOrigin; // 'top' = below input, 'bottom' = above
+		const lockedTop = panel.style.top;
+
+		observer = new MutationObserver(() => {
+			lockWidth(panel, lockedWidth);
+			lockSide(panel, lockedSide, lockedTop);
+		});
+
+		observer.observe(panel, {
+			attributes: true,
+			attributeFilter: [
+				'style',
+			],
+		});
+	}
+
+	function unlock() {
+		observer?.disconnect();
+		observer = null;
+	}
+
+	onUnmounted(unlock);
+
+	return {
+		lock,
+		unlock,
+	};
+}

package/src/components/wt-datepicker/_internals/composables/useRestoreOnBlur.ts

@@ -5,7 +5,7 @@ import { nextTick, type WritableComputedRef, watch } from 'vue';
  *
  * https://webitel.atlassian.net/browse/WTEL-9880
  *
- * When the datepicker is not clearable, restores the last valid value on blur
+ * When the datepicker is not clearable, set current date value on blur
  * if the user left the field empty or typed an invalid date.
  *
  * Since the parent model never becomes null (null writes are blocked in the
@@ -14,40 +14,24 @@ import { nextTick, type WritableComputedRef, watch } from 'vue';
  * redraws the input.
  */
 export function useRestoreOnBlur(
-	modelValue: WritableComputedRef<Date | null>,
 	getDatepicker: () => {
 		rawValue: Date | null;
 		updateModel: (v: Date) => void;
 	} | null,
 	isClearable: () => boolean,
 ) {
-	let lastValid: Date | null = null;
-
-	function watchRestoreOnBlurLastValidValue() {
-		watch(
-			modelValue,
-			(value) => {
-				if (value !== null) lastValid = value;
-			},
-			{
-				immediate: true,
-			},
-		);
-	}
-
 	function onBlur() {
 		if (isClearable()) return;
 		const datePickerEl = getDatepicker();
 		if (!datePickerEl) return;
-		if (datePickerEl.rawValue === null && lastValid !== null) {
+		if (datePickerEl.rawValue === null) {
 			nextTick(() => {
-				datePickerEl.updateModel(new Date(lastValid.getTime()));
+				datePickerEl.updateModel(new Date());
 			});
 		}
 	}
 
 	return {
 		onBlur,
-		watchRestoreOnBlurLastValidValue,
 	};
 }

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

@@ -49,6 +49,7 @@
 				}
 			}"
 			@show="onPanelShow"
+			@hide="onPanelHide"
 			@blur="onBlur"
     >
 			<template #buttonbar="{ todayCallback, clearCallback }">
@@ -152,6 +153,7 @@ import {
 	MessageVariant,
 } from '../../enums';
 import { useValidation } from '../../mixins/validationMixin/useValidation';
+import { useOverlayAnchor } from './_internals/composables/useOverlayAnchor';
 import { usePreventZeroPad } from './_internals/composables/usePreventZeroPad';
 import { useRestoreOnBlur } from './_internals/composables/useRestoreOnBlur';
 
@@ -208,18 +210,17 @@ const datepickerId = `datepicker-${Math.random().toString(36).slice(2, 11)}`;
 
 usePreventZeroPad(() => datepicker.value?.$el?.querySelector('input'));
 
-const { onBlur, watchRestoreOnBlurLastValidValue } = useRestoreOnBlur(
-	modelValue,
+const { onBlur } = useRestoreOnBlur(
 	() => datepicker.value,
 	() => !!props.clearable,
 );
 
-watchRestoreOnBlurLastValidValue();
-
 const getPlaceholder = computed(() => {
 	return props.placholder || `dd/mm/yyyy ${props.showTime ? 'hh:mm' : ''}`;
 });
 
+const { lock: lockOverlay, unlock: unlockOverlay } = useOverlayAnchor();
+
 // PrimeVue initializes its internal currentHour/currentMinute from new Date() when the
 // overlay opens, ignoring the model value. Re-assigning the same value forces a re-sync.
 const onPanelShow = () => {
@@ -234,10 +235,16 @@ const onPanelShow = () => {
 	setTimeout(() => {
 		datepicker.value?.alignOverlay();
 		const panel = datepicker.value?.overlay;
-		if (panel) panel.style.minWidth = '';
+		if (!panel) return;
+		panel.style.minWidth = '';
+		lockOverlay(panel);
 	}, 0);
 };
 
+const onPanelHide = () => {
+	unlockOverlay();
+};
+
 const requiredLabel = computed(() => {
 	return props.required ? `${props.label}*` : props.label;
 });

package/src/enums/MimeTypes/MimeTypes.enum.ts

@@ -16,6 +16,8 @@ export const MimeTypes = {
 	APPLICATION_MSWORD: 'application/msword',
 	APPLICATION_DOCX:
 		'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+	APPLICATION_XLSX:
+		'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
 } as const;
 
 export type MimeTypes = (typeof MimeTypes)[keyof typeof MimeTypes];

package/types/components/wt-datepicker/_internals/composables/useOverlayAnchor.d.ts

@@ -0,0 +1,4 @@
+export declare function useOverlayAnchor(): {
+    lock: (panel: HTMLElement) => void;
+    unlock: () => void;
+};

package/types/components/wt-datepicker/_internals/composables/useRestoreOnBlur.d.ts

@@ -1,10 +1,9 @@
-import { type WritableComputedRef } from 'vue';
 /**
  * @author @HlukhovYe
  *
  * https://webitel.atlassian.net/browse/WTEL-9880
  *
- * When the datepicker is not clearable, restores the last valid value on blur
+ * When the datepicker is not clearable, set current date value on blur
  * if the user left the field empty or typed an invalid date.
  *
  * Since the parent model never becomes null (null writes are blocked in the
@@ -12,10 +11,9 @@ import { type WritableComputedRef } from 'vue';
  * call PrimeVue's internal updateModel() directly so it resyncs rawValue and
  * redraws the input.
  */
-export declare function useRestoreOnBlur(modelValue: WritableComputedRef<Date | null>, getDatepicker: () => {
+export declare function useRestoreOnBlur(getDatepicker: () => {
     rawValue: Date | null;
     updateModel: (v: Date) => void;
 } | null, isClearable: () => boolean): {
     onBlur: () => void;
-    watchRestoreOnBlurLastValidValue: () => void;
 };

package/types/enums/MimeTypes/MimeTypes.enum.d.ts

@@ -12,5 +12,6 @@ export declare const MimeTypes: {
     readonly APPLICATION_PDF: "application/pdf";
     readonly APPLICATION_MSWORD: "application/msword";
     readonly APPLICATION_DOCX: "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
+    readonly APPLICATION_XLSX: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
 };
 export type MimeTypes = (typeof MimeTypes)[keyof typeof MimeTypes];