ngx-thin-admin 0.0.0-alpha.3 → 0.0.0-alpha.5

package/fesm2022/ngx-thin-admin.mjs

@@ -6,21 +6,24 @@ import * as i4 from '@angular/material/button';
 import { MatButtonModule, MatIconButton, MatButton } from '@angular/material/button';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatIcon } from '@angular/material/icon';
-import * as i2$1 from '@angular/material/input';
+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$2 from '@ng-matero/extensions/grid';
 import { MtxGridModule } from '@ng-matero/extensions/grid';
-import * as i1 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 { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose, MatDialog } from '@angular/material/dialog';
-import * as i2 from '@angular/material/form-field';
+import * as i1 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, 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, FieldType, FormlyAttributes, FormlyForm, provideFormlyCore } from '@ngx-formly/core';
 import { withFormlyMaterial } from '@ngx-formly/material';
@@ -33,6 +36,7 @@ const messagesEn = {
     'common.create': 'Create',
     'common.edit': 'Edit',
     'common.delete': 'Delete',
+    'common.back': 'Back',
     'list.defaultTitle': 'List',
     'list.clearFilters': 'Clear filters',
     'list.searchDefaultPlaceholder': 'Search...',
@@ -49,6 +53,7 @@ const messagesEn = {
     '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',
@@ -68,6 +73,12 @@ const messagesEn = {
     '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}',
@@ -80,6 +91,7 @@ const messagesJa = {
     'common.create': '作成',
     'common.edit': '編集',
     'common.delete': '削除',
+    'common.back': '戻る',
     'list.defaultTitle': '一覧',
     'list.clearFilters': 'フィルターをクリア',
     'list.searchDefaultPlaceholder': '検索...',
@@ -89,19 +101,20 @@ const messagesJa = {
     'list.exportAsCsv': 'CSV でエクスポート',
     'list.exportedFileName': 'exported',
     'list.exportItems': '{count} 件をエクスポート',
-    'editor.titleForCreate': '{itemType} の作成',
-    'editor.titleForEdit': '{itemType} の編集',
+    'editor.titleForCreate': '{itemType}の作成',
+    'editor.titleForEdit': '{itemType}の編集',
     'editor.idLabel': 'ID',
     'editor.saveChanges': '変更を保存',
     'editor.errorInvalidInput': '入力内容が不正です',
     'editor.errorNoSaver': '保存処理が設定されていません',
     'editor.successSaved': '保存しました',
+    'editor.backToList': '一覧へ',
     'category.defaultSingular': 'カテゴリ',
     'category.defaultPlural': 'カテゴリ',
     'category.all': 'すべて',
-    'category.editorDialogTitleForCreate': '{categoryType} の作成',
-    'category.editorDialogTitleForEdit': '{categoryType} の編集',
-    'category.deletionDialogTitle': '{categoryType} の削除',
+    'category.editorDialogTitleForCreate': '{categoryType}の作成',
+    'category.editorDialogTitleForEdit': '{categoryType}の編集',
+    'category.deletionDialogTitle': '{categoryType}の削除',
     'category.deletionDialogMessage': '{categoryType} "{label}" を削除しますか？この操作は元に戻せません。',
     'category.errorCouldNotCreate': '{categoryType} を作成できませんでした',
     'category.errorFailedUpdate': '{categoryType} "{label}" の更新に失敗しました',
@@ -111,10 +124,16 @@ const messagesJa = {
     'category.successUpdated': '{categoryType} "{label}" を更新しました',
     'category.successDeleted': '{categoryType} "{label}" を削除しました',
     'item.defaultSingular': '項目',
-    'item.deletionDialogTitle': '{itemType} の削除',
+    '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}',
@@ -170,7 +189,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    {{\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: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.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,
@@ -412,7 +431,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\">\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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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,
@@ -629,6 +648,56 @@ 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);
+    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,
+        });
+    }
+    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  {{ t('item.changeCategoryDialogTitle', { categoryType: data.categorySelectorConfig.singularLabel || t('category.defaultSingular') }) }}\n</h2>\n\n<mat-dialog-content>\n  @if (data.itemLabel) {\n    <p style=\"margin-top: 5px; margin-bottom: 1rem\">{{ t('item.changeCategoryDialogMessage', { label: data.itemLabel, categoryType: data.categorySelectorConfig.singularLabel || t('category.defaultSingular') }) }}</p>\n  }\n  \n  <mat-form-field appearance=\"outline\" style=\"width: 100%; margin-top: 10px;\">\n    <mat-label>{{ data.categorySelectorConfig.singularLabel || t('category.defaultSingular') }}</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 align=\"end\">\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"] }] });
+}
+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,
+                    ], template: "<h2 mat-dialog-title>\n  {{ t('item.changeCategoryDialogTitle', { categoryType: data.categorySelectorConfig.singularLabel || t('category.defaultSingular') }) }}\n</h2>\n\n<mat-dialog-content>\n  @if (data.itemLabel) {\n    <p style=\"margin-top: 5px; margin-bottom: 1rem\">{{ t('item.changeCategoryDialogMessage', { label: data.itemLabel, categoryType: data.categorySelectorConfig.singularLabel || t('category.defaultSingular') }) }}</p>\n  }\n  \n  <mat-form-field appearance=\"outline\" style=\"width: 100%; margin-top: 10px;\">\n    <mat-label>{{ data.categorySelectorConfig.singularLabel || t('category.defaultSingular') }}</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 align=\"end\">\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" }]
+        }] });
+
 function getErrorMessage(error) {
     if (typeof error === 'string') {
         return error;
@@ -720,13 +789,8 @@ class NgxThinAdminList {
     }
     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();
         }
         // List - trigger strictly when listFetcher is newly provided or explicitly changed
         if (changes.listConfig?.currentValue?.fetcher !== changes.listConfig?.previousValue?.fetcher) {
@@ -734,6 +798,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;
@@ -844,8 +950,55 @@ class NgxThinAdminList {
         // 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 {
+            await this.listConfig.categoryChanger(id, newCategoryId);
+        }
+        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,
+        });
+        this.fetchList();
+    }
     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", itemDeleterConfig: "itemDeleterConfig", 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]=\"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.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]=\"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 }}\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 }}\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 }}\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      {{ 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 .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: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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"] }] });
