@mozaic-ds/web-components 0.28.1 → 1.0.0-alpha.0

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

@@ -1,448 +0,0 @@
-<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/public/adeo/components/header/Header.js

@@ -1,2 +0,0 @@
-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/public/adeo/components/header/Header.js.map

@@ -1 +0,0 @@
-{"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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"}