@up_si_vale/sivale-componentes-angular 1.0.1 → 1.0.2

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.
@@ -1,10 +1,11 @@
1
1
  import * as i0 from '@angular/core';
2
- import { InjectionToken, Injectable, Input, Optional, Inject, Directive, HostListener, Self, HostBinding, EventEmitter, Output, Component, forwardRef, ChangeDetectionStrategy, ElementRef, ViewChild, RendererStyleFlags2, ContentChild, ContentChildren } from '@angular/core';
2
+ import { InjectionToken, Injectable, Input, Optional, Inject, Directive, HostListener, Self, HostBinding, EventEmitter, Output, Component, forwardRef, ChangeDetectionStrategy, ElementRef, ViewChild, TemplateRef, ContentChild, RendererStyleFlags2, ContentChildren } from '@angular/core';
3
3
  import { Subject } from 'rxjs';
4
4
  import * as i1 from '@angular/forms';
5
5
  import { ReactiveFormsModule, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
6
6
  import * as i1$1 from '@angular/common';
7
7
  import { CommonModule, DOCUMENT } from '@angular/common';
8
+ import { RouterLink, RouterLinkActive } from '@angular/router';
8
9
 
9
10
  /**
10
11
  * Base URL para los assets remotos del microfrontend (íconos, imágenes).
@@ -2154,6 +2155,202 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
2154
2155
  type: Input
2155
2156
  }] } });
2156
2157
 
2158
+ class SidebarIconComponent {
2159
+ name;
2160
+ size = 24;
2161
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SidebarIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2162
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SidebarIconComponent, isStandalone: true, selector: "svu-sidebar-icon", inputs: { name: "name", size: "size" }, ngImport: i0, template: `
2163
+ <ng-container [ngSwitch]="name">
2164
+ <svg *ngSwitchCase="'dashboard'" [attr.width]="size" [attr.height]="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2165
+ <path d="M8 17h8M11.018 2.764L4.235 8.039c-.453.353-.68.53-.843.75a2 2 0 00-.318.65C3 9.704 3 9.991 3 10.565V17.8c0 1.12 0 1.68.218 2.108a2 2 0 00.874.874C4.52 21 5.08 21 6.2 21h11.6c1.12 0 1.68 0 2.108-.218a2 2 0 00.874-.874C21 19.48 21 18.92 21 17.8v-7.235c0-.574 0-.861-.074-1.126a2 2 0 00-.318-.65c-.163-.22-.39-.397-.843-.75l-6.783-5.275c-.351-.273-.527-.41-.72-.462a1 1 0 00-.508 0c-.193.052-.369.189-.72.462z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
2166
+ </svg>
2167
+
2168
+ <svg *ngSwitchCase="'file-users'" [attr.width]="size" [attr.height]="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2169
+ <path d="M14 2.27V6.4c0 .56 0 .84.109 1.054a1 1 0 00.437.437C14.76 8 15.04 8 15.6 8h4.13M8 15h8M8 11h4M14 2H8.8c-1.68 0-2.52 0-3.162.327a3 3 0 00-1.311 1.311C4 4.28 4 5.12 4 6.8v10.4c0 1.68 0 2.52.327 3.162a3 3 0 001.311 1.311C6.28 22 7.12 22 8.8 22h6.4c1.68 0 2.52 0 3.162-.327a3 3 0 001.311-1.311C20 19.72 20 18.88 20 17.2V8l-6-6z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
2170
+ </svg>
2171
+
2172
+ <svg *ngSwitchCase="'card'" [attr.width]="size" [attr.height]="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2173
+ <path d="M22 10H2M22 11V8.2C22 7.08 22 6.52 21.782 6.092a2 2 0 00-.874-.874C20.48 5 19.92 5 18.8 5H5.2C4.08 5 3.52 5 3.092 5.218a2 2 0 00-.874.874C2 6.52 2 7.08 2 8.2V15.8c0 1.12 0 1.68.218 2.108a2 2 0 00.874.874C3.52 19 4.08 19 5.2 19H18.8c1.12 0 1.68 0 2.108-.218a2 2 0 00.874-.874C22 17.48 22 16.92 22 15.8V11z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
2174
+ </svg>
2175
+
2176
+ <svg *ngSwitchCase="'logout'" [attr.width]="size" [attr.height]="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2177
+ <path d="M16 17l5-5m0 0l-5-5m5 5H9m0-9H7.8c-1.68 0-2.52 0-3.162.327a3 3 0 00-1.311 1.311C3 5.28 3 6.12 3 7.8v8.4c0 1.68 0 2.52.327 3.162a3 3 0 001.311 1.311C5.28 21 6.12 21 7.8 21H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
2178
+ </svg>
2179
+
2180
+ <svg *ngSwitchCase="'chevron-down'" [attr.width]="size" [attr.height]="size" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2181
+ <path d="M5 7.5l5 5 5-5" stroke="currentColor" stroke-width="1.667" stroke-linecap="round" stroke-linejoin="round"/>
2182
+ </svg>
2183
+
2184
+ <svg *ngSwitchCase="'settings'" [attr.width]="size" [attr.height]="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2185
+ <path d="M12 15a3 3 0 100-6 3 3 0 000 6z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
2186
+ <path d="M19.622 10.395l-1.097-2.65L20 6l-2-2-1.735 1.483-2.707-1.113L12.935 2h-1.954l-.632 2.401-2.645 1.115L6 4 4 6l1.453 1.789-1.08 2.657L2 11v2l2.401.655L5.516 16.3 4 18l2 2 1.791-1.46 2.606 1.072L11 22h2l.604-2.387 2.651-1.098C16.697 18.831 18 20 18 20l2-2-1.484-1.75 1.098-2.652 2.386-.62V11l-2.378-.605z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
2187
+ </svg>
2188
+
2189
+ <svg *ngSwitchCase="'user'" [attr.width]="size" [attr.height]="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2190
+ <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2M12 11a4 4 0 100-8 4 4 0 000 8z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
2191
+ </svg>
2192
+
2193
+ <svg *ngSwitchCase="'home'" [attr.width]="size" [attr.height]="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2194
+ <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
2195
+ <path d="M9 22V12h6v10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
2196
+ </svg>
2197
+ </ng-container>
2198
+ `, isInline: true, styles: [":host{display:inline-flex;line-height:0;color:currentColor}svg{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2199
+ }
2200
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SidebarIconComponent, decorators: [{
2201
+ type: Component,
2202
+ args: [{ selector: 'svu-sidebar-icon', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
2203
+ <ng-container [ngSwitch]="name">
2204
+ <svg *ngSwitchCase="'dashboard'" [attr.width]="size" [attr.height]="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2205
+ <path d="M8 17h8M11.018 2.764L4.235 8.039c-.453.353-.68.53-.843.75a2 2 0 00-.318.65C3 9.704 3 9.991 3 10.565V17.8c0 1.12 0 1.68.218 2.108a2 2 0 00.874.874C4.52 21 5.08 21 6.2 21h11.6c1.12 0 1.68 0 2.108-.218a2 2 0 00.874-.874C21 19.48 21 18.92 21 17.8v-7.235c0-.574 0-.861-.074-1.126a2 2 0 00-.318-.65c-.163-.22-.39-.397-.843-.75l-6.783-5.275c-.351-.273-.527-.41-.72-.462a1 1 0 00-.508 0c-.193.052-.369.189-.72.462z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
2206
+ </svg>
2207
+
2208
+ <svg *ngSwitchCase="'file-users'" [attr.width]="size" [attr.height]="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2209
+ <path d="M14 2.27V6.4c0 .56 0 .84.109 1.054a1 1 0 00.437.437C14.76 8 15.04 8 15.6 8h4.13M8 15h8M8 11h4M14 2H8.8c-1.68 0-2.52 0-3.162.327a3 3 0 00-1.311 1.311C4 4.28 4 5.12 4 6.8v10.4c0 1.68 0 2.52.327 3.162a3 3 0 001.311 1.311C6.28 22 7.12 22 8.8 22h6.4c1.68 0 2.52 0 3.162-.327a3 3 0 001.311-1.311C20 19.72 20 18.88 20 17.2V8l-6-6z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
2210
+ </svg>
2211
+
2212
+ <svg *ngSwitchCase="'card'" [attr.width]="size" [attr.height]="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2213
+ <path d="M22 10H2M22 11V8.2C22 7.08 22 6.52 21.782 6.092a2 2 0 00-.874-.874C20.48 5 19.92 5 18.8 5H5.2C4.08 5 3.52 5 3.092 5.218a2 2 0 00-.874.874C2 6.52 2 7.08 2 8.2V15.8c0 1.12 0 1.68.218 2.108a2 2 0 00.874.874C3.52 19 4.08 19 5.2 19H18.8c1.12 0 1.68 0 2.108-.218a2 2 0 00.874-.874C22 17.48 22 16.92 22 15.8V11z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
2214
+ </svg>
2215
+
2216
+ <svg *ngSwitchCase="'logout'" [attr.width]="size" [attr.height]="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2217
+ <path d="M16 17l5-5m0 0l-5-5m5 5H9m0-9H7.8c-1.68 0-2.52 0-3.162.327a3 3 0 00-1.311 1.311C3 5.28 3 6.12 3 7.8v8.4c0 1.68 0 2.52.327 3.162a3 3 0 001.311 1.311C5.28 21 6.12 21 7.8 21H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
2218
+ </svg>
2219
+
2220
+ <svg *ngSwitchCase="'chevron-down'" [attr.width]="size" [attr.height]="size" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2221
+ <path d="M5 7.5l5 5 5-5" stroke="currentColor" stroke-width="1.667" stroke-linecap="round" stroke-linejoin="round"/>
2222
+ </svg>
2223
+
2224
+ <svg *ngSwitchCase="'settings'" [attr.width]="size" [attr.height]="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2225
+ <path d="M12 15a3 3 0 100-6 3 3 0 000 6z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
2226
+ <path d="M19.622 10.395l-1.097-2.65L20 6l-2-2-1.735 1.483-2.707-1.113L12.935 2h-1.954l-.632 2.401-2.645 1.115L6 4 4 6l1.453 1.789-1.08 2.657L2 11v2l2.401.655L5.516 16.3 4 18l2 2 1.791-1.46 2.606 1.072L11 22h2l.604-2.387 2.651-1.098C16.697 18.831 18 20 18 20l2-2-1.484-1.75 1.098-2.652 2.386-.62V11l-2.378-.605z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
2227
+ </svg>
2228
+
2229
+ <svg *ngSwitchCase="'user'" [attr.width]="size" [attr.height]="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2230
+ <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2M12 11a4 4 0 100-8 4 4 0 000 8z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
2231
+ </svg>
2232
+
2233
+ <svg *ngSwitchCase="'home'" [attr.width]="size" [attr.height]="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2234
+ <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
2235
+ <path d="M9 22V12h6v10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
2236
+ </svg>
2237
+ </ng-container>
2238
+ `, styles: [":host{display:inline-flex;line-height:0;color:currentColor}svg{display:block}\n"] }]
2239
+ }], propDecorators: { name: [{
2240
+ type: Input
2241
+ }], size: [{
2242
+ type: Input
2243
+ }] } });
2244
+
2245
+ class SidebarComponent {
2246
+ hostRef;
2247
+ /** Items del menú (datos-driven). Soporta children para sub-navegación. */
2248
+ items = [];
2249
+ /** Logo: si se pasa la URL se renderiza; alternativamente proyecta contenido con `[sidebarLogo]`. */
2250
+ logoSrc;
2251
+ logoAlt = 'Logo';
2252
+ /** Footer hibrido: si se pasan los inputs se usa el footer por defecto.
2253
+ * Para footer custom, proyectar con `[sidebarFooter]` (gana sobre los inputs). */
2254
+ userName;
2255
+ userEmail;
2256
+ /** Si no se pasa, se usa la primera letra de userName. */
2257
+ userInitial;
2258
+ /** Mostrar/ocultar el botón de logout en el menú de cuenta. */
2259
+ showLogout = true;
2260
+ logoutLabel = 'Cerrar sesión';
2261
+ /** Click en un item (incluye expandibles y hojas). */
2262
+ itemClick = new EventEmitter();
2263
+ logout = new EventEmitter();
2264
+ logoTpl;
2265
+ footerTpl;
2266
+ expandedKeys = new Set();
2267
+ accountMenuOpen = false;
2268
+ subsetMatch = {
2269
+ paths: 'subset',
2270
+ queryParams: 'ignored',
2271
+ fragment: 'ignored',
2272
+ matrixParams: 'ignored'
2273
+ };
2274
+ exactMatch = {
2275
+ paths: 'exact',
2276
+ queryParams: 'ignored',
2277
+ fragment: 'ignored',
2278
+ matrixParams: 'ignored'
2279
+ };
2280
+ constructor(hostRef) {
2281
+ this.hostRef = hostRef;
2282
+ }
2283
+ get computedInitial() {
2284
+ if (this.userInitial)
2285
+ return this.userInitial;
2286
+ return (this.userName?.trim().charAt(0) || '').toUpperCase();
2287
+ }
2288
+ isExpanded(item) {
2289
+ return this.expandedKeys.has(item.label);
2290
+ }
2291
+ onItemClick(item) {
2292
+ if (item.children?.length) {
2293
+ if (this.expandedKeys.has(item.label)) {
2294
+ this.expandedKeys.delete(item.label);
2295
+ }
2296
+ else {
2297
+ this.expandedKeys.add(item.label);
2298
+ }
2299
+ }
2300
+ this.itemClick.emit(item);
2301
+ }
2302
+ toggleAccountMenu() {
2303
+ this.accountMenuOpen = !this.accountMenuOpen;
2304
+ }
2305
+ onLogoutClick() {
2306
+ this.accountMenuOpen = false;
2307
+ this.logout.emit();
2308
+ }
2309
+ onDocumentClick(event) {
2310
+ if (!this.accountMenuOpen)
2311
+ return;
2312
+ const footer = this.hostRef.nativeElement.querySelector('.svu-sidebar__footer');
2313
+ if (footer && !footer.contains(event.target)) {
2314
+ this.accountMenuOpen = false;
2315
+ }
2316
+ }
2317
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SidebarComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
2318
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SidebarComponent, isStandalone: true, selector: "svu-sidebar", inputs: { items: "items", logoSrc: "logoSrc", logoAlt: "logoAlt", userName: "userName", userEmail: "userEmail", userInitial: "userInitial", showLogout: "showLogout", logoutLabel: "logoutLabel" }, outputs: { itemClick: "itemClick", logout: "logout" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, queries: [{ propertyName: "logoTpl", first: true, predicate: ["sidebarLogo"], descendants: true, read: TemplateRef }, { propertyName: "footerTpl", first: true, predicate: ["sidebarFooter"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<aside class=\"svu-sidebar\">\n <div class=\"svu-sidebar__content\">\n <div class=\"svu-sidebar__top\">\n <!-- Logo: slot proyectable o input -->\n <div class=\"svu-sidebar__logo\">\n <ng-container *ngIf=\"logoTpl; else defaultLogo\" [ngTemplateOutlet]=\"logoTpl\"></ng-container>\n <ng-template #defaultLogo>\n <img *ngIf=\"logoSrc\" [src]=\"logoSrc\" [alt]=\"logoAlt\" class=\"svu-sidebar__logo-img\" />\n </ng-template>\n </div>\n\n <!-- Navigation -->\n <nav class=\"svu-sidebar__nav\">\n <ng-container *ngFor=\"let item of items\">\n <!-- Item con children (expandible) -->\n <ng-container *ngIf=\"item.children?.length; else leafItem\">\n <div\n class=\"svu-sidebar__nav-item\"\n [class.svu-sidebar__nav-item--active]=\"parentActive.isActive\"\n (click)=\"onItemClick(item)\"\n [routerLink]=\"item.route || null\"\n routerLinkActive\n #parentActive=\"routerLinkActive\"\n [routerLinkActiveOptions]=\"subsetMatch\">\n <div class=\"svu-sidebar__nav-item-content\">\n <svu-sidebar-icon *ngIf=\"item.icon\" [name]=\"item.icon\" class=\"svu-sidebar__nav-icon\"></svu-sidebar-icon>\n <span class=\"svu-sidebar__nav-text\">{{ item.label }}</span>\n </div>\n <svu-sidebar-icon\n name=\"chevron-down\"\n [size]=\"20\"\n class=\"svu-sidebar__nav-chevron\"\n [class.svu-sidebar__nav-chevron--open]=\"isExpanded(item)\">\n </svu-sidebar-icon>\n </div>\n\n <div class=\"svu-sidebar__subnav\" *ngIf=\"isExpanded(item)\">\n <a\n *ngFor=\"let child of item.children\"\n class=\"svu-sidebar__subnav-item\"\n [routerLink]=\"child.route\"\n routerLinkActive=\"svu-sidebar__subnav-item--active\"\n [routerLinkActiveOptions]=\"child.exact ? exactMatch : subsetMatch\"\n (click)=\"onItemClick(child)\">\n {{ child.label }}\n </a>\n </div>\n </ng-container>\n\n <!-- Item simple (hoja) -->\n <ng-template #leafItem>\n <a\n class=\"svu-sidebar__nav-item\"\n [routerLink]=\"item.route\"\n routerLinkActive=\"svu-sidebar__nav-item--active\"\n [routerLinkActiveOptions]=\"item.exact ? exactMatch : subsetMatch\"\n (click)=\"onItemClick(item)\">\n <div class=\"svu-sidebar__nav-item-content\">\n <svu-sidebar-icon *ngIf=\"item.icon\" [name]=\"item.icon\" class=\"svu-sidebar__nav-icon\"></svu-sidebar-icon>\n <span class=\"svu-sidebar__nav-text\">{{ item.label }}</span>\n </div>\n </a>\n </ng-template>\n </ng-container>\n </nav>\n </div>\n\n <!-- Footer: slot custom o default (user + logout) -->\n <div class=\"svu-sidebar__footer\">\n <div class=\"svu-sidebar__divider\"></div>\n\n <ng-container *ngIf=\"footerTpl; else defaultFooter\" [ngTemplateOutlet]=\"footerTpl\"></ng-container>\n\n <ng-template #defaultFooter>\n <div class=\"svu-sidebar__account-wrapper\" *ngIf=\"userName\">\n <div class=\"svu-sidebar__account\" (click)=\"toggleAccountMenu()\">\n <div class=\"svu-sidebar__avatar\">\n <span class=\"svu-sidebar__avatar-text\">{{ computedInitial }}</span>\n </div>\n <div class=\"svu-sidebar__user-info\">\n <span class=\"svu-sidebar__user-name\">{{ userName }}</span>\n <span class=\"svu-sidebar__user-email\" *ngIf=\"userEmail\">{{ userEmail }}</span>\n </div>\n </div>\n\n <div *ngIf=\"accountMenuOpen && showLogout\" class=\"svu-sidebar__account-menu\">\n <button type=\"button\" class=\"svu-sidebar__account-menu-item\" (click)=\"onLogoutClick()\">\n <svu-sidebar-icon name=\"logout\" [size]=\"20\"></svu-sidebar-icon>\n <span>{{ logoutLabel }}</span>\n </button>\n </div>\n </div>\n </ng-template>\n </div>\n </div>\n\n <div class=\"svu-sidebar__border\"></div>\n</aside>\n", styles: [".svu-sidebar{display:flex;width:312px;height:100%;background:#fff;flex-shrink:0}.svu-sidebar__content{display:flex;flex-direction:column;justify-content:space-between;flex:1;height:100%;min-width:0}.svu-sidebar__border{width:1px;height:100%;background-color:#e9eaeb;flex-shrink:0}.svu-sidebar__top{display:flex;flex-direction:column;gap:24px;padding-top:32px}.svu-sidebar__logo{padding:0 20px 0 24px}.svu-sidebar__logo-img{height:48px;width:auto}.svu-sidebar__nav{display:flex;flex-direction:column;gap:4px;padding:0 16px}.svu-sidebar__nav-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-radius:6px;cursor:pointer;transition:background-color .2s ease;text-decoration:none;color:inherit}.svu-sidebar__nav-item:hover,.svu-sidebar__nav-item--active{background-color:#fafafa}.svu-sidebar__nav-item--active .svu-sidebar__nav-text,.svu-sidebar__nav-item--active .svu-sidebar__nav-icon{color:#2e353a}.svu-sidebar__nav-item-content{display:flex;align-items:center;gap:12px}.svu-sidebar__nav-icon{flex-shrink:0;color:#585d61}.svu-sidebar__nav-text{font-family:Roboto,sans-serif;font-weight:600;font-size:16px;line-height:24px;color:#585d61}.svu-sidebar__nav-chevron{flex-shrink:0;color:#585d61;transition:transform .2s ease}.svu-sidebar__nav-chevron--open{transform:rotate(180deg)}.svu-sidebar__subnav{display:flex;flex-direction:column;gap:2px;padding-left:48px}.svu-sidebar__subnav-item{display:block;padding:6px 12px;border-radius:6px;font-family:Roboto,sans-serif;font-weight:400;font-size:14px;line-height:20px;color:#6d7275;text-decoration:none;cursor:pointer;transition:background-color .2s ease}.svu-sidebar__subnav-item:hover{background-color:#fafafa}.svu-sidebar__subnav-item--active{background-color:#fafafa;color:#2e353a;font-weight:600}.svu-sidebar__footer{display:flex;flex-direction:column;gap:24px;padding:0 16px 32px}.svu-sidebar__divider{height:1px;width:100%;background-color:#e9eaeb}.svu-sidebar__account-wrapper{position:relative}.svu-sidebar__account{display:flex;align-items:center;gap:12px;padding:8px;border-radius:8px;cursor:pointer;transition:background-color .2s ease}.svu-sidebar__account:hover{background-color:#fafafa}.svu-sidebar__account-menu{position:absolute;bottom:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid #E9EAEB;border-radius:8px;box-shadow:0 4px 16px #0000001a;padding:4px;z-index:10}.svu-sidebar__account-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;border:none;background:none;border-radius:6px;font-family:Roboto,sans-serif;font-weight:400;font-size:14px;line-height:20px;color:#d92d20;cursor:pointer;transition:background-color .2s ease}.svu-sidebar__account-menu-item:hover{background-color:#fef3f2}.svu-sidebar__avatar{width:40px;height:40px;border-radius:50%;background-color:#364b9f;display:flex;align-items:center;justify-content:center;flex-shrink:0}.svu-sidebar__avatar-text{font-family:Roboto,sans-serif;font-weight:600;font-size:16px;color:#fff}.svu-sidebar__user-info{display:flex;flex-direction:column;min-width:0}.svu-sidebar__user-name{font-family:Roboto,sans-serif;font-weight:600;font-size:14px;line-height:20px;color:#2e353a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.svu-sidebar__user-email{font-family:Roboto,sans-serif;font-weight:400;font-size:14px;line-height:20px;color:#6d7275;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.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: SidebarIconComponent, selector: "svu-sidebar-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2319
+ }
2320
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SidebarComponent, decorators: [{
2321
+ type: Component,
2322
+ args: [{ selector: 'svu-sidebar', standalone: true, imports: [CommonModule, RouterLink, RouterLinkActive, SidebarIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<aside class=\"svu-sidebar\">\n <div class=\"svu-sidebar__content\">\n <div class=\"svu-sidebar__top\">\n <!-- Logo: slot proyectable o input -->\n <div class=\"svu-sidebar__logo\">\n <ng-container *ngIf=\"logoTpl; else defaultLogo\" [ngTemplateOutlet]=\"logoTpl\"></ng-container>\n <ng-template #defaultLogo>\n <img *ngIf=\"logoSrc\" [src]=\"logoSrc\" [alt]=\"logoAlt\" class=\"svu-sidebar__logo-img\" />\n </ng-template>\n </div>\n\n <!-- Navigation -->\n <nav class=\"svu-sidebar__nav\">\n <ng-container *ngFor=\"let item of items\">\n <!-- Item con children (expandible) -->\n <ng-container *ngIf=\"item.children?.length; else leafItem\">\n <div\n class=\"svu-sidebar__nav-item\"\n [class.svu-sidebar__nav-item--active]=\"parentActive.isActive\"\n (click)=\"onItemClick(item)\"\n [routerLink]=\"item.route || null\"\n routerLinkActive\n #parentActive=\"routerLinkActive\"\n [routerLinkActiveOptions]=\"subsetMatch\">\n <div class=\"svu-sidebar__nav-item-content\">\n <svu-sidebar-icon *ngIf=\"item.icon\" [name]=\"item.icon\" class=\"svu-sidebar__nav-icon\"></svu-sidebar-icon>\n <span class=\"svu-sidebar__nav-text\">{{ item.label }}</span>\n </div>\n <svu-sidebar-icon\n name=\"chevron-down\"\n [size]=\"20\"\n class=\"svu-sidebar__nav-chevron\"\n [class.svu-sidebar__nav-chevron--open]=\"isExpanded(item)\">\n </svu-sidebar-icon>\n </div>\n\n <div class=\"svu-sidebar__subnav\" *ngIf=\"isExpanded(item)\">\n <a\n *ngFor=\"let child of item.children\"\n class=\"svu-sidebar__subnav-item\"\n [routerLink]=\"child.route\"\n routerLinkActive=\"svu-sidebar__subnav-item--active\"\n [routerLinkActiveOptions]=\"child.exact ? exactMatch : subsetMatch\"\n (click)=\"onItemClick(child)\">\n {{ child.label }}\n </a>\n </div>\n </ng-container>\n\n <!-- Item simple (hoja) -->\n <ng-template #leafItem>\n <a\n class=\"svu-sidebar__nav-item\"\n [routerLink]=\"item.route\"\n routerLinkActive=\"svu-sidebar__nav-item--active\"\n [routerLinkActiveOptions]=\"item.exact ? exactMatch : subsetMatch\"\n (click)=\"onItemClick(item)\">\n <div class=\"svu-sidebar__nav-item-content\">\n <svu-sidebar-icon *ngIf=\"item.icon\" [name]=\"item.icon\" class=\"svu-sidebar__nav-icon\"></svu-sidebar-icon>\n <span class=\"svu-sidebar__nav-text\">{{ item.label }}</span>\n </div>\n </a>\n </ng-template>\n </ng-container>\n </nav>\n </div>\n\n <!-- Footer: slot custom o default (user + logout) -->\n <div class=\"svu-sidebar__footer\">\n <div class=\"svu-sidebar__divider\"></div>\n\n <ng-container *ngIf=\"footerTpl; else defaultFooter\" [ngTemplateOutlet]=\"footerTpl\"></ng-container>\n\n <ng-template #defaultFooter>\n <div class=\"svu-sidebar__account-wrapper\" *ngIf=\"userName\">\n <div class=\"svu-sidebar__account\" (click)=\"toggleAccountMenu()\">\n <div class=\"svu-sidebar__avatar\">\n <span class=\"svu-sidebar__avatar-text\">{{ computedInitial }}</span>\n </div>\n <div class=\"svu-sidebar__user-info\">\n <span class=\"svu-sidebar__user-name\">{{ userName }}</span>\n <span class=\"svu-sidebar__user-email\" *ngIf=\"userEmail\">{{ userEmail }}</span>\n </div>\n </div>\n\n <div *ngIf=\"accountMenuOpen && showLogout\" class=\"svu-sidebar__account-menu\">\n <button type=\"button\" class=\"svu-sidebar__account-menu-item\" (click)=\"onLogoutClick()\">\n <svu-sidebar-icon name=\"logout\" [size]=\"20\"></svu-sidebar-icon>\n <span>{{ logoutLabel }}</span>\n </button>\n </div>\n </div>\n </ng-template>\n </div>\n </div>\n\n <div class=\"svu-sidebar__border\"></div>\n</aside>\n", styles: [".svu-sidebar{display:flex;width:312px;height:100%;background:#fff;flex-shrink:0}.svu-sidebar__content{display:flex;flex-direction:column;justify-content:space-between;flex:1;height:100%;min-width:0}.svu-sidebar__border{width:1px;height:100%;background-color:#e9eaeb;flex-shrink:0}.svu-sidebar__top{display:flex;flex-direction:column;gap:24px;padding-top:32px}.svu-sidebar__logo{padding:0 20px 0 24px}.svu-sidebar__logo-img{height:48px;width:auto}.svu-sidebar__nav{display:flex;flex-direction:column;gap:4px;padding:0 16px}.svu-sidebar__nav-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-radius:6px;cursor:pointer;transition:background-color .2s ease;text-decoration:none;color:inherit}.svu-sidebar__nav-item:hover,.svu-sidebar__nav-item--active{background-color:#fafafa}.svu-sidebar__nav-item--active .svu-sidebar__nav-text,.svu-sidebar__nav-item--active .svu-sidebar__nav-icon{color:#2e353a}.svu-sidebar__nav-item-content{display:flex;align-items:center;gap:12px}.svu-sidebar__nav-icon{flex-shrink:0;color:#585d61}.svu-sidebar__nav-text{font-family:Roboto,sans-serif;font-weight:600;font-size:16px;line-height:24px;color:#585d61}.svu-sidebar__nav-chevron{flex-shrink:0;color:#585d61;transition:transform .2s ease}.svu-sidebar__nav-chevron--open{transform:rotate(180deg)}.svu-sidebar__subnav{display:flex;flex-direction:column;gap:2px;padding-left:48px}.svu-sidebar__subnav-item{display:block;padding:6px 12px;border-radius:6px;font-family:Roboto,sans-serif;font-weight:400;font-size:14px;line-height:20px;color:#6d7275;text-decoration:none;cursor:pointer;transition:background-color .2s ease}.svu-sidebar__subnav-item:hover{background-color:#fafafa}.svu-sidebar__subnav-item--active{background-color:#fafafa;color:#2e353a;font-weight:600}.svu-sidebar__footer{display:flex;flex-direction:column;gap:24px;padding:0 16px 32px}.svu-sidebar__divider{height:1px;width:100%;background-color:#e9eaeb}.svu-sidebar__account-wrapper{position:relative}.svu-sidebar__account{display:flex;align-items:center;gap:12px;padding:8px;border-radius:8px;cursor:pointer;transition:background-color .2s ease}.svu-sidebar__account:hover{background-color:#fafafa}.svu-sidebar__account-menu{position:absolute;bottom:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid #E9EAEB;border-radius:8px;box-shadow:0 4px 16px #0000001a;padding:4px;z-index:10}.svu-sidebar__account-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;border:none;background:none;border-radius:6px;font-family:Roboto,sans-serif;font-weight:400;font-size:14px;line-height:20px;color:#d92d20;cursor:pointer;transition:background-color .2s ease}.svu-sidebar__account-menu-item:hover{background-color:#fef3f2}.svu-sidebar__avatar{width:40px;height:40px;border-radius:50%;background-color:#364b9f;display:flex;align-items:center;justify-content:center;flex-shrink:0}.svu-sidebar__avatar-text{font-family:Roboto,sans-serif;font-weight:600;font-size:16px;color:#fff}.svu-sidebar__user-info{display:flex;flex-direction:column;min-width:0}.svu-sidebar__user-name{font-family:Roboto,sans-serif;font-weight:600;font-size:14px;line-height:20px;color:#2e353a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.svu-sidebar__user-email{font-family:Roboto,sans-serif;font-weight:400;font-size:14px;line-height:20px;color:#6d7275;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
2323
+ }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { items: [{
2324
+ type: Input
2325
+ }], logoSrc: [{
2326
+ type: Input
2327
+ }], logoAlt: [{
2328
+ type: Input
2329
+ }], userName: [{
2330
+ type: Input
2331
+ }], userEmail: [{
2332
+ type: Input
2333
+ }], userInitial: [{
2334
+ type: Input
2335
+ }], showLogout: [{
2336
+ type: Input
2337
+ }], logoutLabel: [{
2338
+ type: Input
2339
+ }], itemClick: [{
2340
+ type: Output
2341
+ }], logout: [{
2342
+ type: Output
2343
+ }], logoTpl: [{
2344
+ type: ContentChild,
2345
+ args: ['sidebarLogo', { read: TemplateRef }]
2346
+ }], footerTpl: [{
2347
+ type: ContentChild,
2348
+ args: ['sidebarFooter', { read: TemplateRef }]
2349
+ }], onDocumentClick: [{
2350
+ type: HostListener,
2351
+ args: ['document:click', ['$event']]
2352
+ }] } });
2353
+
2157
2354
  class OptionComponent {
2158
2355
  elementRef;
2159
2356
  value;
@@ -3831,6 +4028,81 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
3831
4028
  `, styles: [".snackbar-container{position:fixed;z-index:999999;display:flex;flex-direction:column;gap:12px;max-width:644px;pointer-events:none}.snackbar-container--top-right{top:24px;right:24px}.snackbar-container--top-left{top:24px;left:24px}.snackbar-container--top-center{top:24px;left:50%;transform:translate(-50%)}.snackbar-container--bottom-right{bottom:24px;right:24px}.snackbar-container--bottom-left{bottom:24px;left:24px}.snackbar-container--bottom-center{bottom:24px;left:50%;transform:translate(-50%)}@media (max-width: 640px){.snackbar-container{left:16px!important;right:16px!important;max-width:none;transform:none!important}.snackbar-container--top-right,.snackbar-container--top-left,.snackbar-container--top-center{top:16px}.snackbar-container--bottom-right,.snackbar-container--bottom-left,.snackbar-container--bottom-center{bottom:16px}}.snackbar{display:flex;align-items:center;gap:12px;padding:16px;border-radius:8px;box-shadow:0 4px 12px #00000026;background:#fff;pointer-events:auto;min-width:300px;max-width:644px;animation:slideIn .3s ease-out}@keyframes slideIn{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@media (max-width: 640px){.snackbar{min-width:auto;max-width:none}}.snackbar--success{background:#f0fdf4;border:1px solid #22c55e}.snackbar--success .snackbar__icon{color:#22c55e}.snackbar--error{background:#fef3f2;border:1px solid #F04438}.snackbar--error .snackbar__icon{color:#f04438}.snackbar--warning{background:#fffbeb;border:1px solid #f59e0b}.snackbar--warning .snackbar__icon{color:#f59e0b}.snackbar--info{background:#eff6ff;border:1px solid #3b82f6}.snackbar--info .snackbar__icon{color:#3b82f6}.snackbar__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px}.snackbar__content{flex:1;min-width:0}.snackbar__message{margin:0;line-height:20px;word-wrap:break-word;font-family:Quicksand,sans-serif;font-weight:600;font-size:14px;color:#2e353a}.snackbar__action{flex-shrink:0;padding:6px 12px;border:none;border-radius:4px;background:transparent;color:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s}.snackbar__action:hover{background:#0000000d}.snackbar__action:active{background:#0000001a}.snackbar__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:4px;background:transparent;color:#2e353a;cursor:pointer;transition:all .2s}.snackbar__close:hover{background:#0000000d;color:#1f2937}.snackbar__close:active{background:#0000001a}.snackbar__close svg{width:14px;height:14px}\n"] }]
3832
4029
  }], ctorParameters: () => [{ type: SnackbarService }] });
3833
4030
 
4031
+ class AlertComponent {
4032
+ color = 'default';
4033
+ size = 'floating';
4034
+ alertTitle = '';
4035
+ supportingText;
4036
+ showIcon = true;
4037
+ showActions = true;
4038
+ actionVariant = 'link';
4039
+ dismissLabel = 'Descartar';
4040
+ primaryActionLabel = 'Ver cambios';
4041
+ showClose = true;
4042
+ closeAriaLabel = 'Cerrar';
4043
+ dismiss = new EventEmitter();
4044
+ primaryAction = new EventEmitter();
4045
+ closed = new EventEmitter();
4046
+ get alertClasses() {
4047
+ return [
4048
+ 'sv-alert',
4049
+ `sv-alert--${this.color}`,
4050
+ this.size === 'full-width' ? 'sv-alert--full-width' : ''
4051
+ ].filter(Boolean).join(' ');
4052
+ }
4053
+ get actionClass() {
4054
+ return this.actionVariant === 'button' ? 'sv-alert__btn' : 'sv-alert__action';
4055
+ }
4056
+ get primaryActionClass() {
4057
+ return this.actionVariant === 'button'
4058
+ ? 'sv-alert__btn sv-alert__btn--primary'
4059
+ : 'sv-alert__action sv-alert__action--primary';
4060
+ }
4061
+ handleDismiss() {
4062
+ this.dismiss.emit();
4063
+ }
4064
+ handlePrimaryAction() {
4065
+ this.primaryAction.emit();
4066
+ }
4067
+ handleClose() {
4068
+ this.closed.emit();
4069
+ }
4070
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4071
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AlertComponent, isStandalone: true, selector: "app-alert", inputs: { color: "color", size: "size", alertTitle: "alertTitle", supportingText: "supportingText", showIcon: "showIcon", showActions: "showActions", actionVariant: "actionVariant", dismissLabel: "dismissLabel", primaryActionLabel: "primaryActionLabel", showClose: "showClose", closeAriaLabel: "closeAriaLabel" }, outputs: { dismiss: "dismiss", primaryAction: "primaryAction", closed: "closed" }, ngImport: i0, template: "<div [class]=\"alertClasses\" role=\"alert\">\n <div class=\"sv-alert__container\">\n <div class=\"sv-alert__icon\" *ngIf=\"showIcon\" aria-hidden=\"true\">\n <svg *ngIf=\"color === 'error'\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7.86 2h8.28L22 7.86v8.28L16.14 22H7.86L2 16.14V7.86L7.86 2Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12 8v4M12 16h.01\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <svg *ngIf=\"color === 'warning'\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12 9v4M12 17h.01\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <svg *ngIf=\"color === 'success'\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M22 4 12 14.01l-3-3\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <svg *ngIf=\"color !== 'error' && color !== 'warning' && color !== 'success'\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12 16v-4M12 8h.01\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n <div class=\"sv-alert__content\">\n <div class=\"sv-alert__body\">\n <p class=\"sv-alert__title\">{{ alertTitle }}</p>\n <p class=\"sv-alert__text\" *ngIf=\"supportingText\">{{ supportingText }}</p>\n </div>\n\n <div class=\"sv-alert__actions\" *ngIf=\"showActions\">\n <button type=\"button\" [class]=\"actionClass\" (click)=\"handleDismiss()\">{{ dismissLabel }}</button>\n <button type=\"button\" [class]=\"primaryActionClass\" (click)=\"handlePrimaryAction()\">{{ primaryActionLabel }}</button>\n </div>\n </div>\n\n <button\n type=\"button\"\n class=\"sv-alert__close\"\n *ngIf=\"showClose\"\n [attr.aria-label]=\"closeAriaLabel\"\n (click)=\"handleClose()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M18 6 6 18M6 6l12 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n</div>\n", styles: [".sv-alert{--sv-alert-bg: #ffffff;--sv-alert-border: #d4d4d4;--sv-alert-icon-fg: #737373;--sv-alert-icon-bg: #ffffff;--sv-alert-title: #404040;--sv-alert-text: #525252;--sv-alert-link: #2b3c7f;--sv-alert-solid: #364b9f;position:relative;display:flex;flex-direction:column;align-items:center;width:100%;padding:32px;background-color:var(--sv-alert-bg);border:1px solid var(--sv-alert-border);border-radius:12px;box-shadow:0 1px 2px #0000000d;font-family:Roboto,sans-serif;box-sizing:border-box}.sv-alert *{box-sizing:border-box}.sv-alert__container{display:flex;align-items:flex-start;gap:32px;width:100%}.sv-alert__icon{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--sv-alert-border);border-radius:8px;background-color:var(--sv-alert-icon-bg);color:var(--sv-alert-icon-fg);box-shadow:0 1px 2px #0000000d,inset 0 0 0 1px #0000002e,inset 0 -2px #0000000d}.sv-alert__icon svg{width:20px;height:20px;display:block}.sv-alert__content{display:flex;flex:1 0 0;flex-direction:column;align-items:flex-start;gap:24px;min-width:0}.sv-alert__body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%}.sv-alert__title{margin:0;padding-right:56px;width:100%;font-family:Roboto,sans-serif;font-weight:600;font-size:14px;line-height:20px;color:var(--sv-alert-title);word-break:break-word}.sv-alert__text{margin:0;width:100%;font-family:Roboto,sans-serif;font-weight:400;font-size:14px;line-height:20px;color:var(--sv-alert-text);word-break:break-word}.sv-alert__actions{display:flex;align-items:center;gap:24px;flex-shrink:0}.sv-alert__action{padding:0;border:none;background:none;font-family:Roboto,sans-serif;font-weight:600;font-size:14px;line-height:20px;color:var(--sv-alert-text);white-space:nowrap;cursor:pointer;transition:opacity .2s ease-in-out}.sv-alert__action:hover{opacity:.7}.sv-alert__action:focus-visible{outline:2px solid var(--sv-alert-link);outline-offset:2px;border-radius:4px}.sv-alert__action--primary{color:var(--sv-alert-link)}.sv-alert__close{position:absolute;top:7px;right:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;padding:0;border:none;border-radius:8px;background:none;color:var(--sv-alert-icon-fg);cursor:pointer;transition:background-color .2s ease-in-out}.sv-alert__close:hover{background-color:#0000000d}.sv-alert__close:focus-visible{outline:2px solid var(--sv-alert-link);outline-offset:-2px}.sv-alert__close svg{width:20px;height:20px;display:block}.sv-alert--brand{--sv-alert-bg: #f3f4f9;--sv-alert-border: #2b3c7f;--sv-alert-icon-fg: #364b9f;--sv-alert-icon-bg: #e5e8f3}.sv-alert--gray{--sv-alert-icon-fg: #737373;--sv-alert-icon-bg: #f5f5f5}.sv-alert--error{--sv-alert-bg: #fef2f2;--sv-alert-border: #dc2626;--sv-alert-icon-fg: #dc2626;--sv-alert-icon-bg: #fee2e2}.sv-alert--warning{--sv-alert-bg: #fefce8;--sv-alert-border: #ca8a04;--sv-alert-icon-fg: #ca8a04;--sv-alert-icon-bg: #fef9c3}.sv-alert--success{--sv-alert-bg: #f0fdf4;--sv-alert-border: #16a34a;--sv-alert-icon-fg: #16a34a;--sv-alert-icon-bg: #dcfce7}.sv-alert--brand .sv-alert__icon,.sv-alert--gray .sv-alert__icon,.sv-alert--error .sv-alert__icon,.sv-alert--warning .sv-alert__icon,.sv-alert--success .sv-alert__icon{border:none;border-radius:9999px;box-shadow:none}.sv-alert--full-width{padding:0;border:none;border-bottom:1px solid var(--sv-alert-border);border-radius:0;box-shadow:none}.sv-alert--full-width .sv-alert__container{align-items:center;gap:24px;max-width:1280px;padding:24px 32px}.sv-alert--full-width .sv-alert__content{flex-direction:row;align-items:center;gap:24px}.sv-alert--full-width .sv-alert__body{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 12px;width:auto;flex:1 0 0;min-width:0}.sv-alert--full-width .sv-alert__title,.sv-alert--full-width .sv-alert__text{width:auto;padding-right:0}.sv-alert--full-width .sv-alert__close{position:static;align-self:center}.sv-alert__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 28px;border:1px solid var(--sv-alert-solid);border-radius:8px;background-color:#fff;font-family:Roboto,sans-serif;font-weight:600;font-size:14px;line-height:20px;color:var(--sv-alert-title);white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px #0000000d,inset 0 0 0 1px #0000002e,inset 0 -2px #0000000d;transition:filter .2s ease-in-out}.sv-alert__btn:hover{filter:brightness(.97)}.sv-alert__btn:focus-visible{outline:2px solid var(--sv-alert-solid);outline-offset:2px}.sv-alert__btn--primary{border-color:#ffffff1f;border-width:2px;background-color:var(--sv-alert-solid);color:#fff}@media (max-width: 768px){.sv-alert{padding:16px}.sv-alert__container{flex-direction:column;align-items:flex-start;gap:16px}.sv-alert__content{width:100%}.sv-alert__title{padding-right:40px}.sv-alert--full-width{padding:0}.sv-alert--full-width .sv-alert__container{flex-direction:column;align-items:flex-start;gap:32px;padding:32px 16px}.sv-alert--full-width .sv-alert__content{flex-direction:column;align-items:flex-start;gap:16px;width:100%}.sv-alert--full-width .sv-alert__body{flex-direction:column;gap:4px;width:100%}.sv-alert--full-width .sv-alert__actions:has(.sv-alert__btn){flex-direction:column-reverse;align-items:stretch;gap:12px;width:100%}.sv-alert--full-width .sv-alert__close{position:absolute;top:16px;right:8px}.sv-alert__btn{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
4072
+ }
4073
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AlertComponent, decorators: [{
4074
+ type: Component,
4075
+ args: [{ selector: 'app-alert', standalone: true, imports: [CommonModule], template: "<div [class]=\"alertClasses\" role=\"alert\">\n <div class=\"sv-alert__container\">\n <div class=\"sv-alert__icon\" *ngIf=\"showIcon\" aria-hidden=\"true\">\n <svg *ngIf=\"color === 'error'\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7.86 2h8.28L22 7.86v8.28L16.14 22H7.86L2 16.14V7.86L7.86 2Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12 8v4M12 16h.01\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <svg *ngIf=\"color === 'warning'\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12 9v4M12 17h.01\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <svg *ngIf=\"color === 'success'\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M22 4 12 14.01l-3-3\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <svg *ngIf=\"color !== 'error' && color !== 'warning' && color !== 'success'\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12 16v-4M12 8h.01\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n <div class=\"sv-alert__content\">\n <div class=\"sv-alert__body\">\n <p class=\"sv-alert__title\">{{ alertTitle }}</p>\n <p class=\"sv-alert__text\" *ngIf=\"supportingText\">{{ supportingText }}</p>\n </div>\n\n <div class=\"sv-alert__actions\" *ngIf=\"showActions\">\n <button type=\"button\" [class]=\"actionClass\" (click)=\"handleDismiss()\">{{ dismissLabel }}</button>\n <button type=\"button\" [class]=\"primaryActionClass\" (click)=\"handlePrimaryAction()\">{{ primaryActionLabel }}</button>\n </div>\n </div>\n\n <button\n type=\"button\"\n class=\"sv-alert__close\"\n *ngIf=\"showClose\"\n [attr.aria-label]=\"closeAriaLabel\"\n (click)=\"handleClose()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M18 6 6 18M6 6l12 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n</div>\n", styles: [".sv-alert{--sv-alert-bg: #ffffff;--sv-alert-border: #d4d4d4;--sv-alert-icon-fg: #737373;--sv-alert-icon-bg: #ffffff;--sv-alert-title: #404040;--sv-alert-text: #525252;--sv-alert-link: #2b3c7f;--sv-alert-solid: #364b9f;position:relative;display:flex;flex-direction:column;align-items:center;width:100%;padding:32px;background-color:var(--sv-alert-bg);border:1px solid var(--sv-alert-border);border-radius:12px;box-shadow:0 1px 2px #0000000d;font-family:Roboto,sans-serif;box-sizing:border-box}.sv-alert *{box-sizing:border-box}.sv-alert__container{display:flex;align-items:flex-start;gap:32px;width:100%}.sv-alert__icon{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--sv-alert-border);border-radius:8px;background-color:var(--sv-alert-icon-bg);color:var(--sv-alert-icon-fg);box-shadow:0 1px 2px #0000000d,inset 0 0 0 1px #0000002e,inset 0 -2px #0000000d}.sv-alert__icon svg{width:20px;height:20px;display:block}.sv-alert__content{display:flex;flex:1 0 0;flex-direction:column;align-items:flex-start;gap:24px;min-width:0}.sv-alert__body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%}.sv-alert__title{margin:0;padding-right:56px;width:100%;font-family:Roboto,sans-serif;font-weight:600;font-size:14px;line-height:20px;color:var(--sv-alert-title);word-break:break-word}.sv-alert__text{margin:0;width:100%;font-family:Roboto,sans-serif;font-weight:400;font-size:14px;line-height:20px;color:var(--sv-alert-text);word-break:break-word}.sv-alert__actions{display:flex;align-items:center;gap:24px;flex-shrink:0}.sv-alert__action{padding:0;border:none;background:none;font-family:Roboto,sans-serif;font-weight:600;font-size:14px;line-height:20px;color:var(--sv-alert-text);white-space:nowrap;cursor:pointer;transition:opacity .2s ease-in-out}.sv-alert__action:hover{opacity:.7}.sv-alert__action:focus-visible{outline:2px solid var(--sv-alert-link);outline-offset:2px;border-radius:4px}.sv-alert__action--primary{color:var(--sv-alert-link)}.sv-alert__close{position:absolute;top:7px;right:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;padding:0;border:none;border-radius:8px;background:none;color:var(--sv-alert-icon-fg);cursor:pointer;transition:background-color .2s ease-in-out}.sv-alert__close:hover{background-color:#0000000d}.sv-alert__close:focus-visible{outline:2px solid var(--sv-alert-link);outline-offset:-2px}.sv-alert__close svg{width:20px;height:20px;display:block}.sv-alert--brand{--sv-alert-bg: #f3f4f9;--sv-alert-border: #2b3c7f;--sv-alert-icon-fg: #364b9f;--sv-alert-icon-bg: #e5e8f3}.sv-alert--gray{--sv-alert-icon-fg: #737373;--sv-alert-icon-bg: #f5f5f5}.sv-alert--error{--sv-alert-bg: #fef2f2;--sv-alert-border: #dc2626;--sv-alert-icon-fg: #dc2626;--sv-alert-icon-bg: #fee2e2}.sv-alert--warning{--sv-alert-bg: #fefce8;--sv-alert-border: #ca8a04;--sv-alert-icon-fg: #ca8a04;--sv-alert-icon-bg: #fef9c3}.sv-alert--success{--sv-alert-bg: #f0fdf4;--sv-alert-border: #16a34a;--sv-alert-icon-fg: #16a34a;--sv-alert-icon-bg: #dcfce7}.sv-alert--brand .sv-alert__icon,.sv-alert--gray .sv-alert__icon,.sv-alert--error .sv-alert__icon,.sv-alert--warning .sv-alert__icon,.sv-alert--success .sv-alert__icon{border:none;border-radius:9999px;box-shadow:none}.sv-alert--full-width{padding:0;border:none;border-bottom:1px solid var(--sv-alert-border);border-radius:0;box-shadow:none}.sv-alert--full-width .sv-alert__container{align-items:center;gap:24px;max-width:1280px;padding:24px 32px}.sv-alert--full-width .sv-alert__content{flex-direction:row;align-items:center;gap:24px}.sv-alert--full-width .sv-alert__body{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 12px;width:auto;flex:1 0 0;min-width:0}.sv-alert--full-width .sv-alert__title,.sv-alert--full-width .sv-alert__text{width:auto;padding-right:0}.sv-alert--full-width .sv-alert__close{position:static;align-self:center}.sv-alert__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 28px;border:1px solid var(--sv-alert-solid);border-radius:8px;background-color:#fff;font-family:Roboto,sans-serif;font-weight:600;font-size:14px;line-height:20px;color:var(--sv-alert-title);white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px #0000000d,inset 0 0 0 1px #0000002e,inset 0 -2px #0000000d;transition:filter .2s ease-in-out}.sv-alert__btn:hover{filter:brightness(.97)}.sv-alert__btn:focus-visible{outline:2px solid var(--sv-alert-solid);outline-offset:2px}.sv-alert__btn--primary{border-color:#ffffff1f;border-width:2px;background-color:var(--sv-alert-solid);color:#fff}@media (max-width: 768px){.sv-alert{padding:16px}.sv-alert__container{flex-direction:column;align-items:flex-start;gap:16px}.sv-alert__content{width:100%}.sv-alert__title{padding-right:40px}.sv-alert--full-width{padding:0}.sv-alert--full-width .sv-alert__container{flex-direction:column;align-items:flex-start;gap:32px;padding:32px 16px}.sv-alert--full-width .sv-alert__content{flex-direction:column;align-items:flex-start;gap:16px;width:100%}.sv-alert--full-width .sv-alert__body{flex-direction:column;gap:4px;width:100%}.sv-alert--full-width .sv-alert__actions:has(.sv-alert__btn){flex-direction:column-reverse;align-items:stretch;gap:12px;width:100%}.sv-alert--full-width .sv-alert__close{position:absolute;top:16px;right:8px}.sv-alert__btn{width:100%}}\n"] }]
4076
+ }], propDecorators: { color: [{
4077
+ type: Input
4078
+ }], size: [{
4079
+ type: Input
4080
+ }], alertTitle: [{
4081
+ type: Input
4082
+ }], supportingText: [{
4083
+ type: Input
4084
+ }], showIcon: [{
4085
+ type: Input
4086
+ }], showActions: [{
4087
+ type: Input
4088
+ }], actionVariant: [{
4089
+ type: Input
4090
+ }], dismissLabel: [{
4091
+ type: Input
4092
+ }], primaryActionLabel: [{
4093
+ type: Input
4094
+ }], showClose: [{
4095
+ type: Input
4096
+ }], closeAriaLabel: [{
4097
+ type: Input
4098
+ }], dismiss: [{
4099
+ type: Output
4100
+ }], primaryAction: [{
4101
+ type: Output
4102
+ }], closed: [{
4103
+ type: Output
4104
+ }] } });
4105
+
3834
4106
  /*
3835
4107
  * Public API Surface of @up_si_vale/sivale-componentes-angular
3836
4108
  */
@@ -3840,5 +4112,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
3840
4112
  * Generated bundle index. Do not edit.
3841
4113
  */
3842
4114
 
3843
- export { ASSET_BASE_URL, AssetSourceDirective, ButtonComponent, CheckboxComponent, CopyInputComponent, DatePickerComponent, IconSourceDirective, InputComponent, LoaderComponent, MultiselectComponent, NoLeadingSpaceDirective, OnlyLettersDirective, OnlyNumberDirective, OptionComponent, PhoneInputComponent, RadioComponent, RfcDirective, SelectComponent, SelectPrefixDirective, SelectSuffixDirective, SnackbarComponent, SnackbarService, TextareaComponent, TooltipDirective };
4115
+ export { ASSET_BASE_URL, AlertComponent, AssetSourceDirective, ButtonComponent, CheckboxComponent, CopyInputComponent, DatePickerComponent, IconSourceDirective, InputComponent, LoaderComponent, MultiselectComponent, NoLeadingSpaceDirective, OnlyLettersDirective, OnlyNumberDirective, OptionComponent, PhoneInputComponent, RadioComponent, RfcDirective, SelectComponent, SelectPrefixDirective, SelectSuffixDirective, SidebarComponent, SidebarIconComponent, SnackbarComponent, SnackbarService, TextareaComponent, TooltipDirective };
3844
4116
  //# sourceMappingURL=up_si_vale-sivale-componentes-angular.mjs.map