@webitel/ui-sdk 26.8.119 → 26.8.121

package/dist/{wt-chat-emoji-RHMx_k1y.js → wt-chat-emoji-CQ-ZUYcm.js}

@@ -1,4 +1,4 @@
-import "./components-jZ2GzWbv.js";
+import "./components-Bl2fDyms.js";
 import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { m as t } from "./enums-CsINFPBu.js";
 import { t as n } from "./wt-button-rUZKbswL.js";

package/dist/{wt-display-chip-items-D_iKQXSB.js → wt-display-chip-items-yuaxgXrU.js}

@@ -1,4 +1,4 @@
-import { C as e, i as t } from "./components-jZ2GzWbv.js";
+import { C as e, i as t } from "./components-Bl2fDyms.js";
 import { t as n } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { t as r } from "./utils-DHSDTqJG.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-label-CiLpqe61.js

@@ -0,0 +1,34 @@
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { createBlock as t, createCommentVNode as n, createElementBlock as r, createStaticVNode as i, createTextVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, renderSlot as l, resolveComponent as u, toDisplayString as d, withCtx as f } from "vue";
+//#region src/components/on-demand/wt-rich-text-editor/_internals/wt-rich-text-editor-skeleton.vue
+var p = {}, m = {
+	"aria-busy": "true",
+	class: "wt-rich-text-editor-skeleton"
+};
+function h(e, t) {
+	return c(), r("div", m, [...t[0] ||= [i("<div class=\"wt-rich-text-editor-skeleton__toolbar\" data-v-0802d94d></div><div class=\"wt-rich-text-editor-skeleton__body\" data-v-0802d94d><div class=\"wt-rich-text-editor-skeleton__line\" data-v-0802d94d></div><div class=\"wt-rich-text-editor-skeleton__line\" data-v-0802d94d></div><div class=\"wt-rich-text-editor-skeleton__line wt-rich-text-editor-skeleton__line--short\" data-v-0802d94d></div></div>", 2)]]);
+}
+var g = /*#__PURE__*/ e(p, [["render", h], ["__scopeId", "data-v-0802d94d"]]), _ = /*#__PURE__*/ e(/* @__PURE__ */ o({
+	__name: "wt-label",
+	props: {
+		disabled: { type: Boolean },
+		invalid: { type: Boolean },
+		required: { type: Boolean },
+		hint: {}
+	},
+	setup(e) {
+		return (i, o) => {
+			let p = u("wt-hint");
+			return c(), r("label", { class: s([{
+				"wt-label--invalid": e.invalid,
+				"wt-label--disabled": e.disabled,
+				"wt-label--required": e.required
+			}, "wt-label typo-subtitle-2"]) }, [l(i.$slots, "default", {}, void 0, !0), e.hint ? (c(), t(p, { key: 0 }, {
+				default: f(() => [a(d(e.hint), 1)], void 0, !0),
+				_: 1
+			})) : n("", !0)], 2);
+		};
+	}
+}), [["__scopeId", "data-v-7d80b998"]]);
+//#endregion
+export { g as n, _ as t };

package/dist/wt-rich-text-editor-DyGnGabB.js

