@webitel/ui-sdk 26.8.139 → 26.8.140

package/dist/{wt-chat-emoji-DqLArBt8.js → wt-chat-emoji-D72hYTJU.js}

@@ -1,4 +1,4 @@
-import "./components-Bzxyigqb.js";
+import "./components-peYTVwLb.js";
 import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { E as t, h as n } from "./enums-CKer6GJR.js";
 import { t as r } from "./wt-button-DSs8WAg-.js";

package/dist/{wt-display-chip-items-CYABNzDH.js → wt-display-chip-items-DwdzIwJH.js}

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

@@ -1,6 +1,6 @@
-import { n as e } from "./components-Bzxyigqb.js";
+import { n as e } from "./components-peYTVwLb.js";
 import "./convertDuration-CIPonKKW.js";
-import { i as t, r as n } from "./clients-Bk3DA6vL.js";
+import { i as t, r as n } from "./clients-B87Nx03m.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-DAPDUmhp.js → wt-type-extension-value-input-BQjSYAdt.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-Bzxyigqb.js";
-import { a as p, n as m, t as h } from "./clients-Bk3DA6vL.js";
+import { a as l, o as u, r as d, s as f } from "./components-peYTVwLb.js";
+import { a as p, n as m, t as h } from "./clients-B87Nx03m.js";
 import { S as g, _, a as v, c as y, f as b, i as x, n as S, o as C, p as w, r as T, s as E, t as D, x as O } from "./enums-CKer6GJR.js";
 import { n as ee, t as te } from "./vue-i18n-VBiROMZ4.js";
 import "./wt-toast-CAoQkSuJ.js";

package/dist/{wt-vidstack-player-DSgFPUrJ.js → wt-vidstack-player-DwS6IkZJ.js}

@@ -1,4 +1,4 @@
-import { w as e } from "./components-Bzxyigqb.js";
+import { w as e } from "./components-peYTVwLb.js";
 import "./convertDuration-CIPonKKW.js";
 import { t } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { h as n } from "./enums-CKer6GJR.js";

package/package.json

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

package/src/components/index.js

@@ -38,6 +38,7 @@ import WtLogo from './wt-logo/wt-logo.vue';
 import WtMessage from './wt-message/wt-message.vue';
 import WtMultiSelect from './wt-multi-select/wt-multi-select.vue';
 import WtNavigationBar from './wt-navigation-bar/wt-navigation-bar.vue';
+import WtNavigationRail from './wt-navigation-rail/wt-navigation-rail.vue';
 import WtPage from './wt-page/wt-page.vue';
 import WtPageWrapper from './wt-page-wrapper/wt-page-wrapper.vue';
 import WtPassword from './wt-password/wt-password.vue';
