@ldquocc/dynamic-form 0.0.6 → 0.0.8

package/fesm2022/ldquocc-dynamic-form.mjs

@@ -1,11 +1,11 @@
 import * as i1 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 { of, delay, Subject, BehaviorSubject, takeUntil, combineLatest, finalize, Observable, debounceTime, distinctUntilChanged } from 'rxjs';
 import * as i1$2 from '@angular/common';
 import { CommonModule, CurrencyPipe } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, signal, untracked, input, computed, Input, Directive, effect, forwardRef, Component, EventEmitter, output, Output } from '@angular/core';
+import { InjectionToken, inject, Injectable, signal, untracked, input, computed, effect, Input, Directive, forwardRef, Component, viewChild, EventEmitter, output, Output } from '@angular/core';
 import * as i3$3 from 'ng-zorro-antd/form';
 import { NzFormModule } from 'ng-zorro-antd/form';
 import { isEqual } from 'lodash-es';
@@ -15,13 +15,16 @@ import * as i2 from 'ng-zorro-antd/date-picker';
 import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
 import * as i1$1 from 'ng-zorro-antd/input';
 import { NzInputModule } from 'ng-zorro-antd/input';
-import * as i3 from 'ng-zorro-antd/icon';
-import { NzIconModule } from 'ng-zorro-antd/icon';
 import * as i4 from 'ng-zorro-antd/button';
 import { NzButtonModule } from 'ng-zorro-antd/button';
+import * as i3 from 'ng-zorro-antd/icon';
+import { NzIconModule } from 'ng-zorro-antd/icon';
 import * as i5 from 'ng-zorro-antd/core/transition-patch';
 import * as i6 from 'ng-zorro-antd/core/wave';
+import AutoNumeric from '@zeedhi/autonumeric';
 import { NgxCurrencyDirective } from 'ngx-currency';
+import { toObservable, toSignal, rxResource } from '@angular/core/rxjs-interop';
+import { map, switchMap, catchError } from 'rxjs/operators';
 import * as i3$1 from 'ng-zorro-antd/select';
 import { NzSelectModule } from 'ng-zorro-antd/select';
 import * as i3$2 from 'ng-zorro-antd/spin';
@@ -31,14 +34,19 @@ 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 * as i2$4 from 'ng-zorro-antd/grid';
 import { NzGridModule } from 'ng-zorro-antd/grid';
-import * as i4$1 from 'ng-zorro-antd/collapse';
+import * as i2$3 from 'ng-zorro-antd/dropdown';
+import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
+import * as i4$1 from 'ng-zorro-antd/switch';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import * as i1$3 from 'ng-zorro-antd/menu';
+import * as i4$2 from 'ng-zorro-antd/flex';
+import { NzFlexModule } from 'ng-zorro-antd/flex';
+import * as i4$3 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).
@@ -50,7 +58,11 @@ const ROUTING_MODULES = [RouterModule];
 // 🧩 All common shared modules (nếu bạn muốn gộp nhanh)
 const SHARED_MODULES = [...CORE_MODULES, ...FORM_MODULES, ...ROUTING_MODULES];
 
-const NO_INFO_TEXT = 'Không có thông tin';
+const NO_INFO_TEXT = "Không có thông tin";
+const UPLOAD_FILE_TEXT = "Tải lên tập tin";
+const NO_FILE_NAME = "Chưa có thông tin tên tập tin";
+const UPLOAD_FILE_ERROR = "Lỗi trong quá trình tải tập tin đến máy chủ!";
+const DELETE_FILE_ERROR = "Lỗi trong quá trình xóa tập tin đến máy chủ!";
 
 const IMAGE_TYPES = {
     apng: 'image/apng',
@@ -403,6 +415,55 @@ var CustomValidaterEnum;
     CustomValidaterEnum["LeadingSpace"] = "leadingSpace";
 })(CustomValidaterEnum || (CustomValidaterEnum = {}));
 
