@webilix/ngx-form-m3 0.0.31 → 0.0.38

package/fesm2022/webilix-ngx-form-m3.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { HostBinding, Directive, Input, HostListener, Optional, Pipe, InjectionToken, inject, Component, Injector, makeEnvironmentProviders, EventEmitter, Output, ViewChild, Inject } from '@angular/core';
+import { HostBinding, Directive, Input, HostListener, Optional, Pipe, InjectionToken, inject, Component, Injector, EventEmitter, Output, makeEnvironmentProviders, ViewChild, Inject } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { ReactiveFormsModule, FormControl, Validators, FormsModule, FormGroup } from '@angular/forms';
 import { MatIconButton, MatButton } from '@angular/material/button';
@@ -8,21 +8,23 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatFormField } from '@angular/material/form-field';
 import { MatIcon } from '@angular/material/icon';
 import * as i2$1 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
+import { MatInputModule, MatInput } from '@angular/material/input';
 import { Helper } from '@webilix/helper-library';
 import * as i1$1 from '@angular/platform-browser';
 import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
 import { JalaliDateTime } from '@webilix/jalali-date-time';
 import { NgComponentOutlet, NgClass, DecimalPipe } from '@angular/common';
 import * as i1$2 from '@webilix/ngx-helper-m3';
-import { NgxHelperDatePipe, NgxHelperFileSizePipe } from '@webilix/ngx-helper-m3';
+import { NgxHelperDatePipe, NgxHelperFileSizePipe, NgxHelperNumberPipe } from '@webilix/ngx-helper-m3';
 import * as i1$3 from '@webilix/ngx-calendar-m3';
 import * as i3 from '@angular/cdk/bidi';
