@webitel/ui-sdk 26.6.70 → 26.6.72

package/package.json

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

package/src/assets/icons/sprite/error.svg

@@ -1,4 +1,4 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.2422 8.58594C14.6327 8.19541 15.2657 8.19541 15.6562 8.58594C16.0468 8.97646 16.0468 9.60948 15.6562 10L13.5352 12.1211L15.6562 14.2432C16.0466 14.6337 16.0467 15.2668 15.6562 15.6572C15.2658 16.0475 14.6327 16.0475 14.2422 15.6572L12.1211 13.5352L9.99902 15.6572C9.60847 16.0474 8.97536 16.0476 8.58496 15.6572C8.19456 15.2668 8.19481 14.6337 8.58496 14.2432L10.707 12.1211L8.58496 10C8.19468 9.60952 8.19468 8.97641 8.58496 8.58594C8.97542 8.19548 9.60848 8.1956 9.99902 8.58594L12.1211 10.707L14.2422 8.58594Z" fill="#E54C4C"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4Z" fill="#E54C4C"/>
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.2422 8.58594C14.6327 8.19541 15.2657 8.19541 15.6562 8.58594C16.0468 8.97646 16.0468 9.60948 15.6562 10L13.5352 12.1211L15.6562 14.2432C16.0466 14.6337 16.0467 15.2668 15.6562 15.6572C15.2658 16.0475 14.6327 16.0475 14.2422 15.6572L12.1211 13.5352L9.99902 15.6572C9.60847 16.0474 8.97536 16.0476 8.58496 15.6572C8.19456 15.2668 8.19481 14.6337 8.58496 14.2432L10.707 12.1211L8.58496 10C8.19468 9.60952 8.19468 8.97641 8.58496 8.58594C8.97542 8.19548 9.60848 8.1956 9.99902 8.58594L12.1211 10.707L14.2422 8.58594Z" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4Z" />
 </svg>

package/src/components/wt-datepicker/_internals/composables/usePreventZeroPad.ts

@@ -0,0 +1,72 @@
+import { onMounted, onUnmounted } from 'vue';
+
+/**
+ * @author @HlukhovYe
+ *
+ * https://webitel.atlassian.net/browse/WTEL-9865
+ *
+ * Prevents PrimeVue's DatePicker from zero-padding a dd/mm segment while the user
+ * is mid-typing. Without this, typing "2" into a cleared two-digit slot immediately
+ * reformats to "02", forcing the user to delete the leading zero before the second digit.
+ *
+ * Works by registering two listeners on the same input event:
+ * - capture phase (before PrimeVue): snapshots the partial single-digit value
+ * - bubble phase (after PrimeVue): if PrimeVue zero-padded the value, restores the
+ *   snapshot and cancels further propagation so the model is not updated yet
+ */
+export function usePreventZeroPad(getInput: () => HTMLInputElement | null) {
+	let pendingPartial: {
+		value: string;
+		cursor: number;
+	} | null = null;
+
+	function onInputCapture(event: Event) {
+		const input = event.target as HTMLInputElement;
+		const raw = input.value;
+		const cursor = input.selectionStart ?? 0;
+		const parts = raw.split('/');
+		let offset = 0;
+		for (let i = 0; i < Math.min(parts.length, 2); i++) {
+			const seg = parts[i];
+			const segEnd = offset + seg.length;
+			if (cursor <= segEnd && seg.length === 1 && /^\d$/.test(seg)) {
+				pendingPartial = {
+					value: raw,
+					cursor,
+				};
+				return;
+			}
+			offset = segEnd + 1;
+		}
+	}
+
+	function onInputBubble(event: Event) {
+		if (!pendingPartial) return;
+		const input = event.target as HTMLInputElement;
+		const { value, cursor } = pendingPartial;
+		pendingPartial = null;
+		if (input.value !== value) {
+			input.value = value;
+			input.setSelectionRange(cursor, cursor);
+			event.stopImmediatePropagation();
+		}
+	}
+
+	onMounted(() => {
+		const input = getInput();
+		if (!input) return;
+		input.addEventListener('input', onInputCapture, {
+			capture: true,
+		});
+		input.addEventListener('input', onInputBubble);
+	});
+
+	onUnmounted(() => {
+		const input = getInput();
+		if (!input) return;
+		input.removeEventListener('input', onInputCapture, {
+			capture: true,
+		});
+		input.removeEventListener('input', onInputBubble);
+	});
+}

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

@@ -150,6 +150,7 @@ import {
 	MessageVariant,
 } from '../../enums';
 import { useValidation } from '../../mixins/validationMixin/useValidation';