+var RegexTypeEnum;
+(function (RegexTypeEnum) {
+    RegexTypeEnum["Alpha"] = "^[a-zA-Z]+$";
+    RegexTypeEnum["AlphaNumeric"] = "^[a-zA-Z0-9]+$";
+    RegexTypeEnum["Name"] = "^[0-9a-zA-Z_ \u00C0\u00C1\u00C2\u00C3\u00C8\u00C9\u00CA\u00CC\u00CD\u00D2\u00D3\u00D4\u00D5\u00D9\u00DA\u0102\u0110\u0128\u0168\u01A0\u00E0\u00E1\u00E2\u00E3\u00E8\u00E9\u00EA\u00EC\u00ED\u00F2\u00F3\u00F4\u00F5\u00F9\u00FA\u0103\u0111\u0129\u0169\u01A1\u01AF\u0102\u1EA0\u1EA2\u1EA4\u1EA6\u1EA8\u1EAA\u1EAC\u1EAE\u1EB0\u1EB2\u1EB4\u1EB6\u1EB8\u1EBA\u1EBC\u1EC0\u1EC0\u1EC2\u1EBE\u01B0\u0103\u1EA1\u1EA3\u1EA5\u1EA7\u1EA9\u1EAB\u1EAD\u1EAF\u1EB1\u1EB3\u1EB5\u1EB7\u1EB9\u1EBB\u1EBD\u1EC1\u1EC1\u1EC3\u1EBF\u1EC4\u1EC6\u1EC8\u1ECA\u1ECC\u1ECE\u1ED0\u1ED2\u1ED4\u1ED6\u1ED8\u1EDA\u1EDC\u1EDE\u1EE0\u1EE2\u1EE4\u1EE6\u1EE8\u1EEA\u1EC5\u1EC7\u1EC9\u1ECB\u1ECD\u1ECF\u1ED1\u1ED3\u1ED5\u1ED7\u1ED9\u1EDB\u1EDD\u1EDF\u1EE1\u1EE3\u1EE5\u1EE7\u1EE9\u1EEB\u1EEC\u1EEE\u1EF0\u1EF2\u1EF4\u00DD\u1EF6\u1EF8\u1EED\u1EEF\u1EF1\u1EF3\u1EF5\u00FD\u1EF7\u1EF9\\.+,:%&=;s.\\/\\-_'\\()]+$";
+    RegexTypeEnum["Username"] = "^[a-z0-9_.s]+$";
+    RegexTypeEnum["RegexPostCode"] = "^[a-zA-Z0-9-s]+$";
+    RegexTypeEnum["AlphaDash"] = "^[a-zA-Z0-9_-s.]+$";
+    RegexTypeEnum["AlphaVN"] = "^[a-zA-Z_ \u00C0\u00C1\u00C2\u00C3\u00C8\u00C9\u00CA\u00CC\u00CD\u00D2\u00D3\u00D4\u00D5\u00D9\u00DA\u0102\u0110\u0128\u0168\u01A0\u00E0\u00E1\u00E2\u00E3\u00E8\u00E9\u00EA\u00EC\u00ED\u00F2\u00F3\u00F4\u00F5\u00F9\u00FA\u0103\u0111\u0129\u0169\u01A1\u01AF\u0102\u1EA0\u1EA2\u1EA4\u1EA6\u1EA8\u1EAA\u1EAC\u1EAE\u1EB0\u1EB2\u1EB4\u1EB6\u1EB8\u1EBA\u1EBC\u1EC0\u1EC0\u1EC2\u1EBE\u01B0\u0103\u1EA1\u1EA3\u1EA5\u1EA7\u1EA9\u1EAB\u1EAD\u1EAF\u1EB1\u1EB3\u1EB5\u1EB7\u1EB9\u1EBB\u1EBD\u1EC1\u1EC1\u1EC3\u1EBF\u1EC4\u1EC6\u1EC8\u1ECA\u1ECC\u1ECE\u1ED0\u1ED2\u1ED4\u1ED6\u1ED8\u1EDA\u1EDC\u1EDE\u1EE0\u1EE2\u1EE4\u1EE6\u1EE8\u1EEA\u1EC5\u1EC7\u1EC9\u1ECB\u1ECD\u1ECF\u1ED1\u1ED3\u1ED5\u1ED7\u1ED9\u1EDB\u1EDD\u1EDF\u1EE1\u1EE3\u1EE5\u1EE7\u1EE9\u1EEB\u1EEC\u1EEE\u1EF0\u1EF2\u1EF4\u00DD\u1EF6\u1EF8\u1EED\u1EEF\u1EF1\u1EF3\u1EF5\u00FD\u1EF7\u1EF9\\,s]+$";
+    RegexTypeEnum["AlphaNumericVN"] = "^[0-9a-zA-Z_ \u00C0\u00C1\u00C2\u00C3\u00C8\u00C9\u00CA\u00CC\u00CD\u00D2\u00D3\u00D4\u00D5\u00D9\u00DA\u0102\u0110\u0128\u0168\u01A0\u00E0\u00E1\u00E2\u00E3\u00E8\u00E9\u00EA\u00EC\u00ED\u00F2\u00F3\u00F4\u00F5\u00F9\u00FA\u0103\u0111\u0129\u0169\u01A1\u01AF\u0102\u1EA0\u1EA2\u1EA4\u1EA6\u1EA8\u1EAA\u1EAC\u1EAE\u1EB0\u1EB2\u1EB4\u1EB6\u1EB8\u1EBA\u1EBC\u1EC0\u1EC0\u1EC2\u1EBE\u01B0\u0103\u1EA1\u1EA3\u1EA5\u1EA7\u1EA9\u1EAB\u1EAD\u1EAF\u1EB1\u1EB3\u1EB5\u1EB7\u1EB9\u1EBB\u1EBD\u1EC1\u1EC1\u1EC3\u1EBF\u1EC4\u1EC6\u1EC8\u1ECA\u1ECC\u1ECE\u1ED0\u1ED2\u1ED4\u1ED6\u1ED8\u1EDA\u1EDC\u1EDE\u1EE0\u1EE2\u1EE4\u1EE6\u1EE8\u1EEA\u1EC5\u1EC7\u1EC9\u1ECB\u1ECD\u1ECF\u1ED1\u1ED3\u1ED5\u1ED7\u1ED9\u1EDB\u1EDD\u1EDF\u1EE1\u1EE3\u1EE5\u1EE7\u1EE9\u1EEB\u1EEC\u1EEE\u1EF0\u1EF2\u1EF4\u00DD\u1EF6\u1EF8\u1EED\u1EEF\u1EF1\u1EF3\u1EF5\u00FD\u1EF7\u1EF9\\s]+$";
+    RegexTypeEnum["AlphaDashVN"] = "^[0-9a-zA-Z_ \u00C0\u00C1\u00C2\u00C3\u00C8\u00C9\u00CA\u00CC\u00CD\u00D2\u00D3\u00D4\u00D5\u00D9\u00DA\u0102\u0110\u0128\u0168\u01A0\u00E0\u00E1\u00E2\u00E3\u00E8\u00E9\u00EA\u00EC\u00ED\u00F2\u00F3\u00F4\u00F5\u00F9\u00FA\u0103\u0111\u0129\u0169\u01A1\u01AF\u0102\u1EA0\u1EA2\u1EA4\u1EA6\u1EA8\u1EAA\u1EAC\u1EAE\u1EB0\u1EB2\u1EB4\u1EB6\u1EB8\u1EBA\u1EBC\u1EC0\u1EC0\u1EC2\u1EBE\u01B0\u0103\u1EA1\u1EA3\u1EA5\u1EA7\u1EA9\u1EAB\u1EAD\u1EAF\u1EB1\u1EB3\u1EB5\u1EB7\u1EB9\u1EBB\u1EBD\u1EC1\u1EC1\u1EC3\u1EBF\u1EC4\u1EC6\u1EC8\u1ECA\u1ECC\u1ECE\u1ED0\u1ED2\u1ED4\u1ED6\u1ED8\u1EDA\u1EDC\u1EDE\u1EE0\u1EE2\u1EE4\u1EE6\u1EE8\u1EEA\u1EC5\u1EC7\u1EC9\u1ECB\u1ECD\u1ECF\u1ED1\u1ED3\u1ED5\u1ED7\u1ED9\u1EDB\u1EDD\u1EDF\u1EE1\u1EE3\u1EE5\u1EE7\u1EE9\u1EEB\u1EEC\u1EEE\u1EF0\u1EF2\u1EF4\u00DD\u1EF6\u1EF8\u1EED\u1EEF\u1EF1\u1EF3\u1EF5\u00FD\u1EF7\u1EF9\\.+,:%&=;s.\\/\\-_'\\()]+$";
+    RegexTypeEnum["UnitName"] = "^[a-zA-Z0-9 \u00C0\u00C1\u00C2\u00C3\u00C8\u00C9\u00CA\u00CC\u00CD\u00D2\u00D3\u00D4\u00D5\u00D9\u00DA\u0102\u0110\u0128\u0168\u01A0\u00E0\u00E1\u00E2\u00E3\u00E8\u00E9\u00EA\u00EC\u00ED\u00F2\u00F3\u00F4\u00F5\u00F9\u00FA\u0103\u0111\u0129\u0169\u01A1\u01AF\u0102\u1EA0\u1EA2\u1EA4\u1EA6\u1EA8\u1EAA\u1EAC\u1EAE\u1EB0\u1EB2\u1EB4\u1EB6\u1EB8\u1EBA\u1EBC\u1EC0\u1EC0\u1EC2\u1EBE\u01B0\u0103\u1EA1\u1EA3\u1EA5\u1EA7\u1EA9\u1EAB\u1EAD\u1EAF\u1EB1\u1EB3\u1EB5\u1EB7\u1EB9\u1EBB\u1EBD\u1EC1\u1EC1\u1EC3\u1EBF\u1EC4\u1EC6\u1EC8\u1ECA\u1ECC\u1ECE\u1ED0\u1ED2\u1ED4\u1ED6\u1ED8\u1EDA\u1EDC\u1EDE\u1EE0\u1EE2\u1EE4\u1EE6\u1EE8\u1EEA\u1EC5\u1EC7\u1EC9\u1ECB\u1ECD\u1ECF\u1ED1\u1ED3\u1ED5\u1ED7\u1ED9\u1EDB\u1EDD\u1EDF\u1EE1\u1EE3\u1EE5\u1EE7\u1EE9\u1EEB\u1EEC\u1EEE\u1EF0\u1EF2\u1EF4\u00DD\u1EF6\u1EF8\u1EED\u1EEF\u1EF1\u1EF3\u1EF5\u1EF7\u1EF9s_-]+$";
+    RegexTypeEnum["Date"] = "([12]\\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\\d|3[01]))";
+    RegexTypeEnum["Time"] = "(?=[01]\\d|2[0123])=(?=[012345]\\d)=(?=[012345]\\d)";
+    RegexTypeEnum["DateTime"] = "[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1]) (2[0-3]|[01][0-9])=[0-5][0-9]=[0-5][0-9]";
+    // dateVN= "^(0?[1-9]|[12][0-9]|3[01])[\\/](0?[1-9]|1[012])[\\/]\\d{4}$",
+    // dateVN= /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-](19|20)\d\d/,
+    // dateVN= "^([0-2][0-9]|(3)[0-1])(\-)(((0)[0-9])|((1)[0-2]))(\-)\d{4}$",
+    RegexTypeEnum["DateVN"] = "^(?=0[1-9]|[12]d|3[01])([/.-])(?=0[1-9]|1[012])\\1(?=19|20)dd$";
+    RegexTypeEnum["DateTimeVN"] = "^(0?[1-9]|[12][0-9]|3[01])[\\/](0?[1-9]|1[012])[\\/]\\d{4} (\\d{2})=(\\d{2})=(\\d{2})$";
+    RegexTypeEnum["DateShortTimeVN"] = "^(0?[1-9]|[12][0-9]|3[01])[\\/](0?[1-9]|1[012])[\\/]\\d{4} (\\d{2})=(\\d{2})$";
+    RegexTypeEnum["Integer"] = "^\\-?[0-9]+$";
+    RegexTypeEnum["Decimal"] = "^\\-?[0-9]*\\.?[0-9]+$";
+    RegexTypeEnum["IpAddress"] = "^((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\\.){3}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})$";
+    RegexTypeEnum["Base64"] = "[^a-zA-Z0-9\\/\\+=]";
+    RegexTypeEnum["Indentityid"] = "^\\d{12}$";
+    // dnkhcn = "/^DNKHCN-[A-Z]{2}-d{4}$/",
+    // msdn = "/^d{10}$/",
+    RegexTypeEnum["IntergerNotZero"] = "^[0-9]*[1-9][0-9]*$";
+    //link = "(https?=//(?=www.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9].[^s]{2,}|www.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9].[^s]{2,}|https?=//(?=www.|(?!www))[a-zA-Z0-9]+.[^s]{2,}|www.[a-zA-Z0-9]+.[^s]{2,})",
+    // code = "^['A-Z''0-9''._\\-']*$",
+    RegexTypeEnum["Code"] = "^['A-Z''0-9''./_\\-\\/\\\u0110']*$";
+    RegexTypeEnum["CodeHsda"] = "^['A-Z''0-9''./_\\-']*$";
+    RegexTypeEnum["LinkLocation"] = "(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})([/\\w .-]*)?(\\?[\\w=&,.%-]*)?";
+    RegexTypeEnum["Link"] = "(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?";
+    //password = "/(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&]).{8,}/",
+    RegexTypeEnum["AccountName"] = "^[a-zA-Z0-9_.]{2,20}$";
+    RegexTypeEnum["NameOrFullName"] = "^[a-zA-Z0-9_\u00C0\u00C1\u00C2\u00C3\u00C8\u00C9\u00CA\u00CC\u00CD\u00D2\u00D3\u00D4\u00D5\u00D9\u00DA\u0102\u0110\u0128\u0168\u01A0\u00E0\u00E1\u00E2\u00E3\u00E8\u00E9\u00EA\u00EC\u00ED\u00F2\u00F3\u00F4\u00F5\u00F9\u00FA\u0103\u0111\u0129\u0169\u01A1\u01AF\u0102\u1EA0\u1EA2\u1EA4\u1EA6\u1EA8\u1EAA\u1EAC\u1EAE\u1EB0\u1EB2\u1EB4\u1EB6\u1EB8\u1EBA\u1EBC\u1EC0\u1EC0\u1EC2\u01B0\u0103\u1EA1\u1EA3\u1EA5\u1EA7\u1EA9\u1EAB\u1EAD\u1EAF\u1EB1\u1EB3\u1EB5\u1EB7\u1EB9\u1EBB\u1EBD\u1EC1\u1EC1\u1EC3\u1EC4\u1EC6\u1EC8\u1ECA\u1ECC\u1ECE\u1ED0\u1ED2\u1ED4\u1ED6\u1ED8\u1EDA\u1EDC\u1EDE\u1EE0\u1EE2\u1EE4\u1EE6\u1EE8\u1EEA\u1EC5\u1EBF\u1EC7\u1EC9\u1ECB\u1ECD\u1ECF\u1ED1\u1ED3\u1ED5\u1ED7\u1ED9\u1EDB\u1EDD\u1EDF\u1EE1\u1EE3\u1EE5\u1EE7\u1EE9\u1EEB\u1EEC\u1EEE\u1EF0\u1EF2\u1EF4\u00DD\u1EF6\u1EF8\u1EED\u1EEF\u1EF1\u1EF3\u1EF5\u1EF7\u1EF9 ]{1,20}$";
+    RegexTypeEnum["PackageName"] = "^(?:[a-zA-Z]+(?:d*[a-zA-Z_]*)*)(?:.[a-zA-Z]+(?:d*[a-zA-Z_]*)*)+$";
+    RegexTypeEnum["Email"] = "^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$";
+    RegexTypeEnum["PasswordRegex"] = "^(?!.*\\s)(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[~`!@#$%^&*()--+={}\\[\\]|\\\\:;\"'<>,.?/_\u20B9]).{8,}$";
+    // phoneNumber = "^(\\+84|0)([235789])([0-9]{8,9})\\b",
+    RegexTypeEnum["PhoneNumber"] = "^(\\+84|0)([235789])([0-9]{8,9})$";
+    RegexTypeEnum["SeqNum"] = "^(100|[0-9]{1,2})$";
+    RegexTypeEnum["LinkBasemap"] = "(https://www.|http://www.|https://|http://)?[a-zA-Z]{2,}(.[a-zA-Z]{2,})(.[a-zA-Z]{2,})?/[a-zA-Z0-9]{2,}|((https://www.|http://www.|https://|http://)?[a-zA-Z]{2,}(.[a-zA-Z]{2,})(.[a-zA-Z]{2,})?)|(https://www.|http://www.|https://|http://)?[a-zA-Z0-9]{2,}.[a-zA-Z0-9]{2,}.[a-zA-Z0-9]{2,}(.[a-zA-Z0-9]{2,})?";
+    RegexTypeEnum["AlphaDashBreakLineVN"] = "^[0-9a-zA-Z_ \u00C0\u00C1\u00C2\u00C3\u00C8\u00C9\u00CA\u00CC\u00CD\u00D2\u00D3\u00D4\u00D5\u00D9\u00DA\u0102\u0110\u0128\u0168\u01A0\u00E0\u00E1\u00E2\u00E3\u00E8\u00E9\u00EA\u00EC\u00ED\u00F2\u00F3\u00F4\u00F5\u00F9\u00FA\u0103\u0111\u0129\u0169\u01A1\u01AF\u0102\u1EA0\u1EA2\u1EA4\u1EA6\u1EA8\u1EAA\u1EAC\u1EAE\u1EB0\u1EB2\u1EB4\u1EB6\u1EB8\u1EBA\u1EBC\u1EC0\u1EC0\u1EC2\u1EBE\u01B0\u0103\u1EA1\u1EA3\u1EA5\u1EA7\u1EA9\u1EAB\u1EAD\u1EAF\u1EB1\u1EB3\u1EB5\u1EB7\u1EB9\u1EBB\u1EBD\u1EC1\u1EC1\u1EC3\u1EBF\u1EC4\u1EC6\u1EC8\u1ECA\u1ECC\u1ECE\u1ED0\u1ED2\u1ED4\u1ED6\u1ED8\u1EDA\u1EDC\u1EDE\u1EE0\u1EE2\u1EE4\u1EE6\u1EE8\u1EEA\u1EC5\u1EC7\u1EC9\u1ECB\u1ECD\u1ECF\u1ED1\u1ED3\u1ED5\u1ED7\u1ED9\u1EDB\u1EDD\u1EDF\u1EE1\u1EE3\u1EE5\u1EE7\u1EE9\u1EEB\u1EEC\u1EEE\u1EF0\u1EF2\u1EF4\u00DD\u1EF6\u1EF8\u1EED\u1EEF\u1EF1\u1EF3\u1EF5\u00FD\u1EF7\u1EF9\\.+,:%&=;s.\\/\\-_'\\(\\)\n]+$";
+    RegexTypeEnum["Fax"] = "^(\\+?\\d{1,4}[\\s-]?)?(\\(?\\d{2,4}\\)?[\\s-]?)?[\\d\\s-]{5,15}$";
+})(RegexTypeEnum || (RegexTypeEnum = {}));
+
 var FormModeEnum;
 (function (FormModeEnum) {
     FormModeEnum["Add"] = "add";
@@ -461,7 +522,7 @@ class BaseField {
         // 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');
+            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.
@@ -471,11 +532,15 @@ class BaseField {
         this.grid = { xs: 24 };
         this.labelGrid = { xs: 24 };
         this.controlGrid = { xs: 24 };
-        this.labelAlign = 'left';
+        this.labelAlign = "left";
         this.isHidden = false;
         this.isDisabled = false;
         this.isParent = false;
-        this.allowSetValue = [FormModeEnum.Add, FormModeEnum.Edit, FormModeEnum.View];
+        this.allowSetValue = [
+            FormModeEnum.Add,
+            FormModeEnum.Edit,
+            FormModeEnum.View,
+        ];
         this.viewMode = ViewModeEnum.form;
         this.enableFieldChange = false;
         Object.assign(this, init);
@@ -496,14 +561,14 @@ class BaseField {
     }
     getErrorMessage(errorKey, errorValue, allFields) {
         if (errorKey === CommonValidaterEnum.Required) {
-            return `${this.label || 'Trường này'} là bắt buộc`;
+            return `${this.label || "Trường này"} là bắt buộc`;
         }
         if (errorKey === CustomValidaterEnum.MatchField) {
             const matchKey = this.matchField;
-            const targetLabel = allFields.find(f => f.key === matchKey)?.label || matchKey;
+            const targetLabel = allFields.find((f) => f.key === matchKey)?.label || matchKey;
             return `${this.label} không khớp với ${targetLabel}`;
         }
-        return '';
+        return "";
     }
 }
 
@@ -761,6 +826,7 @@ var FieldTypeEnum;
 (function (FieldTypeEnum) {
     FieldTypeEnum["InputText"] = "input-text";
     FieldTypeEnum["InputPassword"] = "input-password";
+    FieldTypeEnum["InputFormatted"] = "input-formatted";
     FieldTypeEnum["Textarea"] = "textarea";
     FieldTypeEnum["DatePicker"] = "date-picker";
     FieldTypeEnum["DateRange"] = "date-range";
@@ -786,6 +852,14 @@ var InputFieldTypeEnum;
     InputFieldTypeEnum["Number"] = "number";
 })(InputFieldTypeEnum || (InputFieldTypeEnum = {}));
 
+var NumericPreset;
+(function (NumericPreset) {
+    NumericPreset["Integer"] = "integer";
+    NumericPreset["Decimal"] = "decimal";
+    NumericPreset["Currency"] = "currency";
+    NumericPreset["Manual"] = "manual";
+})(NumericPreset || (NumericPreset = {}));
+
 var DateFieldTypeEnum;
 (function (DateFieldTypeEnum) {
     DateFieldTypeEnum["Picker"] = "picker";
@@ -855,6 +929,30 @@ class InputPasswordField extends InputBaseField {
     }
 }
 
+/**
+ * Interface của Input Field dạng format.
+ */
+class InputFormattedField extends InputBaseField {
+    constructor(init) {
+        super(init);
+        /**
+         * Gán giá trị cho các props cần giá trị mặc định ở InputFormatted.
+         */
+        this.type = FieldTypeEnum.InputFormatted;
+        this.format = NumericPreset.Integer;
+        Object.assign(this, init);
+    }
+    // Tạo Form Control cho Input Formatted Field.
+    toFormControl() {
+        const commonValidators = this.getInputCommonValidators();
+        const customValidators = this.getInputCustomValidators();
+        return new FormControl(this.value ?? "", [
+            ...commonValidators,
+            ...customValidators,
+        ]);
+    }
+}
+
 const buildForm = (fields, mode, model) => {
     const groupObj = {};
     // console.log("model", model);
@@ -889,6 +987,34 @@ const buildForm = (fields, mode, model) => {
     }
     return new FormGroup(groupObj);
 };
+// Tạo tự động placeholder cho các dạng control nhập với label hoặc key từ field
+const createInputPlaceholder = (field) => {
+    const label = field?.label;
+    if (label)
+        return `Nhập ${label?.toLowerCase()}`;
+    return `Nhập ${field.key?.toLowerCase()}`;
+};
+// Tạo tự động placeholder cho các dạng single select với label hoặc key từ field
+const createSingleSelectPlaceholder = (field) => {
+    const label = field?.label;
+    if (label)
+        return `Chọn ${label?.toLowerCase()}`;
+    return `Chọn ${field.key?.toLowerCase()}`;
+};
+// Tạo tự động placeholder cho các dạng multi select với label hoặc key từ field
+const createMultiSelectPlaceholder = (field) => {
+    const label = field?.label;
+    if (label)
+        return `Chọn các ${label?.toLowerCase()}`;
+    return `Chọn các ${field.key?.toLowerCase()}`;
+};
+// Tạo tự động placeholder cho các dạng date-picker với label hoặc key từ field
+const createDatePickerPlaceholder = (field) => {
+    const label = field?.label;
+    if (label)
+        return `Chọn ${label?.toLowerCase()}`;
+    return `Chọn ${field.key?.toLowerCase()}`;
+};
 // Tạo placeholder mặc định cho các dạng Input, Textarea.
 const createPlaceholder = (field) => {
     const placeholder = field?.placeholder;
@@ -907,7 +1033,7 @@ const createSelectPlaceholder = (field) => {
     const label = field?.label;
     if (label) {
         const isSingleSelect = field?.type === FieldTypeEnum.SingleSelect;
-        return `Chọn ${isSingleSelect ? '' : 'các'} ${label?.toLowerCase()}`;
+        return `Chọn ${isSingleSelect ? "" : "các"} ${label?.toLowerCase()}`;
     }
     return `Nhập ${field.key?.toLowerCase()}`;
 };
@@ -1067,7 +1193,10 @@ class SelectBaseField extends BaseField {
     toFormControl() {
         const commonValidators = this.getCommonSelectValidators();
         const customValidators = this.getCustomSelectValidators();
-        return new FormControl(this.value ?? '', [...commonValidators, ...customValidators]);
+        return new FormControl(this.value ?? "", [
+            ...commonValidators,
+            ...customValidators,
+        ]);
     }
     getErrorMessage(errorKey, errorValue, allFields) {
         return super.getErrorMessage(errorKey, errorValue, allFields);
@@ -1174,23 +1303,24 @@ class BaseDateField extends BaseField {
  * 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',
+    "input-text",
+    "input-password",
+    "input-formatted",
+    "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",
 ];
 
 /**
@@ -1208,6 +1338,33 @@ const FORMAT_DATE_PATTERNS = {
     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)$/,
 };
 
+const BASE_OPTIONS = {
+    modifyValueOnWheel: false,
+    selectOnFocus: false,
+};
+const NUMERIC_PRESETS = {
+    [NumericPreset.Integer]: {
+        digitGroupSeparator: ".",
+        decimalCharacter: ",",
+        decimalPlaces: 0,
+        minimumValue: "0",
+    },
+    [NumericPreset.Decimal]: {
+        digitGroupSeparator: ".",
+        decimalCharacter: ",",
+        decimalPlaces: 2,
+        minimumValue: "0",
+    },
+    [NumericPreset.Currency]: {
+        digitGroupSeparator: ".",
+        decimalCharacter: ",",
+        decimalPlaces: 0,
+        currencySymbol: " ₫",
+        currencySymbolPlacement: "s",
+        minimumValue: "0",
+    },
+};
+
 // 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');
@@ -1379,8 +1536,8 @@ class DateRangeField extends BaseDateField {
     }
     toFormValue(modelValue) {
         let value = modelValue;
-        if (typeof value === 'string') {
-            value = value.split(',').map(dateStr => dateStr.trim());
+        if (typeof value === "string") {
+            value = value.split(",").map((dateStr) => dateStr.trim());
         }
         let dateRange = [];
         if (value?.length === 2) {
@@ -1495,7 +1652,7 @@ class MultiFileUploadField extends BaseUploadField {
     }
 }
 
-const DEFAULT_MULTI_IMAGE_UPLOAD_VALUE = '';
+const DEFAULT_MULTI_IMAGE_UPLOAD_VALUE = "";
 /**
  * Interface của Multi image upload.
  */
@@ -1509,8 +1666,8 @@ class MultiImageUploadField extends BaseUploadField {
         this.value = DEFAULT_MULTI_IMAGE_UPLOAD_VALUE;
         this.initialValue = DEFAULT_MULTI_IMAGE_UPLOAD_VALUE;
         this.maxFileCount = 6;
-        this.imageCardWidth = '108px';
-        this.imageCardHeight = '108px';
+        this.imageCardWidth = "108px";
+        this.imageCardHeight = "108px";
         Object.assign(this, init);
     }
     getDefaultValue() {
@@ -1863,7 +2020,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 class FieldService {
     constructor() {
         this.httpClient = inject(HttpClient);
+        // =========================================================================
+        // --- CODE CŨ (Sử dụng Signal cho luồng phụ thuộc) ---
+        // =========================================================================
         this.dependValuesMap = new Map();
+        // =========================================================================
+        // --- CODE MỚI (Sử dụng RxJS BehaviorSubject cho luồng phụ thuộc) ---
+        // =========================================================================
+        // Giải thích kiến trúc mới:
+        // - Dùng BehaviorSubject vì nó lưu lại giá trị cuối cùng. Khi một field Con
+        //   được khởi tạo sau field Cha và subscribe vào, nó sẽ lập tức nhận được
+        //   giá trị hiện hành thay vì phải chờ Cha thay đổi lần nữa.
+        // - Cách này giúp thiết lập luồng dữ liệu dạng Push, rất dễ dàng kết hợp
+        //   với rxResource hoặc switchMap ở phía Component Con để triệt tiêu lỗi Race-condition.
+        this.dependValuesSubjectMap = new Map();
         // Signal lưu trữ đối tượng chứa các prop là fieldKey có isParent là true.
         this.dependValues = signal({});
         // Signal lưu giữ xem field có isParent gần nhất vừa change giá trị.
@@ -1889,9 +2059,33 @@ class FieldService {
     getDependValuesMap() {
         return this.dependValuesMap;
     }
+    /**
+     * Bắn (Emit) giá trị thay đổi của một trường Parent vào stream.
+     * Sẽ được gọi bởi Component đóng vai trò là Cha (isParent = true).
+     */
+    emitDependValueChange(key, value) {
+        if (!this.dependValuesSubjectMap.has(key)) {
+            this.dependValuesSubjectMap.set(key, new BehaviorSubject(value));
+            return;
+        }
+        // Nếu đã có stream, đẩy giá trị mới vào ống nước.
+        this.dependValuesSubjectMap.get(key).next(value);
+    }
+    /**
+     * Trả về Observable của một trường để các Component Con có thể subscribe/nghe ngóng.
+     * Sẽ được gọi bởi các Component có chứa `dependsOn`.
+     */
+    getDependValueChanges$(key) {
+        if (!this.dependValuesSubjectMap.has(key)) {
+            // Đề phòng trường hợp Con subscribe trước khi Cha khởi tạo (hoặc Cha chưa patch value)
+            // Ta tạo sẵn một ống nước rỗng với giá trị ban đầu là null.
+            this.dependValuesSubjectMap.set(key, new BehaviorSubject(null));
+        }
+        return this.dependValuesSubjectMap.get(key).asObservable();
+    }
     // Cập nhật giá trị theo key vào đối tượng của signal.
     updateDependValues(key, value) {
-        this.dependValues.update(curr => ({ ...curr, [key]: value }));
+        this.dependValues.update((curr) => ({ ...curr, [key]: value }));
     }
     // Xóa giá trị và loại bỏ key theo key khỏi đối tượng của signal.
     removeDependValues(key) {
@@ -1925,12 +2119,12 @@ class FieldService {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FieldService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FieldService, providedIn: 'root' }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FieldService, providedIn: "root" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FieldService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root',
+                    providedIn: "root",
                 }]
         }] });
 
@@ -2048,22 +2242,44 @@ class BaseValueAccessor {
         this.control = null;
         // Chế độ form: Add, Edit, View...
         this.modeSignal = input(FormModeEnum.Add);
-        this.isAdd = computed(() => this.modeSignal() === 'add');
-        this.isEdit = computed(() => this.modeSignal() === 'edit');
-        this.isView = computed(() => this.modeSignal() === 'view');
-        this.isAddOrEdit = computed(() => ['add', 'edit'].includes(this.modeSignal()));
-        this.isEditOrView = computed(() => ['edit', 'view'].includes(this.modeSignal()));
+        this.isAdd = computed(() => this.modeSignal() === "add");
+        this.isEdit = computed(() => this.modeSignal() === "edit");
+        this.isView = computed(() => this.modeSignal() === "view");
+        this.isAddOrEdit = computed(() => ["add", "edit"].includes(this.modeSignal()));
+        this.isEditOrView = computed(() => ["edit", "view"].includes(this.modeSignal()));
         this.formModeEnum = FormModeEnum;
         this.viewModeEnum = ViewModeEnum;
         this.destroy$ = new Subject();
         // Dành cho ControlValueAccessor.
         this.value = null;
+        this.valueSignal = signal(null);
         this.onChange = () => { };
         this.onTouched = () => { };
         this.isDisabled = false;
+        this.disabledSignal = signal(false); // Đang có select dùng isDisableSignal nên sau này đồng bộ lại.
         this.dFormService = inject(DynamicFormService);
         this.formDataService = inject(FormDataService);
         this.fieldService = inject(FieldService);
+        this.resetEffect = effect(() => {
+            const reset = this.dFormService.resetTrigger();
+            if (reset?.formId === this.formId) {
+                this.reset();
+            }
+        });
+        // Dành cho UI
+        this.viewMode = computed(() => this.fieldInput().viewMode);
+        this.displayPlaceholder = computed(() => {
+            if (!this.isAddOrEdit())
+                return "";
+            const placeholder = this.fieldInput()?.placeholder;
+            if (placeholder)
+                return placeholder;
+            return this.resolvePlaceholderText();
+        });
+    }
+    // 2. Hàm sinh text mặc định (Component con có thể override hàm này)
+    resolvePlaceholderText() {
+        return "Nhập dữ liệu";
     }
     ngOnDestroy() {
         this.destroy$.next();
@@ -2074,6 +2290,7 @@ class BaseValueAccessor {
     }
     writeValue(value) {
         this.value = value;
+        this.valueSignal.set(value);
         this.writeValueToView(value); // 👈 component con override nếu cần.
     }
     registerOnChange(fn) {
@@ -2084,10 +2301,13 @@ class BaseValueAccessor {
     }
     setDisabledState(isDisabled) {
         this.isDisabled = isDisabled;
+        this.disabledSignal.set(isDisabled);
         this.setDisabledOnView(isDisabled);
     }
     propagateValue(value) {
         this.value = value;
+        this.valueSignal.set(value);
+        this.fieldService.onFieldChange(this.fieldKey(), value);
         this.onChange(this.value);
         // Khi thay đổi value.
         this.handleValueChange(value);
@@ -2128,6 +2348,9 @@ class BaseValueAccessor {
     enableControl() {
         this.control?.enable();
     }
+    resetControl() {
+        this.control?.reset();
+    }
     /**
      * Optional: để component override riêng.
      */
@@ -2156,22 +2379,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 args: [{ required: false }]
             }] } });
 
-const ZORRO_MODULES$e = [NzDatePickerModule, NzInputModule];
+const ZORRO_MODULES$a = [NzDatePickerModule, NzInputModule];
 class DatePickerComponent extends BaseValueAccessor {
     constructor() {
         super();
-        this.fieldSignal = computed(() => {
+        this.field = computed(() => {
             const base = this.fieldInput();
             if (!(base instanceof DatePickerField) ||
-                (base.type !== FieldTypeEnum.DatePicker && base.controlType !== ControlTypeEnum.Date)) {
-                throw new Error('Expected DatePickerField');
+                (base.type !== FieldTypeEnum.DatePicker &&
+                    base.controlType !== ControlTypeEnum.Date)) {
+                throw new Error("Expected DatePickerField");
             }
             return base;
         });
-        this.displayValue = '';
+        // Định dạng ngày
+        this.format = computed(() => {
+            return this.field().format ?? "dd-MM-yyyy";
+        });
         // Kiểm tra có cho phép chọn ngày quá khứ hay ngày tương lai hay không?
         this.disabledDate = computed(() => {
-            const field = this.fieldSignal();
+            const field = this.field();
             return (current) => {
                 if (field.disabledDateFn) {
                     return field.disabledDateFn(current);
@@ -2186,52 +2413,44 @@ class DatePickerComponent extends BaseValueAccessor {
                 return false;
             };
         });
-        // 1. Effect chung Add + Edit
-        effect(() => {
-            if (this.isAddOrEdit()) {
-                const field = untracked(() => this.fieldSignal());
-                const { placeholder } = field;
-                if (!placeholder)
-                    field.placeholder = createPlaceholder(field);
-            }
-        });
-        // Trigger reset từ bên ngoài form.
-        effect(() => {
-            const reset = this.dFormService.resetTrigger();
-            if (reset?.formId === this.formId) {
-                this.reset();
-            }
+        this.viewDisplayValue = computed(() => {
+            // 1. Nếu không phải View thì không cần quan tâm text này
+            if (!this.isView())
+                return "";
+            // 2. Lấy giá trị từ valueSignal
+            const val = this.valueSignal();
+            return val ? FormUtils.convertViewDate(val, this.format()) : NO_INFO_TEXT;
         });
     }
+    // Xử lý tạo placeholder text tự động nếu chưa truyền placeholder vào config của field
+    resolvePlaceholderText() {
+        return createDatePickerPlaceholder(this.field());
+    }
+    // Sự kiện khi người dùng chọn ngày
     handleChangeDate(date) {
         this.propagateValue(date);
     }
-    // Chạy khi value form được gán bởi các hàm reset, patchValue, setValue.
+    // Chạy khi value form được gán bởi các hàm reset, patchValue, setValue
     writeValueToView(value) {
-        if (this.isView()) {
-            this.displayValue = value
-                ? FormUtils.convertViewDate(value, this.fieldSignal().format ?? 'dd-MM-yyyy')
-                : NO_INFO_TEXT;
-            return;
-        }
         if (!this.isAddOrEdit())
             return;
-        const { outputAs } = untracked(() => this.fieldSignal());
-        this.fieldService.updateDependValuesMap(this.fieldKey(), value ? formatDateToYYYYMMDD(value) : '');
-        // Gán data vào đầu ra của form.
+        const { outputAs } = this.field();
+        this.fieldService.updateDependValuesMap(this.fieldKey(), value ? formatDateToYYYYMMDD(value) : "");
+        // Gán data vào đầu ra của form
         const newOutputValue = value && this.getValueByOutputAs(value, outputAs);
         this.patchFormData(this.fieldKey(), newOutputValue);
     }
     // Xử lý phụ thuộc khi change value
     handleValueChange(value) {
-        const { outputAs, isParent } = untracked(() => this.fieldSignal());
+        const { outputAs, isParent } = this.field();
         if (isParent) {
-            this.fieldService.updateDependValuesMap(this.fieldKey(), value ? formatDateToYYYYMMDD(value) : '');
+            this.fieldService.updateDependValuesMap(this.fieldKey(), value ? formatDateToYYYYMMDD(value) : "");
         }
-        // Gán data vào đầu ra của form.
+        // Gán data vào đầu ra của form
         const newOutputValue = value && this.getValueByOutputAs(value, outputAs);
         this.patchFormData(this.fieldKey(), newOutputValue);
     }
+    // Biến đổi giá trị đầu ra theo outputAs
     getValueByOutputAs(date, outputAs) {
         let value = date;
         if (outputAs === DatePickerOutputValueTypeEnum.String) {
@@ -2246,35 +2465,44 @@ class DatePickerComponent extends BaseValueAccessor {
                 useExisting: forwardRef(() => DatePickerComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, 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"], 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: 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"] }, { 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"] }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "@if (modeSignal() === formModeEnum.View) {\r\n  <input\r\n    nz-input\r\n    [value]=\"viewDisplayValue()\"\r\n    [disabled]=\"true\"\r\n    class=\"modeView\"\r\n  />\r\n} @else {\r\n  <nz-date-picker\r\n    [id]=\"fieldKey()\"\r\n    [class]=\"'w-100'\"\r\n    [nzDisabled]=\"disabledSignal()\"\r\n    [nzPlaceHolder]=\"displayPlaceholder()\"\r\n    [nzFormat]=\"format()\"\r\n    [nzDisabledDate]=\"disabledDate()\"\r\n    [ngModel]=\"valueSignal()\"\r\n    (ngModelChange)=\"handleChangeDate($event)\"\r\n  >\r\n  </nz-date-picker>\r\n}\r\n", styles: [":host ::ng-deep .ant-input[disabled]{background-color:#fff}\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: 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"] }, { 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"] }] }); }
 }
 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$e], providers: [
+            args: [{ selector: "app-date-picker", standalone: true, imports: [...FORM_MODULES, ...ZORRO_MODULES$a], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => DatePickerComponent),
                             multi: true,
                         },
-                    ], 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"] }]
+                    ], template: "@if (modeSignal() === formModeEnum.View) {\r\n  <input\r\n    nz-input\r\n    [value]=\"viewDisplayValue()\"\r\n    [disabled]=\"true\"\r\n    class=\"modeView\"\r\n  />\r\n} @else {\r\n  <nz-date-picker\r\n    [id]=\"fieldKey()\"\r\n    [class]=\"'w-100'\"\r\n    [nzDisabled]=\"disabledSignal()\"\r\n    [nzPlaceHolder]=\"displayPlaceholder()\"\r\n    [nzFormat]=\"format()\"\r\n    [nzDisabledDate]=\"disabledDate()\"\r\n    [ngModel]=\"valueSignal()\"\r\n    (ngModelChange)=\"handleChangeDate($event)\"\r\n  >\r\n  </nz-date-picker>\r\n}\r\n", styles: [":host ::ng-deep .ant-input[disabled]{background-color:#fff}\n"] }]
         }], ctorParameters: () => [] });
 
-const ZORRO_MODULES$d = [NzDatePickerModule, NzInputModule];
+const ZORRO_MODULES$9 = [NzDatePickerModule, NzInputModule];
 class DateRangeComponent extends BaseValueAccessor {
     constructor() {
         super();
-        this.fieldSignal = computed(() => {
+        this.field = computed(() => {
             const base = this.fieldInput();
             if (!(base instanceof DateRangeField) ||
-                (base.type !== FieldTypeEnum.DateRange && base.controlType !== ControlTypeEnum.Date)) {
-                throw new Error('Expected DatePickerField');
+                (base.type !== FieldTypeEnum.DateRange &&
+                    base.controlType !== ControlTypeEnum.Date)) {
+                throw new Error("Expected DatePickerField");
             }
             return base;
         });
-        this.displayValueNoInfo = '';
+        // Định dạng ngày
+        this.format = computed(() => {
+            return this.field().format ?? "dd-MM-yyyy";
+        });
+        this.placeholders = computed(() => {
+            return this.field().placeholders ?? ["Ngày bắt đầu", "Ngày kết thúc"];
+        });
+        // Nếu mảng date không lớn hơn 2
+        this.displayValueNoInfo = NO_INFO_TEXT;
         // Kiểm tra có cho phép chọn ngày quá khứ hay ngày tương lai hay không?
         this.disabledDate = computed(() => {
-            const field = this.fieldSignal();
+            const field = this.field();
             return (current) => {
                 const today = new Date();
                 const diff = differenceInCalendarDays(current, today);
@@ -2286,44 +2514,21 @@ class DateRangeComponent extends BaseValueAccessor {
                 return false;
             };
         });
-        // Trigger reset từ bên ngoài form.
-        effect(() => {
-            const reset = this.dFormService.resetTrigger();
-            if (reset?.formId === this.formId) {
-                this.reset();
-            }
-        });
-    }
-    getSelectedDateRangeFromFieldValue(fieldValue) {
-        let dateRange = [];
-        if (fieldValue?.length === 2) {
-            const startDate = normalizeToDate(fieldValue[0]);
-            const endDate = normalizeToDate(fieldValue[1]);
-            if (startDate && endDate)
-                dateRange = [startDate, endDate];
-        }
-        return dateRange;
     }
     handleChangeDateRange(dateRange) {
         this.propagateValue(dateRange);
     }
     // Chạy khi value form được gán bởi các hàm reset, patchValue, setValue.
     writeValueToView(value) {
-        if (this.isView()) {
-            if (value.length === 0) {
-                this.displayValueNoInfo = NO_INFO_TEXT;
-                return;
-            }
-        }
         if (!this.isAddOrEdit())
             return;
-        const { outputAs } = untracked(() => this.fieldSignal());
+        const { outputAs } = untracked(() => this.field());
         // Gán data vào đầu ra của form.
         this.patchFormData(this.fieldKey(), value.length > 0 ? this.getValueByOutputAs(value, outputAs) : null);
     }
     // Xử lý phụ thuộc khi change value
     handleValueChange(value) {
-        const { outputAs } = untracked(() => this.fieldSignal());
+        const { outputAs } = untracked(() => this.field());
         // Gán data vào đầu ra của form.
         this.patchFormData(this.fieldKey(), value.length > 0 ? this.getValueByOutputAs(value, outputAs) : null);
     }
@@ -2335,7 +2540,10 @@ class DateRangeComponent extends BaseValueAccessor {
                 value = `${formatDateToYYYYMMDD(dateRange[0])},${formatDateToYYYYMMDD(dateRange[1])}`;
             }
             if (outputAs === DateRangeOutputValueTypeEnum.StringArray) {
-                value = [formatDateToYYYYMMDD(dateRange[0]), formatDateToYYYYMMDD(dateRange[1])];
+                value = [
+                    formatDateToYYYYMMDD(dateRange[0]),
+                    formatDateToYYYYMMDD(dateRange[1]),
+                ];
             }
         }
         return value;
@@ -2347,72 +2555,17 @@ class DateRangeComponent extends BaseValueAccessor {
                 useExisting: forwardRef(() => DateRangeComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, 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"], 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: 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"] }, { kind: "directive", type: i2.NzRangePickerComponent, selector: "nz-range-picker", exportAs: ["nzRangePicker"] }, { 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"] }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "@if (modeSignal() === formModeEnum.View) {\r\n  @if (valueSignal()!.length > 0) {\r\n    <nz-range-picker\r\n      [class]=\"'w-100'\"\r\n      [nzFormat]=\"format()\"\r\n      [nzDisabled]=\"true\"\r\n      [ngModel]=\"valueSignal()\"\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\r\n      nz-input\r\n      [value]=\"displayValueNoInfo\"\r\n      [disabled]=\"true\"\r\n      class=\"modeView\"\r\n    />\r\n  }\r\n} @else {\r\n  <nz-range-picker\r\n    [id]=\"fieldKey()\"\r\n    class=\"w-100\"\r\n    [nzDisabled]=\"disabledSignal()\"\r\n    [nzFormat]=\"format()\"\r\n    [nzDisabledDate]=\"disabledDate()\"\r\n    [nzPlaceHolder]=\"placeholders()\"\r\n    [ngModel]=\"valueSignal()\"\r\n    (ngModelChange)=\"handleChangeDateRange($event)\"\r\n  ></nz-range-picker>\r\n}\r\n", styles: [":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;color:#575757!important}\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: 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"] }, { kind: "directive", type: i2.NzRangePickerComponent, selector: "nz-range-picker", exportAs: ["nzRangePicker"] }, { 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"] }] }); }
 }
 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$d], providers: [
+            args: [{ selector: "app-date-range", standalone: true, imports: [...FORM_MODULES, ...ZORRO_MODULES$9], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => DateRangeComponent),
                             multi: true,
                         },
-                    ], 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$c = [NzInputModule, NzIconModule];
-class InputPasswordComponent extends BaseValueAccessor {
-    constructor() {
-        super();
-        this.fieldSignal = computed(() => {
-            const base = this.fieldInput();
-            if (!(base instanceof InputPasswordField) ||
-                (base.type !== FieldTypeEnum.InputPassword && base.controlType !== ControlTypeEnum.Input)) {
-                throw new Error('Expected InputPasswordField');
-            }
-            return base;
-        });
-        this.passwordVisible = false;
-        // 1. Effect chung Add + Edit
-        effect(() => {
-            if (this.isAdd()) {
-                const field = this.fieldSignal();
-                const { placeholder } = field;
-                if (!placeholder)
-                    field.placeholder = createPlaceholder(field);
-            }
-        });
-        // Trigger reset từ bên ngoài form.
-        effect(() => {
-            const reset = this.dFormService.resetTrigger();
-            if (reset?.formId === this.formId) {
-                this.reset();
-            }
-        });
-    }
-    handleChangeInputPassword(event) {
-        const inputValue = event.target.value;
-        this.propagateValue(inputValue);
-        this.patchFormData(this.fieldKey(), inputValue);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: InputPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: InputPasswordComponent, isStandalone: true, selector: "app-input-password", providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => InputPasswordComponent),
-                multi: true,
-            },
-        ], usesInheritance: true, ngImport: i0, template: "<nz-input-group [nzSuffix]=\"suffixTemplate\">\r\n  <input\r\n    nz-input\r\n    [value]=\"value\"\r\n    [type]=\"passwordVisible ? 'text' : 'password'\"\r\n    autocomplete=\"new-password\"\r\n    [placeholder]=\"fieldSignal().placeholder!\"\r\n    (input)=\"handleChangeInputPassword($event)\"\r\n    (blur)=\"onTouched()\"\r\n  />\r\n</nz-input-group>\r\n<ng-template #suffixTemplate>\r\n  <span\r\n    nz-icon\r\n    [nzType]=\"passwordVisible ? 'eye-invisible' : 'eye'\"\r\n    (click)=\"passwordVisible = !passwordVisible\"\r\n  ></span>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ 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: i1$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i1$1.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] }); }
-}
-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$c], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => InputPasswordComponent),
-                            multi: true,
-                        },
-                    ], template: "<nz-input-group [nzSuffix]=\"suffixTemplate\">\r\n  <input\r\n    nz-input\r\n    [value]=\"value\"\r\n    [type]=\"passwordVisible ? 'text' : 'password'\"\r\n    autocomplete=\"new-password\"\r\n    [placeholder]=\"fieldSignal().placeholder!\"\r\n    (input)=\"handleChangeInputPassword($event)\"\r\n    (blur)=\"onTouched()\"\r\n  />\r\n</nz-input-group>\r\n<ng-template #suffixTemplate>\r\n  <span\r\n    nz-icon\r\n    [nzType]=\"passwordVisible ? 'eye-invisible' : 'eye'\"\r\n    (click)=\"passwordVisible = !passwordVisible\"\r\n  ></span>\r\n</ng-template>\r\n" }]
+                    ], template: "@if (modeSignal() === formModeEnum.View) {\r\n  @if (valueSignal()!.length > 0) {\r\n    <nz-range-picker\r\n      [class]=\"'w-100'\"\r\n      [nzFormat]=\"format()\"\r\n      [nzDisabled]=\"true\"\r\n      [ngModel]=\"valueSignal()\"\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\r\n      nz-input\r\n      [value]=\"displayValueNoInfo\"\r\n      [disabled]=\"true\"\r\n      class=\"modeView\"\r\n    />\r\n  }\r\n} @else {\r\n  <nz-range-picker\r\n    [id]=\"fieldKey()\"\r\n    class=\"w-100\"\r\n    [nzDisabled]=\"disabledSignal()\"\r\n    [nzFormat]=\"format()\"\r\n    [nzDisabledDate]=\"disabledDate()\"\r\n    [nzPlaceHolder]=\"placeholders()\"\r\n    [ngModel]=\"valueSignal()\"\r\n    (ngModelChange)=\"handleChangeDateRange($event)\"\r\n  ></nz-range-picker>\r\n}\r\n", styles: [":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;color:#575757!important}\n"] }]
         }], ctorParameters: () => [] });
 
 class SuffixService {
@@ -2433,7 +2586,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
-const ZORRO_MODULES$b = [NzButtonModule, NzIconModule];
+const ZORRO_MODULES$8 = [NzButtonModule, NzIconModule];
 class SuffixComponent {
     constructor() {
         this.formId = '';
@@ -2447,73 +2600,215 @@ class SuffixComponent {
         this.suffixService.onSuffixClick(this.suffixConfig.key, this.formId);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SuffixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SuffixComponent, isStandalone: true, selector: "app-suffix", inputs: { suffixConfig: "suffixConfig", formId: "formId" }, ngImport: i0, 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"], dependencies: [{ kind: "ngmodule", type: i1$2.CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SuffixComponent, isStandalone: true, selector: "app-suffix", inputs: { suffixConfig: "suffixConfig", formId: "formId" }, ngImport: i0, 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: [".suffix-btn{margin-left:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: i1$2.CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] }); }
 }
 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$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"] }]
