@mozaic-ds/web-components 0.2.0 → 0.4.0

package/public/adeo/components/sidebar/sidebar-sub-features.nested.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-sub-features.nested.js","sources":["../../../../src/components/sidebar/sidebar-sub-features.nested.svelte"],"sourcesContent":["<svelte:options />\n\n<script lang=\"ts\">\n  import { selectFeature } from './sidebar-service';\n  import type { A11yLabels, Feature } from './sidebar.types';\n  import FeatureComponent from './sidebar-feature.nested.svelte';\n  import { EventHandler } from '../../utilities/EventHandler';\n\n  export let data: Feature;\n  export let a11yLabels: A11yLabels;\n\n  let eventHandler = new EventHandler();\n\n  function handleBackClick(): void {\n    eventHandler.dispatch('back-click', data);\n  }\n\n  function handleFeatureClick(feature: Feature): void {\n    if (!feature.disabled) {\n      selectFeature(feature.code);\n    }\n  }\n</script>\n\n<div class=\"mc-sidebar-sub-feature\" aria-label={data?.label}>\n  <button class=\"mc-sidebar-sub-feature__trigger\" on:click={handleBackClick}>\n    <span class=\"mc-sidebar-sub-feature__container\">\n      <svg width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\"\n        ><path\n          d=\"M9 19a1 1 0 01-.71-.29l-6-6a1 1 0 010-1.42l6-6a1 1 0 111.42 1.42L4.41 12l5.3 5.29a1 1 0 010 1.42A1 1 0 019 19z\"\n        /><path d=\"M21 13H3.24a1 1 0 010-2H21a1 1 0 010 2z\" /></svg\n      >\n      <span class=\"mc-sidebar-sub-feature__trigger__label\">{data?.label}</span>\n    </span>\n  </button>\n  {#if data?.items?.length}\n    <ul>\n      {#each data?.items as feature}\n        <li\n          class=\"mc-sidebar-sub-feature__item\"\n          on:click|stopPropagation={() => handleFeatureClick(feature)}\n        >\n          <FeatureComponent {feature} {a11yLabels} />\n        </li>\n      {/each}\n    </ul>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @import './sidebar-variables';\n\n  .mc-sidebar-sub-feature {\n    width: 320px;\n\n    &__trigger {\n      background: none;\n      border: none;\n      cursor: pointer;\n      display: flex;\n      padding: 0;\n      margin: 0;\n      font-size: inherit;\n      font-family: inherit;\n      width: 100%;\n      padding: 0px 32px;\n\n      &__label {\n        font-size: 16px;\n        font-weight: 700;\n        margin-left: 8px;\n        color: white;\n      }\n\n      &:focus-visible {\n        box-shadow: none;\n        border: none;\n        outline: none;\n\n        .mc-sidebar-sub-feature__container {\n          box-shadow: none;\n          border: none;\n          border-radius: 6px;\n          outline: 1px solid #0b96cc;\n        }\n      }\n    }\n\n    &__container {\n      display: flex;\n      align-items: center;\n      width: 100%;\n      height: 24px;\n      padding: 8px 0px;\n    }\n\n    ul {\n      list-style: none;\n      margin: 0;\n      padding: 0;\n    }\n  }\n</style>\n"],"names":["each_value","ctx","items","length","i","insert","target","ul","anchor","each_blocks","li","t1_value","label","create_if_block","attr","div","div_aria_label_value","append","button","span1","svg","path0","path1","span0","current","dirty","set_data","t1","data","$$props","a11yLabels","eventHandler","EventHandler","handleFeatureClick","feature","disabled","selectFeature","code","dispatch"],"mappings":"0gDAqCaA,EAAAC,MAAMC,2BAAXC,OAAIC,GAAA,2JADRC,EASIC,EAAAC,EAAAC,oFARKR,EAAAC,MAAMC,cAAXC,OAAIC,GAAA,EAAA,yGAAJD,OAAIC,EAAAK,EAAAN,OAAAC,GAAA,yCAAJD,OAAIC,GAAA,wTACJC,EAKIC,EAAAI,EAAAF,sRAXgDG,EAAAV,MAAMW,MAAK,KAGhEX,EAAI,IAAEC,OAAOC,QAAMU,EAAAZ,mmBAXsBa,EAAAC,EAAA,aAAAC,EAAAf,MAAMW,eAAtDP,EAuBKC,EAAAS,EAAAP,GAtBHS,EASQF,EAAAG,GARND,EAOMC,EAAAC,GANJF,EAIAE,EAAAC,GAHGH,EAECG,EAAAC,GAAAJ,EAAoDG,EAAAE,UAExDL,EAAwEE,EAAAI,uDAPlBtB,EAAe,sBAOfuB,GAAA,EAAAC,IAAAd,KAAAA,EAAAV,MAAMW,MAAK,KAAAc,EAAAC,EAAAhB,GAGhEV,EAAI,IAAEC,OAAOC,yGAX4BqB,GAAA,EAAAC,GAAAT,KAAAA,EAAAf,MAAMW,+HAhBzCgB,GAAaC,cACbC,GAAsBD,EAE7BE,MAAmBC,EAMd,SAAAC,EAAmBC,GACrBA,EAAQC,UACXC,EAAcF,EAAQG,0GALxBN,EAAaO,SAAS,aAAcV,MA0BEM,GAAAD,EAAmBC"}
+{"version":3,"file":"sidebar-sub-features.nested.js","sources":["../../../../src/components/sidebar/sidebar-sub-features.nested.svelte"],"sourcesContent":["<svelte:options />\n\n<script lang=\"ts\">\n  import { selectFeature } from './sidebar-service';\n  import type { A11yLabels, Feature } from './sidebar.types';\n  import FeatureComponent from './sidebar-feature.nested.svelte';\n  import { EventHandler } from '../../utilities/EventHandler';\n\n  export let data: Feature;\n  export let a11yLabels: A11yLabels;\n\n  let eventHandler = new EventHandler();\n\n  function handleBackClick(): void {\n    eventHandler.dispatch('back-click', data);\n  }\n\n  function handleFeatureClick(feature: Feature): void {\n    if (!feature.disabled) {\n      selectFeature(feature.code);\n    }\n  }\n</script>\n\n<div class=\"mc-sidebar-sub-feature\" aria-label={data?.label}>\n  <button class=\"mc-sidebar-sub-feature__trigger\" on:click={handleBackClick}>\n    <span class=\"mc-sidebar-sub-feature__container\">\n      <svg\n        class=\"mc-sidebar-sub-feature__icon\"\n        width=\"24px\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        ><path\n          d=\"M9 19a1 1 0 01-.71-.29l-6-6a1 1 0 010-1.42l6-6a1 1 0 111.42 1.42L4.41 12l5.3 5.29a1 1 0 010 1.42A1 1 0 019 19z\"\n        /><path d=\"M21 13H3.24a1 1 0 010-2H21a1 1 0 010 2z\" /></svg\n      >\n      <span class=\"mc-sidebar-sub-feature__trigger__label\">{data?.label}</span>\n    </span>\n  </button>\n  {#if data?.items?.length}\n    <ul>\n      {#each data?.items as feature}\n        <li\n          class=\"mc-sidebar-sub-feature__item\"\n          on:click|stopPropagation={() => handleFeatureClick(feature)}\n        >\n          <FeatureComponent {feature} {a11yLabels} />\n        </li>\n      {/each}\n    </ul>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import './sidebar-variables';\n\n  .mc-sidebar-sub-feature {\n    width: 320px;\n\n    &__trigger {\n      background: none;\n      border: none;\n      cursor: pointer;\n      display: flex;\n      padding: 0;\n      margin: 0;\n      font-size: inherit;\n      font-family: inherit;\n      width: 100%;\n      padding: 0px 32px;\n\n      &__label {\n        font-size: 16px;\n        font-weight: 700;\n        margin-left: 8px;\n        color: $color-sidebar-text-color;\n      }\n\n      &:focus-visible {\n        box-shadow: none;\n        border: none;\n        outline: none;\n\n        .mc-sidebar-sub-feature__container {\n          box-shadow: none;\n          border: none;\n          border-radius: 6px;\n          outline: 1px solid #0b96cc;\n        }\n      }\n    }\n\n    &__icon {\n      fill: $color-sidebar-icon;\n    }\n\n    &__container {\n      display: flex;\n      align-items: center;\n      width: 100%;\n      height: 24px;\n      padding: 8px 0px;\n    }\n\n    ul {\n      list-style: none;\n      margin: 0;\n      padding: 0;\n    }\n  }\n</style>\n"],"names":["each_value","ctx","items","length","i","insert","target","ul","anchor","each_blocks","li","t1_value","label","create_if_block","attr","div","div_aria_label_value","append","button","span1","svg","path0","path1","span0","current","dirty","set_data","t1","data","$$props","a11yLabels","eventHandler","EventHandler","handleFeatureClick","feature","disabled","selectFeature","code","dispatch"],"mappings":"mlDAyCaA,EAAAC,MAAMC,2BAAXC,OAAIC,GAAA,2JADRC,EASIC,EAAAC,EAAAC,oFARKR,EAAAC,MAAMC,cAAXC,OAAIC,GAAA,EAAA,yGAAJD,OAAIC,EAAAK,EAAAN,OAAAC,GAAA,yCAAJD,OAAIC,GAAA,wTACJC,EAKIC,EAAAI,EAAAF,sRAXgDG,EAAAV,MAAMW,MAAK,KAGhEX,EAAI,IAAEC,OAAOC,QAAMU,EAAAZ,6pBAfsBa,EAAAC,EAAA,aAAAC,EAAAf,MAAMW,eAAtDP,EA2BKC,EAAAS,EAAAP,GA1BHS,EAaQF,EAAAG,GAZND,EAWMC,EAAAC,GAVJF,EAQAE,EAAAC,GAHGH,EAECG,EAAAC,GAAAJ,EAAoDG,EAAAE,UAExDL,EAAwEE,EAAAI,uDAXlBtB,EAAe,sBAWfuB,GAAA,EAAAC,IAAAd,KAAAA,EAAAV,MAAMW,MAAK,KAAAc,EAAAC,EAAAhB,GAGhEV,EAAI,IAAEC,OAAOC,yGAf4BqB,GAAA,EAAAC,GAAAT,KAAAA,EAAAf,MAAMW,+HAhBzCgB,GAAaC,cACbC,GAAsBD,EAE7BE,MAAmBC,EAMd,SAAAC,EAAmBC,GACrBA,EAAQC,UACXC,EAAcF,EAAQG,0GALxBN,EAAaO,SAAS,aAAcV,MA8BEM,GAAAD,EAAmBC"}

package/public/adeo/components/sidebar/sidebar-user.nested.js

