@webitel/ui-sdk 26.8.118 → 26.8.119

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

@@ -1,4 +1,4 @@
-import "./components-CeOlovz8.js";
+import "./components-jZ2GzWbv.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-Bob7miL_.js → wt-display-chip-items-D_iKQXSB.js}

@@ -1,4 +1,4 @@
-import { C as e, i as t } from "./components-CeOlovz8.js";
+import { C as e, i as t } from "./components-jZ2GzWbv.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-unpxAKnu.js

@@ -0,0 +1,28 @@
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { createBlock as t, createCommentVNode as n, createElementBlock as r, createTextVNode as i, defineComponent as a, normalizeClass as o, openBlock as s, renderSlot as c, resolveComponent as l, toDisplayString as u, withCtx as d } from "vue";
+//#endregion
+//#region src/components/wt-label/wt-label.vue
+var f = /*#__PURE__*/ e(/* @__PURE__ */ a({
+	__name: "wt-label",
+	props: {
+		disabled: { type: Boolean },
+		invalid: { type: Boolean },
+		required: { type: Boolean },
+		hint: {}
+	},
+	setup(e) {
+		return (a, f) => {
+			let p = l("wt-hint");
+			return s(), r("label", { class: o([{
+				"wt-label--invalid": e.invalid,
+				"wt-label--disabled": e.disabled,
+				"wt-label--required": e.required
+			}, "wt-label typo-subtitle-2"]) }, [c(a.$slots, "default", {}, void 0, !0), e.hint ? (s(), t(p, { key: 0 }, {
+				default: d(() => [i(u(e.hint), 1)], void 0, !0),
+				_: 1
+			})) : n("", !0)], 2);
+		};
+	}
+}), [["__scopeId", "data-v-7d80b998"]]);
+//#endregion
+export { f as t };

package/dist/wt-rich-text-editor-B-iHNpqD.js

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

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

@@ -1,6 +1,6 @@
-import { n as e } from "./components-CeOlovz8.js";
+import { n as e } from "./components-jZ2GzWbv.js";
 import "./convertDuration-CW5qzlwH.js";
-import { i as t, r as n } from "./clients-DWcx-Mfk.js";
+import { i as t, r as n } from "./clients-CjVXyqY8.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-55YmFcBp.js → wt-type-extension-value-input-CJWynqhC.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-CeOlovz8.js";
-import { a as p, n as m, t as h } from "./clients-DWcx-Mfk.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 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-ETPSioGH.js → wt-vidstack-player-BL6xL6yo.js}

