@mozaic-ds/web-components 0.2.0 → 0.4.0

package/public/bricoman/components/datatable/datatable.types.d.ts

@@ -25,6 +25,11 @@ export type TableOptions = {
     searchPlaceholder?: string;
     showAllPages?: boolean;
     itemsPerPageOptions?: Array<number>;
+    activateSettings?: boolean;
+    applyButtonSettingsLabel?: string;
+    resetButtonSettingsLabel?: string;
+    fixedFirstColumn?: boolean;
+    fixedFirstColumnLabel?: string;
 };
 export type TableBodyDatas = {
     headDatas: HeadData[];
@@ -37,6 +42,8 @@ export type HeadData = {
     sortColumn?: string;
     cellsFormat: CellsFormat;
     textAlign?: string;
+    fixedColumn?: boolean;
+    hideColumn?: boolean;
 };
 export type BodyData = {
     id: string;

package/public/bricoman/components/datatable/datatable.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"datatable.types.d.ts","sourceRoot":"","sources":["../../../../src/components/datatable/datatable.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"datatable.types.d.ts","sourceRoot":"","sources":["../../../../src/components/datatable/datatable.types.ts"],"names":[],"mappings":"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"}

package/public/bricoman/components/datatabledefaultaction/DataTableDefaultAction.nested.svelte

@@ -1,18 +1,96 @@
 <script lang="ts">
   import { EventHandler } from '../../utilities/EventHandler';
-  import { getDataAttribute, keyboardsKeys } from '../../utilities/DataTableUtilities';
+  import {
+    getDataAttribute,
+    keyboardsKeys,
+  } from '../../utilities/DataTableUtilities';
+
+  import DisplayMovingBlock24 from './../../../public/icons/DisplayMovingBlock24.js';
+  import type { HeadData } from './datatable.types';
+  if (!customElements.get('navigation-display-movingblock-24px')) {
+    customElements.define(
+      'navigation-display-movingblock-24px',
+      DisplayMovingBlock24 as any,
+    );
+  }
 
   export let e2eAttributeSuffix: string | undefined;
   export let dataTableId: string | undefined;
   export let loading: boolean;
   export let searchPlaceholder: string;
+  export let headTitles: HeadData[] = [];
+  export let activateSettings: boolean;
+  export let applyButtonSettingsLabel: string;
+  export let resetButtonSettingsLabel: string;
+  export let fixedFirstColumn: boolean;
+  export let fixedFirstColumnLabel: string;
 
   let eventHandler = new EventHandler();
   let searchValue = '';
+  let openLayer: any = null;
+
+  let mouseYCoordinate: any = null; // pointer y coordinate within client
+  let distanceTopGrabbedVsPointer: any = null;
+
+  let draggingItem: any = null;
+  let draggingItemId: any = null;
+  let draggingItemIndex: any = null;
+  let initDatas: HeadData[] = [];
+  let hoveredItemIndex: any = null;
+
+  $: initDatas = headTitles ? headTitles.map((x) => Object.assign({}, x)) : [];
+
+  $: {
+    if (
+      draggingItemIndex != null &&
+      hoveredItemIndex != null &&
+      draggingItemIndex != hoveredItemIndex
+    ) {
+      // Allows to swap the position of 2 elements when there is a drag n drop
+      [initDatas[draggingItemIndex], initDatas[hoveredItemIndex]] = [
+        initDatas[hoveredItemIndex],
+        initDatas[draggingItemIndex],
+      ];
+      draggingItemIndex = hoveredItemIndex;
+    }
+  }
 
   function emitEvent(name: string, detail?: CustomEvent['detail']) {
     eventHandler.dispatch(name, detail || {});
   }
+
+  function openLayerFn() {
+    openLayer = true;
+  }
+
+  function closeLayerFn() {
+    openLayer = null;
+  }
+
+  function onApplyClick() {
+    if (initDatas != null) {
+      headTitles = initDatas.map((x) => Object.assign({}, x));
+    }
+    emitEvent('apply-new-columns-order', {
+      headTitle: headTitles,
+      fixedFirstColumn: fixedFirstColumn,
+    });
+    closeLayerFn();
+  }
+
+  function onResetClick() {
+    if (headTitles != null) {
+      initDatas = headTitles.map((x) => Object.assign({}, x));
+    }
+  }
+
+  function onHideColumnChange(item: HeadData) {
+    item.hideColumn = item.hideColumn ? false : true;
+  }
+
+  function onFixedFirstColumn() {
+    fixedFirstColumn = fixedFirstColumn ? false : true;
+  }
 </script>
 
 <div class="mc-datatable__topbar-actions">
@@ -32,11 +110,10 @@
       bind:value={searchValue}
       on:input={() => emitEvent('input-search', searchValue)}
       on:keydown={(event) => {
-      if(event.key === keyboardsKeys.ENTER) 
-       {
-        emitEvent('submit-search', searchValue)
-       }
-        }}
+        if (event.key === keyboardsKeys.ENTER) {
+          emitEvent('submit-search', searchValue);
+        }
+      }}
     />
   </div>
 
@@ -59,7 +136,13 @@
       ? 'is-disabled'
       : ''}"
     {...getDataAttribute(e2eAttributeSuffix, `${dataTableId}SettingsButton`)}
-    on:click={() => emitEvent('click-settings')}
+    on:click={() => {
+      if (activateSettings) {
+        openLayerFn();
+      } else {
+        emitEvent('click-settings');
+      }
+    }}
   >
     <span class="mc-button__icon">
       <navigation-display-setting-24px size="24px" />
