@mozaic-ds/web-components 0.12.0-beta.0 → 0.12.0-beta.1

package/public/components/carousel/Carousel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Carousel.js","sources":["../../../src/components/carousel/Carousel.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import type {\n    CarouselDevice,\n    CarouselItem,\n    CarouselOptions,\n    CarouselTitleTag,\n  } from './carousel.types';\n  import Link from '../link/Link.nested.svelte';\n  import CarouselCard from './CarouselCard.nested.svelte';\n  import Button from '../button/Button.nested.svelte';\n  import { EventHandler } from '../../utilities/EventHandler';\n\n  export let title: string;\n  export let titleTag: CarouselTitleTag = 'h1';\n  export let subtitle: string;\n  export let mobile = false;\n  export let options: string;\n  export let data: string;\n\n  const mediaQueryS: MediaQueryList = window.matchMedia('(max-width: 679px)');\n  const mediaQueryM: MediaQueryList = window.matchMedia(\n    '(min-width: 680px) and (max-width: 1279px)',\n  );\n  const mediaQueryXL: MediaQueryList = window.matchMedia('(min-width: 1280px)');\n\n  const defaultCarousel: CarouselOptions = {\n    s: {\n      itemsVisible: 1,\n      hasHalfItemVisible: true,\n    },\n    m: {\n      itemsVisible: 3,\n      hasHalfItemVisible: false,\n    },\n    xl: {\n      itemsVisible: 5,\n      hasHalfItemVisible: false,\n    },\n  };\n\n  let separateItemPixelSize = 16;\n  let accessibilityFocusPadding = 4;\n  let eventHandler = new EventHandler();\n\n  let currentDevice: CarouselDevice = initCurrentDevice(\n    mediaQueryM,\n    mediaQueryXL,\n  );\n\n  let carouselTouchStartX = 0;\n  let carouselTouchCurrentX = 0;\n\n  let carouselContainer: HTMLDivElement;\n  let carouselScrollbarLeft = 0;\n\n  let isScrollBeginning = true;\n  let isScrollEnd = false;\n\n  $: carouselItems = data ? (JSON.parse(data) as CarouselItem[]) : [];\n  $: carouselOptions = options\n    ? Object.assign({}, defaultCarousel, JSON.parse(options) as CarouselOptions)\n    : defaultCarousel;\n  $: carouselItemsSize = carouselItems?.length;\n\n  $: carouselCurrentItemsVisible = carouselOptions[currentDevice].itemsVisible;\n  $: carouselCurrentHasHalfItemVisible =\n    carouselOptions[currentDevice].hasHalfItemVisible || false;\n  $: carouselCurrentItemsSize =\n    carouselItemsSize < carouselCurrentItemsVisible\n      ? carouselCurrentItemsVisible\n      : carouselItemsSize;\n\n  $: carouselCurrentItemsVisibleAndHalf = carouselCurrentHasHalfItemVisible\n    ? carouselCurrentItemsVisible + 0.5\n    : carouselCurrentItemsVisible;\n\n  $: carouselItemWidthSpace = getCarouselItemWidthSpace(\n    carouselCurrentItemsVisible,\n    carouselCurrentHasHalfItemVisible,\n  );\n  $: carouselContainerWidthSpace = getCarouselContainerWidthSpace(\n    carouselCurrentItemsSize,\n  );\n\n  initMediaQueriesChanges();\n\n  function getCarouselContainerWidthSpace(totalItems: number) {\n    return (totalItems - 1) * separateItemPixelSize;\n  }\n\n  function getCarouselItemWidthSpace(\n    itemsVisible: number,\n    itemsAndHalfVisible: boolean,\n  ) {\n    if (itemsAndHalfVisible) {\n      return itemsVisible * separateItemPixelSize;\n    }\n    return (itemsVisible - 1) * separateItemPixelSize;\n  }\n\n  function moveScroll(signe: number) {\n    function getCarouselItemWidth() {\n      if (carouselCurrentHasHalfItemVisible) {\n        return (\n          (carouselContainer.clientWidth - carouselCurrentItemsVisible * 16) /\n          carouselCurrentItemsVisibleAndHalf\n        );\n      } else {\n        return (\n          (carouselContainer.clientWidth -\n            (carouselCurrentItemsVisible - 1) * 16) /\n          carouselCurrentItemsVisible\n        );\n      }\n    }\n\n    function getLeft() {\n      if (!carouselCurrentHasHalfItemVisible) {\n        return (\n          carouselContainer.scrollLeft +\n          signe *\n            (carouselContainer.clientWidth +\n              separateItemPixelSize -\n              accessibilityFocusPadding * 2)\n        );\n      }\n      const itemWidth = getCarouselItemWidth();\n      if (isScrollBeginning) {\n        return (\n          carouselContainer.scrollLeft +\n          (signe *\n            (carouselContainer.clientWidth -\n              (3 / 4) * itemWidth -\n              separateItemPixelSize) +\n            accessibilityFocusPadding)\n        );\n      }\n      if (isScrollEnd) {\n        return (\n          carouselContainer.scrollLeft +\n          signe *\n            (carouselContainer.clientWidth -\n              (3 / 4) * itemWidth -\n              separateItemPixelSize)\n        );\n      }\n      return (\n        carouselContainer.scrollLeft +\n        signe *\n          (carouselContainer.clientWidth -\n            itemWidth / 2 -\n            separateItemPixelSize +\n            accessibilityFocusPadding * 2)\n      );\n    }\n\n    carouselContainer.scrollTo({ behavior: 'smooth', left: getLeft() });\n  }\n\n  function nextCards() {\n    moveScroll(1);\n  }\n\n  function previousCards() {\n    moveScroll(-1);\n  }\n\n  function handleScrollCarousel() {\n    isScrollBeginning = carouselContainer?.scrollLeft <= 0;\n    isScrollEnd =\n      carouselContainer?.scrollWidth - carouselContainer?.scrollLeft <=\n      carouselContainer.offsetWidth;\n  }\n\n  function handleClickCard(item: CarouselItem) {\n    eventHandler.dispatch('carousel-item-clicked', item);\n  }\n  function handleClickLink() {\n    eventHandler.dispatch('carousel-link-clicked', {});\n  }\n\n  function initCurrentDevice(\n    mediaQueryM: MediaQueryList,\n    mediaQueryXL: MediaQueryList,\n  ) {\n    if (mediaQueryXL.matches) {\n      return 'xl';\n    }\n    if (mediaQueryM.matches) {\n      return 'm';\n    }\n    return 's';\n  }\n  function initMediaQueriesChanges() {\n    mediaQueryS.onchange = (e) => {\n      handleMediaQueryChange(e, 's');\n    };\n    mediaQueryM.onchange = (e) => {\n      handleMediaQueryChange(e, 'm');\n    };\n    mediaQueryXL.onchange = (e) => {\n      handleMediaQueryChange(e, 'xl');\n    };\n  }\n\n  function handleMediaQueryChange(\n    event: MediaQueryListEvent,\n    matchingDevice: CarouselDevice,\n  ) {\n    if (event.matches) {\n      currentDevice = matchingDevice;\n    }\n  }\n\n  function handleTouchStart(event: TouchEvent) {\n    carouselTouchStartX = event.touches[0].clientX;\n  }\n\n  function handleTouchMove(event: TouchEvent) {\n    carouselTouchCurrentX = event.touches[0].clientX;\n  }\n\n  function handleTouchEnd() {\n    if (carouselTouchStartX > carouselTouchCurrentX + 50) {\n      nextCards();\n    }\n    if (carouselTouchStartX < carouselTouchCurrentX - 50) {\n      previousCards();\n    }\n  }\n</script>\n\n<div class=\"mc-carousel\">\n  <div class=\"mc-carousel-header\">\n    <div class=\"mc-carousel-header__titles\">\n      {@html `<${titleTag} class=\"mc-carousel-header__container__title\">${title}</${titleTag}>`}\n      <div class=\"mc-carousel-header__container__subtitle\">\n        <Link\n          href=\"#layer\"\n          iconname=\"navigation-arrow-arrow--right-24px\"\n          iconposition=\"right\"\n          label={subtitle}\n          on:click={() => handleClickLink()}\n          size=\"s\"\n          target=\"_self\"\n        />\n      </div>\n    </div>\n    <nav\n      aria-label=\"pagination\"\n      class=\"mc-carousel-header__buttons {mobile\n        ? 'mc-carousel-header__buttons-mobile'\n        : 'mc-carousel-header__buttons-desktop'}\"\n    >\n      <Button\n        theme=\"neutral\"\n        size=\"s\"\n        bordered={true}\n        iconmode=\"only\"\n        iconname=\"navigation-arrow-arrow--left-32px\"\n        aria-label=\"Previous page\"\n        disabled={isScrollBeginning}\n        on:click={previousCards}\n        label=\"Previous\"\n        loader=\"\"\n      />\n      <Button\n        theme=\"neutral\"\n        size=\"s\"\n        type=\"button\"\n        bordered={true}\n        disabled={isScrollEnd}\n        iconmode=\"only\"\n        iconname=\"navigation-arrow-arrow--right-32px\"\n        aria-label=\"Next Page\"\n        on:click={nextCards}\n        label=\"Next\"\n        loader=\"\"\n      />\n    </nav>\n  </div>\n  <div\n    class=\"mc-carousel-body\"\n    bind:this={carouselContainer}\n    on:scroll={handleScrollCarousel}\n    style=\"--carousel__accessibility-focus-padding: {accessibilityFocusPadding}px;\"\n  >\n    <div\n      class=\"mc-carousel-body__content\"\n      style=\"\n             --carousel__container-width-space: {carouselContainerWidthSpace}px;\n             --carousel__items-count: {carouselCurrentItemsSize};\n             --carousel__item-width-space: {carouselItemWidthSpace}px;\n             --carousel__items-visible: {carouselCurrentItemsVisibleAndHalf};\n             --carousel__scrollbar-left: {carouselScrollbarLeft};\n             --carousel__container-separate-item-size: {separateItemPixelSize}px;\"\n    >\n      {#each carouselItems as item}\n        <button\n          class=\"mc-carousel-body__item\"\n          on:click={() => handleClickCard(item)}\n          on:touchstart={handleTouchStart}\n          on:touchmove={handleTouchMove}\n          on:touchend={handleTouchEnd}\n        >\n          <CarouselCard\n            titleTag={item.titleTag}\n            imgAlt={item.imgAlt}\n            cardIsInLayer={false}\n            title={item.title}\n            imgSrc={item.imgSrc}\n          />\n        </button>\n      {/each}\n    </div>\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.button';\n  @import '@mozaic-ds/styles/components/c.links';\n  @import '@mozaic-ds/styles/components/c.pagination';\n\n  .mc-carousel {\n    display: flex;\n    flex-direction: column;\n    gap: $mu100;\n\n    &-header {\n      /* Auto layout */\n\n      display: flex;\n      align-items: flex-end;\n      justify-content: space-between;\n\n      &__titles {\n        display: flex;\n        flex-direction: column;\n      }\n      &__buttons {\n        gap: $mu050;\n        &-mobile {\n          display: none;\n        }\n        &-desktop {\n          display: flex;\n        }\n      }\n    }\n\n    &-body {\n      position: relative;\n      overflow-x: auto;\n      overflow-y: hidden;\n      padding: var(--carousel__accessibility-focus-padding);\n\n      &__content {\n        display: flex;\n        flex-wrap: nowrap;\n        column-gap: var(--carousel__container-separate-item-size);\n        width: calc(\n          (\n              calc(100% - var(--carousel__item-width-space)) /\n                var(--carousel__items-visible)\n            ) * var(--carousel__items-count) +\n            var(--carousel__container-width-space)\n        );\n        margin-bottom: $mu125;\n      }\n\n      &__item {\n        display: flex;\n        background: none;\n        border: none;\n        margin: 0;\n        padding: 0;\n        width: calc(100% - var(--carousel__item-width-space)) /\n          var(--carousel__items-visible);\n        @include set-focus-floating-base();\n\n        &:focus {\n          @include set-focus-floating();\n        }\n      }\n    }\n\n    &-footer {\n      display: flex;\n      flex-direction: column;\n    }\n  }\n\n  ::-webkit-scrollbar {\n    border-radius: $mu025;\n    height: 6px;\n    background: $color-grey-100;\n    border-top: 1px solid white;\n    border-bottom: 1px solid white;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background: $color-grey-800;\n    border-radius: 6px;\n  }\n</style>\n"],"names":[],"mappings":"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"}

