@flusys/ng-layout 4.1.0 → 5.0.0

package/fesm2022/flusys-ng-layout.mjs

@@ -405,14 +405,16 @@ class AppFooter {
     @if (displayLogo) {
       <img [src]="displayLogo" [alt]="appName" class="logo-image" />
     }
-    {{ appName }} {{ 'layout.footer.by' | translate }}
-    <a
-      [href]="authorUrl"
-      target="_blank"
-      rel="noopener noreferrer"
-      class="text-primary font-bold hover:underline"
-      >{{ authorName }}</a
-    >
+    <span class="hidden sm:inline">
+      {{ appName }} {{ 'layout.footer.by' | translate }}
+      <a
+        [href]="authorUrl"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-primary font-bold hover:underline"
+        >{{ authorName }}</a
+      >
+    </span>
   </div>`, isInline: true, dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppFooter, decorators: [{
@@ -424,14 +426,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
     @if (displayLogo) {
       <img [src]="displayLogo" [alt]="appName" class="logo-image" />
     }
-    {{ appName }} {{ 'layout.footer.by' | translate }}
-    <a
-      [href]="authorUrl"
-      target="_blank"
-      rel="noopener noreferrer"
-      class="text-primary font-bold hover:underline"
-      >{{ authorName }}</a
-    >
+    <span class="hidden sm:inline">
+      {{ appName }} {{ 'layout.footer.by' | translate }}
+      <a
+        [href]="authorUrl"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-primary font-bold hover:underline"
+        >{{ authorName }}</a
+      >
+    </span>
   </div>`,
                 }]
         }] });
