@icvdeveloper/common-module 0.0.35 → 0.0.37

package/dist/module.json

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

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

@@ -0,0 +1,60 @@
+export declare type countdownTimerClassObj = {
+    container?: string | null;
+    countdownContainer?: string | null;
+    beginText?: string | null;
+    unitsContainer?: string | null;
+    itemContainer?: string | null;
+    unitLabel?: string | null;
+    unitContainer?: string | null;
+    unit?: string | null;
+};
+export declare type sponsorClassObj = {
+    container?: string | null;
+    sponsorContainer?: string | null;
+    labelImageContainer?: string | null;
+    labelContainer?: string | null;
+    sponsorLabel?: string | null;
+    imageContainer?: string | null;
+    sponsorImage?: string | null;
+};
+export declare type listEventsCompObj = {
+    countdownTimer?: countdownTimerClassObj | null;
+    sponsor?: sponsorClassObj | null;
+    modal?: string | null;
+    login?: string | null;
+};
+export declare type listEventsClassObj = {
+    container?: string | null;
+    listContainer?: string | null;
+    eventContainer?: string | null;
+    eventImageContainer?: string | null;
+    eventImage?: string | null;
+    eventContentContainer?: string | null;
+    eventDetailsContainer?: string | null;
+    eventDetails?: string | null;
+    eventBrand?: string | null;
+    eventName?: string | null;
+    eventDate?: string | null;
+    countdownContainerTop?: string | null;
+    countdownContainerRight?: string | null;
+    countdownContainerBottom?: string | null;
+    buttonCountdownSponsorsContainer?: string | null;
+    buttonCountdownContainer?: string | null;
+    buttonContainer?: string | null;
+    buttonItem?: string | null;
+    sponsorsContainer?: string | null;
+    components?: listEventsCompObj;
+};
+export declare type presenterListingClassObj = {
+    container?: string | null;
+    presenterImageContainer?: string | null;
+    presenterImage?: string | null;
+    presenterContainer?: string | null;
+    presenterTextContainer?: string | null;
+    presenterNameLink?: string | null;
+    presenterName?: string | null;
+    presenterRole?: string | null;
+    presenterTitle?: string | null;
+    presenterBio?: string | null;
+    presenterBioLink?: string | null;
+};

package/dist/runtime/assets/scss/_footer.scss

@@ -1,20 +1,20 @@
 footer {
-  @apply bg-color-5;
-  nav {
-    @apply bg-color-4;
-    ul {
-      @apply list-none p-0 inline-flex justify-start content-center;
-    }
+  // @apply bg-color-5;
+  // nav {
+  //   @apply bg-color-4;
+  //   ul {
+  //     @apply list-none p-0 inline-flex justify-start content-center;
+  //   }
 
-    ul li {
-      @apply flex-auto flex-grow my-3 mx-6 self-center;
-      a {
-        @apply no-underline text-white uppercase tracking-wide nav-color-3;
+  //   ul li {
+  //     @apply flex-auto flex-grow my-3 mx-6 self-center;
+  //     a {
+  //       @apply no-underline text-white uppercase tracking-wide nav-color-3;
 
-        &:hover {
-          @apply nav-color-4;
-        }
-      }
-    }
-  }
+  //       &:hover {
+  //         @apply nav-color-4;
+  //       }
+  //     }
+  //   }
+  // }
 }

package/dist/runtime/assets/scss/_header.scss

@@ -1,41 +1,40 @@
 header {
-  @apply bg-color-2;
+  // @apply bg-color-2;
 
   nav {
-  @apply bg-color-3;
-    ul {
-      @apply inline-flex flex-1 justify-start content-around text-center;
-    }
+    // @apply bg-color-3;
+    //   ul {
+    //     @apply inline-flex flex-1 justify-start content-around text-center;
+    //   }
 
-    ul li {      
-      @apply flex-auto flex-grow my-3 self-center text-center;
-      a {
-        @apply primary-link nav-color-1;
-        
-        &:hover {
-          @apply nav-color-2;
-        }
-  
-        &.active {
-          @apply nav-color-2;
-        }
+    //   ul li {
+    //     @apply flex-auto flex-grow my-3 self-center text-center;
+    //     a {
+    //       @apply primary-link nav-color-1;
 
-      }      
-    }
+    //       &:hover {
+    //         @apply nav-color-2;
+    //       }
+
+    //       &.active {
+    //         @apply nav-color-2;
+    //       }
+
+    //     }
+    //   }
   }
   /* mobile nav */
   .mobile-nav {
-    @apply bg-color-3;
-
-    button {
-      @apply border rounded nav-color-1;
-      border-color: $nav-color-1;
+    // @apply bg-color-3;
 
-      &:hover {
-        @apply nav-color-2;
-        border-color: $nav-color-2;
-      } 
-    }
+    // button {
+    //   @apply border rounded nav-color-1;
+    //   border-color: $nav-color-1;
 
+    //   &:hover {
+    //     @apply nav-color-2;
+    //     border-color: $nav-color-2;
+    //   }
+    // }
   }
 }

