@icvdeveloper/common-module 0.0.44 → 0.0.46

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "v3plus-common-module",
   "configKey": "v3plusCommonModule",
-  "version": "0.0.44"
+  "version": "0.0.46"
 }

package/dist/runtime/@types/components.d.ts

@@ -58,3 +58,43 @@ export type presenterListingClassObj = {
     presenterBio?: string | null;
     presenterBioLink?: string | null;
 };
+export type svgIconClassObj = {
+    container?: string | null;
+    svgElement?: string | null;
+};
+export type modalCompObj = {
+    svgIcon?: svgIconClassObj;
+};
+export type modalClassObj = {
+    container?: string | null;
+    modalPositionContainer?: string | null;
+    modalContainer?: string | null;
+    modalCloseContainer?: string | null;
+    modalButton?: string | null;
+    modalButtonIcon?: string | null;
+    components?: modalCompObj;
+};
+export type modalContentClassObj = {
+    container?: string | null;
+    modalTitle?: string | null;
+    modalImagePositionContainer?: string | null;
+    modalImageContainer?: string | null;
+    modalImage?: string | null;
+    modalTextPositionContainer?: string | null;
+    modalTextContainer?: string | null;
+    modalName?: string | null;
+    modalTitleCompany?: string | null;
+    modalBio?: string | null;
+    components?: modalCompObj;
+};
+export type presenterModalCompObj = {
+    presenterListing?: presenterListingClassObj;
+    svgIcon?: svgIconClassObj;
+    modal?: modalClassObj;
+    modalContent?: modalContentClassObj;
+};
+export type presenterModalClassObj = {
+    container?: string | null;
+    iconContainer?: string | null;
+    components?: presenterModalCompObj;
+};

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

@@ -1,25 +1,48 @@
 <script setup lang="ts">
-import { toRefs, computed } from "vue";
+import { ref, toRefs, computed } from "vue";
+import { useClassBinding } from "../../composables/useClassBinding";
+import {
+  modalClassObj,
+  modalCompObj,
+  svgIconClassObj,
+} from "../../@types/components";
 
-interface Props {
+type Props = {
   visible?: boolean;
   modalSize?: string;
   noScroll?: boolean;
   showClose?: boolean;
   usePadding?: boolean;
-}
+  classObject?: modalClassObj;
+};
 
+// classObject.components.svgIcon is not functioning properly and cannot be passed to svgIcon component
 const props = withDefaults(defineProps<Props>(), {
   visible: false,
-  modalSize: "25",
+  modalSize: "50",
   noScroll: false,
   showClose: true,
   usePadding: true,
+  classObject: () => {
+    return {
+      container: "",
+      modalPositionContainer: "",
+      modalContainer: "",
+      modalCloseContainer: "",
+      modalButton: "",
+      modalButtonIcon: "",
+      components: ref<modalCompObj>({
+        svgIcon: ref<svgIconClassObj>({}),
+      }),
+    };
+  },
 });
 
 const emit = defineEmits(["trigger", "clicked"]);
 
