@mozaic-ds/web-components 0.2.0 → 0.3.0

package/public/bricoman/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":"ymDAyCaA,EAAAC,MAAMC,2BAAXC,OAAIC,GAAA,4JADRC,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,kqBAfsBa,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/bricoman/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 i,K as n,b as a,C as r,D as l,E as d,o,ac as b,e as c,d as u,g as h,j as m,l as p,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-51f0ac60.js";import N from"./sidebar-feature.nested.js";function H(e){i(e,"svelte-bbd24h",".mc-sidebar-user.svelte-bbd24h.svelte-bbd24h{left:0;right:0;bottom:0;position:absolute;background:#ffab80}.mc-sidebar-user__header.svelte-bbd24h.svelte-bbd24h{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:none;border:none;color:#191919;font-size:inherit;font-family:inherit;text-align:initial;margin:0;width:100%;overflow:hidden}.mc-sidebar-user__header.svelte-bbd24h.svelte-bbd24h: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-bbd24h.svelte-bbd24h:hover{cursor:pointer}.mc-sidebar-user__header.svelte-bbd24h:hover .mc-sidebar-user__header__information__icon.svelte-bbd24h{background:#ff7933}.mc-sidebar-user__header__picture.svelte-bbd24h.svelte-bbd24h{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-bbd24h img.svelte-bbd24h{display:block}.mc-sidebar-user__header__information.svelte-bbd24h.svelte-bbd24h{-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-bbd24h.svelte-bbd24h{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-bbd24h.svelte-bbd24h{font-size:16px;font-weight:bold}.mc-sidebar-user__header__information__title.svelte-bbd24h.svelte-bbd24h,.mc-sidebar-user__header__information__identity.svelte-bbd24h.svelte-bbd24h{white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;max-width:176px}.mc-sidebar-user__icon.svelte-bbd24h.svelte-bbd24h{fill:#191919}.mc-sidebar-user__content.svelte-bbd24h.svelte-bbd24h{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-bbd24h.svelte-bbd24h{height:0;margin:0}.mc-sidebar-user.is-close.svelte-bbd24h .mc-sidebar-user__header.svelte-bbd24h{-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-bbd24h .mc-sidebar-user__header.svelte-bbd24h{-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 i=e.slice();return i[11]=t[s],i}function V(e){let t,s,i,n,b,_,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=c("div"),s=c("button"),i=c("span"),L.c(),n=u(),j&&j.c(),x=u(),z&&z.c(),h(i,"class","mc-sidebar-user__header__picture svelte-bbd24h"),h(s,"aria-expanded",b=e[4]&&e[3]),h(s,"class","mc-sidebar-user__header svelte-bbd24h"),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-bbd24h")},m(r,l){a(r,t,l),m(t,s),m(s,i),L.m(i,null),m(s,n),j&&j.m(s,null),m(t,x),z&&z.m(t,null),v=!0,w||(y=p(t,"click",e[6]),w=!0)},p(e,n){$===($=k(e))&&L?L.p(e,n):(L.d(1),L=$(e),L&&(L.c(),L.m(i,null))),e[4]?j?j.p(e,n):(j=F(e),j.c(),j.m(s,null)):j&&(j.d(1),j=null),(!v||24&n&&b!==(b=e[4]&&e[3]))&&h(s,"aria-expanded",b),(!v||28&n&&_!==(_=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,n),2&n&&r(z,1)):(z=G(e),z.c(),r(z,1),z.m(t,null)):z&&(f(),l(z,1,1,(()=>{z=null})),d()),(!v||16&n&&g!==(g="mc-sidebar-user "+(e[4]?"is-open":"is-close")+" svelte-bbd24h"))&&h(t,"class",g)},i(e){v||(r(z),v=!0)},o(e){l(z),v=!1},d(e){e&&o(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,"class","mc-sidebar-user__icon svelte-bbd24h"),h(t,"width","24px"),h(t,"height","24px"),h(t,"viewBox","0 0 24 24")},m(e,i){a(e,t,i),m(t,s)},p:j,d(e){e&&o(t)}}}function D(e){let t,s;return{c(){t=c("img"),h(t,"class","base64 svelte-bbd24h"),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){a(e,t,s)},p(e,i){1&i&&!B(t.src,s="data:image/png;base64, "+e[0].imageBase64)&&h(t,"src",s)},d(e){e&&o(t)}}}function F(e){let t,s,i,r,l,d,b,p,f=(e[0]?.firstName||"")+"",g=(e[0]?.lastName||"")+"",v=e[0]?.title&&O(e),w=e[1]?.length&&P(e);return{c(){t=c("p"),s=c("span"),i=_(f),r=u(),l=_(g),d=u(),v&&v.c(),b=u(),w&&w.c(),p=n(),h(s,"class","mc-sidebar-user__header__information__identity svelte-bbd24h"),h(t,"class","mc-sidebar-user__header__information svelte-bbd24h")},m(e,n){a(e,t,n),m(t,s),m(s,i),m(s,r),m(s,l),m(t,d),v&&v.m(t,null),a(e,b,n),w&&w.m(e,n),a(e,p,n)},p(e,s){1&s&&f!==(f=(e[0]?.firstName||"")+"")&&x(i,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(p.parentNode,p)):w&&(w.d(1),w=null)},d(e){e&&o(t),v&&v.d(),e&&o(b),w&&w.d(e),e&&o(p)}}}function O(e){let t,s,i=K(e[0].title)+"";return{c(){t=c("span"),s=_(i),h(t,"class","mc-sidebar-user__header__information__title svelte-bbd24h")},m(e,i){a(e,t,i),m(t,s)},p(e,t){1&t&&i!==(i=K(e[0].title)+"")&&x(s,i)},d(e){e&&o(t)}}}function P(e){let t;function s(e,t){return e[4]&&!e[3]?U:S}let i=s(e),n=i(e);return{c(){t=c("span"),n.c(),h(t,"class","mc-sidebar-user__header__information__icon svelte-bbd24h")},m(e,s){a(e,t,s),n.m(t,null)},p(e,a){i!==(i=s(e))&&(n.d(1),n=i(e),n&&(n.c(),n.m(t,null)))},d(e){e&&o(t),n.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,"class","mc-sidebar-user__icon svelte-bbd24h"),h(t,"viewBox","0 0 16 16")},m(e,i){a(e,t,i),m(t,s)},d(e){e&&o(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,"class","mc-sidebar-user__icon svelte-bbd24h"),h(t,"width","16px"),h(t,"height","16px"),h(t,"viewBox","0 0 16 16")},m(e,i){a(e,t,i),m(t,s)},d(e){e&&o(t)}}}function G(e){let t,s,i,n=e[1],b=[];for(let t=0;t<n.length;t+=1)b[t]=I(E(e,n,t));const u=e=>l(b[e],1,1,(()=>{b[e]=null}));return{c(){t=c("ul");for(let e=0;e<b.length;e+=1)b[e].c();h(t,"aria-hidden",s=!e[4]||!e[3]),h(t,"class","mc-sidebar-user__content is-close svelte-bbd24h"),h(t,"id","user-content")},m(s,n){a(s,t,n);for(let e=0;e<b.length;e+=1)b[e]&&b[e].m(t,null);e[9](t),i=!0},p(e,a){if(134&a){let s;for(n=e[1],s=0;s<n.length;s+=1){const i=E(e,n,s);b[s]?(b[s].p(i,a),r(b[s],1)):(b[s]=I(i),b[s].c(),r(b[s],1),b[s].m(t,null))}for(f(),s=n.length;s<b.length;s+=1)u(s);d()}(!i||24&a&&s!==(s=!e[4]||!e[3]))&&h(t,"aria-hidden",s)},i(e){if(!i){for(let e=0;e<n.length;e+=1)r(b[e]);i=!0}},o(e){b=b.filter(Boolean);for(let e=0;e<b.length;e+=1)l(b[e]);i=!1},d(s){s&&o(t),g(b,s),e[9](null)}}}function I(e){let t,s,i,n,d,b;function h(){return e[8](e[11])}return s=new N({props:{feature:e[11],a11yLabels:e[2]}}),{c(){t=c("li"),v(s.$$.fragment),i=u()},m(e,r){a(e,t,r),w(s,t,null),m(t,i),n=!0,d||(b=p(t,"click",y(h)),d=!0)},p(t,i){e=t;const n={};2&i&&(n.feature=e[11]),4&i&&(n.a11yLabels=e[2]),s.$set(n)},i(e){n||(r(s.$$.fragment,e),n=!0)},o(e){l(s.$$.fragment,e),n=!1},d(e){e&&o(t),k(s),d=!1,b()}}}function J(e){let t,s,i=e[0]&&V(e);return{c(){i&&i.c(),t=n()},m(e,n){i&&i.m(e,n),a(e,t,n),s=!0},p(e,[s]){e[0]?i?(i.p(e,s),1&s&&r(i,1)):(i=V(e),i.c(),r(i,1),i.m(t.parentNode,t)):i&&(f(),l(i,1,1,(()=>{i=null})),d())},i(e){s||(r(i),s=!0)},o(e){l(i),s=!1},d(e){i&&i.d(e),e&&o(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 i;b(e,A,(e=>s(4,i=e)));let n,{user:a}=t,{data:r}=t,{a11yLabels:l}=t,d=!1;function o(e){e.disabled||M(e.code)}return e.$$set=e=>{"user"in e&&s(0,a=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(n){s(5,n.style.height="",n),s(5,n.style.transition="none",n);const i=window.getComputedStyle(n).height;n.classList.add(t&&e?"is-open":"is-close"),n.classList.remove(t&&e?"is-close":"is-open");const a=window.getComputedStyle(n).height;s(5,n.style.height=i,n),requestAnimationFrame((()=>{s(5,n.style.transition="",n),requestAnimationFrame((()=>{s(5,n.style.height=a,n)}))}));const r=()=>{s(5,n.style.height="",n),n.removeEventListener("transitionend",r)};n.addEventListener("transitionend",r)}}(d,i)},[a,r,l,d,i,n,function(){i?s(3,d=!d):(C(!0),s(3,d=!0))},o,e=>o(e),function(e){$[e?"unshift":"push"]((()=>{n=e,s(5,n)}))}]}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/bricoman/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/bricoman/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/bricoman/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/bricoman/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/bricoman/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/bricoman/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/bricoman/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/bricoman/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;