package/dist/runtime/components/agenda/components/Sponsor.vue

@@ -2,6 +2,8 @@
 import { find } from "lodash-es";
 import { ref, toRefs } from "vue";
 import { Sponsor as SponsorModel } from "../../../models/conference";
+import { sponsorClassObj } from "../../../@types/components";
+import { useClassBinding } from "../../../composables/useClassBinding";
 
 type Props = {
   sponsor: SponsorModel;
@@ -9,18 +11,32 @@ type Props = {
   inline?: boolean;
   hideLabel?: boolean;
   enabledSponsors?: SponsorModel[];
+  classObject?: sponsorClassObj;
 };
 
 const props = withDefaults(defineProps<Props>(), {
   size: "default",
   inline: false,
-  hideLabel: false,
+  hideLabel: true,
   enabledSponsors: () => {
     return [];
   },
+  classObject: () => {
+    return {
+      container: "",
+      sponsorContainer: "",
+      labelImageContainer: "",
+      labelContainer: "",
+      sponsorLabel: "",
+      imageContainer: "",
+      sponsorImage: "",
+    };
+  },
 });
 
-const { sponsor, size, inline, hideLabel, enabledSponsors } = toRefs(props);
+const { sponsor, size, inline, hideLabel, enabledSponsors, classObject } =
+  toRefs(props);
+const { classBinding } = useClassBinding();
 
 // data
 const showModal = ref<boolean>(false);
@@ -43,24 +59,59 @@ const handleClick = () => {
 </script>
 
 <template>
-  <div class="flex flex-col lg:flex-row flex-1 items-center">
-    <div :class="size">
-      <div :class="inline ? 'flex-1 items-center' : 'w-full'">
+  <div
+    :class="
+      classBinding(
+        classObject,
+        'sponsorContainer',
+        'flex flex-col lg:flex-row flex-1 items-center'
+      )
+    "
+  >
+    <div :class="classBinding(classObject, 'labelImageContainer', size)">
+      <div
+        v-if="!hideLabel"
+        :class="
+          inline
+            ? classBinding(classObject, 'labelContainer', 'flex-1 items-center')
+            : classBinding(classObject, 'labelContainer', 'w-full')
+        "
+      >
         <h2
-          v-if="!hideLabel"
-          :class="{
-            'inline-block lg:pr-5 pb-2 lg:pb-0': inline,
-            'pb-2': !inline,
-          }"
+          :class="
+            inline
+              ? classBinding(
+                  classObject,
+                  'sponsorLabel',
+                  'inline-block lg:pr-5 pb-2 lg:pb-0'
+                )
+              : classBinding(classObject, 'sponsorLabel', 'pb-2')
+          "
           class="text-center uppercase font-medium"
         >
           {{ sponsor.label }}
         </h2>
       </div>
-      <div :class="inline ? 'flex-1 items-center pb-2 lg:pb-0' : 'w-full'">
+      <div
+        :class="
+          inline
+            ? classBinding(
+                classObject,
+                'imageContainer',
+                'flex-1 items-center pb-2 lg:pb-0'
+              )
+            : classBinding(classObject, 'imageContainer', 'w-full')
+        "
+      >
         <img
-          :class="{ block: !inline }"
-          class="sponsor-img m-auto cursor-pointer"
+          :class="[
+            { block: !inline },
+            classBinding(
+              classObject,
+              'sponsorImage',
+              'sponsor-img m-auto cursor-pointer'
+            ),
+          ]"
           :src="sponsor.photo"
           @click="handleClick()"
         />

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

@@ -12,6 +12,8 @@ import {
   addMinutes,
 } from "date-fns";
 import { useTemplateConfigsStore } from "../../store";