@@ -279,6 +280,7 @@ const Components = {
 	WtHeaderActions,
 	WtErrorPage,
 	WtNotificationsBar,
+	WtNavigationRail,
 	WtPage,
 	WtPageWrapper,
 	WtDualPanel,
@@ -374,6 +376,7 @@ export {
 	WtMultiSelect,
 	WtNavigationBar,
 	WtNavigationMenu,
+	WtNavigationRail,
 	WtNotificationsBar,
 	WtPage,
 	WtPageHeader,

package/src/components/wt-navigation-rail/__tests__/WtNavigationRail.spec.js

@@ -0,0 +1,90 @@
+import { mount } from '@vue/test-utils';
+
+import WtNavigationRail from '../wt-navigation-rail.vue';
+
+const top = [
+	{
+		id: 'home',
+		icon: 'home',
+		label: 'Home',
+		badge: {
+			value: 1,
+		},
+	},
+	{
+		id: 'calls',
+		icon: 'call',
+		label: 'Calls',
+	},
+];
+const bottom = [
+	{
+		id: 'dialer',
+		icon: 'call',
+		label: 'Dialer',
+	},
+];
+
+const mountRail = (props) =>
+	mount(WtNavigationRail, {
+		props,
+		global: {
+			stubs: {
+				WtButton: false,
+			},
+		},
+	});
+
+describe('WtNavigationRail', () => {
+	it('renders top and bottom buttons', () => {
+		const wrapper = mountRail({
+			topItems: top,
+			bottomItems: bottom,
+		});
+		const groups = wrapper.findAll('.wt-navigation-rail__group');
+		expect(groups[0].findAll('.navigation-rail-button')).toHaveLength(2);
+		expect(groups[1].findAll('.navigation-rail-button')).toHaveLength(1);
+	});
+
+	it('marks active item', () => {
+		const wrapper = mountRail({
+			topItems: top,
+			bottomItems: bottom,
+			activeItemId: 'calls',
+		});
+		const active = wrapper.findAll('.navigation-rail-button--active');
+		expect(active).toHaveLength(1);
+		expect(active[0].attributes('aria-label')).toBe('Calls');
+	});
+
+	it('renders badge only for items with badge', () => {
+		const wrapper = mountRail({
+			topItems: top,
+		});
+		expect(wrapper.findAll('.wt-badge')).toHaveLength(1);
+	});
+
+	it('renders nothing while both lists are empty', () => {
+		const wrapper = mountRail({});
+		expect(wrapper.find('.wt-navigation-rail').exists()).toBe(false);
+	});
+
+	it('renders when only one list is not empty', () => {
+		const wrapper = mountRail({
+			bottomItems: bottom,
+		});
+		expect(wrapper.find('.wt-navigation-rail').exists()).toBe(true);
+		expect(wrapper.findAll('.wt-navigation-rail__group')).toHaveLength(1);
+	});
+
+	it('emits select on click', async () => {
+		const wrapper = mountRail({
+			topItems: top,
+			bottomItems: bottom,
+		});
+		await wrapper.findAll('button')[2].trigger('click');
+		expect(wrapper.emitted('select')[0]).toEqual([
+			bottom[0],
+		]);
+	});
+});

package/src/components/wt-navigation-rail/_internals/navigation-rail-button.vue

@@ -0,0 +1,79 @@
+<template>
+  <wt-tooltip :disabled="!item.label" placement="right">
+    <template #activator>
+      <wt-button
+        :class="{ 'navigation-rail-button--active': active }"
+        :aria-label="item.label"
+        :aria-current="active ? 'page' : undefined"
+        :badge="item.badge ? String(item.badge.value) : undefined"
+        :badge-severity="item.badge?.severity ?? 'success'"
+        :disabled="item.disabled"
+        :icon="item.icon"
+        :size="ComponentSize.SM"
+        :variant="ButtonVariant.TEXT"
+        class="navigation-rail-button"
+        @click="emit('select', item)"
+      />
+    </template>
+    {{ item.label }}
+  </wt-tooltip>
+</template>
+
+<script setup lang="ts">
+import { ButtonVariant, ComponentSize } from '../../../enums';
+import WtButton from '../../wt-button/wt-button.vue';
+import WtTooltip from '../../wt-tooltip/wt-tooltip.vue';
+import type { NavigationRailItem } from '../types/WtNavigationRail';
+
+defineProps<{
+	item: NavigationRailItem;
+	active?: boolean;
+}>();
+
+const emit = defineEmits<{
+	select: [
+		item: NavigationRailItem,
+	];
+}>();
+</script>
+
+<style scoped>
+/* wt-button theme colors are overridden with navigation rail tokens */
+.navigation-rail-button.p-button.p-button-text {
+  --icon-color: var(--wt-navigation-rail-button-icon-color);
+  background: transparent;
+  color: var(--wt-navigation-rail-button-icon-color);
+}
+
+.navigation-rail-button.p-button.p-button-text:not(:disabled):hover {
+  --icon-color: var(--wt-navigation-rail-button-icon-color);
+  background: var(--wt-navigation-rail-button-background--hover);
+}
+
+.navigation-rail-button.p-button.p-button-text:not(:disabled):active {
+  --icon-color: var(--wt-navigation-rail-button-icon-color);
+  background: var(--wt-navigation-rail-button-background--pressed);
+}
+
+.navigation-rail-button--active.p-button.p-button-text,
+.navigation-rail-button--active.p-button.p-button-text:not(:disabled):active {
+  --icon-color: var(--wt-navigation-rail-button-icon-color--active);
+  background: var(--wt-navigation-rail-button-background--active);
+}
+
+.navigation-rail-button--active.p-button.p-button-text:not(:disabled):hover {
+  --icon-color: var(--wt-navigation-rail-button-icon-color--active-hover);
+  background: var(--wt-navigation-rail-button-background--active-hover);
+}
+
+.navigation-rail-button :deep(.wt-badge) {
+  position: absolute;
+  top: var(--wt-navigation-rail-badge-offset-y);
+  left: var(--wt-navigation-rail-badge-offset-x);
+  /* p-badge sets own width/min-width (1.5rem), override to match design */
+  width: auto;
+  min-width: var(--wt-navigation-rail-badge-size);
+  height: var(--wt-navigation-rail-badge-size);
+  padding: 0 var(--wt-navigation-rail-badge-padding-x);
+}
+</style>

package/src/components/wt-navigation-rail/_variables.css

@@ -0,0 +1,45 @@
+:root {
+	--wt-navigation-rail-width: 48px;
+	--wt-navigation-rail-padding-x: 8px;
+	--wt-navigation-rail-padding-y: 8px;
+	--wt-navigation-rail-gap: 8px;
+	--wt-navigation-rail-border-radius: 0;
+	--wt-navigation-rail-background: linear-gradient(
+		to top right,
+		rgba(20, 34, 184, 1) 0%,
+		rgba(192, 66, 215, 1) 100%
+	);
+
+	--wt-navigation-rail-button-icon-color: var(--p-indigo-50);
+	--wt-navigation-rail-button-background--hover: var(--p-deep-purple-600);
+	--wt-navigation-rail-button-background--pressed: var(--p-deep-purple-500);
+	--wt-navigation-rail-button-icon-color--active: var(--p-deep-purple-600);
+	--wt-navigation-rail-button-background--active: var(--p-gray-50);
+	--wt-navigation-rail-button-icon-color--active-hover: var(
+		--p-deep-purple-550
+	);
+	--wt-navigation-rail-button-background--active-hover: var(--p-white);
+
+	--wt-navigation-rail-badge-size: 16px;
+	--wt-navigation-rail-badge-padding-x: var(--spacing-2xs);
+	--wt-navigation-rail-badge-offset-x: 16px;
+	--wt-navigation-rail-badge-offset-y: 0;
+}
+
+:root.theme--dark {
+	--wt-navigation-rail-background: linear-gradient(
+		to top right,
+		rgba(10, 17, 92, 1) 0%,
+		rgba(111, 27, 126, 1) 100%
+	);
+
+	--wt-navigation-rail-button-icon-color: var(--p-deep-purple-150);
+	--wt-navigation-rail-button-background--hover: var(--p-deep-purple-650);
+	--wt-navigation-rail-button-background--pressed: var(--p-deep-purple-500);
+	--wt-navigation-rail-button-icon-color--active: var(--p-white);
+	--wt-navigation-rail-button-background--active: var(--p-deep-purple-800);
+	--wt-navigation-rail-button-icon-color--active-hover: var(--p-deep-purple-50);
+	--wt-navigation-rail-button-background--active-hover: var(
+		--p-deep-purple-750
+	);
+}

package/src/components/wt-navigation-rail/types/WtNavigationRail.ts

@@ -0,0 +1,19 @@
+import type { BadgeSeverity } from '../../wt-badge-new/types/WtBadge';
+
+export interface NavigationRailBadge {
+	value: string | number;
+	/** @default 'success' */
+	severity?: BadgeSeverity;
+}
+
+export interface NavigationRailItem {
+	/** Unique id, emitted on select and matched against `active` */
+	id: string;
+	/** Icon name from icons repository */
+	icon: string;
+	/** Accessible label (aria-label + tooltip) */
+	label?: string;
+	disabled?: boolean;
+	/** Renders badge over the button when set */
+	badge?: NavigationRailBadge | null;
+}

package/src/components/wt-navigation-rail/wt-navigation-rail.vue

@@ -0,0 +1,108 @@
+<template>
+  <nav
+    v-if="hasItems"
+    class="wt-navigation-rail"
+    aria-label="Navigation rail"
+  >
+    <template v-for="section of sections" :key="section.name">
+      <div
+        v-if="section.items.length"
+        :class="['wt-navigation-rail__group', `wt-navigation-rail__group--${section.name}`]"
+      >
+        <ul class="wt-navigation-rail__list">
+          <li v-for="item of section.items" :key="item.id">
+            <navigation-rail-button
+              :item="item"
+              :active="item.id === activeItemId"
+              @select="emit('select', $event)"
+            />
+          </li>
+        </ul>
+      </div>
+    </template>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import NavigationRailButton from './_internals/navigation-rail-button.vue';
+import type { NavigationRailItem } from './types/WtNavigationRail';
+
+/**
+ * Vertical app navigation. Holds no routing logic: emits `select`,
+ * host application decides what to do (navigate, open panel, etc.).
+ * Lists are data-driven by props. Renders nothing while both lists are empty.
+ */
+const props = withDefaults(
+	defineProps<{
+		/** Buttons pinned to the top */
+		topItems?: NavigationRailItem[];
+		/** Buttons pinned to the bottom */
+		bottomItems?: NavigationRailItem[];
+		/** Id of the active item */
+		activeItemId?: string;
+	}>(),
+	{
+		topItems: () => [],
+		bottomItems: () => [],
+		activeItemId: '',
+	},
+);
+
+const hasItems = computed(
+	() => !!props.topItems.length || !!props.bottomItems.length,
+);
+
+const sections = computed(
+	() =>
+		[
+			{
+				name: 'top',
+				items: props.topItems,
+			},
+			{
+				name: 'bottom',
+				items: props.bottomItems,
+			},
+		] as const,
+);
+
+const emit = defineEmits<{
+	/** Fires on click of enabled item */
+	select: [
+		item: NavigationRailItem,
+	];
+}>();
+</script>
+
+<style scoped>
+.wt-navigation-rail {
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto;
+  gap: var(--wt-navigation-rail-gap);
+  box-sizing: border-box;
+  background: var(--wt-navigation-rail-background);
+  padding: var(--wt-navigation-rail-padding-y) var(--wt-navigation-rail-padding-x);
+  width: var(--wt-navigation-rail-width);
+  min-height: 0;
+}
+
+.wt-navigation-rail__group--bottom {
+  margin-top: auto;
+}
+
+.wt-navigation-rail__group,
+.wt-navigation-rail__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wt-navigation-rail-gap);
+}
+
+.wt-navigation-rail__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+</style>

