sapenlinea-components 0.13.99 → 0.13.100
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.
|
@@ -8702,8 +8702,16 @@ class Header {
|
|
|
8702
8702
|
loadMoreNotifications = output();
|
|
8703
8703
|
isDropdownOpen = signal(false, ...(ngDevMode ? [{ debugName: "isDropdownOpen" }] : []));
|
|
8704
8704
|
isNotifOpen = signal(false, ...(ngDevMode ? [{ debugName: "isNotifOpen" }] : []));
|
|
8705
|
-
/**
|
|
8706
|
-
|
|
8705
|
+
/**
|
|
8706
|
+
* Total real de no leídas. Si se provee (p. ej. desde un endpoint /unread-count),
|
|
8707
|
+
* prevalece sobre el conteo derivado de la lista cargada. Así el badge muestra el
|
|
8708
|
+
* total desde la primera carga y no va creciendo con el scroll.
|
|
8709
|
+
*/
|
|
8710
|
+
unreadCount = input(null, ...(ngDevMode ? [{ debugName: "unreadCount" }] : []));
|
|
8711
|
+
/** Fallback: deriva el conteo de la lista cargada cuando no se provee el total. */
|
|
8712
|
+
derivedUnreadCount = computed(() => this.notifications().filter((n) => !n.isRead).length, ...(ngDevMode ? [{ debugName: "derivedUnreadCount" }] : []));
|
|
8713
|
+
/** Conteo que se muestra en la campana (total real si se pasó, si no el derivado). */
|
|
8714
|
+
displayUnreadCount = computed(() => this.unreadCount() ?? this.derivedUnreadCount(), ...(ngDevMode ? [{ debugName: "displayUnreadCount" }] : []));
|
|
8707
8715
|
onMenuClick() {
|
|
8708
8716
|
this.menuClick.emit();
|
|
8709
8717
|
}
|
|
@@ -8780,12 +8788,12 @@ class Header {
|
|
|
8780
8788
|
this.loadMoreNotifications.emit();
|
|
8781
8789
|
}
|
|
8782
8790
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Header, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8783
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Header, isStandalone: true, selector: "lib-header", inputs: { isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null }, activeTitle: { classPropertyName: "activeTitle", publicName: "activeTitle", isSignal: true, isRequired: false, transformFunction: null }, mfId: { classPropertyName: "mfId", publicName: "mfId", isSignal: true, isRequired: false, transformFunction: null }, isMfFailed: { classPropertyName: "isMfFailed", publicName: "isMfFailed", isSignal: true, isRequired: false, transformFunction: null }, userRole: { classPropertyName: "userRole", publicName: "userRole", isSignal: true, isRequired: false, transformFunction: null }, notifications: { classPropertyName: "notifications", publicName: "notifications", isSignal: true, isRequired: false, transformFunction: null }, notificationsLoading: { classPropertyName: "notificationsLoading", publicName: "notificationsLoading", isSignal: true, isRequired: false, transformFunction: null }, notificationsHasMore: { classPropertyName: "notificationsHasMore", publicName: "notificationsHasMore", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigateTo: "navigateTo", menuClick: "menuClick", profileClick: "profileClick", logoutClick: "logoutClick", actionClick: "actionClick", markAllRead: "markAllRead", notificationClick: "notificationClick", loadMoreNotifications: "loadMoreNotifications" }, ngImport: i0, template: "<header class=\"lib-header\">\n <div class=\"lib-header__left\" (click)=\"goToHome()\">\n <button class=\"lib-header__menu-btn\" type=\"button\" (click)=\"$event.stopPropagation(); onMenuClick()\">\n <span class=\"lib-header__menu-icon\">{{ getMenuIcon() }}</span>\n </button>\n <div class=\"lib-header__section-icons\">\n <div class=\"lib-header__icon lib-header__icon--first\"></div>\n <div class=\"lib-header__divider\"></div>\n <div class=\"lib-header__icon lib-header__icon--second\"></div>\n </div>\n </div>\n\n <div class=\"lib-header__title-container\">\n <div class=\"lib-header__title\">{{ activeTitle() }}</div>\n </div>\n\n <div class=\"lib-header__right\">\n @if (hasAction()) {\n <button class=\"lib-header__action-btn\" type=\"button\" (click)=\"onActionClick()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n <path d=\"M12 4a1 1 0 0 1 1 1v6h6a1 1 0 0 1 0 2h-6v6a1 1 0 0 1 -2 0v-6h-6a1 1 0 0 1 0 -2h6v-6a1 1 0 0 1 1 -1\"/>\n </svg>\n {{ getActionLabel() }}\n </button>\n }\n\n <div class=\"lib-header__notif-wrapper\">\n <lib-bell-with-badge\n [count]=\"unreadCount()\"\n [active]=\"isNotifOpen()\"\n (bellClick)=\"toggleNotifications()\"\n />\n\n <lib-notification-center\n [isOpen]=\"isNotifOpen()\"\n [notifications]=\"notifications()\"\n [loading]=\"notificationsLoading()\"\n [hasMore]=\"notificationsHasMore()\"\n (markAllRead)=\"onMarkAllRead()\"\n (notificationClick)=\"onNotificationItemClick($event)\"\n (loadMore)=\"onLoadMoreNotifications()\"\n (close)=\"closeNotifications()\"\n />\n </div>\n\n <div class=\"lib-header__user-info\" [class.lib-header__user-info--open]=\"isDropdownOpen()\" (click)=\"toggleDropdown()\">\n <div class=\"lib-header__user-avatar\">{{ userRole().charAt(0) }}</div>\n <svg class=\"lib-header__dropdown-arrow\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n <path d=\"M4 6l4 4 4-4H4z\"/>\n </svg>\n\n <div class=\"lib-header__dropdown-menu\" [class.lib-header__dropdown-menu--show]=\"isDropdownOpen()\" (click)=\"$event.stopPropagation()\">\n <div class=\"lib-header__dropdown-header\">\n <div class=\"lib-header__dropdown-avatar\">{{ userRole().charAt(0) }}</div>\n <div class=\"lib-header__dropdown-user-info\">\n <div class=\"lib-header__dropdown-user-name\">{{ userRole() }}</div>\n <div class=\"lib-header__dropdown-user-role\">Administrador</div>\n </div>\n </div>\n <div class=\"lib-header__dropdown-item\" (click)=\"userProfile()\">\n <svg class=\"lib-header__dropdown-item-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"/>\n <circle cx=\"12\" cy=\"7\" r=\"4\"/>\n </svg>\n Perfil\n </div>\n <div class=\"lib-header__dropdown-item lib-header__dropdown-item--danger\" (click)=\"logout()\">\n <svg class=\"lib-header__dropdown-item-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\"/>\n <polyline points=\"16,17 21,12 16,7\"/>\n <line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"/>\n </svg>\n Cerrar sesi\u00F3n\n </div>\n </div>\n </div>\n </div>\n</header>\n", styles: [":host{--lib-header-height: 75px;--lib-header-bg: #fafae8;--lib-header-text: #171c1f;--lib-header-accent: #bfd100;--lib-header-avatar-bg: #bfd100;--lib-header-user-chip-bg: #e3e3d1;--lib-header-divider: #d6d5d2}.lib-header{background-color:var(--lib-header-bg);height:var(--lib-header-height);display:flex;align-items:center;justify-content:space-between;padding:0 10px;position:fixed;top:0;left:0;right:0;z-index:200}.lib-header__left{display:flex;align-items:center;flex:1;justify-content:flex-start;cursor:pointer;gap:0}.lib-header__menu-btn{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--lib-header-text);border-radius:4px;transition:background-color .2s ease}.lib-header__menu-btn:hover{background-color:#0000001a}.lib-header__menu-icon{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center}.lib-header__section-icons{display:flex;align-items:center;gap:3px}.lib-header__icon{background-size:contain;background-repeat:no-repeat;background-position:center;flex-shrink:0}.lib-header__icon--first{width:54px;height:44px;border-radius:8px;margin-right:6px;background-image:url(/logo.png)}.lib-header__icon--second{width:140px;height:60px;margin-left:10px;background-image:url(/logos-secretaria-alcaldia.svg)}.lib-header__divider{width:1px;height:30px;background-color:var(--lib-header-divider);border-radius:1px;flex-shrink:0}.lib-header__title-container{display:flex;align-items:center;justify-content:center}.lib-header__title{font-size:26px;font-weight:600;color:var(--lib-header-text)}.lib-header__right{display:flex;align-items:center;gap:15px;flex:1;justify-content:flex-end}.lib-header__action-btn{display:inline-flex;align-items:center;gap:8px;background-color:#596300;color:#fff;border:none;border-radius:6px;padding:8px 16px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.lib-header__action-btn:hover{background-color:#4a5200}.lib-header__notif-wrapper{position:relative;display:inline-flex;align-items:center}.lib-header__user-info{display:flex;align-items:center;gap:8px;background-color:var(--lib-header-user-chip-bg);padding:5px;border-radius:24px;cursor:pointer;transition:background-color .2s ease;position:relative;justify-content:space-between;width:80px}.lib-header__user-info:hover:not(.lib-header__user-info--open){background-color:#d4d8dc}.lib-header__user-info--open{background-color:#eaeef2}.lib-header__user-avatar,.lib-header__dropdown-avatar{width:40px;height:40px;background-color:var(--lib-header-avatar-bg);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#111827;font-weight:600;font-size:16px;flex-shrink:0}.lib-header__dropdown-arrow{width:16px;height:16px;color:#666;flex-shrink:0;transition:transform .2s ease}.lib-header__user-info--open .lib-header__dropdown-arrow{transform:rotate(180deg)}.lib-header__dropdown-menu{position:absolute;top:100%;right:0;margin-top:8px;background-color:#fff;border-radius:12px;min-width:240px;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .2s ease;z-index:1001;box-shadow:5px 6px 5px -3px #0000005c}.lib-header__dropdown-menu--show{opacity:1;visibility:visible;transform:translateY(0)}.lib-header__dropdown-header{padding:16px 20px;border-bottom:2px solid #f0f0f0;display:flex;align-items:center;gap:12px}.lib-header__dropdown-user-info{flex:1}.lib-header__dropdown-user-name{font-size:16px;font-weight:600;color:var(--lib-header-text);margin-bottom:2px}.lib-header__dropdown-user-role{font-size:14px;color:#666}.lib-header__dropdown-item{display:flex;align-items:center;gap:12px;padding:12px 20px;color:var(--lib-header-text);font-size:14px;transition:background-color .2s ease;cursor:pointer}.lib-header__dropdown-item:hover{background-color:#f8f9fa}.lib-header__dropdown-item--danger{color:#dc3545}.lib-header__dropdown-item--danger:hover{background-color:#fff5f5;color:#a02834}.lib-header__dropdown-item-icon{width:15px;height:15px;flex-shrink:0}@media (max-width: 921px){.lib-header__title{display:none}}@media (max-width: 640px){.lib-header__section-icons{display:none}.lib-header__menu-btn{display:block}}@media (max-width: 480px){.lib-header{padding:0 8px}.lib-header__right{gap:10px}}@media (max-width: 360px){.lib-header{padding:0 6px}.lib-header__right{gap:8px}.lib-header__user-avatar{width:36px;height:36px;font-size:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: BellWithBadge, selector: "lib-bell-with-badge", inputs: ["count", "active", "ariaLabel"], outputs: ["bellClick"] }, { kind: "component", type: NotificationCenter, selector: "lib-notification-center", inputs: ["notifications", "isOpen", "loading", "hasMore"], outputs: ["markAllRead", "notificationClick", "close", "loadMore"] }] });
|
|
8791
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Header, isStandalone: true, selector: "lib-header", inputs: { isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null }, activeTitle: { classPropertyName: "activeTitle", publicName: "activeTitle", isSignal: true, isRequired: false, transformFunction: null }, mfId: { classPropertyName: "mfId", publicName: "mfId", isSignal: true, isRequired: false, transformFunction: null }, isMfFailed: { classPropertyName: "isMfFailed", publicName: "isMfFailed", isSignal: true, isRequired: false, transformFunction: null }, userRole: { classPropertyName: "userRole", publicName: "userRole", isSignal: true, isRequired: false, transformFunction: null }, notifications: { classPropertyName: "notifications", publicName: "notifications", isSignal: true, isRequired: false, transformFunction: null }, notificationsLoading: { classPropertyName: "notificationsLoading", publicName: "notificationsLoading", isSignal: true, isRequired: false, transformFunction: null }, notificationsHasMore: { classPropertyName: "notificationsHasMore", publicName: "notificationsHasMore", isSignal: true, isRequired: false, transformFunction: null }, unreadCount: { classPropertyName: "unreadCount", publicName: "unreadCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigateTo: "navigateTo", menuClick: "menuClick", profileClick: "profileClick", logoutClick: "logoutClick", actionClick: "actionClick", markAllRead: "markAllRead", notificationClick: "notificationClick", loadMoreNotifications: "loadMoreNotifications" }, ngImport: i0, template: "<header class=\"lib-header\">\n <div class=\"lib-header__left\" (click)=\"goToHome()\">\n <button class=\"lib-header__menu-btn\" type=\"button\" (click)=\"$event.stopPropagation(); onMenuClick()\">\n <span class=\"lib-header__menu-icon\">{{ getMenuIcon() }}</span>\n </button>\n <div class=\"lib-header__section-icons\">\n <div class=\"lib-header__icon lib-header__icon--first\"></div>\n <div class=\"lib-header__divider\"></div>\n <div class=\"lib-header__icon lib-header__icon--second\"></div>\n </div>\n </div>\n\n <div class=\"lib-header__title-container\">\n <div class=\"lib-header__title\">{{ activeTitle() }}</div>\n </div>\n\n <div class=\"lib-header__right\">\n @if (hasAction()) {\n <lib-button (clicked)=\"onActionClick()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n <path d=\"M12 4a1 1 0 0 1 1 1v6h6a1 1 0 0 1 0 2h-6v6a1 1 0 0 1 -2 0v-6h-6a1 1 0 0 1 0 -2h6v-6a1 1 0 0 1 1 -1\"/>\n </svg>\n {{ getActionLabel() }}\n </lib-button>\n }\n\n <div class=\"lib-header__notif-wrapper\">\n <lib-bell-with-badge\n [count]=\"displayUnreadCount()\"\n [active]=\"isNotifOpen()\"\n (bellClick)=\"toggleNotifications()\"\n />\n\n <lib-notification-center\n [isOpen]=\"isNotifOpen()\"\n [notifications]=\"notifications()\"\n [loading]=\"notificationsLoading()\"\n [hasMore]=\"notificationsHasMore()\"\n (markAllRead)=\"onMarkAllRead()\"\n (notificationClick)=\"onNotificationItemClick($event)\"\n (loadMore)=\"onLoadMoreNotifications()\"\n (close)=\"closeNotifications()\"\n />\n </div>\n\n <div class=\"lib-header__user-info\" [class.lib-header__user-info--open]=\"isDropdownOpen()\" (click)=\"toggleDropdown()\">\n <div class=\"lib-header__user-avatar\">{{ userRole().charAt(0) }}</div>\n <svg class=\"lib-header__dropdown-arrow\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n <path d=\"M4 6l4 4 4-4H4z\"/>\n </svg>\n\n <div class=\"lib-header__dropdown-menu\" [class.lib-header__dropdown-menu--show]=\"isDropdownOpen()\" (click)=\"$event.stopPropagation()\">\n <div class=\"lib-header__dropdown-header\">\n <div class=\"lib-header__dropdown-avatar\">{{ userRole().charAt(0) }}</div>\n <div class=\"lib-header__dropdown-user-info\">\n <div class=\"lib-header__dropdown-user-name\">{{ userRole() }}</div>\n <div class=\"lib-header__dropdown-user-role\">Administrador</div>\n </div>\n </div>\n <div class=\"lib-header__dropdown-item\" (click)=\"userProfile()\">\n <svg class=\"lib-header__dropdown-item-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"/>\n <circle cx=\"12\" cy=\"7\" r=\"4\"/>\n </svg>\n Perfil\n </div>\n <div class=\"lib-header__dropdown-item lib-header__dropdown-item--danger\" (click)=\"logout()\">\n <svg class=\"lib-header__dropdown-item-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\"/>\n <polyline points=\"16,17 21,12 16,7\"/>\n <line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"/>\n </svg>\n Cerrar sesi\u00F3n\n </div>\n </div>\n </div>\n </div>\n</header>\n", styles: [":host{--lib-header-height: 75px;--lib-header-bg: #fafae8;--lib-header-text: #171c1f;--lib-header-accent: #bfd100;--lib-header-avatar-bg: #bfd100;--lib-header-user-chip-bg: #e3e3d1;--lib-header-divider: #d6d5d2}.lib-header{background-color:var(--lib-header-bg);height:var(--lib-header-height);display:flex;align-items:center;justify-content:space-between;padding:0 10px;position:fixed;top:0;left:0;right:0;z-index:200}.lib-header__left{display:flex;align-items:center;flex:1;justify-content:flex-start;cursor:pointer;gap:0}.lib-header__menu-btn{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--lib-header-text);border-radius:4px;transition:background-color .2s ease}.lib-header__menu-btn:hover{background-color:#0000001a}.lib-header__menu-icon{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center}.lib-header__section-icons{display:flex;align-items:center;gap:3px}.lib-header__icon{background-size:contain;background-repeat:no-repeat;background-position:center;flex-shrink:0}.lib-header__icon--first{width:54px;height:44px;border-radius:8px;margin-right:6px;background-image:url(/logo.png)}.lib-header__icon--second{width:140px;height:60px;margin-left:10px;background-image:url(/logos-secretaria-alcaldia.svg)}.lib-header__divider{width:1px;height:30px;background-color:var(--lib-header-divider);border-radius:1px;flex-shrink:0}.lib-header__title-container{display:flex;align-items:center;justify-content:center}.lib-header__title{font-size:26px;font-weight:600;color:var(--lib-header-text)}.lib-header__right{display:flex;align-items:center;gap:15px;flex:1;justify-content:flex-end}.lib-header__notif-wrapper{position:relative;display:inline-flex;align-items:center}.lib-header__user-info{display:flex;align-items:center;gap:8px;background-color:var(--lib-header-user-chip-bg);padding:5px;border-radius:24px;cursor:pointer;transition:background-color .2s ease;position:relative;justify-content:space-between;width:80px}.lib-header__user-info:hover:not(.lib-header__user-info--open){background-color:#d4d8dc}.lib-header__user-info--open{background-color:#eaeef2}.lib-header__user-avatar,.lib-header__dropdown-avatar{width:40px;height:40px;background-color:var(--lib-header-avatar-bg);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#111827;font-weight:600;font-size:16px;flex-shrink:0}.lib-header__dropdown-arrow{width:16px;height:16px;color:#666;flex-shrink:0;transition:transform .2s ease}.lib-header__user-info--open .lib-header__dropdown-arrow{transform:rotate(180deg)}.lib-header__dropdown-menu{position:absolute;top:100%;right:0;margin-top:8px;background-color:#fff;border-radius:12px;min-width:240px;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .2s ease;z-index:1001;box-shadow:5px 6px 5px -3px #0000005c}.lib-header__dropdown-menu--show{opacity:1;visibility:visible;transform:translateY(0)}.lib-header__dropdown-header{padding:16px 20px;border-bottom:2px solid #f0f0f0;display:flex;align-items:center;gap:12px}.lib-header__dropdown-user-info{flex:1}.lib-header__dropdown-user-name{font-size:16px;font-weight:600;color:var(--lib-header-text);margin-bottom:2px}.lib-header__dropdown-user-role{font-size:14px;color:#666}.lib-header__dropdown-item{display:flex;align-items:center;gap:12px;padding:12px 20px;color:var(--lib-header-text);font-size:14px;transition:background-color .2s ease;cursor:pointer}.lib-header__dropdown-item:hover{background-color:#f8f9fa}.lib-header__dropdown-item--danger{color:#dc3545}.lib-header__dropdown-item--danger:hover{background-color:#fff5f5;color:#a02834}.lib-header__dropdown-item-icon{width:15px;height:15px;flex-shrink:0}@media (max-width: 921px){.lib-header__title{display:none}}@media (max-width: 640px){.lib-header__section-icons{display:none}.lib-header__menu-btn{display:block}}@media (max-width: 480px){.lib-header{padding:0 8px}.lib-header__right{gap:10px}}@media (max-width: 360px){.lib-header{padding:0 6px}.lib-header__right{gap:8px}.lib-header__user-avatar{width:36px;height:36px;font-size:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "lib-button", inputs: ["variant", "type", "disabled", "fullWidth", "size"], outputs: ["clicked"] }, { kind: "component", type: BellWithBadge, selector: "lib-bell-with-badge", inputs: ["count", "active", "ariaLabel"], outputs: ["bellClick"] }, { kind: "component", type: NotificationCenter, selector: "lib-notification-center", inputs: ["notifications", "isOpen", "loading", "hasMore"], outputs: ["markAllRead", "notificationClick", "close", "loadMore"] }] });
|
|
8784
8792
|
}
|
|
8785
8793
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Header, decorators: [{
|
|
8786
8794
|
type: Component,
|
|
8787
|
-
args: [{ selector: 'lib-header', standalone: true, imports: [CommonModule, BellWithBadge, NotificationCenter], template: "<header class=\"lib-header\">\n <div class=\"lib-header__left\" (click)=\"goToHome()\">\n <button class=\"lib-header__menu-btn\" type=\"button\" (click)=\"$event.stopPropagation(); onMenuClick()\">\n <span class=\"lib-header__menu-icon\">{{ getMenuIcon() }}</span>\n </button>\n <div class=\"lib-header__section-icons\">\n <div class=\"lib-header__icon lib-header__icon--first\"></div>\n <div class=\"lib-header__divider\"></div>\n <div class=\"lib-header__icon lib-header__icon--second\"></div>\n </div>\n </div>\n\n <div class=\"lib-header__title-container\">\n <div class=\"lib-header__title\">{{ activeTitle() }}</div>\n </div>\n\n <div class=\"lib-header__right\">\n @if (hasAction()) {\n <
|
|
8788
|
-
}], propDecorators: { isExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExpanded", required: false }] }], activeTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTitle", required: false }] }], mfId: [{ type: i0.Input, args: [{ isSignal: true, alias: "mfId", required: false }] }], isMfFailed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMfFailed", required: false }] }], userRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "userRole", required: false }] }], notifications: [{ type: i0.Input, args: [{ isSignal: true, alias: "notifications", required: false }] }], notificationsLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "notificationsLoading", required: false }] }], notificationsHasMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "notificationsHasMore", required: false }] }], navigateTo: [{ type: i0.Output, args: ["navigateTo"] }], menuClick: [{ type: i0.Output, args: ["menuClick"] }], profileClick: [{ type: i0.Output, args: ["profileClick"] }], logoutClick: [{ type: i0.Output, args: ["logoutClick"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], markAllRead: [{ type: i0.Output, args: ["markAllRead"] }], notificationClick: [{ type: i0.Output, args: ["notificationClick"] }], loadMoreNotifications: [{ type: i0.Output, args: ["loadMoreNotifications"] }] } });
|
|
8795
|
+
args: [{ selector: 'lib-header', standalone: true, imports: [CommonModule, Button, BellWithBadge, NotificationCenter], template: "<header class=\"lib-header\">\n <div class=\"lib-header__left\" (click)=\"goToHome()\">\n <button class=\"lib-header__menu-btn\" type=\"button\" (click)=\"$event.stopPropagation(); onMenuClick()\">\n <span class=\"lib-header__menu-icon\">{{ getMenuIcon() }}</span>\n </button>\n <div class=\"lib-header__section-icons\">\n <div class=\"lib-header__icon lib-header__icon--first\"></div>\n <div class=\"lib-header__divider\"></div>\n <div class=\"lib-header__icon lib-header__icon--second\"></div>\n </div>\n </div>\n\n <div class=\"lib-header__title-container\">\n <div class=\"lib-header__title\">{{ activeTitle() }}</div>\n </div>\n\n <div class=\"lib-header__right\">\n @if (hasAction()) {\n <lib-button (clicked)=\"onActionClick()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n <path d=\"M12 4a1 1 0 0 1 1 1v6h6a1 1 0 0 1 0 2h-6v6a1 1 0 0 1 -2 0v-6h-6a1 1 0 0 1 0 -2h6v-6a1 1 0 0 1 1 -1\"/>\n </svg>\n {{ getActionLabel() }}\n </lib-button>\n }\n\n <div class=\"lib-header__notif-wrapper\">\n <lib-bell-with-badge\n [count]=\"displayUnreadCount()\"\n [active]=\"isNotifOpen()\"\n (bellClick)=\"toggleNotifications()\"\n />\n\n <lib-notification-center\n [isOpen]=\"isNotifOpen()\"\n [notifications]=\"notifications()\"\n [loading]=\"notificationsLoading()\"\n [hasMore]=\"notificationsHasMore()\"\n (markAllRead)=\"onMarkAllRead()\"\n (notificationClick)=\"onNotificationItemClick($event)\"\n (loadMore)=\"onLoadMoreNotifications()\"\n (close)=\"closeNotifications()\"\n />\n </div>\n\n <div class=\"lib-header__user-info\" [class.lib-header__user-info--open]=\"isDropdownOpen()\" (click)=\"toggleDropdown()\">\n <div class=\"lib-header__user-avatar\">{{ userRole().charAt(0) }}</div>\n <svg class=\"lib-header__dropdown-arrow\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n <path d=\"M4 6l4 4 4-4H4z\"/>\n </svg>\n\n <div class=\"lib-header__dropdown-menu\" [class.lib-header__dropdown-menu--show]=\"isDropdownOpen()\" (click)=\"$event.stopPropagation()\">\n <div class=\"lib-header__dropdown-header\">\n <div class=\"lib-header__dropdown-avatar\">{{ userRole().charAt(0) }}</div>\n <div class=\"lib-header__dropdown-user-info\">\n <div class=\"lib-header__dropdown-user-name\">{{ userRole() }}</div>\n <div class=\"lib-header__dropdown-user-role\">Administrador</div>\n </div>\n </div>\n <div class=\"lib-header__dropdown-item\" (click)=\"userProfile()\">\n <svg class=\"lib-header__dropdown-item-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"/>\n <circle cx=\"12\" cy=\"7\" r=\"4\"/>\n </svg>\n Perfil\n </div>\n <div class=\"lib-header__dropdown-item lib-header__dropdown-item--danger\" (click)=\"logout()\">\n <svg class=\"lib-header__dropdown-item-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\"/>\n <polyline points=\"16,17 21,12 16,7\"/>\n <line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"/>\n </svg>\n Cerrar sesi\u00F3n\n </div>\n </div>\n </div>\n </div>\n</header>\n", styles: [":host{--lib-header-height: 75px;--lib-header-bg: #fafae8;--lib-header-text: #171c1f;--lib-header-accent: #bfd100;--lib-header-avatar-bg: #bfd100;--lib-header-user-chip-bg: #e3e3d1;--lib-header-divider: #d6d5d2}.lib-header{background-color:var(--lib-header-bg);height:var(--lib-header-height);display:flex;align-items:center;justify-content:space-between;padding:0 10px;position:fixed;top:0;left:0;right:0;z-index:200}.lib-header__left{display:flex;align-items:center;flex:1;justify-content:flex-start;cursor:pointer;gap:0}.lib-header__menu-btn{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--lib-header-text);border-radius:4px;transition:background-color .2s ease}.lib-header__menu-btn:hover{background-color:#0000001a}.lib-header__menu-icon{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center}.lib-header__section-icons{display:flex;align-items:center;gap:3px}.lib-header__icon{background-size:contain;background-repeat:no-repeat;background-position:center;flex-shrink:0}.lib-header__icon--first{width:54px;height:44px;border-radius:8px;margin-right:6px;background-image:url(/logo.png)}.lib-header__icon--second{width:140px;height:60px;margin-left:10px;background-image:url(/logos-secretaria-alcaldia.svg)}.lib-header__divider{width:1px;height:30px;background-color:var(--lib-header-divider);border-radius:1px;flex-shrink:0}.lib-header__title-container{display:flex;align-items:center;justify-content:center}.lib-header__title{font-size:26px;font-weight:600;color:var(--lib-header-text)}.lib-header__right{display:flex;align-items:center;gap:15px;flex:1;justify-content:flex-end}.lib-header__notif-wrapper{position:relative;display:inline-flex;align-items:center}.lib-header__user-info{display:flex;align-items:center;gap:8px;background-color:var(--lib-header-user-chip-bg);padding:5px;border-radius:24px;cursor:pointer;transition:background-color .2s ease;position:relative;justify-content:space-between;width:80px}.lib-header__user-info:hover:not(.lib-header__user-info--open){background-color:#d4d8dc}.lib-header__user-info--open{background-color:#eaeef2}.lib-header__user-avatar,.lib-header__dropdown-avatar{width:40px;height:40px;background-color:var(--lib-header-avatar-bg);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#111827;font-weight:600;font-size:16px;flex-shrink:0}.lib-header__dropdown-arrow{width:16px;height:16px;color:#666;flex-shrink:0;transition:transform .2s ease}.lib-header__user-info--open .lib-header__dropdown-arrow{transform:rotate(180deg)}.lib-header__dropdown-menu{position:absolute;top:100%;right:0;margin-top:8px;background-color:#fff;border-radius:12px;min-width:240px;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .2s ease;z-index:1001;box-shadow:5px 6px 5px -3px #0000005c}.lib-header__dropdown-menu--show{opacity:1;visibility:visible;transform:translateY(0)}.lib-header__dropdown-header{padding:16px 20px;border-bottom:2px solid #f0f0f0;display:flex;align-items:center;gap:12px}.lib-header__dropdown-user-info{flex:1}.lib-header__dropdown-user-name{font-size:16px;font-weight:600;color:var(--lib-header-text);margin-bottom:2px}.lib-header__dropdown-user-role{font-size:14px;color:#666}.lib-header__dropdown-item{display:flex;align-items:center;gap:12px;padding:12px 20px;color:var(--lib-header-text);font-size:14px;transition:background-color .2s ease;cursor:pointer}.lib-header__dropdown-item:hover{background-color:#f8f9fa}.lib-header__dropdown-item--danger{color:#dc3545}.lib-header__dropdown-item--danger:hover{background-color:#fff5f5;color:#a02834}.lib-header__dropdown-item-icon{width:15px;height:15px;flex-shrink:0}@media (max-width: 921px){.lib-header__title{display:none}}@media (max-width: 640px){.lib-header__section-icons{display:none}.lib-header__menu-btn{display:block}}@media (max-width: 480px){.lib-header{padding:0 8px}.lib-header__right{gap:10px}}@media (max-width: 360px){.lib-header{padding:0 6px}.lib-header__right{gap:8px}.lib-header__user-avatar{width:36px;height:36px;font-size:12px}}\n"] }]
|
|
8796
|
+
}], propDecorators: { isExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExpanded", required: false }] }], activeTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTitle", required: false }] }], mfId: [{ type: i0.Input, args: [{ isSignal: true, alias: "mfId", required: false }] }], isMfFailed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMfFailed", required: false }] }], userRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "userRole", required: false }] }], notifications: [{ type: i0.Input, args: [{ isSignal: true, alias: "notifications", required: false }] }], notificationsLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "notificationsLoading", required: false }] }], notificationsHasMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "notificationsHasMore", required: false }] }], navigateTo: [{ type: i0.Output, args: ["navigateTo"] }], menuClick: [{ type: i0.Output, args: ["menuClick"] }], profileClick: [{ type: i0.Output, args: ["profileClick"] }], logoutClick: [{ type: i0.Output, args: ["logoutClick"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], markAllRead: [{ type: i0.Output, args: ["markAllRead"] }], notificationClick: [{ type: i0.Output, args: ["notificationClick"] }], loadMoreNotifications: [{ type: i0.Output, args: ["loadMoreNotifications"] }], unreadCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "unreadCount", required: false }] }] } });
|
|
8789
8797
|
|
|
8790
8798
|
// src/app/components/public-api.ts
|
|
8791
8799
|
// Exportar los componentes
|