@es.framework/ng.ui.core 2.0.58 → 2.0.59

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

@@ -1,9 +1,23 @@
 import * as i0 from '@angular/core';
-import { NgModule, inject, EventEmitter, Input, Output, Component } from '@angular/core';
+import { NgModule, inject, EventEmitter, Input, Output, Component, signal, Injectable } from '@angular/core';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { UntypedFormGroup } from '@angular/forms';
-import { BaseService } from '@es.framework/ng.core/services';
+import * as i2 from '@angular/forms';
+import { UntypedFormGroup, FormsModule } from '@angular/forms';
+import { BaseService, SwalService } from '@es.framework/ng.core/services';
 import { GenericDialogComponent } from '@es.framework/ng.ui.core/generic-dialog';
+import * as i7 from '@ngx-translate/core';
+import { TranslateService, TranslateModule } from '@ngx-translate/core';
+import * as i3 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
+import * as i4 from 'primeng/inputtext';
+import { InputTextModule } from 'primeng/inputtext';
+import * as i5 from 'primeng/tooltip';
+import { TooltipModule } from 'primeng/tooltip';
+import * as i6 from 'primeng/drawer';
+import { DrawerModule } from 'primeng/drawer';
+import { finalize, Subject } from 'rxjs';
+import { LoadingSkeletonComponent } from '@es.framework/ng.ui.core/loading-skeletons';
 
 class FilterTemplatesModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FilterTemplatesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -376,11 +390,859 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 type: Input
             }] } });
 
