@webitel/ui-sdk 26.2.0-2 → 26.2.2

package/src/assets/icons/sprite/index.js

@@ -0,0 +1,468 @@
+import { objCamelToKebab } from '../../../scripts/caseConverters.js';
+import account from './account.svg';
+import addContact from './add-contact.svg';
+import addFilter from './add-filter.svg';
+import adfs from './adfs.svg';
+import agent from './agent.svg';
+import api from './api.svg';
+import appNavigator from './app-navigator.svg';
+import arrange from './arrange.svg';
+import arrowDown from './arrow-down.svg';
+import arrowLeft from './arrow-left.svg';
+import arrowMix from './arrow-mix.svg';
+import arrowRight from './arrow-right.svg';
+import arrowUp from './arrow-up.svg';
+import assignee from './assignee.svg';
+import attach from './attach.svg';
+import attention from './attention.svg';
+import attentionFilled from './attention--filled.svg';
+import azure from './azure.svg';
+import back from './back.svg';
+import bell from './bell.svg';
+import bellBadged from './bell-badged.svg';
+import bot from './bot.svg';
+import breadCrumbs from './bread-crumbs.svg';
+import bucket from './bucket.svg';
+import calendar from './calendar.svg';
+import call from './call.svg';
+import callFilled from './call--filled.svg';
+import callAddTo from './call-add-to.svg';
+import callAddToFilled from './call-add-to--filled.svg';
+import callDisconnect from './call-disconnect.svg';
+import callDisconnectFilled from './call-disconnect--filled.svg';
+import callEnd from './call-end.svg';
+import callEndFilled from './call-end--filled.svg';
+import callInbound from './call-inbound.svg';
+import callInboundFilled from './call-inbound--filled.svg';
+import callMissed from './call-missed.svg';
+import callMissedFilled from './call-missed--filled.svg';
+import callOutbound from './call-outbound.svg';
+import callOutboundFilled from './call-outbound--filled.svg';
+import callRinging from './call-ringing.svg';
+import callRingingFilled from './call-ringing--filled.svg';
+import callTransfer from './call-transfer.svg';
+import callTransferFilled from './call-transfer--filled.svg';
+import caseFilled from './case--filled.svg';
+import caseAuthor from './case-author.svg';
+import caseDone from './case-done.svg';
+import cases from './cases.svg';
+import chat from './chat.svg';
+import chatFilled from './chat--filled.svg';
+import chatEmoji from './chat-emoji.svg';
+import chatEnd from './chat-end.svg';
+import chatEndFilled from './chat-end--filled.svg';
+import chatGroup from './chat-group.svg';
+import chatJoin from './chat-join.svg';
+import chatMessageStatusRead from './chat-message-status-read.svg';
+import chatMessageStatusSent from './chat-message-status-sent.svg';
+import chatQuickResponse from './chat-quick-response.svg';
+import chatQuickResponseFilled from './chat-quick-response--filled.svg';
+import chatReply from './chat-reply.svg';
+import chatSend from './chat-send.svg';
+import chatTransfer from './chat-transfer.svg';
+import chatTransferFilled from './chat-transfer--filled.svg';
+import checkbox from './checkbox.svg';
+import checkboxChecked from './checkbox--checked.svg';
+import checkboxCheckedFilled from './checkbox--checked--filled.svg';
+import checkboxTick from './checkbox-tick.svg';
+import clear from './clear.svg';
+import close from './close.svg';
+import closeFilled from './close--filled.svg';
+import collapse from './collapse.svg';
+import columnSelect from './column-select.svg';
+import comment from './comment.svg';
+import conference from './conference.svg';
+import consultativeTransfer from './consultative-transfer.svg';
+import contacts from './contacts.svg';
+import copy from './copy.svg';
+import customChatGateway from './custom-chat-gateway.svg';
+import darkMode from './dark-mode.svg';
+import dislike from './dislike.svg';
+import docs from './docs.svg';
+import done from './done.svg';
+import doneFilled from './done--filled.svg';
+import download from './download.svg';
+import downloadPdf from './download-pdf.svg';
+import edit from './edit.svg';
+import elevenlabs from './elevenlabs.svg';
+import email from './email.svg';
+import emailInbound from './email-inbound.svg';
+import emailOutbound from './email-outbound.svg';
+import expand from './expand.svg';
+import eyeClosed from './eye--closed.svg';
+import eyeOpened from './eye--opened.svg';
+import falseIc from './false-ic.svg';
+import filter from './filter.svg';
+import flows from './flows.svg';
+import generate from './generate.svg';
+import google from './google.svg';
+import group from './group.svg';
+import history from './history.svg';
+import hold from './hold.svg';
+import idle from './idle.svg';
+import impacted from './impacted.svg';
+import instagram from './instagram.svg';
+import job from './job.svg';
+import jobAccept from './job--accept.svg';
+import jobEnd from './job--end.svg';
+import json from './json.svg';
+import like from './like.svg';
+import link from './link.svg';
+import loadPreset from './load-preset.svg';
+import lock from './lock.svg';
+import log from './log.svg';
+import logout from './logout.svg';
+import mail from './mail.svg';
+import mailColor from './mail--color.svg';
+import manual from './manual.svg';
+import menu from './menu.svg';
+import messengerCustom from './messenger-custom.svg';
+import messengerFacebook from './messenger-facebook.svg';
+import messengerFacebookFilled from './messenger-facebook--filled.svg';
+import messengerInfobip from './messenger-infobip.svg';
+import messengerMessenger from './messenger-messenger.svg';
+import messengerTelegram from './messenger-telegram.svg';
+import messengerTelegramFilled from './messenger-telegram--filled.svg';
+import messengerViber from './messenger-viber.svg';
+import messengerViberFilled from './messenger-viber--filled.svg';
+import messengerWebChat from './messenger-web-chat.svg';
+import messengerWhatsapp from './messenger-whatsapp.svg';
+import messengerWhatsappFilled from './messenger-whatsapp--filled.svg';
+import meta from './meta.svg';
+import mic from './mic.svg';
+import micMuted from './mic-muted.svg';
+import microsoft from './microsoft.svg';
+import minus from './minus.svg';
+import move from './move.svg';
+import note from './note.svg';
+import numpad from './numpad.svg';
+import options from './options.svg';
+import pause from './pause.svg';
+import pin from './pin.svg';
+import play from './play.svg';
+import playerEnterFullscreen from './player-enter-fullscreen.svg';
+import playerExitFullscreen from './player-exit-fullscreen.svg';
+import plus from './plus.svg';
+import plyrAirplay from './plyr-airplay.svg';
+import plyrCaptionsOff from './plyr-captions-off.svg';
+import plyrCaptionsOn from './plyr-captions-on.svg';
+import plyrDownload from './plyr-download.svg';
+import plyrEnterFullscreen from './plyr-enter-fullscreen.svg';
+import plyrExitFullscreen from './plyr-exit-fullscreen.svg';
+import plyrFastForward from './plyr-fast-forward.svg';
+import plyrLogoVimeo from './plyr-logo-vimeo.svg';
+import plyrLogoYoutube from './plyr-logo-youtube.svg';
+import plyrMuted from './plyr-muted.svg';
+import plyrPause from './plyr-pause.svg';
+import plyrPip from './plyr-pip.svg';
+import plyrPlay from './plyr-play.svg';
+import plyrRestart from './plyr-restart.svg';
+import plyrRewind from './plyr-rewind.svg';
+import plyrSettings from './plyr-settings.svg';
+import plyrVolume from './plyr-volume.svg';
+import portal from './portal.svg';
+import previewTagApplication from './preview-tag-application.svg';
+import previewTagAudio from './preview-tag-audio.svg';
+import previewTagImage from './preview-tag-image.svg';
+import previewTagVideo from './preview-tag-video.svg';
+import prompter from './prompter.svg';
+import queueMember from './queue-member.svg';
+import quickReplies from './quick-replies.svg';
+import radio from './radio.svg';
+import radioChecked from './radio--checked.svg';
+import rec from './rec.svg';
+import recOff from './rec-off.svg';
+import recordStart from './record-start.svg';
+import recordStop from './record-stop.svg';
+import redo from './redo.svg';
+import refresh from './refresh.svg';
+import reporter from './reporter.svg';
+import role from './role.svg';
+import roundedInfo from './rounded-info.svg';
+import save from './save.svg';
+import saveAs from './save-as.svg';
+import scorecard from './scorecard.svg';
+import screenshot from './screenshot.svg';
+import screenshotDone from './screenshot-done.svg';
+import screenshotFalse from './screenshot-false.svg';
+import search from './search.svg';
+import selectCustomValueEnter from './select-custom-value-enter.svg';
+import sendArrow from './send-arrow.svg';
+import settings from './settings.svg';
+import sharingEnd from './sharing-end.svg';
+import socialMedia from './social-media.svg';
+import sortArrowDown from './sort-arrow-down.svg';
+import sortArrowUp from './sort-arrow-up.svg';
+import soundOff from './sound-off.svg';
+import soundOn from './sound-on.svg';
+import star from './star.svg';
+import starFilled from './star--filled.svg';
+import stop from './stop.svg';
+import stopSign from './stop-sign.svg';
+import stt from './stt.svg';
+import sttDownload from './stt-download.svg';
+import sttSearch from './stt-search.svg';
+import table from './table.svg';
+import telegramBot from './telegram-bot.svg';
+import tick from './tick.svg';
+import tile from './tile.svg';
+import treeCollapse from './tree-collapse.svg';
+import treeCorner from './tree-corner.svg';
+import treeCross from './tree-cross.svg';
+import treeExpand from './tree-expand.svg';
+import treeLine from './tree-line.svg';
+import trueIc from './true-ic.svg';
+import ttsDownload from './tts-download.svg';
+import undo from './undo.svg';
+import union from './union.svg';
+import unpin from './unpin.svg';
+import updateCalls from './update-calls.svg';
+import upload from './upload.svg';
+import user from './user.svg';
+import variableSelect from './variable-select.svg';
+import versions from './versions.svg';
+import videoCam from './video-cam.svg';
+import videoCamOff from './video-cam-off.svg';
+import videoCamOffFilled from './video-cam-off--filled.svg';
+import webitelLogo from './webitel-logo.svg';
+import zoomIn from './zoom-in.svg';
+import zoomOut from './zoom-out.svg';
+
+export default objCamelToKebab({
+  account,
+  agent,
+  api,
+  arrange,
+  adfs,
+  appNavigator,
+  arrowDown,
+  arrowLeft,
+  arrowRight,
+  arrowUp,
+  assignee,
+  arrowMix,
+  attach,
+  attention,
+  'attention--filled': attentionFilled,
+  azure,
+  addFilter,
+  addContact,
+  back,
+  bell,
+  bellBadged,
+  bucket,
+  breadCrumbs,
+  bot,
+  calendar,
+  dislike,
+  darkMode,
+
+  call,
+  'call--filled': callFilled,
+  callAddTo,
+  'call-add-to--filled': callAddToFilled,
+  callDisconnect,
+  'call-disconnect--filled': callDisconnectFilled,
+  callEnd,
+  'call-end--filled': callEndFilled,
+  callInbound,
+  'call-inbound--filled': callInboundFilled,
+  selectCustomValueEnter,
+  callMissed,
+  'call-missed--filled': callMissedFilled,
+  callOutbound,
+  'call-outbound--filled': callOutboundFilled,
+  callRinging,
+  'call-ringing--filled': callRingingFilled,
+  callTransfer,
+  'call-transfer--filled': callTransferFilled,
+  consultativeTransfer,
+  updateCalls,
+
+  caseAuthor,
+  cases,
+  'case--filled': caseFilled,
+  caseDone,
+  chat,
+  'chat--filled': chatFilled,
+  chatEmoji,
+  chatEnd,
+  'chat-end--filled': chatEndFilled,
+  chatGroup,
+  chatJoin,
+  chatMessageStatusRead,
+  chatMessageStatusSent,
+  chatQuickResponse,
+  'chat-quick-response--filled': chatQuickResponseFilled,
+  chatReply,
+  chatSend,
+  chatTransfer,
+  'chat-transfer--filled': chatTransferFilled,
+  job,
+  'job--accept': jobAccept,
+  'job--end': jobEnd,
+
+  checkbox,
+  'checkbox--checked': checkboxChecked,
+  'checkbox--checked--filled': checkboxCheckedFilled,
+  clear,
+  close,
+  'close--filled': closeFilled,
+  minus,
+  collapse,
+  columnSelect,
+  comment,
+  variableSelect,
+  contacts,
+  copy,
+  customChatGateway,
+  docs,
+  download,
+  edit,
+  elevenlabs,
+  plus,
+  expand,
+  'eye--closed': eyeClosed,
+  'eye--opened': eyeOpened,
+  filter,
+  flows,
+  falseIc,
+  generate,
+  google,
+  group,
+  history,
+  hold,
+  impacted,
+  like,
+  link,
+  lock,
+  logout,
+  manual,
+  menu,
+  email,
+  emailInbound,
+  emailOutbound,
+  mail,
+  'mail--color': mailColor,
+  messengerCustom,
+  messengerFacebook,
+  'messenger-facebook--filled': messengerFacebookFilled,
+  messengerInfobip,
+  messengerTelegram,
+  'messenger-telegram--filled': messengerTelegramFilled,
+  messengerViber,
+  'messenger-viber--filled': messengerViberFilled,
+  messengerWebChat,
+  messengerWhatsapp,
+  'messenger-whatsapp--filled': messengerWhatsappFilled,
+  messengerMessenger,
+  instagram,
+  mic,
+  micMuted,
+  microsoft,
+  move,
+  treeCollapse,
+  note,
+  numpad,
+  pause,
+  play,
+  table,
+  treeExpand,
+  prompter,
+  queueMember,
+  radio,
+  'radio--checked': radioChecked,
+  rec,
+  recOff,
+  refresh,
+  reporter,
+  roundedInfo,
+  role,
+  done,
+  'done--filled': doneFilled,
+  search,
+  sendArrow,
+  settings,
+  socialMedia,
+  sortArrowDown,
+  sortArrowUp,
+  soundOff,
+  soundOn,
+  scorecard,
+  star,
+  'star--filled': starFilled,
+  stop,
+  stopSign,
+  tick,
+  upload,
+  user,
+  union,
+  videoCamOff,
+  'video-cam-off--filled': videoCamOffFilled,
+  videoCam,
+  zoomIn,
+  zoomOut,
+  ttsDownload,
+  treeLine,
+  treeCorner,
+  treeCross,
+  trueIc,
+  stt,
+  sttDownload,
+  sttSearch,
+  idle,
+  telegramBot,
+  pin,
+  unpin,
+  conference,
+  meta,
+  options,
+  json,
+  redo,
+  save,
+  saveAs,
+  undo,
+  versions,
+
+  webitelLogo,
+
+  portal,
+
+  previewTagAudio,
+  previewTagVideo,
+  previewTagApplication,
+  previewTagImage,
+
+  plyrAirplay,
+  plyrCaptionsOff,
+  plyrCaptionsOn,
+  plyrDownload,
+  plyrEnterFullscreen,
+  plyrExitFullscreen,
+  plyrFastForward,
+  plyrLogoVimeo,
+  plyrLogoYoutube,
+  plyrMuted,
+  plyrPause,
+  plyrPip,
+  plyrPlay,
+  plyrRestart,
+  plyrRewind,
+  plyrSettings,
+  plyrVolume,
+  playerExitFullscreen,
+  playerEnterFullscreen,
+  loadPreset,
+  quickReplies,
+  checkboxTick,
+  log,
+  downloadPdf,
+  tile,
+
+  recordStart,
+  recordStop,
+  screenshot,
+  screenshotDone,
+  screenshotFalse,
+  sharingEnd,
+});

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

