@unopsitg/ux 21.0.19 → 21.0.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +15 -0
  2. package/fesm2022/unopsitg-ux.mjs +448 -325
  3. package/fesm2022/unopsitg-ux.mjs.map +1 -1
  4. package/package.json +1 -1
  5. package/types/unopsitg-ux.d.ts +63 -11
package/fesm2022/unopsitg-ux.mjs CHANGED
@@ -35,27 +35,25 @@ import * as i4$2 from 'primeng/ripple';
35
35
  import { RippleModule } from 'primeng/ripple';
36
36
  import * as i3$3 from 'primeng/tooltip';
37
37
  import { TooltipModule } from 'primeng/tooltip';
38
- import * as i10 from 'primeng/avatar';
38
+ import * as i9 from 'primeng/avatar';
39
39
  import { AvatarModule } from 'primeng/avatar';
40
- import * as i8 from 'primeng/badge';
40
+ import * as i7 from 'primeng/badge';
41
41
  import { BadgeModule } from 'primeng/badge';
42
- import * as i5$1 from 'primeng/iconfield';
42
+ import * as i4$3 from 'primeng/iconfield';
43
43
  import { IconFieldModule } from 'primeng/iconfield';
44
- import * as i6 from 'primeng/inputicon';
44
+ import * as i5$1 from 'primeng/inputicon';
45
45
  import { InputIconModule } from 'primeng/inputicon';
46
- import * as i9 from 'primeng/overlaybadge';
46
+ import * as i8 from 'primeng/overlaybadge';
47
47
  import { OverlayBadgeModule } from 'primeng/overlaybadge';
48
- import * as i3$4 from 'primeng/styleclass';
49
- import { StyleClassModule } from 'primeng/styleclass';
50
48
  import * as i2$2 from 'primeng/paginator';
51
49
  import { PaginatorModule } from 'primeng/paginator';
52
- import * as i4$3 from 'primeng/tabs';
50
+ import * as i4$4 from 'primeng/tabs';
53
51
  import { TabsModule } from 'primeng/tabs';
54
- import * as i3$5 from 'primeng/fileupload';
52
+ import * as i3$4 from 'primeng/fileupload';
55
53
  import { FileUploadModule } from 'primeng/fileupload';
56
- import * as i7 from 'primeng/menu';
54
+ import * as i7$1 from 'primeng/menu';
57
55
  import { MenuModule } from 'primeng/menu';
58
- import * as i10$1 from 'primeng/panel';
56
+ import * as i10 from 'primeng/panel';
59
57
  import { PanelModule } from 'primeng/panel';
60
58
  import * as i8$1 from 'primeng/table';
61
59
  import { TableModule } from 'primeng/table';
@@ -63,7 +61,7 @@ import * as i9$1 from 'primeng/tag';
63
61
  import { TagModule } from 'primeng/tag';
64
62
  import * as i8$2 from 'primeng/autocomplete';
65
63
  import { AutoCompleteModule } from 'primeng/autocomplete';
66
- import * as i7$1 from 'primeng/datepicker';
64
+ import * as i7$2 from 'primeng/datepicker';
67
65
  import { DatePickerModule } from 'primeng/datepicker';
68
66
  import * as i5$2 from 'primeng/textarea';
69
67
  import { TextareaModule } from 'primeng/textarea';
@@ -379,6 +377,9 @@ const TOPBAR_MOBILE_LOGO = new InjectionToken('UNOPS_UX_TOPBAR_MOBILE_LOGO', {
379
377
  alt: 'UNOPS'
380
378
  })
381
379
  });
380
+ const TOPBAR_LANGUAGE_CONFIG = new InjectionToken('UNOPS_UX_TOPBAR_LANGUAGE_CONFIG');
381
+ const TOPBAR_PROFILE_MENU_CONFIG = new InjectionToken('UNOPS_UX_TOPBAR_PROFILE_MENU_CONFIG');
382
+ const TOPBAR_NOTIFICATION_CONFIG = new InjectionToken('UNOPS_UX_TOPBAR_NOTIFICATION_CONFIG');
382
383
 
