@webitel/ui-sdk 26.8.62 → 26.8.64

package/dist/{wt-time-input-BEBrSugB.js → wt-time-input-Ds40EseE.js}

@@ -49,6 +49,8 @@ var o = /* @__PURE__ */ t({
 				max: t.maxValue,
 				min: t.minValue,
 				v: t.v,
+				"regle-validation": t.regleValidation,
+				"custom-validators": t.customValidators,
 				required: t.required,
 				disabled: t.disabled,
 				"hide-input-info": t.hideInputInfo
@@ -60,6 +62,8 @@ var o = /* @__PURE__ */ t({
 				"max",
 				"min",
 				"v",
+				"regle-validation",
+				"custom-validators",
 				"required",
 				"disabled",
 				"hide-input-info"

package/dist/{wt-timepicker-BhTfiWhA.js → wt-timepicker-BltIOjh9.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
-import { l as t, r as n } from "./enums-DY3jIXFF.js";
-import { t as r } from "./vue-i18n-Db_oYfO8.js";
-import { t as i } from "./useValidation-Bvastl-C.js";
+import { l as t, r as n } from "./enums-CM8hOd_m.js";
+import { t as r } from "./vue-i18n-DNulhn2J.js";
+import { t as i } from "./useValidation-CDgb424A.js";
 import { computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, defineComponent as d, guardReactiveProps as f, mergeProps as p, nextTick as m, normalizeClass as h, normalizeProps as g, openBlock as _, renderSlot as v, resolveComponent as y, toDisplayString as b, toRefs as x, unref as S, withCtx as C } from "vue";
 //#region src/components/wt-timepicker/wt-timepicker.vue?vue&type=script&setup=true&lang.ts
 var w = { class: "wt-timepicker__wrapper" }, T = 3600, E = 60, D = /*#__PURE__*/ e(/* @__PURE__ */ d({
@@ -92,13 +92,17 @@ var w = { class: "wt-timepicker__wrapper" }, T = 3600, E = 60, D = /*#__PURE__*/
 						disabled: e.disabled,
 						label: B.value,
 						v: S(A),
+						"regle-validation": S(M),
+						"custom-validators": S(j),
 						"hide-input-info": "",
 						onBlur: q
 					}, null, 8, [
 						"model-value",
 						"disabled",
 						"label",
-						"v"
+						"v",
+						"regle-validation",
+						"custom-validators"
 					])) : s("", !0),
 					R.value ? (_(), o(d, {
 						key: 1,
@@ -109,13 +113,17 @@ var w = { class: "wt-timepicker__wrapper" }, T = 3600, E = 60, D = /*#__PURE__*/
 						"min-value": U.value ? -1 : 0,
 						"max-value": 60,
 						v: S(A),
+						"regle-validation": S(M),
+						"custom-validators": S(j),
 						"hide-input-info": ""
 					}, null, 8, [
 						"model-value",
 						"disabled",
 						"label",
 						"min-value",
-						"v"
+						"v",
+						"regle-validation",
+						"custom-validators"
 					])) : s("", !0),
 					z.value ? (_(), o(d, {
 						key: 2,
@@ -126,13 +134,17 @@ var w = { class: "wt-timepicker__wrapper" }, T = 3600, E = 60, D = /*#__PURE__*/
 						"min-value": W.value ? -1 : 0,
 						"max-value": 60,
 						v: S(A),
+						"regle-validation": S(M),
+						"custom-validators": S(j),
 						"hide-input-info": ""
 					}, null, 8, [
 						"model-value",
 						"disabled",
 						"label",
 						"min-value",
-						"v"
+						"v",
+						"regle-validation",
+						"custom-validators"
 					])) : s("", !0)
 				]),
 				S(N) && S(F) ? (_(), o(m, {
@@ -151,6 +163,6 @@ var w = { class: "wt-timepicker__wrapper" }, T = 3600, E = 60, D = /*#__PURE__*/
 			], 2);
 		};
 	}
-}), [["__scopeId", "data-v-eec20219"]]);
+}), [["__scopeId", "data-v-5c9f2a80"]]);
 //#endregion
 export { D as default };

package/dist/{wt-toast-eWzfeYuz.js → wt-toast-DHV4UvFz.js}