+    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" }, 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]=\"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.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]=\"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      {{ 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 .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,
@@ -865,7 +1018,7 @@ 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]=\"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.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]=\"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 }}\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 }}\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 }}\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      {{ 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 .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"] }]
+                    ], 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]=\"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.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]=\"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      {{ 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 .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: [{
@@ -1015,7 +1168,7 @@ class FormlyFieldFile extends FieldType {
         <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$1.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: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.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"] }] });
+  `, 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,
@@ -1091,6 +1244,10 @@ class NgxThinAdminEditor {
     form = new FormGroup({});
     data = {};
     formData = {};
+    /**
+     * For history back
+     */
+    windowHistory = window.history;
     /**
      * Services
      */
@@ -1248,7 +1405,9 @@ class NgxThinAdminEditor {
         }
         // 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 label = this.editorConfig?.labelFieldKey
+            ? this.data[this.editorConfig.labelFieldKey]
+            : id;
         const itemType = this.editorItemType;
         // Open the confirmation dialog
         const dialogRef = this.dialog.open(ConfirmDialog, {
@@ -1315,7 +1474,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          {{ 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  </mat-card-header>\n\n  <mat-card-content>\n    @if (isLoading || isSaving) {\n      <mat-progress-bar mode=\"indeterminate\"></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 style=\"display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem\">\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              mat-stroked-button\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          <!-- Submit button (visible only if saver is provided) -->\n          @if (editorConfig?.saver) {\n            <button\n              type=\"submit\"\n              mat-flat-button\n              style=\"color: white; transform: translateY(-0.3rem)\"\n            >\n              @if (itemId !== undefined) {\n                {{ t('editor.saveChanges') }}\n              } @else {\n                {{ t('common.create') }}\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}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.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          style=\"\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-top: 0.5rem;\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              mat-stroked-button\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          <!-- Submit button (visible only if saver is provided) -->\n          @if (editorConfig?.saver) {\n            <button\n              type=\"submit\"\n              mat-flat-button\n              style=\"color: white; transform: translateY(-0.3rem)\"\n            >\n              @if (itemId !== undefined) {\n                {{ t('editor.saveChanges') }}\n              } @else {\n                {{ t('common.create') }}\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}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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NgxThinAdminEditor, decorators: [{
             type: Component,
@@ -1323,6 +1482,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                         ReactiveFormsModule,
                         FormlyForm,
                         MatButton,
+                        MatIconButton,
+                        MatIcon,
+                        MatTooltip,
+                        RouterLink,
                         MatProgressBar,
                         MatCard,
                         MatCardHeader,
@@ -1353,7 +1516,7 @@ 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          {{ 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  </mat-card-header>\n\n  <mat-card-content>\n    @if (isLoading || isSaving) {\n      <mat-progress-bar mode=\"indeterminate\"></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 style=\"display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem\">\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              mat-stroked-button\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          <!-- Submit button (visible only if saver is provided) -->\n          @if (editorConfig?.saver) {\n            <button\n              type=\"submit\"\n              mat-flat-button\n              style=\"color: white; transform: translateY(-0.3rem)\"\n            >\n              @if (itemId !== undefined) {\n                {{ t('editor.saveChanges') }}\n              } @else {\n                {{ t('common.create') }}\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}\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          style=\"\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-top: 0.5rem;\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              mat-stroked-button\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          <!-- Submit button (visible only if saver is provided) -->\n          @if (editorConfig?.saver) {\n            <button\n              type=\"submit\"\n              mat-flat-button\n              style=\"color: white; transform: translateY(-0.3rem)\"\n            >\n              @if (itemId !== undefined) {\n                {{ t('editor.saveChanges') }}\n              } @else {\n                {{ t('common.create') }}\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}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: [{