@webitel/ui-sdk 26.8.49 → 26.8.50

package/dist/{wt-chat-emoji-mH3xAWyP.js → wt-chat-emoji-ytWQWd8E.js}

@@ -1,4 +1,4 @@
-import "./components-gG_-DJ10.js";
+import "./components-2ISVk3oW.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-B7B7qITq.js";

package/dist/{wt-datepicker-D5Af57PB.js → wt-datepicker-B8PRf5QY.js}

@@ -3,8 +3,8 @@ 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-D6P-wRwq.js";
-import { computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createTextVNode as _, createVNode as v, defineComponent as y, guardReactiveProps as b, mergeModels as x, mergeProps as S, nextTick as C, normalizeProps as w, onMounted as T, onUnmounted as E, openBlock as D, renderSlot as O, resolveComponent as k, toDisplayString as A, toRefs as j, unref as M, useModel as N, useTemplateRef as ee, vShow as te, withCtx as P, withDirectives as F } from "vue";
-import I from "primevue/datepicker";
+import { computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createTextVNode as _, createVNode as v, defineComponent as y, guardReactiveProps as b, mergeModels as x, mergeProps as S, nextTick as C, normalizeProps as w, onMounted as T, onUnmounted as E, openBlock as D, renderSlot as O, resolveComponent as k, toDisplayString as A, toRefs as j, unref as M, useModel as N, useTemplateRef as P, vShow as F, withCtx as I, withDirectives as ee } from "vue";
+import te from "primevue/datepicker";
 //#region node_modules/date-fns-tz/dist/esm/fromZonedTime/index.js
 function L(e, t, n) {
 	if (typeof e == "string" && !e.match(c)) return s(e, {
@@ -55,8 +55,29 @@ function R(e) {
 	};
 }
 //#endregion
+//#region src/components/wt-datepicker/_internals/composables/useCloseOnAnchorHidden.ts
+function z(e, t) {
+	let n = null;
+	function r() {
+		i();
+		let r = e();
+		r && (n = new IntersectionObserver((e) => {
+			if (!e.some((e) => !e.isIntersecting)) return;
+			let n = t();
+			n && (n.overlayVisible = !1);
+		}), n.observe(r));
+	}
+	function i() {
+		n?.disconnect(), n = null;
+	}
+	return E(i), {
+		watch: r,
+		unwatch: i
+	};
+}
+//#endregion
 //#region src/components/wt-datepicker/_internals/composables/useOverlayAnchor.ts
-function z() {
+function B() {
 	let e = null;
 	function t(e, t) {
 		e.style.width !== t && (e.style.width = t, e.style.minWidth = "");
@@ -84,7 +105,7 @@ function z() {
 }
 //#endregion
 //#region src/components/wt-datepicker/_internals/composables/usePreventZeroPad.ts
-function B() {
+function V() {
 	let e = null;
 	function t(t) {
 		let n = t.target, r = n.value, i = n.selectionStart ?? 0, a = r.split("/"), o = 0;
@@ -112,7 +133,7 @@ function B() {
 }
 //#endregion
 //#region src/components/wt-datepicker/_internals/composables/useRestoreOnBlur.ts
-function V(e, t) {
+function H(e, t) {
 	function n() {
 		if (t()) return;
 		let n = e();
@@ -124,7 +145,7 @@ function V(e, t) {
 }
 //#endregion
 //#region src/components/wt-datepicker/_internals/composables/useStrictInput.ts
-function H(e) {
+function U(e) {
 	let t = /^[0-9]$/, n = /* @__PURE__ */ new Set([
 		"Backspace",
 		"Delete",
@@ -151,45 +172,51 @@ function H(e) {
 }
 //#endregion
 //#region src/components/wt-datepicker/_internals/composables/useDatepicker.ts
-function U(e, t, n, r) {
-	let { onInputCapture: i, onInputBubble: a } = B(), { onInputBubble: o, resetLength: s } = R(n), { onKeydown: c } = H(n), { lock: l, unlock: u } = z(), { onBlur: d } = V(t, r);
-	function f(e) {
+function W(e, t, n, r) {
+	let { onInputCapture: i, onInputBubble: a } = V(), { onInputBubble: o, resetLength: s } = R(n), { onKeydown: c } = U(n), { lock: l, unlock: u } = B(), { watch: d, unwatch: f } = z(e, t), { onBlur: p } = H(t, r);
+	function m(e) {
+		l(e), d();
+	}
+	function h() {
+		u(), f();
+	}
+	function g(e) {
 		i(e);
 	}
-	function p(e) {
+	function _(e) {
 		a(e), o(e);
 	}
 	return T(() => {
 		let t = e();
-		t && (s(t), t.addEventListener("input", f, { capture: !0 }), t.addEventListener("input", p), t.addEventListener("keydown", c));
+		t && (s(t), t.addEventListener("input", g, { capture: !0 }), t.addEventListener("input", _), t.addEventListener("keydown", c));
 	}), E(() => {
 		let t = e();
-		t && (t.removeEventListener("input", f, { capture: !0 }), t.removeEventListener("input", p), t.removeEventListener("keydown", c));
+		t && (t.removeEventListener("input", g, { capture: !0 }), t.removeEventListener("input", _), t.removeEventListener("keydown", c));
 	}), {
-		onBlur: d,
-		lockOverlay: l,
-		unlockOverlay: u
+		onBlur: p,
+		lockOverlay: m,
+		unlockOverlay: h
 	};
 }
 //#endregion
 //#region src/components/wt-datepicker/wt-datepicker.vue?vue&type=script&setup=true&lang.ts
-var W = { class: "wt-datepicker" }, G = { class: "wt-datepicker__button-bar" }, K = [
+var G = { class: "wt-datepicker" }, K = { class: "wt-datepicker__button-bar" }, q = [
 	"onMousedown",
 	"onMouseup",
 	"onMouseleave"
-], q = [
+], J = [
 	"onMousedown",
 	"onMouseup",
 	"onMouseleave"
-], J = [
+], Y = [
 	"onMousedown",
 	"onMouseup",
 	"onMouseleave"
-], Y = [
+], X = [
 	"onMousedown",
 	"onMouseup",
 	"onMouseleave"
-], X = /*#__PURE__*/ e(/* @__PURE__ */ y({
+], Z = /*#__PURE__*/ e(/* @__PURE__ */ y({
 	__name: "wt-datepicker",
 	props: /*@__PURE__*/ x({
 		showTime: { type: Boolean },
@@ -307,7 +334,7 @@ var W = { class: "wt-datepicker" }, G = { class: "wt-datepicker__button-bar" },
 				let t = o.timezone ? L(e, o.timezone) : e;
 				s.value = t.getTime();
 			}
-		}), x = ee("datepicker"), T = (e) => e, E = `datepicker-${Math.random().toString(36).slice(2, 11)}`, { onBlur: R, lockOverlay: z, unlockOverlay: B } = U(() => x.value?.$el?.querySelector("input") ?? null, () => x.value ?? null, () => !!o.showTime, () => !!o.clearable), V = f(() => o.placholder || `dd/mm/yyyy ${o.showTime ? "hh:mm" : ""}`), H = () => {
+		}), x = P("datepicker"), T = (e) => e, E = `datepicker-${Math.random().toString(36).slice(2, 11)}`, { onBlur: R, lockOverlay: z, unlockOverlay: B } = W(() => x.value?.$el?.querySelector("input") ?? null, () => x.value ?? null, () => !!o.showTime, () => !!o.clearable), V = f(() => o.placholder || `dd/mm/yyyy ${o.showTime ? "hh:mm" : ""}`), H = () => {
 			if (o.showTime && y.value) {
 				let e = y.value;
 				C(() => {
@@ -319,7 +346,7 @@ var W = { class: "wt-datepicker" }, G = { class: "wt-datepicker__button-bar" },
 				let e = x.value?.overlay;
 				e && (e.style.minWidth = "", z(e));
 			}, 0);
-		}, X = () => {
+		}, U = () => {
 			B();
 		}, Z = f(() => o.required ? `${o.label}*` : o.label), { v: ne, customValidators: re, regleValidation: ie } = j(o), { isValidation: ae, invalid: Q, validationText: $, validationTextColor: oe } = d({
 			v: ne,
@@ -328,15 +355,15 @@ var W = { class: "wt-datepicker" }, G = { class: "wt-datepicker__button-bar" },
 		});
 		return (a, o) => {
 			let s = k("wt-label"), l = k("wt-button"), u = k("wt-icon-btn"), d = k("wt-message");
-			return D(), h("div", W, [
+			return D(), h("div", G, [
 				v(s, S(e.labelProps, { disabled: e.disabled }, {
 					for: E,
 					invalid: M(Q)
 				}), {
-					default: P(() => [O(a.$slots, "label", w(b({ label: e.label })), () => [_(A(Z.value), 1)], !0)], void 0, !0),
+					default: I(() => [O(a.$slots, "label", w(b({ label: e.label })), () => [_(A(Z.value), 1)], !0)], void 0, !0),
 					_: 3
 				}, 16, ["disabled", "invalid"]),
-				v(M(I), {
+				v(M(te), {
 					ref_key: "datepicker",
 					ref: x,
 					id: E,
@@ -364,69 +391,69 @@ var W = { class: "wt-datepicker" }, G = { class: "wt-datepicker__button-bar" },
 						panel: { style: { maxWidth: "380px" } }
 					},
 					onShow: H,
-					onHide: X,
+					onHide: U,
 					onBlur: M(R)
 				}, {
-					buttonbar: P(({ todayCallback: i, clearCallback: a }) => [g("div", G, [v(l, {
+					buttonbar: I(({ todayCallback: i, clearCallback: a }) => [g("div", K, [v(l, {
 						color: M(n).SECONDARY,
 						variant: M(t).OUTLINED,
 						size: M(r).SM,
 						onClick: i
 					}, {
-						default: P(() => [_(A(M(c)("reusable.today")), 1)], void 0, !0),
+						default: I(() => [_(A(M(c)("reusable.today")), 1)], void 0, !0),
 						_: 1
 					}, 8, [
 						"color",
 						"variant",
 						"size",
 						"onClick"
-					]), F(v(l, {
+					]), ee(v(l, {
 						color: M(n).SECONDARY,
 						variant: M(t).OUTLINED,
 						size: M(r).SM,
 						onClick: a
 					}, {
-						default: P(() => [_(A(M(c)("reusable.clear")), 1)], void 0, !0),
+						default: I(() => [_(A(M(c)("reusable.clear")), 1)], void 0, !0),
 						_: 1
 					}, 8, [
 						"color",
 						"variant",
 						"size",
 						"onClick"
-					]), [[te, e.clearable && y.value]])])]),
-					prevbutton: P(({ actionCallback: e }) => [v(u, {
+					]), [[F, e.clearable && y.value]])])]),
+					prevbutton: I(({ actionCallback: e }) => [v(u, {
 						icon: "arrow-left",
 						onClick: e
 					}, null, 8, ["onClick"])]),
-					nextbutton: P(({ actionCallback: e }) => [v(u, {
+					nextbutton: I(({ actionCallback: e }) => [v(u, {
 						icon: "arrow-right",
 						onClick: e
 					}, null, 8, ["onClick"])]),
-					clearicon: P(({ clearCallback: e }) => [v(u, {
+					clearicon: I(({ clearCallback: e }) => [v(u, {
 						icon: "close",
 						class: "wt-datepicker__clear-icon",
 						onClick: e
 					}, null, 8, ["onClick"])]),
-					hourincrementbutton: P(({ callbacks: e }) => [g("span", {
+					hourincrementbutton: I(({ callbacks: e }) => [g("span", {
 						onMousedown: T(e).mousedown,
 						onMouseup: T(e).mouseup,
 						onMouseleave: T(e).mouseleave
-					}, [v(u, { icon: "arrow-up" })], 40, K)]),
-					hourdecrementbutton: P(({ callbacks: e }) => [g("span", {
+					}, [v(u, { icon: "arrow-up" })], 40, q)]),
+					hourdecrementbutton: I(({ callbacks: e }) => [g("span", {
 						onMousedown: T(e).mousedown,
 						onMouseup: T(e).mouseup,
 						onMouseleave: T(e).mouseleave
-					}, [v(u, { icon: "arrow-down" })], 40, q)]),
-					minuteincrementbutton: P(({ callbacks: e }) => [g("span", {
+					}, [v(u, { icon: "arrow-down" })], 40, J)]),
+					minuteincrementbutton: I(({ callbacks: e }) => [g("span", {
 						onMousedown: T(e).mousedown,
 						onMouseup: T(e).mouseup,
 						onMouseleave: T(e).mouseleave
-					}, [v(u, { icon: "arrow-up" })], 40, J)]),
-					minutedecrementbutton: P(({ callbacks: e }) => [g("span", {
+					}, [v(u, { icon: "arrow-up" })], 40, Y)]),
+					minutedecrementbutton: I(({ callbacks: e }) => [g("span", {
 						onMousedown: T(e).mousedown,
 						onMouseup: T(e).mouseup,
 						onMouseleave: T(e).mouseleave
-					}, [v(u, { icon: "arrow-down" })], 40, Y)]),
+					}, [v(u, { icon: "arrow-down" })], 40, X)]),
 					_: 1
 				}, 8, [
 					"modelValue",
@@ -446,7 +473,7 @@ var W = { class: "wt-datepicker" }, G = { class: "wt-datepicker__button-bar" },
 					variant: M(i).SIMPLE,
 					size: M(r).SM
 				}, {
-					default: P(() => [_(A(M($)), 1)], void 0, !0),
+					default: I(() => [_(A(M($)), 1)], void 0, !0),
 					_: 1
 				}, 8, [
 					"color",
@@ -456,6 +483,6 @@ var W = { class: "wt-datepicker" }, G = { class: "wt-datepicker__button-bar" },
 			]);
 		};
 	}
-}), [["__scopeId", "data-v-4c2f4f33"]]);
+}), [["__scopeId", "data-v-7e8ec149"]]);
 //#endregion
-export { X as default };
+export { Z as default };

package/dist/{wt-display-chip-items-DnL_Twmy.js → wt-display-chip-items-BzQFwYws.js}

@@ -1,4 +1,4 @@
-import { C as e, i as t } from "./components-gG_-DJ10.js";
+import { C as e, i as t } from "./components-2ISVk3oW.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-C-fqzFxG.js → wt-send-message-popup-BuTlCwnq.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./rolldown-runtime-BEcgMyyN.js";
 import { n as t, r as n } from "./clients-DBqdsc05.js";
-import { T as r, n as i, w as a } from "./components-gG_-DJ10.js";
+import { T as r, n as i, w as a } from "./components-2ISVk3oW.js";
 import { t as o } from "./vue-i18n-Db_oYfO8.js";
 import { n as s } from "./useEventBus-B-ZeklLu.js";
 import { createBlock as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeProps as f, onMounted as p, openBlock as m, ref as h, resolveComponent as g, toDisplayString as _, unref as v, withCtx as y } from "vue";

package/dist/{wt-type-extension-value-input-jb7TbSvV.js → wt-type-extension-value-input-DVpMso5z.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./clients-DBqdsc05.js";
-import { a as t, o as n, r, s as i } from "./components-gG_-DJ10.js";
+import { a as t, o as n, r, s as i } from "./components-2ISVk3oW.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-BrDmQ4dp.js → wt-vidstack-player-DhaLynZB.js}

@@ -1,4 +1,4 @@
-import { E as e } from "./components-gG_-DJ10.js";
+import { E as e } from "./components-2ISVk3oW.js";
 import { t } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { l as n } from "./enums-De8CDKZ1.js";
 import "./wt-button-B7B7qITq.js";

package/package.json

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

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

@@ -0,0 +1,51 @@
+import { onUnmounted } from 'vue';
+
+/**
+ * @author @HlukhovYe
+ *
+ * https://webitel.atlassian.net/browse/WTEL-10175
+ *
+ * PrimeVue's DatePicker only closes its overlay on window resize or on scroll
+ * of the input's scrollable ancestors — it has no way to notice the input
+ * itself disappearing (e.g. a tab switch, a `v-if`, or a collapsing parent
+ * that doesn't fire scroll/resize). When that happens the overlay is left
+ * open and detached from its anchor.
+ *
+ * Watches the datepicker's root element with an IntersectionObserver, which
+ * also fires when the element is hidden via `display: none` or detached from
+ * the layout, and force-closes the overlay when that happens.
+ */
+export function useCloseOnAnchorHidden(
+	getAnchor: () => HTMLElement | null,
+	getDatepicker: () => {
+		overlayVisible?: boolean;
+	} | null,
+) {
+	let observer: IntersectionObserver | null = null;
+
+	function watch() {
+		unwatch();
+		const anchor = getAnchor();
+		if (!anchor) return;
+
+		observer = new IntersectionObserver((entries) => {
+			const isHidden = entries.some((entry) => !entry.isIntersecting);
+			if (!isHidden) return;
+			const datepicker = getDatepicker();
+			if (datepicker) datepicker.overlayVisible = false;
+		});
+		observer.observe(anchor);
+	}
+
+	function unwatch() {
+		observer?.disconnect();
+		observer = null;
+	}
+
+	onUnmounted(unwatch);
+
+	return {
+		watch,
+		unwatch,
+	};
+}

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

@@ -1,5 +1,6 @@
 import { onMounted, onUnmounted } from 'vue';
 import { createAutoSeparatorHandler } from './useAutoSeparator';
+import { useCloseOnAnchorHidden } from './useCloseOnAnchorHidden';
 import { useOverlayAnchor } from './useOverlayAnchor';
 import { createPreventZeroPadHandlers } from './usePreventZeroPad';
 import { useRestoreOnBlur } from './useRestoreOnBlur';
@@ -21,6 +22,7 @@ export function useDatepicker(
 	getDatepicker: () => {
 		rawValue: Date | null;
 		updateModel: (v: Date) => void;
+		overlayVisible?: boolean;
 	} | null,
 	showTime: () => boolean,
 	isClearable: () => boolean,
@@ -33,10 +35,24 @@ export function useDatepicker(
 
 	const { onKeydown } = createStrictInputHandler(showTime);
 
-	const { lock: lockOverlay, unlock: unlockOverlay } = useOverlayAnchor();
+	const { lock: lockOverlayAnchor, unlock: unlockOverlayAnchor } =
+		useOverlayAnchor();
+
+	const { watch: watchAnchorVisibility, unwatch: unwatchAnchorVisibility } =
+		useCloseOnAnchorHidden(getInput, getDatepicker);
 
 	const { onBlur } = useRestoreOnBlur(getDatepicker, isClearable);
 
+	function lockOverlay(panel: HTMLElement) {
+		lockOverlayAnchor(panel);
+		watchAnchorVisibility();
+	}
+
+	function unlockOverlay() {
+		unlockOverlayAnchor();
+		unwatchAnchorVisibility();
+	}
+
 	function onInputCaptureHandler(event: Event) {
 		zeroPadCapture(event);
 	}

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

@@ -206,6 +206,7 @@ const modelValue = computed({
 interface DatePickerRef extends PrimevueOverlayInstance {
 	rawValue: Date | null;
 	updateModel: (v: Date) => void;
+	overlayVisible?: boolean;
 }
 
 const datepicker = useTemplateRef<DatePickerRef>('datepicker');