@mozaic-ds/web-components 1.0.0-beta.1 → 1.0.0-beta.2

package/dist/components/barchart/BarChart.svelte

@@ -0,0 +1,320 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import {
+    select,
+    scaleBand,
+    scaleLinear,
+    axisBottom,
+    axisLeft,
+    Selection,
+    ScaleBand,
+    ScaleLinear,
+  } from 'd3';
+  import { onMount } from 'svelte';
+  import type { BarData, BarKeyValue, BarMargin } from './bar-chart.types';
+  import { EventHandler } from '../../utilities/EventHandler';
+  import {
+    get_current_component,
+    createEventDispatcher,
+  } from 'svelte/internal';
+
+  export let data = '';
+  let parsedData: BarData[];
+  let subgroups: string[];
+  $: parsedData = data ? (JSON.parse(data) as BarData[]) : [];
+  $: groups = parsedData.map((d: BarData) => 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 scalemin = 0;
+  export let color = '#0B96CC';
+  export let ticknumbers = 4;
+  export let tickleftformat: (d: number, i: number) => string;
+  tickleftformat = (d) => `${d}`;
+  export let tickbottomformat: (d: number, i: number) => string = (d) => `${d}`;
+
+  export let svgs: string;
+  $: parsedSvgs = svgs ? (JSON.parse(svgs) as SVGElement[]) : [];
+
+  export let margins: 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(
+    get_current_component(),
+    createEventDispatcher(),
+  );
+
+  $: 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 getBarKeyValue(d: BarData): BarKeyValue[] {
+    return subgroups.map((key) => ({
+      key: key,
+      value: d[key].value,
+      customtooltip: d[key].customtooltip,
+    }));
+  }
+
+  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([scalemin, scalemax]).range([height, 0]);
+    const xSubgroup = scaleBand()
+      .domain(subgroups)
+      .range([0, x.bandwidth()])
+      .padding(0.05);
+    return { x, y, xSubgroup };
+  }
+
+  function addRectandles(
+    x: ScaleBand<string>,
+    xSubgroup: ScaleBand<string>,
+    y: ScaleLinear<number, number, never>,
+  ) {
+    svg
+      .append('g')
+      .selectAll('g')
+      .data(parsedData)
+      .join('g')
+      .attr('transform', (d) => `translate(${String(x(d.group))}, 0)`)
+      .attr('class', 'bar')
+      .selectAll('rect')
+      .data((d) => getBarKeyValue(d))
+      .join('rect')
+      .attr('x', (d) => xSubgroup(d.key)!)
+      .attr('y', () => y(0))
+      .attr('width', xSubgroup.bandwidth())
+      .attr('height', () => height - y(0))
+      .style('fill', () => color)
+      .style('cursor', 'pointer')
+      .on('mouseout', (_e: MouseEvent, chartEvent: BarKeyValue) => {
+        const others = svg.selectAll('rect').filter(function (arc) {
+          return arc != chartEvent;
+        });
+        others.style('opacity', 1);
+        tooltipData.show = false;
+      })
+      .on('mouseover', (e: MouseEvent, chartEvent: BarKeyValue) => {
+        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();
+        console.log(xSubgroup.bandwidth());
+        tooltipData = {
+          show: true,
+          text: chartEvent.customtooltip
+            ? `${chartEvent.customtooltip}`
+            : `${chartEvent.key} - ${chartEvent.value}`,
+          left: left,
+          top: top - 50,
+          width,
+        };
+      })
+      .on('click', (_e: MouseEvent, chartEvent: BarKeyValue) => {
+        eventHandler.dispatch('bar-clicked', chartEvent);
+      });
+
+    svg
+      .selectAll<SVGElement, BarKeyValue>('rect')
+      .transition()
+      .duration(800)
+      .attr('y', (d) => (+d.value < 0 ? y(0) : y(+d.value)))
+      .attr('height', (d) =>
+        +d.value < 0
+          ? y(+d.value) - y(0)
+          : height - y(+d.value + Number(scalemin)),
+      )
+      .delay((_d, i) => i * 100);
+  }
+
+  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, xSubgroup } = 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')
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+      .call((axisLeft(y) as any).ticks(ticknumbers).tickFormat(tickleftformat))
+      .attr('class', 'y-axis')
+      .attr('stroke-width', '0');
+
+    addRectandles(x, xSubgroup, y);
+  }
+
+  function update() {
+    const width = getChartWidth();
+    chart.querySelector('#svg-chart')?.setAttribute('width', `${width}px`);
+
+    const { x, y, xSubgroup } = getAxes(width);
+    updateAxes(x, y);
+    svg.selectAll('.bar').remove();
+    addRectandles(x, xSubgroup, y);
+  }
+
+  function resize() {
+    if (_data) {
+      const width = getChartWidth();
+      chart.querySelector('#svg-chart')?.setAttribute('width', `${width}px`);
+
+      const { x, y, xSubgroup } = getAxes(width);
+      updateAxes(x, y);
+
+      svg
+        .selectAll('.bar')
+        .data(parsedData)
+        .attr('transform', (d) => `translate(${Number(x(d.group))}, 0)`)
+        .selectAll<SVGElement, BarKeyValue>('rect')
+        .data((d) => getBarKeyValue(d))
+        .attr('x', (d) => xSubgroup(d.key)!)
+        .attr('width', xSubgroup.bandwidth());
+    }
+  }
+
+  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;`}
+  >
+    {tooltipData.text}
+  </div>
+{/if}
+<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';
+
+  .tooltip {
+    height: auto;
+    background-color: $color-grey-700;
+    border-radius: 4px;
+    color: $color-grey-000;
+    text-align: center;
+    padding: $mu050 $mu100;
+    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/dist/components/bottombar/BottomBar.js

@@ -0,0 +1,2 @@
+import{S as e,i as t,a as i,b as d,f as n,s as a,e as r,n as m,h as o,t as s,m as x}from"../../index-c222d0b7.js";function p(e){let t;return{c(){t=r("div"),this.c=m,o(t,"class","ml-container ml-container--fluid mc-bottom-bar"),s(t,"mc-bottom-bar--fixed",e[0])},m(e,i){d(e,t,i)},p(e,[i]){1&i&&s(t,"mc-bottom-bar--fixed",e[0])},i:m,o:m,d(e){e&&x(t)}}}function c(e,t,i){let d,{fixed:n}=t;return e.$$set=e=>{"fixed"in e&&i(1,n=e.fixed)},e.$$.update=()=>{2&e.$$.dirty&&i(0,d=!!n||void 0)},[d,n]}class h extends e{constructor(e){super();const r=document.createElement("style");r.textContent=".ml-container{-webkit-box-sizing:border-box;box-sizing:border-box;margin-right:auto;margin-left:auto;padding-right:1rem;padding-left:1rem;width:100%}@media screen and (min-width: 680px){.ml-container{padding-right:2rem;padding-left:2rem}}@media screen and (min-width: 1024px){.ml-container{padding-right:3rem;padding-left:3rem;max-width:64rem}}@media screen and (min-width: 1280px){.ml-container{padding-right:2rem;padding-left:2rem;max-width:80rem}}@media screen and (min-width: 1920px){.ml-container{padding-right:2.5rem;padding-left:2.5rem;max-width:120rem}}.ml-container--fluid{max-width:none}@media screen and (min-width: 680px){}@media screen and (min-width: 1024px){}@media screen and (min-width: 1280px){}@media screen and (min-width: 1920px){}.mc-bottom-bar{-webkit-box-shadow:0px 1px 5px 0px rgba(25, 25, 25, 0.2);box-shadow:0px 1px 5px 0px rgba(25, 25, 25, 0.2);-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#ffffff;display:-webkit-box;display:-ms-flexbox;display:flex;height:4rem}.mc-bottom-bar--fixed{bottom:0;left:0;position:fixed;right:0;width:100%}",this.shadowRoot.appendChild(r),t(this,{target:this.shadowRoot,props:i(this.attributes),customElement:!0},c,p,a,{fixed:1},null),e&&(e.target&&d(e.target,this,e.anchor),e.props&&(this.$set(e.props),n()))}static get observedAttributes(){return["fixed"]}get fixed(){return this.$$.ctx[1]}set fixed(e){this.$$set({fixed:e}),n()}}export{h as default};
+//# sourceMappingURL=BottomBar.js.map

package/dist/components/bottombar/BottomBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomBar.js","sources":["../../../src/components/bottombar/BottomBar.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  export let fixed: boolean;\n\n  $: isFixed = fixed ? true : undefined;\n</script>\n\n<div\n  class=\"ml-container ml-container--fluid mc-bottom-bar\"\n  class:mc-bottom-bar--fixed={isFixed}\n/>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/layouts/_l.container';\n  @import '@mozaic-ds/styles/components/_c.bottom-bar';\n</style>\n"],"names":["ctx","insert","target","div","anchor","fixed","$$props","isFixed","undefined"],"mappings":"8PAU8BA,EAAO,YAFrCC,EAGCC,EAAAC,EAAAC,6CAD6BJ,EAAO,2DAPxBK,GAAcC,qFAEtBC,IAAUF,QAAeG"}

package/dist/components/bottombar/BottomBar.svelte

@@ -0,0 +1,18 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  export let fixed: boolean;
+
+  $: isFixed = fixed ? true : undefined;
+</script>
+
+<div
+  class="ml-container ml-container--fluid mc-bottom-bar"
+  class:mc-bottom-bar--fixed={isFixed}
+/>
+
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
+  @import '@mozaic-ds/styles/layouts/_l.container';
+  @import '@mozaic-ds/styles/components/_c.bottom-bar';
+</style>

package/dist/components/breadcrumb/Breadcrumb.js

@@ -1,8 +1,8 @@
-import{c as L,a as B,b as M,d as b,f as y,t as f,h,i as j,j as _,g as i,r as a,R as z,l as m,m as p,k as A}from"../../custom-element.js";import{e as D,i as R}from"../../each.js";import{s as g}from"../../attributes.js";var S=y('<li class="mc-breadcrumb__item svelte-1e5yl09"><a><span class="mc-link__label svelte-1e5yl09"> </span></a></li>'),q=y('<nav aria-label="Breadcrumb"><ol class="mc-breadcrumb__container svelte-1e5yl09"></ol></nav>');const F={hash:"svelte-1e5yl09",code:`/**
+import{c as E,a as L,b as B,d as v,f as g,g as i,t as u,j as k,l as M,m as h,r as l,B as z,h as o,i as _,k as A}from"../../custom-element.js";import{e as D,i as S}from"../../each.js";import{s as p}from"../../attributes.js";var q=g('<li class="mc-breadcrumb__item svelte-1m7fbjk"><a><span class="mc-link__label svelte-1m7fbjk"> </span></a></li>'),F=g('<nav aria-label="Breadcrumb"><ol class="mc-breadcrumb__container svelte-1m7fbjk"></ol></nav>');const G={hash:"svelte-1m7fbjk",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-breadcrumb.svelte-1e5yl09 {color:var(--breadcrumb-color-text-standard, #000000);}.mc-breadcrumb__container.svelte-1e5yl09 {list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;flex-wrap:wrap;gap:0.25rem;}.mc-breadcrumb__item.svelte-1e5yl09 {background-position:left center;background-repeat:no-repeat;}.mc-breadcrumb__item.svelte-1e5yl09:not(:first-child) {padding-inline-start:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--breadcrumb-color-icon-standard, %23000000)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M8.22 5.303a.75.75 0 0 1 1.06 0l4.167 4.167a.75.75 0 0 1 0 1.06L9.28 14.698a.75.75 0 1 1-1.06-1.06L11.856 10 8.22 6.364a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");}
-@media screen and (max-width: 679px) {.mc-breadcrumb__item.svelte-1e5yl09:nth-last-child(2) {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--breadcrumb-color-icon-standard, %23000000)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M11.78 5.303a.75.75 0 0 1 0 1.06L8.144 10l3.636 3.637a.75.75 0 0 1-1.06 1.06l-4.167-4.166a.75.75 0 0 1 0-1.061l4.166-4.167a.75.75 0 0 1 1.061 0'/%3E%3C/svg%3E");}.mc-breadcrumb__item.svelte-1e5yl09:not(:nth-last-child(2)) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}
-}.mc-breadcrumb__current.svelte-1e5yl09, .mc-breadcrumb__current.mc-link.svelte-1e5yl09 {cursor:default;text-decoration:none;}.mc-breadcrumb__current.svelte-1e5yl09, .mc-breadcrumb__current.svelte-1e5yl09:active, .mc-breadcrumb__current.svelte-1e5yl09:focus, .mc-breadcrumb__current.svelte-1e5yl09:hover, .mc-breadcrumb__current.svelte-1e5yl09:visited, .mc-breadcrumb__current.mc-link.svelte-1e5yl09, .mc-breadcrumb__current.mc-link.svelte-1e5yl09:active, .mc-breadcrumb__current.mc-link.svelte-1e5yl09:focus, .mc-breadcrumb__current.mc-link.svelte-1e5yl09:hover, .mc-breadcrumb__current.mc-link.svelte-1e5yl09:visited {color:currentcolor;}.mc-breadcrumb--inverse.svelte-1e5yl09 {color:var(--breadcrumb-color-text-inverse, #ffffff);}.mc-breadcrumb--inverse.svelte-1e5yl09 .mc-breadcrumb__item:where(.svelte-1e5yl09):not(:first-child) {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--breadcrumb-color-icon-inverse, %23ffffff)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M8.22 5.303a.75.75 0 0 1 1.06 0l4.167 4.167a.75.75 0 0 1 0 1.06L9.28 14.698a.75.75 0 1 1-1.06-1.06L11.856 10 8.22 6.364a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");}
-@media screen and (max-width: 679px) {.mc-breadcrumb--inverse.svelte-1e5yl09 .mc-breadcrumb__item:where(.svelte-1e5yl09):nth-last-child(2) {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--breadcrumb-color-icon-inverse, %23ffffff)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M11.78 5.303a.75.75 0 0 1 0 1.06L8.144 10l3.636 3.637a.75.75 0 0 1-1.06 1.06l-4.167-4.166a.75.75 0 0 1 0-1.061l4.166-4.167a.75.75 0 0 1 1.061 0'/%3E%3C/svg%3E");}
-}.mc-link.svelte-1e5yl09 {transition:box-shadow 200ms ease;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;min-height:1.5rem;text-decoration:none;color:var(--link-color-text-primary, #000000);font-size:0.875rem;}.mc-link__label.svelte-1e5yl09 {line-height:1.3;}.mc-link__icon.svelte-1e5yl09 {display:block;height:1.25rem;width:1.25rem;flex-shrink:0;fill:currentcolor;}.mc-link.svelte-1e5yl09:hover:not(.mc-link--stand-alone, .mc-link--inline) .mc-link__label:where(.svelte-1e5yl09) {text-decoration:underline;}.mc-link.svelte-1e5yl09:focus {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-link--m.svelte-1e5yl09 {min-height:2rem;font-size:1rem;}.mc-link--secondary.svelte-1e5yl09 {color:var(--link-color-text-secondary, #666666);}.mc-link--accent.svelte-1e5yl09 {color:var(--link-color-text-accent, #117f03);}.mc-link--inverse.svelte-1e5yl09 {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--link-color-text-inverse, #ffffff);}.mc-link--stand-alone.svelte-1e5yl09 {min-height:2rem;font-weight:600;}.mc-link--stand-alone.svelte-1e5yl09 .mc-link__label:where(.svelte-1e5yl09) {border-bottom:1px solid currentColor;}.mc-link--stand-alone.svelte-1e5yl09:hover .mc-link__label:where(.svelte-1e5yl09) {border-color:transparent;}.mc-link--inline.svelte-1e5yl09 {font-weight:inherit;text-decoration:underline;}.mc-link--inline.svelte-1e5yl09 .mc-link__label:where(.svelte-1e5yl09) {line-height:1;}.mc-link--inline.svelte-1e5yl09:hover {text-decoration:none;}`};function G(d,s){B(s,!0),M(d,F);let l=b(s,"appearance",7,"standard"),n=b(s,"links",23,()=>[]);const k=e=>e===n().length-1;function w(e){const r=["mc-link","mc-link--m","mc-link--inline"];return l()&&r.push(`mc-link--${l()}`),e&&r.push("mc-breadcrumb__current"),r.join(" ")}var c=q(),u=i(c);return D(u,21,n,R,(e,r,x)=>{var o=S(),t=i(o),v=i(t),C=i(v,!0);a(v),a(t),a(o),f(E=>{g(t,"href",m(r).href),g(t,"target",m(r).target),p(t,1,E,"svelte-1e5yl09"),A(C,m(r).label)},[()=>z(w(k(x)))]),h(e,o)}),a(u),a(c),f(()=>p(c,1,`mc-breadcrumb mc-breadcrumb--${l()}`,"svelte-1e5yl09")),h(d,c),j({get appearance(){return l()},set appearance(e="standard"){l(e),_()},get links(){return n()},set links(e=[]){n(e),_()}})}customElements.define("m-breadcrumb",L(G,{options:{attribute:"links",reflect:!0,type:"Array"},appearance:{},links:{}},[],[],!0));
+ */.mc-breadcrumb.svelte-1m7fbjk {color:var(--breadcrumb-color-text-standard, #000000);}.mc-breadcrumb__container.svelte-1m7fbjk {list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;flex-wrap:wrap;gap:0.25rem;}.mc-breadcrumb__item.svelte-1m7fbjk {background-position:left center;background-repeat:no-repeat;}.mc-breadcrumb__item.svelte-1m7fbjk:not(:first-child) {padding-inline-start:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--breadcrumb-color-icon-standard, %23000000)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M8.22 5.303a.75.75 0 0 1 1.06 0l4.167 4.167a.75.75 0 0 1 0 1.06L9.28 14.698a.75.75 0 1 1-1.06-1.06L11.856 10 8.22 6.364a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");}
+@media screen and (max-width: 679px) {.mc-breadcrumb__item.svelte-1m7fbjk:nth-last-child(2) {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--breadcrumb-color-icon-standard, %23000000)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M11.78 5.303a.75.75 0 0 1 0 1.06L8.144 10l3.636 3.637a.75.75 0 0 1-1.06 1.06l-4.167-4.166a.75.75 0 0 1 0-1.061l4.166-4.167a.75.75 0 0 1 1.061 0'/%3E%3C/svg%3E");}.mc-breadcrumb__item.svelte-1m7fbjk:not(:nth-last-child(2)) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}
+}.mc-breadcrumb__current.svelte-1m7fbjk, .mc-breadcrumb__current.mc-link.svelte-1m7fbjk {cursor:default;text-decoration:none;}.mc-breadcrumb__current.svelte-1m7fbjk, .mc-breadcrumb__current.svelte-1m7fbjk:active, .mc-breadcrumb__current.svelte-1m7fbjk:focus, .mc-breadcrumb__current.svelte-1m7fbjk:hover, .mc-breadcrumb__current.svelte-1m7fbjk:visited, .mc-breadcrumb__current.mc-link.svelte-1m7fbjk, .mc-breadcrumb__current.mc-link.svelte-1m7fbjk:active, .mc-breadcrumb__current.mc-link.svelte-1m7fbjk:focus, .mc-breadcrumb__current.mc-link.svelte-1m7fbjk:hover, .mc-breadcrumb__current.mc-link.svelte-1m7fbjk:visited {color:currentcolor;}.mc-breadcrumb--inverse.svelte-1m7fbjk {color:var(--breadcrumb-color-text-inverse, #ffffff);}.mc-breadcrumb--inverse.svelte-1m7fbjk .mc-breadcrumb__item:where(.svelte-1m7fbjk):not(:first-child) {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--breadcrumb-color-icon-inverse, %23ffffff)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M8.22 5.303a.75.75 0 0 1 1.06 0l4.167 4.167a.75.75 0 0 1 0 1.06L9.28 14.698a.75.75 0 1 1-1.06-1.06L11.856 10 8.22 6.364a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");}
+@media screen and (max-width: 679px) {.mc-breadcrumb--inverse.svelte-1m7fbjk .mc-breadcrumb__item:where(.svelte-1m7fbjk):nth-last-child(2) {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--breadcrumb-color-icon-inverse, %23ffffff)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M11.78 5.303a.75.75 0 0 1 0 1.06L8.144 10l3.636 3.637a.75.75 0 0 1-1.06 1.06l-4.167-4.166a.75.75 0 0 1 0-1.061l4.166-4.167a.75.75 0 0 1 1.061 0'/%3E%3C/svg%3E");}
+}.mc-link.svelte-1m7fbjk {transition:box-shadow 200ms ease;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;min-height:1.5rem;text-decoration:none;color:var(--link-color-text-primary, #000000);font-size:0.875rem;}.mc-link__label.svelte-1m7fbjk {line-height:1.3;}.mc-link__icon.svelte-1m7fbjk {display:block;height:1.25rem;width:1.25rem;flex-shrink:0;fill:currentcolor;}.mc-link.svelte-1m7fbjk:hover:not(.mc-link--stand-alone, .mc-link--inline) .mc-link__label:where(.svelte-1m7fbjk) {text-decoration:underline;}.mc-link.svelte-1m7fbjk:focus {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-link--m.svelte-1m7fbjk {min-height:2rem;font-size:1rem;}.mc-link--secondary.svelte-1m7fbjk {color:var(--link-color-text-secondary, #666666);}.mc-link--accent.svelte-1m7fbjk {color:var(--link-color-text-accent, #117f03);}.mc-link--inverse.svelte-1m7fbjk {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--link-color-text-inverse, #ffffff);}.mc-link--stand-alone.svelte-1m7fbjk {min-height:2rem;font-weight:var(--link-font-weight, 600);}.mc-link--stand-alone.svelte-1m7fbjk .mc-link__label:where(.svelte-1m7fbjk) {border-bottom:var(--border-s, 1px) solid currentColor;}.mc-link--stand-alone.svelte-1m7fbjk:hover .mc-link__label:where(.svelte-1m7fbjk) {border-color:transparent;}.mc-link--inline.svelte-1m7fbjk {font-weight:inherit;text-decoration:underline;}.mc-link--inline.svelte-1m7fbjk .mc-link__label:where(.svelte-1m7fbjk) {line-height:1;}.mc-link--inline.svelte-1m7fbjk:hover {text-decoration:none;}`};function H(b,m){L(m,!0),B(b,G);let t=v(m,"appearance",7,"standard"),n=v(m,"links",23,()=>[]);const j=e=>e===n().length-1;function w(e){const r=["mc-link","mc-link--m","mc-link--inline"];return t()&&r.push(`mc-link--${t()}`),e&&r.push("mc-breadcrumb__current"),r.join(" ")}var c=F(),d=i(c);return D(d,21,n,S,(e,r,x)=>{var s=q(),a=i(s),f=i(a),y=i(f,!0);l(f),l(a),l(s),u(C=>{p(a,"href",o(r).href),p(a,"target",o(r).target),_(a,1,C,"svelte-1m7fbjk"),A(y,o(r).label)},[()=>z(w(j(x)))]),k(e,s)}),l(d),l(c),u(()=>_(c,1,`mc-breadcrumb mc-breadcrumb--${t()}`,"svelte-1m7fbjk")),k(b,c),M({get appearance(){return t()},set appearance(e="standard"){t(e),h()},get links(){return n()},set links(e=[]){n(e),h()}})}customElements.define("m-breadcrumb",E(H,{options:{attribute:"links",reflect:!0,type:"Array"},appearance:{},links:{}},[],[],!0));
 //# sourceMappingURL=Breadcrumb.js.map

package/dist/components/breadcrumb/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","sources":["../../../src/components/breadcrumb/Breadcrumb.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-breadcrumb',\n    props: {\n      options: { reflect: true, type: 'Array', attribute: 'links' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  interface BreadcrumbLink {\n    label: string;\n    href: string;\n    target: '_blank' | '_self' | '_parent' | '_top' | undefined;\n  }\n\n  interface Props {\n    appearance?: 'standard' | 'inverse';\n    links?: BreadcrumbLink[];\n  }\n\n  let { appearance = 'standard', links = [] }: Props = $props();\n\n  const isLastLink = (index: number) => index === links.length - 1;\n\n  function setClasses(isCurrent: boolean): string {\n    const classes = ['mc-link', 'mc-link--m', 'mc-link--inline'];\n    if (appearance) {\n      classes.push(`mc-link--${appearance}`);\n    }\n    if (isCurrent) {\n      classes.push('mc-breadcrumb__current');\n    }\n    return classes.join(' ');\n  }\n</script>\n\n<nav\n  class={`mc-breadcrumb mc-breadcrumb--${appearance}`}\n  aria-label=\"Breadcrumb\"\n>\n  <ol class=\"mc-breadcrumb__container\">\n    {#each links as link, index (index)}\n      <li class=\"mc-breadcrumb__item\">\n        <a\n          href={link.href}\n          target={link.target}\n          class={setClasses(isLastLink(index))}\n        >\n          <span class=\"mc-link__label\">{link.label}</span>\n        </a>\n      </li>\n    {/each}\n  </ol>\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/breadcrumb';\n  @use '@mozaic-ds/styles/components/link';\n</style>\n"],"names":["appearance","links","$.prop","$$props","isLastLink","index","setClasses","isCurrent","classes","$.each","ol","link","$.set_attribute","a","$.get","$.set_text","text"],"mappings":";;;;;;wvDAqBQ,IAAAA,qBAAa,UAAU,EAAEC,EAAKC,EAAAC,EAAA,QAAA,GAAA,IAAA,CAAA,CAAA,QAE9BC,EAAcC,GAAkBA,IAAUJ,EAAK,EAAC,OAAS,WAEtDK,EAAWC,EAA4B,CACxC,MAAAC,EAAW,CAAA,UAAW,aAAc,iBAAiB,EACvD,OAAAR,EAAU,GACZQ,EAAQ,KAAI,YAAaR,EAAU,CAAA,EAAA,EAEjCO,GACFC,EAAQ,KAAK,wBAAwB,EAEhCA,EAAQ,KAAK,GAAG,CACzB,kBAQSC,OAAAA,EAAAC,EAAA,GAAAT,OAASU,EAAIN,IAAA,wDAGRO,EAAAC,EAAA,OAAAC,EAAAH,CAAI,EAAC,IAAI,EACPC,EAAAC,EAAA,SAAAC,EAAAH,CAAI,EAAC,MAAM,4BAGWI,EAAAC,EAAAF,EAAAH,CAAI,EAAC,KAAK,UAFjCL,EAAWF,EAAWC,CAAK,CAAA,CAAA,mEATHL,EAAU,CAAA,GAAA,gBAAA,CAAA,0DAjB9B,WAAU"}
+{"version":3,"file":"Breadcrumb.js","sources":["../../../src/components/breadcrumb/Breadcrumb.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-breadcrumb',\n    props: {\n      options: { reflect: true, type: 'Array', attribute: 'links' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  interface BreadcrumbLink {\n    label: string;\n    href: string;\n    target: '_blank' | '_self' | '_parent' | '_top' | undefined;\n  }\n\n  interface Props {\n    appearance?: 'standard' | 'inverse';\n    links?: BreadcrumbLink[];\n  }\n\n  let { appearance = 'standard', links = [] }: Props = $props();\n\n  const isLastLink = (index: number) => index === links.length - 1;\n\n  function setClasses(isCurrent: boolean): string {\n    const classes = ['mc-link', 'mc-link--m', 'mc-link--inline'];\n    if (appearance) {\n      classes.push(`mc-link--${appearance}`);\n    }\n    if (isCurrent) {\n      classes.push('mc-breadcrumb__current');\n    }\n    return classes.join(' ');\n  }\n</script>\n\n<nav\n  class={`mc-breadcrumb mc-breadcrumb--${appearance}`}\n  aria-label=\"Breadcrumb\"\n>\n  <ol class=\"mc-breadcrumb__container\">\n    {#each links as link, index (index)}\n      <li class=\"mc-breadcrumb__item\">\n        <a\n          href={link.href}\n          target={link.target}\n          class={setClasses(isLastLink(index))}\n        >\n          <span class=\"mc-link__label\">{link.label}</span>\n        </a>\n      </li>\n    {/each}\n  </ol>\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/breadcrumb';\n  @use '@mozaic-ds/styles/components/link';\n</style>\n"],"names":["appearance","links","$.prop","$$props","isLastLink","index","setClasses","isCurrent","classes","$.each","ol","link","$.set_attribute","$.get","$.set_text","text"],"mappings":";;;;;;kxDAAA,gBAqBQ,IAAAA,qBAAa,UAAU,EAAEC,EAAKC,EAAAC,EAAA,QAAA,GAAA,IAAA,CAAA,CAAA,QAE9BC,EAAcC,GAAkBA,IAAUJ,EAAK,EAAC,OAAS,WAEtDK,EAAWC,EAA4B,CACxC,MAAAC,EAAW,CAAA,UAAW,aAAc,iBAAiB,EACvD,OAAAR,EAAU,GACZQ,EAAQ,KAAI,YAAaR,EAAU,CAAA,EAAA,EAEjCO,GACFC,EAAQ,KAAK,wBAAwB,EAEhCA,EAAQ,KAAK,GAAG,CACzB,kBAQSC,OAAAA,EAAAC,EAAA,GAAAT,OAASU,EAAIN,IAAA,wDAGRO,EAAA,EAAA,OAAAC,EAAAF,CAAI,EAAC,IAAI,EACPC,EAAA,EAAA,SAAAC,EAAAF,CAAI,EAAC,MAAM,4BAGWG,EAAAC,EAAAF,EAAAF,CAAI,EAAC,KAAK,UAFjCL,EAAWF,EAAWC,CAAK,CAAA,CAAA,CAAA,kEATHL,EAAU,CAAA,GAAA,gBAAA,CAAA,0DAjB9B,WAAU,8DAc/B"}

package/dist/components/breadcrumb/Breadcrumb.nested.js

@@ -0,0 +1,2 @@
+import{H as e,i as t,s as l,I as i,c as s,e as x,h as v,j as r,t as c,b as n,k as m,l as a,n as g,m as d,R as o,o as q,q as b,r as f,u as h,d as u,v as p,y as k,x as w}from"../../index-c222d0b7.js";import{E as _}from"../../EventHandler-f7ee47ca.js";function y(e){i(e,"svelte-1gxeqxv",".mc-link.svelte-1gxeqxv.svelte-1gxeqxv{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:inherit;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;line-height:inherit;text-decoration:underline;-webkit-transition:color ease 200ms;transition:color ease 200ms;gap:0.25rem;color:#000000;position:relative;font-size:1rem;line-height:1.375}.mc-link.svelte-1gxeqxv.svelte-1gxeqxv:focus{outline:none}.mc-link.svelte-1gxeqxv.svelte-1gxeqxv:focus::after{-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-link.is-visited.svelte-1gxeqxv.svelte-1gxeqxv,.mc-link.svelte-1gxeqxv.svelte-1gxeqxv:visited{color:#333333}.mc-link.is-hover.svelte-1gxeqxv.svelte-1gxeqxv,.mc-link.svelte-1gxeqxv.svelte-1gxeqxv:hover{color:#666666}.mc-link.is-active.svelte-1gxeqxv.svelte-1gxeqxv,.mc-link.svelte-1gxeqxv.svelte-1gxeqxv:active{color:#333333}.mc-link.is-disabled.svelte-1gxeqxv.svelte-1gxeqxv{color:#e6e6e6;cursor:not-allowed}.mc-link--s.svelte-1gxeqxv.svelte-1gxeqxv{font-size:0.875rem;line-height:1.2857142857}.mc-link--m.svelte-1gxeqxv.svelte-1gxeqxv{font-size:1rem;line-height:1.375}.mc-link.svelte-1gxeqxv.svelte-1gxeqxv::after{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;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease}.mc-link__icon.svelte-1gxeqxv.svelte-1gxeqxv{display:block;height:1rem;fill:currentColor;-ms-flex-negative:0;flex-shrink:0;width:1rem}.mc-link--light.svelte-1gxeqxv.svelte-1gxeqxv{color:#ffffff}.mc-link--light.is-visited.svelte-1gxeqxv.svelte-1gxeqxv,.mc-link--light.svelte-1gxeqxv.svelte-1gxeqxv:visited{color:#cccccc}.mc-link--light.is-hover.svelte-1gxeqxv.svelte-1gxeqxv,.mc-link--light.svelte-1gxeqxv.svelte-1gxeqxv:hover{color:#999999}.mc-link--light.is-active.svelte-1gxeqxv.svelte-1gxeqxv,.mc-link--light.svelte-1gxeqxv.svelte-1gxeqxv:active{color:#cccccc}.mc-link--light.is-disabled.svelte-1gxeqxv.svelte-1gxeqxv{color:#e6e6e6;cursor:not-allowed}.mc-link--primary.svelte-1gxeqxv.svelte-1gxeqxv{color:#188803}.mc-link--primary.is-visited.svelte-1gxeqxv.svelte-1gxeqxv,.mc-link--primary.svelte-1gxeqxv.svelte-1gxeqxv:visited{color:#006902}.mc-link--primary.is-hover.svelte-1gxeqxv.svelte-1gxeqxv,.mc-link--primary.svelte-1gxeqxv.svelte-1gxeqxv:hover{color:#035010}.mc-link--primary.is-active.svelte-1gxeqxv.svelte-1gxeqxv,.mc-link--primary.svelte-1gxeqxv.svelte-1gxeqxv:active{color:#006902}.mc-link--primary.is-disabled.svelte-1gxeqxv.svelte-1gxeqxv{color:#e6e6e6;cursor:not-allowed}.mc-link--primary-02.svelte-1gxeqxv.svelte-1gxeqxv{color:#494f60}.mc-link--primary-02.is-visited.svelte-1gxeqxv.svelte-1gxeqxv,.mc-link--primary-02.svelte-1gxeqxv.svelte-1gxeqxv:visited{color:#343b4c}.mc-link--primary-02.is-hover.svelte-1gxeqxv.svelte-1gxeqxv,.mc-link--primary-02.svelte-1gxeqxv.svelte-1gxeqxv:hover{color:#171b26}.mc-link--primary-02.is-active.svelte-1gxeqxv.svelte-1gxeqxv,.mc-link--primary-02.svelte-1gxeqxv.svelte-1gxeqxv:active{color:#343b4c}.mc-link--primary-02.is-disabled.svelte-1gxeqxv.svelte-1gxeqxv{color:#e6e6e6;cursor:not-allowed}.mc-link--danger.svelte-1gxeqxv.svelte-1gxeqxv{color:#c61112}.mc-link--danger.is-visited.svelte-1gxeqxv.svelte-1gxeqxv,.mc-link--danger.svelte-1gxeqxv.svelte-1gxeqxv:visited{color:#8c0003}.mc-link--danger.is-hover.svelte-1gxeqxv.svelte-1gxeqxv,.mc-link--danger.svelte-1gxeqxv.svelte-1gxeqxv:hover{color:#530000}.mc-link--danger.is-active.svelte-1gxeqxv.svelte-1gxeqxv,.mc-link--danger.svelte-1gxeqxv.svelte-1gxeqxv:active{color:#8c0003}.mc-link--danger.is-disabled.svelte-1gxeqxv.svelte-1gxeqxv{color:#e6e6e6;cursor:not-allowed}@media screen and (min-width: 680px){.mc-link--s\\@from-m.svelte-1gxeqxv.svelte-1gxeqxv{font-size:0.875rem;line-height:1.2857142857}.mc-link--m\\@from-m.svelte-1gxeqxv.svelte-1gxeqxv{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1024px){.mc-link--s\\@from-l.svelte-1gxeqxv.svelte-1gxeqxv{font-size:0.875rem;line-height:1.2857142857}.mc-link--m\\@from-l.svelte-1gxeqxv.svelte-1gxeqxv{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1280px){.mc-link--s\\@from-xl.svelte-1gxeqxv.svelte-1gxeqxv{font-size:0.875rem;line-height:1.2857142857}.mc-link--m\\@from-xl.svelte-1gxeqxv.svelte-1gxeqxv{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1920px){.mc-link--s\\@from-xxl.svelte-1gxeqxv.svelte-1gxeqxv{font-size:0.875rem;line-height:1.2857142857}.mc-link--m\\@from-xxl.svelte-1gxeqxv.svelte-1gxeqxv{font-size:1rem;line-height:1.375}}.mc-breadcrumb.svelte-1gxeqxv.svelte-1gxeqxv{font-family:\"LeroyMerlin\", sans-serif;font-weight:400;color:#191919;padding:0.9375rem 0 0.9375rem 1.125rem}@media screen and (min-width: 360px){.mc-breadcrumb.svelte-1gxeqxv.svelte-1gxeqxv{padding-left:1.25rem}}@media screen and (min-width: 390px){.mc-breadcrumb.svelte-1gxeqxv.svelte-1gxeqxv{padding-left:1.375rem}}@media screen and (min-width: 680px){.mc-breadcrumb.svelte-1gxeqxv.svelte-1gxeqxv{padding-left:2rem}}@media screen and (min-width: 769px){.mc-breadcrumb.svelte-1gxeqxv.svelte-1gxeqxv{padding-left:2.125rem}}@media screen and (min-width: 1024px){.mc-breadcrumb.svelte-1gxeqxv.svelte-1gxeqxv{padding-left:3rem}}@media screen and (min-width: 1280px){.mc-breadcrumb.svelte-1gxeqxv.svelte-1gxeqxv{padding-left:2rem}}@media screen and (min-width: 1440px){.mc-breadcrumb.svelte-1gxeqxv.svelte-1gxeqxv{padding-left:7rem}}@media screen and (min-width: 1680px){.mc-breadcrumb.svelte-1gxeqxv.svelte-1gxeqxv{padding-left:2rem}}@media screen and (min-width: 1920px){.mc-breadcrumb.svelte-1gxeqxv.svelte-1gxeqxv{padding-left:2.5rem}}.mc-breadcrumb__container.svelte-1gxeqxv.svelte-1gxeqxv{list-style:none;margin-left:0;padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:0;margin-top:0}.mc-breadcrumb__item.svelte-1gxeqxv.svelte-1gxeqxv{padding-right:0.5rem;background-position:left center;background-repeat:no-repeat;background-size:1rem}@media screen and (min-width: 1024px){.mc-breadcrumb__item.svelte-1gxeqxv.svelte-1gxeqxv{-ms-flex-negative:0;flex-shrink:0}}.mc-breadcrumb__item.svelte-1gxeqxv.svelte-1gxeqxv:not(:first-child){background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' viewBox='0 0 16 16' fill='%23333333'%3E%3Cpath d='M5.5 14a1 1 0 01-.71-.29 1 1 0 010-1.42L9.09 8l-4.3-4.29a1 1 0 011.42-1.42l5 5a1 1 0 010 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\");padding-left:1.5rem}@media screen and (max-width: 1023px){.mc-breadcrumb__item.is-active.svelte-1gxeqxv.svelte-1gxeqxv,.mc-breadcrumb__item.svelte-1gxeqxv.svelte-1gxeqxv:only-child{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' viewBox='0 0 16 16' fill='%23333333'%3E%3Cpath d='M10.5 14a1 1 0 01-.71-.29l-5-5a1 1 0 010-1.42l5-5a1 1 0 111.42 1.42L6.91 8l4.3 4.29a1 1 0 010 1.42 1 1 0 01-.71.29z'/%3E%3C/svg%3E\");padding-left:1.5rem}}.mc-breadcrumb__current.svelte-1gxeqxv.svelte-1gxeqxv,.mc-breadcrumb__current.mc-link.svelte-1gxeqxv.svelte-1gxeqxv{cursor:default;text-decoration:none}.mc-breadcrumb__current.svelte-1gxeqxv.svelte-1gxeqxv,.mc-breadcrumb__current.svelte-1gxeqxv.svelte-1gxeqxv:active,.mc-breadcrumb__current.svelte-1gxeqxv.svelte-1gxeqxv:focus,.mc-breadcrumb__current.svelte-1gxeqxv.svelte-1gxeqxv:hover,.mc-breadcrumb__current.svelte-1gxeqxv.svelte-1gxeqxv:visited,.mc-breadcrumb__current.mc-link.svelte-1gxeqxv.svelte-1gxeqxv,.mc-breadcrumb__current.mc-link.svelte-1gxeqxv.svelte-1gxeqxv:active,.mc-breadcrumb__current.mc-link.svelte-1gxeqxv.svelte-1gxeqxv:focus,.mc-breadcrumb__current.mc-link.svelte-1gxeqxv.svelte-1gxeqxv:hover,.mc-breadcrumb__current.mc-link.svelte-1gxeqxv.svelte-1gxeqxv:visited{color:currentColor}.mc-breadcrumb--dark.svelte-1gxeqxv.svelte-1gxeqxv{background-color:#4d4d4d;color:#ffffff}.mc-breadcrumb--dark.svelte-1gxeqxv .mc-breadcrumb__item.svelte-1gxeqxv:not(:first-child){background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M5.5 14a1 1 0 01-.71-.29 1 1 0 010-1.42L9.09 8l-4.3-4.29a1 1 0 011.42-1.42l5 5a1 1 0 010 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\")}@media screen and (max-width: 1023px){.mc-breadcrumb--dark.svelte-1gxeqxv .mc-breadcrumb__item.is-active.svelte-1gxeqxv,.mc-breadcrumb--dark.svelte-1gxeqxv .mc-breadcrumb__item.svelte-1gxeqxv:only-child{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M10.5 14a1 1 0 01-.71-.29l-5-5a1 1 0 010-1.42l5-5a1 1 0 111.42 1.42L6.91 8l4.3 4.29a1 1 0 010 1.42 1 1 0 01-.71.29z'/%3E%3C/svg%3E\")}}@media screen and (max-width: 1023px){.mc-breadcrumb--responsive.svelte-1gxeqxv .mc-breadcrumb__item.svelte-1gxeqxv:not(.is-active){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;visibility:visible;white-space:nowrap}}.mc-breadcrumb--no-padding.svelte-1gxeqxv.svelte-1gxeqxv{padding-left:0}")}function z(e,t,l){const i=e.slice();return i[12]=t[l],i[14]=l,i}function C(e){let t,l,i,s=e[12].text+"";return{c(){t=x("span"),l=p(s),v(t,"class",i="mc-link mc-link--s mc-breadcrumb__current"+(e[0]?" mc-link--light":"")+" svelte-1gxeqxv")},m(e,i){n(e,t,i),m(t,l)},p(e,x){32&x&&s!==(s=e[12].text+"")&&k(l,s),1&x&&i!==(i="mc-link mc-link--s mc-breadcrumb__current"+(e[0]?" mc-link--light":"")+" svelte-1gxeqxv")&&v(t,"class",i)},d(e){e&&d(t)}}}function E(e){let t,l,i,s,r,c,a=e[12].text+"";function g(){return e[9](e[12])}return{c(){t=x("a"),l=p(a),v(t,"href",i=e[12].href),v(t,"class",s="mc-link mc-link--s"+(e[0]?" mc-link--light":"")+" svelte-1gxeqxv")},m(e,i){n(e,t,i),m(t,l),r||(c=w(t,"click",g),r=!0)},p(x,r){e=x,32&r&&a!==(a=e[12].text+"")&&k(l,a),32&r&&i!==(i=e[12].href)&&v(t,"href",i),1&r&&s!==(s="mc-link mc-link--s"+(e[0]?" mc-link--light":"")+" svelte-1gxeqxv")&&v(t,"class",s)},d(e){e&&d(t),r=!1,c()}}}function $(e){let t,l,i;function s(e,t){return e[14]!==e[5].length-1?E:C}let r=s(e),c=r(e);return{c(){t=x("li"),c.c(),l=u(),v(t,"class",i="mc-breadcrumb__item"+(e[12].isActive?" is-active":"")+" svelte-1gxeqxv")},m(e,i){n(e,t,i),c.m(t,null),m(t,l)},p(e,x){r===(r=s(e))&&c?c.p(e,x):(c.d(1),c=r(e),c&&(c.c(),c.m(t,l))),32&x&&i!==(i="mc-breadcrumb__item"+(e[12].isActive?" is-active":"")+" svelte-1gxeqxv")&&v(t,"class",i)},d(e){e&&d(t),c.d()}}}function B(e){let t,l,i,q=e[5],b=[];for(let t=0;t<q.length;t+=1)b[t]=$(z(e,q,t));let f=[{class:i="mc-breadcrumb "+(e[1]?" mc-breadcrumb--responsive":"")+(e[0]?" mc-breadcrumb--dark":"")+" "+e[3]},{"aria-label":"Breadcrumb"},e[2]],h={};for(let e=0;e<f.length;e+=1)h=s(h,f[e]);return{c(){t=x("nav"),l=x("ul");for(let e=0;e<b.length;e+=1)b[e].c();v(l,"class","mc-breadcrumb__container svelte-1gxeqxv"),r(t,h),c(t,"mc-breadcrumb--no-padding",e[4]),c(t,"svelte-1gxeqxv",!0)},m(e,i){n(e,t,i),m(t,l);for(let e=0;e<b.length;e+=1)b[e]&&b[e].m(l,null)},p(e,[s]){if(97&s){let t;for(q=e[5],t=0;t<q.length;t+=1){const i=z(e,q,t);b[t]?b[t].p(i,s):(b[t]=$(i),b[t].c(),b[t].m(l,null))}for(;t<b.length;t+=1)b[t].d(1);b.length=q.length}r(t,h=a(f,[11&s&&i!==(i="mc-breadcrumb "+(e[1]?" mc-breadcrumb--responsive":"")+(e[0]?" mc-breadcrumb--dark":"")+" "+e[3])&&{class:i},{"aria-label":"Breadcrumb"},4&s&&e[2]])),c(t,"mc-breadcrumb--no-padding",e[4]),c(t,"svelte-1gxeqxv",!0)},i:g,o:g,d(e){e&&d(t),o(b,e)}}}function j(e,t,l){let i,x,v,r;const c=["items","dark","responsive","nopadding"];let n=q(t,c),{items:m}=t,{dark:a=!1}=t,{responsive:g=!1}=t,{nopadding:d=!1}=t,o=new _(b(),f());return e.$$set=e=>{l(11,t=s(s({},t),h(e))),l(10,n=q(t,c)),"items"in e&&l(7,m=e.items),"dark"in e&&l(0,a=e.dark),"responsive"in e&&l(1,g=e.responsive),"nopadding"in e&&l(8,d=e.nopadding)},e.$$.update=()=>{128&e.$$.dirty&&l(5,i=m?JSON.parse(m):[]),256&e.$$.dirty&&l(4,x=d&&"false"!==d),l(3,v=t.class),l(2,r=Object.assign({},n)),4&e.$$.dirty&&delete r.class},t=h(t),[a,g,r,v,x,i,o,m,d,e=>o.dispatch("link-clicked",e)]}class L extends e{constructor(e){super(),t(this,e,j,B,l,{items:7,dark:0,responsive:1,nopadding:8},y)}}export{L as default};
+//# sourceMappingURL=Breadcrumb.nested.js.map

package/dist/components/breadcrumb/Breadcrumb.nested.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.nested.js","sources":["../../../src/components/breadcrumb/Breadcrumb.nested.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import type { BreadcrumbItems } from './breadcrumb.types';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import {\n    get_current_component,\n    createEventDispatcher,\n  } from 'svelte/internal';\n\n  export let items: string;\n  export let dark = false;\n  export let responsive = false;\n  export let nopadding: boolean | string = false;\n  let eventHandler = new EventHandler(\n    get_current_component(),\n    createEventDispatcher(),\n  );\n\n  $: parseItems = items ? (JSON.parse(items) as BreadcrumbItems[]) : [];\n  $: noPadding = nopadding && nopadding !== 'false';\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n</script>\n\n<nav\n  class=\"mc-breadcrumb {responsive ? ' mc-breadcrumb--responsive' : ''}{dark\n    ? ' mc-breadcrumb--dark'\n    : ''} {userClass}\"\n  class:mc-breadcrumb--no-padding={noPadding}\n  aria-label=\"Breadcrumb\"\n  {...attributes}\n>\n  <ul class=\"mc-breadcrumb__container\">\n    {#each parseItems as item, i}\n      <li class=\"mc-breadcrumb__item{item.isActive ? ' is-active' : ''}\">\n        {#if i !== parseItems.length - 1}\n          <a\n            href={item.href}\n            class=\"mc-link mc-link--s{dark ? ' mc-link--light' : ''}\"\n            on:click={() => eventHandler.dispatch('link-clicked', item)}\n          >\n            {item.text}\n          </a>\n        {:else}\n          <span\n            class=\"mc-link mc-link--s mc-breadcrumb__current{dark\n              ? ' mc-link--light'\n              : ''}\"\n          >\n            {item.text}\n          </span>\n        {/if}\n      </li>\n    {/each}\n  </ul>\n</nav>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/_c.links';\n  @import '@mozaic-ds/styles/components/_c.breadcrumb';\n</style>\n"],"names":["t_value","ctx","text","insert","target","span","anchor","dirty","set_data","t","attr","a","a_href_value","href","length","create_if_block","li","li_class_value","isActive","i","nav","append","ul","class","nav_class_value","items","$$props","dark","responsive","nopadding","eventHandler","EventHandler","get_current_component","createEventDispatcher","$$invalidate","parseItems","JSON","parse","noPadding","userClass","attributes","Object","assign","$$restProps","item","dispatch"],"mappings":"4mTAmDaA,EAAAC,MAAKC,KAAI,4FAJuCD,EAAA,GAC7C,kBACA,IAAE,2BAHRE,EAMMC,EAAAC,EAAAC,kBADH,GAAAC,GAAAP,KAAAA,EAAAC,MAAKC,KAAI,KAAAM,EAAAC,EAAAT,4DAJuCC,EAAA,GAC7C,kBACA,IAAE,iFANLD,EAAAC,MAAKC,KAAI,8DAJJQ,EAAAC,EAAA,OAAAC,EAAAX,MAAKY,0CACeZ,EAAI,GAAG,kBAAoB,IAAE,2BAFzDE,EAMGC,EAAAO,EAAAL,iDADA,GAAAC,GAAAP,KAAAA,EAAAC,MAAKC,KAAI,KAAAM,EAAAC,EAAAT,GAJJ,GAAAO,GAAAK,KAAAA,EAAAX,MAAKY,uDACeZ,EAAI,GAAG,kBAAoB,IAAE,oGAHtD,OAAAA,EAAM,MAAAA,EAAW,GAAAa,OAAS,EAACC,uDADHL,EAAAM,EAAA,QAAAC,EAAA,uBAAAhB,EAAK,IAAAiB,SAAW,aAAe,IAAE,2BAAhEf,EAkBIC,EAAAY,EAAAV,2FAlB2B,GAAAC,GAAAU,KAAAA,EAAA,uBAAAhB,EAAK,IAAAiB,SAAW,aAAe,IAAE,mFAD3DjB,EAAU,wBAAfa,OAAIK,GAAA,qDARclB,EAAU,GAAG,6BAA+B,KAAIA,EAAA,GAClE,uBACA,QAAKA,EAAS,gCAGdA,EAAU,oNAFmBA,EAAS,qCAJ5CE,EA+BKC,EAAAgB,EAAAd,GAvBHe,EAsBID,EAAAE,mFArBKrB,EAAU,WAAfa,OAAIK,GAAA,EAAA,iHAAJL,iDARkBb,EAAU,GAAG,6BAA+B,KAAIA,EAAA,GAClE,uBACA,QAAKA,EAAS,KAAA,CAAAsB,MAAAC,oCAGdvB,EAAU,sCAFmBA,EAAS,gKApB/BwB,GAAaC,GACbC,KAAAA,GAAO,GAAKD,GACZE,WAAAA,GAAa,GAAKF,GAClBG,UAAAA,GAA8B,GAAKH,EAC1CI,EAAmB,IAAAC,EACrBC,IACAC,iOAGDC,EAAA,EAAEC,EAAaV,EAASW,KAAKC,MAAMZ,GAAK,wBACtCa,EAAYT,GAA2B,UAAdA,GACzBK,EAAA,EAAAK,EAAYb,EAAQH,WACpBiB,EAALC,OAAAC,UAAuBC,yBACXH,EAAWjB,iCAkBKqB,GAAAd,EAAae,SAAS,eAAgBD"}

package/dist/components/breadcrumb/Breadcrumb.nested.svelte

@@ -0,0 +1,64 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import type { BreadcrumbItems } from './breadcrumb.types';
+  import { EventHandler } from '../../utilities/EventHandler';
+  import {
+    get_current_component,
+    createEventDispatcher,
+  } from 'svelte/internal';
+
+  export let items: string;
+  export let dark = false;
+  export let responsive = false;
+  export let nopadding: boolean | string = false;
+  let eventHandler = new EventHandler(
+    get_current_component(),
+    createEventDispatcher(),
+  );
+
+  $: parseItems = items ? (JSON.parse(items) as BreadcrumbItems[]) : [];
+  $: noPadding = nopadding && nopadding !== 'false';
+  $: userClass = $$props.class;
+  $: attributes = { ...$$restProps };
+  $: delete attributes.class;
+</script>
+
+<nav
+  class="mc-breadcrumb {responsive ? ' mc-breadcrumb--responsive' : ''}{dark
+    ? ' mc-breadcrumb--dark'
+    : ''} {userClass}"
+  class:mc-breadcrumb--no-padding={noPadding}
+  aria-label="Breadcrumb"
+  {...attributes}
+>
+  <ul class="mc-breadcrumb__container">
+    {#each parseItems as item, i}
+      <li class="mc-breadcrumb__item{item.isActive ? ' is-active' : ''}">
+        {#if i !== parseItems.length - 1}
+          <a
+            href={item.href}
+            class="mc-link mc-link--s{dark ? ' mc-link--light' : ''}"
+            on:click={() => eventHandler.dispatch('link-clicked', item)}
+          >
+            {item.text}
+          </a>
+        {:else}
+          <span
+            class="mc-link mc-link--s mc-breadcrumb__current{dark
+              ? ' mc-link--light'
+              : ''}"
+          >
+            {item.text}
+          </span>
+        {/if}
+      </li>
+    {/each}
+  </ul>
+</nav>
+
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
+  @import '@mozaic-ds/styles/components/_c.links';
+  @import '@mozaic-ds/styles/components/_c.breadcrumb';
+</style>