@mozaic-ds/web-components 0.17.0 → 0.17.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/public/adeo/components/autocomplete/Autocomplete.js +1 -1
- package/public/adeo/components/autocomplete/Autocomplete.js.map +1 -1
- package/public/adeo/components/autocomplete/Autocomplete.svelte +2 -0
- package/public/adeo/components/dropdown/Dropdown.js +1 -1
- package/public/adeo/components/dropdown/Dropdown.js.map +1 -1
- package/public/adeo/components/dropdown/Dropdown.svelte +2 -0
- package/public/adeo/components/stepper/Stepper.js +1 -1
- package/public/adeo/components/stepper/Stepper.js.map +1 -1
- package/public/adeo/components/stepper/Stepper.svelte +9 -0
- package/public/adeo/utilities/stories/stepper/Stepper.stories.d.ts.map +1 -1
- package/public/bricoman/components/autocomplete/Autocomplete.js +1 -1
- package/public/bricoman/components/autocomplete/Autocomplete.js.map +1 -1
- package/public/bricoman/components/autocomplete/Autocomplete.svelte +2 -0
- package/public/bricoman/components/dropdown/Dropdown.js +1 -1
- package/public/bricoman/components/dropdown/Dropdown.js.map +1 -1
- package/public/bricoman/components/dropdown/Dropdown.svelte +2 -0
- package/public/bricoman/components/stepper/Stepper.js +1 -1
- package/public/bricoman/components/stepper/Stepper.js.map +1 -1
- package/public/bricoman/components/stepper/Stepper.svelte +9 -0
- package/public/bricoman/utilities/stories/stepper/Stepper.stories.d.ts.map +1 -1
- package/public/components/autocomplete/Autocomplete.js +1 -1
- package/public/components/autocomplete/Autocomplete.js.map +1 -1
- package/public/components/autocomplete/Autocomplete.svelte +2 -0
- package/public/components/dropdown/Dropdown.js +1 -1
- package/public/components/dropdown/Dropdown.js.map +1 -1
- package/public/components/dropdown/Dropdown.svelte +2 -0
- package/public/components/stepper/Stepper.js +1 -1
- package/public/components/stepper/Stepper.js.map +1 -1
- package/public/components/stepper/Stepper.svelte +9 -0
- package/public/utilities/stories/stepper/Stepper.stories.d.ts.map +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{S as t,i as e,a as l,b as a,f as i,s,H as n,I as o,c as r,e as c,d,B as u,n as m,g as p,J as h,h as g,v as $,j as f,C as x,K as b,l as w,y as v,w as y,x as _,L as k,m as z,o as q,D as j,M as S,p as C,q as N,r as O,u as T,N as J,O as E,P as L,A as H,z as M,Q as R,R as Y}from"../../index-9ffad6d0.js";import{E as A}from"../../EventHandler-f7ee47ca.js";import{c as U}from"../../ClickOutside-63071e7a.js";import B from"../tag/Tag.nested.js";import D from"../loader/Loader.nested.js";import I from"../textinput/Textinput.nested.js";import K from"../listbox/Listbox.nested.js";function P(t,e,l){const a=t.slice();return a[72]=e[l],a}function Q(t,e,l){const a=t.slice();return a[72]=e[l],a[76]=l,a}function W(t){let e,l,a={id:t[1]?t[1]:`autocompleteTag-${t[32]}`,class:"mc-autocomplete__tag",label:t[31](),size:"s",type:"removable",dark:!1,disabled:!1,href:"",name:"",value:"",selected:!1};return e=new B({props:a}),t[51](e),e.$on("tag-removed",t[33]),{c(){u(e.$$.fragment)},m(t,a){x(e,t,a),l=!0},p(t,l){const a={};2&l[0]&&(a.id=t[1]?t[1]:`autocompleteTag-${t[32]}`),1&l[1]&&(a.label=t[31]()),e.$set(a)},i(t){l||(v(e.$$.fragment,t),l=!0)},o(t){y(e.$$.fragment,t),l=!1},d(l){t[51](null),j(e,l)}}}function F(t){let e,l;return e=new D({props:{size:"s",theme:"primary",text:"",class:"mc-autocomplete__loader"}}),{c(){u(e.$$.fragment)},m(t,a){x(e,t,a),l=!0},i(t){l||(v(e.$$.fragment,t),l=!0)},o(t){y(e.$$.fragment,t),l=!1},d(t){j(e,t)}}}function G(t){let e,l,i;return{c(){e=c("button"),e.innerHTML='<navigation-control-tag--cross-24px></navigation-control-tag--cross-24px> \n <span class="mc-autocomplete__clear-text">Clear</span>',p(e,"class","mc-autocomplete__clear"),p(e,"type","button")},m(s,n){a(s,e,n),l||(i=w(e,"click",J(t[56])),l=!0)},p:m,d(t){t&&q(e),l=!1,i()}}}function V(t){let e,l,i=t[27],s=[];for(let e=0;e<i.length;e+=1)s[e]=et(Q(t,i,e));let n=t[19].length>t[15]&<(t);return{c(){e=c("div");for(let t=0;t<s.length;t+=1)s[t].c();l=d(),n&&n.c(),p(e,"class","tags-selected")},m(t,i){a(t,e,i);for(let t=0;t<s.length;t+=1)s[t]&&s[t].m(e,null);f(e,l),n&&n.m(e,null)},p(t,a){if(134250504&a[0]|1024&a[1]){let n;for(i=t[27],n=0;n<i.length;n+=1){const o=Q(t,i,n);s[n]?s[n].p(o,a):(s[n]=et(o),s[n].c(),s[n].m(e,l))}for(;n<s.length;n+=1)s[n].d(1);s.length=i.length}t[19].length>t[15]?n?n.p(t,a):(n=lt(t),n.c(),n.m(e,null)):n&&(n.d(1),n=null)},d(t){t&&q(e),E(s,t),n&&n.d()}}}function X(t){let e;function l(t,e){return t[3]?tt:Z}let i=l(t),s=i(t);return{c(){e=c("div"),s.c(),p(e,"class","tag-selected")},m(t,l){a(t,e,l),s.m(e,null)},p(t,a){i===(i=l(t))&&s?s.p(t,a):(s.d(1),s=i(t),s&&(s.c(),s.m(e,null)))},d(t){t&&q(e),s.d()}}}function Z(t){let e,l,i,s,n;function o(){return t[58](t[72])}return{c(){e=c("m-tag"),H(e,"id",l=t[72].id),H(e,"label",i=t[72].label),H(e,"size","s"),H(e,"type","removable")},m(t,l){a(t,e,l),s||(n=w(e,"tag-removed",o),s=!0)},p(a,s){t=a,134217728&s[0]&&l!==(l=t[72].id)&&H(e,"id",l),134217728&s[0]&&i!==(i=t[72].label)&&H(e,"label",i)},d(t){t&&q(e),s=!1,n()}}}function tt(t){let e,l,i;return{c(){e=c("m-tag"),H(e,"type","link"),H(e,"id",l=t[72].id),H(e,"label",i=t[72].label),H(e,"size","s"),H(e,"dark",!0)},m(t,l){a(t,e,l)},p(t,a){134217728&a[0]&&l!==(l=t[72].id)&&H(e,"id",l),134217728&a[0]&&i!==(i=t[72].label)&&H(e,"label",i)},d(t){t&&q(e)}}}function et(t){let e,l=t[76]<t[15]&&X(t);return{c(){l&&l.c(),e=L()},m(t,i){l&&l.m(t,i),a(t,e,i)},p(t,a){t[76]<t[15]?l?l.p(t,a):(l=X(t),l.c(),l.m(e.parentNode,e)):l&&(l.d(1),l=null)},d(t){l&&l.d(t),t&&q(e)}}}function lt(t){let e,l,i,s,n;return{c(){e=c("div"),l=c("m-tag"),H(l,"id","id-tag"),H(l,"label",i="("+t[19].length+") "+t[14]+" "),H(l,"size","s"),H(l,"type","link"),p(e,"class","tag-selected")},m(i,o){a(i,e,o),f(e,l),s||(n=w(e,"click",t[59]),s=!0)},p(t,e){540672&e[0]&&i!==(i="("+t[19].length+") "+t[14]+" ")&&H(l,"label",i)},d(t){t&&q(e),s=!1,n()}}}function at(t){let e,l,i,s,n,o,r=t[27],d=[];for(let e=0;e<r.length;e+=1)d[e]=nt(P(t,r,e));return{c(){e=c("div"),l=c("m-layer"),i=c("small"),s=c("div");for(let t=0;t<d.length;t+=1)d[t].c();p(s,"class","tags-selected"),p(i,"slot","content"),H(l,"title",t[13]),H(l,"layertitletag","h3"),H(l,"isopen",t[28])},m(r,c){a(r,e,c),f(e,l),f(l,i),f(i,s);for(let t=0;t<d.length;t+=1)d[t]&&d[t].m(s,null);n||(o=w(l,"layer-closed",t[61]),n=!0)},p(t,e){if(134217736&e[0]|1024&e[1]){let l;for(r=t[27],l=0;l<r.length;l+=1){const a=P(t,r,l);d[l]?d[l].p(a,e):(d[l]=nt(a),d[l].c(),d[l].m(s,null))}for(;l<d.length;l+=1)d[l].d(1);d.length=r.length}8192&e[0]&&H(l,"title",t[13]),268435456&e[0]&&H(l,"isopen",t[28])},d(t){t&&q(e),E(d,t),n=!1,o()}}}function it(t){let e,l,i,s,n;function o(){return t[60](t[72])}return{c(){e=c("m-tag"),H(e,"id",l=t[72].id),H(e,"label",i=t[72].label),H(e,"size","s"),H(e,"type","removable")},m(t,l){a(t,e,l),s||(n=w(e,"tag-removed",o),s=!0)},p(a,s){t=a,134217728&s[0]&&l!==(l=t[72].id)&&H(e,"id",l),134217728&s[0]&&i!==(i=t[72].label)&&H(e,"label",i)},d(t){t&&q(e),s=!1,n()}}}function st(t){let e,l,i;return{c(){e=c("m-tag"),H(e,"type","text"),H(e,"id",l=t[72].id),H(e,"label",i=t[72].label),H(e,"size","s")},m(t,l){a(t,e,l)},p(t,a){134217728&a[0]&&l!==(l=t[72].id)&&H(e,"id",l),134217728&a[0]&&i!==(i=t[72].label)&&H(e,"label",i)},d(t){t&&q(e)}}}function nt(t){let e,l;function i(t,e){return t[3]?st:it}let s=i(t),n=s(t);return{c(){e=c("div"),n.c(),l=d(),p(e,"class","tag-selected")},m(t,i){a(t,e,i),n.m(e,null),f(e,l)},p(t,a){s===(s=i(t))&&n?n.p(t,a):(n.d(1),n=s(t),n&&(n.c(),n.m(e,l)))},d(t){t&&q(e),n.d()}}}function ot(t){let e,l,i,s,C,N,O,T,J,E,L,H,R,Y,A,B,D,P,Q,X,Z,tt=t[9]&&t[19].length>0&&!t[16]&&W(t);function et(e){t[52](e)}let lt={classinput:"mc-autocomplete__trigger",name:t[6],placeholder:t[2],inputtype:"text",isinvalid:t[5],disabled:t[3],size:t[4],required:t[8],iconname:"navigation-display-search-24px",rightalign:!1,isvalid:!1,min:"",max:""};void 0!==t[29]&&(lt.value=t[29]),s=new I({props:lt}),n.push((()=>o(s,"value",et))),s.$on("input",t[38]),s.$on("click",t[53]),s.$on("change",t[54]),s.$on("blur",t[55]);let it=t[7]&&F(),st=null!=t[29]&&""!=t[29]&&!t[3]&&G(t);function nt(e){t[57](e)}let ot={items:JSON.stringify(t[30]),open:t[21],multiple:t[9],isfiltered:t[26],emptysearchlabel:t[10],maxwidth:t[0],datatextexpr:t[11],datavalueexpr:t[12],selectall:t[17],labelselectall:t[18]};void 0!==t[19]&&(ot.value=t[19]),E=new K({props:ot}),n.push((()=>o(E,"value",nt))),E.$on("change",t[35]),E.$on("scrollend",t[39]),E.$on("select-all",t[40]);let rt=t[9]&&t[16]&&V(t),ct=t[9]&&t[16]&&at(t),dt=[{class:"mc-autocomplete"},{style:P="--autocomplete-tag-width: "+t[25]+"; --autocomplete-width: "+t[0]+";"},t[22]],ut={};for(let t=0;t<dt.length;t+=1)ut=r(ut,dt[t]);return{c(){e=c("div"),l=c("div"),tt&&tt.c(),i=d(),u(s.$$.fragment),N=d(),O=c("div"),it&&it.c(),T=d(),st&&st.c(),J=d(),u(E.$$.fragment),H=d(),rt&&rt.c(),R=d(),Y=c("span"),A=d(),B=c("span"),D=d(),ct&&ct.c(),this.c=m,p(O,"class","mc-autocomplete__tools"),p(l,"class","mc-autocomplete__main"),p(Y,"class","mc-autocomplete__loader"),h(Y,"display","none"),p(B,"class","mc-text-input mc-autocomplete__trigger"),h(B,"display","none"),g(e,ut),$(e,"mc-autocomplete--multi",t[9])},m(n,o){a(n,e,o),f(e,l),tt&&tt.m(l,null),f(l,i),x(s,l,null),f(l,N),f(l,O),it&&it.m(O,null),f(O,T),st&&st.m(O,null),f(e,J),x(E,e,null),f(e,H),rt&&rt.m(e,null),f(e,R),f(e,Y),f(e,A),f(e,B),f(e,D),ct&&ct.m(e,null),t[62](e),Q=!0,X||(Z=[b(U.call(null,e)),w(e,"outclick",t[34])],X=!0)},p(t,a){t[9]&&t[19].length>0&&!t[16]?tt?(tt.p(t,a),590336&a[0]&&v(tt,1)):(tt=W(t),tt.c(),v(tt,1),tt.m(l,i)):tt&&(M(),y(tt,1,1,(()=>{tt=null})),_());const n={};64&a[0]&&(n.name=t[6]),4&a[0]&&(n.placeholder=t[2]),32&a[0]&&(n.isinvalid=t[5]),8&a[0]&&(n.disabled=t[3]),16&a[0]&&(n.size=t[4]),256&a[0]&&(n.required=t[8]),!C&&536870912&a[0]&&(C=!0,n.value=t[29],k((()=>C=!1))),s.$set(n),t[7]?it?128&a[0]&&v(it,1):(it=F(),it.c(),v(it,1),it.m(O,T)):it&&(M(),y(it,1,1,(()=>{it=null})),_()),null==t[29]||""==t[29]||t[3]?st&&(st.d(1),st=null):st?st.p(t,a):(st=G(t),st.c(),st.m(O,null));const o={};1073741824&a[0]&&(o.items=JSON.stringify(t[30])),2097152&a[0]&&(o.open=t[21]),512&a[0]&&(o.multiple=t[9]),67108864&a[0]&&(o.isfiltered=t[26]),1024&a[0]&&(o.emptysearchlabel=t[10]),1&a[0]&&(o.maxwidth=t[0]),2048&a[0]&&(o.datatextexpr=t[11]),4096&a[0]&&(o.datavalueexpr=t[12]),131072&a[0]&&(o.selectall=t[17]),262144&a[0]&&(o.labelselectall=t[18]),!L&&524288&a[0]&&(L=!0,o.value=t[19],k((()=>L=!1))),E.$set(o),t[9]&&t[16]?rt?rt.p(t,a):(rt=V(t),rt.c(),rt.m(e,R)):rt&&(rt.d(1),rt=null),t[9]&&t[16]?ct?ct.p(t,a):(ct=at(t),ct.c(),ct.m(e,null)):ct&&(ct.d(1),ct=null),g(e,ut=z(dt,[{class:"mc-autocomplete"},(!Q||33554433&a[0]&&P!==(P="--autocomplete-tag-width: "+t[25]+"; --autocomplete-width: "+t[0]+";"))&&{style:P},4194304&a[0]&&t[22]])),$(e,"mc-autocomplete--multi",t[9])},i(t){Q||(v(tt),v(s.$$.fragment,t),v(it),v(E.$$.fragment,t),Q=!0)},o(t){y(tt),y(s.$$.fragment,t),y(it),y(E.$$.fragment,t),Q=!1},d(l){l&&q(e),tt&&tt.d(),j(s),it&&it.d(),st&&st.d(),j(E),rt&&rt.d(),ct&&ct.d(),t[62](null),X=!1,S(Z)}}}function rt(t,e,l){let a,i,s,o,c,d,u;const m=["maxwidth","tagid","taglabel","placeholder","filter","nofilter","disabled","size","isinvalid","inputvalue","id","loading","required","items","value","open","multiple","emptysearchlabel","datatextexpr","datavalueexpr","nosort","layertitle","showmoretagslabel","maxnumbertoshowtags","alltags","selectall","labelselectall"];let p,h=C(e,m),{maxwidth:g="100%"}=e,{tagid:$}=e,{taglabel:f=""}=e,{placeholder:x}=e,{filter:b=!0}=e,{nofilter:w=!1}=e,{disabled:v=!1}=e,{size:y="m"}=e,{isinvalid:_}=e,{inputvalue:k}=e,{id:z}=e,{loading:q=!1}=e,{required:j=!1}=e,{items:S}=e,{value:J}=e,{open:E=!1}=e,{multiple:L=!1}=e,{emptysearchlabel:H="No results found"}=e,{datatextexpr:M="label"}=e,{datavalueexpr:U="value"}=e,{nosort:B=!1}=e,{layertitle:D="Title layer"}=e,{showmoretagslabel:I="Show more"}=e,{maxnumbertoshowtags:K=12}=e,{alltags:P=!1}=e,{selectall:Q=!1}=e,{labelselectall:W="Select all"}=e;const F=Math.random();let G,V,X,Z=new A(N(),O()),tt="0px",et=!1,lt=[],at=null;function it(){v||(l(19,o=L?[]:""),st(),Z.dispatch("clear",!0))}function st(){l(21,d=!1),L&&!B?function(){X=i;const t=nt();X.sort(((e,l)=>{const a=t.includes(e),i=t.includes(l);return a===i?e[U]-l[U]:a<i?1:-1})),l(30,s=X)}():l(30,s=i)}function nt(t){const e=t||o;return i.filter((t=>L?e.includes(t[U]):e===t[U]))}function ot(){l(28,at=!0)}function rt(){l(28,at=null)}function ct(t){l(19,o=o.filter((e=>e!==t))),Z.dispatch("onchange",o)}return t.$$set=t=>{e=r(r({},e),T(t)),l(71,h=C(e,m)),"maxwidth"in t&&l(0,g=t.maxwidth),"tagid"in t&&l(1,$=t.tagid),"taglabel"in t&&l(42,f=t.taglabel),"placeholder"in t&&l(2,x=t.placeholder),"filter"in t&&l(43,b=t.filter),"nofilter"in t&&l(44,w=t.nofilter),"disabled"in t&&l(3,v=t.disabled),"size"in t&&l(4,y=t.size),"isinvalid"in t&&l(5,_=t.isinvalid),"inputvalue"in t&&l(45,k=t.inputvalue),"id"in t&&l(6,z=t.id),"loading"in t&&l(7,q=t.loading),"required"in t&&l(8,j=t.required),"items"in t&&l(46,S=t.items),"value"in t&&l(47,J=t.value),"open"in t&&l(48,E=t.open),"multiple"in t&&l(9,L=t.multiple),"emptysearchlabel"in t&&l(10,H=t.emptysearchlabel),"datatextexpr"in t&&l(11,M=t.datatextexpr),"datavalueexpr"in t&&l(12,U=t.datavalueexpr),"nosort"in t&&l(49,B=t.nosort),"layertitle"in t&&l(13,D=t.layertitle),"showmoretagslabel"in t&&l(14,I=t.showmoretagslabel),"maxnumbertoshowtags"in t&&l(15,K=t.maxnumbertoshowtags),"alltags"in t&&l(16,P=t.alltags),"selectall"in t&&l(17,Q=t.selectall),"labelselectall"in t&&l(18,W=t.labelselectall)},t.$$.update=()=>{if(16384&t.$$.dirty[1]&&l(29,a=k),32768&t.$$.dirty[1]&&l(20,i=S?JSON.parse(S):[]),1048576&t.$$.dirty[0]&&l(30,s=i),512&t.$$.dirty[0]|65536&t.$$.dirty[1]&&l(19,o=!J&&L?[]:J?JSON.parse(J):J),524288&t.$$.dirty[0]|2048&t.$$.dirty[1]&&l(31,c=()=>o.length.toString()+" "+f),524288&t.$$.dirty[0]&&async function(t){try{if(await R(),l(27,lt=nt(t)),L)l(50,V=t);else{const t=lt.map((t=>t[M]));l(29,a=t.join(", "))}}catch(t){console.error(t)}}(o),524288&t.$$.dirty[1]&&async function(t){var e;try{await R(),l(25,tt=G&&t&&t.length?`${null===(e=null==p?void 0:p.querySelector(".mc-tag-removable"))||void 0===e?void 0:e.clientWidth}px`:"0px")}catch(t){console.error(t)}}(V),131072&t.$$.dirty[1]&&l(21,d=E),2097152&t.$$.dirty[0]){const t=d?"open":"close";Z.dispatch(t,d)}l(22,u=Object.assign({},h)),4194304&t.$$.dirty[0]&&delete u.class},[g,$,x,v,y,_,z,q,j,L,H,M,U,D,I,K,P,Q,W,o,i,d,u,p,G,tt,et,lt,at,a,s,c,F,it,st,function(){Z.dispatch("onchange",o),L||st()},ot,rt,function(t){const e=t.target.value;!function(t){Z.dispatch("oninput",t)}(e),function(t){!w&&b&&(t.length?l(30,s=i.filter((e=>e[M].toUpperCase().includes(t.toUpperCase())))):l(30,s=i),l(26,et=!s.length),Z.dispatch("onfilter",s))}(e)},function(){Z.dispatch("scrollend",!0)},function(t){Z.dispatch("select-all",t.detail)},ct,f,b,w,k,S,J,E,B,V,function(t){n[t?"unshift":"push"]((()=>{G=t,l(24,G)}))},function(t){a=t,l(29,a),l(45,k)},()=>l(21,d=!0),function(e){Y.call(this,t,e)},function(e){Y.call(this,t,e)},()=>{l(29,a=""),l(30,s=i),l(26,et=!1),L||it()},function(t){o=t,l(19,o),l(47,J),l(9,L)},t=>ct(t.id),()=>ot(),t=>ct(t.id),()=>rt(),function(t){n[t?"unshift":"push"]((()=>{p=t,l(23,p)}))}]}class ct extends t{constructor(t){super();const n=document.createElement("style");n.textContent=".mc-autocomplete{-ms-flex-item-align:start;align-self:start;position:relative;min-width:18rem;max-width:var(--autocomplete-width, auto);width:100%}.mc-autocomplete__main{position:relative}.mc-autocomplete__tag,.mc-autocomplete__tools{position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);z-index:2}.mc-autocomplete__tag{left:2.75rem}.mc-autocomplete__trigger{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap}.mc-autocomplete__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:0.75rem}.mc-autocomplete__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-autocomplete__clear:focus{-webkit-box-shadow:0 0 0 2px #0b96cc;box-shadow:0 0 0 2px #0b96cc}.mc-autocomplete__clear,.mc-autocomplete__clear-icon{height:1.5rem;width:1.5rem}.mc-autocomplete__clear-icon{fill:#666666}.mc-autocomplete__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-autocomplete__error{font-size:0.875rem;line-height:1.2857142857;color:#c61112;display:inline-block;margin-top:0.25rem}.mc-autocomplete--multi .mc-autocomplete__trigger{padding-left:calc(2.9375rem + var(--autocomplete-tag-width, 0px))}.mc-autocomplete__tag{position:absolute !important}.mc-autocomplete--multi .mc-autocomplete__trigger{padding-left:calc(2.9375rem + var(--autocomplete-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(n),e(this,{target:this.shadowRoot,props:l(this.attributes),customElement:!0},rt,ot,s,{maxwidth:0,tagid:1,taglabel:42,placeholder:2,filter:43,nofilter:44,disabled:3,size:4,isinvalid:5,inputvalue:45,id:6,loading:7,required:8,items:46,value:47,open:48,multiple:9,emptysearchlabel:10,datatextexpr:11,datavalueexpr:12,nosort:49,layertitle:13,showmoretagslabel:14,maxnumbertoshowtags:15,alltags:16,selectall:17,labelselectall:18},null,[-1,-1,-1]),t&&(t.target&&a(t.target,this,t.anchor),t.props&&(this.$set(t.props),i()))}static get observedAttributes(){return["maxwidth","tagid","taglabel","placeholder","filter","nofilter","disabled","size","isinvalid","inputvalue","id","loading","required","items","value","open","multiple","emptysearchlabel","datatextexpr","datavalueexpr","nosort","layertitle","showmoretagslabel","maxnumbertoshowtags","alltags","selectall","labelselectall"]}get maxwidth(){return this.$$.ctx[0]}set maxwidth(t){this.$$set({maxwidth:t}),i()}get tagid(){return this.$$.ctx[1]}set tagid(t){this.$$set({tagid:t}),i()}get taglabel(){return this.$$.ctx[42]}set taglabel(t){this.$$set({taglabel:t}),i()}get placeholder(){return this.$$.ctx[2]}set placeholder(t){this.$$set({placeholder:t}),i()}get filter(){return this.$$.ctx[43]}set filter(t){this.$$set({filter:t}),i()}get nofilter(){return this.$$.ctx[44]}set nofilter(t){this.$$set({nofilter:t}),i()}get disabled(){return this.$$.ctx[3]}set disabled(t){this.$$set({disabled:t}),i()}get size(){return this.$$.ctx[4]}set size(t){this.$$set({size:t}),i()}get isinvalid(){return this.$$.ctx[5]}set isinvalid(t){this.$$set({isinvalid:t}),i()}get inputvalue(){return this.$$.ctx[45]}set inputvalue(t){this.$$set({inputvalue:t}),i()}get id(){return this.$$.ctx[6]}set id(t){this.$$set({id:t}),i()}get loading(){return this.$$.ctx[7]}set loading(t){this.$$set({loading:t}),i()}get required(){return this.$$.ctx[8]}set required(t){this.$$set({required:t}),i()}get items(){return this.$$.ctx[46]}set items(t){this.$$set({items:t}),i()}get value(){return this.$$.ctx[47]}set value(t){this.$$set({value:t}),i()}get open(){return this.$$.ctx[48]}set open(t){this.$$set({open:t}),i()}get multiple(){return this.$$.ctx[9]}set multiple(t){this.$$set({multiple:t}),i()}get emptysearchlabel(){return this.$$.ctx[10]}set emptysearchlabel(t){this.$$set({emptysearchlabel:t}),i()}get datatextexpr(){return this.$$.ctx[11]}set datatextexpr(t){this.$$set({datatextexpr:t}),i()}get datavalueexpr(){return this.$$.ctx[12]}set datavalueexpr(t){this.$$set({datavalueexpr:t}),i()}get nosort(){return this.$$.ctx[49]}set nosort(t){this.$$set({nosort:t}),i()}get layertitle(){return this.$$.ctx[13]}set layertitle(t){this.$$set({layertitle:t}),i()}get showmoretagslabel(){return this.$$.ctx[14]}set showmoretagslabel(t){this.$$set({showmoretagslabel:t}),i()}get maxnumbertoshowtags(){return this.$$.ctx[15]}set maxnumbertoshowtags(t){this.$$set({maxnumbertoshowtags:t}),i()}get alltags(){return this.$$.ctx[16]}set alltags(t){this.$$set({alltags:t}),i()}get selectall(){return this.$$.ctx[17]}set selectall(t){this.$$set({selectall:t}),i()}get labelselectall(){return this.$$.ctx[18]}set labelselectall(t){this.$$set({labelselectall:t}),i()}}export{ct as default};
|
|
1
|
+
import{S as t,i as e,a as l,b as a,f as i,s,H as n,I as o,c as r,e as c,d,B as u,n as m,g as p,J as h,h as g,v as $,j as f,C as x,K as b,l as w,y as v,w as y,x as _,L as k,m as z,o as q,D as j,M as S,p as C,q as N,r as O,u as T,N as J,O as E,P as L,A as H,z as M,Q as R,R as Y}from"../../index-9ffad6d0.js";import{E as A}from"../../EventHandler-f7ee47ca.js";import{c as U}from"../../ClickOutside-63071e7a.js";import B from"../tag/Tag.nested.js";import D from"../loader/Loader.nested.js";import I from"../textinput/Textinput.nested.js";import K from"../listbox/Listbox.nested.js";function P(t,e,l){const a=t.slice();return a[72]=e[l],a}function Q(t,e,l){const a=t.slice();return a[72]=e[l],a[76]=l,a}function W(t){let e,l,a={id:t[1]?t[1]:`autocompleteTag-${t[32]}`,class:"mc-autocomplete__tag",label:t[31](),size:"s",type:"removable",dark:!1,disabled:!1,href:"",name:"",value:"",selected:!1};return e=new B({props:a}),t[51](e),e.$on("tag-removed",t[33]),{c(){u(e.$$.fragment)},m(t,a){x(e,t,a),l=!0},p(t,l){const a={};2&l[0]&&(a.id=t[1]?t[1]:`autocompleteTag-${t[32]}`),1&l[1]&&(a.label=t[31]()),e.$set(a)},i(t){l||(v(e.$$.fragment,t),l=!0)},o(t){y(e.$$.fragment,t),l=!1},d(l){t[51](null),j(e,l)}}}function F(t){let e,l;return e=new D({props:{size:"s",theme:"primary",text:"",class:"mc-autocomplete__loader"}}),{c(){u(e.$$.fragment)},m(t,a){x(e,t,a),l=!0},i(t){l||(v(e.$$.fragment,t),l=!0)},o(t){y(e.$$.fragment,t),l=!1},d(t){j(e,t)}}}function G(t){let e,l,i;return{c(){e=c("button"),e.innerHTML='<navigation-control-tag--cross-24px></navigation-control-tag--cross-24px> \n <span class="mc-autocomplete__clear-text">Clear</span>',p(e,"class","mc-autocomplete__clear"),p(e,"type","button")},m(s,n){a(s,e,n),l||(i=w(e,"click",J(t[56])),l=!0)},p:m,d(t){t&&q(e),l=!1,i()}}}function V(t){let e,l,i=t[27],s=[];for(let e=0;e<i.length;e+=1)s[e]=et(Q(t,i,e));let n=t[19].length>t[15]&<(t);return{c(){e=c("div");for(let t=0;t<s.length;t+=1)s[t].c();l=d(),n&&n.c(),p(e,"class","tags-selected")},m(t,i){a(t,e,i);for(let t=0;t<s.length;t+=1)s[t]&&s[t].m(e,null);f(e,l),n&&n.m(e,null)},p(t,a){if(134250504&a[0]|1024&a[1]){let n;for(i=t[27],n=0;n<i.length;n+=1){const o=Q(t,i,n);s[n]?s[n].p(o,a):(s[n]=et(o),s[n].c(),s[n].m(e,l))}for(;n<s.length;n+=1)s[n].d(1);s.length=i.length}t[19].length>t[15]?n?n.p(t,a):(n=lt(t),n.c(),n.m(e,null)):n&&(n.d(1),n=null)},d(t){t&&q(e),E(s,t),n&&n.d()}}}function X(t){let e;function l(t,e){return t[3]?tt:Z}let i=l(t),s=i(t);return{c(){e=c("div"),s.c(),p(e,"class","tag-selected")},m(t,l){a(t,e,l),s.m(e,null)},p(t,a){i===(i=l(t))&&s?s.p(t,a):(s.d(1),s=i(t),s&&(s.c(),s.m(e,null)))},d(t){t&&q(e),s.d()}}}function Z(t){let e,l,i,s,n;function o(){return t[58](t[72])}return{c(){e=c("m-tag"),H(e,"id",l=t[72].id),H(e,"label",i=t[72].label),H(e,"size","s"),H(e,"type","removable")},m(t,l){a(t,e,l),s||(n=w(e,"tag-removed",o),s=!0)},p(a,s){t=a,134217728&s[0]&&l!==(l=t[72].id)&&H(e,"id",l),134217728&s[0]&&i!==(i=t[72].label)&&H(e,"label",i)},d(t){t&&q(e),s=!1,n()}}}function tt(t){let e,l,i;return{c(){e=c("m-tag"),H(e,"type","link"),H(e,"id",l=t[72].id),H(e,"label",i=t[72].label),H(e,"size","s"),H(e,"dark",!0)},m(t,l){a(t,e,l)},p(t,a){134217728&a[0]&&l!==(l=t[72].id)&&H(e,"id",l),134217728&a[0]&&i!==(i=t[72].label)&&H(e,"label",i)},d(t){t&&q(e)}}}function et(t){let e,l=t[76]<t[15]&&X(t);return{c(){l&&l.c(),e=L()},m(t,i){l&&l.m(t,i),a(t,e,i)},p(t,a){t[76]<t[15]?l?l.p(t,a):(l=X(t),l.c(),l.m(e.parentNode,e)):l&&(l.d(1),l=null)},d(t){l&&l.d(t),t&&q(e)}}}function lt(t){let e,l,i,s,n;return{c(){e=c("div"),l=c("m-tag"),H(l,"id","id-tag"),H(l,"label",i="("+t[19].length+") "+t[14]+" "),H(l,"size","s"),H(l,"type","link"),p(e,"class","tag-selected")},m(i,o){a(i,e,o),f(e,l),s||(n=w(e,"click",t[59]),s=!0)},p(t,e){540672&e[0]&&i!==(i="("+t[19].length+") "+t[14]+" ")&&H(l,"label",i)},d(t){t&&q(e),s=!1,n()}}}function at(t){let e,l,i,s,n,o,r=t[27],d=[];for(let e=0;e<r.length;e+=1)d[e]=nt(P(t,r,e));return{c(){e=c("div"),l=c("m-layer"),i=c("small"),s=c("div");for(let t=0;t<d.length;t+=1)d[t].c();p(s,"class","tags-selected"),p(i,"slot","content"),H(l,"title",t[13]),H(l,"layertitletag","h3"),H(l,"isopen",t[28])},m(r,c){a(r,e,c),f(e,l),f(l,i),f(i,s);for(let t=0;t<d.length;t+=1)d[t]&&d[t].m(s,null);n||(o=w(l,"layer-closed",t[61]),n=!0)},p(t,e){if(134217736&e[0]|1024&e[1]){let l;for(r=t[27],l=0;l<r.length;l+=1){const a=P(t,r,l);d[l]?d[l].p(a,e):(d[l]=nt(a),d[l].c(),d[l].m(s,null))}for(;l<d.length;l+=1)d[l].d(1);d.length=r.length}8192&e[0]&&H(l,"title",t[13]),268435456&e[0]&&H(l,"isopen",t[28])},d(t){t&&q(e),E(d,t),n=!1,o()}}}function it(t){let e,l,i,s,n;function o(){return t[60](t[72])}return{c(){e=c("m-tag"),H(e,"id",l=t[72].id),H(e,"label",i=t[72].label),H(e,"size","s"),H(e,"type","removable")},m(t,l){a(t,e,l),s||(n=w(e,"tag-removed",o),s=!0)},p(a,s){t=a,134217728&s[0]&&l!==(l=t[72].id)&&H(e,"id",l),134217728&s[0]&&i!==(i=t[72].label)&&H(e,"label",i)},d(t){t&&q(e),s=!1,n()}}}function st(t){let e,l,i;return{c(){e=c("m-tag"),H(e,"type","text"),H(e,"id",l=t[72].id),H(e,"label",i=t[72].label),H(e,"size","s")},m(t,l){a(t,e,l)},p(t,a){134217728&a[0]&&l!==(l=t[72].id)&&H(e,"id",l),134217728&a[0]&&i!==(i=t[72].label)&&H(e,"label",i)},d(t){t&&q(e)}}}function nt(t){let e,l;function i(t,e){return t[3]?st:it}let s=i(t),n=s(t);return{c(){e=c("div"),n.c(),l=d(),p(e,"class","tag-selected")},m(t,i){a(t,e,i),n.m(e,null),f(e,l)},p(t,a){s===(s=i(t))&&n?n.p(t,a):(n.d(1),n=s(t),n&&(n.c(),n.m(e,l)))},d(t){t&&q(e),n.d()}}}function ot(t){let e,l,i,s,C,N,O,T,J,E,L,H,R,Y,A,B,D,P,Q,X,Z,tt=t[9]&&t[19].length>0&&!t[16]&&W(t);function et(e){t[52](e)}let lt={classinput:"mc-autocomplete__trigger",name:t[6],placeholder:t[2],inputtype:"text",isinvalid:t[5],disabled:t[3],size:t[4],required:t[8],iconname:"navigation-display-search-24px",rightalign:!1,isvalid:!1,min:"",max:""};void 0!==t[29]&&(lt.value=t[29]),s=new I({props:lt}),n.push((()=>o(s,"value",et))),s.$on("input",t[38]),s.$on("click",t[53]),s.$on("change",t[54]),s.$on("blur",t[55]);let it=t[7]&&F(),st=null!=t[29]&&""!=t[29]&&!t[3]&&G(t);function nt(e){t[57](e)}let ot={items:JSON.stringify(t[30]),open:t[21],multiple:t[9],isfiltered:t[26],emptysearchlabel:t[10],maxwidth:t[0],datatextexpr:t[11],datavalueexpr:t[12],selectall:t[17],labelselectall:t[18]};void 0!==t[19]&&(ot.value=t[19]),E=new K({props:ot}),n.push((()=>o(E,"value",nt))),E.$on("change",t[35]),E.$on("scrollend",t[39]),E.$on("select-all",t[40]);let rt=t[9]&&t[16]&&V(t),ct=t[9]&&t[16]&&at(t),dt=[{class:"mc-autocomplete"},{style:P="--autocomplete-tag-width: "+t[25]+"; --autocomplete-width: "+t[0]+";"},t[22]],ut={};for(let t=0;t<dt.length;t+=1)ut=r(ut,dt[t]);return{c(){e=c("div"),l=c("div"),tt&&tt.c(),i=d(),u(s.$$.fragment),N=d(),O=c("div"),it&&it.c(),T=d(),st&&st.c(),J=d(),u(E.$$.fragment),H=d(),rt&&rt.c(),R=d(),Y=c("span"),A=d(),B=c("span"),D=d(),ct&&ct.c(),this.c=m,p(O,"class","mc-autocomplete__tools"),p(l,"class","mc-autocomplete__main"),p(Y,"class","mc-autocomplete__loader"),h(Y,"display","none"),p(B,"class","mc-text-input mc-autocomplete__trigger"),h(B,"display","none"),g(e,ut),$(e,"mc-autocomplete--multi",t[9])},m(n,o){a(n,e,o),f(e,l),tt&&tt.m(l,null),f(l,i),x(s,l,null),f(l,N),f(l,O),it&&it.m(O,null),f(O,T),st&&st.m(O,null),f(e,J),x(E,e,null),f(e,H),rt&&rt.m(e,null),f(e,R),f(e,Y),f(e,A),f(e,B),f(e,D),ct&&ct.m(e,null),t[62](e),Q=!0,X||(Z=[b(U.call(null,e)),w(e,"outclick",t[34])],X=!0)},p(t,a){t[9]&&t[19].length>0&&!t[16]?tt?(tt.p(t,a),590336&a[0]&&v(tt,1)):(tt=W(t),tt.c(),v(tt,1),tt.m(l,i)):tt&&(M(),y(tt,1,1,(()=>{tt=null})),_());const n={};64&a[0]&&(n.name=t[6]),4&a[0]&&(n.placeholder=t[2]),32&a[0]&&(n.isinvalid=t[5]),8&a[0]&&(n.disabled=t[3]),16&a[0]&&(n.size=t[4]),256&a[0]&&(n.required=t[8]),!C&&536870912&a[0]&&(C=!0,n.value=t[29],k((()=>C=!1))),s.$set(n),t[7]?it?128&a[0]&&v(it,1):(it=F(),it.c(),v(it,1),it.m(O,T)):it&&(M(),y(it,1,1,(()=>{it=null})),_()),null==t[29]||""==t[29]||t[3]?st&&(st.d(1),st=null):st?st.p(t,a):(st=G(t),st.c(),st.m(O,null));const o={};1073741824&a[0]&&(o.items=JSON.stringify(t[30])),2097152&a[0]&&(o.open=t[21]),512&a[0]&&(o.multiple=t[9]),67108864&a[0]&&(o.isfiltered=t[26]),1024&a[0]&&(o.emptysearchlabel=t[10]),1&a[0]&&(o.maxwidth=t[0]),2048&a[0]&&(o.datatextexpr=t[11]),4096&a[0]&&(o.datavalueexpr=t[12]),131072&a[0]&&(o.selectall=t[17]),262144&a[0]&&(o.labelselectall=t[18]),!L&&524288&a[0]&&(L=!0,o.value=t[19],k((()=>L=!1))),E.$set(o),t[9]&&t[16]?rt?rt.p(t,a):(rt=V(t),rt.c(),rt.m(e,R)):rt&&(rt.d(1),rt=null),t[9]&&t[16]?ct?ct.p(t,a):(ct=at(t),ct.c(),ct.m(e,null)):ct&&(ct.d(1),ct=null),g(e,ut=z(dt,[{class:"mc-autocomplete"},(!Q||33554433&a[0]&&P!==(P="--autocomplete-tag-width: "+t[25]+"; --autocomplete-width: "+t[0]+";"))&&{style:P},4194304&a[0]&&t[22]])),$(e,"mc-autocomplete--multi",t[9])},i(t){Q||(v(tt),v(s.$$.fragment,t),v(it),v(E.$$.fragment,t),Q=!0)},o(t){y(tt),y(s.$$.fragment,t),y(it),y(E.$$.fragment,t),Q=!1},d(l){l&&q(e),tt&&tt.d(),j(s),it&&it.d(),st&&st.d(),j(E),rt&&rt.d(),ct&&ct.d(),t[62](null),X=!1,S(Z)}}}function rt(t,e,l){let a,i,s,o,c,d,u;const m=["maxwidth","tagid","taglabel","placeholder","filter","nofilter","disabled","size","isinvalid","inputvalue","id","loading","required","items","value","open","multiple","emptysearchlabel","datatextexpr","datavalueexpr","nosort","layertitle","showmoretagslabel","maxnumbertoshowtags","alltags","selectall","labelselectall"];let p,h=C(e,m),{maxwidth:g="100%"}=e,{tagid:$}=e,{taglabel:f=""}=e,{placeholder:x}=e,{filter:b=!0}=e,{nofilter:w=!1}=e,{disabled:v=!1}=e,{size:y="m"}=e,{isinvalid:_}=e,{inputvalue:k}=e,{id:z}=e,{loading:q=!1}=e,{required:j=!1}=e,{items:S}=e,{value:J}=e,{open:E=!1}=e,{multiple:L=!1}=e,{emptysearchlabel:H="No results found"}=e,{datatextexpr:M="label"}=e,{datavalueexpr:U="value"}=e,{nosort:B=!1}=e,{layertitle:D="Title layer"}=e,{showmoretagslabel:I="Show more"}=e,{maxnumbertoshowtags:K=12}=e,{alltags:P=!1}=e,{selectall:Q=!1}=e,{labelselectall:W="Select all"}=e;const F=Math.random();let G,V,X,Z=new A(N(),O()),tt="0px",et=!1,lt=[],at=null;function it(){v||(l(19,o=L?[]:""),st(),Z.dispatch("clear",!0))}function st(){l(21,d=!1),L&&!B?function(){X=i;const t=nt();X.sort(((e,l)=>{const a=t.includes(e),i=t.includes(l);return a===i?e[U]-l[U]:a<i?1:-1})),l(30,s=X)}():l(30,s=i)}function nt(t){const e=t||o;return i.filter((t=>L?e.includes(t[U]):e===t[U]))}function ot(){l(28,at=!0)}function rt(){l(28,at=null)}function ct(t){l(19,o=o.filter((e=>e!==t))),Z.dispatch("onchange",o)}return t.$$set=t=>{e=r(r({},e),T(t)),l(71,h=C(e,m)),"maxwidth"in t&&l(0,g=t.maxwidth),"tagid"in t&&l(1,$=t.tagid),"taglabel"in t&&l(42,f=t.taglabel),"placeholder"in t&&l(2,x=t.placeholder),"filter"in t&&l(43,b=t.filter),"nofilter"in t&&l(44,w=t.nofilter),"disabled"in t&&l(3,v=t.disabled),"size"in t&&l(4,y=t.size),"isinvalid"in t&&l(5,_=t.isinvalid),"inputvalue"in t&&l(45,k=t.inputvalue),"id"in t&&l(6,z=t.id),"loading"in t&&l(7,q=t.loading),"required"in t&&l(8,j=t.required),"items"in t&&l(46,S=t.items),"value"in t&&l(47,J=t.value),"open"in t&&l(48,E=t.open),"multiple"in t&&l(9,L=t.multiple),"emptysearchlabel"in t&&l(10,H=t.emptysearchlabel),"datatextexpr"in t&&l(11,M=t.datatextexpr),"datavalueexpr"in t&&l(12,U=t.datavalueexpr),"nosort"in t&&l(49,B=t.nosort),"layertitle"in t&&l(13,D=t.layertitle),"showmoretagslabel"in t&&l(14,I=t.showmoretagslabel),"maxnumbertoshowtags"in t&&l(15,K=t.maxnumbertoshowtags),"alltags"in t&&l(16,P=t.alltags),"selectall"in t&&l(17,Q=t.selectall),"labelselectall"in t&&l(18,W=t.labelselectall)},t.$$.update=()=>{if(16384&t.$$.dirty[1]&&l(29,a=k),32768&t.$$.dirty[1]&&l(20,i=S?JSON.parse(S):[]),1048576&t.$$.dirty[0]&&l(30,s=i),512&t.$$.dirty[0]|65536&t.$$.dirty[1]&&l(19,o=!J&&L?[]:J?JSON.parse(J):J),524288&t.$$.dirty[0]|2048&t.$$.dirty[1]&&l(31,c=()=>o.length.toString()+" "+f),524288&t.$$.dirty[0]&&async function(t){try{if(await R(),l(27,lt=nt(t)),L)l(50,V=t);else{const t=lt.map((t=>t[M]));l(29,a=t.join(", "))}}catch(t){console.error(t)}}(o),524288&t.$$.dirty[1]&&async function(t){var e;try{await R(),l(25,tt=G&&t&&t.length?`${null===(e=null==p?void 0:p.querySelector(".mc-tag-removable"))||void 0===e?void 0:e.clientWidth}px`:"0px")}catch(t){console.error(t)}}(V),131072&t.$$.dirty[1]&&l(21,d=E),2097152&t.$$.dirty[0]){const t=d?"open":"close";Z.dispatch(t,d)}l(22,u=Object.assign({},h)),4194304&t.$$.dirty[0]&&delete u.class},[g,$,x,v,y,_,z,q,j,L,H,M,U,D,I,K,P,Q,W,o,i,d,u,p,G,tt,et,lt,at,a,s,c,F,it,st,function(){Z.dispatch("onchange",o),L||st()},ot,rt,function(t){const e=t.target.value;!function(t){Z.dispatch("oninput",t)}(e),function(t){!w&&b&&(t.length?l(30,s=i.filter((e=>e[M].toUpperCase().includes(t.toUpperCase())))):l(30,s=i),l(26,et=!s.length),Z.dispatch("onfilter",s))}(e)},function(){Z.dispatch("scrollend",!0)},function(t){Z.dispatch("select-all",t.detail)},ct,f,b,w,k,S,J,E,B,V,function(t){n[t?"unshift":"push"]((()=>{G=t,l(24,G)}))},function(t){a=t,l(29,a),l(45,k)},()=>l(21,d=!0),function(e){Y.call(this,t,e)},function(e){Y.call(this,t,e)},()=>{l(29,a=""),l(30,s=i),l(26,et=!1),L||it()},function(t){o=t,l(19,o),l(47,J),l(9,L)},t=>ct(t.id),()=>ot(),t=>ct(t.id),()=>rt(),function(t){n[t?"unshift":"push"]((()=>{p=t,l(23,p)}))}]}class ct extends t{constructor(t){super();const n=document.createElement("style");n.textContent=".mc-autocomplete{-ms-flex-item-align:start;align-self:start;position:relative;min-width:18rem;max-width:var(--autocomplete-width, auto);width:100%}.mc-autocomplete__main{position:relative}.mc-autocomplete__tag,.mc-autocomplete__tools{position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);z-index:2}.mc-autocomplete__tag{left:2.75rem}.mc-autocomplete__trigger{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap}.mc-autocomplete__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:0.75rem}.mc-autocomplete__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-autocomplete__clear:focus{-webkit-box-shadow:0 0 0 2px #0b96cc;box-shadow:0 0 0 2px #0b96cc}.mc-autocomplete__clear,.mc-autocomplete__clear-icon{height:1.5rem;width:1.5rem}.mc-autocomplete__clear-icon{fill:#666666}.mc-autocomplete__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-autocomplete__error{font-size:0.875rem;line-height:1.2857142857;color:#c61112;display:inline-block;margin-top:0.25rem}.mc-autocomplete--multi .mc-autocomplete__trigger{padding-left:calc(2.9375rem + var(--autocomplete-tag-width, 0px))}.mc-autocomplete{min-width:auto}.mc-autocomplete__tag{position:absolute !important}.mc-autocomplete--multi .mc-autocomplete__trigger{padding-left:calc(2.9375rem + var(--autocomplete-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(n),e(this,{target:this.shadowRoot,props:l(this.attributes),customElement:!0},rt,ot,s,{maxwidth:0,tagid:1,taglabel:42,placeholder:2,filter:43,nofilter:44,disabled:3,size:4,isinvalid:5,inputvalue:45,id:6,loading:7,required:8,items:46,value:47,open:48,multiple:9,emptysearchlabel:10,datatextexpr:11,datavalueexpr:12,nosort:49,layertitle:13,showmoretagslabel:14,maxnumbertoshowtags:15,alltags:16,selectall:17,labelselectall:18},null,[-1,-1,-1]),t&&(t.target&&a(t.target,this,t.anchor),t.props&&(this.$set(t.props),i()))}static get observedAttributes(){return["maxwidth","tagid","taglabel","placeholder","filter","nofilter","disabled","size","isinvalid","inputvalue","id","loading","required","items","value","open","multiple","emptysearchlabel","datatextexpr","datavalueexpr","nosort","layertitle","showmoretagslabel","maxnumbertoshowtags","alltags","selectall","labelselectall"]}get maxwidth(){return this.$$.ctx[0]}set maxwidth(t){this.$$set({maxwidth:t}),i()}get tagid(){return this.$$.ctx[1]}set tagid(t){this.$$set({tagid:t}),i()}get taglabel(){return this.$$.ctx[42]}set taglabel(t){this.$$set({taglabel:t}),i()}get placeholder(){return this.$$.ctx[2]}set placeholder(t){this.$$set({placeholder:t}),i()}get filter(){return this.$$.ctx[43]}set filter(t){this.$$set({filter:t}),i()}get nofilter(){return this.$$.ctx[44]}set nofilter(t){this.$$set({nofilter:t}),i()}get disabled(){return this.$$.ctx[3]}set disabled(t){this.$$set({disabled:t}),i()}get size(){return this.$$.ctx[4]}set size(t){this.$$set({size:t}),i()}get isinvalid(){return this.$$.ctx[5]}set isinvalid(t){this.$$set({isinvalid:t}),i()}get inputvalue(){return this.$$.ctx[45]}set inputvalue(t){this.$$set({inputvalue:t}),i()}get id(){return this.$$.ctx[6]}set id(t){this.$$set({id:t}),i()}get loading(){return this.$$.ctx[7]}set loading(t){this.$$set({loading:t}),i()}get required(){return this.$$.ctx[8]}set required(t){this.$$set({required:t}),i()}get items(){return this.$$.ctx[46]}set items(t){this.$$set({items:t}),i()}get value(){return this.$$.ctx[47]}set value(t){this.$$set({value:t}),i()}get open(){return this.$$.ctx[48]}set open(t){this.$$set({open:t}),i()}get multiple(){return this.$$.ctx[9]}set multiple(t){this.$$set({multiple:t}),i()}get emptysearchlabel(){return this.$$.ctx[10]}set emptysearchlabel(t){this.$$set({emptysearchlabel:t}),i()}get datatextexpr(){return this.$$.ctx[11]}set datatextexpr(t){this.$$set({datatextexpr:t}),i()}get datavalueexpr(){return this.$$.ctx[12]}set datavalueexpr(t){this.$$set({datavalueexpr:t}),i()}get nosort(){return this.$$.ctx[49]}set nosort(t){this.$$set({nosort:t}),i()}get layertitle(){return this.$$.ctx[13]}set layertitle(t){this.$$set({layertitle:t}),i()}get showmoretagslabel(){return this.$$.ctx[14]}set showmoretagslabel(t){this.$$set({showmoretagslabel:t}),i()}get maxnumbertoshowtags(){return this.$$.ctx[15]}set maxnumbertoshowtags(t){this.$$set({maxnumbertoshowtags:t}),i()}get alltags(){return this.$$.ctx[16]}set alltags(t){this.$$set({alltags:t}),i()}get selectall(){return this.$$.ctx[17]}set selectall(t){this.$$set({selectall:t}),i()}get labelselectall(){return this.$$.ctx[18]}set labelselectall(t){this.$$set({labelselectall:t}),i()}}export{ct as default};
|
|
2
2
|
//# sourceMappingURL=Autocomplete.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Autocomplete.js","sources":["../../../src/components/autocomplete/Autocomplete.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n import { tick } from 'svelte';\n import {\n get_current_component,\n createEventDispatcher,\n } 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 { TextInputSize } from '../textinput/textinput.types';\n\n import Tag from '../tag/Tag.nested.svelte';\n import Loader from '../loader/Loader.nested.svelte';\n import TextInput from '../textinput/Textinput.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: string;\n export let filter = true;\n export let nofilter = false;\n export let disabled = false;\n export let size: TextInputSize = 'm';\n export let isinvalid: boolean;\n export let inputvalue: string;\n export let id: string;\n export let loading = false;\n export let required = 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 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 let component: HTMLDivElement;\n const uuid = Math.random();\n let eventHandler = new EventHandler(\n get_current_component(),\n createEventDispatcher(),\n );\n let tag: any;\n let tagWidth = '0px';\n let tagValue: any;\n let sortedListItems: any;\n let isfiltered = false;\n let selectedItems: ListboxItems[] = [];\n let openLayer: any = null;\n\n $: localInputValue = inputvalue;\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\n function clearListbox() {\n if (!disabled) {\n listboxValue = multiple ? [] : '';\n closeListBox();\n eventHandler.dispatch('clear', true);\n }\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?: string) {\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 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 openLayerFn() {\n openLayer = true;\n }\n\n function closeLayerFn() {\n openLayer = null;\n }\n\n function handleInputValue(value: any) {\n eventHandler.dispatch('oninput', value);\n }\n\n function filterListbox(value: any) {\n if (nofilter || !filter) {\n return;\n }\n\n if (value.length) {\n localItems = parsedItems.filter((item: any) =>\n item[datatextexpr].toUpperCase().includes(value.toUpperCase()),\n );\n } else {\n localItems = parsedItems;\n }\n\n isfiltered = !localItems.length;\n\n eventHandler.dispatch('onfilter', localItems);\n }\n\n function onInput(e: Event) {\n const value = (e.target as HTMLInputElement).value;\n handleInputValue(value);\n filterListbox(value);\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 function removeTagSelected(itemSelectedId: any) {\n listboxValue = listboxValue.filter(\n (value: any) => value !== itemSelectedId,\n );\n eventHandler.dispatch('onchange', listboxValue);\n }\n\n // Watch Functions\n async function watchListboxValue(value: any) {\n try {\n await tick();\n selectedItems = getSelectedItems(value);\n if (!multiple) {\n const seletedLabels = selectedItems.map((item) => item[datatextexpr]);\n localInputValue = seletedLabels.join(', ');\n } else {\n tagValue = value;\n }\n } catch (e) {\n console.error(e);\n }\n }\n\n async function setTagWidth(tagValue: any) {\n try {\n await tick();\n\n tagWidth =\n tag && tagValue && tagValue.length\n ? `${component?.querySelector('.mc-tag-removable')?.clientWidth}px`\n : '0px';\n } catch (e) {\n console.error(e);\n }\n }\n</script>\n\n<div\n class=\"mc-autocomplete\"\n class:mc-autocomplete--multi={multiple}\n style=\"--autocomplete-tag-width: {tagWidth}; --autocomplete-width: {maxwidth};\"\n use:clickOutside\n on:outclick={closeListBox}\n {...attributes}\n bind:this={component}\n>\n <div class=\"mc-autocomplete__main\">\n <!-- TAG REMOVABLE -->\n {#if multiple && listboxValue.length > 0 && !alltags}\n <Tag\n id={tagid ? tagid : `autocompleteTag-${uuid}`}\n class=\"mc-autocomplete__tag\"\n label={setTagLabel()}\n size=\"s\"\n type=\"removable\"\n dark={false}\n disabled={false}\n href=\"\"\n name=\"\"\n value=\"\"\n selected={false}\n bind:this={tag}\n on:tag-removed={clearListbox}\n />\n {/if}\n\n <!-- TEXT INPUT -->\n <TextInput\n classinput=\"mc-autocomplete__trigger\"\n name={id}\n bind:value={localInputValue}\n {placeholder}\n inputtype=\"text\"\n {isinvalid}\n {disabled}\n {size}\n {required}\n iconname=\"navigation-display-search-24px\"\n rightalign={false}\n isvalid={false}\n min=\"\"\n max=\"\"\n on:input={onInput}\n on:click={() => (openState = true)}\n on:change\n on:blur\n />\n\n <div class=\"mc-autocomplete__tools\">\n <!-- LOADER -->\n {#if loading}\n <Loader\n size=\"s\"\n theme=\"primary\"\n text=\"\"\n class=\"mc-autocomplete__loader\"\n />\n {/if}\n\n <!-- CLEAR BUTTON -->\n {#if localInputValue != null && localInputValue != '' && !disabled}\n <button\n class=\"mc-autocomplete__clear\"\n type=\"button\"\n on:click|stopPropagation={() => {\n localInputValue = '';\n localItems = parsedItems;\n isfiltered = false;\n if (!multiple) {\n clearListbox();\n }\n }}\n >\n <navigation-control-tag--cross-24px />\n <span class=\"mc-autocomplete__clear-text\">Clear</span>\n </button>\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 {#if disabled}\n <m-tag\n type=\"link\"\n id={selectedItem.id}\n label={selectedItem.label}\n size=\"s\"\n dark={true}\n />\n {:else}\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 {/if}\n </div>\n {/if}\n {/each}\n {#if listboxValue.length > maxnumbertoshowtags}\n <!-- svelte-ignore a11y-click-events-have-key-events -->\n <div class=\"tag-selected\" on:click={() => openLayerFn()}>\n <m-tag\n id=\"id-tag\"\n label=\"({listboxValue.length}) {showmoretagslabel} \"\n size=\"s\"\n type=\"link\"\n />\n </div>\n {/if}\n </div>\n {/if}\n\n <!-- <span class=\"mc-autocomplete__tag\" style=\"display:none;\" /> -->\n <span class=\"mc-autocomplete__loader\" style=\"display:none;\" />\n <span class=\"mc-text-input mc-autocomplete__trigger\" style=\"display:none;\" />\n\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 {#if disabled}\n <m-tag\n type=\"text\"\n id={selectedItem.id}\n label={selectedItem.label}\n size=\"s\"\n />\n {:else}\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 {/if}\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.autocomplete';\n\n // Autocomplete\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-autocomplete {\n &__tag {\n position: absolute !important; // due to the Svelte CSS scope\n }\n\n &--multi {\n .mc-autocomplete__trigger {\n padding-left: calc(\n 2.9375rem + var(--autocomplete-tag-width)\n ) !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_3","div","create_if_block_5","set_custom_element_data","m_tag","m_tag_id_value","id","m_tag_label_value","label","dirty","if_block","create_if_block_4","append","div1","m_layer","small","div0","create_if_block_1","if_block0","create_if_block_8","create_if_block_7","if_block2","create_if_block_6","JSON","stringify","if_block3","create_if_block_2","if_block4","create_if_block","style","div2_style_value","div2","span0","span1","current","component","maxwidth","$$props","tagid","taglabel","placeholder","filter","nofilter","disabled","size","isinvalid","inputvalue","loading","required","items","value","open","multiple","emptysearchlabel","datatextexpr","datavalueexpr","nosort","layertitle","showmoretagslabel","maxnumbertoshowtags","alltags","selectall","labelselectall","uuid","Math","random","tag","tagValue","sortedListItems","eventHandler","EventHandler","get_current_component","createEventDispatcher","tagWidth","isfiltered","selectedItems","openLayer","clearListbox","listboxValue","closeListBox","dispatch","$$invalidate","openState","parsedItems","getSelectedItems","sort","a","b","hasItemA","includes","hasItemB","localItems","sortItems","val","item","openLayerFn","closeLayerFn","removeTagSelected","itemSelectedId","localInputValue","parse","setTagLabel","toString","async","tick","seletedLabels","map","join","e","console","error","watchListboxValue","_a","querySelector","clientWidth","setTagWidth","eventName","attributes","Object","assign","$$restProps","class","handleInputValue","toUpperCase","filterListbox","detail","$$value","value$1","selectedItem"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Autocomplete.js","sources":["../../../src/components/autocomplete/Autocomplete.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n import { tick } from 'svelte';\n import {\n get_current_component,\n createEventDispatcher,\n } 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 { TextInputSize } from '../textinput/textinput.types';\n\n import Tag from '../tag/Tag.nested.svelte';\n import Loader from '../loader/Loader.nested.svelte';\n import TextInput from '../textinput/Textinput.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: string;\n export let filter = true;\n export let nofilter = false;\n export let disabled = false;\n export let size: TextInputSize = 'm';\n export let isinvalid: boolean;\n export let inputvalue: string;\n export let id: string;\n export let loading = false;\n export let required = 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 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 let component: HTMLDivElement;\n const uuid = Math.random();\n let eventHandler = new EventHandler(\n get_current_component(),\n createEventDispatcher(),\n );\n let tag: any;\n let tagWidth = '0px';\n let tagValue: any;\n let sortedListItems: any;\n let isfiltered = false;\n let selectedItems: ListboxItems[] = [];\n let openLayer: any = null;\n\n $: localInputValue = inputvalue;\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\n function clearListbox() {\n if (!disabled) {\n listboxValue = multiple ? [] : '';\n closeListBox();\n eventHandler.dispatch('clear', true);\n }\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?: string) {\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 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 openLayerFn() {\n openLayer = true;\n }\n\n function closeLayerFn() {\n openLayer = null;\n }\n\n function handleInputValue(value: any) {\n eventHandler.dispatch('oninput', value);\n }\n\n function filterListbox(value: any) {\n if (nofilter || !filter) {\n return;\n }\n\n if (value.length) {\n localItems = parsedItems.filter((item: any) =>\n item[datatextexpr].toUpperCase().includes(value.toUpperCase()),\n );\n } else {\n localItems = parsedItems;\n }\n\n isfiltered = !localItems.length;\n\n eventHandler.dispatch('onfilter', localItems);\n }\n\n function onInput(e: Event) {\n const value = (e.target as HTMLInputElement).value;\n handleInputValue(value);\n filterListbox(value);\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 function removeTagSelected(itemSelectedId: any) {\n listboxValue = listboxValue.filter(\n (value: any) => value !== itemSelectedId,\n );\n eventHandler.dispatch('onchange', listboxValue);\n }\n\n // Watch Functions\n async function watchListboxValue(value: any) {\n try {\n await tick();\n selectedItems = getSelectedItems(value);\n if (!multiple) {\n const seletedLabels = selectedItems.map((item) => item[datatextexpr]);\n localInputValue = seletedLabels.join(', ');\n } else {\n tagValue = value;\n }\n } catch (e) {\n console.error(e);\n }\n }\n\n async function setTagWidth(tagValue: any) {\n try {\n await tick();\n\n tagWidth =\n tag && tagValue && tagValue.length\n ? `${component?.querySelector('.mc-tag-removable')?.clientWidth}px`\n : '0px';\n } catch (e) {\n console.error(e);\n }\n }\n</script>\n\n<div\n class=\"mc-autocomplete\"\n class:mc-autocomplete--multi={multiple}\n style=\"--autocomplete-tag-width: {tagWidth}; --autocomplete-width: {maxwidth};\"\n use:clickOutside\n on:outclick={closeListBox}\n {...attributes}\n bind:this={component}\n>\n <div class=\"mc-autocomplete__main\">\n <!-- TAG REMOVABLE -->\n {#if multiple && listboxValue.length > 0 && !alltags}\n <Tag\n id={tagid ? tagid : `autocompleteTag-${uuid}`}\n class=\"mc-autocomplete__tag\"\n label={setTagLabel()}\n size=\"s\"\n type=\"removable\"\n dark={false}\n disabled={false}\n href=\"\"\n name=\"\"\n value=\"\"\n selected={false}\n bind:this={tag}\n on:tag-removed={clearListbox}\n />\n {/if}\n\n <!-- TEXT INPUT -->\n <TextInput\n classinput=\"mc-autocomplete__trigger\"\n name={id}\n bind:value={localInputValue}\n {placeholder}\n inputtype=\"text\"\n {isinvalid}\n {disabled}\n {size}\n {required}\n iconname=\"navigation-display-search-24px\"\n rightalign={false}\n isvalid={false}\n min=\"\"\n max=\"\"\n on:input={onInput}\n on:click={() => (openState = true)}\n on:change\n on:blur\n />\n\n <div class=\"mc-autocomplete__tools\">\n <!-- LOADER -->\n {#if loading}\n <Loader\n size=\"s\"\n theme=\"primary\"\n text=\"\"\n class=\"mc-autocomplete__loader\"\n />\n {/if}\n\n <!-- CLEAR BUTTON -->\n {#if localInputValue != null && localInputValue != '' && !disabled}\n <button\n class=\"mc-autocomplete__clear\"\n type=\"button\"\n on:click|stopPropagation={() => {\n localInputValue = '';\n localItems = parsedItems;\n isfiltered = false;\n if (!multiple) {\n clearListbox();\n }\n }}\n >\n <navigation-control-tag--cross-24px />\n <span class=\"mc-autocomplete__clear-text\">Clear</span>\n </button>\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 {#if disabled}\n <m-tag\n type=\"link\"\n id={selectedItem.id}\n label={selectedItem.label}\n size=\"s\"\n dark={true}\n />\n {:else}\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 {/if}\n </div>\n {/if}\n {/each}\n {#if listboxValue.length > maxnumbertoshowtags}\n <!-- svelte-ignore a11y-click-events-have-key-events -->\n <div class=\"tag-selected\" on:click={() => openLayerFn()}>\n <m-tag\n id=\"id-tag\"\n label=\"({listboxValue.length}) {showmoretagslabel} \"\n size=\"s\"\n type=\"link\"\n />\n </div>\n {/if}\n </div>\n {/if}\n\n <!-- <span class=\"mc-autocomplete__tag\" style=\"display:none;\" /> -->\n <span class=\"mc-autocomplete__loader\" style=\"display:none;\" />\n <span class=\"mc-text-input mc-autocomplete__trigger\" style=\"display:none;\" />\n\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 {#if disabled}\n <m-tag\n type=\"text\"\n id={selectedItem.id}\n label={selectedItem.label}\n size=\"s\"\n />\n {:else}\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 {/if}\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.autocomplete';\n\n // Autocomplete\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-autocomplete {\n min-width: auto;\n\n &__tag {\n position: absolute !important; // due to the Svelte CSS scope\n }\n\n &--multi {\n .mc-autocomplete__trigger {\n padding-left: calc(\n 2.9375rem + var(--autocomplete-tag-width)\n ) !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_3","div","create_if_block_5","set_custom_element_data","m_tag","m_tag_id_value","id","m_tag_label_value","label","dirty","if_block","create_if_block_4","append","div1","m_layer","small","div0","create_if_block_1","if_block0","create_if_block_8","create_if_block_7","if_block2","create_if_block_6","JSON","stringify","if_block3","create_if_block_2","if_block4","create_if_block","style","div2_style_value","div2","span0","span1","current","component","maxwidth","$$props","tagid","taglabel","placeholder","filter","nofilter","disabled","size","isinvalid","inputvalue","loading","required","items","value","open","multiple","emptysearchlabel","datatextexpr","datavalueexpr","nosort","layertitle","showmoretagslabel","maxnumbertoshowtags","alltags","selectall","labelselectall","uuid","Math","random","tag","tagValue","sortedListItems","eventHandler","EventHandler","get_current_component","createEventDispatcher","tagWidth","isfiltered","selectedItems","openLayer","clearListbox","listboxValue","closeListBox","dispatch","$$invalidate","openState","parsedItems","getSelectedItems","sort","a","b","hasItemA","includes","hasItemB","localItems","sortItems","val","item","openLayerFn","closeLayerFn","removeTagSelected","itemSelectedId","localInputValue","parse","setTagLabel","toString","async","tick","seletedLabels","map","join","e","console","error","watchListboxValue","_a","querySelector","clientWidth","setTagWidth","eventName","attributes","Object","assign","$$restProps","class","handleInputValue","toUpperCase","filterListbox","detail","$$value","value$1","selectedItem"],"mappings":"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"}
|
|
@@ -402,6 +402,8 @@
|
|
|
402
402
|
// NOTE: These styles with the "!important" allow to overload the edge effects
|
|
403
403
|
// due to the scoping applied by Svelte on the CSS selectors
|
|
404
404
|
.mc-autocomplete {
|
|
405
|
+
min-width: auto;
|
|
406
|
+
|
|
405
407
|
&__tag {
|
|
406
408
|
position: absolute !important; // due to the Svelte CSS scope
|
|
407
409
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{S as e,i as t,a,b as l,f as i,s,H as r,I as n,c as o,e as c,d,t as m,B as g,n as p,g as h,v as x,J as u,h as w,j as b,C as f,l as $,K as v,y,w as M,x as k,k as I,L as _,m as A,o as z,D,M as E,p as C,q as j,r as S,u as N,N as T,O as L,P,A as B,z as G,Q as O}from"../../index-9ffad6d0.js";import{E as Q}from"../../EventHandler-f7ee47ca.js";import{c as W}from"../../ClickOutside-63071e7a.js";import R from"../tag/Tag.nested.js";import Y from"../loader/Loader.nested.js";import H from"../listbox/Listbox.nested.js";function Z(e,t,a){const l=e.slice();return l[62]=t[a],l}function J(e,t,a){const l=e.slice();return l[62]=t[a],l[66]=a,l}function V(e){let t,a,l={id:e[1]?e[1]:`autocompleteTag-${e[30]}`,class:"mc-dropdown__tag",label:e[29](),size:"s",type:"removable",dark:!1,disabled:!1,href:"",name:"",selected:!1,value:""};return t=new R({props:l}),e[46](t),t.$on("tag-removed",e[31]),{c(){g(t.$$.fragment)},m(e,l){f(t,e,l),a=!0},p(e,a){const l={};2&a[0]&&(l.id=e[1]?e[1]:`autocompleteTag-${e[30]}`),536870912&a[0]&&(l.label=e[29]()),t.$set(l)},i(e){a||(y(t.$$.fragment,e),a=!0)},o(e){M(t.$$.fragment,e),a=!1},d(a){e[46](null),D(t,a)}}}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(s,r){l(s,t,r),a||(i=$(t,"click",T(e[47])),a=!0)},p:p,d(e){e&&z(t),a=!1,i()}}}function q(e){let t,a;return t=new Y({props:{size:"s",theme:"primary",text:"",class:"mc-dropdown__loader"}}),{c(){g(t.$$.fragment)},m(e,l){f(t,e,l),a=!0},i(e){a||(y(t.$$.fragment,e),a=!0)},o(e){M(t.$$.fragment,e),a=!1},d(e){D(t,e)}}}function F(e){let t,a,i=e[26],s=[];for(let t=0;t<i.length;t+=1)s[t]=U(J(e,i,t));let r=e[19].length>e[15]&&ee(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);b(t,a),r&&r.m(t,null)},p(e,l){if(67141632&l[0]|2&l[1]){let r;for(i=e[26],r=0;r<i.length;r+=1){const n=J(e,i,r);s[r]?s[r].p(n,l):(s[r]=U(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=ee(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 K(e){let t,a,i,s,r,n;function o(){return e[50](e[62])}return{c(){t=c("div"),a=c("m-tag"),B(a,"id",i=e[62].id),B(a,"label",s=e[62].label),B(a,"size","s"),B(a,"type","removable"),h(t,"class","tag-selected")},m(e,i){l(e,t,i),b(t,a),r||(n=$(a,"tag-removed",o),r=!0)},p(t,l){e=t,67108864&l[0]&&i!==(i=e[62].id)&&B(a,"id",i),67108864&l[0]&&s!==(s=e[62].label)&&B(a,"label",s)},d(e){e&&z(t),r=!1,n()}}}function U(e){let t,a=e[66]<e[15]&&K(e);return{c(){a&&a.c(),t=P()},m(e,i){a&&a.m(e,i),l(e,t,i)},p(e,l){e[66]<e[15]?a?a.p(e,l):(a=K(e),a.c(),a.m(t.parentNode,t)):a&&(a.d(1),a=null)},d(e){a&&a.d(e),e&&z(t)}}}function ee(e){let t,a,i,s,r;return{c(){t=c("div"),a=c("m-tag"),B(a,"id","id-tag"),B(a,"label",i="("+e[19].length+") "+e[14]+" "),B(a,"size","s"),B(a,"type","link"),h(t,"class","tag-selected")},m(i,n){l(i,t,n),b(t,a),s||(r=$(a,"tag-selected",e[51]),s=!0)},p(e,t){540672&t[0]&&i!==(i="("+e[19].length+") "+e[14]+" ")&&B(a,"label",i)},d(e){e&&z(t),s=!1,r()}}}function te(e){let t,a,i,s,r,n,o=e[26],d=[];for(let t=0;t<o.length;t+=1)d[t]=ae(Z(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"),B(a,"title",e[13]),B(a,"layertitletag","h3"),B(a,"isopen",e[27])},m(o,c){l(o,t,c),b(t,a),b(a,i),b(i,s);for(let e=0;e<d.length;e+=1)d[e]&&d[e].m(s,null);r||(n=$(a,"layer-closed",e[53]),r=!0)},p(e,t){if(67108864&t[0]|2&t[1]){let a;for(o=e[26],a=0;a<o.length;a+=1){const l=Z(e,o,a);d[a]?d[a].p(l,t):(d[a]=ae(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]&&B(a,"title",e[13]),134217728&t[0]&&B(a,"isopen",e[27])},d(e){e&&z(t),L(d,e),r=!1,n()}}}function ae(e){let t,a,i,s,r,n,o;function m(){return e[52](e[62])}return{c(){t=c("div"),a=c("m-tag"),r=d(),B(a,"id",i=e[62].id),B(a,"label",s=e[62].label),B(a,"size","s"),B(a,"type","removable"),h(t,"class","tag-selected")},m(e,i){l(e,t,i),b(t,a),b(t,r),n||(o=$(a,"tag-removed",m),n=!0)},p(t,l){e=t,67108864&l[0]&&i!==(i=e[62].id)&&B(a,"id",i),67108864&l[0]&&s!==(s=e[62].label)&&B(a,"label",s)},d(e){e&&z(t),n=!1,o()}}}function le(e){let t,a,i,s,C,j,S,N,T,L,P,B,O,Q,R,Y,Z,J,K,U,ee,ae,le,se=(e[25]?e[25]:e[2])+"",re=e[8]&&e[19].length>0&&!e[16]&&V(e),ne=!e[8]&&e[25]&&e[12]&&X(e),oe=e[7]&&q();function ce(t){e[49](t)}let de={items:JSON.stringify(e[28]),open:e[20],multiple:e[8],isfiltered:ie,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]),L=new H({props:de}),r.push((()=>n(L,"value",ce))),L.$on("change",e[36]),L.$on("scrollend",e[37]),L.$on("select-all",e[38]);let me=e[8]&&e[16]&&F(e),ge=e[8]&&e[16]&&te(e),pe=[{class:"mc-dropdown"},{style:U="--dropdown-tag-width: "+e[24]+"; --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),j=d(),ne&&ne.c(),S=d(),N=c("div"),oe&&oe.c(),T=d(),g(L.$$.fragment),B=d(),me&&me.c(),O=d(),Q=c("span"),R=d(),Y=c("span"),Z=d(),J=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(N,"class","mc-dropdown__tools"),h(a,"class","mc-dropdown__main"),h(Q,"class","mc-dropdown__tag"),u(Q,"display","none"),h(Y,"class","mc-dropdown__loader"),u(Y,"display","none"),h(J,"class","mc-text-input mc-dropdown__trigger"),u(J,"display","none"),w(t,he),x(t,"mc-dropdown--multi",e[8])},m(r,n){l(r,t,n),b(t,a),re&&re.m(a,null),b(a,i),b(a,s),b(s,C),b(s,j),ne&&ne.m(s,null),b(a,S),b(a,N),oe&&oe.m(N,null),b(t,T),f(L,t,null),b(t,B),me&&me.m(t,null),b(t,O),b(t,Q),b(t,R),b(t,Y),b(t,Z),b(t,J),b(t,K),ge&&ge.m(t,null),e[54](t),ee=!0,ae||(le=[$(s,"click",e[48]),v(W.call(null,t)),$(t,"outclick",e[35])],ae=!0)},p(e,l){e[8]&&e[19].length>0&&!e[16]?re?(re.p(e,l),590080&l[0]&&y(re,1)):(re=V(e),re.c(),y(re,1),re.m(a,i)):re&&(G(),M(re,1,1,(()=>{re=null})),k()),(!ee||33554436&l[0])&&se!==(se=(e[25]?e[25]:e[2])+"")&&I(C,se),!e[8]&&e[25]&&e[12]?ne?ne.p(e,l):(ne=X(e),ne.c(),ne.m(s,null)):ne&&(ne.d(1),ne=null),(!ee||8&l[0])&&(s.disabled=e[3]),(!ee||1048576&l[0])&&x(s,"is-open",e[20]),(!ee||32&l[0])&&x(s,"is-valid",e[5]),(!ee||64&l[0])&&x(s,"is-invalid",e[6]),(!ee||16&l[0])&&x(s,"mc-select--s","s"===e[4]),e[7]?oe?128&l[0]&&y(oe,1):(oe=q(),oe.c(),y(oe,1),oe.m(N,null)):oe&&(G(),M(oe,1,1,(()=>{oe=null})),k());const r={};268435456&l[0]&&(r.items=JSON.stringify(e[28])),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]),!P&&524288&l[0]&&(P=!0,r.value=e[19],_((()=>P=!1))),L.$set(r),e[8]&&e[16]?me?me.p(e,l):(me=F(e),me.c(),me.m(t,O)):me&&(me.d(1),me=null),e[8]&&e[16]?ge?ge.p(e,l):(ge=te(e),ge.c(),ge.m(t,null)):ge&&(ge.d(1),ge=null),w(t,he=A(pe,[{class:"mc-dropdown"},(!ee||16777217&l[0]&&U!==(U="--dropdown-tag-width: "+e[24]+"; --dropdown-width: "+e[0]+";"))&&{style:U},2097152&l[0]&&e[21]])),x(t,"mc-dropdown--multi",e[8])},i(e){ee||(y(re),y(oe),y(L.$$.fragment,e),ee=!0)},o(e){M(re),M(oe),M(L.$$.fragment,e),ee=!1},d(a){a&&z(t),re&&re.d(),ne&&ne.d(),oe&&oe.d(),D(L),me&&me.d(),ge&&ge.d(),e[54](null),ae=!1,E(le)}}}let ie=!1;function se(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,p=C(t,m),{maxwidth:h="100%"}=t,{tagid:x}=t,{taglabel:u=""}=t,{placeholder:w="-- Placeholder --"}=t,{disabled:b=!1}=t,{size:f="m"}=t,{isvalid:$}=t,{isinvalid:v}=t,{loading:y=!1}=t,{items:M}=t,{value:k}=t,{open:I=!1}=t,{multiple:_=!1}=t,{emptysearchlabel:A="No results found"}=t,{datatextexpr:z="label"}=t,{datavalueexpr:D="value"}=t,{nosort:E=!1}=t,{clearfield:T=!1}=t,{layertitle:L="Title layer"}=t,{showmoretagslabel:P="Show more"}=t,{maxnumbertoshowtags:B=12}=t,{alltags:G=!1}=t,{selectall:W=!1}=t,{labelselectall:R="Select all"}=t;const Y=Math.random();let H,Z,J,V,X=new Q(j(),S()),q="0px",F=[],K=null;function U(){a(19,s=_?[]:""),le(),X.dispatch("clear",!0)}function ee(e){a(19,s=s.filter((t=>t!==e))),X.dispatch("onchange",s)}function te(){a(27,K=!0)}function ae(){a(27,K=null)}function le(){a(20,c=!1),_&&!E?function(){V=l;const e=ie();V.sort(((t,a)=>{const l=e.includes(t),i=e.includes(a);return l===i?t[D]-a[D]:l<i?1:-1})),a(28,i=V)}():a(28,i=l)}function ie(e){const t=e||s;return l.filter((e=>_?t.includes(e[D]):t===e[D]))}return e.$$set=e=>{t=o(o({},t),N(e)),a(61,p=C(t,m)),"maxwidth"in e&&a(0,h=e.maxwidth),"tagid"in e&&a(1,x=e.tagid),"taglabel"in e&&a(39,u=e.taglabel),"placeholder"in e&&a(2,w=e.placeholder),"disabled"in e&&a(3,b=e.disabled),"size"in e&&a(4,f=e.size),"isvalid"in e&&a(5,$=e.isvalid),"isinvalid"in e&&a(6,v=e.isinvalid),"loading"in e&&a(7,y=e.loading),"items"in e&&a(40,M=e.items),"value"in e&&a(41,k=e.value),"open"in e&&a(42,I=e.open),"multiple"in e&&a(8,_=e.multiple),"emptysearchlabel"in e&&a(9,A=e.emptysearchlabel),"datatextexpr"in e&&a(10,z=e.datatextexpr),"datavalueexpr"in e&&a(11,D=e.datavalueexpr),"nosort"in e&&a(43,E=e.nosort),"clearfield"in e&&a(12,T=e.clearfield),"layertitle"in e&&a(13,L=e.layertitle),"showmoretagslabel"in e&&a(14,P=e.showmoretagslabel),"maxnumbertoshowtags"in e&&a(15,B=e.maxnumbertoshowtags),"alltags"in e&&a(16,G=e.alltags),"selectall"in e&&a(17,W=e.selectall),"labelselectall"in e&&a(18,R=e.labelselectall)},e.$$.update=()=>{if(512&e.$$.dirty[1]&&a(45,l=M?JSON.parse(M):[]),16384&e.$$.dirty[1]&&a(28,i=l),256&e.$$.dirty[0]|1024&e.$$.dirty[1]&&a(19,s=!k&&_?[]:k?JSON.parse(k):k),524288&e.$$.dirty[0]|256&e.$$.dirty[1]&&a(29,n=()=>s.length.toString()+" "+u),524288&e.$$.dirty[0]&&async function(e){await O(),a(26,F=ie(e));const t=F.map((e=>e[z]));a(25,J=t.join(", ")),_&&a(44,Z=e)}(s),8192&e.$$.dirty[1]&&async function(e){var t,l;await O(),a(24,q=H&&e&&e.length?`${null!==(l=null===(t=null==g?void 0:g.querySelector(".mc-tag-removable"))||void 0===t?void 0:t.clientWidth)&&void 0!==l?l:8}px`:"0px")}(Z),2048&e.$$.dirty[1]&&a(20,c=I),1048576&e.$$.dirty[0]){const e=c?"open":"close";X.dispatch(e,c)}a(21,d=Object.assign({},p)),2097152&e.$$.dirty[0]&&delete d.class},[h,x,w,b,f,$,v,y,_,A,z,D,T,L,P,B,G,W,R,s,c,d,g,H,q,J,F,K,i,n,Y,U,ee,te,ae,le,function(){X.dispatch("onchange",s),_||le()},function(){X.dispatch("scrollend",!0)},function(e){X.dispatch("select-all",e.detail)},u,M,k,I,E,Z,l,function(e){r[e?"unshift":"push"]((()=>{H=e,a(23,H)}))},()=>{U()},()=>a(20,c=!c),function(e){s=e,a(19,s),a(41,k),a(8,_)},e=>ee(e.id),()=>te(),e=>ee(e.id),()=>ae(),function(e){r[e?"unshift":"push"]((()=>{g=e,a(22,g)}))}]}class re 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,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23191919' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\");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,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23191919' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\"), url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNjNjExMTIiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMTAxMCAxMEExMCAxMCAwIDAwMTIgMnptMCAxOGE4IDggMCAxMTgtOCA4IDggMCAwMS04IDh6Ii8+PHBhdGggZD0iTTEyIDdhMSAxIDAgMDAtMSAxdjQuMzhhMSAxIDAgMDAyIDBWOGExIDEgMCAwMC0xLTF6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxNiIgcj0iMSIvPjwvc3ZnPg==\");border-color:#c61112}.mc-select.is-valid{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23191919' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\"), 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,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23000000' viewBox='0 0 16 16'%3E%3Cpath d='M2 10.5a1 1 0 01.29-.71l5-5a1 1 0 011.42 0l5 5a1 1 0 01-1.42 1.42L8 6.91l-4.29 4.3a1 1 0 01-1.42 0A1 1 0 012 10.5z'/%3E%3C/svg%3E\")}.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},se,le,s,{maxwidth:0,tagid:1,taglabel:39,placeholder:2,disabled:3,size:4,isvalid:5,isinvalid:6,loading:7,items:40,value:41,open:42,multiple:8,emptysearchlabel:9,datatextexpr:10,datavalueexpr:11,nosort:43,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[39]}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[40]}set items(e){this.$$set({items:e}),i()}get value(){return this.$$.ctx[41]}set value(e){this.$$set({value:e}),i()}get open(){return this.$$.ctx[42]}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[43]}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};
|
|
1
|
+
import{S as e,i as t,a,b as l,f as i,s,H as r,I as n,c as o,e as c,d,t as m,B as g,n as p,g as h,v as x,J as u,h as w,j as b,C as f,l as $,K as v,y,w as M,x as k,k as I,L as _,m as A,o as z,D,M as E,p as C,q as j,r as S,u as N,N as T,O as L,P,A as B,z as G,Q as O}from"../../index-9ffad6d0.js";import{E as Q}from"../../EventHandler-f7ee47ca.js";import{c as W}from"../../ClickOutside-63071e7a.js";import R from"../tag/Tag.nested.js";import Y from"../loader/Loader.nested.js";import H from"../listbox/Listbox.nested.js";function Z(e,t,a){const l=e.slice();return l[62]=t[a],l}function J(e,t,a){const l=e.slice();return l[62]=t[a],l[66]=a,l}function V(e){let t,a,l={id:e[1]?e[1]:`autocompleteTag-${e[30]}`,class:"mc-dropdown__tag",label:e[29](),size:"s",type:"removable",dark:!1,disabled:!1,href:"",name:"",selected:!1,value:""};return t=new R({props:l}),e[46](t),t.$on("tag-removed",e[31]),{c(){g(t.$$.fragment)},m(e,l){f(t,e,l),a=!0},p(e,a){const l={};2&a[0]&&(l.id=e[1]?e[1]:`autocompleteTag-${e[30]}`),536870912&a[0]&&(l.label=e[29]()),t.$set(l)},i(e){a||(y(t.$$.fragment,e),a=!0)},o(e){M(t.$$.fragment,e),a=!1},d(a){e[46](null),D(t,a)}}}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(s,r){l(s,t,r),a||(i=$(t,"click",T(e[47])),a=!0)},p:p,d(e){e&&z(t),a=!1,i()}}}function q(e){let t,a;return t=new Y({props:{size:"s",theme:"primary",text:"",class:"mc-dropdown__loader"}}),{c(){g(t.$$.fragment)},m(e,l){f(t,e,l),a=!0},i(e){a||(y(t.$$.fragment,e),a=!0)},o(e){M(t.$$.fragment,e),a=!1},d(e){D(t,e)}}}function F(e){let t,a,i=e[26],s=[];for(let t=0;t<i.length;t+=1)s[t]=U(J(e,i,t));let r=e[19].length>e[15]&&ee(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);b(t,a),r&&r.m(t,null)},p(e,l){if(67141632&l[0]|2&l[1]){let r;for(i=e[26],r=0;r<i.length;r+=1){const n=J(e,i,r);s[r]?s[r].p(n,l):(s[r]=U(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=ee(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 K(e){let t,a,i,s,r,n;function o(){return e[50](e[62])}return{c(){t=c("div"),a=c("m-tag"),B(a,"id",i=e[62].id),B(a,"label",s=e[62].label),B(a,"size","s"),B(a,"type","removable"),h(t,"class","tag-selected")},m(e,i){l(e,t,i),b(t,a),r||(n=$(a,"tag-removed",o),r=!0)},p(t,l){e=t,67108864&l[0]&&i!==(i=e[62].id)&&B(a,"id",i),67108864&l[0]&&s!==(s=e[62].label)&&B(a,"label",s)},d(e){e&&z(t),r=!1,n()}}}function U(e){let t,a=e[66]<e[15]&&K(e);return{c(){a&&a.c(),t=P()},m(e,i){a&&a.m(e,i),l(e,t,i)},p(e,l){e[66]<e[15]?a?a.p(e,l):(a=K(e),a.c(),a.m(t.parentNode,t)):a&&(a.d(1),a=null)},d(e){a&&a.d(e),e&&z(t)}}}function ee(e){let t,a,i,s,r;return{c(){t=c("div"),a=c("m-tag"),B(a,"id","id-tag"),B(a,"label",i="("+e[19].length+") "+e[14]+" "),B(a,"size","s"),B(a,"type","link"),h(t,"class","tag-selected")},m(i,n){l(i,t,n),b(t,a),s||(r=$(a,"tag-selected",e[51]),s=!0)},p(e,t){540672&t[0]&&i!==(i="("+e[19].length+") "+e[14]+" ")&&B(a,"label",i)},d(e){e&&z(t),s=!1,r()}}}function te(e){let t,a,i,s,r,n,o=e[26],d=[];for(let t=0;t<o.length;t+=1)d[t]=ae(Z(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"),B(a,"title",e[13]),B(a,"layertitletag","h3"),B(a,"isopen",e[27])},m(o,c){l(o,t,c),b(t,a),b(a,i),b(i,s);for(let e=0;e<d.length;e+=1)d[e]&&d[e].m(s,null);r||(n=$(a,"layer-closed",e[53]),r=!0)},p(e,t){if(67108864&t[0]|2&t[1]){let a;for(o=e[26],a=0;a<o.length;a+=1){const l=Z(e,o,a);d[a]?d[a].p(l,t):(d[a]=ae(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]&&B(a,"title",e[13]),134217728&t[0]&&B(a,"isopen",e[27])},d(e){e&&z(t),L(d,e),r=!1,n()}}}function ae(e){let t,a,i,s,r,n,o;function m(){return e[52](e[62])}return{c(){t=c("div"),a=c("m-tag"),r=d(),B(a,"id",i=e[62].id),B(a,"label",s=e[62].label),B(a,"size","s"),B(a,"type","removable"),h(t,"class","tag-selected")},m(e,i){l(e,t,i),b(t,a),b(t,r),n||(o=$(a,"tag-removed",m),n=!0)},p(t,l){e=t,67108864&l[0]&&i!==(i=e[62].id)&&B(a,"id",i),67108864&l[0]&&s!==(s=e[62].label)&&B(a,"label",s)},d(e){e&&z(t),n=!1,o()}}}function le(e){let t,a,i,s,C,j,S,N,T,L,P,B,O,Q,R,Y,Z,J,K,U,ee,ae,le,se=(e[25]?e[25]:e[2])+"",re=e[8]&&e[19].length>0&&!e[16]&&V(e),ne=!e[8]&&e[25]&&e[12]&&X(e),oe=e[7]&&q();function ce(t){e[49](t)}let de={items:JSON.stringify(e[28]),open:e[20],multiple:e[8],isfiltered:ie,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]),L=new H({props:de}),r.push((()=>n(L,"value",ce))),L.$on("change",e[36]),L.$on("scrollend",e[37]),L.$on("select-all",e[38]);let me=e[8]&&e[16]&&F(e),ge=e[8]&&e[16]&&te(e),pe=[{class:"mc-dropdown"},{style:U="--dropdown-tag-width: "+e[24]+"; --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),j=d(),ne&&ne.c(),S=d(),N=c("div"),oe&&oe.c(),T=d(),g(L.$$.fragment),B=d(),me&&me.c(),O=d(),Q=c("span"),R=d(),Y=c("span"),Z=d(),J=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(N,"class","mc-dropdown__tools"),h(a,"class","mc-dropdown__main"),h(Q,"class","mc-dropdown__tag"),u(Q,"display","none"),h(Y,"class","mc-dropdown__loader"),u(Y,"display","none"),h(J,"class","mc-text-input mc-dropdown__trigger"),u(J,"display","none"),w(t,he),x(t,"mc-dropdown--multi",e[8])},m(r,n){l(r,t,n),b(t,a),re&&re.m(a,null),b(a,i),b(a,s),b(s,C),b(s,j),ne&&ne.m(s,null),b(a,S),b(a,N),oe&&oe.m(N,null),b(t,T),f(L,t,null),b(t,B),me&&me.m(t,null),b(t,O),b(t,Q),b(t,R),b(t,Y),b(t,Z),b(t,J),b(t,K),ge&&ge.m(t,null),e[54](t),ee=!0,ae||(le=[$(s,"click",e[48]),v(W.call(null,t)),$(t,"outclick",e[35])],ae=!0)},p(e,l){e[8]&&e[19].length>0&&!e[16]?re?(re.p(e,l),590080&l[0]&&y(re,1)):(re=V(e),re.c(),y(re,1),re.m(a,i)):re&&(G(),M(re,1,1,(()=>{re=null})),k()),(!ee||33554436&l[0])&&se!==(se=(e[25]?e[25]:e[2])+"")&&I(C,se),!e[8]&&e[25]&&e[12]?ne?ne.p(e,l):(ne=X(e),ne.c(),ne.m(s,null)):ne&&(ne.d(1),ne=null),(!ee||8&l[0])&&(s.disabled=e[3]),(!ee||1048576&l[0])&&x(s,"is-open",e[20]),(!ee||32&l[0])&&x(s,"is-valid",e[5]),(!ee||64&l[0])&&x(s,"is-invalid",e[6]),(!ee||16&l[0])&&x(s,"mc-select--s","s"===e[4]),e[7]?oe?128&l[0]&&y(oe,1):(oe=q(),oe.c(),y(oe,1),oe.m(N,null)):oe&&(G(),M(oe,1,1,(()=>{oe=null})),k());const r={};268435456&l[0]&&(r.items=JSON.stringify(e[28])),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]),!P&&524288&l[0]&&(P=!0,r.value=e[19],_((()=>P=!1))),L.$set(r),e[8]&&e[16]?me?me.p(e,l):(me=F(e),me.c(),me.m(t,O)):me&&(me.d(1),me=null),e[8]&&e[16]?ge?ge.p(e,l):(ge=te(e),ge.c(),ge.m(t,null)):ge&&(ge.d(1),ge=null),w(t,he=A(pe,[{class:"mc-dropdown"},(!ee||16777217&l[0]&&U!==(U="--dropdown-tag-width: "+e[24]+"; --dropdown-width: "+e[0]+";"))&&{style:U},2097152&l[0]&&e[21]])),x(t,"mc-dropdown--multi",e[8])},i(e){ee||(y(re),y(oe),y(L.$$.fragment,e),ee=!0)},o(e){M(re),M(oe),M(L.$$.fragment,e),ee=!1},d(a){a&&z(t),re&&re.d(),ne&&ne.d(),oe&&oe.d(),D(L),me&&me.d(),ge&&ge.d(),e[54](null),ae=!1,E(le)}}}let ie=!1;function se(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,p=C(t,m),{maxwidth:h="100%"}=t,{tagid:x}=t,{taglabel:u=""}=t,{placeholder:w="-- Placeholder --"}=t,{disabled:b=!1}=t,{size:f="m"}=t,{isvalid:$}=t,{isinvalid:v}=t,{loading:y=!1}=t,{items:M}=t,{value:k}=t,{open:I=!1}=t,{multiple:_=!1}=t,{emptysearchlabel:A="No results found"}=t,{datatextexpr:z="label"}=t,{datavalueexpr:D="value"}=t,{nosort:E=!1}=t,{clearfield:T=!1}=t,{layertitle:L="Title layer"}=t,{showmoretagslabel:P="Show more"}=t,{maxnumbertoshowtags:B=12}=t,{alltags:G=!1}=t,{selectall:W=!1}=t,{labelselectall:R="Select all"}=t;const Y=Math.random();let H,Z,J,V,X=new Q(j(),S()),q="0px",F=[],K=null;function U(){a(19,s=_?[]:""),le(),X.dispatch("clear",!0)}function ee(e){a(19,s=s.filter((t=>t!==e))),X.dispatch("onchange",s)}function te(){a(27,K=!0)}function ae(){a(27,K=null)}function le(){a(20,c=!1),_&&!E?function(){V=l;const e=ie();V.sort(((t,a)=>{const l=e.includes(t),i=e.includes(a);return l===i?t[D]-a[D]:l<i?1:-1})),a(28,i=V)}():a(28,i=l)}function ie(e){const t=e||s;return l.filter((e=>_?t.includes(e[D]):t===e[D]))}return e.$$set=e=>{t=o(o({},t),N(e)),a(61,p=C(t,m)),"maxwidth"in e&&a(0,h=e.maxwidth),"tagid"in e&&a(1,x=e.tagid),"taglabel"in e&&a(39,u=e.taglabel),"placeholder"in e&&a(2,w=e.placeholder),"disabled"in e&&a(3,b=e.disabled),"size"in e&&a(4,f=e.size),"isvalid"in e&&a(5,$=e.isvalid),"isinvalid"in e&&a(6,v=e.isinvalid),"loading"in e&&a(7,y=e.loading),"items"in e&&a(40,M=e.items),"value"in e&&a(41,k=e.value),"open"in e&&a(42,I=e.open),"multiple"in e&&a(8,_=e.multiple),"emptysearchlabel"in e&&a(9,A=e.emptysearchlabel),"datatextexpr"in e&&a(10,z=e.datatextexpr),"datavalueexpr"in e&&a(11,D=e.datavalueexpr),"nosort"in e&&a(43,E=e.nosort),"clearfield"in e&&a(12,T=e.clearfield),"layertitle"in e&&a(13,L=e.layertitle),"showmoretagslabel"in e&&a(14,P=e.showmoretagslabel),"maxnumbertoshowtags"in e&&a(15,B=e.maxnumbertoshowtags),"alltags"in e&&a(16,G=e.alltags),"selectall"in e&&a(17,W=e.selectall),"labelselectall"in e&&a(18,R=e.labelselectall)},e.$$.update=()=>{if(512&e.$$.dirty[1]&&a(45,l=M?JSON.parse(M):[]),16384&e.$$.dirty[1]&&a(28,i=l),256&e.$$.dirty[0]|1024&e.$$.dirty[1]&&a(19,s=!k&&_?[]:k?JSON.parse(k):k),524288&e.$$.dirty[0]|256&e.$$.dirty[1]&&a(29,n=()=>s.length.toString()+" "+u),524288&e.$$.dirty[0]&&async function(e){await O(),a(26,F=ie(e));const t=F.map((e=>e[z]));a(25,J=t.join(", ")),_&&a(44,Z=e)}(s),8192&e.$$.dirty[1]&&async function(e){var t,l;await O(),a(24,q=H&&e&&e.length?`${null!==(l=null===(t=null==g?void 0:g.querySelector(".mc-tag-removable"))||void 0===t?void 0:t.clientWidth)&&void 0!==l?l:8}px`:"0px")}(Z),2048&e.$$.dirty[1]&&a(20,c=I),1048576&e.$$.dirty[0]){const e=c?"open":"close";X.dispatch(e,c)}a(21,d=Object.assign({},p)),2097152&e.$$.dirty[0]&&delete d.class},[h,x,w,b,f,$,v,y,_,A,z,D,T,L,P,B,G,W,R,s,c,d,g,H,q,J,F,K,i,n,Y,U,ee,te,ae,le,function(){X.dispatch("onchange",s),_||le()},function(){X.dispatch("scrollend",!0)},function(e){X.dispatch("select-all",e.detail)},u,M,k,I,E,Z,l,function(e){r[e?"unshift":"push"]((()=>{H=e,a(23,H)}))},()=>{U()},()=>a(20,c=!c),function(e){s=e,a(19,s),a(41,k),a(8,_)},e=>ee(e.id),()=>te(),e=>ee(e.id),()=>ae(),function(e){r[e?"unshift":"push"]((()=>{g=e,a(22,g)}))}]}class re 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,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23191919' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\");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,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23191919' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\"), url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNjNjExMTIiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMTAxMCAxMEExMCAxMCAwIDAwMTIgMnptMCAxOGE4IDggMCAxMTgtOCA4IDggMCAwMS04IDh6Ii8+PHBhdGggZD0iTTEyIDdhMSAxIDAgMDAtMSAxdjQuMzhhMSAxIDAgMDAyIDBWOGExIDEgMCAwMC0xLTF6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxNiIgcj0iMSIvPjwvc3ZnPg==\");border-color:#c61112}.mc-select.is-valid{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23191919' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\"), 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,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23000000' viewBox='0 0 16 16'%3E%3Cpath d='M2 10.5a1 1 0 01.29-.71l5-5a1 1 0 011.42 0l5 5a1 1 0 01-1.42 1.42L8 6.91l-4.29 4.3a1 1 0 01-1.42 0A1 1 0 012 10.5z'/%3E%3C/svg%3E\")}.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{min-width:auto}.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},se,le,s,{maxwidth:0,tagid:1,taglabel:39,placeholder:2,disabled:3,size:4,isvalid:5,isinvalid:6,loading:7,items:40,value:41,open:42,multiple:8,emptysearchlabel:9,datatextexpr:10,datavalueexpr:11,nosort:43,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[39]}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[40]}set items(e){this.$$set({items:e}),i()}get value(){return this.$$.ctx[41]}set value(e){this.$$set({value:e}),i()}get open(){return this.$$.ctx[42]}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[43]}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};
|
|
2
2
|
//# sourceMappingURL=Dropdown.js.map
|
|
@@ -1 +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 {\n get_current_component,\n createEventDispatcher,\n } 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 let component: HTMLDivElement;\n const uuid = Math.random();\n let eventHandler = new EventHandler(\n get_current_component(),\n createEventDispatcher(),\n );\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?.querySelector('.mc-tag-removable')?.clientWidth ?? 0 + 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 bind:this={component}\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","component","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","uuid","Math","random","tag","tagValue","buttonvalue","sortedListItems","eventHandler","EventHandler","get_current_component","createEventDispatcher","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","_b","_a","querySelector","clientWidth","setTagWidth","eventName","attributes","Object","assign","$$restProps","class","e","detail","$$value","value$1","selectedItem"],"mappings":"0pBA6LYA,EAAK,GAAGA,EAAK,sBAAsBA,EAAI,qCAEpCA,EAAW,sCAGZ,YACI,4BAGA,mEAGMA,EAAY,kFAZxBA,EAAK,GAAGA,EAAK,sBAAsBA,EAAI,gCAEpCA,EAAW,qTA2BlBC,EAQQC,EAAAC,EAAAC,mUAgCHJ,EAAa,yBAAlBK,OAAIC,GAAA,yBAaDN,EAAY,IAACK,OAASL,EAAmB,KAAAO,GAAAP,kHAdhDC,EAyBKC,EAAAM,EAAAJ,uHAxBIJ,EAAa,YAAlBK,OAAIC,GAAA,EAAA,8GAAJD,OAaGL,EAAY,IAACK,OAASL,EAAmB,gMATlCS,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,oMAgBnBA,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,kCAETA,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,wHAtF/Bd,EAAW,IAAGA,EAAW,IAAGA,EAAW,IAAA,GA7BrCuB,GAAAvB,MAAYA,EAAY,IAACK,OAAS,IAAML,EAAO,KAAAwB,EAAAxB,OA8B5CA,EAAQ,IAAIA,EAAW,KAAIA,EAAU,KAAAyB,EAAAzB,MAetCA,EAAO,IAAA0B,0CAQPC,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,8BA7GMiC,MAAAC,EAAA,yBAAAlC,6BAA8BA,EAAQ,GAAA,KAGhEA,EAAU,qYA2BKA,EAAS,oBACRA,EAAO,qBACLA,EAAS,IACPmC,EAAAhC,EAAA,eAAS,MAATH,iSAlCEA,EAAQ,YAFpCC,EA0IKC,EAAAkC,EAAAhC,GAjIHW,EAmDKqB,EAAAjB,2BA9BHJ,EAsBQI,EAAAhB,yCAERY,EAKKI,EAAAG,sEAkDPP,EAAsDqB,EAAAC,UACtDtB,EAAyDqB,EAAAE,UACzDvB,EAAwEqB,EAAAG,uGA1G3DvC,EAAY,qBAMlBA,MAAYA,EAAY,IAACK,OAAS,IAAML,EAAO,mJA6BjDA,EAAW,IAAGA,EAAW,IAAGA,EAAW,IAAA,KAAAwC,EAAAC,EAAAC,KAClC1C,EAAQ,IAAIA,EAAW,KAAIA,EAAU,yIAR5BA,EAAS,oCACRA,EAAO,qCACLA,EAAS,oBACPmC,EAAAhC,EAAA,eAAS,MAATH,MAoBfA,EAAO,yIAQP2B,KAAKC,UAAU5B,EAAU,4BAC1BA,EAAS,0QASHA,EAAY,6BAMrBA,MAAYA,EAAO,kEAgCnBA,MAAYA,EAAO,2GA7GM2C,IAAA,SAAA3B,EAAA,IAAAkB,KAAAA,EAAA,yBAAAlC,6BAA8BA,EAAQ,GAAA,OAAA,CAAAiC,MAAAC,iBAGhElC,EAAU,gCAJYA,EAAQ,oMA7H9B,IAAA4C,IAAa,yVAXbC,YAzBOC,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,QAGlCwB,EAAOC,KAAKC,SACd,IAIAC,EAEAC,EACAC,EACAC,EARAC,EAAmB,IAAAC,EACrBC,IACAC,KAGEC,EAAW,MAKXC,EAAa,GACbC,EAAiB,cAiBZC,SACPC,EAAe3B,EAAQ,GAAQ,IAC/B4B,KACAT,EAAaU,SAAS,SAAS,GAGxB,SAAAC,GAAkBC,QACzBJ,EAAeA,EAAaK,QACzBlC,GAAeA,IAAUiC,KAE5BZ,EAAaU,SAAS,WAAYF,YAG3BM,KACPC,EAAA,GAAAT,GAAY,YAGLU,KACPD,EAAA,GAAAT,EAAY,eAGLG,KACPM,EAAA,GAAAE,GAAY,GAERpC,IAAaI,aA4BjBc,EAAkBmB,EACZ,MAAAb,EAAgBc,KAEtBpB,EAAgBqB,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,EAAa3B,GA3CX4B,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,EAAS7B,KAAKiF,MAAMpD,GAAK,yBACzCqC,EAAA,GAAEW,EAAaR,yCACbH,EAAA,GAAAP,GAAgB7B,GAASE,KAAgBF,EAAQ9B,KAAKiF,MAAMnD,GAASA,gDACrEoD,EAAW,IACLvB,EAAajF,OAAOyG,WAAa,IAAM7D,yBA2FjC8D,eAAkBtD,SACzBuD,SACN7B,EAAgBc,GAAiBxC,UAC3BwD,EAAgB9B,EAAc+B,KAAKP,GAASA,EAAK9C,KAEvDgC,EAAA,GAAAjB,EAAcqC,EAAcE,KAAK,OAE7BxD,GACFkC,EAAA,GAAAlB,EAAWlB,GAjGZ2D,CAAkB9B,uBAqGNyB,eAAYpC,iBACnBqC,IAENnB,EAAA,GAAAX,EACER,GAAOC,GAAYA,EAAStE,UAClC,QAAAgH,EAAA,QAAAC,EACYzE,eAAAA,EAAW0E,cAAc,4BADrC,IAAAD,SAAAA,EAC2DE,uBAD3DH,EAAAA,EAC0E,MAEhE,OA5GLI,CAAY9C,uBACdkB,EAAA,GAAEE,EAAYrC,yBACd,CACO,MAAAgE,EAAY3B,EAAY,OAAS,QACvCjB,EAAaU,SAASkC,EAAW3B,QAEhC4B,EAALC,OAAAC,UAAuBC,kCACXH,EAAWI,+FAiCnBjD,EAAaU,SAAS,WAAYF,GAE7B3B,GACH4B,iBAqCFT,EAAaU,SAAS,aAAa,IAG5B,SAAYwC,GACnBlD,EAAaU,SAAS,aAAcwC,EAAEC,+DAoDvBvD,EAAGwD,mBAsBV7C,GAAY,EARD,IAAAQ,EAAA,GAAAE,GAAaA,eAoCpBT,EAAY6C,6BAgBQ1C,GAAkB2C,EAAaxH,QAYhCgF,QA2BKH,GAAkB2C,EAAaxH,QAXxCkF,6CA/GlBjD,EAASqF"}
|
|
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 {\n get_current_component,\n createEventDispatcher,\n } 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 let component: HTMLDivElement;\n const uuid = Math.random();\n let eventHandler = new EventHandler(\n get_current_component(),\n createEventDispatcher(),\n );\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?.querySelector('.mc-tag-removable')?.clientWidth ?? 0 + 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 bind:this={component}\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 min-width: auto;\n\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","component","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","uuid","Math","random","tag","tagValue","buttonvalue","sortedListItems","eventHandler","EventHandler","get_current_component","createEventDispatcher","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","_b","_a","querySelector","clientWidth","setTagWidth","eventName","attributes","Object","assign","$$restProps","class","e","detail","$$value","value$1","selectedItem"],"mappings":"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"}
|
|
@@ -323,6 +323,8 @@
|
|
|
323
323
|
// NOTE: These styles with the "!important" allow to overload the edge effects
|
|
324
324
|
// due to the scoping applied by Svelte on the CSS selectors
|
|
325
325
|
.mc-dropdown {
|
|
326
|
+
min-width: auto;
|
|
327
|
+
|
|
326
328
|
&__tag {
|
|
327
329
|
position: absolute !important; // due to the Svelte CSS scope
|
|
328
330
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{S as e,i as t,a as r,b as i,f as s,s as p,c,e as a,n
|
|
1
|
+
import{S as e,i as t,a as r,b as i,f as s,s as p,c,e as a,n,g as o,h as m,j as l,m as d,o as _,O as b,p as f,q as h,r as u,u as x,d as g,t as k,J as w,l as v,k as y}from"../../index-9ffad6d0.js";import{E as $}from"../../EventHandler-f7ee47ca.js";function z(e,t,r){const i=e.slice();return i[10]=t[r],i[12]=r,i}function C(e){let t,r,s=e[12]+1+"";return{c(){t=a("span"),r=k(s)},m(e,s){i(e,t,s),l(t,r)},d(e){e&&_(t)}}}function j(e){let t;return{c(){t=a("div"),t.innerHTML='<navigation-notification-available-16px name="NotificationAvailable16" size="100%"></navigation-notification-available-16px>',o(t,"class","mc-stepper__icon")},m(e,r){i(e,t,r)},d(e){e&&_(t)}}}function E(e){let t,r,s,p,c,n,m,d,b,f,h,u,x,$,z=e[4](e[12],e[2])+"",E=e[10].label+"";function L(e,t){return 4&t&&(s=null),null==s&&(s=!!e[3](e[12],e[2])),s?j:e[10].isCurrent?C:void 0}let O=L(e,-1),A=O&&O(e);function D(){return e[7](e[10])}return{c(){t=a("li"),r=a("div"),A&&A.c(),p=g(),c=a("div"),n=a("span"),m=k(z),d=g(),b=a("span"),f=k(E),h=g(),o(r,"class","mc-stepper__indicator"),o(r,"aria-hidden","true"),o(n,"class","mc-stepper__title"),o(b,"class","mc-stepper__label"),o(c,"class","mc-stepper__detail"),o(t,"class",u="mc-stepper__item "+(e[10].isCurrent?"mc-stepper__item--current":"")+" "+(e[3](e[12],e[2])?"mc-stepper__item--validated":"")),w(t,"--steps",e[2].length),w(t,"--current",e[12]+1)},m(e,s){i(e,t,s),l(t,r),A&&A.m(r,null),l(t,p),l(t,c),l(c,n),l(n,m),l(c,d),l(c,b),l(b,f),l(t,h),x||($=v(t,"click",D),x=!0)},p(i,s){O!==(O=L(e=i,s))&&(A&&A.d(1),A=O&&O(e),A&&(A.c(),A.m(r,null))),4&s&&z!==(z=e[4](e[12],e[2])+"")&&y(m,z),4&s&&E!==(E=e[10].label+"")&&y(f,E),4&s&&u!==(u="mc-stepper__item "+(e[10].isCurrent?"mc-stepper__item--current":"")+" "+(e[3](e[12],e[2])?"mc-stepper__item--validated":""))&&o(t,"class",u),4&s&&w(t,"--steps",e[2].length)},d(e){e&&_(t),A&&A.d(),x=!1,$()}}}function L(e){let t,r,s,p=e[2],f=[];for(let t=0;t<p.length;t+=1)f[t]=E(z(e,p,t));let h=[{class:s="mc-stepper "+(e[0]?"mc-stepper--compact":"")+" "+(e[2].length>3?"mc-stepper--shrinked":"")},{"aria-label":"accessibilityLabels.stepperDescription"},e[1]],u={};for(let e=0;e<h.length;e+=1)u=c(u,h[e]);return{c(){t=a("nav"),r=a("ol");for(let e=0;e<f.length;e+=1)f[e].c();this.c=n,o(r,"class","mc-stepper__list"),m(t,u)},m(e,s){i(e,t,s),l(t,r);for(let e=0;e<f.length;e+=1)f[e]&&f[e].m(r,null)},p(e,[i]){if(60&i){let t;for(p=e[2],t=0;t<p.length;t+=1){const s=z(e,p,t);f[t]?f[t].p(s,i):(f[t]=E(s),f[t].c(),f[t].m(r,null))}for(;t<f.length;t+=1)f[t].d(1);f.length=p.length}m(t,u=d(h,[5&i&&s!==(s="mc-stepper "+(e[0]?"mc-stepper--compact":"")+" "+(e[2].length>3?"mc-stepper--shrinked":""))&&{class:s},{"aria-label":"accessibilityLabels.stepperDescription"},2&i&&e[1]]))},i:n,o:n,d(e){e&&_(t),b(f,e)}}}function O(e,t,r){let i,s;const p=["steps","compact"];let a=f(t,p),{steps:n}=t,{compact:o=!1}=t,m=new $(h(),u());function l(e){m.dispatch("step-changed",e)}return e.$$set=e=>{t=c(c({},t),x(e)),r(9,a=f(t,p)),"steps"in e&&r(6,n=e.steps),"compact"in e&&r(0,o=e.compact)},e.$$.update=()=>{64&e.$$.dirty&&r(2,i=n?JSON.parse(n):[]),r(1,s=Object.assign({},a)),2&e.$$.dirty&&delete s.class},[o,s,i,function(e,t){return e<t.findIndex((e=>e.isCurrent))},function(e,t){return`${e+1} / ${t.length}`},l,n,e=>l(e)]}class A extends e{constructor(e){super();const c=document.createElement("style");c.textContent='.mc-stepper{width:100%}.mc-stepper__list{display:-webkit-box;display:-ms-flexbox;display:flex;padding-left:0;margin-bottom:0;margin-top:0}.mc-stepper__item,.mc-stepper__link{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mc-stepper__item{-webkit-box-flex:1;-ms-flex:1;flex:1;position:relative}.mc-stepper__item::before,.mc-stepper__item::after{background-color:#999999;content:"";height:0.125rem;position:absolute;top:11px;width:calc(50% - 1.25rem);z-index:1}.mc-stepper__item::before{border-top-right-radius:1px;border-bottom-right-radius:1px;left:0}.mc-stepper__item::after{border-top-left-radius:1px;border-bottom-left-radius:1px;right:0}.mc-stepper__item:first-child::before,.mc-stepper__item:last-child::after{content:none}.mc-stepper__item--current .mc-stepper__indicator,.mc-stepper__item--validated .mc-stepper__indicator{border-color:#46a610}.mc-stepper__item--current .mc-stepper__detail,.mc-stepper__item--validated .mc-stepper__detail{font-weight:600}.mc-stepper__item--current::before{background-color:#46a610}.mc-stepper__item--current .mc-stepper__indicator{background-color:#46a610;color:#ffffff}.mc-stepper__item--current .mc-stepper__label{color:#000000}.mc-stepper__item--validated::before,.mc-stepper__item--validated:not(.mc-stepper__item--current)::after{background-color:#46a610}.mc-stepper__link{height:100%;text-decoration:none;width:100%}.mc-stepper__link:hover .mc-stepper__label,.mc-stepper__link:focus .mc-stepper__label{color:#46a610}.mc-stepper__indicator{font-size:0.875rem;line-height:1.1428571429;font-weight:600;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:2px solid #999999;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;height:1.5rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-bottom:0.5rem;position:relative;width:1.5rem;z-index:2}.mc-stepper__icon{fill:#46a610;max-width:100%}.mc-stepper__detail{font-size:0.875rem;line-height:1.2857142857;color:#666666;text-align:center;width:auto}.mc-stepper__title{display:none;color:#46a610}.mc-stepper--compact .mc-stepper__item{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding-bottom:1.25rem}.mc-stepper--compact .mc-stepper__item::before,.mc-stepper--compact .mc-stepper__item::after{bottom:0;border-radius:6px;height:0.25rem;top:auto}.mc-stepper--compact .mc-stepper__item::after{width:100%}.mc-stepper--compact .mc-stepper__item::before{z-index:2;width:calc(var(--current) * 100% / var(--steps))}.mc-stepper--compact .mc-stepper__item:not(.mc-stepper__item--current){display:none}.mc-stepper--compact .mc-stepper__indicator{display:none}.mc-stepper--compact .mc-stepper__detail{text-align:left}.mc-stepper--compact .mc-stepper__title{display:block;margin-bottom:0.25rem}@media screen and (max-width: 679px){.mc-stepper--shrinked .mc-stepper__item{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding-bottom:1.25rem}.mc-stepper--shrinked .mc-stepper__item::before,.mc-stepper--shrinked .mc-stepper__item::after{bottom:0;border-radius:6px;height:0.25rem;top:auto}.mc-stepper--shrinked .mc-stepper__item::after{width:100%}.mc-stepper--shrinked .mc-stepper__item::before{z-index:2;width:calc(var(--current) * 100% / var(--steps))}.mc-stepper--shrinked .mc-stepper__item:not(.mc-stepper__item--current){display:none}.mc-stepper--shrinked .mc-stepper__indicator{display:none}.mc-stepper--shrinked .mc-stepper__detail{text-align:left}.mc-stepper--shrinked .mc-stepper__title{display:block;margin-bottom:0.25rem}}.mc-stepper--compact .mc-stepper__item::before{content:""}',this.shadowRoot.appendChild(c),t(this,{target:this.shadowRoot,props:r(this.attributes),customElement:!0},O,L,p,{steps:6,compact:0},null),e&&(e.target&&i(e.target,this,e.anchor),e.props&&(this.$set(e.props),s()))}static get observedAttributes(){return["steps","compact"]}get steps(){return this.$$.ctx[6]}set steps(e){this.$$set({steps:e}),s()}get compact(){return this.$$.ctx[0]}set compact(e){this.$$set({compact:e}),s()}}export{A as default};
|
|
2
2
|
//# sourceMappingURL=Stepper.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stepper.js","sources":["../../../src/components/stepper/Stepper.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n import type { StepperItems } from './stepper.types';\n import { EventHandler } from '../../utilities/EventHandler';\n import {\n get_current_component,\n createEventDispatcher,\n } from 'svelte/internal';\n\n export let steps: string;\n export let compact = false;\n let eventHandler = new EventHandler(\n get_current_component(),\n createEventDispatcher(),\n );\n $: stepsObject = steps\n ? (JSON.parse(steps) as StepperItems[])\n : ([] as StepperItems[]);\n $: attributes = { ...$$restProps };\n $: delete attributes.class;\n\n function isStepValidated(\n index: number,\n stepsObject: StepperItems[],\n ): boolean {\n return (\n index < stepsObject.findIndex((step: StepperItems) => step.isCurrent)\n );\n }\n\n function getStepNumber(index: number, stepsObject: StepperItems[]): string {\n return `${index + 1} / ${stepsObject.length}`;\n }\n\n function stepChanged(step: StepperItems): void {\n eventHandler.dispatch('step-changed', step);\n }\n</script>\n\n<nav\n class=\"mc-stepper {compact ? 'mc-stepper--compact' : ''} {stepsObject.length >\n 3\n ? 'mc-stepper--shrinked'\n : ''}\"\n aria-label=\"accessibilityLabels.stepperDescription\"\n {...attributes}\n>\n <ol class=\"mc-stepper__list\">\n {#each stepsObject as step, index}\n <li\n class=\"mc-stepper__item {step.isCurrent\n ? 'mc-stepper__item--current'\n : ''} {isStepValidated(index, stepsObject)\n ? 'mc-stepper__item--validated'\n : ''}\"\n on:click={() => stepChanged(step)}\n >\n <div class=\"mc-stepper__indicator\" aria-hidden=\"true\">\n {#if isStepValidated(index, stepsObject)}\n <div class=\"mc-stepper__icon\">\n <navigation-notification-available-16px\n name=\"NotificationAvailable16\"\n size=\"100%\"\n />\n </div>\n {:else if step.isCurrent}\n <span>{index + 1}</span>\n {/if}\n </div>\n <div class=\"mc-stepper__detail\">\n <span class=\"mc-stepper__title\"\n >{getStepNumber(index, stepsObject)}\n </span>\n <span class=\"mc-stepper__label\">{step.label}</span>\n </div>\n </li>\n {/each}\n </ol>\n</nav>\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n @import '@mozaic-ds/styles/components/_c.stepper';\n</style>\n"],"names":["t_value","ctx","insert","target","span","anchor","div","t3_value","label","isCurrent","create_if_block_1","attr","li","li_class_value","append","div0","div1","span0","span1","set_data","t1","t1_value","dirty","t3","
|
|
1
|
+
{"version":3,"file":"Stepper.js","sources":["../../../src/components/stepper/Stepper.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n import type { StepperItems } from './stepper.types';\n import { EventHandler } from '../../utilities/EventHandler';\n import {\n get_current_component,\n createEventDispatcher,\n } from 'svelte/internal';\n\n export let steps: string;\n export let compact = false;\n let eventHandler = new EventHandler(\n get_current_component(),\n createEventDispatcher(),\n );\n $: stepsObject = steps\n ? (JSON.parse(steps) as StepperItems[])\n : ([] as StepperItems[]);\n $: attributes = { ...$$restProps };\n $: delete attributes.class;\n\n function isStepValidated(\n index: number,\n stepsObject: StepperItems[],\n ): boolean {\n return (\n index < stepsObject.findIndex((step: StepperItems) => step.isCurrent)\n );\n }\n\n function getStepNumber(index: number, stepsObject: StepperItems[]): string {\n return `${index + 1} / ${stepsObject.length}`;\n }\n\n function stepChanged(step: StepperItems): void {\n eventHandler.dispatch('step-changed', step);\n }\n</script>\n\n<nav\n class=\"mc-stepper {compact ? 'mc-stepper--compact' : ''} {stepsObject.length >\n 3\n ? 'mc-stepper--shrinked'\n : ''}\"\n aria-label=\"accessibilityLabels.stepperDescription\"\n {...attributes}\n>\n <ol class=\"mc-stepper__list\">\n {#each stepsObject as step, index}\n <li\n class=\"mc-stepper__item {step.isCurrent\n ? 'mc-stepper__item--current'\n : ''} {isStepValidated(index, stepsObject)\n ? 'mc-stepper__item--validated'\n : ''}\"\n style=\"--steps: {stepsObject.length}; --current: {index + 1};\"\n on:click={() => stepChanged(step)}\n >\n <div class=\"mc-stepper__indicator\" aria-hidden=\"true\">\n {#if isStepValidated(index, stepsObject)}\n <div class=\"mc-stepper__icon\">\n <navigation-notification-available-16px\n name=\"NotificationAvailable16\"\n size=\"100%\"\n />\n </div>\n {:else if step.isCurrent}\n <span>{index + 1}</span>\n {/if}\n </div>\n <div class=\"mc-stepper__detail\">\n <span class=\"mc-stepper__title\"\n >{getStepNumber(index, stepsObject)}\n </span>\n <span class=\"mc-stepper__label\">{step.label}</span>\n </div>\n </li>\n {/each}\n </ol>\n</nav>\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n @import '@mozaic-ds/styles/components/_c.stepper';\n\n .mc-stepper--compact {\n .mc-stepper__item {\n &::before {\n content: '';\n }\n }\n }\n</style>\n"],"names":["t_value","ctx","insert","target","span","anchor","div","t3_value","label","isCurrent","create_if_block_1","attr","li","li_class_value","set_style","length","append","div0","div1","span0","span1","set_data","t1","t1_value","dirty","t3","i","nav","ol","class","nav_class_value","steps","$$props","compact","eventHandler","EventHandler","get_current_component","createEventDispatcher","stepChanged","step","dispatch","$$invalidate","stepsObject","JSON","parse","attributes","Object","assign","$$restProps","index","findIndex"],"mappings":"4UAoEmBA,EAAAC,MAAQ,EAAC,yCAAhBC,EAAuBC,EAAAC,EAAAC,uPAPvBH,EAKKC,EAAAG,EAAAD,mEAOHJ,EAAa,GAACA,EAAK,IAAEA,EAAW,IAAA,GAEHM,EAAAN,MAAKO,MAAK,sDAftCP,EAAe,GAACA,EAAK,IAAEA,EAAW,SAO7BA,MAAKQ,UAASC,OAAd,yUAhBaC,EAAAC,EAAA,QAAAC,EAAA,qBAAAZ,MAAKQ,UAC1B,4BACA,IAAK,KAAAR,EAAgB,GAAAA,MAAOA,EAAW,IACvC,8BACA,KACaa,EAAAF,EAAA,UAAAX,KAAYc,QAAqBD,EAAAF,EAAA,YAAAX,MAAQ,WAN5DC,EA2BIC,EAAAS,EAAAP,GAlBFW,EAWKJ,EAAAK,yBACLD,EAKKJ,EAAAM,GAJHF,EAEME,EAAAC,iBACNH,EAAkDE,EAAAE,+HAF9CnB,EAAa,GAACA,EAAK,IAAEA,EAAW,IAAA,KAAAoB,EAAAC,EAAAC,GAEH,EAAAC,GAAAjB,KAAAA,EAAAN,MAAKO,MAAK,KAAAa,EAAAI,EAAAlB,GAxBpB,EAAAiB,GAAAX,KAAAA,EAAA,qBAAAZ,MAAKQ,UAC1B,4BACA,IAAK,KAAAR,EAAgB,GAAAA,MAAOA,EAAW,IACvC,8BACA,0BACaa,EAAAF,EAAA,UAAAX,KAAYc,oEAP1Bd,EAAW,wBAAhBc,OAAIW,GAAA,kDARWzB,EAAO,GAAG,sBAAwB,SAAKA,EAAW,GAACc,OACtE,EACI,uBACA,6DAEAd,EAAU,8KANhBC,EAwCKC,EAAAwB,EAAAtB,GAhCHW,EA+BIW,EAAAC,mFA9BK3B,EAAW,WAAhBc,OAAIW,GAAA,EAAA,iHAAJX,6CARed,EAAO,GAAG,sBAAwB,SAAKA,EAAW,GAACc,OACtE,EACI,uBACA,MAAE,CAAAc,MAAAC,gEAEF7B,EAAU,+GApCH8B,GAAaC,GACbC,QAAAA,GAAU,GAAKD,EACtBE,EAAmB,IAAAC,EACrBC,IACAC,KAqBO,SAAAC,EAAYC,GACnBL,EAAaM,SAAS,eAAgBD,mJApBvCE,EAAA,EAAEC,EAAcX,EACZY,KAAKC,MAAMb,GAAK,QAElBc,EAALC,OAAAC,UAAuBC,yBACXH,EAAWhB,uBAGnBoB,EACAP,UAGEO,EAAQP,EAAYQ,WAAWX,GAAuBA,EAAK9B,sBAIxCwC,EAAeP,GAC1B,MAAA,GAAAO,EAAQ,OAAOP,EAAY3B,cAyBjBwB,GAAAD,EAAYC"}
|
|
@@ -54,6 +54,7 @@
|
|
|
54
54
|
: ''} {isStepValidated(index, stepsObject)
|
|
55
55
|
? 'mc-stepper__item--validated'
|
|
56
56
|
: ''}"
|
|
57
|
+
style="--steps: {stepsObject.length}; --current: {index + 1};"
|
|
57
58
|
on:click={() => stepChanged(step)}
|
|
58
59
|
>
|
|
59
60
|
<div class="mc-stepper__indicator" aria-hidden="true">
|
|
@@ -82,4 +83,12 @@
|
|
|
82
83
|
<style lang="scss">
|
|
83
84
|
@import '@mozaic-ds/styles/settings-tools/_all-settings';
|
|
84
85
|
@import '@mozaic-ds/styles/components/_c.stepper';
|
|
86
|
+
|
|
87
|
+
.mc-stepper--compact {
|
|
88
|
+
.mc-stepper__item {
|
|
89
|
+
&::before {
|
|
90
|
+
content: '';
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
85
94
|
</style>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stepper.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/stepper/Stepper.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;;AAGnD,wBAsBU;
|
|
1
|
+
{"version":3,"file":"Stepper.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/stepper/Stepper.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;;AAGnD,wBAsBU;AAuCV,eAAO,MAAM,OAAO,uCAAoB,CAAC;AAGzC,eAAO,MAAM,OAAO,uCAAoB,CAAC"}
|