@nettyapps/ntybase 21.0.34 → 21.0.35-beta.10

package/fesm2022/nettyapps-ntybase.mjs

@@ -1,14 +1,13 @@
 import * as i0 from '@angular/core';
-import { Component, Injectable, inject, NgModule, signal, input, output, computed, effect, ViewChild, model, InjectionToken, Optional, Inject, Input } from '@angular/core';
-import * as i1$2 from '@angular/common/http';
+import { Component, Injectable, inject, NgModule, signal, input, output, computed, linkedSignal, effect, ViewChild, model, Input, InjectionToken, Optional, Inject } from '@angular/core';
+import * as i1$3 from '@angular/common/http';
 import { HttpErrorResponse, HttpResponse, HTTP_INTERCEPTORS, HttpClient, HttpHeaders } from '@angular/common/http';
-import { of, throwError, lastValueFrom, map, catchError as catchError$1, Subject, finalize, take as take$1, takeUntil } from 'rxjs';
+import { of, throwError, Subject, lastValueFrom, map, catchError as catchError$1, finalize, take as take$1, takeUntil } from 'rxjs';
 import { catchError, map as map$1, take, finalize as finalize$1 } from 'rxjs/operators';
 import { Router, ActivatedRoute } from '@angular/router';
 import * as i2$1 from '@nettyapps/ntycontract';
-import { EnvironmentProxy } from '@nettyapps/ntycontract';
+import { EnvironmentProxy, injectNettyStandardProxy, injectNettyStandardLogProxy, NettyStandardFilterProxy } from '@nettyapps/ntycontract';
 import { DatePipe, CommonModule, Location, DecimalPipe } from '@angular/common';
-import { toSignal } from '@angular/core/rxjs-interop';
 import { Buffer } from 'buffer';
 import * as i1 from '@angular/material/dialog';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/dialog';
@@ -16,24 +15,26 @@ import * as i3 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
 import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i1$1 from '@angular/material/snack-bar';
+import * as i1$2 from '@angular/material/snack-bar';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
-import * as i3$1 from '@ngx-translate/core';
+import * as i1$1 from '@ngx-translate/core';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { Mutex } from 'async-mutex';
-import { ModuleRegistry, AllCommunityModule, ClientSideRowModelModule, HighlightChangesModule, themeQuartz } from 'ag-grid-community';
-import { StatusBarModule, ClipboardModule, ExcelExportModule, ColumnMenuModule, ContextMenuModule, CellSelectionModule, RowSelectionModule } from 'ag-grid-enterprise';
+import { themeQuartz, StatusBarModule, ClipboardModule, ExcelExportModule, ColumnMenuModule, ContextMenuModule, CellSelectionModule, RowSelectionModule } from 'ag-grid-enterprise';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { ModuleRegistry, AllCommunityModule, ClientSideRowModelModule, HighlightChangesModule } from 'ag-grid-community';
 import * as i2$2 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i2$3 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as XLSX from 'xlsx';
 import { I18nService } from '@nettyapps/ntyi18n';
-import * as i1$3 from '@angular/forms';
+import * as i1$4 from '@angular/forms';
 import { FormBuilder, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i3$2 from '@angular/material/input';
+import * as i3$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { NettyEnumStorageProxy } from '@nettyapps/ntyui';
 
 class Ntybase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Ntybase, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -310,84 +311,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }] });
 
