@icvdeveloper/common-module 2.0.0 → 2.1.0

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

@@ -230,7 +230,7 @@ const showLoginButton = computed((): boolean => {
               )
             "
             :src="conference.photo"
-          />
+          >
         </div>
         <!-- event details container -->
         <div
@@ -287,8 +287,8 @@ const showLoginButton = computed((): boolean => {
                   eventPathPrefix
                     ? eventPathPrefix + conference.id
                     : `/${isUpcoming ? 'upcoming-events' : 'past-events'}/${
-                        conference.id
-                      }`
+                      conference.id
+                    }`
                 "
               >
                 <h2
@@ -321,9 +321,9 @@ const showLoginButton = computed((): boolean => {
             <div
               v-if="
                 isUpcoming &&
-                showCountdown &&
-                countdownPosition === Position.TOP &&
-                pagesConfigValue('main.countdown_timer')
+                  showCountdown &&
+                  countdownPosition === Position.TOP &&
+                  pagesConfigValue('main.countdown_timer')
               "
               :class="
                 classBinding(
@@ -338,7 +338,7 @@ const showLoginButton = computed((): boolean => {
                 :timezone="conference.timezone"
                 :is-compact="true"
                 :class-object="classObject.components.countdownTimer"
-              ></CommonCountdownTimer>
+              />
             </div>
           </div>
           <!-- event button, countdown timer, and sponsors container -->
@@ -474,9 +474,9 @@ const showLoginButton = computed((): boolean => {
               <div
                 v-if="
                   isUpcoming &&
-                  showCountdown &&
-                  countdownPosition === Position.RIGHT &&
-                  pagesConfigValue('main.countdown_timer')
+                    showCountdown &&
+                    countdownPosition === Position.RIGHT &&
+                    pagesConfigValue('main.countdown_timer')
                 "
                 class="flex-auto md:flex mt-3 md:mt-2"
                 :class="
@@ -492,16 +492,16 @@ const showLoginButton = computed((): boolean => {
                   :timezone="conference.timezone"
                   :is-compact="true"
                   :class-object="classObject.components.countdownTimer"
-                ></CommonCountdownTimer>
+                />
               </div>
             </div>
             <!-- countdown timer - bottom-aligned -->
             <div
               v-if="
                 isUpcoming &&
-                showCountdown &&
-                countdownPosition === Position.BOTTOM &&
-                pagesConfigValue('main.countdown_timer')
+                  showCountdown &&
+                  countdownPosition === Position.BOTTOM &&
+                  pagesConfigValue('main.countdown_timer')
               "
               :class="
                 classBinding(
@@ -516,7 +516,7 @@ const showLoginButton = computed((): boolean => {
                 :timezone="conference.timezone"
                 :is-compact="true"
                 :class-object="classObject.components.countdownTimer"
-              ></CommonCountdownTimer>
+              />
             </div>
             <!-- sponsors container - bottom-aligned -->
             <div
@@ -547,7 +547,7 @@ const showLoginButton = computed((): boolean => {
                   v-if="affiliate.photo"
                   :sponsor="affiliate"
                   :class-object="classObject.components.sponsor"
-                ></CommonSponsor>
+                />
               </template>
             </div>
           </div>
@@ -572,7 +572,7 @@ const showLoginButton = computed((): boolean => {
               v-if="affiliate.photo"
               :sponsor="affiliate"
               :class-object="classObject.components.sponsor"
-            ></CommonSponsor>
+            />
           </template>
         </div>
       </div>
@@ -593,7 +593,7 @@ const showLoginButton = computed((): boolean => {
   </div>
 </template>
 
-<style scoped>
+<style lang="postcss" scoped>
 .leading-tight {
   line-height: 1.25rem;
 }

package/dist/runtime/components/forms/Message.vue

@@ -24,7 +24,7 @@ const successClass = computed(() => {
   </div>
 </template>
 
-<style scoped>
+<style lang="postcss" scoped>
 .message-base {
   @apply border font-bold px-4 py-3 mb-4 rounded relative;
 }

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

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { storeToRefs } from "pinia";
 import CloseIcon from "../../assets/svg/close-icon.svg";
 
 type Props = {
@@ -9,6 +10,8 @@ const props = withDefaults(defineProps<Props>(), {
   placeholder: "Search...",
 });
 
+const { placeholder } = storeToRefs(props);
+
 const value = ref<string>("");
 
 const emit = defineEmits<{
@@ -30,8 +33,11 @@ const clear = () => {
       class="flex-1 pl-2 pr-5 py-1"
       :placeholder="placeholder"
       @input="emit('onChange', value)"
-    />
-    <span class="flex-initial cursor-pointer px-4 py-2" @click="clear">
+    >
+    <span
+      class="flex-initial cursor-pointer px-4 py-2"
+      @click="clear"
+    >
       <close-icon class="fill-current text-black" />
     </span>
   </div>

package/dist/runtime/components/forms/SelectDropDown.vue

@@ -37,11 +37,11 @@ const onInput = (e: any): void => {
         :key="index"
         :value="option.value"
         :disabled="index==0 && firstDisabled"
-      >   
-        {{ option.name}}
-      </option>                        
+      >
+        {{ option.name }}
+      </option>
     </select>
-  </span>   
+  </span>
 </template>
 
 

package/dist/runtime/components/forms/SupportForm.vue

@@ -43,7 +43,10 @@ const acceptNumber = () => {
 
 <template>
   <section>
-    <form v-if="!submitted" @submit.prevent="handleForm">
+    <form
+      v-if="!submitted"
+      @submit.prevent="handleForm"
+    >
       <div class="font-bold mb-4">
         To contact support, please fill out the form below.
       </div>
@@ -87,24 +90,32 @@ const acceptNumber = () => {
       </div>
 
       <div class="mb-3">
-        <label class="block font-semibold text-gray-800 mb-1"
-          >Message</label
-        >
+        <label class="block font-semibold text-gray-800 mb-1">Message</label>
 
         <CommonTextArea v-model="form.message" />
 
         <CommonErrorField :errors="errors['message']" />
       </div>
 
-      <button class="btn btn-secondary" type="submit">Submit</button>
+      <button
+        class="btn btn-secondary"
+        type="submit"
+      >
+        Submit
+      </button>
       <div class="mb-3">
         <CommonErrorField :errors="errors['response']" />
       </div>
     </form>
 
     <!-- Submitted Message -->
-    <div v-if="submitted" class="text-center my-12">
-      <div class="text-2xl font-bold text-gray-800 mb-2">Thank you.</div>
+    <div
+      v-if="submitted"
+      class="text-center my-12"
+    >
+      <div class="text-2xl font-bold text-gray-800 mb-2">
+        Thank you.
+      </div>
       <div class="text-lg font-semibold text-gray-700">
         Your message has been received.
       </div>

package/dist/runtime/components/forms/SwitchInput.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, toRefs } from "vue";
 import type { SwitchInputClassObj } from "../../@types/components";
 import { useClassBinding } from "../../composables/useClassBinding";
 
@@ -55,38 +55,58 @@ const { classBinding } = useClassBinding();
   </div>
 </template>
 
-<style scoped>
+<style lang="postcss" scoped>
 .switch-button-control {
   display: flex;
   flex-direction: row;
   align-items: center;
-}
-.switch-button-control .switch-button {
-  height: 1.6em;
-  width: calc(1.6em * 2);
-  border: 2px solid var(--color);
-  box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.33);
-  border-radius: 1.6em;
-  transition: all 0.3s ease-in-out;
-  cursor: pointer;
-}
-.switch-button-control .switch-button .button {
-  height: calc(1.6em - 2 * 2px);
-  width: calc(1.6em - 2 * 2px);
-  border: 2px solid var(--color);
-  border-radius: calc(1.6em - 2 * 2px);
-  background: var(--color);
-  transition: all 0.3s ease-in-out;
-}
-.switch-button-control .switch-button.enabled {
-  background-color: var(--color);
-  box-shadow: none;
-}
-.switch-button-control .switch-button.enabled .button {
-  background: white;
-  transform: translateX(calc(calc(1.6em - 2 * 2px) + 2 * 2px));
-}
-.switch-button-control .switch-button-label {
-  margin-left: 10px;
+
+  .switch-button {
+    --switch-button-height: 1.6em;
+    --switch-button-color: var(--color);
+    --switch-button-border-thickness: 2px;
+    --switch-transition: all 0.3s ease-in-out;
+    --switch-is-rounded: true;
+
+    height: var(--switch-button-height);
+    width: calc(var(--switch-button-height) * 2);
+    border: var(--switch-button-border-thickness) solid var(--switch-button-color);
+    box-shadow: inset 0 0 var(--switch-button-border-thickness) 0 rgba(0, 0, 0, 0.33);
+    border-radius: var(--switch-button-height);
+
+    transition: var(--switch-transition);
+
+    --button-side-length: calc(
+      var(--switch-button-height) - (2 * var(--switch-button-border-thickness))
+    );
+
+    cursor: pointer;
+
+    .button {
+      height: var(--button-side-length);
+      width: var(--button-side-length);
+      border: var(--switch-button-border-thickness) solid var(--switch-button-color);
+      border-radius: var(--button-side-length);
+      background: var(--switch-button-color);
+
+      transition: var(--switch-transition);
+    }
+
+    &.enabled {
+      background-color: var(--switch-button-color);
+      box-shadow: none;
+
+      .button {
+        background: white;
+        transform: translateX(
+          calc(var(--button-side-length) + (2 * var(--switch-button-border-thickness)))
+        );
+      }
+    }
+  }
+
+  .switch-button-label {
+    margin-left: 10px;
+  }
 }
 </style>

package/dist/runtime/components/forms/TextArea.vue

@@ -21,6 +21,6 @@ const onInput = (e) => {
       class="form-input"
       rows="4"
       @change="onInput"
-    ></textarea>
+    />
   </span>
 </template>

package/dist/runtime/components/forms/TextInput.vue

@@ -37,5 +37,5 @@ const { classObject } = toRefs(props);
     :value="props.modelValue"
     :placeholder="placeholder"
     @change="changeInput"
-  />
+  >
 </template>

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

@@ -18,7 +18,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 // data
-const { title, tabContent, contentObject } = toRefs(props);
+const { title, tabContent } = toRefs(props);
 const active = ref<boolean>(false);
 
 // computed
@@ -63,16 +63,21 @@ const tabTitleValues = computed(() => {
         class="font-black flex-initial"
         style="width: 0.75rem"
       >
-        <CommonSvgIcon icon="downarrow"></CommonSvgIcon>
+        <CommonSvgIcon icon="downarrow" />
       </span>
       <span
         v-show="active"
         class="font-black flex-initial"
         style="width: 0.75rem"
       >
-        <CommonSvgIcon class="invert" icon="downarrow"></CommonSvgIcon>
+        <CommonSvgIcon
+          class="invert"
+          icon="downarrow"
+        />
       </span>
     </a>
-    <div v-show="active"><slot /></div>
+    <div v-show="active">
+      <slot />
+    </div>
   </div>
 </template>

package/dist/runtime/components/media/ArchivePlayerAndContentContainer.vue

@@ -96,7 +96,10 @@ const getSponsorsResult = computed((): Sponsor[] => {
     </div>
 
     <!-- TABS -->
-    <div v-else :class="classBinding(classObject, 'withTabsContainer', '')">
+    <div
+      v-else
+      :class="classBinding(classObject, 'withTabsContainer', '')"
+    >
       <CommonComponentsContentTabs
         :class="
           classBinding(

package/dist/runtime/components/media/ArchiveVideoPlayer.vue

@@ -74,7 +74,7 @@ const playStream = () => {
 
 const setupMediaPlayer = () => {
   if (icvPlayerObj) {
-    icvPlayerObj = <PlayerObj>{};
+    icvPlayerObj = {} as PlayerObj;
   }
   if (isFile.value) {
     nextTick(() => {
@@ -121,7 +121,7 @@ const cleanup = () => {
   if (icvPlayerObj) {
     stop();
     remove();
-    icvPlayerObj = <PlayerObj>{};
+    icvPlayerObj = {} as PlayerObj;
   }
   clearInterval(timeInterval);
 };
@@ -168,27 +168,15 @@ onUnmounted(() => {
       id="mediaPlayer"
       ref="mediaPlayer"
       :class="classBinding(classObject, 'playerElement', '')"
-    ></div>
+    />
     <span
       v-if="isHtml"
       :v-html="presentation.embed_html"
       :class="classBinding(classObject, 'embedElement', '')"
-    ></span>
+    />
   </div>
 </template>
 
 <style>
-#archive-player-container > span {
-  padding-bottom: 56.25%;
-  height: 0;
-  position: relative;
-  display: block;
-}
-#archive-player-container > span > iframe {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-}
+#archive-player-container>span{display:block;height:0;padding-bottom:56.25%;position:relative}#archive-player-container>span>iframe{height:100%;left:0;position:absolute;top:0;width:100%}
 </style>

package/dist/runtime/components/media/PlayerAndContentContainer.vue

@@ -99,7 +99,10 @@ const hasAccess = computed((): boolean => {
     </div>
 
     <!-- TABS -->
-    <div v-else :class="classBinding(classObject, 'withTabsContainer', '')">
+    <div
+      v-else
+      :class="classBinding(classObject, 'withTabsContainer', '')"
+    >
       <CommonComponentsContentTabs
         :class="
           classBinding(

package/dist/runtime/components/media/WebcastVideoPlayer.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, toRefs, computed, watch, onMounted, nextTick } from "vue";
+import { toRefs, computed, watch, onMounted, nextTick } from "vue";
 import { get } from "lodash-es";
 import type { Presentation, Stream, PlayerObj } from "../../models/conference";
 import type { WebcastPlayerClassObj } from "../../@types/components";
@@ -47,7 +47,7 @@ const isHls = computed(() => {
 // methods
 const setupMediaPlayer = () => {
   if (icvPlayerObj) {
-    icvPlayerObj = <PlayerObj>{};
+    icvPlayerObj = {} as PlayerObj;
   }
   if (isHls.value) {
     nextTick(() => {
@@ -114,27 +114,15 @@ onMounted(() => {
       id="mediaPlayer"
       ref="mediaPlayer"
       :class="classBinding(classObject, 'playerElement', '')"
-    ></div>
+    />
     <span
       v-if="isHtml"
       :v-html="stream.embed_html"
       :class="classBinding(classObject, 'embedElement', '')"
-    ></span>
+    />
   </div>
 </template>
 
 <style>
-#webcast-player-container > span {
-  padding-bottom: 56.25%;
-  height: 0;
-  position: relative;
-  display: block;
-}
-#webcast-player-container > span > iframe {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-}
+#webcast-player-container>span{display:block;height:0;padding-bottom:56.25%;position:relative}#webcast-player-container>span>iframe{height:100%;left:0;position:absolute;top:0;width:100%}
 </style>

package/dist/runtime/components/media/components/AgendaPanel.vue

@@ -40,15 +40,16 @@ const { classBinding } = useClassBinding();
   </div>
 </template>
 
-<style scoped>
+<style lang="postcss" scoped>
 .sponsor-grid {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 10px;
-}
-.sponsor-grid .grid-item {
-  align-items: center;
-  align-self: center;
-  justify-self: center;
+
+  .grid-item {
+    align-items: center;
+    align-self: center;
+    justify-self: center;
+  }
 }
 </style>

package/dist/runtime/components/media/components/ArchiveMediaContainer.vue

@@ -88,7 +88,7 @@ const checkTime = (_time: number): void => {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="postcss">
 .media-container {
   display: grid;
   grid-template-columns: var(--media-template-columns-default);
@@ -102,9 +102,9 @@ const checkTime = (_time: number): void => {
   display: grid;
 }
 
-@screen lg {
-  img.normal {
-    max-height: 65vh;
+img.normal {
+  @screen lg {
+    max-height: 65vh; /* max height before distorting container */
   }
 }
 
@@ -125,12 +125,14 @@ const checkTime = (_time: number): void => {
   .media-container {
     grid-template-columns: var(--media-template-columns-large);
   }
+
   .expand-overlay {
     @apply p-2;
     display: block;
-  }
-  .expand-overlay:hover {
-    opacity: 0.7;
+
+    &:hover {
+      opacity: 0.7;
+    }
   }
 }
 </style>

package/dist/runtime/components/media/components/CeCreditNotification.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import Pusher from "pusher-js";
 import Echo from "laravel-echo";
-import { toRefs, computed } from "vue";
+import { computed, onMounted, ref, toRefs } from "vue";
 import type { Conference } from "../../../models/conference";
 import type { CeCreditPanelClassObj } from "../../../@types/components";
 import { useClassBinding } from "../../../composables/useClassBinding";
@@ -43,7 +43,7 @@ const timeRemainingClass = computed(() => {
 
 // methods
 const handleNotification = (_conference: Conference) => {
-  clearInterval(countdownLoopId);
+  clearInterval(countdownLoopId.value);
   window.scrollTo({ top: 0, behavior: "smooth" });
   visible.value = true;
   displayFor.value = _conference.ce_credit_config?.display_for || 30;
@@ -125,13 +125,13 @@ onMounted(() => {
               classBinding(classObject, 'timeInSeconds', ''),
               timeRemainingClass,
             ]"
-            >{{ displayFor }} seconds
+        >{{ displayFor }} seconds
           </span>
         </p>
         <p
           :class="classBinding(classObject, 'promptText', '')"
           v-text="promptText"
-        ></p>
+        />
         <p :class="classBinding(classObject, 'buttonContainer', '')">
           <button
             :class="
@@ -139,11 +139,11 @@ onMounted(() => {
             "
             @click="acceptClick"
             v-text="buttonText"
-          ></button>
+          />
         </p>
       </div>
     </div>
   </transition>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="postcss" scoped></style>

package/dist/runtime/components/media/components/ContentArea.vue

@@ -57,6 +57,9 @@ const trackEmbedHtml = computed((): string | null => {
 
 // methods
 
+// TODO - this is not used in this component.
+// it looks like the same logic for displaying stream sponsors is already being handled in the ArchivePlayerAndContentContainer.
+// confirm that that fulfills this logic's purpose, and remove this logic.
 const getFeaturedSponsors = (): void => {
   const featuredSponsorLevel = get(
     pagesConfigValue,
@@ -192,7 +195,7 @@ onMounted(() => {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="postcss">
 .content {
   position: relative;
 }
@@ -205,8 +208,9 @@ onMounted(() => {
   z-index: 40;
   position: absolute;
   transition: 0.4s ease;
-}
-.content-expand-overlay:hover {
-  opacity: 0.7;
+
+  &:hover {
+    opacity: 0.7;
+  }
 }
 </style>