@mozaic-ds/web-components 0.28.1-beta.0 → 0.29.0

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.
Files changed (37) hide show
  1. package/package.json +1 -1
  2. package/public/adeo/components/autocomplete/Autocomplete.js +1 -1
  3. package/public/adeo/components/autocomplete/Autocomplete.js.map +1 -1
  4. package/public/adeo/components/autocomplete/Autocomplete.svelte +41 -21
  5. package/public/adeo/components/modal/Modal.js +1 -1
  6. package/public/adeo/components/modal/Modal.js.map +1 -1
  7. package/public/adeo/components/modal/Modal.svelte +10 -7
  8. package/public/adeo/components/sidebar/sidebar-feature-group.nested.js +1 -1
  9. package/public/adeo/components/sidebar/sidebar-feature-group.nested.js.map +1 -1
  10. package/public/adeo/components/sidebar/sidebar-feature-group.nested.svelte +5 -0
  11. package/public/adeo/components/sidebar/sidebar-segment.nested.js +1 -1
  12. package/public/adeo/components/sidebar/sidebar-segment.nested.js.map +1 -1
  13. package/public/adeo/components/sidebar/sidebar-segment.nested.svelte +3 -1
  14. package/public/bricoman/components/autocomplete/Autocomplete.js +1 -1
  15. package/public/bricoman/components/autocomplete/Autocomplete.js.map +1 -1
  16. package/public/bricoman/components/autocomplete/Autocomplete.svelte +41 -21
  17. package/public/bricoman/components/modal/Modal.js +1 -1
  18. package/public/bricoman/components/modal/Modal.js.map +1 -1
  19. package/public/bricoman/components/modal/Modal.svelte +10 -7
  20. package/public/bricoman/components/sidebar/sidebar-feature-group.nested.js +1 -1
  21. package/public/bricoman/components/sidebar/sidebar-feature-group.nested.js.map +1 -1
  22. package/public/bricoman/components/sidebar/sidebar-feature-group.nested.svelte +5 -0
  23. package/public/bricoman/components/sidebar/sidebar-segment.nested.js +1 -1
  24. package/public/bricoman/components/sidebar/sidebar-segment.nested.js.map +1 -1
  25. package/public/bricoman/components/sidebar/sidebar-segment.nested.svelte +3 -1
  26. package/public/components/autocomplete/Autocomplete.js +1 -1
  27. package/public/components/autocomplete/Autocomplete.js.map +1 -1
  28. package/public/components/autocomplete/Autocomplete.svelte +41 -21
  29. package/public/components/modal/Modal.js +1 -1
  30. package/public/components/modal/Modal.js.map +1 -1
  31. package/public/components/modal/Modal.svelte +10 -7
  32. package/public/components/sidebar/sidebar-feature-group.nested.js +1 -1
  33. package/public/components/sidebar/sidebar-feature-group.nested.js.map +1 -1
  34. package/public/components/sidebar/sidebar-feature-group.nested.svelte +5 -0
  35. package/public/components/sidebar/sidebar-segment.nested.js +1 -1
  36. package/public/components/sidebar/sidebar-segment.nested.js.map +1 -1
  37. package/public/components/sidebar/sidebar-segment.nested.svelte +3 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mozaic-ds/web-components",
3
- "version": "0.28.1-beta.0",
3
+ "version": "0.29.0",
4
4
  "description": "Web component Mozaic DS implementation",
5
5
  "license": "MIT",