package/src/components/wt-page/__tests__/WtPage.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 
 import WtPage from '../wt-page.vue';
 
@@ -32,4 +32,63 @@ describe('WtPage', () => {
 		const wrapper = shallowMount(WtPage);
 		expect(wrapper.find('.wt-page__header').exists()).toBe(false);
 	});
+
+	describe('navigation rail', () => {
+		const navigationRail = {
+			topItems: [
+				{
+					id: 'home',
+					icon: 'home',
+					label: 'Home',
+				},
+			],
+			activeItemId: 'home',
+		};
+		const mountPage = (props) =>
+			mount(WtPage, {
+				props,
+				global: {
+					stubs: {
+						WtButton: false,
+					},
+				},
+			});
+
+		it('does not render rail without navigationRail prop', () => {
+			const wrapper = mountPage({});
+			expect(wrapper.find('.wt-navigation-rail').exists()).toBe(false);
+		});
+
+		it('does not render rail while both lists are empty', () => {
+			const wrapper = mountPage({
+				navigationRail: {
+					topItems: [],
+					bottomItems: [],
+				},
+			});
+			expect(wrapper.find('.wt-navigation-rail').exists()).toBe(false);
+		});
+
+		it('renders rail outside of the body when a list is not empty', () => {
+			const wrapper = mountPage({
+				navigationRail,
+			});
+			expect(
+				wrapper.find('.wt-page__main > .wt-navigation-rail').exists(),
+			).toBe(true);
+			expect(wrapper.find('.wt-page__body .wt-navigation-rail').exists()).toBe(
+				false,
+			);
+		});
+
+		it('emits navigation-select on rail item click', async () => {
+			const wrapper = mountPage({
+				navigationRail,
+			});
+			await wrapper.find('button').trigger('click');
+			expect(wrapper.emitted('navigation-select')[0]).toEqual([
+				navigationRail.topItems[0],
+			]);
+		});
+	});
 });

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

