@unopsitg/ux 21.0.19 → 21.0.20

package/fesm2022/unopsitg-ux.mjs

@@ -35,27 +35,25 @@ import * as i4$2 from 'primeng/ripple';
 import { RippleModule } from 'primeng/ripple';
 import * as i3$3 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
-import * as i10 from 'primeng/avatar';
+import * as i9 from 'primeng/avatar';
 import { AvatarModule } from 'primeng/avatar';
-import * as i8 from 'primeng/badge';
+import * as i7 from 'primeng/badge';
 import { BadgeModule } from 'primeng/badge';
-import * as i5$1 from 'primeng/iconfield';
+import * as i4$3 from 'primeng/iconfield';
 import { IconFieldModule } from 'primeng/iconfield';
-import * as i6 from 'primeng/inputicon';
+import * as i5$1 from 'primeng/inputicon';
 import { InputIconModule } from 'primeng/inputicon';
-import * as i9 from 'primeng/overlaybadge';
+import * as i8 from 'primeng/overlaybadge';
 import { OverlayBadgeModule } from 'primeng/overlaybadge';
-import * as i3$4 from 'primeng/styleclass';
-import { StyleClassModule } from 'primeng/styleclass';
 import * as i2$2 from 'primeng/paginator';
 import { PaginatorModule } from 'primeng/paginator';
-import * as i4$3 from 'primeng/tabs';
+import * as i4$4 from 'primeng/tabs';
 import { TabsModule } from 'primeng/tabs';
-import * as i3$5 from 'primeng/fileupload';
+import * as i3$4 from 'primeng/fileupload';
 import { FileUploadModule } from 'primeng/fileupload';
-import * as i7 from 'primeng/menu';
+import * as i7$1 from 'primeng/menu';
 import { MenuModule } from 'primeng/menu';
-import * as i10$1 from 'primeng/panel';
+import * as i10 from 'primeng/panel';
 import { PanelModule } from 'primeng/panel';
 import * as i8$1 from 'primeng/table';
 import { TableModule } from 'primeng/table';
@@ -63,7 +61,7 @@ import * as i9$1 from 'primeng/tag';
 import { TagModule } from 'primeng/tag';
 import * as i8$2 from 'primeng/autocomplete';
 import { AutoCompleteModule } from 'primeng/autocomplete';
-import * as i7$1 from 'primeng/datepicker';
+import * as i7$2 from 'primeng/datepicker';
 import { DatePickerModule } from 'primeng/datepicker';
 import * as i5$2 from 'primeng/textarea';
 import { TextareaModule } from 'primeng/textarea';
