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

package/public/components/tabs/Tabs.js

@@ -1,2 +1,616 @@
-import{S as e,i as t,a as s,b as a,f as i,s as n,c as l,e as c,n as r,g as o,h as d,j as b,m,o as _,J as f,p,q as u,d as h,v as x,t as g,z as v,l as k,k as w,K as $}from"../../index-c33b3772.js";import{E as y}from"../../EventHandler-02058705.js";function A(e,t,s){const a=e.slice();return a[16]=t[s],a[18]=s,a}function j(e){let t,s,i,n,l,r,d,m,f=e[16].text+"";function p(...t){return e[12](e[18],e[16],...t)}return{c(){t=c("button"),s=c("span"),i=g(f),o(s,"class","mc-tabs__text"),o(t,"role","tab"),o(t,"type","button"),o(t,"class","mc-tabs__element"),o(t,"id",n=e[16].id),t.disabled=l=e[16].disabled,o(t,"aria-selected",r=e[16].isActive?"true":"false"),v(t,"mc-tabs__element--disabled",e[16].disabled),v(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},m(e,n){a(e,t,n),b(t,s),b(s,i),d||(m=k(t,"click",p),d=!0)},p(s,a){e=s,256&a&&f!==(f=e[16].text+"")&&w(i,f),256&a&&n!==(n=e[16].id)&&o(t,"id",n),256&a&&l!==(l=e[16].disabled)&&(t.disabled=l),256&a&&r!==(r=e[16].isActive?"true":"false")&&o(t,"aria-selected",r),256&a&&v(t,"mc-tabs__element--disabled",e[16].disabled),304&a&&v(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},d(e){e&&_(t),d=!1,m()}}}function E(e){let t;function s(e,t){return e[16].disabled?O:C}let i=s(e),n=i(e);return{c(){n.c(),t=$()},m(e,s){n.m(e,s),a(e,t,s)},p(e,a){i===(i=s(e))&&n?n.p(e,a):(n.d(1),n=i(e),n&&(n.c(),n.m(t.parentNode,t)))},d(e){n.d(e),e&&_(t)}}}function O(e){let t,s,i,n,l,r=e[16].text+"";return{c(){t=c("span"),s=c("span"),i=g(r),o(s,"class","mc-tabs__text"),o(t,"role","tab"),o(t,"class","mc-tabs__element"),o(t,"id",n=e[16].id),o(t,"aria-selected",l=e[16].isActive?"true":"false"),v(t,"mc-tabs__element--disabled",e[16].disabled),v(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},m(e,n){a(e,t,n),b(t,s),b(s,i)},p(e,s){256&s&&r!==(r=e[16].text+"")&&w(i,r),256&s&&n!==(n=e[16].id)&&o(t,"id",n),256&s&&l!==(l=e[16].isActive?"true":"false")&&o(t,"aria-selected",l),256&s&&v(t,"mc-tabs__element--disabled",e[16].disabled),304&s&&v(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},d(e){e&&_(t)}}}function C(e){let t,s,i,n,l,r,d,m,f=e[16].text+"";function p(...t){return e[11](e[18],e[16],...t)}return{c(){t=c("a"),s=c("span"),i=g(f),o(s,"class","mc-tabs__text"),o(t,"href",n=e[16].href),o(t,"role","tab"),o(t,"class","mc-tabs__element"),o(t,"id",l=e[16].id),o(t,"aria-selected",r=e[16].isActive?"true":"false"),v(t,"mc-tabs__element--disabled",e[16].disabled),v(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},m(e,n){a(e,t,n),b(t,s),b(s,i),d||(m=k(t,"click",p),d=!0)},p(s,a){e=s,256&a&&f!==(f=e[16].text+"")&&w(i,f),256&a&&n!==(n=e[16].href)&&o(t,"href",n),256&a&&l!==(l=e[16].id)&&o(t,"id",l),256&a&&r!==(r=e[16].isActive?"true":"false")&&o(t,"aria-selected",r),256&a&&v(t,"mc-tabs__element--disabled",e[16].disabled),304&a&&v(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},d(e){e&&_(t),d=!1,m()}}}function L(e){let t,s;function i(e,t){return e[16].href?E:j}let n=i(e),l=n(e);return{c(){t=c("li"),l.c(),s=h(),o(t,"class","mc-tabs__item"),o(t,"role","presentation")},m(e,i){a(e,t,i),l.m(t,null),b(t,s)},p(e,a){n===(n=i(e))&&l?l.p(e,a):(l.d(1),l=n(e),l&&(l.c(),l.m(t,s)))},d(e){e&&_(t),l.d()}}}function S(e){let t,s,i,n=e[8],p=[];for(let t=0;t<n.length;t+=1)p[t]=L(A(e,n,t));let u=[{class:i="mc-tabs "+(e[0]&&"full"===e[0]?" mc-tabs--full":"")+" "+(e[0]&&"centered"===e[0]?" mc-tabs--full-centered":"")+" "+(e[3]?` mc-tabs--${e[3]}`:"")+(e[2]?" mc-tabs--no-divider":"")},e[6]],h={};for(let e=0;e<u.length;e+=1)h=l(h,u[e]);return{c(){t=c("div"),s=c("ul");for(let e=0;e<p.length;e+=1)p[e].c();this.c=r,o(s,"class","mc-tabs__nav"),o(s,"role","tablist"),o(s,"aria-label",e[1]),d(t,h)},m(i,n){a(i,t,n),b(t,s);for(let e=0;e<p.length;e+=1)p[e]&&p[e].m(s,null);e[13](s)},p(e,[a]){if(816&a){let t;for(n=e[8],t=0;t<n.length;t+=1){const i=A(e,n,t);p[t]?p[t].p(i,a):(p[t]=L(i),p[t].c(),p[t].m(s,null))}for(;t<p.length;t+=1)p[t].d(1);p.length=n.length}2&a&&o(s,"aria-label",e[1]),d(t,h=m(u,[13&a&&i!==(i="mc-tabs "+(e[0]&&"full"===e[0]?" mc-tabs--full":"")+" "+(e[0]&&"centered"===e[0]?" mc-tabs--full-centered":"")+" "+(e[3]?` mc-tabs--${e[3]}`:"")+(e[2]?" mc-tabs--no-divider":""))&&{class:i},64&a&&e[6]]))},i:r,o:r,d(s){s&&_(t),f(p,s),e[13](null)}}}function q(e,t,s){let a,i;const n=["align","description","nodivider","tabs","type","stateless","selectedtab"];let c,r=p(t,n),{align:o="auto"}=t,{description:d="Tabs"}=t,{nodivider:b=!1}=t,{tabs:m}=t,{type:_="tabs"}=t,{stateless:f=!1}=t,{selectedtab:h}=t,g=new y;function v(e,t){const s=e.target;f||(c.querySelectorAll(".mc-tabs__element").forEach((e=>{e.classList.remove("mc-tabs__element--selected"),e.setAttribute("aria-selected","false")})),s.classList.add("mc-tabs__element--selected"),s.setAttribute("aria-selected","true")),g.dispatch("tab-clicked",Object.assign(t,{target:s}))}return e.$$set=e=>{t=l(l({},t),u(e)),s(15,r=p(t,n)),"align"in e&&s(0,o=e.align),"description"in e&&s(1,d=e.description),"nodivider"in e&&s(2,b=e.nodivider),"tabs"in e&&s(10,m=e.tabs),"type"in e&&s(3,_=e.type),"stateless"in e&&s(4,f=e.stateless),"selectedtab"in e&&s(5,h=e.selectedtab)},e.$$.update=()=>{1024&e.$$.dirty&&s(8,a=m?JSON.parse(m):[]),s(6,i=Object.assign({},r)),64&e.$$.dirty&&delete i.class},[o,d,b,_,f,h,i,c,a,v,m,(e,t,s)=>v(s,Object.assign({index:e},t)),(e,t,s)=>v(s,Object.assign({index:e},t)),function(e){x[e?"unshift":"push"]((()=>{c=e,s(7,c)}))}]}class z extends e{constructor(e){super();const l=document.createElement("style");l.textContent='.mc-tabs{font-family:"LeroyMerlin", sans-serif;font-weight:400;background-color:#ffffff;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;width:100%}.mc-tabs::after{background:#b3b3b3;content:"";display:block;margin:0 auto;height:1px;width:100%;bottom:0;left:0;position:absolute}.mc-tabs--no-shadow::after,.mc-tabs--no-divider::after{display:none}.mc-tabs__nav{list-style:none;margin-left:0;padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:0;margin-bottom:0}.mc-tabs__nav,.mc-tabs__select{position:relative}.mc-tabs__link,.mc-tabs__element{font-size:0.875rem;line-height:1.2857142857;font-weight:600;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:none;border:none;color:#666666;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;height:3.5rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;outline:none;padding-left:0.75rem;padding-right:0.75rem;position:relative;text-decoration:none}.mc-tabs__link::before,.mc-tabs__element::before{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;bottom:-0.125rem;top:-0.125rem}.mc-tabs__link::after,.mc-tabs__element::after{background-color:transparent;bottom:0;content:"";height:0.25rem;left:1.5rem;position:absolute;right:1.5rem}.mc-tabs__link:hover .mc-tabs__text,.mc-tabs__element:hover .mc-tabs__text{background-color:#eeeff1}.mc-tabs__link:active,.mc-tabs__element:active{color:#333333}.mc-tabs__link:active .mc-tabs__text,.mc-tabs__element:active .mc-tabs__text{background-color:#cfd2d8}.mc-tabs__link:focus::before,.mc-tabs__element:focus::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-tabs__link--selected,.mc-tabs__element--selected{color:#000000}.mc-tabs__link--selected::after,.mc-tabs__element--selected::after{background-color:#000000}.mc-tabs__link--disabled,.mc-tabs__element--disabled{cursor:not-allowed;background-color:#cccccc;pointer-events:none}.mc-tabs__link--disabled,.mc-tabs__link--disabled:hover,.mc-tabs__link--disabled:focus,.mc-tabs__link--disabled:active,.mc-tabs__element--disabled,.mc-tabs__element--disabled:hover,.mc-tabs__element--disabled:focus,.mc-tabs__element--disabled:active{-webkit-box-shadow:none;box-shadow:none}.mc-tabs__text{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:0.25rem;display:-webkit-box;display:-ms-flexbox;display:flex;gap:0.25rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;padding:0.4375rem 0.75rem;pointer-events:none}.mc-tabs__icon{fill:currentColor;height:1.5rem;width:1.5rem}.mc-tabs--full-centered{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-tabs--dropdown{padding:1rem;width:auto}@media screen and (min-width: 680px){.mc-tabs{width:auto}.mc-tabs--full,.mc-tabs--full-centered{width:100%}}@media screen and (max-width: 679px){.mc-tabs:not(.mc-tabs--dropdown)::before{bottom:0.125rem}.mc-tabs__nav{overflow:auto hidden;white-space:nowrap}}',this.shadowRoot.appendChild(l),t(this,{target:this.shadowRoot,props:s(this.attributes),customElement:!0},q,S,n,{align:0,description:1,nodivider:2,tabs:10,type:3,stateless:4,selectedtab:5},null),e&&(e.target&&a(e.target,this,e.anchor),e.props&&(this.$set(e.props),i()))}static get observedAttributes(){return["align","description","nodivider","tabs","type","stateless","selectedtab"]}get align(){return this.$$.ctx[0]}set align(e){this.$$set({align:e}),i()}get description(){return this.$$.ctx[1]}set description(e){this.$$set({description:e}),i()}get nodivider(){return this.$$.ctx[2]}set nodivider(e){this.$$set({nodivider:e}),i()}get tabs(){return this.$$.ctx[10]}set tabs(e){this.$$set({tabs:e}),i()}get type(){return this.$$.ctx[3]}set type(e){this.$$set({type:e}),i()}get stateless(){return this.$$.ctx[4]}set stateless(e){this.$$set({stateless:e}),i()}get selectedtab(){return this.$$.ctx[5]}set selectedtab(e){this.$$set({selectedtab:e}),i()}}export{z 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, g as attr, h as set_attributes, j as append, m as get_spread_update, o as detach, J as destroy_each, p as compute_rest_props, q as exclude_internal_props, d as space, v as binding_callbacks, t as text, z as toggle_class, l as listen, k as set_data, K as empty } from '../../index-c33b3772.js';
+import { E as EventHandler } from '../../EventHandler-02058705.js';
+
+/* src/components/tabs/Tabs.svelte generated by Svelte v3.58.0 */
+
+function get_each_context(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[16] = list[i];
+	child_ctx[18] = i;
+	return child_ctx;
+}
+
+// (83:8) {:else}
+function create_else_block_1(ctx) {
+	let button;
+	let span;
+	let t_value = /*tab*/ ctx[16].text + "";
+	let t;
+	let button_id_value;
+	let button_disabled_value;
+	let button_aria_selected_value;
+	let mounted;
+	let dispose;
+
+	function click_handler_1(...args) {
+		return /*click_handler_1*/ ctx[12](/*index*/ ctx[18], /*tab*/ ctx[16], ...args);
+	}
+
+	return {
+		c() {
+			button = element("button");
+			span = element("span");
+			t = text(t_value);
+			attr(span, "class", "mc-tabs__text");
+			attr(button, "role", "tab");
+			attr(button, "type", "button");
+			attr(button, "class", "mc-tabs__element");
+			attr(button, "id", button_id_value = /*tab*/ ctx[16].id);
+			button.disabled = button_disabled_value = /*tab*/ ctx[16].disabled;
+			attr(button, "aria-selected", button_aria_selected_value = /*tab*/ ctx[16].isActive ? 'true' : 'false');
+			toggle_class(button, "mc-tabs__element--disabled", /*tab*/ ctx[16].disabled);
+
+			toggle_class(button, "mc-tabs__element--selected", /*stateless*/ ctx[4]
+			? /*tab*/ ctx[16].id == /*selectedtab*/ ctx[5]
+			: /*tab*/ ctx[16].isActive);
+		},
+		m(target, anchor) {
+			insert(target, button, anchor);
+			append(button, span);
+			append(span, t);
+
+			if (!mounted) {
+				dispose = listen(button, "click", click_handler_1);
+				mounted = true;
+			}
+		},
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+			if (dirty & /*parsedTabs*/ 256 && t_value !== (t_value = /*tab*/ ctx[16].text + "")) set_data(t, t_value);
+
+			if (dirty & /*parsedTabs*/ 256 && button_id_value !== (button_id_value = /*tab*/ ctx[16].id)) {
+				attr(button, "id", button_id_value);
+			}
+
+			if (dirty & /*parsedTabs*/ 256 && button_disabled_value !== (button_disabled_value = /*tab*/ ctx[16].disabled)) {
+				button.disabled = button_disabled_value;
+			}
+
+			if (dirty & /*parsedTabs*/ 256 && button_aria_selected_value !== (button_aria_selected_value = /*tab*/ ctx[16].isActive ? 'true' : 'false')) {
+				attr(button, "aria-selected", button_aria_selected_value);
+			}
+
+			if (dirty & /*parsedTabs*/ 256) {
+				toggle_class(button, "mc-tabs__element--disabled", /*tab*/ ctx[16].disabled);
+			}
+
+			if (dirty & /*stateless, parsedTabs, selectedtab*/ 304) {
+				toggle_class(button, "mc-tabs__element--selected", /*stateless*/ ctx[4]
+				? /*tab*/ ctx[16].id == /*selectedtab*/ ctx[5]
+				: /*tab*/ ctx[16].isActive);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(button);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+// (48:8) {#if tab.href}
+function create_if_block(ctx) {
+	let if_block_anchor;
+
+	function select_block_type_1(ctx, dirty) {
+		if (!/*tab*/ ctx[16].disabled) return create_if_block_1;
+		return create_else_block;
+	}
+
+	let current_block_type = select_block_type_1(ctx);
+	let if_block = current_block_type(ctx);
+
+	return {
+		c() {
+			if_block.c();
+			if_block_anchor = empty();
+		},
+		m(target, anchor) {
+			if_block.m(target, anchor);
+			insert(target, if_block_anchor, anchor);
+		},
+		p(ctx, dirty) {
+			if (current_block_type === (current_block_type = select_block_type_1(ctx)) && if_block) {
+				if_block.p(ctx, dirty);
+			} else {
+				if_block.d(1);
+				if_block = current_block_type(ctx);
+
+				if (if_block) {
+					if_block.c();
+					if_block.m(if_block_anchor.parentNode, if_block_anchor);
+				}
+			}
+		},
+		d(detaching) {
+			if_block.d(detaching);
+			if (detaching) detach(if_block_anchor);
+		}
+	};
+}
+
+// (67:10) {:else}
+function create_else_block(ctx) {
+	let span1;
+	let span0;
+	let t_value = /*tab*/ ctx[16].text + "";
+	let t;
+	let span1_id_value;
+	let span1_aria_selected_value;
+
+	return {
+		c() {
+			span1 = element("span");
+			span0 = element("span");
+			t = text(t_value);
+			attr(span0, "class", "mc-tabs__text");
+			attr(span1, "role", "tab");
+			attr(span1, "class", "mc-tabs__element");
+			attr(span1, "id", span1_id_value = /*tab*/ ctx[16].id);
+			attr(span1, "aria-selected", span1_aria_selected_value = /*tab*/ ctx[16].isActive ? 'true' : 'false');
+			toggle_class(span1, "mc-tabs__element--disabled", /*tab*/ ctx[16].disabled);
+
+			toggle_class(span1, "mc-tabs__element--selected", /*stateless*/ ctx[4]
+			? /*tab*/ ctx[16].id == /*selectedtab*/ ctx[5]
+			: /*tab*/ ctx[16].isActive);
+		},
+		m(target, anchor) {
+			insert(target, span1, anchor);
+			append(span1, span0);
+			append(span0, t);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*parsedTabs*/ 256 && t_value !== (t_value = /*tab*/ ctx[16].text + "")) set_data(t, t_value);
+
+			if (dirty & /*parsedTabs*/ 256 && span1_id_value !== (span1_id_value = /*tab*/ ctx[16].id)) {
+				attr(span1, "id", span1_id_value);
+			}
+
+			if (dirty & /*parsedTabs*/ 256 && span1_aria_selected_value !== (span1_aria_selected_value = /*tab*/ ctx[16].isActive ? 'true' : 'false')) {
+				attr(span1, "aria-selected", span1_aria_selected_value);
+			}
+
+			if (dirty & /*parsedTabs*/ 256) {
+				toggle_class(span1, "mc-tabs__element--disabled", /*tab*/ ctx[16].disabled);
+			}
+
+			if (dirty & /*stateless, parsedTabs, selectedtab*/ 304) {
+				toggle_class(span1, "mc-tabs__element--selected", /*stateless*/ ctx[4]
+				? /*tab*/ ctx[16].id == /*selectedtab*/ ctx[5]
+				: /*tab*/ ctx[16].isActive);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(span1);
+		}
+	};
+}
+
+// (49:10) {#if !tab.disabled}
+function create_if_block_1(ctx) {
+	let a;
+	let span;
+	let t_value = /*tab*/ ctx[16].text + "";
+	let t;
+	let a_href_value;
+	let a_id_value;
+	let a_aria_selected_value;
+	let mounted;
+	let dispose;
+
+	function click_handler(...args) {
+		return /*click_handler*/ ctx[11](/*index*/ ctx[18], /*tab*/ ctx[16], ...args);
+	}
+
+	return {
+		c() {
+			a = element("a");
+			span = element("span");
+			t = text(t_value);
+			attr(span, "class", "mc-tabs__text");
+			attr(a, "href", a_href_value = /*tab*/ ctx[16].href);
+			attr(a, "role", "tab");
+			attr(a, "class", "mc-tabs__element");
+			attr(a, "id", a_id_value = /*tab*/ ctx[16].id);
+			attr(a, "aria-selected", a_aria_selected_value = /*tab*/ ctx[16].isActive ? 'true' : 'false');
+			toggle_class(a, "mc-tabs__element--disabled", /*tab*/ ctx[16].disabled);
+
+			toggle_class(a, "mc-tabs__element--selected", /*stateless*/ ctx[4]
+			? /*tab*/ ctx[16].id == /*selectedtab*/ ctx[5]
+			: /*tab*/ ctx[16].isActive);
+		},
+		m(target, anchor) {
+			insert(target, a, anchor);
+			append(a, span);
+			append(span, t);
+
+			if (!mounted) {
+				dispose = listen(a, "click", click_handler);
+				mounted = true;
+			}
+		},
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+			if (dirty & /*parsedTabs*/ 256 && t_value !== (t_value = /*tab*/ ctx[16].text + "")) set_data(t, t_value);
+
+			if (dirty & /*parsedTabs*/ 256 && a_href_value !== (a_href_value = /*tab*/ ctx[16].href)) {
+				attr(a, "href", a_href_value);
+			}
+
+			if (dirty & /*parsedTabs*/ 256 && a_id_value !== (a_id_value = /*tab*/ ctx[16].id)) {
+				attr(a, "id", a_id_value);
+			}
+
+			if (dirty & /*parsedTabs*/ 256 && a_aria_selected_value !== (a_aria_selected_value = /*tab*/ ctx[16].isActive ? 'true' : 'false')) {
+				attr(a, "aria-selected", a_aria_selected_value);
+			}
+
+			if (dirty & /*parsedTabs*/ 256) {
+				toggle_class(a, "mc-tabs__element--disabled", /*tab*/ ctx[16].disabled);
+			}
+
+			if (dirty & /*stateless, parsedTabs, selectedtab*/ 304) {
+				toggle_class(a, "mc-tabs__element--selected", /*stateless*/ ctx[4]
+				? /*tab*/ ctx[16].id == /*selectedtab*/ ctx[5]
+				: /*tab*/ ctx[16].isActive);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(a);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+// (46:4) {#each parsedTabs as tab, index}
+function create_each_block(ctx) {
+	let li;
+	let t;
+
+	function select_block_type(ctx, dirty) {
+		if (/*tab*/ ctx[16].href) return create_if_block;
+		return create_else_block_1;
+	}
+
+	let current_block_type = select_block_type(ctx);
+	let if_block = current_block_type(ctx);
+
+	return {
+		c() {
+			li = element("li");
+			if_block.c();
+			t = space();
+			attr(li, "class", "mc-tabs__item");
+			attr(li, "role", "presentation");
+		},
+		m(target, anchor) {
+			insert(target, li, anchor);
+			if_block.m(li, null);
+			append(li, t);
+		},
+		p(ctx, dirty) {
+			if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block) {
+				if_block.p(ctx, dirty);
+			} else {
+				if_block.d(1);
+				if_block = current_block_type(ctx);
+
+				if (if_block) {
+					if_block.c();
+					if_block.m(li, t);
+				}
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(li);
+			if_block.d();
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let div;
+	let ul;
+	let div_class_value;
+	let each_value = /*parsedTabs*/ ctx[8];
+	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-tabs " + (/*align*/ ctx[0] && /*align*/ ctx[0] === 'full'
+			? ' mc-tabs--full'
+			: '') + " " + (/*align*/ ctx[0] && /*align*/ ctx[0] === 'centered'
+			? ' mc-tabs--full-centered'
+			: '') + " " + (/*type*/ ctx[3] ? ` mc-tabs--${/*type*/ ctx[3]}` : '') + (/*nodivider*/ ctx[2] ? ' mc-tabs--no-divider' : '')
+		},
+		/*attributes*/ ctx[6]
+	];
+
+	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");
+			ul = element("ul");
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			this.c = noop;
+			attr(ul, "class", "mc-tabs__nav");
+			attr(ul, "role", "tablist");
+			attr(ul, "aria-label", /*description*/ ctx[1]);
+			set_attributes(div, div_data);
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, ul);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				if (each_blocks[i]) {
+					each_blocks[i].m(ul, null);
+				}
+			}
+
+			/*ul_binding*/ ctx[13](ul);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*parsedTabs, stateless, selectedtab, manageTabs, Object*/ 816) {
+				each_value = /*parsedTabs*/ ctx[8];
+				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(ul, null);
+					}
+				}
+
+				for (; i < each_blocks.length; i += 1) {
+					each_blocks[i].d(1);
+				}
+
+				each_blocks.length = each_value.length;
+			}
+
+			if (dirty & /*description*/ 2) {
+				attr(ul, "aria-label", /*description*/ ctx[1]);
+			}
+
+			set_attributes(div, div_data = get_spread_update(div_levels, [
+				dirty & /*align, type, nodivider*/ 13 && div_class_value !== (div_class_value = "mc-tabs " + (/*align*/ ctx[0] && /*align*/ ctx[0] === 'full'
+				? ' mc-tabs--full'
+				: '') + " " + (/*align*/ ctx[0] && /*align*/ ctx[0] === 'centered'
+				? ' mc-tabs--full-centered'
+				: '') + " " + (/*type*/ ctx[3] ? ` mc-tabs--${/*type*/ ctx[3]}` : '') + (/*nodivider*/ ctx[2] ? ' mc-tabs--no-divider' : '')) && { class: div_class_value },
+				dirty & /*attributes*/ 64 && /*attributes*/ ctx[6]
+			]));
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div);
+			destroy_each(each_blocks, detaching);
+			/*ul_binding*/ ctx[13](null);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let parsedTabs;
+	let attributes;
+	const omit_props_names = ["align","description","nodivider","tabs","type","stateless","selectedtab"];
+	let $$restProps = compute_rest_props($$props, omit_props_names);
+	let { align = 'auto' } = $$props;
+	let { description = 'Tabs' } = $$props;
+	let { nodivider = false } = $$props;
+	let { tabs } = $$props;
+	let { type = 'tabs' } = $$props;
+	let { stateless = false } = $$props;
+	let { selectedtab } = $$props;
+	let eventHandler = new EventHandler();
+	let tablist;
+
+	function manageTabs(e, tabItem) {
+		const currentEl = e.target;
+
+		if (stateless) {
+			eventHandler.dispatch('tab-clicked', Object.assign(tabItem, { target: currentEl }));
+		} else {
+			tablist.querySelectorAll('.mc-tabs__element').forEach(el => {
+				el.classList.remove('mc-tabs__element--selected');
+				el.setAttribute('aria-selected', 'false');
+			});
+
+			currentEl.classList.add('mc-tabs__element--selected');
+			currentEl.setAttribute('aria-selected', 'true');
+			eventHandler.dispatch('tab-clicked', Object.assign(tabItem, { target: currentEl }));
+		}
+	}
+
+	const click_handler = (index, tab, event) => manageTabs(event, Object.assign({ index }, tab));
+	const click_handler_1 = (index, tab, event) => manageTabs(event, Object.assign({ index }, tab));
+
+	function ul_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			tablist = $$value;
+			$$invalidate(7, tablist);
+		});
+	}
+
+	$$self.$$set = $$new_props => {
+		$$props = assign(assign({}, $$props), exclude_internal_props($$new_props));
+		$$invalidate(15, $$restProps = compute_rest_props($$props, omit_props_names));
+		if ('align' in $$new_props) $$invalidate(0, align = $$new_props.align);
+		if ('description' in $$new_props) $$invalidate(1, description = $$new_props.description);
+		if ('nodivider' in $$new_props) $$invalidate(2, nodivider = $$new_props.nodivider);
+		if ('tabs' in $$new_props) $$invalidate(10, tabs = $$new_props.tabs);
+		if ('type' in $$new_props) $$invalidate(3, type = $$new_props.type);
+		if ('stateless' in $$new_props) $$invalidate(4, stateless = $$new_props.stateless);
+		if ('selectedtab' in $$new_props) $$invalidate(5, selectedtab = $$new_props.selectedtab);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*tabs*/ 1024) {
+			$$invalidate(8, parsedTabs = tabs ? JSON.parse(tabs) : []);
+		}
+
+		$$invalidate(6, attributes = Object.assign({}, $$restProps));
+
+		if ($$self.$$.dirty & /*attributes*/ 64) {
+			delete attributes.class;
+		}
+	};
+
+	return [
+		align,
+		description,
+		nodivider,
+		type,
+		stateless,
+		selectedtab,
+		attributes,
+		tablist,
+		parsedTabs,
+		manageTabs,
+		tabs,
+		click_handler,
+		click_handler_1,
+		ul_binding
+	];
+}
+
+class Tabs extends SvelteElement {
+	constructor(options) {
+		super();
+		const style = document.createElement('style');
+		style.textContent = `.mc-tabs{font-family:"LeroyMerlin", sans-serif;font-weight:400;background-color:#ffffff;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;width:100%}.mc-tabs::after{background:#b3b3b3;content:"";display:block;margin:0 auto;height:1px;width:100%;bottom:0;left:0;position:absolute}.mc-tabs--no-shadow::after,.mc-tabs--no-divider::after{display:none}.mc-tabs__nav{list-style:none;margin-left:0;padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:0;margin-bottom:0}.mc-tabs__nav,.mc-tabs__select{position:relative}.mc-tabs__link,.mc-tabs__element{font-size:0.875rem;line-height:1.2857142857;font-weight:600;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:none;border:none;color:#666666;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;height:3.5rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;outline:none;padding-left:0.75rem;padding-right:0.75rem;position:relative;text-decoration:none}.mc-tabs__link::before,.mc-tabs__element::before{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;bottom:-0.125rem;top:-0.125rem}.mc-tabs__link::after,.mc-tabs__element::after{background-color:transparent;bottom:0;content:"";height:0.25rem;left:1.5rem;position:absolute;right:1.5rem}.mc-tabs__link:hover .mc-tabs__text,.mc-tabs__element:hover .mc-tabs__text{background-color:#eeeff1}.mc-tabs__link:active,.mc-tabs__element:active{color:#333333}.mc-tabs__link:active .mc-tabs__text,.mc-tabs__element:active .mc-tabs__text{background-color:#cfd2d8}.mc-tabs__link:focus::before,.mc-tabs__element:focus::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-tabs__link--selected,.mc-tabs__element--selected{color:#000000}.mc-tabs__link--selected::after,.mc-tabs__element--selected::after{background-color:#000000}.mc-tabs__link--disabled,.mc-tabs__element--disabled{cursor:not-allowed;background-color:#cccccc;pointer-events:none}.mc-tabs__link--disabled,.mc-tabs__link--disabled:hover,.mc-tabs__link--disabled:focus,.mc-tabs__link--disabled:active,.mc-tabs__element--disabled,.mc-tabs__element--disabled:hover,.mc-tabs__element--disabled:focus,.mc-tabs__element--disabled:active{-webkit-box-shadow:none;box-shadow:none}.mc-tabs__text{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:0.25rem;display:-webkit-box;display:-ms-flexbox;display:flex;gap:0.25rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;padding:0.4375rem 0.75rem;pointer-events:none}.mc-tabs__icon{fill:currentColor;height:1.5rem;width:1.5rem}.mc-tabs--full-centered{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-tabs--dropdown{padding:1rem;width:auto}@media screen and (min-width: 680px){.mc-tabs{width:auto}.mc-tabs--full,.mc-tabs--full-centered{width:100%}}@media screen and (max-width: 679px){.mc-tabs:not(.mc-tabs--dropdown)::before{bottom:0.125rem}.mc-tabs__nav{overflow:auto hidden;white-space:nowrap}}`;
+		this.shadowRoot.appendChild(style);
+
+		init(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object(this.attributes),
+				customElement: true
+			},
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{
+				align: 0,
+				description: 1,
+				nodivider: 2,
+				tabs: 10,
+				type: 3,
+				stateless: 4,
+				selectedtab: 5
+			},
+			null
+		);
+
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+
+			if (options.props) {
+				this.$set(options.props);
+				flush();
+			}
+		}
+	}
+
+	static get observedAttributes() {
+		return [
+			"align",
+			"description",
+			"nodivider",
+			"tabs",
+			"type",
+			"stateless",
+			"selectedtab"
+		];
+	}
+
+	get align() {
+		return this.$$.ctx[0];
+	}
+
+	set align(align) {
+		this.$$set({ align });
+		flush();
+	}
+
+	get description() {
+		return this.$$.ctx[1];
+	}
+
+	set description(description) {
+		this.$$set({ description });
+		flush();
+	}
+
+	get nodivider() {
+		return this.$$.ctx[2];
+	}
+
+	set nodivider(nodivider) {
+		this.$$set({ nodivider });
+		flush();
+	}
+
+	get tabs() {
+		return this.$$.ctx[10];
+	}
+
+	set tabs(tabs) {
+		this.$$set({ tabs });
+		flush();
+	}
+
+	get type() {
+		return this.$$.ctx[3];
+	}
+
+	set type(type) {
+		this.$$set({ type });
+		flush();
+	}
+
+	get stateless() {
+		return this.$$.ctx[4];
+	}
+
+	set stateless(stateless) {
+		this.$$set({ stateless });
+		flush();
+	}
+
+	get selectedtab() {
+		return this.$$.ctx[5];
+	}
+
+	set selectedtab(selectedtab) {
+		this.$$set({ selectedtab });
+		flush();
+	}
+}
+
+export { Tabs as default };
 //# sourceMappingURL=Tabs.js.map

