@webitel/ui-sdk 26.8.107 → 26.8.108

package/dist/{wt-chat-emoji-DUYgD7x0.js → wt-chat-emoji-YWk_As-i.js}

@@ -1,4 +1,4 @@
-import "./components-CRmvV0ze.js";
+import "./components-BwnHoOxc.js";
 import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { c as t } from "./enums-BDtfwdQu.js";
 import { t as n } from "./wt-button-C-BRwWdy.js";

package/dist/{wt-display-chip-items-Dm6I2JFC.js → wt-display-chip-items-CM7ukRbx.js}

@@ -1,4 +1,4 @@
-import { C as e, i as t } from "./components-CRmvV0ze.js";
+import { C as e, i as t } from "./components-BwnHoOxc.js";
 import { t as n } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { t as r } from "./utils-DaacyMAw.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-afA26_0Q.js → wt-send-message-popup-DpWs6kDO.js}

@@ -1,4 +1,4 @@
-import { n as e } from "./components-CRmvV0ze.js";
+import { n as e } from "./components-BwnHoOxc.js";
 import "./convertDuration-heRoQzks.js";
 import { n as t, r as n } from "./clients-Dm3JLACL.js";
 import { t as r } from "./vue-i18n-B88GcHzn.js";

package/dist/{wt-tree-table-DMK0J0Jx.js → wt-tree-table-B24eT18h.js}

@@ -3,15 +3,15 @@ import { n as t } from "./sortQueryAdapters-CyYXvnDN.js";
 import { t as n } from "./wt-checkbox-BBdi-1oS.js";
 import { t as r } from "./wt-icon-btn-BFRfANYh.js";
 import { t as i } from "./useWtTable-CUpN0LZ5.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";
