@webitel/ui-sdk 26.8.21 → 26.8.23

package/src/components/wt-vidstack-player/components/controls-group/controls-group.vue

@@ -13,11 +13,9 @@
   setup
   lang="ts"
 >
-import { inject } from 'vue';
+import { useVidstackPlayerSize } from '../../composables/useVidstackPlayerSize';
 
-import type { WtVidstackPlayerSizeProvider } from '../../types/WtVidstackPlayerSizeProvider';
-
-const { size } = inject<WtVidstackPlayerSizeProvider>('size');
+const { size } = useVidstackPlayerSize();
 </script>
 
 <style scoped>

package/src/components/wt-vidstack-player/components/layouts/video-layout.vue

@@ -32,13 +32,11 @@
 </template>
 
 <script setup lang="ts">
-import { inject } from 'vue';
-
-import type { WtVidstackPlayerSizeProvider } from '../../types/WtVidstackPlayerSizeProvider';
+import { useVidstackPlayerSize } from '../../composables/useVidstackPlayerSize';
 import { PlaybackControlsPanel } from '../index';
 import VideoDisplayPanel from '../panels/video-display-panel/video-display-panel.vue';
 
-const { size } = inject<WtVidstackPlayerSizeProvider>('size');
+const { size } = useVidstackPlayerSize();
 
 const props = defineProps<{
 	title?: string;

package/src/components/wt-vidstack-player/components/panels/playback-controls-panel/components/buttons/fullscreen-button.vue

@@ -18,8 +18,6 @@
 </template>
 
 <script setup lang="ts">
-import { defineEmits } from 'vue';
-
 import WtIconBtn from '../../../../../../wt-icon-btn/wt-icon-btn.vue';
 
 const emit = defineEmits<{

package/src/components/wt-vidstack-player/components/panels/playback-controls-panel/components/buttons/play-button.vue

@@ -25,11 +25,9 @@
 </template>
 
 <script setup lang="ts">
-import { inject } from 'vue';
+import { useVidstackPlayerSize } from '../../../../../composables/useVidstackPlayerSize';
 
-import type { WtVidstackPlayerSizeProvider } from '../../../../../types/WtVidstackPlayerSizeProvider';
-
-const { size } = inject<WtVidstackPlayerSizeProvider>('size');
+const { size } = useVidstackPlayerSize();
 </script>
 
 <style scoped>.play-button {

package/src/components/wt-vidstack-player/components/panels/screen-sharing-controls-panel/screen-sharing-controls-panel.vue

@@ -36,14 +36,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject } from 'vue';
+import { computed } from 'vue';
 import { ControlsGroup } from '../../../../../components/wt-vidstack-player/components';
 import { ComponentSize } from '../../../../../enums';
 import type {
 	ScreenSharingSession,
 	ScreenshotStatus,
 } from '../../../../../modules/CallSession/types';
-import type { WtVidstackPlayerSizeProvider } from '../../../types/WtVidstackPlayerSizeProvider';
+import { useVidstackPlayerSize } from '../../../composables/useVidstackPlayerSize';
 
 interface Props {
 	session: ScreenSharingSession;
@@ -60,7 +60,7 @@ const emit = defineEmits<{
 	'toggle-record': [];
 }>();
 
-const { size } = inject<WtVidstackPlayerSizeProvider>('size');
+const { size } = useVidstackPlayerSize();
 
 const recordIcon = computed(() =>
 	props.session.recordings ? 'record-stop' : 'record-start',
@@ -85,7 +85,7 @@ const makeScreenshot = () => {
 	emit('make-screenshot');
 };
 
-const buttonSizeMap = {
+const buttonSizeMap: Record<string, ComponentSize> = {
 	[ComponentSize.SM]: ComponentSize.SM,
 	[ComponentSize.MD]: ComponentSize.MD,
 	[ComponentSize.LG]: ComponentSize.MD,

package/src/components/wt-vidstack-player/components/panels/video-call-controls-panel/video-call-controls-panel.vue

@@ -28,7 +28,7 @@
 			:disabled="!props['mic:accessed']"
 			:size="buttonSizeMap[size]"
 			:icon="microphoneIcon"
-			:badge="micBadge"
+			:badge="micBadge ?? undefined"
 			badge-severity="error"
 			variant="outlined"
 			color="secondary"
@@ -43,7 +43,7 @@
 			:disabled="!props['video:accessed']"
 			:size="buttonSizeMap[size]"
 			:icon="videoCamIcon"
-			:badge="videoBadge"
+			:badge="videoBadge ?? undefined"
 			badge-severity="error"
 			variant="outlined"
 			color="secondary"
@@ -231,7 +231,7 @@ const onScreenshotClick = () => {
 	);
 };
 
-const buttonSizeMap = {
+const buttonSizeMap: Record<string, ComponentSize> = {
 	[ComponentSize.SM]: ComponentSize.SM,
 	[ComponentSize.MD]: ComponentSize.MD,
 	[ComponentSize.LG]: ComponentSize.MD,

package/src/components/wt-vidstack-player/components/panels/video-display-panel/video-display-panel.vue

@@ -44,16 +44,16 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, onBeforeUnmount, onMounted } from 'vue';
+import { computed, onBeforeUnmount, onMounted } from 'vue';
 import { ComponentSize } from '../../../../../enums';
 import WtAvatar from '../../../../wt-avatar/wt-avatar.vue';
 import WtIconBtn from '../../../../wt-icon-btn/wt-icon-btn.vue';
-import type { WtVidstackPlayerSizeProvider } from '../../../types/WtVidstackPlayerSizeProvider';
+import { useVidstackPlayerSize } from '../../../composables/useVidstackPlayerSize';
 import FullscreenButton from '../../buttons/fullscreen-button.vue';
 import ToggleButton from '../../toggle-button.vue';
 
 const { size, fullscreen, changeSize, enterFullscreen } =
-	inject<WtVidstackPlayerSizeProvider>('size');
+	useVidstackPlayerSize();
 
 const toggleIcon = computed(() =>
 	size.value === ComponentSize.SM ? 'expand' : 'collapse',
@@ -102,7 +102,7 @@ const exitFullscreen = () => {
 	}
 };
 
-const handleKeyUp = (event) => {
+const handleKeyUp = (event: KeyboardEvent) => {
 	if (event.key === 'Escape') {
 		handleFullscreen(false);
 	}

package/src/components/wt-vidstack-player/components/screenshot-box/screenshot-box.vue

@@ -13,7 +13,7 @@
         overlay-icon="zoom-in"
       />
       <button class="close-btn" @click.stop="onClose">
-        <wt-icon icon="close--filled" size="sm" color="light" />
+        <wt-icon icon="close--filled" size="sm" />
       </button>
     </div>
   </div>

package/src/components/wt-vidstack-player/composables/useVidstackPlayerSize.ts

@@ -0,0 +1,11 @@
+import { inject } from 'vue';
+
+import type { WtVidstackPlayerSizeProvider } from '../types/WtVidstackPlayerSizeProvider';
+
+export const useVidstackPlayerSize = (): WtVidstackPlayerSizeProvider => {
+	const provided = inject<WtVidstackPlayerSizeProvider>('size');
+	if (!provided) {
+		throw new Error('wt-vidstack-player: "size" context is not provided');
+	}
+	return provided;
+};

package/src/components/wt-vidstack-player/composables/useVidstackSrc.ts

@@ -1,34 +1,55 @@
 import type { PlayerSrc } from 'vidstack';
-import { computed, toRef } from 'vue';
+import { computed, type MaybeRef, toRef } from 'vue';
 
 import { normalizeVidstackMediaSrc } from '../utils/normalizeVidstackMediaSrc';
 
-export const useVidstackSrc = ({ src, type, stream }) => {
+interface VidstackSrcObject {
+	src?: unknown;
+	type?: string;
+}
+
+export type VidstackSrcInput = string | VidstackSrcObject | undefined;
+
+export const useVidstackSrc = ({
+	src,
+	type,
+	stream,
+}: {
+	src?: MaybeRef<VidstackSrcInput>;
+	type?: MaybeRef<string | undefined>;
+	stream?: MaybeRef<MediaStream | undefined>;
+}) => {
 	const srcRef = toRef(src);
 	const typeRef = toRef(type);
 	const streamRef = toRef(stream);
 
+	const srcObject = computed<VidstackSrcObject | undefined>(() =>
+		typeof srcRef.value === 'object' ? srcRef.value : undefined,
+	);
+
 	const normalizedType = computed(() => {
 		if (streamRef.value) return 'video/object';
 
-		return typeRef.value || srcRef.value?.type;
+		return typeRef.value || srcObject.value?.type;
 	});
 
 	const normalizedSrcValue = computed(() => {
 		if (streamRef.value) return streamRef.value;
 
 		const src =
-			typeof srcRef.value === 'string' ? srcRef.value : srcRef.value?.src;
+			typeof srcRef.value === 'string' ? srcRef.value : srcObject.value?.src;
 
 		if (src instanceof Blob) return src; // https://webitel.atlassian.net/browse/WTEL-9633
 
-		return src?.replace('/download', '/stream'); // fixme https://webitel.atlassian.net/browse/WTEL-8723?focusedCommentId=733348
+		return typeof src === 'string'
+			? src.replace('/download', '/stream') // fixme https://webitel.atlassian.net/browse/WTEL-8723?focusedCommentId=733348
+			: src;
 	});
 
 	const normalizedSrcObject = computed<PlayerSrc>(() => {
 		return normalizeVidstackMediaSrc({
 			src: normalizedSrcValue.value,
-			type: normalizedType.value,
+			type: normalizedType.value ?? '',
 		}) as PlayerSrc;
 	});
 

package/src/components/wt-vidstack-player/wt-vidstack-player.vue

@@ -52,15 +52,18 @@
 <script lang="ts" setup>
 import 'vidstack/player';
 import 'vidstack/player/ui';
-import type { MediaSrc } from 'vidstack';
 import { computed, provide, ref, toRefs, useTemplateRef } from 'vue';
 
 import { ComponentSize } from '../../enums';
 import { VideoLayout } from './components';
-import { useVidstackSrc } from './composables/useVidstackSrc';
+import {
+	useVidstackSrc,
+	type VidstackSrcInput,
+} from './composables/useVidstackSrc';
 
 interface Props {
-	src?: MediaSrc;
+	/** loose on purpose: `useVidstackSrc` normalizes it into a vidstack `MediaSrc` */
+	src?: VidstackSrcInput;
 	mime?: string;
 	autoplay?: boolean;
 	muted?: boolean;
@@ -116,7 +119,7 @@ defineExpose({
 const size = ref(props.size || ComponentSize.SM);
 const fullscreen = ref(false);
 
-const changeSize = (value) => {
+const changeSize = (value: ComponentSize) => {
 	size.value = value;
 	emit('change-size', value);
 };

package/src/enums/MessageColor/MessageColor.ts

@@ -7,4 +7,4 @@ export const MessageColor = {
 	CONTRAST: 'contrast',
 } as const;
 
-export type MessageColor = keyof typeof MessageColor;
+export type MessageColor = (typeof MessageColor)[keyof typeof MessageColor];

package/src/enums/MessageVariant/MessageVariant.ts

@@ -4,4 +4,5 @@ export const MessageVariant = {
 	SIMPLE: 'simple',
 } as const;
 
-export type MessageVariant = keyof typeof MessageVariant;
+export type MessageVariant =
+	(typeof MessageVariant)[keyof typeof MessageVariant];

package/src/install.ts

@@ -6,7 +6,7 @@ import './css/tailwind.css';
 
 import { generateInstance } from '@webitel/api-services/api/axios';
 import type { AxiosInstance } from 'axios';
-import type { App } from 'vue';
+import type { App, Component } from 'vue';
 import type { Router } from 'vue-router';
 import { fillIconsRepository } from './assets/icons';
 import Components from './components'; // init all components
@@ -35,7 +35,11 @@ const plugin: WebitelUiPlugin = {
 			app.directive(name, Directives[name as keyof typeof Directives]);
 		});
 		Object.keys(Components).forEach((name) => {
-			app.component(name, Components[name as keyof typeof Components]);
+			// the component union is too large to instantiate (TS2590)
+			app.component(
+				name,
+				Components[name as keyof typeof Components] as Component,
+			);
 		});
 		Object.keys(globals).forEach((globalKey) => {
 			app.provide(globalKey, globals[globalKey]);

package/src/locale/en/en.js

@@ -492,6 +492,8 @@ export default deepmerge(
 			nameAlreadyInUse: 'This name is already in use',
 			phoneNumberSymbolsValidator:
 				"Number must contain letters (a-z, A-Z), numbers (0-9), and special characters: +, -, _, ., !, ~, *, ', (,)",
+			sipPasswordSymbolsValidator:
+				'Password cannot contain special symbols and whitespaces',
 			loginValidator: () => `Enter login in the format name${'@'}domain`,
 		},
 		webitelUI: {
@@ -664,6 +666,7 @@ export default deepmerge(
 					[RelativeDatetimeValue.ThisMonth]: 'This month',
 					[RelativeDatetimeValue.Custom]: 'Custom date range',
 				},
+				andMore: 'and {count} more',
 				addFilter: ({ linked }) => {
 					return `${linked('reusable.add')} a ${linked(
 						'reusable.filter',

package/src/locale/es/es.js

@@ -478,6 +478,8 @@ export default {
 		nameAlreadyInUse: 'Este nombre ya está en uso',
 		phoneNumberSymbolsValidator:
 			"El número solo puede contener letras (a-z, A-Z), números (0-9) y los símbolos: +, -, _, ., !, ~, *, ', (, )",
+		sipPasswordSymbolsValidator:
+			'La contraseña no puede contener símbolos especiales ni espacios',
 		loginValidator: () =>
 			`Introduzca el inicio de sesión en el formato nombre${'@'}dominio`,
 	},
@@ -652,6 +654,7 @@ export default {
 				[RelativeDatetimeValue.ThisMonth]: 'Este mes',
 				[RelativeDatetimeValue.Custom]: 'Rango de fechas personalizado',
 			},
+			andMore: 'y {count} más',
 			addFilter: ({ linked }) => {
 				return `${linked('reusable.add')} un ${linked(
 					'reusable.filter',

package/src/locale/kz/kz.js

@@ -480,6 +480,8 @@ export default {
 		nameAlreadyInUse: 'Бұл атау қолданыста',
 		phoneNumberSymbolsValidator:
 			"Нөмірде тек әріптер (a-z, A-Z), сандар (0-9) және мына таңбалар болуы мүмкін: +, -, _, ., !, ~, *, ', (, )",
+		sipPasswordSymbolsValidator:
+			'Құпия сөзде арнайы таңбалар мен бос орындар болмауы керек',
 		loginValidator: () => `Логинді есім${'@'}домен форматында енгізіңіз`,
 	},
 	webitelUI: {
@@ -653,6 +655,7 @@ export default {
 				[RelativeDatetimeValue.ThisMonth]: 'Осы ай',
 				[RelativeDatetimeValue.Custom]: 'Жеке күн аралығы',
 			},
+			andMore: 'және тағы {count}',
 			addFilter: ({ linked }) => {
 				return `${linked('reusable.add')} ${linked(
 					'reusable.filter',

package/src/locale/pl/pl.js

@@ -481,6 +481,8 @@ export default {
 		nameAlreadyInUse: 'Ta nazwa jest już używana',
 		phoneNumberSymbolsValidator:
 			"Numer może zawierać wyłącznie litery (a-z, A-Z), cyfry (0-9) oraz symbole: +, -, _, ., !, ~, *, ', (, )",
+		sipPasswordSymbolsValidator:
+			'Hasło nie może zawierać znaków specjalnych ani spacji',
 		loginValidator: () => `Wprowadź login w formacie nazwa${'@'}domena`,
 	},
 	webitelUI: {
@@ -653,6 +655,7 @@ export default {
 				[RelativeDatetimeValue.ThisMonth]: 'Ten miesiąc',
 				[RelativeDatetimeValue.Custom]: 'Niestandardowy zakres dat',
 			},
+			andMore: 'i jeszcze {count}',
 			addFilter: ({ linked }) => {
 				return `${linked('reusable.add')} ${linked(
 					'reusable.filter',

package/src/locale/ro/ro.js

@@ -485,6 +485,8 @@ export default {
 		nameAlreadyInUse: 'Acest nume este deja folosit',
 		phoneNumberSymbolsValidator:
 			"Numărul poate conține doar litere (a-z, A-Z), cifre (0-9) și simbolurile: +, -, _, ., !, ~, *, ', (, )",
+		sipPasswordSymbolsValidator:
+			'Parola nu poate conține simboluri speciale sau spații',
 		loginValidator: () => `Introduceți login-ul în formatul nume${'@'}domeniu`,
 	},
 	webitelUI: {
@@ -658,6 +660,7 @@ export default {
 				[RelativeDatetimeValue.ThisMonth]: 'Această lună',
 				[RelativeDatetimeValue.Custom]: 'Interval personalizat',
 			},
+			andMore: 'și încă {count}',
 			addFilter: ({ linked }) => {
 				return `${linked('reusable.add')} un ${linked(
 					'reusable.filter',

package/src/locale/ru/ru.js

@@ -480,6 +480,8 @@ export default {
 		nameAlreadyInUse: 'Это название уже используется',
 		phoneNumberSymbolsValidator:
 			"Номер может содержать только буквы (a-z, A-Z), цифры (0-9) и символы: +, -, _, ., !, ~, *, ', (, )",
+		sipPasswordSymbolsValidator:
+			'Пароль не может содержать спецсимволы и пробелы',
 		loginValidator: () => `Введите логин в формате имя${'@'}домен`,
 	},
 	webitelUI: {
@@ -648,6 +650,7 @@ export default {
 				[RelativeDatetimeValue.ThisMonth]: 'Этот месяц',
 				[RelativeDatetimeValue.Custom]: 'Выбранный диапазон дат',
 			},
+			andMore: 'и ещё {count}',
 			addFilter: ({ linked }) => {
 				return `${linked('reusable.add')} ${linked(
 					'reusable.filter',

package/src/locale/uk/uk.js

@@ -479,6 +479,8 @@ export default {
 		nameAlreadyInUse: 'Така назва вже використовується',
 		phoneNumberSymbolsValidator:
 			"Номер може містити лише літери (a-z, A-Z), цифри (0-9) та символи: +, -, _, ., !, ~, *, ', (, )",
+		sipPasswordSymbolsValidator:
+			'Пароль не може містити спецсимволи та пробіли',
 		loginValidator: () => `Введіть логін у форматі імʼя${'@'}домен`,
 	},
 	webitelUI: {
@@ -647,6 +649,7 @@ export default {
 				[RelativeDatetimeValue.ThisMonth]: 'Цей місяць',
 				[RelativeDatetimeValue.Custom]: 'Власний діапазон дат',
 			},
+			andMore: 'та ще {count}',
 			addFilter: ({ linked }) => {
 				return `${linked('reusable.add')} ${linked(
 					'reusable.filter',

package/src/locale/uz/uz.js

@@ -485,6 +485,8 @@ export default {
 		nameAlreadyInUse: 'Ushbu nom allaqachon mavjud',
 		phoneNumberSymbolsValidator:
 			"Raqamda faqat harflar (a-z, A-Z), raqamlar (0-9) va quyidagi belgilar bo'lishi mumkin: +, -, _, ., !, ~, *, ', (, )",
+		sipPasswordSymbolsValidator:
+			"Parol maxsus belgilar va bo'sh joylarni o'z ichiga olishi mumkin emas",
 		loginValidator: () => `Loginni ism${'@'}domen formatida kiriting`,
 	},
 	webitelUI: {
@@ -657,6 +659,7 @@ export default {
 				[RelativeDatetimeValue.ThisMonth]: 'Ushbu oy',
 				[RelativeDatetimeValue.Custom]: "Boshqa sana oralig'i",
 			},
+			andMore: 'va yana {count}',
 			addFilter: ({ linked }) => {
 				return `${linked('reusable.add')} ${linked(
 					'reusable.filter',

package/src/locale/vi/vi.js

@@ -484,6 +484,8 @@ export default {
 		nameAlreadyInUse: 'Tên này đã được sử dụng',
 		phoneNumberSymbolsValidator:
 			"Số chỉ được chứa chữ cái (a-z, A-Z), chữ số (0-9) và các ký tự: +, -, _, ., !, ~, *, ', (, )",
+		sipPasswordSymbolsValidator:
+			'Mật khẩu không được chứa ký tự đặc biệt và khoảng trắng',
 		loginValidator: () => `Nhập tên đăng nhập theo định dạng tên${'@'}miền`,
 	},
 	webitelUI: {
@@ -656,6 +658,7 @@ export default {
 				[RelativeDatetimeValue.ThisMonth]: 'Tháng này',
 				[RelativeDatetimeValue.Custom]: 'Phạm vi ngày tùy chỉnh',
 			},
+			andMore: 'và {count} nữa',
 			addFilter: ({ linked }) => {
 				return `${linked('reusable.add')} một ${linked(
 					'reusable.filter',

package/src/mixins/validationMixin/regle/useRegleValidation.ts

@@ -2,7 +2,7 @@ import type { SuperCompatibleRegleFieldStatus } from '@regle/core';
 import { type ComputedRef, computed, type Ref } from 'vue';
 
 export type UseFieldValidationParams = {
-	field?: Ref<SuperCompatibleRegleFieldStatus>;
+	field?: Ref<SuperCompatibleRegleFieldStatus | undefined | null>;
 };
 
 export type UseFieldValidationReturn = {
@@ -14,7 +14,7 @@ export const useFieldValidation = ({
 	field: fieldRef,
 }: UseFieldValidationParams): UseFieldValidationReturn => {
 	const invalid = computed(() => {
-		return fieldRef?.value.$error ?? null;
+		return fieldRef?.value?.$error ?? null;
 	});
 
 	const validationText = computed(() => {

package/src/mixins/validationMixin/useValidation.ts

@@ -54,7 +54,7 @@ export const useValidation = ({
 
 	const validationText = computed(() => {
 		return isRegleValidation.value
-			? regleValidationText.value
+			? regleValidationText?.value
 			: vuelidateValidationText.value;
 	});
 

package/src/mixins/validationMixin/vuelidate/useVuelidateValidation.ts

@@ -9,14 +9,24 @@ import {
 } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-type CompatCustomValidator = {
+export type CompatCustomValidator = {
 	name: string;
 	text: string;
 };
 
+/**
+ * Structural on purpose: inlining `@vuelidate/core`'s `Validation` blows up
+ * prop-type inference in the components (TS2590). `false` is accepted because
+ * callers write `:v="!disableValidation && v$.field"` to opt out.
+ */
+// biome-ignore lint/suspicious/noExplicitAny: dynamic per-rule keys
+export type VuelidateFieldLike = Record<string, any> | null | false;
+
 export type UseFieldValidationParams = {
-	field?: Ref<Validation>;
-	customValidators?: CompatCustomValidator[];
+	field?: Ref<VuelidateFieldLike | undefined>;
+	customValidators?:
+		| CompatCustomValidator[]
+		| Ref<CompatCustomValidator[] | undefined>;
 };
 
 export const useFieldValidation = ({
@@ -26,27 +36,32 @@ export const useFieldValidation = ({
 	const { t } = useI18n();
 
 	// support vue options api, where v is a reactive, not ref
-	let v: Ref<Validation> | ComputedRef<Validation | undefined> | undefined =
-		inputV;
+	let v:
+		| Ref<VuelidateFieldLike | undefined>
+		| ComputedRef<VuelidateFieldLike | undefined>
+		| undefined = inputV;
 	let customValidators:
 		| CompatCustomValidator[]
+		| Ref<CompatCustomValidator[] | undefined>
 		| ComputedRef<CompatCustomValidator[] | undefined>
 		| undefined = inputCustomValidators;
 
 	if (isReactive(inputV)) {
 		v = computed(() => unref(inputV));
-		customValidators = computed(() => inputCustomValidators);
+		customValidators = computed(() => unref(inputCustomValidators));
 	}
 	// end
 
 	const isValidation = computed(
 		() => !!v && !!v.value && !!Object.keys(v.value).length,
 	);
-	const invalid = computed(() => isValidation.value && v?.value?.$error);
+	const invalid = computed(
+		() => isValidation.value && !!(v?.value as Validation | undefined)?.$error,
+	);
 
 	const validationText = computed(() => {
 		let validationText = '';
-		const validation = v?.value;
+		const validation = v?.value as Validation | undefined;
 		if (validation && isValidation.value && invalid.value) {
 			if (validation.required?.$invalid)
 				validationText = t('validation.required');
@@ -100,6 +115,8 @@ export const useFieldValidation = ({
 				validationText = t('validation.nameAlreadyInUse');
 			} else if (validation.phoneNumberSymbolsValidator?.$invalid) {
 				validationText = t('validation.phoneNumberSymbolsValidator');
+			} else if (validation.sipPasswordSymbolsValidator?.$invalid) {
+				validationText = t('validation.sipPasswordSymbolsValidator');
 			} else if (validation.loginValidator?.$invalid) {
 				validationText = t('validation.loginValidator');
 			}

package/src/modules/CSVExport/CSVExport.js

@@ -24,7 +24,7 @@ export default class CSVExport {
 		count: 0,
 	};
 
-	constructor(fetchMethod, { filename, delimiter }) {
+	constructor(fetchMethod, { filename, delimiter } = {}) {
 		if (!fetchMethod) throw new Error('fetch method should be specified!');
 		this.fetchMethod = fetchMethod;
 		this.filename = filename;