@mozaic-ds/web-components 0.4.1-beta.0 → 0.6.0

package/public/components/layer/Layer.js

@@ -1,2 +1,2 @@
-import{S as e,i as t,a as i,b as r,f as o,s as a,c as n,e as s,d as l,t as d,n as c,g as m,h as b,j as y,l as g,k as x,m as p,o as h,H as f,p as w,a1 as _,q as u,v}from"../../index-c33b3772.js";import{E as k}from"../../EventHandler-02058705.js";function $(e){let t,i=`<${D(e[5])} class="mc-layer__icon" />`;return{c(){t=s("span"),m(t,"class","mc-layer__icon")},m(e,o){r(e,t,o),t.innerHTML=i},p(e,r){32&r&&i!==(i=`<${D(e[5])} class="mc-layer__icon" />`)&&(t.innerHTML=i)},d(e){e&&h(t)}}}function M(e){let t;return{c(){t=s("footer"),t.innerHTML='<slot name="footer"></slot>',m(t,"class","mc-layer__footer")},m(e,i){r(e,t,i)},d(e){e&&h(t)}}}function A(e){let t,i,o,a,w,_,u,v,k,A,D,I,j,L,z,C,S,T,E,H,O,Z,N,P=e[5]&&$(e),Q=!e[8]&&M(),W=[{class:"mc-layer"},{tabindex:"-1"},{role:"dialog"},{"aria-labelledby":"layerTitle"},{"aria-modal":"true"},{"aria-hidden":T=!e[0]},e[6]],q={};for(let e=0;e<W.length;e+=1)q=n(q,W[e]);return{c(){t=s("div"),i=s("div"),o=s("div"),a=s("div"),P&&P.c(),w=l(),_=s("h2"),u=d(e[1]),v=l(),k=s("button"),A=s("span"),D=d(e[4]),I=l(),j=s("main"),L=s("article"),L.innerHTML='<slot name="content"></slot>',C=l(),Q&&Q.c(),E=l(),H=s("div"),this.c=c,m(_,"class","mc-layer__title"),m(_,"id","modallayerTitleTitle"),m(A,"class","mc-layer__close-text"),m(k,"class","mc-layer__close"),m(k,"type","button"),m(a,"class","mc-layer__header"),m(L,"class","mc-layer__content"),m(j,"class",z="mc-layer__body "+(e[3]?"mc-layer__body--overflowing-scroll-edge":"")),m(o,"class",S="mc-layer__dialog "+(e[0]?" is-open":"")+" "+(e[2]?" mc-layer__dialog--extend":"")),m(o,"role","document"),b(i,q),m(H,"class",O="mc-layer-overlay "+(e[0]?" is-visible":"")),m(H,"tabindex","-1"),m(H,"role","dialog")},m(n,s){r(n,t,s),y(t,i),y(i,o),y(o,a),P&&P.m(a,null),y(a,w),y(a,_),y(_,u),y(a,v),y(a,k),y(k,A),y(A,D),y(o,I),y(o,j),y(j,L),y(o,C),Q&&Q.m(o,null),y(t,E),y(t,H),e[13](t),Z||(N=[g(k,"click",e[11]),g(H,"click",e[12])],Z=!0)},p(e,[t]){e[5]?P?P.p(e,t):(P=$(e),P.c(),P.m(a,w)):P&&(P.d(1),P=null),2&t&&x(u,e[1]),16&t&&x(D,e[4]),8&t&&z!==(z="mc-layer__body "+(e[3]?"mc-layer__body--overflowing-scroll-edge":""))&&m(j,"class",z),e[8]?Q&&(Q.d(1),Q=null):Q||(Q=M(),Q.c(),Q.m(o,null)),5&t&&S!==(S="mc-layer__dialog "+(e[0]?" is-open":"")+" "+(e[2]?" mc-layer__dialog--extend":""))&&m(o,"class",S),b(i,q=p(W,[{class:"mc-layer"},{tabindex:"-1"},{role:"dialog"},{"aria-labelledby":"layerTitle"},{"aria-modal":"true"},1&t&&T!==(T=!e[0])&&{"aria-hidden":T},64&t&&e[6]])),1&t&&O!==(O="mc-layer-overlay "+(e[0]?" is-visible":""))&&m(H,"class",O)},i:c,o:c,d(i){i&&h(t),P&&P.d(),Q&&Q.d(),e[13](null),Z=!1,f(N)}}}function D(e){return`${e} size="1.5rem"`}function I(e,t,i){let r,o;const a=["title","isopen","extended","scrollbaredge","closebuttontext","iconname","hidefooter"];let s,l=w(t,a),{title:d}=t,{isopen:c}=t,{extended:m}=t,{scrollbaredge:b}=t,{closebuttontext:y="Close"}=t,{iconname:g}=t,{hidefooter:x}=t,p=new k;function h(){i(0,c=!1)}_((()=>{const e=s.querySelector(".mc-layer__body"),t=s.querySelector(".mc-layer__content"),i=b?"mc-layer__body--overflowing-scroll-edge":"mc-layer__body--overflowing";if(e&&t){const r=e.clientHeight;t.scrollHeight>r?e.classList.add(i):e.classList.remove(i)}}));return e.$$set=e=>{t=n(n({},t),u(e)),i(15,l=w(t,a)),"title"in e&&i(1,d=e.title),"isopen"in e&&i(0,c=e.isopen),"extended"in e&&i(2,m=e.extended),"scrollbaredge"in e&&i(3,b=e.scrollbaredge),"closebuttontext"in e&&i(4,y=e.closebuttontext),"iconname"in e&&i(5,g=e.iconname),"hidefooter"in e&&i(10,x=e.hidefooter)},e.$$.update=()=>{1024&e.$$.dirty&&i(8,r=null!=x&&x),1&e.$$.dirty&&(c?p.dispatch("layer-opened",{}):p.dispatch("layer-closed",{})),i(6,o=Object.assign({},l)),64&e.$$.dirty&&delete o.class},[c,d,m,b,y,g,o,s,r,h,x,()=>h(),()=>h(),function(e){v[e?"unshift":"push"]((()=>{s=e,i(7,s)}))}]}class j extends e{constructor(e){super();const n=document.createElement("style");n.textContent='.mc-layer{font-family:"LeroyMerlin", 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:1999999999;display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden}.mc-layer *{-webkit-box-sizing:inherit;box-sizing:inherit}.mc-layer--ltr{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mc-layer--ltr .mc-layer__dialog{-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0)}.mc-layer:not(.mc-layer--ltr){-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mc-layer:not(.mc-layer--ltr) .mc-layer__dialog{-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0)}.mc-layer__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;height:100%;max-width:calc(100% - 2rem);-webkit-transition:visibility 0s linear 0.4s, -webkit-transform 0.4s;transition:visibility 0s linear 0.4s, -webkit-transform 0.4s;-o-transition:visibility 0s linear 0.4s, transform 0.4s;transition:visibility 0s linear 0.4s, transform 0.4s;transition:visibility 0s linear 0.4s, transform 0.4s, -webkit-transform 0.4s;visibility:hidden;width:100%}@media screen and (min-width: 680px){.mc-layer__dialog{max-width:25rem}}@media screen and (min-width: 769px){.mc-layer__dialog{max-width:28.6875rem}}@media screen and (min-width: 1024px){.mc-layer__dialog{max-width:28rem}}@media screen and (min-width: 680px){.mc-layer__dialog--extend{max-width:31.75rem}}@media screen and (min-width: 769px){.mc-layer__dialog--extend{max-width:36.3125rem}}@media screen and (min-width: 1024px){.mc-layer__dialog--extend{max-width:43rem}}.mc-layer__header,.mc-layer__footer{padding-left:1rem;padding-right:1rem}@media screen and (min-width: 1024px){.mc-layer__header,.mc-layer__footer{padding-left:2rem;padding-right:2rem}}.mc-layer__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-bottom:0.5rem;padding-top:1rem;min-height:3.75rem;position:relative}.mc-layer__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: 1024px){.mc-layer__header{padding-bottom:0.75rem;padding-top:1.25rem;min-height:4.25rem}}.mc-layer__icon{fill:#666666;height:1.5rem;margin-right:0.75rem;width:1.5rem}.mc-layer__title{font-size:0.875rem;line-height:1.2857142857;font-weight:400;color:#666666;margin-bottom:0;margin-top:0}.mc-layer__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;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzgwODA4MCI+PHBhdGggZD0iTTE3LjQxIDE2bDguOC04Ljc5YTEgMSAwIDEwLTEuNDItMS40MkwxNiAxNC41OWwtOC43OS04LjhhMSAxIDAgMDAtMS40MiAxLjQybDguOCA4Ljc5LTguOCA4Ljc5YTEgMSAwIDAwMCAxLjQyIDEgMSAwIDAwMS40MiAwbDguNzktOC44IDguNzkgOC44YTEgMSAwIDAwMS40MiAwIDEgMSAwIDAwMC0xLjQyeiIvPjwvc3ZnPg==") no-repeat;background-size:contain;cursor:pointer;height:2rem;margin-left:auto;width:2rem}.mc-layer__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;-o-transition:box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease}.mc-layer__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-layer__close:focus::after{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc}.mc-layer__body{-webkit-box-flex:1;-ms-flex:1 1;flex:1 1;overflow:hidden;padding-left:0.5rem;padding-right:0.5rem}@media screen and (min-width: 1024px){.mc-layer__body{padding-left:1rem;padding-right:1rem}}.mc-layer__body--overflowing-scroll-edge+.mc-layer__footer{-webkit-box-shadow:0px 4px 20px 0px rgba(25, 25, 25, 0.2);box-shadow:0px 4px 20px 0px rgba(25, 25, 25, 0.2);position:relative}.mc-layer__body--overflowing-scroll-edge{padding-left:0;padding-right:0}.mc-layer__body--overflowing-scroll-edge .mc-layer__content{padding-left:1rem;padding-right:1.125rem}@media screen and (min-width: 1024px){.mc-layer__body--overflowing-scroll-edge .mc-layer__content{padding-left:2rem;padding-right:2rem}}.mc-layer__content{max-height:100%;overflow-y:auto;overflow-x:hidden;padding:1.5rem 0.5rem 3rem;scrollbar-color:#666666 #e6e6e6;scrollbar-width:thin}@media screen and (min-width: 1024px){.mc-layer__content{padding-left:1rem;padding-right:1rem}}.mc-layer__content::-webkit-scrollbar{background-color:#e6e6e6;width:0.25rem}.mc-layer__content::-webkit-scrollbar-thumb{background:#666666}.mc-layer__footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding-top:1rem;padding-bottom:1rem}@media screen and (min-width: 1024px){.mc-layer__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;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding-top:1.5rem;padding-bottom:1.5rem}}.mc-layer__footer>:first-child:not(:only-child){margin-bottom:0.75rem}@media screen and (min-width: 1024px){.mc-layer__footer>:first-child:not(:only-child){margin-bottom:0;margin-right:1rem}}.mc-layer-open{overflow:hidden}.mc-layer .mc-layer__dialog.is-open{pointer-events:all;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transition:visibility 0s linear 0s, -webkit-transform 0.4s;transition:visibility 0s linear 0s, -webkit-transform 0.4s;-o-transition:visibility 0s linear 0s, transform 0.4s;transition:visibility 0s linear 0s, transform 0.4s;transition:visibility 0s linear 0s, transform 0.4s, -webkit-transform 0.4s;visibility:visible}.mc-layer-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;-o-transition:opacity 0.4s ease, visibility 0ms 0.4s;transition:opacity 0.4s ease, visibility 0ms 0.4s;z-index:1999999998}.mc-layer-overlay.is-visible{opacity:1;pointer-events:all;-webkit-transition:opacity 0.4s ease, visibility 0ms;-o-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},I,A,a,{title:1,isopen:0,extended:2,scrollbaredge:3,closebuttontext:4,iconname:5,hidefooter:10},null),e&&(e.target&&r(e.target,this,e.anchor),e.props&&(this.$set(e.props),o()))}static get observedAttributes(){return["title","isopen","extended","scrollbaredge","closebuttontext","iconname","hidefooter"]}get title(){return this.$$.ctx[1]}set title(e){this.$$set({title:e}),o()}get isopen(){return this.$$.ctx[0]}set isopen(e){this.$$set({isopen:e}),o()}get extended(){return this.$$.ctx[2]}set extended(e){this.$$set({extended:e}),o()}get scrollbaredge(){return this.$$.ctx[3]}set scrollbaredge(e){this.$$set({scrollbaredge:e}),o()}get closebuttontext(){return this.$$.ctx[4]}set closebuttontext(e){this.$$set({closebuttontext:e}),o()}get iconname(){return this.$$.ctx[5]}set iconname(e){this.$$set({iconname:e}),o()}get hidefooter(){return this.$$.ctx[10]}set hidefooter(e){this.$$set({hidefooter:e}),o()}}export{j as default};
+import{S as e,i as t,a as i,b as r,f as a,s as o,c as n,e as l,d as s,t as d,n as c,g as m,h as b,j as y,l as g,k as x,m as p,o as h,H as f,p as w,a1 as _,q as u,v}from"../../index-c33b3772.js";import{E as k}from"../../EventHandler-02058705.js";function $(e){let t,i=`<${D(e[5])} class="mc-layer__icon" />`;return{c(){t=l("span"),m(t,"class","mc-layer__icon")},m(e,a){r(e,t,a),t.innerHTML=i},p(e,r){32&r&&i!==(i=`<${D(e[5])} class="mc-layer__icon" />`)&&(t.innerHTML=i)},d(e){e&&h(t)}}}function M(e){let t;return{c(){t=l("footer"),t.innerHTML='<slot name="footer"></slot>',m(t,"class","mc-layer__footer")},m(e,i){r(e,t,i)},d(e){e&&h(t)}}}function A(e){let t,i,a,o,w,_,u,v,k,A,D,I,j,L,z,C,S,T,E,H,O,Z,N,P=e[5]&&$(e),Q=!e[9]&&M(),W=[{class:"mc-layer"},{tabindex:"-1"},{role:"dialog"},{"aria-labelledby":e[6]},{"aria-modal":"true"},{"aria-hidden":T=!e[0]},e[7]],q={};for(let e=0;e<W.length;e+=1)q=n(q,W[e]);return{c(){t=l("div"),i=l("div"),a=l("div"),o=l("div"),P&&P.c(),w=s(),_=l("h2"),u=d(e[1]),v=s(),k=l("button"),A=l("span"),D=d(e[4]),I=s(),j=l("main"),L=l("article"),L.innerHTML='<slot name="content"></slot>',C=s(),Q&&Q.c(),E=s(),H=l("div"),this.c=c,m(_,"class","mc-layer__title"),m(_,"id","modallayerTitleTitle"),m(A,"class","mc-layer__close-text"),m(k,"class","mc-layer__close"),m(k,"type","button"),m(o,"class","mc-layer__header"),m(L,"class","mc-layer__content"),m(j,"class",z="mc-layer__body "+(e[3]?"mc-layer__body--overflowing-scroll-edge":"")),m(a,"class",S="mc-layer__dialog "+(e[0]?" is-open":"")+" "+(e[2]?" mc-layer__dialog--extend":"")),m(a,"role","document"),b(i,q),m(H,"class",O="mc-layer-overlay "+(e[0]?" is-visible":"")),m(H,"tabindex","-1"),m(H,"role","dialog")},m(n,l){r(n,t,l),y(t,i),y(i,a),y(a,o),P&&P.m(o,null),y(o,w),y(o,_),y(_,u),y(o,v),y(o,k),y(k,A),y(A,D),y(a,I),y(a,j),y(j,L),y(a,C),Q&&Q.m(a,null),y(t,E),y(t,H),e[14](t),Z||(N=[g(k,"click",e[12]),g(H,"click",e[13])],Z=!0)},p(e,[t]){e[5]?P?P.p(e,t):(P=$(e),P.c(),P.m(o,w)):P&&(P.d(1),P=null),2&t&&x(u,e[1]),16&t&&x(D,e[4]),8&t&&z!==(z="mc-layer__body "+(e[3]?"mc-layer__body--overflowing-scroll-edge":""))&&m(j,"class",z),e[9]?Q&&(Q.d(1),Q=null):Q||(Q=M(),Q.c(),Q.m(a,null)),5&t&&S!==(S="mc-layer__dialog "+(e[0]?" is-open":"")+" "+(e[2]?" mc-layer__dialog--extend":""))&&m(a,"class",S),b(i,q=p(W,[{class:"mc-layer"},{tabindex:"-1"},{role:"dialog"},64&t&&{"aria-labelledby":e[6]},{"aria-modal":"true"},1&t&&T!==(T=!e[0])&&{"aria-hidden":T},128&t&&e[7]])),1&t&&O!==(O="mc-layer-overlay "+(e[0]?" is-visible":""))&&m(H,"class",O)},i:c,o:c,d(i){i&&h(t),P&&P.d(),Q&&Q.d(),e[14](null),Z=!1,f(N)}}}function D(e){return`${e} size="1.5rem"`}function I(e,t,i){let r,a;const o=["title","isopen","extended","scrollbaredge","closebuttontext","iconname","hidefooter","arialabelledby"];let l,s=w(t,o),{title:d}=t,{isopen:c}=t,{extended:m}=t,{scrollbaredge:b}=t,{closebuttontext:y="Close"}=t,{iconname:g}=t,{hidefooter:x}=t,{arialabelledby:p="LayerTitle"}=t,h=new k;function f(){i(0,c=!1)}_((()=>{const e=l.querySelector(".mc-layer__body"),t=l.querySelector(".mc-layer__content"),i=b?"mc-layer__body--overflowing-scroll-edge":"mc-layer__body--overflowing";if(e&&t){const r=e.clientHeight;t.scrollHeight>r?e.classList.add(i):e.classList.remove(i)}}));return e.$$set=e=>{t=n(n({},t),u(e)),i(16,s=w(t,o)),"title"in e&&i(1,d=e.title),"isopen"in e&&i(0,c=e.isopen),"extended"in e&&i(2,m=e.extended),"scrollbaredge"in e&&i(3,b=e.scrollbaredge),"closebuttontext"in e&&i(4,y=e.closebuttontext),"iconname"in e&&i(5,g=e.iconname),"hidefooter"in e&&i(11,x=e.hidefooter),"arialabelledby"in e&&i(6,p=e.arialabelledby)},e.$$.update=()=>{2048&e.$$.dirty&&i(9,r=null!=x&&x),1&e.$$.dirty&&(c?h.dispatch("layer-opened",{}):h.dispatch("layer-closed",{})),i(7,a=Object.assign({},s)),128&e.$$.dirty&&delete a.class},[c,d,m,b,y,g,p,a,l,r,f,x,()=>f(),()=>f(),function(e){v[e?"unshift":"push"]((()=>{l=e,i(8,l)}))}]}class j extends e{constructor(e){super();const n=document.createElement("style");n.textContent='.mc-layer{font-family:"LeroyMerlin", 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:1999999999;display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden}.mc-layer *{-webkit-box-sizing:inherit;box-sizing:inherit}.mc-layer--ltr{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mc-layer--ltr .mc-layer__dialog{-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0)}.mc-layer:not(.mc-layer--ltr){-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mc-layer:not(.mc-layer--ltr) .mc-layer__dialog{-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0)}.mc-layer__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;height:100%;max-width:calc(100% - 2rem);-webkit-transition:visibility 0s linear 0.4s, -webkit-transform 0.4s;transition:visibility 0s linear 0.4s, -webkit-transform 0.4s;-o-transition:visibility 0s linear 0.4s, transform 0.4s;transition:visibility 0s linear 0.4s, transform 0.4s;transition:visibility 0s linear 0.4s, transform 0.4s, -webkit-transform 0.4s;visibility:hidden;width:100%}@media screen and (min-width: 680px){.mc-layer__dialog{max-width:25rem}}@media screen and (min-width: 769px){.mc-layer__dialog{max-width:28.6875rem}}@media screen and (min-width: 1024px){.mc-layer__dialog{max-width:28rem}}@media screen and (min-width: 680px){.mc-layer__dialog--extend{max-width:31.75rem}}@media screen and (min-width: 769px){.mc-layer__dialog--extend{max-width:36.3125rem}}@media screen and (min-width: 1024px){.mc-layer__dialog--extend{max-width:43rem}}.mc-layer__header,.mc-layer__footer{padding-left:1rem;padding-right:1rem}@media screen and (min-width: 1024px){.mc-layer__header,.mc-layer__footer{padding-left:2rem;padding-right:2rem}}.mc-layer__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-bottom:0.5rem;padding-top:1rem;min-height:3.75rem;position:relative}.mc-layer__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: 1024px){.mc-layer__header{padding-bottom:0.75rem;padding-top:1.25rem;min-height:4.25rem}}.mc-layer__icon{fill:#666666;height:1.5rem;margin-right:0.75rem;width:1.5rem}.mc-layer__title{font-size:0.875rem;line-height:1.2857142857;font-weight:400;color:#666666;margin-bottom:0;margin-top:0}.mc-layer__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;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzgwODA4MCI+PHBhdGggZD0iTTE3LjQxIDE2bDguOC04Ljc5YTEgMSAwIDEwLTEuNDItMS40MkwxNiAxNC41OWwtOC43OS04LjhhMSAxIDAgMDAtMS40MiAxLjQybDguOCA4Ljc5LTguOCA4Ljc5YTEgMSAwIDAwMCAxLjQyIDEgMSAwIDAwMS40MiAwbDguNzktOC44IDguNzkgOC44YTEgMSAwIDAwMS40MiAwIDEgMSAwIDAwMC0xLjQyeiIvPjwvc3ZnPg==") no-repeat;background-size:contain;cursor:pointer;height:2rem;margin-left:auto;width:2rem}.mc-layer__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;-o-transition:box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease}.mc-layer__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-layer__close:focus::after{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc}.mc-layer__body{-webkit-box-flex:1;-ms-flex:1 1;flex:1 1;overflow:hidden;padding-left:0.5rem;padding-right:0.5rem}@media screen and (min-width: 1024px){.mc-layer__body{padding-left:1rem;padding-right:1rem}}.mc-layer__body--overflowing-scroll-edge+.mc-layer__footer{-webkit-box-shadow:0px 4px 20px 0px rgba(25, 25, 25, 0.2);box-shadow:0px 4px 20px 0px rgba(25, 25, 25, 0.2);position:relative}.mc-layer__body--overflowing-scroll-edge{padding-left:0;padding-right:0}.mc-layer__body--overflowing-scroll-edge .mc-layer__content{padding-left:1rem;padding-right:1.125rem}@media screen and (min-width: 1024px){.mc-layer__body--overflowing-scroll-edge .mc-layer__content{padding-left:2rem;padding-right:2rem}}.mc-layer__content{max-height:100%;overflow-y:auto;overflow-x:hidden;padding:1.5rem 0.5rem 3rem;scrollbar-color:#666666 #e6e6e6;scrollbar-width:thin}@media screen and (min-width: 1024px){.mc-layer__content{padding-left:1rem;padding-right:1rem}}.mc-layer__content::-webkit-scrollbar{background-color:#e6e6e6;width:0.25rem}.mc-layer__content::-webkit-scrollbar-thumb{background:#666666}.mc-layer__footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding-top:1rem;padding-bottom:1rem}@media screen and (min-width: 1024px){.mc-layer__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;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding-top:1.5rem;padding-bottom:1.5rem}}.mc-layer__footer>:first-child:not(:only-child){margin-bottom:0.75rem}@media screen and (min-width: 1024px){.mc-layer__footer>:first-child:not(:only-child){margin-bottom:0;margin-right:1rem}}.mc-layer-open{overflow:hidden}.mc-layer .mc-layer__dialog.is-open{pointer-events:all;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transition:visibility 0s linear 0s, -webkit-transform 0.4s;transition:visibility 0s linear 0s, -webkit-transform 0.4s;-o-transition:visibility 0s linear 0s, transform 0.4s;transition:visibility 0s linear 0s, transform 0.4s;transition:visibility 0s linear 0s, transform 0.4s, -webkit-transform 0.4s;visibility:visible}.mc-layer-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;-o-transition:opacity 0.4s ease, visibility 0ms 0.4s;transition:opacity 0.4s ease, visibility 0ms 0.4s;z-index:1999999998}.mc-layer-overlay.is-visible{opacity:1;pointer-events:all;-webkit-transition:opacity 0.4s ease, visibility 0ms;-o-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},I,A,o,{title:1,isopen:0,extended:2,scrollbaredge:3,closebuttontext:4,iconname:5,hidefooter:11,arialabelledby:6},null),e&&(e.target&&r(e.target,this,e.anchor),e.props&&(this.$set(e.props),a()))}static get observedAttributes(){return["title","isopen","extended","scrollbaredge","closebuttontext","iconname","hidefooter","arialabelledby"]}get title(){return this.$$.ctx[1]}set title(e){this.$$set({title:e}),a()}get isopen(){return this.$$.ctx[0]}set isopen(e){this.$$set({isopen:e}),a()}get extended(){return this.$$.ctx[2]}set extended(e){this.$$set({extended:e}),a()}get scrollbaredge(){return this.$$.ctx[3]}set scrollbaredge(e){this.$$set({scrollbaredge:e}),a()}get closebuttontext(){return this.$$.ctx[4]}set closebuttontext(e){this.$$set({closebuttontext:e}),a()}get iconname(){return this.$$.ctx[5]}set iconname(e){this.$$set({iconname:e}),a()}get hidefooter(){return this.$$.ctx[11]}set hidefooter(e){this.$$set({hidefooter:e}),a()}get arialabelledby(){return this.$$.ctx[6]}set arialabelledby(e){this.$$set({arialabelledby:e}),a()}}export{j as default};
 //# sourceMappingURL=Layer.js.map

package/public/components/layer/Layer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layer.js","sources":["../../../src/components/layer/Layer.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import { onMount } from 'svelte/internal';\n  import { EventHandler } from '../../utilities/EventHandler';\n  export let title: string;\n  export let isopen: boolean;\n  export let extended: boolean;\n  export let scrollbaredge: boolean;\n  export let closebuttontext = 'Close';\n  export let iconname: string | undefined = undefined;\n  export let hidefooter: boolean;\n\n  $: hideFooter = hidefooter ?? false;\n  $: isopen\n    ? eventHandler.dispatch('layer-opened', {})\n    : eventHandler.dispatch('layer-closed', {});\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n  let root: HTMLElement;\n  let eventHandler = new EventHandler();\n  onMount(() => {\n    const body = root.querySelector('.mc-layer__body');\n    const content = root.querySelector('.mc-layer__content');\n    const overflowingClass = !scrollbaredge\n      ? 'mc-layer__body--overflowing'\n      : 'mc-layer__body--overflowing-scroll-edge';\n    if (body && content) {\n      const bodyHeight = body.clientHeight;\n      const contentHeight = content.scrollHeight;\n\n      if (contentHeight > bodyHeight) {\n        body.classList.add(overflowingClass);\n      } else {\n        body.classList.remove(overflowingClass);\n      }\n    }\n  });\n\n  function onClose(): void {\n    isopen = false;\n  }\n\n  function generateIconName(iconname: string): string {\n    return `${iconname} size=\"1.5rem\"`;\n  }\n</script>\n\n<div bind:this={root}>\n  <div\n    class=\"mc-layer\"\n    tabindex=\"-1\"\n    role=\"dialog\"\n    aria-labelledby=\"layerTitle\"\n    aria-modal=\"true\"\n    aria-hidden={!isopen}\n    {...attributes}\n  >\n    <div\n      class=\"mc-layer__dialog {isopen ? ' is-open' : ''} {extended\n        ? ' mc-layer__dialog--extend'\n        : ''}\"\n      role=\"document\"\n    >\n      <div class=\"mc-layer__header\">\n        {#if iconname}\n          <span class=\"mc-layer__icon\">\n            {@html `<${generateIconName(iconname)} class=\"mc-layer__icon\" />`}\n          </span>\n        {/if}\n        <h2 class=\"mc-layer__title\" id=\"modallayerTitleTitle\">{title}</h2>\n        <button\n          class=\"mc-layer__close\"\n          type=\"button\"\n          on:click={() => onClose()}\n        >\n          <span class=\"mc-layer__close-text\">{closebuttontext}</span>\n        </button>\n      </div>\n      <main\n        class=\"mc-layer__body {scrollbaredge\n          ? 'mc-layer__body--overflowing-scroll-edge'\n          : ''}\"\n      >\n        <article class=\"mc-layer__content\">\n          <slot name=\"content\" />\n        </article>\n      </main>\n      {#if !hideFooter}\n        <footer class=\"mc-layer__footer\">\n          <slot name=\"footer\" />\n        </footer>\n      {/if}\n    </div>\n  </div>\n  <div\n    class=\"mc-layer-overlay {isopen ? ' is-visible' : ''}\"\n    tabindex=\"-1\"\n    role=\"dialog\"\n    on:click={() => onClose()}\n  />\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.layer';\n</style>\n"],"names":["raw_value","generateIconName","ctx","insert","target","span","anchor","dirty","innerHTML","footer","create_if_block_1","create_if_block","div4","append","div2","div1","div0","h2","button","main","article","div3","div2_aria_hidden_value","iconname","root","title","$$props","isopen","extended","scrollbaredge","closebuttontext","hidefooter","eventHandler","EventHandler","onClose","$$invalidate","onMount","body","querySelector","content","overflowingClass","bodyHeight","clientHeight","scrollHeight","classList","add","remove","hideFooter","dispatch","attributes","Object","assign","$$restProps","class","$$value"],"mappings":"yQAmEuBA,EAAA,IAAAC,EAAiBC,EAAQ,6FADtCC,EAEMC,EAAAC,EAAAC,yBADO,GAAAC,GAAAP,KAAAA,EAAA,IAAAC,EAAiBC,EAAQ,mCAAAG,EAAAG,UAAAR,kJAsBxCG,EAEQC,EAAAK,EAAAH,qFA1BHJ,EAAQ,IAAAQ,EAAAR,MAuBTA,EAAU,IAAAS,mIAjCJT,EAAM,IAChBA,EAAU,qIAc6CA,EAAK,wCAMtBA,EAAe,mXAI9BA,EAAA,GACnB,0CACA,wCAvBmBA,EAAM,GAAG,WAAa,SAAKA,EAAA,GAChD,4BACA,sEAmCmBA,EAAM,GAAG,cAAgB,uDAhDtDC,EAqDKC,EAAAQ,EAAAN,GApDHO,EA6CKD,EAAAE,GApCHD,EAmCKC,EAAAC,GA7BHF,EAcKE,EAAAC,yBARHH,EAAiEG,EAAAC,iBACjEJ,EAMQG,EAAAE,GADNL,EAA0DK,EAAAb,iBAG9DQ,EAQME,EAAAI,GAHJN,EAESM,EAAAC,gCASfP,EAKCD,EAAAS,0EAnCUnB,EAAQ,kEAK0CA,EAAK,cAMtBA,EAAe,mCAI9BA,EAAA,GACnB,0CACA,qBAMAA,EAAU,oFA7BSA,EAAM,GAAG,WAAa,SAAKA,EAAA,GAChD,4BACA,uJANQA,EAAM,KAAA,CAAA,cAAAoB,SAChBpB,EAAU,uCAwCWA,EAAM,GAAG,cAAgB,qFArD3C,SAAAD,EAAiBsB,YACdA,gJAzBRC,kBAdOC,GAAaC,UACbC,GAAeD,YACfE,GAAiBF,iBACjBG,GAAsBH,GACtBI,gBAAAA,EAAkB,SAAOJ,GACzBH,SAAAA,GAAwCG,cACxCK,GAAmBL,EAS1BM,MAAmBC,WAmBdC,IACPC,EAAA,EAAAR,GAAS,GAnBXS,GAAO,KACC,MAAAC,EAAOb,EAAKc,cAAc,mBAC1BC,EAAUf,EAAKc,cAAc,sBAC7BE,EAAoBX,EAEtB,0CADA,8BAEA,GAAAQ,GAAQE,EAAO,OACXE,EAAaJ,EAAKK,aACFH,EAAQI,aAEVF,EAClBJ,EAAKO,UAAUC,IAAIL,GAEnBH,EAAKO,UAAUE,OAAON,+VArB3BL,EAAA,EAAEY,EAAahB,SAAAA,kBACbJ,EACCK,EAAagB,SAAS,eAAc,IACpChB,EAAagB,SAAS,eAAc,CAAA,QACrCC,EAALC,OAAAC,UAAuBC,0BACXH,EAAWI,kCAwDGnB,QAyBNA,4CAnDJV,EAAI8B"}
+{"version":3,"file":"Layer.js","sources":["../../../src/components/layer/Layer.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import { onMount } from 'svelte/internal';\n  import { EventHandler } from '../../utilities/EventHandler';\n  export let title: string;\n  export let isopen: boolean;\n  export let extended: boolean;\n  export let scrollbaredge: boolean;\n  export let closebuttontext = 'Close';\n  export let iconname: string | undefined = undefined;\n  export let hidefooter: boolean;\n  export let arialabelledby = 'LayerTitle';\n\n  $: hideFooter = hidefooter ?? false;\n  $: isopen\n    ? eventHandler.dispatch('layer-opened', {})\n    : eventHandler.dispatch('layer-closed', {});\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n  let root: HTMLElement;\n  let eventHandler = new EventHandler();\n  onMount(() => {\n    const body = root.querySelector('.mc-layer__body');\n    const content = root.querySelector('.mc-layer__content');\n    const overflowingClass = !scrollbaredge\n      ? 'mc-layer__body--overflowing'\n      : 'mc-layer__body--overflowing-scroll-edge';\n    if (body && content) {\n      const bodyHeight = body.clientHeight;\n      const contentHeight = content.scrollHeight;\n\n      if (contentHeight > bodyHeight) {\n        body.classList.add(overflowingClass);\n      } else {\n        body.classList.remove(overflowingClass);\n      }\n    }\n  });\n\n  function onClose(): void {\n    isopen = false;\n  }\n\n  function generateIconName(iconname: string): string {\n    return `${iconname} size=\"1.5rem\"`;\n  }\n</script>\n\n<div bind:this={root}>\n  <div\n    class=\"mc-layer\"\n    tabindex=\"-1\"\n    role=\"dialog\"\n    aria-labelledby={arialabelledby}\n    aria-modal=\"true\"\n    aria-hidden={!isopen}\n    {...attributes}\n  >\n    <div\n      class=\"mc-layer__dialog {isopen ? ' is-open' : ''} {extended\n        ? ' mc-layer__dialog--extend'\n        : ''}\"\n      role=\"document\"\n    >\n      <div class=\"mc-layer__header\">\n        {#if iconname}\n          <span class=\"mc-layer__icon\">\n            {@html `<${generateIconName(iconname)} class=\"mc-layer__icon\" />`}\n          </span>\n        {/if}\n        <h2 class=\"mc-layer__title\" id=\"modallayerTitleTitle\">{title}</h2>\n        <button\n          class=\"mc-layer__close\"\n          type=\"button\"\n          on:click={() => onClose()}\n        >\n          <span class=\"mc-layer__close-text\">{closebuttontext}</span>\n        </button>\n      </div>\n      <main\n        class=\"mc-layer__body {scrollbaredge\n          ? 'mc-layer__body--overflowing-scroll-edge'\n          : ''}\"\n      >\n        <article class=\"mc-layer__content\">\n          <slot name=\"content\" />\n        </article>\n      </main>\n      {#if !hideFooter}\n        <footer class=\"mc-layer__footer\">\n          <slot name=\"footer\" />\n        </footer>\n      {/if}\n    </div>\n  </div>\n  <div\n    class=\"mc-layer-overlay {isopen ? ' is-visible' : ''}\"\n    tabindex=\"-1\"\n    role=\"dialog\"\n    on:click={() => onClose()}\n  />\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.layer';\n</style>\n"],"names":["raw_value","generateIconName","ctx","insert","target","span","anchor","dirty","innerHTML","footer","create_if_block_1","create_if_block","div4","append","div2","div1","div0","h2","button","main","article","div3","div2_aria_hidden_value","iconname","root","title","$$props","isopen","extended","scrollbaredge","closebuttontext","hidefooter","arialabelledby","eventHandler","EventHandler","onClose","$$invalidate","onMount","body","querySelector","content","overflowingClass","bodyHeight","clientHeight","scrollHeight","classList","add","remove","hideFooter","dispatch","attributes","Object","assign","$$restProps","class","$$value"],"mappings":"yQAoEuBA,EAAA,IAAAC,EAAiBC,EAAQ,6FADtCC,EAEMC,EAAAC,EAAAC,yBADO,GAAAC,GAAAP,KAAAA,EAAA,IAAAC,EAAiBC,EAAQ,mCAAAG,EAAAG,UAAAR,kJAsBxCG,EAEQC,EAAAK,EAAAH,qFA1BHJ,EAAQ,IAAAQ,EAAAR,MAuBTA,EAAU,IAAAS,6EAnCDT,EAAc,4CAEjBA,EAAM,IAChBA,EAAU,qIAc6CA,EAAK,wCAMtBA,EAAe,mXAI9BA,EAAA,GACnB,0CACA,wCAvBmBA,EAAM,GAAG,WAAa,SAAKA,EAAA,GAChD,4BACA,sEAmCmBA,EAAM,GAAG,cAAgB,uDAhDtDC,EAqDKC,EAAAQ,EAAAN,GApDHO,EA6CKD,EAAAE,GApCHD,EAmCKC,EAAAC,GA7BHF,EAcKE,EAAAC,yBARHH,EAAiEG,EAAAC,iBACjEJ,EAMQG,EAAAE,GADNL,EAA0DK,EAAAb,iBAG9DQ,EAQME,EAAAI,GAHJN,EAESM,EAAAC,gCASfP,EAKCD,EAAAS,0EAnCUnB,EAAQ,kEAK0CA,EAAK,cAMtBA,EAAe,mCAI9BA,EAAA,GACnB,0CACA,qBAMAA,EAAU,oFA7BSA,EAAM,GAAG,WAAa,SAAKA,EAAA,GAChD,4BACA,4GARWA,EAAc,uCAEjBA,EAAM,KAAA,CAAA,cAAAoB,UAChBpB,EAAU,uCAwCWA,EAAM,GAAG,cAAgB,qFArD3C,SAAAD,EAAiBsB,YACdA,iKAzBRC,kBAfOC,GAAaC,UACbC,GAAeD,YACfE,GAAiBF,iBACjBG,GAAsBH,GACtBI,gBAAAA,EAAkB,SAAOJ,GACzBH,SAAAA,GAAwCG,cACxCK,GAAmBL,GACnBM,eAAAA,EAAiB,cAAYN,EASpCO,MAAmBC,WAmBdC,IACPC,EAAA,EAAAT,GAAS,GAnBXU,GAAO,KACC,MAAAC,EAAOd,EAAKe,cAAc,mBAC1BC,EAAUhB,EAAKe,cAAc,sBAC7BE,EAAoBZ,EAEtB,0CADA,8BAEA,GAAAS,GAAQE,EAAO,OACXE,EAAaJ,EAAKK,aACFH,EAAQI,aAEVF,EAClBJ,EAAKO,UAAUC,IAAIL,GAEnBH,EAAKO,UAAUE,OAAON,6YArB3BL,EAAA,EAAEY,EAAajB,SAAAA,kBACbJ,EACCM,EAAagB,SAAS,eAAc,IACpChB,EAAagB,SAAS,eAAc,CAAA,QACrCC,EAALC,OAAAC,UAAuBC,2BACXH,EAAWI,oCAwDGnB,QAyBNA,4CAnDJX,EAAI+B"}

package/public/components/layer/Layer.svelte

@@ -10,6 +10,7 @@
   export let closebuttontext = 'Close';
   export let iconname: string | undefined = undefined;
   export let hidefooter: boolean;
+  export let arialabelledby = 'LayerTitle';
 
   $: hideFooter = hidefooter ?? false;
   $: isopen
@@ -51,7 +52,7 @@
     class="mc-layer"
     tabindex="-1"
     role="dialog"
-    aria-labelledby="layerTitle"
+    aria-labelledby={arialabelledby}
     aria-modal="true"
     aria-hidden={!isopen}
     {...attributes}