383
384
  class LayoutService {
384
385
  layoutConfig = signal({
@@ -1630,12 +1631,13 @@ class AppTopbar {
1630
1631
  isDarkTheme = computed(() => this.layoutService.isDarkTheme(), ...(ngDevMode ? [{ debugName: "isDarkTheme" }] : []));
1631
1632
  isSidebarPinned = computed(() => this.layoutService.isSidebarPinned(), ...(ngDevMode ? [{ debugName: "isSidebarPinned" }] : []));
1632
1633
  searchActive = signal(false, ...(ngDevMode ? [{ debugName: "searchActive" }] : []));
1633
- profileMenuOpen = signal(false, ...(ngDevMode ? [{ debugName: "profileMenuOpen" }] : []));
1634
+ activeDropdown = signal(null, ...(ngDevMode ? [{ debugName: "activeDropdown" }] : []));
1634
1635
  shouldFocusSearch = false;
1635
1636
  menuButton;
1636
1637
  searchInput;
1638
+ notificationsItem;
1639
+ languageItem;
1637
1640
  profileItem;
1638
- profilePanel;
1639
1641
  notificationsBars = signal([
1640
1642
  {
1641
1643
  id: 'inbox',
@@ -1656,21 +1658,21 @@ class AppTopbar {
1656
1658
  id: 'inbox',
1657
1659
  data: [
1658
1660
  {
1659
- image: 'demo/images/avatar/avatar-square-m-2.jpg',
1661
+ initials: 'ML',
1660
1662
  name: 'Michael Lee',
1661
1663
  description: 'You have a new message from the support team regarding your recent inquiry.',
1662
1664
  time: '1 hour ago',
1663
1665
  new: true
1664
1666
  },
1665
1667
  {
1666
- image: 'demo/images/avatar/avatar-square-f-1.jpg',
1668
+ initials: 'AJ',
1667
1669
  name: 'Alice Johnson',
1668
1670
  description: 'Your report has been successfully submitted and is under review.',
1669
1671
  time: '10 minutes ago',
1670
1672
  new: true
1671
1673
  },
1672
1674
  {
1673
- image: 'demo/images/avatar/avatar-square-f-2.jpg',
1675
+ initials: 'ED',
1674
1676
  name: 'Emily Davis',
1675
1677
  description: 'The project deadline has been updated to September 30th. Please check the details.',
1676
1678
  time: 'Yesterday at 4:35 PM',
@@ -1682,14 +1684,14 @@ class AppTopbar {
1682
1684
  id: 'general',
1683
1685
  data: [
1684
1686
  {
1685
- image: 'demo/images/avatar/avatar-square-f-1.jpg',
1687
+ initials: 'AJ',
1686
1688
  name: 'Alice Johnson',
1687
1689
  description: 'Reminder: Your subscription is about to expire in 3 days. Renew now to avoid interruption.',
1688
1690
  time: '30 minutes ago',
1689
1691
  new: true
1690
1692
  },
1691
1693
  {
1692
- image: 'demo/images/avatar/avatar-square-m-2.jpg',
1694
+ initials: 'ML',
1693
1695
  name: 'Michael Lee',
1694
1696
  description: 'The server maintenance has been completed successfully. No further downtime is expected.',
1695
1697
  time: 'Yesterday at 2:15 PM',
@@ -1701,14 +1703,14 @@ class AppTopbar {
1701
1703
  id: 'archived',
1702
1704
  data: [
1703
1705
  {
1704
- image: 'demo/images/avatar/avatar-square-m-1.jpg',
1706
+ initials: 'LB',
1705
1707
  name: 'Lucas Brown',
1706
1708
  description: 'Your appointment with Dr. Anderson has been confirmed for October 12th at 10:00 AM.',
1707
1709
  time: '1 week ago',
1708
1710
  new: true
1709
1711
  },
1710
1712
  {
1711
- image: 'demo/images/avatar/avatar-square-f-2.jpg',
1713
+ initials: 'ED',
1712
1714
  name: 'Emily Davis',
1713
1715
  description: 'The document you uploaded has been successfully archived for future reference.',
1714
1716
  time: '2 weeks ago',
@@ -1717,12 +1719,15 @@ class AppTopbar {
1717
1719
  ]
1718
1720
  }
1719
1721
  ], ...(ngDevMode ? [{ debugName: "notifications" }] : []));
1720
- languages = signal([
1721
- { code: 'en', label: 'English', flag: '🇬🇧' },
1722
- { code: 'fr', label: 'French', flag: '🇫🇷' },
1723
- { code: 'es', label: 'Spanish', flag: '🇪🇸' }
1722
+ langConfig = inject(TOPBAR_LANGUAGE_CONFIG, { optional: true });
1723
+ profileMenuConfig = inject(TOPBAR_PROFILE_MENU_CONFIG, { optional: true });
1724
+ notifConfig = inject(TOPBAR_NOTIFICATION_CONFIG, { optional: true });
1725
+ languages = signal(this.langConfig?.languages ?? [
1726
+ { code: 'en', label: 'English', flag: '\u{1F1EC}\u{1F1E7}' },
1727
+ { code: 'fr', label: 'French', flag: '\u{1F1EB}\u{1F1F7}' },
1728
+ { code: 'es', label: 'Spanish', flag: '\u{1F1EA}\u{1F1F8}' }
1724
1729
  ], ...(ngDevMode ? [{ debugName: "languages" }] : []));
1725
- selectedLanguage = signal('en', ...(ngDevMode ? [{ debugName: "selectedLanguage" }] : []));
1730
+ selectedLanguage = signal(this.langConfig?.defaultLanguage ?? 'en', ...(ngDevMode ? [{ debugName: "selectedLanguage" }] : []));
1726
1731
  selectedNotificationBar = model(this.notificationsBars()[0].id ?? 'inbox', ...(ngDevMode ? [{ debugName: "selectedNotificationBar" }] : []));
1727
1732
  selectedNotificationsBarData = computed(() => this.notifications().find((f) => f.id === this.selectedNotificationBar()).data, ...(ngDevMode ? [{ debugName: "selectedNotificationsBarData" }] : []));
1728
1733
  onMenuButtonClick() {
@@ -1745,18 +1750,31 @@ class AppTopbar {
1745
1750
  }
1746
1751
  selectLanguage(code) {
1747
1752
  this.selectedLanguage.set(code);
1753
+ this.langConfig?.onLanguageChange?.(code);
1754
+ this.closeDropdown();
1748
1755
  }
1749
- toggleProfileMenu(event) {
1756
+ onNotificationBellClick() {
1757
+ this.notifConfig?.onPanelOpen?.();
1758
+ }
1759
+ toggleDropdown(id, event) {
1750
1760
  event.stopPropagation();
1751
- this.profileMenuOpen.update((open) => !open);
1761
+ this.activeDropdown.update((current) => (current === id ? null : id));
1762
+ }
1763
+ closeDropdown() {
1764
+ this.activeDropdown.set(null);
1752
1765
  }
1753
1766
  onDocumentClick(event) {
1754
- if (!this.profileMenuOpen())
1767
+ if (!this.activeDropdown())
1755
1768
  return;
1756
1769
  const target = event.target;
1757
- const insideProfile = this.profileItem?.nativeElement?.contains(target);
1758
- if (!insideProfile) {
1759
- this.profileMenuOpen.set(false);
1770
+ const containers = [
1771
+ this.notificationsItem?.nativeElement,
1772
+ this.languageItem?.nativeElement,
1773
+ this.profileItem?.nativeElement
1774
+ ];
1775
+ const insideAny = containers.some((el) => el?.contains(target));
1776
+ if (!insideAny) {
1777
+ this.closeDropdown();
1760
1778
  }
1761
1779
  }
1762
1780
  openSearch() {
@@ -1776,7 +1794,7 @@ class AppTopbar {
1776
1794
  this.layoutService.toggleSearchBar();
1777
1795
  }
1778
1796
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppTopbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
1779
- 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">
1797
+ 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">
1780
1798
  <button type="button" class="mobile-menu-button" aria-label="Toggle navigation menu" (click)="onMenuButtonClick()">
1781
1799
  <i class="pi pi-bars"></i>
1782
1800
  </button>
@@ -1827,56 +1845,106 @@ class AppTopbar {
1827
1845
  <i [class]="isDarkTheme() ? 'pi pi-sun' : 'pi pi-moon'"></i>
1828
1846
  </a>
1829
1847
  </li>
1830
- <li class="right-sidebar-item static sm:relative z-50">
1831
- <a class="right-sidebar-button" aria-label="Notifications" pStyleClass="@next" enterFromClass="hidden" enterActiveClass="animate-scalein" leaveActiveClass="animate-fadeout" leaveToClass="hidden" [hideOnOutsideClick]="true">
1832
- <span class="w-2 h-2 rounded-full bg-red-500 absolute top-2 right-2.5"></span>
1848
+ <li class="right-sidebar-item static sm:relative z-50" #notificationsItem>
1849
+ <a class="right-sidebar-button" aria-label="Notifications" (click)="toggleDropdown('notifications', $event); onNotificationBellClick()">
1850
+ @if (notifConfig && notifConfig.unreadCount() > 0) {
1851
+ <span class="w-2 h-2 rounded-full bg-red-500 absolute top-2 right-2.5"></span>
1852
+ } @else if (!notifConfig) {
1853
+ <span class="w-2 h-2 rounded-full bg-red-500 absolute top-2 right-2.5"></span>
1854
+ }
1833
1855
  <i class="pi pi-bell"></i>
1834
1856
  </a>
1835
- <div
1836
- class="list-none m-0 rounded-2xl border border-surface fixed sm:absolute bg-surface-0 dark:bg-surface-900 overflow-hidden hidden origin-top w-[calc(100vw-2rem)] sm:w-88 mt-2 z-50 top-auto left-4 sm:left-auto sm:right-0 shadow-flyout"
1837
- >
1838
- <div class="p-4 flex items-center justify-between border-b border-surface">
1839
- <span class="label-small text-surface-950 dark:text-surface-0">Notifications</span>
1840
- <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>
1841
- </div>
1842
- <div class="flex items-center border-b border-surface">
1843
- @for (item of notificationsBars(); track item.id; let i = $index) {
1844
- <button
1845
- [ngClass]="{ 'border-surface-950 dark:border-surface-0': selectedNotificationBar() === item.id, 'border-transparent': selectedNotificationBar() !== item.id }"
1846
- class="px-3.5 py-2 inline-flex items-center border-b gap-2"
1847
- (click)="selectedNotificationBar.set(item.id)"
1848
- >
1849
- <span [ngClass]="{ 'text-surface-950 dark:text-surface-0': selectedNotificationBar() === item.id }" class="label-small">{{ item.label }}</span>
1850
- <p-badge *ngIf="item?.badge" [value]="item.badge" severity="success" size="small" class="rounded-md!" />
1851
- </button>
1852
- }
1853
- </div>
1854
- <ul class="flex flex-col divide-y divide-(--surface-border) max-h-80 overflow-auto">
1855
- @for (item of selectedNotificationsBarData(); track item.name; let i = $index) {
1856
- <li>
1857
- <div class="flex items-center gap-3 px-4 sm:px-6 py-3.5 cursor-pointer hover:bg-emphasis transition-all">
1858
- <p-overlay-badge value="" severity="danger" class="inline-flex">
1859
- <p-avatar size="large">
1860
- <img [src]="item.image" [alt]="item.name" class="rounded-lg" />
1861
- </p-avatar>
1862
- </p-overlay-badge>
1863
- <div class="flex items-center gap-3">
1864
- <div class="flex flex-col">
1865
- <span class="label-small text-left text-surface-950 dark:text-surface-0">{{ item.name }}</span>
1866
- <span class="label-xsmall text-left line-clamp-1">{{ item.description }}</span>
1867
- <span class="label-xsmall text-left">{{ item.time }}</span>
1857
+ @if (activeDropdown() === 'notifications') {
1858
+ <div
1859
+ 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"
1860
+ >
1861
+ @if (notifConfig) {
1862
+ <div class="p-4 flex items-center justify-between border-b border-surface">
1863
+ <span class="label-small text-surface-950 dark:text-surface-0">Notifications</span>
1864
+ <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" (click)="notifConfig.onMarkAllAsRead()">Mark all as read</button>
1865
+ </div>
1866
+ <div class="flex items-center border-b border-surface">
1867
+ @for (tab of notifConfig.tabs(); track tab.id) {
1868
+ <button
1869
+ [ngClass]="{ 'border-surface-950 dark:border-surface-0': notifConfig.selectedTab() === tab.id, 'border-transparent': notifConfig.selectedTab() !== tab.id }"
1870
+ class="px-3.5 py-2 inline-flex items-center border-b gap-2"
1871
+ (click)="notifConfig.onTabChange(tab.id)"
1872
+ >
1873
+ <span [ngClass]="{ 'text-surface-950 dark:text-surface-0': notifConfig.selectedTab() === tab.id }" class="label-small">{{ tab.label }}</span>
1874
+ <p-badge *ngIf="tab.badge" [value]="tab.badge" severity="success" size="small" class="rounded-md!" />
1875
+ </button>
1876
+ }
1877
+ </div>
1878
+ <ul class="flex flex-col divide-y divide-(--surface-border) max-h-80 overflow-auto">
1879
+ @if (notifConfig.items().length === 0) {
1880
+ <li class="px-4 sm:px-6 py-8 text-center">
1881
+ <i class="pi pi-bell-slash text-2xl text-surface-400 mb-2"></i>
1882
+ <p class="label-small text-surface-400">No {{ notifConfig.selectedTab() === 'unread' ? 'unread ' : '' }}notifications</p>
1883
+ </li>
1884
+ } @else {
1885
+ @for (item of notifConfig.items(); track item.id) {
1886
+ <li>
1887
+ <div class="flex items-center gap-3 px-4 sm:px-6 py-3.5 cursor-pointer hover:bg-emphasis transition-all" (click)="notifConfig.onItemClick(item)">
1888
+ <div class="flex items-center justify-center w-10 h-10 rounded-lg flex-shrink-0" [ngClass]="item.isRead ? 'bg-surface-100 dark:bg-surface-800' : 'bg-primary/10'">
1889
+ <i [class]="item.icon || 'pi pi-bell'" [ngClass]="item.isRead ? 'text-surface-500' : 'text-primary'"></i>
1890
+ </div>
1891
+ <div class="flex items-center gap-3 flex-1 min-w-0">
1892
+ <div class="flex flex-col flex-1 min-w-0">
1893
+ <span class="label-small text-left line-clamp-2" [ngClass]="item.isRead ? '' : 'text-surface-950 dark:text-surface-0 font-semibold'">{{ item.message }}</span>
1894
+ <span class="label-xsmall text-left">{{ item.time }}</span>
1895
+ </div>
1896
+ @if (!item.isRead) {
1897
+ <span class="w-2 h-2 rounded-full bg-primary flex-shrink-0"></span>
1898
+ }
1899
+ </div>
1900
+ </div>
1901
+ </li>
1902
+ }
1903
+ }
1904
+ </ul>
1905
+ } @else {
1906
+ <div class="p-4 flex items-center justify-between border-b border-surface">
1907
+ <span class="label-small text-surface-950 dark:text-surface-0">Notifications</span>
1908
+ <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>
1909
+ </div>
1910
+ <div class="flex items-center border-b border-surface">
1911
+ @for (item of notificationsBars(); track item.id; let i = $index) {
1912
+ <button
1913
+ [ngClass]="{ 'border-surface-950 dark:border-surface-0': selectedNotificationBar() === item.id, 'border-transparent': selectedNotificationBar() !== item.id }"
1914
+ class="px-3.5 py-2 inline-flex items-center border-b gap-2"
1915
+ (click)="selectedNotificationBar.set(item.id)"
1916
+ >
1917
+ <span [ngClass]="{ 'text-surface-950 dark:text-surface-0': selectedNotificationBar() === item.id }" class="label-small">{{ item.label }}</span>
1918
+ <p-badge *ngIf="item?.badge" [value]="item.badge" severity="success" size="small" class="rounded-md!" />
1919
+ </button>
1920
+ }
1921
+ </div>
1922
+ <ul class="flex flex-col divide-y divide-(--surface-border) max-h-80 overflow-auto">
1923
+ @for (item of selectedNotificationsBarData(); track item.name; let i = $index) {
1924
+ <li>
1925
+ <div class="flex items-center gap-3 px-4 sm:px-6 py-3.5 cursor-pointer hover:bg-emphasis transition-all">
1926
+ <p-overlay-badge value="" severity="danger" class="inline-flex">
1927
+ <p-avatar [label]="item.initials" size="large" styleClass="rounded-lg" />
1928
+ </p-overlay-badge>
1929
+ <div class="flex items-center gap-3">
1930
+ <div class="flex flex-col">
1931
+ <span class="label-small text-left text-surface-950 dark:text-surface-0">{{ item.name }}</span>
1932
+ <span class="label-xsmall text-left line-clamp-1">{{ item.description }}</span>
1933
+ <span class="label-xsmall text-left">{{ item.time }}</span>
1934
+ </div>
1935
+ <p-badge *ngIf="item.new" value="" severity="success" />
1936
+ </div>
1868
1937
  </div>
1869
- <p-badge *ngIf="item.new" value="" severity="success" />
1870
- </div>
1871
- </div>
1872
- <span *ngIf="i !== notifications().length - 1"></span>
1873
- </li>
1938
+ <span *ngIf="i !== notifications().length - 1"></span>
1939
+ </li>
1940
+ }
1941
+ </ul>
1874
1942
  }
1875
- </ul>
1876
- </div>
1943
+ </div>
1944
+ }
1877
1945
  </li>
1878
- <li class="right-sidebar-item static sm:relative">
1879
- <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">
1946
+ <li class="right-sidebar-item static sm:relative" #languageItem>
1947
+ <a class="right-sidebar-button relative z-50" aria-label="Change language" (click)="toggleDropdown('language', $event)">
1880
1948
  <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">
1881
1949
  <path d="m5 8 6 6"/>
1882
1950
  <path d="m4 14 6-6 2-3"/>
@@ -1886,109 +1954,110 @@ class AppTopbar {
1886
1954
  <path d="M14 18h6"/>
1887
1955
  </svg>
1888
1956
  </a>
1889
- <div
1890
- class="list-none p-2 m-0 rounded-2xl border border-surface overflow-hidden fixed sm:absolute bg-surface-0 dark:bg-surface-900 hidden origin-top w-44 mt-2 right-4 sm:right-0 z-999 top-auto shadow-flyout"
1891
- >
1892
- <ul class="flex flex-col gap-1">
1893
- @for (lang of languages(); track lang.code) {
1894
- <li>
1895
- <a
1896
- 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"
1897
- [class.text-surface-950]="selectedLanguage() === lang.code"
1898
- [class.dark:text-surface-0]="selectedLanguage() === lang.code"
1899
- [class.font-semibold]="selectedLanguage() === lang.code"
1900
- (click)="selectLanguage(lang.code)"
1901
- >
1902
- <span class="text-lg">{{ lang.flag }}</span>
1903
- <span>{{ lang.label }}</span>
1904
- </a>
1905
- </li>
1906
- }
1907
- </ul>
1908
- </div>
1909
- </li>
1910
- <li class="profile-item static sm:relative" #profileItem>
1911
- <a class="right-sidebar-button relative z-50" aria-label="User profile menu" (click)="toggleProfileMenu($event)">
1912
- <p-avatar icon="pi pi-user" styleClass="w-10! h-10!" />
1913
- </a>
1914
- <div
1915
- #profilePanel
1916
- 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"
1917
- [class.hidden]="!profileMenuOpen()"
1918
- [class.animate-scalein]="profileMenuOpen()"
1919
- >
1920
- <ul class="flex flex-col gap-1">
1921
- <div class="mobile-profile-actions">
1922
- <li>
1923
- <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()">
1924
- <i class="pi pi-search"></i>
1925
- <span>Search</span>
1926
- </a>
1927
- </li>
1928
- <li>
1929
- <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()">
1930
- <i [class]="isDarkTheme() ? 'pi pi-sun' : 'pi pi-moon'"></i>
1931
- <span>{{ isDarkTheme() ? 'Light Mode' : 'Dark Mode' }}</span>
1932
- </a>
1933
- </li>
1934
- <li>
1935
- <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)">
1936
- <i class="pi pi-bell"></i>
1937
- <span>Notifications</span>
1938
- <span class="w-2 h-2 rounded-full bg-red-500 ml-auto"></span>
1939
- </a>
1940
- </li>
1941
- <li class="border-b border-surface pb-1 mb-1">
1942
- <span class="label-xsmall px-2.5 py-1 text-surface-400">Language</span>
1943
- @for (lang of languages(); track lang.code) {
1957
+ @if (activeDropdown() === 'language') {
1958
+ <div
1959
+ 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"
1960
+ >
1961
+ <ul class="flex flex-col gap-1">
1962
+ @for (lang of languages(); track lang.code) {
1963
+ <li>
1944
1964
  <a
1945
- 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"
1965
+ 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"
1946
1966
  [class.text-surface-950]="selectedLanguage() === lang.code"
1947
1967
  [class.dark:text-surface-0]="selectedLanguage() === lang.code"
1948
1968
  [class.font-semibold]="selectedLanguage() === lang.code"
1949
- (click)="profileMenuOpen.set(false); selectLanguage(lang.code)"
1969
+ (click)="selectLanguage(lang.code)"
1950
1970
  >
1951
1971
  <span class="text-lg">{{ lang.flag }}</span>
1952
1972
  <span>{{ lang.label }}</span>
1953
- @if (selectedLanguage() === lang.code) {
1954
- <i class="pi pi-check ml-auto text-xs"></i>
1955
- }
1956
1973
  </a>
1974
+ </li>
1975
+ }
1976
+ </ul>
1977
+ </div>
1978
+ }
1979
+ </li>
1980
+ <li class="profile-item static sm:relative" #profileItem>
1981
+ <a class="right-sidebar-button relative z-50" aria-label="User profile menu" (click)="toggleDropdown('profile', $event)">
1982
+ <p-avatar icon="pi pi-user" styleClass="w-10! h-10!" />
1983
+ </a>
1984
+ @if (activeDropdown() === 'profile') {
1985
+ <div
1986
+ #profilePanel
1987
+ 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"
1988
+ >
1989
+ <ul class="flex flex-col gap-1">
1990
+ <div class="mobile-profile-actions">
1991
+ <li>
1992
+ <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()">
1993
+ <i class="pi pi-search"></i>
1994
+ <span>Search</span>
1995
+ </a>
1996
+ </li>
1997
+ <li>
1998
+ <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()">
1999
+ <i [class]="isDarkTheme() ? 'pi pi-sun' : 'pi pi-moon'"></i>
2000
+ <span>{{ isDarkTheme() ? 'Light Mode' : 'Dark Mode' }}</span>
2001
+ </a>
2002
+ </li>
2003
+ <li>
2004
+ <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()">
2005
+ <i class="pi pi-bell"></i>
2006
+ <span>Notifications</span>
2007
+ <span class="w-2 h-2 rounded-full bg-red-500 ml-auto"></span>
2008
+ </a>
2009
+ </li>
2010
+ <li class="border-b border-surface pb-1 mb-1">
2011
+ <span class="label-xsmall px-2.5 py-1 text-surface-400">Language</span>
2012
+ @for (lang of languages(); track lang.code) {
2013
+ <a
2014
+ 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"
2015
+ [class.text-surface-950]="selectedLanguage() === lang.code"
2016
+ [class.dark:text-surface-0]="selectedLanguage() === lang.code"
2017
+ [class.font-semibold]="selectedLanguage() === lang.code"
2018
+ (click)="closeDropdown(); selectLanguage(lang.code)"
2019
+ >
2020
+ <span class="text-lg">{{ lang.flag }}</span>
2021
+ <span>{{ lang.label }}</span>
2022
+ @if (selectedLanguage() === lang.code) {
2023
+ <i class="pi pi-check ml-auto text-xs"></i>
2024
+ }
2025
+ </a>
2026
+ }
2027
+ </li>
2028
+ </div>
2029
+ @if (profileMenuConfig) {
2030
+ @for (item of profileMenuConfig.items; track item.id) {
2031
+ <li [class.border-t]="item.separator" [class.border-surface]="item.separator" [class.mt-1]="item.separator" [class.pt-1]="item.separator">
2032
+ <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(); item.command()">
2033
+ <i [class]="item.icon"></i>
2034
+ <span>{{ item.label }}</span>
2035
+ </a>
2036
+ </li>
1957
2037
  }
1958
- </li>
1959
- </div>
1960
- <li>
1961
- <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)">
1962
- <i class="pi pi-user"></i>
1963
- <span>Profile</span>
1964
- </a>
1965
- </li>
1966
- <li>
1967
- <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="profileMenuOpen.set(false); onConfigButtonClick()">
1968
- <i class="pi pi-cog"></i>
1969
- <span>Settings</span>
1970
- </a>
1971
- </li>
1972
- <li>
1973
- <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)">
1974
- <i class="pi pi-calendar"></i>
1975
- <span>Calendar</span>
1976
- </a>
1977
- </li>
1978
- <li>
1979
- <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)">
1980
- <i class="pi pi-inbox"></i>
1981
- <span>Inbox</span>
1982
- </a>
1983
- </li>
1984
- <li class="border-t border-surface mt-1 pt-1">
1985
- <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)">
1986
- <i class="pi pi-power-off"></i>
1987
- <span>Log out</span>
1988
- </a>
1989
- </li>
1990
- </ul>
1991
- </div>
2038
+ } @else {
2039
+ <li>
2040
+ <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()">
2041
+ <i class="pi pi-user"></i>
2042
+ <span>Profile</span>
2043
+ </a>
2044
+ </li>
2045
+ <li>
2046
+ <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()">
2047
+ <i class="pi pi-cog"></i>
2048
+ <span>Settings</span>
2049
+ </a>
2050
+ </li>
2051
+ <li class="border-t border-surface mt-1 pt-1">
2052
+ <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()">
2053
+ <i class="pi pi-power-off"></i>
2054
+ <span>Log out</span>
2055
+ </a>
2056
+ </li>
2057
+ }
2058
+ </ul>
2059
+ </div>
2060
+ }
1992
2061
  </li>
1993
2062
  </ul>
1994
2063
  </div>
@@ -1997,13 +2066,13 @@ class AppTopbar {
1997
2066
  <a class="mobile-logo" [routerLink]="['/']">
1998
2067
  <img [src]="mobileLogo()" [attr.alt]="mobileLogoConfig.alt" />
1999
2068
  </a>
2000
- </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i3$4.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "component", type: AppBreadcrumb, selector: "[app-breadcrumb]" }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i5$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i6.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i4$2.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i8.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "ngmodule", type: OverlayBadgeModule }, { kind: "component", type: i9.OverlayBadge, selector: "p-overlayBadge, p-overlay-badge, p-overlaybadge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i10.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }] });
2069
+ </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"] }] });
2001
2070
  }
2002
2071
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppTopbar, decorators: [{
2003
2072
  type: Component,
2004
2073
  args: [{
2005
2074
  selector: '[app-topbar]',
2006
- imports: [RouterModule, CommonModule, StyleClassModule, AppBreadcrumb, InputTextModule, ButtonModule, IconFieldModule, InputIconModule, RippleModule, BadgeModule, OverlayBadgeModule, AvatarModule],
2075
+ imports: [RouterModule, CommonModule, AppBreadcrumb, InputTextModule, ButtonModule, IconFieldModule, InputIconModule, RippleModule, BadgeModule, OverlayBadgeModule, AvatarModule],
2007
2076
  template: `<div class="layout-topbar">
2008
2077
  <button type="button" class="mobile-menu-button" aria-label="Toggle navigation menu" (click)="onMenuButtonClick()">
2009
2078
  <i class="pi pi-bars"></i>
@@ -2055,56 +2124,106 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
2055
2124
  <i [class]="isDarkTheme() ? 'pi pi-sun' : 'pi pi-moon'"></i>
2056
2125
  </a>
2057
2126
  </li>
2058
- <li class="right-sidebar-item static sm:relative z-50">
2059
- <a class="right-sidebar-button" aria-label="Notifications" pStyleClass="@next" enterFromClass="hidden" enterActiveClass="animate-scalein" leaveActiveClass="animate-fadeout" leaveToClass="hidden" [hideOnOutsideClick]="true">
2060
- <span class="w-2 h-2 rounded-full bg-red-500 absolute top-2 right-2.5"></span>
2127
+ <li class="right-sidebar-item static sm:relative z-50" #notificationsItem>
2128
+ <a class="right-sidebar-button" aria-label="Notifications" (click)="toggleDropdown('notifications', $event); onNotificationBellClick()">
2129
+ @if (notifConfig && notifConfig.unreadCount() > 0) {
2130
+ <span class="w-2 h-2 rounded-full bg-red-500 absolute top-2 right-2.5"></span>
2131
+ } @else if (!notifConfig) {
2132
+ <span class="w-2 h-2 rounded-full bg-red-500 absolute top-2 right-2.5"></span>
2133
+ }
2061
2134
  <i class="pi pi-bell"></i>
2062
2135
  </a>
2063
- <div
2064
- class="list-none m-0 rounded-2xl border border-surface fixed sm:absolute bg-surface-0 dark:bg-surface-900 overflow-hidden hidden origin-top w-[calc(100vw-2rem)] sm:w-88 mt-2 z-50 top-auto left-4 sm:left-auto sm:right-0 shadow-flyout"
2065
- >
2066
- <div class="p-4 flex items-center justify-between border-b border-surface">
2067
- <span class="label-small text-surface-950 dark:text-surface-0">Notifications</span>
2068
- <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>
2069
- </div>
2070
- <div class="flex items-center border-b border-surface">
2071
- @for (item of notificationsBars(); track item.id; let i = $index) {
2072
- <button
2073
- [ngClass]="{ 'border-surface-950 dark:border-surface-0': selectedNotificationBar() === item.id, 'border-transparent': selectedNotificationBar() !== item.id }"
2074
- class="px-3.5 py-2 inline-flex items-center border-b gap-2"
2075
- (click)="selectedNotificationBar.set(item.id)"
2076
- >
2077
- <span [ngClass]="{ 'text-surface-950 dark:text-surface-0': selectedNotificationBar() === item.id }" class="label-small">{{ item.label }}</span>
2078
- <p-badge *ngIf="item?.badge" [value]="item.badge" severity="success" size="small" class="rounded-md!" />
2079
- </button>
2080
- }
2081
- </div>
2082
- <ul class="flex flex-col divide-y divide-(--surface-border) max-h-80 overflow-auto">
2083
- @for (item of selectedNotificationsBarData(); track item.name; let i = $index) {
2084
- <li>
2085
- <div class="flex items-center gap-3 px-4 sm:px-6 py-3.5 cursor-pointer hover:bg-emphasis transition-all">
2086
- <p-overlay-badge value="" severity="danger" class="inline-flex">
2087
- <p-avatar size="large">
2088
- <img [src]="item.image" [alt]="item.name" class="rounded-lg" />
2089
- </p-avatar>
2090
- </p-overlay-badge>
2091
- <div class="flex items-center gap-3">
2092
- <div class="flex flex-col">
2093
- <span class="label-small text-left text-surface-950 dark:text-surface-0">{{ item.name }}</span>
2094
- <span class="label-xsmall text-left line-clamp-1">{{ item.description }}</span>
2095
- <span class="label-xsmall text-left">{{ item.time }}</span>
2136
+ @if (activeDropdown() === 'notifications') {
2137
+ <div
2138
+ 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"
2139
+ >
2140
+ @if (notifConfig) {
2141
+ <div class="p-4 flex items-center justify-between border-b border-surface">
2142
+ <span class="label-small text-surface-950 dark:text-surface-0">Notifications</span>
2143
+ <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" (click)="notifConfig.onMarkAllAsRead()">Mark all as read</button>
2144
+ </div>
2145
+ <div class="flex items-center border-b border-surface">
2146
+ @for (tab of notifConfig.tabs(); track tab.id) {
2147
+ <button
2148
+ [ngClass]="{ 'border-surface-950 dark:border-surface-0': notifConfig.selectedTab() === tab.id, 'border-transparent': notifConfig.selectedTab() !== tab.id }"
2149
+ class="px-3.5 py-2 inline-flex items-center border-b gap-2"
2150
+ (click)="notifConfig.onTabChange(tab.id)"
2151
+ >
2152
+ <span [ngClass]="{ 'text-surface-950 dark:text-surface-0': notifConfig.selectedTab() === tab.id }" class="label-small">{{ tab.label }}</span>
2153
+ <p-badge *ngIf="tab.badge" [value]="tab.badge" severity="success" size="small" class="rounded-md!" />
2154
+ </button>
2155
+ }
2156
+ </div>
2157
+ <ul class="flex flex-col divide-y divide-(--surface-border) max-h-80 overflow-auto">
2158
+ @if (notifConfig.items().length === 0) {
2159
+ <li class="px-4 sm:px-6 py-8 text-center">
2160
+ <i class="pi pi-bell-slash text-2xl text-surface-400 mb-2"></i>
2161
+ <p class="label-small text-surface-400">No {{ notifConfig.selectedTab() === 'unread' ? 'unread ' : '' }}notifications</p>
2162
+ </li>
2163
+ } @else {
2164
+ @for (item of notifConfig.items(); track item.id) {
2165
+ <li>
2166
+ <div class="flex items-center gap-3 px-4 sm:px-6 py-3.5 cursor-pointer hover:bg-emphasis transition-all" (click)="notifConfig.onItemClick(item)">
2167
+ <div class="flex items-center justify-center w-10 h-10 rounded-lg flex-shrink-0" [ngClass]="item.isRead ? 'bg-surface-100 dark:bg-surface-800' : 'bg-primary/10'">
2168
+ <i [class]="item.icon || 'pi pi-bell'" [ngClass]="item.isRead ? 'text-surface-500' : 'text-primary'"></i>
2169
+ </div>
2170
+ <div class="flex items-center gap-3 flex-1 min-w-0">
2171
+ <div class="flex flex-col flex-1 min-w-0">
2172
+ <span class="label-small text-left line-clamp-2" [ngClass]="item.isRead ? '' : 'text-surface-950 dark:text-surface-0 font-semibold'">{{ item.message }}</span>
2173
+ <span class="label-xsmall text-left">{{ item.time }}</span>
2174
+ </div>
2175
+ @if (!item.isRead) {
2176
+ <span class="w-2 h-2 rounded-full bg-primary flex-shrink-0"></span>
2177
+ }
2178
+ </div>
2179
+ </div>
2180
+ </li>
2181
+ }
2182
+ }
2183
+ </ul>
2184
+ } @else {
2185
+ <div class="p-4 flex items-center justify-between border-b border-surface">
2186
+ <span class="label-small text-surface-950 dark:text-surface-0">Notifications</span>
2187
+ <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>
2188
+ </div>
2189
+ <div class="flex items-center border-b border-surface">
2190
+ @for (item of notificationsBars(); track item.id; let i = $index) {
2191
+ <button
2192
+ [ngClass]="{ 'border-surface-950 dark:border-surface-0': selectedNotificationBar() === item.id, 'border-transparent': selectedNotificationBar() !== item.id }"
2193
+ class="px-3.5 py-2 inline-flex items-center border-b gap-2"
2194
+ (click)="selectedNotificationBar.set(item.id)"
2195
+ >
2196
+ <span [ngClass]="{ 'text-surface-950 dark:text-surface-0': selectedNotificationBar() === item.id }" class="label-small">{{ item.label }}</span>
2197
+ <p-badge *ngIf="item?.badge" [value]="item.badge" severity="success" size="small" class="rounded-md!" />
2198
+ </button>
2199
+ }
2200
+ </div>
2201
+ <ul class="flex flex-col divide-y divide-(--surface-border) max-h-80 overflow-auto">
2202
+ @for (item of selectedNotificationsBarData(); track item.name; let i = $index) {
2203
+ <li>
2204
+ <div class="flex items-center gap-3 px-4 sm:px-6 py-3.5 cursor-pointer hover:bg-emphasis transition-all">
2205
+ <p-overlay-badge value="" severity="danger" class="inline-flex">
2206
+ <p-avatar [label]="item.initials" size="large" styleClass="rounded-lg" />
2207
+ </p-overlay-badge>
2208
+ <div class="flex items-center gap-3">
2209
+ <div class="flex flex-col">
2210
+ <span class="label-small text-left text-surface-950 dark:text-surface-0">{{ item.name }}</span>
2211
+ <span class="label-xsmall text-left line-clamp-1">{{ item.description }}</span>
2212
+ <span class="label-xsmall text-left">{{ item.time }}</span>
2213
+ </div>
2214
+ <p-badge *ngIf="item.new" value="" severity="success" />
2215
+ </div>
2096
2216
  </div>
2097
- <p-badge *ngIf="item.new" value="" severity="success" />
2098
- </div>
2099
- </div>
2100
- <span *ngIf="i !== notifications().length - 1"></span>
2101
- </li>
2217
+ <span *ngIf="i !== notifications().length - 1"></span>
2218
+ </li>
2219
+ }
2220
+ </ul>
2102
2221
  }
2103
- </ul>
2104
- </div>
2222
+ </div>
2223
+ }
2105
2224
  </li>
2106
- <li class="right-sidebar-item static sm:relative">
2107
- <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">
2225
+ <li class="right-sidebar-item static sm:relative" #languageItem>
2226
+ <a class="right-sidebar-button relative z-50" aria-label="Change language" (click)="toggleDropdown('language', $event)">
2108
2227
  <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">
2109
2228
  <path d="m5 8 6 6"/>
2110
2229
  <path d="m4 14 6-6 2-3"/>
@@ -2114,109 +2233,110 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
2114
2233
  <path d="M14 18h6"/>
2115
2234
  </svg>
2116
2235
  </a>
2117
- <div
2118
- class="list-none p-2 m-0 rounded-2xl border border-surface overflow-hidden fixed sm:absolute bg-surface-0 dark:bg-surface-900 hidden origin-top w-44 mt-2 right-4 sm:right-0 z-999 top-auto shadow-flyout"
2119
- >
2120
- <ul class="flex flex-col gap-1">
2121
- @for (lang of languages(); track lang.code) {
2122
- <li>
2123
- <a
2124
- 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"
2125
- [class.text-surface-950]="selectedLanguage() === lang.code"
2126
- [class.dark:text-surface-0]="selectedLanguage() === lang.code"
2127
- [class.font-semibold]="selectedLanguage() === lang.code"
2128
- (click)="selectLanguage(lang.code)"
2129
- >
2130
- <span class="text-lg">{{ lang.flag }}</span>
2131
- <span>{{ lang.label }}</span>
2132
- </a>
2133
- </li>
2134
- }
2135
- </ul>
2136
- </div>
2137
- </li>
2138
- <li class="profile-item static sm:relative" #profileItem>
2139
- <a class="right-sidebar-button relative z-50" aria-label="User profile menu" (click)="toggleProfileMenu($event)">
2140
- <p-avatar icon="pi pi-user" styleClass="w-10! h-10!" />
2141
- </a>
2142
- <div
2143
- #profilePanel
2144
- 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"
2145
- [class.hidden]="!profileMenuOpen()"
2146
- [class.animate-scalein]="profileMenuOpen()"
2147
- >
2148
- <ul class="flex flex-col gap-1">
2149
- <div class="mobile-profile-actions">
2150
- <li>
2151
- <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()">
2152
- <i class="pi pi-search"></i>
2153
- <span>Search</span>
2154
- </a>
2155
- </li>
2156
- <li>
2157
- <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()">
2158
- <i [class]="isDarkTheme() ? 'pi pi-sun' : 'pi pi-moon'"></i>
2159
- <span>{{ isDarkTheme() ? 'Light Mode' : 'Dark Mode' }}</span>
2160
- </a>
2161
- </li>
2162
- <li>
2163
- <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)">
2164
- <i class="pi pi-bell"></i>
2165
- <span>Notifications</span>
2166
- <span class="w-2 h-2 rounded-full bg-red-500 ml-auto"></span>
2167
- </a>
2168
- </li>
2169
- <li class="border-b border-surface pb-1 mb-1">
2170
- <span class="label-xsmall px-2.5 py-1 text-surface-400">Language</span>
2171
- @for (lang of languages(); track lang.code) {
2236
+ @if (activeDropdown() === 'language') {
2237
+ <div
2238
+ 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"
2239
+ >
2240
+ <ul class="flex flex-col gap-1">
2241
+ @for (lang of languages(); track lang.code) {
2242
+ <li>
2172
2243
  <a
2173
- 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"
2244
+ 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"
2174
2245
  [class.text-surface-950]="selectedLanguage() === lang.code"
2175
2246
  [class.dark:text-surface-0]="selectedLanguage() === lang.code"
2176
2247
  [class.font-semibold]="selectedLanguage() === lang.code"
2177
- (click)="profileMenuOpen.set(false); selectLanguage(lang.code)"
2248
+ (click)="selectLanguage(lang.code)"
2178
2249
  >
2179
2250
  <span class="text-lg">{{ lang.flag }}</span>
2180
2251
  <span>{{ lang.label }}</span>
2181
- @if (selectedLanguage() === lang.code) {
2182
- <i class="pi pi-check ml-auto text-xs"></i>
2183
- }
2184
2252
  </a>
2253
+ </li>
2254
+ }
2255
+ </ul>
2256
+ </div>
2257
+ }
2258
+ </li>
2259
+ <li class="profile-item static sm:relative" #profileItem>
2260
+ <a class="right-sidebar-button relative z-50" aria-label="User profile menu" (click)="toggleDropdown('profile', $event)">
2261
+ <p-avatar icon="pi pi-user" styleClass="w-10! h-10!" />
2262
+ </a>
2263
+ @if (activeDropdown() === 'profile') {
2264
+ <div
2265
+ #profilePanel
2266
+ 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"
2267
+ >
2268
+ <ul class="flex flex-col gap-1">
2269
+ <div class="mobile-profile-actions">
2270
+ <li>
2271
+ <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()">
2272
+ <i class="pi pi-search"></i>
2273
+ <span>Search</span>
2274
+ </a>
2275
+ </li>
2276
+ <li>
2277
+ <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()">
2278
+ <i [class]="isDarkTheme() ? 'pi pi-sun' : 'pi pi-moon'"></i>
2279
+ <span>{{ isDarkTheme() ? 'Light Mode' : 'Dark Mode' }}</span>
2280
+ </a>
2281
+ </li>
2282
+ <li>
2283
+ <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()">
2284
+ <i class="pi pi-bell"></i>
2285
+ <span>Notifications</span>
2286
+ <span class="w-2 h-2 rounded-full bg-red-500 ml-auto"></span>
2287
+ </a>
2288
+ </li>
2289
+ <li class="border-b border-surface pb-1 mb-1">
2290
+ <span class="label-xsmall px-2.5 py-1 text-surface-400">Language</span>
2291
+ @for (lang of languages(); track lang.code) {
2292
+ <a
2293
+ 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"
2294
+ [class.text-surface-950]="selectedLanguage() === lang.code"
2295
+ [class.dark:text-surface-0]="selectedLanguage() === lang.code"
2296
+ [class.font-semibold]="selectedLanguage() === lang.code"
2297
+ (click)="closeDropdown(); selectLanguage(lang.code)"
2298
+ >
2299
+ <span class="text-lg">{{ lang.flag }}</span>
2300
+ <span>{{ lang.label }}</span>
2301
+ @if (selectedLanguage() === lang.code) {
2302
+ <i class="pi pi-check ml-auto text-xs"></i>
2303
+ }
2304
+ </a>
2305
+ }
2306
+ </li>
2307
+ </div>
2308
+ @if (profileMenuConfig) {
2309
+ @for (item of profileMenuConfig.items; track item.id) {
2310
+ <li [class.border-t]="item.separator" [class.border-surface]="item.separator" [class.mt-1]="item.separator" [class.pt-1]="item.separator">
2311
+ <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(); item.command()">
2312
+ <i [class]="item.icon"></i>
2313
+ <span>{{ item.label }}</span>
2314
+ </a>
2315
+ </li>
2185
2316
  }
2186
- </li>
2187
- </div>
2188
- <li>
2189
- <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)">
2190
- <i class="pi pi-user"></i>
2191
- <span>Profile</span>
2192
- </a>
2193
- </li>
2194
- <li>
2195
- <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="profileMenuOpen.set(false); onConfigButtonClick()">
2196
- <i class="pi pi-cog"></i>
2197
- <span>Settings</span>
2198
- </a>
2199
- </li>
2200
- <li>
2201
- <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)">
2202
- <i class="pi pi-calendar"></i>
2203
- <span>Calendar</span>
2204
- </a>
2205
- </li>
2206
- <li>
2207
- <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)">
2208
- <i class="pi pi-inbox"></i>
2209
- <span>Inbox</span>
2210
- </a>
2211
- </li>
2212
- <li class="border-t border-surface mt-1 pt-1">
2213
- <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)">
2214
- <i class="pi pi-power-off"></i>
2215
- <span>Log out</span>
2216
- </a>
2217
- </li>
2218
- </ul>
2219
- </div>
2317
+ } @else {
2318
+ <li>
2319
+ <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()">
2320
+ <i class="pi pi-user"></i>
2321
+ <span>Profile</span>
2322
+ </a>
2323
+ </li>
2324
+ <li>
2325
+ <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()">
2326
+ <i class="pi pi-cog"></i>
2327
+ <span>Settings</span>
2328
+ </a>
2329
+ </li>
2330
+ <li class="border-t border-surface mt-1 pt-1">
2331
+ <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()">
2332
+ <i class="pi pi-power-off"></i>
2333
+ <span>Log out</span>
2334
+ </a>
2335
+ </li>
2336
+ }
2337
+ </ul>
2338
+ </div>
2339
+ }
2220
2340
  </li>
2221
2341
  </ul>
2222
2342
  </div>
@@ -2233,12 +2353,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
2233
2353
  }], searchInput: [{
2234
2354
  type: ViewChild,
2235
2355
  args: ['searchInput']
2356
+ }], notificationsItem: [{
2357
+ type: ViewChild,
2358
+ args: ['notificationsItem']
2359
+ }], languageItem: [{
2360
+ type: ViewChild,
2361
+ args: ['languageItem']
2236
2362
  }], profileItem: [{
2237
2363
  type: ViewChild,
2238
2364
  args: ['profileItem']
2239
- }], profilePanel: [{
2240
- type: ViewChild,
2241
- args: ['profilePanel']
2242
2365
  }], selectedNotificationBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedNotificationBar", required: false }] }, { type: i0.Output, args: ["selectedNotificationBarChange"] }], onDocumentClick: [{
2243
2366
  type: HostListener,
2244
2367
  args: ['document:click', ['$event']]
@@ -3173,10 +3296,10 @@ class DetailLayoutComponent {
3173
3296
  <p-tablist
3174
3297
  class="flex-shrink-0 ux-dl__tablist"
3175
3298
  [style.display]="isMobile() ? 'none' : null"
3176
- [pt]="{ content: { class: 'w-full' }, tabList: { class: 'w-full pl-8 p-0' } }"
3299
+ [pt]="{ tabList: { class: 'p-0' } }"
3177
3300
  >
3178
3301
  @for (tab of tabs(); track tab.value) {
3179
- <p-tab [value]="tab.value" [pt]="{ root: { class: 'flex-1 justify-center' } }">
3302
+ <p-tab [value]="tab.value">
3180
3303
  @if (tab.icon) {
3181
3304
  <i [class]="tab.icon" class="mr-2 text-sm"></i>
3182
3305
  }
@@ -3221,7 +3344,7 @@ class DetailLayoutComponent {
3221
3344
  </p-tabs>
3222
3345
 
3223
3346
  </div>
3224
- `, isInline: true, styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0;font-family:var(--p-font-family, \"Noto Sans\", sans-serif);background:transparent;color:var(--p-text-color)}.ux-dl__header{background:transparent}.ux-dl__scroll{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--p-primary-color) 25%,transparent) color-mix(in srgb,var(--p-surface-500) 8%,transparent)}.ux-dl__scroll::-webkit-scrollbar{width:10px;height:10px}.ux-dl__scroll::-webkit-scrollbar-track{background:color-mix(in srgb,var(--p-surface-500) 8%,transparent);border-radius:var(--p-content-border-radius, .375rem)}.ux-dl__scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--p-primary-color) 25%,transparent);border-radius:var(--p-content-border-radius, .375rem)}.ux-dl__scroll::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--p-primary-color) 45%,transparent)}.ux-dl__sidebar-inner{display:flex;flex-direction:column;gap:1.5rem}.ux-dl__header-meta{overflow:hidden;max-height:80px;opacity:1;transition:max-height .25s ease-out,opacity .2s ease-out}.ux-dl__header-meta--hidden{max-height:0;opacity:0}.ux-dl__tablist{display:flex;overflow:hidden;background:var(--p-surface-950);padding-inline:.75rem}@media screen and (min-width:640px){.ux-dl__tablist{padding-inline:1rem}}@media screen and (min-width:1024px){.ux-dl__tablist{padding-inline:1.5rem}}.ux-dl__mobile-tabs{position:sticky;top:0;z-index:5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i4$3.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i4$3.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i4$3.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i4$3.TabList, selector: "p-tablist" }, { kind: "component", type: i4$3.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3347
+ `, 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 });
3225
3348
  }
3226
3349
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DetailLayoutComponent, decorators: [{
3227
3350
  type: Component,
@@ -3260,10 +3383,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
3260
3383
  <p-tablist
3261
3384
  class="flex-shrink-0 ux-dl__tablist"
3262
3385
  [style.display]="isMobile() ? 'none' : null"
3263
- [pt]="{ content: { class: 'w-full' }, tabList: { class: 'w-full pl-8 p-0' } }"
3386
+ [pt]="{ tabList: { class: 'p-0' } }"
3264
3387
  >
3265
3388
  @for (tab of tabs(); track tab.value) {
3266
- <p-tab [value]="tab.value" [pt]="{ root: { class: 'flex-1 justify-center' } }">
3389
+ <p-tab [value]="tab.value">
3267
3390
  @if (tab.icon) {
3268
3391
  <i [class]="tab.icon" class="mr-2 text-sm"></i>
3269
3392
  }
@@ -3308,7 +3431,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
3308
3431
  </p-tabs>
3309
3432
 
3310
3433
  </div>
3311
- `, styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0;font-family:var(--p-font-family, \"Noto Sans\", sans-serif);background:transparent;color:var(--p-text-color)}.ux-dl__header{background:transparent}.ux-dl__scroll{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--p-primary-color) 25%,transparent) color-mix(in srgb,var(--p-surface-500) 8%,transparent)}.ux-dl__scroll::-webkit-scrollbar{width:10px;height:10px}.ux-dl__scroll::-webkit-scrollbar-track{background:color-mix(in srgb,var(--p-surface-500) 8%,transparent);border-radius:var(--p-content-border-radius, .375rem)}.ux-dl__scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--p-primary-color) 25%,transparent);border-radius:var(--p-content-border-radius, .375rem)}.ux-dl__scroll::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--p-primary-color) 45%,transparent)}.ux-dl__sidebar-inner{display:flex;flex-direction:column;gap:1.5rem}.ux-dl__header-meta{overflow:hidden;max-height:80px;opacity:1;transition:max-height .25s ease-out,opacity .2s ease-out}.ux-dl__header-meta--hidden{max-height:0;opacity:0}.ux-dl__tablist{display:flex;overflow:hidden;background:var(--p-surface-950);padding-inline:.75rem}@media screen and (min-width:640px){.ux-dl__tablist{padding-inline:1rem}}@media screen and (min-width:1024px){.ux-dl__tablist{padding-inline:1.5rem}}.ux-dl__mobile-tabs{position:sticky;top:0;z-index:5}\n"] }]
3434
+ `, 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"] }]
3312
3435
  }], 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: [{
3313
3436
  type: ContentChildren,
3314
3437
  args: [DetailTabDirective]
@@ -3507,7 +3630,7 @@ class DocumentsCardComponent {
3507
3630
  </div>
3508
3631
  </p-panel>
3509
3632
  </div>
3510
- `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i3$5.FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i5$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i6.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: i7.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i8$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i8$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i8$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i9$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: PillTabsComponent, selector: "ux-pill-tabs", inputs: ["items", "activeValue"], outputs: ["activeValueChange"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: i10$1.Panel, selector: "p-panel", inputs: ["id", "toggleable", "header", "collapsed", "styleClass", "iconPos", "showHeader", "toggler", "transitionOptions", "toggleButtonProps", "motionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3633
+ `, 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 });
3511
3634
  }
3512
3635
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DocumentsCardComponent, decorators: [{
3513
3636
  type: Component,
@@ -3859,7 +3982,7 @@ class TaskDrawerComponent {
3859
3982
  </div>
3860
3983
  </ng-template>
3861
3984
  </p-drawer>
3862
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i4.Drawer, selector: "p-drawer", inputs: ["appendTo", "motionOptions", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i5$2.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i7$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i8$2.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i2.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i10.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3985
+ `, 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 });
3863
3986
  }
3864
3987
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TaskDrawerComponent, decorators: [{
3865
3988
  type: Component,
@@ -3953,5 +4076,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
3953
4076
  * Generated bundle index. Do not edit.
3954
4077
  */
3955
4078
 
3956
- 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 };
4079
+ 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_LANGUAGE_CONFIG, TOPBAR_MOBILE_LOGO, TOPBAR_NOTIFICATION_CONFIG, TOPBAR_PROFILE_MENU_CONFIG, TaskDrawerComponent, UxSelectComponent, brandPresets, brandPrimitives };
3957
4080
  //# sourceMappingURL=unopsitg-ux.mjs.map