+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, nextTick as h, normalizeClass as g, normalizeStyle as _, onMounted as v, openBlock as y, ref as b, renderList as x, renderSlot as S, resolveComponent as C, toDisplayString as w, toRef as T, unref as E, withCtx as D, withModifiers as O } 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-row" }, k = { class: "wt-tree-table-td__content" }, A = {
+var k = { class: "wt-tree-table-row" }, A = { class: "wt-tree-table-td__content" }, j = {
 	key: 0,
 	class: "wt-tree-table-td__icon-wrapper"
-}, j = {
+}, M = {
 	key: 0,
 	class: "wt-tree-table-td__actions typo-body-1"
-}, M = { class: "wt-tree-table-td__content" }, N = /*#__PURE__*/ e(/* @__PURE__ */ m({
+}, N = { class: "wt-tree-table-td__content" }, P = ["colspan"], F = /*#__PURE__*/ e(/* @__PURE__ */ m({
 	__name: "wt-tree-table-row",
 	props: {
 		data: {},
@@ -32,74 +32,86 @@ var O = { class: "wt-tree-table-row" }, k = { class: "wt-tree-table-td__content"
 	},
 	emits: ["update:selected", "expanded-collapse"],
 	setup(e, { emit: t }) {
-		let i = e, p = t, m = y(!0), h = o(() => i.nestingLevel), w = o(() => i.nestingLevel + 1), T = o(() => i.selectedElements.includes(i.data)), D = () => {
+		let i = e, p = t, m = b(!0), g = b(null), T = o(() => i.nestingLevel), E = o(() => i.nestingLevel + 1), O = o(() => (i.dataHeaders?.length || 0) + +!!i.gridActions), F = o(() => i.selectedElements.includes(i.data)), I = () => {
+			h(() => {
+				let e = g.value, t = e?.closest(".wt-tree-table");
+				if (!e || !t) return;
+				let n = e.getBoundingClientRect().bottom - t.getBoundingClientRect().bottom;
+				n > 0 && t.scrollBy({
+					top: n,
+					behavior: "smooth"
+				});
+			});
+		}, L = () => {
+			m.value = !m.value, m.value || I();
+		}, R = () => {
 			m.value = !1, p("expanded-collapse");
-		}, N = (e, t = 0) => {
+		}, z = (e, t = 0) => {
 			if (e[i.searchedProp] && t) return !0;
 			if (Array.isArray(e[i.childrenProp])) {
-				for (let n of e[i.childrenProp]) if (N(n, t + 1)) return !0;
+				for (let n of e[i.childrenProp]) if (z(n, t + 1)) return !0;
 			}
 			return !1;
 		};
-		return _(() => {
-			i.searchedProp && N(i.data) && D();
+		return v(() => {
+			i.searchedProp && z(i.data) && R();
 		}), (t, i) => {
-			let o = S("wt-tree-table-row", !0);
-			return v(), l(a, null, [u("tr", O, [(v(!0), l(a, null, b(e.dataHeaders, (o, d) => (v(), l("td", {
+			let o = C("wt-tree-table-row", !0);
+			return y(), l(a, null, [u("tr", k, [(y(!0), l(a, null, x(e.dataHeaders, (o, d) => (y(), l("td", {
 				key: o.value,
-				style: g(o.width ? `min-width:${o.width}` : ""),
+				style: _(o.width ? `min-width:${o.width}` : ""),
 				class: "wt-tree-table-td typo-body-1"
-			}, [u("div", k, [d ? c("", !0) : (v(), l("div", A, [
-				(v(!0), l(a, null, b(h.value, (e) => (v(), l("div", {
+			}, [u("div", A, [d ? c("", !0) : (y(), l("div", j, [
+				(y(!0), l(a, null, x(T.value, (e) => (y(), l("div", {
 					key: e,
 					class: "wt-tree-table-row__tree-space"
 				}))), 128)),
-				e.selectable ? (v(), s(n, {
+				e.selectable ? (y(), s(n, {
 					key: 0,
-					selected: T.value,
+					selected: F.value,
 					"onUpdate:selected": i[0] ||= (n) => t.$emit("update:selected", {
 						data: e.data,
 						select: n
 					})
 				}, null, 8, ["selected"])) : c("", !0),
-				e.data[e.childrenProp] ? (v(), s(r, {
+				e.data[e.childrenProp] ? (y(), s(r, {
 					key: 1,
 					icon: m.value ? "tree-expand" : "tree-collapse",
-					onClick: i[1] ||= (e) => m.value = !m.value
+					onClick: L
 				}, null, 8, ["icon"])) : c("", !0)
-			])), x(t.$slots, o.value, {
+			])), S(t.$slots, o.value, {
 				index: e.rowPosition,
 				item: e.data
-			}, () => [f(C(e.data[o.value]), 1)], !0)])], 4))), 128)), e.gridActions ? (v(), l("td", j, [u("div", M, [x(t.$slots, "actions", {
+			}, () => [f(w(e.data[o.value]), 1)], !0)])], 4))), 128)), e.gridActions ? (y(), l("td", M, [u("div", N, [S(t.$slots, "actions", {
 				index: e.rowPosition,
 				item: e.data
-			}, void 0, !0)])])) : c("", !0)]), m.value ? c("", !0) : (v(!0), l(a, { key: 0 }, b(e.data[e.childrenProp], (n, r) => (v(), s(o, {
+			}, void 0, !0)])])) : c("", !0)]), m.value ? c("", !0) : (y(), l(a, { key: 0 }, [(y(!0), l(a, null, x(e.data[e.childrenProp], (n, r) => (y(), s(o, {
 				key: r,
 				"children-prop": e.childrenProp,
 				data: n,
 				"data-headers": e.dataHeaders,
-				"nesting-level": w.value,
+				"nesting-level": E.value,
 				"row-position": e.rowPosition,
 				"searched-prop": e.searchedProp,
 				selectable: e.selectable,
 				"selected-elements": e.selectedElements,
-				onExpandedCollapse: D,
-				"onUpdate:selected": i[2] ||= (e) => t.$emit("update:selected", {
+				onExpandedCollapse: R,
+				"onUpdate:selected": i[1] ||= (e) => t.$emit("update:selected", {
 					data: e.data,
 					select: e.select
 				})
 			}, d({
-				actions: E(({ item: n }) => [x(t.$slots, "actions", {
+				actions: D(({ item: n }) => [S(t.$slots, "actions", {
 					index: e.rowPosition,
 					item: n
 				}, void 0, !0)]),
 				_: 2
-			}, [b(e.dataHeaders, (n) => ({
+			}, [x(e.dataHeaders, (n) => ({
 				name: n.value,
-				fn: E(({ item: r }) => [x(t.$slots, n.value, {
+				fn: D(({ item: r }) => [S(t.$slots, n.value, {
 					index: e.rowPosition,
 					item: r
-				}, () => [u("div", null, C(r[n.value]), 1)], !0)])
+				}, () => [u("div", null, w(r[n.value]), 1)], !0)])
 			}))]), 1032, [
 				"children-prop",
 				"data",
@@ -109,13 +121,18 @@ var O = { class: "wt-tree-table-row" }, k = { class: "wt-tree-table-td__content"
 				"searched-prop",
 				"selectable",
 				"selected-elements"
-			]))), 128))], 64);
+			]))), 128)), u("tr", {
+				ref_key: "childrenEndRef",
+				ref: g,
+				"aria-hidden": "true",
+				class: "wt-tree-table-row__children-end"
+			}, [u("td", { colspan: O.value }, null, 8, P)], 512)], 64))], 64);
 		};
 	}
-}), [["__scopeId", "data-v-12c9ea16"]]), P = { class: "wt-tree-table wt-scrollbar" }, F = { class: "wt-tree-table-wrapper" }, I = { class: "wt-tree-table-head" }, L = { class: "wt-tree-table-tr wt-tree-table-tr-head" }, R = ["onClick"], z = { class: "wt-tree-table-th__text" }, B = {
+}), [["__scopeId", "data-v-8b7680a3"]]), I = { class: "wt-tree-table wt-scrollbar" }, L = { class: "wt-tree-table-wrapper" }, R = { class: "wt-tree-table-head" }, z = { class: "wt-tree-table-tr wt-tree-table-tr-head" }, B = ["onClick"], V = { class: "wt-tree-table-th__text" }, H = {
 	key: 0,
 	class: "wt-tree-table-th__actions"
-}, V = { class: "wt-tree-table-th__content" }, H = { class: "wt-tree-table-body" }, U = /*#__PURE__*/ e(/* @__PURE__ */ m({
+}, U = { class: "wt-tree-table-th__content" }, W = { class: "wt-tree-table-body" }, G = /*#__PURE__*/ e(/* @__PURE__ */ m({
 	__name: "wt-tree-table",
 	props: {
 		headers: {},
@@ -138,62 +155,62 @@ var O = { class: "wt-tree-table-row" }, k = { class: "wt-tree-table-td__content"
 	},
 	emits: ["sort", "update:selected"],
 	setup(e, { emit: r }) {
-		let m = e, _ = r, y = (e) => e[m.childrenProp] && Array.isArray(e[m.childrenProp]), O = (e) => {
+		let m = e, h = r, v = (e) => e[m.childrenProp] && Array.isArray(e[m.childrenProp]), b = (e) => {
 			let t = [], n = (e) => {
 				if (e._isSelected) return [e];
-				y(e) && e[m.childrenProp].forEach(n);
+				v(e) && e[m.childrenProp].forEach(n);
 			};
 			return e.forEach(n), t;
 		}, k = (e) => {
 			let t = [], n = (e) => {
-				t.push(e), y(e) && e[m.childrenProp].forEach(n);
+				t.push(e), v(e) && e[m.childrenProp].forEach(n);
 			};
 			return e.forEach(n), t;
-		}, A = o(() => m.selected || O(m.data)), j = o(() => A.value.length === k(m.data).length && k(m.data).length > 0), { tableHeaders: M } = i({ headers: w(m, "headers") }), U = ({ sort: e }) => m.sortable && e !== void 0, W = (e) => {
-			if (!U(e)) return;
+		}, A = o(() => m.selected || b(m.data)), j = o(() => A.value.length === k(m.data).length && k(m.data).length > 0), { tableHeaders: M } = i({ headers: T(m, "headers") }), N = ({ sort: e }) => m.sortable && e !== void 0, P = (e) => {
+			if (!N(e)) return;
 			let n = t(e.sort);
-			_("sort", e, n);
+			h("sort", e, n);
 		}, G = (e, t) => {
 			e.forEach((e) => {
-				e._isSelected = t, y(e) && G(e[m.childrenProp], t);
+				e._isSelected = t, v(e) && G(e[m.childrenProp], t);
 			});
 		}, K = () => {
-			m.selected ? _("update:selected", j.value ? [] : [...k(m.data)]) : j.value ? G(m.data, !1) : G(m.data, !0);
+			m.selected ? h("update:selected", j.value ? [] : [...k(m.data)]) : j.value ? G(m.data, !1) : G(m.data, !0);
 		}, q = (e, t) => {
-			m.selected ? t ? _("update:selected", [...A.value, e]) : _("update:selected", A.value.filter((t) => t !== e)) : e._isSelected = !e._isSelected;
+			m.selected ? t ? h("update:selected", [...A.value, e]) : h("update:selected", A.value.filter((t) => t !== e)) : e._isSelected = !e._isSelected;
 		};
 		return (t, r) => {
-			let i = S("wt-icon");
-			return v(), l("div", P, [u("table", F, [u("thead", I, [u("tr", L, [(v(!0), l(a, null, b(T(M), (t, a) => (v(), l("th", {
+			let i = C("wt-icon");
+			return y(), l("div", I, [u("table", L, [u("thead", R, [u("tr", z, [(y(!0), l(a, null, x(E(M), (t, a) => (y(), l("th", {
 				key: String(a) + t?.sort,
-				class: h([[{ "wt-tree-table-th--sortable": U(t) }, `wt-tree-table-th--sort-${t.sort}`], "wt-tree-table-th typo-body-1-bold"]),
-				style: g(t.width ? `min-width:${t.width}` : ""),
-				onClick: (e) => W(t)
-			}, [u("div", { class: h(["wt-tree-table-th__content", { "wt-tree-table-th__content--selectable": a === 0 && e.selectable }]) }, [
-				a === 0 && e.selectable ? (v(), l("div", {
+				class: g([[{ "wt-tree-table-th--sortable": N(t) }, `wt-tree-table-th--sort-${t.sort}`], "wt-tree-table-th typo-body-1-bold"]),
+				style: _(t.width ? `min-width:${t.width}` : ""),
+				onClick: (e) => P(t)
+			}, [u("div", { class: g(["wt-tree-table-th__content", { "wt-tree-table-th__content--selectable": a === 0 && e.selectable }]) }, [
+				a === 0 && e.selectable ? (y(), l("div", {
 					key: 0,
-					onClick: r[0] ||= D(() => {}, ["stop"])
+					onClick: r[0] ||= O(() => {}, ["stop"])
 				}, [p(n, {
 					selected: j.value,
 					"onUpdate:selected": K
 				}, null, 8, ["selected"])])) : c("", !0),
-				u("div", z, C(t.text), 1),
-				e.sortable ? (v(), s(i, {
+				u("div", V, w(t.text), 1),
+				e.sortable ? (y(), s(i, {
 					key: 1,
 					class: "wt-tree-table-th-sort-arrow wt-tree-table-th-sort-arrow--asc",
 					icon: "sort-arrow-up",
 					size: "sm"
 				})) : c("", !0),
-				e.sortable ? (v(), s(i, {
+				e.sortable ? (y(), s(i, {
 					key: 2,
 					class: "wt-tree-table-th-sort-arrow wt-tree-table-th-sort-arrow--desc",
 					icon: "sort-arrow-down",
 					size: "sm"
 				})) : c("", !0)
-			], 2)], 14, R))), 128)), e.gridActions ? (v(), l("th", B, [u("div", V, [x(t.$slots, "actions-header", {}, void 0, !0)])])) : c("", !0)])]), u("tbody", H, [(v(!0), l(a, null, b(e.data, (n, i) => (v(), s(N, {
+			], 2)], 14, B))), 128)), e.gridActions ? (y(), l("th", H, [u("div", U, [S(t.$slots, "actions-header", {}, void 0, !0)])])) : c("", !0)])]), u("tbody", W, [(y(!0), l(a, null, x(e.data, (n, i) => (y(), s(F, {
 				key: i,
 				"row-position": i,
-				"data-headers": T(M),
+				"data-headers": E(M),
 				data: n,
 				selectable: e.selectable,
 				"children-prop": e.childrenProp,
@@ -201,14 +218,14 @@ var O = { class: "wt-tree-table-row" }, k = { class: "wt-tree-table-td__content"
 				"searched-prop": e.searchedProp,
 				"onUpdate:selected": r[1] ||= (e) => q(e.data, e.select)
 			}, d({
-				actions: E(({ item: e }) => [x(t.$slots, "actions", { item: e }, void 0, !0)]),
+				actions: D(({ item: e }) => [S(t.$slots, "actions", { item: e }, void 0, !0)]),
 				_: 2
-			}, [b(T(M), (e) => ({
+			}, [x(E(M), (e) => ({
 				name: e.value,
-				fn: E(({ item: n }) => [x(t.$slots, e.value, {
+				fn: D(({ item: n }) => [S(t.$slots, e.value, {
 					index: i,
 					item: n
-				}, () => [f(C(n[e.value]), 1)], !0)])
+				}, () => [f(w(n[e.value]), 1)], !0)])
 			}))]), 1032, [
 				"row-position",
 				"data-headers",
@@ -222,4 +239,4 @@ var O = { class: "wt-tree-table-row" }, k = { class: "wt-tree-table-td__content"
 	}
 }), [["__scopeId", "data-v-cb717c3e"]]);
 //#endregion
-export { U as default };
+export { G as default };

package/dist/{wt-type-extension-value-input-CEX06xVC.js → wt-type-extension-value-input-B2GxgFE7.js}

@@ -1,4 +1,4 @@
-import { a as e, o as t, r as n, s as r } from "./components-CRmvV0ze.js";
+import { a as e, o as t, r as n, s as r } from "./components-BwnHoOxc.js";
 import { t as i } from "./clients-Dm3JLACL.js";
 import { t as a } from "./enums-BDtfwdQu.js";
 import { t as o } from "./vue-i18n-B88GcHzn.js";

package/dist/{wt-vidstack-player-1Z1fEhkA.js → wt-vidstack-player-CfRt7lLu.js}

@@ -1,4 +1,4 @@
-import { w as e } from "./components-CRmvV0ze.js";
+import { w as e } from "./components-BwnHoOxc.js";
 import "./convertDuration-heRoQzks.js";
 import { t } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { c as n } from "./enums-BDtfwdQu.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-sdk",
-	"version": "26.8.107",
+	"version": "26.8.108",
 	"private": false,
 	"scripts": {
 		"dev": "npm run docs:dev",
@@ -25,7 +25,8 @@
 		"prepare": "husky || true",
 		"test:unit:ci": "npm run test:coverage",
 		"typecheck": "vue-tsc --noEmit -p ./tsconfig.typecheck.json",
-		"typecheck:ci": "vue-tsc --noEmit -p ./tsconfig.typecheck.json"
+		"typecheck:ci": "vue-tsc --noEmit -p ./tsconfig.typecheck.json",
+		"design-tokens:generate": "npm run design-tokens:generate --workspace=@webitel/styleguide"
 	},
 	"workspaces": [
 		"./packages/api-services",

package/src/components/wt-tree-table-row/__tests__/WtTreeTableRow.spec.js

@@ -108,12 +108,13 @@ describe('WtTreeTableRow', () => {
 			name: 'wt-icon-btn',
 		});
 		expect(toggle.exists()).toBe(true);
-		expect(wrapper.findAll('tr').length).toBe(1);
+		expect(wrapper.findAll('.wt-tree-table-row').length).toBe(1);
 
 		await toggle.trigger('click');
 
-		expect(wrapper.findAll('tr').length).toBe(2);
-		expect(wrapper.findAll('tr')[1].text()).toContain('Charlie');
+		const rows = wrapper.findAll('.wt-tree-table-row');
+		expect(rows.length).toBe(2);
+		expect(rows[1].text()).toContain('Charlie');
 	});
 
 	it('does not render a selection checkbox unless selectable', () => {

package/src/components/wt-tree-table-row/wt-tree-table-row.vue

@@ -29,7 +29,7 @@
           <wt-icon-btn
             v-if="data[childrenProp]"
             :icon="collapsed ? 'tree-expand' : 'tree-collapse'"
-            @click="collapsed = !collapsed"
+            @click="toggleCollapse"
           />
         </div>
         <slot
@@ -97,11 +97,19 @@
         />
       </template>
     </wt-tree-table-row>
+
+    <tr
+      ref="childrenEndRef"
+      aria-hidden="true"
+      class="wt-tree-table-row__children-end"
+    >
+      <td :colspan="columnCount"></td>
+    </tr>
   </template>
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref } from 'vue';
+import { computed, nextTick, onMounted, ref } from 'vue';
 
 import WtCheckbox from '../wt-checkbox/wt-checkbox.vue';
 import WtIconBtn from '../wt-icon-btn/wt-icon-btn.vue';
@@ -153,17 +161,46 @@ const emit = defineEmits([
 defineSlots<Record<string, (props: Record<string, any>) => unknown>>();
 
 const collapsed = ref(true);
+const childrenEndRef = ref<HTMLTableRowElement | null>(null);
 const lineCount = computed(() => {
 	return props.nestingLevel;
 });
 const childLevel = computed(() => {
 	return props.nestingLevel + 1;
 });
+const columnCount = computed(() => {
+	return (props.dataHeaders?.length || 0) + (props.gridActions ? 1 : 0);
+});
 
 const isSelectedRow = computed(() => {
 	return props.selectedElements.includes(props.data);
 });
 
+const scrollRevealedChildrenIntoView = () => {
+	nextTick(() => {
+		const anchor = childrenEndRef.value;
+		const scrollContainer = anchor?.closest<HTMLElement>('.wt-tree-table');
+		if (!anchor || !scrollContainer) return;
+
+		const overflowBelow =
+			anchor.getBoundingClientRect().bottom -
+			scrollContainer.getBoundingClientRect().bottom;
+
+		if (overflowBelow > 0) {
+			scrollContainer.scrollBy({
+				top: overflowBelow,
+				behavior: 'smooth',
+			});
+		}
+	});
+};
+
+const toggleCollapse = () => {
+	collapsed.value = !collapsed.value;
+
+	if (!collapsed.value) scrollRevealedChildrenIntoView();
+};
+
 const openCollapse = () => {
 	collapsed.value = false;
 	emit('expanded-collapse');
@@ -229,4 +266,10 @@ onMounted(() => {
   width: var(--icon-md-size);
   height: var(--icon-md-size);
 }
+
+.wt-tree-table-row__children-end > td {
+  height: 0;
+  padding: 0;
+  border: none;
+}
 </style>