@ldquocc/dynamic-form 0.0.4 → 0.0.6

package/fesm2022/ldquocc-dynamic-form.mjs

@@ -1,5 +1,5 @@
 import * as i1 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule, FormControl, Validators, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, Validators, FormControl, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { of, delay, Subject, takeUntil, finalize, Observable, debounceTime, distinctUntilChanged } from 'rxjs';
 import * as i1$2 from '@angular/common';
 import { CommonModule, CurrencyPipe } from '@angular/common';
@@ -22,24 +22,23 @@ import { NzButtonModule } from 'ng-zorro-antd/button';
 import * as i5 from 'ng-zorro-antd/core/transition-patch';
 import * as i6 from 'ng-zorro-antd/core/wave';
 import { NgxCurrencyDirective } from 'ngx-currency';
-import * as i3$1 from 'ng-zorro-antd/radio';
-import { NzRadioModule } from 'ng-zorro-antd/radio';
-import * as i4$1 from 'ng-zorro-antd/select';
+import * as i3$1 from 'ng-zorro-antd/select';
 import { NzSelectModule } from 'ng-zorro-antd/select';
-import { ToastrService } from 'ngx-toastr';
 import * as i3$2 from 'ng-zorro-antd/spin';
 import { NzSpinModule } from 'ng-zorro-antd/spin';
 import * as i2$1 from 'ng-zorro-antd/tree-select';
 import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
 import * as i2$2 from 'ng-zorro-antd/upload';
 import { NzUploadModule } from 'ng-zorro-antd/upload';
+import { NzNotificationService } from 'ng-zorro-antd/notification';
+import { ToastrService } from 'ngx-toastr';
 import { TranslateService } from '@ngx-translate/core';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import * as i7 from 'ng-zorro-antd/image';
 import { NzImageModule } from 'ng-zorro-antd/image';
 import * as i2$3 from 'ng-zorro-antd/grid';
 import { NzGridModule } from 'ng-zorro-antd/grid';
-import * as i4$2 from 'ng-zorro-antd/collapse';
+import * as i4$1 from 'ng-zorro-antd/collapse';
 import { NzCollapseModule } from 'ng-zorro-antd/collapse';
 
 // Core Angular modules (cần thiết ở hầu hết các component).
@@ -171,6 +170,220 @@ const DEFAULT_ACCEPTED_IMAGE_MIME_TYPES = [
     IMAGE_TYPES.svg,
 ];
 
+const COMBINE_DEPEND_TYPES = ['skip', 'null', 'valid'];
+
+// Format file size, đầu vào là Byte, và loại muốn format sang.
+const formatFileSize = (size, type) => {
+    let returnVal = 0;
+    switch (type) {
+        case 'KB':
+            returnVal = size / 1024;
+            break;
+        case 'MB':
+            returnVal = size / (1024 * 1024);
+            break;
+        case 'GB':
+            returnVal = size / (1024 * 1024 * 1024);
+            break;
+        case 'TB':
+            returnVal = size / (1024 * 1024 * 1024 * 1024);
+            break;
+        default:
+            returnVal = size;
+            break;
+    }
+    return returnVal;
+};
+// Lấy extension. dựa vào các cấu hình mimeTypes sẵn.
+const getExtensions = (acptMimeTypes) => {
+    return acptMimeTypes.map(mime => `.${MIME_TYPES_TO_EXTENSION[mime] || mime}`);
+};
+// Tạo một file giả từ thông tin name, type và size.
+const createFakeFile = (name, type, size) => {
+    const buffer = new Uint8Array(size); // tạo buffer theo size, không crash nếu file có dung lượng lớn.
+    const blob = new Blob([buffer], { type });
+    return new File([blob], name, { type, lastModified: Date.now() });
+};
+
+var FileSizeTypeEnum;
+(function (FileSizeTypeEnum) {
+    FileSizeTypeEnum["MB"] = "MB";
+    FileSizeTypeEnum["KB"] = "KB";
+    FileSizeTypeEnum["GB"] = "GB";
+    FileSizeTypeEnum["TB"] = "TB";
+})(FileSizeTypeEnum || (FileSizeTypeEnum = {}));
+
+// Kiểm tra tính hợp lệ của JSON string.
+const isValidJSON = (str) => {
+    try {
+        JSON.parse(str);
+    }
+    catch (e) {
+        return false;
+    }
+    return true;
+};
+// Tạo một chuỗi uuid.
+const uuidGenerator = () => {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        var r = (Math.random() * 16) | 0, v = c == 'x' ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+    });
+};
+const lowerCaseFirstChar = (str) => {
+    return str.charAt(0).toLowerCase() + str.slice(1);
+};
+const upperCaseFirstChar = (str) => {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+};
+const deepCopyArray = (array) => {
+    return array.map(item => {
+        if (Array.isArray(item)) {
+            return deepCopyArray(item); // Deep copy nếu phần tử là mảng lồng nhau
+        }
+        else if (item && typeof item === 'object') {
+            return deepCopyObject(item); // Deep copy nếu phần tử là đối tượng
+        }
+        return item; // Trả về giá trị gốc nếu không phải mảng hoặc đối tượng
+    });
+};
+const deepCopyObject = (obj) => {
+    return Object.fromEntries(Object.entries(obj).map(([key, value]) => {
+        if (Array.isArray(value)) {
+            return [key, deepCopyArray(value)]; // Deep copy nếu giá trị là mảng
+        }
+        else if (value && typeof value === 'object') {
+            return [key, deepCopyObject(value)]; // Deep copy nếu giá trị là đối tượng
+        }
+        return [key, value]; // Trả về giá trị gốc
+    }));
+};
+
+// Không cho phép nhập khoảng trắng ở đầu chuỗi, nếu không nhập gì vẫn tính đúng.
+const noLeadingSpaceValidator = () => {
+    return (control) => {
+        const value = (control.value ?? "").toString();
+        if (!value)
+            return null; // Không required thì để trống là hợp lệ
+        return value[0] === " " ? { leadingSpace: true } : null;
+    };
+};
+// Không cho phép nhập toàn khoảng trắng.
+const noWhitespaceValidator = () => {
+    return (control) => {
+        const isWhitespace = (control.value || "").toString().trim().length === 0;
+        return isWhitespace ? { whitespace: true } : null;
+    };
+};
+// Bắt đầu với một kí tự được chỉ định.
+const startsWithValidator = (prefix) => {
+    return (control) => {
+        const value = control.value ?? "";
+        return value.startsWith(prefix)
+            ? null
+            : { startsWith: { requiredPrefix: prefix } };
+    };
+};
+// So sánh giá trị field A không được lớn hơn field B.
+const minMaxFieldValidator = (minKey, maxKey) => {
+    // group: AbstractControl sẽ đại diện cho FormGroup tức là cha bao hàm các field.
+    return (group) => {
+        const min = group.get(minKey)?.value;
+        const max = group.get(maxKey)?.value;
+        if (min != null && max != null && min > max) {
+            return { minMaxInvalid: true };
+        }
+        return null;
+    };
+};
+// Match giữa hai field (ví dụ: password/confirmPassword,...).
+const matchFieldsValidator = (fieldToMatch) => {
+    return (control) => {
+        const parent = control.parent;
+        if (!parent)
+            return null;
+        const target = parent.get(fieldToMatch);
+        if (!target?.value)
+            return null;
+        // Nếu đang validate chính nó (ví dụ: confirmPassword)
+        const isMismatch = control.value !== target.value;
+        // Nếu trước đó password (target) đang bị lỗi matchField nhưng giờ đã khớp
+        if (!isMismatch && target.hasError("matchField")) {
+            const errors = { ...target.errors };
+            delete errors["matchField"];
+            // Nếu không còn lỗi nào khác, set null
+            target.setErrors(Object.keys(errors).length ? errors : null);
+        }
+        return isMismatch ? { matchField: true } : null;
+    };
+};
+// Async: Check if username is taken (simulate API).
+const asyncUsernameValidator = (takenUsernames) => {
+    return (control) => {
+        const value = control.value ?? "";
+        const isTaken = takenUsernames.includes(value);
+        return of(isTaken ? { usernameTaken: true } : null).pipe(delay(500));
+    };
+};
+// Không có ký tự đặc biệt.
+const noSpecialCharValidator = () => {
+    return (control) => {
+        const valid = /^[a-zA-Z0-9]*$/.test(control.value);
+        return valid ? null : { noSpecialChar: true };
+    };
+};
+// Username không được nằm trong blacklist.
+const usernameBlacklistValidator = (blacklist) => {
+    return (control) => {
+        return blacklist.includes(control.value) ? { blacklisted: true } : null;
+    };
+};
+// Có thuộc mimetypes từ mảng mimetypes được chỉ định hay không?
+const acceptedMimeTypesValidator = (acceptedMimeTypes) => {
+    return (control) => {
+        const value = control?.value;
+        if (value) {
+            let fileType = "";
+            if (value instanceof File) {
+                fileType = value.type;
+            }
+            if (isValidJSON(value)) {
+                const { contentType } = JSON.parse(value)[0] || {};
+                if (contentType)
+                    fileType = contentType;
+            }
+            if (fileType) {
+                if (!acceptedMimeTypes.includes(fileType)) {
+                    return {
+                        acceptedMimeTypes: {
+                            actualValue: fileType,
+                            requiredValue: `Nằm trong ${acceptedMimeTypes}`,
+                        },
+                    };
+                }
+            }
+        }
+        return null;
+    };
+};
+const maxFileSizeInMBValidator = (maxSizeInMB) => {
+    return (control) => {
+        const file = control?.value;
+        if (file) {
+            const fileSizeInMB = formatFileSize(file.size, FileSizeTypeEnum.MB);
+            if (fileSizeInMB > maxSizeInMB) {
+                return {
+                    maxSizeInMB: {
+                        actualValue: fileSizeInMB,
+                        requiredValue: `Nhỏ hơn ${maxSizeInMB}`,
+                    },
+                };
+            }
+        }
+        return null;
+    };
+};
+
 // Enum cho các validator chung được angular reactive form hỗ trợ.
 var CommonValidaterEnum;
 (function (CommonValidaterEnum) {
@@ -190,46 +403,13 @@ var CustomValidaterEnum;
     CustomValidaterEnum["LeadingSpace"] = "leadingSpace";
 })(CustomValidaterEnum || (CustomValidaterEnum = {}));
 
-// Dạng control.
-var ControlTypeEnum;
-(function (ControlTypeEnum) {
-    ControlTypeEnum["Input"] = "input";
-    ControlTypeEnum["Textarea"] = "textarea";
-    ControlTypeEnum["Select"] = "select";
-    ControlTypeEnum["Checkbox"] = "checkbox";
-    ControlTypeEnum["Radio"] = "radio";
-    ControlTypeEnum["Date"] = "date";
-    ControlTypeEnum["Upload"] = "upload";
-    ControlTypeEnum["Switch"] = "switch";
-    ControlTypeEnum["Autocomplete"] = "autocomplete";
-})(ControlTypeEnum || (ControlTypeEnum = {}));
-
-/**
- * Interface base chung cho Các dạng Date.
- */
-class BaseDateField extends BaseField {
-    /**
-     * Props validation chung cho các dạng Date.
-     */
-    constructor(init) {
-        super(init);
-        /**
-         * Gán giá trị cho các props cần giá trị mặc định ở Date.
-         */
-        this.controlType = ControlTypeEnum.Date;
-        this.allowPastDates = true;
-        this.allowFutureDates = true;
-        this.format = 'dd-MM-yyyy';
-        // this.value = undefined;
-        Object.assign(this, init);
-    }
-    // Tạo Form Control cho Input Field.
-    toFormControl() {
-        const commonValidators = this.getCommonValidators();
-        const customValidators = this.getCustomValidators();
-        return new FormControl(this.value ?? '', [...commonValidators, ...customValidators]);
-    }
-}
+var FormModeEnum;
+(function (FormModeEnum) {
+    FormModeEnum["Add"] = "add";
+    FormModeEnum["Edit"] = "edit";
+    FormModeEnum["View"] = "view";
+    FormModeEnum["Design"] = "design";
+})(FormModeEnum || (FormModeEnum = {}));
 
 var SelectOutputValueTypeEnum;
 (function (SelectOutputValueTypeEnum) {
@@ -255,14 +435,6 @@ var UploadOutputValueTypeEnum;
     UploadOutputValueTypeEnum["Object"] = "object";
 })(UploadOutputValueTypeEnum || (UploadOutputValueTypeEnum = {}));
 
-var FileSizeTypeEnum;
-(function (FileSizeTypeEnum) {
-    FileSizeTypeEnum["MB"] = "MB";
-    FileSizeTypeEnum["KB"] = "KB";
-    FileSizeTypeEnum["GB"] = "GB";
-    FileSizeTypeEnum["TB"] = "TB";
-})(FileSizeTypeEnum || (FileSizeTypeEnum = {}));
-
 var CombineDependTypeEnum;
 (function (CombineDependTypeEnum) {
     CombineDependTypeEnum["Valid"] = "valid";
@@ -281,283 +453,77 @@ var ViewModeEnum;
     ViewModeEnum["text"] = "text";
 })(ViewModeEnum || (ViewModeEnum = {}));
 
-// Dạng field cụ thể.
-var FieldTypeEnum;
-(function (FieldTypeEnum) {
-    FieldTypeEnum["InputText"] = "input-text";
-    FieldTypeEnum["InputPassword"] = "input-password";
-    FieldTypeEnum["Textarea"] = "textarea";
-    FieldTypeEnum["DatePicker"] = "date-picker";
-    FieldTypeEnum["DateRange"] = "date-range";
-    FieldTypeEnum["SingleSelect"] = "single-select";
-    FieldTypeEnum["TreeSelect"] = "tree-select";
-    FieldTypeEnum["MultiSelect"] = "multi-select";
-    FieldTypeEnum["SingleFileUpload"] = "single-file-upload";
-    FieldTypeEnum["MultiFileUpload"] = "multi-file-upload";
-    FieldTypeEnum["MultiImageUpload"] = "multi-image-upload";
-    FieldTypeEnum["AvatarUpload"] = "avatar-upload";
-    FieldTypeEnum["Checkbox"] = "checkbox";
-    FieldTypeEnum["Radio"] = "radio";
-    FieldTypeEnum["ReminderTypeRadio"] = "reminder-type-radio";
-    FieldTypeEnum["Switch"] = "switch";
-    FieldTypeEnum["Autocomplete"] = "autocomplete";
-})(FieldTypeEnum || (FieldTypeEnum = {}));
-
-var InputFieldTypeEnum;
-(function (InputFieldTypeEnum) {
-    InputFieldTypeEnum["Text"] = "text";
-    InputFieldTypeEnum["Email"] = "email";
-    InputFieldTypeEnum["Password"] = "password";
-    InputFieldTypeEnum["Number"] = "number";
-})(InputFieldTypeEnum || (InputFieldTypeEnum = {}));
-
-var DateFieldTypeEnum;
-(function (DateFieldTypeEnum) {
-    DateFieldTypeEnum["Picker"] = "picker";
-    DateFieldTypeEnum["Range"] = "range";
-})(DateFieldTypeEnum || (DateFieldTypeEnum = {}));
-
-var SelectFieldTypeEnum;
-(function (SelectFieldTypeEnum) {
-    SelectFieldTypeEnum["Single"] = "single";
-    SelectFieldTypeEnum["Multi"] = "multi";
-})(SelectFieldTypeEnum || (SelectFieldTypeEnum = {}));
-
-var UploadFieldTypeEnum;
-(function (UploadFieldTypeEnum) {
-    UploadFieldTypeEnum["SingleFile"] = "single-file";
-    UploadFieldTypeEnum["MultiFile"] = "multi-file";
-    UploadFieldTypeEnum["Avatar"] = "avatar";
-})(UploadFieldTypeEnum || (UploadFieldTypeEnum = {}));
-
-/**
- * FIELD_TYPES là readonly ['input', 'select', 'checkbox',...]
- */
-const FIELD_TYPES = [
-    'input-text',
-    'input-password',
-    'textarea',
-    'date-picker',
-    'date-range',
-    'single-select',
-    'tree-select',
-    'multi-select',
-    'single-file-upload',
-    'multi-file-upload',
-    'multi-image-upload',
-    'avatar-upload',
-    'checkbox',
-    'radio',
-    'reminder-type-radio',
-    'switch',
-    'autocomplete',
-];
-
-/**
- * FIELD_TYPES là readonly ['input', 'select', 'checkbox',...]
- */
-const INPUT_FIELD_TYPES = ['text', 'email', 'password', 'number'];
-
 /**
- * FIELD_TYPES là readonly ['single', 'multi', 'tree',...]
+ * Abstract class chung cho Field.
  */