package/public/components/carousel/Carousel.svelte

@@ -1,408 +0,0 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import type {
-    CarouselDevice,
-    CarouselItem,
-    CarouselOptions,
-    CarouselTitleTag,
-  } from './carousel.types';
-  import Link from '../link/Link.nested.svelte';
-  import CarouselCard from './CarouselCard.nested.svelte';
-  import Button from '../button/Button.nested.svelte';
-  import { EventHandler } from '../../utilities/EventHandler';
-
-  export let title: string;
-  export let titleTag: CarouselTitleTag = 'h1';
-  export let subtitle: string;
-  export let mobile = false;
-  export let options: string;
-  export let data: string;
-
-  const mediaQueryS: MediaQueryList = window.matchMedia('(max-width: 679px)');
-  const mediaQueryM: MediaQueryList = window.matchMedia(
-    '(min-width: 680px) and (max-width: 1279px)',
-  );
-  const mediaQueryXL: MediaQueryList = window.matchMedia('(min-width: 1280px)');
-
-  const defaultCarousel: CarouselOptions = {
-    s: {
-      itemsVisible: 1,
-      hasHalfItemVisible: true,
-    },
-    m: {
-      itemsVisible: 3,
-      hasHalfItemVisible: false,
-    },
-    xl: {
-      itemsVisible: 5,
-      hasHalfItemVisible: false,
-    },
-  };
-
-  let separateItemPixelSize = 16;
-  let accessibilityFocusPadding = 4;
-  let eventHandler = new EventHandler();
-
-  let currentDevice: CarouselDevice = initCurrentDevice(
-    mediaQueryM,
-    mediaQueryXL,
-  );
-
-  let carouselTouchStartX = 0;
-  let carouselTouchCurrentX = 0;
-
-  let carouselContainer: HTMLDivElement;
-  let carouselScrollbarLeft = 0;
-
-  let isScrollBeginning = true;
-  let isScrollEnd = false;
-
-  $: carouselItems = data ? (JSON.parse(data) as CarouselItem[]) : [];
-  $: carouselOptions = options
-    ? Object.assign({}, defaultCarousel, JSON.parse(options) as CarouselOptions)
-    : defaultCarousel;
-  $: carouselItemsSize = carouselItems?.length;
-
-  $: carouselCurrentItemsVisible = carouselOptions[currentDevice].itemsVisible;
-  $: carouselCurrentHasHalfItemVisible =
-    carouselOptions[currentDevice].hasHalfItemVisible || false;
-  $: carouselCurrentItemsSize =
-    carouselItemsSize < carouselCurrentItemsVisible
-      ? carouselCurrentItemsVisible
-      : carouselItemsSize;
-
-  $: carouselCurrentItemsVisibleAndHalf = carouselCurrentHasHalfItemVisible
-    ? carouselCurrentItemsVisible + 0.5
-    : carouselCurrentItemsVisible;
-
-  $: carouselItemWidthSpace = getCarouselItemWidthSpace(
-    carouselCurrentItemsVisible,
-    carouselCurrentHasHalfItemVisible,
-  );
-  $: carouselContainerWidthSpace = getCarouselContainerWidthSpace(
-    carouselCurrentItemsSize,
-  );
-
-  initMediaQueriesChanges();
-
-  function getCarouselContainerWidthSpace(totalItems: number) {
-    return (totalItems - 1) * separateItemPixelSize;
-  }
-
-  function getCarouselItemWidthSpace(
-    itemsVisible: number,
-    itemsAndHalfVisible: boolean,
-  ) {
-    if (itemsAndHalfVisible) {
-      return itemsVisible * separateItemPixelSize;
-    }
-    return (itemsVisible - 1) * separateItemPixelSize;
-  }
-
-  function moveScroll(signe: number) {
-    function getCarouselItemWidth() {
-      if (carouselCurrentHasHalfItemVisible) {
-        return (
-          (carouselContainer.clientWidth - carouselCurrentItemsVisible * 16) /
-          carouselCurrentItemsVisibleAndHalf
-        );
-      } else {
-        return (
-          (carouselContainer.clientWidth -
-            (carouselCurrentItemsVisible - 1) * 16) /
-          carouselCurrentItemsVisible
-        );
-      }
-    }
-
-    function getLeft() {
-      if (!carouselCurrentHasHalfItemVisible) {
-        return (
-          carouselContainer.scrollLeft +
-          signe *
-            (carouselContainer.clientWidth +
-              separateItemPixelSize -
-              accessibilityFocusPadding * 2)
-        );
-      }
-      const itemWidth = getCarouselItemWidth();
-      if (isScrollBeginning) {
-        return (
-          carouselContainer.scrollLeft +
-          (signe *
-            (carouselContainer.clientWidth -
-              (3 / 4) * itemWidth -
-              separateItemPixelSize) +
-            accessibilityFocusPadding)
-        );
-      }
-      if (isScrollEnd) {
-        return (
-          carouselContainer.scrollLeft +
-          signe *
-            (carouselContainer.clientWidth -
-              (3 / 4) * itemWidth -
-              separateItemPixelSize)
-        );
-      }
-      return (
-        carouselContainer.scrollLeft +
-        signe *
-          (carouselContainer.clientWidth -
-            itemWidth / 2 -
-            separateItemPixelSize +
-            accessibilityFocusPadding * 2)
-      );
-    }
-
-    carouselContainer.scrollTo({ behavior: 'smooth', left: getLeft() });
-  }
-
-  function nextCards() {
-    moveScroll(1);
-  }
-
-  function previousCards() {
-    moveScroll(-1);
-  }
-
-  function handleScrollCarousel() {
-    isScrollBeginning = carouselContainer?.scrollLeft <= 0;
-    isScrollEnd =
-      carouselContainer?.scrollWidth - carouselContainer?.scrollLeft <=
-      carouselContainer.offsetWidth;
-  }
-
-  function handleClickCard(item: CarouselItem) {
-    eventHandler.dispatch('carousel-item-clicked', item);
-  }
-  function handleClickLink() {
-    eventHandler.dispatch('carousel-link-clicked', {});
-  }
-
-  function initCurrentDevice(
-    mediaQueryM: MediaQueryList,
-    mediaQueryXL: MediaQueryList,
-  ) {
-    if (mediaQueryXL.matches) {
-      return 'xl';
-    }
-    if (mediaQueryM.matches) {
-      return 'm';
-    }
-    return 's';
-  }
-  function initMediaQueriesChanges() {
-    mediaQueryS.onchange = (e) => {
-      handleMediaQueryChange(e, 's');
-    };
-    mediaQueryM.onchange = (e) => {
-      handleMediaQueryChange(e, 'm');
-    };
-    mediaQueryXL.onchange = (e) => {
-      handleMediaQueryChange(e, 'xl');
-    };
-  }
-
-  function handleMediaQueryChange(
-    event: MediaQueryListEvent,
-    matchingDevice: CarouselDevice,
-  ) {
-    if (event.matches) {
-      currentDevice = matchingDevice;
-    }
-  }
-
-  function handleTouchStart(event: TouchEvent) {
-    carouselTouchStartX = event.touches[0].clientX;
-  }
-
-  function handleTouchMove(event: TouchEvent) {
-    carouselTouchCurrentX = event.touches[0].clientX;
-  }
-
-  function handleTouchEnd() {
-    if (carouselTouchStartX > carouselTouchCurrentX + 50) {
-      nextCards();
-    }
-    if (carouselTouchStartX < carouselTouchCurrentX - 50) {
-      previousCards();
-    }
-  }
-</script>
-
-<div class="mc-carousel">
-  <div class="mc-carousel-header">
-    <div class="mc-carousel-header__titles">
-      {@html `<${titleTag} class="mc-carousel-header__container__title">${title}</${titleTag}>`}
-      <div class="mc-carousel-header__container__subtitle">
-        <Link
-          href="#layer"
-          iconname="navigation-arrow-arrow--right-24px"
-          iconposition="right"
-          label={subtitle}
-          on:click={() => handleClickLink()}
-          size="s"
-          target="_self"
-        />
-      </div>
-    </div>
-    <nav
-      aria-label="pagination"
-      class="mc-carousel-header__buttons {mobile
-        ? 'mc-carousel-header__buttons-mobile'
-        : 'mc-carousel-header__buttons-desktop'}"
-    >
-      <Button
-        theme="neutral"
-        size="s"
-        bordered={true}
-        iconmode="only"
-        iconname="navigation-arrow-arrow--left-32px"
-        aria-label="Previous page"
-        disabled={isScrollBeginning}
-        on:click={previousCards}
-        label="Previous"
-        loader=""
-      />
-      <Button
-        theme="neutral"
-        size="s"
-        type="button"
-        bordered={true}
-        disabled={isScrollEnd}
-        iconmode="only"
-        iconname="navigation-arrow-arrow--right-32px"
-        aria-label="Next Page"
-        on:click={nextCards}
-        label="Next"
-        loader=""
-      />
-    </nav>
-  </div>
-  <div
-    class="mc-carousel-body"
-    bind:this={carouselContainer}
-    on:scroll={handleScrollCarousel}
-    style="--carousel__accessibility-focus-padding: {accessibilityFocusPadding}px;"
-  >
-    <div
-      class="mc-carousel-body__content"
-      style="
-             --carousel__container-width-space: {carouselContainerWidthSpace}px;
-             --carousel__items-count: {carouselCurrentItemsSize};
-             --carousel__item-width-space: {carouselItemWidthSpace}px;
-             --carousel__items-visible: {carouselCurrentItemsVisibleAndHalf};
-             --carousel__scrollbar-left: {carouselScrollbarLeft};
-             --carousel__container-separate-item-size: {separateItemPixelSize}px;"
-    >
-      {#each carouselItems as item}
-        <button
-          class="mc-carousel-body__item"
-          on:click={() => handleClickCard(item)}
-          on:touchstart={handleTouchStart}
-          on:touchmove={handleTouchMove}
-          on:touchend={handleTouchEnd}
-        >
-          <CarouselCard
-            titleTag={item.titleTag}
-            imgAlt={item.imgAlt}
-            cardIsInLayer={false}
-            title={item.title}
-            imgSrc={item.imgSrc}
-          />
-        </button>
-      {/each}
-    </div>
-  </div>
-</div>
-
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import '@mozaic-ds/styles/components/c.button';
-  @import '@mozaic-ds/styles/components/c.links';
-  @import '@mozaic-ds/styles/components/c.pagination';
-
-  .mc-carousel {
-    display: flex;
-    flex-direction: column;
-    gap: $mu100;
-
-    &-header {
-      /* Auto layout */
-
-      display: flex;
-      align-items: flex-end;
-      justify-content: space-between;
-
-      &__titles {
-        display: flex;
-        flex-direction: column;
-      }
-      &__buttons {
-        gap: $mu050;
-        &-mobile {
-          display: none;
-        }
-        &-desktop {
-          display: flex;
-        }
-      }
-    }
-
-    &-body {
-      position: relative;
-      overflow-x: auto;
-      overflow-y: hidden;
-      padding: var(--carousel__accessibility-focus-padding);
-
-      &__content {
-        display: flex;
-        flex-wrap: nowrap;
-        column-gap: var(--carousel__container-separate-item-size);
-        width: calc(
-          (
-              calc(100% - var(--carousel__item-width-space)) /
-                var(--carousel__items-visible)
-            ) * var(--carousel__items-count) +
-            var(--carousel__container-width-space)
-        );
-        margin-bottom: $mu125;
-      }
-
-      &__item {
-        display: flex;
-        background: none;
-        border: none;
-        margin: 0;
-        padding: 0;
-        width: calc(100% - var(--carousel__item-width-space)) /
-          var(--carousel__items-visible);
-        @include set-focus-floating-base();
-
-        &:focus {
-          @include set-focus-floating();
-        }
-      }
-    }
-
-    &-footer {
-      display: flex;
-      flex-direction: column;
-    }
-  }
-
-  ::-webkit-scrollbar {
-    border-radius: $mu025;
-    height: 6px;
-    background: $color-grey-100;
-    border-top: 1px solid white;
-    border-bottom: 1px solid white;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background: $color-grey-800;
-    border-radius: 6px;
-  }
-</style>

package/public/components/carousel/CarouselCard.nested.js

@@ -1,140 +0,0 @@
-import { P as SvelteComponent, i as init, s as safe_not_equal, Q as append_styles, c as assign, e as element, d as space, t as text, g as attr, $ as src_url_equal, R as null_to_empty, h as set_attributes, z as toggle_class, b as insert, j as append, k as set_data, m as get_spread_update, n as noop, o as detach, p as compute_rest_props, q as exclude_internal_props } from '../../index-c33b3772.js';
-
-/* src/components/carousel/CarouselCard.nested.svelte generated by Svelte v3.58.0 */
-
-function add_css(target) {
-	append_styles(target, "svelte-hdxc38", ".mc-card.svelte-hdxc38.svelte-hdxc38{font-family:\"LeroyMerlin\", sans-serif;max-width:17.75rem}.mc-card.svelte-hdxc38.svelte-hdxc38,.mc-card.svelte-hdxc38 .svelte-hdxc38{-webkit-box-sizing:border-box;box-sizing:border-box}@media screen and (min-width: 680px){.mc-card.svelte-hdxc38.svelte-hdxc38{max-width:18.25rem}}@media screen and (min-width: 1024px){.mc-card.svelte-hdxc38.svelte-hdxc38{max-width:18rem}}@media screen and (min-width: 1280px){.mc-card.svelte-hdxc38.svelte-hdxc38{max-width:17.5rem}}@media screen and (min-width: 1920px){.mc-card.svelte-hdxc38.svelte-hdxc38{max-width:27.25rem}}.mc-card__visual.svelte-hdxc38.svelte-hdxc38{margin:0;overflow:hidden;position:relative}.mc-card__visual.svelte-hdxc38.svelte-hdxc38::before{content:\"\";display:block;width:100%;padding-top:75%}.mc-card__visual--1x1.svelte-hdxc38.svelte-hdxc38::before{padding-top:100%}.mc-card__visual--16x9.svelte-hdxc38.svelte-hdxc38::before{padding-top:56.25%}.mc-card__img.svelte-hdxc38.svelte-hdxc38{height:auto;left:0;position:absolute;top:50%;width:100%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.mc-card__content.svelte-hdxc38.svelte-hdxc38{padding-top:1rem}.mc-card__title.svelte-hdxc38.svelte-hdxc38,.mc-card__subtitle.svelte-hdxc38.svelte-hdxc38{margin-top:0;margin-bottom:0.5rem}.mc-card__title.svelte-hdxc38.svelte-hdxc38{font-size:1.125rem;line-height:1.3333333333;font-weight:600;color:#000000}.mc-card__subtitle.svelte-hdxc38.svelte-hdxc38{font-size:0.875rem;line-height:1.2857142857;font-weight:400;color:#333333}.mc-card__body.svelte-hdxc38.svelte-hdxc38{font-size:1rem;line-height:1.375;color:#191919}.mc-card__body.svelte-hdxc38.svelte-hdxc38:not(:last-child){margin-bottom:1rem}.mc-card--bordered.svelte-hdxc38.svelte-hdxc38{background:#ffffff;border:2px solid #808080;border-radius:0.25rem;overflow:hidden}.mc-card--fluid.svelte-hdxc38.svelte-hdxc38{max-width:none}.mc-carousel-card.svelte-hdxc38.svelte-hdxc38{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding:0.5rem;gap:0.25rem;cursor:pointer}.mc-carousel-card--slider.svelte-hdxc38.svelte-hdxc38{border:1px solid #666666;border-radius:0.25rem}.mc-carousel-card--layer__title.svelte-hdxc38.svelte-hdxc38{text-decoration:underline}.mc-carousel-card__image.svelte-hdxc38.svelte-hdxc38{width:100%}");
-}
-
-function create_fragment(ctx) {
-	let div1;
-	let img;
-	let img_src_value;
-	let t0;
-	let div0;
-	let t1;
-	let div0_class_value;
-	let div1_class_value;
-
-	let div1_levels = [
-		/*attributes*/ ctx[4],
-		{
-			class: div1_class_value = "mc-carousel-card " + (/*cardIsInLayer*/ ctx[2]
-			? 'mc-carousel-card--layer'
-			: 'mc-carousel-card--slider')
-		}
-	];
-
-	let div_data_1 = {};
-
-	for (let i = 0; i < div1_levels.length; i += 1) {
-		div_data_1 = assign(div_data_1, div1_levels[i]);
-	}
-
-	return {
-		c() {
-			div1 = element("div");
-			img = element("img");
-			t0 = space();
-			div0 = element("div");
-			t1 = text(/*title*/ ctx[0]);
-			attr(img, "alt", /*imgAlt*/ ctx[3]);
-			attr(img, "class", "mc-carousel-card__image svelte-hdxc38");
-			if (!src_url_equal(img.src, img_src_value = /*imgSrc*/ ctx[1])) attr(img, "src", img_src_value);
-
-			attr(div0, "class", div0_class_value = "" + (null_to_empty(/*cardIsInLayer*/ ctx[2]
-			? 'mc-carousel-card--layer__title'
-			: 'mc-carousel-card--slider__title') + " svelte-hdxc38"));
-
-			set_attributes(div1, div_data_1);
-			toggle_class(div1, "svelte-hdxc38", true);
-		},
-		m(target, anchor) {
-			insert(target, div1, anchor);
-			append(div1, img);
-			append(div1, t0);
-			append(div1, div0);
-			append(div0, t1);
-		},
-		p(ctx, [dirty]) {
-			if (dirty & /*imgAlt*/ 8) {
-				attr(img, "alt", /*imgAlt*/ ctx[3]);
-			}
-
-			if (dirty & /*imgSrc*/ 2 && !src_url_equal(img.src, img_src_value = /*imgSrc*/ ctx[1])) {
-				attr(img, "src", img_src_value);
-			}
-
-			if (dirty & /*title*/ 1) set_data(t1, /*title*/ ctx[0]);
-
-			if (dirty & /*cardIsInLayer*/ 4 && div0_class_value !== (div0_class_value = "" + (null_to_empty(/*cardIsInLayer*/ ctx[2]
-			? 'mc-carousel-card--layer__title'
-			: 'mc-carousel-card--slider__title') + " svelte-hdxc38"))) {
-				attr(div0, "class", div0_class_value);
-			}
-
-			set_attributes(div1, div_data_1 = get_spread_update(div1_levels, [
-				dirty & /*attributes*/ 16 && /*attributes*/ ctx[4],
-				dirty & /*cardIsInLayer*/ 4 && div1_class_value !== (div1_class_value = "mc-carousel-card " + (/*cardIsInLayer*/ ctx[2]
-				? 'mc-carousel-card--layer'
-				: 'mc-carousel-card--slider')) && { class: div1_class_value }
-			]));
-
-			toggle_class(div1, "svelte-hdxc38", true);
-		},
-		i: noop,
-		o: noop,
-		d(detaching) {
-			if (detaching) detach(div1);
-		}
-	};
-}
-
-function instance($$self, $$props, $$invalidate) {
-	let attributes;
-	const omit_props_names = ["title","imgSrc","cardIsInLayer","imgAlt"];
-	let $$restProps = compute_rest_props($$props, omit_props_names);
-	let { title } = $$props;
-	let { imgSrc } = $$props;
-	let { cardIsInLayer = false } = $$props;
-	let { imgAlt } = $$props;
-
-	$$self.$$set = $$new_props => {
-		$$props = assign(assign({}, $$props), exclude_internal_props($$new_props));
-		$$invalidate(5, $$restProps = compute_rest_props($$props, omit_props_names));
-		if ('title' in $$new_props) $$invalidate(0, title = $$new_props.title);
-		if ('imgSrc' in $$new_props) $$invalidate(1, imgSrc = $$new_props.imgSrc);
-		if ('cardIsInLayer' in $$new_props) $$invalidate(2, cardIsInLayer = $$new_props.cardIsInLayer);
-		if ('imgAlt' in $$new_props) $$invalidate(3, imgAlt = $$new_props.imgAlt);
-	};
-
-	$$self.$$.update = () => {
-		$$invalidate(4, attributes = Object.assign({}, $$restProps));
-	};
-
-	return [title, imgSrc, cardIsInLayer, imgAlt, attributes];
-}
-
-class CarouselCard_nested extends SvelteComponent {
-	constructor(options) {
-		super();
-
-		init(
-			this,
-			options,
-			instance,
-			create_fragment,
-			safe_not_equal,
-			{
-				title: 0,
-				imgSrc: 1,
-				cardIsInLayer: 2,
-				imgAlt: 3
-			},
-			add_css
-		);
-	}
-}
-
-export { CarouselCard_nested as default };
-//# sourceMappingURL=CarouselCard.nested.js.map

package/public/components/carousel/CarouselCard.nested.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CarouselCard.nested.js","sources":["../../../src/components/carousel/CarouselCard.nested.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  export let title: string;\n  export let imgSrc: string;\n  export let cardIsInLayer = false;\n  export let imgAlt: string;\n  $: attributes = { ...$$restProps };\n</script>\n\n<div\n  {...attributes}\n  class=\"mc-carousel-card {cardIsInLayer\n    ? 'mc-carousel-card--layer'\n    : 'mc-carousel-card--slider'}\"\n>\n  <img alt={imgAlt} class=\"mc-carousel-card__image\" src={imgSrc} />\n  <div\n    class={cardIsInLayer\n      ? 'mc-carousel-card--layer__title'\n      : 'mc-carousel-card--slider__title'}\n  >\n    {title}\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.card';\n\n  .mc-carousel-card {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: $mu050;\n    gap: $mu025;\n    cursor: pointer;\n\n    &--slider {\n      border: 1px solid $color-grey-600;\n      border-radius: $mu025;\n    }\n\n    &--layer {\n      &__title {\n        text-decoration: underline;\n      }\n    }\n\n    &__image {\n      width: 100%;\n    }\n  }\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;iBAWM,GAAU,CAAA,CAAA,CAAA;;sEACW,GAAA,CAAA,CAAA,CAAA;KACrB,yBAAwB;KACxB,0BAA0B,CAAA;;;;;;;;;;;;;;;;uBAQ3B,GAAK,CAAA,CAAA,CAAA,CAAA,CAAA;+BANE,GAAM,CAAA,CAAA,CAAA,CAAA,CAAA;;0DAAuC,GAAM,CAAA,CAAA,CAAA,CAAA,EAAA,IAAA,CAAA,GAAA,EAAA,KAAA,EAAA,aAAA,CAAA,CAAA;;gFAEpD,GAAA,CAAA,CAAA,CAAA;KACH,gCAA+B;KAC/B,iCAAiC,CAAA,GAAA,gBAAA,CAAA,CAAA,CAAA;;;;;;GAVzC,MAcK,CAAA,MAAA,EAAA,IAAA,EAAA,MAAA,CAAA,CAAA;GARH,MAAgE,CAAA,IAAA,EAAA,GAAA,CAAA,CAAA;;GAChE,MAMK,CAAA,IAAA,EAAA,IAAA,CAAA,CAAA;;;;;gCAPK,GAAM,CAAA,CAAA,CAAA,CAAA,CAAA;;;kFAAuC,GAAM,CAAA,CAAA,CAAA,CAAA,EAAA;;;;mDAM1D,GAAK,CAAA,CAAA,CAAA,CAAA,CAAA;;qHAJC,GAAA,CAAA,CAAA,CAAA;KACH,gCAA+B;KAC/B,iCAAiC,CAAA,GAAA,gBAAA,CAAA,CAAA,EAAA;;;;;gDATnC,GAAU,CAAA,CAAA,CAAA;qHACW,GAAA,CAAA,CAAA,CAAA;MACrB,yBAAwB;MACxB,0BAA0B,CAAA,CAAA,IAAA,EAAA,KAAA,EAAA,gBAAA,EAAA;;;;;;;;;;;;;;;;;OAXnB,KAAa,EAAA,GAAA,OAAA,CAAA;OACb,MAAc,EAAA,GAAA,OAAA,CAAA;AACd,CAAA,IAAA,EAAA,aAAa,GAAG,KAAK,EAAA,GAAA,OAAA,CAAA;OACrB,MAAc,EAAA,GAAA,OAAA,CAAA;;;;;;;;;;;;AACzB,kBAAG,UAAU,GAAf,MAAA,CAAA,MAAA,KAAuB,WAAW,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/public/components/carousel/carousel.types.d.ts

@@ -1,20 +0,0 @@
-export type CarouselTitleTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-export type CarouselDevice = 's' | 'm' | 'xl';
-export type CarouselOptions = {
-    s: ItemOptions;
-    m: ItemOptions;
-    xl: ItemOptions;
-};
-type ItemOptions = {
-    itemsVisible: number;
-    hasHalfItemVisible?: boolean;
-};
-export type CarouselItem = {
-    id: string;
-    title: string;
-    imgSrc: string;
-    titleTag?: string;
-    imgAlt: string;
-};
-export {};
-//# sourceMappingURL=carousel.types.d.ts.map

package/public/components/carousel/carousel.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"carousel.types.d.ts","sourceRoot":"","sources":["../../../src/components/carousel/carousel.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACvE,MAAM,MAAM,cAAc,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG;IAC5B,CAAC,EAAE,WAAW,CAAC;IACf,CAAC,EAAE,WAAW,CAAC;IACf,EAAE,EAAE,WAAW,CAAC;CACjB,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC"}

package/public/components/carouselcard/CarouselCard.nested.svelte

@@ -1,54 +0,0 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  export let title: string;
-  export let imgSrc: string;
-  export let cardIsInLayer = false;
-  export let imgAlt: string;
-  $: attributes = { ...$$restProps };
-</script>
-
-<div
-  {...attributes}
-  class="mc-carousel-card {cardIsInLayer
-    ? 'mc-carousel-card--layer'
-    : 'mc-carousel-card--slider'}"
->
-  <img alt={imgAlt} class="mc-carousel-card__image" src={imgSrc} />
-  <div
-    class={cardIsInLayer
-      ? 'mc-carousel-card--layer__title'
-      : 'mc-carousel-card--slider__title'}
-  >
-    {title}
-  </div>
-</div>
-
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import '@mozaic-ds/styles/components/c.card';
-
-  .mc-carousel-card {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    padding: $mu050;
-    gap: $mu025;
-    cursor: pointer;
-
-    &--slider {
-      border: 1px solid $color-grey-600;
-      border-radius: $mu025;
-    }
-
-    &--layer {
-      &__title {
-        text-decoration: underline;
-      }
-    }
-
-    &__image {
-      width: 100%;
-    }
-  }
-</style>