@@ -1,2 +1,2 @@
-import{P as e,i as t,s,Q as a,K as i,b as n,C as r,D as l,E as o,o as d,ac as c,e as p,d as u,g as h,j as b,l as m,M as f,t as _,k as x,J as g,x as v,A as w,I as y,G as k,v as $,T as L,n as j,y as z,$ as B}from"../../index-17a01ab4.js";import{t as C,a as M,i as A}from"../../sidebar-service-f8a96839.js";import N from"./sidebar-feature.nested.js";function H(e){a(e,"svelte-hpa5b0",".mc-sidebar-user.svelte-hpa5b0.svelte-hpa5b0{left:0;right:0;bottom:0;position:absolute;background:#264653}.mc-sidebar-user__header.svelte-hpa5b0.svelte-hpa5b0{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:none;border:none;color:white;font-size:inherit;font-family:inherit;text-align:initial;margin:0;width:100%;overflow:hidden}.mc-sidebar-user__header.svelte-hpa5b0.svelte-hpa5b0:focus-visible{-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:12px;outline:1px solid #0b96cc;outline-offset:-5px}.mc-sidebar-user__header.svelte-hpa5b0.svelte-hpa5b0:hover{cursor:pointer}.mc-sidebar-user__header.svelte-hpa5b0:hover .mc-sidebar-user__header__information__icon.svelte-hpa5b0{background:#082435}.mc-sidebar-user__header__picture.svelte-hpa5b0.svelte-hpa5b0{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background:#5B737D;border-radius:24px;width:48px;min-width:48px;height:48px;overflow:hidden}.mc-sidebar-user__header__picture.svelte-hpa5b0 img.svelte-hpa5b0{display:block}.mc-sidebar-user__header__information.svelte-hpa5b0.svelte-hpa5b0{-ms-flex-pack:distribute;justify-content:space-around;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;margin:0;margin-left:8px;height:40px}.mc-sidebar-user__header__information__icon.svelte-hpa5b0.svelte-hpa5b0{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:32px;height:32px;border-radius:4px}.mc-sidebar-user__header__information__identity.svelte-hpa5b0.svelte-hpa5b0{font-size:16px;font-weight:bold}.mc-sidebar-user__header__information__title.svelte-hpa5b0.svelte-hpa5b0,.mc-sidebar-user__header__information__identity.svelte-hpa5b0.svelte-hpa5b0{white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;max-width:176px}.mc-sidebar-user__content.svelte-hpa5b0.svelte-hpa5b0{list-style-type:none;padding:0;overflow:hidden;margin:-8px 0px 24px 0px;-o-transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.mc-sidebar-user__content.is-close.svelte-hpa5b0.svelte-hpa5b0{height:0;margin:0}.mc-sidebar-user.is-close.svelte-hpa5b0 .mc-sidebar-user__header.svelte-hpa5b0{-o-transition:padding 300ms ease-in-out;-webkit-transition:padding 300ms ease-in-out;transition:padding 300ms ease-in-out;padding:12px 8px;margin:8px 0}.mc-sidebar-user.is-open.svelte-hpa5b0 .mc-sidebar-user__header.svelte-hpa5b0{-o-transition:padding 300ms ease-in-out;-webkit-transition:padding 300ms ease-in-out;transition:padding 300ms ease-in-out;padding:12px 24px 12px 32px;margin:8px 0}")}function E(e,t,s){const a=e.slice();return a[11]=t[s],a}function V(e){let t,s,a,i,c,_,x,g,v,w,y;function k(e,t){return e[0].imageBase64?D:q}let $=k(e),L=$(e),j=e[4]&&F(e),z=e[1]?.length&&G(e);return{c(){t=p("div"),s=p("button"),a=p("span"),L.c(),i=u(),j&&j.c(),x=u(),z&&z.c(),h(a,"class","mc-sidebar-user__header__picture svelte-hpa5b0"),h(s,"aria-expanded",c=e[4]&&e[3]),h(s,"class","mc-sidebar-user__header svelte-hpa5b0"),h(s,"aria-label",_=e[4]&&e[3]?e[2]?.["close-user"]||"Close the user sub menu":e[2]?.["open-user"]||"Open the user sub menu"),h(s,"aria-controls","user-content"),h(t,"class",g="mc-sidebar-user "+(e[4]?"is-open":"is-close")+" svelte-hpa5b0")},m(r,l){n(r,t,l),b(t,s),b(s,a),L.m(a,null),b(s,i),j&&j.m(s,null),b(t,x),z&&z.m(t,null),v=!0,w||(y=m(t,"click",e[6]),w=!0)},p(e,i){$===($=k(e))&&L?L.p(e,i):(L.d(1),L=$(e),L&&(L.c(),L.m(a,null))),e[4]?j?j.p(e,i):(j=F(e),j.c(),j.m(s,null)):j&&(j.d(1),j=null),(!v||24&i&&c!==(c=e[4]&&e[3]))&&h(s,"aria-expanded",c),(!v||28&i&&_!==(_=e[4]&&e[3]?e[2]?.["close-user"]||"Close the user sub menu":e[2]?.["open-user"]||"Open the user sub menu"))&&h(s,"aria-label",_),e[1]?.length?z?(z.p(e,i),2&i&&r(z,1)):(z=G(e),z.c(),r(z,1),z.m(t,null)):z&&(f(),l(z,1,1,(()=>{z=null})),o()),(!v||16&i&&g!==(g="mc-sidebar-user "+(e[4]?"is-open":"is-close")+" svelte-hpa5b0"))&&h(t,"class",g)},i(e){v||(r(z),v=!0)},o(e){l(z),v=!1},d(e){e&&d(t),L.d(),j&&j.d(),z&&z.d(),w=!1,y()}}}function q(e){let t,s;return{c(){t=L("svg"),s=L("path"),h(s,"d","M12 12.76a5.38 5.38 0 115.38-5.38A5.39 5.39 0 0112 12.76zM12 4a3.38 3.38 0 103.38 3.38A3.39 3.39 0 0012 4zM16.48 13.58a1 1 0 00-.81.11 7.3 7.3 0 01-7.34 0 1 1 0 00-.81-.11l-2.81.87a1 1 0 00-.71 1V21a1 1 0 001 1h14a1 1 0 001-1v-5.59a1 1 0 00-.71-1zM18 20H6v-3.86l1.75-.53a9.36 9.36 0 008.5 0l1.75.53z"),h(t,"width","24px"),h(t,"height","24px"),h(t,"fill","white"),h(t,"viewBox","0 0 24 24")},m(e,a){n(e,t,a),b(t,s)},p:j,d(e){e&&d(t)}}}function D(e){let t,s;return{c(){t=p("img"),h(t,"class","base64 svelte-hpa5b0"),z(t,"display","block"),z(t,"width","auto"),z(t,"height","48px"),z(t,"max-width","48px"),h(t,"aria-hidden",""),h(t,"alt","User Picture"),B(t.src,s="data:image/png;base64, "+e[0].imageBase64)||h(t,"src",s)},m(e,s){n(e,t,s)},p(e,a){1&a&&!B(t.src,s="data:image/png;base64, "+e[0].imageBase64)&&h(t,"src",s)},d(e){e&&d(t)}}}function F(e){let t,s,a,r,l,o,c,m,f=(e[0]?.firstName||"")+"",g=(e[0]?.lastName||"")+"",v=e[0]?.title&&O(e),w=e[1]?.length&&P(e);return{c(){t=p("p"),s=p("span"),a=_(f),r=u(),l=_(g),o=u(),v&&v.c(),c=u(),w&&w.c(),m=i(),h(s,"class","mc-sidebar-user__header__information__identity svelte-hpa5b0"),h(t,"class","mc-sidebar-user__header__information svelte-hpa5b0")},m(e,i){n(e,t,i),b(t,s),b(s,a),b(s,r),b(s,l),b(t,o),v&&v.m(t,null),n(e,c,i),w&&w.m(e,i),n(e,m,i)},p(e,s){1&s&&f!==(f=(e[0]?.firstName||"")+"")&&x(a,f),1&s&&g!==(g=(e[0]?.lastName||"")+"")&&x(l,g),e[0]?.title?v?v.p(e,s):(v=O(e),v.c(),v.m(t,null)):v&&(v.d(1),v=null),e[1]?.length?w?w.p(e,s):(w=P(e),w.c(),w.m(m.parentNode,m)):w&&(w.d(1),w=null)},d(e){e&&d(t),v&&v.d(),e&&d(c),w&&w.d(e),e&&d(m)}}}function O(e){let t,s,a=K(e[0].title)+"";return{c(){t=p("span"),s=_(a),h(t,"class","mc-sidebar-user__header__information__title svelte-hpa5b0")},m(e,a){n(e,t,a),b(t,s)},p(e,t){1&t&&a!==(a=K(e[0].title)+"")&&x(s,a)},d(e){e&&d(t)}}}function P(e){let t;function s(e,t){return e[4]&&!e[3]?U:S}let a=s(e),i=a(e);return{c(){t=p("span"),i.c(),h(t,"class","mc-sidebar-user__header__information__icon svelte-hpa5b0")},m(e,s){n(e,t,s),i.m(t,null)},p(e,n){a!==(a=s(e))&&(i.d(1),i=a(e),i&&(i.c(),i.m(t,null)))},d(e){e&&d(t),i.d()}}}function S(e){let t,s;return{c(){t=L("svg"),s=L("path"),h(s,"d","M12 9H4a1 1 0 010-2h8a1 1 0 010 2z"),h(t,"width","16px"),h(t,"height","16px"),h(t,"fill","white"),h(t,"viewBox","0 0 16 16")},m(e,a){n(e,t,a),b(t,s)},d(e){e&&d(t)}}}function U(e){let t,s;return{c(){t=L("svg"),s=L("path"),h(s,"d","M13 7H9V3a1 1 0 00-2 0v4H3a1 1 0 000 2h4v4a1 1 0 002 0V9h4a1 1 0 000-2z"),h(t,"width","16px"),h(t,"height","16px"),h(t,"fill","white"),h(t,"viewBox","0 0 16 16")},m(e,a){n(e,t,a),b(t,s)},d(e){e&&d(t)}}}function G(e){let t,s,a,i=e[1],c=[];for(let t=0;t<i.length;t+=1)c[t]=I(E(e,i,t));const u=e=>l(c[e],1,1,(()=>{c[e]=null}));return{c(){t=p("ul");for(let e=0;e<c.length;e+=1)c[e].c();h(t,"aria-hidden",s=!e[4]||!e[3]),h(t,"class","mc-sidebar-user__content is-close svelte-hpa5b0"),h(t,"id","user-content")},m(s,i){n(s,t,i);for(let e=0;e<c.length;e+=1)c[e]&&c[e].m(t,null);e[9](t),a=!0},p(e,n){if(134&n){let s;for(i=e[1],s=0;s<i.length;s+=1){const a=E(e,i,s);c[s]?(c[s].p(a,n),r(c[s],1)):(c[s]=I(a),c[s].c(),r(c[s],1),c[s].m(t,null))}for(f(),s=i.length;s<c.length;s+=1)u(s);o()}(!a||24&n&&s!==(s=!e[4]||!e[3]))&&h(t,"aria-hidden",s)},i(e){if(!a){for(let e=0;e<i.length;e+=1)r(c[e]);a=!0}},o(e){c=c.filter(Boolean);for(let e=0;e<c.length;e+=1)l(c[e]);a=!1},d(s){s&&d(t),g(c,s),e[9](null)}}}function I(e){let t,s,a,i,o,c;function h(){return e[8](e[11])}return s=new N({props:{feature:e[11],a11yLabels:e[2]}}),{c(){t=p("li"),v(s.$$.fragment),a=u()},m(e,r){n(e,t,r),w(s,t,null),b(t,a),i=!0,o||(c=m(t,"click",y(h)),o=!0)},p(t,a){e=t;const i={};2&a&&(i.feature=e[11]),4&a&&(i.a11yLabels=e[2]),s.$set(i)},i(e){i||(r(s.$$.fragment,e),i=!0)},o(e){l(s.$$.fragment,e),i=!1},d(e){e&&d(t),k(s),o=!1,c()}}}function J(e){let t,s,a=e[0]&&V(e);return{c(){a&&a.c(),t=i()},m(e,i){a&&a.m(e,i),n(e,t,i),s=!0},p(e,[s]){e[0]?a?(a.p(e,s),1&s&&r(a,1)):(a=V(e),a.c(),r(a,1),a.m(t.parentNode,t)):a&&(f(),l(a,1,1,(()=>{a=null})),o())},i(e){s||(r(a),s=!0)},o(e){l(a),s=!1},d(e){a&&a.d(e),e&&d(t)}}}function K(e){let t=e.toLowerCase().split(" ");for(let e=0;e<t.length;e++)t[e]=t[e].charAt(0).toUpperCase()+t[e].substring(1);return t.join(" ")}function Q(e,t,s){let a;c(e,A,(e=>s(4,a=e)));let i,{user:n}=t,{data:r}=t,{a11yLabels:l}=t,o=!1;function d(e){e.disabled||M(e.code)}return e.$$set=e=>{"user"in e&&s(0,n=e.user),"data"in e&&s(1,r=e.data),"a11yLabels"in e&&s(2,l=e.a11yLabels)},e.$$.update=()=>{24&e.$$.dirty&&function(e,t){if(i){s(5,i.style.height="",i),s(5,i.style.transition="none",i);const a=window.getComputedStyle(i).height;i.classList.add(t&&e?"is-open":"is-close"),i.classList.remove(t&&e?"is-close":"is-open");const n=window.getComputedStyle(i).height;s(5,i.style.height=a,i),requestAnimationFrame((()=>{s(5,i.style.transition="",i),requestAnimationFrame((()=>{s(5,i.style.height=n,i)}))}));const r=()=>{s(5,i.style.height="",i),i.removeEventListener("transitionend",r)};i.addEventListener("transitionend",r)}}(o,a)},[n,r,l,o,a,i,function(){a?s(3,o=!o):(C(!0),s(3,o=!0))},d,e=>d(e),function(e){$[e?"unshift":"push"]((()=>{i=e,s(5,i)}))}]}class T extends e{constructor(e){super(),t(this,e,Q,J,s,{user:0,data:1,a11yLabels:2},H)}}export{T as default};
+import{P as e,i as t,s,Q as n,K as i,b as l,C as a,D as r,E as o,o as u,ab as d,e as c,d as m,g as p,j as f,l as b,M as h,t as _,k as x,J as g,x as v,A as z,I as w,G as y,v as k,T as $,n as L,y as j,$ as B}from"../../index-c33b3772.js";import{t as C,a as M,i as A}from"../../sidebar-service-275bf9ef.js";import N from"./sidebar-feature.nested.js";function H(e){n(e,"svelte-1lutzn3",".mc-sidebar-user.svelte-1lutzn3.svelte-1lutzn3{left:0;right:0;bottom:0;position:absolute;background:#264653}.mc-sidebar-user__header.svelte-1lutzn3.svelte-1lutzn3{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:none;border:none;color:#ffffff;font-size:inherit;font-family:inherit;text-align:initial;margin:0;width:100%;overflow:hidden}.mc-sidebar-user__header.svelte-1lutzn3.svelte-1lutzn3:focus-visible{-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:12px;outline:1px solid #0b96cc;outline-offset:-5px}.mc-sidebar-user__header.svelte-1lutzn3.svelte-1lutzn3:hover{cursor:pointer}.mc-sidebar-user__header.svelte-1lutzn3:hover .mc-sidebar-user__header__information__icon.svelte-1lutzn3{background:#405d68}.mc-sidebar-user__header__picture.svelte-1lutzn3.svelte-1lutzn3{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background:#5B737D;border-radius:24px;width:48px;min-width:48px;height:48px;overflow:hidden}.mc-sidebar-user__header__picture.svelte-1lutzn3 img.svelte-1lutzn3{display:block}.mc-sidebar-user__header__information.svelte-1lutzn3.svelte-1lutzn3{-ms-flex-pack:distribute;justify-content:space-around;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;margin:0;margin-left:8px;height:40px}.mc-sidebar-user__header__information__icon.svelte-1lutzn3.svelte-1lutzn3{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:32px;height:32px;border-radius:4px}.mc-sidebar-user__header__information__identity.svelte-1lutzn3.svelte-1lutzn3{font-size:16px;font-weight:bold}.mc-sidebar-user__header__information__title.svelte-1lutzn3.svelte-1lutzn3,.mc-sidebar-user__header__information__identity.svelte-1lutzn3.svelte-1lutzn3{white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;max-width:176px}.mc-sidebar-user__icon.svelte-1lutzn3.svelte-1lutzn3{fill:#ffffff}.mc-sidebar-user__content.svelte-1lutzn3.svelte-1lutzn3{list-style-type:none;padding:0;overflow:hidden;margin:-8px 0px 24px 0px;-o-transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.mc-sidebar-user__content.is-close.svelte-1lutzn3.svelte-1lutzn3{height:0;margin:0}.mc-sidebar-user.is-close.svelte-1lutzn3 .mc-sidebar-user__header.svelte-1lutzn3{-o-transition:padding 300ms ease-in-out;-webkit-transition:padding 300ms ease-in-out;transition:padding 300ms ease-in-out;padding:12px 8px;margin:8px 0}.mc-sidebar-user.is-open.svelte-1lutzn3 .mc-sidebar-user__header.svelte-1lutzn3{-o-transition:padding 300ms ease-in-out;-webkit-transition:padding 300ms ease-in-out;transition:padding 300ms ease-in-out;padding:12px 24px 12px 32px;margin:8px 0}")}function E(e,t,s){const n=e.slice();return n[11]=t[s],n}function V(e){let t,s,n,i,d,_,x,g,v,z,w;function y(e,t){return e[0].imageBase64?D:q}let k=y(e),$=k(e),L=e[4]&&F(e),j=e[1]?.length&&G(e);return{c(){t=c("div"),s=c("button"),n=c("span"),$.c(),i=m(),L&&L.c(),x=m(),j&&j.c(),p(n,"class","mc-sidebar-user__header__picture svelte-1lutzn3"),p(s,"aria-expanded",d=e[4]&&e[3]),p(s,"class","mc-sidebar-user__header svelte-1lutzn3"),p(s,"aria-label",_=e[4]&&e[3]?e[2]?.["close-user"]||"Close the user sub menu":e[2]?.["open-user"]||"Open the user sub menu"),p(s,"aria-controls","user-content"),p(t,"class",g="mc-sidebar-user "+(e[4]?"is-open":"is-close")+" svelte-1lutzn3")},m(a,r){l(a,t,r),f(t,s),f(s,n),$.m(n,null),f(s,i),L&&L.m(s,null),f(t,x),j&&j.m(t,null),v=!0,z||(w=b(t,"click",e[6]),z=!0)},p(e,i){k===(k=y(e))&&$?$.p(e,i):($.d(1),$=k(e),$&&($.c(),$.m(n,null))),e[4]?L?L.p(e,i):(L=F(e),L.c(),L.m(s,null)):L&&(L.d(1),L=null),(!v||24&i&&d!==(d=e[4]&&e[3]))&&p(s,"aria-expanded",d),(!v||28&i&&_!==(_=e[4]&&e[3]?e[2]?.["close-user"]||"Close the user sub menu":e[2]?.["open-user"]||"Open the user sub menu"))&&p(s,"aria-label",_),e[1]?.length?j?(j.p(e,i),2&i&&a(j,1)):(j=G(e),j.c(),a(j,1),j.m(t,null)):j&&(h(),r(j,1,1,(()=>{j=null})),o()),(!v||16&i&&g!==(g="mc-sidebar-user "+(e[4]?"is-open":"is-close")+" svelte-1lutzn3"))&&p(t,"class",g)},i(e){v||(a(j),v=!0)},o(e){r(j),v=!1},d(e){e&&u(t),$.d(),L&&L.d(),j&&j.d(),z=!1,w()}}}function q(e){let t,s;return{c(){t=$("svg"),s=$("path"),p(s,"d","M12 12.76a5.38 5.38 0 115.38-5.38A5.39 5.39 0 0112 12.76zM12 4a3.38 3.38 0 103.38 3.38A3.39 3.39 0 0012 4zM16.48 13.58a1 1 0 00-.81.11 7.3 7.3 0 01-7.34 0 1 1 0 00-.81-.11l-2.81.87a1 1 0 00-.71 1V21a1 1 0 001 1h14a1 1 0 001-1v-5.59a1 1 0 00-.71-1zM18 20H6v-3.86l1.75-.53a9.36 9.36 0 008.5 0l1.75.53z"),p(t,"class","mc-sidebar-user__icon svelte-1lutzn3"),p(t,"width","24px"),p(t,"height","24px"),p(t,"viewBox","0 0 24 24")},m(e,n){l(e,t,n),f(t,s)},p:L,d(e){e&&u(t)}}}function D(e){let t,s;return{c(){t=c("img"),p(t,"class","base64 svelte-1lutzn3"),j(t,"display","block"),j(t,"width","auto"),j(t,"height","48px"),j(t,"max-width","48px"),p(t,"aria-hidden",""),p(t,"alt","User Picture"),B(t.src,s="data:image/png;base64, "+e[0].imageBase64)||p(t,"src",s)},m(e,s){l(e,t,s)},p(e,n){1&n&&!B(t.src,s="data:image/png;base64, "+e[0].imageBase64)&&p(t,"src",s)},d(e){e&&u(t)}}}function F(e){let t,s,n,a,r,o,d,b,h=(e[0]?.firstName||"")+"",g=(e[0]?.lastName||"")+"",v=e[0]?.title&&O(e),z=e[1]?.length&&P(e);return{c(){t=c("p"),s=c("span"),n=_(h),a=m(),r=_(g),o=m(),v&&v.c(),d=m(),z&&z.c(),b=i(),p(s,"class","mc-sidebar-user__header__information__identity svelte-1lutzn3"),p(t,"class","mc-sidebar-user__header__information svelte-1lutzn3")},m(e,i){l(e,t,i),f(t,s),f(s,n),f(s,a),f(s,r),f(t,o),v&&v.m(t,null),l(e,d,i),z&&z.m(e,i),l(e,b,i)},p(e,s){1&s&&h!==(h=(e[0]?.firstName||"")+"")&&x(n,h),1&s&&g!==(g=(e[0]?.lastName||"")+"")&&x(r,g),e[0]?.title?v?v.p(e,s):(v=O(e),v.c(),v.m(t,null)):v&&(v.d(1),v=null),e[1]?.length?z?z.p(e,s):(z=P(e),z.c(),z.m(b.parentNode,b)):z&&(z.d(1),z=null)},d(e){e&&u(t),v&&v.d(),e&&u(d),z&&z.d(e),e&&u(b)}}}function O(e){let t,s,n=K(e[0].title)+"";return{c(){t=c("span"),s=_(n),p(t,"class","mc-sidebar-user__header__information__title svelte-1lutzn3")},m(e,n){l(e,t,n),f(t,s)},p(e,t){1&t&&n!==(n=K(e[0].title)+"")&&x(s,n)},d(e){e&&u(t)}}}function P(e){let t;function s(e,t){return e[4]&&!e[3]?U:S}let n=s(e),i=n(e);return{c(){t=c("span"),i.c(),p(t,"class","mc-sidebar-user__header__information__icon svelte-1lutzn3")},m(e,s){l(e,t,s),i.m(t,null)},p(e,l){n!==(n=s(e))&&(i.d(1),i=n(e),i&&(i.c(),i.m(t,null)))},d(e){e&&u(t),i.d()}}}function S(e){let t,s;return{c(){t=$("svg"),s=$("path"),p(s,"d","M12 9H4a1 1 0 010-2h8a1 1 0 010 2z"),p(t,"width","16px"),p(t,"height","16px"),p(t,"class","mc-sidebar-user__icon svelte-1lutzn3"),p(t,"viewBox","0 0 16 16")},m(e,n){l(e,t,n),f(t,s)},d(e){e&&u(t)}}}function U(e){let t,s;return{c(){t=$("svg"),s=$("path"),p(s,"d","M13 7H9V3a1 1 0 00-2 0v4H3a1 1 0 000 2h4v4a1 1 0 002 0V9h4a1 1 0 000-2z"),p(t,"class","mc-sidebar-user__icon svelte-1lutzn3"),p(t,"width","16px"),p(t,"height","16px"),p(t,"viewBox","0 0 16 16")},m(e,n){l(e,t,n),f(t,s)},d(e){e&&u(t)}}}function G(e){let t,s,n,i=e[1],d=[];for(let t=0;t<i.length;t+=1)d[t]=I(E(e,i,t));const m=e=>r(d[e],1,1,(()=>{d[e]=null}));return{c(){t=c("ul");for(let e=0;e<d.length;e+=1)d[e].c();p(t,"aria-hidden",s=!e[4]||!e[3]),p(t,"class","mc-sidebar-user__content is-close svelte-1lutzn3"),p(t,"id","user-content")},m(s,i){l(s,t,i);for(let e=0;e<d.length;e+=1)d[e]&&d[e].m(t,null);e[9](t),n=!0},p(e,l){if(134&l){let s;for(i=e[1],s=0;s<i.length;s+=1){const n=E(e,i,s);d[s]?(d[s].p(n,l),a(d[s],1)):(d[s]=I(n),d[s].c(),a(d[s],1),d[s].m(t,null))}for(h(),s=i.length;s<d.length;s+=1)m(s);o()}(!n||24&l&&s!==(s=!e[4]||!e[3]))&&p(t,"aria-hidden",s)},i(e){if(!n){for(let e=0;e<i.length;e+=1)a(d[e]);n=!0}},o(e){d=d.filter(Boolean);for(let e=0;e<d.length;e+=1)r(d[e]);n=!1},d(s){s&&u(t),g(d,s),e[9](null)}}}function I(e){let t,s,n,i,o,d;function p(){return e[8](e[11])}return s=new N({props:{feature:e[11],a11yLabels:e[2]}}),{c(){t=c("li"),v(s.$$.fragment),n=m()},m(e,a){l(e,t,a),z(s,t,null),f(t,n),i=!0,o||(d=b(t,"click",w(p)),o=!0)},p(t,n){e=t;const i={};2&n&&(i.feature=e[11]),4&n&&(i.a11yLabels=e[2]),s.$set(i)},i(e){i||(a(s.$$.fragment,e),i=!0)},o(e){r(s.$$.fragment,e),i=!1},d(e){e&&u(t),y(s),o=!1,d()}}}function J(e){let t,s,n=e[0]&&V(e);return{c(){n&&n.c(),t=i()},m(e,i){n&&n.m(e,i),l(e,t,i),s=!0},p(e,[s]){e[0]?n?(n.p(e,s),1&s&&a(n,1)):(n=V(e),n.c(),a(n,1),n.m(t.parentNode,t)):n&&(h(),r(n,1,1,(()=>{n=null})),o())},i(e){s||(a(n),s=!0)},o(e){r(n),s=!1},d(e){n&&n.d(e),e&&u(t)}}}function K(e){let t=e.toLowerCase().split(" ");for(let e=0;e<t.length;e++)t[e]=t[e].charAt(0).toUpperCase()+t[e].substring(1);return t.join(" ")}function Q(e,t,s){let n;d(e,A,(e=>s(4,n=e)));let i,{user:l}=t,{data:a}=t,{a11yLabels:r}=t,o=!1;function u(e){e.disabled||M(e.code)}return e.$$set=e=>{"user"in e&&s(0,l=e.user),"data"in e&&s(1,a=e.data),"a11yLabels"in e&&s(2,r=e.a11yLabels)},e.$$.update=()=>{24&e.$$.dirty&&function(e,t){if(i){s(5,i.style.height="",i),s(5,i.style.transition="none",i);const n=window.getComputedStyle(i).height;i.classList.add(t&&e?"is-open":"is-close"),i.classList.remove(t&&e?"is-close":"is-open");const l=window.getComputedStyle(i).height;s(5,i.style.height=n,i),requestAnimationFrame((()=>{s(5,i.style.transition="",i),requestAnimationFrame((()=>{s(5,i.style.height=l,i)}))}));const a=()=>{s(5,i.style.height="",i),i.removeEventListener("transitionend",a)};i.addEventListener("transitionend",a)}}(o,n)},[l,a,r,o,n,i,function(){n?s(3,o=!o):(C(!0),s(3,o=!0))},u,e=>u(e),function(e){k[e?"unshift":"push"]((()=>{i=e,s(5,i)}))}]}class T extends e{constructor(e){super(),t(this,e,Q,J,s,{user:0,data:1,a11yLabels:2},H)}}export{T as default};
 //# sourceMappingURL=sidebar-user.nested.js.map