-// export * from './lib/report-templates-drawer.component';
+class SavedReportTemplatesDrawerComponent {
+    svc = inject(BaseService);
+    swal = inject(SwalService);
+    tr = inject(TranslateService);
+    apiName = 'filter-templates';
+    module = 'crm';
+    service = '';
+    category = '';
+    feature = '';
+    templateSelected = new EventEmitter();
+    edit = new EventEmitter();
+    // ✅ جديد
+    add = new EventEmitter();
+    // ✅ التحكم من الأب
+    visible = false;
+    visibleChange = new EventEmitter();
+    // ✅ اختياري: خلّها قابلة للتخصيص من الأب
+    position = 'left';
+    showCloseIcon = true;
+    modal = true; // ✅ يغمّق اللي تحت
+    dismissable = true; // ✅ الضغط خارج/على الماسك يقفل
+    closeOnEscape = true; // ✅ ESC يقفل
+    blockScroll = true; // ✅ يمنع سكرول للخلفية
+    filterFields = [];
+    moduleName = '';
+    defaultFeature = '';
+    defaultCategory = '';
+    defaultPermission = '';
+    currentUserId = null;
+    templateEditorVisible = false;
+    templateEditorMode = 'create';
+    templateEditorModel = {};
+    templates = [];
+    selected = null;
+    loading = false;
+    search = '';
+    favOpen = true;
+    sharedOpen = true;
+    privateOpen = true;
+    ngOnInit() {
+        this.refresh();
+    }
+    refresh() {
+        this.loading = true;
+        this.svc.apiName = this.apiName;
+        this.svc.moduleName = this.module;
+        const filters = {
+            service: this.service,
+            module: this.module,
+            category: this.category,
+        };
+        this.svc.getList({ sorting: 'id DESC', filtering: { filters } })
+            .pipe(finalize(() => (this.loading = false)))
+            .subscribe({
+            next: (res) => {
+                this.templates = res?.items ?? res ?? [];
+                if (this.selected) {
+                    this.selected =
+                        this.templates.find(x => String(x.id) === String(this.selected.id)) ?? null;
+                }
+            },
+            error: () => this.swal.error(this.tr.instant('ERROR_TITLE'), this.tr.instant('ERROR.FAILED_LOAD_DATA')),
+        });
+    }
+    get filteredAll() {
+        const q = (this.search || '').trim().toLowerCase();
+        if (!q)
+            return [...this.templates];
+        return this.templates.filter(t => (this.getName(t) || '').toLowerCase().includes(q));
+    }
+    get favList() {
+        return this.filteredAll.filter(x => !!x.isFav);
+    }
+    get privateList() {
+        return this.filteredAll.filter(x => x.shareScope === 'ME');
+    }
+    get sharedList() {
+        return this.filteredAll.filter(x => x.shareScope !== 'ME' && !x.isFav);
+    }
+    select(t) {
+        if (this.isSelected(t)) {
+            this.clearSelection();
+            return;
+        }
+        this.selected = t;
+        this.templateSelected.emit(t);
+    }
+    isSelected(t) {
+        return this.selected && String(this.selected.id) === String(t.id);
+    }
+    getName(t) {
+        const lang = this.tr.currentLang || 'ar';
+        return (lang.startsWith('ar') ? (t.nameAr || t.nameEn) : (t.nameEn || t.nameAr)) || '';
+    }
+    toggleFav(t) {
+        const payload = { ...t, isFav: !t.isFav };
+        this.svc.update(String(t.id), payload).subscribe({
+            next: (u) => (t.isFav = u?.isFav ?? payload.isFav),
+            error: () => this.swal.error(this.tr.instant('ERROR_TITLE'), this.tr.instant('OPERATION_FAILED')),
+        });
+    }
+    confirmDelete(t) {
+        this.swal.confirm(this.tr.instant('DELETE_CONFIRM_TITLE'), this.tr.instant('DELETE_CONFIRM_MESSAGE'), this.tr.instant('COMMON.DELETE')).then((r) => {
+            if (!r?.isConfirmed)
+                return;
+            this.deleteTemplate(t);
+        });
+    }
+    deleteTemplate(t) {
+        // مهم: نفس إعدادات الاستدعاءات الثانية
+        this.svc.apiName = this.apiName;
+        this.svc.moduleName = this.module;
+        // ✅ استدعاء Endpoint الحذف
+        // ملاحظة: اسم الميثود يعتمد على BaseService عندكم:
+        // غالباً delete(id) أو remove(id)
+        const id = String(t.id);
+        this.svc.delete(id).subscribe({
+            next: () => {
+                // حدّث القائمة محلياً
+                this.templates = this.templates.filter(x => String(x.id) !== id);
+                // لو المحذوف هو المحدد
+                if (this.selected && String(this.selected.id) === id) {
+                    this.selected = null;
+                    this.templateSelected.emit(null);
+                }
+                this.swal.toast(this.tr.instant('RECORD_DELETED_SUCCESSFULLY'));
+            },
+            error: () => this.swal.error(this.tr.instant('ERROR_TITLE'), this.tr.instant('OPERATION_FAILED')),
+        });
+    }
+    onVisibleChange(v) {
+        this.visible = v;
+        this.visibleChange.emit(v);
+    }
+    clearSelection() {
+        this.selected = null;
+        this.templateSelected.emit(null); // ✅ يبلغ الأب: ما عاد فيه قالب
+    }
+    openTemplateCreate() {
+        this.templateEditorMode = 'create';
+        this.templateEditorModel = {
+            isActive: true,
+            shareScope: 'ALL',
+        };
+        this.templateEditorVisible = true;
+    }
+    openTemplateEdit(t) {
+        this.templateEditorMode = 'edit';
+        this.templateEditorModel = { ...t };
+        this.templateEditorVisible = true;
+    }
+    onTemplateSaved(saved) {
+        this.refresh(); // ✅ هو نفسه يحدث القائمة
+        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>
+
+
+  `, 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: [{
+            type: Component,
+            args: [{
+                    selector: 'saved-report-templates-drawer',
+                    standalone: true,
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        TranslateModule,
+                        ButtonModule,
+                        InputTextModule,
+                        TooltipModule,
+                        DrawerModule,
+                        LoadingSkeletonComponent,
+                        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>
+
+
+  `,
+                }]
+        }], propDecorators: { apiName: [{
+                type: Input
+            }], module: [{
+                type: Input
+            }], service: [{
+                type: Input
+            }], category: [{
+                type: Input
+            }], feature: [{
+                type: Input
+            }], templateSelected: [{
+                type: Output
+            }], edit: [{
+                type: Output
+            }], add: [{
+                type: Output
+            }], visible: [{
+                type: Input
+            }], visibleChange: [{
+                type: Output
+            }], position: [{
+                type: Input
+            }], showCloseIcon: [{
+                type: Input
+            }], modal: [{
+                type: Input
+            }], dismissable: [{
+                type: Input
+            }], closeOnEscape: [{
+                type: Input
+            }], blockScroll: [{
+                type: Input
+            }], filterFields: [{
+                type: Input
+            }], moduleName: [{
+                type: Input
+            }], defaultFeature: [{
+                type: Input
+            }], defaultCategory: [{
+                type: Input
+            }], defaultPermission: [{
+                type: Input
+            }], currentUserId: [{
+                type: Input
+            }] } });
+
+class CrudContextService {
+    // استخدام Signals لأداء أسرع
+    moduleName = signal('', ...(ngDevMode ? [{ debugName: "moduleName" }] : []));
+    category = signal('', ...(ngDevMode ? [{ debugName: "category" }] : []));
+    feature = signal('', ...(ngDevMode ? [{ debugName: "feature" }] : []));
+    filters = signal([], ...(ngDevMode ? [{ debugName: "filters" }] : []));
+    templateDrawerVisible = signal(false, ...(ngDevMode ? [{ debugName: "templateDrawerVisible" }] : []));
+    // حدث يطلق عند اختيار قالب
+    templateSelected$ = new Subject();
+    openTemplates() { this.templateDrawerVisible.set(true); }
+    closeTemplates() { this.templateDrawerVisible.set(false); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CrudContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CrudContextService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CrudContextService, decorators: [{
+            type: Injectable
+        }] });
+
+class ReportTemplatesWrapperComponent {
+    context = inject(CrudContextService); // يحصل على نفس النسخة الخاصة بالجدول الأب
+    onSelect(template) {
+        this.context.templateSelected$.next(template);
+        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>
+  `, 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: [{
+            type: Component,
+            args: [{
+                    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>
+  `
+                }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { FilterTemplateEditorDialogComponent, FilterTemplateFormFields, FilterTemplatesModule };
+export { FilterTemplateEditorDialogComponent, FilterTemplateFormFields, FilterTemplatesModule, ReportTemplatesWrapperComponent, SavedReportTemplatesDrawerComponent };
 //# sourceMappingURL=es.framework-ng.ui.core-filter-templates.mjs.map