@mozaic-ds/web-components 0.1.0

package/public/components/groupedbarchart/GroupedBarChart.svelte

@@ -0,0 +1,441 @@
+<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';
+
+  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();
+  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/public/components/header/Header.js

@@ -0,0 +1,2 @@
+import{S as e,i as t,a,_ as i,b as s,f as r,s as n,c as d,e as l,d as c,t as o,n as m,g as h,h as g,z as b,j as p,C as u,D as _,E as f,k as x,m as $,o as w,p as y,a0 as k,q as M,x as z,A,G as v,l as D,M as I,v as S}from"../../index-c33b3772.js";import{E as j}from"../../EventHandler-02058705.js";import N from"../breadcrumb/Breadcrumb.nested.js";import T from"../tabs/Tabs.nested.js";import L from"../badge/Badge.nested.js";function E(e){let t,a,i;return a=new N({props:{items:JSON.stringify(e[16]),nopadding:"true"}}),a.$on("link-clicked",e[25]),{c(){t=l("div"),z(a.$$.fragment),h(t,"class","mc-header__breadcrumb")},m(e,r){s(e,t,r),A(a,t,null),i=!0},p(e,t){const i={};65536&t[0]&&(i.items=JSON.stringify(e[16])),a.$set(i)},i(e){i||(u(a.$$.fragment,e),i=!0)},o(e){_(a.$$.fragment,e),i=!1},d(e){e&&w(t),v(a)}}}function C(e){let t,a,i,r,n,d=(e[14]?.back||"Back")+"";return{c(){t=l("button"),a=l("span"),i=o(d),h(a,"class","mc-header__back__label"),h(t,"class","mc-header__back")},m(d,l){s(d,t,l),p(t,a),p(a,i),r||(n=D(t,"click",e[18]),r=!0)},p(e,t){16384&t[0]&&d!==(d=(e[14]?.back||"Back")+"")&&x(i,d)},d(e){e&&w(t),r=!1,n()}}}function O(e){let t,a;return{c(){t=l("div"),a=o(e[1]),h(t,"class","mc-header__heading__subtitle")},m(e,i){s(e,t,i),p(t,a)},p(e,t){2&t[0]&&x(a,e[1])},d(e){e&&w(t)}}}function H(e){let t,a,i;return a=new L({props:{label:e[3],type:e[4]}}),{c(){t=l("div"),z(a.$$.fragment),h(t,"class","mc-header__heading__status")},m(e,r){s(e,t,r),A(a,t,null),i=!0},p(e,t){const i={};8&t[0]&&(i.label=e[3]),16&t[0]&&(i.type=e[4]),a.$set(i)},i(e){i||(u(a.$$.fragment,e),i=!0)},o(e){_(a.$$.fragment,e),i=!1},d(e){e&&w(t),v(a)}}}function J(e){let t,a,i=(e[19]?.icons||e[6])&&B(),r=(e[19]?.selector||e[7])&&Z(e);return{c(){t=l("div"),i&&i.c(),a=c(),r&&r.c(),h(t,"class","mc-header__right")},m(e,n){s(e,t,n),i&&i.m(t,null),p(t,a),r&&r.m(t,null)},p(e,s){e[19]?.icons||e[6]?i||(i=B(),i.c(),i.m(t,a)):i&&(i.d(1),i=null),e[19]?.selector||e[7]?r?r.p(e,s):(r=Z(e),r.c(),r.m(t,null)):r&&(r.d(1),r=null)},d(e){e&&w(t),i&&i.d(),r&&r.d()}}}function B(e){let t;return{c(){t=l("div"),t.innerHTML='<slot name="icons"></slot>',h(t,"class","mc-header__icons")},m(e,a){s(e,t,a)},d(e){e&&w(t)}}}function Z(e){let t;return{c(){t=l("div"),t.innerHTML='<slot name="selector"></slot>',h(t,"class","mc-header__selector"),b(t,"mc-header__selector--show-separator",(e[19]?.icons||e[6])&&(e[19]?.selector||e[7]))},m(e,a){s(e,t,a)},p(e,a){524480&a[0]&&b(t,"mc-header__selector--show-separator",(e[19]?.icons||e[6])&&(e[19]?.selector||e[7]))},d(e){e&&w(t)}}}function G(e){let t,a,i;return a=new T({props:{tabs:JSON.stringify(e[15]),nodivider:!0}}),a.$on("tab-clicked",e[26]),{c(){t=l("div"),z(a.$$.fragment),h(t,"class","mc-header__tabs")},m(e,r){s(e,t,r),A(a,t,null),i=!0},p(e,t){const i={};32768&t[0]&&(i.tabs=JSON.stringify(e[15])),a.$set(i)},i(e){i||(u(a.$$.fragment,e),i=!0)},o(e){_(a.$$.fragment,e),i=!1},d(e){e&&w(t),v(a)}}}function R(e){let t,a,i,r,n,y,k,M,z,A,v,D,S,j=e[5]&&E(e),N=e[13]&&C(e),T=e[1]&&O(e),L=e[3]&&H(e),B=!e[8]&&J(e),Z=e[15]&&G(e),R=[{class:D="mc-header "+(e[2]?`mc-header--${e[2]}`:"")},e[9]],W={};for(let e=0;e<R.length;e+=1)W=d(W,R[e]);return{c(){t=l("div"),a=l("div"),j&&j.c(),i=c(),N&&N.c(),r=c(),n=l("div"),y=l("h1"),k=o(e[0]),M=c(),T&&T.c(),z=c(),L&&L.c(),A=c(),B&&B.c(),v=c(),Z&&Z.c(),this.c=m,h(y,"class","mc-header__heading__title"),h(n,"class","mc-header__heading"),h(a,"class","mc-header__left"),g(t,W),b(t,"mc-header--no-shadow",e[12]),b(t,"mc-header--animate",e[10])},m(d,l){s(d,t,l),p(t,a),j&&j.m(a,null),p(a,i),N&&N.m(a,null),p(a,r),p(a,n),p(n,y),p(y,k),p(n,M),T&&T.m(n,null),p(n,z),L&&L.m(n,null),p(t,A),B&&B.m(t,null),p(t,v),Z&&Z.m(t,null),e[27](t),S=!0},p(e,s){e[5]?j?(j.p(e,s),32&s[0]&&u(j,1)):(j=E(e),j.c(),u(j,1),j.m(a,i)):j&&(I(),_(j,1,1,(()=>{j=null})),f()),e[13]?N?N.p(e,s):(N=C(e),N.c(),N.m(a,r)):N&&(N.d(1),N=null),(!S||1&s[0])&&x(k,e[0]),e[1]?T?T.p(e,s):(T=O(e),T.c(),T.m(n,z)):T&&(T.d(1),T=null),e[3]?L?(L.p(e,s),8&s[0]&&u(L,1)):(L=H(e),L.c(),u(L,1),L.m(n,null)):L&&(I(),_(L,1,1,(()=>{L=null})),f()),e[8]?B&&(B.d(1),B=null):B?B.p(e,s):(B=J(e),B.c(),B.m(t,v)),e[15]?Z?(Z.p(e,s),32768&s[0]&&u(Z,1)):(Z=G(e),Z.c(),u(Z,1),Z.m(t,null)):Z&&(I(),_(Z,1,1,(()=>{Z=null})),f()),g(t,W=$(R,[(!S||4&s[0]&&D!==(D="mc-header "+(e[2]?`mc-header--${e[2]}`:"")))&&{class:D},512&s[0]&&e[9]])),b(t,"mc-header--no-shadow",e[12]),b(t,"mc-header--animate",e[10])},i(e){S||(u(j),u(L),u(Z),S=!0)},o(e){_(j),_(L),_(Z),S=!1},d(a){a&&w(t),j&&j.d(),N&&N.d(),T&&T.d(),L&&L.d(),B&&B.d(),Z&&Z.d(),e[27](null)}}}function W(e,t,a){let i,s,r,n,l,c;const o=["title","subtitle","size","status","statustype","back","breadcrumb","tabs","noshadow","a11ylabels","scrollcontainer","hasicons","hasselector","hideoptions"];let m=y(t,o),{$$slots:h={},$$scope:g}=t;const b=k(h);let p,u,{title:_}=t,{subtitle:f}=t,{size:x="m"}=t,{status:$}=t,{statustype:w}=t,{back:z}=t,{breadcrumb:A}=t,{tabs:v}=t,{noshadow:D}=t,{a11ylabels:I}=t,{scrollcontainer:N}=t,{hasicons:T}=t,{hasselector:L}=t,{hideoptions:E=!1}=t,C=new j,O=0;function H(){const e=N.scrollTop,t=Number(u.style.marginTop.replace("px",""));O>e?e<u.offsetHeight?a(11,u.style.marginTop=`${Math.max(-e,t)}px`,u):a(11,u.style.marginTop="0",u):e<u.offsetHeight?(a(11,u.style.transition="none",u),a(11,u.style.marginTop=-e+"px",u)):(a(11,u.style.transition="margin-top ease-out 0.4s",u),a(11,u.style.marginTop=-u.offsetHeight-5+"px",u)),O=e}return e.$$set=e=>{t=d(d({},t),M(e)),a(31,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(20,z=e.back),"breadcrumb"in e&&a(5,A=e.breadcrumb),"tabs"in e&&a(21,v=e.tabs),"noshadow"in e&&a(22,D=e.noshadow),"a11ylabels"in e&&a(23,I=e.a11ylabels),"scrollcontainer"in e&&a(24,N=e.scrollcontainer),"hasicons"in e&&a(6,T=e.hasicons),"hasselector"in e&&a(7,L=e.hasselector),"hideoptions"in e&&a(8,E=e.hideoptions)},e.$$.update=()=>{32&e.$$.dirty[0]&&a(16,i="string"==typeof A?JSON.parse(A):A),2097152&e.$$.dirty[0]&&a(15,s="string"==typeof v?JSON.parse(v):v),8388608&e.$$.dirty[0]&&a(14,r="string"==typeof I?JSON.parse(I):I),1048576&e.$$.dirty[0]&&a(13,n=z&&"false"!==z),4194304&e.$$.dirty[0]&&a(12,l=D&&"false"!==D),16777216&e.$$.dirty[0]&&(a(10,p=Boolean(N)),function(e){e&&(e.removeEventListener("scroll",H),e.addEventListener("scroll",H))}(N)),a(9,c=Object.assign({},m)),512&e.$$.dirty[0]&&delete c.class},[_,f,x,$,w,A,T,L,E,c,p,u,l,n,r,s,i,C,function(){C.dispatch("on-back-click",{})},b,z,v,D,I,N,e=>C.dispatch("link-clicked",e.detail),e=>C.dispatch("tab-clicked",e.detail),function(e){S[e?"unshift":"push"]((()=>{u=e,a(11,u)}))}]}class Y 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:"LeroyMerlin", 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;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzMzMzMzMyI+PHBhdGggZD0iTTI4IDE1SDYuNDFsNi4zLTYuMjlhMSAxIDAgMTAtMS40Mi0xLjQybC04IDhhMS4xNSAxLjE1IDAgMDAtLjIxLjMzIDEgMSAwIDAwMCAuNzYuOTMuOTMgMCAwMC4yMS4zM2w4IDhhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJMNi40MSAxN0gyOGExIDEgMCAwMDAtMnoiLz48L3N2Zz4=");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:600;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;-o-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:i(this)},customElement:!0},W,R,n,{title:0,subtitle:1,size:2,status:3,statustype:4,back:20,breadcrumb:5,tabs:21,noshadow:22,a11ylabels:23,scrollcontainer:24,hasicons:6,hasselector:7,hideoptions:8},null,[-1,-1]),e&&(e.target&&s(e.target,this,e.anchor),e.props&&(this.$set(e.props),r()))}static get observedAttributes(){return["title","subtitle","size","status","statustype","back","breadcrumb","tabs","noshadow","a11ylabels","scrollcontainer","hasicons","hasselector","hideoptions"]}get title(){return this.$$.ctx[0]}set title(e){this.$$set({title:e}),r()}get subtitle(){return this.$$.ctx[1]}set subtitle(e){this.$$set({subtitle:e}),r()}get size(){return this.$$.ctx[2]}set size(e){this.$$set({size:e}),r()}get status(){return this.$$.ctx[3]}set status(e){this.$$set({status:e}),r()}get statustype(){return this.$$.ctx[4]}set statustype(e){this.$$set({statustype:e}),r()}get back(){return this.$$.ctx[20]}set back(e){this.$$set({back:e}),r()}get breadcrumb(){return this.$$.ctx[5]}set breadcrumb(e){this.$$set({breadcrumb:e}),r()}get tabs(){return this.$$.ctx[21]}set tabs(e){this.$$set({tabs:e}),r()}get noshadow(){return this.$$.ctx[22]}set noshadow(e){this.$$set({noshadow:e}),r()}get a11ylabels(){return this.$$.ctx[23]}set a11ylabels(e){this.$$set({a11ylabels:e}),r()}get scrollcontainer(){return this.$$.ctx[24]}set scrollcontainer(e){this.$$set({scrollcontainer:e}),r()}get hasicons(){return this.$$.ctx[6]}set hasicons(e){this.$$set({hasicons:e}),r()}get hasselector(){return this.$$.ctx[7]}set hasselector(e){this.$$set({hasselector:e}),r()}get hideoptions(){return this.$$.ctx[8]}set hideoptions(e){this.$$set({hideoptions:e}),r()}}export{Y as default};
+//# sourceMappingURL=Header.js.map

package/public/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\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\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  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=\"true\"\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}\n    <div class=\"mc-header__tabs\">\n      <Tabs\n        tabs={JSON.stringify(parsedTabs)}\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.scss';\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","create_if_block_7","create_if_block_6","create_if_block_5","create_if_block_4","create_if_block_1","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","hasicons","hasselector","hideoptions","eventHandler","EventHandler","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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"}

