@mozaic-ds/web-components 1.5.1 → 1.6.0

package/dist/components/sidebarfooter/SidebarFooter.js

@@ -0,0 +1,18 @@
+import{o as xe,c as we,e as ye,a as ze,p as x,l as o,k as v,q as O,t as S,b as a,d as Le,v as K,w as J,f as s,j as g,i as w,y as N,x as P,r as p,u as Ie,s as je,h as Ee,m as ne}from"../../custom-element.js";import{i as l}from"../../if.js";import{s as ae}from"../../slot.js";import{c as Oe}from"../../svelte-component.js";import{e as Se}from"../../svelte-element.js";import{c as de,a as Fe,s as V}from"../../attributes.js";import{b as W}from"../../this.js";import{m as De,n as Me,c as Te}from"../../Condition20.js";import{D as Ce}from"../divider/Divider.js";import{I as Ke}from"../iconbutton/IconButton.js";import{_ as ce}from"./_SidebarFooterMenu.js";import{u as Pe}from"../../floating-item.svelte.js";import{g as Ae,s as Be}from"../../sidebar-state.svelte.js";import{M as Re}from"../../media-query.js";import"../../branches.js";import"../loader/Loader.js";import"../sidebarnavitem/SidebarNavItem.js";import"../../index-client.js";import"../tooltip/Tooltip.js";var qe=s('<img class="mc-sidebar__footer-avatar svelte-15fp7dn" loading="lazy"/>'),Qe=s('<p class="mc-sidebar__footer-title svelte-15fp7dn"> </p>'),Ue=s('<p class="mc-sidebar__footer-subtitle svelte-15fp7dn"> </p>'),Ge=s('<div class="mc-sidebar__footer-content svelte-15fp7dn"><!> <!></div>'),He=s("<!> <!> <!>",1),Je=s('<span class="mc-sidebar__footer-expand svelte-15fp7dn"><!></span>'),Ne=s('<button class="mc-button mc-button--icon-button mc-button--ghost mc-sidebar__footer-expand--mobile svelte-15fp7dn" aria-label="Profile menu"><!> <!></button>'),Ve=s('<footer><!> <div class="mc-sidebar__footer-container svelte-15fp7dn"><!> <!> <!></div></footer>');const We={hash:"svelte-15fp7dn",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-sidebar.svelte-15fp7dn {display:flex;align-items:start;font-size:var(--font-size-100, 0.875rem);color:var(--sidebar-color-text-default, #404040);box-sizing:border-box;background-color:var(--overlay-color-background, rgba(0, 0, 0, 0.5));padding-right:4rem;position:relative;}
+@media screen and (min-width: 680px) {.mc-sidebar.svelte-15fp7dn {display:inline-flex;padding-right:0;}
+}.mc-sidebar__wrapper.svelte-15fp7dn {display:flex;flex-direction:column;gap:0.75rem;min-height:100vh;width:100%;padding:0.75rem;background-color:var(--sidebar-color-background-primary, #ffffff);}
+@media screen and (min-width: 680px) {.mc-sidebar__wrapper.svelte-15fp7dn {width:17.25rem;}
+}.mc-sidebar__close-button.svelte-15fp7dn {position:absolute;top:0.5rem;right:0.5rem;}
+@media screen and (min-width: 680px) {.mc-sidebar__close-button.svelte-15fp7dn {display:none;}
+}.mc-sidebar__container.svelte-15fp7dn {flex-grow:1;}.mc-sidebar__floating-item.svelte-15fp7dn {position:absolute;padding-left:1.25rem;left:3rem;}.mc-sidebar__floating-item--tooltip.svelte-15fp7dn {top:0.25rem;}.mc-sidebar__floating-item--expanded.svelte-15fp7dn {left:0;padding:0;}
+@media screen and (min-width: 680px) {.mc-sidebar__floating-item--expanded.svelte-15fp7dn {left:18.5rem;}
+}.mc-sidebar__floating-item--hidden.svelte-15fp7dn {visibility:hidden;overflow:hidden;opacity:0;height:0;pointer-events:none;}.mc-sidebar--collapsed.svelte-15fp7dn {width:4rem;}.mc-sidebar__footer-container.svelte-15fp7dn {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;margin-top:0.5rem;}.mc-sidebar__footer-avatar.svelte-15fp7dn {width:2rem;height:2rem;border-radius:var(--border-radius-full, 100%);}.mc-sidebar__footer-profile.svelte-15fp7dn {display:flex;align-items:center;gap:0.5rem;height:2.5rem;flex-grow:1;border-radius:var(--border-radius-s, 0.25rem);background-color:var(--sidebar-color-extra-feature-background-default, rgba(255, 255, 255, 0.01));cursor:pointer;border:none;}.mc-sidebar__footer-profile.svelte-15fp7dn:hover {background:var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, 0.05));}.mc-sidebar__footer-content.svelte-15fp7dn {display:none;}.mc-sidebar__footer-title.svelte-15fp7dn {margin:0;text-align:left;color:var(--sidebar-color-section-item-text-default, #404040);font-weight:var(--font-weight-bold, 700);}.mc-sidebar__footer-subtitle.svelte-15fp7dn {margin:0;font-size:var(--font-caption, 0.75rem);color:var(--sidebar-color-job-title, #666666);}.mc-sidebar__footer-expand.svelte-15fp7dn {display:none;min-width:2.5rem;min-height:2.5rem;width:2.5rem;height:2.5rem;transform:none;}
+@media screen and (min-width: 680px) {.mc-sidebar__footer-expand.svelte-15fp7dn {display:inline-flex;}
+}.mc-sidebar__footer-expand--mobile.svelte-15fp7dn {position:relative;}
+@media screen and (min-width: 680px) {.mc-sidebar__footer-expand--mobile.svelte-15fp7dn {display:none;}
+}.mc-sidebar__footer--expanded.svelte-15fp7dn .mc-sidebar__footer-container:where(.svelte-15fp7dn) {flex-direction:row;justify-content:flex-end;height:3.5rem;}.mc-sidebar__footer--expanded.svelte-15fp7dn .mc-sidebar__footer-content:where(.svelte-15fp7dn) {display:block;}.mc-sidebar__footer--expanded.svelte-15fp7dn .mc-sidebar__footer-expand:where(.svelte-15fp7dn) {transform:rotate(180deg);}.mc-sidebar__footer--collapsed.svelte-15fp7dn .mc-sidebar__footer-container:where(.svelte-15fp7dn) {flex-direction:column;justify-content:flex-start;height:auto;}.mc-sidebar__footer--collapsed.svelte-15fp7dn .mc-sidebar__footer-content:where(.svelte-15fp7dn) {display:none;}.mc-sidebar__footer--collapsed.svelte-15fp7dn .mc-sidebar__footer-expand:where(.svelte-15fp7dn) {transform:none;}.mc-sidebar__footer-menu.svelte-15fp7dn {width:19.75rem;box-sizing:border-box;padding:0.5rem 0.75rem;background-color:var(--listbox-color-background, #ffffff);border:1px solid var(--listbox-color-border, #cccccc);border-radius:var(--border-radius-m, 0.5rem);box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0, 0, 0, var(--shadow-bottom-s-opacity, 20%));}
+@media screen and (min-width: 680px) {.mc-sidebar__footer-menu.svelte-15fp7dn {width:18.75rem;}
+}.mc-sidebar__header.svelte-15fp7dn {display:flex;align-items:center;justify-content:center;gap:0.5rem;}.mc-sidebar__header-logo.svelte-15fp7dn {width:2.5rem;height:2.5rem;}.mc-sidebar__header-title.svelte-15fp7dn {font-size:var(--font-size-200, 1.125rem);font-weight:var(--font-weight-bold, 700);color:var(--sidebar-color-product-name, #000000);margin:0;flex-grow:1;display:none;}.mc-sidebar__listbox.svelte-15fp7dn {min-width:18.75rem;border-radius:var(--border-radius-m, 0.5rem);background-color:var(--listbox-color-background, #ffffff);padding:1rem;display:flex;flex-direction:column;gap:0.25rem;box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0, 0, 0, var(--shadow-bottom-s-opacity, 20%));}.mc-sidebar__listbox-title.svelte-15fp7dn {font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-semi-bold, 600);padding-bottom:0.75rem;margin:0;border-bottom:1px solid var(--divider-color-primary, #cccccc);color:var(--sidebar-color-shortcut-item-text-default, #404040);}.mc-sidebar__list.svelte-15fp7dn {list-style-type:none;margin:0;padding:0;}.mc-sidebar__link.svelte-15fp7dn {display:flex;align-items:center;gap:0.25rem;height:2.5rem;width:100%;padding-left:0.25rem;text-align:left;text-decoration:none;font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--sidebar-color-section-item-text-default, #404040);border-radius:var(--border-radius-m, 0.5rem);background:transparent;border:none;cursor:pointer;}.mc-sidebar__link--selected.svelte-15fp7dn {color:var(--sidebar-color-section-item-text-selected, #006902);background:var(--sidebar-color-section-item-background-selected, #ebf5de);}.mc-sidebar__link--locked.svelte-15fp7dn {pointer-events:none;}.mc-sidebar__link.svelte-15fp7dn:not(.mc-sidebar__link--selected):hover {background:var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, 0.05));}.mc-sidebar__link.svelte-15fp7dn:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-sidebar__icon.svelte-15fp7dn {fill:currentcolor;width:1.5rem;height:1.5rem;}.mc-sidebar__indicator.svelte-15fp7dn {fill:currentcolor;width:1.25rem;height:1.25rem;}.mc-sidebar__text.svelte-15fp7dn {display:block;}.mc-sidebar__sub.svelte-15fp7dn {width:1.25rem;height:1.25rem;}.mc-sidebar__sublist.svelte-15fp7dn {list-style-type:none;margin:0;padding:0 0 0 2rem;display:flex;flex-direction:column;gap:0.25rem;}.mc-sidebar__item.svelte-15fp7dn {position:relative;}.mc-sidebar__shortcut-wrapper.svelte-15fp7dn {width:100%;display:grid;justify-content:center;position:relative;}.mc-sidebar__shortcut-list.svelte-15fp7dn {display:flex;margin:0;}.mc-sidebar__shortcut-list--grid.svelte-15fp7dn {padding:0;gap:0.5rem;align-items:center;}.mc-sidebar__shortcut-list--stacked.svelte-15fp7dn {gap:0.25rem;flex-direction:column;padding:0;}.mc-sidebar__shortcut-list--stacked.svelte-15fp7dn:not(.mc-sidebar__shortcut-list--floating) {padding:0 0 0.5rem 1rem;margin-bottom:0.5rem;border-bottom:1px solid var(--divider-color-primary, #cccccc);}.mc-sidebar__shortcut-item.svelte-15fp7dn {cursor:pointer;display:flex;align-items:center;list-style:none;border-radius:var(--border-radius-m, 0.5rem);overflow:hidden;}.mc-sidebar__shortcut-item.svelte-15fp7dn:hover {background-color:var(--sidebar-color-shortcut-item-background-hover, rgba(70, 78, 99, 0.2));}.mc-sidebar__shortcut-item.svelte-15fp7dn:nth-child(n+5) {display:none;}.mc-sidebar__shortcut-item--grid.svelte-15fp7dn {justify-content:center;padding:0 0.125rem;height:3rem;width:3.9375rem;background-color:var(--sidebar-color-shortcut-item-background-default, rgba(70, 78, 99, 0.1));}.mc-sidebar__shortcut-item--stacked.svelte-15fp7dn {padding:0.125rem 0.25rem;width:12.5rem;height:2.5rem;}.mc-sidebar__shortcut-item--stacked.mc-sidebar__shortcut-item--floating.svelte-15fp7dn {width:100%;padding:0.125rem 0 0.125rem 0.25rem;}.mc-sidebar__shortcut-item--selected.mc-sidebar__shortcut-item.svelte-15fp7dn {background-color:var(--sidebar-color-shortcut-item-background-selected, #ebf5de);}.mc-sidebar__shortcut-item.svelte-15fp7dn:is(.mc-sidebar__trigger:where(.svelte-15fp7dn)) {width:3rem;height:3rem;justify-content:center;border:none;background-color:var(--sidebar-color-shortcut-item-background-default, rgba(70, 78, 99, 0.1));}.mc-sidebar__shortcut-item.svelte-15fp7dn:is(.mc-sidebar__trigger:where(.svelte-15fp7dn)):hover {background-color:var(--sidebar-color-shortcut-item-background-default, rgba(70, 78, 99, 0.1));}.mc-sidebar__shortcut-link.svelte-15fp7dn:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-sidebar__shortcut-link.svelte-15fp7dn {text-decoration:none;display:flex;align-items:center;justify-content:center;}.mc-sidebar__shortcut-label.svelte-15fp7dn {font-size:var(--font-size-25, 0.625rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);color:var(--sidebar-color-shortcut-item-text-default, #404040);white-space:nowrap;overflow:hidden;}.mc-sidebar__shortcut-icon.svelte-15fp7dn {fill:var(--sidebar-color-shortcut-item-text-default, #404040);width:1.5rem;height:1.5rem;}.mc-button.svelte-15fp7dn {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-15fp7dn:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-15fp7dn:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-15fp7dn:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-15fp7dn {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, 0.25rem);}.mc-button.svelte-15fp7dn {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button__label.svelte-15fp7dn {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-15fp7dn {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-15fp7dn:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-15fp7dn:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-button--s.svelte-15fp7dn {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, 0.25rem);}.mc-button--m.svelte-15fp7dn {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, 0.25rem);}.mc-button--l.svelte-15fp7dn {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, 0.25rem);}.mc-button--icon-only.svelte-15fp7dn {padding:0.25rem;}.mc-button--outlined.svelte-15fp7dn {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.svelte-15fp7dn:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-15fp7dn:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-15fp7dn:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.svelte-15fp7dn {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.svelte-15fp7dn:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-15fp7dn:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-15fp7dn:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--accent.svelte-15fp7dn {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-15fp7dn:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-15fp7dn:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-15fp7dn:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--danger.svelte-15fp7dn {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-15fp7dn:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-15fp7dn:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-15fp7dn:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--inverse.svelte-15fp7dn {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff);}.mc-button--inverse.svelte-15fp7dn:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-15fp7dn:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-15fp7dn:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--icon-button.svelte-15fp7dn {border-radius:var(--border-radius-full, 100%);padding:0;}.mc-button--loading.svelte-15fp7dn {pointer-events:none;}.mc-button--outlined.mc-button--standard.svelte-15fp7dn {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.mc-button--standard.svelte-15fp7dn:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-15fp7dn:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-15fp7dn:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--accent.svelte-15fp7dn {color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff);}.mc-button--outlined.mc-button--accent.svelte-15fp7dn:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-15fp7dn:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-15fp7dn:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--danger.svelte-15fp7dn {color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff);}.mc-button--outlined.mc-button--danger.svelte-15fp7dn:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-15fp7dn:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-15fp7dn:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--inverse.svelte-15fp7dn {color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--outlined.mc-button--inverse.svelte-15fp7dn:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-15fp7dn:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-15fp7dn:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--standard.svelte-15fp7dn {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--standard.svelte-15fp7dn:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-15fp7dn:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-15fp7dn:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--accent.svelte-15fp7dn {color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--accent.svelte-15fp7dn:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-15fp7dn:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-15fp7dn:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--danger.svelte-15fp7dn {color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--danger.svelte-15fp7dn:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-15fp7dn:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-15fp7dn:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--inverse.svelte-15fp7dn {color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--inverse.svelte-15fp7dn:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-15fp7dn:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-15fp7dn:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}`};function Xe(X,c){ye(c,!0),ze(X,We);let i=x(c,"title",7),h=x(c,"subtitle",7),y=x(c,"avatar",7),A=x(c,"expandable",7,!0),F=x(c,"logOutLabel",7,"Log out"),B=x(c,"onlogout",7),D,b=K(!1),R=K(null),q=K(null),z=K(null);const L=J(()=>new Re("(max-width: 780px)").current),{floatingItemIsDisplayed:I,hideFloatingItem:M,showFloatingItem:T,onTriggerKeydown:le,onListboxKeydown:Y}=Pe(()=>o(L)?o(q):o(R),()=>o(z),{position:"top"});function se(){D.dispatchEvent(new CustomEvent("toggle",{bubbles:!0,composed:!0}))}const ie=J(()=>I?Me:Te),be=J(()=>{if(o(L))return{};const e={id:"trigger-footer","aria-expanded":I,"aria-haspopup":"listbox","aria-controls":"listbox-footer"};return o(b)?{...e,"aria-expanded":I,onclick:T}:{...e,"aria-expanded":I,onmouseenter:T,onfocus:T,onkeydown:le,onmouseleave:M,onblur:M}});function Z(){B()?.(),D.dispatchEvent(new CustomEvent("logout",{bubbles:!0,composed:!0}))}var ue={get title(){return i()},set title(e){i(e),w()},get subtitle(){return h()},set subtitle(e){h(e),w()},get avatar(){return y()},set avatar(e){y(e),w()},get expandable(){return A()},set expandable(e=!0){A(e),w()},get logOutLabel(){return F()},set logOutLabel(e="Log out"){F(e),w()},get onlogout(){return B()},set onlogout(e){B(e),w()}},u=Ve(),$=g(u);Ce($,{});var ee=v($,2),oe=g(ee);{var fe=e=>{var t=N(),_=P(t);Se(_,()=>o(L)?"div":"button",!1,(k,d)=>{W(k,r=>O(R,r,!0),()=>o(R)),Fe(k,()=>({class:"mc-sidebar__footer-profile mc-sidebar__footer-trigger",...o(be)}),void 0,void 0,void 0,"svelte-15fp7dn");var j=He(),E=P(j);{var Q=r=>{var n=qe();S(()=>{V(n,"src",y()),V(n,"alt",i())}),a(r,n)};l(E,r=>{y()&&r(Q)})}var re=v(E,2);{var pe=r=>{var n=Ge(),U=g(n);{var C=f=>{var m=Qe(),H=g(m,!0);p(m),S(()=>ne(H,i())),a(f,m)};l(U,f=>{i()&&f(C)})}var G=v(U,2);{var ke=f=>{var m=Ue(),H=g(m,!0);p(m),S(()=>ne(H,h())),a(f,m)};l(G,f=>{h()&&f(ke)})}p(n),a(r,n)};l(re,r=>{(i()||h())&&r(pe)})}var he=v(re,2);{var _e=r=>{ce(r,{get logOutLabel(){return F()},get expanded(){return o(b)},get onListboxKeydown(){return Y},get hideFloatingItem(){return M},onlogout:Z,get listbox(){return o(z)},set listbox(n){O(z,n,!0)},children:(n,U)=>{var C=N(),G=P(C);ae(G,c,"default",{},null),a(n,C)},$$slots:{default:!0}})};l(he,r=>{o(L)||r(_e)})}a(d,j)}),a(e,t)};l(oe,e=>{(y()||i()||h())&&e(fe)})}var te=v(oe,2);{var me=e=>{var t=Je(),_=g(t);Ke(_,{ghost:!0,"aria-label":"Expand",get"aria-expanded"(){return o(b)},onclick:()=>se(),$$slots:{icon:(k,d)=>{De(k,{slot:"icon"})}}}),p(t),a(e,t)};l(te,e=>{A()&&e(me)})}var ve=v(te,2);{var ge=e=>{var t=Ne(),_=g(t);Oe(_,()=>o(ie),(d,j)=>{j(d,{})});var k=v(_,2);ce(k,{get logOutLabel(){return F()},get expanded(){return o(b)},get onListboxKeydown(){return Y},get hideFloatingItem(){return M},onlogout:Z,get listbox(){return o(z)},set listbox(d){O(z,d,!0)},children:(d,j)=>{var E=N(),Q=P(E);ae(Q,c,"default",{},null),a(d,E)},$$slots:{default:!0}}),p(t),W(t,d=>O(q,d),()=>o(q)),S(()=>V(t,"aria-expanded",I)),Ie("click",t,()=>T()),a(e,t)};l(ve,e=>{o(L)&&e(ge)})}return p(ee),p(u),de(u,()=>Ae({setExpanded:e=>O(b,e,!0)})),de(u,()=>Be("M-SIDEBAR-FOOTER")),W(u,e=>D=e,()=>D),S(()=>je(u,1,Ee({"mc-sidebar__footer":!0,"mc-sidebar__footer--expanded":o(b),"mc-sidebar__footer--collapsed":!o(b)}),"svelte-15fp7dn")),a(X,u),Le(ue)}xe(["click"]);customElements.define("m-sidebar-footer",we(Xe,{expandable:{attribute:"expandable",reflect:!0,type:"Boolean"},title:{},subtitle:{},avatar:{},logOutLabel:{},onlogout:{}},["default"],[],{mode:"open"}));
+//# sourceMappingURL=SidebarFooter.js.map

package/dist/components/sidebarfooter/SidebarFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarFooter.js","sources":["../../../src/components/sidebarfooter/SidebarFooter.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-sidebar-footer',\n    props: {\n      expandable: { reflect: true, type: 'Boolean', attribute: 'expandable' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import { SidebarExpand24, ChevronDown24, ChevronUp24 } from '@mozaic-ds/icons-svelte';\n  import Divider from '../divider/Divider.svelte';\n  import IconButton from '../iconbutton/IconButton.svelte';\n  import SidebarFooterMenu from './_SidebarFooterMenu.svelte';\n  import { useFloatingItem } from '../sidebar/floating-item.svelte';\n  import { getSidebarState, setSubItems } from '../sidebar/sidebar-state.svelte';\n  import { MediaQuery } from 'svelte/reactivity';\n\n  /**\n   * SidebarFooter is a component that renders the footer of a sidebar. It can display a user profile with an optional avatar, title, subtitle, and link, and includes a button to expand or collapse the sidebar.\n   * @slot - default - Contains one or more SidebarNavItem components used to render the profile items.\n   * @event toggle {CustomEvent<boolean>} - Emits when the toggle button is clicked.\n   * @event logout {CustomEvent} - Emits when the log out button in the footer menu is clicked.\n   */\n\n  interface Props {\n    /**\n     * The main text or name displayed in the sidebar footer profile.\n     */\n    title?: string;\n    /**\n     * Secondary text or description displayed under the title in the footer.\n     */\n    subtitle?: string;\n    /**\n     * URL of the avatar image displayed in the footer profile.\n     */\n    avatar?: string;\n    /**\n     * if `true`, hides the sidebar expand/collapse button.\n     */\n    expandable?: boolean;\n    /**\n     * Text to display for the log out button.\n     */\n    logOutLabel?: string;\n    /**\n     * Callback to trigger when the user clicks the log out button in the footer menu.\n     */\n    onlogout?: () => void;\n  }\n\n  let {\n    title,\n    subtitle,\n    avatar,\n    expandable = true,\n    logOutLabel = 'Log out',\n    onlogout,\n  }: Props = $props();\n\n  let element: HTMLElement;\n\n  let expanded = $state(false);\n\n  let desktopTrigger: HTMLElement | null = $state(null);\n  let mobileTrigger: HTMLElement | null = $state(null);\n  let listbox: HTMLElement | null = $state(null);\n\n  const isMobile = $derived(new MediaQuery('(max-width: 780px)').current);\n\n  const {\n    floatingItemIsDisplayed,\n    hideFloatingItem,\n    showFloatingItem,\n    onTriggerKeydown,\n    onListboxKeydown,\n  } = useFloatingItem(\n    () => (isMobile ? mobileTrigger : desktopTrigger),\n    () => listbox,\n    { position: 'top' },\n  );\n\n  function toggleSidebar() {\n    element.dispatchEvent(new CustomEvent('toggle', { bubbles: true, composed: true }));\n  }\n\n  const MenuIcon = $derived(floatingItemIsDisplayed ? ChevronUp24 : ChevronDown24);\n\n  const desktopTriggerAttrs = $derived.by(() => {\n    if (isMobile) return {};\n\n    const baseAttrs = {\n      id: 'trigger-footer',\n      ['aria-expanded']: floatingItemIsDisplayed,\n      ['aria-haspopup']: 'listbox',\n      ['aria-controls']: 'listbox-footer',\n    };\n\n    return expanded\n      ? {\n          ...baseAttrs,\n          ['aria-expanded']: floatingItemIsDisplayed,\n          onclick: showFloatingItem,\n        }\n      : {\n          ...baseAttrs,\n          ['aria-expanded']: floatingItemIsDisplayed,\n          onmouseenter: showFloatingItem,\n          onfocus: showFloatingItem,\n          onkeydown: onTriggerKeydown,\n          onmouseleave: hideFloatingItem,\n          onblur: hideFloatingItem,\n        };\n  });\n\n  function handleLogOut() {\n    onlogout?.();\n    element.dispatchEvent(new CustomEvent('logout', { bubbles: true, composed: true }));\n  }\n</script>\n\n<footer\n  {@attach getSidebarState({ setExpanded: (value) => (expanded = value) })}\n  {@attach setSubItems('M-SIDEBAR-FOOTER')}\n  bind:this={element}\n  class={{\n    'mc-sidebar__footer': true,\n    'mc-sidebar__footer--expanded': expanded,\n    'mc-sidebar__footer--collapsed': !expanded,\n  }}\n>\n  <Divider />\n  <div class=\"mc-sidebar__footer-container\">\n    {#if avatar || title || subtitle}\n      <svelte:element\n        this={isMobile ? 'div' : 'button'}\n        bind:this={desktopTrigger}\n        class=\"mc-sidebar__footer-profile mc-sidebar__footer-trigger\"\n        {...desktopTriggerAttrs}\n      >\n        {#if avatar}\n          <img class=\"mc-sidebar__footer-avatar\" src={avatar} alt={title} loading=\"lazy\" />\n        {/if}\n\n        {#if title || subtitle}\n          <div class=\"mc-sidebar__footer-content\">\n            {#if title}\n              <p class=\"mc-sidebar__footer-title\">\n                {title}\n              </p>\n            {/if}\n\n            {#if subtitle}\n              <p class=\"mc-sidebar__footer-subtitle\">\n                {subtitle}\n              </p>\n            {/if}\n          </div>\n        {/if}\n\n        {#if !isMobile}\n          <SidebarFooterMenu\n            bind:listbox\n            {logOutLabel}\n            {expanded}\n            {onListboxKeydown}\n            {hideFloatingItem}\n            onlogout={handleLogOut}\n          >\n            <slot />\n          </SidebarFooterMenu>\n        {/if}\n      </svelte:element>\n    {/if}\n\n    {#if expandable}\n      <span class=\"mc-sidebar__footer-expand\">\n        <IconButton\n          ghost\n          aria-label=\"Expand\"\n          aria-expanded={expanded}\n          onclick={() => toggleSidebar()}\n        >\n          <SidebarExpand24 slot=\"icon\" />\n        </IconButton>\n      </span>\n    {/if}\n\n    {#if isMobile}\n      <button\n        bind:this={mobileTrigger}\n        class=\"mc-button mc-button--icon-button mc-button--ghost mc-sidebar__footer-expand--mobile\"\n        aria-label=\"Profile menu\"\n        aria-expanded={floatingItemIsDisplayed}\n        onclick={() => showFloatingItem()}\n      >\n        <MenuIcon />\n\n        <SidebarFooterMenu\n          bind:listbox\n          {logOutLabel}\n          {expanded}\n          {onListboxKeydown}\n          {hideFloatingItem}\n          onlogout={handleLogOut}\n        >\n          <slot />\n        </SidebarFooterMenu>\n      </button>\n    {/if}\n  </div>\n</footer>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/sidebar';\n  @use '@mozaic-ds/styles/components/button';\n</style>\n"],"names":["title","$.prop","$$props","subtitle","avatar","expandable","logOutLabel","onlogout","element","expanded","$.state","desktopTrigger","mobileTrigger","listbox","isMobile","$.derived","MediaQuery","floatingItemIsDisplayed","hideFloatingItem","showFloatingItem","onTriggerKeydown","onListboxKeydown","useFloatingItem","$.get","toggleSidebar","MenuIcon","ChevronUp24","ChevronDown24","desktopTriggerAttrs","baseAttrs","handleLogOut","footer","root","node","$.child","Divider","div","$.sibling","$$element","$$anchor","$.bind_this","$$value","$.set","img","root_3","$.set_attribute","$$render","consequent","div_1","root_4","p","root_5","consequent_1","p_1","root_6","consequent_2","consequent_3","SidebarFooterMenu","consequent_4","consequent_5","span","root_9","IconButton","node_10","SidebarExpand24","consequent_6","button","root_11","node_12","MenuIcon_1","node_13","$.reset","$.template_effect","$.delegated","$.append","consequent_7","getSidebarState","value","setSubItems"],"mappings":"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"}

package/dist/components/sidebarfooter/SidebarFooter.spec.js

@@ -0,0 +1,132 @@
+import { describe, it, expect, vi, beforeAll, afterAll, afterEach } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import Footer from './SidebarFooter.svelte';
+import { tick } from 'svelte';
+// -----------------------------
+// Mock matchMedia globally
+// -----------------------------
+beforeAll(() => {
+    vi.stubGlobal('matchMedia', (query) => ({
+        matches: query.includes('max-width: 780px'),
+        media: query,
+        onchange: null,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+    }));
+});
+afterAll(() => {
+    vi.unstubAllGlobals();
+});
+// -----------------------------
+// Mock useFloatingItem
+// -----------------------------
+const mockShow = vi.fn();
+const mockHide = vi.fn();
+const mockOnTriggerKeydown = vi.fn();
+const mockOnListboxKeydown = vi.fn();
+vi.mock('../sidebar/floating-item.svelte', () => ({
+    useFloatingItem: () => ({
+        floatingItemIsDisplayed: false,
+        hideFloatingItem: mockHide,
+        showFloatingItem: mockShow,
+        onTriggerKeydown: mockOnTriggerKeydown,
+        onListboxKeydown: mockOnListboxKeydown,
+    }),
+}));
+describe('SidebarFooter Component', () => {
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+    it('renders avatar, title, and subtitle when provided', () => {
+        const { container } = render(Footer, {
+            avatar: '/avatar.png',
+            title: 'John Doe',
+            subtitle: 'Admin',
+            logOutLabel: 'Log out',
+            expandable: true,
+        });
+        const img = container.querySelector('img');
+        expect(img).not.toBeNull();
+        expect(img?.src).toContain('/avatar.png');
+        const titleEl = container.querySelector('.mc-sidebar__footer-title');
+        const subtitleEl = container.querySelector('.mc-sidebar__footer-subtitle');
+        expect(titleEl).not.toBeNull();
+        expect(subtitleEl).not.toBeNull();
+        expect(titleEl?.textContent).toBe('John Doe');
+        expect(subtitleEl?.textContent).toBe('Admin');
+    });
+    it('does not render the expand button when expandable=false', () => {
+        const { container } = render(Footer, { expandable: false });
+        const button = container.querySelector('button[aria-label="Expand"]');
+        expect(button).toBeNull();
+    });
+    it('emits a "toggle" event when expand button is clicked', async () => {
+        const { container } = render(Footer, { expandable: true });
+        const spy = vi.fn();
+        document.addEventListener('toggle', spy);
+        const button = container.querySelector('button[aria-label="Expand"]');
+        expect(button).not.toBeNull();
+        await fireEvent.click(button);
+        expect(spy).toHaveBeenCalled();
+    });
+    it('renders SidebarFooterMenu for desktop when isMobile=false', () => {
+        const { container } = render(Footer, { logOutLabel: 'Log out', title: 'John Doe' });
+        const menu = container.querySelector('#listbox-footer');
+        expect(menu).not.toBeNull();
+    });
+    it('renders SidebarFooterMenu inside mobile button when isMobile=true', async () => {
+        // Stub matchMedia pour forcer mobile
+        vi.stubGlobal('matchMedia', (query) => ({
+            matches: true,
+            media: query,
+            onchange: null,
+            addEventListener: vi.fn(),
+            removeEventListener: vi.fn(),
+            dispatchEvent: vi.fn(),
+        }));
+        const { container } = render(Footer, {
+            logOutLabel: 'Log out',
+            title: 'John Doe', // obligatoire pour créer le trigger
+            avatar: '/avatar.png', // obligatoire si title/subtitle conditionnel
+        });
+        await tick(); // attendre le rendu du DOM
+        const mobileButton = container.querySelector('.mc-sidebar__footer-expand--mobile');
+        expect(mobileButton).not.toBeNull();
+    });
+    it('attaches correct floating menu events for mobile', async () => {
+        // Force matchMedia à mobile
+        vi.stubGlobal('matchMedia', (query) => ({
+            matches: true,
+            media: query,
+            onchange: null,
+            addEventListener: vi.fn(),
+            removeEventListener: vi.fn(),
+            dispatchEvent: vi.fn(),
+        }));
+        const { container } = render(Footer, {
+            logOutLabel: 'Log out',
+            title: 'John Doe',
+            avatar: '/avatar.png',
+        });
+        await tick();
+        const mobileButton = container.querySelector('.mc-sidebar__footer-expand--mobile');
+        expect(mobileButton).not.toBeNull();
+        await fireEvent.click(mobileButton);
+        expect(mockShow).toHaveBeenCalled();
+    });
+    it('attaches correct floating menu events for mobile', async () => {
+        const { container } = render(Footer, { logOutLabel: 'Log out' });
+        const mobileButton = container.querySelector('.mc-sidebar__footer-expand--mobile');
+        expect(mobileButton).not.toBeNull();
+        await fireEvent.click(mobileButton);
+        expect(mockShow).toHaveBeenCalled();
+    });
+    it('renders MenuIcon correctly depending on floatingItemIsDisplayed', () => {
+        const { container } = render(Footer, { logOutLabel: 'Log out' });
+        const mobileButton = container.querySelector('.mc-sidebar__footer-expand--mobile');
+        expect(mobileButton).not.toBeNull();
+        const svg = mobileButton?.querySelector('svg');
+        expect(svg).not.toBeNull();
+    });
+});