@mozaic-ds/web-components 1.0.0-beta.2 → 1.0.0-beta.3

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

@@ -1,2 +0,0 @@
-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};
-//# sourceMappingURL=sidebar-feature-group.nested.js.map

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

@@ -1 +0,0 @@
-{"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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"}

package/dist/components/sidebar/sidebar-feature-group.nested.svelte

@@ -1,317 +0,0 @@
-<svelte:options />
-
-<script lang="ts">
-  import type {
-    FeatureGroup,
-    Feature,
-    A11yLabels,
-    Selection,
-  } from './sidebar.types';
-  import FeatureComponent from './sidebar-feature.nested.svelte';
-  import {
-    isSidebarOpen,
-    selectedFeature,
-    selectFeature,
-  } from '../../utilities/sidebar-service';
-  import { EventHandler } from '../../utilities/EventHandler';
-  import {
-    get_current_component,
-    createEventDispatcher,
-  } from 'svelte/internal';
-
-  export let featureGroup: FeatureGroup;
-  export let expand: boolean;
-  export let a11yLabels: A11yLabels;
-  let eventHandler = new EventHandler(
-    get_current_component(),
-    createEventDispatcher(),
-  );
-  let content: HTMLElement;
-
-  $: updateSelection(expand, $isSidebarOpen, featureGroup, $selectedFeature);
-  $: updateContentCSS(expand, $isSidebarOpen);
-
-  let isSelected = false;
-
-  let label: HTMLElement;
-
-  function updateSelection(
-    isExpanded: boolean,
-    isOpen: boolean,
-    group: FeatureGroup,
-    selection?: Selection,
-  ): void {
-    isSelected =
-      (selection?.lv0 &&
-        group.code === selection?.lv0?.code &&
-        (!selection.lv1 || !isExpanded || !isOpen)) ??
-      false;
-  }
-
-  // Update the CSS programatically to have a nice animation on height between 0px and 'auto'
-  function updateContentCSS(isExpanded: boolean, isOpen: boolean): void {
-    if (content) {
-      content.style.height = '';
-      content.style.transition = 'none';
-      const startHeight = window.getComputedStyle(content).height;
-
-      content.classList.add(isOpen && isExpanded ? 'is-open' : 'is-close');
-      content.classList.remove(isOpen && isExpanded ? 'is-close' : 'is-open');
-
-      const height = window.getComputedStyle(content).height;
-      content.style.height = startHeight;
-
-      // wait until the next frame so that everything has time to update before starting the transition
-      requestAnimationFrame(() => {
-        content.style.transition = '';
-        requestAnimationFrame(() => {
-          content.style.height = height;
-        });
-      });
-
-      // Clear the saved height values after the transition
-      const handler = () => {
-        content.style.height = '';
-        content.removeEventListener('transitionend', handler);
-      };
-
-      content.addEventListener('transitionend', handler);
-    }
-  }
-
-  function generateIcon(iconname: string): string {
-    return `${iconname} size="1.5rem"`;
-  }
-
-  function handleClick(feature: Feature) {
-    if (!feature.disabled) {
-      // Only select the feature if it is the last level item
-      if (feature.items?.length) {
-        eventHandler.dispatch('feature-click', feature);
-      } else {
-        selectFeature(feature.code);
-      }
-    }
-  }
-</script>
-
-<button
-  class="mc-feature-group {isSelected ? 'is-selected' : ''} {$isSidebarOpen
-    ? 'is-open'
-    : 'is-close'}"
-  aria-label={featureGroup.label}
-  aria-expanded={$isSidebarOpen && expand}
-  aria-controls="{featureGroup.code}-list"
-  id={featureGroup.code}
->
-  <span class="mc-feature-group__container">
-    {#if featureGroup.icon}
-      <span class="mc-feature-group__icon">
-        {@html `<${generateIcon(featureGroup.icon)} />`}
-      </span>
-    {/if}
-    {#if $$slots.icon}
-      <span class="mc-feature-group__icon">
-        <slot name="icon" />
-      </span>
-    {/if}
-    {#if featureGroup.iconPath}
-      <svg class="mc-feature-group__icon">
-        <use href={featureGroup.iconPath} />
-      </svg>
-    {/if}
-    {#if $isSidebarOpen}
-      <span class="mc-feature-group__label" bind:this={label}>
-        {featureGroup.label}
-      </span>
-      {#if label?.offsetHeight < label?.scrollHeight}
-        <div aria-hidden="true" class="mc-feature-group__label__tooltip">
-          <div class="mc-feature-group__label__tooltip__pointer"><div /></div>
-          <span>{featureGroup.label}</span>
-        </div>
-      {/if}
-      {#if !expand}
-        <svg
-          class="mc-feature-group__icon"
-          width="16px"
-          height="16px"
-          viewBox="0 0 16 16"
-          ><path
-            d="M13 7H9V3a1 1 0 00-2 0v4H3a1 1 0 000 2h4v4a1 1 0 002 0V9h4a1 1 0 000-2z"
-          /></svg
-        >
-      {:else}
-        <svg
-          class="mc-feature-group__icon"
-          width="16px"
-          height="16px"
-          viewBox="0 0 16 16"
-          ><path d="M12 9H4a1 1 0 010-2h8a1 1 0 010 2z" /></svg
-        >
-      {/if}
-    {/if}
-  </span>
-</button>
-<ul
-  class="mc-feature-group__content is-close"
-  aria-hidden={!$isSidebarOpen || !expand}
-  id="{featureGroup.code}-list"
-  bind:this={content}
->
-  {#each featureGroup.items as feature}
-    <li on:click|stopPropagation={() => handleClick(feature)}>
-      <FeatureComponent {feature} {a11yLabels} />
-    </li>
-  {/each}
-</ul>
-
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import './_c.sidebar';
-
-  .mc-feature-group {
-    background: none;
-    border: none;
-    color: $color-sidebar-text-color;
-    cursor: pointer;
-    font-size: inherit;
-    font-family: inherit;
-    text-align: initial;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-
-    &__icon {
-      fill: $color-sidebar-icon;
-      height: 1.5rem;
-      width: 1.5rem;
-    }
-
-    &__container {
-      display: flex;
-      align-items: center;
-      margin: 5px 0;
-      padding: 8px 0px;
-      @include transition(margin 300ms ease-in-out);
-    }
-
-    &__label {
-      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;
-
-      &__tooltip {
-        opacity: 0;
-        transition: 0s opacity;
-        background-color: $color-sidebar-divider-background;
-        border: 1px solid $color-sidebar-text-color;
-        border-radius: 4px;
-        position: absolute;
-        pointer-events: none;
-        left: calc(100% - 16px);
-        padding: 8px 16px;
-        width: 188px;
-
-        &__pointer {
-          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;
-
-          & div {
-            position: relative;
-            top: -6px;
-            left: 2px;
-            width: 0;
-            height: 0;
-            border-top: 6px solid transparent;
-            border-bottom: 6px solid transparent;
-            border-right: 8px solid $color-sidebar-divider-background;
-          }
-        }
-      }
-
-      &:hover + .mc-feature-group__label__tooltip {
-        opacity: 1;
-        transition-delay: 1s;
-      }
-    }
-
-    &__content {
-      overflow: hidden;
-      @include transition(height 300ms ease-in-out);
-      &.is-close {
-        height: 0;
-      }
-
-      &.is-open {
-        height: auto;
-      }
-    }
-
-    &.is-selected {
-      background: $color-sidebar-feature-selected-background;
-    }
-
-    &.is-close {
-      .mc-feature-group__container {
-        margin: 0 20px;
-        width: 24px;
-      }
-    }
-
-    &.is-open {
-      .mc-feature-group__container {
-        margin: 0 32px;
-      }
-    }
-
-    &:hover {
-      background: $color-sidebar-feature-hover-background;
-    }
-
-    &:focus-visible {
-      box-shadow: none;
-      border: none;
-      outline: none;
-
-      .mc-feature-group__container {
-        box-shadow: none;
-        border: none;
-        border-radius: 6px;
-        outline: 1px solid #0b96cc;
-      }
-    }
-  }
-
-  ul,
-  li {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    width: 100%;
-  }
-
-  ul {
-    align-items: start;
-    flex-direction: column;
-    justify-content: center;
-
-    li {
-      flex-direction: column;
-      box-sizing: border-box;
-    }
-  }
-</style>

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

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

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

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

package/dist/components/sidebar/sidebar-feature.nested.svelte

@@ -1,249 +0,0 @@
-<svelte:options />
-
-<script lang="ts">
-  import {
-    isSidebarOpen,
-    selectedFeature,
-  } from '../../utilities/sidebar-service';
-  import type { A11yLabels, Feature, Selection } from './sidebar.types';
-
-  export let feature: Feature;
-  export let a11yLabels: A11yLabels;
-
-  $: updateSelection(feature, $selectedFeature);
-  $: updatA11yLabel(a11yLabels, feature);
-
-  let isSelected = false;
-  let ariaSuffix: string;
-
-  let label: HTMLElement;
-  let showTooltip: boolean;
-  $: updateTooltip($isSidebarOpen);
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  function updateTooltip(_: boolean) {
-    setTimeout(() => {
-      showTooltip = label?.offsetHeight < label?.scrollHeight;
-    }, 500);
-  }
-
-  function updateSelection(feature: Feature, selection?: Selection) {
-    isSelected =
-      ((selection?.lv1 && feature.code === selection?.lv1?.code) ||
-        (selection?.lv2 && feature.code === selection?.lv2?.code)) ??
-      false;
-  }
-
-  function updatA11yLabel(label: A11yLabels, feature: Feature) {
-    if (feature.embedded) {
-      ariaSuffix = label?.['external-link-suffix']
-        ? ` (${label['external-link-suffix']})`
-        : ' (link to a new window)';
-    } else {
-      ariaSuffix = '';
-    }
-  }
-</script>
-
-{#if !feature.disabled}
-  <a
-    aria-label="{feature.label}{ariaSuffix}"
-    href={feature.href ?? 'javascript:void(null)'}
-    target={feature.embedded}
-    class="mc-sidebar-feature {isSelected ? 'is-selected' : ''} {$isSidebarOpen
-      ? 'is-open'
-      : 'is-close'}"
-    id={feature.code}
-  >
-    <div class="mc-sidebar-feature__container">
-      <span class="mc-sidebar-feature__label" bind:this={label}
-        >{feature.label}</span
-      >
-      {#if showTooltip}
-        <div aria-hidden="true" class="mc-sidebar-feature__label__tooltip">
-          <div class="mc-sidebar-feature__label__tooltip__pointer"><div /></div>
-          <span>{feature.label}</span>
-        </div>
-      {/if}
-      {#if feature.embedded === '_blank'}
-        <svg
-          class="mc-sidebar-feature__icon"
-          width="16px"
-          height="16px"
-          viewBox="0 0 16 16"
-          ><path
-            fill-rule="evenodd"
-            d="M9 2a1 1 0 000 2h1.586L6.293 8.293a1 1 0 001.414 1.414L12 5.414V7a1 1 0 102 0V3a1 1 0 00-1-1H9zM3 4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1v-2a1 1 0 10-2 0v1H4V6h1a1 1 0 000-2H3z"
-          /></svg
-        >
-      {/if}
-    </div>
-  </a>
-{:else}
-  <span
-    aria-label={feature.label}
-    aria-disabled="true"
-    class="mc-sidebar-feature {isSelected ? 'is-selected' : ''} {$isSidebarOpen
-      ? 'is-open'
-      : 'is-close'} is-disabled"
-    id={feature.code}
-  >
-    <div class="mc-sidebar-feature__container">
-      <svg
-        class="mc-sidebar-feature__icon-disabled"
-        width="16px"
-        height="16px"
-        viewBox="0 0 16 16"
-        ><g clip-path="url(#a)"
-          ><path
-            fill-rule="evenodd"
-            d="M8 2a3 3 0 00-3 3v1H4a1 1 0 00-1 1v6a1 1 0 001 1h8a1 1 0 001-1V7a1 1 0 00-1-1h-1V5a3 3 0 00-3-3zm1 4V5a1 1 0 10-2 0v1h2zm-4 6V8h6v4H5z"
-          /></g
-        ><defs><clipPath id="a"><path d="M0 0h16v16H0z" /></clipPath></defs
-        ></svg
-      >
-      <span>{feature.label}</span>
-    </div>
-  </span>
-{/if}
-
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import './_c.sidebar';
-
-  .mc-sidebar-feature {
-    font-size: 16px;
-    min-width: 200px;
-    cursor: pointer;
-    flex: 1;
-    display: flex;
-    text-decoration: none;
-    color: $color-sidebar-text-color;
-    line-height: 22px;
-    overflow: hidden;
-
-    &__container {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      padding-top: 8px;
-      padding-bottom: 8px;
-
-      span {
-        max-width: 200px;
-        min-width: 200px;
-      }
-    }
-
-    &__icon {
-      fill: $color-sidebar-icon;
-    }
-
-    &__icon-disabled {
-      fill: $color-sidebar-feature-disabled-background;
-    }
-
-    &__label {
-      flex: 1;
-      margin-right: 8px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      line-clamp: 2;
-      -webkit-box-orient: vertical;
-
-      &__tooltip {
-        opacity: 0;
-        transition: 0s opacity;
-        background-color: $color-sidebar-divider-background;
-        border: 1px solid $color-sidebar-text-color;
-        border-radius: 4px;
-        position: absolute;
-        pointer-events: none;
-        left: calc(100% - 16px);
-        padding: 8px 16px;
-        width: 188px;
-
-        &__pointer {
-          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 $color-sidebar-text-color;
-
-          & div {
-            position: relative;
-            top: -6px;
-            left: 2px;
-            width: 0;
-            height: 0;
-            border-top: 6px solid transparent;
-            border-bottom: 6px solid transparent;
-            border-right: 8px solid $color-sidebar-divider-background;
-          }
-        }
-      }
-
-      &:hover + .mc-sidebar-feature__label__tooltip {
-        opacity: 1;
-        transition-delay: 1s;
-      }
-    }
-
-    &__icon {
-      margin-right: 8px;
-    }
-
-    &.is-selected {
-      background: $color-sidebar-feature-selected-background;
-    }
-
-    &.is-close {
-      @include transition(padding 300ms ease-in-out);
-      padding: 0px 0px;
-
-      .mc-sidebar-feature__container {
-        @include transition(padding-left 300ms ease-in-out);
-        padding-left: 20px;
-        width: 24px;
-      }
-    }
-
-    &.is-open {
-      @include transition(padding 300ms ease-in-out);
-      padding: 0px 32px;
-
-      .mc-sidebar-feature__container {
-        @include transition(padding-left 300ms ease-in-out);
-        padding-left: 32px;
-      }
-    }
-
-    &.is-disabled {
-      color: $color-sidebar-feature-disabled-background;
-      fill: $color-sidebar-feature-disabled-background;
-    }
-
-    &:hover {
-      background: $color-sidebar-feature-hover-background;
-    }
-
-    &:focus-visible {
-      box-shadow: none;
-      border: none;
-      outline: none;
-
-      .mc-sidebar-feature__container {
-        box-shadow: none;
-        border: none;
-        border-radius: 6px;
-        outline: 1px solid #0b96cc;
-      }
-    }
-  }
-</style>