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

package/public/components/toggle/Toggle.js

@@ -1,2 +1,279 @@
-import{S as e,i as l,a as t,b as o,f as g,s as r,c as m,e as a,d as c,n as i,g as s,h as d,j as b,B as n,l as _,m as f,o as h,H as x,p as u,r as M,q as w,t as p,k as I}from"../../index-c33b3772.js";import{E as k}from"../../EventHandler-02058705.js";import{c as D}from"../../EventForward-8492ff62.js";function A(e){let l,t;return{c(){l=a("span"),t=p(e[4]),s(l,"class","mc-toggle__content")},m(e,g){o(e,l,g),b(l,t)},p(e,l){16&l&&I(t,e[4])},d(e){e&&h(l)}}}function y(e){let l,t,g,r,u,M,w,p=e[4]&&A(e),I=[{class:u="mc-toggle "+(e[4]?"":" mc-toggle--hide-label")+" "+("s"===e[3]?" mc-toggle--s":"")+" "+e[6]},e[5]],k={};for(let e=0;e<I.length;e+=1)k=m(k,I[e]);return{c(){l=a("div"),t=a("input"),g=c(),r=a("label"),p&&p.c(),this.c=i,s(t,"class","mc-toggle__input"),s(t,"id",e[1]),s(t,"name",e[1]),s(t,"type","checkbox"),t.checked=e[0],t.disabled=e[2],s(r,"class","mc-toggle__label"),s(r,"for",e[1]),d(l,k)},m(m,a){o(m,l,a),b(l,t),b(l,g),b(l,r),p&&p.m(r,null),M||(w=[n(e[7].call(null,t)),_(t,"click",e[8])],M=!0)},p(e,[o]){2&o&&s(t,"id",e[1]),2&o&&s(t,"name",e[1]),1&o&&(t.checked=e[0]),4&o&&(t.disabled=e[2]),e[4]?p?p.p(e,o):(p=A(e),p.c(),p.m(r,null)):p&&(p.d(1),p=null),2&o&&s(r,"for",e[1]),d(l,k=f(I,[88&o&&u!==(u="mc-toggle "+(e[4]?"":" mc-toggle--hide-label")+" "+("s"===e[3]?" mc-toggle--s":"")+" "+e[6])&&{class:u},32&o&&e[5]]))},i:i,o:i,d(e){e&&h(l),p&&p.d(),M=!1,x(w)}}}function E(e,l,t){let o,g;const r=["name","checked","disabled","size","label"];let a=u(l,r),{name:c}=l,{checked:i}=l,{disabled:s=!1}=l,{size:d="m"}=l,{label:b}=l;const n=D(M());let _=new k;return e.$$set=e=>{t(11,l=m(m({},l),w(e))),t(10,a=u(l,r)),"name"in e&&t(1,c=e.name),"checked"in e&&t(0,i=e.checked),"disabled"in e&&t(2,s=e.disabled),"size"in e&&t(3,d=e.size),"label"in e&&t(4,b=e.label)},e.$$.update=()=>{t(6,o=l.class),t(5,g=Object.assign({},a)),32&e.$$.dirty&&delete g.class},l=w(l),[i,c,s,d,b,g,o,n,function(){t(0,i=!i),_.dispatch("change",i)}]}class j extends e{constructor(e){super();const m=document.createElement("style");m.textContent='.mc-toggle{display:block;position:relative}.mc-toggle__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.mc-toggle__input:focus+.mc-toggle__label::before{-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-toggle__input:checked+.mc-toggle__label::before{background-color:#46a610}.mc-toggle__input:checked+.mc-toggle__label::after{border-color:#46a610;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM0NmE2MTAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMDEtMS4zOCAwbC0yLjkyLTIuNmExIDEgMCAxMTEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDExMS40IDEuNDJ6Ii8+PC9zdmc+");-webkit-transform:translate(100%, -50%);-ms-transform:translate(100%, -50%);transform:translate(100%, -50%)}.mc-toggle__input:disabled+.mc-toggle__label{color:#808080;cursor:not-allowed}.mc-toggle__input:disabled+.mc-toggle__label::before{background-color:#e6e6e6}.mc-toggle__input:disabled+.mc-toggle__label::after{border-color:#e6e6e6;background-color:#b3b3b3;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNlNmU2ZTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+")}.mc-toggle__input:disabled:checked+.mc-toggle__label::before{background-color:#c5e39e}.mc-toggle__input:disabled:checked+.mc-toggle__label::after{border-color:#c5e39e;background-color:#ffffff;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNjNWUzOWUiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMDEtMS4zOCAwbC0yLjkyLTIuNmExIDEgMCAxMTEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDExMS40IDEuNDJ6Ii8+PC9zdmc+");background-size:1rem}.mc-toggle__input:not(:disabled)+.mc-toggle__label:hover::after{background-color:#e6e6e6}.mc-toggle__content{display:inline-block;padding-left:0.75rem}.mc-toggle__label{font-size:1rem;line-height:1.125;height:2rem;padding-left:4rem;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;color:#000000;display:table-cell;position:relative;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mc-toggle__label::before,.mc-toggle__label::after{border-radius:2rem;height:2rem}.mc-toggle__label::before{width:4rem}.mc-toggle__label::after{width:2rem}.mc-toggle__label::after,.mc-toggle__label::before{-webkit-box-sizing:border-box;box-sizing:border-box;content:"";display:block;left:0;position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.mc-toggle__label::before{background-color:#666666;will-change:background-color, border-color, box-shadow;-webkit-transition:background-color 100ms ease, border-color 100ms ease, -webkit-box-shadow 200ms ease;transition:background-color 100ms ease, border-color 100ms ease, -webkit-box-shadow 200ms ease;-o-transition:background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease;transition:background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease;transition:background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease, -webkit-box-shadow 200ms ease}.mc-toggle__label::after{background:#ffffff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM2NjY2NjYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+") no-repeat center;background-size:1rem;border:solid 3px #666666;will-change:transform;-webkit-transition:border-color 100ms ease, -webkit-transform 100ms ease;transition:border-color 100ms ease, -webkit-transform 100ms ease;-o-transition:transform 100ms ease, border-color 100ms ease;transition:transform 100ms ease, border-color 100ms ease;transition:transform 100ms ease, border-color 100ms ease, -webkit-transform 100ms ease}.mc-toggle--s .mc-toggle__label{height:1.5rem;padding-left:3rem}.mc-toggle--s .mc-toggle__label::before,.mc-toggle--s .mc-toggle__label::after{border-radius:1.5rem;height:1.5rem}.mc-toggle--s .mc-toggle__label::before{width:3rem}.mc-toggle--s .mc-toggle__label::after{width:1.5rem}.mc-toggle--m .mc-toggle__label{height:2rem;padding-left:4rem}.mc-toggle--m .mc-toggle__label::before,.mc-toggle--m .mc-toggle__label::after{border-radius:2rem;height:2rem}.mc-toggle--m .mc-toggle__label::before{width:4rem}.mc-toggle--m .mc-toggle__label::after{width:2rem}.mc-toggle--hide-label .mc-toggle__content{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}@media screen and (min-width: 680px){.mc-toggle--s\\@from-m .mc-toggle__label{height:1.5rem;padding-left:3rem}.mc-toggle--s\\@from-m .mc-toggle__label::before,.mc-toggle--s\\@from-m .mc-toggle__label::after{border-radius:1.5rem;height:1.5rem}.mc-toggle--s\\@from-m .mc-toggle__label::before{width:3rem}.mc-toggle--s\\@from-m .mc-toggle__label::after{width:1.5rem}.mc-toggle--m\\@from-m .mc-toggle__label{height:2rem;padding-left:4rem}.mc-toggle--m\\@from-m .mc-toggle__label::before,.mc-toggle--m\\@from-m .mc-toggle__label::after{border-radius:2rem;height:2rem}.mc-toggle--m\\@from-m .mc-toggle__label::before{width:4rem}.mc-toggle--m\\@from-m .mc-toggle__label::after{width:2rem}}@media screen and (min-width: 1024px){.mc-toggle--s\\@from-l .mc-toggle__label{height:1.5rem;padding-left:3rem}.mc-toggle--s\\@from-l .mc-toggle__label::before,.mc-toggle--s\\@from-l .mc-toggle__label::after{border-radius:1.5rem;height:1.5rem}.mc-toggle--s\\@from-l .mc-toggle__label::before{width:3rem}.mc-toggle--s\\@from-l .mc-toggle__label::after{width:1.5rem}.mc-toggle--m\\@from-l .mc-toggle__label{height:2rem;padding-left:4rem}.mc-toggle--m\\@from-l .mc-toggle__label::before,.mc-toggle--m\\@from-l .mc-toggle__label::after{border-radius:2rem;height:2rem}.mc-toggle--m\\@from-l .mc-toggle__label::before{width:4rem}.mc-toggle--m\\@from-l .mc-toggle__label::after{width:2rem}}@media screen and (min-width: 1280px){.mc-toggle--s\\@from-xl .mc-toggle__label{height:1.5rem;padding-left:3rem}.mc-toggle--s\\@from-xl .mc-toggle__label::before,.mc-toggle--s\\@from-xl .mc-toggle__label::after{border-radius:1.5rem;height:1.5rem}.mc-toggle--s\\@from-xl .mc-toggle__label::before{width:3rem}.mc-toggle--s\\@from-xl .mc-toggle__label::after{width:1.5rem}.mc-toggle--m\\@from-xl .mc-toggle__label{height:2rem;padding-left:4rem}.mc-toggle--m\\@from-xl .mc-toggle__label::before,.mc-toggle--m\\@from-xl .mc-toggle__label::after{border-radius:2rem;height:2rem}.mc-toggle--m\\@from-xl .mc-toggle__label::before{width:4rem}.mc-toggle--m\\@from-xl .mc-toggle__label::after{width:2rem}}@media screen and (min-width: 1920px){.mc-toggle--s\\@from-xxl .mc-toggle__label{height:1.5rem;padding-left:3rem}.mc-toggle--s\\@from-xxl .mc-toggle__label::before,.mc-toggle--s\\@from-xxl .mc-toggle__label::after{border-radius:1.5rem;height:1.5rem}.mc-toggle--s\\@from-xxl .mc-toggle__label::before{width:3rem}.mc-toggle--s\\@from-xxl .mc-toggle__label::after{width:1.5rem}.mc-toggle--m\\@from-xxl .mc-toggle__label{height:2rem;padding-left:4rem}.mc-toggle--m\\@from-xxl .mc-toggle__label::before,.mc-toggle--m\\@from-xxl .mc-toggle__label::after{border-radius:2rem;height:2rem}.mc-toggle--m\\@from-xxl .mc-toggle__label::before{width:4rem}.mc-toggle--m\\@from-xxl .mc-toggle__label::after{width:2rem}}',this.shadowRoot.appendChild(m),l(this,{target:this.shadowRoot,props:t(this.attributes),customElement:!0},E,y,r,{name:1,checked:0,disabled:2,size:3,label:4},null),e&&(e.target&&o(e.target,this,e.anchor),e.props&&(this.$set(e.props),g()))}static get observedAttributes(){return["name","checked","disabled","size","label"]}get name(){return this.$$.ctx[1]}set name(e){this.$$set({name:e}),g()}get checked(){return this.$$.ctx[0]}set checked(e){this.$$set({checked:e}),g()}get disabled(){return this.$$.ctx[2]}set disabled(e){this.$$set({disabled:e}),g()}get size(){return this.$$.ctx[3]}set size(e){this.$$set({size:e}),g()}get label(){return this.$$.ctx[4]}set label(e){this.$$set({label:e}),g()}}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, n as noop, g as attr, h as set_attributes, j as append, B as action_destroyer, l as listen, m as get_spread_update, o as detach, H as run_all, p as compute_rest_props, r as get_current_component, q as exclude_internal_props, t as text, k as set_data } from '../../index-c33b3772.js';
+import { E as EventHandler } from '../../EventHandler-02058705.js';
+import { c as createEventForwarder } from '../../EventForward-8492ff62.js';
+
+/* src/components/toggle/Toggle.svelte generated by Svelte v3.58.0 */
+
+function create_if_block(ctx) {
+	let span;
+	let t;
+
+	return {
+		c() {
+			span = element("span");
+			t = text(/*label*/ ctx[4]);
+			attr(span, "class", "mc-toggle__content");
+		},
+		m(target, anchor) {
+			insert(target, span, anchor);
+			append(span, t);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*label*/ 16) set_data(t, /*label*/ ctx[4]);
+		},
+		d(detaching) {
+			if (detaching) detach(span);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let div;
+	let input;
+	let t;
+	let label_1;
+	let div_class_value;
+	let mounted;
+	let dispose;
+	let if_block = /*label*/ ctx[4] && create_if_block(ctx);
+
+	let div_levels = [
+		{
+			class: div_class_value = "mc-toggle " + (!/*label*/ ctx[4] ? ' mc-toggle--hide-label' : '') + " " + (/*size*/ ctx[3] === 's' ? ' mc-toggle--s' : '') + " " + /*userClass*/ ctx[6]
+		},
+		/*attributes*/ ctx[5]
+	];
+
+	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");
+			input = element("input");
+			t = space();
+			label_1 = element("label");
+			if (if_block) if_block.c();
+			this.c = noop;
+			attr(input, "class", "mc-toggle__input");
+			attr(input, "id", /*name*/ ctx[1]);
+			attr(input, "name", /*name*/ ctx[1]);
+			attr(input, "type", "checkbox");
+			input.checked = /*checked*/ ctx[0];
+			input.disabled = /*disabled*/ ctx[2];
+			attr(label_1, "class", "mc-toggle__label");
+			attr(label_1, "for", /*name*/ ctx[1]);
+			set_attributes(div, div_data);
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, input);
+			append(div, t);
+			append(div, label_1);
+			if (if_block) if_block.m(label_1, null);
+
+			if (!mounted) {
+				dispose = [
+					action_destroyer(/*forwardEvents*/ ctx[7].call(null, input)),
+					listen(input, "click", /*handleState*/ ctx[8])
+				];
+
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*name*/ 2) {
+				attr(input, "id", /*name*/ ctx[1]);
+			}
+
+			if (dirty & /*name*/ 2) {
+				attr(input, "name", /*name*/ ctx[1]);
+			}
+
+			if (dirty & /*checked*/ 1) {
+				input.checked = /*checked*/ ctx[0];
+			}
+
+			if (dirty & /*disabled*/ 4) {
+				input.disabled = /*disabled*/ ctx[2];
+			}
+
+			if (/*label*/ ctx[4]) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+				} else {
+					if_block = create_if_block(ctx);
+					if_block.c();
+					if_block.m(label_1, null);
+				}
+			} else if (if_block) {
+				if_block.d(1);
+				if_block = null;
+			}
+
+			if (dirty & /*name*/ 2) {
+				attr(label_1, "for", /*name*/ ctx[1]);
+			}
+
+			set_attributes(div, div_data = get_spread_update(div_levels, [
+				dirty & /*label, size, userClass*/ 88 && div_class_value !== (div_class_value = "mc-toggle " + (!/*label*/ ctx[4] ? ' mc-toggle--hide-label' : '') + " " + (/*size*/ ctx[3] === 's' ? ' mc-toggle--s' : '') + " " + /*userClass*/ ctx[6]) && { class: div_class_value },
+				dirty & /*attributes*/ 32 && /*attributes*/ ctx[5]
+			]));
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div);
+			if (if_block) if_block.d();
+			mounted = false;
+			run_all(dispose);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let userClass;
+	let attributes;
+	const omit_props_names = ["name","checked","disabled","size","label"];
+	let $$restProps = compute_rest_props($$props, omit_props_names);
+	let { name } = $$props;
+	let { checked } = $$props;
+	let { disabled = false } = $$props;
+	let { size = 'm' } = $$props;
+	let { label } = $$props;
+	const forwardEvents = createEventForwarder(get_current_component());
+	let eventHandler = new EventHandler();
+
+	function handleState() {
+		$$invalidate(0, checked = !checked);
+		eventHandler.dispatch('change', checked);
+	}
+
+	$$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 ('name' in $$new_props) $$invalidate(1, name = $$new_props.name);
+		if ('checked' in $$new_props) $$invalidate(0, checked = $$new_props.checked);
+		if ('disabled' in $$new_props) $$invalidate(2, disabled = $$new_props.disabled);
+		if ('size' in $$new_props) $$invalidate(3, size = $$new_props.size);
+		if ('label' in $$new_props) $$invalidate(4, label = $$new_props.label);
+	};
+
+	$$self.$$.update = () => {
+		$$invalidate(6, userClass = $$props.class);
+		$$invalidate(5, attributes = Object.assign({}, $$restProps));
+
+		if ($$self.$$.dirty & /*attributes*/ 32) {
+			delete attributes.class;
+		}
+	};
+
+	$$props = exclude_internal_props($$props);
+
+	return [
+		checked,
+		name,
+		disabled,
+		size,
+		label,
+		attributes,
+		userClass,
+		forwardEvents,
+		handleState
+	];
+}
+
+class Toggle extends SvelteElement {
+	constructor(options) {
+		super();
+		const style = document.createElement('style');
+		style.textContent = `.mc-toggle{display:block;position:relative}.mc-toggle__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.mc-toggle__input:focus+.mc-toggle__label::before{-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-toggle__input:checked+.mc-toggle__label::before{background-color:#46a610}.mc-toggle__input:checked+.mc-toggle__label::after{border-color:#46a610;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM0NmE2MTAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMDEtMS4zOCAwbC0yLjkyLTIuNmExIDEgMCAxMTEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDExMS40IDEuNDJ6Ii8+PC9zdmc+");-webkit-transform:translate(100%, -50%);-ms-transform:translate(100%, -50%);transform:translate(100%, -50%)}.mc-toggle__input:disabled+.mc-toggle__label{color:#808080;cursor:not-allowed}.mc-toggle__input:disabled+.mc-toggle__label::before{background-color:#e6e6e6}.mc-toggle__input:disabled+.mc-toggle__label::after{border-color:#e6e6e6;background-color:#b3b3b3;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNlNmU2ZTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+")}.mc-toggle__input:disabled:checked+.mc-toggle__label::before{background-color:#c5e39e}.mc-toggle__input:disabled:checked+.mc-toggle__label::after{border-color:#c5e39e;background-color:#ffffff;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNjNWUzOWUiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMDEtMS4zOCAwbC0yLjkyLTIuNmExIDEgMCAxMTEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDExMS40IDEuNDJ6Ii8+PC9zdmc+");background-size:1rem}.mc-toggle__input:not(:disabled)+.mc-toggle__label:hover::after{background-color:#e6e6e6}.mc-toggle__content{display:inline-block;padding-left:0.75rem}.mc-toggle__label{font-size:1rem;line-height:1.125;height:2rem;padding-left:4rem;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;color:#000000;display:table-cell;position:relative;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mc-toggle__label::before,.mc-toggle__label::after{border-radius:2rem;height:2rem}.mc-toggle__label::before{width:4rem}.mc-toggle__label::after{width:2rem}.mc-toggle__label::after,.mc-toggle__label::before{-webkit-box-sizing:border-box;box-sizing:border-box;content:"";display:block;left:0;position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.mc-toggle__label::before{background-color:#666666;will-change:background-color, border-color, box-shadow;-webkit-transition:background-color 100ms ease, border-color 100ms ease, -webkit-box-shadow 200ms ease;transition:background-color 100ms ease, border-color 100ms ease, -webkit-box-shadow 200ms ease;-o-transition:background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease;transition:background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease;transition:background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease, -webkit-box-shadow 200ms ease}.mc-toggle__label::after{background:#ffffff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM2NjY2NjYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+") no-repeat center;background-size:1rem;border:solid 3px #666666;will-change:transform;-webkit-transition:border-color 100ms ease, -webkit-transform 100ms ease;transition:border-color 100ms ease, -webkit-transform 100ms ease;-o-transition:transform 100ms ease, border-color 100ms ease;transition:transform 100ms ease, border-color 100ms ease;transition:transform 100ms ease, border-color 100ms ease, -webkit-transform 100ms ease}.mc-toggle--s .mc-toggle__label{height:1.5rem;padding-left:3rem}.mc-toggle--s .mc-toggle__label::before,.mc-toggle--s .mc-toggle__label::after{border-radius:1.5rem;height:1.5rem}.mc-toggle--s .mc-toggle__label::before{width:3rem}.mc-toggle--s .mc-toggle__label::after{width:1.5rem}.mc-toggle--m .mc-toggle__label{height:2rem;padding-left:4rem}.mc-toggle--m .mc-toggle__label::before,.mc-toggle--m .mc-toggle__label::after{border-radius:2rem;height:2rem}.mc-toggle--m .mc-toggle__label::before{width:4rem}.mc-toggle--m .mc-toggle__label::after{width:2rem}.mc-toggle--hide-label .mc-toggle__content{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}@media screen and (min-width: 680px){.mc-toggle--s\\@from-m .mc-toggle__label{height:1.5rem;padding-left:3rem}.mc-toggle--s\\@from-m .mc-toggle__label::before,.mc-toggle--s\\@from-m .mc-toggle__label::after{border-radius:1.5rem;height:1.5rem}.mc-toggle--s\\@from-m .mc-toggle__label::before{width:3rem}.mc-toggle--s\\@from-m .mc-toggle__label::after{width:1.5rem}.mc-toggle--m\\@from-m .mc-toggle__label{height:2rem;padding-left:4rem}.mc-toggle--m\\@from-m .mc-toggle__label::before,.mc-toggle--m\\@from-m .mc-toggle__label::after{border-radius:2rem;height:2rem}.mc-toggle--m\\@from-m .mc-toggle__label::before{width:4rem}.mc-toggle--m\\@from-m .mc-toggle__label::after{width:2rem}}@media screen and (min-width: 1024px){.mc-toggle--s\\@from-l .mc-toggle__label{height:1.5rem;padding-left:3rem}.mc-toggle--s\\@from-l .mc-toggle__label::before,.mc-toggle--s\\@from-l .mc-toggle__label::after{border-radius:1.5rem;height:1.5rem}.mc-toggle--s\\@from-l .mc-toggle__label::before{width:3rem}.mc-toggle--s\\@from-l .mc-toggle__label::after{width:1.5rem}.mc-toggle--m\\@from-l .mc-toggle__label{height:2rem;padding-left:4rem}.mc-toggle--m\\@from-l .mc-toggle__label::before,.mc-toggle--m\\@from-l .mc-toggle__label::after{border-radius:2rem;height:2rem}.mc-toggle--m\\@from-l .mc-toggle__label::before{width:4rem}.mc-toggle--m\\@from-l .mc-toggle__label::after{width:2rem}}@media screen and (min-width: 1280px){.mc-toggle--s\\@from-xl .mc-toggle__label{height:1.5rem;padding-left:3rem}.mc-toggle--s\\@from-xl .mc-toggle__label::before,.mc-toggle--s\\@from-xl .mc-toggle__label::after{border-radius:1.5rem;height:1.5rem}.mc-toggle--s\\@from-xl .mc-toggle__label::before{width:3rem}.mc-toggle--s\\@from-xl .mc-toggle__label::after{width:1.5rem}.mc-toggle--m\\@from-xl .mc-toggle__label{height:2rem;padding-left:4rem}.mc-toggle--m\\@from-xl .mc-toggle__label::before,.mc-toggle--m\\@from-xl .mc-toggle__label::after{border-radius:2rem;height:2rem}.mc-toggle--m\\@from-xl .mc-toggle__label::before{width:4rem}.mc-toggle--m\\@from-xl .mc-toggle__label::after{width:2rem}}@media screen and (min-width: 1920px){.mc-toggle--s\\@from-xxl .mc-toggle__label{height:1.5rem;padding-left:3rem}.mc-toggle--s\\@from-xxl .mc-toggle__label::before,.mc-toggle--s\\@from-xxl .mc-toggle__label::after{border-radius:1.5rem;height:1.5rem}.mc-toggle--s\\@from-xxl .mc-toggle__label::before{width:3rem}.mc-toggle--s\\@from-xxl .mc-toggle__label::after{width:1.5rem}.mc-toggle--m\\@from-xxl .mc-toggle__label{height:2rem;padding-left:4rem}.mc-toggle--m\\@from-xxl .mc-toggle__label::before,.mc-toggle--m\\@from-xxl .mc-toggle__label::after{border-radius:2rem;height:2rem}.mc-toggle--m\\@from-xxl .mc-toggle__label::before{width:4rem}.mc-toggle--m\\@from-xxl .mc-toggle__label::after{width:2rem}}`;
+		this.shadowRoot.appendChild(style);
+
+		init(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object(this.attributes),
+				customElement: true
+			},
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{
+				name: 1,
+				checked: 0,
+				disabled: 2,
+				size: 3,
+				label: 4
+			},
+			null
+		);
+
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+
+			if (options.props) {
+				this.$set(options.props);
+				flush();
+			}
+		}
+	}
+
+	static get observedAttributes() {
+		return ["name", "checked", "disabled", "size", "label"];
+	}
+
+	get name() {
+		return this.$$.ctx[1];
+	}
+
+	set name(name) {
+		this.$$set({ name });
+		flush();
+	}
+
+	get checked() {
+		return this.$$.ctx[0];
+	}
+
+	set checked(checked) {
+		this.$$set({ checked });
+		flush();
+	}
+
+	get disabled() {
+		return this.$$.ctx[2];
+	}
+
+	set disabled(disabled) {
+		this.$$set({ disabled });
+		flush();
+	}
+
+	get size() {
+		return this.$$.ctx[3];
+	}
+
+	set size(size) {
+		this.$$set({ size });
+		flush();
+	}
+
+	get label() {
+		return this.$$.ctx[4];
+	}
+
+	set label(label) {
+		this.$$set({ label });
+		flush();
+	}
+}
+
+export { Toggle as default };
 //# sourceMappingURL=Toggle.js.map

