@webitel/ui-sdk 26.6.76 → 26.6.77

package/dist/{wt-chat-emoji-HFmQmJ8S.js → wt-chat-emoji-ePyFdXBg.js}

@@ -1,4 +1,4 @@
-import "./components-BTdvsbd3.js";
+import "./components-DfoMgyOo.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-CxwX-c2T.js → wt-datepicker-Dj4InHRH.js}

@@ -3,7 +3,7 @@ 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 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 L } from "vue";
+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";
 //#region node_modules/date-fns-tz/dist/esm/fromZonedTime/index.js
 function z(e, t, n) {
@@ -38,35 +38,56 @@ function B(e) {
 		let n = e.target, { value: r, cursor: i } = t;
 		t = null, n.value !== r && (n.value = r, n.setSelectionRange(i, i), e.stopImmediatePropagation());
 	}
-	T(() => {
+	w(() => {
 		let t = e();
 		t && (t.addEventListener("input", n, { capture: !0 }), t.addEventListener("input", r));
-	}), E(() => {
+	}), T(() => {
 		let t = e();
 		t && (t.removeEventListener("input", n, { capture: !0 }), t.removeEventListener("input", r));
 	});
 }
 //#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()));
+		});
+	}
+	return {
+		onBlur: a,
+		watchRestoreOnBlurLastValidValue: i
+	};
+}
+//#endregion
 //#region src/components/wt-datepicker/wt-datepicker.vue?vue&type=script&setup=true&lang.ts