@@ -1630,12 +1628,13 @@ class AppTopbar {
     isDarkTheme = computed(() => this.layoutService.isDarkTheme(), ...(ngDevMode ? [{ debugName: "isDarkTheme" }] : []));
     isSidebarPinned = computed(() => this.layoutService.isSidebarPinned(), ...(ngDevMode ? [{ debugName: "isSidebarPinned" }] : []));
     searchActive = signal(false, ...(ngDevMode ? [{ debugName: "searchActive" }] : []));
-    profileMenuOpen = signal(false, ...(ngDevMode ? [{ debugName: "profileMenuOpen" }] : []));
+    activeDropdown = signal(null, ...(ngDevMode ? [{ debugName: "activeDropdown" }] : []));
     shouldFocusSearch = false;
     menuButton;
     searchInput;
+    notificationsItem;
+    languageItem;
     profileItem;
-    profilePanel;
     notificationsBars = signal([
         {
             id: 'inbox',
@@ -1656,21 +1655,21 @@ class AppTopbar {
             id: 'inbox',
             data: [
                 {
-                    image: 'demo/images/avatar/avatar-square-m-2.jpg',
+                    initials: 'ML',
                     name: 'Michael Lee',
                     description: 'You have a new message from the support team regarding your recent inquiry.',
                     time: '1 hour ago',
                     new: true
                 },
                 {
-                    image: 'demo/images/avatar/avatar-square-f-1.jpg',
+                    initials: 'AJ',
                     name: 'Alice Johnson',
                     description: 'Your report has been successfully submitted and is under review.',
                     time: '10 minutes ago',
                     new: true
                 },
                 {
-                    image: 'demo/images/avatar/avatar-square-f-2.jpg',
+                    initials: 'ED',
                     name: 'Emily Davis',
                     description: 'The project deadline has been updated to September 30th. Please check the details.',
                     time: 'Yesterday at 4:35 PM',
@@ -1682,14 +1681,14 @@ class AppTopbar {
             id: 'general',
             data: [
                 {
-                    image: 'demo/images/avatar/avatar-square-f-1.jpg',
+                    initials: 'AJ',
                     name: 'Alice Johnson',
                     description: 'Reminder: Your subscription is about to expire in 3 days. Renew now to avoid interruption.',
                     time: '30 minutes ago',
                     new: true
                 },
                 {
-                    image: 'demo/images/avatar/avatar-square-m-2.jpg',
+                    initials: 'ML',
                     name: 'Michael Lee',
                     description: 'The server maintenance has been completed successfully. No further downtime is expected.',
                     time: 'Yesterday at 2:15 PM',
@@ -1701,14 +1700,14 @@ class AppTopbar {
             id: 'archived',
             data: [
                 {
-                    image: 'demo/images/avatar/avatar-square-m-1.jpg',
+                    initials: 'LB',
                     name: 'Lucas Brown',
                     description: 'Your appointment with Dr. Anderson has been confirmed for October 12th at 10:00 AM.',
                     time: '1 week ago',
                     new: true
                 },
                 {
-                    image: 'demo/images/avatar/avatar-square-f-2.jpg',
+                    initials: 'ED',
                     name: 'Emily Davis',
                     description: 'The document you uploaded has been successfully archived for future reference.',
                     time: '2 weeks ago',
@@ -1718,9 +1717,9 @@ class AppTopbar {
         }
     ], ...(ngDevMode ? [{ debugName: "notifications" }] : []));
     languages = signal([
-        { code: 'en', label: 'English', flag: '🇬🇧' },
-        { code: 'fr', label: 'French', flag: '🇫🇷' },
-        { code: 'es', label: 'Spanish', flag: '🇪🇸' }
+        { code: 'en', label: 'English', flag: '\u{1F1EC}\u{1F1E7}' },
+        { code: 'fr', label: 'French', flag: '\u{1F1EB}\u{1F1F7}' },
+        { code: 'es', label: 'Spanish', flag: '\u{1F1EA}\u{1F1F8}' }
     ], ...(ngDevMode ? [{ debugName: "languages" }] : []));
     selectedLanguage = signal('en', ...(ngDevMode ? [{ debugName: "selectedLanguage" }] : []));
     selectedNotificationBar = model(this.notificationsBars()[0].id ?? 'inbox', ...(ngDevMode ? [{ debugName: "selectedNotificationBar" }] : []));
@@ -1745,18 +1744,27 @@ class AppTopbar {
     }
     selectLanguage(code) {
         this.selectedLanguage.set(code);
+        this.closeDropdown();
     }
-    toggleProfileMenu(event) {
+    toggleDropdown(id, event) {
         event.stopPropagation();
-        this.profileMenuOpen.update((open) => !open);
+        this.activeDropdown.update((current) => (current === id ? null : id));
+    }
+    closeDropdown() {
+        this.activeDropdown.set(null);
     }
     onDocumentClick(event) {
-        if (!this.profileMenuOpen())
+        if (!this.activeDropdown())
             return;
         const target = event.target;
-        const insideProfile = this.profileItem?.nativeElement?.contains(target);
-        if (!insideProfile) {
-            this.profileMenuOpen.set(false);
+        const containers = [
+            this.notificationsItem?.nativeElement,
+            this.languageItem?.nativeElement,
+            this.profileItem?.nativeElement
+        ];
+        const insideAny = containers.some((el) => el?.contains(target));
+        if (!insideAny) {
+            this.closeDropdown();
         }
     }
     openSearch() {
@@ -1776,7 +1784,7 @@ class AppTopbar {
         this.layoutService.toggleSearchBar();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppTopbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: AppTopbar, isStandalone: true, selector: "[app-topbar]", inputs: { selectedNotificationBar: { classPropertyName: "selectedNotificationBar", publicName: "selectedNotificationBar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedNotificationBar: "selectedNotificationBarChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuButton", first: true, predicate: ["menubutton"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "profileItem", first: true, predicate: ["profileItem"], descendants: true }, { propertyName: "profilePanel", first: true, predicate: ["profilePanel"], descendants: true }], ngImport: i0, template: `<div class="layout-topbar">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: AppTopbar, isStandalone: true, selector: "[app-topbar]", inputs: { selectedNotificationBar: { classPropertyName: "selectedNotificationBar", publicName: "selectedNotificationBar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedNotificationBar: "selectedNotificationBarChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuButton", first: true, predicate: ["menubutton"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "notificationsItem", first: true, predicate: ["notificationsItem"], descendants: true }, { propertyName: "languageItem", first: true, predicate: ["languageItem"], descendants: true }, { propertyName: "profileItem", first: true, predicate: ["profileItem"], descendants: true }], ngImport: i0, template: `<div class="layout-topbar">
         <button type="button" class="mobile-menu-button" aria-label="Toggle navigation menu" (click)="onMenuButtonClick()">
             <i class="pi pi-bars"></i>
         </button>
@@ -1827,56 +1835,56 @@ class AppTopbar {
                         <i [class]="isDarkTheme() ? 'pi pi-sun' : 'pi pi-moon'"></i>
                     </a>
                 </li>
-                <li class="right-sidebar-item static sm:relative z-50">
-                    <a class="right-sidebar-button" aria-label="Notifications" pStyleClass="@next" enterFromClass="hidden" enterActiveClass="animate-scalein" leaveActiveClass="animate-fadeout" leaveToClass="hidden" [hideOnOutsideClick]="true">
+                <li class="right-sidebar-item static sm:relative z-50" #notificationsItem>
+                    <a class="right-sidebar-button" aria-label="Notifications" (click)="toggleDropdown('notifications', $event)">
                         <span class="w-2 h-2 rounded-full bg-red-500 absolute top-2 right-2.5"></span>
                         <i class="pi pi-bell"></i>
                     </a>
-                    <div
-                        class="list-none m-0 rounded-2xl border border-surface fixed sm:absolute bg-surface-0 dark:bg-surface-900 overflow-hidden hidden origin-top w-[calc(100vw-2rem)] sm:w-88 mt-2 z-50 top-auto left-4 sm:left-auto sm:right-0 shadow-flyout"
-                    >
-                        <div class="p-4 flex items-center justify-between border-b border-surface">
-                            <span class="label-small text-surface-950 dark:text-surface-0">Notifications</span>
-                            <button pRipple class="py-1 px-2 text-surface-950 dark:text-surface-0 label-x-small hover:bg-emphasis border border-surface rounded-lg shadow-subtle transition-all">Mark all as read</button>
-                        </div>
-                        <div class="flex items-center border-b border-surface">
-                            @for (item of notificationsBars(); track item.id; let i = $index) {
-                                <button
-                                    [ngClass]="{ 'border-surface-950 dark:border-surface-0': selectedNotificationBar() === item.id, 'border-transparent': selectedNotificationBar() !== item.id }"
-                                    class="px-3.5 py-2 inline-flex items-center border-b gap-2"
-                                    (click)="selectedNotificationBar.set(item.id)"
-                                >
-                                    <span [ngClass]="{ 'text-surface-950 dark:text-surface-0': selectedNotificationBar() === item.id }" class="label-small">{{ item.label }}</span>
-                                    <p-badge *ngIf="item?.badge" [value]="item.badge" severity="success" size="small" class="rounded-md!" />
-                                </button>
-                            }
-                        </div>
-                        <ul class="flex flex-col divide-y divide-(--surface-border) max-h-80 overflow-auto">
-                            @for (item of selectedNotificationsBarData(); track item.name; let i = $index) {
-                                <li>
-                                    <div class="flex items-center gap-3 px-4 sm:px-6 py-3.5 cursor-pointer hover:bg-emphasis transition-all">
-                                        <p-overlay-badge value="" severity="danger" class="inline-flex">
-                                            <p-avatar size="large">
-                                                <img [src]="item.image" [alt]="item.name" class="rounded-lg" />
-                                            </p-avatar>
-                                        </p-overlay-badge>
-                                        <div class="flex items-center gap-3">
-                                            <div class="flex flex-col">
-                                                <span class="label-small text-left text-surface-950 dark:text-surface-0">{{ item.name }}</span>
-                                                <span class="label-xsmall text-left line-clamp-1">{{ item.description }}</span>
-                                                <span class="label-xsmall text-left">{{ item.time }}</span>
+                    @if (activeDropdown() === 'notifications') {
+                        <div
+                            class="list-none m-0 rounded-2xl border border-surface fixed sm:absolute bg-surface-0 dark:bg-surface-900 overflow-hidden origin-top w-[calc(100vw-2rem)] sm:w-88 mt-2 z-50 top-auto left-4 sm:left-auto sm:right-0 shadow-flyout animate-scalein"
+                        >
+                            <div class="p-4 flex items-center justify-between border-b border-surface">
+                                <span class="label-small text-surface-950 dark:text-surface-0">Notifications</span>
+                                <button pRipple class="py-1 px-2 text-surface-950 dark:text-surface-0 label-x-small hover:bg-emphasis border border-surface rounded-lg shadow-subtle transition-all">Mark all as read</button>
+                            </div>
+                            <div class="flex items-center border-b border-surface">
+                                @for (item of notificationsBars(); track item.id; let i = $index) {
+                                    <button
+                                        [ngClass]="{ 'border-surface-950 dark:border-surface-0': selectedNotificationBar() === item.id, 'border-transparent': selectedNotificationBar() !== item.id }"
+                                        class="px-3.5 py-2 inline-flex items-center border-b gap-2"
+                                        (click)="selectedNotificationBar.set(item.id)"
+                                    >
+                                        <span [ngClass]="{ 'text-surface-950 dark:text-surface-0': selectedNotificationBar() === item.id }" class="label-small">{{ item.label }}</span>
+                                        <p-badge *ngIf="item?.badge" [value]="item.badge" severity="success" size="small" class="rounded-md!" />
+                                    </button>
+                                }
+                            </div>
+                            <ul class="flex flex-col divide-y divide-(--surface-border) max-h-80 overflow-auto">
+                                @for (item of selectedNotificationsBarData(); track item.name; let i = $index) {
+                                    <li>
+                                        <div class="flex items-center gap-3 px-4 sm:px-6 py-3.5 cursor-pointer hover:bg-emphasis transition-all">
+                                            <p-overlay-badge value="" severity="danger" class="inline-flex">
+                                                <p-avatar [label]="item.initials" size="large" styleClass="rounded-lg" />
+                                            </p-overlay-badge>
+                                            <div class="flex items-center gap-3">
+                                                <div class="flex flex-col">
+                                                    <span class="label-small text-left text-surface-950 dark:text-surface-0">{{ item.name }}</span>
+                                                    <span class="label-xsmall text-left line-clamp-1">{{ item.description }}</span>
+                                                    <span class="label-xsmall text-left">{{ item.time }}</span>
+                                                </div>
+                                                <p-badge *ngIf="item.new" value="" severity="success" />
                                             </div>
-                                            <p-badge *ngIf="item.new" value="" severity="success" />
                                         </div>
-                                    </div>
-                                    <span *ngIf="i !== notifications().length - 1"></span>
-                                </li>
-                            }
-                        </ul>
-                    </div>
+                                        <span *ngIf="i !== notifications().length - 1"></span>
+                                    </li>
+                                }
+                            </ul>
+                        </div>
+                    }
                 </li>
-                <li class="right-sidebar-item static sm:relative">
-                    <a class="right-sidebar-button relative z-50" aria-label="Change language" pStyleClass="@next" enterFromClass="hidden" enterActiveClass="animate-scalein" leaveActiveClass="animate-fadeout" leaveToClass="hidden" [hideOnOutsideClick]="true">
+                <li class="right-sidebar-item static sm:relative" #languageItem>
+                    <a class="right-sidebar-button relative z-50" aria-label="Change language" (click)="toggleDropdown('language', $event)">
                         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                             <path d="m5 8 6 6"/>
                             <path d="m4 14 6-6 2-3"/>
@@ -1886,109 +1894,111 @@ class AppTopbar {
                             <path d="M14 18h6"/>
                         </svg>
                     </a>
-                    <div
-                        class="list-none p-2 m-0 rounded-2xl border border-surface overflow-hidden fixed sm:absolute bg-surface-0 dark:bg-surface-900 hidden origin-top w-44 mt-2 right-4 sm:right-0 z-999 top-auto shadow-flyout"
-                    >
-                        <ul class="flex flex-col gap-1">
-                            @for (lang of languages(); track lang.code) {
-                                <li>
-                                    <a
-                                        class="label-small dark:text-surface-400 flex gap-2.5 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer"
-                                        [class.text-surface-950]="selectedLanguage() === lang.code"
-                                        [class.dark:text-surface-0]="selectedLanguage() === lang.code"
-                                        [class.font-semibold]="selectedLanguage() === lang.code"
-                                        (click)="selectLanguage(lang.code)"
-                                    >
-                                        <span class="text-lg">{{ lang.flag }}</span>
-                                        <span>{{ lang.label }}</span>
-                                    </a>
-                                </li>
-                            }
-                        </ul>
-                    </div>
+                    @if (activeDropdown() === 'language') {
+                        <div
+                            class="list-none p-2 m-0 rounded-2xl border border-surface overflow-hidden fixed sm:absolute bg-surface-0 dark:bg-surface-900 origin-top w-44 mt-2 right-4 sm:right-0 z-999 top-auto shadow-flyout animate-scalein"
+                        >
+                            <ul class="flex flex-col gap-1">
+                                @for (lang of languages(); track lang.code) {
+                                    <li>
+                                        <a
+                                            class="label-small dark:text-surface-400 flex gap-2.5 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer"
+                                            [class.text-surface-950]="selectedLanguage() === lang.code"
+                                            [class.dark:text-surface-0]="selectedLanguage() === lang.code"
+                                            [class.font-semibold]="selectedLanguage() === lang.code"
+                                            (click)="selectLanguage(lang.code)"
+                                        >
+                                            <span class="text-lg">{{ lang.flag }}</span>
+                                            <span>{{ lang.label }}</span>
+                                        </a>
+                                    </li>
+                                }
+                            </ul>
+                        </div>
+                    }
                 </li>
                 <li class="profile-item static sm:relative" #profileItem>
-                    <a class="right-sidebar-button relative z-50" aria-label="User profile menu" (click)="toggleProfileMenu($event)">
+                    <a class="right-sidebar-button relative z-50" aria-label="User profile menu" (click)="toggleDropdown('profile', $event)">
                         <p-avatar icon="pi pi-user" styleClass="w-10! h-10!" />
                     </a>
-                    <div
-                        #profilePanel
-                        class="list-none p-2 m-0 rounded-2xl border border-surface overflow-hidden fixed sm:absolute bg-surface-0 dark:bg-surface-900 origin-top w-52 mt-2 right-4 sm:right-0 z-999 top-auto shadow-flyout"
-                        [class.hidden]="!profileMenuOpen()"
-                        [class.animate-scalein]="profileMenuOpen()"
-                    >
-                        <ul class="flex flex-col gap-1">
-                            <div class="mobile-profile-actions">
+                    @if (activeDropdown() === 'profile') {
+                        <div
+                            #profilePanel
+                            class="list-none p-2 m-0 rounded-2xl border border-surface overflow-hidden fixed sm:absolute bg-surface-0 dark:bg-surface-900 origin-top w-52 mt-2 right-4 sm:right-0 z-999 top-auto shadow-flyout animate-scalein"
+                        >
+                            <ul class="flex flex-col gap-1">
+                                <div class="mobile-profile-actions">
+                                    <li>
+                                        <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="closeDropdown(); openSearch()">
+                                            <i class="pi pi-search"></i>
+                                            <span>Search</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="closeDropdown(); toggleDarkMode()">
+                                            <i [class]="isDarkTheme() ? 'pi pi-sun' : 'pi pi-moon'"></i>
+                                            <span>{{ isDarkTheme() ? 'Light Mode' : 'Dark Mode' }}</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer relative" (click)="closeDropdown()">
+                                            <i class="pi pi-bell"></i>
+                                            <span>Notifications</span>
+                                            <span class="w-2 h-2 rounded-full bg-red-500 ml-auto"></span>
+                                        </a>
+                                    </li>
+                                    <li class="border-b border-surface pb-1 mb-1">
+                                        <span class="label-xsmall px-2.5 py-1 text-surface-400">Language</span>
+                                        @for (lang of languages(); track lang.code) {
+                                            <a
+                                                class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer"
+                                                [class.text-surface-950]="selectedLanguage() === lang.code"
+                                                [class.dark:text-surface-0]="selectedLanguage() === lang.code"
+                                                [class.font-semibold]="selectedLanguage() === lang.code"
+                                                (click)="closeDropdown(); selectLanguage(lang.code)"
+                                            >
+                                                <span class="text-lg">{{ lang.flag }}</span>
+                                                <span>{{ lang.label }}</span>
+                                                @if (selectedLanguage() === lang.code) {
+                                                    <i class="pi pi-check ml-auto text-xs"></i>
+                                                }
+                                            </a>
+                                        }
+                                    </li>
+                                </div>
                                 <li>
-                                    <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="profileMenuOpen.set(false); openSearch()">
-                                        <i class="pi pi-search"></i>
-                                        <span>Search</span>
+                                    <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="closeDropdown()">
+                                        <i class="pi pi-user"></i>
+                                        <span>Profile</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="profileMenuOpen.set(false); toggleDarkMode()">
-                                        <i [class]="isDarkTheme() ? 'pi pi-sun' : 'pi pi-moon'"></i>
-                                        <span>{{ isDarkTheme() ? 'Light Mode' : 'Dark Mode' }}</span>
+                                    <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="closeDropdown(); onConfigButtonClick()">
+                                        <i class="pi pi-cog"></i>
+                                        <span>Settings</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer relative" (click)="profileMenuOpen.set(false)">
-                                        <i class="pi pi-bell"></i>
-                                        <span>Notifications</span>
-                                        <span class="w-2 h-2 rounded-full bg-red-500 ml-auto"></span>
+                                    <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="closeDropdown()">
+                                        <i class="pi pi-calendar"></i>
+                                        <span>Calendar</span>
                                     </a>
                                 </li>
-                                <li class="border-b border-surface pb-1 mb-1">
-                                    <span class="label-xsmall px-2.5 py-1 text-surface-400">Language</span>
-                                    @for (lang of languages(); track lang.code) {
-                                        <a
-                                            class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer"
-                                            [class.text-surface-950]="selectedLanguage() === lang.code"
-                                            [class.dark:text-surface-0]="selectedLanguage() === lang.code"
-                                            [class.font-semibold]="selectedLanguage() === lang.code"
-                                            (click)="profileMenuOpen.set(false); selectLanguage(lang.code)"
-                                        >
-                                            <span class="text-lg">{{ lang.flag }}</span>
-                                            <span>{{ lang.label }}</span>
-                                            @if (selectedLanguage() === lang.code) {
-                                                <i class="pi pi-check ml-auto text-xs"></i>
-                                            }
-                                        </a>
-                                    }
+                                <li>
+                                    <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="closeDropdown()">
+                                        <i class="pi pi-inbox"></i>
+                                        <span>Inbox</span>
+                                    </a>
                                 </li>
-                            </div>
-                            <li>
-                                <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="profileMenuOpen.set(false)">
-                                    <i class="pi pi-user"></i>
-                                    <span>Profile</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="profileMenuOpen.set(false); onConfigButtonClick()">
-                                    <i class="pi pi-cog"></i>
-                                    <span>Settings</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="profileMenuOpen.set(false)">
-                                    <i class="pi pi-calendar"></i>
-                                    <span>Calendar</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="profileMenuOpen.set(false)">
-                                    <i class="pi pi-inbox"></i>
-                                    <span>Inbox</span>
-                                </a>
-                            </li>
-                            <li class="border-t border-surface mt-1 pt-1">
-                                <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="profileMenuOpen.set(false)">
-                                    <i class="pi pi-power-off"></i>
-                                    <span>Log out</span>
-                                </a>
-                            </li>
-                        </ul>
-                    </div>
+                                <li class="border-t border-surface mt-1 pt-1">
+                                    <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="closeDropdown()">
+                                        <i class="pi pi-power-off"></i>
+                                        <span>Log out</span>
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                    }
                 </li>
                 </ul>
             </div>
@@ -1997,13 +2007,13 @@ class AppTopbar {
         <a class="mobile-logo" [routerLink]="['/']">
             <img [src]="mobileLogo()" [attr.alt]="mobileLogoConfig.alt" />
         </a>
-    </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i3$4.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "component", type: AppBreadcrumb, selector: "[app-breadcrumb]" }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i5$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i6.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i4$2.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i8.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "ngmodule", type: OverlayBadgeModule }, { kind: "component", type: i9.OverlayBadge, selector: "p-overlayBadge, p-overlay-badge, p-overlaybadge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i10.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }] });
+    </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AppBreadcrumb, selector: "[app-breadcrumb]" }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i4$3.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i5$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i4$2.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i7.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "ngmodule", type: OverlayBadgeModule }, { kind: "component", type: i8.OverlayBadge, selector: "p-overlayBadge, p-overlay-badge, p-overlaybadge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i9.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppTopbar, decorators: [{
             type: Component,
             args: [{
                     selector: '[app-topbar]',
-                    imports: [RouterModule, CommonModule, StyleClassModule, AppBreadcrumb, InputTextModule, ButtonModule, IconFieldModule, InputIconModule, RippleModule, BadgeModule, OverlayBadgeModule, AvatarModule],
+                    imports: [RouterModule, CommonModule, AppBreadcrumb, InputTextModule, ButtonModule, IconFieldModule, InputIconModule, RippleModule, BadgeModule, OverlayBadgeModule, AvatarModule],
                     template: `<div class="layout-topbar">
         <button type="button" class="mobile-menu-button" aria-label="Toggle navigation menu" (click)="onMenuButtonClick()">
             <i class="pi pi-bars"></i>
@@ -2055,56 +2065,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         <i [class]="isDarkTheme() ? 'pi pi-sun' : 'pi pi-moon'"></i>
                     </a>
                 </li>
-                <li class="right-sidebar-item static sm:relative z-50">
-                    <a class="right-sidebar-button" aria-label="Notifications" pStyleClass="@next" enterFromClass="hidden" enterActiveClass="animate-scalein" leaveActiveClass="animate-fadeout" leaveToClass="hidden" [hideOnOutsideClick]="true">
+                <li class="right-sidebar-item static sm:relative z-50" #notificationsItem>
+                    <a class="right-sidebar-button" aria-label="Notifications" (click)="toggleDropdown('notifications', $event)">
                         <span class="w-2 h-2 rounded-full bg-red-500 absolute top-2 right-2.5"></span>
                         <i class="pi pi-bell"></i>
                     </a>
-                    <div
-                        class="list-none m-0 rounded-2xl border border-surface fixed sm:absolute bg-surface-0 dark:bg-surface-900 overflow-hidden hidden origin-top w-[calc(100vw-2rem)] sm:w-88 mt-2 z-50 top-auto left-4 sm:left-auto sm:right-0 shadow-flyout"
-                    >
-                        <div class="p-4 flex items-center justify-between border-b border-surface">
-                            <span class="label-small text-surface-950 dark:text-surface-0">Notifications</span>
-                            <button pRipple class="py-1 px-2 text-surface-950 dark:text-surface-0 label-x-small hover:bg-emphasis border border-surface rounded-lg shadow-subtle transition-all">Mark all as read</button>
-                        </div>
-                        <div class="flex items-center border-b border-surface">
-                            @for (item of notificationsBars(); track item.id; let i = $index) {
-                                <button
-                                    [ngClass]="{ 'border-surface-950 dark:border-surface-0': selectedNotificationBar() === item.id, 'border-transparent': selectedNotificationBar() !== item.id }"
-                                    class="px-3.5 py-2 inline-flex items-center border-b gap-2"
-                                    (click)="selectedNotificationBar.set(item.id)"
-                                >
-                                    <span [ngClass]="{ 'text-surface-950 dark:text-surface-0': selectedNotificationBar() === item.id }" class="label-small">{{ item.label }}</span>
-                                    <p-badge *ngIf="item?.badge" [value]="item.badge" severity="success" size="small" class="rounded-md!" />
-                                </button>
-                            }
-                        </div>
-                        <ul class="flex flex-col divide-y divide-(--surface-border) max-h-80 overflow-auto">
-                            @for (item of selectedNotificationsBarData(); track item.name; let i = $index) {
-                                <li>
-                                    <div class="flex items-center gap-3 px-4 sm:px-6 py-3.5 cursor-pointer hover:bg-emphasis transition-all">
-                                        <p-overlay-badge value="" severity="danger" class="inline-flex">
-                                            <p-avatar size="large">
-                                                <img [src]="item.image" [alt]="item.name" class="rounded-lg" />
-                                            </p-avatar>
-                                        </p-overlay-badge>
-                                        <div class="flex items-center gap-3">
-                                            <div class="flex flex-col">
-                                                <span class="label-small text-left text-surface-950 dark:text-surface-0">{{ item.name }}</span>
-                                                <span class="label-xsmall text-left line-clamp-1">{{ item.description }}</span>
-                                                <span class="label-xsmall text-left">{{ item.time }}</span>
+                    @if (activeDropdown() === 'notifications') {
+                        <div
+                            class="list-none m-0 rounded-2xl border border-surface fixed sm:absolute bg-surface-0 dark:bg-surface-900 overflow-hidden origin-top w-[calc(100vw-2rem)] sm:w-88 mt-2 z-50 top-auto left-4 sm:left-auto sm:right-0 shadow-flyout animate-scalein"
+                        >
+                            <div class="p-4 flex items-center justify-between border-b border-surface">
+                                <span class="label-small text-surface-950 dark:text-surface-0">Notifications</span>
+                                <button pRipple class="py-1 px-2 text-surface-950 dark:text-surface-0 label-x-small hover:bg-emphasis border border-surface rounded-lg shadow-subtle transition-all">Mark all as read</button>
+                            </div>
+                            <div class="flex items-center border-b border-surface">
+                                @for (item of notificationsBars(); track item.id; let i = $index) {
+                                    <button
+                                        [ngClass]="{ 'border-surface-950 dark:border-surface-0': selectedNotificationBar() === item.id, 'border-transparent': selectedNotificationBar() !== item.id }"
+                                        class="px-3.5 py-2 inline-flex items-center border-b gap-2"
+                                        (click)="selectedNotificationBar.set(item.id)"
+                                    >
+                                        <span [ngClass]="{ 'text-surface-950 dark:text-surface-0': selectedNotificationBar() === item.id }" class="label-small">{{ item.label }}</span>
+                                        <p-badge *ngIf="item?.badge" [value]="item.badge" severity="success" size="small" class="rounded-md!" />
+                                    </button>
+                                }
+                            </div>
+                            <ul class="flex flex-col divide-y divide-(--surface-border) max-h-80 overflow-auto">
+                                @for (item of selectedNotificationsBarData(); track item.name; let i = $index) {
+                                    <li>
+                                        <div class="flex items-center gap-3 px-4 sm:px-6 py-3.5 cursor-pointer hover:bg-emphasis transition-all">
+                                            <p-overlay-badge value="" severity="danger" class="inline-flex">
+                                                <p-avatar [label]="item.initials" size="large" styleClass="rounded-lg" />
+                                            </p-overlay-badge>
+                                            <div class="flex items-center gap-3">
+                                                <div class="flex flex-col">
+                                                    <span class="label-small text-left text-surface-950 dark:text-surface-0">{{ item.name }}</span>
+                                                    <span class="label-xsmall text-left line-clamp-1">{{ item.description }}</span>
+                                                    <span class="label-xsmall text-left">{{ item.time }}</span>
+                                                </div>
+                                                <p-badge *ngIf="item.new" value="" severity="success" />
                                             </div>
-                                            <p-badge *ngIf="item.new" value="" severity="success" />
                                         </div>
-                                    </div>
-                                    <span *ngIf="i !== notifications().length - 1"></span>
-                                </li>
-                            }
-                        </ul>
-                    </div>
+                                        <span *ngIf="i !== notifications().length - 1"></span>
+                                    </li>
+                                }
+                            </ul>
+                        </div>
+                    }
                 </li>
-                <li class="right-sidebar-item static sm:relative">
-                    <a class="right-sidebar-button relative z-50" aria-label="Change language" pStyleClass="@next" enterFromClass="hidden" enterActiveClass="animate-scalein" leaveActiveClass="animate-fadeout" leaveToClass="hidden" [hideOnOutsideClick]="true">
+                <li class="right-sidebar-item static sm:relative" #languageItem>
+                    <a class="right-sidebar-button relative z-50" aria-label="Change language" (click)="toggleDropdown('language', $event)">
                         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                             <path d="m5 8 6 6"/>
                             <path d="m4 14 6-6 2-3"/>
@@ -2114,109 +2124,111 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                             <path d="M14 18h6"/>
                         </svg>
                     </a>
-                    <div
-                        class="list-none p-2 m-0 rounded-2xl border border-surface overflow-hidden fixed sm:absolute bg-surface-0 dark:bg-surface-900 hidden origin-top w-44 mt-2 right-4 sm:right-0 z-999 top-auto shadow-flyout"
-                    >
-                        <ul class="flex flex-col gap-1">
-                            @for (lang of languages(); track lang.code) {
-                                <li>
-                                    <a
-                                        class="label-small dark:text-surface-400 flex gap-2.5 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer"
-                                        [class.text-surface-950]="selectedLanguage() === lang.code"
-                                        [class.dark:text-surface-0]="selectedLanguage() === lang.code"
-                                        [class.font-semibold]="selectedLanguage() === lang.code"
-                                        (click)="selectLanguage(lang.code)"
-                                    >
-                                        <span class="text-lg">{{ lang.flag }}</span>
-                                        <span>{{ lang.label }}</span>
-                                    </a>
-                                </li>
-                            }
-                        </ul>
-                    </div>
+                    @if (activeDropdown() === 'language') {
+                        <div
+                            class="list-none p-2 m-0 rounded-2xl border border-surface overflow-hidden fixed sm:absolute bg-surface-0 dark:bg-surface-900 origin-top w-44 mt-2 right-4 sm:right-0 z-999 top-auto shadow-flyout animate-scalein"
+                        >
+                            <ul class="flex flex-col gap-1">
+                                @for (lang of languages(); track lang.code) {
+                                    <li>
+                                        <a
+                                            class="label-small dark:text-surface-400 flex gap-2.5 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer"
+                                            [class.text-surface-950]="selectedLanguage() === lang.code"
+                                            [class.dark:text-surface-0]="selectedLanguage() === lang.code"
+                                            [class.font-semibold]="selectedLanguage() === lang.code"
+                                            (click)="selectLanguage(lang.code)"
+                                        >
+                                            <span class="text-lg">{{ lang.flag }}</span>
+                                            <span>{{ lang.label }}</span>
+                                        </a>
+                                    </li>
+                                }
+                            </ul>
+                        </div>
+                    }
                 </li>
                 <li class="profile-item static sm:relative" #profileItem>
-                    <a class="right-sidebar-button relative z-50" aria-label="User profile menu" (click)="toggleProfileMenu($event)">
+                    <a class="right-sidebar-button relative z-50" aria-label="User profile menu" (click)="toggleDropdown('profile', $event)">
                         <p-avatar icon="pi pi-user" styleClass="w-10! h-10!" />
                     </a>
-                    <div
-                        #profilePanel
-                        class="list-none p-2 m-0 rounded-2xl border border-surface overflow-hidden fixed sm:absolute bg-surface-0 dark:bg-surface-900 origin-top w-52 mt-2 right-4 sm:right-0 z-999 top-auto shadow-flyout"
-                        [class.hidden]="!profileMenuOpen()"
-                        [class.animate-scalein]="profileMenuOpen()"
-                    >
-                        <ul class="flex flex-col gap-1">
-                            <div class="mobile-profile-actions">
+                    @if (activeDropdown() === 'profile') {
+                        <div
+                            #profilePanel
+                            class="list-none p-2 m-0 rounded-2xl border border-surface overflow-hidden fixed sm:absolute bg-surface-0 dark:bg-surface-900 origin-top w-52 mt-2 right-4 sm:right-0 z-999 top-auto shadow-flyout animate-scalein"
+                        >
+                            <ul class="flex flex-col gap-1">
+                                <div class="mobile-profile-actions">
+                                    <li>
+                                        <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="closeDropdown(); openSearch()">
+                                            <i class="pi pi-search"></i>
+                                            <span>Search</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="closeDropdown(); toggleDarkMode()">
+                                            <i [class]="isDarkTheme() ? 'pi pi-sun' : 'pi pi-moon'"></i>
+                                            <span>{{ isDarkTheme() ? 'Light Mode' : 'Dark Mode' }}</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer relative" (click)="closeDropdown()">
+                                            <i class="pi pi-bell"></i>
+                                            <span>Notifications</span>
+                                            <span class="w-2 h-2 rounded-full bg-red-500 ml-auto"></span>
+                                        </a>
+                                    </li>
+                                    <li class="border-b border-surface pb-1 mb-1">
+                                        <span class="label-xsmall px-2.5 py-1 text-surface-400">Language</span>
+                                        @for (lang of languages(); track lang.code) {
+                                            <a
+                                                class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer"
+                                                [class.text-surface-950]="selectedLanguage() === lang.code"
+                                                [class.dark:text-surface-0]="selectedLanguage() === lang.code"
+                                                [class.font-semibold]="selectedLanguage() === lang.code"
+                                                (click)="closeDropdown(); selectLanguage(lang.code)"
+                                            >
+                                                <span class="text-lg">{{ lang.flag }}</span>
+                                                <span>{{ lang.label }}</span>
+                                                @if (selectedLanguage() === lang.code) {
+                                                    <i class="pi pi-check ml-auto text-xs"></i>
+                                                }
+                                            </a>
+                                        }
+                                    </li>
+                                </div>
                                 <li>
-                                    <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="profileMenuOpen.set(false); openSearch()">
-                                        <i class="pi pi-search"></i>
-                                        <span>Search</span>
+                                    <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="closeDropdown()">
+                                        <i class="pi pi-user"></i>
+                                        <span>Profile</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="profileMenuOpen.set(false); toggleDarkMode()">
-                                        <i [class]="isDarkTheme() ? 'pi pi-sun' : 'pi pi-moon'"></i>
-                                        <span>{{ isDarkTheme() ? 'Light Mode' : 'Dark Mode' }}</span>
+                                    <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="closeDropdown(); onConfigButtonClick()">
+                                        <i class="pi pi-cog"></i>
+                                        <span>Settings</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer relative" (click)="profileMenuOpen.set(false)">
-                                        <i class="pi pi-bell"></i>
-                                        <span>Notifications</span>
-                                        <span class="w-2 h-2 rounded-full bg-red-500 ml-auto"></span>
+                                    <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="closeDropdown()">
+                                        <i class="pi pi-calendar"></i>
+                                        <span>Calendar</span>
                                     </a>
                                 </li>
-                                <li class="border-b border-surface pb-1 mb-1">
-                                    <span class="label-xsmall px-2.5 py-1 text-surface-400">Language</span>
-                                    @for (lang of languages(); track lang.code) {
-                                        <a
-                                            class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer"
-                                            [class.text-surface-950]="selectedLanguage() === lang.code"
-                                            [class.dark:text-surface-0]="selectedLanguage() === lang.code"
-                                            [class.font-semibold]="selectedLanguage() === lang.code"
-                                            (click)="profileMenuOpen.set(false); selectLanguage(lang.code)"
-                                        >
-                                            <span class="text-lg">{{ lang.flag }}</span>
-                                            <span>{{ lang.label }}</span>
-                                            @if (selectedLanguage() === lang.code) {
-                                                <i class="pi pi-check ml-auto text-xs"></i>
-                                            }
-                                        </a>
-                                    }
+                                <li>
+                                    <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="closeDropdown()">
+                                        <i class="pi pi-inbox"></i>
+                                        <span>Inbox</span>
+                                    </a>
                                 </li>
-                            </div>
-                            <li>
-                                <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="profileMenuOpen.set(false)">
-                                    <i class="pi pi-user"></i>
-                                    <span>Profile</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="profileMenuOpen.set(false); onConfigButtonClick()">
-                                    <i class="pi pi-cog"></i>
-                                    <span>Settings</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="profileMenuOpen.set(false)">
-                                    <i class="pi pi-calendar"></i>
-                                    <span>Calendar</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="profileMenuOpen.set(false)">
-                                    <i class="pi pi-inbox"></i>
-                                    <span>Inbox</span>
-                                </a>
-                            </li>
-                            <li class="border-t border-surface mt-1 pt-1">
-                                <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="profileMenuOpen.set(false)">
-                                    <i class="pi pi-power-off"></i>
-                                    <span>Log out</span>
-                                </a>
-                            </li>
-                        </ul>
-                    </div>
+                                <li class="border-t border-surface mt-1 pt-1">
+                                    <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="closeDropdown()">
+                                        <i class="pi pi-power-off"></i>
+                                        <span>Log out</span>
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                    }
                 </li>
                 </ul>
             </div>
@@ -2233,12 +2245,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
             }], searchInput: [{
                 type: ViewChild,
                 args: ['searchInput']
+            }], notificationsItem: [{
+                type: ViewChild,
+                args: ['notificationsItem']
+            }], languageItem: [{
+                type: ViewChild,
+                args: ['languageItem']
             }], profileItem: [{
                 type: ViewChild,
                 args: ['profileItem']
-            }], profilePanel: [{
-                type: ViewChild,
-                args: ['profilePanel']
             }], selectedNotificationBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedNotificationBar", required: false }] }, { type: i0.Output, args: ["selectedNotificationBarChange"] }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -3173,10 +3188,10 @@ class DetailLayoutComponent {
                     <p-tablist
                         class="flex-shrink-0 ux-dl__tablist"
                         [style.display]="isMobile() ? 'none' : null"
-                        [pt]="{ content: { class: 'w-full' }, tabList: { class: 'w-full pl-8 p-0' } }"
+                        [pt]="{ tabList: { class: 'p-0' } }"
                     >
                         @for (tab of tabs(); track tab.value) {
-                            <p-tab [value]="tab.value" [pt]="{ root: { class: 'flex-1 justify-center' } }">
+                            <p-tab [value]="tab.value">
                                 @if (tab.icon) {
                                     <i [class]="tab.icon" class="mr-2 text-sm"></i>
                                 }
@@ -3221,7 +3236,7 @@ class DetailLayoutComponent {
             </p-tabs>
 
         </div>
-    `, isInline: true, styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0;font-family:var(--p-font-family, \"Noto Sans\", sans-serif);background:transparent;color:var(--p-text-color)}.ux-dl__header{background:transparent}.ux-dl__scroll{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--p-primary-color) 25%,transparent) color-mix(in srgb,var(--p-surface-500) 8%,transparent)}.ux-dl__scroll::-webkit-scrollbar{width:10px;height:10px}.ux-dl__scroll::-webkit-scrollbar-track{background:color-mix(in srgb,var(--p-surface-500) 8%,transparent);border-radius:var(--p-content-border-radius, .375rem)}.ux-dl__scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--p-primary-color) 25%,transparent);border-radius:var(--p-content-border-radius, .375rem)}.ux-dl__scroll::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--p-primary-color) 45%,transparent)}.ux-dl__sidebar-inner{display:flex;flex-direction:column;gap:1.5rem}.ux-dl__header-meta{overflow:hidden;max-height:80px;opacity:1;transition:max-height .25s ease-out,opacity .2s ease-out}.ux-dl__header-meta--hidden{max-height:0;opacity:0}.ux-dl__tablist{display:flex;overflow:hidden;background:var(--p-surface-950);padding-inline:.75rem}@media screen and (min-width:640px){.ux-dl__tablist{padding-inline:1rem}}@media screen and (min-width:1024px){.ux-dl__tablist{padding-inline:1.5rem}}.ux-dl__mobile-tabs{position:sticky;top:0;z-index:5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i4$3.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i4$3.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i4$3.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i4$3.TabList, selector: "p-tablist" }, { kind: "component", type: i4$3.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0;font-family:var(--p-font-family, \"Noto Sans\", sans-serif);background:transparent;color:var(--p-text-color)}.ux-dl__header{background:transparent}.ux-dl__scroll{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--p-primary-color) 25%,transparent) color-mix(in srgb,var(--p-surface-500) 8%,transparent)}.ux-dl__scroll::-webkit-scrollbar{width:10px;height:10px}.ux-dl__scroll::-webkit-scrollbar-track{background:color-mix(in srgb,var(--p-surface-500) 8%,transparent);border-radius:var(--p-content-border-radius, .375rem)}.ux-dl__scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--p-primary-color) 25%,transparent);border-radius:var(--p-content-border-radius, .375rem)}.ux-dl__scroll::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--p-primary-color) 45%,transparent)}.ux-dl__sidebar-inner{display:flex;flex-direction:column;gap:1.5rem}.ux-dl__header-meta{overflow:hidden;max-height:80px;opacity:1;transition:max-height .25s ease-out,opacity .2s ease-out}.ux-dl__header-meta--hidden{max-height:0;opacity:0}.ux-dl__tablist{display:flex;overflow:hidden}.ux-dl__mobile-tabs{position:sticky;top:0;z-index:5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i4$4.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i4$4.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i4$4.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i4$4.TabList, selector: "p-tablist" }, { kind: "component", type: i4$4.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DetailLayoutComponent, decorators: [{
             type: Component,
@@ -3260,10 +3275,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                     <p-tablist
                         class="flex-shrink-0 ux-dl__tablist"
                         [style.display]="isMobile() ? 'none' : null"
-                        [pt]="{ content: { class: 'w-full' }, tabList: { class: 'w-full pl-8 p-0' } }"
+                        [pt]="{ tabList: { class: 'p-0' } }"
                     >
                         @for (tab of tabs(); track tab.value) {
-                            <p-tab [value]="tab.value" [pt]="{ root: { class: 'flex-1 justify-center' } }">
+                            <p-tab [value]="tab.value">
                                 @if (tab.icon) {
                                     <i [class]="tab.icon" class="mr-2 text-sm"></i>
                                 }
@@ -3308,7 +3323,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
             </p-tabs>
 
         </div>
-    `, styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0;font-family:var(--p-font-family, \"Noto Sans\", sans-serif);background:transparent;color:var(--p-text-color)}.ux-dl__header{background:transparent}.ux-dl__scroll{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--p-primary-color) 25%,transparent) color-mix(in srgb,var(--p-surface-500) 8%,transparent)}.ux-dl__scroll::-webkit-scrollbar{width:10px;height:10px}.ux-dl__scroll::-webkit-scrollbar-track{background:color-mix(in srgb,var(--p-surface-500) 8%,transparent);border-radius:var(--p-content-border-radius, .375rem)}.ux-dl__scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--p-primary-color) 25%,transparent);border-radius:var(--p-content-border-radius, .375rem)}.ux-dl__scroll::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--p-primary-color) 45%,transparent)}.ux-dl__sidebar-inner{display:flex;flex-direction:column;gap:1.5rem}.ux-dl__header-meta{overflow:hidden;max-height:80px;opacity:1;transition:max-height .25s ease-out,opacity .2s ease-out}.ux-dl__header-meta--hidden{max-height:0;opacity:0}.ux-dl__tablist{display:flex;overflow:hidden;background:var(--p-surface-950);padding-inline:.75rem}@media screen and (min-width:640px){.ux-dl__tablist{padding-inline:1rem}}@media screen and (min-width:1024px){.ux-dl__tablist{padding-inline:1.5rem}}.ux-dl__mobile-tabs{position:sticky;top:0;z-index:5}\n"] }]
+    `, styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0;font-family:var(--p-font-family, \"Noto Sans\", sans-serif);background:transparent;color:var(--p-text-color)}.ux-dl__header{background:transparent}.ux-dl__scroll{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--p-primary-color) 25%,transparent) color-mix(in srgb,var(--p-surface-500) 8%,transparent)}.ux-dl__scroll::-webkit-scrollbar{width:10px;height:10px}.ux-dl__scroll::-webkit-scrollbar-track{background:color-mix(in srgb,var(--p-surface-500) 8%,transparent);border-radius:var(--p-content-border-radius, .375rem)}.ux-dl__scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--p-primary-color) 25%,transparent);border-radius:var(--p-content-border-radius, .375rem)}.ux-dl__scroll::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--p-primary-color) 45%,transparent)}.ux-dl__sidebar-inner{display:flex;flex-direction:column;gap:1.5rem}.ux-dl__header-meta{overflow:hidden;max-height:80px;opacity:1;transition:max-height .25s ease-out,opacity .2s ease-out}.ux-dl__header-meta--hidden{max-height:0;opacity:0}.ux-dl__tablist{display:flex;overflow:hidden}.ux-dl__mobile-tabs{position:sticky;top:0;z-index:5}\n"] }]
         }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }, { type: i0.Output, args: ["activeTabChange"] }], tabTemplates: [{
                 type: ContentChildren,
                 args: [DetailTabDirective]
@@ -3507,7 +3522,7 @@ class DocumentsCardComponent {
                         </div>
             </p-panel>
         </div>
-    `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i3$5.FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i5$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i6.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: i7.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i8$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i8$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i8$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i9$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: PillTabsComponent, selector: "ux-pill-tabs", inputs: ["items", "activeValue"], outputs: ["activeValueChange"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: i10$1.Panel, selector: "p-panel", inputs: ["id", "toggleable", "header", "collapsed", "styleClass", "iconPos", "showHeader", "toggler", "transitionOptions", "toggleButtonProps", "motionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i3$4.FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i4$3.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i5$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: i7$1.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i8$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i8$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i8$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i9$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: PillTabsComponent, selector: "ux-pill-tabs", inputs: ["items", "activeValue"], outputs: ["activeValueChange"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: i10.Panel, selector: "p-panel", inputs: ["id", "toggleable", "header", "collapsed", "styleClass", "iconPos", "showHeader", "toggler", "transitionOptions", "toggleButtonProps", "motionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DocumentsCardComponent, decorators: [{
             type: Component,
@@ -3859,7 +3874,7 @@ class TaskDrawerComponent {
                 </div>
             </ng-template>
         </p-drawer>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i4.Drawer, selector: "p-drawer", inputs: ["appendTo", "motionOptions", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i5$2.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i7$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i8$2.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i2.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i10.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i4.Drawer, selector: "p-drawer", inputs: ["appendTo", "motionOptions", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i5$2.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i7$2.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i8$2.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i2.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i9.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TaskDrawerComponent, decorators: [{
             type: Component,