@mozaic-ds/web-components 0.13.0 → 0.14.0-beta.0

package/public/bricoman/components/carousel/Carousel.svelte

@@ -0,0 +1,414 @@
+<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';
+  import { onMount } from 'svelte';
+
+  export let title: string;
+  export let titletag: CarouselTitleTag = 'h1';
+  export let subtitlelink: string;
+  export let mobile = false;
+  export let options: string;
+  export let items: 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)');
+
+  // default options for all 3 screen sizes (s = <m ; m = >=m to <xl ; xl  = >=xl)
+  const defaultCarouselOptions: CarouselOptions = {
+    s: {
+      itemsVisible: 1,
+      hasHalfItemVisible: true,
+    },
+    m: {
+      itemsVisible: 3,
+      hasHalfItemVisible: false,
+    },
+    xl: {
+      itemsVisible: 5,
+      hasHalfItemVisible: false,
+    },
+  };
+
+  // size using to separate item. Useful for gap in css and for move the scroll.
+  let betweenItemsPixelSize = 16;
+
+  // needed padding to display the outlined focus border on carousel items
+  let accessibilityFocusPadding = 4;
+
+  let eventHandler = new EventHandler();
+
+  let currentDevice: CarouselDevice = initCurrentDevice(
+    mediaQueryM,
+    mediaQueryXL,
+  );
+
+  let carouselContainer: HTMLDivElement;
+  let carouselScrollbarLeft = 0;
+
+  let isScrollBeginning = true;
+  let isScrollEnd = false;
+
+  $: carouselItems = items ? (JSON.parse(items) as CarouselItem[]) : [];
+  $: carouselOptions = options
+    ? Object.assign(
+        {},
+        defaultCarouselOptions,
+        JSON.parse(options) as CarouselOptions,
+      )
+    : defaultCarouselOptions;
+  $: carouselItemsSize = carouselItems?.length;
+
+  $: carouselCurrentItemsVisible = carouselOptions[currentDevice].itemsVisible;
+  $: carouselCurrentHasHalfItemVisible =
+    carouselOptions[currentDevice].hasHalfItemVisible || false;
+  $: carouselCurrentItemsSize =
+    carouselItemsSize < carouselCurrentItemsVisible
+      ? carouselCurrentItemsVisible
+      : carouselItemsSize;
+
+  $: carouselCurrentItemsVisibleAndHalf = carouselCurrentHasHalfItemVisible
+    ? carouselCurrentItemsVisible + 0.5
+    : carouselCurrentItemsVisible;
+
+  $: carouselItemWidthSpace = getCarouselItemsWidthSpace(
+    carouselCurrentItemsVisible,
+    carouselCurrentHasHalfItemVisible,
+  );
+  $: carouselContainerWidthSpace = getCarouselContainerWidthSpace(
+    carouselCurrentItemsSize,
+  );
+
+  /* returns the total size of the spacing between items for the big container */
+  function getCarouselContainerWidthSpace(totalItems: number) {
+    return (totalItems - 1) * betweenItemsPixelSize;
+  }
+
+  /* returns the total size of the spacing between items for the screen size */
+  function getCarouselItemsWidthSpace(
+    itemsVisible: number,
+    itemsAndHalfVisible: boolean,
+  ) {
+    if (itemsAndHalfVisible) {
+      return itemsVisible * betweenItemsPixelSize;
+    }
+    return (itemsVisible - 1) * betweenItemsPixelSize;
+  }
+
+  /* move the scroll to change the displaying items.
+     1 to move right, -1 to move left
+     */
+  function moveScroll(signe: 1 | -1) {
+    /* returns the size in pixel of an item according to screen size and the number of items visible. */
+    function getCarouselItemWidth() {
+      const carouselItemsWidthSpace = getCarouselItemsWidthSpace(
+        carouselCurrentItemsVisible,
+        carouselCurrentHasHalfItemVisible,
+      );
+      if (carouselCurrentHasHalfItemVisible) {
+        return (
+          (carouselContainer.clientWidth - carouselItemsWidthSpace) /
+          carouselCurrentItemsVisibleAndHalf
+        );
+      } else {
+        return (
+          (carouselContainer.clientWidth - carouselItemsWidthSpace) /
+          carouselCurrentItemsVisible
+        );
+      }
+    }
+
+    /* returns the new left position of the scrollbar
+     *  in the case of visible half items, the calculation depends if the carousel is at the beginnind, at the end or in the middle.
+     *
+     */
+    function getLeft() {
+      if (!carouselCurrentHasHalfItemVisible) {
+        return (
+          carouselContainer.scrollLeft +
+          signe *
+            (carouselContainer.clientWidth +
+              betweenItemsPixelSize -
+              accessibilityFocusPadding * 2)
+        );
+      }
+      const itemWidth = getCarouselItemWidth();
+      if (isScrollBeginning) {
+        return (
+          carouselContainer.scrollLeft +
+          (signe *
+            (carouselContainer.clientWidth -
+              (3 / 4) * itemWidth -
+              betweenItemsPixelSize) +
+            accessibilityFocusPadding)
+        );
+      }
+      if (isScrollEnd) {
+        return (
+          carouselContainer.scrollLeft +
+          signe *
+            (carouselContainer.clientWidth -
+              (3 / 4) * itemWidth -
+              betweenItemsPixelSize)
+        );
+      }
+      return (
+        carouselContainer.scrollLeft +
+        signe *
+          (carouselContainer.clientWidth -
+            itemWidth / 2 -
+            betweenItemsPixelSize +
+            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, event: MouseEvent): MouseEvent {
+    eventHandler.dispatch('carousel-item-clicked', item);
+    return event;
+  }
+  function handleClickLink(event: MouseEvent): MouseEvent {
+    eventHandler.dispatch('carousel-link-clicked', {});
+    return event;
+  }
+
+  // returns device according to screen size
+  function initCurrentDevice(
+    mediaQueryM: MediaQueryList,
+    mediaQueryXL: MediaQueryList,
+  ) {
+    if (mediaQueryXL.matches) {
+      return 'xl';
+    }
+    if (mediaQueryM.matches) {
+      return 'm';
+    }
+    return 's';
+  }
+
+  function handleMediaQueryChange(
+    event: MediaQueryListEvent,
+    matchingDevice: CarouselDevice,
+  ): MediaQueryListEvent {
+    if (event.matches) {
+      currentDevice = matchingDevice;
+    }
+    return event;
+  }
+
+  onMount(() => {
+    mediaQueryS.onchange = (e) => {
+      handleMediaQueryChange(e, 's');
+    };
+    mediaQueryM.onchange = (e) => {
+      handleMediaQueryChange(e, 'm');
+    };
+    mediaQueryXL.onchange = (e) => {
+      handleMediaQueryChange(e, 'xl');
+    };
+  });
+</script>
+
+<div class="mc-carousel">
+  <div class="mc-carousel__header">
+    <div class="mc-carousel__titles">
+      {@html `<${titletag} style="margin:0">${title}</${titletag}>`}
+      <div class="mc-carousel__subtitle">
+        <Link
+          href="#layer"
+          iconname="navigation-arrow-arrow--right-24px"
+          iconposition="right"
+          label={subtitlelink}
+          on:click={handleClickLink}
+          size="s"
+          target="_self"
+        />
+      </div>
+    </div>
+    <nav
+      aria-label="pagination"
+      class="mc-carousel__nav {mobile
+        ? 'mc-carousel__nav--mobile'
+        : 'mc-carousel__nav--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__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: {betweenItemsPixelSize}px;"
+    >
+      {#each carouselItems as item}
+        <button
+          class="mc-carousel__item"
+          on:click={(event) => handleClickCard(item, event)}
+        >
+          <CarouselCard
+            title={item.title}
+            imgSrc={item.imgSrc}
+            imgAlt={item.imgAlt}
+          />
+        </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;
+      gap: $mu025;
+    }
+    &__nav {
+      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);
+      // the total size of the big container for all items: taille d'un item * le nbre d'items + espace entre chaque item
+      width: 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;
+      cursor: pointer;
+      // taille d'un item: (100% - les espaces entre chaque item isible) / le nombre d'items visible
+      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/bricoman/components/carousel/CarouselCard.nested.js

@@ -0,0 +1,2 @@
+import{E as e,i as o,s as t,F as s,c as l,e as i,d as a,t as r,g as k,$ as c,h as d,v as m,b as g,j as n,k as v,m as q,n as f,o as b,p as x,q as p}from"../../index-52f16292.js";function u(e){s(e,"svelte-1gooqkk",'.mc-card.svelte-1gooqkk.svelte-1gooqkk{font-family:"LeroyMerlin", sans-serif;max-width:17.75rem}.mc-card.svelte-1gooqkk.svelte-1gooqkk,.mc-card.svelte-1gooqkk .svelte-1gooqkk{-webkit-box-sizing:border-box;box-sizing:border-box}@media screen and (min-width: 680px){.mc-card.svelte-1gooqkk.svelte-1gooqkk{max-width:18.25rem}}@media screen and (min-width: 1024px){.mc-card.svelte-1gooqkk.svelte-1gooqkk{max-width:18rem}}@media screen and (min-width: 1280px){.mc-card.svelte-1gooqkk.svelte-1gooqkk{max-width:17.5rem}}@media screen and (min-width: 1920px){.mc-card.svelte-1gooqkk.svelte-1gooqkk{max-width:27.25rem}}.mc-card__visual.svelte-1gooqkk.svelte-1gooqkk{margin:0;overflow:hidden;position:relative}.mc-card__visual.svelte-1gooqkk.svelte-1gooqkk::before{content:"";display:block;width:100%;padding-top:75%}.mc-card__visual--1x1.svelte-1gooqkk.svelte-1gooqkk::before{padding-top:100%}.mc-card__visual--16x9.svelte-1gooqkk.svelte-1gooqkk::before{padding-top:56.25%}.mc-card__img.svelte-1gooqkk.svelte-1gooqkk{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-1gooqkk.svelte-1gooqkk{padding-top:1rem}.mc-card__title.svelte-1gooqkk.svelte-1gooqkk,.mc-card__subtitle.svelte-1gooqkk.svelte-1gooqkk{margin-top:0;margin-bottom:0.5rem}.mc-card__title.svelte-1gooqkk.svelte-1gooqkk{font-size:1.125rem;line-height:1.3333333333;font-weight:600;color:#000000}.mc-card__subtitle.svelte-1gooqkk.svelte-1gooqkk{font-size:0.875rem;line-height:1.2857142857;font-weight:400;color:#333333}.mc-card__body.svelte-1gooqkk.svelte-1gooqkk{font-size:1rem;line-height:1.375;color:#191919}.mc-card__body.svelte-1gooqkk.svelte-1gooqkk:not(:last-child){margin-bottom:1rem}.mc-card--bordered.svelte-1gooqkk.svelte-1gooqkk{background:#ffffff;border:2px solid #808080;border-radius:0.25rem;overflow:hidden}.mc-card--fluid.svelte-1gooqkk.svelte-1gooqkk{max-width:none}.mc-carousel-card.svelte-1gooqkk.svelte-1gooqkk{font-family:"LeroyMerlin", sans-serif;font-weight:400;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;border:1px solid #666666;border-radius:0.25rem}.mc-carousel-card.svelte-1gooqkk .mc-carousel-card__image.svelte-1gooqkk{width:100%}')}function h(e){let o,t,s,x,p,u,h,_=[e[3],{class:"mc-carousel-card"}],w={};for(let e=0;e<_.length;e+=1)w=l(w,_[e]);return{c(){o=i("div"),t=i("picture"),s=i("img"),p=a(),u=i("div"),h=r(e[0]),k(s,"class","mc-carousel-card__image svelte-1gooqkk"),c(s.src,x=e[1])||k(s,"src",x),k(s,"alt",e[2]),k(t,"class","svelte-1gooqkk"),k(u,"class","mc-carousel-card__title svelte-1gooqkk"),d(o,w),m(o,"svelte-1gooqkk",!0)},m(e,l){g(e,o,l),n(o,t),n(t,s),n(o,p),n(o,u),n(u,h)},p(e,[t]){2&t&&!c(s.src,x=e[1])&&k(s,"src",x),4&t&&k(s,"alt",e[2]),1&t&&v(h,e[0]),d(o,w=q(_,[8&t&&e[3],{class:"mc-carousel-card"}])),m(o,"svelte-1gooqkk",!0)},i:f,o:f,d(e){e&&b(o)}}}function _(e,o,t){let s;const i=["title","imgSrc","imgAlt"];let a=x(o,i),{title:r}=o,{imgSrc:k}=o,{imgAlt:c}=o;return e.$$set=e=>{o=l(l({},o),p(e)),t(4,a=x(o,i)),"title"in e&&t(0,r=e.title),"imgSrc"in e&&t(1,k=e.imgSrc),"imgAlt"in e&&t(2,c=e.imgAlt)},e.$$.update=()=>{t(3,s=Object.assign({},a))},[r,k,c,s]}class w extends e{constructor(e){super(),o(this,e,_,h,t,{title:0,imgSrc:1,imgAlt:2},u)}}export{w as default};
+//# sourceMappingURL=CarouselCard.nested.js.map

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

@@ -0,0 +1 @@
+{"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 imgAlt: string;\n  $: attributes = { ...$$restProps };\n</script>\n\n<div {...attributes} class=\"mc-carousel-card\">\n  <picture>\n    <img class=\"mc-carousel-card__image\" src={imgSrc} alt={imgAlt} />\n  </picture>\n  <div class=\"mc-carousel-card__title\">{title}</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    $parent: get-parent-selector(&);\n    @include set-font-face();\n\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: $mu050;\n    gap: $mu025;\n    border: 1px solid $color-grey-600;\n    border-radius: $mu025;\n\n    #{$parent}__image {\n      width: 100%;\n    }\n  }\n</style>\n"],"names":["ctx","class","attr","img","img_src_value","insert","target","div1","anchor","append","picture","div0","title","$$props","imgSrc","imgAlt","attributes","Object","assign","$$restProps"],"mappings":"woFASSA,EAAU,GAAA,CAAAC,MAAA,uIAIqBD,EAAK,oEAFCA,EAAM,KAAAE,EAAAC,EAAA,MAAAC,aAAOJ,EAAM,gIAFjEK,EAKKC,EAAAC,EAAAC,GAJHC,EAESF,EAAAG,GADPD,EAAgEC,EAAAP,UAElEM,EAAiDF,EAAAI,oCAFLX,EAAM,iCAAOA,EAAM,aAEzBA,EAAK,oBAJpCA,EAAU,kKANNY,GAAaC,UACbC,GAAcD,UACdE,GAAcF,mKACtBG,EAALC,OAAAC,UAAuBC,GAAW"}

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

@@ -0,0 +1,19 @@
+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;
+    imgAlt: string;
+};
+export {};
+//# sourceMappingURL=carousel.types.d.ts.map

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

@@ -0,0 +1 @@
+{"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;IAC1B,CAAC,EAAE,WAAW,CAAC;IACf,CAAC,EAAE,WAAW,CAAC;IACf,EAAE,EAAE,WAAW,CAAC;CACnB,CAAA;AAED,KAAK,WAAW,GAAG;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAClB,CAAA"}

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

@@ -0,0 +1,37 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  export let title: string;
+  export let imgSrc: string;
+  export let imgAlt: string;
+  $: attributes = { ...$$restProps };
+</script>
+
+<div {...attributes} class="mc-carousel-card">
+  <picture>
+    <img class="mc-carousel-card__image" src={imgSrc} alt={imgAlt} />
+  </picture>
+  <div class="mc-carousel-card__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 {
+    $parent: get-parent-selector(&);
+    @include set-font-face();
+
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: $mu050;
+    gap: $mu025;
+    border: 1px solid $color-grey-600;
+    border-radius: $mu025;
+
+    #{$parent}__image {
+      width: 100%;
+    }
+  }
+</style>