@ajuarezso/sui-design-system 0.8.0 → 0.9.0
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.
|
@@ -14441,7 +14441,7 @@ class SuiSidebar {
|
|
|
14441
14441
|
this.searchSubmitted.emit(this.searchValue());
|
|
14442
14442
|
}
|
|
14443
14443
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14444
|
-
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 }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeOnNavigate: { classPropertyName: "closeOnNavigate", publicName: "closeOnNavigate", 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", open: "openChange", itemClicked: "itemClicked", logoutClicked: "logoutClicked", backdropClicked: "backdropClicked", headerButtonClicked: "headerButtonClicked", profileClicked: "profileClicked", searchSubmitted: "searchSubmitted" }, host: { properties: { "attr.title": "null", "attr.data-sui-open": "open() ? \"\" : null", "attr.data-sui-mobile-mode": "mobileMode()", "attr.data-sui-collapsed": "collapsed() ? \"\" : null", "attr.data-sui-indicator": "indicatorColor()" } }, ngImport: i0, template: "@if (showBackdrop() && open()) {\n <div class=\"sui-sidebar-backdrop\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\n}\n\n<aside\n class=\"sui-sidebar\"\n [class.sui-sidebar--open]=\"open()\"\n [class.sui-sidebar--collapsed]=\"collapsed()\"\n role=\"navigation\"\n [attr.aria-hidden]=\"!open() ? 'true' : 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:#0006;animation:sui-sidebar-fade-in .2s ease-out}.sui-sidebar{display:flex;flex-direction:column;flex-shrink:0;width:240px;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;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);transform:translate(-100%);transition:transform .25s 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}.sui-sidebar__item--active{background:var(--sui-orange-alpha-10, rgba(250, 115, 25, .1019607843))}.sui-sidebar__item--active .sui-sidebar__item-label,.sui-sidebar__item--active .sui-sidebar__item-icon{color:var(--sui-primary-base, #fa7319)}.sui-sidebar__item--active:before{display:none}}@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 });
|
|
14444
|
+
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 }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeOnNavigate: { classPropertyName: "closeOnNavigate", publicName: "closeOnNavigate", 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", open: "openChange", itemClicked: "itemClicked", logoutClicked: "logoutClicked", backdropClicked: "backdropClicked", headerButtonClicked: "headerButtonClicked", profileClicked: "profileClicked", searchSubmitted: "searchSubmitted" }, host: { properties: { "attr.title": "null", "attr.data-sui-open": "open() ? \"\" : null", "attr.data-sui-mobile-mode": "mobileMode()", "attr.data-sui-collapsed": "collapsed() ? \"\" : null", "attr.data-sui-indicator": "indicatorColor()" } }, ngImport: i0, template: "@if (showBackdrop() && open()) {\n <div class=\"sui-sidebar-backdrop\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\n}\n\n<aside\n class=\"sui-sidebar\"\n [class.sui-sidebar--open]=\"open()\"\n [class.sui-sidebar--collapsed]=\"collapsed()\"\n role=\"navigation\"\n [attr.aria-hidden]=\"!open() ? 'true' : 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:#0006;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);transform:translate(-100%);transition:transform .25s 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}.sui-sidebar__item--active{background:var(--sui-orange-alpha-10, rgba(250, 115, 25, .1019607843))}.sui-sidebar__item--active .sui-sidebar__item-label,.sui-sidebar__item--active .sui-sidebar__item-icon{color:var(--sui-primary-base, #fa7319)}.sui-sidebar__item--active:before{display:none}}@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 });
|
|
14445
14445
|
}
|
|
14446
14446
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSidebar, decorators: [{
|
|
14447
14447
|
type: Component,
|
|
@@ -14452,7 +14452,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
14452
14452
|
'[attr.data-sui-mobile-mode]': 'mobileMode()',
|
|
14453
14453
|
'[attr.data-sui-collapsed]': 'collapsed() ? "" : null',
|
|
14454
14454
|
'[attr.data-sui-indicator]': 'indicatorColor()',
|
|
14455
|
-
}, template: "@if (showBackdrop() && open()) {\n <div class=\"sui-sidebar-backdrop\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\n}\n\n<aside\n class=\"sui-sidebar\"\n [class.sui-sidebar--open]=\"open()\"\n [class.sui-sidebar--collapsed]=\"collapsed()\"\n role=\"navigation\"\n [attr.aria-hidden]=\"!open() ? 'true' : 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:#0006;animation:sui-sidebar-fade-in .2s ease-out}.sui-sidebar{display:flex;flex-direction:column;flex-shrink:0;width:240px;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;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);transform:translate(-100%);transition:transform .25s 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}.sui-sidebar__item--active{background:var(--sui-orange-alpha-10, rgba(250, 115, 25, .1019607843))}.sui-sidebar__item--active .sui-sidebar__item-label,.sui-sidebar__item--active .sui-sidebar__item-icon{color:var(--sui-primary-base, #fa7319)}.sui-sidebar__item--active:before{display:none}}@keyframes sui-sidebar-fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
14455
|
+
}, template: "@if (showBackdrop() && open()) {\n <div class=\"sui-sidebar-backdrop\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\n}\n\n<aside\n class=\"sui-sidebar\"\n [class.sui-sidebar--open]=\"open()\"\n [class.sui-sidebar--collapsed]=\"collapsed()\"\n role=\"navigation\"\n [attr.aria-hidden]=\"!open() ? 'true' : 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:#0006;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);transform:translate(-100%);transition:transform .25s 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}.sui-sidebar__item--active{background:var(--sui-orange-alpha-10, rgba(250, 115, 25, .1019607843))}.sui-sidebar__item--active .sui-sidebar__item-label,.sui-sidebar__item--active .sui-sidebar__item-icon{color:var(--sui-primary-base, #fa7319)}.sui-sidebar__item--active:before{display:none}}@keyframes sui-sidebar-fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
14456
14456
|
}], 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 }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], closeOnNavigate: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnNavigate", 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"] }] } });
|
|
14457
14457
|
|
|
14458
14458
|
class SuiSlider {
|
|
@@ -18325,11 +18325,347 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
18325
18325
|
}, template: "@for (pos of positions; track pos) {\n @if (toastsByPosition()[pos].length > 0) {\n <div\n class=\"sui-toast-stack\"\n [attr.data-sui-position]=\"pos\"\n [attr.data-expanded]=\"isExpanded(pos) ? 'true' : 'false'\"\n [style.--sui-toast-count]=\"toastsByPosition()[pos].length\"\n (mouseenter)=\"onStackEnter(pos)\"\n (mouseleave)=\"onStackLeave(pos)\"\n (touchstart)=\"onStackEnter(pos)\"\n aria-live=\"polite\"\n aria-label=\"Notificaciones\"\n >\n @for (toast of toastsByPosition()[pos]; track trackById($index, toast)) {\n <div\n #slot\n class=\"sui-toast-slot\"\n [class.sui-toast-slot--leaving]=\"isLeaving(toast.id)\"\n [class.sui-toast-slot--manual-dismiss]=\"isManuallyDismissed(toast.id)\"\n role=\"status\"\n [attr.data-toast-id]=\"toast.id\"\n [attr.data-toast-style]=\"toast.style\"\n [style.--toast-index]=\"computeVisualIndex(toast)\"\n [style.--toast-offset.px]=\"computeExpandOffset(toast)\"\n [attr.data-front]=\"computeVisualIndex(toast) === 0 ? 'true' : 'false'\"\n >\n <sui-alert\n [variant]=\"toast.variant\"\n [variantStyle]=\"toast.style\"\n size=\"large\"\n [title]=\"toast.title\"\n [description]=\"toast.description ?? null\"\n [dismissible]=\"false\"\n >\n @if (toast.action; as act) {\n <sui-link-button\n slot=\"action\"\n variant=\"modifiable\"\n size=\"medium\"\n [underline]=\"true\"\n (clicked)=\"onAction(toast)\"\n >{{ act.label }}</sui-link-button>\n }\n </sui-alert>\n @if (toast.dismissible) {\n <!-- Cierre = COMPONENTE sui-compact-button (variantStyle modifiable \u2192\n el icono hereda el currentColor que el slot wrapper setea seg\u00FAn\n [data-toast-style]), NO un <button> maqueta. El outlet SIGUE\n siendo due\u00F1o del X (dispara dismissManual con su flow de\n fade-out CSS) \u2014 solo cambia el markup del bot\u00F3n, no el\n comportamiento (timers/stacking/animaci\u00F3n intactos). -->\n <sui-compact-button\n class=\"sui-toast-slot__close\"\n icon=\"close-line\"\n variantStyle=\"modifiable\"\n size=\"medium\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"dismissManual(toast)\"\n />\n }\n </div>\n }\n </div>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-toast-stack{position:fixed;z-index:9000;pointer-events:none;max-width:360px;width:calc(100vw - 40px);min-height:90px;--toast-gap: 10px}.sui-toast-stack[data-sui-position=top-left]{top:max(20px,env(safe-area-inset-top,20px));left:20px}.sui-toast-stack[data-sui-position=top-center]{top:max(20px,env(safe-area-inset-top,20px));left:50%;transform:translate(-50%)}.sui-toast-stack[data-sui-position=top-right]{top:max(20px,env(safe-area-inset-top,20px));right:20px}.sui-toast-stack[data-sui-position=bottom-left]{bottom:max(12px,env(safe-area-inset-bottom,12px));left:20px}.sui-toast-stack[data-sui-position=bottom-center]{bottom:max(12px,env(safe-area-inset-bottom,12px));left:50%;transform:translate(-50%)}.sui-toast-stack[data-sui-position=bottom-right]{bottom:max(12px,env(safe-area-inset-bottom,12px));right:20px}@media(max-width:767px){.sui-toast-stack{max-width:none;width:auto;left:12px;right:12px;transform:none}.sui-toast-stack[data-sui-position^=top-]{top:max(12px,env(safe-area-inset-top,12px));bottom:auto;left:12px;right:12px;transform:none}.sui-toast-stack[data-sui-position^=bottom-]{bottom:max(12px,env(safe-area-inset-bottom,12px));top:auto;left:12px;right:12px;transform:none}}:host(.sui-toast-outlet--native-tab) .sui-toast-stack[data-sui-position^=bottom-]{bottom:var(--sui-toast-bottom-offset, 20px)}.sui-toast-slot{position:absolute;width:100%;pointer-events:auto;z-index:calc(100 - var(--toast-index, 0));bottom:0;--offset-y: calc(var(--toast-index, 0) * -10px);--scale: calc(1 - var(--toast-index, 0) * .05);transform:translateY(var(--offset-y)) scale(var(--scale));transform-origin:bottom center;opacity:1}.sui-toast-slot:nth-child(n+4){opacity:0;pointer-events:none}.sui-toast-slot{transition:opacity .2s ease-out,transform .5s cubic-bezier(.22,1,.36,1)}@starting-style{.sui-toast-slot{opacity:0;transform:translateY(100%) scale(.94)}}.sui-toast-slot.sui-toast-slot--leaving{opacity:0;transform:translateY(40%) scale(.9);pointer-events:none}.sui-toast-slot.sui-toast-slot--leaving[data-front=true],.sui-toast-slot.sui-toast-slot--leaving.sui-toast-slot--manual-dismiss{transform:translateY(100%) scale(1)}.sui-toast-slot>sui-alert{display:block;box-shadow:var(--sui-custom-shadow-small);border-radius:var(--sui-radius-12)}.sui-toast-slot__close{position:absolute;top:12px;right:12px;color:var(--sui-text-strong-950, #171717);opacity:.48;transition:opacity .15s ease-out;-webkit-tap-highlight-color:transparent}.sui-toast-slot__close:hover{opacity:.78}.sui-toast-slot[data-toast-style=filled] .sui-toast-slot__close,.sui-toast-slot[data-toast-style=stroke-dark] .sui-toast-slot__close{color:var(--sui-static-white, #ffffff);opacity:.72}.sui-toast-slot[data-toast-style=filled] .sui-toast-slot__close:hover,.sui-toast-slot[data-toast-style=stroke-dark] .sui-toast-slot__close:hover{opacity:.92}.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot--leaving{transform:translateY(-40%) scale(.9)}.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot--leaving[data-front=true],.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot--leaving.sui-toast-slot--manual-dismiss{transform:translateY(-100%) scale(1)}@starting-style{.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot{opacity:0;transform:translateY(-100%) scale(.94)}}.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot{bottom:auto;top:0;--offset-y: calc(var(--toast-index, 0) * 10px);transform-origin:top center}.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot[data-front=true]{animation-name:sui-toast-enter-top}.sui-toast-stack[data-sui-position^=bottom-]:hover .sui-toast-slot,.sui-toast-stack[data-sui-position^=bottom-][data-expanded=true] .sui-toast-slot{--offset-y: calc(var(--toast-offset, 0px) * -1);--scale: 1;opacity:1}.sui-toast-stack[data-sui-position^=top-]:hover .sui-toast-slot,.sui-toast-stack[data-sui-position^=top-][data-expanded=true] .sui-toast-slot{--offset-y: var(--toast-offset, 0px);--scale: 1;opacity:1}@media(prefers-reduced-motion:reduce){.sui-toast-slot{transition:none}}\n"] }]
|
|
18326
18326
|
}], propDecorators: { slotRefs: [{ type: i0.ViewChildren, args: ['slot', { isSignal: true }] }] } });
|
|
18327
18327
|
|
|
18328
|
+
/**
|
|
18329
|
+
* SUI Topbar Button — SUI Design System 2.0
|
|
18330
|
+
*
|
|
18331
|
+
* Figma file: 8p1k72aKKvzJV4XcvPS4VO
|
|
18332
|
+
* Component: Topbar Item Button [Topbar] [1.0] — set 3814:25156
|
|
18333
|
+
* - State=Default → 3814:25157 (bg white-0, icon sub-600)
|
|
18334
|
+
* - State=Hover → 3814:25164 (bg weak-50)
|
|
18335
|
+
* - State=Active → 3814:25171 (bg weak-50, icon primary-base)
|
|
18336
|
+
*
|
|
18337
|
+
* EXACT (pulled via get_design_context + get_variable_defs, 2026-07-23):
|
|
18338
|
+
* - 40×40: padding 10 + icon 20×20, radius-10.
|
|
18339
|
+
* - Icon color: sub-600 (#5c5c5c); active → accent (Figma bindea
|
|
18340
|
+
* primary-base #335cff → remap naranja --sui-primary-base, igual que
|
|
18341
|
+
* sui-topbar-item; azul opt-in via accent='information').
|
|
18342
|
+
* - Notification dot (Figma notification=true): 4×4 state/error-base
|
|
18343
|
+
* (#fb3748) en top 12 / right 12, con ring blanco (el asset del Ellipse
|
|
18344
|
+
* en Figma expande ±100% = stroke de separación sobre el icono).
|
|
18345
|
+
* - Default bg white-0 → transparent aquí (superficie del topbar).
|
|
18346
|
+
*
|
|
18347
|
+
* NO es un sui-compact-button: tamaño (40 vs 24), radius (10 vs 6) y estados
|
|
18348
|
+
* (weak-50 + accent) son propios del set [Topbar].
|
|
18349
|
+
*
|
|
18350
|
+
* Usage:
|
|
18351
|
+
* <sui-topbar-button icon="flashlight-line" ariaLabel="Acciones rápidas" />
|
|
18352
|
+
* <sui-topbar-button icon="notification-3-line" ariaLabel="Notificaciones" [dot]="true" />
|
|
18353
|
+
*/
|
|
18354
|
+
class SuiTopbarButton {
|
|
18355
|
+
/** RemixIcon 20×20 (ej. 'flashlight-line', 'notification-3-line'). */
|
|
18356
|
+
icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
18357
|
+
/** aria-label del botón (icon-only ⇒ obligatorio, patrón sui-compact-button). */
|
|
18358
|
+
ariaLabel = input.required(...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
18359
|
+
/** Notification dot rojo top-right (Figma notification=true). */
|
|
18360
|
+
dot = input(false, ...(ngDevMode ? [{ debugName: "dot" }] : /* istanbul ignore next */ []));
|
|
18361
|
+
/** Estado activo (Figma State=Active). */
|
|
18362
|
+
active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
|
|
18363
|
+
/** Color del icono activo — ver REMAP en sui-topbar-item. */
|
|
18364
|
+
accent = input('brand', ...(ngDevMode ? [{ debugName: "accent" }] : /* istanbul ignore next */ []));
|
|
18365
|
+
clicked = output();
|
|
18366
|
+
onClick() {
|
|
18367
|
+
this.clicked.emit();
|
|
18368
|
+
}
|
|
18369
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTopbarButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
18370
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTopbarButton, isStandalone: true, selector: "sui-topbar-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "attr.data-sui-active": "active() ? \"\" : null", "attr.data-sui-accent": "accent()" } }, ngImport: i0, template: "<button\n type=\"button\"\n class=\"sui-topbar-button__el\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-pressed]=\"active() ? 'true' : null\"\n (click)=\"onClick()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n>\n <sui-icon class=\"sui-topbar-button__icon\" [name]=\"icon()\" [size]=\"20\" />\n @if (dot()) {\n <span class=\"sui-topbar-button__dot\" aria-hidden=\"true\"></span>\n }\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;flex-shrink:0}.sui-topbar-button__el{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:10px;border:none;border-radius:var(--sui-radius-10, 10px);background:transparent;cursor:pointer;box-sizing:border-box;transition:background-color .2s ease;-webkit-tap-highlight-color:transparent}.sui-topbar-button__el:hover{background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-active]) .sui-topbar-button__el{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-topbar-button__icon{display:inline-flex;color:var(--sui-text-sub-600, #5c5c5c);transition:color .2s ease}:host([data-sui-active][data-sui-accent=brand]) .sui-topbar-button__icon{color:var(--sui-primary-base, #fa7319)}:host([data-sui-active][data-sui-accent=information]) .sui-topbar-button__icon{color:var(--sui-state-information-base, #335cff)}.sui-topbar-button__dot{position:absolute;top:12px;right:12px;width:4px;height:4px;border-radius:var(--sui-radius-full, 999px);background:var(--sui-state-error-base, #fb3748);box-shadow:0 0 0 2px var(--sui-bg-white-0, #ffffff)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
18371
|
+
}
|
|
18372
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTopbarButton, decorators: [{
|
|
18373
|
+
type: Component,
|
|
18374
|
+
args: [{ selector: 'sui-topbar-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiIcon], host: {
|
|
18375
|
+
'[attr.data-sui-active]': 'active() ? "" : null',
|
|
18376
|
+
'[attr.data-sui-accent]': 'accent()',
|
|
18377
|
+
}, template: "<button\n type=\"button\"\n class=\"sui-topbar-button__el\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-pressed]=\"active() ? 'true' : null\"\n (click)=\"onClick()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n>\n <sui-icon class=\"sui-topbar-button__icon\" [name]=\"icon()\" [size]=\"20\" />\n @if (dot()) {\n <span class=\"sui-topbar-button__dot\" aria-hidden=\"true\"></span>\n }\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;flex-shrink:0}.sui-topbar-button__el{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:10px;border:none;border-radius:var(--sui-radius-10, 10px);background:transparent;cursor:pointer;box-sizing:border-box;transition:background-color .2s ease;-webkit-tap-highlight-color:transparent}.sui-topbar-button__el:hover{background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-active]) .sui-topbar-button__el{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-topbar-button__icon{display:inline-flex;color:var(--sui-text-sub-600, #5c5c5c);transition:color .2s ease}:host([data-sui-active][data-sui-accent=brand]) .sui-topbar-button__icon{color:var(--sui-primary-base, #fa7319)}:host([data-sui-active][data-sui-accent=information]) .sui-topbar-button__icon{color:var(--sui-state-information-base, #335cff)}.sui-topbar-button__dot{position:absolute;top:12px;right:12px;width:4px;height:4px;border-radius:var(--sui-radius-full, 999px);background:var(--sui-state-error-base, #fb3748);box-shadow:0 0 0 2px var(--sui-bg-white-0, #ffffff)}\n"] }]
|
|
18378
|
+
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], accent: [{ type: i0.Input, args: [{ isSignal: true, alias: "accent", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
18379
|
+
|
|
18380
|
+
/**
|
|
18381
|
+
* SUI Topbar Item — SUI Design System 2.0
|
|
18382
|
+
*
|
|
18383
|
+
* Figma file: 8p1k72aKKvzJV4XcvPS4VO
|
|
18384
|
+
* Component: Topbar Items [Topbar] [1.0] — set 3802:24588
|
|
18385
|
+
* - State=Default → 3802:24589 (bg white-0, label sub-600)
|
|
18386
|
+
* - State=Hover → 3802:24605 (bg weak-50, label sub-600)
|
|
18387
|
+
* - State=Active → 3802:24621 (bg weak-50, label strong-950, icon primary-base)
|
|
18388
|
+
*
|
|
18389
|
+
* EXACT (pulled via get_design_context + get_variable_defs, 2026-07-23):
|
|
18390
|
+
* - Container: flex items-center, gap 8, radius-8.
|
|
18391
|
+
* Padding: py 8; sin leftIcon → pl 12; con leftIcon → pl 8; con rightIcon
|
|
18392
|
+
* (chevron) → pr 8; sin rightIcon → pr 12.
|
|
18393
|
+
* - Label: Inter Medium 14/20, letter-spacing -0.084px, sub-600 (#5c5c5c);
|
|
18394
|
+
* active → strong-950 (#171717). Gap label↔badge = 4.
|
|
18395
|
+
* - Left/right icon: 20×20, color sub-600; active → accent.
|
|
18396
|
+
* - Hover / Active bg: weak-50 (#f7f7f7). Default bg: white-0 — aquí
|
|
18397
|
+
* transparent (el topbar padre ya es white-0; transparent lo hace reusable
|
|
18398
|
+
* sobre cualquier superficie clara sin cambiar el render de Figma).
|
|
18399
|
+
* - Badge "NEW" (Figma Badge [1.1] warning/light): se compone con <sui-badge>
|
|
18400
|
+
* (defaults orange/light/small). Notification count (Figma "2" rojo):
|
|
18401
|
+
* <sui-badge type="number" variant="filled" color="red">.
|
|
18402
|
+
*
|
|
18403
|
+
* REMAP DE MARCA (verificado con get_variable_defs del variant Active
|
|
18404
|
+
* 3802:24621): el color del icono activo está bound a `primary-base`
|
|
18405
|
+
* (#335cff azul en el Figma). NO es `state/information`. Por la regla de
|
|
18406
|
+
* remap del proyecto, primary → naranja --sui-primary-base (#fa7319), igual
|
|
18407
|
+
* que el indicator del sui-sidebar (DECISIONES.md §1). El azul Figma queda
|
|
18408
|
+
* opt-in vía accent='information' (--sui-state-information-base #335cff).
|
|
18409
|
+
*
|
|
18410
|
+
* API: átomo con props planas (regla sui-avatar). `href` → renderiza <a>;
|
|
18411
|
+
* sin href → <button>. El active lo decide el consumer/organism ([active]).
|
|
18412
|
+
*
|
|
18413
|
+
* Usage:
|
|
18414
|
+
* <sui-topbar-item label="Dashboard" icon="layout-grid-line" [active]="true" />
|
|
18415
|
+
* <sui-topbar-item label="Others" rightIcon="arrow-down-s-line" (clicked)="..." />
|
|
18416
|
+
* <sui-topbar-item label="Inbox" badge="NEW" [count]="2" />
|
|
18417
|
+
*/
|
|
18418
|
+
class SuiTopbarItem {
|
|
18419
|
+
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
18420
|
+
/** RemixIcon a la izquierda (Figma leftIcon, ej. 'layout-grid-line'). */
|
|
18421
|
+
icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
18422
|
+
/** RemixIcon a la derecha (Figma rightIcon, típico 'arrow-down-s-line'). */
|
|
18423
|
+
rightIcon = input(null, ...(ngDevMode ? [{ debugName: "rightIcon" }] : /* istanbul ignore next */ []));
|
|
18424
|
+
/**
|
|
18425
|
+
* Badge junto al label (Figma badge=true, "NEW"). Config presente = visible.
|
|
18426
|
+
* String shorthand = label del badge con defaults orange/light/small.
|
|
18427
|
+
*/
|
|
18428
|
+
badge = input(null, ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
|
|
18429
|
+
/** Notification count (Figma notification=true, "2" rojo). null → oculto. */
|
|
18430
|
+
count = input(null, ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
|
|
18431
|
+
/** Estado activo (Figma State=Active). */
|
|
18432
|
+
active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
|
|
18433
|
+
/**
|
|
18434
|
+
* Color del icono activo: 'brand' (default, naranja --sui-primary-base) |
|
|
18435
|
+
* 'information' (azul Figma canon #335cff). Ver REMAP en el JSDoc.
|
|
18436
|
+
*/
|
|
18437
|
+
accent = input('brand', ...(ngDevMode ? [{ debugName: "accent" }] : /* istanbul ignore next */ []));
|
|
18438
|
+
/** Con href el item renderiza <a>; sin href, <button>. */
|
|
18439
|
+
href = input(null, ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
|
|
18440
|
+
/** target del anchor (solo aplica con href). rel auto con _blank. */
|
|
18441
|
+
target = input(null, ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
|
|
18442
|
+
clicked = output();
|
|
18443
|
+
/** Badge normalizado — shorthand string renderiza idéntico al objeto. */
|
|
18444
|
+
badgeCfg = computed(() => {
|
|
18445
|
+
const b = this.badge();
|
|
18446
|
+
if (b === null || b === '')
|
|
18447
|
+
return null;
|
|
18448
|
+
const cfg = typeof b === 'string' ? { label: b } : b;
|
|
18449
|
+
return {
|
|
18450
|
+
label: cfg.label,
|
|
18451
|
+
color: cfg.color ?? 'orange',
|
|
18452
|
+
variant: cfg.variant ?? 'light',
|
|
18453
|
+
size: cfg.size ?? 'small',
|
|
18454
|
+
};
|
|
18455
|
+
}, ...(ngDevMode ? [{ debugName: "badgeCfg" }] : /* istanbul ignore next */ []));
|
|
18456
|
+
/** rel auto noopener noreferrer con target _blank (canon SuiLinkConfig). */
|
|
18457
|
+
rel = computed(() => this.target() === '_blank' ? 'noopener noreferrer' : null, ...(ngDevMode ? [{ debugName: "rel" }] : /* istanbul ignore next */ []));
|
|
18458
|
+
onClick() {
|
|
18459
|
+
this.clicked.emit();
|
|
18460
|
+
}
|
|
18461
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTopbarItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
18462
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTopbarItem, isStandalone: true, selector: "sui-topbar-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, rightIcon: { classPropertyName: "rightIcon", publicName: "rightIcon", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "attr.data-sui-active": "active() ? \"\" : null", "attr.data-sui-accent": "accent()" } }, ngImport: i0, template: "@if (href(); as h) {\n <a\n class=\"sui-topbar-item\"\n [class.sui-topbar-item--with-icon]=\"icon()\"\n [class.sui-topbar-item--with-right]=\"rightIcon()\"\n [href]=\"h\"\n [attr.target]=\"target()\"\n [attr.rel]=\"rel()\"\n [attr.aria-current]=\"active() ? 'page' : null\"\n (click)=\"onClick()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n </a>\n} @else {\n <button\n type=\"button\"\n class=\"sui-topbar-item\"\n [class.sui-topbar-item--with-icon]=\"icon()\"\n [class.sui-topbar-item--with-right]=\"rightIcon()\"\n [attr.aria-current]=\"active() ? 'page' : null\"\n (click)=\"onClick()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n </button>\n}\n\n<ng-template #body>\n @if (icon(); as ic) {\n <sui-icon class=\"sui-topbar-item__icon\" [name]=\"ic\" [size]=\"20\" />\n }\n <span class=\"sui-topbar-item__text\">\n <span class=\"sui-topbar-item__label\">{{ label() }}</span>\n @if (badgeCfg(); as b) {\n <sui-badge\n class=\"sui-topbar-item__badge\"\n [color]=\"b.color!\"\n [variant]=\"b.variant!\"\n [size]=\"b.size!\"\n >{{ b.label }}</sui-badge>\n }\n </span>\n @if (count() !== null) {\n <sui-badge\n class=\"sui-topbar-item__count\"\n type=\"number\"\n variant=\"filled\"\n color=\"red\"\n size=\"small\"\n >{{ count() }}</sui-badge>\n }\n @if (rightIcon(); as ri) {\n <sui-icon class=\"sui-topbar-item__right-icon\" [name]=\"ri\" [size]=\"20\" />\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;flex-shrink:0}.sui-topbar-item{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:none;border-radius:var(--sui-radius-8, 8px);background:transparent;cursor:pointer;text-decoration:none;box-sizing:border-box;transition:background-color .2s ease;-webkit-tap-highlight-color:transparent}.sui-topbar-item--with-icon{padding-left:8px}.sui-topbar-item--with-right{padding-right:8px}.sui-topbar-item:hover{background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-active]) .sui-topbar-item{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-topbar-item__text{display:inline-flex;align-items:center;gap:4px}.sui-topbar-item__label{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;transition:color .2s ease}:host([data-sui-active]) .sui-topbar-item__label{color:var(--sui-text-strong-950, #171717)}.sui-topbar-item__icon,.sui-topbar-item__right-icon{display:inline-flex;flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c);transition:color .2s ease}:host([data-sui-active][data-sui-accent=brand]) .sui-topbar-item__icon{color:var(--sui-primary-base, #fa7319)}:host([data-sui-active][data-sui-accent=information]) .sui-topbar-item__icon{color:var(--sui-state-information-base, #335cff)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
18463
|
+
}
|
|
18464
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTopbarItem, decorators: [{
|
|
18465
|
+
type: Component,
|
|
18466
|
+
args: [{ selector: 'sui-topbar-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, SuiIcon, SuiBadge], host: {
|
|
18467
|
+
'[attr.data-sui-active]': 'active() ? "" : null',
|
|
18468
|
+
'[attr.data-sui-accent]': 'accent()',
|
|
18469
|
+
}, template: "@if (href(); as h) {\n <a\n class=\"sui-topbar-item\"\n [class.sui-topbar-item--with-icon]=\"icon()\"\n [class.sui-topbar-item--with-right]=\"rightIcon()\"\n [href]=\"h\"\n [attr.target]=\"target()\"\n [attr.rel]=\"rel()\"\n [attr.aria-current]=\"active() ? 'page' : null\"\n (click)=\"onClick()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n </a>\n} @else {\n <button\n type=\"button\"\n class=\"sui-topbar-item\"\n [class.sui-topbar-item--with-icon]=\"icon()\"\n [class.sui-topbar-item--with-right]=\"rightIcon()\"\n [attr.aria-current]=\"active() ? 'page' : null\"\n (click)=\"onClick()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n </button>\n}\n\n<ng-template #body>\n @if (icon(); as ic) {\n <sui-icon class=\"sui-topbar-item__icon\" [name]=\"ic\" [size]=\"20\" />\n }\n <span class=\"sui-topbar-item__text\">\n <span class=\"sui-topbar-item__label\">{{ label() }}</span>\n @if (badgeCfg(); as b) {\n <sui-badge\n class=\"sui-topbar-item__badge\"\n [color]=\"b.color!\"\n [variant]=\"b.variant!\"\n [size]=\"b.size!\"\n >{{ b.label }}</sui-badge>\n }\n </span>\n @if (count() !== null) {\n <sui-badge\n class=\"sui-topbar-item__count\"\n type=\"number\"\n variant=\"filled\"\n color=\"red\"\n size=\"small\"\n >{{ count() }}</sui-badge>\n }\n @if (rightIcon(); as ri) {\n <sui-icon class=\"sui-topbar-item__right-icon\" [name]=\"ri\" [size]=\"20\" />\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;flex-shrink:0}.sui-topbar-item{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:none;border-radius:var(--sui-radius-8, 8px);background:transparent;cursor:pointer;text-decoration:none;box-sizing:border-box;transition:background-color .2s ease;-webkit-tap-highlight-color:transparent}.sui-topbar-item--with-icon{padding-left:8px}.sui-topbar-item--with-right{padding-right:8px}.sui-topbar-item:hover{background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-active]) .sui-topbar-item{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-topbar-item__text{display:inline-flex;align-items:center;gap:4px}.sui-topbar-item__label{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;transition:color .2s ease}:host([data-sui-active]) .sui-topbar-item__label{color:var(--sui-text-strong-950, #171717)}.sui-topbar-item__icon,.sui-topbar-item__right-icon{display:inline-flex;flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c);transition:color .2s ease}:host([data-sui-active][data-sui-accent=brand]) .sui-topbar-item__icon{color:var(--sui-primary-base, #fa7319)}:host([data-sui-active][data-sui-accent=information]) .sui-topbar-item__icon{color:var(--sui-state-information-base, #335cff)}\n"] }]
|
|
18470
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], rightIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightIcon", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], accent: [{ type: i0.Input, args: [{ isSignal: true, alias: "accent", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
18471
|
+
|
|
18472
|
+
/**
|
|
18473
|
+
* SUI Topbar User — SUI Design System 2.0
|
|
18474
|
+
*
|
|
18475
|
+
* Chip de usuario del topbar (avatar + nombre + chevron de dropdown).
|
|
18476
|
+
*
|
|
18477
|
+
* Figma file: 8p1k72aKKvzJV4XcvPS4VO
|
|
18478
|
+
* Component: User Profile [Topbar] [1.0] — set 3814:24667
|
|
18479
|
+
* - State=Default → 3814:24668 (bg white-0 + border soft-200, chevron down)
|
|
18480
|
+
* - State=Hover → 3814:24675 (bg weak-50 sin border, chevron down)
|
|
18481
|
+
* - State=Active → 3814:24682 (bg weak-50 sin border, chevron UP = abierto)
|
|
18482
|
+
*
|
|
18483
|
+
* EXACT (pulled via get_design_context, 2026-07-23):
|
|
18484
|
+
* - Container: flex items-center, pl 4 / pr 8 / py 4, gap 6 (bloque↔chevron),
|
|
18485
|
+
* radius-10. Default: border 1px stroke-soft-200 + bg white-0.
|
|
18486
|
+
* Hover/Active: bg weak-50, sin border (aquí border transparent para no
|
|
18487
|
+
* mover el layout 1px).
|
|
18488
|
+
* - Avatar 32×32 (sui-avatar size md).
|
|
18489
|
+
* - Gap avatar↔nombre 8; gap nombre↔verified 2.
|
|
18490
|
+
* - Nombre: Inter Medium 14/20, ls -0.084px, strong-950.
|
|
18491
|
+
* - Verified (Figma verified=true): badge 20×20 — igual que sui-sidebar se
|
|
18492
|
+
* usa RemixIcon verified-badge-fill color state-verified-base #47c2ff.
|
|
18493
|
+
* - Chevron: arrow-down-s-fill 20; open=true → arrow-up-s-fill (Figma Active).
|
|
18494
|
+
*
|
|
18495
|
+
* CRITERIO (por qué componente propio y no slot del topbar): en Figma es un
|
|
18496
|
+
* component set independiente namespaced [Topbar] con estados propios
|
|
18497
|
+
* (default/hover/open) — reusable en headers fuera del organism (igual que
|
|
18498
|
+
* el patrón sidebar↔profile). El organism sui-topbar lo compone via config.
|
|
18499
|
+
*
|
|
18500
|
+
* Usage:
|
|
18501
|
+
* <sui-topbar-user name="Sophia" [avatar]="{ initials: 'S', color: 'yellow' }" />
|
|
18502
|
+
* <sui-topbar-user name="Arthur" avatar="https://..." [verified]="true" [open]="menuOpen()" />
|
|
18503
|
+
*/
|
|
18504
|
+
class SuiTopbarUser {
|
|
18505
|
+
/** Nombre visible (Figma editName). Vacío → chip solo-avatar (Figma name=false). */
|
|
18506
|
+
name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
18507
|
+
/**
|
|
18508
|
+
* Avatar (32×32). Config presente = visible. String shorthand = src directo;
|
|
18509
|
+
* objeto = SuiAvatarConfig { src?, initials?, color? }.
|
|
18510
|
+
*/
|
|
18511
|
+
avatar = input(null, ...(ngDevMode ? [{ debugName: "avatar" }] : /* istanbul ignore next */ []));
|
|
18512
|
+
/** Verified badge junto al nombre (Figma verified=true). */
|
|
18513
|
+
verified = input(false, ...(ngDevMode ? [{ debugName: "verified" }] : /* istanbul ignore next */ []));
|
|
18514
|
+
/** Dropdown abierto (Figma State=Active): bg weak-50 + chevron up. */
|
|
18515
|
+
open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
18516
|
+
clicked = output();
|
|
18517
|
+
/** Avatar normalizado — shorthand string renderiza idéntico al objeto. */
|
|
18518
|
+
avatarCfg = computed(() => {
|
|
18519
|
+
const a = this.avatar();
|
|
18520
|
+
if (a === null)
|
|
18521
|
+
return {};
|
|
18522
|
+
return typeof a === 'string' ? { src: a } : a;
|
|
18523
|
+
}, ...(ngDevMode ? [{ debugName: "avatarCfg" }] : /* istanbul ignore next */ []));
|
|
18524
|
+
onClick() {
|
|
18525
|
+
this.clicked.emit();
|
|
18526
|
+
}
|
|
18527
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTopbarUser, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
18528
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTopbarUser, isStandalone: true, selector: "sui-topbar-user", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, verified: { classPropertyName: "verified", publicName: "verified", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "attr.data-sui-open": "open() ? \"\" : null" } }, ngImport: i0, template: "<button\n type=\"button\"\n class=\"sui-topbar-user\"\n [attr.aria-expanded]=\"open() ? 'true' : 'false'\"\n aria-haspopup=\"menu\"\n (click)=\"onClick()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n>\n <span class=\"sui-topbar-user__main\">\n <sui-avatar\n class=\"sui-topbar-user__avatar\"\n size=\"md\"\n [src]=\"avatarCfg().src ?? null\"\n [initials]=\"avatarCfg().initials ?? ''\"\n [color]=\"avatarCfg().color ?? 'slate'\"\n [alt]=\"name()\"\n />\n @if (name()) {\n <span class=\"sui-topbar-user__name-row\">\n <span class=\"sui-topbar-user__name\">{{ name() }}</span>\n @if (verified()) {\n <!-- Figma usa verified-fill (glyph propio SUI); match RemixIcon =\n verified-badge-fill (mismo criterio que sui-sidebar). -->\n <sui-icon\n class=\"sui-topbar-user__verified\"\n name=\"verified-badge-fill\"\n [size]=\"20\"\n aria-label=\"Verificado\"\n />\n }\n </span>\n }\n </span>\n <sui-icon\n class=\"sui-topbar-user__chevron\"\n [name]=\"open() ? 'arrow-up-s-fill' : 'arrow-down-s-fill'\"\n [size]=\"20\"\n />\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;flex-shrink:0}.sui-topbar-user{display:inline-flex;align-items:center;gap:6px;padding:4px 8px 4px 4px;border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-10, 10px);background:var(--sui-bg-white-0, #ffffff);cursor:pointer;box-sizing:border-box;transition:background-color .2s ease,border-color .2s ease;-webkit-tap-highlight-color:transparent}.sui-topbar-user:hover{background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent}:host([data-sui-open]) .sui-topbar-user{background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent}.sui-topbar-user__main{display:inline-flex;align-items:center;gap:8px}.sui-topbar-user__name-row{display:inline-flex;align-items:center;gap:2px}.sui-topbar-user__name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-strong-950, #171717);white-space:nowrap}.sui-topbar-user__verified{display:inline-flex;flex-shrink:0;color:var(--sui-state-verified-base, #47c2ff)}.sui-topbar-user__chevron{display:inline-flex;flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}\n"], dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
18529
|
+
}
|
|
18530
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTopbarUser, decorators: [{
|
|
18531
|
+
type: Component,
|
|
18532
|
+
args: [{ selector: 'sui-topbar-user', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiIcon, SuiAvatar], host: {
|
|
18533
|
+
'[attr.data-sui-open]': 'open() ? "" : null',
|
|
18534
|
+
}, template: "<button\n type=\"button\"\n class=\"sui-topbar-user\"\n [attr.aria-expanded]=\"open() ? 'true' : 'false'\"\n aria-haspopup=\"menu\"\n (click)=\"onClick()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n>\n <span class=\"sui-topbar-user__main\">\n <sui-avatar\n class=\"sui-topbar-user__avatar\"\n size=\"md\"\n [src]=\"avatarCfg().src ?? null\"\n [initials]=\"avatarCfg().initials ?? ''\"\n [color]=\"avatarCfg().color ?? 'slate'\"\n [alt]=\"name()\"\n />\n @if (name()) {\n <span class=\"sui-topbar-user__name-row\">\n <span class=\"sui-topbar-user__name\">{{ name() }}</span>\n @if (verified()) {\n <!-- Figma usa verified-fill (glyph propio SUI); match RemixIcon =\n verified-badge-fill (mismo criterio que sui-sidebar). -->\n <sui-icon\n class=\"sui-topbar-user__verified\"\n name=\"verified-badge-fill\"\n [size]=\"20\"\n aria-label=\"Verificado\"\n />\n }\n </span>\n }\n </span>\n <sui-icon\n class=\"sui-topbar-user__chevron\"\n [name]=\"open() ? 'arrow-up-s-fill' : 'arrow-down-s-fill'\"\n [size]=\"20\"\n />\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;flex-shrink:0}.sui-topbar-user{display:inline-flex;align-items:center;gap:6px;padding:4px 8px 4px 4px;border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-10, 10px);background:var(--sui-bg-white-0, #ffffff);cursor:pointer;box-sizing:border-box;transition:background-color .2s ease,border-color .2s ease;-webkit-tap-highlight-color:transparent}.sui-topbar-user:hover{background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent}:host([data-sui-open]) .sui-topbar-user{background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent}.sui-topbar-user__main{display:inline-flex;align-items:center;gap:8px}.sui-topbar-user__name-row{display:inline-flex;align-items:center;gap:2px}.sui-topbar-user__name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-strong-950, #171717);white-space:nowrap}.sui-topbar-user__verified{display:inline-flex;flex-shrink:0;color:var(--sui-state-verified-base, #47c2ff)}.sui-topbar-user__chevron{display:inline-flex;flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}\n"] }]
|
|
18535
|
+
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], avatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatar", required: false }] }], verified: [{ type: i0.Input, args: [{ isSignal: true, alias: "verified", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
18536
|
+
|
|
18537
|
+
/**
|
|
18538
|
+
* SUI Topbar — SUI Design System 2.0
|
|
18539
|
+
*
|
|
18540
|
+
* Barra de navegación superior: logo + nav items + search + acciones + chip
|
|
18541
|
+
* de usuario. Organism que COMPONE los átomos de la familia: sui-topbar-item,
|
|
18542
|
+
* sui-topbar-button, sui-topbar-user y sui-kbd (shortcut del search).
|
|
18543
|
+
*
|
|
18544
|
+
* Figma file: 8p1k72aKKvzJV4XcvPS4VO
|
|
18545
|
+
* Component: Topbar [Navigation] [1.1] — frame 3814:25274, 4 ejemplos:
|
|
18546
|
+
* - 3814:25221 Type=Default, HR Management (nav sin iconos, search input)
|
|
18547
|
+
* - 3814:27109 Type=With Icon, HR Management (nav con iconos, search botón)
|
|
18548
|
+
* - 3814:27468 Type=Default, Finance & Banking
|
|
18549
|
+
* - 3814:27485 Type=With Icon, Finance & Banking
|
|
18550
|
+
*
|
|
18551
|
+
* EXACT (pulled via get_design_context, 2026-07-23 — node 3814:25221):
|
|
18552
|
+
* - Container: bg white-0, border-b 1px stroke-soft-200, padding 20px 44px,
|
|
18553
|
+
* gap 16, height total 80 (20+40+20). Width del frame (1440) es del
|
|
18554
|
+
* EJEMPLO: el host es block full-width.
|
|
18555
|
+
* - Left (flex-1): logo 40×40 + gap 24 + nav (gap 4 entre items).
|
|
18556
|
+
* - Search expandido (Figma Text Input [1.1], w 232): border soft-200,
|
|
18557
|
+
* radius-10, shadow regular-shadow-x-small, pl 12 / pr 10 / py 10, gap 8,
|
|
18558
|
+
* icon search-2-line 20 soft-400, placeholder 14/20 regular soft-400,
|
|
18559
|
+
* shortcut pill = <sui-kbd> (match exacto del "Shortcut" de Figma).
|
|
18560
|
+
* - Right: gap 16 entre Actions (gap 4) y user chip.
|
|
18561
|
+
*
|
|
18562
|
+
* CRITERIOS de composición (documentados a pedido):
|
|
18563
|
+
* - Nav item / icon button / user chip = componentes propios: en Figma son
|
|
18564
|
+
* component sets independientes namespaced [Topbar] con estados propios —
|
|
18565
|
+
* reusables fuera del organism.
|
|
18566
|
+
* - Search expandido = pieza INTERNA del organism (no componente): en Figma
|
|
18567
|
+
* es una instancia de Text Input [1.1] sin estados propios del topbar; el
|
|
18568
|
+
* pill se resuelve con sui-kbd. No se ve reusable como pieza suelta.
|
|
18569
|
+
* - Logo = slot <ng-content select="[topbar-logo]"> (la marca varía por
|
|
18570
|
+
* consumer; en Figma es un logo de ejemplo Synergy/Apex).
|
|
18571
|
+
* - Navegación: los items NO usan RouterLink (el átomo encapsula su <a>/
|
|
18572
|
+
* <button> interno). El active se resuelve con [activeValue] y el consumer
|
|
18573
|
+
* navega en (itemClicked) — diferencia deliberada vs sui-sidebar.
|
|
18574
|
+
*
|
|
18575
|
+
* REMAP DE MARCA: el accent del item/botón activo está bound a primary-base
|
|
18576
|
+
* (#335cff azul en Figma) → naranja --sui-primary-base por default; azul
|
|
18577
|
+
* opt-in con accent='information' (ver sui-topbar-item).
|
|
18578
|
+
*
|
|
18579
|
+
* Usage:
|
|
18580
|
+
* <sui-topbar
|
|
18581
|
+
* [items]="items" activeValue="dashboard"
|
|
18582
|
+
* [search]="{ placeholder: 'Buscar...', shortcut: '⌘1' }"
|
|
18583
|
+
* [actions]="[{ value: 'quick', icon: 'flashlight-line' },
|
|
18584
|
+
* { value: 'notifications', icon: 'notification-3-line', dot: true }]"
|
|
18585
|
+
* [user]="{ name: 'Sophia', avatar: { initials: 'S', color: 'yellow' } }"
|
|
18586
|
+
* (itemClicked)="..." (actionClicked)="..." (userClicked)="...">
|
|
18587
|
+
* <img topbar-logo src="..." alt="Logo" />
|
|
18588
|
+
* </sui-topbar>
|
|
18589
|
+
*/
|
|
18590
|
+
class SuiTopbar {
|
|
18591
|
+
// ── Nav ─────────────────────────────────────────────────────────────────
|
|
18592
|
+
items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
18593
|
+
/** value del item activo (bg weak-50 + label strong-950 + icon accent). */
|
|
18594
|
+
activeValue = input(null, ...(ngDevMode ? [{ debugName: "activeValue" }] : /* istanbul ignore next */ []));
|
|
18595
|
+
/** Color del accent activo — 'brand' naranja (default) | 'information' azul Figma. */
|
|
18596
|
+
accent = input('brand', ...(ngDevMode ? [{ debugName: "accent" }] : /* istanbul ignore next */ []));
|
|
18597
|
+
// ── Search ──────────────────────────────────────────────────────────────
|
|
18598
|
+
/**
|
|
18599
|
+
* Search:
|
|
18600
|
+
* - false / null (default): sin search
|
|
18601
|
+
* - true: input expandido con defaults
|
|
18602
|
+
* - objeto { placeholder?, shortcut?, compact? }: configurado.
|
|
18603
|
+
* compact=true → icon button en Actions en vez del input.
|
|
18604
|
+
*/
|
|
18605
|
+
search = input(false, ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
|
|
18606
|
+
/** Valor del input de búsqueda (2-way). */
|
|
18607
|
+
searchValue = model('', ...(ngDevMode ? [{ debugName: "searchValue" }] : /* istanbul ignore next */ []));
|
|
18608
|
+
// ── Right ───────────────────────────────────────────────────────────────
|
|
18609
|
+
actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
|
|
18610
|
+
/** dot=true en la acción con este value se puede togglear directo desde actions. */
|
|
18611
|
+
user = input(null, ...(ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []));
|
|
18612
|
+
/** Estado abierto del dropdown del user chip (chevron up + bg weak-50). */
|
|
18613
|
+
userOpen = input(false, ...(ngDevMode ? [{ debugName: "userOpen" }] : /* istanbul ignore next */ []));
|
|
18614
|
+
// ── Outputs ─────────────────────────────────────────────────────────────
|
|
18615
|
+
itemClicked = output();
|
|
18616
|
+
actionClicked = output();
|
|
18617
|
+
userClicked = output();
|
|
18618
|
+
/** Click en el search compacto (icon button). */
|
|
18619
|
+
searchClicked = output();
|
|
18620
|
+
/** Enter en el input expandido — emite el valor actual. */
|
|
18621
|
+
searchSubmitted = output();
|
|
18622
|
+
/** Search normalizado: null → sin search. */
|
|
18623
|
+
searchCfg = computed(() => {
|
|
18624
|
+
const s = this.search();
|
|
18625
|
+
if (!s)
|
|
18626
|
+
return null;
|
|
18627
|
+
const cfg = s === true ? {} : s;
|
|
18628
|
+
return {
|
|
18629
|
+
placeholder: cfg.placeholder ?? 'Buscar...',
|
|
18630
|
+
shortcut: cfg.shortcut ?? null,
|
|
18631
|
+
compact: cfg.compact ?? false,
|
|
18632
|
+
};
|
|
18633
|
+
}, ...(ngDevMode ? [{ debugName: "searchCfg" }] : /* istanbul ignore next */ []));
|
|
18634
|
+
/** User normalizado — shorthand string = name. */
|
|
18635
|
+
userCfg = computed(() => {
|
|
18636
|
+
const u = this.user();
|
|
18637
|
+
if (u === null)
|
|
18638
|
+
return null;
|
|
18639
|
+
return typeof u === 'string' ? { name: u } : u;
|
|
18640
|
+
}, ...(ngDevMode ? [{ debugName: "userCfg" }] : /* istanbul ignore next */ []));
|
|
18641
|
+
onItemClick(item) {
|
|
18642
|
+
this.itemClicked.emit(item);
|
|
18643
|
+
}
|
|
18644
|
+
onActionClick(action) {
|
|
18645
|
+
this.actionClicked.emit(action);
|
|
18646
|
+
}
|
|
18647
|
+
onSearchInput(value) {
|
|
18648
|
+
this.searchValue.set(value);
|
|
18649
|
+
}
|
|
18650
|
+
onSearchSubmit() {
|
|
18651
|
+
this.searchSubmitted.emit(this.searchValue());
|
|
18652
|
+
}
|
|
18653
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTopbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
18654
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTopbar, isStandalone: true, selector: "sui-topbar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, activeValue: { classPropertyName: "activeValue", publicName: "activeValue", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", 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 }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, userOpen: { classPropertyName: "userOpen", publicName: "userOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchValue: "searchValueChange", itemClicked: "itemClicked", actionClicked: "actionClicked", userClicked: "userClicked", searchClicked: "searchClicked", searchSubmitted: "searchSubmitted" }, host: { attributes: { "role": "banner" }, properties: { "attr.data-sui-accent": "accent()" } }, ngImport: i0, template: "<!-- \u2500\u2500 Left: logo + nav \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-topbar__left\">\n <div class=\"sui-topbar__logo\">\n <ng-content select=\"[topbar-logo]\"></ng-content>\n </div>\n @if (items().length > 0) {\n <nav class=\"sui-topbar__nav\" aria-label=\"Principal\">\n @for (item of items(); track item.value) {\n <sui-topbar-item\n [label]=\"item.label\"\n [icon]=\"item.icon ?? null\"\n [rightIcon]=\"item.rightIcon ?? null\"\n [badge]=\"item.badge ?? null\"\n [count]=\"item.count ?? null\"\n [href]=\"item.href ?? null\"\n [target]=\"item.target ?? null\"\n [active]=\"activeValue() === item.value\"\n [accent]=\"accent()\"\n (clicked)=\"onItemClick(item)\"\n />\n }\n </nav>\n }\n</div>\n\n<!-- \u2500\u2500 Search expandido (Figma Type=Default, w 232) \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 (searchCfg(); as s) {\n @if (!s.compact) {\n <div class=\"sui-topbar__search\">\n <sui-icon class=\"sui-topbar__search-icon\" name=\"search-2-line\" [size]=\"20\" />\n <input\n class=\"sui-topbar__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 <sui-kbd class=\"sui-topbar__search-shortcut\">{{ s.shortcut }}</sui-kbd>\n }\n </div>\n }\n}\n\n<!-- \u2500\u2500 Right: actions + user chip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-topbar__right\">\n @if (searchCfg()?.compact || actions().length > 0) {\n <div class=\"sui-topbar__actions\">\n @if (searchCfg(); as s) {\n @if (s.compact) {\n <sui-topbar-button\n icon=\"search-2-line\"\n [ariaLabel]=\"s.placeholder\"\n [accent]=\"accent()\"\n (clicked)=\"searchClicked.emit()\"\n />\n }\n }\n @for (action of actions(); track action.value) {\n <sui-topbar-button\n [icon]=\"action.icon\"\n [ariaLabel]=\"action.ariaLabel ?? action.value\"\n [dot]=\"action.dot ?? false\"\n [accent]=\"accent()\"\n (clicked)=\"onActionClick(action)\"\n />\n }\n </div>\n }\n @if (userCfg(); as u) {\n <sui-topbar-user\n [name]=\"u.name ?? ''\"\n [avatar]=\"u.avatar ?? null\"\n [verified]=\"u.verified ?? false\"\n [open]=\"userOpen()\"\n (clicked)=\"userClicked.emit()\"\n />\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:16px;padding:20px 44px;background:var(--sui-bg-white-0, #ffffff);border-bottom:1px solid var(--sui-stroke-soft-200, #ebebeb);box-sizing:border-box}.sui-topbar__left{display:flex;align-items:center;gap:24px;flex:1 0 0;min-width:1px}.sui-topbar__logo{display:inline-flex;align-items:center;flex-shrink:0}.sui-topbar__logo ::ng-deep>img{width:40px;height:40px;border-radius:var(--sui-radius-full, 999px);object-fit:cover;display:block}.sui-topbar__nav{display:flex;align-items:flex-start;gap:4px;min-width:1px;overflow-x:auto;scrollbar-width:none}.sui-topbar__nav::-webkit-scrollbar{display:none}.sui-topbar__search{display:flex;align-items:center;gap:8px;width:232px;flex-shrink:0;padding:10px 10px 10px 12px;background:var(--sui-bg-white-0, #ffffff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-10, 10px);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box}.sui-topbar__search-icon{display:inline-flex;flex-shrink:0;color:var(--sui-text-soft-400, #a3a3a3)}.sui-topbar__search-input{flex:1 0 0;min-width:1px;border:none;outline:none;padding:0;background:transparent;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-strong-950, #171717)}.sui-topbar__search-input::placeholder{color:var(--sui-text-soft-400, #a3a3a3)}.sui-topbar__right{display:flex;align-items:center;gap:16px;flex-shrink:0}.sui-topbar__actions{display:flex;align-items:center;gap:4px}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiKbd, selector: "sui-kbd", inputs: ["variant"] }, { kind: "component", type: SuiTopbarItem, selector: "sui-topbar-item", inputs: ["label", "icon", "rightIcon", "badge", "count", "active", "accent", "href", "target"], outputs: ["clicked"] }, { kind: "component", type: SuiTopbarButton, selector: "sui-topbar-button", inputs: ["icon", "ariaLabel", "dot", "active", "accent"], outputs: ["clicked"] }, { kind: "component", type: SuiTopbarUser, selector: "sui-topbar-user", inputs: ["name", "avatar", "verified", "open"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
18655
|
+
}
|
|
18656
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTopbar, decorators: [{
|
|
18657
|
+
type: Component,
|
|
18658
|
+
args: [{ selector: 'sui-topbar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiIcon, SuiKbd, SuiTopbarItem, SuiTopbarButton, SuiTopbarUser], host: {
|
|
18659
|
+
'role': 'banner',
|
|
18660
|
+
'[attr.data-sui-accent]': 'accent()',
|
|
18661
|
+
}, template: "<!-- \u2500\u2500 Left: logo + nav \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-topbar__left\">\n <div class=\"sui-topbar__logo\">\n <ng-content select=\"[topbar-logo]\"></ng-content>\n </div>\n @if (items().length > 0) {\n <nav class=\"sui-topbar__nav\" aria-label=\"Principal\">\n @for (item of items(); track item.value) {\n <sui-topbar-item\n [label]=\"item.label\"\n [icon]=\"item.icon ?? null\"\n [rightIcon]=\"item.rightIcon ?? null\"\n [badge]=\"item.badge ?? null\"\n [count]=\"item.count ?? null\"\n [href]=\"item.href ?? null\"\n [target]=\"item.target ?? null\"\n [active]=\"activeValue() === item.value\"\n [accent]=\"accent()\"\n (clicked)=\"onItemClick(item)\"\n />\n }\n </nav>\n }\n</div>\n\n<!-- \u2500\u2500 Search expandido (Figma Type=Default, w 232) \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 (searchCfg(); as s) {\n @if (!s.compact) {\n <div class=\"sui-topbar__search\">\n <sui-icon class=\"sui-topbar__search-icon\" name=\"search-2-line\" [size]=\"20\" />\n <input\n class=\"sui-topbar__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 <sui-kbd class=\"sui-topbar__search-shortcut\">{{ s.shortcut }}</sui-kbd>\n }\n </div>\n }\n}\n\n<!-- \u2500\u2500 Right: actions + user chip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-topbar__right\">\n @if (searchCfg()?.compact || actions().length > 0) {\n <div class=\"sui-topbar__actions\">\n @if (searchCfg(); as s) {\n @if (s.compact) {\n <sui-topbar-button\n icon=\"search-2-line\"\n [ariaLabel]=\"s.placeholder\"\n [accent]=\"accent()\"\n (clicked)=\"searchClicked.emit()\"\n />\n }\n }\n @for (action of actions(); track action.value) {\n <sui-topbar-button\n [icon]=\"action.icon\"\n [ariaLabel]=\"action.ariaLabel ?? action.value\"\n [dot]=\"action.dot ?? false\"\n [accent]=\"accent()\"\n (clicked)=\"onActionClick(action)\"\n />\n }\n </div>\n }\n @if (userCfg(); as u) {\n <sui-topbar-user\n [name]=\"u.name ?? ''\"\n [avatar]=\"u.avatar ?? null\"\n [verified]=\"u.verified ?? false\"\n [open]=\"userOpen()\"\n (clicked)=\"userClicked.emit()\"\n />\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:16px;padding:20px 44px;background:var(--sui-bg-white-0, #ffffff);border-bottom:1px solid var(--sui-stroke-soft-200, #ebebeb);box-sizing:border-box}.sui-topbar__left{display:flex;align-items:center;gap:24px;flex:1 0 0;min-width:1px}.sui-topbar__logo{display:inline-flex;align-items:center;flex-shrink:0}.sui-topbar__logo ::ng-deep>img{width:40px;height:40px;border-radius:var(--sui-radius-full, 999px);object-fit:cover;display:block}.sui-topbar__nav{display:flex;align-items:flex-start;gap:4px;min-width:1px;overflow-x:auto;scrollbar-width:none}.sui-topbar__nav::-webkit-scrollbar{display:none}.sui-topbar__search{display:flex;align-items:center;gap:8px;width:232px;flex-shrink:0;padding:10px 10px 10px 12px;background:var(--sui-bg-white-0, #ffffff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-10, 10px);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box}.sui-topbar__search-icon{display:inline-flex;flex-shrink:0;color:var(--sui-text-soft-400, #a3a3a3)}.sui-topbar__search-input{flex:1 0 0;min-width:1px;border:none;outline:none;padding:0;background:transparent;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-strong-950, #171717)}.sui-topbar__search-input::placeholder{color:var(--sui-text-soft-400, #a3a3a3)}.sui-topbar__right{display:flex;align-items:center;gap:16px;flex-shrink:0}.sui-topbar__actions{display:flex;align-items:center;gap:4px}\n"] }]
|
|
18662
|
+
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], activeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeValue", required: false }] }], accent: [{ type: i0.Input, args: [{ isSignal: true, alias: "accent", 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"] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: false }] }], userOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "userOpen", required: false }] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }], actionClicked: [{ type: i0.Output, args: ["actionClicked"] }], userClicked: [{ type: i0.Output, args: ["userClicked"] }], searchClicked: [{ type: i0.Output, args: ["searchClicked"] }], searchSubmitted: [{ type: i0.Output, args: ["searchSubmitted"] }] } });
|
|
18663
|
+
|
|
18328
18664
|
/* Public API Surface of sui-design-system — generado del catálogo SUI. */
|
|
18329
18665
|
|
|
18330
18666
|
/**
|
|
18331
18667
|
* Generated bundle index. Do not edit.
|
|
18332
18668
|
*/
|
|
18333
18669
|
|
|
18334
|
-
export { DAY_LABELS_ES, DEFAULT_DURATION_PRESETS, DEFAULT_PRESETS, EMPTY_STATE_FOX_EMOJI, SUI_BRAND_LOGO_COMPANIES, SUI_CHART_LEGEND_COLORS, SUI_CHART_LEGEND_HEX, SUI_CHART_SERIES_COLORS, SUI_COLOR_DOT_COLORS, SUI_COLOR_DOT_HEX, SUI_CUSTOM_ICONS, SUI_EMOJI_MAP, SUI_FLAG_NAMES, SUI_HEX_TO_COLOR, SUI_KEY_ICON_COLORS, SUI_KEY_ICON_SIZES, SUI_NAVBAR_VISIBILITY, SUI_PASSWORD_STRENGTH_DEFAULT_CONDITIONS, SUI_PASSWORD_STRENGTH_DEFAULT_LEVEL_LABELS, SUI_PAYMENT_ICON_TYPES, SUI_PRODUCT_FALLBACK_COLORS, SUI_TAB_BAR, SuiAccordion, SuiAccordionContent, SuiActivityFeed, SuiActivityFilter, SuiAlert, SuiAppStoreBadge, SuiAvatar, SuiAvatarGroup, SuiBadge, SuiBanner, SuiBrandLogo, SuiBreadcrumbItem, SuiBreadcrumbs, SuiButton, SuiButtonGroup, SuiButtonGroupItem, SuiCard, SuiChartLegend, SuiChartLegendDot, SuiCheckbox, SuiCheckboxCard, SuiCheckboxLabel, SuiCircularProgressBar, SuiColorDot, SuiColorPicker, SuiCommandMenuFooter, SuiCommandMenuItem, SuiCommandMenuSearch, SuiCompactAvatarGroup, SuiCompactButton, SuiCompactSelect, SuiCompactSelectForInput, SuiContentCard, SuiContentDivider, SuiContentLabel, SuiCounterInput, SuiDateSelector, SuiDatepicker, SuiDayCell, SuiDayLabel, SuiDivider, SuiDrawerFooter, SuiDrawerHeader, SuiDropdownCaption, SuiDropdownItem, SuiDropdownMenu, SuiDropdownPanel, SuiDropdownSearch, SuiEmoji, SuiEmptyState, SuiFancyButton, SuiFileIcon, SuiFileUpload, SuiFileUploadCard, SuiFilterBar, SuiFilterItem, SuiFilterPanelFooter, SuiFilterPanelHeader, SuiFlag, SuiFormHint, SuiFormLabel, SuiIcon, SuiImageUpload, SuiImageUploadProfile, SuiImgRetry, SuiInlineInput, SuiInlineSelect, SuiInput, SuiIntegrationSwitch, SuiKbd, SuiKeyIcon, SuiLinkButton, SuiModal, SuiModalFooter, SuiModalHeader, SuiModalSheet, SuiNotification, SuiNotificationFooter, SuiNotificationTabMenu, SuiOtpInput, SuiPageHeader, SuiPagination, SuiPasswordStrength, SuiPaymentIcon, SuiPeriodRange, SuiPopover, SuiProductCard, SuiProgressBar, SuiProgressBarLabel, SuiRadio, SuiRadioCard, SuiRadioGroup, SuiRadioLabel, SuiRating, SuiRichEditor, SuiRichEditorItem, SuiSegmentedControl, SuiSelect, SuiSidebar, SuiSlider, SuiSocialButton, SuiStatusBadge, SuiStepper, SuiStoreCard, SuiSwitch, SuiSwitchCard, SuiSwitchLabel, SuiTabChips, SuiTabMenuHorizontal, SuiTabMenuVertical, SuiTable, SuiTableCellDirective, SuiTag, SuiTagInput, SuiTextarea, SuiTimePicker, SuiTimePickerDuration, SuiTimePickerItem, SuiTimePickerStatus, SuiToastOutlet, SuiToastService, SuiTooltip, SuiTooltipPanel, buildCalendarGrid, buildHourList, buildMinuteList, formatDateInput, formatDateShort, formatMonthYear, formatTime, isSameTime, normalizeHex, pad2, parseTime, to12h, to24h };
|
|
18670
|
+
export { DAY_LABELS_ES, DEFAULT_DURATION_PRESETS, DEFAULT_PRESETS, EMPTY_STATE_FOX_EMOJI, SUI_BRAND_LOGO_COMPANIES, SUI_CHART_LEGEND_COLORS, SUI_CHART_LEGEND_HEX, SUI_CHART_SERIES_COLORS, SUI_COLOR_DOT_COLORS, SUI_COLOR_DOT_HEX, SUI_CUSTOM_ICONS, SUI_EMOJI_MAP, SUI_FLAG_NAMES, SUI_HEX_TO_COLOR, SUI_KEY_ICON_COLORS, SUI_KEY_ICON_SIZES, SUI_NAVBAR_VISIBILITY, SUI_PASSWORD_STRENGTH_DEFAULT_CONDITIONS, SUI_PASSWORD_STRENGTH_DEFAULT_LEVEL_LABELS, SUI_PAYMENT_ICON_TYPES, SUI_PRODUCT_FALLBACK_COLORS, SUI_TAB_BAR, SuiAccordion, SuiAccordionContent, SuiActivityFeed, SuiActivityFilter, SuiAlert, SuiAppStoreBadge, SuiAvatar, SuiAvatarGroup, SuiBadge, SuiBanner, SuiBrandLogo, SuiBreadcrumbItem, SuiBreadcrumbs, SuiButton, SuiButtonGroup, SuiButtonGroupItem, SuiCard, SuiChartLegend, SuiChartLegendDot, SuiCheckbox, SuiCheckboxCard, SuiCheckboxLabel, SuiCircularProgressBar, SuiColorDot, SuiColorPicker, SuiCommandMenuFooter, SuiCommandMenuItem, SuiCommandMenuSearch, SuiCompactAvatarGroup, SuiCompactButton, SuiCompactSelect, SuiCompactSelectForInput, SuiContentCard, SuiContentDivider, SuiContentLabel, SuiCounterInput, SuiDateSelector, SuiDatepicker, SuiDayCell, SuiDayLabel, SuiDivider, SuiDrawerFooter, SuiDrawerHeader, SuiDropdownCaption, SuiDropdownItem, SuiDropdownMenu, SuiDropdownPanel, SuiDropdownSearch, SuiEmoji, SuiEmptyState, SuiFancyButton, SuiFileIcon, SuiFileUpload, SuiFileUploadCard, SuiFilterBar, SuiFilterItem, SuiFilterPanelFooter, SuiFilterPanelHeader, SuiFlag, SuiFormHint, SuiFormLabel, SuiIcon, SuiImageUpload, SuiImageUploadProfile, SuiImgRetry, SuiInlineInput, SuiInlineSelect, SuiInput, SuiIntegrationSwitch, SuiKbd, SuiKeyIcon, SuiLinkButton, SuiModal, SuiModalFooter, SuiModalHeader, SuiModalSheet, SuiNotification, SuiNotificationFooter, SuiNotificationTabMenu, SuiOtpInput, SuiPageHeader, SuiPagination, SuiPasswordStrength, SuiPaymentIcon, SuiPeriodRange, SuiPopover, SuiProductCard, SuiProgressBar, SuiProgressBarLabel, SuiRadio, SuiRadioCard, SuiRadioGroup, SuiRadioLabel, SuiRating, SuiRichEditor, SuiRichEditorItem, SuiSegmentedControl, SuiSelect, SuiSidebar, SuiSlider, SuiSocialButton, SuiStatusBadge, SuiStepper, SuiStoreCard, SuiSwitch, SuiSwitchCard, SuiSwitchLabel, SuiTabChips, SuiTabMenuHorizontal, SuiTabMenuVertical, SuiTable, SuiTableCellDirective, SuiTag, SuiTagInput, SuiTextarea, SuiTimePicker, SuiTimePickerDuration, SuiTimePickerItem, SuiTimePickerStatus, SuiToastOutlet, SuiToastService, SuiTooltip, SuiTooltipPanel, SuiTopbar, SuiTopbarButton, SuiTopbarItem, SuiTopbarUser, buildCalendarGrid, buildHourList, buildMinuteList, formatDateInput, formatDateShort, formatMonthYear, formatTime, isSameTime, normalizeHex, pad2, parseTime, to12h, to24h };
|
|
18335
18671
|
//# sourceMappingURL=ajuarezso-sui-design-system.mjs.map
|