@@ -1,4 +1,4 @@
-import { w as e } from "./components-CeOlovz8.js";
+import { w as e } from "./components-jZ2GzWbv.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.118",
+	"version": "26.8.119",
 	"private": false,
 	"scripts": {
 		"dev": "npm run docs:dev",
@@ -62,6 +62,7 @@
 		"@morev/vue-transitions": "^3.0.5",
 		"@primeuix/themes": "^1.1.1",
 		"@tailwindcss/vite": "^4.1.7",
+		"@tinymce/tinymce-vue": "^6.3.0",
 		"@vuepic/vue-datepicker": "^4.5.1",
 		"@vueuse/components": "^14.0.0",
 		"autosize": "^6.0.1",
@@ -79,6 +80,7 @@
 		"qs-esm": "^7.0.3",
 		"sortablejs": "^1.15.3",
 		"tailwindcss": "^4.1.7",
+		"tinymce": "^8.9.2",
 		"vue-multiselect": "^3.4.0",
 		"vue-observe-visibility": "^2.0.0-alpha.1",
 		"xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"

package/src/components/index.js

@@ -1,5 +1,6 @@
 import { defineAsyncComponent } from 'vue';
 
+import WtRichTextEditorSkeleton from './on-demand/wt-rich-text-editor/_internals/wt-rich-text-editor-skeleton.vue';
 import WtReplaceTransition from './transitions/cases/wt-replace-transition.vue';
 import WtAppHeader from './wt-app-header/wt-app-header.vue';
 import WtAppNavigator from './wt-app-header/wt-app-navigator.vue';
@@ -181,6 +182,17 @@ const WtNavigationMenu = defineAsyncComponent(
 	() =>
 		import('./on-demand/wt-navigation-menu/components/wt-navigation-menu.vue'),
 );
+/**
+ * TinyMCE lives in this chunk alone: an app that never renders an editor never
+ * downloads it. The skeleton covers the download.
+ * @type {typeof import('./on-demand/wt-rich-text-editor/wt-rich-text-editor.vue').default}
+ */
+const WtRichTextEditor = defineAsyncComponent({
+	loader: () =>
+		import('./on-demand/wt-rich-text-editor/wt-rich-text-editor.vue'),
+	loadingComponent: WtRichTextEditorSkeleton,
+	delay: 0,
+});
 /** @type {typeof import('./on-demand/wt-selection-popup/wt-selection-popup.vue').default} */
 const WtSelectionPopup = defineAsyncComponent(
 	() => import('./on-demand/wt-selection-popup/wt-selection-popup.vue'),
@@ -233,6 +245,7 @@ const Components = {
 	WtLoader,
 	WtRoundedAction,
 	WtReplaceTransition,
+	WtRichTextEditor,
 	WtCheckbox,
 	WtDatepicker,
 	WtIconBtn,
@@ -364,6 +377,7 @@ export {
 	WtProgressBar,
 	WtRadio,
 	WtReplaceTransition,
+	WtRichTextEditor,
 	WtRoundedAction,
 	WtScreenRecordingsAction,
 	WtSearchBar,

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

@@ -0,0 +1,121 @@
+/**
+ * cc-workspaces runs on the @vue/compat runtime. There, a component given a
+ * `modelValue` prop has it rewritten to `value` / `onModelCompat:input` unless
+ * the component is marked as Vue 3 — and tinymce-vue binds the model only when
+ * `onUpdate:modelValue` is in its attrs, so it silently stops emitting
+ * (WTEL-4477). This runs the editor on the compat runtime (one instance of it:
+ * @vue/test-utils would bring the real `vue`, so mounting goes through compat's
+ * own createApp) to pin that the listener still arrives.
+ */
+vi.mock('vue', async () => await import('@vue/compat'));
+
+vi.mock('tinymce/tinymce', () => ({}));
+vi.mock('tinymce/icons/default', () => ({}));
+vi.mock('tinymce/models/dom', () => ({}));
+vi.mock('tinymce/themes/silver', () => ({}));
+vi.mock('tinymce/plugins/advlist', () => ({}));
+vi.mock('tinymce/plugins/emoticons', () => ({}));
+vi.mock('tinymce/plugins/emoticons/js/emojis', () => ({}));
+vi.mock('tinymce/plugins/fullscreen', () => ({}));
+vi.mock('tinymce/plugins/image', () => ({}));
+vi.mock('tinymce/plugins/link', () => ({}));
+vi.mock('tinymce/plugins/lists', () => ({}));
+vi.mock('tinymce/plugins/table', () => ({}));
+vi.mock('tinymce/skins/ui/oxide/skin.css', () => ({}));
+
+// Stands in for tinymce-vue's Editor: no declared emits, model read from attrs.
+const seenAttrs = [];
+const seenModel = [];
+let emitEdit = () => {};
+vi.mock('@tinymce/tinymce-vue', async () => {
+	const { defineComponent, h } = await import('@vue/compat');
+	return {
+		default: defineComponent({
+			name: 'Editor',
+			props: [
+				'id',
+				'modelValue',
+				'init',
+				'plugins',
+				'toolbar',
+				'outputFormat',
+				'disabled',
+				'licenseKey',
+			],
+			setup(props, ctx) {
+				seenAttrs.push(Object.keys(ctx.attrs));
+				seenModel.push(props.modelValue);
+				// lets a test type into the stand-in
+				emitEdit = (value) => ctx.attrs['onUpdate:modelValue']?.(value);
+				return () => h('div');
+			},
+		}),
+	};
+});
+
+const { configureCompat, createApp, h } = await import('@vue/compat');
+const { default: TinyMceVueEditor } = await import('@tinymce/tinymce-vue');
+const { default: WtRichTextEditor } = await import(
+	'../wt-rich-text-editor.vue'
+);
+
+function render(component, props) {
+	const app = createApp({
+		render: () => h(component, props),
+	});
+	// the label is resolved globally in apps; not under test here
+	app.component('WtLabel', {
+		render: () => null,
+	});
+	app.mount(document.createElement('div'));
+	return app;
+}
+
+describe('WtRichTextEditor on @vue/compat', () => {
+	beforeAll(() => {
+		configureCompat({
+			MODE: 2,
+		});
+	});
+
+	afterAll(() => {
+		configureCompat({
+			MODE: 3,
+		});
+	});
+
+	beforeEach(() => {
+		seenAttrs.length = 0;
+		seenModel.length = 0;
+	});
+
+	it('control: compat takes the model listener away from plain tinymce-vue', () => {
+		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();
+
+		expect(seenAttrs[0]).toContain('onUpdate:modelValue');
+	});
+
+	it('takes its own v-model on compat: the value in, edits out', () => {
+		const onUpdate = vi.fn();
+		render(WtRichTextEditor, {
+			modelValue: '<p>Seed</p>',
+			'onUpdate:modelValue': onUpdate,
+		});
+
+		expect(seenModel[0]).toBe('<p>Seed</p>');
+		emitEdit('<p>Edited</p>');
+		expect(onUpdate).toHaveBeenCalledWith('<p>Edited</p>');
+	});
+});

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

@@ -0,0 +1,154 @@
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+
+// TinyMCE cannot run in jsdom: its side-effect imports are stubbed, and the
+// Vue wrapper is replaced by a stub that records its props.
+vi.mock('tinymce/tinymce', () => ({}));
+vi.mock('tinymce/icons/default', () => ({}));
+vi.mock('tinymce/models/dom', () => ({}));
+vi.mock('tinymce/themes/silver', () => ({}));
+vi.mock('tinymce/plugins/advlist', () => ({}));
+vi.mock('tinymce/plugins/emoticons', () => ({}));
+vi.mock('tinymce/plugins/emoticons/js/emojis', () => ({}));
+vi.mock('tinymce/plugins/fullscreen', () => ({}));
+vi.mock('tinymce/plugins/image', () => ({}));
+vi.mock('tinymce/plugins/link', () => ({}));
+vi.mock('tinymce/plugins/lists', () => ({}));
+vi.mock('tinymce/plugins/table', () => ({}));
+vi.mock('tinymce/skins/ui/oxide/skin.css', () => ({}));
+// setup-based like the real Editor, so wrapping it the wrong way shows up
+vi.mock('@tinymce/tinymce-vue', async () => {
+	const { h } = await import('vue');
+	return {
+		default: {
+			name: 'Editor',
+			props: [
+				'id',
+				'modelValue',
+				'init',
+				'plugins',
+				'toolbar',
+				'outputFormat',
+				'disabled',
+				'licenseKey',
+			],
+			emits: [
+				'update:modelValue',
+				'init',
+			],
+			setup: () => () =>
+				h('div', {
+					class: 'editor-stub',
+				}),
+		},
+	};
+});
+
+const { default: WtRichTextEditor } = await import(
+	'../wt-rich-text-editor.vue'
+);
+
+const mountEditor = (props = {}) =>
+	mount(WtRichTextEditor, {
+		props,
+	});
+
+const editorStub = (wrapper) =>
+	wrapper.findComponent({
+		name: 'TinyMceEditor',
+	});
+
+describe('WtRichTextEditor', () => {
+	afterEach(() => {
+		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('edits html with the full toolbar by default', () => {
+		const editor = editorStub(mountEditor());
+
+		expect(editor.props('outputFormat')).toBe('html');
+		expect(editor.props('plugins')).toContain('table');
+		expect(editor.props('toolbar')).toContain('bold italic');
+		expect(editor.props('init').height).toBe(300);
+		expect(editor.props('licenseKey')).toBe('gpl');
+	});
+
+	it('drops the formatting tools for plain text', () => {
+		const editor = editorStub(
+			mountEditor({
+				output: 'text',
+			}),
+		);
+
+		expect(editor.props('plugins')).toEqual([]);
+		expect(editor.props('toolbar')).toBe('undo redo');
+		expect(editor.props('init').statusbar).toBe(false);
+	});
+
+	it('takes toolbar and plugin overrides', () => {
+		const editor = editorStub(
+			mountEditor({
+				toolbar: 'bold italic | link',
+				plugins: [
+					'link',
+				],
+			}),
+		);
+
+		expect(editor.props('toolbar')).toBe('bold italic | link');
+		expect(editor.props('plugins')).toEqual([
+			'link',
+		]);
+	});
+
+	it('passes the model through both ways', async () => {
+		const wrapper = mountEditor({
+			modelValue: '<p>Hi</p>',
+		});
+		expect(editorStub(wrapper).props('modelValue')).toBe('<p>Hi</p>');
+
+		await editorStub(wrapper).vm.$emit('update:modelValue', '<p>Hello</p>');
+
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([
+			'<p>Hello</p>',
+		]);
+	});
+
+	it('restyles the editable body when the app switches theme', async () => {
+		const body = {};
+		const setStyles = vi.fn();
+		const wrapper = mountEditor();
+
+		editorStub(wrapper).vm.$emit(
+			'init',
+			{},
+			{
+				getBody: () => body,
+				dom: {
+					setStyles,
+				},
+			},
+		);
+		document.documentElement.classList.add('theme--dark');
+		// MutationObserver callbacks run as microtasks
+		await nextTick();
+		await Promise.resolve();
+
+		expect(setStyles).toHaveBeenCalledWith(
+			body,
+			expect.objectContaining({
+				backgroundColor: expect.any(String),
+				color: expect.any(String),
+			}),
+		);
+	});
+});

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

@@ -0,0 +1,54 @@
+<template>
+  <!-- shown while the editor chunk (TinyMCE) downloads -->
+  <div
+    aria-busy="true"
+    class="wt-rich-text-editor-skeleton"
+  >
+    <div class="wt-rich-text-editor-skeleton__toolbar" />
+    <div class="wt-rich-text-editor-skeleton__body">
+      <div class="wt-rich-text-editor-skeleton__line" />
+      <div class="wt-rich-text-editor-skeleton__line" />
+      <div class="wt-rich-text-editor-skeleton__line wt-rich-text-editor-skeleton__line--short" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.wt-rich-text-editor-skeleton {
+  display: flex;
+  flex-direction: column;
+  height: 200px;
+  cursor: progress;
+  border-radius: var(--border-radius);
+  box-shadow: var(--elevation-4);
+}
+
+.wt-rich-text-editor-skeleton__toolbar {
+  height: 40px;
+  box-shadow: var(--elevation-2);
+}
+
+.wt-rich-text-editor-skeleton__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-sm);
+}
+
+.wt-rich-text-editor-skeleton__line {
+  height: 12px;
+  border-radius: var(--border-radius);
+  background: var(--skeleton-color, var(--dp-20-surface-color));
+  animation: wt-rich-text-editor-skeleton-pulse 1.2s ease-in-out infinite;
+}
+
+.wt-rich-text-editor-skeleton__line--short {
+  width: 60%;
+}
+
+@keyframes wt-rich-text-editor-skeleton-pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+</style>