package/public/adeo/components/sidebar/sidebar-user.nested.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-user.nested.js","sources":["../../../../src/components/sidebar/sidebar-user.nested.svelte"],"sourcesContent":["<svelte:options />\n\n<script lang=\"ts\">\n  import {\n    isSidebarOpen,\n    selectFeature,\n    toggleSidebar,\n  } from './sidebar-service';\n  import type { User, Feature, A11yLabels } from './sidebar.types';\n  import FeatureComponent from './sidebar-feature.nested.svelte';\n\n  export let user: User;\n  export let data: Feature[];\n  export let a11yLabels: A11yLabels;\n\n  let content: HTMLElement;\n  let isExpanded = false;\n\n  $: updateContentCSS(isExpanded, $isSidebarOpen);\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 toggle(): void {\n    if (!$isSidebarOpen) {\n      toggleSidebar(true);\n      isExpanded = true;\n    } else {\n      isExpanded = !isExpanded;\n    }\n  }\n\n  function capitalizeTheFirstLetterOfEachWord(words: string): string {\n    let separateWord: string[] = words.toLowerCase().split(' ');\n    for (let i = 0; i < separateWord.length; i++) {\n      separateWord[i] =\n        separateWord[i].charAt(0).toUpperCase() + separateWord[i].substring(1);\n    }\n    return separateWord.join(' ');\n  }\n\n  function handleClick(feature: Feature) {\n    if (!feature.disabled) {\n      selectFeature(feature.code);\n    }\n  }\n</script>\n\n{#if user}\n  <div\n    class=\"mc-sidebar-user {$isSidebarOpen ? 'is-open' : 'is-close'}\"\n    on:click={toggle}\n  >\n    <button\n      aria-expanded={$isSidebarOpen && isExpanded}\n      class=\"mc-sidebar-user__header\"\n      aria-label={$isSidebarOpen && isExpanded\n        ? a11yLabels?.['close-user'] || 'Close the user sub menu'\n        : a11yLabels?.['open-user'] || 'Open the user sub menu'}\n      aria-controls=\"user-content\"\n    >\n      <span class=\"mc-sidebar-user__header__picture\">\n        {#if user.imageBase64}\n          <img\n            class=\"base64\"\n            style=\"display:block; width:auto; height:48px; max-width:48px;\"\n            aria-hidden\n            alt=\"User Picture\"\n            src=\"data:image/png;base64, {user.imageBase64}\"\n          />\n        {:else}\n          <svg width=\"24px\" height=\"24px\" fill=\"white\" viewBox=\"0 0 24 24\"\n            ><path\n              d=\"M12 12.76a5.38 5.38 0 115.38-5.38A5.39 5.39 0 0112 12.76zM12 4a3.38 3.38 0 103.38 3.38A3.39 3.39 0 0012 4zM16.48 13.58a1 1 0 00-.81.11 7.3 7.3 0 01-7.34 0 1 1 0 00-.81-.11l-2.81.87a1 1 0 00-.71 1V21a1 1 0 001 1h14a1 1 0 001-1v-5.59a1 1 0 00-.71-1zM18 20H6v-3.86l1.75-.53a9.36 9.36 0 008.5 0l1.75.53z\"\n            /></svg\n          >\n        {/if}\n      </span>\n      {#if $isSidebarOpen}\n        <p class=\"mc-sidebar-user__header__information\">\n          <span class=\"mc-sidebar-user__header__information__identity\">\n            {user?.firstName || ''}\n            {user?.lastName || ''}\n          </span>\n          {#if user?.title}\n            <span class=\"mc-sidebar-user__header__information__title\">\n              {capitalizeTheFirstLetterOfEachWord(user.title)}\n            </span>\n          {/if}\n        </p>\n        {#if data?.length}\n          <span class=\"mc-sidebar-user__header__information__icon\">\n            {#if $isSidebarOpen && !isExpanded}\n              <svg width=\"16px\" height=\"16px\" fill=\"white\" 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 width=\"16px\" height=\"16px\" fill=\"white\" viewBox=\"0 0 16 16\"\n                ><path d=\"M12 9H4a1 1 0 010-2h8a1 1 0 010 2z\" /></svg\n              >\n            {/if}\n          </span>\n        {/if}\n      {/if}\n    </button>\n    {#if data?.length}\n      <ul\n        aria-hidden={!$isSidebarOpen || !isExpanded}\n        class=\"mc-sidebar-user__content is-close\"\n        id=\"user-content\"\n        bind:this={content}\n      >\n        {#each data as feature}\n          <li on:click|stopPropagation={() => handleClick(feature)}>\n            <FeatureComponent {feature} {a11yLabels} />\n          </li>\n        {/each}\n      </ul>\n    {/if}\n  </div>\n{/if}\n\n<style lang=\"scss\">\n  @import './sidebar-variables';\n\n  .mc-sidebar-user {\n    left: 0;\n    right: 0;\n    bottom: 0;\n    position: absolute;\n    background: #264653;\n\n    &__header {\n      display: flex;\n      align-items: center;\n      background: none;\n      border: none;\n      color: white;\n      font-size: inherit;\n      font-family: inherit;\n      text-align: initial;\n      margin: 0;\n      width: 100%;\n      overflow: hidden;\n\n      &:focus-visible {\n        box-shadow: none;\n        border: none;\n        border-radius: 12px;\n        outline: 1px solid #0b96cc;\n        outline-offset: -5px;\n      }\n\n      &:hover {\n        cursor: pointer;\n\n        .mc-sidebar-user__header__information__icon {\n          background: #082435;\n        }\n      }\n\n      &__picture {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: $color-grey;\n        border-radius: 24px;\n        width: 48px;\n        min-width: 48px;\n        height: 48px;\n        overflow: hidden;\n        img {\n          display: block;\n        }\n      }\n\n      &__information {\n        justify-content: space-around;\n        display: flex;\n        flex-direction: column;\n        flex: 1;\n        margin: 0;\n        margin-left: 8px;\n        height: 40px;\n        &__icon {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          width: 32px;\n          height: 32px;\n          border-radius: 4px;\n        }\n\n        &__identity {\n          font-size: 16px;\n          font-weight: bold;\n        }\n\n        &__title,\n        &__identity {\n          white-space: nowrap;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          max-width: 176px;\n        }\n      }\n    }\n\n    &__content {\n      list-style-type: none;\n      padding: 0;\n      overflow: hidden;\n      margin: -8px 0px 24px 0px;\n      @include transition(all 300ms ease-in-out);\n\n      &.is-close {\n        height: 0;\n        margin: 0;\n      }\n\n      .is-open {\n        height: auto;\n      }\n    }\n\n    &.is-close {\n      .mc-sidebar-user__header {\n        @include transition(padding 300ms ease-in-out);\n        padding: 12px 8px;\n        margin: 8px 0;\n      }\n    }\n\n    &.is-open {\n      .mc-sidebar-user__header {\n        @include transition(padding 300ms ease-in-out);\n        padding: 12px 24px 12px 32px;\n        margin: 8px 0;\n      }\n    }\n  }\n</style>\n"],"names":["ctx","imageBase64","create_if_block_6","create_if_block_2","if_block2","length","create_if_block_1","attr","button","button_aria_expanded_value","button_aria_label_value","insert","target","div","anchor","append","span","current","dirty","svg","path","src_url_equal","img","src","img_src_value","firstName","lastName","if_block0","title","create_if_block_5","if_block1","create_if_block_3","p","set_data","t0","t0_value","t2","t2_value","capitalizeTheFirstLetterOfEachWord","t","t_value","create_if_block_4","i","ul","ul_aria_hidden_value","each_blocks","li","create_if_block","words","separateWord","toLowerCase","split","charAt","toUpperCase","substring","join","content","user","$$props","data","a11yLabels","isExpanded","handleClick","feature","disabled","selectFeature","code","isOpen","$$invalidate","style","height","transition","startHeight","window","getComputedStyle","classList","add","remove","requestAnimationFrame","handler","removeEventListener","addEventListener","updateContentCSS","$isSidebarOpen","toggleSidebar","$$value"],"mappings":"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"}
+{"version":3,"file":"sidebar-user.nested.js","sources":["../../../../src/components/sidebar/sidebar-user.nested.svelte"],"sourcesContent":["<svelte:options />\n\n<script lang=\"ts\">\n  import {\n    isSidebarOpen,\n    selectFeature,\n    toggleSidebar,\n  } from './sidebar-service';\n  import type { User, Feature, A11yLabels } from './sidebar.types';\n  import FeatureComponent from './sidebar-feature.nested.svelte';\n\n  export let user: User;\n  export let data: Feature[];\n  export let a11yLabels: A11yLabels;\n\n  let content: HTMLElement;\n  let isExpanded = false;\n\n  $: updateContentCSS(isExpanded, $isSidebarOpen);\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 toggle(): void {\n    if (!$isSidebarOpen) {\n      toggleSidebar(true);\n      isExpanded = true;\n    } else {\n      isExpanded = !isExpanded;\n    }\n  }\n\n  function capitalizeTheFirstLetterOfEachWord(words: string): string {\n    let separateWord: string[] = words.toLowerCase().split(' ');\n    for (let i = 0; i < separateWord.length; i++) {\n      separateWord[i] =\n        separateWord[i].charAt(0).toUpperCase() + separateWord[i].substring(1);\n    }\n    return separateWord.join(' ');\n  }\n\n  function handleClick(feature: Feature) {\n    if (!feature.disabled) {\n      selectFeature(feature.code);\n    }\n  }\n</script>\n\n{#if user}\n  <!-- svelte-ignore a11y-click-events-have-key-events -->\n  <div\n    class=\"mc-sidebar-user {$isSidebarOpen ? 'is-open' : 'is-close'}\"\n    on:click={toggle}\n  >\n    <button\n      aria-expanded={$isSidebarOpen && isExpanded}\n      class=\"mc-sidebar-user__header\"\n      aria-label={$isSidebarOpen && isExpanded\n        ? a11yLabels?.['close-user'] || 'Close the user sub menu'\n        : a11yLabels?.['open-user'] || 'Open the user sub menu'}\n      aria-controls=\"user-content\"\n    >\n      <span class=\"mc-sidebar-user__header__picture\">\n        {#if user.imageBase64}\n          <img\n            class=\"base64\"\n            style=\"display:block; width:auto; height:48px; max-width:48px;\"\n            aria-hidden\n            alt=\"User Picture\"\n            src=\"data:image/png;base64, {user.imageBase64}\"\n          />\n        {:else}\n          <svg\n            class=\"mc-sidebar-user__icon\"\n            width=\"24px\"\n            height=\"24px\"\n            viewBox=\"0 0 24 24\"\n            ><path\n              d=\"M12 12.76a5.38 5.38 0 115.38-5.38A5.39 5.39 0 0112 12.76zM12 4a3.38 3.38 0 103.38 3.38A3.39 3.39 0 0012 4zM16.48 13.58a1 1 0 00-.81.11 7.3 7.3 0 01-7.34 0 1 1 0 00-.81-.11l-2.81.87a1 1 0 00-.71 1V21a1 1 0 001 1h14a1 1 0 001-1v-5.59a1 1 0 00-.71-1zM18 20H6v-3.86l1.75-.53a9.36 9.36 0 008.5 0l1.75.53z\"\n            /></svg\n          >\n        {/if}\n      </span>\n      {#if $isSidebarOpen}\n        <p class=\"mc-sidebar-user__header__information\">\n          <span class=\"mc-sidebar-user__header__information__identity\">\n            {user?.firstName || ''}\n            {user?.lastName || ''}\n          </span>\n          {#if user?.title}\n            <span class=\"mc-sidebar-user__header__information__title\">\n              {capitalizeTheFirstLetterOfEachWord(user.title)}\n            </span>\n          {/if}\n        </p>\n        {#if data?.length}\n          <span class=\"mc-sidebar-user__header__information__icon\">\n            {#if $isSidebarOpen && !isExpanded}\n              <svg\n                class=\"mc-sidebar-user__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                width=\"16px\"\n                height=\"16px\"\n                class=\"mc-sidebar-user__icon\"\n                viewBox=\"0 0 16 16\"\n                ><path d=\"M12 9H4a1 1 0 010-2h8a1 1 0 010 2z\" /></svg\n              >\n            {/if}\n          </span>\n        {/if}\n      {/if}\n    </button>\n    {#if data?.length}\n      <ul\n        aria-hidden={!$isSidebarOpen || !isExpanded}\n        class=\"mc-sidebar-user__content is-close\"\n        id=\"user-content\"\n        bind:this={content}\n      >\n        {#each data as feature}\n          <!-- svelte-ignore a11y-click-events-have-key-events -->\n          <li on:click|stopPropagation={() => handleClick(feature)}>\n            <FeatureComponent {feature} {a11yLabels} />\n          </li>\n        {/each}\n      </ul>\n    {/if}\n  </div>\n{/if}\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import './sidebar-variables';\n\n  .mc-sidebar-user {\n    left: 0;\n    right: 0;\n    bottom: 0;\n    position: absolute;\n    background: $color-sidebar-user-background;\n\n    &__header {\n      display: flex;\n      align-items: center;\n      background: none;\n      border: none;\n      color: $color-sidebar-text-color;\n      font-size: inherit;\n      font-family: inherit;\n      text-align: initial;\n      margin: 0;\n      width: 100%;\n      overflow: hidden;\n\n      &:focus-visible {\n        box-shadow: none;\n        border: none;\n        border-radius: 12px;\n        outline: 1px solid #0b96cc;\n        outline-offset: -5px;\n      }\n\n      &:hover {\n        cursor: pointer;\n\n        .mc-sidebar-user__header__information__icon {\n          background: $color-sidebar-feature-hover-background;\n        }\n      }\n\n      &__picture {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: $color-grey;\n        border-radius: 24px;\n        width: 48px;\n        min-width: 48px;\n        height: 48px;\n        overflow: hidden;\n        img {\n          display: block;\n        }\n      }\n\n      &__information {\n        justify-content: space-around;\n        display: flex;\n        flex-direction: column;\n        flex: 1;\n        margin: 0;\n        margin-left: 8px;\n        height: 40px;\n        &__icon {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          width: 32px;\n          height: 32px;\n          border-radius: 4px;\n        }\n\n        &__identity {\n          font-size: 16px;\n          font-weight: bold;\n        }\n\n        &__title,\n        &__identity {\n          white-space: nowrap;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          max-width: 176px;\n        }\n      }\n    }\n\n    &__icon {\n      fill: $color-sidebar-icon;\n    }\n\n    &__content {\n      list-style-type: none;\n      padding: 0;\n      overflow: hidden;\n      margin: -8px 0px 24px 0px;\n      @include transition(all 300ms ease-in-out);\n\n      &.is-close {\n        height: 0;\n        margin: 0;\n      }\n\n      .is-open {\n        height: auto;\n      }\n    }\n\n    &.is-close {\n      .mc-sidebar-user__header {\n        @include transition(padding 300ms ease-in-out);\n        padding: 12px 8px;\n        margin: 8px 0;\n      }\n    }\n\n    &.is-open {\n      .mc-sidebar-user__header {\n        @include transition(padding 300ms ease-in-out);\n        padding: 12px 24px 12px 32px;\n        margin: 8px 0;\n      }\n    }\n  }\n</style>\n"],"names":["ctx","imageBase64","create_if_block_6","create_if_block_2","if_block2","length","create_if_block_1","attr","button","button_aria_expanded_value","button_aria_label_value","insert","target","div","anchor","append","span","current","dirty","svg","path","src_url_equal","img","src","img_src_value","firstName","lastName","if_block0","title","create_if_block_5","if_block1","create_if_block_3","p","set_data","t0","t0_value","t2","t2_value","capitalizeTheFirstLetterOfEachWord","t","t_value","create_if_block_4","i","ul","ul_aria_hidden_value","each_blocks","li","create_if_block","words","separateWord","toLowerCase","split","charAt","toUpperCase","substring","join","content","user","$$props","data","a11yLabels","isExpanded","handleClick","feature","disabled","selectFeature","code","isOpen","$$invalidate","style","height","transition","startHeight","window","getComputedStyle","classList","add","remove","requestAnimationFrame","handler","removeEventListener","addEventListener","updateContentCSS","$isSidebarOpen","toggleSidebar","$$value"],"mappings":"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"}