@@ -67,6 +150,100 @@
   </button>
 </div>
 
+{#if activateSettings}
+  <div>
+    <m-layer
+      title="Settings"
+      layertitletag="h3"
+      iconname="navigation-display-setting-24px"
+      isopen={openLayer}
+      on:layer-closed={closeLayerFn}
+    >
+      <small slot="content">
+        <span class="settings__title">Columns lock</span>
+        <div class="settings__toggle-column-lock">
+          <m-toggle
+            size="s"
+            name="form-toggle"
+            label={fixedFirstColumnLabel}
+            checked={fixedFirstColumn}
+            on:change={onFixedFirstColumn}
+          />
+        </div>
+        <span class="settings__title">Columns display</span>
+        <div class="settings__columns-container">
+          {#if mouseYCoordinate}
+            <div
+              class="settings__columns-container-item settings__columns-container-item-ghost"
+              style="top: {mouseYCoordinate + distanceTopGrabbedVsPointer}px; "
+            >
+              <div class="settings__column-icon-value">
+                <navigation-display-movingblock-24px fill="#666666" />
+                <input
+                  type="checkbox"
+                  class="mc-checkbox__input settings__checkbox-hide-column"
+                  checked={!draggingItem.hideColumn}
+                />
+                <span class="settings__column-value">{draggingItem.label}</span>
+              </div>
+            </div>
+          {/if}
+
+          {#each initDatas as item, index (item)}
+            <div
+              class="settings__columns-container-item {draggingItemId == item.id
+                ? 'settings__columns-container-item-invisible'
+                : ''}"
+              draggable="true"
+              on:dragstart={(event) => {
+                mouseYCoordinate = event.clientY;
+                draggingItem = item;
+                draggingItemIndex = index;
+                draggingItemId = item.id;
+              }}
+              on:drag={(event) => {
+                mouseYCoordinate = event.clientY;
+              }}
+              on:dragover={() => {
+                hoveredItemIndex = index;
+              }}
+              on:dragend={() => {
+                draggingItemId = null;
+                hoveredItemIndex = null;
+              }}
+            >
+              <div class="settings__column-icon-value">
+                <navigation-display-movingblock-24px fill="#666666" />
+                <input
+                  type="checkbox"
+                  class="mc-checkbox__input settings__checkbox-hide-column"
+                  checked={!item.hideColumn}
+                  on:change={() => onHideColumnChange(item)}
+                />
+                <span class="settings__column-value">{item.label}</span>
+              </div>
+            </div>
+          {/each}
+        </div>
+      </small>
+      <small slot="footer">
+        <button
+          on:click={onApplyClick}
+          class="mc-button mc-button--m mc-button--fit"
+        >
+          {applyButtonSettingsLabel}
+        </button>
+        <button
+          on:click={onResetClick}
+          class="mc-button mc-button--bordered mc-button--m mc-button--fit settings__reset-button"
+        >
+          {resetButtonSettingsLabel}
+        </button>
+      </small>
+    </m-layer>
+  </div>
+{/if}
+
 <!-- svelte-ignore css-unused-selector -->
 <style lang="scss">
   @import '@mozaic-ds/styles/settings-tools/all-settings';
@@ -81,4 +258,49 @@
   @import '@mozaic-ds/styles/components/c.links';
   @import '@mozaic-ds/styles/components/c.tag';
   @import '@mozaic-ds/styles/components/c.toggle';
+  @import '@mozaic-ds/styles/components/c.checkbox';
+
+  .settings {
+    &__title {
+      font-weight: bold;
+    }
+    &__reset-button {
+      margin-left: 25px;
+    }
+    &__column-icon-value {
+      display: flex;
+      text-align: center;
+      align-items: center;
+    }
+    &__checkbox-hide-column {
+      margin-left: 25px;
+    }
+    &__column-value {
+      margin-left: 8px;
+    }
+    &__columns-container {
+      margin-top: 25px;
+      &-item {
+        width: 300px;
+        background: white;
+        margin-bottom: 18px;
+        cursor: grab;
+        &-ghost {
+          margin-bottom: 10px;
+          pointer-events: none;
+          z-index: 99;
+          position: absolute;
+          top: 0;
+          left: 10;
+        }
+        &-invisible {
+          opacity: 0;
+        }
+      }
+    }
+    &__toggle-column-lock {
+      margin-top: 17px;
+      margin-bottom: 17px;
+    }
+  }
 </style>

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

@@ -1,2 +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 M,l as $,B as f,C as I,D as v,E as y,k as A,F as D,m as j,o as z,G as E,H as k,p as C,r as S,q as N,I as _,J as L,K as T,L as G,M as Z,N as P}from"../../index-17a01ab4.js";import{E as W}from"../../EventHandler-316af043.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[61]=t[a],l}function J(e,t,a){const l=e.slice();return l[61]=t[a],l[65]=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,value:""};return t=new Q({props:l}),e[45](t),t.$on("tag-removed",e[30]),{c(){g(t.$$.fragment)},m(e,l){M(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[45](null),E(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){M(t,e,l),a=!0},i(e){a||(I(t.$$.fragment,e),a=!0)},o(e){v(t.$$.fragment,e),a=!1},d(e){E(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=$(t,"click",_(e[46])),a=!0)},p:p,d(e){e&&z(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&&z(t),L(r,e),s&&s.d()}}}function q(e){let t,a,i,r,s,n;function o(){return e[49](e[61])}return{c(){t=c("div"),a=c("m-tag"),G(a,"id",i=e[61].id),G(a,"label",r=e[61].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=$(a,"tag-removed",o),s=!0)},p(t,l){e=t,33554432&l[0]&&i!==(i=e[61].id)&&G(a,"id",i),33554432&l[0]&&r!==(r=e[61].label)&&G(a,"label",r)},d(e){e&&z(t),s=!1,n()}}}function K(e){let t,a=e[65]<e[15]&&q(e);return{c(){a&&a.c(),t=T()},m(e,i){a&&a.m(e,i),l(e,t,i)},p(e,l){e[65]<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&&z(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=$(a,"tag-selected",e[50]),r=!0)},p(e,t){540672&t[0]&&i!==(i="("+e[19].length+") "+e[14]+" ")&&G(a,"label",i)},d(e){e&&z(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=$(a,"layer-closed",e[52]),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&&z(t),L(d,e),s=!1,n()}}}function te(e){let t,a,i,r,s,n,o;function m(){return e[51](e[61])}return{c(){t=c("div"),a=c("m-tag"),s=d(),G(a,"id",i=e[61].id),G(a,"label",r=e[61].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=$(a,"tag-removed",m),n=!0)},p(t,l){e=t,33554432&l[0]&&i!==(i=e[61].id)&&G(a,"id",i),33554432&l[0]&&r!==(r=e[61].label)&&G(a,"label",r)},d(e){e&&z(t),n=!1,o()}}}function ae(e){let t,a,i,r,C,S,N,_,L,T,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[48](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]),_.$on("select-all",e[37]);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"),C=m(ae),S=d(),se&&se.c(),N=d(),g(_.$$.fragment),T=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,C),w(r,S),se&&se.m(r,null),w(t,N),M(_,t,null),w(t,T),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=[$(r,"click",e[47]),f(H.call(null,t)),$(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(C,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]),!L&&524288&l[0]&&(L=!0,s.value=e[19],D((()=>L=!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&&z(t),ie&&ie.d(),re&&re.d(),se&&se.d(),E(_),ce&&ce.d(),de&&de.d(),U=!1,k(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=C(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:M}=t,{isinvalid:$}=t,{loading:f=!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:z="value"}=t,{nosort:E=!1}=t,{clearfield:k=!1}=t,{layertitle:_="Title layer"}=t,{showmoretagslabel:L="Show more"}=t,{maxnumbertoshowtags:T=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&&!E?function(){V=l;const e=le();V.sort(((t,a)=>{const l=e.includes(t),i=e.includes(a);return l===i?t[z]-a[z]: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[z]):t===e[z]))}return e.$$set=e=>{t=o(o({},t),N(e)),a(60,g=C(t,m)),"maxwidth"in e&&a(0,p=e.maxwidth),"tagid"in e&&a(1,h=e.tagid),"taglabel"in e&&a(38,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,M=e.isvalid),"isinvalid"in e&&a(6,$=e.isinvalid),"loading"in e&&a(7,f=e.loading),"items"in e&&a(39,I=e.items),"value"in e&&a(40,v=e.value),"open"in e&&a(41,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,z=e.datavalueexpr),"nosort"in e&&a(42,E=e.nosort),"clearfield"in e&&a(12,k=e.clearfield),"layertitle"in e&&a(13,_=e.layertitle),"showmoretagslabel"in e&&a(14,L=e.showmoretagslabel),"maxnumbertoshowtags"in e&&a(15,T=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(256&e.$$.dirty[1]&&a(44,l=I?JSON.parse(I):[]),8192&e.$$.dirty[1]&&a(27,i=l),256&e.$$.dirty[0]|512&e.$$.dirty[1]&&a(19,r=!v&&A?[]:v?JSON.parse(v):v),524288&e.$$.dirty[0]|128&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(43,R=e)}(r),4096&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),1024&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,M,$,f,A,D,j,z,k,_,L,T,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)},function(e){Y.dispatch("select-all",e.detail)},x,I,v,y,E,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(40,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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMzMzMzMzMiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==");background-color:#ffffff;background-repeat:no-repeat;background-size:1rem 1rem, 1.5rem 1.5rem;border:1px solid #808080;border-radius:4px;color:#333333;-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:#808080;cursor:not-allowed;opacity:1}.mc-select.is-invalid{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMzMzMzMzMiIHZpZXdCb3g9IjAgMCAxNiAxNiI+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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMzMzMzMzMiIHZpZXdCb3g9IjAgMCAxNiAxNiI+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:38,placeholder:2,disabled:3,size:4,isvalid:5,isinvalid:6,loading:7,items:39,value:40,open:41,multiple:8,emptysearchlabel:9,datatextexpr:10,datavalueexpr:11,nosort:42,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[38]}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[39]}set items(e){this.$$set({items:e}),i()}get value(){return this.$$.ctx[40]}set value(e){this.$$set({value:e}),i()}get open(){return this.$$.ctx[41]}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[42]}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};
+import{S as e,i as t,a,b as l,f as i,s,v as r,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 M,l as f,B as $,C as I,D as v,E as y,k as A,F as D,m as j,o as z,G as k,H as E,p as C,r as S,q as N,I as _,J as L,K as T,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[61]=t[a],l}function J(e,t,a){const l=e.slice();return l[61]=t[a],l[65]=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,value:""};return t=new Q({props:l}),e[45](t),t.$on("tag-removed",e[30]),{c(){g(t.$$.fragment)},m(e,l){M(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[45](null),k(t,a)}}}function Y(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(s,r){l(s,t,r),a||(i=f(t,"click",_(e[46])),a=!0)},p:p,d(e){e&&z(t),a=!1,i()}}}function X(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){M(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 F(e){let t,a,i=e[25],s=[];for(let t=0;t<i.length;t+=1)s[t]=K(J(e,i,t));let r=e[19].length>e[15]&&U(e);return{c(){t=c("div");for(let e=0;e<s.length;e+=1)s[e].c();a=d(),r&&r.c(),h(t,"class","tags-selected")},m(e,i){l(e,t,i);for(let e=0;e<s.length;e+=1)s[e]&&s[e].m(t,null);w(t,a),r&&r.m(t,null)},p(e,l){if(33587200&l[0]|1&l[1]){let r;for(i=e[25],r=0;r<i.length;r+=1){const n=J(e,i,r);s[r]?s[r].p(n,l):(s[r]=K(n),s[r].c(),s[r].m(t,a))}for(;r<s.length;r+=1)s[r].d(1);s.length=i.length}e[19].length>e[15]?r?r.p(e,l):(r=U(e),r.c(),r.m(t,null)):r&&(r.d(1),r=null)},d(e){e&&z(t),L(s,e),r&&r.d()}}}function q(e){let t,a,i,s,r,n;function o(){return e[49](e[61])}return{c(){t=c("div"),a=c("m-tag"),G(a,"id",i=e[61].id),G(a,"label",s=e[61].label),G(a,"size","s"),G(a,"type","removable"),h(t,"class","tag-selected")},m(e,i){l(e,t,i),w(t,a),r||(n=f(a,"tag-removed",o),r=!0)},p(t,l){e=t,33554432&l[0]&&i!==(i=e[61].id)&&G(a,"id",i),33554432&l[0]&&s!==(s=e[61].label)&&G(a,"label",s)},d(e){e&&z(t),r=!1,n()}}}function K(e){let t,a=e[65]<e[15]&&q(e);return{c(){a&&a.c(),t=T()},m(e,i){a&&a.m(e,i),l(e,t,i)},p(e,l){e[65]<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&&z(t)}}}function U(e){let t,a,i,s,r;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),s||(r=f(a,"tag-selected",e[50]),s=!0)},p(e,t){540672&t[0]&&i!==(i="("+e[19].length+") "+e[14]+" ")&&G(a,"label",i)},d(e){e&&z(t),s=!1,r()}}}function ee(e){let t,a,i,s,r,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"),s=c("div");for(let e=0;e<d.length;e+=1)d[e].c();h(s,"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,s);for(let e=0;e<d.length;e+=1)d[e]&&d[e].m(s,null);r||(n=f(a,"layer-closed",e[52]),r=!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(s,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&&z(t),L(d,e),r=!1,n()}}}function te(e){let t,a,i,s,r,n,o;function m(){return e[51](e[61])}return{c(){t=c("div"),a=c("m-tag"),r=d(),G(a,"id",i=e[61].id),G(a,"label",s=e[61].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,r),n||(o=f(a,"tag-removed",m),n=!0)},p(t,l){e=t,33554432&l[0]&&i!==(i=e[61].id)&&G(a,"id",i),33554432&l[0]&&s!==(s=e[61].label)&&G(a,"label",s)},d(e){e&&z(t),n=!1,o()}}}function ae(e){let t,a,i,s,C,S,N,_,L,T,G,P,W,Q,B,R,J,q,K,U,te,ae,ie,se=(e[24]?e[24]:e[2])+"",re=e[8]&&e[19].length>0&&!e[16]&&V(e),ne=!e[8]&&e[24]&&e[12]&&Y(e),oe=e[7]&&X();function ce(t){e[48](t)}let de={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]&&(de.value=e[19]),T=new O({props:de}),r.push((()=>n(T,"value",ce))),T.$on("change",e[35]),T.$on("scrollend",e[36]),T.$on("select-all",e[37]);let me=e[8]&&e[16]&&F(e),ge=e[8]&&e[16]&&ee(e),pe=[{class:"mc-dropdown"},{style:U="--dropdown-tag-width: "+e[23]+"; --dropdown-width: "+e[0]+";"},e[21]],he={};for(let e=0;e<pe.length;e+=1)he=o(he,pe[e]);return{c(){t=c("div"),a=c("div"),re&&re.c(),i=d(),s=c("button"),C=m(se),S=d(),ne&&ne.c(),N=d(),_=c("div"),oe&&oe.c(),L=d(),g(T.$$.fragment),P=d(),me&&me.c(),W=d(),Q=c("span"),B=d(),R=c("span"),J=d(),q=c("span"),K=d(),ge&&ge.c(),this.c=p,h(s,"type","button"),h(s,"class","mc-select mc-dropdown__trigger"),s.disabled=e[3],x(s,"is-open",e[20]),x(s,"is-valid",e[5]),x(s,"is-invalid",e[6]),x(s,"mc-select--s","s"===e[4]),h(_,"class","mc-dropdown__tools"),h(a,"class","mc-dropdown__main"),h(Q,"class","mc-dropdown__tag"),u(Q,"display","none"),h(R,"class","mc-dropdown__loader"),u(R,"display","none"),h(q,"class","mc-text-input mc-dropdown__trigger"),u(q,"display","none"),b(t,he),x(t,"mc-dropdown--multi",e[8])},m(r,n){l(r,t,n),w(t,a),re&&re.m(a,null),w(a,i),w(a,s),w(s,C),w(s,S),ne&&ne.m(s,null),w(a,N),w(a,_),oe&&oe.m(_,null),w(t,L),M(T,t,null),w(t,P),me&&me.m(t,null),w(t,W),w(t,Q),w(t,B),w(t,R),w(t,J),w(t,q),w(t,K),ge&&ge.m(t,null),te=!0,ae||(ie=[f(s,"click",e[47]),$(H.call(null,t)),f(t,"outclick",e[34])],ae=!0)},p(e,l){e[8]&&e[19].length>0&&!e[16]?re?(re.p(e,l),590080&l[0]&&I(re,1)):(re=V(e),re.c(),I(re,1),re.m(a,i)):re&&(Z(),v(re,1,1,(()=>{re=null})),y()),(!te||16777220&l[0])&&se!==(se=(e[24]?e[24]:e[2])+"")&&A(C,se),!e[8]&&e[24]&&e[12]?ne?ne.p(e,l):(ne=Y(e),ne.c(),ne.m(s,null)):ne&&(ne.d(1),ne=null),(!te||8&l[0])&&(s.disabled=e[3]),(!te||1048576&l[0])&&x(s,"is-open",e[20]),(!te||32&l[0])&&x(s,"is-valid",e[5]),(!te||64&l[0])&&x(s,"is-invalid",e[6]),(!te||16&l[0])&&x(s,"mc-select--s","s"===e[4]),e[7]?oe?128&l[0]&&I(oe,1):(oe=X(),oe.c(),I(oe,1),oe.m(_,null)):oe&&(Z(),v(oe,1,1,(()=>{oe=null})),y());const r={};134217728&l[0]&&(r.items=JSON.stringify(e[27])),1048576&l[0]&&(r.open=e[20]),256&l[0]&&(r.multiple=e[8]),512&l[0]&&(r.emptysearchlabel=e[9]),1&l[0]&&(r.maxwidth=e[0]),1024&l[0]&&(r.datatextexpr=e[10]),2048&l[0]&&(r.datavalueexpr=e[11]),131072&l[0]&&(r.selectall=e[17]),262144&l[0]&&(r.labelselectall=e[18]),!G&&524288&l[0]&&(G=!0,r.value=e[19],D((()=>G=!1))),T.$set(r),e[8]&&e[16]?me?me.p(e,l):(me=F(e),me.c(),me.m(t,W)):me&&(me.d(1),me=null),e[8]&&e[16]?ge?ge.p(e,l):(ge=ee(e),ge.c(),ge.m(t,null)):ge&&(ge.d(1),ge=null),b(t,he=j(pe,[{class:"mc-dropdown"},(!te||8388609&l[0]&&U!==(U="--dropdown-tag-width: "+e[23]+"; --dropdown-width: "+e[0]+";"))&&{style:U},2097152&l[0]&&e[21]])),x(t,"mc-dropdown--multi",e[8])},i(e){te||(I(re),I(oe),I(T.$$.fragment,e),te=!0)},o(e){v(re),v(oe),v(T.$$.fragment,e),te=!1},d(e){e&&z(t),re&&re.d(),ne&&ne.d(),oe&&oe.d(),k(T),me&&me.d(),ge&&ge.d(),ae=!1,E(ie)}}}let le=!1;function ie(e,t,a){let l,i,s,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=C(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:M}=t,{isinvalid:f}=t,{loading:$=!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:z="value"}=t,{nosort:k=!1}=t,{clearfield:E=!1}=t,{layertitle:_="Title layer"}=t,{showmoretagslabel:L="Show more"}=t,{maxnumbertoshowtags:T=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,s=A?[]:""),ae(),Y.dispatch("clear",!0)}function U(e){a(19,s=s.filter((t=>t!==e))),Y.dispatch("onchange",s)}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[z]-a[z]:l<i?1:-1})),a(27,i=V)}():a(27,i=l)}function le(e){const t=e||s;return l.filter((e=>A?t.includes(e[z]):t===e[z]))}return e.$$set=e=>{t=o(o({},t),N(e)),a(60,g=C(t,m)),"maxwidth"in e&&a(0,p=e.maxwidth),"tagid"in e&&a(1,h=e.tagid),"taglabel"in e&&a(38,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,M=e.isvalid),"isinvalid"in e&&a(6,f=e.isinvalid),"loading"in e&&a(7,$=e.loading),"items"in e&&a(39,I=e.items),"value"in e&&a(40,v=e.value),"open"in e&&a(41,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,z=e.datavalueexpr),"nosort"in e&&a(42,k=e.nosort),"clearfield"in e&&a(12,E=e.clearfield),"layertitle"in e&&a(13,_=e.layertitle),"showmoretagslabel"in e&&a(14,L=e.showmoretagslabel),"maxnumbertoshowtags"in e&&a(15,T=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(256&e.$$.dirty[1]&&a(44,l=I?JSON.parse(I):[]),8192&e.$$.dirty[1]&&a(27,i=l),256&e.$$.dirty[0]|512&e.$$.dirty[1]&&a(19,s=!v&&A?[]:v?JSON.parse(v):v),524288&e.$$.dirty[0]|128&e.$$.dirty[1]&&a(28,n=()=>s.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(43,R=e)}(s),4096&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),1024&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,M,f,$,A,D,j,z,E,_,L,T,G,Z,H,s,c,d,O,X,J,F,q,i,n,B,K,U,ee,te,ae,function(){Y.dispatch("onchange",s),A||ae()},function(){Y.dispatch("scrollend",!0)},function(e){Y.dispatch("select-all",e.detail)},x,I,v,y,k,R,l,function(e){r[e?"unshift":"push"]((()=>{O=e,a(22,O)}))},()=>{K()},()=>a(20,c=!c),function(e){s=e,a(19,s),a(40,v),a(8,A)},e=>U(e.id),()=>ee(),e=>U(e.id),()=>te()]}class se extends e{constructor(e){super();const r=document.createElement("style");r.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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMzMzMzMzMiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==");background-color:#ffffff;background-repeat:no-repeat;background-size:1rem 1rem, 1.5rem 1.5rem;border:1px solid #808080;border-radius:4px;color:#333333;-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:#808080;cursor:not-allowed;opacity:1}.mc-select.is-invalid{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMzMzMzMzMiIHZpZXdCb3g9IjAgMCAxNiAxNiI+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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMzMzMzMzMiIHZpZXdCb3g9IjAgMCAxNiAxNiI+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__tools{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__tools{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#ffffff;display:-webkit-box;display:-ms-flexbox;display:flex;gap:0.5rem;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;right:2.5rem}.is-valid+.mc-dropdown__tools,.is-invalid+.mc-dropdown__tools{right:4.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%}.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__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(r),t(this,{target:this.shadowRoot,props:a(this.attributes),customElement:!0},ie,ae,s,{maxwidth:0,tagid:1,taglabel:38,placeholder:2,disabled:3,size:4,isvalid:5,isinvalid:6,loading:7,items:39,value:40,open:41,multiple:8,emptysearchlabel:9,datatextexpr:10,datavalueexpr:11,nosort:42,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[38]}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[39]}set items(e){this.$$set({items:e}),i()}get value(){return this.$$.ctx[40]}set value(e){this.$$set({value:e}),i()}get open(){return this.$$.ctx[41]}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[42]}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{se as default};
 //# sourceMappingURL=Dropdown.js.map

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

@@ -1 +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  function onSelectAll(e: CustomEvent) {\n    eventHandler.dispatch('select-all', e.detail);\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      value=\"\"\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    on:select-all={onSelectAll}\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","e","detail","$$value","value$1","selectedItem"],"mappings":"uqBAsLUA,EAAK,GAAGA,EAAK,sBAAsBA,EAAI,qCAEpCA,EAAW,sCAGZ,YACI,4BAGA,mEAGMA,EAAY,kFAZxBA,EAAK,GAAGA,EAAK,sBAAsBA,EAAI,gCAEpCA,EAAW,8hBAgClBC,EAQQC,EAAAC,EAAAC,0FAwBDJ,EAAa,yBAAlBK,OAAIC,GAAA,yBAaDN,EAAY,IAACK,OAASL,EAAmB,KAAAO,EAAAP,kHAdhDC,EAyBKC,EAAAM,EAAAJ,uHAxBIJ,EAAa,YAAlBK,OAAIC,GAAA,EAAA,8GAAJD,OAaGL,EAAY,IAACK,OAASL,EAAmB,+LATlCS,EAAAC,EAAA,KAAAC,EAAAX,MAAaY,IACVH,EAAAC,EAAA,QAAAG,EAAAb,MAAac,mFAHxBb,EAQKC,EAAAM,EAAAJ,GAPHW,EAMCP,EAAAE,gDALK,SAAAM,EAAA,IAAAL,KAAAA,EAAAX,MAAaY,iBACV,SAAAI,EAAA,IAAAH,KAAAA,EAAAb,MAAac,oEAJrBG,EAAAjB,MAAQA,EAAmB,KAAAkB,EAAAlB,kEAA3BA,MAAQA,EAAmB,mMAgBnBA,EAAY,IAACK,OAAM,KAAIL,EAAiB,IAAA,4EAHrDC,EAQKC,EAAAM,EAAAJ,GAPHW,EAMCP,EAAAE,yEAJUV,EAAY,IAACK,OAAM,KAAIL,EAAiB,IAAA,+EAuB1CA,EAAa,yBAAlBK,OAAIC,GAAA,qLAPHN,EAAU,4CAETA,EAAS,aAJrBC,EAuBKC,EAAAiB,EAAAf,GAtBHW,EAqBSI,EAAAC,GAfPL,EAcOK,EAAAC,GAbLN,EAYKM,EAAAC,uIAXItB,EAAa,YAAlBK,OAAIC,GAAA,EAAA,kHAAJD,8BAPCL,EAAU,iCAETA,EAAS,gJAQHS,EAAAC,EAAA,KAAAC,EAAAX,MAAaY,IACVH,EAAAC,EAAA,QAAAG,EAAAb,MAAac,mFAHxBb,EAQKC,EAAAM,EAAAJ,GAPHW,EAMCP,EAAAE,uDALK,SAAAM,EAAA,IAAAL,KAAAA,EAAAX,MAAaY,iBACV,SAAAI,EAAA,IAAAH,KAAAA,EAAAb,MAAac,kHA9EjCd,EAAW,IAAGA,EAAW,IAAGA,EAAW,IAAA,GAlCrCuB,GAAAvB,MAAYA,EAAY,IAACK,OAAS,IAAML,EAAO,KAAAwB,EAAAxB,MAmB/CA,EAAO,IAAAyB,QAgBJzB,EAAQ,IAAIA,EAAW,KAAIA,EAAU,KAAA0B,EAAA1B,yCAepC2B,KAAKC,UAAU5B,EAAU,UAC1BA,EAAS,sJASS,IAAZA,EAAY,eAAZA,EAAY,sEACbA,EAAQ,uBACLA,EAAW,wBACVA,EAAW,KAGvB,IAAA6B,GAAA7B,MAAYA,EAAO,KAAA8B,EAAA9B,GAgCnB+B,GAAA/B,MAAYA,EAAO,KAAAgC,GAAAhC,8BAxGMiC,MAAAC,EAAA,yBAAAlC,6BAA8BA,EAAQ,GAAA,KAGhEA,EAAU,+WA8BGA,EAAS,oBACRA,EAAO,qBACLA,EAAS,IACPmC,EAAAhC,EAAA,eAAS,MAATH,8NArCIA,EAAQ,YAFpCC,EAqIKC,EAAAM,EAAAJ,mDApGHW,EAsBQP,EAAAL,oFAiDRY,EAAsDP,EAAA4B,UACtDrB,EAAyDP,EAAA6B,UACzDtB,EAAwEP,EAAA8B,4FArG3DtC,EAAY,oBAIpBA,MAAYA,EAAY,IAACK,OAAS,IAAML,EAAO,mHAmB/CA,EAAO,iIAeTA,EAAW,IAAGA,EAAW,IAAGA,EAAW,IAAA,KAAAuC,EAAAC,EAAAC,KAClCzC,EAAQ,IAAIA,EAAW,KAAIA,EAAU,uIAR5BA,EAAS,mCACRA,EAAO,oCACLA,EAAS,mBACPmC,EAAAhC,EAAA,eAAS,MAATH,0CAoBb2B,KAAKC,UAAU5B,EAAU,4BAC1BA,EAAS,0QASHA,EAAY,6BAMrBA,MAAYA,EAAO,kEAgCnBA,MAAYA,EAAO,2GAxGM0C,GAAA,QAAA1B,EAAA,IAAAkB,KAAAA,EAAA,yBAAAlC,6BAA8BA,EAAQ,GAAA,OAAA,CAAAiC,MAAAC,iBAGhElC,EAAU,gCAJYA,EAAQ,oLA9H9B,IAAA2C,IAAa,mWAjCNC,SAAAA,EAAW,QAAMC,SACjBC,GAAaD,GACbE,SAAAA,EAAW,IAAEF,GACbG,YAAAA,EAAc,qBAAmBH,GACjCI,SAAAA,GAAW,GAAKJ,GAChBK,KAAAA,EAAmB,KAAGL,WACtBM,GAAgBN,aAChBO,GAAkBP,GAClBQ,QAAAA,GAAU,GAAKR,SACfS,GAAaT,SACbU,GAAUV,GACVW,KAAAA,GAAO,GAAKX,GACZY,SAAAA,GAAW,GAAKZ,GAChBa,iBAAAA,EAAmB,oBAAkBb,GACrCc,aAAAA,EAAe,SAAOd,GACtBe,cAAAA,EAAgB,SAAOf,GACvBgB,OAAAA,GAAS,GAAKhB,GACdiB,WAAAA,GAAa,GAAKjB,GAClBkB,WAAAA,EAAa,eAAalB,GAC1BmB,kBAAAA,EAAoB,aAAWnB,GAC/BoB,oBAAAA,EAAsB,IAAEpB,GACxBqB,QAAAA,GAAU,GAAKrB,GACfsB,UAAAA,GAAY,GAAKtB,GACjBuB,eAAAA,EAAiB,cAAYvB,EAElC,MAAAwB,EAAiBC,IACjBC,EAAOC,KAAKC,SACd,IACAC,EAEAC,EACAC,EACAC,EALAC,MAAmBC,EAEnBC,EAAW,MAKXC,EAAa,GACbC,EAAiB,cAiBZC,SACPC,EAAe3B,EAAQ,GAAQ,IAC/B4B,KACAP,EAAaQ,SAAS,SAAS,GAGxB,SAAAC,EAAkBC,QACzBJ,EAAeA,EAAaK,QACzBlC,GAAeA,IAAUiC,KAE5BV,EAAaQ,SAAS,WAAYF,YAG3BM,KACPC,EAAA,GAAAT,GAAY,YAGLU,KACPD,EAAA,GAAAT,EAAY,eAGLG,KACPM,EAAA,GAAAE,GAAY,GAERpC,IAAaI,aA4BjBgB,EAAkBiB,EACZ,MAAAb,EAAgBc,KAEtBlB,EAAgBmB,MAAM,CAAAC,EAAQC,KACtB,MAAAC,EAAWlB,EAAcmB,SAASH,GAClCI,EAAWpB,EAAcmB,SAASF,GAEpC,OAAAC,IAAaE,EACRJ,EAAErC,GAAiBsC,EAAEtC,GACnBuC,EAAWE,EACb,GAEC,KAIZV,EAAA,GAAAW,EAAazB,GA3CX0B,GAEAZ,EAAA,GAAAW,EAAaR,GAYR,SAAAC,GAAiBS,GAClB,MAAAjD,EAAQiD,GAAYpB,SAEJU,EAAYL,QAAQgB,GACjChD,EACHF,EAAM6C,SAASK,EAAK7C,IACpBL,IAAUkD,EAAK7C,29BA5DtB+B,EAAA,GAAEG,EAAcxC,EAAS3B,KAAK+E,MAAMpD,GAAK,wBACzCqC,EAAA,GAAEW,EAAaR,wCACbH,EAAA,GAAAP,GAAgB7B,GAASE,KAAgBF,EAAQ5B,KAAK+E,MAAMnD,GAASA,gDACrEoD,EAAW,IACLvB,EAAa/E,OAAOuG,WAAa,IAAM7D,yBA2FjC8D,eAAkBtD,SACzBuD,SACN7B,EAAgBc,GAAiBxC,UAC3BwD,EAAgB9B,EAAc+B,KAAKP,GAASA,EAAK9C,KAEvDgC,EAAA,GAAAf,EAAcmC,EAAcE,KAAK,OAE7BxD,GACFkC,EAAA,GAAAhB,EAAWpB,GAjGZ2D,CAAkB9B,uBAqGNyB,eAAYlC,SACnBmC,IAENnB,EAAA,GAAAX,EACEN,GAAOC,GAAYA,EAAStE,UAEtBgE,EAAU8C,WAAWC,cAAc,qBAChCC,YAAc,MAEnB,OA7GLC,CAAY3C,uBACdgB,EAAA,GAAEE,EAAYrC,yBACd,CACO,MAAA+D,EAAY1B,EAAY,OAAS,QACvCf,EAAaQ,SAASiC,EAAW1B,QAEhC2B,EAALC,OAAAC,UAAuBC,kCACXH,EAAWI,4FAiCnB9C,EAAaQ,SAAS,WAAYF,GAE7B3B,GACH4B,iBAqCFP,EAAaQ,SAAS,aAAa,IAG5B,SAAYuC,GACnB/C,EAAaQ,SAAS,aAAcuC,EAAEC,+DAmDzBpD,EAAGqD,mBA2BV5C,GAAY,EARD,IAAAQ,EAAA,GAAAE,GAAaA,eA4BlBT,EAAY4C,6BAgBQzC,EAAkB0C,EAAarH,QAYhC8E,QA2BKH,EAAkB0C,EAAarH,QAXxCgF"}
+{"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  function onSelectAll(e: CustomEvent) {\n    eventHandler.dispatch('select-all', e.detail);\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  <div class=\"mc-dropdown__main\">\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        value=\"\"\n        bind:this={tag}\n        on:tag-removed={clearListbox}\n      />\n    {/if}\n\n    <!-- TRIGGER 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    <div class=\"mc-dropdown__tools\">\n      <!-- LOADER -->\n      {#if loading}\n        <Loader size=\"s\" theme=\"primary\" text=\"\" class=\"mc-dropdown__loader\" />\n      {/if}\n    </div>\n  </div>\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    on:select-all={onSelectAll}\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","div2_style_value","toggle_class","div2","span0","span1","span2","set_data","t1","t1_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","e","detail","$$value","value$1","selectedItem"],"mappings":"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"}