+import * as i1$4 from '@angular/cdk/drag-drop';
+import { CdkDragHandle, moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i3$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i4 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i1$4 from '@angular/router';
+import * as i1$5 from '@angular/router';
 
 class AutoCompleteDirective {
     autocomplete = 'one-time-code';
@@ -196,6 +198,8 @@ class InputErrorPipe {
                 return `انتخاب حداقل ${Helper.NUMBER.format(value)} گزینه الزامی است.`;
             case 'maxcount':
                 return `امکان انتخاب بیشتر از ${Helper.NUMBER.format(value)} گزینه وجود ندارد.`;
+            case 'duplicate':
+                return 'امکان انتخاب مقادیر تکراری وجود ندارد.';
             case 'bank-card':
                 return `شماره کارت بانکی صحیح مشخص نشده است.`;
             case 'bank-sheba':
@@ -468,6 +472,15 @@ const MultiplyOfNumberValidator = (multiplyOf) => {
     };
 };
 
+const DuplicateValidator = (callback) => {
+    return (formControl) => {
+        const values = Array.isArray(formControl.value) ? formControl.value : [];
+        const check = values.map((value) => callback(value));
+        const unique = check.filter((v, i, a) => a.indexOf(v) === i);
+        return check.length !== unique.length ? { duplicate: true } : null;
+    };
+};
+
 const LengthValidator = (length) => {
     return (formControl) => {
         const value = formControl.value;
@@ -681,11 +694,11 @@ class InputCoordinatesComponent {
         this.formControl.markAsTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: InputCoordinatesComponent, deps: [{ token: i1$2.NgxHelperCoordinatesService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: InputCoordinatesComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-coordinates" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u0645\u0648\u0642\u0639\u06CC\u062A \u062C\u063A\u0631\u0627\u0641\u06CC\u0627\u06CC\u06CC' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"formControl.value ? resetCoordinates() : setCoordinates(); formControl.markAsTouched()\">\n            {{ formControl.value ? 'close' : 'calendar_month' }}\n        </mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <input\n        type=\"text\"\n        matInput\n        [readonly]=\"true\"\n        class=\"ngx-helper-form-m3-coordinates-input ngx-form-m3-en\"\n        [disabled]=\"formControl.disabled\"\n        (click)=\"setCoordinates()\"\n        [value]=\"formControl.value ? coordinates?.latitude + ', ' + coordinates?.longitude : ''\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: InputCoordinatesComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-coordinates" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u0645\u0648\u0642\u0639\u06CC\u062A \u062C\u063A\u0631\u0627\u0641\u06CC\u0627\u06CC\u06CC' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"formControl.value ? resetCoordinates() : setCoordinates(); formControl.markAsTouched()\">\n            {{ formControl.value ? 'close' : 'location_on' }}\n        </mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <input\n        type=\"text\"\n        matInput\n        [readonly]=\"true\"\n        class=\"ngx-helper-form-m3-coordinates-input ngx-form-m3-en\"\n        [disabled]=\"formControl.disabled\"\n        (click)=\"setCoordinates()\"\n        [value]=\"formControl.value ? coordinates?.latitude + ', ' + coordinates?.longitude : ''\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: InputCoordinatesComponent, decorators: [{
             type: Component,
-            args: [{ host: { selector: 'input-coordinates' }, imports: [ReactiveFormsModule, MatFormField, MatIcon, MatIconButton, MatInputModule, InputErrorPipe, MultiLinePipe], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u0645\u0648\u0642\u0639\u06CC\u062A \u062C\u063A\u0631\u0627\u0641\u06CC\u0627\u06CC\u06CC' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"formControl.value ? resetCoordinates() : setCoordinates(); formControl.markAsTouched()\">\n            {{ formControl.value ? 'close' : 'calendar_month' }}\n        </mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <input\n        type=\"text\"\n        matInput\n        [readonly]=\"true\"\n        class=\"ngx-helper-form-m3-coordinates-input ngx-form-m3-en\"\n        [disabled]=\"formControl.disabled\"\n        (click)=\"setCoordinates()\"\n        [value]=\"formControl.value ? coordinates?.latitude + ', ' + coordinates?.longitude : ''\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
+            args: [{ host: { selector: 'input-coordinates' }, imports: [ReactiveFormsModule, MatFormField, MatIcon, MatIconButton, MatInputModule, InputErrorPipe, MultiLinePipe], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u0645\u0648\u0642\u0639\u06CC\u062A \u062C\u063A\u0631\u0627\u0641\u06CC\u0627\u06CC\u06CC' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"formControl.value ? resetCoordinates() : setCoordinates(); formControl.markAsTouched()\">\n            {{ formControl.value ? 'close' : 'location_on' }}\n        </mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <input\n        type=\"text\"\n        matInput\n        [readonly]=\"true\"\n        class=\"ngx-helper-form-m3-coordinates-input ngx-form-m3-en\"\n        [disabled]=\"formControl.disabled\"\n        (click)=\"setCoordinates()\"\n        [value]=\"formControl.value ? coordinates?.latitude + ', ' + coordinates?.longitude : ''\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
         }], ctorParameters: () => [{ type: i1$2.NgxHelperCoordinatesService }], propDecorators: { values: [{
                 type: Input,
                 args: [{ required: true }]
@@ -938,6 +951,158 @@ class InputIpMethods extends InputMethods {
     }
 }
 
+class ListInputComponent {
+    english;
+    disabled;
+    autoFocus;
+    onFocus = new EventEmitter();
+    onInput = new EventEmitter();
+    checkValue(input) {
+        const value = input.value.trim();
+        if (this.disabled || value === '')
+            return;
+        this.onInput.next(value);
+        input.value = '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ListInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: ListInputComponent, isStandalone: true, selector: "list-input", inputs: { english: "english", disabled: "disabled", autoFocus: "autoFocus" }, outputs: { onFocus: "onFocus", onInput: "onInput" }, ngImport: i0, template: "<input\n    matInput\n    type=\"text\"\n    [placeholder]=\"english ? 'New Item' : '\u06AF\u0632\u06CC\u0646\u0647 \u062C\u062F\u06CC\u062F'\"\n    [class.ngx-form-m3-en]=\"english\"\n    [AutoFocusDirective]=\"autoFocus\"\n    [disabled]=\"disabled\"\n    (blur)=\"checkValue(input); onFocus.next(false)\"\n    (focus)=\"onFocus.next(true)\"\n    (keydown.enter)=\"$event.preventDefault(); checkValue(input)\"\n    #input\n/>\n", styles: [":host{display:flex;align-items:center}input::placeholder{font-size:85%}\n"], dependencies: [{ kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ListInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'list-input', imports: [MatInput, AutoFocusDirective], template: "<input\n    matInput\n    type=\"text\"\n    [placeholder]=\"english ? 'New Item' : '\u06AF\u0632\u06CC\u0646\u0647 \u062C\u062F\u06CC\u062F'\"\n    [class.ngx-form-m3-en]=\"english\"\n    [AutoFocusDirective]=\"autoFocus\"\n    [disabled]=\"disabled\"\n    (blur)=\"checkValue(input); onFocus.next(false)\"\n    (focus)=\"onFocus.next(true)\"\n    (keydown.enter)=\"$event.preventDefault(); checkValue(input)\"\n    #input\n/>\n", styles: [":host{display:flex;align-items:center}input::placeholder{font-size:85%}\n"] }]
+        }], propDecorators: { english: [{
+                type: Input,
+                args: [{ required: true }]
+            }], disabled: [{
+                type: Input,
+                args: [{ required: true }]
+            }], autoFocus: [{
+                type: Input,
+                args: [{ required: true }]
+            }], onFocus: [{
+                type: Output
+            }], onInput: [{
+                type: Output
+            }] } });
+
+class ListItemComponent {
+    value;
+    english;
+    disabled;
+    disableSort;
+    onUpdate = new EventEmitter();
+    onDelete = new EventEmitter();
+    view = 'VALUE';
+    checkValue(input) {
+        if (this.disabled)
+            return;
+        const value = input.value.trim();
+        if (value !== '' && value !== this.value)
+            this.onUpdate.next(value);
+        this.view = 'VALUE';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: ListItemComponent, isStandalone: true, selector: "list-item", inputs: { value: "value", english: "english", disabled: "disabled", disableSort: "disableSort" }, outputs: { onUpdate: "onUpdate", onDelete: "onDelete" }, ngImport: i0, template: "<!--  SORT -->\n@if (view === 'VALUE' && !disableSort) {\n<mat-icon class=\"drag\" [class.ngx-form-m3-disabled-input]=\"disabled\" cdkDragHandle>drag_indicator</mat-icon>\n}\n\n<!-- VALUE -->\n@if (view === 'VALUE') {\n<div [class.ngx-form-m3-en]=\"english\" [class.ngx-form-m3-disabled-input]=\"disabled\">\n    {{ value }}\n</div>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'UPDATE'\" [tabIndex]=\"-1\">\n    <mat-icon>edit</mat-icon>\n</button>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'DELETE'\" [tabIndex]=\"-1\">\n    <mat-icon [style.color]=\"'var(--error)'\" [class.ngx-form-m3-disabled-input]=\"disabled\">delete</mat-icon>\n</button>\n}\n\n<!-- UPDATE -->\n@if (view === 'UPDATE') {\n<input\n    matInput\n    type=\"text\"\n    [ngModel]=\"value\"\n    [class.ngx-form-m3-en]=\"english\"\n    [AutoFocusDirective]=\"true\"\n    [disabled]=\"disabled\"\n    (blur)=\"checkValue(input)\"\n    (keydown.enter)=\"$event.preventDefault(); checkValue(input)\"\n    #input\n/>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"checkValue(input)\" [tabIndex]=\"-1\">\n    <mat-icon>done_all</mat-icon>\n</button>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'VALUE'\" [tabIndex]=\"-1\">\n    <mat-icon>close</mat-icon>\n</button>\n}\n\n<!-- DELETE -->\n@if (view === 'DELETE') {\n<div [class.ngx-form-m3-disabled-input]=\"disabled\">\u0645\u06CC\u200C\u062E\u0648\u0627\u0647\u06CC\u062F \u0627\u06CC\u0646 \u06AF\u0632\u06CC\u0646\u0647 \u0631\u0627 \u062D\u0630\u0641 \u06A9\u0646\u06CC\u062F\u061F</div>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"onDelete.next(); view = 'VALUE'\" [tabIndex]=\"-1\">\n    <mat-icon [style.color]=\"'var(--error)'\" [class.ngx-form-m3-disabled-input]=\"disabled\">done_all</mat-icon>\n</button>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'VALUE'\" [tabIndex]=\"-1\">\n    <mat-icon>close</mat-icon>\n</button>\n}\n", styles: [":host{display:flex;align-items:center;direction:rtl;overflow:hidden}:host .drag{cursor:pointer;padding-left:.25rem}:host div{flex:1;width:0;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host button{display:flex;align-items:center;justify-content:center}:host button mat-icon{font-size:70%}\n"], dependencies: [{ kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { 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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ListItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'list-item', imports: [CdkDragHandle, FormsModule, MatIcon, MatIconButton, MatInput, AutoFocusDirective], template: "<!--  SORT -->\n@if (view === 'VALUE' && !disableSort) {\n<mat-icon class=\"drag\" [class.ngx-form-m3-disabled-input]=\"disabled\" cdkDragHandle>drag_indicator</mat-icon>\n}\n\n<!-- VALUE -->\n@if (view === 'VALUE') {\n<div [class.ngx-form-m3-en]=\"english\" [class.ngx-form-m3-disabled-input]=\"disabled\">\n    {{ value }}\n</div>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'UPDATE'\" [tabIndex]=\"-1\">\n    <mat-icon>edit</mat-icon>\n</button>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'DELETE'\" [tabIndex]=\"-1\">\n    <mat-icon [style.color]=\"'var(--error)'\" [class.ngx-form-m3-disabled-input]=\"disabled\">delete</mat-icon>\n</button>\n}\n\n<!-- UPDATE -->\n@if (view === 'UPDATE') {\n<input\n    matInput\n    type=\"text\"\n    [ngModel]=\"value\"\n    [class.ngx-form-m3-en]=\"english\"\n    [AutoFocusDirective]=\"true\"\n    [disabled]=\"disabled\"\n    (blur)=\"checkValue(input)\"\n    (keydown.enter)=\"$event.preventDefault(); checkValue(input)\"\n    #input\n/>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"checkValue(input)\" [tabIndex]=\"-1\">\n    <mat-icon>done_all</mat-icon>\n</button>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'VALUE'\" [tabIndex]=\"-1\">\n    <mat-icon>close</mat-icon>\n</button>\n}\n\n<!-- DELETE -->\n@if (view === 'DELETE') {\n<div [class.ngx-form-m3-disabled-input]=\"disabled\">\u0645\u06CC\u200C\u062E\u0648\u0627\u0647\u06CC\u062F \u0627\u06CC\u0646 \u06AF\u0632\u06CC\u0646\u0647 \u0631\u0627 \u062D\u0630\u0641 \u06A9\u0646\u06CC\u062F\u061F</div>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"onDelete.next(); view = 'VALUE'\" [tabIndex]=\"-1\">\n    <mat-icon [style.color]=\"'var(--error)'\" [class.ngx-form-m3-disabled-input]=\"disabled\">done_all</mat-icon>\n</button>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'VALUE'\" [tabIndex]=\"-1\">\n    <mat-icon>close</mat-icon>\n</button>\n}\n", styles: [":host{display:flex;align-items:center;direction:rtl;overflow:hidden}:host .drag{cursor:pointer;padding-left:.25rem}:host div{flex:1;width:0;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host button{display:flex;align-items:center;justify-content:center}:host button mat-icon{font-size:70%}\n"] }]
+        }], propDecorators: { value: [{
+                type: Input,
+                args: [{ required: true }]
+            }], english: [{
+                type: Input,
+                args: [{ required: true }]
+            }], disabled: [{
+                type: Input,
+                args: [{ required: true }]
+            }], disableSort: [{
+                type: Input,
+                args: [{ required: true }]
+            }], onUpdate: [{
+                type: Output
+            }], onDelete: [{
+                type: Output
+            }] } });
+
+class InputItemListComponent {
+    formControl = inject(INPUT_CONTROL);
+    input = inject(INPUT_TYPE);
+    config = inject(INPUT_CONFIG);
+    values;
+    isButtonDisabled;
+    focused = false;
+    options = [];
+    ngOnInit() {
+        this.options = Array.isArray(this.formControl.value) ? this.formControl.value : [];
+    }
+    setValue() {
+        this.formControl.setValue([...this.options]);
+        this.formControl.markAsTouched();
+    }
+    dropOption(event) {
+        if (event.previousIndex === event.currentIndex)
+            return;
+        moveItemInArray(this.options, event.previousIndex, event.currentIndex);
+        this.setValue();
+    }
+    addOption(option) {
+        this.options.push(option);
+        this.setValue();
+    }
+    updateOption(index, option) {
+        if (!this.options[index])
+            return;
+        this.options.splice(index, 1, option);
+        this.setValue();
+    }
+    deleteOption(index) {
+        if (!this.options[index])
+            return;
+        this.options.splice(index, 1);
+        this.setValue();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: InputItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: InputItemListComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-item-list" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"focused ? 'always' : 'auto'\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <!-- OPTIONS -->\n    @if (options.length > 0) {\n    <div\n        class=\"options\"\n        cdkDropList\n        (cdkDropListDropped)=\"dropOption($event)\"\n        [style.border-color]=\"formControl.disabled ? 'var(--outline-variant)' : 'var(--outline)'\"\n    >\n        @for (item of options; track $index) {\n        <list-item\n            cdkDrag\n            cdkDragLockAxis=\"y\"\n            cdkDragBoundary=\".options\"\n            [cdkDragDisabled]=\"input.disableSort\"\n            class=\"option\"\n            [value]=\"item\"\n            [english]=\"!!input.english\"\n            [disabled]=\"!!formControl.disabled\"\n            [disableSort]=\"!!input.disableSort\"\n            (onUpdate)=\"updateOption($index, $event)\"\n            (onDelete)=\"deleteOption($index)\"\n        ></list-item>\n        }\n    </div>\n    }\n    <!-- INPUT -->\n    <list-input\n        [english]=\"!!input.english\"\n        [disabled]=\"!!formControl.disabled\"\n        [autoFocus]=\"config.autoFocus === input.name\"\n        (onFocus)=\"focused = $event\"\n        (onInput)=\"addOption($event)\"\n    ></list-input>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [".options{margin-bottom:5px;border-bottom:1px solid var(--outline)}.options.cdk-drop-list-dragging .option:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;background-color:var(--surface-container);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }, { kind: "component", type: ListInputComponent, selector: "list-input", inputs: ["english", "disabled", "autoFocus"], outputs: ["onFocus", "onInput"] }, { kind: "component", type: ListItemComponent, selector: "list-item", inputs: ["value", "english", "disabled", "disableSort"], outputs: ["onUpdate", "onDelete"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: InputItemListComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'input-item-list' }, imports: [
+                        DragDropModule,
+                        ReactiveFormsModule,
+                        MatFormField,
+                        MatIcon,
+                        MatIconButton,
+                        MatInputModule,
+                        InputErrorPipe,
+                        MultiLinePipe,
+                        ListInputComponent,
+                        ListItemComponent,
+                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"focused ? 'always' : 'auto'\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <!-- OPTIONS -->\n    @if (options.length > 0) {\n    <div\n        class=\"options\"\n        cdkDropList\n        (cdkDropListDropped)=\"dropOption($event)\"\n        [style.border-color]=\"formControl.disabled ? 'var(--outline-variant)' : 'var(--outline)'\"\n    >\n        @for (item of options; track $index) {\n        <list-item\n            cdkDrag\n            cdkDragLockAxis=\"y\"\n            cdkDragBoundary=\".options\"\n            [cdkDragDisabled]=\"input.disableSort\"\n            class=\"option\"\n            [value]=\"item\"\n            [english]=\"!!input.english\"\n            [disabled]=\"!!formControl.disabled\"\n            [disableSort]=\"!!input.disableSort\"\n            (onUpdate)=\"updateOption($index, $event)\"\n            (onDelete)=\"deleteOption($index)\"\n        ></list-item>\n        }\n    </div>\n    }\n    <!-- INPUT -->\n    <list-input\n        [english]=\"!!input.english\"\n        [disabled]=\"!!formControl.disabled\"\n        [autoFocus]=\"config.autoFocus === input.name\"\n        (onFocus)=\"focused = $event\"\n        (onInput)=\"addOption($event)\"\n    ></list-input>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [".options{margin-bottom:5px;border-bottom:1px solid var(--outline)}.options.cdk-drop-list-dragging .option:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;background-color:var(--surface-container);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+        }], propDecorators: { values: [{
+                type: Input,
+                args: [{ required: true }]
+            }], isButtonDisabled: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class InputItemListMethods extends InputMethods {
+    control(input, validators) {
+        if (!input.allowDuplicates)
+            validators.push(DuplicateValidator((value) => value));
+        if (input.minCount)
+            validators.push(MinCountValidator(input.minCount));
+        if (input.maxCount)
+            validators.push(MaxCountValidator(input.maxCount));
+        const value = (Array.isArray(input.value) ? input.value : []).filter((value) => Helper.IS.string(value) && value !== '');
+        return new FormControl(value, validators);
+    }
+    value(value, input) {
+        return Array.isArray(value) && value.length > 0 ? value : null;
+    }
+}
+
 class InputMobileComponent {
     formControl = inject(INPUT_CONTROL);
     input = inject(INPUT_TYPE);
@@ -1262,6 +1427,93 @@ class InputNumberMethods extends InputMethods {
     }
 }
 
+class InputOptionListComponent {
+    formControl = inject(INPUT_CONTROL);
+    input = inject(INPUT_TYPE);
+    config = inject(INPUT_CONFIG);
+    values;
+    isButtonDisabled;
+    focused = false;
+    options = [];
+    ngOnInit() {
+        this.options = Array.isArray(this.formControl.value) ? this.formControl.value : [];
+    }
+    setValue() {
+        this.formControl.setValue([...this.options]);
+        this.formControl.markAsTouched();
+    }
+    dropOption(event) {
+        if (event.previousIndex === event.currentIndex)
+            return;
+        moveItemInArray(this.options, event.previousIndex, event.currentIndex);
+        this.setValue();
+    }
+    addOption(title) {
+        this.options.push({ id: null, title });
+        this.setValue();
+    }
+    updateOption(index, title) {
+        if (!this.options[index])
+            return;
+        const option = { id: this.options[index].id, title };
+        this.options.splice(index, 1, option);
+        this.setValue();
+    }
+    deleteOption(index) {
+        if (!this.options[index])
+            return;
+        this.options.splice(index, 1);
+        this.setValue();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: InputOptionListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: InputOptionListComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-option-list" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"focused ? 'always' : 'auto'\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <!-- OPTIONS -->\n    @if (options.length > 0) {\n    <div\n        class=\"options\"\n        cdkDropList\n        (cdkDropListDropped)=\"dropOption($event)\"\n        [style.border-color]=\"formControl.disabled ? 'var(--outline-variant)' : 'var(--outline)'\"\n    >\n        @for (item of options; track $index) {\n        <list-item\n            cdkDrag\n            cdkDragLockAxis=\"y\"\n            cdkDragBoundary=\".options\"\n            [cdkDragDisabled]=\"input.disableSort\"\n            class=\"option\"\n            [value]=\"item.title\"\n            [english]=\"!!input.english\"\n            [disabled]=\"!!formControl.disabled\"\n            [disableSort]=\"!!input.disableSort\"\n            (onUpdate)=\"updateOption($index, $event)\"\n            (onDelete)=\"deleteOption($index)\"\n        ></list-item>\n        }\n    </div>\n    }\n    <!-- INPUT -->\n    <list-input\n        [english]=\"!!input.english\"\n        [disabled]=\"!!formControl.disabled\"\n        [autoFocus]=\"config.autoFocus === input.name\"\n        (onFocus)=\"focused = $event\"\n        (onInput)=\"addOption($event)\"\n    ></list-input>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [".options{margin-bottom:5px;border-bottom:1px solid var(--outline)}.options.cdk-drop-list-dragging .option:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;background-color:var(--surface-container);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }, { kind: "component", type: ListInputComponent, selector: "list-input", inputs: ["english", "disabled", "autoFocus"], outputs: ["onFocus", "onInput"] }, { kind: "component", type: ListItemComponent, selector: "list-item", inputs: ["value", "english", "disabled", "disableSort"], outputs: ["onUpdate", "onDelete"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: InputOptionListComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'input-option-list' }, imports: [
+                        DragDropModule,
+                        ReactiveFormsModule,
+                        MatFormField,
+                        MatIcon,
+                        MatIconButton,
+                        MatInputModule,
+                        InputErrorPipe,
+                        MultiLinePipe,
+                        ListInputComponent,
+                        ListItemComponent,
+                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"focused ? 'always' : 'auto'\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <!-- OPTIONS -->\n    @if (options.length > 0) {\n    <div\n        class=\"options\"\n        cdkDropList\n        (cdkDropListDropped)=\"dropOption($event)\"\n        [style.border-color]=\"formControl.disabled ? 'var(--outline-variant)' : 'var(--outline)'\"\n    >\n        @for (item of options; track $index) {\n        <list-item\n            cdkDrag\n            cdkDragLockAxis=\"y\"\n            cdkDragBoundary=\".options\"\n            [cdkDragDisabled]=\"input.disableSort\"\n            class=\"option\"\n            [value]=\"item.title\"\n            [english]=\"!!input.english\"\n            [disabled]=\"!!formControl.disabled\"\n            [disableSort]=\"!!input.disableSort\"\n            (onUpdate)=\"updateOption($index, $event)\"\n            (onDelete)=\"deleteOption($index)\"\n        ></list-item>\n        }\n    </div>\n    }\n    <!-- INPUT -->\n    <list-input\n        [english]=\"!!input.english\"\n        [disabled]=\"!!formControl.disabled\"\n        [autoFocus]=\"config.autoFocus === input.name\"\n        (onFocus)=\"focused = $event\"\n        (onInput)=\"addOption($event)\"\n    ></list-input>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [".options{margin-bottom:5px;border-bottom:1px solid var(--outline)}.options.cdk-drop-list-dragging .option:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;background-color:var(--surface-container);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+        }], propDecorators: { values: [{
+                type: Input,
+                args: [{ required: true }]
+            }], isButtonDisabled: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class InputOptionListMethods extends InputMethods {
+    control(input, validators) {
+        if (!input.allowDuplicates)
+            validators.push(DuplicateValidator((value) => value.title));
+        if (input.minCount)
+            validators.push(MinCountValidator(input.minCount));
+        if (input.maxCount)
+            validators.push(MaxCountValidator(input.maxCount));
+        const value = (Array.isArray(input.value) ? input.value : []).filter((value) => {
+            if (!Helper.IS.object(value))
+                return false;
+            if (value.id !== null && (!Helper.IS.string(value.id) || value.id.length === 0))
+                return false;
+            if (!Helper.IS.string(value.title) || value.title.length === 0)
+                return false;
+            return true;
+        });
+        return new FormControl(value, validators);
+    }
+    value(value, input) {
+        return Array.isArray(value) && value.length > 0 ? value : null;
+    }
+}
+
 class InputPasswordComponent {
     formControl = inject(INPUT_CONTROL);
     input = inject(INPUT_TYPE);
@@ -1379,6 +1631,75 @@ class InputPriceMethods extends InputMethods {
     }
 }
 
+class InputRouteComponent {
+    ngxHelperRouteService;
+    formControl = inject(INPUT_CONTROL);
+    input = inject(INPUT_TYPE);
+    config = inject(INPUT_CONFIG);
+    values;
+    isButtonDisabled;
+    route = this.formControl.value || [];
+    distance = Helper.GEO.routeLength(this.route);
+    constructor(ngxHelperRouteService) {
+        this.ngxHelperRouteService = ngxHelperRouteService;
+    }
+    setRoute() {
+        if (this.formControl.disabled)
+            return;
+        const get = this.route.length > 0
+            ? this.ngxHelperRouteService.get(this.route, { view: this.input.center, zoom: this.input.zoom })
+            : this.ngxHelperRouteService.get({ view: this.input.center, zoom: this.input.zoom });
+        get.then((route) => {
+            this.route = route;
+            this.formControl.setValue(route);
+            this.formControl.markAsTouched();
+            this.distance = Helper.GEO.routeLength(this.route);
+        }, () => this.formControl.markAsTouched());
+    }
+    resetRoute() {
+        if (this.formControl.disabled)
+            return;
+        this.route = [];
+        this.formControl.setValue(null);
+        this.formControl.markAsTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: InputRouteComponent, deps: [{ token: i1$2.NgxHelperRouteService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: InputRouteComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-route" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"route.length > 0 ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u0645\u0633\u06CC\u0631' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"route.length > 0 ? resetRoute() : setRoute(); formControl.markAsTouched()\">\n            {{ route.length > 0 ? 'close' : 'call_split' }}\n        </mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <div\n        class=\"ngx-helper-form-m3-route-input\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        (click)=\"setRoute()\"\n    >\n        <div class=\"distance\">{{ route.length > 0 ? (distance.length | ngxHelperNumber) + ' \u0645\u062A\u0631' : '&nbsp;' }}</div>\n        <div class=\"point\">{{ route.length > 0 ? (route.length | ngxHelperNumber) + ' \u0646\u0642\u0637\u0647' : '&nbsp;' }}</div>\n    </div>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: NgxHelperNumberPipe, name: "ngxHelperNumber" }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: InputRouteComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'input-route' }, imports: [
+                        ReactiveFormsModule,
+                        MatFormField,
+                        MatIcon,
+                        MatIconButton,
+                        MatInputModule,
+                        NgxHelperNumberPipe,
+                        InputErrorPipe,
+                        MultiLinePipe,
+                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"route.length > 0 ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u0645\u0633\u06CC\u0631' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"route.length > 0 ? resetRoute() : setRoute(); formControl.markAsTouched()\">\n            {{ route.length > 0 ? 'close' : 'call_split' }}\n        </mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <div\n        class=\"ngx-helper-form-m3-route-input\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        (click)=\"setRoute()\"\n    >\n        <div class=\"distance\">{{ route.length > 0 ? (distance.length | ngxHelperNumber) + ' \u0645\u062A\u0631' : '&nbsp;' }}</div>\n        <div class=\"point\">{{ route.length > 0 ? (route.length | ngxHelperNumber) + ' \u0646\u0642\u0637\u0647' : '&nbsp;' }}</div>\n    </div>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
+        }], ctorParameters: () => [{ type: i1$2.NgxHelperRouteService }], propDecorators: { values: [{
+                type: Input,
+                args: [{ required: true }]
+            }], isButtonDisabled: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class InputRouteMethods extends InputMethods {
+    control(input, validators) {
+        const value = input.value && Helper.IS.array(input.value)
+            ? input.value.filter((coordinates) => Helper.IS.object(coordinates) &&
+                Helper.IS.number(coordinates.latitude) &&
+                Helper.IS.number(coordinates.longitude))
+            : [];
+        return new FormControl(value.length > 1 ? value : [], validators);
+    }
+    value(value, input) {
+        return Helper.IS.array(value) && value.length > 0 ? value : null;
+    }
+}
+
 class InputSelectComponent {
     formControl = inject(INPUT_CONTROL);
     input = inject(INPUT_TYPE);
@@ -1625,13 +1946,16 @@ const InputInfo = {
     FILE: { title: 'فایل', methods: new InputFileMethods(), component: InputFileComponent },
     ICON: { title: 'آیکون', methods: new InputIconMethods(), component: InputIconComponent },
     IP: { title: 'آدرس آی‌پی', methods: new InputIpMethods(), component: InputIpComponent },
+    'ITEM-LIST': { title: 'لیست مقادیر', methods: new InputItemListMethods(), component: InputItemListComponent },
     MOBILE: { title: 'موبایل', methods: new InputMobileMethods(), component: InputMobileComponent },
     MOMENT: { title: 'زمان', methods: new InputMomentMethods(), component: InputMomentComponent },
     'MULTI-SELECT': { title: 'چند انتخابی', methods: new InputMultiSelectMethods(), component: InputMultiSelectComponent },
     NAME: { title: 'نام و نام خانوادگی', methods: new InputNameMethods(), component: InputNameComponent },
     NUMBER: { title: 'مقدار عددی', methods: new InputNumberMethods(), component: InputNumberComponent },
+    'OPTION-LIST': { title: 'لیست گزینه‌ها', methods: new InputOptionListMethods(), component: InputOptionListComponent },
     PASSWORD: { title: 'کلمه عبور', methods: new InputPasswordMethods(), component: InputPasswordComponent },
     PRICE: { title: 'قیمت', methods: new InputPriceMethods(), component: InputPriceComponent },
+    ROUTE: { title: 'مسیر', methods: new InputRouteMethods(), component: InputRouteComponent },
     SELECT: { title: 'لیست کشویی', methods: new InputSelectMethods(), component: InputSelectComponent },
     TEXT: { title: 'متن یک خطی', methods: new InputTextMethods(), component: InputTextComponent },
     TEXTAREA: { title: 'متن چند خطی', methods: new InputTextareaMethods(), component: InputTextareaComponent },
@@ -1683,6 +2007,9 @@ class NgxFormComponent {
             appearance: this.ngxForm.appearance || this.config?.appearance || 'fill',
             autoFocus,
         };
+        // UPDATE VALUES
+        if (this.ngxForm.updateValues)
+            this.updateValues([]);
         // REGISTER VALUE CHANGE
         this.formGroup.valueChanges.subscribe({
             next: () => {
@@ -1698,20 +2025,7 @@ class NgxFormComponent {
                 this.lastValues = { ...this.formGroup.value };
                 this.checkInputs();
                 if (this.ngxForm.updateValues) {
-                    const values = this.getValues();
-                    const changes = this.ngxForm.updateValues(values);
-                    Object.keys(changes)
-                        .filter((key) => !changedInputs.includes(key))
-                        .forEach((key) => {
-                        const input = this.getInputs().find((i) => i.name === key);
-                        if (!input)
-                            return;
-                        const formInput = this.formGroup.get(key);
-                        if (!formInput)
-                            return;
-                        const value = InputInfo[input.type].methods.value(changes[key], input);
-                        formInput.setValue(value);
-                    });
+                    this.updateValues(changedInputs);
                     this.lastValues = { ...this.formGroup.value };
                 }
                 this.values = this.getValues();
@@ -1827,10 +2141,33 @@ class NgxFormComponent {
         });
         return values;
     }
+    updateValues(changedInputs) {
+        if (!this.ngxForm.updateValues)
+            return;
+        const values = this.getValues();
+        const changes = this.ngxForm.updateValues(values);
+        Object.keys(changes)
+            .filter((key) => !changedInputs.includes(key))
+            .forEach((key) => {
+            const input = this.getInputs().find((i) => i.name === key);
+            if (!input)
+                return;
+            const formInput = this.formGroup.get(key);
+            if (!formInput)
+                return;
+            const value = InputInfo[input.type].methods.value(changes[key], input);
+            formInput.setValue(value);
+        });
+    }
     setInput(input) {
         const name = input.name;
         const readonly = 'readonly' in input && !!input.readonly;
-        const validators = input.type === 'CHECKBOX' || input.type === 'MULTI-SELECT' || input.optional || readonly
+        const validators = input.type === 'CHECKBOX' ||
+            input.type === 'ITEM-LIST' ||
+            input.type === 'MULTI-SELECT' ||
+            input.type === 'OPTION-LIST' ||
+            input.optional ||
+            readonly
             ? []
             : [Validators.required];
         this.formGroup.setControl(name, InputInfo[input.type].methods.control(input, validators));
@@ -1910,13 +2247,13 @@ class NgxFormComponent {
         else
             this.router.navigate(action);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgxFormComponent, deps: [{ token: i1$4.Router }, { token: NGX_FORM_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgxFormComponent, deps: [{ token: i1$5.Router }, { token: NGX_FORM_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: NgxFormComponent, isStandalone: true, selector: "ngx-form", inputs: { ngxForm: "ngxForm" }, outputs: { onInit: "onInit", onSubmit: "onSubmit", onChange: "onChange" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "ngForm", first: true, predicate: ["formObject"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"checkSubmit()\" dir=\"rtl\" class=\"ngx-form\" #formObject=\"ngForm\">\n    <section class=\"sections\">\n        @for (section of sections; track $index) {\n        <!-- CHECK SECTION VIEW -->\n        @if (showSection(section)) {\n        <!-- SECTION HEADER -->\n        @if (section.header) {\n        <div class=\"ngx-form-m3-header section-header\">{{ section.header }}</div>\n        }\n\n        <div class=\"section\" [class.section-mobile]=\"isMobile\">\n            <!-- SECTIONS -->\n            @for (column of section.columns; track $index) {\n            <!-- CHECK COLUMN VIEW -->\n            @if (showColumn(column)) {\n            <div class=\"column\" [style.flex]=\"section.flex[$index]\">\n                <!-- COLUMN HEADER -->\n                @if (column.header) {\n                <div class=\"ngx-form-m3-header column-header\">{{ column.header }}</div>\n                }\n\n                <!-- ROWS -->\n                @for (row of column.rows; track $index) {\n                <!-- CHECK Row VIEW -->\n                @if (showRow(row)) {\n                <!-- ROW HEADER -->\n                @if (row.header) {\n                <div class=\"ngx-form-m3-header row-header\">{{ row.header }}</div>\n                }\n\n                <div class=\"inputs\">\n                    <!-- INPUTS -->\n                    @for (input of row.inputs; track $index) {\n                    <!-- CHECK Row VIEW -->\n                    @if (showInput(input)) {\n                    <div class=\"input\" [style.flex]=\"row.flex[$index]\">\n                        <form-input\n                            [formGroup]=\"formGroup\"\n                            [input]=\"input\"\n                            [config]=\"inputConfig\"\n                            [values]=\"values\"\n                        ></form-input>\n                    </div>\n                    } }\n                </div>\n                } }\n            </div>\n            } }\n        </div>\n        } }\n    </section>\n\n    <section class=\"ngx-form-m3-form-buttons\" [class.mobile-view]=\"isMobile\">\n        <!-- EXTRA BUTTONS -->\n        @for (item of (ngxForm.buttons || []); track $index) {\n        <button type=\"button\" mat-stroked-button (click)=\"onClick(item.action)\">{{ item.title }}</button>\n        }\n        <!-- SUBMIT BUTTON -->\n        <button type=\"submit\" mat-flat-button>{{ ngxForm.submit }}</button>\n    </section>\n</form>\n", styles: [".sections{display:flex;flex-direction:column}.sections .column-header,.sections .section-header{margin-bottom:1rem}.sections .row-header{margin:1rem 0}.sections .section,.sections .section .column .inputs{display:flex;align-items:flex-start;column-gap:1rem}.sections .section-mobile{display:block}:host ::ng-deep mat-form-field{width:100%;margin-bottom:.5rem}:host ::ng-deep .mat-mdc-form-field-infix{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: InputComponent, selector: "form-input", inputs: ["formGroup", "input", "config", "values"] }, { kind: "directive", type: FormErrorDirective, selector: "form.ngx-form" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgxFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-form', imports: [ReactiveFormsModule, MatButton, InputComponent, FormErrorDirective], template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"checkSubmit()\" dir=\"rtl\" class=\"ngx-form\" #formObject=\"ngForm\">\n    <section class=\"sections\">\n        @for (section of sections; track $index) {\n        <!-- CHECK SECTION VIEW -->\n        @if (showSection(section)) {\n        <!-- SECTION HEADER -->\n        @if (section.header) {\n        <div class=\"ngx-form-m3-header section-header\">{{ section.header }}</div>\n        }\n\n        <div class=\"section\" [class.section-mobile]=\"isMobile\">\n            <!-- SECTIONS -->\n            @for (column of section.columns; track $index) {\n            <!-- CHECK COLUMN VIEW -->\n            @if (showColumn(column)) {\n            <div class=\"column\" [style.flex]=\"section.flex[$index]\">\n                <!-- COLUMN HEADER -->\n                @if (column.header) {\n                <div class=\"ngx-form-m3-header column-header\">{{ column.header }}</div>\n                }\n\n                <!-- ROWS -->\n                @for (row of column.rows; track $index) {\n                <!-- CHECK Row VIEW -->\n                @if (showRow(row)) {\n                <!-- ROW HEADER -->\n                @if (row.header) {\n                <div class=\"ngx-form-m3-header row-header\">{{ row.header }}</div>\n                }\n\n                <div class=\"inputs\">\n                    <!-- INPUTS -->\n                    @for (input of row.inputs; track $index) {\n                    <!-- CHECK Row VIEW -->\n                    @if (showInput(input)) {\n                    <div class=\"input\" [style.flex]=\"row.flex[$index]\">\n                        <form-input\n                            [formGroup]=\"formGroup\"\n                            [input]=\"input\"\n                            [config]=\"inputConfig\"\n                            [values]=\"values\"\n                        ></form-input>\n                    </div>\n                    } }\n                </div>\n                } }\n            </div>\n            } }\n        </div>\n        } }\n    </section>\n\n    <section class=\"ngx-form-m3-form-buttons\" [class.mobile-view]=\"isMobile\">\n        <!-- EXTRA BUTTONS -->\n        @for (item of (ngxForm.buttons || []); track $index) {\n        <button type=\"button\" mat-stroked-button (click)=\"onClick(item.action)\">{{ item.title }}</button>\n        }\n        <!-- SUBMIT BUTTON -->\n        <button type=\"submit\" mat-flat-button>{{ ngxForm.submit }}</button>\n    </section>\n</form>\n", styles: [".sections{display:flex;flex-direction:column}.sections .column-header,.sections .section-header{margin-bottom:1rem}.sections .row-header{margin:1rem 0}.sections .section,.sections .section .column .inputs{display:flex;align-items:flex-start;column-gap:1rem}.sections .section-mobile{display:block}:host ::ng-deep mat-form-field{width:100%;margin-bottom:.5rem}:host ::ng-deep .mat-mdc-form-field-infix{width:100%!important}\n"] }]
-        }], ctorParameters: () => [{ type: i1$4.Router }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$5.Router }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,