@@ -3,18 +3,48 @@
     <div v-if="$slots.header" class="wt-page__header">
       <slot name="header" />
     </div>
-    <div class="wt-page__body">
-      <!-- @slot Layouts of the page -->
-      <slot />
+    <div class="wt-page__main">
+      <wt-navigation-rail
+        v-if="navigationRail"
+        :top-items="navigationRail.topItems"
+        :bottom-items="navigationRail.bottomItems"
+        :active-item-id="navigationRail.activeItemId"
+        @select="emit('navigation-select', $event)"
+      />
+      <div class="wt-page__body">
+        <!-- @slot Layouts of the page -->
+        <slot />
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import type { NavigationRailItem } from '../wt-navigation-rail/types/WtNavigationRail';
+import WtNavigationRail from '../wt-navigation-rail/wt-navigation-rail.vue';
+
 /**
  * Top structural level of the interface: header + body, where the body
  * distributes its width between one or more `wt-layout`s.
+ * Optional navigation rail is shown at the left of the body and
+ * is hidden while both of its lists are empty.
  */
+defineProps<{
+	/** Navigation rail config, rail is not rendered when omitted */
+	navigationRail?: {
+		topItems?: NavigationRailItem[];
+		bottomItems?: NavigationRailItem[];
+		activeItemId?: string;
+	};
+}>();
+
+const emit = defineEmits<{
+	/** Fires on click of enabled navigation rail item */
+	'navigation-select': [
+		item: NavigationRailItem,
+	];
+}>();
+
 defineSlots<{
 	header?: () => unknown;
 	default?: () => unknown;
@@ -38,6 +68,13 @@ defineSlots<{
   flex: 0 0 auto;
 }
 
+.wt-page__main {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+
 .wt-page__body {
   display: flex;
   position: relative;

package/src/css/components-variables.css

@@ -31,6 +31,7 @@
 @import "../components/wt-loader/_variables.css";
 @import "../components/wt-logo/_variables.css";
 @import "../components/wt-navigation-bar/_variables.css";
+@import "../components/wt-navigation-rail/_variables.css";
 @import "../components/wt-notifications-bar/_variables.css";
 @import "../components/wt-page/_variables.css";
 @import "../components/wt-page-wrapper/_variables.css";