@@ -1,21 +1,21 @@
 <template>
-  <span
+  <svg
     :class="[
       'wt-icon',
       `wt-icon--size-${size}`,
       `wt-icon--color-${color}`,
       { 'wt-icon--disabled': disabled },
     ]"
-    v-html="iconSvg"
     @click="emit('click')"
-  />
+  >
+    <use :href="iconName" />
+  </svg>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
 
 import { ComponentSize, IconColor } from '../../enums';
-import { getIconFromRepository } from './utils/iconsRepository';
 
 interface Props {
   /**
@@ -25,21 +25,27 @@ interface Props {
   icon: string;
   size?: ComponentSize;
   color?: IconColor;
+  /**
+   * inserts icon name prefix between "icon" and actual icon name ("icon" prop).
+   * Useful for library icons extension with project-level icons with this prefix in name
+   */
+  iconPrefix?: string;
   disabled?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   size: ComponentSize.MD,
   color: IconColor.DEFAULT,
+  iconPrefix: '',
   disabled: false,
 });
 
-const emit = defineEmits<{
-  click: MouseEvent[];
-}>();
+const emit = defineEmits(['click']);
 
-const iconSvg = computed(() => {
-  return getIconFromRepository(props.icon) || props.icon;
+const iconName = computed(() => {
+  let name = '#';
+  if (props.iconPrefix) name += `${props.iconPrefix}-`;
+  return `${name}${props.icon}`;
 });
 </script>
 

package/src/components/wt-select/_multiselect.scss

@@ -76,7 +76,6 @@
     border-color: var(--wt-text-field-select-option-wrapper-border-color);
     border-radius: var(--border-radius);
     background: transparent;
-    z-index: calc(var(--p-galleria-mask-z-index) - 2);
   }
 
   // select options
@@ -104,7 +103,6 @@
 }
 
 :deep(.multiselect--active) {
-  z-index: calc(var(--p-galleria-mask-z-index) - 2); // // lowered z-index to prevent overlapping the gallery and video container
   .multiselect__select.multiselect__arrow .wt-icon {
     fill: var(--icon-active-color);
   }

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

@@ -3,7 +3,6 @@
     class="wt-vidstack-player"
     :class="[
       `wt-vidstack-player--${size}`,
-      `wt-vidstack-player-video-object-fit--${props.videoObjectFit}`,
       fullscreen && `wt-vidstack-player--fullscreen`,
       stretch && `wt-vidstack-player--stretch`,
       props.static && 'wt-vidstack-player--static',
@@ -74,7 +73,6 @@ interface Props {
   hideBackground?: boolean
   hideExpand?: boolean
   stretch?: boolean
-  videoObjectFit?: 'cover' | 'contain'
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -85,7 +83,6 @@ const props = withDefaults(defineProps<Props>(), {
   username: '',
   closable: false,
   static: false,
-  videoObjectFit: 'contain',
 });
 
 const emit = defineEmits<{
@@ -286,21 +283,8 @@ const onCanPlay = (ev: unknown) => {
     min-width: 0;
     width: 100%;
     height: 100%;
+    object-fit: contain;
     background: var(--p-player-wrapper-background);
   }
-
-  &-video-object-fit {
-    &--cover {
-      video {
-        object-fit: cover;
-      }
-    }
-
-    &--contain {
-      video {
-        object-fit: contain;
-      }
-    }
-  }
 }
 </style>

package/src/install.ts

@@ -4,7 +4,7 @@ import 'plyr/plyr.scss';
 import 'vidstack/bundle';
 import './css/main.scss';
 import './css/tailwind.css';
-import { fillIconsRepository } from './components/wt-icon/utils/iconsRepository';
+import './assets/icons/sprite/index.js';
 
 import { generateInstance } from '@webitel/api-services/api/axios';
 
@@ -12,10 +12,6 @@ import Components from './components/index.js'; // init all components
 import Directives from './directives/index.js'; // init all directives
 import initPrimevue from './plugins/primevue/primevue.plugin.js';
 
-export { 
-  fillIconsRepository,
- };
-
 export default {
   install(app, { eventBus, router, globals = {} }) {
     Object.keys(Directives).forEach((name) => {

package/src/modules/CallSession/modules/VideoCall/video-call.vue

@@ -6,7 +6,6 @@
     :class="[!props.static && `video-call-position--${props.position}`]"
     :username="props.username"
     :hide-video-display-panel="props.hideVideoDisplayPanel"
-    video-object-fit="cover"
     class="video-call"
     hide-background
     autoplay
@@ -53,7 +52,6 @@
           <wt-vidstack-player
             :stream="props['sender:stream']"
             :class="`video-call-sender--${innerSize}`"
-            video-object-fit="cover"
             hide-video-display-panel
             hide-controls-panel
             static

package/types/components/on-demand/wt-cc-agent-status-timers/wt-cc-agent-status-timers.vue.d.ts

@@ -1,34 +1,9 @@
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    /**
-     * @description Status object
-     * @type {Object}
-     * @property {String} offline
-     * @property {String} online
-     * @property {String} pause
-     */
-    status: any;
-    size: {
-        type: StringConstructor;
-        default: string;
-        options: string[];
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    /**
-     * @description Status object
-     * @type {Object}
-     * @property {String} offline
-     * @property {String} online
-     * @property {String} pause
-     */
-    status: any;
-    size: {
-        type: StringConstructor;
-        default: string;
-        options: string[];
-    };
-}>> & Readonly<{}>, {
+declare const _default: import("vue").DefineComponent<{}, {
     status: any;
     size: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    $props: {
+        readonly status?: any;
+        readonly size?: string;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/types/components/on-demand/wt-chat-emoji/wt-chat-emoji.vue.d.ts

@@ -1,19 +1,8 @@
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    size: {
-        type: StringConstructor;
-        default: "md";
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "insert-emoji": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    size: {
-        type: StringConstructor;
-        default: "md";
-    };
-}>> & Readonly<{
-    "onInsert-emoji"?: (...args: any[]) => any;
-}>, {
+declare const _default: import("vue").DefineComponent<{}, {
+    $emit: (event: "insert-emoji", ...args: any[]) => void;
     size: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    $props: {
+        readonly size?: string;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;