{"version":3,"file":"GallerySliderFi-D0q3LJPe.js","sources":["../../src/components/atoms/slider-fi/SliderFi.vue","../../src/pages/gallery-slider-fi/GallerySliderFi.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"{\n      'slider-fi': true,\n      'slider-fi--clipped-right': clippedRight,\n    }\"\n  >\n    <div\n      v-if=\"!isMounted\"\n      class=\"slider-fi__ssr-slide\"\n      :style=\"`width: ${Math.max(100, numberedSlots.length * 40)}%;`\"\n    >\n      <div\n        v-for=\"slotNr in numberedSlots\"\n        :key=\"slotNr\"\n        class=\"slider-fi__slide\"\n      >\n        <slot :name=\"slotNr\" />\n      </div>\n    </div>\n\n    <Splide\n      v-else\n      ref=\"splide\"\n      :options=\"{\n        drag: 'free',\n        snap: true,\n        arrows: false,\n        type: numberedSlots.length > 2 ? 'loop' : 'slide',\n        autoWidth: true,\n      }\"\n      @splide:move=\"sliderMove\"\n      @splide:moved=\"sliderMoved\"\n      @splide:drag=\"sliderMove\"\n      @splide:dragged=\"sliderMoved\"\n    >\n      <splide-slide\n        v-for=\"slotNr in numberedSlots\"\n        :key=\"slotNr\"\n        class=\"slider-fi__slide\"\n      >\n        <slot :name=\"slotNr\" />\n      </splide-slide>\n    </Splide>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport '@splidejs/vue-splide/css/core';\n\nimport { Splide, SplideSlide } from '@splidejs/vue-splide';\nimport { type ComponentPublicInstance, computed, onMounted, ref, useSlots } from 'vue';\n\nconst slots = useSlots();\nconst splide = ref<ComponentPublicInstance<typeof Splide> | null>(null);\nconst emits = defineEmits<{\n  'before-change': [value: void];\n  'after-change': [value: void];\n}>();\n\ndefineProps<{\n  clippedRight?: boolean;\n}>();\n\nconst isMounted = ref<boolean>(false);\nonMounted(() => {\n  isMounted.value = true;\n});\n\nconst numberedSlots = computed<Array<number>>(() => {\n  const allSlotNames = Object.keys(slots);\n  return allSlotNames\n    .map((string) => Number.parseInt(string))\n    .filter((number) => number || number === 0)\n    .sort();\n});\n\nconst prev = () => {\n  splide.value?.go('<');\n};\n\nconst next = () => {\n  splide.value?.go('>');\n};\nconst pause = () => {\n  splide.value?.pause();\n};\nconst play = () => {\n  splide.value?.play();\n};\n\nconst sliderMove = () => {\n  emits('before-change');\n};\n\nconst sliderMoved = () => {\n  emits('after-change');\n};\n\ndefineExpose({\n  prev,\n  next,\n  pause,\n  play,\n});\n</script>\n\n<style scoped lang=\"scss\">\n@import './slider-fi';\n</style>\n","<template>\n  <component-wrapper>\n    <grid-container-fi\n      :class=\"{\n        'gallery-slider-fi': true,\n        'gallery-slider-fi--exp': isEditMode,\n        'gallery-slider-fi--ssr': !isMounted,\n      }\"\n    >\n      <div\n        v-if=\"isEditMode\"\n        class=\"gallery-slider-fi__exp-info\"\n      >\n        <icon-fi icon=\"alert-triangle\" /> COMPONENT ONLY EDITABLE IN CONTENT EDITOR\n      </div>\n\n      <div class=\"fi-col-span-full\">\n        <div class=\"gallery-slider-fi__header\">\n          <richtext-fi\n            class=\"gallery-slider-fi__text\"\n            :html-content=\"fields.text\"\n          />\n          <template v-if=\"galleryItems.length > 2 || (galleryItems.length === 2 && !isMD)\">\n            <div\n              class=\"gallery-slider-fi__arrow\"\n              @click=\"slider.prev()\"\n            >\n              <arrow-icon class=\"backwards\" />\n            </div>\n            <div\n              class=\"gallery-slider-fi__arrow\"\n              @click=\"slider.next()\"\n            >\n              <arrow-icon />\n            </div>\n          </template>\n        </div>\n\n        <slider-fi\n          v-if=\"galleryItems.length\"\n          ref=\"slider\"\n          class=\"gallery-slider-fi__slider\"\n          :clipped-right=\"true\"\n          :settings=\"sliderSettings\"\n          @before-change=\"beforeSlideChanged\"\n          @after-change=\"afterSlideChanged\"\n        >\n          <template\n            v-for=\"(item, index) in galleryItems\"\n            :key=\"index\"\n            #[index]\n          >\n            <div class=\"gallery-slider-fi__item\">\n              <div\n                v-if=\"isEditMode\"\n                class=\"gallery-slider-fi__item__editable\"\n              >\n                <div\n                  v-if=\"isVideo(item.fields)\"\n                  class=\"video-player-fi__overlay\"\n                >\n                  <div class=\"video-player-fi__play-button\">\n                    <icon-fi icon=\"play\" />\n                  </div>\n                </div>\n\n                <div\n                  v-if=\"item.fields.image?.value\"\n                  class=\"gallery-slider-fi__item__editable__image\"\n                >\n                  <img :src=\"item.fields.image.value.src\" />\n                </div>\n              </div>\n              <div\n                v-else\n                class=\"gallery-slider-fi__item__image\"\n              >\n                <ssr-cloud-image-fi\n                  v-if=\"!isVideo(item.fields)\"\n                  :src=\"item.fields.image?.value?.src\"\n                  :alt=\"item.fields.image?.value?.alt\"\n                  :title=\"item.fields.image?.value?.title\"\n                  :aspect-ratio=\"16 / 9\"\n                  :unlimited=\"724\"\n                  :breakpoints=\"breakpoints\"\n                />\n\n                <video-player-fi\n                  v-else\n                  :fields=\"item.fields\"\n                  :pause-video=\"slideIsChanging\"\n                  :aspect-ratio=\"16 / 9\"\n                  :unlimited=\"724\"\n                  :overlay-breakpoints=\"breakpoints\"\n                />\n              </div>\n              <div class=\"gallery-slider-fi__item__text\">\n                <!-- eslint-disable vue/no-v-html -->\n                <p\n                  v-if=\"item.fields?.headline?.value\"\n                  class=\"gallery-slider-fi__item__headline\"\n                  v-html=\"item.fields.headline.value\"\n                />\n                <p\n                  v-if=\"item.fields?.text?.value\"\n                  class=\"gallery-slider-fi__item__text\"\n                  v-html=\"item.fields.text.value\"\n                />\n                <!-- eslint-enable vue/no-v-html -->\n              </div>\n            </div>\n          </template>\n        </slider-fi>\n\n        <div\n          v-if=\"isEditMode && !galleryItems.length\"\n          class=\"fi-my-42 fi-flex fi-items-center\"\n        >\n          <icon-fi icon=\"alert-triangle\" /> no active gallery item\n        </div>\n      </div>\n    </grid-container-fi>\n  </component-wrapper>\n</template>\n\n<script setup lang=\"ts\">\nimport { ArrowIcon, IconFi, RichtextFi, SliderFi, SsrCloudImageFi } from 'atoms/index';\nimport type { Breakpoint } from 'atoms/ssr-cloud-image-fi/SsrCloudImageFi.vue';\nimport ComponentWrapper from 'components/component-wrapper/ComponentWrapper.vue';\nimport GridContainerFi from 'components/grid-fi/GridContainerFi.vue';\nimport VideoPlayerFi from 'components/video-player-fi/VideoPlayerFi.vue';\nimport { useBreakpoints } from 'composables/breakpoint';\nimport { useVideo } from 'composables/video';\nimport screenWidths from 'tailwind/screenWidths';\nimport { computed, onMounted, ref } from 'vue';\n\nimport type { SingleLineTextField } from '@/sitecoreFieldTypes';\n\nconst { isVideo } = useVideo();\nconst { isMD } = useBreakpoints();\n\ndefineOptions({\n  name: 'GallerySliderFi',\n});\n\nconst props = withDefaults(\n  defineProps<{\n    fields?: {\n      galleryItems?: Array<any>;\n      text?: SingleLineTextField;\n    };\n  }>(),\n  {\n    fields: () => ({}),\n  },\n);\n\nconst slider = ref<InstanceType<typeof SliderFi> | null>(null);\n\nconst slideIsChanging = ref(false);\n\nconst breakpoints: Array<Breakpoint> = [\n  {\n    mediaWidth: 366,\n    imageWidth: 480,\n  },\n  {\n    mediaWidth: 1023,\n    imageWidth: 782,\n  },\n  {\n    mediaWidth: 1439,\n    imageWidth: 532,\n  },\n  {\n    mediaWidth: 1440,\n    imageWidth: 724,\n  },\n];\n\nconst isMounted = ref<boolean>(false);\nonMounted(() => {\n  isMounted.value = true;\n});\n\nconst galleryItems = computed<Array<any>>(() => props.fields.galleryItems || []);\n\nconst sliderSettings: any = {\n  dots: false,\n  arrows: true,\n  swipeToSlide: true,\n  autoplay: false,\n  autoplaySpeed: 9000,\n  adaptiveHeight: false,\n  slidesToShow: 2,\n  slidesToScroll: 1,\n  speed: 1000,\n  mobileFirst: true,\n  infinite: true,\n  responsive: [\n    {\n      breakpoint: screenWidths.sm,\n      settings: {\n        arrows: false,\n        slidesToShow: 1,\n      },\n    },\n  ],\n};\n\nconst beforeSlideChanged = (): void => {\n  slideIsChanging.value = true;\n};\n\nconst afterSlideChanged = (): void => {\n  slideIsChanging.value = false;\n};\n</script>\n\n<style scoped lang=\"scss\">\n@import './gallery-slider-fi';\n</style>\n"],"names":["slots","useSlots","splide","ref","emits","__emit","isMounted","onMounted","numberedSlots","computed","string","number","prev","_a","next","pause","play","sliderMove","sliderMoved","__expose","isVideo","useVideo","isMD","useBreakpoints","props","__props","slider","slideIsChanging","breakpoints","galleryItems","sliderSettings","screenWidths","beforeSlideChanged","afterSlideChanged"],"mappings":"2ZAqDA,MAAMA,EAAQC,IACRC,EAASC,EAAmD,IAAI,EAChEC,EAAQC,EASRC,EAAYH,EAAa,EAAK,EACpCI,EAAU,IAAM,CACdD,EAAU,MAAQ,EAAA,CACnB,EAEK,MAAAE,EAAgBC,EAAwB,IACvB,OAAO,KAAKT,CAAK,EAEnC,IAAKU,GAAW,OAAO,SAASA,CAAM,CAAC,EACvC,OAAQC,GAAWA,GAAUA,IAAW,CAAC,EACzC,MACJ,EAEKC,EAAO,IAAM,QACVC,EAAAX,EAAA,QAAA,MAAAW,EAAO,GAAG,IAAG,EAGhBC,EAAO,IAAM,QACVD,EAAAX,EAAA,QAAA,MAAAW,EAAO,GAAG,IAAG,EAEhBE,EAAQ,IAAM,QAClBF,EAAAX,EAAO,QAAP,MAAAW,EAAc,OAAM,EAEhBG,EAAO,IAAM,QACjBH,EAAAX,EAAO,QAAP,MAAAW,EAAc,MAAK,EAGfI,EAAa,IAAM,CACvBb,EAAM,eAAe,CAAA,EAGjBc,EAAc,IAAM,CACxBd,EAAM,cAAc,CAAA,EAGT,OAAAe,EAAA,CACX,KAAAP,EACA,KAAAE,EACA,MAAAC,EACA,KAAAC,CAAA,CACD,y3CCkCK,KAAA,CAAE,QAAAI,GAAYC,KACd,CAAE,KAAAC,GAASC,IAMXC,EAAQC,EAYRC,EAASvB,EAA0C,IAAI,EAEvDwB,EAAkBxB,EAAI,EAAK,EAE3ByB,EAAiC,CACrC,CACE,WAAY,IACZ,WAAY,GACd,EACA,CACE,WAAY,KACZ,WAAY,GACd,EACA,CACE,WAAY,KACZ,WAAY,GACd,EACA,CACE,WAAY,KACZ,WAAY,GACd,CAAA,EAGItB,EAAYH,EAAa,EAAK,EACpCI,EAAU,IAAM,CACdD,EAAU,MAAQ,EAAA,CACnB,EAED,MAAMuB,EAAepB,EAAqB,IAAMe,EAAM,OAAO,cAAgB,CAAA,CAAE,EAEzEM,EAAsB,CAC1B,KAAM,GACN,OAAQ,GACR,aAAc,GACd,SAAU,GACV,cAAe,IACf,eAAgB,GAChB,aAAc,EACd,eAAgB,EAChB,MAAO,IACP,YAAa,GACb,SAAU,GACV,WAAY,CACV,CACE,WAAYC,EAAa,GACzB,SAAU,CACR,OAAQ,GACR,aAAc,CAChB,CACF,CACF,CAAA,EAGIC,EAAqB,IAAY,CACrCL,EAAgB,MAAQ,EAAA,EAGpBM,EAAoB,IAAY,CACpCN,EAAgB,MAAQ,EAAA"}