@mozaic-ds/web-components 0.1.0

package/public/components/stackedbarchart/StackedBarChart.svelte

@@ -0,0 +1,343 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import {
+    select,
+    scaleBand,
+    scaleLinear,
+    axisBottom,
+    axisLeft,
+    Selection,
+    ScaleBand,
+    ScaleLinear,
+    NumberValue,
+    stack,
+    Series,
+  } from 'd3';
+  import { onMount } from 'svelte';
+  import type { StackedBarData, BarMargin } from './bar-chart.types';
+  import { EventHandler } from '../../utilities/EventHandler';
+
+  type StackedData = Series<
+    {
+      [key: string]: number;
+    },
+    string
+  >;
+
+  export let data = '';
+  $: parsedData = data ? (JSON.parse(data) as StackedBarData[]) : [];
+  $: groups = parsedData.map((d: StackedBarData) => d.group);
+  $: subgroups = parsedData[0]
+    ? Object.keys(parsedData[0]).filter((d: string) => d !== 'group')
+    : [];
+
+  export let chartheight = '300';
+  $: height = parseInt(chartheight, 10);
+
+  export let backgroundcolor = '#fff';
+  export let scalemax = 50;
+  export let ticknumbers = 4;
+  export let tickleftformat: (d: NumberValue, i: number) => string = (d) =>
+    `${Number(d)}`;
+  export let tickbottomformat: (d: NumberValue, i: number) => string = (d) =>
+    `${Number(d)}`;
+
+  export let margins: string;
+  export let svgs: string;
+  $: parsedSvgs = svgs ? (JSON.parse(svgs) as SVGElement[]) : [];
+
+  export let colors: string;
+  let parsedColor: Record<string, string>;
+  $: parsedColor = colors ? (JSON.parse(colors) as Record<string, string>) : {};
+
+  let _data: string;
+  let chart: HTMLDivElement;
+  let svg: Selection<SVGGElement, any, any, any>;
+  let hasMounted = false;
+  let tooltipData = { show: false, text: '', top: 0, left: 0, width: 0 };
+  let eventHandler = new EventHandler();
+
+  $: if (data.length > 0 && hasMounted) {
+    if (!_data) {
+      render();
+      _data = data;
+    } else if (data !== _data) {
+      update();
+      _data = data;
+    }
+  }
+
+  function getParsedMargins(margins: string): BarMargin {
+    if (margins) return JSON.parse(margins) as BarMargin;
+    else
+      return {
+        top: 10,
+        right: 40,
+        bottom: 20,
+        left: 60,
+        xAxis: 20,
+      } as BarMargin;
+  }
+
+  function getChartWidth() {
+    let chartWidth = select(chart).style('width');
+    if (chartWidth === '' || !chartWidth) {
+      chartWidth = `${window.innerWidth / 2}`;
+    }
+    return parseInt(chartWidth);
+  }
+
+  function getAxes(width: number) {
+    const x = scaleBand()
+      .domain(groups)
+      .range([
+        0,
+        width -
+          (getParsedMargins(margins).left / 2 +
+            getParsedMargins(margins).right / 2),
+      ])
+      .padding(0.2);
+    const y = scaleLinear().domain([0, scalemax]).range([height, 0]);
+    return { x, y };
+  }
+
+  function addRectandles(
+    x: ScaleBand<string>,
+    y: ScaleLinear<number, number, never>,
+  ) {
+    const stackedData = stack().keys(subgroups)(parsedData);
+
+    svg
+      .append('g')
+      .selectAll('g')
+      .data(stackedData)
+      .enter()
+      .append('g')
+      .attr('fill', (d: StackedData) => parsedColor[d.key] || 'black')
+      .attr('class', 'bar')
+      .selectAll('rect')
+      .data((d) => d)
+      .enter()
+      .append('rect')
+      .attr('x', (d) => x(d.data.group.toString())!)
+      .attr('y', (d) => y(d[1]))
+      .attr('width', x.bandwidth())
+      .attr('height', (d) => y(d[0]) - y(d[1]))
+      .style('cursor', 'pointer')
+      .on('mouseout', (_e: MouseEvent, chartEvent) => {
+        const others = svg.selectAll('rect').filter(function (arc) {
+          return arc != chartEvent;
+        });
+        others.style('opacity', 1);
+        tooltipData.show = false;
+      })
+      .on('mouseover', (e: MouseEvent, chartEvent: any) => {
+        const others = svg.selectAll('rect').filter(function (arc) {
+          return arc != chartEvent;
+        });
+        others.style('opacity', 0.7);
+        const { left, top, width } = (
+          e.target as HTMLElement
+        ).getBoundingClientRect();
+        tooltipData = {
+          show: true,
+          text: chartEvent.data.customtooltip
+            ? chartEvent.data.customtooltip
+            : `${chartEvent[1] - chartEvent[0]}`,
+          left: left,
+          top: top - 50,
+          width,
+        };
+      })
+      .on('click', (_e: MouseEvent, chartEvent) => {
+        eventHandler.dispatch('bar-clicked', chartEvent);
+      });
+  }
+
+  function updateAxes(
+    x: ScaleBand<string>,
+    y: ScaleLinear<number, number, never>,
+  ) {
+    svg
+      .select('.x-axis')
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+      .call((axisBottom(x) as any).tickFormat(tickbottomformat));
+    svg
+      .select('.y-axis')
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+      .call((axisLeft(y) as any).ticks(ticknumbers).tickFormat(tickleftformat));
+
+    const width = getChartWidth();
+    svg
+      .selectAll('.y-axis .tick line')
+      .attr('stroke', '#EEEDEA')
+      .attr('stroke-width', '1px')
+      .attr('x2', width);
+  }
+
+  function render() {
+    const width = getChartWidth();
+    const { x, y } = getAxes(width);
+
+    svg = select<HTMLElement, any>(chart)
+      .append('svg')
+      .attr('width', width)
+      .attr(
+        'height',
+        Number(height) +
+          Number(getParsedMargins(margins).top) +
+          Number(getParsedMargins(margins).bottom) +
+          Number(getParsedMargins(margins).xAxis),
+      )
+      .attr('id', 'svg-chart')
+      .append('g')
+      .attr(
+        'transform',
+        `translate(${
+          getParsedMargins(margins).left / 2 +
+          getParsedMargins(margins).right / 2
+        },${getParsedMargins(margins).top})`,
+      );
+
+    svg
+      .append('g')
+      .attr(
+        'transform',
+        `translate(0, ${
+          Number(height) + Number(getParsedMargins(margins).xAxis)
+        })`,
+      )
+      .call(axisBottom(x))
+      .attr('class', 'x-axis')
+      .attr('stroke-width', '0');
+
+    svg
+      .append('g')
+      .call(axisLeft(y).ticks(ticknumbers).tickFormat(tickleftformat))
+      .attr('class', 'y-axis')
+      .attr('stroke-width', '0');
+
+    addRectandles(x, y);
+  }
+
+  function update() {
+    const width = getChartWidth();
+    chart.querySelector('#svg-chart')?.setAttribute('width', `${width}px`);
+
+    const { x, y } = getAxes(width);
+    updateAxes(x, y);
+    svg.selectAll('.bar').remove();
+    addRectandles(x, y);
+  }
+
+  function resize() {
+    if (_data) {
+      const width = getChartWidth();
+      chart.querySelector('#svg-chart')?.setAttribute('width', `${width}px`);
+
+      const { x, y } = getAxes(width);
+      updateAxes(x, y);
+
+      const stackedData = stack().keys(subgroups)(parsedData);
+      svg
+        .selectAll('.bar')
+        .data(stackedData)
+        .selectAll('rect')
+        .data((d) => d)
+        .attr('x', (d) => x(d.data.group.toString())!)
+        .attr('y', (d) => y(d[1]))
+        .attr('width', x.bandwidth())
+        .attr('height', (d) => y(d[0]) - y(d[1]));
+    }
+  }
+
+  onMount(() => {
+    const resizeObserver = new ResizeObserver(resize);
+    resizeObserver.observe(chart);
+    hasMounted = true;
+  });
+</script>
+
+<div bind:this={chart} style="background-color: {backgroundcolor};" />
+
+{#if tooltipData.show}
+  <div
+    class="tooltip"
+    style={`top: ${tooltipData.top}px; left: ${tooltipData.left}px; width: ${tooltipData.width}px;`}
+  >
+    {tooltipData.text}
+  </div>
+{/if}
+
+<div class="legend">
+  {#each subgroups as subgroup}
+    <div class="legend__item">
+      <svg class="legend__box">
+        <rect x="0" y="0" width="24" height="16" fill={parsedColor[subgroup]} />
+      </svg>
+      <span class="legend__title">{subgroup}</span>
+    </div>
+  {/each}
+</div>
+
+<div style="height: 0; width: 0;" class="pattern">
+  {#each parsedSvgs as svg}
+    {@html svg}
+  {/each}
+</div>
+<text />
+
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
+
+  .legend {
+    margin-top: magic-unit-rem(1);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 magic-unit-rem(1.5);
+    height: 100%;
+    color: $color-grey-999;
+    gap: magic-unit-rem(1);
+    &__item {
+      display: flex;
+      justify-content: center;
+      font-size: $size-font-04;
+      align-items: center;
+    }
+    &__title {
+      white-space: nowrap;
+      margin: 0;
+    }
+    &__box {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: magic-unit-rem(0.25);
+      height: 16px;
+      width: 24px;
+    }
+  }
+
+  .tooltip {
+    height: auto;
+    background-color: $color-grey-700;
+    border-radius: 4px;
+    color: $color-grey-000;
+    text-align: center;
+    padding: magic-unit-rem(0.5) 0;
+    position: absolute;
+  }
+
+  .pattern {
+    z-index: -1;
+    position: relative;
+  }
+
+  text {
+    font-family: 'LeroyMerlin', sans-serif;
+    font-size: $size-font-04;
+    color: $color-grey-700;
+  }
+</style>

package/public/components/starsinput/StarsInput.svelte

@@ -0,0 +1,64 @@
+<svelte:options tag="m-stars-input" />
+
+<script lang="ts">
+  import type { RatingsSize } from './ratings.types';
+
+  const ratingValue = 5;
+  export let unselectedText = 'No opinion given';
+  export let name = 'rating';
+  export let size: RatingsSize = 'm';
+  export let ratinglabels: Array<string> = [
+    'Very bad',
+    'Bad',
+    'Medium',
+    'Good',
+    'Excellent',
+  ];
+
+  function setClasses(size: RatingsSize): string {
+    const mainClass = 'mc-stars-input';
+
+    return size ? `${mainClass} ${mainClass}--${size}` : mainClass;
+  }
+
+  function setInputId(name: string, index: number): string {
+    return `${name}${index + 1}`;
+  }
+</script>
+
+<div class={setClasses(size)} {...$$restProps}>
+  <input
+    id="no-rate"
+    type="radio"
+    {name}
+    value="0"
+    class="mc-stars-input__radio"
+    checked
+    aria-label={unselectedText}
+  />
+
+  {#each Array(ratingValue) as _, i}
+    <input
+      id={setInputId(name, i)}
+      type="radio"
+      {name}
+      value={i + 1}
+      class="mc-stars-input__radio"
+    />
+
+    <label
+      for={setInputId(name, i)}
+      title={ratinglabels[i]}
+      class="mc-stars-input__label"
+    >
+      <span class="mc-stars-input__text">
+        {ratinglabels[i]}
+      </span>
+    </label>
+  {/each}
+</div>
+
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
+  @import '@mozaic-ds/styles/components/_c.stars-input';
+</style>

package/public/components/starsresult/StarsResult.svelte

@@ -0,0 +1,85 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import type { RatingsSize } from './ratings.types';
+
+  export let value = 0;
+  export let size: RatingsSize = 'm';
+  export let a11ylabel = '';
+  export let suffixlabel: string | undefined = undefined;
+
+  $: userClass = $$props.class;
+  $: attributes = { ...$$restProps };
+  $: delete attributes.class;
+
+  function getRatingsClasses(
+    value: number,
+    size: RatingsSize,
+    suffixLabel?: string,
+  ): string {
+    const classes = [
+      'mc-stars-result',
+      `mc-stars-result--score-${computeRatingsPercentage(value)}`,
+      `mc-stars-result--${size}`,
+    ];
+
+    const shouldAddFlexDisplay = !!suffixLabel;
+    if (shouldAddFlexDisplay) {
+      classes.push('ml-flexy', 'ml-flexy--items-center');
+    }
+
+    return classes.join(' ');
+  }
+
+  function computeRatingsPercentage(value: number): number {
+    const roundedValue = Math.round(value * 2) / 2;
+
+    let correctedValue = roundedValue;
+    if (correctedValue < 0) {
+      correctedValue = 0;
+    }
+
+    if (correctedValue > 5) {
+      correctedValue = 5;
+    }
+
+    return correctedValue * 20;
+  }
+</script>
+
+<div
+  class="{getRatingsClasses(value, size, suffixlabel)} {userClass}"
+  {...attributes}
+>
+  <span class="mc-stars-result__visual" />
+
+  {#if suffixlabel}
+    <span class="mc-stars-result__suffix-label mu-ml-050">{suffixlabel}</span>
+  {/if}
+
+  <span class="mc-stars-result__text">{a11ylabel}</span>
+</div>
+
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
+  @import '@mozaic-ds/styles/components/_c.stars-result';
+  @import '@mozaic-ds/styles/utilities/_u.margin';
+  @import '@mozaic-ds/styles/layouts/_l.flexy';
+
+  .mc-stars-result {
+    @include set-font-face();
+
+    &--s .mc-stars-result__suffix-label {
+      @include set-font-scale('02');
+      color: $color-grey-700;
+    }
+
+    &--l .mc-stars-result__suffix-label {
+      @include set-font-scale('06');
+    }
+
+    &--xl .mc-stars-result__suffix-label {
+      @include set-font-scale('08');
+    }
+  }
+</style>

package/public/components/stepper/Stepper.js

@@ -0,0 +1,2 @@
+import{S as e,i as t,a as r,b as i,f as s,s as p,c,e as o,n as a,g as n,h as m,j as l,m as d,o as _,J as b,p as f,q as h,d as u,t as x,l as g,k}from"../../index-c33b3772.js";import{E as w}from"../../EventHandler-02058705.js";function v(e,t,r){const i=e.slice();return i[10]=t[r],i[12]=r,i}function y(e){let t,r,s=e[12]+1+"";return{c(){t=o("span"),r=x(s)},m(e,s){i(e,t,s),l(t,r)},d(e){e&&_(t)}}}function $(e){let t;return{c(){t=o("div"),t.innerHTML='<navigation-notification-available-16px name="NotificationAvailable16" size="100%"></navigation-notification-available-16px>',n(t,"class","mc-stepper__icon")},m(e,r){i(e,t,r)},d(e){e&&_(t)}}}function z(e){let t,r,s,p,c,a,m,d,b,f,h,w,v,z,C=e[4](e[12],e[2])+"",j=e[10].label+"";function E(e,t){return 4&t&&(s=null),null==s&&(s=!!e[3](e[12],e[2])),s?$:e[10].isCurrent?y:void 0}let L=E(e,-1),A=L&&L(e);function D(){return e[7](e[10])}return{c(){t=o("li"),r=o("div"),A&&A.c(),p=u(),c=o("div"),a=o("span"),m=x(C),d=u(),b=o("span"),f=x(j),h=u(),n(r,"class","mc-stepper__indicator"),n(r,"aria-hidden","true"),n(a,"class","mc-stepper__title"),n(b,"class","mc-stepper__label"),n(c,"class","mc-stepper__detail"),n(t,"class",w="mc-stepper__item "+(e[10].isCurrent?"mc-stepper__item--current":"")+" "+(e[3](e[12],e[2])?"mc-stepper__item--validated":""))},m(e,s){i(e,t,s),l(t,r),A&&A.m(r,null),l(t,p),l(t,c),l(c,a),l(a,m),l(c,d),l(c,b),l(b,f),l(t,h),v||(z=g(t,"click",D),v=!0)},p(i,s){L!==(L=E(e=i,s))&&(A&&A.d(1),A=L&&L(e),A&&(A.c(),A.m(r,null))),4&s&&C!==(C=e[4](e[12],e[2])+"")&&k(m,C),4&s&&j!==(j=e[10].label+"")&&k(f,j),4&s&&w!==(w="mc-stepper__item "+(e[10].isCurrent?"mc-stepper__item--current":"")+" "+(e[3](e[12],e[2])?"mc-stepper__item--validated":""))&&n(t,"class",w)},d(e){e&&_(t),A&&A.d(),v=!1,z()}}}function C(e){let t,r,s,p=e[2],f=[];for(let t=0;t<p.length;t+=1)f[t]=z(v(e,p,t));let h=[{class:s="mc-stepper "+(e[0]?"mc-stepper--compact":"")+" "+(e[2].length>3?"mc-stepper--shrinked":"")},{"aria-label":"accessibilityLabels.stepperDescription"},e[1]],u={};for(let e=0;e<h.length;e+=1)u=c(u,h[e]);return{c(){t=o("nav"),r=o("ol");for(let e=0;e<f.length;e+=1)f[e].c();this.c=a,n(r,"class","mc-stepper__list"),m(t,u)},m(e,s){i(e,t,s),l(t,r);for(let e=0;e<f.length;e+=1)f[e]&&f[e].m(r,null)},p(e,[i]){if(60&i){let t;for(p=e[2],t=0;t<p.length;t+=1){const s=v(e,p,t);f[t]?f[t].p(s,i):(f[t]=z(s),f[t].c(),f[t].m(r,null))}for(;t<f.length;t+=1)f[t].d(1);f.length=p.length}m(t,u=d(h,[5&i&&s!==(s="mc-stepper "+(e[0]?"mc-stepper--compact":"")+" "+(e[2].length>3?"mc-stepper--shrinked":""))&&{class:s},{"aria-label":"accessibilityLabels.stepperDescription"},2&i&&e[1]]))},i:a,o:a,d(e){e&&_(t),b(f,e)}}}function j(e,t,r){let i,s;const p=["steps","compact"];let o=f(t,p),{steps:a}=t,{compact:n=!1}=t,m=new w;function l(e){m.dispatch("step-changed",e)}return e.$$set=e=>{t=c(c({},t),h(e)),r(9,o=f(t,p)),"steps"in e&&r(6,a=e.steps),"compact"in e&&r(0,n=e.compact)},e.$$.update=()=>{64&e.$$.dirty&&r(2,i=a?JSON.parse(a):[]),r(1,s=Object.assign({},o)),2&e.$$.dirty&&delete s.class},[n,s,i,function(e,t){return e<t.findIndex((e=>e.isCurrent))},function(e,t){return`${e+1} / ${t.length}`},l,a,e=>l(e)]}class E extends e{constructor(e){super();const c=document.createElement("style");c.textContent='.mc-stepper{width:100%}.mc-stepper__list{display:-webkit-box;display:-ms-flexbox;display:flex;padding-left:0;margin-bottom:0;margin-top:0}.mc-stepper__item,.mc-stepper__link{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mc-stepper__item{-webkit-box-flex:1;-ms-flex:1;flex:1;position:relative}.mc-stepper__item::before,.mc-stepper__item::after{background-color:#999999;content:"";height:0.125rem;position:absolute;top:11px;width:calc(50% - 1.25rem);z-index:1}.mc-stepper__item::before{border-top-right-radius:1px;border-bottom-right-radius:1px;left:0}.mc-stepper__item::after{border-top-left-radius:1px;border-bottom-left-radius:1px;right:0}.mc-stepper__item:first-child::before,.mc-stepper__item:last-child::after{content:none}.mc-stepper__item--current .mc-stepper__indicator,.mc-stepper__item--validated .mc-stepper__indicator{border-color:#46a610}.mc-stepper__item--current .mc-stepper__detail,.mc-stepper__item--validated .mc-stepper__detail{font-weight:600}.mc-stepper__item--current::before{background-color:#46a610}.mc-stepper__item--current .mc-stepper__indicator{background-color:#46a610;color:#ffffff}.mc-stepper__item--current .mc-stepper__label{color:#000000}.mc-stepper__item--validated::before,.mc-stepper__item--validated:not(.mc-stepper__item--current)::after{background-color:#46a610}.mc-stepper__link{height:100%;text-decoration:none;width:100%}.mc-stepper__link:hover .mc-stepper__label,.mc-stepper__link:focus .mc-stepper__label{color:#46a610}.mc-stepper__indicator{font-size:0.875rem;line-height:1.1428571429;font-weight:600;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:2px solid #999999;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;height:1.5rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-bottom:0.5rem;position:relative;width:1.5rem;z-index:2}.mc-stepper__icon{fill:#46a610;max-width:100%}.mc-stepper__detail{font-size:0.875rem;line-height:1.2857142857;color:#666666;text-align:center;width:auto}.mc-stepper__title{display:none;color:#46a610}.mc-stepper--compact .mc-stepper__item{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding-bottom:1.25rem}.mc-stepper--compact .mc-stepper__item::before,.mc-stepper--compact .mc-stepper__item::after{bottom:0;border-radius:6px;height:0.25rem;top:auto}.mc-stepper--compact .mc-stepper__item::after{width:100%}.mc-stepper--compact .mc-stepper__item::before{z-index:2;width:calc(var(--current) * 100% / var(--steps))}.mc-stepper--compact .mc-stepper__item:not(.mc-stepper__item--current){display:none}.mc-stepper--compact .mc-stepper__indicator{display:none}.mc-stepper--compact .mc-stepper__detail{text-align:left}.mc-stepper--compact .mc-stepper__title{display:block;margin-bottom:0.25rem}@media screen and (max-width: 679px){.mc-stepper--shrinked .mc-stepper__item{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding-bottom:1.25rem}.mc-stepper--shrinked .mc-stepper__item::before,.mc-stepper--shrinked .mc-stepper__item::after{bottom:0;border-radius:6px;height:0.25rem;top:auto}.mc-stepper--shrinked .mc-stepper__item::after{width:100%}.mc-stepper--shrinked .mc-stepper__item::before{z-index:2;width:calc(var(--current) * 100% / var(--steps))}.mc-stepper--shrinked .mc-stepper__item:not(.mc-stepper__item--current){display:none}.mc-stepper--shrinked .mc-stepper__indicator{display:none}.mc-stepper--shrinked .mc-stepper__detail{text-align:left}.mc-stepper--shrinked .mc-stepper__title{display:block;margin-bottom:0.25rem}}',this.shadowRoot.appendChild(c),t(this,{target:this.shadowRoot,props:r(this.attributes),customElement:!0},j,C,p,{steps:6,compact:0},null),e&&(e.target&&i(e.target,this,e.anchor),e.props&&(this.$set(e.props),s()))}static get observedAttributes(){return["steps","compact"]}get steps(){return this.$$.ctx[6]}set steps(e){this.$$set({steps:e}),s()}get compact(){return this.$$.ctx[0]}set compact(e){this.$$set({compact:e}),s()}}export{E as default};
+//# sourceMappingURL=Stepper.js.map

package/public/components/stepper/Stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.js","sources":["../../../src/components/stepper/Stepper.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import type { StepperItems } from './stepper.types';\n  import { EventHandler } from '../../utilities/EventHandler';\n\n  export let steps: string;\n  export let compact = false;\n  let eventHandler = new EventHandler();\n  $: stepsObject = steps\n    ? (JSON.parse(steps) as StepperItems[])\n    : ([] as StepperItems[]);\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  function isStepValidated(\n    index: number,\n    stepsObject: StepperItems[],\n  ): boolean {\n    return (\n      index < stepsObject.findIndex((step: StepperItems) => step.isCurrent)\n    );\n  }\n\n  function getStepNumber(index: number, stepsObject: StepperItems[]): string {\n    return `${index + 1} / ${stepsObject.length}`;\n  }\n\n  function stepChanged(step: StepperItems): void {\n    eventHandler.dispatch('step-changed', step);\n  }\n</script>\n\n<nav\n  class=\"mc-stepper {compact ? 'mc-stepper--compact' : ''} {stepsObject.length >\n  3\n    ? 'mc-stepper--shrinked'\n    : ''}\"\n  aria-label=\"accessibilityLabels.stepperDescription\"\n  {...attributes}\n>\n  <ol class=\"mc-stepper__list\">\n    {#each stepsObject as step, index}\n      <li\n        class=\"mc-stepper__item {step.isCurrent\n          ? 'mc-stepper__item--current'\n          : ''} {isStepValidated(index, stepsObject)\n          ? 'mc-stepper__item--validated'\n          : ''}\"\n        on:click={() => stepChanged(step)}\n      >\n        <div class=\"mc-stepper__indicator\" aria-hidden=\"true\">\n          {#if isStepValidated(index, stepsObject)}\n            <div class=\"mc-stepper__icon\">\n              <navigation-notification-available-16px\n                name=\"NotificationAvailable16\"\n                size=\"100%\"\n              />\n            </div>\n          {:else if step.isCurrent}\n            <span>{index + 1}</span>\n          {/if}\n        </div>\n        <div class=\"mc-stepper__detail\">\n          <span class=\"mc-stepper__title\"\n            >{getStepNumber(index, stepsObject)}\n          </span>\n          <span class=\"mc-stepper__label\">{step.label}</span>\n        </div>\n      </li>\n    {/each}\n  </ol>\n</nav>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/_c.stepper';\n</style>\n"],"names":["t_value","ctx","insert","target","span","anchor","div","t3_value","label","isCurrent","create_if_block_1","attr","li","li_class_value","append","div0","div1","span0","span1","set_data","t1","t1_value","dirty","t3","length","i","nav","ol","class","nav_class_value","steps","$$props","compact","eventHandler","EventHandler","stepChanged","step","dispatch","$$invalidate","stepsObject","JSON","parse","attributes","Object","assign","$$restProps","index","findIndex"],"mappings":"uTA4DmBA,EAAAC,MAAQ,EAAC,yCAAhBC,EAAuBC,EAAAC,EAAAC,uPAPvBH,EAKKC,EAAAG,EAAAD,mEAOHJ,EAAa,GAACA,EAAK,IAAEA,EAAW,IAAA,GAEHM,EAAAN,MAAKO,MAAK,sDAftCP,EAAe,GAACA,EAAK,IAAEA,EAAW,SAO7BA,MAAKQ,UAASC,OAAd,yUAfaC,EAAAC,EAAA,QAAAC,EAAA,qBAAAZ,MAAKQ,UAC1B,4BACA,IAAK,KAAAR,EAAgB,GAAAA,MAAOA,EAAW,IACvC,8BACA,aALNC,EA0BIC,EAAAS,EAAAP,GAlBFS,EAWKF,EAAAG,yBACLD,EAKKF,EAAAI,GAJHF,EAEME,EAAAC,iBACNH,EAAkDE,EAAAE,+HAF9CjB,EAAa,GAACA,EAAK,IAAEA,EAAW,IAAA,KAAAkB,EAAAC,EAAAC,GAEH,EAAAC,GAAAf,KAAAA,EAAAN,MAAKO,MAAK,KAAAW,EAAAI,EAAAhB,GAvBpB,EAAAe,GAAAT,KAAAA,EAAA,qBAAAZ,MAAKQ,UAC1B,4BACA,IAAK,KAAAR,EAAgB,GAAAA,MAAOA,EAAW,IACvC,8BACA,iFANDA,EAAW,wBAAhBuB,OAAIC,GAAA,kDARWxB,EAAO,GAAG,sBAAwB,SAAKA,EAAW,GAACuB,OACtE,EACI,uBACA,6DAEAvB,EAAU,8KANhBC,EAuCKC,EAAAuB,EAAArB,GA/BHS,EA8BIY,EAAAC,mFA7BK1B,EAAW,WAAhBuB,OAAIC,GAAA,EAAA,iHAAJD,6CARevB,EAAO,GAAG,sBAAwB,SAAKA,EAAW,GAACuB,OACtE,EACI,uBACA,MAAE,CAAAI,MAAAC,gEAEF5B,EAAU,+GAjCH6B,GAAaC,GACbC,QAAAA,GAAU,GAAKD,EACtBE,MAAmBC,EAoBd,SAAAC,EAAYC,GACnBH,EAAaI,SAAS,eAAgBD,mJApBvCE,EAAA,EAAEC,EAAcT,EACZU,KAAKC,MAAMX,GAAK,QAElBY,EAALC,OAAAC,UAAuBC,yBACXH,EAAWd,uBAGnBkB,EACAP,UAGEO,EAAQP,EAAYQ,WAAWX,GAAuBA,EAAK3B,sBAIxCqC,EAAeP,GAC1B,MAAA,GAAAO,EAAQ,OAAOP,EAAYf,cAwBjBY,GAAAD,EAAYC"}

package/public/components/stepper/Stepper.svelte

@@ -0,0 +1,78 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import type { StepperItems } from './stepper.types';
+  import { EventHandler } from '../../utilities/EventHandler';
+
+  export let steps: string;
+  export let compact = false;
+  let eventHandler = new EventHandler();
+  $: stepsObject = steps
+    ? (JSON.parse(steps) as StepperItems[])
+    : ([] as StepperItems[]);
+  $: attributes = { ...$$restProps };
+  $: delete attributes.class;
+
+  function isStepValidated(
+    index: number,
+    stepsObject: StepperItems[],
+  ): boolean {
+    return (
+      index < stepsObject.findIndex((step: StepperItems) => step.isCurrent)
+    );
+  }
+
+  function getStepNumber(index: number, stepsObject: StepperItems[]): string {
+    return `${index + 1} / ${stepsObject.length}`;
+  }
+
+  function stepChanged(step: StepperItems): void {
+    eventHandler.dispatch('step-changed', step);
+  }
+</script>
+
+<nav
+  class="mc-stepper {compact ? 'mc-stepper--compact' : ''} {stepsObject.length >
+  3
+    ? 'mc-stepper--shrinked'
+    : ''}"
+  aria-label="accessibilityLabels.stepperDescription"
+  {...attributes}
+>
+  <ol class="mc-stepper__list">
+    {#each stepsObject as step, index}
+      <li
+        class="mc-stepper__item {step.isCurrent
+          ? 'mc-stepper__item--current'
+          : ''} {isStepValidated(index, stepsObject)
+          ? 'mc-stepper__item--validated'
+          : ''}"
+        on:click={() => stepChanged(step)}
+      >
+        <div class="mc-stepper__indicator" aria-hidden="true">
+          {#if isStepValidated(index, stepsObject)}
+            <div class="mc-stepper__icon">
+              <navigation-notification-available-16px
+                name="NotificationAvailable16"
+                size="100%"
+              />
+            </div>
+          {:else if step.isCurrent}
+            <span>{index + 1}</span>
+          {/if}
+        </div>
+        <div class="mc-stepper__detail">
+          <span class="mc-stepper__title"
+            >{getStepNumber(index, stepsObject)}
+          </span>
+          <span class="mc-stepper__label">{step.label}</span>
+        </div>
+      </li>
+    {/each}
+  </ol>
+</nav>
+
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
+  @import '@mozaic-ds/styles/components/_c.stepper';
+</style>

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

@@ -0,0 +1,6 @@
+export interface StepperItems {
+    label?: string;
+    path: string;
+    isCurrent?: boolean;
+}
+//# sourceMappingURL=stepper.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.types.d.ts","sourceRoot":"","sources":["../../../src/components/stepper/stepper.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB"}

package/public/components/tabs/Tabs.js

@@ -0,0 +1,2 @@
+import{S as e,i as t,a as s,b as a,f as i,s as n,c as l,e as c,n as r,g as o,h as d,j as b,m,o as _,J as f,p,q as u,d as h,v as x,t as g,z as v,l as k,k as w,K as $}from"../../index-c33b3772.js";import{E as y}from"../../EventHandler-02058705.js";function A(e,t,s){const a=e.slice();return a[16]=t[s],a[18]=s,a}function j(e){let t,s,i,n,l,r,d,m,f=e[16].text+"";function p(...t){return e[12](e[18],e[16],...t)}return{c(){t=c("button"),s=c("span"),i=g(f),o(s,"class","mc-tabs__text"),o(t,"role","tab"),o(t,"type","button"),o(t,"class","mc-tabs__element"),o(t,"id",n=e[16].id),t.disabled=l=e[16].disabled,o(t,"aria-selected",r=e[16].isActive?"true":"false"),v(t,"mc-tabs__element--disabled",e[16].disabled),v(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},m(e,n){a(e,t,n),b(t,s),b(s,i),d||(m=k(t,"click",p),d=!0)},p(s,a){e=s,256&a&&f!==(f=e[16].text+"")&&w(i,f),256&a&&n!==(n=e[16].id)&&o(t,"id",n),256&a&&l!==(l=e[16].disabled)&&(t.disabled=l),256&a&&r!==(r=e[16].isActive?"true":"false")&&o(t,"aria-selected",r),256&a&&v(t,"mc-tabs__element--disabled",e[16].disabled),304&a&&v(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},d(e){e&&_(t),d=!1,m()}}}function E(e){let t;function s(e,t){return e[16].disabled?O:C}let i=s(e),n=i(e);return{c(){n.c(),t=$()},m(e,s){n.m(e,s),a(e,t,s)},p(e,a){i===(i=s(e))&&n?n.p(e,a):(n.d(1),n=i(e),n&&(n.c(),n.m(t.parentNode,t)))},d(e){n.d(e),e&&_(t)}}}function O(e){let t,s,i,n,l,r=e[16].text+"";return{c(){t=c("span"),s=c("span"),i=g(r),o(s,"class","mc-tabs__text"),o(t,"role","tab"),o(t,"class","mc-tabs__element"),o(t,"id",n=e[16].id),o(t,"aria-selected",l=e[16].isActive?"true":"false"),v(t,"mc-tabs__element--disabled",e[16].disabled),v(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},m(e,n){a(e,t,n),b(t,s),b(s,i)},p(e,s){256&s&&r!==(r=e[16].text+"")&&w(i,r),256&s&&n!==(n=e[16].id)&&o(t,"id",n),256&s&&l!==(l=e[16].isActive?"true":"false")&&o(t,"aria-selected",l),256&s&&v(t,"mc-tabs__element--disabled",e[16].disabled),304&s&&v(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},d(e){e&&_(t)}}}function C(e){let t,s,i,n,l,r,d,m,f=e[16].text+"";function p(...t){return e[11](e[18],e[16],...t)}return{c(){t=c("a"),s=c("span"),i=g(f),o(s,"class","mc-tabs__text"),o(t,"href",n=e[16].href),o(t,"role","tab"),o(t,"class","mc-tabs__element"),o(t,"id",l=e[16].id),o(t,"aria-selected",r=e[16].isActive?"true":"false"),v(t,"mc-tabs__element--disabled",e[16].disabled),v(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},m(e,n){a(e,t,n),b(t,s),b(s,i),d||(m=k(t,"click",p),d=!0)},p(s,a){e=s,256&a&&f!==(f=e[16].text+"")&&w(i,f),256&a&&n!==(n=e[16].href)&&o(t,"href",n),256&a&&l!==(l=e[16].id)&&o(t,"id",l),256&a&&r!==(r=e[16].isActive?"true":"false")&&o(t,"aria-selected",r),256&a&&v(t,"mc-tabs__element--disabled",e[16].disabled),304&a&&v(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},d(e){e&&_(t),d=!1,m()}}}function L(e){let t,s;function i(e,t){return e[16].href?E:j}let n=i(e),l=n(e);return{c(){t=c("li"),l.c(),s=h(),o(t,"class","mc-tabs__item"),o(t,"role","presentation")},m(e,i){a(e,t,i),l.m(t,null),b(t,s)},p(e,a){n===(n=i(e))&&l?l.p(e,a):(l.d(1),l=n(e),l&&(l.c(),l.m(t,s)))},d(e){e&&_(t),l.d()}}}function S(e){let t,s,i,n=e[8],p=[];for(let t=0;t<n.length;t+=1)p[t]=L(A(e,n,t));let u=[{class:i="mc-tabs "+(e[0]&&"full"===e[0]?" mc-tabs--full":"")+" "+(e[0]&&"centered"===e[0]?" mc-tabs--full-centered":"")+" "+(e[3]?` mc-tabs--${e[3]}`:"")+(e[2]?" mc-tabs--no-divider":"")},e[6]],h={};for(let e=0;e<u.length;e+=1)h=l(h,u[e]);return{c(){t=c("div"),s=c("ul");for(let e=0;e<p.length;e+=1)p[e].c();this.c=r,o(s,"class","mc-tabs__nav"),o(s,"role","tablist"),o(s,"aria-label",e[1]),d(t,h)},m(i,n){a(i,t,n),b(t,s);for(let e=0;e<p.length;e+=1)p[e]&&p[e].m(s,null);e[13](s)},p(e,[a]){if(816&a){let t;for(n=e[8],t=0;t<n.length;t+=1){const i=A(e,n,t);p[t]?p[t].p(i,a):(p[t]=L(i),p[t].c(),p[t].m(s,null))}for(;t<p.length;t+=1)p[t].d(1);p.length=n.length}2&a&&o(s,"aria-label",e[1]),d(t,h=m(u,[13&a&&i!==(i="mc-tabs "+(e[0]&&"full"===e[0]?" mc-tabs--full":"")+" "+(e[0]&&"centered"===e[0]?" mc-tabs--full-centered":"")+" "+(e[3]?` mc-tabs--${e[3]}`:"")+(e[2]?" mc-tabs--no-divider":""))&&{class:i},64&a&&e[6]]))},i:r,o:r,d(s){s&&_(t),f(p,s),e[13](null)}}}function q(e,t,s){let a,i;const n=["align","description","nodivider","tabs","type","stateless","selectedtab"];let c,r=p(t,n),{align:o="auto"}=t,{description:d="Tabs"}=t,{nodivider:b=!1}=t,{tabs:m}=t,{type:_="tabs"}=t,{stateless:f=!1}=t,{selectedtab:h}=t,g=new y;function v(e,t){const s=e.target;f||(c.querySelectorAll(".mc-tabs__element").forEach((e=>{e.classList.remove("mc-tabs__element--selected"),e.setAttribute("aria-selected","false")})),s.classList.add("mc-tabs__element--selected"),s.setAttribute("aria-selected","true")),g.dispatch("tab-clicked",Object.assign(t,{target:s}))}return e.$$set=e=>{t=l(l({},t),u(e)),s(15,r=p(t,n)),"align"in e&&s(0,o=e.align),"description"in e&&s(1,d=e.description),"nodivider"in e&&s(2,b=e.nodivider),"tabs"in e&&s(10,m=e.tabs),"type"in e&&s(3,_=e.type),"stateless"in e&&s(4,f=e.stateless),"selectedtab"in e&&s(5,h=e.selectedtab)},e.$$.update=()=>{1024&e.$$.dirty&&s(8,a=m?JSON.parse(m):[]),s(6,i=Object.assign({},r)),64&e.$$.dirty&&delete i.class},[o,d,b,_,f,h,i,c,a,v,m,(e,t,s)=>v(s,Object.assign({index:e},t)),(e,t,s)=>v(s,Object.assign({index:e},t)),function(e){x[e?"unshift":"push"]((()=>{c=e,s(7,c)}))}]}class z extends e{constructor(e){super();const l=document.createElement("style");l.textContent='.mc-tabs{font-family:"LeroyMerlin", sans-serif;font-weight:400;background-color:#ffffff;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;width:100%}.mc-tabs::after{background:#b3b3b3;content:"";display:block;margin:0 auto;height:1px;width:100%;bottom:0;left:0;position:absolute}.mc-tabs--no-shadow::after,.mc-tabs--no-divider::after{display:none}.mc-tabs__nav{list-style:none;margin-left:0;padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:0;margin-bottom:0}.mc-tabs__nav,.mc-tabs__select{position:relative}.mc-tabs__link,.mc-tabs__element{font-size:0.875rem;line-height:1.2857142857;font-weight:600;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:none;border:none;color:#666666;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;height:3.5rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;outline:none;padding-left:0.75rem;padding-right:0.75rem;position:relative;text-decoration:none}.mc-tabs__link::before,.mc-tabs__element::before{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;-o-transition:box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;bottom:-0.125rem;top:-0.125rem}.mc-tabs__link::after,.mc-tabs__element::after{background-color:transparent;bottom:0;content:"";height:0.25rem;left:1.5rem;position:absolute;right:1.5rem}.mc-tabs__link:hover .mc-tabs__text,.mc-tabs__element:hover .mc-tabs__text{background-color:#eeeff1}.mc-tabs__link:active,.mc-tabs__element:active{color:#333333}.mc-tabs__link:active .mc-tabs__text,.mc-tabs__element:active .mc-tabs__text{background-color:#cfd2d8}.mc-tabs__link:focus::before,.mc-tabs__element:focus::before{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc}.mc-tabs__link--selected,.mc-tabs__element--selected{color:#000000}.mc-tabs__link--selected::after,.mc-tabs__element--selected::after{background-color:#000000}.mc-tabs__link--disabled,.mc-tabs__element--disabled{cursor:not-allowed;background-color:#cccccc;pointer-events:none}.mc-tabs__link--disabled,.mc-tabs__link--disabled:hover,.mc-tabs__link--disabled:focus,.mc-tabs__link--disabled:active,.mc-tabs__element--disabled,.mc-tabs__element--disabled:hover,.mc-tabs__element--disabled:focus,.mc-tabs__element--disabled:active{-webkit-box-shadow:none;box-shadow:none}.mc-tabs__text{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:0.25rem;display:-webkit-box;display:-ms-flexbox;display:flex;gap:0.25rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;padding:0.4375rem 0.75rem;pointer-events:none}.mc-tabs__icon{fill:currentColor;height:1.5rem;width:1.5rem}.mc-tabs--full-centered{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-tabs--dropdown{padding:1rem;width:auto}@media screen and (min-width: 680px){.mc-tabs{width:auto}.mc-tabs--full,.mc-tabs--full-centered{width:100%}}@media screen and (max-width: 679px){.mc-tabs:not(.mc-tabs--dropdown)::before{bottom:0.125rem}.mc-tabs__nav{overflow:auto hidden;white-space:nowrap}}',this.shadowRoot.appendChild(l),t(this,{target:this.shadowRoot,props:s(this.attributes),customElement:!0},q,S,n,{align:0,description:1,nodivider:2,tabs:10,type:3,stateless:4,selectedtab:5},null),e&&(e.target&&a(e.target,this,e.anchor),e.props&&(this.$set(e.props),i()))}static get observedAttributes(){return["align","description","nodivider","tabs","type","stateless","selectedtab"]}get align(){return this.$$.ctx[0]}set align(e){this.$$set({align:e}),i()}get description(){return this.$$.ctx[1]}set description(e){this.$$set({description:e}),i()}get nodivider(){return this.$$.ctx[2]}set nodivider(e){this.$$set({nodivider:e}),i()}get tabs(){return this.$$.ctx[10]}set tabs(e){this.$$set({tabs:e}),i()}get type(){return this.$$.ctx[3]}set type(e){this.$$set({type:e}),i()}get stateless(){return this.$$.ctx[4]}set stateless(e){this.$$set({stateless:e}),i()}get selectedtab(){return this.$$.ctx[5]}set selectedtab(e){this.$$set({selectedtab:e}),i()}}export{z as default};
+//# sourceMappingURL=Tabs.js.map

package/public/components/tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/tabs/Tabs.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import type { TabsAlign, TabsItems, TabsType } from './tabs.types';\n  import { EventHandler } from '../../utilities/EventHandler';\n\n  export let align: TabsAlign = 'auto';\n  export let description = 'Tabs';\n  export let nodivider = false;\n  export let tabs: string;\n  export let type: TabsType = 'tabs';\n  export let stateless = false;\n  export let selectedtab: string | undefined;\n  let eventHandler = new EventHandler();\n  let tablist: HTMLElement;\n  $: parsedTabs = tabs ? (JSON.parse(tabs) as TabsItems[]) : [];\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n  function manageTabs(e: Event, tabItem: TabsItems): void {\n    const currentEl = e.target as HTMLElement;\n    if (stateless) {\n      eventHandler.dispatch(\n        'tab-clicked',\n        Object.assign(tabItem, { target: currentEl }),\n      );\n    } else {\n      tablist.querySelectorAll('.mc-tabs__element').forEach((el): void => {\n        el.classList.remove('mc-tabs__element--selected');\n        el.setAttribute('aria-selected', 'false');\n      });\n\n      currentEl.classList.add('mc-tabs__element--selected');\n      currentEl.setAttribute('aria-selected', 'true');\n\n      eventHandler.dispatch(\n        'tab-clicked',\n        Object.assign(tabItem, { target: currentEl }),\n      );\n    }\n  }\n</script>\n\n<div\n  class=\"mc-tabs\n  {align && align === 'full' ? ' mc-tabs--full' : ''}\n  {align && align === 'centered' ? ' mc-tabs--full-centered' : ''}\n  {type ? ` mc-tabs--${type}` : ''}{nodivider ? ' mc-tabs--no-divider' : ''}\"\n  {...attributes}\n>\n  <ul\n    class=\"mc-tabs__nav\"\n    bind:this={tablist}\n    role=\"tablist\"\n    aria-label={description}\n  >\n    {#each parsedTabs as tab, index}\n      <li class=\"mc-tabs__item\" role=\"presentation\">\n        {#if tab.href}\n          {#if !tab.disabled}\n            <a\n              href={tab.href}\n              role=\"tab\"\n              class=\"mc-tabs__element\"\n              class:mc-tabs__element--disabled={tab.disabled}\n              class:mc-tabs__element--selected={stateless\n                ? tab.id == selectedtab\n                : tab.isActive}\n              id={tab.id}\n              aria-selected={tab.isActive ? 'true' : 'false'}\n              on:click={(event) =>\n                manageTabs(event, Object.assign({ index: index }, tab))}\n            >\n              <span class=\"mc-tabs__text\">\n                {tab.text}\n              </span>\n            </a>\n          {:else}\n            <span\n              role=\"tab\"\n              class=\"mc-tabs__element\"\n              class:mc-tabs__element--disabled={tab.disabled}\n              class:mc-tabs__element--selected={stateless\n                ? tab.id == selectedtab\n                : tab.isActive}\n              id={tab.id}\n              aria-selected={tab.isActive ? 'true' : 'false'}\n            >\n              <span class=\"mc-tabs__text\">\n                {tab.text}\n              </span>\n            </span>\n          {/if}\n        {:else}\n          <button\n            role=\"tab\"\n            type=\"button\"\n            class=\"mc-tabs__element\"\n            class:mc-tabs__element--disabled={tab.disabled}\n            class:mc-tabs__element--selected={stateless\n              ? tab.id == selectedtab\n              : tab.isActive}\n            id={tab.id}\n            disabled={tab.disabled}\n            aria-selected={tab.isActive ? 'true' : 'false'}\n            on:click={(event) =>\n              manageTabs(event, Object.assign({ index: index }, tab))}\n          >\n            <span class=\"mc-tabs__text\">\n              {tab.text}\n            </span>\n          </button>\n        {/if}\n      </li>\n    {/each}\n  </ul>\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/all-settings';\n  @import '@mozaic-ds/styles/components/c.tabs';\n</style>\n"],"names":["t_value","ctx","text","attr","button","button_id_value","id","disabled","button_disabled_value","button_aria_selected_value","isActive","toggle_class","insert","target","anchor","append","span","dirty","set_data","t","create_if_block_1","span1","span1_id_value","span1_aria_selected_value","span0","a","a_href_value","href","a_id_value","a_aria_selected_value","create_if_block","li","length","i","div","ul","class","div_class_value","tablist","align","$$props","description","nodivider","tabs","type","stateless","selectedtab","eventHandler","EventHandler","manageTabs","e","tabItem","currentEl","querySelectorAll","forEach","el","classList","remove","setAttribute","add","dispatch","Object","assign","$$invalidate","parsedTabs","JSON","parse","attributes","$$restProps","event","index","tab","$$value"],"mappings":"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"}