-const { visible, modalSize, noScroll, showClose, usePadding } = toRefs(props);
+const { visible, modalSize, noScroll, showClose, usePadding, classObject } =
+  toRefs(props);
+const { classBinding } = useClassBinding();
 
 const modalClass = computed(() => {
   const padding = usePadding.value ? "p-6" : "";
@@ -44,20 +67,37 @@ const clicked = () => {
   <Transition>
     <div
       v-if="visible"
-      class="fixed top-0 bottom-0 left-0 right-0 z-50 flex bg-smoke-light p-3"
+      :class="
+        classBinding(
+          classObject,
+          'modalPositionContainer',
+          'fixed top-0 bottom-0 left-0 right-0 z-50 flex bg-smoke-light p-3'
+        )
+      "
       @click="clicked"
     >
       <div
         class="custom-max-width"
-        :class="modalClass"
+        :class="classBinding(classObject, 'modalContainer', modalClass)"
         :style="'--maxw: ' + modalSize + '%;'"
       >
         <span
           v-if="showClose"
-          class="absolute top-0 bottom-0 right-0 py-2 px-3 z-30 max-h-1em"
+          :class="
+            classBinding(
+              classObject,
+              'modalCloseContainer',
+              'absolute top-0 bottom-0 right-0 z-30 max-h-1em'
+            )
+          "
         >
-          <button class="p-1" @click="closeModal()">
-            <span>X</span>
+          <button
+            :class="classBinding(classObject, 'modalButton', 'p-3')"
+            @click="closeModal()"
+          >
+            <span :class="classBinding(classObject, 'modalButtonIcon', '')"
+              ><CommonSvgIcon icon="close" width=".7rem"
+            /></span>
           </button>
         </span>
 
@@ -77,6 +117,9 @@ const clicked = () => {
   background-color: rgba(0, 0, 0, 0.4);
 }
 
+.custom-max-width {
+  max-width: 85%;
+}
 @screen lg {
   .custom-max-width {
     max-width: calc(var(--maxw) * 1.25);

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

@@ -2,6 +2,8 @@
 import { find, get } from "lodash-es";
 import { toRefs, computed, defineAsyncComponent } from "vue";
 import { Icon, Icons } from "../../models/icons";
+import { svgIconClassObj } from "../../@types/components";
+import { useClassBinding } from "../../composables/useClassBinding";
 
 /**
  * Delay importing only the icon file that we need
@@ -73,21 +75,35 @@ const icons: Icons = {
       () => import("../../assets/svg/icon-down-arrow.svg")
     ),
   },
+  close: {
+    color: "#000",
+    component: defineAsyncComponent(
+      () => import("../../assets/svg/icon-close.svg")
+    ),
+  },
 };
 
 type Props = {
   icon?: keyof Icons;
   grayScale?: boolean;
   width?: string;
+  classObject?: svgIconClassObj;
 };
 
 const props = withDefaults(defineProps<Props>(), {
   icon: "info",
   grayScale: false,
   width: "20px",
+  classObject: () => {
+    return {
+      container: "",
+      svgElement: "",
+    };
+  },
 });
 
 const { icon, grayScale, width } = toRefs(props);
+const { classBinding } = useClassBinding();
 
 // computed
 const iconDims = computed(() => ({
@@ -114,6 +130,10 @@ const iconComponent = computed(() => {
 
 <template>
   <div :style="iconDims">
-    <component :is="iconComponent" :style="iconStyle" />
+    <component
+      :is="iconComponent"
+      :style="iconStyle"
+      :class="classBinding(classObject, 'svgElement', '')"
+    />
   </div>
 </template>

package/dist/runtime/components/presenters/PresenterModal.vue

@@ -2,19 +2,69 @@
 import { ref, toRefs } from "vue";
 import { Presenter } from "../../models/conference";
 import { usePresenter } from "../../composables/usePresenter";
+import { useClassBinding } from "../../composables/useClassBinding";
+import {
+  presenterModalClassObj,
+  presenterListingClassObj,
+  presenterModalCompObj,
+  svgIconClassObj,
+  modalContentClassObj,
+  modalClassObj,
+  modalCompObj,
+} from "../../@types/components";
+import { Position } from "../../enums/general";
 
 type Props = {
   presenter: Presenter;
+  enableBio?: boolean;
+  showBio?: boolean;
+  isSmallGroupedTrack?: boolean;
+  bioLinkOnName?: boolean;
+  bioLinkText?: string;
   useIcon?: boolean;
-  isSmallGroupedTrack: boolean;
+  bioLinkPosition?: Position;
+  imagePosition?: Position;
+  classObject?: presenterModalClassObj;
 };
 
 const props = withDefaults(defineProps<Props>(), {
   useIcon: true,
+  enableBio: true,
+  showBio: false,
+  isSmallGroupedTrack: false,
+  bioLinkOnName: true,
+  bioLinkText: "Read More >",
+  bioLinkPosition: Position.BOTTOM,
+  imagePosition: Position.LEFT,
+
+  classObject: () => {
+    return {
+      container: "",
+      iconContainer: "",
+      components: ref<presenterModalCompObj>({
+        presenterListing: ref<presenterListingClassObj>({}),
+        svgIcon: ref<svgIconClassObj>({}),
+        modal: ref<modalClassObj>({}),
+        modalContent: ref<modalContentClassObj>({}),
+      }),
+    };
+  },
 });
 
-const { presenter, useIcon, isSmallGroupedTrack } = toRefs(props);
+const {
+  presenter,
+  useIcon,
+  enableBio,
+  showBio,
+  isSmallGroupedTrack,
+  bioLinkOnName,
+  bioLinkText,
+  bioLinkPosition,
+  imagePosition,
+  classObject,
+} = toRefs(props);
 const modalVisible = ref<boolean>(false);
+const { classBinding } = useClassBinding();
 
 // methods
 const { fullName, presenterImageStyle, itemWidthStyle, isGrayScale } =
@@ -23,10 +73,21 @@ const { fullName, presenterImageStyle, itemWidthStyle, isGrayScale } =
 
 <template>
   <div>
-    <div v-if="useIcon" class="presenter-icon cursor-pointer">
+    <div
+      v-if="useIcon"
+      :class="
+        classBinding(
+          classObject,
+          'iconContainer',
+          'presenter-icon cursor-pointer'
+        )
+      "
+    >
       <CommonSvgIcon
         icon="info"
         :greyscale="isGrayScale"
+        :class="classBinding(classObject.components.svgIcon, 'container', '')"
+        :class-object="classObject.components.svgIcon"
         @click="modalVisible = true"
       ></CommonSvgIcon>
     </div>
@@ -34,41 +95,109 @@ const { fullName, presenterImageStyle, itemWidthStyle, isGrayScale } =
     <CommonPresenterListing
       v-else
       :presenter="presenter"
-      :enable-bio="true"
-      :show-bio="true"
+      :enable-bio="enableBio"
+      :show-bio="showBio"
+      :is-small-grouped-track="isSmallGroupedTrack"
+      :bio-link-on-name="bioLinkOnName"
+      :bio-link-text="bioLinkText"
+      :bio-link-position="bioLinkPosition"
+      :image-position="imagePosition"
       text-class="font-bold text-base"
       link-class="agenda-presenter-color"
-      :is-small-grouped-track="isSmallGroupedTrack"
+      :class="
+        classBinding(classObject.components.presenterListing, 'container', '')
+      "
+      :class-object="classObject.components.presenterListing"
+      @clicked="modalVisible = true"
     >
     </CommonPresenterListing>
 
-    <CommonModal :visible="modalVisible" @trigger="modalVisible = false">
+    <CommonModal
+      :visible="modalVisible"
+      :class="classBinding(classObject.components.modal, 'container', '')"
+      :class-object="classObject.components.modal"
+      @trigger="modalVisible = false"
+    >
       <template #modal-title>
         <div
-          class="flex flex-col lg:flex-row w-full pb-8 mb-8 border-b border-solid border-grey-light"
+          :class="
+            classBinding(
+              classObject.components.modalContent,
+              'modalTitle',
+              'flex flex-col lg:flex-row w-full pb-8 mb-8 border-b border-solid border-grey-light'
+            )
+          "
         >
-          <div class="flex-1 mb-6 lg:mb-0 lg:flex-initial flex justify-center">
+          <div
+            :class="
+              classBinding(
+                classObject.components.modalContent,
+                'modalImagePositionContainer',
+                'flex-1 mb-6 lg:mb-0 lg:flex-initial flex justify-center'
+              )
+            "
+          >
             <div
               v-if="presenter.photo"
               :style="presenterImageStyle"
-              class="border-white border-2 shadow-md bg-white"
+              :class="
+                classBinding(
+                  classObject.components.modalContent,
+                  'modalImageContainer',
+                  'border-white border-2 shadow-md bg-white'
+                )
+              "
             >
               <img
                 :src="presenter.photo"
-                class="invisible"
+                :class="
+                  classBinding(
+                    classObject.components.modalContent,
+                    'modalImage',
+                    'invisible'
+                  )
+                "
                 :style="itemWidthStyle"
               />
             </div>
           </div>
-          <div class="flex-1 pl-4 text-center lg:text-left flex">
-            <div class="flex-1 self-center">
+          <div
+            :class="
+              classBinding(
+                classObject.components.modalContent,
+                'modalTextPositionContainer',
+                'flex-1 pl-4 text-center lg:text-left flex'
+              )
+            "
+          >
+            <div
+              :class="
+                classBinding(
+                  classObject.components.modalContent,
+                  'modalTextContainer',
+                  'flex-1 self-center'
+                )
+              "
+            >
               <h1
-                class="flex-1 font-light mb-0 body-color-4 presenter-name-color"
+                :class="
+                  classBinding(
+                    classObject.components.modalContent,
+                    'modalName',
+                    'flex-1 font-light mb-0 body-color-4 presenter-name-color'
+                  )
+                "
               >
                 {{ fullName }}
               </h1>
               <p
-                class="flex-1 font-normal text-base pt-2 leading-tight mb-0 body-color-5 presenter-title-color"
+                :class="
+                  classBinding(
+                    classObject.components.modalContent,
+                    'modalTitleCompany',
+                    'flex-1 font-normal text-base pt-2 leading-tight mb-0 body-color-5 presenter-title-color'
+                  )
+                "
               >
                 {{ presenter.title }}<br />{{ presenter.company }}
               </p>
@@ -77,7 +206,15 @@ const { fullName, presenterImageStyle, itemWidthStyle, isGrayScale } =
         </div>
       </template>
       <template #modal-body>
-        <p class="font-normal text-center lg:text-left">
+        <p
+          :class="
+            classBinding(
+              classObject.components.modalContent,
+              'modalBio',
+              'font-normal text-center lg:text-left'
+            )
+          "
+        >
           <CommonDynamicHtml
             :template="presenter.biography"
           ></CommonDynamicHtml>

package/dist/runtime/models/conference.d.ts

@@ -115,6 +115,7 @@ export type Conference = {
     id?: number;
     location?: string;
     name?: string;
+    presenters?: Array<Presenter>;
     photo?: null | string;
     photo_large?: string;
     portal_id?: number;

package/dist/runtime/models/icons.d.ts

@@ -15,4 +15,5 @@ export type Icons = {
     playarrow: Icon;
     zoom: Icon;
     downarrow: Icon;
+    close: Icon;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@icvdeveloper/common-module",
-  "version": "0.0.44",
+  "version": "0.0.46",
   "license": "MIT",
   "type": "module",
   "exports": {