package/public/components/toggle/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sources":["../../../src/components/toggle/Toggle.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import type { ToggleSize } from './toggle.types';\n  import { get_current_component } from 'svelte/internal';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import { createEventForwarder } from '../../utilities/EventForward';\n\n  export let name: string;\n  export let checked: boolean;\n  export let disabled = false;\n  export let size: ToggleSize = 'm';\n  export let label: string;\n\n  const forwardEvents = createEventForwarder(get_current_component());\n\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  let eventHandler = new EventHandler();\n\n  function handleState(): void {\n    checked = !checked;\n    eventHandler.dispatch('change', checked);\n  }\n</script>\n\n<div\n  class=\"mc-toggle {!label ? ' mc-toggle--hide-label' : ''} {size === 's'\n    ? ' mc-toggle--s'\n    : ''} {userClass}\"\n  {...attributes}\n>\n  <input\n    use:forwardEvents\n    class=\"mc-toggle__input\"\n    id={name}\n    {name}\n    type=\"checkbox\"\n    {checked}\n    {disabled}\n    on:click={handleState}\n  />\n  <label class=\"mc-toggle__label\" for={name}>\n    {#if label}\n      <span class=\"mc-toggle__content\">{label}</span>\n    {/if}\n  </label>\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.toggle';\n</style>\n"],"names":["ctx","insert","target","span","anchor","create_if_block","class","div_class_value","div","append","input","label_1","dirty","name","$$props","checked","disabled","size","label","forwardEvents","createEventForwarder","get_current_component","eventHandler","EventHandler","$$invalidate","userClass","attributes","Object","assign","$$restProps","dispatch"],"mappings":"6VA8CwCA,EAAK,8CAAvCC,EAA8CC,EAAAC,EAAAC,4BAAZJ,EAAK,sDADpCA,EAAK,IAAAK,EAAAL,OAhBOM,MAAAC,EAAA,cAAAP,EAAQ,GAA2B,GAA3B,0BAAgC,KAAS,MAATA,EAAS,GAChE,gBACA,QAAKA,EAAS,IACdA,EAAU,kKAKRA,EAAI,qHAO2BA,EAAI,mBAhB3CC,EAqBKC,EAAAM,EAAAJ,GAfHK,EASCD,EAAAE,UACDD,EAIOD,EAAAG,0DANKX,EAAW,mCALjBA,EAAI,uEAQHA,EAAK,2EADyBA,EAAI,eAftB,GAAAY,GAAAL,KAAAA,EAAA,cAAAP,EAAQ,GAA2B,GAA3B,0BAAgC,KAAS,MAATA,EAAS,GAChE,gBACA,QAAKA,EAAS,KAAA,CAAAM,MAAAC,SACdP,EAAU,mJAxBHa,GAAYC,WACZC,GAAgBD,GAChBE,SAAAA,GAAW,GAAKF,GAChBG,KAAAA,EAAmB,KAAGH,SACtBI,GAAaJ,QAElBK,EAAgBC,EAAqBC,KAMvC,IAAAC,MAAmBC,gOAJpBC,EAAA,EAAAC,EAAYX,EAAQR,WACpBoB,EAALC,OAAAC,UAAuBC,0BACXH,EAAWpB,0CAKnBkB,EAAA,EAAAT,GAAWA,GACXO,EAAaQ,SAAS,SAAUf"}
+{"version":3,"file":"Toggle.js","sources":["../../../src/components/toggle/Toggle.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import type { ToggleSize } from './toggle.types';\n  import { get_current_component } from 'svelte/internal';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import { createEventForwarder } from '../../utilities/EventForward';\n\n  export let name: string;\n  export let checked: boolean;\n  export let disabled = false;\n  export let size: ToggleSize = 'm';\n  export let label: string;\n\n  const forwardEvents = createEventForwarder(get_current_component());\n\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  let eventHandler = new EventHandler();\n\n  function handleState(): void {\n    checked = !checked;\n    eventHandler.dispatch('change', checked);\n  }\n</script>\n\n<div\n  class=\"mc-toggle {!label ? ' mc-toggle--hide-label' : ''} {size === 's'\n    ? ' mc-toggle--s'\n    : ''} {userClass}\"\n  {...attributes}\n>\n  <input\n    use:forwardEvents\n    class=\"mc-toggle__input\"\n    id={name}\n    {name}\n    type=\"checkbox\"\n    {checked}\n    {disabled}\n    on:click={handleState}\n  />\n  <label class=\"mc-toggle__label\" for={name}>\n    {#if label}\n      <span class=\"mc-toggle__content\">{label}</span>\n    {/if}\n  </label>\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.toggle';\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;sBA8CwC,GAAK,CAAA,CAAA,CAAA,CAAA,CAAA;;;;GAAvC,MAA8C,CAAA,MAAA,EAAA,IAAA,EAAA,MAAA,CAAA,CAAA;;;;mDAAZ,GAAK,CAAA,CAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;0BADpC,GAAK,CAAA,CAAA,CAAA,IAAA,eAAA,CAAA,GAAA,CAAA,CAAA;;;;AAhBO,GAAA,KAAA,EAAA,eAAA,GAAA,YAAA,IAAA,WAAA,GAAK,CAAG,CAAA,CAAA,GAAA,wBAAwB,GAAG,EAAE,CAAG,GAAA,GAAA,aAAA,GAAI,CAAK,CAAA,CAAA,KAAA,GAAE,GAClE,eAAc,GACd,EAAE,wBAAG,GAAS,CAAA,CAAA,CAAA;;iBACd,GAAU,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;8BAKR,GAAI,CAAA,CAAA,CAAA,CAAA,CAAA;;;;;;iCAO2B,GAAI,CAAA,CAAA,CAAA,CAAA,CAAA;;;;GAhB3C,MAqBK,CAAA,MAAA,EAAA,GAAA,EAAA,MAAA,CAAA,CAAA;GAfH,MASC,CAAA,GAAA,EAAA,KAAA,CAAA,CAAA;;GACD,MAIO,CAAA,GAAA,EAAA,OAAA,CAAA,CAAA;;;;;;4CANK,GAAW,CAAA,CAAA,CAAA,CAAA;;;;;;;;+BALjB,GAAI,CAAA,CAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;iBAQH,GAAK,CAAA,CAAA,CAAA,EAAA;;;;;;;;;;;;;;kCADyB,GAAI,CAAA,CAAA,CAAA,CAAA,CAAA;;;;AAftB,IAAA,KAAA,8BAAA,EAAA,IAAA,eAAA,MAAA,eAAA,GAAA,YAAA,IAAA,WAAA,GAAK,CAAG,CAAA,CAAA,GAAA,wBAAwB,GAAG,EAAE,CAAG,GAAA,GAAA,aAAA,GAAI,CAAK,CAAA,CAAA,KAAA,GAAE,GAClE,eAAc,GACd,EAAE,wBAAG,GAAS,CAAA,CAAA,CAAA,CAAA,IAAA,EAAA,KAAA,EAAA,eAAA,EAAA;gDACd,GAAU,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;OAxBH,IAAY,EAAA,GAAA,OAAA,CAAA;OACZ,OAAgB,EAAA,GAAA,OAAA,CAAA;AAChB,CAAA,IAAA,EAAA,QAAQ,GAAG,KAAK,EAAA,GAAA,OAAA,CAAA;AAChB,CAAA,IAAA,EAAA,IAAI,GAAe,GAAG,EAAA,GAAA,OAAA,CAAA;OACtB,KAAa,EAAA,GAAA,OAAA,CAAA;OAElB,aAAa,GAAG,oBAAoB,CAAC,qBAAqB,EAAA,CAAA,CAAA;AAM5D,CAAA,IAAA,YAAY,OAAO,YAAY,EAAA,CAAA;;UAE1B,WAAW,GAAA;AAClB,EAAA,YAAA,CAAA,CAAA,EAAA,OAAO,IAAI,OAAO,CAAA,CAAA;AAClB,EAAA,YAAY,CAAC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA,CAAA;;;;;;;;;;;;;;AARzC,EAAG,YAAA,CAAA,CAAA,EAAA,SAAS,GAAG,OAAO,CAAC,KAAK,CAAA,CAAA;AAC5B,kBAAG,UAAU,GAAf,MAAA,CAAA,MAAA,KAAuB,WAAW,CAAA,CAAA,CAAA;;;GAC/B,OAAS,UAAU,CAAC,KAAK,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/public/components/tooltip/Tooltip.js

@@ -1,2 +1,174 @@
-import{S as t,i as o,a as e,b as r,f as n,s as a,c as i,e as s,d as m,t as c,n as l,g as p,h as f,j as d,k as b,m as g,o as h,p as _,q as x}from"../../index-c33b3772.js";function u(t){let o,e,n,a,_,x,u=[{class:x=w(t[2])+" "+t[4]},{"aria-describedby":t[0]},t[3]],M={};for(let t=0;t<u.length;t+=1)M=i(M,u[t]);return{c(){o=s("div"),e=s("slot"),n=m(),a=s("span"),_=c(t[1]),this.c=l,p(a,"id",t[0]),p(a,"class","mc-tooltip__content"),p(a,"role","tooltip"),f(o,M)},m(t,i){r(t,o,i),d(o,e),d(o,n),d(o,a),d(a,_)},p(t,[e]){2&e&&b(_,t[1]),1&e&&p(a,"id",t[0]),f(o,M=g(u,[20&e&&x!==(x=w(t[2])+" "+t[4])&&{class:x},1&e&&{"aria-describedby":t[0]},8&e&&t[3]]))},i:l,o:l,d(t){t&&h(o)}}}function w(t){const o=["mc-tooltip"];return t&&o.push(`mc-tooltip--${t}`),o.join(" ")}function M(t,o,e){let r,n;const a=["id","text","position"];let s=_(o,a),{id:m}=o,{text:c}=o,{position:l}=o;return t.$$set=t=>{e(6,o=i(i({},o),x(t))),e(5,s=_(o,a)),"id"in t&&e(0,m=t.id),"text"in t&&e(1,c=t.text),"position"in t&&e(2,l=t.position)},t.$$.update=()=>{e(4,r=o.class),e(3,n=Object.assign({},s)),8&t.$$.dirty&&delete n.class},o=x(o),[m,c,l,n,r]}class k extends t{constructor(t){super();const i=document.createElement("style");i.textContent='.mc-tooltip{font-family:"LeroyMerlin", sans-serif;font-weight:400;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative}.mc-tooltip:focus,.mc-tooltip:hover{cursor:help}.mc-tooltip:focus .mc-tooltip__content,.mc-tooltip:hover .mc-tooltip__content{visibility:visible}.mc-tooltip__content{font-size:0.875rem;line-height:1.2857142857;background-color:#4d4d4d;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#ffffff;padding:0.4375rem 1rem;position:absolute;text-align:center;visibility:hidden;white-space:normal;z-index:1000;border:1px solid #ffffff}@supports (width: -webkit-max-content) or (width: -moz-max-content) or (width: max-content){.mc-tooltip__content{min-width:6.625rem;max-width:13.75rem;width:-webkit-max-content;width:-moz-max-content;width:max-content}}.mc-tooltip__content::before{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMC41cmVtIiB3aWR0aD0iMC41cmVtIiB2aWV3Qm94PSIwIDAgOCA4Ij48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMS43OSAzLjExbDYuMjEtMy4xMXY4bC02LjIxLTMuMTFhMSAxIDAgMCAxLS40NS0xLjM0IDEgMSAwIDAgMSAuNDUtLjQ0eiIvPjwvc3ZnPg==") no-repeat;background-size:0.625rem;content:"";height:0.625rem;position:absolute;width:0.625rem}.mc-tooltip__content::after{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMC41cmVtIiB3aWR0aD0iMC41cmVtIiB2aWV3Qm94PSIwIDAgOCA4Ij48cGF0aCBmaWxsPSIjNGQ0ZDRkIiBkPSJNMS43OSAzLjExbDYuMjEtMy4xMXY4bC02LjIxLTMuMTFhMSAxIDAgMCAxLS40NS0xLjM0IDEgMSAwIDAgMSAuNDUtLjQ0eiIvPjwvc3ZnPg==") no-repeat;background-size:0.5rem;content:"";height:0.5rem;position:absolute;width:0.5rem}.mc-tooltip--top .mc-tooltip__content{top:0;left:50%;-webkit-transform:translate(-50%, calc(-100% - 0.75rem));-ms-transform:translate(-50%, calc(-100% - 0.75rem));transform:translate(-50%, calc(-100% - 0.75rem))}.mc-tooltip--top .mc-tooltip__content::after,.mc-tooltip--top .mc-tooltip__content::before{bottom:0;left:50%;-webkit-transform:translate(-50%, 100%) rotate(-90deg);-ms-transform:translate(-50%, 100%) rotate(-90deg);transform:translate(-50%, 100%) rotate(-90deg)}.mc-tooltip--top .mc-tooltip__content::before{bottom:-1px}.mc-tooltip--right .mc-tooltip__content{top:50%;right:0;-webkit-transform:translate(calc(100% + 0.75rem), -50%);-ms-transform:translate(calc(100% + 0.75rem), -50%);transform:translate(calc(100% + 0.75rem), -50%)}.mc-tooltip--right .mc-tooltip__content::after,.mc-tooltip--right .mc-tooltip__content::before{top:50%;left:0;-webkit-transform:translate(-99%, -50%);-ms-transform:translate(-99%, -50%);transform:translate(-99%, -50%)}.mc-tooltip--right .mc-tooltip__content::before{left:-1px}.mc-tooltip--left .mc-tooltip__content{left:0;top:50%;-webkit-transform:translate(calc(-100% - 0.75rem), -50%);-ms-transform:translate(calc(-100% - 0.75rem), -50%);transform:translate(calc(-100% - 0.75rem), -50%)}.mc-tooltip--left .mc-tooltip__content::after,.mc-tooltip--left .mc-tooltip__content::before{top:50%;right:0;-webkit-transform:translate(99%, -50%) rotate(180deg);-ms-transform:translate(99%, -50%) rotate(180deg);transform:translate(99%, -50%) rotate(180deg)}.mc-tooltip--left .mc-tooltip__content::before{right:-1px}.mc-tooltip--bottom .mc-tooltip__content{bottom:0;left:50%;-webkit-transform:translate(-50%, calc(100% + 0.75rem));-ms-transform:translate(-50%, calc(100% + 0.75rem));transform:translate(-50%, calc(100% + 0.75rem))}.mc-tooltip--bottom .mc-tooltip__content::after,.mc-tooltip--bottom .mc-tooltip__content::before{top:0;left:50%;-webkit-transform:translate(-50%, -100%) rotate(90deg);-ms-transform:translate(-50%, -100%) rotate(90deg);transform:translate(-50%, -100%) rotate(90deg)}.mc-tooltip--bottom .mc-tooltip__content::before{top:-1px}.mc-tooltip--no-pointer .mc-tooltip__content::after,.mc-tooltip--no-pointer .mc-tooltip__content::before{background:none}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){.mc-tooltip__content{width:13.75rem}.mc-tooltip--top .mc-tooltip__content{-webkit-transform:translate(-50%, -100%);-ms-transform:translate(-50%, -100%);transform:translate(-50%, -100%);margin-top:-0.75rem}.mc-tooltip--right .mc-tooltip__content{-webkit-transform:translate(100%, -50%);-ms-transform:translate(100%, -50%);transform:translate(100%, -50%);margin-right:-0.75rem}.mc-tooltip--left .mc-tooltip__content{-webkit-transform:translate(-100%, -50%);-ms-transform:translate(-100%, -50%);transform:translate(-100%, -50%);margin-left:-0.75rem}.mc-tooltip--bottom .mc-tooltip__content{-webkit-transform:translate(-50%, 100%);-ms-transform:translate(-50%, 100%);transform:translate(-50%, 100%);margin-bottom:-0.75rem}}',this.shadowRoot.appendChild(i),o(this,{target:this.shadowRoot,props:e(this.attributes),customElement:!0},M,u,a,{id:0,text:1,position:2},null),t&&(t.target&&r(t.target,this,t.anchor),t.props&&(this.$set(t.props),n()))}static get observedAttributes(){return["id","text","position"]}get id(){return this.$$.ctx[0]}set id(t){this.$$set({id:t}),n()}get text(){return this.$$.ctx[1]}set text(t){this.$$set({text:t}),n()}get position(){return this.$$.ctx[2]}set position(t){this.$$set({position:t}),n()}}export{k 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, k as set_data, m as get_spread_update, o as detach, p as compute_rest_props, q as exclude_internal_props } from '../../index-c33b3772.js';
+
+/* src/components/tooltip/Tooltip.svelte generated by Svelte v3.58.0 */
+
+function create_fragment(ctx) {
+	let div;
+	let slot;
+	let t0;
+	let span;
+	let t1;
+	let div_class_value;
+
+	let div_levels = [
+		{
+			class: div_class_value = "" + (getClasses(/*position*/ ctx[2]) + " " + /*userClass*/ ctx[4])
+		},
+		{ "aria-describedby": /*id*/ ctx[0] },
+		/*attributes*/ ctx[3]
+	];
+
+	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");
+			t0 = space();
+			span = element("span");
+			t1 = text(/*text*/ ctx[1]);
+			this.c = noop;
+			attr(span, "id", /*id*/ ctx[0]);
+			attr(span, "class", "mc-tooltip__content");
+			attr(span, "role", "tooltip");
+			set_attributes(div, div_data);
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, slot);
+			append(div, t0);
+			append(div, span);
+			append(span, t1);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*text*/ 2) set_data(t1, /*text*/ ctx[1]);
+
+			if (dirty & /*id*/ 1) {
+				attr(span, "id", /*id*/ ctx[0]);
+			}
+
+			set_attributes(div, div_data = get_spread_update(div_levels, [
+				dirty & /*position, userClass*/ 20 && div_class_value !== (div_class_value = "" + (getClasses(/*position*/ ctx[2]) + " " + /*userClass*/ ctx[4])) && { class: div_class_value },
+				dirty & /*id*/ 1 && { "aria-describedby": /*id*/ ctx[0] },
+				dirty & /*attributes*/ 8 && /*attributes*/ ctx[3]
+			]));
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+function getClasses(position) {
+	const classes = ['mc-tooltip'];
+
+	if (position) {
+		classes.push(`mc-tooltip--${position}`);
+	}
+
+	return classes.join(' ');
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let userClass;
+	let attributes;
+	const omit_props_names = ["id","text","position"];
+	let $$restProps = compute_rest_props($$props, omit_props_names);
+	let { id } = $$props;
+	let { text } = $$props;
+	let { position } = $$props;
+
+	$$self.$$set = $$new_props => {
+		$$invalidate(6, $$props = assign(assign({}, $$props), exclude_internal_props($$new_props)));
+		$$invalidate(5, $$restProps = compute_rest_props($$props, omit_props_names));
+		if ('id' in $$new_props) $$invalidate(0, id = $$new_props.id);
+		if ('text' in $$new_props) $$invalidate(1, text = $$new_props.text);
+		if ('position' in $$new_props) $$invalidate(2, position = $$new_props.position);
+	};
+
+	$$self.$$.update = () => {
+		$$invalidate(4, userClass = $$props.class);
+		$$invalidate(3, attributes = Object.assign({}, $$restProps));
+
+		if ($$self.$$.dirty & /*attributes*/ 8) {
+			delete attributes.class;
+		}
+	};
+
+	$$props = exclude_internal_props($$props);
+	return [id, text, position, attributes, userClass];
+}
+
+class Tooltip extends SvelteElement {
+	constructor(options) {
+		super();
+		const style = document.createElement('style');
+		style.textContent = `.mc-tooltip{font-family:"LeroyMerlin", sans-serif;font-weight:400;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative}.mc-tooltip:focus,.mc-tooltip:hover{cursor:help}.mc-tooltip:focus .mc-tooltip__content,.mc-tooltip:hover .mc-tooltip__content{visibility:visible}.mc-tooltip__content{font-size:0.875rem;line-height:1.2857142857;background-color:#4d4d4d;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#ffffff;padding:0.4375rem 1rem;position:absolute;text-align:center;visibility:hidden;white-space:normal;z-index:1000;border:1px solid #ffffff}@supports (width: -webkit-max-content) or (width: -moz-max-content) or (width: max-content){.mc-tooltip__content{min-width:6.625rem;max-width:13.75rem;width:-webkit-max-content;width:-moz-max-content;width:max-content}}.mc-tooltip__content::before{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMC41cmVtIiB3aWR0aD0iMC41cmVtIiB2aWV3Qm94PSIwIDAgOCA4Ij48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMS43OSAzLjExbDYuMjEtMy4xMXY4bC02LjIxLTMuMTFhMSAxIDAgMCAxLS40NS0xLjM0IDEgMSAwIDAgMSAuNDUtLjQ0eiIvPjwvc3ZnPg==") no-repeat;background-size:0.625rem;content:"";height:0.625rem;position:absolute;width:0.625rem}.mc-tooltip__content::after{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMC41cmVtIiB3aWR0aD0iMC41cmVtIiB2aWV3Qm94PSIwIDAgOCA4Ij48cGF0aCBmaWxsPSIjNGQ0ZDRkIiBkPSJNMS43OSAzLjExbDYuMjEtMy4xMXY4bC02LjIxLTMuMTFhMSAxIDAgMCAxLS40NS0xLjM0IDEgMSAwIDAgMSAuNDUtLjQ0eiIvPjwvc3ZnPg==") no-repeat;background-size:0.5rem;content:"";height:0.5rem;position:absolute;width:0.5rem}.mc-tooltip--top .mc-tooltip__content{top:0;left:50%;-webkit-transform:translate(-50%, calc(-100% - 0.75rem));-ms-transform:translate(-50%, calc(-100% - 0.75rem));transform:translate(-50%, calc(-100% - 0.75rem))}.mc-tooltip--top .mc-tooltip__content::after,.mc-tooltip--top .mc-tooltip__content::before{bottom:0;left:50%;-webkit-transform:translate(-50%, 100%) rotate(-90deg);-ms-transform:translate(-50%, 100%) rotate(-90deg);transform:translate(-50%, 100%) rotate(-90deg)}.mc-tooltip--top .mc-tooltip__content::before{bottom:-1px}.mc-tooltip--right .mc-tooltip__content{top:50%;right:0;-webkit-transform:translate(calc(100% + 0.75rem), -50%);-ms-transform:translate(calc(100% + 0.75rem), -50%);transform:translate(calc(100% + 0.75rem), -50%)}.mc-tooltip--right .mc-tooltip__content::after,.mc-tooltip--right .mc-tooltip__content::before{top:50%;left:0;-webkit-transform:translate(-99%, -50%);-ms-transform:translate(-99%, -50%);transform:translate(-99%, -50%)}.mc-tooltip--right .mc-tooltip__content::before{left:-1px}.mc-tooltip--left .mc-tooltip__content{left:0;top:50%;-webkit-transform:translate(calc(-100% - 0.75rem), -50%);-ms-transform:translate(calc(-100% - 0.75rem), -50%);transform:translate(calc(-100% - 0.75rem), -50%)}.mc-tooltip--left .mc-tooltip__content::after,.mc-tooltip--left .mc-tooltip__content::before{top:50%;right:0;-webkit-transform:translate(99%, -50%) rotate(180deg);-ms-transform:translate(99%, -50%) rotate(180deg);transform:translate(99%, -50%) rotate(180deg)}.mc-tooltip--left .mc-tooltip__content::before{right:-1px}.mc-tooltip--bottom .mc-tooltip__content{bottom:0;left:50%;-webkit-transform:translate(-50%, calc(100% + 0.75rem));-ms-transform:translate(-50%, calc(100% + 0.75rem));transform:translate(-50%, calc(100% + 0.75rem))}.mc-tooltip--bottom .mc-tooltip__content::after,.mc-tooltip--bottom .mc-tooltip__content::before{top:0;left:50%;-webkit-transform:translate(-50%, -100%) rotate(90deg);-ms-transform:translate(-50%, -100%) rotate(90deg);transform:translate(-50%, -100%) rotate(90deg)}.mc-tooltip--bottom .mc-tooltip__content::before{top:-1px}.mc-tooltip--no-pointer .mc-tooltip__content::after,.mc-tooltip--no-pointer .mc-tooltip__content::before{background:none}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){.mc-tooltip__content{width:13.75rem}.mc-tooltip--top .mc-tooltip__content{-webkit-transform:translate(-50%, -100%);-ms-transform:translate(-50%, -100%);transform:translate(-50%, -100%);margin-top:-0.75rem}.mc-tooltip--right .mc-tooltip__content{-webkit-transform:translate(100%, -50%);-ms-transform:translate(100%, -50%);transform:translate(100%, -50%);margin-right:-0.75rem}.mc-tooltip--left .mc-tooltip__content{-webkit-transform:translate(-100%, -50%);-ms-transform:translate(-100%, -50%);transform:translate(-100%, -50%);margin-left:-0.75rem}.mc-tooltip--bottom .mc-tooltip__content{-webkit-transform:translate(-50%, 100%);-ms-transform:translate(-50%, 100%);transform:translate(-50%, 100%);margin-bottom:-0.75rem}}`;
+		this.shadowRoot.appendChild(style);
+
+		init(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object(this.attributes),
+				customElement: true
+			},
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{ id: 0, text: 1, position: 2 },
+			null
+		);
+
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+
+			if (options.props) {
+				this.$set(options.props);
+				flush();
+			}
+		}
+	}
+
+	static get observedAttributes() {
+		return ["id", "text", "position"];
+	}
+
+	get id() {
+		return this.$$.ctx[0];
+	}
+
+	set id(id) {
+		this.$$set({ id });
+		flush();
+	}
+
+	get text() {
+		return this.$$.ctx[1];
+	}
+
+	set text(text) {
+		this.$$set({ text });
+		flush();
+	}
+
+	get position() {
+		return this.$$.ctx[2];
+	}
+
+	set position(position) {
+		this.$$set({ position });
+		flush();
+	}
+}
+
+export { Tooltip as default };
 //# sourceMappingURL=Tooltip.js.map