+import { countdownTimerClassObj } from "../../@types/components";
+import { useClassBinding } from "../../composables/useClassBinding";
 
 interface Props {
   date: string;
@@ -20,6 +22,7 @@ interface Props {
   showHours?: boolean;
   showMinutes?: boolean;
   showSeconds?: boolean;
+  classObject?: countdownTimerClassObj;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -28,8 +31,31 @@ const props = withDefaults(defineProps<Props>(), {
   showHours: true,
   showMinutes: true,
   showSeconds: true,
+  classObject: () => {
+    return {
+      container: "",
+      countdownContainer: "",
+      beginText: "",
+      unitsContainer: "",
+      itemContainer: "",
+      unitLabel: "",
+      unitContainer: "",
+      unit: "",
+    };
+  },
 });
 
+const {
+  isCompact,
+  showDays,
+  showHours,
+  showMinutes,
+  showSeconds,
+  classObject,
+} = toRefs(props);
+
+const { classBinding } = useClassBinding();
+
 // reactive data
 const isCounting = ref<boolean>(true);
 const days = ref<number>(0);
@@ -104,36 +130,83 @@ onMounted(() => {
 
 <template>
   <div
-    class="countdown-timer"
-    :class="{ compact: isCompact, fullsize: !isCompact }"
+    :class="[
+      { compact: isCompact, fullsize: !isCompact },
+      classBinding(classObject, 'container', 'countdown-timer'),
+    ]"
   >
     <div
-      class="countdown-container flex flex-col pt-8 mx-4 text-center justify-center items-center content-center"
+      :class="
+        classBinding(
+          classObject,
+          'countdownContainer',
+          'countdown-container flex flex-col pt-8 mx-4 text-center justify-center items-center content-center'
+        )
+      "
     >
       <div class="flex-initial">
-        <h1 v-if="isCounting" class="m-0 p-0 heading-color-3">EVENT BEGINS</h1>
-        <h1 v-if="!isCounting" class="m-0 p-0 heading-color-3">
-          {{ eventHasBegunText }}
+        <h1
+          :class="
+            classBinding(
+              classObject,
+              'beginText',
+              'm-0 p-0 uppercase heading-color-3'
+            )
+          "
+        >
+          {{ isCounting ? "event begins" : eventHasBegunText }}
         </h1>
       </div>
 
       <div
         v-if="isCounting"
-        class="units-container flex text-center p-6 pt-4 mt-4 items-center border border-color-accent-1 accent-color-3"
+        :class="
+          classBinding(
+            classObject,
+            'unitsContainer',
+            'units-container flex text-center p-6 pt-4 mt-4 items-center border border-color-accent-1 accent-color-3'
+          )
+        "
       >
         <!-- Days -->
         <div
           v-if="showDays"
-          class="item-container"
-          :class="{ dropshade: clockStyle == 'dials' }"
+          :class="[
+            { dropshade: clockStyle == 'dials' },
+            classBinding(classObject, 'itemContainer', 'item-container'),
+          ]"
         >
-          <div class="unit-label-container" :class="clockStyle">days</div>
-          <div class="unit-container contrast-border" :class="clockStyle">
-            <div v-if="clockStyle == 'windows'" :class="fontClass">
+          <div
+            :class="[
+              clockStyle,
+              classBinding(classObject, 'unitLabel', 'unit-label-container'),
+            ]"
+          >
+            days
+          </div>
+          <div
+            :class="[
+              clockStyle,
+              classBinding(
+                classObject,
+                'unitContainer',
+                'unit-container contrast-border'
+              ),
+            ]"
+          >
+            <div
+              v-if="clockStyle == 'windows'"
+              :class="[fontClass, classBinding(classObject, 'unit', '')]"
+            >
               {{ days }}
             </div>
             <transition v-if="clockStyle == 'dials'" name="slide" mode="out-in">
-              <div :key="days" :class="fontClass">{{ days }}</div>
+              <div
+                :key="days"
+                :class="[fontClass, classBinding(classObject, 'unit', '')]"
+              >
+                {{ days }}
+              </div>
             </transition>
           </div>
         </div>
@@ -141,16 +214,42 @@ onMounted(() => {
         <!-- Minutes -->
         <div
           v-if="showMinutes"
-          class="item-container"
-          :class="{ dropshade: clockStyle == 'dials' }"
+          :class="[
+            { dropshade: clockStyle == 'dials' },
+            classBinding(classObject, 'itemContainer', 'item-container'),
+          ]"
         >
-          <div class="unit-label-container" :class="clockStyle">min</div>
-          <div class="unit-container contrast-border" :class="clockStyle">
-            <div v-if="clockStyle == 'windows'" :class="fontClass">
+          <div
+            :class="[
+              clockStyle,
+              classBinding(classObject, 'unitLabel', 'unit-label-container'),
+            ]"
+          >
+            min
+          </div>
+          <div
+            :class="[
+              clockStyle,
+              classBinding(
+                classObject,
+                'unitContainer',
+                'unit-container contrast-border'
+              ),
+            ]"
+          >
+            <div
+              v-if="clockStyle == 'windows'"
+              :class="[fontClass, classBinding(classObject, 'unit', '')]"
+            >
               {{ minutes }}
             </div>
             <transition v-if="clockStyle == 'dials'" name="slide" mode="out-in">
-              <div :key="minutes" :class="fontClass">{{ minutes }}</div>
+              <div
+                :key="minutes"
+                :class="[fontClass, classBinding(classObject, 'unit', '')]"
+              >
+                {{ minutes }}
+              </div>
             </transition>
           </div>
         </div>
@@ -158,16 +257,46 @@ onMounted(() => {
         <!-- Seconds -->
         <div
           v-if="showSeconds"
-          class="item-container last"
-          :class="{ dropshade: clockStyle == 'dials' }"
+          :class="[
+            { dropshade: clockStyle == 'dials' },
+            classBinding(classObject, 'itemContainer', 'item-container last'),
+          ]"
         >
-          <div class="unit-label-container last" :class="clockStyle">sec</div>
-          <div class="unit-container contrast-border" :class="clockStyle">
-            <div v-if="clockStyle == 'windows'" :class="fontClass">
+          <div
+            :class="[
+              clockStyle,
+              classBinding(
+                classObject,
+                'unitLabel',
+                'unit-label-container last'
+              ),
+            ]"
+          >
+            sec
+          </div>
+          <div
+            :class="[
+              clockStyle,
+              classBinding(
+                classObject,
+                'unitContainer',
+                'unit-container contrast-border'
+              ),
+            ]"
+          >
+            <div
+              v-if="clockStyle == 'windows'"
+              :class="[fontClass, classBinding(classObject, 'unit', '')]"
+            >
               {{ seconds }}
             </div>
             <transition v-if="clockStyle == 'dials'" name="slide" mode="out-in">
