@mozaic-ds/web-components 0.14.0-beta.0 → 0.14.0

package/public/components/select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import { get_current_component } from 'svelte/internal';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import { createEventForwarder } from '../../utilities/EventForward';\n\n  import type { SelectOption, SelectSize } from './select.types';\n\n  export let id: string;\n  export let valueselected = '';\n  export let placeholder: string;\n  export let size: SelectSize = 'm';\n  export let isvalid = false;\n  export let isinvalid = false;\n  export let disabled = false;\n  export let options: string;\n  let eventHandler = new EventHandler();\n  const forwardEvents = createEventForwarder(get_current_component());\n  let valueSelected = '';\n\n  $: parsedOptions = options ? (JSON.parse(options) as SelectOption[]) : [];\n  $: valueSelected = valueselected;\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n  function setClasses(\n    isvalid: boolean,\n    isinvalid: boolean,\n    size: SelectSize,\n  ): string {\n    const classes = ['mc-select'];\n\n    if (isvalid && !isinvalid) {\n      classes.push('is-valid');\n    }\n\n    if (isinvalid) {\n      classes.push('is-invalid');\n    }\n    if (size) {\n      classes.push(`mc-select--${size}`);\n    }\n\n    return classes.join(' ');\n  }\n</script>\n\n<!-- svelte-ignore a11y-no-onchange -->\n<select\n  use:forwardEvents\n  {id}\n  class=\"{setClasses(isvalid, isinvalid, size)} {userClass}\"\n  {disabled}\n  bind:value={valueSelected}\n  on:change={() => eventHandler.dispatch('change', valueSelected)}\n  {...attributes}\n>\n  {#if placeholder}\n    <option value=\"\" disabled selected>\n      -- {placeholder} --\n    </option>\n  {/if}\n\n  {#each parsedOptions as opt}\n    <option name={opt.value} disabled={opt.disabled} value={opt.value}>\n      {opt.text}\n    </option>\n  {/each}\n</select>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/_c.select';\n</style>\n"],"names":["ctx","insert","target","option","anchor","t0_value","text","attr","option_name_value","value","disabled","option_disabled_value","__value","option_value_value","dirty","set_data","t0","create_if_block","length","i","class","select_class_value","setClasses","add_render_callback","call","select","isvalid","isinvalid","size","classes","push","join","id","$$props","valueselected","placeholder","options","eventHandler","EventHandler","forwardEvents","createEventForwarder","get_current_component","valueSelected","$$invalidate","parsedOptions","JSON","parse","userClass","attributes","Object","assign","$$restProps","select_value","this","dispatch"],"mappings":"ocA2DsC,WAC5BA,EAAW,QAAC,gFADlBC,EAEQC,EAAAC,EAAAC,yCADFJ,EAAW,kDAMdK,EAAAL,MAAIM,KAAI,yCADGC,EAAAJ,EAAA,OAAAK,EAAAR,MAAIS,OAAiBN,EAAAO,SAAAC,EAAAX,MAAIU,SAAiBP,EAAAS,QAAAC,EAAAb,MAAIS,gCAA5DR,EAEQC,EAAAC,EAAAC,yBADL,IAAAU,GAAAT,KAAAA,EAAAL,MAAIM,KAAI,KAAAS,EAAAC,EAAAX,GADG,IAAAS,GAAAN,KAAAA,EAAAR,MAAIS,sBAAiB,IAAAK,GAAAH,KAAAA,EAAAX,MAAIU,0BAAiB,IAAAI,GAAAD,KAAAA,EAAAb,MAAIS,sFAPzDT,EAAW,IAAAiB,EAAAjB,KAMTA,EAAa,wBAAlBkB,OAAIC,GAAA,qCAZEC,MAAAC,EAAAC,EAAWtB,EAAO,GAAEA,EAAW,GAAAA,UAAQA,EAAS,oBAIpDA,EAAU,mJAFW,IAAbA,EAAa,IAAAuB,GAAA,IAAAvB,EAAA,IAAAwB,KAAAC,aAL3BxB,EAoBQC,EAAAuB,EAAArB,8IAfMJ,EAAa,IAAA,4FAIpBA,EAAW,4EAMTA,EAAa,WAAlBkB,OAAIC,GAAA,EAAA,iHAAJD,iCAZM,IAAAJ,GAAAO,KAAAA,EAAAC,EAAWtB,EAAO,GAAEA,EAAW,GAAAA,UAAQA,EAAS,KAAA,CAAAoB,MAAAC,+BAIpDrB,EAAU,iEAFFA,EAAa,sDA5BhB,SAAAsB,EACPI,EACAC,EACAC,GAEM,MAAAC,GAAW,oBAEbH,IAAYC,GACdE,EAAQC,KAAK,YAGXH,GACFE,EAAQC,KAAK,cAEXF,GACFC,EAAQC,KAAI,cAAeF,KAGtBC,EAAQE,KAAK,iJAnCXC,GAAUC,GACVC,cAAAA,EAAgB,IAAED,eAClBE,GAAmBF,GACnBL,KAAAA,EAAmB,KAAGK,GACtBP,QAAAA,GAAU,GAAKO,GACfN,UAAAA,GAAY,GAAKM,GACjBvB,SAAAA,GAAW,GAAKuB,WAChBG,GAAeH,EACtBI,MAAmBC,QACjBC,EAAgBC,EAAqBC,KACvC,IAAAC,EAAgB,4WAEnBC,EAAA,EAAEC,EAAgBR,EAAWS,KAAKC,MAAMV,GAAO,qBAC/CO,EAAA,EAAED,EAAgBR,GAChBS,EAAA,EAAAI,EAAYd,EAAQb,WACpB4B,EAALC,OAAAC,UAAuBC,0BACXH,EAAW5B,sDA6BTsB,EAAaU,EAAAC,qCACR,IAAAhB,EAAaiB,SAAS,SAAUZ"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import {\n    get_current_component,\n    createEventDispatcher,\n  } from 'svelte/internal';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import { createEventForwarder } from '../../utilities/EventForward';\n\n  import type { SelectOption, SelectSize } from './select.types';\n\n  export let id: string;\n  export let valueselected = '';\n  export let placeholder: string;\n  export let size: SelectSize = 'm';\n  export let isvalid = false;\n  export let isinvalid = false;\n  export let disabled = false;\n  export let options: string;\n  let eventHandler = new EventHandler(\n    get_current_component(),\n    createEventDispatcher(),\n  );\n  const forwardEvents = createEventForwarder(get_current_component());\n  let valueSelected = '';\n\n  $: parsedOptions = options ? (JSON.parse(options) as SelectOption[]) : [];\n  $: valueSelected = valueselected;\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n  function setClasses(\n    isvalid: boolean,\n    isinvalid: boolean,\n    size: SelectSize,\n  ): string {\n    const classes = ['mc-select'];\n\n    if (isvalid && !isinvalid) {\n      classes.push('is-valid');\n    }\n\n    if (isinvalid) {\n      classes.push('is-invalid');\n    }\n    if (size) {\n      classes.push(`mc-select--${size}`);\n    }\n\n    return classes.join(' ');\n  }\n</script>\n\n<!-- svelte-ignore a11y-no-onchange -->\n<select\n  use:forwardEvents\n  {id}\n  class=\"{setClasses(isvalid, isinvalid, size)} {userClass}\"\n  {disabled}\n  bind:value={valueSelected}\n  on:change={() => eventHandler.dispatch('change', valueSelected)}\n  {...attributes}\n>\n  {#if placeholder}\n    <option value=\"\" disabled selected>\n      -- {placeholder} --\n    </option>\n  {/if}\n\n  {#each parsedOptions as opt}\n    <option name={opt.value} disabled={opt.disabled} value={opt.value}>\n      {opt.text}\n    </option>\n  {/each}\n</select>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/_c.select';\n</style>\n"],"names":["ctx","insert","target","option","anchor","t0_value","text","attr","option_name_value","value","disabled","option_disabled_value","__value","option_value_value","dirty","set_data","t0","create_if_block","length","i","class","select_class_value","setClasses","add_render_callback","call","select","isvalid","isinvalid","size","classes","push","join","id","$$props","valueselected","placeholder","options","eventHandler","EventHandler","get_current_component","createEventDispatcher","forwardEvents","createEventForwarder","valueSelected","$$invalidate","parsedOptions","JSON","parse","userClass","attributes","Object","assign","$$restProps","select_value","this","dispatch"],"mappings":"2cAiEsC,WAC5BA,EAAW,QAAC,gFADlBC,EAEQC,EAAAC,EAAAC,yCADFJ,EAAW,kDAMdK,EAAAL,MAAIM,KAAI,yCADGC,EAAAJ,EAAA,OAAAK,EAAAR,MAAIS,OAAiBN,EAAAO,SAAAC,EAAAX,MAAIU,SAAiBP,EAAAS,QAAAC,EAAAb,MAAIS,gCAA5DR,EAEQC,EAAAC,EAAAC,yBADL,IAAAU,GAAAT,KAAAA,EAAAL,MAAIM,KAAI,KAAAS,EAAAC,EAAAX,GADG,IAAAS,GAAAN,KAAAA,EAAAR,MAAIS,sBAAiB,IAAAK,GAAAH,KAAAA,EAAAX,MAAIU,0BAAiB,IAAAI,GAAAD,KAAAA,EAAAb,MAAIS,sFAPzDT,EAAW,IAAAiB,EAAAjB,KAMTA,EAAa,wBAAlBkB,OAAIC,GAAA,qCAZEC,MAAAC,EAAAC,EAAWtB,EAAO,GAAEA,EAAW,GAAAA,UAAQA,EAAS,oBAIpDA,EAAU,mJAFW,IAAbA,EAAa,IAAAuB,GAAA,IAAAvB,EAAA,IAAAwB,KAAAC,aAL3BxB,EAoBQC,EAAAuB,EAAArB,8IAfMJ,EAAa,IAAA,4FAIpBA,EAAW,4EAMTA,EAAa,WAAlBkB,OAAIC,GAAA,EAAA,iHAAJD,iCAZM,IAAAJ,GAAAO,KAAAA,EAAAC,EAAWtB,EAAO,GAAEA,EAAW,GAAAA,UAAQA,EAAS,KAAA,CAAAoB,MAAAC,+BAIpDrB,EAAU,iEAFFA,EAAa,sDA5BhB,SAAAsB,EACPI,EACAC,EACAC,GAEM,MAAAC,GAAW,oBAEbH,IAAYC,GACdE,EAAQC,KAAK,YAGXH,GACFE,EAAQC,KAAK,cAEXF,GACFC,EAAQC,KAAI,cAAeF,KAGtBC,EAAQE,KAAK,iJAtCXC,GAAUC,GACVC,cAAAA,EAAgB,IAAED,eAClBE,GAAmBF,GACnBL,KAAAA,EAAmB,KAAGK,GACtBP,QAAAA,GAAU,GAAKO,GACfN,UAAAA,GAAY,GAAKM,GACjBvB,SAAAA,GAAW,GAAKuB,WAChBG,GAAeH,EACtBI,EAAmB,IAAAC,EACrBC,IACAC,WAEIC,EAAgBC,EAAqBH,KACvC,IAAAI,EAAgB,4WAEnBC,EAAA,EAAEC,EAAgBT,EAAWU,KAAKC,MAAMX,GAAO,qBAC/CQ,EAAA,EAAED,EAAgBT,GAChBU,EAAA,EAAAI,EAAYf,EAAQb,WACpB6B,EAALC,OAAAC,UAAuBC,0BACXH,EAAW7B,sDA6BTuB,EAAaU,EAAAC,qCACR,IAAAjB,EAAakB,SAAS,SAAUZ"}

package/public/components/select/Select.svelte

@@ -1,7 +1,10 @@
 <svelte:options tag={null} />
 
 <script lang="ts">
-  import { get_current_component } from 'svelte/internal';
+  import {
+    get_current_component,
+    createEventDispatcher,
+  } from 'svelte/internal';
   import { EventHandler } from '../../utilities/EventHandler';
   import { createEventForwarder } from '../../utilities/EventForward';
 
@@ -15,7 +18,10 @@
   export let isinvalid = false;
   export let disabled = false;
   export let options: string;
-  let eventHandler = new EventHandler();
+  let eventHandler = new EventHandler(
+    get_current_component(),
+    createEventDispatcher(),
+  );
   const forwardEvents = createEventForwarder(get_current_component());
   let valueSelected = '';
 

package/public/components/sidebar/Sidebar.js

