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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mozaic-ds/web-components",
3
- "version": "0.28.1-beta.0",
3
+ "version": "0.28.1",
4
4
  "description": "Web component Mozaic DS implementation",
5
5
  "license": "MIT",
6
6
  "engines": {
@@ -1,2 +1,2 @@
1
- import{H as e,i as t,s as i,I as o,e as s,d as n,h as l,b as a,k as r,B as c,z as m,A as u,m as d,R as p,ag as f,p as b,q as v,r as g,Y as y,Z as h,_ as x,$ as _,v as w,T as k,y as $,E as L,F as H,x as z,Q as j,G as E,C as G,K as M,J as B}from"../../index-c222d0b7.js";import T from"./sidebar-feature.nested.js";import{a as q,i as A,s as C}from"../../sidebar-service-8aa10fb1.js";import{E as F}from"../../EventHandler-f7ee47ca.js";function N(e){o(e,"svelte-m824yt",".mc-feature-group.svelte-m824yt.svelte-m824yt{background:none;border:none;color:#ffffff;cursor:pointer;font-size:inherit;font-family:inherit;text-align:initial;margin:0;padding:0;overflow:hidden}.mc-feature-group__icon.svelte-m824yt.svelte-m824yt{fill:#ffffff;height:1.5rem;width:1.5rem}.mc-feature-group__container.svelte-m824yt.svelte-m824yt{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;-webkit-transition:margin 300ms ease-in-out;transition:margin 300ms ease-in-out}.mc-feature-group__label.svelte-m824yt.svelte-m824yt{margin:0 8px;width:200px;min-width:200px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.mc-feature-group__label__tooltip.svelte-m824yt.svelte-m824yt{opacity:0;-webkit-transition:0s opacity;transition:0s opacity;background-color:#5b737d;border:1px solid #ffffff;border-radius:4px;position:absolute;pointer-events:none;left:calc(100% - 16px);padding:8px 16px;width:188px}.mc-feature-group__label__tooltip__pointer.svelte-m824yt.svelte-m824yt{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-m824yt div.svelte-m824yt{position:relative;top:-6px;left:2px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid #5b737d}.mc-feature-group__label.svelte-m824yt:hover+.mc-feature-group__label__tooltip.svelte-m824yt{opacity:1;-webkit-transition-delay:1s;transition-delay:1s}.mc-feature-group__content.svelte-m824yt.svelte-m824yt{overflow:hidden;-webkit-transition:height 300ms ease-in-out;transition:height 300ms ease-in-out}.mc-feature-group__content.is-close.svelte-m824yt.svelte-m824yt{height:0}.mc-feature-group.is-selected.svelte-m824yt.svelte-m824yt{background:#5b737d}.mc-feature-group.is-close.svelte-m824yt .mc-feature-group__container.svelte-m824yt{margin:0 20px;width:24px}.mc-feature-group.is-open.svelte-m824yt .mc-feature-group__container.svelte-m824yt{margin:0 32px}.mc-feature-group.svelte-m824yt.svelte-m824yt:hover{background:#405d68}.mc-feature-group.svelte-m824yt.svelte-m824yt:focus-visible{-webkit-box-shadow:none;box-shadow:none;border:none;outline:none}.mc-feature-group.svelte-m824yt:focus-visible .mc-feature-group__container.svelte-m824yt{-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}ul.svelte-m824yt.svelte-m824yt,li.svelte-m824yt.svelte-m824yt{list-style-type:none;margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}ul.svelte-m824yt.svelte-m824yt{-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-m824yt li.svelte-m824yt{-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 S(e,t,i){const o=e.slice();return o[18]=t[i],o}const V=e=>({}),I=e=>({});function J(e){let t,i=`<${P(e[0].icon)} />`;return{c(){t=s("span"),l(t,"class","mc-feature-group__icon svelte-m824yt")},m(e,o){a(e,t,o),t.innerHTML=i},p(e,o){1&o&&i!==(i=`<${P(e[0].icon)} />`)&&(t.innerHTML=i)},d(e){e&&d(t)}}}function K(e){let t,i;const o=e[11].icon,n=y(o,e,e[10],I);return{c(){t=s("span"),n&&n.c(),l(t,"class","mc-feature-group__icon svelte-m824yt")},m(e,o){a(e,t,o),n&&n.m(t,null),i=!0},p(e,t){n&&n.p&&(!i||1024&t)&&h(n,o,e,e[10],i?_(o,e[10],t,V):x(e[10]),I)},i(e){i||(c(n,e),i=!0)},o(e){m(n,e),i=!1},d(e){e&&d(t),n&&n.d(e)}}}function Q(e){let t,i,o,c,m,u=e[0].label+"",p=e[6]?.offsetHeight<e[6]?.scrollHeight&&R(e);function f(e,t){return e[1]?Y:Z}let b=f(e),v=b(e);return{c(){t=s("span"),i=w(u),o=n(),p&&p.c(),c=n(),v.c(),m=k(),l(t,"class","mc-feature-group__label svelte-m824yt")},m(s,n){a(s,t,n),r(t,i),e[12](t),a(s,o,n),p&&p.m(s,n),a(s,c,n),v.m(s,n),a(s,m,n)},p(e,t){1&t&&u!==(u=e[0].label+"")&&$(i,u),e[6]?.offsetHeight<e[6]?.scrollHeight?p?p.p(e,t):(p=R(e),p.c(),p.m(c.parentNode,c)):p&&(p.d(1),p=null),b!==(b=f(e))&&(v.d(1),v=b(e),v&&(v.c(),v.m(m.parentNode,m)))},d(i){i&&d(t),e[12](null),i&&d(o),p&&p.d(i),i&&d(c),v.d(i),i&&d(m)}}}function R(e){let t,i,o,c,m,u=e[0].label+"";return{c(){t=s("div"),i=s("div"),i.innerHTML='<div class="svelte-m824yt"></div>',o=n(),c=s("span"),m=w(u),l(i,"class","mc-feature-group__label__tooltip__pointer svelte-m824yt"),l(t,"aria-hidden","true"),l(t,"class","mc-feature-group__label__tooltip svelte-m824yt")},m(e,s){a(e,t,s),r(t,i),r(t,o),r(t,c),r(c,m)},p(e,t){1&t&&u!==(u=e[0].label+"")&&$(m,u)},d(e){e&&d(t)}}}function Y(e){let t,i;return{c(){t=B("svg"),i=B("path"),l(i,"d","M12 9H4a1 1 0 010-2h8a1 1 0 010 2z"),l(t,"class","mc-feature-group__icon svelte-m824yt"),l(t,"width","16px"),l(t,"height","16px"),l(t,"viewBox","0 0 16 16")},m(e,o){a(e,t,o),r(t,i)},d(e){e&&d(t)}}}function Z(e){let t,i;return{c(){t=B("svg"),i=B("path"),l(i,"d","M13 7H9V3a1 1 0 00-2 0v4H3a1 1 0 000 2h4v4a1 1 0 002 0V9h4a1 1 0 000-2z"),l(t,"class","mc-feature-group__icon svelte-m824yt"),l(t,"width","16px"),l(t,"height","16px"),l(t,"viewBox","0 0 16 16")},m(e,o){a(e,t,o),r(t,i)},d(e){e&&d(t)}}}function D(e){let t,i,o,u,p,f;function b(){return e[13](e[18])}return i=new T({props:{feature:e[18],a11yLabels:e[2]}}),{c(){t=s("li"),L(i.$$.fragment),o=n(),l(t,"class","svelte-m824yt")},m(e,s){a(e,t,s),H(i,t,null),r(t,o),u=!0,p||(f=z(t,"click",j(b)),p=!0)},p(t,o){e=t;const s={};1&o&&(s.feature=e[18]),4&o&&(s.a11yLabels=e[2]),i.$set(s)},i(e){u||(c(i.$$.fragment,e),u=!0)},o(e){m(i.$$.fragment,e),u=!1},d(e){e&&d(t),E(i),p=!1,f()}}}function O(e){let t,i,o,f,b,v,g,y,h,x,_,w,k,$,L=e[0].icon&&J(e),H=e[8].icon&&K(e),z=e[3]&&Q(e),j=e[0].items,E=[];for(let t=0;t<j.length;t+=1)E[t]=D(S(e,j,t));const M=e=>m(E[e],1,1,(()=>{E[e]=null}));return{c(){t=s("button"),i=s("span"),L&&L.c(),o=n(),H&&H.c(),f=n(),z&&z.c(),x=n(),_=s("ul");for(let e=0;e<E.length;e+=1)E[e].c();l(i,"class","mc-feature-group__container svelte-m824yt"),l(t,"class",b="mc-feature-group "+(e[5]?"is-selected":"")+" "+(e[3]?"is-open":"is-close")+" svelte-m824yt"),l(t,"aria-label",v=e[0].label),l(t,"aria-expanded",g=e[3]&&e[1]),l(t,"aria-controls",y=e[0].code+"-list"),l(t,"id",h=e[0].code),l(_,"class","mc-feature-group__content is-close svelte-m824yt"),l(_,"aria-hidden",w=!e[3]||!e[1]),l(_,"id",k=e[0].code+"-list")},m(s,n){a(s,t,n),r(t,i),L&&L.m(i,null),r(i,o),H&&H.m(i,null),r(i,f),z&&z.m(i,null),a(s,x,n),a(s,_,n);for(let e=0;e<E.length;e+=1)E[e]&&E[e].m(_,null);e[14](_),$=!0},p(e,[s]){if(e[0].icon?L?L.p(e,s):(L=J(e),L.c(),L.m(i,o)):L&&(L.d(1),L=null),e[8].icon?H?(H.p(e,s),256&s&&c(H,1)):(H=K(e),H.c(),c(H,1),H.m(i,f)):H&&(G(),m(H,1,1,(()=>{H=null})),u()),e[3]?z?z.p(e,s):(z=Q(e),z.c(),z.m(i,null)):z&&(z.d(1),z=null),(!$||40&s&&b!==(b="mc-feature-group "+(e[5]?"is-selected":"")+" "+(e[3]?"is-open":"is-close")+" svelte-m824yt"))&&l(t,"class",b),(!$||1&s&&v!==(v=e[0].label))&&l(t,"aria-label",v),(!$||10&s&&g!==(g=e[3]&&e[1]))&&l(t,"aria-expanded",g),(!$||1&s&&y!==(y=e[0].code+"-list"))&&l(t,"aria-controls",y),(!$||1&s&&h!==(h=e[0].code))&&l(t,"id",h),133&s){let t;for(j=e[0].items,t=0;t<j.length;t+=1){const i=S(e,j,t);E[t]?(E[t].p(i,s),c(E[t],1)):(E[t]=D(i),E[t].c(),c(E[t],1),E[t].m(_,null))}for(G(),t=j.length;t<E.length;t+=1)M(t);u()}(!$||10&s&&w!==(w=!e[3]||!e[1]))&&l(_,"aria-hidden",w),(!$||1&s&&k!==(k=e[0].code+"-list"))&&l(_,"id",k)},i(e){if(!$){c(H);for(let e=0;e<j.length;e+=1)c(E[e]);$=!0}},o(e){m(H),E=E.filter(Boolean);for(let e=0;e<E.length;e+=1)m(E[e]);$=!1},d(i){i&&d(t),L&&L.d(),H&&H.d(),z&&z.d(),i&&d(x),i&&d(_),p(E,i),e[14](null)}}}function P(e){return`${e} size="1.5rem"`}function U(e,t,i){let o,s;f(e,A,(e=>i(3,o=e))),f(e,C,(e=>i(9,s=e)));let{$$slots:n={},$$scope:l}=t;const a=b(n);let r,c,{featureGroup:m}=t,{expand:u}=t,{a11yLabels:d}=t,p=new F(v(),g()),y=!1;function h(e){var t;e.disabled||((null===(t=e.items)||void 0===t?void 0:t.length)?p.dispatch("feature-click",e):q(e.code))}return e.$$set=e=>{"featureGroup"in e&&i(0,m=e.featureGroup),"expand"in e&&i(1,u=e.expand),"a11yLabels"in e&&i(2,d=e.a11yLabels),"$$scope"in e&&i(10,l=e.$$scope)},e.$$.update=()=>{var t,n,l,a,c,d;523&e.$$.dirty&&(t=u,n=o,l=m,i(5,y=null!==(d=(null==(a=s)?void 0:a.lv0)&&l.code===(null===(c=null==a?void 0:a.lv0)||void 0===c?void 0:c.code)&&(!a.lv1||!t||!n))&&void 0!==d&&d)),10&e.$$.dirty&&function(e,t){if(r){i(4,r.style.height="",r),i(4,r.style.transition="none",r);const o=window.getComputedStyle(r).height;r.classList.add(t&&e?"is-open":"is-close"),r.classList.remove(t&&e?"is-close":"is-open");const s=window.getComputedStyle(r).height;i(4,r.style.height=o,r),requestAnimationFrame((()=>{i(4,r.style.transition="",r),requestAnimationFrame((()=>{i(4,r.style.height=s,r)}))}));const n=()=>{i(4,r.style.height="",r),r.removeEventListener("transitionend",n)};r.addEventListener("transitionend",n)}}(u,o)},[m,u,d,o,r,y,c,h,a,s,l,n,function(e){M[e?"unshift":"push"]((()=>{c=e,i(6,c)}))},e=>h(e),function(e){M[e?"unshift":"push"]((()=>{r=e,i(4,r)}))}]}class W extends e{constructor(e){super(),t(this,e,U,O,i,{featureGroup:0,expand:1,a11yLabels:2},N)}}export{W as default};
1
+ import{H as e,i as t,s as i,I as o,e as n,d as s,h as l,b as a,k as r,B as c,z as u,A as m,m as d,R as p,ag as f,p as v,q as b,r as g,Y as y,Z as h,_ as x,$ as _,J as w,v as k,T as $,y as L,E as H,F as z,x as j,Q as E,G,C as M,K as B}from"../../index-c222d0b7.js";import P from"./sidebar-feature.nested.js";import{a as T,i as q,s as A}from"../../sidebar-service-8aa10fb1.js";import{E as C}from"../../EventHandler-f7ee47ca.js";function F(e){o(e,"svelte-m824yt",".mc-feature-group.svelte-m824yt.svelte-m824yt{background:none;border:none;color:#ffffff;cursor:pointer;font-size:inherit;font-family:inherit;text-align:initial;margin:0;padding:0;overflow:hidden}.mc-feature-group__icon.svelte-m824yt.svelte-m824yt{fill:#ffffff;height:1.5rem;width:1.5rem}.mc-feature-group__container.svelte-m824yt.svelte-m824yt{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;-webkit-transition:margin 300ms ease-in-out;transition:margin 300ms ease-in-out}.mc-feature-group__label.svelte-m824yt.svelte-m824yt{margin:0 8px;width:200px;min-width:200px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.mc-feature-group__label__tooltip.svelte-m824yt.svelte-m824yt{opacity:0;-webkit-transition:0s opacity;transition:0s opacity;background-color:#5b737d;border:1px solid #ffffff;border-radius:4px;position:absolute;pointer-events:none;left:calc(100% - 16px);padding:8px 16px;width:188px}.mc-feature-group__label__tooltip__pointer.svelte-m824yt.svelte-m824yt{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-m824yt div.svelte-m824yt{position:relative;top:-6px;left:2px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid #5b737d}.mc-feature-group__label.svelte-m824yt:hover+.mc-feature-group__label__tooltip.svelte-m824yt{opacity:1;-webkit-transition-delay:1s;transition-delay:1s}.mc-feature-group__content.svelte-m824yt.svelte-m824yt{overflow:hidden;-webkit-transition:height 300ms ease-in-out;transition:height 300ms ease-in-out}.mc-feature-group__content.is-close.svelte-m824yt.svelte-m824yt{height:0}.mc-feature-group.is-selected.svelte-m824yt.svelte-m824yt{background:#5b737d}.mc-feature-group.is-close.svelte-m824yt .mc-feature-group__container.svelte-m824yt{margin:0 20px;width:24px}.mc-feature-group.is-open.svelte-m824yt .mc-feature-group__container.svelte-m824yt{margin:0 32px}.mc-feature-group.svelte-m824yt.svelte-m824yt:hover{background:#405d68}.mc-feature-group.svelte-m824yt.svelte-m824yt:focus-visible{-webkit-box-shadow:none;box-shadow:none;border:none;outline:none}.mc-feature-group.svelte-m824yt:focus-visible .mc-feature-group__container.svelte-m824yt{-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}ul.svelte-m824yt.svelte-m824yt,li.svelte-m824yt.svelte-m824yt{list-style-type:none;margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}ul.svelte-m824yt.svelte-m824yt{-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-m824yt li.svelte-m824yt{-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 N(e,t,i){const o=e.slice();return o[18]=t[i],o}const S=e=>({}),V=e=>({});function I(e){let t,i=`<${U(e[0].icon)} />`;return{c(){t=n("span"),l(t,"class","mc-feature-group__icon svelte-m824yt")},m(e,o){a(e,t,o),t.innerHTML=i},p(e,o){1&o&&i!==(i=`<${U(e[0].icon)} />`)&&(t.innerHTML=i)},d(e){e&&d(t)}}}function J(e){let t,i;const o=e[11].icon,s=y(o,e,e[10],V);return{c(){t=n("span"),s&&s.c(),l(t,"class","mc-feature-group__icon svelte-m824yt")},m(e,o){a(e,t,o),s&&s.m(t,null),i=!0},p(e,t){s&&s.p&&(!i||1024&t)&&h(s,o,e,e[10],i?_(o,e[10],t,S):x(e[10]),V)},i(e){i||(c(s,e),i=!0)},o(e){u(s,e),i=!1},d(e){e&&d(t),s&&s.d(e)}}}function K(e){let t,i,o;return{c(){t=w("svg"),i=w("use"),l(i,"href",o=e[0].iconPath),l(t,"class","mc-feature-group__icon svelte-m824yt")},m(e,o){a(e,t,o),r(t,i)},p(e,t){1&t&&o!==(o=e[0].iconPath)&&l(i,"href",o)},d(e){e&&d(t)}}}function Q(e){let t,i,o,c,u,m=e[0].label+"",p=e[6]?.offsetHeight<e[6]?.scrollHeight&&R(e);function f(e,t){return e[1]?Y:Z}let v=f(e),b=v(e);return{c(){t=n("span"),i=k(m),o=s(),p&&p.c(),c=s(),b.c(),u=$(),l(t,"class","mc-feature-group__label svelte-m824yt")},m(n,s){a(n,t,s),r(t,i),e[12](t),a(n,o,s),p&&p.m(n,s),a(n,c,s),b.m(n,s),a(n,u,s)},p(e,t){1&t&&m!==(m=e[0].label+"")&&L(i,m),e[6]?.offsetHeight<e[6]?.scrollHeight?p?p.p(e,t):(p=R(e),p.c(),p.m(c.parentNode,c)):p&&(p.d(1),p=null),v!==(v=f(e))&&(b.d(1),b=v(e),b&&(b.c(),b.m(u.parentNode,u)))},d(i){i&&d(t),e[12](null),i&&d(o),p&&p.d(i),i&&d(c),b.d(i),i&&d(u)}}}function R(e){let t,i,o,c,u,m=e[0].label+"";return{c(){t=n("div"),i=n("div"),i.innerHTML='<div class="svelte-m824yt"></div>',o=s(),c=n("span"),u=k(m),l(i,"class","mc-feature-group__label__tooltip__pointer svelte-m824yt"),l(t,"aria-hidden","true"),l(t,"class","mc-feature-group__label__tooltip svelte-m824yt")},m(e,n){a(e,t,n),r(t,i),r(t,o),r(t,c),r(c,u)},p(e,t){1&t&&m!==(m=e[0].label+"")&&L(u,m)},d(e){e&&d(t)}}}function Y(e){let t,i;return{c(){t=w("svg"),i=w("path"),l(i,"d","M12 9H4a1 1 0 010-2h8a1 1 0 010 2z"),l(t,"class","mc-feature-group__icon svelte-m824yt"),l(t,"width","16px"),l(t,"height","16px"),l(t,"viewBox","0 0 16 16")},m(e,o){a(e,t,o),r(t,i)},d(e){e&&d(t)}}}function Z(e){let t,i;return{c(){t=w("svg"),i=w("path"),l(i,"d","M13 7H9V3a1 1 0 00-2 0v4H3a1 1 0 000 2h4v4a1 1 0 002 0V9h4a1 1 0 000-2z"),l(t,"class","mc-feature-group__icon svelte-m824yt"),l(t,"width","16px"),l(t,"height","16px"),l(t,"viewBox","0 0 16 16")},m(e,o){a(e,t,o),r(t,i)},d(e){e&&d(t)}}}function D(e){let t,i,o,m,p,f;function v(){return e[13](e[18])}return i=new P({props:{feature:e[18],a11yLabels:e[2]}}),{c(){t=n("li"),H(i.$$.fragment),o=s(),l(t,"class","svelte-m824yt")},m(e,n){a(e,t,n),z(i,t,null),r(t,o),m=!0,p||(f=j(t,"click",E(v)),p=!0)},p(t,o){e=t;const n={};1&o&&(n.feature=e[18]),4&o&&(n.a11yLabels=e[2]),i.$set(n)},i(e){m||(c(i.$$.fragment,e),m=!0)},o(e){u(i.$$.fragment,e),m=!1},d(e){e&&d(t),G(i),p=!1,f()}}}function O(e){let t,i,o,f,v,b,g,y,h,x,_,w,k,$,L,H=e[0].icon&&I(e),z=e[8].icon&&J(e),j=e[0].iconPath&&K(e),E=e[3]&&Q(e),G=e[0].items,B=[];for(let t=0;t<G.length;t+=1)B[t]=D(N(e,G,t));const P=e=>u(B[e],1,1,(()=>{B[e]=null}));return{c(){t=n("button"),i=n("span"),H&&H.c(),o=s(),z&&z.c(),f=s(),j&&j.c(),v=s(),E&&E.c(),_=s(),w=n("ul");for(let e=0;e<B.length;e+=1)B[e].c();l(i,"class","mc-feature-group__container svelte-m824yt"),l(t,"class",b="mc-feature-group "+(e[5]?"is-selected":"")+" "+(e[3]?"is-open":"is-close")+" svelte-m824yt"),l(t,"aria-label",g=e[0].label),l(t,"aria-expanded",y=e[3]&&e[1]),l(t,"aria-controls",h=e[0].code+"-list"),l(t,"id",x=e[0].code),l(w,"class","mc-feature-group__content is-close svelte-m824yt"),l(w,"aria-hidden",k=!e[3]||!e[1]),l(w,"id",$=e[0].code+"-list")},m(n,s){a(n,t,s),r(t,i),H&&H.m(i,null),r(i,o),z&&z.m(i,null),r(i,f),j&&j.m(i,null),r(i,v),E&&E.m(i,null),a(n,_,s),a(n,w,s);for(let e=0;e<B.length;e+=1)B[e]&&B[e].m(w,null);e[14](w),L=!0},p(e,[n]){if(e[0].icon?H?H.p(e,n):(H=I(e),H.c(),H.m(i,o)):H&&(H.d(1),H=null),e[8].icon?z?(z.p(e,n),256&n&&c(z,1)):(z=J(e),z.c(),c(z,1),z.m(i,f)):z&&(M(),u(z,1,1,(()=>{z=null})),m()),e[0].iconPath?j?j.p(e,n):(j=K(e),j.c(),j.m(i,v)):j&&(j.d(1),j=null),e[3]?E?E.p(e,n):(E=Q(e),E.c(),E.m(i,null)):E&&(E.d(1),E=null),(!L||40&n&&b!==(b="mc-feature-group "+(e[5]?"is-selected":"")+" "+(e[3]?"is-open":"is-close")+" svelte-m824yt"))&&l(t,"class",b),(!L||1&n&&g!==(g=e[0].label))&&l(t,"aria-label",g),(!L||10&n&&y!==(y=e[3]&&e[1]))&&l(t,"aria-expanded",y),(!L||1&n&&h!==(h=e[0].code+"-list"))&&l(t,"aria-controls",h),(!L||1&n&&x!==(x=e[0].code))&&l(t,"id",x),133&n){let t;for(G=e[0].items,t=0;t<G.length;t+=1){const i=N(e,G,t);B[t]?(B[t].p(i,n),c(B[t],1)):(B[t]=D(i),B[t].c(),c(B[t],1),B[t].m(w,null))}for(M(),t=G.length;t<B.length;t+=1)P(t);m()}(!L||10&n&&k!==(k=!e[3]||!e[1]))&&l(w,"aria-hidden",k),(!L||1&n&&$!==($=e[0].code+"-list"))&&l(w,"id",$)},i(e){if(!L){c(z);for(let e=0;e<G.length;e+=1)c(B[e]);L=!0}},o(e){u(z),B=B.filter(Boolean);for(let e=0;e<B.length;e+=1)u(B[e]);L=!1},d(i){i&&d(t),H&&H.d(),z&&z.d(),j&&j.d(),E&&E.d(),i&&d(_),i&&d(w),p(B,i),e[14](null)}}}function U(e){return`${e} size="1.5rem"`}function W(e,t,i){let o,n;f(e,q,(e=>i(3,o=e))),f(e,A,(e=>i(9,n=e)));let{$$slots:s={},$$scope:l}=t;const a=v(s);let r,c,{featureGroup:u}=t,{expand:m}=t,{a11yLabels:d}=t,p=new C(b(),g()),y=!1;function h(e){var t;e.disabled||((null===(t=e.items)||void 0===t?void 0:t.length)?p.dispatch("feature-click",e):T(e.code))}return e.$$set=e=>{"featureGroup"in e&&i(0,u=e.featureGroup),"expand"in e&&i(1,m=e.expand),"a11yLabels"in e&&i(2,d=e.a11yLabels),"$$scope"in e&&i(10,l=e.$$scope)},e.$$.update=()=>{var t,s,l,a,c,d;523&e.$$.dirty&&(t=m,s=o,l=u,i(5,y=null!==(d=(null==(a=n)?void 0:a.lv0)&&l.code===(null===(c=null==a?void 0:a.lv0)||void 0===c?void 0:c.code)&&(!a.lv1||!t||!s))&&void 0!==d&&d)),10&e.$$.dirty&&function(e,t){if(r){i(4,r.style.height="",r),i(4,r.style.transition="none",r);const o=window.getComputedStyle(r).height;r.classList.add(t&&e?"is-open":"is-close"),r.classList.remove(t&&e?"is-close":"is-open");const n=window.getComputedStyle(r).height;i(4,r.style.height=o,r),requestAnimationFrame((()=>{i(4,r.style.transition="",r),requestAnimationFrame((()=>{i(4,r.style.height=n,r)}))}));const s=()=>{i(4,r.style.height="",r),r.removeEventListener("transitionend",s)};r.addEventListener("transitionend",s)}}(m,o)},[u,m,d,o,r,y,c,h,a,n,l,s,function(e){B[e?"unshift":"push"]((()=>{c=e,i(6,c)}))},e=>h(e),function(e){B[e?"unshift":"push"]((()=>{r=e,i(4,r)}))}]}class X extends e{constructor(e){super(),t(this,e,W,O,i,{featureGroup:0,expand:1,a11yLabels:2},F)}}export{X as default};
2
2
  //# sourceMappingURL=sidebar-feature-group.nested.js.map
@@ -1 +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 {\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 $$slots.icon}\n <span class=\"mc-feature-group__icon\">\n <slot name=\"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_4","if_block1","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":"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"}
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 {\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 $$slots.icon}\n <span class=\"mc-feature-group__icon\">\n <slot name=\"icon\" />\n </span>\n {/if}\n {#if featureGroup.iconPath}\n <svg class=\"mc-feature-group__icon\">\n <use href={featureGroup.iconPath} />\n </svg>\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","attr","use","use_href_value","iconPath","svg","append","dirty","t0_value","label","if_block0","offsetHeight","scrollHeight","create_if_block_2","create_if_block_1","set_data","t0","t1_value","div2","div1","t1","path","li","create_if_block_5","if_block1","create_if_block_4","if_block2","create_if_block_3","create_if_block","each_value","items","length","i","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":"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"}
@@ -115,6 +115,11 @@
115
115
  <slot name="icon" />
116
116
  </span>
117
117
  {/if}
118
+ {#if featureGroup.iconPath}
119
+ <svg class="mc-feature-group__icon">
120
+ <use href={featureGroup.iconPath} />
121
+ </svg>
122
+ {/if}
118
123
  {#if $isSidebarOpen}
119
124
  <span class="mc-feature-group__label" bind:this={label}>
120
125
  {featureGroup.label}
@@ -1,2 +1,2 @@
1
- import{H as e,i as s,s as t,I as i,T as a,b as n,B as l,z as c,A as o,m as d,ag as r,p as m,e as v,d as k,v as b,h,k as p,x as g,C as f,y as u,Y as x,Z as _,_ as w,$,a4 as y}from"../../index-c222d0b7.js";import{a as j,s as P,i as z}from"../../sidebar-service-8aa10fb1.js";function A(e){i(e,"svelte-vehkk3",".mc-sidebar-segment.svelte-vehkk3.svelte-vehkk3{cursor:pointer;-webkit-box-flex:0;-ms-flex:0;flex:0;text-decoration:none;color:#ffffff;line-height:22px;display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden;min-height:40px}.mc-sidebar-segment__icon.svelte-vehkk3.svelte-vehkk3{fill:#ffffff;height:1.5rem;width:1.5rem}.mc-sidebar-segment__container.svelte-vehkk3.svelte-vehkk3{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;padding:8px 0px}.mc-sidebar-segment__text.svelte-vehkk3.svelte-vehkk3{margin-left:10px;width:200px;min-width:200px}.mc-sidebar-segment.is-selected.svelte-vehkk3.svelte-vehkk3{background:#5b737d}.mc-sidebar-segment.svelte-vehkk3.svelte-vehkk3:focus-visible{-webkit-box-shadow:none;box-shadow:none;border:none;outline:none}.mc-sidebar-segment.svelte-vehkk3:focus-visible .mc-sidebar-segment__container.svelte-vehkk3{-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-segment.svelte-vehkk3.svelte-vehkk3:hover{background:#405d68}.mc-sidebar-segment.is-close.svelte-vehkk3 .mc-sidebar-segment__container.svelte-vehkk3{-webkit-transition:margin 300ms ease-in-out;transition:margin 300ms ease-in-out;margin:0 20px;width:24px}.mc-sidebar-segment.is-close.svelte-vehkk3 .mc-sidebar-segment__text.svelte-vehkk3{opacity:0}.mc-sidebar-segment.is-open.svelte-vehkk3 .mc-sidebar-segment__container.svelte-vehkk3{-webkit-transition:margin 300ms ease-in-out;transition:margin 300ms ease-in-out;margin:0 32px}.mc-sidebar-segment.is-open.svelte-vehkk3 .mc-sidebar-segment__text.svelte-vehkk3{opacity:1}")}const B=e=>({}),C=e=>({});function H(e){let s,t,i,a,r,m,x,_,w,$,y,j,P,z,A,B,C,H=e[0].label+"",Y=e[0].icon&&I(e),Z=e[4].icon&&N(e),q=e[0].iconPath&&T(e);return{c(){s=v("a"),t=v("div"),i=v("span"),Y&&Y.c(),a=k(),Z&&Z.c(),r=k(),q&&q.c(),m=k(),x=v("span"),_=b(H),h(i,"class","mc-sidebar-segment__icon svelte-vehkk3"),h(x,"aria-hidden",w=!e[2]),h(x,"class","mc-sidebar-segment__text svelte-vehkk3"),h(t,"class","mc-sidebar-segment__container svelte-vehkk3"),h(s,"id",$=e[0].code),h(s,"aria-label",y=e[0].label),h(s,"class",j="mc-sidebar-segment "+(e[0].code===e[1]?.lv0?.code?"is-selected":"")+" "+(e[2]?"is-open":"is-close")+" svelte-vehkk3"),h(s,"href",P=e[0].href??"javascript:void(null)"),h(s,"target",z=e[0].embedded)},m(l,c){n(l,s,c),p(s,t),p(t,i),Y&&Y.m(i,null),p(i,a),Z&&Z.m(i,null),p(i,r),q&&q.m(i,null),p(t,m),p(t,x),p(x,_),A=!0,B||(C=g(s,"click",e[3]),B=!0)},p(e,t){e[0].icon?Y?Y.p(e,t):(Y=I(e),Y.c(),Y.m(i,a)):Y&&(Y.d(1),Y=null),e[4].icon?Z?(Z.p(e,t),16&t&&l(Z,1)):(Z=N(e),Z.c(),l(Z,1),Z.m(i,r)):Z&&(f(),c(Z,1,1,(()=>{Z=null})),o()),e[0].iconPath?q?q.p(e,t):(q=T(e),q.c(),q.m(i,null)):q&&(q.d(1),q=null),(!A||1&t)&&H!==(H=e[0].label+"")&&u(_,H),(!A||4&t&&w!==(w=!e[2]))&&h(x,"aria-hidden",w),(!A||1&t&&$!==($=e[0].code))&&h(s,"id",$),(!A||1&t&&y!==(y=e[0].label))&&h(s,"aria-label",y),(!A||7&t&&j!==(j="mc-sidebar-segment "+(e[0].code===e[1]?.lv0?.code?"is-selected":"")+" "+(e[2]?"is-open":"is-close")+" svelte-vehkk3"))&&h(s,"class",j),(!A||1&t&&P!==(P=e[0].href??"javascript:void(null)"))&&h(s,"href",P),(!A||1&t&&z!==(z=e[0].embedded))&&h(s,"target",z)},i(e){A||(l(Z),A=!0)},o(e){c(Z),A=!1},d(e){e&&d(s),Y&&Y.d(),Z&&Z.d(),q&&q.d(),B=!1,C()}}}function I(e){let s,t,i=`<${Z(e[0].icon)} />`;return{c(){s=new y(!1),t=a(),s.a=t},m(e,a){s.m(i,e,a),n(e,t,a)},p(e,t){1&t&&i!==(i=`<${Z(e[0].icon)} />`)&&s.p(i)},d(e){e&&d(t),e&&s.d()}}}function N(e){let s;const t=e[6].icon,i=x(t,e,e[5],C);return{c(){i&&i.c()},m(e,t){i&&i.m(e,t),s=!0},p(e,a){i&&i.p&&(!s||32&a)&&_(i,t,e,e[5],s?$(t,e[5],a,B):w(e[5]),C)},i(e){s||(l(i,e),s=!0)},o(e){c(i,e),s=!1},d(e){i&&i.d(e)}}}function T(e){let s,t;return{c(){s=v("object"),h(s,"class","mc-sidebar-segment__icon svelte-vehkk3"),h(s,"aria-label","label"),h(s,"type","image/svg+xml"),h(s,"data",t=e[0].iconPath)},m(e,t){n(e,s,t)},p(e,i){1&i&&t!==(t=e[0].iconPath)&&h(s,"data",t)},d(e){e&&d(s)}}}function Y(e){let s,t,i=e[0]&&H(e);return{c(){i&&i.c(),s=a()},m(e,a){i&&i.m(e,a),n(e,s,a),t=!0},p(e,[t]){e[0]?i?(i.p(e,t),1&t&&l(i,1)):(i=H(e),i.c(),l(i,1),i.m(s.parentNode,s)):i&&(f(),c(i,1,1,(()=>{i=null})),o())},i(e){t||(l(i),t=!0)},o(e){c(i),t=!1},d(e){i&&i.d(e),e&&d(s)}}}function Z(e){return`${e} size="1.5rem"`}function q(e,s,t){let i,a;r(e,P,(e=>t(1,i=e))),r(e,z,(e=>t(2,a=e)));let{$$slots:n={},$$scope:l}=s;const c=m(n);let{data:o}=s;return e.$$set=e=>{"data"in e&&t(0,o=e.data),"$$scope"in e&&t(5,l=e.$$scope)},[o,i,a,function(){j(o.code)},c,l,n]}class D extends e{constructor(e){super(),s(this,e,q,Y,t,{data:0},A)}}export{D as default};
1
+ import{H as e,i as s,s as t,I as i,T as n,b as a,B as l,z as c,A as o,m as d,ag as r,p as m,e as v,d as k,v as h,h as b,k as f,x as p,C as g,y as u,Y as x,Z as _,_ as w,$,J as y,a4 as j}from"../../index-c222d0b7.js";import{a as P,s as z,i as A}from"../../sidebar-service-8aa10fb1.js";function B(e){i(e,"svelte-vehkk3",".mc-sidebar-segment.svelte-vehkk3.svelte-vehkk3{cursor:pointer;-webkit-box-flex:0;-ms-flex:0;flex:0;text-decoration:none;color:#ffffff;line-height:22px;display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden;min-height:40px}.mc-sidebar-segment__icon.svelte-vehkk3.svelte-vehkk3{fill:#ffffff;height:1.5rem;width:1.5rem}.mc-sidebar-segment__container.svelte-vehkk3.svelte-vehkk3{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;padding:8px 0px}.mc-sidebar-segment.svelte-vehkk3 svg.svelte-vehkk3{fill:#ffffff}.mc-sidebar-segment__text.svelte-vehkk3.svelte-vehkk3{margin-left:10px;width:200px;min-width:200px}.mc-sidebar-segment.is-selected.svelte-vehkk3.svelte-vehkk3{background:#5b737d}.mc-sidebar-segment.svelte-vehkk3.svelte-vehkk3:focus-visible{-webkit-box-shadow:none;box-shadow:none;border:none;outline:none}.mc-sidebar-segment.svelte-vehkk3:focus-visible .mc-sidebar-segment__container.svelte-vehkk3{-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-segment.svelte-vehkk3.svelte-vehkk3:hover{background:#405d68}.mc-sidebar-segment.is-close.svelte-vehkk3 .mc-sidebar-segment__container.svelte-vehkk3{-webkit-transition:margin 300ms ease-in-out;transition:margin 300ms ease-in-out;margin:0 20px;width:24px}.mc-sidebar-segment.is-close.svelte-vehkk3 .mc-sidebar-segment__text.svelte-vehkk3{opacity:0}.mc-sidebar-segment.is-open.svelte-vehkk3 .mc-sidebar-segment__container.svelte-vehkk3{-webkit-transition:margin 300ms ease-in-out;transition:margin 300ms ease-in-out;margin:0 32px}.mc-sidebar-segment.is-open.svelte-vehkk3 .mc-sidebar-segment__text.svelte-vehkk3{opacity:1}")}const C=e=>({}),H=e=>({});function I(e){let s,t,i,n,r,m,x,_,w,$,y,j,P,z,A,B,C,H=e[0].label+"",I=e[0].icon&&J(e),Y=e[4].icon&&N(e),Z=e[0].iconPath&&T(e);return{c(){s=v("a"),t=v("div"),i=v("span"),I&&I.c(),n=k(),Y&&Y.c(),r=k(),Z&&Z.c(),m=k(),x=v("span"),_=h(H),b(i,"class","mc-sidebar-segment__icon svelte-vehkk3"),b(x,"aria-hidden",w=!e[2]),b(x,"class","mc-sidebar-segment__text svelte-vehkk3"),b(t,"class","mc-sidebar-segment__container svelte-vehkk3"),b(s,"id",$=e[0].code),b(s,"aria-label",y=e[0].label),b(s,"class",j="mc-sidebar-segment "+(e[0].code===e[1]?.lv0?.code?"is-selected":"")+" "+(e[2]?"is-open":"is-close")+" svelte-vehkk3"),b(s,"href",P=e[0].href??"javascript:void(null)"),b(s,"target",z=e[0].embedded)},m(l,c){a(l,s,c),f(s,t),f(t,i),I&&I.m(i,null),f(i,n),Y&&Y.m(i,null),f(i,r),Z&&Z.m(i,null),f(t,m),f(t,x),f(x,_),A=!0,B||(C=p(s,"click",e[3]),B=!0)},p(e,t){e[0].icon?I?I.p(e,t):(I=J(e),I.c(),I.m(i,n)):I&&(I.d(1),I=null),e[4].icon?Y?(Y.p(e,t),16&t&&l(Y,1)):(Y=N(e),Y.c(),l(Y,1),Y.m(i,r)):Y&&(g(),c(Y,1,1,(()=>{Y=null})),o()),e[0].iconPath?Z?Z.p(e,t):(Z=T(e),Z.c(),Z.m(i,null)):Z&&(Z.d(1),Z=null),(!A||1&t)&&H!==(H=e[0].label+"")&&u(_,H),(!A||4&t&&w!==(w=!e[2]))&&b(x,"aria-hidden",w),(!A||1&t&&$!==($=e[0].code))&&b(s,"id",$),(!A||1&t&&y!==(y=e[0].label))&&b(s,"aria-label",y),(!A||7&t&&j!==(j="mc-sidebar-segment "+(e[0].code===e[1]?.lv0?.code?"is-selected":"")+" "+(e[2]?"is-open":"is-close")+" svelte-vehkk3"))&&b(s,"class",j),(!A||1&t&&P!==(P=e[0].href??"javascript:void(null)"))&&b(s,"href",P),(!A||1&t&&z!==(z=e[0].embedded))&&b(s,"target",z)},i(e){A||(l(Y),A=!0)},o(e){c(Y),A=!1},d(e){e&&d(s),I&&I.d(),Y&&Y.d(),Z&&Z.d(),B=!1,C()}}}function J(e){let s,t,i=`<${Z(e[0].icon)} />`;return{c(){s=new j(!1),t=n(),s.a=t},m(e,n){s.m(i,e,n),a(e,t,n)},p(e,t){1&t&&i!==(i=`<${Z(e[0].icon)} />`)&&s.p(i)},d(e){e&&d(t),e&&s.d()}}}function N(e){let s;const t=e[6].icon,i=x(t,e,e[5],H);return{c(){i&&i.c()},m(e,t){i&&i.m(e,t),s=!0},p(e,n){i&&i.p&&(!s||32&n)&&_(i,t,e,e[5],s?$(t,e[5],n,C):w(e[5]),H)},i(e){s||(l(i,e),s=!0)},o(e){c(i,e),s=!1},d(e){i&&i.d(e)}}}function T(e){let s,t,i;return{c(){s=y("svg"),t=y("use"),b(t,"href",i=e[0].iconPath),b(s,"class","mc-sidebar-segment__icon svelte-vehkk3")},m(e,i){a(e,s,i),f(s,t)},p(e,s){1&s&&i!==(i=e[0].iconPath)&&b(t,"href",i)},d(e){e&&d(s)}}}function Y(e){let s,t,i=e[0]&&I(e);return{c(){i&&i.c(),s=n()},m(e,n){i&&i.m(e,n),a(e,s,n),t=!0},p(e,[t]){e[0]?i?(i.p(e,t),1&t&&l(i,1)):(i=I(e),i.c(),l(i,1),i.m(s.parentNode,s)):i&&(g(),c(i,1,1,(()=>{i=null})),o())},i(e){t||(l(i),t=!0)},o(e){c(i),t=!1},d(e){i&&i.d(e),e&&d(s)}}}function Z(e){return`${e} size="1.5rem"`}function q(e,s,t){let i,n;r(e,z,(e=>t(1,i=e))),r(e,A,(e=>t(2,n=e)));let{$$slots:a={},$$scope:l}=s;const c=m(a);let{data:o}=s;return e.$$set=e=>{"data"in e&&t(0,o=e.data),"$$scope"in e&&t(5,l=e.$$scope)},[o,i,n,function(){P(o.code)},c,l,a]}class D extends e{constructor(e){super(),s(this,e,q,Y,t,{data:0},B)}}export{D as default};
2
2
  //# sourceMappingURL=sidebar-segment.nested.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"sidebar-segment.nested.js","sources":["../../../../src/components/sidebar/sidebar-segment.nested.svelte"],"sourcesContent":["<svelte:options />\n\n<script lang=\"ts\">\n import type { Segment } from './sidebar.types';\n import {\n isSidebarOpen,\n selectedFeature,\n selectFeature,\n } from '../../utilities/sidebar-service';\n\n export let data: Segment;\n\n function generateIcon(iconname: string): string {\n return `${iconname} size=\"1.5rem\"`;\n }\n\n function handleClick() {\n selectFeature(data.code);\n }\n</script>\n\n{#if data}\n <a\n id={data.code}\n aria-label={data.label}\n class=\"mc-sidebar-segment {data.code === $selectedFeature?.lv0?.code\n ? 'is-selected'\n : ''} {$isSidebarOpen ? 'is-open' : 'is-close'}\"\n href={data.href ?? 'javascript:void(null)'}\n target={data.embedded}\n on:click={handleClick}\n >\n \n <div class=\"mc-sidebar-segment__container\">\n <span class=\"mc-sidebar-segment__icon\">\n {#if data.icon}\n {@html `<${generateIcon(data.icon)} />`}\n {/if}\n {#if $$slots.icon}\n <slot name=\"icon\" />\n {/if}\n {#if data.iconPath}\n <object class=\"mc-sidebar-segment__icon\" aria-label=\"label\" type=\"image/svg+xml\" data={data.iconPath}></object>\n {/if}\n </span>\n <span aria-hidden={!$isSidebarOpen} class=\"mc-sidebar-segment__text\">\n {data.label}\n </span>\n </div>\n </a>\n{/if}\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n @import './_c.sidebar';\n\n .mc-sidebar-segment {\n cursor: pointer;\n flex: 0;\n text-decoration: none;\n color: $color-sidebar-text-color;\n line-height: 22px;\n display: flex;\n overflow: hidden;\n min-height: 40px;\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 width: 100%;\n padding: 8px 0px;\n }\n\n svg {\n fill: $color-sidebar-icon;\n }\n\n &__text {\n margin-left: 10px;\n width: 200px;\n min-width: 200px;\n }\n\n &.is-selected {\n background: $color-sidebar-feature-selected-background;\n }\n\n &:focus-visible {\n box-shadow: none;\n border: none;\n outline: none;\n\n .mc-sidebar-segment__container {\n box-shadow: none;\n border: none;\n border-radius: 6px;\n outline: 1px solid #0b96cc;\n }\n }\n\n &:hover {\n background: $color-sidebar-feature-hover-background;\n }\n\n &.is-close {\n .mc-sidebar-segment__container {\n @include transition(margin 300ms ease-in-out);\n margin: 0 20px;\n width: 24px;\n }\n\n .mc-sidebar-segment__text {\n opacity: 0;\n }\n }\n\n &.is-open {\n .mc-sidebar-segment__container {\n @include transition(margin 300ms ease-in-out);\n margin: 0 32px;\n }\n\n .mc-sidebar-segment__text {\n opacity: 1;\n }\n }\n }\n</style>\n"],"names":["t3_value","ctx","label","if_block0","icon","create_if_block_3","if_block1","create_if_block_2","if_block2","iconPath","create_if_block_1","attr","a","a_id_value","code","a_aria_label_value","a_class_value","lv0","href","a_target_value","embedded","insert","target","anchor","append","div","span0","span1","current","dirty","set_data","t3","generateIcon","html_tag","p","raw_value","object","object_data_value","create_if_block","iconname","data","$$props","selectFeature"],"mappings":"kgEA8CSA,EAAAC,KAAKC,MAAK,GAXRC,EAAAF,KAAKG,MAAIC,EAAAJ,GAGTK,EAAAL,KAAQG,MAAIG,EAAAN,GAGZO,EAAAP,KAAKQ,UAAQC,EAAAT,yLAIEA,EAAc,qHAtBhCU,EAAAC,EAAA,KAAAC,EAAAZ,KAAKa,MACGH,EAAAC,EAAA,aAAAG,EAAAd,KAAKC,OACUS,EAAAC,EAAA,QAAAI,EAAA,uBAAAf,KAAKa,OAASb,EAAkB,IAAAgB,KAAKH,KAC5D,cACA,IAAK,KAAAb,EAAiB,GAAA,UAAY,YAAU,+BAC1CA,EAAI,GAACiB,MAAQ,yBACXP,EAAAC,EAAA,SAAAO,EAAAlB,KAAKmB,kBAPfC,EA2BGC,EAAAV,EAAAW,GAhBDC,EAeKZ,EAAAa,GAdHD,EAUMC,EAAAC,qEACNF,EAEMC,EAAAE,iCAjBE1B,EAAW,kBAKdA,KAAKG,2DAGLH,KAAQG,mGAGRH,KAAKQ,oEAKPmB,GAAA,EAAAC,IAAA7B,KAAAA,EAAAC,KAAKC,MAAK,KAAA4B,EAAAC,EAAA/B,qBADOC,EAAc,6BAtBhC2B,GAAA,EAAAC,GAAAhB,KAAAA,EAAAZ,KAAKa,sBACGc,GAAA,EAAAC,GAAAd,KAAAA,EAAAd,KAAKC,+BACU0B,GAAA,EAAAC,GAAAb,KAAAA,EAAA,uBAAAf,KAAKa,OAASb,EAAkB,IAAAgB,KAAKH,KAC5D,cACA,IAAK,KAAAb,EAAiB,GAAA,UAAY,YAAU,oDAC1CA,EAAI,GAACiB,MAAQ,2CACXU,GAAA,EAAAC,GAAAV,KAAAA,EAAAlB,KAAKmB,iJAOIY,EAAa/B,EAAI,GAACG,kGAAlB4B,EAAa/B,EAAI,GAACG,aAAI6B,EAAAC,EAAAC,yZAMoDxB,EAAAyB,EAAA,OAAAC,EAAApC,KAAKQ,kBAA5FY,EAA8GC,EAAAc,EAAAb,WAAvB,EAAAM,GAAAQ,KAAAA,EAAApC,KAAKQ,iEArB/FR,EAAI,IAAAqC,EAAArC,yEAAJA,EAAI,0KATE,SAAA+B,EAAaO,YACVA,0IAHDC,GAAaC,kGAOtBC,EAAcF,EAAK1B"}
1
+ {"version":3,"file":"sidebar-segment.nested.js","sources":["../../../../src/components/sidebar/sidebar-segment.nested.svelte"],"sourcesContent":["<svelte:options />\n\n<script lang=\"ts\">\n import type { Segment } from './sidebar.types';\n import {\n isSidebarOpen,\n selectedFeature,\n selectFeature,\n } from '../../utilities/sidebar-service';\n\n export let data: Segment;\n\n function generateIcon(iconname: string): string {\n return `${iconname} size=\"1.5rem\"`;\n }\n\n function handleClick() {\n selectFeature(data.code);\n }\n</script>\n\n{#if data}\n <a\n id={data.code}\n aria-label={data.label}\n class=\"mc-sidebar-segment {data.code === $selectedFeature?.lv0?.code\n ? 'is-selected'\n : ''} {$isSidebarOpen ? 'is-open' : 'is-close'}\"\n href={data.href ?? 'javascript:void(null)'}\n target={data.embedded}\n on:click={handleClick}\n >\n \n <div class=\"mc-sidebar-segment__container\">\n <span class=\"mc-sidebar-segment__icon\">\n {#if data.icon}\n {@html `<${generateIcon(data.icon)} />`}\n {/if}\n {#if $$slots.icon}\n <slot name=\"icon\" />\n {/if}\n {#if data.iconPath}\n <svg class=\"mc-sidebar-segment__icon\">\n <use href={data.iconPath}></use>\n </svg>\n {/if}\n </span>\n <span aria-hidden={!$isSidebarOpen} class=\"mc-sidebar-segment__text\">\n {data.label}\n </span>\n </div>\n </a>\n{/if}\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n @import './_c.sidebar';\n\n .mc-sidebar-segment {\n cursor: pointer;\n flex: 0;\n text-decoration: none;\n color: $color-sidebar-text-color;\n line-height: 22px;\n display: flex;\n overflow: hidden;\n min-height: 40px;\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 width: 100%;\n padding: 8px 0px;\n }\n\n svg {\n fill: $color-sidebar-icon;\n }\n\n &__text {\n margin-left: 10px;\n width: 200px;\n min-width: 200px;\n }\n\n &.is-selected {\n background: $color-sidebar-feature-selected-background;\n }\n\n &:focus-visible {\n box-shadow: none;\n border: none;\n outline: none;\n\n .mc-sidebar-segment__container {\n box-shadow: none;\n border: none;\n border-radius: 6px;\n outline: 1px solid #0b96cc;\n }\n }\n\n &:hover {\n background: $color-sidebar-feature-hover-background;\n }\n\n &.is-close {\n .mc-sidebar-segment__container {\n @include transition(margin 300ms ease-in-out);\n margin: 0 20px;\n width: 24px;\n }\n\n .mc-sidebar-segment__text {\n opacity: 0;\n }\n }\n\n &.is-open {\n .mc-sidebar-segment__container {\n @include transition(margin 300ms ease-in-out);\n margin: 0 32px;\n }\n\n .mc-sidebar-segment__text {\n opacity: 1;\n }\n }\n }\n</style>\n"],"names":["t3_value","ctx","label","if_block0","icon","create_if_block_3","if_block1","create_if_block_2","if_block2","iconPath","create_if_block_1","attr","a","a_id_value","code","a_aria_label_value","a_class_value","lv0","href","a_target_value","embedded","insert","target","anchor","append","div","span0","span1","current","dirty","set_data","t3","generateIcon","html_tag","p","raw_value","use","use_href_value","svg","create_if_block","iconname","data","$$props","selectFeature"],"mappings":"+kEAgDSA,EAAAC,KAAKC,MAAK,GAbRC,EAAAF,KAAKG,MAAIC,EAAAJ,GAGTK,EAAAL,KAAQG,MAAIG,EAAAN,GAGZO,EAAAP,KAAKQ,UAAQC,EAAAT,yLAMEA,EAAc,qHAxBhCU,EAAAC,EAAA,KAAAC,EAAAZ,KAAKa,MACGH,EAAAC,EAAA,aAAAG,EAAAd,KAAKC,OACUS,EAAAC,EAAA,QAAAI,EAAA,uBAAAf,KAAKa,OAASb,EAAkB,IAAAgB,KAAKH,KAC5D,cACA,IAAK,KAAAb,EAAiB,GAAA,UAAY,YAAU,+BAC1CA,EAAI,GAACiB,MAAQ,yBACXP,EAAAC,EAAA,SAAAO,EAAAlB,KAAKmB,kBAPfC,EA6BGC,EAAAV,EAAAW,GAlBDC,EAiBKZ,EAAAa,GAhBHD,EAYMC,EAAAC,qEACNF,EAEMC,EAAAE,iCAnBE1B,EAAW,kBAKdA,KAAKG,2DAGLH,KAAQG,mGAGRH,KAAKQ,oEAOPmB,GAAA,EAAAC,IAAA7B,KAAAA,EAAAC,KAAKC,MAAK,KAAA4B,EAAAC,EAAA/B,qBADOC,EAAc,6BAxBhC2B,GAAA,EAAAC,GAAAhB,KAAAA,EAAAZ,KAAKa,sBACGc,GAAA,EAAAC,GAAAd,KAAAA,EAAAd,KAAKC,+BACU0B,GAAA,EAAAC,GAAAb,KAAAA,EAAA,uBAAAf,KAAKa,OAASb,EAAkB,IAAAgB,KAAKH,KAC5D,cACA,IAAK,KAAAb,EAAiB,GAAA,UAAY,YAAU,oDAC1CA,EAAI,GAACiB,MAAQ,2CACXU,GAAA,EAAAC,GAAAV,KAAAA,EAAAlB,KAAKmB,iJAOIY,EAAa/B,EAAI,GAACG,kGAAlB4B,EAAa/B,EAAI,GAACG,aAAI6B,EAAAC,EAAAC,uTAOxBxB,EAAAyB,EAAA,OAAAC,EAAApC,KAAKQ,wEADlBY,EAEKC,EAAAgB,EAAAf,GADHC,EAA+Bc,EAAAF,WAApB,EAAAP,GAAAQ,KAAAA,EAAApC,KAAKQ,iEAtBnBR,EAAI,IAAAsC,EAAAtC,yEAAJA,EAAI,0KATE,SAAA+B,EAAaQ,YACVA,0IAHDC,GAAaC,kGAOtBC,EAAcF,EAAK3B"}
@@ -40,7 +40,9 @@
40
40
  <slot name="icon" />
41
41
  {/if}
42
42
  {#if data.iconPath}
43
- <object class="mc-sidebar-segment__icon" aria-label="label" type="image/svg+xml" data={data.iconPath}></object>
43
+ <svg class="mc-sidebar-segment__icon">
44
+ <use href={data.iconPath}></use>
45
+ </svg>
44
46
  {/if}
45
47
  </span>
46
48
  <span aria-hidden={!$isSidebarOpen} class="mc-sidebar-segment__text">
@@ -1,2 +1,2 @@
1
- import{H as e,i as t,s as i,I as o,e as s,d as n,h as l,b as a,k as r,B as c,z as u,A as d,m as p,R as g,ag as x,p as f,q as m,r as b,Y as v,Z as h,_,$ as j,v as w,T as y,y as k,E as $,F as L,x as H,Q as z,G as E,C as G,K as M,J as B}from"../../index-c222d0b7.js";import T from"./sidebar-feature.nested.js";import{a as q,i as A,s as C}from"../../sidebar-service-8aa10fb1.js";import{E as F}from"../../EventHandler-f7ee47ca.js";function N(e){o(e,"svelte-5jxg83",".mc-feature-group.svelte-5jxg83.svelte-5jxg83{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-5jxg83.svelte-5jxg83{fill:#191919;height:1.5rem;width:1.5rem}.mc-feature-group__container.svelte-5jxg83.svelte-5jxg83{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;-webkit-transition:margin 300ms ease-in-out;transition:margin 300ms ease-in-out}.mc-feature-group__label.svelte-5jxg83.svelte-5jxg83{margin:0 8px;width:200px;min-width:200px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.mc-feature-group__label__tooltip.svelte-5jxg83.svelte-5jxg83{opacity:0;-webkit-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-5jxg83.svelte-5jxg83{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-5jxg83 div.svelte-5jxg83{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-5jxg83:hover+.mc-feature-group__label__tooltip.svelte-5jxg83{opacity:1;-webkit-transition-delay:1s;transition-delay:1s}.mc-feature-group__content.svelte-5jxg83.svelte-5jxg83{overflow:hidden;-webkit-transition:height 300ms ease-in-out;transition:height 300ms ease-in-out}.mc-feature-group__content.is-close.svelte-5jxg83.svelte-5jxg83{height:0}.mc-feature-group.is-selected.svelte-5jxg83.svelte-5jxg83{background:#ffbf6b}.mc-feature-group.is-close.svelte-5jxg83 .mc-feature-group__container.svelte-5jxg83{margin:0 20px;width:24px}.mc-feature-group.is-open.svelte-5jxg83 .mc-feature-group__container.svelte-5jxg83{margin:0 32px}.mc-feature-group.svelte-5jxg83.svelte-5jxg83:hover{background:#ff941a}.mc-feature-group.svelte-5jxg83.svelte-5jxg83:focus-visible{-webkit-box-shadow:none;box-shadow:none;border:none;outline:none}.mc-feature-group.svelte-5jxg83:focus-visible .mc-feature-group__container.svelte-5jxg83{-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}ul.svelte-5jxg83.svelte-5jxg83,li.svelte-5jxg83.svelte-5jxg83{list-style-type:none;margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}ul.svelte-5jxg83.svelte-5jxg83{-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-5jxg83 li.svelte-5jxg83{-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 S(e,t,i){const o=e.slice();return o[18]=t[i],o}const V=e=>({}),I=e=>({});function J(e){let t,i=`<${P(e[0].icon)} />`;return{c(){t=s("span"),l(t,"class","mc-feature-group__icon svelte-5jxg83")},m(e,o){a(e,t,o),t.innerHTML=i},p(e,o){1&o&&i!==(i=`<${P(e[0].icon)} />`)&&(t.innerHTML=i)},d(e){e&&p(t)}}}function K(e){let t,i;const o=e[11].icon,n=v(o,e,e[10],I);return{c(){t=s("span"),n&&n.c(),l(t,"class","mc-feature-group__icon svelte-5jxg83")},m(e,o){a(e,t,o),n&&n.m(t,null),i=!0},p(e,t){n&&n.p&&(!i||1024&t)&&h(n,o,e,e[10],i?j(o,e[10],t,V):_(e[10]),I)},i(e){i||(c(n,e),i=!0)},o(e){u(n,e),i=!1},d(e){e&&p(t),n&&n.d(e)}}}function Q(e){let t,i,o,c,u,d=e[0].label+"",g=e[6]?.offsetHeight<e[6]?.scrollHeight&&R(e);function x(e,t){return e[1]?Y:Z}let f=x(e),m=f(e);return{c(){t=s("span"),i=w(d),o=n(),g&&g.c(),c=n(),m.c(),u=y(),l(t,"class","mc-feature-group__label svelte-5jxg83")},m(s,n){a(s,t,n),r(t,i),e[12](t),a(s,o,n),g&&g.m(s,n),a(s,c,n),m.m(s,n),a(s,u,n)},p(e,t){1&t&&d!==(d=e[0].label+"")&&k(i,d),e[6]?.offsetHeight<e[6]?.scrollHeight?g?g.p(e,t):(g=R(e),g.c(),g.m(c.parentNode,c)):g&&(g.d(1),g=null),f!==(f=x(e))&&(m.d(1),m=f(e),m&&(m.c(),m.m(u.parentNode,u)))},d(i){i&&p(t),e[12](null),i&&p(o),g&&g.d(i),i&&p(c),m.d(i),i&&p(u)}}}function R(e){let t,i,o,c,u,d=e[0].label+"";return{c(){t=s("div"),i=s("div"),i.innerHTML='<div class="svelte-5jxg83"></div>',o=n(),c=s("span"),u=w(d),l(i,"class","mc-feature-group__label__tooltip__pointer svelte-5jxg83"),l(t,"aria-hidden","true"),l(t,"class","mc-feature-group__label__tooltip svelte-5jxg83")},m(e,s){a(e,t,s),r(t,i),r(t,o),r(t,c),r(c,u)},p(e,t){1&t&&d!==(d=e[0].label+"")&&k(u,d)},d(e){e&&p(t)}}}function Y(e){let t,i;return{c(){t=B("svg"),i=B("path"),l(i,"d","M12 9H4a1 1 0 010-2h8a1 1 0 010 2z"),l(t,"class","mc-feature-group__icon svelte-5jxg83"),l(t,"width","16px"),l(t,"height","16px"),l(t,"viewBox","0 0 16 16")},m(e,o){a(e,t,o),r(t,i)},d(e){e&&p(t)}}}function Z(e){let t,i;return{c(){t=B("svg"),i=B("path"),l(i,"d","M13 7H9V3a1 1 0 00-2 0v4H3a1 1 0 000 2h4v4a1 1 0 002 0V9h4a1 1 0 000-2z"),l(t,"class","mc-feature-group__icon svelte-5jxg83"),l(t,"width","16px"),l(t,"height","16px"),l(t,"viewBox","0 0 16 16")},m(e,o){a(e,t,o),r(t,i)},d(e){e&&p(t)}}}function D(e){let t,i,o,d,g,x;function f(){return e[13](e[18])}return i=new T({props:{feature:e[18],a11yLabels:e[2]}}),{c(){t=s("li"),$(i.$$.fragment),o=n(),l(t,"class","svelte-5jxg83")},m(e,s){a(e,t,s),L(i,t,null),r(t,o),d=!0,g||(x=H(t,"click",z(f)),g=!0)},p(t,o){e=t;const s={};1&o&&(s.feature=e[18]),4&o&&(s.a11yLabels=e[2]),i.$set(s)},i(e){d||(c(i.$$.fragment,e),d=!0)},o(e){u(i.$$.fragment,e),d=!1},d(e){e&&p(t),E(i),g=!1,x()}}}function O(e){let t,i,o,x,f,m,b,v,h,_,j,w,y,k,$=e[0].icon&&J(e),L=e[8].icon&&K(e),H=e[3]&&Q(e),z=e[0].items,E=[];for(let t=0;t<z.length;t+=1)E[t]=D(S(e,z,t));const M=e=>u(E[e],1,1,(()=>{E[e]=null}));return{c(){t=s("button"),i=s("span"),$&&$.c(),o=n(),L&&L.c(),x=n(),H&&H.c(),_=n(),j=s("ul");for(let e=0;e<E.length;e+=1)E[e].c();l(i,"class","mc-feature-group__container svelte-5jxg83"),l(t,"class",f="mc-feature-group "+(e[5]?"is-selected":"")+" "+(e[3]?"is-open":"is-close")+" svelte-5jxg83"),l(t,"aria-label",m=e[0].label),l(t,"aria-expanded",b=e[3]&&e[1]),l(t,"aria-controls",v=e[0].code+"-list"),l(t,"id",h=e[0].code),l(j,"class","mc-feature-group__content is-close svelte-5jxg83"),l(j,"aria-hidden",w=!e[3]||!e[1]),l(j,"id",y=e[0].code+"-list")},m(s,n){a(s,t,n),r(t,i),$&&$.m(i,null),r(i,o),L&&L.m(i,null),r(i,x),H&&H.m(i,null),a(s,_,n),a(s,j,n);for(let e=0;e<E.length;e+=1)E[e]&&E[e].m(j,null);e[14](j),k=!0},p(e,[s]){if(e[0].icon?$?$.p(e,s):($=J(e),$.c(),$.m(i,o)):$&&($.d(1),$=null),e[8].icon?L?(L.p(e,s),256&s&&c(L,1)):(L=K(e),L.c(),c(L,1),L.m(i,x)):L&&(G(),u(L,1,1,(()=>{L=null})),d()),e[3]?H?H.p(e,s):(H=Q(e),H.c(),H.m(i,null)):H&&(H.d(1),H=null),(!k||40&s&&f!==(f="mc-feature-group "+(e[5]?"is-selected":"")+" "+(e[3]?"is-open":"is-close")+" svelte-5jxg83"))&&l(t,"class",f),(!k||1&s&&m!==(m=e[0].label))&&l(t,"aria-label",m),(!k||10&s&&b!==(b=e[3]&&e[1]))&&l(t,"aria-expanded",b),(!k||1&s&&v!==(v=e[0].code+"-list"))&&l(t,"aria-controls",v),(!k||1&s&&h!==(h=e[0].code))&&l(t,"id",h),133&s){let t;for(z=e[0].items,t=0;t<z.length;t+=1){const i=S(e,z,t);E[t]?(E[t].p(i,s),c(E[t],1)):(E[t]=D(i),E[t].c(),c(E[t],1),E[t].m(j,null))}for(G(),t=z.length;t<E.length;t+=1)M(t);d()}(!k||10&s&&w!==(w=!e[3]||!e[1]))&&l(j,"aria-hidden",w),(!k||1&s&&y!==(y=e[0].code+"-list"))&&l(j,"id",y)},i(e){if(!k){c(L);for(let e=0;e<z.length;e+=1)c(E[e]);k=!0}},o(e){u(L),E=E.filter(Boolean);for(let e=0;e<E.length;e+=1)u(E[e]);k=!1},d(i){i&&p(t),$&&$.d(),L&&L.d(),H&&H.d(),i&&p(_),i&&p(j),g(E,i),e[14](null)}}}function P(e){return`${e} size="1.5rem"`}function U(e,t,i){let o,s;x(e,A,(e=>i(3,o=e))),x(e,C,(e=>i(9,s=e)));let{$$slots:n={},$$scope:l}=t;const a=f(n);let r,c,{featureGroup:u}=t,{expand:d}=t,{a11yLabels:p}=t,g=new F(m(),b()),v=!1;function h(e){var t;e.disabled||((null===(t=e.items)||void 0===t?void 0:t.length)?g.dispatch("feature-click",e):q(e.code))}return e.$$set=e=>{"featureGroup"in e&&i(0,u=e.featureGroup),"expand"in e&&i(1,d=e.expand),"a11yLabels"in e&&i(2,p=e.a11yLabels),"$$scope"in e&&i(10,l=e.$$scope)},e.$$.update=()=>{var t,n,l,a,c,p;523&e.$$.dirty&&(t=d,n=o,l=u,i(5,v=null!==(p=(null==(a=s)?void 0:a.lv0)&&l.code===(null===(c=null==a?void 0:a.lv0)||void 0===c?void 0:c.code)&&(!a.lv1||!t||!n))&&void 0!==p&&p)),10&e.$$.dirty&&function(e,t){if(r){i(4,r.style.height="",r),i(4,r.style.transition="none",r);const o=window.getComputedStyle(r).height;r.classList.add(t&&e?"is-open":"is-close"),r.classList.remove(t&&e?"is-close":"is-open");const s=window.getComputedStyle(r).height;i(4,r.style.height=o,r),requestAnimationFrame((()=>{i(4,r.style.transition="",r),requestAnimationFrame((()=>{i(4,r.style.height=s,r)}))}));const n=()=>{i(4,r.style.height="",r),r.removeEventListener("transitionend",n)};r.addEventListener("transitionend",n)}}(d,o)},[u,d,p,o,r,v,c,h,a,s,l,n,function(e){M[e?"unshift":"push"]((()=>{c=e,i(6,c)}))},e=>h(e),function(e){M[e?"unshift":"push"]((()=>{r=e,i(4,r)}))}]}class W extends e{constructor(e){super(),t(this,e,U,O,i,{featureGroup:0,expand:1,a11yLabels:2},N)}}export{W as default};
1
+ import{H as e,i as t,s as i,I as o,e as n,d as s,h as l,b as a,k as r,B as c,z as u,A as d,m as p,R as g,ag as x,p as f,q as m,r as b,Y as v,Z as h,_,$ as j,J as w,v as y,T as k,y as $,E as L,F as H,x as z,Q as E,G,C as M,K as B}from"../../index-c222d0b7.js";import P from"./sidebar-feature.nested.js";import{a as T,i as q,s as A}from"../../sidebar-service-8aa10fb1.js";import{E as C}from"../../EventHandler-f7ee47ca.js";function F(e){o(e,"svelte-5jxg83",".mc-feature-group.svelte-5jxg83.svelte-5jxg83{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-5jxg83.svelte-5jxg83{fill:#191919;height:1.5rem;width:1.5rem}.mc-feature-group__container.svelte-5jxg83.svelte-5jxg83{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;-webkit-transition:margin 300ms ease-in-out;transition:margin 300ms ease-in-out}.mc-feature-group__label.svelte-5jxg83.svelte-5jxg83{margin:0 8px;width:200px;min-width:200px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.mc-feature-group__label__tooltip.svelte-5jxg83.svelte-5jxg83{opacity:0;-webkit-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-5jxg83.svelte-5jxg83{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-5jxg83 div.svelte-5jxg83{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-5jxg83:hover+.mc-feature-group__label__tooltip.svelte-5jxg83{opacity:1;-webkit-transition-delay:1s;transition-delay:1s}.mc-feature-group__content.svelte-5jxg83.svelte-5jxg83{overflow:hidden;-webkit-transition:height 300ms ease-in-out;transition:height 300ms ease-in-out}.mc-feature-group__content.is-close.svelte-5jxg83.svelte-5jxg83{height:0}.mc-feature-group.is-selected.svelte-5jxg83.svelte-5jxg83{background:#ffbf6b}.mc-feature-group.is-close.svelte-5jxg83 .mc-feature-group__container.svelte-5jxg83{margin:0 20px;width:24px}.mc-feature-group.is-open.svelte-5jxg83 .mc-feature-group__container.svelte-5jxg83{margin:0 32px}.mc-feature-group.svelte-5jxg83.svelte-5jxg83:hover{background:#ff941a}.mc-feature-group.svelte-5jxg83.svelte-5jxg83:focus-visible{-webkit-box-shadow:none;box-shadow:none;border:none;outline:none}.mc-feature-group.svelte-5jxg83:focus-visible .mc-feature-group__container.svelte-5jxg83{-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}ul.svelte-5jxg83.svelte-5jxg83,li.svelte-5jxg83.svelte-5jxg83{list-style-type:none;margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}ul.svelte-5jxg83.svelte-5jxg83{-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-5jxg83 li.svelte-5jxg83{-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 N(e,t,i){const o=e.slice();return o[18]=t[i],o}const S=e=>({}),V=e=>({});function I(e){let t,i=`<${U(e[0].icon)} />`;return{c(){t=n("span"),l(t,"class","mc-feature-group__icon svelte-5jxg83")},m(e,o){a(e,t,o),t.innerHTML=i},p(e,o){1&o&&i!==(i=`<${U(e[0].icon)} />`)&&(t.innerHTML=i)},d(e){e&&p(t)}}}function J(e){let t,i;const o=e[11].icon,s=v(o,e,e[10],V);return{c(){t=n("span"),s&&s.c(),l(t,"class","mc-feature-group__icon svelte-5jxg83")},m(e,o){a(e,t,o),s&&s.m(t,null),i=!0},p(e,t){s&&s.p&&(!i||1024&t)&&h(s,o,e,e[10],i?j(o,e[10],t,S):_(e[10]),V)},i(e){i||(c(s,e),i=!0)},o(e){u(s,e),i=!1},d(e){e&&p(t),s&&s.d(e)}}}function K(e){let t,i,o;return{c(){t=w("svg"),i=w("use"),l(i,"href",o=e[0].iconPath),l(t,"class","mc-feature-group__icon svelte-5jxg83")},m(e,o){a(e,t,o),r(t,i)},p(e,t){1&t&&o!==(o=e[0].iconPath)&&l(i,"href",o)},d(e){e&&p(t)}}}function Q(e){let t,i,o,c,u,d=e[0].label+"",g=e[6]?.offsetHeight<e[6]?.scrollHeight&&R(e);function x(e,t){return e[1]?Y:Z}let f=x(e),m=f(e);return{c(){t=n("span"),i=y(d),o=s(),g&&g.c(),c=s(),m.c(),u=k(),l(t,"class","mc-feature-group__label svelte-5jxg83")},m(n,s){a(n,t,s),r(t,i),e[12](t),a(n,o,s),g&&g.m(n,s),a(n,c,s),m.m(n,s),a(n,u,s)},p(e,t){1&t&&d!==(d=e[0].label+"")&&$(i,d),e[6]?.offsetHeight<e[6]?.scrollHeight?g?g.p(e,t):(g=R(e),g.c(),g.m(c.parentNode,c)):g&&(g.d(1),g=null),f!==(f=x(e))&&(m.d(1),m=f(e),m&&(m.c(),m.m(u.parentNode,u)))},d(i){i&&p(t),e[12](null),i&&p(o),g&&g.d(i),i&&p(c),m.d(i),i&&p(u)}}}function R(e){let t,i,o,c,u,d=e[0].label+"";return{c(){t=n("div"),i=n("div"),i.innerHTML='<div class="svelte-5jxg83"></div>',o=s(),c=n("span"),u=y(d),l(i,"class","mc-feature-group__label__tooltip__pointer svelte-5jxg83"),l(t,"aria-hidden","true"),l(t,"class","mc-feature-group__label__tooltip svelte-5jxg83")},m(e,n){a(e,t,n),r(t,i),r(t,o),r(t,c),r(c,u)},p(e,t){1&t&&d!==(d=e[0].label+"")&&$(u,d)},d(e){e&&p(t)}}}function Y(e){let t,i;return{c(){t=w("svg"),i=w("path"),l(i,"d","M12 9H4a1 1 0 010-2h8a1 1 0 010 2z"),l(t,"class","mc-feature-group__icon svelte-5jxg83"),l(t,"width","16px"),l(t,"height","16px"),l(t,"viewBox","0 0 16 16")},m(e,o){a(e,t,o),r(t,i)},d(e){e&&p(t)}}}function Z(e){let t,i;return{c(){t=w("svg"),i=w("path"),l(i,"d","M13 7H9V3a1 1 0 00-2 0v4H3a1 1 0 000 2h4v4a1 1 0 002 0V9h4a1 1 0 000-2z"),l(t,"class","mc-feature-group__icon svelte-5jxg83"),l(t,"width","16px"),l(t,"height","16px"),l(t,"viewBox","0 0 16 16")},m(e,o){a(e,t,o),r(t,i)},d(e){e&&p(t)}}}function D(e){let t,i,o,d,g,x;function f(){return e[13](e[18])}return i=new P({props:{feature:e[18],a11yLabels:e[2]}}),{c(){t=n("li"),L(i.$$.fragment),o=s(),l(t,"class","svelte-5jxg83")},m(e,n){a(e,t,n),H(i,t,null),r(t,o),d=!0,g||(x=z(t,"click",E(f)),g=!0)},p(t,o){e=t;const n={};1&o&&(n.feature=e[18]),4&o&&(n.a11yLabels=e[2]),i.$set(n)},i(e){d||(c(i.$$.fragment,e),d=!0)},o(e){u(i.$$.fragment,e),d=!1},d(e){e&&p(t),G(i),g=!1,x()}}}function O(e){let t,i,o,x,f,m,b,v,h,_,j,w,y,k,$,L=e[0].icon&&I(e),H=e[8].icon&&J(e),z=e[0].iconPath&&K(e),E=e[3]&&Q(e),G=e[0].items,B=[];for(let t=0;t<G.length;t+=1)B[t]=D(N(e,G,t));const P=e=>u(B[e],1,1,(()=>{B[e]=null}));return{c(){t=n("button"),i=n("span"),L&&L.c(),o=s(),H&&H.c(),x=s(),z&&z.c(),f=s(),E&&E.c(),j=s(),w=n("ul");for(let e=0;e<B.length;e+=1)B[e].c();l(i,"class","mc-feature-group__container svelte-5jxg83"),l(t,"class",m="mc-feature-group "+(e[5]?"is-selected":"")+" "+(e[3]?"is-open":"is-close")+" svelte-5jxg83"),l(t,"aria-label",b=e[0].label),l(t,"aria-expanded",v=e[3]&&e[1]),l(t,"aria-controls",h=e[0].code+"-list"),l(t,"id",_=e[0].code),l(w,"class","mc-feature-group__content is-close svelte-5jxg83"),l(w,"aria-hidden",y=!e[3]||!e[1]),l(w,"id",k=e[0].code+"-list")},m(n,s){a(n,t,s),r(t,i),L&&L.m(i,null),r(i,o),H&&H.m(i,null),r(i,x),z&&z.m(i,null),r(i,f),E&&E.m(i,null),a(n,j,s),a(n,w,s);for(let e=0;e<B.length;e+=1)B[e]&&B[e].m(w,null);e[14](w),$=!0},p(e,[n]){if(e[0].icon?L?L.p(e,n):(L=I(e),L.c(),L.m(i,o)):L&&(L.d(1),L=null),e[8].icon?H?(H.p(e,n),256&n&&c(H,1)):(H=J(e),H.c(),c(H,1),H.m(i,x)):H&&(M(),u(H,1,1,(()=>{H=null})),d()),e[0].iconPath?z?z.p(e,n):(z=K(e),z.c(),z.m(i,f)):z&&(z.d(1),z=null),e[3]?E?E.p(e,n):(E=Q(e),E.c(),E.m(i,null)):E&&(E.d(1),E=null),(!$||40&n&&m!==(m="mc-feature-group "+(e[5]?"is-selected":"")+" "+(e[3]?"is-open":"is-close")+" svelte-5jxg83"))&&l(t,"class",m),(!$||1&n&&b!==(b=e[0].label))&&l(t,"aria-label",b),(!$||10&n&&v!==(v=e[3]&&e[1]))&&l(t,"aria-expanded",v),(!$||1&n&&h!==(h=e[0].code+"-list"))&&l(t,"aria-controls",h),(!$||1&n&&_!==(_=e[0].code))&&l(t,"id",_),133&n){let t;for(G=e[0].items,t=0;t<G.length;t+=1){const i=N(e,G,t);B[t]?(B[t].p(i,n),c(B[t],1)):(B[t]=D(i),B[t].c(),c(B[t],1),B[t].m(w,null))}for(M(),t=G.length;t<B.length;t+=1)P(t);d()}(!$||10&n&&y!==(y=!e[3]||!e[1]))&&l(w,"aria-hidden",y),(!$||1&n&&k!==(k=e[0].code+"-list"))&&l(w,"id",k)},i(e){if(!$){c(H);for(let e=0;e<G.length;e+=1)c(B[e]);$=!0}},o(e){u(H),B=B.filter(Boolean);for(let e=0;e<B.length;e+=1)u(B[e]);$=!1},d(i){i&&p(t),L&&L.d(),H&&H.d(),z&&z.d(),E&&E.d(),i&&p(j),i&&p(w),g(B,i),e[14](null)}}}function U(e){return`${e} size="1.5rem"`}function W(e,t,i){let o,n;x(e,q,(e=>i(3,o=e))),x(e,A,(e=>i(9,n=e)));let{$$slots:s={},$$scope:l}=t;const a=f(s);let r,c,{featureGroup:u}=t,{expand:d}=t,{a11yLabels:p}=t,g=new C(m(),b()),v=!1;function h(e){var t;e.disabled||((null===(t=e.items)||void 0===t?void 0:t.length)?g.dispatch("feature-click",e):T(e.code))}return e.$$set=e=>{"featureGroup"in e&&i(0,u=e.featureGroup),"expand"in e&&i(1,d=e.expand),"a11yLabels"in e&&i(2,p=e.a11yLabels),"$$scope"in e&&i(10,l=e.$$scope)},e.$$.update=()=>{var t,s,l,a,c,p;523&e.$$.dirty&&(t=d,s=o,l=u,i(5,v=null!==(p=(null==(a=n)?void 0:a.lv0)&&l.code===(null===(c=null==a?void 0:a.lv0)||void 0===c?void 0:c.code)&&(!a.lv1||!t||!s))&&void 0!==p&&p)),10&e.$$.dirty&&function(e,t){if(r){i(4,r.style.height="",r),i(4,r.style.transition="none",r);const o=window.getComputedStyle(r).height;r.classList.add(t&&e?"is-open":"is-close"),r.classList.remove(t&&e?"is-close":"is-open");const n=window.getComputedStyle(r).height;i(4,r.style.height=o,r),requestAnimationFrame((()=>{i(4,r.style.transition="",r),requestAnimationFrame((()=>{i(4,r.style.height=n,r)}))}));const s=()=>{i(4,r.style.height="",r),r.removeEventListener("transitionend",s)};r.addEventListener("transitionend",s)}}(d,o)},[u,d,p,o,r,v,c,h,a,n,l,s,function(e){B[e?"unshift":"push"]((()=>{c=e,i(6,c)}))},e=>h(e),function(e){B[e?"unshift":"push"]((()=>{r=e,i(4,r)}))}]}class X extends e{constructor(e){super(),t(this,e,W,O,i,{featureGroup:0,expand:1,a11yLabels:2},F)}}export{X as default};
2
2
  //# sourceMappingURL=sidebar-feature-group.nested.js.map
@@ -1 +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 {\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 $$slots.icon}\n <span class=\"mc-feature-group__icon\">\n <slot name=\"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_4","if_block1","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":"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"}
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 {\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 $$slots.icon}\n <span class=\"mc-feature-group__icon\">\n <slot name=\"icon\" />\n </span>\n {/if}\n {#if featureGroup.iconPath}\n <svg class=\"mc-feature-group__icon\">\n <use href={featureGroup.iconPath} />\n </svg>\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","attr","use","use_href_value","iconPath","svg","append","dirty","t0_value","label","if_block0","offsetHeight","scrollHeight","create_if_block_2","create_if_block_1","set_data","t0","t1_value","div2","div1","t1","path","li","create_if_block_5","if_block1","create_if_block_4","if_block2","create_if_block_3","create_if_block","each_value","items","length","i","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":"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"}
@@ -115,6 +115,11 @@
115
115
  <slot name="icon" />
116
116
  </span>
117
117
  {/if}
118
+ {#if featureGroup.iconPath}
119
+ <svg class="mc-feature-group__icon">
120
+ <use href={featureGroup.iconPath} />
121
+ </svg>
122
+ {/if}
118
123
  {#if $isSidebarOpen}
119
124
  <span class="mc-feature-group__label" bind:this={label}>
120
125
  {featureGroup.label}
@@ -1,2 +1,2 @@
1
- import{H as e,i as s,s as t,I as i,T as a,b as n,B as c,z as l,A as o,m as d,ag as r,p as f,e as m,d as b,v as h,h as p,k as v,x as g,C as k,y as u,Y as x,Z as _,_ as w,$,a4 as y}from"../../index-c222d0b7.js";import{a as j,s as P,i as z}from"../../sidebar-service-8aa10fb1.js";function A(e){i(e,"svelte-1chf8kf",".mc-sidebar-segment.svelte-1chf8kf.svelte-1chf8kf{cursor:pointer;-webkit-box-flex:0;-ms-flex:0;flex:0;text-decoration:none;color:#191919;line-height:22px;display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden;min-height:40px}.mc-sidebar-segment__icon.svelte-1chf8kf.svelte-1chf8kf{fill:#191919;height:1.5rem;width:1.5rem}.mc-sidebar-segment__container.svelte-1chf8kf.svelte-1chf8kf{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;padding:8px 0px}.mc-sidebar-segment__text.svelte-1chf8kf.svelte-1chf8kf{margin-left:10px;width:200px;min-width:200px}.mc-sidebar-segment.is-selected.svelte-1chf8kf.svelte-1chf8kf{background:#ffbf6b}.mc-sidebar-segment.svelte-1chf8kf.svelte-1chf8kf:focus-visible{-webkit-box-shadow:none;box-shadow:none;border:none;outline:none}.mc-sidebar-segment.svelte-1chf8kf:focus-visible .mc-sidebar-segment__container.svelte-1chf8kf{-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-segment.svelte-1chf8kf.svelte-1chf8kf:hover{background:#ff941a}.mc-sidebar-segment.is-close.svelte-1chf8kf .mc-sidebar-segment__container.svelte-1chf8kf{-webkit-transition:margin 300ms ease-in-out;transition:margin 300ms ease-in-out;margin:0 20px;width:24px}.mc-sidebar-segment.is-close.svelte-1chf8kf .mc-sidebar-segment__text.svelte-1chf8kf{opacity:0}.mc-sidebar-segment.is-open.svelte-1chf8kf .mc-sidebar-segment__container.svelte-1chf8kf{-webkit-transition:margin 300ms ease-in-out;transition:margin 300ms ease-in-out;margin:0 32px}.mc-sidebar-segment.is-open.svelte-1chf8kf .mc-sidebar-segment__text.svelte-1chf8kf{opacity:1}")}const B=e=>({}),C=e=>({});function H(e){let s,t,i,a,r,f,x,_,w,$,y,j,P,z,A,B,C,H=e[0].label+"",Y=e[0].icon&&I(e),Z=e[4].icon&&N(e),q=e[0].iconPath&&T(e);return{c(){s=m("a"),t=m("div"),i=m("span"),Y&&Y.c(),a=b(),Z&&Z.c(),r=b(),q&&q.c(),f=b(),x=m("span"),_=h(H),p(i,"class","mc-sidebar-segment__icon svelte-1chf8kf"),p(x,"aria-hidden",w=!e[2]),p(x,"class","mc-sidebar-segment__text svelte-1chf8kf"),p(t,"class","mc-sidebar-segment__container svelte-1chf8kf"),p(s,"id",$=e[0].code),p(s,"aria-label",y=e[0].label),p(s,"class",j="mc-sidebar-segment "+(e[0].code===e[1]?.lv0?.code?"is-selected":"")+" "+(e[2]?"is-open":"is-close")+" svelte-1chf8kf"),p(s,"href",P=e[0].href??"javascript:void(null)"),p(s,"target",z=e[0].embedded)},m(c,l){n(c,s,l),v(s,t),v(t,i),Y&&Y.m(i,null),v(i,a),Z&&Z.m(i,null),v(i,r),q&&q.m(i,null),v(t,f),v(t,x),v(x,_),A=!0,B||(C=g(s,"click",e[3]),B=!0)},p(e,t){e[0].icon?Y?Y.p(e,t):(Y=I(e),Y.c(),Y.m(i,a)):Y&&(Y.d(1),Y=null),e[4].icon?Z?(Z.p(e,t),16&t&&c(Z,1)):(Z=N(e),Z.c(),c(Z,1),Z.m(i,r)):Z&&(k(),l(Z,1,1,(()=>{Z=null})),o()),e[0].iconPath?q?q.p(e,t):(q=T(e),q.c(),q.m(i,null)):q&&(q.d(1),q=null),(!A||1&t)&&H!==(H=e[0].label+"")&&u(_,H),(!A||4&t&&w!==(w=!e[2]))&&p(x,"aria-hidden",w),(!A||1&t&&$!==($=e[0].code))&&p(s,"id",$),(!A||1&t&&y!==(y=e[0].label))&&p(s,"aria-label",y),(!A||7&t&&j!==(j="mc-sidebar-segment "+(e[0].code===e[1]?.lv0?.code?"is-selected":"")+" "+(e[2]?"is-open":"is-close")+" svelte-1chf8kf"))&&p(s,"class",j),(!A||1&t&&P!==(P=e[0].href??"javascript:void(null)"))&&p(s,"href",P),(!A||1&t&&z!==(z=e[0].embedded))&&p(s,"target",z)},i(e){A||(c(Z),A=!0)},o(e){l(Z),A=!1},d(e){e&&d(s),Y&&Y.d(),Z&&Z.d(),q&&q.d(),B=!1,C()}}}function I(e){let s,t,i=`<${Z(e[0].icon)} />`;return{c(){s=new y(!1),t=a(),s.a=t},m(e,a){s.m(i,e,a),n(e,t,a)},p(e,t){1&t&&i!==(i=`<${Z(e[0].icon)} />`)&&s.p(i)},d(e){e&&d(t),e&&s.d()}}}function N(e){let s;const t=e[6].icon,i=x(t,e,e[5],C);return{c(){i&&i.c()},m(e,t){i&&i.m(e,t),s=!0},p(e,a){i&&i.p&&(!s||32&a)&&_(i,t,e,e[5],s?$(t,e[5],a,B):w(e[5]),C)},i(e){s||(c(i,e),s=!0)},o(e){l(i,e),s=!1},d(e){i&&i.d(e)}}}function T(e){let s,t;return{c(){s=m("object"),p(s,"class","mc-sidebar-segment__icon svelte-1chf8kf"),p(s,"aria-label","label"),p(s,"type","image/svg+xml"),p(s,"data",t=e[0].iconPath)},m(e,t){n(e,s,t)},p(e,i){1&i&&t!==(t=e[0].iconPath)&&p(s,"data",t)},d(e){e&&d(s)}}}function Y(e){let s,t,i=e[0]&&H(e);return{c(){i&&i.c(),s=a()},m(e,a){i&&i.m(e,a),n(e,s,a),t=!0},p(e,[t]){e[0]?i?(i.p(e,t),1&t&&c(i,1)):(i=H(e),i.c(),c(i,1),i.m(s.parentNode,s)):i&&(k(),l(i,1,1,(()=>{i=null})),o())},i(e){t||(c(i),t=!0)},o(e){l(i),t=!1},d(e){i&&i.d(e),e&&d(s)}}}function Z(e){return`${e} size="1.5rem"`}function q(e,s,t){let i,a;r(e,P,(e=>t(1,i=e))),r(e,z,(e=>t(2,a=e)));let{$$slots:n={},$$scope:c}=s;const l=f(n);let{data:o}=s;return e.$$set=e=>{"data"in e&&t(0,o=e.data),"$$scope"in e&&t(5,c=e.$$scope)},[o,i,a,function(){j(o.code)},l,c,n]}class D extends e{constructor(e){super(),s(this,e,q,Y,t,{data:0},A)}}export{D as default};
1
+ import{H as e,i as s,s as t,I as i,T as n,b as c,B as a,z as l,A as o,m as f,ag as r,p as d,e as m,d as b,v as h,h as p,k as v,x as g,C as k,y as u,Y as x,Z as _,_ as w,$,J as y,a4 as j}from"../../index-c222d0b7.js";import{a as P,s as z,i as A}from"../../sidebar-service-8aa10fb1.js";function B(e){i(e,"svelte-1chf8kf",".mc-sidebar-segment.svelte-1chf8kf.svelte-1chf8kf{cursor:pointer;-webkit-box-flex:0;-ms-flex:0;flex:0;text-decoration:none;color:#191919;line-height:22px;display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden;min-height:40px}.mc-sidebar-segment__icon.svelte-1chf8kf.svelte-1chf8kf{fill:#191919;height:1.5rem;width:1.5rem}.mc-sidebar-segment__container.svelte-1chf8kf.svelte-1chf8kf{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;padding:8px 0px}.mc-sidebar-segment.svelte-1chf8kf svg.svelte-1chf8kf{fill:#191919}.mc-sidebar-segment__text.svelte-1chf8kf.svelte-1chf8kf{margin-left:10px;width:200px;min-width:200px}.mc-sidebar-segment.is-selected.svelte-1chf8kf.svelte-1chf8kf{background:#ffbf6b}.mc-sidebar-segment.svelte-1chf8kf.svelte-1chf8kf:focus-visible{-webkit-box-shadow:none;box-shadow:none;border:none;outline:none}.mc-sidebar-segment.svelte-1chf8kf:focus-visible .mc-sidebar-segment__container.svelte-1chf8kf{-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-segment.svelte-1chf8kf.svelte-1chf8kf:hover{background:#ff941a}.mc-sidebar-segment.is-close.svelte-1chf8kf .mc-sidebar-segment__container.svelte-1chf8kf{-webkit-transition:margin 300ms ease-in-out;transition:margin 300ms ease-in-out;margin:0 20px;width:24px}.mc-sidebar-segment.is-close.svelte-1chf8kf .mc-sidebar-segment__text.svelte-1chf8kf{opacity:0}.mc-sidebar-segment.is-open.svelte-1chf8kf .mc-sidebar-segment__container.svelte-1chf8kf{-webkit-transition:margin 300ms ease-in-out;transition:margin 300ms ease-in-out;margin:0 32px}.mc-sidebar-segment.is-open.svelte-1chf8kf .mc-sidebar-segment__text.svelte-1chf8kf{opacity:1}")}const C=e=>({}),H=e=>({});function I(e){let s,t,i,n,r,d,x,_,w,$,y,j,P,z,A,B,C,H=e[0].label+"",I=e[0].icon&&J(e),Y=e[4].icon&&N(e),Z=e[0].iconPath&&T(e);return{c(){s=m("a"),t=m("div"),i=m("span"),I&&I.c(),n=b(),Y&&Y.c(),r=b(),Z&&Z.c(),d=b(),x=m("span"),_=h(H),p(i,"class","mc-sidebar-segment__icon svelte-1chf8kf"),p(x,"aria-hidden",w=!e[2]),p(x,"class","mc-sidebar-segment__text svelte-1chf8kf"),p(t,"class","mc-sidebar-segment__container svelte-1chf8kf"),p(s,"id",$=e[0].code),p(s,"aria-label",y=e[0].label),p(s,"class",j="mc-sidebar-segment "+(e[0].code===e[1]?.lv0?.code?"is-selected":"")+" "+(e[2]?"is-open":"is-close")+" svelte-1chf8kf"),p(s,"href",P=e[0].href??"javascript:void(null)"),p(s,"target",z=e[0].embedded)},m(a,l){c(a,s,l),v(s,t),v(t,i),I&&I.m(i,null),v(i,n),Y&&Y.m(i,null),v(i,r),Z&&Z.m(i,null),v(t,d),v(t,x),v(x,_),A=!0,B||(C=g(s,"click",e[3]),B=!0)},p(e,t){e[0].icon?I?I.p(e,t):(I=J(e),I.c(),I.m(i,n)):I&&(I.d(1),I=null),e[4].icon?Y?(Y.p(e,t),16&t&&a(Y,1)):(Y=N(e),Y.c(),a(Y,1),Y.m(i,r)):Y&&(k(),l(Y,1,1,(()=>{Y=null})),o()),e[0].iconPath?Z?Z.p(e,t):(Z=T(e),Z.c(),Z.m(i,null)):Z&&(Z.d(1),Z=null),(!A||1&t)&&H!==(H=e[0].label+"")&&u(_,H),(!A||4&t&&w!==(w=!e[2]))&&p(x,"aria-hidden",w),(!A||1&t&&$!==($=e[0].code))&&p(s,"id",$),(!A||1&t&&y!==(y=e[0].label))&&p(s,"aria-label",y),(!A||7&t&&j!==(j="mc-sidebar-segment "+(e[0].code===e[1]?.lv0?.code?"is-selected":"")+" "+(e[2]?"is-open":"is-close")+" svelte-1chf8kf"))&&p(s,"class",j),(!A||1&t&&P!==(P=e[0].href??"javascript:void(null)"))&&p(s,"href",P),(!A||1&t&&z!==(z=e[0].embedded))&&p(s,"target",z)},i(e){A||(a(Y),A=!0)},o(e){l(Y),A=!1},d(e){e&&f(s),I&&I.d(),Y&&Y.d(),Z&&Z.d(),B=!1,C()}}}function J(e){let s,t,i=`<${Z(e[0].icon)} />`;return{c(){s=new j(!1),t=n(),s.a=t},m(e,n){s.m(i,e,n),c(e,t,n)},p(e,t){1&t&&i!==(i=`<${Z(e[0].icon)} />`)&&s.p(i)},d(e){e&&f(t),e&&s.d()}}}function N(e){let s;const t=e[6].icon,i=x(t,e,e[5],H);return{c(){i&&i.c()},m(e,t){i&&i.m(e,t),s=!0},p(e,n){i&&i.p&&(!s||32&n)&&_(i,t,e,e[5],s?$(t,e[5],n,C):w(e[5]),H)},i(e){s||(a(i,e),s=!0)},o(e){l(i,e),s=!1},d(e){i&&i.d(e)}}}function T(e){let s,t,i;return{c(){s=y("svg"),t=y("use"),p(t,"href",i=e[0].iconPath),p(s,"class","mc-sidebar-segment__icon svelte-1chf8kf")},m(e,i){c(e,s,i),v(s,t)},p(e,s){1&s&&i!==(i=e[0].iconPath)&&p(t,"href",i)},d(e){e&&f(s)}}}function Y(e){let s,t,i=e[0]&&I(e);return{c(){i&&i.c(),s=n()},m(e,n){i&&i.m(e,n),c(e,s,n),t=!0},p(e,[t]){e[0]?i?(i.p(e,t),1&t&&a(i,1)):(i=I(e),i.c(),a(i,1),i.m(s.parentNode,s)):i&&(k(),l(i,1,1,(()=>{i=null})),o())},i(e){t||(a(i),t=!0)},o(e){l(i),t=!1},d(e){i&&i.d(e),e&&f(s)}}}function Z(e){return`${e} size="1.5rem"`}function q(e,s,t){let i,n;r(e,z,(e=>t(1,i=e))),r(e,A,(e=>t(2,n=e)));let{$$slots:c={},$$scope:a}=s;const l=d(c);let{data:o}=s;return e.$$set=e=>{"data"in e&&t(0,o=e.data),"$$scope"in e&&t(5,a=e.$$scope)},[o,i,n,function(){P(o.code)},l,a,c]}class D extends e{constructor(e){super(),s(this,e,q,Y,t,{data:0},B)}}export{D as default};
2
2
  //# sourceMappingURL=sidebar-segment.nested.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"sidebar-segment.nested.js","sources":["../../../../src/components/sidebar/sidebar-segment.nested.svelte"],"sourcesContent":["<svelte:options />\n\n<script lang=\"ts\">\n import type { Segment } from './sidebar.types';\n import {\n isSidebarOpen,\n selectedFeature,\n selectFeature,\n } from '../../utilities/sidebar-service';\n\n export let data: Segment;\n\n function generateIcon(iconname: string): string {\n return `${iconname} size=\"1.5rem\"`;\n }\n\n function handleClick() {\n selectFeature(data.code);\n }\n</script>\n\n{#if data}\n <a\n id={data.code}\n aria-label={data.label}\n class=\"mc-sidebar-segment {data.code === $selectedFeature?.lv0?.code\n ? 'is-selected'\n : ''} {$isSidebarOpen ? 'is-open' : 'is-close'}\"\n href={data.href ?? 'javascript:void(null)'}\n target={data.embedded}\n on:click={handleClick}\n >\n \n <div class=\"mc-sidebar-segment__container\">\n <span class=\"mc-sidebar-segment__icon\">\n {#if data.icon}\n {@html `<${generateIcon(data.icon)} />`}\n {/if}\n {#if $$slots.icon}\n <slot name=\"icon\" />\n {/if}\n {#if data.iconPath}\n <object class=\"mc-sidebar-segment__icon\" aria-label=\"label\" type=\"image/svg+xml\" data={data.iconPath}></object>\n {/if}\n </span>\n <span aria-hidden={!$isSidebarOpen} class=\"mc-sidebar-segment__text\">\n {data.label}\n </span>\n </div>\n </a>\n{/if}\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n @import './_c.sidebar';\n\n .mc-sidebar-segment {\n cursor: pointer;\n flex: 0;\n text-decoration: none;\n color: $color-sidebar-text-color;\n line-height: 22px;\n display: flex;\n overflow: hidden;\n min-height: 40px;\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 width: 100%;\n padding: 8px 0px;\n }\n\n svg {\n fill: $color-sidebar-icon;\n }\n\n &__text {\n margin-left: 10px;\n width: 200px;\n min-width: 200px;\n }\n\n &.is-selected {\n background: $color-sidebar-feature-selected-background;\n }\n\n &:focus-visible {\n box-shadow: none;\n border: none;\n outline: none;\n\n .mc-sidebar-segment__container {\n box-shadow: none;\n border: none;\n border-radius: 6px;\n outline: 1px solid #0b96cc;\n }\n }\n\n &:hover {\n background: $color-sidebar-feature-hover-background;\n }\n\n &.is-close {\n .mc-sidebar-segment__container {\n @include transition(margin 300ms ease-in-out);\n margin: 0 20px;\n width: 24px;\n }\n\n .mc-sidebar-segment__text {\n opacity: 0;\n }\n }\n\n &.is-open {\n .mc-sidebar-segment__container {\n @include transition(margin 300ms ease-in-out);\n margin: 0 32px;\n }\n\n .mc-sidebar-segment__text {\n opacity: 1;\n }\n }\n }\n</style>\n"],"names":["t3_value","ctx","label","if_block0","icon","create_if_block_3","if_block1","create_if_block_2","if_block2","iconPath","create_if_block_1","attr","a","a_id_value","code","a_aria_label_value","a_class_value","lv0","href","a_target_value","embedded","insert","target","anchor","append","div","span0","span1","current","dirty","set_data","t3","generateIcon","html_tag","p","raw_value","object","object_data_value","create_if_block","iconname","data","$$props","selectFeature"],"mappings":"giEA8CSA,EAAAC,KAAKC,MAAK,GAXRC,EAAAF,KAAKG,MAAIC,EAAAJ,GAGTK,EAAAL,KAAQG,MAAIG,EAAAN,GAGZO,EAAAP,KAAKQ,UAAQC,EAAAT,0LAIEA,EAAc,uHAtBhCU,EAAAC,EAAA,KAAAC,EAAAZ,KAAKa,MACGH,EAAAC,EAAA,aAAAG,EAAAd,KAAKC,OACUS,EAAAC,EAAA,QAAAI,EAAA,uBAAAf,KAAKa,OAASb,EAAkB,IAAAgB,KAAKH,KAC5D,cACA,IAAK,KAAAb,EAAiB,GAAA,UAAY,YAAU,gCAC1CA,EAAI,GAACiB,MAAQ,yBACXP,EAAAC,EAAA,SAAAO,EAAAlB,KAAKmB,kBAPfC,EA2BGC,EAAAV,EAAAW,GAhBDC,EAeKZ,EAAAa,GAdHD,EAUMC,EAAAC,qEACNF,EAEMC,EAAAE,iCAjBE1B,EAAW,kBAKdA,KAAKG,2DAGLH,KAAQG,mGAGRH,KAAKQ,oEAKPmB,GAAA,EAAAC,IAAA7B,KAAAA,EAAAC,KAAKC,MAAK,KAAA4B,EAAAC,EAAA/B,qBADOC,EAAc,6BAtBhC2B,GAAA,EAAAC,GAAAhB,KAAAA,EAAAZ,KAAKa,sBACGc,GAAA,EAAAC,GAAAd,KAAAA,EAAAd,KAAKC,+BACU0B,GAAA,EAAAC,GAAAb,KAAAA,EAAA,uBAAAf,KAAKa,OAASb,EAAkB,IAAAgB,KAAKH,KAC5D,cACA,IAAK,KAAAb,EAAiB,GAAA,UAAY,YAAU,qDAC1CA,EAAI,GAACiB,MAAQ,2CACXU,GAAA,EAAAC,GAAAV,KAAAA,EAAAlB,KAAKmB,iJAOIY,EAAa/B,EAAI,GAACG,kGAAlB4B,EAAa/B,EAAI,GAACG,aAAI6B,EAAAC,EAAAC,0ZAMoDxB,EAAAyB,EAAA,OAAAC,EAAApC,KAAKQ,kBAA5FY,EAA8GC,EAAAc,EAAAb,WAAvB,EAAAM,GAAAQ,KAAAA,EAAApC,KAAKQ,iEArB/FR,EAAI,IAAAqC,EAAArC,yEAAJA,EAAI,0KATE,SAAA+B,EAAaO,YACVA,0IAHDC,GAAaC,kGAOtBC,EAAcF,EAAK1B"}
1
+ {"version":3,"file":"sidebar-segment.nested.js","sources":["../../../../src/components/sidebar/sidebar-segment.nested.svelte"],"sourcesContent":["<svelte:options />\n\n<script lang=\"ts\">\n import type { Segment } from './sidebar.types';\n import {\n isSidebarOpen,\n selectedFeature,\n selectFeature,\n } from '../../utilities/sidebar-service';\n\n export let data: Segment;\n\n function generateIcon(iconname: string): string {\n return `${iconname} size=\"1.5rem\"`;\n }\n\n function handleClick() {\n selectFeature(data.code);\n }\n</script>\n\n{#if data}\n <a\n id={data.code}\n aria-label={data.label}\n class=\"mc-sidebar-segment {data.code === $selectedFeature?.lv0?.code\n ? 'is-selected'\n : ''} {$isSidebarOpen ? 'is-open' : 'is-close'}\"\n href={data.href ?? 'javascript:void(null)'}\n target={data.embedded}\n on:click={handleClick}\n >\n \n <div class=\"mc-sidebar-segment__container\">\n <span class=\"mc-sidebar-segment__icon\">\n {#if data.icon}\n {@html `<${generateIcon(data.icon)} />`}\n {/if}\n {#if $$slots.icon}\n <slot name=\"icon\" />\n {/if}\n {#if data.iconPath}\n <svg class=\"mc-sidebar-segment__icon\">\n <use href={data.iconPath}></use>\n </svg>\n {/if}\n </span>\n <span aria-hidden={!$isSidebarOpen} class=\"mc-sidebar-segment__text\">\n {data.label}\n </span>\n </div>\n </a>\n{/if}\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n @import './_c.sidebar';\n\n .mc-sidebar-segment {\n cursor: pointer;\n flex: 0;\n text-decoration: none;\n color: $color-sidebar-text-color;\n line-height: 22px;\n display: flex;\n overflow: hidden;\n min-height: 40px;\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 width: 100%;\n padding: 8px 0px;\n }\n\n svg {\n fill: $color-sidebar-icon;\n }\n\n &__text {\n margin-left: 10px;\n width: 200px;\n min-width: 200px;\n }\n\n &.is-selected {\n background: $color-sidebar-feature-selected-background;\n }\n\n &:focus-visible {\n box-shadow: none;\n border: none;\n outline: none;\n\n .mc-sidebar-segment__container {\n box-shadow: none;\n border: none;\n border-radius: 6px;\n outline: 1px solid #0b96cc;\n }\n }\n\n &:hover {\n background: $color-sidebar-feature-hover-background;\n }\n\n &.is-close {\n .mc-sidebar-segment__container {\n @include transition(margin 300ms ease-in-out);\n margin: 0 20px;\n width: 24px;\n }\n\n .mc-sidebar-segment__text {\n opacity: 0;\n }\n }\n\n &.is-open {\n .mc-sidebar-segment__container {\n @include transition(margin 300ms ease-in-out);\n margin: 0 32px;\n }\n\n .mc-sidebar-segment__text {\n opacity: 1;\n }\n }\n }\n</style>\n"],"names":["t3_value","ctx","label","if_block0","icon","create_if_block_3","if_block1","create_if_block_2","if_block2","iconPath","create_if_block_1","attr","a","a_id_value","code","a_aria_label_value","a_class_value","lv0","href","a_target_value","embedded","insert","target","anchor","append","div","span0","span1","current","dirty","set_data","t3","generateIcon","html_tag","p","raw_value","use","use_href_value","svg","create_if_block","iconname","data","$$props","selectFeature"],"mappings":"0mEAgDSA,EAAAC,KAAKC,MAAK,GAbRC,EAAAF,KAAKG,MAAIC,EAAAJ,GAGTK,EAAAL,KAAQG,MAAIG,EAAAN,GAGZO,EAAAP,KAAKQ,UAAQC,EAAAT,0LAMEA,EAAc,uHAxBhCU,EAAAC,EAAA,KAAAC,EAAAZ,KAAKa,MACGH,EAAAC,EAAA,aAAAG,EAAAd,KAAKC,OACUS,EAAAC,EAAA,QAAAI,EAAA,uBAAAf,KAAKa,OAASb,EAAkB,IAAAgB,KAAKH,KAC5D,cACA,IAAK,KAAAb,EAAiB,GAAA,UAAY,YAAU,gCAC1CA,EAAI,GAACiB,MAAQ,yBACXP,EAAAC,EAAA,SAAAO,EAAAlB,KAAKmB,kBAPfC,EA6BGC,EAAAV,EAAAW,GAlBDC,EAiBKZ,EAAAa,GAhBHD,EAYMC,EAAAC,qEACNF,EAEMC,EAAAE,iCAnBE1B,EAAW,kBAKdA,KAAKG,2DAGLH,KAAQG,mGAGRH,KAAKQ,oEAOPmB,GAAA,EAAAC,IAAA7B,KAAAA,EAAAC,KAAKC,MAAK,KAAA4B,EAAAC,EAAA/B,qBADOC,EAAc,6BAxBhC2B,GAAA,EAAAC,GAAAhB,KAAAA,EAAAZ,KAAKa,sBACGc,GAAA,EAAAC,GAAAd,KAAAA,EAAAd,KAAKC,+BACU0B,GAAA,EAAAC,GAAAb,KAAAA,EAAA,uBAAAf,KAAKa,OAASb,EAAkB,IAAAgB,KAAKH,KAC5D,cACA,IAAK,KAAAb,EAAiB,GAAA,UAAY,YAAU,qDAC1CA,EAAI,GAACiB,MAAQ,2CACXU,GAAA,EAAAC,GAAAV,KAAAA,EAAAlB,KAAKmB,iJAOIY,EAAa/B,EAAI,GAACG,kGAAlB4B,EAAa/B,EAAI,GAACG,aAAI6B,EAAAC,EAAAC,uTAOxBxB,EAAAyB,EAAA,OAAAC,EAAApC,KAAKQ,yEADlBY,EAEKC,EAAAgB,EAAAf,GADHC,EAA+Bc,EAAAF,WAApB,EAAAP,GAAAQ,KAAAA,EAAApC,KAAKQ,iEAtBnBR,EAAI,IAAAsC,EAAAtC,yEAAJA,EAAI,0KATE,SAAA+B,EAAaQ,YACVA,0IAHDC,GAAaC,kGAOtBC,EAAcF,EAAK3B"}
@@ -40,7 +40,9 @@
40
40
  <slot name="icon" />
41
41
  {/if}
42
42
  {#if data.iconPath}
43
- <object class="mc-sidebar-segment__icon" aria-label="label" type="image/svg+xml" data={data.iconPath}></object>
43
+ <svg class="mc-sidebar-segment__icon">
44
+ <use href={data.iconPath}></use>
45
+ </svg>
44
46
  {/if}
45
47
  </span>
46
48
  <span aria-hidden={!$isSidebarOpen} class="mc-sidebar-segment__text">
@@ -1,2 +1,2 @@
1
- import{H as e,i as t,s as i,I as o,e as s,d as n,h as l,b as a,k as r,B as c,z as u,A as d,m as p,R as b,ag as v,p as g,q as m,r as f,Y as w,Z as k,_ as h,$ as x,v as _,T as y,y as $,E as L,F as H,x as z,Q as j,G as E,C as G,K as M,J as B}from"../../index-c222d0b7.js";import T from"./sidebar-feature.nested.js";import{a as q,i as A,s as C}from"../../sidebar-service-8aa10fb1.js";import{E as F}from"../../EventHandler-f7ee47ca.js";function N(e){o(e,"svelte-k6gvwb",".mc-feature-group.svelte-k6gvwb.svelte-k6gvwb{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-k6gvwb.svelte-k6gvwb{fill:#191919;height:1.5rem;width:1.5rem}.mc-feature-group__container.svelte-k6gvwb.svelte-k6gvwb{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;-webkit-transition:margin 300ms ease-in-out;transition:margin 300ms ease-in-out}.mc-feature-group__label.svelte-k6gvwb.svelte-k6gvwb{margin:0 8px;width:200px;min-width:200px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.mc-feature-group__label__tooltip.svelte-k6gvwb.svelte-k6gvwb{opacity:0;-webkit-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-k6gvwb.svelte-k6gvwb{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-k6gvwb div.svelte-k6gvwb{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-k6gvwb:hover+.mc-feature-group__label__tooltip.svelte-k6gvwb{opacity:1;-webkit-transition-delay:1s;transition-delay:1s}.mc-feature-group__content.svelte-k6gvwb.svelte-k6gvwb{overflow:hidden;-webkit-transition:height 300ms ease-in-out;transition:height 300ms ease-in-out}.mc-feature-group__content.is-close.svelte-k6gvwb.svelte-k6gvwb{height:0}.mc-feature-group.is-selected.svelte-k6gvwb.svelte-k6gvwb{background:#cfd2d8}.mc-feature-group.is-close.svelte-k6gvwb .mc-feature-group__container.svelte-k6gvwb{margin:0 20px;width:24px}.mc-feature-group.is-open.svelte-k6gvwb .mc-feature-group__container.svelte-k6gvwb{margin:0 32px}.mc-feature-group.svelte-k6gvwb.svelte-k6gvwb:hover{background:#b3b7c1}.mc-feature-group.svelte-k6gvwb.svelte-k6gvwb:focus-visible{-webkit-box-shadow:none;box-shadow:none;border:none;outline:none}.mc-feature-group.svelte-k6gvwb:focus-visible .mc-feature-group__container.svelte-k6gvwb{-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}ul.svelte-k6gvwb.svelte-k6gvwb,li.svelte-k6gvwb.svelte-k6gvwb{list-style-type:none;margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}ul.svelte-k6gvwb.svelte-k6gvwb{-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-k6gvwb li.svelte-k6gvwb{-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 S(e,t,i){const o=e.slice();return o[18]=t[i],o}const V=e=>({}),I=e=>({});function J(e){let t,i=`<${P(e[0].icon)} />`;return{c(){t=s("span"),l(t,"class","mc-feature-group__icon svelte-k6gvwb")},m(e,o){a(e,t,o),t.innerHTML=i},p(e,o){1&o&&i!==(i=`<${P(e[0].icon)} />`)&&(t.innerHTML=i)},d(e){e&&p(t)}}}function K(e){let t,i;const o=e[11].icon,n=w(o,e,e[10],I);return{c(){t=s("span"),n&&n.c(),l(t,"class","mc-feature-group__icon svelte-k6gvwb")},m(e,o){a(e,t,o),n&&n.m(t,null),i=!0},p(e,t){n&&n.p&&(!i||1024&t)&&k(n,o,e,e[10],i?x(o,e[10],t,V):h(e[10]),I)},i(e){i||(c(n,e),i=!0)},o(e){u(n,e),i=!1},d(e){e&&p(t),n&&n.d(e)}}}function Q(e){let t,i,o,c,u,d=e[0].label+"",b=e[6]?.offsetHeight<e[6]?.scrollHeight&&R(e);function v(e,t){return e[1]?Y:Z}let g=v(e),m=g(e);return{c(){t=s("span"),i=_(d),o=n(),b&&b.c(),c=n(),m.c(),u=y(),l(t,"class","mc-feature-group__label svelte-k6gvwb")},m(s,n){a(s,t,n),r(t,i),e[12](t),a(s,o,n),b&&b.m(s,n),a(s,c,n),m.m(s,n),a(s,u,n)},p(e,t){1&t&&d!==(d=e[0].label+"")&&$(i,d),e[6]?.offsetHeight<e[6]?.scrollHeight?b?b.p(e,t):(b=R(e),b.c(),b.m(c.parentNode,c)):b&&(b.d(1),b=null),g!==(g=v(e))&&(m.d(1),m=g(e),m&&(m.c(),m.m(u.parentNode,u)))},d(i){i&&p(t),e[12](null),i&&p(o),b&&b.d(i),i&&p(c),m.d(i),i&&p(u)}}}function R(e){let t,i,o,c,u,d=e[0].label+"";return{c(){t=s("div"),i=s("div"),i.innerHTML='<div class="svelte-k6gvwb"></div>',o=n(),c=s("span"),u=_(d),l(i,"class","mc-feature-group__label__tooltip__pointer svelte-k6gvwb"),l(t,"aria-hidden","true"),l(t,"class","mc-feature-group__label__tooltip svelte-k6gvwb")},m(e,s){a(e,t,s),r(t,i),r(t,o),r(t,c),r(c,u)},p(e,t){1&t&&d!==(d=e[0].label+"")&&$(u,d)},d(e){e&&p(t)}}}function Y(e){let t,i;return{c(){t=B("svg"),i=B("path"),l(i,"d","M12 9H4a1 1 0 010-2h8a1 1 0 010 2z"),l(t,"class","mc-feature-group__icon svelte-k6gvwb"),l(t,"width","16px"),l(t,"height","16px"),l(t,"viewBox","0 0 16 16")},m(e,o){a(e,t,o),r(t,i)},d(e){e&&p(t)}}}function Z(e){let t,i;return{c(){t=B("svg"),i=B("path"),l(i,"d","M13 7H9V3a1 1 0 00-2 0v4H3a1 1 0 000 2h4v4a1 1 0 002 0V9h4a1 1 0 000-2z"),l(t,"class","mc-feature-group__icon svelte-k6gvwb"),l(t,"width","16px"),l(t,"height","16px"),l(t,"viewBox","0 0 16 16")},m(e,o){a(e,t,o),r(t,i)},d(e){e&&p(t)}}}function D(e){let t,i,o,d,b,v;function g(){return e[13](e[18])}return i=new T({props:{feature:e[18],a11yLabels:e[2]}}),{c(){t=s("li"),L(i.$$.fragment),o=n(),l(t,"class","svelte-k6gvwb")},m(e,s){a(e,t,s),H(i,t,null),r(t,o),d=!0,b||(v=z(t,"click",j(g)),b=!0)},p(t,o){e=t;const s={};1&o&&(s.feature=e[18]),4&o&&(s.a11yLabels=e[2]),i.$set(s)},i(e){d||(c(i.$$.fragment,e),d=!0)},o(e){u(i.$$.fragment,e),d=!1},d(e){e&&p(t),E(i),b=!1,v()}}}function O(e){let t,i,o,v,g,m,f,w,k,h,x,_,y,$,L=e[0].icon&&J(e),H=e[8].icon&&K(e),z=e[3]&&Q(e),j=e[0].items,E=[];for(let t=0;t<j.length;t+=1)E[t]=D(S(e,j,t));const M=e=>u(E[e],1,1,(()=>{E[e]=null}));return{c(){t=s("button"),i=s("span"),L&&L.c(),o=n(),H&&H.c(),v=n(),z&&z.c(),h=n(),x=s("ul");for(let e=0;e<E.length;e+=1)E[e].c();l(i,"class","mc-feature-group__container svelte-k6gvwb"),l(t,"class",g="mc-feature-group "+(e[5]?"is-selected":"")+" "+(e[3]?"is-open":"is-close")+" svelte-k6gvwb"),l(t,"aria-label",m=e[0].label),l(t,"aria-expanded",f=e[3]&&e[1]),l(t,"aria-controls",w=e[0].code+"-list"),l(t,"id",k=e[0].code),l(x,"class","mc-feature-group__content is-close svelte-k6gvwb"),l(x,"aria-hidden",_=!e[3]||!e[1]),l(x,"id",y=e[0].code+"-list")},m(s,n){a(s,t,n),r(t,i),L&&L.m(i,null),r(i,o),H&&H.m(i,null),r(i,v),z&&z.m(i,null),a(s,h,n),a(s,x,n);for(let e=0;e<E.length;e+=1)E[e]&&E[e].m(x,null);e[14](x),$=!0},p(e,[s]){if(e[0].icon?L?L.p(e,s):(L=J(e),L.c(),L.m(i,o)):L&&(L.d(1),L=null),e[8].icon?H?(H.p(e,s),256&s&&c(H,1)):(H=K(e),H.c(),c(H,1),H.m(i,v)):H&&(G(),u(H,1,1,(()=>{H=null})),d()),e[3]?z?z.p(e,s):(z=Q(e),z.c(),z.m(i,null)):z&&(z.d(1),z=null),(!$||40&s&&g!==(g="mc-feature-group "+(e[5]?"is-selected":"")+" "+(e[3]?"is-open":"is-close")+" svelte-k6gvwb"))&&l(t,"class",g),(!$||1&s&&m!==(m=e[0].label))&&l(t,"aria-label",m),(!$||10&s&&f!==(f=e[3]&&e[1]))&&l(t,"aria-expanded",f),(!$||1&s&&w!==(w=e[0].code+"-list"))&&l(t,"aria-controls",w),(!$||1&s&&k!==(k=e[0].code))&&l(t,"id",k),133&s){let t;for(j=e[0].items,t=0;t<j.length;t+=1){const i=S(e,j,t);E[t]?(E[t].p(i,s),c(E[t],1)):(E[t]=D(i),E[t].c(),c(E[t],1),E[t].m(x,null))}for(G(),t=j.length;t<E.length;t+=1)M(t);d()}(!$||10&s&&_!==(_=!e[3]||!e[1]))&&l(x,"aria-hidden",_),(!$||1&s&&y!==(y=e[0].code+"-list"))&&l(x,"id",y)},i(e){if(!$){c(H);for(let e=0;e<j.length;e+=1)c(E[e]);$=!0}},o(e){u(H),E=E.filter(Boolean);for(let e=0;e<E.length;e+=1)u(E[e]);$=!1},d(i){i&&p(t),L&&L.d(),H&&H.d(),z&&z.d(),i&&p(h),i&&p(x),b(E,i),e[14](null)}}}function P(e){return`${e} size="1.5rem"`}function U(e,t,i){let o,s;v(e,A,(e=>i(3,o=e))),v(e,C,(e=>i(9,s=e)));let{$$slots:n={},$$scope:l}=t;const a=g(n);let r,c,{featureGroup:u}=t,{expand:d}=t,{a11yLabels:p}=t,b=new F(m(),f()),w=!1;function k(e){var t;e.disabled||((null===(t=e.items)||void 0===t?void 0:t.length)?b.dispatch("feature-click",e):q(e.code))}return e.$$set=e=>{"featureGroup"in e&&i(0,u=e.featureGroup),"expand"in e&&i(1,d=e.expand),"a11yLabels"in e&&i(2,p=e.a11yLabels),"$$scope"in e&&i(10,l=e.$$scope)},e.$$.update=()=>{var t,n,l,a,c,p;523&e.$$.dirty&&(t=d,n=o,l=u,i(5,w=null!==(p=(null==(a=s)?void 0:a.lv0)&&l.code===(null===(c=null==a?void 0:a.lv0)||void 0===c?void 0:c.code)&&(!a.lv1||!t||!n))&&void 0!==p&&p)),10&e.$$.dirty&&function(e,t){if(r){i(4,r.style.height="",r),i(4,r.style.transition="none",r);const o=window.getComputedStyle(r).height;r.classList.add(t&&e?"is-open":"is-close"),r.classList.remove(t&&e?"is-close":"is-open");const s=window.getComputedStyle(r).height;i(4,r.style.height=o,r),requestAnimationFrame((()=>{i(4,r.style.transition="",r),requestAnimationFrame((()=>{i(4,r.style.height=s,r)}))}));const n=()=>{i(4,r.style.height="",r),r.removeEventListener("transitionend",n)};r.addEventListener("transitionend",n)}}(d,o)},[u,d,p,o,r,w,c,k,a,s,l,n,function(e){M[e?"unshift":"push"]((()=>{c=e,i(6,c)}))},e=>k(e),function(e){M[e?"unshift":"push"]((()=>{r=e,i(4,r)}))}]}class W extends e{constructor(e){super(),t(this,e,U,O,i,{featureGroup:0,expand:1,a11yLabels:2},N)}}export{W as default};
1
+ import{H as e,i as t,s as i,I as o,e as n,d as s,h as l,b as a,k as r,B as c,z as u,A as d,m as p,R as b,ag as v,p as g,q as m,r as f,Y as w,Z as h,_ as k,$ as x,J as _,v as y,T as $,y as L,E as H,F as z,x as j,Q as E,G,C as M,K as B}from"../../index-c222d0b7.js";import P from"./sidebar-feature.nested.js";import{a as T,i as q,s as A}from"../../sidebar-service-8aa10fb1.js";import{E as C}from"../../EventHandler-f7ee47ca.js";function F(e){o(e,"svelte-k6gvwb",".mc-feature-group.svelte-k6gvwb.svelte-k6gvwb{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-k6gvwb.svelte-k6gvwb{fill:#191919;height:1.5rem;width:1.5rem}.mc-feature-group__container.svelte-k6gvwb.svelte-k6gvwb{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;-webkit-transition:margin 300ms ease-in-out;transition:margin 300ms ease-in-out}.mc-feature-group__label.svelte-k6gvwb.svelte-k6gvwb{margin:0 8px;width:200px;min-width:200px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.mc-feature-group__label__tooltip.svelte-k6gvwb.svelte-k6gvwb{opacity:0;-webkit-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-k6gvwb.svelte-k6gvwb{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-k6gvwb div.svelte-k6gvwb{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-k6gvwb:hover+.mc-feature-group__label__tooltip.svelte-k6gvwb{opacity:1;-webkit-transition-delay:1s;transition-delay:1s}.mc-feature-group__content.svelte-k6gvwb.svelte-k6gvwb{overflow:hidden;-webkit-transition:height 300ms ease-in-out;transition:height 300ms ease-in-out}.mc-feature-group__content.is-close.svelte-k6gvwb.svelte-k6gvwb{height:0}.mc-feature-group.is-selected.svelte-k6gvwb.svelte-k6gvwb{background:#cfd2d8}.mc-feature-group.is-close.svelte-k6gvwb .mc-feature-group__container.svelte-k6gvwb{margin:0 20px;width:24px}.mc-feature-group.is-open.svelte-k6gvwb .mc-feature-group__container.svelte-k6gvwb{margin:0 32px}.mc-feature-group.svelte-k6gvwb.svelte-k6gvwb:hover{background:#b3b7c1}.mc-feature-group.svelte-k6gvwb.svelte-k6gvwb:focus-visible{-webkit-box-shadow:none;box-shadow:none;border:none;outline:none}.mc-feature-group.svelte-k6gvwb:focus-visible .mc-feature-group__container.svelte-k6gvwb{-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}ul.svelte-k6gvwb.svelte-k6gvwb,li.svelte-k6gvwb.svelte-k6gvwb{list-style-type:none;margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}ul.svelte-k6gvwb.svelte-k6gvwb{-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-k6gvwb li.svelte-k6gvwb{-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 N(e,t,i){const o=e.slice();return o[18]=t[i],o}const S=e=>({}),V=e=>({});function I(e){let t,i=`<${U(e[0].icon)} />`;return{c(){t=n("span"),l(t,"class","mc-feature-group__icon svelte-k6gvwb")},m(e,o){a(e,t,o),t.innerHTML=i},p(e,o){1&o&&i!==(i=`<${U(e[0].icon)} />`)&&(t.innerHTML=i)},d(e){e&&p(t)}}}function J(e){let t,i;const o=e[11].icon,s=w(o,e,e[10],V);return{c(){t=n("span"),s&&s.c(),l(t,"class","mc-feature-group__icon svelte-k6gvwb")},m(e,o){a(e,t,o),s&&s.m(t,null),i=!0},p(e,t){s&&s.p&&(!i||1024&t)&&h(s,o,e,e[10],i?x(o,e[10],t,S):k(e[10]),V)},i(e){i||(c(s,e),i=!0)},o(e){u(s,e),i=!1},d(e){e&&p(t),s&&s.d(e)}}}function K(e){let t,i,o;return{c(){t=_("svg"),i=_("use"),l(i,"href",o=e[0].iconPath),l(t,"class","mc-feature-group__icon svelte-k6gvwb")},m(e,o){a(e,t,o),r(t,i)},p(e,t){1&t&&o!==(o=e[0].iconPath)&&l(i,"href",o)},d(e){e&&p(t)}}}function Q(e){let t,i,o,c,u,d=e[0].label+"",b=e[6]?.offsetHeight<e[6]?.scrollHeight&&R(e);function v(e,t){return e[1]?Y:Z}let g=v(e),m=g(e);return{c(){t=n("span"),i=y(d),o=s(),b&&b.c(),c=s(),m.c(),u=$(),l(t,"class","mc-feature-group__label svelte-k6gvwb")},m(n,s){a(n,t,s),r(t,i),e[12](t),a(n,o,s),b&&b.m(n,s),a(n,c,s),m.m(n,s),a(n,u,s)},p(e,t){1&t&&d!==(d=e[0].label+"")&&L(i,d),e[6]?.offsetHeight<e[6]?.scrollHeight?b?b.p(e,t):(b=R(e),b.c(),b.m(c.parentNode,c)):b&&(b.d(1),b=null),g!==(g=v(e))&&(m.d(1),m=g(e),m&&(m.c(),m.m(u.parentNode,u)))},d(i){i&&p(t),e[12](null),i&&p(o),b&&b.d(i),i&&p(c),m.d(i),i&&p(u)}}}function R(e){let t,i,o,c,u,d=e[0].label+"";return{c(){t=n("div"),i=n("div"),i.innerHTML='<div class="svelte-k6gvwb"></div>',o=s(),c=n("span"),u=y(d),l(i,"class","mc-feature-group__label__tooltip__pointer svelte-k6gvwb"),l(t,"aria-hidden","true"),l(t,"class","mc-feature-group__label__tooltip svelte-k6gvwb")},m(e,n){a(e,t,n),r(t,i),r(t,o),r(t,c),r(c,u)},p(e,t){1&t&&d!==(d=e[0].label+"")&&L(u,d)},d(e){e&&p(t)}}}function Y(e){let t,i;return{c(){t=_("svg"),i=_("path"),l(i,"d","M12 9H4a1 1 0 010-2h8a1 1 0 010 2z"),l(t,"class","mc-feature-group__icon svelte-k6gvwb"),l(t,"width","16px"),l(t,"height","16px"),l(t,"viewBox","0 0 16 16")},m(e,o){a(e,t,o),r(t,i)},d(e){e&&p(t)}}}function Z(e){let t,i;return{c(){t=_("svg"),i=_("path"),l(i,"d","M13 7H9V3a1 1 0 00-2 0v4H3a1 1 0 000 2h4v4a1 1 0 002 0V9h4a1 1 0 000-2z"),l(t,"class","mc-feature-group__icon svelte-k6gvwb"),l(t,"width","16px"),l(t,"height","16px"),l(t,"viewBox","0 0 16 16")},m(e,o){a(e,t,o),r(t,i)},d(e){e&&p(t)}}}function D(e){let t,i,o,d,b,v;function g(){return e[13](e[18])}return i=new P({props:{feature:e[18],a11yLabels:e[2]}}),{c(){t=n("li"),H(i.$$.fragment),o=s(),l(t,"class","svelte-k6gvwb")},m(e,n){a(e,t,n),z(i,t,null),r(t,o),d=!0,b||(v=j(t,"click",E(g)),b=!0)},p(t,o){e=t;const n={};1&o&&(n.feature=e[18]),4&o&&(n.a11yLabels=e[2]),i.$set(n)},i(e){d||(c(i.$$.fragment,e),d=!0)},o(e){u(i.$$.fragment,e),d=!1},d(e){e&&p(t),G(i),b=!1,v()}}}function O(e){let t,i,o,v,g,m,f,w,h,k,x,_,y,$,L,H=e[0].icon&&I(e),z=e[8].icon&&J(e),j=e[0].iconPath&&K(e),E=e[3]&&Q(e),G=e[0].items,B=[];for(let t=0;t<G.length;t+=1)B[t]=D(N(e,G,t));const P=e=>u(B[e],1,1,(()=>{B[e]=null}));return{c(){t=n("button"),i=n("span"),H&&H.c(),o=s(),z&&z.c(),v=s(),j&&j.c(),g=s(),E&&E.c(),x=s(),_=n("ul");for(let e=0;e<B.length;e+=1)B[e].c();l(i,"class","mc-feature-group__container svelte-k6gvwb"),l(t,"class",m="mc-feature-group "+(e[5]?"is-selected":"")+" "+(e[3]?"is-open":"is-close")+" svelte-k6gvwb"),l(t,"aria-label",f=e[0].label),l(t,"aria-expanded",w=e[3]&&e[1]),l(t,"aria-controls",h=e[0].code+"-list"),l(t,"id",k=e[0].code),l(_,"class","mc-feature-group__content is-close svelte-k6gvwb"),l(_,"aria-hidden",y=!e[3]||!e[1]),l(_,"id",$=e[0].code+"-list")},m(n,s){a(n,t,s),r(t,i),H&&H.m(i,null),r(i,o),z&&z.m(i,null),r(i,v),j&&j.m(i,null),r(i,g),E&&E.m(i,null),a(n,x,s),a(n,_,s);for(let e=0;e<B.length;e+=1)B[e]&&B[e].m(_,null);e[14](_),L=!0},p(e,[n]){if(e[0].icon?H?H.p(e,n):(H=I(e),H.c(),H.m(i,o)):H&&(H.d(1),H=null),e[8].icon?z?(z.p(e,n),256&n&&c(z,1)):(z=J(e),z.c(),c(z,1),z.m(i,v)):z&&(M(),u(z,1,1,(()=>{z=null})),d()),e[0].iconPath?j?j.p(e,n):(j=K(e),j.c(),j.m(i,g)):j&&(j.d(1),j=null),e[3]?E?E.p(e,n):(E=Q(e),E.c(),E.m(i,null)):E&&(E.d(1),E=null),(!L||40&n&&m!==(m="mc-feature-group "+(e[5]?"is-selected":"")+" "+(e[3]?"is-open":"is-close")+" svelte-k6gvwb"))&&l(t,"class",m),(!L||1&n&&f!==(f=e[0].label))&&l(t,"aria-label",f),(!L||10&n&&w!==(w=e[3]&&e[1]))&&l(t,"aria-expanded",w),(!L||1&n&&h!==(h=e[0].code+"-list"))&&l(t,"aria-controls",h),(!L||1&n&&k!==(k=e[0].code))&&l(t,"id",k),133&n){let t;for(G=e[0].items,t=0;t<G.length;t+=1){const i=N(e,G,t);B[t]?(B[t].p(i,n),c(B[t],1)):(B[t]=D(i),B[t].c(),c(B[t],1),B[t].m(_,null))}for(M(),t=G.length;t<B.length;t+=1)P(t);d()}(!L||10&n&&y!==(y=!e[3]||!e[1]))&&l(_,"aria-hidden",y),(!L||1&n&&$!==($=e[0].code+"-list"))&&l(_,"id",$)},i(e){if(!L){c(z);for(let e=0;e<G.length;e+=1)c(B[e]);L=!0}},o(e){u(z),B=B.filter(Boolean);for(let e=0;e<B.length;e+=1)u(B[e]);L=!1},d(i){i&&p(t),H&&H.d(),z&&z.d(),j&&j.d(),E&&E.d(),i&&p(x),i&&p(_),b(B,i),e[14](null)}}}function U(e){return`${e} size="1.5rem"`}function W(e,t,i){let o,n;v(e,q,(e=>i(3,o=e))),v(e,A,(e=>i(9,n=e)));let{$$slots:s={},$$scope:l}=t;const a=g(s);let r,c,{featureGroup:u}=t,{expand:d}=t,{a11yLabels:p}=t,b=new C(m(),f()),w=!1;function h(e){var t;e.disabled||((null===(t=e.items)||void 0===t?void 0:t.length)?b.dispatch("feature-click",e):T(e.code))}return e.$$set=e=>{"featureGroup"in e&&i(0,u=e.featureGroup),"expand"in e&&i(1,d=e.expand),"a11yLabels"in e&&i(2,p=e.a11yLabels),"$$scope"in e&&i(10,l=e.$$scope)},e.$$.update=()=>{var t,s,l,a,c,p;523&e.$$.dirty&&(t=d,s=o,l=u,i(5,w=null!==(p=(null==(a=n)?void 0:a.lv0)&&l.code===(null===(c=null==a?void 0:a.lv0)||void 0===c?void 0:c.code)&&(!a.lv1||!t||!s))&&void 0!==p&&p)),10&e.$$.dirty&&function(e,t){if(r){i(4,r.style.height="",r),i(4,r.style.transition="none",r);const o=window.getComputedStyle(r).height;r.classList.add(t&&e?"is-open":"is-close"),r.classList.remove(t&&e?"is-close":"is-open");const n=window.getComputedStyle(r).height;i(4,r.style.height=o,r),requestAnimationFrame((()=>{i(4,r.style.transition="",r),requestAnimationFrame((()=>{i(4,r.style.height=n,r)}))}));const s=()=>{i(4,r.style.height="",r),r.removeEventListener("transitionend",s)};r.addEventListener("transitionend",s)}}(d,o)},[u,d,p,o,r,w,c,h,a,n,l,s,function(e){B[e?"unshift":"push"]((()=>{c=e,i(6,c)}))},e=>h(e),function(e){B[e?"unshift":"push"]((()=>{r=e,i(4,r)}))}]}class X extends e{constructor(e){super(),t(this,e,W,O,i,{featureGroup:0,expand:1,a11yLabels:2},F)}}export{X as default};
2
2
  //# sourceMappingURL=sidebar-feature-group.nested.js.map
@@ -1 +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 {\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 $$slots.icon}\n <span class=\"mc-feature-group__icon\">\n <slot name=\"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_4","if_block1","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":"msHA6GmBA,EAAaC,EAAY,GAACC,8FADvCC,EAEMC,EAAAC,EAAAC,yCADON,EAAaC,EAAY,GAACC,cAAIG,EAAAE,UAAAC,yKAI3CL,EAEMC,EAAAC,EAAAC,+LAIHG,EAAAR,KAAaS,MAAK,GAEhBC,EAAAV,EAAO,IAAAW,aAAeX,MAAOY,cAAYC,EAAAb,0BAMxCA,EAAM,KAAAc,gJATZZ,EAEMC,EAAAC,EAAAC,2EADH,EAAAU,GAAAP,KAAAA,EAAAR,KAAaS,MAAK,KAAAO,EAAAC,EAAAT,GAEhBR,EAAO,IAAAW,aAAeX,MAAOY,4OAGvBM,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,uRAnDCK,EAAAV,KAAaC,MAAIyB,EAAA1B,GAKjB2B,EAAA3B,KAAQC,MAAI2B,EAAA5B,KAKZA,EAAc,IAAA6B,EAAA7B,GAsCd8B,EAAA9B,KAAa+B,2BAAlBC,OAAIC,GAAA,yRAzDmBjC,EAAU,GAAG,cAAgB,SAAKA,EAAC,GACxD,UACA,YAAU,kBACFkC,EAAAC,EAAA,aAAAC,EAAApC,KAAaS,OACVyB,EAAAC,EAAA,gBAAAE,EAAArC,MAAkBA,EAAM,IACvBkC,EAAAC,EAAA,gBAAAG,EAAAtC,KAAauC,KAAI,SAC7BL,EAAAC,EAAA,KAAAK,EAAAxC,KAAauC,sEA+CHL,EAAAO,EAAA,cAAAC,GAAA1C,OAAmBA,EAAM,IAClCkC,EAAAO,EAAA,KAAAE,EAAA3C,KAAauC,KAAI,iBAvDxBrC,EAmDQC,EAAAgC,EAAA9B,GA1CNe,EAyCMe,EAAA/B,uEAERF,EAWIC,EAAAsC,EAAApC,+EArDKL,KAAaC,2DAKbD,KAAQC,oGAKRD,EAAc,mGAnBIA,EAAU,GAAG,cAAgB,SAAKA,EAAC,GACxD,UACA,YAAU,qCACF4C,GAAA,EAAA7B,GAAAqB,KAAAA,EAAApC,KAAaS,+BACVmC,GAAA,GAAA7B,GAAAsB,KAAAA,EAAArC,MAAkBA,EAAM,+BACvB4C,GAAA,EAAA7B,GAAAuB,KAAAA,EAAAtC,KAAauC,KAAI,oCAC7BK,GAAA,EAAA7B,GAAAyB,KAAAA,EAAAxC,KAAauC,qCAmDVT,EAAA9B,KAAa+B,cAAlBC,OAAIC,GAAA,EAAA,yGAAJD,OAAIC,EAAAY,EAAAb,OAAAC,GAAA,aAJQW,GAAA,GAAA7B,GAAA2B,KAAAA,GAAA1C,OAAmBA,EAAM,6BAClC4C,GAAA,EAAA7B,GAAA4B,KAAAA,EAAA3C,KAAauC,KAAI,yDAGpBP,OAAIC,GAAA,sKA1EG,SAAAlC,EAAa+C,YACVA,qIAtDRC,EAOAtC,gBAdOuC,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,2LAtDnB,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,qEAuFyB1D,EAAK8E,aAsCpB7B,GAAAD,EAAYC,2CAHvCX,EAAOwC"}
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 {\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 $$slots.icon}\n <span class=\"mc-feature-group__icon\">\n <slot name=\"icon\" />\n </span>\n {/if}\n {#if featureGroup.iconPath}\n <svg class=\"mc-feature-group__icon\">\n <use href={featureGroup.iconPath} />\n </svg>\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","attr","use","use_href_value","iconPath","svg","append","dirty","t0_value","label","if_block0","offsetHeight","scrollHeight","create_if_block_2","create_if_block_1","set_data","t0","t1_value","div2","div1","t1","path","li","create_if_block_5","if_block1","create_if_block_4","if_block2","create_if_block_3","create_if_block","each_value","items","length","i","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":"8rHA6GmBA,EAAaC,EAAY,GAACC,8FADvCC,EAEMC,EAAAC,EAAAC,yCADON,EAAaC,EAAY,GAACC,cAAIG,EAAAE,UAAAC,yKAI3CL,EAEMC,EAAAC,EAAAC,4NAIOG,EAAAC,EAAA,OAAAC,EAAAV,KAAaW,sEAD1BT,EAEKC,EAAAS,EAAAP,GADHQ,EAAmCD,EAAAH,WAAxB,EAAAK,GAAAJ,KAAAA,EAAAV,KAAaW,qEAKvBI,EAAAf,KAAagB,MAAK,GAEhBC,EAAAjB,EAAO,IAAAkB,aAAelB,MAAOmB,cAAYC,EAAApB,0BAMxCA,EAAM,KAAAqB,gJATZnB,EAEMC,EAAAC,EAAAC,2EADH,EAAAS,GAAAC,KAAAA,EAAAf,KAAagB,MAAK,KAAAM,EAAAC,EAAAR,GAEhBf,EAAO,IAAAkB,aAAelB,MAAOmB,4OAGvBK,EAAAxB,KAAagB,MAAK,oRAF3Bd,EAGKC,EAAAsB,EAAApB,GAFHQ,EAAmEY,EAAAC,UACnEb,EAAgCY,EAAArB,kBAAzB,EAAAU,GAAAU,KAAAA,EAAAxB,KAAagB,MAAK,KAAAM,EAAAK,EAAAH,yPAc3BtB,EAMAC,EAAAS,EAAAP,GADGQ,EAA+CD,EAAAgB,8RAflD1B,EAQAC,EAAAS,EAAAP,GAHGQ,EAECD,EAAAgB,qNAqBR1B,EAEIC,EAAA0B,EAAAxB,yRAxDCY,EAAAjB,KAAaC,MAAI6B,EAAA9B,GAKjB+B,EAAA/B,KAAQC,MAAI+B,EAAAhC,GAKZiC,EAAAjC,KAAaW,UAAQuB,EAAAlC,KAKrBA,EAAc,IAAAmC,EAAAnC,GAsCdoC,EAAApC,KAAaqC,2BAAlBC,OAAIC,GAAA,wSA9DmBvC,EAAU,GAAG,cAAgB,SAAKA,EAAC,GACxD,UACA,YAAU,kBACFQ,EAAAgC,EAAA,aAAAC,EAAAzC,KAAagB,OACVR,EAAAgC,EAAA,gBAAAE,EAAA1C,MAAkBA,EAAM,IACvBQ,EAAAgC,EAAA,gBAAAG,EAAA3C,KAAa4C,KAAI,SAC7BpC,EAAAgC,EAAA,KAAAK,EAAA7C,KAAa4C,sEAoDHpC,EAAAsC,EAAA,cAAAC,GAAA/C,OAAmBA,EAAM,IAClCQ,EAAAsC,EAAA,KAAAE,EAAAhD,KAAa4C,KAAI,iBA5DxB1C,EAwDQC,EAAAqC,EAAAnC,GA/CNQ,EA8CM2B,EAAApC,6FAERF,EAWIC,EAAA2C,EAAAzC,+EA1DKL,KAAaC,2DAKbD,KAAQC,oGAKRD,KAAaW,+DAKbX,EAAc,mGAxBIA,EAAU,GAAG,cAAgB,SAAKA,EAAC,GACxD,UACA,YAAU,qCACFiD,GAAA,EAAAnC,GAAA2B,KAAAA,EAAAzC,KAAagB,+BACViC,GAAA,GAAAnC,GAAA4B,KAAAA,EAAA1C,MAAkBA,EAAM,+BACvBiD,GAAA,EAAAnC,GAAA6B,KAAAA,EAAA3C,KAAa4C,KAAI,oCAC7BK,GAAA,EAAAnC,GAAA+B,KAAAA,EAAA7C,KAAa4C,qCAwDVR,EAAApC,KAAaqC,cAAlBC,OAAIC,GAAA,EAAA,yGAAJD,OAAIC,EAAAW,EAAAZ,OAAAC,GAAA,aAJQU,GAAA,GAAAnC,GAAAiC,KAAAA,GAAA/C,OAAmBA,EAAM,6BAClCiD,GAAA,EAAAnC,GAAAkC,KAAAA,EAAAhD,KAAa4C,KAAI,yDAGpBN,OAAIC,GAAA,+KA/EG,SAAAxC,EAAaoD,YACVA,qIAtDRC,EAOApC,gBAdOqC,GAA0BC,UAC1BC,GAAeD,cACfE,GAAsBF,EAC7BG,EAAmB,IAAAC,EACrBC,IACAC,KAOEC,GAAa,EAoDR,SAAAC,EAAYC,SACdA,EAAQC,YAEjB,QAAAC,EAAUF,EAAQ1B,aAAlB,IAAA4B,SAAAA,EAAyB3B,QACjBmB,EAAaS,SAAS,gBAAiBH,GAEvCI,EAAcJ,EAAQnB,2LAtDnB,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,qEA4FyBxD,EAAK4E,aAsCpB7B,GAAAD,EAAYC,2CAHvCX,EAAOwC"}
@@ -115,6 +115,11 @@
115
115
  <slot name="icon" />
116
116
  </span>
117
117
  {/if}
118
+ {#if featureGroup.iconPath}
119
+ <svg class="mc-feature-group__icon">
120
+ <use href={featureGroup.iconPath} />
121
+ </svg>
122
+ {/if}
118
123
  {#if $isSidebarOpen}
119
124
  <span class="mc-feature-group__label" bind:this={label}>
120
125
  {featureGroup.label}
@@ -1,2 +1,2 @@
1
- import{H as e,i as s,s as t,I as i,T as l,b as a,B as n,z as c,A as o,m as d,ag as r,p as f,e as m,d as v,v as b,h as p,k as w,x as g,C as u,y as x,Y as h,Z as _,_ as $,$ as k,a4 as y}from"../../index-c222d0b7.js";import{a as j,s as P,i as z}from"../../sidebar-service-8aa10fb1.js";function A(e){i(e,"svelte-1lfwvf",".mc-sidebar-segment.svelte-1lfwvf.svelte-1lfwvf{cursor:pointer;-webkit-box-flex:0;-ms-flex:0;flex:0;text-decoration:none;color:#191919;line-height:22px;display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden;min-height:40px}.mc-sidebar-segment__icon.svelte-1lfwvf.svelte-1lfwvf{fill:#191919;height:1.5rem;width:1.5rem}.mc-sidebar-segment__container.svelte-1lfwvf.svelte-1lfwvf{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;padding:8px 0px}.mc-sidebar-segment__text.svelte-1lfwvf.svelte-1lfwvf{margin-left:10px;width:200px;min-width:200px}.mc-sidebar-segment.is-selected.svelte-1lfwvf.svelte-1lfwvf{background:#cfd2d8}.mc-sidebar-segment.svelte-1lfwvf.svelte-1lfwvf:focus-visible{-webkit-box-shadow:none;box-shadow:none;border:none;outline:none}.mc-sidebar-segment.svelte-1lfwvf:focus-visible .mc-sidebar-segment__container.svelte-1lfwvf{-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-segment.svelte-1lfwvf.svelte-1lfwvf:hover{background:#b3b7c1}.mc-sidebar-segment.is-close.svelte-1lfwvf .mc-sidebar-segment__container.svelte-1lfwvf{-webkit-transition:margin 300ms ease-in-out;transition:margin 300ms ease-in-out;margin:0 20px;width:24px}.mc-sidebar-segment.is-close.svelte-1lfwvf .mc-sidebar-segment__text.svelte-1lfwvf{opacity:0}.mc-sidebar-segment.is-open.svelte-1lfwvf .mc-sidebar-segment__container.svelte-1lfwvf{-webkit-transition:margin 300ms ease-in-out;transition:margin 300ms ease-in-out;margin:0 32px}.mc-sidebar-segment.is-open.svelte-1lfwvf .mc-sidebar-segment__text.svelte-1lfwvf{opacity:1}")}const B=e=>({}),C=e=>({});function H(e){let s,t,i,l,r,f,h,_,$,k,y,j,P,z,A,B,C,H=e[0].label+"",Y=e[0].icon&&I(e),Z=e[4].icon&&N(e),q=e[0].iconPath&&T(e);return{c(){s=m("a"),t=m("div"),i=m("span"),Y&&Y.c(),l=v(),Z&&Z.c(),r=v(),q&&q.c(),f=v(),h=m("span"),_=b(H),p(i,"class","mc-sidebar-segment__icon svelte-1lfwvf"),p(h,"aria-hidden",$=!e[2]),p(h,"class","mc-sidebar-segment__text svelte-1lfwvf"),p(t,"class","mc-sidebar-segment__container svelte-1lfwvf"),p(s,"id",k=e[0].code),p(s,"aria-label",y=e[0].label),p(s,"class",j="mc-sidebar-segment "+(e[0].code===e[1]?.lv0?.code?"is-selected":"")+" "+(e[2]?"is-open":"is-close")+" svelte-1lfwvf"),p(s,"href",P=e[0].href??"javascript:void(null)"),p(s,"target",z=e[0].embedded)},m(n,c){a(n,s,c),w(s,t),w(t,i),Y&&Y.m(i,null),w(i,l),Z&&Z.m(i,null),w(i,r),q&&q.m(i,null),w(t,f),w(t,h),w(h,_),A=!0,B||(C=g(s,"click",e[3]),B=!0)},p(e,t){e[0].icon?Y?Y.p(e,t):(Y=I(e),Y.c(),Y.m(i,l)):Y&&(Y.d(1),Y=null),e[4].icon?Z?(Z.p(e,t),16&t&&n(Z,1)):(Z=N(e),Z.c(),n(Z,1),Z.m(i,r)):Z&&(u(),c(Z,1,1,(()=>{Z=null})),o()),e[0].iconPath?q?q.p(e,t):(q=T(e),q.c(),q.m(i,null)):q&&(q.d(1),q=null),(!A||1&t)&&H!==(H=e[0].label+"")&&x(_,H),(!A||4&t&&$!==($=!e[2]))&&p(h,"aria-hidden",$),(!A||1&t&&k!==(k=e[0].code))&&p(s,"id",k),(!A||1&t&&y!==(y=e[0].label))&&p(s,"aria-label",y),(!A||7&t&&j!==(j="mc-sidebar-segment "+(e[0].code===e[1]?.lv0?.code?"is-selected":"")+" "+(e[2]?"is-open":"is-close")+" svelte-1lfwvf"))&&p(s,"class",j),(!A||1&t&&P!==(P=e[0].href??"javascript:void(null)"))&&p(s,"href",P),(!A||1&t&&z!==(z=e[0].embedded))&&p(s,"target",z)},i(e){A||(n(Z),A=!0)},o(e){c(Z),A=!1},d(e){e&&d(s),Y&&Y.d(),Z&&Z.d(),q&&q.d(),B=!1,C()}}}function I(e){let s,t,i=`<${Z(e[0].icon)} />`;return{c(){s=new y(!1),t=l(),s.a=t},m(e,l){s.m(i,e,l),a(e,t,l)},p(e,t){1&t&&i!==(i=`<${Z(e[0].icon)} />`)&&s.p(i)},d(e){e&&d(t),e&&s.d()}}}function N(e){let s;const t=e[6].icon,i=h(t,e,e[5],C);return{c(){i&&i.c()},m(e,t){i&&i.m(e,t),s=!0},p(e,l){i&&i.p&&(!s||32&l)&&_(i,t,e,e[5],s?k(t,e[5],l,B):$(e[5]),C)},i(e){s||(n(i,e),s=!0)},o(e){c(i,e),s=!1},d(e){i&&i.d(e)}}}function T(e){let s,t;return{c(){s=m("object"),p(s,"class","mc-sidebar-segment__icon svelte-1lfwvf"),p(s,"aria-label","label"),p(s,"type","image/svg+xml"),p(s,"data",t=e[0].iconPath)},m(e,t){a(e,s,t)},p(e,i){1&i&&t!==(t=e[0].iconPath)&&p(s,"data",t)},d(e){e&&d(s)}}}function Y(e){let s,t,i=e[0]&&H(e);return{c(){i&&i.c(),s=l()},m(e,l){i&&i.m(e,l),a(e,s,l),t=!0},p(e,[t]){e[0]?i?(i.p(e,t),1&t&&n(i,1)):(i=H(e),i.c(),n(i,1),i.m(s.parentNode,s)):i&&(u(),c(i,1,1,(()=>{i=null})),o())},i(e){t||(n(i),t=!0)},o(e){c(i),t=!1},d(e){i&&i.d(e),e&&d(s)}}}function Z(e){return`${e} size="1.5rem"`}function q(e,s,t){let i,l;r(e,P,(e=>t(1,i=e))),r(e,z,(e=>t(2,l=e)));let{$$slots:a={},$$scope:n}=s;const c=f(a);let{data:o}=s;return e.$$set=e=>{"data"in e&&t(0,o=e.data),"$$scope"in e&&t(5,n=e.$$scope)},[o,i,l,function(){j(o.code)},c,n,a]}class D extends e{constructor(e){super(),s(this,e,q,Y,t,{data:0},A)}}export{D as default};
1
+ import{H as e,i as s,s as t,I as i,T as l,b as n,B as a,z as c,A as o,m as d,ag as r,p as f,e as m,d as v,v as b,h as w,k as p,x as g,C as u,y as x,Y as h,Z as _,_ as $,$ as k,J as y,a4 as j}from"../../index-c222d0b7.js";import{a as P,s as z,i as A}from"../../sidebar-service-8aa10fb1.js";function B(e){i(e,"svelte-1lfwvf",".mc-sidebar-segment.svelte-1lfwvf.svelte-1lfwvf{cursor:pointer;-webkit-box-flex:0;-ms-flex:0;flex:0;text-decoration:none;color:#191919;line-height:22px;display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden;min-height:40px}.mc-sidebar-segment__icon.svelte-1lfwvf.svelte-1lfwvf{fill:#191919;height:1.5rem;width:1.5rem}.mc-sidebar-segment__container.svelte-1lfwvf.svelte-1lfwvf{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;padding:8px 0px}.mc-sidebar-segment.svelte-1lfwvf svg.svelte-1lfwvf{fill:#191919}.mc-sidebar-segment__text.svelte-1lfwvf.svelte-1lfwvf{margin-left:10px;width:200px;min-width:200px}.mc-sidebar-segment.is-selected.svelte-1lfwvf.svelte-1lfwvf{background:#cfd2d8}.mc-sidebar-segment.svelte-1lfwvf.svelte-1lfwvf:focus-visible{-webkit-box-shadow:none;box-shadow:none;border:none;outline:none}.mc-sidebar-segment.svelte-1lfwvf:focus-visible .mc-sidebar-segment__container.svelte-1lfwvf{-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-segment.svelte-1lfwvf.svelte-1lfwvf:hover{background:#b3b7c1}.mc-sidebar-segment.is-close.svelte-1lfwvf .mc-sidebar-segment__container.svelte-1lfwvf{-webkit-transition:margin 300ms ease-in-out;transition:margin 300ms ease-in-out;margin:0 20px;width:24px}.mc-sidebar-segment.is-close.svelte-1lfwvf .mc-sidebar-segment__text.svelte-1lfwvf{opacity:0}.mc-sidebar-segment.is-open.svelte-1lfwvf .mc-sidebar-segment__container.svelte-1lfwvf{-webkit-transition:margin 300ms ease-in-out;transition:margin 300ms ease-in-out;margin:0 32px}.mc-sidebar-segment.is-open.svelte-1lfwvf .mc-sidebar-segment__text.svelte-1lfwvf{opacity:1}")}const C=e=>({}),H=e=>({});function I(e){let s,t,i,l,r,f,h,_,$,k,y,j,P,z,A,B,C,H=e[0].label+"",I=e[0].icon&&J(e),Y=e[4].icon&&N(e),Z=e[0].iconPath&&T(e);return{c(){s=m("a"),t=m("div"),i=m("span"),I&&I.c(),l=v(),Y&&Y.c(),r=v(),Z&&Z.c(),f=v(),h=m("span"),_=b(H),w(i,"class","mc-sidebar-segment__icon svelte-1lfwvf"),w(h,"aria-hidden",$=!e[2]),w(h,"class","mc-sidebar-segment__text svelte-1lfwvf"),w(t,"class","mc-sidebar-segment__container svelte-1lfwvf"),w(s,"id",k=e[0].code),w(s,"aria-label",y=e[0].label),w(s,"class",j="mc-sidebar-segment "+(e[0].code===e[1]?.lv0?.code?"is-selected":"")+" "+(e[2]?"is-open":"is-close")+" svelte-1lfwvf"),w(s,"href",P=e[0].href??"javascript:void(null)"),w(s,"target",z=e[0].embedded)},m(a,c){n(a,s,c),p(s,t),p(t,i),I&&I.m(i,null),p(i,l),Y&&Y.m(i,null),p(i,r),Z&&Z.m(i,null),p(t,f),p(t,h),p(h,_),A=!0,B||(C=g(s,"click",e[3]),B=!0)},p(e,t){e[0].icon?I?I.p(e,t):(I=J(e),I.c(),I.m(i,l)):I&&(I.d(1),I=null),e[4].icon?Y?(Y.p(e,t),16&t&&a(Y,1)):(Y=N(e),Y.c(),a(Y,1),Y.m(i,r)):Y&&(u(),c(Y,1,1,(()=>{Y=null})),o()),e[0].iconPath?Z?Z.p(e,t):(Z=T(e),Z.c(),Z.m(i,null)):Z&&(Z.d(1),Z=null),(!A||1&t)&&H!==(H=e[0].label+"")&&x(_,H),(!A||4&t&&$!==($=!e[2]))&&w(h,"aria-hidden",$),(!A||1&t&&k!==(k=e[0].code))&&w(s,"id",k),(!A||1&t&&y!==(y=e[0].label))&&w(s,"aria-label",y),(!A||7&t&&j!==(j="mc-sidebar-segment "+(e[0].code===e[1]?.lv0?.code?"is-selected":"")+" "+(e[2]?"is-open":"is-close")+" svelte-1lfwvf"))&&w(s,"class",j),(!A||1&t&&P!==(P=e[0].href??"javascript:void(null)"))&&w(s,"href",P),(!A||1&t&&z!==(z=e[0].embedded))&&w(s,"target",z)},i(e){A||(a(Y),A=!0)},o(e){c(Y),A=!1},d(e){e&&d(s),I&&I.d(),Y&&Y.d(),Z&&Z.d(),B=!1,C()}}}function J(e){let s,t,i=`<${Z(e[0].icon)} />`;return{c(){s=new j(!1),t=l(),s.a=t},m(e,l){s.m(i,e,l),n(e,t,l)},p(e,t){1&t&&i!==(i=`<${Z(e[0].icon)} />`)&&s.p(i)},d(e){e&&d(t),e&&s.d()}}}function N(e){let s;const t=e[6].icon,i=h(t,e,e[5],H);return{c(){i&&i.c()},m(e,t){i&&i.m(e,t),s=!0},p(e,l){i&&i.p&&(!s||32&l)&&_(i,t,e,e[5],s?k(t,e[5],l,C):$(e[5]),H)},i(e){s||(a(i,e),s=!0)},o(e){c(i,e),s=!1},d(e){i&&i.d(e)}}}function T(e){let s,t,i;return{c(){s=y("svg"),t=y("use"),w(t,"href",i=e[0].iconPath),w(s,"class","mc-sidebar-segment__icon svelte-1lfwvf")},m(e,i){n(e,s,i),p(s,t)},p(e,s){1&s&&i!==(i=e[0].iconPath)&&w(t,"href",i)},d(e){e&&d(s)}}}function Y(e){let s,t,i=e[0]&&I(e);return{c(){i&&i.c(),s=l()},m(e,l){i&&i.m(e,l),n(e,s,l),t=!0},p(e,[t]){e[0]?i?(i.p(e,t),1&t&&a(i,1)):(i=I(e),i.c(),a(i,1),i.m(s.parentNode,s)):i&&(u(),c(i,1,1,(()=>{i=null})),o())},i(e){t||(a(i),t=!0)},o(e){c(i),t=!1},d(e){i&&i.d(e),e&&d(s)}}}function Z(e){return`${e} size="1.5rem"`}function q(e,s,t){let i,l;r(e,z,(e=>t(1,i=e))),r(e,A,(e=>t(2,l=e)));let{$$slots:n={},$$scope:a}=s;const c=f(n);let{data:o}=s;return e.$$set=e=>{"data"in e&&t(0,o=e.data),"$$scope"in e&&t(5,a=e.$$scope)},[o,i,l,function(){P(o.code)},c,a,n]}class D extends e{constructor(e){super(),s(this,e,q,Y,t,{data:0},B)}}export{D as default};
2
2
  //# sourceMappingURL=sidebar-segment.nested.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"sidebar-segment.nested.js","sources":["../../../src/components/sidebar/sidebar-segment.nested.svelte"],"sourcesContent":["<svelte:options />\n\n<script lang=\"ts\">\n import type { Segment } from './sidebar.types';\n import {\n isSidebarOpen,\n selectedFeature,\n selectFeature,\n } from '../../utilities/sidebar-service';\n\n export let data: Segment;\n\n function generateIcon(iconname: string): string {\n return `${iconname} size=\"1.5rem\"`;\n }\n\n function handleClick() {\n selectFeature(data.code);\n }\n</script>\n\n{#if data}\n <a\n id={data.code}\n aria-label={data.label}\n class=\"mc-sidebar-segment {data.code === $selectedFeature?.lv0?.code\n ? 'is-selected'\n : ''} {$isSidebarOpen ? 'is-open' : 'is-close'}\"\n href={data.href ?? 'javascript:void(null)'}\n target={data.embedded}\n on:click={handleClick}\n >\n \n <div class=\"mc-sidebar-segment__container\">\n <span class=\"mc-sidebar-segment__icon\">\n {#if data.icon}\n {@html `<${generateIcon(data.icon)} />`}\n {/if}\n {#if $$slots.icon}\n <slot name=\"icon\" />\n {/if}\n {#if data.iconPath}\n <object class=\"mc-sidebar-segment__icon\" aria-label=\"label\" type=\"image/svg+xml\" data={data.iconPath}></object>\n {/if}\n </span>\n <span aria-hidden={!$isSidebarOpen} class=\"mc-sidebar-segment__text\">\n {data.label}\n </span>\n </div>\n </a>\n{/if}\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n @import './_c.sidebar';\n\n .mc-sidebar-segment {\n cursor: pointer;\n flex: 0;\n text-decoration: none;\n color: $color-sidebar-text-color;\n line-height: 22px;\n display: flex;\n overflow: hidden;\n min-height: 40px;\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 width: 100%;\n padding: 8px 0px;\n }\n\n svg {\n fill: $color-sidebar-icon;\n }\n\n &__text {\n margin-left: 10px;\n width: 200px;\n min-width: 200px;\n }\n\n &.is-selected {\n background: $color-sidebar-feature-selected-background;\n }\n\n &:focus-visible {\n box-shadow: none;\n border: none;\n outline: none;\n\n .mc-sidebar-segment__container {\n box-shadow: none;\n border: none;\n border-radius: 6px;\n outline: 1px solid #0b96cc;\n }\n }\n\n &:hover {\n background: $color-sidebar-feature-hover-background;\n }\n\n &.is-close {\n .mc-sidebar-segment__container {\n @include transition(margin 300ms ease-in-out);\n margin: 0 20px;\n width: 24px;\n }\n\n .mc-sidebar-segment__text {\n opacity: 0;\n }\n }\n\n &.is-open {\n .mc-sidebar-segment__container {\n @include transition(margin 300ms ease-in-out);\n margin: 0 32px;\n }\n\n .mc-sidebar-segment__text {\n opacity: 1;\n }\n }\n }\n</style>\n"],"names":["t3_value","ctx","label","if_block0","icon","create_if_block_3","if_block1","create_if_block_2","if_block2","iconPath","create_if_block_1","attr","a","a_id_value","code","a_aria_label_value","a_class_value","lv0","href","a_target_value","embedded","insert","target","anchor","append","div","span0","span1","current","dirty","set_data","t3","generateIcon","html_tag","p","raw_value","object","object_data_value","create_if_block","iconname","data","$$props","selectFeature"],"mappings":"4gEA8CSA,EAAAC,KAAKC,MAAK,GAXRC,EAAAF,KAAKG,MAAIC,EAAAJ,GAGTK,EAAAL,KAAQG,MAAIG,EAAAN,GAGZO,EAAAP,KAAKQ,UAAQC,EAAAT,yLAIEA,EAAc,qHAtBhCU,EAAAC,EAAA,KAAAC,EAAAZ,KAAKa,MACGH,EAAAC,EAAA,aAAAG,EAAAd,KAAKC,OACUS,EAAAC,EAAA,QAAAI,EAAA,uBAAAf,KAAKa,OAASb,EAAkB,IAAAgB,KAAKH,KAC5D,cACA,IAAK,KAAAb,EAAiB,GAAA,UAAY,YAAU,+BAC1CA,EAAI,GAACiB,MAAQ,yBACXP,EAAAC,EAAA,SAAAO,EAAAlB,KAAKmB,kBAPfC,EA2BGC,EAAAV,EAAAW,GAhBDC,EAeKZ,EAAAa,GAdHD,EAUMC,EAAAC,qEACNF,EAEMC,EAAAE,iCAjBE1B,EAAW,kBAKdA,KAAKG,2DAGLH,KAAQG,mGAGRH,KAAKQ,oEAKPmB,GAAA,EAAAC,IAAA7B,KAAAA,EAAAC,KAAKC,MAAK,KAAA4B,EAAAC,EAAA/B,qBADOC,EAAc,6BAtBhC2B,GAAA,EAAAC,GAAAhB,KAAAA,EAAAZ,KAAKa,sBACGc,GAAA,EAAAC,GAAAd,KAAAA,EAAAd,KAAKC,+BACU0B,GAAA,EAAAC,GAAAb,KAAAA,EAAA,uBAAAf,KAAKa,OAASb,EAAkB,IAAAgB,KAAKH,KAC5D,cACA,IAAK,KAAAb,EAAiB,GAAA,UAAY,YAAU,oDAC1CA,EAAI,GAACiB,MAAQ,2CACXU,GAAA,EAAAC,GAAAV,KAAAA,EAAAlB,KAAKmB,iJAOIY,EAAa/B,EAAI,GAACG,kGAAlB4B,EAAa/B,EAAI,GAACG,aAAI6B,EAAAC,EAAAC,yZAMoDxB,EAAAyB,EAAA,OAAAC,EAAApC,KAAKQ,kBAA5FY,EAA8GC,EAAAc,EAAAb,WAAvB,EAAAM,GAAAQ,KAAAA,EAAApC,KAAKQ,iEArB/FR,EAAI,IAAAqC,EAAArC,yEAAJA,EAAI,0KATE,SAAA+B,EAAaO,YACVA,0IAHDC,GAAaC,kGAOtBC,EAAcF,EAAK1B"}
1
+ {"version":3,"file":"sidebar-segment.nested.js","sources":["../../../src/components/sidebar/sidebar-segment.nested.svelte"],"sourcesContent":["<svelte:options />\n\n<script lang=\"ts\">\n import type { Segment } from './sidebar.types';\n import {\n isSidebarOpen,\n selectedFeature,\n selectFeature,\n } from '../../utilities/sidebar-service';\n\n export let data: Segment;\n\n function generateIcon(iconname: string): string {\n return `${iconname} size=\"1.5rem\"`;\n }\n\n function handleClick() {\n selectFeature(data.code);\n }\n</script>\n\n{#if data}\n <a\n id={data.code}\n aria-label={data.label}\n class=\"mc-sidebar-segment {data.code === $selectedFeature?.lv0?.code\n ? 'is-selected'\n : ''} {$isSidebarOpen ? 'is-open' : 'is-close'}\"\n href={data.href ?? 'javascript:void(null)'}\n target={data.embedded}\n on:click={handleClick}\n >\n \n <div class=\"mc-sidebar-segment__container\">\n <span class=\"mc-sidebar-segment__icon\">\n {#if data.icon}\n {@html `<${generateIcon(data.icon)} />`}\n {/if}\n {#if $$slots.icon}\n <slot name=\"icon\" />\n {/if}\n {#if data.iconPath}\n <svg class=\"mc-sidebar-segment__icon\">\n <use href={data.iconPath}></use>\n </svg>\n {/if}\n </span>\n <span aria-hidden={!$isSidebarOpen} class=\"mc-sidebar-segment__text\">\n {data.label}\n </span>\n </div>\n </a>\n{/if}\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n @import './_c.sidebar';\n\n .mc-sidebar-segment {\n cursor: pointer;\n flex: 0;\n text-decoration: none;\n color: $color-sidebar-text-color;\n line-height: 22px;\n display: flex;\n overflow: hidden;\n min-height: 40px;\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 width: 100%;\n padding: 8px 0px;\n }\n\n svg {\n fill: $color-sidebar-icon;\n }\n\n &__text {\n margin-left: 10px;\n width: 200px;\n min-width: 200px;\n }\n\n &.is-selected {\n background: $color-sidebar-feature-selected-background;\n }\n\n &:focus-visible {\n box-shadow: none;\n border: none;\n outline: none;\n\n .mc-sidebar-segment__container {\n box-shadow: none;\n border: none;\n border-radius: 6px;\n outline: 1px solid #0b96cc;\n }\n }\n\n &:hover {\n background: $color-sidebar-feature-hover-background;\n }\n\n &.is-close {\n .mc-sidebar-segment__container {\n @include transition(margin 300ms ease-in-out);\n margin: 0 20px;\n width: 24px;\n }\n\n .mc-sidebar-segment__text {\n opacity: 0;\n }\n }\n\n &.is-open {\n .mc-sidebar-segment__container {\n @include transition(margin 300ms ease-in-out);\n margin: 0 32px;\n }\n\n .mc-sidebar-segment__text {\n opacity: 1;\n }\n }\n }\n</style>\n"],"names":["t3_value","ctx","label","if_block0","icon","create_if_block_3","if_block1","create_if_block_2","if_block2","iconPath","create_if_block_1","attr","a","a_id_value","code","a_aria_label_value","a_class_value","lv0","href","a_target_value","embedded","insert","target","anchor","append","div","span0","span1","current","dirty","set_data","t3","generateIcon","html_tag","p","raw_value","use","use_href_value","svg","create_if_block","iconname","data","$$props","selectFeature"],"mappings":"olEAgDSA,EAAAC,KAAKC,MAAK,GAbRC,EAAAF,KAAKG,MAAIC,EAAAJ,GAGTK,EAAAL,KAAQG,MAAIG,EAAAN,GAGZO,EAAAP,KAAKQ,UAAQC,EAAAT,yLAMEA,EAAc,qHAxBhCU,EAAAC,EAAA,KAAAC,EAAAZ,KAAKa,MACGH,EAAAC,EAAA,aAAAG,EAAAd,KAAKC,OACUS,EAAAC,EAAA,QAAAI,EAAA,uBAAAf,KAAKa,OAASb,EAAkB,IAAAgB,KAAKH,KAC5D,cACA,IAAK,KAAAb,EAAiB,GAAA,UAAY,YAAU,+BAC1CA,EAAI,GAACiB,MAAQ,yBACXP,EAAAC,EAAA,SAAAO,EAAAlB,KAAKmB,kBAPfC,EA6BGC,EAAAV,EAAAW,GAlBDC,EAiBKZ,EAAAa,GAhBHD,EAYMC,EAAAC,qEACNF,EAEMC,EAAAE,iCAnBE1B,EAAW,kBAKdA,KAAKG,2DAGLH,KAAQG,mGAGRH,KAAKQ,oEAOPmB,GAAA,EAAAC,IAAA7B,KAAAA,EAAAC,KAAKC,MAAK,KAAA4B,EAAAC,EAAA/B,qBADOC,EAAc,6BAxBhC2B,GAAA,EAAAC,GAAAhB,KAAAA,EAAAZ,KAAKa,sBACGc,GAAA,EAAAC,GAAAd,KAAAA,EAAAd,KAAKC,+BACU0B,GAAA,EAAAC,GAAAb,KAAAA,EAAA,uBAAAf,KAAKa,OAASb,EAAkB,IAAAgB,KAAKH,KAC5D,cACA,IAAK,KAAAb,EAAiB,GAAA,UAAY,YAAU,oDAC1CA,EAAI,GAACiB,MAAQ,2CACXU,GAAA,EAAAC,GAAAV,KAAAA,EAAAlB,KAAKmB,iJAOIY,EAAa/B,EAAI,GAACG,kGAAlB4B,EAAa/B,EAAI,GAACG,aAAI6B,EAAAC,EAAAC,uTAOxBxB,EAAAyB,EAAA,OAAAC,EAAApC,KAAKQ,wEADlBY,EAEKC,EAAAgB,EAAAf,GADHC,EAA+Bc,EAAAF,WAApB,EAAAP,GAAAQ,KAAAA,EAAApC,KAAKQ,iEAtBnBR,EAAI,IAAAsC,EAAAtC,yEAAJA,EAAI,0KATE,SAAA+B,EAAaQ,YACVA,0IAHDC,GAAaC,kGAOtBC,EAAcF,EAAK3B"}
@@ -40,7 +40,9 @@
40
40
  <slot name="icon" />
41
41
  {/if}
42
42
  {#if data.iconPath}
43
- <object class="mc-sidebar-segment__icon" aria-label="label" type="image/svg+xml" data={data.iconPath}></object>
43
+ <svg class="mc-sidebar-segment__icon">
44
+ <use href={data.iconPath}></use>
45
+ </svg>
44
46
  {/if}
45
47
  </span>
46
48
  <span aria-hidden={!$isSidebarOpen} class="mc-sidebar-segment__text">