-var V = { class: "wt-datepicker" }, H = { class: "wt-datepicker__button-bar" }, U = [
+var H = { class: "wt-datepicker" }, U = { class: "wt-datepicker__button-bar" }, W = [
 	"onMousedown",
 	"onMouseup",
 	"onMouseleave"
-], W = [
+], G = [
 	"onMousedown",
 	"onMouseup",
 	"onMouseleave"
-], G = [
+], K = [
 	"onMousedown",
 	"onMouseup",
 	"onMouseleave"
-], K = [
+], q = [
 	"onMousedown",
 	"onMouseup",
 	"onMouseleave"
-], q = /*#__PURE__*/ e(/* @__PURE__ */ y({
+], J = /*#__PURE__*/ e(/* @__PURE__ */ v({
 	__name: "wt-datepicker",
-	props: /*@__PURE__*/ x({
+	props: /*@__PURE__*/ b({
 		showTime: { type: Boolean },
 		minDate: {},
 		maxDate: {},
@@ -146,7 +167,7 @@ var V = { class: "wt-datepicker" }, H = { class: "wt-datepicker__button-bar" },
 		modelValue: { default: null },
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ x([
+	emits: /*@__PURE__*/ b([
 		"update:modelValue",
 		"value-change",
 		"input",
@@ -162,7 +183,7 @@ var V = { class: "wt-datepicker" }, H = { class: "wt-datepicker__button-bar" },
 		"keydown"
 	], ["update:modelValue"]),
 	setup(e, { emit: a }) {
-		let o = e, s = N(e, "modelValue"), { t: c } = u(), y = f({
+		let o = e, s = M(e, "modelValue"), { t: c } = u(), v = f({
 			get() {
 				if (!s.value) return null;
 				let e = /* @__PURE__ */ new Date(+s.value);
@@ -170,54 +191,58 @@ var V = { class: "wt-datepicker" }, H = { class: "wt-datepicker__button-bar" },
 			},
 			set(e) {
 				if (!e) {
+					if (!o.clearable) return;
 					s.value = null;
 					return;
 				}
 				let t = o.timezone ? z(e, o.timezone) : e;
 				s.value = t.getTime();
 			}
-		}), x = P("datepicker"), T = `datepicker-${Math.random().toString(36).slice(2, 11)}`;
-		B(() => x.value?.$el?.querySelector("input"));
-		let E = f(() => o.placholder || `dd/mm/yyyy ${o.showTime ? "hh:mm" : ""}`), q = () => {
-			if (o.showTime && y.value) {
-				let e = y.value;
-				C(() => {
-					y.value = new Date(e.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 = () => {
+			if (o.showTime && v.value) {
+				let e = v.value;
+				S(() => {
+					v.value = new Date(e.getTime());
 				});
 			}
 			setTimeout(() => {
-				x.value?.alignOverlay();
-				let e = x.value?.overlay;
+				b.value?.alignOverlay();
+				let e = b.value?.overlay;
 				e && (e.style.minWidth = "");
 			}, 0);
-		}, J = f(() => o.required ? `${o.label}*` : o.label), { v: Y, customValidators: X } = j(o), { isValidation: Z, invalid: Q, validationText: $, validationTextColor: ee } = d({
-			v: Y,
-			customValidators: X
+		}, 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
 		});
 		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", V, [
-				v(s, S(e.labelProps, { disabled: e.disabled }, {
-					for: T,
-					invalid: M(Q)
+			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)
 				}), {
-					default: I(() => [O(a.$slots, "label", w(b({ label: e.label })), () => [_(A(J.value), 1)], !0)], void 0, !0),
+					default: I(() => [D(a.$slots, "label", C(y({ label: e.label })), () => [g(k(X.value), 1)], !0)], void 0, !0),
 					_: 3
 				}, 16, ["disabled", "invalid"]),
-				v(M(R), {
+				_(j(R), {
 					ref_key: "datepicker",
-					ref: x,
-					id: T,
-					modelValue: y.value,
-					"onUpdate:modelValue": o[0] ||= (e) => y.value = e,
+					ref: b,
+					id: w,
+					modelValue: v.value,
+					"onUpdate:modelValue": o[0] ||= (e) => v.value = e,
 					"date-format": "dd/mm/yy",
+					"input-class": "typo-body-1",
 					required: e.required,
 					disabled: e.disabled,
 					"show-time": e.showTime,
 					"min-date": e.minDate,
 					"max-date": e.maxDate,
-					placeholder: E.value,
-					"show-clear": e.clearable && y.value,
+					placeholder: J.value,
+					"show-clear": e.clearable && v.value,
 					"show-button-bar": "",
 					fluid: "",
 					pt: {
@@ -229,68 +254,69 @@ var V = { class: "wt-datepicker" }, H = { class: "wt-datepicker__button-bar" },
 						minute: { class: "typo-body-2" },
 						panel: { style: { maxWidth: "380px" } }
 					},
-					onShow: q
+					onShow: Y,
+					onBlur: j(T)
 				}, {
-					buttonbar: I(({ todayCallback: i, clearCallback: a }) => [g("div", H, [v(l, {
-						color: M(n).SECONDARY,
-						variant: M(t).OUTLINED,
-						size: M(r).SM,
+					buttonbar: I(({ todayCallback: i, clearCallback: a }) => [h("div", U, [_(l, {
+						color: j(n).SECONDARY,
+						variant: j(t).OUTLINED,
+						size: j(r).SM,
 						onClick: i
 					}, {
-						default: I(() => [_(A(M(c)("reusable.today")), 1)], void 0, !0),
+						default: I(() => [g(k(j(c)("reusable.today")), 1)], void 0, !0),
 						_: 1
 					}, 8, [
 						"color",
 						"variant",
 						"size",
 						"onClick"
-					]), L(v(l, {
-						color: M(n).SECONDARY,
-						variant: M(t).OUTLINED,
-						size: M(r).SM,
+					]), L(_(l, {
+						color: j(n).SECONDARY,
+						variant: j(t).OUTLINED,
+						size: j(r).SM,
 						onClick: a
 					}, {
-						default: I(() => [_(A(M(c)("reusable.clear")), 1)], void 0, !0),
+						default: I(() => [g(k(j(c)("reusable.clear")), 1)], void 0, !0),
 						_: 1
 					}, 8, [
 						"color",
 						"variant",
 						"size",
 						"onClick"
-					]), [[F, e.clearable && y.value]])])]),
-					prevbutton: I(({ actionCallback: e }) => [v(u, {
+					]), [[P, e.clearable && v.value]])])]),
+					prevbutton: I(({ actionCallback: e }) => [_(u, {
 						icon: "arrow-left",
 						onClick: e
 					}, null, 8, ["onClick"])]),
-					nextbutton: I(({ actionCallback: e }) => [v(u, {
+					nextbutton: I(({ actionCallback: e }) => [_(u, {
 						icon: "arrow-right",
 						onClick: e
 					}, null, 8, ["onClick"])]),
-					clearicon: I(({ clearCallback: e }) => [v(u, {
+					clearicon: I(({ clearCallback: e }) => [_(u, {
 						icon: "close",
 						class: "wt-datepicker__clear-icon",
 						onClick: e
 					}, null, 8, ["onClick"])]),
-					hourincrementbutton: I(({ callbacks: e }) => [g("span", {
+					hourincrementbutton: I(({ callbacks: e }) => [h("span", {
 						onMousedown: e.mousedown,
 						onMouseup: e.mouseup,
 						onMouseleave: e.mouseleave
-					}, [v(u, { icon: "arrow-up" })], 40, U)]),
-					hourdecrementbutton: I(({ callbacks: e }) => [g("span", {
+					}, [_(u, { icon: "arrow-up" })], 40, W)]),
+					hourdecrementbutton: I(({ callbacks: e }) => [h("span", {
 						onMousedown: e.mousedown,
 						onMouseup: e.mouseup,
 						onMouseleave: e.mouseleave
-					}, [v(u, { icon: "arrow-down" })], 40, W)]),
-					minuteincrementbutton: I(({ callbacks: e }) => [g("span", {
+					}, [_(u, { icon: "arrow-down" })], 40, G)]),
+					minuteincrementbutton: I(({ callbacks: e }) => [h("span", {
 						onMousedown: e.mousedown,
 						onMouseup: e.mouseup,
 						onMouseleave: e.mouseleave
-					}, [v(u, { icon: "arrow-up" })], 40, G)]),
-					minutedecrementbutton: I(({ callbacks: e }) => [g("span", {
+					}, [_(u, { icon: "arrow-up" })], 40, K)]),
+					minutedecrementbutton: I(({ callbacks: e }) => [h("span", {
 						onMousedown: e.mousedown,
 						onMouseup: e.mouseup,
 						onMouseleave: e.mouseleave
-					}, [v(u, { icon: "arrow-down" })], 40, K)]),
+					}, [_(u, { icon: "arrow-down" })], 40, q)]),
 					_: 1
 				}, 8, [
 					"modelValue",
@@ -300,15 +326,16 @@ var V = { class: "wt-datepicker" }, H = { class: "wt-datepicker__button-bar" },
 					"min-date",
 					"max-date",
 					"placeholder",
-					"show-clear"
+					"show-clear",
+					"onBlur"
 				]),
-				M(Z) && M($) ? (D(), p(d, {
+				j(te) && j($) ? (E(), p(d, {
 					key: 0,
-					color: M(ee),
-					variant: M(i).SIMPLE,
-					size: M(r).SM
+					color: j(re),
+					variant: j(i).SIMPLE,
+					size: j(r).SM
 				}, {
-					default: I(() => [_(A(M($)), 1)], void 0, !0),
+					default: I(() => [g(k(j($)), 1)], void 0, !0),
 					_: 1
 				}, 8, [
 					"color",
@@ -318,6 +345,6 @@ var V = { class: "wt-datepicker" }, H = { class: "wt-datepicker__button-bar" },
 			]);
 		};
 	}
-}), [["__scopeId", "data-v-b7a87a75"]]);
+}), [["__scopeId", "data-v-4be684aa"]]);
 //#endregion
-export { q as default };
+export { J as default };

package/dist/{wt-display-chip-items-Bmqm6_Ef.js → wt-display-chip-items-B6wckCGh.js}

@@ -1,4 +1,4 @@
-import { C as e, i as t } from "./components-BTdvsbd3.js";
+import { C as e, i as t } from "./components-DfoMgyOo.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-BDPAZ-Wt.js → wt-send-message-popup-CrNuWhly.js}

@@ -1,5 +1,5 @@
 import { n as e, r as t } from "./clients-CIZxqjbV.js";
-import { n } from "./components-BTdvsbd3.js";
+import { n } from "./components-DfoMgyOo.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-BpT4QIMd.js → wt-type-extension-value-input-DXALLG2f.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./clients-CIZxqjbV.js";
-import { a as t, o as n, r, s as i } from "./components-BTdvsbd3.js";
+import { a as t, o as n, r, s as i } from "./components-DfoMgyOo.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-DIL9OGud.js → wt-vidstack-player-D5Coove0.js}

@@ -1,4 +1,4 @@
-import { w as e } from "./components-BTdvsbd3.js";
+import { w as e } from "./components-DfoMgyOo.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.76",
+	"version": "26.6.77",
 	"private": false,
 	"scripts": {
 		"dev": "npm run docs:dev",

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

@@ -0,0 +1,53 @@
+import { nextTick, type WritableComputedRef, watch } from 'vue';
+
+/**
+ * @author @HlukhovYe
+ *
+ * https://webitel.atlassian.net/browse/WTEL-9880
+ *
+ * When the datepicker is not clearable, restores the last valid 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
+ * modelValue setter), PrimeVue's watcher won't re-fire on restore. Instead we
+ * call PrimeVue's internal updateModel() directly so it resyncs rawValue and
+ * 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) {
+			nextTick(() => {
+				datePickerEl.updateModel(new Date(lastValid.getTime()));
+			});
+		}
+	}
+
+	return {
+		onBlur,
+		watchRestoreOnBlurLastValidValue,
+	};
+}

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

@@ -13,6 +13,7 @@
 			:id="datepickerId"
 			v-model="modelValue"
 			date-format="dd/mm/yy"
+			input-class="typo-body-1"
 			:required="required"
 			:disabled="disabled"
 			:show-time="showTime"
@@ -48,6 +49,7 @@
 				}
 			}"
 			@show="onPanelShow"
+			@blur="onBlur"
     >
 			<template #buttonbar="{ todayCallback, clearCallback }">
 				<div class="wt-datepicker__button-bar">
@@ -151,6 +153,7 @@ import {
 } from '../../enums';
 import { useValidation } from '../../mixins/validationMixin/useValidation';
 import { usePreventZeroPad } from './_internals/composables/usePreventZeroPad';
+import { useRestoreOnBlur } from './_internals/composables/useRestoreOnBlur';
 
 interface Props extends DatePickerProps {
 	showTime?: boolean;
@@ -188,6 +191,9 @@ const modelValue = computed({
 	},
 	set(value) {
 		if (!value) {
+			// When not clearable, don't propagate null to the parent while the user
+			// is typing — the blur handler will restore the last valid value instead.
+			if (!props.clearable) return;
 			model.value = null;
 			return;
 		}
@@ -202,6 +208,14 @@ const datepickerId = `datepicker-${Math.random().toString(36).slice(2, 11)}`;
 
 usePreventZeroPad(() => datepicker.value?.$el?.querySelector('input'));
 
+const { onBlur, watchRestoreOnBlurLastValidValue } = useRestoreOnBlur(
+	modelValue,
+	() => datepicker.value,
+	() => !!props.clearable,
+);
+
+watchRestoreOnBlurLastValidValue();
+
 const getPlaceholder = computed(() => {
 	return props.placholder || `dd/mm/yyyy ${props.showTime ? 'hh:mm' : ''}`;
 });

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

@@ -0,0 +1,21 @@
+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
+ * 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
+ * modelValue setter), PrimeVue's watcher won't re-fire on restore. Instead we
+ * call PrimeVue's internal updateModel() directly so it resyncs rawValue and
+ * redraws the input.
+ */
+export declare function useRestoreOnBlur(modelValue: WritableComputedRef<Date | null>, getDatepicker: () => {
+    rawValue: Date | null;
+    updateModel: (v: Date) => void;
+} | null, isClearable: () => boolean): {
+    onBlur: () => void;
+    watchRestoreOnBlurLastValidValue: () => void;
+};