package/public/components/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/components/tooltip/Tooltip.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import type { TooltipPosition } from './tooltip.types';\n\n  export let id: string;\n  export let text: string;\n  export let position: TooltipPosition;\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n  function getClasses(position: TooltipPosition) {\n    const classes = ['mc-tooltip'];\n\n    if (position) {\n      classes.push(`mc-tooltip--${position}`);\n    }\n    return classes.join(' ');\n  }\n</script>\n\n<div\n  class=\"{getClasses(position)} {userClass}\"\n  aria-describedby={id}\n  {...attributes}\n>\n  <slot />\n  <span {id} class=\"mc-tooltip__content\" role=\"tooltip\">\n    {text}\n  </span>\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.tooltip';\n</style>\n"],"names":["getClasses","ctx","insert","target","div","anchor","append","slot","span","class","div_class_value","position","classes","push","join","id","$$props","text","$$invalidate","userClass","attributes","Object","assign","$$restProps"],"mappings":"oNAsBUA,EAAWC,EAAQ,IAAA,IAAIA,EAAS,wBACtBA,EAAE,IAChBA,EAAU,yGAIXA,EAAI,oGAPTC,EASKC,EAAAC,EAAAC,GAJHC,EAAOF,EAAAG,UACPD,EAEMF,EAAAI,6BADHP,EAAI,gDANCD,EAAWC,EAAQ,IAAA,IAAIA,EAAS,KAAA,CAAAQ,MAAAC,4BACtBT,EAAE,SAChBA,EAAU,8BAbL,SAAAD,EAAWW,GACZ,MAAAC,GAAW,qBAEbD,GACFC,EAAQC,KAAI,eAAgBF,KAEvBC,EAAQE,KAAK,iFAZXC,GAAUC,QACVC,GAAYD,YACZL,GAAyBK,8JACjCE,EAAA,EAAAC,EAAYH,EAAQP,WACpBW,EAALC,OAAAC,UAAuBC,yBACXH,EAAWX"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/tooltip/Tooltip.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import type { TooltipPosition } from './tooltip.types';\n\n  export let id: string;\n  export let text: string;\n  export let position: TooltipPosition;\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n  function getClasses(position: TooltipPosition) {\n    const classes = ['mc-tooltip'];\n\n    if (position) {\n      classes.push(`mc-tooltip--${position}`);\n    }\n    return classes.join(' ');\n  }\n</script>\n\n<div\n  class=\"{getClasses(position)} {userClass}\"\n  aria-describedby={id}\n  {...attributes}\n>\n  <slot />\n  <span {id} class=\"mc-tooltip__content\" role=\"tooltip\">\n    {text}\n  </span>\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.tooltip';\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;;kCAsBU,UAAU,cAAC,GAAQ,CAAA,CAAA,CAAA,CAAA,GAAA,GAAA,iBAAI,GAAS,CAAA,CAAA,CAAA,CAAA;;+BACtB,GAAE,CAAA,CAAA,CAAA,EAAA;iBAChB,GAAU,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;sBAIX,GAAI,CAAA,CAAA,CAAA,CAAA,CAAA;;;;;;;;GAPT,MASK,CAAA,MAAA,EAAA,GAAA,EAAA,MAAA,CAAA,CAAA;GAJH,MAAO,CAAA,GAAA,EAAA,IAAA,CAAA,CAAA;;GACP,MAEM,CAAA,GAAA,EAAA,IAAA,CAAA,CAAA;;;;iDADH,GAAI,CAAA,CAAA,CAAA,CAAA,CAAA;;;;;;;uFANC,UAAU,cAAC,GAAQ,CAAA,CAAA,CAAA,CAAA,GAAA,GAAA,iBAAI,GAAS,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAA,KAAA,EAAA,eAAA,EAAA;qDACtB,GAAE,CAAA,CAAA,CAAA,EAAA;+CAChB,GAAU,CAAA,CAAA,CAAA;;;;;;;;;;;AAbL,SAAA,UAAU,CAAC,QAAyB,EAAA;AACrC,CAAA,MAAA,OAAO,IAAI,YAAY,CAAA,CAAA;;KAEzB,QAAQ,EAAA;EACV,OAAO,CAAC,IAAI,CAAA,CAAA,YAAA,EAAgB,QAAQ,CAAA,CAAA,CAAA,CAAA;;;QAE/B,OAAO,CAAC,IAAI,CAAC,GAAG,CAAA,CAAA;;;;;;;;OAZd,EAAU,EAAA,GAAA,OAAA,CAAA;OACV,IAAY,EAAA,GAAA,OAAA,CAAA;OACZ,QAAyB,EAAA,GAAA,OAAA,CAAA;;;;;;;;;;;AACpC,EAAG,YAAA,CAAA,CAAA,EAAA,SAAS,GAAG,OAAO,CAAC,KAAK,CAAA,CAAA;AAC5B,kBAAG,UAAU,GAAf,MAAA,CAAA,MAAA,KAAuB,WAAW,CAAA,CAAA,CAAA;;;GAC/B,OAAS,UAAU,CAAC,KAAK,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/public/icons-storybook.js

@@ -13,6 +13,22 @@ import ArrowArrowRight24 from './icons/ArrowArrowRight24.js';
 import DisplayHome24 from './icons/DisplayHome24.js';
 import DisplayBlink24 from './icons/DisplayBlink24.js';
 import AspectQuantity24 from './icons/AspectQuantity24.js';
+import ArrowArrowTopRight16 from './icons/ArrowArrowTopRight16.js';
+import ArrowArrowBottomRight16 from './icons/ArrowArrowBottomRight16.js';
+
+if (!customElements.get('navigation-arrow-arrowtopright-16px')) {
+  customElements.define(
+    'navigation-arrow-arrowtopright-16px',
+    ArrowArrowTopRight16,
+  );
+}
+
+if (!customElements.get('navigation-arrow-arrowbottomright-16px')) {
+  customElements.define(
+    'navigation-arrow-arrowbottomright-16px',
+    ArrowArrowBottomRight16,
+  );
+}
 
 if (!customElements.get('navigation-arrow-arrow--left-32px')) {
   customElements.define('navigation-arrow-arrow--left-32px', ArrowArrowLeft32);