@webitel/ui-sdk 25.8.41 → 25.8.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.8.41",
+  "version": "25.8.43",
   "private": false,
   "scripts": {
     "make-all": "npm version patch --git-tag-version false && npm run build && (npm run build:types || true) && (npm run lint:fix || true) && npm run publish-lib",
@@ -56,7 +56,7 @@
     "@vuepic/vue-datepicker": "^4.5.1",
     "@vueuse/components": "^13.0.0",
     "@webitel/api-services": "^0.0.33",
-    "@webitel/styleguide": "^24.12.47",
+    "@webitel/styleguide": "^24.12.49",
     "autosize": "^6.0.1",
     "axios": "^1.8.3",
     "clipboard-copy": "^4.0.1",
@@ -82,7 +82,7 @@
     "vue-multiselect": "^3.1.0",
     "vue-observe-visibility": "^2.0.0-alpha.1",
     "vue-router": "^4.5.0",
-    "webitel-sdk": "^25.5.4",
+    "webitel-sdk": "^25.5.6",
     "xlsx": "0.18.5",
     "zod": "^3.25.55"
   },

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

@@ -1,4 +1,3 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd"
-          d="M18.1213 7.29289C18.5118 7.68342 18.5118 8.31658 18.1213 8.70711L11.1213 15.7071C10.3403 16.4882 9.07394 16.4882 8.29289 15.7071L5.29289 12.7071C4.90237 12.3166 4.90237 11.6834 5.29289 11.2929C5.68342 10.9024 6.31658 10.9024 6.70711 11.2929L9.35355 13.9393C9.54882 14.1346 9.8654 14.1346 10.0607 13.9393L16.7071 7.29289C17.0976 6.90237 17.7308 6.90237 18.1213 7.29289Z"/>
+<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6943 2.31518C14.1019 2.73542 14.1019 3.41676 13.6943 3.837L6.38863 11.3696C5.57348 12.2101 4.25185 12.2101 3.43669 11.3696L0.305684 8.14137C-0.101895 7.72113 -0.101895 7.03978 0.305684 6.61954C0.713262 6.19931 1.37408 6.19931 1.78165 6.61954L4.54367 9.46736C4.74746 9.67748 5.07787 9.67748 5.28166 9.46736L12.2183 2.31518C12.6259 1.89494 13.2867 1.89494 13.6943 2.31518Z" style="fill-opacity:1;"/>
 </svg>

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

@@ -8,7 +8,16 @@
       :disabled="disabled"
       :value="value"
       :binary="isSingle"
-    />
+    >
+      <template #icon>
+        <span class="wt-checkbox__checkmark">
+          <wt-icon
+            :color="iconColor"
+            :icon="checkboxIcon"
+          />
+        </span>
+      </template>
+    </p-checkbox>
     <wt-label 
       v-if="label"
       :for="checkboxId"
@@ -57,6 +66,16 @@ const isChecked = computed(() => {
   }
   return model.value.includes(props.value);
 });
+
+const checkboxIcon = computed(() => {
+  return isChecked.value ? 'tick' : '';
+})
+
+const iconColor = computed(() => {
+  if (props.disabled) return 'disabled';
+  if (isChecked.value) return 'active';
+  return null;
+})
 </script>
 
 <style lang="scss">
