@unopsitg/ux 21.0.5 → 21.0.20

package/fesm2022/unopsitg-ux.mjs

@@ -3,23 +3,23 @@ import SoftBase from '@primeuix/themes/aura';
 import CrispBase from '@primeuix/themes/lara';
 import ContrastBase from '@primeuix/themes/nora';
 import * as i0 from '@angular/core';
-import { InjectionToken, signal, inject, computed, effect, Injectable, Component, PLATFORM_ID, model, booleanAttribute, Input, input, HostListener, ViewChild, ElementRef, ChangeDetectionStrategy, output, DestroyRef, Directive, ContentChildren } from '@angular/core';
+import { InjectionToken, signal, inject, computed, effect, Injectable, Component, PLATFORM_ID, model, booleanAttribute, Input, input, ChangeDetectionStrategy, HostListener, ViewChild, ElementRef, output, DestroyRef, Directive, ContentChildren } from '@angular/core';
 import * as i1 from '@angular/router';
 import { Router, NavigationEnd, RouterModule } from '@angular/router';
 import * as i1$1 from '@angular/common';
-import { CommonModule, isPlatformBrowser, NgClass } from '@angular/common';
+import { CommonModule, isPlatformBrowser, NgTemplateOutlet, NgClass } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { BehaviorSubject, filter, Subject, takeUntil } from 'rxjs';
-import * as i5 from '@angular/forms';
+import * as i1$2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { PrimeNG } from 'primeng/config';
 import * as i4 from 'primeng/drawer';
 import { DrawerModule } from 'primeng/drawer';
-import * as i5$1 from 'primeng/radiobutton';
+import * as i5 from 'primeng/radiobutton';
 import { RadioButtonModule } from 'primeng/radiobutton';
 import * as i3 from 'primeng/selectbutton';
 import { SelectButtonModule } from 'primeng/selectbutton';
-import { ToggleSwitchModule } from 'primeng/toggleswitch';
-import * as i6 from 'primeng/button';
+import * as i2$1 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i2 from 'primeng/divider';
 import { DividerModule } from 'primeng/divider';
@@ -29,28 +29,42 @@ import * as i3$1 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
 import * as i3$2 from 'primeng/autofocus';
 import { AutoFocusModule } from 'primeng/autofocus';
-import * as i1$2 from 'primeng/dialog';
+import * as i1$3 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
 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$2 from 'primeng/iconfield';
+import * as i4$3 from 'primeng/iconfield';
 import { IconFieldModule } from 'primeng/iconfield';
-import * as i6$1 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$1 from 'primeng/paginator';
+import * as i2$2 from 'primeng/paginator';
 import { PaginatorModule } from 'primeng/paginator';
-import * as i2$2 from 'primeng/tabs';
+import * as i4$4 from 'primeng/tabs';
 import { TabsModule } from 'primeng/tabs';
