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

package/dist/components/sidebar/sidebar-user.nested.svelte

@@ -1,292 +0,0 @@
-<svelte:options />
-
-<script lang="ts">
-  import {
-    isSidebarOpen,
-    selectFeature,
-    toggleSidebar,
-  } from '../../utilities/sidebar-service';
-  import type { User, Feature, A11yLabels } from './sidebar.types';
-  import FeatureComponent from './sidebar-feature.nested.svelte';
-
-  export let user: User;
-  export let data: Feature[];
-  export let a11yLabels: A11yLabels;
-
-  let content: HTMLElement;
-  let isExpanded = false;
-
-  $: updateContentCSS(isExpanded, $isSidebarOpen);
-
-  // Update the CSS programatically to have a nice animation on height between 0px and 'auto'
-  function updateContentCSS(isExpanded: boolean, isOpen: boolean): void {
-    if (content) {
-      content.style.height = '';
-      content.style.transition = 'none';
-      const startHeight = window.getComputedStyle(content).height;
-
-      content.classList.add(isOpen && isExpanded ? 'is-open' : 'is-close');
-      content.classList.remove(isOpen && isExpanded ? 'is-close' : 'is-open');
-
-      const height = window.getComputedStyle(content).height;
-      content.style.height = startHeight;
-
-      // wait until the next frame so that everything has time to update before starting the transition
-      requestAnimationFrame(() => {
-        content.style.transition = '';
-        requestAnimationFrame(() => {
-          content.style.height = height;
-        });
-      });
-
-      // Clear the saved height values after the transition
-      const handler = () => {
-        content.style.height = '';
-        content.removeEventListener('transitionend', handler);
-      };
-
-      content.addEventListener('transitionend', handler);
-    }
-  }
-
-  function toggle(): void {
-    if (!$isSidebarOpen) {
-      toggleSidebar(true);
-      isExpanded = true;
-    } else {
-      isExpanded = !isExpanded;
-    }
-  }
-
-  function capitalizeTheFirstLetterOfEachWord(words: string): string {
-    let separateWord: string[] = words.toLowerCase().split(' ');
-    for (let i = 0; i < separateWord.length; i++) {
-      separateWord[i] =
-        separateWord[i].charAt(0).toUpperCase() + separateWord[i].substring(1);
-    }
-    return separateWord.join(' ');
-  }
-
-  function handleClick(feature: Feature) {
-    if (!feature.disabled) {
-      selectFeature(feature.code);
-    }
-  }
-</script>
-
-{#if user}
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div
-    class="mc-sidebar-user {$isSidebarOpen ? 'is-open' : 'is-close'}"
-    on:click={toggle}
-  >
-    <button
-      aria-expanded={$isSidebarOpen && isExpanded}
-      class="mc-sidebar-user__header"
-      aria-label={$isSidebarOpen && isExpanded
-        ? a11yLabels?.['close-user'] || 'Close the user sub menu'
-        : a11yLabels?.['open-user'] || 'Open the user sub menu'}
-      aria-controls="user-content"
-      id="user-trigger"
-    >
-      <span class="mc-sidebar-user__header__picture">
-        {#if user.imageBase64}
-          <img
-            class="base64"
-            style="display:block; width:auto; height:48px; max-width:48px;"
-            aria-hidden
-            alt="User Picture"
-            src="data:image/png;base64, {user.imageBase64}"
-          />
-        {:else}
-          <svg
-            class="mc-sidebar-user__icon"
-            width="24px"
-            height="24px"
-            viewBox="0 0 24 24"
-            ><path
-              d="M12 12.76a5.38 5.38 0 115.38-5.38A5.39 5.39 0 0112 12.76zM12 4a3.38 3.38 0 103.38 3.38A3.39 3.39 0 0012 4zM16.48 13.58a1 1 0 00-.81.11 7.3 7.3 0 01-7.34 0 1 1 0 00-.81-.11l-2.81.87a1 1 0 00-.71 1V21a1 1 0 001 1h14a1 1 0 001-1v-5.59a1 1 0 00-.71-1zM18 20H6v-3.86l1.75-.53a9.36 9.36 0 008.5 0l1.75.53z"
-            /></svg
-          >
-        {/if}
-      </span>
-      {#if $isSidebarOpen}
-        <p class="mc-sidebar-user__header__information">
-          <span class="mc-sidebar-user__header__information__identity">
-            {user?.firstName || ''}
-            {user?.lastName || ''}
-          </span>
-          {#if user?.title}
-            <span class="mc-sidebar-user__header__information__title">
-              {capitalizeTheFirstLetterOfEachWord(user.title)}
-            </span>
-          {/if}
-        </p>
-        {#if data?.length}
-          <span class="mc-sidebar-user__header__information__icon">
-            {#if $isSidebarOpen && !isExpanded}
-              <svg
-                class="mc-sidebar-user__icon"
-                width="16px"
-                height="16px"
-                viewBox="0 0 16 16"
-                ><path
-                  d="M13 7H9V3a1 1 0 00-2 0v4H3a1 1 0 000 2h4v4a1 1 0 002 0V9h4a1 1 0 000-2z"
-                /></svg
-              >
-            {:else}
-              <svg
-                width="16px"
-                height="16px"
-                class="mc-sidebar-user__icon"
-                viewBox="0 0 16 16"
-                ><path d="M12 9H4a1 1 0 010-2h8a1 1 0 010 2z" /></svg
-              >
-            {/if}
-          </span>
-        {/if}
-      {/if}
-    </button>
-    {#if data?.length}
-      <ul
-        aria-hidden={!$isSidebarOpen || !isExpanded}
-        class="mc-sidebar-user__content is-close"
-        id="user-content"
-        bind:this={content}
-      >
-        {#each data as feature}
-          <!-- svelte-ignore a11y-click-events-have-key-events -->
-          <li on:click|stopPropagation={() => handleClick(feature)}>
-            <FeatureComponent {feature} {a11yLabels} />
-          </li>
-        {/each}
-      </ul>
-    {/if}
-  </div>
-{/if}
-
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import './_c.sidebar';
-
-  .mc-sidebar-user {
-    left: 0;
-    right: 0;
-    bottom: 0;
-    position: absolute;
-    background: $color-sidebar-user-background;
-
-    &__header {
-      display: flex;
-      align-items: center;
-      background: none;
-      border: none;
-      color: $color-sidebar-text-color;
-      font-size: inherit;
-      font-family: inherit;
-      text-align: initial;
-      margin: 0;
-      width: 100%;
-      overflow: hidden;
-
-      &:focus-visible {
-        box-shadow: none;
-        border: none;
-        border-radius: 12px;
-        outline: 1px solid #0b96cc;
-        outline-offset: -5px;
-      }
-
-      &:hover {
-        cursor: pointer;
-
-        .mc-sidebar-user__header__information__icon {
-          background: $color-sidebar-feature-hover-background;
-        }
-      }
-
-      &__picture {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: $color-grey;
-        border-radius: 24px;
-        width: 48px;
-        min-width: 48px;
-        height: 48px;
-        overflow: hidden;
-        img {
-          display: block;
-        }
-      }
-
-      &__information {
-        justify-content: space-around;
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-        margin: 0;
-        margin-left: 8px;
-        height: 40px;
-        &__icon {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: 32px;
-          height: 32px;
-          border-radius: 4px;
-        }
-
-        &__identity {
-          font-size: 16px;
-          font-weight: bold;
-        }
-
-        &__title,
-        &__identity {
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          max-width: 176px;
-        }
-      }
-    }
-
-    &__icon {
-      fill: $color-sidebar-icon;
-    }
-
-    &__content {
-      list-style-type: none;
-      padding: 0;
-      overflow: hidden;
-      margin: -8px 0px 24px 0px;
-      @include transition(all 300ms ease-in-out);
-
-      &.is-close {
-        height: 0;
-        margin: 0;
-      }
-
-      .is-open {
-        height: auto;
-      }
-    }
-
-    &.is-close {
-      .mc-sidebar-user__header {
-        @include transition(padding 300ms ease-in-out);
-        padding: 12px 8px;
-        margin: 8px 0;
-      }
-    }
-
-    &.is-open {
-      .mc-sidebar-user__header {
-        @include transition(padding 300ms ease-in-out);
-        padding: 12px 24px 12px 32px;
-        margin: 8px 0;
-      }
-    }
-  }
-</style>

package/dist/components/sidebar/sidebar.types.d.ts

@@ -1,46 +0,0 @@
-export declare class Feature {
-    label: string;
-    code: string;
-    href?: string;
-    embedded?: string;
-    disabled?: boolean;
-    items?: Feature[];
-}
-export interface Segment extends Feature {
-    icon?: string;
-    iconPath?: string;
-}
-export interface FeatureGroup {
-    label: string;
-    code: string;
-    icon?: string;
-    iconPath?: string;
-    items: Feature[];
-}
-export interface User {
-    lastName: string;
-    firstName: string;
-    title: string;
-    imageBase64?: string;
-    [key: string | number | symbol]: unknown;
-}
-export interface Sidebar {
-    HOME: Segment;
-    UTILITIES: Segment[][];
-    FEATURES: FeatureGroup[];
-    USER_FEATURES: Feature[];
-}
-export type A11yLabels = {
-    [key in 'open' | 'close' | 'external-link-suffix' | 'open-user' | 'close-user']: string;
-};
-export interface Selection {
-    lv0?: FeatureLike;
-    lv1?: FeatureLike;
-    lv2?: FeatureLike;
-}
-export interface FeatureLike {
-    code: string;
-    label: string;
-    items?: FeatureLike[];
-}
-//# sourceMappingURL=sidebar.types.d.ts.map

package/dist/components/sidebar/sidebar.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"sidebar.types.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/sidebar.types.ts"],"names":[],"mappings":"AAAA,qBAAa,OAAO;IAClB,KAAK,SAAM;IACX,IAAI,SAAM;IACV,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;CACnB;AAED,MAAM,WAAW,OAAQ,SAAQ,OAAO;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,OAAO,EAAE,CAAC;CAClB;AAMD,MAAM,WAAW,IAAI;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;CAC1C;AAED,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,OAAO,EAAE,EAAE,CAAC;IACvB,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,aAAa,EAAE,OAAO,EAAE,CAAC;CAC1B;AAED,MAAM,MAAM,UAAU,GAAG;KACtB,GAAG,IACA,MAAM,GACN,OAAO,GACP,sBAAsB,GACtB,WAAW,GACX,YAAY,GAAG,MAAM;CAC1B,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,GAAG,CAAC,EAAE,WAAW,CAAC;IAClB,GAAG,CAAC,EAAE,WAAW,CAAC;IAClB,GAAG,CAAC,EAAE,WAAW,CAAC;CACnB;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;CACvB"}

package/dist/components/stackedbarchart/StackedBarChart.svelte

@@ -1,350 +0,0 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import {
-    select,
-    scaleBand,
-    scaleLinear,
-    axisBottom,
-    axisLeft,
-    Selection,
-    ScaleBand,
-    ScaleLinear,
-    NumberValue,
-    stack,
-    Series,
-  } from 'd3';
-  import { onMount } from 'svelte';
-  import type { StackedBarData, BarMargin } from './bar-chart.types';
-  import { EventHandler } from '../../utilities/EventHandler';
-  import {
-    get_current_component,
-    createEventDispatcher,
-  } from 'svelte/internal';
-
-  type StackedData = Series<
-    {
-      [key: string]: number;
-    },
-    string
-  >;
-
-  export let data = '';
-  $: parsedData = data ? (JSON.parse(data) as StackedBarData[]) : [];
-  $: groups = parsedData.map((d: StackedBarData) => 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 scalemax = 50;
-  export let ticknumbers = 4;
-  export let tickleftformat: (d: NumberValue, i: number) => string = (d) =>
-    `${Number(d)}`;
-  export let tickbottomformat: (d: NumberValue, i: number) => string = (d) =>
-    `${Number(d)}`;
-
-  export let margins: string;
-  export let svgs: string;
-  $: parsedSvgs = svgs ? (JSON.parse(svgs) as SVGElement[]) : [];
-
-  export let colors: string;
-  let parsedColor: Record<string, string>;
-  $: parsedColor = colors ? (JSON.parse(colors) as Record<string, 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(),
-  );
-
-  $: 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 getAxes(width: number) {
-    const x = scaleBand()
-      .domain(groups)
-      .range([
-        0,
-        width -
-          (getParsedMargins(margins).left / 2 +
-            getParsedMargins(margins).right / 2),
-      ])
-      .padding(0.2);
-    const y = scaleLinear().domain([0, scalemax]).range([height, 0]);
-    return { x, y };
-  }
-
-  function addRectandles(
-    x: ScaleBand<string>,
-    y: ScaleLinear<number, number, never>,
-  ) {
-    const stackedData = stack().keys(subgroups)(parsedData);
-
-    svg
-      .append('g')
-      .selectAll('g')
-      .data(stackedData)
-      .enter()
-      .append('g')
-      .attr('fill', (d: StackedData) => parsedColor[d.key] || 'black')
-      .attr('class', 'bar')
-      .selectAll('rect')
-      .data((d) => d)
-      .enter()
-      .append('rect')
-      .attr('x', (d) => x(d.data.group.toString())!)
-      .attr('y', (d) => y(d[1]))
-      .attr('width', x.bandwidth())
-      .attr('height', (d) => y(d[0]) - y(d[1]))
-      .style('cursor', 'pointer')
-      .on('mouseout', (_e: MouseEvent, chartEvent) => {
-        const others = svg.selectAll('rect').filter(function (arc) {
-          return arc != chartEvent;
-        });
-        others.style('opacity', 1);
-        tooltipData.show = false;
-      })
-      .on('mouseover', (e: MouseEvent, chartEvent: any) => {
-        const others = svg.selectAll('rect').filter(function (arc) {
-          return arc != chartEvent;
-        });
-        others.style('opacity', 0.7);
-        const { left, top, width } = (
-          e.target as HTMLElement
-        ).getBoundingClientRect();
-        tooltipData = {
-          show: true,
-          text: chartEvent.data.customtooltip
-            ? chartEvent.data.customtooltip
-            : `${chartEvent[1] - chartEvent[0]}`,
-          left: left,
-          top: top - 50,
-          width,
-        };
-      })
-      .on('click', (_e: MouseEvent, chartEvent) => {
-        eventHandler.dispatch('bar-clicked', chartEvent);
-      });
-  }
-
-  function updateAxes(
-    x: ScaleBand<string>,
-    y: 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-axis')
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
-      .call((axisLeft(y) as any).ticks(ticknumbers).tickFormat(tickleftformat));
-
-    const width = getChartWidth();
-    svg
-      .selectAll('.y-axis .tick line')
-      .attr('stroke', '#EEEDEA')
-      .attr('stroke-width', '1px')
-      .attr('x2', width);
-  }
-
-  function render() {
-    const width = getChartWidth();
-    const { x, y } = 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(y).ticks(ticknumbers).tickFormat(tickleftformat))
-      .attr('class', 'y-axis')
-      .attr('stroke-width', '0');
-
-    addRectandles(x, y);
-  }
-
-  function update() {
-    const width = getChartWidth();
-    chart.querySelector('#svg-chart')?.setAttribute('width', `${width}px`);
-
-    const { x, y } = getAxes(width);
-    updateAxes(x, y);
-    svg.selectAll('.bar').remove();
-    addRectandles(x, y);
-  }
-
-  function resize() {
-    if (_data) {
-      const width = getChartWidth();
-      chart.querySelector('#svg-chart')?.setAttribute('width', `${width}px`);
-
-      const { x, y } = getAxes(width);
-      updateAxes(x, y);
-
-      const stackedData = stack().keys(subgroups)(parsedData);
-      svg
-        .selectAll('.bar')
-        .data(stackedData)
-        .selectAll('rect')
-        .data((d) => d)
-        .attr('x', (d) => x(d.data.group.toString())!)
-        .attr('y', (d) => y(d[1]))
-        .attr('width', x.bandwidth())
-        .attr('height', (d) => y(d[0]) - y(d[1]));
-    }
-  }
-
-  onMount(() => {
-    const resizeObserver = new ResizeObserver(resize);
-    resizeObserver.observe(chart);
-    hasMounted = true;
-  });
-</script>
-
-<div bind:this={chart} style="background-color: {backgroundcolor};" />
-
-{#if tooltipData.show}
-  <div
-    class="tooltip"
-    style={`top: ${tooltipData.top}px; left: ${tooltipData.left}px; width: ${tooltipData.width}px;`}
-  >
-    {tooltipData.text}
-  </div>
-{/if}
-
-<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={parsedColor[subgroup]} />
-      </svg>
-      <span class="legend__title">{subgroup}</span>
-    </div>
-  {/each}
-</div>
-
-<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: relative;
-  }
-
-  text {
-    font-family: 'LeroyMerlin', sans-serif;
-    font-size: $size-font-04;
-    color: $color-grey-700;
-  }
-</style>