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

package/public/components/optionbutton/OptionButton.js

@@ -1,2 +1,317 @@
-import{S as t,i as o,a as e,b as s,f as n,s as i,c as a,e as c,n as r,h as l,m as d,o as b,J as p,p as u,r as h,q as f,d as m,t as x,g as w,z as g,j as k,B as _,l as y,k as $,H as j}from"../../index-c33b3772.js";import{c as v}from"../../EventForward-8492ff62.js";import{E}from"../../EventHandler-02058705.js";function C(t,o,e){const s=t.slice();return s[12]=o[e],s}function H(t){let o,e,n,i,a,r,l,d,p,u,h,f,v=t[12].label+"";function E(){return t[8](t[12])}return{c(){o=c("div"),e=c("input"),r=m(),l=c("label"),d=x(v),u=m(),w(e,"id",n=t[12].id),w(e,"type","radio"),w(e,"class","mc-option-button__input"),w(e,"name",i=t[12].name),e.checked=t[0],e.disabled=a=t[12].disabled,w(l,"for",p=t[12].id),w(l,"class","mc-option-button__label"),w(o,"class","mc-option-button"),g(o,"mc-option-button--full",t[12].fullwidth)},m(n,i){s(n,o,i),k(o,e),k(o,r),k(o,l),k(l,d),k(o,u),h||(f=[_(t[5].call(null,e)),y(e,"change",E)],h=!0)},p(s,c){t=s,16&c&&n!==(n=t[12].id)&&w(e,"id",n),16&c&&i!==(i=t[12].name)&&w(e,"name",i),1&c&&(e.checked=t[0]),16&c&&a!==(a=t[12].disabled)&&(e.disabled=a),16&c&&v!==(v=t[12].label+"")&&$(d,v),16&c&&p!==(p=t[12].id)&&w(l,"for",p),16&c&&g(o,"mc-option-button--full",t[12].fullwidth)},d(t){t&&b(o),h=!1,j(f)}}}function J(t){let o,e,n,i=t[4],u=[];for(let o=0;o<i.length;o+=1)u[o]=H(C(t,i,o));let h=[{class:e="mc-option-group "+t[3]},t[2],{style:n=`justify-content:${t[1]}`}],f={};for(let t=0;t<h.length;t+=1)f=a(f,h[t]);return{c(){o=c("div");for(let t=0;t<u.length;t+=1)u[t].c();this.c=r,l(o,f)},m(t,e){s(t,o,e);for(let t=0;t<u.length;t+=1)u[t]&&u[t].m(o,null)},p(t,[s]){if(81&s){let e;for(i=t[4],e=0;e<i.length;e+=1){const n=C(t,i,e);u[e]?u[e].p(n,s):(u[e]=H(n),u[e].c(),u[e].m(o,null))}for(;e<u.length;e+=1)u[e].d(1);u.length=i.length}l(o,f=d(h,[8&s&&e!==(e="mc-option-group "+t[3])&&{class:e},4&s&&t[2],2&s&&n!==(n=`justify-content:${t[1]}`)&&{style:n}]))},i:r,o:r,d(t){t&&b(o),p(u,t)}}}function O(t,o,e){let s,n,i;const c=["checked","options","justifycontent"];let r=u(o,c),{checked:l}=o,{options:d}=o,{justifycontent:b="space-between"}=o,p=new E;const m=v(h());function x(t){t.checked=!t.checked,p.dispatch("change",t)}return t.$$set=t=>{e(11,o=a(a({},o),f(t))),e(10,r=u(o,c)),"checked"in t&&e(0,l=t.checked),"options"in t&&e(7,d=t.options),"justifycontent"in t&&e(1,b=t.justifycontent)},t.$$.update=()=>{128&t.$$.dirty&&e(4,s=d?JSON.parse(d):[]),e(3,n=o.class),e(2,i=Object.assign({},r)),4&t.$$.dirty&&delete i.class},o=f(o),[l,b,i,n,s,m,x,d,t=>x(t)]}class R extends t{constructor(t){super();const a=document.createElement("style");a.textContent='.mc-option-button{display:-webkit-box;display:-ms-flexbox;display:flex;text-align:center}.mc-option-button__input{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-option-button__input:hover+.mc-option-button__label{-webkit-box-shadow:0 0 0 2px #333333;box-shadow:0 0 0 2px #333333}.mc-option-button__input:checked+.mc-option-button__label{border-color:#46a610;-webkit-box-shadow:0 0 0 0.25rem #ebf5de;box-shadow:0 0 0 0.25rem #ebf5de}.mc-option-button__input:focus+.mc-option-button__label::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-option-button__input:disabled+.mc-option-button__label{cursor:not-allowed;background-color:#cccccc;color:#666666;-webkit-box-shadow:none;box-shadow:none}.mc-option-button__label{font-family:"LeroyMerlin", sans-serif;font-weight:600;position:relative;padding:1.5625rem 2rem;border-radius:4px;-webkit-box-shadow:0 0 0 1px #b3b3b3;box-shadow:0 0 0 1px #b3b3b3;border:2px solid transparent;cursor:pointer;position:relative}.mc-option-button__label::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;border-radius:6px;top:-0.25rem;right:-0.25rem;bottom:-0.25rem;left:-0.25rem}.mc-option-button--full .mc-option-button__label{width:100%}.mc-option-group{display:-webkit-box;display:-ms-flexbox;display:flex}',this.shadowRoot.appendChild(a),o(this,{target:this.shadowRoot,props:e(this.attributes),customElement:!0},O,J,i,{checked:0,options:7,justifycontent:1},null),t&&(t.target&&s(t.target,this,t.anchor),t.props&&(this.$set(t.props),n()))}static get observedAttributes(){return["checked","options","justifycontent"]}get checked(){return this.$$.ctx[0]}set checked(t){this.$$set({checked:t}),n()}get options(){return this.$$.ctx[7]}set options(t){this.$$set({options:t}),n()}get justifycontent(){return this.$$.ctx[1]}set justifycontent(t){this.$$set({justifycontent:t}),n()}}export{R 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, n as noop, h as set_attributes, m as get_spread_update, o as detach, J as destroy_each, p as compute_rest_props, r as get_current_component, q as exclude_internal_props, d as space, t as text, g as attr, z as toggle_class, j as append, B as action_destroyer, l as listen, k as set_data, H as run_all } from '../../index-c33b3772.js';
+import { c as createEventForwarder } from '../../EventForward-8492ff62.js';
+import { E as EventHandler } from '../../EventHandler-02058705.js';
+
+/* src/components/optionbutton/OptionButton.svelte generated by Svelte v3.58.0 */
+
+function get_each_context(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[12] = list[i];
+	return child_ctx;
+}
+
+// (26:2) {#each parsedOptions as option}
+function create_each_block(ctx) {
+	let div;
+	let input;
+	let input_id_value;
+	let input_name_value;
+	let input_disabled_value;
+	let t0;
+	let label;
+	let t1_value = /*option*/ ctx[12].label + "";
+	let t1;
+	let label_for_value;
+	let t2;
+	let mounted;
+	let dispose;
+
+	function change_handler() {
+		return /*change_handler*/ ctx[8](/*option*/ ctx[12]);
+	}
+
+	return {
+		c() {
+			div = element("div");
+			input = element("input");
+			t0 = space();
+			label = element("label");
+			t1 = text(t1_value);
+			t2 = space();
+			attr(input, "id", input_id_value = /*option*/ ctx[12].id);
+			attr(input, "type", "radio");
+			attr(input, "class", "mc-option-button__input");
+			attr(input, "name", input_name_value = /*option*/ ctx[12].name);
+			input.checked = /*checked*/ ctx[0];
+			input.disabled = input_disabled_value = /*option*/ ctx[12].disabled;
+			attr(label, "for", label_for_value = /*option*/ ctx[12].id);
+			attr(label, "class", "mc-option-button__label");
+			attr(div, "class", "mc-option-button");
+			toggle_class(div, "mc-option-button--full", /*option*/ ctx[12].fullwidth);
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, input);
+			append(div, t0);
+			append(div, label);
+			append(label, t1);
+			append(div, t2);
+
+			if (!mounted) {
+				dispose = [
+					action_destroyer(/*forwardEvents*/ ctx[5].call(null, input)),
+					listen(input, "change", change_handler)
+				];
+
+				mounted = true;
+			}
+		},
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+
+			if (dirty & /*parsedOptions*/ 16 && input_id_value !== (input_id_value = /*option*/ ctx[12].id)) {
+				attr(input, "id", input_id_value);
+			}
+
+			if (dirty & /*parsedOptions*/ 16 && input_name_value !== (input_name_value = /*option*/ ctx[12].name)) {
+				attr(input, "name", input_name_value);
+			}
+
+			if (dirty & /*checked*/ 1) {
+				input.checked = /*checked*/ ctx[0];
+			}
+
+			if (dirty & /*parsedOptions*/ 16 && input_disabled_value !== (input_disabled_value = /*option*/ ctx[12].disabled)) {
+				input.disabled = input_disabled_value;
+			}
+
+			if (dirty & /*parsedOptions*/ 16 && t1_value !== (t1_value = /*option*/ ctx[12].label + "")) set_data(t1, t1_value);
+
+			if (dirty & /*parsedOptions*/ 16 && label_for_value !== (label_for_value = /*option*/ ctx[12].id)) {
+				attr(label, "for", label_for_value);
+			}
+
+			if (dirty & /*parsedOptions*/ 16) {
+				toggle_class(div, "mc-option-button--full", /*option*/ ctx[12].fullwidth);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+			mounted = false;
+			run_all(dispose);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let div;
+	let div_class_value;
+	let div_style_value;
+	let each_value = /*parsedOptions*/ ctx[4];
+	let each_blocks = [];
+
+	for (let i = 0; i < each_value.length; i += 1) {
+		each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
+	}
+
+	let div_levels = [
+		{
+			class: div_class_value = "mc-option-group " + /*userClass*/ ctx[3]
+		},
+		/*attributes*/ ctx[2],
+		{
+			style: div_style_value = `justify-content:${/*justifycontent*/ ctx[1]}`
+		}
+	];
+
+	let div_data = {};
+
+	for (let i = 0; i < div_levels.length; i += 1) {
+		div_data = assign(div_data, div_levels[i]);
+	}
+
+	return {
+		c() {
+			div = element("div");
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			this.c = noop;
+			set_attributes(div, div_data);
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				if (each_blocks[i]) {
+					each_blocks[i].m(div, null);
+				}
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*parsedOptions, checked, handleChange*/ 81) {
+				each_value = /*parsedOptions*/ ctx[4];
+				let i;
+
+				for (i = 0; i < each_value.length; i += 1) {
+					const child_ctx = get_each_context(ctx, each_value, i);
+
+					if (each_blocks[i]) {
+						each_blocks[i].p(child_ctx, dirty);
+					} else {
+						each_blocks[i] = create_each_block(child_ctx);
+						each_blocks[i].c();
+						each_blocks[i].m(div, null);
+					}
+				}
+
+				for (; i < each_blocks.length; i += 1) {
+					each_blocks[i].d(1);
+				}
+
+				each_blocks.length = each_value.length;
+			}
+
+			set_attributes(div, div_data = get_spread_update(div_levels, [
+				dirty & /*userClass*/ 8 && div_class_value !== (div_class_value = "mc-option-group " + /*userClass*/ ctx[3]) && { class: div_class_value },
+				dirty & /*attributes*/ 4 && /*attributes*/ ctx[2],
+				dirty & /*justifycontent*/ 2 && div_style_value !== (div_style_value = `justify-content:${/*justifycontent*/ ctx[1]}`) && { style: div_style_value }
+			]));
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div);
+			destroy_each(each_blocks, detaching);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let parsedOptions;
+	let userClass;
+	let attributes;
+	const omit_props_names = ["checked","options","justifycontent"];
+	let $$restProps = compute_rest_props($$props, omit_props_names);
+	let { checked } = $$props;
+	let { options } = $$props;
+	let { justifycontent = 'space-between' } = $$props;
+	let eventHandler = new EventHandler();
+	const forwardEvents = createEventForwarder(get_current_component());
+
+	function handleChange(option) {
+		option.checked = !option.checked;
+		eventHandler.dispatch('change', option);
+	}
+
+	const change_handler = option => handleChange(option);
+
+	$$self.$$set = $$new_props => {
+		$$invalidate(11, $$props = assign(assign({}, $$props), exclude_internal_props($$new_props)));
+		$$invalidate(10, $$restProps = compute_rest_props($$props, omit_props_names));
+		if ('checked' in $$new_props) $$invalidate(0, checked = $$new_props.checked);
+		if ('options' in $$new_props) $$invalidate(7, options = $$new_props.options);
+		if ('justifycontent' in $$new_props) $$invalidate(1, justifycontent = $$new_props.justifycontent);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*options*/ 128) {
+			$$invalidate(4, parsedOptions = options ? JSON.parse(options) : []);
+		}
+
+		$$invalidate(3, userClass = $$props.class);
+		$$invalidate(2, attributes = Object.assign({}, $$restProps));
+
+		if ($$self.$$.dirty & /*attributes*/ 4) {
+			delete attributes.class;
+		}
+	};
+
+	$$props = exclude_internal_props($$props);
+
+	return [
+		checked,
+		justifycontent,
+		attributes,
+		userClass,
+		parsedOptions,
+		forwardEvents,
+		handleChange,
+		options,
+		change_handler
+	];
+}
+
+class OptionButton extends SvelteElement {
+	constructor(options) {
+		super();
+		const style = document.createElement('style');
+		style.textContent = `.mc-option-button{display:-webkit-box;display:-ms-flexbox;display:flex;text-align:center}.mc-option-button__input{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-option-button__input:hover+.mc-option-button__label{-webkit-box-shadow:0 0 0 2px #333333;box-shadow:0 0 0 2px #333333}.mc-option-button__input:checked+.mc-option-button__label{border-color:#46a610;-webkit-box-shadow:0 0 0 0.25rem #ebf5de;box-shadow:0 0 0 0.25rem #ebf5de}.mc-option-button__input:focus+.mc-option-button__label::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-option-button__input:disabled+.mc-option-button__label{cursor:not-allowed;background-color:#cccccc;color:#666666;-webkit-box-shadow:none;box-shadow:none}.mc-option-button__label{font-family:"LeroyMerlin", sans-serif;font-weight:600;position:relative;padding:1.5625rem 2rem;border-radius:4px;-webkit-box-shadow:0 0 0 1px #b3b3b3;box-shadow:0 0 0 1px #b3b3b3;border:2px solid transparent;cursor:pointer;position:relative}.mc-option-button__label::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;border-radius:6px;top:-0.25rem;right:-0.25rem;bottom:-0.25rem;left:-0.25rem}.mc-option-button--full .mc-option-button__label{width:100%}.mc-option-group{display:-webkit-box;display:-ms-flexbox;display:flex}`;
+		this.shadowRoot.appendChild(style);
+
+		init(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object(this.attributes),
+				customElement: true
+			},
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{
+				checked: 0,
+				options: 7,
+				justifycontent: 1
+			},
+			null
+		);
+
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+
+			if (options.props) {
+				this.$set(options.props);
+				flush();
+			}
+		}
+	}
+
+	static get observedAttributes() {
+		return ["checked", "options", "justifycontent"];
+	}
+
+	get checked() {
+		return this.$$.ctx[0];
+	}
+
+	set checked(checked) {
+		this.$$set({ checked });
+		flush();
+	}
+
+	get options() {
+		return this.$$.ctx[7];
+	}
+
+	set options(options) {
+		this.$$set({ options });
+		flush();
+	}
+
+	get justifycontent() {
+		return this.$$.ctx[1];
+	}
+
+	set justifycontent(justifycontent) {
+		this.$$set({ justifycontent });
+		flush();
+	}
+}
+
+export { OptionButton as default };
 //# sourceMappingURL=OptionButton.js.map