+            args: [{ selector: 'app-suffix', standalone: true, imports: [...CORE_MODULES, ...ZORRO_MODULES$8], 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: [".suffix-btn{margin-left:.5rem}\n"] }]
         }], propDecorators: { suffixConfig: [{
                 type: Input
             }], formId: [{
                 type: Input
             }] } });
 
-const ZORRO_MODULES$a = [
+class AutoNumericOptionsFactory {
+    static create(field) {
+        if (field.format === NumericPreset.Manual) {
+            return field.autoNumericOptions ?? NUMERIC_PRESETS.integer;
+        }
+        return NUMERIC_PRESETS[field.format];
+    }
+}
+
+const zorroModules$4 = [NzInputModule];
+class InputFormattedComponent extends BaseValueAccessor {
+    constructor() {
+        super();
+        this.field = computed(() => {
+            const base = this.fieldInput();
+            if (!(base instanceof InputFormattedField) ||
+                (base.type !== FieldTypeEnum.InputFormatted &&
+                    base.controlType !== ControlTypeEnum.Input)) {
+                throw new Error("Expected InputFormattedField");
+            }
+            return base;
+        });
+        this.inputFormattedEle = viewChild("inputFormatted");
+        this.autoNumericOptions = computed(() => AutoNumericOptionsFactory.create(this.field()));
+        this.internalValue = signal("");
+        this.inputDisplayValues = computed(() => {
+            const isView = this.isView();
+            const autoNumericOptions = this.autoNumericOptions();
+            const value = this.internalValue();
+            if (isView) {
+                const viewValue = value
+                    ? AutoNumeric.format(value, autoNumericOptions)
+                    : undefined;
+                return viewValue || NO_INFO_TEXT;
+            }
+            return "";
+        });
+        this.autoNumericLifeCycleEffect = effect((onCleanup) => {
+            const nativeEle = this.inputFormattedEle()?.nativeElement;
+            const isAddOrEdit = this.isAddOrEdit();
+            const autoNumericOptions = untracked(() => this.autoNumericOptions());
+            const value = untracked(() => this.valueSignal());
+            // 1. TẠO BIẾN CỤC BỘ Ở ĐÂY (Đây là mấu chốt)
+            let localAutoNumeric;
+            if (nativeEle && isAddOrEdit) {
+                // 2. Gán vào biến cục bộ
+                localAutoNumeric = new AutoNumeric(nativeEle, value, autoNumericOptions);
+                // 3. Vẫn cập nhật biến class để xài ở chỗ khác
+                this.autoNumeric = localAutoNumeric;
+            }
+            onCleanup(() => {
+                // 4. CHỈ REMOVE BIẾN CỤC BỘ (Không dùng this.autoNumeric ở đây)
+                if (localAutoNumeric) {
+                    localAutoNumeric?.remove();
+                    // Dọn dẹp biến class nếu nó đang giữ cái vừa bị remove
+                    if (this.autoNumeric === localAutoNumeric) {
+                        this.autoNumeric = undefined;
+                    }
+                }
+            });
+        });
+    }
+    // Xử lý tạo placeholder text tự động nếu chưa truyền placeholder vào config của field
+    resolvePlaceholderText() {
+        const isDisabled = this.field().isDisabled;
+        return isDisabled ? NO_INFO_TEXT : createInputPlaceholder(this.field());
+    }
+    // event: Event;
+    handleChangeInputText() {
+        const { key } = this.field();
+        // const inputValue = (event.target as HTMLInputElement).value;
+        // Lấy giá trị RAW chuẩn từ AutoNumeric (không lấy event.target.value nữa)
+        // Dùng fallback string rỗng nếu chưa có
+        const rawNumericValue = this.autoNumeric?.getNumericString() || "";
+        this.propagateValue(rawNumericValue);
+        // Gán data vào đầu ra của form.
+        this.patchFormData(key, rawNumericValue.trim());
+    }
+    // Chỗ này vẫn xử lý bình thường cho CVA không liên quan đến AutoNumeric.
+    writeValueToView(value) {
+        // 2. NẾU AutoNumeric ĐÃ ĐƯỢC TẠO (đang ở nhánh Add/Edit), thì ép nó format lại giá trị mới
+        if (this.autoNumeric) {
+            this.autoNumeric.set(value);
+        }
+        const { key } = untracked(() => this.field());
+        // Gán data vào đầu ra của form.
+        this.patchFormData(key, value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: InputFormattedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: InputFormattedComponent, isStandalone: true, selector: "app-input-formatted", providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => InputFormattedComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "inputFormattedEle", first: true, predicate: ["inputFormatted"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex\">\r\n  @if (modeSignal() === formModeEnum.View) {\r\n    @if (viewMode() === viewModeEnum.form) {\r\n      <input nz-input [value]=\"inputDisplayValues()\" class=\"modeView\" />\r\n    }\r\n    @if (viewMode() === viewModeEnum.text) {\r\n      <span class=\"modeView\">{{ inputDisplayValues() }}</span>\r\n    }\r\n  } @else {\r\n    <!-- [value]=\"value\" -->\r\n\r\n    <input\r\n      #inputFormatted\r\n      nz-input\r\n      class=\"input-control custom-input\"\r\n      [placeholder]=\"displayPlaceholder()\"\r\n      [disabled]=\"isDisabled\"\r\n      (input)=\"handleChangeInputText()\"\r\n      (blur)=\"onTouched()\"\r\n    />\r\n  }\r\n\r\n  <!-- Suffixes -->\r\n  @if (field().suffixes.length > 0) {\r\n    @for (suffix of field().suffixes; track $index) {\r\n      @if (suffix.visibleOn?.includes(this.modeSignal())) {\r\n        <app-suffix [suffixConfig]=\"suffix\"> </app-suffix>\r\n      }\r\n    }\r\n  }\r\n</div>\r\n", styles: [".input-text-wrapper{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: i1$2.CommonModule }, { kind: "ngmodule", type: i1.FormsModule }, { kind: "ngmodule", type: i1.ReactiveFormsModule }, { 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: InputFormattedComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-input-formatted", standalone: true, imports: [...CORE_MODULES, ...FORM_MODULES, ...zorroModules$4, SuffixComponent], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => InputFormattedComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"flex\">\r\n  @if (modeSignal() === formModeEnum.View) {\r\n    @if (viewMode() === viewModeEnum.form) {\r\n      <input nz-input [value]=\"inputDisplayValues()\" class=\"modeView\" />\r\n    }\r\n    @if (viewMode() === viewModeEnum.text) {\r\n      <span class=\"modeView\">{{ inputDisplayValues() }}</span>\r\n    }\r\n  } @else {\r\n    <!-- [value]=\"value\" -->\r\n\r\n    <input\r\n      #inputFormatted\r\n      nz-input\r\n      class=\"input-control custom-input\"\r\n      [placeholder]=\"displayPlaceholder()\"\r\n      [disabled]=\"isDisabled\"\r\n      (input)=\"handleChangeInputText()\"\r\n      (blur)=\"onTouched()\"\r\n    />\r\n  }\r\n\r\n  <!-- Suffixes -->\r\n  @if (field().suffixes.length > 0) {\r\n    @for (suffix of field().suffixes; track $index) {\r\n      @if (suffix.visibleOn?.includes(this.modeSignal())) {\r\n        <app-suffix [suffixConfig]=\"suffix\"> </app-suffix>\r\n      }\r\n    }\r\n  }\r\n</div>\r\n", styles: [".input-text-wrapper{display:flex}\n"] }]
+        }], ctorParameters: () => [] });
+
+const ZORRO_MODULES$7 = [NzInputModule, NzIconModule];
+class InputPasswordComponent extends BaseValueAccessor {
+    constructor() {
+        super();
+        this.field = computed(() => {
+            const base = this.fieldInput();
+            if (!(base instanceof InputPasswordField) ||
+                (base.type !== FieldTypeEnum.InputPassword &&
+                    base.controlType !== ControlTypeEnum.Input)) {
+                throw new Error("Expected InputPasswordField");
+            }
+            return base;
+        });
+        this.passwordVisible = false;
+    }
+    // Xử lý tạo placeholder text tự động nếu chưa truyền placeholder vào config của field
+    resolvePlaceholderText() {
+        return createInputPlaceholder(this.field());
+    }
+    handleChangeInputPassword(event) {
+        const inputValue = event.target.value;
+        this.propagateValue(inputValue);
+        this.patchFormData(this.fieldKey(), inputValue);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: InputPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: InputPasswordComponent, isStandalone: true, selector: "app-input-password", providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => InputPasswordComponent),
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<nz-input-group [nzSuffix]=\"suffixTemplate\">\r\n  <input\r\n    nz-input\r\n    [value]=\"value\"\r\n    [type]=\"passwordVisible ? 'text' : 'password'\"\r\n    autocomplete=\"new-password\"\r\n    [placeholder]=\"displayPlaceholder()\"\r\n    (input)=\"handleChangeInputPassword($event)\"\r\n    (blur)=\"onTouched()\"\r\n  />\r\n</nz-input-group>\r\n<ng-template #suffixTemplate>\r\n  <span\r\n    nz-icon\r\n    [nzType]=\"passwordVisible ? 'eye-invisible' : 'eye'\"\r\n    (click)=\"passwordVisible = !passwordVisible\"\r\n  ></span>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ 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: i1$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i1$1.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] }); }
+}
+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$7], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => InputPasswordComponent),
+                            multi: true,
+                        },
+                    ], template: "<nz-input-group [nzSuffix]=\"suffixTemplate\">\r\n  <input\r\n    nz-input\r\n    [value]=\"value\"\r\n    [type]=\"passwordVisible ? 'text' : 'password'\"\r\n    autocomplete=\"new-password\"\r\n    [placeholder]=\"displayPlaceholder()\"\r\n    (input)=\"handleChangeInputPassword($event)\"\r\n    (blur)=\"onTouched()\"\r\n  />\r\n</nz-input-group>\r\n<ng-template #suffixTemplate>\r\n  <span\r\n    nz-icon\r\n    [nzType]=\"passwordVisible ? 'eye-invisible' : 'eye'\"\r\n    (click)=\"passwordVisible = !passwordVisible\"\r\n  ></span>\r\n</ng-template>\r\n" }]
+        }], ctorParameters: () => [] });
+
+const ZORRO_MODULES$6 = [
     NzInputModule,
     NgxCurrencyDirective,
     CurrencyPipe,
     CommonModule,
     FormsModule,
 ];
-const COMPONENTS$6 = [SuffixComponent];
+const COMPONENTS$3 = [SuffixComponent];
 class InputTextComponent extends BaseValueAccessor {
     constructor() {
         super();
-        this.fieldSignal = computed(() => {
+        this.field = computed(() => {
             const base = this.fieldInput();
             if (!(base instanceof InputTextField) ||
-                (base.type !== FieldTypeEnum.InputText && base.controlType !== ControlTypeEnum.Input)) {
-                throw new Error('Expected InputTextField');
+                (base.type !== FieldTypeEnum.InputText &&
+                    base.controlType !== ControlTypeEnum.Input)) {
+                throw new Error("Expected InputTextField");
             }
             return base;
         });
-        this.inputDisplayValue = '';
-        this.displayNoValueText = NO_INFO_TEXT;
-        // 1. Effect chung Add + Edit
-        effect(() => {
-            if (this.isAddOrEdit()) {
-                const field = untracked(() => this.fieldSignal());
-                const { placeholder } = field;
-                if (!placeholder)
-                    field.placeholder = createPlaceholder(field);
-            }
-        });
-        // Trigger reset từ bên ngoài form.
-        effect(() => {
-            const reset = this.dFormService.resetTrigger();
-            if (reset?.formId === this.formId) {
-                this.reset();
-            }
+        this.viewDisplayValue = computed(() => {
+            // 1. Nếu không phải View thì không cần quan tâm text này
+            if (!this.isView())
+                return "";
+            // 2. Lấy giá trị từ valueSignal
+            const val = this.valueSignal();
+            return val ? val : NO_INFO_TEXT;
         });
     }
+    // Xử lý tạo placeholder text tự động nếu chưa truyền placeholder vào config của field
+    resolvePlaceholderText() {
+        return createInputPlaceholder(this.field());
+    }
+    // Xử lý khi nhập giá trị mới vào input
     handleChangeInputText(event) {
         const inputValue = event.target.value;
         this.propagateValue(inputValue);
         // Gán data vào đầu ra của form.
-        this.fieldService.onFieldChange(this.fieldKey(), inputValue);
         this.patchFormData(this.fieldKey(), inputValue);
     }
     handleChangeFormValue(value) {
         const inputValue = value?.toString();
         this.propagateValue(inputValue);
-        this.fieldService.onFieldChange(this.fieldKey(), inputValue);
         this.patchFormData(this.fieldKey(), inputValue);
     }
     writeValueToView(value) {
-        if (this.isView()) {
-            this.inputDisplayValue = this.fieldSignal().modelValue || NO_INFO_TEXT;
-            return;
-        }
         if (!this.isAddOrEdit())
             return;
         // Gán data vào đầu ra của form.
@@ -2526,181 +2821,228 @@ class InputTextComponent extends BaseValueAccessor {
                 useExisting: forwardRef(() => InputTextComponent),
                 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().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"], dependencies: [{ 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: "directive", type: NgxCurrencyDirective, selector: "input[currencyMask]", inputs: ["currencyMask", "options"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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 (field().viewMode === viewModeEnum.form) {\r\n      @if (field().isCurrency) {\r\n        <input\r\n          nz-input\r\n          [ngModel]=\"viewDisplayValue()\"\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]=\"viewDisplayValue()\" class=\"modeView\" />\r\n      }\r\n    }\r\n    @if (field().viewMode === viewModeEnum.text) {\r\n      @if (field().isCurrency) {\r\n        <span class=\"modeView\">\r\n          {{\r\n            viewDisplayValue() | currency: \"VND\" : \"symbol\" : \"1.0-0\" : \"vi-VN\"\r\n          }}\r\n        </span>\r\n      } @else {\r\n        <span class=\"modeView\">{{ viewDisplayValue() }}</span>\r\n      }\r\n    }\r\n  } @else {\r\n    @if (field().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]=\"displayPlaceholder()\"\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]=\"displayPlaceholder()\"\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 (field().suffixes.length > 0) {\r\n    @for (suffix of field().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: [""], dependencies: [{ 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: "directive", type: NgxCurrencyDirective, selector: "input[currencyMask]", inputs: ["currencyMask", "options"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SuffixComponent, selector: "app-suffix", inputs: ["suffixConfig", "formId"] }] }); }
 }
 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$a, ...COMPONENTS$6], providers: [
+            args: [{ selector: "app-input-text", standalone: true, imports: [...ZORRO_MODULES$6, ...COMPONENTS$3], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => InputTextComponent),
                             multi: true,
                         },
-                    ], 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"] }]
+                    ], template: "<div class=\"flex\">\r\n  @if (modeSignal() === formModeEnum.View) {\r\n    @if (field().viewMode === viewModeEnum.form) {\r\n      @if (field().isCurrency) {\r\n        <input\r\n          nz-input\r\n          [ngModel]=\"viewDisplayValue()\"\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]=\"viewDisplayValue()\" class=\"modeView\" />\r\n      }\r\n    }\r\n    @if (field().viewMode === viewModeEnum.text) {\r\n      @if (field().isCurrency) {\r\n        <span class=\"modeView\">\r\n          {{\r\n            viewDisplayValue() | currency: \"VND\" : \"symbol\" : \"1.0-0\" : \"vi-VN\"\r\n          }}\r\n        </span>\r\n      } @else {\r\n        <span class=\"modeView\">{{ viewDisplayValue() }}</span>\r\n      }\r\n    }\r\n  } @else {\r\n    @if (field().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]=\"displayPlaceholder()\"\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]=\"displayPlaceholder()\"\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 (field().suffixes.length > 0) {\r\n    @for (suffix of field().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" }]
         }], ctorParameters: () => [] });
 