package/public/components/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../src/components/tabs/Tabs.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import type { TabsAlign, TabsItems, TabsType } from './tabs.types';\n  import { EventHandler } from '../../utilities/EventHandler';\n\n  export let align: TabsAlign = 'auto';\n  export let description = 'Tabs';\n  export let nodivider = false;\n  export let tabs: string;\n  export let type: TabsType = 'tabs';\n  export let stateless = false;\n  export let selectedtab: string | undefined;\n  let eventHandler = new EventHandler();\n  let tablist: HTMLElement;\n  $: parsedTabs = tabs ? (JSON.parse(tabs) as TabsItems[]) : [];\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n  function manageTabs(e: Event, tabItem: TabsItems): void {\n    const currentEl = e.target as HTMLElement;\n    if (stateless) {\n      eventHandler.dispatch(\n        'tab-clicked',\n        Object.assign(tabItem, { target: currentEl }),\n      );\n    } else {\n      tablist.querySelectorAll('.mc-tabs__element').forEach((el): void => {\n        el.classList.remove('mc-tabs__element--selected');\n        el.setAttribute('aria-selected', 'false');\n      });\n\n      currentEl.classList.add('mc-tabs__element--selected');\n      currentEl.setAttribute('aria-selected', 'true');\n\n      eventHandler.dispatch(\n        'tab-clicked',\n        Object.assign(tabItem, { target: currentEl }),\n      );\n    }\n  }\n</script>\n\n<div\n  class=\"mc-tabs\n  {align && align === 'full' ? ' mc-tabs--full' : ''}\n  {align && align === 'centered' ? ' mc-tabs--full-centered' : ''}\n  {type ? ` mc-tabs--${type}` : ''}{nodivider ? ' mc-tabs--no-divider' : ''}\"\n  {...attributes}\n>\n  <ul\n    class=\"mc-tabs__nav\"\n    bind:this={tablist}\n    role=\"tablist\"\n    aria-label={description}\n  >\n    {#each parsedTabs as tab, index}\n      <li class=\"mc-tabs__item\" role=\"presentation\">\n        {#if tab.href}\n          {#if !tab.disabled}\n            <a\n              href={tab.href}\n              role=\"tab\"\n              class=\"mc-tabs__element\"\n              class:mc-tabs__element--disabled={tab.disabled}\n              class:mc-tabs__element--selected={stateless\n                ? tab.id == selectedtab\n                : tab.isActive}\n              id={tab.id}\n              aria-selected={tab.isActive ? 'true' : 'false'}\n              on:click={(event) =>\n                manageTabs(event, Object.assign({ index: index }, tab))}\n            >\n              <span class=\"mc-tabs__text\">\n                {tab.text}\n              </span>\n            </a>\n          {:else}\n            <span\n              role=\"tab\"\n              class=\"mc-tabs__element\"\n              class:mc-tabs__element--disabled={tab.disabled}\n              class:mc-tabs__element--selected={stateless\n                ? tab.id == selectedtab\n                : tab.isActive}\n              id={tab.id}\n              aria-selected={tab.isActive ? 'true' : 'false'}\n            >\n              <span class=\"mc-tabs__text\">\n                {tab.text}\n              </span>\n            </span>\n          {/if}\n        {:else}\n          <button\n            role=\"tab\"\n            type=\"button\"\n            class=\"mc-tabs__element\"\n            class:mc-tabs__element--disabled={tab.disabled}\n            class:mc-tabs__element--selected={stateless\n              ? tab.id == selectedtab\n              : tab.isActive}\n            id={tab.id}\n            disabled={tab.disabled}\n            aria-selected={tab.isActive ? 'true' : 'false'}\n            on:click={(event) =>\n              manageTabs(event, Object.assign({ index: index }, tab))}\n          >\n            <span class=\"mc-tabs__text\">\n              {tab.text}\n            </span>\n          </button>\n        {/if}\n      </li>\n    {/each}\n  </ul>\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/all-settings';\n  @import '@mozaic-ds/styles/components/c.tabs';\n</style>\n"],"names":["t_value","ctx","text","attr","button","button_id_value","id","disabled","button_disabled_value","button_aria_selected_value","isActive","toggle_class","insert","target","anchor","append","span","dirty","set_data","t","create_if_block_1","span1","span1_id_value","span1_aria_selected_value","span0","a","a_href_value","href","a_id_value","a_aria_selected_value","create_if_block","li","length","i","div","ul","class","div_class_value","tablist","align","$$props","description","nodivider","tabs","type","stateless","selectedtab","eventHandler","EventHandler","manageTabs","e","tabItem","currentEl","querySelectorAll","forEach","el","classList","remove","setAttribute","add","dispatch","Object","assign","$$invalidate","parsedTabs","JSON","parse","attributes","$$restProps","event","index","tab","$$value"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/tabs/Tabs.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import type { TabsAlign, TabsItems, TabsType } from './tabs.types';\n  import { EventHandler } from '../../utilities/EventHandler';\n\n  export let align: TabsAlign = 'auto';\n  export let description = 'Tabs';\n  export let nodivider = false;\n  export let tabs: string;\n  export let type: TabsType = 'tabs';\n  export let stateless = false;\n  export let selectedtab: string | undefined;\n  let eventHandler = new EventHandler();\n  let tablist: HTMLElement;\n  $: parsedTabs = tabs ? (JSON.parse(tabs) as TabsItems[]) : [];\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n  function manageTabs(e: Event, tabItem: TabsItems): void {\n    const currentEl = e.target as HTMLElement;\n    if (stateless) {\n      eventHandler.dispatch(\n        'tab-clicked',\n        Object.assign(tabItem, { target: currentEl }),\n      );\n    } else {\n      tablist.querySelectorAll('.mc-tabs__element').forEach((el): void => {\n        el.classList.remove('mc-tabs__element--selected');\n        el.setAttribute('aria-selected', 'false');\n      });\n\n      currentEl.classList.add('mc-tabs__element--selected');\n      currentEl.setAttribute('aria-selected', 'true');\n\n      eventHandler.dispatch(\n        'tab-clicked',\n        Object.assign(tabItem, { target: currentEl }),\n      );\n    }\n  }\n</script>\n\n<div\n  class=\"mc-tabs\n  {align && align === 'full' ? ' mc-tabs--full' : ''}\n  {align && align === 'centered' ? ' mc-tabs--full-centered' : ''}\n  {type ? ` mc-tabs--${type}` : ''}{nodivider ? ' mc-tabs--no-divider' : ''}\"\n  {...attributes}\n>\n  <ul\n    class=\"mc-tabs__nav\"\n    bind:this={tablist}\n    role=\"tablist\"\n    aria-label={description}\n  >\n    {#each parsedTabs as tab, index}\n      <li class=\"mc-tabs__item\" role=\"presentation\">\n        {#if tab.href}\n          {#if !tab.disabled}\n            <a\n              href={tab.href}\n              role=\"tab\"\n              class=\"mc-tabs__element\"\n              class:mc-tabs__element--disabled={tab.disabled}\n              class:mc-tabs__element--selected={stateless\n                ? tab.id == selectedtab\n                : tab.isActive}\n              id={tab.id}\n              aria-selected={tab.isActive ? 'true' : 'false'}\n              on:click={(event) =>\n                manageTabs(event, Object.assign({ index: index }, tab))}\n            >\n              <span class=\"mc-tabs__text\">\n                {tab.text}\n              </span>\n            </a>\n          {:else}\n            <span\n              role=\"tab\"\n              class=\"mc-tabs__element\"\n              class:mc-tabs__element--disabled={tab.disabled}\n              class:mc-tabs__element--selected={stateless\n                ? tab.id == selectedtab\n                : tab.isActive}\n              id={tab.id}\n              aria-selected={tab.isActive ? 'true' : 'false'}\n            >\n              <span class=\"mc-tabs__text\">\n                {tab.text}\n              </span>\n            </span>\n          {/if}\n        {:else}\n          <button\n            role=\"tab\"\n            type=\"button\"\n            class=\"mc-tabs__element\"\n            class:mc-tabs__element--disabled={tab.disabled}\n            class:mc-tabs__element--selected={stateless\n              ? tab.id == selectedtab\n              : tab.isActive}\n            id={tab.id}\n            disabled={tab.disabled}\n            aria-selected={tab.isActive ? 'true' : 'false'}\n            on:click={(event) =>\n              manageTabs(event, Object.assign({ index: index }, tab))}\n          >\n            <span class=\"mc-tabs__text\">\n              {tab.text}\n            </span>\n          </button>\n        {/if}\n      </li>\n    {/each}\n  </ul>\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/all-settings';\n  @import '@mozaic-ds/styles/components/c.tabs';\n</style>\n"],"names":[],"mappings":"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"}