package/public/components/optionbutton/OptionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"OptionButton.js","sources":["../../../src/components/optionbutton/OptionButton.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import { get_current_component } from 'svelte/internal';\n  import { createEventForwarder } from '../../utilities/EventForward';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import type { OptionItems } from './optionbutton.types';\n  export let checked: boolean;\n  export let options: string;\n  export let justifycontent = 'space-between';\n  $: parsedOptions = options ? (JSON.parse(options) as OptionItems[]) : [];\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  let eventHandler = new EventHandler();\n  const forwardEvents = createEventForwarder(get_current_component());\n\n  function handleChange(option: OptionItems): void {\n    option.checked = !option.checked;\n    eventHandler.dispatch('change', option);\n  }\n</script>\n\n<div\n  class=\"mc-option-group {userClass}\"\n  {...attributes}\n  style={`justify-content:${justifycontent}`}\n>\n  {#each parsedOptions as option}\n    <div\n      class=\"mc-option-button\"\n      class:mc-option-button--full={option.fullwidth}\n    >\n      <input\n        use:forwardEvents\n        id={option.id}\n        type=\"radio\"\n        class=\"mc-option-button__input\"\n        name={option.name}\n        {checked}\n        disabled={option.disabled}\n        on:change={() => handleChange(option)}\n      />\n      <label for={option.id} class=\"mc-option-button__label\">\n        {option.label}\n      </label>\n    </div>\n  {/each}\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.option-button';\n\n  .mc-option-group {\n    display: flex;\n  }\n</style>\n"],"names":["t1_value","ctx","label","attr","input","input_id_value","id","input_name_value","name","disabled","input_disabled_value","label_for_value","toggle_class","div","fullwidth","insert","target","anchor","append","dirty","set_data","t1","length","i","class","div_class_value","style","div_style_value","checked","$$props","options","justifycontent","eventHandler","EventHandler","forwardEvents","createEventForwarder","get_current_component","handleChange","option","dispatch","$$invalidate","parsedOptions","JSON","parse","userClass","attributes","Object","assign","$$restProps"],"mappings":"uZA6CSA,EAAAC,MAAOC,MAAK,sGATTC,EAAAC,EAAA,KAAAC,EAAAJ,MAAOK,+DAGLH,EAAAC,EAAA,OAAAG,EAAAN,MAAOO,qBAEHJ,EAAAK,SAAAC,EAAAT,MAAOQ,SAGPN,EAAAD,EAAA,MAAAS,EAAAV,MAAOK,2EAZWM,EAAAC,EAAA,yBAAAZ,MAAOa,mBAFvCC,EAiBKC,EAAAH,EAAAI,GAbHC,EASCL,EAAAT,UACDc,EAEOL,EAAAX,gFAVD,GAAAiB,GAAAd,KAAAA,EAAAJ,MAAOK,iBAGL,GAAAa,GAAAZ,KAAAA,EAAAN,MAAOO,2CAEH,GAAAW,GAAAT,KAAAA,EAAAT,MAAOQ,0BAIhB,GAAAU,GAAAnB,KAAAA,EAAAC,MAAOC,MAAK,KAAAkB,EAAAC,EAAArB,GADH,GAAAmB,GAAAR,KAAAA,EAAAV,MAAOK,wBAZWM,EAAAC,EAAA,yBAAAZ,MAAOa,+DAHlCb,EAAa,wBAAlBqB,OAAIC,GAAA,sDAJkBtB,EAAS,IAC7BA,EAAU,+BACYA,EAAc,uIAH1Cc,EAyBKC,EAAAH,EAAAI,mFApBIhB,EAAa,WAAlBqB,OAAIC,GAAA,EAAA,iHAAJD,iDAJsBrB,EAAS,KAAA,CAAAuB,MAAAC,QAC7BxB,EAAU,kCACYA,EAAc,OAAA,CAAAyB,MAAAC,sIApB7BC,GAAgBC,WAChBC,GAAeD,GACfE,eAAAA,EAAiB,iBAAeF,EAMvCG,MAAmBC,QACjBC,EAAgBC,EAAqBC,KAElC,SAAAC,EAAaC,GACpBA,EAAOV,SAAWU,EAAOV,QACzBI,EAAaO,SAAS,SAAUD,6MAVjCE,EAAA,EAAEC,EAAgBX,EAAWY,KAAKC,MAAMb,GAAO,IAC7CU,EAAA,EAAAI,EAAYf,EAAQL,WACpBqB,EAALC,OAAAC,UAAuBC,yBACXH,EAAWrB,+BA6BEc,GAAAD,EAAaC"}
+{"version":3,"file":"OptionButton.js","sources":["../../../src/components/optionbutton/OptionButton.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import { get_current_component } from 'svelte/internal';\n  import { createEventForwarder } from '../../utilities/EventForward';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import type { OptionItems } from './optionbutton.types';\n  export let checked: boolean;\n  export let options: string;\n  export let justifycontent = 'space-between';\n  $: parsedOptions = options ? (JSON.parse(options) as OptionItems[]) : [];\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  let eventHandler = new EventHandler();\n  const forwardEvents = createEventForwarder(get_current_component());\n\n  function handleChange(option: OptionItems): void {\n    option.checked = !option.checked;\n    eventHandler.dispatch('change', option);\n  }\n</script>\n\n<div\n  class=\"mc-option-group {userClass}\"\n  {...attributes}\n  style={`justify-content:${justifycontent}`}\n>\n  {#each parsedOptions as option}\n    <div\n      class=\"mc-option-button\"\n      class:mc-option-button--full={option.fullwidth}\n    >\n      <input\n        use:forwardEvents\n        id={option.id}\n        type=\"radio\"\n        class=\"mc-option-button__input\"\n        name={option.name}\n        {checked}\n        disabled={option.disabled}\n        on:change={() => handleChange(option)}\n      />\n      <label for={option.id} class=\"mc-option-button__label\">\n        {option.label}\n      </label>\n    </div>\n  {/each}\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.option-button';\n\n  .mc-option-group {\n    display: flex;\n  }\n</style>\n"],"names":[],"mappings":"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"}