package/public/adeo/components/sidebar-feature/sidebar-feature.nested.svelte

@@ -63,7 +63,11 @@
         </div>
       {/if}
       {#if feature.embedded === '_blank'}
-        <svg width="16px" height="16px" fill="white" viewBox="0 0 16 16"
+        <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"
@@ -82,7 +86,11 @@
     id={feature.code}
   >
     <div class="mc-sidebar-feature__container">
-      <svg width="16px" height="16px" fill="#92a2a9" viewBox="0 0 16 16"
+      <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"
@@ -107,7 +115,7 @@
     flex: 1;
     display: flex;
     text-decoration: none;
-    color: white;
+    color: $color-sidebar-text-color;
     line-height: 22px;
     overflow: hidden;
 
@@ -124,6 +132,14 @@
       }
     }
 
+    &__icon {
+      fill: $color-sidebar-icon;
+    }
+
+    &__icon-disabled {
+      fill: $color-sidebar-feature-disabled-background;
+    }
+
     &__label {
       flex: 1;
       margin-right: 8px;
@@ -137,8 +153,8 @@
       &__tooltip {
         opacity: 0;
         transition: 0s opacity;
-        background-color: #5b737d;
-        border: 1px solid white;
+        background-color: $color-sidebar-divider-background;
+        border: 1px solid $color-sidebar-text-color;
         border-radius: 4px;
         position: absolute;
         pointer-events: none;
@@ -155,7 +171,7 @@
           height: 0;
           border-top: 6px solid transparent;
           border-bottom: 6px solid transparent;
-          border-right: 8px solid white;
+          border-right: 8px solid $color-sidebar-text-color;
 
           & div {
             position: relative;
@@ -165,7 +181,7 @@
             height: 0;
             border-top: 6px solid transparent;
             border-bottom: 6px solid transparent;
-            border-right: 8px solid #5b737d;
+            border-right: 8px solid $color-sidebar-divider-background;
           }
         }
       }