-              <div :key="seconds" :class="fontClass">{{ seconds }}</div>
+              <div
+                :key="seconds"
+                :class="[fontClass, classBinding(classObject, 'unit', '')]"
+              >
+                {{ seconds }}
+              </div>
             </transition>
           </div>
         </div>

package/dist/runtime/components/events/ListEvents.vue

@@ -3,37 +3,60 @@ import { storeToRefs } from "pinia";
 import { useDateFormat } from "../../composables/useDateFormat";
 import { useConferenceHelpers } from "../../composables/useConferenceHelpers";
 import { useEvents } from "../../composables/useEvents";
+import { useClassBinding } from "../../composables/useClassBinding";
 import CommonSponsor from "../agenda/components/Sponsor.vue";
-import { Conference } from "../models/conference";
+import { Conference } from "../../models/conference";
+import { Position } from "../../enums/general";
+import { listEventsClassObj } from "../../@types/components";
 
 interface Props {
   showSponsors?: boolean;
   showBrand?: boolean;
-  MediaButton?: boolean;
+  showCountdown?: boolean;
+  mediaButton?: boolean;
   registerButton?: boolean;
   loginButton?: boolean;
   viewInfoButton?: boolean;
   isUpcoming?: boolean;
+  showEventImage?: boolean;
+  sponsorPosition?: Position;
+  borderPosition?: Position;
+  countdownPosition?: Position;
+  classObject?: listEventsClassObj;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   showSponsors: true,
   showBrand: true,
-  MediaButton: true,
+  showCountdown: true,
+  mediaButton: true,
   registerButton: true,
   loginButton: true,
   viewInfoButton: true,
   isUpcoming: true,
+  showEventImage: true,
+  sponsorPosition: Position.RIGHT,
+  borderPosition: Position.MIDDLE,
+  countdownPosition: Position.BOTTOM,
+  classObject: () => {
+    return {};
+  },
 });
 
 const {
   showSponsors,
   showBrand,
-  MediaButton,
+  showCountdown,
+  mediaButton,
   registerButton,
   loginButton,
   viewInfoButton,
   isUpcoming,
+  showEventImage,
+  sponsorPosition,
+  borderPosition,
+  countdownPosition,
+  classObject,
 } = toRefs(props);
 
 // data
@@ -69,6 +92,8 @@ const {
   isHomePage,
 } = useEvents();
 
