npm - @es.framework/ng.ui.core - Versions diffs - 2.0.64 → 2.0.66 - Mend

@es.framework/ng.ui.core 2.0.64 → 2.0.66

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 (176) hide show

package/fesm2022/es.framework-ng.ui.core-filter-templates.mjs CHANGED Viewed

@@ -315,23 +315,23 @@ class FilterTemplateEditorDialogComponent {
         this.onVisibleChange(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FilterTemplateEditorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: FilterTemplateEditorDialogComponent, isStandalone: true, selector: "filter-template-editor-dialog", inputs: { visible: "visible", mode: "mode", model: "model", filterFields: "filterFields", apiName: "apiName", moduleName: "moduleName", idField: "idField", defaultFeature: "defaultFeature", defaultPermission: "defaultPermission", defaultCategory: "defaultCategory", dialogMaxWidth: "dialogMaxWidth", currentUserId: "currentUserId" }, outputs: { visibleChange: "visibleChange", saved: "saved" }, providers: [BaseService], ngImport: i0, template: `
-    <app-generic-dialog
-      [service]="svc"
-      [apiName]="apiName"
-      [idField]="idField"
-      [form]="form"
-      [formFields]="computedFields"
-      [model]="model"
-      [isEditMode]="mode === 'edit'"
-      [isViewMode]="false"
-      [displayMode]="'dialog'"
-      [dialogVisible]="visible"
-      [dialogMaxWidth]="dialogMaxWidth"
-      [beforeSaveTransform]="beforeSaveTransform"
-      (visibleChange)="onVisibleChange($event)"
-      (afterSave)="onAfterSave($event)"
-    ></app-generic-dialog>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: FilterTemplateEditorDialogComponent, isStandalone: true, selector: "filter-template-editor-dialog", inputs: { visible: "visible", mode: "mode", model: "model", filterFields: "filterFields", apiName: "apiName", moduleName: "moduleName", idField: "idField", defaultFeature: "defaultFeature", defaultPermission: "defaultPermission", defaultCategory: "defaultCategory", dialogMaxWidth: "dialogMaxWidth", currentUserId: "currentUserId" }, outputs: { visibleChange: "visibleChange", saved: "saved" }, providers: [BaseService], ngImport: i0, template: `
+    <app-generic-dialog
+      [service]="svc"
+      [apiName]="apiName"
+      [idField]="idField"
+      [form]="form"
+      [formFields]="computedFields"
+      [model]="model"
+      [isEditMode]="mode === 'edit'"
+      [isViewMode]="false"
+      [displayMode]="'dialog'"
+      [dialogVisible]="visible"
+      [dialogMaxWidth]="dialogMaxWidth"
+      [beforeSaveTransform]="beforeSaveTransform"
+      (visibleChange)="onVisibleChange($event)"
+      (afterSave)="onAfterSave($event)"
+    ></app-generic-dialog>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: GenericDialogComponent, selector: "app-generic-dialog", inputs: ["form", "service", "formFields", "model", "apiName", "moduleName", "idField", "dialogMaxWidth", "displayMode", "mode", "forceState", "drawerVisible", "dialogVisible", "isViewMode", "isEditMode", "useConfirmOnSave", "loading", "errorMsg", "errorMessage", "beforeSaveTransform", "hideTable", "autoShowForm"], outputs: ["action", "afterSave", "afterDelete", "beforeSave", "beforeDelete", "formCancel", "formInit", "dataLoaded", "selectionChange", "error", "visibleChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FilterTemplateEditorDialogComponent, decorators: [{
@@ -341,23 +341,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                     standalone: true,
                     imports: [CommonModule, GenericDialogComponent],
                     providers: [BaseService],
-                    template: `
-    <app-generic-dialog
-      [service]="svc"
-      [apiName]="apiName"
-      [idField]="idField"
-      [form]="form"
-      [formFields]="computedFields"
-      [model]="model"
-      [isEditMode]="mode === 'edit'"
-      [isViewMode]="false"
-      [displayMode]="'dialog'"
-      [dialogVisible]="visible"
-      [dialogMaxWidth]="dialogMaxWidth"
-      [beforeSaveTransform]="beforeSaveTransform"
-      (visibleChange)="onVisibleChange($event)"
-      (afterSave)="onAfterSave($event)"
-    ></app-generic-dialog>
+                    template: `
+    <app-generic-dialog
+      [service]="svc"
+      [apiName]="apiName"
+      [idField]="idField"
+      [form]="form"
+      [formFields]="computedFields"
+      [model]="model"
+      [isEditMode]="mode === 'edit'"
+      [isViewMode]="false"
+      [displayMode]="'dialog'"
+      [dialogVisible]="visible"
+      [dialogMaxWidth]="dialogMaxWidth"
+      [beforeSaveTransform]="beforeSaveTransform"
+      (visibleChange)="onVisibleChange($event)"
+      (afterSave)="onAfterSave($event)"
+    ></app-generic-dialog>
   `,
                 }]
         }], propDecorators: { visible: [{
@@ -546,292 +546,292 @@ class SavedReportTemplatesDrawerComponent {
         this.templateEditorVisible = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SavedReportTemplatesDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: SavedReportTemplatesDrawerComponent, isStandalone: true, selector: "saved-report-templates-drawer", inputs: { apiName: "apiName", module: "module", service: "service", category: "category", feature: "feature", visible: "visible", position: "position", showCloseIcon: "showCloseIcon", modal: "modal", dismissable: "dismissable", closeOnEscape: "closeOnEscape", blockScroll: "blockScroll", filterFields: "filterFields", moduleName: "moduleName", defaultFeature: "defaultFeature", defaultCategory: "defaultCategory", defaultPermission: "defaultPermission", currentUserId: "currentUserId" }, outputs: { templateSelected: "templateSelected", edit: "edit", add: "add", visibleChange: "visibleChange" }, providers: [BaseService], ngImport: i0, template: `
- <p-drawer
-  [visible]="visible"
-  (visibleChange)="onVisibleChange($event)"
-  [position]="position"
-  [modal]="modal"
-  [dismissible]="dismissable"
-  [closeOnEscape]="closeOnEscape"
-  [blockScroll]="blockScroll"
-  [showCloseIcon]="showCloseIcon"
->
-  <div class="h-full flex flex-col bg-white">
-    <!-- Header -->
-    <div class="sticky top-0 z-10 bg-white border-b border-gray-200 px-4 py-4">
-      <div class="flex items-center gap-3">
-        <div class="w-9 h-9 rounded-xl flex items-center justify-center bg-gray-100 text-gray-700">
-          <i class="pi pi-bookmark"></i>
-        </div>
-        <div class="flex-1 min-w-0">
-          <div class="text-xs text-gray-500">
-            {{ 'TEMPLATES' | translate }}
-          </div>
-          <div class="text-base font-semibold text-gray-900 truncate">
-            {{ selected ? getName(selected) : ('SELECT_TEMPLATE' | translate) }}
-          </div>
-        </div>
-        <button
-          pButton
-          type="button"
-          class="p-button-rounded p-button-sm p-button-text"
-          icon="pi pi-refresh"
-          (click)="refresh()"
-          [disabled]="loading"
-          pTooltip="{{ 'REFRESH' | translate }}"
-          tooltipPosition="bottom"
-        ></button>
-        <button
-          pButton
-          type="button"
-          class="p-button-rounded p-button-sm p-button-primary"
-          icon="pi pi-plus"
-          (click)="openTemplateCreate()"
-          [disabled]="loading"
-          pTooltip="{{ 'COMMON.ADD' | translate }}"
-          tooltipPosition="bottom"
-        ></button>
-      </div>
-      <!-- Search -->
-      <div class="mt-4">
-        <span class="p-input-icon-left w-full">
-          <i class="pi pi-search"></i>
-          <input
-            pInputText
-            class="w-full !rounded-xl"
-            [(ngModel)]="search"
-            [disabled]="loading"
-            [placeholder]="'SEARCH_FOR_A_VIEW' | translate"
-          />
-        </span>
-      </div>
-    </div>
-    <!-- Content -->
-    <div class="flex-1 overflow-auto px-3 py-3">
-      <!-- ✅ Loading -->
-      <div *ngIf="loading" class="py-4">
-         <app-loading-skeleton [itemsCount]="4"></app-loading-skeleton>
-      </div>
-      <!-- ✅ Empty -->
-      <div *ngIf="!loading && filteredAll.length === 0" class="text-sm text-gray-500 text-center py-12">
-        <div class="mx-auto mb-3 w-12 h-12 rounded-2xl bg-gray-100 flex items-center justify-center">
-          <i class="pi pi-inbox text-gray-500"></i>
-        </div>
-        {{ 'NO_DATA_FOUND' | translate }}
-      </div>
-      <!-- ✅ Content when not loading -->
-      <ng-container *ngIf="!loading">
-        <!-- Favorites -->
-        <ng-container *ngIf="favList.length > 0">
-          <button
-            type="button"
-            class="w-full flex items-center justify-between px-2 py-2 text-sm font-semibold text-gray-800"
-            (click)="favOpen = !favOpen"
-          >
-            <span class="flex items-center gap-2">
-              <i class="pi pi-star-fill text-yellow-500"></i>
-              {{ 'FAVOURITES' | translate }}
-              <span class="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">{{ favList.length }}</span>
-            </span>
-            <i class="pi text-xs" [ngClass]="favOpen ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
-          </button>
-          <div *ngIf="favOpen" class="mt-1 space-y-1">
-            <ng-container *ngFor="let t of favList">
-              <div
-                class="group relative flex items-center gap-3 px-3 py-2 rounded-xl transition cursor-pointer
-                       hover:bg-gray-50"
-                [style.backgroundColor]="isSelected(t) ? 'var(--p-primary-50, rgba(59,130,246,0.10))' : ''"
-                (click)="select(t)"
-              >
-                <span
-                  class="absolute left-0 top-1 bottom-1 w-1 rounded-full"
-                  [style.backgroundColor]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : 'transparent'"
-                ></span>
-                <i class="text-base shrink-0"
-                   [ngClass]="t.icon || 'pi pi-check-circle'"
-                   [style.color]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : ''"></i>
-                <span class="flex-1 truncate"
-                      [class.font-semibold]="isSelected(t)"
-                      [style.color]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : ''">
-                  {{ getName(t) }}
-                </span>
-                <!-- Actions -->
-                <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition"
-                     (click)="$event.stopPropagation()">
-                  <button pButton type="button" class="p-button-text p-button-sm"
-                          [icon]="t.isFav ? 'pi pi-star-fill' : 'pi pi-star'"
-                          (click)="toggleFav(t)"></button>
-                  @if (!isSelected(t)) {
-                    <button pButton type="button" class="p-button-text p-button-sm"
-                            icon="pi pi-pencil"
-                            (click)="openTemplateEdit(t)"></button>
-                    <button pButton type="button" class="p-button-text p-button-sm p-button-danger"
-                            icon="pi pi-trash"
-                            (click)="confirmDelete(t)"></button>
-                  }
-                </div>
-              </div>
-            </ng-container>
-          </div>
-          <div class="my-3 border-b border-gray-200"></div>
-        </ng-container>
-        <!-- Shared -->
-        <ng-container *ngIf="sharedList.length > 0">
-          <button
-            type="button"
-            class="w-full flex items-center justify-between px-2 py-2 text-sm font-semibold text-gray-800"
-            (click)="sharedOpen = !sharedOpen"
-          >
-            <span class="flex items-center gap-2">
-              <i class="pi pi-users text-gray-600"></i>
-              {{ 'SHARED' | translate }}
-              <span class="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">{{ sharedList.length }}</span>
-            </span>
-            <i class="pi text-xs" [ngClass]="sharedOpen ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
-          </button>
-          <div *ngIf="sharedOpen" class="mt-1 space-y-1">
-            <ng-container *ngFor="let t of sharedList">
-              <div
-                class="group relative flex items-center gap-3 px-3 py-2 rounded-xl transition cursor-pointer hover:bg-gray-50"
-                [style.backgroundColor]="isSelected(t) ? 'var(--p-primary-50, rgba(59,130,246,0.10))' : ''"
-                (click)="select(t)"
-              >
-                <span
-                  class="absolute left-0 top-1 bottom-1 w-1 rounded-full"
-                  [style.backgroundColor]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : 'transparent'"
-                ></span>
-                <i class="text-base shrink-0"
-                   [ngClass]="t.icon || 'pi pi-check-circle'"
-                   [style.color]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : ''"></i>
-                <span class="flex-1 truncate"
-                      [class.font-semibold]="isSelected(t)"
-                      [style.color]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : ''">
-                  {{ getName(t) }}
-                </span>
-                <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition"
-                     (click)="$event.stopPropagation()">
-                  <button pButton type="button" class="p-button-text p-button-sm"
-                          [icon]="t.isFav ? 'pi pi-star-fill' : 'pi pi-star'"
-                          (click)="toggleFav(t)"></button>
-                  @if (!isSelected(t)) {
-                    <button pButton type="button" class="p-button-text p-button-sm"
-                            icon="pi pi-pencil"
-                            (click)="openTemplateEdit(t)"></button>
-                    <button pButton type="button" class="p-button-text p-button-sm p-button-danger"
-                            icon="pi pi-trash"
-                            (click)="confirmDelete(t)"></button>
-                  }
-                </div>
-              </div>
-            </ng-container>
-          </div>
-          <div class="my-3 border-b border-gray-200"></div>
-        </ng-container>
-        <!-- Private -->
-        <ng-container *ngIf="privateList.length > 0">
-          <button
-            type="button"
-            class="w-full flex items-center justify-between px-2 py-2 text-sm font-semibold text-gray-800"
-            (click)="privateOpen = !privateOpen"
-          >
-            <span class="flex items-center gap-2">
-              <i class="pi pi-lock text-gray-600"></i>
-              {{ 'PRIVATE' | translate }}
-              <span class="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">{{ privateList.length }}</span>
-            </span>
-            <i class="pi text-xs" [ngClass]="privateOpen ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
-          </button>
-          <div *ngIf="privateOpen" class="mt-1 space-y-1">
-            <ng-container *ngFor="let t of privateList">
-              <div
-                class="group relative flex items-center gap-3 px-3 py-2 rounded-xl transition cursor-pointer hover:bg-gray-50"
-                [style.backgroundColor]="isSelected(t) ? 'var(--p-primary-50, rgba(59,130,246,0.10))' : ''"
-                (click)="select(t)"
-              >
-                <span
-                  class="absolute left-0 top-1 bottom-1 w-1 rounded-full"
-                  [style.backgroundColor]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : 'transparent'"
-                ></span>
-                <i class="text-base shrink-0"
-                   [ngClass]="t.icon || 'pi pi-check-circle'"
-                   [style.color]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : ''"></i>
-                <span class="flex-1 truncate"
-                      [class.font-semibold]="isSelected(t)"
-                      [style.color]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : ''">
-                  {{ getName(t) }}
-                </span>
-                <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition"
-                     (click)="$event.stopPropagation()">
-                  <button pButton type="button" class="p-button-text p-button-sm"
-                          [icon]="t.isFav ? 'pi pi-star-fill' : 'pi pi-star'"
-                          (click)="toggleFav(t)"></button>
-                  @if (!isSelected(t)) {
-                    <button pButton type="button" class="p-button-text p-button-sm"
-                            icon="pi pi-pencil"
-                            (click)="openTemplateEdit(t)"></button>
-                    <button pButton type="button" class="p-button-text p-button-sm p-button-danger"
-                            icon="pi pi-trash"
-                            (click)="confirmDelete(t)"></button>
-                  }
-                </div>
-              </div>
-            </ng-container>
-          </div>
-        </ng-container>
-      </ng-container>
-    </div>
-  </div>
-</p-drawer>
-<filter-template-editor-dialog
-  [(visible)]="templateEditorVisible"
-  [mode]="templateEditorMode"
-  [model]="templateEditorModel"
-  [filterFields]="filterFields"
-  [moduleName]="moduleName"
-  [apiName]="apiName"
-  [defaultFeature]="defaultFeature"
-  [defaultCategory]="defaultCategory"
-  [defaultPermission]="defaultPermission"
-  [currentUserId]="currentUserId"
-  (saved)="onTemplateSaved($event)">
-</filter-template-editor-dialog>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: SavedReportTemplatesDrawerComponent, isStandalone: true, selector: "saved-report-templates-drawer", inputs: { apiName: "apiName", module: "module", service: "service", category: "category", feature: "feature", visible: "visible", position: "position", showCloseIcon: "showCloseIcon", modal: "modal", dismissable: "dismissable", closeOnEscape: "closeOnEscape", blockScroll: "blockScroll", filterFields: "filterFields", moduleName: "moduleName", defaultFeature: "defaultFeature", defaultCategory: "defaultCategory", defaultPermission: "defaultPermission", currentUserId: "currentUserId" }, outputs: { templateSelected: "templateSelected", edit: "edit", add: "add", visibleChange: "visibleChange" }, providers: [BaseService], ngImport: i0, template: `
+ <p-drawer
+  [visible]="visible"
+  (visibleChange)="onVisibleChange($event)"
+  [position]="position"
+  [modal]="modal"
+  [dismissible]="dismissable"
+  [closeOnEscape]="closeOnEscape"
+  [blockScroll]="blockScroll"
+  [showCloseIcon]="showCloseIcon"
+>
+  <div class="h-full flex flex-col bg-white">
+    <!-- Header -->
+    <div class="sticky top-0 z-10 bg-white border-b border-gray-200 px-4 py-4">
+      <div class="flex items-center gap-3">
+        <div class="w-9 h-9 rounded-xl flex items-center justify-center bg-gray-100 text-gray-700">
+          <i class="pi pi-bookmark"></i>
+        </div>
+        <div class="flex-1 min-w-0">
+          <div class="text-xs text-gray-500">
+            {{ 'TEMPLATES' | translate }}
+          </div>
+          <div class="text-base font-semibold text-gray-900 truncate">
+            {{ selected ? getName(selected) : ('SELECT_TEMPLATE' | translate) }}
+          </div>
+        </div>
+        <button
+          pButton
+          type="button"
+          class="p-button-rounded p-button-sm p-button-text"
+          icon="pi pi-refresh"
+          (click)="refresh()"
+          [disabled]="loading"
+          pTooltip="{{ 'REFRESH' | translate }}"
+          tooltipPosition="bottom"
+        ></button>
+        <button
+          pButton
+          type="button"
+          class="p-button-rounded p-button-sm p-button-primary"
+          icon="pi pi-plus"
+          (click)="openTemplateCreate()"
+          [disabled]="loading"
+          pTooltip="{{ 'COMMON.ADD' | translate }}"
+          tooltipPosition="bottom"
+        ></button>
+      </div>
+      <!-- Search -->
+      <div class="mt-4">
+        <span class="p-input-icon-left w-full">
+          <i class="pi pi-search"></i>
+          <input
+            pInputText
+            class="w-full !rounded-xl"
+            [(ngModel)]="search"
+            [disabled]="loading"
+            [placeholder]="'SEARCH_FOR_A_VIEW' | translate"
+          />
+        </span>
+      </div>
+    </div>
+    <!-- Content -->
+    <div class="flex-1 overflow-auto px-3 py-3">
+      <!-- ✅ Loading -->
+      <div *ngIf="loading" class="py-4">
+         <app-loading-skeleton [itemsCount]="4"></app-loading-skeleton>
+      </div>
+      <!-- ✅ Empty -->
+      <div *ngIf="!loading && filteredAll.length === 0" class="text-sm text-gray-500 text-center py-12">
+        <div class="mx-auto mb-3 w-12 h-12 rounded-2xl bg-gray-100 flex items-center justify-center">
+          <i class="pi pi-inbox text-gray-500"></i>
+        </div>
+        {{ 'NO_DATA_FOUND' | translate }}
+      </div>
+      <!-- ✅ Content when not loading -->
+      <ng-container *ngIf="!loading">
+        <!-- Favorites -->
+        <ng-container *ngIf="favList.length > 0">
+          <button
+            type="button"
+            class="w-full flex items-center justify-between px-2 py-2 text-sm font-semibold text-gray-800"
+            (click)="favOpen = !favOpen"
+          >
+            <span class="flex items-center gap-2">
+              <i class="pi pi-star-fill text-yellow-500"></i>
+              {{ 'FAVOURITES' | translate }}
+              <span class="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">{{ favList.length }}</span>
+            </span>
+            <i class="pi text-xs" [ngClass]="favOpen ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
+          </button>
+          <div *ngIf="favOpen" class="mt-1 space-y-1">
+            <ng-container *ngFor="let t of favList">
+              <div
+                class="group relative flex items-center gap-3 px-3 py-2 rounded-xl transition cursor-pointer
+                       hover:bg-gray-50"
+                [style.backgroundColor]="isSelected(t) ? 'var(--p-primary-50, rgba(59,130,246,0.10))' : ''"
+                (click)="select(t)"
+              >
+                <span
+                  class="absolute left-0 top-1 bottom-1 w-1 rounded-full"
+                  [style.backgroundColor]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : 'transparent'"
+                ></span>
+                <i class="text-base shrink-0"
+                   [ngClass]="t.icon || 'pi pi-check-circle'"
+                   [style.color]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : ''"></i>
+                <span class="flex-1 truncate"
+                      [class.font-semibold]="isSelected(t)"
+                      [style.color]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : ''">
+                  {{ getName(t) }}
+                </span>
+                <!-- Actions -->
+                <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition"
+                     (click)="$event.stopPropagation()">
+                  <button pButton type="button" class="p-button-text p-button-sm"
+                          [icon]="t.isFav ? 'pi pi-star-fill' : 'pi pi-star'"
+                          (click)="toggleFav(t)"></button>
+                  @if (!isSelected(t)) {
+                    <button pButton type="button" class="p-button-text p-button-sm"
+                            icon="pi pi-pencil"
+                            (click)="openTemplateEdit(t)"></button>
+                    <button pButton type="button" class="p-button-text p-button-sm p-button-danger"
+                            icon="pi pi-trash"
+                            (click)="confirmDelete(t)"></button>
+                  }
+                </div>
+              </div>
+            </ng-container>
+          </div>
+          <div class="my-3 border-b border-gray-200"></div>
+        </ng-container>
+        <!-- Shared -->
+        <ng-container *ngIf="sharedList.length > 0">
+          <button
+            type="button"
+            class="w-full flex items-center justify-between px-2 py-2 text-sm font-semibold text-gray-800"
+            (click)="sharedOpen = !sharedOpen"
+          >
+            <span class="flex items-center gap-2">
+              <i class="pi pi-users text-gray-600"></i>
+              {{ 'SHARED' | translate }}
+              <span class="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">{{ sharedList.length }}</span>
+            </span>
+            <i class="pi text-xs" [ngClass]="sharedOpen ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
+          </button>
+          <div *ngIf="sharedOpen" class="mt-1 space-y-1">
+            <ng-container *ngFor="let t of sharedList">
+              <div
+                class="group relative flex items-center gap-3 px-3 py-2 rounded-xl transition cursor-pointer hover:bg-gray-50"
+                [style.backgroundColor]="isSelected(t) ? 'var(--p-primary-50, rgba(59,130,246,0.10))' : ''"
+                (click)="select(t)"
+              >
+                <span
+                  class="absolute left-0 top-1 bottom-1 w-1 rounded-full"
+                  [style.backgroundColor]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : 'transparent'"
+                ></span>
+                <i class="text-base shrink-0"
+                   [ngClass]="t.icon || 'pi pi-check-circle'"
+                   [style.color]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : ''"></i>
+                <span class="flex-1 truncate"
+                      [class.font-semibold]="isSelected(t)"
+                      [style.color]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : ''">
+                  {{ getName(t) }}
+                </span>
+                <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition"
+                     (click)="$event.stopPropagation()">
+                  <button pButton type="button" class="p-button-text p-button-sm"
+                          [icon]="t.isFav ? 'pi pi-star-fill' : 'pi pi-star'"
+                          (click)="toggleFav(t)"></button>
+                  @if (!isSelected(t)) {
+                    <button pButton type="button" class="p-button-text p-button-sm"
+                            icon="pi pi-pencil"
+                            (click)="openTemplateEdit(t)"></button>
+                    <button pButton type="button" class="p-button-text p-button-sm p-button-danger"
+                            icon="pi pi-trash"
+                            (click)="confirmDelete(t)"></button>
+                  }
+                </div>
+              </div>
+            </ng-container>
+          </div>
+          <div class="my-3 border-b border-gray-200"></div>
+        </ng-container>
+        <!-- Private -->
+        <ng-container *ngIf="privateList.length > 0">
+          <button
+            type="button"
+            class="w-full flex items-center justify-between px-2 py-2 text-sm font-semibold text-gray-800"
+            (click)="privateOpen = !privateOpen"
+          >
+            <span class="flex items-center gap-2">
+              <i class="pi pi-lock text-gray-600"></i>
+              {{ 'PRIVATE' | translate }}
+              <span class="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">{{ privateList.length }}</span>
+            </span>
+            <i class="pi text-xs" [ngClass]="privateOpen ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
+          </button>
+          <div *ngIf="privateOpen" class="mt-1 space-y-1">
+            <ng-container *ngFor="let t of privateList">
+              <div
+                class="group relative flex items-center gap-3 px-3 py-2 rounded-xl transition cursor-pointer hover:bg-gray-50"
+                [style.backgroundColor]="isSelected(t) ? 'var(--p-primary-50, rgba(59,130,246,0.10))' : ''"
+                (click)="select(t)"
+              >
+                <span
+                  class="absolute left-0 top-1 bottom-1 w-1 rounded-full"
+                  [style.backgroundColor]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : 'transparent'"
+                ></span>
+                <i class="text-base shrink-0"
+                   [ngClass]="t.icon || 'pi pi-check-circle'"
+                   [style.color]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : ''"></i>
+                <span class="flex-1 truncate"
+                      [class.font-semibold]="isSelected(t)"
+                      [style.color]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : ''">
+                  {{ getName(t) }}
+                </span>
+                <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition"
+                     (click)="$event.stopPropagation()">
+                  <button pButton type="button" class="p-button-text p-button-sm"
+                          [icon]="t.isFav ? 'pi pi-star-fill' : 'pi pi-star'"
+                          (click)="toggleFav(t)"></button>
+                  @if (!isSelected(t)) {
+                    <button pButton type="button" class="p-button-text p-button-sm"
+                            icon="pi pi-pencil"
+                            (click)="openTemplateEdit(t)"></button>
+                    <button pButton type="button" class="p-button-text p-button-sm p-button-danger"
+                            icon="pi pi-trash"
+                            (click)="confirmDelete(t)"></button>
+                  }
+                </div>
+              </div>
+            </ng-container>
+          </div>
+        </ng-container>
+      </ng-container>
+    </div>
+  </div>
+</p-drawer>
+<filter-template-editor-dialog
+  [(visible)]="templateEditorVisible"
+  [mode]="templateEditorMode"
+  [model]="templateEditorModel"
+  [filterFields]="filterFields"
+  [moduleName]="moduleName"
+  [apiName]="apiName"
+  [defaultFeature]="defaultFeature"
+  [defaultCategory]="defaultCategory"
+  [defaultPermission]="defaultPermission"
+  [currentUserId]="currentUserId"
+  (saved)="onTemplateSaved($event)">
+</filter-template-editor-dialog>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i6.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: LoadingSkeletonComponent, selector: "app-loading-skeleton", inputs: ["itemsCount"] }, { kind: "component", type: FilterTemplateEditorDialogComponent, selector: "filter-template-editor-dialog", inputs: ["visible", "mode", "model", "filterFields", "apiName", "moduleName", "idField", "defaultFeature", "defaultPermission", "defaultCategory", "dialogMaxWidth", "currentUserId"], outputs: ["visibleChange", "saved"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SavedReportTemplatesDrawerComponent, decorators: [{
@@ -851,292 +851,292 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         FilterTemplateEditorDialogComponent
                     ],
                     providers: [BaseService],
-                    template: `
- <p-drawer
-  [visible]="visible"
-  (visibleChange)="onVisibleChange($event)"
-  [position]="position"
-  [modal]="modal"
-  [dismissible]="dismissable"
-  [closeOnEscape]="closeOnEscape"
-  [blockScroll]="blockScroll"
-  [showCloseIcon]="showCloseIcon"
->
-  <div class="h-full flex flex-col bg-white">
-    <!-- Header -->
-    <div class="sticky top-0 z-10 bg-white border-b border-gray-200 px-4 py-4">
-      <div class="flex items-center gap-3">
-        <div class="w-9 h-9 rounded-xl flex items-center justify-center bg-gray-100 text-gray-700">
-          <i class="pi pi-bookmark"></i>
-        </div>
-        <div class="flex-1 min-w-0">
-          <div class="text-xs text-gray-500">
-            {{ 'TEMPLATES' | translate }}
-          </div>
-          <div class="text-base font-semibold text-gray-900 truncate">
-            {{ selected ? getName(selected) : ('SELECT_TEMPLATE' | translate) }}
-          </div>
-        </div>
-        <button
-          pButton
-          type="button"
-          class="p-button-rounded p-button-sm p-button-text"
-          icon="pi pi-refresh"
-          (click)="refresh()"
-          [disabled]="loading"
-          pTooltip="{{ 'REFRESH' | translate }}"
-          tooltipPosition="bottom"
-        ></button>
-        <button
-          pButton
-          type="button"
-          class="p-button-rounded p-button-sm p-button-primary"
-          icon="pi pi-plus"
-          (click)="openTemplateCreate()"
-          [disabled]="loading"
-          pTooltip="{{ 'COMMON.ADD' | translate }}"
-          tooltipPosition="bottom"
-        ></button>
-      </div>
-      <!-- Search -->
-      <div class="mt-4">
-        <span class="p-input-icon-left w-full">
-          <i class="pi pi-search"></i>
-          <input
-            pInputText
-            class="w-full !rounded-xl"
-            [(ngModel)]="search"
-            [disabled]="loading"
-            [placeholder]="'SEARCH_FOR_A_VIEW' | translate"
-          />
-        </span>
-      </div>
-    </div>
-    <!-- Content -->
-    <div class="flex-1 overflow-auto px-3 py-3">
-      <!-- ✅ Loading -->
-      <div *ngIf="loading" class="py-4">
-         <app-loading-skeleton [itemsCount]="4"></app-loading-skeleton>
-      </div>
-      <!-- ✅ Empty -->
-      <div *ngIf="!loading && filteredAll.length === 0" class="text-sm text-gray-500 text-center py-12">
-        <div class="mx-auto mb-3 w-12 h-12 rounded-2xl bg-gray-100 flex items-center justify-center">
-          <i class="pi pi-inbox text-gray-500"></i>
-        </div>
-        {{ 'NO_DATA_FOUND' | translate }}
-      </div>
-      <!-- ✅ Content when not loading -->
-      <ng-container *ngIf="!loading">
-        <!-- Favorites -->
-        <ng-container *ngIf="favList.length > 0">
-          <button
-            type="button"
-            class="w-full flex items-center justify-between px-2 py-2 text-sm font-semibold text-gray-800"
-            (click)="favOpen = !favOpen"
-          >
-            <span class="flex items-center gap-2">
-              <i class="pi pi-star-fill text-yellow-500"></i>
-              {{ 'FAVOURITES' | translate }}
-              <span class="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">{{ favList.length }}</span>
-            </span>
-            <i class="pi text-xs" [ngClass]="favOpen ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
-          </button>
-          <div *ngIf="favOpen" class="mt-1 space-y-1">
-            <ng-container *ngFor="let t of favList">
-              <div
-                class="group relative flex items-center gap-3 px-3 py-2 rounded-xl transition cursor-pointer
-                       hover:bg-gray-50"
-                [style.backgroundColor]="isSelected(t) ? 'var(--p-primary-50, rgba(59,130,246,0.10))' : ''"
-                (click)="select(t)"
-              >
-                <span
-                  class="absolute left-0 top-1 bottom-1 w-1 rounded-full"
-                  [style.backgroundColor]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : 'transparent'"
-                ></span>
-                <i class="text-base shrink-0"
-                   [ngClass]="t.icon || 'pi pi-check-circle'"
-                   [style.color]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : ''"></i>
-                <span class="flex-1 truncate"
-                      [class.font-semibold]="isSelected(t)"
-                      [style.color]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : ''">
-                  {{ getName(t) }}
-                </span>
-                <!-- Actions -->
-                <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition"
-                     (click)="$event.stopPropagation()">
-                  <button pButton type="button" class="p-button-text p-button-sm"
-                          [icon]="t.isFav ? 'pi pi-star-fill' : 'pi pi-star'"
-                          (click)="toggleFav(t)"></button>
-                  @if (!isSelected(t)) {
-                    <button pButton type="button" class="p-button-text p-button-sm"
-                            icon="pi pi-pencil"
-                            (click)="openTemplateEdit(t)"></button>
-                    <button pButton type="button" class="p-button-text p-button-sm p-button-danger"
-                            icon="pi pi-trash"
-                            (click)="confirmDelete(t)"></button>
-                  }
-                </div>
-              </div>
-            </ng-container>
-          </div>
-          <div class="my-3 border-b border-gray-200"></div>
-        </ng-container>
-        <!-- Shared -->
-        <ng-container *ngIf="sharedList.length > 0">
-          <button
-            type="button"
-            class="w-full flex items-center justify-between px-2 py-2 text-sm font-semibold text-gray-800"
-            (click)="sharedOpen = !sharedOpen"
-          >
-            <span class="flex items-center gap-2">
-              <i class="pi pi-users text-gray-600"></i>
-              {{ 'SHARED' | translate }}
-              <span class="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">{{ sharedList.length }}</span>
-            </span>
-            <i class="pi text-xs" [ngClass]="sharedOpen ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
-          </button>
-          <div *ngIf="sharedOpen" class="mt-1 space-y-1">
-            <ng-container *ngFor="let t of sharedList">
-              <div
-                class="group relative flex items-center gap-3 px-3 py-2 rounded-xl transition cursor-pointer hover:bg-gray-50"
-                [style.backgroundColor]="isSelected(t) ? 'var(--p-primary-50, rgba(59,130,246,0.10))' : ''"
-                (click)="select(t)"
-              >
-                <span
-                  class="absolute left-0 top-1 bottom-1 w-1 rounded-full"
-                  [style.backgroundColor]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : 'transparent'"
-                ></span>
-                <i class="text-base shrink-0"
-                   [ngClass]="t.icon || 'pi pi-check-circle'"
-                   [style.color]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : ''"></i>
-                <span class="flex-1 truncate"
-                      [class.font-semibold]="isSelected(t)"
-                      [style.color]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : ''">
-                  {{ getName(t) }}
-                </span>
-                <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition"
-                     (click)="$event.stopPropagation()">
-                  <button pButton type="button" class="p-button-text p-button-sm"
-                          [icon]="t.isFav ? 'pi pi-star-fill' : 'pi pi-star'"
-                          (click)="toggleFav(t)"></button>
-                  @if (!isSelected(t)) {
-                    <button pButton type="button" class="p-button-text p-button-sm"
-                            icon="pi pi-pencil"
-                            (click)="openTemplateEdit(t)"></button>
-                    <button pButton type="button" class="p-button-text p-button-sm p-button-danger"
-                            icon="pi pi-trash"
-                            (click)="confirmDelete(t)"></button>
-                  }
-                </div>
-              </div>
-            </ng-container>
-          </div>
-          <div class="my-3 border-b border-gray-200"></div>
-        </ng-container>
-        <!-- Private -->
-        <ng-container *ngIf="privateList.length > 0">
-          <button
-            type="button"
-            class="w-full flex items-center justify-between px-2 py-2 text-sm font-semibold text-gray-800"
-            (click)="privateOpen = !privateOpen"
-          >
-            <span class="flex items-center gap-2">
-              <i class="pi pi-lock text-gray-600"></i>
-              {{ 'PRIVATE' | translate }}
-              <span class="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">{{ privateList.length }}</span>
-            </span>
-            <i class="pi text-xs" [ngClass]="privateOpen ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
-          </button>
-          <div *ngIf="privateOpen" class="mt-1 space-y-1">
-            <ng-container *ngFor="let t of privateList">
-              <div
-                class="group relative flex items-center gap-3 px-3 py-2 rounded-xl transition cursor-pointer hover:bg-gray-50"
-                [style.backgroundColor]="isSelected(t) ? 'var(--p-primary-50, rgba(59,130,246,0.10))' : ''"
-                (click)="select(t)"
-              >
-                <span
-                  class="absolute left-0 top-1 bottom-1 w-1 rounded-full"
-                  [style.backgroundColor]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : 'transparent'"
-                ></span>
-                <i class="text-base shrink-0"
-                   [ngClass]="t.icon || 'pi pi-check-circle'"
-                   [style.color]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : ''"></i>
-                <span class="flex-1 truncate"
-                      [class.font-semibold]="isSelected(t)"
-                      [style.color]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : ''">
-                  {{ getName(t) }}
-                </span>
-                <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition"
-                     (click)="$event.stopPropagation()">
-                  <button pButton type="button" class="p-button-text p-button-sm"
-                          [icon]="t.isFav ? 'pi pi-star-fill' : 'pi pi-star'"
-                          (click)="toggleFav(t)"></button>
-                  @if (!isSelected(t)) {
-                    <button pButton type="button" class="p-button-text p-button-sm"
-                            icon="pi pi-pencil"
-                            (click)="openTemplateEdit(t)"></button>
-                    <button pButton type="button" class="p-button-text p-button-sm p-button-danger"
-                            icon="pi pi-trash"
-                            (click)="confirmDelete(t)"></button>
-                  }
-                </div>
-              </div>
-            </ng-container>
-          </div>
-        </ng-container>
-      </ng-container>
-    </div>
-  </div>
-</p-drawer>
-<filter-template-editor-dialog
-  [(visible)]="templateEditorVisible"
-  [mode]="templateEditorMode"
-  [model]="templateEditorModel"
-  [filterFields]="filterFields"
-  [moduleName]="moduleName"
-  [apiName]="apiName"
-  [defaultFeature]="defaultFeature"
-  [defaultCategory]="defaultCategory"
-  [defaultPermission]="defaultPermission"
-  [currentUserId]="currentUserId"
-  (saved)="onTemplateSaved($event)">
-</filter-template-editor-dialog>
+                    template: `
+ <p-drawer
+  [visible]="visible"
+  (visibleChange)="onVisibleChange($event)"
+  [position]="position"
+  [modal]="modal"
+  [dismissible]="dismissable"
+  [closeOnEscape]="closeOnEscape"
+  [blockScroll]="blockScroll"
+  [showCloseIcon]="showCloseIcon"
+>
+  <div class="h-full flex flex-col bg-white">
+    <!-- Header -->
+    <div class="sticky top-0 z-10 bg-white border-b border-gray-200 px-4 py-4">
+      <div class="flex items-center gap-3">
+        <div class="w-9 h-9 rounded-xl flex items-center justify-center bg-gray-100 text-gray-700">
+          <i class="pi pi-bookmark"></i>
+        </div>
+        <div class="flex-1 min-w-0">
+          <div class="text-xs text-gray-500">
+            {{ 'TEMPLATES' | translate }}
+          </div>
+          <div class="text-base font-semibold text-gray-900 truncate">
+            {{ selected ? getName(selected) : ('SELECT_TEMPLATE' | translate) }}
+          </div>
+        </div>
+        <button
+          pButton
+          type="button"
+          class="p-button-rounded p-button-sm p-button-text"
+          icon="pi pi-refresh"
+          (click)="refresh()"
+          [disabled]="loading"
+          pTooltip="{{ 'REFRESH' | translate }}"
+          tooltipPosition="bottom"
+        ></button>
+        <button
+          pButton
+          type="button"
+          class="p-button-rounded p-button-sm p-button-primary"
+          icon="pi pi-plus"
+          (click)="openTemplateCreate()"
+          [disabled]="loading"
+          pTooltip="{{ 'COMMON.ADD' | translate }}"
+          tooltipPosition="bottom"
+        ></button>
+      </div>
+      <!-- Search -->
+      <div class="mt-4">
+        <span class="p-input-icon-left w-full">
+          <i class="pi pi-search"></i>
+          <input
+            pInputText
+            class="w-full !rounded-xl"
+            [(ngModel)]="search"
+            [disabled]="loading"
+            [placeholder]="'SEARCH_FOR_A_VIEW' | translate"
+          />
+        </span>
+      </div>
+    </div>
+    <!-- Content -->
+    <div class="flex-1 overflow-auto px-3 py-3">
+      <!-- ✅ Loading -->
+      <div *ngIf="loading" class="py-4">
+         <app-loading-skeleton [itemsCount]="4"></app-loading-skeleton>
+      </div>
+      <!-- ✅ Empty -->
+      <div *ngIf="!loading && filteredAll.length === 0" class="text-sm text-gray-500 text-center py-12">
+        <div class="mx-auto mb-3 w-12 h-12 rounded-2xl bg-gray-100 flex items-center justify-center">
+          <i class="pi pi-inbox text-gray-500"></i>
+        </div>
+        {{ 'NO_DATA_FOUND' | translate }}
+      </div>
+      <!-- ✅ Content when not loading -->
+      <ng-container *ngIf="!loading">
+        <!-- Favorites -->
+        <ng-container *ngIf="favList.length > 0">
+          <button
+            type="button"
+            class="w-full flex items-center justify-between px-2 py-2 text-sm font-semibold text-gray-800"
+            (click)="favOpen = !favOpen"
+          >
+            <span class="flex items-center gap-2">
+              <i class="pi pi-star-fill text-yellow-500"></i>
+              {{ 'FAVOURITES' | translate }}
+              <span class="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">{{ favList.length }}</span>
+            </span>
+            <i class="pi text-xs" [ngClass]="favOpen ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
+          </button>
+          <div *ngIf="favOpen" class="mt-1 space-y-1">
+            <ng-container *ngFor="let t of favList">
+              <div
+                class="group relative flex items-center gap-3 px-3 py-2 rounded-xl transition cursor-pointer
+                       hover:bg-gray-50"
+                [style.backgroundColor]="isSelected(t) ? 'var(--p-primary-50, rgba(59,130,246,0.10))' : ''"
+                (click)="select(t)"
+              >
+                <span
+                  class="absolute left-0 top-1 bottom-1 w-1 rounded-full"
+                  [style.backgroundColor]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : 'transparent'"
+                ></span>
+                <i class="text-base shrink-0"
+                   [ngClass]="t.icon || 'pi pi-check-circle'"
+                   [style.color]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : ''"></i>
+                <span class="flex-1 truncate"
+                      [class.font-semibold]="isSelected(t)"
+                      [style.color]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : ''">
+                  {{ getName(t) }}
+                </span>
+                <!-- Actions -->
+                <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition"
+                     (click)="$event.stopPropagation()">
+                  <button pButton type="button" class="p-button-text p-button-sm"
+                          [icon]="t.isFav ? 'pi pi-star-fill' : 'pi pi-star'"
+                          (click)="toggleFav(t)"></button>
+                  @if (!isSelected(t)) {
+                    <button pButton type="button" class="p-button-text p-button-sm"
+                            icon="pi pi-pencil"
+                            (click)="openTemplateEdit(t)"></button>
+                    <button pButton type="button" class="p-button-text p-button-sm p-button-danger"
+                            icon="pi pi-trash"
+                            (click)="confirmDelete(t)"></button>
+                  }
+                </div>
+              </div>
+            </ng-container>
+          </div>
+          <div class="my-3 border-b border-gray-200"></div>
+        </ng-container>
+        <!-- Shared -->
+        <ng-container *ngIf="sharedList.length > 0">
+          <button
+            type="button"
+            class="w-full flex items-center justify-between px-2 py-2 text-sm font-semibold text-gray-800"
+            (click)="sharedOpen = !sharedOpen"
+          >
+            <span class="flex items-center gap-2">
+              <i class="pi pi-users text-gray-600"></i>
+              {{ 'SHARED' | translate }}
+              <span class="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">{{ sharedList.length }}</span>
+            </span>
+            <i class="pi text-xs" [ngClass]="sharedOpen ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
+          </button>
+          <div *ngIf="sharedOpen" class="mt-1 space-y-1">
+            <ng-container *ngFor="let t of sharedList">
+              <div
+                class="group relative flex items-center gap-3 px-3 py-2 rounded-xl transition cursor-pointer hover:bg-gray-50"
+                [style.backgroundColor]="isSelected(t) ? 'var(--p-primary-50, rgba(59,130,246,0.10))' : ''"
+                (click)="select(t)"
+              >
+                <span
+                  class="absolute left-0 top-1 bottom-1 w-1 rounded-full"
+                  [style.backgroundColor]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : 'transparent'"
+                ></span>
+                <i class="text-base shrink-0"
+                   [ngClass]="t.icon || 'pi pi-check-circle'"
+                   [style.color]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : ''"></i>
+                <span class="flex-1 truncate"
+                      [class.font-semibold]="isSelected(t)"
+                      [style.color]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : ''">
+                  {{ getName(t) }}
+                </span>
+                <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition"
+                     (click)="$event.stopPropagation()">
+                  <button pButton type="button" class="p-button-text p-button-sm"
+                          [icon]="t.isFav ? 'pi pi-star-fill' : 'pi pi-star'"
+                          (click)="toggleFav(t)"></button>
+                  @if (!isSelected(t)) {
+                    <button pButton type="button" class="p-button-text p-button-sm"
+                            icon="pi pi-pencil"
+                            (click)="openTemplateEdit(t)"></button>
+                    <button pButton type="button" class="p-button-text p-button-sm p-button-danger"
+                            icon="pi pi-trash"
+                            (click)="confirmDelete(t)"></button>
+                  }
+                </div>
+              </div>
+            </ng-container>
+          </div>
+          <div class="my-3 border-b border-gray-200"></div>
+        </ng-container>
+        <!-- Private -->
+        <ng-container *ngIf="privateList.length > 0">
+          <button
+            type="button"
+            class="w-full flex items-center justify-between px-2 py-2 text-sm font-semibold text-gray-800"
+            (click)="privateOpen = !privateOpen"
+          >
+            <span class="flex items-center gap-2">
+              <i class="pi pi-lock text-gray-600"></i>
+              {{ 'PRIVATE' | translate }}
+              <span class="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">{{ privateList.length }}</span>
+            </span>
+            <i class="pi text-xs" [ngClass]="privateOpen ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
+          </button>
+          <div *ngIf="privateOpen" class="mt-1 space-y-1">
+            <ng-container *ngFor="let t of privateList">
+              <div
+                class="group relative flex items-center gap-3 px-3 py-2 rounded-xl transition cursor-pointer hover:bg-gray-50"
+                [style.backgroundColor]="isSelected(t) ? 'var(--p-primary-50, rgba(59,130,246,0.10))' : ''"
+                (click)="select(t)"
+              >
+                <span
+                  class="absolute left-0 top-1 bottom-1 w-1 rounded-full"
+                  [style.backgroundColor]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : 'transparent'"
+                ></span>
+                <i class="text-base shrink-0"
+                   [ngClass]="t.icon || 'pi pi-check-circle'"
+                   [style.color]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : ''"></i>
+                <span class="flex-1 truncate"
+                      [class.font-semibold]="isSelected(t)"
+                      [style.color]="isSelected(t) ? 'var(--p-primary-color, #3b82f6)' : ''">
+                  {{ getName(t) }}
+                </span>
+                <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition"
+                     (click)="$event.stopPropagation()">
+                  <button pButton type="button" class="p-button-text p-button-sm"
+                          [icon]="t.isFav ? 'pi pi-star-fill' : 'pi pi-star'"
+                          (click)="toggleFav(t)"></button>
+                  @if (!isSelected(t)) {
+                    <button pButton type="button" class="p-button-text p-button-sm"
+                            icon="pi pi-pencil"
+                            (click)="openTemplateEdit(t)"></button>
+                    <button pButton type="button" class="p-button-text p-button-sm p-button-danger"
+                            icon="pi pi-trash"
+                            (click)="confirmDelete(t)"></button>
+                  }
+                </div>
+              </div>
+            </ng-container>
+          </div>
+        </ng-container>
+      </ng-container>
+    </div>
+  </div>
+</p-drawer>
+<filter-template-editor-dialog
+  [(visible)]="templateEditorVisible"
+  [mode]="templateEditorMode"
+  [model]="templateEditorModel"
+  [filterFields]="filterFields"
+  [moduleName]="moduleName"
+  [apiName]="apiName"
+  [defaultFeature]="defaultFeature"
+  [defaultCategory]="defaultCategory"
+  [defaultPermission]="defaultPermission"
+  [currentUserId]="currentUserId"
+  (saved)="onTemplateSaved($event)">
+</filter-template-editor-dialog>
   `,
                 }]
         }], propDecorators: { apiName: [{
@@ -1210,15 +1210,15 @@ class ReportTemplatesWrapperComponent {
         this.context.closeTemplates();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ReportTemplatesWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: ReportTemplatesWrapperComponent, isStandalone: true, selector: "app-report-templates-wrapper", ngImport: i0, template: `
-    <saved-report-templates-drawer
-      [visible]="context.templateDrawerVisible()"
-      [filterFields]="context.filters()"
-      [service]="context.moduleName()"
-      [category]="context.category()"
-      [feature]="context.feature()"
-      (templateSelected)="onSelect($event)">
-    </saved-report-templates-drawer>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: ReportTemplatesWrapperComponent, isStandalone: true, selector: "app-report-templates-wrapper", ngImport: i0, template: `
+    <saved-report-templates-drawer
+      [visible]="context.templateDrawerVisible()"
+      [filterFields]="context.filters()"
+      [service]="context.moduleName()"
+      [category]="context.category()"
+      [feature]="context.feature()"
+      (templateSelected)="onSelect($event)">
+    </saved-report-templates-drawer>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SavedReportTemplatesDrawerComponent, selector: "saved-report-templates-drawer", inputs: ["apiName", "module", "service", "category", "feature", "visible", "position", "showCloseIcon", "modal", "dismissable", "closeOnEscape", "blockScroll", "filterFields", "moduleName", "defaultFeature", "defaultCategory", "defaultPermission", "currentUserId"], outputs: ["templateSelected", "edit", "add", "visibleChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ReportTemplatesWrapperComponent, decorators: [{
@@ -1227,15 +1227,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                     selector: 'app-report-templates-wrapper',
                     standalone: true,
                     imports: [CommonModule, SavedReportTemplatesDrawerComponent],
-                    template: `
-    <saved-report-templates-drawer
-      [visible]="context.templateDrawerVisible()"
-      [filterFields]="context.filters()"
-      [service]="context.moduleName()"
-      [category]="context.category()"
-      [feature]="context.feature()"
-      (templateSelected)="onSelect($event)">
-    </saved-report-templates-drawer>
+                    template: `
+    <saved-report-templates-drawer
+      [visible]="context.templateDrawerVisible()"
+      [filterFields]="context.filters()"
+      [service]="context.moduleName()"
+      [category]="context.category()"
+      [feature]="context.feature()"
+      (templateSelected)="onSelect($event)">
+    </saved-report-templates-drawer>
   `
                 }]
         }] });