@mozaic-ds/web-components 0.1.0

package/public/components/datatablefooter/DataTableFooter.nested.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+  import { EventHandler } from '../../utilities/EventHandler';
+  import {
+    getPageSelectOptionsArray,
+    getDataAttribute,
+  } from '../../utilities/DataTableUtilities';
+
+  export let e2eAttributeSuffix: string | undefined;
+  export let dataTableId: string | undefined;
+  export let totalItems = 100;
+  export let currentPage = 1;
+  export let itemsPerPage = 10;
+  export let itemsPerPageOptions = [5, 10, 15, 20];
+  export let rowsPerPageLabel: string;
+  export let pageLabel: string;
+  export let itemsLabel: string;
+  export let showItemsCount: boolean;
+  export let loading: boolean;
+  export let showAllPages: boolean;
+
+  $: totalPages = Math.ceil(totalItems / itemsPerPage ?? 1);
+  $: firstItemOfPageNumber = currentPage * itemsPerPage - (itemsPerPage - 1);
+  $: lastItemOfPageNumber =
+    firstItemOfPageNumber + itemsPerPage - 1 <= totalItems
+      ? firstItemOfPageNumber + itemsPerPage - 1
+      : totalItems;
+  let eventHandler = new EventHandler();
+  $: currentPage;
+
+  function onPageChange(pageNumber: number) {
+    eventHandler.dispatch('page-change', {
+      currentPage: pageNumber,
+      itemsPerPage,
+    });
+  }
+  function onPageSelect() {
+    onPageChange(currentPage);
+  }
+  $: pageSelectOptionsArray = getPageSelectOptionsArray(
+    totalPages,
+    currentPage,
+    showAllPages,
+  );
+</script>
+
+<div class="mc-datatable__footer">
+  <div class="mc-datatable__select">
+    <label for="selectRows" class="mc-datatable__select-label">
+      {rowsPerPageLabel}
+    </label>
+    <select
+      bind:value={itemsPerPage}
+      on:change={() => onPageChange(1)}
+      disabled={loading}
+      id="selectRows"
+      class="mc-select mc-select--s"
+      {...getDataAttribute(
+        e2eAttributeSuffix,
+        `${dataTableId}SelectItemsPerPage`,
+      )}
+    >
+      {#each itemsPerPageOptions as value}
+        <option {value} selected={value === itemsPerPage}>{value}</option>
+      {/each}
+    </select>
+  </div>
+  {#if showItemsCount && !loading}
+    <div class="mc-datatable__count">
+      <strong>{firstItemOfPageNumber}-{lastItemOfPageNumber}</strong> /
+      <strong>{totalItems} {itemsLabel}</strong>
+    </div>
+  {/if}
+  <div class="mc-datatable__pagination">
+    <nav class="mc-pagination" aria-label="pagination">
+      <button
+        on:click={() => onPageChange(currentPage - 1)}
+        class="mc-button mc-button--solid-neutral mc-button--square mc-button--s@from-l"
+        aria-label="Previous page"
+        disabled={currentPage <= 1 || loading}
+        {...getDataAttribute(
+          e2eAttributeSuffix,
+          `${dataTableId}PreviousPageButton`,
+        )}
+      >
+        <navigation-arrow-arrow--left-32px
+          class="mc-button__icon"
+          size="100%"
+        />
+      </button>
+
+      <div class="mc-pagination__field">
+        <select
+          disabled={loading}
+          bind:value={currentPage}
+          on:change={onPageSelect}
+          class="mc-select mc-pagination__select mc-select--s"
+          {...getDataAttribute(e2eAttributeSuffix, `${dataTableId}SelectPage`)}
+        >
+          {#each pageSelectOptionsArray as page}
+            <option value={page}>{pageLabel} {page} / {totalPages}</option>
+          {/each}
+        </select>
+      </div>
+
+      <button
+        on:click={() => onPageChange(currentPage + 1)}
+        class="mc-button mc-button--solid-neutral mc-button--square mc-button--s@from-l"
+        aria-label="Next Page"
+        disabled={currentPage === totalPages || loading}
+        {...getDataAttribute(
+          e2eAttributeSuffix,
+          `${dataTableId}NextPageButton`,
+        )}
+      >
+        <navigation-arrow-arrow--right-32px
+          class="mc-button__icon"
+          size="100%"
+        />
+      </button>
+    </nav>
+  </div>
+</div>
+
+<!-- svelte-ignore css-unused-selector -->
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/all-settings';
+  @import '@mozaic-ds/styles/components/c.button';
+  @import '@mozaic-ds/styles/components/c.select';
+  @import '@mozaic-ds/styles/components/c.pagination';
+  @import '@mozaic-ds/styles/components/_c.datatable-tools';
+  @import '@mozaic-ds/styles/components/_c.datatable-footer';
+</style>

package/public/components/donut/Donut.svelte

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

package/public/components/dropdown/Dropdown.js

@@ -0,0 +1,2 @@
+import{S as e,i as t,a,b as l,f as i,s as r,v as s,w as n,c as o,e as c,d,t as m,x as g,n as p,g as h,z as x,y as u,h as b,j as w,A as $,l as f,B as M,C as I,D as v,E as y,k as A,F as D,m as j,o as E,G as k,H as C,p as z,r as S,q as N,I as _,J as T,K as L,L as G,M as Z,N as P}from"../../index-c33b3772.js";import{E as W}from"../../EventHandler-02058705.js";import{c as H}from"../../ClickOutside-63071e7a.js";import Q from"../tag/Tag.nested.js";import B from"../loader/Loader.nested.js";import O from"../listbox/Listbox.nested.js";function R(e,t,a){const l=e.slice();return l[60]=t[a],l}function J(e,t,a){const l=e.slice();return l[60]=t[a],l[64]=a,l}function V(e){let t,a,l={id:e[1]?e[1]:`autocompleteTag-${e[29]}`,class:"mc-dropdown__tag",label:e[28](),size:"s",type:"removable",dark:!1,disabled:!1,href:"",name:"",selected:!1};return t=new Q({props:l}),e[44](t),t.$on("tag-removed",e[30]),{c(){g(t.$$.fragment)},m(e,l){$(t,e,l),a=!0},p(e,a){const l={};2&a[0]&&(l.id=e[1]?e[1]:`autocompleteTag-${e[29]}`),268435456&a[0]&&(l.label=e[28]()),t.$set(l)},i(e){a||(I(t.$$.fragment,e),a=!0)},o(e){v(t.$$.fragment,e),a=!1},d(a){e[44](null),k(t,a)}}}function Y(e){let t,a;return t=new B({props:{size:"s",theme:"primary",text:"",class:"mc-dropdown__loader"}}),{c(){g(t.$$.fragment)},m(e,l){$(t,e,l),a=!0},i(e){a||(I(t.$$.fragment,e),a=!0)},o(e){v(t.$$.fragment,e),a=!1},d(e){k(t,e)}}}function X(e){let t,a,i;return{c(){t=c("button"),t.innerHTML="<navigation-control-tag--cross-24px></navigation-control-tag--cross-24px>",h(t,"class","mc-dropdown__clear"),h(t,"type","button")},m(r,s){l(r,t,s),a||(i=f(t,"click",_(e[45])),a=!0)},p:p,d(e){e&&E(t),a=!1,i()}}}function F(e){let t,a,i=e[25],r=[];for(let t=0;t<i.length;t+=1)r[t]=K(J(e,i,t));let s=e[19].length>e[15]&&U(e);return{c(){t=c("div");for(let e=0;e<r.length;e+=1)r[e].c();a=d(),s&&s.c(),h(t,"class","tags-selected")},m(e,i){l(e,t,i);for(let e=0;e<r.length;e+=1)r[e]&&r[e].m(t,null);w(t,a),s&&s.m(t,null)},p(e,l){if(33587200&l[0]|1&l[1]){let s;for(i=e[25],s=0;s<i.length;s+=1){const n=J(e,i,s);r[s]?r[s].p(n,l):(r[s]=K(n),r[s].c(),r[s].m(t,a))}for(;s<r.length;s+=1)r[s].d(1);r.length=i.length}e[19].length>e[15]?s?s.p(e,l):(s=U(e),s.c(),s.m(t,null)):s&&(s.d(1),s=null)},d(e){e&&E(t),T(r,e),s&&s.d()}}}function q(e){let t,a,i,r,s,n;function o(){return e[48](e[60])}return{c(){t=c("div"),a=c("m-tag"),G(a,"id",i=e[60].id),G(a,"label",r=e[60].label),G(a,"size","s"),G(a,"type","removable"),h(t,"class","tag-selected")},m(e,i){l(e,t,i),w(t,a),s||(n=f(a,"tag-removed",o),s=!0)},p(t,l){e=t,33554432&l[0]&&i!==(i=e[60].id)&&G(a,"id",i),33554432&l[0]&&r!==(r=e[60].label)&&G(a,"label",r)},d(e){e&&E(t),s=!1,n()}}}function K(e){let t,a=e[64]<e[15]&&q(e);return{c(){a&&a.c(),t=L()},m(e,i){a&&a.m(e,i),l(e,t,i)},p(e,l){e[64]<e[15]?a?a.p(e,l):(a=q(e),a.c(),a.m(t.parentNode,t)):a&&(a.d(1),a=null)},d(e){a&&a.d(e),e&&E(t)}}}function U(e){let t,a,i,r,s;return{c(){t=c("div"),a=c("m-tag"),G(a,"id","id-tag"),G(a,"label",i="("+e[19].length+") "+e[14]+" "),G(a,"size","s"),G(a,"type","link"),h(t,"class","tag-selected")},m(i,n){l(i,t,n),w(t,a),r||(s=f(a,"tag-selected",e[49]),r=!0)},p(e,t){540672&t[0]&&i!==(i="("+e[19].length+") "+e[14]+" ")&&G(a,"label",i)},d(e){e&&E(t),r=!1,s()}}}function ee(e){let t,a,i,r,s,n,o=e[25],d=[];for(let t=0;t<o.length;t+=1)d[t]=te(R(e,o,t));return{c(){t=c("div"),a=c("m-layer"),i=c("small"),r=c("div");for(let e=0;e<d.length;e+=1)d[e].c();h(r,"class","tags-selected"),h(i,"slot","content"),G(a,"title",e[13]),G(a,"layertitletag","h3"),G(a,"isopen",e[26])},m(o,c){l(o,t,c),w(t,a),w(a,i),w(i,r);for(let e=0;e<d.length;e+=1)d[e]&&d[e].m(r,null);s||(n=f(a,"layer-closed",e[51]),s=!0)},p(e,t){if(33554432&t[0]|1&t[1]){let a;for(o=e[25],a=0;a<o.length;a+=1){const l=R(e,o,a);d[a]?d[a].p(l,t):(d[a]=te(l),d[a].c(),d[a].m(r,null))}for(;a<d.length;a+=1)d[a].d(1);d.length=o.length}8192&t[0]&&G(a,"title",e[13]),67108864&t[0]&&G(a,"isopen",e[26])},d(e){e&&E(t),T(d,e),s=!1,n()}}}function te(e){let t,a,i,r,s,n,o;function m(){return e[50](e[60])}return{c(){t=c("div"),a=c("m-tag"),s=d(),G(a,"id",i=e[60].id),G(a,"label",r=e[60].label),G(a,"size","s"),G(a,"type","removable"),h(t,"class","tag-selected")},m(e,i){l(e,t,i),w(t,a),w(t,s),n||(o=f(a,"tag-removed",m),n=!0)},p(t,l){e=t,33554432&l[0]&&i!==(i=e[60].id)&&G(a,"id",i),33554432&l[0]&&r!==(r=e[60].label)&&G(a,"label",r)},d(e){e&&E(t),n=!1,o()}}}function ae(e){let t,a,i,r,z,S,N,_,T,L,G,P,W,Q,B,R,J,q,K,U,te,ae=(e[24]?e[24]:e[2])+"",ie=e[8]&&e[19].length>0&&!e[16]&&V(e),re=e[7]&&Y(),se=!e[8]&&e[24]&&e[12]&&X(e);function ne(t){e[47](t)}let oe={items:JSON.stringify(e[27]),open:e[20],multiple:e[8],isfiltered:le,emptysearchlabel:e[9],maxwidth:e[0],datatextexpr:e[10],datavalueexpr:e[11],selectall:e[17],labelselectall:e[18]};void 0!==e[19]&&(oe.value=e[19]),_=new O({props:oe}),s.push((()=>n(_,"value",ne))),_.$on("change",e[35]),_.$on("scrollend",e[36]);let ce=e[8]&&e[16]&&F(e),de=e[8]&&e[16]&&ee(e),me=[{class:"mc-dropdown"},{style:q="--dropdown-tag-width: "+e[23]+"; --dropdown-width: "+e[0]+";"},e[21]],ge={};for(let e=0;e<me.length;e+=1)ge=o(ge,me[e]);return{c(){t=c("div"),ie&&ie.c(),a=d(),re&&re.c(),i=d(),r=c("button"),z=m(ae),S=d(),se&&se.c(),N=d(),g(_.$$.fragment),L=d(),ce&&ce.c(),G=d(),P=c("span"),W=d(),Q=c("span"),B=d(),R=c("span"),J=d(),de&&de.c(),this.c=p,h(r,"type","button"),h(r,"class","mc-select mc-dropdown__trigger"),r.disabled=e[3],x(r,"is-open",e[20]),x(r,"is-valid",e[5]),x(r,"is-invalid",e[6]),x(r,"mc-select--s","s"===e[4]),h(P,"class","mc-dropdown__tag"),u(P,"display","none"),h(Q,"class","mc-dropdown__loader"),u(Q,"display","none"),h(R,"class","mc-text-input mc-dropdown__trigger"),u(R,"display","none"),b(t,ge),x(t,"mc-dropdown--multi",e[8])},m(s,n){l(s,t,n),ie&&ie.m(t,null),w(t,a),re&&re.m(t,null),w(t,i),w(t,r),w(r,z),w(r,S),se&&se.m(r,null),w(t,N),$(_,t,null),w(t,L),ce&&ce.m(t,null),w(t,G),w(t,P),w(t,W),w(t,Q),w(t,B),w(t,R),w(t,J),de&&de.m(t,null),K=!0,U||(te=[f(r,"click",e[46]),M(H.call(null,t)),f(t,"outclick",e[34])],U=!0)},p(e,l){e[8]&&e[19].length>0&&!e[16]?ie?(ie.p(e,l),590080&l[0]&&I(ie,1)):(ie=V(e),ie.c(),I(ie,1),ie.m(t,a)):ie&&(Z(),v(ie,1,1,(()=>{ie=null})),y()),e[7]?re?128&l[0]&&I(re,1):(re=Y(),re.c(),I(re,1),re.m(t,i)):re&&(Z(),v(re,1,1,(()=>{re=null})),y()),(!K||16777220&l[0])&&ae!==(ae=(e[24]?e[24]:e[2])+"")&&A(z,ae),!e[8]&&e[24]&&e[12]?se?se.p(e,l):(se=X(e),se.c(),se.m(r,null)):se&&(se.d(1),se=null),(!K||8&l[0])&&(r.disabled=e[3]),(!K||1048576&l[0])&&x(r,"is-open",e[20]),(!K||32&l[0])&&x(r,"is-valid",e[5]),(!K||64&l[0])&&x(r,"is-invalid",e[6]),(!K||16&l[0])&&x(r,"mc-select--s","s"===e[4]);const s={};134217728&l[0]&&(s.items=JSON.stringify(e[27])),1048576&l[0]&&(s.open=e[20]),256&l[0]&&(s.multiple=e[8]),512&l[0]&&(s.emptysearchlabel=e[9]),1&l[0]&&(s.maxwidth=e[0]),1024&l[0]&&(s.datatextexpr=e[10]),2048&l[0]&&(s.datavalueexpr=e[11]),131072&l[0]&&(s.selectall=e[17]),262144&l[0]&&(s.labelselectall=e[18]),!T&&524288&l[0]&&(T=!0,s.value=e[19],D((()=>T=!1))),_.$set(s),e[8]&&e[16]?ce?ce.p(e,l):(ce=F(e),ce.c(),ce.m(t,G)):ce&&(ce.d(1),ce=null),e[8]&&e[16]?de?de.p(e,l):(de=ee(e),de.c(),de.m(t,null)):de&&(de.d(1),de=null),b(t,ge=j(me,[{class:"mc-dropdown"},(!K||8388609&l[0]&&q!==(q="--dropdown-tag-width: "+e[23]+"; --dropdown-width: "+e[0]+";"))&&{style:q},2097152&l[0]&&e[21]])),x(t,"mc-dropdown--multi",e[8])},i(e){K||(I(ie),I(re),I(_.$$.fragment,e),K=!0)},o(e){v(ie),v(re),v(_.$$.fragment,e),K=!1},d(e){e&&E(t),ie&&ie.d(),re&&re.d(),se&&se.d(),k(_),ce&&ce.d(),de&&de.d(),U=!1,C(te)}}}let le=!1;function ie(e,t,a){let l,i,r,n,c,d;const m=["maxwidth","tagid","taglabel","placeholder","disabled","size","isvalid","isinvalid","loading","items","value","open","multiple","emptysearchlabel","datatextexpr","datavalueexpr","nosort","clearfield","layertitle","showmoretagslabel","maxnumbertoshowtags","alltags","selectall","labelselectall"];let g=z(t,m),{maxwidth:p="100%"}=t,{tagid:h}=t,{taglabel:x=""}=t,{placeholder:u="-- Placeholder --"}=t,{disabled:b=!1}=t,{size:w="m"}=t,{isvalid:$}=t,{isinvalid:f}=t,{loading:M=!1}=t,{items:I}=t,{value:v}=t,{open:y=!1}=t,{multiple:A=!1}=t,{emptysearchlabel:D="No results found"}=t,{datatextexpr:j="label"}=t,{datavalueexpr:E="value"}=t,{nosort:k=!1}=t,{clearfield:C=!1}=t,{layertitle:_="Title layer"}=t,{showmoretagslabel:T="Show more"}=t,{maxnumbertoshowtags:L=12}=t,{alltags:G=!1}=t,{selectall:Z=!1}=t,{labelselectall:H="Select all"}=t;const Q=S(),B=Math.random();let O,R,J,V,Y=new W,X="0px",F=[],q=null;function K(){a(19,r=A?[]:""),ae(),Y.dispatch("clear",!0)}function U(e){a(19,r=r.filter((t=>t!==e))),Y.dispatch("onchange",r)}function ee(){a(26,q=!0)}function te(){a(26,q=null)}function ae(){a(20,c=!1),A&&!k?function(){V=l;const e=le();V.sort(((t,a)=>{const l=e.includes(t),i=e.includes(a);return l===i?t[E]-a[E]:l<i?1:-1})),a(27,i=V)}():a(27,i=l)}function le(e){const t=e||r;return l.filter((e=>A?t.includes(e[E]):t===e[E]))}return e.$$set=e=>{t=o(o({},t),N(e)),a(59,g=z(t,m)),"maxwidth"in e&&a(0,p=e.maxwidth),"tagid"in e&&a(1,h=e.tagid),"taglabel"in e&&a(37,x=e.taglabel),"placeholder"in e&&a(2,u=e.placeholder),"disabled"in e&&a(3,b=e.disabled),"size"in e&&a(4,w=e.size),"isvalid"in e&&a(5,$=e.isvalid),"isinvalid"in e&&a(6,f=e.isinvalid),"loading"in e&&a(7,M=e.loading),"items"in e&&a(38,I=e.items),"value"in e&&a(39,v=e.value),"open"in e&&a(40,y=e.open),"multiple"in e&&a(8,A=e.multiple),"emptysearchlabel"in e&&a(9,D=e.emptysearchlabel),"datatextexpr"in e&&a(10,j=e.datatextexpr),"datavalueexpr"in e&&a(11,E=e.datavalueexpr),"nosort"in e&&a(41,k=e.nosort),"clearfield"in e&&a(12,C=e.clearfield),"layertitle"in e&&a(13,_=e.layertitle),"showmoretagslabel"in e&&a(14,T=e.showmoretagslabel),"maxnumbertoshowtags"in e&&a(15,L=e.maxnumbertoshowtags),"alltags"in e&&a(16,G=e.alltags),"selectall"in e&&a(17,Z=e.selectall),"labelselectall"in e&&a(18,H=e.labelselectall)},e.$$.update=()=>{if(128&e.$$.dirty[1]&&a(43,l=I?JSON.parse(I):[]),4096&e.$$.dirty[1]&&a(27,i=l),256&e.$$.dirty[0]|256&e.$$.dirty[1]&&a(19,r=!v&&A?[]:v?JSON.parse(v):v),524288&e.$$.dirty[0]|64&e.$$.dirty[1]&&a(28,n=()=>r.length.toString()+" "+x),524288&e.$$.dirty[0]&&async function(e){await P(),a(25,F=le(e));const t=F.map((e=>e[j]));a(24,J=t.join(", ")),A&&a(42,R=e)}(r),2048&e.$$.dirty[1]&&async function(e){await P(),a(23,X=O&&e&&e.length?`${Q.shadowRoot.querySelector(".mc-tag-removable").clientWidth+8}px`:"0px")}(R),512&e.$$.dirty[1]&&a(20,c=y),1048576&e.$$.dirty[0]){const e=c?"open":"close";Y.dispatch(e,c)}a(21,d=Object.assign({},g)),2097152&e.$$.dirty[0]&&delete d.class},[p,h,u,b,w,$,f,M,A,D,j,E,C,_,T,L,G,Z,H,r,c,d,O,X,J,F,q,i,n,B,K,U,ee,te,ae,function(){Y.dispatch("onchange",r),A||ae()},function(){Y.dispatch("scrollend",!0)},x,I,v,y,k,R,l,function(e){s[e?"unshift":"push"]((()=>{O=e,a(22,O)}))},()=>{K()},()=>a(20,c=!c),function(e){r=e,a(19,r),a(39,v),a(8,A)},e=>U(e.id),()=>ee(),e=>U(e.id),()=>te()]}class re extends e{constructor(e){super();const s=document.createElement("style");s.textContent='.mc-select{font-family:"LeroyMerlin", sans-serif;font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;margin:0;-webkit-box-shadow:none;box-shadow:none;border:none;font-size:1rem;line-height:1.125;background-position:right 1rem center, right 2.5rem center;padding:calc(0.9375rem - 1px) 3rem calc(0.9375rem - 1px) calc(0.75rem - 1px);background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMxOTE5MTkiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==");background-color:#ffffff;background-repeat:no-repeat;background-size:1rem 1rem, 1.5rem 1.5rem;border:1px solid #666666;border-radius:4px;color:#191919;-webkit-transition:border-color 200ms ease, -webkit-box-shadow 200ms ease;transition:border-color 200ms ease, -webkit-box-shadow 200ms ease;-o-transition:border-color 200ms ease, box-shadow 200ms ease;transition:border-color 200ms ease, box-shadow 200ms ease;transition:border-color 200ms ease, box-shadow 200ms ease, -webkit-box-shadow 200ms ease;width:100%}.mc-select[type=number]::-webkit-inner-spin-button,.mc-select[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.mc-select[type=number]{-moz-appearance:textfield}.mc-select[type=search]::-webkit-search-decoration:hover,.mc-select[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-select::-ms-expand{display:none}.mc-select.is-hover,.mc-select:hover{border-color:#191919}.mc-select.is-focus,.mc-select:focus{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc}.mc-select:disabled{background-color:#e6e6e6;border-color:#e6e6e6;color:#666666;cursor:not-allowed;opacity:1}.mc-select.is-invalid{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMxOTE5MTkiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg=="), url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNjNjExMTIiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMTAxMCAxMEExMCAxMCAwIDAwMTIgMnptMCAxOGE4IDggMCAxMTgtOCA4IDggMCAwMS04IDh6Ii8+PHBhdGggZD0iTTEyIDdhMSAxIDAgMDAtMSAxdjQuMzhhMSAxIDAgMDAyIDBWOGExIDEgMCAwMC0xLTF6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxNiIgcj0iMSIvPjwvc3ZnPg==");border-color:#c61112}.mc-select.is-valid{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMxOTE5MTkiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg=="), url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNDZhNjEwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiA0YTggOCAwIDExLTggOCA4IDggMCAwMTgtOG0wLTJhMTAgMTAgMCAxMDEwIDEwQTEwIDEwIDAgMDAxMiAyeiIvPjxwYXRoIGQ9Ik0xMC43MyAxNS43NWExIDEgMCAwMS0uNjgtLjI2bC0zLTIuNzRhMSAxIDAgMDExLjM2LTEuNDdsMi4yNSAyLjA4IDQuMzYtNC40MmExIDEgMCAxMTEuNDIgMS40MWwtNSA1LjFhMSAxIDAgMDEtLjcxLjN6Ii8+PC9zdmc+");border-color:#46a610}.mc-select--s{font-size:0.875rem;line-height:1.1428571429;background-position:right 0.5rem center, right 2rem center;padding:calc(0.5rem - 1px) 2rem calc(0.5rem - 1px) calc(0.5rem - 1px)}.mc-select--m{font-size:1rem;line-height:1.125;background-position:right 1rem center, right 2.5rem center;padding:calc(0.9375rem - 1px) 3rem calc(0.9375rem - 1px) calc(0.75rem - 1px)}@media screen and (min-width: 680px){.mc-select--s\\@from-m{font-size:0.875rem;line-height:1.1428571429;background-position:right 0.5rem center, right 2rem center;padding:calc(0.5rem - 1px) 2rem calc(0.5rem - 1px) calc(0.5rem - 1px)}.mc-select--m\\@from-m{font-size:1rem;line-height:1.125;background-position:right 1rem center, right 2.5rem center;padding:calc(0.9375rem - 1px) 3rem calc(0.9375rem - 1px) calc(0.75rem - 1px)}}@media screen and (min-width: 1024px){.mc-select--s\\@from-l{font-size:0.875rem;line-height:1.1428571429;background-position:right 0.5rem center, right 2rem center;padding:calc(0.5rem - 1px) 2rem calc(0.5rem - 1px) calc(0.5rem - 1px)}.mc-select--m\\@from-l{font-size:1rem;line-height:1.125;background-position:right 1rem center, right 2.5rem center;padding:calc(0.9375rem - 1px) 3rem calc(0.9375rem - 1px) calc(0.75rem - 1px)}}@media screen and (min-width: 1280px){.mc-select--s\\@from-xl{font-size:0.875rem;line-height:1.1428571429;background-position:right 0.5rem center, right 2rem center;padding:calc(0.5rem - 1px) 2rem calc(0.5rem - 1px) calc(0.5rem - 1px)}.mc-select--m\\@from-xl{font-size:1rem;line-height:1.125;background-position:right 1rem center, right 2.5rem center;padding:calc(0.9375rem - 1px) 3rem calc(0.9375rem - 1px) calc(0.75rem - 1px)}}@media screen and (min-width: 1920px){.mc-select--s\\@from-xxl{font-size:0.875rem;line-height:1.1428571429;background-position:right 0.5rem center, right 2rem center;padding:calc(0.5rem - 1px) 2rem calc(0.5rem - 1px) calc(0.5rem - 1px)}.mc-select--m\\@from-xxl{font-size:1rem;line-height:1.125;background-position:right 1rem center, right 2.5rem center;padding:calc(0.9375rem - 1px) 3rem calc(0.9375rem - 1px) calc(0.75rem - 1px)}}.mc-dropdown{-ms-flex-item-align:start;align-self:start;position:relative;min-width:18rem;max-width:var(--dropdown-width, auto);width:100%}.mc-dropdown__tag,.mc-dropdown__loader,.mc-dropdown__clear{position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);z-index:2}.mc-dropdown__tag{left:0.75rem}.mc-dropdown__trigger{display:block;overflow:hidden;text-align:left;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap}.mc-dropdown__trigger.is-open{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMwMDAwMDAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTIgMTAuNWExIDEgMCAwMS4yOS0uNzFsNS01YTEgMSAwIDAxMS40MiAwbDUgNWExIDEgMCAwMS0xLjQyIDEuNDJMOCA2LjkxbC00LjI5IDQuM2ExIDEgMCAwMS0xLjQyIDBBMSAxIDAgMDEyIDEwLjV6Ii8+PC9zdmc+")}.mc-dropdown__trigger.is-invalid~.mc-dropdown__loader{right:6.5rem}.mc-dropdown__loader{background-color:#ffffff;right:2.5rem}.mc-dropdown__clear{margin:0;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;-webkit-transition:-webkit-box-shadow 150ms ease;transition:-webkit-box-shadow 150ms ease;-o-transition:box-shadow 150ms ease;transition:box-shadow 150ms ease;transition:box-shadow 150ms ease, -webkit-box-shadow 150ms ease;background:none;border-radius:50%;right:2.5rem}.mc-dropdown__clear:focus{-webkit-box-shadow:0 0 0 2px #0b96cc;box-shadow:0 0 0 2px #0b96cc}.mc-dropdown__clear,.mc-dropdown__clear-icon{height:1.5rem;width:1.5rem}.mc-dropdown__clear-icon{fill:#666666}.mc-dropdown__clear-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.mc-dropdown--multi .mc-dropdown__trigger{padding-left:calc(0.75rem + var(--dropdown-tag-width, 0px))}.mc-dropdown--clearable .mc-dropdown__trigger{padding-right:4.5rem}.mc-dropdown--clearable .mc-dropdown__trigger.is-invalid{padding-right:6.5rem}.mc-dropdown--clearable .mc-dropdown__loader{right:4.5rem}.mc-dropdown__tag{position:absolute !important}.mc-dropdown--multi .mc-dropdown__trigger{padding-left:calc(0.75rem + var(--dropdown-tag-width)) !important}.tags-selected{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.tag-selected{margin-top:1em;margin-left:5px;margin-right:5px}',this.shadowRoot.appendChild(s),t(this,{target:this.shadowRoot,props:a(this.attributes),customElement:!0},ie,ae,r,{maxwidth:0,tagid:1,taglabel:37,placeholder:2,disabled:3,size:4,isvalid:5,isinvalid:6,loading:7,items:38,value:39,open:40,multiple:8,emptysearchlabel:9,datatextexpr:10,datavalueexpr:11,nosort:41,clearfield:12,layertitle:13,showmoretagslabel:14,maxnumbertoshowtags:15,alltags:16,selectall:17,labelselectall:18},null,[-1,-1,-1]),e&&(e.target&&l(e.target,this,e.anchor),e.props&&(this.$set(e.props),i()))}static get observedAttributes(){return["maxwidth","tagid","taglabel","placeholder","disabled","size","isvalid","isinvalid","loading","items","value","open","multiple","emptysearchlabel","datatextexpr","datavalueexpr","nosort","clearfield","layertitle","showmoretagslabel","maxnumbertoshowtags","alltags","selectall","labelselectall"]}get maxwidth(){return this.$$.ctx[0]}set maxwidth(e){this.$$set({maxwidth:e}),i()}get tagid(){return this.$$.ctx[1]}set tagid(e){this.$$set({tagid:e}),i()}get taglabel(){return this.$$.ctx[37]}set taglabel(e){this.$$set({taglabel:e}),i()}get placeholder(){return this.$$.ctx[2]}set placeholder(e){this.$$set({placeholder:e}),i()}get disabled(){return this.$$.ctx[3]}set disabled(e){this.$$set({disabled:e}),i()}get size(){return this.$$.ctx[4]}set size(e){this.$$set({size:e}),i()}get isvalid(){return this.$$.ctx[5]}set isvalid(e){this.$$set({isvalid:e}),i()}get isinvalid(){return this.$$.ctx[6]}set isinvalid(e){this.$$set({isinvalid:e}),i()}get loading(){return this.$$.ctx[7]}set loading(e){this.$$set({loading:e}),i()}get items(){return this.$$.ctx[38]}set items(e){this.$$set({items:e}),i()}get value(){return this.$$.ctx[39]}set value(e){this.$$set({value:e}),i()}get open(){return this.$$.ctx[40]}set open(e){this.$$set({open:e}),i()}get multiple(){return this.$$.ctx[8]}set multiple(e){this.$$set({multiple:e}),i()}get emptysearchlabel(){return this.$$.ctx[9]}set emptysearchlabel(e){this.$$set({emptysearchlabel:e}),i()}get datatextexpr(){return this.$$.ctx[10]}set datatextexpr(e){this.$$set({datatextexpr:e}),i()}get datavalueexpr(){return this.$$.ctx[11]}set datavalueexpr(e){this.$$set({datavalueexpr:e}),i()}get nosort(){return this.$$.ctx[41]}set nosort(e){this.$$set({nosort:e}),i()}get clearfield(){return this.$$.ctx[12]}set clearfield(e){this.$$set({clearfield:e}),i()}get layertitle(){return this.$$.ctx[13]}set layertitle(e){this.$$set({layertitle:e}),i()}get showmoretagslabel(){return this.$$.ctx[14]}set showmoretagslabel(e){this.$$set({showmoretagslabel:e}),i()}get maxnumbertoshowtags(){return this.$$.ctx[15]}set maxnumbertoshowtags(e){this.$$set({maxnumbertoshowtags:e}),i()}get alltags(){return this.$$.ctx[16]}set alltags(e){this.$$set({alltags:e}),i()}get selectall(){return this.$$.ctx[17]}set selectall(e){this.$$set({selectall:e}),i()}get labelselectall(){return this.$$.ctx[18]}set labelselectall(e){this.$$set({labelselectall:e}),i()}}export{re as default};
+//# sourceMappingURL=Dropdown.js.map

package/public/components/dropdown/Dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.js","sources":["../../../src/components/dropdown/Dropdown.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import { tick } from 'svelte';\n  import { get_current_component } from 'svelte/internal';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import { clickOutside } from '../../utilities/ClickOutside';\n  import type { ListboxItems } from '../listbox/listbox.types';\n  import type { SelectSize } from '../select/select.types';\n\n  import Tag from '../tag/Tag.nested.svelte';\n  import Loader from '../loader/Loader.nested.svelte';\n  import Listbox from '../listbox/Listbox.nested.svelte';\n\n  export let maxwidth = '100%';\n  export let tagid: string;\n  export let taglabel = '';\n  export let placeholder = '-- Placeholder --';\n  export let disabled = false;\n  export let size: SelectSize = 'm';\n  export let isvalid: boolean;\n  export let isinvalid: boolean;\n  export let loading = false;\n  export let items: string;\n  export let value: any;\n  export let open = false;\n  export let multiple = false;\n  export let emptysearchlabel = 'No results found';\n  export let datatextexpr = 'label';\n  export let datavalueexpr = 'value';\n  export let nosort = false;\n  export let clearfield = false;\n  export let layertitle = 'Title layer';\n  export let showmoretagslabel = 'Show more';\n  export let maxnumbertoshowtags = 12;\n  export let alltags = false;\n  export let selectall = false;\n  export let labelselectall = 'Select all';\n\n  const component: any = get_current_component();\n  const uuid = Math.random();\n  let eventHandler = new EventHandler();\n  let tag: any;\n  let tagWidth = '0px';\n  let tagValue: any;\n  let buttonvalue: string;\n  let sortedListItems: any;\n  let isfiltered = false;\n  let selectedItems: ListboxItems[] = [];\n  let openLayer: any = null;\n\n  $: parsedItems = items ? (JSON.parse(items) as ListboxItems[]) : [];\n  $: localItems = parsedItems;\n  $: listboxValue = !value && multiple ? [] : value ? JSON.parse(value) : value;\n  $: setTagLabel = () => {\n    return listboxValue.length.toString() + ' ' + taglabel;\n  };\n  $: watchListboxValue(listboxValue);\n  $: setTagWidth(tagValue);\n  $: openState = open;\n  $: {\n    const eventName = openState ? 'open' : 'close';\n    eventHandler.dispatch(eventName, openState);\n  }\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n  function clearListbox() {\n    listboxValue = multiple ? [] : '';\n    closeListBox();\n    eventHandler.dispatch('clear', true);\n  }\n\n  function removeTagSelected(itemSelectedId: any) {\n    listboxValue = listboxValue.filter(\n      (value: any) => value !== itemSelectedId,\n    );\n    eventHandler.dispatch('onchange', listboxValue);\n  }\n\n  function openLayerFn() {\n    openLayer = true;\n  }\n\n  function closeLayerFn() {\n    openLayer = null;\n  }\n\n  function closeListBox() {\n    openState = false;\n\n    if (multiple && !nosort) {\n      sortItems();\n    } else {\n      localItems = parsedItems;\n    }\n  }\n\n  function onChange() {\n    eventHandler.dispatch('onchange', listboxValue);\n\n    if (!multiple) {\n      closeListBox();\n    }\n  }\n\n  function getSelectedItems(val?: any) {\n    const value = val ? val : listboxValue;\n\n    const selectedItems = parsedItems.filter((item: ListboxItems) => {\n      return multiple\n        ? value.includes(item[datavalueexpr])\n        : value === item[datavalueexpr];\n    });\n\n    return selectedItems;\n  }\n\n  function sortItems() {\n    sortedListItems = parsedItems;\n    const selectedItems = getSelectedItems();\n\n    sortedListItems.sort((a: any, b: any) => {\n      const hasItemA = selectedItems.includes(a);\n      const hasItemB = selectedItems.includes(b);\n\n      if (hasItemA === hasItemB) {\n        return a[datavalueexpr] - b[datavalueexpr];\n      } else if (hasItemA < hasItemB) {\n        return 1;\n      } else {\n        return -1;\n      }\n    });\n\n    localItems = sortedListItems;\n  }\n\n  function onScrollEnd() {\n    eventHandler.dispatch('scrollend', true);\n  }\n\n  // Watch Functions\n  async function watchListboxValue(value: any) {\n    await tick();\n    selectedItems = getSelectedItems(value);\n    const seletedLabels = selectedItems.map((item) => item[datatextexpr]);\n\n    buttonvalue = seletedLabels.join(', ');\n\n    if (multiple) {\n      tagValue = value;\n    }\n  }\n\n  async function setTagWidth(tagValue: any) {\n    await tick();\n\n    tagWidth =\n      tag && tagValue && tagValue.length\n        ? `${\n            component.shadowRoot.querySelector('.mc-tag-removable')\n              .clientWidth + 8\n          }px`\n        : '0px';\n  }\n</script>\n\n<div\n  class=\"mc-dropdown\"\n  class:mc-dropdown--multi={multiple}\n  style=\"--dropdown-tag-width: {tagWidth}; --dropdown-width: {maxwidth};\"\n  use:clickOutside\n  on:outclick={closeListBox}\n  {...attributes}\n>\n  <!--  TAG REMOVABLE -->\n  {#if multiple && listboxValue.length > 0 && !alltags}\n    <Tag\n      id={tagid ? tagid : `autocompleteTag-${uuid}`}\n      class=\"mc-dropdown__tag\"\n      label={setTagLabel()}\n      size=\"s\"\n      type=\"removable\"\n      dark={false}\n      disabled={false}\n      href=\"\"\n      name=\"\"\n      selected={false}\n      bind:this={tag}\n      on:tag-removed={clearListbox}\n    />\n  {/if}\n\n  <!-- LOADER -->\n  {#if loading}\n    <Loader size=\"s\" theme=\"primary\" text=\"\" class=\"mc-dropdown__loader\" />\n  {/if}\n\n  <!-- BUTTON -->\n  <button\n    type=\"button\"\n    class=\"mc-select mc-dropdown__trigger\"\n    class:is-open={openState}\n    class:is-valid={isvalid}\n    class:is-invalid={isinvalid}\n    class:mc-select--s={size === 's'}\n    {disabled}\n    on:click={() => (openState = !openState)}\n  >\n    {buttonvalue ? buttonvalue : placeholder}\n    {#if !multiple && buttonvalue && clearfield}\n      <button\n        class=\"mc-dropdown__clear\"\n        type=\"button\"\n        on:click|stopPropagation={() => {\n          clearListbox();\n        }}\n      >\n        <navigation-control-tag--cross-24px />\n      </button>\n    {/if}\n  </button>\n\n  <!-- LISTBOX -->\n  <Listbox\n    items={JSON.stringify(localItems)}\n    open={openState}\n    {multiple}\n    {isfiltered}\n    {emptysearchlabel}\n    {maxwidth}\n    {datatextexpr}\n    {datavalueexpr}\n    {selectall}\n    {labelselectall}\n    bind:value={listboxValue}\n    on:change={onChange}\n    on:scrollend={onScrollEnd}\n  />\n\n  {#if multiple && alltags}\n    <div class=\"tags-selected\">\n      {#each selectedItems as selectedItem, index}\n        {#if index < maxnumbertoshowtags}\n          <div class=\"tag-selected\">\n            <m-tag\n              id={selectedItem.id}\n              label={selectedItem.label}\n              size=\"s\"\n              type=\"removable\"\n              on:tag-removed={() => removeTagSelected(selectedItem.id)}\n            />\n          </div>\n        {/if}\n      {/each}\n      {#if listboxValue.length > maxnumbertoshowtags}\n        <div class=\"tag-selected\">\n          <m-tag\n            id=\"id-tag\"\n            label=\"({listboxValue.length}) {showmoretagslabel} \"\n            size=\"s\"\n            type=\"link\"\n            on:tag-selected={() => openLayerFn()}\n          />\n        </div>\n      {/if}\n    </div>\n  {/if}\n\n  <span class=\"mc-dropdown__tag\" style=\"display:none;\" />\n  <span class=\"mc-dropdown__loader\" style=\"display:none;\" />\n  <span class=\"mc-text-input mc-dropdown__trigger\" style=\"display:none;\" />\n  {#if multiple && alltags}\n    <div>\n      <m-layer\n        title={layertitle}\n        layertitletag=\"h3\"\n        isopen={openLayer}\n        on:layer-closed={() => closeLayerFn()}\n      >\n        <small slot=\"content\">\n          <div class=\"tags-selected\">\n            {#each selectedItems as selectedItem}\n              <div class=\"tag-selected\">\n                <m-tag\n                  id={selectedItem.id}\n                  label={selectedItem.label}\n                  size=\"s\"\n                  type=\"removable\"\n                  on:tag-removed={() => removeTagSelected(selectedItem.id)}\n                />\n              </div>\n            {/each}\n          </div>\n        </small>\n      </m-layer>\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/all-settings';\n  @import '@mozaic-ds/styles/components/c.select';\n  @import '@mozaic-ds/styles/components/c.dropdown';\n\n  // Dropdown\n  // NOTE: These styles with the \"!important\" allow to overload the edge effects\n  // due to the scoping applied by Svelte on the CSS selectors\n  .mc-dropdown {\n    &__tag {\n      position: absolute !important; // due to the Svelte CSS scope\n    }\n\n    &--multi {\n      .mc-dropdown__trigger {\n        padding-left: calc($mu075 + var(--dropdown-tag-width)) !important;\n      }\n    }\n  }\n\n  // Selected Tags\n  .tags-selected {\n    display: flex;\n    flex-wrap: wrap;\n  }\n\n  .tag-selected {\n    margin-top: 1em;\n    margin-left: 5px;\n    margin-right: 5px;\n  }\n</style>\n"],"names":["ctx","insert","target","button","anchor","length","i","create_if_block_2","div","set_custom_element_data","m_tag","m_tag_id_value","id","m_tag_label_value","label","append","dirty","if_block","create_if_block_3","div1","m_layer","small","div0","if_block0","create_if_block_6","create_if_block_5","create_if_block_4","JSON","stringify","if_block3","create_if_block_1","if_block4","create_if_block","style","div_style_value","toggle_class","span0","span1","span2","set_data","t2","t2_value","current","isfiltered","maxwidth","$$props","tagid","taglabel","placeholder","disabled","size","isvalid","isinvalid","loading","items","value","open","multiple","emptysearchlabel","datatextexpr","datavalueexpr","nosort","clearfield","layertitle","showmoretagslabel","maxnumbertoshowtags","alltags","selectall","labelselectall","component","get_current_component","uuid","Math","random","tag","tagValue","buttonvalue","sortedListItems","eventHandler","EventHandler","tagWidth","selectedItems","openLayer","clearListbox","listboxValue","closeListBox","dispatch","removeTagSelected","itemSelectedId","filter","openLayerFn","$$invalidate","closeLayerFn","openState","parsedItems","getSelectedItems","sort","a","b","hasItemA","includes","hasItemB","localItems","sortItems","val","item","parse","setTagLabel","toString","async","tick","seletedLabels","map","join","watchListboxValue","shadowRoot","querySelector","clientWidth","setTagWidth","eventName","attributes","Object","assign","$$restProps","class","$$value","value$1","selectedItem"],"mappings":"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"}