package/public/bricoman/components/dropdown/Dropdown.svelte

@@ -177,54 +177,58 @@
   on:outclick={closeListBox}
   {...attributes}
 >
-  <!--  TAG REMOVABLE -->
-  {#if multiple && listboxValue.length > 0 && !alltags}
-    <Tag
-      id={tagid ? tagid : `autocompleteTag-${uuid}`}
-      class="mc-dropdown__tag"
-      label={setTagLabel()}
-      size="s"
-      type="removable"
-      dark={false}
-      disabled={false}
-      href=""
-      name=""
-      selected={false}
-      value=""
-      bind:this={tag}
-      on:tag-removed={clearListbox}
-    />
-  {/if}
+  <div class="mc-dropdown__main">
+    <!--  TAG REMOVABLE -->
+    {#if multiple && listboxValue.length > 0 && !alltags}
+      <Tag
+        id={tagid ? tagid : `autocompleteTag-${uuid}`}
+        class="mc-dropdown__tag"
+        label={setTagLabel()}
+        size="s"
+        type="removable"
+        dark={false}
+        disabled={false}
+        href=""
+        name=""
+        selected={false}
+        value=""
+        bind:this={tag}
+        on:tag-removed={clearListbox}
+      />
+    {/if}
 
-  <!-- LOADER -->
-  {#if loading}
-    <Loader size="s" theme="primary" text="" class="mc-dropdown__loader" />
-  {/if}
+    <!-- TRIGGER BUTTON -->
+    <button
+      type="button"
+      class="mc-select mc-dropdown__trigger"
+      class:is-open={openState}
+      class:is-valid={isvalid}
+      class:is-invalid={isinvalid}
+      class:mc-select--s={size === 's'}
+      {disabled}
+      on:click={() => (openState = !openState)}
+    >
+      {buttonvalue ? buttonvalue : placeholder}
+      {#if !multiple && buttonvalue && clearfield}
+        <button
+          class="mc-dropdown__clear"
+          type="button"
+          on:click|stopPropagation={() => {
+            clearListbox();
+          }}
+        >
+          <navigation-control-tag--cross-24px />
+        </button>
+      {/if}
+    </button>
 
-  <!-- BUTTON -->
-  <button
-    type="button"
-    class="mc-select mc-dropdown__trigger"
-    class:is-open={openState}
-    class:is-valid={isvalid}
-    class:is-invalid={isinvalid}
-    class:mc-select--s={size === 's'}
-    {disabled}
-    on:click={() => (openState = !openState)}
-  >
-    {buttonvalue ? buttonvalue : placeholder}
-    {#if !multiple && buttonvalue && clearfield}
-      <button
-        class="mc-dropdown__clear"
-        type="button"
-        on:click|stopPropagation={() => {
-          clearListbox();
-        }}
-      >
-        <navigation-control-tag--cross-24px />
-      </button>
-    {/if}
-  </button>
+    <div class="mc-dropdown__tools">
+      <!-- LOADER -->
+      {#if loading}
+        <Loader size="s" theme="primary" text="" class="mc-dropdown__loader" />
+      {/if}
+    </div>
+  </div>
 
   <!-- LISTBOX -->
   <Listbox