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

package/dist/components/donut/Donut.svelte

@@ -0,0 +1,441 @@
+<svelte:options tag="m-donut" />
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  import {
+    select,
+    arc as d3Arc,
+    pie as d3Pie,
+    interpolate,
+    Selection,
+    PieArcDatum,
+  } from 'd3';
+  import type { DonutData, ChartContext, LegendPosition } from './donut.types';
+  import { EventHandler } from '../../utilities/EventHandler';
+  import {
+    get_current_component,
+    createEventDispatcher,
+  } from 'svelte/internal';
+  export let data: string = '';
+  $: parsedData = data ? (JSON.parse(data) as DonutData[]) : [];
+
+  export let svgs: string;
+  $: parsedSvgs = svgs
+    ? (JSON.parse(svgs) as SVGElement[])
+    : ([] as SVGElement[]);
+
+  export let colors: string;
+  $: parsedColors = colors
+    ? JSON.parse(colors)
+    : ['#605F9D', '#D9F0F3', '#EAEDEF', '#0B96CC', '#EA7315', '#EA302D'];
+
+  export let strokes: string;
+  $: parsedStrokes = strokes
+    ? JSON.parse(strokes)
+    : ['#605F9D', '#D9F0F3', '#EAEDEF', '#0B96CC', '#EA7315', '#EA302D'];
+
+  export let title: string;
+  export let legendseparator = ',';
+  export let legendseparatorcount = '(';
+  export let dimension = 250;
+  export let padangle = 0.05;
+  export let backgroundcolor = '#fff';
+  export let delay = 500;
+  export let legendposition: LegendPosition = 'right';
+
+  $: count = parsedData
+    ? parsedData
+        .filter((d) => {
+          return !d.checked;
+        })
+        .reduce((acc, item) => (acc += item.total), 0)
+    : [];
+
+  let chart: HTMLDivElement;
+  let svg: Selection<SVGGElement, PieArcDatum<DonutData>, any, any>;
+
+  let hasMounted = false;
+  let eventHandler = new EventHandler(
+    get_current_component(),
+    createEventDispatcher(),
+  );
+
+  let tooltipData = {
+    left: '0px',
+    top: '0px',
+    text: '',
+    show: false,
+  };
+
+  const radius = dimension / 2;
+
+  const arc = d3Arc<PieArcDatum<DonutData>>()
+    .outerRadius(radius - 5)
+    .innerRadius(radius - 60)
+    .padAngle(padangle);
+
+  const pie = d3Pie<DonutData>()
+    .sort(null)
+    .startAngle(1.1 * Math.PI)
+    .endAngle(3.1 * Math.PI)
+    .value((data) => data.total);
+
+  $: if (data.length > 0 && hasMounted) {
+    if (!svg) {
+      svg = select<HTMLElement, PieArcDatum<DonutData>>(chart)
+        .append('svg')
+        .attr('width', dimension)
+        .attr('height', dimension)
+        .append('g')
+        .attr(
+          'transform',
+          'translate(' + dimension / 2 + ',' + dimension / 2 + ')',
+        );
+    } else {
+      svg.selectAll('path').remove();
+    }
+
+    renderChart();
+  }
+
+  const getTotal = () => {
+    return parsedData
+      ? parsedData
+          .filter((d) => {
+            return !d.checked;
+          })
+          .reduce((acc, item) => (acc += item.total), 0)
+      : [];
+  };
+
+  const renderChart = () => {
+    const paths = svg
+      .selectAll('path')
+      .data(pie(parsedData))
+      .enter()
+      .append('path')
+      .attr('class', 'chart__arc')
+      .attr('title', (d) => d.data.name)
+      .attr('stroke', (d) => `${parsedStrokes[d.index]}`)
+      .attr('stroke-width', '4px')
+      .style('fill', (d) => {
+        if (parsedSvgs.length > 0) {
+          return `url(#${d.data.patternId})`;
+        } else if (parsedColors.length > 0) {
+          return `${parsedColors[d.index]}`;
+        }
+        return `${parsedColors[d.index]}`;
+      });
+
+    svg
+      .append('svg:text')
+      .attr('text-anchor', 'middle')
+      .attr('font-size', '28')
+      .attr('fill', '#333')
+      .text(String(count));
+
+    svg
+      .append('svg:text')
+      .attr('text-anchor', 'middle')
+      .attr('font-size', '22')
+      .attr('fill', '#333')
+      .attr('dy', '1.5rem')
+      .text(title);
+
+    paths
+      .transition()
+      .delay((_d, index) => index * delay)
+      .duration(delay)
+      .attrTween('d', (d: PieArcDatum<DonutData>) => {
+        if (d.data.total === 0) return () => '';
+
+        const i = interpolate(d.startAngle + 0.1, d.endAngle);
+        return (t: number) => {
+          d.endAngle = i(t);
+          return arc(d) || '';
+        };
+      });
+
+    paths
+      .on('mousemove', (e: MouseEvent, chartEvent: PieArcDatum<DonutData>) => {
+        tooltipData = {
+          left: e.pageX + 10 + 'px',
+          top: e.pageY - 25 + 'px',
+          text: chartEvent.data.customTooltip
+            ? chartEvent.data.customTooltip
+            : chartEvent.data.name,
+          show: true,
+        };
+      })
+      .on('mouseover', (_e: MouseEvent, chartEvent: PieArcDatum<DonutData>) => {
+        var current = svg.selectAll('.chart__arc').filter(function (arc) {
+          return arc === chartEvent;
+        });
+
+        var others = svg.selectAll('.chart__arc').filter(function (arc) {
+          return arc != chartEvent;
+        });
+
+        others.style('opacity', 0.7);
+        current.style('transform', 'scale(1.02)');
+      })
+      .on('mouseout', (_e: MouseEvent, chartEvent: PieArcDatum<DonutData>) => {
+        var current = svg.selectAll('.chart__arc').filter(function (arc) {
+          return arc === chartEvent;
+        });
+
+        var others = svg.selectAll('.chart__arc').filter(function (arc) {
+          return arc != chartEvent;
+        });
+
+        others.style('opacity', 1);
+        current.style('transform', 'scale(1)');
+        tooltipData.show = false;
+      })
+      .on('click', (_e: MouseEvent, chartEvent: PieArcDatum<DonutData>) => {
+        eventHandler.dispatch('donut-clicked', chartEvent);
+      });
+
+    setTimeout(() => {
+      updateChart(parsedData);
+    }, delay * parsedData.length);
+  };
+
+  function updateChart(data: DonutData[]) {
+    svg
+      .selectAll('path')
+      .data(pie(data))
+      .transition()
+      .duration(delay)
+      .attr('stroke-width', (_d, i) => {
+        return parsedData[i].checked ? '0px' : '4px';
+      })
+      .attrTween('d', function (d: PieArcDatum<DonutData>) {
+        const i: any = interpolate((this as ChartContext)._current, d);
+        (this as ChartContext)._current = i(0);
+        return (t: number) => arc(i(t)) || '';
+      });
+
+    svg
+      .selectAll('svg text')
+      .filter(function () {
+        return /^[0-9]/.test(select(this).text()); // Check if text begin with a "C"
+      })
+      .text(String(getTotal()));
+  }
+
+  function filterChart(name: string) {
+    const updatedData = svg
+      .selectAll('path')
+      .data()
+      .map((d, i) => {
+        const data = (d as PieArcDatum<DonutData>).data;
+        if (data.name === name) {
+          parsedData[i].checked = !parsedData[i].checked;
+          const total = data.total === 0 ? parsedData[i].total : 0;
+          return { ...data, total };
+        }
+        return { ...data };
+      });
+    updateChart(updatedData);
+  }
+
+  function getLegendTextClasses(checked: boolean | undefined) {
+    return `legend__text${checked ? ' legend__text--not-selected' : ''}`;
+  }
+
+  function getFillColor(
+    data: DonutData,
+    index: number,
+    svgs: SVGElement[],
+    colors: [],
+  ) {
+    if (svgs.length > 0) {
+      return `url(#${data.patternId})`;
+    } else if (colors.length > 0) {
+      return parsedColors[index];
+    }
+  }
+
+  function getLegendPosition(legendposition: LegendPosition) {
+    switch (legendposition) {
+      case 'top':
+        return 'chart--top';
+        break;
+      case 'right':
+        return 'chart--right';
+        break;
+      case 'bottom':
+        return 'chart--bottom';
+        break;
+      case 'left':
+        return 'chart--left';
+        break;
+      default:
+        return 'chart--right';
+        break;
+    }
+  }
+
+  onMount(() => (hasMounted = true));
+</script>
+
+<div
+  bind:this={chart}
+  class="chart {getLegendPosition(legendposition)}"
+  style="background-color: {backgroundcolor};"
+>
+  <div class="legend">
+    {#each parsedData as data, i}
+      <button class="legend__item" on:click={() => filterChart(data.name)}>
+        <svg class="legend__box">
+          <rect
+            x="0"
+            y="0"
+            width="24"
+            height="16"
+            fill={getFillColor(data, i, parsedSvgs, parsedColors)}
+          />
+        </svg>
+        <div>
+          {#each data.name.split(legendseparator) as name}
+            <p class={getLegendTextClasses(data.checked)}>
+              {name.split(legendseparatorcount)[0]}
+              {#if name.split(legendseparatorcount)[1]}
+                <span class="legend__text--light"
+                  >({name.split(legendseparatorcount)[1]}</span
+                >
+              {/if}
+            </p>
+          {/each}
+        </div>
+      </button>
+    {/each}
+  </div>
+
+  {#if tooltipData.show}
+    <div
+      class="chart__tooltip"
+      style="left: {tooltipData.left}; top: {tooltipData.top};"
+    >
+      {tooltipData.text}
+    </div>
+  {/if}
+</div>
+
+<div style="height: 0; width: 0;" class="pattern">
+  {#each parsedSvgs as svg}
+    {@html svg}
+  {/each}
+</div>
+
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
+  @import '@mozaic-ds/styles/typography/_t.headings';
+
+  .opaque {
+    opacity: 0.7;
+  }
+
+  .chart {
+    display: flex;
+    flex-wrap: wrap;
+    background-color: $color-grey-000;
+    justify-content: center;
+    align-items: center;
+    &--top {
+      flex-direction: column;
+    }
+    &--right {
+      flex-direction: row-reverse;
+    }
+    &--bottom {
+      flex-direction: column-reverse;
+    }
+    &--left {
+      flex-direction: row;
+    }
+    &__tooltip {
+      position: absolute;
+      width: auto;
+      height: auto;
+      background-color: $color-grey-700;
+      border-radius: 4px;
+      color: $color-grey-000;
+      padding: magic-unit-rem(0.5) magic-unit-rem(1);
+      text-align: center;
+    }
+
+    &__arc {
+      cursor: pointer;
+      transition: transform 0.3s ease;
+    }
+  }
+
+  .legend {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 0 magic-unit-rem(1.5);
+    height: 100%;
+    margin: 0;
+    color: $color-grey-999;
+
+    &__title {
+      padding: magic-unit-rem(0.75);
+      white-space: nowrap;
+      margin: 0;
+
+      &--light {
+        color: $color-grey-500;
+      }
+    }
+
+    &__item {
+      cursor: pointer;
+      background: none;
+      border: none;
+      display: flex;
+      flex-direction: row;
+      margin-left: magic-unit-rem(0.75);
+      margin-bottom: magic-unit-rem(0.25);
+      font-size: $size-font-04;
+
+      &:focus,
+      &:hover {
+        outline: 0;
+        text-decoration: underline;
+      }
+    }
+
+    &__box {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: magic-unit-rem(0.75);
+      height: 16px;
+      width: 24px;
+    }
+    &__text {
+      width: fit-content;
+      white-space: nowrap;
+      margin: 0 0 magic-unit-rem(0.25) 0;
+      padding: 0;
+
+      &--light {
+        color: $color-grey-500;
+      }
+
+      &--not-selected {
+        text-decoration: line-through;
+      }
+    }
+  }
+
+  .pattern {
+    z-index: -1;
+    position: absolute;
+  }
+</style>

package/dist/components/drawer/Drawer.js

@@ -0,0 +1,14 @@
+import{c as q,a as F,d as r,A as Z,t as E,j as h,l as G,m as a,i as I,B as $,b as ee,f as _,s as v,g as d,k as M,a0 as N,r as c}from"../../custom-element.js";import{i as C}from"../../if.js";import{a as te,s as S}from"../../slot.js";import{s as w,c as oe}from"../../attributes.js";import"../../legacy.js";import{C as re}from"../../Cross24.js";import{O as ae}from"../overlay/Overlay.js";var ne=Z('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M8.707 6.293a1 1 0 0 1 0 1.414L5.414 11H21a1 1 0 1 1 0 2H5.414l3.293 3.293a1 1 0 1 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0"></path></svg>');function J(k,t){F(t,!1);let g=r(t,"id",12,void 0),l=r(t,"style",12,void 0),s=r(t,"className",12,void 0),b=r(t,"fill",12,void 0),m=r(t,"size",12,"1.5rem");var i=ne();return E(()=>{w(i,"id",g()),oe(i,l()),I(i,0,$(s())),w(i,"fill",b())}),h(k,i),G({get id(){return g()},set id(o){g(o),a()},get style(){return l()},set style(o){l(o),a()},get className(){return s()},set className(o){s(o),a()},get fill(){return b()},set fill(o){b(o),a()},get size(){return m()},set size(o){m(o),a()}})}customElements.define("arrow-back-24",q(J,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var le=_('<button class="mc-drawer__back mc-button mc-button--icon-button mc-button--ghost svelte-1lmi8ae" aria-label="Back"><!></button>'),de=_('<h2 class="mc-drawer__content__title svelte-1lmi8ae"> </h2>'),ce=_('<div class="mc-drawer__footer svelte-1lmi8ae"><!></div>'),ie=_('<section aria-labelledby="drawerTitle" tabindex="-1"><div class="mc-drawer__dialog svelte-1lmi8ae" role="document"><div class="mc-drawer__header svelte-1lmi8ae"><!> <h2 class="mc-drawer__title svelte-1lmi8ae" id="drawerTitle"> </h2> <button class="mc-drawer__close mc-button mc-button--icon-button mc-button--ghost svelte-1lmi8ae" aria-label="Close"><!></button></div> <div class="mc-drawer__body svelte-1lmi8ae"><div class="mc-drawer__content svelte-1lmi8ae" tabindex="0"><!> <!></div></div> <!></div> <!></section>');const se={hash:"svelte-1lmi8ae",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-drawer.svelte-1lmi8ae {box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:0.5rem;justify-content:flex-end;}
+@media (width >= 680px) {.mc-drawer.svelte-1lmi8ae {padding:1rem;}
+}.mc-drawer--left.svelte-1lmi8ae {justify-content:flex-start;}.mc-drawer--left.svelte-1lmi8ae .mc-drawer__dialog:where(.svelte-1lmi8ae) {transform:translate3d(-100%, 0, 0);}
+@media (width >= 680px) {.mc-drawer--extend.svelte-1lmi8ae .mc-drawer__dialog:where(.svelte-1lmi8ae) {max-width:39rem;}
+}.mc-drawer__dialog.svelte-1lmi8ae {background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%, 0, 0);transition:visibility 0s linear 0.4s, transform 0.4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 3);border-radius:var(--radius-l, 1rem);}
+@media (width >= 680px) {.mc-drawer__dialog.svelte-1lmi8ae {max-width:25rem;}
+}.mc-drawer__header.svelte-1lmi8ae {display:flex;align-items:center;justify-content:center;height:4rem;}.mc-drawer__icon.svelte-1lmi8ae {height:1.5rem;margin-right:0.75rem;width:1.5rem;}.mc-drawer__title.svelte-1lmi8ae {font-size:var(--font-body-s, 0.875rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--drawer-color-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1;}.mc-drawer__title.svelte-1lmi8ae:first-child {padding-left:4rem;}.mc-drawer__back.svelte-1lmi8ae, .mc-drawer__close.svelte-1lmi8ae {margin:0.5rem;}.mc-drawer__body.svelte-1lmi8ae {flex:1 1;overflow:hidden;}.mc-drawer__body.svelte-1lmi8ae:last-child {margin-bottom:1.5rem;padding-bottom:1.5rem;}.mc-drawer__content.svelte-1lmi8ae {max-height:100%;overflow:hidden auto;padding:0.5rem 1rem 0;color:var(--drawer-color-paragraph, #000000);}
+@media (width >= 680px) {.mc-drawer__content.svelte-1lmi8ae {padding:1.5rem;}
+}.mc-drawer__content__title.svelte-1lmi8ae {font-size:var(--font-title-m, 1.5rem);margin:0 0 0.5rem;}.mc-drawer__footer.svelte-1lmi8ae {display:flex;flex-direction:column;gap:1rem;padding:1rem 1.5rem;border-top:var(--border-s, 1px) solid var(--divider-color-primary, #cccccc);}
+@media (width >= 680px) {.mc-drawer__footer.svelte-1lmi8ae {justify-content:center;flex-direction:row;}
+}.mc-drawer-open.svelte-1lmi8ae {overflow:hidden;}.mc-drawer.is-open.svelte-1lmi8ae .mc-drawer__dialog:where(.svelte-1lmi8ae) {pointer-events:all;transform:translate3d(0, 0, 0);transition:visibility 0s linear 0s, transform 0.4s;visibility:visible;}.mc-button.svelte-1lmi8ae {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-radius, 0.25rem);transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button.svelte-1lmi8ae:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-1lmi8ae:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-1lmi8ae:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button__label.svelte-1lmi8ae {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-1lmi8ae {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-1lmi8ae:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-1lmi8ae:focus-visible {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-button--s.svelte-1lmi8ae {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--m.svelte-1lmi8ae {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-1lmi8ae {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-1lmi8ae {padding:0.25rem;}.mc-button--outlined.svelte-1lmi8ae {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.svelte-1lmi8ae:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-1lmi8ae:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-1lmi8ae:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.svelte-1lmi8ae {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.svelte-1lmi8ae:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-1lmi8ae:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-1lmi8ae:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--accent.svelte-1lmi8ae {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-1lmi8ae:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-1lmi8ae:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-1lmi8ae:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--danger.svelte-1lmi8ae {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-1lmi8ae:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-1lmi8ae:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-1lmi8ae:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--inverse.svelte-1lmi8ae {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff);}.mc-button--inverse.svelte-1lmi8ae:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-1lmi8ae:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-1lmi8ae:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--icon-button.svelte-1lmi8ae {border-radius:var(--radius-full, 100%);padding:0;}.mc-button--outlined.mc-button--standard.svelte-1lmi8ae {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.mc-button--standard.svelte-1lmi8ae:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-1lmi8ae:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-1lmi8ae:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--accent.svelte-1lmi8ae {color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff);}.mc-button--outlined.mc-button--accent.svelte-1lmi8ae:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-1lmi8ae:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-1lmi8ae:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--danger.svelte-1lmi8ae {color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff);}.mc-button--outlined.mc-button--danger.svelte-1lmi8ae:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-1lmi8ae:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-1lmi8ae:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--inverse.svelte-1lmi8ae {color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--outlined.mc-button--inverse.svelte-1lmi8ae:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-1lmi8ae:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-1lmi8ae:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--standard.svelte-1lmi8ae {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--standard.svelte-1lmi8ae:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-1lmi8ae:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-1lmi8ae:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--accent.svelte-1lmi8ae {color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--accent.svelte-1lmi8ae:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-1lmi8ae:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-1lmi8ae:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--danger.svelte-1lmi8ae {color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--danger.svelte-1lmi8ae:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-1lmi8ae:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-1lmi8ae:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--inverse.svelte-1lmi8ae {color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--inverse.svelte-1lmi8ae:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-1lmi8ae:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-1lmi8ae:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-overlay.svelte-1lmi8ae {filter:none;}`};function be(k,t){const g=te(t);F(t,!0),ee(k,se);let l=r(t,"open",7,!1),s=r(t,"position",7,"right"),b=r(t,"extended",7,!1),m=r(t,"back",7,!1),i=r(t,"title",7,""),o=r(t,"contentTitle",7,""),p=r(t,"updateopen",7,()=>{}),x=r(t,"backfn",7,()=>{});function A(){l(!1),p()(!1)}function K(){x()()}var u=ie();let D;var y=d(u),z=d(y),H=d(z);{var P=e=>{var n=le(),f=d(n);J(f,{"aria-hidden":"true"}),c(n),N("click",n,K),h(e,n)};C(H,e=>{m()&&e(P)})}var T=v(H,2),Q=d(T,!0);c(T);var j=v(T,2),R=d(j);re(R,{"aria-hidden":"true"}),c(j),c(z);var B=v(z,2),O=d(B),L=d(O);{var U=e=>{var n=de(),f=d(n,!0);c(n),E(()=>M(f,o())),h(e,n)};C(L,e=>{o()&&e(U)})}var V=v(L,2);S(V,t,"default",{}),c(O),c(B);var W=v(B,2);{var X=e=>{var n=ce(),f=d(n);S(f,t,"footer",{}),c(n),h(e,n)};C(W,e=>{g.footer&&e(X)})}c(y);var Y=v(y,2);return ae(Y,{get isvisible(){return l()},dialoglabel:"drawerTitle"}),c(u),E(e=>{D=I(u,1,`mc-drawer mc-drawer--${s()}`,"svelte-1lmi8ae",D,e),w(u,"aria-modal",l()?"true":"false"),w(u,"aria-hidden",!l()),M(Q,i())},[()=>({"is-open":l(),"mc-drawer--extend":b()})]),N("click",j,A),N("keydown",u,e=>e.key==="Escape"&&A()),h(k,u),G({get open(){return l()},set open(e=!1){l(e),a()},get position(){return s()},set position(e="right"){s(e),a()},get extended(){return b()},set extended(e=!1){b(e),a()},get back(){return m()},set back(e=!1){m(e),a()},get title(){return i()},set title(e=""){i(e),a()},get contentTitle(){return o()},set contentTitle(e=""){o(e),a()},get updateopen(){return p()},set updateopen(e=()=>{}){p(e),a()},get backfn(){return x()},set backfn(e=()=>{}){x(e),a()}})}customElements.define("m-drawer",q(be,{open:{},position:{},extended:{},back:{},title:{},contentTitle:{},updateopen:{},backfn:{}},["default","footer"],[],!0));
+//# sourceMappingURL=Drawer.js.map

package/dist/components/drawer/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ArrowBack24/ArrowBack24.svelte","../../../src/components/drawer/Drawer.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'arrow-back-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M8.707 6.293a1 1 0 0 1 0 1.414L5.414 11H21a1 1 0 1 1 0 2H5.414l3.293 3.293a1 1 0 1 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0\"/></svg>","<svelte:options customElement={{ tag: 'm-drawer' }} />\n\n<script lang=\"ts\">\n  import ArrowBack24 from '@mozaic-ds/icons-svelte/svelte/ArrowBack24/ArrowBack24.svelte';\n  import Cross24 from '@mozaic-ds/icons-svelte/svelte/Cross24/Cross24.svelte';\n  import MOverlay from '../overlay/Overlay.svelte';\n\n  interface Props {\n    open?: boolean;\n    position?: 'left' | 'right';\n    extended?: boolean;\n    back?: boolean;\n    title: string;\n    contentTitle?: string;\n    updateopen?: (value: boolean) => void;\n    backfn?: () => void;\n    [key: string]: any;\n  }\n\n  let {\n    open = false,\n    position = 'right',\n    extended = false,\n    back = false,\n    title = '',\n    contentTitle = '',\n    updateopen = () => {},\n    backfn = () => {},\n  }: Props = $props();\n\n  function onClose() {\n    open = false;\n    updateopen(false);\n  }\n\n  function onBack() {\n    backfn();\n  }\n</script>\n\n<section\n  class={`mc-drawer mc-drawer--${position}`}\n  class:is-open={open}\n  class:mc-drawer--extend={extended}\n  aria-labelledby=\"drawerTitle\"\n  aria-modal={open ? 'true' : 'false'}\n  tabindex=\"-1\"\n  aria-hidden={!open}\n  on:keydown={(e) => e.key === 'Escape' && onClose()}\n>\n  <div class=\"mc-drawer__dialog\" role=\"document\">\n    <div class=\"mc-drawer__header\">\n      {#if back}\n        <button\n          class=\"mc-drawer__back mc-button mc-button--icon-button mc-button--ghost\"\n          aria-label=\"Back\"\n          on:click={onBack}\n        >\n          <ArrowBack24 aria-hidden=\"true\" />\n        </button>\n      {/if}\n      <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{title}</h2>\n      <button\n        class=\"mc-drawer__close mc-button mc-button--icon-button mc-button--ghost\"\n        aria-label=\"Close\"\n        on:click={onClose}\n      >\n        <Cross24 aria-hidden=\"true\" />\n      </button>\n    </div>\n\n    <div class=\"mc-drawer__body\">\n      <div class=\"mc-drawer__content\" tabindex=\"0\">\n        {#if contentTitle}\n          <h2 class=\"mc-drawer__content__title\">{contentTitle}</h2>\n        {/if}\n        <slot />\n      </div>\n    </div>\n\n    {#if $$slots.footer}\n      <div class=\"mc-drawer__footer\">\n        <slot name=\"footer\" />\n      </div>\n    {/if}\n  </div>\n  <MOverlay isvisible={open} dialoglabel=\"drawerTitle\" />\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/drawer';\n  @use '@mozaic-ds/styles/components/button';\n\n  .mc-overlay {\n    filter: none;\n  }\n</style>\n"],"names":["id","style","className","fill","size","open","position","extended","back","title","contentTitle","updateopen","$.prop","$$props","backfn","onClose","onBack","$$render","consequent","consequent_1","$$slots","consequent_2","classes","$0","$.event","section","$$value"],"mappings":"gsBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,oCAGAJ,GAAE,OAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,wPAF3E;;;;;;;;;;;;+5WCPA,gCAoBI,IAAAE,eAAO,EAAK,EACZC,mBAAW,OAAO,EAClBC,mBAAW,EAAK,EAChBC,eAAO,EAAK,EACZC,gBAAQ,EAAE,EACVC,uBAAe,EAAE,EACjBC,EAAUC,EAAAC,EAAA,aAAA,EAAA,IAAS,CAAA,CAAE,EACrBC,EAAMF,EAAAC,EAAA,SAAA,EAAA,IAAS,CAAA,CAAE,EAGV,SAAAE,GAAU,CACjBV,EAAO,EAAK,EACZM,EAAU,EAAC,EAAK,CAClB,CAES,SAAAK,GAAS,CAChBF,IAAM,CACR,qHAmBkBE,CAAM,kBAJfR,EAAI,GAAAS,EAAAC,CAAA,qKAsBkCR,EAAY,CAAA,CAAA,kBADhDA,EAAY,GAAAO,EAAAE,CAAA,iIAOhBC,EAAQ,QAAMH,EAAAI,CAAA,0DAMAhB,EAAI,0EA7CMC,EAAQ,CAAA,GAAA,iBAAAgB,EAAAC,CAAA,mBAI3BlB,EAAI,EAAG,OAAS,OAAO,qBAErBA,EAAI,CAAA,MAciCI,GAAK,IAnBzC,KAAA,CAAA,UAAAJ,wBACUE,EAAQ,CAAA,iBAsBjBQ,CAAO,EAjBVS,EAAA,UAAAC,EAAA,GAAM,EAAE,MAAQ,UAAYV,GAAO,8CA5BvC,GAAK,qDACD,QAAO,qDACP,GAAK,6CACT,GAAK,+CACJ,GAAE,6DACK,GAAE,wCACE,IAAA,WAAAW,EAAA,IAAA,GAAE,oCACN,IAAA,OAAAA,EAAA,IAAA,GAAE,YAWrB","x_google_ignoreList":[0]}