6
6
  "engines": {
@@ -1,2 +1,2 @@
1
- import{S as t,i as e,a as l,b as a,f as i,s,K as n,L as o,c as r,e as c,d,E as u,n as m,h as p,M as h,j as g,t as $,k as x,F as f,N as b,x as v,B as w,z as y,A as _,O as k,l as z,m as q,G as j,P as S,o as C,q as N,r as O,u as T,Q as E,R as J,T as L,D as M,C as R,U,V as Y}from"../../index-c222d0b7.js";import{E as A}from"../../EventHandler-f7ee47ca.js";import{c as H}from"../../ClickOutside-63071e7a.js";import B from"../tag/Tag.nested.js";import D from"../loader/Loader.nested.js";import F from"../textinput/Textinput.nested.js";import G from"../listbox/Listbox.nested.js";function K(t,e,l){const a=t.slice();return a[73]=e[l],a}function P(t,e,l){const a=t.slice();return a[73]=e[l],a[77]=l,a}function Q(t){let e,l,a={id:t[1]?t[1]:`autocompleteTag-${t[33]}`,class:"mc-autocomplete__tag",label:t[32](),size:"s",type:"removable",dark:!1,disabled:!1,href:"",name:"",value:"",selected:!1};return e=new B({props:a}),t[52](e),e.$on("tag-removed",t[34]),{c(){u(e.$$.fragment)},m(t,a){f(e,t,a),l=!0},p(t,l){const a={};2&l[0]&&(a.id=t[1]?t[1]:`autocompleteTag-${t[33]}`),2&l[1]&&(a.label=t[32]()),e.$set(a)},i(t){l||(w(e.$$.fragment,t),l=!0)},o(t){y(e.$$.fragment,t),l=!1},d(l){t[52](null),j(e,l)}}}function V(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){f(e,t,a),l=!0},i(t){l||(w(e.$$.fragment,t),l=!0)},o(t){y(e.$$.fragment,t),l=!1},d(t){j(e,t)}}}function W(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=v(e,"click",E(t[57])),l=!0)},p:m,d(t){t&&q(e),l=!1,i()}}}function I(t){let e,l,a;function i(e){t[58](e)}let s={items:JSON.stringify(t[31]),name:t[7],multiple:t[10],isfiltered:t[27],emptysearchlabel:t[11],maxwidth:t[0],datatextexpr:t[12],datavalueexpr:t[13],selectall:t[18],labelselectall:t[19],overlay:!0,width:t[0]};return void 0!==t[20]&&(s.value=t[20]),e=new G({props:s}),n.push((()=>o(e,"value",i))),e.$on("change",t[36]),e.$on("scrollend",t[40]),e.$on("select-all",t[41]),{c(){u(e.$$.fragment)},m(t,l){f(e,t,l),a=!0},p(t,a){const i={};1&a[1]&&(i.items=JSON.stringify(t[31])),128&a[0]&&(i.name=t[7]),1024&a[0]&&(i.multiple=t[10]),134217728&a[0]&&(i.isfiltered=t[27]),2048&a[0]&&(i.emptysearchlabel=t[11]),1&a[0]&&(i.maxwidth=t[0]),4096&a[0]&&(i.datatextexpr=t[12]),8192&a[0]&&(i.datavalueexpr=t[13]),262144&a[0]&&(i.selectall=t[18]),524288&a[0]&&(i.labelselectall=t[19]),1&a[0]&&(i.width=t[0]),!l&&1048576&a[0]&&(l=!0,i.value=t[20],k((()=>l=!1))),e.$set(i)},i(t){a||(w(e.$$.fragment,t),a=!0)},o(t){y(e.$$.fragment,t),a=!1},d(t){j(e,t)}}}function X(t){let e,l,i=t[28],s=[];for(let e=0;e<i.length;e+=1)s[e]=lt(P(t,i,e));let n=t[20].length>t[16]&&at(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);x(e,l),n&&n.m(e,null)},p(t,a){if(268501e3&a[0]|2048&a[1]){let n;for(i=t[28],n=0;n<i.length;n+=1){const o=P(t,i,n);s[n]?s[n].p(o,a):(s[n]=lt(o),s[n].c(),s[n].m(e,l))}for(;n<s.length;n+=1)s[n].d(1);s.length=i.length}t[20].length>t[16]?n?n.p(t,a):(n=at(t),n.c(),n.m(e,null)):n&&(n.d(1),n=null)},d(t){t&&q(e),J(s,t),n&&n.d()}}}function Z(t){let e;function l(t,e){return t[3]?et:tt}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 tt(t){let e,l,i,s,n;function o(){return t[59](t[73])}return{c(){e=c("m-tag"),M(e,"id",l=t[73].id),M(e,"label",i=t[73].label),M(e,"size","s"),M(e,"type","removable")},m(t,l){a(t,e,l),s||(n=v(e,"tag-removed",o),s=!0)},p(a,s){t=a,268435456&s[0]&&l!==(l=t[73].id)&&M(e,"id",l),268435456&s[0]&&i!==(i=t[73].label)&&M(e,"label",i)},d(t){t&&q(e),s=!1,n()}}}function et(t){let e,l,i;return{c(){e=c("m-tag"),M(e,"type","link"),M(e,"id",l=t[73].id),M(e,"label",i=t[73].label),M(e,"size","s"),M(e,"dark",!0)},m(t,l){a(t,e,l)},p(t,a){268435456&a[0]&&l!==(l=t[73].id)&&M(e,"id",l),268435456&a[0]&&i!==(i=t[73].label)&&M(e,"label",i)},d(t){t&&q(e)}}}function lt(t){let e,l=t[77]<t[16]&&Z(t);return{c(){l&&l.c(),e=L()},m(t,i){l&&l.m(t,i),a(t,e,i)},p(t,a){t[77]<t[16]?l?l.p(t,a):(l=Z(t),l.c(),l.m(e.parentNode,e)):l&&(l.d(1),l=null)},d(t){l&&l.d(t),t&&q(e)}}}function at(t){let e,l,i,s,n;return{c(){e=c("div"),l=c("m-tag"),M(l,"id","id-tag"),M(l,"label",i="("+t[20].length+") "+t[15]+" "),M(l,"size","s"),M(l,"type","link"),p(e,"class","tag-selected")},m(i,o){a(i,e,o),x(e,l),s||(n=v(e,"click",t[60]),s=!0)},p(t,e){1081344&e[0]&&i!==(i="("+t[20].length+") "+t[15]+" ")&&M(l,"label",i)},d(t){t&&q(e),s=!1,n()}}}function it(t){let e,l,i,s,n,o,r=t[28],d=[];for(let e=0;e<r.length;e+=1)d[e]=ot(K(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"),M(l,"title",t[14]),M(l,"layertitletag","h3"),M(l,"isopen",t[29])},m(r,c){a(r,e,c),x(e,l),x(l,i),x(i,s);for(let t=0;t<d.length;t+=1)d[t]&&d[t].m(s,null);n||(o=v(l,"layer-closed",t[62]),n=!0)},p(t,e){if(268435464&e[0]|2048&e[1]){let l;for(r=t[28],l=0;l<r.length;l+=1){const a=K(t,r,l);d[l]?d[l].p(a,e):(d[l]=ot(a),d[l].c(),d[l].m(s,null))}for(;l<d.length;l+=1)d[l].d(1);d.length=r.length}16384&e[0]&&M(l,"title",t[14]),536870912&e[0]&&M(l,"isopen",t[29])},d(t){t&&q(e),J(d,t),n=!1,o()}}}function st(t){let e,l,i,s,n;function o(){return t[61](t[73])}return{c(){e=c("m-tag"),M(e,"id",l=t[73].id),M(e,"label",i=t[73].label),M(e,"size","s"),M(e,"type","removable")},m(t,l){a(t,e,l),s||(n=v(e,"tag-removed",o),s=!0)},p(a,s){t=a,268435456&s[0]&&l!==(l=t[73].id)&&M(e,"id",l),268435456&s[0]&&i!==(i=t[73].label)&&M(e,"label",i)},d(t){t&&q(e),s=!1,n()}}}function nt(t){let e,l,i;return{c(){e=c("m-tag"),M(e,"type","text"),M(e,"id",l=t[73].id),M(e,"label",i=t[73].label),M(e,"size","s")},m(t,l){a(t,e,l)},p(t,a){268435456&a[0]&&l!==(l=t[73].id)&&M(e,"id",l),268435456&a[0]&&i!==(i=t[73].label)&&M(e,"label",i)},d(t){t&&q(e)}}}function ot(t){let e,l;function i(t,e){return t[3]?nt:st}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),x(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 rt(t){let e,l,i,s,C,N,O,T,E,J,L,M,U,Y,A,B,D,G,K,P=t[10]&&t[20].length>0&&!t[17]&&Q(t);function Z(e){t[53](e)}let tt={classinput:"mc-autocomplete__trigger",name:t[6],placeholder:t[2],inputtype:"text",isinvalid:t[5],disabled:t[3],size:t[4],required:t[9],iconname:"navigation-display-search-24px",rightalign:!1,isvalid:!1,min:"",max:""};void 0!==t[30]&&(tt.value=t[30]),s=new F({props:tt}),n.push((()=>o(s,"value",Z))),s.$on("input",t[39]),s.$on("click",t[54]),s.$on("change",t[55]),s.$on("blur",t[56]);let et=t[8]&&V(),lt=null!=t[30]&&""!=t[30]&&!t[3]&&W(t),at=t[22]&&I(t),st=t[10]&&t[17]&&X(t),nt=t[10]&&t[17]&&it(t),ot=[{class:"mc-autocomplete"},{style:B="--autocomplete-tag-width: "+t[26]+"; --autocomplete-width: "+t[0]+";"},t[23]],rt={};for(let t=0;t<ot.length;t+=1)rt=r(rt,ot[t]);return{c(){e=c("div"),l=c("div"),P&&P.c(),i=d(),u(s.$$.fragment),N=d(),O=c("div"),et&&et.c(),T=d(),lt&&lt.c(),E=d(),at&&at.c(),J=d(),st&&st.c(),L=d(),M=c("span"),U=d(),Y=c("span"),A=d(),nt&&nt.c(),this.c=m,p(O,"class","mc-autocomplete__tools"),p(l,"class","mc-autocomplete__main"),p(M,"class","mc-autocomplete__loader"),h(M,"display","none"),p(Y,"class","mc-text-input mc-autocomplete__trigger"),h(Y,"display","none"),g(e,rt),$(e,"mc-autocomplete--multi",t[10])},m(n,o){a(n,e,o),x(e,l),P&&P.m(l,null),x(l,i),f(s,l,null),x(l,N),x(l,O),et&&et.m(O,null),x(O,T),lt&&lt.m(O,null),x(e,E),at&&at.m(e,null),x(e,J),st&&st.m(e,null),x(e,L),x(e,M),x(e,U),x(e,Y),x(e,A),nt&&nt.m(e,null),t[63](e),D=!0,G||(K=[b(H.call(null,e)),v(e,"outclick",t[35])],G=!0)},p(t,a){t[10]&&t[20].length>0&&!t[17]?P?(P.p(t,a),1180672&a[0]&&w(P,1)):(P=Q(t),P.c(),w(P,1),P.m(l,i)):P&&(R(),y(P,1,1,(()=>{P=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]),512&a[0]&&(n.required=t[9]),!C&&1073741824&a[0]&&(C=!0,n.value=t[30],k((()=>C=!1))),s.$set(n),t[8]?et?256&a[0]&&w(et,1):(et=V(),et.c(),w(et,1),et.m(O,T)):et&&(R(),y(et,1,1,(()=>{et=null})),_()),null==t[30]||""==t[30]||t[3]?lt&&(lt.d(1),lt=null):lt?lt.p(t,a):(lt=W(t),lt.c(),lt.m(O,null)),t[22]?at?(at.p(t,a),4194304&a[0]&&w(at,1)):(at=I(t),at.c(),w(at,1),at.m(e,J)):at&&(R(),y(at,1,1,(()=>{at=null})),_()),t[10]&&t[17]?st?st.p(t,a):(st=X(t),st.c(),st.m(e,L)):st&&(st.d(1),st=null),t[10]&&t[17]?nt?nt.p(t,a):(nt=it(t),nt.c(),nt.m(e,null)):nt&&(nt.d(1),nt=null),g(e,rt=z(ot,[{class:"mc-autocomplete"},(!D||67108865&a[0]&&B!==(B="--autocomplete-tag-width: "+t[26]+"; --autocomplete-width: "+t[0]+";"))&&{style:B},8388608&a[0]&&t[23]])),$(e,"mc-autocomplete--multi",t[10])},i(t){D||(w(P),w(s.$$.fragment,t),w(et),w(at),D=!0)},o(t){y(P),y(s.$$.fragment,t),y(et),y(at),D=!1},d(l){l&&q(e),P&&P.d(),j(s),et&&et.d(),lt&&lt.d(),at&&at.d(),st&&st.d(),nt&&nt.d(),t[63](null),G=!1,S(K)}}}function ct(t,e,l){let a,i,s,o,c,d,u;const m=["maxwidth","tagid","taglabel","placeholder","filter","nofilter","disabled","size","isinvalid","inputvalue","id","name","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:x=""}=e,{placeholder:f}=e,{filter:b=!0}=e,{nofilter:v=!1}=e,{disabled:w=!1}=e,{size:y="m"}=e,{isinvalid:_}=e,{inputvalue:k}=e,{id:z}=e,{name:q}=e,{loading:j=!1}=e,{required:S=!1}=e,{items:E}=e,{value:J}=e,{open:L=!1}=e,{multiple:M=!1}=e,{emptysearchlabel:R="No results found"}=e,{datatextexpr:H="label"}=e,{datavalueexpr:B="value"}=e,{nosort:D=!1}=e,{layertitle:F="Title layer"}=e,{showmoretagslabel:G="Show more"}=e,{maxnumbertoshowtags:K=12}=e,{alltags:P=!1}=e,{selectall:Q=!1}=e,{labelselectall:V="Select all"}=e;const W=Math.random();let I,X,Z,tt=new A(N(),O()),et="0px",lt=!1,at=[],it=null;function st(){w||(l(20,o=M?[]:""),nt(),tt.dispatch("clear",!0))}function nt(){l(22,d=!1),M&&!D?function(){Z=i;const t=ot();Z.sort(((e,l)=>{const a=t.includes(e),i=t.includes(l);return a===i?e[B]-l[B]:a<i?1:-1})),l(31,s=Z)}():l(31,s=i)}function ot(t){const e=t||o;return i.filter((t=>M?e.includes(t[B]):e===t[B]))}function rt(){l(29,it=!0)}function ct(){l(29,it=null)}function dt(t){l(20,o=o.filter((e=>e!==t))),tt.dispatch("onchange",o)}return t.$$set=t=>{e=r(r({},e),T(t)),l(72,h=C(e,m)),"maxwidth"in t&&l(0,g=t.maxwidth),"tagid"in t&&l(1,$=t.tagid),"taglabel"in t&&l(43,x=t.taglabel),"placeholder"in t&&l(2,f=t.placeholder),"filter"in t&&l(44,b=t.filter),"nofilter"in t&&l(45,v=t.nofilter),"disabled"in t&&l(3,w=t.disabled),"size"in t&&l(4,y=t.size),"isinvalid"in t&&l(5,_=t.isinvalid),"inputvalue"in t&&l(46,k=t.inputvalue),"id"in t&&l(6,z=t.id),"name"in t&&l(7,q=t.name),"loading"in t&&l(8,j=t.loading),"required"in t&&l(9,S=t.required),"items"in t&&l(47,E=t.items),"value"in t&&l(48,J=t.value),"open"in t&&l(49,L=t.open),"multiple"in t&&l(10,M=t.multiple),"emptysearchlabel"in t&&l(11,R=t.emptysearchlabel),"datatextexpr"in t&&l(12,H=t.datatextexpr),"datavalueexpr"in t&&l(13,B=t.datavalueexpr),"nosort"in t&&l(50,D=t.nosort),"layertitle"in t&&l(14,F=t.layertitle),"showmoretagslabel"in t&&l(15,G=t.showmoretagslabel),"maxnumbertoshowtags"in t&&l(16,K=t.maxnumbertoshowtags),"alltags"in t&&l(17,P=t.alltags),"selectall"in t&&l(18,Q=t.selectall),"labelselectall"in t&&l(19,V=t.labelselectall)},t.$$.update=()=>{if(32768&t.$$.dirty[1]&&l(30,a=k),65536&t.$$.dirty[1]&&l(21,i=E?JSON.parse(E):[]),2097152&t.$$.dirty[0]&&l(31,s=i),1024&t.$$.dirty[0]|131072&t.$$.dirty[1]&&l(20,o=!J&&M?[]:J?JSON.parse(J):J),1048576&t.$$.dirty[0]|4096&t.$$.dirty[1]&&l(32,c=()=>o.length.toString()+" "+x),1048576&t.$$.dirty[0]&&async function(t){try{if(await U(),l(28,at=ot(t)),M)l(51,X=t);else{const t=at.map((t=>t[H]));l(30,a=t.join(", "))}}catch(t){console.error(t)}}(o),1048576&t.$$.dirty[1]&&async function(t){var e;try{await U(),l(26,et=I&&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)}}(X),262144&t.$$.dirty[1]&&l(22,d=L),4194304&t.$$.dirty[0]){const t=d?"open":"close";tt.dispatch(t,d)}l(23,u=Object.assign({},h)),8388608&t.$$.dirty[0]&&delete u.class},[g,$,f,w,y,_,z,q,j,S,M,R,H,B,F,G,K,P,Q,V,o,i,d,u,p,I,et,lt,at,it,a,s,c,W,st,nt,function(){tt.dispatch("onchange",o),M||nt()},rt,ct,function(t){const e=t.target.value;!function(t){tt.dispatch("oninput",t)}(e),function(t){!v&&b&&(t.length?l(31,s=i.filter((e=>e[H].toUpperCase().includes(t.toUpperCase())))):l(31,s=i),l(27,lt=!s.length),tt.dispatch("onfilter",s))}(e)},function(){tt.dispatch("scrollend",!0)},function(t){tt.dispatch("select-all",t.detail)},dt,x,b,v,k,E,J,L,D,X,function(t){n[t?"unshift":"push"]((()=>{I=t,l(25,I)}))},function(t){a=t,l(30,a),l(46,k)},()=>l(22,d=!0),function(e){Y.call(this,t,e)},function(e){Y.call(this,t,e)},()=>{l(30,a=""),l(31,s=i),l(27,lt=!1),M||st()},function(t){o=t,l(20,o),l(48,J),l(10,M)},t=>dt(t.id),()=>rt(),t=>dt(t.id),()=>ct(),function(t){n[t?"unshift":"push"]((()=>{p=t,l(24,p)}))}]}class dt 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:var(--autocomplete-min-width, 6rem);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:var(--autocomplete-tag-z-index, 2)}.mc-autocomplete__tag{left:2.75rem}.mc-autocomplete__trigger{overflow:hidden;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;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 #758992;box-shadow:0 0 0 2px #758992}.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}.mc-listbox--overlay{top:calc(100% + 4px)}",this.shadowRoot.appendChild(n),e(this,{target:this.shadowRoot,props:l(this.attributes),customElement:!0},ct,rt,s,{maxwidth:0,tagid:1,taglabel:43,placeholder:2,filter:44,nofilter:45,disabled:3,size:4,isinvalid:5,inputvalue:46,id:6,name:7,loading:8,required:9,items:47,value:48,open:49,multiple:10,emptysearchlabel:11,datatextexpr:12,datavalueexpr:13,nosort:50,layertitle:14,showmoretagslabel:15,maxnumbertoshowtags:16,alltags:17,selectall:18,labelselectall:19},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","name","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[43]}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[44]}set filter(t){this.$$set({filter:t}),i()}get nofilter(){return this.$$.ctx[45]}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[46]}set inputvalue(t){this.$$set({inputvalue:t}),i()}get id(){return this.$$.ctx[6]}set id(t){this.$$set({id:t}),i()}get name(){return this.$$.ctx[7]}set name(t){this.$$set({name:t}),i()}get loading(){return this.$$.ctx[8]}set loading(t){this.$$set({loading:t}),i()}get required(){return this.$$.ctx[9]}set required(t){this.$$set({required:t}),i()}get items(){return this.$$.ctx[47]}set items(t){this.$$set({items:t}),i()}get value(){return this.$$.ctx[48]}set value(t){this.$$set({value:t}),i()}get open(){return this.$$.ctx[49]}set open(t){this.$$set({open:t}),i()}get multiple(){return this.$$.ctx[10]}set multiple(t){this.$$set({multiple:t}),i()}get emptysearchlabel(){return this.$$.ctx[11]}set emptysearchlabel(t){this.$$set({emptysearchlabel:t}),i()}get datatextexpr(){return this.$$.ctx[12]}set datatextexpr(t){this.$$set({datatextexpr:t}),i()}get datavalueexpr(){return this.$$.ctx[13]}set datavalueexpr(t){this.$$set({datavalueexpr:t}),i()}get nosort(){return this.$$.ctx[50]}set nosort(t){this.$$set({nosort:t}),i()}get layertitle(){return this.$$.ctx[14]}set layertitle(t){this.$$set({layertitle:t}),i()}get showmoretagslabel(){return this.$$.ctx[15]}set showmoretagslabel(t){this.$$set({showmoretagslabel:t}),i()}get maxnumbertoshowtags(){return this.$$.ctx[16]}set maxnumbertoshowtags(t){this.$$set({maxnumbertoshowtags:t}),i()}get alltags(){return this.$$.ctx[17]}set alltags(t){this.$$set({alltags:t}),i()}get selectall(){return this.$$.ctx[18]}set selectall(t){this.$$set({selectall:t}),i()}get labelselectall(){return this.$$.ctx[19]}set labelselectall(t){this.$$set({labelselectall:t}),i()}}export{dt as default};
1
+ import{S as e,i as t,a as l,b as a,f as i,s,K as n,L as o,c as r,e as c,d,E as u,n as m,h as p,M as h,j as g,t as $,k as f,F as x,N as b,x as v,B as w,z as y,A as _,O as k,l as z,m as q,G as j,P as S,o as C,q as N,r as O,u as T,Q as E,C as J,R as L,T as M,D as R,U,V as Y}from"../../index-c222d0b7.js";import{E as A}from"../../EventHandler-f7ee47ca.js";import{c as B}from"../../ClickOutside-63071e7a.js";import H from"../tag/Tag.nested.js";import D from"../loader/Loader.nested.js";import F from"../textinput/Textinput.nested.js";import G from"../listbox/Listbox.nested.js";function K(e,t,l){const a=e.slice();return a[74]=t[l],a}function P(e,t,l){const a=e.slice();return a[74]=t[l],a[78]=l,a}function Q(e){let t,l,i,s={id:e[1]?e[1]:`autocompleteTag-${e[33]}`,label:e[32](),size:"s",type:"removable",dark:!1,disabled:!1,href:"",name:"",value:"",selected:!1};return l=new H({props:s}),e[52](l),l.$on("tag-removed",e[34]),{c(){t=c("div"),u(l.$$.fragment),p(t,"class","mc-autocomplete__tag")},m(e,s){a(e,t,s),x(l,t,null),i=!0},p(e,t){const a={};2&t[0]&&(a.id=e[1]?e[1]:`autocompleteTag-${e[33]}`),2&t[1]&&(a.label=e[32]()),l.$set(a)},i(e){i||(w(l.$$.fragment,e),i=!0)},o(e){y(l.$$.fragment,e),i=!1},d(a){a&&q(t),e[52](null),j(l)}}}function V(e){let t,l;return t=new D({props:{size:"s",theme:"primary",text:"",class:"mc-autocomplete__loader"}}),{c(){u(t.$$.fragment)},m(e,a){x(t,e,a),l=!0},i(e){l||(w(t.$$.fragment,e),l=!0)},o(e){y(t.$$.fragment,e),l=!1},d(e){j(t,e)}}}function W(e){let t,l,i;return{c(){t=c("button"),t.innerHTML='<navigation-control-tag--cross-24px></navigation-control-tag--cross-24px> \n <span class="mc-autocomplete__clear-text">Clear</span>',p(t,"class","mc-autocomplete__clear"),p(t,"type","button")},m(s,n){a(s,t,n),l||(i=v(t,"click",E(e[57])),l=!0)},p:m,d(e){e&&q(t),l=!1,i()}}}function I(e){let t,l,a;function i(t){e[58](t)}let s={items:JSON.stringify(e[31]),name:e[7],multiple:e[10],isfiltered:e[27],emptysearchlabel:e[11],maxwidth:e[0],datatextexpr:e[12],datavalueexpr:e[13],selectall:e[18],labelselectall:e[19],overlay:!0,width:e[0]};return void 0!==e[20]&&(s.value=e[20]),t=new G({props:s}),n.push((()=>o(t,"value",i))),t.$on("change",e[36]),t.$on("scrollend",e[40]),t.$on("select-all",e[41]),{c(){u(t.$$.fragment)},m(e,l){x(t,e,l),a=!0},p(e,a){const i={};1&a[1]&&(i.items=JSON.stringify(e[31])),128&a[0]&&(i.name=e[7]),1024&a[0]&&(i.multiple=e[10]),134217728&a[0]&&(i.isfiltered=e[27]),2048&a[0]&&(i.emptysearchlabel=e[11]),1&a[0]&&(i.maxwidth=e[0]),4096&a[0]&&(i.datatextexpr=e[12]),8192&a[0]&&(i.datavalueexpr=e[13]),262144&a[0]&&(i.selectall=e[18]),524288&a[0]&&(i.labelselectall=e[19]),1&a[0]&&(i.width=e[0]),!l&&1048576&a[0]&&(l=!0,i.value=e[20],k((()=>l=!1))),t.$set(i)},i(e){a||(w(t.$$.fragment,e),a=!0)},o(e){y(t.$$.fragment,e),a=!1},d(e){j(t,e)}}}function X(e){let t,l,i,s=e[28],n=[];for(let t=0;t<s.length;t+=1)n[t]=le(P(e,s,t));const o=e=>y(n[e],1,1,(()=>{n[e]=null}));let r=e[20].length>e[16]&&ae(e);return{c(){t=c("div");for(let e=0;e<n.length;e+=1)n[e].c();l=d(),r&&r.c(),p(t,"class","tags-selected")},m(e,s){a(e,t,s);for(let e=0;e<n.length;e+=1)n[e]&&n[e].m(t,null);f(t,l),r&&r.m(t,null),i=!0},p(e,a){if(302055432&a[0]|2048&a[1]){let i;for(s=e[28],i=0;i<s.length;i+=1){const o=P(e,s,i);n[i]?(n[i].p(o,a),w(n[i],1)):(n[i]=le(o),n[i].c(),w(n[i],1),n[i].m(t,l))}for(J(),i=s.length;i<n.length;i+=1)o(i);_()}e[20].length>e[16]?r?(r.p(e,a),1114112&a[0]&&w(r,1)):(r=ae(e),r.c(),w(r,1),r.m(t,null)):r&&(J(),y(r,1,1,(()=>{r=null})),_())},i(e){if(!i){for(let e=0;e<s.length;e+=1)w(n[e]);w(r),i=!0}},o(e){n=n.filter(Boolean);for(let e=0;e<n.length;e+=1)y(n[e]);y(r),i=!1},d(e){e&&q(t),L(n,e),r&&r.d()}}}function Z(e){let t,l,i,s;const n=[te,ee],o=[];function r(e,t){return e[3]?0:1}return l=r(e),i=o[l]=n[l](e),{c(){t=c("div"),i.c(),p(t,"class","tag-selected")},m(e,i){a(e,t,i),o[l].m(t,null),s=!0},p(e,a){let s=l;l=r(e),l===s?o[l].p(e,a):(J(),y(o[s],1,1,(()=>{o[s]=null})),_(),i=o[l],i?i.p(e,a):(i=o[l]=n[l](e),i.c()),w(i,1),i.m(t,null))},i(e){s||(w(i),s=!0)},o(e){y(i),s=!1},d(e){e&&q(t),o[l].d()}}}function ee(e){let t,l;let a={id:e[74].id||"",label:e[74].label,size:"s",type:"removable",dark:!1,disabled:!1,href:"",name:"",value:"",selected:!1};return t=new H({props:a}),e[59](t),t.$on("tag-removed",(function(){return e[60](e[74])})),{c(){u(t.$$.fragment)},m(e,a){x(t,e,a),l=!0},p(l,a){e=l;const i={};268435456&a[0]&&(i.id=e[74].id||""),268435456&a[0]&&(i.label=e[74].label),t.$set(i)},i(e){l||(w(t.$$.fragment,e),l=!0)},o(e){y(t.$$.fragment,e),l=!1},d(l){e[59](null),j(t,l)}}}function te(e){let t,l;return t=new H({props:{id:e[74].id||"",label:e[74].label,size:"s",type:"link",dark:!0,disabled:!1,href:"",name:"",value:"",selected:!1}}),{c(){u(t.$$.fragment)},m(e,a){x(t,e,a),l=!0},p(e,l){const a={};268435456&l[0]&&(a.id=e[74].id||""),268435456&l[0]&&(a.label=e[74].label),t.$set(a)},i(e){l||(w(t.$$.fragment,e),l=!0)},o(e){y(t.$$.fragment,e),l=!1},d(e){j(t,e)}}}function le(e){let t,l,i=e[78]<e[16]&&Z(e);return{c(){i&&i.c(),t=M()},m(e,s){i&&i.m(e,s),a(e,t,s),l=!0},p(e,l){e[78]<e[16]?i?(i.p(e,l),65536&l[0]&&w(i,1)):(i=Z(e),i.c(),w(i,1),i.m(t.parentNode,t)):i&&(J(),y(i,1,1,(()=>{i=null})),_())},i(e){l||(w(i),l=!0)},o(e){y(i),l=!1},d(e){i&&i.d(e),e&&q(t)}}}function ae(e){let t,l,i,s,n;return l=new H({props:{id:"id-tag",label:"("+e[20].length+") "+e[15]+" ",size:"s",type:"link",dark:!1,disabled:!1,href:"",name:"",value:"",selected:!1}}),{c(){t=c("div"),u(l.$$.fragment),p(t,"class","tag-selected")},m(o,r){a(o,t,r),x(l,t,null),i=!0,s||(n=v(t,"click",e[61]),s=!0)},p(e,t){const a={};1081344&t[0]&&(a.label="("+e[20].length+") "+e[15]+" "),l.$set(a)},i(e){i||(w(l.$$.fragment,e),i=!0)},o(e){y(l.$$.fragment,e),i=!1},d(e){e&&q(t),j(l),s=!1,n()}}}function ie(e){let t,l,i,s,n,o,r=e[28],d=[];for(let t=0;t<r.length;t+=1)d[t]=oe(K(e,r,t));return{c(){t=c("div"),l=c("m-layer"),i=c("small"),s=c("div");for(let e=0;e<d.length;e+=1)d[e].c();p(s,"class","tags-selected"),p(i,"slot","content"),R(l,"title",e[14]),R(l,"layertitletag","h3"),R(l,"isopen",e[29])},m(r,c){a(r,t,c),f(t,l),f(l,i),f(i,s);for(let e=0;e<d.length;e+=1)d[e]&&d[e].m(s,null);n||(o=v(l,"layer-closed",e[63]),n=!0)},p(e,t){if(268435464&t[0]|2048&t[1]){let l;for(r=e[28],l=0;l<r.length;l+=1){const a=K(e,r,l);d[l]?d[l].p(a,t):(d[l]=oe(a),d[l].c(),d[l].m(s,null))}for(;l<d.length;l+=1)d[l].d(1);d.length=r.length}16384&t[0]&&R(l,"title",e[14]),536870912&t[0]&&R(l,"isopen",e[29])},d(e){e&&q(t),L(d,e),n=!1,o()}}}function se(e){let t,l,i,s,n;function o(){return e[62](e[74])}return{c(){t=c("m-tag"),R(t,"id",l=e[74].id),R(t,"label",i=e[74].label),R(t,"size","s"),R(t,"type","removable")},m(e,l){a(e,t,l),s||(n=v(t,"tag-removed",o),s=!0)},p(a,s){e=a,268435456&s[0]&&l!==(l=e[74].id)&&R(t,"id",l),268435456&s[0]&&i!==(i=e[74].label)&&R(t,"label",i)},d(e){e&&q(t),s=!1,n()}}}function ne(e){let t,l,i;return{c(){t=c("m-tag"),R(t,"type","text"),R(t,"id",l=e[74].id),R(t,"label",i=e[74].label),R(t,"size","s")},m(e,l){a(e,t,l)},p(e,a){268435456&a[0]&&l!==(l=e[74].id)&&R(t,"id",l),268435456&a[0]&&i!==(i=e[74].label)&&R(t,"label",i)},d(e){e&&q(t)}}}function oe(e){let t,l;function i(e,t){return e[3]?ne:se}let s=i(e),n=s(e);return{c(){t=c("div"),n.c(),l=d(),p(t,"class","tag-selected")},m(e,i){a(e,t,i),n.m(t,null),f(t,l)},p(e,a){s===(s=i(e))&&n?n.p(e,a):(n.d(1),n=s(e),n&&(n.c(),n.m(t,l)))},d(e){e&&q(t),n.d()}}}function re(e){let t,l,i,s,C,N,O,T,E,L,M,R,U,Y,A,H,D,G,K,P=e[10]&&e[20].length>0&&!e[17]&&Q(e);function Z(t){e[53](t)}let ee={classinput:"mc-autocomplete__trigger",name:e[6],placeholder:e[2],inputtype:"text",isinvalid:e[5],disabled:e[3],size:e[4],required:e[9],iconname:"navigation-display-search-24px",rightalign:!1,isvalid:!1,min:"",max:""};void 0!==e[30]&&(ee.value=e[30]),s=new F({props:ee}),n.push((()=>o(s,"value",Z))),s.$on("input",e[39]),s.$on("click",e[54]),s.$on("change",e[55]),s.$on("blur",e[56]);let te=e[8]&&V(),le=null!=e[30]&&""!=e[30]&&!e[3]&&W(e),ae=e[22]&&I(e),se=e[10]&&e[17]&&X(e),ne=e[10]&&e[17]&&ie(e),oe=[{class:"mc-autocomplete"},{style:H="--autocomplete-tag-width: "+e[26]+"; --autocomplete-width: "+e[0]+";"},e[23]],re={};for(let e=0;e<oe.length;e+=1)re=r(re,oe[e]);return{c(){t=c("div"),l=c("div"),P&&P.c(),i=d(),u(s.$$.fragment),N=d(),O=c("div"),te&&te.c(),T=d(),le&&le.c(),E=d(),ae&&ae.c(),L=d(),se&&se.c(),M=d(),R=c("span"),U=d(),Y=c("span"),A=d(),ne&&ne.c(),this.c=m,p(O,"class","mc-autocomplete__tools"),p(l,"class","mc-autocomplete__main"),p(R,"class","mc-autocomplete__loader"),h(R,"display","none"),p(Y,"class","mc-text-input mc-autocomplete__trigger"),h(Y,"display","none"),g(t,re),$(t,"mc-autocomplete--multi",e[10])},m(n,o){a(n,t,o),f(t,l),P&&P.m(l,null),f(l,i),x(s,l,null),f(l,N),f(l,O),te&&te.m(O,null),f(O,T),le&&le.m(O,null),f(t,E),ae&&ae.m(t,null),f(t,L),se&&se.m(t,null),f(t,M),f(t,R),f(t,U),f(t,Y),f(t,A),ne&&ne.m(t,null),e[64](t),D=!0,G||(K=[b(B.call(null,t)),v(t,"outclick",e[35])],G=!0)},p(e,a){e[10]&&e[20].length>0&&!e[17]?P?(P.p(e,a),1180672&a[0]&&w(P,1)):(P=Q(e),P.c(),w(P,1),P.m(l,i)):P&&(J(),y(P,1,1,(()=>{P=null})),_());const n={};64&a[0]&&(n.name=e[6]),4&a[0]&&(n.placeholder=e[2]),32&a[0]&&(n.isinvalid=e[5]),8&a[0]&&(n.disabled=e[3]),16&a[0]&&(n.size=e[4]),512&a[0]&&(n.required=e[9]),!C&&1073741824&a[0]&&(C=!0,n.value=e[30],k((()=>C=!1))),s.$set(n),e[8]?te?256&a[0]&&w(te,1):(te=V(),te.c(),w(te,1),te.m(O,T)):te&&(J(),y(te,1,1,(()=>{te=null})),_()),null==e[30]||""==e[30]||e[3]?le&&(le.d(1),le=null):le?le.p(e,a):(le=W(e),le.c(),le.m(O,null)),e[22]?ae?(ae.p(e,a),4194304&a[0]&&w(ae,1)):(ae=I(e),ae.c(),w(ae,1),ae.m(t,L)):ae&&(J(),y(ae,1,1,(()=>{ae=null})),_()),e[10]&&e[17]?se?(se.p(e,a),132096&a[0]&&w(se,1)):(se=X(e),se.c(),w(se,1),se.m(t,M)):se&&(J(),y(se,1,1,(()=>{se=null})),_()),e[10]&&e[17]?ne?ne.p(e,a):(ne=ie(e),ne.c(),ne.m(t,null)):ne&&(ne.d(1),ne=null),g(t,re=z(oe,[{class:"mc-autocomplete"},(!D||67108865&a[0]&&H!==(H="--autocomplete-tag-width: "+e[26]+"; --autocomplete-width: "+e[0]+";"))&&{style:H},8388608&a[0]&&e[23]])),$(t,"mc-autocomplete--multi",e[10])},i(e){D||(w(P),w(s.$$.fragment,e),w(te),w(ae),w(se),D=!0)},o(e){y(P),y(s.$$.fragment,e),y(te),y(ae),y(se),D=!1},d(l){l&&q(t),P&&P.d(),j(s),te&&te.d(),le&&le.d(),ae&&ae.d(),se&&se.d(),ne&&ne.d(),e[64](null),G=!1,S(K)}}}function ce(e,t,l){let a,i,s,o,c,d,u;const m=["maxwidth","tagid","taglabel","placeholder","filter","nofilter","disabled","size","isinvalid","inputvalue","id","name","loading","required","items","value","open","multiple","emptysearchlabel","datatextexpr","datavalueexpr","nosort","layertitle","showmoretagslabel","maxnumbertoshowtags","alltags","selectall","labelselectall"];let p,h=C(t,m),{maxwidth:g="100%"}=t,{tagid:$}=t,{taglabel:f=""}=t,{placeholder:x}=t,{filter:b=!0}=t,{nofilter:v=!1}=t,{disabled:w=!1}=t,{size:y="m"}=t,{isinvalid:_}=t,{inputvalue:k}=t,{id:z}=t,{name:q}=t,{loading:j=!1}=t,{required:S=!1}=t,{items:E}=t,{value:J}=t,{open:L=!1}=t,{multiple:M=!1}=t,{emptysearchlabel:R="No results found"}=t,{datatextexpr:B="label"}=t,{datavalueexpr:H="value"}=t,{nosort:D=!1}=t,{layertitle:F="Title layer"}=t,{showmoretagslabel:G="Show more"}=t,{maxnumbertoshowtags:K=12}=t,{alltags:P=!1}=t,{selectall:Q=!1}=t,{labelselectall:V="Select all"}=t;const W=Math.random();let I,X,Z,ee=new A(N(),O()),te="0px",le=!1,ae=[],ie=null;function se(){w||(l(20,o=M?[]:""),ne(),ee.dispatch("clear",!0))}function ne(){l(22,d=!1),M&&!D?function(){Z=i;const e=oe();Z.sort(((t,l)=>{const a=e.includes(t),i=e.includes(l);return a===i?t[H]-l[H]:a<i?1:-1})),l(31,s=Z)}():l(31,s=i)}function oe(e){const t=e||o;return i.filter((e=>M?t.includes(e[H]):t===e[H]))}function re(){l(29,ie=!0)}function ce(){l(29,ie=null)}function de(e){l(20,o=o.filter((t=>t!==e))),ee.dispatch("onchange",o)}return e.$$set=e=>{t=r(r({},t),T(e)),l(73,h=C(t,m)),"maxwidth"in e&&l(0,g=e.maxwidth),"tagid"in e&&l(1,$=e.tagid),"taglabel"in e&&l(43,f=e.taglabel),"placeholder"in e&&l(2,x=e.placeholder),"filter"in e&&l(44,b=e.filter),"nofilter"in e&&l(45,v=e.nofilter),"disabled"in e&&l(3,w=e.disabled),"size"in e&&l(4,y=e.size),"isinvalid"in e&&l(5,_=e.isinvalid),"inputvalue"in e&&l(46,k=e.inputvalue),"id"in e&&l(6,z=e.id),"name"in e&&l(7,q=e.name),"loading"in e&&l(8,j=e.loading),"required"in e&&l(9,S=e.required),"items"in e&&l(47,E=e.items),"value"in e&&l(48,J=e.value),"open"in e&&l(49,L=e.open),"multiple"in e&&l(10,M=e.multiple),"emptysearchlabel"in e&&l(11,R=e.emptysearchlabel),"datatextexpr"in e&&l(12,B=e.datatextexpr),"datavalueexpr"in e&&l(13,H=e.datavalueexpr),"nosort"in e&&l(50,D=e.nosort),"layertitle"in e&&l(14,F=e.layertitle),"showmoretagslabel"in e&&l(15,G=e.showmoretagslabel),"maxnumbertoshowtags"in e&&l(16,K=e.maxnumbertoshowtags),"alltags"in e&&l(17,P=e.alltags),"selectall"in e&&l(18,Q=e.selectall),"labelselectall"in e&&l(19,V=e.labelselectall)},e.$$.update=()=>{if(32768&e.$$.dirty[1]&&l(30,a=k),65536&e.$$.dirty[1]&&l(21,i=E?JSON.parse(E):[]),2097152&e.$$.dirty[0]&&l(31,s=i),1024&e.$$.dirty[0]|131072&e.$$.dirty[1]&&l(20,o=!J&&M?[]:J?JSON.parse(J):J),1048576&e.$$.dirty[0]|4096&e.$$.dirty[1]&&l(32,c=()=>o.length.toString()+" "+f),1048576&e.$$.dirty[0]&&async function(e){try{if(await U(),l(28,ae=oe(e)),M)l(51,X=e);else{const e=ae.map((e=>e[B]));l(30,a=e.join(", "))}}catch(e){console.error(e)}}(o),1048576&e.$$.dirty[1]&&async function(e){var t;try{await U(),l(26,te=I&&e&&e.length?`${null===(t=null==p?void 0:p.querySelector(".mc-tag-removable"))||void 0===t?void 0:t.clientWidth}px`:"0px")}catch(e){console.error(e)}}(X),262144&e.$$.dirty[1]&&l(22,d=L),4194304&e.$$.dirty[0]){const e=d?"open":"close";ee.dispatch(e,d)}l(23,u=Object.assign({},h)),8388608&e.$$.dirty[0]&&delete u.class},[g,$,x,w,y,_,z,q,j,S,M,R,B,H,F,G,K,P,Q,V,o,i,d,u,p,I,te,le,ae,ie,a,s,c,W,se,ne,function(){ee.dispatch("onchange",o),M||ne()},re,ce,function(e){const t=e.target.value;!function(e){ee.dispatch("oninput",e)}(t),function(e){!v&&b&&(e.length?l(31,s=i.filter((t=>t[B].toUpperCase().includes(e.toUpperCase())))):l(31,s=i),l(27,le=!s.length),ee.dispatch("onfilter",s))}(t)},function(){ee.dispatch("scrollend",!0)},function(e){ee.dispatch("select-all",e.detail)},de,f,b,v,k,E,J,L,D,X,function(e){n[e?"unshift":"push"]((()=>{I=e,l(25,I)}))},function(e){a=e,l(30,a),l(46,k)},()=>l(22,d=!0),function(t){Y.call(this,e,t)},function(t){Y.call(this,e,t)},()=>{l(30,a=""),l(31,s=i),l(27,le=!1),M||se()},function(e){o=e,l(20,o),l(48,J),l(10,M)},function(e){n[e?"unshift":"push"]((()=>{I=e,l(25,I)}))},e=>de(e.id),()=>re(),e=>de(e.id),()=>ce(),function(e){n[e?"unshift":"push"]((()=>{p=e,l(24,p)}))}]}class de extends e{constructor(e){super();const n=document.createElement("style");n.textContent=".mc-autocomplete{-ms-flex-item-align:start;align-self:start;position:relative;min-width:var(--autocomplete-min-width, 6rem);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:var(--autocomplete-tag-z-index, 2)}.mc-autocomplete__tag{left:2.75rem}.mc-autocomplete__trigger{overflow:hidden;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;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 #758992;box-shadow:0 0 0 2px #758992}.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;position:absolute;-ms-flex-wrap:wrap;flex-wrap:wrap}.tag-selected{margin-top:1em;margin-left:5px;margin-right:5px}.mc-listbox--overlay{top:calc(100% + 4px)}",this.shadowRoot.appendChild(n),t(this,{target:this.shadowRoot,props:l(this.attributes),customElement:!0},ce,re,s,{maxwidth:0,tagid:1,taglabel:43,placeholder:2,filter:44,nofilter:45,disabled:3,size:4,isinvalid:5,inputvalue:46,id:6,name:7,loading:8,required:9,items:47,value:48,open:49,multiple:10,emptysearchlabel:11,datatextexpr:12,datavalueexpr:13,nosort:50,layertitle:14,showmoretagslabel:15,maxnumbertoshowtags:16,alltags:17,selectall:18,labelselectall:19},null,[-1,-1,-1]),e&&(e.target&&a(e.target,this,e.anchor),e.props&&(this.$set(e.props),i()))}static get observedAttributes(){return["maxwidth","tagid","taglabel","placeholder","filter","nofilter","disabled","size","isinvalid","inputvalue","id","name","loading","required","items","value","open","multiple","emptysearchlabel","datatextexpr","datavalueexpr","nosort","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[43]}set taglabel(e){this.$$set({taglabel:e}),i()}get placeholder(){return this.$$.ctx[2]}set placeholder(e){this.$$set({placeholder:e}),i()}get filter(){return this.$$.ctx[44]}set filter(e){this.$$set({filter:e}),i()}get nofilter(){return this.$$.ctx[45]}set nofilter(e){this.$$set({nofilter: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 isinvalid(){return this.$$.ctx[5]}set isinvalid(e){this.$$set({isinvalid:e}),i()}get inputvalue(){return this.$$.ctx[46]}set inputvalue(e){this.$$set({inputvalue:e}),i()}get id(){return this.$$.ctx[6]}set id(e){this.$$set({id:e}),i()}get name(){return this.$$.ctx[7]}set name(e){this.$$set({name:e}),i()}get loading(){return this.$$.ctx[8]}set loading(e){this.$$set({loading:e}),i()}get required(){return this.$$.ctx[9]}set required(e){this.$$set({required:e}),i()}get items(){return this.$$.ctx[47]}set items(e){this.$$set({items:e}),i()}get value(){return this.$$.ctx[48]}set value(e){this.$$set({value:e}),i()}get open(){return this.$$.ctx[49]}set open(e){this.$$set({open:e}),i()}get multiple(){return this.$$.ctx[10]}set multiple(e){this.$$set({multiple:e}),i()}get emptysearchlabel(){return this.$$.ctx[11]}set emptysearchlabel(e){this.$$set({emptysearchlabel:e}),i()}get datatextexpr(){return this.$$.ctx[12]}set datatextexpr(e){this.$$set({datatextexpr:e}),i()}get datavalueexpr(){return this.$$.ctx[13]}set datavalueexpr(e){this.$$set({datavalueexpr:e}),i()}get nosort(){return this.$$.ctx[50]}set nosort(e){this.$$set({nosort:e}),i()}get layertitle(){return this.$$.ctx[14]}set layertitle(e){this.$$set({layertitle:e}),i()}get showmoretagslabel(){return this.$$.ctx[15]}set showmoretagslabel(e){this.$$set({showmoretagslabel:e}),i()}get maxnumbertoshowtags(){return this.$$.ctx[16]}set maxnumbertoshowtags(e){this.$$set({maxnumbertoshowtags:e}),i()}get alltags(){return this.$$.ctx[17]}set alltags(e){this.$$set({alltags:e}),i()}get selectall(){return this.$$.ctx[18]}set selectall(e){this.$$set({selectall:e}),i()}get labelselectall(){return this.$$.ctx[19]}set labelselectall(e){this.$$set({labelselectall:e}),i()}}export{de 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 name: 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 {#if openState}\n <Listbox\n items={JSON.stringify(localItems)}\n {name}\n {multiple}\n {isfiltered}\n {emptysearchlabel}\n {maxwidth}\n {datatextexpr}\n {datavalueexpr}\n {selectall}\n {labelselectall}\n overlay={true}\n width={maxwidth}\n bind:value={listboxValue}\n on:change={onChange}\n on:scrollend={onScrollEnd}\n on:select-all={onSelectAll}\n />\n {/if}\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\n // Listbox\n .mc-listbox {\n &--overlay {\n top: calc(100% + 4px);\n }\n }\n</style>\n"],"names":["ctx","insert","target","button","anchor","JSON","stringify","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_9","create_if_block_8","if_block2","create_if_block_7","create_if_block_6","if_block4","create_if_block_2","if_block5","create_if_block","style","div2_style_value","div2","span0","span1","current","component","maxwidth","$$props","tagid","taglabel","placeholder","filter","nofilter","disabled","size","isinvalid","inputvalue","name","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 name: 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 <div class=\"mc-autocomplete__tag\">\n <Tag\n id={tagid ? tagid : `autocompleteTag-${uuid}`}\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 </div>\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 {#if openState}\n <Listbox\n items={JSON.stringify(localItems)}\n {name}\n {multiple}\n {isfiltered}\n {emptysearchlabel}\n {maxwidth}\n {datatextexpr}\n {datavalueexpr}\n {selectall}\n {labelselectall}\n overlay={true}\n width={maxwidth}\n bind:value={listboxValue}\n on:change={onChange}\n on:scrollend={onScrollEnd}\n on:select-all={onSelectAll}\n />\n {/if}\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 <Tag\n id={selectedItem.id || ''}\n label={selectedItem.label}\n size=\"s\"\n type=\"link\"\n dark={true}\n disabled={false}\n href=\"\"\n name=\"\"\n value=\"\"\n selected={false}\n />\n {:else}\n <Tag\n id={selectedItem.id || ''}\n label={selectedItem.label}\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={() => 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 <Tag\n id=\"id-tag\"\n label=\"({listboxValue.length}) {showmoretagslabel} \"\n size=\"s\"\n type=\"link\"\n dark={false}\n disabled={false}\n href=\"\"\n name=\"\"\n value=\"\"\n selected={false}\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 position: absolute;\n flex-wrap: wrap;\n }\n\n .tag-selected {\n margin-top: 1em;\n margin-left: 5px;\n margin-right: 5px;\n }\n\n // Listbox\n .mc-listbox {\n &--overlay {\n top: calc(100% + 4px);\n }\n }\n</style>\n"],"names":["ctx","insert","target","div","anchor","button","JSON","stringify","length","i","create_if_block_3","each_blocks","id","label","dirty","tag_1_changes","if_block","create_if_block_4","div1","append","m_layer","small","div0","set_custom_element_data","m_tag","m_tag_id_value","m_tag_label_value","create_if_block_1","if_block0","create_if_block_9","create_if_block_8","if_block2","create_if_block_7","create_if_block_6","if_block4","create_if_block_2","if_block5","create_if_block","style","div2_style_value","div2","span0","span1","current","component","maxwidth","$$props","tagid","taglabel","placeholder","filter","nofilter","disabled","size","isinvalid","inputvalue","name","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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"}
@@ -226,21 +226,22 @@
226
226
  <div class="mc-autocomplete__main">
227
227
  <!-- TAG REMOVABLE -->
228
228
  {#if multiple && listboxValue.length > 0 && !alltags}
229
- <Tag
230
- id={tagid ? tagid : `autocompleteTag-${uuid}`}
231
- class="mc-autocomplete__tag"
232
- label={setTagLabel()}
233
- size="s"
234
- type="removable"
235
- dark={false}
236
- disabled={false}
237
- href=""
238
- name=""
239
- value=""
240
- selected={false}
241
- bind:this={tag}
242
- on:tag-removed={clearListbox}
243
- />
229
+ <div class="mc-autocomplete__tag">
230
+ <Tag
231
+ id={tagid ? tagid : `autocompleteTag-${uuid}`}
232
+ label={setTagLabel()}
233
+ size="s"
234
+ type="removable"
235
+ dark={false}
236
+ disabled={false}
237
+ href=""
238
+ name=""
239
+ value=""
240
+ selected={false}
241
+ bind:this={tag}
242
+ on:tag-removed={clearListbox}
243
+ />
244
+ </div>
244
245
  {/if}
245
246
 
246
247
  <!-- TEXT INPUT -->
@@ -325,19 +326,31 @@
325
326
  {#if index < maxnumbertoshowtags}
326
327
  <div class="tag-selected">
327
328
  {#if disabled}
328
- <m-tag
329
- type="link"
330
- id={selectedItem.id}
329
+ <Tag
330
+ id={selectedItem.id || ''}
331
331
  label={selectedItem.label}
332
332
  size="s"
333
+ type="link"
333
334
  dark={true}
335
+ disabled={false}
336
+ href=""
337
+ name=""
338
+ value=""
339
+ selected={false}
334
340
  />
335
341
  {:else}
336
- <m-tag
337
- id={selectedItem.id}
342
+ <Tag
343
+ id={selectedItem.id || ''}
338
344
  label={selectedItem.label}
339
345
  size="s"
340
346
  type="removable"
347
+ dark={false}
348
+ disabled={false}
349
+ href=""
350
+ name=""
351
+ value=""
352
+ selected={false}
353
+ bind:this={tag}
341
354
  on:tag-removed={() => removeTagSelected(selectedItem.id)}
342
355
  />
343
356
  {/if}
@@ -347,11 +360,17 @@
347
360
  {#if listboxValue.length > maxnumbertoshowtags}
348
361
  <!-- svelte-ignore a11y-click-events-have-key-events -->
349
362
  <div class="tag-selected" on:click={() => openLayerFn()}>
350
- <m-tag
363
+ <Tag
351
364
  id="id-tag"
352
365
  label="({listboxValue.length}) {showmoretagslabel} "
353
366
  size="s"
354
367
  type="link"
368
+ dark={false}
369
+ disabled={false}
370
+ href=""
371
+ name=""
372
+ value=""
373
+ selected={false}
355
374
  />
356
375
  </div>
357
376
  {/if}
@@ -425,6 +444,7 @@
425
444
  // Selected Tags
426
445
  .tags-selected {
427
446
  display: flex;
447
+ position: absolute;
428
448
  flex-wrap: wrap;
429
449
  }
430
450
 
@@ -1,2 +1,2 @@
1
- import{S as e,i as t,a as i,b as o,f as a,s,c as n,e as l,v as r,d,n as m,h as c,j as b,k as h,x as p,y as f,l as x,m as g,o as w,q as _,r as u,a9 as y,u as v,K as k}from"../../index-c222d0b7.js";import{E as $}from"../../EventHandler-f7ee47ca.js";function z(e){let t,i;return{c(){t=l("h3"),i=r(e[1]),c(t,"class","mc-modal__heading"),c(t,"id","layerTitle")},m(e,a){o(e,t,a),h(t,i)},p(e,t){2&t&&f(i,e[1])},d(e){e&&g(t)}}}function E(e){let t;return{c(){t=l("footer"),t.innerHTML='<slot name="footer"></slot>',c(t,"class","mc-modal__footer")},m(e,i){o(e,t,i)},d(e){e&&g(t)}}}function j(e){let t,i,a,s,w,_,u,y,v,k,$,j,C,Y,T,q,H,S,L,R,M,A,B,K,O=e[1]&&z(e),D=!e[6]&&E(),F=[{class:S="mc-modal "+(e[7]?" mc-modal--overflow":"")},{tabindex:"-1"},{role:"dialog"},{"aria-labelledby":"modalTitle"},{"aria-hidden":L=!e[0]},e[4]],G={};for(let e=0;e<F.length;e+=1)G=n(G,F[e]);return{c(){t=l("div"),i=l("div"),a=l("div"),s=l("header"),w=l("h2"),_=r(e[2]),u=d(),y=l("button"),v=l("span"),k=r(e[3]),$=d(),j=l("main"),C=l("article"),O&&O.c(),Y=d(),T=l("slot"),q=d(),D&&D.c(),R=d(),M=l("div"),this.c=m,c(w,"class","mc-modal__title"),c(w,"id","modalTitle"),c(v,"class","mc-modal__close-text"),c(y,"class","mc-modal__close"),c(y,"type","button"),c(s,"class","mc-modal__header"),c(T,"name","content"),c(C,"class","mc-modal__content"),c(j,"class","mc-modal__body"),c(a,"class",H="mc-modal__dialog "+(e[0]?" is-open":"")),c(a,"role","document"),b(i,G),c(M,"class",A="mc-modal-overlay "+(e[0]?" is-visible":"")),c(M,"tabindex","-1"),c(M,"role","dialog")},m(n,l){o(n,t,l),h(t,i),h(i,a),h(a,s),h(s,w),h(w,_),h(s,u),h(s,y),h(y,v),h(v,k),h(a,$),h(a,j),h(j,C),O&&O.m(C,null),h(C,Y),h(C,T),h(a,q),D&&D.m(a,null),h(t,R),h(t,M),e[11](t),B||(K=p(y,"click",e[10]),B=!0)},p(e,[t]){4&t&&f(_,e[2]),8&t&&f(k,e[3]),e[1]?O?O.p(e,t):(O=z(e),O.c(),O.m(C,Y)):O&&(O.d(1),O=null),e[6]?D&&(D.d(1),D=null):D||(D=E(),D.c(),D.m(a,null)),1&t&&H!==(H="mc-modal__dialog "+(e[0]?" is-open":""))&&c(a,"class",H),b(i,G=x(F,[{class:S},{tabindex:"-1"},{role:"dialog"},{"aria-labelledby":"modalTitle"},1&t&&L!==(L=!e[0])&&{"aria-hidden":L},16&t&&e[4]])),1&t&&A!==(A="mc-modal-overlay "+(e[0]?" is-visible":""))&&c(M,"class",A)},i:m,o:m,d(i){i&&g(t),O&&O.d(),D&&D.d(),e[11](null),B=!1,K()}}}function C(e,t,i){let o,a;const s=["title","modaltitle","isopen","closebuttontext","hidefooter"];let l,r=w(t,s),{title:d}=t,{modaltitle:m}=t,{isopen:c}=t,{closebuttontext:b="Close"}=t,{hidefooter:h}=t,p=new $(_(),u());function f(){i(0,c=!1)}y((()=>{const e=l.querySelector(".mc-modal"),t=l.querySelector(".mc-modal__body"),i=l.querySelector(".mc-modal__content"),o=t?t.clientHeight:0;(i?i.scrollHeight:0)>o&&e&&e.classList.add("mc-modal--overflow")}));return e.$$set=e=>{t=n(n({},t),v(e)),i(13,r=w(t,s)),"title"in e&&i(1,d=e.title),"modaltitle"in e&&i(2,m=e.modaltitle),"isopen"in e&&i(0,c=e.isopen),"closebuttontext"in e&&i(3,b=e.closebuttontext),"hidefooter"in e&&i(9,h=e.hidefooter)},e.$$.update=()=>{512&e.$$.dirty&&i(6,o=null!=h&&h),1&e.$$.dirty&&(c?p.dispatch("modal-opened",{}):p.dispatch("modal-closed",{})),i(4,a=Object.assign({},r)),16&e.$$.dirty&&delete a.class},[c,d,m,b,a,l,o,undefined,f,h,()=>f(),function(e){k[e?"unshift":"push"]((()=>{l=e,i(5,l)}))}]}class Y extends e{constructor(e){super();const n=document.createElement("style");n.textContent=".mc-modal{font-family:\"Roboto\", sans-serif;font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;bottom:0;left:0;outline:0;pointer-events:none;position:fixed;right:0;top:0;z-index:var(--modal-z-index, 1999999999);-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;display:-webkit-box;display:-ms-flexbox;display:flex;height:100vh;height:-webkit-fill-available;height:-moz-available;height:stretch;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow-x:hidden;overflow-y:auto;padding:1rem 1.125rem;width:100vw}.mc-modal,.mc-modal *{-webkit-box-sizing:border-box;box-sizing:border-box}@media screen and (min-width: 680px){.mc-modal{-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0}}.mc-modal__dialog{background:#ffffff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;opacity:0;max-height:100%;position:relative;-webkit-transform:translateY(-25%);-ms-transform:translateY(-25%);transform:translateY(-25%);-webkit-transition:visibility 0s linear 0.4s, opacity 0.4s ease, -webkit-transform 0.4s ease;transition:visibility 0s linear 0.4s, opacity 0.4s ease, -webkit-transform 0.4s ease;transition:visibility 0s linear 0.4s, transform 0.4s ease, opacity 0.4s ease;transition:visibility 0s linear 0.4s, transform 0.4s ease, opacity 0.4s ease, -webkit-transform 0.4s ease;visibility:hidden;width:100%}@media screen and (min-width: 680px){.mc-modal__dialog{max-height:50%;max-width:38.5rem}}@media(min-width: 1024px) and (max-width: 1919px){.mc-modal__dialog{max-height:66.6666666667%}}@media screen and (min-width: 1024px){.mc-modal__dialog{max-width:48rem}}@media screen and (min-width: 1280px){.mc-modal__dialog{max-width:50rem}}@media screen and (min-width: 1920px){.mc-modal__dialog{max-width:56.5rem}}.mc-modal__dialog.is-open{opacity:1;pointer-events:all;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);-webkit-transition:visibility 0s linear 0s, opacity 0.4s ease, -webkit-transform 0.4s ease;transition:visibility 0s linear 0s, opacity 0.4s ease, -webkit-transform 0.4s ease;transition:visibility 0s linear 0s, transform 0.4s ease, opacity 0.4s ease;transition:visibility 0s linear 0s, transform 0.4s ease, opacity 0.4s ease, -webkit-transform 0.4s ease;visibility:visible}.mc-modal__form{display:contents}.mc-modal__header{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;gap:0.75rem;margin-bottom:1rem;min-height:3.75rem;padding:0.75rem 0.75rem 0.75rem 1rem;position:relative}.mc-modal__header::after{background:#b3b3b3;content:\"\";display:block;margin:0 auto;height:1px;width:100%;bottom:0;left:0;position:absolute}@media screen and (min-width: 680px){.mc-modal__header{padding-top:1rem;padding-right:1rem;padding-left:1.5rem}}.mc-modal__icon{fill:#666666;height:1.5rem;width:1.5rem}.mc-modal__title{font-size:0.875rem;line-height:1.2857142857;font-weight:400;color:#666666;margin-bottom:0;margin-top:0}.mc-modal__close{margin:0;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;position:relative;-ms-flex-item-align:start;align-self:flex-start;background:transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2rem' width='2rem' viewBox='0 0 32 32' fill='%23808080'%3E%3Cpath d='M17.41 16l8.8-8.79a1 1 0 10-1.42-1.42L16 14.59l-8.79-8.8a1 1 0 00-1.42 1.42l8.8 8.79-8.8 8.79a1 1 0 000 1.42 1 1 0 001.42 0l8.79-8.8 8.79 8.8a1 1 0 001.42 0 1 1 0 000-1.42z'/%3E%3C/svg%3E\") no-repeat;background-size:contain;cursor:pointer;height:2rem;-ms-flex-negative:0;flex-shrink:0;margin-left:auto;width:2rem}.mc-modal__close::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:\"\";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease}.mc-modal__close-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;visibility:visible;white-space:nowrap}.mc-modal__close:focus::after{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #758992;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #758992}.mc-modal__body{font-size:1rem;line-height:1.375;-webkit-box-flex:1;-ms-flex:1 1;flex:1 1;color:#191919;display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden;padding-left:0.5rem;padding-right:0.5rem}@media screen and (min-width: 680px){.mc-modal__body{padding-left:0.75rem;padding-right:1rem}}.mc-modal__content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-color:#666666 #e6e6e6;scrollbar-width:thin;padding-left:0.5rem;padding-right:0.5rem}@media screen and (min-width: 680px){.mc-modal__content{padding-left:0.75rem;padding-right:0.75rem}}.mc-modal__content::-webkit-scrollbar{background-color:#e6e6e6;width:0.25rem}.mc-modal__content::-webkit-scrollbar-thumb{background:#666666}.mc-modal__heading{font-size:1.125rem;line-height:1.3333333333;font-weight:700;color:#000000;margin-bottom:0;margin-top:0}.mc-modal__inner{padding-top:1.5rem;padding-bottom:3rem}.mc-modal__footer{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:1rem}@media screen and (min-width: 680px){.mc-modal__footer{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding:1.5rem}}.mc-modal__footer>:first-child:not(:only-child){margin-bottom:0.75rem}@media screen and (min-width: 680px){.mc-modal__footer>:first-child:not(:only-child){margin-bottom:0;margin-right:1rem}}.mc-modal-open{overflow:hidden}.mc-modal-overlay{background-color:rgba(25, 25, 25, 0.7);-webkit-filter:blur(1px);filter:blur(1px);inset:0;opacity:0;position:fixed;pointer-events:none;-webkit-transition:opacity 0.4s ease, visibility 0ms 0.4s;transition:opacity 0.4s ease, visibility 0ms 0.4s;z-index:1999999998}.mc-modal-overlay.is-visible{opacity:1;pointer-events:all;-webkit-transition:opacity 0.4s ease, visibility 0ms;transition:opacity 0.4s ease, visibility 0ms;visibility:visible}",this.shadowRoot.appendChild(n),t(this,{target:this.shadowRoot,props:i(this.attributes),customElement:!0},C,j,s,{title:1,modaltitle:2,isopen:0,closebuttontext:3,hidefooter:9},null),e&&(e.target&&o(e.target,this,e.anchor),e.props&&(this.$set(e.props),a()))}static get observedAttributes(){return["title","modaltitle","isopen","closebuttontext","hidefooter"]}get title(){return this.$$.ctx[1]}set title(e){this.$$set({title:e}),a()}get modaltitle(){return this.$$.ctx[2]}set modaltitle(e){this.$$set({modaltitle:e}),a()}get isopen(){return this.$$.ctx[0]}set isopen(e){this.$$set({isopen:e}),a()}get closebuttontext(){return this.$$.ctx[3]}set closebuttontext(e){this.$$set({closebuttontext:e}),a()}get hidefooter(){return this.$$.ctx[9]}set hidefooter(e){this.$$set({hidefooter:e}),a()}}export{Y as default};
1
+ import{S as e,i as t,a as i,b as o,f as a,s,c as l,e as n,v as r,d,n as m,h as c,j as b,k as h,y as p,l as f,m as x,o as g,q as w,r as u,a9 as _,u as y,x as v,K as k}from"../../index-c222d0b7.js";import{E as $}from"../../EventHandler-f7ee47ca.js";function z(e){let t,i,a,s,l;return{c(){t=n("button"),i=n("span"),a=r(e[4]),c(i,"class","mc-modal__close-text"),c(t,"class","mc-modal__close"),c(t,"type","button")},m(n,r){o(n,t,r),h(t,i),h(i,a),s||(l=v(t,"click",e[11]),s=!0)},p(e,t){16&t&&p(a,e[4])},d(e){e&&x(t),s=!1,l()}}}function E(e){let t,i;return{c(){t=n("h3"),i=r(e[1]),c(t,"class","mc-modal__heading"),c(t,"id","layerTitle")},m(e,a){o(e,t,a),h(t,i)},p(e,t){2&t&&p(i,e[1])},d(e){e&&x(t)}}}function j(e){let t;return{c(){t=n("footer"),t.innerHTML='<slot name="footer"></slot>',c(t,"class","mc-modal__footer")},m(e,i){o(e,t,i)},d(e){e&&x(t)}}}function C(e){let t,i,a,s,g,w,u,_,y,v,k,$,C,Y,T,q,H,S,L,R=e[3]&&z(e),M=e[1]&&E(e),A=!e[7]&&j(),B=[{class:T="mc-modal "+(e[8]?" mc-modal--overflow":"")},{tabindex:"-1"},{role:"dialog"},{"aria-labelledby":"modalTitle"},{"aria-hidden":q=!e[0]},e[5]],K={};for(let e=0;e<B.length;e+=1)K=l(K,B[e]);return{c(){t=n("div"),i=n("div"),a=n("div"),s=n("header"),g=n("h2"),w=r(e[2]),u=d(),R&&R.c(),_=d(),y=n("main"),v=n("article"),M&&M.c(),k=d(),$=n("slot"),C=d(),A&&A.c(),H=d(),S=n("div"),this.c=m,c(g,"class","mc-modal__title"),c(g,"id","modalTitle"),c(s,"class","mc-modal__header"),c($,"name","content"),c(v,"class","mc-modal__content"),c(y,"class","mc-modal__body"),c(a,"class",Y="mc-modal__dialog "+(e[0]?" is-open":"")),c(a,"role","document"),b(i,K),c(S,"class",L="mc-modal-overlay "+(e[0]?" is-visible":"")),c(S,"tabindex","-1"),c(S,"role","dialog")},m(l,n){o(l,t,n),h(t,i),h(i,a),h(a,s),h(s,g),h(g,w),h(s,u),R&&R.m(s,null),h(a,_),h(a,y),h(y,v),M&&M.m(v,null),h(v,k),h(v,$),h(a,C),A&&A.m(a,null),h(t,H),h(t,S),e[12](t)},p(e,[t]){4&t&&p(w,e[2]),e[3]?R?R.p(e,t):(R=z(e),R.c(),R.m(s,null)):R&&(R.d(1),R=null),e[1]?M?M.p(e,t):(M=E(e),M.c(),M.m(v,k)):M&&(M.d(1),M=null),e[7]?A&&(A.d(1),A=null):A||(A=j(),A.c(),A.m(a,null)),1&t&&Y!==(Y="mc-modal__dialog "+(e[0]?" is-open":""))&&c(a,"class",Y),b(i,K=f(B,[{class:T},{tabindex:"-1"},{role:"dialog"},{"aria-labelledby":"modalTitle"},1&t&&q!==(q=!e[0])&&{"aria-hidden":q},32&t&&e[5]])),1&t&&L!==(L="mc-modal-overlay "+(e[0]?" is-visible":""))&&c(S,"class",L)},i:m,o:m,d(i){i&&x(t),R&&R.d(),M&&M.d(),A&&A.d(),e[12](null)}}}function Y(e,t,i){let o,a;const s=["title","modaltitle","isopen","closable","closebuttontext","hidefooter"];let n,r=g(t,s),{title:d}=t,{modaltitle:m}=t,{isopen:c}=t,{closable:b=!0}=t,{closebuttontext:h="Close"}=t,{hidefooter:p}=t,f=new $(w(),u());function x(){i(0,c=!1)}_((()=>{const e=n.querySelector(".mc-modal"),t=n.querySelector(".mc-modal__body"),i=n.querySelector(".mc-modal__content"),o=t?t.clientHeight:0;(i?i.scrollHeight:0)>o&&e&&e.classList.add("mc-modal--overflow")}));return e.$$set=e=>{t=l(l({},t),y(e)),i(14,r=g(t,s)),"title"in e&&i(1,d=e.title),"modaltitle"in e&&i(2,m=e.modaltitle),"isopen"in e&&i(0,c=e.isopen),"closable"in e&&i(3,b=e.closable),"closebuttontext"in e&&i(4,h=e.closebuttontext),"hidefooter"in e&&i(10,p=e.hidefooter)},e.$$.update=()=>{1024&e.$$.dirty&&i(7,o=null!=p&&p),1&e.$$.dirty&&(c?f.dispatch("modal-opened",{}):f.dispatch("modal-closed",{})),i(5,a=Object.assign({},r)),32&e.$$.dirty&&delete a.class},[c,d,m,b,h,a,n,o,undefined,x,p,()=>x(),function(e){k[e?"unshift":"push"]((()=>{n=e,i(6,n)}))}]}class T extends e{constructor(e){super();const l=document.createElement("style");l.textContent=".mc-modal{font-family:\"Roboto\", sans-serif;font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;bottom:0;left:0;outline:0;pointer-events:none;position:fixed;right:0;top:0;z-index:var(--modal-z-index, 1999999999);-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;display:-webkit-box;display:-ms-flexbox;display:flex;height:100vh;height:-webkit-fill-available;height:-moz-available;height:stretch;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow-x:hidden;overflow-y:auto;padding:1rem 1.125rem;width:100vw}.mc-modal,.mc-modal *{-webkit-box-sizing:border-box;box-sizing:border-box}@media screen and (min-width: 680px){.mc-modal{-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0}}.mc-modal__dialog{background:#ffffff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;opacity:0;max-height:100%;position:relative;-webkit-transform:translateY(-25%);-ms-transform:translateY(-25%);transform:translateY(-25%);-webkit-transition:visibility 0s linear 0.4s, opacity 0.4s ease, -webkit-transform 0.4s ease;transition:visibility 0s linear 0.4s, opacity 0.4s ease, -webkit-transform 0.4s ease;transition:visibility 0s linear 0.4s, transform 0.4s ease, opacity 0.4s ease;transition:visibility 0s linear 0.4s, transform 0.4s ease, opacity 0.4s ease, -webkit-transform 0.4s ease;visibility:hidden;width:100%}@media screen and (min-width: 680px){.mc-modal__dialog{max-height:50%;max-width:38.5rem}}@media(min-width: 1024px) and (max-width: 1919px){.mc-modal__dialog{max-height:66.6666666667%}}@media screen and (min-width: 1024px){.mc-modal__dialog{max-width:48rem}}@media screen and (min-width: 1280px){.mc-modal__dialog{max-width:50rem}}@media screen and (min-width: 1920px){.mc-modal__dialog{max-width:56.5rem}}.mc-modal__dialog.is-open{opacity:1;pointer-events:all;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);-webkit-transition:visibility 0s linear 0s, opacity 0.4s ease, -webkit-transform 0.4s ease;transition:visibility 0s linear 0s, opacity 0.4s ease, -webkit-transform 0.4s ease;transition:visibility 0s linear 0s, transform 0.4s ease, opacity 0.4s ease;transition:visibility 0s linear 0s, transform 0.4s ease, opacity 0.4s ease, -webkit-transform 0.4s ease;visibility:visible}.mc-modal__form{display:contents}.mc-modal__header{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;gap:0.75rem;margin-bottom:1rem;min-height:3.75rem;padding:0.75rem 0.75rem 0.75rem 1rem;position:relative}.mc-modal__header::after{background:#b3b3b3;content:\"\";display:block;margin:0 auto;height:1px;width:100%;bottom:0;left:0;position:absolute}@media screen and (min-width: 680px){.mc-modal__header{padding-top:1rem;padding-right:1rem;padding-left:1.5rem}}.mc-modal__icon{fill:#666666;height:1.5rem;width:1.5rem}.mc-modal__title{font-size:0.875rem;line-height:1.2857142857;font-weight:400;color:#666666;margin-bottom:0;margin-top:0}.mc-modal__close{margin:0;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;position:relative;-ms-flex-item-align:start;align-self:flex-start;background:transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2rem' width='2rem' viewBox='0 0 32 32' fill='%23808080'%3E%3Cpath d='M17.41 16l8.8-8.79a1 1 0 10-1.42-1.42L16 14.59l-8.79-8.8a1 1 0 00-1.42 1.42l8.8 8.79-8.8 8.79a1 1 0 000 1.42 1 1 0 001.42 0l8.79-8.8 8.79 8.8a1 1 0 001.42 0 1 1 0 000-1.42z'/%3E%3C/svg%3E\") no-repeat;background-size:contain;cursor:pointer;height:2rem;-ms-flex-negative:0;flex-shrink:0;margin-left:auto;width:2rem}.mc-modal__close::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:\"\";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease}.mc-modal__close-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;visibility:visible;white-space:nowrap}.mc-modal__close:focus::after{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #758992;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #758992}.mc-modal__body{font-size:1rem;line-height:1.375;-webkit-box-flex:1;-ms-flex:1 1;flex:1 1;color:#191919;display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden;padding-left:0.5rem;padding-right:0.5rem}@media screen and (min-width: 680px){.mc-modal__body{padding-left:0.75rem;padding-right:1rem}}.mc-modal__content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-color:#666666 #e6e6e6;scrollbar-width:thin;padding-left:0.5rem;padding-right:0.5rem}@media screen and (min-width: 680px){.mc-modal__content{padding-left:0.75rem;padding-right:0.75rem}}.mc-modal__content::-webkit-scrollbar{background-color:#e6e6e6;width:0.25rem}.mc-modal__content::-webkit-scrollbar-thumb{background:#666666}.mc-modal__heading{font-size:1.125rem;line-height:1.3333333333;font-weight:700;color:#000000;margin-bottom:0;margin-top:0}.mc-modal__inner{padding-top:1.5rem;padding-bottom:3rem}.mc-modal__footer{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:1rem}@media screen and (min-width: 680px){.mc-modal__footer{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding:1.5rem}}.mc-modal__footer>:first-child:not(:only-child){margin-bottom:0.75rem}@media screen and (min-width: 680px){.mc-modal__footer>:first-child:not(:only-child){margin-bottom:0;margin-right:1rem}}.mc-modal-open{overflow:hidden}.mc-modal-overlay{background-color:rgba(25, 25, 25, 0.7);-webkit-filter:blur(1px);filter:blur(1px);inset:0;opacity:0;position:fixed;pointer-events:none;-webkit-transition:opacity 0.4s ease, visibility 0ms 0.4s;transition:opacity 0.4s ease, visibility 0ms 0.4s;z-index:1999999998}.mc-modal-overlay.is-visible{opacity:1;pointer-events:all;-webkit-transition:opacity 0.4s ease, visibility 0ms;transition:opacity 0.4s ease, visibility 0ms;visibility:visible}",this.shadowRoot.appendChild(l),t(this,{target:this.shadowRoot,props:i(this.attributes),customElement:!0},Y,C,s,{title:1,modaltitle:2,isopen:0,closable:3,closebuttontext:4,hidefooter:10},null),e&&(e.target&&o(e.target,this,e.anchor),e.props&&(this.$set(e.props),a()))}static get observedAttributes(){return["title","modaltitle","isopen","closable","closebuttontext","hidefooter"]}get title(){return this.$$.ctx[1]}set title(e){this.$$set({title:e}),a()}get modaltitle(){return this.$$.ctx[2]}set modaltitle(e){this.$$set({modaltitle:e}),a()}get isopen(){return this.$$.ctx[0]}set isopen(e){this.$$set({isopen:e}),a()}get closable(){return this.$$.ctx[3]}set closable(e){this.$$set({closable:e}),a()}get closebuttontext(){return this.$$.ctx[4]}set closebuttontext(e){this.$$set({closebuttontext:e}),a()}get hidefooter(){return this.$$.ctx[10]}set hidefooter(e){this.$$set({hidefooter:e}),a()}}export{T as default};
2
2
  //# sourceMappingURL=Modal.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.js","sources":["../../../../src/components/modal/Modal.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n import {\n afterUpdate,\n get_current_component,\n createEventDispatcher,\n } from 'svelte/internal';\n import { EventHandler } from '../../utilities/EventHandler';\n export let title: string;\n export let modaltitle: string;\n export let isopen: boolean;\n export let closebuttontext = 'Close';\n export let hidefooter: boolean;\n\n $: hideFooter = hidefooter ?? false;\n\n $: isopen\n ? eventHandler.dispatch('modal-opened', {})\n : eventHandler.dispatch('modal-closed', {});\n $: attributes = { ...$$restProps };\n $: delete attributes.class;\n let scrollable: boolean;\n\n let root: HTMLElement;\n let eventHandler = new EventHandler(\n get_current_component(),\n createEventDispatcher(),\n );\n\n afterUpdate(() => {\n const modal = root.querySelector('.mc-modal');\n const body = root.querySelector('.mc-modal__body');\n const content = root.querySelector('.mc-modal__content');\n\n const bodyHeight = body ? body.clientHeight : 0;\n const contentHeight = content ? content.scrollHeight : 0;\n\n if (contentHeight > bodyHeight && modal) {\n modal.classList.add('mc-modal--overflow');\n }\n });\n\n function onClose(): void {\n isopen = false;\n }\n</script>\n\n<div bind:this={root}>\n <div\n class=\"mc-modal {scrollable ? ' mc-modal--overflow' : ''}\"\n tabindex=\"-1\"\n role=\"dialog\"\n aria-labelledby=\"modalTitle\"\n aria-hidden={!isopen}\n {...attributes}\n >\n <div class=\"mc-modal__dialog {isopen ? ' is-open' : ''}\" role=\"document\">\n <header class=\"mc-modal__header\">\n <h2 class=\"mc-modal__title\" id=\"modalTitle\">{modaltitle}</h2>\n <button\n class=\"mc-modal__close\"\n type=\"button\"\n on:click={() => onClose()}\n >\n <span class=\"mc-modal__close-text\">{closebuttontext}</span>\n </button>\n </header>\n <main class=\"mc-modal__body\">\n <article class=\"mc-modal__content\">\n {#if title}\n <h3 class=\"mc-modal__heading\" id=\"layerTitle\">{title}</h3>\n {/if}\n <slot name=\"content\" />\n </article>\n </main>\n {#if !hideFooter}\n <footer class=\"mc-modal__footer\">\n <slot name=\"footer\" />\n </footer>\n {/if}\n </div>\n </div>\n <div\n class=\"mc-modal-overlay {isopen ? ' is-visible' : ''}\"\n tabindex=\"-1\"\n role=\"dialog\"\n />\n</div>\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n @import '@mozaic-ds/styles/components/c.modal';\n</style>\n"],"names":["ctx","insert","target","h3","anchor","footer","create_if_block_1","create_if_block","div3","append","div1","div0","header","h2","button","span","main","article","slot","div2","div1_aria_hidden_value","root","title","$$props","modaltitle","isopen","closebuttontext","hidefooter","eventHandler","EventHandler","get_current_component","createEventDispatcher","onClose","$$invalidate","afterUpdate","modal","querySelector","body","content","bodyHeight","clientHeight","scrollHeight","classList","add","hideFooter","dispatch","attributes","Object","assign","$$restProps","class","scrollable","$$value"],"mappings":"sSAuE2DA,EAAK,oEAApDC,EAAyDC,EAAAC,EAAAC,2BAAVJ,EAAK,mJAMxDC,EAEQC,EAAAG,EAAAD,uFATDJ,EAAK,IAAAM,EAAAN,MAMRA,EAAU,IAAAO,6BA1BDP,EAAU,GAAG,sBAAwB,wFAIxCA,EAAM,IAChBA,EAAU,yHAImCA,EAAU,wCAMjBA,EAAe,+YAR3BA,EAAM,GAAG,WAAa,sEA2B3BA,EAAM,GAAG,cAAgB,uDApCtDC,EAwCKC,EAAAM,EAAAJ,GAvCHK,EAiCKD,EAAAE,GAzBHD,EAwBKC,EAAAC,GAvBHF,EASQE,EAAAC,GARNH,EAA4DG,EAAAC,iBAC5DJ,EAMQG,EAAAE,GADNL,EAA0DK,EAAAC,iBAG9DN,EAOME,EAAAK,GANJP,EAKSO,EAAAC,yBADPR,EAAsBQ,EAAAC,gCAU9BT,EAICD,EAAAW,8DA5BkDnB,EAAU,aAMjBA,EAAe,IAK9CA,EAAK,yDAMRA,EAAU,oFAnBYA,EAAM,GAAG,WAAa,wHAHtCA,EAAM,KAAA,CAAA,cAAAoB,SAChBpB,EAAU,uCA6BWA,EAAM,GAAG,cAAgB,yLA5DhDqB,kBAfOC,GAAaC,cACbC,GAAkBD,UAClBE,GAAeF,GACfG,gBAAAA,EAAkB,SAAOH,cACzBI,GAAmBJ,EAY1BK,EAAmB,IAAAC,EACrBC,IACAC,cAgBOC,IACPC,EAAA,EAAAR,GAAS,GAdXS,GAAW,KACH,MAAAC,EAAQd,EAAKe,cAAc,aAC3BC,EAAOhB,EAAKe,cAAc,mBAC1BE,EAAUjB,EAAKe,cAAc,sBAE7BG,EAAaF,EAAOA,EAAKG,aAAe,GACxBF,EAAUA,EAAQG,aAAe,GAEnCF,GAAcJ,GAChCA,EAAMO,UAAUC,IAAI,qSAxBvBV,EAAA,EAAEW,EAAajB,SAAAA,kBAEbF,EACCG,EAAaiB,SAAS,eAAc,IACpCjB,EAAaiB,SAAS,eAAc,CAAA,QACrCC,EAALC,OAAAC,UAAuBC,0BACXH,EAAWI,sBACjBC,kBAyCoBnB,4CAfVX,EAAI+B"}
1
+ {"version":3,"file":"Modal.js","sources":["../../../../src/components/modal/Modal.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n import {\n afterUpdate,\n get_current_component,\n createEventDispatcher,\n } from 'svelte/internal';\n import { EventHandler } from '../../utilities/EventHandler';\n export let title: string;\n export let modaltitle: string;\n export let isopen: boolean;\n export let closable: boolean = true;\n export let closebuttontext = 'Close';\n export let hidefooter: boolean;\n\n $: hideFooter = hidefooter ?? false;\n\n $: isopen\n ? eventHandler.dispatch('modal-opened', {})\n : eventHandler.dispatch('modal-closed', {});\n $: attributes = { ...$$restProps };\n $: delete attributes.class;\n let scrollable: boolean;\n\n let root: HTMLElement;\n let eventHandler = new EventHandler(\n get_current_component(),\n createEventDispatcher(),\n );\n\n afterUpdate(() => {\n const modal = root.querySelector('.mc-modal');\n const body = root.querySelector('.mc-modal__body');\n const content = root.querySelector('.mc-modal__content');\n\n const bodyHeight = body ? body.clientHeight : 0;\n const contentHeight = content ? content.scrollHeight : 0;\n\n if (contentHeight > bodyHeight && modal) {\n modal.classList.add('mc-modal--overflow');\n }\n });\n\n function onClose(): void {\n isopen = false;\n }\n</script>\n\n<div bind:this={root}>\n <div\n class=\"mc-modal {scrollable ? ' mc-modal--overflow' : ''}\"\n tabindex=\"-1\"\n role=\"dialog\"\n aria-labelledby=\"modalTitle\"\n aria-hidden={!isopen}\n {...attributes}\n >\n <div class=\"mc-modal__dialog {isopen ? ' is-open' : ''}\" role=\"document\">\n <header class=\"mc-modal__header\">\n <h2 class=\"mc-modal__title\" id=\"modalTitle\">{modaltitle}</h2>\n {#if closable}\n <button\n class=\"mc-modal__close\"\n type=\"button\"\n on:click={() => onClose()}\n >\n <span class=\"mc-modal__close-text\">{closebuttontext}</span>\n </button>\n {/if}\n </header>\n <main class=\"mc-modal__body\">\n <article class=\"mc-modal__content\">\n {#if title}\n <h3 class=\"mc-modal__heading\" id=\"layerTitle\">{title}</h3>\n {/if}\n <slot name=\"content\" />\n </article>\n </main>\n {#if !hideFooter}\n <footer class=\"mc-modal__footer\">\n <slot name=\"footer\" />\n </footer>\n {/if}\n </div>\n </div>\n <div\n class=\"mc-modal-overlay {isopen ? ' is-visible' : ''}\"\n tabindex=\"-1\"\n role=\"dialog\"\n />\n</div>\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n @import '@mozaic-ds/styles/components/c.modal';\n</style>\n"],"names":["ctx","insert","target","button","anchor","append","span","h3","footer","create_if_block_2","create_if_block_1","create_if_block","div3","div1","div0","header","h2","main","article","slot","div2","div1_aria_hidden_value","root","title","$$props","modaltitle","isopen","closable","closebuttontext","hidefooter","eventHandler","EventHandler","get_current_component","createEventDispatcher","onClose","$$invalidate","afterUpdate","modal","querySelector","body","content","bodyHeight","clientHeight","scrollHeight","classList","add","hideFooter","dispatch","attributes","Object","assign","$$restProps","class","scrollable","$$value"],"mappings":"4TAmEgDA,EAAe,oGALrDC,EAMQC,EAAAC,EAAAC,GADNC,EAA0DF,EAAAG,2DAAtBN,EAAe,4EAOJA,EAAK,oEAApDC,EAAyDC,EAAAK,EAAAH,2BAAVJ,EAAK,mJAMxDC,EAEQC,EAAAM,EAAAJ,6EArBHJ,EAAQ,IAAAS,EAAAT,KAYNA,EAAK,IAAAU,EAAAV,MAMRA,EAAU,IAAAW,6BA5BDX,EAAU,GAAG,sBAAwB,wFAIxCA,EAAM,IAChBA,EAAU,yHAImCA,EAAU,sUAF7BA,EAAM,GAAG,WAAa,sEA6B3BA,EAAM,GAAG,cAAgB,uDAtCtDC,EA0CKC,EAAAU,EAAAR,GAzCHC,EAmCKO,EAAAC,GA3BHR,EA0BKQ,EAAAC,GAzBHT,EAWQS,EAAAC,GAVNV,EAA4DU,EAAAC,uCAW9DX,EAOMS,EAAAG,GANJZ,EAKSY,EAAAC,yBADPb,EAAsBa,EAAAC,gCAU9Bd,EAICO,EAAAQ,+BA9BkDpB,EAAU,IAClDA,EAAQ,4DAYNA,EAAK,yDAMRA,EAAU,oFArBYA,EAAM,GAAG,WAAa,wHAHtCA,EAAM,KAAA,CAAA,cAAAqB,SAChBrB,EAAU,uCA+BWA,EAAM,GAAG,cAAgB,oMA9DhDsB,kBAhBOC,GAAaC,cACbC,GAAkBD,UAClBE,GAAeF,GACfG,SAAAA,GAAoB,GAAIH,GACxBI,gBAAAA,EAAkB,SAAOJ,cACzBK,GAAmBL,EAY1BM,EAAmB,IAAAC,EACrBC,IACAC,cAgBOC,IACPC,EAAA,EAAAT,GAAS,GAdXU,GAAW,KACH,MAAAC,EAAQf,EAAKgB,cAAc,aAC3BC,EAAOjB,EAAKgB,cAAc,mBAC1BE,EAAUlB,EAAKgB,cAAc,sBAE7BG,EAAaF,EAAOA,EAAKG,aAAe,GACxBF,EAAUA,EAAQG,aAAe,GAEnCF,GAAcJ,GAChCA,EAAMO,UAAUC,IAAI,yUAxBvBV,EAAA,EAAEW,EAAajB,SAAAA,kBAEbH,EACCI,EAAaiB,SAAS,eAAc,IACpCjB,EAAaiB,SAAS,eAAc,CAAA,QACrCC,EAALC,OAAAC,UAAuBC,0BACXH,EAAWI,wBACjBC,kBA0CsBnB,4CAhBZZ,EAAIgC"}
@@ -10,6 +10,7 @@
10
10
  export let title: string;
11
11
  export let modaltitle: string;
12
12
  export let isopen: boolean;
13
+ export let closable: boolean = true;
13
14
  export let closebuttontext = 'Close';
14
15
  export let hidefooter: boolean;
15
16
 
@@ -58,13 +59,15 @@
58
59
  <div class="mc-modal__dialog {isopen ? ' is-open' : ''}" role="document">
59
60
  <header class="mc-modal__header">
60
61
  <h2 class="mc-modal__title" id="modalTitle">{modaltitle}</h2>
61
- <button
62
- class="mc-modal__close"
63
- type="button"
64
- on:click={() => onClose()}
65
- >
66
- <span class="mc-modal__close-text">{closebuttontext}</span>
67
- </button>
62
+ {#if closable}
63
+ <button
64
+ class="mc-modal__close"
65
+ type="button"
66
+ on:click={() => onClose()}
67
+ >
68
+ <span class="mc-modal__close-text">{closebuttontext}</span>
69
+ </button>
70
+ {/if}
68
71
  </header>
69
72
  <main class="mc-modal__body">
70
73
  <article class="mc-modal__content">
@@ -1,2 +1,2 @@
1
- import{H as e,i as t,s as i,I as o,e as s,d as n,h as l,b as a,k as r,B as c,z as m,A as u,m as d,R as p,ag as f,p as b,q as v,r as g,Y as y,Z as h,_ as x,$ as _,v as w,T as k,y as $,E as L,F as H,x as z,Q as j,G as E,C as G,K as M,J as B}from"../../index-c222d0b7.js";import T from"./sidebar-feature.nested.js";import{a as q,i as A,s as C}from"../../sidebar-service-8aa10fb1.js";import{E as F}from"../../EventHandler-f7ee47ca.js";function N(e){o(e,"svelte-m824yt",".mc-feature-group.svelte-m824yt.svelte-m824yt{background:none;border:none;color:#ffffff;cursor:pointer;font-size:inherit;font-family:inherit;text-align:initial;margin:0;padding:0;overflow:hidden}.mc-feature-group__icon.svelte-m824yt.svelte-m824yt{fill:#ffffff;height:1.5rem;width:1.5rem}.mc-feature-group__container.svelte-m824yt.svelte-m824yt{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:5px 0;padding:8px 0px;-webkit-transition:margin 300ms ease-in-out;transition:margin 300ms ease-in-out}.mc-feature-group__label.svelte-m824yt.svelte-m824yt{margin:0 8px;width:200px;min-width:200px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.mc-feature-group__label__tooltip.svelte-m824yt.svelte-m824yt{opacity:0;-webkit-transition:0s opacity;transition:0s opacity;background-color:#5b737d;border:1px solid #ffffff;border-radius:4px;position:absolute;pointer-events:none;left:calc(100% - 16px);padding:8px 16px;width:188px}.mc-feature-group__label__tooltip__pointer.svelte-m824yt.svelte-m824yt{position:absolute;top:50%;left:-8px;top:calc(50% - 6px);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid white}.mc-feature-group__label__tooltip__pointer.svelte-m824yt div.svelte-m824yt{position:relative;top:-6px;left:2px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid #5b737d}.mc-feature-group__label.svelte-m824yt:hover+.mc-feature-group__label__tooltip.svelte-m824yt{opacity:1;-webkit-transition-delay:1s;transition-delay:1s}.mc-feature-group__content.svelte-m824yt.svelte-m824yt{overflow:hidden;-webkit-transition:height 300ms ease-in-out;transition:height 300ms ease-in-out}.mc-feature-group__content.is-close.svelte-m824yt.svelte-m824yt{height:0}.mc-feature-group.is-selected.svelte-m824yt.svelte-m824yt{background:#5b737d}.mc-feature-group.is-close.svelte-m824yt .mc-feature-group__container.svelte-m824yt{margin:0 20px;width:24px}.mc-feature-group.is-open.svelte-m824yt .mc-feature-group__container.svelte-m824yt{margin:0 32px}.mc-feature-group.svelte-m824yt.svelte-m824yt:hover{background:#405d68}.mc-feature-group.svelte-m824yt.svelte-m824yt:focus-visible{-webkit-box-shadow:none;box-shadow:none;border:none;outline:none}.mc-feature-group.svelte-m824yt:focus-visible .mc-feature-group__container.svelte-m824yt{-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}ul.svelte-m824yt.svelte-m824yt,li.svelte-m824yt.svelte-m824yt{list-style-type:none;margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}ul.svelte-m824yt.svelte-m824yt{-webkit-box-align:start;-ms-flex-align:start;align-items:start;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}ul.svelte-m824yt li.svelte-m824yt{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box}")}function S(e,t,i){const o=e.slice();return o[18]=t[i],o}const V=e=>({}),I=e=>({});function J(e){let t,i=`<${P(e[0].icon)} />`;return{c(){t=s("span"),l(t,"class","mc-feature-group__icon svelte-m824yt")},m(e,o){a(e,t,o),t.innerHTML=i},p(e,o){1&o&&i!==(i=`<${P(e[0].icon)} />`)&&(t.innerHTML=i)},d(e){e&&d(t)}}}function K(e){let t,i;const o=e[11].icon,n=y(o,e,e[10],I);return{c(){t=s("span"),n&&n.c(),l(t,"class","mc-feature-group__icon svelte-m824yt")},m(e,o){a(e,t,o),n&&n.m(t,null),i=!0},p(e,t){n&&n.p&&(!i||1024&t)&&h(n,o,e,e[10],i?_(o,e[10],t,V):x(e[10]),I)},i(e){i||(c(n,e),i=!0)},o(e){m(n,e),i=!1},d(e){e&&d(t),n&&n.d(e)}}}function Q(e){let t,i,o,c,m,u=e[0].label+"",p=e[6]?.offsetHeight<e[6]?.scrollHeight&&R(e);function f(e,t){return e[1]?Y:Z}let b=f(e),v=b(e);return{c(){t=s("span"),i=w(u),o=n(),p&&p.c(),c=n(),v.c(),m=k(),l(t,"class","mc-feature-group__label svelte-m824yt")},m(s,n){a(s,t,n),r(t,i),e[12](t),a(s,o,n),p&&p.m(s,n),a(s,c,n),v.m(s,n),a(s,m,n)},p(e,t){1&t&&u!==(u=e[0].label+"")&&$(i,u),e[6]?.offsetHeight<e[6]?.scrollHeight?p?p.p(e,t):(p=R(e),p.c(),p.m(c.parentNode,c)):p&&(p.d(1),p=null),b!==(b=f(e))&&(v.d(1),v=b(e),v&&(v.c(),v.m(m.parentNode,m)))},d(i){i&&d(t),e[12](null),i&&d(o),p&&p.d(i),i&&d(c),v.d(i),i&&d(m)}}}function R(e){let t,i,o,c,m,u=e[0].label+"";return{c(){t=s("div"),i=s("div"),i.innerHTML='<div class="svelte-m824yt"></div>',o=n(),c=s("span"),m=w(u),l(i,"class","mc-feature-group__label__tooltip__pointer svelte-m824yt"),l(t,"aria-hidden","true"),l(t,"class","mc-feature-group__label__tooltip svelte-m824yt")},m(e,s){a(e,t,s),r(t,i),r(t,o),r(t,c),r(c,m)},p(e,t){1&t&&u!==(u=e[0].label+"")&&$(m,u)},d(e){e&&d(t)}}}function Y(e){let t,i;return{c(){t=B("svg"),i=B("path"),l(i,"d","M12 9H4a1 1 0 010-2h8a1 1 0 010 2z"),l(t,"class","mc-feature-group__icon svelte-m824yt"),l(t,"width","16px"),l(t,"height","16px"),l(t,"viewBox","0 0 16 16")},m(e,o){a(e,t,o),r(t,i)},d(e){e&&d(t)}}}function Z(e){let t,i;return{c(){t=B("svg"),i=B("path"),l(i,"d","M13 7H9V3a1 1 0 00-2 0v4H3a1 1 0 000 2h4v4a1 1 0 002 0V9h4a1 1 0 000-2z"),l(t,"class","mc-feature-group__icon svelte-m824yt"),l(t,"width","16px"),l(t,"height","16px"),l(t,"viewBox","0 0 16 16")},m(e,o){a(e,t,o),r(t,i)},d(e){e&&d(t)}}}function D(e){let t,i,o,u,p,f;function b(){return e[13](e[18])}return i=new T({props:{feature:e[18],a11yLabels:e[2]}}),{c(){t=s("li"),L(i.$$.fragment),o=n(),l(t,"class","svelte-m824yt")},m(e,s){a(e,t,s),H(i,t,null),r(t,o),u=!0,p||(f=z(t,"click",j(b)),p=!0)},p(t,o){e=t;const s={};1&o&&(s.feature=e[18]),4&o&&(s.a11yLabels=e[2]),i.$set(s)},i(e){u||(c(i.$$.fragment,e),u=!0)},o(e){m(i.$$.fragment,e),u=!1},d(e){e&&d(t),E(i),p=!1,f()}}}function O(e){let t,i,o,f,b,v,g,y,h,x,_,w,k,$,L=e[0].icon&&J(e),H=e[8].icon&&K(e),z=e[3]&&Q(e),j=e[0].items,E=[];for(let t=0;t<j.length;t+=1)E[t]=D(S(e,j,t));const M=e=>m(E[e],1,1,(()=>{E[e]=null}));return{c(){t=s("button"),i=s("span"),L&&L.c(),o=n(),H&&H.c(),f=n(),z&&z.c(),x=n(),_=s("ul");for(let e=0;e<E.length;e+=1)E[e].c();l(i,"class","mc-feature-group__container svelte-m824yt"),l(t,"class",b="mc-feature-group "+(e[5]?"is-selected":"")+" "+(e[3]?"is-open":"is-close")+" svelte-m824yt"),l(t,"aria-label",v=e[0].label),l(t,"aria-expanded",g=e[3]&&e[1]),l(t,"aria-controls",y=e[0].code+"-list"),l(t,"id",h=e[0].code),l(_,"class","mc-feature-group__content is-close svelte-m824yt"),l(_,"aria-hidden",w=!e[3]||!e[1]),l(_,"id",k=e[0].code+"-list")},m(s,n){a(s,t,n),r(t,i),L&&L.m(i,null),r(i,o),H&&H.m(i,null),r(i,f),z&&z.m(i,null),a(s,x,n),a(s,_,n);for(let e=0;e<E.length;e+=1)E[e]&&E[e].m(_,null);e[14](_),$=!0},p(e,[s]){if(e[0].icon?L?L.p(e,s):(L=J(e),L.c(),L.m(i,o)):L&&(L.d(1),L=null),e[8].icon?H?(H.p(e,s),256&s&&c(H,1)):(H=K(e),H.c(),c(H,1),H.m(i,f)):H&&(G(),m(H,1,1,(()=>{H=null})),u()),e[3]?z?z.p(e,s):(z=Q(e),z.c(),z.m(i,null)):z&&(z.d(1),z=null),(!$||40&s&&b!==(b="mc-feature-group "+(e[5]?"is-selected":"")+" "+(e[3]?"is-open":"is-close")+" svelte-m824yt"))&&l(t,"class",b),(!$||1&s&&v!==(v=e[0].label))&&l(t,"aria-label",v),(!$||10&s&&g!==(g=e[3]&&e[1]))&&l(t,"aria-expanded",g),(!$||1&s&&y!==(y=e[0].code+"-list"))&&l(t,"aria-controls",y),(!$||1&s&&h!==(h=e[0].code))&&l(t,"id",h),133&s){let t;for(j=e[0].items,t=0;t<j.length;t+=1){const i=S(e,j,t);E[t]?(E[t].p(i,s),c(E[t],1)):(E[t]=D(i),E[t].c(),c(E[t],1),E[t].m(_,null))}for(G(),t=j.length;t<E.length;t+=1)M(t);u()}(!$||10&s&&w!==(w=!e[3]||!e[1]))&&l(_,"aria-hidden",w),(!$||1&s&&k!==(k=e[0].code+"-list"))&&l(_,"id",k)},i(e){if(!$){c(H);for(let e=0;e<j.length;e+=1)c(E[e]);$=!0}},o(e){m(H),E=E.filter(Boolean);for(let e=0;e<E.length;e+=1)m(E[e]);$=!1},d(i){i&&d(t),L&&L.d(),H&&H.d(),z&&z.d(),i&&d(x),i&&d(_),p(E,i),e[14](null)}}}function P(e){return`${e} size="1.5rem"`}function U(e,t,i){let o,s;f(e,A,(e=>i(3,o=e))),f(e,C,(e=>i(9,s=e)));let{$$slots:n={},$$scope:l}=t;const a=b(n);let r,c,{featureGroup:m}=t,{expand:u}=t,{a11yLabels:d}=t,p=new F(v(),g()),y=!1;function h(e){var t;e.disabled||((null===(t=e.items)||void 0===t?void 0:t.length)?p.dispatch("feature-click",e):q(e.code))}return e.$$set=e=>{"featureGroup"in e&&i(0,m=e.featureGroup),"expand"in e&&i(1,u=e.expand),"a11yLabels"in e&&i(2,d=e.a11yLabels),"$$scope"in e&&i(10,l=e.$$scope)},e.$$.update=()=>{var t,n,l,a,c,d;523&e.$$.dirty&&(t=u,n=o,l=m,i(5,y=null!==(d=(null==(a=s)?void 0:a.lv0)&&l.code===(null===(c=null==a?void 0:a.lv0)||void 0===c?void 0:c.code)&&(!a.lv1||!t||!n))&&void 0!==d&&d)),10&e.$$.dirty&&function(e,t){if(r){i(4,r.style.height="",r),i(4,r.style.transition="none",r);const o=window.getComputedStyle(r).height;r.classList.add(t&&e?"is-open":"is-close"),r.classList.remove(t&&e?"is-close":"is-open");const s=window.getComputedStyle(r).height;i(4,r.style.height=o,r),requestAnimationFrame((()=>{i(4,r.style.transition="",r),requestAnimationFrame((()=>{i(4,r.style.height=s,r)}))}));const n=()=>{i(4,r.style.height="",r),r.removeEventListener("transitionend",n)};r.addEventListener("transitionend",n)}}(u,o)},[m,u,d,o,r,y,c,h,a,s,l,n,function(e){M[e?"unshift":"push"]((()=>{c=e,i(6,c)}))},e=>h(e),function(e){M[e?"unshift":"push"]((()=>{r=e,i(4,r)}))}]}class W extends e{constructor(e){super(),t(this,e,U,O,i,{featureGroup:0,expand:1,a11yLabels:2},N)}}export{W as default};
1
+ import{H as e,i as t,s as i,I as o,e as n,d as s,h as l,b as a,k as r,B as c,z as u,A as m,m as d,R as p,ag as f,p as v,q as b,r as g,Y as y,Z as h,_ as x,$ as _,J as w,v as k,T as $,y as L,E as H,F as z,x as j,Q as E,G,C as M,K as B}from"../../index-c222d0b7.js";import P from"./sidebar-feature.nested.js";import{a as T,i as q,s as A}from"../../sidebar-service-8aa10fb1.js";import{E as C}from"../../EventHandler-f7ee47ca.js";function F(e){o(e,"svelte-m824yt",".mc-feature-group.svelte-m824yt.svelte-m824yt{background:none;border:none;color:#ffffff;cursor:pointer;font-size:inherit;font-family:inherit;text-align:initial;margin:0;padding:0;overflow:hidden}.mc-feature-group__icon.svelte-m824yt.svelte-m824yt{fill:#ffffff;height:1.5rem;width:1.5rem}.mc-feature-group__container.svelte-m824yt.svelte-m824yt{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:5px 0;padding:8px 0px;-webkit-transition:margin 300ms ease-in-out;transition:margin 300ms ease-in-out}.mc-feature-group__label.svelte-m824yt.svelte-m824yt{margin:0 8px;width:200px;min-width:200px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.mc-feature-group__label__tooltip.svelte-m824yt.svelte-m824yt{opacity:0;-webkit-transition:0s opacity;transition:0s opacity;background-color:#5b737d;border:1px solid #ffffff;border-radius:4px;position:absolute;pointer-events:none;left:calc(100% - 16px);padding:8px 16px;width:188px}.mc-feature-group__label__tooltip__pointer.svelte-m824yt.svelte-m824yt{position:absolute;top:50%;left:-8px;top:calc(50% - 6px);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid white}.mc-feature-group__label__tooltip__pointer.svelte-m824yt div.svelte-m824yt{position:relative;top:-6px;left:2px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid #5b737d}.mc-feature-group__label.svelte-m824yt:hover+.mc-feature-group__label__tooltip.svelte-m824yt{opacity:1;-webkit-transition-delay:1s;transition-delay:1s}.mc-feature-group__content.svelte-m824yt.svelte-m824yt{overflow:hidden;-webkit-transition:height 300ms ease-in-out;transition:height 300ms ease-in-out}.mc-feature-group__content.is-close.svelte-m824yt.svelte-m824yt{height:0}.mc-feature-group.is-selected.svelte-m824yt.svelte-m824yt{background:#5b737d}.mc-feature-group.is-close.svelte-m824yt .mc-feature-group__container.svelte-m824yt{margin:0 20px;width:24px}.mc-feature-group.is-open.svelte-m824yt .mc-feature-group__container.svelte-m824yt{margin:0 32px}.mc-feature-group.svelte-m824yt.svelte-m824yt:hover{background:#405d68}.mc-feature-group.svelte-m824yt.svelte-m824yt:focus-visible{-webkit-box-shadow:none;box-shadow:none;border:none;outline:none}.mc-feature-group.svelte-m824yt:focus-visible .mc-feature-group__container.svelte-m824yt{-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}ul.svelte-m824yt.svelte-m824yt,li.svelte-m824yt.svelte-m824yt{list-style-type:none;margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}ul.svelte-m824yt.svelte-m824yt{-webkit-box-align:start;-ms-flex-align:start;align-items:start;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}ul.svelte-m824yt li.svelte-m824yt{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box}")}function N(e,t,i){const o=e.slice();return o[18]=t[i],o}const S=e=>({}),V=e=>({});function I(e){let t,i=`<${U(e[0].icon)} />`;return{c(){t=n("span"),l(t,"class","mc-feature-group__icon svelte-m824yt")},m(e,o){a(e,t,o),t.innerHTML=i},p(e,o){1&o&&i!==(i=`<${U(e[0].icon)} />`)&&(t.innerHTML=i)},d(e){e&&d(t)}}}function J(e){let t,i;const o=e[11].icon,s=y(o,e,e[10],V);return{c(){t=n("span"),s&&s.c(),l(t,"class","mc-feature-group__icon svelte-m824yt")},m(e,o){a(e,t,o),s&&s.m(t,null),i=!0},p(e,t){s&&s.p&&(!i||1024&t)&&h(s,o,e,e[10],i?_(o,e[10],t,S):x(e[10]),V)},i(e){i||(c(s,e),i=!0)},o(e){u(s,e),i=!1},d(e){e&&d(t),s&&s.d(e)}}}function K(e){let t,i,o;return{c(){t=w("svg"),i=w("use"),l(i,"href",o=e[0].iconPath),l(t,"class","mc-feature-group__icon svelte-m824yt")},m(e,o){a(e,t,o),r(t,i)},p(e,t){1&t&&o!==(o=e[0].iconPath)&&l(i,"href",o)},d(e){e&&d(t)}}}function Q(e){let t,i,o,c,u,m=e[0].label+"",p=e[6]?.offsetHeight<e[6]?.scrollHeight&&R(e);function f(e,t){return e[1]?Y:Z}let v=f(e),b=v(e);return{c(){t=n("span"),i=k(m),o=s(),p&&p.c(),c=s(),b.c(),u=$(),l(t,"class","mc-feature-group__label svelte-m824yt")},m(n,s){a(n,t,s),r(t,i),e[12](t),a(n,o,s),p&&p.m(n,s),a(n,c,s),b.m(n,s),a(n,u,s)},p(e,t){1&t&&m!==(m=e[0].label+"")&&L(i,m),e[6]?.offsetHeight<e[6]?.scrollHeight?p?p.p(e,t):(p=R(e),p.c(),p.m(c.parentNode,c)):p&&(p.d(1),p=null),v!==(v=f(e))&&(b.d(1),b=v(e),b&&(b.c(),b.m(u.parentNode,u)))},d(i){i&&d(t),e[12](null),i&&d(o),p&&p.d(i),i&&d(c),b.d(i),i&&d(u)}}}function R(e){let t,i,o,c,u,m=e[0].label+"";return{c(){t=n("div"),i=n("div"),i.innerHTML='<div class="svelte-m824yt"></div>',o=s(),c=n("span"),u=k(m),l(i,"class","mc-feature-group__label__tooltip__pointer svelte-m824yt"),l(t,"aria-hidden","true"),l(t,"class","mc-feature-group__label__tooltip svelte-m824yt")},m(e,n){a(e,t,n),r(t,i),r(t,o),r(t,c),r(c,u)},p(e,t){1&t&&m!==(m=e[0].label+"")&&L(u,m)},d(e){e&&d(t)}}}function Y(e){let t,i;return{c(){t=w("svg"),i=w("path"),l(i,"d","M12 9H4a1 1 0 010-2h8a1 1 0 010 2z"),l(t,"class","mc-feature-group__icon svelte-m824yt"),l(t,"width","16px"),l(t,"height","16px"),l(t,"viewBox","0 0 16 16")},m(e,o){a(e,t,o),r(t,i)},d(e){e&&d(t)}}}function Z(e){let t,i;return{c(){t=w("svg"),i=w("path"),l(i,"d","M13 7H9V3a1 1 0 00-2 0v4H3a1 1 0 000 2h4v4a1 1 0 002 0V9h4a1 1 0 000-2z"),l(t,"class","mc-feature-group__icon svelte-m824yt"),l(t,"width","16px"),l(t,"height","16px"),l(t,"viewBox","0 0 16 16")},m(e,o){a(e,t,o),r(t,i)},d(e){e&&d(t)}}}function D(e){let t,i,o,m,p,f;function v(){return e[13](e[18])}return i=new P({props:{feature:e[18],a11yLabels:e[2]}}),{c(){t=n("li"),H(i.$$.fragment),o=s(),l(t,"class","svelte-m824yt")},m(e,n){a(e,t,n),z(i,t,null),r(t,o),m=!0,p||(f=j(t,"click",E(v)),p=!0)},p(t,o){e=t;const n={};1&o&&(n.feature=e[18]),4&o&&(n.a11yLabels=e[2]),i.$set(n)},i(e){m||(c(i.$$.fragment,e),m=!0)},o(e){u(i.$$.fragment,e),m=!1},d(e){e&&d(t),G(i),p=!1,f()}}}function O(e){let t,i,o,f,v,b,g,y,h,x,_,w,k,$,L,H=e[0].icon&&I(e),z=e[8].icon&&J(e),j=e[0].iconPath&&K(e),E=e[3]&&Q(e),G=e[0].items,B=[];for(let t=0;t<G.length;t+=1)B[t]=D(N(e,G,t));const P=e=>u(B[e],1,1,(()=>{B[e]=null}));return{c(){t=n("button"),i=n("span"),H&&H.c(),o=s(),z&&z.c(),f=s(),j&&j.c(),v=s(),E&&E.c(),_=s(),w=n("ul");for(let e=0;e<B.length;e+=1)B[e].c();l(i,"class","mc-feature-group__container svelte-m824yt"),l(t,"class",b="mc-feature-group "+(e[5]?"is-selected":"")+" "+(e[3]?"is-open":"is-close")+" svelte-m824yt"),l(t,"aria-label",g=e[0].label),l(t,"aria-expanded",y=e[3]&&e[1]),l(t,"aria-controls",h=e[0].code+"-list"),l(t,"id",x=e[0].code),l(w,"class","mc-feature-group__content is-close svelte-m824yt"),l(w,"aria-hidden",k=!e[3]||!e[1]),l(w,"id",$=e[0].code+"-list")},m(n,s){a(n,t,s),r(t,i),H&&H.m(i,null),r(i,o),z&&z.m(i,null),r(i,f),j&&j.m(i,null),r(i,v),E&&E.m(i,null),a(n,_,s),a(n,w,s);for(let e=0;e<B.length;e+=1)B[e]&&B[e].m(w,null);e[14](w),L=!0},p(e,[n]){if(e[0].icon?H?H.p(e,n):(H=I(e),H.c(),H.m(i,o)):H&&(H.d(1),H=null),e[8].icon?z?(z.p(e,n),256&n&&c(z,1)):(z=J(e),z.c(),c(z,1),z.m(i,f)):z&&(M(),u(z,1,1,(()=>{z=null})),m()),e[0].iconPath?j?j.p(e,n):(j=K(e),j.c(),j.m(i,v)):j&&(j.d(1),j=null),e[3]?E?E.p(e,n):(E=Q(e),E.c(),E.m(i,null)):E&&(E.d(1),E=null),(!L||40&n&&b!==(b="mc-feature-group "+(e[5]?"is-selected":"")+" "+(e[3]?"is-open":"is-close")+" svelte-m824yt"))&&l(t,"class",b),(!L||1&n&&g!==(g=e[0].label))&&l(t,"aria-label",g),(!L||10&n&&y!==(y=e[3]&&e[1]))&&l(t,"aria-expanded",y),(!L||1&n&&h!==(h=e[0].code+"-list"))&&l(t,"aria-controls",h),(!L||1&n&&x!==(x=e[0].code))&&l(t,"id",x),133&n){let t;for(G=e[0].items,t=0;t<G.length;t+=1){const i=N(e,G,t);B[t]?(B[t].p(i,n),c(B[t],1)):(B[t]=D(i),B[t].c(),c(B[t],1),B[t].m(w,null))}for(M(),t=G.length;t<B.length;t+=1)P(t);m()}(!L||10&n&&k!==(k=!e[3]||!e[1]))&&l(w,"aria-hidden",k),(!L||1&n&&$!==($=e[0].code+"-list"))&&l(w,"id",$)},i(e){if(!L){c(z);for(let e=0;e<G.length;e+=1)c(B[e]);L=!0}},o(e){u(z),B=B.filter(Boolean);for(let e=0;e<B.length;e+=1)u(B[e]);L=!1},d(i){i&&d(t),H&&H.d(),z&&z.d(),j&&j.d(),E&&E.d(),i&&d(_),i&&d(w),p(B,i),e[14](null)}}}function U(e){return`${e} size="1.5rem"`}function W(e,t,i){let o,n;f(e,q,(e=>i(3,o=e))),f(e,A,(e=>i(9,n=e)));let{$$slots:s={},$$scope:l}=t;const a=v(s);let r,c,{featureGroup:u}=t,{expand:m}=t,{a11yLabels:d}=t,p=new C(b(),g()),y=!1;function h(e){var t;e.disabled||((null===(t=e.items)||void 0===t?void 0:t.length)?p.dispatch("feature-click",e):T(e.code))}return e.$$set=e=>{"featureGroup"in e&&i(0,u=e.featureGroup),"expand"in e&&i(1,m=e.expand),"a11yLabels"in e&&i(2,d=e.a11yLabels),"$$scope"in e&&i(10,l=e.$$scope)},e.$$.update=()=>{var t,s,l,a,c,d;523&e.$$.dirty&&(t=m,s=o,l=u,i(5,y=null!==(d=(null==(a=n)?void 0:a.lv0)&&l.code===(null===(c=null==a?void 0:a.lv0)||void 0===c?void 0:c.code)&&(!a.lv1||!t||!s))&&void 0!==d&&d)),10&e.$$.dirty&&function(e,t){if(r){i(4,r.style.height="",r),i(4,r.style.transition="none",r);const o=window.getComputedStyle(r).height;r.classList.add(t&&e?"is-open":"is-close"),r.classList.remove(t&&e?"is-close":"is-open");const n=window.getComputedStyle(r).height;i(4,r.style.height=o,r),requestAnimationFrame((()=>{i(4,r.style.transition="",r),requestAnimationFrame((()=>{i(4,r.style.height=n,r)}))}));const s=()=>{i(4,r.style.height="",r),r.removeEventListener("transitionend",s)};r.addEventListener("transitionend",s)}}(m,o)},[u,m,d,o,r,y,c,h,a,n,l,s,function(e){B[e?"unshift":"push"]((()=>{c=e,i(6,c)}))},e=>h(e),function(e){B[e?"unshift":"push"]((()=>{r=e,i(4,r)}))}]}class X extends e{constructor(e){super(),t(this,e,W,O,i,{featureGroup:0,expand:1,a11yLabels:2},F)}}export{X as default};
2
2
  //# sourceMappingURL=sidebar-feature-group.nested.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"sidebar-feature-group.nested.js","sources":["../../../../src/components/sidebar/sidebar-feature-group.nested.svelte"],"sourcesContent":["<svelte:options />\n\n<script lang=\"ts\">\n import type {\n FeatureGroup,\n Feature,\n A11yLabels,\n Selection,\n } from './sidebar.types';\n import FeatureComponent from './sidebar-feature.nested.svelte';\n import {\n isSidebarOpen,\n selectedFeature,\n selectFeature,\n } from '../../utilities/sidebar-service';\n import { EventHandler } from '../../utilities/EventHandler';\n import {\n get_current_component,\n createEventDispatcher,\n } from 'svelte/internal';\n\n export let featureGroup: FeatureGroup;\n export let expand: boolean;\n export let a11yLabels: A11yLabels;\n let eventHandler = new EventHandler(\n get_current_component(),\n createEventDispatcher(),\n );\n let content: HTMLElement;\n\n $: updateSelection(expand, $isSidebarOpen, featureGroup, $selectedFeature);\n $: updateContentCSS(expand, $isSidebarOpen);\n\n let isSelected = false;\n\n let label: HTMLElement;\n\n function updateSelection(\n isExpanded: boolean,\n isOpen: boolean,\n group: FeatureGroup,\n selection?: Selection,\n ): void {\n isSelected =\n (selection?.lv0 &&\n group.code === selection?.lv0?.code &&\n (!selection.lv1 || !isExpanded || !isOpen)) ??\n false;\n }\n\n // Update the CSS programatically to have a nice animation on height between 0px and 'auto'\n function updateContentCSS(isExpanded: boolean, isOpen: boolean): void {\n if (content) {\n content.style.height = '';\n content.style.transition = 'none';\n const startHeight = window.getComputedStyle(content).height;\n\n content.classList.add(isOpen && isExpanded ? 'is-open' : 'is-close');\n content.classList.remove(isOpen && isExpanded ? 'is-close' : 'is-open');\n\n const height = window.getComputedStyle(content).height;\n content.style.height = startHeight;\n\n // wait until the next frame so that everything has time to update before starting the transition\n requestAnimationFrame(() => {\n content.style.transition = '';\n requestAnimationFrame(() => {\n content.style.height = height;\n });\n });\n\n // Clear the saved height values after the transition\n const handler = () => {\n content.style.height = '';\n content.removeEventListener('transitionend', handler);\n };\n\n content.addEventListener('transitionend', handler);\n }\n }\n\n function generateIcon(iconname: string): string {\n return `${iconname} size=\"1.5rem\"`;\n }\n\n function handleClick(feature: Feature) {\n if (!feature.disabled) {\n // Only select the feature if it is the last level item\n if (feature.items?.length) {\n eventHandler.dispatch('feature-click', feature);\n } else {\n selectFeature(feature.code);\n }\n }\n }\n</script>\n\n<button\n class=\"mc-feature-group {isSelected ? 'is-selected' : ''} {$isSidebarOpen\n ? 'is-open'\n : 'is-close'}\"\n aria-label={featureGroup.label}\n aria-expanded={$isSidebarOpen && expand}\n aria-controls=\"{featureGroup.code}-list\"\n id={featureGroup.code}\n>\n <span class=\"mc-feature-group__container\">\n {#if featureGroup.icon}\n <span class=\"mc-feature-group__icon\">\n {@html `<${generateIcon(featureGroup.icon)} />`}\n </span>\n {/if}\n {#if $$slots.icon}\n <span class=\"mc-feature-group__icon\">\n <slot name=\"icon\" />\n </span>\n {/if}\n {#if $isSidebarOpen}\n <span class=\"mc-feature-group__label\" bind:this={label}>\n {featureGroup.label}\n </span>\n {#if label?.offsetHeight < label?.scrollHeight}\n <div aria-hidden=\"true\" class=\"mc-feature-group__label__tooltip\">\n <div class=\"mc-feature-group__label__tooltip__pointer\"><div /></div>\n <span>{featureGroup.label}</span>\n </div>\n {/if}\n {#if !expand}\n <svg\n class=\"mc-feature-group__icon\"\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n ><path\n d=\"M13 7H9V3a1 1 0 00-2 0v4H3a1 1 0 000 2h4v4a1 1 0 002 0V9h4a1 1 0 000-2z\"\n /></svg\n >\n {:else}\n <svg\n class=\"mc-feature-group__icon\"\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n ><path d=\"M12 9H4a1 1 0 010-2h8a1 1 0 010 2z\" /></svg\n >\n {/if}\n {/if}\n </span>\n</button>\n<ul\n class=\"mc-feature-group__content is-close\"\n aria-hidden={!$isSidebarOpen || !expand}\n id=\"{featureGroup.code}-list\"\n bind:this={content}\n>\n {#each featureGroup.items as feature}\n <li on:click|stopPropagation={() => handleClick(feature)}>\n <FeatureComponent {feature} {a11yLabels} />\n </li>\n {/each}\n</ul>\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n @import './_c.sidebar';\n\n .mc-feature-group {\n background: none;\n border: none;\n color: $color-sidebar-text-color;\n cursor: pointer;\n font-size: inherit;\n font-family: inherit;\n text-align: initial;\n margin: 0;\n padding: 0;\n overflow: hidden;\n\n &__icon {\n fill: $color-sidebar-icon;\n height: 1.5rem;\n width: 1.5rem;\n }\n\n &__container {\n display: flex;\n align-items: center;\n margin: 5px 0;\n padding: 8px 0px;\n @include transition(margin 300ms ease-in-out);\n }\n\n &__label {\n margin: 0 8px;\n width: 200px;\n min-width: 200px;\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n line-clamp: 2;\n -webkit-box-orient: vertical;\n\n &__tooltip {\n opacity: 0;\n transition: 0s opacity;\n background-color: $color-sidebar-divider-background;\n border: 1px solid $color-sidebar-text-color;\n border-radius: 4px;\n position: absolute;\n pointer-events: none;\n left: calc(100% - 16px);\n padding: 8px 16px;\n width: 188px;\n\n &__pointer {\n position: absolute;\n top: 50%;\n left: -8px;\n top: calc(50% - 6px);\n width: 0;\n height: 0;\n border-top: 6px solid transparent;\n border-bottom: 6px solid transparent;\n border-right: 8px solid white;\n\n & div {\n position: relative;\n top: -6px;\n left: 2px;\n width: 0;\n height: 0;\n border-top: 6px solid transparent;\n border-bottom: 6px solid transparent;\n border-right: 8px solid $color-sidebar-divider-background;\n }\n }\n }\n\n &:hover + .mc-feature-group__label__tooltip {\n opacity: 1;\n transition-delay: 1s;\n }\n }\n\n &__content {\n overflow: hidden;\n @include transition(height 300ms ease-in-out);\n &.is-close {\n height: 0;\n }\n\n &.is-open {\n height: auto;\n }\n }\n\n &.is-selected {\n background: $color-sidebar-feature-selected-background;\n }\n\n &.is-close {\n .mc-feature-group__container {\n margin: 0 20px;\n width: 24px;\n }\n }\n\n &.is-open {\n .mc-feature-group__container {\n margin: 0 32px;\n }\n }\n\n &:hover {\n background: $color-sidebar-feature-hover-background;\n }\n\n &:focus-visible {\n box-shadow: none;\n border: none;\n outline: none;\n\n .mc-feature-group__container {\n box-shadow: none;\n border: none;\n border-radius: 6px;\n outline: 1px solid #0b96cc;\n }\n }\n }\n\n ul,\n li {\n list-style-type: none;\n margin: 0;\n padding: 0;\n display: flex;\n width: 100%;\n }\n\n ul {\n align-items: start;\n flex-direction: column;\n justify-content: center;\n\n li {\n flex-direction: column;\n box-sizing: border-box;\n }\n }\n</style>\n"],"names":["generateIcon","ctx","icon","insert","target","span","anchor","innerHTML","raw_value","t0_value","label","if_block0","offsetHeight","scrollHeight","create_if_block_2","create_if_block_1","dirty","set_data","t0","t1_value","div2","append","div1","t1","svg","path","li","create_if_block_4","if_block1","create_if_block_3","create_if_block","each_value","items","length","i","attr","button","button_aria_label_value","button_aria_expanded_value","button_aria_controls_value","code","button_id_value","ul","ul_aria_hidden_value","ul_id_value","current","each_blocks","iconname","content","featureGroup","$$props","expand","a11yLabels","eventHandler","EventHandler","get_current_component","createEventDispatcher","isSelected","handleClick","feature","disabled","_a","dispatch","selectFeature","isExpanded","isOpen","group","selection","$isSidebarOpen","_b","$selectedFeature","lv0","lv1","$$invalidate","style","height","transition","startHeight","window","getComputedStyle","classList","add","remove","requestAnimationFrame","handler","removeEventListener","addEventListener","updateContentCSS","$$value"],"mappings":"msHA6GmBA,EAAaC,EAAY,GAACC,8FADvCC,EAEMC,EAAAC,EAAAC,yCADON,EAAaC,EAAY,GAACC,cAAIG,EAAAE,UAAAC,yKAI3CL,EAEMC,EAAAC,EAAAC,+LAIHG,EAAAR,KAAaS,MAAK,GAEhBC,EAAAV,EAAO,IAAAW,aAAeX,MAAOY,cAAYC,EAAAb,0BAMxCA,EAAM,KAAAc,gJATZZ,EAEMC,EAAAC,EAAAC,2EADH,EAAAU,GAAAP,KAAAA,EAAAR,KAAaS,MAAK,KAAAO,EAAAC,EAAAT,GAEhBR,EAAO,IAAAW,aAAeX,MAAOY,4OAGvBM,EAAAlB,KAAaS,MAAK,oRAF3BP,EAGKC,EAAAgB,EAAAd,GAFHe,EAAmED,EAAAE,UACnED,EAAgCD,EAAAf,kBAAzB,EAAAW,GAAAG,KAAAA,EAAAlB,KAAaS,MAAK,KAAAO,EAAAM,EAAAJ,yPAc3BhB,EAMAC,EAAAoB,EAAAlB,GADGe,EAA+CG,EAAAC,8RAflDtB,EAQAC,EAAAoB,EAAAlB,GAHGe,EAECG,EAAAC,qNAqBRtB,EAEIC,EAAAsB,EAAApB,uRAnDCK,EAAAV,KAAaC,MAAIyB,EAAA1B,GAKjB2B,EAAA3B,KAAQC,MAAI2B,EAAA5B,KAKZA,EAAc,IAAA6B,EAAA7B,GAsCd8B,EAAA9B,KAAa+B,2BAAlBC,OAAIC,GAAA,yRAzDmBjC,EAAU,GAAG,cAAgB,SAAKA,EAAC,GACxD,UACA,YAAU,kBACFkC,EAAAC,EAAA,aAAAC,EAAApC,KAAaS,OACVyB,EAAAC,EAAA,gBAAAE,EAAArC,MAAkBA,EAAM,IACvBkC,EAAAC,EAAA,gBAAAG,EAAAtC,KAAauC,KAAI,SAC7BL,EAAAC,EAAA,KAAAK,EAAAxC,KAAauC,sEA+CHL,EAAAO,EAAA,cAAAC,GAAA1C,OAAmBA,EAAM,IAClCkC,EAAAO,EAAA,KAAAE,EAAA3C,KAAauC,KAAI,iBAvDxBrC,EAmDQC,EAAAgC,EAAA9B,GA1CNe,EAyCMe,EAAA/B,uEAERF,EAWIC,EAAAsC,EAAApC,+EArDKL,KAAaC,2DAKbD,KAAQC,oGAKRD,EAAc,mGAnBIA,EAAU,GAAG,cAAgB,SAAKA,EAAC,GACxD,UACA,YAAU,qCACF4C,GAAA,EAAA7B,GAAAqB,KAAAA,EAAApC,KAAaS,+BACVmC,GAAA,GAAA7B,GAAAsB,KAAAA,EAAArC,MAAkBA,EAAM,+BACvB4C,GAAA,EAAA7B,GAAAuB,KAAAA,EAAAtC,KAAauC,KAAI,oCAC7BK,GAAA,EAAA7B,GAAAyB,KAAAA,EAAAxC,KAAauC,qCAmDVT,EAAA9B,KAAa+B,cAAlBC,OAAIC,GAAA,EAAA,yGAAJD,OAAIC,EAAAY,EAAAb,OAAAC,GAAA,aAJQW,GAAA,GAAA7B,GAAA2B,KAAAA,GAAA1C,OAAmBA,EAAM,6BAClC4C,GAAA,EAAA7B,GAAA4B,KAAAA,EAAA3C,KAAauC,KAAI,yDAGpBP,OAAIC,GAAA,sKA1EG,SAAAlC,EAAa+C,YACVA,qIAtDRC,EAOAtC,gBAdOuC,GAA0BC,UAC1BC,GAAeD,cACfE,GAAsBF,EAC7BG,EAAmB,IAAAC,EACrBC,IACAC,KAOEC,GAAa,EAoDR,SAAAC,EAAYC,SACdA,EAAQC,YAEjB,QAAAC,EAAUF,EAAQ3B,aAAlB,IAAA6B,SAAAA,EAAyB5B,QACjBoB,EAAaS,SAAS,gBAAiBH,GAEvCI,EAAcJ,EAAQnB,2LAtDnB,IACPwB,EACAC,EACAC,EACAC,uBAHAH,EARiBb,EASjBc,EATyBG,EAUzBF,EAVyCjB,MAazCQ,EAGJ,QAFAY,GAAOF,OAHHA,EAXuDG,UAcpDH,EAAWI,MACVL,EAAM1B,QAAd,QAAAqB,EAAuBM,eAAAA,EAAWI,eAAlCV,SAAAA,EAAuCrB,SAC7B2B,EAAUK,MAAQR,IAAeC,cAA3CI,GAAAA,4BAK4BL,EAAqBC,MACzCjB,EAAO,CACTyB,EAAA,EAAAzB,EAAQ0B,MAAMC,OAAS,GAAE3B,GACzByB,EAAA,EAAAzB,EAAQ0B,MAAME,WAAa,OAAM5B,GAC3B,MAAA6B,EAAcC,OAAOC,iBAAiB/B,GAAS2B,OAErD3B,EAAQgC,UAAUC,IAAIhB,GAAUD,EAAa,UAAY,YACzDhB,EAAQgC,UAAUE,OAAOjB,GAAUD,EAAa,WAAa,WAEvD,MAAAW,EAASG,OAAOC,iBAAiB/B,GAAS2B,OAChDF,EAAA,EAAAzB,EAAQ0B,MAAMC,OAASE,EAAW7B,GAGlCmC,uBAAqB,KACnBV,EAAA,EAAAzB,EAAQ0B,MAAME,WAAa,GAAE5B,GAC7BmC,uBAAqB,KACnBV,EAAA,EAAAzB,EAAQ0B,MAAMC,OAASA,EAAM3B,EAAA,aAK3BoC,EAAO,KACXX,EAAA,EAAAzB,EAAQ0B,MAAMC,OAAS,GAAE3B,GACzBA,EAAQqC,oBAAoB,gBAAiBD,EAAO,EAGtDpC,EAAQsC,iBAAiB,gBAAiBF,IA9C3CG,CAAiBpC,EAAQiB,qEAuFyB1D,EAAK8E,aAsCpB7B,GAAAD,EAAYC,2CAHvCX,EAAOwC"}
1
+ {"version":3,"file":"sidebar-feature-group.nested.js","sources":["../../../../src/components/sidebar/sidebar-feature-group.nested.svelte"],"sourcesContent":["<svelte:options />\n\n<script lang=\"ts\">\n import type {\n FeatureGroup,\n Feature,\n A11yLabels,\n Selection,\n } from './sidebar.types';\n import FeatureComponent from './sidebar-feature.nested.svelte';\n import {\n isSidebarOpen,\n selectedFeature,\n selectFeature,\n } from '../../utilities/sidebar-service';\n import { EventHandler } from '../../utilities/EventHandler';\n import {\n get_current_component,\n createEventDispatcher,\n } from 'svelte/internal';\n\n export let featureGroup: FeatureGroup;\n export let expand: boolean;\n export let a11yLabels: A11yLabels;\n let eventHandler = new EventHandler(\n get_current_component(),\n createEventDispatcher(),\n );\n let content: HTMLElement;\n\n $: updateSelection(expand, $isSidebarOpen, featureGroup, $selectedFeature);\n $: updateContentCSS(expand, $isSidebarOpen);\n\n let isSelected = false;\n\n let label: HTMLElement;\n\n function updateSelection(\n isExpanded: boolean,\n isOpen: boolean,\n group: FeatureGroup,\n selection?: Selection,\n ): void {\n isSelected =\n (selection?.lv0 &&\n group.code === selection?.lv0?.code &&\n (!selection.lv1 || !isExpanded || !isOpen)) ??\n false;\n }\n\n // Update the CSS programatically to have a nice animation on height between 0px and 'auto'\n function updateContentCSS(isExpanded: boolean, isOpen: boolean): void {\n if (content) {\n content.style.height = '';\n content.style.transition = 'none';\n const startHeight = window.getComputedStyle(content).height;\n\n content.classList.add(isOpen && isExpanded ? 'is-open' : 'is-close');\n content.classList.remove(isOpen && isExpanded ? 'is-close' : 'is-open');\n\n const height = window.getComputedStyle(content).height;\n content.style.height = startHeight;\n\n // wait until the next frame so that everything has time to update before starting the transition\n requestAnimationFrame(() => {\n content.style.transition = '';\n requestAnimationFrame(() => {\n content.style.height = height;\n });\n });\n\n // Clear the saved height values after the transition\n const handler = () => {\n content.style.height = '';\n content.removeEventListener('transitionend', handler);\n };\n\n content.addEventListener('transitionend', handler);\n }\n }\n\n function generateIcon(iconname: string): string {\n return `${iconname} size=\"1.5rem\"`;\n }\n\n function handleClick(feature: Feature) {\n if (!feature.disabled) {\n // Only select the feature if it is the last level item\n if (feature.items?.length) {\n eventHandler.dispatch('feature-click', feature);\n } else {\n selectFeature(feature.code);\n }\n }\n }\n</script>\n\n<button\n class=\"mc-feature-group {isSelected ? 'is-selected' : ''} {$isSidebarOpen\n ? 'is-open'\n : 'is-close'}\"\n aria-label={featureGroup.label}\n aria-expanded={$isSidebarOpen && expand}\n aria-controls=\"{featureGroup.code}-list\"\n id={featureGroup.code}\n>\n <span class=\"mc-feature-group__container\">\n {#if featureGroup.icon}\n <span class=\"mc-feature-group__icon\">\n {@html `<${generateIcon(featureGroup.icon)} />`}\n </span>\n {/if}\n {#if $$slots.icon}\n <span class=\"mc-feature-group__icon\">\n <slot name=\"icon\" />\n </span>\n {/if}\n {#if featureGroup.iconPath}\n <svg class=\"mc-feature-group__icon\">\n <use href={featureGroup.iconPath} />\n </svg>\n {/if}\n {#if $isSidebarOpen}\n <span class=\"mc-feature-group__label\" bind:this={label}>\n {featureGroup.label}\n </span>\n {#if label?.offsetHeight < label?.scrollHeight}\n <div aria-hidden=\"true\" class=\"mc-feature-group__label__tooltip\">\n <div class=\"mc-feature-group__label__tooltip__pointer\"><div /></div>\n <span>{featureGroup.label}</span>\n </div>\n {/if}\n {#if !expand}\n <svg\n class=\"mc-feature-group__icon\"\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n ><path\n d=\"M13 7H9V3a1 1 0 00-2 0v4H3a1 1 0 000 2h4v4a1 1 0 002 0V9h4a1 1 0 000-2z\"\n /></svg\n >\n {:else}\n <svg\n class=\"mc-feature-group__icon\"\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n ><path d=\"M12 9H4a1 1 0 010-2h8a1 1 0 010 2z\" /></svg\n >\n {/if}\n {/if}\n </span>\n</button>\n<ul\n class=\"mc-feature-group__content is-close\"\n aria-hidden={!$isSidebarOpen || !expand}\n id=\"{featureGroup.code}-list\"\n bind:this={content}\n>\n {#each featureGroup.items as feature}\n <li on:click|stopPropagation={() => handleClick(feature)}>\n <FeatureComponent {feature} {a11yLabels} />\n </li>\n {/each}\n</ul>\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n @import './_c.sidebar';\n\n .mc-feature-group {\n background: none;\n border: none;\n color: $color-sidebar-text-color;\n cursor: pointer;\n font-size: inherit;\n font-family: inherit;\n text-align: initial;\n margin: 0;\n padding: 0;\n overflow: hidden;\n\n &__icon {\n fill: $color-sidebar-icon;\n height: 1.5rem;\n width: 1.5rem;\n }\n\n &__container {\n display: flex;\n align-items: center;\n margin: 5px 0;\n padding: 8px 0px;\n @include transition(margin 300ms ease-in-out);\n }\n\n &__label {\n margin: 0 8px;\n width: 200px;\n min-width: 200px;\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n line-clamp: 2;\n -webkit-box-orient: vertical;\n\n &__tooltip {\n opacity: 0;\n transition: 0s opacity;\n background-color: $color-sidebar-divider-background;\n border: 1px solid $color-sidebar-text-color;\n border-radius: 4px;\n position: absolute;\n pointer-events: none;\n left: calc(100% - 16px);\n padding: 8px 16px;\n width: 188px;\n\n &__pointer {\n position: absolute;\n top: 50%;\n left: -8px;\n top: calc(50% - 6px);\n width: 0;\n height: 0;\n border-top: 6px solid transparent;\n border-bottom: 6px solid transparent;\n border-right: 8px solid white;\n\n & div {\n position: relative;\n top: -6px;\n left: 2px;\n width: 0;\n height: 0;\n border-top: 6px solid transparent;\n border-bottom: 6px solid transparent;\n border-right: 8px solid $color-sidebar-divider-background;\n }\n }\n }\n\n &:hover + .mc-feature-group__label__tooltip {\n opacity: 1;\n transition-delay: 1s;\n }\n }\n\n &__content {\n overflow: hidden;\n @include transition(height 300ms ease-in-out);\n &.is-close {\n height: 0;\n }\n\n &.is-open {\n height: auto;\n }\n }\n\n &.is-selected {\n background: $color-sidebar-feature-selected-background;\n }\n\n &.is-close {\n .mc-feature-group__container {\n margin: 0 20px;\n width: 24px;\n }\n }\n\n &.is-open {\n .mc-feature-group__container {\n margin: 0 32px;\n }\n }\n\n &:hover {\n background: $color-sidebar-feature-hover-background;\n }\n\n &:focus-visible {\n box-shadow: none;\n border: none;\n outline: none;\n\n .mc-feature-group__container {\n box-shadow: none;\n border: none;\n border-radius: 6px;\n outline: 1px solid #0b96cc;\n }\n }\n }\n\n ul,\n li {\n list-style-type: none;\n margin: 0;\n padding: 0;\n display: flex;\n width: 100%;\n }\n\n ul {\n align-items: start;\n flex-direction: column;\n justify-content: center;\n\n li {\n flex-direction: column;\n box-sizing: border-box;\n }\n }\n</style>\n"],"names":["generateIcon","ctx","icon","insert","target","span","anchor","innerHTML","raw_value","attr","use","use_href_value","iconPath","svg","append","dirty","t0_value","label","if_block0","offsetHeight","scrollHeight","create_if_block_2","create_if_block_1","set_data","t0","t1_value","div2","div1","t1","path","li","create_if_block_5","if_block1","create_if_block_4","if_block2","create_if_block_3","create_if_block","each_value","items","length","i","button","button_aria_label_value","button_aria_expanded_value","button_aria_controls_value","code","button_id_value","ul","ul_aria_hidden_value","ul_id_value","current","each_blocks","iconname","content","featureGroup","$$props","expand","a11yLabels","eventHandler","EventHandler","get_current_component","createEventDispatcher","isSelected","handleClick","feature","disabled","_a","dispatch","selectFeature","isExpanded","isOpen","group","selection","$isSidebarOpen","_b","$selectedFeature","lv0","lv1","$$invalidate","style","height","transition","startHeight","window","getComputedStyle","classList","add","remove","requestAnimationFrame","handler","removeEventListener","addEventListener","updateContentCSS","$$value"],"mappings":"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"}
@@ -115,6 +115,11 @@
115
115
  <slot name="icon" />
116
116
  </span>
117
117
  {/if}
118
+ {#if featureGroup.iconPath}
119
+ <svg class="mc-feature-group__icon">
120
+ <use href={featureGroup.iconPath} />
121
+ </svg>
122
+ {/if}
118
123
  {#if $isSidebarOpen}
119
124
  <span class="mc-feature-group__label" bind:this={label}>
120
125
  {featureGroup.label}