@webitel/ui-sdk 25.12.28 → 25.12.30

package/dist/{vidstack-Bq6c3Bam-CxzFv3Ko.js → vidstack-Bq6c3Bam-iboJqKVr.js}

@@ -5,8 +5,8 @@ var ot = (n) => {
 var Xt = (n, t, s) => t in n ? Qt(n, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : n[t] = s;
 var N = (n, t, s) => Xt(n, typeof t != "symbol" ? t + "" : t, s), X = (n, t, s) => t.has(n) || ot("Cannot " + s);
 var i = (n, t, s) => (X(n, t, "read from private field"), s ? s.call(n) : t.get(n)), d = (n, t, s) => t.has(n) ? ot("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(n) : t.set(n, s), c = (n, t, s, r) => (X(n, t, "write to private field"), r ? r.call(n, s) : t.set(n, s), s), a = (n, t, s) => (X(n, t, "access private method"), s);
-import { A as Yt, z as ut, B as j, C as Zt, b as ti, E as nt, e as lt, F as _, G as ii, H as ei, f as si, J as ai, l as rt, K as dt, D as ni, L as Y, M as Z } from "./install-Bqlm16sb.js";
-import { R as ri } from "./vidstack-DqAw8m9J-DdJYKLyM.js";
+import { A as Yt, z as ut, B as j, C as Zt, b as ti, E as nt, e as lt, F as _, G as ii, H as ei, f as si, J as ai, l as rt, K as dt, D as ni, L as Y, M as Z } from "./install-D_xtJZB0.js";
+import { R as ri } from "./vidstack-DqAw8m9J-DRb_cwVy.js";
 let q = null, K = [], z = [];
 function ht() {
   return q ?? (q = new AudioContext());

package/dist/{vidstack-D2pY00kU-DcpelJcf.js → vidstack-D2pY00kU-Ct14APC8.js}

@@ -5,7 +5,7 @@ var w = (t) => {
 var P = (t, e, a) => e in t ? _(t, e, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[e] = a;
 var u = (t, e, a) => P(t, typeof e != "symbol" ? e + "" : e, a), C = (t, e, a) => e.has(t) || w("Cannot " + a);
 var c = (t, e, a) => (C(t, e, "read from private field"), a ? a.call(t) : e.get(t)), m = (t, e, a) => e.has(t) ? w("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, a), y = (t, e, a, o) => (C(t, e, "write to private field"), o ? o.call(t, a) : e.set(t, a), a), s = (t, e, a) => (C(t, e, "access private method"), a);
-import { l as b, k as A, V as O, G as D, f as R, o as G } from "./install-Bqlm16sb.js";
+import { l as b, k as A, V as O, G as D, f as R, o as G } from "./install-D_xtJZB0.js";
 function M() {
   return "https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1";
 }
@@ -94,7 +94,7 @@ class F {
   async load(e) {
     if (!c(this, n))
       throw Error("[vidstack] google cast player was not initialized");
-    return new (await import("./vidstack-google-cast-BiPwnnpT.js")).GoogleCastProvider(c(this, n), e);
+    return new (await import("./vidstack-google-cast-BWfbN1oJ.js")).GoogleCastProvider(c(this, n), e);
   }
 }
 n = new WeakMap(), r = new WeakSet(), S = async function(e) {

package/dist/{vidstack-DDXt6fpN-Cg0bEHId.js → vidstack-DDXt6fpN-Dt79RJ4W.js}

@@ -5,7 +5,7 @@ var g = (s) => {
 var M = (s, t, i) => t in s ? y(s, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : s[t] = i;
 var c = (s, t, i) => M(s, typeof t != "symbol" ? t + "" : t, i), h = (s, t, i) => t.has(s) || g("Cannot " + i);
 var e = (s, t, i) => (h(s, t, "read from private field"), i ? i.call(s) : t.get(s)), l = (s, t, i) => t.has(s) ? g("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(s) : t.set(s, i), p = (s, t, i, a) => (h(s, t, "write to private field"), a ? a.call(s, i) : t.set(s, i), i), u = (s, t, i) => (h(s, t, "access private method"), i);
-import { M as w, l as f, e as A, f as P, U as O, b as S } from "./install-Bqlm16sb.js";
+import { M as w, l as f, e as A, f as P, U as O, b as S } from "./install-D_xtJZB0.js";
 var r, o, b, m;
 class J {
   constructor(t) {

package/dist/{vidstack-D_-9AA6_-bnYaKyO1.js → vidstack-D_-9AA6_-DDXWcVDN.js}

@@ -1,4 +1,4 @@
-import { c as d, a as i, I as l, e as m } from "./install-Bqlm16sb.js";
+import { c as d, a as i, I as l, e as m } from "./install-D_xtJZB0.js";
 const p = /* @__PURE__ */ i(
   '<svg viewBox="0 0 32 32" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"></svg>'
 );

package/dist/{vidstack-DqAw8m9J-DdJYKLyM.js → vidstack-DqAw8m9J-DRb_cwVy.js}

@@ -3,7 +3,7 @@ var l = (i) => {
 };
 var m = (i, t, s) => t.has(i) || l("Cannot " + s);
 var r = (i, t, s) => (m(i, t, "read from private field"), s ? s.call(i) : t.get(i)), e = (i, t, s) => t.has(i) ? l("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(i) : t.set(i, s), h = (i, t, s, f) => (m(i, t, "write to private field"), f ? f.call(i, s) : t.set(i, s), s), c = (i, t, s) => (m(i, t, "access private method"), s);
-import { m as p, v as u } from "./install-Bqlm16sb.js";
+import { m as p, v as u } from "./install-D_xtJZB0.js";
 var o, a, n, d;
 class F {
   constructor(t) {

package/dist/{vidstack-audio-DduGjEcQ.js → vidstack-audio-ciWGdZoD.js}

@@ -1,8 +1,8 @@
 var a = Object.defineProperty;
 var o = (i, e, t) => e in i ? a(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
 var r = (i, e, t) => o(i, typeof e != "symbol" ? e + "" : e, t);
-import { s as p } from "./install-Bqlm16sb.js";
-import { H as d, a as u } from "./vidstack-Bq6c3Bam-CxzFv3Ko.js";
+import { s as p } from "./install-D_xtJZB0.js";
+import { H as d, a as u } from "./vidstack-Bq6c3Bam-iboJqKVr.js";
 class n extends d {
   constructor(t, s) {
     super(t, s);

package/dist/{vidstack-dash-CKzRjcLs.js → vidstack-dash-BjbkCaQh.js}

@@ -5,9 +5,9 @@ var Y = (n) => {
 var wt = (n, t, e) => t in n ? vt(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
 var I = (n, t, e) => wt(n, typeof t != "symbol" ? t + "" : t, e), b = (n, t, e) => t.has(n) || Y("Cannot " + e);
 var i = (n, t, e) => (b(n, t, "read from private field"), e ? e.call(n) : t.get(n)), f = (n, t, e) => t.has(n) ? Y("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(n) : t.set(n, e), p = (n, t, e, r) => (b(n, t, "write to private field"), r ? r.call(n, e) : t.set(n, e), e), h = (n, t, e) => (b(n, t, "access private method"), e);
-import { r as Et, b as _, d as Lt, f as At, Q as z, l as J, e as Dt, D as N, h as xt, j as O, T as Mt, L as q, t as Ct, u as Nt, v as Rt, k as Ft, m as Z, n as Pt, o as qt, q as _t } from "./install-Bqlm16sb.js";
-import { VideoProvider as $t } from "./vidstack-video-CB59bElo.js";
-import { R as jt } from "./vidstack-DqAw8m9J-DdJYKLyM.js";
+import { r as Et, b as _, d as Lt, f as At, Q as z, l as J, e as Dt, D as N, h as xt, j as O, T as Mt, L as q, t as Ct, u as Nt, v as Rt, k as Ft, m as Z, n as Pt, o as qt, q as _t } from "./install-D_xtJZB0.js";
+import { VideoProvider as $t } from "./vidstack-video-5xriTd1y.js";
+import { R as jt } from "./vidstack-DqAw8m9J-DRb_cwVy.js";
 function W(n) {
   try {
     return new Intl.DisplayNames(navigator.languages, { type: "language" }).of(n) ?? null;

package/dist/{vidstack-google-cast-BiPwnnpT.js → vidstack-google-cast-BWfbN1oJ.js}

@@ -5,9 +5,9 @@ var Q = (d) => {
 var vt = (d, t, s) => t in d ? Lt(d, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : d[t] = s;
 var G = (d, t, s) => vt(d, typeof t != "symbol" ? t + "" : t, s), O = (d, t, s) => t.has(d) || Q("Cannot " + s);
 var e = (d, t, s) => (O(d, t, "read from private field"), s ? s.call(d) : t.get(d)), T = (d, t, s) => t.has(d) ? Q("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(d) : t.set(d, s), l = (d, t, s, i) => (O(d, t, "write to private field"), i ? i.call(d, s) : t.set(d, s), s), r = (d, t, s) => (O(d, t, "access private method"), s);
-import { A as St, N as L, W as Z, z as At, D as tt, f as V, l as et, e as It, X as bt, L as Rt } from "./install-Bqlm16sb.js";
-import { R as wt } from "./vidstack-DqAw8m9J-DdJYKLyM.js";
-import { g as Mt, a as Dt, b as it, h as st, l as Nt, c as Pt } from "./vidstack-D2pY00kU-DcpelJcf.js";
+import { A as St, N as L, W as Z, z as At, D as tt, f as V, l as et, e as It, X as bt, L as Rt } from "./install-D_xtJZB0.js";
+import { R as wt } from "./vidstack-DqAw8m9J-DRb_cwVy.js";
+import { g as Mt, a as Dt, b as it, h as st, l as Nt, c as Pt } from "./vidstack-D2pY00kU-Ct14APC8.js";
 var g, _, at;
 class _t {
   constructor(t) {

package/dist/{vidstack-hls-OkFNv20L.js → vidstack-hls-BqpGa4dW.js}

@@ -5,9 +5,9 @@ var q = (n) => {
 var ot = (n, t, i) => t in n ? rt(n, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : n[t] = i;
 var _ = (n, t, i) => ot(n, typeof t != "symbol" ? t + "" : t, i), R = (n, t, i) => t.has(n) || q("Cannot " + i);
 var e = (n, t, i) => (R(n, t, "read from private field"), i ? i.call(n) : t.get(n)), f = (n, t, i) => t.has(n) ? q("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(n) : t.set(n, i), p = (n, t, i, s) => (R(n, t, "write to private field"), s ? s.call(n, i) : t.set(n, i), i), a = (n, t, i) => (R(n, t, "access private method"), i);
-import { i as ht, b as C, d as at, f as O, Q as N, l as V, e as dt, D as x, h as ut, T as ct, j, L as $, k as lt, m as k, n as ft, o as pt, q as vt } from "./install-Bqlm16sb.js";
-import { VideoProvider as yt } from "./vidstack-video-CB59bElo.js";
-import { R as gt } from "./vidstack-DqAw8m9J-DdJYKLyM.js";
+import { i as ht, b as C, d as at, f as O, Q as N, l as V, e as dt, D as x, h as ut, T as ct, j, L as $, k as lt, m as k, n as ft, o as pt, q as vt } from "./install-D_xtJZB0.js";
+import { VideoProvider as yt } from "./vidstack-video-5xriTd1y.js";
+import { R as gt } from "./vidstack-DqAw8m9J-DRb_cwVy.js";
 const Lt = (n) => ut(n);
 var T, h, o, D, b, r, E, M, U, F, Q, K, W, B, J, X, Y, z, G, Z, tt;
 class St {

package/dist/{vidstack-video-CB59bElo.js → vidstack-video-5xriTd1y.js}

@@ -5,8 +5,8 @@ var b = (i) => {
 var N = (i, t, e) => t in i ? $(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
 var y = (i, t, e) => N(i, typeof t != "symbol" ? t + "" : t, e), E = (i, t, e) => t.has(i) || b("Cannot " + e);
 var s = (i, t, e) => (E(i, t, "read from private field"), e ? e.call(i) : t.get(i)), r = (i, t, e) => t.has(i) ? b("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(i) : t.set(i, e), c = (i, t, e, n) => (E(i, t, "write to private field"), n ? n.call(i, e) : t.set(i, e), e), p = (i, t, e) => (E(i, t, "access private method"), e);
-import { s as U, w as V, x as A, y as j, z as C, l as q, D as z, E as F, T as Y, j as v } from "./install-Bqlm16sb.js";
-import { H as _, a as B } from "./vidstack-Bq6c3Bam-CxzFv3Ko.js";
+import { s as U, w as V, x as A, y as j, z as C, l as q, D as z, E as F, T as Y, j as v } from "./install-D_xtJZB0.js";
+import { H as _, a as B } from "./vidstack-Bq6c3Bam-iboJqKVr.js";
 var P, f, k, D, H;
 class G {
   constructor(t, e) {

package/dist/{vidstack-vimeo-NoVxwrcD.js → vidstack-vimeo-BC8x2jc8.js}

@@ -5,9 +5,9 @@ var N = (r) => {
 var de = (r, c, e) => c in r ? ue(r, c, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[c] = e;
 var b = (r, c, e) => de(r, typeof c != "symbol" ? c + "" : c, e), S = (r, c, e) => c.has(r) || N("Cannot " + e);
 var t = (r, c, e) => (S(r, c, "read from private field"), e ? e.call(r) : c.get(r)), f = (r, c, e) => c.has(r) ? N("Cannot add the same private member more than once") : c instanceof WeakSet ? c.add(r) : c.set(r, e), u = (r, c, e, i) => (S(r, c, "write to private field"), i ? i.call(r, e) : c.set(r, e), e), o = (r, c, e) => (S(r, c, "access private method"), e);
-import { A as fe, M as U, N as C, d as pe, e as q, f as Q, b as ye, O as _, L as R, l as be, P as ke, T as ve, Q as W } from "./install-Bqlm16sb.js";
-import { R as me } from "./vidstack-DqAw8m9J-DdJYKLyM.js";
-import { E as we } from "./vidstack-DDXt6fpN-Cg0bEHId.js";
+import { A as fe, M as U, N as C, d as pe, e as q, f as Q, b as ye, O as _, L as R, l as be, P as ke, T as ve, Q as W } from "./install-D_xtJZB0.js";
+import { R as me } from "./vidstack-DqAw8m9J-DRb_cwVy.js";
+import { E as we } from "./vidstack-DDXt6fpN-Dt79RJ4W.js";
 import { resolveVimeoVideoId as Pe, getVimeoVideoInfo as Te } from "./vidstack-krOAtKMi-B4IZWKdc.js";
 const Ce = [
   "bufferend",

package/dist/{vidstack-youtube-C1voQhH8.js → vidstack-youtube-B8OrDxFV.js}

@@ -5,8 +5,8 @@ var B = (r) => {
 var q = (r, n, e) => n in r ? A(r, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[n] = e;
 var T = (r, n, e) => q(r, typeof n != "symbol" ? n + "" : n, e), M = (r, n, e) => n.has(r) || B("Cannot " + e);
 var s = (r, n, e) => (M(r, n, "read from private field"), e ? e.call(r) : n.get(r)), p = (r, n, e) => n.has(r) ? B("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(r) : n.set(r, e), l = (r, n, e, t) => (M(r, n, "write to private field"), t ? t.call(r, e) : n.set(r, e), e), o = (r, n, e) => (M(r, n, "access private method"), e);
-import { A as z, M as G, d as H, e as J, b as K, O as Q, N as C, R as W, v as $, S as X } from "./install-Bqlm16sb.js";
-import { E as Z } from "./vidstack-DDXt6fpN-Cg0bEHId.js";
+import { A as z, M as G, d as H, e as J, b as K, O as Q, N as C, R as W, v as $, S as X } from "./install-D_xtJZB0.js";
+import { E as Z } from "./vidstack-DDXt6fpN-Dt79RJ4W.js";
 import { resolveYouTubeVideoId as ee } from "./vidstack-Dm1xEU9Q-qSXq3AI-.js";
 const b = {
   Ended: 0,

package/dist/{vuex.esm-bundler-C04hKLcf.js → vuex.esm-bundler-BOZ1SHXV.js}

@@ -1,4 +1,4 @@
-import { p as d } from "./install-Bqlm16sb.js";
+import { p as d } from "./install-D_xtJZB0.js";
 import { inject as lt, effectScope as dt, reactive as vt, watch as J, computed as pt } from "vue";
 function ht() {
   return W().__VUE_DEVTOOLS_GLOBAL_HOOK__;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.12.28",
+  "version": "25.12.30",
   "private": false,
   "scripts": {
     "make-all": "npm version patch --git-tag-version false && npm run build && (npm run build:types || true) && (npm run lint:fix || true) && npm run publish-lib",
@@ -62,6 +62,7 @@
     "clipboard-copy": "^4.0.1",
     "csv-stringify": "^5.5.3",
     "date-fns": "^4.1.0",
+    "date-fns-tz": "^3.2.0",
     "deep-copy": "^1.4.2",
     "deep-equal": "^2.2.3",
     "deepmerge": "^4.3.1",

package/src/components/wt-app-header/wt-header-actions.vue

@@ -75,6 +75,9 @@
 </template>
 
 <script>
+import { FormatDateMode } from '@webitel/ui-sdk/enums';
+import { formatDate } from '@webitel/ui-sdk/utils';
+
 export default {
   name: 'WtHeaderActions',
   props: {
@@ -107,7 +110,7 @@ export default {
       let buildString = '';
       buildString = `${this.$t('webitelUI.headerActions.buildVersion')}: v${this.buildInfo.release}-${this.buildInfo.build}`;
       if (this.buildInfo.timestamp) {
-        buildString += `, ${new Date(this.buildInfo.timestamp).toLocaleString()}`;
+        buildString += `, ${formatDate(this.buildInfo.timestamp, FormatDateMode.DATETIME)}`;
       }
       return buildString;
     },

package/src/composables/useTableColumnDrag/useTableColumnDrag.ts

@@ -1,4 +1,50 @@
 export const useTableColumnDrag = (table, reorderableColumns) => {
+  let animationFrameId = null;
+  let containerEl = null;
+  let currentMouseX = null;
+  let isDragging = false;
+
+  const autoScroll = () => {
+    if (!containerEl || !isDragging || currentMouseX === null) return;
+
+    const rect = containerEl.getBoundingClientRect();
+    const scrollZone = 150; // pixels from edge to trigger scroll
+    const minScrollSpeed = 1; // minimum scroll speed
+    const maxScrollSpeed = 25; // maximum scroll speed
+
+    const distanceFromLeft = currentMouseX - rect.left;
+    const distanceFromRight = rect.right - currentMouseX;
+
+    // Easing function for smooth acceleration (ease-in-out cubic)
+    const easeInOutCubic = (t) => {
+      return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+    };
+
+    // Determine scroll direction and distance
+    let scrollDirection = 0; // -1 for left, 1 for right, 0 for no scroll
+    let distance = 0;
+
+    if (distanceFromLeft < scrollZone && containerEl.scrollLeft > 0) {
+      scrollDirection = -1;
+      distance = distanceFromLeft;
+    } else if (distanceFromRight < scrollZone) {
+      scrollDirection = 1;
+      distance = distanceFromRight;
+    }
+
+    // Apply scroll if needed
+    if (scrollDirection !== 0) {
+      const proximity = 1 - (distance / scrollZone); // 0 to 1, where 1 is at the edge
+      const easedProximity = easeInOutCubic(proximity);
+      const scrollSpeed = minScrollSpeed + (maxScrollSpeed - minScrollSpeed) * easedProximity;
+      containerEl.scrollLeft += scrollSpeed * scrollDirection;
+
+      animationFrameId = requestAnimationFrame(autoScroll);
+    } else {
+      animationFrameId = null;
+    }
+  };
+  
   const tableDragHandler = (event) => {
     event.dataTransfer.effectAllowed = 'move'
     const copyEl = event.target.cloneNode(true);
@@ -12,16 +58,49 @@ export const useTableColumnDrag = (table, reorderableColumns) => {
     setTimeout(() => {
       document.body.removeChild(copyEl);
     }, 0);
+
+    // Initialize dragging state
+    isDragging = true;
+    if (!containerEl) {
+      containerEl = table.value?.$el?.querySelector('.p-datatable-table-container');
+    }
   }
+
+  const tableDragOverHandler = (event) => {
+    // Update mouse position
+    currentMouseX = event.clientX;
+
+    // Start animation loop if not already running
+    if (!animationFrameId && isDragging) {
+      animationFrameId = requestAnimationFrame(autoScroll);
+    }
+  };
+
+  const tableDragEndHandler = () => {
+    // Stop animation loop
+    if (animationFrameId) {
+      cancelAnimationFrame(animationFrameId);
+      animationFrameId = null;
+    }
+    isDragging = false;
+    currentMouseX = null;
+    containerEl = null;
+  };
   
   const addTableDragListener = () => {
     if (!reorderableColumns) return;
-    table.value?.$el?.addEventListener('dragstart', tableDragHandler);
+    const el = table.value?.$el;
+    el?.addEventListener('dragstart', tableDragHandler);
+    el?.addEventListener('dragover', tableDragOverHandler);
+    el?.addEventListener('dragend', tableDragEndHandler);
   }
   
   const removeTableDragListener = () => {
     if (!reorderableColumns) return;
-    table.value?.$el?.removeEventListener('dragstart', tableDragHandler);
+    const el = table.value?.$el;
+    el?.removeEventListener('dragstart', tableDragHandler);
+    el?.removeEventListener('dragover', tableDragOverHandler);
+    el?.removeEventListener('dragend', tableDragEndHandler);
   }
 
   return {

package/src/enums/FormatDateMode/FormatDateMode.ts

@@ -0,0 +1,6 @@
+export const FormatDateMode = {
+  DATE: 'date',
+  TIME: 'time',
+  DATETIME: 'datetime',
+  DATETIME_SHORT: 'datetimeShort',
+} as const;

package/src/enums/index.ts

@@ -9,6 +9,7 @@ import { ChipColor } from './ChipColor/ChipColor';
 import { ComponentSize } from './ComponentSize/ComponentSize';
 import { CrudAction } from './CrudAction/CrudAction';
 import { EmptyCause } from './EmptyCause/EmptyCause';
+import { FormatDateMode } from './FormatDateMode/FormatDateMode';
 import IconAction from './IconAction/IconAction.enum.js';
 import { IconColor } from './IconColor/IconColor';
 import { ProcessingTableColumnType } from './ProcessingTableColumnType/ProcessingTableColumnType';
@@ -38,6 +39,7 @@ export {
   CrmSections,
   CrudAction,
   EmptyCause,
+  FormatDateMode,
   IconAction,
   IconColor,
   ProcessingTableColumnType,

package/src/modules/AuditForm/components/form-answers/answer-editing-info/audit-form-answer-editing-info.vue

@@ -31,6 +31,8 @@
 </template>
 
 <script setup lang="ts">
+import { FormatDateMode } from '@webitel/ui-sdk/enums'
+import { formatDate } from '@webitel/ui-sdk/utils'
 import {computed, ref, useTemplateRef } from "vue";
 import { useI18n } from 'vue-i18n';
 import {EngineQuestionAnswer} from "webitel-sdk";
@@ -53,7 +55,7 @@ const { t } = useI18n();
 const initialComment = props.answer.comment; /* prevent editing-info change if comment is changing  */
 
 const updateTime = computed(() => {
-  return new Date(+props.answer.updatedAt).toLocaleString();
+  return formatDate(props.answer.updatedAt, FormatDateMode.DATETIME);
 });
 
 const isCommentClamped = props.collapsible && computed(() => {

package/src/scripts/prettifyTime.js

@@ -1,9 +1,13 @@
+import { FormatDateMode } from '../enums';
+import { formatDate } from '../utils';
+
 const prettifyTime = (time) => {
   let date;
   if (time instanceof Date) date = time;
   else if (typeof time === 'number') date = new Date(time);
   else date = new Date(+time);
-  return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+
+  return formatDate(date, FormatDateMode.TIME);
 };
 
 export default prettifyTime;

package/src/utils/formatDate.ts

@@ -0,0 +1,48 @@
+import type { Locale } from 'date-fns/locale';
+import { enUS, es, kk, pl, ro, ru, uk, uz, vi } from 'date-fns/locale';
+import { formatInTimeZone } from 'date-fns-tz';
+
+import { FormatDateMode } from '../enums';
+import { TIMEZONE_STORAGE_KEY } from '../modules/Userinfo/v2/constants/UserSettingsConstants';
+
+const localeMap: Record<string, Locale> = {
+  en: enUS,
+  ru: ru,
+  uk: uk,
+  es: es,
+  kz: kk,
+  pl: pl,
+  ro: ro,
+  uz: uz,
+  vi: vi,
+};
+
+function getUserTimeZone(): string {
+  return (
+    localStorage.getItem(TIMEZONE_STORAGE_KEY) ||
+    Intl.DateTimeFormat().resolvedOptions().timeZone
+  );
+}
+
+function getUserLocale(): Locale {
+  const lang = localStorage.getItem('lang') || 'en';
+  return localeMap[lang] || enUS;
+}
+
+export function formatDate(
+  date: string | number | Date,
+  to: typeof FormatDateMode[keyof typeof FormatDateMode],
+): string {
+  const timeZone = getUserTimeZone();
+  const locale = getUserLocale();
+
+  // https://date-fns.org/v4.1.0/docs/format
+  const formatStaringMap = {
+    date: 'P', //MM/DD/YYYY  11/13/2025 | DD.MM.YYYY 13.11.2025
+    time: 'p', // 3:53 PM | 15:53
+    datetime: 'Ppp', // 11/13/2025, 3:53:00 PM | 13.11.2025, 15:53:00
+    datetimeShort: 'Pp', // 11/13/2025, 3:53 PM | 13.11.2025, 15:53
+  };
+
+  return formatInTimeZone(date, timeZone, formatStaringMap[to], { locale });
+}

package/src/utils/index.ts

@@ -1 +1,2 @@
 export * from './displayText';
+export * from './formatDate';

package/types/components/wt-datepicker/wt-datepicker.vue.d.ts

@@ -9,9 +9,9 @@ declare const __VLS_component: import("vue").DefineComponent<{}, {
     value: string | number;
     required: boolean;
     label: string;
+    lang: string;
     placeholder: string;
     mode: string;
-    lang: string;
     clearable: boolean;
     v?: Record<string, any>;
     disabledDates?: Record<string, any>;
@@ -21,9 +21,9 @@ declare const __VLS_component: import("vue").DefineComponent<{}, {
         readonly value?: string | number;
         readonly required?: boolean;
         readonly label?: string;
+        readonly lang?: string;
         readonly placeholder?: string;
         readonly mode?: string;
-        readonly lang?: string;
         readonly clearable?: boolean;
         readonly v?: Record<string, any>;
         readonly disabledDates?: Record<string, any>;

package/types/enums/FormatDateMode/FormatDateMode.d.ts

@@ -0,0 +1,6 @@
+export declare const FormatDateMode: {
+    readonly DATE: "date";
+    readonly TIME: "time";
+    readonly DATETIME: "datetime";
+    readonly DATETIME_SHORT: "datetimeShort";
+};

package/types/enums/index.d.ts

@@ -8,6 +8,7 @@ import { ChipColor } from './ChipColor/ChipColor';
 import { ComponentSize } from './ComponentSize/ComponentSize';
 import { CrudAction } from './CrudAction/CrudAction';
 import { EmptyCause } from './EmptyCause/EmptyCause';
+import { FormatDateMode } from './FormatDateMode/FormatDateMode';
 import IconAction from './IconAction/IconAction.enum.js';
 import { IconColor } from './IconColor/IconColor';
 import { ProcessingTableColumnType } from './ProcessingTableColumnType/ProcessingTableColumnType';
@@ -23,4 +24,4 @@ import { WfmSections } from './WebitelApplications/WfmSections';
 import { WtApplication } from './WebitelApplications/WtApplication';
 import { WtObject } from './WtObject/WtObject';
 import { WtTypeExtensionFieldKind } from './WtTypeExtensionFieldKind/WtTypeExtensionFieldKind';
-export { AbstractUserStatus, AdminSections, AgentStatus, AuditorSections, ButtonColor, ButtonVariant, ChatGatewayProvider, ChipColor, ComponentSize, CrmSections, CrudAction, EmptyCause, IconAction, IconColor, ProcessingTableColumnType, ProviderIconType, QueueType, QueueTypeName, RelativeDatetimeValue, SupervisorSections, TypesExportedSettings, WebitelApplications, WfmSections, WtApplication, WtObject, WtTypeExtensionFieldKind, };
+export { AbstractUserStatus, AdminSections, AgentStatus, AuditorSections, ButtonColor, ButtonVariant, ChatGatewayProvider, ChipColor, ComponentSize, CrmSections, CrudAction, EmptyCause, FormatDateMode, IconAction, IconColor, ProcessingTableColumnType, ProviderIconType, QueueType, QueueTypeName, RelativeDatetimeValue, SupervisorSections, TypesExportedSettings, WebitelApplications, WfmSections, WtApplication, WtObject, WtTypeExtensionFieldKind, };

package/types/utils/formatDate.d.ts

@@ -0,0 +1,2 @@
+import { FormatDateMode } from '../enums';
+export declare function formatDate(date: string | number | Date, to: typeof FormatDateMode[keyof typeof FormatDateMode]): string;

package/types/utils/index.d.ts

@@ -1 +1,2 @@
 export * from './displayText';
+export * from './formatDate';