@webitel/ui-sdk 26.6.71 → 26.6.72

package/dist/{wt-chat-emoji-BdKDyZmY.js → wt-chat-emoji-LewqM4p6.js}

@@ -1,4 +1,4 @@
-import "./components-CXf44HOY.js";
+import "./components-Dk5QOwBa.js";
 import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { l as t } from "./enums-CoY-pIuZ.js";
 import { t as n } from "./wt-button-BVX4GDCP.js";

package/dist/{wt-datepicker-CJXKrxBh.js → wt-datepicker-DYJGuWH2.js}

@@ -3,10 +3,10 @@ import { d as t, f as n, l as r, r as i } from "./enums-CoY-pIuZ.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-DMp_AiNP.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, openBlock as T, renderSlot as E, resolveComponent as D, toDisplayString as O, toRefs as k, unref as A, useModel as j, useTemplateRef as M, vShow as N, 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 L } from "vue";
+import R from "primevue/datepicker";
 //#region node_modules/date-fns-tz/dist/esm/fromZonedTime/index.js
-function L(e, t, n) {
+function z(e, t, n) {
 	if (typeof e == "string" && !e.match(c)) return s(e, {
 		...n,
 		timeZone: t
@@ -16,24 +16,55 @@ function L(e, t, n) {
 	return new Date(r + i);
 }
 //#endregion
+//#region src/components/wt-datepicker/_internals/composables/usePreventZeroPad.ts
+function B(e) {
+	let t = null;
+	function n(e) {
+		let n = e.target, r = n.value, i = n.selectionStart ?? 0, a = r.split("/"), o = 0;
+		for (let e = 0; e < Math.min(a.length, 2); e++) {
+			let n = a[e], s = o + n.length;
+			if (i <= s && n.length === 1 && /^\d$/.test(n)) {
+				t = {
+					value: r,
+					cursor: i
+				};
+				return;
+			}
+			o = s + 1;
+		}
+	}
+	function r(e) {
+		if (!t) return;
+		let n = e.target, { value: r, cursor: i } = t;
+		t = null, n.value !== r && (n.value = r, n.setSelectionRange(i, i), e.stopImmediatePropagation());
+	}
+	T(() => {
+		let t = e();
+		t && (t.addEventListener("input", n, { capture: !0 }), t.addEventListener("input", r));
+	}), E(() => {
+		let t = e();
+		t && (t.removeEventListener("input", n, { capture: !0 }), t.removeEventListener("input", r));
+	});
+}
+//#endregion
 //#region src/components/wt-datepicker/wt-datepicker.vue?vue&type=script&setup=true&lang.ts
-var R = { class: "wt-datepicker" }, z = { class: "wt-datepicker__button-bar" }, B = [
+var V = { class: "wt-datepicker" }, H = { class: "wt-datepicker__button-bar" }, U = [
 	"onMousedown",
 	"onMouseup",
 	"onMouseleave"
-], V = [
+], W = [
 	"onMousedown",
 	"onMouseup",
 	"onMouseleave"
-], H = [
+], G = [
 	"onMousedown",
 	"onMouseup",
 	"onMouseleave"
-], U = [
+], K = [
 	"onMousedown",
 	"onMouseup",
 	"onMouseleave"
-], W = /*#__PURE__*/ e(/* @__PURE__ */ y({
+], q = /*#__PURE__*/ e(/* @__PURE__ */ y({
 	__name: "wt-datepicker",
 	props: /*@__PURE__*/ x({
 		showTime: { type: Boolean },
@@ -131,7 +162,7 @@ var R = { class: "wt-datepicker" }, z = { class: "wt-datepicker__button-bar" },
 		"keydown"
 	], ["update:modelValue"]),
 	setup(e, { emit: a }) {
-		let o = e, s = j(e, "modelValue"), { t: c } = u(), y = f({
+		let o = e, s = N(e, "modelValue"), { t: c } = u(), y = f({
 			get() {
 				if (!s.value) return null;
 				let e = /* @__PURE__ */ new Date(+s.value);
@@ -142,10 +173,12 @@ var R = { class: "wt-datepicker" }, z = { class: "wt-datepicker__button-bar" },
 					s.value = null;
 					return;
 				}
-				let t = o.timezone ? L(e, o.timezone) : e;
+				let t = o.timezone ? z(e, o.timezone) : e;
 				s.value = t.getTime();
 			}
-		}), x = M("datepicker"), W = `datepicker-${Math.random().toString(36).slice(2, 11)}`, G = f(() => o.placholder || `dd/mm/yyyy ${o.showTime ? "hh:mm" : ""}`), K = () => {
+		}), 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(() => {
@@ -157,24 +190,24 @@ var R = { class: "wt-datepicker" }, z = { class: "wt-datepicker__button-bar" },
 				let e = x.value?.overlay;
 				e && (e.style.minWidth = "");
 			}, 0);
-		}, q = f(() => o.required ? `${o.label}*` : o.label), { v: J, customValidators: Y } = k(o), { isValidation: X, invalid: Z, validationText: Q, validationTextColor: $ } = d({
-			v: J,
-			customValidators: Y
+		}, 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
 		});
 		return (a, o) => {
-			let s = D("wt-label"), l = D("wt-button"), u = D("wt-icon-btn"), d = D("wt-message");
-			return T(), h("div", R, [
+			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: W,
-					invalid: A(Z)
+					for: T,
+					invalid: M(Q)
 				}), {
-					default: P(() => [E(a.$slots, "label", w(b({ label: e.label })), () => [_(O(q.value), 1)], !0)], void 0, !0),
+					default: I(() => [O(a.$slots, "label", w(b({ label: e.label })), () => [_(A(J.value), 1)], !0)], void 0, !0),
 					_: 3
 				}, 16, ["disabled", "invalid"]),
-				v(A(I), {
+				v(M(R), {
 					ref_key: "datepicker",
 					ref: x,
-					id: W,
+					id: T,
 					modelValue: y.value,
 					"onUpdate:modelValue": o[0] ||= (e) => y.value = e,
 					"date-format": "dd/mm/yy",
@@ -183,7 +216,7 @@ var R = { class: "wt-datepicker" }, z = { class: "wt-datepicker__button-bar" },
 					"show-time": e.showTime,
 					"min-date": e.minDate,
 					"max-date": e.maxDate,
-					placeholder: G.value,
+					placeholder: E.value,
 					"show-clear": e.clearable && y.value,
 					"show-button-bar": "",
 					fluid: "",
@@ -196,68 +229,68 @@ var R = { class: "wt-datepicker" }, z = { class: "wt-datepicker__button-bar" },
 						minute: { class: "typo-body-2" },
 						panel: { style: { maxWidth: "380px" } }
 					},
-					onShow: K
+					onShow: q
 				}, {
-					buttonbar: P(({ todayCallback: i, clearCallback: a }) => [g("div", z, [v(l, {
-						color: A(n).SECONDARY,
-						variant: A(t).OUTLINED,
-						size: A(r).SM,
+					buttonbar: I(({ todayCallback: i, clearCallback: a }) => [g("div", H, [v(l, {
+						color: M(n).SECONDARY,
+						variant: M(t).OUTLINED,
+						size: M(r).SM,
 						onClick: i
 					}, {
-						default: P(() => [_(O(A(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, {
-						color: A(n).SECONDARY,
-						variant: A(t).OUTLINED,
-						size: A(r).SM,
+					]), L(v(l, {
+						color: M(n).SECONDARY,
+						variant: M(t).OUTLINED,
+						size: M(r).SM,
 						onClick: a
 					}, {
-						default: P(() => [_(O(A(c)("reusable.clear")), 1)], void 0, !0),
+						default: I(() => [_(A(M(c)("reusable.clear")), 1)], void 0, !0),
 						_: 1
 					}, 8, [
 						"color",
 						"variant",
 						"size",
 						"onClick"
-					]), [[N, 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: e.mousedown,
 						onMouseup: e.mouseup,
 						onMouseleave: e.mouseleave
-					}, [v(u, { icon: "arrow-up" })], 40, B)]),
-					hourdecrementbutton: P(({ callbacks: e }) => [g("span", {
+					}, [v(u, { icon: "arrow-up" })], 40, U)]),
+					hourdecrementbutton: I(({ callbacks: e }) => [g("span", {
 						onMousedown: e.mousedown,
 						onMouseup: e.mouseup,
 						onMouseleave: e.mouseleave
-					}, [v(u, { icon: "arrow-down" })], 40, V)]),
-					minuteincrementbutton: P(({ callbacks: e }) => [g("span", {
+					}, [v(u, { icon: "arrow-down" })], 40, W)]),
+					minuteincrementbutton: I(({ callbacks: e }) => [g("span", {
 						onMousedown: e.mousedown,
 						onMouseup: e.mouseup,
 						onMouseleave: e.mouseleave
-					}, [v(u, { icon: "arrow-up" })], 40, H)]),
-					minutedecrementbutton: P(({ callbacks: e }) => [g("span", {
+					}, [v(u, { icon: "arrow-up" })], 40, G)]),
+					minutedecrementbutton: I(({ callbacks: e }) => [g("span", {
 						onMousedown: e.mousedown,
 						onMouseup: e.mouseup,
 						onMouseleave: e.mouseleave
-					}, [v(u, { icon: "arrow-down" })], 40, U)]),
+					}, [v(u, { icon: "arrow-down" })], 40, K)]),
 					_: 1
 				}, 8, [
 					"modelValue",
@@ -269,13 +302,13 @@ var R = { class: "wt-datepicker" }, z = { class: "wt-datepicker__button-bar" },
 					"placeholder",
 					"show-clear"
 				]),
-				A(X) && A(Q) ? (T(), p(d, {
+				M(Z) && M($) ? (D(), p(d, {
 					key: 0,
-					color: A($),
-					variant: A(i).SIMPLE,
-					size: A(r).SM
+					color: M(ee),
+					variant: M(i).SIMPLE,
+					size: M(r).SM
 				}, {
-					default: P(() => [_(O(A(Q)), 1)], void 0, !0),
+					default: I(() => [_(A(M($)), 1)], void 0, !0),
 					_: 1
 				}, 8, [
 					"color",
@@ -285,6 +318,6 @@ var R = { class: "wt-datepicker" }, z = { class: "wt-datepicker__button-bar" },
 			]);
 		};
 	}
-}), [["__scopeId", "data-v-24efc01b"]]);
+}), [["__scopeId", "data-v-b7a87a75"]]);
 //#endregion
-export { W as default };
+export { q as default };

package/dist/{wt-display-chip-items-BIw3LDyc.js → wt-display-chip-items-Cfo-ztuH.js}

@@ -1,4 +1,4 @@
-import { C as e, i as t } from "./components-CXf44HOY.js";
+import { C as e, i as t } from "./components-Dk5QOwBa.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-C83QgUfa.js → wt-send-message-popup-q4ES4jcI.js}

@@ -1,4 +1,4 @@
-import { n as e } from "./components-CXf44HOY.js";
+import { n as e } from "./components-Dk5QOwBa.js";
 import { t } from "./vue-i18n-Db_oYfO8.js";
 import { n, r } from "./clients-DjB6nJHf.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";

package/dist/{wt-type-extension-value-input-DdGZn73d.js → wt-type-extension-value-input-BbMEDpAD.js}

@@ -1,4 +1,4 @@
-import { a as e, o as t, r as n, s as r } from "./components-CXf44HOY.js";
+import { a as e, o as t, r as n, s as r } from "./components-Dk5QOwBa.js";
 import { t as i } from "./enums-CoY-pIuZ.js";
 import { t as a } from "./vue-i18n-Db_oYfO8.js";
 import { t as o } from "./clients-DjB6nJHf.js";

package/dist/{wt-vidstack-player-B4lxjSc4.js → wt-vidstack-player-CfO0nbvr.js}

@@ -1,4 +1,4 @@
-import { w as e } from "./components-CXf44HOY.js";
+import { w as e } from "./components-Dk5QOwBa.js";
 import { t } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { l as n } from "./enums-CoY-pIuZ.js";
 import "./wt-button-BVX4GDCP.js";

package/package.json

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

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

@@ -0,0 +1,72 @@
+import { onMounted, onUnmounted } from 'vue';
+
+/**
+ * @author @HlukhovYe
+ *
+ * https://webitel.atlassian.net/browse/WTEL-9865
+ *
+ * Prevents PrimeVue's DatePicker from zero-padding a dd/mm segment while the user
+ * is mid-typing. Without this, typing "2" into a cleared two-digit slot immediately
+ * reformats to "02", forcing the user to delete the leading zero before the second digit.
+ *
+ * Works by registering two listeners on the same input event:
+ * - capture phase (before PrimeVue): snapshots the partial single-digit value
+ * - bubble phase (after PrimeVue): if PrimeVue zero-padded the value, restores the
+ *   snapshot and cancels further propagation so the model is not updated yet
+ */
+export function usePreventZeroPad(getInput: () => HTMLInputElement | null) {
+	let pendingPartial: {
+		value: string;
+		cursor: number;
+	} | null = null;
+
+	function onInputCapture(event: Event) {
+		const input = event.target as HTMLInputElement;
+		const raw = input.value;
+		const cursor = input.selectionStart ?? 0;
+		const parts = raw.split('/');
+		let offset = 0;
+		for (let i = 0; i < Math.min(parts.length, 2); i++) {
+			const seg = parts[i];
+			const segEnd = offset + seg.length;
+			if (cursor <= segEnd && seg.length === 1 && /^\d$/.test(seg)) {
+				pendingPartial = {
+					value: raw,
+					cursor,
+				};
+				return;
+			}
+			offset = segEnd + 1;
+		}
+	}
+
+	function onInputBubble(event: Event) {
+		if (!pendingPartial) return;
+		const input = event.target as HTMLInputElement;
+		const { value, cursor } = pendingPartial;
+		pendingPartial = null;
+		if (input.value !== value) {
+			input.value = value;
+			input.setSelectionRange(cursor, cursor);
+			event.stopImmediatePropagation();
+		}
+	}
+
+	onMounted(() => {
+		const input = getInput();
+		if (!input) return;
+		input.addEventListener('input', onInputCapture, {
+			capture: true,
+		});
+		input.addEventListener('input', onInputBubble);
+	});
+
+	onUnmounted(() => {
+		const input = getInput();
+		if (!input) return;
+		input.removeEventListener('input', onInputCapture, {
+			capture: true,
+		});
+		input.removeEventListener('input', onInputBubble);
+	});
+}

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

@@ -150,6 +150,7 @@ import {
 	MessageVariant,
 } from '../../enums';
 import { useValidation } from '../../mixins/validationMixin/useValidation';
+import { usePreventZeroPad } from './_internals/composables/usePreventZeroPad';
 
 interface Props extends DatePickerProps {
 	showTime?: boolean;
@@ -199,6 +200,8 @@ const datepicker = useTemplateRef<HTMLDivElement>('datepicker');
 
 const datepickerId = `datepicker-${Math.random().toString(36).slice(2, 11)}`;
 
+usePreventZeroPad(() => datepicker.value?.$el?.querySelector('input'));
+
 const getPlaceholder = computed(() => {
 	return props.placholder || `dd/mm/yyyy ${props.showTime ? 'hh:mm' : ''}`;
 });

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

@@ -0,0 +1,15 @@
+/**
+ * @author @HlukhovYe
+ *
+ * https://webitel.atlassian.net/browse/WTEL-9865
+ *
+ * Prevents PrimeVue's DatePicker from zero-padding a dd/mm segment while the user
+ * is mid-typing. Without this, typing "2" into a cleared two-digit slot immediately
+ * reformats to "02", forcing the user to delete the leading zero before the second digit.
+ *
+ * Works by registering two listeners on the same input event:
+ * - capture phase (before PrimeVue): snapshots the partial single-digit value
+ * - bubble phase (after PrimeVue): if PrimeVue zero-padded the value, restores the
+ *   snapshot and cancels further propagation so the model is not updated yet
+ */
+export declare function usePreventZeroPad(getInput: () => HTMLInputElement | null): void;