@lesterarte/sefin-ui 0.0.30 → 0.0.31
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.
|
@@ -7,7 +7,9 @@ import { DomSanitizer } from '@angular/platform-browser';
|
|
|
7
7
|
import * as LucideIcons from 'lucide';
|
|
8
8
|
import * as i2 from '@angular/forms';
|
|
9
9
|
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
|
|
10
|
-
import { Subject } from 'rxjs';
|
|
10
|
+
import { Subject, filter } from 'rxjs';
|
|
11
|
+
import * as i1$2 from '@angular/router';
|
|
12
|
+
import { NavigationEnd, RouterModule } from '@angular/router';
|
|
11
13
|
|
|
12
14
|
/**
|
|
13
15
|
* Color design tokens as TypeScript constants
|
|
@@ -6085,6 +6087,158 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
6085
6087
|
* Table component exports
|
|
6086
6088
|
*/
|
|
6087
6089
|
|
|
6090
|
+
class SidebarComponent {
|
|
6091
|
+
router;
|
|
6092
|
+
cdr;
|
|
6093
|
+
sanitizer;
|
|
6094
|
+
/** Navigation items array */
|
|
6095
|
+
navItems = [];
|
|
6096
|
+
/** Mobile mode flag */
|
|
6097
|
+
isMobile = false;
|
|
6098
|
+
/** Sidebar open state (for mobile) */
|
|
6099
|
+
isOpen = false;
|
|
6100
|
+
/** Sidebar collapsed state (for desktop) */
|
|
6101
|
+
isCollapsed = false;
|
|
6102
|
+
/** Header title text */
|
|
6103
|
+
headerTitle = 'Admin Portal';
|
|
6104
|
+
/** Header subtitle text */
|
|
6105
|
+
headerSubtitle = 'Secretaría de Finanzas';
|
|
6106
|
+
/** Header icon name */
|
|
6107
|
+
headerIcon = 'building-2';
|
|
6108
|
+
/** Footer version text */
|
|
6109
|
+
footerVersion = 'Versión 1.0.0';
|
|
6110
|
+
/** Show footer */
|
|
6111
|
+
showFooter = true;
|
|
6112
|
+
/** Toggle collapse event */
|
|
6113
|
+
toggleCollapse = new EventEmitter();
|
|
6114
|
+
currentRoute = '';
|
|
6115
|
+
routerSubscription;
|
|
6116
|
+
primaryColor = '#55C3D8'; // Color primario de SEFIN
|
|
6117
|
+
textColor = '#383838'; // Color de texto por defecto
|
|
6118
|
+
constructor(router, cdr, sanitizer) {
|
|
6119
|
+
this.router = router;
|
|
6120
|
+
this.cdr = cdr;
|
|
6121
|
+
this.sanitizer = sanitizer;
|
|
6122
|
+
}
|
|
6123
|
+
ngOnInit() {
|
|
6124
|
+
// Track current route for active state
|
|
6125
|
+
this.routerSubscription = this.router.events
|
|
6126
|
+
.pipe(filter((event) => event instanceof NavigationEnd))
|
|
6127
|
+
.subscribe((event) => {
|
|
6128
|
+
if (event instanceof NavigationEnd) {
|
|
6129
|
+
this.currentRoute = event.urlAfterRedirects;
|
|
6130
|
+
// Auto-expand parent items if child is active
|
|
6131
|
+
this.updateExpandedStates();
|
|
6132
|
+
this.cdr.markForCheck();
|
|
6133
|
+
}
|
|
6134
|
+
});
|
|
6135
|
+
// Set initial route
|
|
6136
|
+
this.currentRoute = this.router.url;
|
|
6137
|
+
this.updateExpandedStates();
|
|
6138
|
+
this.cdr.markForCheck();
|
|
6139
|
+
}
|
|
6140
|
+
ngOnDestroy() {
|
|
6141
|
+
if (this.routerSubscription) {
|
|
6142
|
+
this.routerSubscription.unsubscribe();
|
|
6143
|
+
}
|
|
6144
|
+
}
|
|
6145
|
+
updateExpandedStates() {
|
|
6146
|
+
this.navItems.forEach((item) => {
|
|
6147
|
+
if (item.children) {
|
|
6148
|
+
item.expanded = this.hasActiveChild(item, this.currentRoute);
|
|
6149
|
+
// También expandir los hijos si tienen descendientes activos
|
|
6150
|
+
item.children.forEach((child) => {
|
|
6151
|
+
if (child.children) {
|
|
6152
|
+
child.expanded = this.hasActiveChild(child, this.currentRoute);
|
|
6153
|
+
}
|
|
6154
|
+
});
|
|
6155
|
+
}
|
|
6156
|
+
});
|
|
6157
|
+
}
|
|
6158
|
+
hasActiveChild(item, currentRoute) {
|
|
6159
|
+
if (!item.children)
|
|
6160
|
+
return false;
|
|
6161
|
+
return item.children.some((child) => {
|
|
6162
|
+
if (child.route && this.isActive(child.route))
|
|
6163
|
+
return true;
|
|
6164
|
+
return this.hasActiveChild(child, currentRoute);
|
|
6165
|
+
});
|
|
6166
|
+
}
|
|
6167
|
+
toggleExpand(item) {
|
|
6168
|
+
if (item.children && item.children.length > 0) {
|
|
6169
|
+
item.expanded = !item.expanded;
|
|
6170
|
+
this.cdr.markForCheck();
|
|
6171
|
+
}
|
|
6172
|
+
}
|
|
6173
|
+
isActive(route) {
|
|
6174
|
+
if (!route)
|
|
6175
|
+
return false;
|
|
6176
|
+
return this.currentRoute === route || this.currentRoute.startsWith(route + '/');
|
|
6177
|
+
}
|
|
6178
|
+
navigate(route) {
|
|
6179
|
+
if (route) {
|
|
6180
|
+
this.router.navigate([route]);
|
|
6181
|
+
}
|
|
6182
|
+
}
|
|
6183
|
+
hasChildren(item) {
|
|
6184
|
+
return item.children !== undefined && item.children.length > 0;
|
|
6185
|
+
}
|
|
6186
|
+
handleToggleCollapse() {
|
|
6187
|
+
this.toggleCollapse.emit();
|
|
6188
|
+
}
|
|
6189
|
+
/**
|
|
6190
|
+
* Get SVG icon as SafeHtml based on icon name
|
|
6191
|
+
*/
|
|
6192
|
+
getIconSvg(iconName, size = 24) {
|
|
6193
|
+
const icons = {
|
|
6194
|
+
'home': 'M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z M9 22V12h6v10',
|
|
6195
|
+
'building-2': 'M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18M6 12h12M6 12V8M6 12h12M12 2v20',
|
|
6196
|
+
'chevron-left': 'M15 18l-6-6 6-6',
|
|
6197
|
+
'chevron-right': 'M9 18l6-6-6-6',
|
|
6198
|
+
'chevron-down': 'M6 9l6 6 6-6',
|
|
6199
|
+
'settings': 'M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z',
|
|
6200
|
+
'bell': 'M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9',
|
|
6201
|
+
'edit': 'M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7',
|
|
6202
|
+
'check': 'M20 6L9 17l-5-5',
|
|
6203
|
+
'search': 'M21 21l-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0z',
|
|
6204
|
+
'file-text': 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6 M16 13H8 M16 17H8 M10 9H8',
|
|
6205
|
+
};
|
|
6206
|
+
const path = icons[iconName] || icons['settings'];
|
|
6207
|
+
const svg = `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${path}"></path></svg>`;
|
|
6208
|
+
return this.sanitizer.bypassSecurityTrustHtml(svg);
|
|
6209
|
+
}
|
|
6210
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SidebarComponent, deps: [{ token: i1$2.Router }, { token: i0.ChangeDetectorRef }, { token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
6211
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SidebarComponent, isStandalone: true, selector: "sefin-sidebar", inputs: { navItems: "navItems", isMobile: "isMobile", isOpen: "isOpen", isCollapsed: "isCollapsed", headerTitle: "headerTitle", headerSubtitle: "headerSubtitle", headerIcon: "headerIcon", footerVersion: "footerVersion", showFooter: "showFooter" }, outputs: { toggleCollapse: "toggleCollapse" }, ngImport: i0, template: "<aside\n class=\"sefin-sidebar\"\n [class.sefin-sidebar--mobile]=\"isMobile\"\n [class.sefin-sidebar--open]=\"isOpen\"\n [class.sefin-sidebar--collapsed]=\"isCollapsed && !isMobile\"\n>\n <div class=\"sefin-sidebar__header\">\n @if (!isCollapsed || isMobile) {\n <div class=\"sefin-sidebar__header-content\">\n <div class=\"sefin-sidebar__header-icon-container\">\n <span class=\"sefin-sidebar__header-icon\" [innerHTML]=\"getIconSvg(headerIcon, 24)\"></span>\n </div>\n <div class=\"sefin-sidebar__header-text\">\n <h1 class=\"sefin-sidebar__header-title\">{{ headerTitle }}</h1>\n <span class=\"sefin-sidebar__header-subtitle\">{{ headerSubtitle }}</span>\n </div>\n </div>\n }\n @if (!isMobile) {\n <button\n type=\"button\"\n class=\"sefin-sidebar__toggle\"\n (click)=\"handleToggleCollapse()\"\n [attr.aria-label]=\"isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'\"\n [attr.aria-expanded]=\"!isCollapsed\"\n >\n <span class=\"sefin-sidebar__toggle-icon\" [innerHTML]=\"getIconSvg(isCollapsed ? 'chevron-right' : 'chevron-left', 16)\"></span>\n </button>\n }\n </div>\n\n <nav class=\"sefin-sidebar__nav\">\n <ul class=\"sefin-sidebar__nav-list\">\n @for (item of navItems; track item.label) {\n <li class=\"sefin-sidebar__nav-item\" [class.sefin-sidebar__nav-item--has-children]=\"hasChildren(item)\">\n <!-- Parent item -->\n <button\n type=\"button\"\n class=\"sefin-sidebar__nav-link\"\n [class.sefin-sidebar__nav-link--expandable]=\"hasChildren(item)\"\n [class.sefin-sidebar__nav-link--expanded]=\"item.expanded\"\n [class.sefin-sidebar__nav-link--active]=\"hasActiveChild(item, currentRoute)\"\n [attr.aria-expanded]=\"hasChildren(item) ? item.expanded : null\"\n [attr.aria-label]=\"isCollapsed && !isMobile ? item.label : null\"\n (click)=\"hasChildren(item) ? toggleExpand(item) : navigate(item.route || '')\"\n >\n @if (item.icon) {\n <div class=\"sefin-sidebar__nav-icon-wrapper\">\n <span class=\"sefin-sidebar__nav-icon\" [innerHTML]=\"getIconSvg(item.icon, 20)\"></span>\n </div>\n }\n @if (!isCollapsed || isMobile) {\n <span class=\"sefin-sidebar__nav-label\">{{ item.label }}</span>\n @if (hasChildren(item)) {\n <div class=\"sefin-sidebar__nav-expand-icon-wrapper\" [class.sefin-sidebar__nav-expand-icon-wrapper--expanded]=\"item.expanded\">\n <span class=\"sefin-sidebar__nav-expand-icon\" [innerHTML]=\"getIconSvg('chevron-down', 16)\"></span>\n </div>\n }\n }\n </button>\n <!-- Children items -->\n @if (hasChildren(item) && item.expanded && (!isCollapsed || isMobile)) {\n <ul class=\"sefin-sidebar__nav-sub-list\">\n @for (child of item.children; track child.label) {\n <li class=\"sefin-sidebar__nav-sub-item\" [class.sefin-sidebar__nav-sub-item--has-children]=\"hasChildren(child)\">\n <!-- Level 1: Section headers (non-clickable) -->\n <div class=\"sefin-sidebar__nav-section-header\">\n <span class=\"sefin-sidebar__section-header-text\">{{ child.label }}</span>\n </div>\n <!-- Level 2: Grandchildren items (clickable with bullets) -->\n @if (hasChildren(child)) {\n <ul class=\"sefin-sidebar__nav-sub-sub-list\">\n @for (grandchild of child.children; track grandchild.label) {\n <li class=\"sefin-sidebar__nav-sub-sub-item\">\n <button\n type=\"button\"\n class=\"sefin-sidebar__nav-link sefin-sidebar__nav-link--sub-sub\"\n [class.sefin-sidebar__nav-link--active]=\"isActive(grandchild.route || '')\"\n [attr.aria-current]=\"isActive(grandchild.route || '') ? 'page' : null\"\n (click)=\"navigate(grandchild.route || '')\"\n >\n @if (!isActive(grandchild.route || '')) {\n <div class=\"sefin-sidebar__nav-bullet\"></div>\n }\n <span class=\"sefin-sidebar__nav-label\">{{ grandchild.label }}</span>\n </button>\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n </nav>\n \n @if (showFooter) {\n <div class=\"sefin-sidebar__footer\">\n <div class=\"sefin-sidebar__footer-content\">\n <span class=\"sefin-sidebar__footer-text\">{{ footerVersion }}</span>\n </div>\n </div>\n }\n</aside>\n", styles: [".sefin-sidebar{width:288px;min-width:288px;height:100vh;background:#fff;border-right:1px solid #e8e8e8;display:flex;flex-direction:column;position:fixed;left:0;top:0;z-index:100;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:width .3s ease-in-out,transform .3s ease-in-out}.sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem);border-bottom:1px solid #e8e8e8;display:flex;align-items:center;position:relative;background:linear-gradient(to right,#55c3d8,#4aafc4);min-height:auto}.sefin-sidebar__header .sefin-sidebar__header-content{display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);width:100%}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container{width:40px;height:40px;border-radius:12px;background:#fff3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;flex-shrink:0}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container .sefin-sidebar__header-icon{color:#fff;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container .sefin-sidebar__header-icon svg{width:24px;height:24px;color:#fff;fill:none;stroke:currentColor}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:flex;flex-direction:column;gap:0}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text .sefin-sidebar__header-title{color:#fff;font-size:18px;font-weight:700;line-height:1.2;margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text .sefin-sidebar__header-subtitle{color:#fffc;font-size:12px;line-height:1.2;margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__header:after{content:\"\";position:absolute;right:-20px;top:50%;transform:translateY(-50%);width:56px;height:56px;z-index:100;pointer-events:none}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem) var(--sefin-spacing-sm, .5rem);justify-content:center}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header .sefin-sidebar__header-content{flex-direction:column}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:none}.sefin-sidebar__footer{padding:var(--sefin-spacing-md, 1rem);border-top:1px solid #e8e8e8}.sefin-sidebar__footer .sefin-sidebar__footer-content{background:#f5f5f5;border-radius:8px;padding:var(--sefin-spacing-sm, .75rem);text-align:center}.sefin-sidebar__footer .sefin-sidebar__footer-content .sefin-sidebar__footer-text{color:#828282;font-size:12px;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__toggle{position:absolute;right:-18px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:none;background:linear-gradient(135deg,#fff,#f8f9fa);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px #0000001a,0 0 0 1px #0000000d,inset 0 1px #ffffffe6;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:101;color:var(--sefin-color-text, #4a5568);padding:0;margin:0;line-height:0}.sefin-sidebar__toggle .sefin-sidebar__toggle-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;transition:transform .3s cubic-bezier(.4,0,.2,1);pointer-events:none}.sefin-sidebar__toggle .sefin-sidebar__toggle-icon svg{width:18px;height:18px;color:currentColor;fill:none;stroke:currentColor;pointer-events:none}.sefin-sidebar__toggle:before{content:\"\";position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.3) 0%,transparent 50%);pointer-events:none;opacity:.5}.sefin-sidebar__toggle:hover{background:linear-gradient(135deg,#55c3d8,#4db8cc);color:#fff;transform:translateY(-50%) scale(1.08);box-shadow:0 4px 20px #55c3d866,0 0 0 1px #55c3d833,inset 0 1px #ffffff4d}.sefin-sidebar__toggle:hover:before{opacity:.2;background:linear-gradient(135deg,rgba(255,255,255,.4) 0%,transparent 50%)}.sefin-sidebar__toggle:hover .sefin-sidebar__toggle-icon{transform:scale(1.1)}.sefin-sidebar__toggle:active{transform:translateY(-50%) scale(1.02);box-shadow:0 2px 12px #55c3d880,0 0 0 1px #55c3d84d,inset 0 2px 4px #0000001a}.sefin-sidebar__toggle:focus{outline:2px solid var(--sefin-color-primary, #55c3d8);outline-offset:4px;outline-style:solid}.sefin-sidebar--collapsed .sefin-sidebar__toggle{right:-18px}.sefin-sidebar__nav{flex:1;padding:var(--sefin-spacing-sm, .75rem);overflow:hidden}.sefin-sidebar__nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.sefin-sidebar__nav-item{margin:0}.sefin-sidebar__nav-item.sefin-sidebar__nav-item--has-children{margin-bottom:4px}.sefin-sidebar__nav-link{width:100%;display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);padding:var(--sefin-spacing-sm, .75rem) var(--sefin-spacing-md, 1rem);background:none;border:none;outline:none;text-align:left;cursor:pointer;color:#383838;font-size:var(--sefin-font-size-base, 1rem);font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:all .2s ease-in-out;position:relative;border-radius:12px;margin:0;justify-content:flex-start;overflow:hidden;min-width:0;font-weight:500}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active){background:#e6f7fb;color:#55c3d8}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-label{color:#55c3d8}.sefin-sidebar__nav-link:focus{outline:none}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active{background:linear-gradient(to right,#55c3d8,#4aafc4);color:#fff;font-weight:500;box-shadow:0 4px 6px #55c3d84d;border:none}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-label{color:#fff}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--expandable{font-weight:500}.sefin-sidebar__nav-icon-wrapper{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border-radius:8px;background:#e6f7fb;transition:all .2s ease-in-out}.sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px}.sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{width:20px;height:20px;color:#55c3d8;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-icon-wrapper{background:#fff3}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active:hover .sefin-sidebar__nav-icon-wrapper{background:#fff3}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active:hover .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-icon-wrapper{background:#55c3d8}.sefin-sidebar .sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar__nav-expand-icon-wrapper{margin-left:auto;transition:transform .2s ease;display:flex;align-items:center;justify-content:center}.sefin-sidebar__nav-expand-icon-wrapper.sefin-sidebar__nav-expand-icon-wrapper--expanded{transform:rotate(180deg)}.sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#828282;width:16px;height:16px;fill:none;stroke:currentColor;transition:color .2s ease-in-out}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#fff}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#55c3d8}.sefin-sidebar__nav-label{flex:1;white-space:normal;word-wrap:break-word;overflow-wrap:break-word;opacity:1;transition:opacity .2s ease;min-width:0;overflow:hidden;display:block;line-height:1.4;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__nav-sub-list{list-style:none;margin:4px 0 8px;padding:0;animation:slideDown .2s ease-out}.sefin-sidebar__nav-sub-item{margin:0 0 2px}.sefin-sidebar__nav-sub-item.sefin-sidebar__nav-sub-item--has-children{margin-bottom:4px}.sefin-sidebar__nav-section-header{padding:var(--sefin-spacing-md, 1rem) var(--sefin-spacing-md, 1rem) var(--sefin-spacing-xs, .5rem) var(--sefin-spacing-md, 1rem)}.sefin-sidebar__nav-section-header .sefin-sidebar__section-header-text{color:#828282;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__nav-sub-sub-list{list-style:none;margin:2px 0 8px;padding:0;animation:slideDown .2s ease-out;display:flex;flex-direction:column;gap:2px}.sefin-sidebar__nav-sub-sub-item{margin:0 0 2px}.sefin-sidebar__nav-link--sub-sub{width:100%;display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);padding:var(--sefin-spacing-sm, .75rem) var(--sefin-spacing-md, 1rem);background:none;border:none;outline:none;text-align:left;cursor:pointer;color:#4f4f4f;font-size:var(--sefin-font-size-sm, .875rem);font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:all .2s ease-in-out;position:relative;border-radius:12px;margin:0 var(--sefin-spacing-md, .5rem);justify-content:flex-start;overflow:hidden;min-width:0}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active){background:#e6f7fb;color:#55c3d8}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-bullet{background:#55c3d8}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-label{color:#55c3d8}.sefin-sidebar__nav-link--sub-sub:focus{outline:none}.sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active{background:linear-gradient(to right,#55c3d8,#4aafc4);color:#fff;font-weight:500;box-shadow:0 4px 6px #55c3d84d;border:none}.sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active .sefin-sidebar__nav-label{color:#fff}.sefin-sidebar__nav-bullet{width:6px;height:6px;border-radius:50%;background:#cecece;transition:background-color .2s ease-in-out;flex-shrink:0}.sefin-sidebar .sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active .sefin-sidebar__nav-bullet{display:none}@keyframes slideDown{0%{opacity:0;max-height:0;overflow:hidden}to{opacity:1;max-height:1000px}}.sefin-sidebar.sefin-sidebar--collapsed{width:80px;min-width:80px}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-link{justify-content:center;padding:var(--sefin-spacing-md, 1rem);border-radius:12px;margin:0}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-label{opacity:0;width:0;overflow:hidden}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-expand-icon,.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-sub-list,.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-sub-sub-list{display:none}.sefin-sidebar.sefin-sidebar--mobile{transform:translate(-100%)}.sefin-sidebar.sefin-sidebar--mobile.sefin-sidebar--open{transform:translate(0)}@media(max-width:768px){.sefin-sidebar{transform:translate(-100%)}.sefin-sidebar.sefin-sidebar--open{transform:translate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
|
|
6212
|
+
}
|
|
6213
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
6214
|
+
type: Component,
|
|
6215
|
+
args: [{ selector: 'sefin-sidebar', standalone: true, imports: [CommonModule, RouterModule], changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<aside\n class=\"sefin-sidebar\"\n [class.sefin-sidebar--mobile]=\"isMobile\"\n [class.sefin-sidebar--open]=\"isOpen\"\n [class.sefin-sidebar--collapsed]=\"isCollapsed && !isMobile\"\n>\n <div class=\"sefin-sidebar__header\">\n @if (!isCollapsed || isMobile) {\n <div class=\"sefin-sidebar__header-content\">\n <div class=\"sefin-sidebar__header-icon-container\">\n <span class=\"sefin-sidebar__header-icon\" [innerHTML]=\"getIconSvg(headerIcon, 24)\"></span>\n </div>\n <div class=\"sefin-sidebar__header-text\">\n <h1 class=\"sefin-sidebar__header-title\">{{ headerTitle }}</h1>\n <span class=\"sefin-sidebar__header-subtitle\">{{ headerSubtitle }}</span>\n </div>\n </div>\n }\n @if (!isMobile) {\n <button\n type=\"button\"\n class=\"sefin-sidebar__toggle\"\n (click)=\"handleToggleCollapse()\"\n [attr.aria-label]=\"isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'\"\n [attr.aria-expanded]=\"!isCollapsed\"\n >\n <span class=\"sefin-sidebar__toggle-icon\" [innerHTML]=\"getIconSvg(isCollapsed ? 'chevron-right' : 'chevron-left', 16)\"></span>\n </button>\n }\n </div>\n\n <nav class=\"sefin-sidebar__nav\">\n <ul class=\"sefin-sidebar__nav-list\">\n @for (item of navItems; track item.label) {\n <li class=\"sefin-sidebar__nav-item\" [class.sefin-sidebar__nav-item--has-children]=\"hasChildren(item)\">\n <!-- Parent item -->\n <button\n type=\"button\"\n class=\"sefin-sidebar__nav-link\"\n [class.sefin-sidebar__nav-link--expandable]=\"hasChildren(item)\"\n [class.sefin-sidebar__nav-link--expanded]=\"item.expanded\"\n [class.sefin-sidebar__nav-link--active]=\"hasActiveChild(item, currentRoute)\"\n [attr.aria-expanded]=\"hasChildren(item) ? item.expanded : null\"\n [attr.aria-label]=\"isCollapsed && !isMobile ? item.label : null\"\n (click)=\"hasChildren(item) ? toggleExpand(item) : navigate(item.route || '')\"\n >\n @if (item.icon) {\n <div class=\"sefin-sidebar__nav-icon-wrapper\">\n <span class=\"sefin-sidebar__nav-icon\" [innerHTML]=\"getIconSvg(item.icon, 20)\"></span>\n </div>\n }\n @if (!isCollapsed || isMobile) {\n <span class=\"sefin-sidebar__nav-label\">{{ item.label }}</span>\n @if (hasChildren(item)) {\n <div class=\"sefin-sidebar__nav-expand-icon-wrapper\" [class.sefin-sidebar__nav-expand-icon-wrapper--expanded]=\"item.expanded\">\n <span class=\"sefin-sidebar__nav-expand-icon\" [innerHTML]=\"getIconSvg('chevron-down', 16)\"></span>\n </div>\n }\n }\n </button>\n <!-- Children items -->\n @if (hasChildren(item) && item.expanded && (!isCollapsed || isMobile)) {\n <ul class=\"sefin-sidebar__nav-sub-list\">\n @for (child of item.children; track child.label) {\n <li class=\"sefin-sidebar__nav-sub-item\" [class.sefin-sidebar__nav-sub-item--has-children]=\"hasChildren(child)\">\n <!-- Level 1: Section headers (non-clickable) -->\n <div class=\"sefin-sidebar__nav-section-header\">\n <span class=\"sefin-sidebar__section-header-text\">{{ child.label }}</span>\n </div>\n <!-- Level 2: Grandchildren items (clickable with bullets) -->\n @if (hasChildren(child)) {\n <ul class=\"sefin-sidebar__nav-sub-sub-list\">\n @for (grandchild of child.children; track grandchild.label) {\n <li class=\"sefin-sidebar__nav-sub-sub-item\">\n <button\n type=\"button\"\n class=\"sefin-sidebar__nav-link sefin-sidebar__nav-link--sub-sub\"\n [class.sefin-sidebar__nav-link--active]=\"isActive(grandchild.route || '')\"\n [attr.aria-current]=\"isActive(grandchild.route || '') ? 'page' : null\"\n (click)=\"navigate(grandchild.route || '')\"\n >\n @if (!isActive(grandchild.route || '')) {\n <div class=\"sefin-sidebar__nav-bullet\"></div>\n }\n <span class=\"sefin-sidebar__nav-label\">{{ grandchild.label }}</span>\n </button>\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n </nav>\n \n @if (showFooter) {\n <div class=\"sefin-sidebar__footer\">\n <div class=\"sefin-sidebar__footer-content\">\n <span class=\"sefin-sidebar__footer-text\">{{ footerVersion }}</span>\n </div>\n </div>\n }\n</aside>\n", styles: [".sefin-sidebar{width:288px;min-width:288px;height:100vh;background:#fff;border-right:1px solid #e8e8e8;display:flex;flex-direction:column;position:fixed;left:0;top:0;z-index:100;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:width .3s ease-in-out,transform .3s ease-in-out}.sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem);border-bottom:1px solid #e8e8e8;display:flex;align-items:center;position:relative;background:linear-gradient(to right,#55c3d8,#4aafc4);min-height:auto}.sefin-sidebar__header .sefin-sidebar__header-content{display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);width:100%}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container{width:40px;height:40px;border-radius:12px;background:#fff3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;flex-shrink:0}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container .sefin-sidebar__header-icon{color:#fff;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container .sefin-sidebar__header-icon svg{width:24px;height:24px;color:#fff;fill:none;stroke:currentColor}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:flex;flex-direction:column;gap:0}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text .sefin-sidebar__header-title{color:#fff;font-size:18px;font-weight:700;line-height:1.2;margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text .sefin-sidebar__header-subtitle{color:#fffc;font-size:12px;line-height:1.2;margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__header:after{content:\"\";position:absolute;right:-20px;top:50%;transform:translateY(-50%);width:56px;height:56px;z-index:100;pointer-events:none}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem) var(--sefin-spacing-sm, .5rem);justify-content:center}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header .sefin-sidebar__header-content{flex-direction:column}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:none}.sefin-sidebar__footer{padding:var(--sefin-spacing-md, 1rem);border-top:1px solid #e8e8e8}.sefin-sidebar__footer .sefin-sidebar__footer-content{background:#f5f5f5;border-radius:8px;padding:var(--sefin-spacing-sm, .75rem);text-align:center}.sefin-sidebar__footer .sefin-sidebar__footer-content .sefin-sidebar__footer-text{color:#828282;font-size:12px;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__toggle{position:absolute;right:-18px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:none;background:linear-gradient(135deg,#fff,#f8f9fa);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px #0000001a,0 0 0 1px #0000000d,inset 0 1px #ffffffe6;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:101;color:var(--sefin-color-text, #4a5568);padding:0;margin:0;line-height:0}.sefin-sidebar__toggle .sefin-sidebar__toggle-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;transition:transform .3s cubic-bezier(.4,0,.2,1);pointer-events:none}.sefin-sidebar__toggle .sefin-sidebar__toggle-icon svg{width:18px;height:18px;color:currentColor;fill:none;stroke:currentColor;pointer-events:none}.sefin-sidebar__toggle:before{content:\"\";position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.3) 0%,transparent 50%);pointer-events:none;opacity:.5}.sefin-sidebar__toggle:hover{background:linear-gradient(135deg,#55c3d8,#4db8cc);color:#fff;transform:translateY(-50%) scale(1.08);box-shadow:0 4px 20px #55c3d866,0 0 0 1px #55c3d833,inset 0 1px #ffffff4d}.sefin-sidebar__toggle:hover:before{opacity:.2;background:linear-gradient(135deg,rgba(255,255,255,.4) 0%,transparent 50%)}.sefin-sidebar__toggle:hover .sefin-sidebar__toggle-icon{transform:scale(1.1)}.sefin-sidebar__toggle:active{transform:translateY(-50%) scale(1.02);box-shadow:0 2px 12px #55c3d880,0 0 0 1px #55c3d84d,inset 0 2px 4px #0000001a}.sefin-sidebar__toggle:focus{outline:2px solid var(--sefin-color-primary, #55c3d8);outline-offset:4px;outline-style:solid}.sefin-sidebar--collapsed .sefin-sidebar__toggle{right:-18px}.sefin-sidebar__nav{flex:1;padding:var(--sefin-spacing-sm, .75rem);overflow:hidden}.sefin-sidebar__nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.sefin-sidebar__nav-item{margin:0}.sefin-sidebar__nav-item.sefin-sidebar__nav-item--has-children{margin-bottom:4px}.sefin-sidebar__nav-link{width:100%;display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);padding:var(--sefin-spacing-sm, .75rem) var(--sefin-spacing-md, 1rem);background:none;border:none;outline:none;text-align:left;cursor:pointer;color:#383838;font-size:var(--sefin-font-size-base, 1rem);font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:all .2s ease-in-out;position:relative;border-radius:12px;margin:0;justify-content:flex-start;overflow:hidden;min-width:0;font-weight:500}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active){background:#e6f7fb;color:#55c3d8}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-label{color:#55c3d8}.sefin-sidebar__nav-link:focus{outline:none}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active{background:linear-gradient(to right,#55c3d8,#4aafc4);color:#fff;font-weight:500;box-shadow:0 4px 6px #55c3d84d;border:none}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-label{color:#fff}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--expandable{font-weight:500}.sefin-sidebar__nav-icon-wrapper{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border-radius:8px;background:#e6f7fb;transition:all .2s ease-in-out}.sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px}.sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{width:20px;height:20px;color:#55c3d8;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-icon-wrapper{background:#fff3}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active:hover .sefin-sidebar__nav-icon-wrapper{background:#fff3}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active:hover .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-icon-wrapper{background:#55c3d8}.sefin-sidebar .sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar__nav-expand-icon-wrapper{margin-left:auto;transition:transform .2s ease;display:flex;align-items:center;justify-content:center}.sefin-sidebar__nav-expand-icon-wrapper.sefin-sidebar__nav-expand-icon-wrapper--expanded{transform:rotate(180deg)}.sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#828282;width:16px;height:16px;fill:none;stroke:currentColor;transition:color .2s ease-in-out}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#fff}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#55c3d8}.sefin-sidebar__nav-label{flex:1;white-space:normal;word-wrap:break-word;overflow-wrap:break-word;opacity:1;transition:opacity .2s ease;min-width:0;overflow:hidden;display:block;line-height:1.4;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__nav-sub-list{list-style:none;margin:4px 0 8px;padding:0;animation:slideDown .2s ease-out}.sefin-sidebar__nav-sub-item{margin:0 0 2px}.sefin-sidebar__nav-sub-item.sefin-sidebar__nav-sub-item--has-children{margin-bottom:4px}.sefin-sidebar__nav-section-header{padding:var(--sefin-spacing-md, 1rem) var(--sefin-spacing-md, 1rem) var(--sefin-spacing-xs, .5rem) var(--sefin-spacing-md, 1rem)}.sefin-sidebar__nav-section-header .sefin-sidebar__section-header-text{color:#828282;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__nav-sub-sub-list{list-style:none;margin:2px 0 8px;padding:0;animation:slideDown .2s ease-out;display:flex;flex-direction:column;gap:2px}.sefin-sidebar__nav-sub-sub-item{margin:0 0 2px}.sefin-sidebar__nav-link--sub-sub{width:100%;display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);padding:var(--sefin-spacing-sm, .75rem) var(--sefin-spacing-md, 1rem);background:none;border:none;outline:none;text-align:left;cursor:pointer;color:#4f4f4f;font-size:var(--sefin-font-size-sm, .875rem);font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:all .2s ease-in-out;position:relative;border-radius:12px;margin:0 var(--sefin-spacing-md, .5rem);justify-content:flex-start;overflow:hidden;min-width:0}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active){background:#e6f7fb;color:#55c3d8}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-bullet{background:#55c3d8}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-label{color:#55c3d8}.sefin-sidebar__nav-link--sub-sub:focus{outline:none}.sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active{background:linear-gradient(to right,#55c3d8,#4aafc4);color:#fff;font-weight:500;box-shadow:0 4px 6px #55c3d84d;border:none}.sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active .sefin-sidebar__nav-label{color:#fff}.sefin-sidebar__nav-bullet{width:6px;height:6px;border-radius:50%;background:#cecece;transition:background-color .2s ease-in-out;flex-shrink:0}.sefin-sidebar .sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active .sefin-sidebar__nav-bullet{display:none}@keyframes slideDown{0%{opacity:0;max-height:0;overflow:hidden}to{opacity:1;max-height:1000px}}.sefin-sidebar.sefin-sidebar--collapsed{width:80px;min-width:80px}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-link{justify-content:center;padding:var(--sefin-spacing-md, 1rem);border-radius:12px;margin:0}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-label{opacity:0;width:0;overflow:hidden}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-expand-icon,.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-sub-list,.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-sub-sub-list{display:none}.sefin-sidebar.sefin-sidebar--mobile{transform:translate(-100%)}.sefin-sidebar.sefin-sidebar--mobile.sefin-sidebar--open{transform:translate(0)}@media(max-width:768px){.sefin-sidebar{transform:translate(-100%)}.sefin-sidebar.sefin-sidebar--open{transform:translate(0)}}\n"] }]
|
|
6216
|
+
}], ctorParameters: () => [{ type: i1$2.Router }, { type: i0.ChangeDetectorRef }, { type: i1$1.DomSanitizer }], propDecorators: { navItems: [{
|
|
6217
|
+
type: Input
|
|
6218
|
+
}], isMobile: [{
|
|
6219
|
+
type: Input
|
|
6220
|
+
}], isOpen: [{
|
|
6221
|
+
type: Input
|
|
6222
|
+
}], isCollapsed: [{
|
|
6223
|
+
type: Input
|
|
6224
|
+
}], headerTitle: [{
|
|
6225
|
+
type: Input
|
|
6226
|
+
}], headerSubtitle: [{
|
|
6227
|
+
type: Input
|
|
6228
|
+
}], headerIcon: [{
|
|
6229
|
+
type: Input
|
|
6230
|
+
}], footerVersion: [{
|
|
6231
|
+
type: Input
|
|
6232
|
+
}], showFooter: [{
|
|
6233
|
+
type: Input
|
|
6234
|
+
}], toggleCollapse: [{
|
|
6235
|
+
type: Output
|
|
6236
|
+
}] } });
|
|
6237
|
+
|
|
6238
|
+
/**
|
|
6239
|
+
* Sidebar component exports
|
|
6240
|
+
*/
|
|
6241
|
+
|
|
6088
6242
|
/**
|
|
6089
6243
|
* Organisms index
|
|
6090
6244
|
*/
|
|
@@ -6100,5 +6254,5 @@ const STYLES_PATH = './styles/index.scss';
|
|
|
6100
6254
|
* Generated bundle index. Do not edit.
|
|
6101
6255
|
*/
|
|
6102
6256
|
|
|
6103
|
-
export { AccordionItemComponent, AlertComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, BreadcrumbsComponent, ButtonComponent, ButtonGroupComponent, COLOR_TOKENS, CardComponent, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DatepickerComponent, DividerComponent, FabButtonComponent, FormFieldComponent, IconButtonComponent, IconComponent, ImageComponent, LIGHT_THEME, LinkComponent, PaginationComponent, ProgressBarComponent, RadioComponent, RateComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SpacerComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TabComponent, TableComponent, TagComponent, TextFieldComponent, TextareaComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent, buildDisplayedColumns };
|
|
6257
|
+
export { AccordionItemComponent, AlertComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, BreadcrumbsComponent, ButtonComponent, ButtonGroupComponent, COLOR_TOKENS, CardComponent, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DatepickerComponent, DividerComponent, FabButtonComponent, FormFieldComponent, IconButtonComponent, IconComponent, ImageComponent, LIGHT_THEME, LinkComponent, PaginationComponent, ProgressBarComponent, RadioComponent, RateComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SidebarComponent, SpacerComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TabComponent, TableComponent, TagComponent, TextFieldComponent, TextareaComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent, buildDisplayedColumns };
|
|
6104
6258
|
//# sourceMappingURL=lesterarte-sefin-ui.mjs.map
|