+import * as i3$4 from 'primeng/fileupload';
+import { FileUploadModule } from 'primeng/fileupload';
+import * as i7$1 from 'primeng/menu';
+import { MenuModule } from 'primeng/menu';
+import * as i10 from 'primeng/panel';
+import { PanelModule } from 'primeng/panel';
+import * as i8$1 from 'primeng/table';
+import { TableModule } from 'primeng/table';
+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$2 from 'primeng/datepicker';
+import { DatePickerModule } from 'primeng/datepicker';
+import * as i5$2 from 'primeng/textarea';
+import { TextareaModule } from 'primeng/textarea';
 
 /**
  * Brand theme presets built on top of PrimeUIX base presets.
@@ -61,8 +75,8 @@ import { TabsModule } from 'primeng/tabs';
  *   Contrast <- @primeuix/themes/nora
  */
 const brandPrimitives = {
-    deepsea: { 50: '#F1F5F9', 100: '#E2E8F0', 200: '#CBD5E1', 300: '#94A3B8', 400: '#64748B', 500: '#475569', 600: '#334155', 700: '#1E293B', 800: '#0F172A', 900: '#0A101D', 950: '#03080c' },
-    gray: { 50: '#f0f3f4', 100: '#ECF0F5', 200: '#d8dadf', 300: '#b9bac1', 400: '#858c99', 500: '#808393', 600: '#808284', 700: '#6a6b6d', 800: '#535455', 900: '#3c3d3e', 950: '#262627' },
+    deepsea: { 50: '#c3c7cb', 100: '#9ea5ac', 200: '#7a838d', 300: '#56626d', 400: '#31404e', 500: '#0d1e2f', 600: '#0b1a28', 700: '#091521', 800: '#07111a', 900: '#050c13', 950: '#03080c' },
+    gray: { 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617' },
     red: { 50: '#f6cac6', 100: '#f0a9a4', 200: '#eb8982', 300: '#e56960', 400: '#e0493e', 500: '#da291c', 600: '#b92318', 700: '#991d14', 800: '#78170f', 900: '#57100b', 950: '#370a07' },
     orange: { 50: '#f9d6c3', 100: '#f6be9f', 200: '#f2a57a', 300: '#ef8d56', 400: '#eb7432', 500: '#e85c0e', 600: '#c54e0c', 700: '#a2400a', 800: '#803308', 900: '#5d2506', 950: '#3a1704' },
     yellow: { 50: '#fff0c5', 100: '#ffe7a1', 200: '#ffdd7e', 300: '#ffd45b', 400: '#ffcb38', 500: '#ffc215', 600: '#d9a512', 700: '#b3880f', 800: '#8c6b0c', 900: '#664e08', 950: '#403105' },
@@ -76,7 +90,8 @@ const brandPrimitives = {
     blue: { 50: '#DEEFFF', 100: '#C9E8FF', 150: '#99D3ED', 200: '#73c3e6', 300: '#4db3df', 400: '#26a2d8', 500: '#0092d1', 600: '#007cb2', 700: '#006692', 800: '#005073', 900: '#003a54', 950: '#002534' },
     darkblue: { 50: '#D0EEFF', 100: '#B7E2F9', 200: '#73abc7', 300: '#4d94b8', 400: '#267da9', 500: '#00669a', 600: '#005783', 700: '#00476c', 800: '#003855', 900: '#00293e', 950: '#001a27' },
     midnight: { 50: '#bfd2dd', 100: '#99b6c8', 200: '#739bb4', 300: '#4d809f', 400: '#26648b', 500: '#004976', 600: '#003e64', 700: '#003353', 800: '#002841', 850: '#001E31', 900: '#001d2f', 950: '#00121e' },
-    cherry: { 50: '#e6c7d9', 100: '#d6a5c2', 200: '#c783ab', 300: '#b86294', 400: '#a8407d', 500: '#991e66', 600: '#821a57', 700: '#6b1547', 800: '#541138', 900: '#3d0c29', 950: '#26081a' }
+    cherry: { 50: '#e6c7d9', 100: '#d6a5c2', 200: '#c783ab', 300: '#b86294', 400: '#a8407d', 500: '#991e66', 600: '#821a57', 700: '#6b1547', 800: '#541138', 900: '#3d0c29', 950: '#26081a' },
+    ai: { 50: '#f0edff', 100: '#e4deff', 200: '#cdc2ff', 300: '#b0a0ff', 400: '#9378ff', 500: '#7c5cfc', 600: '#6a44f0', 700: '#5835d4', 800: '#482dac', 900: '#3b278a', 950: '#24185e' }
 };
 const brandOverrides = {
     primitive: {
@@ -115,17 +130,17 @@ const brandOverrides = {
             light: {
                 surface: {
                     0: '#ffffff',
-                    50: '{deepsea.50}',
-                    100: '{deepsea.100}',
-                    200: '{deepsea.200}',
-                    300: '{deepsea.300}',
-                    400: '{deepsea.400}',
-                    500: '{deepsea.500}',
-                    600: '{deepsea.600}',
-                    700: '{deepsea.700}',
-                    800: '{deepsea.800}',
-                    900: '{deepsea.900}',
-                    950: '{deepsea.950}'
+                    50: '{gray.50}',
+                    100: '{gray.100}',
+                    200: '{gray.200}',
+                    300: '{gray.300}',
+                    400: '{gray.400}',
+                    500: '{gray.500}',
+                    600: '{gray.600}',
+                    700: '{gray.700}',
+                    800: '{gray.800}',
+                    900: '{gray.900}',
+                    950: '{gray.950}'
                 }
             },
             dark: {
@@ -135,8 +150,8 @@ const brandOverrides = {
                     100: '{darkblue.100}',
                     200: '{darkblue.200}',
                     300: '{darkblue.300}',
-                    400: '{darkblue.400}',
-                    500: '{darkblue.500}',
+                    400: '{blue.400}',
+                    500: '{blue.500}',
                     600: '{darkblue.600}',
                     700: '{darkblue.700}',
                     800: '{darkblue.800}',
@@ -147,6 +162,12 @@ const brandOverrides = {
         }
     },
     components: {
+        accordion: {
+            root: { transitionDuration: '{transition.duration}' },
+            panel: { borderWidth: '0' },
+            header: { background: 'transparent', padding: '0 0 0 0' },
+            content: { background: 'transparent' }
+        },
         button: {
             colorScheme: {
                 light: {
@@ -175,34 +196,36 @@ const brandOverrides = {
                 }
             }
         },
+        // Tab active/hover backgrounds are set in _tabs.scss via sidebar
+        // `--d-menuitem-*` tokens (not expressible in the preset). Only structural
+        // properties that _tabs.scss does NOT override belong here.
         tabs: {
             tablist: {
-                background: 'transparent'
+                background: 'transparent',
+                borderWidth: '0 0 1px 0'
             },
             tab: {
                 background: 'transparent',
-                hoverBackground: '{primary.50}',
-                hoverColor: '{primary.700}',
-                activeBackground: '{primary.100}',
-                activeColor: '{primary.900}',
                 borderColor: 'transparent',
-                activeBorderColor: '{primary.200}',
-                padding: '0.5rem 1rem'
+                activeBorderColor: 'transparent',
+                borderWidth: '0',
+                padding: '0.5rem 1rem',
+                margin: '0 0 0.5rem 0'
             },
             tabpanel: {
                 background: 'transparent',
                 padding: '0'
+            }
+        },
+        dataview: {
+            header: {
+                background: 'transparent',
+                borderWidth: '0',
+                padding: '0'
             },
-            colorScheme: {
-                dark: {
-                    tab: {
-                        hoverBackground: '{primary.900}',
-                        hoverColor: '{primary.200}',
-                        activeBackground: '{surface.800}',
-                        activeColor: '{primary.200}',
-                        activeBorderColor: '{primary.400}'
-                    }
-                }
+            content: {
+                background: 'transparent',
+                padding: '0'
             }
         },
         paginator: {
@@ -215,6 +238,64 @@ const brandOverrides = {
                 background: 'transparent'
             }
         },
+        panel: {
+            root: {
+                background: 'transparent',
+                borderColor: 'transparent',
+                borderRadius: '0'
+            },
+            header: {
+                background: 'transparent',
+                padding: '0',
+                borderWidth: '0'
+            },
+            toggleableHeader: {
+                padding: '0'
+            },
+            title: {
+                fontWeight: '700'
+            },
+            content: {
+                padding: '0'
+            }
+        },
+        card: {
+            root: {
+                shadow: 'none',
+                borderRadius: '{border.radius.xl}'
+            },
+            body: {
+                padding: '1.25rem',
+                gap: '1rem'
+            }
+        },
+        avatar: {
+            root: {
+                borderRadius: '9999px',
+                fontSize: '0.875rem'
+            }
+        },
+        drawer: {
+            content: { padding: '1.25rem' }
+        },
+        inputtext: {
+            root: {
+                borderRadius: '{border.radius.xl}',
+                paddingY: '0.5rem'
+            }
+        },
+        divider: {
+            horizontal: {
+                margin: '0',
+                padding: '0',
+                content: { padding: '0 0.5rem' }
+            },
+            vertical: {
+                margin: '0',
+                padding: '0',
+                content: { padding: '0.5rem 0' }
+            }
+        },
         tag: {
             root: {
                 padding: '0.25rem 0.5rem',
@@ -224,22 +305,47 @@ const brandOverrides = {
                 light: {
                     secondary: { color: '{surface.800}' },
                     success: { color: '{green.800}' },
-                    active: { color: '{green.800}' },
-                    inactive: { color: '{gray.800}' },
                     info: { color: '{blue.800}' },
                     warn: { color: '{orange.800}' },
-                    error: { color: '{red.800}' }
+                    danger: { color: '{red.800}' }
                 },
                 dark: {
                     secondary: { color: '{surface.100}' },
                     success: { color: '{green.100}' },
-                    active: { color: '{green.100}' },
                     info: { color: '{blue.100}' },
-                    inactive: { color: '{gray.100}' },
                     warn: { color: '{orange.100}' },
-                    error: { color: '{red.100}' }
+                    danger: { color: '{red.100}' }
                 }
             }
+        },
+        toolbar: {
+            root: {
+                background: 'transparent',
+                borderColor: 'transparent',
+                borderRadius: '0',
+                padding: '0',
+                gap: '0.5rem'
+            }
+        },
+        progressbar: {
+            root: {
+                borderRadius: '{border.radius.lg}',
+                height: '0.75rem'
+            }
+        },
+        message: {
+            root: {
+                borderRadius: '{border.radius.lg}',
+                borderWidth: '0 0 0 4px'
+            },
+            content: {
+                padding: '0.75rem 1rem',
+                gap: '0.5rem'
+            },
+            text: {
+                fontSize: '0.875rem',
+                fontWeight: '500'
+            }
         }
     }
 };
@@ -429,6 +535,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+class FooterService {
+    content = signal(null, ...(ngDevMode ? [{ debugName: "content" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FooterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FooterService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FooterService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 class AppBreadcrumb {
     router;
     _breadcrumbs$ = new BehaviorSubject([]);
@@ -501,11 +617,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
 class AppConfigurator {
     simple = false;
     location = 'app';
-    router = inject(Router);
     config = inject(PrimeNG);
     layoutService = inject(LayoutService);
     platformId = inject(PLATFORM_ID);
-    primeng = inject(PrimeNG);
     presetKeys = Object.keys(brandPresets);
     themeOptions = [
         { name: 'Light', value: false },
@@ -533,42 +647,10 @@ class AppConfigurator {
             ];
         }
     }
-    surfaces = [
-        {
-            name: 'gray',
-            palette: {
-                0: '#ffffff',
-                50: '#e5e6e6',
-                100: '#d5d6d7',
-                200: '#c6c7c8',
-                300: '#b6b8b9',
-                400: '#a7a8aa',
-                500: '#97999b',
-                600: '#808284',
-                700: '#6a6b6d',
-                800: '#535455',
-                900: '#3c3d3e',
-                950: '#262627'
-            }
-        },
-        {
-            name: 'darkblue',
-            palette: {
-                0: '#ffffff',
-                50: '#D0EEFF',
-                100: '#B7E2F9',
-                200: '#73abc7',
-                300: '#73abc7',
-                400: '#4d94b8',
-                500: '#267da9',
-                600: '#00669a',
-                700: '#005783',
-                800: '#00476c',
-                900: '#00293e',
-                950: '#001a27'
-            }
-        }
-    ];
+    surfaces = ['gray', 'darkblue'].map(name => ({
+        name,
+        palette: { 0: '#ffffff', ...brandPrimitives[name] }
+    }));
     selectedPrimaryColor = computed(() => {
         return this.layoutService.layoutConfig().primary;
     }, ...(ngDevMode ? [{ debugName: "selectedPrimaryColor" }] : []));
@@ -834,12 +916,12 @@ class AppConfigurator {
                 </div>
                 <div *ngIf="!simple && location === 'app'" class="flex flex-col gap-2">
                     <span class="text-lg text-muted-color font-semibold">Card Style</span>
-                    <p-selectbutton [ngModel]="cardStyle()" (ngModelChange)="onCardStyleChange($event)" [options]="cardStyleOptions" optionLabel="name" optionValue="value" [allowEmpty]="false" [allowEmpty]="false" />
+                    <p-selectbutton [ngModel]="cardStyle()" (ngModelChange)="onCardStyleChange($event)" [options]="cardStyleOptions" optionLabel="name" optionValue="value" [allowEmpty]="false" />
                 </div>
 
                 <div *ngIf="!simple && location === 'app'" class="flex flex-col gap-2">
                     <span class="text-lg text-muted-color font-semibold">Menu Theme</span>
-                    <p-selectbutton [ngModel]="menuTheme()" (ngModelChange)="onMenuThemeChange($event)" [options]="menuThemeOptions" optionLabel="name" optionValue="value" [allowEmpty]="false" [allowEmpty]="false" />
+                    <p-selectbutton [ngModel]="menuTheme()" (ngModelChange)="onMenuThemeChange($event)" [options]="menuThemeOptions" optionLabel="name" optionValue="value" [allowEmpty]="false" />
                 </div>
 
                 <div *ngIf="!simple && location === 'app'">
@@ -857,30 +939,16 @@ class AppConfigurator {
                                 </div>
                             </div>
                             <div class="flex">
-                                <div class="flex items-center gap-2 w-6/12">
-                                    <p-radiobutton name="menuMode" value="overlay" [ngModel]="menuMode()" (ngModelChange)="setMenuMode('overlay')" inputId="overlay"></p-radiobutton>
-                                    <label for="overlay">Overlay</label>
-                                </div>
                                 <div class="flex items-center gap-2 w-6/12">
                                     <p-radiobutton name="menuMode" value="slim" [ngModel]="menuMode()" (ngModelChange)="setMenuMode('slim')" inputId="slim"></p-radiobutton>
                                     <label for="slim">Slim</label>
                                 </div>
-                            </div>
-                            <div class="flex">
                                 <div class="flex items-center gap-2 w-6/12">
                                     <p-radiobutton name="menuMode" value="compact" [ngModel]="menuMode()" (ngModelChange)="setMenuMode('compact')" inputId="compact"></p-radiobutton>
                                     <label for="compact">Compact</label>
                                 </div>
-                                <div class="flex items-center gap-2 w-6/12">
-                                    <p-radiobutton name="menuMode" value="reveal" [ngModel]="menuMode()" (ngModelChange)="setMenuMode('reveal')" inputId="reveal"></p-radiobutton>
-                                    <label for="reveal">Reveal</label>
-                                </div>
                             </div>
                             <div class="flex">
-                                <div class="flex items-center gap-2 w-6/12">
-                                    <p-radiobutton name="menuMode" value="drawer" [ngModel]="menuMode()" (ngModelChange)="setMenuMode('drawer')" inputId="drawer"></p-radiobutton>
-                                    <label for="drawer">Drawer</label>
-                                </div>
                                 <div class="flex items-center gap-2 w-6/12">
                                     <p-radiobutton name="menuMode" value="horizontal" [ngModel]="menuMode()" (ngModelChange)="setMenuMode('horizontal')" inputId="horizontal"></p-radiobutton>
                                     <label for="horizontal">Horizontal</label>
@@ -891,13 +959,13 @@ class AppConfigurator {
                 </div>
             </div>
         </p-drawer>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i3.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { 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: ToggleSwitchModule }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i5$1.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "styleClass", "autofocus", "binary", "variant", "size"], outputs: ["onClick", "onFocus", "onBlur"] }] });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: SelectButtonModule }, { kind: "component", type: i3.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { 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: RadioButtonModule }, { kind: "component", type: i5.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "styleClass", "autofocus", "binary", "variant", "size"], outputs: ["onClick", "onFocus", "onBlur"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppConfigurator, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-configurator',
-                    imports: [CommonModule, FormsModule, SelectButtonModule, DrawerModule, ToggleSwitchModule, RadioButtonModule],
+                    imports: [CommonModule, FormsModule, SelectButtonModule, DrawerModule, RadioButtonModule],
                     template: `
         <p-drawer [(visible)]="configSidebarVisible" position="right" [transitionOptions]="'.3s cubic-bezier(0, 0, 0.2, 1)'" styleClass="layout-config-sidebar w-80" header="Settings" appendTo="body">
             <div class="flex flex-col gap-6">
@@ -952,12 +1020,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                 </div>
                 <div *ngIf="!simple && location === 'app'" class="flex flex-col gap-2">
                     <span class="text-lg text-muted-color font-semibold">Card Style</span>
-                    <p-selectbutton [ngModel]="cardStyle()" (ngModelChange)="onCardStyleChange($event)" [options]="cardStyleOptions" optionLabel="name" optionValue="value" [allowEmpty]="false" [allowEmpty]="false" />
+                    <p-selectbutton [ngModel]="cardStyle()" (ngModelChange)="onCardStyleChange($event)" [options]="cardStyleOptions" optionLabel="name" optionValue="value" [allowEmpty]="false" />
                 </div>
 
                 <div *ngIf="!simple && location === 'app'" class="flex flex-col gap-2">
                     <span class="text-lg text-muted-color font-semibold">Menu Theme</span>
-                    <p-selectbutton [ngModel]="menuTheme()" (ngModelChange)="onMenuThemeChange($event)" [options]="menuThemeOptions" optionLabel="name" optionValue="value" [allowEmpty]="false" [allowEmpty]="false" />
+                    <p-selectbutton [ngModel]="menuTheme()" (ngModelChange)="onMenuThemeChange($event)" [options]="menuThemeOptions" optionLabel="name" optionValue="value" [allowEmpty]="false" />
                 </div>
 
                 <div *ngIf="!simple && location === 'app'">
@@ -975,30 +1043,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                                 </div>
                             </div>
                             <div class="flex">
-                                <div class="flex items-center gap-2 w-6/12">
-                                    <p-radiobutton name="menuMode" value="overlay" [ngModel]="menuMode()" (ngModelChange)="setMenuMode('overlay')" inputId="overlay"></p-radiobutton>
-                                    <label for="overlay">Overlay</label>
-                                </div>
                                 <div class="flex items-center gap-2 w-6/12">
                                     <p-radiobutton name="menuMode" value="slim" [ngModel]="menuMode()" (ngModelChange)="setMenuMode('slim')" inputId="slim"></p-radiobutton>
                                     <label for="slim">Slim</label>
                                 </div>
-                            </div>
-                            <div class="flex">
                                 <div class="flex items-center gap-2 w-6/12">
                                     <p-radiobutton name="menuMode" value="compact" [ngModel]="menuMode()" (ngModelChange)="setMenuMode('compact')" inputId="compact"></p-radiobutton>
                                     <label for="compact">Compact</label>
                                 </div>
-                                <div class="flex items-center gap-2 w-6/12">
-                                    <p-radiobutton name="menuMode" value="reveal" [ngModel]="menuMode()" (ngModelChange)="setMenuMode('reveal')" inputId="reveal"></p-radiobutton>
-                                    <label for="reveal">Reveal</label>
-                                </div>
                             </div>
                             <div class="flex">
-                                <div class="flex items-center gap-2 w-6/12">
-                                    <p-radiobutton name="menuMode" value="drawer" [ngModel]="menuMode()" (ngModelChange)="setMenuMode('drawer')" inputId="drawer"></p-radiobutton>
-                                    <label for="drawer">Drawer</label>
-                                </div>
                                 <div class="flex items-center gap-2 w-6/12">
                                     <p-radiobutton name="menuMode" value="horizontal" [ngModel]="menuMode()" (ngModelChange)="setMenuMode('horizontal')" inputId="horizontal"></p-radiobutton>
                                     <label for="horizontal">Horizontal</label>
@@ -1018,26 +1072,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                 type: Input
             }], cardStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardStyle", required: false }] }, { type: i0.Output, args: ["cardStyleChange"] }] } });
 
-class AppFooter {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: AppFooter, isStandalone: true, selector: "[app-footer]", ngImport: i0, template: `
-        <footer class="layout-footer">
-            <span class="footer-copyright">&#169; UNOPS 2026</span>
-        </footer>
-    `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppFooter, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[app-footer]',
-                    template: `
-        <footer class="layout-footer">
-            <span class="footer-copyright">&#169; UNOPS 2026</span>
-        </footer>
-    `
-                }]
-        }] });
-
 class AppRightMenu {
     layoutService = inject(LayoutService);
     cards = [
@@ -1059,7 +1093,7 @@ class AppRightMenu {
             <div class="flex flex-col mt-7">
                 <div class="flex gap-6">
                     <div class="flex flex-col items-center">
-                        <span class="w-14 h-14 flex items-center justify-center border border-surface rounded-xl shadow-[0px_1px_2px_0px_rgba(18,18,23,0.05);]">
+                        <span class="w-14 h-14 flex items-center justify-center border border-surface rounded-xl shadow-subtle">
                             <i class="pi pi-dollar text-blue-600 text-2xl!"></i>
                         </span>
                         <span class="min-h-14 w-px bg-(--surface-border)"></span>
@@ -1071,7 +1105,7 @@ class AppRightMenu {
                 </div>
                 <div class="flex gap-6">
                     <div class="flex flex-col items-center">
-                        <span class="w-14 h-14 flex items-center justify-center border border-surface rounded-xl shadow-[0px_1px_2px_0px_rgba(18,18,23,0.05);]">
+                        <span class="w-14 h-14 flex items-center justify-center border border-surface rounded-xl shadow-subtle">
                             <i class="pi pi-download text-orange-600 text-2xl!"></i>
                         </span>
                         <span class="min-h-14 w-px bg-(--surface-border)"></span>
@@ -1083,7 +1117,7 @@ class AppRightMenu {
                 </div>
                 <div class="flex gap-6">
                     <div class="flex flex-col items-center">
-                        <span class="w-14 h-14 flex items-center justify-center border border-surface rounded-xl shadow-[0px_1px_2px_0px_rgba(18,18,23,0.05);]">
+                        <span class="w-14 h-14 flex items-center justify-center border border-surface rounded-xl shadow-subtle">
                             <i class="pi pi-question-circle text-violet-600 text-2xl!"></i>
                         </span>
                         <span class="min-h-14 w-px bg-(--surface-border)"></span>
@@ -1095,7 +1129,7 @@ class AppRightMenu {
                 </div>
                 <div class="flex gap-6">
                     <div class="flex flex-col items-center">
-                        <span class="w-14 h-14 flex items-center justify-center border border-surface rounded-xl shadow-[0px_1px_2px_0px_rgba(18,18,23,0.05);]">
+                        <span class="w-14 h-14 flex items-center justify-center border border-surface rounded-xl shadow-subtle">
                             <i class="pi pi-comment text-blue-600 text-2xl!"></i>
                         </span>
                     </div>
@@ -1121,7 +1155,7 @@ class AppRightMenu {
             <p class="body-small mt-1 text-left">Track your ongoing shipments to customers.</p>
             <img class="w-full h-full max-h-60 object-cover border border-surface rounded-2xl mt-4" src="layout/images/sidebar-right/staticmap.png" alt="unops-ng_ux" />
         </div>
-    </p-drawer>`, isInline: true, dependencies: [{ 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: DividerModule }, { kind: "component", type: i2.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { 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: InputTextModule }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }] });
+    </p-drawer>`, isInline: true, dependencies: [{ 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: DividerModule }, { kind: "component", type: i2.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { 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: InputTextModule }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { 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: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppRightMenu, decorators: [{
             type: Component,
@@ -1134,7 +1168,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
             <div class="flex flex-col mt-7">
                 <div class="flex gap-6">
                     <div class="flex flex-col items-center">
-                        <span class="w-14 h-14 flex items-center justify-center border border-surface rounded-xl shadow-[0px_1px_2px_0px_rgba(18,18,23,0.05);]">
+                        <span class="w-14 h-14 flex items-center justify-center border border-surface rounded-xl shadow-subtle">
                             <i class="pi pi-dollar text-blue-600 text-2xl!"></i>
                         </span>
                         <span class="min-h-14 w-px bg-(--surface-border)"></span>
@@ -1146,7 +1180,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                 </div>
                 <div class="flex gap-6">
                     <div class="flex flex-col items-center">
-                        <span class="w-14 h-14 flex items-center justify-center border border-surface rounded-xl shadow-[0px_1px_2px_0px_rgba(18,18,23,0.05);]">
+                        <span class="w-14 h-14 flex items-center justify-center border border-surface rounded-xl shadow-subtle">
                             <i class="pi pi-download text-orange-600 text-2xl!"></i>
                         </span>
                         <span class="min-h-14 w-px bg-(--surface-border)"></span>
@@ -1158,7 +1192,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                 </div>
                 <div class="flex gap-6">
                     <div class="flex flex-col items-center">
-                        <span class="w-14 h-14 flex items-center justify-center border border-surface rounded-xl shadow-[0px_1px_2px_0px_rgba(18,18,23,0.05);]">
+                        <span class="w-14 h-14 flex items-center justify-center border border-surface rounded-xl shadow-subtle">
                             <i class="pi pi-question-circle text-violet-600 text-2xl!"></i>
                         </span>
                         <span class="min-h-14 w-px bg-(--surface-border)"></span>
@@ -1170,7 +1204,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                 </div>
                 <div class="flex gap-6">
                     <div class="flex flex-col items-center">
-                        <span class="w-14 h-14 flex items-center justify-center border border-surface rounded-xl shadow-[0px_1px_2px_0px_rgba(18,18,23,0.05);]">
+                        <span class="w-14 h-14 flex items-center justify-center border border-surface rounded-xl shadow-subtle">
                             <i class="pi pi-comment text-blue-600 text-2xl!"></i>
                         </span>
                     </div>
@@ -1212,21 +1246,21 @@ class AppSearch {
         this.layoutService.layoutState.update((prev) => ({ ...prev, searchBarActive: _val }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppSearch, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: AppSearch, isStandalone: true, selector: "[app-search]", ngImport: i0, template: ` <p-dialog [(visible)]="searchBarActive" [breakpoints]="{ '992px': '75vw', '576px': '90vw' }" modal dismissableMask styleClass="w-1/2 search-container">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: AppSearch, isStandalone: true, selector: "[app-search]", ngImport: i0, template: ` <p-dialog [(visible)]="searchBarActive" [breakpoints]="{ '1024px': '75vw', '780px': '90vw' }" modal dismissableMask styleClass="w-1/2 search-container">
         <ng-template #headless>
             <div class="w-full">
                 <i class="pi pi-search"></i>
                 <input pInputText type="text" [pAutoFocus]="true" class="p-inputtext search-input" placeholder="Search" (keydown.enter)="toggleSearchBar()" />
             </div>
         </ng-template>
-    </p-dialog>`, isInline: true, dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$2.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: AutoFocusModule }, { kind: "directive", type: i3$2.AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }] });
+    </p-dialog>`, isInline: true, dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$3.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: AutoFocusModule }, { kind: "directive", type: i3$2.AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppSearch, decorators: [{
             type: Component,
             args: [{
                     selector: '[app-search]',
                     imports: [DialogModule, InputTextModule, AutoFocusModule],
-                    template: ` <p-dialog [(visible)]="searchBarActive" [breakpoints]="{ '992px': '75vw', '576px': '90vw' }" modal dismissableMask styleClass="w-1/2 search-container">
+                    template: ` <p-dialog [(visible)]="searchBarActive" [breakpoints]="{ '1024px': '75vw', '780px': '90vw' }" modal dismissableMask styleClass="w-1/2 search-container">
         <ng-template #headless>
             <div class="w-full">
                 <i class="pi pi-search"></i>
@@ -1237,6 +1271,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                 }]
         }] });
 
+class FooterMainComponent {
+    /** When true, always shows the default copyright — ignores FooterService content. */
+    copyrightOnly = input(false, ...(ngDevMode ? [{ debugName: "copyrightOnly" }] : []));
+    footerService = inject(FooterService);
+    copyrightYear = new Date().getFullYear();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FooterMainComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: FooterMainComponent, isStandalone: true, selector: "ux-footer-main", inputs: { copyrightOnly: { classPropertyName: "copyrightOnly", publicName: "copyrightOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ux-footer-main" }, ngImport: i0, template: `
+        <div class="footer-inner">
+            @if (copyrightOnly()) {
+                <span>&#169; UNOPS {{ copyrightYear }}</span>
+            } @else if (footerService.content(); as tpl) {
+                <ng-container [ngTemplateOutlet]="tpl" />
+            }
+        </div>
+    `, isInline: true, styles: [":host{flex-shrink:0;display:flex;align-items:center;height:3rem;background:var(--p-primary-50);font-size:var(--font-size-xs, .75rem);line-height:1.2;color:var(--p-text-color)}:host-context(:root[class*=\"app-dark\"]){background:var(--p-primary-950);color:var(--p-surface-100)}:host(.footer-sticky){position:sticky;bottom:0;z-index:10}.footer-inner{width:100%;max-width:1540px;margin-inline:auto;padding:1rem}@media screen and (min-width:780px){.footer-inner{padding:1rem 3rem}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FooterMainComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ux-footer-main', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], host: { class: 'ux-footer-main' }, template: `
+        <div class="footer-inner">
+            @if (copyrightOnly()) {
+                <span>&#169; UNOPS {{ copyrightYear }}</span>
+            } @else if (footerService.content(); as tpl) {
+                <ng-container [ngTemplateOutlet]="tpl" />
+            }
+        </div>
+    `, styles: [":host{flex-shrink:0;display:flex;align-items:center;height:3rem;background:var(--p-primary-50);font-size:var(--font-size-xs, .75rem);line-height:1.2;color:var(--p-text-color)}:host-context(:root[class*=\"app-dark\"]){background:var(--p-primary-950);color:var(--p-surface-100)}:host(.footer-sticky){position:sticky;bottom:0;z-index:10}.footer-inner{width:100%;max-width:1540px;margin-inline:auto;padding:1rem}@media screen and (min-width:780px){.footer-inner{padding:1rem 3rem}}\n"] }]
+        }], propDecorators: { copyrightOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyrightOnly", required: false }] }] } });
+
 class AppMenuitem {
     layoutService = inject(LayoutService);
     router = inject(Router);
@@ -1565,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',
@@ -1591,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',
@@ -1617,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',
@@ -1636,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',
@@ -1653,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" }] : []));
@@ -1680,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() {
@@ -1711,24 +1784,29 @@ 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>
         <div class="topbar-left">
-            <button
-                type="button"
-                class="topbar-menu-toggle"
-                [class.active]="isSidebarPinned()"
-                [attr.aria-label]="isSidebarPinned() ? 'Collapse sidebar' : 'Expand sidebar'"
-                (click)="toggleSidebarPin()"
-            >
-                <i class="pi pi-bars"></i>
-            </button>
-            <a class="topbar-logo" [routerLink]="['/']">
-                <img [src]="desktopLogo()" [attr.alt]="mobileLogoConfig.alt" />
-            </a>
-            <span class="topbar-logo-separator"></span>
+            <div class="topbar-sidebar-section">
+                <button
+                    type="button"
+                    class="topbar-menu-toggle"
+                    [class.active]="isSidebarPinned()"
+                    [attr.aria-label]="isSidebarPinned() ? 'Collapse sidebar' : 'Expand sidebar'"
+                    (click)="toggleSidebarPin()"
+                >
+                    <i class="pi pi-bars"></i>
+                </button>
+                <a class="topbar-logo" [routerLink]="['/']">
+                    <img [src]="desktopLogo()" [attr.alt]="mobileLogoConfig.alt" />
+                </a>
+                <span class="topbar-logo-separator"></span>
+            </div>
+        </div>
+
+        <div class="topbar-main">
             <div app-breadcrumb></div>
             @if (searchActive()) {
                 <div class="flex items-center gap-2 ml-auto">
@@ -1741,14 +1819,8 @@ class AppTopbar {
                     </button>
                 </div>
             }
-        </div>
-
-        <a class="mobile-logo" [routerLink]="['/landing']">
-            <img [src]="mobileLogo()" [attr.alt]="mobileLogoConfig.alt" />
-        </a>
-
-        <div class="topbar-right">
-            <ul class="topbar-menu">
+            <div class="topbar-right">
+                <ul class="topbar-menu">
                 <li class="right-sidebar-item" [class.hidden]="searchActive()">
                     <a class="right-sidebar-button" aria-label="Open search" (click)="openSearch()">
                         <i class="pi pi-search"></i>
@@ -1763,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-[0px_56px_16px_0px_rgba(0,0,0,0.00),0px_36px_14px_0px_rgba(0,0,0,0.01),0px_20px_12px_0px_rgba(0,0,0,0.02),0px_9px_9px_0px_rgba(0,0,0,0.03),0px_2px_5px_0px_rgba(0,0,0,0.04)]"
-                    >
-                        <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-[0px_1px_2px_0px_rgba(18,18,23,0.05)] 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"/>
@@ -1822,137 +1894,149 @@ 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-[0px_56px_16px_0px_rgba(0,0,0,0.00),0px_36px_14px_0px_rgba(0,0,0,0.01),0px_20px_12px_0px_rgba(0,0,0,0.02),0px_9px_9px_0px_rgba(0,0,0,0.03),0px_2px_5px_0px_rgba(0,0,0,0.04)]"
-                    >
-                        <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-[0px_56px_16px_0px_rgba(0,0,0,0.00),0px_36px_14px_0px_rgba(0,0,0,0.01),0px_20px_12px_0px_rgba(0,0,0,0.02),0px_9px_9px_0px_rgba(0,0,0,0.03),0px_2px_5px_0px_rgba(0,0,0,0.04)]"
-                        [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)">
-                                    <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>
+                </ul>
+            </div>
         </div>
-    </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$2.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i6$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: 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"] }] });
+
+        <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: "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>
         </button>
         <div class="topbar-left">
-            <button
-                type="button"
-                class="topbar-menu-toggle"
-                [class.active]="isSidebarPinned()"
-                [attr.aria-label]="isSidebarPinned() ? 'Collapse sidebar' : 'Expand sidebar'"
-                (click)="toggleSidebarPin()"
-            >
-                <i class="pi pi-bars"></i>
-            </button>
-            <a class="topbar-logo" [routerLink]="['/']">
-                <img [src]="desktopLogo()" [attr.alt]="mobileLogoConfig.alt" />
-            </a>
-            <span class="topbar-logo-separator"></span>
+            <div class="topbar-sidebar-section">
+                <button
+                    type="button"
+                    class="topbar-menu-toggle"
+                    [class.active]="isSidebarPinned()"
+                    [attr.aria-label]="isSidebarPinned() ? 'Collapse sidebar' : 'Expand sidebar'"
+                    (click)="toggleSidebarPin()"
+                >
+                    <i class="pi pi-bars"></i>
+                </button>
+                <a class="topbar-logo" [routerLink]="['/']">
+                    <img [src]="desktopLogo()" [attr.alt]="mobileLogoConfig.alt" />
+                </a>
+                <span class="topbar-logo-separator"></span>
+            </div>
+        </div>
+
+        <div class="topbar-main">
             <div app-breadcrumb></div>
             @if (searchActive()) {
                 <div class="flex items-center gap-2 ml-auto">
@@ -1965,14 +2049,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                     </button>
                 </div>
             }
-        </div>
-
-        <a class="mobile-logo" [routerLink]="['/landing']">
-            <img [src]="mobileLogo()" [attr.alt]="mobileLogoConfig.alt" />
-        </a>
-
-        <div class="topbar-right">
-            <ul class="topbar-menu">
+            <div class="topbar-right">
+                <ul class="topbar-menu">
                 <li class="right-sidebar-item" [class.hidden]="searchActive()">
                     <a class="right-sidebar-button" aria-label="Open search" (click)="openSearch()">
                         <i class="pi pi-search"></i>
@@ -1987,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-[0px_56px_16px_0px_rgba(0,0,0,0.00),0px_36px_14px_0px_rgba(0,0,0,0.01),0px_20px_12px_0px_rgba(0,0,0,0.02),0px_9px_9px_0px_rgba(0,0,0,0.03),0px_2px_5px_0px_rgba(0,0,0,0.04)]"
-                    >
-                        <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-[0px_1px_2px_0px_rgba(18,18,23,0.05)] 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"/>
@@ -2046,112 +2124,119 @@ 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-[0px_56px_16px_0px_rgba(0,0,0,0.00),0px_36px_14px_0px_rgba(0,0,0,0.01),0px_20px_12px_0px_rgba(0,0,0,0.02),0px_9px_9px_0px_rgba(0,0,0,0.03),0px_2px_5px_0px_rgba(0,0,0,0.04)]"
-                    >
-                        <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-[0px_56px_16px_0px_rgba(0,0,0,0.00),0px_36px_14px_0px_rgba(0,0,0,0.01),0px_20px_12px_0px_rgba(0,0,0,0.02),0px_9px_9px_0px_rgba(0,0,0,0.03),0px_2px_5px_0px_rgba(0,0,0,0.04)]"
-                        [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)">
-                                    <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>
+                </ul>
+            </div>
         </div>
+
+        <a class="mobile-logo" [routerLink]="['/']">
+            <img [src]="mobileLogo()" [attr.alt]="mobileLogoConfig.alt" />
+        </a>
     </div>`
                 }]
         }], propDecorators: { menuButton: [{
@@ -2160,18 +2245,21 @@ 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']]
             }] } });
 
-const BREAKPOINT = 992;
+const BREAKPOINT = 1024;
 class AppSidebar {
     layoutService = inject(LayoutService);
     router = inject(Router);
@@ -2378,22 +2466,28 @@ class AppSidebar {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: AppSidebar, isStandalone: true, selector: "[app-sidebar]", viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true }, { propertyName: "sidebarRef", first: true, predicate: ["sidebarRef"], descendants: true }], ngImport: i0, template: `<nav class="layout-sidebar" aria-label="Main navigation" (mouseleave)="onMouseLeave()">
-        <div #menuContainer class="layout-menu-container" (scroll)="onMenuScroll()">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: AppSidebar, isStandalone: true, selector: "[app-sidebar]", viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true }, { propertyName: "sidebarRef", first: true, predicate: ["sidebarRef"], descendants: true }], ngImport: i0, template: `<nav class="layout-sidebar" aria-label="Main navigation" (mouseleave)="onMouseLeave()">
+        <div #menuContainer class="layout-menu-container min-h-0 grow" (scroll)="onMenuScroll()">
             <div app-menu></div>
         </div>
+        @if (!isHorizontal()) {
+            <ux-footer-main [copyrightOnly]="true" role="contentinfo" />
+        }
         <div app-topbar *ngIf="isHorizontal()"></div>
-    </nav>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AppMenu, selector: "[app-menu]" }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: AppTopbar, selector: "[app-topbar]", inputs: ["selectedNotificationBar"], outputs: ["selectedNotificationBarChange"] }] });
+    </nav>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AppMenu, selector: "[app-menu]" }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: AppTopbar, selector: "[app-topbar]", inputs: ["selectedNotificationBar"], outputs: ["selectedNotificationBarChange"] }, { kind: "component", type: FooterMainComponent, selector: "ux-footer-main", inputs: ["copyrightOnly"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppSidebar, decorators: [{
             type: Component,
             args: [{
                     selector: '[app-sidebar]',
-                    imports: [CommonModule, AppMenu, RouterModule, AppTopbar],
+                    imports: [CommonModule, AppMenu, RouterModule, AppTopbar, FooterMainComponent],
                     template: `<nav class="layout-sidebar" aria-label="Main navigation" (mouseleave)="onMouseLeave()">
-        <div #menuContainer class="layout-menu-container" (scroll)="onMenuScroll()">
+        <div #menuContainer class="layout-menu-container min-h-0 grow" (scroll)="onMenuScroll()">
             <div app-menu></div>
         </div>
+        @if (!isHorizontal()) {
+            <ux-footer-main [copyrightOnly]="true" role="contentinfo" />
+        }
         <div app-topbar *ngIf="isHorizontal()"></div>
     </nav>`
                 }]
@@ -2407,6 +2501,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
 
 class AppLayout {
     layoutService = inject(LayoutService);
+    elRef = inject(ElementRef);
     constructor() {
         effect(() => {
             const state = this.layoutService.layoutState();
@@ -2417,6 +2512,11 @@ class AppLayout {
                 document.body.classList.remove('blocked-scroll');
             }
         });
+        inject(Router).events.pipe(filter((e) => e instanceof NavigationEnd), takeUntilDestroyed()).subscribe(() => {
+            const wrapper = this.elRef.nativeElement.querySelector('.layout-content-wrapper');
+            if (wrapper)
+                wrapper.scrollTop = 0;
+        });
     }
     containerClass = computed(() => {
         const layoutConfig = this.layoutService.layoutConfig();
@@ -2449,21 +2549,21 @@ class AppLayout {
                         <div app-breadcrumb></div>
                         <router-outlet></router-outlet>
                     </main>
-                    <div app-footer></div>
                 </div>
+                <ux-footer-main class="footer-sticky" />
             </div>
         </div>
         <app-configurator />
         <div app-search></div>
         <div app-rightmenu></div>
         <div class="layout-mask"></div>
-    </div> `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppTopbar, selector: "[app-topbar]", inputs: ["selectedNotificationBar"], outputs: ["selectedNotificationBarChange"] }, { kind: "component", type: AppSidebar, selector: "[app-sidebar]" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AppConfigurator, selector: "app-configurator", inputs: ["simple", "location", "cardStyle"], outputs: ["cardStyleChange"] }, { kind: "component", type: AppBreadcrumb, selector: "[app-breadcrumb]" }, { kind: "component", type: AppFooter, selector: "[app-footer]" }, { kind: "component", type: AppSearch, selector: "[app-search]" }, { kind: "component", type: AppRightMenu, selector: "[app-rightmenu]" }] });
+    </div> `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppTopbar, selector: "[app-topbar]", inputs: ["selectedNotificationBar"], outputs: ["selectedNotificationBarChange"] }, { kind: "component", type: AppSidebar, selector: "[app-sidebar]" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AppConfigurator, selector: "app-configurator", inputs: ["simple", "location", "cardStyle"], outputs: ["cardStyleChange"] }, { kind: "component", type: AppBreadcrumb, selector: "[app-breadcrumb]" }, { kind: "component", type: FooterMainComponent, selector: "ux-footer-main", inputs: ["copyrightOnly"] }, { kind: "component", type: AppSearch, selector: "[app-search]" }, { kind: "component", type: AppRightMenu, selector: "[app-rightmenu]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppLayout, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-layout',
-                    imports: [CommonModule, AppTopbar, AppSidebar, RouterModule, AppConfigurator, AppBreadcrumb, AppFooter, AppSearch, AppRightMenu],
+                    imports: [CommonModule, AppTopbar, AppSidebar, RouterModule, AppConfigurator, AppBreadcrumb, FooterMainComponent, AppSearch, AppRightMenu],
                     template: `<div class="layout-wrapper" [ngClass]="containerClass()">
         <div app-topbar></div>
         <div class="layout-body">
@@ -2474,8 +2574,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         <div app-breadcrumb></div>
                         <router-outlet></router-outlet>
                     </main>
-                    <div app-footer></div>
                 </div>
+                <ux-footer-main class="footer-sticky" />
             </div>
         </div>
         <app-configurator />
@@ -2486,6 +2586,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+class AppFooter {
+    layoutService = inject(LayoutService);
+    copyrightYear = new Date().getFullYear();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: AppFooter, isStandalone: true, selector: "[app-footer]", ngImport: i0, template: `
+        @if (layoutService.isHorizontal()) {
+            <footer class="layout-footer">
+                <span class="footer-copyright">&#169; UNOPS {{ copyrightYear }}</span>
+            </footer>
+        }
+    `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppFooter, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[app-footer]',
+                    template: `
+        @if (layoutService.isHorizontal()) {
+            <footer class="layout-footer">
+                <span class="footer-copyright">&#169; UNOPS {{ copyrightYear }}</span>
+            </footer>
+        }
+    `
+                }]
+        }] });
+
 class AuthLayout {
     layoutService = inject(LayoutService);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AuthLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -2571,7 +2697,7 @@ class AiCardBgComponent {
             />
         </svg>
         <ng-content />
-    `, isInline: true, styles: [":host{--ux-ai-bg-from: #cce5ff;--ux-ai-bg-to:rgb(255, 236, 254);--ux-ai-fg-from:rgb(188, 214, 255);--ux-ai-fg-to:rgb(246, 216, 255);position:relative;overflow:hidden;isolation:isolate;contain:paint;animation:ux-ai-bg-move 5s ease-in-out infinite;will-change:background-color}:host-context([class*=\"app-dark\"]){--ux-ai-bg-from:rgb(0, 32, 69);--ux-ai-bg-to:rgb(47, 18, 116);--ux-ai-fg-from:rgb(0, 20, 47);--ux-ai-fg-to:rgb(76, 1, 71)}:host>:not(svg){position:relative;z-index:1}:host svg.ux-ai-card-bg__svg{position:absolute;inset:0;z-index:0;height:100%;width:100%;max-height:100%;overflow:hidden;pointer-events:none}.ux-ai-fg{will-change:fill;animation:ux-ai-fg-move 6s ease-in-out infinite}.ux-ai-fg--1{animation-delay:0s}.ux-ai-fg--2{animation-delay:2s}.ux-ai-fg--3{animation-delay:4s}@keyframes ux-ai-bg-move{0%,to{background-color:var(--ux-ai-bg-from)}50%{background-color:var(--ux-ai-bg-to)}}@keyframes ux-ai-fg-move{0%,to{fill:var(--ux-ai-fg-from)}50%{fill:var(--ux-ai-fg-to)}}@media(prefers-reduced-motion:reduce){:host{animation:none;background-color:var(--ux-ai-bg-from)}.ux-ai-fg{animation:none;fill:var(--ux-ai-fg-from)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, styles: [":host{--ux-ai-bg-from: var(--color-ai-50);--ux-ai-bg-to: var(--color-cherry-50);--ux-ai-fg-from: var(--color-ai-200);--ux-ai-fg-to: var(--color-cherry-100);position:relative;overflow:hidden;isolation:isolate;contain:paint;animation:ux-ai-bg-move 5s ease-in-out infinite;will-change:background-color}:host-context([class*=\"app-dark\"]){--ux-ai-bg-from: var(--color-ai-950);--ux-ai-bg-to: var(--color-cherry-950);--ux-ai-fg-from: var(--color-ai-900);--ux-ai-fg-to: var(--color-cherry-900)}:host>:not(svg){position:relative;z-index:1}:host svg.ux-ai-card-bg__svg{position:absolute;inset:0;z-index:0;height:100%;width:100%;max-height:100%;overflow:hidden;pointer-events:none}.ux-ai-fg{will-change:fill;animation:ux-ai-fg-move 6s ease-in-out infinite}.ux-ai-fg--1{animation-delay:0s}.ux-ai-fg--2{animation-delay:2s}.ux-ai-fg--3{animation-delay:4s}@keyframes ux-ai-bg-move{0%,to{background-color:var(--ux-ai-bg-from)}50%{background-color:var(--ux-ai-bg-to)}}@keyframes ux-ai-fg-move{0%,to{fill:var(--ux-ai-fg-from)}50%{fill:var(--ux-ai-fg-to)}}@media(prefers-reduced-motion:reduce){:host{animation:none;background-color:var(--ux-ai-bg-from)}.ux-ai-fg{animation:none;fill:var(--ux-ai-fg-from)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AiCardBgComponent, decorators: [{
             type: Component,
@@ -2620,7 +2746,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
             />
         </svg>
         <ng-content />
-    `, styles: [":host{--ux-ai-bg-from: #cce5ff;--ux-ai-bg-to:rgb(255, 236, 254);--ux-ai-fg-from:rgb(188, 214, 255);--ux-ai-fg-to:rgb(246, 216, 255);position:relative;overflow:hidden;isolation:isolate;contain:paint;animation:ux-ai-bg-move 5s ease-in-out infinite;will-change:background-color}:host-context([class*=\"app-dark\"]){--ux-ai-bg-from:rgb(0, 32, 69);--ux-ai-bg-to:rgb(47, 18, 116);--ux-ai-fg-from:rgb(0, 20, 47);--ux-ai-fg-to:rgb(76, 1, 71)}:host>:not(svg){position:relative;z-index:1}:host svg.ux-ai-card-bg__svg{position:absolute;inset:0;z-index:0;height:100%;width:100%;max-height:100%;overflow:hidden;pointer-events:none}.ux-ai-fg{will-change:fill;animation:ux-ai-fg-move 6s ease-in-out infinite}.ux-ai-fg--1{animation-delay:0s}.ux-ai-fg--2{animation-delay:2s}.ux-ai-fg--3{animation-delay:4s}@keyframes ux-ai-bg-move{0%,to{background-color:var(--ux-ai-bg-from)}50%{background-color:var(--ux-ai-bg-to)}}@keyframes ux-ai-fg-move{0%,to{fill:var(--ux-ai-fg-from)}50%{fill:var(--ux-ai-fg-to)}}@media(prefers-reduced-motion:reduce){:host{animation:none;background-color:var(--ux-ai-bg-from)}.ux-ai-fg{animation:none;fill:var(--ux-ai-fg-from)}}\n"] }]
+    `, styles: [":host{--ux-ai-bg-from: var(--color-ai-50);--ux-ai-bg-to: var(--color-cherry-50);--ux-ai-fg-from: var(--color-ai-200);--ux-ai-fg-to: var(--color-cherry-100);position:relative;overflow:hidden;isolation:isolate;contain:paint;animation:ux-ai-bg-move 5s ease-in-out infinite;will-change:background-color}:host-context([class*=\"app-dark\"]){--ux-ai-bg-from: var(--color-ai-950);--ux-ai-bg-to: var(--color-cherry-950);--ux-ai-fg-from: var(--color-ai-900);--ux-ai-fg-to: var(--color-cherry-900)}:host>:not(svg){position:relative;z-index:1}:host svg.ux-ai-card-bg__svg{position:absolute;inset:0;z-index:0;height:100%;width:100%;max-height:100%;overflow:hidden;pointer-events:none}.ux-ai-fg{will-change:fill;animation:ux-ai-fg-move 6s ease-in-out infinite}.ux-ai-fg--1{animation-delay:0s}.ux-ai-fg--2{animation-delay:2s}.ux-ai-fg--3{animation-delay:4s}@keyframes ux-ai-bg-move{0%,to{background-color:var(--ux-ai-bg-from)}50%{background-color:var(--ux-ai-bg-to)}}@keyframes ux-ai-fg-move{0%,to{fill:var(--ux-ai-fg-from)}50%{fill:var(--ux-ai-fg-to)}}@media(prefers-reduced-motion:reduce){:host{animation:none;background-color:var(--ux-ai-bg-from)}.ux-ai-fg{animation:none;fill:var(--ux-ai-fg-from)}}\n"] }]
         }] });
 
 class AiInsightsCardComponent {
@@ -2658,27 +2784,25 @@ class AiInsightsCardComponent {
         return Math.max(1, Math.floor(available / insightCardHeight));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AiInsightsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: AiInsightsCardComponent, isStandalone: true, selector: "ux-ai-insights-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, insights: { classPropertyName: "insights", publicName: "insights", isSignal: true, isRequired: true, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick" }, host: { properties: { "class.h-[calc(100dvh-12rem)": "expanded()" }, classAttribute: "ux-ai-insights-card block border border-[#e0e7ff] dark:border-[#2d3a5c] rounded-2xl shadow-sm overflow-hidden transition-all duration-300 flex flex-col max-h-[calc(100dvh-12rem)]" }, ngImport: i0, template: `
-        <ux-ai-card-bg class="flex flex-col flex-1 min-h-0 p-4">
-            <div class="motion-safe:animate-enter-liquid [animation-delay:80ms] flex flex-col flex-1 min-h-0">
-                <div class="flex items-center justify-between cursor-pointer shrink-0" (click)="expanded.set(!expanded())">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: AiInsightsCardComponent, isStandalone: true, selector: "ux-ai-insights-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, insights: { classPropertyName: "insights", publicName: "insights", isSignal: true, isRequired: true, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick" }, host: { properties: { "class.ux-ai-expanded": "expanded()" }, classAttribute: "ux-ai-insights-card block border border-blue-100 dark:border-midnight-400 rounded-2xl shadow-sm overflow-hidden transition-all duration-300 flex flex-col" }, ngImport: i0, template: `
+        <ux-ai-card-bg class="flex flex-col flex-1 p-4">
+            <div class="motion-safe:animate-enter-liquid [animation-delay:80ms] flex flex-col flex-1">
+                <div class="flex items-center justify-between cursor-pointer shrink-0 pr-2" (click)="expanded.set(!expanded())">
                     <div class="flex items-center gap-3">
                         <div class="w-[34px] h-[34px] rounded-[10px] flex items-center justify-center shrink-0">
-                            <i class="pi pi-sparkles text-blue-800 dark:text-blue-300"></i>
+                            <i class="pi pi-sparkles text-ai-600 dark:text-ai-300"></i>
                         </div>
                         <div class="flex flex-col">
                             <h4 class="title-h4 text-left text-deepsea-500 dark:text-surface-0">{{ title() }}</h4>
                             <span class="text-midnight-700 dark:text-surface-100 text-sm font-medium leading-tight">{{ insights().length }} insights available for your review</span>
                         </div>
                     </div>
-                    <button class="w-[30px] h-[30px] rounded-full bg-white/85 dark:bg-transparent border border-white dark:border-surface-300 shadow-sm flex items-center justify-center cursor-pointer hover:bg-white dark:hover:bg-white/10 transition-colors">
-                        <i class="pi text-xs text-darkblue-500 dark:text-surface-0" [ngClass]="expanded() ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
-                    </button>
+                    <i class="pi text-sm text-darkblue-500 dark:text-surface-0" [ngClass]="expanded() ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
                 </div>
 
                 <div class="expand-body" [class.expand-body--open]="expanded()">
                     <div class="expand-body__inner">
-                        <div class="flex flex-col gap-4 mt-4 flex-1 min-h-0">
+                        <div class="flex flex-col gap-4 mt-4">
                             <div class="bg-white/60 dark:bg-surface-800/60 border border-white dark:border-surface-700 rounded-[14px] shadow-sm flex items-center gap-4 px-4 py-2.5 shrink-0">
                                 <i class="pi pi-search text-surface-500 dark:text-surface-300 text-sm"></i>
                                 <input
@@ -2690,14 +2814,14 @@ class AiInsightsCardComponent {
                                 />
                             </div>
 
-                            <div class="flex flex-col gap-3 flex-1 min-h-0 overflow-y-auto overscroll-y-contain pr-0.5">
+                            <div class="flex flex-col gap-3">
                                 @for (insight of paginatedInsights(); track insight.id) {
                                     <div class="bg-white/70 dark:bg-surface-800/70 border border-white/50 dark:border-surface-700/50 rounded-[14px] shadow-sm p-4 flex gap-3 items-start shrink-0">
                                         <i class="pi mt-0.5" [ngClass]="[insight.icon, insight.iconColor]"></i>
                                         <div class="flex flex-col gap-2 flex-1 min-w-0">
                                             <div class="flex flex-col gap-1">
                                                 <span class="text-midnight-500 dark:text-surface-0 text-sm font-bold leading-[21px]">{{ insight.title }}</span>
-                                                <p class="text-[#2b638b] dark:text-surface-300 text-sm leading-normal">{{ insight.description }}</p>
+                                                <p class="text-midnight-400 dark:text-surface-300 text-sm leading-normal">{{ insight.description }}</p>
                                             </div>
                                             <button
                                                 class="flex items-center gap-1.5 text-darkblue-500 dark:text-primary-400 text-sm font-semibold cursor-pointer hover:underline bg-transparent border-none p-0 w-fit"
@@ -2718,8 +2842,8 @@ class AiInsightsCardComponent {
                                     [first]="first()"
                                     (onPageChange)="page.set($event.page ?? 0)"
                                     [pageLinkSize]="3"
-                                    styleClass="w-full border-none! bg-transparent!"
-                                    [pt]="{ root: { class: 'bg-transparent! relative! w-full! justify-center!' } }"
+                                    styleClass="w-full"
+                                    [pt]="{ root: { class: 'justify-center' } }"
                                 />
                             </div>
                         </div>
@@ -2727,34 +2851,32 @@ class AiInsightsCardComponent {
                 </div>
             </div>
         </ux-ai-card-bg>
-    `, isInline: true, styles: [":host{display:flex}\n"], dependencies: [{ kind: "component", type: AiCardBgComponent, selector: "ux-ai-card-bg" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i2$1.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, styles: [":host{display:flex}\n"], dependencies: [{ kind: "component", type: AiCardBgComponent, selector: "ux-ai-card-bg" }, { 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i2$2.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AiInsightsCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ux-ai-insights-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AiCardBgComponent, FormsModule, NgClass, PaginatorModule], host: {
-                        class: 'ux-ai-insights-card block border border-[#e0e7ff] dark:border-[#2d3a5c] rounded-2xl shadow-sm overflow-hidden transition-all duration-300 flex flex-col max-h-[calc(100dvh-12rem)]',
-                        '[class.h-[calc(100dvh-12rem)]]': 'expanded()'
+                        class: 'ux-ai-insights-card block border border-blue-100 dark:border-midnight-400 rounded-2xl shadow-sm overflow-hidden transition-all duration-300 flex flex-col',
+                        '[class.ux-ai-expanded]': 'expanded()'
                     }, template: `
-        <ux-ai-card-bg class="flex flex-col flex-1 min-h-0 p-4">
-            <div class="motion-safe:animate-enter-liquid [animation-delay:80ms] flex flex-col flex-1 min-h-0">
-                <div class="flex items-center justify-between cursor-pointer shrink-0" (click)="expanded.set(!expanded())">
+        <ux-ai-card-bg class="flex flex-col flex-1 p-4">
+            <div class="motion-safe:animate-enter-liquid [animation-delay:80ms] flex flex-col flex-1">
+                <div class="flex items-center justify-between cursor-pointer shrink-0 pr-2" (click)="expanded.set(!expanded())">
                     <div class="flex items-center gap-3">
                         <div class="w-[34px] h-[34px] rounded-[10px] flex items-center justify-center shrink-0">
-                            <i class="pi pi-sparkles text-blue-800 dark:text-blue-300"></i>
+                            <i class="pi pi-sparkles text-ai-600 dark:text-ai-300"></i>
                         </div>
                         <div class="flex flex-col">
                             <h4 class="title-h4 text-left text-deepsea-500 dark:text-surface-0">{{ title() }}</h4>
                             <span class="text-midnight-700 dark:text-surface-100 text-sm font-medium leading-tight">{{ insights().length }} insights available for your review</span>
                         </div>
                     </div>
-                    <button class="w-[30px] h-[30px] rounded-full bg-white/85 dark:bg-transparent border border-white dark:border-surface-300 shadow-sm flex items-center justify-center cursor-pointer hover:bg-white dark:hover:bg-white/10 transition-colors">
-                        <i class="pi text-xs text-darkblue-500 dark:text-surface-0" [ngClass]="expanded() ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
-                    </button>
+                    <i class="pi text-sm text-darkblue-500 dark:text-surface-0" [ngClass]="expanded() ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
                 </div>
 
                 <div class="expand-body" [class.expand-body--open]="expanded()">
                     <div class="expand-body__inner">
-                        <div class="flex flex-col gap-4 mt-4 flex-1 min-h-0">
+                        <div class="flex flex-col gap-4 mt-4">
                             <div class="bg-white/60 dark:bg-surface-800/60 border border-white dark:border-surface-700 rounded-[14px] shadow-sm flex items-center gap-4 px-4 py-2.5 shrink-0">
                                 <i class="pi pi-search text-surface-500 dark:text-surface-300 text-sm"></i>
                                 <input
@@ -2766,14 +2888,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                                 />
                             </div>
 
-                            <div class="flex flex-col gap-3 flex-1 min-h-0 overflow-y-auto overscroll-y-contain pr-0.5">
+                            <div class="flex flex-col gap-3">
                                 @for (insight of paginatedInsights(); track insight.id) {
                                     <div class="bg-white/70 dark:bg-surface-800/70 border border-white/50 dark:border-surface-700/50 rounded-[14px] shadow-sm p-4 flex gap-3 items-start shrink-0">
                                         <i class="pi mt-0.5" [ngClass]="[insight.icon, insight.iconColor]"></i>
                                         <div class="flex flex-col gap-2 flex-1 min-w-0">
                                             <div class="flex flex-col gap-1">
                                                 <span class="text-midnight-500 dark:text-surface-0 text-sm font-bold leading-[21px]">{{ insight.title }}</span>
-                                                <p class="text-[#2b638b] dark:text-surface-300 text-sm leading-normal">{{ insight.description }}</p>
+                                                <p class="text-midnight-400 dark:text-surface-300 text-sm leading-normal">{{ insight.description }}</p>
                                             </div>
                                             <button
                                                 class="flex items-center gap-1.5 text-darkblue-500 dark:text-primary-400 text-sm font-semibold cursor-pointer hover:underline bg-transparent border-none p-0 w-fit"
@@ -2794,8 +2916,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                                     [first]="first()"
                                     (onPageChange)="page.set($event.page ?? 0)"
                                     [pageLinkSize]="3"
-                                    styleClass="w-full border-none! bg-transparent!"
-                                    [pt]="{ root: { class: 'bg-transparent! relative! w-full! justify-center!' } }"
+                                    styleClass="w-full"
+                                    [pt]="{ root: { class: 'justify-center' } }"
                                 />
                             </div>
                         </div>
@@ -2806,6 +2928,153 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
     `, styles: [":host{display:flex}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], insights: [{ type: i0.Input, args: [{ isSignal: true, alias: "insights", required: true }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }] } });
 
+class CompletionStepsComponent {
+    title = input('Completion Steps', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    steps = input([], ...(ngDevMode ? [{ debugName: "steps" }] : []));
+    mandatory = input({ filled: 0, total: 0 }, ...(ngDevMode ? [{ debugName: "mandatory" }] : []));
+    optional = input({ filled: 0, total: 0 }, ...(ngDevMode ? [{ debugName: "optional" }] : []));
+    totalRecords = input(0, ...(ngDevMode ? [{ debugName: "totalRecords" }] : []));
+    interactive = input(false, ...(ngDevMode ? [{ debugName: "interactive" }] : []));
+    emptyTitle = input('No progress tracked yet', ...(ngDevMode ? [{ debugName: "emptyTitle" }] : []));
+    emptyDescription = input('Progress is calculated automatically as you fill in the opportunity sections. Each dot represents a required or optional field — mandatory fields (bordered red) must be completed before submission.', ...(ngDevMode ? [{ debugName: "emptyDescription" }] : []));
+    stepClick = output();
+    dotStyles = {
+        mandatoryFilled: { bg: 'bg-green-200 dark:bg-green-700', text: 'text-green-800 dark:text-green-50', icon: 'pi', iconClass: 'pi-check' },
+        optionalFilled: { bg: 'bg-blue-200 dark:bg-blue-700', text: 'text-blue-800 dark:text-blue-50', icon: 'material', iconClass: 'info_i' },
+        mandatoryMissing: { bg: 'bg-transparent border-2 border-red-400 dark:border-red-500', text: 'text-red-500 dark:text-red-400', icon: 'pi', iconClass: 'pi-plus' },
+        optionalMissing: { bg: 'bg-transparent border-2 border-surface-300 dark:border-surface-600', text: 'text-surface-500 dark:text-surface-400', icon: 'material', iconClass: 'info_i' }
+    };
+    filledTotal = computed(() => this.mandatory().filled + this.optional().filled, ...(ngDevMode ? [{ debugName: "filledTotal" }] : []));
+    empty = computed(() => this.filledTotal() === 0, ...(ngDevMode ? [{ debugName: "empty" }] : []));
+    legendMandatoryBg = computed(() => this.mandatory().filled > 0 ? this.dotStyles.mandatoryFilled.bg : this.dotStyles.mandatoryMissing.bg, ...(ngDevMode ? [{ debugName: "legendMandatoryBg" }] : []));
+    legendOptionalBg = computed(() => this.optional().filled > 0 ? this.dotStyles.optionalFilled.bg : this.dotStyles.optionalMissing.bg, ...(ngDevMode ? [{ debugName: "legendOptionalBg" }] : []));
+    getDotStyle(step) {
+        if (step.filled)
+            return step.type === 'mandatory' ? this.dotStyles.mandatoryFilled : this.dotStyles.optionalFilled;
+        return step.type === 'mandatory' ? this.dotStyles.mandatoryMissing : this.dotStyles.optionalMissing;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: CompletionStepsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: CompletionStepsComponent, isStandalone: true, selector: "ux-completion-steps", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, mandatory: { classPropertyName: "mandatory", publicName: "mandatory", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyDescription: { classPropertyName: "emptyDescription", publicName: "emptyDescription", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepClick: "stepClick" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+        <div class="card flex flex-col gap-4">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center gap-3">
+                    <div class="flex flex-col">
+                        <span class="text-xs font-semibold text-surface-600 dark:text-surface-300 uppercase tracking-wide">{{ title() }}</span>
+                    </div>
+                </div>
+                <span class="text-2xl font-bold" [class]="filledTotal() > 0 ? 'text-surface-900 dark:text-surface-0' : 'text-surface-500 dark:text-surface-400'">{{ filledTotal() }}/{{ totalRecords() }}</span>
+            </div>
+
+            <div class="flex items-center gap-1 flex-wrap">
+                @for (step of steps(); track $index) {
+                    <span class="inline-flex items-center justify-center w-6 h-6 rounded-full"
+                          [class.cursor-pointer]="interactive()"
+                          [class]="getDotStyle(step).bg"
+                          [pTooltip]="step.name + (step.filled ? '' : ' (missing)')" tooltipPosition="top"
+                          (click)="interactive() && stepClick.emit($index)">
+                        @if (getDotStyle(step).icon === 'pi') {
+                            <i class="pi text-[3px]" [class]="getDotStyle(step).iconClass + ' ' + getDotStyle(step).text"></i>
+                        } @else if (getDotStyle(step).icon === 'material') {
+                            <span class="material-symbols-outlined leading-none" style="font-size:20px;transform:scale(0.9)" [class]="getDotStyle(step).text">{{ getDotStyle(step).iconClass }}</span>
+                        } @else {
+                            <span class="text-sm font-black leading-none" [class]="getDotStyle(step).text">!</span>
+                        }
+                    </span>
+                }
+            </div>
+
+            <div class="flex flex-wrap items-center gap-x-6 gap-y-2 mt-1">
+                <div class="flex items-center gap-2">
+                    <span class="inline-block w-4 h-4 rounded-full shrink-0" [class]="legendMandatoryBg()"></span>
+                    <span class="text-sm text-surface-600 dark:text-surface-300">Mandatory:</span>
+                    <span class="text-sm font-semibold text-surface-900 dark:text-surface-0">{{ mandatory().filled }}/{{ mandatory().total }}</span>
+                </div>
+                <div class="flex items-center gap-2">
+                    <span class="inline-block w-4 h-4 rounded-full shrink-0" [class]="legendOptionalBg()"></span>
+                    <span class="text-sm text-surface-600 dark:text-surface-300">Optional:</span>
+                    <span class="text-sm font-semibold text-surface-900 dark:text-surface-0">{{ optional().filled }}/{{ optional().total }}</span>
+                </div>
+                <div class="flex items-center gap-2">
+                    <span class="text-sm text-surface-600 dark:text-surface-300">Total:</span>
+                    <span class="text-sm font-semibold text-surface-900 dark:text-surface-0">{{ totalRecords() }}</span>
+                </div>
+            </div>
+
+            @if (empty()) {
+                <div class="empty-state">
+                    <i class="pi pi-chart-bar text-3xl text-surface-500 dark:text-surface-400"></i>
+                    <span class="empty-state-title">{{ emptyTitle() }}</span>
+                    <span class="empty-state-desc">{{ emptyDescription() }}</span>
+                </div>
+            }
+        </div>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: CompletionStepsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ux-completion-steps',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [TooltipModule],
+                    host: { class: 'block' },
+                    template: `
+        <div class="card flex flex-col gap-4">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center gap-3">
+                    <div class="flex flex-col">
+                        <span class="text-xs font-semibold text-surface-600 dark:text-surface-300 uppercase tracking-wide">{{ title() }}</span>
+                    </div>
+                </div>
+                <span class="text-2xl font-bold" [class]="filledTotal() > 0 ? 'text-surface-900 dark:text-surface-0' : 'text-surface-500 dark:text-surface-400'">{{ filledTotal() }}/{{ totalRecords() }}</span>
+            </div>
+
+            <div class="flex items-center gap-1 flex-wrap">
+                @for (step of steps(); track $index) {
+                    <span class="inline-flex items-center justify-center w-6 h-6 rounded-full"
+                          [class.cursor-pointer]="interactive()"
+                          [class]="getDotStyle(step).bg"
+                          [pTooltip]="step.name + (step.filled ? '' : ' (missing)')" tooltipPosition="top"
+                          (click)="interactive() && stepClick.emit($index)">
+                        @if (getDotStyle(step).icon === 'pi') {
+                            <i class="pi text-[3px]" [class]="getDotStyle(step).iconClass + ' ' + getDotStyle(step).text"></i>
+                        } @else if (getDotStyle(step).icon === 'material') {
+                            <span class="material-symbols-outlined leading-none" style="font-size:20px;transform:scale(0.9)" [class]="getDotStyle(step).text">{{ getDotStyle(step).iconClass }}</span>
+                        } @else {
+                            <span class="text-sm font-black leading-none" [class]="getDotStyle(step).text">!</span>
+                        }
+                    </span>
+                }
+            </div>
+
+            <div class="flex flex-wrap items-center gap-x-6 gap-y-2 mt-1">
+                <div class="flex items-center gap-2">
+                    <span class="inline-block w-4 h-4 rounded-full shrink-0" [class]="legendMandatoryBg()"></span>
+                    <span class="text-sm text-surface-600 dark:text-surface-300">Mandatory:</span>
+                    <span class="text-sm font-semibold text-surface-900 dark:text-surface-0">{{ mandatory().filled }}/{{ mandatory().total }}</span>
+                </div>
+                <div class="flex items-center gap-2">
+                    <span class="inline-block w-4 h-4 rounded-full shrink-0" [class]="legendOptionalBg()"></span>
+                    <span class="text-sm text-surface-600 dark:text-surface-300">Optional:</span>
+                    <span class="text-sm font-semibold text-surface-900 dark:text-surface-0">{{ optional().filled }}/{{ optional().total }}</span>
+                </div>
+                <div class="flex items-center gap-2">
+                    <span class="text-sm text-surface-600 dark:text-surface-300">Total:</span>
+                    <span class="text-sm font-semibold text-surface-900 dark:text-surface-0">{{ totalRecords() }}</span>
+                </div>
+            </div>
+
+            @if (empty()) {
+                <div class="empty-state">
+                    <i class="pi pi-chart-bar text-3xl text-surface-500 dark:text-surface-400"></i>
+                    <span class="empty-state-title">{{ emptyTitle() }}</span>
+                    <span class="empty-state-desc">{{ emptyDescription() }}</span>
+                </div>
+            }
+        </div>
+    `
+                }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }], mandatory: [{ type: i0.Input, args: [{ isSignal: true, alias: "mandatory", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], emptyTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTitle", required: false }] }], emptyDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyDescription", required: false }] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }] } });
+
 /**
  * Structural directive that marks a template as content for a specific tab
  * inside `<ux-detail-layout>`.
@@ -2843,12 +3112,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  *   <ng-template uxDetailTab="scope">...tab 2...</ng-template>
  *
  *   <ng-container ux-detail-sidebar>
+ *     <!-- Use ng-container so children become direct children of the
+ *          library's flex container and inherit the gap spacing. -->
  *     ...right sidebar (AI card, documents, etc.)...
  *   </ng-container>
  *
- *   <ng-container ux-detail-footer>
- *     ...audit metadata row...
- *   </ng-container>
  * </ux-detail-layout>
  * ```
  */
@@ -2857,8 +3125,23 @@ class DetailLayoutComponent {
     tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : []));
     /** Currently active tab value (two-way bindable). */
     activeTab = model('', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    /** Options for the mobile tab dropdown. */
+    tabOptions = computed(() => this.tabs().map(t => ({ label: t.label, value: t.value })), ...(ngDevMode ? [{ debugName: "tabOptions" }] : []));
+    /** True when there is only a single tab, making the tab bar redundant. */
+    singleTab = computed(() => this.tabs().length <= 1, ...(ngDevMode ? [{ debugName: "singleTab" }] : []));
+    /** True when viewport is below the lg breakpoint (1024px). */
+    isMobile = signal(false, ...(ngDevMode ? [{ debugName: "isMobile" }] : []));
     /** True once the scrollable body has been scrolled past the threshold. */
     scrolled = signal(false, ...(ngDevMode ? [{ debugName: "scrolled" }] : []));
+    constructor() {
+        if (isPlatformBrowser(inject(PLATFORM_ID))) {
+            const mql = window.matchMedia('(max-width: 1023px)');
+            this.isMobile.set(mql.matches);
+            const handler = (e) => this.isMobile.set(e.matches);
+            mql.addEventListener('change', handler);
+            inject(DestroyRef).onDestroy(() => mql.removeEventListener('change', handler));
+        }
+    }
     /** Tab content templates provided by the consumer. */
     tabTemplates;
     getTabTemplate(value) {
@@ -2870,8 +3153,8 @@ class DetailLayoutComponent {
         this.scrolled.set(el.scrollTop > 10);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DetailLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: DetailLayoutComponent, isStandalone: true, selector: "ux-detail-layout", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange" }, host: { classAttribute: "ux-detail-layout block" }, queries: [{ propertyName: "tabTemplates", predicate: DetailTabDirective }], ngImport: i0, template: `
-        <div class="flex flex-col overflow-hidden" [style.height]="'calc(100vh - 64px)'">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: DetailLayoutComponent, isStandalone: true, selector: "ux-detail-layout", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange" }, host: { classAttribute: "ux-detail-layout" }, queries: [{ propertyName: "tabTemplates", predicate: DetailTabDirective }], ngImport: i0, template: `
+        <div class="flex flex-col flex-1 min-h-0">
 
             <!-- Sticky header (projected) -->
             <div class="ux-dl__header flex-shrink-0 z-10">
@@ -2883,13 +3166,30 @@ class DetailLayoutComponent {
                 </div>
             </div>
 
-            <!-- Scrollable body -->
-            <div class="flex flex-col flex-1 min-h-0 overflow-y-auto overflow-x-hidden ux-dl__scroll"
-                 (scroll)="onScroll($event)">
+            <!-- p-tabs wraps tablist + scrollable panels for state binding -->
+            <p-tabs class="flex flex-col flex-1 min-h-0" [value]="activeTab()" (valueChange)="activeTab.set($event + '')">
 
-                <!-- Full-width tab bar -->
-                <p-tabs [value]="activeTab()" (valueChange)="activeTab.set($event + '')">
-                    <p-tablist>
+                @if (!singleTab()) {
+                    <!-- Mobile: dropdown selector -->
+                    @if (isMobile()) {
+                        <div class="ux-dl__mobile-tabs">
+                            <p-select
+                                [options]="tabOptions()"
+                                [ngModel]="activeTab()"
+                                (ngModelChange)="activeTab.set($event)"
+                                optionLabel="label"
+                                optionValue="value"
+                                styleClass="w-full ux-dl__mobile-select"
+                            />
+                        </div>
+                    }
+
+                    <!-- Desktop: horizontal tab bar (outside scroll → stays fixed below header) -->
+                    <p-tablist
+                        class="flex-shrink-0 ux-dl__tablist"
+                        [style.display]="isMobile() ? 'none' : null"
+                        [pt]="{ tabList: { class: 'p-0' } }"
+                    >
                         @for (tab of tabs(); track tab.value) {
                             <p-tab [value]="tab.value">
                                 @if (tab.icon) {
@@ -2899,12 +3199,17 @@ class DetailLayoutComponent {
                             </p-tab>
                         }
                     </p-tablist>
+                }
 
-                    <!-- Content + Sidebar row below tab bar -->
-                    <div class="flex flex-col lg:flex-row items-start gap-6 w-full py-4 sm:py-6">
+                <!-- Scrollable body (only content scrolls, tabs stay above) -->
+                <div class="flex flex-col flex-1 min-h-0 overflow-y-auto overflow-x-hidden ux-dl__scroll"
+                     (scroll)="onScroll($event)">
+
+                    <!-- Content + Sidebar row -->
+                    <div class="flex flex-col lg:flex-row items-start gap-6 w-full py-4 lg:py-6">
 
                         <!-- Main column: tab panels -->
-                        <div class="flex-1 min-w-0 flex flex-col gap-6">
+                        <div class="w-full flex-1 min-w-0 flex flex-col gap-6">
                             <p-tabpanels>
                                 @for (tab of tabs(); track tab.value) {
                                     <p-tabpanel [value]="tab.value">
@@ -2916,27 +3221,27 @@ class DetailLayoutComponent {
                                     </p-tabpanel>
                                 }
                             </p-tabpanels>
-
-                            <!-- Footer below tab content -->
-                            <ng-content select="[ux-detail-footer]" />
                         </div>
 
                         <!-- Sidebar -->
-                        <aside class="w-full lg:w-[380px] shrink-0 flex flex-col lg:sticky lg:top-4 lg:self-start pb-8">
+                        <aside class="w-full lg:w-[380px] shrink-0 flex flex-col lg:sticky lg:top-4 lg:self-start lg:pb-8">
                             <div class="ux-dl__sidebar-inner w-full">
                                 <ng-content select="[ux-detail-sidebar]" />
                             </div>
                         </aside>
                     </div>
-                </p-tabs>
-            </div>
+
+                </div>
+
+            </p-tabs>
+
         </div>
-    `, isInline: true, styles: [":host{display:block;min-height:calc(100vh - 4rem);font-family:var(--p-font-family, \"Noto Sans\", sans-serif);background:transparent;color:var(--p-text-color)}.ux-dl__header{background:transparent;border-bottom:1px solid var(--p-content-border-color)}.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,.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}:host :deep p-tablist{position:sticky;top:0;z-index:5;background:var(--p-content-background, var(--p-primary-400))}:host :deep p-tablist .p-tablist-content{width:100%}:host :deep p-tablist .p-tablist-tab-list{width:100%}:host :deep p-tab{flex:1;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i2$2.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i2$2.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i2$2.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i2$2.TabList, selector: "p-tablist" }, { kind: "component", type: i2$2.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,
-            args: [{ selector: 'ux-detail-layout', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, TabsModule], host: { class: 'ux-detail-layout block' }, template: `
-        <div class="flex flex-col overflow-hidden" [style.height]="'calc(100vh - 64px)'">
+            args: [{ selector: 'ux-detail-layout', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, SelectModule, TabsModule], host: { class: 'ux-detail-layout' }, template: `
+        <div class="flex flex-col flex-1 min-h-0">
 
             <!-- Sticky header (projected) -->
             <div class="ux-dl__header flex-shrink-0 z-10">
@@ -2948,13 +3253,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                 </div>
             </div>
 
-            <!-- Scrollable body -->
-            <div class="flex flex-col flex-1 min-h-0 overflow-y-auto overflow-x-hidden ux-dl__scroll"
-                 (scroll)="onScroll($event)">
+            <!-- p-tabs wraps tablist + scrollable panels for state binding -->
+            <p-tabs class="flex flex-col flex-1 min-h-0" [value]="activeTab()" (valueChange)="activeTab.set($event + '')">
 
-                <!-- Full-width tab bar -->
-                <p-tabs [value]="activeTab()" (valueChange)="activeTab.set($event + '')">
-                    <p-tablist>
+                @if (!singleTab()) {
+                    <!-- Mobile: dropdown selector -->
+                    @if (isMobile()) {
+                        <div class="ux-dl__mobile-tabs">
+                            <p-select
+                                [options]="tabOptions()"
+                                [ngModel]="activeTab()"
+                                (ngModelChange)="activeTab.set($event)"
+                                optionLabel="label"
+                                optionValue="value"
+                                styleClass="w-full ux-dl__mobile-select"
+                            />
+                        </div>
+                    }
+
+                    <!-- Desktop: horizontal tab bar (outside scroll → stays fixed below header) -->
+                    <p-tablist
+                        class="flex-shrink-0 ux-dl__tablist"
+                        [style.display]="isMobile() ? 'none' : null"
+                        [pt]="{ tabList: { class: 'p-0' } }"
+                    >
                         @for (tab of tabs(); track tab.value) {
                             <p-tab [value]="tab.value">
                                 @if (tab.icon) {
@@ -2964,12 +3286,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                             </p-tab>
                         }
                     </p-tablist>
+                }
+
+                <!-- Scrollable body (only content scrolls, tabs stay above) -->
+                <div class="flex flex-col flex-1 min-h-0 overflow-y-auto overflow-x-hidden ux-dl__scroll"
+                     (scroll)="onScroll($event)">
 
-                    <!-- Content + Sidebar row below tab bar -->
-                    <div class="flex flex-col lg:flex-row items-start gap-6 w-full py-4 sm:py-6">
+                    <!-- Content + Sidebar row -->
+                    <div class="flex flex-col lg:flex-row items-start gap-6 w-full py-4 lg:py-6">
 
                         <!-- Main column: tab panels -->
-                        <div class="flex-1 min-w-0 flex flex-col gap-6">
+                        <div class="w-full flex-1 min-w-0 flex flex-col gap-6">
                             <p-tabpanels>
                                 @for (tab of tabs(); track tab.value) {
                                     <p-tabpanel [value]="tab.value">
@@ -2981,27 +3308,658 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                                     </p-tabpanel>
                                 }
                             </p-tabpanels>
-
-                            <!-- Footer below tab content -->
-                            <ng-content select="[ux-detail-footer]" />
                         </div>
 
                         <!-- Sidebar -->
-                        <aside class="w-full lg:w-[380px] shrink-0 flex flex-col lg:sticky lg:top-4 lg:self-start pb-8">
+                        <aside class="w-full lg:w-[380px] shrink-0 flex flex-col lg:sticky lg:top-4 lg:self-start lg:pb-8">
                             <div class="ux-dl__sidebar-inner w-full">
                                 <ng-content select="[ux-detail-sidebar]" />
                             </div>
                         </aside>
                     </div>
-                </p-tabs>
-            </div>
+
+                </div>
+
+            </p-tabs>
+
         </div>
-    `, styles: [":host{display:block;min-height:calc(100vh - 4rem);font-family:var(--p-font-family, \"Noto Sans\", sans-serif);background:transparent;color:var(--p-text-color)}.ux-dl__header{background:transparent;border-bottom:1px solid var(--p-content-border-color)}.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,.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}:host :deep p-tablist{position:sticky;top:0;z-index:5;background:var(--p-content-background, var(--p-primary-400))}:host :deep p-tablist .p-tablist-content{width:100%}:host :deep p-tablist .p-tablist-tab-list{width:100%}:host :deep p-tab{flex:1;justify-content:center}\n"] }]
-        }], 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: [{
+    `, 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]
             }] } });
 
+/**
+ * Horizontal row of pill-shaped sub-tab buttons. Styling aligns with sidebar menu item
+ * hover/active tokens (`--d-menuitem-*`).
+ */
+class PillTabsComponent {
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
+    activeValue = model('', ...(ngDevMode ? [{ debugName: "activeValue" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PillTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: PillTabsComponent, isStandalone: true, selector: "ux-pill-tabs", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, activeValue: { classPropertyName: "activeValue", publicName: "activeValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeValue: "activeValueChange" }, host: { classAttribute: "ux-pill-tabs block" }, ngImport: i0, template: `
+        <div class="ux-pill-tabs__row" role="tablist">
+            @for (item of items(); track item.value) {
+                <button
+                    type="button"
+                    class="ux-pill-tabs__btn"
+                    role="tab"
+                    [attr.aria-selected]="activeValue() === item.value"
+                    [class.ux-pill-tabs__btn--active]="activeValue() === item.value"
+                    (click)="activeValue.set(item.value)"
+                >
+                    {{ item.label }}
+                </button>
+            }
+        </div>
+    `, isInline: true, styles: [".ux-pill-tabs__row{display:flex;flex-wrap:wrap;gap:.5rem}.ux-pill-tabs__btn{border-radius:9999px;padding:.375rem .875rem;font-size:var(--p-font-size, .875rem);font-weight:600;font-family:inherit;cursor:pointer;transition:all .15s ease;border:1px solid var(--p-primary-800);background:transparent;color:var(--p-text-muted-color)}:host-context(.app-dark) .ux-pill-tabs__btn:not(.ux-pill-tabs__btn--active){border-color:var(--p-surface-700)}.ux-pill-tabs__btn:hover:not(.ux-pill-tabs__btn--active){background:var(--d-menuitem-hover-bg);color:var(--p-primary-950)}:host-context(.app-dark) .ux-pill-tabs__btn:hover:not(.ux-pill-tabs__btn--active){color:var(--p-primary-200)}.ux-pill-tabs__btn--active{background:var(--p-primary-200);border-color:transparent;color:var(--p-primary-950)}:host-context(.app-dark) .ux-pill-tabs__btn--active{color:var(--p-primary-950)}.ux-pill-tabs__btn:focus{outline:none;box-shadow:none}.ux-pill-tabs__btn:focus-visible{outline:none;box-shadow:var(--d-menuitem-focus-shadow)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PillTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ux-pill-tabs', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ux-pill-tabs block' }, template: `
+        <div class="ux-pill-tabs__row" role="tablist">
+            @for (item of items(); track item.value) {
+                <button
+                    type="button"
+                    class="ux-pill-tabs__btn"
+                    role="tab"
+                    [attr.aria-selected]="activeValue() === item.value"
+                    [class.ux-pill-tabs__btn--active]="activeValue() === item.value"
+                    (click)="activeValue.set(item.value)"
+                >
+                    {{ item.label }}
+                </button>
+            }
+        </div>
+    `, styles: [".ux-pill-tabs__row{display:flex;flex-wrap:wrap;gap:.5rem}.ux-pill-tabs__btn{border-radius:9999px;padding:.375rem .875rem;font-size:var(--p-font-size, .875rem);font-weight:600;font-family:inherit;cursor:pointer;transition:all .15s ease;border:1px solid var(--p-primary-800);background:transparent;color:var(--p-text-muted-color)}:host-context(.app-dark) .ux-pill-tabs__btn:not(.ux-pill-tabs__btn--active){border-color:var(--p-surface-700)}.ux-pill-tabs__btn:hover:not(.ux-pill-tabs__btn--active){background:var(--d-menuitem-hover-bg);color:var(--p-primary-950)}:host-context(.app-dark) .ux-pill-tabs__btn:hover:not(.ux-pill-tabs__btn--active){color:var(--p-primary-200)}.ux-pill-tabs__btn--active{background:var(--p-primary-200);border-color:transparent;color:var(--p-primary-950)}:host-context(.app-dark) .ux-pill-tabs__btn--active{color:var(--p-primary-950)}.ux-pill-tabs__btn:focus{outline:none;box-shadow:none}.ux-pill-tabs__btn:focus-visible{outline:none;box-shadow:var(--d-menuitem-focus-shadow)}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], activeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeValue", required: false }] }, { type: i0.Output, args: ["activeValueChange"] }] } });
+
+class DocumentsCardComponent {
+    documents = input([], ...(ngDevMode ? [{ debugName: "documents" }] : []));
+    rows = input(5, ...(ngDevMode ? [{ debugName: "rows" }] : []));
+    expanded = signal(false, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+    activeFilter = signal('All Files', ...(ngDevMode ? [{ debugName: "activeFilter" }] : []));
+    searchQuery = model('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
+    fileTypes = computed(() => {
+        const types = [...new Set(this.documents().map(d => d.type))];
+        types.sort();
+        return types;
+    }, ...(ngDevMode ? [{ debugName: "fileTypes" }] : []));
+    filterOptions = computed(() => ['All Files', ...this.fileTypes(), 'Other'], ...(ngDevMode ? [{ debugName: "filterOptions" }] : []));
+    pillTabItems = computed(() => this.filterOptions().map(f => ({ value: f, label: f })), ...(ngDevMode ? [{ debugName: "pillTabItems" }] : []));
+    summary = computed(() => {
+        const docs = this.documents();
+        const count = docs.length;
+        if (count === 0)
+            return 'No files attached';
+        const types = this.fileTypes();
+        const fileWord = count === 1 ? 'file' : 'files';
+        if (types.length === 0)
+            return `${count} ${fileWord} attached`;
+        return `${count} ${fileWord} · ${types.join(', ')}`;
+    }, ...(ngDevMode ? [{ debugName: "summary" }] : []));
+    filtered = computed(() => {
+        let docs = this.documents();
+        const query = this.searchQuery().trim().toLowerCase();
+        if (query) {
+            docs = docs.filter(d => d.fileName.toLowerCase().includes(query) || d.owner.toLowerCase().includes(query));
+        }
+        const filter = this.activeFilter();
+        if (filter === 'All Files')
+            return docs;
+        if (filter === 'Other') {
+            const knownTypes = this.fileTypes();
+            return docs.filter(d => !knownTypes.includes(d.type));
+        }
+        return docs.filter(d => d.type === filter);
+    }, ...(ngDevMode ? [{ debugName: "filtered" }] : []));
+    menuItems = [];
+    onMenuToggle(event, _doc, menu) {
+        this.menuItems = [
+            { label: 'Preview', icon: 'pi pi-eye' },
+            { label: 'Share', icon: 'pi pi-share-alt' },
+            { separator: true },
+            { label: 'Delete', icon: 'pi pi-trash', styleClass: 'text-red-500' }
+        ];
+        menu.toggle(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DocumentsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: DocumentsCardComponent, isStandalone: true, selector: "ux-documents-card", inputs: { documents: { classPropertyName: "documents", publicName: "documents", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, searchQuery: { classPropertyName: "searchQuery", publicName: "searchQuery", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchQuery: "searchQueryChange" }, host: { classAttribute: "ux-documents-card block" }, ngImport: i0, template: `
+        <div class="card flex flex-col overflow-hidden">
+            <p-panel [toggleable]="true" [collapsed]="!expanded()" (collapsedChange)="expanded.set(!$event)" toggler="header">
+                <ng-template #headericons let-collapsed>
+                    <i class="pi text-sm text-darkblue-500 dark:text-surface-0" [ngClass]="collapsed ? 'pi-chevron-down' : 'pi-chevron-up'"></i>
+                </ng-template>
+                <ng-template #header>
+                    <div class="flex items-center gap-3 flex-1">
+                        <div class="w-[34px] h-[34px] rounded-[10px] flex items-center justify-center shrink-0">
+                            <i class="pi pi-folder text-deepsea-500 dark:text-surface-0"></i>
+                        </div>
+                        <div class="flex flex-col">
+                            <h4 class="title-h4 text-left text-deepsea-500 dark:text-surface-0">Documents</h4>
+                            <span class="text-surface-500 dark:text-surface-300 text-sm font-medium leading-tight">{{ summary() }}</span>
+                        </div>
+                    </div>
+                </ng-template>
+                        <div class="flex flex-col gap-4 pt-4">
+                            <ux-pill-tabs [items]="pillTabItems()" [(activeValue)]="activeFilter" />
+
+                            <p-iconfield>
+                                <p-inputicon class="pi pi-search" />
+                                <input pInputText [(ngModel)]="searchQuery" placeholder="Search documents" class="w-full" />
+                            </p-iconfield>
+
+                            @if (filtered().length > 0) {
+                                <p-table
+                                    [value]="filtered()"
+                                    [paginator]="true"
+                                    [rows]="rows()"
+                                    sortMode="multiple"
+                                    styleClass="flex flex-col rounded-2xl overflow-hidden [&>[data-pc-section=paginatorcontainer]]:border-0! [&>[data-pc-section=paginatorcontainer]]:mt-auto [&_[data-pc-name=pcpaginator]]:rounded-none!"
+                                    tableStyleClass="w-full table-fixed"
+                                    paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink"
+                                >
+                                    <ng-template #header>
+                                        <tr>
+                                            <th pSortableColumn="fileName" class="w-1/2">File Name <p-sortIcon field="fileName" /></th>
+                                            <th pSortableColumn="type" class="w-1/4">Type <p-sortIcon field="type" /></th>
+                                            <th class="w-1/4">Actions</th>
+                                        </tr>
+                                    </ng-template>
+                                    <ng-template #body let-doc>
+                                        <tr>
+                                            <td>
+                                                <div class="flex items-center gap-3 py-1 min-w-0">
+                                                    <i class="pi text-xl text-surface-600 dark:text-surface-300 shrink-0" [ngClass]="doc.icon"></i>
+                                                    <span class="text-surface-700 dark:text-surface-100 text-sm truncate">{{ doc.fileName }}</span>
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <p-tag [value]="doc.type" styleClass="px-2 py-1" />
+                                            </td>
+                                            <td>
+                                                <div class="flex items-center gap-1">
+                                                    <p-button icon="pi pi-download" [rounded]="true" [text]="true" size="small" severity="secondary" styleClass="cursor-pointer" ariaLabel="Download" />
+                                                    <p-button icon="pi pi-ellipsis-h" [rounded]="true" [text]="true" size="small" severity="secondary" styleClass="cursor-pointer" ariaLabel="More options" (onClick)="onMenuToggle($event, doc, docMenu)" />
+                                                    <p-menu #docMenu [model]="menuItems" [popup]="true" styleClass="w-48" appendTo="body" />
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    </ng-template>
+                                </p-table>
+                            } @else {
+                                <div class="flex flex-col items-center gap-3 py-8 text-center">
+                                    <i class="pi pi-folder-open text-3xl text-surface-300 dark:text-surface-500"></i>
+                                    <span class="text-surface-600 dark:text-surface-300 text-sm">No documents to show</span>
+                                </div>
+                            }
+
+                            <p-fileupload
+                                name="documents[]"
+                                [multiple]="true"
+                                maxFileSize="10000000"
+                                mode="advanced"
+                                [auto]="false"
+                                chooseLabel="Upload File"
+                                chooseIcon="pi pi-upload"
+                                [showUploadButton]="false"
+                                [showCancelButton]="false"
+                                [pt]="{ root: { class: 'bg-transparent' }, header: { class: 'bg-transparent' }, content: { class: 'bg-transparent' } }"
+                            >
+                                <ng-template #header let-chooseCallback="chooseCallback">
+                                    <div class="flex items-center gap-2 w-full">
+                                        <p-button icon="pi pi-upload" label="Upload File" (onClick)="chooseCallback()" />
+                                        <p-button icon="pi pi-link" label="Share Link" [outlined]="true" styleClass="!text-primary-600 !border-primary-600" />
+                                    </div>
+                                </ng-template>
+                                <ng-template #empty>
+                                    <div class="flex flex-col items-center gap-2 py-4">
+                                        <i class="pi pi-cloud-upload text-2xl text-surface-400 dark:text-surface-300"></i>
+                                        <span class="text-surface-500 dark:text-surface-100 text-sm">Drag and drop files here</span>
+                                    </div>
+                                </ng-template>
+                            </p-fileupload>
+                        </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$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,
+            args: [{ selector: 'ux-documents-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, FormsModule, ButtonModule, FileUploadModule, IconFieldModule, InputIconModule, InputTextModule, MenuModule, TableModule, TagModule, PillTabsComponent, PanelModule], host: { class: 'ux-documents-card block' }, template: `
+        <div class="card flex flex-col overflow-hidden">
+            <p-panel [toggleable]="true" [collapsed]="!expanded()" (collapsedChange)="expanded.set(!$event)" toggler="header">
+                <ng-template #headericons let-collapsed>
+                    <i class="pi text-sm text-darkblue-500 dark:text-surface-0" [ngClass]="collapsed ? 'pi-chevron-down' : 'pi-chevron-up'"></i>
+                </ng-template>
+                <ng-template #header>
+                    <div class="flex items-center gap-3 flex-1">
+                        <div class="w-[34px] h-[34px] rounded-[10px] flex items-center justify-center shrink-0">
+                            <i class="pi pi-folder text-deepsea-500 dark:text-surface-0"></i>
+                        </div>
+                        <div class="flex flex-col">
+                            <h4 class="title-h4 text-left text-deepsea-500 dark:text-surface-0">Documents</h4>
+                            <span class="text-surface-500 dark:text-surface-300 text-sm font-medium leading-tight">{{ summary() }}</span>
+                        </div>
+                    </div>
+                </ng-template>
+                        <div class="flex flex-col gap-4 pt-4">
+                            <ux-pill-tabs [items]="pillTabItems()" [(activeValue)]="activeFilter" />
+
+                            <p-iconfield>
+                                <p-inputicon class="pi pi-search" />
+                                <input pInputText [(ngModel)]="searchQuery" placeholder="Search documents" class="w-full" />
+                            </p-iconfield>
+
+                            @if (filtered().length > 0) {
+                                <p-table
+                                    [value]="filtered()"
+                                    [paginator]="true"
+                                    [rows]="rows()"
+                                    sortMode="multiple"
+                                    styleClass="flex flex-col rounded-2xl overflow-hidden [&>[data-pc-section=paginatorcontainer]]:border-0! [&>[data-pc-section=paginatorcontainer]]:mt-auto [&_[data-pc-name=pcpaginator]]:rounded-none!"
+                                    tableStyleClass="w-full table-fixed"
+                                    paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink"
+                                >
+                                    <ng-template #header>
+                                        <tr>
+                                            <th pSortableColumn="fileName" class="w-1/2">File Name <p-sortIcon field="fileName" /></th>
+                                            <th pSortableColumn="type" class="w-1/4">Type <p-sortIcon field="type" /></th>
+                                            <th class="w-1/4">Actions</th>
+                                        </tr>
+                                    </ng-template>
+                                    <ng-template #body let-doc>
+                                        <tr>
+                                            <td>
+                                                <div class="flex items-center gap-3 py-1 min-w-0">
+                                                    <i class="pi text-xl text-surface-600 dark:text-surface-300 shrink-0" [ngClass]="doc.icon"></i>
+                                                    <span class="text-surface-700 dark:text-surface-100 text-sm truncate">{{ doc.fileName }}</span>
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <p-tag [value]="doc.type" styleClass="px-2 py-1" />
+                                            </td>
+                                            <td>
+                                                <div class="flex items-center gap-1">
+                                                    <p-button icon="pi pi-download" [rounded]="true" [text]="true" size="small" severity="secondary" styleClass="cursor-pointer" ariaLabel="Download" />
+                                                    <p-button icon="pi pi-ellipsis-h" [rounded]="true" [text]="true" size="small" severity="secondary" styleClass="cursor-pointer" ariaLabel="More options" (onClick)="onMenuToggle($event, doc, docMenu)" />
+                                                    <p-menu #docMenu [model]="menuItems" [popup]="true" styleClass="w-48" appendTo="body" />
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    </ng-template>
+                                </p-table>
+                            } @else {
+                                <div class="flex flex-col items-center gap-3 py-8 text-center">
+                                    <i class="pi pi-folder-open text-3xl text-surface-300 dark:text-surface-500"></i>
+                                    <span class="text-surface-600 dark:text-surface-300 text-sm">No documents to show</span>
+                                </div>
+                            }
+
+                            <p-fileupload
+                                name="documents[]"
+                                [multiple]="true"
+                                maxFileSize="10000000"
+                                mode="advanced"
+                                [auto]="false"
+                                chooseLabel="Upload File"
+                                chooseIcon="pi pi-upload"
+                                [showUploadButton]="false"
+                                [showCancelButton]="false"
+                                [pt]="{ root: { class: 'bg-transparent' }, header: { class: 'bg-transparent' }, content: { class: 'bg-transparent' } }"
+                            >
+                                <ng-template #header let-chooseCallback="chooseCallback">
+                                    <div class="flex items-center gap-2 w-full">
+                                        <p-button icon="pi pi-upload" label="Upload File" (onClick)="chooseCallback()" />
+                                        <p-button icon="pi pi-link" label="Share Link" [outlined]="true" styleClass="!text-primary-600 !border-primary-600" />
+                                    </div>
+                                </ng-template>
+                                <ng-template #empty>
+                                    <div class="flex flex-col items-center gap-2 py-4">
+                                        <i class="pi pi-cloud-upload text-2xl text-surface-400 dark:text-surface-300"></i>
+                                        <span class="text-surface-500 dark:text-surface-100 text-sm">Drag and drop files here</span>
+                                    </div>
+                                </ng-template>
+                            </p-fileupload>
+                        </div>
+            </p-panel>
+        </div>
+    ` }]
+        }], propDecorators: { documents: [{ type: i0.Input, args: [{ isSignal: true, alias: "documents", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], searchQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchQuery", required: false }] }, { type: i0.Output, args: ["searchQueryChange"] }] } });
+
+class UxSelectComponent {
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    optionLabel = input('label', ...(ngDevMode ? [{ debugName: "optionLabel" }] : []));
+    optionValue = input('value', ...(ngDevMode ? [{ debugName: "optionValue" }] : []));
+    optionGroupLabel = input('label', ...(ngDevMode ? [{ debugName: "optionGroupLabel" }] : []));
+    optionGroupChildren = input('items', ...(ngDevMode ? [{ debugName: "optionGroupChildren" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    filter = input(false, ...(ngDevMode ? [{ debugName: "filter" }] : []));
+    showClear = input(false, ...(ngDevMode ? [{ debugName: "showClear" }] : []));
+    emptyMessage = input('No results found', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
+    group = input(false, ...(ngDevMode ? [{ debugName: "group" }] : []));
+    styleClass = input('', ...(ngDevMode ? [{ debugName: "styleClass" }] : []));
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    onChange = output();
+    onFilter = output();
+    resolvedStyleClass = computed(() => {
+        const base = 'ux-select__inner';
+        const extra = this.styleClass();
+        return extra ? `${base} ${extra}` : base;
+    }, ...(ngDevMode ? [{ debugName: "resolvedStyleClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: UxSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: UxSelectComponent, isStandalone: true, selector: "ux-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionGroupLabel: { classPropertyName: "optionGroupLabel", publicName: "optionGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, optionGroupChildren: { classPropertyName: "optionGroupChildren", publicName: "optionGroupChildren", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onChange: "onChange", onFilter: "onFilter" }, host: { classAttribute: "ux-select" }, ngImport: i0, template: `
+        <p-select
+            [options]="options()"
+            [optionLabel]="optionLabel()"
+            [optionValue]="optionValue()"
+            [optionGroupLabel]="optionGroupLabel()"
+            [optionGroupChildren]="optionGroupChildren()"
+            [placeholder]="placeholder()"
+            [disabled]="disabled()"
+            [filter]="filter()"
+            [showClear]="showClear()"
+            [emptyMessage]="emptyMessage()"
+            [group]="group()"
+            [ngModel]="value()"
+            (ngModelChange)="value.set($event)"
+            (onChange)="onChange.emit($event)"
+            (onFilter)="onFilter.emit($event)"
+            [styleClass]="resolvedStyleClass()"
+        />
+    `, isInline: true, styles: [":host :deep .p-select{border-radius:var(--p-content-border-radius, .375rem);font-family:var(--p-font-family, \"Noto Sans\", sans-serif);font-size:var(--font-size-sm, .875rem);transition:border-color .15s ease,box-shadow .15s ease;padding:.5rem 1.5rem}:host :deep .p-select:not(.p-disabled):hover{border-color:var(--p-primary-400)}:host :deep .p-select:not(.p-disabled).p-focus{border-color:var(--p-primary-500);box-shadow:0 0 0 2px color-mix(in srgb,var(--p-primary-500) 20%,transparent)}:host :deep .p-select-label{font-size:var(--font-size-sm, .875rem);color:var(--p-text-color)}:host :deep .p-select-label.p-placeholder{color:var(--p-text-muted-color)}:host :deep .p-select-dropdown{color:var(--p-text-muted-color)}:host-context(:root[class*=\"app-dark\"]) :deep .p-select:not(.p-disabled):hover{border-color:var(--p-primary-300)}:host-context(:root[class*=\"app-dark\"]) :deep .p-select:not(.p-disabled).p-focus{border-color:var(--p-primary-400);box-shadow:0 0 0 2px color-mix(in srgb,var(--p-primary-400) 25%,transparent)}\n"], dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: UxSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ux-select', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, SelectModule], host: { class: 'ux-select' }, template: `
+        <p-select
+            [options]="options()"
+            [optionLabel]="optionLabel()"
+            [optionValue]="optionValue()"
+            [optionGroupLabel]="optionGroupLabel()"
+            [optionGroupChildren]="optionGroupChildren()"
+            [placeholder]="placeholder()"
+            [disabled]="disabled()"
+            [filter]="filter()"
+            [showClear]="showClear()"
+            [emptyMessage]="emptyMessage()"
+            [group]="group()"
+            [ngModel]="value()"
+            (ngModelChange)="value.set($event)"
+            (onChange)="onChange.emit($event)"
+            (onFilter)="onFilter.emit($event)"
+            [styleClass]="resolvedStyleClass()"
+        />
+    `, styles: [":host :deep .p-select{border-radius:var(--p-content-border-radius, .375rem);font-family:var(--p-font-family, \"Noto Sans\", sans-serif);font-size:var(--font-size-sm, .875rem);transition:border-color .15s ease,box-shadow .15s ease;padding:.5rem 1.5rem}:host :deep .p-select:not(.p-disabled):hover{border-color:var(--p-primary-400)}:host :deep .p-select:not(.p-disabled).p-focus{border-color:var(--p-primary-500);box-shadow:0 0 0 2px color-mix(in srgb,var(--p-primary-500) 20%,transparent)}:host :deep .p-select-label{font-size:var(--font-size-sm, .875rem);color:var(--p-text-color)}:host :deep .p-select-label.p-placeholder{color:var(--p-text-muted-color)}:host :deep .p-select-dropdown{color:var(--p-text-muted-color)}:host-context(:root[class*=\"app-dark\"]) :deep .p-select:not(.p-disabled):hover{border-color:var(--p-primary-300)}:host-context(:root[class*=\"app-dark\"]) :deep .p-select:not(.p-disabled).p-focus{border-color:var(--p-primary-400);box-shadow:0 0 0 2px color-mix(in srgb,var(--p-primary-400) 25%,transparent)}\n"] }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionGroupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupLabel", required: false }] }], optionGroupChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupChildren", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onChange: [{ type: i0.Output, args: ["onChange"] }], onFilter: [{ type: i0.Output, args: ["onFilter"] }] } });
+
+class TaskDrawerComponent {
+    visible = model(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
+    task = input(null, ...(ngDevMode ? [{ debugName: "task" }] : []));
+    mode = input('create', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    availableMembers = input([
+        { name: 'Amy Elsner', image: 'amyelsner.png' },
+        { name: 'Anna Fali', image: 'annafali.png' },
+        { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+        { name: 'Bernardo Dominic', image: 'bernardodominic.png' }
+    ], ...(ngDevMode ? [{ debugName: "availableMembers" }] : []));
+    save = output();
+    cancel = output();
+    drawerTitle = computed(() => this.mode() === 'create' ? 'Create New Task' : 'Edit Task', ...(ngDevMode ? [{ debugName: "drawerTitle" }] : []));
+    formData = {
+        id: null,
+        title: '',
+        description: '',
+        status: 'pending',
+        completed: false,
+        startDate: null,
+        endDate: null,
+        members: []
+    };
+    statusOptions = [
+        { label: 'Pending', value: 'pending' },
+        { label: 'In Progress', value: 'in-progress' },
+        { label: 'Completed', value: 'completed' }
+    ];
+    filteredMembers = [];
+    ngOnChanges(changes) {
+        if (changes['task']) {
+            const newTask = changes['task'].currentValue;
+            if (newTask) {
+                this.formData = {
+                    id: newTask.id,
+                    title: newTask.title || '',
+                    description: newTask.description || '',
+                    status: newTask.status || 'pending',
+                    completed: newTask.completed || false,
+                    startDate: newTask.startDate ? this.parseDate(newTask.startDate) : null,
+                    endDate: newTask.endDate ? this.parseDate(newTask.endDate) : null,
+                    members: newTask.members || []
+                };
+            }
+            else {
+                this.resetForm();
+            }
+        }
+    }
+    parseDate(dateStr) {
+        if (!dateStr)
+            return null;
+        const parts = dateStr.split('.');
+        if (parts.length === 3) {
+            return new Date(parseInt(parts[2]), parseInt(parts[1]) - 1, parseInt(parts[0]));
+        }
+        return null;
+    }
+    resetForm() {
+        this.formData = {
+            id: null,
+            title: '',
+            description: '',
+            status: 'pending',
+            completed: false,
+            startDate: null,
+            endDate: null,
+            members: []
+        };
+    }
+    filterMembers(event) {
+        const members = this.availableMembers();
+        if (!event.query) {
+            this.filteredMembers = members;
+            return;
+        }
+        this.filteredMembers = members.filter(member => member.name?.toLowerCase().includes(event.query.toLowerCase()));
+    }
+    formatDateForSave(date) {
+        if (!date)
+            return null;
+        const d = new Date(date);
+        return `${String(d.getDate()).padStart(2, '0')}.${String(d.getMonth() + 1).padStart(2, '0')}.${d.getFullYear()}`;
+    }
+    handleSave() {
+        const taskData = {
+            id: this.formData.id,
+            title: this.formData.title,
+            description: this.formData.description || null,
+            status: this.formData.status,
+            completed: this.formData.status === 'completed',
+            startDate: this.formatDateForSave(this.formData.startDate),
+            endDate: this.formatDateForSave(this.formData.endDate),
+            members: this.formData.members
+        };
+        this.save.emit(taskData);
+        this.handleCancel();
+    }
+    handleCancel() {
+        this.resetForm();
+        this.cancel.emit();
+        this.visible.set(false);
+    }
+    onHide() {
+        this.handleCancel();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TaskDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: TaskDrawerComponent, isStandalone: true, selector: "ux-task-drawer", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, task: { classPropertyName: "task", publicName: "task", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, availableMembers: { classPropertyName: "availableMembers", publicName: "availableMembers", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", save: "save", cancel: "cancel" }, host: { classAttribute: "ux-task-drawer" }, usesOnChanges: true, ngImport: i0, template: `
+        <p-drawer [visible]="visible()" position="right" styleClass="w-full! md:w-[420px]!" (onHide)="onHide()" (visibleChange)="visible.set($event)" appendTo="body">
+            <ng-template #header>
+                <div class="flex items-center gap-3">
+                    <i class="pi pi-list-check text-xl text-primary-500"></i>
+                    <span class="text-surface-900 dark:text-surface-0 font-semibold text-lg">{{ drawerTitle() }}</span>
+                </div>
+            </ng-template>
+
+            <div class="flex flex-col gap-6 p-1">
+                <div class="flex flex-col gap-2">
+                    <label for="task-title" class="text-surface-900 dark:text-surface-0 font-medium text-sm">Task Title</label>
+                    <input pInputText id="task-title" [(ngModel)]="formData.title" placeholder="Enter task title..." class="w-full" />
+                </div>
+
+                <div class="flex flex-col gap-2">
+                    <label for="task-description" class="text-surface-900 dark:text-surface-0 font-medium text-sm">Description</label>
+                    <textarea pTextarea id="task-description" [(ngModel)]="formData.description" placeholder="Enter task description..." [rows]="4" class="w-full"></textarea>
+                </div>
+
+                <div class="flex flex-col gap-2">
+                    <label for="task-status" class="text-surface-900 dark:text-surface-0 font-medium text-sm">Status</label>
+                    <p-select id="task-status" [(ngModel)]="formData.status" [options]="statusOptions" optionLabel="label" optionValue="value" placeholder="Select status" styleClass="w-full" />
+                </div>
+
+                <p-divider styleClass="my-2" />
+
+                <div class="flex flex-col gap-2">
+                    <label for="start-date" class="text-surface-900 dark:text-surface-0 font-medium text-sm">Start Date</label>
+                    <p-datepicker id="start-date" [(ngModel)]="formData.startDate" dateFormat="dd.mm.yy" placeholder="Select start date" inputStyleClass="w-full" />
+                </div>
+
+                <div class="flex flex-col gap-2">
+                    <label for="end-date" class="text-surface-900 dark:text-surface-0 font-medium text-sm">End Date</label>
+                    <p-datepicker id="end-date" [(ngModel)]="formData.endDate" dateFormat="dd.mm.yy" placeholder="Select end date" inputStyleClass="w-full" />
+                </div>
+
+                <p-divider styleClass="my-2" />
+
+                <div class="flex flex-col gap-2">
+                    <label for="team-members" class="text-surface-900 dark:text-surface-0 font-medium text-sm">Team Members</label>
+                    <p-autocomplete
+                        id="team-members"
+                        [(ngModel)]="formData.members"
+                        [suggestions]="filteredMembers"
+                        optionLabel="name"
+                        [multiple]="true"
+                        placeholder="Search team members..."
+                        (completeMethod)="filterMembers($event)"
+                        styleClass="w-full"
+                    >
+                        <ng-template #selecteditem let-value>
+                            <div class="flex items-center gap-2 bg-surface-50 dark:bg-surface-900 px-2 py-1 rounded">
+                                <p-avatar [image]="'demo/images/avatar/' + value.image" shape="circle" styleClass="w-5 h-5 border border-surface-200 dark:border-surface-700" />
+                            </div>
+                        </ng-template>
+                        <ng-template #item let-option>
+                            <div class="flex items-center gap-3">
+                                <p-avatar [image]="'demo/images/avatar/' + option.image" shape="circle" styleClass="w-8 h-8 border border-surface-200 dark:border-surface-700" />
+                                <span class="text-surface-900 dark:text-surface-0 font-medium">{{ option.name }}</span>
+                            </div>
+                        </ng-template>
+                    </p-autocomplete>
+                </div>
+            </div>
+
+            <ng-template #footer>
+                <div class="flex justify-end gap-3 pt-4 border-t border-surface-200 dark:border-surface-700">
+                    <p-button label="Cancel" icon="pi pi-times" [outlined]="true" severity="secondary" (onClick)="handleCancel()" styleClass="flex-1" />
+                    <p-button [label]="mode() === 'create' ? 'Create Task' : 'Update Task'" [icon]="mode() === 'create' ? 'pi pi-plus' : 'pi pi-check'" (onClick)="handleSave()" styleClass="flex-1" />
+                </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$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,
+            args: [{
+                    selector: 'ux-task-drawer',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [FormsModule, ButtonModule, DrawerModule, InputTextModule, TextareaModule, SelectModule, DatePickerModule, AutoCompleteModule, DividerModule, AvatarModule],
+                    host: { class: 'ux-task-drawer' },
+                    template: `
+        <p-drawer [visible]="visible()" position="right" styleClass="w-full! md:w-[420px]!" (onHide)="onHide()" (visibleChange)="visible.set($event)" appendTo="body">
+            <ng-template #header>
+                <div class="flex items-center gap-3">
+                    <i class="pi pi-list-check text-xl text-primary-500"></i>
+                    <span class="text-surface-900 dark:text-surface-0 font-semibold text-lg">{{ drawerTitle() }}</span>
+                </div>
+            </ng-template>
+
+            <div class="flex flex-col gap-6 p-1">
+                <div class="flex flex-col gap-2">
+                    <label for="task-title" class="text-surface-900 dark:text-surface-0 font-medium text-sm">Task Title</label>
+                    <input pInputText id="task-title" [(ngModel)]="formData.title" placeholder="Enter task title..." class="w-full" />
+                </div>
+
+                <div class="flex flex-col gap-2">
+                    <label for="task-description" class="text-surface-900 dark:text-surface-0 font-medium text-sm">Description</label>
+                    <textarea pTextarea id="task-description" [(ngModel)]="formData.description" placeholder="Enter task description..." [rows]="4" class="w-full"></textarea>
+                </div>
+
+                <div class="flex flex-col gap-2">
+                    <label for="task-status" class="text-surface-900 dark:text-surface-0 font-medium text-sm">Status</label>
+                    <p-select id="task-status" [(ngModel)]="formData.status" [options]="statusOptions" optionLabel="label" optionValue="value" placeholder="Select status" styleClass="w-full" />
+                </div>
+
+                <p-divider styleClass="my-2" />
+
+                <div class="flex flex-col gap-2">
+                    <label for="start-date" class="text-surface-900 dark:text-surface-0 font-medium text-sm">Start Date</label>
+                    <p-datepicker id="start-date" [(ngModel)]="formData.startDate" dateFormat="dd.mm.yy" placeholder="Select start date" inputStyleClass="w-full" />
+                </div>
+
+                <div class="flex flex-col gap-2">
+                    <label for="end-date" class="text-surface-900 dark:text-surface-0 font-medium text-sm">End Date</label>
+                    <p-datepicker id="end-date" [(ngModel)]="formData.endDate" dateFormat="dd.mm.yy" placeholder="Select end date" inputStyleClass="w-full" />
+                </div>
+
+                <p-divider styleClass="my-2" />
+
+                <div class="flex flex-col gap-2">
+                    <label for="team-members" class="text-surface-900 dark:text-surface-0 font-medium text-sm">Team Members</label>
+                    <p-autocomplete
+                        id="team-members"
+                        [(ngModel)]="formData.members"
+                        [suggestions]="filteredMembers"
+                        optionLabel="name"
+                        [multiple]="true"
+                        placeholder="Search team members..."
+                        (completeMethod)="filterMembers($event)"
+                        styleClass="w-full"
+                    >
+                        <ng-template #selecteditem let-value>
+                            <div class="flex items-center gap-2 bg-surface-50 dark:bg-surface-900 px-2 py-1 rounded">
+                                <p-avatar [image]="'demo/images/avatar/' + value.image" shape="circle" styleClass="w-5 h-5 border border-surface-200 dark:border-surface-700" />
+                            </div>
+                        </ng-template>
+                        <ng-template #item let-option>
+                            <div class="flex items-center gap-3">
+                                <p-avatar [image]="'demo/images/avatar/' + option.image" shape="circle" styleClass="w-8 h-8 border border-surface-200 dark:border-surface-700" />
+                                <span class="text-surface-900 dark:text-surface-0 font-medium">{{ option.name }}</span>
+                            </div>
+                        </ng-template>
+                    </p-autocomplete>
+                </div>
+            </div>
+
+            <ng-template #footer>
+                <div class="flex justify-end gap-3 pt-4 border-t border-surface-200 dark:border-surface-700">
+                    <p-button label="Cancel" icon="pi pi-times" [outlined]="true" severity="secondary" (onClick)="handleCancel()" styleClass="flex-1" />
+                    <p-button [label]="mode() === 'create' ? 'Create Task' : 'Update Task'" [icon]="mode() === 'create' ? 'pi pi-plus' : 'pi pi-check'" (onClick)="handleSave()" styleClass="flex-1" />
+                </div>
+            </ng-template>
+        </p-drawer>
+    `
+                }]
+        }], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], task: [{ type: i0.Input, args: [{ isSignal: true, alias: "task", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], availableMembers: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableMembers", required: false }] }], save: [{ type: i0.Output, args: ["save"] }], cancel: [{ type: i0.Output, args: ["cancel"] }] } });
+
 /*
  * Public API Surface of @unopsitg/ux
  */
@@ -3010,5 +3968,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AiCardBgComponent, AiInsightsCardComponent, AppBreadcrumb, AppConfigurator, AppFooter, AppLayout, AppMenu, AppMenuitem, AppRightMenu, AppSearch, AppSidebar, AppTopbar, AuthLayout, BrandContrast, BrandCrisp, BrandSoft, DetailLayoutComponent, DetailTabDirective, LayoutService, MENU_MODEL, SIDEBAR_LOGO, TOPBAR_MOBILE_LOGO, brandPresets, brandPrimitives };
+export { AiCardBgComponent, AiInsightsCardComponent, AppBreadcrumb, AppConfigurator, AppFooter, AppLayout, AppMenu, AppMenuitem, AppRightMenu, AppSearch, AppSidebar, AppTopbar, AuthLayout, BrandContrast, BrandCrisp, BrandSoft, CompletionStepsComponent, DetailLayoutComponent, DetailTabDirective, DocumentsCardComponent, FooterMainComponent, FooterService, LayoutService, MENU_MODEL, PillTabsComponent, SIDEBAR_LOGO, TOPBAR_MOBILE_LOGO, TaskDrawerComponent, UxSelectComponent, brandPresets, brandPrimitives };
 //# sourceMappingURL=unopsitg-ux.mjs.map