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

package/dist/components/linechart/LineChart.svelte

@@ -0,0 +1,329 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import {
+    select,
+    line,
+    axisLeft,
+    symbolSquare,
+    symbolCircle,
+    symbolTriangle,
+    axisBottom,
+    timeParse,
+    scaleLinear,
+    Selection,
+    symbol,
+    extent,
+    scaleTime,
+    timeDay,
+    ScaleTime,
+    Axis,
+    NumberValue,
+    ScaleLinear,
+  } from 'd3';
+  import type { LineData, LinePoint, SymbolType } from './line-chart.types';
+  import { EventHandler } from '../../utilities/EventHandler';
+  import {
+    get_current_component,
+    createEventDispatcher,
+  } from 'svelte/internal';
+
+  export let data = '';
+  export let backgroundcolor = '#fff';
+  export let height = 300;
+  export let ticknumbers = 5;
+
+  const parseTime = timeParse('%d-%m-%Y');
+
+  let _data: string;
+  let hasMounted = false;
+  let eventHandler = new EventHandler(
+    get_current_component(),
+    createEventDispatcher(),
+  );
+  let parsedData: LineData[];
+
+  $: parsedData = data ? (JSON.parse(data) as LineData[]) : ([] as LineData[]);
+  $: if (data.length > 0 && hasMounted) {
+    if (!_data) {
+      render();
+      _data = data;
+    } else if (data !== _data) {
+      updateAxes(parsedData);
+      parsedData.forEach((data, i) => updateLine(data, i));
+      _data = data;
+    }
+  }
+
+  let chart: HTMLDivElement;
+  let svg: Selection<SVGGElement, LinePoint, any, any>;
+
+  let x: ScaleTime<number, number, never>,
+    y: ScaleLinear<number, number, never>,
+    xAxis: Axis<Date | NumberValue>,
+    yAxis: Axis<number | NumberValue>,
+    linesD3: Selection<SVGPathElement, LinePoint, any, any>[] = [];
+
+  const margin = { top: 20, right: 40, bottom: 40, left: 60, yAxisPadding: 20 };
+  let tooltipData = {
+    date: '',
+    value: 0,
+    show: false,
+    customtooltip: '',
+  };
+
+  function getChartWidth() {
+    let chartWidth = select(chart).style('width');
+    if (chartWidth === '' || !chartWidth) {
+      chartWidth = `${window.innerWidth / 2}`;
+    }
+    return parseInt(chartWidth);
+  }
+
+  function appendSymbols(
+    data: LinePoint[],
+    color: string,
+    symbolType: SymbolType,
+    i: number,
+  ) {
+    let symbolPath = symbol(symbolSquare);
+    switch (symbolType) {
+      case 'circle':
+        symbolPath = symbol(symbolCircle);
+        break;
+      case 'triangle':
+        symbolPath = symbol(symbolTriangle);
+        break;
+    }
+
+    svg
+      .selectAll()
+      .data(data)
+      .join('path')
+      .attr('d', symbolPath.size(50))
+      .attr('opacity', 1)
+      .attr(
+        'transform',
+        (d) => `translate(${x(+d.time) + margin.yAxisPadding},${y(+d.value)})`,
+      )
+      .attr('class', `chart__symbol-line-${i}`)
+      .style('fill', color)
+      .style('cursor', 'pointer')
+      .on('mouseover', handleTickMouseOver)
+      .on('mouseout', () => (tooltipData.show = false))
+      .on('click', (_e: MouseEvent, point: LinePoint) => {
+        eventHandler.dispatch('point-clicked', point);
+      });
+  }
+
+  function handleTickMouseOver(_e: MouseEvent, point: LinePoint): void {
+    const date = new Date(point.time).toDateString();
+    const value = point.value;
+    tooltipData = {
+      date,
+      value: parseInt(value),
+      show: true,
+      customtooltip: point.customtooltip,
+    };
+  }
+
+  function updatePath(
+    lineD3: Selection<SVGPathElement, LinePoint, any, any>,
+    points: LinePoint[],
+    color: string,
+    strokeDasharray?: number,
+  ) {
+    lineD3
+      .datum(points)
+      .attr(
+        'd',
+        line<LinePoint>()
+          .x((d) => x(+d.time))
+          .y((d) => y(+d.value)),
+      )
+      .attr('stroke', color)
+      .style('stroke-width', 2.5)
+      .style('fill', 'none')
+      .attr('transform', `translate(${margin.yAxisPadding},0)`)
+      .attr('stroke-dasharray', strokeDasharray || 0);
+  }
+
+  function updateAxes(data: LineData[]) {
+    const width = getChartWidth();
+    const mergedLineData = data.flatMap((d) => d.points);
+    const [yMin = 0, yMax = 0] = extent(mergedLineData, (d) => Number(d.value));
+    const xDomain = extent(mergedLineData, (d) => parseTime(d.time as string));
+    x.domain(xDomain as Iterable<Date | NumberValue>);
+    svg
+      .selectAll('.x-axis')
+      .attr(
+        'transform',
+        `translate(${margin.yAxisPadding},${height + margin.bottom / 2})`,
+      )
+      .call(xAxis as any)
+      .attr('stroke-width', '0');
+
+    y.domain([yMin, yMax]);
+    svg
+      .selectAll('.y-axis')
+      .call(yAxis as any)
+      .select('.domain')
+      .attr('stroke-width', '0');
+
+    svg
+      .selectAll('.y-axis .tick line')
+      .attr('x1', margin.yAxisPadding / 2)
+      .attr('x2', width - margin.left)
+      .attr('stroke', '#EEEDEA')
+      .attr('stroke-width', '1.4px');
+  }
+
+  function render(resize?: boolean) {
+    const width = getChartWidth();
+
+    x = scaleTime().range([0, width - margin.left - margin.right]);
+    xAxis = axisBottom(x)
+      .tickSize(0)
+      .ticks(timeDay)
+      .ticks(ticknumbers)
+      .tickPadding(5);
+
+    y = scaleLinear().range([height, 0]);
+    yAxis = axisLeft(y).ticks(ticknumbers);
+
+    if (!resize) {
+      svg = select<HTMLElement, LinePoint>(chart)
+        .append('svg')
+        .attr('width', width)
+        .attr('height', height + margin.top + margin.bottom)
+        .attr('id', 'svg-chart')
+        .append('g')
+        .attr(
+          'transform',
+          `translate(${margin.left / 2 + margin.right / 2},${margin.top})`,
+        );
+
+      svg
+        .append('g')
+        .attr('transform', 'translate(0,' + String(height) + ')')
+        .attr('class', 'x-axis');
+      svg.append('g').attr('class', 'y-axis');
+    }
+
+    updateAxes(parsedData);
+    parsedData.forEach((data, i) => {
+      if (!resize) {
+        linesD3.push(svg.append('g').append('path'));
+      }
+      updateLine(data, i);
+    });
+  }
+
+  function updateLine(data: LineData, i: number) {
+    const points = data.points.map((d) => ({
+      time: parseTime(d.time as string) || '',
+      value: d.value,
+      customtooltip: d.customtooltip,
+    }));
+    updatePath(linesD3[i], points, data.color, data.strokeDasharray);
+    svg.selectAll(`.chart__symbol-line-${i}`).remove();
+    appendSymbols(points, data.color, data.symbol, i);
+  }
+
+  function resize() {
+    if (_data && hasMounted) {
+      const width = getChartWidth();
+      chart.querySelector('#svg-chart')?.setAttribute('width', `${width}px`);
+      render(true);
+    }
+  }
+
+  onMount(() => {
+    const resizeObserver = new ResizeObserver(resize);
+    resizeObserver.observe(chart);
+    hasMounted = true;
+  });
+</script>
+
+<div
+  bind:this={chart}
+  class="chart"
+  style="background-color: {backgroundcolor};"
+>
+  {#if tooltipData.show}
+    <div
+      class="tooltip"
+      style={`right: ${margin.right}px; top: ${margin.top}px;`}
+    >
+      {#if tooltipData.customtooltip}
+        {tooltipData.customtooltip}
+      {:else}
+        {tooltipData.date}: <b>{tooltipData.value}</b>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<div class="legend">
+  {#each parsedData as d}
+    <div class="legend__item">
+      <svg class="legend__box">
+        <rect x="0" y="0" width="24" height="16" fill={d.color} />
+      </svg>
+      <span class="legend__title">{d.title}</span>
+    </div>
+  {/each}
+</div>
+
+<text style="display: none;" />
+
+<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;
+    }
+  }
+
+  text {
+    font-family: 'LeroyMerlin', sans-serif;
+    font-size: 14px;
+    color: #555550;
+  }
+
+  .tooltip {
+    background-color: $color-grey-700;
+    border-radius: 4px;
+    color: $color-grey-000;
+    text-align: center;
+    padding: magic-unit-rem(0.5) magic-unit-rem(1);
+    top: 0;
+    position: absolute;
+  }
+</style>

package/dist/components/link/Link.js

@@ -1,4 +1,4 @@
-import{c as S,a as A,b as B,d as i,f as b,w as F,s as w,g as c,h as g,i as G,j as a,r as v}from"../../custom-element.js";import{i as y}from"../../if.js";import{s as p}from"../../slot.js";import{b as H}from"../../attributes.js";var I=b('<span class="mc-link__icon svelte-8v9qua"><!></span>'),J=b('<span class="mc-link__icon svelte-8v9qua"><!></span>'),K=b('<a><!> <span class="mc-link__label svelte-8v9qua"><!></span> <!></a>');const M={hash:"svelte-8v9qua",code:`/**
+import{c as q,a as A,b as B,d as t,f as g,x as F,s as y,g as c,j as x,l as G,m as i,r as f}from"../../custom-element.js";import{i as z}from"../../if.js";import{s as _}from"../../slot.js";import{b as H}from"../../attributes.js";var I=g('<span class="mc-link__icon svelte-nebcxl"><!></span>'),J=g('<span class="mc-link__icon svelte-nebcxl"><!></span>'),K=g('<a><!> <span class="mc-link__label svelte-nebcxl"><!></span> <!></a>');const M={hash:"svelte-nebcxl",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-link.svelte-8v9qua {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-8v9qua {line-height:1.3;}.mc-link__icon.svelte-8v9qua {display:block;height:1.25rem;width:1.25rem;flex-shrink:0;fill:currentcolor;}.mc-link.svelte-8v9qua:hover:not(.mc-link--stand-alone, .mc-link--inline) .mc-link__label:where(.svelte-8v9qua) {text-decoration:underline;}.mc-link.svelte-8v9qua: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-8v9qua {min-height:2rem;font-size:1rem;}.mc-link--secondary.svelte-8v9qua {color:var(--link-color-text-secondary, #666666);}.mc-link--accent.svelte-8v9qua {color:var(--link-color-text-accent, #117f03);}.mc-link--inverse.svelte-8v9qua {--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-8v9qua {min-height:2rem;font-weight:600;}.mc-link--stand-alone.svelte-8v9qua .mc-link__label:where(.svelte-8v9qua) {border-bottom:1px solid currentColor;}.mc-link--stand-alone.svelte-8v9qua:hover .mc-link__label:where(.svelte-8v9qua) {border-color:transparent;}.mc-link--inline.svelte-8v9qua {font-weight:inherit;text-decoration:underline;}.mc-link--inline.svelte-8v9qua .mc-link__label:where(.svelte-8v9qua) {line-height:1;}.mc-link--inline.svelte-8v9qua:hover {text-decoration:none;}`};function N(q,n){A(n,!0),B(q,M);let u=i(n,"href",7),f=i(n,"target",7),m=i(n,"appearance",7,void 0),d=i(n,"disabled",7,!1),h=i(n,"size",7,"m"),k=i(n,"inline",7,!1),o=i(n,"iconposition",7,void 0),z=F(n,["$$slots","$$events","$$legacy","$$host","href","target","appearance","disabled","size","inline","iconposition"]);function j(e,t,l){const s=["mc-link"];return e&&s.push(`mc-link--${e}`),t&&s.push(`mc-link--${t}`),l?s.push("mc-link--inline"):s.push("mc-link--stand-alone"),s.join(" ")}var r=K();H(r,e=>({href:u(),target:f(),class:`${e??""} ${d()?"is-disabled":""} `,...z}),[()=>j(m(),h(),k())],"svelte-8v9qua");var x=c(r);{var C=e=>{var t=I(),l=c(t);p(l,n,"icon",{}),v(t),g(e,t)};y(x,e=>{o()==="left"&&e(C)})}var _=w(x,2),D=c(_);p(D,n,"default",{}),v(_);var E=w(_,2);{var L=e=>{var t=J(),l=c(t);p(l,n,"icon",{}),v(t),g(e,t)};y(E,e=>{o()==="right"&&e(L)})}return v(r),g(q,r),G({get href(){return u()},set href(e){u(e),a()},get target(){return f()},set target(e){f(e),a()},get appearance(){return m()},set appearance(e=void 0){m(e),a()},get disabled(){return d()},set disabled(e=!1){d(e),a()},get size(){return h()},set size(e="m"){h(e),a()},get inline(){return k()},set inline(e=!1){k(e),a()},get iconposition(){return o()},set iconposition(e=void 0){o(e),a()}})}customElements.define("m-link",S(N,{href:{},target:{},appearance:{},disabled:{},size:{},inline:{},iconposition:{}},["icon","default"],[],!0));
+ */.mc-link.svelte-nebcxl {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-nebcxl {line-height:1.3;}.mc-link__icon.svelte-nebcxl {display:block;height:1.25rem;width:1.25rem;flex-shrink:0;fill:currentcolor;}.mc-link.svelte-nebcxl:hover:not(.mc-link--stand-alone, .mc-link--inline) .mc-link__label:where(.svelte-nebcxl) {text-decoration:underline;}.mc-link.svelte-nebcxl: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-nebcxl {min-height:2rem;font-size:1rem;}.mc-link--secondary.svelte-nebcxl {color:var(--link-color-text-secondary, #666666);}.mc-link--accent.svelte-nebcxl {color:var(--link-color-text-accent, #117f03);}.mc-link--inverse.svelte-nebcxl {--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-nebcxl {min-height:2rem;font-weight:var(--link-font-weight, 600);}.mc-link--stand-alone.svelte-nebcxl .mc-link__label:where(.svelte-nebcxl) {border-bottom:var(--border-s, 1px) solid currentColor;}.mc-link--stand-alone.svelte-nebcxl:hover .mc-link__label:where(.svelte-nebcxl) {border-color:transparent;}.mc-link--inline.svelte-nebcxl {font-weight:inherit;text-decoration:underline;}.mc-link--inline.svelte-nebcxl .mc-link__label:where(.svelte-nebcxl) {line-height:1;}.mc-link--inline.svelte-nebcxl:hover {text-decoration:none;}`};function N(p,n){A(n,!0),B(p,M);let m=t(n,"href",7),d=t(n,"target",7),v=t(n,"appearance",7,void 0),u=t(n,"disabled",7,!1),b=t(n,"size",7,"m"),h=t(n,"inline",7,!1),r=t(n,"iconposition",7,void 0),j=F(n,["$$slots","$$events","$$legacy","$$host","href","target","appearance","disabled","size","inline","iconposition"]);function C(e,l,s){const o=["mc-link"];return e&&o.push(`mc-link--${e}`),l&&o.push(`mc-link--${l}`),s?o.push("mc-link--inline"):o.push("mc-link--stand-alone"),o.join(" ")}var a=K();H(a,e=>({href:m(),target:d(),class:`${e??""} ${u()?"is-disabled":""} `,...j}),[()=>C(v(),b(),h())],void 0,"svelte-nebcxl");var w=c(a);{var D=e=>{var l=I(),s=c(l);_(s,n,"icon",{}),f(l),x(e,l)};z(w,e=>{r()==="left"&&e(D)})}var k=y(w,2),E=c(k);_(E,n,"default",{}),f(k);var L=y(k,2);{var S=e=>{var l=J(),s=c(l);_(s,n,"icon",{}),f(l),x(e,l)};z(L,e=>{r()==="right"&&e(S)})}return f(a),x(p,a),G({get href(){return m()},set href(e){m(e),i()},get target(){return d()},set target(e){d(e),i()},get appearance(){return v()},set appearance(e=void 0){v(e),i()},get disabled(){return u()},set disabled(e=!1){u(e),i()},get size(){return b()},set size(e="m"){b(e),i()},get inline(){return h()},set inline(e=!1){h(e),i()},get iconposition(){return r()},set iconposition(e=void 0){r(e),i()}})}customElements.define("m-link",q(N,{href:{},target:{},appearance:{},disabled:{},size:{},inline:{},iconposition:{}},["icon","default"],[],!0));
 //# sourceMappingURL=Link.js.map

package/dist/components/link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../../../src/components/link/Link.svelte"],"sourcesContent":["<svelte:options customElement=\"m-link\" />\n\n<script lang=\"ts\">\n  import type { LinkIconPosition, LinkSize, LinkStyle } from './link.types';\n  interface Props {\n    href: string;\n    target: string;\n    appearance?: LinkStyle;\n    disabled?: boolean;\n    size?: LinkSize;\n    inline?: boolean;\n    iconposition?: LinkIconPosition | undefined;\n    [key: string]: any;\n  }\n\n  let {\n    href,\n    target,\n    appearance = undefined,\n    disabled = false,\n    size = 'm',\n    inline = false,\n    iconposition = undefined,\n    ...events\n  }: Props = $props();\n\n  function setClasses(\n    appearance: LinkStyle,\n    size: LinkSize,\n    inline: boolean,\n  ): string {\n    const classes = ['mc-link'];\n\n    if (appearance) {\n      classes.push(`mc-link--${appearance}`);\n    }\n    if (size) {\n      classes.push(`mc-link--${size}`);\n    }\n    if (inline) {\n      classes.push('mc-link--inline');\n    } else {\n      classes.push('mc-link--stand-alone');\n    }\n    return classes.join(' ');\n  }\n</script>\n\n<a\n  {href}\n  {target}\n  class=\"{setClasses(appearance, size, inline)} {disabled\n    ? 'is-disabled'\n    : ''} \"\n  {...events}\n>\n  {#if iconposition === 'left'}\n    <span class=\"mc-link__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n  <span class=\"mc-link__label\">\n    <slot />\n  </span>\n  {#if iconposition === 'right'}\n    <span class=\"mc-link__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n</a>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/link';\n</style>\n"],"names":["href","$.prop","$$props","target","appearance","disabled","size","inline","iconposition","events","$.rest_props","setClasses","classes","$$render","consequent","consequent_1"],"mappings":";;2uDAgBIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAMF,EAAAC,EAAA,SAAA,CAAA,EACNE,qBAAa,MAAS,EACtBC,mBAAW,EAAK,EAChBC,eAAO,GAAG,EACVC,iBAAS,EAAK,EACdC,uBAAe,MAAS,EACrBC,EAAAC,EAAAR,EAAA,mHAGI,SAAAS,EACPP,EACAE,EACAC,EACQ,CACF,MAAAK,GAAW,SAAS,EAEtB,OAAAR,GACFQ,EAAQ,KAAI,YAAaR,CAAU,EAAA,EAEjCE,GACFM,EAAQ,KAAI,YAAaN,CAAI,EAAA,EAE3BC,EACFK,EAAQ,KAAK,iBAAiB,EAE9BA,EAAQ,KAAK,sBAAsB,EAE9BA,EAAQ,KAAK,GAAG,CACzB,0DAM+CP,IAC3C,cACA,EAAE,OACFI,KAHI,IAAAE,EAAWP,EAAU,EAAEE,EAAI,EAAEC,EAAM,CAAA,iGAKtCC,MAAiB,QAAMK,EAAAC,CAAA,gIAQvBN,MAAiB,SAAOK,EAAAE,CAAA,sKA9Cd,OAAS,qDACX,GAAK,6CACT,IAAG,iDACD,GAAK,6DACC,OAAS"}
+{"version":3,"file":"Link.js","sources":["../../../src/components/link/Link.svelte"],"sourcesContent":["<svelte:options customElement=\"m-link\" />\n\n<script lang=\"ts\">\n  import type { LinkIconPosition, LinkSize, LinkStyle } from './link.types';\n  interface Props {\n    href: string;\n    target: string;\n    appearance?: LinkStyle;\n    disabled?: boolean;\n    size?: LinkSize;\n    inline?: boolean;\n    iconposition?: LinkIconPosition | undefined;\n    [key: string]: any;\n  }\n\n  let {\n    href,\n    target,\n    appearance = undefined,\n    disabled = false,\n    size = 'm',\n    inline = false,\n    iconposition = undefined,\n    ...events\n  }: Props = $props();\n\n  function setClasses(\n    appearance: LinkStyle,\n    size: LinkSize,\n    inline: boolean,\n  ): string {\n    const classes = ['mc-link'];\n\n    if (appearance) {\n      classes.push(`mc-link--${appearance}`);\n    }\n    if (size) {\n      classes.push(`mc-link--${size}`);\n    }\n    if (inline) {\n      classes.push('mc-link--inline');\n    } else {\n      classes.push('mc-link--stand-alone');\n    }\n    return classes.join(' ');\n  }\n</script>\n\n<a\n  {href}\n  {target}\n  class=\"{setClasses(appearance, size, inline)} {disabled\n    ? 'is-disabled'\n    : ''} \"\n  {...events}\n>\n  {#if iconposition === 'left'}\n    <span class=\"mc-link__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n  <span class=\"mc-link__label\">\n    <slot />\n  </span>\n  {#if iconposition === 'right'}\n    <span class=\"mc-link__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n</a>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/link';\n</style>\n"],"names":["href","$.prop","$$props","target","appearance","disabled","size","inline","iconposition","events","$.rest_props","setClasses","classes","$$render","consequent","consequent_1"],"mappings":";;iwDAAA,oBAgBIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAMF,EAAAC,EAAA,SAAA,CAAA,EACNE,qBAAa,MAAS,EACtBC,mBAAW,EAAK,EAChBC,eAAO,GAAG,EACVC,iBAAS,EAAK,EACdC,uBAAe,MAAS,EACrBC,EAAAC,EAAAR,EAAA,mHAGI,SAAAS,EACPP,EACAE,EACAC,EACQ,CACF,MAAAK,GAAW,SAAS,EAEtB,OAAAR,GACFQ,EAAQ,KAAI,YAAaR,CAAU,EAAA,EAEjCE,GACFM,EAAQ,KAAI,YAAaN,CAAI,EAAA,EAE3BC,EACFK,EAAQ,KAAK,iBAAiB,EAE9BA,EAAQ,KAAK,sBAAsB,EAE9BA,EAAQ,KAAK,GAAG,CACzB,0DAM+CP,IAC3C,cACA,EAAE,OACFI,IAHI,CAAA,IAAAE,EAAWP,EAAU,EAAEE,IAAMC,EAAM,CAAA,CAAA,uGAKtCC,MAAiB,QAAMK,EAAAC,CAAA,gIAQvBN,MAAiB,SAAOK,EAAAE,CAAA,sKA9Cd,OAAS,qDACX,GAAK,6CACT,IAAG,iDACD,GAAK,6DACC,OAAS,YAwB5B"}

package/dist/components/link/Link.nested.js

@@ -0,0 +1,2 @@
+import{H as e,i,s as o,I as l,c as t,e as n,d as s,v as a,j as c,t as r,b as m,k as g,N as d,x as v,B as h,z as f,A as k,a2 as p,l as u,m as b,P as x,o as w,p as y,q as $,u as z,h as _,W as j,C,V as q,Y as A,Z as B,_ as E,$ as F,T as H,n as I,a4 as N}from"../../index-c222d0b7.js";import{c as O}from"../../EventForward-c4c8cd29.js";function P(e){l(e,"svelte-ag34o",'.mc-link.svelte-ag34o{-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-ag34o:focus{outline:none}.mc-link.svelte-ag34o: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-ag34o,.mc-link.svelte-ag34o:visited{color:#333333}.mc-link.is-hover.svelte-ag34o,.mc-link.svelte-ag34o:hover{color:#666666}.mc-link.is-active.svelte-ag34o,.mc-link.svelte-ag34o:active{color:#333333}.mc-link.is-disabled.svelte-ag34o{color:#e6e6e6;cursor:not-allowed}.mc-link--s.svelte-ag34o{font-size:0.875rem;line-height:1.2857142857}.mc-link--m.svelte-ag34o{font-size:1rem;line-height:1.375}.mc-link.svelte-ag34o::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-ag34o{display:block;height:1rem;fill:currentColor;-ms-flex-negative:0;flex-shrink:0;width:1rem}.mc-link--light.svelte-ag34o{color:#ffffff}.mc-link--light.is-visited.svelte-ag34o,.mc-link--light.svelte-ag34o:visited{color:#cccccc}.mc-link--light.is-hover.svelte-ag34o,.mc-link--light.svelte-ag34o:hover{color:#999999}.mc-link--light.is-active.svelte-ag34o,.mc-link--light.svelte-ag34o:active{color:#cccccc}.mc-link--light.is-disabled.svelte-ag34o{color:#e6e6e6;cursor:not-allowed}.mc-link--primary.svelte-ag34o{color:#188803}.mc-link--primary.is-visited.svelte-ag34o,.mc-link--primary.svelte-ag34o:visited{color:#006902}.mc-link--primary.is-hover.svelte-ag34o,.mc-link--primary.svelte-ag34o:hover{color:#035010}.mc-link--primary.is-active.svelte-ag34o,.mc-link--primary.svelte-ag34o:active{color:#006902}.mc-link--primary.is-disabled.svelte-ag34o{color:#e6e6e6;cursor:not-allowed}.mc-link--primary-02.svelte-ag34o{color:#494f60}.mc-link--primary-02.is-visited.svelte-ag34o,.mc-link--primary-02.svelte-ag34o:visited{color:#343b4c}.mc-link--primary-02.is-hover.svelte-ag34o,.mc-link--primary-02.svelte-ag34o:hover{color:#171b26}.mc-link--primary-02.is-active.svelte-ag34o,.mc-link--primary-02.svelte-ag34o:active{color:#343b4c}.mc-link--primary-02.is-disabled.svelte-ag34o{color:#e6e6e6;cursor:not-allowed}.mc-link--danger.svelte-ag34o{color:#c61112}.mc-link--danger.is-visited.svelte-ag34o,.mc-link--danger.svelte-ag34o:visited{color:#8c0003}.mc-link--danger.is-hover.svelte-ag34o,.mc-link--danger.svelte-ag34o:hover{color:#530000}.mc-link--danger.is-active.svelte-ag34o,.mc-link--danger.svelte-ag34o:active{color:#8c0003}.mc-link--danger.is-disabled.svelte-ag34o{color:#e6e6e6;cursor:not-allowed}@media screen and (min-width: 680px){.mc-link--s\\@from-m.svelte-ag34o{font-size:0.875rem;line-height:1.2857142857}.mc-link--m\\@from-m.svelte-ag34o{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1024px){.mc-link--s\\@from-l.svelte-ag34o{font-size:0.875rem;line-height:1.2857142857}.mc-link--m\\@from-l.svelte-ag34o{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1280px){.mc-link--s\\@from-xl.svelte-ag34o{font-size:0.875rem;line-height:1.2857142857}.mc-link--m\\@from-xl.svelte-ag34o{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1920px){.mc-link--s\\@from-xxl.svelte-ag34o{font-size:0.875rem;line-height:1.2857142857}.mc-link--m\\@from-xxl.svelte-ag34o{font-size:1rem;line-height:1.375}}')}const T=e=>({}),V=e=>({}),W=e=>({}),Y=e=>({});function Z(e){let i,o,l,t,s;const a=[G,D],c=[];function r(e,i){return e[6]?0:e[11].icon?1:-1}return~(o=r(e))&&(l=c[o]=a[o](e)),{c(){i=n("span"),l&&l.c(),_(i,"class",t=j(R(e[7]))+" svelte-ag34o")},m(e,l){m(e,i,l),~o&&c[o].m(i,null),s=!0},p(e,n){let m=o;o=r(e),o===m?~o&&c[o].p(e,n):(l&&(C(),f(c[m],1,1,(()=>{c[m]=null})),k()),~o?(l=c[o],l?l.p(e,n):(l=c[o]=a[o](e),l.c()),h(l,1),l.m(i,null)):l=null),(!s||128&n&&t!==(t=j(R(e[7]))+" svelte-ag34o"))&&_(i,"class",t)},i(e){s||(h(l),s=!0)},o(e){f(l),s=!1},d(e){e&&b(i),~o&&c[o].d()}}}function D(e){let i;const o=e[13].icon,l=A(o,e,e[12],Y);return{c(){l&&l.c()},m(e,o){l&&l.m(e,o),i=!0},p(e,t){l&&l.p&&(!i||4096&t)&&B(l,o,e,e[12],i?F(o,e[12],t,W):E(e[12]),Y)},i(e){i||(h(l,e),i=!0)},o(e){f(l,e),i=!1},d(e){l&&l.d(e)}}}function G(e){let i,o,l=`<${Q(e[6])} />`;return{c(){i=new N(!1),o=H(),i.a=o},m(e,t){i.m(l,e,t),m(e,o,t)},p(e,o){64&o&&l!==(l=`<${Q(e[6])} />`)&&i.p(l)},i:I,o:I,d(e){e&&b(o),e&&i.d()}}}function J(e){let i,o,l,t,s;const a=[L,K],c=[];function r(e,i){return e[6]?0:e[11].icon?1:-1}return~(o=r(e))&&(l=c[o]=a[o](e)),{c(){i=n("span"),l&&l.c(),_(i,"class",t=j(R(e[7]))+" svelte-ag34o")},m(e,l){m(e,i,l),~o&&c[o].m(i,null),s=!0},p(e,n){let m=o;o=r(e),o===m?~o&&c[o].p(e,n):(l&&(C(),f(c[m],1,1,(()=>{c[m]=null})),k()),~o?(l=c[o],l?l.p(e,n):(l=c[o]=a[o](e),l.c()),h(l,1),l.m(i,null)):l=null),(!s||128&n&&t!==(t=j(R(e[7]))+" svelte-ag34o"))&&_(i,"class",t)},i(e){s||(h(l),s=!0)},o(e){f(l),s=!1},d(e){e&&b(i),~o&&c[o].d()}}}function K(e){let i;const o=e[13].icon,l=A(o,e,e[12],V);return{c(){l&&l.c()},m(e,o){l&&l.m(e,o),i=!0},p(e,t){l&&l.p&&(!i||4096&t)&&B(l,o,e,e[12],i?F(o,e[12],t,T):E(e[12]),V)},i(e){i||(h(l,e),i=!0)},o(e){f(l,e),i=!1},d(e){l&&l.d(e)}}}function L(e){let i,o,l=`<${Q(e[6])} />`;return{c(){i=new N(!1),o=H(),i.a=o},m(e,t){i.m(l,e,t),m(e,o,t)},p(e,o){64&o&&l!==(l=`<${Q(e[6])} />`)&&i.p(l)},i:I,o:I,d(e){e&&b(o),e&&i.d()}}}function M(e){let i,o,l,w,y,$,z,_,j=(e[6]||e[11].icon)&&"left"===e[7]&&Z(e),q=(e[6]||e[11].icon)&&"right"===e[7]&&J(e),A=[{href:e[1]},{target:e[2]},{class:y=S(e[3],e[5])+" "+(e[4]?"is-disabled":"")+" "+e[9]},e[8]],B={};for(let e=0;e<A.length;e+=1)B=t(B,A[e]);return{c(){i=n("a"),j&&j.c(),o=s(),l=a(e[0]),w=s(),q&&q.c(),c(i,B),r(i,"svelte-ag34o",!0)},m(t,n){m(t,i,n),j&&j.m(i,null),g(i,o),g(i,l),g(i,w),q&&q.m(i,null),$=!0,z||(_=[d(e[10].call(null,i)),v(i,"click",e[14])],z=!0)},p(e,[t]){(e[6]||e[11].icon)&&"left"===e[7]?j?(j.p(e,t),2240&t&&h(j,1)):(j=Z(e),j.c(),h(j,1),j.m(i,o)):j&&(C(),f(j,1,1,(()=>{j=null})),k()),(!$||1&t)&&p(l,e[0],B.contenteditable),(e[6]||e[11].icon)&&"right"===e[7]?q?(q.p(e,t),2240&t&&h(q,1)):(q=J(e),q.c(),h(q,1),q.m(i,null)):q&&(C(),f(q,1,1,(()=>{q=null})),k()),c(i,B=u(A,[(!$||2&t)&&{href:e[1]},(!$||4&t)&&{target:e[2]},(!$||568&t&&y!==(y=S(e[3],e[5])+" "+(e[4]?"is-disabled":"")+" "+e[9]))&&{class:y},256&t&&e[8]])),r(i,"svelte-ag34o",!0)},i(e){$||(h(j),h(q),$=!0)},o(e){f(j),f(q),$=!1},d(e){e&&b(i),j&&j.d(),q&&q.d(),z=!1,x(_)}}}function Q(e){return`${e} size="1rem"`}function R(e){const i=["mc-link__icon"];return"left"===e&&i.push("mc-link__icon--left"),"right"===e&&i.push("mc-link__icon--right"),i.join(" ")}function S(e,i){const o=["mc-link"];return e&&o.push(`mc-link--${e}`),i&&o.push(`mc-link--${i}`),o.join(" ")}function U(e,i,o){let l,n;const s=["label","href","target","theme","disabled","size","iconname","iconposition"];let a=w(i,s),{$$slots:c={},$$scope:r}=i;const m=y(c);let{label:g}=i,{href:d}=i,{target:v}=i,{theme:h}=i,{disabled:f=!1}=i,{size:k="m"}=i,{iconname:p}=i,{iconposition:u}=i;const b=O($());return e.$$set=e=>{o(16,i=t(t({},i),z(e))),o(15,a=w(i,s)),"label"in e&&o(0,g=e.label),"href"in e&&o(1,d=e.href),"target"in e&&o(2,v=e.target),"theme"in e&&o(3,h=e.theme),"disabled"in e&&o(4,f=e.disabled),"size"in e&&o(5,k=e.size),"iconname"in e&&o(6,p=e.iconname),"iconposition"in e&&o(7,u=e.iconposition),"$$scope"in e&&o(12,r=e.$$scope)},e.$$.update=()=>{o(9,l=i.class),o(8,n=Object.assign({},a)),256&e.$$.dirty&&delete n.class},i=z(i),[g,d,v,h,f,k,p,u,n,l,b,m,r,c,function(i){q.call(this,e,i)}]}class X extends e{constructor(e){super(),i(this,e,U,M,o,{label:0,href:1,target:2,theme:3,disabled:4,size:5,iconname:6,iconposition:7},P)}}export{X as default};
+//# sourceMappingURL=Link.nested.js.map

package/dist/components/link/Link.nested.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.nested.js","sources":["../../../src/components/link/Link.nested.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import { get_current_component } from 'svelte/internal';\n  import type { LinkIconPosition, LinkSize, LinkTheme } from './link.types';\n  import { createEventForwarder } from '../../utilities/EventForward';\n  export let label: string;\n  export let href: string;\n  export let target: string;\n  export let theme: LinkTheme = undefined;\n  export let disabled = false;\n  export let size: LinkSize = 'm';\n  export let iconname: string | undefined = undefined;\n  export let iconposition: LinkIconPosition | undefined = undefined;\n\n  const forwardEvents = createEventForwarder(get_current_component());\n\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  function generateIconName(iconName: string): string {\n    return `${iconName} size=\"1rem\"`;\n  }\n\n  function generateIconClass(iconposition: string): string {\n    const classes = ['mc-link__icon'];\n\n    if (iconposition === 'left') {\n      classes.push('mc-link__icon--left');\n    }\n\n    if (iconposition === 'right') {\n      classes.push('mc-link__icon--right');\n    }\n    return classes.join(' ');\n  }\n\n  function setClasses(theme: LinkTheme, size: LinkSize): string {\n    const classes = ['mc-link'];\n\n    if (theme) {\n      classes.push(`mc-link--${theme}`);\n    }\n    if (size) {\n      classes.push(`mc-link--${size}`);\n    }\n    return classes.join(' ');\n  }\n</script>\n\n<a\n  use:forwardEvents\n  on:click\n  {href}\n  {target}\n  class=\"{setClasses(theme, size)} {disabled ? 'is-disabled' : ''} {userClass}\"\n  {...attributes}\n>\n  {#if (iconname || $$slots.icon) && iconposition === 'left'}\n    <span class={generateIconClass(iconposition)}>\n      {#if iconname}\n        {@html `<${generateIconName(iconname)} />`}\n      {:else if $$slots.icon}\n        <slot name=\"icon\" />\n      {/if}\n    </span>\n  {/if}\n\n  {label}\n\n  {#if (iconname || $$slots.icon) && iconposition === 'right'}\n    <span class={generateIconClass(iconposition)}>\n      {#if iconname}\n        {@html `<${generateIconName(iconname)} />`}\n      {:else if $$slots.icon}\n        <slot name=\"icon\" />\n      {/if}\n    </span>\n  {/if}\n</a>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.links';\n</style>\n"],"names":["ctx","icon","attr","span","span_class_value","null_to_empty","generateIconClass","insert","target","anchor","current","dirty","raw_value","generateIconName","html_tag","p","if_block0","create_if_block_3","if_block1","create_if_block","setClasses","a","a_data","class","a_class_value","iconName","iconposition","classes","push","join","theme","size","label","$$props","href","disabled","iconname","forwardEvents","createEventForwarder","get_current_component","$$invalidate","userClass","attributes","Object","assign","$$restProps"],"mappings":"22IA6DWA,EAAQ,GAAA,EAEHA,MAAQC,KAAI,iEAHXC,EAAAC,EAAA,QAAAC,EAAAC,EAAAC,EAAkBN,EAAY,KAAA,yBAA3CO,EAMMC,EAAAL,EAAAM,+LANOC,GAAA,IAAAC,GAAAP,KAAAA,EAAAC,EAAAC,EAAkBN,EAAY,KAAA,mWAE5BY,EAAA,IAAAC,EAAiBb,EAAQ,gFAAzB,GAAAW,GAAAC,KAAAA,EAAA,IAAAC,EAAiBb,EAAQ,WAAAc,EAAAC,EAAAH,0GAWjCZ,EAAQ,GAAA,EAEHA,MAAQC,KAAI,iEAHXC,EAAAC,EAAA,QAAAC,EAAAC,EAAAC,EAAkBN,EAAY,KAAA,yBAA3CO,EAMMC,EAAAL,EAAAM,+LANOC,GAAA,IAAAC,GAAAP,KAAAA,EAAAC,EAAAC,EAAkBN,EAAY,KAAA,mWAE5BY,EAAA,IAAAC,EAAiBb,EAAQ,gFAAzB,GAAAW,GAAAC,KAAAA,EAAA,IAAAC,EAAiBb,EAAQ,WAAAc,EAAAC,EAAAH,sEAfpCI,GAAAhB,MAAYA,EAAO,IAACC,OAA0B,SAAjBD,MAAuBiB,EAAAjB,GAYpDkB,GAAAlB,MAAYA,EAAO,IAACC,OAA0B,UAAjBD,MAAwBmB,EAAAnB,yCAfnDoB,EAAWpB,EAAK,GAAEA,EAAI,IAAA,KAAIA,EAAQ,GAAG,cAAgB,IAAE,IAAGA,EAAS,IACvEA,EAAU,wFAYbA,EAAK,yDAlBRO,EA6BGC,EAAAa,EAAAZ,6HArBKT,MAAYA,EAAO,IAACC,OAA0B,SAAjBD,oHAUlCA,EAAK,GAAAsB,EAAA,kBAEAtB,MAAYA,EAAO,IAACC,OAA0B,UAAjBD,sLAf3BoB,EAAWpB,EAAK,GAAEA,EAAI,IAAA,KAAIA,EAAQ,GAAG,cAAgB,IAAE,IAAGA,EAAS,MAAA,CAAAuB,MAAAC,UACvExB,EAAU,wHApCL,SAAAa,EAAiBY,YACdA,gBAGH,SAAAnB,EAAkBoB,GACnB,MAAAC,GAAW,uBAEI,SAAjBD,GACFC,EAAQC,KAAK,uBAGM,UAAjBF,GACFC,EAAQC,KAAK,wBAERD,EAAQE,KAAK,cAGbT,EAAWU,EAAkBC,GAC9B,MAAAJ,GAAW,kBAEbG,GACFH,EAAQC,KAAI,YAAaE,KAEvBC,GACFJ,EAAQC,KAAI,YAAaG,KAEpBJ,EAAQE,KAAK,oLAzCXG,GAAaC,QACbC,GAAYD,UACZzB,GAAcyB,GACdH,MAAAA,GAA4BG,GAC5BE,SAAAA,GAAW,GAAKF,GAChBF,KAAAA,EAAiB,KAAGE,GACpBG,SAAAA,GAAwCH,GACxCP,aAAAA,GAAsDO,QAE3DI,EAAgBC,EAAqBC,0WAExCC,EAAA,EAAAC,EAAYR,EAAQV,WACpBmB,EAALC,OAAAC,UAAuBC,2BACXH,EAAWnB"}