+import { usePreventZeroPad } from './_internals/composables/usePreventZeroPad';
 
 interface Props extends DatePickerProps {
 	showTime?: boolean;
@@ -199,6 +200,8 @@ const datepicker = useTemplateRef<HTMLDivElement>('datepicker');
 
 const datepickerId = `datepicker-${Math.random().toString(36).slice(2, 11)}`;
 
+usePreventZeroPad(() => datepicker.value?.$el?.querySelector('input'));
+
 const getPlaceholder = computed(() => {
 	return props.placholder || `dd/mm/yyyy ${props.showTime ? 'hh:mm' : ''}`;
 });

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

@@ -4,7 +4,7 @@
       <template v-if="message">
         <wt-icon
           :icon="severityToIconNameMap[message.severity] ?? ''"
-          :color="severityToIconColorMap[message.severity] ?? MessageColor.CONTRAST"
+          :style="getIconColor(message)"
           class="p-toast-message-icon"
         />
         <div class="p-toast-message-text">
@@ -46,6 +46,9 @@ const severityToIconColorMap: Record<string, string> = {
 	contrast: MessageColor.CONTRAST,
 	secondary: MessageColor.SECONDARY,
 };
+
+const getIconColor = (message) =>
+	`fill: var(--p-toast-${severityToIconColorMap[message.severity]}-icon-color)`;
 </script>
 
 <style>

package/src/plugins/primevue/theme/components/toast/toast.js

@@ -4,7 +4,7 @@ import { MessageColor } from '../../../../../enums';
 
 const generateCloseIconCss = ({ colorName, dt }) => `
   .p-toast-message-${colorName} .p-toast-close-button svg {
-    fill: ${dt(`toast.${colorName}.color`)};
+    fill: ${dt(`toast.${colorName}.icon-color`)};
   }
 `;
 

package/types/components/wt-datepicker/_internals/composables/usePreventZeroPad.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @author @HlukhovYe
+ *
+ * https://webitel.atlassian.net/browse/WTEL-9865
+ *
+ * Prevents PrimeVue's DatePicker from zero-padding a dd/mm segment while the user
+ * is mid-typing. Without this, typing "2" into a cleared two-digit slot immediately
+ * reformats to "02", forcing the user to delete the leading zero before the second digit.
+ *
+ * Works by registering two listeners on the same input event:
+ * - capture phase (before PrimeVue): snapshots the partial single-digit value
+ * - bubble phase (after PrimeVue): if PrimeVue zero-padded the value, restores the
+ *   snapshot and cancels further propagation so the model is not updated yet
+ */
+export declare function usePreventZeroPad(getInput: () => HTMLInputElement | null): void;

package/types/plugins/primevue/theme/components/toast/toast.d.ts

@@ -9,6 +9,7 @@ declare const toast: {
                 background: string;
                 borderColor: string;
                 color: string;
+                iconColor: string;
                 detailColor: string;
                 shadow: string;
                 closeButton: {
@@ -23,6 +24,7 @@ declare const toast: {
                 background: string;
                 borderColor: string;
                 color: string;
+                iconColor: string;
                 detailColor: string;
                 shadow: string;
                 closeButton: {
@@ -37,6 +39,7 @@ declare const toast: {
                 background: string;
                 borderColor: string;
                 color: string;
+                iconColor: string;
                 detailColor: string;
                 shadow: string;
                 closeButton: {
@@ -51,6 +54,7 @@ declare const toast: {
                 background: string;
                 borderColor: string;
                 color: string;
+                iconColor: string;
                 detailColor: string;
                 shadow: string;
                 closeButton: {
@@ -65,6 +69,7 @@ declare const toast: {
                 background: string;
                 borderColor: string;
                 color: string;
+                iconColor: string;
                 detailColor: string;
                 shadow: string;
                 closeButton: {
@@ -79,6 +84,7 @@ declare const toast: {
                 background: string;
                 borderColor: string;
                 color: string;
+                iconColor: string;
                 detailColor: string;
                 shadow: string;
                 closeButton: {
@@ -98,6 +104,7 @@ declare const toast: {
                 background: string;
                 borderColor: string;
                 color: string;
+                iconColor: string;
                 detailColor: string;
                 shadow: string;
                 closeButton: {
@@ -112,6 +119,7 @@ declare const toast: {
                 background: string;
                 borderColor: string;
                 color: string;
+                iconColor: string;
                 detailColor: string;
                 shadow: string;
                 closeButton: {
@@ -126,6 +134,7 @@ declare const toast: {
                 background: string;
                 borderColor: string;
                 color: string;
+                iconColor: string;
                 detailColor: string;
                 shadow: string;
                 closeButton: {
@@ -140,6 +149,7 @@ declare const toast: {
                 background: string;
                 borderColor: string;
                 color: string;
+                iconColor: string;
                 detailColor: string;
                 shadow: string;
                 closeButton: {
@@ -154,6 +164,7 @@ declare const toast: {
                 background: string;
                 borderColor: string;
                 color: string;
+                iconColor: string;
                 detailColor: string;
                 shadow: string;
                 closeButton: {
@@ -168,6 +179,7 @@ declare const toast: {
                 background: string;
                 borderColor: string;
                 color: string;
+                iconColor: string;
                 detailColor: string;
                 shadow: string;
                 closeButton: {