@mozaic-ds/web-components 0.7.0 → 0.9.0-beta

package/public/components/layer/Layer.js

@@ -1,2 +1,472 @@
-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};
+import { S as SvelteElement, i as init, a as attribute_to_object, b as insert, f as flush, s as safe_not_equal, c as assign, e as element, d as space, t as text, n as noop, g as attr, h as set_attributes, j as append, l as listen, k as set_data, m as get_spread_update, o as detach, H as run_all, p as compute_rest_props, a1 as onMount, q as exclude_internal_props, v as binding_callbacks } from '../../index-c33b3772.js';
+import { E as EventHandler } from '../../EventHandler-02058705.js';
+
+/* src/components/layer/Layer.svelte generated by Svelte v3.58.0 */
+
+function create_if_block_1(ctx) {
+	let span;
+	let raw_value = `<${generateIconName(/*iconname*/ ctx[5])} class="mc-layer__icon" />` + "";
+
+	return {
+		c() {
+			span = element("span");
+			attr(span, "class", "mc-layer__icon");
+		},
+		m(target, anchor) {
+			insert(target, span, anchor);
+			span.innerHTML = raw_value;
+		},
+		p(ctx, dirty) {
+			if (dirty & /*iconname*/ 32 && raw_value !== (raw_value = `<${generateIconName(/*iconname*/ ctx[5])} class="mc-layer__icon" />` + "")) span.innerHTML = raw_value;		},
+		d(detaching) {
+			if (detaching) detach(span);
+		}
+	};
+}
+
+// (86:6) {#if !hideFooter}
+function create_if_block(ctx) {
+	let footer;
+
+	return {
+		c() {
+			footer = element("footer");
+			footer.innerHTML = `<slot name="footer"></slot>`;
+			attr(footer, "class", "mc-layer__footer");
+		},
+		m(target, anchor) {
+			insert(target, footer, anchor);
+		},
+		d(detaching) {
+			if (detaching) detach(footer);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let div4;
+	let div2;
+	let div1;
+	let div0;
+	let t0;
+	let h2;
+	let t1;
+	let t2;
+	let button;
+	let span;
+	let t3;
+	let t4;
+	let main;
+	let article;
+	let main_class_value;
+	let t5;
+	let div1_class_value;
+	let div2_aria_hidden_value;
+	let t6;
+	let div3;
+	let div3_class_value;
+	let mounted;
+	let dispose;
+	let if_block0 = /*iconname*/ ctx[5] && create_if_block_1(ctx);
+	let if_block1 = !/*hideFooter*/ ctx[9] && create_if_block();
+
+	let div2_levels = [
+		{ class: "mc-layer" },
+		{ tabindex: "-1" },
+		{ role: "dialog" },
+		{
+			"aria-labelledby": /*arialabelledby*/ ctx[6]
+		},
+		{ "aria-modal": "true" },
+		{
+			"aria-hidden": div2_aria_hidden_value = !/*isopen*/ ctx[0]
+		},
+		/*attributes*/ ctx[7]
+	];
+
+	let div_data_3 = {};
+
+	for (let i = 0; i < div2_levels.length; i += 1) {
+		div_data_3 = assign(div_data_3, div2_levels[i]);
+	}
+
+	return {
+		c() {
+			div4 = element("div");
+			div2 = element("div");
+			div1 = element("div");
+			div0 = element("div");
+			if (if_block0) if_block0.c();
+			t0 = space();
+			h2 = element("h2");
+			t1 = text(/*title*/ ctx[1]);
+			t2 = space();
+			button = element("button");
+			span = element("span");
+			t3 = text(/*closebuttontext*/ ctx[4]);
+			t4 = space();
+			main = element("main");
+			article = element("article");
+			article.innerHTML = `<slot name="content"></slot>`;
+			t5 = space();
+			if (if_block1) if_block1.c();
+			t6 = space();
+			div3 = element("div");
+			this.c = noop;
+			attr(h2, "class", "mc-layer__title");
+			attr(h2, "id", "modallayerTitleTitle");
+			attr(span, "class", "mc-layer__close-text");
+			attr(button, "class", "mc-layer__close");
+			attr(button, "type", "button");
+			attr(div0, "class", "mc-layer__header");
+			attr(article, "class", "mc-layer__content");
+
+			attr(main, "class", main_class_value = "mc-layer__body " + (/*scrollbaredge*/ ctx[3]
+			? 'mc-layer__body--overflowing-scroll-edge'
+			: ''));
+
+			attr(div1, "class", div1_class_value = "mc-layer__dialog " + (/*isopen*/ ctx[0] ? ' is-open' : '') + " " + (/*extended*/ ctx[2] ? ' mc-layer__dialog--extend' : ''));
+			attr(div1, "role", "document");
+			set_attributes(div2, div_data_3);
+			attr(div3, "class", div3_class_value = "mc-layer-overlay " + (/*isopen*/ ctx[0] ? ' is-visible' : ''));
+			attr(div3, "tabindex", "-1");
+			attr(div3, "role", "dialog");
+		},
+		m(target, anchor) {
+			insert(target, div4, anchor);
+			append(div4, div2);
+			append(div2, div1);
+			append(div1, div0);
+			if (if_block0) if_block0.m(div0, null);
+			append(div0, t0);
+			append(div0, h2);
+			append(h2, t1);
+			append(div0, t2);
+			append(div0, button);
+			append(button, span);
+			append(span, t3);
+			append(div1, t4);
+			append(div1, main);
+			append(main, article);
+			append(div1, t5);
+			if (if_block1) if_block1.m(div1, null);
+			append(div4, t6);
+			append(div4, div3);
+			/*div4_binding*/ ctx[14](div4);
+
+			if (!mounted) {
+				dispose = [
+					listen(button, "click", /*click_handler*/ ctx[12]),
+					listen(div3, "click", /*click_handler_1*/ ctx[13])
+				];
+
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (/*iconname*/ ctx[5]) {
+				if (if_block0) {
+					if_block0.p(ctx, dirty);
+				} else {
+					if_block0 = create_if_block_1(ctx);
+					if_block0.c();
+					if_block0.m(div0, t0);
+				}
+			} else if (if_block0) {
+				if_block0.d(1);
+				if_block0 = null;
+			}
+
+			if (dirty & /*title*/ 2) set_data(t1, /*title*/ ctx[1]);
+			if (dirty & /*closebuttontext*/ 16) set_data(t3, /*closebuttontext*/ ctx[4]);
+
+			if (dirty & /*scrollbaredge*/ 8 && main_class_value !== (main_class_value = "mc-layer__body " + (/*scrollbaredge*/ ctx[3]
+			? 'mc-layer__body--overflowing-scroll-edge'
+			: ''))) {
+				attr(main, "class", main_class_value);
+			}
+
+			if (!/*hideFooter*/ ctx[9]) {
+				if (if_block1) ; else {
+					if_block1 = create_if_block();
+					if_block1.c();
+					if_block1.m(div1, null);
+				}
+			} else if (if_block1) {
+				if_block1.d(1);
+				if_block1 = null;
+			}
+
+			if (dirty & /*isopen, extended*/ 5 && div1_class_value !== (div1_class_value = "mc-layer__dialog " + (/*isopen*/ ctx[0] ? ' is-open' : '') + " " + (/*extended*/ ctx[2] ? ' mc-layer__dialog--extend' : ''))) {
+				attr(div1, "class", div1_class_value);
+			}
+
+			set_attributes(div2, div_data_3 = get_spread_update(div2_levels, [
+				{ class: "mc-layer" },
+				{ tabindex: "-1" },
+				{ role: "dialog" },
+				dirty & /*arialabelledby*/ 64 && {
+					"aria-labelledby": /*arialabelledby*/ ctx[6]
+				},
+				{ "aria-modal": "true" },
+				dirty & /*isopen*/ 1 && div2_aria_hidden_value !== (div2_aria_hidden_value = !/*isopen*/ ctx[0]) && { "aria-hidden": div2_aria_hidden_value },
+				dirty & /*attributes*/ 128 && /*attributes*/ ctx[7]
+			]));
+
+			if (dirty & /*isopen*/ 1 && div3_class_value !== (div3_class_value = "mc-layer-overlay " + (/*isopen*/ ctx[0] ? ' is-visible' : ''))) {
+				attr(div3, "class", div3_class_value);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div4);
+			if (if_block0) if_block0.d();
+			if (if_block1) if_block1.d();
+			/*div4_binding*/ ctx[14](null);
+			mounted = false;
+			run_all(dispose);
+		}
+	};
+}
+
+function generateIconName(iconname) {
+	return `${iconname} size="1.5rem"`;
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let hideFooter;
+	let attributes;
+
+	const omit_props_names = [
+		"title","isopen","extended","scrollbaredge","closebuttontext","iconname","hidefooter","arialabelledby"
+	];
+
+	let $$restProps = compute_rest_props($$props, omit_props_names);
+	let { title } = $$props;
+	let { isopen } = $$props;
+	let { extended } = $$props;
+	let { scrollbaredge } = $$props;
+	let { closebuttontext = 'Close' } = $$props;
+	let { iconname = undefined } = $$props;
+	let { hidefooter } = $$props;
+	let { arialabelledby = 'LayerTitle' } = $$props;
+	let root;
+	let eventHandler = new EventHandler();
+
+	onMount(() => {
+		const body = root.querySelector('.mc-layer__body');
+		const content = root.querySelector('.mc-layer__content');
+
+		const overflowingClass = !scrollbaredge
+		? 'mc-layer__body--overflowing'
+		: 'mc-layer__body--overflowing-scroll-edge';
+
+		if (body && content) {
+			const bodyHeight = body.clientHeight;
+			const contentHeight = content.scrollHeight;
+
+			if (contentHeight > bodyHeight) {
+				body.classList.add(overflowingClass);
+			} else {
+				body.classList.remove(overflowingClass);
+			}
+		}
+	});
+
+	function onClose() {
+		$$invalidate(0, isopen = false);
+	}
+
+	const click_handler = () => onClose();
+	const click_handler_1 = () => onClose();
+
+	function div4_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			root = $$value;
+			$$invalidate(8, root);
+		});
+	}
+
+	$$self.$$set = $$new_props => {
+		$$props = assign(assign({}, $$props), exclude_internal_props($$new_props));
+		$$invalidate(16, $$restProps = compute_rest_props($$props, omit_props_names));
+		if ('title' in $$new_props) $$invalidate(1, title = $$new_props.title);
+		if ('isopen' in $$new_props) $$invalidate(0, isopen = $$new_props.isopen);
+		if ('extended' in $$new_props) $$invalidate(2, extended = $$new_props.extended);
+		if ('scrollbaredge' in $$new_props) $$invalidate(3, scrollbaredge = $$new_props.scrollbaredge);
+		if ('closebuttontext' in $$new_props) $$invalidate(4, closebuttontext = $$new_props.closebuttontext);
+		if ('iconname' in $$new_props) $$invalidate(5, iconname = $$new_props.iconname);
+		if ('hidefooter' in $$new_props) $$invalidate(11, hidefooter = $$new_props.hidefooter);
+		if ('arialabelledby' in $$new_props) $$invalidate(6, arialabelledby = $$new_props.arialabelledby);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*hidefooter*/ 2048) {
+			$$invalidate(9, hideFooter = hidefooter !== null && hidefooter !== void 0
+			? hidefooter
+			: false);
+		}
+
+		if ($$self.$$.dirty & /*isopen*/ 1) {
+			isopen
+			? eventHandler.dispatch('layer-opened', {})
+			: eventHandler.dispatch('layer-closed', {});
+		}
+
+		$$invalidate(7, attributes = Object.assign({}, $$restProps));
+
+		if ($$self.$$.dirty & /*attributes*/ 128) {
+			delete attributes.class;
+		}
+	};
+
+	return [
+		isopen,
+		title,
+		extended,
+		scrollbaredge,
+		closebuttontext,
+		iconname,
+		arialabelledby,
+		attributes,
+		root,
+		hideFooter,
+		onClose,
+		hidefooter,
+		click_handler,
+		click_handler_1,
+		div4_binding
+	];
+}
+
+class Layer extends SvelteElement {
+	constructor(options) {
+		super();
+		const style = document.createElement('style');
+		style.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(style);
+
+		init(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object(this.attributes),
+				customElement: true
+			},
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{
+				title: 1,
+				isopen: 0,
+				extended: 2,
+				scrollbaredge: 3,
+				closebuttontext: 4,
+				iconname: 5,
+				hidefooter: 11,
+				arialabelledby: 6
+			},
+			null
+		);
+
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+
+			if (options.props) {
+				this.$set(options.props);
+				flush();
+			}
+		}
+	}
+
+	static get observedAttributes() {
+		return [
+			"title",
+			"isopen",
+			"extended",
+			"scrollbaredge",
+			"closebuttontext",
+			"iconname",
+			"hidefooter",
+			"arialabelledby"
+		];
+	}
+
+	get title() {
+		return this.$$.ctx[1];
+	}
+
+	set title(title) {
+		this.$$set({ title });
+		flush();
+	}
+
+	get isopen() {
+		return this.$$.ctx[0];
+	}
+
+	set isopen(isopen) {
+		this.$$set({ isopen });
+		flush();
+	}
+
+	get extended() {
+		return this.$$.ctx[2];
+	}
+
+	set extended(extended) {
+		this.$$set({ extended });
+		flush();
+	}
+
+	get scrollbaredge() {
+		return this.$$.ctx[3];
+	}
+
+	set scrollbaredge(scrollbaredge) {
+		this.$$set({ scrollbaredge });
+		flush();
+	}
+
+	get closebuttontext() {
+		return this.$$.ctx[4];
+	}
+
+	set closebuttontext(closebuttontext) {
+		this.$$set({ closebuttontext });
+		flush();
+	}
+
+	get iconname() {
+		return this.$$.ctx[5];
+	}
+
+	set iconname(iconname) {
+		this.$$set({ iconname });
+		flush();
+	}
+
+	get hidefooter() {
+		return this.$$.ctx[11];
+	}
+
+	set hidefooter(hidefooter) {
+		this.$$set({ hidefooter });
+		flush();
+	}
+
+	get arialabelledby() {
+		return this.$$.ctx[6];
+	}
+
+	set arialabelledby(arialabelledby) {
+		this.$$set({ arialabelledby });
+		flush();
+	}
+}
+
+export { Layer 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  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"}
+{"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":[],"mappings":"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"}