@@ -181,7 +197,7 @@
     }
 
     &.is-selected {
-      background: $selected-Link;
+      background: $color-sidebar-feature-selected-background;
     }
 
     &.is-close {
@@ -206,12 +222,12 @@
     }
 
     &.is-disabled {
-      color: #92a2a9;
-      fill: #92a2a9;
+      color: $color-sidebar-feature-disabled-background;
+      fill: $color-sidebar-feature-disabled-background;
     }
 
     &:hover {
-      background: #405d68;
+      background: $color-sidebar-feature-hover-background;
     }
 
     &:focus-visible {

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

@@ -24,7 +24,7 @@
 
   let label: HTMLElement;
 
-  const mediumIconStyle = 'width: 24px; height: 24px; fill: white;';
+  const mediumIconStyle = 'width: 24px; height: 24px;';
 
   function updateSelection(
     isExpanded: boolean,
@@ -112,13 +112,21 @@
         </div>
       {/if}
       {#if !expand}
-        <svg width="16px" height="16px" fill="white" viewBox="0 0 16 16"
+        <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 width="16px" height="16px" fill="white" viewBox="0 0 16 16"
+        <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}
@@ -139,12 +147,13 @@
 </ul>
 
 <style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
   @import './sidebar-variables';
 
   .mc-feature-group {
     background: none;
     border: none;
-    color: white;
+    color: $color-sidebar-text-color;
     cursor: pointer;
     font-size: inherit;
     font-family: inherit;
@@ -153,6 +162,10 @@
     padding: 0;
     overflow: hidden;
 
+    &__icon {
+      fill: $color-sidebar-icon;
+    }
+
     &__container {
       display: flex;
       align-items: center;
@@ -175,8 +188,8 @@
       &__tooltip {
         opacity: 0;
         transition: 0s opacity;
-        background-color: #5b737d;
-        border: 1px solid white;
+        background-color: $color-sidebar-divider-background;
+        border: 1px solid $color-sidebar-text-color;
         border-radius: 4px;
         position: absolute;
         pointer-events: none;
@@ -203,7 +216,7 @@
             height: 0;
             border-top: 6px solid transparent;
             border-bottom: 6px solid transparent;
-            border-right: 8px solid #5b737d;
+            border-right: 8px solid $color-sidebar-divider-background;
           }
         }
       }
@@ -227,7 +240,7 @@
     }
 
     &.is-selected {
-      background: $selected-Link;
+      background: $color-sidebar-feature-selected-background;
     }
 
     &.is-close {
@@ -244,7 +257,7 @@
     }
 
     &:hover {
-      background: #405d68;
+      background: $color-sidebar-feature-hover-background;
     }
 
     &:focus-visible {

package/public/adeo/components/sidebar-section/sidebar-section.nested.svelte

@@ -67,6 +67,7 @@
 {/if}
 
 <style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
   @import './sidebar-variables';
 
   .mc-sidebar-section {
@@ -79,7 +80,7 @@
     overflow-y: auto;
     overflow-y: overlay;
     padding: 1px 0px;
-    scrollbar-color: #009eac #082435;
+    scrollbar-color: $color-primary-02-400 $color-sidebar-divider-background;
     scrollbar-width: thin;
 
     ul,
@@ -124,10 +125,10 @@
     &::-webkit-scrollbar {
       width: 5px;
       height: 10px;
-      background: #082435;
+      background: $color-sidebar-divider-background;
 
       &-thumb {
-        background: #009eac;
+        background: $color-primary-02-400;
       }
     }
   }

package/public/adeo/components/sidebar-segment/sidebar-segment.nested.svelte

@@ -10,7 +10,8 @@
 
   export let data: Segment;
 
-  const mediumIconStyle = 'width: 24px; height: 24px; fill: white;';
+  const mediumIconStyle =
+    'width: 24px; height: 24px; fill: ${$color-sidebar-icon};';
 
   function generateIcon(iconname: string): string {
     return `${iconname} size="2rem"`;
@@ -45,13 +46,14 @@
 {/if}
 
 <style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
   @import './sidebar-variables';
 
   .mc-sidebar-segment {
     cursor: pointer;
     flex: 0;
     text-decoration: none;
-    color: white;
+    color: $color-sidebar-text-color;
     line-height: 22px;
     display: flex;
     overflow: hidden;
@@ -69,8 +71,8 @@
       padding: 8px 0px;
     }
 
-    &__icon {
-      fill: white;
+    svg {
+      fill: $color-sidebar-icon;
     }
 
     &__text {
@@ -78,7 +80,7 @@
     }
 
     &.is-selected {
-      background: $selected-Link;
+      background: $color-sidebar-feature-selected-background;
     }
 
     :last-child {
@@ -99,7 +101,7 @@
     }
 
     &:hover {
-      background: #405d68;
+      background: $color-sidebar-feature-hover-background;
     }
 
     &.is-close {

package/public/adeo/components/sidebar-separator/sidebar-separator.nested.svelte

@@ -10,10 +10,11 @@
 />
 
 <style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
   @import './sidebar-variables';
 
   .mc-sidebar-separator {
-    border-bottom: 1px solid $color-grey;
+    border-bottom: 1px solid $color-sidebar-divider-background;
     display: flex;
 
     &.is-close {

package/public/adeo/components/sidebar-sub-features/sidebar-sub-features.nested.svelte

@@ -25,7 +25,11 @@
 <div class="mc-sidebar-sub-feature" aria-label={data?.label}>
   <button class="mc-sidebar-sub-feature__trigger" on:click={handleBackClick}>
     <span class="mc-sidebar-sub-feature__container">
-      <svg width="24px" height="24px" viewBox="0 0 24 24"
+      <svg
+        class="mc-sidebar-sub-feature__icon"
+        width="24px"
+        height="24px"
+        viewBox="0 0 24 24"
         ><path
           d="M9 19a1 1 0 01-.71-.29l-6-6a1 1 0 010-1.42l6-6a1 1 0 111.42 1.42L4.41 12l5.3 5.29a1 1 0 010 1.42A1 1 0 019 19z"
         /><path d="M21 13H3.24a1 1 0 010-2H21a1 1 0 010 2z" /></svg
@@ -48,6 +52,7 @@
 </div>
 
 <style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
   @import './sidebar-variables';
 
   .mc-sidebar-sub-feature {
@@ -69,7 +74,7 @@
         font-size: 16px;
         font-weight: 700;
         margin-left: 8px;
-        color: white;
+        color: $color-sidebar-text-color;
       }
 
       &:focus-visible {
@@ -86,6 +91,10 @@
       }
     }
 
+    &__icon {
+      fill: $color-sidebar-icon;
+    }
+
     &__container {
       display: flex;
       align-items: center;

package/public/adeo/components/sidebar-user/sidebar-user.nested.svelte

@@ -75,6 +75,7 @@
 </script>
 
 {#if user}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div
     class="mc-sidebar-user {$isSidebarOpen ? 'is-open' : 'is-close'}"
     on:click={toggle}
@@ -97,7 +98,11 @@
             src="data:image/png;base64, {user.imageBase64}"
           />
         {:else}
-          <svg width="24px" height="24px" fill="white" viewBox="0 0 24 24"
+          <svg
+            class="mc-sidebar-user__icon"
+            width="24px"
+            height="24px"
+            viewBox="0 0 24 24"
             ><path
               d="M12 12.76a5.38 5.38 0 115.38-5.38A5.39 5.39 0 0112 12.76zM12 4a3.38 3.38 0 103.38 3.38A3.39 3.39 0 0012 4zM16.48 13.58a1 1 0 00-.81.11 7.3 7.3 0 01-7.34 0 1 1 0 00-.81-.11l-2.81.87a1 1 0 00-.71 1V21a1 1 0 001 1h14a1 1 0 001-1v-5.59a1 1 0 00-.71-1zM18 20H6v-3.86l1.75-.53a9.36 9.36 0 008.5 0l1.75.53z"
             /></svg
@@ -119,13 +124,21 @@
         {#if data?.length}
           <span class="mc-sidebar-user__header__information__icon">
             {#if $isSidebarOpen && !isExpanded}
-              <svg width="16px" height="16px" fill="white" viewBox="0 0 16 16"
+              <svg
+                class="mc-sidebar-user__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 width="16px" height="16px" fill="white" viewBox="0 0 16 16"
+              <svg
+                width="16px"
+                height="16px"
+                class="mc-sidebar-user__icon"
+                viewBox="0 0 16 16"
                 ><path d="M12 9H4a1 1 0 010-2h8a1 1 0 010 2z" /></svg
               >
             {/if}
@@ -141,6 +154,7 @@
         bind:this={content}
       >
         {#each data as feature}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
           <li on:click|stopPropagation={() => handleClick(feature)}>
             <FeatureComponent {feature} {a11yLabels} />
           </li>
@@ -151,6 +165,7 @@
 {/if}
 
 <style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
   @import './sidebar-variables';
 
   .mc-sidebar-user {
@@ -158,14 +173,14 @@
     right: 0;
     bottom: 0;
     position: absolute;
-    background: #264653;
+    background: $color-sidebar-user-background;
 
     &__header {
       display: flex;
       align-items: center;
       background: none;
       border: none;
-      color: white;
+      color: $color-sidebar-text-color;
       font-size: inherit;
       font-family: inherit;
       text-align: initial;
@@ -185,7 +200,7 @@
         cursor: pointer;
 
         .mc-sidebar-user__header__information__icon {
-          background: #082435;
+          background: $color-sidebar-feature-hover-background;
         }
       }
 
@@ -236,6 +251,10 @@
       }
     }
 
+    &__icon {
+      fill: $color-sidebar-icon;
+    }
+
     &__content {
       list-style-type: none;
       padding: 0;

package/public/adeo/components/stepper/Stepper.js

@@ -1,2 +1,2 @@
-import{S as e,i as t,a as r,b as i,f as s,s as p,c,e as o,n,g as a,h as m,j as l,m as d,o as _,J as b,p as f,q as h,d as u,t as x,l as g,k}from"../../index-17a01ab4.js";import{E as w}from"../../EventHandler-316af043.js";function v(e,t,r){const i=e.slice();return i[10]=t[r],i[12]=r,i}function y(e){let t,r,s=e[12]+1+"";return{c(){t=o("span"),r=x(s)},m(e,s){i(e,t,s),l(t,r)},d(e){e&&_(t)}}}function $(e){let t;return{c(){t=o("div"),t.innerHTML='<navigation-notification-available-16px name="NotificationAvailable16" size="100%"></navigation-notification-available-16px>',a(t,"class","mc-stepper__icon")},m(e,r){i(e,t,r)},d(e){e&&_(t)}}}function z(e){let t,r,s,p,c,n,m,d,b,f,h,w,v,z,C=e[4](e[12],e[2])+"",j=e[10].label+"";function E(e,t){return 4&t&&(s=null),null==s&&(s=!!e[3](e[12],e[2])),s?$:e[10].isCurrent?y:void 0}let L=E(e,-1),A=L&&L(e);function D(){return e[7](e[10])}return{c(){t=o("li"),r=o("div"),A&&A.c(),p=u(),c=o("div"),n=o("span"),m=x(C),d=u(),b=o("span"),f=x(j),h=u(),a(r,"class","mc-stepper__indicator"),a(r,"aria-hidden","true"),a(n,"class","mc-stepper__title"),a(b,"class","mc-stepper__label"),a(c,"class","mc-stepper__detail"),a(t,"class",w="mc-stepper__item "+(e[10].isCurrent?"mc-stepper__item--current":"")+" "+(e[3](e[12],e[2])?"mc-stepper__item--validated":""))},m(e,s){i(e,t,s),l(t,r),A&&A.m(r,null),l(t,p),l(t,c),l(c,n),l(n,m),l(c,d),l(c,b),l(b,f),l(t,h),v||(z=g(t,"click",D),v=!0)},p(i,s){L!==(L=E(e=i,s))&&(A&&A.d(1),A=L&&L(e),A&&(A.c(),A.m(r,null))),4&s&&C!==(C=e[4](e[12],e[2])+"")&&k(m,C),4&s&&j!==(j=e[10].label+"")&&k(f,j),4&s&&w!==(w="mc-stepper__item "+(e[10].isCurrent?"mc-stepper__item--current":"")+" "+(e[3](e[12],e[2])?"mc-stepper__item--validated":""))&&a(t,"class",w)},d(e){e&&_(t),A&&A.d(),v=!1,z()}}}function C(e){let t,r,s,p=e[2],f=[];for(let t=0;t<p.length;t+=1)f[t]=z(v(e,p,t));let h=[{class:s="mc-stepper "+(e[0]?"mc-stepper--compact":"")+" "+(e[2].length>3?"mc-stepper--shrinked":"")},{"aria-label":"accessibilityLabels.stepperDescription"},e[1]],u={};for(let e=0;e<h.length;e+=1)u=c(u,h[e]);return{c(){t=o("nav"),r=o("ol");for(let e=0;e<f.length;e+=1)f[e].c();this.c=n,a(r,"class","mc-stepper__list"),m(t,u)},m(e,s){i(e,t,s),l(t,r);for(let e=0;e<f.length;e+=1)f[e]&&f[e].m(r,null)},p(e,[i]){if(60&i){let t;for(p=e[2],t=0;t<p.length;t+=1){const s=v(e,p,t);f[t]?f[t].p(s,i):(f[t]=z(s),f[t].c(),f[t].m(r,null))}for(;t<f.length;t+=1)f[t].d(1);f.length=p.length}m(t,u=d(h,[5&i&&s!==(s="mc-stepper "+(e[0]?"mc-stepper--compact":"")+" "+(e[2].length>3?"mc-stepper--shrinked":""))&&{class:s},{"aria-label":"accessibilityLabels.stepperDescription"},2&i&&e[1]]))},i:n,o:n,d(e){e&&_(t),b(f,e)}}}function j(e,t,r){let i,s;const p=["steps","compact"];let o=f(t,p),{steps:n}=t,{compact:a=!1}=t,m=new w;function l(e){m.dispatch("step-changed",e)}return e.$$set=e=>{t=c(c({},t),h(e)),r(9,o=f(t,p)),"steps"in e&&r(6,n=e.steps),"compact"in e&&r(0,a=e.compact)},e.$$.update=()=>{64&e.$$.dirty&&r(2,i=n?JSON.parse(n):[]),r(1,s=Object.assign({},o)),2&e.$$.dirty&&delete s.class},[a,s,i,function(e,t){return e<t.findIndex((e=>e.isCurrent))},function(e,t){return`${e+1} / ${t.length}`},l,n,e=>l(e)]}class E extends e{constructor(e){super();const c=document.createElement("style");c.textContent='.mc-stepper{width:100%}.mc-stepper__list{display:-webkit-box;display:-ms-flexbox;display:flex;padding-left:0;margin-bottom:0;margin-top:0}.mc-stepper__item,.mc-stepper__link{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mc-stepper__item{-webkit-box-flex:1;-ms-flex:1;flex:1;position:relative}.mc-stepper__item::before,.mc-stepper__item::after{background-color:#999999;content:"";height:0.125rem;position:absolute;top:11px;width:calc(50% - 1.25rem);z-index:1}.mc-stepper__item::before{border-top-right-radius:1px;border-bottom-right-radius:1px;left:0}.mc-stepper__item::after{border-top-left-radius:1px;border-bottom-left-radius:1px;right:0}.mc-stepper__item:first-child::before,.mc-stepper__item:last-child::after{content:none}.mc-stepper__item--current .mc-stepper__indicator,.mc-stepper__item--validated .mc-stepper__indicator{border-color:#00919f}.mc-stepper__item--current .mc-stepper__detail,.mc-stepper__item--validated .mc-stepper__detail{font-weight:700}.mc-stepper__item--current::before{background-color:#00919f}.mc-stepper__item--current .mc-stepper__indicator{background-color:#00919f;color:#ffffff}.mc-stepper__item--current .mc-stepper__label{color:#000000}.mc-stepper__item--validated::before,.mc-stepper__item--validated:not(.mc-stepper__item--current)::after{background-color:#00919f}.mc-stepper__link{height:100%;text-decoration:none;width:100%}.mc-stepper__link:hover .mc-stepper__label,.mc-stepper__link:focus .mc-stepper__label{color:#00919f}.mc-stepper__indicator{font-size:0.875rem;line-height:1.1428571429;font-weight:700;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:2px solid #999999;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;height:1.5rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-bottom:0.5rem;position:relative;width:1.5rem;z-index:2}.mc-stepper__icon{fill:#00919f;max-width:100%}.mc-stepper__detail{font-size:0.875rem;line-height:1.2857142857;color:#666666;text-align:center;width:auto}.mc-stepper__title{display:none;color:#00919f}.mc-stepper--compact .mc-stepper__item{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding-bottom:1.25rem}.mc-stepper--compact .mc-stepper__item::before,.mc-stepper--compact .mc-stepper__item::after{bottom:0;border-radius:6px;height:0.25rem;top:auto}.mc-stepper--compact .mc-stepper__item::after{width:100%}.mc-stepper--compact .mc-stepper__item::before{z-index:2;width:calc(var(--current) * 100% / var(--steps))}.mc-stepper--compact .mc-stepper__item:not(.mc-stepper__item--current){display:none}.mc-stepper--compact .mc-stepper__indicator{display:none}.mc-stepper--compact .mc-stepper__detail{text-align:left}.mc-stepper--compact .mc-stepper__title{display:block;margin-bottom:0.25rem}@media screen and (max-width: 679px){.mc-stepper--shrinked .mc-stepper__item{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding-bottom:1.25rem}.mc-stepper--shrinked .mc-stepper__item::before,.mc-stepper--shrinked .mc-stepper__item::after{bottom:0;border-radius:6px;height:0.25rem;top:auto}.mc-stepper--shrinked .mc-stepper__item::after{width:100%}.mc-stepper--shrinked .mc-stepper__item::before{z-index:2;width:calc(var(--current) * 100% / var(--steps))}.mc-stepper--shrinked .mc-stepper__item:not(.mc-stepper__item--current){display:none}.mc-stepper--shrinked .mc-stepper__indicator{display:none}.mc-stepper--shrinked .mc-stepper__detail{text-align:left}.mc-stepper--shrinked .mc-stepper__title{display:block;margin-bottom:0.25rem}}',this.shadowRoot.appendChild(c),t(this,{target:this.shadowRoot,props:r(this.attributes),customElement:!0},j,C,p,{steps:6,compact:0},null),e&&(e.target&&i(e.target,this,e.anchor),e.props&&(this.$set(e.props),s()))}static get observedAttributes(){return["steps","compact"]}get steps(){return this.$$.ctx[6]}set steps(e){this.$$set({steps:e}),s()}get compact(){return this.$$.ctx[0]}set compact(e){this.$$set({compact:e}),s()}}export{E as default};
+import{S as e,i as t,a as r,b as i,f as s,s as p,c,e as o,n,g as a,h as m,j as l,m as d,o as _,J as b,p as f,q as h,d as u,t as x,l as g,k}from"../../index-c33b3772.js";import{E as w}from"../../EventHandler-02058705.js";function v(e,t,r){const i=e.slice();return i[10]=t[r],i[12]=r,i}function y(e){let t,r,s=e[12]+1+"";return{c(){t=o("span"),r=x(s)},m(e,s){i(e,t,s),l(t,r)},d(e){e&&_(t)}}}function $(e){let t;return{c(){t=o("div"),t.innerHTML='<navigation-notification-available-16px name="NotificationAvailable16" size="100%"></navigation-notification-available-16px>',a(t,"class","mc-stepper__icon")},m(e,r){i(e,t,r)},d(e){e&&_(t)}}}function z(e){let t,r,s,p,c,n,m,d,b,f,h,w,v,z,C=e[4](e[12],e[2])+"",j=e[10].label+"";function E(e,t){return 4&t&&(s=null),null==s&&(s=!!e[3](e[12],e[2])),s?$:e[10].isCurrent?y:void 0}let L=E(e,-1),A=L&&L(e);function D(){return e[7](e[10])}return{c(){t=o("li"),r=o("div"),A&&A.c(),p=u(),c=o("div"),n=o("span"),m=x(C),d=u(),b=o("span"),f=x(j),h=u(),a(r,"class","mc-stepper__indicator"),a(r,"aria-hidden","true"),a(n,"class","mc-stepper__title"),a(b,"class","mc-stepper__label"),a(c,"class","mc-stepper__detail"),a(t,"class",w="mc-stepper__item "+(e[10].isCurrent?"mc-stepper__item--current":"")+" "+(e[3](e[12],e[2])?"mc-stepper__item--validated":""))},m(e,s){i(e,t,s),l(t,r),A&&A.m(r,null),l(t,p),l(t,c),l(c,n),l(n,m),l(c,d),l(c,b),l(b,f),l(t,h),v||(z=g(t,"click",D),v=!0)},p(i,s){L!==(L=E(e=i,s))&&(A&&A.d(1),A=L&&L(e),A&&(A.c(),A.m(r,null))),4&s&&C!==(C=e[4](e[12],e[2])+"")&&k(m,C),4&s&&j!==(j=e[10].label+"")&&k(f,j),4&s&&w!==(w="mc-stepper__item "+(e[10].isCurrent?"mc-stepper__item--current":"")+" "+(e[3](e[12],e[2])?"mc-stepper__item--validated":""))&&a(t,"class",w)},d(e){e&&_(t),A&&A.d(),v=!1,z()}}}function C(e){let t,r,s,p=e[2],f=[];for(let t=0;t<p.length;t+=1)f[t]=z(v(e,p,t));let h=[{class:s="mc-stepper "+(e[0]?"mc-stepper--compact":"")+" "+(e[2].length>3?"mc-stepper--shrinked":"")},{"aria-label":"accessibilityLabels.stepperDescription"},e[1]],u={};for(let e=0;e<h.length;e+=1)u=c(u,h[e]);return{c(){t=o("nav"),r=o("ol");for(let e=0;e<f.length;e+=1)f[e].c();this.c=n,a(r,"class","mc-stepper__list"),m(t,u)},m(e,s){i(e,t,s),l(t,r);for(let e=0;e<f.length;e+=1)f[e]&&f[e].m(r,null)},p(e,[i]){if(60&i){let t;for(p=e[2],t=0;t<p.length;t+=1){const s=v(e,p,t);f[t]?f[t].p(s,i):(f[t]=z(s),f[t].c(),f[t].m(r,null))}for(;t<f.length;t+=1)f[t].d(1);f.length=p.length}m(t,u=d(h,[5&i&&s!==(s="mc-stepper "+(e[0]?"mc-stepper--compact":"")+" "+(e[2].length>3?"mc-stepper--shrinked":""))&&{class:s},{"aria-label":"accessibilityLabels.stepperDescription"},2&i&&e[1]]))},i:n,o:n,d(e){e&&_(t),b(f,e)}}}function j(e,t,r){let i,s;const p=["steps","compact"];let o=f(t,p),{steps:n}=t,{compact:a=!1}=t,m=new w;function l(e){m.dispatch("step-changed",e)}return e.$$set=e=>{t=c(c({},t),h(e)),r(9,o=f(t,p)),"steps"in e&&r(6,n=e.steps),"compact"in e&&r(0,a=e.compact)},e.$$.update=()=>{64&e.$$.dirty&&r(2,i=n?JSON.parse(n):[]),r(1,s=Object.assign({},o)),2&e.$$.dirty&&delete s.class},[a,s,i,function(e,t){return e<t.findIndex((e=>e.isCurrent))},function(e,t){return`${e+1} / ${t.length}`},l,n,e=>l(e)]}class E extends e{constructor(e){super();const c=document.createElement("style");c.textContent='.mc-stepper{width:100%}.mc-stepper__list{display:-webkit-box;display:-ms-flexbox;display:flex;padding-left:0;margin-bottom:0;margin-top:0}.mc-stepper__item,.mc-stepper__link{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mc-stepper__item{-webkit-box-flex:1;-ms-flex:1;flex:1;position:relative}.mc-stepper__item::before,.mc-stepper__item::after{background-color:#999999;content:"";height:0.125rem;position:absolute;top:11px;width:calc(50% - 1.25rem);z-index:1}.mc-stepper__item::before{border-top-right-radius:1px;border-bottom-right-radius:1px;left:0}.mc-stepper__item::after{border-top-left-radius:1px;border-bottom-left-radius:1px;right:0}.mc-stepper__item:first-child::before,.mc-stepper__item:last-child::after{content:none}.mc-stepper__item--current .mc-stepper__indicator,.mc-stepper__item--validated .mc-stepper__indicator{border-color:#00919f}.mc-stepper__item--current .mc-stepper__detail,.mc-stepper__item--validated .mc-stepper__detail{font-weight:700}.mc-stepper__item--current::before{background-color:#00919f}.mc-stepper__item--current .mc-stepper__indicator{background-color:#00919f;color:#ffffff}.mc-stepper__item--current .mc-stepper__label{color:#000000}.mc-stepper__item--validated::before,.mc-stepper__item--validated:not(.mc-stepper__item--current)::after{background-color:#00919f}.mc-stepper__link{height:100%;text-decoration:none;width:100%}.mc-stepper__link:hover .mc-stepper__label,.mc-stepper__link:focus .mc-stepper__label{color:#00919f}.mc-stepper__indicator{font-size:0.875rem;line-height:1.1428571429;font-weight:700;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:2px solid #999999;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;height:1.5rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-bottom:0.5rem;position:relative;width:1.5rem;z-index:2}.mc-stepper__icon{fill:#00919f;max-width:100%}.mc-stepper__detail{font-size:0.875rem;line-height:1.2857142857;color:#666666;text-align:center;width:auto}.mc-stepper__title{display:none;color:#00919f}.mc-stepper--compact .mc-stepper__item{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding-bottom:1.25rem}.mc-stepper--compact .mc-stepper__item::before,.mc-stepper--compact .mc-stepper__item::after{bottom:0;border-radius:6px;height:0.25rem;top:auto}.mc-stepper--compact .mc-stepper__item::after{width:100%}.mc-stepper--compact .mc-stepper__item::before{z-index:2;width:calc(var(--current) * 100% / var(--steps))}.mc-stepper--compact .mc-stepper__item:not(.mc-stepper__item--current){display:none}.mc-stepper--compact .mc-stepper__indicator{display:none}.mc-stepper--compact .mc-stepper__detail{text-align:left}.mc-stepper--compact .mc-stepper__title{display:block;margin-bottom:0.25rem}@media screen and (max-width: 679px){.mc-stepper--shrinked .mc-stepper__item{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding-bottom:1.25rem}.mc-stepper--shrinked .mc-stepper__item::before,.mc-stepper--shrinked .mc-stepper__item::after{bottom:0;border-radius:6px;height:0.25rem;top:auto}.mc-stepper--shrinked .mc-stepper__item::after{width:100%}.mc-stepper--shrinked .mc-stepper__item::before{z-index:2;width:calc(var(--current) * 100% / var(--steps))}.mc-stepper--shrinked .mc-stepper__item:not(.mc-stepper__item--current){display:none}.mc-stepper--shrinked .mc-stepper__indicator{display:none}.mc-stepper--shrinked .mc-stepper__detail{text-align:left}.mc-stepper--shrinked .mc-stepper__title{display:block;margin-bottom:0.25rem}}',this.shadowRoot.appendChild(c),t(this,{target:this.shadowRoot,props:r(this.attributes),customElement:!0},j,C,p,{steps:6,compact:0},null),e&&(e.target&&i(e.target,this,e.anchor),e.props&&(this.$set(e.props),s()))}static get observedAttributes(){return["steps","compact"]}get steps(){return this.$$.ctx[6]}set steps(e){this.$$set({steps:e}),s()}get compact(){return this.$$.ctx[0]}set compact(e){this.$$set({compact:e}),s()}}export{E as default};
 //# sourceMappingURL=Stepper.js.map