@@ -1,2 +1,2 @@
-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,B as d,n as c,g as m,h as b,j as u,C as g,l as p,y as f,w as h,x as _,m as $,o as x,D as w,p as y,ab as v,ac as L,q as k,z as E,O as j,ad as I,G as S}from"../../index-52f16292.js";import T from"./sidebar-segment.nested.js";import z from"./sidebar-section.nested.js";import U from"./sidebar-user.nested.js";import R from"./sidebar-separator.nested.js";import{E as O}from"../../EventHandler-f4efd23c.js";import{i as B,s as A,t as C,u as F,a as M,b as H}from"../../sidebar-service-293d79ef.js";import"./sidebar-feature-group.nested.js";import"./sidebar-feature.nested.js";import"./sidebar-sub-features.nested.js";const{Boolean:q}=I;function D(e,t,s){const i=e.slice();return i[18]=t[s],i}function G(e,t,s){const i=e.slice();return i[21]=t[s],i}function J(e){let t,s;return{c(){t=S("svg"),s=S("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=S("svg"),s=S("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(D(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=D(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(E(),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(q);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 T({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(G(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=G(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(E(),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(q);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 U({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,L,k,j,I,S,U,O,B,A,C,F,M;function H(e,t){return e[3]?N:J}let q=H(e),D=q(e);L=new T({props:{data:e[4]?.HOME}}),j=new R({}),S=new z({props:{data:e[4]?.FEATURES,a11yLabels:e[0]}});let G=e[4]?.UTILITIES&&K(e),P=e[2]&&V(e),Q=[{class:A="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"),D.c(),v=l(),d(L.$$.fragment),k=l(),d(j.$$.fragment),I=l(),d(S.$$.fragment),U=l(),G&&G.c(),B=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",O="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),D.m(r,null),u(s,v),g(L,s,null),u(s,k),g(j,s,null),u(s,I),g(S,s,null),u(s,U),G&&G.m(s,null),u(t,B),P&&P.m(t,null),C=!0,F||(M=p(a,"click",e[9]),F=!0)},p(e,[i]){q!==(q=H(e))&&(D.d(1),D=q(e),D&&(D.c(),D.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),L.$set(n);const o={};16&i&&(o.data=e[4]?.FEATURES),1&i&&(o.a11yLabels=e[0]),S.$set(o),e[4]?.UTILITIES?G?(G.p(e,i),16&i&&f(G,1)):(G=K(e),G.c(),f(G,1),G.m(s,null)):G&&(E(),h(G,1,1,(()=>{G=null})),_()),(!C||4&i&&O!==(O="mc-sidebar__container "+(e[2]?"has-bottom-panel":"")))&&m(s,"class",O),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&&(E(),h(P,1,1,(()=>{P=null})),_()),b(t,W=$(Q,[(!C||8&i&&A!==(A="mc-sidebar "+(e[3]?"is-open":"is-close")))&&{class:A},(!C||8&i)&&{"aria-expanded":e[3]},{"aria-labelledby":"mc-sidebar__trigger"},2&i&&e[1]]))},i(e){C||(f(L.$$.fragment,e),f(j.$$.fragment,e),f(S.$$.fragment,e),f(G),f(P),C=!0)},o(e){h(L.$$.fragment,e),h(j.$$.fragment,e),h(S.$$.fragment,e),h(G),h(P),C=!1},d(e){e&&x(t),D.d(),w(L),w(j),w(S),G&&G.d(),P&&P.d(),F=!1,M()}}}function X(e,t,s){let i;const a=["data","open","code","user","a11yLabels"];let r,o,l=y(t,a);v(e,B,(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 O,_=!1;const $=[];$.push(B.subscribe((e=>{h.dispatch("on-toggle",e)}))),$.push(A.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))}))),L((()=>{for(const e of $)e()}));return e.$$set=e=>{t=n(n({},t),k(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,F(a)),typeof c==typeof t&&c===t||(c=t,M(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 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,B as d,n as c,g as m,h as b,j as u,C as g,l as p,y as f,w as h,x as _,m as $,o as x,D as w,p as y,ab as v,q as L,r as k,ac as E,u as j,z as I,O as S,ad as T,G as z}from"../../index-9ffad6d0.js";import U from"./sidebar-segment.nested.js";import R from"./sidebar-section.nested.js";import O from"./sidebar-user.nested.js";import B from"./sidebar-separator.nested.js";import{E as A}from"../../EventHandler-f7ee47ca.js";import{i as C,s as F,t as M,u as H,a as q,b as D}from"../../sidebar-service-ab65d83f.js";import"./sidebar-feature-group.nested.js";import"./sidebar-feature.nested.js";import"./sidebar-sub-features.nested.js";const{Boolean:G}=T;function J(e,t,s){const i=e.slice();return i[18]=t[s],i}function N(e,t,s){const i=e.slice();return i[21]=t[s],i}function K(e){let t,s;return{c(){t=z("svg"),s=z("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 P(e){let t,s;return{c(){t=z("svg"),s=z("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 Q(e){let t,s,a=e[4]?.UTILITIES,r=[];for(let t=0;t<a.length;t+=1)r[t]=W(J(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=J(e,a,i);r[i]?(r[i].p(n,s),f(r[i],1)):(r[i]=W(n),r[i].c(),f(r[i],1),r[i].m(t,null))}for(I(),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(G);for(let e=0;e<r.length;e+=1)h(r[e]);s=!1},d(e){e&&x(t),S(r,e)}}}function V(e){let t,s,a;return s=new U({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 W(e){let t,s,a,r,n;t=new B({});let c=e[18],m=[];for(let t=0;t<c.length;t+=1)m[t]=V(N(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=N(e,c,s);m[s]?(m[s].p(i,t),f(m[s],1)):(m[s]=V(i),m[s].c(),f(m[s],1),m[s].m(a,r))}for(I(),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(G);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),S(m,e)}}}function X(e){let t,s;return t=new O({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 Y(e){let t,s,a,r,y,v,L,k,E,j,S,T,z,O,A,C,F,M;function H(e,t){return e[3]?P:K}let q=H(e),D=q(e);L=new U({props:{data:e[4]?.HOME}}),E=new B({}),S=new R({props:{data:e[4]?.FEATURES,a11yLabels:e[0]}});let G=e[4]?.UTILITIES&&Q(e),J=e[2]&&X(e),N=[{class:A="mc-sidebar "+(e[3]?"is-open":"is-close")},{"aria-expanded":e[3]},{"aria-labelledby":"mc-sidebar__trigger"},e[1]],V={};for(let e=0;e<N.length;e+=1)V=n(V,N[e]);return{c(){t=o("nav"),s=o("div"),a=o("button"),r=o("span"),D.c(),v=l(),d(L.$$.fragment),k=l(),d(E.$$.fragment),j=l(),d(S.$$.fragment),T=l(),G&&G.c(),O=l(),J&&J.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",z="mc-sidebar__container "+(e[2]?"has-bottom-panel":"")),b(t,V)},m(n,o){i(n,t,o),u(t,s),u(s,a),u(a,r),D.m(r,null),u(s,v),g(L,s,null),u(s,k),g(E,s,null),u(s,j),g(S,s,null),u(s,T),G&&G.m(s,null),u(t,O),J&&J.m(t,null),C=!0,F||(M=p(a,"click",e[9]),F=!0)},p(e,[i]){q!==(q=H(e))&&(D.d(1),D=q(e),D&&(D.c(),D.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),L.$set(n);const o={};16&i&&(o.data=e[4]?.FEATURES),1&i&&(o.a11yLabels=e[0]),S.$set(o),e[4]?.UTILITIES?G?(G.p(e,i),16&i&&f(G,1)):(G=Q(e),G.c(),f(G,1),G.m(s,null)):G&&(I(),h(G,1,1,(()=>{G=null})),_()),(!C||4&i&&z!==(z="mc-sidebar__container "+(e[2]?"has-bottom-panel":"")))&&m(s,"class",z),e[2]?J?(J.p(e,i),4&i&&f(J,1)):(J=X(e),J.c(),f(J,1),J.m(t,null)):J&&(I(),h(J,1,1,(()=>{J=null})),_()),b(t,V=$(N,[(!C||8&i&&A!==(A="mc-sidebar "+(e[3]?"is-open":"is-close")))&&{class:A},(!C||8&i)&&{"aria-expanded":e[3]},{"aria-labelledby":"mc-sidebar__trigger"},2&i&&e[1]]))},i(e){C||(f(L.$$.fragment,e),f(E.$$.fragment,e),f(S.$$.fragment,e),f(G),f(J),C=!0)},o(e){h(L.$$.fragment,e),h(E.$$.fragment,e),h(S.$$.fragment,e),h(G),h(J),C=!1},d(e){e&&x(t),D.d(),w(L),w(E),w(S),G&&G.d(),J&&J.d(),F=!1,M()}}}function Z(e,t,s){let i;const a=["data","open","code","user","a11yLabels"];let r,o,l=y(t,a);v(e,C,(e=>s(3,r=e))),v(e,D,(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(L(),k()),_=!1;const $=[];$.push(C.subscribe((e=>{h.dispatch("on-toggle",e)}))),$.push(F.subscribe((e=>{var t,s,i,a,r;e&&(M(!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),j(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,H(a)),typeof c==typeof t&&c===t||(c=t,q(t))),64&e.$$.dirty&&(typeof _==typeof(r=u)&&_===r||(_=Boolean(r),M(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,()=>M()]}class ee 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},Z,Y,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{ee as default};
 //# sourceMappingURL=Sidebar.js.map

package/public/components/sidebar/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sources":["../../../src/components/sidebar/Sidebar.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import { onDestroy } from 'svelte';\n  import Segment from './sidebar-segment.nested.svelte';\n  import Section from './sidebar-section.nested.svelte';\n  import NavigationUser from './sidebar-user.nested.svelte';\n  import NavigationSeparator from './sidebar-separator.nested.svelte';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import {\n    selectFeature,\n    updateSidebarData,\n    toggleSidebar,\n    isSidebarOpen,\n    sidebar,\n    selectedFeature,\n  } from './sidebar-service';\n  import type { Unsubscriber } from 'svelte/store';\n  import type { A11yLabels, Sidebar, User } from './sidebar.types';\n\n  export let data: string | Sidebar;\n  export let open: boolean;\n  export let code: string;\n  export let user: string | User;\n  export let a11yLabels: A11yLabels;\n  let eventHandler = new EventHandler();\n  let parsedUser: User;\n  let previousCode: string;\n  let previousData: string | Sidebar;\n  let previousOpen = false;\n\n  $: updateData(code, data);\n  $: updateOpen(open);\n  $: parsedUser = typeof user === 'string' ? (JSON.parse(user) as User) : user;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  function updateData(newCode: string, newData: string | Sidebar) {\n    if (typeof previousData !== typeof newData || previousData !== newData) {\n      previousData = newData;\n      updateSidebarData(newData);\n    }\n    if (typeof previousCode !== typeof newCode || previousCode !== newCode) {\n      previousCode = newCode;\n      selectFeature(newCode);\n    }\n  }\n\n  function updateOpen(newOpenStatus?: boolean) {\n    if (\n      typeof previousOpen !== typeof newOpenStatus ||\n      previousOpen !== newOpenStatus\n    ) {\n      previousOpen = Boolean(newOpenStatus);\n      toggleSidebar(Boolean(newOpenStatus));\n    }\n  }\n\n  const unsubscribes: Unsubscriber[] = [];\n  unsubscribes.push(\n    isSidebarOpen.subscribe((state) => {\n      eventHandler.dispatch('on-toggle', state);\n    }),\n  );\n\n  unsubscribes.push(\n    selectedFeature.subscribe((selection) => {\n      // Emit an event and close the menu when the selection changes.\n      if (selection) {\n        toggleSidebar(false);\n        eventHandler.dispatch(\n          'on-select',\n          selection.lv2?.code ?? selection.lv1?.code ?? selection.lv0?.code,\n        );\n      }\n    }),\n  );\n\n  onDestroy(() => {\n    for (const unsubscribe of unsubscribes) {\n      unsubscribe();\n    }\n  });\n</script>\n\n<nav\n  class=\"mc-sidebar {$isSidebarOpen ? 'is-open' : 'is-close'}\"\n  aria-expanded={$isSidebarOpen}\n  aria-labelledby=\"mc-sidebar__trigger\"\n  {...attributes}\n>\n  <div class=\"mc-sidebar__container {parsedUser ? 'has-bottom-panel' : ''}\">\n    <button\n      id=\"mc-sidebar__trigger\"\n      class=\"mc-sidebar__trigger\"\n      aria-label={$isSidebarOpen\n        ? a11yLabels?.['close'] || 'Close the sidebar'\n        : a11yLabels?.['open'] || 'Open the sidebar'}\n      on:click={() => toggleSidebar()}\n    >\n      <span class=\"mc-sidebar__trigger__container\">\n        {#if $isSidebarOpen}\n          <svg\n            class=\"mc-sidebar__trigger-icon\"\n            width=\"24px\"\n            height=\"24px\"\n            viewBox=\"0 0 24 24\"\n            ><path\n              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\"\n            /></svg\n          >\n        {:else}\n          <svg\n            class=\"mc-sidebar__trigger-icon\"\n            width=\"24px\"\n            height=\"24px\"\n            viewBox=\"0 0 24 24\"\n            ><path\n              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\"\n            /></svg\n          >\n        {/if}\n      </span>\n    </button>\n    <Segment data={$sidebar?.HOME} />\n    <NavigationSeparator />\n    <Section data={$sidebar?.FEATURES} {a11yLabels} />\n    {#if $sidebar?.UTILITIES}\n      <div class=\"mc-sidebar__utilities\">\n        {#each $sidebar?.UTILITIES as section}\n          <NavigationSeparator />\n          <ul>\n            {#each section as feature}\n              <li class=\"mc-sidebar__utilities__item\">\n                <Segment data={feature} />\n              </li>\n            {/each}\n          </ul>\n        {/each}\n      </div>\n    {/if}\n  </div>\n  {#if parsedUser}\n    <NavigationUser\n      user={parsedUser}\n      data={$sidebar?.USER_FEATURES}\n      {a11yLabels}\n    />\n  {/if}\n</nav>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import './sidebar-variables';\n\n  .mc-sidebar {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 100;\n    font-size: 14px;\n    color: white;\n    box-sizing: border-box;\n    fill: $color-sidebar-icon;\n    width: 320px;\n    background: $color-sidebar-background;\n    display: block;\n    height: 100vh;\n\n    &__container {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      &.has-bottom-panel {\n        height: calc(100% - 88px);\n      }\n    }\n\n    &__utilities {\n      margin-bottom: 24px;\n\n      &__item {\n        margin: 4px 0px;\n        &:first-child {\n          margin-top: 0;\n        }\n        &:last-child {\n          margin-bottom: 0;\n        }\n      }\n    }\n\n    &__trigger {\n      cursor: pointer;\n      background: none;\n      border: none;\n      padding: 0;\n      margin: 28px 0;\n      min-height: 38px;\n      width: 100%;\n      font-size: inherit;\n      font-family: inherit;\n\n      &-icon {\n        fill: $color-sidebar-icon;\n      }\n\n      &__container {\n        height: 38px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        & > * {\n          width: 24px;\n          height: 24px;\n        }\n      }\n\n      &:hover &__container {\n        background: $color-sidebar-feature-hover-background;\n      }\n\n      &:focus-visible {\n        box-shadow: none;\n        border: none;\n        outline: none;\n\n        & .mc-sidebar__trigger__container {\n          box-shadow: none;\n          border: none;\n          border-radius: 6px;\n          outline: 1px solid #0b96cc;\n        }\n      }\n    }\n\n    &.is-open {\n      @include transition(width 300ms ease-in-out);\n\n      .mc-sidebar__trigger__container {\n        @include transition(\n          width 300ms ease-in-out,\n          margin-left 300ms ease-in-out,\n          border-radius 300ms ease-in-out\n        );\n        margin-left: 266px;\n        width: 38px;\n        border-radius: 4px;\n      }\n    }\n\n    &.is-close {\n      @include transition(width 300ms ease-in-out);\n\n      width: 64px;\n      padding: 0;\n\n      .mc-sidebar__trigger__container {\n        @include transition(\n          width 300ms ease-in-out,\n          margin-left 300ms ease-in-out,\n          border-radius 300ms ease-in-out\n        );\n        margin-left: 0px;\n        width: 64px;\n        border-radius: 0px;\n      }\n    }\n\n    ul {\n      list-style-type: none;\n      margin: 0;\n      padding: 0;\n    }\n  }\n</style>\n"],"names":["insert","target","svg","anchor","append","path","each_value","ctx","UTILITIES","length","i","div","each_blocks","li","ul","data","USER_FEATURES","dirty","navigationuser_changes","create_if_block_2","props","HOME","FEATURES","if_block1","create_if_block_1","create_if_block","nav","button","span","segment_changes","section_changes","class","nav_class_value","parsedUser","previousCode","previousData","$$props","open","code","user","a11yLabels","eventHandler","EventHandler","previousOpen","unsubscribes","push","isSidebarOpen","subscribe","state","dispatch","selectedFeature","selection","toggleSidebar","_d","_b","_a","lv2","_c","lv1","_e","lv0","onDestroy","unsubscribe","newCode","newData","newOpenStatus","updateSidebarData","selectFeature","Boolean","$$invalidate","JSON","parse","attributes","Object","assign","$$restProps"],"mappings":"uqCAgHUA,EAQAC,EAAAC,EAAAC,GAHGC,EAECF,EAAAG,6YAjBJL,EAQAC,EAAAC,EAAAC,GAHGC,EAECF,EAAAG,yCAoBCC,EAAAC,MAAUC,+BAAfC,OAAIC,GAAA,oKADRV,EAWKC,EAAAU,EAAAR,oFAVIG,EAAAC,MAAUC,kBAAfC,OAAIC,GAAA,EAAA,yGAAJD,OAAIC,EAAAE,EAAAH,OAAAC,GAAA,yCAAJD,OAAIC,GAAA,wJAKiBH,EAAO,0FADxBP,EAEIC,EAAAY,EAAAV,qDADaI,EAAO,mJAFnBA,EAAO,yBAAZE,OAAIC,GAAA,6KADRV,EAMIC,EAAAa,EAAAX,6FALKI,EAAO,YAAZE,OAAIC,GAAA,EAAA,sGAAJD,OAAIC,EAAAE,EAAAH,OAAAC,GAAA,4DAAJD,OAAIC,GAAA,wLAYNH,EAAU,GACVQ,KAAAR,MAAUS,6GADVT,EAAU,IACV,GAAAU,IAAAC,EAAAH,KAAAR,MAAUS,+MA5CTT,EAAc,GAAAY,+BAuBRC,MAAA,CAAAL,KAAAR,MAAUc,oCAEVN,KAAAR,MAAUe,4BACpB,IAAAC,EAAAhB,MAAUC,WAASgB,EAAAjB,KAerBA,EAAU,IAAAkB,EAAAlB,8BAxDIA,EAAc,GAAG,UAAY,8BACjCA,EAAc,8CAEzBA,EAAU,kWAMEA,EAAC,GACTA,EAAU,IAAU,OAAK,oBACzBA,EAAU,IAAS,MAAK,4DANGA,EAAU,GAAG,mBAAqB,oBANvEP,EAgEKC,EAAAyB,EAAAvB,GA1DHC,EAkDKsB,EAAAf,GAjDHP,EA+BQO,EAAAgB,GAvBNvB,EAsBMuB,EAAAC,uOA3BMrB,EAAC,GACTA,EAAU,IAAU,OAAK,oBACzBA,EAAU,IAAS,MAAK,qDA2Bf,GAAAU,IAAAY,EAAAd,KAAAR,MAAUc,2BAEV,GAAAJ,IAAAa,EAAAf,KAAAR,MAAUe,6CACpBf,MAAUC,sJApCkBD,EAAU,GAAG,mBAAqB,sBAmDhEA,EAAU,8IAxDIA,EAAc,GAAG,UAAY,eAAU,CAAAwB,MAAAC,+BAC3CzB,EAAc,mDAEzBA,EAAU,iXA/DV0B,EACAC,EACAC,QAROpB,GAAsBqB,QACtBC,GAAaD,QACbE,GAAYF,QACZG,GAAmBH,cACnBI,GAAsBJ,EAC7BK,MAAmBC,EAInBC,GAAe,QA6BbC,EAAY,GAClBA,EAAaC,KACXC,EAAcC,WAAWC,IACvBP,EAAaQ,SAAS,YAAaD,EAAK,KAI5CJ,EAAaC,KACXK,EAAgBH,WAAWI,kBAErBA,IACFC,GAAc,GACdX,EAAaQ,SACX,YADV,QAAAI,EAAA,QAAAC,EAAA,QAAAC,EAEUJ,EAAUK,eAFpBD,SAAAA,EAEyBjB,gBAFzBgB,EAAAA,EAAA,QAAAG,EAEiCN,EAAUO,WAF3C,IAAAD,SAAAA,EAEgDnB,gBAFhDe,EAAAA,EAAA,QAAAM,EAEwDR,EAAUS,WAFlE,IAAAD,SAAAA,EAEuErB,WAMrEuB,GAAS,KACI,IAAA,MAAAC,KAAelB,EACxBkB,+NA3CgBC,EAAiBC,EAWjBC,mBAXAF,EANNzB,SAODH,UADwB6B,EANjBjD,IAO4BoB,IAAiB6B,IAC7D7B,EAAe6B,EACfE,EAAkBF,WAET9B,UAAwB6B,GAAW7B,IAAiB6B,IAC7D7B,EAAe6B,EACfI,EAAcJ,4BAMPpB,UAFSsB,EAhBN5B,IAmBVM,IAAiBsB,IAEjBtB,EAAeyB,QAAQH,GACvBb,EAAcgB,QAAQH,sBArBvBI,EAAA,EAAApC,EAA6B,iBAATM,EAAqB+B,KAAKC,MAAMhC,GAAiBA,OACrEiC,EAALC,OAAAC,UAAuBC,yBACXH,EAAWzC,8BA+DDqB"}
+{"version":3,"file":"Sidebar.js","sources":["../../../src/components/sidebar/Sidebar.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import { onDestroy } from 'svelte';\n  import Segment from './sidebar-segment.nested.svelte';\n  import Section from './sidebar-section.nested.svelte';\n  import NavigationUser from './sidebar-user.nested.svelte';\n  import NavigationSeparator from './sidebar-separator.nested.svelte';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import {\n    selectFeature,\n    updateSidebarData,\n    toggleSidebar,\n    isSidebarOpen,\n    sidebar,\n    selectedFeature,\n  } from '../../utilities/sidebar-service';\n  import type { Unsubscriber } from 'svelte/store';\n  import type { A11yLabels, Sidebar, User } from './sidebar.types';\n  import {\n    get_current_component,\n    createEventDispatcher,\n  } from 'svelte/internal';\n\n  export let data: string | Sidebar;\n  export let open: boolean;\n  export let code: string;\n  export let user: string | User;\n  export let a11yLabels: A11yLabels;\n  let eventHandler = new EventHandler(\n    get_current_component(),\n    createEventDispatcher(),\n  );\n  let parsedUser: User;\n  let previousCode: string;\n  let previousData: string | Sidebar;\n  let previousOpen = false;\n\n  $: updateData(code, data);\n  $: updateOpen(open);\n  $: parsedUser = typeof user === 'string' ? (JSON.parse(user) as User) : user;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  function updateData(newCode: string, newData: string | Sidebar) {\n    if (typeof previousData !== typeof newData || previousData !== newData) {\n      previousData = newData;\n      updateSidebarData(newData);\n    }\n    if (typeof previousCode !== typeof newCode || previousCode !== newCode) {\n      previousCode = newCode;\n      selectFeature(newCode);\n    }\n  }\n\n  function updateOpen(newOpenStatus?: boolean) {\n    if (\n      typeof previousOpen !== typeof newOpenStatus ||\n      previousOpen !== newOpenStatus\n    ) {\n      previousOpen = Boolean(newOpenStatus);\n      toggleSidebar(Boolean(newOpenStatus));\n    }\n  }\n\n  const unsubscribes: Unsubscriber[] = [];\n  unsubscribes.push(\n    isSidebarOpen.subscribe((state) => {\n      eventHandler.dispatch('on-toggle', state);\n    }),\n  );\n\n  unsubscribes.push(\n    selectedFeature.subscribe((selection) => {\n      // Emit an event and close the menu when the selection changes.\n      if (selection) {\n        toggleSidebar(false);\n        eventHandler.dispatch(\n          'on-select',\n          selection.lv2?.code ?? selection.lv1?.code ?? selection.lv0?.code,\n        );\n      }\n    }),\n  );\n\n  onDestroy(() => {\n    for (const unsubscribe of unsubscribes) {\n      unsubscribe();\n    }\n  });\n</script>\n\n<nav\n  class=\"mc-sidebar {$isSidebarOpen ? 'is-open' : 'is-close'}\"\n  aria-expanded={$isSidebarOpen}\n  aria-labelledby=\"mc-sidebar__trigger\"\n  {...attributes}\n>\n  <div class=\"mc-sidebar__container {parsedUser ? 'has-bottom-panel' : ''}\">\n    <button\n      id=\"mc-sidebar__trigger\"\n      class=\"mc-sidebar__trigger\"\n      aria-label={$isSidebarOpen\n        ? a11yLabels?.['close'] || 'Close the sidebar'\n        : a11yLabels?.['open'] || 'Open the sidebar'}\n      on:click={() => toggleSidebar()}\n    >\n      <span class=\"mc-sidebar__trigger__container\">\n        {#if $isSidebarOpen}\n          <svg\n            class=\"mc-sidebar__trigger-icon\"\n            width=\"24px\"\n            height=\"24px\"\n            viewBox=\"0 0 24 24\"\n            ><path\n              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\"\n            /></svg\n          >\n        {:else}\n          <svg\n            class=\"mc-sidebar__trigger-icon\"\n            width=\"24px\"\n            height=\"24px\"\n            viewBox=\"0 0 24 24\"\n            ><path\n              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\"\n            /></svg\n          >\n        {/if}\n      </span>\n    </button>\n    <Segment data={$sidebar?.HOME} />\n    <NavigationSeparator />\n    <Section data={$sidebar?.FEATURES} {a11yLabels} />\n    {#if $sidebar?.UTILITIES}\n      <div class=\"mc-sidebar__utilities\">\n        {#each $sidebar?.UTILITIES as section}\n          <NavigationSeparator />\n          <ul>\n            {#each section as feature}\n              <li class=\"mc-sidebar__utilities__item\">\n                <Segment data={feature} />\n              </li>\n            {/each}\n          </ul>\n        {/each}\n      </div>\n    {/if}\n  </div>\n  {#if parsedUser}\n    <NavigationUser\n      user={parsedUser}\n      data={$sidebar?.USER_FEATURES}\n      {a11yLabels}\n    />\n  {/if}\n</nav>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import './_c.sidebar';\n\n  .mc-sidebar {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 100;\n    font-size: 14px;\n    color: white;\n    box-sizing: border-box;\n    fill: $color-sidebar-icon;\n    width: 320px;\n    background: $color-sidebar-background;\n    display: block;\n    height: 100vh;\n\n    &__container {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      &.has-bottom-panel {\n        height: calc(100% - 88px);\n      }\n    }\n\n    &__utilities {\n      margin-bottom: 24px;\n\n      &__item {\n        margin: 4px 0px;\n        &:first-child {\n          margin-top: 0;\n        }\n        &:last-child {\n          margin-bottom: 0;\n        }\n      }\n    }\n\n    &__trigger {\n      cursor: pointer;\n      background: none;\n      border: none;\n      padding: 0;\n      margin: 28px 0;\n      min-height: 38px;\n      width: 100%;\n      font-size: inherit;\n      font-family: inherit;\n\n      &-icon {\n        fill: $color-sidebar-icon;\n      }\n\n      &__container {\n        height: 38px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        & > * {\n          width: 24px;\n          height: 24px;\n        }\n      }\n\n      &:hover &__container {\n        background: $color-sidebar-feature-hover-background;\n      }\n\n      &:focus-visible {\n        box-shadow: none;\n        border: none;\n        outline: none;\n\n        & .mc-sidebar__trigger__container {\n          box-shadow: none;\n          border: none;\n          border-radius: 6px;\n          outline: 1px solid #0b96cc;\n        }\n      }\n    }\n\n    &.is-open {\n      @include transition(width 300ms ease-in-out);\n\n      .mc-sidebar__trigger__container {\n        @include transition(\n          width 300ms ease-in-out,\n          margin-left 300ms ease-in-out,\n          border-radius 300ms ease-in-out\n        );\n        margin-left: 266px;\n        width: 38px;\n        border-radius: 4px;\n      }\n    }\n\n    &.is-close {\n      @include transition(width 300ms ease-in-out);\n\n      width: 64px;\n      padding: 0;\n\n      .mc-sidebar__trigger__container {\n        @include transition(\n          width 300ms ease-in-out,\n          margin-left 300ms ease-in-out,\n          border-radius 300ms ease-in-out\n        );\n        margin-left: 0px;\n        width: 64px;\n        border-radius: 0px;\n      }\n    }\n\n    ul {\n      list-style-type: none;\n      margin: 0;\n      padding: 0;\n    }\n  }\n</style>\n"],"names":["insert","target","svg","anchor","append","path","each_value","ctx","UTILITIES","length","i","div","each_blocks","li","ul","data","USER_FEATURES","dirty","navigationuser_changes","create_if_block_2","props","HOME","FEATURES","if_block1","create_if_block_1","create_if_block","nav","button","span","segment_changes","section_changes","class","nav_class_value","parsedUser","previousCode","previousData","$$props","open","code","user","a11yLabels","eventHandler","EventHandler","get_current_component","createEventDispatcher","previousOpen","unsubscribes","push","isSidebarOpen","subscribe","state","dispatch","selectedFeature","selection","toggleSidebar","_d","_b","_a","lv2","_c","lv1","_e","lv0","onDestroy","unsubscribe","newCode","newData","newOpenStatus","updateSidebarData","selectFeature","Boolean","$$invalidate","JSON","parse","attributes","Object","assign","$$restProps"],"mappings":"qrCAuHUA,EAQAC,EAAAC,EAAAC,GAHGC,EAECF,EAAAG,6YAjBJL,EAQAC,EAAAC,EAAAC,GAHGC,EAECF,EAAAG,yCAoBCC,EAAAC,MAAUC,+BAAfC,OAAIC,GAAA,oKADRV,EAWKC,EAAAU,EAAAR,oFAVIG,EAAAC,MAAUC,kBAAfC,OAAIC,GAAA,EAAA,yGAAJD,OAAIC,EAAAE,EAAAH,OAAAC,GAAA,yCAAJD,OAAIC,GAAA,wJAKiBH,EAAO,0FADxBP,EAEIC,EAAAY,EAAAV,qDADaI,EAAO,mJAFnBA,EAAO,yBAAZE,OAAIC,GAAA,6KADRV,EAMIC,EAAAa,EAAAX,6FALKI,EAAO,YAAZE,OAAIC,GAAA,EAAA,sGAAJD,OAAIC,EAAAE,EAAAH,OAAAC,GAAA,4DAAJD,OAAIC,GAAA,wLAYNH,EAAU,GACVQ,KAAAR,MAAUS,6GADVT,EAAU,IACV,GAAAU,IAAAC,EAAAH,KAAAR,MAAUS,+MA5CTT,EAAc,GAAAY,+BAuBRC,MAAA,CAAAL,KAAAR,MAAUc,oCAEVN,KAAAR,MAAUe,4BACpB,IAAAC,EAAAhB,MAAUC,WAASgB,EAAAjB,KAerBA,EAAU,IAAAkB,EAAAlB,8BAxDIA,EAAc,GAAG,UAAY,8BACjCA,EAAc,8CAEzBA,EAAU,kWAMEA,EAAC,GACTA,EAAU,IAAU,OAAK,oBACzBA,EAAU,IAAS,MAAK,4DANGA,EAAU,GAAG,mBAAqB,oBANvEP,EAgEKC,EAAAyB,EAAAvB,GA1DHC,EAkDKsB,EAAAf,GAjDHP,EA+BQO,EAAAgB,GAvBNvB,EAsBMuB,EAAAC,uOA3BMrB,EAAC,GACTA,EAAU,IAAU,OAAK,oBACzBA,EAAU,IAAS,MAAK,qDA2Bf,GAAAU,IAAAY,EAAAd,KAAAR,MAAUc,2BAEV,GAAAJ,IAAAa,EAAAf,KAAAR,MAAUe,6CACpBf,MAAUC,sJApCkBD,EAAU,GAAG,mBAAqB,sBAmDhEA,EAAU,8IAxDIA,EAAc,GAAG,UAAY,eAAU,CAAAwB,MAAAC,+BAC3CzB,EAAc,mDAEzBA,EAAU,iXA/DV0B,EACAC,EACAC,QAXOpB,GAAsBqB,QACtBC,GAAaD,QACbE,GAAYF,QACZG,GAAmBH,cACnBI,GAAsBJ,EAC7BK,EAAmB,IAAAC,EACrBC,IACAC,KAKEC,GAAe,QA6BbC,EAAY,GAClBA,EAAaC,KACXC,EAAcC,WAAWC,IACvBT,EAAaU,SAAS,YAAaD,EAAK,KAI5CJ,EAAaC,KACXK,EAAgBH,WAAWI,kBAErBA,IACFC,GAAc,GACdb,EAAaU,SACX,YADV,QAAAI,EAAA,QAAAC,EAAA,QAAAC,EAEUJ,EAAUK,eAFpBD,SAAAA,EAEyBnB,gBAFzBkB,EAAAA,EAAA,QAAAG,EAEiCN,EAAUO,WAF3C,IAAAD,SAAAA,EAEgDrB,gBAFhDiB,EAAAA,EAAA,QAAAM,EAEwDR,EAAUS,WAFlE,IAAAD,SAAAA,EAEuEvB,WAMrEyB,GAAS,KACI,IAAA,MAAAC,KAAelB,EACxBkB,+NA3CgBC,EAAiBC,EAWjBC,mBAXAF,EANN3B,SAODH,UADwB+B,EANjBnD,IAO4BoB,IAAiB+B,IAC7D/B,EAAe+B,EACfE,EAAkBF,WAEThC,UAAwB+B,GAAW/B,IAAiB+B,IAC7D/B,EAAe+B,EACfI,EAAcJ,4BAMPpB,UAFSsB,EAhBN9B,IAmBVQ,IAAiBsB,IAEjBtB,EAAeyB,QAAQH,GACvBb,EAAcgB,QAAQH,sBArBvBI,EAAA,EAAAtC,EAA6B,iBAATM,EAAqBiC,KAAKC,MAAMlC,GAAiBA,OACrEmC,EAALC,OAAAC,UAAuBC,yBACXH,EAAW3C,8BA+DDuB"}

package/public/components/sidebar/Sidebar.svelte

@@ -14,16 +14,23 @@
     isSidebarOpen,
     sidebar,
     selectedFeature,
-  } from './sidebar-service';
+  } from '../../utilities/sidebar-service';
   import type { Unsubscriber } from 'svelte/store';
   import type { A11yLabels, Sidebar, User } from './sidebar.types';
+  import {
+    get_current_component,
+    createEventDispatcher,
+  } from 'svelte/internal';
 
   export let data: string | Sidebar;
   export let open: boolean;
   export let code: string;
   export let user: string | User;
   export let a11yLabels: A11yLabels;
-  let eventHandler = new EventHandler();
+  let eventHandler = new EventHandler(
+    get_current_component(),
+    createEventDispatcher(),
+  );
   let parsedUser: User;
   let previousCode: string;
   let previousData: string | Sidebar;
@@ -151,7 +158,7 @@
 
 <style lang="scss">
   @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import './sidebar-variables';
+  @import './_c.sidebar';
 
   .mc-sidebar {
     position: absolute;

package/public/components/sidebar/sidebar-feature-group.nested.js

@@ -1,2 +1,2 @@
-import{E as e,i as t,s as i,F as r,e as a,d as o,g as n,b as s,j as l,y as c,x as d,w as u,o as p,O as x,ab as f,t as m,P as b,k as v,B as g,C as h,l as z,N as _,D as w,z as y,H as k,G as $}from"../../index-52f16292.js";import L from"./sidebar-feature.nested.js";import{a as H,i as j,s as E}from"../../sidebar-service-293d79ef.js";import{E as G}from"../../EventHandler-f4efd23c.js";function M(e){r(e,"svelte-zxaeir",".mc-feature-group.svelte-zxaeir.svelte-zxaeir{background:none;border:none;color:#191919;cursor:pointer;font-size:inherit;font-family:inherit;text-align:initial;margin:0;padding:0;overflow:hidden}.mc-feature-group__icon.svelte-zxaeir.svelte-zxaeir{fill:#191919;height:1.5rem;width:1.5rem}.mc-feature-group__container.svelte-zxaeir.svelte-zxaeir{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:5px 0;padding:8px 0px;-o-transition:margin 300ms ease-in-out;-webkit-transition:margin 300ms ease-in-out;transition:margin 300ms ease-in-out}.mc-feature-group__label.svelte-zxaeir.svelte-zxaeir{margin:0 8px;width:200px;min-width:200px;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.mc-feature-group__label__tooltip.svelte-zxaeir.svelte-zxaeir{opacity:0;-webkit-transition:0s opacity;-o-transition:0s opacity;transition:0s opacity;background-color:#b3b3b3;border:1px solid #191919;border-radius:4px;position:absolute;pointer-events:none;left:calc(100% - 16px);padding:8px 16px;width:188px}.mc-feature-group__label__tooltip__pointer.svelte-zxaeir.svelte-zxaeir{position:absolute;top:50%;left:-8px;top:calc(50% - 6px);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid white}.mc-feature-group__label__tooltip__pointer.svelte-zxaeir div.svelte-zxaeir{position:relative;top:-6px;left:2px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid #b3b3b3}.mc-feature-group__label.svelte-zxaeir:hover+.mc-feature-group__label__tooltip.svelte-zxaeir{opacity:1;-webkit-transition-delay:1s;-o-transition-delay:1s;transition-delay:1s}.mc-feature-group__content.svelte-zxaeir.svelte-zxaeir{overflow:hidden;-o-transition:height 300ms ease-in-out;-webkit-transition:height 300ms ease-in-out;transition:height 300ms ease-in-out}.mc-feature-group__content.is-close.svelte-zxaeir.svelte-zxaeir{height:0}.mc-feature-group.is-selected.svelte-zxaeir.svelte-zxaeir{background:#cfd2d8}.mc-feature-group.is-close.svelte-zxaeir .mc-feature-group__container.svelte-zxaeir{margin:0 20px;width:24px}.mc-feature-group.is-open.svelte-zxaeir .mc-feature-group__container.svelte-zxaeir{margin:0 32px}.mc-feature-group.svelte-zxaeir.svelte-zxaeir:hover{background:#b3b7c1}.mc-feature-group.svelte-zxaeir.svelte-zxaeir:focus-visible{-webkit-box-shadow:none;box-shadow:none;border:none;outline:none}.mc-feature-group.svelte-zxaeir:focus-visible .mc-feature-group__container.svelte-zxaeir{-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}ul.svelte-zxaeir.svelte-zxaeir,li.svelte-zxaeir.svelte-zxaeir{list-style-type:none;margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}ul.svelte-zxaeir.svelte-zxaeir{-webkit-box-align:start;-ms-flex-align:start;align-items:start;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}ul.svelte-zxaeir li.svelte-zxaeir{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box}")}function B(e,t,i){const r=e.slice();return r[15]=t[i],r}function C(e){let t,i=`<${V(e[0].icon)} />`;return{c(){t=a("span"),n(t,"class","mc-feature-group__icon svelte-zxaeir")},m(e,r){s(e,t,r),t.innerHTML=i},p(e,r){1&r&&i!==(i=`<${V(e[0].icon)} />`)&&(t.innerHTML=i)},d(e){e&&p(t)}}}function F(e){let t,i,r,c,d,u=e[0].label+"",x=e[6]?.offsetHeight<e[6]?.scrollHeight&&N(e);function f(e,t){return e[1]?T:q}let g=f(e),h=g(e);return{c(){t=a("span"),i=m(u),r=o(),x&&x.c(),c=o(),h.c(),d=b(),n(t,"class","mc-feature-group__label svelte-zxaeir")},m(a,o){s(a,t,o),l(t,i),e[9](t),s(a,r,o),x&&x.m(a,o),s(a,c,o),h.m(a,o),s(a,d,o)},p(e,t){1&t&&u!==(u=e[0].label+"")&&v(i,u),e[6]?.offsetHeight<e[6]?.scrollHeight?x?x.p(e,t):(x=N(e),x.c(),x.m(c.parentNode,c)):x&&(x.d(1),x=null),g!==(g=f(e))&&(h.d(1),h=g(e),h&&(h.c(),h.m(d.parentNode,d)))},d(i){i&&p(t),e[9](null),i&&p(r),x&&x.d(i),i&&p(c),h.d(i),i&&p(d)}}}function N(e){let t,i,r,c,d,u=e[0].label+"";return{c(){t=a("div"),i=a("div"),i.innerHTML='<div class="svelte-zxaeir"></div>',r=o(),c=a("span"),d=m(u),n(i,"class","mc-feature-group__label__tooltip__pointer svelte-zxaeir"),n(t,"aria-hidden","true"),n(t,"class","mc-feature-group__label__tooltip svelte-zxaeir")},m(e,a){s(e,t,a),l(t,i),l(t,r),l(t,c),l(c,d)},p(e,t){1&t&&u!==(u=e[0].label+"")&&v(d,u)},d(e){e&&p(t)}}}function T(e){let t,i;return{c(){t=$("svg"),i=$("path"),n(i,"d","M12 9H4a1 1 0 010-2h8a1 1 0 010 2z"),n(t,"class","mc-feature-group__icon svelte-zxaeir"),n(t,"width","16px"),n(t,"height","16px"),n(t,"viewBox","0 0 16 16")},m(e,r){s(e,t,r),l(t,i)},d(e){e&&p(t)}}}function q(e){let t,i;return{c(){t=$("svg"),i=$("path"),n(i,"d","M13 7H9V3a1 1 0 00-2 0v4H3a1 1 0 000 2h4v4a1 1 0 002 0V9h4a1 1 0 000-2z"),n(t,"class","mc-feature-group__icon svelte-zxaeir"),n(t,"width","16px"),n(t,"height","16px"),n(t,"viewBox","0 0 16 16")},m(e,r){s(e,t,r),l(t,i)},d(e){e&&p(t)}}}function A(e){let t,i,r,d,x,f;function m(){return e[10](e[15])}return i=new L({props:{feature:e[15],a11yLabels:e[2]}}),{c(){t=a("li"),g(i.$$.fragment),r=o(),n(t,"class","svelte-zxaeir")},m(e,a){s(e,t,a),h(i,t,null),l(t,r),d=!0,x||(f=z(t,"click",_(m)),x=!0)},p(t,r){e=t;const a={};1&r&&(a.feature=e[15]),4&r&&(a.a11yLabels=e[2]),i.$set(a)},i(e){d||(c(i.$$.fragment,e),d=!0)},o(e){u(i.$$.fragment,e),d=!1},d(e){e&&p(t),w(i),x=!1,f()}}}function S(e){let t,i,r,f,m,b,v,g,h,z,_,w,k,$=e[0].icon&&C(e),L=e[3]&&F(e),H=e[0].items,j=[];for(let t=0;t<H.length;t+=1)j[t]=A(B(e,H,t));const E=e=>u(j[e],1,1,(()=>{j[e]=null}));return{c(){t=a("button"),i=a("span"),$&&$.c(),r=o(),L&&L.c(),h=o(),z=a("ul");for(let e=0;e<j.length;e+=1)j[e].c();n(i,"class","mc-feature-group__container svelte-zxaeir"),n(t,"class",f="mc-feature-group "+(e[5]?"is-selected":"")+" "+(e[3]?"is-open":"is-close")+" svelte-zxaeir"),n(t,"aria-label",m=e[0].label),n(t,"aria-expanded",b=e[3]&&e[1]),n(t,"aria-controls",v=e[0].code+"-list"),n(t,"id",g=e[0].code),n(z,"class","mc-feature-group__content is-close svelte-zxaeir"),n(z,"aria-hidden",_=!e[3]||!e[1]),n(z,"id",w=e[0].code+"-list")},m(a,o){s(a,t,o),l(t,i),$&&$.m(i,null),l(i,r),L&&L.m(i,null),s(a,h,o),s(a,z,o);for(let e=0;e<j.length;e+=1)j[e]&&j[e].m(z,null);e[11](z),k=!0},p(e,[a]){if(e[0].icon?$?$.p(e,a):($=C(e),$.c(),$.m(i,r)):$&&($.d(1),$=null),e[3]?L?L.p(e,a):(L=F(e),L.c(),L.m(i,null)):L&&(L.d(1),L=null),(!k||40&a&&f!==(f="mc-feature-group "+(e[5]?"is-selected":"")+" "+(e[3]?"is-open":"is-close")+" svelte-zxaeir"))&&n(t,"class",f),(!k||1&a&&m!==(m=e[0].label))&&n(t,"aria-label",m),(!k||10&a&&b!==(b=e[3]&&e[1]))&&n(t,"aria-expanded",b),(!k||1&a&&v!==(v=e[0].code+"-list"))&&n(t,"aria-controls",v),(!k||1&a&&g!==(g=e[0].code))&&n(t,"id",g),133&a){let t;for(H=e[0].items,t=0;t<H.length;t+=1){const i=B(e,H,t);j[t]?(j[t].p(i,a),c(j[t],1)):(j[t]=A(i),j[t].c(),c(j[t],1),j[t].m(z,null))}for(y(),t=H.length;t<j.length;t+=1)E(t);d()}(!k||10&a&&_!==(_=!e[3]||!e[1]))&&n(z,"aria-hidden",_),(!k||1&a&&w!==(w=e[0].code+"-list"))&&n(z,"id",w)},i(e){if(!k){for(let e=0;e<H.length;e+=1)c(j[e]);k=!0}},o(e){j=j.filter(Boolean);for(let e=0;e<j.length;e+=1)u(j[e]);k=!1},d(i){i&&p(t),$&&$.d(),L&&L.d(),i&&p(h),i&&p(z),x(j,i),e[11](null)}}}function V(e){return`${e} size="1.5rem"`}function D(e,t,i){let r,a;f(e,j,(e=>i(3,r=e))),f(e,E,(e=>i(8,a=e)));let o,n,{featureGroup:s}=t,{expand:l}=t,{a11yLabels:c}=t,d=new G,u=!1;function p(e){var t;e.disabled||((null===(t=e.items)||void 0===t?void 0:t.length)?d.dispatch("feature-click",e):H(e.code))}return e.$$set=e=>{"featureGroup"in e&&i(0,s=e.featureGroup),"expand"in e&&i(1,l=e.expand),"a11yLabels"in e&&i(2,c=e.a11yLabels)},e.$$.update=()=>{var t,n,c,d,p,x;267&e.$$.dirty&&(t=l,n=r,c=s,i(5,u=null!==(x=(null==(d=a)?void 0:d.lv0)&&c.code===(null===(p=null==d?void 0:d.lv0)||void 0===p?void 0:p.code)&&(!d.lv1||!t||!n))&&void 0!==x&&x)),10&e.$$.dirty&&function(e,t){if(o){i(4,o.style.height="",o),i(4,o.style.transition="none",o);const r=window.getComputedStyle(o).height;o.classList.add(t&&e?"is-open":"is-close"),o.classList.remove(t&&e?"is-close":"is-open");const a=window.getComputedStyle(o).height;i(4,o.style.height=r,o),requestAnimationFrame((()=>{i(4,o.style.transition="",o),requestAnimationFrame((()=>{i(4,o.style.height=a,o)}))}));const n=()=>{i(4,o.style.height="",o),o.removeEventListener("transitionend",n)};o.addEventListener("transitionend",n)}}(l,r)},[s,l,c,r,o,u,n,p,a,function(e){k[e?"unshift":"push"]((()=>{n=e,i(6,n)}))},e=>p(e),function(e){k[e?"unshift":"push"]((()=>{o=e,i(4,o)}))}]}class O extends e{constructor(e){super(),t(this,e,D,S,i,{featureGroup:0,expand:1,a11yLabels:2},M)}}export{O as default};
+import{E as e,i as t,s as i,F as a,e as r,d as o,g as n,b as s,j as l,y as c,x as d,w as u,o as p,O as x,ab as f,q as m,r as b,t as v,P as g,k as h,B as z,C as _,l as w,N as y,D as k,z as $,H as L,G as H}from"../../index-9ffad6d0.js";import j from"./sidebar-feature.nested.js";import{a as E,i as G,s as M}from"../../sidebar-service-ab65d83f.js";import{E as B}from"../../EventHandler-f7ee47ca.js";function q(e){a(e,"svelte-zxaeir",".mc-feature-group.svelte-zxaeir.svelte-zxaeir{background:none;border:none;color:#191919;cursor:pointer;font-size:inherit;font-family:inherit;text-align:initial;margin:0;padding:0;overflow:hidden}.mc-feature-group__icon.svelte-zxaeir.svelte-zxaeir{fill:#191919;height:1.5rem;width:1.5rem}.mc-feature-group__container.svelte-zxaeir.svelte-zxaeir{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:5px 0;padding:8px 0px;-o-transition:margin 300ms ease-in-out;-webkit-transition:margin 300ms ease-in-out;transition:margin 300ms ease-in-out}.mc-feature-group__label.svelte-zxaeir.svelte-zxaeir{margin:0 8px;width:200px;min-width:200px;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.mc-feature-group__label__tooltip.svelte-zxaeir.svelte-zxaeir{opacity:0;-webkit-transition:0s opacity;-o-transition:0s opacity;transition:0s opacity;background-color:#b3b3b3;border:1px solid #191919;border-radius:4px;position:absolute;pointer-events:none;left:calc(100% - 16px);padding:8px 16px;width:188px}.mc-feature-group__label__tooltip__pointer.svelte-zxaeir.svelte-zxaeir{position:absolute;top:50%;left:-8px;top:calc(50% - 6px);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid white}.mc-feature-group__label__tooltip__pointer.svelte-zxaeir div.svelte-zxaeir{position:relative;top:-6px;left:2px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid #b3b3b3}.mc-feature-group__label.svelte-zxaeir:hover+.mc-feature-group__label__tooltip.svelte-zxaeir{opacity:1;-webkit-transition-delay:1s;-o-transition-delay:1s;transition-delay:1s}.mc-feature-group__content.svelte-zxaeir.svelte-zxaeir{overflow:hidden;-o-transition:height 300ms ease-in-out;-webkit-transition:height 300ms ease-in-out;transition:height 300ms ease-in-out}.mc-feature-group__content.is-close.svelte-zxaeir.svelte-zxaeir{height:0}.mc-feature-group.is-selected.svelte-zxaeir.svelte-zxaeir{background:#cfd2d8}.mc-feature-group.is-close.svelte-zxaeir .mc-feature-group__container.svelte-zxaeir{margin:0 20px;width:24px}.mc-feature-group.is-open.svelte-zxaeir .mc-feature-group__container.svelte-zxaeir{margin:0 32px}.mc-feature-group.svelte-zxaeir.svelte-zxaeir:hover{background:#b3b7c1}.mc-feature-group.svelte-zxaeir.svelte-zxaeir:focus-visible{-webkit-box-shadow:none;box-shadow:none;border:none;outline:none}.mc-feature-group.svelte-zxaeir:focus-visible .mc-feature-group__container.svelte-zxaeir{-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}ul.svelte-zxaeir.svelte-zxaeir,li.svelte-zxaeir.svelte-zxaeir{list-style-type:none;margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}ul.svelte-zxaeir.svelte-zxaeir{-webkit-box-align:start;-ms-flex-align:start;align-items:start;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}ul.svelte-zxaeir li.svelte-zxaeir{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box}")}function C(e,t,i){const a=e.slice();return a[15]=t[i],a}function F(e){let t,i=`<${O(e[0].icon)} />`;return{c(){t=r("span"),n(t,"class","mc-feature-group__icon svelte-zxaeir")},m(e,a){s(e,t,a),t.innerHTML=i},p(e,a){1&a&&i!==(i=`<${O(e[0].icon)} />`)&&(t.innerHTML=i)},d(e){e&&p(t)}}}function N(e){let t,i,a,c,d,u=e[0].label+"",x=e[6]?.offsetHeight<e[6]?.scrollHeight&&T(e);function f(e,t){return e[1]?A:S}let m=f(e),b=m(e);return{c(){t=r("span"),i=v(u),a=o(),x&&x.c(),c=o(),b.c(),d=g(),n(t,"class","mc-feature-group__label svelte-zxaeir")},m(r,o){s(r,t,o),l(t,i),e[9](t),s(r,a,o),x&&x.m(r,o),s(r,c,o),b.m(r,o),s(r,d,o)},p(e,t){1&t&&u!==(u=e[0].label+"")&&h(i,u),e[6]?.offsetHeight<e[6]?.scrollHeight?x?x.p(e,t):(x=T(e),x.c(),x.m(c.parentNode,c)):x&&(x.d(1),x=null),m!==(m=f(e))&&(b.d(1),b=m(e),b&&(b.c(),b.m(d.parentNode,d)))},d(i){i&&p(t),e[9](null),i&&p(a),x&&x.d(i),i&&p(c),b.d(i),i&&p(d)}}}function T(e){let t,i,a,c,d,u=e[0].label+"";return{c(){t=r("div"),i=r("div"),i.innerHTML='<div class="svelte-zxaeir"></div>',a=o(),c=r("span"),d=v(u),n(i,"class","mc-feature-group__label__tooltip__pointer svelte-zxaeir"),n(t,"aria-hidden","true"),n(t,"class","mc-feature-group__label__tooltip svelte-zxaeir")},m(e,r){s(e,t,r),l(t,i),l(t,a),l(t,c),l(c,d)},p(e,t){1&t&&u!==(u=e[0].label+"")&&h(d,u)},d(e){e&&p(t)}}}function A(e){let t,i;return{c(){t=H("svg"),i=H("path"),n(i,"d","M12 9H4a1 1 0 010-2h8a1 1 0 010 2z"),n(t,"class","mc-feature-group__icon svelte-zxaeir"),n(t,"width","16px"),n(t,"height","16px"),n(t,"viewBox","0 0 16 16")},m(e,a){s(e,t,a),l(t,i)},d(e){e&&p(t)}}}function S(e){let t,i;return{c(){t=H("svg"),i=H("path"),n(i,"d","M13 7H9V3a1 1 0 00-2 0v4H3a1 1 0 000 2h4v4a1 1 0 002 0V9h4a1 1 0 000-2z"),n(t,"class","mc-feature-group__icon svelte-zxaeir"),n(t,"width","16px"),n(t,"height","16px"),n(t,"viewBox","0 0 16 16")},m(e,a){s(e,t,a),l(t,i)},d(e){e&&p(t)}}}function V(e){let t,i,a,d,x,f;function m(){return e[10](e[15])}return i=new j({props:{feature:e[15],a11yLabels:e[2]}}),{c(){t=r("li"),z(i.$$.fragment),a=o(),n(t,"class","svelte-zxaeir")},m(e,r){s(e,t,r),_(i,t,null),l(t,a),d=!0,x||(f=w(t,"click",y(m)),x=!0)},p(t,a){e=t;const r={};1&a&&(r.feature=e[15]),4&a&&(r.a11yLabels=e[2]),i.$set(r)},i(e){d||(c(i.$$.fragment,e),d=!0)},o(e){u(i.$$.fragment,e),d=!1},d(e){e&&p(t),k(i),x=!1,f()}}}function D(e){let t,i,a,f,m,b,v,g,h,z,_,w,y,k=e[0].icon&&F(e),L=e[3]&&N(e),H=e[0].items,j=[];for(let t=0;t<H.length;t+=1)j[t]=V(C(e,H,t));const E=e=>u(j[e],1,1,(()=>{j[e]=null}));return{c(){t=r("button"),i=r("span"),k&&k.c(),a=o(),L&&L.c(),h=o(),z=r("ul");for(let e=0;e<j.length;e+=1)j[e].c();n(i,"class","mc-feature-group__container svelte-zxaeir"),n(t,"class",f="mc-feature-group "+(e[5]?"is-selected":"")+" "+(e[3]?"is-open":"is-close")+" svelte-zxaeir"),n(t,"aria-label",m=e[0].label),n(t,"aria-expanded",b=e[3]&&e[1]),n(t,"aria-controls",v=e[0].code+"-list"),n(t,"id",g=e[0].code),n(z,"class","mc-feature-group__content is-close svelte-zxaeir"),n(z,"aria-hidden",_=!e[3]||!e[1]),n(z,"id",w=e[0].code+"-list")},m(r,o){s(r,t,o),l(t,i),k&&k.m(i,null),l(i,a),L&&L.m(i,null),s(r,h,o),s(r,z,o);for(let e=0;e<j.length;e+=1)j[e]&&j[e].m(z,null);e[11](z),y=!0},p(e,[r]){if(e[0].icon?k?k.p(e,r):(k=F(e),k.c(),k.m(i,a)):k&&(k.d(1),k=null),e[3]?L?L.p(e,r):(L=N(e),L.c(),L.m(i,null)):L&&(L.d(1),L=null),(!y||40&r&&f!==(f="mc-feature-group "+(e[5]?"is-selected":"")+" "+(e[3]?"is-open":"is-close")+" svelte-zxaeir"))&&n(t,"class",f),(!y||1&r&&m!==(m=e[0].label))&&n(t,"aria-label",m),(!y||10&r&&b!==(b=e[3]&&e[1]))&&n(t,"aria-expanded",b),(!y||1&r&&v!==(v=e[0].code+"-list"))&&n(t,"aria-controls",v),(!y||1&r&&g!==(g=e[0].code))&&n(t,"id",g),133&r){let t;for(H=e[0].items,t=0;t<H.length;t+=1){const i=C(e,H,t);j[t]?(j[t].p(i,r),c(j[t],1)):(j[t]=V(i),j[t].c(),c(j[t],1),j[t].m(z,null))}for($(),t=H.length;t<j.length;t+=1)E(t);d()}(!y||10&r&&_!==(_=!e[3]||!e[1]))&&n(z,"aria-hidden",_),(!y||1&r&&w!==(w=e[0].code+"-list"))&&n(z,"id",w)},i(e){if(!y){for(let e=0;e<H.length;e+=1)c(j[e]);y=!0}},o(e){j=j.filter(Boolean);for(let e=0;e<j.length;e+=1)u(j[e]);y=!1},d(i){i&&p(t),k&&k.d(),L&&L.d(),i&&p(h),i&&p(z),x(j,i),e[11](null)}}}function O(e){return`${e} size="1.5rem"`}function P(e,t,i){let a,r;f(e,G,(e=>i(3,a=e))),f(e,M,(e=>i(8,r=e)));let o,n,{featureGroup:s}=t,{expand:l}=t,{a11yLabels:c}=t,d=new B(m(),b()),u=!1;function p(e){var t;e.disabled||((null===(t=e.items)||void 0===t?void 0:t.length)?d.dispatch("feature-click",e):E(e.code))}return e.$$set=e=>{"featureGroup"in e&&i(0,s=e.featureGroup),"expand"in e&&i(1,l=e.expand),"a11yLabels"in e&&i(2,c=e.a11yLabels)},e.$$.update=()=>{var t,n,c,d,p,x;267&e.$$.dirty&&(t=l,n=a,c=s,i(5,u=null!==(x=(null==(d=r)?void 0:d.lv0)&&c.code===(null===(p=null==d?void 0:d.lv0)||void 0===p?void 0:p.code)&&(!d.lv1||!t||!n))&&void 0!==x&&x)),10&e.$$.dirty&&function(e,t){if(o){i(4,o.style.height="",o),i(4,o.style.transition="none",o);const a=window.getComputedStyle(o).height;o.classList.add(t&&e?"is-open":"is-close"),o.classList.remove(t&&e?"is-close":"is-open");const r=window.getComputedStyle(o).height;i(4,o.style.height=a,o),requestAnimationFrame((()=>{i(4,o.style.transition="",o),requestAnimationFrame((()=>{i(4,o.style.height=r,o)}))}));const n=()=>{i(4,o.style.height="",o),o.removeEventListener("transitionend",n)};o.addEventListener("transitionend",n)}}(l,a)},[s,l,c,a,o,u,n,p,r,function(e){L[e?"unshift":"push"]((()=>{n=e,i(6,n)}))},e=>p(e),function(e){L[e?"unshift":"push"]((()=>{o=e,i(4,o)}))}]}class I extends e{constructor(e){super(),t(this,e,P,D,i,{featureGroup:0,expand:1,a11yLabels:2},q)}}export{I as default};
 //# sourceMappingURL=sidebar-feature-group.nested.js.map

package/public/components/sidebar/sidebar-feature-group.nested.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-feature-group.nested.js","sources":["../../../src/components/sidebar/sidebar-feature-group.nested.svelte"],"sourcesContent":["<svelte:options />\n\n<script lang=\"ts\">\n  import type { FeatureGroup, Feature, A11yLabels } from './sidebar.types';\n  import FeatureComponent from './sidebar-feature.nested.svelte';\n  import {\n    isSidebarOpen,\n    selectedFeature,\n    selectFeature,\n    Selection,\n  } from './sidebar-service';\n  import { EventHandler } from '../../utilities/EventHandler';\n\n  export let featureGroup: FeatureGroup;\n  export let expand: boolean;\n  export let a11yLabels: A11yLabels;\n  let eventHandler = new EventHandler();\n  let content: HTMLElement;\n\n  $: updateSelection(expand, $isSidebarOpen, featureGroup, $selectedFeature);\n  $: updateContentCSS(expand, $isSidebarOpen);\n\n  let isSelected = false;\n\n  let label: HTMLElement;\n\n  function updateSelection(\n    isExpanded: boolean,\n    isOpen: boolean,\n    group: FeatureGroup,\n    selection?: Selection,\n  ): void {\n    isSelected =\n      (selection?.lv0 &&\n        group.code === selection?.lv0?.code &&\n        (!selection.lv1 || !isExpanded || !isOpen)) ??\n      false;\n  }\n\n  // Update the CSS programatically to have a nice animation on height between 0px and 'auto'\n  function updateContentCSS(isExpanded: boolean, isOpen: boolean): void {\n    if (content) {\n      content.style.height = '';\n      content.style.transition = 'none';\n      const startHeight = window.getComputedStyle(content).height;\n\n      content.classList.add(isOpen && isExpanded ? 'is-open' : 'is-close');\n      content.classList.remove(isOpen && isExpanded ? 'is-close' : 'is-open');\n\n      const height = window.getComputedStyle(content).height;\n      content.style.height = startHeight;\n\n      // wait until the next frame so that everything has time to update before starting the transition\n      requestAnimationFrame(() => {\n        content.style.transition = '';\n        requestAnimationFrame(() => {\n          content.style.height = height;\n        });\n      });\n\n      // Clear the saved height values after the transition\n      const handler = () => {\n        content.style.height = '';\n        content.removeEventListener('transitionend', handler);\n      };\n\n      content.addEventListener('transitionend', handler);\n    }\n  }\n\n  function generateIcon(iconname: string): string {\n    return `${iconname} size=\"1.5rem\"`;\n  }\n\n  function handleClick(feature: Feature) {\n    if (!feature.disabled) {\n      // Only select the feature if it is the last level item\n      if (feature.items?.length) {\n        eventHandler.dispatch('feature-click', feature);\n      } else {\n        selectFeature(feature.code);\n      }\n    }\n  }\n</script>\n\n<button\n  class=\"mc-feature-group {isSelected ? 'is-selected' : ''} {$isSidebarOpen\n    ? 'is-open'\n    : 'is-close'}\"\n  aria-label={featureGroup.label}\n  aria-expanded={$isSidebarOpen && expand}\n  aria-controls=\"{featureGroup.code}-list\"\n  id={featureGroup.code}\n>\n  <span class=\"mc-feature-group__container\">\n    {#if featureGroup.icon}\n      <span class=\"mc-feature-group__icon\">\n        {@html `<${generateIcon(featureGroup.icon)} />`}\n      </span>\n    {/if}\n    {#if $isSidebarOpen}\n      <span class=\"mc-feature-group__label\" bind:this={label}>\n        {featureGroup.label}\n      </span>\n      {#if label?.offsetHeight < label?.scrollHeight}\n        <div aria-hidden=\"true\" class=\"mc-feature-group__label__tooltip\">\n          <div class=\"mc-feature-group__label__tooltip__pointer\"><div /></div>\n          <span>{featureGroup.label}</span>\n        </div>\n      {/if}\n      {#if !expand}\n        <svg\n          class=\"mc-feature-group__icon\"\n          width=\"16px\"\n          height=\"16px\"\n          viewBox=\"0 0 16 16\"\n          ><path\n            d=\"M13 7H9V3a1 1 0 00-2 0v4H3a1 1 0 000 2h4v4a1 1 0 002 0V9h4a1 1 0 000-2z\"\n          /></svg\n        >\n      {:else}\n        <svg\n          class=\"mc-feature-group__icon\"\n          width=\"16px\"\n          height=\"16px\"\n          viewBox=\"0 0 16 16\"\n          ><path d=\"M12 9H4a1 1 0 010-2h8a1 1 0 010 2z\" /></svg\n        >\n      {/if}\n    {/if}\n  </span>\n</button>\n<ul\n  class=\"mc-feature-group__content is-close\"\n  aria-hidden={!$isSidebarOpen || !expand}\n  id=\"{featureGroup.code}-list\"\n  bind:this={content}\n>\n  {#each featureGroup.items as feature}\n    <li on:click|stopPropagation={() => handleClick(feature)}>\n      <FeatureComponent {feature} {a11yLabels} />\n    </li>\n  {/each}\n</ul>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import './sidebar-variables';\n\n  .mc-feature-group {\n    background: none;\n    border: none;\n    color: $color-sidebar-text-color;\n    cursor: pointer;\n    font-size: inherit;\n    font-family: inherit;\n    text-align: initial;\n    margin: 0;\n    padding: 0;\n    overflow: hidden;\n\n    &__icon {\n      fill: $color-sidebar-icon;\n      height: 1.5rem;\n      width: 1.5rem;\n    }\n\n    &__container {\n      display: flex;\n      align-items: center;\n      margin: 5px 0;\n      padding: 8px 0px;\n      @include transition(margin 300ms ease-in-out);\n    }\n\n    &__label {\n      margin: 0 8px;\n      width: 200px;\n      min-width: 200px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      line-clamp: 2;\n      -webkit-box-orient: vertical;\n\n      &__tooltip {\n        opacity: 0;\n        transition: 0s opacity;\n        background-color: $color-sidebar-divider-background;\n        border: 1px solid $color-sidebar-text-color;\n        border-radius: 4px;\n        position: absolute;\n        pointer-events: none;\n        left: calc(100% - 16px);\n        padding: 8px 16px;\n        width: 188px;\n\n        &__pointer {\n          position: absolute;\n          top: 50%;\n          left: -8px;\n          top: calc(50% - 6px);\n          width: 0;\n          height: 0;\n          border-top: 6px solid transparent;\n          border-bottom: 6px solid transparent;\n          border-right: 8px solid white;\n\n          & div {\n            position: relative;\n            top: -6px;\n            left: 2px;\n            width: 0;\n            height: 0;\n            border-top: 6px solid transparent;\n            border-bottom: 6px solid transparent;\n            border-right: 8px solid $color-sidebar-divider-background;\n          }\n        }\n      }\n\n      &:hover + .mc-feature-group__label__tooltip {\n        opacity: 1;\n        transition-delay: 1s;\n      }\n    }\n\n    &__content {\n      overflow: hidden;\n      @include transition(height 300ms ease-in-out);\n      &.is-close {\n        height: 0;\n      }\n\n      &.is-open {\n        height: auto;\n      }\n    }\n\n    &.is-selected {\n      background: $color-sidebar-feature-selected-background;\n    }\n\n    &.is-close {\n      .mc-feature-group__container {\n        margin: 0 20px;\n        width: 24px;\n      }\n    }\n\n    &.is-open {\n      .mc-feature-group__container {\n        margin: 0 32px;\n      }\n    }\n\n    &:hover {\n      background: $color-sidebar-feature-hover-background;\n    }\n\n    &:focus-visible {\n      box-shadow: none;\n      border: none;\n      outline: none;\n\n      .mc-feature-group__container {\n        box-shadow: none;\n        border: none;\n        border-radius: 6px;\n        outline: 1px solid #0b96cc;\n      }\n    }\n  }\n\n  ul,\n  li {\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    width: 100%;\n  }\n\n  ul {\n    align-items: start;\n    flex-direction: column;\n    justify-content: center;\n\n    li {\n      flex-direction: column;\n      box-sizing: border-box;\n    }\n  }\n</style>\n"],"names":["generateIcon","ctx","icon","insert","target","span","anchor","innerHTML","raw_value","t0_value","label","if_block0","offsetHeight","scrollHeight","create_if_block_2","create_if_block_1","dirty","set_data","t0","t1_value","div2","append","div1","t1","svg","path","li","create_if_block_3","create_if_block","each_value","items","length","i","attr","button","button_aria_label_value","button_aria_expanded_value","button_aria_controls_value","code","button_id_value","ul","ul_aria_hidden_value","ul_id_value","current","each_blocks","iconname","content","featureGroup","$$props","expand","a11yLabels","eventHandler","EventHandler","isSelected","handleClick","feature","disabled","_a","dispatch","selectFeature","isExpanded","isOpen","group","selection","$isSidebarOpen","_b","$selectedFeature","lv0","lv1","$$invalidate","style","height","transition","startHeight","window","getComputedStyle","classList","add","remove","requestAnimationFrame","handler","removeEventListener","addEventListener","updateContentCSS","$$value"],"mappings":"gxHAkGmBA,EAAaC,EAAY,GAACC,8FADvCC,EAEMC,EAAAC,EAAAC,yCADON,EAAaC,EAAY,GAACC,cAAIG,EAAAE,UAAAC,+CAKxCC,EAAAR,KAAaS,MAAK,GAEhBC,EAAAV,EAAO,IAAAW,aAAeX,MAAOY,cAAYC,EAAAb,0BAMxCA,EAAM,KAAAc,gJATZZ,EAEMC,EAAAC,EAAAC,0EADH,EAAAU,GAAAP,KAAAA,EAAAR,KAAaS,MAAK,KAAAO,EAAAC,EAAAT,GAEhBR,EAAO,IAAAW,aAAeX,MAAOY,2OAGvBM,EAAAlB,KAAaS,MAAK,oRAF3BP,EAGKC,EAAAgB,EAAAd,GAFHe,EAAmED,EAAAE,UACnED,EAAgCD,EAAAf,kBAAzB,EAAAW,GAAAG,KAAAA,EAAAlB,KAAaS,MAAK,KAAAO,EAAAM,EAAAJ,yPAc3BhB,EAMAC,EAAAoB,EAAAlB,GADGe,EAA+CG,EAAAC,8RAflDtB,EAQAC,EAAAoB,EAAAlB,GAHGe,EAECG,EAAAC,qNAqBRtB,EAEIC,EAAAsB,EAAApB,qRA9CCK,EAAAV,KAAaC,MAAIyB,EAAA1B,KAKjBA,EAAc,IAAA2B,EAAA3B,GAsCd4B,EAAA5B,KAAa6B,2BAAlBC,OAAIC,GAAA,0QApDmB/B,EAAU,GAAG,cAAgB,SAAKA,EAAC,GACxD,UACA,YAAU,kBACFgC,EAAAC,EAAA,aAAAC,EAAAlC,KAAaS,OACVuB,EAAAC,EAAA,gBAAAE,EAAAnC,MAAkBA,EAAM,IACvBgC,EAAAC,EAAA,gBAAAG,EAAApC,KAAaqC,KAAI,SAC7BL,EAAAC,EAAA,KAAAK,EAAAtC,KAAaqC,sEA0CHL,EAAAO,EAAA,cAAAC,GAAAxC,OAAmBA,EAAM,IAClCgC,EAAAO,EAAA,KAAAE,EAAAzC,KAAaqC,KAAI,iBAlDxBnC,EA8CQC,EAAA8B,EAAA5B,GArCNe,EAoCMa,EAAA7B,iDAERF,EAWIC,EAAAoC,EAAAlC,+EAhDKL,KAAaC,2DAKbD,EAAc,mGAdIA,EAAU,GAAG,cAAgB,SAAKA,EAAC,GACxD,UACA,YAAU,qCACF0C,GAAA,EAAA3B,GAAAmB,KAAAA,EAAAlC,KAAaS,+BACViC,GAAA,GAAA3B,GAAAoB,KAAAA,EAAAnC,MAAkBA,EAAM,+BACvB0C,GAAA,EAAA3B,GAAAqB,KAAAA,EAAApC,KAAaqC,KAAI,oCAC7BK,GAAA,EAAA3B,GAAAuB,KAAAA,EAAAtC,KAAaqC,qCA8CVT,EAAA5B,KAAa6B,cAAlBC,OAAIC,GAAA,EAAA,yGAAJD,OAAIC,EAAAY,EAAAb,OAAAC,GAAA,aAJQW,GAAA,GAAA3B,GAAAyB,KAAAA,GAAAxC,OAAmBA,EAAM,6BAClC0C,GAAA,EAAA3B,GAAA0B,KAAAA,EAAAzC,KAAaqC,KAAI,oDAGpBP,OAAIC,GAAA,wJArEG,SAAAhC,EAAa6C,YACVA,0FAtDRC,EAOApC,gBAXOqC,GAA0BC,UAC1BC,GAAeD,cACfE,GAAsBF,EAC7BG,MAAmBC,EAMnBC,GAAa,EAoDR,SAAAC,EAAYC,SACdA,EAAQC,YAEjB,QAAAC,EAAUF,EAAQzB,aAAlB,IAAA2B,SAAAA,EAAyB1B,QACjBoB,EAAaO,SAAS,gBAAiBH,GAEvCI,EAAcJ,EAAQjB,0JAtDnB,IACPsB,EACAC,EACAC,EACAC,uBAHAH,EARiBX,EASjBY,EATyBG,EAUzBF,EAVyCf,MAazCM,EAGJ,QAFAY,GAAOF,OAHHA,EAXuDG,UAcpDH,EAAWI,MACVL,EAAMxB,QAAd,QAAAmB,EAAuBM,eAAAA,EAAWI,eAAlCV,SAAAA,EAAuCnB,SAC7ByB,EAAUK,MAAQR,IAAeC,cAA3CI,GAAAA,4BAK4BL,EAAqBC,MACzCf,EAAO,CACTuB,EAAA,EAAAvB,EAAQwB,MAAMC,OAAS,GAAEzB,GACzBuB,EAAA,EAAAvB,EAAQwB,MAAME,WAAa,OAAM1B,GAC3B,MAAA2B,EAAcC,OAAOC,iBAAiB7B,GAASyB,OAErDzB,EAAQ8B,UAAUC,IAAIhB,GAAUD,EAAa,UAAY,YACzDd,EAAQ8B,UAAUE,OAAOjB,GAAUD,EAAa,WAAa,WAEvD,MAAAW,EAASG,OAAOC,iBAAiB7B,GAASyB,OAChDF,EAAA,EAAAvB,EAAQwB,MAAMC,OAASE,EAAW3B,GAGlCiC,uBAAqB,KACnBV,EAAA,EAAAvB,EAAQwB,MAAME,WAAa,GAAE1B,GAC7BiC,uBAAqB,KACnBV,EAAA,EAAAvB,EAAQwB,MAAMC,OAASA,EAAMzB,EAAA,aAK3BkC,EAAO,KACXX,EAAA,EAAAvB,EAAQwB,MAAMC,OAAS,GAAEzB,GACzBA,EAAQmC,oBAAoB,gBAAiBD,EAAO,EAGtDlC,EAAQoC,iBAAiB,gBAAiBF,IA9C3CG,CAAiBlC,EAAQe,+DAkFyBtD,EAAK0E,aAsCpB7B,GAAAD,EAAYC,2CAHvCT,EAAOsC"}
+{"version":3,"file":"sidebar-feature-group.nested.js","sources":["../../../src/components/sidebar/sidebar-feature-group.nested.svelte"],"sourcesContent":["<svelte:options />\n\n<script lang=\"ts\">\n  import type {\n    FeatureGroup,\n    Feature,\n    A11yLabels,\n    Selection,\n  } from './sidebar.types';\n  import FeatureComponent from './sidebar-feature.nested.svelte';\n  import {\n    isSidebarOpen,\n    selectedFeature,\n    selectFeature,\n  } from '../../utilities/sidebar-service';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import {\n    get_current_component,\n    createEventDispatcher,\n  } from 'svelte/internal';\n\n  export let featureGroup: FeatureGroup;\n  export let expand: boolean;\n  export let a11yLabels: A11yLabels;\n  let eventHandler = new EventHandler(\n    get_current_component(),\n    createEventDispatcher(),\n  );\n  let content: HTMLElement;\n\n  $: updateSelection(expand, $isSidebarOpen, featureGroup, $selectedFeature);\n  $: updateContentCSS(expand, $isSidebarOpen);\n\n  let isSelected = false;\n\n  let label: HTMLElement;\n\n  function updateSelection(\n    isExpanded: boolean,\n    isOpen: boolean,\n    group: FeatureGroup,\n    selection?: Selection,\n  ): void {\n    isSelected =\n      (selection?.lv0 &&\n        group.code === selection?.lv0?.code &&\n        (!selection.lv1 || !isExpanded || !isOpen)) ??\n      false;\n  }\n\n  // Update the CSS programatically to have a nice animation on height between 0px and 'auto'\n  function updateContentCSS(isExpanded: boolean, isOpen: boolean): void {\n    if (content) {\n      content.style.height = '';\n      content.style.transition = 'none';\n      const startHeight = window.getComputedStyle(content).height;\n\n      content.classList.add(isOpen && isExpanded ? 'is-open' : 'is-close');\n      content.classList.remove(isOpen && isExpanded ? 'is-close' : 'is-open');\n\n      const height = window.getComputedStyle(content).height;\n      content.style.height = startHeight;\n\n      // wait until the next frame so that everything has time to update before starting the transition\n      requestAnimationFrame(() => {\n        content.style.transition = '';\n        requestAnimationFrame(() => {\n          content.style.height = height;\n        });\n      });\n\n      // Clear the saved height values after the transition\n      const handler = () => {\n        content.style.height = '';\n        content.removeEventListener('transitionend', handler);\n      };\n\n      content.addEventListener('transitionend', handler);\n    }\n  }\n\n  function generateIcon(iconname: string): string {\n    return `${iconname} size=\"1.5rem\"`;\n  }\n\n  function handleClick(feature: Feature) {\n    if (!feature.disabled) {\n      // Only select the feature if it is the last level item\n      if (feature.items?.length) {\n        eventHandler.dispatch('feature-click', feature);\n      } else {\n        selectFeature(feature.code);\n      }\n    }\n  }\n</script>\n\n<button\n  class=\"mc-feature-group {isSelected ? 'is-selected' : ''} {$isSidebarOpen\n    ? 'is-open'\n    : 'is-close'}\"\n  aria-label={featureGroup.label}\n  aria-expanded={$isSidebarOpen && expand}\n  aria-controls=\"{featureGroup.code}-list\"\n  id={featureGroup.code}\n>\n  <span class=\"mc-feature-group__container\">\n    {#if featureGroup.icon}\n      <span class=\"mc-feature-group__icon\">\n        {@html `<${generateIcon(featureGroup.icon)} />`}\n      </span>\n    {/if}\n    {#if $isSidebarOpen}\n      <span class=\"mc-feature-group__label\" bind:this={label}>\n        {featureGroup.label}\n      </span>\n      {#if label?.offsetHeight < label?.scrollHeight}\n        <div aria-hidden=\"true\" class=\"mc-feature-group__label__tooltip\">\n          <div class=\"mc-feature-group__label__tooltip__pointer\"><div /></div>\n          <span>{featureGroup.label}</span>\n        </div>\n      {/if}\n      {#if !expand}\n        <svg\n          class=\"mc-feature-group__icon\"\n          width=\"16px\"\n          height=\"16px\"\n          viewBox=\"0 0 16 16\"\n          ><path\n            d=\"M13 7H9V3a1 1 0 00-2 0v4H3a1 1 0 000 2h4v4a1 1 0 002 0V9h4a1 1 0 000-2z\"\n          /></svg\n        >\n      {:else}\n        <svg\n          class=\"mc-feature-group__icon\"\n          width=\"16px\"\n          height=\"16px\"\n          viewBox=\"0 0 16 16\"\n          ><path d=\"M12 9H4a1 1 0 010-2h8a1 1 0 010 2z\" /></svg\n        >\n      {/if}\n    {/if}\n  </span>\n</button>\n<ul\n  class=\"mc-feature-group__content is-close\"\n  aria-hidden={!$isSidebarOpen || !expand}\n  id=\"{featureGroup.code}-list\"\n  bind:this={content}\n>\n  {#each featureGroup.items as feature}\n    <li on:click|stopPropagation={() => handleClick(feature)}>\n      <FeatureComponent {feature} {a11yLabels} />\n    </li>\n  {/each}\n</ul>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import './_c.sidebar';\n\n  .mc-feature-group {\n    background: none;\n    border: none;\n    color: $color-sidebar-text-color;\n    cursor: pointer;\n    font-size: inherit;\n    font-family: inherit;\n    text-align: initial;\n    margin: 0;\n    padding: 0;\n    overflow: hidden;\n\n    &__icon {\n      fill: $color-sidebar-icon;\n      height: 1.5rem;\n      width: 1.5rem;\n    }\n\n    &__container {\n      display: flex;\n      align-items: center;\n      margin: 5px 0;\n      padding: 8px 0px;\n      @include transition(margin 300ms ease-in-out);\n    }\n\n    &__label {\n      margin: 0 8px;\n      width: 200px;\n      min-width: 200px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      line-clamp: 2;\n      -webkit-box-orient: vertical;\n\n      &__tooltip {\n        opacity: 0;\n        transition: 0s opacity;\n        background-color: $color-sidebar-divider-background;\n        border: 1px solid $color-sidebar-text-color;\n        border-radius: 4px;\n        position: absolute;\n        pointer-events: none;\n        left: calc(100% - 16px);\n        padding: 8px 16px;\n        width: 188px;\n\n        &__pointer {\n          position: absolute;\n          top: 50%;\n          left: -8px;\n          top: calc(50% - 6px);\n          width: 0;\n          height: 0;\n          border-top: 6px solid transparent;\n          border-bottom: 6px solid transparent;\n          border-right: 8px solid white;\n\n          & div {\n            position: relative;\n            top: -6px;\n            left: 2px;\n            width: 0;\n            height: 0;\n            border-top: 6px solid transparent;\n            border-bottom: 6px solid transparent;\n            border-right: 8px solid $color-sidebar-divider-background;\n          }\n        }\n      }\n\n      &:hover + .mc-feature-group__label__tooltip {\n        opacity: 1;\n        transition-delay: 1s;\n      }\n    }\n\n    &__content {\n      overflow: hidden;\n      @include transition(height 300ms ease-in-out);\n      &.is-close {\n        height: 0;\n      }\n\n      &.is-open {\n        height: auto;\n      }\n    }\n\n    &.is-selected {\n      background: $color-sidebar-feature-selected-background;\n    }\n\n    &.is-close {\n      .mc-feature-group__container {\n        margin: 0 20px;\n        width: 24px;\n      }\n    }\n\n    &.is-open {\n      .mc-feature-group__container {\n        margin: 0 32px;\n      }\n    }\n\n    &:hover {\n      background: $color-sidebar-feature-hover-background;\n    }\n\n    &:focus-visible {\n      box-shadow: none;\n      border: none;\n      outline: none;\n\n      .mc-feature-group__container {\n        box-shadow: none;\n        border: none;\n        border-radius: 6px;\n        outline: 1px solid #0b96cc;\n      }\n    }\n  }\n\n  ul,\n  li {\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    width: 100%;\n  }\n\n  ul {\n    align-items: start;\n    flex-direction: column;\n    justify-content: center;\n\n    li {\n      flex-direction: column;\n      box-sizing: border-box;\n    }\n  }\n</style>\n"],"names":["generateIcon","ctx","icon","insert","target","span","anchor","innerHTML","raw_value","t0_value","label","if_block0","offsetHeight","scrollHeight","create_if_block_2","create_if_block_1","dirty","set_data","t0","t1_value","div2","append","div1","t1","svg","path","li","create_if_block_3","create_if_block","each_value","items","length","i","attr","button","button_aria_label_value","button_aria_expanded_value","button_aria_controls_value","code","button_id_value","ul","ul_aria_hidden_value","ul_id_value","current","each_blocks","iconname","content","featureGroup","$$props","expand","a11yLabels","eventHandler","EventHandler","get_current_component","createEventDispatcher","isSelected","handleClick","feature","disabled","_a","dispatch","selectFeature","isExpanded","isOpen","group","selection","$isSidebarOpen","_b","$selectedFeature","lv0","lv1","$$invalidate","style","height","transition","startHeight","window","getComputedStyle","classList","add","remove","requestAnimationFrame","handler","removeEventListener","addEventListener","updateContentCSS","$$value"],"mappings":"8xHA6GmBA,EAAaC,EAAY,GAACC,8FADvCC,EAEMC,EAAAC,EAAAC,yCADON,EAAaC,EAAY,GAACC,cAAIG,EAAAE,UAAAC,+CAKxCC,EAAAR,KAAaS,MAAK,GAEhBC,EAAAV,EAAO,IAAAW,aAAeX,MAAOY,cAAYC,EAAAb,0BAMxCA,EAAM,KAAAc,gJATZZ,EAEMC,EAAAC,EAAAC,0EADH,EAAAU,GAAAP,KAAAA,EAAAR,KAAaS,MAAK,KAAAO,EAAAC,EAAAT,GAEhBR,EAAO,IAAAW,aAAeX,MAAOY,2OAGvBM,EAAAlB,KAAaS,MAAK,oRAF3BP,EAGKC,EAAAgB,EAAAd,GAFHe,EAAmED,EAAAE,UACnED,EAAgCD,EAAAf,kBAAzB,EAAAW,GAAAG,KAAAA,EAAAlB,KAAaS,MAAK,KAAAO,EAAAM,EAAAJ,yPAc3BhB,EAMAC,EAAAoB,EAAAlB,GADGe,EAA+CG,EAAAC,8RAflDtB,EAQAC,EAAAoB,EAAAlB,GAHGe,EAECG,EAAAC,qNAqBRtB,EAEIC,EAAAsB,EAAApB,qRA9CCK,EAAAV,KAAaC,MAAIyB,EAAA1B,KAKjBA,EAAc,IAAA2B,EAAA3B,GAsCd4B,EAAA5B,KAAa6B,2BAAlBC,OAAIC,GAAA,0QApDmB/B,EAAU,GAAG,cAAgB,SAAKA,EAAC,GACxD,UACA,YAAU,kBACFgC,EAAAC,EAAA,aAAAC,EAAAlC,KAAaS,OACVuB,EAAAC,EAAA,gBAAAE,EAAAnC,MAAkBA,EAAM,IACvBgC,EAAAC,EAAA,gBAAAG,EAAApC,KAAaqC,KAAI,SAC7BL,EAAAC,EAAA,KAAAK,EAAAtC,KAAaqC,sEA0CHL,EAAAO,EAAA,cAAAC,GAAAxC,OAAmBA,EAAM,IAClCgC,EAAAO,EAAA,KAAAE,EAAAzC,KAAaqC,KAAI,iBAlDxBnC,EA8CQC,EAAA8B,EAAA5B,GArCNe,EAoCMa,EAAA7B,iDAERF,EAWIC,EAAAoC,EAAAlC,+EAhDKL,KAAaC,2DAKbD,EAAc,mGAdIA,EAAU,GAAG,cAAgB,SAAKA,EAAC,GACxD,UACA,YAAU,qCACF0C,GAAA,EAAA3B,GAAAmB,KAAAA,EAAAlC,KAAaS,+BACViC,GAAA,GAAA3B,GAAAoB,KAAAA,EAAAnC,MAAkBA,EAAM,+BACvB0C,GAAA,EAAA3B,GAAAqB,KAAAA,EAAApC,KAAaqC,KAAI,oCAC7BK,GAAA,EAAA3B,GAAAuB,KAAAA,EAAAtC,KAAaqC,qCA8CVT,EAAA5B,KAAa6B,cAAlBC,OAAIC,GAAA,EAAA,yGAAJD,OAAIC,EAAAY,EAAAb,OAAAC,GAAA,aAJQW,GAAA,GAAA3B,GAAAyB,KAAAA,GAAAxC,OAAmBA,EAAM,6BAClC0C,GAAA,EAAA3B,GAAA0B,KAAAA,EAAAzC,KAAaqC,KAAI,oDAGpBP,OAAIC,GAAA,wJArEG,SAAAhC,EAAa6C,YACVA,0FAtDRC,EAOApC,gBAdOqC,GAA0BC,UAC1BC,GAAeD,cACfE,GAAsBF,EAC7BG,EAAmB,IAAAC,EACrBC,IACAC,KAOEC,GAAa,EAoDR,SAAAC,EAAYC,SACdA,EAAQC,YAEjB,QAAAC,EAAUF,EAAQ3B,aAAlB,IAAA6B,SAAAA,EAAyB5B,QACjBoB,EAAaS,SAAS,gBAAiBH,GAEvCI,EAAcJ,EAAQnB,0JAtDnB,IACPwB,EACAC,EACAC,EACAC,uBAHAH,EARiBb,EASjBc,EATyBG,EAUzBF,EAVyCjB,MAazCQ,EAGJ,QAFAY,GAAOF,OAHHA,EAXuDG,UAcpDH,EAAWI,MACVL,EAAM1B,QAAd,QAAAqB,EAAuBM,eAAAA,EAAWI,eAAlCV,SAAAA,EAAuCrB,SAC7B2B,EAAUK,MAAQR,IAAeC,cAA3CI,GAAAA,4BAK4BL,EAAqBC,MACzCjB,EAAO,CACTyB,EAAA,EAAAzB,EAAQ0B,MAAMC,OAAS,GAAE3B,GACzByB,EAAA,EAAAzB,EAAQ0B,MAAME,WAAa,OAAM5B,GAC3B,MAAA6B,EAAcC,OAAOC,iBAAiB/B,GAAS2B,OAErD3B,EAAQgC,UAAUC,IAAIhB,GAAUD,EAAa,UAAY,YACzDhB,EAAQgC,UAAUE,OAAOjB,GAAUD,EAAa,WAAa,WAEvD,MAAAW,EAASG,OAAOC,iBAAiB/B,GAAS2B,OAChDF,EAAA,EAAAzB,EAAQ0B,MAAMC,OAASE,EAAW7B,GAGlCmC,uBAAqB,KACnBV,EAAA,EAAAzB,EAAQ0B,MAAME,WAAa,GAAE5B,GAC7BmC,uBAAqB,KACnBV,EAAA,EAAAzB,EAAQ0B,MAAMC,OAASA,EAAM3B,EAAA,aAK3BoC,EAAO,KACXX,EAAA,EAAAzB,EAAQ0B,MAAMC,OAAS,GAAE3B,GACzBA,EAAQqC,oBAAoB,gBAAiBD,EAAO,EAGtDpC,EAAQsC,iBAAiB,gBAAiBF,IA9C3CG,CAAiBpC,EAAQiB,+DAkFyBxD,EAAK4E,aAsCpB7B,GAAAD,EAAYC,2CAHvCX,EAAOwC"}

package/public/{adeo/components/sidebar-feature-group → components/sidebar}/sidebar-feature-group.nested.svelte

@@ -1,20 +1,31 @@
 <svelte:options />
 
 <script lang="ts">
-  import type { FeatureGroup, Feature, A11yLabels } from './sidebar.types';
+  import type {
+    FeatureGroup,
+    Feature,
+    A11yLabels,
+    Selection,
+  } from './sidebar.types';
   import FeatureComponent from './sidebar-feature.nested.svelte';
   import {
     isSidebarOpen,
     selectedFeature,
     selectFeature,
-    Selection,
-  } from './sidebar-service';
+  } from '../../utilities/sidebar-service';
   import { EventHandler } from '../../utilities/EventHandler';
+  import {
+    get_current_component,
+    createEventDispatcher,
+  } from 'svelte/internal';
 
   export let featureGroup: FeatureGroup;
   export let expand: boolean;
   export let a11yLabels: A11yLabels;
-  let eventHandler = new EventHandler();
+  let eventHandler = new EventHandler(
+    get_current_component(),
+    createEventDispatcher(),
+  );
   let content: HTMLElement;
 
   $: updateSelection(expand, $isSidebarOpen, featureGroup, $selectedFeature);
@@ -146,7 +157,7 @@
 
 <style lang="scss">
   @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import './sidebar-variables';
+  @import './_c.sidebar';
 
   .mc-feature-group {
     background: none;

package/public/components/sidebar/sidebar-feature.nested.js

@@ -1,2 +1,2 @@
-import{E as e,i as a,s as t,F as i,P as s,b as l,n,o as d,ab as o,H as r,e as c,G as b,d as p,t as u,g as h,j as v,k as f}from"../../index-52f16292.js";import{i as m,s as x}from"../../sidebar-service-293d79ef.js";function _(e){i(e,"svelte-1hca6n9",".mc-sidebar-feature.svelte-1hca6n9.svelte-1hca6n9{font-size:16px;min-width:200px;cursor:pointer;-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;text-decoration:none;color:#191919;line-height:22px;overflow:hidden}.mc-sidebar-feature__container.svelte-1hca6n9.svelte-1hca6n9{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;padding-top:8px;padding-bottom:8px}.mc-sidebar-feature__container.svelte-1hca6n9 span.svelte-1hca6n9{max-width:200px;min-width:200px}.mc-sidebar-feature__icon.svelte-1hca6n9.svelte-1hca6n9{fill:#191919}.mc-sidebar-feature__icon-disabled.svelte-1hca6n9.svelte-1hca6n9{fill:#6a7081}.mc-sidebar-feature__label.svelte-1hca6n9.svelte-1hca6n9{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:8px;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.mc-sidebar-feature__label__tooltip.svelte-1hca6n9.svelte-1hca6n9{opacity:0;-webkit-transition:0s opacity;-o-transition:0s opacity;transition:0s opacity;background-color:#b3b3b3;border:1px solid #191919;border-radius:4px;position:absolute;pointer-events:none;left:calc(100% - 16px);padding:8px 16px;width:188px}.mc-sidebar-feature__label__tooltip__pointer.svelte-1hca6n9.svelte-1hca6n9{position:absolute;top:50%;left:-8px;top:calc(50% - 6px);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid #191919}.mc-sidebar-feature__label__tooltip__pointer.svelte-1hca6n9 div.svelte-1hca6n9{position:relative;top:-6px;left:2px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid #b3b3b3}.mc-sidebar-feature__label.svelte-1hca6n9:hover+.mc-sidebar-feature__label__tooltip.svelte-1hca6n9{opacity:1;-webkit-transition-delay:1s;-o-transition-delay:1s;transition-delay:1s}.mc-sidebar-feature__icon.svelte-1hca6n9.svelte-1hca6n9{margin-right:8px}.mc-sidebar-feature.is-selected.svelte-1hca6n9.svelte-1hca6n9{background:#cfd2d8}.mc-sidebar-feature.is-close.svelte-1hca6n9.svelte-1hca6n9{-o-transition:padding 300ms ease-in-out;-webkit-transition:padding 300ms ease-in-out;transition:padding 300ms ease-in-out;padding:0px 0px}.mc-sidebar-feature.is-close.svelte-1hca6n9 .mc-sidebar-feature__container.svelte-1hca6n9{-o-transition:padding-left 300ms ease-in-out;-webkit-transition:padding-left 300ms ease-in-out;transition:padding-left 300ms ease-in-out;padding-left:20px;width:24px}.mc-sidebar-feature.is-open.svelte-1hca6n9.svelte-1hca6n9{-o-transition:padding 300ms ease-in-out;-webkit-transition:padding 300ms ease-in-out;transition:padding 300ms ease-in-out;padding:0px 32px}.mc-sidebar-feature.is-open.svelte-1hca6n9 .mc-sidebar-feature__container.svelte-1hca6n9{-o-transition:padding-left 300ms ease-in-out;-webkit-transition:padding-left 300ms ease-in-out;transition:padding-left 300ms ease-in-out;padding-left:32px}.mc-sidebar-feature.is-disabled.svelte-1hca6n9.svelte-1hca6n9{color:#6a7081;fill:#6a7081}.mc-sidebar-feature.svelte-1hca6n9.svelte-1hca6n9:hover{background:#b3b7c1}.mc-sidebar-feature.svelte-1hca6n9.svelte-1hca6n9:focus-visible{-webkit-box-shadow:none;box-shadow:none;border:none;outline:none}.mc-sidebar-feature.svelte-1hca6n9:focus-visible .mc-sidebar-feature__container.svelte-1hca6n9{-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}")}function g(e){let a,t,i,s,n,o,r,m,x,_,g,w,k,y,$=e[0].label+"";return{c(){a=c("span"),t=c("div"),i=b("svg"),s=b("g"),n=b("path"),o=b("defs"),r=b("clipPath"),m=b("path"),x=p(),_=c("span"),g=u($),h(n,"fill-rule","evenodd"),h(n,"d","M8 2a3 3 0 00-3 3v1H4a1 1 0 00-1 1v6a1 1 0 001 1h8a1 1 0 001-1V7a1 1 0 00-1-1h-1V5a3 3 0 00-3-3zm1 4V5a1 1 0 10-2 0v1h2zm-4 6V8h6v4H5z"),h(s,"clip-path","url(#a)"),h(m,"d","M0 0h16v16H0z"),h(r,"id","a"),h(i,"class","mc-sidebar-feature__icon-disabled svelte-1hca6n9"),h(i,"width","16px"),h(i,"height","16px"),h(i,"viewBox","0 0 16 16"),h(_,"class","svelte-1hca6n9"),h(t,"class","mc-sidebar-feature__container svelte-1hca6n9"),h(a,"aria-label",w=e[0].label),h(a,"aria-disabled","true"),h(a,"class",k="mc-sidebar-feature "+(e[2]?"is-selected":"")+" "+(e[1]?"is-open":"is-close")+" is-disabled svelte-1hca6n9"),h(a,"id",y=e[0].code)},m(e,d){l(e,a,d),v(a,t),v(t,i),v(i,s),v(s,n),v(i,o),v(o,r),v(r,m),v(t,x),v(t,_),v(_,g)},p(e,t){1&t&&$!==($=e[0].label+"")&&f(g,$),1&t&&w!==(w=e[0].label)&&h(a,"aria-label",w),6&t&&k!==(k="mc-sidebar-feature "+(e[2]?"is-selected":"")+" "+(e[1]?"is-open":"is-close")+" is-disabled svelte-1hca6n9")&&h(a,"class",k),1&t&&y!==(y=e[0].code)&&h(a,"id",y)},d(e){e&&d(a)}}}function w(e){let a,t,i,s,n,o,r,b,m,x,_,g=e[0].label+"",w=e[5]&&k(e),$="_blank"===e[0].embedded&&y();return{c(){a=c("a"),t=c("div"),i=c("span"),s=u(g),n=p(),w&&w.c(),o=p(),$&&$.c(),h(i,"class","mc-sidebar-feature__label svelte-1hca6n9"),h(t,"class","mc-sidebar-feature__container svelte-1hca6n9"),h(a,"aria-label",r=""+(e[0].label+e[3])),h(a,"href",b=e[0].href??"javascript:void(null)"),h(a,"target",m=e[0].embedded),h(a,"class",x="mc-sidebar-feature "+(e[2]?"is-selected":"")+" "+(e[1]?"is-open":"is-close")+" svelte-1hca6n9"),h(a,"id",_=e[0].code)},m(d,r){l(d,a,r),v(a,t),v(t,i),v(i,s),e[8](i),v(t,n),w&&w.m(t,null),v(t,o),$&&$.m(t,null)},p(e,i){1&i&&g!==(g=e[0].label+"")&&f(s,g),e[5]?w?w.p(e,i):(w=k(e),w.c(),w.m(t,o)):w&&(w.d(1),w=null),"_blank"===e[0].embedded?$||($=y(),$.c(),$.m(t,null)):$&&($.d(1),$=null),9&i&&r!==(r=""+(e[0].label+e[3]))&&h(a,"aria-label",r),1&i&&b!==(b=e[0].href??"javascript:void(null)")&&h(a,"href",b),1&i&&m!==(m=e[0].embedded)&&h(a,"target",m),6&i&&x!==(x="mc-sidebar-feature "+(e[2]?"is-selected":"")+" "+(e[1]?"is-open":"is-close")+" svelte-1hca6n9")&&h(a,"class",x),1&i&&_!==(_=e[0].code)&&h(a,"id",_)},d(t){t&&d(a),e[8](null),w&&w.d(),$&&$.d()}}}function k(e){let a,t,i,s,n,o=e[0].label+"";return{c(){a=c("div"),t=c("div"),t.innerHTML='<div class="svelte-1hca6n9"></div>',i=p(),s=c("span"),n=u(o),h(t,"class","mc-sidebar-feature__label__tooltip__pointer svelte-1hca6n9"),h(s,"class","svelte-1hca6n9"),h(a,"aria-hidden","true"),h(a,"class","mc-sidebar-feature__label__tooltip svelte-1hca6n9")},m(e,d){l(e,a,d),v(a,t),v(a,i),v(a,s),v(s,n)},p(e,a){1&a&&o!==(o=e[0].label+"")&&f(n,o)},d(e){e&&d(a)}}}function y(e){let a,t;return{c(){a=b("svg"),t=b("path"),h(t,"fill-rule","evenodd"),h(t,"d","M9 2a1 1 0 000 2h1.586L6.293 8.293a1 1 0 001.414 1.414L12 5.414V7a1 1 0 102 0V3a1 1 0 00-1-1H9zM3 4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1v-2a1 1 0 10-2 0v1H4V6h1a1 1 0 000-2H3z"),h(a,"class","mc-sidebar-feature__icon svelte-1hca6n9"),h(a,"width","16px"),h(a,"height","16px"),h(a,"viewBox","0 0 16 16")},m(e,i){l(e,a,i),v(a,t)},d(e){e&&d(a)}}}function $(e){let a;function t(e,a){return e[0].disabled?g:w}let i=t(e),o=i(e);return{c(){o.c(),a=s()},m(e,t){o.m(e,t),l(e,a,t)},p(e,[s]){i===(i=t(e))&&o?o.p(e,s):(o.d(1),o=i(e),o&&(o.c(),o.m(a.parentNode,a)))},i:n,o:n,d(e){o.d(e),e&&d(a)}}}function H(e,a,t){let i,s;o(e,m,(e=>t(1,i=e))),o(e,x,(e=>t(7,s=e)));let l,n,d,{feature:c}=a,{a11yLabels:b}=a,p=!1;return e.$$set=e=>{"feature"in e&&t(0,c=e.feature),"a11yLabels"in e&&t(6,b=e.a11yLabels)},e.$$.update=()=>{129&e.$$.dirty&&function(e,a){var i,s,l;t(2,p=null!==(l=(null==a?void 0:a.lv1)&&e.code===(null===(i=null==a?void 0:a.lv1)||void 0===i?void 0:i.code)||(null==a?void 0:a.lv2)&&e.code===(null===(s=null==a?void 0:a.lv2)||void 0===s?void 0:s.code))&&void 0!==l&&l)}(c,s),65&e.$$.dirty&&function(e,a){a.embedded?t(3,l=(null==e?void 0:e["external-link-suffix"])?` (${e["external-link-suffix"]})`:" (link to a new window)"):t(3,l="")}(b,c),2&e.$$.dirty&&setTimeout((()=>{t(5,d=(null==n?void 0:n.offsetHeight)<(null==n?void 0:n.scrollHeight))}),500)},[c,i,p,l,n,d,b,s,function(e){r[e?"unshift":"push"]((()=>{n=e,t(4,n)}))}]}class z extends e{constructor(e){super(),a(this,e,H,$,t,{feature:0,a11yLabels:6},_)}}export{z as default};
+import{E as e,i as a,s as t,F as i,P as s,b as l,n,o as d,ab as o,H as r,e as c,G as b,d as p,t as u,g as h,j as v,k as f}from"../../index-9ffad6d0.js";import{i as m,s as x}from"../../sidebar-service-ab65d83f.js";function _(e){i(e,"svelte-1hca6n9",".mc-sidebar-feature.svelte-1hca6n9.svelte-1hca6n9{font-size:16px;min-width:200px;cursor:pointer;-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;text-decoration:none;color:#191919;line-height:22px;overflow:hidden}.mc-sidebar-feature__container.svelte-1hca6n9.svelte-1hca6n9{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;padding-top:8px;padding-bottom:8px}.mc-sidebar-feature__container.svelte-1hca6n9 span.svelte-1hca6n9{max-width:200px;min-width:200px}.mc-sidebar-feature__icon.svelte-1hca6n9.svelte-1hca6n9{fill:#191919}.mc-sidebar-feature__icon-disabled.svelte-1hca6n9.svelte-1hca6n9{fill:#6a7081}.mc-sidebar-feature__label.svelte-1hca6n9.svelte-1hca6n9{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:8px;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.mc-sidebar-feature__label__tooltip.svelte-1hca6n9.svelte-1hca6n9{opacity:0;-webkit-transition:0s opacity;-o-transition:0s opacity;transition:0s opacity;background-color:#b3b3b3;border:1px solid #191919;border-radius:4px;position:absolute;pointer-events:none;left:calc(100% - 16px);padding:8px 16px;width:188px}.mc-sidebar-feature__label__tooltip__pointer.svelte-1hca6n9.svelte-1hca6n9{position:absolute;top:50%;left:-8px;top:calc(50% - 6px);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid #191919}.mc-sidebar-feature__label__tooltip__pointer.svelte-1hca6n9 div.svelte-1hca6n9{position:relative;top:-6px;left:2px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid #b3b3b3}.mc-sidebar-feature__label.svelte-1hca6n9:hover+.mc-sidebar-feature__label__tooltip.svelte-1hca6n9{opacity:1;-webkit-transition-delay:1s;-o-transition-delay:1s;transition-delay:1s}.mc-sidebar-feature__icon.svelte-1hca6n9.svelte-1hca6n9{margin-right:8px}.mc-sidebar-feature.is-selected.svelte-1hca6n9.svelte-1hca6n9{background:#cfd2d8}.mc-sidebar-feature.is-close.svelte-1hca6n9.svelte-1hca6n9{-o-transition:padding 300ms ease-in-out;-webkit-transition:padding 300ms ease-in-out;transition:padding 300ms ease-in-out;padding:0px 0px}.mc-sidebar-feature.is-close.svelte-1hca6n9 .mc-sidebar-feature__container.svelte-1hca6n9{-o-transition:padding-left 300ms ease-in-out;-webkit-transition:padding-left 300ms ease-in-out;transition:padding-left 300ms ease-in-out;padding-left:20px;width:24px}.mc-sidebar-feature.is-open.svelte-1hca6n9.svelte-1hca6n9{-o-transition:padding 300ms ease-in-out;-webkit-transition:padding 300ms ease-in-out;transition:padding 300ms ease-in-out;padding:0px 32px}.mc-sidebar-feature.is-open.svelte-1hca6n9 .mc-sidebar-feature__container.svelte-1hca6n9{-o-transition:padding-left 300ms ease-in-out;-webkit-transition:padding-left 300ms ease-in-out;transition:padding-left 300ms ease-in-out;padding-left:32px}.mc-sidebar-feature.is-disabled.svelte-1hca6n9.svelte-1hca6n9{color:#6a7081;fill:#6a7081}.mc-sidebar-feature.svelte-1hca6n9.svelte-1hca6n9:hover{background:#b3b7c1}.mc-sidebar-feature.svelte-1hca6n9.svelte-1hca6n9:focus-visible{-webkit-box-shadow:none;box-shadow:none;border:none;outline:none}.mc-sidebar-feature.svelte-1hca6n9:focus-visible .mc-sidebar-feature__container.svelte-1hca6n9{-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}")}function g(e){let a,t,i,s,n,o,r,m,x,_,g,w,k,y,$=e[0].label+"";return{c(){a=c("span"),t=c("div"),i=b("svg"),s=b("g"),n=b("path"),o=b("defs"),r=b("clipPath"),m=b("path"),x=p(),_=c("span"),g=u($),h(n,"fill-rule","evenodd"),h(n,"d","M8 2a3 3 0 00-3 3v1H4a1 1 0 00-1 1v6a1 1 0 001 1h8a1 1 0 001-1V7a1 1 0 00-1-1h-1V5a3 3 0 00-3-3zm1 4V5a1 1 0 10-2 0v1h2zm-4 6V8h6v4H5z"),h(s,"clip-path","url(#a)"),h(m,"d","M0 0h16v16H0z"),h(r,"id","a"),h(i,"class","mc-sidebar-feature__icon-disabled svelte-1hca6n9"),h(i,"width","16px"),h(i,"height","16px"),h(i,"viewBox","0 0 16 16"),h(_,"class","svelte-1hca6n9"),h(t,"class","mc-sidebar-feature__container svelte-1hca6n9"),h(a,"aria-label",w=e[0].label),h(a,"aria-disabled","true"),h(a,"class",k="mc-sidebar-feature "+(e[2]?"is-selected":"")+" "+(e[1]?"is-open":"is-close")+" is-disabled svelte-1hca6n9"),h(a,"id",y=e[0].code)},m(e,d){l(e,a,d),v(a,t),v(t,i),v(i,s),v(s,n),v(i,o),v(o,r),v(r,m),v(t,x),v(t,_),v(_,g)},p(e,t){1&t&&$!==($=e[0].label+"")&&f(g,$),1&t&&w!==(w=e[0].label)&&h(a,"aria-label",w),6&t&&k!==(k="mc-sidebar-feature "+(e[2]?"is-selected":"")+" "+(e[1]?"is-open":"is-close")+" is-disabled svelte-1hca6n9")&&h(a,"class",k),1&t&&y!==(y=e[0].code)&&h(a,"id",y)},d(e){e&&d(a)}}}function w(e){let a,t,i,s,n,o,r,b,m,x,_,g=e[0].label+"",w=e[5]&&k(e),$="_blank"===e[0].embedded&&y();return{c(){a=c("a"),t=c("div"),i=c("span"),s=u(g),n=p(),w&&w.c(),o=p(),$&&$.c(),h(i,"class","mc-sidebar-feature__label svelte-1hca6n9"),h(t,"class","mc-sidebar-feature__container svelte-1hca6n9"),h(a,"aria-label",r=""+(e[0].label+e[3])),h(a,"href",b=e[0].href??"javascript:void(null)"),h(a,"target",m=e[0].embedded),h(a,"class",x="mc-sidebar-feature "+(e[2]?"is-selected":"")+" "+(e[1]?"is-open":"is-close")+" svelte-1hca6n9"),h(a,"id",_=e[0].code)},m(d,r){l(d,a,r),v(a,t),v(t,i),v(i,s),e[8](i),v(t,n),w&&w.m(t,null),v(t,o),$&&$.m(t,null)},p(e,i){1&i&&g!==(g=e[0].label+"")&&f(s,g),e[5]?w?w.p(e,i):(w=k(e),w.c(),w.m(t,o)):w&&(w.d(1),w=null),"_blank"===e[0].embedded?$||($=y(),$.c(),$.m(t,null)):$&&($.d(1),$=null),9&i&&r!==(r=""+(e[0].label+e[3]))&&h(a,"aria-label",r),1&i&&b!==(b=e[0].href??"javascript:void(null)")&&h(a,"href",b),1&i&&m!==(m=e[0].embedded)&&h(a,"target",m),6&i&&x!==(x="mc-sidebar-feature "+(e[2]?"is-selected":"")+" "+(e[1]?"is-open":"is-close")+" svelte-1hca6n9")&&h(a,"class",x),1&i&&_!==(_=e[0].code)&&h(a,"id",_)},d(t){t&&d(a),e[8](null),w&&w.d(),$&&$.d()}}}function k(e){let a,t,i,s,n,o=e[0].label+"";return{c(){a=c("div"),t=c("div"),t.innerHTML='<div class="svelte-1hca6n9"></div>',i=p(),s=c("span"),n=u(o),h(t,"class","mc-sidebar-feature__label__tooltip__pointer svelte-1hca6n9"),h(s,"class","svelte-1hca6n9"),h(a,"aria-hidden","true"),h(a,"class","mc-sidebar-feature__label__tooltip svelte-1hca6n9")},m(e,d){l(e,a,d),v(a,t),v(a,i),v(a,s),v(s,n)},p(e,a){1&a&&o!==(o=e[0].label+"")&&f(n,o)},d(e){e&&d(a)}}}function y(e){let a,t;return{c(){a=b("svg"),t=b("path"),h(t,"fill-rule","evenodd"),h(t,"d","M9 2a1 1 0 000 2h1.586L6.293 8.293a1 1 0 001.414 1.414L12 5.414V7a1 1 0 102 0V3a1 1 0 00-1-1H9zM3 4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1v-2a1 1 0 10-2 0v1H4V6h1a1 1 0 000-2H3z"),h(a,"class","mc-sidebar-feature__icon svelte-1hca6n9"),h(a,"width","16px"),h(a,"height","16px"),h(a,"viewBox","0 0 16 16")},m(e,i){l(e,a,i),v(a,t)},d(e){e&&d(a)}}}function $(e){let a;function t(e,a){return e[0].disabled?g:w}let i=t(e),o=i(e);return{c(){o.c(),a=s()},m(e,t){o.m(e,t),l(e,a,t)},p(e,[s]){i===(i=t(e))&&o?o.p(e,s):(o.d(1),o=i(e),o&&(o.c(),o.m(a.parentNode,a)))},i:n,o:n,d(e){o.d(e),e&&d(a)}}}function H(e,a,t){let i,s;o(e,m,(e=>t(1,i=e))),o(e,x,(e=>t(7,s=e)));let l,n,d,{feature:c}=a,{a11yLabels:b}=a,p=!1;return e.$$set=e=>{"feature"in e&&t(0,c=e.feature),"a11yLabels"in e&&t(6,b=e.a11yLabels)},e.$$.update=()=>{129&e.$$.dirty&&function(e,a){var i,s,l;t(2,p=null!==(l=(null==a?void 0:a.lv1)&&e.code===(null===(i=null==a?void 0:a.lv1)||void 0===i?void 0:i.code)||(null==a?void 0:a.lv2)&&e.code===(null===(s=null==a?void 0:a.lv2)||void 0===s?void 0:s.code))&&void 0!==l&&l)}(c,s),65&e.$$.dirty&&function(e,a){a.embedded?t(3,l=(null==e?void 0:e["external-link-suffix"])?` (${e["external-link-suffix"]})`:" (link to a new window)"):t(3,l="")}(b,c),2&e.$$.dirty&&setTimeout((()=>{t(5,d=(null==n?void 0:n.offsetHeight)<(null==n?void 0:n.scrollHeight))}),500)},[c,i,p,l,n,d,b,s,function(e){r[e?"unshift":"push"]((()=>{n=e,t(4,n)}))}]}class z extends e{constructor(e){super(),a(this,e,H,$,t,{feature:0,a11yLabels:6},_)}}export{z as default};
 //# sourceMappingURL=sidebar-feature.nested.js.map

package/public/components/sidebar/sidebar-feature.nested.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-feature.nested.js","sources":["../../../src/components/sidebar/sidebar-feature.nested.svelte"],"sourcesContent":["<svelte:options />\n\n<script lang=\"ts\">\n  import { isSidebarOpen, selectedFeature, Selection } from './sidebar-service';\n  import type { A11yLabels, Feature } from './sidebar.types';\n\n  export let feature: Feature;\n  export let a11yLabels: A11yLabels;\n\n  $: updateSelection(feature, $selectedFeature);\n  $: updatA11yLabel(a11yLabels, feature);\n\n  let isSelected = false;\n  let ariaSuffix: string;\n\n  let label: HTMLElement;\n  let showTooltip: boolean;\n  $: updateTooltip($isSidebarOpen);\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  function updateTooltip(_: boolean) {\n    setTimeout(() => {\n      showTooltip = label?.offsetHeight < label?.scrollHeight;\n    }, 500);\n  }\n\n  function updateSelection(feature: Feature, selection?: Selection) {\n    isSelected =\n      ((selection?.lv1 && feature.code === selection?.lv1?.code) ||\n        (selection?.lv2 && feature.code === selection?.lv2?.code)) ??\n      false;\n  }\n\n  function updatA11yLabel(label: A11yLabels, feature: Feature) {\n    if (feature.embedded) {\n      ariaSuffix = label?.['external-link-suffix']\n        ? ` (${label['external-link-suffix']})`\n        : ' (link to a new window)';\n    } else {\n      ariaSuffix = '';\n    }\n  }\n</script>\n\n{#if !feature.disabled}\n  <a\n    aria-label=\"{feature.label}{ariaSuffix}\"\n    href={feature.href ?? 'javascript:void(null)'}\n    target={feature.embedded}\n    class=\"mc-sidebar-feature {isSelected ? 'is-selected' : ''} {$isSidebarOpen\n      ? 'is-open'\n      : 'is-close'}\"\n    id={feature.code}\n  >\n    <div class=\"mc-sidebar-feature__container\">\n      <span class=\"mc-sidebar-feature__label\" bind:this={label}\n        >{feature.label}</span\n      >\n      {#if showTooltip}\n        <div aria-hidden=\"true\" class=\"mc-sidebar-feature__label__tooltip\">\n          <div class=\"mc-sidebar-feature__label__tooltip__pointer\"><div /></div>\n          <span>{feature.label}</span>\n        </div>\n      {/if}\n      {#if feature.embedded === '_blank'}\n        <svg\n          class=\"mc-sidebar-feature__icon\"\n          width=\"16px\"\n          height=\"16px\"\n          viewBox=\"0 0 16 16\"\n          ><path\n            fill-rule=\"evenodd\"\n            d=\"M9 2a1 1 0 000 2h1.586L6.293 8.293a1 1 0 001.414 1.414L12 5.414V7a1 1 0 102 0V3a1 1 0 00-1-1H9zM3 4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1v-2a1 1 0 10-2 0v1H4V6h1a1 1 0 000-2H3z\"\n          /></svg\n        >\n      {/if}\n    </div>\n  </a>\n{:else}\n  <span\n    aria-label={feature.label}\n    aria-disabled=\"true\"\n    class=\"mc-sidebar-feature {isSelected ? 'is-selected' : ''} {$isSidebarOpen\n      ? 'is-open'\n      : 'is-close'} is-disabled\"\n    id={feature.code}\n  >\n    <div class=\"mc-sidebar-feature__container\">\n      <svg\n        class=\"mc-sidebar-feature__icon-disabled\"\n        width=\"16px\"\n        height=\"16px\"\n        viewBox=\"0 0 16 16\"\n        ><g clip-path=\"url(#a)\"\n          ><path\n            fill-rule=\"evenodd\"\n            d=\"M8 2a3 3 0 00-3 3v1H4a1 1 0 00-1 1v6a1 1 0 001 1h8a1 1 0 001-1V7a1 1 0 00-1-1h-1V5a3 3 0 00-3-3zm1 4V5a1 1 0 10-2 0v1h2zm-4 6V8h6v4H5z\"\n          /></g\n        ><defs><clipPath id=\"a\"><path d=\"M0 0h16v16H0z\" /></clipPath></defs\n        ></svg\n      >\n      <span>{feature.label}</span>\n    </div>\n  </span>\n{/if}\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import './sidebar-variables';\n\n  .mc-sidebar-feature {\n    font-size: 16px;\n    min-width: 200px;\n    cursor: pointer;\n    flex: 1;\n    display: flex;\n    text-decoration: none;\n    color: $color-sidebar-text-color;\n    line-height: 22px;\n    overflow: hidden;\n\n    &__container {\n      display: flex;\n      align-items: center;\n      width: 100%;\n      padding-top: 8px;\n      padding-bottom: 8px;\n\n      span {\n        max-width: 200px;\n        min-width: 200px;\n      }\n    }\n\n    &__icon {\n      fill: $color-sidebar-icon;\n    }\n\n    &__icon-disabled {\n      fill: $color-sidebar-feature-disabled-background;\n    }\n\n    &__label {\n      flex: 1;\n      margin-right: 8px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      line-clamp: 2;\n      -webkit-box-orient: vertical;\n\n      &__tooltip {\n        opacity: 0;\n        transition: 0s opacity;\n        background-color: $color-sidebar-divider-background;\n        border: 1px solid $color-sidebar-text-color;\n        border-radius: 4px;\n        position: absolute;\n        pointer-events: none;\n        left: calc(100% - 16px);\n        padding: 8px 16px;\n        width: 188px;\n\n        &__pointer {\n          position: absolute;\n          top: 50%;\n          left: -8px;\n          top: calc(50% - 6px);\n          width: 0;\n          height: 0;\n          border-top: 6px solid transparent;\n          border-bottom: 6px solid transparent;\n          border-right: 8px solid $color-sidebar-text-color;\n\n          & div {\n            position: relative;\n            top: -6px;\n            left: 2px;\n            width: 0;\n            height: 0;\n            border-top: 6px solid transparent;\n            border-bottom: 6px solid transparent;\n            border-right: 8px solid $color-sidebar-divider-background;\n          }\n        }\n      }\n\n      &:hover + .mc-sidebar-feature__label__tooltip {\n        opacity: 1;\n        transition-delay: 1s;\n      }\n    }\n\n    &__icon {\n      margin-right: 8px;\n    }\n\n    &.is-selected {\n      background: $color-sidebar-feature-selected-background;\n    }\n\n    &.is-close {\n      @include transition(padding 300ms ease-in-out);\n      padding: 0px 0px;\n\n      .mc-sidebar-feature__container {\n        @include transition(padding-left 300ms ease-in-out);\n        padding-left: 20px;\n        width: 24px;\n      }\n    }\n\n    &.is-open {\n      @include transition(padding 300ms ease-in-out);\n      padding: 0px 32px;\n\n      .mc-sidebar-feature__container {\n        @include transition(padding-left 300ms ease-in-out);\n        padding-left: 32px;\n      }\n    }\n\n    &.is-disabled {\n      color: $color-sidebar-feature-disabled-background;\n      fill: $color-sidebar-feature-disabled-background;\n    }\n\n    &:hover {\n      background: $color-sidebar-feature-hover-background;\n    }\n\n    &:focus-visible {\n      box-shadow: none;\n      border: none;\n      outline: none;\n\n      .mc-sidebar-feature__container {\n        box-shadow: none;\n        border: none;\n        border-radius: 6px;\n        outline: 1px solid #0b96cc;\n      }\n    }\n  }\n</style>\n"],"names":["t1_value","ctx","label","attr","span1","span1_aria_label_value","span1_id_value","code","insert","target","anchor","append","div","svg","g","path0","defs","clipPath","path1","span0","dirty","set_data","t1","t0_value","create_if_block_2","embedded","create_if_block_1","href","a","a_target_value","a_id_value","span","t0","div2","div1","path","disabled","create_if_block","ariaSuffix","showTooltip","feature","$$props","a11yLabels","isSelected","selection","_c","lv1","_a","lv2","_b","updateSelection","$selectedFeature","$$invalidate","updatA11yLabel","setTimeout","offsetHeight","scrollHeight","$$value"],"mappings":"wsHAqGaA,EAAAC,KAAQC,MAAK,mlBArBVC,EAAAC,EAAA,aAAAC,EAAAJ,KAAQC,wEAEOD,EAAU,GAAG,cAAgB,SAAKA,EAAC,GAC1D,UACA,2CACAE,EAAAC,EAAA,KAAAE,EAAAL,KAAQM,cANdC,EAwBMC,EAAAL,EAAAM,GAhBJC,EAeKP,EAAAQ,GAdHD,EAYAC,EAAAC,GAPGF,EAKAE,EAAAC,GAJEH,EAGCG,EAAAC,GACHJ,EACAE,EAAAG,GADML,EAAsDK,EAAAC,GAArCN,EAA0BM,EAAAC,UAGpDP,EAA2BC,EAAAO,kBAApB,EAAAC,GAAApB,KAAAA,EAAAC,KAAQC,MAAK,KAAAmB,EAAAC,EAAAtB,GArBV,EAAAoB,GAAAf,KAAAA,EAAAJ,KAAQC,+DAEOD,EAAU,GAAG,cAAgB,SAAKA,EAAC,GAC1D,UACA,2DACA,EAAAmB,GAAAd,KAAAA,EAAAL,KAAQM,2EA7BNgB,EAAAtB,KAAQC,MAAK,KAEZD,EAAW,IAAAuB,EAAAvB,KAMU,WAArBA,EAAO,GAACwB,UAAqBC,+NAlBvBzB,EAAO,GAACC,MAAOD,EAAU,kBAChCA,EAAO,GAAC0B,MAAQ,yBACdxB,EAAAyB,EAAA,SAAAC,EAAA5B,KAAQwB,+CACWxB,EAAU,GAAG,cAAgB,SAAKA,EAAC,GAC1D,UACA,YAAU,mBACVE,EAAAyB,EAAA,KAAAE,EAAA7B,KAAQM,cAPdC,EAgCGC,EAAAmB,EAAAlB,GAvBDC,EAsBKiB,EAAAhB,GArBHD,EAEAC,EAAAmB,sEADI,EAAAX,GAAAG,KAAAA,EAAAtB,KAAQC,MAAK,KAAAmB,EAAAW,EAAAT,GAEZtB,EAAW,yDAMU,WAArBA,EAAO,GAACwB,yEAlBFxB,EAAO,GAACC,MAAOD,EAAU,sCAChCA,EAAO,GAAC0B,MAAQ,wCACd,EAAAP,GAAAS,KAAAA,EAAA5B,KAAQwB,8DACWxB,EAAU,GAAG,cAAgB,SAAKA,EAAC,GAC1D,UACA,YAAU,mCACV,EAAAmB,GAAAU,KAAAA,EAAA7B,KAAQM,4FASCP,EAAAC,KAAQC,MAAK,yTAFtBM,EAGKC,EAAAwB,EAAAvB,GAFHC,EAAqEsB,EAAAC,UACrEvB,EAA2BsB,EAAAF,kBAApB,EAAAX,GAAApB,KAAAA,EAAAC,KAAQC,MAAK,KAAAmB,EAAAC,EAAAtB,waAItBQ,EASAC,EAAAI,EAAAH,GAJGC,EAGCE,EAAAsB,uDA7BN,OAAAlC,KAAQmC,WAAQC,8PA/BhBC,EAEApC,EACAqC,WAVOC,GAAgBC,cAChBC,GAAsBD,EAK7BE,GAAa,sIAcQH,EAAkBI,iBACzCD,EAEJ,QADAE,GAAQD,eAAAA,EAAWE,MAAON,EAAQjC,QAAlC,QAAAwC,EAA2CH,eAAAA,EAAWE,eAAtDC,SAAAA,EAA2DxC,QAClDqC,eAAAA,EAAWI,MAAOR,EAAQjC,QAAnC,QAAA0C,EAA4CL,eAAAA,EAAWI,eAAvDC,SAAAA,EAA4D1C,iBAA5DsC,GAAAA,GApBKK,CAAgBV,EAASW,2BAwBJjD,EAAmBsC,GACrCA,EAAQf,SACV2B,EAAA,EAAAd,GAAapC,eAAAA,EAAQ,yBACZ,KAAAA,EAAM,2BACX,2BAEJkD,EAAA,EAAAd,EAAa,IA7Bde,CAAeX,EAAYF,iBAW5Bc,iBACEF,EAAA,EAAAb,GAAcrC,eAAAA,EAAOqD,eAAerD,eAAAA,EAAOsD,cAAY,GACtD,+DAgCkDtD,EAAKuD"}
+{"version":3,"file":"sidebar-feature.nested.js","sources":["../../../src/components/sidebar/sidebar-feature.nested.svelte"],"sourcesContent":["<svelte:options />\n\n<script lang=\"ts\">\n  import {\n    isSidebarOpen,\n    selectedFeature,\n  } from '../../utilities/sidebar-service';\n  import type { A11yLabels, Feature, Selection } from './sidebar.types';\n\n  export let feature: Feature;\n  export let a11yLabels: A11yLabels;\n\n  $: updateSelection(feature, $selectedFeature);\n  $: updatA11yLabel(a11yLabels, feature);\n\n  let isSelected = false;\n  let ariaSuffix: string;\n\n  let label: HTMLElement;\n  let showTooltip: boolean;\n  $: updateTooltip($isSidebarOpen);\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  function updateTooltip(_: boolean) {\n    setTimeout(() => {\n      showTooltip = label?.offsetHeight < label?.scrollHeight;\n    }, 500);\n  }\n\n  function updateSelection(feature: Feature, selection?: Selection) {\n    isSelected =\n      ((selection?.lv1 && feature.code === selection?.lv1?.code) ||\n        (selection?.lv2 && feature.code === selection?.lv2?.code)) ??\n      false;\n  }\n\n  function updatA11yLabel(label: A11yLabels, feature: Feature) {\n    if (feature.embedded) {\n      ariaSuffix = label?.['external-link-suffix']\n        ? ` (${label['external-link-suffix']})`\n        : ' (link to a new window)';\n    } else {\n      ariaSuffix = '';\n    }\n  }\n</script>\n\n{#if !feature.disabled}\n  <a\n    aria-label=\"{feature.label}{ariaSuffix}\"\n    href={feature.href ?? 'javascript:void(null)'}\n    target={feature.embedded}\n    class=\"mc-sidebar-feature {isSelected ? 'is-selected' : ''} {$isSidebarOpen\n      ? 'is-open'\n      : 'is-close'}\"\n    id={feature.code}\n  >\n    <div class=\"mc-sidebar-feature__container\">\n      <span class=\"mc-sidebar-feature__label\" bind:this={label}\n        >{feature.label}</span\n      >\n      {#if showTooltip}\n        <div aria-hidden=\"true\" class=\"mc-sidebar-feature__label__tooltip\">\n          <div class=\"mc-sidebar-feature__label__tooltip__pointer\"><div /></div>\n          <span>{feature.label}</span>\n        </div>\n      {/if}\n      {#if feature.embedded === '_blank'}\n        <svg\n          class=\"mc-sidebar-feature__icon\"\n          width=\"16px\"\n          height=\"16px\"\n          viewBox=\"0 0 16 16\"\n          ><path\n            fill-rule=\"evenodd\"\n            d=\"M9 2a1 1 0 000 2h1.586L6.293 8.293a1 1 0 001.414 1.414L12 5.414V7a1 1 0 102 0V3a1 1 0 00-1-1H9zM3 4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1v-2a1 1 0 10-2 0v1H4V6h1a1 1 0 000-2H3z\"\n          /></svg\n        >\n      {/if}\n    </div>\n  </a>\n{:else}\n  <span\n    aria-label={feature.label}\n    aria-disabled=\"true\"\n    class=\"mc-sidebar-feature {isSelected ? 'is-selected' : ''} {$isSidebarOpen\n      ? 'is-open'\n      : 'is-close'} is-disabled\"\n    id={feature.code}\n  >\n    <div class=\"mc-sidebar-feature__container\">\n      <svg\n        class=\"mc-sidebar-feature__icon-disabled\"\n        width=\"16px\"\n        height=\"16px\"\n        viewBox=\"0 0 16 16\"\n        ><g clip-path=\"url(#a)\"\n          ><path\n            fill-rule=\"evenodd\"\n            d=\"M8 2a3 3 0 00-3 3v1H4a1 1 0 00-1 1v6a1 1 0 001 1h8a1 1 0 001-1V7a1 1 0 00-1-1h-1V5a3 3 0 00-3-3zm1 4V5a1 1 0 10-2 0v1h2zm-4 6V8h6v4H5z\"\n          /></g\n        ><defs><clipPath id=\"a\"><path d=\"M0 0h16v16H0z\" /></clipPath></defs\n        ></svg\n      >\n      <span>{feature.label}</span>\n    </div>\n  </span>\n{/if}\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import './_c.sidebar';\n\n  .mc-sidebar-feature {\n    font-size: 16px;\n    min-width: 200px;\n    cursor: pointer;\n    flex: 1;\n    display: flex;\n    text-decoration: none;\n    color: $color-sidebar-text-color;\n    line-height: 22px;\n    overflow: hidden;\n\n    &__container {\n      display: flex;\n      align-items: center;\n      width: 100%;\n      padding-top: 8px;\n      padding-bottom: 8px;\n\n      span {\n        max-width: 200px;\n        min-width: 200px;\n      }\n    }\n\n    &__icon {\n      fill: $color-sidebar-icon;\n    }\n\n    &__icon-disabled {\n      fill: $color-sidebar-feature-disabled-background;\n    }\n\n    &__label {\n      flex: 1;\n      margin-right: 8px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      line-clamp: 2;\n      -webkit-box-orient: vertical;\n\n      &__tooltip {\n        opacity: 0;\n        transition: 0s opacity;\n        background-color: $color-sidebar-divider-background;\n        border: 1px solid $color-sidebar-text-color;\n        border-radius: 4px;\n        position: absolute;\n        pointer-events: none;\n        left: calc(100% - 16px);\n        padding: 8px 16px;\n        width: 188px;\n\n        &__pointer {\n          position: absolute;\n          top: 50%;\n          left: -8px;\n          top: calc(50% - 6px);\n          width: 0;\n          height: 0;\n          border-top: 6px solid transparent;\n          border-bottom: 6px solid transparent;\n          border-right: 8px solid $color-sidebar-text-color;\n\n          & div {\n            position: relative;\n            top: -6px;\n            left: 2px;\n            width: 0;\n            height: 0;\n            border-top: 6px solid transparent;\n            border-bottom: 6px solid transparent;\n            border-right: 8px solid $color-sidebar-divider-background;\n          }\n        }\n      }\n\n      &:hover + .mc-sidebar-feature__label__tooltip {\n        opacity: 1;\n        transition-delay: 1s;\n      }\n    }\n\n    &__icon {\n      margin-right: 8px;\n    }\n\n    &.is-selected {\n      background: $color-sidebar-feature-selected-background;\n    }\n\n    &.is-close {\n      @include transition(padding 300ms ease-in-out);\n      padding: 0px 0px;\n\n      .mc-sidebar-feature__container {\n        @include transition(padding-left 300ms ease-in-out);\n        padding-left: 20px;\n        width: 24px;\n      }\n    }\n\n    &.is-open {\n      @include transition(padding 300ms ease-in-out);\n      padding: 0px 32px;\n\n      .mc-sidebar-feature__container {\n        @include transition(padding-left 300ms ease-in-out);\n        padding-left: 32px;\n      }\n    }\n\n    &.is-disabled {\n      color: $color-sidebar-feature-disabled-background;\n      fill: $color-sidebar-feature-disabled-background;\n    }\n\n    &:hover {\n      background: $color-sidebar-feature-hover-background;\n    }\n\n    &:focus-visible {\n      box-shadow: none;\n      border: none;\n      outline: none;\n\n      .mc-sidebar-feature__container {\n        box-shadow: none;\n        border: none;\n        border-radius: 6px;\n        outline: 1px solid #0b96cc;\n      }\n    }\n  }\n</style>\n"],"names":["t1_value","ctx","label","attr","span1","span1_aria_label_value","span1_id_value","code","insert","target","anchor","append","div","svg","g","path0","defs","clipPath","path1","span0","dirty","set_data","t1","t0_value","create_if_block_2","embedded","create_if_block_1","href","a","a_target_value","a_id_value","span","t0","div2","div1","path","disabled","create_if_block","ariaSuffix","showTooltip","feature","$$props","a11yLabels","isSelected","selection","_c","lv1","_a","lv2","_b","updateSelection","$selectedFeature","$$invalidate","updatA11yLabel","setTimeout","offsetHeight","scrollHeight","$$value"],"mappings":"wsHAwGaA,EAAAC,KAAQC,MAAK,mlBArBVC,EAAAC,EAAA,aAAAC,EAAAJ,KAAQC,wEAEOD,EAAU,GAAG,cAAgB,SAAKA,EAAC,GAC1D,UACA,2CACAE,EAAAC,EAAA,KAAAE,EAAAL,KAAQM,cANdC,EAwBMC,EAAAL,EAAAM,GAhBJC,EAeKP,EAAAQ,GAdHD,EAYAC,EAAAC,GAPGF,EAKAE,EAAAC,GAJEH,EAGCG,EAAAC,GACHJ,EACAE,EAAAG,GADML,EAAsDK,EAAAC,GAArCN,EAA0BM,EAAAC,UAGpDP,EAA2BC,EAAAO,kBAApB,EAAAC,GAAApB,KAAAA,EAAAC,KAAQC,MAAK,KAAAmB,EAAAC,EAAAtB,GArBV,EAAAoB,GAAAf,KAAAA,EAAAJ,KAAQC,+DAEOD,EAAU,GAAG,cAAgB,SAAKA,EAAC,GAC1D,UACA,2DACA,EAAAmB,GAAAd,KAAAA,EAAAL,KAAQM,2EA7BNgB,EAAAtB,KAAQC,MAAK,KAEZD,EAAW,IAAAuB,EAAAvB,KAMU,WAArBA,EAAO,GAACwB,UAAqBC,+NAlBvBzB,EAAO,GAACC,MAAOD,EAAU,kBAChCA,EAAO,GAAC0B,MAAQ,yBACdxB,EAAAyB,EAAA,SAAAC,EAAA5B,KAAQwB,+CACWxB,EAAU,GAAG,cAAgB,SAAKA,EAAC,GAC1D,UACA,YAAU,mBACVE,EAAAyB,EAAA,KAAAE,EAAA7B,KAAQM,cAPdC,EAgCGC,EAAAmB,EAAAlB,GAvBDC,EAsBKiB,EAAAhB,GArBHD,EAEAC,EAAAmB,sEADI,EAAAX,GAAAG,KAAAA,EAAAtB,KAAQC,MAAK,KAAAmB,EAAAW,EAAAT,GAEZtB,EAAW,yDAMU,WAArBA,EAAO,GAACwB,yEAlBFxB,EAAO,GAACC,MAAOD,EAAU,sCAChCA,EAAO,GAAC0B,MAAQ,wCACd,EAAAP,GAAAS,KAAAA,EAAA5B,KAAQwB,8DACWxB,EAAU,GAAG,cAAgB,SAAKA,EAAC,GAC1D,UACA,YAAU,mCACV,EAAAmB,GAAAU,KAAAA,EAAA7B,KAAQM,4FASCP,EAAAC,KAAQC,MAAK,yTAFtBM,EAGKC,EAAAwB,EAAAvB,GAFHC,EAAqEsB,EAAAC,UACrEvB,EAA2BsB,EAAAF,kBAApB,EAAAX,GAAApB,KAAAA,EAAAC,KAAQC,MAAK,KAAAmB,EAAAC,EAAAtB,waAItBQ,EASAC,EAAAI,EAAAH,GAJGC,EAGCE,EAAAsB,uDA7BN,OAAAlC,KAAQmC,WAAQC,8PA/BhBC,EAEApC,EACAqC,WAVOC,GAAgBC,cAChBC,GAAsBD,EAK7BE,GAAa,sIAcQH,EAAkBI,iBACzCD,EAEJ,QADAE,GAAQD,eAAAA,EAAWE,MAAON,EAAQjC,QAAlC,QAAAwC,EAA2CH,eAAAA,EAAWE,eAAtDC,SAAAA,EAA2DxC,QAClDqC,eAAAA,EAAWI,MAAOR,EAAQjC,QAAnC,QAAA0C,EAA4CL,eAAAA,EAAWI,eAAvDC,SAAAA,EAA4D1C,iBAA5DsC,GAAAA,GApBKK,CAAgBV,EAASW,2BAwBJjD,EAAmBsC,GACrCA,EAAQf,SACV2B,EAAA,EAAAd,GAAapC,eAAAA,EAAQ,yBACZ,KAAAA,EAAM,2BACX,2BAEJkD,EAAA,EAAAd,EAAa,IA7Bde,CAAeX,EAAYF,iBAW5Bc,iBACEF,EAAA,EAAAb,GAAcrC,eAAAA,EAAOqD,eAAerD,eAAAA,EAAOsD,cAAY,GACtD,+DAgCkDtD,EAAKuD"}

package/public/{adeo/components/sidebar-feature → components/sidebar}/sidebar-feature.nested.svelte

@@ -1,8 +1,11 @@
 <svelte:options />
 
 <script lang="ts">
-  import { isSidebarOpen, selectedFeature, Selection } from './sidebar-service';
-  import type { A11yLabels, Feature } from './sidebar.types';
+  import {
+    isSidebarOpen,
+    selectedFeature,
+  } from '../../utilities/sidebar-service';
+  import type { A11yLabels, Feature, Selection } from './sidebar.types';
 
   export let feature: Feature;
   export let a11yLabels: A11yLabels;
@@ -106,7 +109,7 @@
 
 <style lang="scss">
   @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import './sidebar-variables';
+  @import './_c.sidebar';
 
   .mc-sidebar-feature {
     font-size: 16px;

package/public/components/sidebar/sidebar-section.nested.js

@@ -1,2 +1,2 @@
-import{E as e,i as t,s as i,F as a,P as n,b as s,y as l,w as o,x as r,o as c,ab as d,e as b,d as m,g as f,T as u,j as w,z as k,O as x,B as y,C as p,l as g,D as v}from"../../index-52f16292.js";import h from"./sidebar-feature-group.nested.js";import $ from"./sidebar-sub-features.nested.js";import{t as j,i as L}from"../../sidebar-service-293d79ef.js";import"./sidebar-feature.nested.js";import"../../EventHandler-f4efd23c.js";function z(e){a(e,"svelte-kwnya",".mc-sidebar-section.svelte-kwnya.svelte-kwnya{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;min-height:38px;overflow-x:hidden;overflow-y:auto;overflow-y:overlay;padding:1px 0px;scrollbar-color:#8f94a3 #b3b3b3;scrollbar-width:thin}.mc-sidebar-section.svelte-kwnya ul.svelte-kwnya,.mc-sidebar-section.svelte-kwnya li.svelte-kwnya{list-style-type:none;margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}.mc-sidebar-section.svelte-kwnya ul.svelte-kwnya{-webkit-box-align:start;-ms-flex-align:start;align-items:start;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-sidebar-section.svelte-kwnya ul li.svelte-kwnya{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;margin:4px 0px}.mc-sidebar-section.svelte-kwnya ul li.svelte-kwnya:first-child{margin-top:0}.mc-sidebar-section.svelte-kwnya ul li.svelte-kwnya:last-child{margin-bottom:0}.mc-sidebar-section.svelte-kwnya ul.is-hidden.svelte-kwnya{-o-transition:margin-left 300ms ease-in-out;-webkit-transition:margin-left 300ms ease-in-out;transition:margin-left 300ms ease-in-out;margin-left:-320px;opacity:0}.mc-sidebar-section.svelte-kwnya ul.is-visible.svelte-kwnya{-o-transition:margin-left 300ms ease-in-out;-webkit-transition:margin-left 300ms ease-in-out;transition:margin-left 300ms ease-in-out;margin-left:0}.mc-sidebar-section.svelte-kwnya.svelte-kwnya::-webkit-scrollbar{width:5px;height:10px;background:#b3b3b3}.mc-sidebar-section.svelte-kwnya.svelte-kwnya::-webkit-scrollbar-thumb{background:#8f94a3}")}function B(e,t,i){const a=e.slice();return a[10]=t[i],a}function E(e){let t,i,a,n,d,y,p=e[0],g=[];for(let t=0;t<p.length;t+=1)g[t]=G(B(e,p,t));const v=e=>o(g[e],1,1,(()=>{g[e]=null}));let h=e[3]&&e[4]&&C(e);return{c(){t=b("div"),i=b("ul");for(let e=0;e<g.length;e+=1)g[e].c();d=m(),h&&h.c(),f(i,"class",a=u(e[3]&&e[4]?"is-hidden":"is-visible")+" svelte-kwnya"),f(i,"aria-hidden",n=e[3]&&e[4]),f(t,"class","mc-sidebar-section svelte-kwnya")},m(e,a){s(e,t,a),w(t,i);for(let e=0;e<g.length;e+=1)g[e]&&g[e].m(i,null);w(t,d),h&&h.m(t,null),y=!0},p(e,s){if(103&s){let t;for(p=e[0],t=0;t<p.length;t+=1){const a=B(e,p,t);g[t]?(g[t].p(a,s),l(g[t],1)):(g[t]=G(a),g[t].c(),l(g[t],1),g[t].m(i,null))}for(k(),t=p.length;t<g.length;t+=1)v(t);r()}(!y||24&s&&a!==(a=u(e[3]&&e[4]?"is-hidden":"is-visible")+" svelte-kwnya"))&&f(i,"class",a),(!y||24&s&&n!==(n=e[3]&&e[4]))&&f(i,"aria-hidden",n),e[3]&&e[4]?h?(h.p(e,s),24&s&&l(h,1)):(h=C(e),h.c(),l(h,1),h.m(t,null)):h&&(k(),o(h,1,1,(()=>{h=null})),r())},i(e){if(!y){for(let e=0;e<p.length;e+=1)l(g[e]);l(h),y=!0}},o(e){g=g.filter(Boolean);for(let e=0;e<g.length;e+=1)o(g[e]);o(h),y=!1},d(e){e&&c(t),x(g,e),h&&h.d()}}}function G(e){let t,i,a,n,r,d;function u(){return e[8](e[10])}return i=new h({props:{featureGroup:e[10],expand:e[2]===e[10].code,a11yLabels:e[1]}}),i.$on("feature-click",e[7]),{c(){t=b("li"),y(i.$$.fragment),a=m(),f(t,"class","svelte-kwnya")},m(e,l){s(e,t,l),p(i,t,null),w(t,a),n=!0,r||(d=g(t,"click",u),r=!0)},p(t,a){e=t;const n={};1&a&&(n.featureGroup=e[10]),5&a&&(n.expand=e[2]===e[10].code),2&a&&(n.a11yLabels=e[1]),i.$set(n)},i(e){n||(l(i.$$.fragment,e),n=!0)},o(e){o(i.$$.fragment,e),n=!1},d(e){e&&c(t),v(i),r=!1,d()}}}function C(e){let t,i;return t=new $({props:{data:e[3],a11yLabels:e[1]}}),t.$on("back-click",e[9]),{c(){y(t.$$.fragment)},m(e,a){p(t,e,a),i=!0},p(e,i){const a={};8&i&&(a.data=e[3]),2&i&&(a.a11yLabels=e[1]),t.$set(a)},i(e){i||(l(t.$$.fragment,e),i=!0)},o(e){o(t.$$.fragment,e),i=!1},d(e){v(t,e)}}}function D(e){let t,i,a=e[0]?.length&&E(e);return{c(){a&&a.c(),t=n()},m(e,n){a&&a.m(e,n),s(e,t,n),i=!0},p(e,[i]){e[0]?.length?a?(a.p(e,i),1&i&&l(a,1)):(a=E(e),a.c(),l(a,1),a.m(t.parentNode,t)):a&&(k(),o(a,1,1,(()=>{a=null})),r())},i(e){i||(l(a),i=!0)},o(e){o(a),i=!1},d(e){a&&a.d(e),e&&c(t)}}}function F(e,t,i){let a;d(e,L,(e=>i(4,a=e)));let n,s,{data:l=[]}=t,{a11yLabels:o}=t;function r(e){const t=a;t||j(),i(2,n=t&&n===e?void 0:e)}function c(e){(null==e?void 0:e.detail)?s&&s.code===e.detail.code?i(3,s=void 0):i(3,s=e.detail):i(3,s=void 0)}return e.$$set=e=>{"data"in e&&i(0,l=e.data),"a11yLabels"in e&&i(1,o=e.a11yLabels)},[l,o,n,s,a,r,c,e=>c(e),e=>r(e.code),()=>c()]}class H extends e{constructor(e){super(),t(this,e,F,D,i,{data:0,a11yLabels:1},z)}}export{H as default};
+import{E as e,i as t,s as i,F as a,P as n,b as s,y as l,w as o,x as r,o as c,ab as d,e as b,d as m,g as f,T as u,j as w,z as k,O as x,B as y,C as p,l as g,D as v}from"../../index-9ffad6d0.js";import h from"./sidebar-feature-group.nested.js";import $ from"./sidebar-sub-features.nested.js";import{t as j,i as L}from"../../sidebar-service-ab65d83f.js";import"./sidebar-feature.nested.js";import"../../EventHandler-f7ee47ca.js";function z(e){a(e,"svelte-kwnya",".mc-sidebar-section.svelte-kwnya.svelte-kwnya{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;min-height:38px;overflow-x:hidden;overflow-y:auto;overflow-y:overlay;padding:1px 0px;scrollbar-color:#8f94a3 #b3b3b3;scrollbar-width:thin}.mc-sidebar-section.svelte-kwnya ul.svelte-kwnya,.mc-sidebar-section.svelte-kwnya li.svelte-kwnya{list-style-type:none;margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}.mc-sidebar-section.svelte-kwnya ul.svelte-kwnya{-webkit-box-align:start;-ms-flex-align:start;align-items:start;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-sidebar-section.svelte-kwnya ul li.svelte-kwnya{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;margin:4px 0px}.mc-sidebar-section.svelte-kwnya ul li.svelte-kwnya:first-child{margin-top:0}.mc-sidebar-section.svelte-kwnya ul li.svelte-kwnya:last-child{margin-bottom:0}.mc-sidebar-section.svelte-kwnya ul.is-hidden.svelte-kwnya{-o-transition:margin-left 300ms ease-in-out;-webkit-transition:margin-left 300ms ease-in-out;transition:margin-left 300ms ease-in-out;margin-left:-320px;opacity:0}.mc-sidebar-section.svelte-kwnya ul.is-visible.svelte-kwnya{-o-transition:margin-left 300ms ease-in-out;-webkit-transition:margin-left 300ms ease-in-out;transition:margin-left 300ms ease-in-out;margin-left:0}.mc-sidebar-section.svelte-kwnya.svelte-kwnya::-webkit-scrollbar{width:5px;height:10px;background:#b3b3b3}.mc-sidebar-section.svelte-kwnya.svelte-kwnya::-webkit-scrollbar-thumb{background:#8f94a3}")}function B(e,t,i){const a=e.slice();return a[10]=t[i],a}function E(e){let t,i,a,n,d,y,p=e[0],g=[];for(let t=0;t<p.length;t+=1)g[t]=G(B(e,p,t));const v=e=>o(g[e],1,1,(()=>{g[e]=null}));let h=e[3]&&e[4]&&C(e);return{c(){t=b("div"),i=b("ul");for(let e=0;e<g.length;e+=1)g[e].c();d=m(),h&&h.c(),f(i,"class",a=u(e[3]&&e[4]?"is-hidden":"is-visible")+" svelte-kwnya"),f(i,"aria-hidden",n=e[3]&&e[4]),f(t,"class","mc-sidebar-section svelte-kwnya")},m(e,a){s(e,t,a),w(t,i);for(let e=0;e<g.length;e+=1)g[e]&&g[e].m(i,null);w(t,d),h&&h.m(t,null),y=!0},p(e,s){if(103&s){let t;for(p=e[0],t=0;t<p.length;t+=1){const a=B(e,p,t);g[t]?(g[t].p(a,s),l(g[t],1)):(g[t]=G(a),g[t].c(),l(g[t],1),g[t].m(i,null))}for(k(),t=p.length;t<g.length;t+=1)v(t);r()}(!y||24&s&&a!==(a=u(e[3]&&e[4]?"is-hidden":"is-visible")+" svelte-kwnya"))&&f(i,"class",a),(!y||24&s&&n!==(n=e[3]&&e[4]))&&f(i,"aria-hidden",n),e[3]&&e[4]?h?(h.p(e,s),24&s&&l(h,1)):(h=C(e),h.c(),l(h,1),h.m(t,null)):h&&(k(),o(h,1,1,(()=>{h=null})),r())},i(e){if(!y){for(let e=0;e<p.length;e+=1)l(g[e]);l(h),y=!0}},o(e){g=g.filter(Boolean);for(let e=0;e<g.length;e+=1)o(g[e]);o(h),y=!1},d(e){e&&c(t),x(g,e),h&&h.d()}}}function G(e){let t,i,a,n,r,d;function u(){return e[8](e[10])}return i=new h({props:{featureGroup:e[10],expand:e[2]===e[10].code,a11yLabels:e[1]}}),i.$on("feature-click",e[7]),{c(){t=b("li"),y(i.$$.fragment),a=m(),f(t,"class","svelte-kwnya")},m(e,l){s(e,t,l),p(i,t,null),w(t,a),n=!0,r||(d=g(t,"click",u),r=!0)},p(t,a){e=t;const n={};1&a&&(n.featureGroup=e[10]),5&a&&(n.expand=e[2]===e[10].code),2&a&&(n.a11yLabels=e[1]),i.$set(n)},i(e){n||(l(i.$$.fragment,e),n=!0)},o(e){o(i.$$.fragment,e),n=!1},d(e){e&&c(t),v(i),r=!1,d()}}}function C(e){let t,i;return t=new $({props:{data:e[3],a11yLabels:e[1]}}),t.$on("back-click",e[9]),{c(){y(t.$$.fragment)},m(e,a){p(t,e,a),i=!0},p(e,i){const a={};8&i&&(a.data=e[3]),2&i&&(a.a11yLabels=e[1]),t.$set(a)},i(e){i||(l(t.$$.fragment,e),i=!0)},o(e){o(t.$$.fragment,e),i=!1},d(e){v(t,e)}}}function D(e){let t,i,a=e[0]?.length&&E(e);return{c(){a&&a.c(),t=n()},m(e,n){a&&a.m(e,n),s(e,t,n),i=!0},p(e,[i]){e[0]?.length?a?(a.p(e,i),1&i&&l(a,1)):(a=E(e),a.c(),l(a,1),a.m(t.parentNode,t)):a&&(k(),o(a,1,1,(()=>{a=null})),r())},i(e){i||(l(a),i=!0)},o(e){o(a),i=!1},d(e){a&&a.d(e),e&&c(t)}}}function F(e,t,i){let a;d(e,L,(e=>i(4,a=e)));let n,s,{data:l=[]}=t,{a11yLabels:o}=t;function r(e){const t=a;t||j(),i(2,n=t&&n===e?void 0:e)}function c(e){(null==e?void 0:e.detail)?s&&s.code===e.detail.code?i(3,s=void 0):i(3,s=e.detail):i(3,s=void 0)}return e.$$set=e=>{"data"in e&&i(0,l=e.data),"a11yLabels"in e&&i(1,o=e.a11yLabels)},[l,o,n,s,a,r,c,e=>c(e),e=>r(e.code),()=>c()]}class H extends e{constructor(e){super(),t(this,e,F,D,i,{data:0,a11yLabels:1},z)}}export{H as default};
 //# sourceMappingURL=sidebar-section.nested.js.map

package/public/components/sidebar/sidebar-section.nested.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-section.nested.js","sources":["../../../src/components/sidebar/sidebar-section.nested.svelte"],"sourcesContent":["<svelte:options />\n\n<script lang=\"ts\">\n  import type { A11yLabels, Feature, FeatureGroup } from './sidebar.types';\n  import FeatureGroupComponent from './sidebar-feature-group.nested.svelte';\n  import SubFeaturesComponent from './sidebar-sub-features.nested.svelte';\n  import { isSidebarOpen, toggleSidebar } from './sidebar-service';\n\n  export let data: FeatureGroup[] = [];\n  export let a11yLabels: A11yLabels;\n\n  let expandedGroup: string | undefined;\n  let expandedSubGroup: Feature | undefined;\n\n  function handleGroupClick(code: string) {\n    // opens the menu if at the time of the click on a FeatureGroup this one was closed\n    const open = $isSidebarOpen;\n    if (!open) {\n      toggleSidebar();\n    }\n\n    if (open && expandedGroup === code) {\n      expandedGroup = undefined;\n    } else {\n      expandedGroup = code;\n    }\n  }\n\n  function handleFeatureClick(event?: CustomEvent<Feature>) {\n    if (event?.detail) {\n      if (expandedSubGroup && expandedSubGroup.code === event.detail.code) {\n        expandedSubGroup = undefined;\n      } else {\n        expandedSubGroup = event.detail;\n      }\n    } else {\n      expandedSubGroup = undefined;\n    }\n  }\n</script>\n\n{#if data?.length}\n  <div class=\"mc-sidebar-section\">\n    <ul\n      class={expandedSubGroup && $isSidebarOpen ? 'is-hidden' : 'is-visible'}\n      aria-hidden={expandedSubGroup && $isSidebarOpen}\n    >\n      {#each data as featureGroup}\n        <li on:click={() => handleGroupClick(featureGroup.code)}>\n          <FeatureGroupComponent\n            {featureGroup}\n            expand={expandedGroup === featureGroup.code}\n            {a11yLabels}\n            on:feature-click={(event) => handleFeatureClick(event)}\n          />\n        </li>\n      {/each}\n    </ul>\n    {#if expandedSubGroup && $isSidebarOpen}\n      <SubFeaturesComponent\n        data={expandedSubGroup}\n        {a11yLabels}\n        on:back-click={() => handleFeatureClick()}\n      />\n    {/if}\n  </div>\n{/if}\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import './sidebar-variables';\n\n  .mc-sidebar-section {\n    display: flex;\n    flex-direction: row;\n    flex: 1;\n    align-items: flex-start;\n    min-height: 38px;\n    overflow-x: hidden;\n    overflow-y: auto;\n    overflow-y: overlay;\n    padding: 1px 0px;\n    scrollbar-color: $color-primary-02-400 $color-sidebar-divider-background;\n    scrollbar-width: thin;\n\n    ul,\n    li {\n      list-style-type: none;\n      margin: 0;\n      padding: 0;\n      display: flex;\n      width: 100%;\n    }\n\n    ul {\n      align-items: start;\n      flex-direction: column;\n      justify-content: center;\n\n      li {\n        flex-direction: column;\n        box-sizing: border-box;\n        margin: 4px 0px;\n\n        &:first-child {\n          margin-top: 0;\n        }\n        &:last-child {\n          margin-bottom: 0;\n        }\n      }\n\n      &.is-hidden {\n        @include transition(margin-left 300ms ease-in-out);\n        margin-left: -320px;\n        opacity: 0;\n      }\n\n      &.is-visible {\n        @include transition(margin-left 300ms ease-in-out);\n        margin-left: 0;\n      }\n    }\n\n    &::-webkit-scrollbar {\n      width: 5px;\n      height: 10px;\n      background: $color-sidebar-scroll-background;\n\n      &-thumb {\n        background: $color-sidebar-scroll-color;\n      }\n    }\n  }\n</style>\n"],"names":["ctx","length","i","if_block","create_if_block_1","attr","ul","ul_class_value","null_to_empty","ul_aria_hidden_value","insert","target","div","anchor","append","each_blocks","current","dirty","code","li","create_if_block","expandedGroup","expandedSubGroup","data","$$props","a11yLabels","handleGroupClick","open","$isSidebarOpen","toggleSidebar","$$invalidate","undefined","handleFeatureClick","event","detail","featureGroup"],"mappings":"s7EA+CaA,EAAI,wBAATC,OAAIC,GAAA,4DAWH,IAAAC,EAAAH,MAAoBA,EAAc,IAAAI,EAAAJ,uFAd9BK,EAAAC,EAAA,QAAAC,EAAAC,EAAAR,MAAoBA,EAAc,GAAG,YAAc,cAAY,iBACzDK,EAAAC,EAAA,cAAAG,EAAAT,MAAoBA,EAAc,2DAHnDU,EAuBKC,EAAAC,EAAAC,GAtBHC,EAcIF,EAAAN,6GAVKN,EAAI,WAATC,OAAIC,GAAA,EAAA,yGAAJD,OAAIC,EAAAa,EAAAd,OAAAC,GAAA,aAHCc,GAAA,GAAAC,GAAAV,KAAAA,EAAAC,EAAAR,MAAoBA,EAAc,GAAG,YAAc,cAAY,oCACzDgB,GAAA,GAAAC,GAAAR,KAAAA,EAAAT,MAAoBA,EAAc,2BAa5CA,MAAoBA,EAAc,iIAXnCC,OAAIC,GAAA,4OAIQF,EAAa,KAAKA,EAAY,IAACkB,8HAH3CR,EAOIC,EAAAQ,EAAAN,wHAJQb,EAAa,KAAKA,EAAY,IAACkB,0LASrClB,EAAgB,2HAAhBA,EAAgB,6IAnBzBG,EAAAH,MAAMC,QAAMmB,EAAApB,yEAAZA,MAAMC,+NA9BLoB,EACAC,QAJOC,EAAI,IAAAC,cACJC,GAAsBD,EAKxB,SAAAE,EAAiBR,GAElB,MAAAS,EAAOC,EACRD,GACHE,IAIAC,EAAA,EAAAT,EADEM,GAAQN,IAAkBH,OACZa,EAEAb,GAIX,SAAAc,EAAmBC,IACtBA,eAAAA,EAAOC,QACLZ,GAAoBA,EAAiBJ,OAASe,EAAMC,OAAOhB,KAC7DY,EAAA,EAAAR,OAAmBS,OAEnBT,EAAmBW,EAAMC,QAG3BJ,EAAA,EAAAR,OAAmBS,sGAiBME,GAAUD,EAAmBC,MALhCP,EAAiBS,EAAajB,UAc7Bc"}
+{"version":3,"file":"sidebar-section.nested.js","sources":["../../../src/components/sidebar/sidebar-section.nested.svelte"],"sourcesContent":["<svelte:options />\n\n<script lang=\"ts\">\n  import type { A11yLabels, Feature, FeatureGroup } from './sidebar.types';\n  import FeatureGroupComponent from './sidebar-feature-group.nested.svelte';\n  import SubFeaturesComponent from './sidebar-sub-features.nested.svelte';\n  import {\n    isSidebarOpen,\n    toggleSidebar,\n  } from '../../utilities/sidebar-service';\n\n  export let data: FeatureGroup[] = [];\n  export let a11yLabels: A11yLabels;\n\n  let expandedGroup: string | undefined;\n  let expandedSubGroup: Feature | undefined;\n\n  function handleGroupClick(code: string) {\n    // opens the menu if at the time of the click on a FeatureGroup this one was closed\n    const open = $isSidebarOpen;\n    if (!open) {\n      toggleSidebar();\n    }\n\n    if (open && expandedGroup === code) {\n      expandedGroup = undefined;\n    } else {\n      expandedGroup = code;\n    }\n  }\n\n  function handleFeatureClick(event?: CustomEvent<Feature>) {\n    if (event?.detail) {\n      if (expandedSubGroup && expandedSubGroup.code === event.detail.code) {\n        expandedSubGroup = undefined;\n      } else {\n        expandedSubGroup = event.detail;\n      }\n    } else {\n      expandedSubGroup = undefined;\n    }\n  }\n</script>\n\n{#if data?.length}\n  <div class=\"mc-sidebar-section\">\n    <ul\n      class={expandedSubGroup && $isSidebarOpen ? 'is-hidden' : 'is-visible'}\n      aria-hidden={expandedSubGroup && $isSidebarOpen}\n    >\n      {#each data as featureGroup}\n        <li on:click={() => handleGroupClick(featureGroup.code)}>\n          <FeatureGroupComponent\n            {featureGroup}\n            expand={expandedGroup === featureGroup.code}\n            {a11yLabels}\n            on:feature-click={(event) => handleFeatureClick(event)}\n          />\n        </li>\n      {/each}\n    </ul>\n    {#if expandedSubGroup && $isSidebarOpen}\n      <SubFeaturesComponent\n        data={expandedSubGroup}\n        {a11yLabels}\n        on:back-click={() => handleFeatureClick()}\n      />\n    {/if}\n  </div>\n{/if}\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import './_c.sidebar';\n\n  .mc-sidebar-section {\n    display: flex;\n    flex-direction: row;\n    flex: 1;\n    align-items: flex-start;\n    min-height: 38px;\n    overflow-x: hidden;\n    overflow-y: auto;\n    overflow-y: overlay;\n    padding: 1px 0px;\n    scrollbar-color: $color-primary-02-400 $color-sidebar-divider-background;\n    scrollbar-width: thin;\n\n    ul,\n    li {\n      list-style-type: none;\n      margin: 0;\n      padding: 0;\n      display: flex;\n      width: 100%;\n    }\n\n    ul {\n      align-items: start;\n      flex-direction: column;\n      justify-content: center;\n\n      li {\n        flex-direction: column;\n        box-sizing: border-box;\n        margin: 4px 0px;\n\n        &:first-child {\n          margin-top: 0;\n        }\n        &:last-child {\n          margin-bottom: 0;\n        }\n      }\n\n      &.is-hidden {\n        @include transition(margin-left 300ms ease-in-out);\n        margin-left: -320px;\n        opacity: 0;\n      }\n\n      &.is-visible {\n        @include transition(margin-left 300ms ease-in-out);\n        margin-left: 0;\n      }\n    }\n\n    &::-webkit-scrollbar {\n      width: 5px;\n      height: 10px;\n      background: $color-sidebar-scroll-background;\n\n      &-thumb {\n        background: $color-sidebar-scroll-color;\n      }\n    }\n  }\n</style>\n"],"names":["ctx","length","i","if_block","create_if_block_1","attr","ul","ul_class_value","null_to_empty","ul_aria_hidden_value","insert","target","div","anchor","append","each_blocks","current","dirty","code","li","create_if_block","expandedGroup","expandedSubGroup","data","$$props","a11yLabels","handleGroupClick","open","$isSidebarOpen","toggleSidebar","$$invalidate","undefined","handleFeatureClick","event","detail","featureGroup"],"mappings":"s7EAkDaA,EAAI,wBAATC,OAAIC,GAAA,4DAWH,IAAAC,EAAAH,MAAoBA,EAAc,IAAAI,EAAAJ,uFAd9BK,EAAAC,EAAA,QAAAC,EAAAC,EAAAR,MAAoBA,EAAc,GAAG,YAAc,cAAY,iBACzDK,EAAAC,EAAA,cAAAG,EAAAT,MAAoBA,EAAc,2DAHnDU,EAuBKC,EAAAC,EAAAC,GAtBHC,EAcIF,EAAAN,6GAVKN,EAAI,WAATC,OAAIC,GAAA,EAAA,yGAAJD,OAAIC,EAAAa,EAAAd,OAAAC,GAAA,aAHCc,GAAA,GAAAC,GAAAV,KAAAA,EAAAC,EAAAR,MAAoBA,EAAc,GAAG,YAAc,cAAY,oCACzDgB,GAAA,GAAAC,GAAAR,KAAAA,EAAAT,MAAoBA,EAAc,2BAa5CA,MAAoBA,EAAc,iIAXnCC,OAAIC,GAAA,4OAIQF,EAAa,KAAKA,EAAY,IAACkB,8HAH3CR,EAOIC,EAAAQ,EAAAN,wHAJQb,EAAa,KAAKA,EAAY,IAACkB,0LASrClB,EAAgB,2HAAhBA,EAAgB,6IAnBzBG,EAAAH,MAAMC,QAAMmB,EAAApB,yEAAZA,MAAMC,+NA9BLoB,EACAC,QAJOC,EAAI,IAAAC,cACJC,GAAsBD,EAKxB,SAAAE,EAAiBR,GAElB,MAAAS,EAAOC,EACRD,GACHE,IAIAC,EAAA,EAAAT,EADEM,GAAQN,IAAkBH,OACZa,EAEAb,GAIX,SAAAc,EAAmBC,IACtBA,eAAAA,EAAOC,QACLZ,GAAoBA,EAAiBJ,OAASe,EAAMC,OAAOhB,KAC7DY,EAAA,EAAAR,OAAmBS,OAEnBT,EAAmBW,EAAMC,QAG3BJ,EAAA,EAAAR,OAAmBS,sGAiBME,GAAUD,EAAmBC,MALhCP,EAAiBS,EAAajB,UAc7Bc"}

package/public/{adeo/components/sidebar-section → components/sidebar}/sidebar-section.nested.svelte

@@ -4,7 +4,10 @@
   import type { A11yLabels, Feature, FeatureGroup } from './sidebar.types';
   import FeatureGroupComponent from './sidebar-feature-group.nested.svelte';
   import SubFeaturesComponent from './sidebar-sub-features.nested.svelte';
-  import { isSidebarOpen, toggleSidebar } from './sidebar-service';
+  import {
+    isSidebarOpen,
+    toggleSidebar,
+  } from '../../utilities/sidebar-service';
 
   export let data: FeatureGroup[] = [];
   export let a11yLabels: A11yLabels;
@@ -68,7 +71,7 @@
 
 <style lang="scss">
   @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import './sidebar-variables';
+  @import './_c.sidebar';
 
   .mc-sidebar-section {
     display: flex;