@@ -71,6 +90,10 @@ const isChecked = computed(() => {
   user-select: none;
 }
 
+.wt-checkbox__checkmark {
+  display: inline-flex;
+}
+
 .wt-checkbox__label {
   transition: var(--transition);
   cursor: pointer;

package/src/modules/Notifications/store/NotificationsStoreModule.js

@@ -1,30 +1,36 @@
-import { CallActions, ChatActions, JobState } from 'webitel-sdk';
+import { CallActions, ChannelState, ChatActions, JobState } from 'webitel-sdk';
 
 import i18n from '../../../locale/i18n.js';
 import BaseStoreModule from '../../../store/BaseStoreModules/BaseStoreModule.js';
-import endChatSound from '../assets/audio/end-chat.wav';
-import newChatSound from '../assets/audio/new-chat.wav';
-import newMessageSound from '../assets/audio/new-message.wav';
+import endChatSound from '../assets/audio/chat-end.wav';
+import newChatSound from '../assets/audio/chat-new.wav';
+import newMessageSound from '../assets/audio/chat-new-message.wav';
+import endCallSound from '../assets/audio/end-call.wav';
 import ringingSound from '../assets/audio/ringing.mp3';
-import triggerSound from '../assets/audio/triggerSound.js';
+import endTask from '../assets/audio/task-end.wav';
+import newTask from '../assets/audio/task-new.wav';
 import notificationIcon from '../assets/img/notification-icon.png';
 
 const NOTIFICATION_VISIBLE_INTERVAL = 2000;
 
 const getNotificationSound = (action) => {
   switch (action) {
-    case ChatActions.UserInvite:
     case JobState.Distribute:
-      return new Audio(newChatSound);
+      return new Audio(newTask);
+    case JobState.Closed:
+    case ChannelState.WrapTime:
+      return new Audio(endTask);
     case ChatActions.Message:
       return new Audio(newMessageSound);
+    case ChatActions.UserInvite:
+      return new Audio(newChatSound);
     case ChatActions.Close:
       return new Audio(endChatSound);
     case CallActions.Ringing:
       // default call ringtone sound
       return new Audio(ringingSound);
     case CallActions.Hangup:
-      return triggerSound();
+      return new Audio(endCallSound);
     default:
       return false;
   }
@@ -161,7 +167,7 @@ export default class NotificationsStoreModule extends BaseStoreModule {
         interval = NOTIFICATION_VISIBLE_INTERVAL,
       },
     ) => {
-      const notification = new Notification(text, { icon });
+      const notification = new Notification(text, { icon, silent: true });
 
       notification.addEventListener(
         'click',

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

@@ -3,6 +3,30 @@ import { CheckboxScheme } from "@webitel/styleguide/component-schemes";
 const checkbox = {
   ...CheckboxScheme.sizes,
   colorScheme: CheckboxScheme.colorScheme,
+
+  css: ({ dt }) => `
+        .p-checkbox-box .wt-icon__icon {
+            color: ${dt('checkbox.icon.color')};
+            width: ${dt('checkbox.icon.size')};
+            height: ${dt('checkbox.icon.size')};
+        }
+
+        .p-checkbox-box .wt-icon--color-active .wt-icon__icon {
+            color: ${dt('checkbox.icon.checkedColor')};
+        }
+
+        .p-checkbox-box .wt-icon--color-disabled .wt-icon__icon {
+            color: ${dt('checkbox.icon.disabledColor')};
+        }
+
+        .p-checkbox:hover .wt-icon--color-active .wt-icon__icon {
+            color: ${dt('checkbox.icon.checkedHoverColor')};
+        }
+
+        .wt-checkbox:has(.wt-label:hover) .wt-icon--color-active .wt-icon__icon {
+            color: ${dt('checkbox.icon.checkedHoverColor')};
+        }
+        `,
 };
 
 export default checkbox;

package/types/components/wt-checkbox/wt-checkbox.vue.d.ts

@@ -9,23 +9,27 @@ declare const model: import("vue").ModelRef<boolean | string[], string, boolean
 declare const checkboxId: string;
 declare const isSingle: import("vue").ComputedRef<boolean>;
 declare const isChecked: import("vue").ComputedRef<any>;
+declare const checkboxIcon: import("vue").ComputedRef<"" | "tick">;
+declare const iconColor: import("vue").ComputedRef<"active" | "disabled">;
 type __VLS_PublicProps = __VLS_Props & {
     'selected': boolean | string[];
 };
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_9: {
+declare var __VLS_13: {
     label: string;
     isChecked: any;
     disabled: boolean;
 };
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    label?: (props: typeof __VLS_9) => any;
+    label?: (props: typeof __VLS_13) => any;
 }>;
 declare const __VLS_self: import("vue").DefineComponent<__VLS_PublicProps, {
     model: typeof model;
     checkboxId: typeof checkboxId;
     isSingle: typeof isSingle;
     isChecked: typeof isChecked;
+    checkboxIcon: typeof checkboxIcon;
+    iconColor: typeof iconColor;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:selected": (value: boolean | string[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{

package/types/modules/Notifications/store/NotificationsStoreModule.d.ts

@@ -23,13 +23,7 @@ export default class NotificationsStoreModule extends BaseStoreModule {
         DESTROY: (context: any) => Promise<[PromiseSettledResult<any>, PromiseSettledResult<any>]>;
         PLAY_SOUND: (context: any, { action, sound, volume }: {
             action: any;
-            sound?: boolean | {
-                play: () => void;
-                pause: () => void;
-                addEventListener: (type: any, listener: any) => void;
-                dispatchEvent: (event: any) => void;
-                volume: any;
-            } | HTMLAudioElement;
+            sound?: boolean | HTMLAudioElement;
             volume?: number;
         }) => Promise<void>;
         STOP_SOUND: (context: any) => void;

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

@@ -60,6 +60,9 @@ declare const checkbox: {
             };
         };
     };
+    css: ({ dt }: {
+        dt: any;
+    }) => string;
     root: {
         borderRadius: string;
         width: string;