ngx-thin-admin 0.0.0-alpha.0 → 0.0.0-alpha.10

package/fesm2022/ngx-thin-admin.mjs

@@ -1,35 +1,190 @@
 import * as i0 from '@angular/core';
-import { inject, Component, EventEmitter, ChangeDetectorRef, Output, Input, Injectable, ViewChild } from '@angular/core';
+import { InjectionToken, inject, Component, EventEmitter, ChangeDetectorRef, Output, Input, Injectable, ViewChild } from '@angular/core';
 import { lastValueFrom, Subject } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 import * as i4 from '@angular/material/button';
 import { MatButtonModule, MatIconButton, MatButton } from '@angular/material/button';
-import { MatIcon } from '@angular/material/icon';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import * as i6 from '@angular/material/icon';
+import { MatIcon, MatIconModule } from '@angular/material/icon';
 import * as i2 from '@angular/material/input';
 import { MatInputModule, MatInput, MatPrefix, MatSuffix } from '@angular/material/input';
-import { MatFormField } from '@angular/material/select';
+import * as i2$1 from '@angular/material/select';
+import { MatSelectModule, MatFormField } from '@angular/material/select';
 import { MatTooltip } from '@angular/material/tooltip';
-import * as i2$1 from '@ng-matero/extensions/grid';
+import * as i2$2 from '@ng-matero/extensions/grid';
 import { MtxGridModule } from '@ng-matero/extensions/grid';
-import * as i1$1 from '@angular/forms';
-import { FormsModule, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import * as i3 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, FormGroup } from '@angular/forms';
 import { MatSelectionList, MatListOption } from '@angular/material/list';
 import { MatMenu, MatMenuItem, MatMenuTrigger, MatMenuContent } from '@angular/material/menu';
-import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose, MatDialog } from '@angular/material/dialog';
 import * as i1 from '@angular/material/form-field';
-import { MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
+import { MatFormFieldModule, MatFormField as MatFormField$1, MatLabel, MatHint, MatSuffix as MatSuffix$1, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import { stringify } from 'csv-stringify/browser/esm/sync';
-import { RouterLink } from '@angular/router';
+import { RouterLink, Router } from '@angular/router';
+import * as i5 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatCard, MatCardHeader, MatCardContent } from '@angular/material/card';
-import { FieldWrapper, FormlyForm, provideFormlyCore } from '@ngx-formly/core';
+import { FieldWrapper, FieldType, FormlyAttributes, FormlyForm, FORMLY_CONFIG, provideFormlyCore } from '@ngx-formly/core';
 import { withFormlyMaterial } from '@ngx-formly/material';
 import { MatProgressBar } from '@angular/material/progress-bar';
+import * as i2$3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+const messagesEn = {
+    'common.cancel': 'Cancel',
+    'common.ok': 'OK',
+    'common.save': 'Save',
+    'common.create': 'Create',
+    'common.edit': 'Edit',
+    'common.delete': 'Delete',
+    'common.back': 'Back',
+    'list.defaultTitle': 'List',
+    'list.clearFilters': 'Clear filters',
+    'list.searchDefaultPlaceholder': 'Search...',
+    'list.searchInCategoryPlaceholder': 'Search in {category}...',
+    'list.clearSearchKeyword': 'Clear search keyword',
+    'list.refresh': 'Refresh',
+    'list.exportAsCsv': 'Export as CSV',
+    'list.exportedFileName': 'exported',
+    'list.exportItems': 'Export {count} items',
+    'editor.titleForCreate': 'Create {itemType}',
+    'editor.titleForEdit': 'Edit {itemType}',
+    'editor.idLabel': 'ID',
+    'editor.saveForCreate': 'Save',
+    'editor.saveForEdit': 'Save Changes',
+    'editor.errorInvalidInput': 'Invalid input',
+    'editor.errorNoSaver': 'No saver function provided',
+    'editor.successSaved': 'Data saved successfully',
+    'editor.backToList': 'To List',
+    'category.defaultSingular': 'Category',
+    'category.defaultPlural': 'Categories',
+    'category.all': 'All',
+    'category.editorDialogTitleForCreate': 'Create {categoryType}',
+    'category.editorDialogTitleForEdit': 'Edit {categoryType}',
+    'category.deletionDialogTitle': 'Delete {categoryType}',
+    'category.deletionDialogMessage': 'Are you sure you want to delete the {categoryType} "{label}"? This action cannot be undone.',
+    'category.errorCouldNotCreate': 'Could not create {categoryType}',
+    'category.errorFailedUpdate': 'Failed to update {categoryType} "{label}"',
+    'category.errorFailedDelete': 'Failed to delete {categoryType} "{label}"',
+    'category.errorCouldNotSave': 'Could not save {categoryType}',
+    'category.successCreated': '{categoryType} "{label}" has been created successfully',
+    'category.successUpdated': '{categoryType} "{label}" has been updated successfully',
+    'category.successDeleted': '{categoryType} "{label}" has been deleted successfully',
+    'item.defaultSingular': 'Item',
+    'item.deletionDialogTitle': 'Delete {itemType}',
+    'item.deletionDialogMessage': 'Are you sure you want to delete "{label}" ({id})? This action cannot be undone.',
+    'item.errorFailedDelete': 'Failed to delete "{label}"',
+    'item.successDeleted': '"{label}" has been deleted successfully',
+    'item.changeCategory': 'Change {categoryType}',
+    'item.changeCategoryDialogTitle': 'Change {categoryType}',
+    'item.changeCategoryDialogMessage': 'Select a {categoryType} to move "{label}" to.',
+    'item.successCategoryChanged': '{categoryType} changed successfully',
+    'item.errorFailedCategoryChange': 'Failed to change {categoryType} for "{label}"',
+    'category.unselected': 'Uncategorized',
+    'csv.exporting': 'Exporting CSV...',
+    'csv.exportCompleted': 'CSV export completed. Exported {count} items.',
+    'csv.exportCompletedWithErrors': 'CSV exported up to {count} items, but errors occurred: {error}',
+    'csv.errorGenerateFailed': 'Failed to generate CSV file.',
+};
+const messagesJa = {
+    'common.cancel': 'キャンセル',
+    'common.ok': 'OK',
+    'common.save': '保存',
+    'common.create': '作成',
+    'common.edit': '編集',
+    'common.delete': '削除',
+    'common.back': '戻る',
+    'list.defaultTitle': '一覧',
+    'list.clearFilters': 'フィルターをクリア',
+    'list.searchDefaultPlaceholder': '検索...',
+    'list.searchInCategoryPlaceholder': '{category} 内を検索...',
+    'list.clearSearchKeyword': '検索キーワードをクリア',
+    'list.refresh': '再読み込み',
+    'list.exportAsCsv': 'CSV でエクスポート',
+    'list.exportedFileName': 'exported',
+    'list.exportItems': '{count} 件をエクスポート',
+    'editor.titleForCreate': '{itemType}の作成',
+    'editor.titleForEdit': '{itemType}の編集',
+    'editor.idLabel': 'ID',
+    'editor.saveForCreate': '作成',
+    'editor.saveForEdit': '変更を保存',
+    'editor.errorInvalidInput': '入力内容が不正です',
+    'editor.errorNoSaver': '保存処理が設定されていません',
+    'editor.successSaved': '保存しました',
+    'editor.backToList': '一覧へ',
+    'category.defaultSingular': 'カテゴリ',
+    'category.defaultPlural': 'カテゴリ',
+    'category.all': 'すべて',
+    'category.editorDialogTitleForCreate': '{categoryType}の作成',
+    'category.editorDialogTitleForEdit': '{categoryType}の編集',
+    'category.deletionDialogTitle': '{categoryType}の削除',
+    'category.deletionDialogMessage': '{categoryType} "{label}" を削除しますか？この操作は元に戻せません。',
+    'category.errorCouldNotCreate': '{categoryType} を作成できませんでした',
+    'category.errorFailedUpdate': '{categoryType} "{label}" の更新に失敗しました',
+    'category.errorFailedDelete': '{categoryType} "{label}" の削除に失敗しました',
+    'category.errorCouldNotSave': '{categoryType} を保存できませんでした',
+    'category.successCreated': '{categoryType} "{label}" を作成しました',
+    'category.successUpdated': '{categoryType} "{label}" を更新しました',
+    'category.successDeleted': '{categoryType} "{label}" を削除しました',
+    'item.defaultSingular': '項目',
+    'item.deletionDialogTitle': '{itemType}の削除',
+    'item.deletionDialogMessage': '"{label}" ({id}) を削除しますか？この操作は元に戻せません。',
+    'item.errorFailedDelete': '"{label}" の削除に失敗しました',
+    'item.successDeleted': '"{label}" を削除しました',
+    'item.changeCategory': '{categoryType}を変更',
+    'item.changeCategoryDialogTitle': '{categoryType}の変更',
+    'item.changeCategoryDialogMessage': '"{label}" の移動先を選択してください',
+    'item.successCategoryChanged': '{categoryType}を変更しました',
+    'item.errorFailedCategoryChange': '「{label}」の{categoryType}変更に失敗しました',
+    'category.unselected': '未分類',
+    'csv.exporting': 'CSV をエクスポート中...',
+    'csv.exportCompleted': 'CSV エクスポートが完了しました。{count} 件をエクスポートしました。',
+    'csv.exportCompletedWithErrors': '{count} 件までエクスポートしましたが、エラーが発生しました: {error}',
+    'csv.errorGenerateFailed': 'CSV ファイルの生成に失敗しました。',
+};
+function interpolate(message, params) {
+    if (!params) {
+        return message;
+    }
+    return message.replace(/\{(\w+)\}/g, (_, key) => {
+        const value = params[key];
+        return value === undefined ? '' : String(value);
+    });
+}
+function createTranslatorFromMessages(baseMessages, overrides) {
+    const merged = { ...baseMessages, ...overrides };
+    return (key, params) => {
+        return interpolate(merged[key] ?? messagesEn[key], params);
+    };
+}
+const NGX_THIN_ADMIN_TRANSLATE = new InjectionToken('NGX_THIN_ADMIN_TRANSLATE', {
+    providedIn: 'root',
+    factory: () => createTranslatorFromMessages(messagesEn),
+});
+function provideNgxThinAdminI18n(config) {
+    return {
+        provide: NGX_THIN_ADMIN_TRANSLATE,
+        useFactory: () => {
+            if (config?.translate) {
+                return config.translate;
+            }
+            const locale = config?.locale ?? 'en';
+            const base = locale === 'ja' ? messagesJa : messagesEn;
+            return createTranslatorFromMessages(base, config?.messages);
+        },
+    };
+}
 
 class CategoryEditorDialog {
     dialogRef = inject((MatDialogRef));
     data = inject(MAT_DIALOG_DATA);
+    translate = inject(NGX_THIN_ADMIN_TRANSLATE);
     categoryLabel;
+    t(key, params) {
+        return this.translate(key, params);
+    }
     save() {
         if (!this.categoryLabel) {
             return;
@@ -39,7 +194,7 @@ class CategoryEditorDialog {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CategoryEditorDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: CategoryEditorDialog, isStandalone: true, selector: "lib-category-editor-dialog", ngImport: i0, template: "<h2 mat-dialog-title>\n  @if (data.editCategory) {\n    Edit {{ data.config.singularLabel ?? 'Category' }}: \"{{ data.editCategory.label }}\"\n  } @else {\n    Create {{ data.config.singularLabel ?? 'Category' }}\n  }\n</h2>\n<form (ngSubmit)=\"save()\">\n  <mat-dialog-content>\n    <mat-form-field>\n      <mat-label>{{ data.config.exampleLabel ?? data.config.singularLabel ?? '' }}</mat-label>\n      <input\n        matInput\n        [(ngModel)]=\"categoryLabel\"\n        name=\"categoryLabel\"\n        cdkFocusInitial\n        [value]=\"data.editCategory ? data.editCategory.label : ''\"\n      />\n    </mat-form-field>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button type=\"button\" class=\"cancel-btn\" matButton [mat-dialog-close]=\"undefined\">\n      {{ data.cancelButtonText ?? 'Cancel' }}\n    </button>\n    <button type=\"submit\" matButton>{{ data.positiveButtonText ?? 'Save' }}</button>\n  </mat-dialog-actions>\n</form>\n", styles: [".cancel-btn{--mat-button-text-label-text-color: #333}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: CategoryEditorDialog, isStandalone: true, selector: "lib-category-editor-dialog", ngImport: i0, template: "<h2 mat-dialog-title>\n  @if (data.editCategory) {\n    {{\n      t('category.editorDialogTitleForEdit', {\n        categoryType: data.config.singularLabel ?? t('category.defaultSingular'),\n      })\n    }}\n  } @else {\n    {{\n      t('category.editorDialogTitleForCreate', {\n        categoryType: data.config.singularLabel ?? t('category.defaultSingular'),\n      })\n    }}\n  }\n</h2>\n<form (ngSubmit)=\"save()\">\n  <mat-dialog-content>\n    <mat-form-field>\n      <mat-label>{{ data.config.exampleLabel ?? data.config.singularLabel ?? '' }}</mat-label>\n      <input\n        matInput\n        [(ngModel)]=\"categoryLabel\"\n        name=\"categoryLabel\"\n        cdkFocusInitial\n        [value]=\"data.editCategory ? data.editCategory.label : ''\"\n      />\n    </mat-form-field>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button type=\"button\" class=\"cancel-btn\" matButton [mat-dialog-close]=\"undefined\">\n      {{ data.cancelButtonText ?? t('common.cancel') }}\n    </button>\n    <button type=\"submit\" matButton>{{ data.positiveButtonText ?? t('common.save') }}</button>\n  </mat-dialog-actions>\n</form>\n", styles: [".cancel-btn{--mat-button-text-label-text-color: #333}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CategoryEditorDialog, decorators: [{
             type: Component,
@@ -52,14 +207,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                         MatDialogContent,
                         MatDialogActions,
                         MatDialogClose,
-                    ], template: "<h2 mat-dialog-title>\n  @if (data.editCategory) {\n    Edit {{ data.config.singularLabel ?? 'Category' }}: \"{{ data.editCategory.label }}\"\n  } @else {\n    Create {{ data.config.singularLabel ?? 'Category' }}\n  }\n</h2>\n<form (ngSubmit)=\"save()\">\n  <mat-dialog-content>\n    <mat-form-field>\n      <mat-label>{{ data.config.exampleLabel ?? data.config.singularLabel ?? '' }}</mat-label>\n      <input\n        matInput\n        [(ngModel)]=\"categoryLabel\"\n        name=\"categoryLabel\"\n        cdkFocusInitial\n        [value]=\"data.editCategory ? data.editCategory.label : ''\"\n      />\n    </mat-form-field>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button type=\"button\" class=\"cancel-btn\" matButton [mat-dialog-close]=\"undefined\">\n      {{ data.cancelButtonText ?? 'Cancel' }}\n    </button>\n    <button type=\"submit\" matButton>{{ data.positiveButtonText ?? 'Save' }}</button>\n  </mat-dialog-actions>\n</form>\n", styles: [".cancel-btn{--mat-button-text-label-text-color: #333}\n"] }]
+                    ], template: "<h2 mat-dialog-title>\n  @if (data.editCategory) {\n    {{\n      t('category.editorDialogTitleForEdit', {\n        categoryType: data.config.singularLabel ?? t('category.defaultSingular'),\n      })\n    }}\n  } @else {\n    {{\n      t('category.editorDialogTitleForCreate', {\n        categoryType: data.config.singularLabel ?? t('category.defaultSingular'),\n      })\n    }}\n  }\n</h2>\n<form (ngSubmit)=\"save()\">\n  <mat-dialog-content>\n    <mat-form-field>\n      <mat-label>{{ data.config.exampleLabel ?? data.config.singularLabel ?? '' }}</mat-label>\n      <input\n        matInput\n        [(ngModel)]=\"categoryLabel\"\n        name=\"categoryLabel\"\n        cdkFocusInitial\n        [value]=\"data.editCategory ? data.editCategory.label : ''\"\n      />\n    </mat-form-field>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button type=\"button\" class=\"cancel-btn\" matButton [mat-dialog-close]=\"undefined\">\n      {{ data.cancelButtonText ?? t('common.cancel') }}\n    </button>\n    <button type=\"submit\" matButton>{{ data.positiveButtonText ?? t('common.save') }}</button>\n  </mat-dialog-actions>\n</form>\n", styles: [".cancel-btn{--mat-button-text-label-text-color: #333}\n"] }]
         }] });
 
 class ConfirmDialog {
     dialogRef = inject((MatDialogRef));
     data = inject(MAT_DIALOG_DATA);
+    translate = inject(NGX_THIN_ADMIN_TRANSLATE);
+    t(key, params) {
+        return this.translate(key, params);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ConfirmDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: ConfirmDialog, isStandalone: true, selector: "lib-confirm-dialog", ngImport: i0, template: "<h2 mat-dialog-title>{{ data.title }}</h2>\n<mat-dialog-content>\n  {{ data.message }}\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button class=\"cancel-btn\" matButton [mat-dialog-close]=\"undefined\">\n    {{ data.cancelButtonText || 'Cancel' }}\n  </button>\n  <button matButton [mat-dialog-close]=\"true\" cdkFocusInitial>\n    {{ data.positiveButtonText || 'OK' }}\n  </button>\n</mat-dialog-actions>\n", styles: [".cancel-btn{--mat-button-text-label-text-color: #333}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: ConfirmDialog, isStandalone: true, selector: "lib-confirm-dialog", ngImport: i0, template: "<h2 mat-dialog-title>{{ data.title }}</h2>\n<mat-dialog-content>\n  {{ data.message }}\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button class=\"cancel-btn\" matButton [mat-dialog-close]=\"undefined\">\n    {{ data.cancelButtonText || t('common.cancel') }}\n  </button>\n  <button matButton [mat-dialog-close]=\"true\" cdkFocusInitial>\n    {{ data.positiveButtonText || t('common.ok') }}\n  </button>\n</mat-dialog-actions>\n", styles: [".cancel-btn{--mat-button-text-label-text-color: #333}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ConfirmDialog, decorators: [{
             type: Component,
@@ -70,9 +229,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                         MatDialogContent,
                         MatDialogActions,
                         MatDialogClose,
-                    ], template: "<h2 mat-dialog-title>{{ data.title }}</h2>\n<mat-dialog-content>\n  {{ data.message }}\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button class=\"cancel-btn\" matButton [mat-dialog-close]=\"undefined\">\n    {{ data.cancelButtonText || 'Cancel' }}\n  </button>\n  <button matButton [mat-dialog-close]=\"true\" cdkFocusInitial>\n    {{ data.positiveButtonText || 'OK' }}\n  </button>\n</mat-dialog-actions>\n", styles: [".cancel-btn{--mat-button-text-label-text-color: #333}\n"] }]
+                    ], template: "<h2 mat-dialog-title>{{ data.title }}</h2>\n<mat-dialog-content>\n  {{ data.message }}\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button class=\"cancel-btn\" matButton [mat-dialog-close]=\"undefined\">\n    {{ data.cancelButtonText || t('common.cancel') }}\n  </button>\n  <button matButton [mat-dialog-close]=\"true\" cdkFocusInitial>\n    {{ data.positiveButtonText || t('common.ok') }}\n  </button>\n</mat-dialog-actions>\n", styles: [".cancel-btn{--mat-button-text-label-text-color: #333}\n"] }]
         }] });
 
