ngx-thin-admin 0.0.0-alpha.0

package/fesm2022/ngx-thin-admin.mjs

@@ -0,0 +1,961 @@
+import * as i0 from '@angular/core';
+import { inject, Component, EventEmitter, ChangeDetectorRef, Output, Input, Injectable, ViewChild } from '@angular/core';
+import { lastValueFrom, Subject } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+import * as i4 from '@angular/material/button';
+import { MatButtonModule, MatIconButton, MatButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import * as i2 from '@angular/material/input';
+import { MatInputModule, MatInput, MatPrefix, MatSuffix } from '@angular/material/input';
+import { MatFormField } from '@angular/material/select';
+import { MatTooltip } from '@angular/material/tooltip';
+import * as i2$1 from '@ng-matero/extensions/grid';
+import { MtxGridModule } from '@ng-matero/extensions/grid';
+import * as i1$1 from '@angular/forms';
+import { FormsModule, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { MatSelectionList, MatListOption } from '@angular/material/list';
+import { MatMenu, MatMenuItem, MatMenuTrigger, MatMenuContent } from '@angular/material/menu';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose, MatDialog } from '@angular/material/dialog';
+import * as i1 from '@angular/material/form-field';
+import { MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
+import { stringify } from 'csv-stringify/browser/esm/sync';
+import { RouterLink } from '@angular/router';
+import { MatCard, MatCardHeader, MatCardContent } from '@angular/material/card';
+import { FieldWrapper, FormlyForm, provideFormlyCore } from '@ngx-formly/core';
+import { withFormlyMaterial } from '@ngx-formly/material';
+import { MatProgressBar } from '@angular/material/progress-bar';
+
+class CategoryEditorDialog {
+    dialogRef = inject((MatDialogRef));
+    data = inject(MAT_DIALOG_DATA);
+    categoryLabel;
+    save() {
+        if (!this.categoryLabel) {
+            return;
+        }
+        this.dialogRef.close({
+            label: this.categoryLabel,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CategoryEditorDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: CategoryEditorDialog, isStandalone: true, selector: "lib-category-editor-dialog", ngImport: i0, template: "<h2 mat-dialog-title>\n  @if (data.editCategory) {\n    Edit {{ data.config.singularLabel ?? 'Category' }}: \"{{ data.editCategory.label }}\"\n  } @else {\n    Create {{ data.config.singularLabel ?? 'Category' }}\n  }\n</h2>\n<form (ngSubmit)=\"save()\">\n  <mat-dialog-content>\n    <mat-form-field>\n      <mat-label>{{ data.config.exampleLabel ?? data.config.singularLabel ?? '' }}</mat-label>\n      <input\n        matInput\n        [(ngModel)]=\"categoryLabel\"\n        name=\"categoryLabel\"\n        cdkFocusInitial\n        [value]=\"data.editCategory ? data.editCategory.label : ''\"\n      />\n    </mat-form-field>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button type=\"button\" class=\"cancel-btn\" matButton [mat-dialog-close]=\"undefined\">\n      {{ data.cancelButtonText ?? 'Cancel' }}\n    </button>\n    <button type=\"submit\" matButton>{{ data.positiveButtonText ?? 'Save' }}</button>\n  </mat-dialog-actions>\n</form>\n", styles: [".cancel-btn{--mat-button-text-label-text-color: #333}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CategoryEditorDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-category-editor-dialog', imports: [
+                        MatFormFieldModule,
+                        MatInputModule,
+                        FormsModule,
+                        MatButtonModule,
+                        MatDialogTitle,
+                        MatDialogContent,
+                        MatDialogActions,
+                        MatDialogClose,
+                    ], template: "<h2 mat-dialog-title>\n  @if (data.editCategory) {\n    Edit {{ data.config.singularLabel ?? 'Category' }}: \"{{ data.editCategory.label }}\"\n  } @else {\n    Create {{ data.config.singularLabel ?? 'Category' }}\n  }\n</h2>\n<form (ngSubmit)=\"save()\">\n  <mat-dialog-content>\n    <mat-form-field>\n      <mat-label>{{ data.config.exampleLabel ?? data.config.singularLabel ?? '' }}</mat-label>\n      <input\n        matInput\n        [(ngModel)]=\"categoryLabel\"\n        name=\"categoryLabel\"\n        cdkFocusInitial\n        [value]=\"data.editCategory ? data.editCategory.label : ''\"\n      />\n    </mat-form-field>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button type=\"button\" class=\"cancel-btn\" matButton [mat-dialog-close]=\"undefined\">\n      {{ data.cancelButtonText ?? 'Cancel' }}\n    </button>\n    <button type=\"submit\" matButton>{{ data.positiveButtonText ?? 'Save' }}</button>\n  </mat-dialog-actions>\n</form>\n", styles: [".cancel-btn{--mat-button-text-label-text-color: #333}\n"] }]
+        }] });
+
+class ConfirmDialog {
+    dialogRef = inject((MatDialogRef));
+    data = inject(MAT_DIALOG_DATA);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ConfirmDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: ConfirmDialog, isStandalone: true, selector: "lib-confirm-dialog", ngImport: i0, template: "<h2 mat-dialog-title>{{ data.title }}</h2>\n<mat-dialog-content>\n  {{ data.message }}\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button class=\"cancel-btn\" matButton [mat-dialog-close]=\"undefined\">\n    {{ data.cancelButtonText || 'Cancel' }}\n  </button>\n  <button matButton [mat-dialog-close]=\"true\" cdkFocusInitial>\n    {{ data.positiveButtonText || 'OK' }}\n  </button>\n</mat-dialog-actions>\n", styles: [".cancel-btn{--mat-button-text-label-text-color: #333}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ConfirmDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-confirm-dialog', imports: [
+                        FormsModule,
+                        MatButtonModule,
+                        MatDialogTitle,
+                        MatDialogContent,
+                        MatDialogActions,
+                        MatDialogClose,
+                    ], template: "<h2 mat-dialog-title>{{ data.title }}</h2>\n<mat-dialog-content>\n  {{ data.message }}\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button class=\"cancel-btn\" matButton [mat-dialog-close]=\"undefined\">\n    {{ data.cancelButtonText || 'Cancel' }}\n  </button>\n  <button matButton [mat-dialog-close]=\"true\" cdkFocusInitial>\n    {{ data.positiveButtonText || 'OK' }}\n  </button>\n</mat-dialog-actions>\n", styles: [".cancel-btn{--mat-button-text-label-text-color: #333}\n"] }]
+        }] });
+
+class ListCategorySelector {
+    /**
+     * Config for the category selector
+     */
+    config;
+    /**
+     * Selected category. This will be updated when the user selects a category from the list.
+     */
+    selectedCategory;
+    /**
+     * Event emitted when the selected category changes.
+     */
+    selectedCategoryChange = new EventEmitter();
+    /**
+     * Categories to be displayed in the category selector.
+     */
+    categories = [];
+    /**
+     * Services
+     */
+    snackbar = inject(MatSnackBar);
+    dialog = inject(MatDialog);
+    cdr = inject(ChangeDetectorRef);
+    ngOnChanges(changes) {
+        if (changes.config &&
+            changes.config.currentValue?.fetcher !== changes.config.previousValue?.fetcher) {
+            this.fetchCategories();
+        }
+    }
+    async fetchCategories() {
+        if (!this.config?.fetcher) {
+            return;
+        }
+        else if (!(this.config.fetcher instanceof Function)) {
+            throw new Error('categoryFetcher must be a function');
+        }
+        console.log('Fetching categories');
+        try {
+            const result = await Promise.resolve(this.config.fetcher());
+            console.log(result);
+            this.categories = result.categories;
+            this.cdr.markForCheck();
+            console.log('Fetched categories:', this.categories);
+        }
+        catch (e) {
+            console.error('Error fetching categories:', e);
+        }
+    }
+    async createCategory(categoryLabel) {
+        if (!this.config?.creator) {
+            return;
+        }
+        // Call the category creator function
+        try {
+            await this.config.creator(categoryLabel);
+        }
+        catch (e) {
+            this.snackbar.open(`Error: ${e?.message ?? 'Could not create category'}`, undefined, {
+                duration: 3000,
+            });
+        }
+        // Refresh category list
+        this.fetchCategories();
+    }
+    async updateCategory(category) {
+        if (!this.config?.updater) {
+            return;
+        }
+        // Call the category updater function
+        try {
+            await this.config.updater(category);
+        }
+        catch (e) {
+            this.snackbar.open(`Error: ${e?.message ?? `Failed to update category "${category.label}"`}`, undefined, {
+                duration: 3000,
+            });
+        }
+        // Refresh category list
+        this.fetchCategories();
+    }
+    async deleteCategory(category) {
+        if (!this.config?.deleter) {
+            return;
+        }
+        // Call the category deleter function
+        try {
+            await this.config.deleter(category);
+        }
+        catch (e) {
+            this.snackbar.open(`Error: ${e?.message ?? `Failed to delete category: "${category.label}"`}`, undefined, {
+                duration: 3000,
+            });
+        }
+        // Refresh category list
+        this.fetchCategories();
+    }
+    async openCategoryEditorDialog(editCategory) {
+        // Open a dialog for category creation / editing
+        const dialogRef = this.dialog.open(CategoryEditorDialog, {
+            width: '400px',
+            data: {
+                config: this.config,
+                editCategory: editCategory,
+                positiveButtonText: editCategory ? 'Save' : 'Create',
+                cancelButtonText: 'Cancel',
+            },
+        });
+        const result = await lastValueFrom(dialogRef.afterClosed());
+        if (!result || !result.label) {
+            return;
+        }
+        // Call the category creator / updater function
+        try {
+            if (editCategory) {
+                await this.updateCategory({ ...editCategory, label: result.label });
+            }
+            else {
+                await this.createCategory(result.label);
+            }
+        }
+        catch (e) {
+            this.snackbar.open(`Error: ${e?.message ?? 'Could not save category'}`, undefined, {
+                duration: 3000,
+            });
+        }
+        // Refresh category list
+        this.fetchCategories();
+    }
+    async openCategoryDeletionDialog(category) {
+        // Open a dialog for category deletion
+        const dialogRef = this.dialog.open(ConfirmDialog, {
+            width: '400px',
+            data: {
+                title: 'Confirm Deletion',
+                message: `Are you sure you want to delete the ${this.config?.singularLabel ?? 'category'} "${category.label}"? This action cannot be undone.`,
+                positiveButtonText: 'Delete',
+                cancelButtonText: 'Cancel',
+            },
+        });
+        const result = await lastValueFrom(dialogRef.afterClosed());
+        if (!result) {
+            return;
+        }
+        // Call the category deleter function
+        try {
+            await this.deleteCategory(category);
+        }
+        catch (e) {
+            this.snackbar.open(`Error: ${e?.message ?? `Failed to delete category "${category.label}"`}`, undefined, {
+                duration: 3000,
+            });
+        }
+        // Refresh category list
+        this.fetchCategories();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ListCategorySelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ListCategorySelector, isStandalone: true, selector: "lib-list-category-selector", inputs: { config: "config", selectedCategory: "selectedCategory" }, outputs: { selectedCategoryChange: "selectedCategoryChange" }, usesOnChanges: true, ngImport: i0, template: "<header>\n  <!-- Category selector title -->\n  <span class=\"category-selector-title\"> {{ config?.title ?? 'Categories' }} </span>\n  <!---->\n\n  <!-- Category Creation button -->\n  @if (config?.creator) {\n    <button\n      mat-icon-button\n      (click)=\"openCategoryEditorDialog(undefined)\"\n      class=\"create-category-button\"\n    >\n      <mat-icon>add</mat-icon>\n    </button>\n  }\n  <!---->\n</header>\n\n<mat-selection-list\n  #categorySelector\n  [multiple]=\"false\"\n  [hideSingleSelectionIndicator]=\"true\"\n  [(ngModel)]=\"selectedCategory\"\n  (selectionChange)=\"this.selectedCategoryChange.emit(selectedCategory)\"\n>\n  <!-- \"All\" Category -->\n  <mat-list-option\n    [value]=\"undefined\"\n    [class.active]=\"selectedCategory && selectedCategory[0] === undefined\"\n  >\n    <div matListItemTitle>\n      <!-- Category label -->\n      All&nbsp;\n      <!---->\n    </div>\n  </mat-list-option>\n  <!---->\n\n  <!-- Each category -->\n  @for (category of categories; track category.id) {\n    <mat-list-option\n      [value]=\"category\"\n      [class.active]=\"selectedCategory && selectedCategory[0]?.id === category.id\"\n    >\n      <div matListItemTitle>\n        <!-- Category label -->\n        {{ category.label }}&nbsp;\n        <!---->\n\n        <!-- Count of items in the category -->\n        @if (category.itemCount !== undefined) {\n          <small> ({{ category.itemCount }}) </small>\n        }\n        <!---->\n      </div>\n\n      <!-- Category menu button -->\n      @if (\n        selectedCategory &&\n        selectedCategory[0] !== undefined &&\n        selectedCategory[0].id === category.id &&\n        (config?.updater || config?.deleter)\n      ) {\n        <button\n          matIconButton\n          [matMenuTriggerFor]=\"menu\"\n          [matMenuTriggerData]=\"{ category: category }\"\n          class=\"category-menu-button\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </button>\n      }\n      <!---->\n    </mat-list-option>\n  }\n  <!---->\n</mat-selection-list>\n\n<!-- Category Menu -->\n<mat-menu #menu=\"matMenu\">\n  <ng-template matMenuContent let-category=\"category\">\n    @if (config?.updater) {\n      <button mat-menu-item (click)=\"openCategoryEditorDialog(category)\">Edit</button>\n    }\n    @if (config?.deleter) {\n      <button mat-menu-item (click)=\"openCategoryDeletionDialog(category)\">Delete</button>\n    }\n  </ng-template>\n</mat-menu>\n<!---->\n", styles: [":host{display:block;border-radius:9px;border:1px solid rgba(198,198,201,.1254901961)}header{display:flex;align-items:center;border-bottom:1px solid #f5f6f8;justify-content:space-between;padding:0 .2rem 0 .1rem}header .category-selector-title{font-size:.9rem;padding:1rem .8rem}header button{transform:translateY(-1px)}header button mat-icon{color:#496487}mat-selection-list mat-list-option div[matListItemTitle]{font-size:.85rem;position:relative}mat-selection-list mat-list-option.active{background-color:#f0f0f0}mat-selection-list mat-list-option.active div[matListItemTitle]{color:#3d649c}mat-selection-list mat-list-option:hover{cursor:pointer;background-color:#f0f0f0}mat-selection-list mat-list-option .category-menu-button{position:absolute;right:0;top:0;height:100%;padding-top:.8rem;vertical-align:middle;z-index:1}mat-selection-list mat-list-option{--mat-icon-button-container-shape: 1px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: MatMenuContent, selector: "ng-template[matMenuContent]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ListCategorySelector, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-list-category-selector', imports: [
+                        FormsModule,
+                        MatIcon,
+                        MatIconButton,
+                        MatSelectionList,
+                        MatMenu,
+                        MatMenuItem,
+                        MatMenuTrigger,
+                        MatListOption,
+                        MatMenuContent,
+                    ], template: "<header>\n  <!-- Category selector title -->\n  <span class=\"category-selector-title\"> {{ config?.title ?? 'Categories' }} </span>\n  <!---->\n\n  <!-- Category Creation button -->\n  @if (config?.creator) {\n    <button\n      mat-icon-button\n      (click)=\"openCategoryEditorDialog(undefined)\"\n      class=\"create-category-button\"\n    >\n      <mat-icon>add</mat-icon>\n    </button>\n  }\n  <!---->\n</header>\n\n<mat-selection-list\n  #categorySelector\n  [multiple]=\"false\"\n  [hideSingleSelectionIndicator]=\"true\"\n  [(ngModel)]=\"selectedCategory\"\n  (selectionChange)=\"this.selectedCategoryChange.emit(selectedCategory)\"\n>\n  <!-- \"All\" Category -->\n  <mat-list-option\n    [value]=\"undefined\"\n    [class.active]=\"selectedCategory && selectedCategory[0] === undefined\"\n  >\n    <div matListItemTitle>\n      <!-- Category label -->\n      All&nbsp;\n      <!---->\n    </div>\n  </mat-list-option>\n  <!---->\n\n  <!-- Each category -->\n  @for (category of categories; track category.id) {\n    <mat-list-option\n      [value]=\"category\"\n      [class.active]=\"selectedCategory && selectedCategory[0]?.id === category.id\"\n    >\n      <div matListItemTitle>\n        <!-- Category label -->\n        {{ category.label }}&nbsp;\n        <!---->\n\n        <!-- Count of items in the category -->\n        @if (category.itemCount !== undefined) {\n          <small> ({{ category.itemCount }}) </small>\n        }\n        <!---->\n      </div>\n\n      <!-- Category menu button -->\n      @if (\n        selectedCategory &&\n        selectedCategory[0] !== undefined &&\n        selectedCategory[0].id === category.id &&\n        (config?.updater || config?.deleter)\n      ) {\n        <button\n          matIconButton\n          [matMenuTriggerFor]=\"menu\"\n          [matMenuTriggerData]=\"{ category: category }\"\n          class=\"category-menu-button\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </button>\n      }\n      <!---->\n    </mat-list-option>\n  }\n  <!---->\n</mat-selection-list>\n\n<!-- Category Menu -->\n<mat-menu #menu=\"matMenu\">\n  <ng-template matMenuContent let-category=\"category\">\n    @if (config?.updater) {\n      <button mat-menu-item (click)=\"openCategoryEditorDialog(category)\">Edit</button>\n    }\n    @if (config?.deleter) {\n      <button mat-menu-item (click)=\"openCategoryDeletionDialog(category)\">Delete</button>\n    }\n  </ng-template>\n</mat-menu>\n<!---->\n", styles: [":host{display:block;border-radius:9px;border:1px solid rgba(198,198,201,.1254901961)}header{display:flex;align-items:center;border-bottom:1px solid #f5f6f8;justify-content:space-between;padding:0 .2rem 0 .1rem}header .category-selector-title{font-size:.9rem;padding:1rem .8rem}header button{transform:translateY(-1px)}header button mat-icon{color:#496487}mat-selection-list mat-list-option div[matListItemTitle]{font-size:.85rem;position:relative}mat-selection-list mat-list-option.active{background-color:#f0f0f0}mat-selection-list mat-list-option.active div[matListItemTitle]{color:#3d649c}mat-selection-list mat-list-option:hover{cursor:pointer;background-color:#f0f0f0}mat-selection-list mat-list-option .category-menu-button{position:absolute;right:0;top:0;height:100%;padding-top:.8rem;vertical-align:middle;z-index:1}mat-selection-list mat-list-option{--mat-icon-button-container-shape: 1px}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }], selectedCategory: [{
+                type: Input
+            }], selectedCategoryChange: [{
+                type: Output
+            }] } });
+
+class CsvExportService {
+    snackbar = inject(MatSnackBar);
+    encoders = [
+        {
+            key: 'utf8',
+            label: 'UTF-8',
+            mimeCharset: 'UTF-8',
+            encoder: undefined,
+        },
+    ];
+    constructor() {
+        this.loadOptionalEncoders();
+    }
+    async loadOptionalEncoders() {
+        // Optional charset support for Shift_JIS (commonly used in Japan)
+        try {
+            // @ts-ignore
+            const Encoding = (await import('encoding-japanese'));
+            this.encoders.push({
+                key: 'sjis',
+                label: 'Shift_JIS',
+                mimeCharset: 'Shift_JIS',
+                encoder: (input) => {
+                    const sjisArrayBuffer = Encoding.convert(input, {
+                        from: 'UNICODE',
+                        to: 'SJIS',
+                        type: 'arraybuffer',
+                    });
+                    return new Uint8Array(sjisArrayBuffer).buffer;
+                },
+            });
+        }
+        catch (error) {
+            console.error('Shift_JIS encoder is not available. If you need it, please install "encoding-japanese" package.', error);
+            // Do nothing
+        }
+    }
+    getAvailableEncoders() {
+        return this.encoders.map((encoder) => ({
+            key: encoder.key,
+            label: encoder.label,
+        }));
+    }
+    async exportListAsCsv(encoderKey, fileNamePrefix, fetcher, listQuery, columns) {
+        const CSV_EXPORT_MAX_PAGE_INDEX = 1000;
+        const CSV_EXPORT_PAGE_SIZE = 25;
+        console.log('Starting CSV export', listQuery, encoderKey);
+        // Get encoder
+        const encoderInfo = this.encoders.find((e) => e.key === encoderKey);
+        if (!encoderInfo) {
+            console.error(`exportListAsCsv - Encoder not found for key: ${encoderKey}`);
+            return;
+        }
+        const mimeCharset = encoderInfo.mimeCharset;
+        const encoder = encoderInfo.encoder;
+        // Initialize
+        const items = [];
+        let errorMessage = undefined;
+        // Show processing message
+        const mes = this.snackbar.open('Exporting CSV...');
+        // Replace characters in the file name prefix that cannot be used in file names
+        fileNamePrefix = fileNamePrefix.replace(/[/¥\\*?:"<>|@\s;^.]/g, '_');
+        // Truncate the file name prefix if it is too long
+        const FILE_NAME_PREFIX_MAX_LENGTH = 100;
+        if (fileNamePrefix.length > FILE_NAME_PREFIX_MAX_LENGTH) {
+            fileNamePrefix = fileNamePrefix.substring(0, FILE_NAME_PREFIX_MAX_LENGTH);
+        }
+        // Generate file name
+        const now = new Date();
+        const year = now.getFullYear();
+        const month = String(now.getMonth() + 1).padStart(2, '0');
+        const date = String(now.getDate()).padStart(2, '0');
+        const hours = String(now.getHours()).padStart(2, '0');
+        const minutes = String(now.getMinutes()).padStart(2, '0');
+        const seconds = String(now.getSeconds()).padStart(2, '0');
+        const datetimeString = `${year}${month}${date}_${hours}${minutes}${seconds}`;
+        const csvFileName = `${fileNamePrefix}_${datetimeString}.csv`;
+        // Fetch items page by page
+        let numOfExportedItems = 0;
+        for (let pageIndex = 0; pageIndex < CSV_EXPORT_MAX_PAGE_INDEX; pageIndex++) {
+            const query = {
+                ...listQuery,
+                page: pageIndex,
+                perPage: CSV_EXPORT_PAGE_SIZE,
+            };
+            let result;
+            try {
+                result = await fetcher(query);
+            }
+            catch (error) {
+                console.error(`exportListAsCsv - Error fetching data:`, error);
+                errorMessage = error.message || 'Unknown error';
+                break;
+            }
+            // Wait for few seconds
+            await new Promise((resolve) => setTimeout(resolve, 100));
+            if (result.items.length === 0) {
+                // No items, exit
+                break;
+            }
+            // Add fetched items
+            items.push(...result.items);
+            numOfExportedItems += result.items.length;
+        }
+        // Determine CSV columns
+        const csvColumns = columns
+            .filter((column) => {
+            if (column.type === 'button') {
+                // Exclude columns that are buttons
+                return false;
+            }
+            return true;
+        })
+            .map((column) => {
+            // Get the column key (e.g., "name")
+            const columnKey = column.field;
+            // Get the column header string (e.g., "User Name")
+            let columnHeader;
+            if (typeof column.header === 'string') {
+                columnHeader = column.header;
+            }
+            else {
+                columnHeader = columnKey;
+            }
+            // Return column information for csv-stringify
+            return {
+                key: column.field,
+                header: columnHeader,
+            };
+        })
+            .filter((column) => column !== null);
+        // Convert to CSV
+        const csv = stringify(items, {
+            header: true,
+            columns: csvColumns,
+        });
+        // Generate Blob
+        let blob = undefined;
+        if (encoder) {
+            const encodedData = encoder(csv);
+            if (encodedData) {
+                blob = new Blob([encodedData], { type: `text/csv; charset=${mimeCharset}` });
+            }
+            else {
+                console.error(`exportListAsCsv - Encoding failed for encoder: ${encoderKey}`);
+            }
+        }
+        else {
+            blob = new Blob([csv], { type: `text/csv; charset=${mimeCharset}` });
+        }
+        if (!blob) {
+            console.error(`exportListAsCsv - Blob is not created`);
+            mes.dismiss();
+            this.snackbar.open(`Failed to generate CSV file.`, undefined, {
+                duration: 5000,
+            });
+            return;
+        }
+        // Download as CSV
+        const objectUrl = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.download = csvFileName;
+        a.href = objectUrl;
+        a.click();
+        // Revoke object URL after download
+        URL.revokeObjectURL(objectUrl);
+        // Dissmiss processing message
+        mes.dismiss();
+        // Show result message
+        if (errorMessage) {
+            this.snackbar.open(`CSV exported up to ${numOfExportedItems} items. but errors occurred: ${errorMessage}`, undefined, {
+                duration: 5000,
+            });
+        }
+        else {
+            this.snackbar.open(`CSV export completed. Exported ${numOfExportedItems} items.`, undefined, {
+                duration: 3000,
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CsvExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CsvExportService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CsvExportService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class NgxThinAdminList {
+    /**
+     * Config for list
+     */
+    listConfig;
+    /**
+     * Config for category selector. If provided, a category selector will be displayed in the UI.
+     */
+    categorySelectorConfig;
+    /**
+     * Column schema (extended type of MtxGridColumn)
+     * @see https://ng-matero.github.io/extensions/components/grid/api
+     */
+    listColumns;
+    /**
+     * Query (Optional)
+     */
+    query = {
+        keyword: '',
+        page: 0,
+        perPage: 10,
+        categoryId: undefined,
+    };
+    /**
+     * Fetcher function to retrieve list data.
+     * This should be provided as part of listConfig.
+     */
+    listFetcher;
+    /**
+     * Internal state for grid
+     */
+    isLoading = false;
+    gridColumns = [];
+    gridData = [];
+    totalCount = 0;
+    /**
+     * Internal state for category list
+     */
+    categories = [];
+    selectedCategory = [];
+    /**
+     * Internal subject to trigger keyword change with debounce
+     */
+    keywordChanged$ = new Subject();
+    ngOnInit() {
+        this.keywordChanged$.pipe(debounceTime(500)).subscribe(() => {
+            this.fetchList();
+        });
+    }
+    /**
+     * Template for cells
+     */
+    cellTplWithLink;
+    /**
+     * Services
+     */
+    cdr = inject(ChangeDetectorRef);
+    csvExportService = inject(CsvExportService);
+    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;
+            });
+        }
+        // List - trigger strictly when listFetcher is newly provided or explicitly changed
+        if (changes.listConfig?.currentValue?.fetcher !== changes.listConfig?.previousValue?.fetcher) {
+            this.listFetcher = changes.listConfig?.currentValue?.fetcher;
+            this.fetchList();
+        }
+    }
+    async fetchList() {
+        if (!this.listFetcher) {
+            return;
+        }
+        else if (!(this.listFetcher instanceof Function)) {
+            throw new Error('listFetcher must be a function');
+        }
+        console.log('Fetching data with query:', this.query);
+        this.isLoading = true;
+        try {
+            const result = await Promise.resolve(this.listFetcher(this.query));
+            this.gridData = result.items;
+            this.totalCount = result.totalCount;
+        }
+        catch (e) {
+            console.error('Error fetching list data:', e);
+        }
+        finally {
+            this.isLoading = false;
+            this.cdr.markForCheck();
+        }
+    }
+    clearFilters() {
+        this.query.keyword = '';
+        this.query.categoryId = undefined;
+        this.selectedCategory = [];
+        this.fetchList();
+    }
+    onKeywordInput() {
+        this.keywordChanged$.next();
+    }
+    async exportAsCsv(encoderKey) {
+        if (!this.listFetcher) {
+            return;
+        }
+        // Determine file name prefix
+        let fileNamePrefix = this.listConfig?.title ? this.listConfig.title : 'exported';
+        if (this.selectedCategory && this.selectedCategory[0]?.id) {
+            // If a category is selected, include the category label in the file name prefix
+            fileNamePrefix += `_${this.selectedCategory[0]?.label}`;
+        }
+        if (this.query.keyword && this.query.keyword.length > 0) {
+            // If a search keyword is entered, include it in the file name prefix
+            fileNamePrefix += `_${this.query.keyword}`;
+        }
+        // Execute export
+        await this.csvExportService.exportListAsCsv(encoderKey, fileNamePrefix, this.listFetcher, {
+            categoryId: this.selectedCategory ? this.selectedCategory[0]?.id : undefined,
+            keyword: this.query.keyword,
+        }, this.listColumns);
+    }
+    onPageChange(event) {
+        this.query.page = event.pageIndex;
+        this.query.perPage = event.pageSize;
+        this.fetchList();
+    }
+    onSelectedCategoryChange($event) {
+        console.log('Selected category changed:', $event);
+        const categoryId = $event && $event.length >= 1 && $event[0] ? $event[0].id : undefined;
+        this.query.categoryId = categoryId;
+        this.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", listColumns: "listColumns", query: "query" }, viewQueries: [{ propertyName: "cellTplWithLink", first: true, predicate: ["cellTplWithLink"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Category Selector -->\n@if (categorySelectorConfig) {\n  <lib-list-category-selector\n    [config]=\"categorySelectorConfig\"\n    [(selectedCategory)]=\"selectedCategory\"\n    (selectedCategoryChange)=\"onSelectedCategoryChange($event)\"\n  ></lib-list-category-selector>\n}\n<!---->\n\n<!-- Toolbar Template -->\n<ng-template #toolbarTpl>\n  <div class=\"custom-toolbar\">\n    <!-- List Title -->\n    <span class=\"list-title\">\n      @if (listConfig?.title; as listTitle) {\n        @if (query.keyword || query.categoryId) {\n          <!-- Title (with link for reset filter) -->\n          <a\n            href=\"javascript:void(0)\"\n            (click)=\"query.keyword = ''; query.categoryId = undefined; this.fetchList()\"\n            matTooltip=\"Reset filters\"\n            >{{ listTitle }}</a\n          >\n          <!---->\n        } @else {\n          <!-- Title -->\n          {{ listTitle }}\n          <!---->\n        }\n      } @else {\n        <!-- Default Title -->\n        List\n        <!---->\n      }\n\n      @if (query.categoryId && selectedCategory?.[0]; as categoryLabel) {\n        <span class=\"material-icons list-title-separator\"> keyboard_arrow_right </span>\n        <!-- Category -->\n        {{ categoryLabel.label }}\n        <!---->\n      }\n\n      @if (query.keyword) {\n        <span class=\"material-icons list-title-separator\"> keyboard_arrow_right </span>\n        <!-- Keyword -->\n        \"{{ query.keyword }}\"\n        <!---->\n      }\n    </span>\n    <!---->\n\n    @if (query.keyword || query.categoryId) {\n      <span style=\"width: 8px\"></span>\n      <!-- Clear Filters Button -->\n      <button\n        mat-icon-button\n        class=\"clear-filters-button\"\n        matTooltip=\"Clear filters\"\n        (click)=\"clearFilters()\"\n      >\n        <mat-icon>filter_alt_off</mat-icon>\n      </button>\n      <!---->\n    }\n\n    <span style=\"flex: 1\"></span>\n\n    <!-- Create Button -->\n    @if (listConfig?.createButton; as createBtn) {\n      @if ($any(createBtn).routerLink; as routerLinkUrl) {\n        <!-- Create Button with Router Link -->\n        <a\n          [routerLink]=\"routerLinkUrl\"\n          mat-flat-button\n          class=\"primary-button\"\n          style=\"color: white; transform: translateY(-1px)\"\n        >\n          {{ createBtn.label }}\n          <mat-icon style=\"margin-bottom: 1px\">add</mat-icon>\n        </a>\n      } @else if ($any(createBtn).link; as linkUrl) {\n        <!-- Create Button with Link -->\n        <a\n          [href]=\"linkUrl\"\n          mat-flat-button\n          class=\"primary-button\"\n          style=\"color: white; transform: translateY(-1px)\"\n        >\n          {{ createBtn.label }}\n          <mat-icon style=\"margin-bottom: 1px\">add</mat-icon>\n        </a>\n      } @else if ($any(createBtn).click; as handler) {\n        <!-- Create Button with Handler -->\n        <button\n          mat-flat-button\n          class=\"primary-button\"\n          style=\"color: white; transform: translateY(-1px)\"\n          (click)=\"handler()\"\n        >\n          {{ createBtn?.label }}\n          <mat-icon style=\"margin-bottom: 1px\">add</mat-icon>\n        </button>\n      }\n    }\n    <!---->\n\n    <span style=\"width: 30px\"></span>\n\n    <!-- Search Field -->\n    <mat-form-field class=\"search-keyword xs-input\" appearance=\"outline\">\n      <mat-icon matPrefix>search</mat-icon>\n      <input\n        matInput\n        [placeholder]=\"\n          selectedCategory?.[0]?.label\n            ? 'Search in ' + selectedCategory?.[0]?.label + '...'\n            : 'Search...'\n        \"\n        [(ngModel)]=\"query.keyword\"\n        (keyup)=\"onKeywordInput()\"\n        style=\"padding-top: 3px\"\n      />\n\n      <!-- Search clear button -->\n      <button\n        matSuffix\n        mat-icon-button\n        aria-label=\"Clear search keyword\"\n        matTooltip=\"Clear search keyword\"\n        (click)=\"query.keyword = ''; this.fetchList()\"\n        [style.visibility]=\"query.keyword ? 'visible' : 'hidden'\"\n      >\n        <mat-icon>highlight_off</mat-icon>\n      </button>\n      <!---->\n    </mat-form-field>\n    <!---->\n\n    <span style=\"width: 8px\"></span>\n\n    <!-- Refresh Button -->\n    <button mat-icon-button matTooltip=\"Refresh\" (click)=\"fetchList()\">\n      <mat-icon>refresh</mat-icon>\n    </button>\n    <!---->\n\n    <span style=\"width: 5px\"></span>\n\n    <!-- CSV Export Button -->\n    <button mat-icon-button [matMenuTriggerFor]=\"csvExportMenu\" matTooltip=\"Export as CSV\">\n      <mat-icon>download</mat-icon>\n    </button>\n    <!---->\n\n    <!-- CSV Export Menu -->\n    <mat-menu #csvExportMenu=\"matMenu\">\n      @for (encoder of csvExportService.getAvailableEncoders(); track encoder.key) {\n        <!-- Export with specific charset -->\n        <p style=\"color: #333; font-size: 0.8rem; margin: 1rem 0.75rem 1rem 0.7rem\">\n          CSV ({{ encoder.label }})\n        </p>\n        <button mat-menu-item (click)=\"exportAsCsv(encoder.key)\">\n          <mat-icon>download</mat-icon>\n          <span>Export {{ totalCount }} items</span>\n        </button>\n        <!---->\n      }\n    </mat-menu>\n    <!---->\n  </div>\n</ng-template>\n<!---->\n\n<!-- List (Grid) -->\n<mtx-grid\n  [data]=\"gridData\"\n  [columns]=\"gridColumns\"\n  [showToolbar]=\"true\"\n  [toolbarTemplate]=\"toolbarTpl\"\n  [length]=\"totalCount\"\n  [loading]=\"isLoading\"\n  [pageOnFront]=\"false\"\n  [pageIndex]=\"query.page\"\n  [pageSize]=\"query.perPage\"\n  [pageSizeOptions]=\"listConfig?.pageSizes ?? [10, 25, 50, 100]\"\n  columnMenuButtonType=\"icon\"\n  columnMenuButtonClass=\"column-menu-button\"\n  columnMenuButtonIcon=\"view_column\"\n  (page)=\"onPageChange($event)\"\n></mtx-grid>\n<!---->\n\n<!-- Cell Template with Link -->\n<ng-template #cellTplWithLink let-row let-index=\"index\" let-col=\"colDef\">\n  @if (col.link) {\n    <a [href]=\"col.link(row)\">\n      {{ row[col.field] }}\n    </a>\n  } @else if (col.routerLink) {\n    <a [routerLink]=\"col.routerLink(row)\">\n      {{ row[col.field] }}\n    </a>\n  } @else {\n    {{ row[col.field] }}\n  }\n</ng-template>\n<!---->\n", styles: [":host{display:flex;gap:1rem;padding:1rem;box-sizing:border-box}lib-list-category-selector{display:block;width:200px;background-color:#fcfcfc;border-radius:9px;padding:.5rem;box-sizing:border-box}lib-list-category-selector .category-list{max-height:300px;overflow-y:auto}::ng-deep .mtx-grid-toolbar{display:block;background-color:#fcfcfc;border-top-left-radius:9px;border-top-right-radius:9px;margin-bottom:1px}::ng-deep .mtx-grid-toolbar .custom-toolbar{display:flex;align-items:center;justify-content:space-between;height:37px}::ng-deep .mtx-grid-toolbar .custom-toolbar .list-title{font-size:1rem;line-height:37px}::ng-deep .mtx-grid-toolbar .custom-toolbar .list-title a{color:var(--mat-theme-primary)}::ng-deep .mtx-grid-toolbar .custom-toolbar .list-title a:hover{text-decoration:underline}::ng-deep .mtx-grid-toolbar .custom-toolbar .list-title .list-title-separator{color:#aaa;vertical-align:middle;margin:auto .2rem 4px}::ng-deep .mtx-grid-toolbar .custom-toolbar .clear-filters-button{color:var(--mat-sys-on-primary-container);min-width:32px;padding:0;vertical-align:middle}::ng-deep .mtx-grid-toolbar .custom-toolbar .clear-filters-button mat-icon{vertical-align:middle;margin-bottom:3px}::ng-deep .mtx-grid-toolbar .custom-toolbar .search-keyword{width:15rem;--mat-form-field-container-height: 18.5px;--mat-form-field-container-text-line-height: 18.5px;--mat-form-field-container-vertical-padding: 8.5px;--mat-form-field-outlined-container-shape: 28px;--mat-form-field-subscript-text-line-height: 0px}::ng-deep .mtx-grid-toolbar .custom-toolbar button{color:var(--mat-sys-on-primary-container)}::ng-deep .mtx-grid-toolbar ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mtx-grid-toolbar ::ng-deep mtx-grid-column-menu button[mat-icon-button]{color:var(--mat-sys-on-primary-container);margin-right:.5rem}::ng-deep .mtx-grid-main{background-color:#fcfcfc}table{width:100%}::ng-deep table thead,::ng-deep table tbody{background-color:#fcfcfc!important}::ng-deep .mtx-grid-footer,::ng-deep .mat-mdc-paginator{display:block;background-color:#fcfcfc!important;border-bottom-left-radius:9px!important;border-bottom-right-radius:9px!important}a,::ng-deep table a,::ng-deep table a:visited{color:var(--mat-sys-on-primary-container);text-decoration:none}a:hover,::ng-deep table a:hover,::ng-deep table a:visited:hover{text-decoration:underline}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MtxGridModule }, { kind: "component", type: i2$1.MtxGrid, selector: "mtx-grid", inputs: ["displayedColumns", "columns", "data", "length", "loading", "trackBy", "columnResizable", "emptyValuePlaceholder", "pageOnFront", "showPaginator", "pageDisabled", "showFirstLastButtons", "pageIndex", "pageSize", "pageSizeOptions", "hidePageSize", "paginationTemplate", "sortOnFront", "sortActive", "sortDirection", "sortDisableClear", "sortDisabled", "sortStart", "rowHover", "rowStriped", "expandable", "expansionTemplate", "multiSelectable", "multiSelectionWithClick", "rowSelectable", "hideRowSelectionCheckbox", "disableRowClickSelection", "rowSelectionFormatter", "rowClassFormatter", "rowSelected", "cellSelectable", "showToolbar", "toolbarTitle", "toolbarTemplate", "columnHideable", "columnHideableChecked", "columnSortable", "columnPinnable", "columnPinOptions", "showColumnMenuButton", "columnMenuButtonText", "columnMenuButtonType", "columnMenuButtonColor", "columnMenuButtonClass", "columnMenuButtonIcon", "columnMenuButtonFontIcon", "columnMenuButtonSvgIcon", "showColumnMenuHeader", "columnMenuHeaderText", "columnMenuHeaderTemplate", "showColumnMenuFooter", "columnMenuFooterText", "columnMenuFooterTemplate", "noResultText", "noResultTemplate", "headerTemplate", "headerExtraTemplate", "cellTemplate", "useContentRowTemplate", "useContentHeaderRowTemplate", "useContentFooterRowTemplate", "showSummary", "summaryTemplate", "showSidebar", "sidebarTemplate", "showStatusbar", "statusbarTemplate"], outputs: ["page", "sortChange", "rowClick", "rowContextMenu", "expansionChange", "rowSelectedChange", "cellSelectedChange", "columnChange"], exportAs: ["mtxGrid"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: ListCategorySelector, selector: "lib-list-category-selector", inputs: ["config", "selectedCategory"], outputs: ["selectedCategoryChange"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NgxThinAdminList, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-thin-admin-list', imports: [
+                        FormsModule,
+                        MtxGridModule,
+                        MatButton,
+                        MatIcon,
+                        MatIconButton,
+                        MatTooltip,
+                        MatFormField,
+                        MatInput,
+                        MatPrefix,
+                        MatSuffix,
+                        ListCategorySelector,
+                        MatMenu,
+                        MatMenuItem,
+                        MatMenuTrigger,
+                        RouterLink,
+                    ], template: "<!-- Category Selector -->\n@if (categorySelectorConfig) {\n  <lib-list-category-selector\n    [config]=\"categorySelectorConfig\"\n    [(selectedCategory)]=\"selectedCategory\"\n    (selectedCategoryChange)=\"onSelectedCategoryChange($event)\"\n  ></lib-list-category-selector>\n}\n<!---->\n\n<!-- Toolbar Template -->\n<ng-template #toolbarTpl>\n  <div class=\"custom-toolbar\">\n    <!-- List Title -->\n    <span class=\"list-title\">\n      @if (listConfig?.title; as listTitle) {\n        @if (query.keyword || query.categoryId) {\n          <!-- Title (with link for reset filter) -->\n          <a\n            href=\"javascript:void(0)\"\n            (click)=\"query.keyword = ''; query.categoryId = undefined; this.fetchList()\"\n            matTooltip=\"Reset filters\"\n            >{{ listTitle }}</a\n          >\n          <!---->\n        } @else {\n          <!-- Title -->\n          {{ listTitle }}\n          <!---->\n        }\n      } @else {\n        <!-- Default Title -->\n        List\n        <!---->\n      }\n\n      @if (query.categoryId && selectedCategory?.[0]; as categoryLabel) {\n        <span class=\"material-icons list-title-separator\"> keyboard_arrow_right </span>\n        <!-- Category -->\n        {{ categoryLabel.label }}\n        <!---->\n      }\n\n      @if (query.keyword) {\n        <span class=\"material-icons list-title-separator\"> keyboard_arrow_right </span>\n        <!-- Keyword -->\n        \"{{ query.keyword }}\"\n        <!---->\n      }\n    </span>\n    <!---->\n\n    @if (query.keyword || query.categoryId) {\n      <span style=\"width: 8px\"></span>\n      <!-- Clear Filters Button -->\n      <button\n        mat-icon-button\n        class=\"clear-filters-button\"\n        matTooltip=\"Clear filters\"\n        (click)=\"clearFilters()\"\n      >\n        <mat-icon>filter_alt_off</mat-icon>\n      </button>\n      <!---->\n    }\n\n    <span style=\"flex: 1\"></span>\n\n    <!-- Create Button -->\n    @if (listConfig?.createButton; as createBtn) {\n      @if ($any(createBtn).routerLink; as routerLinkUrl) {\n        <!-- Create Button with Router Link -->\n        <a\n          [routerLink]=\"routerLinkUrl\"\n          mat-flat-button\n          class=\"primary-button\"\n          style=\"color: white; transform: translateY(-1px)\"\n        >\n          {{ createBtn.label }}\n          <mat-icon style=\"margin-bottom: 1px\">add</mat-icon>\n        </a>\n      } @else if ($any(createBtn).link; as linkUrl) {\n        <!-- Create Button with Link -->\n        <a\n          [href]=\"linkUrl\"\n          mat-flat-button\n          class=\"primary-button\"\n          style=\"color: white; transform: translateY(-1px)\"\n        >\n          {{ createBtn.label }}\n          <mat-icon style=\"margin-bottom: 1px\">add</mat-icon>\n        </a>\n      } @else if ($any(createBtn).click; as handler) {\n        <!-- Create Button with Handler -->\n        <button\n          mat-flat-button\n          class=\"primary-button\"\n          style=\"color: white; transform: translateY(-1px)\"\n          (click)=\"handler()\"\n        >\n          {{ createBtn?.label }}\n          <mat-icon style=\"margin-bottom: 1px\">add</mat-icon>\n        </button>\n      }\n    }\n    <!---->\n\n    <span style=\"width: 30px\"></span>\n\n    <!-- Search Field -->\n    <mat-form-field class=\"search-keyword xs-input\" appearance=\"outline\">\n      <mat-icon matPrefix>search</mat-icon>\n      <input\n        matInput\n        [placeholder]=\"\n          selectedCategory?.[0]?.label\n            ? 'Search in ' + selectedCategory?.[0]?.label + '...'\n            : 'Search...'\n        \"\n        [(ngModel)]=\"query.keyword\"\n        (keyup)=\"onKeywordInput()\"\n        style=\"padding-top: 3px\"\n      />\n\n      <!-- Search clear button -->\n      <button\n        matSuffix\n        mat-icon-button\n        aria-label=\"Clear search keyword\"\n        matTooltip=\"Clear search keyword\"\n        (click)=\"query.keyword = ''; this.fetchList()\"\n        [style.visibility]=\"query.keyword ? 'visible' : 'hidden'\"\n      >\n        <mat-icon>highlight_off</mat-icon>\n      </button>\n      <!---->\n    </mat-form-field>\n    <!---->\n\n    <span style=\"width: 8px\"></span>\n\n    <!-- Refresh Button -->\n    <button mat-icon-button matTooltip=\"Refresh\" (click)=\"fetchList()\">\n      <mat-icon>refresh</mat-icon>\n    </button>\n    <!---->\n\n    <span style=\"width: 5px\"></span>\n\n    <!-- CSV Export Button -->\n    <button mat-icon-button [matMenuTriggerFor]=\"csvExportMenu\" matTooltip=\"Export as CSV\">\n      <mat-icon>download</mat-icon>\n    </button>\n    <!---->\n\n    <!-- CSV Export Menu -->\n    <mat-menu #csvExportMenu=\"matMenu\">\n      @for (encoder of csvExportService.getAvailableEncoders(); track encoder.key) {\n        <!-- Export with specific charset -->\n        <p style=\"color: #333; font-size: 0.8rem; margin: 1rem 0.75rem 1rem 0.7rem\">\n          CSV ({{ encoder.label }})\n        </p>\n        <button mat-menu-item (click)=\"exportAsCsv(encoder.key)\">\n          <mat-icon>download</mat-icon>\n          <span>Export {{ totalCount }} items</span>\n        </button>\n        <!---->\n      }\n    </mat-menu>\n    <!---->\n  </div>\n</ng-template>\n<!---->\n\n<!-- List (Grid) -->\n<mtx-grid\n  [data]=\"gridData\"\n  [columns]=\"gridColumns\"\n  [showToolbar]=\"true\"\n  [toolbarTemplate]=\"toolbarTpl\"\n  [length]=\"totalCount\"\n  [loading]=\"isLoading\"\n  [pageOnFront]=\"false\"\n  [pageIndex]=\"query.page\"\n  [pageSize]=\"query.perPage\"\n  [pageSizeOptions]=\"listConfig?.pageSizes ?? [10, 25, 50, 100]\"\n  columnMenuButtonType=\"icon\"\n  columnMenuButtonClass=\"column-menu-button\"\n  columnMenuButtonIcon=\"view_column\"\n  (page)=\"onPageChange($event)\"\n></mtx-grid>\n<!---->\n\n<!-- Cell Template with Link -->\n<ng-template #cellTplWithLink let-row let-index=\"index\" let-col=\"colDef\">\n  @if (col.link) {\n    <a [href]=\"col.link(row)\">\n      {{ row[col.field] }}\n    </a>\n  } @else if (col.routerLink) {\n    <a [routerLink]=\"col.routerLink(row)\">\n      {{ row[col.field] }}\n    </a>\n  } @else {\n    {{ row[col.field] }}\n  }\n</ng-template>\n<!---->\n", styles: [":host{display:flex;gap:1rem;padding:1rem;box-sizing:border-box}lib-list-category-selector{display:block;width:200px;background-color:#fcfcfc;border-radius:9px;padding:.5rem;box-sizing:border-box}lib-list-category-selector .category-list{max-height:300px;overflow-y:auto}::ng-deep .mtx-grid-toolbar{display:block;background-color:#fcfcfc;border-top-left-radius:9px;border-top-right-radius:9px;margin-bottom:1px}::ng-deep .mtx-grid-toolbar .custom-toolbar{display:flex;align-items:center;justify-content:space-between;height:37px}::ng-deep .mtx-grid-toolbar .custom-toolbar .list-title{font-size:1rem;line-height:37px}::ng-deep .mtx-grid-toolbar .custom-toolbar .list-title a{color:var(--mat-theme-primary)}::ng-deep .mtx-grid-toolbar .custom-toolbar .list-title a:hover{text-decoration:underline}::ng-deep .mtx-grid-toolbar .custom-toolbar .list-title .list-title-separator{color:#aaa;vertical-align:middle;margin:auto .2rem 4px}::ng-deep .mtx-grid-toolbar .custom-toolbar .clear-filters-button{color:var(--mat-sys-on-primary-container);min-width:32px;padding:0;vertical-align:middle}::ng-deep .mtx-grid-toolbar .custom-toolbar .clear-filters-button mat-icon{vertical-align:middle;margin-bottom:3px}::ng-deep .mtx-grid-toolbar .custom-toolbar .search-keyword{width:15rem;--mat-form-field-container-height: 18.5px;--mat-form-field-container-text-line-height: 18.5px;--mat-form-field-container-vertical-padding: 8.5px;--mat-form-field-outlined-container-shape: 28px;--mat-form-field-subscript-text-line-height: 0px}::ng-deep .mtx-grid-toolbar .custom-toolbar button{color:var(--mat-sys-on-primary-container)}::ng-deep .mtx-grid-toolbar ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mtx-grid-toolbar ::ng-deep mtx-grid-column-menu button[mat-icon-button]{color:var(--mat-sys-on-primary-container);margin-right:.5rem}::ng-deep .mtx-grid-main{background-color:#fcfcfc}table{width:100%}::ng-deep table thead,::ng-deep table tbody{background-color:#fcfcfc!important}::ng-deep .mtx-grid-footer,::ng-deep .mat-mdc-paginator{display:block;background-color:#fcfcfc!important;border-bottom-left-radius:9px!important;border-bottom-right-radius:9px!important}a,::ng-deep table a,::ng-deep table a:visited{color:var(--mat-sys-on-primary-container);text-decoration:none}a:hover,::ng-deep table a:hover,::ng-deep table a:visited:hover{text-decoration:underline}\n"] }]
+        }], propDecorators: { listConfig: [{
+                type: Input
+            }], categorySelectorConfig: [{
+                type: Input
+            }], listColumns: [{
+                type: Input
+            }], query: [{
+                type: Input
+            }], cellTplWithLink: [{
+                type: ViewChild,
+                args: ['cellTplWithLink', { static: true }]
+            }] } });
+
+class FormlyMatPrefixAddonWrapper extends FieldWrapper {
+    matPrefix;
+    matSuffix;
+    ngAfterViewInit() {
+        if (this.matPrefix) {
+            this.props['prefix'] = this.matPrefix;
+        }
+        if (this.matSuffix) {
+            this.props['suffix'] = this.matSuffix;
+        }
+    }
+    addonRightClick($event) {
+        if (this.props['addonRight'].onClick) {
+            this.props['addonRight'].onClick(this.to, this, $event);
+        }
+    }
+    addonLeftClick($event) {
+        if (this.props['addonLeft'].onClick) {
+            this.props['addonLeft'].onClick(this.to, this, $event);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormlyMatPrefixAddonWrapper, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: FormlyMatPrefixAddonWrapper, isStandalone: true, selector: "lib-formly-mat-prefix-addon-wrapper", viewQueries: [{ propertyName: "matPrefix", first: true, predicate: ["matPrefix"], descendants: true, static: true }, { propertyName: "matSuffix", first: true, predicate: ["matSuffix"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    <ng-container #fieldComponent></ng-container>
+
+    <ng-template #matSuffix>
+      @if (props['addonRight']) {
+        @if (props['addonRight']['icon']) {
+          <button
+            mat-icon-button
+            matSuffix
+            style="margin-right: 1rem;"
+            [matTooltip]="props['addonRight']['tooltip'] ?? ''"
+            (click)="props['addonRight'].onClick ? addonRightClick($event) : null"
+            type="button"
+          >
+            <mat-icon>{{ props['addonRight']['icon'] }}</mat-icon>
+          </button>
+        }
+        @if (props['addonRight']['text']) {
+          <span>{{ props['addonRight']['text'] }}</span>
+        }
+      }
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormlyMatPrefixAddonWrapper, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-formly-mat-prefix-addon-wrapper',
+                    imports: [MatIconButton, MatIcon, MatSuffix, MatTooltip],
+                    template: `
+    <ng-container #fieldComponent></ng-container>
+
+    <ng-template #matSuffix>
+      @if (props['addonRight']) {
+        @if (props['addonRight']['icon']) {
+          <button
+            mat-icon-button
+            matSuffix
+            style="margin-right: 1rem;"
+            [matTooltip]="props['addonRight']['tooltip'] ?? ''"
+            (click)="props['addonRight'].onClick ? addonRightClick($event) : null"
+            type="button"
+          >
+            <mat-icon>{{ props['addonRight']['icon'] }}</mat-icon>
+          </button>
+        }
+        @if (props['addonRight']['text']) {
+          <span>{{ props['addonRight']['text'] }}</span>
+        }
+      }
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { matPrefix: [{
+                type: ViewChild,
+                args: ['matPrefix', { static: true }]
+            }], matSuffix: [{
+                type: ViewChild,
+                args: ['matSuffix', { static: true }]
+            }] } });
+function formlyAddonsExtension(field) {
+    if (!field.props || (field.wrappers && field.wrappers.indexOf('addons') !== -1)) {
+        return;
+    }
+    if (field.props['addonLeft'] || field.props['addonRight']) {
+        field.wrappers = [...(field.wrappers || []), 'addons'];
+    }
+}
+
+function getErrorMessage(error) {
+    if (typeof error === 'string') {
+        return error;
+    }
+    else if (error instanceof Error) {
+        return error.message;
+    }
+    else if (error?.error?.message) {
+        if (Array.isArray(error.error.message)) {
+            return error.error.message[0];
+        }
+        else {
+            return error.error.message;
+        }
+    }
+    else {
+        return 'An unknown error occurred';
+    }
+}
+
+class NgxThinAdminEditor {
+    /**
+     * Config for editor
+     */
+    editorConfig;
+    /**
+     * Fields for formly form
+     */
+    editorFields;
+    /**
+     * Id of the item being edited.
+     */
+    itemId;
+    /**
+     * Internal state for form
+     */
+    isSaving = false;
+    isLoading = false;
+    form = new FormGroup({});
+    data = {};
+    formData = {};
+    /**
+     * Services
+     */
+    snackbar = inject(MatSnackBar);
+    cdr = inject(ChangeDetectorRef);
+    ngOnChanges(changes) {
+        // Fetcher
+        if (changes.editorConfig &&
+            changes.editorConfig.currentValue?.fetcher !== changes.editorConfig.previousValue?.fetcher) {
+            this.fetchItem();
+        }
+        else if (changes.itemId && changes.itemId.currentValue !== changes.itemId.previousValue) {
+            this.fetchItem();
+        }
+        // Fields
+        if (changes.editorFields?.currentValue) {
+            this.editorFields = changes.editorFields.currentValue.map((col) => {
+                return this.overwriteFieldProps(col);
+            });
+        }
+    }
+    overwriteFieldProps(field) {
+        if (!field.props) {
+            field.props = {};
+        }
+        // requiredOnCreate
+        if (field.props.requiredOnCreate) {
+            if (this.itemId === undefined) {
+                field.props.required = true;
+            }
+            else {
+                field.props.required = false;
+            }
+        }
+        // disabledOnUpdate
+        if (field.props.disabledOnUpdate) {
+            if (this.itemId !== undefined) {
+                //formControl.disable();
+                field.props.disabled = true;
+            }
+            else {
+                //formControl.enable();
+                field.props.disabled = false;
+            }
+        }
+        return field;
+    }
+    async fetchItem() {
+        if (!this.editorConfig?.fetcher) {
+            return;
+        }
+        else if (!this.itemId) {
+            this.data = {};
+            return;
+        }
+        // Set loading state
+        this.isLoading = true;
+        this.cdr.markForCheck();
+        // Call the fetcher function to get the item data
+        try {
+            let res = await this.editorConfig.fetcher(this.itemId);
+            if (res instanceof Response) {
+                if (!res.ok) {
+                    const data = await res.json();
+                    throw new Error(data.error ?? data.message ?? `Failed to fetch data: ${res.status} ${res.statusText}`);
+                }
+                res = await res.json();
+            }
+            this.data = { ...res };
+            this.formData = { ...res };
+        }
+        catch (e) {
+            const errorMessage = getErrorMessage(e);
+            this.snackbar.open(`Error: ${errorMessage}`, undefined, {
+                duration: 3000,
+            });
+            // Reset loading state
+            this.isLoading = false;
+            this.cdr.markForCheck();
+            return;
+        }
+        this.isLoading = false;
+        this.cdr.markForCheck();
+    }
+    async save() {
+        if (this.form.status === 'INVALID') {
+            this.snackbar.open('Error: Invalid input', undefined, {
+                duration: 3000,
+            });
+            // Mark field to show validation errors
+            Object.keys(this.form.controls).forEach((key) => {
+                const control = this.form.get(key);
+                control?.markAsTouched();
+            });
+            return;
+        }
+        if (!this.editorConfig?.saver) {
+            this.snackbar.open('Error: No saver function provided', undefined, {
+                duration: 3000,
+            });
+            return;
+        }
+        // Disable the form and save button to prevent multiple submissions
+        this.form.disable();
+        this.isSaving = true;
+        // Call the saver function
+        let result;
+        try {
+            let res = await this.editorConfig?.saver?.(this.formData, this.itemId);
+            if (res instanceof Response) {
+                if (!res.ok) {
+                    const data = await res.json();
+                    throw new Error(data.error ?? data.message ?? `Failed to save data: ${res.status} ${res.statusText}`);
+                }
+                res = await res.json();
+            }
+            result = res;
+        }
+        catch (e) {
+            const errorMessage = getErrorMessage(e);
+            this.snackbar.open(`Error: ${errorMessage}`, undefined, {
+                duration: 3000,
+            });
+            // Re-enable the form and save button
+            this.form.enable();
+            this.isSaving = false;
+            return;
+        }
+        // Show success message
+        this.snackbar.open('Data saved successfully', undefined, {
+            duration: 3000,
+        });
+        // Update form data with the result from the saver (e.g., to get generated ID)
+        this.data = { ...result };
+        this.formData = { ...result };
+        // Re-enable the form and save button
+        this.form.enable();
+        for (const field of this.editorFields ?? []) {
+            this.overwriteFieldProps(field);
+        }
+        this.isSaving = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NgxThinAdminEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: NgxThinAdminEditor, isStandalone: true, selector: "ngx-thin-admin-editor", inputs: { editorConfig: "editorConfig", editorFields: "editorFields", itemId: "itemId" }, providers: [
+            provideFormlyCore(withFormlyMaterial()),
+            provideFormlyCore({
+                wrappers: [
+                    {
+                        name: 'addons',
+                        component: FormlyMatPrefixAddonWrapper,
+                    },
+                ],
+                extensions: [{ name: 'addons', extension: { onPopulate: formlyAddonsExtension } }],
+            }),
+            {
+                // Apply default appearance and other settings to all Material form fields in this component
+                provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+                useValue: {
+                    appearance: 'outline',
+                    floatLabel: 'always',
+                    subscriptSizing: 'dynamic',
+                },
+            },
+        ], usesOnChanges: true, ngImport: i0, template: "<mat-card>\n  <mat-card-header>\n    <h3>\n      @if (itemId !== undefined && $any(data); as editItem) {\n        @if (editorConfig?.labelFieldKey && editItem[editorConfig!.labelFieldKey!]) {\n          <!-- e.g., \"Edit - Taro (taro) \" -->\n          Edit &nbsp; <span style=\"color: #aaaaaa\">-</span>\n          <span class=\"editor-item-label\">{{ editItem[editorConfig!.labelFieldKey!] }}</span>\n          @if (editorConfig?.idFieldKey && editItem[editorConfig!.idFieldKey!]) {\n            <small class=\"editor-header-sub\">{{ editItem[editorConfig!.idFieldKey!] }}</small>\n          }\n          <!---->\n        } @else if (editItem.id) {\n          <!-- e.g., \"Edit - ID: 123\" -->\n          Edit &nbsp; <span style=\"color: #aaaaaa\">-</span>\n          ID:\n          <span class=\"editor-item-label\">{{ editItem.id }}</span>\n          <!---->\n        } @else {\n          <!-- e.g., \"Edit Account (123)\" -->\n          Edit\n          @if (editorConfig?.singularLabel) {\n            {{ editorConfig?.singularLabel }}\n          }\n          @if (editorConfig?.idFieldKey && editItem[editorConfig!.idFieldKey!]) {\n            <small class=\"editor-header-sub\">{{ editItem[editorConfig!.idFieldKey!] }}</small>\n          }\n          <!---->\n        }\n      } @else {\n        <!-- Create Account -->\n        Create\n        @if (editorConfig?.singularLabel) {\n          {{ editorConfig?.singularLabel }}\n        }\n        <!---->\n      }\n    </h3>\n  </mat-card-header>\n\n  <mat-card-content>\n    @if (isLoading) {\n      <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n    } @else {\n      <form [formGroup]=\"form\" (ngSubmit)=\"save()\">\n        <formly-form\n          [form]=\"form\"\n          [fields]=\"$any(editorFields) ?? []\"\n          [model]=\"formData\"\n        ></formly-form>\n\n        @if (editorConfig?.saver) {\n          <!-- Submit button -->\n          <button\n            type=\"submit\"\n            mat-flat-button\n            style=\"color: white; transform: translateY(-0.3rem); float: right\"\n          >\n            @if (itemId !== undefined) {\n              Save Changes\n            } @else {\n              Create\n            }\n          </button>\n          <!---->\n        }\n      </form>\n    }\n  </mat-card-content>\n</mat-card>\n", styles: [":host{max-width:600px;display:block;margin:0 auto}mat-card{padding:2rem}mat-card-header h3{font-size:1.2rem;font-weight:400}mat-card-header .editor-item-label{margin-left:1rem}mat-card-header .editor-header-sub{color:#555;margin-left:.85rem;font-size:.9rem;font-style:italic}form{margin-top:2rem}form ::ng-deep .mat-mdc-form-field-subscript-wrapper{margin-bottom:14px!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NgxThinAdminEditor, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-thin-admin-editor', imports: [
+                        ReactiveFormsModule,
+                        FormlyForm,
+                        MatButton,
+                        MatProgressBar,
+                        MatCard,
+                        MatCardHeader,
+                        MatCardContent,
+                    ], providers: [
+                        provideFormlyCore(withFormlyMaterial()),
+                        provideFormlyCore({
+                            wrappers: [
+                                {
+                                    name: 'addons',
+                                    component: FormlyMatPrefixAddonWrapper,
+                                },
+                            ],
+                            extensions: [{ name: 'addons', extension: { onPopulate: formlyAddonsExtension } }],
+                        }),
+                        {
+                            // Apply default appearance and other settings to all Material form fields in this component
+                            provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+                            useValue: {
+                                appearance: 'outline',
+                                floatLabel: 'always',
+                                subscriptSizing: 'dynamic',
+                            },
+                        },
+                    ], template: "<mat-card>\n  <mat-card-header>\n    <h3>\n      @if (itemId !== undefined && $any(data); as editItem) {\n        @if (editorConfig?.labelFieldKey && editItem[editorConfig!.labelFieldKey!]) {\n          <!-- e.g., \"Edit - Taro (taro) \" -->\n          Edit &nbsp; <span style=\"color: #aaaaaa\">-</span>\n          <span class=\"editor-item-label\">{{ editItem[editorConfig!.labelFieldKey!] }}</span>\n          @if (editorConfig?.idFieldKey && editItem[editorConfig!.idFieldKey!]) {\n            <small class=\"editor-header-sub\">{{ editItem[editorConfig!.idFieldKey!] }}</small>\n          }\n          <!---->\n        } @else if (editItem.id) {\n          <!-- e.g., \"Edit - ID: 123\" -->\n          Edit &nbsp; <span style=\"color: #aaaaaa\">-</span>\n          ID:\n          <span class=\"editor-item-label\">{{ editItem.id }}</span>\n          <!---->\n        } @else {\n          <!-- e.g., \"Edit Account (123)\" -->\n          Edit\n          @if (editorConfig?.singularLabel) {\n            {{ editorConfig?.singularLabel }}\n          }\n          @if (editorConfig?.idFieldKey && editItem[editorConfig!.idFieldKey!]) {\n            <small class=\"editor-header-sub\">{{ editItem[editorConfig!.idFieldKey!] }}</small>\n          }\n          <!---->\n        }\n      } @else {\n        <!-- Create Account -->\n        Create\n        @if (editorConfig?.singularLabel) {\n          {{ editorConfig?.singularLabel }}\n        }\n        <!---->\n      }\n    </h3>\n  </mat-card-header>\n\n  <mat-card-content>\n    @if (isLoading) {\n      <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n    } @else {\n      <form [formGroup]=\"form\" (ngSubmit)=\"save()\">\n        <formly-form\n          [form]=\"form\"\n          [fields]=\"$any(editorFields) ?? []\"\n          [model]=\"formData\"\n        ></formly-form>\n\n        @if (editorConfig?.saver) {\n          <!-- Submit button -->\n          <button\n            type=\"submit\"\n            mat-flat-button\n            style=\"color: white; transform: translateY(-0.3rem); float: right\"\n          >\n            @if (itemId !== undefined) {\n              Save Changes\n            } @else {\n              Create\n            }\n          </button>\n          <!---->\n        }\n      </form>\n    }\n  </mat-card-content>\n</mat-card>\n", styles: [":host{max-width:600px;display:block;margin:0 auto}mat-card{padding:2rem}mat-card-header h3{font-size:1.2rem;font-weight:400}mat-card-header .editor-item-label{margin-left:1rem}mat-card-header .editor-header-sub{color:#555;margin-left:.85rem;font-size:.9rem;font-style:italic}form{margin-top:2rem}form ::ng-deep .mat-mdc-form-field-subscript-wrapper{margin-bottom:14px!important}\n"] }]
+        }], propDecorators: { editorConfig: [{
+                type: Input
+            }], editorFields: [{
+                type: Input
+            }], itemId: [{
+                type: Input
+            }] } });
+
+/*
+ * Public API Surface of ngx-thin-admin
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgxThinAdminEditor, NgxThinAdminList };
+//# sourceMappingURL=ngx-thin-admin.mjs.map