@@ -0,0 +1,130 @@
+import { n as e, t } from "./wt-label-CiLpqe61.js";
+import { t as n } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createTextVNode as s, defineComponent as c, guardReactiveProps as l, mergeModels as u, mergeProps as d, normalizeProps as f, onBeforeUnmount as p, openBlock as m, ref as h, renderSlot as g, toDisplayString as _, unref as v, useId as y, useModel as b, withCtx as x } from "vue";
+import S from "@tinymce/tinymce-vue";
+//#region src/components/on-demand/wt-rich-text-editor/_internals/loadTinyMce.ts
+var C = null;
+function w() {
+	return C ??= import("tinymce/tinymce").then(() => Promise.all([
+		import("tinymce/icons/default"),
+		import("tinymce/models/dom"),
+		import("tinymce/themes/silver"),
+		import("tinymce/plugins/advlist"),
+		import("tinymce/plugins/emoticons"),
+		import("tinymce/plugins/emoticons/js/emojis"),
+		import("tinymce/plugins/fullscreen"),
+		import("tinymce/plugins/image"),
+		import("tinymce/plugins/link"),
+		import("tinymce/plugins/lists"),
+		import("tinymce/plugins/table"),
+		import("tinymce/skins/ui/oxide/skin.css")
+	]).then(() => void 0)), C;
+}
+//#endregion
+//#region src/components/on-demand/wt-rich-text-editor/wt-rich-text-editor.vue?vue&type=script&setup=true&lang.ts
+var T = { class: "wt-rich-text-editor" }, E = /*#__PURE__*/ n(/* @__PURE__ */ c({
+	compatConfig: { MODE: 3 },
+	__name: "wt-rich-text-editor",
+	props: /*@__PURE__*/ u({
+		label: {},
+		labelProps: {},
+		output: { default: "html" },
+		height: { default: 300 },
+		disabled: { type: Boolean },
+		placeholder: {},
+		toolbar: {},
+		plugins: {}
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(n) {
+		let c = {
+			...S,
+			name: "TinyMceEditor",
+			compatConfig: { MODE: 3 }
+		}, u = n, C = b(n, "modelValue"), E = y(), D = h(!1);
+		w().then(() => {
+			D.value = !0;
+		});
+		let O = [
+			"advlist",
+			"emoticons",
+			"fullscreen",
+			"image",
+			"link",
+			"lists",
+			"table"
+		], k = [
+			"undo redo",
+			"bold italic underline strikethrough",
+			"fullscreen",
+			"fontfamily fontsize",
+			"alignleft aligncenter alignright alignjustify",
+			"numlist bullist",
+			"forecolor backcolor removeformat",
+			"emoticons image link table"
+		].join(" | "), A = r(() => u.output === "html"), j = r(() => u.plugins ?? (A.value ? O : [])), M = r(() => u.toolbar ?? (A.value ? k : "undo redo"));
+		function N() {
+			let e = getComputedStyle(document.documentElement);
+			return {
+				backgroundColor: e.getPropertyValue("--content-wrapper-color").trim(),
+				color: e.getPropertyValue("--wt-text-field-text-color").trim()
+			};
+		}
+		let P = r(() => {
+			let { backgroundColor: e, color: t } = N();
+			return {
+				height: Number(u.height),
+				menubar: !1,
+				statusbar: A.value,
+				toolbar_mode: "sliding",
+				toolbar_sticky: !0,
+				placeholder: u.placeholder,
+				skin: !1,
+				content_css: !1,
+				content_style: `body { background-color: ${e}; color: ${t}; }`
+			};
+		}), F = null, I = new MutationObserver(() => {
+			F?.getBody() && F.dom.setStyles(F.getBody(), N());
+		});
+		function L(e, t) {
+			F = t, I.observe(document.documentElement, {
+				attributes: !0,
+				attributeFilter: ["class"]
+			});
+		}
+		return p(() => {
+			I.disconnect(), F = null;
+		}), (r, u) => (m(), o("div", T, [n.label || r.$slots.label ? (m(), i(t, d({ key: 0 }, n.labelProps, {
+			disabled: n.disabled,
+			for: v(E)
+		}), {
+			default: x(() => [g(r.$slots, "label", f(l({ label: n.label })), () => [s(_(n.label), 1)], !0)], void 0, !0),
+			_: 3
+		}, 16, ["disabled", "for"])) : a("", !0), D.value ? (m(), i(c, {
+			key: 1,
+			id: v(E),
+			modelValue: C.value,
+			"onUpdate:modelValue": u[0] ||= (e) => C.value = e,
+			disabled: n.disabled,
+			init: P.value,
+			"output-format": n.output,
+			plugins: j.value,
+			toolbar: M.value,
+			"license-key": "gpl",
+			onInit: L
+		}, null, 8, [
+			"id",
+			"modelValue",
+			"disabled",
+			"init",
+			"output-format",
+			"plugins",
+			"toolbar"
+		])) : (m(), i(e, { key: 2 }))]));
+	}
+}), [["__scopeId", "data-v-47d8ed9a"]]);
+//#endregion
+export { E as default };

package/dist/{wt-send-message-popup-B2lqrtGF.js → wt-send-message-popup-Ig3Uq6So.js}

@@ -1,6 +1,6 @@
-import { n as e } from "./components-jZ2GzWbv.js";
+import { n as e } from "./components-Bl2fDyms.js";
 import "./convertDuration-CW5qzlwH.js";
-import { i as t, r as n } from "./clients-CjVXyqY8.js";
+import { i as t, r as n } from "./clients-CwGTZ_pb.js";
 import { n as r } from "./vue-i18n-VBiROMZ4.js";
 import { n as i } from "./useEventBus-B-ZeklLu.js";
 import { createBlock as a, createTextVNode as o, createVNode as s, defineComponent 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-CJWynqhC.js → wt-type-extension-value-input-B4fjVEic.js}

@@ -1,8 +1,8 @@
 import { a as e, c as t, i as n, n as r, r as i, s as a, t as o } from "./dist-EXdgfpvN.js";
 import { n as s } from "./genClient-CvWlQ0TZ.js";
 import { a as c } from "./caseConverters-DGri4uJo.js";
-import { a as l, o as u, r as d, s as f } from "./components-jZ2GzWbv.js";
-import { a as p, n as m, t as h } from "./clients-CjVXyqY8.js";
+import { a as l, o as u, r as d, s as f } from "./components-Bl2fDyms.js";
+import { a as p, n as m, t as h } from "./clients-CwGTZ_pb.js";
 import { a as g, b as _, d as v, f as y, g as b, i as x, n as S, o as C, r as w, s as T, t as E, y as D } from "./enums-CsINFPBu.js";
 import { n as ee, t as te } from "./vue-i18n-VBiROMZ4.js";
 import "./wt-toast-pXV44Y3v.js";

package/dist/{wt-vidstack-player-BL6xL6yo.js → wt-vidstack-player-DitE8XQx.js}

@@ -1,4 +1,4 @@
-import { w as e } from "./components-jZ2GzWbv.js";
+import { w as e } from "./components-Bl2fDyms.js";
 import "./convertDuration-CW5qzlwH.js";
 import { t } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { m as n } from "./enums-CsINFPBu.js";

package/package.json

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

package/src/components/on-demand/wt-rich-text-editor/__tests__/WtRichTextEditor.compat.spec.js

@@ -59,7 +59,7 @@ const { default: WtRichTextEditor } = await import(
 	'../wt-rich-text-editor.vue'
 );
 
-function render(component, props) {
+async function render(component, props) {
 	const app = createApp({
 		render: () => h(component, props),
 	});
@@ -68,6 +68,8 @@ function render(component, props) {
 		render: () => null,
 	});
 	app.mount(document.createElement('div'));
+	// the editor mounts once TinyMCE has loaded (mocked here: at once)
+	await new Promise((resolve) => setTimeout(resolve));
 	return app;
 }
 
@@ -89,27 +91,31 @@ describe('WtRichTextEditor on @vue/compat', () => {
 		seenModel.length = 0;
 	});
 
-	it('control: compat takes the model listener away from plain tinymce-vue', () => {
-		render(TinyMceVueEditor, {
-			modelValue: '',
-			'onUpdate:modelValue': () => {},
-		}).unmount();
+	it('control: compat takes the model listener away from plain tinymce-vue', async () => {
+		(
+			await render(TinyMceVueEditor, {
+				modelValue: '',
+				'onUpdate:modelValue': () => {},
+			})
+		).unmount();
 
 		expect(seenAttrs[0]).not.toContain('onUpdate:modelValue');
 	});
 
-	it('keeps the model listener on its editor', () => {
-		render(WtRichTextEditor, {
-			modelValue: '',
-			'onUpdate:modelValue': () => {},
-		}).unmount();
+	it('keeps the model listener on its editor', async () => {
+		(
+			await render(WtRichTextEditor, {
+				modelValue: '',
+				'onUpdate:modelValue': () => {},
+			})
+		).unmount();
 
 		expect(seenAttrs[0]).toContain('onUpdate:modelValue');
 	});
 
-	it('takes its own v-model on compat: the value in, edits out', () => {
+	it('takes its own v-model on compat: the value in, edits out', async () => {
 		const onUpdate = vi.fn();
-		render(WtRichTextEditor, {
+		await render(WtRichTextEditor, {
 			modelValue: '<p>Seed</p>',
 			'onUpdate:modelValue': onUpdate,
 		});

package/src/components/on-demand/wt-rich-text-editor/__tests__/WtRichTextEditor.spec.js

@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils';
+import { flushPromises, mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 
 // TinyMCE cannot run in jsdom: its side-effect imports are stubbed, and the
@@ -48,10 +48,14 @@ const { default: WtRichTextEditor } = await import(
 	'../wt-rich-text-editor.vue'
 );
 
-const mountEditor = (props = {}) =>
-	mount(WtRichTextEditor, {
+// the editor mounts once TinyMCE has loaded (mocked here: at once)
+const mountEditor = async (props = {}) => {
+	const wrapper = mount(WtRichTextEditor, {
 		props,
 	});
+	await flushPromises();
+	return wrapper;
+};
 
 const editorStub = (wrapper) =>
 	wrapper.findComponent({
@@ -63,17 +67,16 @@ describe('WtRichTextEditor', () => {
 		document.documentElement.classList.remove('theme--dark');
 	});
 
-	it('shows a label only when given one', () => {
-		expect(mountEditor().find('.wt-label').exists()).toBe(false);
-		expect(
-			mountEditor({
-				label: 'Reply',
-			}).text(),
-		).toContain('Reply');
+	it('shows a label only when given one', async () => {
+		expect((await mountEditor()).find('.wt-label').exists()).toBe(false);
+		const labelled = await mountEditor({
+			label: 'Reply',
+		});
+		expect(labelled.text()).toContain('Reply');
 	});
 
-	it('edits html with the full toolbar by default', () => {
-		const editor = editorStub(mountEditor());
+	it('edits html with the full toolbar by default', async () => {
+		const editor = editorStub(await mountEditor());
 
 		expect(editor.props('outputFormat')).toBe('html');
 		expect(editor.props('plugins')).toContain('table');
@@ -82,9 +85,9 @@ describe('WtRichTextEditor', () => {
 		expect(editor.props('licenseKey')).toBe('gpl');
 	});
 
-	it('drops the formatting tools for plain text', () => {
+	it('drops the formatting tools for plain text', async () => {
 		const editor = editorStub(
-			mountEditor({
+			await mountEditor({
 				output: 'text',
 			}),
 		);
@@ -94,9 +97,9 @@ describe('WtRichTextEditor', () => {
 		expect(editor.props('init').statusbar).toBe(false);
 	});
 
-	it('takes toolbar and plugin overrides', () => {
+	it('takes toolbar and plugin overrides', async () => {
 		const editor = editorStub(
-			mountEditor({
+			await mountEditor({
 				toolbar: 'bold italic | link',
 				plugins: [
 					'link',
@@ -111,7 +114,7 @@ describe('WtRichTextEditor', () => {
 	});
 
 	it('passes the model through both ways', async () => {
-		const wrapper = mountEditor({
+		const wrapper = await mountEditor({
 			modelValue: '<p>Hi</p>',
 		});
 		expect(editorStub(wrapper).props('modelValue')).toBe('<p>Hi</p>');
@@ -126,7 +129,7 @@ describe('WtRichTextEditor', () => {
 	it('restyles the editable body when the app switches theme', async () => {
 		const body = {};
 		const setStyles = vi.fn();
-		const wrapper = mountEditor();
+		const wrapper = await mountEditor();
 
 		editorStub(wrapper).vm.$emit(
 			'init',

package/src/components/on-demand/wt-rich-text-editor/__tests__/loadTinyMce.spec.js

@@ -0,0 +1,54 @@
+const { loaded, track } = vi.hoisted(() => {
+	const loaded = [];
+	return {
+		loaded,
+		track: (name) => () => {
+			loaded.push(name);
+			return {};
+		},
+	};
+});
+
+vi.mock('tinymce/tinymce', track('core'));
+vi.mock('tinymce/icons/default', track('icons'));
+vi.mock('tinymce/models/dom', track('model'));
+vi.mock('tinymce/themes/silver', track('theme'));
+vi.mock('tinymce/plugins/advlist', track('advlist'));
+vi.mock('tinymce/plugins/emoticons', track('emoticons'));
+vi.mock('tinymce/plugins/emoticons/js/emojis', track('emojis'));
+vi.mock('tinymce/plugins/fullscreen', track('fullscreen'));
+vi.mock('tinymce/plugins/image', track('image'));
+vi.mock('tinymce/plugins/link', track('link'));
+vi.mock('tinymce/plugins/lists', track('lists'));
+vi.mock('tinymce/plugins/table', track('table'));
+vi.mock('tinymce/skins/ui/oxide/skin.css', track('skin'));
+
+const { loadTinyMce } = await import('../_internals/loadTinyMce');
+
+describe('loadTinyMce', () => {
+	it('evaluates the core before any add-on that registers on it', async () => {
+		await loadTinyMce();
+
+		expect(loaded[0]).toBe('core');
+		expect(loaded).toEqual(
+			expect.arrayContaining([
+				'icons',
+				'model',
+				'theme',
+				'table',
+				'skin',
+			]),
+		);
+	});
+
+	it('loads once, however many editors ask', async () => {
+		const count = loaded.length;
+
+		await Promise.all([
+			loadTinyMce(),
+			loadTinyMce(),
+		]);
+
+		expect(loaded).toHaveLength(count);
+	});
+});

package/src/components/on-demand/wt-rich-text-editor/_internals/loadTinyMce.ts

@@ -0,0 +1,31 @@
+/**
+ * Loads TinyMCE (self-hosted) once, core first.
+ *
+ * The icons, model, theme and plugins register themselves on the global
+ * `tinymce` the core sets, so the core must run before any of them. Plain
+ * side-effect imports do not guarantee that: in an app's production build
+ * the core — it touches `module` — ends up behind a lazy CommonJS wrapper,
+ * while the add-ons, plain IIFEs, are hoisted and run first, failing with
+ * "tinymce is not defined". Awaiting the core's import pins the order.
+ */
+let loading: Promise<void> | null = null;
+
+export function loadTinyMce(): Promise<void> {
+	loading ??= import('tinymce/tinymce').then(() =>
+		Promise.all([
+			import('tinymce/icons/default'),
+			import('tinymce/models/dom'),
+			import('tinymce/themes/silver'),
+			import('tinymce/plugins/advlist'),
+			import('tinymce/plugins/emoticons'),
+			import('tinymce/plugins/emoticons/js/emojis'),
+			import('tinymce/plugins/fullscreen'),
+			import('tinymce/plugins/image'),
+			import('tinymce/plugins/link'),
+			import('tinymce/plugins/lists'),
+			import('tinymce/plugins/table'),
+			import('tinymce/skins/ui/oxide/skin.css'),
+		]).then(() => undefined),
+	);
+	return loading;
+}

package/src/components/on-demand/wt-rich-text-editor/wt-rich-text-editor.vue

@@ -14,7 +14,10 @@
         {{ label }}
       </slot>
     </wt-label>
+    <!-- tinymce-vue falls back to Tiny's cloud CDN when window.tinymce is
+         missing, so the editor only mounts once the self-hosted copy is in -->
     <tiny-mce-editor
+      v-if="isTinyMceLoaded"
       :id="editorId"
       v-model="model"
       :disabled="disabled"
@@ -25,33 +28,23 @@
       license-key="gpl"
       @init="handleInit"
     />
+    <wt-rich-text-editor-skeleton v-else />
   </div>
 </template>
 
 <script setup lang="ts">
 /**
- * TinyMCE, self-hosted. Everything below loads with this component only:
- * `components/index.js` registers it through `defineAsyncComponent`, so an
- * app that never renders an editor never downloads TinyMCE.
+ * TinyMCE, self-hosted, loads with this component only: `components/index.js`
+ * registers it through `defineAsyncComponent`, and TinyMCE itself is loaded
+ * by `loadTinyMce` (in order) once the component is created.
  */
 import TinyMceVueEditor from '@tinymce/tinymce-vue';
 import type { Editor as TinyMceInstance } from 'tinymce';
-import 'tinymce/tinymce';
-import 'tinymce/icons/default';
-import 'tinymce/models/dom';
-import 'tinymce/themes/silver';
-import 'tinymce/plugins/advlist';
-import 'tinymce/plugins/emoticons';
-import 'tinymce/plugins/emoticons/js/emojis';
-import 'tinymce/plugins/fullscreen';
-import 'tinymce/plugins/image';
-import 'tinymce/plugins/link';
-import 'tinymce/plugins/lists';
-import 'tinymce/plugins/table';
-import 'tinymce/skins/ui/oxide/skin.css';
-import { computed, onBeforeUnmount, useId } from 'vue';
+import { computed, onBeforeUnmount, ref, useId } from 'vue';
 
 import WtLabel from '../../wt-label/wt-label.vue';
+import { loadTinyMce } from './_internals/loadTinyMce';
+import WtRichTextEditorSkeleton from './_internals/wt-rich-text-editor-skeleton.vue';
 
 /**
  * tinymce-vue binds the model only when it finds `onUpdate:modelValue` in its
@@ -128,6 +121,11 @@ const model = defineModel<string>();
 
 const editorId = useId();
 
+const isTinyMceLoaded = ref(false);
+loadTinyMce().then(() => {
+	isTinyMceLoaded.value = true;
+});
+
 const HTML_PLUGINS = [
 	'advlist',
 	'emoticons',

package/src/modules/AgentPdfs/components/agent-pdfs-tab.vue

@@ -35,8 +35,12 @@
 				:headers="shownHeaders"
 				:selected="selected"
 				sortable
+				resizable-columns
+				reorderable-columns
 				@sort="updateSort"
 				@update:selected="updateSelected"
+				@column-resize="columnResize"
+				@column-reorder="columnReorder"
 			>
 				<template #preview="{ item }">
 					<pdf-status-preview
@@ -175,6 +179,8 @@ const {
 	updateSort,
 	hasFilter,
 	addFilter,
+	columnResize,
+	columnReorder,
 } = tableStore;
 
 initialize();