@ajuarezso/sui-design-system 0.10.2 → 0.10.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -14483,7 +14483,7 @@ class SuiSidebar {
|
|
|
14483
14483
|
this.searchSubmitted.emit(this.searchValue());
|
|
14484
14484
|
}
|
|
14485
14485
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14486
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiSidebar, isStandalone: true, selector: "sui-sidebar", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, indicatorColor: { classPropertyName: "indicatorColor", publicName: "indicatorColor", isSignal: true, isRequired: false, transformFunction: null }, brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: false, transformFunction: null }, showHeaderButton: { classPropertyName: "showHeaderButton", publicName: "showHeaderButton", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, secondaryItems: { classPropertyName: "secondaryItems", publicName: "secondaryItems", isSignal: true, isRequired: false, transformFunction: null }, supportingItems: { classPropertyName: "supportingItems", publicName: "supportingItems", isSignal: true, isRequired: false, transformFunction: null }, supportingAnchorBottom: { classPropertyName: "supportingAnchorBottom", publicName: "supportingAnchorBottom", isSignal: true, isRequired: false, transformFunction: null }, itemsLabel: { classPropertyName: "itemsLabel", publicName: "itemsLabel", isSignal: true, isRequired: false, transformFunction: null }, secondaryItemsLabel: { classPropertyName: "secondaryItemsLabel", publicName: "secondaryItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, supportingItemsLabel: { classPropertyName: "supportingItemsLabel", publicName: "supportingItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, activeRoute: { classPropertyName: "activeRoute", publicName: "activeRoute", isSignal: true, isRequired: false, transformFunction: null }, profile: { classPropertyName: "profile", publicName: "profile", isSignal: true, isRequired: false, transformFunction: null }, profileDropdown: { classPropertyName: "profileDropdown", publicName: "profileDropdown", isSignal: true, isRequired: false, transformFunction: null }, mobileOpen: { classPropertyName: "mobileOpen", publicName: "mobileOpen", isSignal: true, isRequired: false, transformFunction: null }, closeOnItemClick: { classPropertyName: "closeOnItemClick", publicName: "closeOnItemClick", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, mobileMode: { classPropertyName: "mobileMode", publicName: "mobileMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchValue: "searchValueChange", mobileOpen: "mobileOpenChange", itemClicked: "itemClicked", logoutClicked: "logoutClicked", backdropClicked: "backdropClicked", headerButtonClicked: "headerButtonClicked", profileClicked: "profileClicked", searchSubmitted: "searchSubmitted" }, host: { listeners: { "document:keydown.escape": "onEscapeKey()" }, properties: { "attr.title": "null", "attr.data-sui-open": "mobileOpen() ? \"\" : null", "attr.data-sui-mobile-mode": "mobileMode()", "attr.data-sui-collapsed": "collapsed() ? \"\" : null", "attr.data-sui-indicator": "indicatorColor()" } }, ngImport: i0, template: "<!-- Backdrop solo en m\u00F3vil: en desktop el sidebar es fijo y mobileOpen es inocuo.\n Color canon = overlay del sui-modal (Figma 480:2474): rgba(51,51,51,0.24). -->\n@if (isMobile() && showBackdrop() && mobileOpen()) {\n <div class=\"sui-sidebar-backdrop\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\n}\n\n<!-- Drawer cerrado en m\u00F3vil: aria-hidden + inert \u2192 invisible para lectores de\n pantalla y el foco no puede entrar al drawer oculto (ni quedar atrapado\n detr\u00E1s del backdrop al cerrarse). En desktop ambos quedan null. -->\n<aside\n class=\"sui-sidebar\"\n [class.sui-sidebar--open]=\"mobileOpen()\"\n [class.sui-sidebar--collapsed]=\"collapsed()\"\n role=\"navigation\"\n [attr.aria-hidden]=\"isMobile() && !mobileOpen() ? 'true' : null\"\n [attr.inert]=\"isMobile() && !mobileOpen() ? '' : null\"\n>\n <!-- \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <header class=\"sui-sidebar__header\">\n <div class=\"sui-sidebar__header-card\">\n <div class=\"sui-sidebar__brand-logo\">\n @if (brandCfg().logo) {\n <img [src]=\"brandCfg().logo\" [alt]=\"brandCfg().name\" referrerpolicy=\"no-referrer\" />\n } @else if (brandCfg().fallback) {\n <span class=\"sui-sidebar__brand-fallback\">{{ brandCfg().fallback }}</span>\n } @else {\n <sui-icon name=\"building-line\" [size]=\"20\" />\n }\n </div>\n @if (!collapsed()) {\n <div class=\"sui-sidebar__header-info\">\n <span class=\"sui-sidebar__header-name\">{{ brandCfg().name }}</span>\n @if (brandCfg().subtitle) {\n @if (brandCfg().subtitleAsBadge) {\n <sui-badge variant=\"filled\" color=\"orange\" size=\"small\">{{ brandCfg().subtitle }}</sui-badge>\n } @else {\n <span class=\"sui-sidebar__header-subtitle\">{{ brandCfg().subtitle }}</span>\n }\n }\n </div>\n @if (showHeaderButton()) {\n <button\n type=\"button\"\n class=\"sui-sidebar__compact-btn\"\n aria-label=\"Cambiar workspace\"\n (click)=\"onHeaderButtonClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"expand-up-down-line\" [size]=\"20\" />\n </button>\n }\n }\n </div>\n <div class=\"sui-sidebar__divider\" role=\"separator\"></div>\n </header>\n\n <!-- \u2500\u2500 Content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"sui-sidebar__content\">\n <!-- Search slot (Figma prop search=true) -->\n @if (!collapsed() && searchCfg(); as s) {\n <div class=\"sui-sidebar__search\">\n <sui-icon class=\"sui-sidebar__search-icon\" name=\"search-2-line\" [size]=\"20\" />\n <input\n class=\"sui-sidebar__search-input\"\n type=\"text\"\n [placeholder]=\"s.placeholder\"\n [value]=\"searchValue()\"\n (input)=\"onSearchInput($any($event.target).value)\"\n (keydown.enter)=\"onSearchSubmit()\"\n />\n @if (s.shortcut) {\n <span class=\"sui-sidebar__shortcut\">{{ s.shortcut }}</span>\n }\n </div>\n }\n\n @if (items().length > 0) {\n <div class=\"sui-sidebar__section\">\n @if (itemsLabel()) {\n <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ itemsLabel() }}</div>\n }\n <nav class=\"sui-sidebar__nav\">\n @for (item of items(); track item.value) {\n <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n }\n </nav>\n </div>\n }\n\n @if (secondaryItems().length > 0) {\n <div class=\"sui-sidebar__section sui-sidebar__section--secondary\">\n @if (secondaryItemsLabel()) {\n <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ secondaryItemsLabel() }}</div>\n }\n <nav class=\"sui-sidebar__nav\">\n @for (item of secondaryItems(); track item.value) {\n <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n }\n </nav>\n </div>\n }\n\n <!-- Supporting Content (Figma supContent) \u2014 ancla al fondo cuando aplica -->\n @if (supportingItems().length > 0) {\n <div\n class=\"sui-sidebar__section sui-sidebar__section--supporting\"\n [class.sui-sidebar__section--anchor-bottom]=\"supportingAnchorBottom()\"\n >\n @if (supportingItemsLabel()) {\n <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ supportingItemsLabel() }}</div>\n }\n <nav class=\"sui-sidebar__nav\">\n @for (item of supportingItems(); track item.value) {\n <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n }\n </nav>\n </div>\n }\n\n <!-- Feature Card slot (Figma FeatureCard=On) \u2014 promo opcional, oculto en collapsed -->\n @if (!collapsed()) {\n <div class=\"sui-sidebar__feature-card\">\n <ng-content select=\"[feature-card]\"></ng-content>\n </div>\n }\n </div>\n\n <!-- \u2500\u2500 Footer (profile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (profile(); as p) {\n <footer class=\"sui-sidebar__footer\">\n <div class=\"sui-sidebar__divider sui-sidebar__divider--top\" role=\"separator\"></div>\n <div class=\"sui-sidebar__profile\">\n <sui-avatar\n size=\"lg\"\n [src]=\"p.avatarUrl ?? null\"\n [alt]=\"p.name\"\n [initials]=\"p.initials ?? ''\"\n [status]=\"p.status ?? null\"\n color=\"slate\"\n />\n @if (!collapsed()) {\n <div class=\"sui-sidebar__profile-info\">\n <div class=\"sui-sidebar__profile-name-row\">\n <span class=\"sui-sidebar__profile-name\">{{ p.name }}</span>\n @if (p.verified) {\n <!-- Figma usa verified-fill (glyph propio SUI); el match m\u00E1s\n cercano en RemixIcon es verified-badge-fill. -->\n <sui-icon\n class=\"sui-sidebar__profile-verified\"\n name=\"verified-badge-fill\"\n [size]=\"20\"\n aria-label=\"Verificado\"\n />\n }\n </div>\n @if (p.email) {\n <span class=\"sui-sidebar__profile-email\">{{ p.email }}</span>\n }\n </div>\n @if (profileDropdown()) {\n <button\n type=\"button\"\n class=\"sui-sidebar__compact-btn sui-sidebar__compact-btn--ghost\"\n aria-label=\"Opciones de perfil\"\n (click)=\"onProfileButtonClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"arrow-right-s-line\" [size]=\"20\" />\n </button>\n }\n }\n </div>\n </footer>\n }\n</aside>\n\n<!-- \u2500\u2500 Item template (compartido entre todas las secciones) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<ng-template #itemTpl let-item>\n @if (item.route && !item.action) {\n <a\n class=\"sui-sidebar__item\"\n [class.sui-sidebar__item--danger]=\"item.variant === 'danger'\"\n [routerLink]=\"item.route\"\n routerLinkActive=\"sui-sidebar__item--active\"\n [attr.target]=\"item.external ? '_blank' : null\"\n [attr.rel]=\"item.external ? 'noopener noreferrer' : null\"\n [attr.title]=\"collapsed() ? (item.tooltip ?? item.label) : null\"\n [attr.aria-label]=\"collapsed() ? item.label : null\"\n (click)=\"onItemClick(item, $event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"sui-sidebar__item\"\n [class.sui-sidebar__item--active]=\"isItemActive(item)\"\n [class.sui-sidebar__item--danger]=\"item.variant === 'danger'\"\n [attr.title]=\"collapsed() ? (item.tooltip ?? item.label) : null\"\n [attr.aria-label]=\"collapsed() ? item.label : null\"\n (click)=\"onItemClick(item, $event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n </button>\n }\n</ng-template>\n\n<ng-template #itemBody let-item>\n @if (item.colorDot) {\n <span\n class=\"sui-sidebar__item-dot\"\n [style.background-color]=\"item.colorDot\"\n aria-hidden=\"true\"\n ></span>\n } @else if (item.icon) {\n <sui-icon class=\"sui-sidebar__item-icon\" [name]=\"item.icon\" [size]=\"20\" />\n }\n @if (!collapsed()) {\n <span class=\"sui-sidebar__item-label\">{{ item.label }}</span>\n @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {\n <sui-badge\n class=\"sui-sidebar__item-badge\"\n variant=\"filled\"\n [color]=\"item.variant === 'danger' ? 'red' : 'orange'\"\n size=\"small\"\n type=\"number\"\n >{{ item.badge }}</sui-badge>\n }\n @if (item.shortcut) {\n <span class=\"sui-sidebar__shortcut\">{{ item.shortcut }}</span>\n }\n <!-- Chevron del item activo (Figma): visibilidad controlada por CSS via\n .sui-sidebar__item--active (cubre tanto isItemActive como RouterLinkActive). -->\n <sui-icon class=\"sui-sidebar__item-chevron\" name=\"arrow-right-s-line\" [size]=\"20\" />\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:contents;font-family:var(--font-sans, \"Satoshi\", system-ui, sans-serif)}.sui-sidebar-backdrop{position:fixed;inset:0;z-index:299;background:#3333333d;animation:sui-sidebar-fade-in .2s ease-out}.sui-sidebar{display:flex;flex-direction:column;flex-shrink:0;width:272px;height:100dvh;background:var(--sui-bg-white-0, #ffffff);border-right:1px solid var(--sui-stroke-soft-200, #ebebeb);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-sidebar__header{position:relative;padding:12px;padding-top:calc(12px + env(safe-area-inset-top,0px))}.sui-sidebar__header-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--sui-radius-10, 10px);background:var(--sui-bg-white-0, #ffffff);overflow:hidden}.sui-sidebar__brand-logo{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);overflow:hidden}.sui-sidebar__brand-logo img{width:100%;height:100%;object-fit:cover;display:block}.sui-sidebar__brand-fallback{font-size:18px;line-height:1}.sui-sidebar__compact-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:1px;border-radius:var(--sui-radius-6, 6px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));color:var(--sui-text-sub-600, #5c5c5c);cursor:pointer;transition:background-color .12s ease-out,color .12s ease-out}@media(hover:hover)and (pointer:fine){.sui-sidebar__compact-btn:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}}.sui-sidebar__compact-btn:focus-visible{outline:2px solid var(--sui-state-information-base, #335cff);outline-offset:-1px}.sui-sidebar__compact-btn:active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__compact-btn--ghost{border-color:transparent;box-shadow:none;background:transparent}.sui-sidebar__header-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;align-items:flex-start}.sui-sidebar__header-name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-sidebar__header-subtitle{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-sidebar__divider{position:absolute;bottom:0;left:20px;right:20px;height:1px;background:var(--sui-stroke-soft-200, #ebebeb)}.sui-sidebar__divider--top{top:0;bottom:auto}.sui-sidebar__content{flex:1;display:flex;flex-direction:column;gap:20px;padding:20px 20px 16px;overflow-y:auto;overflow-x:hidden;min-height:0}.sui-sidebar__section{display:flex;flex-direction:column;gap:8px;flex-shrink:0}.sui-sidebar__section--secondary,.sui-sidebar__section--supporting{gap:6px}.sui-sidebar__section--anchor-bottom{margin-top:auto}.sui-sidebar__section-label{padding:4px;font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__section-label--collapsed{padding:4px 0;text-align:center}.sui-sidebar__search{display:flex;align-items:center;gap:8px;width:100%;padding:8px 8px 8px 10px;border-radius:var(--sui-radius-8, 8px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box}.sui-sidebar__search-icon{flex-shrink:0;display:inline-flex;color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__search-input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717)}.sui-sidebar__search-input::placeholder{color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__shortcut{flex-shrink:0;display:inline-flex;align-items:center;box-sizing:border-box;padding:2px 6px;border-radius:var(--sui-radius-4, 4px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3);white-space:nowrap}.sui-sidebar__nav{display:flex;flex-direction:column;gap:4px}.sui-sidebar__item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--sui-radius-8, 8px);width:100%;background:transparent;border:none;font-family:inherit;text-align:left;text-decoration:none;color:inherit;cursor:pointer;position:relative;transition:background-color .12s ease-out,color .12s ease-out}@media(hover:hover)and (pointer:fine){.sui-sidebar__item:hover{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item:hover .sui-sidebar__item-label,.sui-sidebar__item:hover .sui-sidebar__item-icon{color:var(--sui-text-strong-950, #171717)}}.sui-sidebar__item:focus-visible{outline:2px solid var(--_sui-sidebar-indicator, var(--sui-primary-base, #fa7319));outline-offset:-2px}.sui-sidebar__item:active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--sui-text-sub-600, #5c5c5c);transition:color .12s ease-out}.sui-sidebar__item-label{flex:1;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .12s ease-out}.sui-sidebar__item-badge{flex-shrink:0}.sui-sidebar__item-dot{flex-shrink:0;width:8px;height:8px;margin:6px;border-radius:999px}.sui-sidebar__item-chevron{flex-shrink:0;display:none;color:var(--sui-text-sub-600, #5c5c5c)}:host{--_sui-sidebar-indicator: var(--sui-primary-base, #fa7319)}:host([data-sui-indicator=information]){--_sui-sidebar-indicator: var(--sui-state-information-base, #335cff)}.sui-sidebar__item--active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item--active .sui-sidebar__item-label{color:var(--sui-text-strong-950, #171717)}.sui-sidebar__item--active .sui-sidebar__item-icon{color:var(--_sui-sidebar-indicator)}.sui-sidebar__item--active .sui-sidebar__item-chevron{display:inline-flex;color:var(--sui-text-sub-600, #5c5c5c)}.sui-sidebar__item--active:before{content:\"\";position:absolute;left:-20px;top:50%;transform:translateY(-50%);width:4px;height:20px;background:var(--_sui-sidebar-indicator);border-radius:0 4px 4px 0}@media(hover:hover)and (pointer:fine){.sui-sidebar__item--active:hover{background:var(--sui-bg-weak-50, #f7f7f7)}}.sui-sidebar__item--danger .sui-sidebar__item-icon,.sui-sidebar__item--danger .sui-sidebar__item-label{color:var(--sui-state-error-base, #fb3748)}@media(hover:hover)and (pointer:fine){.sui-sidebar__item--danger:hover{background:var(--sui-red-alpha-10, rgba(251, 55, 72, .0980392157))}.sui-sidebar__item--danger:hover .sui-sidebar__item-icon,.sui-sidebar__item--danger:hover .sui-sidebar__item-label{color:var(--sui-state-error-base, #fb3748)}}.sui-sidebar__item--danger:active{background:var(--sui-red-alpha-16, rgba(251, 55, 72, .1607843137))}.sui-sidebar__footer{position:relative;padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}.sui-sidebar__profile{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--sui-radius-10, 10px);overflow:hidden}.sui-sidebar__profile-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;height:40px;justify-content:center}.sui-sidebar__profile-name-row{display:flex;align-items:center;gap:2px;min-width:0}.sui-sidebar__profile-name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-sidebar__profile-verified{flex-shrink:0;display:inline-flex;color:var(--sui-state-verified-base, #47c2ff)}.sui-sidebar__profile-email{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-sidebar__feature-card{width:100%}.sui-sidebar__feature-card:not(:has(*)){display:none}:host([data-sui-collapsed]) .sui-sidebar{width:80px}:host([data-sui-collapsed]) .sui-sidebar__header-card,:host([data-sui-collapsed]) .sui-sidebar__profile{justify-content:center}:host([data-sui-collapsed]) .sui-sidebar__content{padding-inline:12px}:host([data-sui-collapsed]) .sui-sidebar__item{justify-content:center;padding:8px}:host([data-sui-collapsed]) .sui-sidebar__item--active:before{left:-12px}@media(max-width:767px){.sui-sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;z-index:300;width:min(86vw,360px);box-sizing:border-box;padding-left:env(safe-area-inset-left,0px);transform:translate(-100%);transition:transform .24s cubic-bezier(.23,1,.32,1);border-right:none;border-radius:0 24px 24px 0;overflow:hidden;box-shadow:4px 0 24px #0e121b00}.sui-sidebar--open{transform:translate(0);box-shadow:4px 0 24px #0e121b1a}:host([data-sui-mobile-mode=sheet]) .sui-sidebar{width:calc(100vw - 40px);max-width:none}.sui-sidebar__item{gap:14px;padding:14px 12px;border-radius:var(--sui-radius-10, 10px);transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .16s cubic-bezier(.23,1,.32,1)}.sui-sidebar__item:active{transform:scale(.98);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item-icon{width:24px;height:24px}.sui-sidebar__item-label{font-size:17px;line-height:24px;letter-spacing:-.01em}}@keyframes sui-sidebar-fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiAvatar, selector: "sui-avatar", inputs: ["size", "src", "alt", "initials", "color", "status", "memojiSrc", "illustrationSrc", "icon", "companyLogoSrc", "topBadge", "bgColor"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14486
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiSidebar, isStandalone: true, selector: "sui-sidebar", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, indicatorColor: { classPropertyName: "indicatorColor", publicName: "indicatorColor", isSignal: true, isRequired: false, transformFunction: null }, brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: false, transformFunction: null }, showHeaderButton: { classPropertyName: "showHeaderButton", publicName: "showHeaderButton", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, secondaryItems: { classPropertyName: "secondaryItems", publicName: "secondaryItems", isSignal: true, isRequired: false, transformFunction: null }, supportingItems: { classPropertyName: "supportingItems", publicName: "supportingItems", isSignal: true, isRequired: false, transformFunction: null }, supportingAnchorBottom: { classPropertyName: "supportingAnchorBottom", publicName: "supportingAnchorBottom", isSignal: true, isRequired: false, transformFunction: null }, itemsLabel: { classPropertyName: "itemsLabel", publicName: "itemsLabel", isSignal: true, isRequired: false, transformFunction: null }, secondaryItemsLabel: { classPropertyName: "secondaryItemsLabel", publicName: "secondaryItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, supportingItemsLabel: { classPropertyName: "supportingItemsLabel", publicName: "supportingItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, activeRoute: { classPropertyName: "activeRoute", publicName: "activeRoute", isSignal: true, isRequired: false, transformFunction: null }, profile: { classPropertyName: "profile", publicName: "profile", isSignal: true, isRequired: false, transformFunction: null }, profileDropdown: { classPropertyName: "profileDropdown", publicName: "profileDropdown", isSignal: true, isRequired: false, transformFunction: null }, mobileOpen: { classPropertyName: "mobileOpen", publicName: "mobileOpen", isSignal: true, isRequired: false, transformFunction: null }, closeOnItemClick: { classPropertyName: "closeOnItemClick", publicName: "closeOnItemClick", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, mobileMode: { classPropertyName: "mobileMode", publicName: "mobileMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchValue: "searchValueChange", mobileOpen: "mobileOpenChange", itemClicked: "itemClicked", logoutClicked: "logoutClicked", backdropClicked: "backdropClicked", headerButtonClicked: "headerButtonClicked", profileClicked: "profileClicked", searchSubmitted: "searchSubmitted" }, host: { listeners: { "document:keydown.escape": "onEscapeKey()" }, properties: { "attr.title": "null", "attr.data-sui-open": "mobileOpen() ? \"\" : null", "attr.data-sui-mobile-mode": "mobileMode()", "attr.data-sui-collapsed": "collapsed() ? \"\" : null", "attr.data-sui-indicator": "indicatorColor()" } }, ngImport: i0, template: "<!-- Backdrop solo en m\u00F3vil: en desktop el sidebar es fijo y mobileOpen es inocuo.\n Color canon = overlay del sui-modal (Figma 480:2474): rgba(51,51,51,0.24). -->\n@if (isMobile() && showBackdrop() && mobileOpen()) {\n <div class=\"sui-sidebar-backdrop\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\n}\n\n<!-- Drawer cerrado en m\u00F3vil: aria-hidden + inert \u2192 invisible para lectores de\n pantalla y el foco no puede entrar al drawer oculto (ni quedar atrapado\n detr\u00E1s del backdrop al cerrarse). En desktop ambos quedan null. -->\n<aside\n class=\"sui-sidebar\"\n [class.sui-sidebar--open]=\"mobileOpen()\"\n [class.sui-sidebar--collapsed]=\"collapsed()\"\n role=\"navigation\"\n [attr.aria-hidden]=\"isMobile() && !mobileOpen() ? 'true' : null\"\n [attr.inert]=\"isMobile() && !mobileOpen() ? '' : null\"\n>\n <!-- \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <header class=\"sui-sidebar__header\">\n <div class=\"sui-sidebar__header-card\">\n <div class=\"sui-sidebar__brand-logo\">\n @if (brandCfg().logo) {\n <img [src]=\"brandCfg().logo\" [alt]=\"brandCfg().name\" referrerpolicy=\"no-referrer\" />\n } @else if (brandCfg().fallback) {\n <span class=\"sui-sidebar__brand-fallback\">{{ brandCfg().fallback }}</span>\n } @else {\n <sui-icon name=\"building-line\" [size]=\"20\" />\n }\n </div>\n @if (!collapsed()) {\n <div class=\"sui-sidebar__header-info\">\n <span class=\"sui-sidebar__header-name\">{{ brandCfg().name }}</span>\n @if (brandCfg().subtitle) {\n @if (brandCfg().subtitleAsBadge) {\n <sui-badge variant=\"filled\" color=\"orange\" size=\"small\">{{ brandCfg().subtitle }}</sui-badge>\n } @else {\n <span class=\"sui-sidebar__header-subtitle\">{{ brandCfg().subtitle }}</span>\n }\n }\n </div>\n @if (showHeaderButton()) {\n <button\n type=\"button\"\n class=\"sui-sidebar__compact-btn\"\n aria-label=\"Cambiar workspace\"\n (click)=\"onHeaderButtonClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"expand-up-down-line\" [size]=\"20\" />\n </button>\n }\n }\n </div>\n <div class=\"sui-sidebar__divider\" role=\"separator\"></div>\n </header>\n\n <!-- \u2500\u2500 Content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"sui-sidebar__content\">\n <!-- Search slot (Figma prop search=true) -->\n @if (!collapsed() && searchCfg(); as s) {\n <div class=\"sui-sidebar__search\">\n <sui-icon class=\"sui-sidebar__search-icon\" name=\"search-2-line\" [size]=\"20\" />\n <input\n class=\"sui-sidebar__search-input\"\n type=\"text\"\n [placeholder]=\"s.placeholder\"\n [value]=\"searchValue()\"\n (input)=\"onSearchInput($any($event.target).value)\"\n (keydown.enter)=\"onSearchSubmit()\"\n />\n @if (s.shortcut) {\n <span class=\"sui-sidebar__shortcut\">{{ s.shortcut }}</span>\n }\n </div>\n }\n\n @if (items().length > 0) {\n <div class=\"sui-sidebar__section\">\n @if (itemsLabel()) {\n <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ itemsLabel() }}</div>\n }\n <nav class=\"sui-sidebar__nav\">\n @for (item of items(); track item.value) {\n <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n }\n </nav>\n </div>\n }\n\n @if (secondaryItems().length > 0) {\n <div class=\"sui-sidebar__section sui-sidebar__section--secondary\">\n @if (secondaryItemsLabel()) {\n <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ secondaryItemsLabel() }}</div>\n }\n <nav class=\"sui-sidebar__nav\">\n @for (item of secondaryItems(); track item.value) {\n <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n }\n </nav>\n </div>\n }\n\n <!-- Supporting Content (Figma supContent) \u2014 ancla al fondo cuando aplica -->\n @if (supportingItems().length > 0) {\n <div\n class=\"sui-sidebar__section sui-sidebar__section--supporting\"\n [class.sui-sidebar__section--anchor-bottom]=\"supportingAnchorBottom()\"\n >\n @if (supportingItemsLabel()) {\n <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ supportingItemsLabel() }}</div>\n }\n <nav class=\"sui-sidebar__nav\">\n @for (item of supportingItems(); track item.value) {\n <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n }\n </nav>\n </div>\n }\n\n <!-- Feature Card slot (Figma FeatureCard=On) \u2014 promo opcional, oculto en collapsed -->\n @if (!collapsed()) {\n <div class=\"sui-sidebar__feature-card\">\n <ng-content select=\"[feature-card]\"></ng-content>\n </div>\n }\n </div>\n\n <!-- \u2500\u2500 Footer (profile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (profile(); as p) {\n <footer class=\"sui-sidebar__footer\">\n <div class=\"sui-sidebar__divider sui-sidebar__divider--top\" role=\"separator\"></div>\n <div class=\"sui-sidebar__profile\">\n <sui-avatar\n size=\"lg\"\n [src]=\"p.avatarUrl ?? null\"\n [alt]=\"p.name\"\n [initials]=\"p.initials ?? ''\"\n [status]=\"p.status ?? null\"\n color=\"slate\"\n />\n @if (!collapsed()) {\n <div class=\"sui-sidebar__profile-info\">\n <div class=\"sui-sidebar__profile-name-row\">\n <span class=\"sui-sidebar__profile-name\">{{ p.name }}</span>\n @if (p.verified) {\n <!-- Figma usa verified-fill (glyph propio SUI); el match m\u00E1s\n cercano en RemixIcon es verified-badge-fill. -->\n <sui-icon\n class=\"sui-sidebar__profile-verified\"\n name=\"verified-badge-fill\"\n [size]=\"20\"\n aria-label=\"Verificado\"\n />\n }\n </div>\n @if (p.email) {\n <span class=\"sui-sidebar__profile-email\">{{ p.email }}</span>\n }\n </div>\n @if (profileDropdown()) {\n <button\n type=\"button\"\n class=\"sui-sidebar__compact-btn sui-sidebar__compact-btn--ghost\"\n aria-label=\"Opciones de perfil\"\n (click)=\"onProfileButtonClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"arrow-right-s-line\" [size]=\"20\" />\n </button>\n }\n }\n </div>\n </footer>\n }\n</aside>\n\n<!-- \u2500\u2500 Item template (compartido entre todas las secciones) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<ng-template #itemTpl let-item>\n @if (item.route && !item.action) {\n <a\n class=\"sui-sidebar__item\"\n [class.sui-sidebar__item--danger]=\"item.variant === 'danger'\"\n [routerLink]=\"item.route\"\n routerLinkActive=\"sui-sidebar__item--active\"\n [attr.target]=\"item.external ? '_blank' : null\"\n [attr.rel]=\"item.external ? 'noopener noreferrer' : null\"\n [attr.title]=\"collapsed() ? (item.tooltip ?? item.label) : null\"\n [attr.aria-label]=\"collapsed() ? item.label : null\"\n (click)=\"onItemClick(item, $event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"sui-sidebar__item\"\n [class.sui-sidebar__item--active]=\"isItemActive(item)\"\n [class.sui-sidebar__item--danger]=\"item.variant === 'danger'\"\n [attr.title]=\"collapsed() ? (item.tooltip ?? item.label) : null\"\n [attr.aria-label]=\"collapsed() ? item.label : null\"\n (click)=\"onItemClick(item, $event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n </button>\n }\n</ng-template>\n\n<ng-template #itemBody let-item>\n @if (item.colorDot) {\n <span\n class=\"sui-sidebar__item-dot\"\n [style.background-color]=\"item.colorDot\"\n aria-hidden=\"true\"\n ></span>\n } @else if (item.icon) {\n <sui-icon class=\"sui-sidebar__item-icon\" [name]=\"item.icon\" [size]=\"20\" />\n }\n @if (!collapsed()) {\n <span class=\"sui-sidebar__item-label\">{{ item.label }}</span>\n @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {\n <sui-badge\n class=\"sui-sidebar__item-badge\"\n variant=\"filled\"\n [color]=\"item.variant === 'danger' ? 'red' : 'orange'\"\n size=\"small\"\n type=\"number\"\n >{{ item.badge }}</sui-badge>\n }\n @if (item.shortcut) {\n <span class=\"sui-sidebar__shortcut\">{{ item.shortcut }}</span>\n }\n <!-- Chevron del item activo (Figma): visibilidad controlada por CSS via\n .sui-sidebar__item--active (cubre tanto isItemActive como RouterLinkActive). -->\n <sui-icon class=\"sui-sidebar__item-chevron\" name=\"arrow-right-s-line\" [size]=\"20\" />\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:contents;font-family:var(--font-sans, \"Satoshi\", system-ui, sans-serif)}.sui-sidebar-backdrop{position:fixed;inset:0;z-index:299;background:#3333333d;animation:sui-sidebar-fade-in .2s ease-out}.sui-sidebar{display:flex;flex-direction:column;flex-shrink:0;width:272px;height:100dvh;background:var(--sui-bg-white-0, #ffffff);border-right:1px solid var(--sui-stroke-soft-200, #ebebeb);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-sidebar__header{position:relative;padding:12px;padding-top:calc(12px + env(safe-area-inset-top,0px))}.sui-sidebar__header-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--sui-radius-10, 10px);background:var(--sui-bg-white-0, #ffffff);overflow:hidden}.sui-sidebar__brand-logo{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);overflow:hidden}.sui-sidebar__brand-logo img{width:100%;height:100%;object-fit:cover;display:block}.sui-sidebar__brand-fallback{font-size:18px;line-height:1}.sui-sidebar__compact-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:1px;border-radius:var(--sui-radius-6, 6px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));color:var(--sui-text-sub-600, #5c5c5c);cursor:pointer;transition:background-color .12s ease-out,color .12s ease-out}@media(hover:hover)and (pointer:fine){.sui-sidebar__compact-btn:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}}.sui-sidebar__compact-btn:focus-visible{outline:2px solid var(--sui-state-information-base, #335cff);outline-offset:-1px}.sui-sidebar__compact-btn:active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__compact-btn--ghost{border-color:transparent;box-shadow:none;background:transparent}.sui-sidebar__header-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;align-items:flex-start}.sui-sidebar__header-name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-sidebar__header-subtitle{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-sidebar__divider{position:absolute;bottom:0;left:20px;right:20px;height:1px;background:var(--sui-stroke-soft-200, #ebebeb)}.sui-sidebar__divider--top{top:0;bottom:auto}.sui-sidebar__content{flex:1;display:flex;flex-direction:column;gap:20px;padding:20px 20px 16px;overflow-y:auto;overflow-x:hidden;min-height:0;scrollbar-width:none}.sui-sidebar__content::-webkit-scrollbar{display:none}.sui-sidebar__section{display:flex;flex-direction:column;gap:8px;flex-shrink:0}.sui-sidebar__section--secondary,.sui-sidebar__section--supporting{gap:6px}.sui-sidebar__section--anchor-bottom{margin-top:auto}.sui-sidebar__section-label{padding:4px;font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__section-label--collapsed{padding:4px 0;text-align:center}.sui-sidebar__search{display:flex;align-items:center;gap:8px;width:100%;padding:8px 8px 8px 10px;border-radius:var(--sui-radius-8, 8px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box}.sui-sidebar__search-icon{flex-shrink:0;display:inline-flex;color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__search-input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717)}.sui-sidebar__search-input::placeholder{color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__shortcut{flex-shrink:0;display:inline-flex;align-items:center;box-sizing:border-box;padding:2px 6px;border-radius:var(--sui-radius-4, 4px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3);white-space:nowrap}.sui-sidebar__nav{display:flex;flex-direction:column;gap:4px}.sui-sidebar__item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--sui-radius-8, 8px);width:100%;box-sizing:border-box;background:transparent;border:none;font-family:inherit;text-align:left;text-decoration:none;color:inherit;cursor:pointer;position:relative;transition:background-color .12s ease-out,color .12s ease-out}@media(hover:hover)and (pointer:fine){.sui-sidebar__item:hover{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item:hover .sui-sidebar__item-label,.sui-sidebar__item:hover .sui-sidebar__item-icon{color:var(--sui-text-strong-950, #171717)}}.sui-sidebar__item:focus-visible{outline:2px solid var(--_sui-sidebar-indicator, var(--sui-primary-base, #fa7319));outline-offset:-2px}.sui-sidebar__item:active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--sui-text-sub-600, #5c5c5c);transition:color .12s ease-out}.sui-sidebar__item-label{flex:1;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .12s ease-out}.sui-sidebar__item-badge{flex-shrink:0}.sui-sidebar__item-dot{flex-shrink:0;width:8px;height:8px;margin:6px;border-radius:999px}.sui-sidebar__item-chevron{flex-shrink:0;display:none;color:var(--sui-text-sub-600, #5c5c5c)}:host{--_sui-sidebar-indicator: var(--sui-primary-base, #fa7319)}:host([data-sui-indicator=information]){--_sui-sidebar-indicator: var(--sui-state-information-base, #335cff)}.sui-sidebar__item--active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item--active .sui-sidebar__item-label{color:var(--sui-text-strong-950, #171717)}.sui-sidebar__item--active .sui-sidebar__item-icon{color:var(--_sui-sidebar-indicator)}.sui-sidebar__item--active .sui-sidebar__item-chevron{display:inline-flex;color:var(--sui-text-sub-600, #5c5c5c)}.sui-sidebar__item--active:before{content:\"\";position:absolute;left:-20px;top:50%;transform:translateY(-50%);width:4px;height:20px;background:var(--_sui-sidebar-indicator);border-radius:0 4px 4px 0}@media(hover:hover)and (pointer:fine){.sui-sidebar__item--active:hover{background:var(--sui-bg-weak-50, #f7f7f7)}}.sui-sidebar__item--danger .sui-sidebar__item-icon,.sui-sidebar__item--danger .sui-sidebar__item-label{color:var(--sui-state-error-base, #fb3748)}@media(hover:hover)and (pointer:fine){.sui-sidebar__item--danger:hover{background:var(--sui-red-alpha-10, rgba(251, 55, 72, .0980392157))}.sui-sidebar__item--danger:hover .sui-sidebar__item-icon,.sui-sidebar__item--danger:hover .sui-sidebar__item-label{color:var(--sui-state-error-base, #fb3748)}}.sui-sidebar__item--danger:active{background:var(--sui-red-alpha-16, rgba(251, 55, 72, .1607843137))}.sui-sidebar__footer{position:relative;padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}.sui-sidebar__profile{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--sui-radius-10, 10px);overflow:hidden}.sui-sidebar__profile-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;height:40px;justify-content:center}.sui-sidebar__profile-name-row{display:flex;align-items:center;gap:2px;min-width:0}.sui-sidebar__profile-name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-sidebar__profile-verified{flex-shrink:0;display:inline-flex;color:var(--sui-state-verified-base, #47c2ff)}.sui-sidebar__profile-email{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-sidebar__feature-card{width:100%}.sui-sidebar__feature-card:not(:has(*)){display:none}:host([data-sui-collapsed]) .sui-sidebar{width:80px}:host([data-sui-collapsed]) .sui-sidebar__header-card,:host([data-sui-collapsed]) .sui-sidebar__profile{justify-content:center}:host([data-sui-collapsed]) .sui-sidebar__content{padding-inline:12px}:host([data-sui-collapsed]) .sui-sidebar__item{justify-content:center;width:36px;height:36px;padding:8px;margin-inline:auto}:host([data-sui-collapsed]) .sui-sidebar__item--active:before{left:-22px}@media(max-width:767px){.sui-sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;z-index:300;width:min(86vw,360px);box-sizing:border-box;padding-left:env(safe-area-inset-left,0px);transform:translate(-100%);transition:transform .24s cubic-bezier(.23,1,.32,1);border-right:none;border-radius:0 24px 24px 0;overflow:hidden;box-shadow:4px 0 24px #0e121b00}.sui-sidebar--open{transform:translate(0);box-shadow:4px 0 24px #0e121b1a}:host([data-sui-mobile-mode=sheet]) .sui-sidebar{width:calc(100vw - 40px);max-width:none}.sui-sidebar__item{gap:14px;padding:14px 12px;border-radius:var(--sui-radius-10, 10px);transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .16s cubic-bezier(.23,1,.32,1)}.sui-sidebar__item:active{transform:scale(.98);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item-icon{width:24px;height:24px}.sui-sidebar__item-label{font-size:17px;line-height:24px;letter-spacing:-.01em}}@keyframes sui-sidebar-fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiAvatar, selector: "sui-avatar", inputs: ["size", "src", "alt", "initials", "color", "status", "memojiSrc", "illustrationSrc", "icon", "companyLogoSrc", "topBadge", "bgColor"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14487
14487
|
}
|
|
14488
14488
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSidebar, decorators: [{
|
|
14489
14489
|
type: Component,
|
|
@@ -14496,7 +14496,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
14496
14496
|
'[attr.data-sui-indicator]': 'indicatorColor()',
|
|
14497
14497
|
/* A11y drawer: Escape cierra el drawer móvil (no-op en desktop). */
|
|
14498
14498
|
'(document:keydown.escape)': 'onEscapeKey()',
|
|
14499
|
-
}, template: "<!-- Backdrop solo en m\u00F3vil: en desktop el sidebar es fijo y mobileOpen es inocuo.\n Color canon = overlay del sui-modal (Figma 480:2474): rgba(51,51,51,0.24). -->\n@if (isMobile() && showBackdrop() && mobileOpen()) {\n <div class=\"sui-sidebar-backdrop\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\n}\n\n<!-- Drawer cerrado en m\u00F3vil: aria-hidden + inert \u2192 invisible para lectores de\n pantalla y el foco no puede entrar al drawer oculto (ni quedar atrapado\n detr\u00E1s del backdrop al cerrarse). En desktop ambos quedan null. -->\n<aside\n class=\"sui-sidebar\"\n [class.sui-sidebar--open]=\"mobileOpen()\"\n [class.sui-sidebar--collapsed]=\"collapsed()\"\n role=\"navigation\"\n [attr.aria-hidden]=\"isMobile() && !mobileOpen() ? 'true' : null\"\n [attr.inert]=\"isMobile() && !mobileOpen() ? '' : null\"\n>\n <!-- \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <header class=\"sui-sidebar__header\">\n <div class=\"sui-sidebar__header-card\">\n <div class=\"sui-sidebar__brand-logo\">\n @if (brandCfg().logo) {\n <img [src]=\"brandCfg().logo\" [alt]=\"brandCfg().name\" referrerpolicy=\"no-referrer\" />\n } @else if (brandCfg().fallback) {\n <span class=\"sui-sidebar__brand-fallback\">{{ brandCfg().fallback }}</span>\n } @else {\n <sui-icon name=\"building-line\" [size]=\"20\" />\n }\n </div>\n @if (!collapsed()) {\n <div class=\"sui-sidebar__header-info\">\n <span class=\"sui-sidebar__header-name\">{{ brandCfg().name }}</span>\n @if (brandCfg().subtitle) {\n @if (brandCfg().subtitleAsBadge) {\n <sui-badge variant=\"filled\" color=\"orange\" size=\"small\">{{ brandCfg().subtitle }}</sui-badge>\n } @else {\n <span class=\"sui-sidebar__header-subtitle\">{{ brandCfg().subtitle }}</span>\n }\n }\n </div>\n @if (showHeaderButton()) {\n <button\n type=\"button\"\n class=\"sui-sidebar__compact-btn\"\n aria-label=\"Cambiar workspace\"\n (click)=\"onHeaderButtonClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"expand-up-down-line\" [size]=\"20\" />\n </button>\n }\n }\n </div>\n <div class=\"sui-sidebar__divider\" role=\"separator\"></div>\n </header>\n\n <!-- \u2500\u2500 Content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"sui-sidebar__content\">\n <!-- Search slot (Figma prop search=true) -->\n @if (!collapsed() && searchCfg(); as s) {\n <div class=\"sui-sidebar__search\">\n <sui-icon class=\"sui-sidebar__search-icon\" name=\"search-2-line\" [size]=\"20\" />\n <input\n class=\"sui-sidebar__search-input\"\n type=\"text\"\n [placeholder]=\"s.placeholder\"\n [value]=\"searchValue()\"\n (input)=\"onSearchInput($any($event.target).value)\"\n (keydown.enter)=\"onSearchSubmit()\"\n />\n @if (s.shortcut) {\n <span class=\"sui-sidebar__shortcut\">{{ s.shortcut }}</span>\n }\n </div>\n }\n\n @if (items().length > 0) {\n <div class=\"sui-sidebar__section\">\n @if (itemsLabel()) {\n <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ itemsLabel() }}</div>\n }\n <nav class=\"sui-sidebar__nav\">\n @for (item of items(); track item.value) {\n <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n }\n </nav>\n </div>\n }\n\n @if (secondaryItems().length > 0) {\n <div class=\"sui-sidebar__section sui-sidebar__section--secondary\">\n @if (secondaryItemsLabel()) {\n <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ secondaryItemsLabel() }}</div>\n }\n <nav class=\"sui-sidebar__nav\">\n @for (item of secondaryItems(); track item.value) {\n <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n }\n </nav>\n </div>\n }\n\n <!-- Supporting Content (Figma supContent) \u2014 ancla al fondo cuando aplica -->\n @if (supportingItems().length > 0) {\n <div\n class=\"sui-sidebar__section sui-sidebar__section--supporting\"\n [class.sui-sidebar__section--anchor-bottom]=\"supportingAnchorBottom()\"\n >\n @if (supportingItemsLabel()) {\n <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ supportingItemsLabel() }}</div>\n }\n <nav class=\"sui-sidebar__nav\">\n @for (item of supportingItems(); track item.value) {\n <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n }\n </nav>\n </div>\n }\n\n <!-- Feature Card slot (Figma FeatureCard=On) \u2014 promo opcional, oculto en collapsed -->\n @if (!collapsed()) {\n <div class=\"sui-sidebar__feature-card\">\n <ng-content select=\"[feature-card]\"></ng-content>\n </div>\n }\n </div>\n\n <!-- \u2500\u2500 Footer (profile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (profile(); as p) {\n <footer class=\"sui-sidebar__footer\">\n <div class=\"sui-sidebar__divider sui-sidebar__divider--top\" role=\"separator\"></div>\n <div class=\"sui-sidebar__profile\">\n <sui-avatar\n size=\"lg\"\n [src]=\"p.avatarUrl ?? null\"\n [alt]=\"p.name\"\n [initials]=\"p.initials ?? ''\"\n [status]=\"p.status ?? null\"\n color=\"slate\"\n />\n @if (!collapsed()) {\n <div class=\"sui-sidebar__profile-info\">\n <div class=\"sui-sidebar__profile-name-row\">\n <span class=\"sui-sidebar__profile-name\">{{ p.name }}</span>\n @if (p.verified) {\n <!-- Figma usa verified-fill (glyph propio SUI); el match m\u00E1s\n cercano en RemixIcon es verified-badge-fill. -->\n <sui-icon\n class=\"sui-sidebar__profile-verified\"\n name=\"verified-badge-fill\"\n [size]=\"20\"\n aria-label=\"Verificado\"\n />\n }\n </div>\n @if (p.email) {\n <span class=\"sui-sidebar__profile-email\">{{ p.email }}</span>\n }\n </div>\n @if (profileDropdown()) {\n <button\n type=\"button\"\n class=\"sui-sidebar__compact-btn sui-sidebar__compact-btn--ghost\"\n aria-label=\"Opciones de perfil\"\n (click)=\"onProfileButtonClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"arrow-right-s-line\" [size]=\"20\" />\n </button>\n }\n }\n </div>\n </footer>\n }\n</aside>\n\n<!-- \u2500\u2500 Item template (compartido entre todas las secciones) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<ng-template #itemTpl let-item>\n @if (item.route && !item.action) {\n <a\n class=\"sui-sidebar__item\"\n [class.sui-sidebar__item--danger]=\"item.variant === 'danger'\"\n [routerLink]=\"item.route\"\n routerLinkActive=\"sui-sidebar__item--active\"\n [attr.target]=\"item.external ? '_blank' : null\"\n [attr.rel]=\"item.external ? 'noopener noreferrer' : null\"\n [attr.title]=\"collapsed() ? (item.tooltip ?? item.label) : null\"\n [attr.aria-label]=\"collapsed() ? item.label : null\"\n (click)=\"onItemClick(item, $event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"sui-sidebar__item\"\n [class.sui-sidebar__item--active]=\"isItemActive(item)\"\n [class.sui-sidebar__item--danger]=\"item.variant === 'danger'\"\n [attr.title]=\"collapsed() ? (item.tooltip ?? item.label) : null\"\n [attr.aria-label]=\"collapsed() ? item.label : null\"\n (click)=\"onItemClick(item, $event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n </button>\n }\n</ng-template>\n\n<ng-template #itemBody let-item>\n @if (item.colorDot) {\n <span\n class=\"sui-sidebar__item-dot\"\n [style.background-color]=\"item.colorDot\"\n aria-hidden=\"true\"\n ></span>\n } @else if (item.icon) {\n <sui-icon class=\"sui-sidebar__item-icon\" [name]=\"item.icon\" [size]=\"20\" />\n }\n @if (!collapsed()) {\n <span class=\"sui-sidebar__item-label\">{{ item.label }}</span>\n @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {\n <sui-badge\n class=\"sui-sidebar__item-badge\"\n variant=\"filled\"\n [color]=\"item.variant === 'danger' ? 'red' : 'orange'\"\n size=\"small\"\n type=\"number\"\n >{{ item.badge }}</sui-badge>\n }\n @if (item.shortcut) {\n <span class=\"sui-sidebar__shortcut\">{{ item.shortcut }}</span>\n }\n <!-- Chevron del item activo (Figma): visibilidad controlada por CSS via\n .sui-sidebar__item--active (cubre tanto isItemActive como RouterLinkActive). -->\n <sui-icon class=\"sui-sidebar__item-chevron\" name=\"arrow-right-s-line\" [size]=\"20\" />\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:contents;font-family:var(--font-sans, \"Satoshi\", system-ui, sans-serif)}.sui-sidebar-backdrop{position:fixed;inset:0;z-index:299;background:#3333333d;animation:sui-sidebar-fade-in .2s ease-out}.sui-sidebar{display:flex;flex-direction:column;flex-shrink:0;width:272px;height:100dvh;background:var(--sui-bg-white-0, #ffffff);border-right:1px solid var(--sui-stroke-soft-200, #ebebeb);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-sidebar__header{position:relative;padding:12px;padding-top:calc(12px + env(safe-area-inset-top,0px))}.sui-sidebar__header-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--sui-radius-10, 10px);background:var(--sui-bg-white-0, #ffffff);overflow:hidden}.sui-sidebar__brand-logo{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);overflow:hidden}.sui-sidebar__brand-logo img{width:100%;height:100%;object-fit:cover;display:block}.sui-sidebar__brand-fallback{font-size:18px;line-height:1}.sui-sidebar__compact-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:1px;border-radius:var(--sui-radius-6, 6px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));color:var(--sui-text-sub-600, #5c5c5c);cursor:pointer;transition:background-color .12s ease-out,color .12s ease-out}@media(hover:hover)and (pointer:fine){.sui-sidebar__compact-btn:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}}.sui-sidebar__compact-btn:focus-visible{outline:2px solid var(--sui-state-information-base, #335cff);outline-offset:-1px}.sui-sidebar__compact-btn:active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__compact-btn--ghost{border-color:transparent;box-shadow:none;background:transparent}.sui-sidebar__header-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;align-items:flex-start}.sui-sidebar__header-name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-sidebar__header-subtitle{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-sidebar__divider{position:absolute;bottom:0;left:20px;right:20px;height:1px;background:var(--sui-stroke-soft-200, #ebebeb)}.sui-sidebar__divider--top{top:0;bottom:auto}.sui-sidebar__content{flex:1;display:flex;flex-direction:column;gap:20px;padding:20px 20px 16px;overflow-y:auto;overflow-x:hidden;min-height:0}.sui-sidebar__section{display:flex;flex-direction:column;gap:8px;flex-shrink:0}.sui-sidebar__section--secondary,.sui-sidebar__section--supporting{gap:6px}.sui-sidebar__section--anchor-bottom{margin-top:auto}.sui-sidebar__section-label{padding:4px;font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__section-label--collapsed{padding:4px 0;text-align:center}.sui-sidebar__search{display:flex;align-items:center;gap:8px;width:100%;padding:8px 8px 8px 10px;border-radius:var(--sui-radius-8, 8px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box}.sui-sidebar__search-icon{flex-shrink:0;display:inline-flex;color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__search-input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717)}.sui-sidebar__search-input::placeholder{color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__shortcut{flex-shrink:0;display:inline-flex;align-items:center;box-sizing:border-box;padding:2px 6px;border-radius:var(--sui-radius-4, 4px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3);white-space:nowrap}.sui-sidebar__nav{display:flex;flex-direction:column;gap:4px}.sui-sidebar__item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--sui-radius-8, 8px);width:100%;background:transparent;border:none;font-family:inherit;text-align:left;text-decoration:none;color:inherit;cursor:pointer;position:relative;transition:background-color .12s ease-out,color .12s ease-out}@media(hover:hover)and (pointer:fine){.sui-sidebar__item:hover{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item:hover .sui-sidebar__item-label,.sui-sidebar__item:hover .sui-sidebar__item-icon{color:var(--sui-text-strong-950, #171717)}}.sui-sidebar__item:focus-visible{outline:2px solid var(--_sui-sidebar-indicator, var(--sui-primary-base, #fa7319));outline-offset:-2px}.sui-sidebar__item:active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--sui-text-sub-600, #5c5c5c);transition:color .12s ease-out}.sui-sidebar__item-label{flex:1;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .12s ease-out}.sui-sidebar__item-badge{flex-shrink:0}.sui-sidebar__item-dot{flex-shrink:0;width:8px;height:8px;margin:6px;border-radius:999px}.sui-sidebar__item-chevron{flex-shrink:0;display:none;color:var(--sui-text-sub-600, #5c5c5c)}:host{--_sui-sidebar-indicator: var(--sui-primary-base, #fa7319)}:host([data-sui-indicator=information]){--_sui-sidebar-indicator: var(--sui-state-information-base, #335cff)}.sui-sidebar__item--active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item--active .sui-sidebar__item-label{color:var(--sui-text-strong-950, #171717)}.sui-sidebar__item--active .sui-sidebar__item-icon{color:var(--_sui-sidebar-indicator)}.sui-sidebar__item--active .sui-sidebar__item-chevron{display:inline-flex;color:var(--sui-text-sub-600, #5c5c5c)}.sui-sidebar__item--active:before{content:\"\";position:absolute;left:-20px;top:50%;transform:translateY(-50%);width:4px;height:20px;background:var(--_sui-sidebar-indicator);border-radius:0 4px 4px 0}@media(hover:hover)and (pointer:fine){.sui-sidebar__item--active:hover{background:var(--sui-bg-weak-50, #f7f7f7)}}.sui-sidebar__item--danger .sui-sidebar__item-icon,.sui-sidebar__item--danger .sui-sidebar__item-label{color:var(--sui-state-error-base, #fb3748)}@media(hover:hover)and (pointer:fine){.sui-sidebar__item--danger:hover{background:var(--sui-red-alpha-10, rgba(251, 55, 72, .0980392157))}.sui-sidebar__item--danger:hover .sui-sidebar__item-icon,.sui-sidebar__item--danger:hover .sui-sidebar__item-label{color:var(--sui-state-error-base, #fb3748)}}.sui-sidebar__item--danger:active{background:var(--sui-red-alpha-16, rgba(251, 55, 72, .1607843137))}.sui-sidebar__footer{position:relative;padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}.sui-sidebar__profile{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--sui-radius-10, 10px);overflow:hidden}.sui-sidebar__profile-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;height:40px;justify-content:center}.sui-sidebar__profile-name-row{display:flex;align-items:center;gap:2px;min-width:0}.sui-sidebar__profile-name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-sidebar__profile-verified{flex-shrink:0;display:inline-flex;color:var(--sui-state-verified-base, #47c2ff)}.sui-sidebar__profile-email{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-sidebar__feature-card{width:100%}.sui-sidebar__feature-card:not(:has(*)){display:none}:host([data-sui-collapsed]) .sui-sidebar{width:80px}:host([data-sui-collapsed]) .sui-sidebar__header-card,:host([data-sui-collapsed]) .sui-sidebar__profile{justify-content:center}:host([data-sui-collapsed]) .sui-sidebar__content{padding-inline:12px}:host([data-sui-collapsed]) .sui-sidebar__item{justify-content:center;padding:8px}:host([data-sui-collapsed]) .sui-sidebar__item--active:before{left:-12px}@media(max-width:767px){.sui-sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;z-index:300;width:min(86vw,360px);box-sizing:border-box;padding-left:env(safe-area-inset-left,0px);transform:translate(-100%);transition:transform .24s cubic-bezier(.23,1,.32,1);border-right:none;border-radius:0 24px 24px 0;overflow:hidden;box-shadow:4px 0 24px #0e121b00}.sui-sidebar--open{transform:translate(0);box-shadow:4px 0 24px #0e121b1a}:host([data-sui-mobile-mode=sheet]) .sui-sidebar{width:calc(100vw - 40px);max-width:none}.sui-sidebar__item{gap:14px;padding:14px 12px;border-radius:var(--sui-radius-10, 10px);transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .16s cubic-bezier(.23,1,.32,1)}.sui-sidebar__item:active{transform:scale(.98);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item-icon{width:24px;height:24px}.sui-sidebar__item-label{font-size:17px;line-height:24px;letter-spacing:-.01em}}@keyframes sui-sidebar-fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
14499
|
+
}, template: "<!-- Backdrop solo en m\u00F3vil: en desktop el sidebar es fijo y mobileOpen es inocuo.\n Color canon = overlay del sui-modal (Figma 480:2474): rgba(51,51,51,0.24). -->\n@if (isMobile() && showBackdrop() && mobileOpen()) {\n <div class=\"sui-sidebar-backdrop\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\n}\n\n<!-- Drawer cerrado en m\u00F3vil: aria-hidden + inert \u2192 invisible para lectores de\n pantalla y el foco no puede entrar al drawer oculto (ni quedar atrapado\n detr\u00E1s del backdrop al cerrarse). En desktop ambos quedan null. -->\n<aside\n class=\"sui-sidebar\"\n [class.sui-sidebar--open]=\"mobileOpen()\"\n [class.sui-sidebar--collapsed]=\"collapsed()\"\n role=\"navigation\"\n [attr.aria-hidden]=\"isMobile() && !mobileOpen() ? 'true' : null\"\n [attr.inert]=\"isMobile() && !mobileOpen() ? '' : null\"\n>\n <!-- \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <header class=\"sui-sidebar__header\">\n <div class=\"sui-sidebar__header-card\">\n <div class=\"sui-sidebar__brand-logo\">\n @if (brandCfg().logo) {\n <img [src]=\"brandCfg().logo\" [alt]=\"brandCfg().name\" referrerpolicy=\"no-referrer\" />\n } @else if (brandCfg().fallback) {\n <span class=\"sui-sidebar__brand-fallback\">{{ brandCfg().fallback }}</span>\n } @else {\n <sui-icon name=\"building-line\" [size]=\"20\" />\n }\n </div>\n @if (!collapsed()) {\n <div class=\"sui-sidebar__header-info\">\n <span class=\"sui-sidebar__header-name\">{{ brandCfg().name }}</span>\n @if (brandCfg().subtitle) {\n @if (brandCfg().subtitleAsBadge) {\n <sui-badge variant=\"filled\" color=\"orange\" size=\"small\">{{ brandCfg().subtitle }}</sui-badge>\n } @else {\n <span class=\"sui-sidebar__header-subtitle\">{{ brandCfg().subtitle }}</span>\n }\n }\n </div>\n @if (showHeaderButton()) {\n <button\n type=\"button\"\n class=\"sui-sidebar__compact-btn\"\n aria-label=\"Cambiar workspace\"\n (click)=\"onHeaderButtonClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"expand-up-down-line\" [size]=\"20\" />\n </button>\n }\n }\n </div>\n <div class=\"sui-sidebar__divider\" role=\"separator\"></div>\n </header>\n\n <!-- \u2500\u2500 Content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"sui-sidebar__content\">\n <!-- Search slot (Figma prop search=true) -->\n @if (!collapsed() && searchCfg(); as s) {\n <div class=\"sui-sidebar__search\">\n <sui-icon class=\"sui-sidebar__search-icon\" name=\"search-2-line\" [size]=\"20\" />\n <input\n class=\"sui-sidebar__search-input\"\n type=\"text\"\n [placeholder]=\"s.placeholder\"\n [value]=\"searchValue()\"\n (input)=\"onSearchInput($any($event.target).value)\"\n (keydown.enter)=\"onSearchSubmit()\"\n />\n @if (s.shortcut) {\n <span class=\"sui-sidebar__shortcut\">{{ s.shortcut }}</span>\n }\n </div>\n }\n\n @if (items().length > 0) {\n <div class=\"sui-sidebar__section\">\n @if (itemsLabel()) {\n <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ itemsLabel() }}</div>\n }\n <nav class=\"sui-sidebar__nav\">\n @for (item of items(); track item.value) {\n <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n }\n </nav>\n </div>\n }\n\n @if (secondaryItems().length > 0) {\n <div class=\"sui-sidebar__section sui-sidebar__section--secondary\">\n @if (secondaryItemsLabel()) {\n <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ secondaryItemsLabel() }}</div>\n }\n <nav class=\"sui-sidebar__nav\">\n @for (item of secondaryItems(); track item.value) {\n <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n }\n </nav>\n </div>\n }\n\n <!-- Supporting Content (Figma supContent) \u2014 ancla al fondo cuando aplica -->\n @if (supportingItems().length > 0) {\n <div\n class=\"sui-sidebar__section sui-sidebar__section--supporting\"\n [class.sui-sidebar__section--anchor-bottom]=\"supportingAnchorBottom()\"\n >\n @if (supportingItemsLabel()) {\n <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ supportingItemsLabel() }}</div>\n }\n <nav class=\"sui-sidebar__nav\">\n @for (item of supportingItems(); track item.value) {\n <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n }\n </nav>\n </div>\n }\n\n <!-- Feature Card slot (Figma FeatureCard=On) \u2014 promo opcional, oculto en collapsed -->\n @if (!collapsed()) {\n <div class=\"sui-sidebar__feature-card\">\n <ng-content select=\"[feature-card]\"></ng-content>\n </div>\n }\n </div>\n\n <!-- \u2500\u2500 Footer (profile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (profile(); as p) {\n <footer class=\"sui-sidebar__footer\">\n <div class=\"sui-sidebar__divider sui-sidebar__divider--top\" role=\"separator\"></div>\n <div class=\"sui-sidebar__profile\">\n <sui-avatar\n size=\"lg\"\n [src]=\"p.avatarUrl ?? null\"\n [alt]=\"p.name\"\n [initials]=\"p.initials ?? ''\"\n [status]=\"p.status ?? null\"\n color=\"slate\"\n />\n @if (!collapsed()) {\n <div class=\"sui-sidebar__profile-info\">\n <div class=\"sui-sidebar__profile-name-row\">\n <span class=\"sui-sidebar__profile-name\">{{ p.name }}</span>\n @if (p.verified) {\n <!-- Figma usa verified-fill (glyph propio SUI); el match m\u00E1s\n cercano en RemixIcon es verified-badge-fill. -->\n <sui-icon\n class=\"sui-sidebar__profile-verified\"\n name=\"verified-badge-fill\"\n [size]=\"20\"\n aria-label=\"Verificado\"\n />\n }\n </div>\n @if (p.email) {\n <span class=\"sui-sidebar__profile-email\">{{ p.email }}</span>\n }\n </div>\n @if (profileDropdown()) {\n <button\n type=\"button\"\n class=\"sui-sidebar__compact-btn sui-sidebar__compact-btn--ghost\"\n aria-label=\"Opciones de perfil\"\n (click)=\"onProfileButtonClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"arrow-right-s-line\" [size]=\"20\" />\n </button>\n }\n }\n </div>\n </footer>\n }\n</aside>\n\n<!-- \u2500\u2500 Item template (compartido entre todas las secciones) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<ng-template #itemTpl let-item>\n @if (item.route && !item.action) {\n <a\n class=\"sui-sidebar__item\"\n [class.sui-sidebar__item--danger]=\"item.variant === 'danger'\"\n [routerLink]=\"item.route\"\n routerLinkActive=\"sui-sidebar__item--active\"\n [attr.target]=\"item.external ? '_blank' : null\"\n [attr.rel]=\"item.external ? 'noopener noreferrer' : null\"\n [attr.title]=\"collapsed() ? (item.tooltip ?? item.label) : null\"\n [attr.aria-label]=\"collapsed() ? item.label : null\"\n (click)=\"onItemClick(item, $event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"sui-sidebar__item\"\n [class.sui-sidebar__item--active]=\"isItemActive(item)\"\n [class.sui-sidebar__item--danger]=\"item.variant === 'danger'\"\n [attr.title]=\"collapsed() ? (item.tooltip ?? item.label) : null\"\n [attr.aria-label]=\"collapsed() ? item.label : null\"\n (click)=\"onItemClick(item, $event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n </button>\n }\n</ng-template>\n\n<ng-template #itemBody let-item>\n @if (item.colorDot) {\n <span\n class=\"sui-sidebar__item-dot\"\n [style.background-color]=\"item.colorDot\"\n aria-hidden=\"true\"\n ></span>\n } @else if (item.icon) {\n <sui-icon class=\"sui-sidebar__item-icon\" [name]=\"item.icon\" [size]=\"20\" />\n }\n @if (!collapsed()) {\n <span class=\"sui-sidebar__item-label\">{{ item.label }}</span>\n @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {\n <sui-badge\n class=\"sui-sidebar__item-badge\"\n variant=\"filled\"\n [color]=\"item.variant === 'danger' ? 'red' : 'orange'\"\n size=\"small\"\n type=\"number\"\n >{{ item.badge }}</sui-badge>\n }\n @if (item.shortcut) {\n <span class=\"sui-sidebar__shortcut\">{{ item.shortcut }}</span>\n }\n <!-- Chevron del item activo (Figma): visibilidad controlada por CSS via\n .sui-sidebar__item--active (cubre tanto isItemActive como RouterLinkActive). -->\n <sui-icon class=\"sui-sidebar__item-chevron\" name=\"arrow-right-s-line\" [size]=\"20\" />\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:contents;font-family:var(--font-sans, \"Satoshi\", system-ui, sans-serif)}.sui-sidebar-backdrop{position:fixed;inset:0;z-index:299;background:#3333333d;animation:sui-sidebar-fade-in .2s ease-out}.sui-sidebar{display:flex;flex-direction:column;flex-shrink:0;width:272px;height:100dvh;background:var(--sui-bg-white-0, #ffffff);border-right:1px solid var(--sui-stroke-soft-200, #ebebeb);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-sidebar__header{position:relative;padding:12px;padding-top:calc(12px + env(safe-area-inset-top,0px))}.sui-sidebar__header-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--sui-radius-10, 10px);background:var(--sui-bg-white-0, #ffffff);overflow:hidden}.sui-sidebar__brand-logo{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);overflow:hidden}.sui-sidebar__brand-logo img{width:100%;height:100%;object-fit:cover;display:block}.sui-sidebar__brand-fallback{font-size:18px;line-height:1}.sui-sidebar__compact-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:1px;border-radius:var(--sui-radius-6, 6px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));color:var(--sui-text-sub-600, #5c5c5c);cursor:pointer;transition:background-color .12s ease-out,color .12s ease-out}@media(hover:hover)and (pointer:fine){.sui-sidebar__compact-btn:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}}.sui-sidebar__compact-btn:focus-visible{outline:2px solid var(--sui-state-information-base, #335cff);outline-offset:-1px}.sui-sidebar__compact-btn:active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__compact-btn--ghost{border-color:transparent;box-shadow:none;background:transparent}.sui-sidebar__header-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;align-items:flex-start}.sui-sidebar__header-name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-sidebar__header-subtitle{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-sidebar__divider{position:absolute;bottom:0;left:20px;right:20px;height:1px;background:var(--sui-stroke-soft-200, #ebebeb)}.sui-sidebar__divider--top{top:0;bottom:auto}.sui-sidebar__content{flex:1;display:flex;flex-direction:column;gap:20px;padding:20px 20px 16px;overflow-y:auto;overflow-x:hidden;min-height:0;scrollbar-width:none}.sui-sidebar__content::-webkit-scrollbar{display:none}.sui-sidebar__section{display:flex;flex-direction:column;gap:8px;flex-shrink:0}.sui-sidebar__section--secondary,.sui-sidebar__section--supporting{gap:6px}.sui-sidebar__section--anchor-bottom{margin-top:auto}.sui-sidebar__section-label{padding:4px;font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__section-label--collapsed{padding:4px 0;text-align:center}.sui-sidebar__search{display:flex;align-items:center;gap:8px;width:100%;padding:8px 8px 8px 10px;border-radius:var(--sui-radius-8, 8px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box}.sui-sidebar__search-icon{flex-shrink:0;display:inline-flex;color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__search-input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717)}.sui-sidebar__search-input::placeholder{color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__shortcut{flex-shrink:0;display:inline-flex;align-items:center;box-sizing:border-box;padding:2px 6px;border-radius:var(--sui-radius-4, 4px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3);white-space:nowrap}.sui-sidebar__nav{display:flex;flex-direction:column;gap:4px}.sui-sidebar__item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--sui-radius-8, 8px);width:100%;box-sizing:border-box;background:transparent;border:none;font-family:inherit;text-align:left;text-decoration:none;color:inherit;cursor:pointer;position:relative;transition:background-color .12s ease-out,color .12s ease-out}@media(hover:hover)and (pointer:fine){.sui-sidebar__item:hover{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item:hover .sui-sidebar__item-label,.sui-sidebar__item:hover .sui-sidebar__item-icon{color:var(--sui-text-strong-950, #171717)}}.sui-sidebar__item:focus-visible{outline:2px solid var(--_sui-sidebar-indicator, var(--sui-primary-base, #fa7319));outline-offset:-2px}.sui-sidebar__item:active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--sui-text-sub-600, #5c5c5c);transition:color .12s ease-out}.sui-sidebar__item-label{flex:1;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .12s ease-out}.sui-sidebar__item-badge{flex-shrink:0}.sui-sidebar__item-dot{flex-shrink:0;width:8px;height:8px;margin:6px;border-radius:999px}.sui-sidebar__item-chevron{flex-shrink:0;display:none;color:var(--sui-text-sub-600, #5c5c5c)}:host{--_sui-sidebar-indicator: var(--sui-primary-base, #fa7319)}:host([data-sui-indicator=information]){--_sui-sidebar-indicator: var(--sui-state-information-base, #335cff)}.sui-sidebar__item--active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item--active .sui-sidebar__item-label{color:var(--sui-text-strong-950, #171717)}.sui-sidebar__item--active .sui-sidebar__item-icon{color:var(--_sui-sidebar-indicator)}.sui-sidebar__item--active .sui-sidebar__item-chevron{display:inline-flex;color:var(--sui-text-sub-600, #5c5c5c)}.sui-sidebar__item--active:before{content:\"\";position:absolute;left:-20px;top:50%;transform:translateY(-50%);width:4px;height:20px;background:var(--_sui-sidebar-indicator);border-radius:0 4px 4px 0}@media(hover:hover)and (pointer:fine){.sui-sidebar__item--active:hover{background:var(--sui-bg-weak-50, #f7f7f7)}}.sui-sidebar__item--danger .sui-sidebar__item-icon,.sui-sidebar__item--danger .sui-sidebar__item-label{color:var(--sui-state-error-base, #fb3748)}@media(hover:hover)and (pointer:fine){.sui-sidebar__item--danger:hover{background:var(--sui-red-alpha-10, rgba(251, 55, 72, .0980392157))}.sui-sidebar__item--danger:hover .sui-sidebar__item-icon,.sui-sidebar__item--danger:hover .sui-sidebar__item-label{color:var(--sui-state-error-base, #fb3748)}}.sui-sidebar__item--danger:active{background:var(--sui-red-alpha-16, rgba(251, 55, 72, .1607843137))}.sui-sidebar__footer{position:relative;padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}.sui-sidebar__profile{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--sui-radius-10, 10px);overflow:hidden}.sui-sidebar__profile-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;height:40px;justify-content:center}.sui-sidebar__profile-name-row{display:flex;align-items:center;gap:2px;min-width:0}.sui-sidebar__profile-name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-sidebar__profile-verified{flex-shrink:0;display:inline-flex;color:var(--sui-state-verified-base, #47c2ff)}.sui-sidebar__profile-email{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-sidebar__feature-card{width:100%}.sui-sidebar__feature-card:not(:has(*)){display:none}:host([data-sui-collapsed]) .sui-sidebar{width:80px}:host([data-sui-collapsed]) .sui-sidebar__header-card,:host([data-sui-collapsed]) .sui-sidebar__profile{justify-content:center}:host([data-sui-collapsed]) .sui-sidebar__content{padding-inline:12px}:host([data-sui-collapsed]) .sui-sidebar__item{justify-content:center;width:36px;height:36px;padding:8px;margin-inline:auto}:host([data-sui-collapsed]) .sui-sidebar__item--active:before{left:-22px}@media(max-width:767px){.sui-sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;z-index:300;width:min(86vw,360px);box-sizing:border-box;padding-left:env(safe-area-inset-left,0px);transform:translate(-100%);transition:transform .24s cubic-bezier(.23,1,.32,1);border-right:none;border-radius:0 24px 24px 0;overflow:hidden;box-shadow:4px 0 24px #0e121b00}.sui-sidebar--open{transform:translate(0);box-shadow:4px 0 24px #0e121b1a}:host([data-sui-mobile-mode=sheet]) .sui-sidebar{width:calc(100vw - 40px);max-width:none}.sui-sidebar__item{gap:14px;padding:14px 12px;border-radius:var(--sui-radius-10, 10px);transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .16s cubic-bezier(.23,1,.32,1)}.sui-sidebar__item:active{transform:scale(.98);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item-icon{width:24px;height:24px}.sui-sidebar__item-label{font-size:17px;line-height:24px;letter-spacing:-.01em}}@keyframes sui-sidebar-fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
14500
14500
|
}], ctorParameters: () => [], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], indicatorColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorColor", required: false }] }], brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: false }] }], showHeaderButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeaderButton", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: false }] }, { type: i0.Output, args: ["searchValueChange"] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], secondaryItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryItems", required: false }] }], supportingItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "supportingItems", required: false }] }], supportingAnchorBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "supportingAnchorBottom", required: false }] }], itemsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsLabel", required: false }] }], secondaryItemsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryItemsLabel", required: false }] }], supportingItemsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "supportingItemsLabel", required: false }] }], activeRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeRoute", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }], profileDropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileDropdown", required: false }] }], mobileOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileOpen", required: false }] }, { type: i0.Output, args: ["mobileOpenChange"] }], closeOnItemClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnItemClick", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], mobileMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileMode", required: false }] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }], logoutClicked: [{ type: i0.Output, args: ["logoutClicked"] }], backdropClicked: [{ type: i0.Output, args: ["backdropClicked"] }], headerButtonClicked: [{ type: i0.Output, args: ["headerButtonClicked"] }], profileClicked: [{ type: i0.Output, args: ["profileClicked"] }], searchSubmitted: [{ type: i0.Output, args: ["searchSubmitted"] }] } });
|
|
14501
14501
|
|
|
14502
14502
|
class SuiSlider {
|