package/public/components/header/Header.svelte

@@ -0,0 +1,186 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import { EventHandler } from '../../utilities/EventHandler';
+  import Breadcrumb from '../breadcrumb/Breadcrumb.nested.svelte';
+  import type { BreadcrumbItems } from '../breadcrumb/breadcrumb.types';
+  import Tabs from '../tabs/Tabs.nested.svelte';
+  import type { TabsItems } from '../tabs/tabs.types';
+  import Badge from '../badge/Badge.nested.svelte';
+  import type { BadgeType } from '../badge/badge.types';
+  import type { A11yLabels, HeaderSize } from './Header.types';
+
+  export let title: string;
+  export let subtitle: string;
+  export let size: HeaderSize = 'm';
+  export let status: string;
+  export let statustype: BadgeType;
+  export let back: boolean | string;
+  export let breadcrumb: string | BreadcrumbItems[];
+  export let tabs: string | TabsItems[];
+  export let noshadow: boolean | string;
+  export let a11ylabels: string | A11yLabels;
+  export let scrollcontainer: HTMLElement;
+
+  export let hasicons: boolean;
+  export let hasselector: boolean;
+  export let hideoptions = false;
+
+  const headerAnimationThreshold = 5;
+
+  let eventHandler = new EventHandler();
+  let originalScrollPos = 0;
+  let hasAnimation: boolean;
+  let root: HTMLElement;
+
+  $: parsedBreadcrumb =
+    typeof breadcrumb === 'string'
+      ? (JSON.parse(breadcrumb) as BreadcrumbItems[])
+      : breadcrumb;
+
+  $: parsedTabs =
+    typeof tabs === 'string' ? (JSON.parse(tabs) as TabsItems[]) : tabs;
+
+  $: parsedA11yLabels =
+    typeof a11ylabels === 'string'
+      ? (JSON.parse(a11ylabels) as A11yLabels)
+      : a11ylabels;
+
+  $: hasBack = back && back !== 'false';
+  $: hasNoShadow = noshadow && noshadow !== 'false';
+  $: {
+    hasAnimation = Boolean(scrollcontainer);
+    updateAnimation(scrollcontainer);
+  }
+  $: attributes = { ...$$restProps };
+  $: delete attributes.class;
+  function goBack() {
+    eventHandler.dispatch('on-back-click', {});
+  }
+
+  function updateAnimation(element: HTMLElement) {
+    if (element) {
+      element.removeEventListener('scroll', handleScroll);
+      element.addEventListener('scroll', handleScroll);
+    }
+  }
+
+  function handleScroll() {
+    const currentScrollPos = scrollcontainer.scrollTop;
+    const originHeaderMargin = Number(root.style.marginTop.replace('px', ''));
+
+    if (originalScrollPos > currentScrollPos) {
+      // scroll up
+      if (currentScrollPos < root.offsetHeight) {
+        // scroll while in header zone
+        root.style.marginTop = `${Math.max(
+          -currentScrollPos,
+          originHeaderMargin,
+        )}px`;
+      } else {
+        // scroll while below header zone
+        root.style.marginTop = '0';
+      }
+    } else {
+      // scroll down
+      if (currentScrollPos < root.offsetHeight) {
+        // scroll while in header zone
+
+        root.style.transition = 'none';
+        root.style.marginTop = `${-currentScrollPos}px`;
+      } else {
+        // scroll while below header zone
+        root.style.transition = 'margin-top ease-out 0.4s';
+        root.style.marginTop = `${
+          -root.offsetHeight - headerAnimationThreshold
+        }px`;
+      }
+    }
+
+    originalScrollPos = currentScrollPos;
+  }
+</script>
+
+<div
+  class="mc-header {size ? `mc-header--${size}` : ''}"
+  class:mc-header--no-shadow={hasNoShadow}
+  class:mc-header--animate={hasAnimation}
+  bind:this={root}
+  {...attributes}
+>
+  <div class="mc-header__left">
+    {#if breadcrumb}
+      <div class="mc-header__breadcrumb">
+        <Breadcrumb
+          items={JSON.stringify(parsedBreadcrumb)}
+          nopadding="true"
+          on:link-clicked={(event) =>
+            eventHandler.dispatch('link-clicked', event.detail)}
+        />
+      </div>
+    {/if}
+
+    {#if hasBack}
+      <button class="mc-header__back" on:click={goBack}>
+        <span class="mc-header__back__label">
+          {parsedA11yLabels?.['back'] || 'Back'}
+        </span>
+      </button>
+    {/if}
+
+    <div class="mc-header__heading">
+      <h1 class="mc-header__heading__title">
+        {title}
+      </h1>
+      {#if subtitle}
+        <div class="mc-header__heading__subtitle">
+          {subtitle}
+        </div>
+      {/if}
+      {#if status}
+        <div class="mc-header__heading__status">
+          <Badge label={status} type={statustype} />
+        </div>
+      {/if}
+    </div>
+  </div>
+  {#if !hideoptions}
+    <div class="mc-header__right">
+      {#if $$slots?.icons || hasicons}
+        <div class="mc-header__icons">
+          <slot name="icons" />
+        </div>
+      {/if}
+      {#if $$slots?.selector || hasselector}
+        <div
+          class:mc-header__selector--show-separator={($$slots?.icons ||
+            hasicons) &&
+            ($$slots?.selector || hasselector)}
+          class="mc-header__selector"
+        >
+          <slot name="selector" />
+        </div>
+      {/if}
+    </div>
+  {/if}
+  {#if parsedTabs}
+    <div class="mc-header__tabs">
+      <Tabs
+        tabs={JSON.stringify(parsedTabs)}
+        nodivider={true}
+        on:tab-clicked={(event) =>
+          eventHandler.dispatch('tab-clicked', event.detail)}
+      />
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
+  @import './_c.header.scss';
+
+  :host {
+    display: block;
+    line-height: 0;
+  }
+</style>

package/public/components/header/Header.types.d.ts

@@ -0,0 +1,5 @@
+export type HeaderSize = 's' | 'm' | 'l' | 'xl';
+export type A11yLabels = {
+    [key in 'back']: string;
+};
+//# sourceMappingURL=Header.types.d.ts.map