@worksafevictoria/wcl7.5 1.13.0-beta.9 → 1.14.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.13.0-beta.9",
+  "version": "1.14.0-beta.1",
   "main": "src/index.js",
   "license": "MIT",
   "repository": {

package/src/components/Containers/Carousel/index.vue

@@ -21,7 +21,10 @@
         :img-alt="item.imageAlt"
         @click.prevent="handleClick(item.linkURL)"
       >
-        <h4>{{ item.title }}</h4>
+        <span 
+          :class="carousel-caption" 
+          :aria-label="item.title ? item.title : 'No caption available'"
+          :style="item.title === null || item.title === '' ? 'height: 32px;' : null">{{ item.title }}</span>
       </BCarouselSlide>
     </BCarousel>
   </div>
@@ -118,17 +121,28 @@ methods: {
     position: relative;
     margin-bottom: 10px;
   }
+
+  .carousel-inner {
+    border-radius: 8px  ;
+  } 
 /* Introduced changes to make image responsive */
   .carousel img {
     object-fit: cover;
-    max-height: 420px;
+    max-height: 392px;
+    height: auto;
     width: 100%;
   }
 
+  .carousel-indicators {
+    justify-content: end !important;
+    margin-right: 10px !important;
+  }
+
   .carousel-indicators button {
     width: 10px !important;
     height: 10px !important;
     border-radius: 50% !important;
+    background-color: yellow !important;
   }
 
   .carousel-indicators button:focus,
@@ -138,14 +152,24 @@ methods: {
   }
 
   .carousel-caption {
+    display: flex;
+    font-size: 24px;
+    font-weight: normal;
+    flex-direction: column;
+    align-items: flex-start; 
+    text-align: left !important;
+    width: 100%;
     color: white;
-    text-decoration: underline;
     background-color: black;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    padding: 1rem !important;
   }
 
   .carousel-control-next,
   .carousel-control-prev {
-    bottom: 7rem;
+    bottom: 4rem;
   }
 
   .carousel-control-prev:focus,
@@ -158,9 +182,12 @@ methods: {
 
   .carousel-control-prev-icon,
   .carousel-control-next-icon {
-    height: 50px !important;
-    width: 50px !important;
-    outline:none !important;
+    height: 60px !important;
+    width: 60px !important;
+  }
+
+  .carousel-item {
+    position: relative;
   }
 
   .carouselPara {

package/src/components/Containers/HomepageHeader/index.vue

@@ -38,16 +38,7 @@
           :stretch="true"
           >{{ link.text }}</cta-button
         >
-        <cta-button
-          class="iebtn"
-          url="/choose-your-language"
-          type="dark"
-          :stretch="true"
-          :glyph="earthIcon"
-          :is-centred="false"
-          >Choose your language</cta-button
-        >
-      </div>
+     </div>
     </template>
   </hero-header>
 </template>
@@ -86,7 +77,7 @@ export default {
 
 .homepage-header {
   border-bottom: none !important;
-
+  
   :deep(.wysiwyg) {
     h1 {
       @media screen and (max-width: 390px) {

package/src/components/Containers/HomepageHeaderNew/index.vue

@@ -13,7 +13,7 @@
       
     <div class="homepage-header__content-wrapper">
       <container class="homepage-header__content-wrapper__content">
-        <row>
+        <row id="header-row">
           <!-- changes made to bootstrap grid breakpoints -->
           <column
               class="homepage-header__content-wrapper__content-col col-12 col-md-7 col-lg-8 homepage-header__content-wrapper__content-col--split wcl-rich-text--ltr"
@@ -25,6 +25,7 @@
               />
           </column>
           <column  
+              id="header-links"
               class="homepage-header__side col-12 col-md-5 col-lg-4"
             >
               <div>
@@ -33,8 +34,9 @@
                   :key="i"
                   class="iebtn"
                   :url="link.path"
-                  type="dark"
                   :stretch="true"
+                  type="dark"
+                 
                   >{{ link.text }}</cta-button
                 >
               </div>
@@ -83,7 +85,35 @@ export default {
 
   data: () => ({
     earthIcon,
-  })
+  }),
+  mounted() {
+    window.addEventListener('resize', this.setCarouselHeight)
+    this.setCarouselHeight()
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.setCarouselHeight)
+  },
+  methods: {
+    setCarouselHeight() {
+      this.$nextTick(() => {
+        const sideMenu = this.$el.querySelector('.homepage-header__side')
+        const carousel = this.$el.querySelector('.carousel')
+        const carouselItem = this.$el.querySelector('.carousel-item')
+               
+        if (sideMenu && carousel && window.innerWidth >= 450  ) {
+          const menuHeight = sideMenu.offsetHeight
+          const newHeight = menuHeight - 16  // 16px padding adjustment
+          carousel.style.height = `${newHeight}px`
+          if (carouselItem) {
+            carouselItem.style.height = `${newHeight}px`
+          }
+        } else if (carousel) {
+            carousel.removeAttribute('style') // Reset to default styles
+            carouselItem.removeAttribute('style') // Reset to default styles
+        }
+      })
+    },
+  }  
 }
 </script>
 
@@ -99,6 +129,8 @@ export default {
   border-bottom: none !important;
   height: auto;
   align-items: normal;
+  padding-top: 30px;
+  padding-bottom: 30px;
 
   :deep(.wysiwyg) {
     h1 {
@@ -171,7 +203,6 @@ export default {
   }
 
   &__search {
-    margin-top: 10px;
     z-index: 1;
     width: auto;
     position: relative;
@@ -218,5 +249,4 @@ export default {
   }
 }
 
-
 </style>

package/src/components/Global/AppHeaderNew/index.vue

@@ -506,7 +506,6 @@ export default {
       this.windowWidth = window.innerWidth;
     },
     firstLevelClick(item, ref) {
-      // Reset screen to fix whitespace
       if (window && window.scrollTo && this.screen === "desktop") {
         window.scrollTo(0, 0);
       }
@@ -536,10 +535,8 @@ export default {
         this.isSecondLevelOpen === true &&
         selectedItem === previouslyOpenItem
       ) {
-        selectedItem.classList.remove("isActiveParent");
-        selectedItem.getElementsByTagName("a")[0].setAttribute("aria-expanded", "false");
-        this.isSecondLevelOpen = false;
-        this.letBodyOverflow(true);
+        this.closeMegaMenu();
+       
       }
       // If the link has no children then go to that page
       else if (!item.below) {
@@ -587,6 +584,7 @@ export default {
       }
       // If the menu is already open and the same item is clicked,
       // close it
+
       else if (
         item.below &&
         this.isThirdLevelOpen === true &&

package/src/components/Global/AppHeaderNew/mobile.scss

@@ -3,6 +3,7 @@
 .app-header {
   &.isMobile {
     padding: 0;
+    width: 100vw;
 
     .app-header {
       &__wrap {
@@ -300,7 +301,8 @@
     border-collapse: separate;
     border-spacing: 5px;
   }
-}
+  
+  }
 
 .imgMobile {
   display: block;
@@ -323,6 +325,10 @@
   background-color: #f2f2f2;
   border: 1px solid #f2f2f2;
   border-radius: 8px;
+
+  &:focus, &:hover {
+    border: 1px solid #BABABA;
+  }
 }
 
 .app-header__wrap_mobile {
@@ -331,6 +337,6 @@
 }
 
 .flex-container_contrast_mobile {
-  margin-left: -10px;
+  margin-left: -167px;
 }
 

package/src/components/Global/AppHeaderNew/styles.scss

@@ -4,8 +4,8 @@
   color: $app-menu-white;
   z-index: 27;
   position: relative;
-  padding: 0px 10px;
-  width: 100%;
+  padding: 0px;
+  width: 100vw;
   font-size: 14px;
 
   &__wrap {
@@ -45,9 +45,14 @@
   }
   .isActiveChild {
     > a {
-      background: $app-header-active;
-      color: $app-header-text-colour;
+      background: $app-header-hover;
+      color: black;
       border-bottom: 1px solid transparent;
+
+      svg.caret-right {
+        filter: invert(0%) sepia(12%) saturate(108%) hue-rotate(344deg)
+        brightness(94%) contrast(80%);
+      }
     }
   }
 
@@ -430,7 +435,7 @@
 .logoImg {
   height: 55px;
   width: auto;
-  margin-left: 10px;
+  margin-left: 20px;
 }
 
 .semi-circle {

package/src/components/Paragraphs/BrowseContent/index.vue

@@ -25,7 +25,7 @@
       />
     </template>
 
-    <template v-if="filters.taxonomies.length > 0" v-slot:cardGroupPreContent>
+    <template v-if="filters?.taxonomies?.length > 0" v-slot:cardGroupPreContent>
       <directory-filters
         class="wcl-browse-content__filter"
         :filters="filters"
@@ -38,250 +38,245 @@
   </card-group>
 </template>
 
-<script>
-import CardGroup from '../../SubComponents/CardGroup/index.vue'
-import DirectoryFilters from '../../Global/DirectoryFilters/index.vue'
-import Switcher from './switcher.vue'
+<script setup>
+// import { CardGroup, DirectoryFilters, Switcher } from '@worksafevictoria/wcl7.5'
 
-export default {
-  name: 'BrowseContent',
-  components: {
-    CardGroup,
-    DirectoryFilters,
-    Switcher,
+const nuxtApp = useNuxtApp()
+const hasMorePages = ref(false)
+const displayedCards = ref([])
+const loading = ref(false)
+const bundleCache = ref({})
+const displayLimit = ref(0)
+const allCards = ref(undefined)
+const props = defineProps({
+  background: {
+    type: String,
+    default: 'grey',
   },
-  props: {
-    background: {
-      type: String,
-      default: 'grey',
-    },
-    title: {
-      type: String,
-      default: '',
-    },
-    titleTag: {
-      type: String,
-      default: 'h2',
-    },
-    bundle: {
-      type: Array,
-      default: () => [''],
-    },
-    columns: {
-      type: Number,
-      default: 0,
-    },
-    initialDisplyLimit: {
-      type: Number,
-      default: 0,
-    },
-    fetchContent: {
-      type: Function,
-      required: true,
-    },
-    fetchFilters: {
-      type: Function,
-      required: false,
-      default: null,
-    },
-    enableBundleFilter: {
-      type: Boolean,
-    },
-    getBundleAlias: {
-      type: Function,
-      required: false,
-      default: null,
-    },
-    showMore: {
-      type: Boolean,
-    },
-    type: {
-      type: String,
-      required: true,
-    },
+  title: {
+    type: String,
+    default: '',
   },
-  // Temp use of mounted to replace fetch
-  async mounted() {
-    if (this.displayedCards.length === 0) {
-      await this.loadFiltersAndContent()
-    }
+  titleTag: {
+    type: String,
+    default: 'h2',
   },
-  // TODO useAsyncData <script setup>
-  // async fetch() {
-  //   if (this.displayedCards.length === 0) {
-  //     await this.loadFiltersAndContent()
-  //   }
-  // },
-  data() {
-    return {
-      hasMorePages: false,
-      displayedCards: [],
-      loading: true,
-      bundleCache: {},
-      displayLimit: 0,
-      allCards: undefined,
-      filters: {
-        taxonomies: [],
-        selected: {},
-        availableBundles: [],
-      },
-    }
+  bundle: {
+    type: Array,
+    default: () => [''],
   },
-  fetchKey: 'ws-browscontent',
-  methods: {
-    async loadFiltersAndContent() {
-      await Promise.all([
-        this.fetchFilters ? this.loadFilters() : Promise.resolve(),
-        this.loadMoreCards(true),
-      ])
-    },
-    init() {
-      this.allCards = {
-        total: 0,
-        cards: [],
-      }
-      this.displayLimit = 0
-      this.hasMorePages = false
-      this.displayedCards = []
-      this.bundleCache = {}
-    },
-    async fetchCards(currentDisplayedCards, allCards, addMoreBy, bundles) {
-      const shouldMakeNewFetchCall =
-        currentDisplayedCards.length + addMoreBy > allCards.cards.length
-      if (shouldMakeNewFetchCall) {
-        const cardBundles = await Promise.all(
-          bundles.map((bundle, index) =>
-            this.getBundle(bundle, addMoreBy, index),
-          ),
-        )
-        allCards = this.getShuffledCards(cardBundles)
+  columns: {
+    type: Number,
+    default: 0,
+  },
+  initialDisplyLimit: {
+    type: Number,
+    default: 0,
+  },
+  fetchContent: {
+    type: Function,
+    required: true,
+  },
+  fetchFilters: {
+    type: Function,
+    required: false,
+    default: null,
+  },
+  enableBundleFilter: {
+    type: Boolean,
+  },
+  getBundleAlias: {
+    type: Function,
+    required: false,
+    default: null,
+  },
+  showMore: {
+    type: Boolean,
+  },
+  type: {
+    type: String,
+    required: true,
+  },
+  id: {
+    type: String,
+    required: true,
+  },
+})
 
-        if (
-          this.type === 'paragraph--cards_group_latest' ||
-          this.type === 'paragraph--browse_content'
-        ) {
-          allCards.cards = this.sortByDate(allCards.cards)
-        }
-      }
-      return allCards
-    },
-    async loadMoreCards(init) {
-      const attrs = {
-        group: this.$pageStore?.content?.title,
-      }
-      if (this.$gtm && !init) {
-        this.$gtm.push({ event: 'custom.interaction.showmore.click', ...attrs })
-      }
-      if (init) {
-        this.init()
-      }
-      this.loading = true
-      const addMoreBy = this.initialDisplyLimit
-      this.displayLimit += addMoreBy
-      const bundles =
-        this.filters.availableBundles.length > 0
-          ? this.filters.availableBundles
-          : this.bundle
-      this.allCards = await this.fetchCards(
-        this.displayedCards,
-        this.allCards,
-        addMoreBy,
-        bundles,
-      )
-      this.hasMorePages = this.allCards.total > this.allCards.cards.length
-      this.displayedCards = this.allCards.cards.slice(0, this.displayLimit)
-      this.loading = false
-    },
-    getBundle(bundle, addMoreBy, index) {
-      let start
-      const rows = addMoreBy
-      const cache = (this.bundleCache[bundle] = this.bundleCache[bundle] || {
-        response: {
-          results: [],
-          numFound: 0,
-        },
-        qs: {
-          start,
-        },
+const filterKey = computed(() => `filters-${props.id}`)
+const { data: filters } = await useAsyncData(filterKey, async () => {
+  try {
+    const filters = {
+      taxonomies: [],
+      selected: {},
+      availableBundles: [],
+    }
+    if (props.fetchFilters) {
+      await props.fetchFilters().then((taxonomies) => {
+        filters.taxonomies = taxonomies
       })
+    }
+    return filters
+  } catch (err) {
+    console.log('🚀 ~ err:', err)
+  }
+})
 
-      if (cache.qs.start === undefined) {
-        start = 0
-      } else if (cache.response.numFound > cache.response.results.length) {
-        start = cache.response.results.length
-      } else {
-        return Promise.resolve(cache.response)
-      }
-
-      const qs = {
-        bundle,
-        rows,
-        start,
-      }
-      return this.fetchContent(qs, this.filters.selected, index).then(
-        (response) => {
-          cache.qs.start = qs.start
-          cache.response.numFound = response.numFound
-          cache.response.results.push(...response.results)
-          return cache.response
-        },
-      )
-    },
-    getShuffledCards(cardBundles) {
-      const shuffled = []
-      const bundleWithMostCards = cardBundles.reduce(
-        (a, b) => (a.results.length > b.results.length ? a : b),
-        { results: [] },
-      ).results.length
+const cardsKey = computed(() => `cards-${props.id}`)
+const { data: savedCards } = await useAsyncData(cardsKey, async () => {
+  await loadMoreCards(true)
+  return {
+    cards: JSON.parse(JSON.stringify(allCards.value)),
+    bundle: JSON.parse(JSON.stringify(bundleCache.value)),
+  }
+})
 
-      for (let i = 0; i < bundleWithMostCards; i++) {
-        cardBundles.forEach((bundle) => {
-          if (bundle.results[i]) {
-            shuffled.push(bundle.results[i])
-          }
-        })
-      }
+watch(
+  () => savedCards.value,
+  (newVal, oldVal) => {
+    if (newVal && allCards.value === undefined) {
+      allCards.value = JSON.parse(JSON.stringify(savedCards.value.cards))
+      bundleCache.value = JSON.parse(JSON.stringify(savedCards.value.bundle))
+      displayLimit.value += props.initialDisplyLimit
+      hasMorePages.value = allCards.value.total > allCards.value.cards.length
+      displayedCards.value = allCards.value.cards.slice(0, displayLimit.value)
+    }
+  },
+  { immediate: true },
+)
 
-      const total = cardBundles.reduce((acc, bundle) => {
-        return acc + bundle.numFound
-      }, 0)
+function initial() {
+  allCards.value = {
+    total: 0,
+    cards: [],
+  }
+  displayLimit.value = 0
+  hasMorePages.value = false
+  displayedCards.value = []
+  bundleCache.value = {}
+}
+async function fetchCards(currentDisplayedCards, allCards, addMoreBy, bundles) {
+  const shouldMakeNewFetchCall =
+    currentDisplayedCards.length + addMoreBy > allCards.cards.length
+  if (shouldMakeNewFetchCall) {
+    const cardBundles = await Promise.all(
+      bundles.map((bundle, index) => getBundle(bundle, addMoreBy, index)),
+    )
+    allCards = getShuffledCards(cardBundles)
 
-      return { cards: shuffled, total }
-    },
-    loadFilters() {
-      return this.fetchFilters().then((taxonomies) => {
-        this.filters.taxonomies = taxonomies
-        return Promise.resolve(taxonomies)
-      })
+    if (
+      props.type === 'paragraph--cards_group_latest' ||
+      props.type === 'paragraph--browse_content'
+    ) {
+      allCards.cards = sortByDate(allCards.cards)
+    }
+  }
+  return allCards
+}
+async function loadMoreCards(init) {
+  const attrs = {
+    group: nuxtApp.$pageStore?.content?.title,
+  }
+  if (nuxtApp.$gtm && !init) {
+    nuxtApp.$gtm.push({ event: 'custom.interaction.showmore.click', ...attrs })
+  }
+  if (init) {
+    initial()
+  }
+  loading.value = true
+  // const addMoreBy = props.initialDisplyLimit
+  displayLimit.value += props.initialDisplyLimit
+  const bundles =
+    filters.value.availableBundles.length > 0
+      ? filters.value.availableBundles
+      : props.bundle
+  allCards.value = await fetchCards(
+    displayedCards.value,
+    allCards.value,
+    props.initialDisplyLimit, //addMoreBy,
+    bundles,
+  )
+  hasMorePages.value = allCards.value.total > allCards.value.cards.length
+  displayedCards.value = allCards.value.cards.slice(0, displayLimit.value)
+  loading.value = false
+}
+async function getBundle(bundle, addMoreBy, index) {
+  let start
+  const rows = addMoreBy
+  const cache = (bundleCache.value[bundle] = bundleCache.value[bundle] || {
+    response: {
+      results: [],
+      numFound: 0,
     },
-    onFilter(filters) {
-      this.bundleCache = {}
-      Object.keys(filters).forEach((filter) => {
-        this.filters.selected[filter] = filters[filter].map((obj) => obj.tid)
-      })
-      this.loadMoreCards(true)
+    qs: {
+      start,
     },
-    onSwitcher(switchToBundle) {
-      this.filters.selected = {}
-      this.filters.availableBundles.length = 0
-      if (switchToBundle) {
-        this.filters.availableBundles.push(switchToBundle)
+  })
+  if (cache.qs.start === undefined) {
+    start = 0
+  } else if (cache.response.numFound > cache.response.results.length) {
+    start = cache.response.results.length
+  } else {
+    return Promise.resolve(cache.response)
+  }
+  const qs = {
+    bundle,
+    rows,
+    start,
+  }
+  let response = await props.fetchContent(qs, filters.value.selected)
+  cache.qs.start = qs.start
+  cache.response.numFound = response.numFound
+  cache.response.results.push(...response.results)
+  return cache.response
+}
+function getShuffledCards(cardBundles) {
+  const shuffled = []
+  const bundleWithMostCards = cardBundles.reduce(
+    (a, b) => (a.results.length > b.results.length ? a : b),
+    { results: [] },
+  ).results.length
+
+  for (let i = 0; i < bundleWithMostCards; i++) {
+    cardBundles.forEach((bundle) => {
+      if (bundle.results[i]) {
+        shuffled.push(bundle.results[i])
       }
-      this.loadMoreCards(true)
-    },
-    async reset() {
-      this.bundleCache = {}
-      this.filters.selected = {}
-      this.filters.availableBundles.length = 0
-      await this.loadMoreCards(true)
-    },
-    sortByDate(cards) {
-      const sorted = cards.sort((a, b) => {
-        return new Date(b.dateSort) - new Date(a.dateSort)
-      })
-      return sorted
-    },
-  },
+    })
+  }
+
+  const total = cardBundles.reduce((acc, bundle) => {
+    return acc + bundle.numFound
+  }, 0)
+
+  return { cards: shuffled, total }
+}
+const onFilter = (fltrs) => {
+  bundleCache.value = {}
+  Object.keys(fltrs).forEach((filter) => {
+    filters.value.selected[filter] = fltrs[filter].map((obj) => obj.tid)
+  })
+  loadMoreCards(true)
+}
+const onSwitcher = (switchToBundle) => {
+  filters.value.selected = {}
+  filters.value.availableBundles.length = 0
+  if (switchToBundle) {
+    filters.value.availableBundles.push(switchToBundle)
+  }
+  loadMoreCards(true)
+}
+const reset = async () => {
+  bundleCache.value = {}
+  filters.value.selected = {}
+  filters.value.availableBundles.length = 0
+  await loadMoreCards(true)
+}
+function sortByDate(cards) {
+  const sorted = cards.sort((a, b) => {
+    return new Date(b.dateSort) - new Date(a.dateSort)
+  })
+  return sorted
 }
 </script>
 <style lang="scss" scoped>

package/src/includes/scss/mixins/src/fp.scss

@@ -17,6 +17,7 @@
   $multiplier: calc(($max - $min) / ($end - $start) * 100);
   $adder: calc(($min * $end - $max * $start) / ($end - $start));
   $formula: calc(#{$multiplier + 0vw} + #{$adder + 0px});
+  #{$property}: $formula;
   @if $clip and $clipAtStart {
     @media (max-width: #{$start + 0px}) {
       #{$property}: $min + 0px;
@@ -27,5 +28,4 @@
       #{$property}: $max + 0px;
     }
   }
-  #{$property}: $formula;
 }

package/src/index.js

@@ -1,13 +1,13 @@
-// Global Components
+// Global Componentsn  - replace HomePageheader with HomepageHeaderNew to introduce new header
 import Container from './components/Containers/Container/index.vue'
 import Row from './components/Containers/Row/index.vue'
 import Column from './components/Containers/Column/index.vue'
-import HomepageHeader from './components/Containers/HomepageHeaderNew/index.vue'
+import HomepageHeader from './components/Containers/HomepageHeader/index.vue'
 import Subheader from './components/Containers/Subheader/index.vue'
 import SectionGroup from './components/Containers/SectionGroup/index.vue'
 import CarouselComponent from './components/Containers/Carousel/index.vue'
 
-import AppHeader from './components/Global/AppHeaderNew/index.vue'
+import AppHeader from './components/Global/AppHeader/index.vue'
 import AppFooter from './components/Global/AppFooter/index.vue'
 import HeroHeader from './components/Global/HeroHeader/index.vue'
 import SocialShare from './components/Global/SocialShare/index.vue'
@@ -59,9 +59,6 @@ import Search from './components/SubComponents/Search/index.vue'
 import VideoThumbnail from './components/SubComponents/VideoThumbnail/index.vue'
 import ResourceGroup from './components/SubComponents/ResourceGroup/index.vue'
 
-// Temp Components for testing
-import BrowseContent2 from './components/Paragraphs/BrowseContent/setup.vue'
-
 // Export Global Components
 export {
   Container,
@@ -128,15 +125,8 @@ export {
   ResourceGroup,
 }
 
-// Export for BrowseContent
+// DEPRECATED - to be removed in future
 import DirectoryFilters from './components/Global/DirectoryFilters/index.vue'
 import Switcher from './components/Paragraphs/BrowseContent/switcher.vue'
 
-export {
-  // CardGroup, already imported
-  DirectoryFilters,
-  Switcher,
-}
-
-// Temp Components for testing
-export { BrowseContent2 }
+export { DirectoryFilters, Switcher }

package/src/components/Paragraphs/BrowseContent/setup.vue

@@ -1,284 +0,0 @@
-<template>
-  <card-group
-    :title="title"
-    :title-tag="titleTag"
-    :background="background"
-    :cards="displayedCards"
-    :loading="loading"
-    :columns="columns"
-    :show-load-more="showMore && hasMorePages"
-    :class="`wcl-browse-content card_group__card--col-${columns}`"
-    :card-browse-content="true"
-    @loadMore="() => loadMoreCards(false)"
-  >
-    <template
-      v-if="enableBundleFilter && bundle.length > 1"
-      v-slot:cardGroupFilter
-    >
-      <switcher
-        v-if="enableBundleFilter"
-        :options="bundle"
-        class="wcl-browse-content__switcher"
-        :get-option-alias="getBundleAlias"
-        @switched="onSwitcher"
-        @reset="onSwitcher"
-      />
-    </template>
-
-    <template v-if="filters.taxonomies.length > 0" v-slot:cardGroupPreContent>
-      <directory-filters
-        class="wcl-browse-content__filter"
-        :filters="filters"
-        :results="allCards.total"
-        :is-filtering="loading"
-        @onFilter="onFilter"
-        @onReset="reset"
-      />
-    </template>
-  </card-group>
-</template>
-
-<script setup>
-import CardGroup from '../../SubComponents/CardGroup/index.vue'
-import DirectoryFilters from '../../Global/DirectoryFilters/index.vue'
-import Switcher from './switcher.vue'
-
-const nuxtApp = useNuxtApp()
-
-const hasMorePages = ref(false)
-const displayedCards = ref([])
-const loading = ref(true)
-const bundleCache = ref({})
-const displayLimit = ref(0)
-const allCards = ref(undefined)
-const filters = ref({
-  taxonomies: [],
-  selected: {},
-  availableBundles: [],
-})
-const props = defineProps({
-  background: {
-    type: String,
-    default: 'grey',
-  },
-  title: {
-    type: String,
-    default: '',
-  },
-  titleTag: {
-    type: String,
-    default: 'h2',
-  },
-  bundle: {
-    type: Array,
-    default: () => [''],
-  },
-  columns: {
-    type: Number,
-    default: 0,
-  },
-  initialDisplyLimit: {
-    type: Number,
-    default: 0,
-  },
-  fetchContent: {
-    type: Function,
-    required: true,
-  },
-  fetchFilters: {
-    type: Function,
-    required: false,
-    default: null,
-  },
-  enableBundleFilter: {
-    type: Boolean,
-  },
-  getBundleAlias: {
-    type: Function,
-    required: false,
-    default: null,
-  },
-  showMore: {
-    type: Boolean,
-  },
-  type: {
-    type: String,
-    required: true,
-  },
-})
-
-await useAsyncData('fetchData', async () => {
-  try {
-    await Promise.all([
-      props.fetchFilters ? loadFilters() : Promise.resolve(),
-      loadMoreCards(true),
-    ])
-  } catch (err) {
-    console.log('🚀 ~ err:', err)
-  }
-})
-
-function initial() {
-  allCards.value = {
-    total: 0,
-    cards: [],
-  }
-  displayLimit.value = 0
-  hasMorePages.value = false
-  displayedCards.value = []
-  bundleCache.value = {}
-}
-async function fetchCards(currentDisplayedCards, allCards, addMoreBy, bundles) {
-  const shouldMakeNewFetchCall =
-    currentDisplayedCards.length + addMoreBy > allCards.cards.length
-  if (shouldMakeNewFetchCall) {
-    const cardBundles = await Promise.all(
-      bundles.map((bundle, index) => getBundle(bundle, addMoreBy, index)),
-    )
-    allCards = getShuffledCards(cardBundles)
-
-    if (
-      props.type === 'paragraph--cards_group_latest' ||
-      props.type === 'paragraph--browse_content'
-    ) {
-      allCards.cards = sortByDate(allCards.cards)
-    }
-  }
-  return allCards
-}
-
-async function loadMoreCards(init) {
-  const attrs = {
-    group: nuxtApp.$pageStore?.content?.title,
-  }
-  if (nuxtApp.$gtm && !init) {
-    nuxtApp.$gtm.push({ event: 'custom.interaction.showmore.click', ...attrs })
-  }
-  if (init) {
-    initial()
-  }
-  loading.value = true
-  const addMoreBy = props.initialDisplyLimit
-  displayLimit.value += addMoreBy
-  const bundles =
-    filters.value.availableBundles.length > 0
-      ? filters.value.availableBundles
-      : props.bundle
-  allCards.value = await fetchCards(
-    displayedCards.value,
-    allCards.value,
-    addMoreBy,
-    bundles,
-  )
-  hasMorePages.value = allCards.value.total > allCards.value.cards.length
-  displayedCards.value = allCards.value.cards.slice(0, displayLimit.value)
-  loading.value = false
-}
-async function getBundle(bundle, addMoreBy, index) {
-  let start
-  const rows = addMoreBy
-  const cache = (bundleCache.value[bundle] = bundleCache.value[bundle] || {
-    response: {
-      results: [],
-      numFound: 0,
-    },
-    qs: {
-      start,
-    },
-  })
-  if (cache.qs.start === undefined) {
-    start = 0
-  } else if (cache.response.numFound > cache.response.results.length) {
-    start = cache.response.results.length
-  } else {
-    return Promise.resolve(cache.response)
-  }
-  const qs = {
-    bundle,
-    rows,
-    start,
-  }
-  let response = await props.fetchContent(qs, filters.value.selected)
-  cache.qs.start = qs.start
-  cache.response.numFound = response.numFound
-  cache.response.results.push(...response.results)
-  return cache.response
-}
-function getShuffledCards(cardBundles) {
-  const shuffled = []
-  const bundleWithMostCards = cardBundles.reduce(
-    (a, b) => (a.results.length > b.results.length ? a : b),
-    { results: [] },
-  ).results.length
-
-  for (let i = 0; i < bundleWithMostCards; i++) {
-    cardBundles.forEach((bundle) => {
-      if (bundle.results[i]) {
-        shuffled.push(bundle.results[i])
-      }
-    })
-  }
-
-  const total = cardBundles.reduce((acc, bundle) => {
-    return acc + bundle.numFound
-  }, 0)
-
-  return { cards: shuffled, total }
-}
-function loadFilters() {
-  return props.fetchFilters().then((taxonomies) => {
-    filters.value.taxonomies = taxonomies
-
-    return Promise.resolve(taxonomies)
-  })
-}
-const onFilter = (fltrs) => {
-  bundleCache.value = {}
-  Object.keys(fltrs).forEach((filter) => {
-    filters.values.selected[filter] = fltrs[filter].map((obj) => obj.tid)
-  })
-  loadMoreCards(true)
-}
-const onSwitcher = (switchToBundle) => {
-  filters.value.selected = {}
-  filters.value.availableBundles.length = 0
-  if (switchToBundle) {
-    filters.value.availableBundles.push(switchToBundle)
-  }
-  loadMoreCards(true)
-}
-const reset = async () => {
-  bundleCache.value = {}
-  filters.value.selected = {}
-  filters.value.availableBundles.length = 0
-  await loadMoreCards(true)
-}
-function sortByDate(cards) {
-  const sorted = cards.sort((a, b) => {
-    return new Date(b.dateSort) - new Date(a.dateSort)
-  })
-  return sorted
-}
-</script>
-<style lang="scss" scoped>
-.wcl-browse-content {
-  &__filter {
-    align-items: flex-end;
-    place-content: flex-end;
-  }
-
-  &.card_group__card--col-4 {
-    :deep(.card-grid__column .card-grid-item__description) {
-      display: none;
-    }
-  }
-
-  :deep(.card_group__card--blue .card_item__desc p) {
-    margin-top: 12px;
-  }
-
-  :deep(.card_group__card--red .card_item__desc p) {
-    margin-top: 12px;
-  }
-}
-</style>