@iamproperty/components 7.8.2--beta2 → 7.8.2--beta4

package/package.json

@@ -5,7 +5,7 @@
     "name": "iamproperty"
   },
   "private": false,
-  "version": "7.8.2--beta2",
+  "version": "7.8.2--beta4",
   "scripts": {
     "reload": "vite --host",
     "dev": "npm run copy && node local_modules/delete-assets.cjs && npm run compile && npm run watch",

package/assets/js/modules/carousel.js

@@ -1,214 +0,0 @@
-export const generateThumbnailList = function (carouselComponent) {
-    const thumbnailImages = [];
-    Array.from(carouselComponent.querySelectorAll(':scope > :is(div,iam-card)')).forEach((slide, index) => {
-        if (slide.hasAttribute('data-thumbnail')) {
-            thumbnailImages[index] = slide.getAttribute('data-thumbnail');
-        }
-    });
-    return thumbnailImages;
-};
-export const generatePipsHTML = function (carouselComponent, thumbnailImages) {
-    const itemCount = carouselComponent.querySelectorAll(':scope > :is(div,iam-card)').length;
-    let pips = '';
-    for (let i = 1; i <= itemCount; i++) {
-        let pipContent = null;
-        let pipClass = '';
-        if (thumbnailImages.length && thumbnailImages[i - 1]) {
-            pipClass = 'has-thumbnail';
-            pipContent = `<img src="${thumbnailImages[i - 1]}" alt="Slide ${i}" height="148"/>`;
-        }
-        else {
-            pipContent = `Slide ${i}`;
-        }
-        pips += `<button class="control-${i} ${pipClass}" data-slide="${i}" ${i == 1 ? 'aria-current' : ''}>${pipContent}</button>`;
-    }
-    return pips;
-};
-export const getProgressMax = function (itemCount, visibleItems) {
-    if (visibleItems == 1) {
-        return itemCount;
-    }
-    const max = Math.ceil(itemCount / visibleItems) * visibleItems - visibleItems;
-    return max + 1;
-};
-const getProgressPercent = function (value, max) {
-    return ((value - 1) / (max - 1)) * 100;
-};
-export const carousel = function (carouselComponent) {
-    let scrollTimeout;
-    const carouselElement = carouselComponent.shadowRoot.querySelector('.carousel');
-    const carouselInner = carouselElement.querySelector('.carousel__inner');
-    const carouselControls = carouselElement.querySelector('.carousel__controls');
-    const carouselProgress = carouselElement.querySelector('.carousel__progress [type="range"]');
-    const itemCount = carouselComponent.querySelectorAll(':scope > :is(div,iam-card)').length;
-    let scrollArea = carouselInner.clientWidth;
-    let itemWidth = carouselComponent.querySelector(':scope > :is(div,iam-card)').scrollWidth;
-    let visibleItems = Math.round(scrollArea / itemWidth);
-    carouselProgress.setAttribute('min', 1);
-    carouselProgress.setAttribute('step', visibleItems);
-    let progressMax = getProgressMax(itemCount, visibleItems);
-    carouselProgress.setAttribute('max', progressMax);
-    carouselProgress.value = 1;
-    let percent = getProgressPercent(1, progressMax);
-    carouselProgress.style.setProperty('--percent', percent + '%');
-    let stepperInterval, stepperEvent = 'mouseup', stepperStart = 'mousedown';
-    if ('ontouchstart' in document.documentElement) {
-        stepperEvent = 'touchend';
-        stepperStart = 'touchstart';
-    }
-    // On scroll we need to make sure the buttons get corrected and the next testimonial is shown
-    carouselInner.addEventListener('scroll', function () {
-        clearTimeout(scrollTimeout);
-        scrollTimeout = setTimeout(function () {
-            const scrollArea = carouselInner.clientWidth;
-            const scrollWidth = carouselInner.scrollWidth;
-            const scrollLeft = carouselInner.scrollLeft;
-            let targetSlide = Math.round((scrollLeft / scrollWidth) * itemCount) + 1;
-            const itemWidth = carouselComponent.querySelector(':scope > :is(div,iam-card)').scrollWidth;
-            const lastItemOffset = carouselComponent.querySelector(':scope > :is(div,iam-card):last-child').offsetLeft;
-            //+60px here is to account for when the next offscreen slide is visible beneath the next arrow
-            const lastItemInView = carouselInner.scrollLeft + scrollArea + carouselInner.getBoundingClientRect().left >= lastItemOffset + 60;
-            const visibleItems = Math.round(scrollArea / itemWidth);
-            //Check if theres room for more slides than we have
-            const leftOverSpace = Math.ceil(itemCount / visibleItems) * visibleItems - itemCount;
-            carouselProgress.setAttribute('step', visibleItems);
-            if (leftOverSpace > 0 && lastItemInView) {
-                targetSlide = Math.floor(itemCount / visibleItems) * visibleItems + 1;
-            }
-            Array.from(carouselElement.querySelectorAll('.carousel__controls button')).forEach((button) => {
-                button.removeAttribute('aria-current');
-            });
-            carouselElement.querySelector('.control-' + targetSlide).setAttribute('aria-current', true);
-            // Disable the previous button
-            if (targetSlide == 1)
-                carouselElement.querySelector('.btn-prev').setAttribute('disabled', 'disabled');
-            else
-                carouselElement.querySelector('.btn-prev').removeAttribute('disabled');
-            // Disable the next button if the last item is in view
-            if (targetSlide > itemCount - visibleItems)
-                carouselElement.querySelector('.btn-next').setAttribute('disabled', 'disabled');
-            else
-                carouselElement.querySelector('.btn-next').removeAttribute('disabled');
-            carouselProgress.value = targetSlide;
-            progressMax = getProgressMax(itemCount, visibleItems);
-            carouselProgress.setAttribute('max', progressMax);
-            percent = (targetSlide / progressMax) * 100;
-            percent = getProgressPercent(targetSlide, progressMax);
-            carouselProgress.style.setProperty('--percent', percent + '%');
-        }, 100);
-    }, false);
-    // when the buttons are used we need to make sure the carousel scrolls to the correct place
-    carouselControls.addEventListener('click', function (e) {
-        for (let target = e.target; target && target != this; target = target.parentNode) {
-            if (typeof target.matches == 'function' && target.matches('button')) {
-                e.preventDefault();
-                Array.from(carouselControls.querySelectorAll('button')).forEach((button) => {
-                    button.removeAttribute('aria-current');
-                });
-                target.setAttribute('aria-current', true);
-                const customEvent = new CustomEvent('pip-clicked', {
-                    detail: {
-                        slide: target.getAttribute('data-slide'),
-                    },
-                });
-                carouselComponent.dispatchEvent(customEvent);
-                const el = carouselComponent.querySelector(`:scope > *:nth-child(${target.getAttribute('data-slide')})`);
-                carouselInner.scroll({
-                    top: 0,
-                    left: el.offsetLeft - carouselInner.getBoundingClientRect().left,
-                    behavior: 'smooth',
-                });
-                break;
-            }
-        }
-    }, false);
-    carouselElement.addEventListener('click', function (e) {
-        const scrollArea = carouselInner.clientWidth;
-        //const scrollWidth = carouselInner.scrollWidth;
-        const itemWidth = carouselComponent.querySelector(':scope > :is(div,iam-card)').scrollWidth;
-        const visibleItems = Math.round(scrollArea / itemWidth);
-        const lastItemOffset = carouselComponent.querySelector(':scope > :is(div,iam-card):last-child').offsetLeft;
-        const lastItemInView = carouselInner.scrollLeft + scrollArea + carouselInner.getBoundingClientRect().left >= lastItemOffset + 60;
-        //Check if theres room for more slides than we have
-        const leftOverSpace = Math.ceil(itemCount / visibleItems) * visibleItems - itemCount;
-        /*
-        When the last slide isn't filled with items, we only want to move back the number of items on the slide,
-        rather than the total number of possible visible items
-      */
-        const spacesToMove = visibleItems - leftOverSpace;
-        //Only want to change the amount of movement if the last item is visible
-        const movement = lastItemInView && leftOverSpace > 0 ? spacesToMove * itemWidth : carouselInner.clientWidth;
-        for (let target = e.target; target && target != this; target = target.parentNode) {
-            if (typeof target.matches == 'function' && target.matches('.btn-next, .btn-prev')) {
-                const direction = target.matches('.btn-next') ? 'next' : 'prev';
-                const customEvent = new CustomEvent(`${direction}-clicked`, {
-                    detail: {
-                        slide: target.getAttribute('data-go'),
-                    },
-                });
-                carouselComponent.dispatchEvent(customEvent);
-                e.preventDefault();
-                const scrollTo = target.classList.contains('btn-prev')
-                    ? carouselInner.scrollLeft - movement
-                    : carouselInner.scrollLeft + carouselInner.clientWidth;
-                carouselInner.scroll({
-                    top: 0,
-                    left: scrollTo,
-                    behavior: 'smooth',
-                });
-                break;
-            }
-        }
-    }, false);
-    carouselProgress.addEventListener(stepperStart, function () {
-        clearInterval(stepperInterval);
-        stepperInterval = setInterval(function () {
-            scrollArea = carouselInner.clientWidth;
-            itemWidth = carouselComponent.querySelector(':scope > :is(div,iam-card)').scrollWidth;
-            visibleItems = Math.round(scrollArea / itemWidth);
-            carouselProgress.setAttribute('step', visibleItems);
-            progressMax = getProgressMax(itemCount, visibleItems);
-            carouselProgress.setAttribute('max', progressMax);
-            percent = getProgressPercent(carouselProgress.value, progressMax);
-            carouselProgress.style.setProperty('--percent', percent + '%');
-        }, 10);
-    });
-    carouselProgress.addEventListener(stepperEvent, function () {
-        clearInterval(stepperInterval);
-    });
-    carouselProgress.addEventListener('change', function () {
-        clearInterval(stepperInterval);
-        const target = carouselComponent.querySelector(`:scope > *:nth-child(${carouselProgress.value})`);
-        carouselInner.scroll({
-            top: 0,
-            left: target ? target.offsetLeft - carouselInner.getBoundingClientRect().left : 0,
-            behavior: 'smooth',
-        });
-        //const direction = target.matches('.btn-next') ? 'next' : 'prev';
-        const customEvent = new CustomEvent(`slider-changed`, {
-            detail: {
-                slide: carouselProgress.value,
-            },
-        });
-        carouselComponent.dispatchEvent(customEvent);
-    }, false);
-};
-export const updateCarousel = function (carouselComponent) {
-    const carouselElement = carouselComponent.shadowRoot.querySelector('.carousel');
-    const carouselInner = carouselElement.querySelector('.carousel__inner');
-    const carouselControls = carouselElement.querySelector('.carousel__controls');
-    const carouselProgress = carouselElement.querySelector('.carousel__progress [type="range"]');
-    const itemCount = carouselComponent.querySelectorAll(':scope > :is(div,iam-card)').length;
-    let scrollArea = carouselInner.clientWidth;
-    let itemWidth = carouselComponent.querySelector(':scope > :is(div,iam-card)').scrollWidth;
-    let visibleItems = Math.round(scrollArea / itemWidth);
-    carouselProgress.setAttribute('min', 1);
-    carouselProgress.setAttribute('step', visibleItems);
-    let progressMax = getProgressMax(itemCount, visibleItems);
-    carouselProgress.setAttribute('max', progressMax);
-    carouselProgress.value = 1;
-    let percent = getProgressPercent(1, progressMax);
-    carouselProgress.style.setProperty('--percent', percent + '%');
-    carouselControls.innerHTML = generatePipsHTML(carouselComponent, []);
-};
-export default carousel;

package/assets/js/modules/carousel.test.js

@@ -1,18 +0,0 @@
-import { describe, expect, it } from './test.ts';
-import { createElement, installTestDom } from './test-dom.ts';
-import { append } from './test-utils.ts';
-import { generatePipsHTML, generateThumbnailList, getProgressMax } from './carousel.ts';
-installTestDom();
-describe('Carousel module', () => {
-    it('builds thumbnail-aware pips and progress max values', () => {
-        const carousel = createElement('iam-carousel');
-        append(carousel, createElement('div', { dataThumbnail: '/one.jpg' }), createElement('iam-card'), createElement('div', { dataThumbnail: '/three.jpg' }));
-        const thumbnails = generateThumbnailList(carousel);
-        const html = generatePipsHTML(carousel, thumbnails);
-        expect(thumbnails[0] === '/one.jpg');
-        expect(thumbnails[2] === '/three.jpg');
-        expect(html.includes('control-1 has-thumbnail'));
-        expect(html.includes('Slide 2'));
-        expect(getProgressMax(7, 3) === 7);
-    });
-});

package/assets/ts/modules/carousel.test.ts

@@ -1,27 +0,0 @@
-import { describe, expect, it } from './test.ts';
-import { createElement, installTestDom } from './test-dom.ts';
-import { append } from './test-utils.ts';
-import { generatePipsHTML, generateThumbnailList, getProgressMax } from './carousel.ts';
-
-installTestDom();
-
-describe('Carousel module', () => {
-  it('builds thumbnail-aware pips and progress max values', () => {
-    const carousel = createElement('iam-carousel');
-    append(
-      carousel,
-      createElement('div', { dataThumbnail: '/one.jpg' }),
-      createElement('iam-card'),
-      createElement('div', { dataThumbnail: '/three.jpg' })
-    );
-
-    const thumbnails = generateThumbnailList(carousel);
-    const html = generatePipsHTML(carousel, thumbnails);
-
-    expect(thumbnails[0] === '/one.jpg');
-    expect(thumbnails[2] === '/three.jpg');
-    expect(html.includes('control-1 has-thumbnail'));
-    expect(html.includes('Slide 2'));
-    expect(getProgressMax(7, 3) === 7);
-  });
-});

package/assets/ts/modules/carousel.ts

@@ -1,301 +0,0 @@
-export const generateThumbnailList = function (carouselComponent): any {
-  const thumbnailImages = [];
-
-  Array.from(carouselComponent.querySelectorAll(':scope > :is(div,iam-card)')).forEach((slide, index) => {
-    if (slide.hasAttribute('data-thumbnail')) {
-      thumbnailImages[index] = slide.getAttribute('data-thumbnail');
-    }
-  });
-
-  return thumbnailImages;
-};
-
-export const generatePipsHTML = function (carouselComponent, thumbnailImages): string {
-  const itemCount = carouselComponent.querySelectorAll(':scope > :is(div,iam-card)').length;
-
-  let pips = '';
-  for (let i = 1; i <= itemCount; i++) {
-    let pipContent = null;
-    let pipClass = '';
-
-    if (thumbnailImages.length && thumbnailImages[i - 1]) {
-      pipClass = 'has-thumbnail';
-      pipContent = `<img src="${thumbnailImages[i - 1]}" alt="Slide ${i}" height="148"/>`;
-    } else {
-      pipContent = `Slide ${i}`;
-    }
-
-    pips += `<button class="control-${i} ${pipClass}" data-slide="${i}" ${i == 1 ? 'aria-current' : ''}>${pipContent}</button>`;
-  }
-
-  return pips;
-};
-
-export const getProgressMax = function (itemCount, visibleItems): number {
-  if (visibleItems == 1) {
-    return itemCount;
-  }
-
-  const max = Math.ceil(itemCount / visibleItems) * visibleItems - visibleItems;
-
-  return max + 1;
-};
-
-const getProgressPercent = function (value, max): number {
-  return ((value - 1) / (max - 1)) * 100;
-};
-
-export const carousel = function (carouselComponent): void {
-  let scrollTimeout;
-
-  const carouselElement = carouselComponent.shadowRoot.querySelector('.carousel');
-
-  const carouselInner = carouselElement.querySelector('.carousel__inner');
-  const carouselControls = carouselElement.querySelector('.carousel__controls');
-  const carouselProgress = carouselElement.querySelector('.carousel__progress [type="range"]');
-  const itemCount = carouselComponent.querySelectorAll(':scope > :is(div,iam-card)').length;
-  let scrollArea = carouselInner.clientWidth;
-  let itemWidth = carouselComponent.querySelector(':scope > :is(div,iam-card)').scrollWidth;
-  let visibleItems = Math.round(scrollArea / itemWidth);
-
-  carouselProgress.setAttribute('min', 1);
-  carouselProgress.setAttribute('step', visibleItems);
-
-  let progressMax = getProgressMax(itemCount, visibleItems);
-
-  carouselProgress.setAttribute('max', progressMax);
-  carouselProgress.value = 1;
-
-  let percent = getProgressPercent(1, progressMax);
-
-  carouselProgress.style.setProperty('--percent', percent + '%');
-
-  let stepperInterval,
-    stepperEvent = 'mouseup',
-    stepperStart = 'mousedown';
-
-  if ('ontouchstart' in document.documentElement) {
-    stepperEvent = 'touchend';
-    stepperStart = 'touchstart';
-  }
-
-  // On scroll we need to make sure the buttons get corrected and the next testimonial is shown
-  carouselInner.addEventListener(
-    'scroll',
-    function () {
-      clearTimeout(scrollTimeout);
-      scrollTimeout = setTimeout(function () {
-        const scrollArea = carouselInner.clientWidth;
-        const scrollWidth = carouselInner.scrollWidth;
-        const scrollLeft = carouselInner.scrollLeft;
-        let targetSlide = Math.round((scrollLeft / scrollWidth) * itemCount) + 1;
-
-        const itemWidth = carouselComponent.querySelector(':scope > :is(div,iam-card)').scrollWidth;
-        const lastItemOffset = carouselComponent.querySelector(':scope > :is(div,iam-card):last-child').offsetLeft;
-        //+60px here is to account for when the next offscreen slide is visible beneath the next arrow
-        const lastItemInView =
-          carouselInner.scrollLeft + scrollArea + carouselInner.getBoundingClientRect().left >= lastItemOffset + 60;
-
-        const visibleItems = Math.round(scrollArea / itemWidth);
-
-        //Check if theres room for more slides than we have
-        const leftOverSpace = Math.ceil(itemCount / visibleItems) * visibleItems - itemCount;
-
-        carouselProgress.setAttribute('step', visibleItems);
-
-        if (leftOverSpace > 0 && lastItemInView) {
-          targetSlide = Math.floor(itemCount / visibleItems) * visibleItems + 1;
-        }
-
-        Array.from(carouselElement.querySelectorAll('.carousel__controls button')).forEach((button) => {
-          button.removeAttribute('aria-current');
-        });
-
-        carouselElement.querySelector('.control-' + targetSlide).setAttribute('aria-current', true);
-
-        // Disable the previous button
-        if (targetSlide == 1) carouselElement.querySelector('.btn-prev').setAttribute('disabled', 'disabled');
-        else carouselElement.querySelector('.btn-prev').removeAttribute('disabled');
-
-        // Disable the next button if the last item is in view
-        if (targetSlide > itemCount - visibleItems)
-          carouselElement.querySelector('.btn-next').setAttribute('disabled', 'disabled');
-        else carouselElement.querySelector('.btn-next').removeAttribute('disabled');
-
-        carouselProgress.value = targetSlide;
-
-        progressMax = getProgressMax(itemCount, visibleItems);
-
-        carouselProgress.setAttribute('max', progressMax);
-        percent = (targetSlide / progressMax) * 100;
-        percent = getProgressPercent(targetSlide, progressMax);
-        carouselProgress.style.setProperty('--percent', percent + '%');
-      }, 100);
-    },
-    false
-  );
-
-  // when the buttons are used we need to make sure the carousel scrolls to the correct place
-  carouselControls.addEventListener(
-    'click',
-    function (e) {
-      for (let target = e.target; target && target != this; target = target.parentNode) {
-        if (typeof target.matches == 'function' && target.matches('button')) {
-          e.preventDefault();
-
-          Array.from(carouselControls.querySelectorAll('button')).forEach((button) => {
-            button.removeAttribute('aria-current');
-          });
-          target.setAttribute('aria-current', true);
-
-          const customEvent = new CustomEvent('pip-clicked', {
-            detail: {
-              slide: target.getAttribute('data-slide'),
-            },
-          });
-
-          carouselComponent.dispatchEvent(customEvent);
-
-          const el = carouselComponent.querySelector(`:scope > *:nth-child(${target.getAttribute('data-slide')})`);
-
-          carouselInner.scroll({
-            top: 0,
-            left: el.offsetLeft - carouselInner.getBoundingClientRect().left,
-            behavior: 'smooth',
-          });
-
-          break;
-        }
-      }
-    },
-    false
-  );
-
-  carouselElement.addEventListener(
-    'click',
-    function (e) {
-      const scrollArea = carouselInner.clientWidth;
-      //const scrollWidth = carouselInner.scrollWidth;
-      const itemWidth = carouselComponent.querySelector(':scope > :is(div,iam-card)').scrollWidth;
-
-      const visibleItems = Math.round(scrollArea / itemWidth);
-
-      const lastItemOffset = carouselComponent.querySelector(':scope > :is(div,iam-card):last-child').offsetLeft;
-      const lastItemInView =
-        carouselInner.scrollLeft + scrollArea + carouselInner.getBoundingClientRect().left >= lastItemOffset + 60;
-
-      //Check if theres room for more slides than we have
-      const leftOverSpace = Math.ceil(itemCount / visibleItems) * visibleItems - itemCount;
-
-      /* 
-      When the last slide isn't filled with items, we only want to move back the number of items on the slide, 
-      rather than the total number of possible visible items
-    */
-      const spacesToMove = visibleItems - leftOverSpace;
-
-      //Only want to change the amount of movement if the last item is visible
-      const movement = lastItemInView && leftOverSpace > 0 ? spacesToMove * itemWidth : carouselInner.clientWidth;
-
-      for (let target = e.target; target && target != this; target = target.parentNode) {
-        if (typeof target.matches == 'function' && target.matches('.btn-next, .btn-prev')) {
-          const direction = target.matches('.btn-next') ? 'next' : 'prev';
-
-          const customEvent = new CustomEvent(`${direction}-clicked`, {
-            detail: {
-              slide: target.getAttribute('data-go'),
-            },
-          });
-
-          carouselComponent.dispatchEvent(customEvent);
-
-          e.preventDefault();
-          const scrollTo = target.classList.contains('btn-prev')
-            ? carouselInner.scrollLeft - movement
-            : carouselInner.scrollLeft + carouselInner.clientWidth;
-
-          carouselInner.scroll({
-            top: 0,
-            left: scrollTo,
-            behavior: 'smooth',
-          });
-          break;
-        }
-      }
-    },
-    false
-  );
-
-  carouselProgress.addEventListener(stepperStart, function () {
-    clearInterval(stepperInterval);
-    stepperInterval = setInterval(function () {
-      scrollArea = carouselInner.clientWidth;
-      itemWidth = carouselComponent.querySelector(':scope > :is(div,iam-card)').scrollWidth;
-      visibleItems = Math.round(scrollArea / itemWidth);
-      carouselProgress.setAttribute('step', visibleItems);
-      progressMax = getProgressMax(itemCount, visibleItems);
-      carouselProgress.setAttribute('max', progressMax);
-      percent = getProgressPercent(carouselProgress.value, progressMax);
-
-      carouselProgress.style.setProperty('--percent', percent + '%');
-    }, 10);
-  });
-
-  carouselProgress.addEventListener(stepperEvent, function () {
-    clearInterval(stepperInterval);
-  });
-
-  carouselProgress.addEventListener(
-    'change',
-    function () {
-      clearInterval(stepperInterval);
-      const target = carouselComponent.querySelector(`:scope > *:nth-child(${carouselProgress.value})`);
-
-      carouselInner.scroll({
-        top: 0,
-        left: target ? target.offsetLeft - carouselInner.getBoundingClientRect().left : 0,
-        behavior: 'smooth',
-      });
-
-      //const direction = target.matches('.btn-next') ? 'next' : 'prev';
-
-      const customEvent = new CustomEvent(`slider-changed`, {
-        detail: {
-          slide: carouselProgress.value,
-        },
-      });
-
-      carouselComponent.dispatchEvent(customEvent);
-    },
-    false
-  );
-};
-
-export const updateCarousel = function (carouselComponent): void {
-
-  const carouselElement = carouselComponent.shadowRoot.querySelector('.carousel');
-  const carouselInner = carouselElement.querySelector('.carousel__inner');
-  const carouselControls = carouselElement.querySelector('.carousel__controls');
-  const carouselProgress = carouselElement.querySelector('.carousel__progress [type="range"]');
-  const itemCount = carouselComponent.querySelectorAll(':scope > :is(div,iam-card)').length;
-
-  let scrollArea = carouselInner.clientWidth;
-  let itemWidth = carouselComponent.querySelector(':scope > :is(div,iam-card)').scrollWidth;
-  let visibleItems = Math.round(scrollArea / itemWidth);
-
-  carouselProgress.setAttribute('min', 1);
-  carouselProgress.setAttribute('step', visibleItems);
-
-  let progressMax = getProgressMax(itemCount, visibleItems);
-
-  carouselProgress.setAttribute('max', progressMax);
-  carouselProgress.value = 1;
-
-  let percent = getProgressPercent(1, progressMax);
-
-  carouselProgress.style.setProperty('--percent', percent + '%');
-
-  carouselControls.innerHTML = generatePipsHTML(carouselComponent, []);
-
-}
-
-export default carousel;