+const { classBinding } = useClassBinding();
+
 const showViewButton = (_conference: Conference): boolean => {
   return isUpcoming.value
     ? showConferenceViewButton(_conference)
@@ -88,7 +113,7 @@ const getVideoButtonText = (_conference: Conference): string => {
 };
 
 // computed
-const eventType = computed((): Conference => {
+const eventType = computed((): Conference[] => {
   return isUpcoming.value ? upcomingEvents.value : pastEvents.value;
 });
 
@@ -105,68 +130,188 @@ const showLoginButton = computed((): boolean => {
 </script>
 
 <template>
+  <!-- list container -->
   <div class="flex w-full flex-col">
-    <div class="container flex-1 mx-auto">
+    <!-- list container -->
+    <div
+      :class="
+        classBinding(classObject, 'listContainer', 'container flex-1 mx-auto')
+      "
+    >
+      <!-- individual event container -->
       <div
         v-for="conference in eventType"
         :key="conference.id"
-        class="flex flex-col items-start md:flex-row py-8"
+        :class="[
+          {
+            'border-1 border-t border-color-accent-2':
+              borderPosition === Position.TOP,
+          },
+          classBinding(
+            classObject,
+            'eventContainer',
+            'flex flex-col items-center md:flex-row py-4'
+          ),
+        ]"
       >
-        <div class="flex w-full md:w-1/3 pb-3 px-3 md:px-6 overflow-hidden">
+        <!-- event image -->
+        <div
+          v-if="showEventImage"
+          :class="
+            classBinding(
+              classObject,
+              'eventImageContainer',
+              'flex w-full md:w-1/3 pb-3 px-3 md:px-6 overflow-hidden'
+            )
+          "
+        >
           <img
-            class="flex-1 self-center mx-auto w-full"
+            :class="
+              classBinding(
+                classObject,
+                'eventImage',
+                'flex-1 self-center mx-auto w-full'
+              )
+            "
             :src="conference.photo"
           />
         </div>
-
+        <!-- event details container -->
         <div
-          class="flex flex-col w-full justify-center items-center self-center text-center md:w-2/3 md:px-6 md:text-left md:justify-start md:items-start"
+          :class="[
+            { 'md:w-2/3': showEventImage },
+            classBinding(
+              classObject,
+              'eventContentContainer',
+              'flex flex-col justify-center text-center w-full md:pr-6 md:text-left md:justify-start md:items-start'
+            ),
+          ]"
         >
-          <div class="w-full border-1 border-b border-color-accent-2">
-            <h3
-              v-if="showBrand && getBrand(conference.affiliates).length"
-              class="text-base font-bold leading-normal tracking-wide font-light mb-2 md:text-md lg:text-lg"
-            >
-              {{ getBrand(conference.affiliates) }}
-            </h3>
-            <nuxt-link
-              :to="`/${isUpcoming ? 'upcoming-events' : 'past-events'}/${
-                conference.id
-              }`"
-              class="no-underline"
+          <!-- event brand, name, date and countdown container -->
+          <div
+            :class="[
+              {
+                'border-1 border-b border-color-accent-2 mb-6':
+                  borderPosition === Position.MIDDLE,
+              },
+              classBinding(
+                classObject,
+                'eventDetailsContainer',
+                'w-full flex flex-col lg:flex-row'
+              ),
+            ]"
+          >
+            <!-- event details -->
+            <div
+              :class="classBinding(classObject, 'eventDetails', 'flex-grow')"
             >
-              <h2
-                class="text-2xl lg:text-3xl font-medium mb-2 conf-name-alignment"
+              <h3
+                v-if="showBrand && getBrand(conference.affiliates).length"
+                :class="
+                  classBinding(
+                    classObject,
+                    'eventBrand',
+                    'text-base font-bold leading-tight tracking-wide mb-3'
+                  )
+                "
               >
-                {{ conference.name }}
-              </h2>
-            </nuxt-link>
-            <p
-              class="text-base leading-normal tracking-wide font-light uppercase md:text-md lg:text-lg"
-            >
-              {{ formatDate(conference.start_date) }}
-              <span v-if="!isSingleDayEvent(conference)">
-                - {{ formatDate(conference.end_date) }}</span
+                {{ getBrand(conference.affiliates) }}
+              </h3>
+              <nuxt-link
+                :to="`/${isUpcoming ? 'upcoming-events' : 'past-events'}/${
+                  conference.id
+                }`"
+                class="no-underline"
+              >
+                <h2
+                  :class="
+                    classBinding(
+                      classObject,
+                      'eventName',
+                      'text-2xl lg:text-3xl font-medium mb-2 conf-name-alignment'
+                    )
+                  "
+                >
+                  {{ conference.name }}
+                </h2>
+              </nuxt-link>
+              <p
+                :class="
+                  classBinding(
+                    classObject,
+                    'eventDate',
+                    'text-base leading-normal tracking-wide font-light uppercase md:text-md lg:text-lg'
+                  )
+                "
               >
-            </p>
+                {{ formatDate(conference.start_date) }}
+                <span v-if="!isSingleDayEvent(conference)">
+                  - {{ formatDate(conference.end_date) }}</span
+                >
+              </p>
+            </div>
+            <!-- countdown timer - top-aligned -->
+            <div
+              v-if="
+                isUpcoming &&
+                showCountdown &&
+                countdownPosition === Position.TOP &&
+                pagesConfigValue('main.countdown_timer')
+              "
+              :class="
+                classBinding(
+                  classObject,
+                  'countdownContainerTop',
+                  'flex-auto flex items-center self-center mb-4 lg:mb-0'
+                )
+              "
+            >
+              <CommonCountdownTimer
+                :date="conference.start_date"
+                :is-compact="true"
+                :class-object="classObject.components.countdownTimer"
+              ></CommonCountdownTimer>
+            </div>
           </div>
-          <div class="flex flex-col w-full mt-4">
+          <!-- event button, countdown timer, and sponsors container -->
+          <div
+            :class="
+              classBinding(
+                classObject,
+                'buttonCountdownSponsorsContainer',
+                'flex flex-col w-full'
+              )
+            "
+          >
             <div
-              class="flex-1 flex flex-col justify-between xl:flex-row w-full"
+              :class="
+                classBinding(
+                  classObject,
+                  'buttonCountdownContainer',
+                  'flex-1 flex flex-col justify-between xl:flex-row w-full'
+                )
+              "
             >
               <div
-                class="mt-2 mr-0 xl:mr-4 flex justify-center md:justify-start flex-auto flex-row"
+                :class="
+                  classBinding(
+                    classObject,
+                    'buttonContainer',
+                    'flex-auto mr-0 xl:mr-4'
+                  )
+                "
               >
+                <!-- view info button -->
                 <button
                   v-if="viewInfoButton"
-                  :class="buttonClass"
+                  :class="classBinding(classObject, 'buttonItem', buttonClass)"
                   @click="goEventPage(conference)"
                 >
                   View Info
                 </button>
-                <!-- view or preview archive -->
+                <!-- view live/preview archive button -->
                 <a
-                  v-if="MediaButton && showViewButton(conference)"
+                  v-if="mediaButton && showViewButton(conference)"
                   :href="getVideoUrl(conference)"
                   :target="
                     /^http/.test(!isUpcoming && getVideoUrl(conference))
@@ -174,21 +319,25 @@ const showLoginButton = computed((): boolean => {
                       : '_self'
                   "
                 >
-                  <button :class="buttonClass">
+                  <button
+                    :class="
+                      classBinding(classObject, 'buttonItem', buttonClass)
+                    "
+                  >
                     {{ getVideoButtonText(conference) }}
                   </button>
                 </a>
 
-                <!-- login -->
+                <!-- login button -->
                 <button
                   v-if="showLoginButton"
-                  :class="buttonClass"
+                  :class="classBinding(classObject, 'buttonItem', buttonClass)"
                   @click="setConferenceToLoginTo(conference)"
                 >
                   Log In
                 </button>
 
-                <!-- register -->
+                <!-- register button -->
                 <a
                   v-if="registerButton && showConferenceRegButton(conference)"
                   :href="getConferenceRegUrl(conference)"
@@ -198,43 +347,126 @@ const showLoginButton = computed((): boolean => {
                       : '_self'
                   "
                 >
-                  <button :class="buttonClass">
+                  <button
+                    :class="
+                      classBinding(classObject, 'buttonItem', buttonClass)
+                    "
+                  >
                     {{ getConferenceRegText(conference) }}
                   </button>
                 </a>
               </div>
+              <!-- countdown timer - right-aligned -->
               <div
-                v-if="isUpcoming && pagesConfigValue('main.countdown_timer')"
-                class="flex-auto text-right mt-3 md:mt-2"
+                v-if="
+                  isUpcoming &&
+                  showCountdown &&
+                  countdownPosition === Position.RIGHT &&
+                  pagesConfigValue('main.countdown_timer')
+                "
+                class="flex-auto md:flex mt-3 md:mt-2"
+                :class="
+                  classBinding(
+                    classObject,
+                    'countdownContainerRight',
+                    'flex-auto flex items-center self-center mb-4 lg:mb-0'
+                  )
+                "
               >
                 <CommonCountdownTimer
                   :date="conference.start_date"
                   :is-compact="true"
+                  :class-object="classObject.components.countdownTimer"
                 ></CommonCountdownTimer>
               </div>
             </div>
-            <div v-if="showSponsors" class="grid grid-cols-5 gap-y-1.5 gap-x-3">
+            <!-- countdown timer - bottom-aligned -->
+            <div
+              v-if="
+                isUpcoming &&
+                showCountdown &&
+                countdownPosition === Position.BOTTOM &&
+                pagesConfigValue('main.countdown_timer')
+              "
+              :class="
+                classBinding(
+                  classObject,
+                  'countdownContainerBottom',
+                  'flex-auto md:flex my-3 md:my-2'
+                )
+              "
+            >
+              <CommonCountdownTimer
+                :date="conference.start_date"
+                :is-compact="true"
+                :class-object="classObject.components.countdownTimer"
+              ></CommonCountdownTimer>
+            </div>
+            <!-- sponsors container - bottom-aligned -->
+            <div
+              v-if="showSponsors && sponsorPosition === Position.BOTTOM"
+              class=""
+              :class="
+                classBinding(
+                  classObject,
+                  'sponsorsContainer',
+                  'grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-y-1.5 gap-x-3'
+                )
+              "
+            >
+              <!-- individual sponsor -->
               <template
                 v-for="affiliate in orderAffiliates(conference.affiliates)"
-                :key="affiliate.id"
               >
                 <CommonSponsor
                   v-if="affiliate.role == 'sponsor'"
+                  :key="affiliate.id"
                   :sponsor="affiliate"
+                  :class-object="classObject.components.sponsor"
                 ></CommonSponsor>
               </template>
             </div>
           </div>
         </div>
+        <!-- sponsors container - right-aligned -->
+        <div
+          v-if="showSponsors && sponsorPosition === Position.RIGHT"
+          class="flex flex-col"
+        >
+          <!-- individual sponsor -->
+          <template v-for="affiliate in orderAffiliates(conference.affiliates)">
+            <CommonSponsor
+              v-if="affiliate.role == 'sponsor'"
+              :key="affiliate.id"
+              :sponsor="affiliate"
+              :class-object="classObject.components.sponsor"
+            ></CommonSponsor>
+          </template>
+        </div>
       </div>
     </div>
+    <!-- login modal -->
     <CommonModal
       :visible="loginModalVisible"
+      :class="classObject.components.modal"
       @trigger="loginModalVisible = false"
     >
       <template #modal-body>
-        <CommonLoginFullWidth :conference="conferenceToLoginTo" />
+        <CommonLoginFullWidth
+          :conference="conferenceToLoginTo"
+          :class="classObject.components.login"
+        />
       </template>
     </CommonModal>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.leading-tight {
+  line-height: 1.25rem;
+}
+
+.mr-4 {
+  margin-right: 1rem;
+}
+</style>

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

@@ -2,29 +2,53 @@
 import { toRefs } from "vue";
 import { Presenter } from "../../models/conference";
 import { usePresenter } from "../../composables/usePresenter";
+import { useClassBinding } from "../../composables/useClassBinding";
+import { presenterListingClassObj } from "../../@types/components";
+import { Position } from "../../enums/general";
 
 type Props = {
   presenter: Presenter;
-  textClass?: string;
-  linkClass?: string;
   enableBio?: boolean;
   showBio?: boolean;
   isSmallGroupedTrack?: boolean;
+  bioLinkOnName?: boolean;
+  bioLinkText?: string;
+  bioLinkPosition?: Position;
+  imagePosition?: Position;
+  classObject?: presenterListingClassObj;
 };
 
 const props = withDefaults(defineProps<Props>(), {
-  textClass: "font-medium text-lg",
-  linkClass: "",
   enableBio: true,
   showBio: false,
   isSmallGroupedTrack: false,
+  bioLinkOnName: true,
+  bioLinkText: "Read More >",
+  bioLinkPosition: Position.BOTTOM,
+  imagePosition: Position.LEFT,
+  classObject: () => {
+    return {
+      container: "",
+      presenterImageContainer: "",
+      presenterImage: "",
+      presenterContainer: "",
+      presenterTextContainer: "",
+      presenterNameLink: "",
+      presenterName: "",
+      presenterRole: "",
+      presenterTitle: "",
+      presenterBio: "",
+      presenterBioLink: "",
+    };
+  },
 });
 
 const emit = defineEmits(["clicked"]);
 
-const { presenter, textClass, linkClass, enableBio, isSmallGroupedTrack } =
+const { presenter, enableBio, isSmallGroupedTrack, classObject } =
   toRefs(props);
 const { fullName, titleCompany } = usePresenter(presenter);
+const { classBinding } = useClassBinding();
 
 // methods
 const handleClick = () => {
@@ -35,34 +59,105 @@ const handleClick = () => {
 </script>
 
 <template>
-  <div :class="textClass">
-    <p class="my-1">
-      <a
-        v-if="enableBio"
-        class="cursor-pointer"
-        :class="linkClass"
-        @click="handleClick()"
-        >{{ fullName }}</a
+  <div>
+    <div
+      :class="[
+        { 'flex-col': imagePosition !== Position.RIGHT },
+        { 'md:flex-row': imagePosition !== Position.TOP },
+        { 'flex-col-reverse': imagePosition === Position.RIGHT },
+        classBinding(
+          classObject,
+          'presenterContainer',
+          'flex-1 flex content-center items-center md:items-start'
+        ),
+      ]"
+    >
+      <div
+        v-if="presenter.photo.length && imagePosition !== Position.RIGHT"
+        :class="
+          classBinding(classObject, 'presenterImageContainer', 'shrink p-2')
+        "
       >
-      <span v-else>{{ fullName }}</span>
-      <span
-        v-if="presenter.role == 'moderator'"
-        class="text-grey-dark"
-        :class="isSmallGroupedTrack ? 'new-line' : 'no-new-line'"
-        >Moderator</span
+        <img
+          :src="presenter.photo"
+          :class="classBinding(classObject, 'presenterImage', '')"
+        />
+      </div>
+      <div
+        :class="
+          classBinding(
+            classObject,
+            'presenterTextContainer',
+            'flex flex-col text-center md:text-left self-center'
+          )
+        "
       >
-      <span
-        v-if="titleCompany"
-        class="font-light paragraph-color-1"
-        :class="isSmallGroupedTrack ? 'new-line' : 'new-line-responsive'"
-        >{{ titleCompany }}</span
+        <p class="my-1">
+          <a
+            v-if="enableBio && bioLinkOnName"
+            class="cursor-pointer"
+            :class="classBinding(classObject, 'presenterNameLink', '')"
+            @click="handleClick()"
+            ><span :class="classBinding(classObject, 'presenterName', '')">
+              {{ fullName }}</span
+            ></a
+          >
+          <span v-else :class="classBinding(classObject, 'presenterName', '')">
+            {{ fullName }}
+          </span>
+          <span
+            v-if="presenter.role == 'moderator'"
+            :class="[
+              isSmallGroupedTrack ? 'new-line' : 'no-new-line',
+              classBinding(classObject, 'presenterRole', 'text-grey-dark'),
+            ]"
+            >Moderator</span
+          >
+          <span
+            v-if="titleCompany"
+            :class="[
+              isSmallGroupedTrack ? 'new-line' : 'new-line-responsive',
+              classBinding(
+                classObject,
+                'presenterTitle',
+                'font-light paragraph-color-1'
+              ),
+            ]"
+            >{{ titleCompany }}</span
+          >
+        </p>
+        <p
+          v-if="showBio && presenter.biography"
+          :class="
+            classBinding(
+              classObject,
+              'presenterBio',
+              'font-light text-base paragraph-color-1'
+            )
+          "
+          v-html="presenter.biography"
+        ></p>
+        <div v-if="enableBio && !bioLinkOnName" class="shrink">
+          <a
+            class="cursor-pointer"
+            :class="classBinding(classObject, 'presenterBioLink', '')"
+            @click="handleClick()"
+            >{{ bioLinkText }}
+          </a>
+        </div>
+      </div>
+      <div
+        v-if="presenter.photo.length && imagePosition === Position.RIGHT"
+        :class="
+          classBinding(classObject, 'presenterImageContainer', 'shrink p-2')
+        "
       >
-    </p>
-    <p
-      v-if="showBio && presenter.biography"
-      class="font-light text-base paragraph-color-1"
-      v-html="presenter.biography"
-    ></p>
+        <img
+          :src="presenter.photo"
+          :class="classBinding(classObject, 'presenterImage', '')"
+        />
+      </div>
+    </div>
   </div>
 </template>
 

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

@@ -24,14 +24,18 @@ const { fullName, presenterImageStyle, itemWidthStyle, isGrayScale } =
 <template>
   <div>
     <div v-if="useIcon" class="presenter-icon cursor-pointer">
-      <CommonSvgIcon icon="info" :greyscale="isGrayScale"></CommonSvgIcon>
+      <CommonSvgIcon
+        icon="info"
+        :greyscale="isGrayScale"
+        @click="modalVisible = true"
+      ></CommonSvgIcon>
     </div>
 
     <CommonPresenterListing
       v-else
       :presenter="presenter"
       :enable-bio="true"
-      :show-bio="false"
+      :show-bio="true"
       text-class="font-bold text-base"
       link-class="agenda-presenter-color"
       :is-small-grouped-track="isSmallGroupedTrack"

package/dist/runtime/composables/useClassBinding.d.ts

@@ -0,0 +1,4 @@
+export declare type UseClassBindingMethods = {
+    classBinding(_classObject: {}, _element: string, _defaults: string): string;
+};
+export declare const useClassBinding: () => UseClassBindingMethods;

package/dist/runtime/composables/useClassBinding.mjs

@@ -0,0 +1,12 @@
+export const useClassBinding = () => {
+  const classBinding = (_classObject, _element, _defaults) => {
+    const key = _element;
+    if (_classObject[`${key}`] === void 0 || !_classObject[`${key}`].length) {
+      return _defaults;
+    }
+    return _classObject[`${key}`];
+  };
+  return {
+    classBinding
+  };
+};

package/dist/runtime/composables/useConferenceHelpers.mjs

@@ -43,8 +43,7 @@ export const useConferenceHelpers = (conference) => {
   const isSingleDayEvent = (_conference) => {
     const _selectedConference = _getSelectedConference(_conference);
     const firstDay = new Date(_selectedConference.start_date).getMonth() + "/" + new Date(_selectedConference.start_date).getDate();
-    const lastDay = new Date(_selectedConference.end_date).getMonth() + "/" + 3;
-    new Date(_selectedConference.end_date).getDate();
+    const lastDay = new Date(_selectedConference.end_date).getMonth() + "/" + new Date(_selectedConference.end_date).getDate();
     return firstDay === lastDay;
   };
   const showConferenceWebcastButton = (_conference) => {

package/dist/runtime/composables/useEvents.mjs

@@ -1,6 +1,7 @@
 import { storeToRefs } from "pinia";
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 import { sortBy } from "lodash-es";
+import { useAuthStore, useTemplateConfigsStore } from "../store/index.mjs";
 export const useEvents = () => {
   const route = useRoute();
   const router = useRouter();
@@ -32,7 +33,7 @@ export const useEvents = () => {
     return brand;
   };
   const buttonClass = computed(() => {
-    return pagesConfigValue.value("main.countdown_timer") ? "mx-2 mb-2 w-5/6 sm:mr-1 sm:w-auto md:mr-0 md:w-full xl:mr-1 xl:w-auto btn btn-secondary" : "mx-2 mb-2 w-5/6 sm:mr-1 sm:w-auto btn btn-secondary";
+    return pagesConfigValue.value("main.countdown_timer") ? "mx-2 mb-2 w-5/6 sm:w-auto sm:mx-0 sm:mr-4 md:w-full xl:mr-1 xl:w-auto btn btn-secondary" : "mx-2 mb-2 w-5/6 sm:w-auto sm:mx-0 sm:mr-4 btn btn-secondary";
   });
   const isHomePage = computed(() => {
     return route.name === "index";

package/dist/runtime/enums/general.d.ts

@@ -0,0 +1,7 @@
+export declare enum Position {
+    BOTTOM = "bottom",
+    TOP = "top",
+    LEFT = "left",
+    RIGHT = "right",
+    MIDDLE = "middle"
+}

package/dist/runtime/enums/general.mjs

@@ -0,0 +1,8 @@
+export var Position = /* @__PURE__ */ ((Position2) => {
+  Position2["BOTTOM"] = "bottom";
+  Position2["TOP"] = "top";
+  Position2["LEFT"] = "left";
+  Position2["RIGHT"] = "right";
+  Position2["MIDDLE"] = "middle";
+  return Position2;
+})(Position || {});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@icvdeveloper/common-module",
-  "version": "0.0.35",
+  "version": "0.0.37",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -35,6 +35,7 @@
     "pinia-plugin-persistedstate": "^2.1.1",
     "sass": "^1.54.2",
     "sass-loader": "^13.0.2",
+    "tailwindcss-opentype": "^1.1.0",
     "vite-svg-loader": "^3.4.0"
   },
   "devDependencies": {