-class NettyHelper {
-    /**
-     * Returns null if fields are equal otherwise return second field
-     * @param firstField
-     * @param secondField
-     * @returns
-     */
-    static difference(firstField, secondField) {
-        if (firstField != secondField) {
-            return secondField;
-        }
-        return null;
-    }
-    /**
-     * Returns null if fields are equal otherwise return second field
-     * @param firstField
-     * @param secondField
-     * @param format
-     * @returns
-     */
-    static dateDifference(firstField, secondField, format) {
-        let culture = localStorage.getItem('languageApiCode') ?? 'tr-TR';
-        let datePipe = new DatePipe(culture);
-        if (datePipe.transform(firstField, format) !=
-            datePipe.transform(secondField, format)) {
-            return secondField;
-        }
-        return null;
-    }
-}
-
-class CurrentUserPreference {
-    coid = null;
-    nettyUserPreferenceGUID = null;
-    nettyUserGUID = null;
-    nettyUserName = null;
-    nettyUserFullName = null;
-    nettyPreferenceType = null;
-    nettyPreferenceData = null;
-    init() {
-        this.coid = null;
-        this.nettyUserPreferenceGUID = null;
-        this.nettyUserGUID = null;
-        this.nettyUserName = '';
-        this.nettyUserFullName = '';
-        this.nettyPreferenceType = '';
-        this.nettyPreferenceData = '';
-    }
-    initParameter(parameters) {
-        if (parameters == null || parameters == undefined) {
-            this.init();
-            return;
-        }
-        this.coid = parameters.coid;
-        this.nettyUserPreferenceGUID = parameters.nettyUserPreferenceGUID;
-        this.nettyUserGUID = parameters.nettyUserGUID;
-        this.nettyUserName = parameters.nettyUserName;
-        this.nettyUserFullName = parameters.nettyUserFullName;
-        this.nettyPreferenceType = parameters.nettyPreferenceType;
-        this.nettyPreferenceData = parameters.nettyPreferenceData;
-    }
-    compare(record) {
-        let newRecord = new CurrentUserPreference();
-        newRecord.init();
-        newRecord.coid = record.coid;
-        newRecord.nettyUserPreferenceGUID = record.nettyUserPreferenceGUID;
-        newRecord.nettyUserGUID = NettyHelper.difference(this.nettyUserGUID, record.nettyUserGUID);
-        newRecord.nettyPreferenceType = NettyHelper.difference(this.nettyPreferenceType, record.nettyPreferenceType);
-        newRecord.nettyPreferenceData = NettyHelper.difference(this.nettyPreferenceData, record.nettyPreferenceData);
-        return newRecord;
-    }
-}
-
 class ConfirmDialog {
     dialogRef = inject((MatDialogRef));
     data = inject(MAT_DIALOG_DATA);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ConfirmDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ConfirmDialog, isStandalone: true, selector: "ntybase-confirm-dialog", ngImport: i0, template: "<div class=\"dialog-container\">\n  <h2 mat-dialog-title class=\"dialog-title\">\n    <mat-icon color=\"warn\" class=\"warning-icon\">warning</mat-icon>\n    <span>{{data.title}}</span>\n  </h2>\n\n  <mat-divider class=\"divider\"></mat-divider>\n\n  <mat-dialog-content class=\"dialog-content\">\n    <p class=\"message\">{{data.message}}</p>\n  </mat-dialog-content>\n\n  <mat-dialog-actions align=\"end\" class=\"dialog-actions\">\n    <button mat-stroked-button [mat-dialog-close]=\"false\" class=\"btn-cancel\">\n      {{'@btnCancel' | translate}}\n    </button>\n    <button\n      mat-flat-button\n      color=\"warn\"\n      [mat-dialog-close]=\"true\"\n      class=\"btn-ok\"\n    >\n      {{'@btnOK' | translate}}\n    </button>\n  </mat-dialog-actions>\n</div>\n", styles: [".dialog-container{display:flex;flex-direction:column;min-width:400px;max-width:90vw;padding:24px;border-radius:12px!important}.dialog-title{display:flex;align-items:center;margin:0 0 12px;padding:0;color:var(--mat-sys-primary)}.dialog-title span{margin-left:8px}.warning-icon{color:var(--mat-sys-primary);transform:scale(1.2)}.divider{margin:8px 0 16px;border-top-color:var(--mat-sys-primary)}.dialog-content{padding:8px 0 24px;margin:0;color:var(--mat-sys-primary);line-height:1.6}.dialog-content .message{margin:0;white-space:pre-wrap}.dialog-actions{padding:16px 0 0;margin:0;gap:8px}.btn-ok{padding:8px 16px;border-radius:6px;font-weight:500;background-color:var(--mat-sys-primary);color:var(--mat-sys-primary-container)}.btn-cancel{padding:8px 16px;border-radius:6px;color:var(--mat-sys-secondary-container);background-color:var(--mat-sys-secondary)}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ConfirmDialog, isStandalone: true, selector: "ntybase-confirm-dialog", ngImport: i0, template: "<div class=\"dialog-container\">\n  <h2 mat-dialog-title class=\"dialog-title\">\n    <mat-icon color=\"warn\" class=\"warning-icon\">warning</mat-icon>\n    <span>{{data.title}}</span>\n  </h2>\n\n  <mat-divider class=\"divider\"></mat-divider>\n\n  <mat-dialog-content class=\"dialog-content\">\n    <p class=\"message\">{{data.message}}</p>\n  </mat-dialog-content>\n\n  <mat-dialog-actions align=\"end\" class=\"dialog-actions\">\n    <button mat-stroked-button [mat-dialog-close]=\"false\" class=\"btn-cancel\">\n      {{'@btnCancel' | translate}}\n    </button>\n    <button\n      mat-flat-button\n      color=\"warn\"\n      [mat-dialog-close]=\"true\"\n      class=\"btn-ok\"\n    >\n      {{'@btnOK' | translate}}\n    </button>\n  </mat-dialog-actions>\n</div>\n", styles: [".dialog-container{display:flex;flex-direction:column;min-width:400px;max-width:90vw;padding:24px;border-radius:12px!important}.dialog-title{display:flex;align-items:center;margin:0 0 12px;padding:0;color:var(--mat-sys-primary)}.dialog-title span{margin-left:8px}.warning-icon{color:var(--mat-sys-primary);transform:scale(1.2)}.divider{margin:8px 0 16px;border-top-color:var(--mat-sys-primary)}.dialog-content{padding:8px 0 24px;margin:0;color:var(--mat-sys-primary);line-height:1.6}.dialog-content .message{margin:0;white-space:pre-wrap}.dialog-actions{padding:16px 0 0;margin:0;gap:8px}.btn-ok{padding:8px 16px;border-radius:6px;font-weight:500;background-color:var(--mat-sys-primary);color:var(--mat-sys-primary-container)}.btn-cancel{padding:8px 16px;border-radius:6px;color:var(--mat-sys-secondary-container);background-color:var(--mat-sys-secondary)}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ConfirmDialog, decorators: [{
             type: Component,
@@ -404,7 +332,7 @@ class ErrorAlert {
     dialogRef = inject((MatDialogRef));
     data = inject(MAT_DIALOG_DATA);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ErrorAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ErrorAlert, isStandalone: true, selector: "ntybase-error-alert", ngImport: i0, template: "<div class=\"error-dialog-container\">\n  <div class=\"header\">\n    <mat-icon color=\"error\">error_outline</mat-icon>\n    <h2 class=\"error-title\">{{ data.title }}</h2>\n  </div>\n\n  <div class=\"error-content\">\n    <p>{{ data.message }}</p>\n  </div>\n\n  <mat-dialog-actions class=\"dialog-actions\">\n    <button mat-flat-button [mat-dialog-close]=\"true\" class=\"btn-ok\">\n      {{'@btnOK' | translate}}\n    </button>\n  </mat-dialog-actions>\n</div>\n", styles: [".error-dialog-container{padding:40px 32px;text-align:center;min-width:380px;max-width:450px;background:var(--mat-sys-primary);border-radius:20px;box-shadow:0 15px 35px #00000012}.error-dialog-container .header{display:flex;flex-direction:column;align-items:center;gap:12px}.error-dialog-container .header mat-icon{font-size:52px;width:52px;height:52px;color:var(--mat-sys-inverse-primary);margin-bottom:8px}.error-dialog-container .header .error-title{margin:0;font-size:1.4rem;font-weight:700;color:var(--mat-sys-surface);letter-spacing:-.02em}.error-dialog-container .error-content{margin:24px 0 32px;font-size:1rem;line-height:1.6;color:var(--mat-sys-surface)}.error-dialog-container .dialog-actions{display:flex;justify-content:center;padding:0;margin:0}.error-dialog-container .btn-ok{min-width:120px;padding:12px 24px;font-weight:600;font-size:1rem;border-radius:10px;background:var(--mat-sys-inverse-primary);color:var(--mat-sys-primary);border:none;cursor:pointer;transition:all .2s ease}.error-dialog-container .btn-ok:hover{background:var(--mat-sys-inverse-primary);opacity:.9;box-shadow:0 5px 15px #0000001a}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ErrorAlert, isStandalone: true, selector: "ntybase-error-alert", ngImport: i0, template: "<div class=\"error-dialog-container\">\n  <div class=\"header\">\n    <mat-icon color=\"error\">error_outline</mat-icon>\n    <h2 class=\"error-title\">{{ data.title }}</h2>\n  </div>\n\n  <div class=\"error-content\">\n    <p>{{ data.message }}</p>\n  </div>\n\n  <mat-dialog-actions class=\"dialog-actions\">\n    <button mat-flat-button [mat-dialog-close]=\"true\" class=\"btn-ok\">\n      {{'@btnOK' | translate}}\n    </button>\n  </mat-dialog-actions>\n</div>\n", styles: [".error-dialog-container{padding:40px 32px;text-align:center;min-width:380px;max-width:450px;background:var(--mat-sys-primary);border-radius:20px;box-shadow:0 15px 35px #00000012}.error-dialog-container .header{display:flex;flex-direction:column;align-items:center;gap:12px}.error-dialog-container .header mat-icon{font-size:52px;width:52px;height:52px;color:var(--mat-sys-inverse-primary);margin-bottom:8px}.error-dialog-container .header .error-title{margin:0;font-size:1.4rem;font-weight:700;color:var(--mat-sys-surface);letter-spacing:-.02em}.error-dialog-container .error-content{margin:24px 0 32px;font-size:1rem;line-height:1.6;color:var(--mat-sys-surface)}.error-dialog-container .dialog-actions{display:flex;justify-content:center;padding:0;margin:0}.error-dialog-container .btn-ok{min-width:120px;padding:12px 24px;font-weight:600;font-size:1rem;border-radius:10px;background:var(--mat-sys-inverse-primary);color:var(--mat-sys-primary);border:none;cursor:pointer;transition:all .2s ease}.error-dialog-container .btn-ok:hover{background:var(--mat-sys-inverse-primary);opacity:.9;box-shadow:0 5px 15px #0000001a}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ErrorAlert, decorators: [{
             type: Component,
@@ -484,7 +412,7 @@ class AlertService {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AlertService, deps: [{ token: i1$1.MatSnackBar }, { token: i1.MatDialog }, { token: i3$1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AlertService, deps: [{ token: i1$2.MatSnackBar }, { token: i1.MatDialog }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AlertService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AlertService, decorators: [{
@@ -492,125 +420,321 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1$1.MatSnackBar }, { type: i1.MatDialog }, { type: i3$1.TranslateService }] });
+        }], ctorParameters: () => [{ type: i1$2.MatSnackBar }, { type: i1.MatDialog }, { type: i1$1.TranslateService }] });
 
-class CommonService {
-    // Services
-    router = inject(Router);
-    location = inject(Location);
-    datePipe = inject(DatePipe);
-    decimalPipe = inject(DecimalPipe);
+class NettyAppsBase {
+    // ---------------------------------
+    // --- SERVICES                  ---
+    // ---------------------------------
     alertService = inject(AlertService);
-    translate = inject(TranslateService);
-    dialog = inject(MatDialog);
-    // Right sidenav
-    rightSidenavOpen = signal(false, ...(ngDevMode ? [{ debugName: "rightSidenavOpen" }] : []));
-    toggleRightSidenav(open) {
-        this.rightSidenavOpen.set(open);
-    }
+    translateService = inject(TranslateService);
+    // ---------------------------------
+    // --- DOWNLOAD METHODS          ---
+    // ---------------------------------
     /**
-     * Normalizes Turkish text for search and comparison operations by converting
-     * Turkish special characters to their English equivalents and lowercasing.
+     * Download the given base64Encoded data as file
      *
+     * @param base64Data: base64 encoded data
+     * @param fileName: filename to download
      */
-    normalizeTurkish(text) {
-        return text
-            .toLocaleLowerCase('tr-TR')
-            .replace(/[ıİ]/g, 'i')
-            .replace(/[ğĞ]/g, 'g')
-            .replace(/[üÜ]/g, 'u')
-            .replace(/[şŞ]/g, 's')
-            .replace(/[öÖ]/g, 'o')
-            .replace(/[çÇ]/g, 'c');
-    }
-    /**
-     * Gets the clean URL path without fragments or query params
-     */
-    getCleanUrlPath() {
-        const tree = this.router.parseUrl(this.router.url);
-        const segments = tree.root.children['primary']?.segments || [];
-        if (segments.length >= 2) {
-            return segments
-                .slice(0, 2)
-                .map((s) => s.path)
-                .join('/');
+    downloadFile(base64Data, fileName) {
+        if (base64Data == null) {
+            return;
         }
-        return '/';
-    }
-    /**
-     * Clears the right sidenav outlet and resets the UI state.
-     * Removes the right sidenav route while keeping the main content and query parameters.
-     * Also collapses the sidenav and closes any open dialogs.
-     */
-    clearOutlet() {
-        const currentUrl = this.router.parseUrl(this.router.url);
-        const primaryOutlet = currentUrl.root.children['primary'];
-        const rightSidenavOutlet = currentUrl.root.children['rightSidenav'];
-        if (rightSidenavOutlet ||
-            currentUrl.queryParams['parameters'] ||
-            currentUrl.queryParams['type']) {
-            this.router.navigate([
-                {
-                    outlets: {
-                        rightSidenav: null,
-                        primary: primaryOutlet ? primaryOutlet.toString() : null,
-                    },
-                },
-            ], {
-                queryParams: {},
-                queryParamsHandling: '',
-                replaceUrl: true,
-            });
+        if (fileName == null) {
+            return;
         }
-        this.toggleRightSidenav(false);
-        this.dialog.closeAll();
-    }
-    ngOnDestroy() {
-        this.clearOutlet();
+        // Check if header is present
+        if (!base64Data.startsWith('data:')) {
+            console.error('Provided data is not in base64 format (missing header)');
+            return;
+        }
+        const contentType = base64Data.split(';')[0].split(':')[1];
+        const byteCharacters = atob(base64Data.split(',')[1]);
+        const byteArrays = [];
+        for (let i = 0; i < byteCharacters.length; i++) {
+            const byteArray = byteCharacters.charCodeAt(i);
+            byteArrays.push(byteArray);
+        }
+        const byteArray = new Uint8Array(byteArrays);
+        const blob = new Blob([byteArray], { type: contentType });
+        const link = document.createElement('a');
+        link.href = URL.createObjectURL(blob);
+        link.download = fileName;
+        link.click();
     }
-    /** Merge columns with the given seperator
+    /** Download the given base64Endoced data as text file
      *
-     * @param columns string array to merge
-     * @param seperator seperator for the array. space if null
-     * @returns merged string
+     * @param base64EncodedFileData
+     * @param fileName
      */
-    mergeColumns(columns, seperator = ' ') {
-        console.log('mergeColumns', columns);
-        let result = '';
-        columns.forEach((column) => {
-            if (!(column == undefined || column == null)) {
-                if (result.length > 0) {
-                    result += seperator;
-                }
-                result += column.trim();
-            }
-        });
-        return result.trim();
+    downloadTextFile(base64EncodedFileData, fileName) {
+        // Check if the data has a prefix like "data:application/pdf;base64,"
+        if (base64EncodedFileData == null) {
+            return;
+        }
+        if (fileName == null) {
+            return;
+        }
+        let _data = base64EncodedFileData;
+        const prefix = 'data:';
+        if (_data.startsWith(prefix)) {
+            // Remove the prefix
+            _data = _data.slice(_data.indexOf(',') + 1);
+        }
+        // Convert the base64 data to a Uint8Array
+        const textData = Buffer.from(_data ?? '', 'base64').toString();
+        this.downloadTextFileNotEncoded(textData, fileName);
     }
-    /** Go back to the last page or close the tab
+    /** Save the given text as a text file
      *
+     * @param fileData
+     * @param fileName
      */
-    goBack() {
-        if (!document.referrer) {
-            this.location.back();
+    downloadTextFileNotEncoded(fileData, fileName) {
+        if (fileData == null) {
+            return;
         }
-        else {
-            window.close();
+        if (fileName == null) {
+            return;
         }
+        // Create a Blob from the Text
+        const blob = new Blob([fileData], { type: 'text/plain' });
+        // Create a download link
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        document.body.appendChild(a);
+        a.style.display = 'none';
+        a.href = url;
+        a.download = fileName ?? 'filename';
+        // Trigger the download
+        a.click();
+        // Clean up
+        window.URL.revokeObjectURL(url);
+        document.body.removeChild(a);
     }
-    // General Functions
-    //--------------------------------------
-    /** Delay for the given duration
-     *
-     * @param ms wait duration in ms
-     * @returns promise that waits for the duration
+    /**
+     * Download file where the data is provided as blob
+     * @param data - Array Buffer data
+     * @param type - type of the document.
      */
-    delay(ms) {
-        return new Promise((resolve) => setTimeout(resolve, ms));
-    }
-    // Base64 Functions
-    //--------------------------------------
-    /** Convert string to base64
+    downloadBlobFile(data, type, fileName) {
+        let blob = new Blob([data], { type: type });
+        let downloadLink = document.createElement('a');
+        downloadLink.href = window.URL.createObjectURL(blob);
+        downloadLink.setAttribute('download', fileName);
+        document.body.appendChild(downloadLink);
+        downloadLink.click();
+        downloadLink.parentNode?.removeChild(downloadLink);
+    }
+    // ---------------------------------
+    // --- INTERFACE IMPLEMENTATIONS ---
+    // ---------------------------------
+    onDestroy$ = new Subject();
+    ngOnDestroy() {
+        //Called once, before the instance is destroyed.
+        //Add 'implements OnDestroy' to the class.
+        this.onDestroy$.next();
+        this.onDestroy$.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NettyAppsBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: NettyAppsBase, isStandalone: true, selector: "ntybase-netty-apps-base", ngImport: i0, template: ``, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NettyAppsBase, decorators: [{
+            type: Component,
+            args: [{ selector: 'ntybase-netty-apps-base', imports: [], template: `` }]
+        }] });
+
+class NettyHelper {
+    /**
+     * Returns null if fields are equal otherwise return second field
+     * @param firstField
+     * @param secondField
+     * @returns
+     */
+    static difference(firstField, secondField) {
+        if (firstField != secondField) {
+            return secondField;
+        }
+        return null;
+    }
+    /**
+     * Returns null if fields are equal otherwise return second field
+     * @param firstField
+     * @param secondField
+     * @param format
+     * @returns
+     */
+    static dateDifference(firstField, secondField, format) {
+        let culture = localStorage.getItem('languageApiCode') ?? 'tr-TR';
+        let datePipe = new DatePipe(culture);
+        if (datePipe.transform(firstField, format) !=
+            datePipe.transform(secondField, format)) {
+            return secondField;
+        }
+        return null;
+    }
+}
+
+class CurrentUserPreference {
+    coid = null;
+    nettyUserPreferenceGUID = null;
+    nettyUserGUID = null;
+    nettyUserName = null;
+    nettyUserFullName = null;
+    nettyPreferenceType = null;
+    nettyPreferenceData = null;
+    init() {
+        this.coid = null;
+        this.nettyUserPreferenceGUID = null;
+        this.nettyUserGUID = null;
+        this.nettyUserName = '';
+        this.nettyUserFullName = '';
+        this.nettyPreferenceType = '';
+        this.nettyPreferenceData = '';
+    }
+    initParameter(parameters) {
+        if (parameters == null || parameters == undefined) {
+            this.init();
+            return;
+        }
+        this.coid = parameters.coid;
+        this.nettyUserPreferenceGUID = parameters.nettyUserPreferenceGUID;
+        this.nettyUserGUID = parameters.nettyUserGUID;
+        this.nettyUserName = parameters.nettyUserName;
+        this.nettyUserFullName = parameters.nettyUserFullName;
+        this.nettyPreferenceType = parameters.nettyPreferenceType;
+        this.nettyPreferenceData = parameters.nettyPreferenceData;
+    }
+    compare(record) {
+        let newRecord = new CurrentUserPreference();
+        newRecord.init();
+        newRecord.coid = record.coid;
+        newRecord.nettyUserPreferenceGUID = record.nettyUserPreferenceGUID;
+        newRecord.nettyUserGUID = NettyHelper.difference(this.nettyUserGUID, record.nettyUserGUID);
+        newRecord.nettyPreferenceType = NettyHelper.difference(this.nettyPreferenceType, record.nettyPreferenceType);
+        newRecord.nettyPreferenceData = NettyHelper.difference(this.nettyPreferenceData, record.nettyPreferenceData);
+        return newRecord;
+    }
+}
+
+class CommonService {
+    // Services
+    router = inject(Router);
+    location = inject(Location);
+    datePipe = inject(DatePipe);
+    decimalPipe = inject(DecimalPipe);
+    alertService = inject(AlertService);
+    translate = inject(TranslateService);
+    dialog = inject(MatDialog);
+    // Right sidenav
+    rightSidenavOpen = signal(false, ...(ngDevMode ? [{ debugName: "rightSidenavOpen" }] : []));
+    toggleRightSidenav(open) {
+        this.rightSidenavOpen.set(open);
+    }
+    /**
+     * Normalizes Turkish text for search and comparison operations by converting
+     * Turkish special characters to their English equivalents and lowercasing.
+     *
+     */
+    normalizeTurkish(text) {
+        return text
+            .toLocaleLowerCase('tr-TR')
+            .replace(/[ıİ]/g, 'i')
+            .replace(/[ğĞ]/g, 'g')
+            .replace(/[üÜ]/g, 'u')
+            .replace(/[şŞ]/g, 's')
+            .replace(/[öÖ]/g, 'o')
+            .replace(/[çÇ]/g, 'c');
+    }
+    /**
+     * Gets the clean URL path without fragments or query params
+     */
+    getCleanUrlPath() {
+        const tree = this.router.parseUrl(this.router.url);
+        const segments = tree.root.children['primary']?.segments || [];
+        if (segments.length >= 2) {
+            return segments
+                .slice(0, 2)
+                .map((s) => s.path)
+                .join('/');
+        }
+        return '/';
+    }
+    /**
+     * Clears the right sidenav outlet and resets the UI state.
+     * Removes the right sidenav route while keeping the main content and query parameters.
+     * Also collapses the sidenav and closes any open dialogs.
+     */
+    clearOutlet() {
+        const currentUrl = this.router.parseUrl(this.router.url);
+        const primaryOutlet = currentUrl.root.children['primary'];
+        const rightSidenavOutlet = currentUrl.root.children['rightSidenav'];
+        if (rightSidenavOutlet ||
+            currentUrl.queryParams['parameters'] ||
+            currentUrl.queryParams['type']) {
+            this.router.navigate([
+                {
+                    outlets: {
+                        rightSidenav: null,
+                        primary: primaryOutlet ? primaryOutlet.toString() : null,
+                    },
+                },
+            ], {
+                queryParams: {},
+                queryParamsHandling: '',
+                replaceUrl: true,
+            });
+        }
+        this.toggleRightSidenav(false);
+        this.dialog.closeAll();
+    }
+    ngOnDestroy() {
+        this.clearOutlet();
+    }
+    /** Merge columns with the given seperator
+     *
+     * @param columns string array to merge
+     * @param seperator seperator for the array. space if null
+     * @returns merged string
+     */
+    mergeColumns(columns, seperator = ' ') {
+        console.log('mergeColumns', columns);
+        let result = '';
+        columns.forEach((column) => {
+            if (!(column == undefined || column == null)) {
+                if (result.length > 0) {
+                    result += seperator;
+                }
+                result += column.trim();
+            }
+        });
+        return result.trim();
+    }
+    /** Go back to the last page or close the tab
+     *
+     */
+    goBack() {
+        if (!document.referrer) {
+            this.location.back();
+        }
+        else {
+            window.close();
+        }
+    }
+    // General Functions
+    //--------------------------------------
+    /** Delay for the given duration
+     *
+     * @param ms wait duration in ms
+     * @returns promise that waits for the duration
+     */
+    delay(ms) {
+        return new Promise((resolve) => setTimeout(resolve, ms));
+    }
+    // Base64 Functions
+    //--------------------------------------
+    /** Convert string to base64
      *
      * @param stringForConversion
      * @returns
@@ -751,6 +875,7 @@ class NettyAgGridService {
     nettyAlertService = inject(AlertService);
     environmentProxy = inject(EnvironmentProxy);
     commonService = inject(CommonService);
+    translateService = inject(TranslateService);
     constructor() {
         this.userPreferenceLock = new Mutex();
     }
@@ -976,447 +1101,422 @@ class NettyAgGridService {
             },
         ];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NettyAgGridService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NettyAgGridService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NettyAgGridService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
-
-class SecurityDto {
-    coid = null;
-    userGUID = null;
-    application = '';
-    formCode = '';
-}
-
-class SysfunctionProxy {
-    http;
-    environmentProxy;
-    constructor(http, environmentProxy) {
-        this.http = http;
-        this.environmentProxy = environmentProxy;
-    }
-    /** Get the authentication list for the given form
-     *
-     * @param formCode
-     * @returns
-     */
-    getAuthentication(formCode) {
-        let sysFunctionsURL = this.environmentProxy.getAdminLink('getAuthentication');
-        let securityDto = new SecurityDto();
-        securityDto.formCode = formCode;
-        securityDto.application = this.environmentProxy.getApplicationName();
-        let call$ = this.http.post(sysFunctionsURL, securityDto);
-        return call$.pipe(map((result) => result), catchError$1((error) => {
-            let errorMessage = error.message; //.error.title;
-            return throwError(() => new Error(errorMessage ?? ''));
-        }));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SysfunctionProxy, deps: [{ token: i1$2.HttpClient }, { token: i2$1.EnvironmentProxy }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SysfunctionProxy, providedIn: 'root' });
+    setAgGridTranslations(gridApi) {
+        if (gridApi) {
+            gridApi.setGridOption('localeText', {
+                // Status panel translate
+                totalRows: this.translateService.instant('AG_GRID.TOTAL_ROWS'),
+                filteredRows: this.translateService.instant('AG_GRID.FILTERED_ROWS'),
+                selectedRows: this.translateService.instant('AG_GRID.SELECTED_ROWS'),
+                noRowsToShow: this.translateService.instant('AG_GRID.NO_ROWS_TO_SHOW'),
+                loadingOoo: this.translateService.instant('AG_GRID.LOADING'),
+                // Context menu translations
+                copy: this.translateService.instant('AG_GRID.COPY'),
+                copyWithHeaders: this.translateService.instant('AG_GRID.COPY_WITH_HEADERS'),
+                copyWithGroupHeaders: this.translateService.instant('AG_GRID.COPY_WITH_GROUP_HEADERS'),
+                paste: this.translateService.instant('AG_GRID.PASTE'),
+                export: this.translateService.instant('AG_GRID.EXPORT'),
+                csvExport: this.translateService.instant('AG_GRID.CSV_EXPORT'),
+                excelExport: this.translateService.instant('AG_GRID.EXCEL_EXPORT'),
+                pinColumn: this.translateService.instant('AG_GRID.PIN_COLUMN'),
+                pinLeft: this.translateService.instant('AG_GRID.PIN_LEFT'),
+                pinRight: this.translateService.instant('AG_GRID.PIN_RIGHT'),
+                noPin: this.translateService.instant('AG_GRID.NO_PIN'),
+                sortAscending: this.translateService.instant('AG_GRID.SORT_ASCENDING'),
+                sortDescending: this.translateService.instant('AG_GRID.SORT_DESCENDING'),
+                autosizeThisColumn: this.translateService.instant('AG_GRID.AUTOSIZE_THIS_COLUMN'),
+                autosizeAllColumns: this.translateService.instant('AG_GRID.AUTOSIZE_ALL_COLUMNS'),
+                resetColumns: this.translateService.instant('AG_GRID.RESET_COLUMNS'),
+                expandAll: this.translateService.instant('AG_GRID.EXPAND_ALL'),
+                collapseAll: this.translateService.instant('AG_GRID.COLLAPSE_ALL'),
+                exportToExcel: this.translateService.instant('AG_GRID.EXPORT_TO_EXCEL'),
+                sheetName: this.translateService.instant('AG_GRID.SHEET_NAME'),
+                exportAsExcelTable: this.translateService.instant('AG_GRID.EXPORT_AS_EXCEL_TABLE'),
+                rangeSelectTo: this.translateService.instant('AG_GRID.RANGE_SELECT_TO'),
+                rangeSelectFrom: this.translateService.instant('AG_GRID.RANGE_SELECT_FROM'),
+                rangeSelectCopy: this.translateService.instant('AG_GRID.RANGE_SELECT_COPY'),
+                rangeSelectChart: this.translateService.instant('AG_GRID.RANGE_SELECT_CHART'),
+                pasteAll: this.translateService.instant('AG_GRID.CLIPBOARD_PASTE'),
+                pasteWithoutHeader: this.translateService.instant('AG_GRID.CLIPBOARD_PASTE_WITHOUT_HEADER'),
+                copyAll: this.translateService.instant('AG_GRID.CLIPBOARD_COPY'),
+                cut: this.translateService.instant('AG_GRID.CLIPBOARD_CUT'),
+                // Pagination translations
+                page: this.translateService.instant('AG_GRID.PAGE'),
+                more: this.translateService.instant('AG_GRID.MORE'),
+                to: this.translateService.instant('AG_GRID.TO'),
+                of: this.translateService.instant('AG_GRID.OF'),
+                next: this.translateService.instant('AG_GRID.NEXT'),
+                last: this.translateService.instant('AG_GRID.LAST'),
+                first: this.translateService.instant('AG_GRID.FIRST'),
+                previous: this.translateService.instant('AG_GRID.PREVIOUS'),
+                pageSizeSelectorLabel: this.translateService.instant('AG_GRID.PAGE_SIZE_SELECTOR_LABEL'),
+                // Set Filter
+                selectAll: this.translateService.instant('AG_GRID.SELECT_ALL'),
+                selectAllSearchResults: this.translateService.instant('AG_GRID.SELECT_ALL_SEARCH_RESULTS'),
+                searchOoo: this.translateService.instant('AG_GRID.SEARCH_OOO'),
+                blanks: this.translateService.instant('AG_GRID.BLANKS'),
+                noMatches: this.translateService.instant('AG_GRID.NO_MATCHES'),
+                // Number Filter & Text Filter
+                filterOoo: this.translateService.instant('AG_GRID.FILTER_OOO'),
+                equals: this.translateService.instant('AG_GRID.EQUALS'),
+                notEqual: this.translateService.instant('AG_GRID.NOT_EQUAL'),
+                blank: this.translateService.instant('AG_GRID.BLANK'),
+                notBlank: this.translateService.instant('AG_GRID.NOT_BLANK'),
+                empty: this.translateService.instant('AG_GRID.EMPTY'),
+                // Number Filter
+                lessThan: this.translateService.instant('AG_GRID.LESS_THAN'),
+                greaterThan: this.translateService.instant('AG_GRID.GREATER_THAN'),
+                lessThanOrEqual: this.translateService.instant('AG_GRID.LESS_THAN_OR_EQUAL'),
+                greaterThanOrEqual: this.translateService.instant('AG_GRID.GREATER_THAN_OR_EQUAL'),
+                inRange: this.translateService.instant('AG_GRID.IN_RANGE'),
+                inRangeStart: this.translateService.instant('AG_GRID.IN_RANGE_START'),
+                inRangeEnd: this.translateService.instant('AG_GRID.IN_RANGE_END'),
+                // Text Filter
+                contains: this.translateService.instant('AG_GRID.CONTAINS'),
+                notContains: this.translateService.instant('AG_GRID.NOT_CONTAINS'),
+                startsWith: this.translateService.instant('AG_GRID.STARTS_WITH'),
+                endsWith: this.translateService.instant('AG_GRID.ENDS_WITH'),
+                // Date Filter
+                dateFormatOoo: this.translateService.instant('AG_GRID.DATE_FORMAT_OOO'),
+                // Filter Conditions
+                andCondition: this.translateService.instant('AG_GRID.AND_CONDITION'),
+                orCondition: this.translateService.instant('AG_GRID.OR_CONDITION'),
+                // Filter Buttons
+                applyFilter: this.translateService.instant('AG_GRID.APPLY_FILTER'),
+                resetFilter: this.translateService.instant('AG_GRID.RESET_FILTER'),
+                clearFilter: this.translateService.instant('AG_GRID.CLEAR_FILTER'),
+                cancelFilter: this.translateService.instant('AG_GRID.CANCEL_FILTER'),
+                // Filter Titles
+                textFilter: this.translateService.instant('AG_GRID.TEXT_FILTER'),
+                numberFilter: this.translateService.instant('AG_GRID.NUMBER_FILTER'),
+                dateFilter: this.translateService.instant('AG_GRID.DATE_FILTER'),
+                setFilter: this.translateService.instant('AG_GRID.SET_FILTER'),
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NettyAgGridService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NettyAgGridService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SysfunctionProxy, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NettyAgGridService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: i2$1.EnvironmentProxy }] });
+        }], ctorParameters: () => [] });
 
-class ButtonRenderer {
-    params = null;
-    label = '';
-    type = '';
-    toggleValue = null;
-    editValid = false;
-    historyValid = false;
-    lineValid = false;
-    popupSelectValid = false;
-    popupEditValid = false;
-    toggleValid = false;
-    toggle_icon = '';
-    none = false;
-    addValid = false;
-    deleteValid = false;
-    agInit(params) {
-        this.params = params;
-        this.type = this.params.type || null;
-        this.label = this.params.label || null;
-        this.toggleValue = this.params.value || null;
-        switch (this.toggleValue) {
-            case true:
-                this.toggle_icon = 'select_check_box';
-                break;
-            case false:
-                this.toggle_icon = 'check_box_outline_blank';
-                break;
-            default:
-                this.toggle_icon = '';
-                break;
-        }
-        this.resetValids();
-        switch (this.type.toLowerCase().trim()) {
-            case 'edit':
-                this.editValid = true;
-                break;
-            case 'log':
-                this.historyValid = true;
-                break;
-            case 'line':
-                this.lineValid = true;
-                break;
-            case 'popupselect':
-                this.popupSelectValid = true;
-                break;
-            case 'toggle':
-                this.toggleValid = true;
-                break;
-            case 'none':
-                this.none = true;
-                break;
-            case 'add':
-                this.addValid = true;
-                break;
-            case 'delete':
-                this.deleteValid = true;
-                break;
-            default:
-                this.popupEditValid = true;
-                break;
-        }
+class SecurityDto {
+    coid = null;
+    userGUID = null;
+    application = '';
+    formCode = '';
+}
+
+class SysfunctionProxy {
+    http;
+    environmentProxy;
+    constructor(http, environmentProxy) {
+        this.http = http;
+        this.environmentProxy = environmentProxy;
     }
-    /** Refresh the display
+    /** Get the authentication list for the given form
      *
-     * @param params
+     * @param formCode
      * @returns
      */
-    refresh(params) {
-        return false;
-    }
-    resetValids() {
-        this.editValid = false;
-        this.historyValid = false;
-        this.lineValid = false;
-        this.popupSelectValid = false;
-        this.popupEditValid = false;
-        this.toggleValid = false;
-    }
-    onClick(event) {
-        if (this.params.onClick instanceof Function) {
-            // put anything into params u want pass into parents component
-            const params = {
-                event: event,
-                rowData: this.params.node.data,
-                type: this.type,
-                // ...something
-            };
-            this.params.onClick(params);
-        }
+    getAuthentication(formCode) {
+        let sysFunctionsURL = this.environmentProxy.getAdminLink('getAuthentication');
+        let securityDto = new SecurityDto();
+        securityDto.formCode = formCode;
+        securityDto.application = this.environmentProxy.getApplicationName();
+        let call$ = this.http.post(sysFunctionsURL, securityDto);
+        return call$.pipe(map((result) => result), catchError$1((error) => {
+            let errorMessage = error.message; //.error.title;
+            return throwError(() => new Error(errorMessage ?? ''));
+        }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ButtonRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ButtonRenderer, isStandalone: true, selector: "ntybase-button-renderer", host: { attributes: { "ntybase-id": "ButtonRenderer" } }, ngImport: i0, template: "@if (editValid || popupEditValid) {\n<mat-icon\n  class=\"cursor center edit\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"4000\"\n  >edit</mat-icon\n>\n} @if (historyValid) {\n<mat-icon\n  class=\"cursor center-log\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >log</mat-icon\n>\n} @if (historyValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >history</mat-icon\n>\n} @if (lineValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >menu_open</mat-icon\n>\n} @if (popupSelectValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >content_copy</mat-icon\n>\n} @if (toggleValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >{{toggleValue ? 'check_box' : 'check_box_outline_blank'}}</mat-icon\n>\n} @if (none) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  [matTooltipShowDelay]=\"3000\"\n  >menu_open</mat-icon\n>\n} @if (addValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >playlist_add</mat-icon\n>\n} @if (deleteValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >delete_outline</mat-icon\n>\n}\n", styles: [".cursor{cursor:pointer}.center{display:flex;justify-content:center;align-items:center;width:100%}.center-log{display:flex;justify-content:center;align-items:center;margin-bottom:-12px}.edit{margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SysfunctionProxy, deps: [{ token: i1$3.HttpClient }, { token: i2$1.EnvironmentProxy }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SysfunctionProxy, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ButtonRenderer, decorators: [{
-            type: Component,
-            args: [{ selector: 'ntybase-button-renderer', imports: [MatIconModule, MatTooltipModule, MatMenuModule], host: { 'ntybase-id': 'ButtonRenderer' }, template: "@if (editValid || popupEditValid) {\n<mat-icon\n  class=\"cursor center edit\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"4000\"\n  >edit</mat-icon\n>\n} @if (historyValid) {\n<mat-icon\n  class=\"cursor center-log\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >log</mat-icon\n>\n} @if (historyValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >history</mat-icon\n>\n} @if (lineValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >menu_open</mat-icon\n>\n} @if (popupSelectValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >content_copy</mat-icon\n>\n} @if (toggleValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >{{toggleValue ? 'check_box' : 'check_box_outline_blank'}}</mat-icon\n>\n} @if (none) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  [matTooltipShowDelay]=\"3000\"\n  >menu_open</mat-icon\n>\n} @if (addValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >playlist_add</mat-icon\n>\n} @if (deleteValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >delete_outline</mat-icon\n>\n}\n", styles: [".cursor{cursor:pointer}.center{display:flex;justify-content:center;align-items:center;width:100%}.center-log{display:flex;justify-content:center;align-items:center;margin-bottom:-12px}.edit{margin-top:8px}\n"] }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SysfunctionProxy, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1$3.HttpClient }, { type: i2$1.EnvironmentProxy }] });
 
-class CheckboxRenderer {
-    params = null;
-    label = '';
-    type = '';
-    supportClick = false;
-    checked = null;
-    agInit(params) {
-        this.onProcess(params);
+class NettyAgGridBase extends NettyAppsBase {
+    FILTER_MODE_KEY = 'nettyapps_filter_mode';
+    // AgGrid Dark Mode Row Style
+    myTheme = themeQuartz.withParams({
+        backgroundColor: 'black',
+        browserColorScheme: 'dark',
+    }, 'dark');
+    // ********************************************
+    // *** INPUTS                               ***
+    // ********************************************
+    readOnly = signal(true, ...(ngDevMode ? [{ debugName: "readOnly" }] : [])); // Is the form in readonly mode
+    popupFilterValid = input(false, ...(ngDevMode ? [{ debugName: "popupFilterValid" }] : [])); // Is the popup filter valid
+    popupValid = input(false, ...(ngDevMode ? [{ debugName: "popupValid" }] : [])); // Is the form in popup mode
+    isEmbedded = input(false, ...(ngDevMode ? [{ debugName: "isEmbedded" }] : [])); // Is the form embedded to an other component
+    // Parameters passed when the component is embeded into an other
+    componantParameterGUID = input('', ...(ngDevMode ? [{ debugName: "componantParameterGUID" }] : [])); // GUID of the parameter
+    componantParameterType = input('', ...(ngDevMode ? [{ debugName: "componantParameterType" }] : [])); // Type of the parameter (Field Name)
+    // ********************************************
+    // *** EVENTS                               ***
+    // ********************************************
+    /*
+      Selected records event
+      @param records: Array of selected records
+    */
+    onElementSelect = output(); // Emit selected records when updated
+    selectedElement = output(); // Selected element in popup mode
+    // Component identifiers  
+    componentName = signal('Invalid', ...(ngDevMode ? [{ debugName: "componentName" }] : []));
+    searchValueName = signal('Invalid_searchValue', ...(ngDevMode ? [{ debugName: "searchValueName" }] : []));
+    preferenceType = signal('Invalid_columnState', ...(ngDevMode ? [{ debugName: "preferenceType" }] : []));
+    searchValue = signal('', ...(ngDevMode ? [{ debugName: "searchValue" }] : []));
+    // Query Parameters can be provide as parameters
+    parameterGUID = signal('', ...(ngDevMode ? [{ debugName: "parameterGUID" }] : []));
+    parameterType = signal('', ...(ngDevMode ? [{ debugName: "parameterType" }] : []));
+    // Services
+    nettyAgGridService = inject(NettyAgGridService);
+    commonService = inject(CommonService);
+    sysFunctionProxy = inject(SysfunctionProxy);
+    environment = inject(EnvironmentProxy);
+    // Button action management variables
+    menuValid = signal(true, ...(ngDevMode ? [{ debugName: "menuValid" }] : [])); // true: Filter editbox is not visible so the menus are visible
+    refreshButtonValid = signal(false, ...(ngDevMode ? [{ debugName: "refreshButtonValid" }] : [])); // true: Refresh button is enabled
+    // Authentication
+    authenticationList = [];
+    // User access writes
+    accessRightsProcessed = signal(false, ...(ngDevMode ? [{ debugName: "accessRightsProcessed" }] : []));
+    allowAdd = signal(false, ...(ngDevMode ? [{ debugName: "allowAdd" }] : []));
+    allowEdit = signal(false, ...(ngDevMode ? [{ debugName: "allowEdit" }] : []));
+    allowDelete = signal(false, ...(ngDevMode ? [{ debugName: "allowDelete" }] : []));
+    allowLog = signal(false, ...(ngDevMode ? [{ debugName: "allowLog" }] : []));
+    allowRead = signal(true, ...(ngDevMode ? [{ debugName: "allowRead" }] : []));
+    // ---------------------------------------------------
+    // --- RECORD LIST                                 ---
+    // ---------------------------------------------------
+    recordList = signal([], ...(ngDevMode ? [{ debugName: "recordList" }] : []));
+    record = null;
+    // ***************************************************************
+    // *** METHODS For optional overide                            ***
+    // ***************************************************************
+    async AfterOnInit() { }
+    setFilter() { } //override this to set a filter
+    // ***************************************************************
+    // *** METHODS                                                 ***
+    // ***************************************************************
+    popupClose() { this.selectedElement.emit(null); }
+    onFilterTextBoxVisibilityChange(isOpen) {
+        this.menuValid.set(!isOpen);
     }
-    refresh(params) {
-        if (params != null) {
-            this.onProcess(params);
+    /**
+     * Handle back button click
+     */
+    backClicked() {
+        this.commonService.goBack();
+    }
+    async refreshData() {
+        try {
+            this.loadData();
+            await this.alertService.showAlert('@dataRefreshedSuccessfully');
+        }
+        catch (err) {
+            this.alertService.showError(err);
         }
-        return true;
     }
-    onProcess(params) {
-        this.params = params;
-        this.checked = this.params.value ?? false;
-        this.type = this.params.type || null;
-        this.label = this.params.label || null;
-        if (this.type != null) {
-            if (this.type.toLowerCase().trim() == 'click') {
-                this.supportClick = true;
+    /** Set data into the grid */
+    setData(data) {
+        this.recordList.set(data);
+        if (this.columnDefs() == null || this.columnDefs().length == 0) {
+            this.initAgGrid();
+        }
+        if (this.searchValue() && this.gridApi) {
+            this.gridApi.setGridOption('quickFilterText', this.searchValue());
+            if (this.recordList == undefined || this.recordList.length == 0) {
+                if (this.isEmbedded()) {
+                    this.alertService.showWarning('@recordNotFoundSearch');
+                }
             }
         }
     }
-    onClick(event) {
-        this.checked = !this.checked;
-        if (this.params.onClick instanceof Function) {
-            // put anything into params u want pass into parents component
-            const params = {
-                event: event,
-                rowData: this.params.node.data,
-                type: this.type,
-                checked: this.checked,
-                // ...something
-            };
-            this.params.onClick(params);
+    async setAccessRights() {
+        this.authenticationList = await lastValueFrom(this.sysFunctionProxy.getAuthentication(this.componentName())).catch((e) => {
+            return throwError(() => new Error(e));
+        });
+        try {
+            this.allowRead.set(this.authenticationList.find((f) => f.action == 'read')?.allow ?? false);
+            if (this.allowRead() == false) {
+                this.commonService.userNotAllowedToRead();
+                return false;
+            }
+            this.allowAdd.set(false);
+            this.allowEdit.set(false);
+            this.allowDelete.set(false);
+            this.allowLog.set(false);
+        }
+        catch (error) {
+            this.allowAdd.set(false);
+            this.allowEdit.set(false);
+            this.allowDelete.set(false);
+            this.allowLog.set(false);
+            return false;
         }
+        this.accessRightsProcessed.set(true);
+        return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CheckboxRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CheckboxRenderer, isStandalone: true, selector: "ntybase-checkbox-renderer", host: { attributes: { "ntybase-id": "CheckboxRenderer" } }, ngImport: i0, template: "@if (supportClick) {\n<input\n  id=\"checkbox\"\n  type=\"checkbox\"\n  [checked]=\"checked\"\n  (click)=\"onClick($event)\"\n/>\n} @if (!supportClick) {\n<input id=\"checkbox\" type=\"checkbox\" [checked]=\"params.value\" disabled />\n}\n\n<label for=\"checkbox\">{{label}}</label>\n", styles: [""] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CheckboxRenderer, decorators: [{
-            type: Component,
-            args: [{ selector: 'ntybase-checkbox-renderer', imports: [], host: { 'ntybase-id': 'CheckboxRenderer' }, template: "@if (supportClick) {\n<input\n  id=\"checkbox\"\n  type=\"checkbox\"\n  [checked]=\"checked\"\n  (click)=\"onClick($event)\"\n/>\n} @if (!supportClick) {\n<input id=\"checkbox\" type=\"checkbox\" [checked]=\"params.value\" disabled />\n}\n\n<label for=\"checkbox\">{{label}}</label>\n" }]
-        }] });
-
-class NettyAppsBase {
-    // ---------------------------------
-    // --- SERVICES                  ---
-    // ---------------------------------
-    alertService = inject(AlertService);
-    translateService = inject(TranslateService);
-    // ---------------------------------
-    // --- DOWNLOAD METHODS          ---
-    // ---------------------------------
     /**
-     * Download the given base64Encoded data as file
-     *
-     * @param base64Data: base64 encoded data
-     * @param fileName: filename to download
-     */
-    downloadFile(base64Data, fileName) {
-        if (base64Data == null) {
-            return;
-        }
-        if (fileName == null) {
-            return;
+    * Get stored filter mode from local storage
+    * @returns boolean
+    */
+    getStoredFilterMode() {
+        try {
+            const stored = localStorage.getItem(this.FILTER_MODE_KEY);
+            return stored !== null ? JSON.parse(stored) : true;
         }
-        // Check if header is present
-        if (!base64Data.startsWith('data:')) {
-            console.error('Provided data is not in base64 format (missing header)');
-            return;
+        catch {
+            return true;
         }
-        const contentType = base64Data.split(';')[0].split(':')[1];
-        const byteCharacters = atob(base64Data.split(',')[1]);
-        const byteArrays = [];
-        for (let i = 0; i < byteCharacters.length; i++) {
-            const byteArray = byteCharacters.charCodeAt(i);
-            byteArrays.push(byteArray);
+    }
+    // *********************************************************
+    // *** AG Grid Management                                ***
+    // *********************************************************
+    // Component inputs
+    agGridSelectionMode = input('multiRow', ...(ngDevMode ? [{ debugName: "agGridSelectionMode" }] : []));
+    // AG-Grid theme setting (dark mode)
+    theme = this.myTheme;
+    // Grid references
+    gridApi;
+    userGridApi;
+    excelStyles = null;
+    // Column definitions
+    columnDefs = signal(null, ...(ngDevMode ? [{ debugName: "columnDefs" }] : []));
+    userColumnDefs = signal(null, ...(ngDevMode ? [{ debugName: "userColumnDefs" }] : []));
+    groupMembersColumnDefs = signal(null, ...(ngDevMode ? [{ debugName: "groupMembersColumnDefs" }] : []));
+    gridColumnsVisible = signal(true, ...(ngDevMode ? [{ debugName: "gridColumnsVisible" }] : []));
+    gridExpanded = signal(false, ...(ngDevMode ? [{ debugName: "gridExpanded" }] : []));
+    // Framework components
+    frameworkComponents = null;
+    // Selection management
+    selectedRows = signal([], ...(ngDevMode ? [{ debugName: "selectedRows" }] : [])); // Selected rows in the grid
+    isSingleRowSelected = computed(() => this.selectedRows().length === 1, ...(ngDevMode ? [{ debugName: "isSingleRowSelected" }] : [])); // True if only one row is selected
+    isMultipleRowSelected = computed(() => this.selectedRows().length > 0, ...(ngDevMode ? [{ debugName: "isMultipleRowSelected" }] : [])); // True if multiple rows are selected
+    // Services
+    // AG Grid Filter
+    customFilters = signal(this.getStoredFilterMode(), ...(ngDevMode ? [{ debugName: "customFilters" }] : []));
+    // ---------------------------------------------
+    // --- AG Grid Configuration                 ---
+    // ---------------------------------------------  
+    // Grid configuration options
+    gridOptions = {
+        rowSelection: {
+            mode: this.agGridSelectionMode(), checkboxes: true, headerCheckbox: true,
+            selectAll: 'filtered', hideDisabledCheckboxes: true, suppressRowClickSelection: false,
+            enableCellChangeFlash: true,
+        },
+    };
+    // Statusbar
+    statusBar = {
+        statusPanels: [
+            { statusPanel: 'agTotalRowCountComponent', align: 'left', key: 'rowCount' },
+            { statusPanel: 'agFilteredRowCountComponent' },
+            { statusPanel: 'agSelectedRowCountComponent' },
+            { statusPanel: 'agAggregationComponent' },
+        ],
+    };
+    // ---------------------------------------------
+    // --- AG Grid Functions                     ---
+    // ---------------------------------------------  
+    // Common grid ready handler
+    onGridReady(params) {
+        this.gridApi = params.api;
+        this.setAgGridTranslations();
+        this.gridApi.addEventListener('selectionChanged', () => {
+            // Null-safe approach
+            const selectedNodes = this.gridApi?.getSelectedNodes?.() || [];
+            this.selectedRows.set(selectedNodes.map((node) => node.data));
+        });
+        if (this.searchValue()) {
+            this.gridApi.setGridOption('quickFilterText', this.searchValue());
         }
-        const byteArray = new Uint8Array(byteArrays);
-        const blob = new Blob([byteArray], { type: contentType });
-        const link = document.createElement('a');
-        link.href = URL.createObjectURL(blob);
-        link.download = fileName;
-        link.click();
     }
-    /** Download the given base64Endoced data as text file
-     *
-     * @param base64EncodedFileData
-     * @param fileName
-     */
-    downloadTextFile(base64EncodedFileData, fileName) {
-        // Check if the data has a prefix like "data:application/pdf;base64,"
-        if (base64EncodedFileData == null) {
-            return;
+    onFirstDataRendered(params) {
+        //TODO: Fix this
+        try {
+            this.nettyAgGridService.loadGridUserPreference(this.preferenceType(), this.gridApi);
+            this.expandCollapse();
         }
-        if (fileName == null) {
-            return;
+        catch (error) {
+            console.log('OnFirstDataRendered error:', error);
         }
-        let _data = base64EncodedFileData;
-        const prefix = 'data:';
-        if (_data.startsWith(prefix)) {
-            // Remove the prefix
-            _data = _data.slice(_data.indexOf(',') + 1);
+    }
+    // Save the user parameters
+    saveGrid(params) {
+        const gridState = {
+            columnState: this.gridApi.getColumnState(),
+        };
+        this.nettyAgGridService.saveGridUserPreference(this.preferenceType(), this.gridApi, JSON.stringify(gridState));
+    }
+    // Grid utilities
+    expandCollapse() {
+        this.gridExpanded.set(this.nettyAgGridService.expandCollapseGrid(this.gridApi, this.gridExpanded()));
+    }
+    quickSearch(searchStr = '') {
+        this.searchValue.set(searchStr);
+        if (this.gridApi) {
+            this.gridApi.setGridOption('quickFilterText', this.searchValue());
         }
-        // Convert the base64 data to a Uint8Array
-        const textData = Buffer.from(_data ?? '', 'base64').toString();
-        this.downloadTextFileNotEncoded(textData, fileName);
+        sessionStorage.setItem(this.searchValueName(), this.searchValue());
     }
-    /** Save the given text as a text file
-     *
-     * @param fileData
-     * @param fileName
+    /**
+     * Update a single row in the grid
+     * @param rowData The updated row data
+     * @param idField The field name that serves as unique identifier (default: 'id')
      */
-    downloadTextFileNotEncoded(fileData, fileName) {
-        if (fileData == null) {
-            return;
-        }
-        if (fileName == null) {
-            return;
-        }
-        // Create a Blob from the Text
-        const blob = new Blob([fileData], { type: 'text/plain' });
-        // Create a download link
-        const url = window.URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        document.body.appendChild(a);
-        a.style.display = 'none';
-        a.href = url;
-        a.download = fileName ?? 'filename';
-        // Trigger the download
-        a.click();
-        // Clean up
-        window.URL.revokeObjectURL(url);
-        document.body.removeChild(a);
+    updateRowInGrid(rowData, idField = 'id') {
+        const rowNode = this.gridApi.getRowNode(rowData[idField]);
+        if (rowNode) {
+            rowNode.setData(rowData);
+            const params = { rowNodes: [rowNode], force: true, suppressFlash: false, };
+            this.gridApi.refreshCells(params);
+        }
+        else {
+            this.loadData(); // Reload all data if row not found
+        }
     }
     /**
-     * Download file where the data is provided as blob
-     * @param data - Array Buffer data
-     * @param type - type of the document.
+     * Filter mode change
      */
-    downloadBlobFile(data, type, fileName) {
-        let blob = new Blob([data], { type: type });
-        let downloadLink = document.createElement('a');
-        downloadLink.href = window.URL.createObjectURL(blob);
-        downloadLink.setAttribute('download', fileName);
-        document.body.appendChild(downloadLink);
-        downloadLink.click();
-        downloadLink.parentNode?.removeChild(downloadLink);
+    toggleFilterMode() {
+        const newMode = !this.customFilters();
+        this.customFilters.set(newMode);
+        localStorage.setItem(this.FILTER_MODE_KEY, JSON.stringify(newMode));
+        this.initAgGrid();
+        if (this.gridApi) {
+            this.gridApi.refreshHeader();
+            this.gridApi.setFilterModel(null);
+            const message = this.customFilters()
+                ? '@customFilterModeEnabled'
+                : '@defaultFilterModeEnabled';
+            this.alertService.showAlert(this.translateService.instant(message));
+        }
     }
-    // ---------------------------------
-    // --- INTERFACE IMPLEMENTATIONS ---
-    // ---------------------------------
-    onDestroy$ = new Subject();
-    ngOnDestroy() {
-        //Called once, before the instance is destroyed.
-        //Add 'implements OnDestroy' to the class.
-        this.onDestroy$.next();
-        this.onDestroy$.complete();
+    setAgGridTranslations() {
+        this.nettyAgGridService.setAgGridTranslations(this.gridApi);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NettyAppsBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: NettyAppsBase, isStandalone: true, selector: "ntybase-netty-apps-base", ngImport: i0, template: "", styles: [""] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NettyAppsBase, decorators: [{
-            type: Component,
-            args: [{ selector: 'ntybase-netty-apps-base', imports: [], template: "" }]
-        }] });
-
-ModuleRegistry.registerModules([
-    AllCommunityModule,
-    StatusBarModule,
-    ClientSideRowModelModule,
-    ClipboardModule,
-    ExcelExportModule,
-    ColumnMenuModule,
-    ContextMenuModule,
-    CellSelectionModule,
-    HighlightChangesModule,
-    RowSelectionModule,
-]);
-// AgGrid Dark Mode Row Style
-const myTheme = themeQuartz.withParams({
-    backgroundColor: 'black',
-    browserColorScheme: 'dark',
-}, 'dark');
-const FILTER_MODE_KEY = 'nettyapps_filter_mode';
-class NettyAgGridBase extends NettyAppsBase {
-    // Input signals
-    readOnly = input(false, ...(ngDevMode ? [{ debugName: "readOnly" }] : []));
-    popupFilterValid = input(false, ...(ngDevMode ? [{ debugName: "popupFilterValid" }] : []));
-    popupValid = input(false, ...(ngDevMode ? [{ debugName: "popupValid" }] : []));
-    isEmbedded = input(false, ...(ngDevMode ? [{ debugName: "isEmbedded" }] : []));
-    // Parameters pass when the component is embeded into an other
-    componantParameterGUID = input('', ...(ngDevMode ? [{ debugName: "componantParameterGUID" }] : []));
-    componantParameterType = input('', ...(ngDevMode ? [{ debugName: "componantParameterType" }] : []));
-    // Events
-    /*
-      Selected records event
-      @param records: Array of selected records
-    */
-    onElementSelect = output();
-    // AG Grid Filter
-    customFilters = signal(this.getStoredFilterMode(), ...(ngDevMode ? [{ debugName: "customFilters" }] : []));
-    // Filter section
-    isFilterValid = signal(true, ...(ngDevMode ? [{ debugName: "isFilterValid" }] : []));
-    isFilterExpanded = signal(true, ...(ngDevMode ? [{ debugName: "isFilterExpanded" }] : []));
-    // Authentication
-    authenticationList = [];
-    // User access writes
-    accessRightsProcessed = signal(false, ...(ngDevMode ? [{ debugName: "accessRightsProcessed" }] : []));
-    allowAdd = signal(false, ...(ngDevMode ? [{ debugName: "allowAdd" }] : []));
-    allowEdit = signal(false, ...(ngDevMode ? [{ debugName: "allowEdit" }] : []));
-    allowDelete = signal(false, ...(ngDevMode ? [{ debugName: "allowDelete" }] : []));
-    allowLog = signal(false, ...(ngDevMode ? [{ debugName: "allowLog" }] : []));
-    allowRead = signal(true, ...(ngDevMode ? [{ debugName: "allowRead" }] : []));
-    // Button action management variables
-    menuValid = signal(true, ...(ngDevMode ? [{ debugName: "menuValid" }] : []));
-    deleteValid = signal(false, ...(ngDevMode ? [{ debugName: "deleteValid" }] : []));
-    selectionValid = signal(false, ...(ngDevMode ? [{ debugName: "selectionValid" }] : []));
-    refreshButtonValid = signal(false, ...(ngDevMode ? [{ debugName: "refreshButtonValid" }] : []));
-    // Parameters for embeded components
-    selectedElement = output();
-    // AG-Grid theme setting (dark mode)
-    theme = myTheme;
-    // Grid references
-    gridApi;
-    userGridApi;
-    excelStyles = null;
-    // Column definitions
-    columnDefs = signal(null, ...(ngDevMode ? [{ debugName: "columnDefs" }] : []));
-    userColumnDefs = signal(null, ...(ngDevMode ? [{ debugName: "userColumnDefs" }] : []));
-    groupMembersColumnDefs = signal(null, ...(ngDevMode ? [{ debugName: "groupMembersColumnDefs" }] : []));
-    gridColumnsVisible = signal(true, ...(ngDevMode ? [{ debugName: "gridColumnsVisible" }] : []));
-    // Framework components
-    frameworkComponents = null;
-    // Selection management
-    selectedRows = signal([], ...(ngDevMode ? [{ debugName: "selectedRows" }] : []));
-    isSingleRowSelected = computed(() => this.selectedRows().length === 1, ...(ngDevMode ? [{ debugName: "isSingleRowSelected" }] : []));
-    isMultipleRowSelected = computed(() => this.selectedRows().length > 0, ...(ngDevMode ? [{ debugName: "isMultipleRowSelected" }] : []));
-    // Component identifiers
-    gridExpanded = signal(false, ...(ngDevMode ? [{ debugName: "gridExpanded" }] : []));
-    componentName = signal('Invalid', ...(ngDevMode ? [{ debugName: "componentName" }] : []));
-    searchValueName = signal('Invalid_searchValue', ...(ngDevMode ? [{ debugName: "searchValueName" }] : []));
-    preferenceType = signal('Invalid_columnState', ...(ngDevMode ? [{ debugName: "preferenceType" }] : []));
-    searchValue = signal('', ...(ngDevMode ? [{ debugName: "searchValue" }] : []));
-    // Open component management
-    openInPopup = signal(false, ...(ngDevMode ? [{ debugName: "openInPopup" }] : []));
-    // Services
-    nettyAgGridService = inject(NettyAgGridService);
-    commonService = inject(CommonService);
-    router = inject(Router);
-    routerActive = inject(ActivatedRoute);
-    dialog = inject(MatDialog);
-    sysFunctionProxy = inject(SysfunctionProxy);
-    environment = inject(EnvironmentProxy);
-    // Parse query parameters
-    queryParameterGUID = toSignal(this.routerActive.queryParamMap.pipe(map((params) => params.get('parameters')), map((value) => this.parseOrReturnValue(value))), {
-        initialValue: null, // set initial value to null
-    });
-    queryParameterType = toSignal(this.routerActive.queryParamMap.pipe(map((params) => params.get('type')), map((value) => this.parseOrReturnValue(value))), {
-        initialValue: null, // set initial value to null
-    });
-    // Query Parameters can be provide as parameters
-    parameterGUID = signal('', ...(ngDevMode ? [{ debugName: "parameterGUID" }] : []));
-    parameterType = signal('', ...(ngDevMode ? [{ debugName: "parameterType" }] : []));
     initAgGrid_extension() {
         if (this.allowEdit() == false && (this.popupValid() ?? false) == false) {
             this.columnDefs().pop();
             this.columnDefs().shift();
             this.columnDefs().unshift({
-                headerName: '',
-                headerCheckboxSelection: true,
-                sortable: true,
-                resizable: true,
-                filter: true,
-                minWidth: 60,
-                maxWidth: 60,
-                suppressSizeToFit: true,
-                colId: 'editColumn',
+                headerName: '', headerCheckboxSelection: true, sortable: true, resizable: true,
+                filter: true, minWidth: 60, maxWidth: 60, suppressSizeToFit: true, colId: 'editColumn',
                 cellRenderer: 'buttonRenderer',
-                cellRendererParams: {
-                    //onClick: this.onBtnClick.bind(this),
-                    label: '1',
-                    type: 'edit',
-                },
-            });
-            this.gridApi.setGridOption('rowSelection', {
-                mode: 'multiRow',
-                checkboxes: true,
+                cellRendererParams: { label: '1', type: 'edit' },
             });
+            this.gridApi.setGridOption('rowSelection', { mode: 'multiRow', checkboxes: true });
         }
         if (this.popupValid() == true) {
             this.columnDefs().pop();
@@ -1424,155 +1524,301 @@ class NettyAgGridBase extends NettyAppsBase {
             if (this.popupFilterValid() == true) {
                 if (this.allowEdit()) {
                     this.columnDefs().unshift({
-                        headerName: '',
-                        sortable: false,
-                        resizable: false,
-                        filter: false,
-                        minWidth: 50,
-                        maxWidth: 50,
-                        suppressSizeToFit: true,
-                        cellRenderer: 'buttonRenderer',
+                        headerName: '', sortable: false, resizable: false, filter: false,
+                        minWidth: 50, maxWidth: 50, suppressSizeToFit: true, cellRenderer: 'buttonRenderer',
                         cellRendererParams: {
                             onClick: this.onBtnClick?.bind(this),
                             label: this.translateService.instant('@Update'),
                             type: 'popupEdit',
                         },
                     });
-                    this.gridApi.setGridOption('rowSelection', {
-                        mode: 'multiRow',
-                        checkboxes: true,
-                    });
+                    this.gridApi.setGridOption('rowSelection', { mode: 'multiRow', checkboxes: true, });
                 }
                 else {
                     this.columnDefs().unshift({
-                        headerName: '',
-                        sortable: false,
-                        resizable: false,
-                        filter: false,
-                        minWidth: 50,
-                        maxWidth: 50,
-                        suppressSizeToFit: true,
-                        cellStyle: { 'padding-top': '5px' },
-                    });
-                    this.gridApi.setGridOption('rowSelection', {
-                        mode: 'multiRow',
-                        checkboxes: true,
+                        headerName: '', sortable: false, resizable: false, filter: false,
+                        minWidth: 50, maxWidth: 50, suppressSizeToFit: true, cellStyle: { 'padding-top': '5px' }
                     });
+                    this.gridApi.setGridOption('rowSelection', { mode: 'multiRow', checkboxes: true });
                 }
             }
             else {
                 if (this.allowEdit() == false) {
                     this.columnDefs().unshift({
-                        headerName: '',
-                        sortable: false,
-                        resizable: false,
-                        filter: false,
-                        minWidth: 50,
-                        maxWidth: 50,
-                        suppressSizeToFit: true,
-                        cellRenderer: 'buttonRenderer',
+                        headerName: '', sortable: false, resizable: false, filter: false, minWidth: 50,
+                        maxWidth: 50, suppressSizeToFit: true, cellRenderer: 'buttonRenderer',
                         cellRendererParams: {
                             onClick: this.onBtnClick?.bind(this),
                             label: this.translateService.instant('@Update'),
                             type: 'popupEdit',
                         },
                     });
-                    this.gridApi.setGridOption('rowSelection', {
-                        mode: 'singleRow',
-                        checkboxes: false,
-                    });
+                    this.gridApi.setGridOption('rowSelection', { mode: 'singleRow', checkboxes: false });
                 }
                 if (!this.readOnly()) {
                     this.columnDefs().unshift({
-                        headerName: this.translateService.instant('@select'),
-                        sortable: false,
-                        resizable: false,
-                        filter: false,
-                        minWidth: 80,
-                        maxWidth: 80,
-                        suppressSizeToFit: true,
-                        cellRenderer: 'buttonRenderer',
-                        cellStyle: { 'margin-top': '8px' },
+                        headerName: this.translateService.instant('@select'), sortable: false, resizable: false,
+                        filter: false, minWidth: 80, maxWidth: 80, suppressSizeToFit: true,
+                        cellRenderer: 'buttonRenderer', cellStyle: { 'margin-top': '8px' },
                         cellRendererParams: {
                             onClick: this.onBtnClick?.bind(this),
                             label: this.translateService.instant('@select'),
                             type: 'popupSelect',
                         },
                     });
-                    this.gridApi.setGridOption('rowSelection', {
-                        mode: 'singleRow',
-                        checkboxes: false,
-                    });
+                    this.gridApi.setGridOption('rowSelection', { mode: 'singleRow', checkboxes: false });
                 }
             }
         }
     }
-    // Grid configuration options
-    gridOptions = {
-        rowSelection: {
-            mode: 'multiRow',
-            checkboxes: true,
-            headerCheckbox: true,
-            selectAll: 'filtered',
-            hideDisabledCheckboxes: true,
-            suppressRowClickSelection: false,
-            enableCellChangeFlash: true,
-        },
-    };
-    // Statusbar
-    statusBar = {
-        statusPanels: [
-            {
-                statusPanel: 'agTotalRowCountComponent',
-                align: 'left',
-                key: 'rowCount',
-            },
-            { statusPanel: 'agFilteredRowCountComponent' },
-            { statusPanel: 'agSelectedRowCountComponent' },
-            { statusPanel: 'agAggregationComponent' },
-        ],
-    };
-    /**
-     * Filter mode change
-     */
-    toggleFilterMode() {
-        const newMode = !this.customFilters();
-        this.customFilters.set(newMode);
-        localStorage.setItem(FILTER_MODE_KEY, JSON.stringify(newMode));
-        this.initAgGrid();
-        if (this.gridApi) {
-            this.gridApi.refreshHeader();
-            this.gridApi.setFilterModel(null);
-            const message = this.customFilters()
-                ? '@customFilterModeEnabled'
-                : '@defaultFilterModeEnabled';
-            this.alertService.showAlert(this.translateService.instant(message));
+    // ---------------------------------------------
+    // --- Functions to Show / Hide Grid Columns ---
+    // ---------------------------------------------
+    onShowHideColumns() {
+        this.gridColumnsVisible.update((a) => !a);
+        this.showHideColumnsAsync();
+    }
+    showHideColumnsAsync() {
+        setTimeout(() => this.showHideColumns(), 400);
+    }
+    showHideColumns() {
+        var fields = this.columnDefs()
+            .filter((columnDef) => columnDef.ntyHide === 'x')
+            .map((columnDef) => columnDef.field);
+        this.gridApi?.setColumnsVisible(fields, this.gridColumnsVisible());
+    }
+    showHideEmbeddedColumnsAsync() {
+        setTimeout(() => this.showHideEmbeddedColumns(), 100);
+    }
+    showHideEmbeddedColumns() {
+        if (this.columnDefs() == undefined || this.columnDefs() == null) {
+            return;
+        }
+        var fields = this.columnDefs()
+            .filter((columnDef) => columnDef.ntyEmbeddedHide == 'x')
+            .map((columnDef) => columnDef.field);
+        this.gridApi?.setColumnsVisible(fields, !this.isEmbedded());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NettyAgGridBase, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: NettyAgGridBase, isStandalone: true, selector: "ntybase-ag-grid-base", inputs: { popupFilterValid: { classPropertyName: "popupFilterValid", publicName: "popupFilterValid", isSignal: true, isRequired: false, transformFunction: null }, popupValid: { classPropertyName: "popupValid", publicName: "popupValid", isSignal: true, isRequired: false, transformFunction: null }, isEmbedded: { classPropertyName: "isEmbedded", publicName: "isEmbedded", isSignal: true, isRequired: false, transformFunction: null }, componantParameterGUID: { classPropertyName: "componantParameterGUID", publicName: "componantParameterGUID", isSignal: true, isRequired: false, transformFunction: null }, componantParameterType: { classPropertyName: "componantParameterType", publicName: "componantParameterType", isSignal: true, isRequired: false, transformFunction: null }, agGridSelectionMode: { classPropertyName: "agGridSelectionMode", publicName: "agGridSelectionMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onElementSelect: "onElementSelect", selectedElement: "selectedElement" }, host: { attributes: { "ntybase-id": "NettyAgGridBase" } }, usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NettyAgGridBase, decorators: [{
+            type: Component,
+            args: [{ selector: 'ntybase-ag-grid-base', imports: [], template: ``, host: { 'ntybase-id': 'NettyAgGridBase' } }]
+        }], propDecorators: { popupFilterValid: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupFilterValid", required: false }] }], popupValid: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupValid", required: false }] }], isEmbedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEmbedded", required: false }] }], componantParameterGUID: [{ type: i0.Input, args: [{ isSignal: true, alias: "componantParameterGUID", required: false }] }], componantParameterType: [{ type: i0.Input, args: [{ isSignal: true, alias: "componantParameterType", required: false }] }], onElementSelect: [{ type: i0.Output, args: ["onElementSelect"] }], selectedElement: [{ type: i0.Output, args: ["selectedElement"] }], agGridSelectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "agGridSelectionMode", required: false }] }] } });
+
+class ButtonRenderer {
+    params = null;
+    label = '';
+    type = '';
+    toggleValue = null;
+    editValid = false;
+    historyValid = false;
+    lineValid = false;
+    popupSelectValid = false;
+    popupEditValid = false;
+    toggleValid = false;
+    toggle_icon = '';
+    none = false;
+    addValid = false;
+    deleteValid = false;
+    agInit(params) {
+        this.params = params;
+        this.type = this.params.type || null;
+        this.label = this.params.label || null;
+        this.toggleValue = this.params.value || null;
+        switch (this.toggleValue) {
+            case true:
+                this.toggle_icon = 'select_check_box';
+                break;
+            case false:
+                this.toggle_icon = 'check_box_outline_blank';
+                break;
+            default:
+                this.toggle_icon = '';
+                break;
+        }
+        this.resetValids();
+        switch (this.type.toLowerCase().trim()) {
+            case 'edit':
+                this.editValid = true;
+                break;
+            case 'log':
+                this.historyValid = true;
+                break;
+            case 'line':
+                this.lineValid = true;
+                break;
+            case 'popupselect':
+                this.popupSelectValid = true;
+                break;
+            case 'toggle':
+                this.toggleValid = true;
+                break;
+            case 'none':
+                this.none = true;
+                break;
+            case 'add':
+                this.addValid = true;
+                break;
+            case 'delete':
+                this.deleteValid = true;
+                break;
+            default:
+                this.popupEditValid = true;
+                break;
+        }
+    }
+    /** Refresh the display
+     *
+     * @param params
+     * @returns
+     */
+    refresh(params) {
+        return false;
+    }
+    resetValids() {
+        this.editValid = false;
+        this.historyValid = false;
+        this.lineValid = false;
+        this.popupSelectValid = false;
+        this.popupEditValid = false;
+        this.toggleValid = false;
+    }
+    onClick(event) {
+        if (this.params.onClick instanceof Function) {
+            // put anything into params u want pass into parents component
+            const params = {
+                event: event,
+                rowData: this.params.node.data,
+                type: this.type,
+                // ...something
+            };
+            this.params.onClick(params);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ButtonRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ButtonRenderer, isStandalone: true, selector: "ntybase-button-renderer", host: { attributes: { "ntybase-id": "ButtonRenderer" } }, ngImport: i0, template: "@if (editValid || popupEditValid) {\n<mat-icon\n  class=\"cursor center edit\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"4000\"\n  >edit</mat-icon\n>\n} @if (historyValid) {\n<mat-icon\n  class=\"cursor center-log\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >log</mat-icon\n>\n} @if (historyValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >history</mat-icon\n>\n} @if (lineValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >menu_open</mat-icon\n>\n} @if (popupSelectValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >content_copy</mat-icon\n>\n} @if (toggleValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >{{toggleValue ? 'check_box' : 'check_box_outline_blank'}}</mat-icon\n>\n} @if (none) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  [matTooltipShowDelay]=\"3000\"\n  >menu_open</mat-icon\n>\n} @if (addValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >playlist_add</mat-icon\n>\n} @if (deleteValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >delete_outline</mat-icon\n>\n}\n", styles: [".cursor{cursor:pointer}.center{display:flex;justify-content:center;align-items:center;width:100%}.center-log{display:flex;justify-content:center;align-items:center;margin-bottom:-12px}.edit{margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ButtonRenderer, decorators: [{
+            type: Component,
+            args: [{ selector: 'ntybase-button-renderer', imports: [MatIconModule, MatTooltipModule, MatMenuModule], host: { 'ntybase-id': 'ButtonRenderer' }, template: "@if (editValid || popupEditValid) {\n<mat-icon\n  class=\"cursor center edit\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"4000\"\n  >edit</mat-icon\n>\n} @if (historyValid) {\n<mat-icon\n  class=\"cursor center-log\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >log</mat-icon\n>\n} @if (historyValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >history</mat-icon\n>\n} @if (lineValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >menu_open</mat-icon\n>\n} @if (popupSelectValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >content_copy</mat-icon\n>\n} @if (toggleValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >{{toggleValue ? 'check_box' : 'check_box_outline_blank'}}</mat-icon\n>\n} @if (none) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  [matTooltipShowDelay]=\"3000\"\n  >menu_open</mat-icon\n>\n} @if (addValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >playlist_add</mat-icon\n>\n} @if (deleteValid) {\n<mat-icon\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >delete_outline</mat-icon\n>\n}\n", styles: [".cursor{cursor:pointer}.center{display:flex;justify-content:center;align-items:center;width:100%}.center-log{display:flex;justify-content:center;align-items:center;margin-bottom:-12px}.edit{margin-top:8px}\n"] }]
+        }] });
+
+class CheckboxRenderer {
+    params = null;
+    label = '';
+    type = '';
+    supportClick = false;
+    checked = null;
+    agInit(params) {
+        this.onProcess(params);
+    }
+    refresh(params) {
+        if (params != null) {
+            this.onProcess(params);
+        }
+        return true;
+    }
+    onProcess(params) {
+        this.params = params;
+        this.checked = this.params.value ?? false;
+        this.type = this.params.type || null;
+        this.label = this.params.label || null;
+        if (this.type != null) {
+            if (this.type.toLowerCase().trim() == 'click') {
+                this.supportClick = true;
+            }
         }
     }
-    getStoredFilterMode() {
-        try {
-            const stored = localStorage.getItem(FILTER_MODE_KEY);
-            return stored !== null ? JSON.parse(stored) : true;
+    onClick(event) {
+        this.checked = !this.checked;
+        if (this.params.onClick instanceof Function) {
+            // put anything into params u want pass into parents component
+            const params = {
+                event: event,
+                rowData: this.params.node.data,
+                type: this.type,
+                checked: this.checked,
+                // ...something
+            };
+            this.params.onClick(params);
         }
-        catch {
-            return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CheckboxRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CheckboxRenderer, isStandalone: true, selector: "ntybase-checkbox-renderer", host: { attributes: { "ntybase-id": "CheckboxRenderer" } }, ngImport: i0, template: "@if (supportClick) {\n<input\n  id=\"checkbox\"\n  type=\"checkbox\"\n  [checked]=\"checked\"\n  (click)=\"onClick($event)\"\n/>\n} @if (!supportClick) {\n<input id=\"checkbox\" type=\"checkbox\" [checked]=\"params.value\" disabled />\n}\n\n<label for=\"checkbox\">{{label}}</label>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CheckboxRenderer, decorators: [{
+            type: Component,
+            args: [{ selector: 'ntybase-checkbox-renderer', imports: [], host: { 'ntybase-id': 'CheckboxRenderer' }, template: "@if (supportClick) {\n<input\n  id=\"checkbox\"\n  type=\"checkbox\"\n  [checked]=\"checked\"\n  (click)=\"onClick($event)\"\n/>\n} @if (!supportClick) {\n<input id=\"checkbox\" type=\"checkbox\" [checked]=\"params.value\" disabled />\n}\n\n<label for=\"checkbox\">{{label}}</label>\n" }]
+        }] });
+
+ModuleRegistry.registerModules([AllCommunityModule, StatusBarModule, ClientSideRowModelModule, ClipboardModule, ExcelExportModule, ColumnMenuModule,
+    ContextMenuModule, CellSelectionModule, HighlightChangesModule, RowSelectionModule,]);
+// AgGrid Dark Mode Row Style
+class NettyAgGridListBase extends NettyAgGridBase {
+    // ********************************************
+    // *** INPUTS                               ***
+    // ********************************************
+    // Filter section
+    hasFilter = input(false, ...(ngDevMode ? [{ debugName: "hasFilter" }] : [])); // Does the component have a filter
+    isFilterValid = signal(true, ...(ngDevMode ? [{ debugName: "isFilterValid" }] : [])); // Can the filter be used
+    isFilterExpanded = linkedSignal({ ...(ngDevMode ? { debugName: "isFilterExpanded" } : {}), source: () => ({
+            embedded: this.isEmbedded(),
+            hasFilter: this.hasFilter(),
+            valid: this.isFilterValid(),
+        }),
+        computation: (s) => {
+            if (s.embedded || !s.hasFilter)
+                return false;
+            return s.valid;
+        } });
+    filterRefreshTrigger = signal(0, ...(ngDevMode ? [{ debugName: "filterRefreshTrigger" }] : []));
+    /**
+     * Triggers the filter component to refresh its data
+     */
+    refreshFilterData() {
+        let value = this.filterRefreshTrigger();
+        if (value > 10000) {
+            value = 0;
         }
+        value++;
+        this.filterRefreshTrigger.set(value);
     }
+    // Open component management
+    openEditComponentInPopup = signal(false, ...(ngDevMode ? [{ debugName: "openEditComponentInPopup" }] : []));
+    // Services
+    router = inject(Router);
+    routerActive = inject(ActivatedRoute);
+    dialog = inject(MatDialog);
+    // Parse query parameters
+    queryParameterGUID = toSignal(this.routerActive.queryParamMap.pipe(map((params) => params.get('parameters')), map((value) => this.parseOrReturnValue(value))), {
+        initialValue: null, // set initial value to null
+    });
+    queryParameterType = toSignal(this.routerActive.queryParamMap.pipe(map((params) => params.get('type')), map((value) => this.parseOrReturnValue(value))), {
+        initialValue: null, // set initial value to null
+    });
+    openInPopup = signal(false, ...(ngDevMode ? [{ debugName: "openInPopup" }] : [])); // true: Open add / edit component in popup
+    // ---------------------------------------------------
+    // --- RECORD LIST                                 ---
+    // ---------------------------------------------------
+    nettyAppsProxy = injectNettyStandardProxy(this.componentName());
     /**
      * Component initialization lifecycle hook
      */
     async ngOnInit() {
+        this.nettyAppsProxy = injectNettyStandardProxy(this.componentName());
         await this.setAccessRights();
         const savedSearchValue = sessionStorage.getItem(this.searchValueName());
         if (savedSearchValue) {
             this.searchValue.set(savedSearchValue);
-            this.loadData(savedSearchValue);
         }
-        else {
+        if (!this.hasFilter()) {
             this.loadData();
         }
         // Load user grid preferences
         await this.nettyAgGridService.copyGridUserPereferenceToLocal(this.preferenceType());
+        await this.AfterOnInit();
     }
     parseOrReturnValue(value) {
         if (value) {
@@ -1585,53 +1831,6 @@ class NettyAgGridBase extends NettyAppsBase {
         }
         return null;
     }
-    // Common grid ready handler
-    onGridReady(params) {
-        this.gridApi = params.api;
-        this.setAgGridTranslations();
-        this.gridApi.addEventListener('selectionChanged', () => {
-            // Null-safe approach
-            const selectedNodes = this.gridApi?.getSelectedNodes?.() || [];
-            this.selectedRows.set(selectedNodes.map((node) => node.data));
-        });
-        if (this.searchValue()) {
-            this.gridApi.setGridOption('quickFilterText', this.searchValue());
-        }
-    }
-    onFirstDataRendered(params) {
-        //TODO: Fix this
-        try {
-            this.nettyAgGridService.loadGridUserPreference(this.preferenceType(), this.gridApi);
-            this.expandCollapse();
-        }
-        catch (error) {
-            console.log('OnFirstDataRendered error:', error);
-        }
-    }
-    // Save the user parameters
-    saveGrid(params) {
-        const gridState = {
-            columnState: this.gridApi.getColumnState(),
-        };
-        this.nettyAgGridService.saveGridUserPreference(this.preferenceType(), this.gridApi, JSON.stringify(gridState));
-    }
-    // Grid utilities
-    expandCollapse() {
-        this.gridExpanded.set(this.nettyAgGridService.expandCollapseGrid(this.gridApi, this.gridExpanded()));
-    }
-    quickSearch(searchStr = '') {
-        this.searchValue.set(searchStr);
-        if (this.gridApi) {
-            this.gridApi.setGridOption('quickFilterText', this.searchValue());
-        }
-        sessionStorage.setItem(this.searchValueName(), this.searchValue());
-    }
-    /**
-     * Handle back button click
-     */
-    backClicked() {
-        this.commonService.goBack();
-    }
     gotoURL(routePrefix, rightSidenav = [], parameters, type, dialogComponent = null, isNewTab = false, isPopup = this.isEmbedded()) {
         const baseHref = this.environment.getBaseHref().endsWith('/')
             ? this.environment.getBaseHref().slice(0, -1) // Sondaki / işaretini kaldır
@@ -1705,8 +1904,8 @@ class NettyAgGridBase extends NettyAppsBase {
         ]);
     }
     toggleOpenMode() {
-        const newMode = !this.openInPopup();
-        this.openInPopup.set(newMode);
+        const newMode = !this.openEditComponentInPopup();
+        this.openEditComponentInPopup.set(newMode);
         localStorage.setItem('openInPopup', JSON.stringify(newMode));
         const message = newMode ? '@openInPopup' : '@openInSidenav';
         this.alertService.showSuccess(message);
@@ -1727,7 +1926,7 @@ class NettyAgGridBase extends NettyAppsBase {
         };
         const savedMode = localStorage.getItem('openInPopup');
         if (savedMode !== null) {
-            this.openInPopup.set(JSON.parse(savedMode) === true);
+            this.openEditComponentInPopup.set(JSON.parse(savedMode) === true);
         }
         this.translateService.onLangChange.subscribe(() => {
             this.setAgGridTranslations();
@@ -1746,6 +1945,7 @@ class NettyAgGridBase extends NettyAppsBase {
                 this.parameterType.set(this.queryParameterType());
             }
             if (this.hasValidValue(this.parameterGUID)) {
+                this.isFilterValid.set(false);
                 this.setFilter();
                 this.loadData();
             }
@@ -1764,157 +1964,47 @@ class NettyAgGridBase extends NettyAppsBase {
                     case 'update':
                         this.updateRowInGrid(update.data);
                         break;
-                }
-            }
-        });
-        effect(() => {
-            this.onElementSelect.emit(this.selectedRows());
-        });
-        // Manage filter expanded state
-        effect(() => {
-            if (this.isEmbedded()) {
-                this.isFilterExpanded.set(false);
-            }
-            else {
-                this.isFilterExpanded.set(this.isFilterValid());
-            }
-            this.showHideEmbeddedColumnsAsync();
-        });
-    }
-    onReverseIsFilterValid() {
-        if (this.isEmbedded()) {
-            this.isFilterExpanded.set(false);
-        }
-        else {
-            this.isFilterValid.update((a) => !a);
-        }
-    }
-    /**
-     * Validates if the given value is equal to null,undefined or ''
-     * @param value
-     * @returns true if has a valid value
-     */
-    hasValidValue(value) {
-        if (value == null || value == undefined) {
-            return false;
-        }
-        if (value == '') {
-            return false;
-        }
-        return true;
-    }
-    setAgGridTranslations() {
-        if (this.gridApi) {
-            this.gridApi.setGridOption('localeText', {
-                // Status panel translate
-                totalRows: this.translateService.instant('AG_GRID.TOTAL_ROWS'),
-                filteredRows: this.translateService.instant('AG_GRID.FILTERED_ROWS'),
-                selectedRows: this.translateService.instant('AG_GRID.SELECTED_ROWS'),
-                noRowsToShow: this.translateService.instant('AG_GRID.NO_ROWS_TO_SHOW'),
-                loadingOoo: this.translateService.instant('AG_GRID.LOADING'),
-                // Context menu translations
-                copy: this.translateService.instant('AG_GRID.COPY'),
-                copyWithHeaders: this.translateService.instant('AG_GRID.COPY_WITH_HEADERS'),
-                copyWithGroupHeaders: this.translateService.instant('AG_GRID.COPY_WITH_GROUP_HEADERS'),
-                paste: this.translateService.instant('AG_GRID.PASTE'),
-                export: this.translateService.instant('AG_GRID.EXPORT'),
-                csvExport: this.translateService.instant('AG_GRID.CSV_EXPORT'),
-                excelExport: this.translateService.instant('AG_GRID.EXCEL_EXPORT'),
-                pinColumn: this.translateService.instant('AG_GRID.PIN_COLUMN'),
-                pinLeft: this.translateService.instant('AG_GRID.PIN_LEFT'),
-                pinRight: this.translateService.instant('AG_GRID.PIN_RIGHT'),
-                noPin: this.translateService.instant('AG_GRID.NO_PIN'),
-                sortAscending: this.translateService.instant('AG_GRID.SORT_ASCENDING'),
-                sortDescending: this.translateService.instant('AG_GRID.SORT_DESCENDING'),
-                autosizeThisColumn: this.translateService.instant('AG_GRID.AUTOSIZE_THIS_COLUMN'),
-                autosizeAllColumns: this.translateService.instant('AG_GRID.AUTOSIZE_ALL_COLUMNS'),
-                resetColumns: this.translateService.instant('AG_GRID.RESET_COLUMNS'),
-                expandAll: this.translateService.instant('AG_GRID.EXPAND_ALL'),
-                collapseAll: this.translateService.instant('AG_GRID.COLLAPSE_ALL'),
-                exportToExcel: this.translateService.instant('AG_GRID.EXPORT_TO_EXCEL'),
-                sheetName: this.translateService.instant('AG_GRID.SHEET_NAME'),
-                exportAsExcelTable: this.translateService.instant('AG_GRID.EXPORT_AS_EXCEL_TABLE'),
-                rangeSelectTo: this.translateService.instant('AG_GRID.RANGE_SELECT_TO'),
-                rangeSelectFrom: this.translateService.instant('AG_GRID.RANGE_SELECT_FROM'),
-                rangeSelectCopy: this.translateService.instant('AG_GRID.RANGE_SELECT_COPY'),
-                rangeSelectChart: this.translateService.instant('AG_GRID.RANGE_SELECT_CHART'),
-                pasteAll: this.translateService.instant('AG_GRID.CLIPBOARD_PASTE'),
-                pasteWithoutHeader: this.translateService.instant('AG_GRID.CLIPBOARD_PASTE_WITHOUT_HEADER'),
-                copyAll: this.translateService.instant('AG_GRID.CLIPBOARD_COPY'),
-                cut: this.translateService.instant('AG_GRID.CLIPBOARD_CUT'),
-                // Pagination translations
-                page: this.translateService.instant('AG_GRID.PAGE'),
-                more: this.translateService.instant('AG_GRID.MORE'),
-                to: this.translateService.instant('AG_GRID.TO'),
-                of: this.translateService.instant('AG_GRID.OF'),
-                next: this.translateService.instant('AG_GRID.NEXT'),
-                last: this.translateService.instant('AG_GRID.LAST'),
-                first: this.translateService.instant('AG_GRID.FIRST'),
-                previous: this.translateService.instant('AG_GRID.PREVIOUS'),
-                pageSizeSelectorLabel: this.translateService.instant('AG_GRID.PAGE_SIZE_SELECTOR_LABEL'),
-                // Set Filter
-                selectAll: this.translateService.instant('AG_GRID.SELECT_ALL'),
-                selectAllSearchResults: this.translateService.instant('AG_GRID.SELECT_ALL_SEARCH_RESULTS'),
-                searchOoo: this.translateService.instant('AG_GRID.SEARCH_OOO'),
-                blanks: this.translateService.instant('AG_GRID.BLANKS'),
-                noMatches: this.translateService.instant('AG_GRID.NO_MATCHES'),
-                // Number Filter & Text Filter
-                filterOoo: this.translateService.instant('AG_GRID.FILTER_OOO'),
-                equals: this.translateService.instant('AG_GRID.EQUALS'),
-                notEqual: this.translateService.instant('AG_GRID.NOT_EQUAL'),
-                blank: this.translateService.instant('AG_GRID.BLANK'),
-                notBlank: this.translateService.instant('AG_GRID.NOT_BLANK'),
-                empty: this.translateService.instant('AG_GRID.EMPTY'),
-                // Number Filter
-                lessThan: this.translateService.instant('AG_GRID.LESS_THAN'),
-                greaterThan: this.translateService.instant('AG_GRID.GREATER_THAN'),
-                lessThanOrEqual: this.translateService.instant('AG_GRID.LESS_THAN_OR_EQUAL'),
-                greaterThanOrEqual: this.translateService.instant('AG_GRID.GREATER_THAN_OR_EQUAL'),
-                inRange: this.translateService.instant('AG_GRID.IN_RANGE'),
-                inRangeStart: this.translateService.instant('AG_GRID.IN_RANGE_START'),
-                inRangeEnd: this.translateService.instant('AG_GRID.IN_RANGE_END'),
-                // Text Filter
-                contains: this.translateService.instant('AG_GRID.CONTAINS'),
-                notContains: this.translateService.instant('AG_GRID.NOT_CONTAINS'),
-                startsWith: this.translateService.instant('AG_GRID.STARTS_WITH'),
-                endsWith: this.translateService.instant('AG_GRID.ENDS_WITH'),
-                // Date Filter
-                dateFormatOoo: this.translateService.instant('AG_GRID.DATE_FORMAT_OOO'),
-                // Filter Conditions
-                andCondition: this.translateService.instant('AG_GRID.AND_CONDITION'),
-                orCondition: this.translateService.instant('AG_GRID.OR_CONDITION'),
-                // Filter Buttons
-                applyFilter: this.translateService.instant('AG_GRID.APPLY_FILTER'),
-                resetFilter: this.translateService.instant('AG_GRID.RESET_FILTER'),
-                clearFilter: this.translateService.instant('AG_GRID.CLEAR_FILTER'),
-                cancelFilter: this.translateService.instant('AG_GRID.CANCEL_FILTER'),
-                // Filter Titles
-                textFilter: this.translateService.instant('AG_GRID.TEXT_FILTER'),
-                numberFilter: this.translateService.instant('AG_GRID.NUMBER_FILTER'),
-                dateFilter: this.translateService.instant('AG_GRID.DATE_FILTER'),
-                setFilter: this.translateService.instant('AG_GRID.SET_FILTER'),
-            });
-        }
+                }
+            }
+        });
+        effect(() => { this.onElementSelect.emit(this.selectedRows()); });
+        // Manage filter expanded state
+        effect(() => {
+            this.isEmbedded();
+            this.showHideEmbeddedColumnsAsync();
+        });
+    }
+    onReverseIsFilterValid() {
+        this.isFilterValid.update((a) => !a);
     }
     /**
-     * Update a single row in the grid
-     * @param rowData The updated row data
-     * @param idField The field name that serves as unique identifier (default: 'id')
+     * Validates if the given value is equal to null,undefined or ''
+     * @param value
+     * @returns true if has a valid value
      */
-    updateRowInGrid(rowData, idField = 'id') {
-        const rowNode = this.gridApi.getRowNode(rowData[idField]);
-        if (rowNode) {
-            rowNode.setData(rowData);
-            const params = {
-                rowNodes: [rowNode],
-                force: true,
-                suppressFlash: false,
-            };
-            this.gridApi.refreshCells(params);
+    hasValidValue(value) {
+        if (value == null || value == undefined) {
+            return false;
         }
-        else {
-            this.loadData(); // Reload all data if row not found
+        if (value == '') {
+            return false;
+        }
+        return true;
+    }
+    // *********************************************************
+    // *** Data Management Functions                         ***
+    // ********************************************************* 
+    loadData() {
+        if (this.hasFilter()) {
+            this.setData([]);
+            return;
         }
+        this.nettyAppsProxy.select(this.record).subscribe({
+            next: (data) => {
+                this.setData(data);
+            },
+            error: (err) => this.alertService.showError('@dataLoadFailed', err),
+        });
     }
     async deleteSelected() {
         if (!this.gridApi)
@@ -1927,96 +2017,61 @@ class NettyAgGridBase extends NettyAppsBase {
         const confirmed = await this.alertService.showConfirm('@confirmDeleteSelectedRecords');
         if (confirmed) {
             const selectedRows = selectedNodes.map((node) => node.data);
-            this.deleteRows?.(selectedRows);
-        }
-    }
-    async refreshData() {
-        try {
-            this.loadData();
-            await this.alertService.showAlert('@dataRefreshedSuccessfully');
-        }
-        catch (err) {
-            this.alertService.showError(err);
+            this.deleteRows(selectedRows);
         }
     }
-    async setAccessRights() {
-        this.authenticationList = await lastValueFrom(this.sysFunctionProxy.getAuthentication(this.componentName())).catch((e) => {
-            return throwError(() => new Error(e));
+    deleteRows(rows) {
+        this.nettyAppsProxy.deleteList(rows).subscribe({
+            next: () => {
+                this.gridApi.applyTransaction({ remove: rows });
+                this.alertService.showSuccess('@recordDeletedSuccessfully');
+            },
+            error: (err) => this.alertService.showError(err),
         });
-        try {
-            this.allowRead.set(this.authenticationList.find((f) => f.action == 'read')?.allow ?? false);
-            if (this.allowRead() == false) {
-                this.commonService.userNotAllowedToRead();
-                return false;
-            }
-            if (this.allowRead() == true && !this.readOnly()) {
-                this.allowAdd.set(this.authenticationList.find((f) => f.action == 'add')?.allow ?? false);
-                this.allowEdit.set(this.authenticationList.find((f) => f.action == 'edit')?.allow ??
-                    false);
-                this.allowDelete.set(this.authenticationList.find((f) => f.action == 'delete')?.allow ??
-                    false);
-                this.allowLog.set(this.authenticationList.find((f) => f.action == 'logAccess')?.allow ??
-                    false);
-            }
-            else {
-                this.allowAdd.set(false);
-                this.allowEdit.set(false);
-                this.allowDelete.set(false);
-                this.allowLog.set(false);
-            }
-        }
-        catch (error) {
-            this.allowAdd.set(false);
-            this.allowEdit.set(false);
-            this.allowDelete.set(false);
-            this.allowLog.set(false);
-            return false;
-        }
-        this.accessRightsProcessed.set(true);
-        return true;
-    }
-    onFilterTextBoxVisibilityChange(isOpen) {
-        this.menuValid.set(!isOpen);
-    }
-    setFilter() { } //override this to set a filter
-    popupClose() {
-        this.selectedElement.emit(null);
-    }
-    // ---------------------------------------------
-    // --- Functions to Show / Hide Grid Columns ---
-    // ---------------------------------------------
-    onShowHideColumns() {
-        this.gridColumnsVisible.update((a) => !a);
-        this.showHideColumnsAsync();
     }
-    showHideColumnsAsync() {
-        setTimeout(() => this.showHideColumns(), 400);
-    }
-    showHideColumns() {
-        var fields = this.columnDefs()
-            .filter((columnDef) => columnDef.ntyHide === 'x')
-            .map((columnDef) => columnDef.field);
-        this.gridApi?.setColumnsVisible(fields, this.gridColumnsVisible());
-    }
-    showHideEmbeddedColumnsAsync() {
-        setTimeout(() => this.showHideEmbeddedColumns(), 100);
-    }
-    showHideEmbeddedColumns() {
-        if (this.columnDefs() == undefined || this.columnDefs() == null) {
-            return;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NettyAgGridListBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: NettyAgGridListBase, isStandalone: true, selector: "ntybase-ag-grid-list-base", inputs: { hasFilter: { classPropertyName: "hasFilter", publicName: "hasFilter", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "ntybase-id": "NettyAgGridListBase" } }, usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NettyAgGridListBase, decorators: [{
+            type: Component,
+            args: [{ selector: 'ntybase-ag-grid-list-base', imports: [], template: ``, host: { 'ntybase-id': 'NettyAgGridListBase' } }]
+        }], ctorParameters: () => [], propDecorators: { hasFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasFilter", required: false }] }] } });
+
+class NettyAgGridLogBase extends NettyAgGridBase {
+    // ---------------------------------------------------
+    // --- RECORD LIST                                 ---
+    // ---------------------------------------------------
+    nettyAppsProxy = injectNettyStandardLogProxy(this.componentName());
+    /**
+     * Component initialization lifecycle hook
+     */
+    async ngOnInit() {
+        this.nettyAppsProxy = injectNettyStandardLogProxy(this.componentName());
+        await this.setAccessRights();
+        const savedSearchValue = sessionStorage.getItem(this.searchValueName());
+        if (savedSearchValue) {
+            this.searchValue.set(savedSearchValue);
         }
-        var fields = this.columnDefs()
-            .filter((columnDef) => columnDef.ntyEmbeddedHide == 'x')
-            .map((columnDef) => columnDef.field);
-        this.gridApi?.setColumnsVisible(fields, !this.isEmbedded());
+        this.loadData();
+        // Load user grid preferences
+        await this.nettyAgGridService.copyGridUserPereferenceToLocal(this.preferenceType());
+        await this.AfterOnInit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NettyAgGridBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: NettyAgGridBase, isStandalone: true, selector: "ntybase-ag-grid-base", inputs: { readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, popupFilterValid: { classPropertyName: "popupFilterValid", publicName: "popupFilterValid", isSignal: true, isRequired: false, transformFunction: null }, popupValid: { classPropertyName: "popupValid", publicName: "popupValid", isSignal: true, isRequired: false, transformFunction: null }, isEmbedded: { classPropertyName: "isEmbedded", publicName: "isEmbedded", isSignal: true, isRequired: false, transformFunction: null }, componantParameterGUID: { classPropertyName: "componantParameterGUID", publicName: "componantParameterGUID", isSignal: true, isRequired: false, transformFunction: null }, componantParameterType: { classPropertyName: "componantParameterType", publicName: "componantParameterType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onElementSelect: "onElementSelect", selectedElement: "selectedElement" }, host: { attributes: { "ntybase-id": "NettyAgGridBase" } }, usesInheritance: true, ngImport: i0, template: "<p>ag-grid-base works!</p>\n", styles: [""] });
+    loadData() {
+        this.nettyAppsProxy.selectLog(this.record).subscribe({
+            next: (data) => {
+                this.setData(data);
+            },
+            error: (err) => this.alertService.showError('@dataLoadFailed', err),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NettyAgGridLogBase, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: NettyAgGridLogBase, isStandalone: true, selector: "ntybase-ag-grid-log-base", host: { attributes: { "ntybase-id": "NettyAgGridLogBase" } }, usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NettyAgGridBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NettyAgGridLogBase, decorators: [{
             type: Component,
-            args: [{ selector: 'ntybase-ag-grid-base', imports: [], host: { 'ntybase-id': 'NettyAgGridBase' }, template: "<p>ag-grid-base works!</p>\n" }]
-        }], ctorParameters: () => [], propDecorators: { readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], popupFilterValid: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupFilterValid", required: false }] }], popupValid: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupValid", required: false }] }], isEmbedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEmbedded", required: false }] }], componantParameterGUID: [{ type: i0.Input, args: [{ isSignal: true, alias: "componantParameterGUID", required: false }] }], componantParameterType: [{ type: i0.Input, args: [{ isSignal: true, alias: "componantParameterType", required: false }] }], onElementSelect: [{ type: i0.Output, args: ["onElementSelect"] }], selectedElement: [{ type: i0.Output, args: ["selectedElement"] }] } });
+            args: [{ selector: 'ntybase-ag-grid-log-base', imports: [], template: ``, host: { 'ntybase-id': 'NettyAgGridLogBase' } }]
+        }] });
 
 class NettyAgGridSaveBase extends NettyAppsBase {
     // Services
@@ -2030,6 +2085,11 @@ class NettyAgGridSaveBase extends NettyAppsBase {
     parameters = input('', ...(ngDevMode ? [{ debugName: "parameters" }] : []));
     embedded = input(false, ...(ngDevMode ? [{ debugName: "embedded" }] : []));
     isEmbedded = input(false, ...(ngDevMode ? [{ debugName: "isEmbedded" }] : []));
+    // ---------------------------------------------------
+    // --- RECORD LIST                                 ---
+    // ---------------------------------------------------
+    nettyAppsProxy = injectNettyStandardProxy('');
+    recordType = signal('', ...(ngDevMode ? [{ debugName: "recordType" }] : []));
     currentItem = signal({}, ...(ngDevMode ? [{ debugName: "currentItem" }] : []));
     initialItem = {};
     // Form tracking
@@ -2038,12 +2098,29 @@ class NettyAgGridSaveBase extends NettyAppsBase {
     // Dialog related properties
     dialogRef = inject((MatDialogRef), { optional: true });
     dialogData = inject(MAT_DIALOG_DATA, { optional: true });
+    constructor() {
+        super();
+        effect(() => {
+            this.parameters();
+            this.loadDetailData();
+        });
+    }
+    async ngOnInit() {
+        this.loadDetailData();
+    }
     // Controls the visibility of additional editable fields (e.g., password, extra settings)
     // When true, certain input fields become visible for editing
     updateValid = signal(false, ...(ngDevMode ? [{ debugName: "updateValid" }] : []));
     setUpdateValid(value) {
         this.updateValid.set(value);
     }
+    /**
+     * Initialize parameters. This method is called in ngOnInit or constructor
+     */
+    initParameters(urlPath) {
+        this.nettyAppsProxy = injectNettyStandardProxy(urlPath);
+        this.recordType.set(urlPath);
+    }
     /**
      * Determine view mode based on current route
      */
@@ -2058,9 +2135,6 @@ class NettyAgGridSaveBase extends NettyAppsBase {
             this.viewMode.set('fullscreen');
         }
     }
-    ngOnInit() {
-        this.loadDetailData();
-    }
     /**
      * Set data to the form while preserving any unsaved changes
      * @param item - Data object of type T to populate the form
@@ -2081,8 +2155,9 @@ class NettyAgGridSaveBase extends NettyAppsBase {
      * @param data - Data to populate the new instance
      */
     createItemInstance(data) {
-        // Default implementation - child classes can override this
-        return { ...data };
+        const instance = this.createNewRecord();
+        Object.assign(instance, data);
+        return instance;
     }
     /**
      * Check for form changes
@@ -2120,11 +2195,6 @@ class NettyAgGridSaveBase extends NettyAppsBase {
         }
         return '';
     }
-    ngOnChanges(changes) {
-        if (changes['parameters']) {
-            this.loadDetailData();
-        }
-    }
     /**
      * Close sidenav or navigate back
      */
@@ -2178,6 +2248,103 @@ class NettyAgGridSaveBase extends NettyAppsBase {
         }
         return true;
     }
+    /**
+     * Save data to API
+     * Handles both create and update operations based on record existence
+     */
+    saveRecord() {
+        if (!this.validateSaveRecord(this.currentItem().getPK())) {
+            return;
+        }
+        if (this.currentItem().getPK()) {
+            this.updateRecord();
+            return;
+        }
+        this.insertRecord();
+    }
+    /**
+     * Create new record
+     */
+    insertRecord() {
+        const createData = {};
+        const currentItem = this.currentItem();
+        Object.keys(currentItem).forEach((key) => {
+            if (currentItem[key] !== undefined && currentItem[key] !== null && currentItem[key] !== '') {
+                createData[key] = currentItem[key];
+            }
+        });
+        this.nettyAppsProxy.insert(createData).subscribe({
+            next: (newRecord) => {
+                this.initializeFormData(newRecord);
+                this.commonService.notifyUpdate(this.recordType(), 'add', newRecord);
+                this.closeSidenav();
+                this.alertService.showSuccess('@recordCreatedSuccessfully');
+            },
+            error: (err) => console.error('@creationFailed:', err),
+        });
+    }
+    /**
+     * Update record
+     */
+    updateRecord() {
+        const changes = this.initialItem.compare(this.currentItem());
+        const updateData = this.createNewRecord();
+        Object.assign(updateData, changes);
+        updateData.setPK(this.currentItem().getPK());
+        this.nettyAppsProxy.update(updateData).subscribe({
+            next: (updatedRecord) => {
+                this.initializeFormData(updatedRecord);
+                this.commonService.notifyUpdate('Item', 'update', updatedRecord);
+                this.closeSidenav();
+                this.alertService.showSuccess('@recordUpdatedSuccessfully');
+            },
+            error: (err) => this.alertService.showError('@updateFailed', err),
+        });
+    }
+    /**
+     * Load data from API based on GUID
+     * Handles both new record creation and existing record editing
+     * guid - Unique identifier of the record
+     */
+    loadDetailData() {
+        const guid = this.getGuidFromParameters();
+        if (!guid) {
+            // If no GUID provided, initialize a new record
+            const newRecord = this.createNewRecord();
+            this.initializeFormData(newRecord);
+            this.updateValid.set(true);
+            return;
+        }
+        // Fetch existing record from API
+        this.nettyAppsProxy.selectGUID(guid).subscribe({
+            next: (record) => {
+                if (!record || !record.getPK()) {
+                    this.alertService.showError('@recordNotFound');
+                    const cleanPath = this.commonService.getCleanUrlPath();
+                    this.router.navigate([cleanPath]);
+                    return;
+                }
+                this.initializeFormData(record);
+                this.alertService.showSuccess('@dataLoadSuccess');
+                // Ensure sidenav is visible when in sidenav mode
+                if (this.viewMode() === 'sidenav') {
+                    this.commonService.toggleRightSidenav(true);
+                }
+            },
+            error: (err) => {
+                this.alertService.showError('@dataLoadFailed');
+                this.commonService.toggleRightSidenav(false);
+                // Redirect to user list on error in fullscreen mode
+                if (this.viewMode() === 'fullscreen') {
+                    const cleanPath = this.commonService.getCleanUrlPath();
+                    this.router.navigate([cleanPath]);
+                }
+            },
+        });
+    }
+    // ***************************************************
+    // *** gotoURL Methods                             ***
+    // ***************************************************
     gotoURL(routePrefix, rightSidenav = [], parameters, type, dialogComponent = null, isNewTab = false, isPopup = this.isEmbedded()) {
         const baseHref = this.environment.getBaseHref().endsWith('/')
             ? this.environment.getBaseHref().slice(0, -1) // Sondaki / işaretini kaldır
@@ -2250,18 +2417,18 @@ class NettyAgGridSaveBase extends NettyAppsBase {
             },
         ]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NettyAgGridSaveBase, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: NettyAgGridSaveBase, isStandalone: true, selector: "ntybase-ag-grid-save-base", inputs: { parameters: { classPropertyName: "parameters", publicName: "parameters", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, isEmbedded: { classPropertyName: "isEmbedded", publicName: "isEmbedded", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "saveForm", first: true, predicate: ["saveForm"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<p>ag-grid-save-base works!</p>\n", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NettyAgGridSaveBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: NettyAgGridSaveBase, isStandalone: true, selector: "ntybase-ag-grid-save-base", inputs: { parameters: { classPropertyName: "parameters", publicName: "parameters", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, isEmbedded: { classPropertyName: "isEmbedded", publicName: "isEmbedded", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "saveForm", first: true, predicate: ["saveForm"], descendants: true }], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NettyAgGridSaveBase, decorators: [{
             type: Component,
-            args: [{ selector: 'ntybase-ag-grid-save-base', imports: [], template: "<p>ag-grid-save-base works!</p>\n" }]
-        }], propDecorators: { parameters: [{ type: i0.Input, args: [{ isSignal: true, alias: "parameters", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], isEmbedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEmbedded", required: false }] }], saveForm: [{
+            args: [{ selector: 'ntybase-ag-grid-save-base', imports: [], template: `` }]
+        }], ctorParameters: () => [], propDecorators: { parameters: [{ type: i0.Input, args: [{ isSignal: true, alias: "parameters", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], isEmbedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEmbedded", required: false }] }], saveForm: [{
                 type: ViewChild,
                 args: ['saveForm']
             }] } });
 
-class ExcelImportBase extends NettyAgGridBase {
+class ExcelImportBase extends NettyAgGridListBase {
     dataList = [];
     wopts = { bookType: 'xlsx', type: 'array' };
     fileName = 'PayrollJournalTrans.xlsx';
@@ -2290,11 +2457,11 @@ class ExcelImportBase extends NettyAgGridBase {
         reader.readAsBinaryString(target.files[0]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ExcelImportBase, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ExcelImportBase, isStandalone: true, selector: "ntybase-excel-import-base", usesInheritance: true, ngImport: i0, template: "<p>excel-import-base works!</p>\n", styles: [""] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ExcelImportBase, isStandalone: true, selector: "ntybase-excel-import-base", usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ExcelImportBase, decorators: [{
             type: Component,
-            args: [{ selector: 'ntybase-excel-import-base', imports: [], template: "<p>excel-import-base works!</p>\n" }]
+            args: [{ selector: 'ntybase-excel-import-base', imports: [], template: `` }]
         }] });
 
 class RangeDateTimeFilter {
@@ -2589,7 +2756,7 @@ class RangeDateTimeFilter {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RangeDateTimeFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: RangeDateTimeFilter, isStandalone: true, selector: "ntybase-range-date-time-filter", host: { attributes: { "ntybase-id": "RangeDateTimeFilter" } }, ngImport: i0, template: "<div class=\"custom-filter\">\n  <div class=\"custom-filter__header\">\n    <label class=\"custom-filter__title\">\n      {{ '@dateTimeFilter' | translate }}\n    </label>\n    <input\n      type=\"text\"\n      class=\"custom-filter__input\"\n      [placeholder]=\"'@dateTimeFilterPlaceholder' | translate\"\n      [value]=\"filterText\"\n      (input)=\"onFilterTextChanged($event)\"\n    />\n  </div>\n\n  <div class=\"custom-filter__help\">\n    <strong class=\"custom-filter__help-title\">\n      {{ '@formats' | translate }}:\n    </strong>\n\n    <div class=\"custom-filter__format\">\n      {{ '@range' | translate }}:\n      <code>start..end</code>\n      <span class=\"custom-filter__example\">(today..yesterday)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@singleDate' | translate }}:\n      <code>YYYY-MM-DD</code>\n      <span class=\"custom-filter__example\">(2024-05-15)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@dateTime' | translate }}:\n      <code>YYYY-MM-DD HH:MM</code>\n      <span class=\"custom-filter__example\">(2024-05-15 14:30)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@multiple' | translate }}:\n      <code>date1,date2,start..end</code>\n    </div>\n\n    <strong class=\"custom-filter__subtitle\">\n      {{ '@specialKeywords' | translate }}:\n    </strong>\n\n    <div class=\"custom-filter__format\">\n      {{ '@turkish' | translate }}:\n      <span class=\"custom-filter__keywords\">\n        <code class=\"custom-filter__keyword\">bug\u00FCn</code>\n        <code class=\"custom-filter__keyword\">d\u00FCn</code>\n        <code class=\"custom-filter__keyword\">bu hafta</code>\n        <code class=\"custom-filter__keyword\">bu ay</code>\n      </span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@english' | translate }}:\n      <span class=\"custom-filter__keywords\">\n        <code class=\"custom-filter__keyword\">today</code>\n        <code class=\"custom-filter__keyword\">yesterday</code>\n        <code class=\"custom-filter__keyword\">thisWeek</code>\n        <code class=\"custom-filter__keyword\">thisMonth</code>\n      </span>\n    </div>\n\n    <div class=\"custom-filter__note\">{{ '@filterExample' | translate }}</div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: RangeDateTimeFilter, isStandalone: true, selector: "ntybase-range-date-time-filter", host: { attributes: { "ntybase-id": "RangeDateTimeFilter" } }, ngImport: i0, template: "<div class=\"custom-filter\">\n  <div class=\"custom-filter__header\">\n    <label class=\"custom-filter__title\">\n      {{ '@dateTimeFilter' | translate }}\n    </label>\n    <input\n      type=\"text\"\n      class=\"custom-filter__input\"\n      [placeholder]=\"'@dateTimeFilterPlaceholder' | translate\"\n      [value]=\"filterText\"\n      (input)=\"onFilterTextChanged($event)\"\n    />\n  </div>\n\n  <div class=\"custom-filter__help\">\n    <strong class=\"custom-filter__help-title\">\n      {{ '@formats' | translate }}:\n    </strong>\n\n    <div class=\"custom-filter__format\">\n      {{ '@range' | translate }}:\n      <code>start..end</code>\n      <span class=\"custom-filter__example\">(today..yesterday)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@singleDate' | translate }}:\n      <code>YYYY-MM-DD</code>\n      <span class=\"custom-filter__example\">(2024-05-15)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@dateTime' | translate }}:\n      <code>YYYY-MM-DD HH:MM</code>\n      <span class=\"custom-filter__example\">(2024-05-15 14:30)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@multiple' | translate }}:\n      <code>date1,date2,start..end</code>\n    </div>\n\n    <strong class=\"custom-filter__subtitle\">\n      {{ '@specialKeywords' | translate }}:\n    </strong>\n\n    <div class=\"custom-filter__format\">\n      {{ '@turkish' | translate }}:\n      <span class=\"custom-filter__keywords\">\n        <code class=\"custom-filter__keyword\">bug\u00FCn</code>\n        <code class=\"custom-filter__keyword\">d\u00FCn</code>\n        <code class=\"custom-filter__keyword\">bu hafta</code>\n        <code class=\"custom-filter__keyword\">bu ay</code>\n      </span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@english' | translate }}:\n      <span class=\"custom-filter__keywords\">\n        <code class=\"custom-filter__keyword\">today</code>\n        <code class=\"custom-filter__keyword\">yesterday</code>\n        <code class=\"custom-filter__keyword\">thisWeek</code>\n        <code class=\"custom-filter__keyword\">thisMonth</code>\n      </span>\n    </div>\n\n    <div class=\"custom-filter__note\">{{ '@filterExample' | translate }}</div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RangeDateTimeFilter, decorators: [{
             type: Component,
@@ -2788,7 +2955,7 @@ class RangeNumberFilter {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RangeNumberFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: RangeNumberFilter, isStandalone: true, selector: "ntybase-range-number-filter", host: { attributes: { "ntybase-id": "RangeNumberFilter" } }, ngImport: i0, template: "<div class=\"custom-filter\">\n  <div class=\"custom-filter__header\">\n    <label class=\"custom-filter__title\">\n      {{ '@numberFilter' | translate }}\n    </label>\n    <input\n      type=\"text\"\n      class=\"custom-filter__input\"\n      [placeholder]=\"'@numberFilterPlaceholder' | translate\"\n      [value]=\"filterText\"\n      (input)=\"onFilterTextChanged($event)\"\n    />\n  </div>\n\n  <div class=\"custom-filter__help\">\n    <strong class=\"custom-filter__help-title\"\n      >{{ '@formats' | translate }}:</strong\n    >\n\n    <div class=\"custom-filter__format\">\n      {{ '@closedRange' | translate }}:\n      <code>min..max</code>\n      <span class=\"custom-filter__example\">(0..5)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@equalOrGreater' | translate }}:\n      <code>min..</code>\n      <span class=\"custom-filter__example\">(5..)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@equalOrLess' | translate }}:\n      <code>..max</code>\n      <span class=\"custom-filter__example\">(..10)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@singleValue' | translate }}:\n      <code>number</code>\n      <span class=\"custom-filter__example\">(10)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@exclusion' | translate }}:\n      <code>!number</code>\n      <span class=\"custom-filter__example\">(!5)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@rangeExclusion' | translate }}:\n      <code>!min..max</code>\n      <span class=\"custom-filter__example\">(!5..10)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@multiple' | translate }}:\n      <code>value1,value2,range</code>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: RangeNumberFilter, isStandalone: true, selector: "ntybase-range-number-filter", host: { attributes: { "ntybase-id": "RangeNumberFilter" } }, ngImport: i0, template: "<div class=\"custom-filter\">\n  <div class=\"custom-filter__header\">\n    <label class=\"custom-filter__title\">\n      {{ '@numberFilter' | translate }}\n    </label>\n    <input\n      type=\"text\"\n      class=\"custom-filter__input\"\n      [placeholder]=\"'@numberFilterPlaceholder' | translate\"\n      [value]=\"filterText\"\n      (input)=\"onFilterTextChanged($event)\"\n    />\n  </div>\n\n  <div class=\"custom-filter__help\">\n    <strong class=\"custom-filter__help-title\"\n      >{{ '@formats' | translate }}:</strong\n    >\n\n    <div class=\"custom-filter__format\">\n      {{ '@closedRange' | translate }}:\n      <code>min..max</code>\n      <span class=\"custom-filter__example\">(0..5)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@equalOrGreater' | translate }}:\n      <code>min..</code>\n      <span class=\"custom-filter__example\">(5..)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@equalOrLess' | translate }}:\n      <code>..max</code>\n      <span class=\"custom-filter__example\">(..10)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@singleValue' | translate }}:\n      <code>number</code>\n      <span class=\"custom-filter__example\">(10)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@exclusion' | translate }}:\n      <code>!number</code>\n      <span class=\"custom-filter__example\">(!5)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@rangeExclusion' | translate }}:\n      <code>!min..max</code>\n      <span class=\"custom-filter__example\">(!5..10)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@multiple' | translate }}:\n      <code>value1,value2,range</code>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RangeNumberFilter, decorators: [{
             type: Component,
@@ -3041,7 +3208,7 @@ class RangeStringFilter {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RangeStringFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: RangeStringFilter, isStandalone: true, selector: "ntybase-range-string-filter", host: { attributes: { "ntybase-id": "RangeStringFilter" } }, ngImport: i0, template: "<div class=\"custom-filter\">\n  <div class=\"custom-filter__header\">\n    <label class=\"custom-filter__title\">\n      {{ '@stringFilter' | translate }}\n    </label>\n    <input\n      type=\"text\"\n      class=\"custom-filter__input\"\n      [placeholder]=\"'@stringFilterPlaceholder' | translate\"\n      [value]=\"filterText\"\n      (input)=\"onFilterTextChanged($event)\"\n    />\n  </div>\n\n  <div class=\"custom-filter__help\">\n    <strong class=\"custom-filter__help-title\">\n      {{ '@formats' | translate }}:\n    </strong>\n\n    <div class=\"custom-filter__format\">\n      {{ '@exactMatch' | translate }}:\n      <code>text</code>\n      <span class=\"custom-filter__example\">(ahmet)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@startsWith' | translate }}:\n      <code>text*</code>\n      <span class=\"custom-filter__example\">(ahmet*)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@endsWith' | translate }}:\n      <code>*text</code>\n      <span class=\"custom-filter__example\">(*metin)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@contains' | translate }}:\n      <code>*text*</code>\n      <span class=\"custom-filter__example\">(*ahmet*)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@range' | translate }}:\n      <code>start..end</code>\n      <span class=\"custom-filter__example\">(ali..veli)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      <span class=\"custom-filter__description\">\n        {{ '@singleCharacter' | translate }}:\n      </span>\n      <code>?em</code>\n      <span class=\"custom-filter__example\">\n        (?em = 3 characters, 2nd and 3rd letters \"em\")\n      </span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      <span class=\"custom-filter__description\">\n        {{ '@multipleCharacters' | translate }}:\n      </span>\n      <code>???in</code>\n      <span class=\"custom-filter__example\">\n        (5 characters, last 2 letters \"in\")\n      </span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@not' | translate }}:\n      <code>!condition</code>\n      <span class=\"custom-filter__example\">(!*ahmet*, !?hmet)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@regex' | translate }}:\n      <code>$$pattern</code>\n      <span class=\"custom-filter__example\">($$^[A-Z].*, $$a.*b)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@multiple' | translate }}:\n      <code>value1,value2,*end,$$pattern</code>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: RangeStringFilter, isStandalone: true, selector: "ntybase-range-string-filter", host: { attributes: { "ntybase-id": "RangeStringFilter" } }, ngImport: i0, template: "<div class=\"custom-filter\">\n  <div class=\"custom-filter__header\">\n    <label class=\"custom-filter__title\">\n      {{ '@stringFilter' | translate }}\n    </label>\n    <input\n      type=\"text\"\n      class=\"custom-filter__input\"\n      [placeholder]=\"'@stringFilterPlaceholder' | translate\"\n      [value]=\"filterText\"\n      (input)=\"onFilterTextChanged($event)\"\n    />\n  </div>\n\n  <div class=\"custom-filter__help\">\n    <strong class=\"custom-filter__help-title\">\n      {{ '@formats' | translate }}:\n    </strong>\n\n    <div class=\"custom-filter__format\">\n      {{ '@exactMatch' | translate }}:\n      <code>text</code>\n      <span class=\"custom-filter__example\">(ahmet)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@startsWith' | translate }}:\n      <code>text*</code>\n      <span class=\"custom-filter__example\">(ahmet*)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@endsWith' | translate }}:\n      <code>*text</code>\n      <span class=\"custom-filter__example\">(*metin)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@contains' | translate }}:\n      <code>*text*</code>\n      <span class=\"custom-filter__example\">(*ahmet*)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@range' | translate }}:\n      <code>start..end</code>\n      <span class=\"custom-filter__example\">(ali..veli)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      <span class=\"custom-filter__description\">\n        {{ '@singleCharacter' | translate }}:\n      </span>\n      <code>?em</code>\n      <span class=\"custom-filter__example\">\n        (?em = 3 characters, 2nd and 3rd letters \"em\")\n      </span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      <span class=\"custom-filter__description\">\n        {{ '@multipleCharacters' | translate }}:\n      </span>\n      <code>???in</code>\n      <span class=\"custom-filter__example\">\n        (5 characters, last 2 letters \"in\")\n      </span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@not' | translate }}:\n      <code>!condition</code>\n      <span class=\"custom-filter__example\">(!*ahmet*, !?hmet)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@regex' | translate }}:\n      <code>$$pattern</code>\n      <span class=\"custom-filter__example\">($$^[A-Z].*, $$a.*b)</span>\n    </div>\n\n    <div class=\"custom-filter__format\">\n      {{ '@multiple' | translate }}:\n      <code>value1,value2,*end,$$pattern</code>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RangeStringFilter, decorators: [{
             type: Component,
@@ -3558,7 +3725,7 @@ class Login extends AuthBase {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Login, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: Login, isStandalone: true, selector: "ntybase-login", usesInheritance: true, ngImport: i0, template: "<div class=\"login-page-container\">\n  <div class=\"login-image-container\"></div>\n\n  <div class=\"login-container glass-effect\">\n    <!-- Language Button -->\n    <div class=\"language-toggle\">\n      @if (icon()) {\n      <button mat-icon-button [matMenuTriggerFor]=\"languageMenu\">\n        <span class=\"{{ getCurrentLanguageIcon() }}\"></span>\n      </button>\n      } @else {\n      <button\n        mat-raised-button\n        color=\"primary\"\n        [matMenuTriggerFor]=\"languageMenu\"\n      >\n        {{ currentLanguage }}\n      </button>\n      }\n    </div>\n\n    <h2>{{'app_name' | translate }}</h2>\n\n    <!-- Language Menu -->\n    <mat-menu #languageMenu=\"matMenu\">\n      @for (language of languages; track language) {\n      <button mat-menu-item (click)=\"setLanguage(language)\">\n        <span class=\"{{ getLanguageIcon(language) }}\"></span>\n        {{ language }}\n      </button>\n      }\n    </mat-menu>\n\n    @if (!isLoading()) {\n    <form (ngSubmit)=\"login()\" [formGroup]=\"loginForm\" novalidate>\n      @if (error()) {\n      <div class=\"error-message\">\n        <span class=\"error-icon\">!</span>\n        {{ error() }}\n      </div>\n      }\n\n      <div class=\"form-group\">\n        <label for=\"username\">{{'@username' | translate}}</label>\n        <input\n          type=\"text\"\n          id=\"username\"\n          formControlName=\"username\"\n          [placeholder]=\"'@username' | translate\"\n          required\n        />\n        @if (loginForm.controls['username'].invalid &&\n        loginForm.controls['username'].touched) {\n        <mat-error class=\"validation-error\">\n          <span class=\"error-icon\">!</span>\n          {{ 'username is required' | translate }}\n        </mat-error>\n        }\n      </div>\n\n      <div class=\"form-group\">\n        <label for=\"password\">{{'@password' | translate}}</label>\n        <input\n          type=\"password\"\n          id=\"password\"\n          formControlName=\"password\"\n          [placeholder]=\"'@password' | translate\"\n          required\n        />\n        @if (loginForm.controls['password'].invalid &&\n        loginForm.controls['password'].touched) {\n        <div class=\"validation-error\">\n          <span class=\"error-icon\">!</span>\n          {{ 'password is required' | translate }}\n        </div>\n        }\n      </div>\n\n      <div class=\"form-group remember\">\n        <input type=\"checkbox\" id=\"remember\" formControlName=\"remember\" />\n        <label for=\"remember\">{{ '@rememberMe' | translate }}</label>\n        <a class=\"forgot-password\" (click)=\"onForgotPassword()\"\n          >{{ '@forgotPassword' | translate }}</a\n        >\n      </div>\n\n      <button\n        type=\"submit\"\n        class=\"login-button\"\n        [disabled]=\"loginForm.invalid || isLoading()\"\n      >\n        {{ '@login' | translate }}\n      </button>\n    </form>\n    } @else {\n    <div class=\"loading-spinner\">\n      <span>{{ '@loggingIn' | translate }}</span>\n    </div>\n    }\n\n    <div class=\"footer\">\n      @if(version() && version() !== '?.?'){\n      <div class=\"version\">{{ version() }}</div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".login-page-container{position:relative;display:flex;height:100vh;background-image:var(--login-bg-image, url(https://images.unsplash.com/photo-1519681393784-d120267933ba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1124&q=100));background-position:center;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;justify-content:flex-end;padding-right:5%}.login-image-container{display:none}.login-container{width:100%;max-width:400px;padding:2.5rem;display:flex;flex-direction:column;justify-content:center;background:#ffffff1a;border-radius:16px;box-shadow:0 8px 32px #0003;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);margin:20px;height:fit-content;align-self:center}.login-container h2{color:#fff;text-align:center;margin-bottom:2rem;font-size:1.8rem;font-weight:600;text-shadow:0 2px 4px rgba(0,0,0,.3)}.form-group{margin-bottom:1.5rem}.form-group label{display:block;font-weight:500;color:#fff;font-size:.9rem;text-shadow:0 1px 2px rgba(0,0,0,.3)}.form-group input[type=text],.form-group input[type=password]{width:100%;padding:.85rem 1rem;margin-top:.5rem;border:1px solid rgba(255,255,255,.3);border-radius:8px;font-size:.95rem;background-color:#ffffff26;color:#fff}.form-group input::placeholder{color:#ffffffb3}.form-group input[type=text]:focus,.form-group input[type=password]:focus{outline:none;border-color:#ffffff80;background-color:#ffffff40;box-shadow:0 0 0 3px #ffffff1a}.remember{display:flex;align-items:center;margin-bottom:1.5rem}.remember input{width:18px;height:18px;margin-right:.75rem;cursor:pointer}.remember label{color:#fff;font-size:.9rem;cursor:pointer;-webkit-user-select:none;user-select:none;text-shadow:0 1px 2px rgba(0,0,0,.3)}.forgot-password{margin-left:auto;color:#ffffffe6;font-size:.85rem;text-decoration:none}.forgot-password:hover{text-decoration:underline}.login-button{width:100%;padding:1rem;background-color:#fff3;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s}.login-button:hover{background-color:#ffffff4d}.loading-spinner{text-align:center;padding:2rem}.loading-spinner p{margin-top:1rem;color:#fff}.footer{margin-top:2rem;text-align:center}.version{color:#ffffffb3;font-size:.8rem;display:block;text-shadow:0 1px 2px rgba(0,0,0,.3)}@media(max-width:768px){.login-page-container{justify-content:center;padding-right:0;align-items:center}.login-container{max-width:90%;margin:20px auto}}.language-toggle{position:absolute;top:20px;right:20px;z-index:10}.language-toggle button{background:#fff3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3);cursor:pointer}.language-toggle button:hover{background:#ffffff4d}.language-toggle button mat-icon{color:#fff}.login-container h2{margin-top:.5rem}.flag-icon{width:24px;height:16px;margin-right:8px;border:1px solid #ddd}.error-message{background-color:#f8d7da;color:#721c24;padding:12px 15px;border-radius:4px;margin-bottom:20px;display:flex;align-items:center;border:1px solid #f5c6cb;font-size:14px;animation:fadeIn .3s ease-in-out}.error-message .error-icon{display:inline-block;width:20px;height:20px;background-color:#dc3545;color:#fff;border-radius:50%;text-align:center;line-height:20px;margin-right:10px;font-weight:700;font-size:12px}.validation-error{color:#dc3545;font-size:12px;margin-top:5px;display:flex;align-items:center;animation:fadeIn .3s ease-in-out}.validation-error .error-icon{display:inline-block;width:16px;height:16px;background-color:#dc3545;color:#fff;border-radius:50%;text-align:center;line-height:16px;margin-right:6px;font-weight:700;font-size:10px}input.ng-invalid.ng-touched{border:1px solid #dc3545!important}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2$3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: Login, isStandalone: true, selector: "ntybase-login", usesInheritance: true, ngImport: i0, template: "<div class=\"login-page-container\">\n  <div class=\"login-image-container\"></div>\n\n  <div class=\"login-container glass-effect\">\n    <!-- Language Button -->\n    <div class=\"language-toggle\">\n      @if (icon()) {\n      <button mat-icon-button [matMenuTriggerFor]=\"languageMenu\">\n        <span class=\"{{ getCurrentLanguageIcon() }}\"></span>\n      </button>\n      } @else {\n      <button\n        mat-raised-button\n        color=\"primary\"\n        [matMenuTriggerFor]=\"languageMenu\"\n      >\n        {{ currentLanguage }}\n      </button>\n      }\n    </div>\n\n    <h2>{{'app_name' | translate }}</h2>\n\n    <!-- Language Menu -->\n    <mat-menu #languageMenu=\"matMenu\">\n      @for (language of languages; track language) {\n      <button mat-menu-item (click)=\"setLanguage(language)\">\n        <span class=\"{{ getLanguageIcon(language) }}\"></span>\n        {{ language }}\n      </button>\n      }\n    </mat-menu>\n\n    @if (!isLoading()) {\n    <form (ngSubmit)=\"login()\" [formGroup]=\"loginForm\" novalidate>\n      @if (error()) {\n      <div class=\"error-message\">\n        <span class=\"error-icon\">!</span>\n        {{ error() }}\n      </div>\n      }\n\n      <div class=\"form-group\">\n        <label for=\"username\">{{'@username' | translate}}</label>\n        <input\n          type=\"text\"\n          id=\"username\"\n          formControlName=\"username\"\n          [placeholder]=\"'@username' | translate\"\n          required\n        />\n        @if (loginForm.controls['username'].invalid &&\n        loginForm.controls['username'].touched) {\n        <mat-error class=\"validation-error\">\n          <span class=\"error-icon\">!</span>\n          {{ 'username is required' | translate }}\n        </mat-error>\n        }\n      </div>\n\n      <div class=\"form-group\">\n        <label for=\"password\">{{'@password' | translate}}</label>\n        <input\n          type=\"password\"\n          id=\"password\"\n          formControlName=\"password\"\n          [placeholder]=\"'@password' | translate\"\n          required\n        />\n        @if (loginForm.controls['password'].invalid &&\n        loginForm.controls['password'].touched) {\n        <div class=\"validation-error\">\n          <span class=\"error-icon\">!</span>\n          {{ 'password is required' | translate }}\n        </div>\n        }\n      </div>\n\n      <div class=\"form-group remember\">\n        <input type=\"checkbox\" id=\"remember\" formControlName=\"remember\" />\n        <label for=\"remember\">{{ '@rememberMe' | translate }}</label>\n        <a class=\"forgot-password\" (click)=\"onForgotPassword()\"\n          >{{ '@forgotPassword' | translate }}</a\n        >\n      </div>\n\n      <button\n        type=\"submit\"\n        class=\"login-button\"\n        [disabled]=\"loginForm.invalid || isLoading()\"\n      >\n        {{ '@login' | translate }}\n      </button>\n    </form>\n    } @else {\n    <div class=\"loading-spinner\">\n      <span>{{ '@loggingIn' | translate }}</span>\n    </div>\n    }\n\n    <div class=\"footer\">\n      @if(version() && version() !== '?.?'){\n      <div class=\"version\">{{ version() }}</div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".login-page-container{position:relative;display:flex;height:100vh;background-image:var(--login-bg-image, url(https://images.unsplash.com/photo-1519681393784-d120267933ba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1124&q=100));background-position:center;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;justify-content:flex-end;padding-right:5%}.login-image-container{display:none}.login-container{width:100%;max-width:400px;padding:2.5rem;display:flex;flex-direction:column;justify-content:center;background:#ffffff1a;border-radius:16px;box-shadow:0 8px 32px #0003;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);margin:20px;height:fit-content;align-self:center}.login-container h2{color:#fff;text-align:center;margin-bottom:2rem;font-size:1.8rem;font-weight:600;text-shadow:0 2px 4px rgba(0,0,0,.3)}.form-group{margin-bottom:1.5rem}.form-group label{display:block;font-weight:500;color:#fff;font-size:.9rem;text-shadow:0 1px 2px rgba(0,0,0,.3)}.form-group input[type=text],.form-group input[type=password]{width:100%;padding:.85rem 1rem;margin-top:.5rem;border:1px solid rgba(255,255,255,.3);border-radius:8px;font-size:.95rem;background-color:#ffffff26;color:#fff}.form-group input::placeholder{color:#ffffffb3}.form-group input[type=text]:focus,.form-group input[type=password]:focus{outline:none;border-color:#ffffff80;background-color:#ffffff40;box-shadow:0 0 0 3px #ffffff1a}.remember{display:flex;align-items:center;margin-bottom:1.5rem}.remember input{width:18px;height:18px;margin-right:.75rem;cursor:pointer}.remember label{color:#fff;font-size:.9rem;cursor:pointer;-webkit-user-select:none;user-select:none;text-shadow:0 1px 2px rgba(0,0,0,.3)}.forgot-password{margin-left:auto;color:#ffffffe6;font-size:.85rem;text-decoration:none}.forgot-password:hover{text-decoration:underline}.login-button{width:100%;padding:1rem;background-color:#fff3;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s}.login-button:hover{background-color:#ffffff4d}.loading-spinner{text-align:center;padding:2rem}.loading-spinner p{margin-top:1rem;color:#fff}.footer{margin-top:2rem;text-align:center}.version{color:#ffffffb3;font-size:.8rem;display:block;text-shadow:0 1px 2px rgba(0,0,0,.3)}@media(max-width:768px){.login-page-container{justify-content:center;padding-right:0;align-items:center}.login-container{max-width:90%;margin:20px auto}}.language-toggle{position:absolute;top:20px;right:20px;z-index:10}.language-toggle button{background:#fff3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3);cursor:pointer}.language-toggle button:hover{background:#ffffff4d}.language-toggle button mat-icon{color:#fff}.login-container h2{margin-top:.5rem}.flag-icon{width:24px;height:16px;margin-right:8px;border:1px solid #ddd}.error-message{background-color:#f8d7da;color:#721c24;padding:12px 15px;border-radius:4px;margin-bottom:20px;display:flex;align-items:center;border:1px solid #f5c6cb;font-size:14px;animation:fadeIn .3s ease-in-out}.error-message .error-icon{display:inline-block;width:20px;height:20px;background-color:#dc3545;color:#fff;border-radius:50%;text-align:center;line-height:20px;margin-right:10px;font-weight:700;font-size:12px}.validation-error{color:#dc3545;font-size:12px;margin-top:5px;display:flex;align-items:center;animation:fadeIn .3s ease-in-out}.validation-error .error-icon{display:inline-block;width:16px;height:16px;background-color:#dc3545;color:#fff;border-radius:50%;text-align:center;line-height:16px;margin-right:6px;font-weight:700;font-size:10px}input.ng-invalid.ng-touched{border:1px solid #dc3545!important}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2$3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Login, decorators: [{
             type: Component,
@@ -3670,7 +3837,7 @@ class MfaLogin extends AuthBase {
         clearInterval(this.countdownInterval);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MfaLogin, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MfaLogin, isStandalone: true, selector: "ntybase-mfa-login", usesInheritance: true, ngImport: i0, template: "<div class=\"login-page-container\">\n  <div class=\"login-image-container\"></div>\n\n  <div class=\"login-container glass-effect\">\n    <!-- Language Button -->\n    <div class=\"language-toggle\">\n      @if (icon()) {\n      <button mat-icon-button [matMenuTriggerFor]=\"languageMenu\">\n        <span class=\"{{ getCurrentLanguageIcon() }}\"></span>\n      </button>\n      } @else {\n      <button\n        mat-raised-button\n        color=\"primary\"\n        [matMenuTriggerFor]=\"languageMenu\"\n      >\n        {{ currentLanguage }}\n      </button>\n      }\n    </div>\n\n    <h2>{{'app_name' | translate }}</h2>\n\n    <!-- Language Menu -->\n    <mat-menu #languageMenu=\"matMenu\">\n      @for (language of languages; track language) {\n      <button mat-menu-item (click)=\"setLanguage(language)\">\n        <span class=\"{{ getLanguageIcon(language) }}\"></span>\n        {{ language }}\n      </button>\n      }\n    </mat-menu>\n\n    @if (!isLoading()) {\n    <form (ngSubmit)=\"login()\" [formGroup]=\"loginForm\" novalidate>\n      @if (error()) {\n      <div class=\"error-message\">\n        <span class=\"error-icon\">!</span>\n        {{ error() }}\n      </div>\n      }\n\n      <div class=\"form-group\">\n        <label for=\"mfaCode\">{{'mfaCode' | translate}}</label>\n        <input\n          type=\"text\"\n          id=\"mfaCode\"\n          formControlName=\"mfaCode\"\n          [placeholder]=\"'mfaCode' | translate\"\n          required\n        />\n        @if (loginForm.controls['mfaCode'].invalid &&\n        loginForm.controls['mfaCode'].touched) {\n        <div class=\"validation-error\">\n          <span class=\"error-icon\">!</span>\n          {{ 'mfaCode is required' | translate }}\n        </div>\n        }\n\n        <!-- Time -->\n        @if (!resendable()) {\n        <div class=\"time-remaining\">\n          {{ '@tokenCount' | translate }}: {{ getFormattedTime() }}\n        </div>\n        }\n      </div>\n\n      <button\n        type=\"submit\"\n        class=\"login-button\"\n        [disabled]=\"loginForm.invalid || isLoading() || !resendable()\"\n      >\n        {{ '@login' | translate }}\n      </button>\n\n      @if (resendable()) {\n      <div class=\"resend-container\">\n        <span (click)=\"onResendMFACode()\" class=\"resend-link\">\n          {{ 'resend MFACode' | translate }}\n        </span>\n      </div>\n      }\n    </form>\n    } @else {\n    <div class=\"loading-spinner\">\n      <span>{{ '@loggingIn' | translate }}</span>\n    </div>\n    }\n\n    <div class=\"footer\">\n      <span class=\"version\">v{{version}}</span>\n    </div>\n  </div>\n</div>\n", styles: [".login-page-container{position:relative;display:flex;height:100vh;background-image:var(--mfa-login-bg-image, url(https://images.unsplash.com/photo-1519681393784-d120267933ba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1124&q=100));background-position:center;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;justify-content:flex-end;padding-right:5%}.login-image-container{display:none}.login-container{width:100%;max-width:400px;padding:2.5rem;display:flex;flex-direction:column;justify-content:center;background:#ffffff1a;border-radius:16px;box-shadow:0 8px 32px #0003;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);margin:20px;height:fit-content;align-self:center}.login-container h2{color:#fff;text-align:center;margin-bottom:2rem;font-size:1.8rem;font-weight:600;text-shadow:0 2px 4px rgba(0,0,0,.3)}.form-group{margin-bottom:1.5rem}.form-group label{display:block;font-weight:500;color:#fff;font-size:.9rem;text-shadow:0 1px 2px rgba(0,0,0,.3)}.form-group input[type=text],.form-group input[type=password]{width:100%;padding:.85rem 1rem;margin-top:.5rem;border:1px solid rgba(255,255,255,.3);border-radius:8px;font-size:.95rem;background-color:#ffffff26;color:#fff}.form-group input::placeholder{color:#ffffffb3}.form-group input[type=text]:focus,.form-group input[type=password]:focus{outline:none;border-color:#ffffff80;background-color:#ffffff40;box-shadow:0 0 0 3px #ffffff1a}.login-button{width:100%;padding:1rem;background-color:#fff3;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s}.login-button:hover{background-color:#ffffff4d}.loading-spinner{text-align:center;padding:2rem}.loading-spinner p{margin-top:1rem;color:#fff}.footer{margin-top:2rem;text-align:center}.version{color:#ffffffb3;font-size:.8rem;display:block;text-shadow:0 1px 2px rgba(0,0,0,.3)}.language-toggle{position:absolute;top:20px;right:20px;z-index:10}.language-toggle button{background:#fff3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3);cursor:pointer}.language-toggle button:hover{background:#ffffff4d}.language-toggle button mat-icon{color:#fff}.login-container h2{margin-top:.5rem}.flag-icon{width:24px;height:16px;margin-right:8px;border:1px solid #ddd}.error-message{background-color:#f8d7da;color:#721c24;padding:12px 15px;border-radius:4px;margin-bottom:20px;display:flex;align-items:center;border:1px solid #f5c6cb;font-size:14px;animation:fadeIn .3s ease-in-out}.error-message .error-icon{display:inline-block;width:20px;height:20px;background-color:#dc3545;color:#fff;border-radius:50%;text-align:center;line-height:20px;margin-right:10px;font-weight:700;font-size:12px}.validation-error{color:#dc3545;font-size:12px;margin-top:5px;display:flex;align-items:center;animation:fadeIn .3s ease-in-out}.validation-error .error-icon{display:inline-block;width:16px;height:16px;background-color:#dc3545;color:#fff;border-radius:50%;text-align:center;line-height:16px;margin-right:6px;font-weight:700;font-size:10px}.invalid-input{border:1px solid #dc3545!important}.invalid-input:focus{box-shadow:0 0 0 .2rem #dc354540}.resend-container{margin-top:15px;text-align:center}.resend-container .resend-link{color:#007bff;cursor:pointer;text-decoration:underline;font-size:13px}.resend-container .resend-link:hover{color:#0056b3}.time-remaining{margin-top:16px;font-size:1rem;color:#f5f5f5}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.login-page-container{justify-content:center;padding-right:0;align-items:center}.login-container{max-width:90%;margin:20px auto}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2$3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MfaLogin, isStandalone: true, selector: "ntybase-mfa-login", usesInheritance: true, ngImport: i0, template: "<div class=\"login-page-container\">\n  <div class=\"login-image-container\"></div>\n\n  <div class=\"login-container glass-effect\">\n    <!-- Language Button -->\n    <div class=\"language-toggle\">\n      @if (icon()) {\n      <button mat-icon-button [matMenuTriggerFor]=\"languageMenu\">\n        <span class=\"{{ getCurrentLanguageIcon() }}\"></span>\n      </button>\n      } @else {\n      <button\n        mat-raised-button\n        color=\"primary\"\n        [matMenuTriggerFor]=\"languageMenu\"\n      >\n        {{ currentLanguage }}\n      </button>\n      }\n    </div>\n\n    <h2>{{'app_name' | translate }}</h2>\n\n    <!-- Language Menu -->\n    <mat-menu #languageMenu=\"matMenu\">\n      @for (language of languages; track language) {\n      <button mat-menu-item (click)=\"setLanguage(language)\">\n        <span class=\"{{ getLanguageIcon(language) }}\"></span>\n        {{ language }}\n      </button>\n      }\n    </mat-menu>\n\n    @if (!isLoading()) {\n    <form (ngSubmit)=\"login()\" [formGroup]=\"loginForm\" novalidate>\n      @if (error()) {\n      <div class=\"error-message\">\n        <span class=\"error-icon\">!</span>\n        {{ error() }}\n      </div>\n      }\n\n      <div class=\"form-group\">\n        <label for=\"mfaCode\">{{'mfaCode' | translate}}</label>\n        <input\n          type=\"text\"\n          id=\"mfaCode\"\n          formControlName=\"mfaCode\"\n          [placeholder]=\"'mfaCode' | translate\"\n          required\n        />\n        @if (loginForm.controls['mfaCode'].invalid &&\n        loginForm.controls['mfaCode'].touched) {\n        <div class=\"validation-error\">\n          <span class=\"error-icon\">!</span>\n          {{ 'mfaCode is required' | translate }}\n        </div>\n        }\n\n        <!-- Time -->\n        @if (!resendable()) {\n        <div class=\"time-remaining\">\n          {{ '@tokenCount' | translate }}: {{ getFormattedTime() }}\n        </div>\n        }\n      </div>\n\n      <button\n        type=\"submit\"\n        class=\"login-button\"\n        [disabled]=\"loginForm.invalid || isLoading() || !resendable()\"\n      >\n        {{ '@login' | translate }}\n      </button>\n\n      @if (resendable()) {\n      <div class=\"resend-container\">\n        <span (click)=\"onResendMFACode()\" class=\"resend-link\">\n          {{ 'resend MFACode' | translate }}\n        </span>\n      </div>\n      }\n    </form>\n    } @else {\n    <div class=\"loading-spinner\">\n      <span>{{ '@loggingIn' | translate }}</span>\n    </div>\n    }\n\n    <div class=\"footer\">\n      <span class=\"version\">v{{version}}</span>\n    </div>\n  </div>\n</div>\n", styles: [".login-page-container{position:relative;display:flex;height:100vh;background-image:var(--mfa-login-bg-image, url(https://images.unsplash.com/photo-1519681393784-d120267933ba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1124&q=100));background-position:center;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;justify-content:flex-end;padding-right:5%}.login-image-container{display:none}.login-container{width:100%;max-width:400px;padding:2.5rem;display:flex;flex-direction:column;justify-content:center;background:#ffffff1a;border-radius:16px;box-shadow:0 8px 32px #0003;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);margin:20px;height:fit-content;align-self:center}.login-container h2{color:#fff;text-align:center;margin-bottom:2rem;font-size:1.8rem;font-weight:600;text-shadow:0 2px 4px rgba(0,0,0,.3)}.form-group{margin-bottom:1.5rem}.form-group label{display:block;font-weight:500;color:#fff;font-size:.9rem;text-shadow:0 1px 2px rgba(0,0,0,.3)}.form-group input[type=text],.form-group input[type=password]{width:100%;padding:.85rem 1rem;margin-top:.5rem;border:1px solid rgba(255,255,255,.3);border-radius:8px;font-size:.95rem;background-color:#ffffff26;color:#fff}.form-group input::placeholder{color:#ffffffb3}.form-group input[type=text]:focus,.form-group input[type=password]:focus{outline:none;border-color:#ffffff80;background-color:#ffffff40;box-shadow:0 0 0 3px #ffffff1a}.login-button{width:100%;padding:1rem;background-color:#fff3;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s}.login-button:hover{background-color:#ffffff4d}.loading-spinner{text-align:center;padding:2rem}.loading-spinner p{margin-top:1rem;color:#fff}.footer{margin-top:2rem;text-align:center}.version{color:#ffffffb3;font-size:.8rem;display:block;text-shadow:0 1px 2px rgba(0,0,0,.3)}.language-toggle{position:absolute;top:20px;right:20px;z-index:10}.language-toggle button{background:#fff3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3);cursor:pointer}.language-toggle button:hover{background:#ffffff4d}.language-toggle button mat-icon{color:#fff}.login-container h2{margin-top:.5rem}.flag-icon{width:24px;height:16px;margin-right:8px;border:1px solid #ddd}.error-message{background-color:#f8d7da;color:#721c24;padding:12px 15px;border-radius:4px;margin-bottom:20px;display:flex;align-items:center;border:1px solid #f5c6cb;font-size:14px;animation:fadeIn .3s ease-in-out}.error-message .error-icon{display:inline-block;width:20px;height:20px;background-color:#dc3545;color:#fff;border-radius:50%;text-align:center;line-height:20px;margin-right:10px;font-weight:700;font-size:12px}.validation-error{color:#dc3545;font-size:12px;margin-top:5px;display:flex;align-items:center;animation:fadeIn .3s ease-in-out}.validation-error .error-icon{display:inline-block;width:16px;height:16px;background-color:#dc3545;color:#fff;border-radius:50%;text-align:center;line-height:16px;margin-right:6px;font-weight:700;font-size:10px}.invalid-input{border:1px solid #dc3545!important}.invalid-input:focus{box-shadow:0 0 0 .2rem #dc354540}.resend-container{margin-top:15px;text-align:center}.resend-container .resend-link{color:#007bff;cursor:pointer;text-decoration:underline;font-size:13px}.resend-container .resend-link:hover{color:#0056b3}.time-remaining{margin-top:16px;font-size:1rem;color:#f5f5f5}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.login-page-container{justify-content:center;padding-right:0;align-items:center}.login-container{max-width:90%;margin:20px auto}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2$3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MfaLogin, decorators: [{
             type: Component,
@@ -3844,7 +4011,7 @@ class ForgotPassword extends AuthBase {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ForgotPassword, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ForgotPassword, isStandalone: true, selector: "ntybase-forgot-password", usesInheritance: true, ngImport: i0, template: "<div class=\"login-page-container\">\n  <div class=\"login-image-container\"></div>\n\n  <div class=\"login-container glass-effect\">\n    <!-- Language Button -->\n    <div class=\"language-toggle\">\n      @if (icon()) {\n      <button mat-icon-button [matMenuTriggerFor]=\"languageMenu\">\n        <span class=\"{{ getCurrentLanguageIcon() }}\"></span>\n      </button>\n      } @else {\n      <button\n        mat-raised-button\n        color=\"primary\"\n        [matMenuTriggerFor]=\"languageMenu\"\n      >\n        {{ currentLanguage }}\n      </button>\n      }\n    </div>\n\n    <h2>{{'app_name' | translate }}</h2>\n\n    <!-- Language Menu -->\n    <mat-menu #languageMenu=\"matMenu\">\n      @for (language of languages; track language) {\n      <button mat-menu-item (click)=\"setLanguage(language)\">\n        <span class=\"{{ getLanguageIcon(language) }}\"></span>\n        {{ language }}\n      </button>\n      }\n    </mat-menu>\n\n    @if (!isLoading()) {\n    <form\n      (ngSubmit)=\"updatePassword()\"\n      [formGroup]=\"updatePasswordForm\"\n      novalidate\n    >\n      @if (error()) {\n      <div class=\"error-message\">\n        <span class=\"error-icon\">!</span>\n        {{ error() }}\n      </div>\n      }\n\n      <div class=\"form-group\">\n        <label for=\"username\">{{'@username' | translate}}</label>\n        <input\n          type=\"text\"\n          id=\"username\"\n          [placeholder]=\"'@username' | translate\"\n          formControlName=\"username\"\n          required\n        />\n      </div>\n\n      <div class=\"form-group\">\n        <label for=\"newPassword\">{{'@password' | translate}}</label>\n        <input\n          type=\"password\"\n          id=\"newPassword\"\n          [placeholder]=\"'@password' | translate\"\n          formControlName=\"newPassword\"\n          required\n        />\n        @if (updatePasswordForm.controls['newPassword'].invalid &&\n        updatePasswordForm.controls['newPassword'].touched) {\n        <mat-error class=\"validation-error\">\n          <span class=\"error-icon\">!</span>\n          {{ 'password is required' | translate }}\n        </mat-error>\n        }\n      </div>\n\n      <div class=\"form-group\">\n        <label for=\"newPasswordCheck\">{{'@passwordCheck' | translate}}</label>\n        <input\n          type=\"password\"\n          id=\"newPasswordCheck\"\n          [placeholder]=\"'@passwordCheck' | translate\"\n          formControlName=\"newPasswordCheck\"\n          required\n        />\n        @if (updatePasswordForm.controls['newPasswordCheck'].invalid &&\n        updatePasswordForm.controls['newPasswordCheck'].touched) {\n        <mat-error class=\"validation-error\">\n          <span class=\"error-icon\">!</span>\n          {{ 'password is required' | translate }}\n        </mat-error>\n        }\n      </div>\n\n      <button\n        type=\"submit\"\n        class=\"login-button\"\n        [disabled]=\"updatePasswordForm.invalid\"\n      >\n        {{ '@setPassword' | translate }}\n      </button>\n    </form>\n    } @else {\n    <!-- Burada eski #loading template'inin i\u00E7eri\u011Fi direkt olarak kullan\u0131l\u0131yor -->\n    <div class=\"loading-spinner\">\n      <span>{{ '@updatingPassword' | translate }}</span>\n    </div>\n    }\n\n    <div class=\"footer\">\n      <span class=\"version\">v{{version}}</span>\n    </div>\n  </div>\n</div>\n", styles: [".login-page-container{position:relative;display:flex;height:100vh;background-image:var(--forgot-password-bg-image, url(https://images.unsplash.com/photo-1519681393784-d120267933ba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1124&q=100));background-position:center;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;justify-content:flex-end;padding-right:5%}.login-image-container{display:none}.login-container{width:100%;max-width:400px;padding:2.5rem;display:flex;flex-direction:column;justify-content:center;background:#ffffff1a;border-radius:16px;box-shadow:0 8px 32px #0003;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);margin:20px;height:fit-content;align-self:center}.login-container h2{color:#fff;text-align:center;margin-bottom:2rem;font-size:1.8rem;font-weight:600;text-shadow:0 2px 4px rgba(0,0,0,.3)}.form-group{margin-bottom:1.5rem}.form-group label{display:block;font-weight:500;color:#fff;font-size:.9rem;text-shadow:0 1px 2px rgba(0,0,0,.3)}.form-group input[type=text],.form-group input[type=password]{width:100%;padding:.85rem 1rem;margin-top:.5rem;border:1px solid rgba(255,255,255,.3);border-radius:8px;font-size:.95rem;background-color:#ffffff26;color:#fff}.form-group input::placeholder{color:#ffffffb3}.form-group input[type=text]:focus,.form-group input[type=password]:focus{outline:none;border-color:#ffffff80;background-color:#ffffff40;box-shadow:0 0 0 3px #ffffff1a}.remember{display:flex;align-items:center;margin-bottom:1.5rem}.remember input{width:18px;height:18px;margin-right:.75rem;cursor:pointer}.remember label{color:#fff;font-size:.9rem;cursor:pointer;-webkit-user-select:none;user-select:none;text-shadow:0 1px 2px rgba(0,0,0,.3)}.forgot-password{margin-left:auto;color:#ffffffe6;font-size:.85rem;text-decoration:none}.forgot-password:hover{text-decoration:underline}.login-button{width:100%;padding:1rem;background-color:#fff3;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s}.login-button:hover{background-color:#ffffff4d}.loading-spinner{text-align:center;padding:2rem}.loading-spinner p{margin-top:1rem;color:#fff}.footer{margin-top:2rem;text-align:center}.version{color:#ffffffb3;font-size:.8rem;display:block;text-shadow:0 1px 2px rgba(0,0,0,.3)}@media(max-width:768px){.login-page-container{justify-content:center;padding-right:0;align-items:center}.login-container{max-width:90%;margin:20px auto}}.language-toggle{position:absolute;top:20px;right:20px;z-index:10}.language-toggle button{background:#fff3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3);cursor:pointer}.language-toggle button:hover{background:#ffffff4d}.language-toggle button mat-icon{color:#fff}.login-container h2{margin-top:.5rem}.flag-icon{width:24px;height:16px;margin-right:8px;border:1px solid #ddd}.error-message{background-color:#f8d7da;color:#721c24;padding:12px 15px;border-radius:4px;margin-bottom:20px;display:flex;align-items:center;border:1px solid #f5c6cb;font-size:14px;animation:fadeIn .3s ease-in-out}.error-message .error-icon{display:inline-block;width:20px;height:20px;background-color:#dc3545;color:#fff;border-radius:50%;text-align:center;line-height:20px;margin-right:10px;font-weight:700;font-size:12px}.validation-error{color:#dc3545;font-size:12px;margin-top:5px;display:flex;align-items:center;animation:fadeIn .3s ease-in-out}.validation-error .error-icon{display:inline-block;width:16px;height:16px;background-color:#dc3545;color:#fff;border-radius:50%;text-align:center;line-height:16px;margin-right:6px;font-weight:700;font-size:10px}input.ng-invalid.ng-touched{border:1px solid #dc3545!important}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2$3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ForgotPassword, isStandalone: true, selector: "ntybase-forgot-password", usesInheritance: true, ngImport: i0, template: "<div class=\"login-page-container\">\n  <div class=\"login-image-container\"></div>\n\n  <div class=\"login-container glass-effect\">\n    <!-- Language Button -->\n    <div class=\"language-toggle\">\n      @if (icon()) {\n      <button mat-icon-button [matMenuTriggerFor]=\"languageMenu\">\n        <span class=\"{{ getCurrentLanguageIcon() }}\"></span>\n      </button>\n      } @else {\n      <button\n        mat-raised-button\n        color=\"primary\"\n        [matMenuTriggerFor]=\"languageMenu\"\n      >\n        {{ currentLanguage }}\n      </button>\n      }\n    </div>\n\n    <h2>{{'app_name' | translate }}</h2>\n\n    <!-- Language Menu -->\n    <mat-menu #languageMenu=\"matMenu\">\n      @for (language of languages; track language) {\n      <button mat-menu-item (click)=\"setLanguage(language)\">\n        <span class=\"{{ getLanguageIcon(language) }}\"></span>\n        {{ language }}\n      </button>\n      }\n    </mat-menu>\n\n    @if (!isLoading()) {\n    <form\n      (ngSubmit)=\"updatePassword()\"\n      [formGroup]=\"updatePasswordForm\"\n      novalidate\n    >\n      @if (error()) {\n      <div class=\"error-message\">\n        <span class=\"error-icon\">!</span>\n        {{ error() }}\n      </div>\n      }\n\n      <div class=\"form-group\">\n        <label for=\"username\">{{'@username' | translate}}</label>\n        <input\n          type=\"text\"\n          id=\"username\"\n          [placeholder]=\"'@username' | translate\"\n          formControlName=\"username\"\n          required\n        />\n      </div>\n\n      <div class=\"form-group\">\n        <label for=\"newPassword\">{{'@password' | translate}}</label>\n        <input\n          type=\"password\"\n          id=\"newPassword\"\n          [placeholder]=\"'@password' | translate\"\n          formControlName=\"newPassword\"\n          required\n        />\n        @if (updatePasswordForm.controls['newPassword'].invalid &&\n        updatePasswordForm.controls['newPassword'].touched) {\n        <mat-error class=\"validation-error\">\n          <span class=\"error-icon\">!</span>\n          {{ 'password is required' | translate }}\n        </mat-error>\n        }\n      </div>\n\n      <div class=\"form-group\">\n        <label for=\"newPasswordCheck\">{{'@passwordCheck' | translate}}</label>\n        <input\n          type=\"password\"\n          id=\"newPasswordCheck\"\n          [placeholder]=\"'@passwordCheck' | translate\"\n          formControlName=\"newPasswordCheck\"\n          required\n        />\n        @if (updatePasswordForm.controls['newPasswordCheck'].invalid &&\n        updatePasswordForm.controls['newPasswordCheck'].touched) {\n        <mat-error class=\"validation-error\">\n          <span class=\"error-icon\">!</span>\n          {{ 'password is required' | translate }}\n        </mat-error>\n        }\n      </div>\n\n      <button\n        type=\"submit\"\n        class=\"login-button\"\n        [disabled]=\"updatePasswordForm.invalid\"\n      >\n        {{ '@setPassword' | translate }}\n      </button>\n    </form>\n    } @else {\n    <!-- Burada eski #loading template'inin i\u00E7eri\u011Fi direkt olarak kullan\u0131l\u0131yor -->\n    <div class=\"loading-spinner\">\n      <span>{{ '@updatingPassword' | translate }}</span>\n    </div>\n    }\n\n    <div class=\"footer\">\n      <span class=\"version\">v{{version}}</span>\n    </div>\n  </div>\n</div>\n", styles: [".login-page-container{position:relative;display:flex;height:100vh;background-image:var(--forgot-password-bg-image, url(https://images.unsplash.com/photo-1519681393784-d120267933ba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1124&q=100));background-position:center;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;justify-content:flex-end;padding-right:5%}.login-image-container{display:none}.login-container{width:100%;max-width:400px;padding:2.5rem;display:flex;flex-direction:column;justify-content:center;background:#ffffff1a;border-radius:16px;box-shadow:0 8px 32px #0003;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);margin:20px;height:fit-content;align-self:center}.login-container h2{color:#fff;text-align:center;margin-bottom:2rem;font-size:1.8rem;font-weight:600;text-shadow:0 2px 4px rgba(0,0,0,.3)}.form-group{margin-bottom:1.5rem}.form-group label{display:block;font-weight:500;color:#fff;font-size:.9rem;text-shadow:0 1px 2px rgba(0,0,0,.3)}.form-group input[type=text],.form-group input[type=password]{width:100%;padding:.85rem 1rem;margin-top:.5rem;border:1px solid rgba(255,255,255,.3);border-radius:8px;font-size:.95rem;background-color:#ffffff26;color:#fff}.form-group input::placeholder{color:#ffffffb3}.form-group input[type=text]:focus,.form-group input[type=password]:focus{outline:none;border-color:#ffffff80;background-color:#ffffff40;box-shadow:0 0 0 3px #ffffff1a}.remember{display:flex;align-items:center;margin-bottom:1.5rem}.remember input{width:18px;height:18px;margin-right:.75rem;cursor:pointer}.remember label{color:#fff;font-size:.9rem;cursor:pointer;-webkit-user-select:none;user-select:none;text-shadow:0 1px 2px rgba(0,0,0,.3)}.forgot-password{margin-left:auto;color:#ffffffe6;font-size:.85rem;text-decoration:none}.forgot-password:hover{text-decoration:underline}.login-button{width:100%;padding:1rem;background-color:#fff3;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s}.login-button:hover{background-color:#ffffff4d}.loading-spinner{text-align:center;padding:2rem}.loading-spinner p{margin-top:1rem;color:#fff}.footer{margin-top:2rem;text-align:center}.version{color:#ffffffb3;font-size:.8rem;display:block;text-shadow:0 1px 2px rgba(0,0,0,.3)}@media(max-width:768px){.login-page-container{justify-content:center;padding-right:0;align-items:center}.login-container{max-width:90%;margin:20px auto}}.language-toggle{position:absolute;top:20px;right:20px;z-index:10}.language-toggle button{background:#fff3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3);cursor:pointer}.language-toggle button:hover{background:#ffffff4d}.language-toggle button mat-icon{color:#fff}.login-container h2{margin-top:.5rem}.flag-icon{width:24px;height:16px;margin-right:8px;border:1px solid #ddd}.error-message{background-color:#f8d7da;color:#721c24;padding:12px 15px;border-radius:4px;margin-bottom:20px;display:flex;align-items:center;border:1px solid #f5c6cb;font-size:14px;animation:fadeIn .3s ease-in-out}.error-message .error-icon{display:inline-block;width:20px;height:20px;background-color:#dc3545;color:#fff;border-radius:50%;text-align:center;line-height:20px;margin-right:10px;font-weight:700;font-size:12px}.validation-error{color:#dc3545;font-size:12px;margin-top:5px;display:flex;align-items:center;animation:fadeIn .3s ease-in-out}.validation-error .error-icon{display:inline-block;width:16px;height:16px;background-color:#dc3545;color:#fff;border-radius:50%;text-align:center;line-height:16px;margin-right:6px;font-weight:700;font-size:10px}input.ng-invalid.ng-touched{border:1px solid #dc3545!important}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2$3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ForgotPassword, decorators: [{
             type: Component,
@@ -3935,6 +4102,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             args: [{ selector: 'ntybase-netty-base-app', imports: [], template: "" }]
         }] });
 
+class EnvironmentInfo {
+    showNettyInfo = true;
+    environmentProxy = inject(EnvironmentProxy);
+    get hasConfig() {
+        return this.environmentProxy.config() !== undefined;
+    }
+    get version() {
+        return this.environmentProxy.version() ?? "";
+    }
+    get isProduction() {
+        return false;
+    }
+    get defaultLanguage() {
+        return "tr";
+    }
+    get supportedLanguages() {
+        return [];
+    }
+    get apiUrl() {
+        return this.environmentProxy.apiUrl();
+    }
+    get adminUrl() {
+        return this.environmentProxy.adminUrl();
+    }
+    get baseHref() {
+        return this.environmentProxy.baseHref();
+    }
+    get application() {
+        return this.environmentProxy.application();
+    }
+    ngOnInit() {
+        if (!this.hasConfig) {
+            console.warn("Environment konfigürasyonu bulunamadı. ENVIRONMENT_CONFIG token'ı sağlandı mı?");
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EnvironmentInfo, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: EnvironmentInfo, isStandalone: true, selector: "ntybase-environment-info", inputs: { showNettyInfo: "showNettyInfo" }, ngImport: i0, template: "<div class=\"environment-info\" [class.production]=\"isProduction\">\n  <div class=\"info-card\">\n    <div class=\"card-header\">\n      <h3>{{ 'ENVIRONMENT_INFO.applicationInfo' | translate }}</h3>\n      <span class=\"env-badge\" [class.prod]=\"isProduction\">\n        {{ isProduction ? ('ENVIRONMENT_INFO.prod' | translate) :\n        ('ENVIRONMENT_INFO.dev' | translate) }}\n      </span>\n    </div>\n\n    <div class=\"info-grid\">\n      <div class=\"info-item\">\n        <span class=\"label\">{{ 'ENVIRONMENT_INFO.version' | translate }}</span>\n        <span class=\"value\">{{ version }}</span>\n      </div>\n\n      <div class=\"info-item\">\n        <span class=\"label\"\n          >{{ 'ENVIRONMENT_INFO.defaultLanguage' | translate }}</span\n        >\n        <span class=\"value\">{{ defaultLanguage }}</span>\n      </div>\n\n      <div class=\"info-item\">\n        <span class=\"label\"\n          >{{ 'ENVIRONMENT_INFO.supportedLanguages' | translate }}</span\n        >\n        <span class=\"value\">{{ supportedLanguages.join(', ') }}</span>\n      </div>\n    </div>\n\n    @if (showNettyInfo) {\n    <div class=\"netty-info\">\n      <h4>{{ 'ENVIRONMENT_INFO.nettyConnections' | translate }}</h4>\n\n      <div class=\"info-grid\">\n        <div class=\"info-item\">\n          <span class=\"label\">{{ 'ENVIRONMENT_INFO.apiUrl' | translate }}</span>\n          <span class=\"value\">{{ apiUrl }}</span>\n        </div>\n\n        <div class=\"info-item\">\n          <span class=\"label\"\n            >{{ 'ENVIRONMENT_INFO.adminUrl' | translate }}</span\n          >\n          <span class=\"value\">{{ adminUrl }}</span>\n        </div>\n\n        <div class=\"info-item\">\n          <span class=\"label\"\n            >{{ 'ENVIRONMENT_INFO.baseHref' | translate }}</span\n          >\n          <span class=\"value\">{{ baseHref }}</span>\n        </div>\n\n        <div class=\"info-item\">\n          <span class=\"label\"\n            >{{ 'ENVIRONMENT_INFO.application' | translate }}</span\n          >\n          <span class=\"value\">{{ application }}</span>\n        </div>\n      </div>\n    </div>\n    } @if (!hasConfig) {\n    <div class=\"no-config\">{{ 'ENVIRONMENT_INFO.noConfig' | translate }}</div>\n    }\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.environment-info{padding:24px;font-family:Inter,Arial,sans-serif;display:flex;justify-content:center}.info-card{width:100%;max-width:720px;background:var(--mat-sys-on-primary);border-radius:12px;padding:24px;box-shadow:0 8px 24px #0000000f;transition:all .3s ease;border:2px solid var(--mat-sys-on-primary-container)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.card-header h3{margin:0;font-size:20px;font-weight:600;color:var(--mat-sys-on-primary-container)}.env-badge{padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;background:var(--mat-sys-on-primary-container);color:var(--mat-sys-surface)}.env-badge.prod{background:var(--mat-sys-on-primary-container);color:var(--mat-sys-surface)}.info-grid{display:grid;grid-template-columns:1fr 2fr;gap:14px 20px;margin-bottom:20px}.info-item{display:contents}.label{color:var(--mat-sys-on-primary-container);font-size:13px;font-weight:500}.value{color:var(--mat-sys-on-primary-container);font-size:14px;font-weight:500;word-break:break-word}.netty-info{margin-top:24px;padding-top:20px;border-top:1px solid var(--mat-sys-primary)}.netty-info h4{margin:0 0 16px;font-size:20px;font-weight:600;color:var(--mat-sys-on-primary-container)}.production .info-card{border-left:6px solid #ef4444}.no-config{margin-top:20px;padding:14px;background:var(--mat-sys-primary-fixed);border:1px solid #fed7aa;border-radius:8px;color:#c2410c;font-weight:600;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EnvironmentInfo, decorators: [{
+            type: Component,
+            args: [{ selector: 'ntybase-environment-info', imports: [TranslateModule], template: "<div class=\"environment-info\" [class.production]=\"isProduction\">\n  <div class=\"info-card\">\n    <div class=\"card-header\">\n      <h3>{{ 'ENVIRONMENT_INFO.applicationInfo' | translate }}</h3>\n      <span class=\"env-badge\" [class.prod]=\"isProduction\">\n        {{ isProduction ? ('ENVIRONMENT_INFO.prod' | translate) :\n        ('ENVIRONMENT_INFO.dev' | translate) }}\n      </span>\n    </div>\n\n    <div class=\"info-grid\">\n      <div class=\"info-item\">\n        <span class=\"label\">{{ 'ENVIRONMENT_INFO.version' | translate }}</span>\n        <span class=\"value\">{{ version }}</span>\n      </div>\n\n      <div class=\"info-item\">\n        <span class=\"label\"\n          >{{ 'ENVIRONMENT_INFO.defaultLanguage' | translate }}</span\n        >\n        <span class=\"value\">{{ defaultLanguage }}</span>\n      </div>\n\n      <div class=\"info-item\">\n        <span class=\"label\"\n          >{{ 'ENVIRONMENT_INFO.supportedLanguages' | translate }}</span\n        >\n        <span class=\"value\">{{ supportedLanguages.join(', ') }}</span>\n      </div>\n    </div>\n\n    @if (showNettyInfo) {\n    <div class=\"netty-info\">\n      <h4>{{ 'ENVIRONMENT_INFO.nettyConnections' | translate }}</h4>\n\n      <div class=\"info-grid\">\n        <div class=\"info-item\">\n          <span class=\"label\">{{ 'ENVIRONMENT_INFO.apiUrl' | translate }}</span>\n          <span class=\"value\">{{ apiUrl }}</span>\n        </div>\n\n        <div class=\"info-item\">\n          <span class=\"label\"\n            >{{ 'ENVIRONMENT_INFO.adminUrl' | translate }}</span\n          >\n          <span class=\"value\">{{ adminUrl }}</span>\n        </div>\n\n        <div class=\"info-item\">\n          <span class=\"label\"\n            >{{ 'ENVIRONMENT_INFO.baseHref' | translate }}</span\n          >\n          <span class=\"value\">{{ baseHref }}</span>\n        </div>\n\n        <div class=\"info-item\">\n          <span class=\"label\"\n            >{{ 'ENVIRONMENT_INFO.application' | translate }}</span\n          >\n          <span class=\"value\">{{ application }}</span>\n        </div>\n      </div>\n    </div>\n    } @if (!hasConfig) {\n    <div class=\"no-config\">{{ 'ENVIRONMENT_INFO.noConfig' | translate }}</div>\n    }\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.environment-info{padding:24px;font-family:Inter,Arial,sans-serif;display:flex;justify-content:center}.info-card{width:100%;max-width:720px;background:var(--mat-sys-on-primary);border-radius:12px;padding:24px;box-shadow:0 8px 24px #0000000f;transition:all .3s ease;border:2px solid var(--mat-sys-on-primary-container)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.card-header h3{margin:0;font-size:20px;font-weight:600;color:var(--mat-sys-on-primary-container)}.env-badge{padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;background:var(--mat-sys-on-primary-container);color:var(--mat-sys-surface)}.env-badge.prod{background:var(--mat-sys-on-primary-container);color:var(--mat-sys-surface)}.info-grid{display:grid;grid-template-columns:1fr 2fr;gap:14px 20px;margin-bottom:20px}.info-item{display:contents}.label{color:var(--mat-sys-on-primary-container);font-size:13px;font-weight:500}.value{color:var(--mat-sys-on-primary-container);font-size:14px;font-weight:500;word-break:break-word}.netty-info{margin-top:24px;padding-top:20px;border-top:1px solid var(--mat-sys-primary)}.netty-info h4{margin:0 0 16px;font-size:20px;font-weight:600;color:var(--mat-sys-on-primary-container)}.production .info-card{border-left:6px solid #ef4444}.no-config{margin-top:20px;padding:14px;background:var(--mat-sys-primary-fixed);border:1px solid #fed7aa;border-radius:8px;color:#c2410c;font-weight:600;text-align:center}\n"] }]
+        }], propDecorators: { showNettyInfo: [{
+                type: Input
+            }] } });
+
 const ENVIRONMENT_CONFIG = new InjectionToken('ENVIRONMENT_CONFIG');
 class EnvironmentInfoService {
     config;
@@ -3977,56 +4189,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                     args: [ENVIRONMENT_CONFIG]
                 }] }] });
 
-class EnvironmentInfo {
-    environmentService;
-    showNettyInfo = true;
-    environmentConfig = null;
-    get hasConfig() {
-        return this.environmentConfig !== null;
-    }
-    get version() {
-        return this.environmentService.getVersion();
-    }
-    get isProduction() {
-        return this.environmentService.isProduction();
-    }
-    get defaultLanguage() {
-        return this.environmentService.getDefaultLanguage();
-    }
-    get supportedLanguages() {
-        return this.environmentService.getSupportedLanguages();
-    }
-    get apiUrl() {
-        return this.environmentService.getApiUrl();
-    }
-    get adminUrl() {
-        return this.environmentService.getAdminUrl();
-    }
-    get baseHref() {
-        return this.environmentConfig?.nettyUrls?.baseHref || '';
-    }
-    get application() {
-        return this.environmentConfig?.nettyUrls?.application || '';
-    }
-    constructor(environmentService) {
-        this.environmentService = environmentService;
-    }
-    ngOnInit() {
-        this.environmentConfig = this.environmentService.getEnvironmentInfo();
-        if (!this.hasConfig) {
-            console.warn("Environment konfigürasyonu bulunamadı. ENVIRONMENT_CONFIG token'ı sağlandı mı?");
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EnvironmentInfo, deps: [{ token: EnvironmentInfoService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: EnvironmentInfo, isStandalone: true, selector: "ntybase-environment-info", inputs: { showNettyInfo: "showNettyInfo" }, ngImport: i0, template: "<div class=\"environment-info\" [class.production]=\"isProduction\">\n  <div class=\"info-card\">\n    <div class=\"card-header\">\n      <h3>{{ 'ENVIRONMENT_INFO.applicationInfo' | translate }}</h3>\n      <span class=\"env-badge\" [class.prod]=\"isProduction\">\n        {{ isProduction ? ('ENVIRONMENT_INFO.prod' | translate) :\n        ('ENVIRONMENT_INFO.dev' | translate) }}\n      </span>\n    </div>\n\n    <div class=\"info-grid\">\n      <div class=\"info-item\">\n        <span class=\"label\">{{ 'ENVIRONMENT_INFO.version' | translate }}</span>\n        <span class=\"value\">{{ version }}</span>\n      </div>\n\n      <div class=\"info-item\">\n        <span class=\"label\"\n          >{{ 'ENVIRONMENT_INFO.defaultLanguage' | translate }}</span\n        >\n        <span class=\"value\">{{ defaultLanguage }}</span>\n      </div>\n\n      <div class=\"info-item\">\n        <span class=\"label\"\n          >{{ 'ENVIRONMENT_INFO.supportedLanguages' | translate }}</span\n        >\n        <span class=\"value\">{{ supportedLanguages.join(', ') }}</span>\n      </div>\n    </div>\n\n    @if (showNettyInfo) {\n    <div class=\"netty-info\">\n      <h4>{{ 'ENVIRONMENT_INFO.nettyConnections' | translate }}</h4>\n\n      <div class=\"info-grid\">\n        <div class=\"info-item\">\n          <span class=\"label\">{{ 'ENVIRONMENT_INFO.apiUrl' | translate }}</span>\n          <span class=\"value\">{{ apiUrl }}</span>\n        </div>\n\n        <div class=\"info-item\">\n          <span class=\"label\"\n            >{{ 'ENVIRONMENT_INFO.adminUrl' | translate }}</span\n          >\n          <span class=\"value\">{{ adminUrl }}</span>\n        </div>\n\n        <div class=\"info-item\">\n          <span class=\"label\"\n            >{{ 'ENVIRONMENT_INFO.baseHref' | translate }}</span\n          >\n          <span class=\"value\">{{ baseHref }}</span>\n        </div>\n\n        <div class=\"info-item\">\n          <span class=\"label\"\n            >{{ 'ENVIRONMENT_INFO.application' | translate }}</span\n          >\n          <span class=\"value\">{{ application }}</span>\n        </div>\n      </div>\n    </div>\n    } @if (!hasConfig) {\n    <div class=\"no-config\">{{ 'ENVIRONMENT_INFO.noConfig' | translate }}</div>\n    }\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.environment-info{padding:24px;font-family:Inter,Arial,sans-serif;display:flex;justify-content:center}.info-card{width:100%;max-width:720px;background:var(--mat-sys-on-primary);border-radius:12px;padding:24px;box-shadow:0 8px 24px #0000000f;transition:all .3s ease;border:2px solid var(--mat-sys-on-primary-container)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.card-header h3{margin:0;font-size:20px;font-weight:600;color:var(--mat-sys-on-primary-container)}.env-badge{padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;background:var(--mat-sys-on-primary-container);color:var(--mat-sys-surface)}.env-badge.prod{background:var(--mat-sys-on-primary-container);color:var(--mat-sys-surface)}.info-grid{display:grid;grid-template-columns:1fr 2fr;gap:14px 20px;margin-bottom:20px}.info-item{display:contents}.label{color:var(--mat-sys-on-primary-container);font-size:13px;font-weight:500}.value{color:var(--mat-sys-on-primary-container);font-size:14px;font-weight:500;word-break:break-word}.netty-info{margin-top:24px;padding-top:20px;border-top:1px solid var(--mat-sys-primary)}.netty-info h4{margin:0 0 16px;font-size:20px;font-weight:600;color:var(--mat-sys-on-primary-container)}.production .info-card{border-left:6px solid #ef4444}.no-config{margin-top:20px;padding:14px;background:var(--mat-sys-primary-fixed);border:1px solid #fed7aa;border-radius:8px;color:#c2410c;font-weight:600;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EnvironmentInfo, decorators: [{
-            type: Component,
-            args: [{ selector: 'ntybase-environment-info', imports: [TranslateModule], template: "<div class=\"environment-info\" [class.production]=\"isProduction\">\n  <div class=\"info-card\">\n    <div class=\"card-header\">\n      <h3>{{ 'ENVIRONMENT_INFO.applicationInfo' | translate }}</h3>\n      <span class=\"env-badge\" [class.prod]=\"isProduction\">\n        {{ isProduction ? ('ENVIRONMENT_INFO.prod' | translate) :\n        ('ENVIRONMENT_INFO.dev' | translate) }}\n      </span>\n    </div>\n\n    <div class=\"info-grid\">\n      <div class=\"info-item\">\n        <span class=\"label\">{{ 'ENVIRONMENT_INFO.version' | translate }}</span>\n        <span class=\"value\">{{ version }}</span>\n      </div>\n\n      <div class=\"info-item\">\n        <span class=\"label\"\n          >{{ 'ENVIRONMENT_INFO.defaultLanguage' | translate }}</span\n        >\n        <span class=\"value\">{{ defaultLanguage }}</span>\n      </div>\n\n      <div class=\"info-item\">\n        <span class=\"label\"\n          >{{ 'ENVIRONMENT_INFO.supportedLanguages' | translate }}</span\n        >\n        <span class=\"value\">{{ supportedLanguages.join(', ') }}</span>\n      </div>\n    </div>\n\n    @if (showNettyInfo) {\n    <div class=\"netty-info\">\n      <h4>{{ 'ENVIRONMENT_INFO.nettyConnections' | translate }}</h4>\n\n      <div class=\"info-grid\">\n        <div class=\"info-item\">\n          <span class=\"label\">{{ 'ENVIRONMENT_INFO.apiUrl' | translate }}</span>\n          <span class=\"value\">{{ apiUrl }}</span>\n        </div>\n\n        <div class=\"info-item\">\n          <span class=\"label\"\n            >{{ 'ENVIRONMENT_INFO.adminUrl' | translate }}</span\n          >\n          <span class=\"value\">{{ adminUrl }}</span>\n        </div>\n\n        <div class=\"info-item\">\n          <span class=\"label\"\n            >{{ 'ENVIRONMENT_INFO.baseHref' | translate }}</span\n          >\n          <span class=\"value\">{{ baseHref }}</span>\n        </div>\n\n        <div class=\"info-item\">\n          <span class=\"label\"\n            >{{ 'ENVIRONMENT_INFO.application' | translate }}</span\n          >\n          <span class=\"value\">{{ application }}</span>\n        </div>\n      </div>\n    </div>\n    } @if (!hasConfig) {\n    <div class=\"no-config\">{{ 'ENVIRONMENT_INFO.noConfig' | translate }}</div>\n    }\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.environment-info{padding:24px;font-family:Inter,Arial,sans-serif;display:flex;justify-content:center}.info-card{width:100%;max-width:720px;background:var(--mat-sys-on-primary);border-radius:12px;padding:24px;box-shadow:0 8px 24px #0000000f;transition:all .3s ease;border:2px solid var(--mat-sys-on-primary-container)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.card-header h3{margin:0;font-size:20px;font-weight:600;color:var(--mat-sys-on-primary-container)}.env-badge{padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;background:var(--mat-sys-on-primary-container);color:var(--mat-sys-surface)}.env-badge.prod{background:var(--mat-sys-on-primary-container);color:var(--mat-sys-surface)}.info-grid{display:grid;grid-template-columns:1fr 2fr;gap:14px 20px;margin-bottom:20px}.info-item{display:contents}.label{color:var(--mat-sys-on-primary-container);font-size:13px;font-weight:500}.value{color:var(--mat-sys-on-primary-container);font-size:14px;font-weight:500;word-break:break-word}.netty-info{margin-top:24px;padding-top:20px;border-top:1px solid var(--mat-sys-primary)}.netty-info h4{margin:0 0 16px;font-size:20px;font-weight:600;color:var(--mat-sys-on-primary-container)}.production .info-card{border-left:6px solid #ef4444}.no-config{margin-top:20px;padding:14px;background:var(--mat-sys-primary-fixed);border:1px solid #fed7aa;border-radius:8px;color:#c2410c;font-weight:600;text-align:center}\n"] }]
-        }], ctorParameters: () => [{ type: EnvironmentInfoService }], propDecorators: { showNettyInfo: [{
-                type: Input
-            }] } });
-
 class NtyLoadingService {
     requestCount = 0;
     isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
@@ -4063,7 +4225,7 @@ class NtyLoadingComponent {
     loadingService = inject(NtyLoadingService);
     isLoading = this.loadingService.isLoading;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NtyLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NtyLoadingComponent, isStandalone: true, selector: "app-nty-loading", host: { attributes: { "ntybase-id": "NtyLoadingComponent" } }, ngImport: i0, template: "@if (isLoading()) {\n<div class=\"loading-overlay\" (click)=\"$event.stopPropagation(); $event.preventDefault()\">\n    <div class=\"spinner\">\n        <i class=\"fas fa-spinner\"></i>\n    </div>\n    <div style=\"margin-top: 10px;\">{{'@loading' | translate}}</div>\n</div>\n}", styles: [".loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:2147483647;display:flex;justify-content:center;align-items:center;color:#fff;flex-direction:column;pointer-events:all;cursor:wait;-webkit-user-select:none;user-select:none}.spinner{font-size:3rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.fa-spinner{animation:spin 1s linear infinite}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NtyLoadingComponent, isStandalone: true, selector: "app-nty-loading", host: { attributes: { "ntybase-id": "NtyLoadingComponent" } }, ngImport: i0, template: "@if (isLoading()) {\n<div class=\"loading-overlay\" (click)=\"$event.stopPropagation(); $event.preventDefault()\">\n    <div class=\"spinner\">\n        <i class=\"fas fa-spinner\"></i>\n    </div>\n    <div style=\"margin-top: 10px;\">{{'@loading' | translate}}</div>\n</div>\n}", styles: [".loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:2147483647;display:flex;justify-content:center;align-items:center;color:#fff;flex-direction:column;pointer-events:all;cursor:wait;-webkit-user-select:none;user-select:none}.spinner{font-size:3rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.fa-spinner{animation:spin 1s linear infinite}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NtyLoadingComponent, decorators: [{
             type: Component,
@@ -4111,6 +4273,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+class NettyAppsFilterBase extends NettyAppsBase {
+    // *********************************************************
+    // *** Input / Output                                    ***
+    // *********************************************************
+    isFilterExpanded = model(true, ...(ngDevMode ? [{ debugName: "isFilterExpanded" }] : []));
+    filteredRecords = output();
+    refresh = input(0, ...(ngDevMode ? [{ debugName: "refresh" }] : []));
+    // *********************************************************
+    // *** Service                                           ***
+    // *********************************************************
+    filterProxy = inject(NettyStandardFilterProxy);
+    enumStorage = inject(NettyEnumStorageProxy);
+    // *********************************************************
+    // *** Signals                                           ***
+    // *********************************************************
+    currentItem = signal(this.createNewRecord(), ...(ngDevMode ? [{ debugName: "currentItem" }] : []));
+    allYesNoEnumList = signal([], ...(ngDevMode ? [{ debugName: "allYesNoEnumList" }] : []));
+    // *********************************************************
+    // *** Constructor                                       ***
+    // *********************************************************
+    constructor() {
+        super();
+        effect(() => {
+            if (this.refresh() > 0) {
+                this.onApply();
+            }
+        });
+    }
+    // *********************************************************
+    // *** Functions                                         ***
+    // *********************************************************
+    async ngOnInit() {
+        // Load enum data for dropdowns
+        await this.enumStorage.loadEnumList();
+        this.allYesNoEnumList.set(this.enumStorage.getEnum('AllYesNo'));
+    }
+    onApply() {
+        this.filterProxy.selectFilter(this.currentItem()).subscribe({
+            next: (result) => {
+                this.filteredRecords.emit(result);
+                this.isFilterExpanded.set(false);
+            },
+            error: (err) => this.alertService.showError('@dataLoadFailed', err),
+        });
+    }
+    onReset() {
+        this.filterProxy.initFilter().subscribe({
+            next: (filter) => {
+                this.currentItem.set(filter);
+            },
+            error: (err) => this.alertService.showError('@dataLoadFailed', err),
+        });
+    }
+    onExport() {
+        this.filterProxy.downloadXLS(this.currentItem()).subscribe({
+            next: (response) => {
+                this.downloadBlobFile(response, 'application/zip', this.translateService.instant('@00000072') + '.zip');
+            },
+            error: (err) => this.alertService.showError('@dataLoadFailed', err),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NettyAppsFilterBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: NettyAppsFilterBase, isStandalone: true, selector: "ntybase-netty-apps-base", inputs: { isFilterExpanded: { classPropertyName: "isFilterExpanded", publicName: "isFilterExpanded", isSignal: true, isRequired: false, transformFunction: null }, refresh: { classPropertyName: "refresh", publicName: "refresh", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isFilterExpanded: "isFilterExpandedChange", filteredRecords: "filteredRecords" }, usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NettyAppsFilterBase, decorators: [{
+            type: Component,
+            args: [{ selector: 'ntybase-netty-apps-base', imports: [], template: `` }]
+        }], ctorParameters: () => [], propDecorators: { isFilterExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFilterExpanded", required: false }] }, { type: i0.Output, args: ["isFilterExpandedChange"] }], filteredRecords: [{ type: i0.Output, args: ["filteredRecords"] }], refresh: [{ type: i0.Input, args: [{ isSignal: true, alias: "refresh", required: false }] }] } });
+
 /*
  * Public API Surface of ntybase
  */
@@ -4119,5 +4350,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AlertService, AuthenticationGuard, AuthenticationInterceptor, AuthenticationService, ButtonRenderer, CanDeactivateGuard, CheckboxRenderer, CommonService, ConfirmDialog, CredentialsService, CurrentUserPreference, ENVIRONMENT_CONFIG, EnvironmentInfo, EnvironmentInfoService, ExcelImportBase, ForgotPassword, Login, LoginDto, MFACodeDto, MfaLogin, NettyAgGridBase, NettyAgGridSaveBase, NettyAgGridService, NettyAppsBase, NettyBaseApp, NettyHelper, NettyImageService, NettyMenuService, NtyLoadingComponent, NtyLoadingInterceptor, Ntybase, NtybaseModule, RangeDateTimeFilter, RangeNumberFilter, RangeStringFilter, UrlHelperService, ntyAuthenticationInterceptor };
+export { AlertService, AuthenticationGuard, AuthenticationInterceptor, AuthenticationService, ButtonRenderer, CanDeactivateGuard, CheckboxRenderer, CommonService, ConfirmDialog, CredentialsService, CurrentUserPreference, ENVIRONMENT_CONFIG, EnvironmentInfo, EnvironmentInfoService, ExcelImportBase, ForgotPassword, Login, LoginDto, MFACodeDto, MfaLogin, NettyAgGridBase, NettyAgGridListBase, NettyAgGridLogBase, NettyAgGridSaveBase, NettyAgGridService, NettyAppsBase, NettyAppsFilterBase, NettyBaseApp, NettyHelper, NettyImageService, NettyMenuService, NtyLoadingComponent, NtyLoadingInterceptor, Ntybase, NtybaseModule, RangeDateTimeFilter, RangeNumberFilter, RangeStringFilter, UrlHelperService, ntyAuthenticationInterceptor };
 //# sourceMappingURL=nettyapps-ntybase.mjs.map