-const SELECT_FIELD_TYPES = ['single', 'multi', 'tree'];
-const DEFAULT_BIND_LABEL = 'name';
-const DEFAULT_BIND_VALUE = 'code';
-
-// Loại date field.
-const DATE_FIELD_TYPES = ['picker', 'range'];
-// Các pattern dùng để check định dạng date.
-const FORMAT_DATE_PATTERNS = {
-    YYYY_MM_DD: /^(\d{4})([-\/])(0[1-9]|1[0-2])\2(0[1-9]|[12]\d|3[01])$/,
-    DD_MM_YYYY: /^(0[1-9]|[12]\d|3[01])([-\/])(0[1-9]|1[0-2])\2(\d{4})$/,
-    MM_DD_YYYY: /^(0[1-9]|1[0-2])([-\/])(0[1-9]|[12]\d|3[01])\2(\d{4})$/,
-    MM_DD_YYYY_HMS: /^(0[1-9]|1[0-2])([-\/])(0[1-9]|[12]\d|3[01])\2(\d{4})\s([01]\d|2[0-3]):([0-5]\d):([0-5]\d)$/,
-};
-
-// Chuyển đổi đối tượng Date thành string có format DDMMYYYY.
-const formatDateToDDMMYYYY = (date, separator = '-') => {
-    const dd = String(date.getDate()).padStart(2, '0');
-    const mm = String(date.getMonth() + 1).padStart(2, '0');
-    const yyyy = date.getFullYear();
-    return `${dd}${separator}${mm}${separator}${yyyy}`;
-};
-// Chuyển đổi đối tượng Date thành string có format DDMMYYYY.
-const formatDateToYYYYMMDD = (date, separator = '-') => {
-    const dd = String(date.getDate()).padStart(2, '0');
-    const mm = String(date.getMonth() + 1).padStart(2, '0');
-    const yyyy = date.getFullYear();
-    return `${yyyy}${separator}${mm}${separator}${dd}`;
-};
-// Chuyển đổi string ở các dạng: YYYY-MM-DD, DD-MM-YYYY, MM-DD-YYYY đến Date, nếu sẵn là Date thì mặc định không đổi.
-const normalizeToDate = (input) => {
-    if (!input)
-        return null;
-    if (input instanceof Date && !isNaN(input.getTime()))
-        return input;
-    if (typeof input !== 'string')
-        return null;
-    const inputTrimed = input.trim();
-    let match;
-    let year, month, day;
-    let hour = 0, minute = 0, second = 0;
-    if ((match = inputTrimed.match(FORMAT_DATE_PATTERNS.YYYY_MM_DD))) {
-        year = +match[1];
-        month = +match[3] - 1;
-        day = +match[4];
-    }
-    else if ((match = inputTrimed.match(FORMAT_DATE_PATTERNS.DD_MM_YYYY))) {
-        day = +match[1];
-        month = +match[3] - 1;
-        year = +match[4];
-    }
-    else if ((match = inputTrimed.match(FORMAT_DATE_PATTERNS.MM_DD_YYYY))) {
-        month = +match[1] - 1;
-        day = +match[3];
-        year = +match[4];
-    }
-    else if ((match = inputTrimed.match(FORMAT_DATE_PATTERNS.MM_DD_YYYY_HMS))) {
-        month = +match[1] - 1;
-        day = +match[3];
-        year = +match[4];
-        hour = +match[5];
-        minute = +match[6];
-        second = +match[7];
+class BaseField {
+    constructor(init) {
+        // Thứ tự hiển thị của field
+        this.seqNum = 0;
+        if (!init?.key || !init?.label) {
+            throw new Error('key, label, and type are required');
+        }
+        /**
+         * Gán giá trị cho các props cần giá trị mặc định ở BaseField.
+         */
+        this.id = uuidGenerator();
+        this.required = false;
+        this.grid = { xs: 24 };
+        this.labelGrid = { xs: 24 };
+        this.controlGrid = { xs: 24 };
+        this.labelAlign = 'left';
+        this.isHidden = false;
+        this.isDisabled = false;
+        this.isParent = false;
+        this.allowSetValue = [FormModeEnum.Add, FormModeEnum.Edit, FormModeEnum.View];
+        this.viewMode = ViewModeEnum.form;
+        this.enableFieldChange = false;
+        Object.assign(this, init);
     }
-    else {
-        console.warn('Sai định dạng chuỗi date');
-        return null;
+    // Tạo các validate chung cho các props ở abstract. this khi gọi trong class con sẽ đại diện cho đối tượng tạo từ class đó.
+    getCommonValidators() {
+        const validators = [];
+        if (this.required)
+            validators.push(Validators.required);
+        return validators;
     }
-    const date = new Date(year, month, day, hour, minute, second);
-    if (date.getFullYear() === year &&
-        date.getMonth() === month &&
-        date.getDate() === day &&
-        date.getHours() === hour &&
-        date.getMinutes() === minute &&
-        date.getSeconds() === second) {
-        return date;
+    // Tạo các validate custom chung cho các props ở abstract. this khi gọi trong class con sẽ đại diện cho đối tượng tạo từ class đó.
+    getCustomValidators() {
+        const validators = [];
+        if (this.matchField)
+            validators.push(matchFieldsValidator(this.matchField));
+        return validators;
     }
-    console.warn('Ngày hoặc giờ không hợp lệ');
-    return null;
-};
-const normalizeToDate1 = (input) => {
-    if (input) {
-        if (input instanceof Date && !isNaN(input.getTime()))
-            return input;
-        if (typeof input !== 'string')
-            return null;
-        const inputTrimed = String(input).trim();
-        let match;
-        let year, month, day;
-        if ((match = inputTrimed.match(FORMAT_DATE_PATTERNS.YYYY_MM_DD))) {
-            year = +match[1];
-            month = +match[3] - 1;
-            day = +match[4];
-        }
-        else if ((match = inputTrimed.match(FORMAT_DATE_PATTERNS.DD_MM_YYYY))) {
-            day = +match[1];
-            month = +match[3] - 1;
-            year = +match[4];
-        }
-        else if ((match = inputTrimed.match(FORMAT_DATE_PATTERNS.MM_DD_YYYY))) {
-            month = +match[1] - 1;
-            day = +match[3];
-            year = +match[4];
-        }
-        else {
-            console.warn('Sai định dạng chuỗi date');
-            return null;
-        }
-        const date = new Date(year, month, day); // Validate: kiểm tra lại giá trị date (28/29/30/31 hợp lệ)
-        if (date.getFullYear() === year && date.getMonth() === month && date.getDate() === day) {
-            return date;
+    getErrorMessage(errorKey, errorValue, allFields) {
+        if (errorKey === CommonValidaterEnum.Required) {
+            return `${this.label || 'Trường này'} là bắt buộc`;
         }
-        else {
-            console.warn('Ngày đưa vào không hợp lệ');
-            return null;
+        if (errorKey === CustomValidaterEnum.MatchField) {
+            const matchKey = this.matchField;
+            const targetLabel = allFields.find(f => f.key === matchKey)?.label || matchKey;
+            return `${this.label} không khớp với ${targetLabel}`;
         }
+        return '';
     }
-    return null;
-};
-// Tạo danh sách năm chạy ngược từ hiện tại đến năm chỉ định.
-const generateYearsDesc = (from) => {
-    const currentYear = new Date().getFullYear();
-    const years = [];
-    for (let year = currentYear; year >= from; year--) {
-        years.push(year);
-    }
-    return years;
-};
-// Tạo danh sách năm chạy từ năm chỉ định đến năm hiện tại.
-const generateYearsAsc = (from) => {
-    const currentYear = new Date().getFullYear();
-    const years = [];
-    for (let year = from; year <= currentYear; year++) {
-        years.push(year);
-    }
-    return years;
-};
-
-const DEFAULT_DATE_PICKER_VALUE = '';
-/**
- * Interface của Date type là Picker.
- */
-class DatePickerField extends BaseDateField {
-    constructor(init) {
-        super(init);
-        /**
-         * Gán giá trị cho các props cần giá trị mặc định ở Date picker.
-         */
-        this.type = FieldTypeEnum.DatePicker;
-        this.value = DEFAULT_DATE_PICKER_VALUE;
-        this.initialValue = DEFAULT_DATE_PICKER_VALUE;
-        this.outputAs = DatePickerOutputValueTypeEnum.String;
-        Object.assign(this, init);
-    }
-    getDefaultValue() {
-        return DEFAULT_DATE_PICKER_VALUE;
-    }
-    toFormValue(modelValue) {
-        const value = modelValue;
-        if (!value)
-            return null;
-        return normalizeToDate(value);
+}
+
+// Dữ liệu sau khi đã tiến hành xử lý gom nhóm từ fields và groups.
+class GroupedFields {
+    constructor(init) {
+        this.noGroup = [];
+        this.grouped = [];
+        Object.assign(this, init);
     }
 }
-
-const DEFAULT_DATE_RANGE_VALUE = [];
-/**
- * Interface của Date type là Range.
- */
-class DateRangeField extends BaseDateField {
+// Đại diện cho 1 group.
+class FieldGroup {
     constructor(init) {
-        super(init);
-        /**
-         * Gán giá trị cho các props cần giá trị mặc định ở Date range.
-         */
-        this.type = FieldTypeEnum.DateRange;
-        this.value = DEFAULT_DATE_RANGE_VALUE;
-        this.initialValue = DEFAULT_DATE_RANGE_VALUE;
-        this.outputAs = DateRangeOutputValueTypeEnum.StringArray;
+        this.isActive = false;
+        this.showArrow = true;
+        this.disabled = false;
+        this.required = false;
         Object.assign(this, init);
     }
-    getDefaultValue() {
-        return DEFAULT_DATE_RANGE_VALUE;
-    }
-    toFormValue(modelValue) {
-        let value = modelValue;
-        if (typeof value === 'string') {
-            value = value.split(',').map(dateStr => dateStr.trim());
-        }
-        let dateRange = [];
-        if (value?.length === 2) {
-            const startDate = normalizeToDate(value[0]);
-            const endDate = normalizeToDate(value[1]);
-            if (startDate && endDate)
-                dateRange = [startDate, endDate];
-        }
-        return dateRange;
-    }
 }
 
 // Các patterns regex thường dùng trong ứng dụng
@@ -680,6 +646,51 @@ const resolvePattern = (pattern) => {
     }
 };
 
+const getDefaultPatternErrorMessage = (label, pattern) => {
+    let finalErrorMessage = '';
+    const resolvePatternResult = resolvePattern(pattern);
+    // if (resolvePatternResult?.type === 'unknown') {
+    //     return finalErrorMessage; // Không phải pattern hợp lệ
+    // }
+    if (resolvePatternResult.type === 'regexObject') {
+        finalErrorMessage = `${label || 'Trường này'} không hợp lệ!`;
+    }
+    if (resolvePatternResult.type === 'regexKey') {
+        const patternMess = PATTERN_ERROR_MESSAGES?.[pattern] ?? '';
+        finalErrorMessage = `${label || 'Trường này'} không hợp lệ! ${patternMess.replace(/%s/g, () => label)}`;
+    }
+    return finalErrorMessage;
+};
+const getDefaultMinLengthErrorMessage = (label, errorValue) => {
+    return `${label || 'Trường này'} cần tối thiểu ${errorValue.requiredLength} ký tự`;
+};
+const getDefaultMaxLengthErrorMessage = (label, errorValue) => {
+    return `${label || 'Trường này'} cần đât thiểu ${errorValue.requiredLength} ký tự`;
+};
+const getDefaultAcptMimeTypesErrorMessage = (typeString) => {
+    return `Tập tin tải lên không được hỗ trợ. Vui lòng tải các tập tin có định dạng ${typeString}`;
+};
+const getDefaultMaxSizeInMBErrorMessage = (maxSizeInMB) => {
+    return `Kích thước tập tin tải lên không được phép vượt quá ${maxSizeInMB} MB`;
+};
+const getLeadingSpaceErrorMessage = (label) => {
+    return `${label || 'Trường này'} không được bắt đầu bằng khoảng trắng`;
+};
+
+// Dạng control.
+var ControlTypeEnum;
+(function (ControlTypeEnum) {
+    ControlTypeEnum["Input"] = "input";
+    ControlTypeEnum["Textarea"] = "textarea";
+    ControlTypeEnum["Select"] = "select";
+    ControlTypeEnum["Checkbox"] = "checkbox";
+    ControlTypeEnum["Radio"] = "radio";
+    ControlTypeEnum["Date"] = "date";
+    ControlTypeEnum["Upload"] = "upload";
+    ControlTypeEnum["Switch"] = "switch";
+    ControlTypeEnum["Autocomplete"] = "autocomplete";
+})(ControlTypeEnum || (ControlTypeEnum = {}));
+
 const DEFAULT_INPUT_VALUE = '';
 /**
  * Interface base chung cho Các dạng Input Field.
@@ -745,6 +756,55 @@ class InputBaseField extends BaseField {
     }
 }
 
+// Dạng field cụ thể.
+var FieldTypeEnum;
+(function (FieldTypeEnum) {
+    FieldTypeEnum["InputText"] = "input-text";
+    FieldTypeEnum["InputPassword"] = "input-password";
+    FieldTypeEnum["Textarea"] = "textarea";
+    FieldTypeEnum["DatePicker"] = "date-picker";
+    FieldTypeEnum["DateRange"] = "date-range";
+    FieldTypeEnum["SingleSelect"] = "single-select";
+    FieldTypeEnum["TreeSelect"] = "tree-select";
+    FieldTypeEnum["MultiSelect"] = "multi-select";
+    FieldTypeEnum["SingleFileUpload"] = "single-file-upload";
+    FieldTypeEnum["MultiFileUpload"] = "multi-file-upload";
+    FieldTypeEnum["MultiImageUpload"] = "multi-image-upload";
+    FieldTypeEnum["AvatarUpload"] = "avatar-upload";
+    FieldTypeEnum["Checkbox"] = "checkbox";
+    FieldTypeEnum["Radio"] = "radio";
+    FieldTypeEnum["ReminderTypeRadio"] = "reminder-type-radio";
+    FieldTypeEnum["Switch"] = "switch";
+    FieldTypeEnum["Autocomplete"] = "autocomplete";
+})(FieldTypeEnum || (FieldTypeEnum = {}));
+
+var InputFieldTypeEnum;
+(function (InputFieldTypeEnum) {
+    InputFieldTypeEnum["Text"] = "text";
+    InputFieldTypeEnum["Email"] = "email";
+    InputFieldTypeEnum["Password"] = "password";
+    InputFieldTypeEnum["Number"] = "number";
+})(InputFieldTypeEnum || (InputFieldTypeEnum = {}));
+
+var DateFieldTypeEnum;
+(function (DateFieldTypeEnum) {
+    DateFieldTypeEnum["Picker"] = "picker";
+    DateFieldTypeEnum["Range"] = "range";
+})(DateFieldTypeEnum || (DateFieldTypeEnum = {}));
+
+var SelectFieldTypeEnum;
+(function (SelectFieldTypeEnum) {
+    SelectFieldTypeEnum["Single"] = "single";
+    SelectFieldTypeEnum["Multi"] = "multi";
+})(SelectFieldTypeEnum || (SelectFieldTypeEnum = {}));
+
+var UploadFieldTypeEnum;
+(function (UploadFieldTypeEnum) {
+    UploadFieldTypeEnum["SingleFile"] = "single-file";
+    UploadFieldTypeEnum["MultiFile"] = "multi-file";
+    UploadFieldTypeEnum["Avatar"] = "avatar";
+})(UploadFieldTypeEnum || (UploadFieldTypeEnum = {}));
+
 /**
  * Interface của Input Field type là Text.
  */
@@ -795,122 +855,105 @@ class InputPasswordField extends InputBaseField {
     }
 }
 
-/**
- * Interface base chung cho Các dạng Input Field.
- */
-class SelectBaseField extends BaseField {
-    /**
-     * Props validation chung cho các dạng Select.
-     */
-    // ................. Chưa có .................
-    constructor(init) {
-        super(init);
-        /**
-         * Gán giá trị cho các props cần giá trị mặc định ở Select.
-         */
-        this.controlType = ControlTypeEnum.Select;
-        this.bindLabel = DEFAULT_BIND_LABEL;
-        this.bindValue = DEFAULT_BIND_VALUE;
-        this.matchSelectWidth = true;
-        this.outputAs = SelectOutputValueTypeEnum.Object;
-        this.dependsOn = [];
-        this.dependType = DependTypeEnum.All;
-        this.suffixes = [];
-        this.optionsToPrepend = [];
-        this.optionsToAppend = [];
-        this.options = [];
-        this.exceptOptions = [];
-        Object.assign(this, init);
-    }
-    // Mảng ValidatorFn các validation chung được hỗ trợ sẵn bởi Reactive form của angular cho Select.
-    getCommonSelectValidators() {
-        const validators = this.getCommonValidators();
-        return validators;
+const buildForm = (fields, mode, model) => {
+    const groupObj = {};
+    // console.log("model", model);
+    for (const field of fields) {
+        // Loại bỏ nếu quyết định ẩn field đi.
+        if (field.isHidden)
+            continue;
+        // Nếu là dạng InputPasswordField nhưng ở mode edit và view thì không được dùng.
+        if (field instanceof InputPasswordField &&
+            (mode === FormModeEnum.Edit || mode === FormModeEnum.View))
+            continue;
+        const fieldKey = field?.key;
+        // field.value = field.allowSetValue ? (model?.[fieldKey] || field.value) : null;
+        if (field.allowSetValue) {
+            field.value = field.getDefaultValue();
+            field.modelValue = null;
+            if (model?.[fieldKey]) {
+                field.value = field.toFormValue(model[fieldKey]);
+                field.modelValue = model[fieldKey];
+            }
+            field.initialValue = field.value;
+        }
+        //  console.log("e", field.value );
+        // field.value = field.allowSetValue ? field.toFormValue(model?.[fieldKey] | field.getDefaultValue()) : field.getDefaultValue();
+        const control = field.toFormControl();
+        control.reset(field.value);
+        if (field.isDisabled) {
+            //console.log(field.key, 'dfdfdfdf');
+            control?.disable();
+        }
+        groupObj[fieldKey] = control;
     }
-    // Mảng ValidatorFn các custom validation có thể dùng cho Select.
-    getCustomSelectValidators() {
-        const validators = this.getCustomValidators();
-        return validators;
+    return new FormGroup(groupObj);
+};
+// Tạo placeholder mặc định cho các dạng Input, Textarea.
+const createPlaceholder = (field) => {
+    const placeholder = field?.placeholder;
+    if (placeholder)
+        return placeholder;
+    const label = field?.label;
+    if (label)
+        return `Nhập ${label?.toLowerCase()}`;
+    return `Nhập ${field.key?.toLowerCase()}`;
+};
+// Tạo placeholder mặc định cho các dạng Select.
+const createSelectPlaceholder = (field) => {
+    const placeholder = field?.placeholder;
+    if (placeholder)
+        return placeholder;
+    const label = field?.label;
+    if (label) {
+        const isSingleSelect = field?.type === FieldTypeEnum.SingleSelect;
+        return `Chọn ${isSingleSelect ? '' : 'các'} ${label?.toLowerCase()}`;
     }
-    // Tạo Form Control cho Input Field.
-    toFormControl() {
-        const commonValidators = this.getCommonSelectValidators();
-        const customValidators = this.getCustomSelectValidators();
-        return new FormControl(this.value ?? '', [...commonValidators, ...customValidators]);
-    }
-    getErrorMessage(errorKey, errorValue, allFields) {
-        return super.getErrorMessage(errorKey, errorValue, allFields);
-    }
-}
-
-const DEFAULT_MULTI_SELECT_VALUE = [];
-/**
- * Interface của Select Field type là dạng Multi.
- */
-class MultiSelectField extends SelectBaseField {
-    constructor(init) {
-        super(init);
-        /**
-         * Gán giá trị cho các props cần giá trị mặc định ở Multi Select.
-         */
-        this.type = FieldTypeEnum.MultiSelect;
-        this.value = DEFAULT_MULTI_SELECT_VALUE;
-        this.initialValue = DEFAULT_MULTI_SELECT_VALUE;
-        this.maxTagCount = 53;
-        this.maxMultipleCount = Infinity;
-        Object.assign(this, init);
-    }
-    getDefaultValue() {
-        return DEFAULT_MULTI_SELECT_VALUE;
-    }
-    toFormValue(modelValue) {
-        const value = modelValue;
-        const optionsValue = value.map((val) => {
-            if (typeof val === 'object') {
-                let transformVal = val?.[this.bindValue] ?? '';
-                return transformVal;
-            }
-            return val;
-        });
-        return optionsValue;
-    }
-}
+    return `Nhập ${field.key?.toLowerCase()}`;
+};
 
-const DEFAULT_SINGLE_SELECT_VALUE = null;
-/**
- * Interface của Select Field type là dạng Single.
- */
-class SingleSelectField extends SelectBaseField {
-    constructor(init) {
-        super(init);
-        /**
-         * Gán giá trị cho các props cần giá trị mặc định ở Single Select.
-         */
-        this.type = FieldTypeEnum.SingleSelect;
-        this.value = DEFAULT_SINGLE_SELECT_VALUE;
-        this.initialValue = DEFAULT_SINGLE_SELECT_VALUE;
-        Object.assign(this, init);
-    }
-    getDefaultValue() {
-        return DEFAULT_SINGLE_SELECT_VALUE;
-    }
-    toFormValue(modelValue) {
-        if (!modelValue)
-            return null;
-        const value = modelValue;
-        if (typeof value === 'object') {
-            const valueFromObj = value?.[this.bindValue];
-            const typeOfValueFromObj = typeof valueFromObj;
-            if (typeOfValueFromObj !== 'object')
-                return String(valueFromObj);
-            else {
-                console.warn('Từ bindValue nhưng đối tượng vẫn là dạng object');
-                return '';
-            }
-        }
-        return String(value);
-    }
-}
+const isInputTextField = (field) => {
+    return field.controlType === ControlTypeEnum.Input && field.type === FieldTypeEnum.InputText;
+};
+const isInputPasswordField = (field) => {
+    return field.controlType === ControlTypeEnum.Input && field.type === FieldTypeEnum.InputPassword;
+};
+const isSingleSelectField = (field) => {
+    return field.controlType === ControlTypeEnum.Select && field.type === FieldTypeEnum.SingleSelect;
+};
+const isMultiSelectField = (field) => {
+    return field.controlType === ControlTypeEnum.Select && field.type === FieldTypeEnum.MultiSelect;
+};
+const isDatePickerField = (field) => {
+    return field.controlType === ControlTypeEnum.Date && field.type === FieldTypeEnum.DatePicker;
+};
+const isDateRangeField = (field) => {
+    return field.controlType === ControlTypeEnum.Date && field.type === FieldTypeEnum.DateRange;
+};
+const isSingleFileUploadField = (field) => {
+    return (field.controlType === ControlTypeEnum.Upload && field.type === FieldTypeEnum.SingleFileUpload);
+};
+const isMultiFileUploadField = (field) => {
+    return (field.controlType === ControlTypeEnum.Upload && field.type === FieldTypeEnum.MultiFileUpload);
+};
+const isAvatarUploadField = (field) => {
+    return field.controlType === ControlTypeEnum.Upload && field.type === FieldTypeEnum.AvatarUpload;
+};
+// Tạo FieldGroup render UI từ thông tin fields và groups truyền vào cho dynamic-form.
+const buildGroupedFields = (fields, groups = []) => {
+    const noGroup = fields.filter(field => !field?.groupCode || field?.groupCode.toLowerCase() === 'none');
+    const sortedGroups = [...groups].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+    const grouped = sortedGroups
+        .map(group => ({
+        group,
+        fields: fields.filter(field => field.groupCode?.toLowerCase() === group.code.toLowerCase()),
+    }))
+        .filter(groupedFields => groupedFields.fields.length > 0);
+    return new GroupedFields({
+        noGroup,
+        grouped,
+    });
+};
 
 const DEFAULT_TEXTAREA_VALUE = '';
 /**
@@ -977,2190 +1020,506 @@ class TextareaField extends BaseField {
 }
 
 /**
- * Interface base chung cho Các dạng Date.
+ * FIELD_TYPES là readonly ['single', 'multi', 'tree',...]
  */
-class BaseUploadField extends BaseField {
+const SELECT_FIELD_TYPES = ['single', 'multi', 'tree'];
+const DEFAULT_BIND_LABEL = 'name';
+const DEFAULT_BIND_VALUE = 'code';
+
+/**
+ * Interface base chung cho Các dạng Input Field.
+ */
+class SelectBaseField extends BaseField {
     /**
-     * Props validation chung cho các dạng Date.
+     * Props validation chung cho các dạng Select.
      */
+    // ................. Chưa có .................
     constructor(init) {
         super(init);
         /**
-         * Gán giá trị cho các props cần giá trị mặc định ở Date.
+         * Gán giá trị cho các props cần giá trị mặc định ở Select.
          */
-        this.controlType = ControlTypeEnum.Upload;
-        this.outputAs = UploadOutputValueTypeEnum.Object;
-        this.apiFileConfig = {
-            uploadUrl: '',
-            deleteUrl: '',
-        };
-        this.acceptedMimeTypes = DEFAULT_ACCEPTED_MIME_TYPES;
-        this.maxSizeInMB = 25;
-        this.showAcceptedExtensionGuide = true;
-        this.uploadTemp = true;
+        this.controlType = ControlTypeEnum.Select;
+        this.bindLabel = DEFAULT_BIND_LABEL;
+        this.bindValue = DEFAULT_BIND_VALUE;
+        this.matchSelectWidth = true;
+        this.outputAs = SelectOutputValueTypeEnum.Object;
+        this.dependsOn = [];
+        this.dependType = DependTypeEnum.All;
+        this.suffixes = [];
+        this.optionsToPrepend = [];
+        this.optionsToAppend = [];
+        this.options = [];
+        this.exceptOptions = [];
         Object.assign(this, init);
     }
-    // Mảng ValidatorFn các validation chung được hỗ trợ sẵn bởi angular cho Input Password.
-    getCustomBaseUploadValidators() {
+    // Mảng ValidatorFn các validation chung được hỗ trợ sẵn bởi Reactive form của angular cho Select.
+    getCommonSelectValidators() {
+        const validators = this.getCommonValidators();
+        return validators;
+    }
+    // Mảng ValidatorFn các custom validation có thể dùng cho Select.
+    getCustomSelectValidators() {
         const validators = this.getCustomValidators();
-        // Kiểm tra xem file tải lên có type nằm trong mảng acceptedMimeTypes đã chỉ định hay không.
-        if (this.acceptedMimeTypes?.length > 0)
-            validators.push(acceptedMimeTypesValidator(this.acceptedMimeTypes));
-        // Kiểm tra kích thước tối đa mà file tải lên được cho phép.
-        validators.push(maxFileSizeInMBValidator(this.maxSizeInMB));
         return validators;
     }
     // Tạo Form Control cho Input Field.
     toFormControl() {
-        const commonValidators = this.getCommonValidators();
-        const customValidators = this.getCustomBaseUploadValidators();
+        const commonValidators = this.getCommonSelectValidators();
+        const customValidators = this.getCustomSelectValidators();
         return new FormControl(this.value ?? '', [...commonValidators, ...customValidators]);
     }
     getErrorMessage(errorKey, errorValue, allFields) {
-        // Lấy error message mặc định của acceptedMimeTypes.
-        if (errorKey === CustomValidaterEnum.AcceptedMimiTypes) {
-            const typeString = getExtensions(this.acceptedMimeTypes).join(', ');
-            return getDefaultAcptMimeTypesErrorMessage(typeString);
-        }
-        // Lấy error message mặc định của maxSizeInMB.
-        if (errorKey === CustomValidaterEnum.MaxSizeInMB) {
-            return getDefaultMaxSizeInMBErrorMessage(this.maxSizeInMB);
-        }
         return super.getErrorMessage(errorKey, errorValue, allFields);
     }
 }
 
-const DEFAULT_AVATAR_UPLOAD_VALUE = '';
+const DEFAULT_SINGLE_SELECT_VALUE = null;
 /**
- * Interface của Avatar upload.
+ * Interface của Select Field type là dạng Single.
  */
-class AvatarUploadField extends BaseUploadField {
+class SingleSelectField extends SelectBaseField {
     constructor(init) {
         super(init);
         /**
-         * Gán giá trị cho các props cần giá trị mặc định ở Avatar upload.
+         * Gán giá trị cho các props cần giá trị mặc định ở Single Select.
          */
-        this.type = FieldTypeEnum.AvatarUpload;
-        this.value = DEFAULT_AVATAR_UPLOAD_VALUE;
-        this.acceptedMimeTypes = DEFAULT_ACCEPTED_IMAGE_MIME_TYPES;
-        this.initialValue = DEFAULT_AVATAR_UPLOAD_VALUE;
+        this.type = FieldTypeEnum.SingleSelect;
+        this.value = DEFAULT_SINGLE_SELECT_VALUE;
+        this.initialValue = DEFAULT_SINGLE_SELECT_VALUE;
         Object.assign(this, init);
     }
     getDefaultValue() {
-        return DEFAULT_AVATAR_UPLOAD_VALUE;
+        return DEFAULT_SINGLE_SELECT_VALUE;
     }
     toFormValue(modelValue) {
-        return String(modelValue);
+        if (!modelValue)
+            return null;
+        const value = modelValue;
+        if (typeof value === 'object') {
+            const valueFromObj = value?.[this.bindValue];
+            const typeOfValueFromObj = typeof valueFromObj;
+            if (typeOfValueFromObj !== 'object')
+                return String(valueFromObj);
+            else {
+                console.warn('Từ bindValue nhưng đối tượng vẫn là dạng object');
+                return '';
+            }
+        }
+        return String(value);
     }
 }
 
-const DEFAULT_MULTI_FILE_UPLOAD_VALUE = '';
+const DEFAULT_MULTI_SELECT_VALUE = [];
 /**
- * Interface của Multi file upload.
+ * Interface của Select Field type là dạng Multi.
  */
-class MultiFileUploadField extends BaseUploadField {
+class MultiSelectField extends SelectBaseField {
     constructor(init) {
         super(init);
         /**
-         * Gán giá trị cho các props cần giá trị mặc định ở Multi file upload.
+         * Gán giá trị cho các props cần giá trị mặc định ở Multi Select.
          */
-        this.type = FieldTypeEnum.MultiFileUpload;
-        this.value = DEFAULT_MULTI_FILE_UPLOAD_VALUE;
-        this.initialValue = DEFAULT_MULTI_FILE_UPLOAD_VALUE;
-        this.maxFileCount = 6;
+        this.type = FieldTypeEnum.MultiSelect;
+        this.value = DEFAULT_MULTI_SELECT_VALUE;
+        this.initialValue = DEFAULT_MULTI_SELECT_VALUE;
+        this.maxTagCount = 53;
+        this.maxMultipleCount = Infinity;
         Object.assign(this, init);
     }
     getDefaultValue() {
-        return DEFAULT_MULTI_FILE_UPLOAD_VALUE;
+        return DEFAULT_MULTI_SELECT_VALUE;
     }
     toFormValue(modelValue) {
-        return String(modelValue);
+        const value = modelValue;
+        const optionsValue = value.map((val) => {
+            if (typeof val === 'object') {
+                let transformVal = val?.[this.bindValue] ?? '';
+                return transformVal;
+            }
+            return val;
+        });
+        return optionsValue;
     }
 }
 
-const DEFAULT_MULTI_IMAGE_UPLOAD_VALUE = '';
 /**
- * Interface của Multi image upload.
+ * Interface base chung cho Các dạng Date.
  */
-class MultiImageUploadField extends BaseUploadField {
+class BaseDateField extends BaseField {
+    /**
+     * Props validation chung cho các dạng Date.
+     */
     constructor(init) {
         super(init);
         /**
-         * Gán giá trị cho các props cần giá trị mặc định ở Multi image upload.
+         * Gán giá trị cho các props cần giá trị mặc định ở Date.
          */
-        this.type = FieldTypeEnum.MultiImageUpload;
-        this.value = DEFAULT_MULTI_IMAGE_UPLOAD_VALUE;
-        this.initialValue = DEFAULT_MULTI_IMAGE_UPLOAD_VALUE;
-        this.maxFileCount = 6;
-        this.imageCardWidth = '108px';
-        this.imageCardHeight = '108px';
+        this.controlType = ControlTypeEnum.Date;
+        this.allowPastDates = true;
+        this.allowFutureDates = true;
+        this.format = 'dd-MM-yyyy';
+        // this.value = undefined;
         Object.assign(this, init);
     }
-    getDefaultValue() {
-        return DEFAULT_MULTI_IMAGE_UPLOAD_VALUE;
-    }
-    toFormValue(modelValue) {
-        return String(modelValue);
+    // Tạo Form Control cho Input Field.
+    toFormControl() {
+        const commonValidators = this.getCommonValidators();
+        const customValidators = this.getCustomValidators();
+        return new FormControl(this.value ?? '', [...commonValidators, ...customValidators]);
     }
 }
 
-const DEFAULT_SINGLE_FILE_UPLOAD_VALUE = '';
 /**
- * Interface của Single file upload. Đầu vào có thể là chuỗi JSON hoặc đối tượng File.
+ * FIELD_TYPES là readonly ['input', 'select', 'checkbox',...]
  */
-class SingleFileUploadField extends BaseUploadField {
-    constructor(init) {
-        super(init);
-        /**
-         * Gán giá trị cho các props cần giá trị mặc định ở Single file upload.
-         */
-        this.type = FieldTypeEnum.SingleFileUpload;
-        this.value = DEFAULT_SINGLE_FILE_UPLOAD_VALUE;
-        this.initialValue = DEFAULT_SINGLE_FILE_UPLOAD_VALUE;
-        this.suffixes = [];
-        Object.assign(this, init);
-    }
-    getDefaultValue() {
-        return DEFAULT_SINGLE_FILE_UPLOAD_VALUE;
-    }
-    toFormValue(modelValue) {
-        return String(modelValue);
-    }
-}
-
-// Sample extra.
-// InputText
-const inputTextExtra = {
-    form: {
-        formTypes: ['add'],
-        configs: {
-            add: {
-                key: 'name',
-                label: 'Tên nhiệm vụ đề xuất',
-                type: 'input-text',
-                controlType: 'input',
-                placeholder: 'Nhập tên nhiệm vụ đề xuất nào',
-                required: false,
-                grid: { xs: 12 },
-                labelGrid: { xs: 8 },
-                controlGrid: { xs: 16 },
-                isHidden: false,
-                isParent: false,
-                allowSetValue: ['add'],
-            },
-        },
-    },
-};
-// Input Password
-// SingleSelect Province
-// SingleSelect District
-// DatePicker
-// DateRange
-// SingleFileUpload
-// MultiFileUpload
-// Sample test ObjFields lấy từ API.
-const sampleObjFields = [
-    // Input Text
-    {
-        code: 'Name',
-        name: 'Tên nhiệm vụ',
-        nameEn: 'Name',
-        dataType: 'string',
-        allowShare: 1,
-        objClassCode: 'SciTaskProposal',
-        componentUI: 'InputText',
-        codeOnDb: 'tenNhiemVu',
-        seqNum: 3,
-        required: 3,
-        allowStatistic: 0,
-        preventEdit: 0,
-        validateRegex: 'ALPHA_DASH_VN',
-        extra: JSON.stringify(inputTextExtra),
-        id: '7902fd41-f7c7-47e3-86f4-29b59a97dae3',
-    },
-    // Input Password
-    // SingleSelect Province
-    // SingleSelect District
-    // DatePicker
-    // DateRange
-    // SingleFileUpload
-    // MultiFileUpload
-    // Field rác test k có cấu hình 1
-    // Field rác test k có cấu hình 2
-    // {
-    //   code: 'Code',
-    //   name: 'Mã đề xuất',
-    //   nameEn: 'Code',
-    //   dataType: 'string',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   componentUI: 'InputText',
-    //   codeOnDb: 'maDeXuat',
-    //   seqNum: 1,
-    //   required: 2,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   viewType: 'Basic',
-    //   id: '39d81def-6a34-4594-ab59-978233bea797',
-    // },
-    // {
-    //   code: 'Id',
-    //   name: 'Id',
-    //   nameEn: 'Id',
-    //   dataType: 'Guid',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   componentUI: 'TextView',
-    //   codeOnDb: 'id',
-    //   seqNum: 1,
-    //   required: 2,
-    //   allowStatistic: 0,
-    //   preventEdit: 1,
-    //   validateRegex: 'UUID',
-    //   viewType: 'Detail',
-    //   id: '0e460f53-76b0-4718-be0a-7e87c4a252a1',
-    // },
-    // {
-    //   code: 'ProposalName',
-    //   name: 'Tên đề xuất',
-    //   nameEn: 'ProposalName',
-    //   dataType: 'string',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   componentUI: 'InputText',
-    //   codeOnDb: 'tenDeXuat',
-    //   seqNum: 2,
-    //   required: 1,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   viewType: 'Detail',
-    //   id: '425739aa-0ab5-4524-8eec-1ccfaaf53ccc',
-    // },
-    // {
-    //   code: 'Name',
-    //   name: 'Tên nhiệm vụ',
-    //   nameEn: 'Name',
-    //   dataType: 'string',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   componentUI: 'InputText',
-    //   codeOnDb: 'tenNhiemVu',
-    //   seqNum: 3,
-    //   required: 3,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   validateRegex: 'ALPHA_DASH_VN',
-    //   extra:
-    //     '{"formField":{"displayMode":["add","edit","view"],"adding":{"seqNumber":1,"viewType":"taskInfo"},"editting":{"seqNumber":1,"viewType":"taskInfo"},"viewing":{"seqNumber":1,"section":"left","viewConfig":{"labelSpan":{"sm":24,"md":10},"formControlSpan":{"sm":24,"md":14}}}}}',
-    //   viewType: 'Basic',
-    //   id: '7902fd41-f7c7-47e3-86f4-29b59a97dae3',
-    // },
-    // {
-    //   code: 'Level',
-    //   name: 'Cấp nhiệm vụ đề xuất',
-    //   nameEn: 'Level',
-    //   dataType: 'ObjType',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   apiURL: '{MainApiURL}/CommonCats/ObjType/byTypeGroupCode/{ObjTypeGroupCode}',
-    //   componentUI: 'Combobox(SingleChoice)',
-    //   codeOnDb: 'cap',
-    //   seqNum: 4,
-    //   required: 3,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   extra:
-    //     '{"formField":{"displayMode":["add","edit"],"adding":{"seqNumber":2,"span":{"sm":24,"md":"12"},"viewType":"taskInfo"},"editting":{"seqNumber":2,"span":{"sm":24,"md":"12"},"viewType":"taskInfo"},"viewing":{"seqNumber":2,"section":"left","viewConfig":{"labelSpan":{"sm":24,"md":10},"formControlSpan":{"sm":24,"md":14}}}}}',
-    //   viewType: 'Detail',
-    //   objTypeGroupCode: 'RECOMMEND_TASK',
-    //   id: '03230f20-2c88-4c05-a990-8290d435ce31',
-    // },
-    // {
-    //   code: 'Program',
-    //   name: 'Chương trình mà nhiệm vụ trực thuộc',
-    //   nameEn: 'Program',
-    //   dataType: 'string',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   componentUI: 'InputText',
-    //   codeOnDb: 'chuongTrinh',
-    //   seqNum: 5,
-    //   required: 1,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   validateRegex: 'ALPHA_DASH_VN',
-    //   extra:
-    //     '{"formField":{"displayMode":["add","edit"],"adding":{"seqNumber":2,"span":{"sm":24,"md":"12"},"viewType":"taskInfo"},"editting":{"seqNumber":2,"span":{"sm":24,"md":"12"},"viewType":"taskInfo"},"viewing":{"seqNumber":2,"section":"left","viewConfig":{"labelSpan":{"sm":24,"md":10},"formControlSpan":{"sm":24,"md":14}}}}}',
-    //   viewType: 'Detail',
-    //   id: 'c03a9d28-ca43-44ca-a59c-fc54494f3c73',
-    // },
-    // {
-    //   code: 'ResearchField',
-    //   name: 'Lĩnh vực',
-    //   nameEn: 'ResearchField',
-    //   dataType: 'ObjType',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   apiURL: '{MainApiURL}/CommonCats/ObjType/byTypeGroupCode/{ObjTypeGroupCode}',
-    //   componentUI: 'Combobox(SingleChoice)',
-    //   codeOnDb: 'linhVucNghienCuu',
-    //   seqNum: 6,
-    //   required: 3,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   extra:
-    //     '{"formField":{"displayMode":["add","edit","view","filter"],"adding":{"seqNumber":2,"span":{"sm":24,"md":"12"},"viewType":"taskInfo"},"editting":{"seqNumber":2,"span":{"sm":24,"md":"12"},"viewType":"taskInfo"},"viewing":{"seqNumber":2,"section":"left","isShowBgInput":true,"inputBgColor":"#2E7D32","viewConfig":{"labelSpan":{"sm":24,"md":10},"formControlSpan":{"sm":24,"md":14}}},"filtering":{"codeField":"researchFieldCode","seqNumber":3,"required":false,"dataTypeCombobox":"single"}}}',
-    //   viewType: 'Detail',
-    //   objTypeGroupCode: 'RESEARCH_FIELD',
-    //   id: 'b5248535-fb73-486e-a980-24e8ada1993b',
-    // },
-    // {
-    //   code: 'Type',
-    //   name: 'Loại hình nhiệm vụ',
-    //   nameEn: 'Type',
-    //   dataType: 'ObjType',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   apiURL: '{MainApiURL}/CommonCats/ObjType/byTypeGroupCode/{ObjTypeGroupCode}',
-    //   componentUI: 'Combobox(SingleChoice)',
-    //   codeOnDb: 'loaiHinhNhiemVu',
-    //   seqNum: 7,
-    //   required: 3,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   extra:
-    //     '{"formField":{"displayMode":["add","edit","view","filter"],"adding":{"seqNumber":3,"span":{"sm":24,"md":"12"},"viewType":"taskInfo"},"editting":{"seqNumber":3,"span":{"sm":24,"md":"12"},"viewType":"taskInfo"},"viewing":{"seqNumber":3,"section":"left","viewConfig":{"labelSpan":{"sm":24,"md":10},"formControlSpan":{"sm":24,"md":14}}},"filtering":{"codeField":"typeCode","seqNumber":1,"required":false,"dataTypeCombobox": "single"}}}',
-    //   viewType: 'Detail',
-    //   objTypeGroupCode: 'TYPE_TASK',
-    //   id: 'f6793a1e-f451-4050-b751-aa3a5f86d862',
-    // },
-    // {
-    //   code: 'PlanningProposalYear',
-    //   name: 'Năm kế hoạch đề xuất',
-    //   nameEn: 'PlanningProposalYear',
-    //   dataType: 'int',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   componentUI: 'InputText',
-    //   codeOnDb: 'namKeHoachDeXuat',
-    //   seqNum: 8,
-    //   required: 1,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   viewType: 'Detail',
-    //   id: '90f48f9f-5d3d-43d0-bbac-1dd072a4ffd1',
-    // },
-    // {
-    //   code: 'ResearchObjective',
-    //   name: 'Mục tiêu của nhiệm vụ ',
-    //   nameEn: 'ResearchObjective',
-    //   dataType: 'string',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   componentUI: 'TextArea',
-    //   codeOnDb: 'mucTieu',
-    //   seqNum: 9,
-    //   required: 3,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   extra:
-    //     '{"formField":{"displayMode":["add","edit","view"],"adding":{"seqNumber":3,"viewType":"taskInfo"},"editting":{"seqNumber":3,"viewType":"taskInfo"},"viewing":{"seqNumber":1,"section":"bottom"}}}',
-    //   viewType: 'Detail',
-    //   id: 'ecc54ec4-ee0e-4b97-9c5b-2e06d25d6bf0',
-    // },
-    // {
-    //   code: 'ExpectedContent',
-    //   name: 'Dự kiến các nội dung cần thực hiện',
-    //   nameEn: 'ExpectedContent',
-    //   dataType: 'string',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   componentUI: 'InputText',
-    //   codeOnDb: 'duKienNoiDung',
-    //   seqNum: 10,
-    //   required: 1,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   viewType: 'Detail',
-    //   id: '180c8300-11da-41f4-8685-97d2e8885200',
-    // },
-    // {
-    //   code: 'ExpectedResultsAndIndicators',
-    //   name: 'Dự kiến kết quả chính và các chỉ tiêu cần đạt',
-    //   nameEn: 'ExpectedResultsAndIndicators',
-    //   dataType: 'string',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   componentUI: 'TextArea',
-    //   codeOnDb: 'duKienKetQuaVaChiTieu',
-    //   seqNum: 11,
-    //   required: 3,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   extra:
-    //     '{"formField":{"displayMode":["add","edit","view"],"adding":{"seqNumber":5,"viewType":"taskInfo"},"editting":{"seqNumber":5,"viewType":"taskInfo"},"viewing":{"seqNumber":2,"section":"bottom"}}}',
-    //   viewType: 'Detail',
-    //   id: '617af2b0-d4d8-4e41-b0cb-388c4fbd917a',
-    // },
-    // {
-    //   code: 'ExpectedApplicationPlan',
-    //   name: 'Dự kiến phương án ứng dụng hoặc sử dụng kết quả tạo ra',
-    //   nameEn: 'ExpectedApplicationPlan',
-    //   dataType: 'string',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   componentUI: 'TextArea',
-    //   codeOnDb: 'duKienPhuongAnUngDung',
-    //   seqNum: 12,
-    //   required: 3,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   extra:
-    //     '{"formField":{"displayMode":["add","edit","view"],"adding":{"seqNumber":6,"viewType":"taskInfo"},"editting":{"seqNumber":6,"viewType":"taskInfo"},"viewing":{"seqNumber":3,"section":"bottom"}}}',
-    //   viewType: 'Detail',
-    //   id: 'c89bb6c9-3dcf-4380-94f5-630baadb9b31',
-    // },
-    // {
-    //   code: 'EstimatedBudget',
-    //   name: 'Dự kiến kinh phí (đồng)',
-    //   nameEn: 'EstimatedBudget',
-    //   dataType: 'long',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   componentUI: 'InputText',
-    //   codeOnDb: 'duKienKinhPhi',
-    //   seqNum: 13,
-    //   required: 3,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   validateRegex: 'INTEGER',
-    //   extra:
-    //     '{"formField":{"displayMode":["add","edit","view"],"adding":{"seqNumber":7,"span":{"sm":24,"md":"12"},"viewType":"taskInfo","isCurrency":true},"editting":{"seqNumber":7,"span":{"sm":24,"md":"12"},"viewType":"taskInfo","isCurrency":true},"viewing":{"seqNumber":4,"section":"left","viewConfig":{"labelSpan":{"sm":24,"md":10},"formControlSpan":{"sm":24,"md":14}},"isCurrency":true}}}',
-    //   viewType: 'Detail',
-    //   id: 'a8072db6-0bd1-4352-8e30-326446989eef',
-    // },
-    // {
-    //   code: 'EstimatedDuration',
-    //   name: 'Dự kiến thời gian thực hiện (tháng)',
-    //   nameEn: 'EstimatedDuration',
-    //   dataType: 'int',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   componentUI: 'InputText',
-    //   codeOnDb: 'duKienThoiGianThucHien',
-    //   seqNum: 14,
-    //   required: 3,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   validateRegex: 'INTEGER',
-    //   extra:
-    //     '{"formField":{"displayMode":["add","edit","view"],"adding":{"seqNumber":8,"span":{"sm":24,"md":"12"},"viewType":"taskInfo"},"editting":{"seqNumber":8,"span":{"sm":24,"md":"12"},"viewType":"taskInfo"},"viewing":{"seqNumber":5,"section":"left","executionTime":"month","viewConfig":{"labelSpan":{"sm":24,"md":10},"formControlSpan":{"sm":24,"md":14}}}}}',
-    //   viewType: 'Detail',
-    //   id: 'f69bdf14-c555-4cf5-b793-1eba85a25701',
-    // },
-    // {
-    //   code: 'ProposalAttachment',
-    //   name: 'Văn bản đề xuất đính kèm (pdf)',
-    //   nameEn: 'ProposalAttachment',
-    //   dataType: 'string',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   componentUI: 'File',
-    //   codeOnDb: 'vanBanDeXuat',
-    //   seqNum: 15,
-    //   required: 3,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   extra:
-    //     '{"formField":{"displayMode":["add","edit","view"],"adding":{"title":"Văn bản đề xuất đính kèm (hỗ trợ tập tin dạng .pdf)","seqNumber":9,"span":{"sm":24,"md":"12"},"viewType":"taskInfo"},"editting":{"title":"Văn bản đề xuất đính kèm (hỗ trợ tập tin dạng .pdf)","seqNumber":9,"span":{"sm":24,"md":"12"},"viewType":"taskInfo"},"viewing":{"seqNumber":7,"section":"left","viewConfig":{"labelSpan":{"sm":24,"md":10},"formControlSpan":{"sm":24,"md":14}}}}}',
-    //   viewType: 'Detail',
-    //   id: '75596544-c7b1-40dd-ad24-deee21e8b8d1',
-    // },
-    // {
-    //   code: 'ProposalOrganizationName',
-    //   name: 'Tên đơn vị/cá nhân đề xuất',
-    //   nameEn: 'ProposalOrganizationName',
-    //   dataType: 'string',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   componentUI: 'InputText',
-    //   codeOnDb: 'tenToChucDeXuat',
-    //   seqNum: 16,
-    //   required: 3,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   validateRegex: 'ALPHA_DASH_VN',
-    //   extra:
-    //     '{"formField":{"displayMode":["add","edit","view"],"adding":{"seqNumber":2,"viewType":"taskOrgzIndivInfo"},"editting":{"seqNumber":2,"viewType":"taskOrgzIndivInfo"},"viewing":{"seqNumber":1,"section":"right"}}}',
-    //   viewType: 'Detail',
-    //   id: '9ba7ea0a-e1d3-4006-9a10-bba7b54f17e4',
-    // },
-    // {
-    //   code: 'ProposerName',
-    //   name: 'Tên cá nhân đề xuất',
-    //   nameEn: 'ProposerName',
-    //   dataType: 'string',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   componentUI: 'InputText',
-    //   codeOnDb: 'tenCaNhanDeXuat',
-    //   seqNum: 17,
-    //   required: 3,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   extra: '',
-    //   viewType: 'Detail',
-    //   id: 'cb2e752c-ed93-46f1-8cd8-75aeb399952b',
-    // },
-    // {
-    //   code: 'PhoneNumber',
-    //   name: 'Số điện thoại',
-    //   nameEn: 'PhoneNumber',
-    //   dataType: 'string',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   componentUI: 'InputText',
-    //   codeOnDb: 'soDienThoai',
-    //   seqNum: 18,
-    //   required: 1,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   validateRegex: 'PHONE_NUMBER',
-    //   extra:
-    //     '{"formField":{"displayMode":["add","edit","view"],"adding":{"seqNumber":4,"viewType":"taskOrgzIndivInfo","span":{"sm":24,"md":12}},"editting":{"seqNumber":4,"viewType":"taskOrgzIndivInfo","span":{"sm":24,"md":12}},"viewing":{"seqNumber":3,"section":"right"}}}',
-    //   viewType: 'Detail',
-    //   id: '06137a76-2793-42db-a0d1-2039e087b2ce',
-    // },
-    // {
-    //   code: 'Email',
-    //   name: 'Thư điện tử',
-    //   nameEn: 'Email',
-    //   dataType: 'string',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   componentUI: 'InputText',
-    //   codeOnDb: 'thuDienTu',
-    //   seqNum: 19,
-    //   required: 3,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   validateRegex: 'EMAIL',
-    //   extra:
-    //     '{"formField":{"displayMode":["add","edit","view"],"adding":{"seqNumber":3,"viewType":"taskOrgzIndivInfo","span":{"sm":24,"md":12}},"editting":{"seqNumber":3,"viewType":"taskOrgzIndivInfo","span":{"sm":24,"md":12}},"viewing":{"seqNumber":2,"section":"right"}}}',
-    //   viewType: 'Detail',
-    //   id: 'acef6046-1f41-48f2-b53a-c0ecebb42939',
-    // },
-    // {
-    //   code: 'Address',
-    //   name: 'Địa chỉ liên hệ',
-    //   nameEn: 'Address',
-    //   dataType: 'string',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   componentUI: 'TextArea',
-    //   codeOnDb: 'diaChi',
-    //   seqNum: 20,
-    //   required: 1,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   extra:
-    //     '{"formField":{"displayMode":["add","edit","view"],"adding":{"seqNumber":4,"viewType":"taskOrgzIndivInfo"},"editting":{"seqNumber":4,"viewType":"taskOrgzIndivInfo"},"viewing":{"type":"InputText","seqNumber":3,"section":"right"}}}',
-    //   viewType: 'Detail',
-    //   id: 'faef0e51-f288-424e-9e72-50ed155313a5',
-    // },
-    // {
-    //   code: 'ProposalSource',
-    //   name: 'Nguồn đề xuất',
-    //   nameEn: 'ProposalSource',
-    //   dataType: 'ObjType',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   apiURL: '{MainApiURL}/CommonCats/ObjType/byTypeGroupCode/{ObjTypeGroupCode}',
-    //   componentUI: 'Radiobox',
-    //   codeOnDb: 'nguonDeXuat',
-    //   seqNum: 21,
-    //   required: 3,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   extra:
-    //     '{"formField":{"displayMode":["add","edit","filter"],"adding":{"seqNumber":1,"viewType":"taskOrgzIndivInfo"},"editting":{"seqNumber":1,"viewType":"taskOrgzIndivInfo"},"filtering":{"codeField":"proposalSourceCode","seqNumber":2,"type":"Dropdown","required":false,"dataTypeCombobox": "single"}}}',
-    //   viewType: 'Detail',
-    //   objTypeGroupCode: 'PROPOSAL_SOURCE',
-    //   id: '6dea381c-368f-4423-83fb-957df68b176d',
-    // },
-    // {
-    //   code: 'ProposalStatus',
-    //   name: 'Trạng thái',
-    //   nameEn: 'ProposalStatus',
-    //   dataType: 'ObjType',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   apiURL: '{MainApiURL}/CommonCats/ObjType/byTypeGroupCode/{ObjTypeGroupCode}',
-    //   componentUI: 'Combobox(SingleChoice)',
-    //   codeOnDb: 'trangThaiDeXuat',
-    //   seqNum: 22,
-    //   required: 2,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   extra:
-    //     '{"formField":{"displayMode":["view","filter"],"viewing":{"seqNumber":6,"section":"left","isShowBgInput":true,"viewConfig":{"labelSpan":{"sm":24,"md":10},"formControlSpan":{"sm":24,"md":14}}},"filtering":{"codeField":"proposalStatusCode","seqNumber":4,"dataTypeCombobox":"single"}}}',
-    //   viewType: 'Detail',
-    //   objTypeGroupCode: 'PROPOSAL_STATUS',
-    //   id: 'b77dcf37-880b-48f9-acfb-09b983df4a0d',
-    // },
-    // {
-    //   code: 'ApplicationStartDate',
-    //   name: 'Ngày bắt đầu mở ứng tuyển cho đề xuất ',
-    //   nameEn: 'ApplicationStartDate',
-    //   dataType: 'Date',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   componentUI: 'Calendar(Date)',
-    //   codeOnDb: 'ngayBatDauUngTuyen',
-    //   seqNum: 23,
-    //   required: 3,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   extra:
-    //     '{"formField":{"displayMode":["edit","view"],"editting":{"title":"Thời gian bắt đầu","allowFutureDates":true,"seqNumber":1,"span":{"sm":24,"md":12},"section":"approval"},"viewing":{"title":"Thời gian bắt đầu","seqNumber":1,"section":"application"}}}',
-    //   viewType: 'Detail',
-    //   id: '790d2aee-4fb2-456f-8fd0-8cd5e0296a57',
-    // },
-    // {
-    //   code: 'ApplicationEndDate',
-    //   name: 'Ngày kết thúc ứng tuyển cho đề xuất ',
-    //   nameEn: 'ApplicationEndDate',
-    //   dataType: 'Date',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   componentUI: 'Calendar(Date)',
-    //   codeOnDb: 'ngayKetThucUngTuyen',
-    //   seqNum: 24,
-    //   required: 3,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   extra:
-    //     '{"formField":{"displayMode":["edit","view"],"editting":{"title":"Thời gian kết thúc","allowFutureDates":true,"seqNumber":1,"span":{"sm":24,"md":12},"section":"approval"},"viewing":{"title":"Thời gian kết thúc","seqNumber":2,"section":"application"}}}',
-    //   viewType: 'Detail',
-    //   id: '95822a49-2883-4ddb-a6ff-a3c8fc84f3bf',
-    // },
-    // {
-    //   code: 'ApprovalAttachment',
-    //   name: 'Văn bản giao nhiệm vụ - ứng tuyển  được duyệt làm ',
-    //   nameEn: 'ApprovalAttachment',
-    //   dataType: 'string',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   componentUI: 'InputText',
-    //   codeOnDb: 'vanBanGiaoNhiemVu',
-    //   seqNum: 25,
-    //   required: 3,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   viewType: 'Detail',
-    //   id: 'fa00b65d-ebfb-49f9-8da2-09cd44138b79',
-    // },
-    // {
-    //   code: 'ApprovalDuration',
-    //   name: 'thời gian thức hiện duyệt',
-    //   nameEn: 'ApprovalDuration',
-    //   dataType: 'int',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   codeOnDb: 'thoiGianThucHienDuyet',
-    //   seqNum: 26,
-    //   required: 0,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   viewType: 'Detail',
-    //   id: '54477413-ec20-43d8-8f9e-6e73205b86ad',
-    // },
-    // {
-    //   code: 'ApprovalTotalBudget',
-    //   name: 'Tổng kinh phí cần thiết được duyệt với văn bản giao nhiệm vụ ',
-    //   nameEn: 'ApprovalTotalBudget',
-    //   dataType: 'long',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   codeOnDb: 'tongKinhPhiCanThietDuyet',
-    //   seqNum: 27,
-    //   required: 0,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   viewType: 'Detail',
-    //   id: 'f9a6c1a6-780e-4e9c-87ac-41a7dfbf37df',
-    // },
-    // {
-    //   code: 'ApprovalGovermentBudget',
-    //   name: 'Kinh phí từ Ngân sách nhà nước được duyệt với văn bản giao nhiệm vụ ',
-    //   nameEn: 'ApprovalGovermentBudget',
-    //   dataType: 'long',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   codeOnDb: 'kinhPhiTuNSNNDuyet',
-    //   seqNum: 28,
-    //   required: 0,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   viewType: 'Detail',
-    //   id: '37690b42-c4f7-40bf-ae4a-c42f10735409',
-    // },
-    // {
-    //   code: 'ApprovalNonGovermentBudget',
-    //   name: 'Kinh phí từ các nguồn ngoài ngân sách nhà nước được duyệt với văn bản giao nhiệm vụ ',
-    //   nameEn: 'ApprovalNonGovermentBudget',
-    //   dataType: 'long',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   codeOnDb: 'kinhPhiTuNgoaiNSNNDuyet',
-    //   seqNum: 29,
-    //   required: 0,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   viewType: 'Detail',
-    //   id: 'f9cf4aa3-6593-4b2d-88ca-1513069ce57f',
-    // },
-    // {
-    //   code: 'ApprovalContractStateBudget',
-    //   name: 'Kinh phí Ngân sách nhà nước khoán được duyệt với văn bản giao nhiệm vụ ',
-    //   nameEn: 'ApprovalContractStateBudget',
-    //   dataType: 'long',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   codeOnDb: 'kinhPhiNSNNKhoanDuyet',
-    //   seqNum: 30,
-    //   required: 0,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   viewType: 'Detail',
-    //   id: '9c0aeb4b-b6db-460e-8c01-7bc728535e7a',
-    // },
-    // {
-    //   code: 'ApprovalNonContractStateBudget',
-    //   name: 'Kinh phí Ngân sách nhà nước không khoán được duyệt với văn bản giao nhiệm vụ ',
-    //   nameEn: 'ApprovalNonContractStateBudget',
-    //   dataType: 'long',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   codeOnDb: 'kinhPhiNSNNKhongKhoanDuyet',
-    //   seqNum: 31,
-    //   required: 0,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   viewType: 'Detail',
-    //   id: 'c5cf6569-306a-4ede-ace6-5b9212003a0c',
-    // },
-    // {
-    //   code: 'ApprovalImplementationMethod',
-    //   name: 'Phương thức thực hiện',
-    //   nameEn: 'ApprovalImplementationMethod',
-    //   dataType: 'ObjType',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   codeOnDb: 'phuongThucThucHienDuyet',
-    //   seqNum: 32,
-    //   required: 1,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   viewType: 'Detail',
-    //   id: 'cf73d6e1-581d-4228-b016-6557466ed61a',
-    // },
-    // {
-    //   code: 'UpdatedById',
-    //   name: 'Mã người cập nhật trang thái hiện tại của nhiệm vụ',
-    //   nameEn: 'UpdatedById',
-    //   dataType: 'Guid',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   apiURL: '1',
-    //   codeOnDb: 'maNguoiCapNhat',
-    //   seqNum: 33,
-    //   required: 2,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   viewType: 'Detail',
-    //   id: '8c8de675-f6fa-4dd7-b706-39ea7408a12d',
-    // },
-    // {
-    //   code: 'UpdatedBy',
-    //   name: 'Người cập nhật trang thái hiện tại của nhiệm vụ',
-    //   nameEn: 'UpdatedBy',
-    //   dataType: 'string',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   apiURL: '1',
-    //   codeOnDb: 'nguoiCapNhat',
-    //   seqNum: 34,
-    //   required: 2,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   viewType: 'Detail',
-    //   id: 'f09197be-09c3-43e2-b2a0-b535be2643f0',
-    // },
-    // {
-    //   code: 'CreatedAt',
-    //   name: 'Thời gian tạo',
-    //   nameEn: 'CreatedAt',
-    //   dataType: 'DateTime',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   componentUI: 'Calendar(Date)',
-    //   codeOnDb: 'createdAt',
-    //   seqNum: 35,
-    //   required: 2,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   extra:
-    //     '{"formField":{"displayMode":["filter"],"filtering":{"seqNumber":5,"type":"DateRange"}}}',
-    //   viewType: 'Detail',
-    //   id: '8b425192-574b-4df3-8b9a-c28bcd47bdc7',
-    // },
-    // {
-    //   code: 'UpdatedAt',
-    //   name: 'Thời gian cập nhật',
-    //   nameEn: 'UpdatedAt',
-    //   dataType: 'DateTime',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   componentUI: 'TextView',
-    //   codeOnDb: 'updatedAt',
-    //   seqNum: 36,
-    //   required: 0,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   viewType: 'Detail',
-    //   id: '004a60a1-0b66-4d0b-acb0-eb76d57f49f1',
-    // },
-    // {
-    //   code: 'ApprovalNumber',
-    //   name: 'Số quyết định giao nhiệm vụ',
-    //   nameEn: 'ApprovalNumber',
-    //   dataType: 'string',
-    //   allowShare: 1,
-    //   objClassCode: 'SciTaskProposal',
-    //   componentUI: 'InputText',
-    //   codeOnDb: 'soQuyetDinhGiaoNhiemVu',
-    //   seqNum: 37,
-    //   required: 1,
-    //   allowStatistic: 0,
-    //   preventEdit: 0,
-    //   viewType: 'Detail',
-    //   id: '4000def5-2820-4d20-a624-9fc91834487e',
-    // },
-];
-// Sample test mảng fields json đầu vào cho tham số @Input() fields.
-const sampleFields = [
-    // new MultiImageUploadField({
-    //   key: 'images',
-    //   label: 'Hình ảnh kèm theo',
-    //   required: true,
-    //   maxSizeInMB: 62,
-    //   imageCardWidth: '208px'
-    // }),
-    // new SingleSelectField({
-    //   key: 'role',
-    //   label: 'Vai trò',
-    //   bindLabel: 'name',
-    //   bindValue: 'code',
-    //   required: true,
-    //   // outputAs: 'single',
-    //   suffixes: [
-    //     new Suffix({
-    //       key: 'test',
-    //       visibleOn: ['add', 'edit', 'view']
-    //     }),
-    //     new Suffix({
-    //       key: 'edit',
-    //     }),
-    //   ],
-    //   transformLabel: (option: Record<string, unknown>) => {
-    //     const { name, code } = option;
-    //     if (name && code) return `${name} - ${code}`;
-    //     return '';
-    //   },
-    //   apiConfig: {
-    //     baseUrl: 'https://quyhoachxaydung.hanam.gov.vn/gdci/system/Role',
-    //   },
-    //   options: [
-    //     { name: 'Quản trị viên', code: 'admin' },
-    //     { name: 'Người vận hành', code: 'operator' },
-    //     { name: 'Người dân', code: 'anonymous' },
-    //   ],
-    //   errorMessages: {
-    //     [CommonValidaterEnum.Required]: 'Bắt buộc nè hẹ hẹ',
-    //   },
-    // }),
-    // new SingleSelectField({
-    //   key: 'province',
-    //   label: 'Tỉnh/Thành phố',
-    //   required: true,
-    //   outputAs: 'single',
-    //   transformLabel: (option: Record<string, unknown>) => {
-    //     const { name, code } = option;
-    //     if (name && code) return `${name} - ${code}`;
-    //     return '';
-    //   },
-    //   apiConfig: {
-    //     baseUrl: 'https://quyhoachxaydung.hanam.gov.vn/gdci/main/CommonCats/Province',
-    //   },
-    //   isParent: true,
-    // }),
-    // new SingleSelectField({
-    //   key: 'district',
-    //   label: 'Quận/Huyện',
-    //   required: false,
-    //   transformLabel: (option: Record<string, unknown>) => {
-    //     const { name, code } = option;
-    //     if (name && code) return `${name} - ${code}`;
-    //     return '';
-    //   },
-    //   apiConfig: {
-    //     baseUrl: 'https://quyhoachxaydung.hanam.gov.vn/gdci/main/CommonCats/District',
-    //   },
-    //   isParent: true,
-    //   dependsOn: [
-    //     {
-    //       fieldKey: 'province',
-    //       paramKey: 'provinceCode',
-    //     },
-    //   ],
-    // }),
-    // new SingleSelectField({
-    //   key: 'ward',
-    //   label: 'Phường/Xã',
-    //   required: false,
-    //   transformLabel: (option: Record<string, unknown>) => {
-    //     const { name, code } = option;
-    //     if (name && code) return `${name} - ${code}`;
-    //     return '';
-    //   },
-    //   apiConfig: {
-    //     baseUrl: 'https://quyhoachxaydung.hanam.gov.vn/gdci/main/CommonCats/Ward',
-    //   },
-    //   dependsOn: [
-    //     {
-    //       fieldKey: 'district',
-    //       paramKey: 'districtCode',
-    //     },
-    //   ],
-    // }),
-    // new MultiSelectField({
-    //   key: 'multiRole',
-    //   label: 'Nhiều vai trò',
-    //   bindLabel: 'name',
-    //   bindValue: 'code',
-    //   outputAs: 'single',
-    //   required: true,
-    //   isDisabled: false,
-    //   transformLabel: (option: Record<string, unknown>) => {
-    //     const { name, code } = option;
-    //     if (name && code) return `${name} - ${code}`;
-    //     return '';
-    //   },
-    //   apiConfig: {
-    //     baseUrl: `${environment.GDCI_SYSTEM_URL}CommonCats/Position`,
-    //   },
-    //   errorMessages: {
-    //     [CommonValidaterEnum.Required]: 'Bắt buộc nè hẹ hẹ',
-    //   },
-    //   suffixes: [
-    //     new Suffix({
-    //       key: 'test',
-    //       visibleOn: ['add', 'edit'],
-    //     }),
-    //     new Suffix({
-    //       key: 'edit',
-    //     }),
-    //   ],
-    // }),
-    // new InputTextField({
-    //   key: 'username',
-    //   label: 'Tên tài khoản',
-    //   value: '',
-    //   required: true,
-    //   minLength: 1,
-    //   isDisabled: false,
-    //   suffixes: [
-    //     new Suffix({
-    //       key: 'view',
-    //       visibleOn: ['view']
-    //     }),
-    //     new Suffix({
-    //       key: 'edit',
-    //     }),
-    //   ],
-    //   errorMessages: {
-    //     // [CommonValidaterEnum.Required]: 'Bắt buộc nè hẹ hẹ',
-    //     // [CommonValidaterEnum.MinLength]: 'Tối thiểu nè hẹ hẹ',
-    //   },
-    //   pattern: 'alphaDashVN',
-    //   // grid: { xs: 12 },
-    //   // labelGrid: { xs: 8 },
-    //   // controlGrid: { xs: 16 }
-    // }),
-    // new InputPasswordField({
-    //   key: 'password',
-    //   label: 'Mật khẩu',
-    //   value: '',
-    //   required: false,
-    //   matchField: 'confirmPassword',
-    //   errorMessages: {
-    //     // [CustomValidaterEnum.MatchField]: 'Mật khẩu không khớp',
-    //   },
-    //   // grid: { xs: 12 },
-    //   //        labelGrid: { xs: 8 },
-    //   // controlGrid: { xs: 16 }
-    // }),
-    // new InputPasswordField({
-    //   key: 'confirmPassword',
-    //   label: 'Xác nhận mật khẩu',
-    //   value: '',
-    //   required: false,
-    //   matchField: 'password',
-    //   errorMessages: {
-    //     // [CustomValidaterEnum.MatchField]: 'Mật khẩu không khớp',
-    //   },
-    //   // labelGrid: { xs: 16 },
-    //   // controlGrid: { xs: 8 }
-    // }),
-    // new TextareaField({
-    //   key: 'note',
-    //   label: 'Ghi chú',
-    //   value: '',
-    //   required: false,
-    //   minLength: 3,
-    //   maxLength: 128,
-    //   errorMessages: {
-    //     // [CommonValidaterEnum.Required]: 'Bắt buộc nè hẹ hẹ',
-    //     // [CommonValidaterEnum.MinLength]: 'Tối thiểu nè hẹ hẹ',
-    //   },
-    //   // grid: { xs: 12 },
-    //   // labelGrid: { xs: 8 },
-    //   // controlGrid: { xs: 16 }
-    // }),
-    // new DatePickerField({
-    //   key: 'date',
-    //   label: 'Ngày',
-    //   required: true,
-    //   allowPastDates: false,
-    //   allowFutureDates: true,
-    //   isDisabled: true
-    // }),
-    // new DateRangeField({
-    //   key: 'expectedTime',
-    //   label: 'Thời gian dự kiến',
-    //   required: true,
-    //   outputAs: 'date',
-    //   allowPastDates: false,
-    //   allowFutureDates: true,
-    //   isDisabled: true
-    // }),
-    // new SingleFileUploadField({
-    //   key: 'attachment',
-    //   label: 'Văn bản đính kèm',
-    //   // required: true,
-    //   acceptedMimeTypes: [APPLICATION_TYPES.pdf, IMAGE_TYPES.tif, IMAGE_TYPES.tiff],
-    //   maxSizeInMB: 100000,
-    //   required: true,
-    //   apiFileConfig: {
-    //     uploadUrl: DEFAULT_UPLOAD_TIFF_URL,
-    //     deleteUrl: DEFAULT_DELETE_URL,
-    //     perMimeTypeConfig: {
-    //       'image/tiff': {
-    //         uploadUrl: DEFAULT_UPLOAD_TIFF_URL,
-    //         buildFormData: (file, extraParams) => {
-    //           const fd = new FormData();
-    //           fd.append('File', file);
-    //           fd.append('SaveFile', String(true));
-    //           fd.append('BucketName', 'documents');
-    //           return fd;
-    //         },
-    //       },
-    //     },
-    //   },
-    // }),
-    new MultiFileUploadField({
-        key: 'pictures',
-        label: 'Những hình ảnh kèm theo',
-        // required: true,
-        // acceptedMimeTypes: [APPLICATION_TYPES.pdf],
-        maxSizeInMB: 2,
-        required: true,
-    }),
-    // new AvatarUploadField({
-    //   key: 'avatar',
-    //   label: 'Ảnh đại diện',
-    //   acceptedMimeTypes: [IMAGE_TYPES.jpeg, IMAGE_TYPES.jpg, IMAGE_TYPES.png],
-    //   required: false,
-    //   labelGrid: { xs: 4 },
-    //   controlGrid: { xs: 20 },
-    // }),
-];
-const sampleFields2 = [
-    new SingleSelectField({
-        key: 'role',
-        label: 'Vai trò',
-        bindLabel: 'name',
-        bindValue: 'code',
-        required: false,
-        outputAs: 'single',
-        transformLabel: (option) => {
-            const { name, code } = option;
-            if (name && code)
-                return `${name} - ${code}`;
-            return '';
-        },
-        apiConfig: {
-            baseUrl: 'https://quyhoachxaydung.hanam.gov.vn/gdci/system/Role',
-        },
-        options: [
-            { name: 'Quản trị viên', code: 'admin' },
-            { name: 'Người vận hành', code: 'operator' },
-            { name: 'Người dân', code: 'anonymous' },
-        ],
-        errorMessages: {
-            [CommonValidaterEnum.Required]: 'Bắt buộc nè hẹ hẹ',
-        },
-    }),
-    new SingleSelectField({
-        key: 'province',
-        label: 'Tỉnh/Thành phố',
-        required: true,
-        transformLabel: (option) => {
-            const { name, code } = option;
-            if (name && code)
-                return `${name} - ${code}`;
-            return '';
-        },
-        apiConfig: {
-            baseUrl: 'https://quyhoachxaydung.hanam.gov.vn/gdci/main/CommonCats/Province',
-        },
-        isParent: true,
-    }),
-    new SingleSelectField({
-        key: 'district',
-        label: 'Quận/Huyện',
-        required: false,
-        transformLabel: (option) => {
-            const { name, code } = option;
-            if (name && code)
-                return `${name} - ${code}`;
-            return '';
-        },
-        apiConfig: {
-            baseUrl: 'https://quyhoachxaydung.hanam.gov.vn/gdci/main/CommonCats/District',
-        },
-        isParent: true,
-        dependsOn: [
-            {
-                fieldKey: 'province',
-                paramKey: 'provinceCode',
-            },
-        ],
-    }),
-    new MultiSelectField({
-        key: 'multiRole',
-        label: 'Nhiều vai trò',
-        bindLabel: 'name',
-        bindValue: 'code',
-        outputAs: 'single',
-        required: true,
-        transformLabel: (option) => {
-            const { name, code } = option;
-            if (name && code)
-                return `${name} - ${code}`;
-            return '';
-        },
-        apiConfig: {
-            baseUrl: 'https://quyhoachxaydung.hanam.gov.vn/gdci/system/Role',
-        },
-        errorMessages: {
-            [CommonValidaterEnum.Required]: 'Bắt buộc nè hẹ hẹ',
-        },
-    }),
-    new InputTextField({
-        key: 'username',
-        label: 'Tên tài khoản',
-        value: '',
-        required: true,
-        minLength: 1,
-        errorMessages: {
-        // [CommonValidaterEnum.Required]: 'Bắt buộc nè hẹ hẹ',
-        // [CommonValidaterEnum.MinLength]: 'Tối thiểu nè hẹ hẹ',
-        },
-        pattern: 'alphaDashVN',
-        // grid: { xs: 12 },
-        // labelGrid: { xs: 8 },
-        // controlGrid: { xs: 16 }
-    }),
-    new TextareaField({
-        key: 'note',
-        label: 'Ghi chú',
-        value: '',
-        required: false,
-        minLength: 3,
-        maxLength: 128,
-        errorMessages: {
-        // [CommonValidaterEnum.Required]: 'Bắt buộc nè hẹ hẹ',
-        // [CommonValidaterEnum.MinLength]: 'Tối thiểu nè hẹ hẹ',
-        },
-        // grid: { xs: 12 },
-        // labelGrid: { xs: 8 },
-        // controlGrid: { xs: 16 }
-    }),
-    new DatePickerField({
-        key: 'date',
-        label: 'Ngày',
-        required: true,
-        allowPastDates: false,
-        allowFutureDates: true,
-    }),
-    new DateRangeField({
-        key: 'expectedTime',
-        label: 'Thời gian dự kiến',
-        required: true,
-        outputAs: 'string',
-        allowPastDates: false,
-        allowFutureDates: true,
-    }),
-    new SingleFileUploadField({
-        key: 'attachment',
-        label: 'Văn bản đính kèm',
-        // required: true,
-        acceptedMimeTypes: [APPLICATION_TYPES.pdf],
-        maxSizeInMB: 2,
-        required: true,
-    }),
-    new MultiFileUploadField({
-        key: 'documents',
-        label: 'Những hồ sơ đính kèm',
-        // required: true,
-        acceptedMimeTypes: [APPLICATION_TYPES.pdf],
-        maxSizeInMB: 2,
-        required: false,
-    }),
-];
-// Sample test model data 1.
-const sampleModel = {
-    province: { code: 35, name: 'Hà Name' },
-    username: 'ldquocccccccccc',
-    role: {
-        name: 'Quản trị viên',
-        code: 'ADMIN',
-    },
-    // role: 'ADMIN',
-    multiRole: [
-        {
-            name: 'Quản trị',
-            code: 'ADMIN',
-        },
-        {
-            name: 'Vận hành',
-            code: 'OPERATOR',
-        },
-    ],
-    note: 'Hãy nhớ những điều này:\n-Tôi là tôi.\n-Ai là tôi?\n-Sẽ ra sao nếu tôi tiến lên.\n-Hẹ hẹ.',
-    // note: 'hè hè\nhihihi\nfefefef',
-    // date: '08-01-2025',
-    // date: '30-08-2025',
-    // date: '2025-08-28',
-    date: new Date('2025-08-28'),
-    expectedTime: ['2025-08-28', new Date('2025-08-30')],
-    // attachment: [{
-    //   id: 'd3f549e0-a036-4b16-aa67-30444d23d795',
-    //   name: 'dummy.pdf',
-    //   path: '/dummy.pdf',
-    //   type: APPLICATION_TYPES.pdf,
-    //   size: 1800
-    // }],
-    // attachment:
-    //   '[{\"id\":\"1952e9ea-61c3-4b8d-abe2-4df238804458\",\"name\":\"Ho_Cubic_30L_Tong_Hop.pdf\",\"contentType\":\"application/pdf\",\"size\":28407,\"bucket\":\"caosuvn\",\"isDir\":false,\"createdAt\":\"2025-08-08\",\"updatedAt\":\"2025-08-08\",\"path\":\"/Ho_Cubic_30L_Tong_Hop.pdf\",\"isPublic\":true}]',
-    attachment: '[{"id":"8fe5f9b1-18aa-415d-a33e-b4a843b7cab1","name":"image.png","contentType":"image/png","size":77239,"bucket":"public","isDir":false,"createdAt":"2025-09-04","updatedAt":"2025-09-04","path":"/image.png","isPublic":true},{"id":"b8963fb1-e842-42ac-9fc4-1733a3b65dc5","name":"image (1).png","contentType":"image/png","size":79610,"bucket":"public","isDir":false,"createdAt":"2025-09-04","updatedAt":"2025-09-04","path":"/image (1).png","isPublic":true}]',
-    pictures: '[{\"id\":\"1952e9ea-61c3-4b8d-abe2-4df238803338\",\"name\":\"Ho_Cubic_30L_Tong_Hop.pdf\",\"contentType\":\"application/pdf\",\"size\":28407,\"bucket\":\"caosuvn\",\"isDir\":false,\"createdAt\":\"2025-08-08\",\"updatedAt\":\"2025-08-08\",\"path\":\"/Ho_Cubic_30L_Tong_Hop.pdf\",\"isPublic\":true},{\"id\":\"1952e9ea-61c3-4b8d-abe2-4df238804458\",\"name\":\"Ho_Cubic_35L_Tong_Hop.pdf\",\"contentType\":\"application/pdf\",\"size\":28407,\"bucket\":\"caosuvn\",\"isDir\":false,\"createdAt\":\"2025-08-08\",\"updatedAt\":\"2025-08-08\",\"path\":\"/Ho_Cubic_35L_Tong_Hop.pdf\",\"isPublic\":true}]',
-    // pictures: '[{"id":"d3f549e0-a036-4b16-aa67-30444d23d795","name":"dummy.pdf","path":"/dummy.pdf","contentType":"application/pdf","size":1800},{"id":"d3f549e0-a036-4b16-aa67-30444d23d795","name":"dummy.pdf","path":"/dummy.pdf","contentType":"application/pdf","size":1800},{"id":"d3f549e0-a036-4b16-aa67-30444d23d795","name":"dummy.pdf","path":"/dummy.pdf","contentType":"application/pdf","size":1800},{"id":"d3f549e0-a036-4b16-aa67-30444d23d795","name":"dummy.pdf","path":"/dummy.pdf","contentType":"application/pdf","size":1800},{"id":"d3f549e0-a036-4b16-aa67-30444d23d795","name":"dummy.pdf","path":"/dummy.pdf","contentType":"application/pdf","size":1800}]'
-};
-// Sample test model data 2.
-const sampleModel2 = {
-    images: '[{"id":"56062785-a619-41f7-8b64-ed648e57f934","name":"vrg_file_5141201818_104814_39-11_anh_bai_chinh_ml41ozadgy_ug51tjdtjb.jpg","contentType":"image/jpeg","size":176638,"bucket":"public","isDir":false,"createdAt":"2025-09-08","updatedAt":"2025-09-08","path":"/vrg_file_5141201818_104814_39-11_anh_bai_chinh_ml41ozadgy_ug51tjdtjb.jpg","isPublic":true},{"id":"79c62863-8241-4785-ac52-162a1d5347a6","name":"vrg_file_5409423468_coral-reef-fish-reef-fish-aquarium-wallpaper-preview.jpg","contentType":"image/jpeg","size":128651,"bucket":"public","isDir":false,"createdAt":"2025-09-08","updatedAt":"2025-09-08","path":"/vrg_file_5409423468_coral-reef-fish-reef-fish-aquarium-wallpaper-preview.jpg","isPublic":true},{"id":"973d2861-fe87-481f-9dc7-aeb7991516de","name":"vrg_file_8710772406_nemo_fi.jpg","contentType":"image/jpeg","size":19134,"bucket":"public","isDir":false,"createdAt":"2025-09-08","updatedAt":"2025-09-08","path":"/vrg_file_8710772406_nemo_fi.jpg","isPublic":true}]',
-    avatar: '[{"id":"55283e86-6d16-4f12-9d9b-fce1b928eae5","name":"104814_39-11_anh_bai_chinh_ml41ozadgy_ug51tjdtjb.jpg","contentType":"image/jpeg","size":176638,"bucket":"public","isDir":false,"createdAt":"2025-08-19","updatedAt":"2025-08-19","path":"/104814_39-11_anh_bai_chinh_ml41ozadgy_ug51tjdtjb.jpg","isPublic":true}]',
-    province: { code: 35, name: 'Hà Name' },
-    district: { code: 349, name: 'Duy tiên' },
-    username: 'dddddddddddddddddddddddd',
-    role: {
-        name: 'Vận hành',
-        code: 'OPERATOR',
-    },
-    // role: 'ADMIN',
-    multiRole: [
-        {
-            name: 'Quản trị',
-            code: 'ADMIN',
-        },
-        {
-            name: 'Vận hành',
-            code: 'OPERATOR',
-        },
-        {
-            name: 'Người dân',
-            code: 'ANONYMOUS',
-        },
-    ],
-    note: 'CCCCC',
-    // note: 'hè hè\nhihihi\nfefefef',
-    // date: '08-01-2025',
-    // date: '30-08-2025',
-    // date: '2025-08-28',
-    date: new Date('2025-08-30'),
-    expectedTime: ['2025-08-01', new Date('2025-08-02')],
-    // attachment: [{
-    //   id: 'd3f549e0-a036-4b16-aa67-30444d23d795',
-    //   name: 'dummy.pdf',
-    //   path: '/dummy.pdf',
-    //   type: APPLICATION_TYPES.pdf,
-    //   size: 1800
-    // }],
-    attachment: '[{"id":"8fe5f9b1-18aa-415d-a33e-b4a843b7cab1","name":"image.png","contentType":"image/png","size":77239,"bucket":"public","isDir":false,"createdAt":"2025-09-04","updatedAt":"2025-09-04","path":"/image.png","isPublic":true},{"id":"b8963fb1-e842-42ac-9fc4-1733a3b65dc5","name":"image (1).png","contentType":"image/png","size":79610,"bucket":"public","isDir":false,"createdAt":"2025-09-04","updatedAt":"2025-09-04","path":"/image (1).png","isPublic":true}]',
-    // attachment:
-    //   '[{\"id\":\"1952e9ea-61c3-4b8d-abe2-4df238804458\",\"name\":\"dumpleeeee.pdf\",\"contentType\":\"application/pdf\",\"size\":28407,\"bucket\":\"caosuvn\",\"isDir\":false,\"createdAt\":\"2025-08-08\",\"updatedAt\":\"2025-08-08\",\"path\":\"/Ho_Cubic_30L_Tong_Hop.pdf\",\"isPublic\":true}]',
-    pictures: '[{\"id\":\"1952e9ea-61c3-4b8d-abe2-4df238803338\",\"name\":\"Ho_Cubic_45L_Tong_Hop.pdf\",\"contentType\":\"application/pdf\",\"size\":28407,\"bucket\":\"caosuvn\",\"isDir\":false,\"createdAt\":\"2025-08-08\",\"updatedAt\":\"2025-08-08\",\"path\":\"/Ho_Cubic_30L_Tong_Hop.pdf\",\"isPublic\":true},{\"id\":\"1952e9ea-61c3-4b8d-abe2-4df238804458\",\"name\":\"Ho_Cubic_60L_Tong_Hop.pdf\",\"contentType\":\"application/pdf\",\"size\":28407,\"bucket\":\"caosuvn\",\"isDir\":false,\"createdAt\":\"2025-08-08\",\"updatedAt\":\"2025-08-08\",\"path\":\"/Ho_Cubic_35L_Tong_Hop.pdf\",\"isPublic\":true}]',
-    // pictures: '[{"id":"d3f549e0-a036-4b16-aa67-30444d23d795","name":"dummy.pdf","path":"/dummy.pdf","contentType":"application/pdf","size":1800},{"id":"d3f549e0-a036-4b16-aa67-30444d23d795","name":"dummy.pdf","path":"/dummy.pdf","contentType":"application/pdf","size":1800},{"id":"d3f549e0-a036-4b16-aa67-30444d23d795","name":"dummy.pdf","path":"/dummy.pdf","contentType":"application/pdf","size":1800},{"id":"d3f549e0-a036-4b16-aa67-30444d23d795","name":"dummy.pdf","path":"/dummy.pdf","contentType":"application/pdf","size":1800},{"id":"d3f549e0-a036-4b16-aa67-30444d23d795","name":"dummy.pdf","path":"/dummy.pdf","contentType":"application/pdf","size":1800}]'
-};
-//#region Multi Form
-const sampleMultiFormFieldsA = [
-    // ======== Input Text ========
-    new InputTextField({
-        key: 'usernameA',
-        label: 'Tên tài khoản A',
-        value: '',
-        required: true,
-        minLength: 2,
-        isDisabled: false,
-        errorMessages: {
-            [CommonValidaterEnum.Required]: 'Bắt buộc nha hẹ hẹ',
-            [CommonValidaterEnum.MinLength]: 'Tối thiểu là 2 nha hẹ hẹ',
-        },
-        pattern: 'alphaDashVN',
-        // grid: { xs: 12 },
-        // labelGrid: { xs: 8 },
-        // controlGrid: { xs: 16 },
-        //    suffixes: [
-        //   new Suffix({
-        //     key: 'view',
-        //     visibleOn: ['view'],
-        //   }),
-        //   new Suffix({
-        //     key: 'edit',
-        //   }),
-        // ],
-    }),
-    // ======== Input Text ========
-    // ======== Input Password ========
-    // new InputPasswordField({
-    //   key: 'passwordA',
-    //   label: 'Mật khẩu',
-    //   // value: '',
-    //   required: false,
-    //   matchField: 'confirmPasswordA',
-    //   errorMessages: {
-    //     [CustomValidaterEnum.MatchField]: 'Mật khẩu không khớp',
-    //   },
-    //   // grid: { xs: 12 },
-    //   //        labelGrid: { xs: 8 },
-    //   // controlGrid: { xs: 16 }
-    // }),
-    // new InputPasswordField({
-    //   key: 'confirmPasswordA',
-    //   label: 'Xác nhận mật khẩu',
-    //   // value: '',
-    //   required: false,
-    //   matchField: 'passwordA',
-    //   errorMessages: {
-    //     [CustomValidaterEnum.MatchField]: 'Xác nhận mật khẩu không khớp',
-    //   },
-    //   // labelGrid: { xs: 16 },
-    //   // controlGrid: { xs: 8 }
-    // }),
-    // ======== Input Password ========
-    // ======== Textarea ========
-    // new TextareaField({
-    //   key: 'noteA',
-    //   label: 'Ghi chú A',
-    //   value: '',
-    //   required: false,
-    //   minLength: 3,
-    //   maxLength: 128,
-    //   // grid: { xs: 12 },
-    //   // labelGrid: { xs: 8 },
-    //   // controlGrid: { xs: 16 }
-    // }),
-    // ======== Textarea ========
-    // ======== DATE PICKER ========
-    // new DatePickerField({
-    //   key: 'dateA',
-    //   label: 'Ngày A',
-    //   required: true,
-    //   allowPastDates: false,
-    //   allowFutureDates: true,
-    //   isDisabled: false,
-    // }),
-    // ======== DATE PICKER ========
-    // ======== DATE RANGE ========
-    // new DateRangeField({
-    //   key: 'expectedTimeA',
-    //   label: 'Thời gian dự kiến A',
-    //   required: true,
-    //   outputAs: 'date-array',
-    //   allowPastDates: false,
-    //   allowFutureDates: true,
-    //   isDisabled: false,
-    // }),
-    // ======== DATE RANGE ========
-    // ======== SINGLE SELECT ========
-    // new SingleSelectField({
-    //   key: 'roleA',
-    //   label: 'Vai trò A',
-    //   bindLabel: 'name',
-    //   bindValue: 'code',
-    //   required: true,
-    //   // outputAs: 'single',
-    //   transformLabel: (option: Record<string, unknown>) => {
-    //     const { name, code } = option;
-    //     if (name && code) return `${name} - ${code}`;
-    //     return '';
-    //   },
-    //   apiConfig: {
-    //     baseUrl: 'https://quyhoachxaydung.hanam.gov.vn/gdci/system/Role',
-    //   },
-    //   options: [
-    //     { name: 'Quản trị viên', code: 'admin' },
-    //     { name: 'Người vận hành', code: 'operator' },
-    //     { name: 'Người dân', code: 'anonymous' },
-    //   ],
-    // }),
-    // ======== SINGLE SELECT ========
-    // ======== MULTI SELECT ========
-    // new MultiSelectField({
-    //   key: 'multiRoleA',
-    //   label: 'Nhiều vai trò A',
-    //   bindLabel: 'name',
-    //   bindValue: 'code',
-    //   outputAs: 'single',
-    //   required: true,
-    //   isDisabled: false,
-    //   transformLabel: (option: Record<string, unknown>) => {
-    //     const { name, code } = option;
-    //     if (name && code) return `${name} - ${code}`;
-    //     return '';
-    //   },
-    //   apiConfig: {
-    //     baseUrl: `${environment.GDCI_SYSTEM_URL}CommonCats/Position`,
-    //   },
-    // }),
-    // ======== MULTI SELECT ========
-    // ======== SINGLE FILE UPLOAD ========
-    new SingleFileUploadField({
-        key: 'attachmentA',
-        label: 'Văn bản đính kèm A',
-        // required: true,
-        acceptedMimeTypes: [APPLICATION_TYPES.pdf, IMAGE_TYPES.tif, IMAGE_TYPES.tiff],
-        maxSizeInMB: 100000,
-        required: true,
-    }),
-    // ======== SINGLE FILE UPLOAD ========
-    // ======== MULTI FILE UPLOAD ========
-    new MultiFileUploadField({
-        key: 'picturesA',
-        label: 'Những hình ảnh kèm theo A',
-        acceptedMimeTypes: [APPLICATION_TYPES.pdf],
-        maxSizeInMB: 2,
-        required: false,
-    }),
-    // ======== MULTI FILE UPLOAD ========
-    // ======== MULTI IMAGE UPLOAD ========
-    new MultiImageUploadField({
-        key: 'imagesA',
-        label: 'Hình ảnh kèm theo A',
-        required: true,
-        maxSizeInMB: 62,
-        imageCardWidth: '208px',
-    }),
-    // ======== MULTI IMAGE UPLOAD ========
-    // ======== AVATAR UPLOAD ========
-    new AvatarUploadField({
-        key: 'avatarA',
-        label: 'Ảnh đại diện A',
-        acceptedMimeTypes: [IMAGE_TYPES.jpeg, IMAGE_TYPES.jpg, IMAGE_TYPES.png],
-        required: false,
-        labelGrid: { xs: 4 },
-        controlGrid: { xs: 20 },
-    }),
-    // ======== AVATAR UPLOAD ========
-];
-const sampleMultiFormFieldsB = [
-    // ======== Input Text ========
-    new InputTextField({
-        key: 'usernameB',
-        label: 'Tên tài khoản B',
-        value: '',
-        required: true,
-        minLength: 2,
-        isDisabled: false,
-        errorMessages: {
-            [CommonValidaterEnum.Required]: 'Bắt buộc nha hẹ hẹ',
-            [CommonValidaterEnum.MinLength]: 'Tối thiểu là 2 nha hẹ hẹ',
-        },
-        pattern: 'alphaDashVN',
-        // grid: { xs: 12 },
-        // labelGrid: { xs: 8 },
-        // controlGrid: { xs: 16 },
-        //    suffixes: [
-        //   new Suffix({
-        //     key: 'view',
-        //     visibleOn: ['view'],
-        //   }),
-        //   new Suffix({
-        //     key: 'edit',
-        //   }),
-        // ],
-    }),
-    // ======== Input Text ========
-    // ======== Input Password ========
-    // new InputPasswordField({
-    //   key: 'passwordB',
-    //   label: 'Mật khẩu',
-    //   // value: '',
-    //   required: false,
-    //   matchField: 'confirmPasswordB',
-    //   errorMessages: {
-    //     [CustomValidaterEnum.MatchField]: 'Mật khẩu không khớp',
-    //   },
-    //   // grid: { xs: 12 },
-    //   //        labelGrid: { xs: 8 },
-    //   // controlGrid: { xs: 16 }
-    // }),
-    // new InputPasswordField({
-    //   key: 'confirmPasswordB',
-    //   label: 'Xác nhận mật khẩu',
-    //   // value: '',
-    //   required: false,
-    //   matchField: 'passwordB',
-    //   errorMessages: {
-    //     [CustomValidaterEnum.MatchField]: 'Xác nhận mật khẩu không khớp',
-    //   },
-    //   // labelGrid: { xs: 16 },
-    //   // controlGrid: { xs: 8 }
-    // }),
-    // ======== Input Password ========
-    // ======== Textarea ========
-    // new TextareaField({
-    //   key: 'noteB',
-    //   label: 'Ghi chú B',
-    //   value: '',
-    //   required: false,
-    //   minLength: 3,
-    //   maxLength: 128,
-    //   // grid: { xs: 12 },
-    //   // labelGrid: { xs: 8 },
-    //   // controlGrid: { xs: 16 }
-    // }),
-    // ======== Textarea ========
-    // ======== DATE PICKER ========
-    // new DatePickerField({
-    //   key: 'dateB',
-    //   label: 'Ngày B',
-    //   required: true,
-    //   allowPastDates: false,
-    //   allowFutureDates: true,
-    //   isDisabled: false,
-    // }),
-    // ======== DATE PICKER ========
-    // ======== DATE RANGE ========
-    // new DateRangeField({
-    //   key: 'expectedTimeB',
-    //   label: 'Thời gian dự kiến B',
-    //   required: true,
-    //   outputAs: 'date-array',
-    //   allowPastDates: false,
-    //   allowFutureDates: true,
-    //   isDisabled: false,
-    // }),
-    // ======== DATE RANGE ========
-    // ======== SINGLE SELECT ========
-    // new SingleSelectField({
-    //   key: 'roleB',
-    //   label: 'Vai trò B',
-    //   bindLabel: 'name',
-    //   bindValue: 'code',
-    //   required: true,
-    //   // outputAs: 'single',
-    //   transformLabel: (option: Record<string, unknown>) => {
-    //     const { name, code } = option;
-    //     if (name && code) return `${name} - ${code}`;
-    //     return '';
-    //   },
-    //   apiConfig: {
-    //     baseUrl: 'https://quyhoachxaydung.hanam.gov.vn/gdci/system/Role',
-    //   },
-    //   options: [
-    //     { name: 'Quản trị viên', code: 'admin' },
-    //     { name: 'Người vận hành', code: 'operator' },
-    //     { name: 'Người dân', code: 'anonymous' },
-    //   ],
-    // }),
-    // ======== SINGLE SELECT ========
-    // ======== MULTI SELECT ========
-    // new MultiSelectField({
-    //   key: 'multiRoleB',
-    //   label: 'Nhiều vai trò B',
-    //   bindLabel: 'name',
-    //   bindValue: 'code',
-    //   outputAs: 'single',
-    //   required: true,
-    //   isDisabled: false,
-    //   transformLabel: (option: Record<string, unknown>) => {
-    //     const { name, code } = option;
-    //     if (name && code) return `${name} - ${code}`;
-    //     return '';
-    //   },
-    //   apiConfig: {
-    //     baseUrl: `${environment.GDCI_SYSTEM_URL}CommonCats/Position`,
-    //   },
-    // }),
-    // ======== MULTI SELECT ========
-    // ======== SINGLE FILE UPLOAD ========
-    new SingleFileUploadField({
-        key: 'attachmentB',
-        label: 'Văn bản đính kèm B',
-        // required: true,
-        acceptedMimeTypes: [APPLICATION_TYPES.pdf, IMAGE_TYPES.tif, IMAGE_TYPES.tiff],
-        maxSizeInMB: 100000,
-        required: true,
-    }),
-    // ======== SINGLE FILE UPLOAD ========
-    // ======== MULTI FILE UPLOAD ========
-    new MultiFileUploadField({
-        key: 'picturesB',
-        label: 'Những hình ảnh kèm theo B',
-        acceptedMimeTypes: [APPLICATION_TYPES.pdf],
-        maxSizeInMB: 2,
-        required: false,
-    }),
-    // ======== MULTI FILE UPLOAD ========
-    // ======== MULTI IMAGE UPLOAD ========
-    new MultiImageUploadField({
-        key: 'imagesB',
-        label: 'Hình ảnh kèm theo B',
-        required: true,
-        maxSizeInMB: 62,
-        imageCardWidth: '208px',
-    }),
-    // ======== MULTI IMAGE UPLOAD ========
-    // ======== AVATAR UPLOAD ========
-    new AvatarUploadField({
-        key: 'avatarB',
-        label: 'Ảnh đại diện B',
-        acceptedMimeTypes: [IMAGE_TYPES.jpeg, IMAGE_TYPES.jpg, IMAGE_TYPES.png],
-        required: false,
-        labelGrid: { xs: 4 },
-        controlGrid: { xs: 20 },
-    }),
-    // ======== AVATAR UPLOAD ========
-];
-const sampleMultiFormModelA = {
-    usernameA: 'Lương Văn Lào',
-};
-const sampleMultiFormModelB = {
-    usernameB: 'Đào Mai Tôn',
-};
-//#endregion Multi Form
-//#region MultiSelect depend on field has isParent
-const sampleMultiSelectDependOnParent = [
-    new MultiFileUploadField({
-        key: 'picturesB',
-        label: 'Những hình ảnh kèm theo B',
-        acceptedMimeTypes: [APPLICATION_TYPES.pdf, IMAGE_TYPES.png, IMAGE_TYPES.jpg],
-        maxSizeInMB: 1,
-        required: true,
-    }),
-    new SingleSelectField({
-        key: 'province',
-        label: 'Tỉnh/Thành phố',
-        required: true,
-        outputAs: 'single',
-        transformLabel: (option) => {
-            const { name, code } = option;
-            if (name && code)
-                return `${name} - ${code}`;
-            return '';
-        },
-        apiConfig: {
-            baseUrl: `http://mock-api.com/CommonCats/Province`,
-        },
-        isParent: true,
-    }),
-    new MultiSelectField({
-        key: 'ward',
-        label: 'Phường/Xã',
-        required: false,
-        transformLabel: (option) => {
-            const { name, code } = option;
-            if (name && code)
-                return `${name} - ${code}`;
-            return '';
-        },
-        apiConfig: {
-            baseUrl: `http://mock-api.com/CommonCats/Ward`,
-        },
-        dependsOn: [
-            {
-                fieldKey: 'province',
-                paramKey: 'provinceCode',
-            },
-        ],
-        // dependType: DependTypeEnum.All
-    }),
+const FIELD_TYPES = [
+    'input-text',
+    'input-password',
+    'textarea',
+    'date-picker',
+    'date-range',
+    'single-select',
+    'tree-select',
+    'multi-select',
+    'single-file-upload',
+    'multi-file-upload',
+    'multi-image-upload',
+    'avatar-upload',
+    'checkbox',
+    'radio',
+    'reminder-type-radio',
+    'switch',
+    'autocomplete',
 ];
-//#endregion MultiSelect depend on field has isParent
 
-const COMBINE_DEPEND_TYPES = ['skip', 'null', 'valid'];
+/**
+ * FIELD_TYPES là readonly ['input', 'select', 'checkbox',...]
+ */
+const INPUT_FIELD_TYPES = ['text', 'email', 'password', 'number'];
 
-// Format file size, đầu vào là Byte, và loại muốn format sang.
-const formatFileSize = (size, type) => {
-    let returnVal = 0;
-    switch (type) {
-        case 'KB':
-            returnVal = size / 1024;
-            break;
-        case 'MB':
-            returnVal = size / (1024 * 1024);
-            break;
-        case 'GB':
-            returnVal = size / (1024 * 1024 * 1024);
-            break;
-        case 'TB':
-            returnVal = size / (1024 * 1024 * 1024 * 1024);
-            break;
-        default:
-            returnVal = size;
-            break;
-    }
-    return returnVal;
+// Loại date field.
+const DATE_FIELD_TYPES = ['picker', 'range'];
+// Các pattern dùng để check định dạng date.
+const FORMAT_DATE_PATTERNS = {
+    YYYY_MM_DD: /^(\d{4})([-\/])(0[1-9]|1[0-2])\2(0[1-9]|[12]\d|3[01])$/,
+    DD_MM_YYYY: /^(0[1-9]|[12]\d|3[01])([-\/])(0[1-9]|1[0-2])\2(\d{4})$/,
+    MM_DD_YYYY: /^(0[1-9]|1[0-2])([-\/])(0[1-9]|[12]\d|3[01])\2(\d{4})$/,
+    MM_DD_YYYY_HMS: /^(0[1-9]|1[0-2])([-\/])(0[1-9]|[12]\d|3[01])\2(\d{4})\s([01]\d|2[0-3]):([0-5]\d):([0-5]\d)$/,
 };
-// Lấy extension. dựa vào các cấu hình mimeTypes sẵn.
-const getExtensions = (acptMimeTypes) => {
-    return acptMimeTypes.map(mime => `.${MIME_TYPES_TO_EXTENSION[mime] || mime}`);
+
+// Chuyển đổi đối tượng Date thành string có format DDMMYYYY.
+const formatDateToDDMMYYYY = (date, separator = '-') => {
+    const dd = String(date.getDate()).padStart(2, '0');
+    const mm = String(date.getMonth() + 1).padStart(2, '0');
+    const yyyy = date.getFullYear();
+    return `${dd}${separator}${mm}${separator}${yyyy}`;
 };
-// Tạo một file giả từ thông tin name, type và size.
-const createFakeFile = (name, type, size) => {
-    const buffer = new Uint8Array(size); // tạo buffer theo size, không crash nếu file có dung lượng lớn.
-    const blob = new Blob([buffer], { type });
-    return new File([blob], name, { type, lastModified: Date.now() });
+// Chuyển đổi đối tượng Date thành string có format DDMMYYYY.
+const formatDateToYYYYMMDD = (date, separator = '-') => {
+    const dd = String(date.getDate()).padStart(2, '0');
+    const mm = String(date.getMonth() + 1).padStart(2, '0');
+    const yyyy = date.getFullYear();
+    return `${yyyy}${separator}${mm}${separator}${dd}`;
 };
-
-// Kiểm tra tính hợp lệ của JSON string.
-const isValidJSON = (str) => {
-    try {
-        JSON.parse(str);
+// Chuyển đổi string ở các dạng: YYYY-MM-DD, DD-MM-YYYY, MM-DD-YYYY đến Date, nếu sẵn là Date thì mặc định không đổi.
+const normalizeToDate = (input) => {
+    if (!input)
+        return null;
+    if (input instanceof Date && !isNaN(input.getTime()))
+        return input;
+    if (typeof input !== 'string')
+        return null;
+    const inputTrimed = input.trim();
+    let match;
+    let year, month, day;
+    let hour = 0, minute = 0, second = 0;
+    if ((match = inputTrimed.match(FORMAT_DATE_PATTERNS.YYYY_MM_DD))) {
+        year = +match[1];
+        month = +match[3] - 1;
+        day = +match[4];
     }
-    catch (e) {
-        return false;
+    else if ((match = inputTrimed.match(FORMAT_DATE_PATTERNS.DD_MM_YYYY))) {
+        day = +match[1];
+        month = +match[3] - 1;
+        year = +match[4];
     }
-    return true;
-};
-// Tạo một chuỗi uuid.
-const uuidGenerator = () => {
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-        var r = (Math.random() * 16) | 0, v = c == 'x' ? r : (r & 0x3) | 0x8;
-        return v.toString(16);
-    });
-};
-const lowerCaseFirstChar = (str) => {
-    return str.charAt(0).toLowerCase() + str.slice(1);
-};
-const upperCaseFirstChar = (str) => {
-    return str.charAt(0).toUpperCase() + str.slice(1);
+    else if ((match = inputTrimed.match(FORMAT_DATE_PATTERNS.MM_DD_YYYY))) {
+        month = +match[1] - 1;
+        day = +match[3];
+        year = +match[4];
+    }
+    else if ((match = inputTrimed.match(FORMAT_DATE_PATTERNS.MM_DD_YYYY_HMS))) {
+        month = +match[1] - 1;
+        day = +match[3];
+        year = +match[4];
+        hour = +match[5];
+        minute = +match[6];
+        second = +match[7];
+    }
+    else {
+        console.warn('Sai định dạng chuỗi date');
+        return null;
+    }
+    const date = new Date(year, month, day, hour, minute, second);
+    if (date.getFullYear() === year &&
+        date.getMonth() === month &&
+        date.getDate() === day &&
+        date.getHours() === hour &&
+        date.getMinutes() === minute &&
+        date.getSeconds() === second) {
+        return date;
+    }
+    console.warn('Ngày hoặc giờ không hợp lệ');
+    return null;
 };
-const deepCopyArray = (array) => {
-    return array.map(item => {
-        if (Array.isArray(item)) {
-            return deepCopyArray(item); // Deep copy nếu phần tử là mảng lồng nhau
+const normalizeToDate1 = (input) => {
+    if (input) {
+        if (input instanceof Date && !isNaN(input.getTime()))
+            return input;
+        if (typeof input !== 'string')
+            return null;
+        const inputTrimed = String(input).trim();
+        let match;
+        let year, month, day;
+        if ((match = inputTrimed.match(FORMAT_DATE_PATTERNS.YYYY_MM_DD))) {
+            year = +match[1];
+            month = +match[3] - 1;
+            day = +match[4];
         }
-        else if (item && typeof item === 'object') {
-            return deepCopyObject(item); // Deep copy nếu phần tử là đối tượng
+        else if ((match = inputTrimed.match(FORMAT_DATE_PATTERNS.DD_MM_YYYY))) {
+            day = +match[1];
+            month = +match[3] - 1;
+            year = +match[4];
         }
-        return item; // Trả về giá trị gốc nếu không phải mảng hoặc đối tượng
-    });
-};
-const deepCopyObject = (obj) => {
-    return Object.fromEntries(Object.entries(obj).map(([key, value]) => {
-        if (Array.isArray(value)) {
-            return [key, deepCopyArray(value)]; // Deep copy nếu giá trị là mảng
+        else if ((match = inputTrimed.match(FORMAT_DATE_PATTERNS.MM_DD_YYYY))) {
+            month = +match[1] - 1;
+            day = +match[3];
+            year = +match[4];
         }
-        else if (value && typeof value === 'object') {
-            return [key, deepCopyObject(value)]; // Deep copy nếu giá trị là đối tượng
+        else {
+            console.warn('Sai định dạng chuỗi date');
+            return null;
         }
-        return [key, value]; // Trả về giá trị gốc
-    }));
-};
-
-// Không cho phép nhập khoảng trắng ở đầu chuỗi, nếu không nhập gì vẫn tính đúng.
-const noLeadingSpaceValidator = () => {
-    return (control) => {
-        const value = (control.value ?? '').toString();
-        if (!value)
-            return null; // Không required thì để trống là hợp lệ
-        return value[0] === ' ' ? { leadingSpace: true } : null;
-    };
-};
-// Không cho phép nhập toàn khoảng trắng.
-const noWhitespaceValidator = () => {
-    return (control) => {
-        const isWhitespace = (control.value || '').toString().trim().length === 0;
-        return isWhitespace ? { whitespace: true } : null;
-    };
-};
-// Bắt đầu với một kí tự được chỉ định.
-const startsWithValidator = (prefix) => {
-    return (control) => {
-        const value = control.value ?? '';
-        return value.startsWith(prefix) ? null : { startsWith: { requiredPrefix: prefix } };
-    };
-};
-// So sánh giá trị field A không được lớn hơn field B.
-const minMaxFieldValidator = (minKey, maxKey) => {
-    // group: AbstractControl sẽ đại diện cho FormGroup tức là cha bao hàm các field.
-    return (group) => {
-        const min = group.get(minKey)?.value;
-        const max = group.get(maxKey)?.value;
-        if (min != null && max != null && min > max) {
-            return { minMaxInvalid: true };
+        const date = new Date(year, month, day); // Validate: kiểm tra lại giá trị date (28/29/30/31 hợp lệ)
+        if (date.getFullYear() === year && date.getMonth() === month && date.getDate() === day) {
+            return date;
         }
-        return null;
-    };
-};
-// Match giữa hai field (ví dụ: password/confirmPassword,...).
-const matchFieldsValidator = (fieldToMatch) => {
-    return (control) => {
-        const parent = control.parent;
-        if (!parent)
-            return null;
-        const target = parent.get(fieldToMatch);
-        if (!target?.value)
+        else {
+            console.warn('Ngày đưa vào không hợp lệ');
             return null;
-        // Nếu đang validate chính nó (ví dụ: confirmPassword)
-        const isMismatch = control.value !== target.value;
-        // Nếu trước đó password (target) đang bị lỗi matchField nhưng giờ đã khớp
-        if (!isMismatch && target.hasError('matchField')) {
-            const errors = { ...target.errors };
-            delete errors['matchField'];
-            // Nếu không còn lỗi nào khác, set null
-            target.setErrors(Object.keys(errors).length ? errors : null);
         }
-        return isMismatch ? { matchField: true } : null;
-    };
-};
-// Async: Check if username is taken (simulate API).
-const asyncUsernameValidator = (takenUsernames) => {
-    return (control) => {
-        const value = control.value ?? '';
-        const isTaken = takenUsernames.includes(value);
-        return of(isTaken ? { usernameTaken: true } : null).pipe(delay(500));
-    };
-};
-// Không có ký tự đặc biệt.
-const noSpecialCharValidator = () => {
-    return (control) => {
-        const valid = /^[a-zA-Z0-9]*$/.test(control.value);
-        return valid ? null : { noSpecialChar: true };
-    };
-};
-// Username không được nằm trong blacklist.
-const usernameBlacklistValidator = (blacklist) => {
-    return (control) => {
-        return blacklist.includes(control.value) ? { blacklisted: true } : null;
-    };
-};
-// Có thuộc mimetypes từ mảng mimetypes được chỉ định hay không?
-const acceptedMimeTypesValidator = (acceptedMimeTypes) => {
-    return (control) => {
-        const value = control?.value;
-        if (value) {
-            let fileType = '';
-            if (value instanceof File) {
-                fileType = value.type;
-            }
-            if (isValidJSON(value)) {
-                const { contentType } = JSON.parse(value)[0] || {};
-                if (contentType)
-                    fileType = contentType;
-            }
-            if (fileType) {
-                if (!acceptedMimeTypes.includes(fileType)) {
-                    return {
-                        acceptedMimeTypes: {
-                            actualValue: fileType,
-                            requiredValue: `Nằm trong ${acceptedMimeTypes}`,
-                        },
-                    };
-                }
-            }
-        }
-        return null;
-    };
+    }
+    return null;
 };
-const maxFileSizeInMBValidator = (maxSizeInMB) => {
-    return (control) => {
-        const file = control?.value;
-        if (file) {
-            const fileSizeInMB = formatFileSize(file.size, FileSizeTypeEnum.MB);
-            if (fileSizeInMB > maxSizeInMB) {
-                return {
-                    maxSizeInMB: {
-                        actualValue: fileSizeInMB,
-                        requiredValue: `Nhỏ hơn ${maxSizeInMB}`,
-                    },
-                };
-            }
-        }
-        return null;
-    };
+// Tạo danh sách năm chạy ngược từ hiện tại đến năm chỉ định.
+const generateYearsDesc = (from) => {
+    const currentYear = new Date().getFullYear();
+    const years = [];
+    for (let year = currentYear; year >= from; year--) {
+        years.push(year);
+    }
+    return years;
 };
-const reminderCustomRequiredValidator = () => {
-    return (control) => {
-        const reminderValue = control?.value;
-        if (!reminderValue) {
-            return {
-                reminderCustomRequired: {
-                    requiredValue: `Giá trị radio và cả từ select hoặc date`,
-                },
-            };
-        }
-        if (reminderValue) {
-            const { reminderDate } = reminderValue;
-            if (!reminderDate) {
-                return {
-                    reminderCustomRequired: {
-                        actualValue: reminderDate,
-                        requiredValue: `Giá trị từ select hoặc date`,
-                    },
-                };
-            }
-        }
-        return null;
-    };
+// Tạo danh sách năm chạy từ năm chỉ định đến năm hiện tại.
+const generateYearsAsc = (from) => {
+    const currentYear = new Date().getFullYear();
+    const years = [];
+    for (let year = from; year <= currentYear; year++) {
+        years.push(year);
+    }
+    return years;
 };
 
-const getDefaultPatternErrorMessage = (label, pattern) => {
-    let finalErrorMessage = '';
-    const resolvePatternResult = resolvePattern(pattern);
-    // if (resolvePatternResult?.type === 'unknown') {
-    //     return finalErrorMessage; // Không phải pattern hợp lệ
-    // }
-    if (resolvePatternResult.type === 'regexObject') {
-        finalErrorMessage = `${label || 'Trường này'} không hợp lệ!`;
+const DEFAULT_DATE_PICKER_VALUE = '';
+/**
+ * Interface của Date type là Picker.
+ */
+class DatePickerField extends BaseDateField {
+    constructor(init) {
+        super(init);
+        /**
+         * Gán giá trị cho các props cần giá trị mặc định ở Date picker.
+         */
+        this.type = FieldTypeEnum.DatePicker;
+        this.value = DEFAULT_DATE_PICKER_VALUE;
+        this.initialValue = DEFAULT_DATE_PICKER_VALUE;
+        this.outputAs = DatePickerOutputValueTypeEnum.String;
+        Object.assign(this, init);
+    }
+    getDefaultValue() {
+        return DEFAULT_DATE_PICKER_VALUE;
+    }
+    toFormValue(modelValue) {
+        const value = modelValue;
+        if (!value)
+            return null;
+        return normalizeToDate(value);
+    }
+}
+
+const DEFAULT_DATE_RANGE_VALUE = [];
+/**
+ * Interface của Date type là Range.
+ */
+class DateRangeField extends BaseDateField {
+    constructor(init) {
+        super(init);
+        /**
+         * Gán giá trị cho các props cần giá trị mặc định ở Date range.
+         */
+        this.type = FieldTypeEnum.DateRange;
+        this.value = DEFAULT_DATE_RANGE_VALUE;
+        this.initialValue = DEFAULT_DATE_RANGE_VALUE;
+        this.outputAs = DateRangeOutputValueTypeEnum.StringArray;
+        Object.assign(this, init);
+    }
+    getDefaultValue() {
+        return DEFAULT_DATE_RANGE_VALUE;
     }
-    if (resolvePatternResult.type === 'regexKey') {
-        const patternMess = PATTERN_ERROR_MESSAGES?.[pattern] ?? '';
-        finalErrorMessage = `${label || 'Trường này'} không hợp lệ! ${patternMess.replace(/%s/g, () => label)}`;
+    toFormValue(modelValue) {
+        let value = modelValue;
+        if (typeof value === 'string') {
+            value = value.split(',').map(dateStr => dateStr.trim());
+        }
+        let dateRange = [];
+        if (value?.length === 2) {
+            const startDate = normalizeToDate(value[0]);
+            const endDate = normalizeToDate(value[1]);
+            if (startDate && endDate)
+                dateRange = [startDate, endDate];
+        }
+        return dateRange;
     }
-    return finalErrorMessage;
-};
-const getDefaultMinLengthErrorMessage = (label, errorValue) => {
-    return `${label || 'Trường này'} cần tối thiểu ${errorValue.requiredLength} ký tự`;
-};
-const getDefaultMaxLengthErrorMessage = (label, errorValue) => {
-    return `${label || 'Trường này'} cần đât thiểu ${errorValue.requiredLength} ký tự`;
-};
-const getDefaultAcptMimeTypesErrorMessage = (typeString) => {
-    return `Tập tin tải lên không được hỗ trợ. Vui lòng tải các tập tin có định dạng ${typeString}`;
-};
-const getDefaultMaxSizeInMBErrorMessage = (maxSizeInMB) => {
-    return `Kích thước tập tin tải lên không được phép vượt quá ${maxSizeInMB} MB`;
-};
-const getLeadingSpaceErrorMessage = (label) => {
-    return `${label || 'Trường này'} không được bắt đầu bằng khoảng trắng`;
-};
-
-var FormModeEnum;
-(function (FormModeEnum) {
-    FormModeEnum["Add"] = "add";
-    FormModeEnum["Edit"] = "edit";
-    FormModeEnum["View"] = "view";
-    FormModeEnum["Design"] = "design";
-})(FormModeEnum || (FormModeEnum = {}));
+}
 
 /**
- * Abstract class chung cho Field.
+ * Interface base chung cho Các dạng Date.
  */
-class BaseField {
+class BaseUploadField extends BaseField {
+    /**
+     * Props validation chung cho các dạng Date.
+     */
     constructor(init) {
-        // Thứ tự hiển thị của field
-        this.seqNum = 0;
-        if (!init?.key || !init?.label) {
-            throw new Error('key, label, and type are required');
-        }
+        super(init);
         /**
-         * Gán giá trị cho các props cần giá trị mặc định ở BaseField.
+         * Gán giá trị cho các props cần giá trị mặc định ở Date.
          */
-        this.id = uuidGenerator();
-        this.required = false;
-        this.grid = { xs: 24 };
-        this.labelGrid = { xs: 24 };
-        this.controlGrid = { xs: 24 };
-        this.labelAlign = 'left';
-        this.isHidden = false;
-        this.isDisabled = false;
-        this.isParent = false;
-        this.allowSetValue = [FormModeEnum.Add, FormModeEnum.Edit, FormModeEnum.View];
-        this.viewMode = ViewModeEnum.form;
-        this.enableFieldChange = false;
+        this.controlType = ControlTypeEnum.Upload;
+        this.outputAs = UploadOutputValueTypeEnum.Object;
+        this.apiFileConfig = {
+            uploadUrl: '',
+            deleteUrl: '',
+        };
+        this.acceptedMimeTypes = DEFAULT_ACCEPTED_MIME_TYPES;
+        this.maxSizeInMB = 25;
+        this.showAcceptedExtensionGuide = true;
+        this.uploadTemp = true;
         Object.assign(this, init);
     }
-    // Tạo các validate chung cho các props ở abstract. this khi gọi trong class con sẽ đại diện cho đối tượng tạo từ class đó.
-    getCommonValidators() {
-        const validators = [];
-        if (this.required)
-            validators.push(Validators.required);
+    // Mảng ValidatorFn các validation chung được hỗ trợ sẵn bởi angular cho Input Password.
+    getCustomBaseUploadValidators() {
+        const validators = this.getCustomValidators();
+        // Kiểm tra xem file tải lên có type nằm trong mảng acceptedMimeTypes đã chỉ định hay không.
+        if (this.acceptedMimeTypes?.length > 0)
+            validators.push(acceptedMimeTypesValidator(this.acceptedMimeTypes));
+        // Kiểm tra kích thước tối đa mà file tải lên được cho phép.
+        validators.push(maxFileSizeInMBValidator(this.maxSizeInMB));
         return validators;
     }
-    // Tạo các validate custom chung cho các props ở abstract. this khi gọi trong class con sẽ đại diện cho đối tượng tạo từ class đó.
-    getCustomValidators() {
-        const validators = [];
-        if (this.matchField)
-            validators.push(matchFieldsValidator(this.matchField));
-        return validators;
+    // Tạo Form Control cho Input Field.
+    toFormControl() {
+        const commonValidators = this.getCommonValidators();
+        const customValidators = this.getCustomBaseUploadValidators();
+        return new FormControl(this.value ?? '', [...commonValidators, ...customValidators]);
     }
     getErrorMessage(errorKey, errorValue, allFields) {
-        if (errorKey === CommonValidaterEnum.Required) {
-            return `${this.label || 'Trường này'} là bắt buộc`;
+        // Lấy error message mặc định của acceptedMimeTypes.
+        if (errorKey === CustomValidaterEnum.AcceptedMimiTypes) {
+            const typeString = getExtensions(this.acceptedMimeTypes).join(', ');
+            return getDefaultAcptMimeTypesErrorMessage(typeString);
         }
-        if (errorKey === CustomValidaterEnum.MatchField) {
-            const matchKey = this.matchField;
-            const targetLabel = allFields.find(f => f.key === matchKey)?.label || matchKey;
-            return `${this.label} không khớp với ${targetLabel}`;
+        // Lấy error message mặc định của maxSizeInMB.
+        if (errorKey === CustomValidaterEnum.MaxSizeInMB) {
+            return getDefaultMaxSizeInMBErrorMessage(this.maxSizeInMB);
         }
-        return '';
+        return super.getErrorMessage(errorKey, errorValue, allFields);
     }
 }
 
-// Dữ liệu sau khi đã tiến hành xử lý gom nhóm từ fields và groups.
-class GroupedFields {
-    constructor(init) {
-        this.noGroup = [];
-        this.grouped = [];
-        Object.assign(this, init);
-    }
-}
-// Đại diện cho 1 group.
-class FieldGroup {
+const DEFAULT_SINGLE_FILE_UPLOAD_VALUE = '';
+/**
+ * Interface của Single file upload. Đầu vào có thể là chuỗi JSON hoặc đối tượng File.
+ */
+class SingleFileUploadField extends BaseUploadField {
     constructor(init) {
-        this.isActive = false;
-        this.showArrow = true;
-        this.disabled = false;
-        this.required = false;
+        super(init);
+        /**
+         * Gán giá trị cho các props cần giá trị mặc định ở Single file upload.
+         */
+        this.type = FieldTypeEnum.SingleFileUpload;
+        this.value = DEFAULT_SINGLE_FILE_UPLOAD_VALUE;
+        this.initialValue = DEFAULT_SINGLE_FILE_UPLOAD_VALUE;
+        this.suffixes = [];
         Object.assign(this, init);
     }
-}
-
-const buildForm = (fields, mode, model) => {
-    const groupObj = {};
-    // console.log("model", model);
-    for (const field of fields) {
-        // Loại bỏ nếu quyết định ẩn field đi.
-        if (field.isHidden)
-            continue;
-        // Nếu là dạng InputPasswordField nhưng ở mode edit và view thì không được dùng.
-        if (field instanceof InputPasswordField &&
-            (mode === FormModeEnum.Edit || mode === FormModeEnum.View))
-            continue;
-        const fieldKey = field?.key;
-        // field.value = field.allowSetValue ? (model?.[fieldKey] || field.value) : null;
-        if (field.allowSetValue) {
-            field.value = field.getDefaultValue();
-            field.modelValue = null;
-            if (model?.[fieldKey]) {
-                field.value = field.toFormValue(model[fieldKey]);
-                field.modelValue = model[fieldKey];
-            }
-            field.initialValue = field.value;
-        }
-        //  console.log("e", field.value );
-        // field.value = field.allowSetValue ? field.toFormValue(model?.[fieldKey] | field.getDefaultValue()) : field.getDefaultValue();
-        const control = field.toFormControl();
-        control.reset(field.value);
-        if (field.isDisabled) {
-            //console.log(field.key, 'dfdfdfdf');
-            control?.disable();
-        }
-        groupObj[fieldKey] = control;
+    getDefaultValue() {
+        return DEFAULT_SINGLE_FILE_UPLOAD_VALUE;
     }
-    return new FormGroup(groupObj);
-};
-// Tạo placeholder mặc định cho các dạng Input, Textarea.
-const createPlaceholder = (field) => {
-    const placeholder = field?.placeholder;
-    if (placeholder)
-        return placeholder;
-    const label = field?.label;
-    if (label)
-        return `Nhập ${label?.toLowerCase()}`;
-    return `Nhập ${field.key?.toLowerCase()}`;
-};
-// Tạo placeholder mặc định cho các dạng Select.
-const createSelectPlaceholder = (field) => {
-    const placeholder = field?.placeholder;
-    if (placeholder)
-        return placeholder;
-    const label = field?.label;
-    if (label) {
-        const isSingleSelect = field?.type === FieldTypeEnum.SingleSelect;
-        return `Chọn ${isSingleSelect ? '' : 'các'} ${label?.toLowerCase()}`;
+    toFormValue(modelValue) {
+        return String(modelValue);
     }
-    return `Nhập ${field.key?.toLowerCase()}`;
-};
+}
 
-const isInputTextField = (field) => {
-    return field.controlType === ControlTypeEnum.Input && field.type === FieldTypeEnum.InputText;
-};
-const isInputPasswordField = (field) => {
-    return field.controlType === ControlTypeEnum.Input && field.type === FieldTypeEnum.InputPassword;
-};
-const isSingleSelectField = (field) => {
-    return field.controlType === ControlTypeEnum.Select && field.type === FieldTypeEnum.SingleSelect;
-};
-const isMultiSelectField = (field) => {
-    return field.controlType === ControlTypeEnum.Select && field.type === FieldTypeEnum.MultiSelect;
-};
-const isDatePickerField = (field) => {
-    return field.controlType === ControlTypeEnum.Date && field.type === FieldTypeEnum.DatePicker;
-};
-const isDateRangeField = (field) => {
-    return field.controlType === ControlTypeEnum.Date && field.type === FieldTypeEnum.DateRange;
-};
-const isSingleFileUploadField = (field) => {
-    return (field.controlType === ControlTypeEnum.Upload && field.type === FieldTypeEnum.SingleFileUpload);
-};
-const isMultiFileUploadField = (field) => {
-    return (field.controlType === ControlTypeEnum.Upload && field.type === FieldTypeEnum.MultiFileUpload);
-};
-const isAvatarUploadField = (field) => {
-    return field.controlType === ControlTypeEnum.Upload && field.type === FieldTypeEnum.AvatarUpload;
-};
-// Tạo FieldGroup render UI từ thông tin fields và groups truyền vào cho dynamic-form.
-const buildGroupedFields = (fields, groups = []) => {
-    const noGroup = fields.filter(field => !field?.groupCode || field?.groupCode.toLowerCase() === 'none');
-    const sortedGroups = [...groups].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
-    const grouped = sortedGroups
-        .map(group => ({
-        group,
-        fields: fields.filter(field => field.groupCode?.toLowerCase() === group.code.toLowerCase()),
-    }))
-        .filter(groupedFields => groupedFields.fields.length > 0);
-    return new GroupedFields({
-        noGroup,
-        grouped,
-    });
-};
+const DEFAULT_MULTI_FILE_UPLOAD_VALUE = '';
+/**
+ * Interface của Multi file upload.
+ */
+class MultiFileUploadField extends BaseUploadField {
+    constructor(init) {
+        super(init);
+        /**
+         * Gán giá trị cho các props cần giá trị mặc định ở Multi file upload.
+         */
+        this.type = FieldTypeEnum.MultiFileUpload;
+        this.value = DEFAULT_MULTI_FILE_UPLOAD_VALUE;
+        this.initialValue = DEFAULT_MULTI_FILE_UPLOAD_VALUE;
+        this.maxFileCount = 6;
+        Object.assign(this, init);
+    }
+    getDefaultValue() {
+        return DEFAULT_MULTI_FILE_UPLOAD_VALUE;
+    }
+    toFormValue(modelValue) {
+        return String(modelValue);
+    }
+}
+
+const DEFAULT_MULTI_IMAGE_UPLOAD_VALUE = '';
+/**
+ * Interface của Multi image upload.
+ */
+class MultiImageUploadField extends BaseUploadField {
+    constructor(init) {
+        super(init);
+        /**
+         * Gán giá trị cho các props cần giá trị mặc định ở Multi image upload.
+         */
+        this.type = FieldTypeEnum.MultiImageUpload;
+        this.value = DEFAULT_MULTI_IMAGE_UPLOAD_VALUE;
+        this.initialValue = DEFAULT_MULTI_IMAGE_UPLOAD_VALUE;
+        this.maxFileCount = 6;
+        this.imageCardWidth = '108px';
+        this.imageCardHeight = '108px';
+        Object.assign(this, init);
+    }
+    getDefaultValue() {
+        return DEFAULT_MULTI_IMAGE_UPLOAD_VALUE;
+    }
+    toFormValue(modelValue) {
+        return String(modelValue);
+    }
+}
 
 const DYNAMIC_FORM_CONFIG = new InjectionToken('DYNAMIC_FORM_CONFIG');
 
@@ -3264,6 +1623,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+const DEFAULT_AVATAR_UPLOAD_VALUE = '';
+/**
+ * Interface của Avatar upload.
+ */
+class AvatarUploadField extends BaseUploadField {
+    constructor(init) {
+        super(init);
+        /**
+         * Gán giá trị cho các props cần giá trị mặc định ở Avatar upload.
+         */
+        this.type = FieldTypeEnum.AvatarUpload;
+        this.value = DEFAULT_AVATAR_UPLOAD_VALUE;
+        this.acceptedMimeTypes = DEFAULT_ACCEPTED_IMAGE_MIME_TYPES;
+        this.initialValue = DEFAULT_AVATAR_UPLOAD_VALUE;
+        Object.assign(this, init);
+    }
+    getDefaultValue() {
+        return DEFAULT_AVATAR_UPLOAD_VALUE;
+    }
+    toFormValue(modelValue) {
+        return String(modelValue);
+    }
+}
+
 const DEFAULT_TREE_SELECT_VALUE = null;
 /**
  * Interface của Select Field type là dạng Single.
@@ -3332,7 +1715,7 @@ class DynamicFormService {
      * Thao tác với control và fields cũng như output đầu ra của data form.
      */
     setFieldValue(fieldKey, rawValue) {
-        const field = this.fields.find(f => f.key === fieldKey);
+        const field = this.fields.find((f) => f.key === fieldKey);
         if (!field)
             return;
         const formValue = field.toFormValue(rawValue);
@@ -3398,9 +1781,10 @@ class DynamicFormService {
         return fields.sort((a, b) => a.seqNum - b.seqNum);
     }
     createFieldFromJson(fieldConfig, objField) {
-        fieldConfig.key = fieldConfig?.key || lowerCaseFirstChar(objField.code) || '';
-        fieldConfig.label = fieldConfig?.label || objField?.name || '';
-        fieldConfig.groupCode = fieldConfig.groupCode ?? objField.viewType ?? '';
+        fieldConfig.key =
+            fieldConfig?.key || lowerCaseFirstChar(objField.code) || "";
+        fieldConfig.label = fieldConfig?.label || objField?.name || "";
+        fieldConfig.groupCode = fieldConfig.groupCode ?? objField.viewType ?? "";
         fieldConfig.seqNum = fieldConfig.seqNum ?? objField.seqNum;
         fieldConfig.required = fieldConfig.required ?? objField.required === 3;
         const fieldType = fieldConfig.type;
@@ -3416,14 +1800,18 @@ class DynamicFormService {
         if (fieldType === FieldTypeEnum.SingleSelect) {
             const singleSelect = fieldConfig;
             if (!singleSelect.apiConfig) {
-                singleSelect.apiConfig = { baseUrl: this.formConfigService.handleApiUrlCreation(objField.apiURL || '', objField.objTypeGroupCode) };
+                singleSelect.apiConfig = {
+                    baseUrl: this.formConfigService.handleApiUrlCreation(objField.apiURL || "", objField.objTypeGroupCode),
+                };
             }
             return new SingleSelectField({ ...singleSelect });
         }
         if (fieldType === FieldTypeEnum.MultiSelect) {
             const multiSelect = fieldConfig;
             if (!multiSelect.apiConfig) {
-                multiSelect.apiConfig = { baseUrl: this.formConfigService.handleApiUrlCreation(objField.apiURL || '', objField.objTypeGroupCode) };
+                multiSelect.apiConfig = {
+                    baseUrl: this.formConfigService.handleApiUrlCreation(objField.apiURL || "", objField.objTypeGroupCode),
+                };
             }
             return new MultiSelectField({ ...multiSelect });
         }
@@ -3431,7 +1819,7 @@ class DynamicFormService {
             const treeSelect = fieldConfig;
             if (!treeSelect.apiConfig) {
                 treeSelect.apiConfig = {
-                    baseUrl: this.formConfigService.handleApiUrlCreation(objField.apiURL || '', objField.objTypeGroupCode),
+                    baseUrl: this.formConfigService.handleApiUrlCreation(objField.apiURL || "", objField.objTypeGroupCode),
                 };
             }
             return new TreeSelectField({ ...treeSelect });
@@ -3443,26 +1831,32 @@ class DynamicFormService {
             return new DateRangeField({ ...fieldConfig });
         }
         if (fieldType === FieldTypeEnum.SingleFileUpload) {
-            return new SingleFileUploadField({ ...fieldConfig });
+            return new SingleFileUploadField({
+                ...fieldConfig,
+            });
         }
         if (fieldType === FieldTypeEnum.MultiFileUpload) {
-            return new MultiFileUploadField({ ...fieldConfig });
+            return new MultiFileUploadField({
+                ...fieldConfig,
+            });
         }
         if (fieldType === FieldTypeEnum.AvatarUpload) {
             return new AvatarUploadField({ ...fieldConfig });
         }
         if (fieldType === FieldTypeEnum.MultiImageUpload) {
-            return new MultiImageUploadField({ ...fieldConfig });
+            return new MultiImageUploadField({
+                ...fieldConfig,
+            });
         }
         return null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicFormService, providedIn: 'root' }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicFormService, providedIn: "root" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicFormService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root',
+                    providedIn: "root",
                 }]
         }] });
 
@@ -3762,7 +2156,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 args: [{ required: false }]
             }] } });
 
-const ZORRO_MODULES$f = [NzDatePickerModule, NzInputModule];
+const ZORRO_MODULES$e = [NzDatePickerModule, NzInputModule];
 class DatePickerComponent extends BaseValueAccessor {
     constructor() {
         super();
@@ -3856,7 +2250,7 @@ class DatePickerComponent extends BaseValueAccessor {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-date-picker', standalone: true, imports: [...FORM_MODULES, ...ZORRO_MODULES$f], providers: [
+            args: [{ selector: 'app-date-picker', standalone: true, imports: [...FORM_MODULES, ...ZORRO_MODULES$e], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => DatePickerComponent),
@@ -3865,7 +2259,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                     ], template: "@if (modeSignal() === formModeEnum.View) {\r\n  <input nz-input [value]=\"displayValue\" [disabled]=\"true\" class=\"modeView\" />\r\n} @else {\r\n  <nz-date-picker\r\n    [id]=\"fieldSignal().key\"\r\n    [class]=\"'w-100'\"\r\n    [nzDisabled]=\"isDisabled\"\r\n    [nzPlaceHolder]=\"fieldSignal().placeholder!\"\r\n    [nzFormat]=\"fieldSignal().format\"\r\n    [nzDisabledDate]=\"disabledDate()\"\r\n    [ngModel]=\"value\"\r\n    (ngModelChange)=\"handleChangeDate($event)\"\r\n  >\r\n  </nz-date-picker>\r\n}\r\n", styles: [".w-100{width:100%}.h-100{height:100%}.flex{display:flex}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.items-center{align-items:center}.mb-0{margin-bottom:0!important}.break-work{word-break:break-word}:host ::ng-deep .ant-input[disabled]{background-color:#fff}.modeView{pointer-events:none;color:#575757!important;font-size:12px}\n"] }]
         }], ctorParameters: () => [] });
 
-const ZORRO_MODULES$e = [NzDatePickerModule, NzInputModule];
+const ZORRO_MODULES$d = [NzDatePickerModule, NzInputModule];
 class DateRangeComponent extends BaseValueAccessor {
     constructor() {
         super();
@@ -3957,7 +2351,7 @@ class DateRangeComponent extends BaseValueAccessor {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DateRangeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-date-range', standalone: true, imports: [...FORM_MODULES, ...ZORRO_MODULES$e], providers: [
+            args: [{ selector: 'app-date-range', standalone: true, imports: [...FORM_MODULES, ...ZORRO_MODULES$d], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => DateRangeComponent),
@@ -3966,7 +2360,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                     ], template: "@if (modeSignal() === formModeEnum.View) {\r\n  @if (value!.length > 0) {\r\n    <nz-range-picker\r\n      [class]=\"'w-100'\"\r\n      [nzFormat]=\"fieldSignal().format\"\r\n      [nzDisabled]=\"true\"\r\n      [(ngModel)]=\"value\"\r\n      class=\"modeView\"\r\n      [nzSuffixIcon]=\"suffixIcon\"\r\n    ></nz-range-picker>\r\n    <ng-template #suffixIcon>\r\n      <!-- \u0110\u1EC3 tr\u1ED1ng, ho\u1EB7c custom icon kh\u00E1c -->\r\n    </ng-template>\r\n  } @else {\r\n    <input nz-input [value]=\"displayValueNoInfo\" [disabled]=\"true\" class=\"modeView\" />\r\n  }\r\n} @else {\r\n  <nz-range-picker\r\n    [id]=\"fieldSignal().key\"\r\n    class=\"w-100\"\r\n    [nzDisabled]=\"isDisabled\"\r\n    [nzFormat]=\"fieldSignal().format\"\r\n    [nzDisabledDate]=\"disabledDate()\"\r\n    [nzPlaceHolder]=\"fieldSignal().placeholder ?? ['Ng\u00E0y b\u1EAFt \u0111\u1EA7u', 'Ng\u00E0y k\u1EBFt th\u00FAc']\"\r\n    [ngModel]=\"value\"\r\n    (ngModelChange)=\"handleChangeDateRange($event)\"\r\n  ></nz-range-picker>\r\n}\r\n", styles: [".w-100{width:100%}.h-100{height:100%}.flex{display:flex}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.items-center{align-items:center}.mb-0{margin-bottom:0!important}.break-work{word-break:break-word}:host ::ng-deep .modeView.ant-picker.ant-picker-disabled{background-color:inherit!important;cursor:default;pointer-events:none}:host ::ng-deep .modeView .ant-picker-input>input[disabled]{color:#575757!important}.modeView{pointer-events:none;background-color:#fff;font-size:12px;color:#575757!important}\n"] }]
         }], ctorParameters: () => [] });
 
-const ZORRO_MODULES$d = [NzInputModule, NzIconModule];
+const ZORRO_MODULES$c = [NzInputModule, NzIconModule];
 class InputPasswordComponent extends BaseValueAccessor {
     constructor() {
         super();
@@ -4012,7 +2406,7 @@ class InputPasswordComponent extends BaseValueAccessor {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: InputPasswordComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-input-password', standalone: true, imports: [...ZORRO_MODULES$d], providers: [
+            args: [{ selector: 'app-input-password', standalone: true, imports: [...ZORRO_MODULES$c], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => InputPasswordComponent),
@@ -4039,7 +2433,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
-const ZORRO_MODULES$c = [NzButtonModule, NzIconModule];
+const ZORRO_MODULES$b = [NzButtonModule, NzIconModule];
 class SuffixComponent {
     constructor() {
         this.formId = '';
@@ -4057,14 +2451,14 @@ class SuffixComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SuffixComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-suffix', standalone: true, imports: [...CORE_MODULES, ...ZORRO_MODULES$c], template: "<button\r\n  nz-button\r\n  nzType=\"primary\"\r\n  nzSize=\"small\"\r\n  [title]=\"suffixConfig.description\"\r\n  class=\"h-100 suffix-btn font-size-12\"\r\n  [ngClass]=\"suffixConfig.class ?? ''\"\r\n  (click)=\"handleSuffix()\"\r\n>\r\n  @if (suffixConfig.icon) {\r\n    <span class=\"icon\">\r\n      <!-- N\u1EBFu l\u00E0 icon Zorro -->\r\n      @if (suffixConfig.icon.type === 'zorro') {\r\n        <span\r\n          nz-icon\r\n          [nzType]=\"suffixConfig.icon.value\"\r\n          nzTheme=\"outline\"\r\n          [ngClass]=\"suffixConfig.icon.class ?? ''\"\r\n        >\r\n        </span>\r\n      }\r\n\r\n      <!-- N\u1EBFu l\u00E0 Boxicons -->\r\n      @if (suffixConfig.icon.type === 'mdi') {\r\n        <span [class]=\"'mdi ' + suffixConfig.icon.value\" [ngClass]=\"suffixConfig.icon.class ?? ''\">\r\n        </span>\r\n      }\r\n    </span>\r\n  }\r\n\r\n  @if (suffixConfig.label) {\r\n    <span class=\"label\">\r\n      {{ suffixConfig.label }}\r\n    </span>\r\n  }\r\n\r\n  @if (!suffixConfig.icon && !suffixConfig.label) {\r\n    <span class=\"label\">\r\n      {{ defaultText }}\r\n    </span>\r\n  }\r\n</button>\r\n", styles: [".w-100{width:100%}.h-100{height:100%}.flex{display:flex}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.items-center{align-items:center}.mb-0{margin-bottom:0!important}.break-work{word-break:break-word}.suffix-btn{margin-left:.5rem}\n"] }]
+            args: [{ selector: 'app-suffix', standalone: true, imports: [...CORE_MODULES, ...ZORRO_MODULES$b], template: "<button\r\n  nz-button\r\n  nzType=\"primary\"\r\n  nzSize=\"small\"\r\n  [title]=\"suffixConfig.description\"\r\n  class=\"h-100 suffix-btn font-size-12\"\r\n  [ngClass]=\"suffixConfig.class ?? ''\"\r\n  (click)=\"handleSuffix()\"\r\n>\r\n  @if (suffixConfig.icon) {\r\n    <span class=\"icon\">\r\n      <!-- N\u1EBFu l\u00E0 icon Zorro -->\r\n      @if (suffixConfig.icon.type === 'zorro') {\r\n        <span\r\n          nz-icon\r\n          [nzType]=\"suffixConfig.icon.value\"\r\n          nzTheme=\"outline\"\r\n          [ngClass]=\"suffixConfig.icon.class ?? ''\"\r\n        >\r\n        </span>\r\n      }\r\n\r\n      <!-- N\u1EBFu l\u00E0 Boxicons -->\r\n      @if (suffixConfig.icon.type === 'mdi') {\r\n        <span [class]=\"'mdi ' + suffixConfig.icon.value\" [ngClass]=\"suffixConfig.icon.class ?? ''\">\r\n        </span>\r\n      }\r\n    </span>\r\n  }\r\n\r\n  @if (suffixConfig.label) {\r\n    <span class=\"label\">\r\n      {{ suffixConfig.label }}\r\n    </span>\r\n  }\r\n\r\n  @if (!suffixConfig.icon && !suffixConfig.label) {\r\n    <span class=\"label\">\r\n      {{ defaultText }}\r\n    </span>\r\n  }\r\n</button>\r\n", styles: [".w-100{width:100%}.h-100{height:100%}.flex{display:flex}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.items-center{align-items:center}.mb-0{margin-bottom:0!important}.break-work{word-break:break-word}.suffix-btn{margin-left:.5rem}\n"] }]
         }], propDecorators: { suffixConfig: [{
                 type: Input
             }], formId: [{
                 type: Input
             }] } });
 
-const ZORRO_MODULES$b = [
+const ZORRO_MODULES$a = [
     NzInputModule,
     NgxCurrencyDirective,
     CurrencyPipe,
@@ -4136,7 +2530,7 @@ class InputTextComponent extends BaseValueAccessor {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: InputTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-input-text', standalone: true, imports: [...ZORRO_MODULES$b, ...COMPONENTS$6], providers: [
+            args: [{ selector: 'app-input-text', standalone: true, imports: [...ZORRO_MODULES$a, ...COMPONENTS$6], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => InputTextComponent),
@@ -4145,244 +2539,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                     ], template: "<div class=\"flex\">\r\n  @if (modeSignal() === formModeEnum.View) {\r\n    @if (fieldSignal().viewMode === viewModeEnum.form) {\r\n      @if (fieldSignal().isCurrency) {\r\n        <input\r\n          nz-input\r\n          [(ngModel)]=\"inputDisplayValue\"\r\n          class=\"modeView\"\r\n          [currencyMask]=\"{\r\n            prefix: '',\r\n            suffix: ' VND',\r\n            thousands: ',',\r\n            decimal: '.',\r\n            precision: 2,\r\n            align: 'left',\r\n          }\"\r\n        />\r\n      } @else {\r\n        <input nz-input [value]=\"inputDisplayValue\" class=\"modeView\" />\r\n      }\r\n    }\r\n    @if (fieldSignal().viewMode === viewModeEnum.text) {\r\n      @if (fieldSignal().isCurrency) {\r\n        <span class=\"modeView\">\r\n          {{ inputDisplayValue | currency: 'VND' : 'symbol' : '1.0-0' : 'vi-VN' }}\r\n        </span>\r\n      } @else {\r\n        <span class=\"modeView\">{{ inputDisplayValue }}</span>\r\n      }\r\n    }\r\n  } @else {\r\n    @if (fieldSignal().isCurrency) {\r\n      <input\r\n        nz-input\r\n        class=\"input-control\"\r\n        [currencyMask]=\"{\r\n          prefix: '',\r\n          suffix: ' VND',\r\n          thousands: ',',\r\n          decimal: '.',\r\n          precision: 2,\r\n          align: 'left',\r\n        }\"\r\n        [(ngModel)]=\"value\"\r\n        [placeholder]=\"fieldSignal().placeholder!\"\r\n        [disabled]=\"isDisabled\"\r\n        (ngModelChange)=\"handleChangeFormValue($event)\"\r\n        (blur)=\"onTouched()\"\r\n      />\r\n    } @else {\r\n      <input\r\n        nz-input\r\n        class=\"input-control\"\r\n        [value]=\"value\"\r\n        [placeholder]=\"fieldSignal().placeholder!\"\r\n        [disabled]=\"isDisabled\"\r\n        (input)=\"handleChangeInputText($event)\"\r\n        (blur)=\"onTouched()\"\r\n      />\r\n    }\r\n  }\r\n\r\n  <!-- Suffixes -->\r\n  @if (fieldSignal().suffixes.length > 0) {\r\n    @for (suffix of fieldSignal().suffixes; track $index) {\r\n      @if (suffix.visibleOn?.includes(this.modeSignal())) {\r\n        <app-suffix [suffixConfig]=\"suffix\" [formId]=\"formId\"> </app-suffix>\r\n      }\r\n    }\r\n  }\r\n</div>\r\n", styles: [".w-100{width:100%}.h-100{height:100%}.flex{display:flex}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.items-center{align-items:center}.mb-0{margin-bottom:0!important}.break-work{word-break:break-word}.input-text-wrapper{display:flex}.modeView{pointer-events:none;color:#575757;font-size:12px}\n"] }]
         }], ctorParameters: () => [] });
 
-/**
- * Interface base chung cho Các dạng Radio.
- */
-class RadioBaseField extends BaseField {
-    /**
-     * Props validation chung cho các dạng Radio.
-     */
-    // ................. Chưa có .................
-    constructor(init) {
-        super(init);
-        /**
-         * Gán giá trị cho các props cần giá trị mặc định ở Radio.
-         */
-        this.controlType = ControlTypeEnum.Radio;
-        this.bindLabel = DEFAULT_BIND_LABEL;
-        this.bindValue = DEFAULT_BIND_VALUE;
-        this.dependsOn = [];
-        Object.assign(this, init);
-    }
-    // Mảng ValidatorFn các validation chung được hỗ trợ sẵn bởi Reactive form của angular cho Radio.
-    getCommonSelectValidators() {
-        const validators = this.getCommonValidators();
-        return validators;
-    }
-    // Mảng ValidatorFn các custom validation có thể dùng cho Radio.
-    getCustomSelectValidators() {
-        const validators = this.getCustomValidators();
-        return validators;
-    }
-    // Tạo Form Control cho Input Field.
-    toFormControl() {
-        const commonValidators = this.getCommonSelectValidators();
-        const customValidators = this.getCustomSelectValidators();
-        return new FormControl(this.value ?? '', [...commonValidators, ...customValidators]);
-    }
-    getErrorMessage(errorKey, errorValue, allFields) {
-        return super.getErrorMessage(errorKey, errorValue, allFields);
-    }
-}
-
-const DEFAULT_REMINDER_TYPE_RADIO_VALUE = null;
-// const DEFAULT_OPTIONS = [
-//   {
-//     code: 'REMINDERDATE_01',
-//     name: 'Chọn thời điểm',
-//     type: 'select',
-//   },
-//   {
-//     code: 'REMINDERDATE_02',
-//     name: 'Chọn ngày cụ thể',
-//     type: 'date',
-//   },
-// ] as ReminderOption[];
-/**
- * Interface của Select Field type là dạng Reminder Type Radio.
- */
-class ReminderTypeRadioField extends RadioBaseField {
-    constructor(init) {
-        super(init);
-        /**
-         * Gán giá trị cho các props cần giá trị mặc định ở Reminder Type Radio.
-         */
-        this.type = FieldTypeEnum.ReminderTypeRadio;
-        this.value = DEFAULT_REMINDER_TYPE_RADIO_VALUE;
-        this.initialValue = DEFAULT_REMINDER_TYPE_RADIO_VALUE;
-        // this.options = DEFAULT_OPTIONS;
-        Object.assign(this, init);
-    }
-    getDefaultValue() {
-        return DEFAULT_REMINDER_TYPE_RADIO_VALUE;
-    }
-    toFormValue(modelValue) {
-        console.log('modelValue', modelValue);
-        return modelValue;
-    }
-    getCustomReminderTypeValidators() {
-        const validators = [];
-        if (this.required)
-            validators.push(reminderCustomRequiredValidator());
-        return validators;
-    }
-    // Tạo Form Control cho Input Field.
-    toFormControl() {
-        const customValidators = this.getCustomReminderTypeValidators();
-        return new FormControl(this.value ?? '', [...customValidators]);
-    }
-}
-
-class ReminderValue {
-    constructor(init) {
-        this.reminderDate = '';
-        Object.assign(this, init);
-    }
-}
-
-const ZORRO_MODULES$a = [NzRadioModule, NzSelectModule, NzDatePickerModule];
-class ReminderTypeRadioComponent extends BaseValueAccessor {
-    get selectDetail() {
-        return this.selectedOption.type === 'select'
-            ? this.selectedOption.detail
-            : undefined;
-    }
-    get dateDetail() {
-        return this.selectedOption.type === 'date'
-            ? this.selectedOption.detail
-            : undefined;
-    }
-    constructor() {
-        super();
-        // Field config từ mảng fields.
-        this.fieldSignal = computed(() => {
-            const base = this.fieldInput();
-            if (!(base instanceof ReminderTypeRadioField) ||
-                (base.type !== FieldTypeEnum.ReminderTypeRadio && base.controlType !== ControlTypeEnum.Radio)) {
-                throw new Error('Expected ReminderTypeRadioField');
-            }
-            return base;
-        });
-        this.options = [];
-        this.selectedOptionCode = '';
-        this.deadline = null;
-        this.disabledAfterLimit = (current) => {
-            if (!this.deadline)
-                return false;
-            // clone và normalize limitDate
-            const dayBefore = new Date(this.deadline);
-            dayBefore.setHours(0, 0, 0, 0);
-            dayBefore.setDate(dayBefore.getDate());
-            // normalize current
-            const cur = new Date(current);
-            cur.setHours(0, 0, 0, 0);
-            return cur >= dayBefore;
-        };
-        this.toast = inject(ToastrService);
-        // 1. Effect chung Add + Edit
-        effect(() => {
-            if (this.isAddOrEdit()) {
-                const field = untracked(() => this.fieldSignal());
-                const { options } = field;
-                // Reminder option.
-                this.options = options || [];
-                // Mặc định chọn index 0 của radio reminder.
-                if (this.options.length > 0) {
-                    this.selectedOption = this.options[0];
-                    this.selectedOptionCode = this.options[0].code;
-                    this.value = new ReminderValue({
-                        reminderDateType: {
-                            code: this.selectedOption.code,
-                        },
-                        reminderDate: '',
-                    });
-                }
-            }
-        });
-        effect(() => {
-            const key = this.fieldSignal().dependsOn[0].fieldKey;
-            const dependValuesMap = this.fieldService.getDependValuesMap();
-            const dependSignal = dependValuesMap.get(key); // <- giữ nguyên signal
-            if (dependSignal) {
-                const value = dependSignal(); // lấy giá trị hiện tại
-                if (value)
-                    this.deadline = new Date(value);
-                else
-                    this.deadline = null;
-            }
-        });
-    }
-    // Chạy khi value form được gán bởi các hàm reset, patchValue, setValue.
-    writeValueToView(value) {
-        // if (this.isView()) {
-        //   this.displayValue = this.getDisplayValue(
-        //     this.fieldSignal().modelValue as string | Record<string, unknown>,
-        //   );
-        //   return;
-        // }
-        if (!this.isAddOrEdit())
-            return;
-        const { key } = untracked(() => this.fieldSignal());
-        // Gán data vào đầu ra của form.
-        const newOutputValue = value;
-        this.patchFormData(key, newOutputValue);
-    }
-    // Xử lý phụ thuộc khi change value
-    handleValueChange(value) {
-        const newOutputValue = value && new ReminderValue({ ...value });
-        if (this.selectedOption.type === 'date') {
-            const date = newOutputValue.reminderDate;
-            newOutputValue.reminderDate = value && formatDateToYYYYMMDD(date);
-        }
-        this.patchFormData(this.fieldSignal().key, newOutputValue);
-    }
-    reminderRadioChange(radioValue) {
-        const currOption = this.options.find(o => o.code === radioValue);
-        if (currOption) {
-            this.selectedOption = currOption;
-            this.selectedOptionCode = currOption.code;
-            if (currOption.type === 'date' && !this.deadline)
-                this.toast.warning(`Chọn ${this.fieldSignal().dependsOn[0].fieldLabel} trước khi chọn ngày cụ thể cho việc Nhắc báo cáo`);
-        }
-        this.value = new ReminderValue({
-            reminderDateType: {
-                code: radioValue,
-            },
-            reminderDate: '',
-        });
-    }
-    changeOptionSelect(optionValue) {
-        this.propagateValue(new ReminderValue({
-            ...this.value,
-            reminderDate: optionValue,
-        }));
-    }
-    changeDate(date) {
-        this.propagateValue(new ReminderValue({
-            ...this.value,
-            reminderDate: date,
-        }));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ReminderTypeRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ReminderTypeRadioComponent, isStandalone: true, selector: "app-reminder-type-radio", providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => ReminderTypeRadioComponent),
-                multi: true,
-            },
-        ], usesInheritance: true, ngImport: i0, template: "@if (modeSignal() === formModeEnum.View) {\r\n  <!-- <input nz-input [value]=\"displayValue\" class=\"modeView\" /> -->\r\n} @else {\r\n  <!-- *ngIf=\"!!deadline\" -->\r\n  <div class=\"reminder-wrapper\">\r\n    <div class=\"reminder\">\r\n      <div class=\"radio-group\">\r\n        <nz-radio-group\r\n          [ngModel]=\"selectedOptionCode\"\r\n          (ngModelChange)=\"reminderRadioChange($event)\"\r\n        >\r\n          <label *ngFor=\"let opt of options\" nz-radio [nzValue]=\"opt.code\">\r\n            {{ opt.name }}\r\n          </label>\r\n        </nz-radio-group>\r\n      </div>\r\n\r\n      <div class=\"detail-for-radio\" [ngSwitch]=\"selectedOption.type\">\r\n        <ng-container *ngSwitchCase=\"'select'\">\r\n          <nz-select\r\n            [nzPlaceHolder]=\"'Ch\u1ECDn th\u1EDDi \u0111i\u1EC3m nh\u1EAFc b\u00E1o c\u00E1o'\"\r\n            [nzAllowClear]=\"true\"\r\n            [ngModel]=\"value!.reminderDate || ''\"\r\n            (ngModelChange)=\"changeOptionSelect($event)\"\r\n          >\r\n            <nz-option\r\n              *ngFor=\"let o of selectDetail?.options\"\r\n              [nzValue]=\"o?.code || ''\"\r\n              [nzLabel]=\"o?.name || ''\"\r\n            ></nz-option>\r\n          </nz-select>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"'date'\">\r\n          <div>\r\n            <nz-date-picker\r\n              [ngModel]=\"value!.reminderDate || null\"\r\n              (ngModelChange)=\"changeDate($event)\"\r\n              [nzAllowClear]=\"true\"\r\n              [nzPlaceHolder]=\"'Ch\u1ECDn ng\u00E0y nh\u1EAFc b\u00E1o c\u00E1o c\u1EE5 th\u1EC3'\"\r\n              [nzDisabledDate]=\"disabledAfterLimit\"\r\n              [nzDisabled]=\"!deadline\"\r\n            ></nz-date-picker>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n    <!-- <div\r\n      class=\"\"\r\n      [ngClass]=\"{\r\n        'background-disabled': !deadline,\r\n      }\"\r\n    ></div> -->\r\n  </div>\r\n}\r\n", styles: [".reminder-wrapper{position:relative}.reminder-wrapper .background-disabled{position:absolute;inset:0;z-index:99;background-color:#f5f5f5;opacity:.5}.radio-group{margin-bottom:.5rem}.detail-for-radio nz-date-picker{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: i1$2.CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: i1.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: "ngmodule", type: i1.ReactiveFormsModule }, { kind: "ngmodule", type: NzRadioModule }, { kind: "component", type: i3$1.NzRadioComponent, selector: "[nz-radio],[nz-radio-button]", inputs: ["nzValue", "nzDisabled", "nzAutoFocus", "nz-radio-button"], exportAs: ["nzRadio"] }, { kind: "component", type: i3$1.NzRadioGroupComponent, selector: "nz-radio-group", inputs: ["nzDisabled", "nzButtonStyle", "nzSize", "nzName"], exportAs: ["nzRadioGroup"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i4$1.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i4$1.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus"], exportAs: ["nzSelect"] }, { kind: "ngmodule", type: NzDatePickerModule }, { kind: "component", type: i2.NzDatePickerComponent, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-quarter-picker,nz-year-picker,nz-range-picker", inputs: ["nzAllowClear", "nzAutoFocus", "nzDisabled", "nzBorderless", "nzInputReadOnly", "nzInline", "nzOpen", "nzDisabledDate", "nzLocale", "nzPlaceHolder", "nzPopupStyle", "nzDropdownClassName", "nzSize", "nzStatus", "nzFormat", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzShowToday", "nzMode", "nzShowNow", "nzRanges", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzPlacement", "nzShowWeekNumber", "nzShowTime"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ReminderTypeRadioComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-reminder-type-radio', standalone: true, imports: [...CORE_MODULES, ...FORM_MODULES, ...ZORRO_MODULES$a], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => ReminderTypeRadioComponent),
-                            multi: true,
-                        },
-                    ], template: "@if (modeSignal() === formModeEnum.View) {\r\n  <!-- <input nz-input [value]=\"displayValue\" class=\"modeView\" /> -->\r\n} @else {\r\n  <!-- *ngIf=\"!!deadline\" -->\r\n  <div class=\"reminder-wrapper\">\r\n    <div class=\"reminder\">\r\n      <div class=\"radio-group\">\r\n        <nz-radio-group\r\n          [ngModel]=\"selectedOptionCode\"\r\n          (ngModelChange)=\"reminderRadioChange($event)\"\r\n        >\r\n          <label *ngFor=\"let opt of options\" nz-radio [nzValue]=\"opt.code\">\r\n            {{ opt.name }}\r\n          </label>\r\n        </nz-radio-group>\r\n      </div>\r\n\r\n      <div class=\"detail-for-radio\" [ngSwitch]=\"selectedOption.type\">\r\n        <ng-container *ngSwitchCase=\"'select'\">\r\n          <nz-select\r\n            [nzPlaceHolder]=\"'Ch\u1ECDn th\u1EDDi \u0111i\u1EC3m nh\u1EAFc b\u00E1o c\u00E1o'\"\r\n            [nzAllowClear]=\"true\"\r\n            [ngModel]=\"value!.reminderDate || ''\"\r\n            (ngModelChange)=\"changeOptionSelect($event)\"\r\n          >\r\n            <nz-option\r\n              *ngFor=\"let o of selectDetail?.options\"\r\n              [nzValue]=\"o?.code || ''\"\r\n              [nzLabel]=\"o?.name || ''\"\r\n            ></nz-option>\r\n          </nz-select>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"'date'\">\r\n          <div>\r\n            <nz-date-picker\r\n              [ngModel]=\"value!.reminderDate || null\"\r\n              (ngModelChange)=\"changeDate($event)\"\r\n              [nzAllowClear]=\"true\"\r\n              [nzPlaceHolder]=\"'Ch\u1ECDn ng\u00E0y nh\u1EAFc b\u00E1o c\u00E1o c\u1EE5 th\u1EC3'\"\r\n              [nzDisabledDate]=\"disabledAfterLimit\"\r\n              [nzDisabled]=\"!deadline\"\r\n            ></nz-date-picker>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n    <!-- <div\r\n      class=\"\"\r\n      [ngClass]=\"{\r\n        'background-disabled': !deadline,\r\n      }\"\r\n    ></div> -->\r\n  </div>\r\n}\r\n", styles: [".reminder-wrapper{position:relative}.reminder-wrapper .background-disabled{position:absolute;inset:0;z-index:99;background-color:#f5f5f5;opacity:.5}.radio-group{margin-bottom:.5rem}.detail-for-radio nz-date-picker{width:100%}\n"] }]
-        }], ctorParameters: () => [] });
-
 const ZORRO_MODULES$9 = [NzSelectModule, NzInputModule, NzSpinModule];
 const COMPONENTS$5 = [SuffixComponent];
 class MultiSelectComponent extends BaseValueAccessor {
@@ -4585,7 +2741,7 @@ class MultiSelectComponent extends BaseValueAccessor {
                 useExisting: forwardRef(() => MultiSelectComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"flex\">\r\n  @if (modeSignal() === formModeEnum.View) {\r\n    @if (fieldSignal().viewMode === viewModeEnum.form) {\r\n      @if (fieldSignal().value!.length > 0) {\r\n        <nz-select\r\n          nzAllowClear\r\n          [nzMode]=\"'multiple'\"\r\n          [(ngModel)]=\"displayOptionsValue\"\r\n          [nzMaxTagCount]=\"fieldSignal().maxTagCount!\"\r\n          [nzMaxMultipleCount]=\"fieldSignal().maxMultipleCount!\"\r\n          [nzDisabled]=\"true\"\r\n        >\r\n          @for (displayOption of displayOptionsValue; track $index) {\r\n            <nz-option [nzValue]=\"displayOption\" [nzLabel]=\"displayOption\"> </nz-option>\r\n          }\r\n        </nz-select>\r\n      } @else {\r\n        <input nz-input [value]=\"displayNoValueText\" [disabled]=\"true\" />\r\n      }\r\n    }\r\n\r\n    @if (fieldSignal().viewMode === viewModeEnum.text) {\r\n      @if (displayOptionsValue && displayOptionsValue.length) {\r\n        <ul class=\"view-list\">\r\n          @for (label of displayOptionsValue; track $index) {\r\n            <li>{{ label }}</li>\r\n          }\r\n        </ul>\r\n      } @else {\r\n        <span class=\"modeView\">{{ displayNoValueText }}</span>\r\n      }\r\n    }\r\n  } @else {\r\n    <nz-select\r\n      [id]=\"fieldSignal().key\"\r\n      nzShowSearch\r\n      nzAllowClear\r\n      [nzDisabled]=\"isDisabled\"\r\n      [nzMode]=\"'multiple'\"\r\n      [nzPlaceHolder]=\"fieldSignal().placeholder!\"\r\n      [nzMaxTagCount]=\"fieldSignal().maxTagCount!\"\r\n      [nzMaxMultipleCount]=\"fieldSignal().maxMultipleCount!\"\r\n      [nzSuffixIcon]=\"loading() ? loadingIcon : null\"\r\n      [ngModel]=\"value\"\r\n      (ngModelChange)=\"handleChangeOptions($event)\"\r\n    >\r\n      @for (option of options; track `${option[this.fieldSignal().bindValue]}-${$index}`) {\r\n        <nz-option [nzValue]=\"transformOptionValue(option)\" [nzLabel]=\"getOptionLabel(option)\">\r\n        </nz-option>\r\n      }\r\n    </nz-select>\r\n\r\n    <ng-template #loadingIcon>\r\n      <nz-spin nzSimple [nzSize]=\"'small'\"></nz-spin>\r\n    </ng-template>\r\n  }\r\n\r\n  <!-- Suffixes -->\r\n  @if (fieldSignal().suffixes.length > 0) {\r\n    @for (suffix of fieldSignal().suffixes; track $index) {\r\n      @if (suffix.visibleOn?.includes(this.modeSignal())) {\r\n        <app-suffix [suffixConfig]=\"suffix\" [formId]=\"formId\"> </app-suffix>\r\n      }\r\n    }\r\n  }\r\n</div>\r\n", styles: [".view-list{margin-bottom:0;padding-inline-start:24px!important}:host ::ng-deep .ant-input[disabled]{background-color:#fff;color:#575757!important;font-size:12px}:host ::ng-deep .ant-select-multiple.ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector{background:#fff}:host ::ng-deep .ant-select-disabled.ant-select-multiple .ant-select-selection-item{color:#575757;font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: i1$2.CommonModule }, { kind: "ngmodule", type: i1.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: "ngmodule", type: i1.ReactiveFormsModule }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i4$1.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i4$1.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus"], exportAs: ["nzSelect"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i1$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: NzSpinModule }, { kind: "component", type: i3$2.NzSpinComponent, selector: "nz-spin", inputs: ["nzIndicator", "nzSize", "nzTip", "nzDelay", "nzSimple", "nzSpinning"], exportAs: ["nzSpin"] }, { kind: "component", type: SuffixComponent, selector: "app-suffix", inputs: ["suffixConfig", "formId"] }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"flex\">\r\n  @if (modeSignal() === formModeEnum.View) {\r\n    @if (fieldSignal().viewMode === viewModeEnum.form) {\r\n      @if (fieldSignal().value!.length > 0) {\r\n        <nz-select\r\n          nzAllowClear\r\n          [nzMode]=\"'multiple'\"\r\n          [(ngModel)]=\"displayOptionsValue\"\r\n          [nzMaxTagCount]=\"fieldSignal().maxTagCount!\"\r\n          [nzMaxMultipleCount]=\"fieldSignal().maxMultipleCount!\"\r\n          [nzDisabled]=\"true\"\r\n        >\r\n          @for (displayOption of displayOptionsValue; track $index) {\r\n            <nz-option [nzValue]=\"displayOption\" [nzLabel]=\"displayOption\"> </nz-option>\r\n          }\r\n        </nz-select>\r\n      } @else {\r\n        <input nz-input [value]=\"displayNoValueText\" [disabled]=\"true\" />\r\n      }\r\n    }\r\n\r\n    @if (fieldSignal().viewMode === viewModeEnum.text) {\r\n      @if (displayOptionsValue && displayOptionsValue.length) {\r\n        <ul class=\"view-list\">\r\n          @for (label of displayOptionsValue; track $index) {\r\n            <li>{{ label }}</li>\r\n          }\r\n        </ul>\r\n      } @else {\r\n        <span class=\"modeView\">{{ displayNoValueText }}</span>\r\n      }\r\n    }\r\n  } @else {\r\n    <nz-select\r\n      [id]=\"fieldSignal().key\"\r\n      nzShowSearch\r\n      nzAllowClear\r\n      [nzDisabled]=\"isDisabled\"\r\n      [nzMode]=\"'multiple'\"\r\n      [nzPlaceHolder]=\"fieldSignal().placeholder!\"\r\n      [nzMaxTagCount]=\"fieldSignal().maxTagCount!\"\r\n      [nzMaxMultipleCount]=\"fieldSignal().maxMultipleCount!\"\r\n      [nzSuffixIcon]=\"loading() ? loadingIcon : null\"\r\n      [ngModel]=\"value\"\r\n      (ngModelChange)=\"handleChangeOptions($event)\"\r\n    >\r\n      @for (option of options; track `${option[this.fieldSignal().bindValue]}-${$index}`) {\r\n        <nz-option [nzValue]=\"transformOptionValue(option)\" [nzLabel]=\"getOptionLabel(option)\">\r\n        </nz-option>\r\n      }\r\n    </nz-select>\r\n\r\n    <ng-template #loadingIcon>\r\n      <nz-spin nzSimple [nzSize]=\"'small'\"></nz-spin>\r\n    </ng-template>\r\n  }\r\n\r\n  <!-- Suffixes -->\r\n  @if (fieldSignal().suffixes.length > 0) {\r\n    @for (suffix of fieldSignal().suffixes; track $index) {\r\n      @if (suffix.visibleOn?.includes(this.modeSignal())) {\r\n        <app-suffix [suffixConfig]=\"suffix\" [formId]=\"formId\"> </app-suffix>\r\n      }\r\n    }\r\n  }\r\n</div>\r\n", styles: [".view-list{margin-bottom:0;padding-inline-start:24px!important}:host ::ng-deep .ant-input[disabled]{background-color:#fff;color:#575757!important;font-size:12px}:host ::ng-deep .ant-select-multiple.ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector{background:#fff}:host ::ng-deep .ant-select-disabled.ant-select-multiple .ant-select-selection-item{color:#575757;font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: i1$2.CommonModule }, { kind: "ngmodule", type: i1.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: "ngmodule", type: i1.ReactiveFormsModule }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i3$1.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i3$1.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus"], exportAs: ["nzSelect"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i1$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: NzSpinModule }, { kind: "component", type: i3$2.NzSpinComponent, selector: "nz-spin", inputs: ["nzIndicator", "nzSize", "nzTip", "nzDelay", "nzSimple", "nzSpinning"], exportAs: ["nzSpin"] }, { kind: "component", type: SuffixComponent, selector: "app-suffix", inputs: ["suffixConfig", "formId"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
@@ -4823,7 +2979,7 @@ class SingleSelectComponent extends BaseValueAccessor {
                 useExisting: forwardRef(() => SingleSelectComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex\">\r\n  @if (modeSignal() === formModeEnum.View) {\r\n    @if (fieldSignal().viewMode === viewModeEnum.form) {\r\n      <input [title]=\"displayValue\" nz-input [value]=\"displayValue\" class=\"modeView\" />\r\n    }\r\n    @if (fieldSignal().viewMode === viewModeEnum.text) {\r\n      <span [title]=\"displayValue\" class=\"modeView break-work\">{{ displayValue }}</span>\r\n    }\r\n  } @else {\r\n    <nz-select\r\n      [id]=\"fieldSignal().key\"\r\n      nzShowSearch\r\n      nzAllowClear\r\n      [nzDisabled]=\"isDisabled\"\r\n      [nzPlaceHolder]=\"fieldSignal().placeholder!\"\r\n      [nzSuffixIcon]=\"loadingSignal() ? loadingIcon : null\"\r\n      [title]=\"fieldSignal().tooltip || ''\"\r\n      [nzDropdownMatchSelectWidth]=\"fieldSignal().matchSelectWidth\"\r\n      [ngModel]=\"value\"\r\n      class=\"flex-1 select-box\"\r\n      (ngModelChange)=\"handleChangeOptions($event)\"\r\n    >\r\n      @for (option of options; track `${option[this.fieldSignal().bindValue]}-${$index}`) {\r\n        <nz-option [nzValue]=\"transformOptionValue(option)\" [nzLabel]=\"getOptionLabel(option)\">\r\n        </nz-option>\r\n      }\r\n    </nz-select>\r\n\r\n    <ng-template #loadingIcon>\r\n      <nz-spin nzSimple [nzSize]=\"'small'\"></nz-spin>\r\n    </ng-template>\r\n  }\r\n\r\n  <!-- Suffixes -->\r\n  @if (fieldSignal().suffixes.length > 0) {\r\n    @for (suffix of fieldSignal().suffixes; track $index) {\r\n      @if (suffix.visibleOn?.includes(this.modeSignal())) {\r\n        <app-suffix [suffixConfig]=\"suffix\" [formId]=\"formId\"> </app-suffix>\r\n      }\r\n    }\r\n  }\r\n</div>\r\n", styles: [".w-100{width:100%}.h-100{height:100%}.flex{display:flex}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.items-center{align-items:center}.mb-0{margin-bottom:0!important}.break-work{word-break:break-word}.modeView{pointer-events:none;color:#575757;font-size:12px}.select-box{min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: i1.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: "ngmodule", type: i1.ReactiveFormsModule }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i4$1.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i4$1.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus"], exportAs: ["nzSelect"] }, { kind: "ngmodule", type: NzSpinModule }, { kind: "component", type: i3$2.NzSpinComponent, selector: "nz-spin", inputs: ["nzIndicator", "nzSize", "nzTip", "nzDelay", "nzSimple", "nzSpinning"], exportAs: ["nzSpin"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i1$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: SuffixComponent, selector: "app-suffix", inputs: ["suffixConfig", "formId"] }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex\">\r\n  @if (modeSignal() === formModeEnum.View) {\r\n    @if (fieldSignal().viewMode === viewModeEnum.form) {\r\n      <input [title]=\"displayValue\" nz-input [value]=\"displayValue\" class=\"modeView\" />\r\n    }\r\n    @if (fieldSignal().viewMode === viewModeEnum.text) {\r\n      <span [title]=\"displayValue\" class=\"modeView break-work\">{{ displayValue }}</span>\r\n    }\r\n  } @else {\r\n    <nz-select\r\n      [id]=\"fieldSignal().key\"\r\n      nzShowSearch\r\n      nzAllowClear\r\n      [nzDisabled]=\"isDisabled\"\r\n      [nzPlaceHolder]=\"fieldSignal().placeholder!\"\r\n      [nzSuffixIcon]=\"loadingSignal() ? loadingIcon : null\"\r\n      [title]=\"fieldSignal().tooltip || ''\"\r\n      [nzDropdownMatchSelectWidth]=\"fieldSignal().matchSelectWidth\"\r\n      [ngModel]=\"value\"\r\n      class=\"flex-1 select-box\"\r\n      (ngModelChange)=\"handleChangeOptions($event)\"\r\n    >\r\n      @for (option of options; track `${option[this.fieldSignal().bindValue]}-${$index}`) {\r\n        <nz-option [nzValue]=\"transformOptionValue(option)\" [nzLabel]=\"getOptionLabel(option)\">\r\n        </nz-option>\r\n      }\r\n    </nz-select>\r\n\r\n    <ng-template #loadingIcon>\r\n      <nz-spin nzSimple [nzSize]=\"'small'\"></nz-spin>\r\n    </ng-template>\r\n  }\r\n\r\n  <!-- Suffixes -->\r\n  @if (fieldSignal().suffixes.length > 0) {\r\n    @for (suffix of fieldSignal().suffixes; track $index) {\r\n      @if (suffix.visibleOn?.includes(this.modeSignal())) {\r\n        <app-suffix [suffixConfig]=\"suffix\" [formId]=\"formId\"> </app-suffix>\r\n      }\r\n    }\r\n  }\r\n</div>\r\n", styles: [".w-100{width:100%}.h-100{height:100%}.flex{display:flex}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.items-center{align-items:center}.mb-0{margin-bottom:0!important}.break-work{word-break:break-word}.modeView{pointer-events:none;color:#575757;font-size:12px}.select-box{min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: i1.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: "ngmodule", type: i1.ReactiveFormsModule }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i3$1.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i3$1.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus"], exportAs: ["nzSelect"] }, { kind: "ngmodule", type: NzSpinModule }, { kind: "component", type: i3$2.NzSpinComponent, selector: "nz-spin", inputs: ["nzIndicator", "nzSize", "nzTip", "nzDelay", "nzSimple", "nzSpinning"], exportAs: ["nzSpin"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i1$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: SuffixComponent, selector: "app-suffix", inputs: ["suffixConfig", "formId"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SingleSelectComponent, decorators: [{
             type: Component,
@@ -5234,6 +3390,7 @@ class AvatarUploadComponent extends BaseValueAccessor {
         this.objStorageList = signal([]);
         this.fileService = inject(FileService);
         this.formConfigService = inject(FormConfigService);
+        this.nzNotification = inject(NzNotificationService);
         this.beforeUpload = (file, fileList) => {
             // const originFile = file?.originFileObj as unknown as File; // có thể ở version mới nhất đã fix lỗi NzUploadFile nhưng trả về File của tham số file.
             // Xử lý gán vào CVA để tiến hành validation theo các props đã truyền vào.
@@ -5372,8 +3529,9 @@ class MultiFileUploadComponent extends BaseValueAccessor {
         this.fieldSignal = computed(() => {
             const base = this.fieldInput();
             if (!(base instanceof MultiFileUploadField) ||
-                (base.type !== FieldTypeEnum.MultiFileUpload && base.controlType !== ControlTypeEnum.Upload)) {
-                throw new Error('Expected MultiFileUploadField');
+                (base.type !== FieldTypeEnum.MultiFileUpload &&
+                    base.controlType !== ControlTypeEnum.Upload)) {
+                throw new Error("Expected MultiFileUploadField");
             }
             return base;
         });
@@ -5382,7 +3540,7 @@ class MultiFileUploadComponent extends BaseValueAccessor {
         // Mảng đại diện các images.
         this.allFiles = signal([]);
         // Text hướng dẫn các loại extension được upload.
-        this.fileExtensionGuide = signal('');
+        this.fileExtensionGuide = signal("");
         // Đếm số file đã pass beforeUpload nhưng chưa upload xong (đang trong hàng chờ customRequest/uploadFile).
         // Dùng để tính toán count chính xác khi user chọn nhiều file cùng lúc.
         this.pendingCount = signal(0);
@@ -5394,6 +3552,7 @@ class MultiFileUploadComponent extends BaseValueAccessor {
         this.toast = inject(ToastrService);
         this.translate = inject(TranslateService);
         this.nzMessage = inject(NzMessageService);
+        this.nzNotification = inject(NzNotificationService);
         this.formConfigService = inject(FormConfigService);
         /**
          * Xử lý trước khi upload — trả về Observable<boolean> để hỗ trợ batch detection.
@@ -5405,7 +3564,7 @@ class MultiFileUploadComponent extends BaseValueAccessor {
          * batch một lần, cho phép kiểm tra tổng số lượng chính xác trước khi upload.
          */
         this.beforeUpload = (file) => {
-            return new Observable(subscriber => {
+            return new Observable((subscriber) => {
                 // Đẩy file vào buffer với hàm resolve tương ứng.
                 this._batchBuffer.push({
                     file,
@@ -5427,8 +3586,8 @@ class MultiFileUploadComponent extends BaseValueAccessor {
             const originFile = item.file;
             // Nếu validation không thỏa, dừng tại đây và xóa optimistic entry khỏi list.
             if (this.control?.invalid) {
-                this.pendingCount.update(c => Math.max(0, c - 1));
-                this.allFiles.update(curr => curr.filter(f => f.uid !== uid));
+                this.pendingCount.update((c) => Math.max(0, c - 1));
+                this.allFiles.update((curr) => curr.filter((f) => f.uid !== uid));
                 return of(null).subscribe(); // fake subscription.
             }
             // Validation đã thỏa, tiến hành upload file.
@@ -5439,7 +3598,7 @@ class MultiFileUploadComponent extends BaseValueAccessor {
             if (this.isAddOrEdit()) {
                 const field = untracked(() => this.fieldSignal());
                 const { acceptedMimeTypes } = field;
-                this.fileExtensionGuide.set(`Hỗ trợ các định dạng ${getExtensions(acceptedMimeTypes).join(', ')}`);
+                this.fileExtensionGuide.set(`Hỗ trợ các định dạng ${getExtensions(acceptedMimeTypes).join(", ")}`);
             }
         });
         // Trigger reset từ bên ngoài form.
@@ -5471,11 +3630,11 @@ class MultiFileUploadComponent extends BaseValueAccessor {
             this.objStorageList.set(objStorageList);
             // Khởi tạo danh sách MyUploadFile từ data json.
             // File từ server luôn ở trạng thái success.
-            const myUploadFiles = objStorageList.map(objStorage => ({
+            const myUploadFiles = objStorageList.map((objStorage) => ({
                 objStorage,
                 isTemp: false,
-                previewUrl: this.formConfigService.getViewFileUrl(objStorage.name ?? '', false),
-                uploadStatus: 'success',
+                previewUrl: this.formConfigService.getViewFileUrl(objStorage.name ?? "", false),
+                uploadStatus: "success",
             }));
             this.allFiles.set(myUploadFiles);
         }
@@ -5498,7 +3657,12 @@ class MultiFileUploadComponent extends BaseValueAccessor {
         const currentCount = this.allFiles().length + this.pendingCount();
         // ── CHECK 1: Tổng batch vượt maxFileCount → reject TOÀN BỘ batch ──
         if (currentCount + batch.length > maxFileCount) {
-            this.toast.warning(this.translate.instant(`Không thể tải lên: số lượng file chọn (${batch.length}) vượt quá giới hạn cho phép. Tối đa ${maxFileCount} tập tin.`));
+            // this.toast.warning(
+            //   this.translate.instant(
+            //     `Không thể tải lên: số lượng file chọn (${batch.length}) vượt quá giới hạn cho phép. Tối đa ${maxFileCount} tập tin.`,
+            //   ),
+            // );
+            this.nzNotification.warning("Cảnh báo", `Không thể tải lên: số lượng file tải lên vượt quá giới hạn cho phép. Tối đa ${maxFileCount} tập tin.`, { nzDuration: 4500 });
             batch.forEach(({ resolve }) => resolve(false));
             return;
         }
@@ -5506,7 +3670,7 @@ class MultiFileUploadComponent extends BaseValueAccessor {
         for (const { file, resolve } of batch) {
             const originFile = file;
             const fileSizeInMB = formatFileSize(file.size, FileSizeTypeEnum.MB);
-            const fileType = file.type ?? '';
+            const fileType = file.type ?? "";
             const isSizeOk = fileSizeInMB <= maxSizeInMB;
             const isMimeOk = acceptedMimeTypes.includes(fileType);
             if (!isSizeOk || !isMimeOk) {
@@ -5516,7 +3680,7 @@ class MultiFileUploadComponent extends BaseValueAccessor {
                     reasons.push(`định dạng không hợp lệ`);
                 if (!isSizeOk)
                     reasons.push(`kích thước vượt ${maxSizeInMB}MB`);
-                this.nzMessage.error(`"${file.name}" không được tải lên: ${reasons.join(', ')}.`);
+                this.nzMessage.error(`"${file.name}" không được tải lên: ${reasons.join(", ")}.`);
                 // Propagate để CVA/validator hiển thị trạng thái lỗi trên control.
                 this.propagateValue(originFile);
                 resolve(false);
@@ -5525,25 +3689,25 @@ class MultiFileUploadComponent extends BaseValueAccessor {
             // File hợp lệ: thêm optimistic entry vào allFiles với trạng thái loading ngay lập tức.
             // Dùng file.uid (do nz-upload tự tạo, duy nhất cho mỗi NzUploadFile) làm key để track và update sau này.
             const uid = file.uid;
-            this.allFiles.update(curr => [
+            this.allFiles.update((curr) => [
                 ...curr,
                 {
                     uid,
                     objStorage: { id: uid, name: originFile.name }, // placeholder, sẽ được thay bằng data thật sau khi upload
                     isTemp: true,
-                    previewUrl: '',
-                    uploadStatus: 'loading',
+                    previewUrl: "",
+                    uploadStatus: "loading",
                 },
             ]);
             // Propagate để trigger validator, tăng pendingCount, cho phép upload.
             this.propagateValue(originFile);
-            this.pendingCount.update(c => c + 1);
+            this.pendingCount.update((c) => c + 1);
             resolve(true);
         }
     }
     uploadFile(file, uid) {
         const { apiFileConfig, uploadTemp } = this.fieldSignal();
-        const newFileName = this.formConfigService.generateRandomFileName(file.name, 'file');
+        const newFileName = this.formConfigService.generateRandomFileName(file.name, "file");
         const renamedFile = new File([file], newFileName, { type: file.type });
         const mimeCfg = apiFileConfig.perMimeTypeConfig?.[file.type]; // Lấy mimeTypes file upload.
         const uploadUrl = mimeCfg?.uploadUrl ?? apiFileConfig.uploadUrl; // Nếu có config upload riêng cho mimeTypes đang kiểm tra.
@@ -5552,30 +3716,30 @@ class MultiFileUploadComponent extends BaseValueAccessor {
             : (() => {
                 // Mặc định
                 const fd = new FormData();
-                fd.append('File', renamedFile);
+                fd.append("File", renamedFile);
                 // fd.append('isTemp', 'true');
                 return fd;
             })();
         if (uploadTemp)
-            formData.append('isTemp', 'true');
+            formData.append("isTemp", "true");
         return this.fileService
             .uploadFile(renamedFile, formData, { uploadUrl })
             .pipe(this.takeUntilDestroy())
             .subscribe({
-            next: res => {
+            next: (res) => {
                 // Giảm pending dù thành công hay thất bại.
-                this.pendingCount.update(c => Math.max(0, c - 1));
+                this.pendingCount.update((c) => Math.max(0, c - 1));
                 const { code, data, message } = res;
                 if (code === 0) {
                     // Cập nhật objStorageList với data thật từ server.
-                    this.objStorageList.update(curr => [...curr, data]);
+                    this.objStorageList.update((curr) => [...curr, data]);
                     // Thay thế optimistic entry (uid) bằng data thật, chuyển sang trạng thái success.
-                    this.allFiles.update(curr => curr.map(f => f.uid === uid
+                    this.allFiles.update((curr) => curr.map((f) => f.uid === uid
                         ? {
                             ...f,
                             objStorage: data,
-                            previewUrl: this.formConfigService.getViewFileUrl(data.name ?? '', true),
-                            uploadStatus: 'success',
+                            previewUrl: this.formConfigService.getViewFileUrl(data.name ?? "", true),
+                            uploadStatus: "success",
                         }
                         : f));
                     this.patchFormData(this.fieldKey(), JSON.stringify(this.objStorageList()));
@@ -5584,7 +3748,9 @@ class MultiFileUploadComponent extends BaseValueAccessor {
                 }
                 else {
                     // Cập nhật optimistic entry sang trạng thái error.
-                    this.allFiles.update(curr => curr.map(f => f.uid === uid ? { ...f, uploadStatus: 'error' } : f));
+                    this.allFiles.update((curr) => curr.map((f) => f.uid === uid
+                        ? { ...f, uploadStatus: "error" }
+                        : f));
                     console.error(message);
                     // Đồng bộ control value → nếu tất cả file đều fail, objStorageList rỗng → required kích hoạt.
                     this._syncControlValue();
@@ -5592,10 +3758,12 @@ class MultiFileUploadComponent extends BaseValueAccessor {
             },
             error: () => {
                 // Giảm pending khi upload thất bại.
-                this.pendingCount.update(c => Math.max(0, c - 1));
+                this.pendingCount.update((c) => Math.max(0, c - 1));
                 // Cập nhật optimistic entry sang trạng thái error.
-                this.allFiles.update(curr => curr.map(f => (f.uid === uid ? { ...f, uploadStatus: 'error' } : f)));
-                console.error('Lỗi trong quá trình tải tập đến máy chủ!!');
+                this.allFiles.update((curr) => curr.map((f) => f.uid === uid
+                    ? { ...f, uploadStatus: "error" }
+                    : f));
+                console.error("Lỗi trong quá trình tải tập đến máy chủ!!");
                 // Đồng bộ control value → nếu tất cả file đều fail → required kích hoạt.
                 this._syncControlValue();
             },
@@ -5605,20 +3773,20 @@ class MultiFileUploadComponent extends BaseValueAccessor {
         const { objStorage, uploadStatus } = file;
         const { uploadTemp } = this.fieldSignal();
         // Loại bỏ và cập nhật danh sách ObjectStorage.
-        const newObjStorageList = this.objStorageList().filter(item => item.id !== objStorage?.id);
+        const newObjStorageList = this.objStorageList().filter((item) => item.id !== objStorage?.id);
         this.objStorageList.set(newObjStorageList);
         // Loại bỏ và cập nhật danh sách MyUploadFile.
-        const newAllFiles = this.allFiles().filter(item => item.objStorage?.id !== objStorage?.id);
+        const newAllFiles = this.allFiles().filter((item) => item.objStorage?.id !== objStorage?.id);
         this.allFiles.set(newAllFiles);
         // File ở trạng thái error: upload chưa thành công, không cần gọi API xoá trên server.
-        if (uploadStatus === 'error') {
+        if (uploadStatus === "error") {
             this.patchFormData(this.fieldKey(), JSON.stringify(this.objStorageList()));
             // Đồng bộ control value → nếu xóa hết file error còn lại → required kích hoạt.
             this._syncControlValue();
             return;
         }
         if (uploadTemp) {
-            this.deleteObjStorage(objStorage.id || '');
+            this.deleteObjStorage(objStorage.id || "");
             return;
         }
         // Cập nhật đầu ra cho form.
@@ -5628,13 +3796,15 @@ class MultiFileUploadComponent extends BaseValueAccessor {
     }
     deleteObjStorage(id) {
         return this.fileService
-            .deleteObjStorage(id, { deleteUrl: this.fieldSignal().apiFileConfig.deleteUrl })
+            .deleteObjStorage(id, {
+            deleteUrl: this.fieldSignal().apiFileConfig.deleteUrl,
+        })
             .pipe(this.takeUntilDestroy())
             .subscribe({
-            next: res => {
+            next: (res) => {
                 const { code, message } = res;
                 if (code === 0) {
-                    const newObjStorageList = this.objStorageList().filter(item => item.id !== id);
+                    const newObjStorageList = this.objStorageList().filter((item) => item.id !== id);
                     this.objStorageList.set(newObjStorageList);
                     this.patchFormData(this.fieldKey(), JSON.stringify(this.objStorageList()));
                     // Đồng bộ control value sau khi server xác nhận xóa.
@@ -5645,9 +3815,9 @@ class MultiFileUploadComponent extends BaseValueAccessor {
                 }
             },
             error: () => {
-                console.error('Lỗi trong quá trình xóa tập tin khỏi máy chủ!!');
+                console.error("Lỗi trong quá trình xóa tập tin khỏi máy chủ!!");
                 // Fake vì hiện api xóa đang có vấn đề.
-                const newObjStorageList = this.objStorageList().filter(item => item.id !== id);
+                const newObjStorageList = this.objStorageList().filter((item) => item.id !== id);
                 this.objStorageList.set(newObjStorageList);
                 this.patchFormData(this.fieldKey(), JSON.stringify(this.objStorageList()));
                 // Đồng bộ control value (fake delete thành công).
@@ -5662,7 +3832,7 @@ class MultiFileUploadComponent extends BaseValueAccessor {
      * - Gọi fileClick để xem file nếu đã upload thành công.
      */
     onFileItemClick(file) {
-        if (file.uploadStatus === 'loading' || file.uploadStatus === 'error')
+        if (file.uploadStatus === "loading" || file.uploadStatus === "error")
             return;
         this.fileService.onFileClick(file.objStorage);
     }
@@ -5699,7 +3869,7 @@ class MultiFileUploadComponent extends BaseValueAccessor {
     _syncControlValue() {
         const list = this.objStorageList();
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.propagateValue((list.length > 0 ? JSON.stringify(list) : ''));
+        this.propagateValue((list.length > 0 ? JSON.stringify(list) : ""));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MultiFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: MultiFileUploadComponent, isStandalone: true, selector: "app-multi-file-upload", providers: [
@@ -5708,17 +3878,17 @@ class MultiFileUploadComponent extends BaseValueAccessor {
                 useExisting: forwardRef(() => MultiFileUploadComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if (isAddOrEdit()) {\r\n  <nz-upload\r\n    [nzShowUploadList]=\"false\"\r\n    [nzMultiple]=\"true\"\r\n    [nzBeforeUpload]=\"beforeUpload\"\r\n    [nzCustomRequest]=\"customRequest\"\r\n  >\r\n    <button nz-button class=\"btn-upload\" nzType=\"primary\" nzSize=\"small\">\r\n      <nz-icon nzType=\"upload\" nzTheme=\"outline\" />\r\n      <span class=\"font-size-12\">T\u1EA3i l\u00EAn</span>\r\n    </button>\r\n\r\n    <span class=\"font-size-12\">( T\u1ED1i \u0111a {{ fieldSignal().maxFileCount }} t\u1EADp tin )</span>\r\n\r\n    @if (fieldSignal().showAcceptedExtensionGuide) {\r\n      <div class=\"file-extension-guide\">{{ fileExtensionGuide() }}</div>\r\n    }\r\n  </nz-upload>\r\n}\r\n\r\n<!-- Custom hi\u1EC3n th\u1ECB danh s\u00E1ch t\u1EADp tin -->\r\n@if (allFiles().length > 0) {\r\n  <ng-container *ngTemplateOutlet=\"renderFileTpl\"></ng-container>\r\n}\r\n\r\n<!-- Template custom hi\u1EC3n th\u1ECB danh s\u00E1ch t\u1EADp tin -->\r\n<ng-template #renderFileTpl>\r\n  <ul class=\"custom-upload-list\">\r\n    @for (file of allFiles(); track file.objStorage?.id) {\r\n      <li\r\n        class=\"upload-item\"\r\n        [class.is-loading]=\"file.uploadStatus === 'loading'\"\r\n        [class.is-error]=\"file.uploadStatus === 'error'\"\r\n        (click)=\"onFileItemClick(file)\"\r\n      >\r\n        <!-- Icon tr\u1EA1ng th\u00E1i b\u00EAn tr\u00E1i -->\r\n        @switch (file.uploadStatus) {\r\n          @case ('loading') {\r\n            <span\r\n              nz-icon\r\n              nzType=\"loading\"\r\n              nzTheme=\"outline\"\r\n              class=\"status-icon loading-icon\"\r\n            ></span>\r\n          }\r\n          @case ('error') {\r\n            <span\r\n              nz-icon\r\n              nzType=\"close-circle\"\r\n              nzTheme=\"fill\"\r\n              class=\"status-icon error-icon\"\r\n            ></span>\r\n          }\r\n          @default {\r\n            <span nz-icon nzType=\"paper-clip\" nzTheme=\"outline\" class=\"paper-clip-icon\"></span>\r\n          }\r\n        }\r\n\r\n        <span class=\"file-name\" [title]=\"file.objStorage.name ?? ''\">{{\r\n          file.objStorage.name\r\n        }}</span>\r\n\r\n        @if (isAddOrEdit() && file.uploadStatus !== 'loading') {\r\n          <span\r\n            nz-icon\r\n            nzType=\"delete\"\r\n            nzTheme=\"outline\"\r\n            title=\"X\u00F3a\"\r\n            class=\"delete-icon\"\r\n            (click)=\"handleDelete(file); $event.stopPropagation()\"\r\n          ></span>\r\n        }\r\n\r\n        @if (!isAddOrEdit() && file.uploadStatus !== 'error' && file.uploadStatus !== 'loading') {\r\n          <span nz-icon nzType=\"eye\" nzTheme=\"outline\" class=\"view-icon\" title=\"Xem file\"></span>\r\n        }\r\n      </li>\r\n    }\r\n  </ul>\r\n</ng-template>\r\n", styles: [".upload{display:flex}nz-upload .btn-upload{margin-right:.75rem}nz-upload .file-extension-guide{font-size:11px;margin-top:8px;font-style:italic;color:#0f766e}.custom-upload-list{margin-top:.625rem;list-style-type:none;padding-inline-start:10px}.custom-upload-list .upload-item{margin-bottom:.25rem;display:flex;align-items:center;max-width:100%;gap:.5rem;cursor:pointer;border-radius:4px;transition:background-color .15s ease}.custom-upload-list .upload-item .paper-clip-icon{margin-right:.5rem;color:#595959;flex-shrink:0}.custom-upload-list .upload-item .status-icon{flex-shrink:0}.custom-upload-list .upload-item .loading-icon{color:#1677ff}.custom-upload-list .upload-item .error-icon{color:#ff4d4f}.custom-upload-list .upload-item .file-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.custom-upload-list .upload-item .file-name:hover{text-decoration:underline;color:#0a4c9f;cursor:pointer}.custom-upload-list .upload-item .delete-icon{color:red;cursor:pointer;flex-shrink:0}.custom-upload-list .upload-item .view-icon{color:#1677ff;flex-shrink:0;opacity:.6;transition:opacity .15s ease}.custom-upload-list .upload-item:hover .view-icon{opacity:1}.custom-upload-list .upload-item.is-loading{cursor:default;opacity:.75}.custom-upload-list .upload-item.is-loading .file-name:hover{text-decoration:none;color:inherit;cursor:default}.custom-upload-list .upload-item.is-error{cursor:default}.custom-upload-list .upload-item.is-error .file-name{color:#ff4d4f}.custom-upload-list .upload-item.is-error .file-name:hover{text-decoration:none;color:#ff4d4f;cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: i1$2.CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NzUploadModule }, { kind: "component", type: i2$2.NzUploadComponent, selector: "nz-upload", inputs: ["nzType", "nzLimit", "nzSize", "nzFileType", "nzAccept", "nzAction", "nzDirectory", "nzOpenFileDialogOnClick", "nzBeforeUpload", "nzCustomRequest", "nzData", "nzFilter", "nzFileList", "nzDisabled", "nzHeaders", "nzListType", "nzMultiple", "nzName", "nzShowUploadList", "nzShowButton", "nzWithCredentials", "nzRemove", "nzPreview", "nzPreviewFile", "nzPreviewIsImage", "nzTransformFile", "nzDownload", "nzIconRender", "nzFileListRender"], outputs: ["nzChange", "nzFileListChange"], exportAs: ["nzUpload"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i4.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i5.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i6.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "@if (isAddOrEdit()) {\r\n  <nz-upload\r\n    [nzShowUploadList]=\"false\"\r\n    [nzMultiple]=\"true\"\r\n    [nzBeforeUpload]=\"beforeUpload\"\r\n    [nzCustomRequest]=\"customRequest\"\r\n  >\r\n    <button nz-button class=\"btn-upload\" nzType=\"primary\" nzSize=\"small\">\r\n      <nz-icon nzType=\"upload\" nzTheme=\"outline\" />\r\n      <span class=\"font-size-12\">T\u1EA3i l\u00EAn</span>\r\n    </button>\r\n\r\n    <span class=\"font-size-12\"\r\n      >( T\u1ED1i \u0111a {{ fieldSignal().maxFileCount }} t\u1EADp tin )</span\r\n    >\r\n\r\n    @if (fieldSignal().showAcceptedExtensionGuide) {\r\n      <div class=\"file-extension-guide\">{{ fileExtensionGuide() }}</div>\r\n    }\r\n  </nz-upload>\r\n}\r\n\r\n<!-- Custom hi\u1EC3n th\u1ECB danh s\u00E1ch t\u1EADp tin -->\r\n@if (allFiles().length > 0) {\r\n  <ng-container *ngTemplateOutlet=\"renderFileTpl\"></ng-container>\r\n}\r\n\r\n<!-- Template custom hi\u1EC3n th\u1ECB danh s\u00E1ch t\u1EADp tin -->\r\n<ng-template #renderFileTpl>\r\n  <ul class=\"custom-upload-list\">\r\n    @for (file of allFiles(); track file.objStorage?.id) {\r\n      <li\r\n        class=\"upload-item\"\r\n        [class.is-loading]=\"file.uploadStatus === 'loading'\"\r\n        [class.is-error]=\"file.uploadStatus === 'error'\"\r\n        (click)=\"onFileItemClick(file)\"\r\n      >\r\n        <!-- Icon tr\u1EA1ng th\u00E1i b\u00EAn tr\u00E1i -->\r\n        @switch (file.uploadStatus) {\r\n          @case (\"loading\") {\r\n            <span\r\n              nz-icon\r\n              nzType=\"loading\"\r\n              nzTheme=\"outline\"\r\n              class=\"status-icon loading-icon\"\r\n            ></span>\r\n          }\r\n          @case (\"error\") {\r\n            <span\r\n              nz-icon\r\n              nzType=\"close-circle\"\r\n              nzTheme=\"fill\"\r\n              class=\"status-icon error-icon\"\r\n            ></span>\r\n          }\r\n          @default {\r\n            <span\r\n              nz-icon\r\n              nzType=\"paper-clip\"\r\n              nzTheme=\"outline\"\r\n              class=\"paper-clip-icon\"\r\n            ></span>\r\n          }\r\n        }\r\n\r\n        <span class=\"file-name\" [title]=\"file.objStorage.name ?? ''\">{{\r\n          file.objStorage.name\r\n        }}</span>\r\n\r\n        @if (isAddOrEdit() && file.uploadStatus !== \"loading\") {\r\n          <span\r\n            nz-icon\r\n            nzType=\"delete\"\r\n            nzTheme=\"outline\"\r\n            title=\"X\u00F3a\"\r\n            class=\"delete-icon\"\r\n            (click)=\"handleDelete(file); $event.stopPropagation()\"\r\n          ></span>\r\n        }\r\n\r\n        @if (\r\n          !isAddOrEdit() &&\r\n          file.uploadStatus !== \"error\" &&\r\n          file.uploadStatus !== \"loading\"\r\n        ) {\r\n          <span\r\n            nz-icon\r\n            nzType=\"eye\"\r\n            nzTheme=\"outline\"\r\n            class=\"view-icon\"\r\n            title=\"Xem file\"\r\n          ></span>\r\n        }\r\n      </li>\r\n    }\r\n  </ul>\r\n</ng-template>\r\n", styles: [".upload{display:flex}nz-upload .btn-upload{margin-right:.75rem}nz-upload .file-extension-guide{font-size:11px;margin-top:8px;font-style:italic;color:#0f766e}.custom-upload-list{margin-top:.625rem;list-style-type:none;padding-inline-start:10px}.custom-upload-list .upload-item{margin-bottom:.25rem;display:flex;align-items:center;max-width:100%;gap:.5rem;cursor:pointer;border-radius:4px;transition:background-color .15s ease}.custom-upload-list .upload-item .paper-clip-icon{margin-right:.5rem;color:#595959;flex-shrink:0}.custom-upload-list .upload-item .status-icon{flex-shrink:0}.custom-upload-list .upload-item .loading-icon{color:#1677ff}.custom-upload-list .upload-item .error-icon{color:#ff4d4f}.custom-upload-list .upload-item .file-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.custom-upload-list .upload-item .file-name:hover{text-decoration:underline;color:#0a4c9f;cursor:pointer}.custom-upload-list .upload-item .delete-icon{color:red;cursor:pointer;flex-shrink:0}.custom-upload-list .upload-item .view-icon{color:#1677ff;flex-shrink:0;opacity:.6;transition:opacity .15s ease}.custom-upload-list .upload-item:hover .view-icon{opacity:1}.custom-upload-list .upload-item.is-loading{cursor:default;opacity:.75}.custom-upload-list .upload-item.is-loading .file-name:hover{text-decoration:none;color:inherit;cursor:default}.custom-upload-list .upload-item.is-error{cursor:default}.custom-upload-list .upload-item.is-error .file-name{color:#ff4d4f}.custom-upload-list .upload-item.is-error .file-name:hover{text-decoration:none;color:#ff4d4f;cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: i1$2.CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NzUploadModule }, { kind: "component", type: i2$2.NzUploadComponent, selector: "nz-upload", inputs: ["nzType", "nzLimit", "nzSize", "nzFileType", "nzAccept", "nzAction", "nzDirectory", "nzOpenFileDialogOnClick", "nzBeforeUpload", "nzCustomRequest", "nzData", "nzFilter", "nzFileList", "nzDisabled", "nzHeaders", "nzListType", "nzMultiple", "nzName", "nzShowUploadList", "nzShowButton", "nzWithCredentials", "nzRemove", "nzPreview", "nzPreviewFile", "nzPreviewIsImage", "nzTransformFile", "nzDownload", "nzIconRender", "nzFileListRender"], outputs: ["nzChange", "nzFileListChange"], exportAs: ["nzUpload"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i4.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i5.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i6.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MultiFileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-multi-file-upload', standalone: true, imports: [...CORE_MODULES, ...ZORRO_MODULES$4], providers: [
+            args: [{ selector: "app-multi-file-upload", standalone: true, imports: [...CORE_MODULES, ...ZORRO_MODULES$4], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => MultiFileUploadComponent),
                             multi: true,
                         },
-                    ], template: "@if (isAddOrEdit()) {\r\n  <nz-upload\r\n    [nzShowUploadList]=\"false\"\r\n    [nzMultiple]=\"true\"\r\n    [nzBeforeUpload]=\"beforeUpload\"\r\n    [nzCustomRequest]=\"customRequest\"\r\n  >\r\n    <button nz-button class=\"btn-upload\" nzType=\"primary\" nzSize=\"small\">\r\n      <nz-icon nzType=\"upload\" nzTheme=\"outline\" />\r\n      <span class=\"font-size-12\">T\u1EA3i l\u00EAn</span>\r\n    </button>\r\n\r\n    <span class=\"font-size-12\">( T\u1ED1i \u0111a {{ fieldSignal().maxFileCount }} t\u1EADp tin )</span>\r\n\r\n    @if (fieldSignal().showAcceptedExtensionGuide) {\r\n      <div class=\"file-extension-guide\">{{ fileExtensionGuide() }}</div>\r\n    }\r\n  </nz-upload>\r\n}\r\n\r\n<!-- Custom hi\u1EC3n th\u1ECB danh s\u00E1ch t\u1EADp tin -->\r\n@if (allFiles().length > 0) {\r\n  <ng-container *ngTemplateOutlet=\"renderFileTpl\"></ng-container>\r\n}\r\n\r\n<!-- Template custom hi\u1EC3n th\u1ECB danh s\u00E1ch t\u1EADp tin -->\r\n<ng-template #renderFileTpl>\r\n  <ul class=\"custom-upload-list\">\r\n    @for (file of allFiles(); track file.objStorage?.id) {\r\n      <li\r\n        class=\"upload-item\"\r\n        [class.is-loading]=\"file.uploadStatus === 'loading'\"\r\n        [class.is-error]=\"file.uploadStatus === 'error'\"\r\n        (click)=\"onFileItemClick(file)\"\r\n      >\r\n        <!-- Icon tr\u1EA1ng th\u00E1i b\u00EAn tr\u00E1i -->\r\n        @switch (file.uploadStatus) {\r\n          @case ('loading') {\r\n            <span\r\n              nz-icon\r\n              nzType=\"loading\"\r\n              nzTheme=\"outline\"\r\n              class=\"status-icon loading-icon\"\r\n            ></span>\r\n          }\r\n          @case ('error') {\r\n            <span\r\n              nz-icon\r\n              nzType=\"close-circle\"\r\n              nzTheme=\"fill\"\r\n              class=\"status-icon error-icon\"\r\n            ></span>\r\n          }\r\n          @default {\r\n            <span nz-icon nzType=\"paper-clip\" nzTheme=\"outline\" class=\"paper-clip-icon\"></span>\r\n          }\r\n        }\r\n\r\n        <span class=\"file-name\" [title]=\"file.objStorage.name ?? ''\">{{\r\n          file.objStorage.name\r\n        }}</span>\r\n\r\n        @if (isAddOrEdit() && file.uploadStatus !== 'loading') {\r\n          <span\r\n            nz-icon\r\n            nzType=\"delete\"\r\n            nzTheme=\"outline\"\r\n            title=\"X\u00F3a\"\r\n            class=\"delete-icon\"\r\n            (click)=\"handleDelete(file); $event.stopPropagation()\"\r\n          ></span>\r\n        }\r\n\r\n        @if (!isAddOrEdit() && file.uploadStatus !== 'error' && file.uploadStatus !== 'loading') {\r\n          <span nz-icon nzType=\"eye\" nzTheme=\"outline\" class=\"view-icon\" title=\"Xem file\"></span>\r\n        }\r\n      </li>\r\n    }\r\n  </ul>\r\n</ng-template>\r\n", styles: [".upload{display:flex}nz-upload .btn-upload{margin-right:.75rem}nz-upload .file-extension-guide{font-size:11px;margin-top:8px;font-style:italic;color:#0f766e}.custom-upload-list{margin-top:.625rem;list-style-type:none;padding-inline-start:10px}.custom-upload-list .upload-item{margin-bottom:.25rem;display:flex;align-items:center;max-width:100%;gap:.5rem;cursor:pointer;border-radius:4px;transition:background-color .15s ease}.custom-upload-list .upload-item .paper-clip-icon{margin-right:.5rem;color:#595959;flex-shrink:0}.custom-upload-list .upload-item .status-icon{flex-shrink:0}.custom-upload-list .upload-item .loading-icon{color:#1677ff}.custom-upload-list .upload-item .error-icon{color:#ff4d4f}.custom-upload-list .upload-item .file-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.custom-upload-list .upload-item .file-name:hover{text-decoration:underline;color:#0a4c9f;cursor:pointer}.custom-upload-list .upload-item .delete-icon{color:red;cursor:pointer;flex-shrink:0}.custom-upload-list .upload-item .view-icon{color:#1677ff;flex-shrink:0;opacity:.6;transition:opacity .15s ease}.custom-upload-list .upload-item:hover .view-icon{opacity:1}.custom-upload-list .upload-item.is-loading{cursor:default;opacity:.75}.custom-upload-list .upload-item.is-loading .file-name:hover{text-decoration:none;color:inherit;cursor:default}.custom-upload-list .upload-item.is-error{cursor:default}.custom-upload-list .upload-item.is-error .file-name{color:#ff4d4f}.custom-upload-list .upload-item.is-error .file-name:hover{text-decoration:none;color:#ff4d4f;cursor:default}\n"] }]
+                    ], template: "@if (isAddOrEdit()) {\r\n  <nz-upload\r\n    [nzShowUploadList]=\"false\"\r\n    [nzMultiple]=\"true\"\r\n    [nzBeforeUpload]=\"beforeUpload\"\r\n    [nzCustomRequest]=\"customRequest\"\r\n  >\r\n    <button nz-button class=\"btn-upload\" nzType=\"primary\" nzSize=\"small\">\r\n      <nz-icon nzType=\"upload\" nzTheme=\"outline\" />\r\n      <span class=\"font-size-12\">T\u1EA3i l\u00EAn</span>\r\n    </button>\r\n\r\n    <span class=\"font-size-12\"\r\n      >( T\u1ED1i \u0111a {{ fieldSignal().maxFileCount }} t\u1EADp tin )</span\r\n    >\r\n\r\n    @if (fieldSignal().showAcceptedExtensionGuide) {\r\n      <div class=\"file-extension-guide\">{{ fileExtensionGuide() }}</div>\r\n    }\r\n  </nz-upload>\r\n}\r\n\r\n<!-- Custom hi\u1EC3n th\u1ECB danh s\u00E1ch t\u1EADp tin -->\r\n@if (allFiles().length > 0) {\r\n  <ng-container *ngTemplateOutlet=\"renderFileTpl\"></ng-container>\r\n}\r\n\r\n<!-- Template custom hi\u1EC3n th\u1ECB danh s\u00E1ch t\u1EADp tin -->\r\n<ng-template #renderFileTpl>\r\n  <ul class=\"custom-upload-list\">\r\n    @for (file of allFiles(); track file.objStorage?.id) {\r\n      <li\r\n        class=\"upload-item\"\r\n        [class.is-loading]=\"file.uploadStatus === 'loading'\"\r\n        [class.is-error]=\"file.uploadStatus === 'error'\"\r\n        (click)=\"onFileItemClick(file)\"\r\n      >\r\n        <!-- Icon tr\u1EA1ng th\u00E1i b\u00EAn tr\u00E1i -->\r\n        @switch (file.uploadStatus) {\r\n          @case (\"loading\") {\r\n            <span\r\n              nz-icon\r\n              nzType=\"loading\"\r\n              nzTheme=\"outline\"\r\n              class=\"status-icon loading-icon\"\r\n            ></span>\r\n          }\r\n          @case (\"error\") {\r\n            <span\r\n              nz-icon\r\n              nzType=\"close-circle\"\r\n              nzTheme=\"fill\"\r\n              class=\"status-icon error-icon\"\r\n            ></span>\r\n          }\r\n          @default {\r\n            <span\r\n              nz-icon\r\n              nzType=\"paper-clip\"\r\n              nzTheme=\"outline\"\r\n              class=\"paper-clip-icon\"\r\n            ></span>\r\n          }\r\n        }\r\n\r\n        <span class=\"file-name\" [title]=\"file.objStorage.name ?? ''\">{{\r\n          file.objStorage.name\r\n        }}</span>\r\n\r\n        @if (isAddOrEdit() && file.uploadStatus !== \"loading\") {\r\n          <span\r\n            nz-icon\r\n            nzType=\"delete\"\r\n            nzTheme=\"outline\"\r\n            title=\"X\u00F3a\"\r\n            class=\"delete-icon\"\r\n            (click)=\"handleDelete(file); $event.stopPropagation()\"\r\n          ></span>\r\n        }\r\n\r\n        @if (\r\n          !isAddOrEdit() &&\r\n          file.uploadStatus !== \"error\" &&\r\n          file.uploadStatus !== \"loading\"\r\n        ) {\r\n          <span\r\n            nz-icon\r\n            nzType=\"eye\"\r\n            nzTheme=\"outline\"\r\n            class=\"view-icon\"\r\n            title=\"Xem file\"\r\n          ></span>\r\n        }\r\n      </li>\r\n    }\r\n  </ul>\r\n</ng-template>\r\n", styles: [".upload{display:flex}nz-upload .btn-upload{margin-right:.75rem}nz-upload .file-extension-guide{font-size:11px;margin-top:8px;font-style:italic;color:#0f766e}.custom-upload-list{margin-top:.625rem;list-style-type:none;padding-inline-start:10px}.custom-upload-list .upload-item{margin-bottom:.25rem;display:flex;align-items:center;max-width:100%;gap:.5rem;cursor:pointer;border-radius:4px;transition:background-color .15s ease}.custom-upload-list .upload-item .paper-clip-icon{margin-right:.5rem;color:#595959;flex-shrink:0}.custom-upload-list .upload-item .status-icon{flex-shrink:0}.custom-upload-list .upload-item .loading-icon{color:#1677ff}.custom-upload-list .upload-item .error-icon{color:#ff4d4f}.custom-upload-list .upload-item .file-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.custom-upload-list .upload-item .file-name:hover{text-decoration:underline;color:#0a4c9f;cursor:pointer}.custom-upload-list .upload-item .delete-icon{color:red;cursor:pointer;flex-shrink:0}.custom-upload-list .upload-item .view-icon{color:#1677ff;flex-shrink:0;opacity:.6;transition:opacity .15s ease}.custom-upload-list .upload-item:hover .view-icon{opacity:1}.custom-upload-list .upload-item.is-loading{cursor:default;opacity:.75}.custom-upload-list .upload-item.is-loading .file-name:hover{text-decoration:none;color:inherit;cursor:default}.custom-upload-list .upload-item.is-error{cursor:default}.custom-upload-list .upload-item.is-error .file-name{color:#ff4d4f}.custom-upload-list .upload-item.is-error .file-name:hover{text-decoration:none;color:#ff4d4f;cursor:default}\n"] }]
         }], ctorParameters: () => [] });
 
 const ZORRO_MODULES$3 = [NzUploadModule, NzIconModule, NzButtonModule, NzImageModule];
@@ -5741,6 +3911,7 @@ class MultiImageUploadComponent extends BaseValueAccessor {
         this.fileService = inject(FileService);
         this.toast = inject(ToastrService);
         this.translate = inject(TranslateService);
+        this.nzNotification = inject(NzNotificationService);
         this.formConfigService = inject(FormConfigService);
         // Xử lý trước khi upload.
         this.beforeUpload = (file) => {
@@ -5751,7 +3922,10 @@ class MultiImageUploadComponent extends BaseValueAccessor {
             const { maxFileCount, maxSizeInMB, acceptedMimeTypes } = this.fieldSignal();
             // Kiểm tra số lượng tối đa hình ảnh có thể tải lên.
             if (this.allFiles().length + 1 > maxFileCount) {
-                this.toast.warning(this.translate.instant(`Chỉ được phép tải lên tối đa ${maxFileCount} hình ảnh`));
+                // this.toast.warning(
+                //   this.translate.instant(`Chỉ được phép tải lên tối đa ${maxFileCount} hình ảnh`),
+                // );
+                this.nzNotification.warning('Cảnh báo', `Chỉ được phép tải lên tối đa ${maxFileCount} hình ảnh`, { nzDuration: 4500 });
                 return false;
             }
             const fileSizeInMB = formatFileSize(file.size, FileSizeTypeEnum.MB);
@@ -5937,6 +4111,7 @@ class SingleFileUploadComponent extends BaseValueAccessor {
         this.fileService = inject(FileService);
         this.toast = inject(ToastrService);
         this.translate = inject(TranslateService);
+        this.nzNotification = inject(NzNotificationService);
         this.formConfigService = inject(FormConfigService);
         this.beforeUpload = (file, fileList) => {
             // const originFile = file?.originFileObj as unknown as File; // có thể ở version mới nhất đã fix lỗi NzUploadFile nhưng trả về File của tham số file.
@@ -6140,7 +4315,6 @@ const FIELD_COMPONENTS = [
     MultiFileUploadComponent,
     MultiImageUploadComponent,
     AvatarUploadComponent,
-    ReminderTypeRadioComponent,
 ];
 
 class ValidationService {
@@ -6192,14 +4366,14 @@ class DynamicFieldComponent {
      * Lấy thông báo lỗi đầu tiên của trường đang thao tác dựa trên control và field.
      */
     getErrorMessage() {
-        return this.validationService.getFirstError(this.control(), this.field(), this.fields()) ?? '';
+        return (this.validationService.getFirstError(this.control(), this.field(), this.fields()) ?? "");
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DynamicFieldComponent, isStandalone: true, selector: "app-dynamic-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, formId: { classPropertyName: "formId", publicName: "formId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [formGroup]=\"formGroup()\">\r\n  <nz-form-item>\r\n    <nz-form-label\r\n      [nzXXl]=\"field().labelGrid.xxl ?? null\"\r\n      [nzXl]=\"field().labelGrid.xl ?? null\"\r\n      [nzLg]=\"field().labelGrid.lg ?? null\"\r\n      [nzMd]=\"field().labelGrid.md ?? null\"\r\n      [nzSm]=\"field().labelGrid.sm ?? null\"\r\n      [nzXs]=\"field().labelGrid.xs ?? null\"\r\n      [nzLabelAlign]=\"field().labelAlign\"\r\n    >\r\n      @if (field().required) {\r\n        <span class=\"required\">*</span>\r\n      }\r\n      <span class=\"form-label\">\r\n        {{ field().label }}\r\n        @if (field().sublabel) {\r\n          <span class=\"sub-label mb-sm\">{{ field().sublabel }}</span>\r\n        }\r\n      </span>\r\n    </nz-form-label>\r\n\r\n    <nz-form-control\r\n      [nzXXl]=\"field().controlGrid.xxl ?? null\"\r\n      [nzXl]=\"field().controlGrid.xl ?? null\"\r\n      [nzLg]=\"field().controlGrid.lg ?? null\"\r\n      [nzMd]=\"field().controlGrid.md ?? null\"\r\n      [nzSm]=\"field().controlGrid.sm ?? null\"\r\n      [nzXs]=\"field().controlGrid.xs ?? null\"\r\n      [nzErrorTip]=\"getErrorMessage()\"\r\n    >\r\n      @switch (field().type) {\r\n        <!-- Input text -->\r\n        @case (fieldTypeEnum.InputText) {\r\n          <app-input-text\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-input-text>\r\n        }\r\n\r\n        <!-- Input password -->\r\n        @case (fieldTypeEnum.InputPassword) {\r\n          @if (mode() === formModeEnum.Add) {\r\n            <app-input-password\r\n              [formControlName]=\"field().key\"\r\n              [fieldInput]=\"field()\"\r\n              [modeSignal]=\"mode()\"\r\n              [control]=\"control()\"\r\n              [formId]=\"formId()\"\r\n            ></app-input-password>\r\n          }\r\n        }\r\n\r\n        <!-- Textarea -->\r\n        @case (fieldTypeEnum.Textarea) {\r\n          <app-textarea\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-textarea>\r\n        }\r\n\r\n        <!-- Single select -->\r\n        @case (fieldTypeEnum.SingleSelect) {\r\n          <app-single-select\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-single-select>\r\n        }\r\n\r\n        <!-- Multi select -->\r\n        @case (fieldTypeEnum.MultiSelect) {\r\n          <app-multi-select\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-multi-select>\r\n        }\r\n\r\n        @case (fieldTypeEnum.TreeSelect) {\r\n          <app-tree-select\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-tree-select>\r\n        }\r\n\r\n        <!-- Date Picker -->\r\n        @case (fieldTypeEnum.DatePicker) {\r\n          <app-date-picker\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-date-picker>\r\n        }\r\n\r\n        <!-- Date Range -->\r\n        @case (fieldTypeEnum.DateRange) {\r\n          <app-date-range\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-date-range>\r\n        }\r\n\r\n        <!-- Single File Upload -->\r\n        @case (fieldTypeEnum.SingleFileUpload) {\r\n          <app-single-file-upload\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-single-file-upload>\r\n        }\r\n\r\n        <!-- Multi File Upload -->\r\n        @case (fieldTypeEnum.MultiFileUpload) {\r\n          <app-multi-file-upload\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-multi-file-upload>\r\n        }\r\n\r\n        <!-- Multi File Upload -->\r\n        @case (fieldTypeEnum.MultiImageUpload) {\r\n          <app-multi-image-upload\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-multi-image-upload>\r\n        }\r\n\r\n        <!-- Avatar -->\r\n        @case (fieldTypeEnum.AvatarUpload) {\r\n          <app-avatar-upload\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-avatar-upload>\r\n        }\r\n\r\n        <!-- Radio -->\r\n        @case (fieldTypeEnum.Radio) {\r\n          <span>Radio</span>\r\n        }\r\n\r\n        @case (fieldTypeEnum.ReminderTypeRadio) {\r\n          <app-reminder-type-radio\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-reminder-type-radio>\r\n        }\r\n\r\n        <!-- Checkbox -->\r\n        @case (fieldTypeEnum.Checkbox) {\r\n          <span>Checkbox</span>\r\n        }\r\n\r\n        <!-- Radio -->\r\n        @case (fieldTypeEnum.Radio) {\r\n          <span>Radio</span>\r\n        }\r\n\r\n        <!-- Switch -->\r\n        @case (fieldTypeEnum.Switch) {\r\n          <span>Switch</span>\r\n        }\r\n\r\n        <!-- Autocomplete -->\r\n        @case (fieldTypeEnum.Autocomplete) {\r\n          <span>Autocomplete</span>\r\n        }\r\n      }\r\n    </nz-form-control>\r\n  </nz-form-item>\r\n</div>\r\n", styles: [".required{color:red;font-weight:700;margin-right:4px}.form-label{white-space:normal!important;word-break:break-word;font-weight:500;font-size:12px}.sub-label{white-space:normal!important;word-break:break-word;font-size:11px;font-style:italic}:host ::ng-deep .ant-form-item{align-items:center}:host ::ng-deep .ant-form-item-label>label{display:inline-block!important}\n"], dependencies: [{ kind: "ngmodule", type: i1.FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: i1.ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i2$3.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$3.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "component", type: i3$3.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i3$3.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i3$3.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "component", type: InputTextComponent, selector: "app-input-text" }, { kind: "component", type: InputPasswordComponent, selector: "app-input-password" }, { kind: "component", type: SingleSelectComponent, selector: "app-single-select", inputs: ["isCustomInputText"] }, { kind: "component", type: MultiSelectComponent, selector: "app-multi-select" }, { kind: "component", type: TreeSelectComponent, selector: "app-tree-select", inputs: ["isCustomInputText"] }, { kind: "component", type: TextareaComponent, selector: "app-textarea" }, { kind: "component", type: DatePickerComponent, selector: "app-date-picker" }, { kind: "component", type: DateRangeComponent, selector: "app-date-range" }, { kind: "component", type: SingleFileUploadComponent, selector: "app-single-file-upload" }, { kind: "component", type: MultiFileUploadComponent, selector: "app-multi-file-upload" }, { kind: "component", type: MultiImageUploadComponent, selector: "app-multi-image-upload" }, { kind: "component", type: AvatarUploadComponent, selector: "app-avatar-upload", inputs: ["size"] }, { kind: "component", type: ReminderTypeRadioComponent, selector: "app-reminder-type-radio" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DynamicFieldComponent, isStandalone: true, selector: "app-dynamic-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, formId: { classPropertyName: "formId", publicName: "formId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [formGroup]=\"formGroup()\">\r\n  <nz-form-item>\r\n    <nz-form-label\r\n      [nzXXl]=\"field().labelGrid.xxl ?? null\"\r\n      [nzXl]=\"field().labelGrid.xl ?? null\"\r\n      [nzLg]=\"field().labelGrid.lg ?? null\"\r\n      [nzMd]=\"field().labelGrid.md ?? null\"\r\n      [nzSm]=\"field().labelGrid.sm ?? null\"\r\n      [nzXs]=\"field().labelGrid.xs ?? null\"\r\n      [nzLabelAlign]=\"field().labelAlign\"\r\n    >\r\n      @if (field().required) {\r\n        <span class=\"required\">*</span>\r\n      }\r\n      <span class=\"form-label\">\r\n        {{ field().label }}\r\n        @if (field().sublabel) {\r\n          <span class=\"sub-label mb-sm\">{{ field().sublabel }}</span>\r\n        }\r\n      </span>\r\n    </nz-form-label>\r\n\r\n    <nz-form-control\r\n      [nzXXl]=\"field().controlGrid.xxl ?? null\"\r\n      [nzXl]=\"field().controlGrid.xl ?? null\"\r\n      [nzLg]=\"field().controlGrid.lg ?? null\"\r\n      [nzMd]=\"field().controlGrid.md ?? null\"\r\n      [nzSm]=\"field().controlGrid.sm ?? null\"\r\n      [nzXs]=\"field().controlGrid.xs ?? null\"\r\n      [nzErrorTip]=\"getErrorMessage()\"\r\n    >\r\n      @switch (field().type) {\r\n        <!-- Input text -->\r\n        @case (fieldTypeEnum.InputText) {\r\n          <app-input-text\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-input-text>\r\n        }\r\n\r\n        <!-- Input password -->\r\n        @case (fieldTypeEnum.InputPassword) {\r\n          @if (mode() === formModeEnum.Add) {\r\n            <app-input-password\r\n              [formControlName]=\"field().key\"\r\n              [fieldInput]=\"field()\"\r\n              [modeSignal]=\"mode()\"\r\n              [control]=\"control()\"\r\n              [formId]=\"formId()\"\r\n            ></app-input-password>\r\n          }\r\n        }\r\n\r\n        <!-- Textarea -->\r\n        @case (fieldTypeEnum.Textarea) {\r\n          <app-textarea\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-textarea>\r\n        }\r\n\r\n        <!-- Single select -->\r\n        @case (fieldTypeEnum.SingleSelect) {\r\n          <app-single-select\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-single-select>\r\n        }\r\n\r\n        <!-- Multi select -->\r\n        @case (fieldTypeEnum.MultiSelect) {\r\n          <app-multi-select\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-multi-select>\r\n        }\r\n\r\n        @case (fieldTypeEnum.TreeSelect) {\r\n          <app-tree-select\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-tree-select>\r\n        }\r\n\r\n        <!-- Date Picker -->\r\n        @case (fieldTypeEnum.DatePicker) {\r\n          <app-date-picker\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-date-picker>\r\n        }\r\n\r\n        <!-- Date Range -->\r\n        @case (fieldTypeEnum.DateRange) {\r\n          <app-date-range\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-date-range>\r\n        }\r\n\r\n        <!-- Single File Upload -->\r\n        @case (fieldTypeEnum.SingleFileUpload) {\r\n          <app-single-file-upload\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-single-file-upload>\r\n        }\r\n\r\n        <!-- Multi File Upload -->\r\n        @case (fieldTypeEnum.MultiFileUpload) {\r\n          <app-multi-file-upload\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-multi-file-upload>\r\n        }\r\n\r\n        <!-- Multi File Upload -->\r\n        @case (fieldTypeEnum.MultiImageUpload) {\r\n          <app-multi-image-upload\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-multi-image-upload>\r\n        }\r\n\r\n        <!-- Avatar -->\r\n        @case (fieldTypeEnum.AvatarUpload) {\r\n          <app-avatar-upload\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-avatar-upload>\r\n        }\r\n\r\n        <!-- Radio -->\r\n        @case (fieldTypeEnum.Radio) {\r\n          <span>Radio</span>\r\n        }\r\n\r\n        <!-- Checkbox -->\r\n        @case (fieldTypeEnum.Checkbox) {\r\n          <span>Checkbox</span>\r\n        }\r\n\r\n        <!-- Radio -->\r\n        @case (fieldTypeEnum.Radio) {\r\n          <span>Radio</span>\r\n        }\r\n\r\n        <!-- Switch -->\r\n        @case (fieldTypeEnum.Switch) {\r\n          <span>Switch</span>\r\n        }\r\n\r\n        <!-- Autocomplete -->\r\n        @case (fieldTypeEnum.Autocomplete) {\r\n          <span>Autocomplete</span>\r\n        }\r\n      }\r\n    </nz-form-control>\r\n  </nz-form-item>\r\n</div>\r\n", styles: [".required{color:red;font-weight:700;margin-right:4px}.form-label{white-space:normal!important;word-break:break-word;font-weight:500;font-size:12px}.sub-label{white-space:normal!important;word-break:break-word;font-size:11px;font-style:italic}:host ::ng-deep .ant-form-item{align-items:center}:host ::ng-deep .ant-form-item-label>label{display:inline-block!important}\n"], dependencies: [{ kind: "ngmodule", type: i1.FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: i1.ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i2$3.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$3.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "component", type: i3$3.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i3$3.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i3$3.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "component", type: InputTextComponent, selector: "app-input-text" }, { kind: "component", type: InputPasswordComponent, selector: "app-input-password" }, { kind: "component", type: SingleSelectComponent, selector: "app-single-select", inputs: ["isCustomInputText"] }, { kind: "component", type: MultiSelectComponent, selector: "app-multi-select" }, { kind: "component", type: TreeSelectComponent, selector: "app-tree-select", inputs: ["isCustomInputText"] }, { kind: "component", type: TextareaComponent, selector: "app-textarea" }, { kind: "component", type: DatePickerComponent, selector: "app-date-picker" }, { kind: "component", type: DateRangeComponent, selector: "app-date-range" }, { kind: "component", type: SingleFileUploadComponent, selector: "app-single-file-upload" }, { kind: "component", type: MultiFileUploadComponent, selector: "app-multi-file-upload" }, { kind: "component", type: MultiImageUploadComponent, selector: "app-multi-image-upload" }, { kind: "component", type: AvatarUploadComponent, selector: "app-avatar-upload", inputs: ["size"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-dynamic-field', standalone: true, imports: [...FORM_MODULES, ...ZORRO_MODULES$1, ...COMPONENTS$1], template: "<div [formGroup]=\"formGroup()\">\r\n  <nz-form-item>\r\n    <nz-form-label\r\n      [nzXXl]=\"field().labelGrid.xxl ?? null\"\r\n      [nzXl]=\"field().labelGrid.xl ?? null\"\r\n      [nzLg]=\"field().labelGrid.lg ?? null\"\r\n      [nzMd]=\"field().labelGrid.md ?? null\"\r\n      [nzSm]=\"field().labelGrid.sm ?? null\"\r\n      [nzXs]=\"field().labelGrid.xs ?? null\"\r\n      [nzLabelAlign]=\"field().labelAlign\"\r\n    >\r\n      @if (field().required) {\r\n        <span class=\"required\">*</span>\r\n      }\r\n      <span class=\"form-label\">\r\n        {{ field().label }}\r\n        @if (field().sublabel) {\r\n          <span class=\"sub-label mb-sm\">{{ field().sublabel }}</span>\r\n        }\r\n      </span>\r\n    </nz-form-label>\r\n\r\n    <nz-form-control\r\n      [nzXXl]=\"field().controlGrid.xxl ?? null\"\r\n      [nzXl]=\"field().controlGrid.xl ?? null\"\r\n      [nzLg]=\"field().controlGrid.lg ?? null\"\r\n      [nzMd]=\"field().controlGrid.md ?? null\"\r\n      [nzSm]=\"field().controlGrid.sm ?? null\"\r\n      [nzXs]=\"field().controlGrid.xs ?? null\"\r\n      [nzErrorTip]=\"getErrorMessage()\"\r\n    >\r\n      @switch (field().type) {\r\n        <!-- Input text -->\r\n        @case (fieldTypeEnum.InputText) {\r\n          <app-input-text\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-input-text>\r\n        }\r\n\r\n        <!-- Input password -->\r\n        @case (fieldTypeEnum.InputPassword) {\r\n          @if (mode() === formModeEnum.Add) {\r\n            <app-input-password\r\n              [formControlName]=\"field().key\"\r\n              [fieldInput]=\"field()\"\r\n              [modeSignal]=\"mode()\"\r\n              [control]=\"control()\"\r\n              [formId]=\"formId()\"\r\n            ></app-input-password>\r\n          }\r\n        }\r\n\r\n        <!-- Textarea -->\r\n        @case (fieldTypeEnum.Textarea) {\r\n          <app-textarea\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-textarea>\r\n        }\r\n\r\n        <!-- Single select -->\r\n        @case (fieldTypeEnum.SingleSelect) {\r\n          <app-single-select\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-single-select>\r\n        }\r\n\r\n        <!-- Multi select -->\r\n        @case (fieldTypeEnum.MultiSelect) {\r\n          <app-multi-select\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-multi-select>\r\n        }\r\n\r\n        @case (fieldTypeEnum.TreeSelect) {\r\n          <app-tree-select\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-tree-select>\r\n        }\r\n\r\n        <!-- Date Picker -->\r\n        @case (fieldTypeEnum.DatePicker) {\r\n          <app-date-picker\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-date-picker>\r\n        }\r\n\r\n        <!-- Date Range -->\r\n        @case (fieldTypeEnum.DateRange) {\r\n          <app-date-range\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-date-range>\r\n        }\r\n\r\n        <!-- Single File Upload -->\r\n        @case (fieldTypeEnum.SingleFileUpload) {\r\n          <app-single-file-upload\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-single-file-upload>\r\n        }\r\n\r\n        <!-- Multi File Upload -->\r\n        @case (fieldTypeEnum.MultiFileUpload) {\r\n          <app-multi-file-upload\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-multi-file-upload>\r\n        }\r\n\r\n        <!-- Multi File Upload -->\r\n        @case (fieldTypeEnum.MultiImageUpload) {\r\n          <app-multi-image-upload\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-multi-image-upload>\r\n        }\r\n\r\n        <!-- Avatar -->\r\n        @case (fieldTypeEnum.AvatarUpload) {\r\n          <app-avatar-upload\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-avatar-upload>\r\n        }\r\n\r\n        <!-- Radio -->\r\n        @case (fieldTypeEnum.Radio) {\r\n          <span>Radio</span>\r\n        }\r\n\r\n        @case (fieldTypeEnum.ReminderTypeRadio) {\r\n          <app-reminder-type-radio\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-reminder-type-radio>\r\n        }\r\n\r\n        <!-- Checkbox -->\r\n        @case (fieldTypeEnum.Checkbox) {\r\n          <span>Checkbox</span>\r\n        }\r\n\r\n        <!-- Radio -->\r\n        @case (fieldTypeEnum.Radio) {\r\n          <span>Radio</span>\r\n        }\r\n\r\n        <!-- Switch -->\r\n        @case (fieldTypeEnum.Switch) {\r\n          <span>Switch</span>\r\n        }\r\n\r\n        <!-- Autocomplete -->\r\n        @case (fieldTypeEnum.Autocomplete) {\r\n          <span>Autocomplete</span>\r\n        }\r\n      }\r\n    </nz-form-control>\r\n  </nz-form-item>\r\n</div>\r\n", styles: [".required{color:red;font-weight:700;margin-right:4px}.form-label{white-space:normal!important;word-break:break-word;font-weight:500;font-size:12px}.sub-label{white-space:normal!important;word-break:break-word;font-size:11px;font-style:italic}:host ::ng-deep .ant-form-item{align-items:center}:host ::ng-deep .ant-form-item-label>label{display:inline-block!important}\n"] }]
+            args: [{ selector: "app-dynamic-field", standalone: true, imports: [...FORM_MODULES, ...ZORRO_MODULES$1, ...COMPONENTS$1], template: "<div [formGroup]=\"formGroup()\">\r\n  <nz-form-item>\r\n    <nz-form-label\r\n      [nzXXl]=\"field().labelGrid.xxl ?? null\"\r\n      [nzXl]=\"field().labelGrid.xl ?? null\"\r\n      [nzLg]=\"field().labelGrid.lg ?? null\"\r\n      [nzMd]=\"field().labelGrid.md ?? null\"\r\n      [nzSm]=\"field().labelGrid.sm ?? null\"\r\n      [nzXs]=\"field().labelGrid.xs ?? null\"\r\n      [nzLabelAlign]=\"field().labelAlign\"\r\n    >\r\n      @if (field().required) {\r\n        <span class=\"required\">*</span>\r\n      }\r\n      <span class=\"form-label\">\r\n        {{ field().label }}\r\n        @if (field().sublabel) {\r\n          <span class=\"sub-label mb-sm\">{{ field().sublabel }}</span>\r\n        }\r\n      </span>\r\n    </nz-form-label>\r\n\r\n    <nz-form-control\r\n      [nzXXl]=\"field().controlGrid.xxl ?? null\"\r\n      [nzXl]=\"field().controlGrid.xl ?? null\"\r\n      [nzLg]=\"field().controlGrid.lg ?? null\"\r\n      [nzMd]=\"field().controlGrid.md ?? null\"\r\n      [nzSm]=\"field().controlGrid.sm ?? null\"\r\n      [nzXs]=\"field().controlGrid.xs ?? null\"\r\n      [nzErrorTip]=\"getErrorMessage()\"\r\n    >\r\n      @switch (field().type) {\r\n        <!-- Input text -->\r\n        @case (fieldTypeEnum.InputText) {\r\n          <app-input-text\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-input-text>\r\n        }\r\n\r\n        <!-- Input password -->\r\n        @case (fieldTypeEnum.InputPassword) {\r\n          @if (mode() === formModeEnum.Add) {\r\n            <app-input-password\r\n              [formControlName]=\"field().key\"\r\n              [fieldInput]=\"field()\"\r\n              [modeSignal]=\"mode()\"\r\n              [control]=\"control()\"\r\n              [formId]=\"formId()\"\r\n            ></app-input-password>\r\n          }\r\n        }\r\n\r\n        <!-- Textarea -->\r\n        @case (fieldTypeEnum.Textarea) {\r\n          <app-textarea\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-textarea>\r\n        }\r\n\r\n        <!-- Single select -->\r\n        @case (fieldTypeEnum.SingleSelect) {\r\n          <app-single-select\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-single-select>\r\n        }\r\n\r\n        <!-- Multi select -->\r\n        @case (fieldTypeEnum.MultiSelect) {\r\n          <app-multi-select\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-multi-select>\r\n        }\r\n\r\n        @case (fieldTypeEnum.TreeSelect) {\r\n          <app-tree-select\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-tree-select>\r\n        }\r\n\r\n        <!-- Date Picker -->\r\n        @case (fieldTypeEnum.DatePicker) {\r\n          <app-date-picker\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-date-picker>\r\n        }\r\n\r\n        <!-- Date Range -->\r\n        @case (fieldTypeEnum.DateRange) {\r\n          <app-date-range\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-date-range>\r\n        }\r\n\r\n        <!-- Single File Upload -->\r\n        @case (fieldTypeEnum.SingleFileUpload) {\r\n          <app-single-file-upload\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-single-file-upload>\r\n        }\r\n\r\n        <!-- Multi File Upload -->\r\n        @case (fieldTypeEnum.MultiFileUpload) {\r\n          <app-multi-file-upload\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-multi-file-upload>\r\n        }\r\n\r\n        <!-- Multi File Upload -->\r\n        @case (fieldTypeEnum.MultiImageUpload) {\r\n          <app-multi-image-upload\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-multi-image-upload>\r\n        }\r\n\r\n        <!-- Avatar -->\r\n        @case (fieldTypeEnum.AvatarUpload) {\r\n          <app-avatar-upload\r\n            [formControlName]=\"field().key\"\r\n            [fieldInput]=\"field()\"\r\n            [modeSignal]=\"mode()\"\r\n            [control]=\"control()\"\r\n            [formId]=\"formId()\"\r\n          ></app-avatar-upload>\r\n        }\r\n\r\n        <!-- Radio -->\r\n        @case (fieldTypeEnum.Radio) {\r\n          <span>Radio</span>\r\n        }\r\n\r\n        <!-- Checkbox -->\r\n        @case (fieldTypeEnum.Checkbox) {\r\n          <span>Checkbox</span>\r\n        }\r\n\r\n        <!-- Radio -->\r\n        @case (fieldTypeEnum.Radio) {\r\n          <span>Radio</span>\r\n        }\r\n\r\n        <!-- Switch -->\r\n        @case (fieldTypeEnum.Switch) {\r\n          <span>Switch</span>\r\n        }\r\n\r\n        <!-- Autocomplete -->\r\n        @case (fieldTypeEnum.Autocomplete) {\r\n          <span>Autocomplete</span>\r\n        }\r\n      }\r\n    </nz-form-control>\r\n  </nz-form-item>\r\n</div>\r\n", styles: [".required{color:red;font-weight:700;margin-right:4px}.form-label{white-space:normal!important;word-break:break-word;font-weight:500;font-size:12px}.sub-label{white-space:normal!important;word-break:break-word;font-size:11px;font-style:italic}:host ::ng-deep .ant-form-item{align-items:center}:host ::ng-deep .ant-form-item-label>label{display:inline-block!important}\n"] }]
         }] });
 
 const ZORRO_MODULES = [NzFormModule, NzGridModule, NzCollapseModule];
@@ -6385,7 +4559,7 @@ class DynamicFormComponent {
         return field.key || `field-${index}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicFormComponent, deps: [{ token: DynamicFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DynamicFormComponent, isStandalone: true, selector: "app-dynamic-forms", inputs: { formId: { classPropertyName: "formId", publicName: "formId", isSignal: false, isRequired: false, transformFunction: null }, valueChangesDebounceTime: { classPropertyName: "valueChangesDebounceTime", publicName: "valueChangesDebounceTime", isSignal: false, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, fieldGroups: { classPropertyName: "fieldGroups", publicName: "fieldGroups", isSignal: true, isRequired: false, transformFunction: null }, displayNonGroupedFields: { classPropertyName: "displayNonGroupedFields", publicName: "displayNonGroupedFields", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formValueChanges: "formValueChanges", formSubmit: "formSubmit", formInvalid: "formInvalid" }, ngImport: i0, template: "@if (formGroup) {\r\n  <form [formGroup]=\"formGroup\">\r\n    @if (oldFields().length > 0) {\r\n      <!-- 1. N\u1EBFu kh\u00F4ng c\u00F3 groups th\u00EC render t\u1EEB fields -->\r\n      @if (!fieldGroups() || fieldGroups().length === 0) {\r\n        <div nz-row [nzGutter]=\"[12, 0]\">\r\n          @for (field of oldFields(); track field?.id) {\r\n            @if (!isHiddenField(field)) {\r\n              <div\r\n                nz-col\r\n                [nzXXl]=\"field?.grid?.xxl ?? null\"\r\n                [nzXl]=\"field?.grid?.xl ?? null\"\r\n                [nzLg]=\"field?.grid?.lg ?? null\"\r\n                [nzMd]=\"field?.grid?.md ?? null\"\r\n                [nzSm]=\"field?.grid?.sm ?? null\"\r\n                [nzXs]=\"field?.grid?.xs ?? null\"\r\n                [nzFlex]=\"\r\n                  !field?.grid?.xs &&\r\n                  !field?.grid?.sm &&\r\n                  !field?.grid?.md &&\r\n                  !field?.grid?.lg &&\r\n                  !field?.grid?.xl &&\r\n                  !field?.grid?.xxl\r\n                    ? '1 0 0'\r\n                    : null\r\n                \"\r\n                class=\"field\"\r\n              >\r\n                <app-dynamic-field\r\n                  [field]=\"field\"\r\n                  [fields]=\"oldFields()\"\r\n                  [mode]=\"mode()\"\r\n                  [control]=\"formGroup.get(field.key)!\"\r\n                  [formGroup]=\"formGroup\"\r\n                  [formId]=\"formId\"\r\n                />\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <!-- 2. N\u1EBFu c\u00F3 groups th\u00EC render t\u1EEB groupedFields -->\r\n      @if (fieldGroups() && fieldGroups().length > 0) {\r\n        <!-- C\u00E1c field noGroup -->\r\n        @if (groupedFields().noGroup.length > 0 && displayNonGroupedFields()) {\r\n          <div nz-row [nzGutter]=\"24\">\r\n            @for (field of groupedFields().noGroup; track field?.id) {\r\n              @if (!isHiddenField(field)) {\r\n                <div\r\n                  nz-col\r\n                  [nzXXl]=\"field?.grid?.xxl ?? null\"\r\n                  [nzXl]=\"field?.grid?.xl ?? null\"\r\n                  [nzLg]=\"field?.grid?.lg ?? null\"\r\n                  [nzMd]=\"field?.grid?.md ?? null\"\r\n                  [nzSm]=\"field?.grid?.sm ?? null\"\r\n                  [nzXs]=\"field?.grid?.xs ?? null\"\r\n                  class=\"field\"\r\n                >\r\n                  <app-dynamic-field\r\n                    [field]=\"field\"\r\n                    [fields]=\"oldFields()\"\r\n                    [mode]=\"mode()\"\r\n                    [control]=\"formGroup.get(field.key)!\"\r\n                    [formGroup]=\"formGroup\"\r\n                    [formId]=\"formId\"\r\n                  />\r\n                </div>\r\n              }\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <!-- Group c\u00E1c field -->\r\n        @if (groupedFields().grouped.length > 0) {\r\n          <nz-collapse [nzBordered]=\"false\">\r\n            @for (groupField of groupedFields().grouped; track groupField.group.code) {\r\n              <nz-collapse-panel\r\n                [nzHeader]=\"groupField.group.template ?? groupField.group.label\"\r\n                [nzActive]=\"groupField.group.isActive\"\r\n                [nzShowArrow]=\"groupField.group.showArrow\"\r\n                [nzDisabled]=\"groupField.group.disabled\"\r\n                [style]=\"collapseCustomStyle\"\r\n                class=\"mt-sm\"\r\n              >\r\n                <div nz-row [nzGutter]=\"24\">\r\n                  @for (field of groupField.fields; track field?.id) {\r\n                    @if (!isHiddenField(field)) {\r\n                      <div\r\n                        nz-col\r\n                        [nzXXl]=\"field?.grid?.xxl ?? null\"\r\n                        [nzXl]=\"field?.grid?.xl ?? null\"\r\n                        [nzLg]=\"field?.grid?.lg ?? null\"\r\n                        [nzMd]=\"field?.grid?.md ?? null\"\r\n                        [nzSm]=\"field?.grid?.sm ?? null\"\r\n                        [nzXs]=\"field?.grid?.xs ?? null\"\r\n                        class=\"field\"\r\n                      >\r\n                        <app-dynamic-field\r\n                          [field]=\"field\"\r\n                          [fields]=\"oldFields()\"\r\n                          [mode]=\"mode()\"\r\n                          [control]=\"formGroup.get(field.key)!\"\r\n                          [formGroup]=\"formGroup\"\r\n                          [formId]=\"formId\"\r\n                        />\r\n                      </div>\r\n                    }\r\n                  }\r\n                </div>\r\n              </nz-collapse-panel>\r\n            }\r\n          </nz-collapse>\r\n        }\r\n      }\r\n    }\r\n  </form>\r\n}\r\n", styles: [":host ::ng-deep .ant-collapse .ant-collapse-item-disabled>.ant-collapse-header,:host ::ng-deep .ant-collapse .ant-collapse-item-disabled>.ant-collapse-header>.arrow{color:#575757;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: i1.FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: i1.ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i2$3.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$3.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: NzCollapseModule }, { kind: "component", type: i4$2.NzCollapsePanelComponent, selector: "nz-collapse-panel", inputs: ["nzActive", "nzDisabled", "nzShowArrow", "nzExtra", "nzHeader", "nzExpandedIcon"], outputs: ["nzActiveChange"], exportAs: ["nzCollapsePanel"] }, { kind: "component", type: i4$2.NzCollapseComponent, selector: "nz-collapse", inputs: ["nzAccordion", "nzBordered", "nzGhost", "nzExpandIconPosition"], exportAs: ["nzCollapse"] }, { kind: "component", type: DynamicFieldComponent, selector: "app-dynamic-field", inputs: ["field", "fields", "mode", "control", "formGroup", "formId"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DynamicFormComponent, isStandalone: true, selector: "app-dynamic-forms", inputs: { formId: { classPropertyName: "formId", publicName: "formId", isSignal: false, isRequired: false, transformFunction: null }, valueChangesDebounceTime: { classPropertyName: "valueChangesDebounceTime", publicName: "valueChangesDebounceTime", isSignal: false, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, fieldGroups: { classPropertyName: "fieldGroups", publicName: "fieldGroups", isSignal: true, isRequired: false, transformFunction: null }, displayNonGroupedFields: { classPropertyName: "displayNonGroupedFields", publicName: "displayNonGroupedFields", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formValueChanges: "formValueChanges", formSubmit: "formSubmit", formInvalid: "formInvalid" }, ngImport: i0, template: "@if (formGroup) {\r\n  <form [formGroup]=\"formGroup\">\r\n    @if (oldFields().length > 0) {\r\n      <!-- 1. N\u1EBFu kh\u00F4ng c\u00F3 groups th\u00EC render t\u1EEB fields -->\r\n      @if (!fieldGroups() || fieldGroups().length === 0) {\r\n        <div nz-row [nzGutter]=\"[12, 0]\">\r\n          @for (field of oldFields(); track field?.id) {\r\n            @if (!isHiddenField(field)) {\r\n              <div\r\n                nz-col\r\n                [nzXXl]=\"field?.grid?.xxl ?? null\"\r\n                [nzXl]=\"field?.grid?.xl ?? null\"\r\n                [nzLg]=\"field?.grid?.lg ?? null\"\r\n                [nzMd]=\"field?.grid?.md ?? null\"\r\n                [nzSm]=\"field?.grid?.sm ?? null\"\r\n                [nzXs]=\"field?.grid?.xs ?? null\"\r\n                [nzFlex]=\"\r\n                  !field?.grid?.xs &&\r\n                  !field?.grid?.sm &&\r\n                  !field?.grid?.md &&\r\n                  !field?.grid?.lg &&\r\n                  !field?.grid?.xl &&\r\n                  !field?.grid?.xxl\r\n                    ? '1 0 0'\r\n                    : null\r\n                \"\r\n                class=\"field\"\r\n              >\r\n                <app-dynamic-field\r\n                  [field]=\"field\"\r\n                  [fields]=\"oldFields()\"\r\n                  [mode]=\"mode()\"\r\n                  [control]=\"formGroup.get(field.key)!\"\r\n                  [formGroup]=\"formGroup\"\r\n                  [formId]=\"formId\"\r\n                />\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <!-- 2. N\u1EBFu c\u00F3 groups th\u00EC render t\u1EEB groupedFields -->\r\n      @if (fieldGroups() && fieldGroups().length > 0) {\r\n        <!-- C\u00E1c field noGroup -->\r\n        @if (groupedFields().noGroup.length > 0 && displayNonGroupedFields()) {\r\n          <div nz-row [nzGutter]=\"24\">\r\n            @for (field of groupedFields().noGroup; track field?.id) {\r\n              @if (!isHiddenField(field)) {\r\n                <div\r\n                  nz-col\r\n                  [nzXXl]=\"field?.grid?.xxl ?? null\"\r\n                  [nzXl]=\"field?.grid?.xl ?? null\"\r\n                  [nzLg]=\"field?.grid?.lg ?? null\"\r\n                  [nzMd]=\"field?.grid?.md ?? null\"\r\n                  [nzSm]=\"field?.grid?.sm ?? null\"\r\n                  [nzXs]=\"field?.grid?.xs ?? null\"\r\n                  class=\"field\"\r\n                >\r\n                  <app-dynamic-field\r\n                    [field]=\"field\"\r\n                    [fields]=\"oldFields()\"\r\n                    [mode]=\"mode()\"\r\n                    [control]=\"formGroup.get(field.key)!\"\r\n                    [formGroup]=\"formGroup\"\r\n                    [formId]=\"formId\"\r\n                  />\r\n                </div>\r\n              }\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <!-- Group c\u00E1c field -->\r\n        @if (groupedFields().grouped.length > 0) {\r\n          <nz-collapse [nzBordered]=\"false\">\r\n            @for (groupField of groupedFields().grouped; track groupField.group.code) {\r\n              <nz-collapse-panel\r\n                [nzHeader]=\"groupField.group.template ?? groupField.group.label\"\r\n                [nzActive]=\"groupField.group.isActive\"\r\n                [nzShowArrow]=\"groupField.group.showArrow\"\r\n                [nzDisabled]=\"groupField.group.disabled\"\r\n                [style]=\"collapseCustomStyle\"\r\n                class=\"mt-sm\"\r\n              >\r\n                <div nz-row [nzGutter]=\"24\">\r\n                  @for (field of groupField.fields; track field?.id) {\r\n                    @if (!isHiddenField(field)) {\r\n                      <div\r\n                        nz-col\r\n                        [nzXXl]=\"field?.grid?.xxl ?? null\"\r\n                        [nzXl]=\"field?.grid?.xl ?? null\"\r\n                        [nzLg]=\"field?.grid?.lg ?? null\"\r\n                        [nzMd]=\"field?.grid?.md ?? null\"\r\n                        [nzSm]=\"field?.grid?.sm ?? null\"\r\n                        [nzXs]=\"field?.grid?.xs ?? null\"\r\n                        class=\"field\"\r\n                      >\r\n                        <app-dynamic-field\r\n                          [field]=\"field\"\r\n                          [fields]=\"oldFields()\"\r\n                          [mode]=\"mode()\"\r\n                          [control]=\"formGroup.get(field.key)!\"\r\n                          [formGroup]=\"formGroup\"\r\n                          [formId]=\"formId\"\r\n                        />\r\n                      </div>\r\n                    }\r\n                  }\r\n                </div>\r\n              </nz-collapse-panel>\r\n            }\r\n          </nz-collapse>\r\n        }\r\n      }\r\n    }\r\n  </form>\r\n}\r\n", styles: [":host ::ng-deep .ant-collapse .ant-collapse-item-disabled>.ant-collapse-header,:host ::ng-deep .ant-collapse .ant-collapse-item-disabled>.ant-collapse-header>.arrow{color:#575757;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: i1.FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: i1.ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i2$3.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$3.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: NzCollapseModule }, { kind: "component", type: i4$1.NzCollapsePanelComponent, selector: "nz-collapse-panel", inputs: ["nzActive", "nzDisabled", "nzShowArrow", "nzExtra", "nzHeader", "nzExpandedIcon"], outputs: ["nzActiveChange"], exportAs: ["nzCollapsePanel"] }, { kind: "component", type: i4$1.NzCollapseComponent, selector: "nz-collapse", inputs: ["nzAccordion", "nzBordered", "nzGhost", "nzExpandIconPosition"], exportAs: ["nzCollapse"] }, { kind: "component", type: DynamicFieldComponent, selector: "app-dynamic-field", inputs: ["field", "fields", "mode", "control", "formGroup", "formId"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicFormComponent, decorators: [{
             type: Component,
@@ -6412,30 +4586,43 @@ var TableCellTypeEnum;
     TableCellTypeEnum["EMPTY"] = "empty";
 })(TableCellTypeEnum || (TableCellTypeEnum = {}));
 
-// Loại select.
-class SelectOption {
+/**
+ * Interface base chung cho Các dạng Radio.
+ */
+class RadioBaseField extends BaseField {
+    /**
+     * Props validation chung cho các dạng Radio.
+     */
+    // ................. Chưa có .................
     constructor(init) {
-        this.options = [];
+        super(init);
+        /**
+         * Gán giá trị cho các props cần giá trị mặc định ở Radio.
+         */
+        this.controlType = ControlTypeEnum.Radio;
+        this.bindLabel = DEFAULT_BIND_LABEL;
+        this.bindValue = DEFAULT_BIND_VALUE;
+        this.dependsOn = [];
         Object.assign(this, init);
     }
-}
-// Loại date.
-class DateOptions {
-    constructor(init) {
-        Object.assign(this, init);
+    // Mảng ValidatorFn các validation chung được hỗ trợ sẵn bởi Reactive form của angular cho Radio.
+    getCommonSelectValidators() {
+        const validators = this.getCommonValidators();
+        return validators;
     }
-}
-// Gom detail vào chung ReminderOption
-class ReminderOption {
-    constructor(init) {
-        Object.assign(this, init);
-        // Nếu cần tự động khởi tạo detail theo type
-        if (this.type === 'select' && !(this.detail instanceof SelectOption)) {
-            this.detail = new SelectOption(this.detail);
-        }
-        if (this.type === 'date' && !(this.detail instanceof DateOptions)) {
-            this.detail = new DateOptions(this.detail);
-        }
+    // Mảng ValidatorFn các custom validation có thể dùng cho Radio.
+    getCustomSelectValidators() {
+        const validators = this.getCustomValidators();
+        return validators;
+    }
+    // Tạo Form Control cho Input Field.
+    toFormControl() {
+        const commonValidators = this.getCommonSelectValidators();
+        const customValidators = this.getCustomSelectValidators();
+        return new FormControl(this.value ?? '', [...commonValidators, ...customValidators]);
+    }
+    getErrorMessage(errorKey, errorValue, allFields) {
+        return super.getErrorMessage(errorKey, errorValue, allFields);
     }
 }
 
@@ -6443,12 +4630,12 @@ class ReminderOption {
  * Public API Surface of dynamic-form
  */
 // ==========================================
-// 0. BASE FIELD MODELS (CẦN ĐƯỢC EXPORT TRƯỚC ĐỂ TRÁNH LỖI CIRCULAR DEPENDENCY CLASS EXTENDS UNDEFINED)
+// 0. BASE FIELD MODELS (export truoc de tranh loi circular dependency)
 // ==========================================
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BaseDateField, BaseField, BaseUploadField, CombineDependTypeEnum, CommonValidaterEnum, ControlTypeEnum, CustomValidaterEnum, DYNAMIC_FORM_CONFIG, DateFieldTypeEnum, DateOptions, DatePickerField, DatePickerOutputValueTypeEnum, DateRangeField, DateRangeOutputValueTypeEnum, DependTypeEnum, DynamicFormComponent, DynamicFormService, FieldGroup, FieldTypeEnum, FileSizeTypeEnum, FormConfigService, FormDataService, FormModeEnum, GroupedFields, InputBaseField, InputFieldTypeEnum, InputPasswordField, InputTextField, MultiSelectField, RadioBaseField, ReminderOption, ReminderTypeRadioField, ReminderValue, SelectBaseField, SelectFieldTypeEnum, SelectOption, SelectOutputValueTypeEnum, SingleSelectField, TableCellTypeEnum, TextareaField, TreeSelectField, UploadFieldTypeEnum, UploadOutputValueTypeEnum, ViewModeEnum };
+export { ALL_MIME_TYPES, ALL_MIME_TYPES_VALUE, APPLICATION_TYPES, AUDIO_TYPES, AvatarUploadField, BaseDateField, BaseField, BaseUploadField, CombineDependTypeEnum, CommonValidaterEnum, ControlTypeEnum, CustomValidaterEnum, DEFAULT_ACCEPTED_IMAGE_MIME_TYPES, DEFAULT_ACCEPTED_MIME_TYPES, DYNAMIC_FORM_CONFIG, DateFieldTypeEnum, DatePickerField, DatePickerOutputValueTypeEnum, DateRangeField, DateRangeOutputValueTypeEnum, DependTypeEnum, DynamicFormComponent, DynamicFormService, FieldGroup, FieldTypeEnum, FileService, FileSizeTypeEnum, FormConfigService, FormDataService, FormModeEnum, GroupedFields, IMAGE_TYPES, InputBaseField, InputFieldTypeEnum, InputPasswordField, InputTextField, MIME_TYPES_TO_EXTENSION, MultiFileUploadField, MultiImageUploadField, MultiSelectField, RadioBaseField, SelectBaseField, SelectFieldTypeEnum, SelectOutputValueTypeEnum, SingleFileUploadField, SingleSelectField, SuffixService, TEXT_TYPES, TableCellTypeEnum, TextareaField, TreeSelectField, UploadFieldTypeEnum, UploadOutputValueTypeEnum, VIDEO_TYPES, ViewModeEnum, videoTypesPath };
 //# sourceMappingURL=ldquocc-dynamic-form.mjs.map