@mozaic-ds/web-components 0.11.0 → 0.12.0-beta.0

package/public/components/sidebar/Sidebar.js

@@ -1,2 +1,785 @@
-import{S as e,i as t,a as s,b as i,f as a,s as r,c as n,e as o,d as l,x as d,n as c,g as m,h as b,j as u,A as g,l as p,C as f,D as h,E as _,m as $,o as x,G as w,p as y,ab as v,ac as E,q as L,M as k,J as j,ad as T,T as I}from"../../index-c33b3772.js";import S from"./sidebar-segment.nested.js";import U from"./sidebar-section.nested.js";import z from"./sidebar-user.nested.js";import R from"./sidebar-separator.nested.js";import{E as A}from"../../EventHandler-02058705.js";import{i as O,s as B,t as C,u as M,a as F,b as H}from"../../sidebar-service-275bf9ef.js";import"./sidebar-feature-group.nested.js";import"./sidebar-feature.nested.js";import"./sidebar-sub-features.nested.js";const{Boolean:J}=T;function q(e,t,s){const i=e.slice();return i[18]=t[s],i}function D(e,t,s){const i=e.slice();return i[21]=t[s],i}function G(e){let t,s;return{c(){t=I("svg"),s=I("path"),m(s,"d","M5.707 4.293a1 1 0 00-1.414 1.414L10.586 12l-6.293 6.293a1 1 0 101.414 1.414l7-7a1 1 0 000-1.414l-7-7zm9 0a1 1 0 10-1.414 1.414L19.586 12l-6.293 6.293a1 1 0 001.414 1.414l7-7a1 1 0 000-1.414l-7-7z"),m(t,"class","mc-sidebar__trigger-icon"),m(t,"width","24px"),m(t,"height","24px"),m(t,"viewBox","0 0 24 24")},m(e,a){i(e,t,a),u(t,s)},d(e){e&&x(t)}}}function N(e){let t,s;return{c(){t=I("svg"),s=I("path"),m(s,"d","M10.707 5.707a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L4.414 12l6.293-6.293zm9 0a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L13.414 12l6.293-6.293z"),m(t,"class","mc-sidebar__trigger-icon"),m(t,"width","24px"),m(t,"height","24px"),m(t,"viewBox","0 0 24 24")},m(e,a){i(e,t,a),u(t,s)},d(e){e&&x(t)}}}function K(e){let t,s,a=e[4]?.UTILITIES,r=[];for(let t=0;t<a.length;t+=1)r[t]=Q(q(e,a,t));const n=e=>h(r[e],1,1,(()=>{r[e]=null}));return{c(){t=o("div");for(let e=0;e<r.length;e+=1)r[e].c();m(t,"class","mc-sidebar__utilities")},m(e,a){i(e,t,a);for(let e=0;e<r.length;e+=1)r[e]&&r[e].m(t,null);s=!0},p(e,s){if(16&s){let i;for(a=e[4]?.UTILITIES,i=0;i<a.length;i+=1){const n=q(e,a,i);r[i]?(r[i].p(n,s),f(r[i],1)):(r[i]=Q(n),r[i].c(),f(r[i],1),r[i].m(t,null))}for(k(),i=a.length;i<r.length;i+=1)n(i);_()}},i(e){if(!s){for(let e=0;e<a.length;e+=1)f(r[e]);s=!0}},o(e){r=r.filter(J);for(let e=0;e<r.length;e+=1)h(r[e]);s=!1},d(e){e&&x(t),j(r,e)}}}function P(e){let t,s,a;return s=new S({props:{data:e[21]}}),{c(){t=o("li"),d(s.$$.fragment),m(t,"class","mc-sidebar__utilities__item")},m(e,r){i(e,t,r),g(s,t,null),a=!0},p(e,t){const i={};16&t&&(i.data=e[21]),s.$set(i)},i(e){a||(f(s.$$.fragment,e),a=!0)},o(e){h(s.$$.fragment,e),a=!1},d(e){e&&x(t),w(s)}}}function Q(e){let t,s,a,r,n;t=new R({});let c=e[18],m=[];for(let t=0;t<c.length;t+=1)m[t]=P(D(e,c,t));const b=e=>h(m[e],1,1,(()=>{m[e]=null}));return{c(){d(t.$$.fragment),s=l(),a=o("ul");for(let e=0;e<m.length;e+=1)m[e].c();r=l()},m(e,o){g(t,e,o),i(e,s,o),i(e,a,o);for(let e=0;e<m.length;e+=1)m[e]&&m[e].m(a,null);u(a,r),n=!0},p(e,t){if(16&t){let s;for(c=e[18],s=0;s<c.length;s+=1){const i=D(e,c,s);m[s]?(m[s].p(i,t),f(m[s],1)):(m[s]=P(i),m[s].c(),f(m[s],1),m[s].m(a,r))}for(k(),s=c.length;s<m.length;s+=1)b(s);_()}},i(e){if(!n){f(t.$$.fragment,e);for(let e=0;e<c.length;e+=1)f(m[e]);n=!0}},o(e){h(t.$$.fragment,e),m=m.filter(J);for(let e=0;e<m.length;e+=1)h(m[e]);n=!1},d(e){w(t,e),e&&x(s),e&&x(a),j(m,e)}}}function V(e){let t,s;return t=new z({props:{user:e[2],data:e[4]?.USER_FEATURES,a11yLabels:e[0]}}),{c(){d(t.$$.fragment)},m(e,i){g(t,e,i),s=!0},p(e,s){const i={};4&s&&(i.user=e[2]),16&s&&(i.data=e[4]?.USER_FEATURES),1&s&&(i.a11yLabels=e[0]),t.$set(i)},i(e){s||(f(t.$$.fragment,e),s=!0)},o(e){h(t.$$.fragment,e),s=!1},d(e){w(t,e)}}}function W(e){let t,s,a,r,y,v,E,L,j,T,I,z,A,O,B,C,M,F;function H(e,t){return e[3]?N:G}let J=H(e),q=J(e);E=new S({props:{data:e[4]?.HOME}}),j=new R({}),I=new U({props:{data:e[4]?.FEATURES,a11yLabels:e[0]}});let D=e[4]?.UTILITIES&&K(e),P=e[2]&&V(e),Q=[{class:B="mc-sidebar "+(e[3]?"is-open":"is-close")},{"aria-expanded":e[3]},{"aria-labelledby":"mc-sidebar__trigger"},e[1]],W={};for(let e=0;e<Q.length;e+=1)W=n(W,Q[e]);return{c(){t=o("nav"),s=o("div"),a=o("button"),r=o("span"),q.c(),v=l(),d(E.$$.fragment),L=l(),d(j.$$.fragment),T=l(),d(I.$$.fragment),z=l(),D&&D.c(),O=l(),P&&P.c(),this.c=c,m(r,"class","mc-sidebar__trigger__container"),m(a,"id","mc-sidebar__trigger"),m(a,"class","mc-sidebar__trigger"),m(a,"aria-label",y=e[3]?e[0]?.close||"Close the sidebar":e[0]?.open||"Open the sidebar"),m(s,"class",A="mc-sidebar__container "+(e[2]?"has-bottom-panel":"")),b(t,W)},m(n,o){i(n,t,o),u(t,s),u(s,a),u(a,r),q.m(r,null),u(s,v),g(E,s,null),u(s,L),g(j,s,null),u(s,T),g(I,s,null),u(s,z),D&&D.m(s,null),u(t,O),P&&P.m(t,null),C=!0,M||(F=p(a,"click",e[9]),M=!0)},p(e,[i]){J!==(J=H(e))&&(q.d(1),q=J(e),q&&(q.c(),q.m(r,null))),(!C||9&i&&y!==(y=e[3]?e[0]?.close||"Close the sidebar":e[0]?.open||"Open the sidebar"))&&m(a,"aria-label",y);const n={};16&i&&(n.data=e[4]?.HOME),E.$set(n);const o={};16&i&&(o.data=e[4]?.FEATURES),1&i&&(o.a11yLabels=e[0]),I.$set(o),e[4]?.UTILITIES?D?(D.p(e,i),16&i&&f(D,1)):(D=K(e),D.c(),f(D,1),D.m(s,null)):D&&(k(),h(D,1,1,(()=>{D=null})),_()),(!C||4&i&&A!==(A="mc-sidebar__container "+(e[2]?"has-bottom-panel":"")))&&m(s,"class",A),e[2]?P?(P.p(e,i),4&i&&f(P,1)):(P=V(e),P.c(),f(P,1),P.m(t,null)):P&&(k(),h(P,1,1,(()=>{P=null})),_()),b(t,W=$(Q,[(!C||8&i&&B!==(B="mc-sidebar "+(e[3]?"is-open":"is-close")))&&{class:B},(!C||8&i)&&{"aria-expanded":e[3]},{"aria-labelledby":"mc-sidebar__trigger"},2&i&&e[1]]))},i(e){C||(f(E.$$.fragment,e),f(j.$$.fragment,e),f(I.$$.fragment,e),f(D),f(P),C=!0)},o(e){h(E.$$.fragment,e),h(j.$$.fragment,e),h(I.$$.fragment,e),h(D),h(P),C=!1},d(e){e&&x(t),q.d(),w(E),w(j),w(I),D&&D.d(),P&&P.d(),M=!1,F()}}}function X(e,t,s){let i;const a=["data","open","code","user","a11yLabels"];let r,o,l=y(t,a);v(e,O,(e=>s(3,r=e))),v(e,H,(e=>s(4,o=e)));let d,c,m,{data:b}=t,{open:u}=t,{code:g}=t,{user:p}=t,{a11yLabels:f}=t,h=new A,_=!1;const $=[];$.push(O.subscribe((e=>{h.dispatch("on-toggle",e)}))),$.push(B.subscribe((e=>{var t,s,i,a,r;e&&(C(!1),h.dispatch("on-select",null!==(a=null!==(s=null===(t=e.lv2)||void 0===t?void 0:t.code)&&void 0!==s?s:null===(i=e.lv1)||void 0===i?void 0:i.code)&&void 0!==a?a:null===(r=e.lv0)||void 0===r?void 0:r.code))}))),E((()=>{for(const e of $)e()}));return e.$$set=e=>{t=n(n({},t),L(e)),s(17,l=y(t,a)),"data"in e&&s(5,b=e.data),"open"in e&&s(6,u=e.open),"code"in e&&s(7,g=e.code),"user"in e&&s(8,p=e.user),"a11yLabels"in e&&s(0,f=e.a11yLabels)},e.$$.update=()=>{var t,a,r;160&e.$$.dirty&&(t=g,typeof m==typeof(a=b)&&m===a||(m=a,M(a)),typeof c==typeof t&&c===t||(c=t,F(t))),64&e.$$.dirty&&(typeof _==typeof(r=u)&&_===r||(_=Boolean(r),C(Boolean(r)))),256&e.$$.dirty&&s(2,d="string"==typeof p?JSON.parse(p):p),s(1,i=Object.assign({},l)),2&e.$$.dirty&&delete i.class},[f,i,d,r,o,b,u,g,p,()=>C()]}class Y extends e{constructor(e){super();const n=document.createElement("style");n.textContent=".mc-sidebar{position:absolute;top:0;left:0;z-index:100;font-size:14px;color:white;-webkit-box-sizing:border-box;box-sizing:border-box;fill:#191919;width:320px;background:#eeeff1;display:block;height:100vh}.mc-sidebar__container{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mc-sidebar__container.has-bottom-panel{height:calc(100% - 88px)}.mc-sidebar__utilities{margin-bottom:24px}.mc-sidebar__utilities__item{margin:4px 0px}.mc-sidebar__utilities__item:first-child{margin-top:0}.mc-sidebar__utilities__item:last-child{margin-bottom:0}.mc-sidebar__trigger{cursor:pointer;background:none;border:none;padding:0;margin:28px 0;min-height:38px;width:100%;font-size:inherit;font-family:inherit}.mc-sidebar__trigger-icon{fill:#191919}.mc-sidebar__trigger__container{height:38px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-sidebar__trigger__container>*{width:24px;height:24px}.mc-sidebar__trigger:hover .mc-sidebar__trigger__container{background:#b3b7c1}.mc-sidebar__trigger:focus-visible{-webkit-box-shadow:none;box-shadow:none;border:none;outline:none}.mc-sidebar__trigger:focus-visible .mc-sidebar__trigger__container{-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar.is-open{-o-transition:width 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out;transition:width 300ms ease-in-out}.mc-sidebar.is-open .mc-sidebar__trigger__container{-o-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;margin-left:266px;width:38px;border-radius:4px}.mc-sidebar.is-close{-o-transition:width 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out;transition:width 300ms ease-in-out;width:64px;padding:0}.mc-sidebar.is-close .mc-sidebar__trigger__container{-o-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;margin-left:0px;width:64px;border-radius:0px}.mc-sidebar ul{list-style-type:none;margin:0;padding:0}",this.shadowRoot.appendChild(n),t(this,{target:this.shadowRoot,props:s(this.attributes),customElement:!0},X,W,r,{data:5,open:6,code:7,user:8,a11yLabels:0},null),e&&(e.target&&i(e.target,this,e.anchor),e.props&&(this.$set(e.props),a()))}static get observedAttributes(){return["data","open","code","user","a11yLabels"]}get data(){return this.$$.ctx[5]}set data(e){this.$$set({data:e}),a()}get open(){return this.$$.ctx[6]}set open(e){this.$$set({open:e}),a()}get code(){return this.$$.ctx[7]}set code(e){this.$$set({code:e}),a()}get user(){return this.$$.ctx[8]}set user(e){this.$$set({user:e}),a()}get a11yLabels(){return this.$$.ctx[0]}set a11yLabels(e){this.$$set({a11yLabels: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, c as assign, e as element, d as space, x as create_component, n as noop, g as attr, h as set_attributes, j as append, A as mount_component, l as listen, C as transition_in, D as transition_out, E as check_outros, m as get_spread_update, o as detach, G as destroy_component, p as compute_rest_props, ab as component_subscribe, ac as onDestroy, q as exclude_internal_props, M as group_outros, J as destroy_each, ad as globals, T as svg_element } from '../../index-c33b3772.js';
+import Sidebar_segment_nested from './sidebar-segment.nested.js';
+import Sidebar_section_nested from './sidebar-section.nested.js';
+import Sidebar_user_nested from './sidebar-user.nested.js';
+import Sidebar_separator_nested from './sidebar-separator.nested.js';
+import { E as EventHandler } from '../../EventHandler-02058705.js';
+import { i as isSidebarOpen, s as selectedFeature, t as toggleSidebar, u as updateSidebarData, a as selectFeature, b as sidebar } from '../../sidebar-service-589b271b.js';
+import './sidebar-feature-group.nested.js';
+import './sidebar-feature.nested.js';
+import './sidebar-sub-features.nested.js';
+
+/* src/components/sidebar/Sidebar.svelte generated by Svelte v3.58.0 */
+
+const { Boolean: Boolean_1 } = globals;
+
+function get_each_context(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[18] = list[i];
+	return child_ctx;
+}
+
+function get_each_context_1(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[21] = list[i];
+	return child_ctx;
+}
+
+// (86:8) {:else}
+function create_else_block(ctx) {
+	let svg;
+	let path;
+
+	return {
+		c() {
+			svg = svg_element("svg");
+			path = svg_element("path");
+			attr(path, "d", "M5.707 4.293a1 1 0 00-1.414 1.414L10.586 12l-6.293 6.293a1 1 0 101.414 1.414l7-7a1 1 0 000-1.414l-7-7zm9 0a1 1 0 10-1.414 1.414L19.586 12l-6.293 6.293a1 1 0 001.414 1.414l7-7a1 1 0 000-1.414l-7-7z");
+			attr(svg, "class", "mc-sidebar__trigger-icon");
+			attr(svg, "width", "24px");
+			attr(svg, "height", "24px");
+			attr(svg, "viewBox", "0 0 24 24");
+		},
+		m(target, anchor) {
+			insert(target, svg, anchor);
+			append(svg, path);
+		},
+		d(detaching) {
+			if (detaching) detach(svg);
+		}
+	};
+}
+
+// (76:8) {#if $isSidebarOpen}
+function create_if_block_2(ctx) {
+	let svg;
+	let path;
+
+	return {
+		c() {
+			svg = svg_element("svg");
+			path = svg_element("path");
+			attr(path, "d", "M10.707 5.707a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L4.414 12l6.293-6.293zm9 0a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L13.414 12l6.293-6.293z");
+			attr(svg, "class", "mc-sidebar__trigger-icon");
+			attr(svg, "width", "24px");
+			attr(svg, "height", "24px");
+			attr(svg, "viewBox", "0 0 24 24");
+		},
+		m(target, anchor) {
+			insert(target, svg, anchor);
+			append(svg, path);
+		},
+		d(detaching) {
+			if (detaching) detach(svg);
+		}
+	};
+}
+
+// (102:4) {#if $sidebar?.UTILITIES}
+function create_if_block_1(ctx) {
+	let div;
+	let current;
+	let each_value = /*$sidebar*/ ctx[4]?.UTILITIES;
+	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));
+	}
+
+	const out = i => transition_out(each_blocks[i], 1, 1, () => {
+		each_blocks[i] = null;
+	});
+
+	return {
+		c() {
+			div = element("div");
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			attr(div, "class", "mc-sidebar__utilities");
+		},
+		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);
+				}
+			}
+
+			current = true;
+		},
+		p(ctx, dirty) {
+			if (dirty & /*$sidebar*/ 16) {
+				each_value = /*$sidebar*/ ctx[4]?.UTILITIES;
+				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);
+						transition_in(each_blocks[i], 1);
+					} else {
+						each_blocks[i] = create_each_block(child_ctx);
+						each_blocks[i].c();
+						transition_in(each_blocks[i], 1);
+						each_blocks[i].m(div, null);
+					}
+				}
+
+				group_outros();
+
+				for (i = each_value.length; i < each_blocks.length; i += 1) {
+					out(i);
+				}
+
+				check_outros();
+			}
+		},
+		i(local) {
+			if (current) return;
+
+			for (let i = 0; i < each_value.length; i += 1) {
+				transition_in(each_blocks[i]);
+			}
+
+			current = true;
+		},
+		o(local) {
+			each_blocks = each_blocks.filter(Boolean_1);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				transition_out(each_blocks[i]);
+			}
+
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+			destroy_each(each_blocks, detaching);
+		}
+	};
+}
+
+// (107:12) {#each section as feature}
+function create_each_block_1(ctx) {
+	let li;
+	let segment;
+	let current;
+	segment = new Sidebar_segment_nested({ props: { data: /*feature*/ ctx[21] } });
+
+	return {
+		c() {
+			li = element("li");
+			create_component(segment.$$.fragment);
+			attr(li, "class", "mc-sidebar__utilities__item");
+		},
+		m(target, anchor) {
+			insert(target, li, anchor);
+			mount_component(segment, li, null);
+			current = true;
+		},
+		p(ctx, dirty) {
+			const segment_changes = {};
+			if (dirty & /*$sidebar*/ 16) segment_changes.data = /*feature*/ ctx[21];
+			segment.$set(segment_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(segment.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(segment.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(li);
+			destroy_component(segment);
+		}
+	};
+}
+
+// (104:8) {#each $sidebar?.UTILITIES as section}
+function create_each_block(ctx) {
+	let navigationseparator;
+	let t0;
+	let ul;
+	let t1;
+	let current;
+	navigationseparator = new Sidebar_separator_nested({});
+	let each_value_1 = /*section*/ ctx[18];
+	let each_blocks = [];
+
+	for (let i = 0; i < each_value_1.length; i += 1) {
+		each_blocks[i] = create_each_block_1(get_each_context_1(ctx, each_value_1, i));
+	}
+
+	const out = i => transition_out(each_blocks[i], 1, 1, () => {
+		each_blocks[i] = null;
+	});
+
+	return {
+		c() {
+			create_component(navigationseparator.$$.fragment);
+			t0 = space();
+			ul = element("ul");
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			t1 = space();
+		},
+		m(target, anchor) {
+			mount_component(navigationseparator, target, anchor);
+			insert(target, t0, anchor);
+			insert(target, ul, anchor);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				if (each_blocks[i]) {
+					each_blocks[i].m(ul, null);
+				}
+			}
+
+			append(ul, t1);
+			current = true;
+		},
+		p(ctx, dirty) {
+			if (dirty & /*$sidebar*/ 16) {
+				each_value_1 = /*section*/ ctx[18];
+				let i;
+
+				for (i = 0; i < each_value_1.length; i += 1) {
+					const child_ctx = get_each_context_1(ctx, each_value_1, i);
+
+					if (each_blocks[i]) {
+						each_blocks[i].p(child_ctx, dirty);
+						transition_in(each_blocks[i], 1);
+					} else {
+						each_blocks[i] = create_each_block_1(child_ctx);
+						each_blocks[i].c();
+						transition_in(each_blocks[i], 1);
+						each_blocks[i].m(ul, t1);
+					}
+				}
+
+				group_outros();
+
+				for (i = each_value_1.length; i < each_blocks.length; i += 1) {
+					out(i);
+				}
+
+				check_outros();
+			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(navigationseparator.$$.fragment, local);
+
+			for (let i = 0; i < each_value_1.length; i += 1) {
+				transition_in(each_blocks[i]);
+			}
+
+			current = true;
+		},
+		o(local) {
+			transition_out(navigationseparator.$$.fragment, local);
+			each_blocks = each_blocks.filter(Boolean_1);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				transition_out(each_blocks[i]);
+			}
+
+			current = false;
+		},
+		d(detaching) {
+			destroy_component(navigationseparator, detaching);
+			if (detaching) detach(t0);
+			if (detaching) detach(ul);
+			destroy_each(each_blocks, detaching);
+		}
+	};
+}
+
+// (117:2) {#if parsedUser}
+function create_if_block(ctx) {
+	let navigationuser;
+	let current;
+
+	navigationuser = new Sidebar_user_nested({
+			props: {
+				user: /*parsedUser*/ ctx[2],
+				data: /*$sidebar*/ ctx[4]?.USER_FEATURES,
+				a11yLabels: /*a11yLabels*/ ctx[0]
+			}
+		});
+
+	return {
+		c() {
+			create_component(navigationuser.$$.fragment);
+		},
+		m(target, anchor) {
+			mount_component(navigationuser, target, anchor);
+			current = true;
+		},
+		p(ctx, dirty) {
+			const navigationuser_changes = {};
+			if (dirty & /*parsedUser*/ 4) navigationuser_changes.user = /*parsedUser*/ ctx[2];
+			if (dirty & /*$sidebar*/ 16) navigationuser_changes.data = /*$sidebar*/ ctx[4]?.USER_FEATURES;
+			if (dirty & /*a11yLabels*/ 1) navigationuser_changes.a11yLabels = /*a11yLabels*/ ctx[0];
+			navigationuser.$set(navigationuser_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(navigationuser.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(navigationuser.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			destroy_component(navigationuser, detaching);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let nav;
+	let div;
+	let button;
+	let span;
+	let button_aria_label_value;
+	let t0;
+	let segment;
+	let t1;
+	let navigationseparator;
+	let t2;
+	let section;
+	let t3;
+	let div_class_value;
+	let t4;
+	let nav_class_value;
+	let current;
+	let mounted;
+	let dispose;
+
+	function select_block_type(ctx, dirty) {
+		if (/*$isSidebarOpen*/ ctx[3]) return create_if_block_2;
+		return create_else_block;
+	}
+
+	let current_block_type = select_block_type(ctx);
+	let if_block0 = current_block_type(ctx);
+
+	segment = new Sidebar_segment_nested({
+			props: { data: /*$sidebar*/ ctx[4]?.HOME }
+		});
+
+	navigationseparator = new Sidebar_separator_nested({});
+
+	section = new Sidebar_section_nested({
+			props: {
+				data: /*$sidebar*/ ctx[4]?.FEATURES,
+				a11yLabels: /*a11yLabels*/ ctx[0]
+			}
+		});
+
+	let if_block1 = /*$sidebar*/ ctx[4]?.UTILITIES && create_if_block_1(ctx);
+	let if_block2 = /*parsedUser*/ ctx[2] && create_if_block(ctx);
+
+	let nav_levels = [
+		{
+			class: nav_class_value = "mc-sidebar " + (/*$isSidebarOpen*/ ctx[3] ? 'is-open' : 'is-close')
+		},
+		{
+			"aria-expanded": /*$isSidebarOpen*/ ctx[3]
+		},
+		{ "aria-labelledby": "mc-sidebar__trigger" },
+		/*attributes*/ ctx[1]
+	];
+
+	let nav_data = {};
+
+	for (let i = 0; i < nav_levels.length; i += 1) {
+		nav_data = assign(nav_data, nav_levels[i]);
+	}
+
+	return {
+		c() {
+			nav = element("nav");
+			div = element("div");
+			button = element("button");
+			span = element("span");
+			if_block0.c();
+			t0 = space();
+			create_component(segment.$$.fragment);
+			t1 = space();
+			create_component(navigationseparator.$$.fragment);
+			t2 = space();
+			create_component(section.$$.fragment);
+			t3 = space();
+			if (if_block1) if_block1.c();
+			t4 = space();
+			if (if_block2) if_block2.c();
+			this.c = noop;
+			attr(span, "class", "mc-sidebar__trigger__container");
+			attr(button, "id", "mc-sidebar__trigger");
+			attr(button, "class", "mc-sidebar__trigger");
+
+			attr(button, "aria-label", button_aria_label_value = /*$isSidebarOpen*/ ctx[3]
+			? /*a11yLabels*/ ctx[0]?.['close'] || 'Close the sidebar'
+			: /*a11yLabels*/ ctx[0]?.['open'] || 'Open the sidebar');
+
+			attr(div, "class", div_class_value = "mc-sidebar__container " + (/*parsedUser*/ ctx[2] ? 'has-bottom-panel' : ''));
+			set_attributes(nav, nav_data);
+		},
+		m(target, anchor) {
+			insert(target, nav, anchor);
+			append(nav, div);
+			append(div, button);
+			append(button, span);
+			if_block0.m(span, null);
+			append(div, t0);
+			mount_component(segment, div, null);
+			append(div, t1);
+			mount_component(navigationseparator, div, null);
+			append(div, t2);
+			mount_component(section, div, null);
+			append(div, t3);
+			if (if_block1) if_block1.m(div, null);
+			append(nav, t4);
+			if (if_block2) if_block2.m(nav, null);
+			current = true;
+
+			if (!mounted) {
+				dispose = listen(button, "click", /*click_handler*/ ctx[9]);
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (current_block_type !== (current_block_type = select_block_type(ctx))) {
+				if_block0.d(1);
+				if_block0 = current_block_type(ctx);
+
+				if (if_block0) {
+					if_block0.c();
+					if_block0.m(span, null);
+				}
+			}
+
+			if (!current || dirty & /*$isSidebarOpen, a11yLabels*/ 9 && button_aria_label_value !== (button_aria_label_value = /*$isSidebarOpen*/ ctx[3]
+			? /*a11yLabels*/ ctx[0]?.['close'] || 'Close the sidebar'
+			: /*a11yLabels*/ ctx[0]?.['open'] || 'Open the sidebar')) {
+				attr(button, "aria-label", button_aria_label_value);
+			}
+
+			const segment_changes = {};
+			if (dirty & /*$sidebar*/ 16) segment_changes.data = /*$sidebar*/ ctx[4]?.HOME;
+			segment.$set(segment_changes);
+			const section_changes = {};
+			if (dirty & /*$sidebar*/ 16) section_changes.data = /*$sidebar*/ ctx[4]?.FEATURES;
+			if (dirty & /*a11yLabels*/ 1) section_changes.a11yLabels = /*a11yLabels*/ ctx[0];
+			section.$set(section_changes);
+
+			if (/*$sidebar*/ ctx[4]?.UTILITIES) {
+				if (if_block1) {
+					if_block1.p(ctx, dirty);
+
+					if (dirty & /*$sidebar*/ 16) {
+						transition_in(if_block1, 1);
+					}
+				} else {
+					if_block1 = create_if_block_1(ctx);
+					if_block1.c();
+					transition_in(if_block1, 1);
+					if_block1.m(div, null);
+				}
+			} else if (if_block1) {
+				group_outros();
+
+				transition_out(if_block1, 1, 1, () => {
+					if_block1 = null;
+				});
+
+				check_outros();
+			}
+
+			if (!current || dirty & /*parsedUser*/ 4 && div_class_value !== (div_class_value = "mc-sidebar__container " + (/*parsedUser*/ ctx[2] ? 'has-bottom-panel' : ''))) {
+				attr(div, "class", div_class_value);
+			}
+
+			if (/*parsedUser*/ ctx[2]) {
+				if (if_block2) {
+					if_block2.p(ctx, dirty);
+
+					if (dirty & /*parsedUser*/ 4) {
+						transition_in(if_block2, 1);
+					}
+				} else {
+					if_block2 = create_if_block(ctx);
+					if_block2.c();
+					transition_in(if_block2, 1);
+					if_block2.m(nav, null);
+				}
+			} else if (if_block2) {
+				group_outros();
+
+				transition_out(if_block2, 1, 1, () => {
+					if_block2 = null;
+				});
+
+				check_outros();
+			}
+
+			set_attributes(nav, nav_data = get_spread_update(nav_levels, [
+				(!current || dirty & /*$isSidebarOpen*/ 8 && nav_class_value !== (nav_class_value = "mc-sidebar " + (/*$isSidebarOpen*/ ctx[3] ? 'is-open' : 'is-close'))) && { class: nav_class_value },
+				(!current || dirty & /*$isSidebarOpen*/ 8) && {
+					"aria-expanded": /*$isSidebarOpen*/ ctx[3]
+				},
+				{ "aria-labelledby": "mc-sidebar__trigger" },
+				dirty & /*attributes*/ 2 && /*attributes*/ ctx[1]
+			]));
+		},
+		i(local) {
+			if (current) return;
+			transition_in(segment.$$.fragment, local);
+			transition_in(navigationseparator.$$.fragment, local);
+			transition_in(section.$$.fragment, local);
+			transition_in(if_block1);
+			transition_in(if_block2);
+			current = true;
+		},
+		o(local) {
+			transition_out(segment.$$.fragment, local);
+			transition_out(navigationseparator.$$.fragment, local);
+			transition_out(section.$$.fragment, local);
+			transition_out(if_block1);
+			transition_out(if_block2);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(nav);
+			if_block0.d();
+			destroy_component(segment);
+			destroy_component(navigationseparator);
+			destroy_component(section);
+			if (if_block1) if_block1.d();
+			if (if_block2) if_block2.d();
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let attributes;
+	const omit_props_names = ["data","open","code","user","a11yLabels"];
+	let $$restProps = compute_rest_props($$props, omit_props_names);
+	let $isSidebarOpen;
+	let $sidebar;
+	component_subscribe($$self, isSidebarOpen, $$value => $$invalidate(3, $isSidebarOpen = $$value));
+	component_subscribe($$self, sidebar, $$value => $$invalidate(4, $sidebar = $$value));
+	let { data } = $$props;
+	let { open } = $$props;
+	let { code } = $$props;
+	let { user } = $$props;
+	let { a11yLabels } = $$props;
+	let eventHandler = new EventHandler();
+	let parsedUser;
+	let previousCode;
+	let previousData;
+	let previousOpen = false;
+
+	function updateData(newCode, newData) {
+		if (typeof previousData !== typeof newData || previousData !== newData) {
+			previousData = newData;
+			updateSidebarData(newData);
+		}
+
+		if (typeof previousCode !== typeof newCode || previousCode !== newCode) {
+			previousCode = newCode;
+			selectFeature(newCode);
+		}
+	}
+
+	function updateOpen(newOpenStatus) {
+		if (typeof previousOpen !== typeof newOpenStatus || previousOpen !== newOpenStatus) {
+			previousOpen = Boolean(newOpenStatus);
+			toggleSidebar(Boolean(newOpenStatus));
+		}
+	}
+
+	const unsubscribes = [];
+
+	unsubscribes.push(isSidebarOpen.subscribe(state => {
+		eventHandler.dispatch('on-toggle', state);
+	}));
+
+	unsubscribes.push(selectedFeature.subscribe(selection => {
+		var _a, _b, _c, _d, _e;
+
+		if (selection) {
+			toggleSidebar(false);
+
+			eventHandler.dispatch('on-select', (_d = (_b = (_a = selection.lv2) === null || _a === void 0
+			? void 0
+			: _a.code) !== null && _b !== void 0
+			? _b
+			: (_c = selection.lv1) === null || _c === void 0
+				? void 0
+				: _c.code) !== null && _d !== void 0
+			? _d
+			: (_e = selection.lv0) === null || _e === void 0
+				? void 0
+				: _e.code);
+		}
+	}));
+
+	onDestroy(() => {
+		for (const unsubscribe of unsubscribes) {
+			unsubscribe();
+		}
+	});
+
+	const click_handler = () => toggleSidebar();
+
+	$$self.$$set = $$new_props => {
+		$$props = assign(assign({}, $$props), exclude_internal_props($$new_props));
+		$$invalidate(17, $$restProps = compute_rest_props($$props, omit_props_names));
+		if ('data' in $$new_props) $$invalidate(5, data = $$new_props.data);
+		if ('open' in $$new_props) $$invalidate(6, open = $$new_props.open);
+		if ('code' in $$new_props) $$invalidate(7, code = $$new_props.code);
+		if ('user' in $$new_props) $$invalidate(8, user = $$new_props.user);
+		if ('a11yLabels' in $$new_props) $$invalidate(0, a11yLabels = $$new_props.a11yLabels);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*code, data*/ 160) {
+			updateData(code, data);
+		}
+
+		if ($$self.$$.dirty & /*open*/ 64) {
+			updateOpen(open);
+		}
+
+		if ($$self.$$.dirty & /*user*/ 256) {
+			$$invalidate(2, parsedUser = typeof user === 'string' ? JSON.parse(user) : user);
+		}
+
+		$$invalidate(1, attributes = Object.assign({}, $$restProps));
+
+		if ($$self.$$.dirty & /*attributes*/ 2) {
+			delete attributes.class;
+		}
+	};
+
+	return [
+		a11yLabels,
+		attributes,
+		parsedUser,
+		$isSidebarOpen,
+		$sidebar,
+		data,
+		open,
+		code,
+		user,
+		click_handler
+	];
+}
+
+class Sidebar extends SvelteElement {
+	constructor(options) {
+		super();
+		const style = document.createElement('style');
+		style.textContent = `.mc-sidebar{position:absolute;top:0;left:0;z-index:100;font-size:14px;color:white;-webkit-box-sizing:border-box;box-sizing:border-box;fill:#191919;width:320px;background:#eeeff1;display:block;height:100vh}.mc-sidebar__container{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mc-sidebar__container.has-bottom-panel{height:calc(100% - 88px)}.mc-sidebar__utilities{margin-bottom:24px}.mc-sidebar__utilities__item{margin:4px 0px}.mc-sidebar__utilities__item:first-child{margin-top:0}.mc-sidebar__utilities__item:last-child{margin-bottom:0}.mc-sidebar__trigger{cursor:pointer;background:none;border:none;padding:0;margin:28px 0;min-height:38px;width:100%;font-size:inherit;font-family:inherit}.mc-sidebar__trigger-icon{fill:#191919}.mc-sidebar__trigger__container{height:38px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-sidebar__trigger__container>*{width:24px;height:24px}.mc-sidebar__trigger:hover .mc-sidebar__trigger__container{background:#b3b7c1}.mc-sidebar__trigger:focus-visible{-webkit-box-shadow:none;box-shadow:none;border:none;outline:none}.mc-sidebar__trigger:focus-visible .mc-sidebar__trigger__container{-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar.is-open{-o-transition:width 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out;transition:width 300ms ease-in-out}.mc-sidebar.is-open .mc-sidebar__trigger__container{-o-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;margin-left:266px;width:38px;border-radius:4px}.mc-sidebar.is-close{-o-transition:width 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out;transition:width 300ms ease-in-out;width:64px;padding:0}.mc-sidebar.is-close .mc-sidebar__trigger__container{-o-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;margin-left:0px;width:64px;border-radius:0px}.mc-sidebar ul{list-style-type:none;margin:0;padding:0}`;
+		this.shadowRoot.appendChild(style);
+
+		init(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object(this.attributes),
+				customElement: true
+			},
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{
+				data: 5,
+				open: 6,
+				code: 7,
+				user: 8,
+				a11yLabels: 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 ["data", "open", "code", "user", "a11yLabels"];
+	}
+
+	get data() {
+		return this.$$.ctx[5];
+	}
+
+	set data(data) {
+		this.$$set({ data });
+		flush();
+	}
+
+	get open() {
+		return this.$$.ctx[6];
+	}
+
+	set open(open) {
+		this.$$set({ open });
+		flush();
+	}
+
+	get code() {
+		return this.$$.ctx[7];
+	}
+
+	set code(code) {
+		this.$$set({ code });
+		flush();
+	}
+
+	get user() {
+		return this.$$.ctx[8];
+	}
+
+	set user(user) {
+		this.$$set({ user });
+		flush();
+	}
+
+	get a11yLabels() {
+		return this.$$.ctx[0];
+	}
+
+	set a11yLabels(a11yLabels) {
+		this.$$set({ a11yLabels });
+		flush();
+	}
+}
+
+export { Sidebar as default };
 //# sourceMappingURL=Sidebar.js.map