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

package/dist/adeo/components/groupedbarchart/GroupedBarChart.svelte

@@ -0,0 +1,448 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import {
+    select,
+    scaleBand,
+    scaleLinear,
+    axisBottom,
+    axisLeft,
+    Selection,
+    ScaleBand,
+    ScaleLinear,
+    NumberValue,
+    axisRight,
+  } from 'd3';
+  import { onMount } from 'svelte';
+  import { EventHandler } from '../../utilities/EventHandler';
+  import type {
+    GroupedBarData,
+    GroupedBarKeyValue,
+    BarMargin,
+  } from './grouped-bar-chart.types';
+  import {
+    get_current_component,
+    createEventDispatcher,
+  } from 'svelte/internal';
+
+  export let data = '';
+  let subgroups: string[];
+  $: parsedData = data
+    ? (JSON.parse(data) as GroupedBarData[])
+    : ([] as GroupedBarData[]);
+  $: groups = parsedData.map((d: GroupedBarData) => 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 leftscalemax = 50;
+  export let rightscalemax: number;
+  export let color = '#0B96CC';
+  export let ticknumbers = 4;
+  export let tickleftformat: (d: NumberValue, i: number) => string = (d) =>
+    `${Number(d)}`;
+  export let tickbottomformat: (d: NumberValue, i: number) => string = (d) =>
+    `${d}`;
+  export let tickrightformat: (d: NumberValue, i: number) => string = (d) =>
+    `${Number(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(),
+  );
+  let leftScaleWidth = 0;
+  let width = 0;
+
+  $: 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: GroupedBarData): GroupedBarKeyValue[] {
+    return subgroups.map((key) => ({
+      key: key,
+      value: d[key].value,
+      scalePosition: d[key].scalePosition,
+      color: d[key].color,
+      customtooltip: d[key].customtooltip,
+    }));
+  }
+
+  function getAxes(width: number) {
+    // If there is no right scale, we only remove the right margin as the axis should continue to the edge of the chart
+    const xWidth = rightscalemax
+      ? width -
+        (getParsedMargins(margins).left + getParsedMargins(margins).right)
+      : width - getParsedMargins(margins).right;
+    const x = scaleBand().domain(groups).range([0, xWidth]).padding(0.2);
+    const yleft = scaleLinear().domain([0, leftscalemax]).range([height, 0]);
+    const yright = scaleLinear().domain([0, rightscalemax]).range([height, 0]);
+    const xSubgroup = scaleBand()
+      .domain(subgroups)
+      .range([0, x.bandwidth()])
+      .padding(0.05);
+    return { x, yleft, yright, xSubgroup };
+  }
+
+  function getAxisWidth(position: 'left' | 'right') {
+    const { width } = chart
+      .getElementsByClassName(`y-${position}-axis`)[0]
+      .getBoundingClientRect();
+    return width;
+  }
+
+  function addRectandles(
+    x: ScaleBand<string>,
+    xSubgroup: ScaleBand<string>,
+    yleft: ScaleLinear<number, number, never>,
+    yright: 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', (d) => (d.scalePosition === 'right' ? yright(0) : yleft(0)))
+      .attr('width', xSubgroup.bandwidth())
+      .attr(
+        'height',
+        (d) => height - (d.scalePosition === 'right' ? yright(0) : yleft(0)),
+      )
+      .style('fill', (d) => d.color || color)
+      .style('cursor', 'pointer')
+      .on('mouseout', (_e: MouseEvent, chartEvent: GroupedBarKeyValue) => {
+        const others = svg.selectAll('rect').filter(function (arc) {
+          return arc != chartEvent;
+        });
+        others.style('opacity', 1);
+        tooltipData.show = false;
+      })
+      .on('mouseover', (e: MouseEvent, chartEvent: GroupedBarKeyValue) => {
+        const others = svg.selectAll('rect').filter(function (arc) {
+          return arc != chartEvent;
+        });
+        others.style('opacity', 0.7);
+        const { left, top, width } = (
+          e.target as HTMLElement
+        ).parentElement?.getBoundingClientRect() ?? {
+          left: 0,
+          top: 0,
+          width: 0,
+        };
+        tooltipData = {
+          show: true,
+          text: chartEvent.customtooltip
+            ? `${chartEvent.customtooltip}`
+            : `${chartEvent.key} - ${chartEvent.value}`,
+          left: left,
+          top: top - 50,
+          width,
+        };
+      })
+
+      .on('click', (_e: MouseEvent, chartEvent: GroupedBarKeyValue) => {
+        eventHandler.dispatch('bar-clicked', chartEvent);
+      });
+
+    svg
+      .selectAll<SVGElement, GroupedBarKeyValue>('rect')
+      .transition()
+      .duration(800)
+      .attr('y', (d) =>
+        d.scalePosition === 'right' ? yright(+d.value) : yleft(+d.value),
+      )
+      .attr(
+        'height',
+        (d) =>
+          height -
+          (d.scalePosition === 'right' ? yright(+d.value) : yleft(+d.value)),
+      )
+      .delay((_d, i) => i * 100);
+  }
+
+  function updateAxes(
+    x: ScaleBand<string>,
+    yleft: ScaleLinear<number, number, never>,
+    yright: 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-left-axis')
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+      .call(
+        (axisLeft(yleft) as any).ticks(ticknumbers).tickFormat(tickleftformat),
+      );
+
+    if (rightscalemax) {
+      svg
+        .select('.y-right-axis')
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+        .call(
+          (axisRight(yright) as any)
+            .ticks(ticknumbers)
+            .tickFormat(tickrightformat),
+        )
+        .attr(
+          'transform',
+          // Right scale should be at width minus the width of the left scale plus its marging
+          `translate(${
+            width - getParsedMargins(margins).left - leftScaleWidth
+          },0)`,
+        );
+    }
+
+    // x2 is the end of left scale line and should stops where right scale starts (ie: same position)
+    const x2 = rightscalemax
+      ? width - getParsedMargins(margins).left - leftScaleWidth
+      : width - leftScaleWidth;
+    svg
+      .selectAll('.y-left-axis .tick line')
+      .attr('stroke', '#EEEDEA')
+      .attr('stroke-width', '1px')
+      .attr('x2', x2);
+  }
+
+  function render() {
+    width = getChartWidth();
+    const { x, yleft, yright, 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')
+      .call(axisLeft(yleft).ticks(ticknumbers).tickFormat(tickleftformat))
+      .attr('class', 'y-left-axis')
+      .attr('stroke-width', '0');
+    leftScaleWidth = getAxisWidth('left');
+
+    if (rightscalemax) {
+      svg
+        .append('g')
+        .call(axisRight(yright).ticks(ticknumbers).tickFormat(tickleftformat))
+        .attr('class', 'y-right-axis')
+        .attr(
+          'transform',
+          // Right scale should be at width minus the width of the left scale plus its marging
+          `translate(${
+            width - getParsedMargins(margins).left - leftScaleWidth
+          },0)`,
+        )
+        .attr('stroke-width', '0');
+    }
+
+    addRectandles(x, xSubgroup, yleft, yright);
+  }
+
+  function update() {
+    chart.querySelector('#svg-chart')?.setAttribute('width', `${width}px`);
+
+    const { x, yleft, yright, xSubgroup } = getAxes(width);
+    updateAxes(x, yleft, yright);
+    svg.selectAll('.bar').remove();
+    addRectandles(x, xSubgroup, yleft, yright);
+  }
+
+  function resize() {
+    width = getChartWidth();
+    if (_data) {
+      const width = getChartWidth();
+      chart.querySelector('#svg-chart')?.setAttribute('width', `${width}px`);
+
+      const { x, yleft, yright, xSubgroup } = getAxes(width);
+      updateAxes(x, yleft, yright);
+
+      svg
+        .selectAll('.bar')
+        .data(parsedData)
+        .attr('transform', (d) => `translate(${String(x(d.group))}, 0)`)
+        .selectAll<SVGElement, GroupedBarKeyValue>('rect')
+        .data((d) => getBarKeyValue(d))
+        .attr('x', (d) => xSubgroup(d.key)!)
+        .attr('width', xSubgroup.bandwidth());
+    }
+  }
+
+  function getLegendColor(
+    subgroup: string,
+    parsedData: GroupedBarData[],
+  ): string {
+    if (parsedData.length > 0) return parsedData[0][subgroup]?.color;
+    return '';
+  }
+
+  onMount(() => {
+    const resizeObserver = new ResizeObserver(resize);
+    resizeObserver.observe(chart);
+    hasMounted = true;
+  });
+</script>
+
+<div bind:this={chart} style="background-color: {backgroundcolor};" />
+
+<div class="legend">
+  {#each subgroups as subgroup}
+    <div class="legend__item">
+      <svg class="legend__box">
+        <rect
+          x="0"
+          y="0"
+          width="24"
+          height="16"
+          fill={getLegendColor(subgroup, parsedData)}
+        />
+      </svg>
+      <span class="legend__title">{subgroup}</span>
+    </div>
+  {/each}
+</div>
+
+{#if tooltipData.show}
+  <div
+    class="tooltip"
+    style={`top: ${tooltipData.top}px; left: ${tooltipData.left}px; width: ${tooltipData.width}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';
+
+  .legend {
+    margin-top: magic-unit-rem(1);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 magic-unit-rem(1.5);
+    height: 100%;
+    color: $color-grey-999;
+    gap: magic-unit-rem(1);
+
+    &__item {
+      display: flex;
+      justify-content: center;
+      font-size: $size-font-04;
+      align-items: center;
+    }
+
+    &__title {
+      white-space: nowrap;
+      margin: 0;
+    }
+
+    &__box {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: magic-unit-rem(0.25);
+      height: 16px;
+      width: 24px;
+    }
+  }
+
+  .tooltip {
+    height: auto;
+    background-color: $color-grey-700;
+    border-radius: 4px;
+    color: $color-grey-000;
+    text-align: center;
+    padding: magic-unit-rem(0.5) 0;
+    position: absolute;
+  }
+
+  .pattern {
+    z-index: -1;
+    position: absolute;
+  }
+
+  text {
+    font-family: 'LeroyMerlin', sans-serif;
+    font-size: $size-font-04;
+    color: $color-grey-700;
+  }
+</style>

package/dist/adeo/components/header/Header.js

@@ -0,0 +1,2 @@
+import{S as e,i as t,a,g as r,b as i,f as s,s as n,c as d,e as l,d as c,v as o,n as m,h,j as b,t as g,k as p,B as u,z as _,A as f,y as x,l as $,m as w,o as y,p as k,q as v,r as z,u as E,E as j,F as T,G as H,x as N,C as O,K as S}from"../../index-c222d0b7.js";import{E as B}from"../../EventHandler-f7ee47ca.js";import C from"../breadcrumb/Breadcrumb.nested.js";import J from"../tabs/Tabs.nested.js";import L from"../badge/Badge.nested.js";function M(e){let t,a,r;return a=new C({props:{items:JSON.stringify(e[17]),nopadding:e[6]}}),a.$on("link-clicked",e[26]),{c(){t=l("div"),j(a.$$.fragment),h(t,"class","mc-header__breadcrumb")},m(e,s){i(e,t,s),T(a,t,null),r=!0},p(e,t){const r={};131072&t[0]&&(r.items=JSON.stringify(e[17])),64&t[0]&&(r.nopadding=e[6]),a.$set(r)},i(e){r||(u(a.$$.fragment,e),r=!0)},o(e){_(a.$$.fragment,e),r=!1},d(e){e&&w(t),H(a)}}}function R(e){let t,a,r,s,n,d=(e[15]?.back||"Back")+"";return{c(){t=l("button"),a=l("span"),r=o(d),h(a,"class","mc-header__back__label"),h(t,"class","mc-header__back")},m(d,l){i(d,t,l),p(t,a),p(a,r),s||(n=N(t,"click",e[19]),s=!0)},p(e,t){32768&t[0]&&d!==(d=(e[15]?.back||"Back")+"")&&x(r,d)},d(e){e&&w(t),s=!1,n()}}}function A(e){let t,a;return{c(){t=l("div"),a=o(e[1]),h(t,"class","mc-header__heading__subtitle")},m(e,r){i(e,t,r),p(t,a)},p(e,t){2&t[0]&&x(a,e[1])},d(e){e&&w(t)}}}function q(e){let t,a,r;return a=new L({props:{label:e[3],type:e[4]}}),{c(){t=l("div"),j(a.$$.fragment),h(t,"class","mc-header__heading__status")},m(e,s){i(e,t,s),T(a,t,null),r=!0},p(e,t){const r={};8&t[0]&&(r.label=e[3]),16&t[0]&&(r.type=e[4]),a.$set(r)},i(e){r||(u(a.$$.fragment,e),r=!0)},o(e){_(a.$$.fragment,e),r=!1},d(e){e&&w(t),H(a)}}}function F(e){let t,a,r=(e[20]?.icons||e[7])&&G(),s=(e[20]?.selector||e[8])&&K(e);return{c(){t=l("div"),r&&r.c(),a=c(),s&&s.c(),h(t,"class","mc-header__right")},m(e,n){i(e,t,n),r&&r.m(t,null),p(t,a),s&&s.m(t,null)},p(e,i){e[20]?.icons||e[7]?r||(r=G(),r.c(),r.m(t,a)):r&&(r.d(1),r=null),e[20]?.selector||e[8]?s?s.p(e,i):(s=K(e),s.c(),s.m(t,null)):s&&(s.d(1),s=null)},d(e){e&&w(t),r&&r.d(),s&&s.d()}}}function G(e){let t;return{c(){t=l("div"),t.innerHTML='<slot name="icons"></slot>',h(t,"class","mc-header__icons")},m(e,a){i(e,t,a)},d(e){e&&w(t)}}}function K(e){let t;return{c(){t=l("div"),t.innerHTML='<slot name="selector"></slot>',h(t,"class","mc-header__selector"),g(t,"mc-header__selector--show-separator",(e[20]?.icons||e[7])&&(e[20]?.selector||e[8]))},m(e,a){i(e,t,a)},p(e,a){1048960&a[0]&&g(t,"mc-header__selector--show-separator",(e[20]?.icons||e[7])&&(e[20]?.selector||e[8]))},d(e){e&&w(t)}}}function D(e){let t,a,r;return a=new J({props:{tabs:JSON.stringify(e[16]),stateless:!1,selectedtab:void 0,nodivider:!0}}),a.$on("tab-clicked",e[27]),{c(){t=l("div"),j(a.$$.fragment),h(t,"class","mc-header__tabs")},m(e,s){i(e,t,s),T(a,t,null),r=!0},p(e,t){const r={};65536&t[0]&&(r.tabs=JSON.stringify(e[16])),a.$set(r)},i(e){r||(u(a.$$.fragment,e),r=!0)},o(e){_(a.$$.fragment,e),r=!1},d(e){e&&w(t),H(a)}}}function I(e){let t,a,r,s,n,y,k,v,z,E,j,T,H,N=e[5]&&M(e),S=e[14]&&R(e),B=e[1]&&A(e),C=e[3]&&q(e),J=!e[9]&&F(e),L=e[16]&&e[16].length>0&&D(e),G=[{class:T="mc-header "+(e[2]?`mc-header--${e[2]}`:"")},e[10]],K={};for(let e=0;e<G.length;e+=1)K=d(K,G[e]);return{c(){t=l("div"),a=l("div"),N&&N.c(),r=c(),S&&S.c(),s=c(),n=l("div"),y=l("h1"),k=o(e[0]),v=c(),B&&B.c(),z=c(),C&&C.c(),E=c(),J&&J.c(),j=c(),L&&L.c(),this.c=m,h(y,"class","mc-header__heading__title"),h(n,"class","mc-header__heading"),h(a,"class","mc-header__left"),b(t,K),g(t,"mc-header--no-shadow",e[13]),g(t,"mc-header--animate",e[11])},m(d,l){i(d,t,l),p(t,a),N&&N.m(a,null),p(a,r),S&&S.m(a,null),p(a,s),p(a,n),p(n,y),p(y,k),p(n,v),B&&B.m(n,null),p(n,z),C&&C.m(n,null),p(t,E),J&&J.m(t,null),p(t,j),L&&L.m(t,null),e[28](t),H=!0},p(e,i){e[5]?N?(N.p(e,i),32&i[0]&&u(N,1)):(N=M(e),N.c(),u(N,1),N.m(a,r)):N&&(O(),_(N,1,1,(()=>{N=null})),f()),e[14]?S?S.p(e,i):(S=R(e),S.c(),S.m(a,s)):S&&(S.d(1),S=null),(!H||1&i[0])&&x(k,e[0]),e[1]?B?B.p(e,i):(B=A(e),B.c(),B.m(n,z)):B&&(B.d(1),B=null),e[3]?C?(C.p(e,i),8&i[0]&&u(C,1)):(C=q(e),C.c(),u(C,1),C.m(n,null)):C&&(O(),_(C,1,1,(()=>{C=null})),f()),e[9]?J&&(J.d(1),J=null):J?J.p(e,i):(J=F(e),J.c(),J.m(t,j)),e[16]&&e[16].length>0?L?(L.p(e,i),65536&i[0]&&u(L,1)):(L=D(e),L.c(),u(L,1),L.m(t,null)):L&&(O(),_(L,1,1,(()=>{L=null})),f()),b(t,K=$(G,[(!H||4&i[0]&&T!==(T="mc-header "+(e[2]?`mc-header--${e[2]}`:"")))&&{class:T},1024&i[0]&&e[10]])),g(t,"mc-header--no-shadow",e[13]),g(t,"mc-header--animate",e[11])},i(e){H||(u(N),u(C),u(L),H=!0)},o(e){_(N),_(C),_(L),H=!1},d(a){a&&w(t),N&&N.d(),S&&S.d(),B&&B.d(),C&&C.d(),J&&J.d(),L&&L.d(),e[28](null)}}}function P(e,t,a){let r,i,s,n,l,c;const o=["title","subtitle","size","status","statustype","back","breadcrumb","tabs","noshadow","a11ylabels","scrollcontainer","nopaddingbreadcrumb","hasicons","hasselector","hideoptions"];let m=y(t,o),{$$slots:h={},$$scope:b}=t;const g=k(h);let p,u,{title:_}=t,{subtitle:f}=t,{size:x="m"}=t,{status:$}=t,{statustype:w}=t,{back:j}=t,{breadcrumb:T}=t,{tabs:H}=t,{noshadow:N}=t,{a11ylabels:O}=t,{scrollcontainer:C}=t,{nopaddingbreadcrumb:J}=t,{hasicons:L}=t,{hasselector:M}=t,{hideoptions:R=!1}=t,A=new B(v(),z()),q=0;function F(){const e=C.scrollTop,t=Number(u.style.marginTop.replace("px",""));q>e?e<u.offsetHeight?a(12,u.style.marginTop=`${Math.max(-e,t)}px`,u):a(12,u.style.marginTop="0",u):e<u.offsetHeight?(a(12,u.style.transition="none",u),a(12,u.style.marginTop=-e+"px",u)):(a(12,u.style.transition="margin-top ease-out 0.4s",u),a(12,u.style.marginTop=-u.offsetHeight-5+"px",u)),q=e}return e.$$set=e=>{t=d(d({},t),E(e)),a(32,m=y(t,o)),"title"in e&&a(0,_=e.title),"subtitle"in e&&a(1,f=e.subtitle),"size"in e&&a(2,x=e.size),"status"in e&&a(3,$=e.status),"statustype"in e&&a(4,w=e.statustype),"back"in e&&a(21,j=e.back),"breadcrumb"in e&&a(5,T=e.breadcrumb),"tabs"in e&&a(22,H=e.tabs),"noshadow"in e&&a(23,N=e.noshadow),"a11ylabels"in e&&a(24,O=e.a11ylabels),"scrollcontainer"in e&&a(25,C=e.scrollcontainer),"nopaddingbreadcrumb"in e&&a(6,J=e.nopaddingbreadcrumb),"hasicons"in e&&a(7,L=e.hasicons),"hasselector"in e&&a(8,M=e.hasselector),"hideoptions"in e&&a(9,R=e.hideoptions)},e.$$.update=()=>{32&e.$$.dirty[0]&&a(17,r="string"==typeof T?JSON.parse(T):T),4194304&e.$$.dirty[0]&&a(16,i="string"==typeof H?JSON.parse(H):H),16777216&e.$$.dirty[0]&&a(15,s="string"==typeof O?JSON.parse(O):O),2097152&e.$$.dirty[0]&&a(14,n=j&&"false"!==j),8388608&e.$$.dirty[0]&&a(13,l=N&&"false"!==N),33554432&e.$$.dirty[0]&&(a(11,p=Boolean(C)),function(e){e&&(e.removeEventListener("scroll",F),e.addEventListener("scroll",F))}(C)),a(10,c=Object.assign({},m)),1024&e.$$.dirty[0]&&delete c.class},[_,f,x,$,w,T,J,L,M,R,c,p,u,l,n,s,i,r,A,function(){A.dispatch("on-back-click",{})},g,j,H,N,O,C,e=>A.dispatch("link-clicked",e.detail),e=>A.dispatch("tab-clicked",e.detail),function(e){S[e?"unshift":"push"]((()=>{u=e,a(12,u)}))}]}class Q extends e{constructor(e){super();const d=document.createElement("style");d.textContent=".mc-header{background-color:#ffffff;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-shadow:0px 4px 5px rgba(0, 0, 0, 0.2);box-shadow:0px 4px 5px rgba(0, 0, 0, 0.2);font-family:\"Roboto\", sans-serif;font-weight:400}.mc-header .mc-header__back{height:2.25rem}.mc-header .mc-header__heading__title{font-size:1.75rem;line-height:1.2857142857}.mc-header__left{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:1rem;padding-top:0.5rem;padding-left:2rem}.mc-header__right{-webkit-box-flex:0;-ms-flex:0;flex:0;display:-webkit-box;display:-ms-flexbox;display:flex;margin-left:1.5rem;margin-bottom:1rem;padding-top:1rem;padding-right:2rem;height:2rem;width:28rem;min-width:28rem;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mc-header__tabs{width:100%;position:relative;padding-left:2rem;padding-right:2rem}.mc-header__tabs::before{content:\"\";background-color:#b3b3b3;top:0;right:0;height:1px;position:absolute;width:100%;z-index:1}.mc-header__breadcrumb{height:3rem;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mc-header__back{margin:0;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;background-color:transparent;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2rem' width='2rem' viewBox='0 0 32 32' fill='%23333333'%3E%3Cpath d='M28 15H6.41l6.3-6.29a1 1 0 10-1.42-1.42l-8 8a1.15 1.15 0 00-.21.33 1 1 0 000 .76.93.93 0 00.21.33l8 8a1 1 0 001.42 0 1 1 0 000-1.42L6.41 17H28a1 1 0 000-2z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:center;background-size:2rem;color:currentColor;display:inline-block;-webkit-box-flex:0;-ms-flex:0 0 2rem;flex:0 0 2rem;margin-top:0.5rem;margin-right:1rem;height:2rem}.mc-header__back__label{font-size:0;height:1px;overflow:hidden;display:block}.mc-header__heading{display:inline-block;width:calc(100% - 3em)}.mc-header__heading__title{font-weight:700;color:#191919;width:100%;margin-top:0.5rem;margin-bottom:0}.mc-header__heading__subtitle{font-weight:400;color:#191919;display:inline-block;margin-top:0.25rem;margin-bottom:0}.mc-header__heading__status{font-weight:400;display:inline-block;margin-top:0.25rem;margin-bottom:0}.mc-header__heading__subtitle+.mc-header__heading__status{margin-left:1rem}.mc-header__icons{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;max-width:9rem;width:9rem}.mc-header__selector{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;padding-left:0;margin-left:1.5rem;max-width:16rem;width:16rem}.mc-header__selector--show-separator{padding-left:1.5rem}.mc-header__selector--show-separator::before{content:\"\";background-color:#b3b3b3;left:0;height:100%;position:absolute;width:1px}.mc-header--no-shadow{-webkit-box-shadow:none;box-shadow:none}.mc-header--animate{margin-top:0px;-webkit-transition:margin-top ease-out 0.4s;transition:margin-top ease-out 0.4s;width:100%}@media screen and (min-width: 360px){.mc-header__breadcrumb{margin-left:-1.25rem;margin-right:1.25rem}.mc-header__left{padding-left:1rem}.mc-header__right{padding-right:1rem}.mc-header__tabs{padding-left:1rem;padding-right:1rem}}@media screen and (min-width: 390px){.mc-header__breadcrumb{margin-left:-magic-unit-rem(1.375, \"true\");margin-right:1.375rem}}@media screen and (min-width: 680px){.mc-header__breadcrumb{margin-left:-2rem;margin-right:2rem}}@media screen and (min-width: 769px){.mc-header__breadcrumb{margin-left:-magic-unit-rem(2.125, \"true\");margin-right:2.125rem}.mc-header__left{padding-left:2rem}.mc-header__right{padding-right:2rem}.mc-header__tabs{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1024px){.mc-header__breadcrumb{margin-left:-3rem;margin-right:3rem}.mc-header__left{padding-left:3rem}.mc-header__right{padding-right:3rem}.mc-header__tabs{padding-left:3rem;padding-right:3rem}}@media screen and (min-width: 1280px){.mc-header__breadcrumb{margin-left:-2rem;margin-right:2rem}.mc-header__left{padding-left:2rem}.mc-header__right{padding-right:2rem}.mc-header__tabs{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1440px){.mc-header__breadcrumb{margin-left:-7rem;margin-right:7rem}}@media screen and (min-width: 1680px){.mc-header__breadcrumb{margin-left:-2rem;margin-right:2rem}}@media screen and (min-width: 1920px){.mc-header__breadcrumb{margin-left:-2.5rem;margin-right:2.5rem}}.mc-header--s .mc-header__back{height:2rem}.mc-header--s .mc-header__heading__title{font-size:1.4375rem;line-height:1.3913043478}.mc-header--l .mc-header__back{height:2.75rem}.mc-header--l .mc-header__heading__title{font-size:2.125rem;line-height:1.2941176471}:host{display:block;line-height:0}",this.shadowRoot.appendChild(d),t(this,{target:this.shadowRoot,props:{...a(this.attributes),$$slots:r(this)},customElement:!0},P,I,n,{title:0,subtitle:1,size:2,status:3,statustype:4,back:21,breadcrumb:5,tabs:22,noshadow:23,a11ylabels:24,scrollcontainer:25,nopaddingbreadcrumb:6,hasicons:7,hasselector:8,hideoptions:9},null,[-1,-1]),e&&(e.target&&i(e.target,this,e.anchor),e.props&&(this.$set(e.props),s()))}static get observedAttributes(){return["title","subtitle","size","status","statustype","back","breadcrumb","tabs","noshadow","a11ylabels","scrollcontainer","nopaddingbreadcrumb","hasicons","hasselector","hideoptions"]}get title(){return this.$$.ctx[0]}set title(e){this.$$set({title:e}),s()}get subtitle(){return this.$$.ctx[1]}set subtitle(e){this.$$set({subtitle:e}),s()}get size(){return this.$$.ctx[2]}set size(e){this.$$set({size:e}),s()}get status(){return this.$$.ctx[3]}set status(e){this.$$set({status:e}),s()}get statustype(){return this.$$.ctx[4]}set statustype(e){this.$$set({statustype:e}),s()}get back(){return this.$$.ctx[21]}set back(e){this.$$set({back:e}),s()}get breadcrumb(){return this.$$.ctx[5]}set breadcrumb(e){this.$$set({breadcrumb:e}),s()}get tabs(){return this.$$.ctx[22]}set tabs(e){this.$$set({tabs:e}),s()}get noshadow(){return this.$$.ctx[23]}set noshadow(e){this.$$set({noshadow:e}),s()}get a11ylabels(){return this.$$.ctx[24]}set a11ylabels(e){this.$$set({a11ylabels:e}),s()}get scrollcontainer(){return this.$$.ctx[25]}set scrollcontainer(e){this.$$set({scrollcontainer:e}),s()}get nopaddingbreadcrumb(){return this.$$.ctx[6]}set nopaddingbreadcrumb(e){this.$$set({nopaddingbreadcrumb:e}),s()}get hasicons(){return this.$$.ctx[7]}set hasicons(e){this.$$set({hasicons:e}),s()}get hasselector(){return this.$$.ctx[8]}set hasselector(e){this.$$set({hasselector:e}),s()}get hideoptions(){return this.$$.ctx[9]}set hideoptions(e){this.$$set({hideoptions:e}),s()}}export{Q as default};
+//# sourceMappingURL=Header.js.map

package/dist/adeo/components/header/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sources":["../../../../src/components/header/Header.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import { EventHandler } from '../../utilities/EventHandler';\n  import Breadcrumb from '../breadcrumb/Breadcrumb.nested.svelte';\n  import type { BreadcrumbItems } from '../breadcrumb/breadcrumb.types';\n  import Tabs from '../tabs/Tabs.nested.svelte';\n  import type { TabsItems } from '../tabs/tabs.types';\n  import Badge from '../badge/Badge.nested.svelte';\n  import type { BadgeType } from '../badge/badge.types';\n  import type { A11yLabels, HeaderSize } from './Header.types';\n  import {\n    get_current_component,\n    createEventDispatcher,\n  } from 'svelte/internal';\n\n  export let title: string;\n  export let subtitle: string;\n  export let size: HeaderSize = 'm';\n  export let status: string;\n  export let statustype: BadgeType;\n  export let back: boolean | string;\n  export let breadcrumb: string | BreadcrumbItems[];\n  export let tabs: string | TabsItems[];\n  export let noshadow: boolean | string;\n  export let a11ylabels: string | A11yLabels;\n  export let scrollcontainer: HTMLElement;\n  export let nopaddingbreadcrumb: boolean;\n  export let hasicons: boolean;\n  export let hasselector: boolean;\n  export let hideoptions = false;\n\n  const headerAnimationThreshold = 5;\n\n  let eventHandler = new EventHandler(\n    get_current_component(),\n    createEventDispatcher(),\n  );\n  let originalScrollPos = 0;\n  let hasAnimation: boolean;\n  let root: HTMLElement;\n\n  $: parsedBreadcrumb =\n    typeof breadcrumb === 'string'\n      ? (JSON.parse(breadcrumb) as BreadcrumbItems[])\n      : breadcrumb;\n\n  $: parsedTabs =\n    typeof tabs === 'string' ? (JSON.parse(tabs) as TabsItems[]) : tabs;\n\n  $: parsedA11yLabels =\n    typeof a11ylabels === 'string'\n      ? (JSON.parse(a11ylabels) as A11yLabels)\n      : a11ylabels;\n\n  $: hasBack = back && back !== 'false';\n  $: hasNoShadow = noshadow && noshadow !== 'false';\n  $: {\n    hasAnimation = Boolean(scrollcontainer);\n    updateAnimation(scrollcontainer);\n  }\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n  function goBack() {\n    eventHandler.dispatch('on-back-click', {});\n  }\n\n  function updateAnimation(element: HTMLElement) {\n    if (element) {\n      element.removeEventListener('scroll', handleScroll);\n      element.addEventListener('scroll', handleScroll);\n    }\n  }\n\n  function handleScroll() {\n    const currentScrollPos = scrollcontainer.scrollTop;\n    const originHeaderMargin = Number(root.style.marginTop.replace('px', ''));\n\n    if (originalScrollPos > currentScrollPos) {\n      // scroll up\n      if (currentScrollPos < root.offsetHeight) {\n        // scroll while in header zone\n        root.style.marginTop = `${Math.max(\n          -currentScrollPos,\n          originHeaderMargin,\n        )}px`;\n      } else {\n        // scroll while below header zone\n        root.style.marginTop = '0';\n      }\n    } else {\n      // scroll down\n      if (currentScrollPos < root.offsetHeight) {\n        // scroll while in header zone\n\n        root.style.transition = 'none';\n        root.style.marginTop = `${-currentScrollPos}px`;\n      } else {\n        // scroll while below header zone\n        root.style.transition = 'margin-top ease-out 0.4s';\n        root.style.marginTop = `${\n          -root.offsetHeight - headerAnimationThreshold\n        }px`;\n      }\n    }\n\n    originalScrollPos = currentScrollPos;\n  }\n</script>\n\n<div\n  class=\"mc-header {size ? `mc-header--${size}` : ''}\"\n  class:mc-header--no-shadow={hasNoShadow}\n  class:mc-header--animate={hasAnimation}\n  bind:this={root}\n  {...attributes}\n>\n  <div class=\"mc-header__left\">\n    {#if breadcrumb}\n      <div class=\"mc-header__breadcrumb\">\n        <Breadcrumb\n          items={JSON.stringify(parsedBreadcrumb)}\n          nopadding={nopaddingbreadcrumb}\n          on:link-clicked={(event) =>\n            eventHandler.dispatch('link-clicked', event.detail)}\n        />\n      </div>\n    {/if}\n\n    {#if hasBack}\n      <button class=\"mc-header__back\" on:click={goBack}>\n        <span class=\"mc-header__back__label\">\n          {parsedA11yLabels?.['back'] || 'Back'}\n        </span>\n      </button>\n    {/if}\n\n    <div class=\"mc-header__heading\">\n      <h1 class=\"mc-header__heading__title\">\n        {title}\n      </h1>\n      {#if subtitle}\n        <div class=\"mc-header__heading__subtitle\">\n          {subtitle}\n        </div>\n      {/if}\n      {#if status}\n        <div class=\"mc-header__heading__status\">\n          <Badge label={status} type={statustype} />\n        </div>\n      {/if}\n    </div>\n  </div>\n  {#if !hideoptions}\n    <div class=\"mc-header__right\">\n      {#if $$slots?.icons || hasicons}\n        <div class=\"mc-header__icons\">\n          <slot name=\"icons\" />\n        </div>\n      {/if}\n      {#if $$slots?.selector || hasselector}\n        <div\n          class:mc-header__selector--show-separator={($$slots?.icons ||\n            hasicons) &&\n            ($$slots?.selector || hasselector)}\n          class=\"mc-header__selector\"\n        >\n          <slot name=\"selector\" />\n        </div>\n      {/if}\n    </div>\n  {/if}\n  {#if parsedTabs && parsedTabs.length > 0}\n    <div class=\"mc-header__tabs\">\n      <Tabs\n        tabs={JSON.stringify(parsedTabs)}\n        stateless={false}\n        selectedtab={undefined}\n        nodivider={true}\n        on:tab-clicked={(event) =>\n          eventHandler.dispatch('tab-clicked', event.detail)}\n      />\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import './_c.header';\n\n  :host {\n    display: block;\n    line-height: 0;\n  }\n</style>\n"],"names":["JSON","stringify","ctx","insert","target","div","anchor","button","append","span","set_data","t","t_value","icons","create_if_block_3","selector","create_if_block_2","undefined","create_if_block_7","create_if_block_6","create_if_block_5","create_if_block_4","create_if_block_1","if_block5","length","create_if_block","div2","div1","div0","h1","class","div2_class_value","hasAnimation","root","title","$$props","subtitle","size","status","statustype","back","breadcrumb","tabs","noshadow","a11ylabels","scrollcontainer","nopaddingbreadcrumb","hasicons","hasselector","hideoptions","eventHandler","EventHandler","get_current_component","createEventDispatcher","originalScrollPos","handleScroll","currentScrollPos","scrollTop","originHeaderMargin","Number","style","marginTop","replace","offsetHeight","Math","max","$$invalidate","transition","parsedBreadcrumb","parse","parsedTabs","parsedA11yLabels","hasBack","hasNoShadow","Boolean","element","removeEventListener","addEventListener","updateAnimation","attributes","Object","assign","$$restProps","dispatch","event","detail","$$value"],"mappings":"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"}