@@ -1135,7 +1139,7 @@ class AppMenuitem {
     }
     updateSubmenuPosition() {
         const linkEl = this.parentLink()?.nativeElement;
-        if (!linkEl)
+        if (!linkEl || typeof linkEl.getBoundingClientRect !== 'function')
             return;
         const rect = linkEl.getBoundingClientRect();
         const hostEl = linkEl.closest('[app-menuitem]');
@@ -1183,7 +1187,6 @@ class AppMenuitem {
           #parentLink
           tabindex="0"
           pRipple
-          [style.cursor]="layoutService.isTopbar() ? 'default' : 'pointer'"
         >
           @if (item().icon) {
             <lib-icon
@@ -1259,7 +1262,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
           #parentLink
           tabindex="0"
           pRipple
-          [style.cursor]="layoutService.isTopbar() ? 'default' : 'pointer'"
         >
           @if (item().icon) {
             <lib-icon
@@ -1384,7 +1386,9 @@ class AppCompanyBranchSelector {
     authState = inject(LAYOUT_AUTH_STATE, { optional: true });
     authApi = inject(LAYOUT_AUTH_API, { optional: true });
     messageService = inject(MessageService);
-    translateAdapter = inject(TRANSLATE_ADAPTER, { optional: true });
+    translateAdapter = inject(TRANSLATE_ADAPTER, {
+        optional: true,
+    });
     document = inject(DOCUMENT$1);
     elementRef = inject(ElementRef);
     _isActive = signal(false, ...(ngDevMode ? [{ debugName: "_isActive" }] : []));
@@ -1399,7 +1403,8 @@ class AppCompanyBranchSelector {
             }
         });
     }
-    currentCompanyName = computed(() => this.authState?.currentCompanyInfo()?.name ?? this.translate('layout.company.branch.selector.no.company'), ...(ngDevMode ? [{ debugName: "currentCompanyName" }] : []));
+    currentCompanyName = computed(() => this.authState?.currentCompanyInfo()?.name ??
+        this.translate('layout.company.branch.selector.no.company'), ...(ngDevMode ? [{ debugName: "currentCompanyName" }] : []));
     currentBranchName = computed(() => this.authState?.currentBranchInfo()?.name ?? null, ...(ngDevMode ? [{ debugName: "currentBranchName" }] : []));
     _companies = signal([], ...(ngDevMode ? [{ debugName: "_companies" }] : []));
     companies = this._companies.asReadonly();
@@ -1422,7 +1427,7 @@ class AppCompanyBranchSelector {
         const currentCompanyId = this.authState?.currentCompanyInfo()?.id;
         const currentBranchId = this.authState?.currentBranchInfo()?.id;
         const selectedBranch = this.selectedBranchId();
-        return selectedCompany !== currentCompanyId || selectedBranch !== currentBranchId;
+        return (selectedCompany !== currentCompanyId || selectedBranch !== currentBranchId);
     }, ...(ngDevMode ? [{ debugName: "canSwitch" }] : []));
     onPanelToggle() {
         this._isActive.update((v) => !v);
@@ -1536,20 +1541,24 @@ class AppCompanyBranchSelector {
       style="background-color: var(--surface-overlay); inset-inline-end: 0;"
     >
       <div class="flex flex-col gap-4">
-        <span class="text-sm text-muted-color font-semibold"
-          >{{ 'layout.company.branch.selector.title' | translate }}</span
-        >
+        <span class="text-sm text-muted-color font-semibold">{{
+          'layout.company.branch.selector.title' | translate
+        }}</span>
 
         <!-- Company Selector -->
         <div class="flex flex-col gap-2">
-          <label class="text-sm text-muted-color font-semibold">{{ 'layout.company.branch.selector.company' | translate }}</label>
+          <label class="text-sm text-muted-color font-semibold">{{
+            'shared.company' | translate
+          }}</label>
           <p-select
             [options]="companies()"
             [ngModel]="selectedCompanyId()"
             (ngModelChange)="onCompanyChange($event)"
             optionLabel="name"
             optionValue="id"
-            [placeholder]="'layout.company.branch.selector.select.company' | translate"
+            [placeholder]="
+              'layout.company.branch.selector.select.company' | translate
+            "
             class="w-full"
             [loading]="isLoadingCompanies()"
           />
@@ -1558,14 +1567,18 @@ class AppCompanyBranchSelector {
         <!-- Branch Selector -->
         @if (selectedCompanyId() && branches().length > 0) {
           <div class="flex flex-col gap-2">
-            <label class="text-sm text-muted-color font-semibold">{{ 'layout.company.branch.selector.branch' | translate }}</label>
+            <label class="text-sm text-muted-color font-semibold">{{
+              'layout.company.branch.selector.branch' | translate
+            }}</label>
             <p-select
               [options]="branches()"
               [ngModel]="selectedBranchId()"
               (ngModelChange)="onBranchChange($event)"
               optionLabel="name"
               optionValue="id"
-              [placeholder]="'layout.company.branch.selector.select.branch' | translate"
+              [placeholder]="
+                'layout.company.branch.selector.select.branch' | translate
+              "
               class="w-full"
               [loading]="isLoadingBranches()"
             />
@@ -1591,7 +1604,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             type: Component,
             args: [{
                     selector: 'app-company-branch-selector',
-                    imports: [AngularModule, StyleClassModule, ButtonModule, SelectModule, TranslatePipe],
+                    imports: [
+                        AngularModule,
+                        StyleClassModule,
+                        ButtonModule,
+                        SelectModule,
+                        TranslatePipe,
+                    ],
                     host: { class: 'relative' },
                     template: `
     <button
@@ -1617,20 +1636,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
       style="background-color: var(--surface-overlay); inset-inline-end: 0;"
     >
       <div class="flex flex-col gap-4">
-        <span class="text-sm text-muted-color font-semibold"
-          >{{ 'layout.company.branch.selector.title' | translate }}</span
-        >
+        <span class="text-sm text-muted-color font-semibold">{{
+          'layout.company.branch.selector.title' | translate
+        }}</span>
 
         <!-- Company Selector -->
         <div class="flex flex-col gap-2">
-          <label class="text-sm text-muted-color font-semibold">{{ 'layout.company.branch.selector.company' | translate }}</label>
+          <label class="text-sm text-muted-color font-semibold">{{
+            'shared.company' | translate
+          }}</label>
           <p-select
             [options]="companies()"
             [ngModel]="selectedCompanyId()"
             (ngModelChange)="onCompanyChange($event)"
             optionLabel="name"
             optionValue="id"
-            [placeholder]="'layout.company.branch.selector.select.company' | translate"
+            [placeholder]="
+              'layout.company.branch.selector.select.company' | translate
+            "
             class="w-full"
             [loading]="isLoadingCompanies()"
           />
@@ -1639,14 +1662,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
         <!-- Branch Selector -->
         @if (selectedCompanyId() && branches().length > 0) {
           <div class="flex flex-col gap-2">
-            <label class="text-sm text-muted-color font-semibold">{{ 'layout.company.branch.selector.branch' | translate }}</label>
+            <label class="text-sm text-muted-color font-semibold">{{
+              'layout.company.branch.selector.branch' | translate
+            }}</label>
             <p-select
               [options]="branches()"
               [ngModel]="selectedBranchId()"
               (ngModelChange)="onBranchChange($event)"
               optionLabel="name"
               optionValue="id"
-              [placeholder]="'layout.company.branch.selector.select.branch' | translate"
+              [placeholder]="
+                'layout.company.branch.selector.select.branch' | translate
+              "
               class="w-full"
               [loading]="isLoadingBranches()"
             />
@@ -1712,7 +1739,9 @@ class AppLauncher {
       style="background-color: var(--surface-overlay); inset-inline-end: 0;"
     >
       <div class="flex flex-col gap-2">
-        <span class="text-sm text-muted-color font-semibold">{{ 'layout.launcher.applications' | translate }}</span>
+        <span class="text-sm text-muted-color font-semibold">{{
+          'layout.launcher.applications' | translate
+        }}</span>
         <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
           @for (app of layoutService.apps(); track app.id) {
             <a
@@ -1768,7 +1797,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
       style="background-color: var(--surface-overlay); inset-inline-end: 0;"
     >
       <div class="flex flex-col gap-2">
-        <span class="text-sm text-muted-color font-semibold">{{ 'layout.launcher.applications' | translate }}</span>
+        <span class="text-sm text-muted-color font-semibold">{{
+          'layout.launcher.applications' | translate
+        }}</span>
         <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
           @for (app of layoutService.apps(); track app.id) {
             <a
@@ -1805,7 +1836,9 @@ class AppProfile {
     authApi = inject(LAYOUT_AUTH_API, { optional: true });
     layoutService = inject(LayoutService);
     messageService = inject(MessageService);
-    translateAdapter = inject(TRANSLATE_ADAPTER, { optional: true });
+    translateAdapter = inject(TRANSLATE_ADAPTER, {
+        optional: true,
+    });
     appConfig = inject(APP_CONFIG, { optional: true });
     document = inject(DOCUMENT$1);
     elementRef = inject(ElementRef);
@@ -1824,7 +1857,8 @@ class AppProfile {
     togglePanel() {
         this._isActive.update((v) => !v);
     }
-    userName = computed(() => this.authState?.loginUserData()?.name ?? this.translate('layout.profile.guest'), ...(ngDevMode ? [{ debugName: "userName" }] : []));
+    userName = computed(() => this.authState?.loginUserData()?.name ??
+        this.translate('layout.profile.guest'), ...(ngDevMode ? [{ debugName: "userName" }] : []));
     userEmail = computed(() => this.authState?.loginUserData()?.email ?? '', ...(ngDevMode ? [{ debugName: "userEmail" }] : []));
     profilePicture = computed(() => this.layoutService.userProfilePictureUrl() ?? '', ...(ngDevMode ? [{ debugName: "profilePicture" }] : []));
     signUpEnabled = computed(() => this.appConfig ? isSignUpEnabled(this.appConfig) : false, ...(ngDevMode ? [{ debugName: "signUpEnabled" }] : []));
@@ -1836,10 +1870,13 @@ class AppProfile {
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
             next: (result) => {
+                const r = result;
                 this.messageService.add({
                     severity: 'success',
                     summary: this.translate('shared.success'),
-                    detail: result.message,
+                    detail: r?.messageKey
+                        ? this.translate(r.messageKey, r.messageVariables)
+                        : (r?.message ?? ''),
                 });
                 this.authApi?.navigateLogin(false);
             },
@@ -1868,8 +1905,8 @@ class AppProfile {
             });
         });
     }
-    translate(key) {
-        return this.translateAdapter?.translate(key) ?? key;
+    translate(key, vars) {
+        return this.translateAdapter?.translate(key, vars) ?? key;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppProfile, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AppProfile, isStandalone: true, selector: "app-profile", host: { classAttribute: "relative" }, ngImport: i0, template: `
@@ -1912,8 +1949,12 @@ class AppProfile {
             </div>
           }
           <div class="flex flex-col min-w-0 flex-1">
-            <span class="font-semibold text-color truncate">{{ userName() }}</span>
-            <span class="text-sm text-muted-color truncate">{{ userEmail() }}</span>
+            <span class="font-semibold text-color truncate">{{
+              userName()
+            }}</span>
+            <span class="text-sm text-muted-color truncate">{{
+              userEmail()
+            }}</span>
           </div>
         </a>
 
@@ -1989,8 +2030,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             </div>
           }
           <div class="flex flex-col min-w-0 flex-1">
-            <span class="font-semibold text-color truncate">{{ userName() }}</span>
-            <span class="text-sm text-muted-color truncate">{{ userEmail() }}</span>
+            <span class="font-semibold text-color truncate">{{
+              userName()
+            }}</span>
+            <span class="text-sm text-muted-color truncate">{{
+              userEmail()
+            }}</span>
           </div>
         </a>
 
@@ -2148,7 +2193,10 @@ class AppSearchbar {
         this.closeSuggestions();
     }
     onSearch() {
-        // Implement global search if needed
+        const query = this.searchTerm();
+        if (this.searchAdapter?.onSearch && query.trim()) {
+            this.searchAdapter.onSearch(query);
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppSearchbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AppSearchbar, isStandalone: true, selector: "app-searchbar", viewQueries: [{ propertyName: "searchWrapper", first: true, predicate: ["searchWrapper"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
@@ -2454,7 +2502,7 @@ class AppTopbar {
         @if (displayLogo()) {
           <img [src]="displayLogo()" [alt]="companyName()" class="logo-image" />
         }
-        <span>{{ companyName() }}</span>
+        <span class="hidden sm:inline">{{ companyName() }}</span>
       </a>
       @if (!layoutService.isTopbar() && layoutService.isDesktop()) {
         <button
@@ -2582,7 +2630,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
         @if (displayLogo()) {
           <img [src]="displayLogo()" [alt]="companyName()" class="logo-image" />
         }
-        <span>{{ companyName() }}</span>
+        <span class="hidden sm:inline">{{ companyName() }}</span>
       </a>
       @if (!layoutService.isTopbar() && layoutService.isDesktop()) {
         <button
@@ -2847,43 +2895,36 @@ const GreenTheme = definePreset(Material, {
 });
 
 const LAYOUT_MESSAGES = {
-    // Menu items
-    'menu.dashboard': 'Dashboard',
-    'menu.administration': 'Administration',
-    'menu.iam': 'IAM',
-    'menu.storage': 'Storage',
-    'menu.forms': 'Forms',
-    'menu.email': 'Email',
-    'menu.event.manager': 'Event Manager',
-    'menu.notifications': 'Notifications',
-    'menu.localization': 'Localization',
-    'menu.projects': 'Projects',
-    'menu.projects.active': 'Active Projects',
-    'menu.projects.archived': 'Archived Projects',
-    'menu.projects.reports': 'Project Reports',
-    // Profile
+    // components/top-bar/app.profile.ts
     'layout.profile.title': 'Profile',
     'layout.profile.profile.picture.alt': 'Profile picture',
     'layout.profile.copy.sign.up.link': 'Copy SignUp Link',
     'layout.profile.logout': 'Logout',
+    'layout.profile.guest': 'Guest',
     'layout.profile.link.copied': 'Link Copied',
     'layout.profile.sign.up.link.copied': 'Sign Up Link copied.',
     'layout.profile.failed.copy.sign.up.link': 'Failed to copy signup link.',
-    'layout.profile.guest': 'Guest',
-    // Company/Branch Selector
+    // components/top-bar/app.launcher.ts
+    'layout.launcher.apps': 'Apps',
+    'layout.launcher.applications': 'Applications',
+    // components/top-bar/app.company-branch-selector.ts
     'layout.company.branch.selector.title': 'Switch Company & Branch',
-    'layout.company.branch.selector.company': 'Company',
     'layout.company.branch.selector.select.company': 'Select Company',
     'layout.company.branch.selector.branch': 'Branch',
     'layout.company.branch.selector.select.branch': 'Select Branch',
     'layout.company.branch.selector.switch.button': 'Switch',
+    'layout.company.branch.selector.no.company': 'No Company',
     'layout.company.branch.selector.branch.required': 'Branch Required',
     'layout.company.branch.selector.please.select.branch': 'Please select a branch',
-    'layout.company.branch.selector.no.company': 'No Company',
-    // Launcher
-    'layout.launcher.apps': 'Apps',
-    'layout.launcher.applications': 'Applications',
-    // Configurator
+    // components/top-bar/app.searchbar.ts
+    'layout.topbar.search': 'Search',
+    'layout.topbar.search.placeholder': 'Search for content...',
+    // components/app.topbar.ts
+    'layout.topbar.toggle.menu': 'Toggle menu',
+    'layout.topbar.toggle.dark.mode': 'Toggle dark mode',
+    'layout.topbar.open.theme.settings': 'Open theme settings',
+    'layout.topbar.more.options': 'More options',
+    // components/app.configurator.ts
     'layout.configurator.primary': 'Primary',
     'layout.configurator.surface': 'Surface',
     'layout.configurator.presets': 'Presets',
@@ -2891,26 +2932,30 @@ const LAYOUT_MESSAGES = {
     'layout.configurator.menu.mode.static': 'Static',
     'layout.configurator.menu.mode.overlay': 'Overlay',
     'layout.configurator.menu.mode.topbar': 'Topbar',
-    // Topbar accessibility
-    'layout.topbar.toggle.menu': 'Toggle menu',
-    'layout.topbar.toggle.dark.mode': 'Toggle dark mode',
-    'layout.topbar.open.theme.settings': 'Open theme settings',
-    'layout.topbar.more.options': 'More options',
-    // Footer
+    // components/app.footer.ts
     'layout.footer.by': 'by',
-    // Notifications
+    // app-menu.config.ts (main app menu configuration)
+    'menu.dashboard': 'Dashboard',
+    'menu.administration': 'Administration',
+    'menu.iam': 'IAM',
+    'menu.storage': 'Storage',
+    'menu.forms': 'Forms',
+    'menu.email': 'Email',
+    'menu.event.manager': 'Event Manager',
+    'menu.notifications': 'Notifications',
+    'menu.localization': 'Localization',
+    // Those are layout part from notification module, but we put them here to avoid circular dependency between layout and notification module
+    // components/notification-bell/notification-bell.component.ts
     'notification.title': 'Notifications',
-    'notification.mark.all.read': 'Mark all as read',
-    'notification.view.all': 'View all',
+    // components/notification-list/notification-list.component.ts
+    'notification.mark.all.read': 'Mark all read',
+    'notification.view.all': 'View all notifications',
+    'notification.empty': 'No notifications',
+    // components/notification-item/notification-item.component.ts
     'notification.time.just.now': 'Just now',
     'notification.time.minutes.ago': '{{count}}m ago',
     'notification.time.hours.ago': '{{count}}h ago',
     'notification.time.days.ago': '{{count}}d ago',
-    'notification.empty': 'No notifications',
-    // Home/Dashboard
-    'home.where.users.from': 'Where users are from',
-    'layout.topbar.search': 'Search',
-    'layout.topbar.search.placeholder': 'Search for content...',
 };
 
 // Components