+function getErrorMessage(error) {
+    if (typeof error === 'string') {
+        return error;
+    }
+    else if (error instanceof Error) {
+        return error.message;
+    }
+    else if (error?.error?.message) {
+        if (Array.isArray(error.error.message)) {
+            return error.error.message[0];
+        }
+        else {
+            return error.error.message;
+        }
+    }
+    else {
+        return 'An unknown error occurred';
+    }
+}
+
 class ListCategorySelector {
     /**
      * Config for the category selector
@@ -96,6 +275,10 @@ class ListCategorySelector {
     snackbar = inject(MatSnackBar);
     dialog = inject(MatDialog);
     cdr = inject(ChangeDetectorRef);
+    translate = inject(NGX_THIN_ADMIN_TRANSLATE);
+    t(key, params) {
+        return this.translate(key, params);
+    }
     ngOnChanges(changes) {
         if (changes.config &&
             changes.config.currentValue?.fetcher !== changes.config.previousValue?.fetcher) {
@@ -127,13 +310,25 @@ class ListCategorySelector {
         }
         // Call the category creator function
         try {
-            await this.config.creator(categoryLabel);
+            const res = await this.config.creator(categoryLabel);
+            if (res && 'ok' in res && !res.ok) {
+                const errorMessage = getErrorMessage(res);
+                throw new Error(errorMessage);
+            }
         }
         catch (e) {
-            this.snackbar.open(`Error: ${e?.message ?? 'Could not create category'}`, undefined, {
+            this.snackbar.open(`Error: ${e?.message ?? this.t('category.errorCouldNotCreate', { categoryType: this.config.singularLabel ?? this.t('category.defaultSingular') })}`, undefined, {
                 duration: 3000,
             });
+            return;
         }
+        // Show success message
+        this.snackbar.open(this.t('category.successCreated', {
+            categoryType: this.config.singularLabel ?? this.t('category.defaultSingular'),
+            label: categoryLabel,
+        }), undefined, {
+            duration: 3000,
+        });
         // Refresh category list
         this.fetchCategories();
     }
@@ -143,13 +338,29 @@ class ListCategorySelector {
         }
         // Call the category updater function
         try {
-            await this.config.updater(category);
+            const res = await this.config.updater(category);
+            if (res && 'ok' in res && !res.ok) {
+                const errorMessage = getErrorMessage(res);
+                throw new Error(errorMessage);
+            }
         }
         catch (e) {
-            this.snackbar.open(`Error: ${e?.message ?? `Failed to update category "${category.label}"`}`, undefined, {
+            this.snackbar.open(`Error: ${e?.message ??
+                this.t('category.errorFailedUpdate', {
+                    categoryType: this.config.singularLabel ?? this.t('category.defaultSingular'),
+                    label: category.label,
+                })}`, undefined, {
                 duration: 3000,
             });
+            return;
         }
+        // Show success message
+        this.snackbar.open(this.t('category.successUpdated', {
+            categoryType: this.config.singularLabel ?? this.t('category.defaultSingular'),
+            label: category.label,
+        }), undefined, {
+            duration: 3000,
+        });
         // Refresh category list
         this.fetchCategories();
     }
@@ -159,13 +370,29 @@ class ListCategorySelector {
         }
         // Call the category deleter function
         try {
-            await this.config.deleter(category);
+            const res = await this.config.deleter(category);
+            if (res && 'ok' in res && !res.ok) {
+                const errorMessage = getErrorMessage(res);
+                throw new Error(errorMessage);
+            }
         }
         catch (e) {
-            this.snackbar.open(`Error: ${e?.message ?? `Failed to delete category: "${category.label}"`}`, undefined, {
+            this.snackbar.open(`Error: ${e?.message ??
+                this.t('category.errorFailedDelete', {
+                    categoryType: this.config.singularLabel ?? this.t('category.defaultSingular'),
+                    label: category.label,
+                })}`, undefined, {
                 duration: 3000,
             });
+            return;
         }
+        // Show success message
+        this.snackbar.open(this.t('category.successDeleted', {
+            categoryType: this.config.singularLabel ?? this.t('category.defaultSingular'),
+            label: category.label,
+        }), undefined, {
+            duration: 3000,
+        });
         // Refresh category list
         this.fetchCategories();
     }
@@ -176,8 +403,8 @@ class ListCategorySelector {
             data: {
                 config: this.config,
                 editCategory: editCategory,
-                positiveButtonText: editCategory ? 'Save' : 'Create',
-                cancelButtonText: 'Cancel',
+                positiveButtonText: editCategory ? this.t('common.save') : this.t('common.create'),
+                cancelButtonText: this.t('common.cancel'),
             },
         });
         const result = await lastValueFrom(dialogRef.afterClosed());
@@ -194,7 +421,10 @@ class ListCategorySelector {
             }
         }
         catch (e) {
-            this.snackbar.open(`Error: ${e?.message ?? 'Could not save category'}`, undefined, {
+            this.snackbar.open(`Error: ${e?.message ??
+                this.t('category.errorCouldNotSave', {
+                    categoryType: this.config.singularLabel ?? this.t('category.defaultSingular'),
+                })}`, undefined, {
                 duration: 3000,
             });
         }
@@ -206,10 +436,15 @@ class ListCategorySelector {
         const dialogRef = this.dialog.open(ConfirmDialog, {
             width: '400px',
             data: {
-                title: 'Confirm Deletion',
-                message: `Are you sure you want to delete the ${this.config?.singularLabel ?? 'category'} "${category.label}"? This action cannot be undone.`,
-                positiveButtonText: 'Delete',
-                cancelButtonText: 'Cancel',
+                title: this.t('category.deletionDialogTitle', {
+                    categoryType: this.config?.singularLabel ?? this.t('category.defaultSingular'),
+                }),
+                message: this.t('category.deletionDialogMessage', {
+                    categoryType: this.config?.singularLabel ?? this.t('category.defaultSingular'),
+                    label: category.label,
+                }),
+                positiveButtonText: this.t('common.delete'),
+                cancelButtonText: this.t('common.cancel'),
             },
         });
         const result = await lastValueFrom(dialogRef.afterClosed());
@@ -221,7 +456,11 @@ class ListCategorySelector {
             await this.deleteCategory(category);
         }
         catch (e) {
-            this.snackbar.open(`Error: ${e?.message ?? `Failed to delete category "${category.label}"`}`, undefined, {
+            this.snackbar.open(`Error: ${e?.message ??
+                this.t('category.errorFailedDelete', {
+                    categoryType: this.config?.singularLabel ?? this.t('category.defaultSingular'),
+                    label: category.label,
+                })}`, undefined, {
                 duration: 3000,
             });
         }
@@ -229,7 +468,7 @@ class ListCategorySelector {
         this.fetchCategories();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ListCategorySelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ListCategorySelector, isStandalone: true, selector: "lib-list-category-selector", inputs: { config: "config", selectedCategory: "selectedCategory" }, outputs: { selectedCategoryChange: "selectedCategoryChange" }, usesOnChanges: true, ngImport: i0, template: "<header>\n  <!-- Category selector title -->\n  <span class=\"category-selector-title\"> {{ config?.title ?? 'Categories' }} </span>\n  <!---->\n\n  <!-- Category Creation button -->\n  @if (config?.creator) {\n    <button\n      mat-icon-button\n      (click)=\"openCategoryEditorDialog(undefined)\"\n      class=\"create-category-button\"\n    >\n      <mat-icon>add</mat-icon>\n    </button>\n  }\n  <!---->\n</header>\n\n<mat-selection-list\n  #categorySelector\n  [multiple]=\"false\"\n  [hideSingleSelectionIndicator]=\"true\"\n  [(ngModel)]=\"selectedCategory\"\n  (selectionChange)=\"this.selectedCategoryChange.emit(selectedCategory)\"\n>\n  <!-- \"All\" Category -->\n  <mat-list-option\n    [value]=\"undefined\"\n    [class.active]=\"selectedCategory && selectedCategory[0] === undefined\"\n  >\n    <div matListItemTitle>\n      <!-- Category label -->\n      All&nbsp;\n      <!---->\n    </div>\n  </mat-list-option>\n  <!---->\n\n  <!-- Each category -->\n  @for (category of categories; track category.id) {\n    <mat-list-option\n      [value]=\"category\"\n      [class.active]=\"selectedCategory && selectedCategory[0]?.id === category.id\"\n    >\n      <div matListItemTitle>\n        <!-- Category label -->\n        {{ category.label }}&nbsp;\n        <!---->\n\n        <!-- Count of items in the category -->\n        @if (category.itemCount !== undefined) {\n          <small> ({{ category.itemCount }}) </small>\n        }\n        <!---->\n      </div>\n\n      <!-- Category menu button -->\n      @if (\n        selectedCategory &&\n        selectedCategory[0] !== undefined &&\n        selectedCategory[0].id === category.id &&\n        (config?.updater || config?.deleter)\n      ) {\n        <button\n          matIconButton\n          [matMenuTriggerFor]=\"menu\"\n          [matMenuTriggerData]=\"{ category: category }\"\n          class=\"category-menu-button\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </button>\n      }\n      <!---->\n    </mat-list-option>\n  }\n  <!---->\n</mat-selection-list>\n\n<!-- Category Menu -->\n<mat-menu #menu=\"matMenu\">\n  <ng-template matMenuContent let-category=\"category\">\n    @if (config?.updater) {\n      <button mat-menu-item (click)=\"openCategoryEditorDialog(category)\">Edit</button>\n    }\n    @if (config?.deleter) {\n      <button mat-menu-item (click)=\"openCategoryDeletionDialog(category)\">Delete</button>\n    }\n  </ng-template>\n</mat-menu>\n<!---->\n", styles: [":host{display:block;border-radius:9px;border:1px solid rgba(198,198,201,.1254901961)}header{display:flex;align-items:center;border-bottom:1px solid #f5f6f8;justify-content:space-between;padding:0 .2rem 0 .1rem}header .category-selector-title{font-size:.9rem;padding:1rem .8rem}header button{transform:translateY(-1px)}header button mat-icon{color:#496487}mat-selection-list mat-list-option div[matListItemTitle]{font-size:.85rem;position:relative}mat-selection-list mat-list-option.active{background-color:#f0f0f0}mat-selection-list mat-list-option.active div[matListItemTitle]{color:#3d649c}mat-selection-list mat-list-option:hover{cursor:pointer;background-color:#f0f0f0}mat-selection-list mat-list-option .category-menu-button{position:absolute;right:0;top:0;height:100%;padding-top:.8rem;vertical-align:middle;z-index:1}mat-selection-list mat-list-option{--mat-icon-button-container-shape: 1px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: 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: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: MatMenuContent, selector: "ng-template[matMenuContent]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ListCategorySelector, isStandalone: true, selector: "lib-list-category-selector", inputs: { config: "config", selectedCategory: "selectedCategory" }, outputs: { selectedCategoryChange: "selectedCategoryChange" }, usesOnChanges: true, ngImport: i0, template: "<header>\n  <!-- Category selector title -->\n  <span class=\"category-selector-title\">\n    {{ config?.title ?? t('category.defaultPlural') }}\n  </span>\n  <!---->\n\n  <!-- Category Creation button -->\n  @if (config?.creator) {\n    <button\n      mat-icon-button\n      (click)=\"openCategoryEditorDialog(undefined)\"\n      class=\"create-category-button\"\n    >\n      <mat-icon>add</mat-icon>\n    </button>\n  }\n  <!---->\n</header>\n\n<mat-selection-list\n  #categorySelector\n  [multiple]=\"false\"\n  [hideSingleSelectionIndicator]=\"true\"\n  [(ngModel)]=\"selectedCategory\"\n  (selectionChange)=\"this.selectedCategoryChange.emit(selectedCategory)\"\n>\n  <!-- \"All\" Category -->\n  <mat-list-option\n    [value]=\"undefined\"\n    [class.active]=\"selectedCategory && selectedCategory[0] === undefined\"\n  >\n    <div matListItemTitle>\n      <!-- Category label -->\n      {{ t('category.all') }}&nbsp;\n      <!---->\n    </div>\n  </mat-list-option>\n  <!---->\n\n  <!-- Each category -->\n  @for (category of categories; track category.id) {\n    <mat-list-option\n      [value]=\"category\"\n      [class.active]=\"selectedCategory && selectedCategory[0]?.id === category.id\"\n    >\n      <div matListItemTitle>\n        <!-- Category label -->\n        {{ category.label }}&nbsp;\n        <!---->\n\n        <!-- Count of items in the category -->\n        @if (category.itemCount !== undefined) {\n          <small> ({{ category.itemCount }}) </small>\n        }\n        <!---->\n      </div>\n\n      <!-- Category menu button -->\n      @if (\n        selectedCategory &&\n        selectedCategory[0] !== undefined &&\n        selectedCategory[0].id === category.id &&\n        (config?.updater || config?.deleter)\n      ) {\n        <button\n          matIconButton\n          [matMenuTriggerFor]=\"menu\"\n          [matMenuTriggerData]=\"{ category: category }\"\n          class=\"category-menu-button\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </button>\n      }\n      <!---->\n    </mat-list-option>\n  }\n  <!---->\n</mat-selection-list>\n\n<!-- Category Menu -->\n<mat-menu #menu=\"matMenu\">\n  <ng-template matMenuContent let-category=\"category\">\n    @if (config?.updater) {\n      <button mat-menu-item (click)=\"openCategoryEditorDialog(category)\">\n        {{ t('common.edit') }}\n      </button>\n    }\n    @if (config?.deleter) {\n      <button mat-menu-item (click)=\"openCategoryDeletionDialog(category)\">\n        {{ t('common.delete') }}\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n<!---->\n", styles: [":host{display:block;border-radius:9px;border:1px solid rgba(198,198,201,.1254901961)}header{display:flex;align-items:center;border-bottom:1px solid #f5f6f8;justify-content:space-between;padding:0 .2rem 0 .1rem}header .category-selector-title{font-size:.9rem;padding:1rem .8rem}header button{transform:translateY(-1px)}header button mat-icon{color:#496487}mat-selection-list mat-list-option div[matListItemTitle]{font-size:.85rem;position:relative}mat-selection-list mat-list-option.active{background-color:#f0f0f0}mat-selection-list mat-list-option.active div[matListItemTitle]{color:#3d649c}mat-selection-list mat-list-option:hover{cursor:pointer;background-color:#f0f0f0}mat-selection-list mat-list-option .category-menu-button{position:absolute;right:0;top:0;height:100%;padding-top:.8rem;vertical-align:middle;z-index:1}mat-selection-list mat-list-option{--mat-icon-button-container-shape: 1px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: 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: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: MatMenuContent, selector: "ng-template[matMenuContent]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ListCategorySelector, decorators: [{
             type: Component,
@@ -243,7 +482,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                         MatMenuTrigger,
                         MatListOption,
                         MatMenuContent,
-                    ], template: "<header>\n  <!-- Category selector title -->\n  <span class=\"category-selector-title\"> {{ config?.title ?? 'Categories' }} </span>\n  <!---->\n\n  <!-- Category Creation button -->\n  @if (config?.creator) {\n    <button\n      mat-icon-button\n      (click)=\"openCategoryEditorDialog(undefined)\"\n      class=\"create-category-button\"\n    >\n      <mat-icon>add</mat-icon>\n    </button>\n  }\n  <!---->\n</header>\n\n<mat-selection-list\n  #categorySelector\n  [multiple]=\"false\"\n  [hideSingleSelectionIndicator]=\"true\"\n  [(ngModel)]=\"selectedCategory\"\n  (selectionChange)=\"this.selectedCategoryChange.emit(selectedCategory)\"\n>\n  <!-- \"All\" Category -->\n  <mat-list-option\n    [value]=\"undefined\"\n    [class.active]=\"selectedCategory && selectedCategory[0] === undefined\"\n  >\n    <div matListItemTitle>\n      <!-- Category label -->\n      All&nbsp;\n      <!---->\n    </div>\n  </mat-list-option>\n  <!---->\n\n  <!-- Each category -->\n  @for (category of categories; track category.id) {\n    <mat-list-option\n      [value]=\"category\"\n      [class.active]=\"selectedCategory && selectedCategory[0]?.id === category.id\"\n    >\n      <div matListItemTitle>\n        <!-- Category label -->\n        {{ category.label }}&nbsp;\n        <!---->\n\n        <!-- Count of items in the category -->\n        @if (category.itemCount !== undefined) {\n          <small> ({{ category.itemCount }}) </small>\n        }\n        <!---->\n      </div>\n\n      <!-- Category menu button -->\n      @if (\n        selectedCategory &&\n        selectedCategory[0] !== undefined &&\n        selectedCategory[0].id === category.id &&\n        (config?.updater || config?.deleter)\n      ) {\n        <button\n          matIconButton\n          [matMenuTriggerFor]=\"menu\"\n          [matMenuTriggerData]=\"{ category: category }\"\n          class=\"category-menu-button\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </button>\n      }\n      <!---->\n    </mat-list-option>\n  }\n  <!---->\n</mat-selection-list>\n\n<!-- Category Menu -->\n<mat-menu #menu=\"matMenu\">\n  <ng-template matMenuContent let-category=\"category\">\n    @if (config?.updater) {\n      <button mat-menu-item (click)=\"openCategoryEditorDialog(category)\">Edit</button>\n    }\n    @if (config?.deleter) {\n      <button mat-menu-item (click)=\"openCategoryDeletionDialog(category)\">Delete</button>\n    }\n  </ng-template>\n</mat-menu>\n<!---->\n", styles: [":host{display:block;border-radius:9px;border:1px solid rgba(198,198,201,.1254901961)}header{display:flex;align-items:center;border-bottom:1px solid #f5f6f8;justify-content:space-between;padding:0 .2rem 0 .1rem}header .category-selector-title{font-size:.9rem;padding:1rem .8rem}header button{transform:translateY(-1px)}header button mat-icon{color:#496487}mat-selection-list mat-list-option div[matListItemTitle]{font-size:.85rem;position:relative}mat-selection-list mat-list-option.active{background-color:#f0f0f0}mat-selection-list mat-list-option.active div[matListItemTitle]{color:#3d649c}mat-selection-list mat-list-option:hover{cursor:pointer;background-color:#f0f0f0}mat-selection-list mat-list-option .category-menu-button{position:absolute;right:0;top:0;height:100%;padding-top:.8rem;vertical-align:middle;z-index:1}mat-selection-list mat-list-option{--mat-icon-button-container-shape: 1px}\n"] }]
+                    ], template: "<header>\n  <!-- Category selector title -->\n  <span class=\"category-selector-title\">\n    {{ config?.title ?? t('category.defaultPlural') }}\n  </span>\n  <!---->\n\n  <!-- Category Creation button -->\n  @if (config?.creator) {\n    <button\n      mat-icon-button\n      (click)=\"openCategoryEditorDialog(undefined)\"\n      class=\"create-category-button\"\n    >\n      <mat-icon>add</mat-icon>\n    </button>\n  }\n  <!---->\n</header>\n\n<mat-selection-list\n  #categorySelector\n  [multiple]=\"false\"\n  [hideSingleSelectionIndicator]=\"true\"\n  [(ngModel)]=\"selectedCategory\"\n  (selectionChange)=\"this.selectedCategoryChange.emit(selectedCategory)\"\n>\n  <!-- \"All\" Category -->\n  <mat-list-option\n    [value]=\"undefined\"\n    [class.active]=\"selectedCategory && selectedCategory[0] === undefined\"\n  >\n    <div matListItemTitle>\n      <!-- Category label -->\n      {{ t('category.all') }}&nbsp;\n      <!---->\n    </div>\n  </mat-list-option>\n  <!---->\n\n  <!-- Each category -->\n  @for (category of categories; track category.id) {\n    <mat-list-option\n      [value]=\"category\"\n      [class.active]=\"selectedCategory && selectedCategory[0]?.id === category.id\"\n    >\n      <div matListItemTitle>\n        <!-- Category label -->\n        {{ category.label }}&nbsp;\n        <!---->\n\n        <!-- Count of items in the category -->\n        @if (category.itemCount !== undefined) {\n          <small> ({{ category.itemCount }}) </small>\n        }\n        <!---->\n      </div>\n\n      <!-- Category menu button -->\n      @if (\n        selectedCategory &&\n        selectedCategory[0] !== undefined &&\n        selectedCategory[0].id === category.id &&\n        (config?.updater || config?.deleter)\n      ) {\n        <button\n          matIconButton\n          [matMenuTriggerFor]=\"menu\"\n          [matMenuTriggerData]=\"{ category: category }\"\n          class=\"category-menu-button\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </button>\n      }\n      <!---->\n    </mat-list-option>\n  }\n  <!---->\n</mat-selection-list>\n\n<!-- Category Menu -->\n<mat-menu #menu=\"matMenu\">\n  <ng-template matMenuContent let-category=\"category\">\n    @if (config?.updater) {\n      <button mat-menu-item (click)=\"openCategoryEditorDialog(category)\">\n        {{ t('common.edit') }}\n      </button>\n    }\n    @if (config?.deleter) {\n      <button mat-menu-item (click)=\"openCategoryDeletionDialog(category)\">\n        {{ t('common.delete') }}\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n<!---->\n", styles: [":host{display:block;border-radius:9px;border:1px solid rgba(198,198,201,.1254901961)}header{display:flex;align-items:center;border-bottom:1px solid #f5f6f8;justify-content:space-between;padding:0 .2rem 0 .1rem}header .category-selector-title{font-size:.9rem;padding:1rem .8rem}header button{transform:translateY(-1px)}header button mat-icon{color:#496487}mat-selection-list mat-list-option div[matListItemTitle]{font-size:.85rem;position:relative}mat-selection-list mat-list-option.active{background-color:#f0f0f0}mat-selection-list mat-list-option.active div[matListItemTitle]{color:#3d649c}mat-selection-list mat-list-option:hover{cursor:pointer;background-color:#f0f0f0}mat-selection-list mat-list-option .category-menu-button{position:absolute;right:0;top:0;height:100%;padding-top:.8rem;vertical-align:middle;z-index:1}mat-selection-list mat-list-option{--mat-icon-button-container-shape: 1px}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], selectedCategory: [{
@@ -254,6 +493,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 
 class CsvExportService {
     snackbar = inject(MatSnackBar);
+    translate = inject(NGX_THIN_ADMIN_TRANSLATE);
     encoders = [
         {
             key: 'utf8',
@@ -310,8 +550,8 @@ class CsvExportService {
         // Initialize
         const items = [];
         let errorMessage = undefined;
-        // Show processing message
-        const mes = this.snackbar.open('Exporting CSV...');
+        // 処理中メッセージを表示
+        const mes = this.snackbar.open(this.translate('csv.exporting'));
         // Replace characters in the file name prefix that cannot be used in file names
         fileNamePrefix = fileNamePrefix.replace(/[/¥\\*?:"<>|@\s;^.]/g, '_');
         // Truncate the file name prefix if it is too long
@@ -405,7 +645,7 @@ class CsvExportService {
         if (!blob) {
             console.error(`exportListAsCsv - Blob is not created`);
             mes.dismiss();
-            this.snackbar.open(`Failed to generate CSV file.`, undefined, {
+            this.snackbar.open(this.translate('csv.errorGenerateFailed'), undefined, {
                 duration: 5000,
             });
             return;
@@ -420,14 +660,17 @@ class CsvExportService {
         URL.revokeObjectURL(objectUrl);
         // Dissmiss processing message
         mes.dismiss();
-        // Show result message
+        // 結果メッセージを表示
         if (errorMessage) {
-            this.snackbar.open(`CSV exported up to ${numOfExportedItems} items. but errors occurred: ${errorMessage}`, undefined, {
+            this.snackbar.open(this.translate('csv.exportCompletedWithErrors', {
+                count: numOfExportedItems,
+                error: errorMessage,
+            }), undefined, {
                 duration: 5000,
             });
         }
         else {
-            this.snackbar.open(`CSV export completed. Exported ${numOfExportedItems} items.`, undefined, {
+            this.snackbar.open(this.translate('csv.exportCompleted', { count: numOfExportedItems }), undefined, {
                 duration: 3000,
             });
         }
@@ -442,6 +685,100 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+class CategoryChangeDialog {
+    dialogRef = inject((MatDialogRef));
+    data = inject(MAT_DIALOG_DATA);
+    translate = inject(NGX_THIN_ADMIN_TRANSLATE);
+    cdr = inject(ChangeDetectorRef);
+    dialog = inject(MatDialog);
+    snackbar = inject(MatSnackBar);
+    categories = [];
+    selectedCategoryId;
+    isLoading = false;
+    t(key, params) {
+        return this.translate(key, params);
+    }
+    async ngOnInit() {
+        this.selectedCategoryId = this.data.currentCategoryId;
+        this.isLoading = true;
+        this.cdr.markForCheck();
+        try {
+            const result = await Promise.resolve(this.data.categorySelectorConfig.fetcher());
+            this.categories = result.categories;
+        }
+        catch (e) {
+            console.error('Failed to fetch categories:', e);
+        }
+        finally {
+            this.isLoading = false;
+            this.cdr.markForCheck();
+        }
+    }
+    save() {
+        this.dialogRef.close({
+            categoryId: this.selectedCategoryId,
+        });
+    }
+    async createNewCategory() {
+        if (!this.data.categorySelectorConfig.creator)
+            return;
+        const dialogRef = this.dialog.open(CategoryEditorDialog, {
+            width: '400px',
+            data: {
+                config: this.data.categorySelectorConfig,
+                editCategory: undefined,
+                positiveButtonText: this.t('common.create'),
+                cancelButtonText: this.t('common.cancel'),
+            },
+        });
+        const result = await lastValueFrom(dialogRef.afterClosed());
+        if (!result || !result.label) {
+            return;
+        }
+        this.isLoading = true;
+        this.cdr.markForCheck();
+        try {
+            const newCategory = await Promise.resolve(this.data.categorySelectorConfig.creator(result.label));
+            this.snackbar.open(this.t('category.successCreated', {
+                categoryType: this.data.categorySelectorConfig.singularLabel ?? this.t('category.defaultSingular'),
+                label: result.label,
+            }), undefined, { duration: 3000 });
+            // Re-fetch categories
+            const fetchResult = await Promise.resolve(this.data.categorySelectorConfig.fetcher());
+            this.categories = fetchResult.categories;
+            // Auto-select the newly created category
+            this.selectedCategoryId = newCategory.id;
+        }
+        catch (e) {
+            this.snackbar.open(`Error: ${e?.message ??
+                this.t('category.errorCouldNotSave', {
+                    categoryType: this.data.categorySelectorConfig.singularLabel ?? this.t('category.defaultSingular'),
+                })}`, undefined, { duration: 3000 });
+        }
+        finally {
+            this.isLoading = false;
+            this.cdr.markForCheck();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CategoryChangeDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: CategoryChangeDialog, isStandalone: true, selector: "lib-category-change-dialog", ngImport: i0, template: "<h2 mat-dialog-title>\n  {{\n    t('item.changeCategoryDialogTitle', {\n      categoryType: data.categorySelectorConfig.singularLabel || t('category.defaultSingular'),\n    })\n  }}\n</h2>\n\n<mat-dialog-content>\n  @if (data.itemLabel) {\n    <p style=\"margin-top: 5px; margin-bottom: 1rem\">\n      {{\n        t('item.changeCategoryDialogMessage', {\n          label: data.itemLabel,\n          categoryType: data.categorySelectorConfig.singularLabel || t('category.defaultSingular'),\n        })\n      }}\n    </p>\n  }\n\n  <mat-form-field appearance=\"outline\" style=\"width: 100%; margin-top: 10px\">\n    <mat-label>{{\n      data.categorySelectorConfig.singularLabel || t('category.defaultSingular')\n    }}</mat-label>\n    <mat-select [(ngModel)]=\"selectedCategoryId\" [disabled]=\"isLoading\">\n      <mat-option [value]=\"undefined\">{{ t('category.unselected') }}</mat-option>\n      @for (category of categories; track category.id) {\n        <mat-option [value]=\"category.id\">{{ category.label }}</mat-option>\n      }\n    </mat-select>\n    @if (isLoading) {\n      <mat-spinner matSuffix diameter=\"20\" style=\"margin-right: 12px\"></mat-spinner>\n    }\n  </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n  @if (data.categorySelectorConfig.creator) {\n    <button mat-button (click)=\"createNewCategory()\" [disabled]=\"isLoading\">\n      <mat-icon style=\"margin-right: 4px; font-size: 1.2rem; width: 1.2rem; height: 1.2rem\"\n        >add</mat-icon\n      >\n      <span>{{ t('common.create') }}</span>\n    </button>\n  }\n\n  <span style=\"flex: 1\"></span>\n\n  <button mat-button mat-dialog-close>\n    {{ data.cancelButtonText || t('common.cancel') }}\n  </button>\n  <button mat-flat-button color=\"primary\" (click)=\"save()\" [disabled]=\"isLoading\">\n    {{ data.positiveButtonText || t('common.save') }}\n  </button>\n</mat-dialog-actions>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CategoryChangeDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-category-change-dialog', imports: [
+                        MatFormFieldModule,
+                        MatSelectModule,
+                        FormsModule,
+                        MatButtonModule,
+                        MatDialogTitle,
+                        MatDialogContent,
+                        MatDialogActions,
+                        MatDialogClose,
+                        MatProgressSpinnerModule,
+                        MatIconModule,
+                    ], template: "<h2 mat-dialog-title>\n  {{\n    t('item.changeCategoryDialogTitle', {\n      categoryType: data.categorySelectorConfig.singularLabel || t('category.defaultSingular'),\n    })\n  }}\n</h2>\n\n<mat-dialog-content>\n  @if (data.itemLabel) {\n    <p style=\"margin-top: 5px; margin-bottom: 1rem\">\n      {{\n        t('item.changeCategoryDialogMessage', {\n          label: data.itemLabel,\n          categoryType: data.categorySelectorConfig.singularLabel || t('category.defaultSingular'),\n        })\n      }}\n    </p>\n  }\n\n  <mat-form-field appearance=\"outline\" style=\"width: 100%; margin-top: 10px\">\n    <mat-label>{{\n      data.categorySelectorConfig.singularLabel || t('category.defaultSingular')\n    }}</mat-label>\n    <mat-select [(ngModel)]=\"selectedCategoryId\" [disabled]=\"isLoading\">\n      <mat-option [value]=\"undefined\">{{ t('category.unselected') }}</mat-option>\n      @for (category of categories; track category.id) {\n        <mat-option [value]=\"category.id\">{{ category.label }}</mat-option>\n      }\n    </mat-select>\n    @if (isLoading) {\n      <mat-spinner matSuffix diameter=\"20\" style=\"margin-right: 12px\"></mat-spinner>\n    }\n  </mat-form-field>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n  @if (data.categorySelectorConfig.creator) {\n    <button mat-button (click)=\"createNewCategory()\" [disabled]=\"isLoading\">\n      <mat-icon style=\"margin-right: 4px; font-size: 1.2rem; width: 1.2rem; height: 1.2rem\"\n        >add</mat-icon\n      >\n      <span>{{ t('common.create') }}</span>\n    </button>\n  }\n\n  <span style=\"flex: 1\"></span>\n\n  <button mat-button mat-dialog-close>\n    {{ data.cancelButtonText || t('common.cancel') }}\n  </button>\n  <button mat-flat-button color=\"primary\" (click)=\"save()\" [disabled]=\"isLoading\">\n    {{ data.positiveButtonText || t('common.save') }}\n  </button>\n</mat-dialog-actions>\n" }]
+        }] });
+
 class NgxThinAdminList {
     /**
      * Config for list
@@ -451,6 +788,11 @@ class NgxThinAdminList {
      * Config for category selector. If provided, a category selector will be displayed in the UI.
      */
     categorySelectorConfig;
+    /**
+     * Config for item deleter (If provided, item deletion feature is enabled)
+     * It works by calling openItemDeletionDialog(row) from the click handler of the column definition.
+     */
+    itemDeleterConfig;
     /**
      * Column schema (extended type of MtxGridColumn)
      * @see https://ng-matero.github.io/extensions/components/grid/api
@@ -465,6 +807,10 @@ class NgxThinAdminList {
         perPage: 10,
         categoryId: undefined,
     };
+    /**
+     * Output query
+     */
+    queryChange = new EventEmitter();
     /**
      * Fetcher function to retrieve list data.
      * This should be provided as part of listConfig.
@@ -488,6 +834,7 @@ class NgxThinAdminList {
     keywordChanged$ = new Subject();
     ngOnInit() {
         this.keywordChanged$.pipe(debounceTime(500)).subscribe(() => {
+            this.queryChange.emit(this.query);
             this.fetchList();
         });
     }
@@ -495,20 +842,30 @@ class NgxThinAdminList {
      * Template for cells
      */
     cellTplWithLink;
+    /**
+     * Category Selector
+     */
+    categorySelector;
     /**
      * Services
      */
     cdr = inject(ChangeDetectorRef);
+    translate = inject(NGX_THIN_ADMIN_TRANSLATE);
+    snackbar = inject(MatSnackBar);
     csvExportService = inject(CsvExportService);
+    dialog = inject(MatDialog);
+    t(key, params) {
+        return this.translate(key, params);
+    }
     ngOnChanges(changes) {
         // Columns
-        if (changes.listColumns?.currentValue) {
-            this.gridColumns = changes.listColumns.currentValue.map((col) => {
-                if (col.link || col.routerLink) {
-                    return { ...col, cellTemplate: this.cellTplWithLink };
-                }
-                return col;
-            });
+        if (changes.listColumns?.currentValue || changes.listConfig?.currentValue) {
+            this.buildGridColumns();
+        }
+        // Default page size
+        if (changes.listConfig?.currentValue?.pageSize !== undefined &&
+            changes.listConfig.currentValue.pageSize !== changes.listConfig.previousValue?.pageSize) {
+            this.query.perPage = changes.listConfig.currentValue.pageSize;
         }
         // List - trigger strictly when listFetcher is newly provided or explicitly changed
         if (changes.listConfig?.currentValue?.fetcher !== changes.listConfig?.previousValue?.fetcher) {
@@ -516,6 +873,48 @@ class NgxThinAdminList {
             this.fetchList();
         }
     }
+    buildGridColumns() {
+        if (!this.listColumns) {
+            this.gridColumns = [];
+            return;
+        }
+        let columns = this.listColumns.map((col) => {
+            if (col.link || col.routerLink) {
+                return { ...col, cellTemplate: this.cellTplWithLink };
+            }
+            return col;
+        });
+        if (this.listConfig?.categoryChanger && this.categorySelectorConfig) {
+            const actionsColIndex = columns.findIndex((col) => col.field === 'actions' && col.type === 'button');
+            const categoryType = this.categorySelectorConfig.singularLabel || this.t('category.defaultSingular');
+            const changeCategoryBtn = {
+                type: 'icon',
+                icon: 'folder_shared',
+                tooltip: this.t('item.changeCategory', { categoryType }),
+                click: (record) => this.openItemCategoryChangeDialog(record),
+            };
+            if (actionsColIndex >= 0) {
+                const col = { ...columns[actionsColIndex] };
+                const originalButtons = col.buttons;
+                if (typeof originalButtons === 'function') {
+                    col.buttons = (record) => [...originalButtons(record), changeCategoryBtn];
+                }
+                else {
+                    col.buttons = [...(originalButtons || []), changeCategoryBtn];
+                }
+                columns[actionsColIndex] = col;
+            }
+            else {
+                columns.push({
+                    header: 'Actions',
+                    field: 'actions',
+                    type: 'button',
+                    buttons: [changeCategoryBtn],
+                });
+            }
+        }
+        this.gridColumns = columns;
+    }
     async fetchList() {
         if (!this.listFetcher) {
             return;
@@ -541,7 +940,11 @@ class NgxThinAdminList {
     clearFilters() {
         this.query.keyword = '';
         this.query.categoryId = undefined;
+        this.query.filterColumn = undefined;
+        this.query.filterValue = undefined;
+        this.query.filterLabel = undefined;
         this.selectedCategory = [];
+        this.queryChange.emit(this.query);
         this.fetchList();
     }
     onKeywordInput() {
@@ -552,7 +955,9 @@ class NgxThinAdminList {
             return;
         }
         // Determine file name prefix
-        let fileNamePrefix = this.listConfig?.title ? this.listConfig.title : 'exported';
+        let fileNamePrefix = this.listConfig?.title
+            ? this.listConfig.title
+            : this.t('list.exportedFileName');
         if (this.selectedCategory && this.selectedCategory[0]?.id) {
             // If a category is selected, include the category label in the file name prefix
             fileNamePrefix += `_${this.selectedCategory[0]?.label}`;
@@ -567,19 +972,144 @@ class NgxThinAdminList {
             keyword: this.query.keyword,
         }, this.listColumns);
     }
+    getColumnLabel(columnName) {
+        const column = this.listColumns?.find((col) => col.field === columnName);
+        if (column?.header) {
+            return column.header;
+        }
+        return columnName;
+    }
+    getColumnValueLabel(columnName, value) {
+        const column = this.listColumns?.find((col) => col.field === columnName);
+        if (!column) {
+            return value;
+        }
+        if (this.gridData.length == 0) {
+            return value;
+        }
+        const item = this.gridData.find((item) => String(item[columnName]) === String(value));
+        if (item) {
+            if (column.formatter) {
+                return column.formatter(item, column);
+            }
+            return item[columnName];
+        }
+        return value;
+    }
     onPageChange(event) {
         this.query.page = event.pageIndex;
         this.query.perPage = event.pageSize;
+        this.queryChange.emit(this.query);
         this.fetchList();
     }
     onSelectedCategoryChange($event) {
         console.log('Selected category changed:', $event);
         const categoryId = $event && $event.length >= 1 && $event[0] ? $event[0].id : undefined;
         this.query.categoryId = categoryId;
+        this.queryChange.emit(this.query);
+        this.fetchList();
+    }
+    async openItemDeletionDialog(item) {
+        if (!this.itemDeleterConfig?.deleter) {
+            return;
+        }
+        // Get the label and ID to query in the confirmation dialog
+        const idKey = this.listConfig?.idFieldKey;
+        const labelKey = this.listConfig?.labelFieldKey;
+        const id = idKey ? item[idKey] : (item.id ?? JSON.stringify(item));
+        const label = labelKey ? item[labelKey] : id;
+        const itemType = this.listConfig?.singularLabel || this.t('item.defaultSingular');
+        // Open the confirmation dialog
+        const dialogRef = this.dialog.open(ConfirmDialog, {
+            width: '400px',
+            data: {
+                title: this.t('item.deletionDialogTitle', { itemType }),
+                message: this.t('item.deletionDialogMessage', { label, id }),
+                positiveButtonText: this.t('common.delete'),
+                cancelButtonText: this.t('common.cancel'),
+            },
+        });
+        const result = await lastValueFrom(dialogRef.afterClosed());
+        if (!result) {
+            return;
+        }
+        // Execute delete process
+        await this.deleteItem(id, label);
+    }
+    async deleteItem(id, label) {
+        if (!this.itemDeleterConfig?.deleter) {
+            return;
+        }
+        try {
+            await this.itemDeleterConfig.deleter(id);
+        }
+        catch (e) {
+            const errorMessage = getErrorMessage(e);
+            this.snackbar.open(`Error: ${errorMessage || this.t('item.errorFailedDelete', { label })}`, undefined, { duration: 3000 });
+            return;
+        }
+        // Show success message
+        this.snackbar.open(this.t('item.successDeleted', { label }), undefined, {
+            duration: 3000,
+        });
+        // Refresh the list after deletion
+        this.fetchList();
+    }
+    async openItemCategoryChangeDialog(item) {
+        if (!this.listConfig?.categoryChanger || !this.categorySelectorConfig) {
+            return;
+        }
+        const idKey = this.listConfig?.idFieldKey;
+        const labelKey = this.listConfig?.labelFieldKey;
+        const id = idKey ? item[idKey] : (item.id ?? JSON.stringify(item));
+        const label = labelKey ? item[labelKey] : id;
+        let currentCategoryId;
+        if (typeof this.listConfig.categoryFieldKey === 'function') {
+            currentCategoryId = this.listConfig.categoryFieldKey(item);
+        }
+        else if (typeof this.listConfig.categoryFieldKey === 'string') {
+            currentCategoryId = item[this.listConfig.categoryFieldKey];
+        }
+        else {
+            currentCategoryId = item.categoryId ?? item.category?.id;
+        }
+        const dialogRef = this.dialog.open(CategoryChangeDialog, {
+            width: '400px',
+            data: {
+                itemLabel: label,
+                categorySelectorConfig: this.categorySelectorConfig,
+                currentCategoryId: currentCategoryId,
+                positiveButtonText: this.t('common.save'),
+                cancelButtonText: this.t('common.cancel'),
+            },
+        });
+        const result = await lastValueFrom(dialogRef.afterClosed());
+        if (!result) {
+            return;
+        }
+        const newCategoryId = result.categoryId;
+        const categoryType = this.categorySelectorConfig.singularLabel || this.t('category.defaultSingular');
+        try {
+            const res = await this.listConfig.categoryChanger(id, newCategoryId);
+            if (res && 'ok' in res && !res.ok) {
+                const errorMessage = getErrorMessage(res);
+                throw new Error(errorMessage);
+            }
+        }
+        catch (e) {
+            const errorMessage = getErrorMessage(e);
+            this.snackbar.open(`Error: ${errorMessage || this.t('item.errorFailedCategoryChange', { label, categoryType })}`, undefined, { duration: 3000 });
+            return;
+        }
+        this.snackbar.open(this.t('item.successCategoryChanged', { label, categoryType }), undefined, {
+            duration: 3000,
+        });
+        // Refresh the list and category selector
         this.fetchList();
+        this.categorySelector?.fetchCategories();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NgxThinAdminList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: NgxThinAdminList, isStandalone: true, selector: "ngx-thin-admin-list", inputs: { listConfig: "listConfig", categorySelectorConfig: "categorySelectorConfig", listColumns: "listColumns", query: "query" }, viewQueries: [{ propertyName: "cellTplWithLink", first: true, predicate: ["cellTplWithLink"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Category Selector -->\n@if (categorySelectorConfig) {\n  <lib-list-category-selector\n    [config]=\"categorySelectorConfig\"\n    [(selectedCategory)]=\"selectedCategory\"\n    (selectedCategoryChange)=\"onSelectedCategoryChange($event)\"\n  ></lib-list-category-selector>\n}\n<!---->\n\n<!-- Toolbar Template -->\n<ng-template #toolbarTpl>\n  <div class=\"custom-toolbar\">\n    <!-- List Title -->\n    <span class=\"list-title\">\n      @if (listConfig?.title; as listTitle) {\n        @if (query.keyword || query.categoryId) {\n          <!-- Title (with link for reset filter) -->\n          <a\n            href=\"javascript:void(0)\"\n            (click)=\"query.keyword = ''; query.categoryId = undefined; this.fetchList()\"\n            matTooltip=\"Reset filters\"\n            >{{ listTitle }}</a\n          >\n          <!---->\n        } @else {\n          <!-- Title -->\n          {{ listTitle }}\n          <!---->\n        }\n      } @else {\n        <!-- Default Title -->\n        List\n        <!---->\n      }\n\n      @if (query.categoryId && selectedCategory?.[0]; as categoryLabel) {\n        <span class=\"material-icons list-title-separator\"> keyboard_arrow_right </span>\n        <!-- Category -->\n        {{ categoryLabel.label }}\n        <!---->\n      }\n\n      @if (query.keyword) {\n        <span class=\"material-icons list-title-separator\"> keyboard_arrow_right </span>\n        <!-- Keyword -->\n        \"{{ query.keyword }}\"\n        <!---->\n      }\n    </span>\n    <!---->\n\n    @if (query.keyword || query.categoryId) {\n      <span style=\"width: 8px\"></span>\n      <!-- Clear Filters Button -->\n      <button\n        mat-icon-button\n        class=\"clear-filters-button\"\n        matTooltip=\"Clear filters\"\n        (click)=\"clearFilters()\"\n      >\n        <mat-icon>filter_alt_off</mat-icon>\n      </button>\n      <!---->\n    }\n\n    <span style=\"flex: 1\"></span>\n\n    <!-- Create Button -->\n    @if (listConfig?.createButton; as createBtn) {\n      @if ($any(createBtn).routerLink; as routerLinkUrl) {\n        <!-- Create Button with Router Link -->\n        <a\n          [routerLink]=\"routerLinkUrl\"\n          mat-flat-button\n          class=\"primary-button\"\n          style=\"color: white; transform: translateY(-1px)\"\n        >\n          {{ createBtn.label }}\n          <mat-icon style=\"margin-bottom: 1px\">add</mat-icon>\n        </a>\n      } @else if ($any(createBtn).link; as linkUrl) {\n        <!-- Create Button with Link -->\n        <a\n          [href]=\"linkUrl\"\n          mat-flat-button\n          class=\"primary-button\"\n          style=\"color: white; transform: translateY(-1px)\"\n        >\n          {{ createBtn.label }}\n          <mat-icon style=\"margin-bottom: 1px\">add</mat-icon>\n        </a>\n      } @else if ($any(createBtn).click; as handler) {\n        <!-- Create Button with Handler -->\n        <button\n          mat-flat-button\n          class=\"primary-button\"\n          style=\"color: white; transform: translateY(-1px)\"\n          (click)=\"handler()\"\n        >\n          {{ createBtn?.label }}\n          <mat-icon style=\"margin-bottom: 1px\">add</mat-icon>\n        </button>\n      }\n    }\n    <!---->\n\n    <span style=\"width: 30px\"></span>\n\n    <!-- Search Field -->\n    <mat-form-field class=\"search-keyword xs-input\" appearance=\"outline\">\n      <mat-icon matPrefix>search</mat-icon>\n      <input\n        matInput\n        [placeholder]=\"\n          selectedCategory?.[0]?.label\n            ? 'Search in ' + selectedCategory?.[0]?.label + '...'\n            : 'Search...'\n        \"\n        [(ngModel)]=\"query.keyword\"\n        (keyup)=\"onKeywordInput()\"\n        style=\"padding-top: 3px\"\n      />\n\n      <!-- Search clear button -->\n      <button\n        matSuffix\n        mat-icon-button\n        aria-label=\"Clear search keyword\"\n        matTooltip=\"Clear search keyword\"\n        (click)=\"query.keyword = ''; this.fetchList()\"\n        [style.visibility]=\"query.keyword ? 'visible' : 'hidden'\"\n      >\n        <mat-icon>highlight_off</mat-icon>\n      </button>\n      <!---->\n    </mat-form-field>\n    <!---->\n\n    <span style=\"width: 8px\"></span>\n\n    <!-- Refresh Button -->\n    <button mat-icon-button matTooltip=\"Refresh\" (click)=\"fetchList()\">\n      <mat-icon>refresh</mat-icon>\n    </button>\n    <!---->\n\n    <span style=\"width: 5px\"></span>\n\n    <!-- CSV Export Button -->\n    <button mat-icon-button [matMenuTriggerFor]=\"csvExportMenu\" matTooltip=\"Export as CSV\">\n      <mat-icon>download</mat-icon>\n    </button>\n    <!---->\n\n    <!-- CSV Export Menu -->\n    <mat-menu #csvExportMenu=\"matMenu\">\n      @for (encoder of csvExportService.getAvailableEncoders(); track encoder.key) {\n        <!-- Export with specific charset -->\n        <p style=\"color: #333; font-size: 0.8rem; margin: 1rem 0.75rem 1rem 0.7rem\">\n          CSV ({{ encoder.label }})\n        </p>\n        <button mat-menu-item (click)=\"exportAsCsv(encoder.key)\">\n          <mat-icon>download</mat-icon>\n          <span>Export {{ totalCount }} items</span>\n        </button>\n        <!---->\n      }\n    </mat-menu>\n    <!---->\n  </div>\n</ng-template>\n<!---->\n\n<!-- List (Grid) -->\n<mtx-grid\n  [data]=\"gridData\"\n  [columns]=\"gridColumns\"\n  [showToolbar]=\"true\"\n  [toolbarTemplate]=\"toolbarTpl\"\n  [length]=\"totalCount\"\n  [loading]=\"isLoading\"\n  [pageOnFront]=\"false\"\n  [pageIndex]=\"query.page\"\n  [pageSize]=\"query.perPage\"\n  [pageSizeOptions]=\"listConfig?.pageSizes ?? [10, 25, 50, 100]\"\n  columnMenuButtonType=\"icon\"\n  columnMenuButtonClass=\"column-menu-button\"\n  columnMenuButtonIcon=\"view_column\"\n  (page)=\"onPageChange($event)\"\n></mtx-grid>\n<!---->\n\n<!-- Cell Template with Link -->\n<ng-template #cellTplWithLink let-row let-index=\"index\" let-col=\"colDef\">\n  @if (col.link) {\n    <a [href]=\"col.link(row)\">\n      {{ row[col.field] }}\n    </a>\n  } @else if (col.routerLink) {\n    <a [routerLink]=\"col.routerLink(row)\">\n      {{ row[col.field] }}\n    </a>\n  } @else {\n    {{ row[col.field] }}\n  }\n</ng-template>\n<!---->\n", styles: [":host{display:flex;gap:1rem;padding:1rem;box-sizing:border-box}lib-list-category-selector{display:block;width:200px;background-color:#fcfcfc;border-radius:9px;padding:.5rem;box-sizing:border-box}lib-list-category-selector .category-list{max-height:300px;overflow-y:auto}::ng-deep .mtx-grid-toolbar{display:block;background-color:#fcfcfc;border-top-left-radius:9px;border-top-right-radius:9px;margin-bottom:1px}::ng-deep .mtx-grid-toolbar .custom-toolbar{display:flex;align-items:center;justify-content:space-between;height:37px}::ng-deep .mtx-grid-toolbar .custom-toolbar .list-title{font-size:1rem;line-height:37px}::ng-deep .mtx-grid-toolbar .custom-toolbar .list-title a{color:var(--mat-theme-primary)}::ng-deep .mtx-grid-toolbar .custom-toolbar .list-title a:hover{text-decoration:underline}::ng-deep .mtx-grid-toolbar .custom-toolbar .list-title .list-title-separator{color:#aaa;vertical-align:middle;margin:auto .2rem 4px}::ng-deep .mtx-grid-toolbar .custom-toolbar .clear-filters-button{color:var(--mat-sys-on-primary-container);min-width:32px;padding:0;vertical-align:middle}::ng-deep .mtx-grid-toolbar .custom-toolbar .clear-filters-button mat-icon{vertical-align:middle;margin-bottom:3px}::ng-deep .mtx-grid-toolbar .custom-toolbar .search-keyword{width:15rem;--mat-form-field-container-height: 18.5px;--mat-form-field-container-text-line-height: 18.5px;--mat-form-field-container-vertical-padding: 8.5px;--mat-form-field-outlined-container-shape: 28px;--mat-form-field-subscript-text-line-height: 0px}::ng-deep .mtx-grid-toolbar .custom-toolbar button{color:var(--mat-sys-on-primary-container)}::ng-deep .mtx-grid-toolbar ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mtx-grid-toolbar ::ng-deep mtx-grid-column-menu button[mat-icon-button]{color:var(--mat-sys-on-primary-container);margin-right:.5rem}::ng-deep .mtx-grid-main{background-color:#fcfcfc}table{width:100%}::ng-deep table thead,::ng-deep table tbody{background-color:#fcfcfc!important}::ng-deep .mtx-grid-footer,::ng-deep .mat-mdc-paginator{display:block;background-color:#fcfcfc!important;border-bottom-left-radius:9px!important;border-bottom-right-radius:9px!important}a,::ng-deep table a,::ng-deep table a:visited{color:var(--mat-sys-on-primary-container);text-decoration:none}a:hover,::ng-deep table a:hover,::ng-deep table a:visited:hover{text-decoration:underline}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MtxGridModule }, { kind: "component", type: i2$1.MtxGrid, selector: "mtx-grid", inputs: ["displayedColumns", "columns", "data", "length", "loading", "trackBy", "columnResizable", "emptyValuePlaceholder", "pageOnFront", "showPaginator", "pageDisabled", "showFirstLastButtons", "pageIndex", "pageSize", "pageSizeOptions", "hidePageSize", "paginationTemplate", "sortOnFront", "sortActive", "sortDirection", "sortDisableClear", "sortDisabled", "sortStart", "rowHover", "rowStriped", "expandable", "expansionTemplate", "multiSelectable", "multiSelectionWithClick", "rowSelectable", "hideRowSelectionCheckbox", "disableRowClickSelection", "rowSelectionFormatter", "rowClassFormatter", "rowSelected", "cellSelectable", "showToolbar", "toolbarTitle", "toolbarTemplate", "columnHideable", "columnHideableChecked", "columnSortable", "columnPinnable", "columnPinOptions", "showColumnMenuButton", "columnMenuButtonText", "columnMenuButtonType", "columnMenuButtonColor", "columnMenuButtonClass", "columnMenuButtonIcon", "columnMenuButtonFontIcon", "columnMenuButtonSvgIcon", "showColumnMenuHeader", "columnMenuHeaderText", "columnMenuHeaderTemplate", "showColumnMenuFooter", "columnMenuFooterText", "columnMenuFooterTemplate", "noResultText", "noResultTemplate", "headerTemplate", "headerExtraTemplate", "cellTemplate", "useContentRowTemplate", "useContentHeaderRowTemplate", "useContentFooterRowTemplate", "showSummary", "summaryTemplate", "showSidebar", "sidebarTemplate", "showStatusbar", "statusbarTemplate"], outputs: ["page", "sortChange", "rowClick", "rowContextMenu", "expansionChange", "rowSelectedChange", "cellSelectedChange", "columnChange"], exportAs: ["mtxGrid"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: ListCategorySelector, selector: "lib-list-category-selector", inputs: ["config", "selectedCategory"], outputs: ["selectedCategoryChange"] }, { kind: "component", type: 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: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: NgxThinAdminList, isStandalone: true, selector: "ngx-thin-admin-list", inputs: { listConfig: "listConfig", categorySelectorConfig: "categorySelectorConfig", itemDeleterConfig: "itemDeleterConfig", listColumns: "listColumns", query: "query" }, outputs: { queryChange: "queryChange" }, viewQueries: [{ propertyName: "cellTplWithLink", first: true, predicate: ["cellTplWithLink"], descendants: true, static: true }, { propertyName: "categorySelector", first: true, predicate: ListCategorySelector, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Category Selector -->\n@if (categorySelectorConfig) {\n  <lib-list-category-selector\n    [config]=\"categorySelectorConfig\"\n    [(selectedCategory)]=\"selectedCategory\"\n    (selectedCategoryChange)=\"onSelectedCategoryChange($event)\"\n  ></lib-list-category-selector>\n}\n<!---->\n\n<!-- Toolbar Template -->\n<ng-template #toolbarTpl>\n  <div class=\"custom-toolbar\">\n    <!-- List Title -->\n    <span class=\"list-title\">\n      @if (listConfig?.title; as listTitle) {\n        @if (query.keyword || query.categoryId || (query.filterColumn && query.filterValue)) {\n          <!-- Title (with link for reset filter) -->\n          <a\n            href=\"javascript:void(0)\"\n            (click)=\"clearFilters()\"\n            [matTooltip]=\"t('list.clearFilters')\"\n            >{{ listTitle }}</a\n          >\n          <!---->\n        } @else {\n          <!-- Title -->\n          {{ listTitle }}\n          <!---->\n        }\n      } @else {\n        <!-- Default Title -->\n        {{ t('list.defaultTitle') }}\n        <!---->\n      }\n\n      @if (query.categoryId && selectedCategory?.[0]; as categoryLabel) {\n        <span class=\"material-icons list-title-separator\"> keyboard_arrow_right </span>\n        <!-- Category -->\n        {{ categoryLabel.label }}\n        <!---->\n      }\n\n      @if (query.filterColumn && query.filterValue) {\n        <span class=\"material-icons list-title-separator\"> keyboard_arrow_right </span>\n        <!-- Custom Filter -->\n        {{ query.filterLabel ?? getColumnLabel(query.filterColumn) }}:\n        {{ getColumnValueLabel(query.filterColumn, query.filterValue) }}\n        <!---->\n      }\n\n      @if (query.keyword) {\n        <span class=\"material-icons list-title-separator\"> keyboard_arrow_right </span>\n        <!-- Keyword -->\n        \"{{ query.keyword }}\"\n        <!---->\n      }\n    </span>\n    <!---->\n\n    @if (query.keyword || query.categoryId || (query.filterColumn && query.filterValue)) {\n      <span style=\"width: 8px\"></span>\n      <!-- Clear Filters Button -->\n      <button\n        mat-icon-button\n        class=\"clear-filters-button\"\n        [matTooltip]=\"t('list.clearFilters')\"\n        (click)=\"clearFilters()\"\n      >\n        <mat-icon>filter_alt_off</mat-icon>\n      </button>\n      <!---->\n    }\n\n    <span style=\"flex: 1\"></span>\n\n    <!-- Create Button -->\n    @if (listConfig?.createButton; as createBtn) {\n      @if ($any(createBtn).routerLink; as routerLinkUrl) {\n        <!-- Create Button with Router Link -->\n        <a\n          [routerLink]=\"routerLinkUrl\"\n          mat-flat-button\n          class=\"create-item-button\"\n          style=\"color: white; transform: translateY(-1px)\"\n        >\n          {{ createBtn.label ?? t('common.create') }}\n          <mat-icon style=\"margin-bottom: 1px\">add</mat-icon>\n        </a>\n      } @else if ($any(createBtn).link; as linkUrl) {\n        <!-- Create Button with Link -->\n        <a\n          [href]=\"linkUrl\"\n          mat-flat-button\n          class=\"create-item-button\"\n          style=\"color: white; transform: translateY(-1px)\"\n        >\n          {{ createBtn.label ?? t('common.create') }}\n          <mat-icon style=\"margin-bottom: 1px\">add</mat-icon>\n        </a>\n      } @else if ($any(createBtn).click; as handler) {\n        <!-- Create Button with Handler -->\n        <button\n          mat-flat-button\n          class=\"create-item-button\"\n          style=\"color: white; transform: translateY(-1px)\"\n          (click)=\"handler()\"\n        >\n          {{ createBtn?.label ?? t('common.create') }}\n          <mat-icon style=\"margin-bottom: 1px\">add</mat-icon>\n        </button>\n      }\n    }\n    <!---->\n\n    <span style=\"width: 30px\"></span>\n\n    <!-- Search Field -->\n    <mat-form-field class=\"search-keyword xs-input\" appearance=\"outline\">\n      <mat-icon matPrefix>search</mat-icon>\n      <input\n        matInput\n        [placeholder]=\"\n          selectedCategory?.[0]?.label\n            ? t('list.searchInCategoryPlaceholder', { category: selectedCategory?.[0]?.label })\n            : t('list.searchDefaultPlaceholder')\n        \"\n        [(ngModel)]=\"query.keyword\"\n        (keyup)=\"onKeywordInput()\"\n        style=\"padding-top: 3px\"\n      />\n\n      <!-- Search clear button -->\n      <button\n        matSuffix\n        mat-icon-button\n        [attr.aria-label]=\"t('list.clearSearchKeyword')\"\n        [matTooltip]=\"t('list.clearSearchKeyword')\"\n        (click)=\"query.keyword = ''; this.fetchList()\"\n        [style.visibility]=\"query.keyword ? 'visible' : 'hidden'\"\n      >\n        <mat-icon>highlight_off</mat-icon>\n      </button>\n      <!---->\n    </mat-form-field>\n    <!---->\n\n    <span style=\"width: 8px\"></span>\n\n    <!-- Refresh Button -->\n    <button mat-icon-button [matTooltip]=\"t('list.refresh')\" (click)=\"fetchList()\">\n      <mat-icon>refresh</mat-icon>\n    </button>\n    <!---->\n\n    <span style=\"width: 5px\"></span>\n\n    <!-- CSV Export Button -->\n    <button\n      mat-icon-button\n      [matMenuTriggerFor]=\"csvExportMenu\"\n      [matTooltip]=\"t('list.exportAsCsv')\"\n    >\n      <mat-icon>download</mat-icon>\n    </button>\n    <!---->\n\n    <!-- CSV Export Menu -->\n    <mat-menu #csvExportMenu=\"matMenu\">\n      @for (encoder of csvExportService.getAvailableEncoders(); track encoder.key) {\n        <!-- Export with specific charset -->\n        <p style=\"color: #333; font-size: 0.8rem; margin: 1rem 0.75rem 1rem 0.7rem\">\n          CSV ({{ encoder.label }})\n        </p>\n        <button mat-menu-item (click)=\"exportAsCsv(encoder.key)\">\n          <mat-icon>download</mat-icon>\n          <span>{{ t('list.exportItems', { count: totalCount }) }}</span>\n        </button>\n        <!---->\n      }\n    </mat-menu>\n    <!---->\n  </div>\n</ng-template>\n<!---->\n\n<!-- List (Grid) -->\n<mtx-grid\n  [data]=\"gridData\"\n  [columns]=\"gridColumns\"\n  [showToolbar]=\"true\"\n  [toolbarTemplate]=\"toolbarTpl\"\n  [length]=\"totalCount\"\n  [loading]=\"isLoading\"\n  [pageOnFront]=\"false\"\n  [pageIndex]=\"query.page\"\n  [pageSize]=\"query.perPage\"\n  [pageSizeOptions]=\"listConfig?.pageSizes ?? [10, 25, 50, 100]\"\n  columnMenuButtonType=\"icon\"\n  columnMenuButtonClass=\"column-menu-button\"\n  columnMenuButtonIcon=\"view_column\"\n  (page)=\"onPageChange($event)\"\n></mtx-grid>\n<!---->\n\n<!-- Cell Template with Link -->\n<ng-template #cellTplWithLink let-row let-index=\"index\" let-col=\"colDef\">\n  @if (col.link) {\n    <a [href]=\"col.link(row)\">\n      @if (col.formatter) {\n        {{ col.formatter(row) }}\n      } @else {\n        {{ row[col.field] }}\n      }\n    </a>\n  } @else if (col.routerLink) {\n    @let link = col.routerLink(row);\n    @let fragment = link.fragment ? link.fragment : link;\n    <a [routerLink]=\"fragment\">\n      @if (col.formatter) {\n        {{ col.formatter(row) }}\n      } @else {\n        {{ row[col.field] }}\n      }\n    </a>\n  } @else {\n    @if (col.formatter) {\n      {{ col.formatter(row) }}\n    } @else {\n      {{ row[col.field] }}\n    }\n  }\n</ng-template>\n<!---->\n", styles: [":host{display:flex;gap:1rem;padding:1rem;box-sizing:border-box}lib-list-category-selector{display:block;width:200px;background-color:#fcfcfc;border-radius:9px;padding:.5rem;box-sizing:border-box}lib-list-category-selector .category-list{max-height:300px;overflow-y:auto}::ng-deep .mtx-grid-toolbar{display:block;background-color:#fcfcfc;border-top-left-radius:9px;border-top-right-radius:9px;margin-bottom:1px}::ng-deep .mtx-grid-toolbar .custom-toolbar{display:flex;align-items:center;justify-content:space-between;height:37px}::ng-deep .mtx-grid-toolbar .custom-toolbar .list-title{font-size:1rem;line-height:37px}::ng-deep .mtx-grid-toolbar .custom-toolbar .list-title a{color:var(--mat-theme-primary)}::ng-deep .mtx-grid-toolbar .custom-toolbar .list-title a:hover{text-decoration:underline}::ng-deep .mtx-grid-toolbar .custom-toolbar .list-title .list-title-separator{color:#aaa;vertical-align:middle;margin:auto .2rem 4px}::ng-deep .mtx-grid-toolbar .custom-toolbar .clear-filters-button{color:var(--mat-sys-on-primary-container);min-width:32px;padding:0;vertical-align:middle}::ng-deep .mtx-grid-toolbar .custom-toolbar .clear-filters-button mat-icon{vertical-align:middle;margin-bottom:3px}::ng-deep .mtx-grid-toolbar .custom-toolbar .create-item-button{text-decoration:none!important}::ng-deep .mtx-grid-toolbar .custom-toolbar .search-keyword{width:15rem;--mat-form-field-container-height: 18.5px;--mat-form-field-container-text-line-height: 18.5px;--mat-form-field-container-vertical-padding: 8.5px;--mat-form-field-outlined-container-shape: 28px;--mat-form-field-subscript-text-line-height: 0px}::ng-deep .mtx-grid-toolbar .custom-toolbar button{color:var(--mat-sys-on-primary-container)}::ng-deep .mtx-grid-toolbar ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mtx-grid-toolbar ::ng-deep mtx-grid-column-menu button[mat-icon-button]{color:var(--mat-sys-on-primary-container);margin-right:.5rem}::ng-deep .mtx-grid-main{background-color:#fcfcfc}table{width:100%}::ng-deep table thead,::ng-deep table tbody{background-color:#fcfcfc!important}::ng-deep .mtx-grid-footer,::ng-deep .mat-mdc-paginator{display:block;background-color:#fcfcfc!important;border-bottom-left-radius:9px!important;border-bottom-right-radius:9px!important}a,::ng-deep table a,::ng-deep table a:visited{color:var(--mat-sys-on-primary-container);text-decoration:none}a:hover,::ng-deep table a:hover,::ng-deep table a:visited:hover{text-decoration:underline}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MtxGridModule }, { kind: "component", type: i2$2.MtxGrid, selector: "mtx-grid", inputs: ["displayedColumns", "columns", "data", "length", "loading", "trackBy", "columnResizable", "emptyValuePlaceholder", "pageOnFront", "showPaginator", "pageDisabled", "showFirstLastButtons", "pageIndex", "pageSize", "pageSizeOptions", "hidePageSize", "paginationTemplate", "sortOnFront", "sortActive", "sortDirection", "sortDisableClear", "sortDisabled", "sortStart", "rowHover", "rowStriped", "expandable", "expansionTemplate", "multiSelectable", "multiSelectionWithClick", "rowSelectable", "hideRowSelectionCheckbox", "disableRowClickSelection", "rowSelectionFormatter", "rowClassFormatter", "rowSelected", "cellSelectable", "showToolbar", "toolbarTitle", "toolbarTemplate", "columnHideable", "columnHideableChecked", "columnSortable", "columnPinnable", "columnPinOptions", "showColumnMenuButton", "columnMenuButtonText", "columnMenuButtonType", "columnMenuButtonColor", "columnMenuButtonClass", "columnMenuButtonIcon", "columnMenuButtonFontIcon", "columnMenuButtonSvgIcon", "showColumnMenuHeader", "columnMenuHeaderText", "columnMenuHeaderTemplate", "showColumnMenuFooter", "columnMenuFooterText", "columnMenuFooterTemplate", "noResultText", "noResultTemplate", "headerTemplate", "headerExtraTemplate", "cellTemplate", "useContentRowTemplate", "useContentHeaderRowTemplate", "useContentFooterRowTemplate", "showSummary", "summaryTemplate", "showSidebar", "sidebarTemplate", "showStatusbar", "statusbarTemplate"], outputs: ["page", "sortChange", "rowClick", "rowContextMenu", "expansionChange", "rowSelectedChange", "cellSelectedChange", "columnChange"], exportAs: ["mtxGrid"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: ListCategorySelector, selector: "lib-list-category-selector", inputs: ["config", "selectedCategory"], outputs: ["selectedCategoryChange"] }, { kind: "component", type: 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: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NgxThinAdminList, decorators: [{
             type: Component,
@@ -599,20 +1129,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                         MatMenuItem,
                         MatMenuTrigger,
                         RouterLink,
-                    ], template: "<!-- Category Selector -->\n@if (categorySelectorConfig) {\n  <lib-list-category-selector\n    [config]=\"categorySelectorConfig\"\n    [(selectedCategory)]=\"selectedCategory\"\n    (selectedCategoryChange)=\"onSelectedCategoryChange($event)\"\n  ></lib-list-category-selector>\n}\n<!---->\n\n<!-- Toolbar Template -->\n<ng-template #toolbarTpl>\n  <div class=\"custom-toolbar\">\n    <!-- List Title -->\n    <span class=\"list-title\">\n      @if (listConfig?.title; as listTitle) {\n        @if (query.keyword || query.categoryId) {\n          <!-- Title (with link for reset filter) -->\n          <a\n            href=\"javascript:void(0)\"\n            (click)=\"query.keyword = ''; query.categoryId = undefined; this.fetchList()\"\n            matTooltip=\"Reset filters\"\n            >{{ listTitle }}</a\n          >\n          <!---->\n        } @else {\n          <!-- Title -->\n          {{ listTitle }}\n          <!---->\n        }\n      } @else {\n        <!-- Default Title -->\n        List\n        <!---->\n      }\n\n      @if (query.categoryId && selectedCategory?.[0]; as categoryLabel) {\n        <span class=\"material-icons list-title-separator\"> keyboard_arrow_right </span>\n        <!-- Category -->\n        {{ categoryLabel.label }}\n        <!---->\n      }\n\n      @if (query.keyword) {\n        <span class=\"material-icons list-title-separator\"> keyboard_arrow_right </span>\n        <!-- Keyword -->\n        \"{{ query.keyword }}\"\n        <!---->\n      }\n    </span>\n    <!---->\n\n    @if (query.keyword || query.categoryId) {\n      <span style=\"width: 8px\"></span>\n      <!-- Clear Filters Button -->\n      <button\n        mat-icon-button\n        class=\"clear-filters-button\"\n        matTooltip=\"Clear filters\"\n        (click)=\"clearFilters()\"\n      >\n        <mat-icon>filter_alt_off</mat-icon>\n      </button>\n      <!---->\n    }\n\n    <span style=\"flex: 1\"></span>\n\n    <!-- Create Button -->\n    @if (listConfig?.createButton; as createBtn) {\n      @if ($any(createBtn).routerLink; as routerLinkUrl) {\n        <!-- Create Button with Router Link -->\n        <a\n          [routerLink]=\"routerLinkUrl\"\n          mat-flat-button\n          class=\"primary-button\"\n          style=\"color: white; transform: translateY(-1px)\"\n        >\n          {{ createBtn.label }}\n          <mat-icon style=\"margin-bottom: 1px\">add</mat-icon>\n        </a>\n      } @else if ($any(createBtn).link; as linkUrl) {\n        <!-- Create Button with Link -->\n        <a\n          [href]=\"linkUrl\"\n          mat-flat-button\n          class=\"primary-button\"\n          style=\"color: white; transform: translateY(-1px)\"\n        >\n          {{ createBtn.label }}\n          <mat-icon style=\"margin-bottom: 1px\">add</mat-icon>\n        </a>\n      } @else if ($any(createBtn).click; as handler) {\n        <!-- Create Button with Handler -->\n        <button\n          mat-flat-button\n          class=\"primary-button\"\n          style=\"color: white; transform: translateY(-1px)\"\n          (click)=\"handler()\"\n        >\n          {{ createBtn?.label }}\n          <mat-icon style=\"margin-bottom: 1px\">add</mat-icon>\n        </button>\n      }\n    }\n    <!---->\n\n    <span style=\"width: 30px\"></span>\n\n    <!-- Search Field -->\n    <mat-form-field class=\"search-keyword xs-input\" appearance=\"outline\">\n      <mat-icon matPrefix>search</mat-icon>\n      <input\n        matInput\n        [placeholder]=\"\n          selectedCategory?.[0]?.label\n            ? 'Search in ' + selectedCategory?.[0]?.label + '...'\n            : 'Search...'\n        \"\n        [(ngModel)]=\"query.keyword\"\n        (keyup)=\"onKeywordInput()\"\n        style=\"padding-top: 3px\"\n      />\n\n      <!-- Search clear button -->\n      <button\n        matSuffix\n        mat-icon-button\n        aria-label=\"Clear search keyword\"\n        matTooltip=\"Clear search keyword\"\n        (click)=\"query.keyword = ''; this.fetchList()\"\n        [style.visibility]=\"query.keyword ? 'visible' : 'hidden'\"\n      >\n        <mat-icon>highlight_off</mat-icon>\n      </button>\n      <!---->\n    </mat-form-field>\n    <!---->\n\n    <span style=\"width: 8px\"></span>\n\n    <!-- Refresh Button -->\n    <button mat-icon-button matTooltip=\"Refresh\" (click)=\"fetchList()\">\n      <mat-icon>refresh</mat-icon>\n    </button>\n    <!---->\n\n    <span style=\"width: 5px\"></span>\n\n    <!-- CSV Export Button -->\n    <button mat-icon-button [matMenuTriggerFor]=\"csvExportMenu\" matTooltip=\"Export as CSV\">\n      <mat-icon>download</mat-icon>\n    </button>\n    <!---->\n\n    <!-- CSV Export Menu -->\n    <mat-menu #csvExportMenu=\"matMenu\">\n      @for (encoder of csvExportService.getAvailableEncoders(); track encoder.key) {\n        <!-- Export with specific charset -->\n        <p style=\"color: #333; font-size: 0.8rem; margin: 1rem 0.75rem 1rem 0.7rem\">\n          CSV ({{ encoder.label }})\n        </p>\n        <button mat-menu-item (click)=\"exportAsCsv(encoder.key)\">\n          <mat-icon>download</mat-icon>\n          <span>Export {{ totalCount }} items</span>\n        </button>\n        <!---->\n      }\n    </mat-menu>\n    <!---->\n  </div>\n</ng-template>\n<!---->\n\n<!-- List (Grid) -->\n<mtx-grid\n  [data]=\"gridData\"\n  [columns]=\"gridColumns\"\n  [showToolbar]=\"true\"\n  [toolbarTemplate]=\"toolbarTpl\"\n  [length]=\"totalCount\"\n  [loading]=\"isLoading\"\n  [pageOnFront]=\"false\"\n  [pageIndex]=\"query.page\"\n  [pageSize]=\"query.perPage\"\n  [pageSizeOptions]=\"listConfig?.pageSizes ?? [10, 25, 50, 100]\"\n  columnMenuButtonType=\"icon\"\n  columnMenuButtonClass=\"column-menu-button\"\n  columnMenuButtonIcon=\"view_column\"\n  (page)=\"onPageChange($event)\"\n></mtx-grid>\n<!---->\n\n<!-- Cell Template with Link -->\n<ng-template #cellTplWithLink let-row let-index=\"index\" let-col=\"colDef\">\n  @if (col.link) {\n    <a [href]=\"col.link(row)\">\n      {{ row[col.field] }}\n    </a>\n  } @else if (col.routerLink) {\n    <a [routerLink]=\"col.routerLink(row)\">\n      {{ row[col.field] }}\n    </a>\n  } @else {\n    {{ row[col.field] }}\n  }\n</ng-template>\n<!---->\n", styles: [":host{display:flex;gap:1rem;padding:1rem;box-sizing:border-box}lib-list-category-selector{display:block;width:200px;background-color:#fcfcfc;border-radius:9px;padding:.5rem;box-sizing:border-box}lib-list-category-selector .category-list{max-height:300px;overflow-y:auto}::ng-deep .mtx-grid-toolbar{display:block;background-color:#fcfcfc;border-top-left-radius:9px;border-top-right-radius:9px;margin-bottom:1px}::ng-deep .mtx-grid-toolbar .custom-toolbar{display:flex;align-items:center;justify-content:space-between;height:37px}::ng-deep .mtx-grid-toolbar .custom-toolbar .list-title{font-size:1rem;line-height:37px}::ng-deep .mtx-grid-toolbar .custom-toolbar .list-title a{color:var(--mat-theme-primary)}::ng-deep .mtx-grid-toolbar .custom-toolbar .list-title a:hover{text-decoration:underline}::ng-deep .mtx-grid-toolbar .custom-toolbar .list-title .list-title-separator{color:#aaa;vertical-align:middle;margin:auto .2rem 4px}::ng-deep .mtx-grid-toolbar .custom-toolbar .clear-filters-button{color:var(--mat-sys-on-primary-container);min-width:32px;padding:0;vertical-align:middle}::ng-deep .mtx-grid-toolbar .custom-toolbar .clear-filters-button mat-icon{vertical-align:middle;margin-bottom:3px}::ng-deep .mtx-grid-toolbar .custom-toolbar .search-keyword{width:15rem;--mat-form-field-container-height: 18.5px;--mat-form-field-container-text-line-height: 18.5px;--mat-form-field-container-vertical-padding: 8.5px;--mat-form-field-outlined-container-shape: 28px;--mat-form-field-subscript-text-line-height: 0px}::ng-deep .mtx-grid-toolbar .custom-toolbar button{color:var(--mat-sys-on-primary-container)}::ng-deep .mtx-grid-toolbar ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mtx-grid-toolbar ::ng-deep mtx-grid-column-menu button[mat-icon-button]{color:var(--mat-sys-on-primary-container);margin-right:.5rem}::ng-deep .mtx-grid-main{background-color:#fcfcfc}table{width:100%}::ng-deep table thead,::ng-deep table tbody{background-color:#fcfcfc!important}::ng-deep .mtx-grid-footer,::ng-deep .mat-mdc-paginator{display:block;background-color:#fcfcfc!important;border-bottom-left-radius:9px!important;border-bottom-right-radius:9px!important}a,::ng-deep table a,::ng-deep table a:visited{color:var(--mat-sys-on-primary-container);text-decoration:none}a:hover,::ng-deep table a:hover,::ng-deep table a:visited:hover{text-decoration:underline}\n"] }]
+                    ], template: "<!-- Category Selector -->\n@if (categorySelectorConfig) {\n  <lib-list-category-selector\n    [config]=\"categorySelectorConfig\"\n    [(selectedCategory)]=\"selectedCategory\"\n    (selectedCategoryChange)=\"onSelectedCategoryChange($event)\"\n  ></lib-list-category-selector>\n}\n<!---->\n\n<!-- Toolbar Template -->\n<ng-template #toolbarTpl>\n  <div class=\"custom-toolbar\">\n    <!-- List Title -->\n    <span class=\"list-title\">\n      @if (listConfig?.title; as listTitle) {\n        @if (query.keyword || query.categoryId || (query.filterColumn && query.filterValue)) {\n          <!-- Title (with link for reset filter) -->\n          <a\n            href=\"javascript:void(0)\"\n            (click)=\"clearFilters()\"\n            [matTooltip]=\"t('list.clearFilters')\"\n            >{{ listTitle }}</a\n          >\n          <!---->\n        } @else {\n          <!-- Title -->\n          {{ listTitle }}\n          <!---->\n        }\n      } @else {\n        <!-- Default Title -->\n        {{ t('list.defaultTitle') }}\n        <!---->\n      }\n\n      @if (query.categoryId && selectedCategory?.[0]; as categoryLabel) {\n        <span class=\"material-icons list-title-separator\"> keyboard_arrow_right </span>\n        <!-- Category -->\n        {{ categoryLabel.label }}\n        <!---->\n      }\n\n      @if (query.filterColumn && query.filterValue) {\n        <span class=\"material-icons list-title-separator\"> keyboard_arrow_right </span>\n        <!-- Custom Filter -->\n        {{ query.filterLabel ?? getColumnLabel(query.filterColumn) }}:\n        {{ getColumnValueLabel(query.filterColumn, query.filterValue) }}\n        <!---->\n      }\n\n      @if (query.keyword) {\n        <span class=\"material-icons list-title-separator\"> keyboard_arrow_right </span>\n        <!-- Keyword -->\n        \"{{ query.keyword }}\"\n        <!---->\n      }\n    </span>\n    <!---->\n\n    @if (query.keyword || query.categoryId || (query.filterColumn && query.filterValue)) {\n      <span style=\"width: 8px\"></span>\n      <!-- Clear Filters Button -->\n      <button\n        mat-icon-button\n        class=\"clear-filters-button\"\n        [matTooltip]=\"t('list.clearFilters')\"\n        (click)=\"clearFilters()\"\n      >\n        <mat-icon>filter_alt_off</mat-icon>\n      </button>\n      <!---->\n    }\n\n    <span style=\"flex: 1\"></span>\n\n    <!-- Create Button -->\n    @if (listConfig?.createButton; as createBtn) {\n      @if ($any(createBtn).routerLink; as routerLinkUrl) {\n        <!-- Create Button with Router Link -->\n        <a\n          [routerLink]=\"routerLinkUrl\"\n          mat-flat-button\n          class=\"create-item-button\"\n          style=\"color: white; transform: translateY(-1px)\"\n        >\n          {{ createBtn.label ?? t('common.create') }}\n          <mat-icon style=\"margin-bottom: 1px\">add</mat-icon>\n        </a>\n      } @else if ($any(createBtn).link; as linkUrl) {\n        <!-- Create Button with Link -->\n        <a\n          [href]=\"linkUrl\"\n          mat-flat-button\n          class=\"create-item-button\"\n          style=\"color: white; transform: translateY(-1px)\"\n        >\n          {{ createBtn.label ?? t('common.create') }}\n          <mat-icon style=\"margin-bottom: 1px\">add</mat-icon>\n        </a>\n      } @else if ($any(createBtn).click; as handler) {\n        <!-- Create Button with Handler -->\n        <button\n          mat-flat-button\n          class=\"create-item-button\"\n          style=\"color: white; transform: translateY(-1px)\"\n          (click)=\"handler()\"\n        >\n          {{ createBtn?.label ?? t('common.create') }}\n          <mat-icon style=\"margin-bottom: 1px\">add</mat-icon>\n        </button>\n      }\n    }\n    <!---->\n\n    <span style=\"width: 30px\"></span>\n\n    <!-- Search Field -->\n    <mat-form-field class=\"search-keyword xs-input\" appearance=\"outline\">\n      <mat-icon matPrefix>search</mat-icon>\n      <input\n        matInput\n        [placeholder]=\"\n          selectedCategory?.[0]?.label\n            ? t('list.searchInCategoryPlaceholder', { category: selectedCategory?.[0]?.label })\n            : t('list.searchDefaultPlaceholder')\n        \"\n        [(ngModel)]=\"query.keyword\"\n        (keyup)=\"onKeywordInput()\"\n        style=\"padding-top: 3px\"\n      />\n\n      <!-- Search clear button -->\n      <button\n        matSuffix\n        mat-icon-button\n        [attr.aria-label]=\"t('list.clearSearchKeyword')\"\n        [matTooltip]=\"t('list.clearSearchKeyword')\"\n        (click)=\"query.keyword = ''; this.fetchList()\"\n        [style.visibility]=\"query.keyword ? 'visible' : 'hidden'\"\n      >\n        <mat-icon>highlight_off</mat-icon>\n      </button>\n      <!---->\n    </mat-form-field>\n    <!---->\n\n    <span style=\"width: 8px\"></span>\n\n    <!-- Refresh Button -->\n    <button mat-icon-button [matTooltip]=\"t('list.refresh')\" (click)=\"fetchList()\">\n      <mat-icon>refresh</mat-icon>\n    </button>\n    <!---->\n\n    <span style=\"width: 5px\"></span>\n\n    <!-- CSV Export Button -->\n    <button\n      mat-icon-button\n      [matMenuTriggerFor]=\"csvExportMenu\"\n      [matTooltip]=\"t('list.exportAsCsv')\"\n    >\n      <mat-icon>download</mat-icon>\n    </button>\n    <!---->\n\n    <!-- CSV Export Menu -->\n    <mat-menu #csvExportMenu=\"matMenu\">\n      @for (encoder of csvExportService.getAvailableEncoders(); track encoder.key) {\n        <!-- Export with specific charset -->\n        <p style=\"color: #333; font-size: 0.8rem; margin: 1rem 0.75rem 1rem 0.7rem\">\n          CSV ({{ encoder.label }})\n        </p>\n        <button mat-menu-item (click)=\"exportAsCsv(encoder.key)\">\n          <mat-icon>download</mat-icon>\n          <span>{{ t('list.exportItems', { count: totalCount }) }}</span>\n        </button>\n        <!---->\n      }\n    </mat-menu>\n    <!---->\n  </div>\n</ng-template>\n<!---->\n\n<!-- List (Grid) -->\n<mtx-grid\n  [data]=\"gridData\"\n  [columns]=\"gridColumns\"\n  [showToolbar]=\"true\"\n  [toolbarTemplate]=\"toolbarTpl\"\n  [length]=\"totalCount\"\n  [loading]=\"isLoading\"\n  [pageOnFront]=\"false\"\n  [pageIndex]=\"query.page\"\n  [pageSize]=\"query.perPage\"\n  [pageSizeOptions]=\"listConfig?.pageSizes ?? [10, 25, 50, 100]\"\n  columnMenuButtonType=\"icon\"\n  columnMenuButtonClass=\"column-menu-button\"\n  columnMenuButtonIcon=\"view_column\"\n  (page)=\"onPageChange($event)\"\n></mtx-grid>\n<!---->\n\n<!-- Cell Template with Link -->\n<ng-template #cellTplWithLink let-row let-index=\"index\" let-col=\"colDef\">\n  @if (col.link) {\n    <a [href]=\"col.link(row)\">\n      @if (col.formatter) {\n        {{ col.formatter(row) }}\n      } @else {\n        {{ row[col.field] }}\n      }\n    </a>\n  } @else if (col.routerLink) {\n    @let link = col.routerLink(row);\n    @let fragment = link.fragment ? link.fragment : link;\n    <a [routerLink]=\"fragment\">\n      @if (col.formatter) {\n        {{ col.formatter(row) }}\n      } @else {\n        {{ row[col.field] }}\n      }\n    </a>\n  } @else {\n    @if (col.formatter) {\n      {{ col.formatter(row) }}\n    } @else {\n      {{ row[col.field] }}\n    }\n  }\n</ng-template>\n<!---->\n", styles: [":host{display:flex;gap:1rem;padding:1rem;box-sizing:border-box}lib-list-category-selector{display:block;width:200px;background-color:#fcfcfc;border-radius:9px;padding:.5rem;box-sizing:border-box}lib-list-category-selector .category-list{max-height:300px;overflow-y:auto}::ng-deep .mtx-grid-toolbar{display:block;background-color:#fcfcfc;border-top-left-radius:9px;border-top-right-radius:9px;margin-bottom:1px}::ng-deep .mtx-grid-toolbar .custom-toolbar{display:flex;align-items:center;justify-content:space-between;height:37px}::ng-deep .mtx-grid-toolbar .custom-toolbar .list-title{font-size:1rem;line-height:37px}::ng-deep .mtx-grid-toolbar .custom-toolbar .list-title a{color:var(--mat-theme-primary)}::ng-deep .mtx-grid-toolbar .custom-toolbar .list-title a:hover{text-decoration:underline}::ng-deep .mtx-grid-toolbar .custom-toolbar .list-title .list-title-separator{color:#aaa;vertical-align:middle;margin:auto .2rem 4px}::ng-deep .mtx-grid-toolbar .custom-toolbar .clear-filters-button{color:var(--mat-sys-on-primary-container);min-width:32px;padding:0;vertical-align:middle}::ng-deep .mtx-grid-toolbar .custom-toolbar .clear-filters-button mat-icon{vertical-align:middle;margin-bottom:3px}::ng-deep .mtx-grid-toolbar .custom-toolbar .create-item-button{text-decoration:none!important}::ng-deep .mtx-grid-toolbar .custom-toolbar .search-keyword{width:15rem;--mat-form-field-container-height: 18.5px;--mat-form-field-container-text-line-height: 18.5px;--mat-form-field-container-vertical-padding: 8.5px;--mat-form-field-outlined-container-shape: 28px;--mat-form-field-subscript-text-line-height: 0px}::ng-deep .mtx-grid-toolbar .custom-toolbar button{color:var(--mat-sys-on-primary-container)}::ng-deep .mtx-grid-toolbar ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mtx-grid-toolbar ::ng-deep mtx-grid-column-menu button[mat-icon-button]{color:var(--mat-sys-on-primary-container);margin-right:.5rem}::ng-deep .mtx-grid-main{background-color:#fcfcfc}table{width:100%}::ng-deep table thead,::ng-deep table tbody{background-color:#fcfcfc!important}::ng-deep .mtx-grid-footer,::ng-deep .mat-mdc-paginator{display:block;background-color:#fcfcfc!important;border-bottom-left-radius:9px!important;border-bottom-right-radius:9px!important}a,::ng-deep table a,::ng-deep table a:visited{color:var(--mat-sys-on-primary-container);text-decoration:none}a:hover,::ng-deep table a:hover,::ng-deep table a:visited:hover{text-decoration:underline}\n"] }]
         }], propDecorators: { listConfig: [{
                 type: Input
             }], categorySelectorConfig: [{
                 type: Input
+            }], itemDeleterConfig: [{
+                type: Input
             }], listColumns: [{
                 type: Input
             }], query: [{
                 type: Input
+            }], queryChange: [{
+                type: Output
             }], cellTplWithLink: [{
                 type: ViewChild,
                 args: ['cellTplWithLink', { static: true }]
+            }], categorySelector: [{
+                type: ViewChild,
+                args: [ListCategorySelector]
             }] } });
 
+/**
+ * Injection token for providing extra formly config to NgxThinAdminEditor.
+ * Use provideNgxThinAdminFormlyConfig() to register from the consumer app.
+ */
+const NGX_THIN_ADMIN_EXTRA_FORMLY_CONFIG = new InjectionToken('NGX_THIN_ADMIN_EXTRA_FORMLY_CONFIG');
+/**
+ * Returns a provider that adds custom formly types, wrappers, etc. to NgxThinAdminEditor.
+ *
+ * @example
+ * provideNgxThinAdminFormlyConfig({
+ *   types: [{ name: 'qrcode', component: QrcodeFieldComponent }],
+ * })
+ */
+function provideNgxThinAdminFormlyConfig(config) {
+    return {
+        provide: NGX_THIN_ADMIN_EXTRA_FORMLY_CONFIG,
+        useValue: config,
+        multi: true,
+    };
+}
+
 class FormlyMatPrefixAddonWrapper extends FieldWrapper {
     matPrefix;
     matSuffix;
@@ -704,25 +1262,99 @@ function formlyAddonsExtension(field) {
     }
 }
 
-function getErrorMessage(error) {
-    if (typeof error === 'string') {
-        return error;
-    }
-    else if (error instanceof Error) {
-        return error.message;
-    }
-    else if (error?.error?.message) {
-        if (Array.isArray(error.error.message)) {
-            return error.error.message[0];
-        }
-        else {
-            return error.error.message;
-        }
-    }
-    else {
-        return 'An unknown error occurred';
+class FormlyFieldFile extends FieldType {
+    /** 表示用のファイル名 */
+    fileName = '';
+    /** ファイルが選択されたときの処理 */
+    onFileChange(event) {
+        const input = event.target;
+        const file = input.files?.[0] ?? null;
+        // formControl に File オブジェクトをセット
+        this.formControl.setValue(file);
+        this.formControl.markAsDirty();
+        // 表示用のファイル名を更新
+        this.fileName = file?.name ?? '';
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormlyFieldFile, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: FormlyFieldFile, isStandalone: true, selector: "formly-field-file", usesInheritance: true, ngImport: i0, template: `
+    <mat-form-field appearance="outline" floatLabel="always" subscriptSizing="dynamic" style="width:100%">
+      <!-- Field label -->
+      @if (props.label) {
+        <mat-label>{{ props.label }}{{ props.required ? ' *' : '' }}</mat-label>
+      }
+      
+      <!-- Choosed file name -->
+      <input matInput type="text" readonly [value]="fileName" [formlyAttributes]="field" (click)="fileInput.click()" />
+
+      <!-- File choose button -->
+      <button mat-icon-button matSuffix style="margin-right: 1rem;" type="button" (click)="fileInput.click()">
+        <mat-icon>attach_file</mat-icon>
+      </button>
+
+      <!-- Actual file input (hidden) -->
+      <input
+        type="file"
+        #fileInput
+        style="display: none"
+        [attr.accept]="props['accept'] ?? null"
+        (change)="onFileChange($event)"
+      />
+
+      <!-- Field description -->
+      @if (props.description) {
+        <mat-hint>{{ props.description }}</mat-hint>
+      }
+    </mat-form-field>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: FormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormlyFieldFile, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formly-field-file',
+                    template: `
+    <mat-form-field appearance="outline" floatLabel="always" subscriptSizing="dynamic" style="width:100%">
+      <!-- Field label -->
+      @if (props.label) {
+        <mat-label>{{ props.label }}{{ props.required ? ' *' : '' }}</mat-label>
+      }
+      
+      <!-- Choosed file name -->
+      <input matInput type="text" readonly [value]="fileName" [formlyAttributes]="field" (click)="fileInput.click()" />
+
+      <!-- File choose button -->
+      <button mat-icon-button matSuffix style="margin-right: 1rem;" type="button" (click)="fileInput.click()">
+        <mat-icon>attach_file</mat-icon>
+      </button>
+
+      <!-- Actual file input (hidden) -->
+      <input
+        type="file"
+        #fileInput
+        style="display: none"
+        [attr.accept]="props['accept'] ?? null"
+        (change)="onFileChange($event)"
+      />
+
+      <!-- Field description -->
+      @if (props.description) {
+        <mat-hint>{{ props.description }}</mat-hint>
+      }
+    </mat-form-field>
+  `,
+                    standalone: true,
+                    imports: [
+                        ReactiveFormsModule,
+                        FormlyAttributes,
+                        MatInputModule,
+                        MatIcon,
+                        MatIconButton,
+                        MatFormField$1,
+                        MatLabel,
+                        MatHint,
+                        MatSuffix$1,
+                    ],
+                }]
+        }] });
 
 class NgxThinAdminEditor {
     /**
@@ -737,6 +1369,10 @@ class NgxThinAdminEditor {
      * Id of the item being edited.
      */
     itemId;
+    /**
+     * Config for item deleter
+     */
+    itemDeleterConfig;
     /**
      * Internal state for form
      */
@@ -745,11 +1381,24 @@ class NgxThinAdminEditor {
     form = new FormGroup({});
     data = {};
     formData = {};
+    /**
+     * For history back
+     */
+    windowHistory = window.history;
     /**
      * Services
      */
     snackbar = inject(MatSnackBar);
     cdr = inject(ChangeDetectorRef);
+    translate = inject(NGX_THIN_ADMIN_TRANSLATE);
+    dialog = inject(MatDialog);
+    router = inject(Router);
+    t(key, params) {
+        return this.translate(key, params);
+    }
+    get editorItemType() {
+        return this.editorConfig?.singularLabel || this.t('item.defaultSingular');
+    }
     ngOnChanges(changes) {
         // Fetcher
         if (changes.editorConfig &&
@@ -831,7 +1480,7 @@ class NgxThinAdminEditor {
     }
     async save() {
         if (this.form.status === 'INVALID') {
-            this.snackbar.open('Error: Invalid input', undefined, {
+            this.snackbar.open(`Error: ${this.t('editor.errorInvalidInput')}`, undefined, {
                 duration: 3000,
             });
             // Mark field to show validation errors
@@ -842,7 +1491,7 @@ class NgxThinAdminEditor {
             return;
         }
         if (!this.editorConfig?.saver) {
-            this.snackbar.open('Error: No saver function provided', undefined, {
+            this.snackbar.open(`Error: ${this.t('editor.errorNoSaver')}`, undefined, {
                 duration: 3000,
             });
             return;
@@ -852,8 +1501,9 @@ class NgxThinAdminEditor {
         this.isSaving = true;
         // Call the saver function
         let result;
+        let showSuccessMessage = true;
         try {
-            let res = await this.editorConfig?.saver?.(this.formData, this.itemId);
+            let res = await this.editorConfig.saver(this.formData, this.itemId);
             if (res instanceof Response) {
                 if (!res.ok) {
                     const data = await res.json();
@@ -861,6 +1511,9 @@ class NgxThinAdminEditor {
                 }
                 res = await res.json();
             }
+            else if (typeof res === 'undefined') {
+                showSuccessMessage = false;
+            }
             result = res;
         }
         catch (e) {
@@ -874,9 +1527,11 @@ class NgxThinAdminEditor {
             return;
         }
         // Show success message
-        this.snackbar.open('Data saved successfully', undefined, {
-            duration: 3000,
-        });
+        if (showSuccessMessage) {
+            this.snackbar.open(this.t('editor.successSaved'), undefined, {
+                duration: 3000,
+            });
+        }
         // Update form data with the result from the saver (e.g., to get generated ID)
         this.data = { ...result };
         this.formData = { ...result };
@@ -887,8 +1542,60 @@ class NgxThinAdminEditor {
         }
         this.isSaving = false;
     }
+    async openDeletionDialog() {
+        if (!this.itemDeleterConfig?.deleter || this.itemId === undefined) {
+            return;
+        }
+        // Get the label and ID to query in the confirmation dialog
+        const id = this.itemId;
+        const label = this.editorConfig?.labelFieldKey
+            ? this.data[this.editorConfig.labelFieldKey]
+            : id;
+        const itemType = this.editorItemType;
+        // Open the confirmation dialog
+        const dialogRef = this.dialog.open(ConfirmDialog, {
+            width: '400px',
+            data: {
+                title: this.t('item.deletionDialogTitle', { itemType }),
+                message: this.t('item.deletionDialogMessage', { label, id }),
+                positiveButtonText: this.t('common.delete'),
+                cancelButtonText: this.t('common.cancel'),
+            },
+        });
+        const result = await lastValueFrom(dialogRef.afterClosed());
+        if (!result) {
+            return;
+        }
+        // Execute delete process
+        await this.deleteItem(id, label);
+    }
+    async deleteItem(id, label) {
+        if (!this.itemDeleterConfig?.deleter) {
+            return;
+        }
+        try {
+            const res = await this.itemDeleterConfig.deleter(id);
+            if (res && 'ok' in res && !res.ok) {
+                const errorMessage = getErrorMessage(res);
+                throw new Error(errorMessage);
+            }
+        }
+        catch (e) {
+            const errorMessage = getErrorMessage(e);
+            this.snackbar.open(`Error: ${errorMessage || this.t('item.errorFailedDelete', { label })}`, undefined, { duration: 3000 });
+            return;
+        }
+        // Show success message
+        this.snackbar.open(this.t('item.successDeleted', { label }), undefined, {
+            duration: 3000,
+        });
+        // Subsequence routing
+        if (this.itemDeleterConfig.afterDeleteNavigateTo) {
+            this.router.navigate([this.itemDeleterConfig.afterDeleteNavigateTo]);
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NgxThinAdminEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: NgxThinAdminEditor, isStandalone: true, selector: "ngx-thin-admin-editor", inputs: { editorConfig: "editorConfig", editorFields: "editorFields", itemId: "itemId" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: NgxThinAdminEditor, isStandalone: true, selector: "ngx-thin-admin-editor", inputs: { editorConfig: "editorConfig", editorFields: "editorFields", itemId: "itemId", itemDeleterConfig: "itemDeleterConfig" }, providers: [
             provideFormlyCore(withFormlyMaterial()),
             provideFormlyCore({
                 wrappers: [
@@ -898,7 +1605,31 @@ class NgxThinAdminEditor {
                     },
                 ],
                 extensions: [{ name: 'addons', extension: { onPopulate: formlyAddonsExtension } }],
+                types: [
+                    {
+                        name: 'file',
+                        component: FormlyFieldFile,
+                    },
+                ],
             }),
+            {
+                provide: FORMLY_CONFIG,
+                multi: true,
+                useFactory: () => {
+                    const configs = inject(NGX_THIN_ADMIN_EXTRA_FORMLY_CONFIG, {
+                        optional: true,
+                        skipSelf: true,
+                    });
+                    if (!configs || configs.length === 0)
+                        return {};
+                    return configs.reduce((acc, c) => ({
+                        types: [...(acc.types ?? []), ...(c.types ?? [])],
+                        wrappers: [...(acc.wrappers ?? []), ...(c.wrappers ?? [])],
+                        validators: [...(acc.validators ?? []), ...(c.validators ?? [])],
+                        extensions: [...(acc.extensions ?? []), ...(c.extensions ?? [])],
+                    }), {});
+                },
+            },
             {
                 // Apply default appearance and other settings to all Material form fields in this component
                 provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
@@ -908,7 +1639,7 @@ class NgxThinAdminEditor {
                     subscriptSizing: 'dynamic',
                 },
             },
-        ], usesOnChanges: true, ngImport: i0, template: "<mat-card>\n  <mat-card-header>\n    <h3>\n      @if (itemId !== undefined && $any(data); as editItem) {\n        @if (editorConfig?.labelFieldKey && editItem[editorConfig!.labelFieldKey!]) {\n          <!-- e.g., \"Edit - Taro (taro) \" -->\n          Edit &nbsp; <span style=\"color: #aaaaaa\">-</span>\n          <span class=\"editor-item-label\">{{ editItem[editorConfig!.labelFieldKey!] }}</span>\n          @if (editorConfig?.idFieldKey && editItem[editorConfig!.idFieldKey!]) {\n            <small class=\"editor-header-sub\">{{ editItem[editorConfig!.idFieldKey!] }}</small>\n          }\n          <!---->\n        } @else if (editItem.id) {\n          <!-- e.g., \"Edit - ID: 123\" -->\n          Edit &nbsp; <span style=\"color: #aaaaaa\">-</span>\n          ID:\n          <span class=\"editor-item-label\">{{ editItem.id }}</span>\n          <!---->\n        } @else {\n          <!-- e.g., \"Edit Account (123)\" -->\n          Edit\n          @if (editorConfig?.singularLabel) {\n            {{ editorConfig?.singularLabel }}\n          }\n          @if (editorConfig?.idFieldKey && editItem[editorConfig!.idFieldKey!]) {\n            <small class=\"editor-header-sub\">{{ editItem[editorConfig!.idFieldKey!] }}</small>\n          }\n          <!---->\n        }\n      } @else {\n        <!-- Create Account -->\n        Create\n        @if (editorConfig?.singularLabel) {\n          {{ editorConfig?.singularLabel }}\n        }\n        <!---->\n      }\n    </h3>\n  </mat-card-header>\n\n  <mat-card-content>\n    @if (isLoading) {\n      <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n    } @else {\n      <form [formGroup]=\"form\" (ngSubmit)=\"save()\">\n        <formly-form\n          [form]=\"form\"\n          [fields]=\"$any(editorFields) ?? []\"\n          [model]=\"formData\"\n        ></formly-form>\n\n        @if (editorConfig?.saver) {\n          <!-- Submit button -->\n          <button\n            type=\"submit\"\n            mat-flat-button\n            style=\"color: white; transform: translateY(-0.3rem); float: right\"\n          >\n            @if (itemId !== undefined) {\n              Save Changes\n            } @else {\n              Create\n            }\n          </button>\n          <!---->\n        }\n      </form>\n    }\n  </mat-card-content>\n</mat-card>\n", styles: [":host{max-width:600px;display:block;margin:0 auto}mat-card{padding:2rem}mat-card-header h3{font-size:1.2rem;font-weight:400}mat-card-header .editor-item-label{margin-left:1rem}mat-card-header .editor-header-sub{color:#555;margin-left:.85rem;font-size:.9rem;font-style:italic}form{margin-top:2rem}form ::ng-deep .mat-mdc-form-field-subscript-wrapper{margin-bottom:14px!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }] });
+        ], usesOnChanges: true, ngImport: i0, template: "<mat-card>\n  <mat-card-header style=\"position: relative\">\n    <!-- Back button -->\n    @if (editorConfig?.backButton) {\n      @if ($any(editorConfig?.backButton).historyBack && windowHistory.length > 1) {\n        <button mat-button (click)=\"windowHistory.back()\" class=\"back-link\">\n          <mat-icon>arrow_back_ios_new</mat-icon>\n          {{ editorConfig?.backButton?.label ?? t('editor.backToList') }}\n        </button>\n      } @else if ($any(editorConfig?.backButton).routerLink; as backButtonLink) {\n        <a [routerLink]=\"backButtonLink\" mat-button class=\"back-link\">\n          <mat-icon>arrow_back_ios_new</mat-icon>\n          {{ editorConfig?.backButton?.label ?? t('editor.backToList') }}\n        </a>\n      } @else if ($any(editorConfig?.backButton).link; as backButtonLink) {\n        <a [href]=\"backButtonLink\" mat-button class=\"back-link\">\n          <mat-icon>arrow_back_ios_new</mat-icon>\n          {{ editorConfig?.backButton?.label ?? t('editor.backToList') }}\n        </a>\n      } @else if ($any(editorConfig?.backButton).click; as handler) {\n        <button mat-button (click)=\"handler()\" class=\"back-link\">\n          <mat-icon>arrow_back_ios_new</mat-icon>\n          {{ editorConfig?.backButton?.label ?? t('editor.backToList') }}\n        </button>\n      }\n    }\n    <!---->\n\n    <!-- Editor title -->\n    <h3 style=\"margin: 0\" [style.margin-top]=\"editorConfig?.backButton ? '1rem' : '0'\">\n      @if (itemId !== undefined && $any(data); as editItem) {\n        @if (editorConfig?.labelFieldKey && editItem[editorConfig!.labelFieldKey!]) {\n          <!-- e.g., \"Edit - Taro (taro) \" -->\n          {{ t('common.edit') }} &nbsp; <span style=\"color: #aaaaaa\">-</span>\n          <span class=\"editor-item-label\">{{ editItem[editorConfig!.labelFieldKey!] }}</span>\n          @if (editorConfig?.idFieldKey && editItem[editorConfig!.idFieldKey!]) {\n            <small class=\"editor-header-sub\">{{ editItem[editorConfig!.idFieldKey!] }}</small>\n          }\n          <!---->\n        } @else if (editItem.id) {\n          <!-- e.g., \"Edit - ID: 123\" -->\n          {{ t('common.edit') }} &nbsp; <span style=\"color: #aaaaaa\">-</span>\n          {{ t('editor.idLabel') }}:\n          <span class=\"editor-item-label\">{{ editItem.id }}</span>\n          <!---->\n        } @else {\n          <!-- e.g., \"Edit Account (123)\" -->\n          {{ t('editor.titleForEdit', { itemType: editorItemType }) }}\n          @if (editorConfig?.idFieldKey && editItem[editorConfig!.idFieldKey!]) {\n            <small class=\"editor-header-sub\">{{ editItem[editorConfig!.idFieldKey!] }}</small>\n          }\n          <!---->\n        }\n      } @else {\n        <!-- Create Account -->\n        {{ t('editor.titleForCreate', { itemType: editorItemType }) }}\n        <!---->\n      }\n    </h3>\n    <!---->\n  </mat-card-header>\n\n  <mat-card-content>\n    @if (isLoading || isSaving) {\n      <mat-progress-bar mode=\"indeterminate\" style=\"margin-top: 1rem\"></mat-progress-bar>\n    }\n\n    @if (!isLoading) {\n      <form [formGroup]=\"form\" (ngSubmit)=\"save()\">\n        <formly-form\n          [form]=\"form\"\n          [fields]=\"$any(editorFields) ?? []\"\n          [model]=\"formData\"\n        ></formly-form>\n\n        <!-- Button Area -->\n        <div\n          class=\"footer-buttons\"\n          style=\"\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-top: 0.5rem;\n            gap: 1rem;\n          \"\n        >\n          <!-- Delete button (visible only in edit mode and if itemDeleterConfig is provided) -->\n          @if (itemDeleterConfig?.deleter && itemId !== undefined) {\n            <button\n              type=\"button\"\n              class=\"delete-button\"\n              matButton=\"filled\"\n              color=\"warn\"\n              (click)=\"openDeletionDialog()\"\n              [disabled]=\"isLoading || isSaving\"\n            >\n              {{ t('common.delete') }}\n            </button>\n          } @else {\n            <span></span>\n          }\n          <!---->\n\n          <!-- Custom footer buttons -->\n          @if (editorConfig?.footerButtons) {\n            @for (buttonConfig of editorConfig?.footerButtons; track buttonConfig.label) {\n              @if (buttonConfig.show ? buttonConfig.show($any(formData), itemId) : true) {\n                <button\n                  type=\"button\"\n                  mat-stroked-button\n                  (click)=\"buttonConfig.click($any(formData), itemId)\"\n                  [disabled]=\"isLoading || isSaving\"\n                  [ngClass]=\"buttonConfig.className\"\n                >\n                  {{ buttonConfig.label }}\n                </button>\n              }\n            }\n          }\n          <!---->\n\n          <span style=\"flex: 1\"></span>\n\n          <!-- Submit button (visible only if saver is provided) -->\n          @if (editorConfig?.saver) {\n            <button\n              type=\"submit\"\n              class=\"save-button\"\n              matButton=\"filled\"\n              style=\"color: white; transform: translateY(-0.3rem)\"\n            >\n              @if (itemId !== undefined) {\n                {{ t('editor.saveForEdit') }}\n              } @else {\n                {{ t('editor.saveForCreate') }}\n              }\n            </button>\n          }\n          <!---->\n        </div>\n        <!---->\n      </form>\n    }\n  </mat-card-content>\n</mat-card>\n", styles: [":host{max-width:600px;display:block;margin:0 auto}mat-card{padding:2rem}mat-card-header h3{font-size:1.2rem;font-weight:400}mat-card-header .editor-item-label{margin-left:1rem}mat-card-header .editor-header-sub{color:#555;margin-left:.85rem;font-size:.9rem;font-style:italic}form{margin-top:2rem}form ::ng-deep .mat-mdc-form-field-subscript-wrapper{margin-bottom:14px!important}.back-link{display:flex;position:absolute;top:-1.5rem;left:-1rem;align-items:center;gap:.3rem;font-size:.8rem}.back-link mat-icon{height:.8rem;width:.8rem;font-size:.8rem}.footer-buttons .delete-button{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error)}.footer-buttons .save-button{--mat-button-filled-container-color: var(--mat-sys-primary);--mat-button-filled-label-text-color: var(--mat-sys-on-primary)}a,::ng-deep table a,::ng-deep table a:visited{color:var(--mat-sys-on-primary-container);text-decoration:none}a:hover,::ng-deep table a:hover,::ng-deep table a:visited:hover{text-decoration:underline}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NgxThinAdminEditor, decorators: [{
             type: Component,
@@ -916,10 +1647,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                         ReactiveFormsModule,
                         FormlyForm,
                         MatButton,
+                        MatIcon,
+                        RouterLink,
                         MatProgressBar,
                         MatCard,
                         MatCardHeader,
                         MatCardContent,
+                        CommonModule,
                     ], providers: [
                         provideFormlyCore(withFormlyMaterial()),
                         provideFormlyCore({
@@ -930,7 +1664,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                                 },
                             ],
                             extensions: [{ name: 'addons', extension: { onPopulate: formlyAddonsExtension } }],
+                            types: [
+                                {
+                                    name: 'file',
+                                    component: FormlyFieldFile,
+                                },
+                            ],
                         }),
+                        {
+                            provide: FORMLY_CONFIG,
+                            multi: true,
+                            useFactory: () => {
+                                const configs = inject(NGX_THIN_ADMIN_EXTRA_FORMLY_CONFIG, {
+                                    optional: true,
+                                    skipSelf: true,
+                                });
+                                if (!configs || configs.length === 0)
+                                    return {};
+                                return configs.reduce((acc, c) => ({
+                                    types: [...(acc.types ?? []), ...(c.types ?? [])],
+                                    wrappers: [...(acc.wrappers ?? []), ...(c.wrappers ?? [])],
+                                    validators: [...(acc.validators ?? []), ...(c.validators ?? [])],
+                                    extensions: [...(acc.extensions ?? []), ...(c.extensions ?? [])],
+                                }), {});
+                            },
+                        },
                         {
                             // Apply default appearance and other settings to all Material form fields in this component
                             provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
@@ -940,13 +1698,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                                 subscriptSizing: 'dynamic',
                             },
                         },
-                    ], template: "<mat-card>\n  <mat-card-header>\n    <h3>\n      @if (itemId !== undefined && $any(data); as editItem) {\n        @if (editorConfig?.labelFieldKey && editItem[editorConfig!.labelFieldKey!]) {\n          <!-- e.g., \"Edit - Taro (taro) \" -->\n          Edit &nbsp; <span style=\"color: #aaaaaa\">-</span>\n          <span class=\"editor-item-label\">{{ editItem[editorConfig!.labelFieldKey!] }}</span>\n          @if (editorConfig?.idFieldKey && editItem[editorConfig!.idFieldKey!]) {\n            <small class=\"editor-header-sub\">{{ editItem[editorConfig!.idFieldKey!] }}</small>\n          }\n          <!---->\n        } @else if (editItem.id) {\n          <!-- e.g., \"Edit - ID: 123\" -->\n          Edit &nbsp; <span style=\"color: #aaaaaa\">-</span>\n          ID:\n          <span class=\"editor-item-label\">{{ editItem.id }}</span>\n          <!---->\n        } @else {\n          <!-- e.g., \"Edit Account (123)\" -->\n          Edit\n          @if (editorConfig?.singularLabel) {\n            {{ editorConfig?.singularLabel }}\n          }\n          @if (editorConfig?.idFieldKey && editItem[editorConfig!.idFieldKey!]) {\n            <small class=\"editor-header-sub\">{{ editItem[editorConfig!.idFieldKey!] }}</small>\n          }\n          <!---->\n        }\n      } @else {\n        <!-- Create Account -->\n        Create\n        @if (editorConfig?.singularLabel) {\n          {{ editorConfig?.singularLabel }}\n        }\n        <!---->\n      }\n    </h3>\n  </mat-card-header>\n\n  <mat-card-content>\n    @if (isLoading) {\n      <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n    } @else {\n      <form [formGroup]=\"form\" (ngSubmit)=\"save()\">\n        <formly-form\n          [form]=\"form\"\n          [fields]=\"$any(editorFields) ?? []\"\n          [model]=\"formData\"\n        ></formly-form>\n\n        @if (editorConfig?.saver) {\n          <!-- Submit button -->\n          <button\n            type=\"submit\"\n            mat-flat-button\n            style=\"color: white; transform: translateY(-0.3rem); float: right\"\n          >\n            @if (itemId !== undefined) {\n              Save Changes\n            } @else {\n              Create\n            }\n          </button>\n          <!---->\n        }\n      </form>\n    }\n  </mat-card-content>\n</mat-card>\n", styles: [":host{max-width:600px;display:block;margin:0 auto}mat-card{padding:2rem}mat-card-header h3{font-size:1.2rem;font-weight:400}mat-card-header .editor-item-label{margin-left:1rem}mat-card-header .editor-header-sub{color:#555;margin-left:.85rem;font-size:.9rem;font-style:italic}form{margin-top:2rem}form ::ng-deep .mat-mdc-form-field-subscript-wrapper{margin-bottom:14px!important}\n"] }]
+                    ], template: "<mat-card>\n  <mat-card-header style=\"position: relative\">\n    <!-- Back button -->\n    @if (editorConfig?.backButton) {\n      @if ($any(editorConfig?.backButton).historyBack && windowHistory.length > 1) {\n        <button mat-button (click)=\"windowHistory.back()\" class=\"back-link\">\n          <mat-icon>arrow_back_ios_new</mat-icon>\n          {{ editorConfig?.backButton?.label ?? t('editor.backToList') }}\n        </button>\n      } @else if ($any(editorConfig?.backButton).routerLink; as backButtonLink) {\n        <a [routerLink]=\"backButtonLink\" mat-button class=\"back-link\">\n          <mat-icon>arrow_back_ios_new</mat-icon>\n          {{ editorConfig?.backButton?.label ?? t('editor.backToList') }}\n        </a>\n      } @else if ($any(editorConfig?.backButton).link; as backButtonLink) {\n        <a [href]=\"backButtonLink\" mat-button class=\"back-link\">\n          <mat-icon>arrow_back_ios_new</mat-icon>\n          {{ editorConfig?.backButton?.label ?? t('editor.backToList') }}\n        </a>\n      } @else if ($any(editorConfig?.backButton).click; as handler) {\n        <button mat-button (click)=\"handler()\" class=\"back-link\">\n          <mat-icon>arrow_back_ios_new</mat-icon>\n          {{ editorConfig?.backButton?.label ?? t('editor.backToList') }}\n        </button>\n      }\n    }\n    <!---->\n\n    <!-- Editor title -->\n    <h3 style=\"margin: 0\" [style.margin-top]=\"editorConfig?.backButton ? '1rem' : '0'\">\n      @if (itemId !== undefined && $any(data); as editItem) {\n        @if (editorConfig?.labelFieldKey && editItem[editorConfig!.labelFieldKey!]) {\n          <!-- e.g., \"Edit - Taro (taro) \" -->\n          {{ t('common.edit') }} &nbsp; <span style=\"color: #aaaaaa\">-</span>\n          <span class=\"editor-item-label\">{{ editItem[editorConfig!.labelFieldKey!] }}</span>\n          @if (editorConfig?.idFieldKey && editItem[editorConfig!.idFieldKey!]) {\n            <small class=\"editor-header-sub\">{{ editItem[editorConfig!.idFieldKey!] }}</small>\n          }\n          <!---->\n        } @else if (editItem.id) {\n          <!-- e.g., \"Edit - ID: 123\" -->\n          {{ t('common.edit') }} &nbsp; <span style=\"color: #aaaaaa\">-</span>\n          {{ t('editor.idLabel') }}:\n          <span class=\"editor-item-label\">{{ editItem.id }}</span>\n          <!---->\n        } @else {\n          <!-- e.g., \"Edit Account (123)\" -->\n          {{ t('editor.titleForEdit', { itemType: editorItemType }) }}\n          @if (editorConfig?.idFieldKey && editItem[editorConfig!.idFieldKey!]) {\n            <small class=\"editor-header-sub\">{{ editItem[editorConfig!.idFieldKey!] }}</small>\n          }\n          <!---->\n        }\n      } @else {\n        <!-- Create Account -->\n        {{ t('editor.titleForCreate', { itemType: editorItemType }) }}\n        <!---->\n      }\n    </h3>\n    <!---->\n  </mat-card-header>\n\n  <mat-card-content>\n    @if (isLoading || isSaving) {\n      <mat-progress-bar mode=\"indeterminate\" style=\"margin-top: 1rem\"></mat-progress-bar>\n    }\n\n    @if (!isLoading) {\n      <form [formGroup]=\"form\" (ngSubmit)=\"save()\">\n        <formly-form\n          [form]=\"form\"\n          [fields]=\"$any(editorFields) ?? []\"\n          [model]=\"formData\"\n        ></formly-form>\n\n        <!-- Button Area -->\n        <div\n          class=\"footer-buttons\"\n          style=\"\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-top: 0.5rem;\n            gap: 1rem;\n          \"\n        >\n          <!-- Delete button (visible only in edit mode and if itemDeleterConfig is provided) -->\n          @if (itemDeleterConfig?.deleter && itemId !== undefined) {\n            <button\n              type=\"button\"\n              class=\"delete-button\"\n              matButton=\"filled\"\n              color=\"warn\"\n              (click)=\"openDeletionDialog()\"\n              [disabled]=\"isLoading || isSaving\"\n            >\n              {{ t('common.delete') }}\n            </button>\n          } @else {\n            <span></span>\n          }\n          <!---->\n\n          <!-- Custom footer buttons -->\n          @if (editorConfig?.footerButtons) {\n            @for (buttonConfig of editorConfig?.footerButtons; track buttonConfig.label) {\n              @if (buttonConfig.show ? buttonConfig.show($any(formData), itemId) : true) {\n                <button\n                  type=\"button\"\n                  mat-stroked-button\n                  (click)=\"buttonConfig.click($any(formData), itemId)\"\n                  [disabled]=\"isLoading || isSaving\"\n                  [ngClass]=\"buttonConfig.className\"\n                >\n                  {{ buttonConfig.label }}\n                </button>\n              }\n            }\n          }\n          <!---->\n\n          <span style=\"flex: 1\"></span>\n\n          <!-- Submit button (visible only if saver is provided) -->\n          @if (editorConfig?.saver) {\n            <button\n              type=\"submit\"\n              class=\"save-button\"\n              matButton=\"filled\"\n              style=\"color: white; transform: translateY(-0.3rem)\"\n            >\n              @if (itemId !== undefined) {\n                {{ t('editor.saveForEdit') }}\n              } @else {\n                {{ t('editor.saveForCreate') }}\n              }\n            </button>\n          }\n          <!---->\n        </div>\n        <!---->\n      </form>\n    }\n  </mat-card-content>\n</mat-card>\n", styles: [":host{max-width:600px;display:block;margin:0 auto}mat-card{padding:2rem}mat-card-header h3{font-size:1.2rem;font-weight:400}mat-card-header .editor-item-label{margin-left:1rem}mat-card-header .editor-header-sub{color:#555;margin-left:.85rem;font-size:.9rem;font-style:italic}form{margin-top:2rem}form ::ng-deep .mat-mdc-form-field-subscript-wrapper{margin-bottom:14px!important}.back-link{display:flex;position:absolute;top:-1.5rem;left:-1rem;align-items:center;gap:.3rem;font-size:.8rem}.back-link mat-icon{height:.8rem;width:.8rem;font-size:.8rem}.footer-buttons .delete-button{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error)}.footer-buttons .save-button{--mat-button-filled-container-color: var(--mat-sys-primary);--mat-button-filled-label-text-color: var(--mat-sys-on-primary)}a,::ng-deep table a,::ng-deep table a:visited{color:var(--mat-sys-on-primary-container);text-decoration:none}a:hover,::ng-deep table a:hover,::ng-deep table a:visited:hover{text-decoration:underline}\n"] }]
         }], propDecorators: { editorConfig: [{
                 type: Input
             }], editorFields: [{
                 type: Input
             }], itemId: [{
                 type: Input
+            }], itemDeleterConfig: [{
+                type: Input
             }] } });
 
 /*
@@ -957,5 +1717,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NgxThinAdminEditor, NgxThinAdminList };
+export { NGX_THIN_ADMIN_EXTRA_FORMLY_CONFIG, NGX_THIN_ADMIN_TRANSLATE, NgxThinAdminEditor, NgxThinAdminList, provideNgxThinAdminFormlyConfig, provideNgxThinAdminI18n };
 //# sourceMappingURL=ngx-thin-admin.mjs.map