-const ZORRO_MODULES$9 = [NzSelectModule, NzInputModule, NzSpinModule];
-const COMPONENTS$5 = [SuffixComponent];
-class MultiSelectComponent extends BaseValueAccessor {
+class BaseSelectComponent extends BaseValueAccessor {
+    createDependencyStreams(dependsOn) {
+        return dependsOn.map((depend) => this.fieldService
+            .getDependValueChanges$(depend.fieldKey)
+            .pipe(map((val) => ({ key: depend.paramKey, value: val }))));
+    }
+    evaluateDependencies(results, dependType) {
+        const isValidValue = (val) => val !== null && val !== "" && val !== undefined;
+        let isConditionMet = false;
+        if (dependType === DependTypeEnum.Any) {
+            isConditionMet = results.some((r) => isValidValue(r.value));
+        }
+        else {
+            isConditionMet = results.every((r) => isValidValue(r.value));
+        }
+        const params = results.reduce((acc, curr) => ({ ...acc, [curr.key]: curr.value }), {});
+        return { valid: isConditionMet, params };
+    }
     constructor() {
         super();
-        this.fieldSignal = computed(() => {
-            const base = this.fieldInput();
-            if (!(base instanceof MultiSelectField) ||
-                (base.type !== FieldTypeEnum.MultiSelect && base.controlType !== ControlTypeEnum.Select)) {
-                throw new Error('Expected MultiSelectField');
+        // Alias to strongly type the field input for Select base logic
+        this.selectField = computed(() => this.fieldInput());
+        this.isFirstLoad = true;
+        // 1. Tạo stream params từ các field phụ thuộc
+        this.dependParams$ = toObservable(this.selectField).pipe(switchMap((field) => {
+            const { dependsOn, dependType } = field;
+            if (!dependsOn || dependsOn.length === 0) {
+                return of({ valid: true, params: {} });
             }
-            return base;
+            const dependObs$ = this.createDependencyStreams(dependsOn);
+            return combineLatest(dependObs$).pipe(map((results) => this.evaluateDependencies(results, dependType)));
+        }));
+        this.dependParamsSignal = toSignal(this.dependParams$, {
+            initialValue: { valid: false, params: {} },
         });
-        this.displayNoValueText = NO_INFO_TEXT;
-        this.displayOptionsValue = [];
-        this.loading = signal(false);
-        this.options = [];
-        this.queryParams = {};
-        // 1. Effect chung Add + Edit
-        effect(() => {
-            if (this.isAddOrEdit()) {
-                const field = untracked(() => this.fieldSignal());
-                const { placeholder, dependsOn } = field;
-                // Nếu field không phụ thuộc vào field khác mặc định phải gọi
-                if (dependsOn?.length === 0)
-                    this.getOptions();
-                if (!placeholder)
-                    field.placeholder = createSelectPlaceholder(field);
-            }
+        // 2. rxResource lấy danh sách
+        this.optionsResource = rxResource({
+            request: () => {
+                if (this.isView())
+                    return undefined;
+                const state = this.dependParamsSignal();
+                if (!state || !state.valid)
+                    return undefined;
+                return state.params;
+            },
+            loader: ({ request: params }) => {
+                const field = untracked(() => this.selectField());
+                const fullApiUrl = field?.apiConfig?.baseUrl || "";
+                const apiParams = field?.apiConfig?.params || {};
+                const rawParams = { ...apiParams, ...params };
+                const finalParams = Object.fromEntries(Object.entries(rawParams).filter(([_, val]) => val !== null && val !== undefined && val !== ""));
+                if (!fullApiUrl) {
+                    return of({
+                        code: 0,
+                        message: "Success",
+                        data: field?.options ?? [],
+                    });
+                }
+                return this.fieldService.getAllOptions(fullApiUrl, finalParams).pipe(catchError((error) => of({ code: -1, message: "Error", data: [] })));
+            },
         });
-        // Trigger reset từ bên ngoài form.
-        effect(() => {
-            const reset = this.dFormService.resetTrigger();
-            if (reset?.formId === this.formId) {
-                this.reset();
+        // Gom chung loading từ rxResource và isDisabledSignal
+        this.disabled = computed(() => this.optionsResource.isLoading() || this.disabledSignal());
+        // 3. Xào nấu Options (Prepend, Append, Filter)
+        this.options = computed(() => {
+            const state = this.dependParamsSignal();
+            const isLoading = this.optionsResource.isLoading();
+            const res = this.optionsResource.value();
+            if (!state || !state.valid || isLoading || !res || res.code !== 0) {
+                return [];
             }
+            const field = this.selectField();
+            const { optionsToPrepend, optionsToAppend, exceptOptions } = field;
+            const rawData = res.data || [];
+            return [...optionsToPrepend, ...rawData, ...optionsToAppend].filter((opt) => !exceptOptions.some((ex) => ex[field.bindValue] === opt[field.bindValue]));
         });
-        // Xử lý luồng ban đầu cho việc getOptions, cũng như getOptions phụ thuộc vào dependsOn.
+        // 4. Effect xử lý toàn bộ logic Form Control (Disable/Enable/Reset)
         effect(() => {
-            const { canProceed, queryParams } = this.resolveDependencyState();
-            if (!canProceed) {
-                this.disableAndResetControl();
-                return;
-            }
-            this.queryParams = { ...this.queryParams, ...queryParams };
-            this.getOptions();
-            this.enableControl();
+            const state = this.dependParamsSignal();
+            const isLoading = this.optionsResource.isLoading();
+            const res = this.optionsResource.value();
+            untracked(() => {
+                // CASE 1 & 2: CHƯA ĐỦ ĐIỀU KIỆN HOẶC ĐANG GỌI API -> Disable và Reset
+                if (!state || !state.valid || isLoading) {
+                    this.disableControl();
+                    if (!this.isFirstLoad) {
+                        this.resetControl();
+                    }
+                    this.isFirstLoad = false;
+                    return;
+                }
+                // CASE 3: API ĐÃ LOAD XONG
+                if (res) {
+                    if (res.code !== 0) {
+                        this.disableAndResetControl();
+                        return;
+                    }
+                    const field = this.selectField();
+                    if (!field.isDisabled) {
+                        this.enableControl();
+                    }
+                    // Móc nối cho các class con có nhu cầu đồng bộ data sau khi load API
+                    this.onApiOptionsLoaded();
+                }
+            });
         });
     }
-    // Xử lý tạo queryParams và có cho phép gọi getOptions hay không.
-    resolveDependencyState() {
-        //1. Không gọi API lấy options nếu ở view mode.
-        if (untracked(() => this.isView())) {
-            return {
-                canProceed: false,
-                queryParams: {},
-            };
-        }
-        const field = untracked(() => this.fieldSignal());
-        const { dependsOn, dependType } = field;
-        // Không phụ thuộc vào giá trị từ field khác, tức mảng dependsOn rỗng -> luôn cho phép gọi list.
-        const requiredCount = dependsOn?.length ?? 0;
-        if (requiredCount === 0) {
-            return {
-                canProceed: true,
-                queryParams: {},
-            };
-        }
-        // 3. Tạo mảng object dependValues theo paramKey và value. Ví dụ [{paramKey: 'provinceCode', value: '36'}]
-        const dependValuesMap = this.fieldService.getDependValuesMap();
-        const dependValues = dependsOn.map(depend => {
-            const getter = dependValuesMap.get(depend.fieldKey);
-            const value = typeof getter === 'function' ? getter() : getter;
-            return { paramKey: depend.paramKey, value };
+    // Cho phép component con overide nếu cần (ví dụ để hydrate sourceObject)
+    onApiOptionsLoaded() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BaseSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: BaseSelectComponent, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BaseSelectComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [] });
+
+const ZORRO_MODULES$5 = [NzSelectModule, NzInputModule, NzSpinModule];
+const COMPONENTS$2 = [SuffixComponent];
+class MultiSelectComponent extends BaseSelectComponent {
+    constructor() {
+        super();
+        this.field = computed(() => {
+            const base = this.fieldInput();
+            if (!(base instanceof MultiSelectField) ||
+                (base.type !== FieldTypeEnum.MultiSelect &&
+                    base.controlType !== ControlTypeEnum.Select)) {
+                throw new Error("Expected MultiSelectField");
+            }
+            return base;
+        });
+        this.displayNoValueText = NO_INFO_TEXT;
+        // Biến đổi dữ liệu hiển thị ở chế độ View
+        this.viewDisplayValue = computed(() => {
+            if (!this.isView())
+                return [];
+            console.log("viewDisplayValue", this.field().modelValue || []);
+            return this.getDisplayValue(this.field().modelValue || []);
         });
-        // 4. Đếm số paramKey giá trị đã có (không phải falsy).
-        const availableCount = dependValues.filter(v => v.value).length;
-        // 5. Check xem có thể tiếp tục đến gọi list không.
-        // ===== Nếu dependType là 'all' thì canProceed true chỉ khi availableCount = với requiredCount.
-        // ===== Ngược lại dependType là 'any' chỉ cần availableCount > 0.
-        const canProceed = dependType === DependTypeEnum.All ? availableCount === requiredCount : availableCount > 0;
-        return {
-            canProceed,
-            queryParams: Object.fromEntries(dependValues.map(v => [v.paramKey, v.value])),
-        };
-    }
-    createFullApiUrl(field) {
-        let fullApiUrl = field?.apiConfig?.baseUrl || '';
-        const params = field?.apiConfig?.params || {};
-        this.queryParams = {
-            ...this.queryParams,
-            ...params,
-        };
-        return fullApiUrl;
     }
-    // Lấy danh sách options từ GET api.
-    getOptions() {
-        const field = this.fieldSignal();
-        const fullApiUrl = this.createFullApiUrl(field);
-        if (!fullApiUrl) {
-            this.options = field?.options ?? [];
-            return;
+    onApiOptionsLoaded() {
+        const field = this.field();
+        if (field.outputAs === SelectOutputValueTypeEnum.SourceObject) {
+            const newOutputValue = this.value && this.getValueByOutputAs(this.value);
+            this.patchFormData(this.fieldKey(), newOutputValue);
         }
-        this.loading.set(true);
-        this.disableControl();
-        this.fieldService
-            .getAllOptions(fullApiUrl, this.queryParams)
-            .pipe(finalize(() => {
-            this.loading.set(false);
-            this.enableControl();
-        }), this.takeUntilDestroy())
-            .subscribe({
-            next: (res) => {
-                if (res?.code === 0) {
-                    this.options = res?.data;
-                }
-            },
-            error: (error) => { },
-        });
+    }
+    // Xử lý tạo placeholder text tự động nếu chưa truyền placeholder vào config của field
+    resolvePlaceholderText() {
+        return createMultiSelectPlaceholder(this.field());
     }
     handleChangeOptions(optionValue) {
         this.propagateValue(optionValue);
     }
     // Chạy khi value form được gán bởi các hàm reset, patchValue, setValue.
     writeValueToView(value) {
-        if (this.isView()) {
-            const modelValue = this.fieldSignal().modelValue;
-            if (modelValue)
-                this.displayOptionsValue = this.getDisplayValue(modelValue);
-            return;
-        }
         if (!this.isAddOrEdit())
             return;
+        this.fieldService.emitDependValueChange(this.fieldKey(), value.length ? value.join(",") : "");
         // Gán data vào đầu ra của form.
         const newOutputValue = value && this.getValueByOutputAs(value);
         this.patchFormData(this.fieldKey(), newOutputValue);
     }
     // Xử lý phụ thuộc khi change value
     handleValueChange(value) {
+        const { isParent } = this.field();
+        if (isParent) {
+            console.log("cscs");
+            this.fieldService.emitDependValueChange(this.fieldKey(), value.length ? value.join(",") : "");
+        }
         const newOutputValue = value && this.getValueByOutputAs(value);
         this.patchFormData(this.fieldKey(), newOutputValue);
     }
     // Xử lý output value đầu ra theo outputAs mà người dùng mong muốn.
     getValueByOutputAs(singleValueArr) {
-        const field = this.fieldSignal();
+        const field = this.field();
+        const { outputAs, bindValue, modelValue } = field;
         if (singleValueArr.length === 0) {
             return singleValueArr.map(String);
         }
         // Nếu outputAs là dạng single.
         let value = singleValueArr.map(String);
         // Nếu outputAs là dạng object.
-        if (field.outputAs === SelectOutputValueTypeEnum.Object) {
-            value = value.map(val => ({
-                [field.bindValue]: val,
+        if (outputAs === SelectOutputValueTypeEnum.Object) {
+            value = value.map((val) => ({
+                [bindValue]: val,
             }));
         }
+        // Nếu outputAs là dạng SourceObject.
+        if (outputAs === SelectOutputValueTypeEnum.SourceObject) {
+            const options = untracked(() => this.options());
+            value = singleValueArr.map((val) => {
+                // 1. Tìm trong options hiện tại
+                let foundValue = options.find((opt) => opt[bindValue] === val);
+                // 2. Fallback tìm trong modelValue (vì modelValue có thể là array of objects)
+                // if (!foundValue && modelValue && Array.isArray(modelValue)) {
+                //   foundValue = modelValue.find(
+                //     (mOpt: any) => typeof mOpt === "object" && mOpt[bindValue] === val
+                //   );
+                // }
+                // 3. Fallback cuối cùng
+                return foundValue ?? { [bindValue]: val };
+            });
+        }
         return value;
     }
     // Làm phẳng giá trị để hiện thị ở chế độ View.
     getDisplayValue(value) {
         const optionsValue = value.map((val) => {
-            if (typeof val === 'object') {
+            if (typeof val === "object") {
                 return this.getCustomLabel(val);
             }
             return val;
@@ -2708,7 +3050,7 @@ class MultiSelectComponent extends BaseValueAccessor {
         return optionsValue;
     }
     transformOptionValue(option) {
-        const field = this.fieldSignal();
+        const field = this.field();
         let optionValue;
         optionValue = option[field.bindValue];
         return optionValue;
@@ -2718,15 +3060,21 @@ class MultiSelectComponent extends BaseValueAccessor {
     }
     // Biến đổi label nếu có thuộc tính hàm biến đổi transformLabel.
     getCustomLabel(option) {
-        const field = this.fieldSignal();
-        if (typeof option[field.bindLabel] === 'function' || !option[field.bindLabel]) {
-            let warnMessage = 'Giá trị label lấy theo bindLabel hiện đang là dạng object, array hoặc các dạng còn lại của complex data';
-            if (!option[field.bindLabel])
-                warnMessage = 'Không tồn tại giá trị label khi lấy theo bindLabel';
-            //console.warn(warnMessage);
+        const field = this.field();
+        // 1. Ưu tiên lấy bindLabel, nếu không có thì fallback sang bindValue
+        let rawLabel = option[field.bindLabel];
+        if (rawLabel === undefined || rawLabel === null || rawLabel === "") {
+            rawLabel = option[field.bindValue];
+        }
+        // 2. Kiểm tra nếu không tồn tại hoặc là dạng object/function (kể cả array)
+        if (rawLabel === undefined ||
+            rawLabel === null ||
+            typeof rawLabel === "object" ||
+            typeof rawLabel === "function") {
             return NO_INFO_TEXT;
         }
-        let optionLabel = option[field.bindLabel];
+        let optionLabel = String(rawLabel);
+        // 3. Biến đổi theo transformLabel nếu có
         if (field.transformLabel) {
             const tranformLabelValue = field.transformLabel(option);
             if (tranformLabelValue)
@@ -2741,194 +3089,101 @@ 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: 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"] }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"flex\">\r\n  @if (modeSignal() === formModeEnum.View) {\r\n    @if (viewMode() === viewModeEnum.form) {\r\n      @if (field().value!.length > 0) {\r\n        <nz-select\r\n          nzAllowClear\r\n          [nzMode]=\"'multiple'\"\r\n          [ngModel]=\"viewDisplayValue()\"\r\n          [nzMaxTagCount]=\"field().maxTagCount!\"\r\n          [nzMaxMultipleCount]=\"field().maxMultipleCount!\"\r\n          [nzDisabled]=\"true\"\r\n        >\r\n          @for (displayOption of viewDisplayValue(); track $index) {\r\n            <nz-option [nzValue]=\"displayOption\" [nzLabel]=\"displayOption\">\r\n            </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 (viewMode() === viewModeEnum.text) {\r\n      @if (viewDisplayValue().length) {\r\n        <ul class=\"view-list\">\r\n          @for (label of viewDisplayValue(); 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]=\"fieldKey()\"\r\n      nzShowSearch\r\n      nzAllowClear\r\n      [nzDisabled]=\"disabled()\"\r\n      [nzMode]=\"'multiple'\"\r\n      [nzPlaceHolder]=\"displayPlaceholder()\"\r\n      [nzMaxTagCount]=\"field().maxTagCount!\"\r\n      [nzMaxMultipleCount]=\"field().maxMultipleCount!\"\r\n      [nzSuffixIcon]=\"optionsResource.isLoading() ? loadingIcon : null\"\r\n      [ngModel]=\"value\"\r\n      (ngModelChange)=\"handleChangeOptions($event)\"\r\n    >\r\n      @for (\r\n        option of options();\r\n        track `${option[this.field().bindValue]}-${$index}`\r\n      ) {\r\n        <nz-option\r\n          [nzValue]=\"transformOptionValue(option)\"\r\n          [nzLabel]=\"getOptionLabel(option)\"\r\n        >\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 (field().suffixes.length > 0) {\r\n    @for (suffix of field().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}: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}\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,
-            args: [{ selector: 'app-multi-select', standalone: true, imports: [...CORE_MODULES, ...FORM_MODULES, ...ZORRO_MODULES$9, ...COMPONENTS$5], providers: [
+            args: [{ selector: "app-multi-select", standalone: true, imports: [...CORE_MODULES, ...FORM_MODULES, ...ZORRO_MODULES$5, ...COMPONENTS$2], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => MultiSelectComponent),
                             multi: true,
                         },
-                    ], 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"] }]
+                    ], template: "<div class=\"flex\">\r\n  @if (modeSignal() === formModeEnum.View) {\r\n    @if (viewMode() === viewModeEnum.form) {\r\n      @if (field().value!.length > 0) {\r\n        <nz-select\r\n          nzAllowClear\r\n          [nzMode]=\"'multiple'\"\r\n          [ngModel]=\"viewDisplayValue()\"\r\n          [nzMaxTagCount]=\"field().maxTagCount!\"\r\n          [nzMaxMultipleCount]=\"field().maxMultipleCount!\"\r\n          [nzDisabled]=\"true\"\r\n        >\r\n          @for (displayOption of viewDisplayValue(); track $index) {\r\n            <nz-option [nzValue]=\"displayOption\" [nzLabel]=\"displayOption\">\r\n            </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 (viewMode() === viewModeEnum.text) {\r\n      @if (viewDisplayValue().length) {\r\n        <ul class=\"view-list\">\r\n          @for (label of viewDisplayValue(); 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]=\"fieldKey()\"\r\n      nzShowSearch\r\n      nzAllowClear\r\n      [nzDisabled]=\"disabled()\"\r\n      [nzMode]=\"'multiple'\"\r\n      [nzPlaceHolder]=\"displayPlaceholder()\"\r\n      [nzMaxTagCount]=\"field().maxTagCount!\"\r\n      [nzMaxMultipleCount]=\"field().maxMultipleCount!\"\r\n      [nzSuffixIcon]=\"optionsResource.isLoading() ? loadingIcon : null\"\r\n      [ngModel]=\"value\"\r\n      (ngModelChange)=\"handleChangeOptions($event)\"\r\n    >\r\n      @for (\r\n        option of options();\r\n        track `${option[this.field().bindValue]}-${$index}`\r\n      ) {\r\n        <nz-option\r\n          [nzValue]=\"transformOptionValue(option)\"\r\n          [nzLabel]=\"getOptionLabel(option)\"\r\n        >\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 (field().suffixes.length > 0) {\r\n    @for (suffix of field().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}: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}\n"] }]
         }], ctorParameters: () => [] });
 
-const ZORRO_MODULES$8 = [NzSelectModule, NzSpinModule, NzInputModule];
-const COMPONENTS$4 = [SuffixComponent];
-class SingleSelectComponent extends BaseValueAccessor {
+const modules$3 = [CommonModule, FormsModule, ReactiveFormsModule];
+const zorroModules$3 = [NzSelectModule, NzSpinModule, NzInputModule];
+const components$2 = [SuffixComponent];
+class SingleSelectComponent extends BaseSelectComponent {
     constructor() {
         super();
-        this.fieldSignal = computed(() => {
+        this.field = computed(() => {
             const base = this.fieldInput();
             if (!(base instanceof SingleSelectField) ||
-                (base.type !== FieldTypeEnum.SingleSelect && base.controlType !== ControlTypeEnum.Select)) {
-                throw new Error('Expected SingleSelectField');
+                (base.type !== FieldTypeEnum.SingleSelect &&
+                    base.controlType !== ControlTypeEnum.Select)) {
+                throw new Error("Expected SingleSelectField");
             }
             return base;
         });
         // Giá trị dùng hiển thị ở chế độ View.
-        this.displayValue = '';
-        this.loadingSignal = signal(false);
-        this.isDisabledSignal = signal(false);
-        this.disabled = computed(() => this.loadingSignal() || this.isDisabledSignal());
-        this.options = [];
-        this.queryParams = {};
-        // 1. Effect chung Add + Edit
-        effect(() => {
-            if (this.isAddOrEdit()) {
-                const field = untracked(() => this.fieldSignal());
-                const { placeholder } = field;
-                if (!placeholder)
-                    field.placeholder = createSelectPlaceholder(field);
-            }
-        });
-        // Trigger reset từ bên ngoài form.
-        effect(() => {
-            const reset = this.dFormService.resetTrigger();
-            if (reset?.formId === this.formId) {
-                this.reset();
-            }
-        });
-        effect(() => {
-            if (untracked(() => this.isView()))
-                return;
-            const { key, dependsOn, isParent, dependType } = untracked(() => this.fieldSignal());
-            // Không dính dáng gì đến isParent và dependsOn.
-            if (!isParent && dependsOn.length === 0) {
-                this.getOptions();
-                return;
-            }
-            const dependValuesMap = this.fieldService.getDependValuesMap();
-            const dependValues = dependsOn?.map(depend => {
-                const dependFunc = dependValuesMap.get(depend.fieldKey);
-                const value = typeof dependFunc === 'function' ? dependFunc() : dependFunc;
-                return [depend.paramKey, value];
-            });
-            // console.log(`${key} dependValue`, dependValues);
-            const params = Object.fromEntries(dependValues);
-            this.queryParams = {
-                ...this.queryParams,
-                ...params,
-            };
-            // console.log(`${key} queryParams`, this.queryParams);
-            // Nếu tất cả các phụ thuộc có value thì mới gọi API.
-            const allDependHasValues = dependValues?.every(([fieldKey, value]) => value);
-            // console.log(`${key} allDependHasValues`, allDependHasValues);
-            if (allDependHasValues) {
-                // this.isDisabledSignal.set(false);
-                this.control?.enable();
-                this.getOptions();
-            }
-            else {
-                // Ngược lại reset và disabled.
-                this.control?.reset();
-                // this.isDisabledSignal.set(true);
-                this.control?.disable();
-            }
+        this.viewDisplayValue = computed(() => {
+            if (!this.isView())
+                return "";
+            return this.getDisplayValue(this.field().modelValue || this.valueSignal());
         });
     }
+    onApiOptionsLoaded() {
+        const field = this.field();
+        if (field.outputAs === SelectOutputValueTypeEnum.SourceObject) {
+            const newOutputValue = this.value && this.getValueByOutputAs(this.value);
+            this.patchFormData(this.fieldKey(), newOutputValue);
+        }
+    }
+    // Xử lý tạo placeholder text tự động nếu chưa truyền placeholder vào config của field
+    resolvePlaceholderText() {
+        return createSingleSelectPlaceholder(this.field());
+    }
     // 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);
-            return;
-        }
         if (!this.isAddOrEdit())
             return;
-        this.fieldService.updateDependValuesMap(this.fieldKey(), value ?? '');
-        // const signal = untracked(() => this.fieldService.getDependValuesMap().get(this.fieldKey()))
-        // console.log("DependValuesMap SET", untracked(() => signal!()));
+        // Bắn giá trị mới vào BehaviorSubject của FieldService.
+        // Việc này báo cho các component Con biết Parent vừa thay đổi data.
+        // Lợi ích: Dòng data chạy thẳng đứng (Push) vào ống, không phụ thuộc vào Signal tracking ẩn.
+        this.fieldService.emitDependValueChange(this.fieldKey(), value ?? "");
         // Gán data vào đầu ra của form.
         const newOutputValue = value && this.getValueByOutputAs(value);
         this.patchFormData(this.fieldKey(), newOutputValue);
     }
     // Xử lý phụ thuộc khi change value
     handleValueChange(value) {
-        const { isParent } = this.fieldSignal();
+        const { isParent } = this.field();
         if (isParent) {
-            this.fieldService.updateDependValuesMap(this.fieldKey(), value);
-            // const signal = untracked(() => this.fieldService.getDependValuesMap().get(this.fieldKey()))
-            // console.log("DependValuesMap UI", untracked(() => signal!()));
+            this.fieldService.emitDependValueChange(this.fieldKey(), value);
         }
         // Gán data vào đầu ra của form.
         const newOutputValue = value && this.getValueByOutputAs(value);
         this.patchFormData(this.fieldKey(), newOutputValue);
     }
-    createFullApiUrl() {
-        const field = untracked(() => this.fieldSignal());
-        let fullApiUrl = field?.apiConfig?.baseUrl || '';
-        const params = field?.apiConfig?.params || {};
-        this.queryParams = {
-            ...this.queryParams,
-            ...params,
-        };
-        return fullApiUrl;
-    }
-    // Lấy danh sách options từ GET api.
-    getOptions() {
-        const field = untracked(() => this.fieldSignal());
-        const { optionsToPrepend, optionsToAppend, exceptOptions } = field;
-        const fullApiUrl = this.createFullApiUrl();
-        if (!fullApiUrl) {
-            this.options = field?.options ?? [];
-            this.options = [...optionsToPrepend, ...this.options, ...optionsToAppend].filter(options => !exceptOptions.some(opts => opts[field.bindValue] === options[field.bindValue]));
-            return;
-        }
-        this.loadingSignal.set(true);
-        this.control?.disable();
-        this.fieldService
-            .getAllOptions(fullApiUrl, this.queryParams)
-            .pipe(this.takeUntilDestroy())
-            .subscribe({
-            next: (res) => {
-                this.loadingSignal.set(false);
-                if (!this.fieldSignal().isDisabled)
-                    this.control?.enable();
-                if (res?.code === 0) {
-                    this.options = res?.data;
-                    this.options = [...optionsToPrepend, ...this.options, ...optionsToAppend].filter(options => !exceptOptions.some(opts => opts[field.bindValue] === options[field.bindValue]));
-                    // Nếu outputAs là dạng sourceObject đồng bộ sau khi load xong list.
-                    if (field.outputAs === SelectOutputValueTypeEnum.SourceObject) {
-                        const newOutputValue = this.options.find(option => option[field.bindValue] === this.value) ?? {
-                            [field.bindValue]: this.value,
-                        };
-                        this.patchFormData(this.fieldKey(), newOutputValue);
-                    }
-                }
-            },
-            error: (error) => {
-                this.loadingSignal.set(false);
-                if (!this.fieldSignal().isDisabled)
-                    this.control?.enable();
-            },
-        });
-    }
     handleChangeOptions(optionValue) {
-        const { enableFieldChange, bindValue } = untracked(() => this.fieldSignal());
+        const { enableFieldChange, bindValue } = untracked(() => this.field());
         if (enableFieldChange) {
-            const option = this.options.find(option => option[bindValue] === optionValue);
+            const option = this.options().find((option) => option[bindValue] === optionValue);
             this.fieldService.onFieldChange(this.fieldKey(), option);
         }
         this.propagateValue(optionValue);
     }
     // Xử lý output value đầu ra theo outputAs mà người dùng mong muốn.
     getValueByOutputAs(singleValue) {
-        const field = this.fieldSignal();
+        const { outputAs, bindValue, bindLabel, modelValue } = this.field();
         if (singleValue) {
             // Nếu outputAs là dạng single.
             let value = singleValue;
             // Nếu outputAs là dạng object.
-            if (field.outputAs === SelectOutputValueTypeEnum.Object) {
+            if (outputAs === SelectOutputValueTypeEnum.Object) {
                 value = {
-                    [field.bindValue]: singleValue,
+                    [bindValue]: singleValue,
                 };
             }
             // Nếu outputAs là dạng sourceObject.
-            if (field.outputAs === SelectOutputValueTypeEnum.SourceObject) {
-                value = this.options.find(option => option[field.bindValue] === singleValue) ?? {
-                    [field.bindValue]: singleValue,
-                };
+            if (outputAs === SelectOutputValueTypeEnum.SourceObject) {
+                value =
+                    this.options().find((option) => option[bindValue] === singleValue) ??
+                        (modelValue && typeof modelValue === "object"
+                            ? modelValue
+                            : { [bindValue]: value });
             }
             return value;
         }
@@ -2938,14 +3193,14 @@ class SingleSelectComponent extends BaseValueAccessor {
     getDisplayValue(value) {
         if (!value)
             return NO_INFO_TEXT;
-        if (typeof value === 'object') {
+        if (typeof value === "object") {
             return this.getCustomLabel(value);
         }
         return value;
     }
     // Lấy value ở option tag.
     transformOptionValue(option) {
-        const field = this.fieldSignal();
+        const field = this.field();
         let optionValue;
         optionValue = option[field.bindValue];
         return optionValue;
@@ -2956,15 +3211,21 @@ class SingleSelectComponent extends BaseValueAccessor {
     }
     // Biến đổi label nếu có thuộc tính hàm biến đổi transformLabel.
     getCustomLabel(option) {
-        const field = this.fieldSignal();
-        if (typeof option[field.bindLabel] === 'function' || !option[field.bindLabel]) {
-            let warnMessage = 'Giá trị label lấy theo bindLabel hiện đang là dạng object, array hoặc các dạng còn lại của complex data';
-            if (!option[field.bindLabel])
-                warnMessage = 'Không tồn tại giá trị label khi lấy theo bindLabel';
-            // console.warn(warnMessage);
+        const field = this.field();
+        // 1. Ưu tiên lấy bindLabel, nếu không có thì fallback sang bindValue
+        let rawLabel = option[field.bindLabel];
+        if (rawLabel === undefined || rawLabel === null || rawLabel === "") {
+            rawLabel = option[field.bindValue];
+        }
+        // 2. Kiểm tra nếu không tồn tại hoặc là dạng object/function (kể cả array)
+        if (rawLabel === undefined ||
+            rawLabel === null ||
+            typeof rawLabel === "object" ||
+            typeof rawLabel === "function") {
             return NO_INFO_TEXT;
         }
-        let optionLabel = option[field.bindLabel];
+        let optionLabel = String(rawLabel);
+        // 3. Biến đổi theo transformLabel nếu có
         if (field.transformLabel) {
             const tranformLabelValue = field.transformLabel(option);
             if (tranformLabelValue)
@@ -2979,36 +3240,37 @@ 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: 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"] }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex\">\r\n  @if (isView()) {\r\n    @if (viewMode() === viewModeEnum.form) {\r\n      <input\r\n        [title]=\"viewDisplayValue()\"\r\n        nz-input\r\n        [value]=\"viewDisplayValue()\"\r\n        class=\"modeView\"\r\n      />\r\n    }\r\n    @if (viewMode() === viewModeEnum.text) {\r\n      <span [title]=\"viewDisplayValue()\" class=\"modeView break-work\">{{\r\n        viewDisplayValue()\r\n      }}</span>\r\n    }\r\n  } @else {\r\n    <nz-select\r\n      [id]=\"fieldKey()\"\r\n      nzShowSearch\r\n      nzAllowClear\r\n      [nzDisabled]=\"disabled()\"\r\n      [nzPlaceHolder]=\"displayPlaceholder()\"\r\n      [nzSuffixIcon]=\"optionsResource.isLoading() ? loadingIcon : null\"\r\n      [title]=\"field().tooltip || ''\"\r\n      [nzDropdownMatchSelectWidth]=\"field().matchSelectWidth\"\r\n      [ngModel]=\"value\"\r\n      class=\"flex-1 min-w-0\"\r\n      (ngModelChange)=\"handleChangeOptions($event)\"\r\n    >\r\n      @for (\r\n        option of options();\r\n        track `${option[this.field().bindValue]}-${$index}`\r\n      ) {\r\n        <nz-option\r\n          [nzValue]=\"transformOptionValue(option)\"\r\n          [nzLabel]=\"getOptionLabel(option)\"\r\n        >\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 (field().suffixes.length > 0) {\r\n    @for (suffix of field().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: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: 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,
-            args: [{ selector: 'app-single-select', standalone: true, imports: [...FORM_MODULES, ...ZORRO_MODULES$8, ...COMPONENTS$4], providers: [
+            args: [{ selector: "app-single-select", standalone: true, imports: [...modules$3, ...zorroModules$3, ...components$2], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SingleSelectComponent),
                             multi: true,
                         },
-                    ], 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"] }]
+                    ], template: "<div class=\"d-flex\">\r\n  @if (isView()) {\r\n    @if (viewMode() === viewModeEnum.form) {\r\n      <input\r\n        [title]=\"viewDisplayValue()\"\r\n        nz-input\r\n        [value]=\"viewDisplayValue()\"\r\n        class=\"modeView\"\r\n      />\r\n    }\r\n    @if (viewMode() === viewModeEnum.text) {\r\n      <span [title]=\"viewDisplayValue()\" class=\"modeView break-work\">{{\r\n        viewDisplayValue()\r\n      }}</span>\r\n    }\r\n  } @else {\r\n    <nz-select\r\n      [id]=\"fieldKey()\"\r\n      nzShowSearch\r\n      nzAllowClear\r\n      [nzDisabled]=\"disabled()\"\r\n      [nzPlaceHolder]=\"displayPlaceholder()\"\r\n      [nzSuffixIcon]=\"optionsResource.isLoading() ? loadingIcon : null\"\r\n      [title]=\"field().tooltip || ''\"\r\n      [nzDropdownMatchSelectWidth]=\"field().matchSelectWidth\"\r\n      [ngModel]=\"value\"\r\n      class=\"flex-1 min-w-0\"\r\n      (ngModelChange)=\"handleChangeOptions($event)\"\r\n    >\r\n      @for (\r\n        option of options();\r\n        track `${option[this.field().bindValue]}-${$index}`\r\n      ) {\r\n        <nz-option\r\n          [nzValue]=\"transformOptionValue(option)\"\r\n          [nzLabel]=\"getOptionLabel(option)\"\r\n        >\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 (field().suffixes.length > 0) {\r\n    @for (suffix of field().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" }]
         }], ctorParameters: () => [], propDecorators: { isCustomInputText: [{
                 type: Input
             }] } });
 
-const ZORRO_MODULES$7 = [NzTreeSelectModule, NzSpinModule, NzInputModule];
-const COMPONENTS$3 = [SuffixComponent];
+const ZORRO_MODULES$4 = [NzTreeSelectModule, NzSpinModule, NzInputModule];
+const COMPONENTS$1 = [SuffixComponent];
 class TreeSelectComponent extends BaseValueAccessor {
     constructor() {
         super();
-        this.fieldSignal = computed(() => {
+        this.field = computed(() => {
             const base = this.fieldInput();
             if (!(base instanceof TreeSelectField) ||
-                (base.type !== FieldTypeEnum.TreeSelect && base.controlType !== ControlTypeEnum.Select)) {
-                throw new Error('Expected TreeSelectField');
+                (base.type !== FieldTypeEnum.TreeSelect &&
+                    base.controlType !== ControlTypeEnum.Select)) {
+                throw new Error("Expected TreeSelectField");
             }
             return base;
         });
         // Giá trị dùng hiển thị ở chế độ View.
-        this.displayValue = '';
+        this.displayValue = "";
         this.loadingSignal = signal(false);
         this.isDisabledSignal = signal(false);
         this.disabled = computed(() => this.loadingSignal() || this.isDisabledSignal());
@@ -3017,7 +3279,7 @@ class TreeSelectComponent extends BaseValueAccessor {
         // 1. Effect chung Add + Edit
         effect(() => {
             if (this.isAddOrEdit()) {
-                const field = untracked(() => this.fieldSignal());
+                const field = untracked(() => this.field());
                 const { placeholder } = field;
                 if (!placeholder)
                     field.placeholder = createSelectPlaceholder(field);
@@ -3033,16 +3295,16 @@ class TreeSelectComponent extends BaseValueAccessor {
         effect(() => {
             if (untracked(() => this.isView()))
                 return;
-            const { key, dependsOn, isParent, dependType } = untracked(() => this.fieldSignal());
+            const { key, dependsOn, isParent, dependType } = untracked(() => this.field());
             // Không dính dáng gì đến isParent và dependsOn.
             if (!isParent && dependsOn.length === 0) {
                 this.getOptions();
                 return;
             }
             const dependValuesMap = this.fieldService.getDependValuesMap();
-            const dependValues = dependsOn?.map(depend => {
+            const dependValues = dependsOn?.map((depend) => {
                 const dependFunc = dependValuesMap.get(depend.fieldKey);
-                const value = typeof dependFunc === 'function' ? dependFunc() : dependFunc;
+                const value = typeof dependFunc === "function" ? dependFunc() : dependFunc;
                 return [depend.paramKey, value];
             });
             // console.log(`${key} dependValue`, dependValues);
@@ -3068,15 +3330,19 @@ class TreeSelectComponent extends BaseValueAccessor {
             }
         });
     }
+    // Xử lý tạo placeholder text tự động nếu chưa truyền placeholder vào config của field
+    resolvePlaceholderText() {
+        return createSingleSelectPlaceholder(this.field());
+    }
     // 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);
+            this.displayValue = this.getDisplayValue(this.field().modelValue);
             return;
         }
         if (!this.isAddOrEdit())
             return;
-        this.fieldService.updateDependValuesMap(this.fieldKey(), value ?? '');
+        this.fieldService.updateDependValuesMap(this.fieldKey(), value ?? "");
         // const signal = untracked(() => this.fieldService.getDependValuesMap().get(this.fieldKey()))
         // console.log("DependValuesMap SET", untracked(() => signal!()));
         // Gán data vào đầu ra của form.
@@ -3085,7 +3351,7 @@ class TreeSelectComponent extends BaseValueAccessor {
     }
     // Xử lý phụ thuộc khi change value
     handleValueChange(value) {
-        const { isParent } = this.fieldSignal();
+        const { isParent } = this.field();
         if (isParent) {
             this.fieldService.updateDependValuesMap(this.fieldKey(), value);
             // const signal = untracked(() => this.fieldService.getDependValuesMap().get(this.fieldKey()))
@@ -3096,8 +3362,8 @@ class TreeSelectComponent extends BaseValueAccessor {
         this.patchFormData(this.fieldKey(), newOutputValue);
     }
     createFullApiUrl() {
-        const field = untracked(() => this.fieldSignal());
-        let fullApiUrl = field?.apiConfig?.baseUrl || '';
+        const field = untracked(() => this.field());
+        let fullApiUrl = field?.apiConfig?.baseUrl || "";
         const params = field?.apiConfig?.params || {};
         this.queryParams = {
             ...this.queryParams,
@@ -3121,8 +3387,8 @@ class TreeSelectComponent extends BaseValueAccessor {
         }
         // Step 2: Build parent-child relation
         for (const node of map.values()) {
-            if (node['parentCode']) {
-                const parent = map.get(node['parentCode']);
+            if (node["parentCode"]) {
+                const parent = map.get(node["parentCode"]);
                 if (parent) {
                     if (!parent.children)
                         parent.children = [];
@@ -3141,11 +3407,15 @@ class TreeSelectComponent extends BaseValueAccessor {
     }
     // Lấy danh sách options từ GET api.
     getOptions() {
-        const field = untracked(() => this.fieldSignal());
+        const field = untracked(() => this.field());
         const { optionsToPrepend, optionsToAppend, exceptOptions } = field;
         const fullApiUrl = this.createFullApiUrl();
         if (!fullApiUrl) {
-            const options = [...optionsToPrepend, ...field.options, ...optionsToAppend].filter(options => !exceptOptions.some(opts => opts[field.bindValue] === options[field.bindValue]));
+            const options = [
+                ...optionsToPrepend,
+                ...field.options,
+                ...optionsToAppend,
+            ].filter((options) => !exceptOptions.some((opts) => opts[field.bindValue] === options[field.bindValue]));
             this.options = this.buildTree(options, field.groupBy);
             return;
         }
@@ -3157,14 +3427,18 @@ class TreeSelectComponent extends BaseValueAccessor {
             .subscribe({
             next: (res) => {
                 this.loadingSignal.set(false);
-                if (!this.fieldSignal().isDisabled)
+                if (!this.field().isDisabled)
                     this.control?.enable();
                 if (res?.code === 0) {
-                    const options = [...optionsToPrepend, ...(res?.data ?? []), ...optionsToAppend].filter(options => !exceptOptions.some(opts => opts[field.bindValue] === options[field.bindValue]));
+                    const options = [
+                        ...optionsToPrepend,
+                        ...(res?.data ?? []),
+                        ...optionsToAppend,
+                    ].filter((options) => !exceptOptions.some((opts) => opts[field.bindValue] === options[field.bindValue]));
                     this.options = this.buildTree(options, field.groupBy);
                     // Nếu outputAs là dạng sourceObject đồng bộ sau khi load xong list.
                     if (field.outputAs === SelectOutputValueTypeEnum.SourceObject) {
-                        const newOutputValue = this.options.find(option => option.key === this.value) ?? {
+                        const newOutputValue = this.options.find((option) => option.key === this.value) ?? {
                             [field.bindValue]: this.value,
                         };
                         this.patchFormData(this.fieldKey(), newOutputValue);
@@ -3173,22 +3447,22 @@ class TreeSelectComponent extends BaseValueAccessor {
             },
             error: (error) => {
                 this.loadingSignal.set(false);
-                if (!this.fieldSignal().isDisabled)
+                if (!this.field().isDisabled)
                     this.control?.enable();
             },
         });
     }
     handleChangeOptions(optionValue) {
-        const { enableFieldChange, bindValue } = untracked(() => this.fieldSignal());
+        const { enableFieldChange, bindValue } = untracked(() => this.field());
         if (enableFieldChange) {
-            const option = this.options.find(option => option[bindValue] === optionValue);
+            const option = this.options.find((option) => option[bindValue] === optionValue);
             this.fieldService.onFieldChange(this.fieldKey(), option);
         }
         this.propagateValue(optionValue);
     }
     // Xử lý output value đầu ra theo outputAs mà người dùng mong muốn.
     getValueByOutputAs(singleValue) {
-        const field = this.fieldSignal();
+        const field = this.field();
         if (singleValue) {
             // Nếu outputAs là dạng single.
             let value = singleValue;
@@ -3200,7 +3474,7 @@ class TreeSelectComponent extends BaseValueAccessor {
             }
             // Nếu outputAs là dạng sourceObject.
             if (field.outputAs === SelectOutputValueTypeEnum.SourceObject) {
-                value = this.options.find(option => option[field.bindValue] === singleValue) ?? {
+                value = this.options.find((option) => option[field.bindValue] === singleValue) ?? {
                     [field.bindValue]: singleValue,
                 };
             }
@@ -3212,14 +3486,14 @@ class TreeSelectComponent extends BaseValueAccessor {
     getDisplayValue(value) {
         if (!value)
             return NO_INFO_TEXT;
-        if (typeof value === 'object') {
+        if (typeof value === "object") {
             return this.getCustomLabel(value);
         }
         return value;
     }
     // Lấy value ở option tag.
     transformOptionValue(option) {
-        const field = this.fieldSignal();
+        const field = this.field();
         let optionValue;
         optionValue = option[field.bindValue];
         return optionValue;
@@ -3230,11 +3504,12 @@ class TreeSelectComponent extends BaseValueAccessor {
     }
     // Biến đổi label nếu có thuộc tính hàm biến đổi transformLabel.
     getCustomLabel(option) {
-        const field = this.fieldSignal();
-        if (typeof option[field.bindLabel] === 'function' || !option[field.bindLabel]) {
-            let warnMessage = 'Giá trị label lấy theo bindLabel hiện đang là dạng object, array hoặc các dạng còn lại của complex data';
+        const field = this.field();
+        if (typeof option[field.bindLabel] === "function" ||
+            !option[field.bindLabel]) {
+            let warnMessage = "Giá trị label lấy theo bindLabel hiện đang là dạng object, array hoặc các dạng còn lại của complex data";
             if (!option[field.bindLabel])
-                warnMessage = 'Không tồn tại giá trị label khi lấy theo bindLabel';
+                warnMessage = "Không tồn tại giá trị label khi lấy theo bindLabel";
             // console.warn(warnMessage);
             return NO_INFO_TEXT;
         }
@@ -3253,62 +3528,55 @@ class TreeSelectComponent extends BaseValueAccessor {
                 useExisting: forwardRef(() => TreeSelectComponent),
                 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 nz-input [value]=\"displayValue\" class=\"modeView\" />\r\n    }\r\n    @if (fieldSignal().viewMode === viewModeEnum.text) {\r\n      <span class=\"modeView break-work\">{{ displayValue }}</span>\r\n    }\r\n  } @else {\r\n    <nz-tree-select\r\n      [nzId]=\"fieldSignal().key\"\r\n      nzShowSearch\r\n      nzAllowClear\r\n      [nzDisabled]=\"isDisabled\"\r\n      [nzPlaceHolder]=\"fieldSignal().placeholder!\"\r\n      [title]=\"fieldSignal().tooltip || ''\"\r\n      [nzDropdownMatchSelectWidth]=\"fieldSignal().matchSelectWidth\"\r\n      [ngModel]=\"value\"\r\n      [nzNodes]=\"options\"\r\n      class=\"flex-1 select-box\"\r\n      (ngModelChange)=\"handleChangeOptions($event)\"\r\n    >\r\n    </nz-tree-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: NzTreeSelectModule }, { kind: "component", type: i2$1.NzTreeSelectComponent, selector: "nz-tree-select", inputs: ["nzId", "nzAllowClear", "nzShowExpand", "nzShowLine", "nzDropdownMatchSelectWidth", "nzCheckable", "nzHideUnMatched", "nzShowIcon", "nzShowSearch", "nzDisabled", "nzAsyncData", "nzMultiple", "nzDefaultExpandAll", "nzCheckStrictly", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualHeight", "nzExpandedIcon", "nzNotFoundContent", "nzNodes", "nzOpen", "nzSize", "nzPlaceHolder", "nzDropdownStyle", "nzDropdownClassName", "nzBackdrop", "nzStatus", "nzPlacement", "nzExpandedKeys", "nzDisplayWith", "nzMaxTagCount", "nzMaxTagPlaceholder", "nzTreeTemplate"], outputs: ["nzOpenChange", "nzCleared", "nzRemoved", "nzExpandChange", "nzTreeClick", "nzTreeCheckboxChange"], exportAs: ["nzTreeSelect"] }, { 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 (viewMode() === viewModeEnum.form) {\r\n      <input nz-input [value]=\"displayValue\" class=\"modeView\" />\r\n    }\r\n    @if (viewMode() === viewModeEnum.text) {\r\n      <span class=\"modeView break-work\">{{ displayValue }}</span>\r\n    }\r\n  } @else {\r\n    <nz-tree-select\r\n      [nzId]=\"fieldKey()\"\r\n      nzShowSearch\r\n      nzAllowClear\r\n      [nzDisabled]=\"isDisabled\"\r\n      [nzPlaceHolder]=\"displayPlaceholder()\"\r\n      [title]=\"field().tooltip || ''\"\r\n      [nzDropdownMatchSelectWidth]=\"field().matchSelectWidth\"\r\n      [ngModel]=\"value\"\r\n      [nzNodes]=\"options\"\r\n      class=\"flex-1 min-w-0\"\r\n      (ngModelChange)=\"handleChangeOptions($event)\"\r\n    >\r\n    </nz-tree-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 (field().suffixes.length > 0) {\r\n    @for (suffix of field().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: [""], 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: NzTreeSelectModule }, { kind: "component", type: i2$1.NzTreeSelectComponent, selector: "nz-tree-select", inputs: ["nzId", "nzAllowClear", "nzShowExpand", "nzShowLine", "nzDropdownMatchSelectWidth", "nzCheckable", "nzHideUnMatched", "nzShowIcon", "nzShowSearch", "nzDisabled", "nzAsyncData", "nzMultiple", "nzDefaultExpandAll", "nzCheckStrictly", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualHeight", "nzExpandedIcon", "nzNotFoundContent", "nzNodes", "nzOpen", "nzSize", "nzPlaceHolder", "nzDropdownStyle", "nzDropdownClassName", "nzBackdrop", "nzStatus", "nzPlacement", "nzExpandedKeys", "nzDisplayWith", "nzMaxTagCount", "nzMaxTagPlaceholder", "nzTreeTemplate"], outputs: ["nzOpenChange", "nzCleared", "nzRemoved", "nzExpandChange", "nzTreeClick", "nzTreeCheckboxChange"], exportAs: ["nzTreeSelect"] }, { 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: TreeSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-tree-select', standalone: true, imports: [...FORM_MODULES, ...ZORRO_MODULES$7, ...COMPONENTS$3], providers: [
+            args: [{ selector: "app-tree-select", standalone: true, imports: [...FORM_MODULES, ...ZORRO_MODULES$4, ...COMPONENTS$1], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => TreeSelectComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"d-flex\">\r\n  @if (modeSignal() === formModeEnum.View) {\r\n    @if (fieldSignal().viewMode === viewModeEnum.form) {\r\n      <input nz-input [value]=\"displayValue\" class=\"modeView\" />\r\n    }\r\n    @if (fieldSignal().viewMode === viewModeEnum.text) {\r\n      <span class=\"modeView break-work\">{{ displayValue }}</span>\r\n    }\r\n  } @else {\r\n    <nz-tree-select\r\n      [nzId]=\"fieldSignal().key\"\r\n      nzShowSearch\r\n      nzAllowClear\r\n      [nzDisabled]=\"isDisabled\"\r\n      [nzPlaceHolder]=\"fieldSignal().placeholder!\"\r\n      [title]=\"fieldSignal().tooltip || ''\"\r\n      [nzDropdownMatchSelectWidth]=\"fieldSignal().matchSelectWidth\"\r\n      [ngModel]=\"value\"\r\n      [nzNodes]=\"options\"\r\n      class=\"flex-1 select-box\"\r\n      (ngModelChange)=\"handleChangeOptions($event)\"\r\n    >\r\n    </nz-tree-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"] }]
+                    ], template: "<div class=\"d-flex\">\r\n  @if (modeSignal() === formModeEnum.View) {\r\n    @if (viewMode() === viewModeEnum.form) {\r\n      <input nz-input [value]=\"displayValue\" class=\"modeView\" />\r\n    }\r\n    @if (viewMode() === viewModeEnum.text) {\r\n      <span class=\"modeView break-work\">{{ displayValue }}</span>\r\n    }\r\n  } @else {\r\n    <nz-tree-select\r\n      [nzId]=\"fieldKey()\"\r\n      nzShowSearch\r\n      nzAllowClear\r\n      [nzDisabled]=\"isDisabled\"\r\n      [nzPlaceHolder]=\"displayPlaceholder()\"\r\n      [title]=\"field().tooltip || ''\"\r\n      [nzDropdownMatchSelectWidth]=\"field().matchSelectWidth\"\r\n      [ngModel]=\"value\"\r\n      [nzNodes]=\"options\"\r\n      class=\"flex-1 min-w-0\"\r\n      (ngModelChange)=\"handleChangeOptions($event)\"\r\n    >\r\n    </nz-tree-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 (field().suffixes.length > 0) {\r\n    @for (suffix of field().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" }]
         }], ctorParameters: () => [], propDecorators: { isCustomInputText: [{
                 type: Input
             }] } });
 
-const ZORRO_MODULES$6 = [NzInputModule];
+const ZORRO_MODULES$3 = [NzInputModule];
 class TextareaComponent extends BaseValueAccessor {
     constructor() {
         super();
-        this.fieldSignal = computed(() => {
+        this.field = computed(() => {
             const base = this.fieldInput();
-            if (!(base instanceof TextareaField) || base.type !== FieldTypeEnum.Textarea) {
-                throw new Error('Expected TextareaField');
+            if (!(base instanceof TextareaField) ||
+                base.type !== FieldTypeEnum.Textarea) {
+                throw new Error("Expected TextareaField");
             }
             return base;
         });
-        this.textareaDisplayValue = '';
         this.displayNoValueText = NO_INFO_TEXT;
-        // 1. Effect chung Add + Edit
-        effect(() => {
-            if (this.isAddOrEdit()) {
-                const field = this.fieldSignal();
-                const { placeholder } = field;
-                if (!placeholder)
-                    field.placeholder = createPlaceholder(field);
-            }
-        });
-        // Trigger reset từ bên ngoài form.
-        effect(() => {
-            const reset = this.dFormService.resetTrigger();
-            if (reset?.formId === this.formId) {
-                this.reset();
-            }
+        this.viewDisplayValue = computed(() => {
+            // 1. Nếu không phải View thì không cần quan tâm text này
+            if (!this.isView())
+                return "";
+            // 2. Lấy giá trị từ valueSignal
+            const val = this.valueSignal();
+            return val ? val : NO_INFO_TEXT;
         });
     }
+    // Xử lý tạo placeholder text tự động nếu chưa truyền placeholder vào config của field
+    resolvePlaceholderText() {
+        return createInputPlaceholder(this.field());
+    }
     handleChangeTextarea(event) {
         const textareaValue = event.target.value;
         this.propagateValue(textareaValue);
         // Gán data vào đầu ra của form.
-        this.patchFormData(this.fieldKey(), textareaValue && textareaValue.replace(/\n+/g, 'br_enter').replace(/br_enter+/g, '\n'));
+        this.patchFormData(this.fieldKey(), textareaValue &&
+            textareaValue.replace(/\n+/g, "br_enter").replace(/br_enter+/g, "\n"));
     }
     writeValueToView(value) {
-        if (this.isView()) {
-            this.textareaDisplayValue = this.fieldSignal().modelValue || NO_INFO_TEXT;
-            return;
-        }
         if (!this.isAddOrEdit())
             return;
         // Gán data vào đầu ra của form.
@@ -3321,17 +3589,17 @@ class TextareaComponent extends BaseValueAccessor {
                 useExisting: forwardRef(() => TextareaComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if (modeSignal() === formModeEnum.View) {\r\n  @if (fieldSignal().viewMode === viewModeEnum.form) {\r\n    @if (textareaDisplayValue) {\r\n      <p [innerHTML]=\"textareaDisplayValue\" class=\"disabled-textarea break-work mb0\"></p>\r\n    } @else {\r\n      <input nz-input [value]=\"displayNoValueText\" class=\"modeView\" />\r\n    }\r\n  }\r\n  @if (fieldSignal().viewMode === viewModeEnum.text) {\r\n    @if (textareaDisplayValue) {\r\n      <p [innerHTML]=\"textareaDisplayValue\" class=\"mode-view mb-0 break-work mb0\"></p>\r\n    } @else {\r\n      <span class=\"modeView\">{{ displayNoValueText }}</span>\r\n    }\r\n  }\r\n} @else {\r\n  <textarea\r\n    nz-input\r\n    [id]=\"fieldSignal().key\"\r\n    [nzAutosize]=\"{ minRows: 1, maxRows: 6 }\"\r\n    [value]=\"value\"\r\n    [disabled]=\"isDisabled\"\r\n    [placeholder]=\"fieldSignal().placeholder!\"\r\n    (input)=\"handleChangeTextarea($event)\"\r\n  >\r\n  </textarea>\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}.disabled-textarea{padding:4px 8px;border:1px solid #cbd5e1;border-radius:4px;color:#575757!important;cursor:not-allowed;pointer-events:none;font-size:12px}.mode-view{pointer-events:none;color:#575757;font-size:12px}\n"], dependencies: [{ 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: "directive", type: i1$1.NzAutosizeDirective, selector: "textarea[nzAutosize]", inputs: ["nzAutosize"], exportAs: ["nzAutosize"] }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "@if (modeSignal() === formModeEnum.View) {\r\n  @if (viewMode() === viewModeEnum.form) {\r\n    @if (viewDisplayValue(); as displayValue) {\r\n      <p\r\n        [innerHTML]=\"displayValue\"\r\n        class=\"disabled-textarea break-work mb0\"\r\n      ></p>\r\n    } @else {\r\n      <input nz-input [value]=\"displayNoValueText\" class=\"modeView\" />\r\n    }\r\n  }\r\n  @if (viewMode() === viewModeEnum.text) {\r\n    @if (viewDisplayValue(); as displayValue) {\r\n      <p [innerHTML]=\"displayValue\" class=\"mode-view mb-0 break-work mb0\"></p>\r\n    } @else {\r\n      <span class=\"modeView\">{{ displayNoValueText }}</span>\r\n    }\r\n  }\r\n} @else {\r\n  <textarea\r\n    nz-input\r\n    [nzAutosize]=\"{ minRows: 1, maxRows: 8 }\"\r\n    [value]=\"value\"\r\n    [disabled]=\"isDisabled\"\r\n    [placeholder]=\"displayPlaceholder()\"\r\n    (input)=\"handleChangeTextarea($event)\"\r\n  >\r\n  </textarea>\r\n}\r\n", styles: [".disabled-textarea{padding:4px 8px;border:1px solid #cbd5e1;color:#575757!important;cursor:not-allowed;pointer-events:none}.mode-view{pointer-events:none;color:#575757;font-size:12px}\n"], dependencies: [{ 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: "directive", type: i1$1.NzAutosizeDirective, selector: "textarea[nzAutosize]", inputs: ["nzAutosize"], exportAs: ["nzAutosize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-textarea', standalone: true, imports: [...ZORRO_MODULES$6], providers: [
+            args: [{ selector: "app-textarea", standalone: true, imports: [...ZORRO_MODULES$3], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => TextareaComponent),
                             multi: true,
                         },
-                    ], template: "@if (modeSignal() === formModeEnum.View) {\r\n  @if (fieldSignal().viewMode === viewModeEnum.form) {\r\n    @if (textareaDisplayValue) {\r\n      <p [innerHTML]=\"textareaDisplayValue\" class=\"disabled-textarea break-work mb0\"></p>\r\n    } @else {\r\n      <input nz-input [value]=\"displayNoValueText\" class=\"modeView\" />\r\n    }\r\n  }\r\n  @if (fieldSignal().viewMode === viewModeEnum.text) {\r\n    @if (textareaDisplayValue) {\r\n      <p [innerHTML]=\"textareaDisplayValue\" class=\"mode-view mb-0 break-work mb0\"></p>\r\n    } @else {\r\n      <span class=\"modeView\">{{ displayNoValueText }}</span>\r\n    }\r\n  }\r\n} @else {\r\n  <textarea\r\n    nz-input\r\n    [id]=\"fieldSignal().key\"\r\n    [nzAutosize]=\"{ minRows: 1, maxRows: 6 }\"\r\n    [value]=\"value\"\r\n    [disabled]=\"isDisabled\"\r\n    [placeholder]=\"fieldSignal().placeholder!\"\r\n    (input)=\"handleChangeTextarea($event)\"\r\n  >\r\n  </textarea>\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}.disabled-textarea{padding:4px 8px;border:1px solid #cbd5e1;border-radius:4px;color:#575757!important;cursor:not-allowed;pointer-events:none;font-size:12px}.mode-view{pointer-events:none;color:#575757;font-size:12px}\n"] }]
+                    ], template: "@if (modeSignal() === formModeEnum.View) {\r\n  @if (viewMode() === viewModeEnum.form) {\r\n    @if (viewDisplayValue(); as displayValue) {\r\n      <p\r\n        [innerHTML]=\"displayValue\"\r\n        class=\"disabled-textarea break-work mb0\"\r\n      ></p>\r\n    } @else {\r\n      <input nz-input [value]=\"displayNoValueText\" class=\"modeView\" />\r\n    }\r\n  }\r\n  @if (viewMode() === viewModeEnum.text) {\r\n    @if (viewDisplayValue(); as displayValue) {\r\n      <p [innerHTML]=\"displayValue\" class=\"mode-view mb-0 break-work mb0\"></p>\r\n    } @else {\r\n      <span class=\"modeView\">{{ displayNoValueText }}</span>\r\n    }\r\n  }\r\n} @else {\r\n  <textarea\r\n    nz-input\r\n    [nzAutosize]=\"{ minRows: 1, maxRows: 8 }\"\r\n    [value]=\"value\"\r\n    [disabled]=\"isDisabled\"\r\n    [placeholder]=\"displayPlaceholder()\"\r\n    (input)=\"handleChangeTextarea($event)\"\r\n  >\r\n  </textarea>\r\n}\r\n", styles: [".disabled-textarea{padding:4px 8px;border:1px solid #cbd5e1;color:#575757!important;cursor:not-allowed;pointer-events:none}.mode-view{pointer-events:none;color:#575757;font-size:12px}\n"] }]
         }], ctorParameters: () => [] });
 
 class FileService {
@@ -3372,31 +3640,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 }]
         }] });
 
-const ZORRO_MODULES$5 = [NzUploadModule];
+const modules$2 = [CommonModule];
+const zorroModules$2 = [NzUploadModule, NzIconModule];
 class AvatarUploadComponent extends BaseValueAccessor {
     constructor() {
         super();
         this.size = 100; // kích thước avatar
-        this.fieldSignal = computed(() => {
+        this.field = computed(() => {
             const base = this.fieldInput();
             if (!(base instanceof AvatarUploadField) ||
-                (base.type !== FieldTypeEnum.AvatarUpload && base.controlType !== ControlTypeEnum.Upload)) {
-                throw new Error('Expected AvatarUploadField');
+                (base.type !== FieldTypeEnum.AvatarUpload &&
+                    base.controlType !== ControlTypeEnum.Upload)) {
+                throw new Error("Expected AvatarUploadField");
             }
             return base;
         });
-        this.avatarUrl = null;
-        // Mảng lưu trữ objectStorage liên quan đến tập tin.
-        this.objStorageList = signal([]);
+        // Inject services
         this.fileService = inject(FileService);
         this.formConfigService = inject(FormConfigService);
         this.nzNotification = inject(NzNotificationService);
+        this.avatarUrl = signal(null);
+        this.uploading = signal(false);
+        // Mảng lưu trữ objectStorage liên quan đến tập tin.
+        this.objStorageList = signal([]);
         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.
             const originFile = file;
             this.propagateValue(originFile);
-            const { maxSizeInMB, acceptedMimeTypes } = this.fieldSignal();
+            const { maxSizeInMB, acceptedMimeTypes } = this.field();
             const fileSizeInMB = formatFileSize(file.size, FileSizeTypeEnum.MB);
             const fileType = file.type;
             if (fileSizeInMB > maxSizeInMB || !acceptedMimeTypes.includes(fileType)) {
@@ -3414,13 +3686,6 @@ class AvatarUploadComponent extends BaseValueAccessor {
             // Validation đã thỏa, tiến hành upload file.
             return this.uploadFile(originFile);
         };
-        // Trigger reset từ bên ngoài form.
-        effect(() => {
-            const reset = this.dFormService.resetTrigger();
-            if (reset?.formId === this.formId) {
-                this.reset();
-            }
-        });
     }
     // Chạy khi value form được gán bởi các hàm reset, patchValue, setValue.
     writeValueToView(value) {
@@ -3435,31 +3700,33 @@ class AvatarUploadComponent extends BaseValueAccessor {
     handleInitAllData(value) {
         // Reset khi đổi mode, hoặc model, hoặc fields.
         this.objStorageList.set([]);
-        this.avatarUrl = '';
+        this.avatarUrl.set(null);
         if (isValidJSON(value)) {
             const objStorageList = JSON.parse(value);
             this.objStorageList.set(objStorageList);
-            this.avatarUrl = this.formConfigService.getViewFileUrl(objStorageList[0].name ?? '', false);
+            this.avatarUrl.set(this.formConfigService.getViewFileUrl(objStorageList[0]?.name ?? "", false));
         }
     }
     uploadFile(file) {
-        const { uploadTemp } = this.fieldSignal();
-        const newFileName = this.formConfigService.generateRandomFileName(file.name, 'avatar');
+        this.uploading.set(true);
+        const { uploadTemp } = this.field();
+        const newFileName = this.formConfigService.generateRandomFileName(file.name, "avatar");
         const renamedFile = new File([file], newFileName, { type: file.type });
         const formData = new FormData();
-        formData.append('File', renamedFile);
-        // formData.append('isTemp', 'true');
+        formData.append("File", renamedFile);
         if (uploadTemp)
-            formData.append('isTemp', 'true');
+            formData.append("isTemp", "true");
         return this.fileService
-            .uploadFile(renamedFile, formData, { uploadUrl: this.fieldSignal().apiFileConfig.uploadUrl })
-            .pipe(this.takeUntilDestroy())
+            .uploadFile(renamedFile, formData, {
+            uploadUrl: this.field().apiFileConfig.uploadUrl,
+        })
+            .pipe(this.takeUntilDestroy(), finalize(() => this.uploading.set(false)))
             .subscribe({
-            next: res => {
+            next: (res) => {
                 const { code, data, message } = res;
                 if (code === 0) {
                     this.objStorageList.set([data]);
-                    this.avatarUrl = this.formConfigService.getViewFileUrl(data.name ?? '', true);
+                    this.avatarUrl.set(this.formConfigService.getViewFileUrl(data?.name ?? "", true));
                     this.patchFormData(this.fieldKey(), JSON.stringify(this.objStorageList()));
                 }
                 else {
@@ -3467,21 +3734,18 @@ class AvatarUploadComponent extends BaseValueAccessor {
                 }
             },
             error: () => {
-                console.error('Lỗi trong quá trình tải lên ảnh đại diện!!');
+                console.error(UPLOAD_FILE_ERROR);
             },
         });
     }
-    handleDelete(file) {
-        this.objStorageList.set([]);
-        this.patchFormData(this.fieldKey(), JSON.stringify(this.objStorageList()));
-    }
-    handlePreview() { }
     deleteObjStorage(id) {
         return this.fileService
-            .deleteObjStorage(id, { deleteUrl: this.fieldSignal().apiFileConfig.deleteUrl })
+            .deleteObjStorage(id, {
+            deleteUrl: this.field().apiFileConfig.deleteUrl,
+        })
             .pipe(this.takeUntilDestroy())
             .subscribe({
-            next: res => {
+            next: (res) => {
                 const { code, message } = res;
                 if (code === 0) {
                     this.objStorageList.set([]);
@@ -3492,7 +3756,7 @@ class AvatarUploadComponent extends BaseValueAccessor {
                 }
             },
             error: (err) => {
-                console.error('Lỗi trong quá trình xóa tập tin khỏi máy chủ!!');
+                console.error(DELETE_FILE_ERROR);
                 // Tạm do api xóa có vấn đề
                 this.objStorageList.set([]);
                 this.patchFormData(this.fieldKey(), JSON.stringify(this.objStorageList()));
@@ -3506,27 +3770,27 @@ class AvatarUploadComponent extends BaseValueAccessor {
                 useExisting: forwardRef(() => AvatarUploadComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<nz-upload\r\n  [nzDisabled]=\"isDisabled\"\r\n  [nzShowUploadList]=\"false\"\r\n  [nzMultiple]=\"false\"\r\n  [nzBeforeUpload]=\"beforeUpload\"\r\n  [nzCustomRequest]=\"customRequest\"\r\n  [nzDisabled]=\"!!isView()\"\r\n>\r\n  <ng-container *ngTemplateOutlet=\"renderAvatarTpl\"></ng-container>\r\n</nz-upload>\r\n\r\n<!-- Template custom hi\u1EC3n th\u1ECB avatar -->\r\n<ng-template #renderAvatarTpl>\r\n  <div class=\"avatar-wrapper\" [ngStyle]=\"{ width: size + 'px', height: size + 'px' }\">\r\n    @if (!avatarUrl && isAddOrEdit()) {\r\n      <span nz-icon nzType=\"plus\" nzTheme=\"outline\" class=\"upload-icon\"></span>\r\n    }\r\n\r\n    @if (avatarUrl) {\r\n      <img [src]=\"avatarUrl\" alt=\"\" class=\"avatar-img\" />\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [".avatar-wrapper{display:flex;align-items:center;justify-content:center;border:1px dashed #d9d9d9;border-radius:8px;background-color:#fafafa;cursor:pointer;overflow:hidden}.avatar-wrapper .upload-icon{font-size:24px;color:#999}.avatar-wrapper .avatar-img{width:100%;height:100%;object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: i1$2.CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<nz-upload\r\n  [nzDisabled]=\"disabledSignal() || isView()\"\r\n  [nzShowUploadList]=\"false\"\r\n  [nzMultiple]=\"false\"\r\n  [nzBeforeUpload]=\"beforeUpload\"\r\n  [nzCustomRequest]=\"customRequest\"\r\n>\r\n  <ng-container *ngTemplateOutlet=\"renderAvatarTpl\"></ng-container>\r\n</nz-upload>\r\n\r\n<!-- Template custom hi\u1EC3n th\u1ECB avatar -->\r\n<ng-template #renderAvatarTpl>\r\n  <div\r\n    class=\"avatar-wrapper\"\r\n    [ngStyle]=\"{ width: size + 'px', height: size + 'px' }\"\r\n  >\r\n    @if (uploading()) {\r\n      <span\r\n        nz-icon\r\n        nzType=\"loading\"\r\n        nzTheme=\"outline\"\r\n        class=\"upload-icon\"\r\n      ></span>\r\n    } @else if (!avatarUrl() && isAddOrEdit()) {\r\n      <span nz-icon nzType=\"plus\" nzTheme=\"outline\" class=\"upload-icon\"></span>\r\n    } @else if (avatarUrl()) {\r\n      <img [src]=\"avatarUrl()\" alt=\"\" class=\"avatar-img\" />\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [".avatar-wrapper{display:flex;align-items:center;justify-content:center;border:1px dashed #d9d9d9;border-radius:8px;background-color:#fafafa;cursor:pointer;overflow:hidden}.avatar-wrapper .upload-icon{font-size:24px;color:#999}.avatar-wrapper .avatar-img{width:100%;height:100%;object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AvatarUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-avatar-upload', standalone: true, imports: [...CORE_MODULES, ...ZORRO_MODULES$5], providers: [
+            args: [{ selector: "app-avatar-upload", standalone: true, imports: [...modules$2, ...zorroModules$2], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => AvatarUploadComponent),
                             multi: true,
                         },
-                    ], template: "<nz-upload\r\n  [nzDisabled]=\"isDisabled\"\r\n  [nzShowUploadList]=\"false\"\r\n  [nzMultiple]=\"false\"\r\n  [nzBeforeUpload]=\"beforeUpload\"\r\n  [nzCustomRequest]=\"customRequest\"\r\n  [nzDisabled]=\"!!isView()\"\r\n>\r\n  <ng-container *ngTemplateOutlet=\"renderAvatarTpl\"></ng-container>\r\n</nz-upload>\r\n\r\n<!-- Template custom hi\u1EC3n th\u1ECB avatar -->\r\n<ng-template #renderAvatarTpl>\r\n  <div class=\"avatar-wrapper\" [ngStyle]=\"{ width: size + 'px', height: size + 'px' }\">\r\n    @if (!avatarUrl && isAddOrEdit()) {\r\n      <span nz-icon nzType=\"plus\" nzTheme=\"outline\" class=\"upload-icon\"></span>\r\n    }\r\n\r\n    @if (avatarUrl) {\r\n      <img [src]=\"avatarUrl\" alt=\"\" class=\"avatar-img\" />\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [".avatar-wrapper{display:flex;align-items:center;justify-content:center;border:1px dashed #d9d9d9;border-radius:8px;background-color:#fafafa;cursor:pointer;overflow:hidden}.avatar-wrapper .upload-icon{font-size:24px;color:#999}.avatar-wrapper .avatar-img{width:100%;height:100%;object-fit:cover}\n"] }]
+                    ], template: "<nz-upload\r\n  [nzDisabled]=\"disabledSignal() || isView()\"\r\n  [nzShowUploadList]=\"false\"\r\n  [nzMultiple]=\"false\"\r\n  [nzBeforeUpload]=\"beforeUpload\"\r\n  [nzCustomRequest]=\"customRequest\"\r\n>\r\n  <ng-container *ngTemplateOutlet=\"renderAvatarTpl\"></ng-container>\r\n</nz-upload>\r\n\r\n<!-- Template custom hi\u1EC3n th\u1ECB avatar -->\r\n<ng-template #renderAvatarTpl>\r\n  <div\r\n    class=\"avatar-wrapper\"\r\n    [ngStyle]=\"{ width: size + 'px', height: size + 'px' }\"\r\n  >\r\n    @if (uploading()) {\r\n      <span\r\n        nz-icon\r\n        nzType=\"loading\"\r\n        nzTheme=\"outline\"\r\n        class=\"upload-icon\"\r\n      ></span>\r\n    } @else if (!avatarUrl() && isAddOrEdit()) {\r\n      <span nz-icon nzType=\"plus\" nzTheme=\"outline\" class=\"upload-icon\"></span>\r\n    } @else if (avatarUrl()) {\r\n      <img [src]=\"avatarUrl()\" alt=\"\" class=\"avatar-img\" />\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [".avatar-wrapper{display:flex;align-items:center;justify-content:center;border:1px dashed #d9d9d9;border-radius:8px;background-color:#fafafa;cursor:pointer;overflow:hidden}.avatar-wrapper .upload-icon{font-size:24px;color:#999}.avatar-wrapper .avatar-img{width:100%;height:100%;object-fit:cover}\n"] }]
         }], ctorParameters: () => [], propDecorators: { size: [{
                 type: Input
             }] } });
 
-const ZORRO_MODULES$4 = [NzUploadModule, NzIconModule, NzButtonModule];
+const ZORRO_MODULES$2 = [NzUploadModule, NzIconModule, NzButtonModule];
 class MultiFileUploadComponent extends BaseValueAccessor {
     constructor() {
         super();
         // Cast lại đúng instance là MultiFileUploadFile.
-        this.fieldSignal = computed(() => {
+        this.field = computed(() => {
             const base = this.fieldInput();
             if (!(base instanceof MultiFileUploadField) ||
                 (base.type !== FieldTypeEnum.MultiFileUpload &&
@@ -3540,7 +3804,12 @@ 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 = computed(() => {
+            if (!this.isAddOrEdit())
+                return "";
+            const { acceptedMimeTypes } = this.field();
+            return `Hỗ trợ định dạng ${getExtensions(acceptedMimeTypes).join(", ")}`;
+        });
         // Đế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);
@@ -3549,8 +3818,6 @@ class MultiFileUploadComponent extends BaseValueAccessor {
         // Timer dùng để phát hiện kết thúc một batch (setTimeout(0)).
         this._batchTimer = null;
         this.fileService = inject(FileService);
-        this.toast = inject(ToastrService);
-        this.translate = inject(TranslateService);
         this.nzMessage = inject(NzMessageService);
         this.nzNotification = inject(NzNotificationService);
         this.formConfigService = inject(FormConfigService);
@@ -3593,22 +3860,6 @@ class MultiFileUploadComponent extends BaseValueAccessor {
             // Validation đã thỏa, tiến hành upload file.
             return this.uploadFile(originFile, uid);
         };
-        // 1. Effect chung Add + Edit
-        effect(() => {
-            if (this.isAddOrEdit()) {
-                const field = untracked(() => this.fieldSignal());
-                const { acceptedMimeTypes } = field;
-                this.fileExtensionGuide.set(`Hỗ trợ các định dạng ${getExtensions(acceptedMimeTypes).join(", ")}`);
-            }
-        });
-        // Trigger reset từ bên ngoài form.
-        effect(() => {
-            const reset = this.dFormService.resetTrigger();
-            if (reset?.formId === this.formId) {
-                this._clearBatch(); // Hủy batch đang xử lý trước khi reset.
-                this.reset();
-            }
-        });
     }
     // Chạy khi value form được gán bởi các hàm reset, patchValue, setValue.
     writeValueToView(value) {
@@ -3652,16 +3903,11 @@ class MultiFileUploadComponent extends BaseValueAccessor {
         const batch = [...this._batchBuffer];
         this._batchBuffer = [];
         this._batchTimer = null;
-        const { maxFileCount, maxSizeInMB, acceptedMimeTypes } = this.fieldSignal();
+        const { maxFileCount, maxSizeInMB, acceptedMimeTypes } = this.field();
         // Số file hiện tại: đã upload xong + đang trong hàng chờ upload.
         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.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;
@@ -3706,7 +3952,7 @@ class MultiFileUploadComponent extends BaseValueAccessor {
         }
     }
     uploadFile(file, uid) {
-        const { apiFileConfig, uploadTemp } = this.fieldSignal();
+        const { apiFileConfig, uploadTemp } = this.field();
         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.
@@ -3771,7 +4017,7 @@ class MultiFileUploadComponent extends BaseValueAccessor {
     }
     handleDelete(file) {
         const { objStorage, uploadStatus } = file;
-        const { uploadTemp } = this.fieldSignal();
+        const { uploadTemp } = this.field();
         // Loại bỏ và cập nhật danh sách ObjectStorage.
         const newObjStorageList = this.objStorageList().filter((item) => item.id !== objStorage?.id);
         this.objStorageList.set(newObjStorageList);
@@ -3797,7 +4043,7 @@ class MultiFileUploadComponent extends BaseValueAccessor {
     deleteObjStorage(id) {
         return this.fileService
             .deleteObjStorage(id, {
-            deleteUrl: this.fieldSignal().apiFileConfig.deleteUrl,
+            deleteUrl: this.field().apiFileConfig.deleteUrl,
         })
             .pipe(this.takeUntilDestroy())
             .subscribe({
@@ -3878,29 +4124,35 @@ 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\"\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"] }] }); }
+        ], 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 {{ field().maxFileCount }} t\u1EADp tin )</span\r\n    >\r\n\r\n    @if (field().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} @else {\r\n  @if (isView()) {\r\n    <span class=\"no-text-info\">Kh\u00F4ng c\u00F3 th\u00F4ng tin</span>\r\n  }\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}.no-text-info{pointer-events:none;background-color:#fff;color:#575757!important}.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$2], 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\"\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"] }]
+                    ], 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 {{ field().maxFileCount }} t\u1EADp tin )</span\r\n    >\r\n\r\n    @if (field().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} @else {\r\n  @if (isView()) {\r\n    <span class=\"no-text-info\">Kh\u00F4ng c\u00F3 th\u00F4ng tin</span>\r\n  }\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}.no-text-info{pointer-events:none;background-color:#fff;color:#575757!important}.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];
+const ZORRO_MODULES$1 = [
+    NzUploadModule,
+    NzIconModule,
+    NzButtonModule,
+    NzImageModule,
+];
 class MultiImageUploadComponent extends BaseValueAccessor {
     constructor() {
         super();
         // Cast lại đúng instance là MultiImageUploadField.
-        this.fieldSignal = computed(() => {
+        this.field = computed(() => {
             const base = this.fieldInput();
             if (!(base instanceof MultiImageUploadField) ||
-                (base.type !== FieldTypeEnum.MultiImageUpload && base.controlType !== ControlTypeEnum.Upload)) {
-                throw new Error('Expected MultiImageUploadField');
+                (base.type !== FieldTypeEnum.MultiImageUpload &&
+                    base.controlType !== ControlTypeEnum.Upload)) {
+                throw new Error("Expected MultiImageUploadField");
             }
             return base;
         });
@@ -3908,9 +4160,8 @@ class MultiImageUploadComponent extends BaseValueAccessor {
         this.objStorageList = signal([]);
         // Mảng đại diện các images.
         this.allFiles = signal([]);
+        this.uploading = signal(false);
         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.
@@ -3919,13 +4170,10 @@ class MultiImageUploadComponent extends BaseValueAccessor {
             // Xử lý gán vào CVA để tiến hành validation theo các props đã truyền vào.
             const originFile = file;
             this.propagateValue(originFile);
-            const { maxFileCount, maxSizeInMB, acceptedMimeTypes } = this.fieldSignal();
+            const { maxFileCount, maxSizeInMB, acceptedMimeTypes } = this.field();
             // 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.nzNotification.warning('Cảnh báo', `Chỉ được phép tải lên tối đa ${maxFileCount} hình ảnh`, { nzDuration: 4500 });
+                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);
@@ -3946,13 +4194,6 @@ class MultiImageUploadComponent extends BaseValueAccessor {
             // Validation đã thỏa, tiến hành upload file.
             return this.uploadFile(originFile);
         };
-        // Trigger reset từ bên ngoài form.
-        effect(() => {
-            const reset = this.dFormService.resetTrigger();
-            if (reset?.formId === this.formId) {
-                this.reset();
-            }
-        });
     }
     // Chạy khi value form được gán bởi các hàm reset, patchValue, setValue.
     writeValueToView(value) {
@@ -3973,17 +4214,18 @@ class MultiImageUploadComponent extends BaseValueAccessor {
             const objStorageList = JSON.parse(value);
             this.objStorageList.set(objStorageList);
             // Khởi tạo danh sách MyUploadFile từ data json.
-            const myUploadFiles = objStorageList.map(objStorage => ({
+            const myUploadFiles = objStorageList.map((objStorage) => ({
                 objStorage,
                 isTemp: false,
-                previewUrl: this.formConfigService.getViewFileUrl(objStorage.name ?? '', false),
+                previewUrl: this.formConfigService.getViewFileUrl(objStorage.name ?? "", false),
             }));
             this.allFiles.set(myUploadFiles);
         }
     }
     uploadFile(file) {
-        const { apiFileConfig, uploadTemp } = this.fieldSignal();
-        const newFileName = this.formConfigService.generateRandomFileName(file.name, 'file');
+        this.uploading.set(true);
+        const { apiFileConfig, uploadTemp } = this.field();
+        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.
@@ -3992,26 +4234,26 @@ class MultiImageUploadComponent 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())
+            .pipe(this.takeUntilDestroy(), finalize(() => this.uploading.set(false)))
             .subscribe({
-            next: res => {
+            next: (res) => {
                 const { code, data, message } = res;
                 if (code === 0) {
-                    this.objStorageList.update(curr => [...curr, data]);
-                    this.allFiles.update(curr => [
+                    this.objStorageList.update((curr) => [...curr, data]);
+                    this.allFiles.update((curr) => [
                         ...curr,
                         {
                             objStorage: data,
                             isTemp: true,
-                            previewUrl: this.formConfigService.getViewFileUrl(data.name ?? '', true),
+                            previewUrl: this.formConfigService.getViewFileUrl(data.name ?? "", true),
                         },
                     ]);
                     this.patchFormData(this.fieldKey(), JSON.stringify(this.objStorageList()));
@@ -4021,30 +4263,32 @@ class MultiImageUploadComponent extends BaseValueAccessor {
                 }
             },
             error: (err) => {
-                console.error('Lỗi trong quá trình tải hình ảnh đến máy chủ!!');
+                console.error("Lỗi trong quá trình tải hình ảnh đến máy chủ!!");
             },
         });
     }
     handleDelete(file) {
         const { objStorage } = file;
         // 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);
         // Cập nhật đầu ra cho form.
         this.patchFormData(this.fieldKey(), JSON.stringify(this.objStorageList()));
     }
     deleteObjStorage(id) {
         return this.fileService
-            .deleteObjStorage(id, { deleteUrl: this.fieldSignal().apiFileConfig.deleteUrl })
+            .deleteObjStorage(id, {
+            deleteUrl: this.field().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()));
                 }
@@ -4053,9 +4297,9 @@ class MultiImageUploadComponent extends BaseValueAccessor {
                 }
             },
             error: (err) => {
-                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()));
                 // Fake vì hiện api xóa đang có vấn đề.
@@ -4074,51 +4318,85 @@ class MultiImageUploadComponent extends BaseValueAccessor {
                 useExisting: forwardRef(() => MultiImageUploadComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if (isAddOrEdit()) {\r\n  <div class=\"upload\">\r\n    <nz-upload\r\n      [nzShowUploadList]=\"false\"\r\n      [nzMultiple]=\"false\"\r\n      [nzBeforeUpload]=\"beforeUpload\"\r\n      [nzCustomRequest]=\"customRequest\"\r\n    >\r\n      <button nz-button class=\"btn-upload\">\r\n        T\u1EA3i l\u00EAn\r\n        <nz-icon nzType=\"upload\" nzTheme=\"outline\" />\r\n      </button>\r\n\r\n      <span>T\u1ED1i \u0111a {{ fieldSignal().maxFileCount }} h\u00ECnh \u1EA3nh.</span>\r\n    </nz-upload>\r\n  </div>\r\n}\r\n\r\n<!-- Custom hi\u1EC3n th\u1ECB danh s\u00E1ch h\u00ECnh \u1EA3nh -->\r\n@if (allFiles().length > 0) {\r\n  <ng-container *ngTemplateOutlet=\"imageGroupTpl\"></ng-container>\r\n}\r\n\r\n<!-- Template custom hi\u1EC3n th\u1ECB danh s\u00E1ch h\u00ECnh \u1EA3nh -->\r\n<ng-template #imageGroupTpl>\r\n  <nz-image-group>\r\n    <div class=\"image-list\">\r\n      @for (file of allFiles(); track file.objStorage?.id; let i = $index) {\r\n        <div\r\n          class=\"image-card-container\"\r\n          [ngStyle]=\"{\r\n            width: fieldSignal().imageCardWidth,\r\n            height: fieldSignal().imageCardHeight,\r\n          }\"\r\n        >\r\n          <div class=\"image-item\">\r\n            <div class=\"image-item-info\">\r\n              <img\r\n                [id]=\"file.objStorage.id\"\r\n                nz-image\r\n                nzSrc=\"{{ file.previewUrl }}\"\r\n                alt=\"{{ file.objStorage.originalName }}\"\r\n              />\r\n            </div>\r\n\r\n            <div class=\"image-item-actions\">\r\n              <button nz-button nzType=\"text\" nzSize=\"small\" (click)=\"handlePreview(file)\">\r\n                <nz-icon nzType=\"eye\" nzTheme=\"outline\" />\r\n              </button>\r\n\r\n              @if (isAddOrEdit()) {\r\n                <button nz-button nzType=\"text\" nzSize=\"small\" (click)=\"handleDelete(file)\">\r\n                  <nz-icon nzType=\"delete\" nzTheme=\"outline\" />\r\n                </button>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  </nz-image-group>\r\n</ng-template>\r\n", styles: [".upload{margin-bottom:.625rem}.upload nz-upload .btn-upload{margin-right:.75rem}.image-list{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto}.image-list .image-card-container{display:inline-block;margin:0px .5rem .5rem 0;flex:0 0 auto}.image-list .image-card-container .image-item{padding:.5rem;border:1px solid #cbd5e1;height:100%;cursor:pointer;position:relative}.image-list .image-card-container .image-item .image-item-info{position:relative;height:100%;overflow:hidden}.image-list .image-card-container .image-item .image-item-info img{display:block;width:100%;height:100%;object-fit:contain}.image-list .image-card-container .image-item .image-item-info:before{position:absolute;z-index:1;width:100%;height:100%;background-color:#00000080;opacity:0;transition:all .3s;content:\" \"}.image-list .image-card-container .image-item .image-item-actions{position:absolute;top:50%;left:50%;z-index:10;white-space:nowrap;transform:translate(-50%,-50%);transition:all .5s;opacity:0}.image-list .image-card-container .image-item .image-item-actions>button nz-icon{font-size:1rem!important;color:#fdfdfdd9}.image-list .image-card-container .image-item:hover .image-item-info:before,.image-list .image-card-container .image-item:hover .image-item-actions{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: i1$2.CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }, { kind: "ngmodule", type: NzImageModule }, { kind: "directive", type: i7.NzImageDirective, selector: "img[nz-image]", inputs: ["nzSrc", "nzSrcset", "nzDisablePreview", "nzFallback", "nzPlaceholder", "nzScaleStep"], exportAs: ["nzImage"] }, { kind: "component", type: i7.NzImageGroupComponent, selector: "nz-image-group", inputs: ["nzScaleStep"], exportAs: ["nzImageGroup"] }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "@if (isAddOrEdit()) {\r\n  <div class=\"upload\">\r\n    <nz-upload\r\n      [nzDisabled]=\"\r\n        allFiles().length >= field().maxFileCount ||\r\n        disabledSignal() ||\r\n        uploading()\r\n      \"\r\n      [nzShowUploadList]=\"false\"\r\n      [nzMultiple]=\"false\"\r\n      [nzBeforeUpload]=\"beforeUpload\"\r\n      [nzCustomRequest]=\"customRequest\"\r\n    >\r\n      <button nz-button class=\"btn-upload\" [nzLoading]=\"uploading()\">\r\n        T\u1EA3i l\u00EAn\r\n        @if (!uploading()) {\r\n          <nz-icon nzType=\"upload\" nzTheme=\"outline\" />\r\n        }\r\n      </button>\r\n\r\n      <span class=\"ms-2 text-muted fs-12\">\r\n        (\u0110\u00E3 t\u1EA3i l\u00EAn {{ allFiles().length }}/{{ field().maxFileCount }}\r\n        h\u00ECnh \u1EA3nh)\r\n      </span>\r\n    </nz-upload>\r\n  </div>\r\n}\r\n\r\n<!-- Custom hi\u1EC3n th\u1ECB danh s\u00E1ch h\u00ECnh \u1EA3nh -->\r\n@if (allFiles().length > 0) {\r\n  <ng-container *ngTemplateOutlet=\"imageGroupTpl\"></ng-container>\r\n}\r\n\r\n<!-- Template custom hi\u1EC3n th\u1ECB danh s\u00E1ch h\u00ECnh \u1EA3nh -->\r\n<ng-template #imageGroupTpl>\r\n  <nz-image-group>\r\n    <div class=\"image-list\">\r\n      @for (file of allFiles(); track file.objStorage?.id; let i = $index) {\r\n        <div\r\n          class=\"image-card-container\"\r\n          [ngStyle]=\"{\r\n            width: field().imageCardWidth,\r\n            height: field().imageCardHeight,\r\n          }\"\r\n        >\r\n          <div class=\"image-item\">\r\n            <div class=\"image-item-info\">\r\n              <img\r\n                [id]=\"file.objStorage.id\"\r\n                nz-image\r\n                nzSrc=\"{{ file.previewUrl }}\"\r\n                alt=\"{{ file.objStorage.originalName }}\"\r\n              />\r\n            </div>\r\n\r\n            <div class=\"image-item-actions\">\r\n              <button\r\n                nz-button\r\n                nzType=\"text\"\r\n                nzSize=\"small\"\r\n                (click)=\"handlePreview(file)\"\r\n              >\r\n                <nz-icon nzType=\"eye\" nzTheme=\"outline\" />\r\n              </button>\r\n\r\n              @if (isAddOrEdit()) {\r\n                <button\r\n                  nz-button\r\n                  nzType=\"text\"\r\n                  nzSize=\"small\"\r\n                  (click)=\"handleDelete(file)\"\r\n                >\r\n                  <nz-icon nzType=\"delete\" nzTheme=\"outline\" />\r\n                </button>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  </nz-image-group>\r\n</ng-template>\r\n", styles: [".upload{margin-bottom:.625rem}.upload nz-upload .btn-upload{margin-right:.75rem}.image-list{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto}.image-list .image-card-container{display:inline-block;margin:0px .5rem .5rem 0;flex:0 0 auto}.image-list .image-card-container .image-item{padding:.5rem;border:1px solid #cbd5e1;height:100%;cursor:pointer;position:relative}.image-list .image-card-container .image-item .image-item-info{position:relative;height:100%;overflow:hidden}.image-list .image-card-container .image-item .image-item-info img{display:block;width:100%;height:100%;object-fit:contain}.image-list .image-card-container .image-item .image-item-info:before{position:absolute;z-index:1;width:100%;height:100%;background-color:#00000080;opacity:0;transition:all .3s;content:\" \"}.image-list .image-card-container .image-item .image-item-actions{position:absolute;top:50%;left:50%;z-index:10;white-space:nowrap;transform:translate(-50%,-50%);transition:all .5s;opacity:0}.image-list .image-card-container .image-item .image-item-actions>button nz-icon{font-size:1rem!important;color:#fdfdfdd9}.image-list .image-card-container .image-item:hover .image-item-info:before,.image-list .image-card-container .image-item:hover .image-item-actions{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: i1$2.CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }, { kind: "ngmodule", type: NzImageModule }, { kind: "directive", type: i7.NzImageDirective, selector: "img[nz-image]", inputs: ["nzSrc", "nzSrcset", "nzDisablePreview", "nzFallback", "nzPlaceholder", "nzScaleStep"], exportAs: ["nzImage"] }, { kind: "component", type: i7.NzImageGroupComponent, selector: "nz-image-group", inputs: ["nzScaleStep"], exportAs: ["nzImageGroup"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MultiImageUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-multi-image-upload', standalone: true, imports: [...CORE_MODULES, ...ZORRO_MODULES$3], providers: [
+            args: [{ selector: "app-multi-image-upload", standalone: true, imports: [...CORE_MODULES, ...ZORRO_MODULES$1], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => MultiImageUploadComponent),
                             multi: true,
                         },
-                    ], template: "@if (isAddOrEdit()) {\r\n  <div class=\"upload\">\r\n    <nz-upload\r\n      [nzShowUploadList]=\"false\"\r\n      [nzMultiple]=\"false\"\r\n      [nzBeforeUpload]=\"beforeUpload\"\r\n      [nzCustomRequest]=\"customRequest\"\r\n    >\r\n      <button nz-button class=\"btn-upload\">\r\n        T\u1EA3i l\u00EAn\r\n        <nz-icon nzType=\"upload\" nzTheme=\"outline\" />\r\n      </button>\r\n\r\n      <span>T\u1ED1i \u0111a {{ fieldSignal().maxFileCount }} h\u00ECnh \u1EA3nh.</span>\r\n    </nz-upload>\r\n  </div>\r\n}\r\n\r\n<!-- Custom hi\u1EC3n th\u1ECB danh s\u00E1ch h\u00ECnh \u1EA3nh -->\r\n@if (allFiles().length > 0) {\r\n  <ng-container *ngTemplateOutlet=\"imageGroupTpl\"></ng-container>\r\n}\r\n\r\n<!-- Template custom hi\u1EC3n th\u1ECB danh s\u00E1ch h\u00ECnh \u1EA3nh -->\r\n<ng-template #imageGroupTpl>\r\n  <nz-image-group>\r\n    <div class=\"image-list\">\r\n      @for (file of allFiles(); track file.objStorage?.id; let i = $index) {\r\n        <div\r\n          class=\"image-card-container\"\r\n          [ngStyle]=\"{\r\n            width: fieldSignal().imageCardWidth,\r\n            height: fieldSignal().imageCardHeight,\r\n          }\"\r\n        >\r\n          <div class=\"image-item\">\r\n            <div class=\"image-item-info\">\r\n              <img\r\n                [id]=\"file.objStorage.id\"\r\n                nz-image\r\n                nzSrc=\"{{ file.previewUrl }}\"\r\n                alt=\"{{ file.objStorage.originalName }}\"\r\n              />\r\n            </div>\r\n\r\n            <div class=\"image-item-actions\">\r\n              <button nz-button nzType=\"text\" nzSize=\"small\" (click)=\"handlePreview(file)\">\r\n                <nz-icon nzType=\"eye\" nzTheme=\"outline\" />\r\n              </button>\r\n\r\n              @if (isAddOrEdit()) {\r\n                <button nz-button nzType=\"text\" nzSize=\"small\" (click)=\"handleDelete(file)\">\r\n                  <nz-icon nzType=\"delete\" nzTheme=\"outline\" />\r\n                </button>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  </nz-image-group>\r\n</ng-template>\r\n", styles: [".upload{margin-bottom:.625rem}.upload nz-upload .btn-upload{margin-right:.75rem}.image-list{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto}.image-list .image-card-container{display:inline-block;margin:0px .5rem .5rem 0;flex:0 0 auto}.image-list .image-card-container .image-item{padding:.5rem;border:1px solid #cbd5e1;height:100%;cursor:pointer;position:relative}.image-list .image-card-container .image-item .image-item-info{position:relative;height:100%;overflow:hidden}.image-list .image-card-container .image-item .image-item-info img{display:block;width:100%;height:100%;object-fit:contain}.image-list .image-card-container .image-item .image-item-info:before{position:absolute;z-index:1;width:100%;height:100%;background-color:#00000080;opacity:0;transition:all .3s;content:\" \"}.image-list .image-card-container .image-item .image-item-actions{position:absolute;top:50%;left:50%;z-index:10;white-space:nowrap;transform:translate(-50%,-50%);transition:all .5s;opacity:0}.image-list .image-card-container .image-item .image-item-actions>button nz-icon{font-size:1rem!important;color:#fdfdfdd9}.image-list .image-card-container .image-item:hover .image-item-info:before,.image-list .image-card-container .image-item:hover .image-item-actions{opacity:1}\n"] }]
+                    ], template: "@if (isAddOrEdit()) {\r\n  <div class=\"upload\">\r\n    <nz-upload\r\n      [nzDisabled]=\"\r\n        allFiles().length >= field().maxFileCount ||\r\n        disabledSignal() ||\r\n        uploading()\r\n      \"\r\n      [nzShowUploadList]=\"false\"\r\n      [nzMultiple]=\"false\"\r\n      [nzBeforeUpload]=\"beforeUpload\"\r\n      [nzCustomRequest]=\"customRequest\"\r\n    >\r\n      <button nz-button class=\"btn-upload\" [nzLoading]=\"uploading()\">\r\n        T\u1EA3i l\u00EAn\r\n        @if (!uploading()) {\r\n          <nz-icon nzType=\"upload\" nzTheme=\"outline\" />\r\n        }\r\n      </button>\r\n\r\n      <span class=\"ms-2 text-muted fs-12\">\r\n        (\u0110\u00E3 t\u1EA3i l\u00EAn {{ allFiles().length }}/{{ field().maxFileCount }}\r\n        h\u00ECnh \u1EA3nh)\r\n      </span>\r\n    </nz-upload>\r\n  </div>\r\n}\r\n\r\n<!-- Custom hi\u1EC3n th\u1ECB danh s\u00E1ch h\u00ECnh \u1EA3nh -->\r\n@if (allFiles().length > 0) {\r\n  <ng-container *ngTemplateOutlet=\"imageGroupTpl\"></ng-container>\r\n}\r\n\r\n<!-- Template custom hi\u1EC3n th\u1ECB danh s\u00E1ch h\u00ECnh \u1EA3nh -->\r\n<ng-template #imageGroupTpl>\r\n  <nz-image-group>\r\n    <div class=\"image-list\">\r\n      @for (file of allFiles(); track file.objStorage?.id; let i = $index) {\r\n        <div\r\n          class=\"image-card-container\"\r\n          [ngStyle]=\"{\r\n            width: field().imageCardWidth,\r\n            height: field().imageCardHeight,\r\n          }\"\r\n        >\r\n          <div class=\"image-item\">\r\n            <div class=\"image-item-info\">\r\n              <img\r\n                [id]=\"file.objStorage.id\"\r\n                nz-image\r\n                nzSrc=\"{{ file.previewUrl }}\"\r\n                alt=\"{{ file.objStorage.originalName }}\"\r\n              />\r\n            </div>\r\n\r\n            <div class=\"image-item-actions\">\r\n              <button\r\n                nz-button\r\n                nzType=\"text\"\r\n                nzSize=\"small\"\r\n                (click)=\"handlePreview(file)\"\r\n              >\r\n                <nz-icon nzType=\"eye\" nzTheme=\"outline\" />\r\n              </button>\r\n\r\n              @if (isAddOrEdit()) {\r\n                <button\r\n                  nz-button\r\n                  nzType=\"text\"\r\n                  nzSize=\"small\"\r\n                  (click)=\"handleDelete(file)\"\r\n                >\r\n                  <nz-icon nzType=\"delete\" nzTheme=\"outline\" />\r\n                </button>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  </nz-image-group>\r\n</ng-template>\r\n", styles: [".upload{margin-bottom:.625rem}.upload nz-upload .btn-upload{margin-right:.75rem}.image-list{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto}.image-list .image-card-container{display:inline-block;margin:0px .5rem .5rem 0;flex:0 0 auto}.image-list .image-card-container .image-item{padding:.5rem;border:1px solid #cbd5e1;height:100%;cursor:pointer;position:relative}.image-list .image-card-container .image-item .image-item-info{position:relative;height:100%;overflow:hidden}.image-list .image-card-container .image-item .image-item-info img{display:block;width:100%;height:100%;object-fit:contain}.image-list .image-card-container .image-item .image-item-info:before{position:absolute;z-index:1;width:100%;height:100%;background-color:#00000080;opacity:0;transition:all .3s;content:\" \"}.image-list .image-card-container .image-item .image-item-actions{position:absolute;top:50%;left:50%;z-index:10;white-space:nowrap;transform:translate(-50%,-50%);transition:all .5s;opacity:0}.image-list .image-card-container .image-item .image-item-actions>button nz-icon{font-size:1rem!important;color:#fdfdfdd9}.image-list .image-card-container .image-item:hover .image-item-info:before,.image-list .image-card-container .image-item:hover .image-item-actions{opacity:1}\n"] }]
         }], ctorParameters: () => [] });
 
-const ZORRO_MODULES$2 = [NzUploadModule, NzIconModule, NzInputModule, NzButtonModule, NzSpinModule];
-const COMPONENTS$2 = [SuffixComponent];
+const modules$1 = [CommonModule];
+const zorroModules$1 = [
+    NzUploadModule,
+    NzIconModule,
+    NzInputModule,
+    NzButtonModule,
+    NzSpinModule,
+];
+const components$1 = [SuffixComponent];
 class SingleFileUploadComponent extends BaseValueAccessor {
     constructor() {
         super();
-        this.fieldSignal = computed(() => {
+        this.field = computed(() => {
             const base = this.fieldInput();
             if (!(base instanceof SingleFileUploadField) ||
-                (base.type !== FieldTypeEnum.SingleFileUpload && base.controlType !== ControlTypeEnum.Upload)) {
-                throw new Error('Expected SingleFileUploadField');
+                (base.type !== FieldTypeEnum.SingleFileUpload &&
+                    base.controlType !== ControlTypeEnum.Upload)) {
+                throw new Error("Expected SingleFileUploadField");
             }
             return base;
         });
+        // Inject services
+        this.fileService = inject(FileService);
+        this.nzNotification = inject(NzNotificationService);
+        this.formConfigService = inject(FormConfigService);
         // Mảng lưu trữ objectStorage liên quan đến tập tin.
         this.objStorageList = signal([]);
         // Mảng đại diện các files.
         this.allFiles = signal([]);
         // Text hướng dẫn các loại extension được upload.
-        this.fileExtensionGuide = signal('');
-        this.inputDisplayValue = '';
+        this.fileExtensionGuide = computed(() => {
+            if (!this.isAddOrEdit())
+                return "";
+            const { acceptedMimeTypes } = this.field();
+            return `Hỗ trợ định dạng ${getExtensions(acceptedMimeTypes).join(", ")}`;
+        });
+        this.viewDisplayValue = computed(() => {
+            // 1. Nếu không phải View thì không cần quan tâm text này
+            if (!this.isView())
+                return "";
+            if (this.allFiles().length === 0)
+                return NO_INFO_TEXT;
+            const { objStorage } = this.allFiles()[0];
+            const { nameAlias, name } = objStorage;
+            if (!nameAlias && !name)
+                return NO_INFO_TEXT;
+            return nameAlias ?? name;
+        });
+        this.addEditDisplayValue = computed(() => {
+            if (!this.isAddOrEdit())
+                return "";
+            if (this.allFiles().length === 0)
+                return UPLOAD_FILE_TEXT;
+            const { objStorage } = this.allFiles()[0];
+            const { nameAlias, name } = objStorage;
+            if (!nameAlias && !name)
+                return NO_FILE_NAME;
+            return nameAlias ?? name;
+        });
         this.uploading = signal(false);
-        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.
             // Xử lý gán vào CVA để tiến hành validation theo các props đã truyền vào.
             const originFile = file;
             this.propagateValue(originFile);
-            const { maxSizeInMB, acceptedMimeTypes } = this.fieldSignal();
+            const { maxSizeInMB, acceptedMimeTypes } = this.field();
             const fileSizeInMB = formatFileSize(file.size, FileSizeTypeEnum.MB);
             const fileType = file.type;
             if (fileSizeInMB > maxSizeInMB || !acceptedMimeTypes.includes(fileType)) {
@@ -4136,27 +4414,6 @@ class SingleFileUploadComponent extends BaseValueAccessor {
             // Validation đã thỏa, tiến hành upload file.
             return this.uploadFile(originFile);
         };
-        // 1. Effect chung Add + Edit
-        effect(() => {
-            if (this.isAddOrEdit()) {
-                const field = untracked(() => this.fieldSignal());
-                const { acceptedMimeTypes } = field;
-                this.fileExtensionGuide.set(`Hỗ trợ định dạng ${getExtensions(acceptedMimeTypes).join(', ')}`);
-            }
-        });
-        // Trigger reset từ bên ngoài form.
-        effect(() => {
-            const reset = this.dFormService.resetTrigger();
-            if (reset?.formId === this.formId) {
-                this.reset();
-            }
-        });
-        effect(() => {
-            const allFiles = this.allFiles();
-            this.inputDisplayValue = allFiles[0]
-                ? (allFiles[0].objStorage.nameAlias ?? allFiles[0].objStorage.name) || 'Không có thông tin'
-                : 'Không có thông tin';
-        });
     }
     // Chạy khi value form được gán bởi các hàm reset, patchValue, setValue.
     writeValueToView(value) {
@@ -4176,7 +4433,7 @@ class SingleFileUploadComponent extends BaseValueAccessor {
             const objStorageList = JSON.parse(value);
             this.objStorageList.set(objStorageList);
             // Khởi tạo danh sách MyUploadFile từ data json.
-            const myUploadFiles = objStorageList.map(objStorage => ({
+            const myUploadFiles = objStorageList.map((objStorage) => ({
                 objStorage,
                 isTemp: false,
                 previewUrl: `${this.formConfigService.getStorageUrl()}${objStorage.bucket}/${objStorage.path}`,
@@ -4186,14 +4443,18 @@ class SingleFileUploadComponent extends BaseValueAccessor {
         else {
             if (value) {
                 this.allFiles.set([
-                    { isTemp: false, objStorage: { id: '', name: value }, previewUrl: '' },
+                    {
+                        isTemp: false,
+                        objStorage: { id: "", name: value },
+                        previewUrl: "",
+                    },
                 ]);
             }
         }
     }
     uploadFile(file) {
         this.uploading.set(true);
-        const { apiFileConfig, uploadTemp } = this.fieldSignal();
+        const { apiFileConfig, uploadTemp } = this.field();
         const newFileName = FormUtils.randomFileName(file.name);
         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.
@@ -4204,23 +4465,23 @@ class SingleFileUploadComponent extends BaseValueAccessor {
             : (() => {
                 // Mặc định
                 const fd = new FormData();
-                fd.append('File', file, newFileName);
+                fd.append("File", file, newFileName);
                 if (apiFileConfig.uploadByPath && apiFileConfig.uploadPath) {
-                    fd.append('path', apiFileConfig.uploadPath);
+                    fd.append("path", apiFileConfig.uploadPath);
                 }
                 if (apiFileConfig.isOriginName) {
-                    fd.append('nameAlias', file.name);
+                    fd.append("nameAlias", file.name);
                 }
                 // fd.append('isTemp', 'true');
                 return fd;
             })();
         if (uploadTemp)
-            formData.append('isTemp', 'true');
+            formData.append("isTemp", "true");
         return this.fileService
             .uploadFile(file, formData, { uploadUrl })
             .pipe(this.takeUntilDestroy(), finalize(() => this.uploading.set(false)))
             .subscribe({
-            next: res => {
+            next: (res) => {
                 const { code, data, message } = res;
                 if (code === 0) {
                     this.objStorageList.set([data]);
@@ -4229,7 +4490,7 @@ class SingleFileUploadComponent extends BaseValueAccessor {
                             objStorage: data,
                             isTemp: true,
                             previewUrl: uploadTemp
-                                ? this.formConfigService.getViewFileUrl(data.name ?? '', true)
+                                ? this.formConfigService.getViewFileUrl(data.name ?? "", true)
                                 : `${this.formConfigService.getStorageUrl()}${data.bucket}/${data.path}`,
                         },
                     ]);
@@ -4240,19 +4501,19 @@ class SingleFileUploadComponent extends BaseValueAccessor {
                 }
             },
             error: () => {
-                console.error('Lỗi trong quá trình tải tập tin đến máy chủ!!');
+                console.error(UPLOAD_FILE_ERROR);
             },
         });
     }
     handleDelete(file) {
         const { objStorage } = file;
-        const { uploadTemp } = this.fieldSignal();
+        const { uploadTemp } = this.field();
         this.objStorageList.set([]);
         // 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);
         if (!uploadTemp) {
-            this.deleteObjStorage(objStorage.id || '');
+            this.deleteObjStorage(objStorage.id || "");
             return;
         }
         this.patchFormData(this.fieldKey(), JSON.stringify(this.objStorageList()));
@@ -4260,10 +4521,12 @@ class SingleFileUploadComponent extends BaseValueAccessor {
     }
     deleteObjStorage(id) {
         return this.fileService
-            .deleteObjStorage(id, { deleteUrl: this.fieldSignal().apiFileConfig.deleteUrl })
+            .deleteObjStorage(id, {
+            deleteUrl: this.field().apiFileConfig.deleteUrl,
+        })
             .pipe(this.takeUntilDestroy())
             .subscribe({
-            next: res => {
+            next: (res) => {
                 const { code, message } = res;
                 if (code === 0) {
                     this.objStorageList.set([]);
@@ -4274,7 +4537,7 @@ class SingleFileUploadComponent extends BaseValueAccessor {
                 }
             },
             error: () => {
-                console.error('Lỗi trong quá trình xóa tập tin khỏi máy chủ!!');
+                console.error(DELETE_FILE_ERROR);
                 // Tạm do api xóa có vấn đề
                 this.objStorageList.set([]);
                 this.patchFormData(this.fieldKey(), JSON.stringify(this.objStorageList()));
@@ -4288,23 +4551,24 @@ class SingleFileUploadComponent extends BaseValueAccessor {
                 useExisting: forwardRef(() => SingleFileUploadComponent),
                 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 nz-input [value]=\"inputDisplayValue\" class=\"modeView\" />\r\n    }\r\n    @if (fieldSignal().viewMode === viewModeEnum.text) {\r\n      <span class=\"modeView\">{{ inputDisplayValue }}</span>\r\n    }\r\n  }\r\n  @if (isAddOrEdit()) {\r\n    <nz-spin [nzSpinning]=\"uploading()\" nzTip=\"\u0110ang t\u1EA3i l\u00EAn\" class=\"width-100\">\r\n      <div class=\"d-flex\">\r\n        <nz-input-group\r\n          [nzSuffix]=\"allFiles().length > 0 && isAddOrEdit() ? deleteIcon : undefined\"\r\n          class=\"flex-1\"\r\n        >\r\n          <input nz-input [value]=\"inputDisplayValue\" class=\"no-events\" />\r\n        </nz-input-group>\r\n        <nz-upload\r\n          [nzShowUploadList]=\"false\"\r\n          [nzMultiple]=\"false\"\r\n          [nzBeforeUpload]=\"beforeUpload\"\r\n          [nzCustomRequest]=\"customRequest\"\r\n        >\r\n          <button nz-button class=\"btn-upload height-100 text-white\">\r\n            <span class=\"font-size-12\">T\u1EA3i l\u00EAn</span>\r\n            <nz-icon nzType=\"upload\" nzTheme=\"outline\" />\r\n          </button>\r\n        </nz-upload>\r\n      </div>\r\n    </nz-spin>\r\n  }\r\n\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@if (fieldSignal().showAcceptedExtensionGuide && fileExtensionGuide()) {\r\n  <div class=\"file-extension-guide\">{{ fileExtensionGuide() }}</div>\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() | slice: 0 : 1; track file.objStorage?.id) {\r\n      <li class=\"upload-item\">\r\n        <span nz-icon nzType=\"paper-clip\" nzTheme=\"outline\" class=\"paper-clip-icon\"></span>\r\n\r\n        <span class=\"filename\">{{ file.objStorage.name }}</span>\r\n\r\n        @if (isAddOrEdit()) {\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)\"\r\n          ></span>\r\n        }\r\n      </li>\r\n    }\r\n  </ul>\r\n</ng-template>\r\n\r\n<ng-template #deleteIcon>\r\n  <span\r\n    title=\"X\u00F3a\"\r\n    class=\"mdi mdi-delete cursor-pointer text-error\"\r\n    (click)=\"handleDelete(allFiles()[0])\"\r\n  ></span>\r\n</ng-template>\r\n", styles: [".upload{display:flex}.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 .paper-clip-icon{margin-right:.5rem}.custom-upload-list .delete-icon{color:red;cursor:pointer;margin-left:.5rem}.file-name:hover{text-decoration:underline;color:#0a4c9f;cursor:pointer}.btn-upload{background-color:#2666ab}.modeView{pointer-events:none;color:#575757;font-size:12px}.no-events{pointer-events:none;border-radius:4px!important;color:#575757;font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: i1$2.CommonModule }, { kind: "pipe", type: i1$2.SlicePipe, name: "slice" }, { 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: 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: i1$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i1$1.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { 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"] }, { 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=\"d-flex\">\r\n  @if (modeSignal() === formModeEnum.View) {\r\n    @if (viewMode() === viewModeEnum.form) {\r\n      <input nz-input [value]=\"viewDisplayValue()\" class=\"modeView\" />\r\n    }\r\n    @if (viewMode() === viewModeEnum.text) {\r\n      <span class=\"modeView\">{{ viewDisplayValue() }}</span>\r\n    }\r\n  }\r\n  @if (isAddOrEdit()) {\r\n    <div class=\"flex w-100\">\r\n      <nz-input-group\r\n        [nzSuffix]=\"\r\n          uploading() || (allFiles().length > 0 && isAddOrEdit())\r\n            ? actionIcon\r\n            : undefined\r\n        \"\r\n        class=\"flex-1\"\r\n      >\r\n        <input\r\n          nz-input\r\n          [value]=\"\r\n            uploading() ? '\u0110ang t\u1EA3i l\u00EAn t\u1EADp tin...' : addEditDisplayValue()\r\n          \"\r\n          class=\"no-events\"\r\n        />\r\n      </nz-input-group>\r\n\r\n      <nz-upload\r\n        [nzShowUploadList]=\"false\"\r\n        [nzMultiple]=\"false\"\r\n        [nzBeforeUpload]=\"beforeUpload\"\r\n        [nzCustomRequest]=\"customRequest\"\r\n      >\r\n        <button\r\n          nz-button\r\n          class=\"btn-upload h-100 text-white\"\r\n          [disabled]=\"uploading()\"\r\n        >\r\n          <span class=\"fs-12\">T\u1EA3i l\u00EAn</span>\r\n          <nz-icon nzType=\"upload\" nzTheme=\"outline\" />\r\n        </button>\r\n      </nz-upload>\r\n    </div>\r\n  }\r\n\r\n  @if (field().suffixes.length > 0) {\r\n    @for (suffix of field().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\r\n<ng-template #actionIcon>\r\n  @if (uploading()) {\r\n    <span\r\n      nz-icon\r\n      nzType=\"loading\"\r\n      nzTheme=\"outline\"\r\n      class=\"text-primary\"\r\n    ></span>\r\n  } @else if (allFiles().length > 0 && isAddOrEdit()) {\r\n    <span\r\n      title=\"X\u00F3a\"\r\n      class=\"mdi mdi-delete pointer text-danger\"\r\n      (click)=\"handleDelete(allFiles()[0])\"\r\n    ></span>\r\n  }\r\n</ng-template>\r\n\r\n@if (field().showAcceptedExtensionGuide && fileExtensionGuide()) {\r\n  <div class=\"file-extension-guide\">{{ fileExtensionGuide() }}</div>\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() | slice: 0 : 1; track file.objStorage?.id) {\r\n      <li class=\"upload-item\">\r\n        <span nz-icon nzType=\"paper-clip\" nzTheme=\"outline\" class=\"paper-clip-icon\"></span>\r\n\r\n        <span class=\"filename\">{{ file.objStorage.name }}</span>\r\n\r\n        @if (isAddOrEdit()) {\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)\"\r\n          ></span>\r\n        }\r\n      </li>\r\n    }\r\n  </ul>\r\n</ng-template> -->\r\n", styles: [".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 .paper-clip-icon{margin-right:.5rem}.custom-upload-list .delete-icon{color:red;cursor:pointer;margin-left:.5rem}.file-name:hover{text-decoration:underline;color:#0a4c9f;cursor:pointer}.btn-upload{background-color:#2666ab}.no-events{pointer-events:none;color:#cdbfbf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: 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: i1$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i1$1.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { 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"] }, { kind: "ngmodule", type: NzSpinModule }, { kind: "component", type: SuffixComponent, selector: "app-suffix", inputs: ["suffixConfig", "formId"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SingleFileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-single-file-upload', standalone: true, imports: [...CORE_MODULES, ...ZORRO_MODULES$2, ...COMPONENTS$2], providers: [
+            args: [{ selector: "app-single-file-upload", standalone: true, imports: [...modules$1, ...zorroModules$1, ...components$1], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SingleFileUploadComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"d-flex\">\r\n  @if (modeSignal() === formModeEnum.View) {\r\n    @if (fieldSignal().viewMode === viewModeEnum.form) {\r\n      <input nz-input [value]=\"inputDisplayValue\" class=\"modeView\" />\r\n    }\r\n    @if (fieldSignal().viewMode === viewModeEnum.text) {\r\n      <span class=\"modeView\">{{ inputDisplayValue }}</span>\r\n    }\r\n  }\r\n  @if (isAddOrEdit()) {\r\n    <nz-spin [nzSpinning]=\"uploading()\" nzTip=\"\u0110ang t\u1EA3i l\u00EAn\" class=\"width-100\">\r\n      <div class=\"d-flex\">\r\n        <nz-input-group\r\n          [nzSuffix]=\"allFiles().length > 0 && isAddOrEdit() ? deleteIcon : undefined\"\r\n          class=\"flex-1\"\r\n        >\r\n          <input nz-input [value]=\"inputDisplayValue\" class=\"no-events\" />\r\n        </nz-input-group>\r\n        <nz-upload\r\n          [nzShowUploadList]=\"false\"\r\n          [nzMultiple]=\"false\"\r\n          [nzBeforeUpload]=\"beforeUpload\"\r\n          [nzCustomRequest]=\"customRequest\"\r\n        >\r\n          <button nz-button class=\"btn-upload height-100 text-white\">\r\n            <span class=\"font-size-12\">T\u1EA3i l\u00EAn</span>\r\n            <nz-icon nzType=\"upload\" nzTheme=\"outline\" />\r\n          </button>\r\n        </nz-upload>\r\n      </div>\r\n    </nz-spin>\r\n  }\r\n\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@if (fieldSignal().showAcceptedExtensionGuide && fileExtensionGuide()) {\r\n  <div class=\"file-extension-guide\">{{ fileExtensionGuide() }}</div>\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() | slice: 0 : 1; track file.objStorage?.id) {\r\n      <li class=\"upload-item\">\r\n        <span nz-icon nzType=\"paper-clip\" nzTheme=\"outline\" class=\"paper-clip-icon\"></span>\r\n\r\n        <span class=\"filename\">{{ file.objStorage.name }}</span>\r\n\r\n        @if (isAddOrEdit()) {\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)\"\r\n          ></span>\r\n        }\r\n      </li>\r\n    }\r\n  </ul>\r\n</ng-template>\r\n\r\n<ng-template #deleteIcon>\r\n  <span\r\n    title=\"X\u00F3a\"\r\n    class=\"mdi mdi-delete cursor-pointer text-error\"\r\n    (click)=\"handleDelete(allFiles()[0])\"\r\n  ></span>\r\n</ng-template>\r\n", styles: [".upload{display:flex}.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 .paper-clip-icon{margin-right:.5rem}.custom-upload-list .delete-icon{color:red;cursor:pointer;margin-left:.5rem}.file-name:hover{text-decoration:underline;color:#0a4c9f;cursor:pointer}.btn-upload{background-color:#2666ab}.modeView{pointer-events:none;color:#575757;font-size:12px}.no-events{pointer-events:none;border-radius:4px!important;color:#575757;font-size:12px}\n"] }]
+                    ], template: "<div class=\"d-flex\">\r\n  @if (modeSignal() === formModeEnum.View) {\r\n    @if (viewMode() === viewModeEnum.form) {\r\n      <input nz-input [value]=\"viewDisplayValue()\" class=\"modeView\" />\r\n    }\r\n    @if (viewMode() === viewModeEnum.text) {\r\n      <span class=\"modeView\">{{ viewDisplayValue() }}</span>\r\n    }\r\n  }\r\n  @if (isAddOrEdit()) {\r\n    <div class=\"flex w-100\">\r\n      <nz-input-group\r\n        [nzSuffix]=\"\r\n          uploading() || (allFiles().length > 0 && isAddOrEdit())\r\n            ? actionIcon\r\n            : undefined\r\n        \"\r\n        class=\"flex-1\"\r\n      >\r\n        <input\r\n          nz-input\r\n          [value]=\"\r\n            uploading() ? '\u0110ang t\u1EA3i l\u00EAn t\u1EADp tin...' : addEditDisplayValue()\r\n          \"\r\n          class=\"no-events\"\r\n        />\r\n      </nz-input-group>\r\n\r\n      <nz-upload\r\n        [nzShowUploadList]=\"false\"\r\n        [nzMultiple]=\"false\"\r\n        [nzBeforeUpload]=\"beforeUpload\"\r\n        [nzCustomRequest]=\"customRequest\"\r\n      >\r\n        <button\r\n          nz-button\r\n          class=\"btn-upload h-100 text-white\"\r\n          [disabled]=\"uploading()\"\r\n        >\r\n          <span class=\"fs-12\">T\u1EA3i l\u00EAn</span>\r\n          <nz-icon nzType=\"upload\" nzTheme=\"outline\" />\r\n        </button>\r\n      </nz-upload>\r\n    </div>\r\n  }\r\n\r\n  @if (field().suffixes.length > 0) {\r\n    @for (suffix of field().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\r\n<ng-template #actionIcon>\r\n  @if (uploading()) {\r\n    <span\r\n      nz-icon\r\n      nzType=\"loading\"\r\n      nzTheme=\"outline\"\r\n      class=\"text-primary\"\r\n    ></span>\r\n  } @else if (allFiles().length > 0 && isAddOrEdit()) {\r\n    <span\r\n      title=\"X\u00F3a\"\r\n      class=\"mdi mdi-delete pointer text-danger\"\r\n      (click)=\"handleDelete(allFiles()[0])\"\r\n    ></span>\r\n  }\r\n</ng-template>\r\n\r\n@if (field().showAcceptedExtensionGuide && fileExtensionGuide()) {\r\n  <div class=\"file-extension-guide\">{{ fileExtensionGuide() }}</div>\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() | slice: 0 : 1; track file.objStorage?.id) {\r\n      <li class=\"upload-item\">\r\n        <span nz-icon nzType=\"paper-clip\" nzTheme=\"outline\" class=\"paper-clip-icon\"></span>\r\n\r\n        <span class=\"filename\">{{ file.objStorage.name }}</span>\r\n\r\n        @if (isAddOrEdit()) {\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)\"\r\n          ></span>\r\n        }\r\n      </li>\r\n    }\r\n  </ul>\r\n</ng-template> -->\r\n", styles: [".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 .paper-clip-icon{margin-right:.5rem}.custom-upload-list .delete-icon{color:red;cursor:pointer;margin-left:.5rem}.file-name:hover{text-decoration:underline;color:#0a4c9f;cursor:pointer}.btn-upload{background-color:#2666ab}.no-events{pointer-events:none;color:#cdbfbf}\n"] }]
         }], ctorParameters: () => [] });
 
 // Các field component đại diện cho giao diện của từng control.
 const FIELD_COMPONENTS = [
     InputTextComponent,
     InputPasswordComponent,
+    InputFormattedComponent,
     SingleSelectComponent,
     MultiSelectComponent,
     TreeSelectComponent,
@@ -4348,8 +4612,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
-const ZORRO_MODULES$1 = [NzFormModule, NzGridModule];
-const COMPONENTS$1 = [...FIELD_COMPONENTS];
+class FieldUserConfigComponent {
+    constructor() {
+        this.field = input.required();
+        this.control = input.required();
+    }
+    onToggleUserRequired(isRequired) {
+        this.field().required = isRequired;
+        const ctrl = this.control();
+        if (isRequired) {
+            ctrl.addValidators(Validators.required);
+        }
+        else {
+            ctrl.removeValidators(Validators.required);
+        }
+        // Cập nhật lại trạng thái validation ngay lập tức
+        ctrl.updateValueAndValidity();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FieldUserConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: FieldUserConfigComponent, isStandalone: true, selector: "app-field-user-config", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<!-- C\u1EA5u h\u00ECnh (Dropdown & Menu) ch\u1EC9 hi\u1EC7n khi c\u00F3 b\u1EA5t k\u1EF3 config n\u00E0o -->\r\n@if (field().userConfigs) {\r\n  <!-- Trigger N\u00FAt C\u1EA5u h\u00ECnh -->\r\n  <a\r\n    nz-dropdown\r\n    [nzDropdownMenu]=\"configMenu\"\r\n    nzTrigger=\"click\"\r\n    [nzClickHide]=\"false\"\r\n    [title]=\"'C\u1EA5u h\u00ECnh'\"\r\n    nzPlacement=\"bottomRight\"\r\n  >\r\n    <span\r\n      nz-icon\r\n      nzType=\"setting\"\r\n      nzTheme=\"outline\"\r\n      class=\"config-trigger-icon\"\r\n    ></span>\r\n  </a>\r\n\r\n  <!-- Menu C\u1EA5u h\u00ECnh -->\r\n  <nz-dropdown-menu #configMenu=\"nzDropdownMenu\">\r\n    <ul nz-menu>\r\n      @if (field().userConfigs?.allowOverrideRequired) {\r\n        <li nz-menu-item nzDisableItemHover class=\"config-menu-item\">\r\n          <div class=\"config-item-content\">\r\n            <span class=\"config-item-label\">B\u1EAFt bu\u1ED9c nh\u1EADp</span>\r\n            <nz-switch\r\n              nzSize=\"small\"\r\n              [ngModel]=\"field().required\"\r\n              [ngModelOptions]=\"{ standalone: true }\"\r\n              (ngModelChange)=\"onToggleUserRequired($event)\"\r\n            ></nz-switch>\r\n          </div>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </nz-dropdown-menu>\r\n}\r\n", styles: ["@charset \"UTF-8\";.config-trigger-icon{color:#bfbfbf;cursor:pointer;font-size:16px;transition:all .3s cubic-bezier(.645,.045,.355,1);display:inline-block}.config-trigger-icon:hover{color:#1890ff;transform:rotate(90deg) scale(1.1)}.config-menu-item{padding:8px 12px;cursor:default}.config-item-content{display:flex;justify-content:space-between;align-items:center;gap:16px;min-width:130px}.config-item-label{font-size:13px}\n"], dependencies: [{ kind: "ngmodule", type: NzDropDownModule }, { kind: "directive", type: i1$3.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i1$3.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "directive", type: i2$3.NzDropDownDirective, selector: "[nz-dropdown]", inputs: ["nzDropdownMenu", "nzTrigger", "nzMatchWidthElement", "nzBackdrop", "nzClickHide", "nzDisabled", "nzVisible", "nzOverlayClassName", "nzOverlayStyle", "nzPlacement"], outputs: ["nzVisibleChange"], exportAs: ["nzDropdown"] }, { kind: "directive", type: i2$3.NzDropDownADirective, selector: "a[nz-dropdown]" }, { kind: "component", type: i2$3.NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }, { 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: NzSwitchModule }, { kind: "component", type: i4$1.NzSwitchComponent, selector: "nz-switch", inputs: ["nzLoading", "nzDisabled", "nzControl", "nzCheckedChildren", "nzUnCheckedChildren", "nzSize", "nzId"], exportAs: ["nzSwitch"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FieldUserConfigComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-field-user-config", standalone: true, imports: [NzDropDownModule, NzIconModule, NzSwitchModule, FormsModule], template: "<!-- C\u1EA5u h\u00ECnh (Dropdown & Menu) ch\u1EC9 hi\u1EC7n khi c\u00F3 b\u1EA5t k\u1EF3 config n\u00E0o -->\r\n@if (field().userConfigs) {\r\n  <!-- Trigger N\u00FAt C\u1EA5u h\u00ECnh -->\r\n  <a\r\n    nz-dropdown\r\n    [nzDropdownMenu]=\"configMenu\"\r\n    nzTrigger=\"click\"\r\n    [nzClickHide]=\"false\"\r\n    [title]=\"'C\u1EA5u h\u00ECnh'\"\r\n    nzPlacement=\"bottomRight\"\r\n  >\r\n    <span\r\n      nz-icon\r\n      nzType=\"setting\"\r\n      nzTheme=\"outline\"\r\n      class=\"config-trigger-icon\"\r\n    ></span>\r\n  </a>\r\n\r\n  <!-- Menu C\u1EA5u h\u00ECnh -->\r\n  <nz-dropdown-menu #configMenu=\"nzDropdownMenu\">\r\n    <ul nz-menu>\r\n      @if (field().userConfigs?.allowOverrideRequired) {\r\n        <li nz-menu-item nzDisableItemHover class=\"config-menu-item\">\r\n          <div class=\"config-item-content\">\r\n            <span class=\"config-item-label\">B\u1EAFt bu\u1ED9c nh\u1EADp</span>\r\n            <nz-switch\r\n              nzSize=\"small\"\r\n              [ngModel]=\"field().required\"\r\n              [ngModelOptions]=\"{ standalone: true }\"\r\n              (ngModelChange)=\"onToggleUserRequired($event)\"\r\n            ></nz-switch>\r\n          </div>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </nz-dropdown-menu>\r\n}\r\n", styles: ["@charset \"UTF-8\";.config-trigger-icon{color:#bfbfbf;cursor:pointer;font-size:16px;transition:all .3s cubic-bezier(.645,.045,.355,1);display:inline-block}.config-trigger-icon:hover{color:#1890ff;transform:rotate(90deg) scale(1.1)}.config-menu-item{padding:8px 12px;cursor:default}.config-item-content{display:flex;justify-content:space-between;align-items:center;gap:16px;min-width:130px}.config-item-label{font-size:13px}\n"] }]
+        }] });
+
+const modules = [CommonModule, FormsModule, ReactiveFormsModule];
+const zorroModules = [
+    NzFormModule,
+    NzGridModule,
+    NzDropDownModule,
+    NzIconModule,
+    NzSwitchModule,
+    NzFlexModule,
+];
+const components = [...FIELD_COMPONENTS, FieldUserConfigComponent];
 class DynamicFieldComponent {
     constructor() {
         this.field = input.required();
@@ -4369,11 +4666,11 @@ class DynamicFieldComponent {
         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        <!-- 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"] }] }); }
+    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      <div nz-flex [nzAlign]=\"'flex-start'\" [nzGap]=\"8\" class=\"w-100\">\r\n        <div class=\"flex-1 min-w-0\">\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            <!-- Input formatted -->\r\n            @case (fieldTypeEnum.InputFormatted) {\r\n              <app-input-formatted\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-formatted>\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        </div>\r\n\r\n        <!-- T\u00E1ch ph\u1EA7n c\u1EA5u h\u00ECnh ra Component ri\u00EAng -->\r\n        @if (mode() !== formModeEnum.View) {\r\n          <div class=\"field-user-config-ctn\">\r\n            <app-field-user-config\r\n              [field]=\"field()\"\r\n              [control]=\"control()\"\r\n            ></app-field-user-config>\r\n          </div>\r\n        }\r\n      </div>\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: CommonModule }, { kind: "ngmodule", type: 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: 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$4.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$4.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: "ngmodule", type: NzDropDownModule }, { kind: "ngmodule", type: NzIconModule }, { kind: "ngmodule", type: NzSwitchModule }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i4$2.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "component", type: InputTextComponent, selector: "app-input-text" }, { kind: "component", type: InputPasswordComponent, selector: "app-input-password" }, { kind: "component", type: InputFormattedComponent, selector: "app-input-formatted" }, { 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: FieldUserConfigComponent, selector: "app-field-user-config", inputs: ["field", "control"] }] }); }
 }
 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        <!-- 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: [...modules, ...zorroModules, ...components], 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      <div nz-flex [nzAlign]=\"'flex-start'\" [nzGap]=\"8\" class=\"w-100\">\r\n        <div class=\"flex-1 min-w-0\">\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            <!-- Input formatted -->\r\n            @case (fieldTypeEnum.InputFormatted) {\r\n              <app-input-formatted\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-formatted>\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        </div>\r\n\r\n        <!-- T\u00E1ch ph\u1EA7n c\u1EA5u h\u00ECnh ra Component ri\u00EAng -->\r\n        @if (mode() !== formModeEnum.View) {\r\n          <div class=\"field-user-config-ctn\">\r\n            <app-field-user-config\r\n              [field]=\"field()\"\r\n              [control]=\"control()\"\r\n            ></app-field-user-config>\r\n          </div>\r\n        }\r\n      </div>\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];
@@ -4559,11 +4856,11 @@ 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$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"] }] }); }
+    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 (\r\n              groupField of groupedFields().grouped;\r\n              track groupField.group.code\r\n            ) {\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$4.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$4.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$3.NzCollapsePanelComponent, selector: "nz-collapse-panel", inputs: ["nzActive", "nzDisabled", "nzShowArrow", "nzExtra", "nzHeader", "nzExpandedIcon"], outputs: ["nzActiveChange"], exportAs: ["nzCollapsePanel"] }, { kind: "component", type: i4$3.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,
-            args: [{ selector: 'app-dynamic-forms', standalone: true, imports: [...FORM_MODULES, ...ZORRO_MODULES, ...COMPONENTS], 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"] }]
+            args: [{ selector: 'app-dynamic-forms', standalone: true, imports: [...FORM_MODULES, ...ZORRO_MODULES, ...COMPONENTS], 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 (\r\n              groupField of groupedFields().grouped;\r\n              track groupField.group.code\r\n            ) {\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"] }]
         }], ctorParameters: () => [{ type: DynamicFormService }], propDecorators: { formId: [{
                 type: Input
             }], valueChangesDebounceTime: [{
@@ -4637,5 +4934,5 @@ class RadioBaseField extends BaseField {
  * Generated bundle index. Do not edit.
  */
 
-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 };
+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, InputFormattedField, InputPasswordField, InputTextField, MIME_TYPES_TO_EXTENSION, MultiFileUploadField, MultiImageUploadField, MultiSelectField, NumericPreset, RadioBaseField, RegexTypeEnum, SelectBaseField, SelectFieldTypeEnum, SelectOutputValueTypeEnum, SingleFileUploadField, SingleSelectField, SuffixService, TEXT_TYPES, TableCellTypeEnum, TextareaField, UploadFieldTypeEnum, UploadOutputValueTypeEnum, VIDEO_TYPES, ViewModeEnum, videoTypesPath };
 //# sourceMappingURL=ldquocc-dynamic-form.mjs.map