package/dist/components/link/Link.nested.svelte

@@ -0,0 +1,86 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import { get_current_component } from 'svelte/internal';
+  import type { LinkIconPosition, LinkSize, LinkTheme } from './link.types';
+  import { createEventForwarder } from '../../utilities/EventForward';
+  export let label: string;
+  export let href: string;
+  export let target: string;
+  export let theme: LinkTheme = undefined;
+  export let disabled = false;
+  export let size: LinkSize = 'm';
+  export let iconname: string | undefined = undefined;
+  export let iconposition: LinkIconPosition | undefined = undefined;
+
+  const forwardEvents = createEventForwarder(get_current_component());
+
+  $: userClass = $$props.class;
+  $: attributes = { ...$$restProps };
+  $: delete attributes.class;
+
+  function generateIconName(iconName: string): string {
+    return `${iconName} size="1rem"`;
+  }
+
+  function generateIconClass(iconposition: string): string {
+    const classes = ['mc-link__icon'];
+
+    if (iconposition === 'left') {
+      classes.push('mc-link__icon--left');
+    }
+
+    if (iconposition === 'right') {
+      classes.push('mc-link__icon--right');
+    }
+    return classes.join(' ');
+  }
+
+  function setClasses(theme: LinkTheme, size: LinkSize): string {
+    const classes = ['mc-link'];
+
+    if (theme) {
+      classes.push(`mc-link--${theme}`);
+    }
+    if (size) {
+      classes.push(`mc-link--${size}`);
+    }
+    return classes.join(' ');
+  }
+</script>
+
+<a
+  use:forwardEvents
+  on:click
+  {href}
+  {target}
+  class="{setClasses(theme, size)} {disabled ? 'is-disabled' : ''} {userClass}"
+  {...attributes}
+>
+  {#if (iconname || $$slots.icon) && iconposition === 'left'}
+    <span class={generateIconClass(iconposition)}>
+      {#if iconname}
+        {@html `<${generateIconName(iconname)} />`}
+      {:else if $$slots.icon}
+        <slot name="icon" />
+      {/if}
+    </span>
+  {/if}
+
+  {label}
+
+  {#if (iconname || $$slots.icon) && iconposition === 'right'}
+    <span class={generateIconClass(iconposition)}>
+      {#if iconname}
+        {@html `<${generateIconName(iconname)} />`}
+      {:else if $$slots.icon}
+        <slot name="icon" />
+      {/if}
+    </span>
+  {/if}
+</a>
+
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
+  @import '@mozaic-ds/styles/components/c.links';
+</style>