@icvdeveloper/common-module 2.0.0 → 2.1.1

package/dist/runtime/components/auth/Ucc.vue

@@ -33,7 +33,7 @@ const { conference } = toRefs(props);
 
 // methods
 const submitLogin = () => {
-  let email = document.getElementById('uccEmail').value;
+  const email = document.getElementById('uccEmail').value;
   loginV3({email: email});
 };
 
@@ -76,42 +76,63 @@ onMounted(() => {
 <template>
   <div>
     <!-- UCC Widget -->
-    <div id="uccTarget"
-    :class="
-      classBinding(
-        classObject,
-        'container',
-        'p-0 m-0 w-full'
-      )
-    "
-    style="display:block;"
-    >
-    </div>
+    <div
+      id="uccTarget"
+      :class="
+        classBinding(
+          classObject,
+          'container',
+          'p-0 m-0 w-full'
+        )
+      "
+      style="display:block;"
+    />
     <!-- V3 email login form -->
-    <div id="uccEmailForm"
+    <div
+      id="uccEmailForm"
       class="ucc-form-container ucc-widgets-events block"
-      style="padding-bottom: 0px"
+      style="padding-bottom: 0"
     >
       <div>
-        <h1 class="scala-bold text-xl text-center mb-0" :class="headerColorClass">
+        <h1
+          class="scala-bold text-xl text-center mb-0"
+          :class="headerColorClass"
+        >
           {{ loginHeader }}
         </h1>
       </div>
       <div class="text-center">
-        <form @submit="submitLogin" action="javascript:void(0);">
+        <form
+          action="javascript:void(0);"
+          @submit="submitLogin"
+        >
           <div class="ucc-form-field">
-            <div class="ucc-form-field-descr"></div>
+            <div class="ucc-form-field-descr" />
             <div class="ucc-input-wrapper required">
-              <input id="uccEmail" name="uccEmail" class="ucc-input" type="text" placeholder="Enter Email Address" autocomplete="off" maxlength="70">
+              <input
+                id="uccEmail"
+                name="uccEmail"
+                class="ucc-input"
+                type="text"
+                placeholder="Enter Email Address"
+                autocomplete="off"
+                maxlength="70"
+              >
             </div>
-            <div class="ucc-error"></div>
+            <div class="ucc-error" />
           </div>
-          <div class="ucc-form-field ucc-form-btn-row" style="margin-bottom: 0x; margin-top: 0px;">
+          <div
+            class="ucc-form-field ucc-form-btn-row"
+            style="margin-bottom: 0; margin-top: 0;"
+          >
             <a
-              @click="submitLogin"
               class="ucc-btn"
               :class="buttonColorClass"
-              style="margin-top: 0px;"><span class="btn-text">{{ buttonText }}</span></a>
+              style="margin-top: 0;"
+              @click="submitLogin"
+            >
+              <span class="btn-text">{{ buttonText }}</span>
+            </a>
           </div>
         </form>
       </div>
@@ -120,9 +141,5 @@ onMounted(() => {
 </template>
 
 <style scoped>
-.v3-ucc-btn-black {
-  background-color: #000;
-  border: 1px solid #000;
-  color: #fff;
-}
+.v3-ucc-btn-black{background-color:#000;border:1px solid #000;color:#fff}
 </style>

package/dist/runtime/components/chat/ChatConversationList.vue

@@ -94,15 +94,15 @@ onMounted(() => {
   </div>
 </template>
 
-<style scoped>
-.chat-item {
-  @apply flex cursor-pointer flex-row p-4 border-b border-t-0 border-l-0 border-r-0 border-solid border-gray-400;
-  border-bottom: 1px solid #dae1e7;
-}
-.chat-item:hover {
-  background-color: #e9eef1;
-}
-.chat-item:active {
-  background-color: #cbd4dd;
-}
+<style scoped lang="postcss">
+  .chat-item {
+    @apply flex cursor-pointer flex-row p-4 border-b border-t-0 border-l-0 border-r-0 border-solid border-gray-400;
+    border-bottom: 1px solid #dae1e7;
+    &:hover {
+      background-color: lighten(#dae1e7, 5%);
+    }
+    &:active {
+      background-color: darken(#dae1e7, 5%);
+    }
+  }
 </style>

package/dist/runtime/components/chat/ChatCreateConversation.vue

@@ -1,15 +1,14 @@
 <script lang="ts" setup>
-import { inject, onMounted, onBeforeUnmount, ref, toRefs, watch } from 'vue';
+import { inject, onMounted, onBeforeUnmount, ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { debounce, find, remove } from 'lodash-es';
-import { VueEternalLoading, LoadAction } from "@ts-pro/vue-eternal-loading";
+import { VueEternalLoading } from '@ts-pro/vue-eternal-loading';
 import { useConversationStore } from '#imports';
 import { chatSearchEventHook } from '../../composables/useEventHooks';
-import type { UsersResult } from '../../store/conversations';
-import type { User } from '../../models/user';
+import type { LoadAction } from '../../models/vueEternalLoading';
+import type { User, UsersResult } from '../../models/user';
 
 const conversationStore = useConversationStore();
-
 const { user, users, isInitial } = storeToRefs(conversationStore);
 
 const { getName, createConversation } = conversationStore;
@@ -18,12 +17,7 @@ const { getName, createConversation } = conversationStore;
 const selectedUsers = ref<User[]>([] as User[]);
 const filteredUsers = ref<UsersResult>({} as UsersResult);
 
-// emits
-const emit = defineEmits<{
-  (event: 'onCreate', value: User[]): void;
-}>();
-
-// injected load function 
+// injected load function
 // (see Vue Eternal Loading docs for reference: https://ts-pro.github.io/vue-eternal-loading/guide/simple-usage.html)
 const load = inject('attendeeListLoad', (loaded: LoadAction) => { console.log('no scroll'); loaded(0); })
 
@@ -40,7 +34,7 @@ const toggle = (user: User) => {
     remove(array, (element) => {
       return element.id === user.id;
     });
-    
+
     selectedUsers.value = [...array];
   }
 };
@@ -167,39 +161,39 @@ onBeforeUnmount(() => {
   </div>
 </template>
 
-<style scoped>
-.disabled {
-  opacity: 50%;
-  cursor: not-allowed;
-}
-
-.disabled:hover {
-  background-color: #3490dc !important;
-}
-
-.create-conversation-button {
-  border-bottom-left-radius: 9px;
-  border-bottom-right-radius: 9px;
-}
-
-.user-item {
-  @apply cursor-pointer flex items-center px-4 bg-gray-300;
-  border-bottom: 1px solid #dae1e7;
-}
-.user-item:hover {
-  background-color: #f9fafb;
-}
-.user-item:active {
-  background-color: #bbc8d3;
-}
-
-.selected-user-item {
-  @apply cursor-pointer flex items-center px-4 border-r-2 border-gray-400;
-}
-.selected-user-item:hover {
-  background-color: #f9fafb;
-}
-.selected-user-item:active {
-  background-color: #bbc8d3;
-}
+<style scoped lang="postcss">
+  .disabled {
+    opacity: 50%;
+    cursor: not-allowed;
+  }
+
+  .disabled:hover {
+    background-color: #3490dc !important;
+  }
+
+  .create-conversation-button {
+    border-bottom-left-radius: 9px;
+    border-bottom-right-radius: 9px;
+  }
+
+  .user-item {
+    @apply cursor-pointer flex items-center px-4 bg-gray-300;
+    border-bottom: 1px solid #dae1e7;
+    &:hover {
+      background-color: lighten(#dae1e7, 10%);
+    }
+    &:active {
+      background-color: darken(#dae1e7, 10%);
+    }
+  }
+
+  .selected-user-item {
+    @apply cursor-pointer flex items-center px-4 border-r-2 border-gray-400;
+    &:hover {
+      background-color: lighten(#dae1e7, 10%);
+    }
+    &:active {
+      background-color: darken(#dae1e7, 10%);
+    }
+  }
 </style>

package/dist/runtime/components/chat/ChatCreateGroupConversation.vue

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
-import { inject, onMounted, onBeforeUnmount, ref, toRefs, watch } from 'vue';
+import { inject, onMounted, onBeforeUnmount, ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { debounce, find, remove } from 'lodash-es';
-import { VueEternalLoading, LoadAction } from "@ts-pro/vue-eternal-loading";
-import { useConversationStore } from '#imports';
+import { VueEternalLoading } from "@ts-pro/vue-eternal-loading";
+import { useConversationStore } from '../../store/conversations';
 import { chatSearchEventHook } from '../../composables/useEventHooks';
+import type { LoadAction } from "../../models/vueEternalLoading";
 import type { User } from '../../models/user';
 
 // data
@@ -20,7 +21,7 @@ const emit = defineEmits<{
   (event: 'onCreate', value: User[]): void;
 }>();
 
-// injected load function 
+// injected load function
 // (see Vue Eternal Loading docs for reference: https://ts-pro.github.io/vue-eternal-loading/guide/simple-usage.html)
 const load = inject('attendeeListLoad', (loaded: LoadAction) => { console.log('no scroll'); loaded(0); })
 
@@ -149,11 +150,5 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
-  .selected {
-    background-color: #b8c2cc;
-  }
-  .create-conversation-button {
-    border-bottom-left-radius: 9px;
-    border-bottom-right-radius: 9px;
-  }
+.selected{background-color:#b8c2cc}.create-conversation-button{border-bottom-left-radius:9px;border-bottom-right-radius:9px}
 </style>

package/dist/runtime/components/chat/ChatHeader.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { useConversationStore } from '#imports';
+import { useConversationStore } from '../../store/conversations.js';
 
-import { MenuOptions } from './ChatWindow.vue';
+import { MenuOptions } from '../../enums/chatWindow';
 
 const { toggleChat } = useConversationStore();
 
@@ -43,56 +43,55 @@ const emit = defineEmits<{
   </div>
 </template>
 
-<style scoped>
-.header {
-  border-top-left-radius: 9px;
-  border-top-right-radius: 9px;
-  padding: 0.25rem;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-}
-
-.header-title {
-  align-self: center;
-  padding: 10px;
-  flex: 1;
-  user-select: none;
-  font-size: 16px;
-}
+<style scoped lang="postcss">
+  .header {
+    border-top-left-radius: 9px;
+    border-top-right-radius: 9px;
+    padding: .25rem;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+  }
+  .header-title {
+    align-self: center;
+    padding: 10px;
+    flex: 1;
+    user-select: none;
+    font-size: 16px;
+  }
 
-.header-button {
-  align-self: center;
-  cursor: pointer;
-  border-radius: 5px;
-  padding: 0.5rem;
-}
-.header-button:hover {
-  @apply shadow;
-}
-.header-button:hover:active {
-  @apply shadow-inner;
-}
+  .header-button {
+    align-self: center;
+    cursor: pointer;
+    border-radius: 5px;
+    padding: .5rem;
+    &:hover {
+      @apply shadow;
+      &:active {
+        @apply shadow-inner;
+      }
+    }
+  }
 
-.icon-button {
-  width: 40px;
-  height: 40px;
-  padding: 13px;
-  margin-left: auto;
-  margin-right: 10px;
-  box-sizing: border-box;
-}
+  .icon-button {
+    width: 40px;
+    height: 40px;
+    padding: 13px;
+    margin-left: auto;
+    margin-right: 10px;
+    box-sizing: border-box;
+  }
 
-.header-button img, .header-button svg {
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-}
+  .header-button img, .header-button svg {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+  }
 
-@media (max-width: 450px) {
-  .header {
-    border-radius: 0px;
+  @media (max-width: 450px) {
+    .header {
+      border-radius: 0;
+    }
   }
-}
 </style>

package/dist/runtime/components/chat/ChatShowConversation.vue

@@ -1,11 +1,10 @@
 <script lang="ts" setup>
-import { toRefs } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useConversationStore } from '#imports';
 import MessageInput from './MessageInput.vue';
 import { sendMessageEventHook } from '../../composables/useEventHooks';
 import type { User } from '../../models/user';
-import type { Conversation, Message } from '../../models/conversation';
+import type { Conversation } from '../../models/conversation';
 
 const conversationStore = useConversationStore();
 

package/dist/runtime/components/chat/ChatWidget.vue

@@ -36,30 +36,5 @@ const { hasNotifications } = toRefs(props);
 </template>
 
 <style scoped>
-  .launcher {
-    z-index: 9999;
-    width: 60px;
-    height: 60px;
-    background-position: center;
-    background-repeat: no-repeat;
-    position: fixed;
-    right: 75px;
-    bottom: 25px;
-    border-radius: 50%;
-    box-shadow: none;
-    transition: box-shadow 0.2s ease-in-out;
-    cursor: pointer;
-  }
-
-  .bell {
-    z-index: 9999;
-    position: fixed;
-    bottom: 60px;
-    right: 15px;
-    padding: 2px 0;
-  }
-
-  .bell svg {
-    height: 90px;
-  }
+.launcher{background-position:50%;background-repeat:no-repeat;border-radius:50%;bottom:25px;box-shadow:none;cursor:pointer;height:60px;right:75px;transition:box-shadow .2s ease-in-out;width:60px}.bell,.launcher{position:fixed;z-index:9999}.bell{bottom:60px;padding:2px 0;right:15px}.bell svg{height:90px}
 </style>

package/dist/runtime/components/chat/ChatWindow.vue

@@ -1,17 +1,8 @@
-<script>
-export var MenuOptions = /* @__PURE__ */ ((MenuOptions2) => {
-  MenuOptions2["LIST"] = "ChatConversationlist";
-  MenuOptions2["CREATE"] = "CreateConversation";
-  MenuOptions2["CREATEGROUP"] = "CreateGroupConversation";
-  MenuOptions2["SHOW"] = "ShowConversation";
-  return MenuOptions2;
-})(MenuOptions || {});
-</script>
-
 <script lang="ts" setup>
-import { computed, ref, toRefs, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
-import { 
+import { MenuOptions } from '../../enums/chatWindow';
+import {
   clearConversationEventHook,
   createConversationEventHook,
   setSelectedConversationEventHook
@@ -35,12 +26,7 @@ type Menus = {
 
 const conversationStore = useConversationStore();
 
-const { chatOpen, conversations, selectedConversation, user, users } = storeToRefs(conversationStore);
-
-// emits
-const emit = defineEmits<{
-  (event: 'close'): void;
-}>();
+const { chatOpen, selectedConversation } = storeToRefs(conversationStore);
 
 // data
 const selectedMenu = ref<MenuOptions>(MenuOptions.LIST);
@@ -155,57 +141,5 @@ watch(selectedConversation, (_newConversation, _oldConversation) => {
 </template>
 
 <style scoped>
-.chat-window {
-  z-index: 999;
-  width: 370px;
-  height: calc(100% - 120px);
-  max-height: 590px;
-  position: fixed;
-  right: 25px;
-  bottom: 100px;
-  box-sizing: border-box;
-  box-shadow: 0px 7px 40px 2px rgba(148, 149, 150, 0.1);
-  background: white;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  border-radius: 10px;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  animation: fadeIn;
-  animation-duration: 0.3s;
-  animation-timing-function: ease-in-out;
-}
-.chat-window.closed {
-  opacity: 0;
-  display: none;
-  bottom: 90px;
-}
-
-@keyframes fadeIn {
-  0% {
-    display: none;
-    opacity: 0;
-  }
-  100% {
-    display: flex;
-    opacity: 1;
-  }
-}
-
-@media (max-width: 450px) {
-  .chat-window {
-    width: 100%;
-    height: 100%;
-    max-height: 100%;
-    right: 0px;
-    bottom: 0px;
-    border-radius: 0px;
-  }
-  .chat-window {
-    transition: 0.1s ease-in-out;
-  }
-  .chat-window.closed {
-    bottom: 0px;
-  }
-}
+.chat-window{animation:fadeIn;animation-duration:.3s;animation-timing-function:ease-in-out;background:#fff;border-radius:10px;bottom:100px;box-shadow:0 7px 40px 2px hsla(210,1%,58%,.1);box-sizing:border-box;display:flex;flex-direction:column;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;height:calc(100% - 120px);justify-content:space-between;max-height:590px;position:fixed;right:25px;width:370px;z-index:999}.chat-window.closed{bottom:90px;display:none;opacity:0}@keyframes fadeIn{0%{display:none;opacity:0}to{display:flex;opacity:1}}@media (max-width:450px){.chat-window{border-radius:0;bottom:0;height:100%;max-height:100%;right:0;transition:.1s ease-in-out;width:100%}.chat-window.closed{bottom:0}}
 </style>

package/dist/runtime/components/chat/MessageInput.vue

@@ -23,8 +23,5 @@ const emit = defineEmits<{
 </template>
 
 <style scoped>
-  .message {
-    border-bottom-left-radius: 9px;
-    border-bottom-right-radius: 9px;
-  }
+.message{border-bottom-left-radius:9px;border-bottom-right-radius:9px}
 </style>

package/dist/runtime/components/chat/SearchInput.vue

@@ -26,7 +26,7 @@ const clear = (): void => {
       class="pin-r absolute mt-3 mr-5 cursor-pointer"
       @click="clear"
     >
-      <SvgIcon icon="close" />
+      <CommonSvgIcon icon="close" />
     </span>
   </div>
 </template>

package/dist/runtime/components/core/Accordion.vue

@@ -77,7 +77,10 @@ const toggle = () => {
       </button>
     </div>
 
-    <transition name="slide" mode="out-in">
+    <transition
+      name="slide"
+      mode="out-in"
+    >
       <div
         v-show="expanded"
         :class="
@@ -94,13 +97,12 @@ const toggle = () => {
   </div>
 </template>
 
-<style scoped>
+<style lang="postcss" scoped>
 .slide-enter-active,
 .slide-leave-active {
   overflow: hidden;
   transition: all 0.4s ease;
 }
-
 .slide-enter,
 .slide-leave-to {
   transform-origin: top;
@@ -108,18 +110,16 @@ const toggle = () => {
   opacity: 0;
   height: -10px;
 }
-
 .chevron {
   transition: 0.3s all cubic-bezier(1, 0.25, 0.25, 0.8);
   will-change: transform;
+  &.down {
+    transform: rotate(180deg);
+  }
+  &.normal {
+    transform: rotate(0deg);
+  }
 }
-.chevron.down {
-  transform: rotate(180deg);
-}
-.chevron.normal {
-  transform: rotate(0deg);
-}
-
 .outline-none {
   outline: none;
 }

package/dist/runtime/components/core/AttendeeList.vue

@@ -2,8 +2,7 @@
 import { ref, toRefs, onBeforeUnmount, watch } from "vue";
 import { storeToRefs } from "pinia";
 import { debounce } from "lodash-es";
-import { VueEternalLoading, LoadAction } from "@ts-pro/vue-eternal-loading";
-import type { User } from "../../models/user";
+import { VueEternalLoading } from "@ts-pro/vue-eternal-loading";
 import { PAGE_LENGTH } from "../../models/pagination";
 import { useAttendeeListStore } from "../../store/attendeeList";
 import { useAuthStore } from "../../store/auth";
@@ -15,6 +14,8 @@ import type {
   AttendeeListClassObj,
   AttendeeListCompObj,
 } from "../../@types/components";
+import type { LoadAction } from "../../models/vueEternalLoading";
+import type { User } from "../../models/user";
 
 type Props = {
   classObject?: AttendeeListClassObj;
@@ -121,7 +122,7 @@ onBeforeUnmount(() => {
 
 watch(isLoggedIn, () => {
   if (isLoggedIn.value) {
-    // joinPresenceChannel();
+    joinPresenceChannel();
   }
 });
 </script>
@@ -345,9 +346,9 @@ watch(isLoggedIn, () => {
             <button
               v-if="
                 isLoggedIn &&
-                user.id !== currentUser.id &&
-                user.online &&
-                user.video_chat
+                  user.id !== currentUser.id &&
+                  user.online &&
+                  user.video_chat
               "
               :class="
                 classBinding(
@@ -376,20 +377,5 @@ watch(isLoggedIn, () => {
 </template>
 
 <style>
-.user-container {
-  max-height: 400px;
-  height: 400px;
-}
-
-.user-list-item {
-  border-top: 6px solid rgb(31, 60, 249);
-}
-
-.min-height-paragraph {
-  min-height: 1em;
-}
-
-.max-w-100 {
-  max-width: 100px;
-}
+.user-container{height:400px;max-height:400px}.user-list-item{border-top:6px solid #1f3cf9}.min-height-paragraph{min-height:1em}.max-w-100{max-width:100px}
 </style>