@mozaic-ds/web-components 1.0.0-alpha.0 → 1.0.0-alpha.2

package/public/components/carousel/Carousel.svelte

@@ -1,419 +0,0 @@
-<svelte:options customElement="" />
-
-<script lang="ts">
-  import type {
-    CarouselDevice,
-    CarouselItem,
-    CarouselOptions,
-    CarouselTitleTag,
-  } from './carousel.types';
-  import Link from '../link/Link.svelte';
-  import CarouselCard from './CarouselCard.svelte';
-  import Button from '../button/Button.svelte';
-  import { EventHandler } from '../../utilities/EventHandler';
-  import { onMount, createEventDispatcher } from 'svelte';
-  // @ts-ignore Need to use internal Svelte function
-  import { get_current_component } from 'svelte/internal';
-
-  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(
-    get_current_component(),
-    createEventDispatcher(),
-  );
-
-  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">
-      <svelte:element this={titletag} style="margin:0">{title}</svelte:element>
-      <div class="mc-carousel__subtitle">
-        <Link
-          href="#layer"
-          iconname="ui-chevron-right-24"
-          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="ui-chevron-left-32"
-        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="ui-chevron-right-32"
-        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/components/carousel/carousel.types.d.ts

@@ -1,19 +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;
-    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,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC"}

package/public/components/chart/bar-chart.types.d.ts

@@ -1,26 +0,0 @@
-export type BarData = {
-    group: string;
-} & {
-    [key: string]: {
-        value: string;
-        customtooltip: string;
-    };
-};
-export type StackedBarData = {
-    group: string;
-} & {
-    [key: string]: number;
-};
-export type BarKeyValue = {
-    key: string;
-    value: string;
-    customtooltip: string;
-};
-export interface BarMargin {
-    top: number;
-    right: number;
-    bottom: number;
-    left: number;
-    xAxis: number;
-}
-//# sourceMappingURL=bar-chart.types.d.ts.map

package/public/components/chart/bar-chart.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"bar-chart.types.d.ts","sourceRoot":"","sources":["../../../src/components/chart/bar-chart.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,OAAO,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG;IACxC,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,KAAK,EAAE,MAAM,CAAC;QACd,aAAa,EAAE,MAAM,CAAC;KACvB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG;IAC/C,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf"}

package/public/components/chart/donut.types.d.ts

@@ -1,13 +0,0 @@
-import type { PieArcDatum } from 'd3';
-export type DonutData = {
-    name: string;
-    total: number;
-    patternId: string;
-    checked?: boolean;
-    customTooltip?: string;
-};
-export type LegendPosition = 'top' | 'right' | 'bottom' | 'left' | undefined;
-export interface ChartContext extends Element {
-    _current: PieArcDatum<DonutData>;
-}
-//# sourceMappingURL=donut.types.d.ts.map

package/public/components/chart/donut.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"donut.types.d.ts","sourceRoot":"","sources":["../../../src/components/chart/donut.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AAEtC,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAE7E,MAAM,WAAW,YAAa,SAAQ,OAAO;IAC3C,QAAQ,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAClC"}

package/public/components/chart/grouped-bar-chart.types.d.ts

@@ -1,25 +0,0 @@
-export type GroupedBarData = {
-    group: string;
-} & {
-    [key: string]: {
-        scalePosition: 'right' | 'left';
-        color: string;
-        value: string;
-        customtooltip: string;
-    };
-};
-export type GroupedBarKeyValue = {
-    key: string;
-    value: string;
-    scalePosition?: 'right' | 'left';
-    color?: string;
-    customtooltip: string;
-};
-export interface BarMargin {
-    top: number;
-    right: number;
-    bottom: number;
-    left: number;
-    xAxis: number;
-}
-//# sourceMappingURL=grouped-bar-chart.types.d.ts.map

package/public/components/chart/grouped-bar-chart.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"grouped-bar-chart.types.d.ts","sourceRoot":"","sources":["../../../src/components/chart/grouped-bar-chart.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG;IAC/C,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,aAAa,EAAE,OAAO,GAAG,MAAM,CAAC;QAChC,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,aAAa,EAAE,MAAM,CAAC;KACvB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf"}

package/public/components/chart/line-chart.types.d.ts

@@ -1,14 +0,0 @@
-export type LinePoint = {
-    time: string | Date;
-    value: string;
-    customtooltip: string;
-};
-export type SymbolType = 'circle' | 'square' | 'triangle';
-export type LineData = {
-    points: LinePoint[];
-    color: string;
-    title: string;
-    symbol: SymbolType;
-    strokeDasharray?: number;
-};
-//# sourceMappingURL=line-chart.types.d.ts.map

package/public/components/chart/line-chart.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"line-chart.types.d.ts","sourceRoot":"","sources":["../../../src/components/chart/line-chart.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE1D,MAAM,MAAM,QAAQ,GAAG;IACrB,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,UAAU,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC"}

package/public/components/chart/radar.types.d.ts

@@ -1,10 +0,0 @@
-import type { PieArcDatum } from 'd3';
-export type RadarData = {
-    name: string;
-    total: number;
-};
-export type LegendPosition = 'top' | 'right' | 'bottom' | 'left' | undefined;
-export interface ChartContext extends Element {
-    _current: PieArcDatum<RadarData>;
-}
-//# sourceMappingURL=radar.types.d.ts.map

package/public/components/chart/radar.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"radar.types.d.ts","sourceRoot":"","sources":["../../../src/components/chart/radar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AAEtC,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAE7E,MAAM,WAAW,YAAa,SAAQ,OAAO;IAC3C,QAAQ,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAClC"}