@@ -1,5 +1,5 @@
-import { t as e } from "./wt-icon-Ct0E7k_d.js";
-import { i as t, l as n } from "./enums-DY3jIXFF.js";
+import { t as e } from "./wt-icon-CjNYdMOP.js";
+import { i as t, l as n } from "./enums-CM8hOd_m.js";
 import { Fragment as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, guardReactiveProps as u, normalizeProps as d, normalizeStyle as f, openBlock as p, resolveComponent as m, toDisplayString as h, unref as g, useAttrs as _, withCtx as v } from "vue";
 //#region node_modules/mitt/dist/mitt.mjs
 function y(e) {

package/dist/{wt-tree-CMIpbXBo.js → wt-tree-DKSphRxr.js}

@@ -1,9 +1,9 @@
-import { a as e, t } from "./rolldown-runtime-BEcgMyyN.js";
-import { n, t as r } from "./dist-CAOIU8xq.js";
-import { n as i, t as a } from "./dist-Crpfx4FA.js";
+import { o as e, t } from "./rolldown-runtime-to5KK-CW.js";
+import { n, t as r } from "./dist-C_fngTiN.js";
+import { n as i, t as a } from "./dist-CugChoYz.js";
 import { t as o } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { t as s } from "./wt-expand-transition-C2p9bR4j.js";
-import { _ as c, a as l, c as u, d, f, g as p, h as m, i as h, l as g, m as _, n as v, o as y, p as b, r as x, s as S, t as C, u as w } from "./side-channel-8SnAuRMA.js";
+import { _ as c, a as l, c as u, d, f, g as p, h as m, i as h, l as g, m as _, n as v, o as y, p as b, r as x, s as S, t as C, u as w } from "./side-channel-M3LABDql.js";
 import { Fragment as T, computed as E, createBlock as D, createCommentVNode as O, createElementBlock as k, createElementVNode as A, createSlots as j, createVNode as M, defineComponent as N, guardReactiveProps as P, normalizeClass as F, normalizeProps as I, onMounted as L, openBlock as R, ref as z, renderList as B, renderSlot as V, resolveComponent as H, toDisplayString as U, unref as W, vShow as ee, watch as te, withCtx as G, withDirectives as ne } from "vue";
 //#region node_modules/object-keys/isArguments.js
 var re = /* @__PURE__ */ t(((e, t) => {

package/dist/{wt-tree-table-C-UM5kxp.js → wt-tree-table-9vnEJcX0.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { n as t } from "./sortQueryAdapters-CyYXvnDN.js";
-import { n, t as r } from "./wt-icon-btn-DZa_qsai.js";
-import { t as i } from "./useWtTable-DLWucXPx.js";
+import { n, t as r } from "./wt-icon-btn-BbPNcD-O.js";
+import { t as i } from "./useWtTable-BbNT2rXz.js";
 import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createSlots as d, createTextVNode as f, createVNode as p, defineComponent as m, normalizeClass as h, normalizeStyle as g, onMounted as _, openBlock as v, ref as y, renderList as b, renderSlot as x, resolveComponent as S, toDisplayString as C, toRef as w, unref as T, withCtx as E, withModifiers as D } from "vue";
 //#region src/components/wt-tree-table-row/wt-tree-table-row.vue?vue&type=script&setup=true&lang.ts
 var O = { class: "wt-tree-table-td__content" }, k = {

package/dist/{wt-type-extension-value-input-BWUyeiLM.js → wt-type-extension-value-input-t0VfexsE.js}

@@ -1,7 +1,7 @@
-import { t as e } from "./clients-DhLhM1vv.js";
-import { a as t, o as n, r, s as i } from "./components-B78DPWWV.js";
-import { t as a } from "./enums-DY3jIXFF.js";
-import { t as o } from "./vue-i18n-Db_oYfO8.js";
+import { a as e, o as t, r as n, s as r } from "./components-0bFcL-uW.js";
+import { t as i } from "./clients-CB9U4xyd.js";
+import { t as a } from "./enums-CM8hOd_m.js";
+import { t as o } from "./vue-i18n-DNulhn2J.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";
 //#endregion
 //#region src/components/on-demand/wt-type-extension-value-input/wt-type-extension-value-input.vue
@@ -34,11 +34,11 @@ var y = /* @__PURE__ */ d({
 			searchMethod: O(y.field.lookup)
 		})), E = s(() => ({ ...T.value })), D = (e) => {
 			f.value = e;
-		}, O = ({ path: t = "", display: n = "", primary: r = "" } = {}) => (i) => e.getLookup({
-			...i,
-			path: t,
-			display: n,
-			primary: r
+		}, O = ({ path: e = "", display: t = "", primary: n = "" } = {}) => (r) => i.getLookup({
+			...r,
+			path: e,
+			display: t,
+			primary: n
 		}), k = (e) => {
 			let t = e ?? {};
 			if (Object.values(t).length === 0) return D(null);
@@ -52,7 +52,7 @@ var y = /* @__PURE__ */ d({
 				name: e.name
 			})));
 		};
-		return (e, o) => {
+		return (i, o) => {
 			let s = g("wt-input-text"), f = g("wt-input-number");
 			return d.field.kind === _(a).Text ? (m(), c(s, p({ key: 0 }, w.value, {
 				"model-value": C.value,
@@ -60,44 +60,44 @@ var y = /* @__PURE__ */ d({
 			}), null, 16, ["model-value"])) : d.field.kind === _(a).Number ? (m(), c(f, p({ key: 1 }, w.value, {
 				"model-value": C.value,
 				"onUpdate:modelValue": D
-			}), null, 16, ["model-value"])) : d.field.kind === _(a).Boolean ? h(e.$slots, _(a).Boolean, {
+			}), null, 16, ["model-value"])) : d.field.kind === _(a).Boolean ? h(i.$slots, _(a).Boolean, {
 				key: 2,
 				defaultProps: { ...w.value }
-			}, () => [u(_(t), p(w.value, {
+			}, () => [u(_(e), p(w.value, {
 				"model-value": C.value,
 				"onUpdate:modelValue": D
-			}), null, 16, ["model-value"])]) : d.field.kind === _(a).Select ? h(e.$slots, _(a).Select, {
+			}), null, 16, ["model-value"])]) : d.field.kind === _(a).Select ? h(i.$slots, _(a).Select, {
 				key: 3,
 				defaultProps: {
 					...w.value,
 					...T.value,
 					value: C.value
 				}
-			}, () => [u(_(n), p(w.value, {
+			}, () => [u(_(t), p(w.value, {
 				"model-value": C.value,
 				"search-method": O(d.field.lookup),
 				"data-key": "id",
 				"onUpdate:modelValue": k
-			}), null, 16, ["model-value", "search-method"])]) : d.field.kind === _(a).Multiselect ? h(e.$slots, _(a).Multiselect, {
+			}), null, 16, ["model-value", "search-method"])]) : d.field.kind === _(a).Multiselect ? h(i.$slots, _(a).Multiselect, {
 				key: 4,
 				defaultProps: {
 					...w.value,
 					...E.value,
 					value: C.value
 				}
-			}, () => [u(_(i), p({
+			}, () => [u(_(r), p({
 				...w.value,
 				...E.value
 			}, {
 				"model-value": C.value,
 				"onUpdate:modelValue": A
-			}), null, 16, ["model-value"])]) : d.field.kind === _(a).Calendar ? h(e.$slots, _(a).Calendar, {
+			}), null, 16, ["model-value"])]) : d.field.kind === _(a).Calendar ? h(i.$slots, _(a).Calendar, {
 				key: 5,
 				defaultProps: {
 					...w.value,
 					value: C.value
 				}
-			}, () => [u(_(r), p(w.value, {
+			}, () => [u(_(n), p(w.value, {
 				"model-value": C.value,
 				"show-time": "",
 				"onUpdate:modelValue": D

package/dist/{wt-vidstack-player-C3MwI4DL.js → wt-vidstack-player-C3Rh5v9F.js}

@@ -1,8 +1,8 @@
-import { D as e } from "./components-B78DPWWV.js";
+import { k as e } from "./components-0bFcL-uW.js";
 import { t } from "./_plugin-vue_export-helper-B3ysoDQm.js";
-import { l as n } from "./enums-DY3jIXFF.js";
-import "./wt-button-2_aOV7LX.js";
-import { t as r } from "./wt-icon-btn-DZa_qsai.js";
+import { l as n } from "./enums-CM8hOd_m.js";
+import "./wt-button-l_CCN7zG.js";
+import { t as r } from "./wt-icon-btn-BbPNcD-O.js";
 import { $ as i, C as a, D as o, F as s, G as c, H as l, I as u, J as d, K as f, L as p, M as m, N as h, O as ee, P as te, Q as g, R as ne, S as _, U as re, V as v, W as y, X as b, Y as ie, Z as x, _ as S, a as ae, b as oe, c as se, d as ce, et as le, f as ue, g as de, h as fe, i as C, it as pe, j as me, k as he, l as w, m as ge, n as T, nt as E, o as D, ot as _e, p as O, q as k, r as A, rt as ve, t as ye, tt as be, u as xe, v as j, w as Se, y as Ce, z as we } from "./vidstack-D9mvYVIz-DesuYgKV.js";
 import { _ as M, a as Te, c as Ee, d as De, f as Oe, g as ke, h as Ae, i as je, l as Me, m as Ne, n as Pe, o as Fe, p as Ie, r as Le, s as Re, t as N, u as ze } from "./vidstack-CgfrU1hS-CNTJkyzm.js";
 import { _ as Be, a as Ve, c as He, f as Ue, g as We, h as Ge, i as Ke, l as qe, n as Je, r as Ye, s as Xe, t as Ze, u as Qe, v as $e, x as et, y as tt } from "./useVidstackSrc-aQcqC_v0.js";
@@ -13,7 +13,7 @@ import { a as ot, i as st, n as I, o as ct, r as L, t as lt } from "./vidstack-D
 import { t as R } from "./vidstack-_E7LrUjK-DaCLs8ge.js";
 import { n as ut, t as dt } from "./vidstack-CDOoBnJL-BCwLE1fB.js";
 import { i as ft, n as pt, r as mt, t as ht } from "./vidstack-CdfyZegh-Bn47J4h6.js";
-import { t as gt } from "./wt-slider-BPzRTeYU.js";
+import { t as gt } from "./wt-slider-4xCDNWv-.js";
 import { computed as _t, createBlock as vt, createCommentVNode as yt, createElementBlock as bt, createElementVNode as z, createSlots as xt, createVNode as B, defineComponent as St, inject as Ct, normalizeClass as wt, onBeforeUnmount as Tt, onMounted as Et, openBlock as V, provide as Dt, ref as Ot, renderSlot as H, resolveComponent as kt, toDisplayString as At, toRefs as jt, unref as U, useTemplateRef as Mt, withCtx as Nt } from "vue";
 //#region node_modules/vidstack/prod/chunks/vidstack-CYE89tBD.js
 var Pt = ge();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-sdk",
-	"version": "26.8.62",
+	"version": "26.8.64",
 	"private": false,
 	"scripts": {
 		"dev": "npm run docs:dev",
@@ -351,6 +351,10 @@
 			"types": "./types/modules/Userinfo/index.d.ts",
 			"import": "./src/modules/Userinfo/index.ts"
 		},
+		"./modules/Appearance": {
+			"types": "./types/modules/Appearance/index.d.ts",
+			"import": "./src/modules/Appearance/index.ts"
+		},
 		"./modules/ObjectPermissions": {
 			"types": "./types/modules/ObjectPermissions/index.d.ts",
 			"import": "./src/modules/ObjectPermissions/index.ts"

package/src/components/on-demand/wt-type-extension-value-input/wt-type-extension-value-input.vue

@@ -111,7 +111,7 @@ const props = defineProps<{
 
 const { t } = useI18n();
 
-const computedLabel = computed(() => {
+const resolvedLabel = computed(() => {
 	return props.label || t(props.field?.name || 'vocabulary.labels');
 });
 
@@ -125,7 +125,7 @@ const value = computed<any>(() => {
 });
 
 const sharedChildrenProps = computed(() => ({
-	label: computedLabel.value,
+	label: resolvedLabel.value,
 	required: isRequired.value,
 	v: props.v,
 }));

package/src/components/wt-time-input/wt-time-input.vue

@@ -7,6 +7,8 @@
     :max="maxValue"
     :min="minValue"
 		:v="v"
+    :regle-validation="regleValidation"
+    :custom-validators="customValidators"
     :required="required"
     :disabled="disabled"
     :hide-input-info="hideInputInfo"

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

@@ -36,6 +36,8 @@
         :disabled="disabled"
         :label="labelHours"
         :v="v"
+        :regle-validation="regleValidation"
+        :custom-validators="customValidators"
         hide-input-info
         @blur="onHoursBlurEvent"
       />
@@ -47,6 +49,8 @@
         :min-value="hour ? -1 : 0"
         :max-value="60"
         :v="v"
+        :regle-validation="regleValidation"
+        :custom-validators="customValidators"
         hide-input-info
       />
       <wt-time-input
@@ -57,6 +61,8 @@
         :min-value="min ? -1 : 0"
         :max-value="60"
         :v="v"
+        :regle-validation="regleValidation"
+        :custom-validators="customValidators"
         hide-input-info
       />
     </div>

package/src/modules/Appearance/index.ts

@@ -0,0 +1,2 @@
+export { default as WtDarkModeSwitcher } from './components/wt-dark-mode-switcher.vue';
+export { createAppearanceStore } from './pinia/store/AppearanceStore';

package/src/scripts/convertDurationWithDays.ts

@@ -0,0 +1,30 @@
+export const convertDurationWithDays = (
+	duration: number,
+	timerFormatting = false,
+): string => {
+	if (!duration && !timerFormatting) return '00:00:00';
+
+	// Convert milliseconds to seconds because if timerFormatting is true, duration is in milliseconds
+	const totalSeconds = timerFormatting
+		? Math.abs(Number(duration)) / 1000
+		: Math.abs(Number(duration));
+
+	const isNegative = duration < 0;
+
+	const days = Math.floor(totalSeconds / (24 * 60 * 60));
+	const hours = Math.floor((totalSeconds % (24 * 60 * 60)) / (60 * 60));
+	const minutes = Math.floor((totalSeconds % (60 * 60)) / 60);
+
+	if (timerFormatting) {
+		// Format: "Xd Xh Xm"
+		const formatted = `${days}d ${hours}h ${minutes}m`;
+		return isNegative ? `- ${formatted}` : formatted;
+	} else {
+		// Format: "DD:HH:MM" with manual zero-padding
+		const paddedDays = days < 10 ? `0${days}` : `${days}`;
+		const paddedHours = hours < 10 ? `0${hours}` : `${hours}`;
+		const paddedMinutes = minutes < 10 ? `0${minutes}` : `${minutes}`;
+		const formatted = `${paddedDays}:${paddedHours}:${paddedMinutes}`;
+		return isNegative ? `-${formatted}` : formatted;
+	}
+};

package/src/scripts/index.js

@@ -17,6 +17,7 @@ import {
 	smallerThen as sizeSmallerThen,
 } from './compareSize.ts';
 import convertDuration from './convertDuration.js';
+import { convertDurationWithDays } from './convertDurationWithDays';
 import debounce from './debounce.js';
 import downloadFile from './downloadFile/downloadFile';
 import eventBus from './eventBus.js';
@@ -37,6 +38,11 @@ import {
 	queryToSortAdapter,
 	sortToQueryAdapter,
 } from './sortQueryAdapters.js';
+import { downloadFilesAsZip } from './storageFile/downloadFilesAsZip';
+import { downloadStorageFile } from './storageFile/downloadStorageFile';
+import { getFileTypeIcon } from './storageFile/getFileTypeIcon';
+import { getStorageFileUrl } from './storageFile/getStorageFileUrl';
+import { openStorageFileInNewTab } from './storageFile/openStorageFileInNewTab';
 import updateObject from './updateObject.js';
 
 export {
@@ -44,13 +50,18 @@ export {
 	camelToSnake,
 	compareSize,
 	convertDuration,
+	convertDurationWithDays,
 	debounce,
 	downloadFile,
+	downloadFilesAsZip,
+	downloadStorageFile,
 	eventBus,
 	getConnectionQuality,
 	getEndOfDay,
+	getFileTypeIcon,
 	getNextSortOrder,
 	getStartOfDay,
+	getStorageFileUrl,
 	isEmpty,
 	isRelativeDatetimeValue,
 	kebabToCamel,
@@ -59,6 +70,7 @@ export {
 	objCamelToKebab,
 	objCamelToSnake,
 	objSnakeToCamel,
+	openStorageFileInNewTab,
 	prettifyFileSize,
 	prettifyTime,
 	preventHiddenPageCallsDecorator,

package/src/scripts/storageFile/downloadFilesAsZip.ts

@@ -0,0 +1,55 @@
+import { saveAs } from 'file-saver-es';
+import JSZip from 'jszip';
+
+interface FileToDownload {
+	id: string;
+	name: string;
+}
+
+interface DownloadFilesAsZipParams {
+	filesToDownload: FileToDownload[];
+	apiUrl: string;
+	token: string;
+}
+
+export const downloadFilesAsZip = async ({
+	filesToDownload,
+	apiUrl,
+	token,
+}: DownloadFilesAsZipParams) => {
+	if (!filesToDownload?.length) return;
+
+	const zip = new JSZip();
+
+	const filePromises = filesToDownload.map(async (item) => {
+		const { id, name } = item;
+		const fileUrl = `${apiUrl}/storage/file/${id}/download?access_token=${token}`;
+
+		try {
+			const response = await fetch(fileUrl);
+			if (!response.ok) throw new Error(`Failed to download ${name}`);
+
+			const blob = await response.blob();
+			zip.file(name, blob, {
+				binary: true,
+			});
+		} catch (error) {
+			throw new Error(`Failed to download ${name}`, {
+				cause: error,
+			});
+		}
+	});
+
+	await Promise.all(filePromises);
+
+	try {
+		const zipBlob = await zip.generateAsync({
+			type: 'blob',
+		});
+		saveAs(zipBlob, 'files.zip');
+	} catch (error) {
+		throw new Error('Failed to create ZIP file', {
+			cause: error,
+		});
+	}
+};

package/src/scripts/storageFile/downloadStorageFile.ts

@@ -0,0 +1,27 @@
+import { getStorageFileUrl } from './getStorageFileUrl';
+
+interface DownloadStorageFileParams {
+	id?: string;
+	name?: string;
+	type?: string;
+	url?: string;
+}
+
+export const downloadStorageFile = ({
+	id,
+	name,
+	type,
+	url,
+}: DownloadStorageFileParams) => {
+	const a = document.createElement('a');
+
+	a.href =
+		url ||
+		getStorageFileUrl({
+			id: id as string,
+			type,
+		});
+	a.target = '_blank';
+	a.download = name ?? '';
+	a.click();
+};

package/src/scripts/storageFile/getFileTypeIcon.ts

@@ -0,0 +1,6 @@
+export const getFileTypeIcon = (mimeType: string): string => {
+	if (mimeType.includes('image')) return 'preview-tag-image';
+	if (mimeType.includes('video')) return 'preview-tag-video';
+	if (mimeType.includes('audio')) return 'preview-tag-audio';
+	return 'attach';
+};

package/src/scripts/storageFile/getStorageFileUrl.ts

@@ -0,0 +1,17 @@
+interface GetStorageFileUrlParams {
+	id: string;
+	type?: string;
+}
+
+export const getStorageFileUrl = ({
+	id,
+	type,
+}: GetStorageFileUrlParams): string => {
+	const token = localStorage.getItem('access-token');
+	let url = `${import.meta.env.VITE_API_URL}/storage/file/${id}/download?access_token=${token}`;
+
+	const source = type?.match(/source=[^;]+/)?.[0];
+	if (source) url = `${url}&${source}`;
+
+	return url;
+};

package/src/scripts/storageFile/openStorageFileInNewTab.ts

@@ -0,0 +1,34 @@
+import { getStorageFileUrl } from './getStorageFileUrl';
+
+interface OpenStorageFileInNewTabParams {
+	id?: string;
+}
+
+export const openStorageFileInNewTab = async (
+	item?: OpenStorageFileInNewTabParams,
+) => {
+	if (!item?.id) return;
+
+	// opened synchronously, before the awaits below, so browsers don't
+	// treat it as a blocked popup once the user-gesture context is gone
+	const newTab = window.open('', '_blank');
+
+	try {
+		const url = getStorageFileUrl({
+			id: item.id,
+		});
+
+		const response = await fetch(url);
+		if (!response.ok) {
+			throw new Error(`Failed to fetch file: ${response.statusText}`);
+		}
+
+		const blob = await response.blob();
+		const fileURL = URL.createObjectURL(blob);
+
+		if (newTab) newTab.location.href = fileURL;
+	} catch (error) {
+		newTab?.close();
+		console.error('Error opening file:', error);
+	}
+};

package/src/utils/index.ts

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

package/src/utils/prettifyDate.ts

@@ -0,0 +1,14 @@
+import { FormatDateMode } from '../enums';
+import { formatDate } from './formatDate';
+
+export function prettifyDate(
+	timestamp: string | number,
+	timezone?: string,
+): string {
+	const value = Number(timestamp);
+	if (!value) return '';
+
+	return formatDate(new Date(value), FormatDateMode.DATETIME_SHORT, {
+		timezone,
+	});
+}