package/public/components/overlay/Overlay.js

@@ -1,2 +1,105 @@
-import{S as i,i as s,a as t,b as e,f as a,s as o,c as n,e as l,n as r,h as c,z as b,j as p,m as v,o as y,p as m,q as d}from"../../index-c33b3772.js";function u(i){let s,t,a=[{class:"mc-overlay"},i[1]],o={};for(let i=0;i<a.length;i+=1)o=n(o,a[i]);return{c(){s=l("div"),t=l("slot"),this.c=r,c(s,o),b(s,"is-visible",i[0])},m(i,a){e(i,s,a),p(s,t)},p(i,[t]){c(s,o=v(a,[{class:"mc-overlay"},2&t&&i[1]])),b(s,"is-visible",i[0])},i:r,o:r,d(i){i&&y(s)}}}function x(i,s,t){const e=["visible"];let a=m(s,e),{visible:o=!1}=s;return i.$$set=i=>{s=n(n({},s),d(i)),t(1,a=m(s,e)),"visible"in i&&t(0,o=i.visible)},[o,a]}class f extends i{constructor(i){super();const n=document.createElement("style");n.textContent=".mc-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-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}.mc-overlay-loader{background-color:rgba(25, 25, 25, 0.7);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;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-overlay-loader.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),s(this,{target:this.shadowRoot,props:t(this.attributes),customElement:!0},x,u,o,{visible:0},null),i&&(i.target&&e(i.target,this,i.anchor),i.props&&(this.$set(i.props),a()))}static get observedAttributes(){return["visible"]}get visible(){return this.$$.ctx[0]}set visible(i){this.$$set({visible:i}),a()}}export{f 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, n as noop, h as set_attributes, z as toggle_class, j as append, m as get_spread_update, o as detach, p as compute_rest_props, q as exclude_internal_props } from '../../index-c33b3772.js';
+
+/* src/components/overlay/Overlay.svelte generated by Svelte v3.58.0 */
+
+function create_fragment(ctx) {
+	let div;
+	let slot;
+	let div_levels = [{ class: "mc-overlay" }, /*$$restProps*/ ctx[1]];
+	let div_data = {};
+
+	for (let i = 0; i < div_levels.length; i += 1) {
+		div_data = assign(div_data, div_levels[i]);
+	}
+
+	return {
+		c() {
+			div = element("div");
+			slot = element("slot");
+			this.c = noop;
+			set_attributes(div, div_data);
+			toggle_class(div, "is-visible", /*visible*/ ctx[0]);
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, slot);
+		},
+		p(ctx, [dirty]) {
+			set_attributes(div, div_data = get_spread_update(div_levels, [
+				{ class: "mc-overlay" },
+				dirty & /*$$restProps*/ 2 && /*$$restProps*/ ctx[1]
+			]));
+
+			toggle_class(div, "is-visible", /*visible*/ ctx[0]);
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	const omit_props_names = ["visible"];
+	let $$restProps = compute_rest_props($$props, omit_props_names);
+	let { visible = false } = $$props;
+
+	$$self.$$set = $$new_props => {
+		$$props = assign(assign({}, $$props), exclude_internal_props($$new_props));
+		$$invalidate(1, $$restProps = compute_rest_props($$props, omit_props_names));
+		if ('visible' in $$new_props) $$invalidate(0, visible = $$new_props.visible);
+	};
+
+	return [visible, $$restProps];
+}
+
+class Overlay extends SvelteElement {
+	constructor(options) {
+		super();
+		const style = document.createElement('style');
+		style.textContent = `.mc-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-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}.mc-overlay-loader{background-color:rgba(25, 25, 25, 0.7);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;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-overlay-loader.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,
+			{ visible: 0 },
+			null
+		);
+
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+
+			if (options.props) {
+				this.$set(options.props);
+				flush();
+			}
+		}
+	}
+
+	static get observedAttributes() {
+		return ["visible"];
+	}
+
+	get visible() {
+		return this.$$.ctx[0];
+	}
+
+	set visible(visible) {
+		this.$$set({ visible });
+		flush();
+	}
+}
+
+export { Overlay as default };
 //# sourceMappingURL=Overlay.js.map

package/public/components/overlay/Overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.js","sources":["../../../src/components/overlay/Overlay.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  export let visible = false;\n</script>\n\n<div class=\"mc-overlay\" class:is-visible={visible} {...$$restProps}>\n  <!-- @slot Use this slot to insert a centered content inside the overlay -->\n  <slot />\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/all-settings';\n  @import '@mozaic-ds/styles/components/c.overlay';\n</style>\n"],"names":["ctx","insert","target","div","anchor","append","slot","visible","$$props"],"mappings":"mMAMuDA,EAAW,oHAAxBA,EAAO,YAAjDC,EAGKC,EAAAC,EAAAC,GADHC,EAAOF,EAAAG,kDAF8CN,EAAW,uBAAxBA,EAAO,gFAHpCO,QAAAA,GAAU,GAAKC"}
+{"version":3,"file":"Overlay.js","sources":["../../../src/components/overlay/Overlay.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  export let visible = false;\n</script>\n\n<div class=\"mc-overlay\" class:is-visible={visible} {...$$restProps}>\n  <!-- @slot Use this slot to insert a centered content inside the overlay -->\n  <slot />\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/all-settings';\n  @import '@mozaic-ds/styles/components/c.overlay';\n</style>\n"],"names":[],"mappings":";;;;;;;4DAMuD,GAAW,CAAA,CAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;+CAAxB,GAAO,CAAA,CAAA,CAAA,CAAA,CAAA;;;GAAjD,MAGK,CAAA,MAAA,EAAA,GAAA,EAAA,MAAA,CAAA,CAAA;GADH,MAAO,CAAA,GAAA,EAAA,IAAA,CAAA,CAAA;;;;;iDAF8C,GAAW,CAAA,CAAA,CAAA;;;+CAAxB,GAAO,CAAA,CAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;AAHpC,CAAA,IAAA,EAAA,OAAO,GAAG,KAAK,EAAA,GAAA,OAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/public/components/overlay/OverlayLoader.js

@@ -1,2 +1,152 @@
-import{S as e,i as t,a as i,b as s,f as a,s as r,e as o,d as n,n as l,g as c,z as d,j as m,o as f,t as b,k as h}from"../../index-c33b3772.js";function p(e){let t,i;return{c(){t=o("span"),i=b(e[1]),c(t,"class","mc-loader__text")},m(e,a){s(e,t,a),m(t,i)},p(e,t){2&t&&h(i,e[1])},d(e){e&&f(t)}}}function k(e){let t,i,a,r,b=e[1]&&p(e);return{c(){t=o("div"),i=o("div"),a=o("span"),a.innerHTML='<svg class="mc-loader__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle class="mc-loader__path" cx="50%" cy="50%" r="19"></circle></svg>',r=n(),b&&b.c(),this.c=l,c(a,"class","mc-loader__spinner"),c(i,"class","mc-loader mc-loader--l mc-loader--light"),c(t,"class","mc-overlay-loader"),d(t,"is-visible",e[0])},m(e,o){s(e,t,o),m(t,i),m(i,a),m(i,r),b&&b.m(i,null)},p(e,[s]){e[1]?b?b.p(e,s):(b=p(e),b.c(),b.m(i,null)):b&&(b.d(1),b=null),1&s&&d(t,"is-visible",e[0])},i:l,o:l,d(e){e&&f(t),b&&b.d()}}}function x(e,t,i){let{visible:s=!1}=t,{text:a}=t;return e.$$set=e=>{"visible"in e&&i(0,s=e.visible),"text"in e&&i(1,a=e.text)},[s,a]}class y extends e{constructor(e){super();const o=document.createElement("style");o.textContent=".mc-loader{color:#188803;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mc-loader .mc-loader__spinner{height:2rem;width:2rem}.mc-loader .mc-loader__path{stroke-width:4}.mc-loader .mc-loader__path{stroke:currentColor}.mc-loader__spinner:not(:only-child){margin-bottom:1rem}.mc-loader__icon{-webkit-animation:rotate-loader 2s linear infinite;animation:rotate-loader 2s linear infinite;-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center}.mc-loader__path{fill:none;stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round;-webkit-animation:animate-dash-loader 2s ease-in-out infinite;animation:animate-dash-loader 2s ease-in-out infinite}.mc-loader__text{font-size:1rem;line-height:1.375;color:currentColor}.mc-loader--l .mc-loader__spinner{height:4rem;width:4rem}.mc-loader--l .mc-loader__path{stroke-width:8}.mc-loader--light{color:#ffffff}.mc-loader--light .mc-loader__path{stroke:currentColor}@-webkit-keyframes rotate-loader{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}@keyframes rotate-loader{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}@-webkit-keyframes animate-dash-loader{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35px}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124px}}@keyframes animate-dash-loader{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35px}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124px}}.mc-overlay-loader{background-color:rgba(25, 25, 25, 0.7);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;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-overlay-loader.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(o),t(this,{target:this.shadowRoot,props:i(this.attributes),customElement:!0},x,k,r,{visible:0,text:1},null),e&&(e.target&&s(e.target,this,e.anchor),e.props&&(this.$set(e.props),a()))}static get observedAttributes(){return["visible","text"]}get visible(){return this.$$.ctx[0]}set visible(e){this.$$set({visible:e}),a()}get text(){return this.$$.ctx[1]}set text(e){this.$$set({text:e}),a()}}export{y 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, e as element, d as space, n as noop, g as attr, z as toggle_class, j as append, o as detach, t as text, k as set_data } from '../../index-c33b3772.js';
+
+/* src/components/overlay/OverlayLoader.svelte generated by Svelte v3.58.0 */
+
+function create_if_block(ctx) {
+	let span;
+	let t;
+
+	return {
+		c() {
+			span = element("span");
+			t = text(/*text*/ ctx[1]);
+			attr(span, "class", "mc-loader__text");
+		},
+		m(target, anchor) {
+			insert(target, span, anchor);
+			append(span, t);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*text*/ 2) set_data(t, /*text*/ ctx[1]);
+		},
+		d(detaching) {
+			if (detaching) detach(span);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let div1;
+	let div0;
+	let span;
+	let t;
+	let if_block = /*text*/ ctx[1] && create_if_block(ctx);
+
+	return {
+		c() {
+			div1 = element("div");
+			div0 = element("div");
+			span = element("span");
+			span.innerHTML = `<svg class="mc-loader__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle class="mc-loader__path" cx="50%" cy="50%" r="19"></circle></svg>`;
+			t = space();
+			if (if_block) if_block.c();
+			this.c = noop;
+			attr(span, "class", "mc-loader__spinner");
+			attr(div0, "class", "mc-loader mc-loader--l mc-loader--light");
+			attr(div1, "class", "mc-overlay-loader");
+			toggle_class(div1, "is-visible", /*visible*/ ctx[0]);
+		},
+		m(target, anchor) {
+			insert(target, div1, anchor);
+			append(div1, div0);
+			append(div0, span);
+			append(div0, t);
+			if (if_block) if_block.m(div0, null);
+		},
+		p(ctx, [dirty]) {
+			if (/*text*/ ctx[1]) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+				} else {
+					if_block = create_if_block(ctx);
+					if_block.c();
+					if_block.m(div0, null);
+				}
+			} else if (if_block) {
+				if_block.d(1);
+				if_block = null;
+			}
+
+			if (dirty & /*visible*/ 1) {
+				toggle_class(div1, "is-visible", /*visible*/ ctx[0]);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div1);
+			if (if_block) if_block.d();
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { visible = false } = $$props;
+	let { text } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('visible' in $$props) $$invalidate(0, visible = $$props.visible);
+		if ('text' in $$props) $$invalidate(1, text = $$props.text);
+	};
+
+	return [visible, text];
+}
+
+class OverlayLoader extends SvelteElement {
+	constructor(options) {
+		super();
+		const style = document.createElement('style');
+		style.textContent = `.mc-loader{color:#188803;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mc-loader .mc-loader__spinner{height:2rem;width:2rem}.mc-loader .mc-loader__path{stroke-width:4}.mc-loader .mc-loader__path{stroke:currentColor}.mc-loader__spinner:not(:only-child){margin-bottom:1rem}.mc-loader__icon{-webkit-animation:rotate-loader 2s linear infinite;animation:rotate-loader 2s linear infinite;-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center}.mc-loader__path{fill:none;stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round;-webkit-animation:animate-dash-loader 2s ease-in-out infinite;animation:animate-dash-loader 2s ease-in-out infinite}.mc-loader__text{font-size:1rem;line-height:1.375;color:currentColor}.mc-loader--l .mc-loader__spinner{height:4rem;width:4rem}.mc-loader--l .mc-loader__path{stroke-width:8}.mc-loader--light{color:#ffffff}.mc-loader--light .mc-loader__path{stroke:currentColor}@-webkit-keyframes rotate-loader{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}@keyframes rotate-loader{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}@-webkit-keyframes animate-dash-loader{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35px}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124px}}@keyframes animate-dash-loader{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35px}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124px}}.mc-overlay-loader{background-color:rgba(25, 25, 25, 0.7);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;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-overlay-loader.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,
+			{ visible: 0, text: 1 },
+			null
+		);
+
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+
+			if (options.props) {
+				this.$set(options.props);
+				flush();
+			}
+		}
+	}
+
+	static get observedAttributes() {
+		return ["visible", "text"];
+	}
+
+	get visible() {
+		return this.$$.ctx[0];
+	}
+
+	set visible(visible) {
+		this.$$set({ visible });
+		flush();
+	}
+
+	get text() {
+		return this.$$.ctx[1];
+	}
+
+	set text(text) {
+		this.$$set({ text });
+		flush();
+	}
+}
+
+export { OverlayLoader as default };
 //# sourceMappingURL=OverlayLoader.js.map

package/public/components/overlay/OverlayLoader.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayLoader.js","sources":["../../../src/components/overlay/OverlayLoader.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  export let visible = false;\n  export let text: string;\n</script>\n\n<div class=\"mc-overlay-loader\" class:is-visible={visible}>\n  <div class=\"mc-loader mc-loader--l mc-loader--light\">\n    <span class=\"mc-loader__spinner\">\n      <svg\n        class=\"mc-loader__icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 64 64\"\n      >\n        <circle class=\"mc-loader__path\" cx=\"50%\" cy=\"50%\" r=\"19\" />\n      </svg>\n    </span>\n\n    {#if text}\n      <span class=\"mc-loader__text\">\n        {text}\n      </span>\n    {/if}\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/all-settings';\n  @import '@mozaic-ds/styles/components/c.loader';\n  @import '@mozaic-ds/styles/components/c.overlay';\n</style>\n"],"names":["ctx","insert","target","span","anchor","create_if_block","div1","append","div0","visible","$$props","text"],"mappings":"+LAqBSA,EAAI,2CADPC,EAEMC,EAAAC,EAAAC,2BADHJ,EAAI,gDAFJA,EAAI,IAAAK,EAAAL,8XAZoCA,EAAO,YAAxDC,EAkBKC,EAAAI,EAAAF,GAjBHG,EAgBKD,EAAAE,GAfHD,EAQMC,EAAAL,mCAEDH,EAAI,kFAZoCA,EAAO,uDAJ3C,IAAAS,QAAAA,GAAU,GAAKC,QACfC,GAAYD"}
+{"version":3,"file":"OverlayLoader.js","sources":["../../../src/components/overlay/OverlayLoader.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  export let visible = false;\n  export let text: string;\n</script>\n\n<div class=\"mc-overlay-loader\" class:is-visible={visible}>\n  <div class=\"mc-loader mc-loader--l mc-loader--light\">\n    <span class=\"mc-loader__spinner\">\n      <svg\n        class=\"mc-loader__icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 64 64\"\n      >\n        <circle class=\"mc-loader__path\" cx=\"50%\" cy=\"50%\" r=\"19\" />\n      </svg>\n    </span>\n\n    {#if text}\n      <span class=\"mc-loader__text\">\n        {text}\n      </span>\n    {/if}\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/all-settings';\n  @import '@mozaic-ds/styles/components/c.loader';\n  @import '@mozaic-ds/styles/components/c.overlay';\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;qBAqBS,GAAI,CAAA,CAAA,CAAA,CAAA,CAAA;;;;GADP,MAEM,CAAA,MAAA,EAAA,IAAA,EAAA,MAAA,CAAA,CAAA;;;;gDADH,GAAI,CAAA,CAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;yBAFJ,GAAI,CAAA,CAAA,CAAA,IAAA,eAAA,CAAA,GAAA,CAAA,CAAA;;;;;;;;;;;;;;gDAZoC,GAAO,CAAA,CAAA,CAAA,CAAA,CAAA;;;GAAxD,MAkBK,CAAA,MAAA,EAAA,IAAA,EAAA,MAAA,CAAA,CAAA;GAjBH,MAgBK,CAAA,IAAA,EAAA,IAAA,CAAA,CAAA;GAfH,MAQM,CAAA,IAAA,EAAA,IAAA,CAAA,CAAA;;;;;gBAED,GAAI,CAAA,CAAA,CAAA,EAAA;;;;;;;;;;;;;;iDAZoC,GAAO,CAAA,CAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;AAJ3C,CAAA,IAAA,EAAA,OAAO,GAAG,KAAK,EAAA,GAAA,OAAA,CAAA;OACf,IAAY,EAAA,GAAA,OAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}