@esfaenza/forms-and-validations 11.2.77 → 11.2.80

package/fesm2015/esfaenza-forms-and-validations.js

@@ -4,8 +4,11 @@ import { DayJsDateAdapter, MatDayjsDateModule } from '@esfaenza/material-dayjs-a
 import { CommonModule } from '@angular/common';
 import { NG_VALIDATORS, RequiredValidator, NgControl, NG_VALUE_ACCESSOR, NG_ASYNC_VALIDATORS, FormsModule } from '@angular/forms';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatInputModule } from '@angular/material/input';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { LocalizationService, LocalizationModule } from '@esfaenza/localizations';
 import { CurrencyMaskModule } from '@esfaenza/ngx-currency-mask';
 import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown';
@@ -424,6 +427,7 @@ class BaseValidationLoc extends LocalizationService {
         super(LOC_LOCALE !== null && LOC_LOCALE !== void 0 ? LOC_LOCALE : 'it-IT');
         super.set("en->it", "Required Input", ["Input Richiesto"]);
         super.set("en->it", "Invalid Input Format", ["Formato Input Invalido"]);
+        super.set("en->it", "Elements selected", ["Elementi selezionati"]);
     }
 }
 BaseValidationLoc.decorators = [
@@ -1246,52 +1250,36 @@ ValidationDateTimeComponent.propDecorators = {
  * Componente di validaizone per gli input di Autocompletamento
  */
 class ValidationAutocompleteComponent extends BaseValidation {
-    /**
-     * @ignore
-     */
+    /** @ignore */
     constructor(_validators, _asyncValidators, injector, lc) {
         super();
         this._validators = _validators;
         this._asyncValidators = _asyncValidators;
         this.injector = injector;
         this.lc = lc;
-        /**
-         * Sorgente da cui scegliere valori filtrata in base a quello che ha scritto l'utente
-         */
+        /** Sorgente da cui scegliere valori filtrata in base a quello che ha scritto l'utente */
         this.FilteredSource = [];
-        /**
-         * Contenuto della label Floattante Material-Style
-         */
+        /** Contenuto della label Floattante Material-Style */
         this.label = "";
-        /**
-         * Evento che indica l'opzione selezionata dal componente. Il valore finale della selezione dovrà essere questo
-         */
+        /** Evento che indica l'opzione selezionata dal componente. Il valore finale della selezione dovrà essere questo */
         this.optionChange = new EventEmitter();
-        /**
-         * @ignore
-         */
+        /** @ignore */
         this.onTouched = () => { }; //placeholder on touched function
     }
-    /**
-     * @ignore
-     */
+    /** @ignore */
     ngOnInit() {
         this.registerFocusRequest();
         //controllo se è settato un required per decidere in maniera condizionale se utilizzare il validatore required nel componente interno
         if (this._validators && !this.noValidate && this._validators.some(elem => elem instanceof RequiredValidator))
             this.required = true;
     }
-    /**
-     * @ignore
-     */
+    /** @ignore */
     ngOnDestroy() {
         this.deregisterFocusRequest();
         if (this.tooltipSubscription)
             this.tooltipSubscription.unsubscribe();
     }
-    /**
-     * @ignore
-     */
+    /** @ignore */
     ngAfterViewInit() {
         this.postBinding();
     }
@@ -1322,9 +1310,7 @@ class ValidationAutocompleteComponent extends BaseValidation {
             };
         }
     }
-    /**
-     * @ignore
-     */
+    /** @ignore */
     writeValue(value) {
         var val = value && this.FilteredSource ? this.FilteredSource.find(t => t.id == value) : null;
         if (val)
@@ -1342,15 +1328,11 @@ class ValidationAutocompleteComponent extends BaseValidation {
         this.inputChange.emit(toEmit);
         this.onTouched();
     }
-    /**
-     * @ignore
-     */
+    /** @ignore */
     registerOnChange(fn) {
         this.propagateChange = fn;
     }
-    /**
-     * @ignore
-     */
+    /** @ignore */
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
@@ -1385,6 +1367,173 @@ ValidationAutocompleteComponent.propDecorators = {
     optionChange: [{ type: Output }]
 };
 
+// Angular
+/**
+ * Componente di validaizone per gli input di Autocompletamento
+ */
+class ValidationAutocompleteMultiComponent extends BaseValidation {
+    /** @ignore */
+    constructor(_validators, _asyncValidators, injector, lc) {
+        super();
+        this._validators = _validators;
+        this._asyncValidators = _asyncValidators;
+        this.injector = injector;
+        this.lc = lc;
+        this.displayFn = () => '';
+        /** Numero massimo di chip visualizzate */
+        this.ChipThreshold = 10;
+        /** Sorgente da cui scegliere valori filtrata in base a quello che ha scritto l'utente */
+        this.FilteredSource = [];
+        /** Contenuto della label Floattante Material-Style */
+        this.label = "";
+        /** Evento che indica l'opzione selezionata dal componente. Il valore finale della selezione dovrà essere questo */
+        this.optionChange = new EventEmitter();
+        /** Elementi selezionati */
+        this.selectData = [];
+        /** @ignore */
+        this.onTouched = () => { }; //placeholder on touched function
+    }
+    /** @ignore */
+    ngOnInit() {
+        this.registerFocusRequest();
+        //controllo se è settato un required per decidere in maniera condizionale se utilizzare il validatore required nel componente interno
+        if (this._validators && !this.noValidate && this._validators.some(elem => elem instanceof RequiredValidator))
+            this.required = true;
+    }
+    /** @ignore */
+    ngOnDestroy() {
+        this.deregisterFocusRequest();
+        if (this.tooltipSubscription)
+            this.tooltipSubscription.unsubscribe();
+    }
+    /** @ignore */
+    ngAfterViewInit() {
+        this.postBinding();
+    }
+    /** In caso arrivi una nuova sorgente devo reimpostare lo stato di selezione con quello attuale */
+    ngOnChanges(changes) {
+        let newSource = changes["FilteredSource"];
+        if (!newSource || newSource.firstChange)
+            return;
+        for (let i = 0; i < this.FilteredSource.length; i++) {
+            let item = this.FilteredSource[i];
+            item.selected = this.selectData.find(t => t.id == item.id);
+        }
+    }
+    /**
+     * Metodo che si occupa di collegare i validatori e la funzione di reset dal **ControlValueAccessor** rappresentato
+     * da questo componente al **ControlValueAccessor** rappresentato dall'effettivo elemento di Input presente lato HTML
+     */
+    postBinding() {
+        this.CheckValidity();
+        const ngControl = this.injector.get(NgControl, null);
+        if (ngControl) {
+            this.parentControl = ngControl.control;
+            //se la variabile novalidate è true, elimino tutti i validatori eventualmente inseriti
+            if (this.noValidate) {
+                this.parentControl.clearValidators();
+                this.parentControl.clearAsyncValidators();
+            }
+            else {
+                this.baseInput.control.setAsyncValidators(this._asyncValidators);
+                this.baseInput.control.setValidators(this._validators);
+            }
+            //faccio in modo che se chiamo il reset del controllo (o della form) dall'esterno si resetti anche il controllo nativo
+            const origFunc = this.parentControl.reset;
+            this.parentControl.reset = () => {
+                origFunc.apply(this.parentControl);
+                this.baseInput.control.reset();
+                this.tooltip.hide();
+            };
+        }
+    }
+    /** @ignore */
+    writeValue(value, finalValue = false) {
+        var val = value && this.FilteredSource ? this.FilteredSource.find(t => t.id == value) : null;
+        if (finalValue)
+            this.optionChange.emit(value);
+        this.propagateChange(val ? val.id : value);
+        this.value = val ? val.description : value;
+    }
+    /**
+     * L'emit della modifica al valore viene gestito su un evento custom (**inputChange**) come workaround al malfunzionamento dell'**ngModelChange** nativo
+     *
+     * @param {any} toEmit valore da propagare all'esterno
+     */
+    onModelChange(toEmit, finalValue = false) {
+        this.writeValue(toEmit, finalValue);
+        if (!finalValue)
+            this.inputChange.emit(toEmit);
+        this.onTouched();
+    }
+    /** @ignore */
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    /** @ignore */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /** Rimuove un elemento selezionato */
+    removeChip(data) {
+        if (!data) {
+            this.selectData = [];
+            this.FilteredSource.forEach(data => data.selected = false);
+            this.onModelChange(this.selectData.map(t => t.id).join(','), true);
+            this.onFinalize();
+        }
+        else
+            this.toggleSelection(data);
+    }
+    ;
+    /** Seleziona o deseleziona un oggetto */
+    toggleSelection(data) {
+        data.selected = !data.selected;
+        if (data.selected === true) {
+            this.selectData.push(data);
+        }
+        else {
+            const i = this.selectData.findIndex(value => value.id === data.id);
+            this.selectData.splice(i, 1);
+        }
+        this.value = null;
+        this.onModelChange(this.selectData.map(t => t.id).join(','), true);
+        this.onFinalize();
+    }
+    ;
+}
+ValidationAutocompleteMultiComponent.decorators = [
+    { type: Component, args: [{
+                selector: "val-autocomplete-multi",
+                template: "<mat-form-field appearance=\"{{FieldAppearence}}\" class=\"mat-full-width mat-no-border-top\" [style.width.px]=\"widthPx\">\r\n    <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n    <mat-chip-list #chipList>\r\n        <ng-container *ngIf=\"selectData.length < ChipThreshold\" >\r\n            <mat-chip *ngFor=\"let select of selectData\" class=\"cardinal-colors\" (click)=\"!(readonly || disabled) && removeChip(select)\">\r\n                {{ select.description }}\r\n                <mat-icon class=\"mat-chip-remove\">cancel</mat-icon>\r\n            </mat-chip>\r\n        </ng-container>\r\n\r\n        <mat-chip *ngIf=\"selectData.length >= ChipThreshold\" class=\"cardinal-colors\" (click)=\"!(readonly || disabled) && removeChip(null)\">\r\n            {{ selectData.length }} {{ 'Elements selected' | localize: lc }}\r\n            <mat-icon class=\"mat-chip-remove\">cancel</mat-icon>\r\n        </mat-chip>\r\n    \r\n        <input matInput\r\n            [matChipInputFor]=\"chipList\"\r\n            #htmlInput\r\n            #baseInput='ngModel'\r\n            type=\"text\"\r\n            triggers=\"\"\r\n            placement=\"top\"\r\n            [placeholder]=\"placeholder\"\r\n            [matAutocomplete]=\"auto\"\r\n            name=\"val-input\"\r\n            id=\"{{id}}\"\r\n            [(ngModel)]=\"value\"\r\n            [tooltip]=\"tolTemplate\"\r\n            [disabled]=\"readonly || disabled\"\r\n            (ngModelChange)=\"onModelChange($event)\"\r\n            (click)=\"onFocus($event)\"\r\n            (focus)=\"checkTooltip();\"\r\n            (blur)=\"closeTooltip();\">\r\n    </mat-chip-list>\r\n\r\n    <mat-autocomplete #auto=\"matAutocomplete\"  [displayWith]=\"displayFn\">\r\n        <mat-option *ngFor=\"let data of FilteredSource\">\r\n            <div (click)=\"toggleSelection(data); $event.stopPropagation()\">\r\n                <mat-checkbox [checked]=\"data.selected\" (change)=\"toggleSelection(data);\" (click)=\"$event.stopPropagation()\">\r\n                  {{ data.description }}\r\n                </mat-checkbox>\r\n              </div>\r\n        </mat-option>\r\n    </mat-autocomplete>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n    <div (click)=\"closeTooltip()\">\r\n        <span>{{validationFailed}}</span>\r\n    </div>\r\n</ng-template>",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                providers: [
+                    { provide: LocalizationService, useClass: BaseValidationLoc },
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => ValidationAutocompleteMultiComponent),
+                        multi: true
+                    }
+                ],
+                encapsulation: ViewEncapsulation.None,
+                styles: [".tooltip-inner{background-color:#842a30;font-size:12px;width:-webkit-max-content;width:-moz-max-content;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow,.tooltip.top .tooltip-arrow:before{border-top-color:#842a30}.close-button{position:absolute;right:0;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:focus,.close-button:hover{text-decoration:none;cursor:pointer;opacity:.75}"]
+            },] }
+];
+ValidationAutocompleteMultiComponent.ctorParameters = () => [
+    { type: Array, decorators: [{ type: Optional }, { type: Inject, args: [NG_VALIDATORS,] }] },
+    { type: Array, decorators: [{ type: Optional }, { type: Inject, args: [NG_ASYNC_VALIDATORS,] }] },
+    { type: Injector },
+    { type: LocalizationService }
+];
+ValidationAutocompleteMultiComponent.propDecorators = {
+    ChipThreshold: [{ type: Input }],
+    FilteredSource: [{ type: Input }],
+    value: [{ type: Input }],
+    label: [{ type: Input }],
+    optionChange: [{ type: Output }],
+    autoTrigger: [{ type: ViewChild, args: [MatAutocompleteTrigger,] }]
+};
+
 // Angular
 /** Componente base da cui tutti i componenti Form implementano */
 class BaseFormControl {
@@ -2634,7 +2783,9 @@ class FormSelectComponent extends BaseFormControl {
                 this.detatchPreviousAndRetatchNext((afterStuff) => {
                     this.BoundSource = null;
                     setTimeout(() => {
+                        var _a;
                         this.tryBindSourceDisplay();
+                        this.EvaluatedModel = this.BoundSource && this.BoundSource.length > 0 ? (_a = this.BoundSource.find(t => t.id == this.Model)) === null || _a === void 0 ? void 0 : _a.description : "";
                         this.cdr.detectChanges();
                         setTimeout(() => { afterStuff(); });
                     });
@@ -2642,7 +2793,9 @@ class FormSelectComponent extends BaseFormControl {
             }
             else
                 this.detatchPreviousAndRetatchNext((afterStuff) => {
+                    var _a;
                     this.tryBindSourceDisplay();
+                    this.EvaluatedModel = this.BoundSource && this.BoundSource.length > 0 ? (_a = this.BoundSource.find(t => t.id == this.Model)) === null || _a === void 0 ? void 0 : _a.description : "";
                     this.cdr.detectChanges();
                     setTimeout(() => { afterStuff(); });
                 });
@@ -2670,8 +2823,7 @@ class FormSelectComponent extends BaseFormControl {
     /** @ignore */
     writeValue(obj) {
         var _a;
-        if (this.BoundSource && this.BoundSource.length > 0)
-            this.EvaluatedModel = (_a = this.BoundSource.find(t => t.id == obj)) === null || _a === void 0 ? void 0 : _a.description;
+        this.EvaluatedModel = this.BoundSource && this.BoundSource.length > 0 ? (_a = this.BoundSource.find(t => t.id == this.Model)) === null || _a === void 0 ? void 0 : _a.description : "";
         super.writeValue(obj);
     }
     /** @ignore */
@@ -2747,6 +2899,8 @@ class FormMultiSelectComponent extends BaseFormControl {
         this.SelectLabel = "";
         /** Permette al componente di gestire come modello non una lista di chiavi, ma una lista di KeyValue */
         this.UseKeyValues = false;
+        /** Indica al componente di emettere una lista di chiavi separate da virgola piuttosto che una lista vera e propria di chiavi/KeyValue */
+        this.UseCommaSeparatedList = false;
         /** Impostazioni del componente interno **angular2-multiselect** */
         this.Settings = null;
         // Default dei settings per evitare che siano mai nulli, altrimenti il cazzo di CuppaLab salta in araia che è veramente una bellezza
@@ -2799,6 +2953,8 @@ class FormMultiSelectComponent extends BaseFormControl {
     writeValue(obj) {
         this.TmpModel = obj;
         let toPass = [];
+        if (this.UseCommaSeparatedList && obj && !obj.length)
+            obj = obj.split(',');
         //Qui arrivano solo gli id, o {id: x, description: y} in caso sono in UseKeyValues, 
         //devo tirare fuori gli oggetti relativi e piazzarli come lista per il Model
         if (obj && obj.length > 0) {
@@ -2816,10 +2972,12 @@ class FormMultiSelectComponent extends BaseFormControl {
     /** @ignore Override per gestire input in uscita */
     changed() {
         let toEmit = null;
-        if (!this.UseKeyValues)
+        if (!this.UseKeyValues && !this.UseCommaSeparatedList)
             toEmit = this.Model.map(m => m.id);
-        else
+        else if (this.UseKeyValues)
             toEmit = this.Model.map(m => ({ id: m.id, description: m.itemName }));
+        else if (this.UseCommaSeparatedList)
+            toEmit = this.Model.map(m => m.id).join(',');
         super.changed(toEmit);
         super.finalized();
     }
@@ -2846,7 +3004,8 @@ FormMultiSelectComponent.ctorParameters = () => [
 ];
 FormMultiSelectComponent.propDecorators = {
     SelectLabel: [{ type: Input }],
-    UseKeyValues: [{ type: Input }]
+    UseKeyValues: [{ type: Input }],
+    UseCommaSeparatedList: [{ type: Input }]
 };
 
 // Angular
@@ -2919,6 +3078,10 @@ class FormAutocompleteComponent extends BaseFormControl {
         this.RequiredPlaceholder = null;
         /** Indica se i controlli devono essere effettuati tenendo conto del Case o meno. Vale solo qualora la **Source** fosse fornita */
         this.CaseSensitive = false;
+        /** Indica se usare la modalità multiselezione o no */
+        this.Multi = false;
+        /** Indica se usare la modalità multiselezione o no */
+        this.MultiElementsThreshold = 10;
         /**
          * Indica se ignorare il prossimo evento writeValue che normalmente dovrebbe richiedere la nuova source. Serve per quando l'utente seleziona un elemento:
          * Subito dopo partirebbe un altro evento modelChange che ricaricherebbe nuovamente la source
@@ -2943,7 +3106,8 @@ class FormAutocompleteComponent extends BaseFormControl {
             });
             return;
         }
-        this.finalizeValue(value);
+        if (!this.Multi)
+            this.finalizeValue(value);
     }
     /**
      * Dato un valore verifica se può restituire le informazioni trovate in **Source** con id uguale a **value** o se deve restituire il valore in se
@@ -2967,7 +3131,10 @@ class FormAutocompleteComponent extends BaseFormControl {
             if (t && t.length > 0) {
                 this.Source = t;
                 this.tryBindSourceDisplay();
-                setTimeout(() => { this.finalizeValue(this.Model); });
+                if (!this.Multi)
+                    setTimeout(() => { this.finalizeValue(this.Model); });
+                else
+                    this.cdr.markForCheck();
             }
         });
     }
@@ -2982,7 +3149,8 @@ class FormAutocompleteComponent extends BaseFormControl {
             return;
         }
         // Quando filtro la source, se non devo ignorare l'evento devo comunque assicurarmi di impostare il valore selezionato a null
-        super.changed(null);
+        if (!this.Multi)
+            super.changed(null);
         if (!event && this.MinChars == 0 && !this.SearchFunction) {
             this.FilteredBoundSource = this.BoundSource;
             return;
@@ -3038,7 +3206,10 @@ class FormAutocompleteComponent extends BaseFormControl {
     }
     /** @ignore Override che marca anche il prossimo evento di filterSource da ignorare */
     changed(forcedValue = null, markForCheck = false) {
-        this.ignoreNextWriteValue = true;
+        if (!this.Multi)
+            this.ignoreNextWriteValue = true;
+        if (forcedValue == "" && this.Multi)
+            this.Model = "";
         super.changed(forcedValue, markForCheck);
     }
     /** @ignore */
@@ -3055,7 +3226,7 @@ class FormAutocompleteComponent extends BaseFormControl {
 FormAutocompleteComponent.decorators = [
     { type: Component, args: [{
                 selector: "form-autocomplete",
-                template: "<ng-container *ngIf=\"!FormLayout\">\r\n    <ng-container *ngIf=\"DisplayMode && !DisplayModeTemplate\">{{ EvaluatedModel }}</ng-container>\r\n    <ng-container *ngIf=\"DisplayMode && DisplayModeTemplate\"><ng-container *ngTemplateOutlet=\"DisplayModeTemplate, context: { $implicit: EvaluatedModel }\"></ng-container></ng-container>\r\n    <div [hidden]=\"DisplayMode\"><ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container></div>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n    <label class=\"col-md-{{LabelColWidth}}\" [class.app-bold]=\"DisplayMode\" [class.m-t-5]=\"!DisplayMode\">{{Label}}{{Required && !DisplayMode ? '*' : ''}}:</label>\r\n    <div class=\"col-md-{{InputColWidth}}\">\r\n        <ng-container *ngIf=\"DisplayMode && !DisplayModeTemplate\">{{ EvaluatedModel }}</ng-container>\r\n        <ng-container *ngIf=\"DisplayMode && DisplayModeTemplate\"><ng-container *ngTemplateOutlet=\"DisplayModeTemplate, context: { $implicit: EvaluatedModel }\"></ng-container></ng-container>\r\n        <div [hidden]=\"DisplayMode\"><ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container></div>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n    <val-autocomplete [FocusSubject]=\"FocusSubject\" [FieldAppearence]=\"FieldAppearence\" [noValidate]=\"!Validation\"\r\n               [submitted]=\"Form?.submitted\"\r\n               [forceInvalid]=\"ForcedError\"\r\n               [readonly]=\"Readonly\"\r\n               [label]=\"SelectLabel\"\r\n               type=\"text\"\r\n               [ngModel]=\"Model\"\r\n               (ngModelChange)=\"Model = $event; evaluateIdResearch()\"\r\n               [id]=\"GeneratedName\"\r\n               name=\"{{GeneratedName}}\"\r\n               #validationControl=\"ngModel\"\r\n               (inputChange)=\"filterSource($event);\"\r\n               (inputFocus)=\"focused($event);\"\r\n               (inputFinalized)=\"finalized()\"\r\n               (optionChange)=\"changed($event);\"\r\n               [placeholder]=\"Required ? ((RequiredPlaceholder != null ? RequiredPlaceholder : ('Select' | localize : lc) + '...')) : Placeholder\"\r\n               [validationFailed]=\"FailedValidationMessage\"\r\n               [FilteredSource]=\"FilteredBoundSource\"\r\n               >\r\n    </val-autocomplete>\r\n</ng-template>",
+                template: "<ng-container *ngIf=\"!FormLayout\">\r\n    <ng-container *ngIf=\"DisplayMode && !DisplayModeTemplate\">{{ EvaluatedModel }}</ng-container>\r\n    <ng-container *ngIf=\"DisplayMode && DisplayModeTemplate\"><ng-container *ngTemplateOutlet=\"DisplayModeTemplate, context: { $implicit: EvaluatedModel }\"></ng-container></ng-container>\r\n    <div [hidden]=\"DisplayMode\"><ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container></div>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n    <label class=\"col-md-{{LabelColWidth}}\" [class.app-bold]=\"DisplayMode\" [class.m-t-5]=\"!DisplayMode\">{{Label}}{{Required && !DisplayMode ? '*' : ''}}:</label>\r\n    <div class=\"col-md-{{InputColWidth}}\">\r\n        <ng-container *ngIf=\"DisplayMode && !DisplayModeTemplate\">{{ EvaluatedModel }}</ng-container>\r\n        <ng-container *ngIf=\"DisplayMode && DisplayModeTemplate\"><ng-container *ngTemplateOutlet=\"DisplayModeTemplate, context: { $implicit: EvaluatedModel }\"></ng-container></ng-container>\r\n        <div [hidden]=\"DisplayMode\"><ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container></div>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n    <val-autocomplete *ngIf=\"!Multi\" [FocusSubject]=\"FocusSubject\" [FieldAppearence]=\"FieldAppearence\" [noValidate]=\"!Validation\"\r\n               [submitted]=\"Form?.submitted\"\r\n               [forceInvalid]=\"ForcedError\"\r\n               [readonly]=\"Readonly\"\r\n               [label]=\"SelectLabel\"\r\n               type=\"text\"\r\n               [ngModel]=\"Model\"\r\n               (ngModelChange)=\"Model = $event; evaluateIdResearch()\"\r\n               [id]=\"GeneratedName\"\r\n               name=\"{{GeneratedName}}\"\r\n               #validationControl=\"ngModel\"\r\n               (inputChange)=\"filterSource($event);\"\r\n               (inputFocus)=\"focused($event);\"\r\n               (inputFinalized)=\"finalized()\"\r\n               (optionChange)=\"changed($event);\"\r\n               [placeholder]=\"Required ? ((RequiredPlaceholder != null ? RequiredPlaceholder : ('Select' | localize : lc) + '...')) : Placeholder\"\r\n               [validationFailed]=\"FailedValidationMessage\"\r\n               [FilteredSource]=\"FilteredBoundSource\">\r\n    </val-autocomplete>\r\n\r\n    <val-autocomplete-multi *ngIf=\"Multi\" [FocusSubject]=\"FocusSubject\" [FieldAppearence]=\"FieldAppearence\" [noValidate]=\"!Validation\"\r\n               [submitted]=\"Form?.submitted\"\r\n               [forceInvalid]=\"ForcedError\"\r\n               [readonly]=\"Readonly\"\r\n               [label]=\"SelectLabel\"\r\n               [ChipThreshold]=\"MultiElementsThreshold\"\r\n               type=\"text\"\r\n               [ngModel]=\"Model\"\r\n               (ngModelChange)=\"Model = $event; evaluateIdResearch()\"\r\n               [id]=\"GeneratedName\"\r\n               name=\"{{GeneratedName}}\"\r\n               #validationControl=\"ngModel\"\r\n               (inputChange)=\"filterSource($event);\"\r\n               (inputFocus)=\"focused($event);\"\r\n               (inputFinalized)=\"finalized()\"\r\n               (optionChange)=\"changed($event);\"\r\n               [placeholder]=\"Required ? ((RequiredPlaceholder != null ? RequiredPlaceholder : ('Select' | localize : lc) + '...')) : Placeholder\"\r\n               [validationFailed]=\"FailedValidationMessage\"\r\n               [FilteredSource]=\"FilteredBoundSource\">\r\n\r\n    </val-autocomplete-multi>\r\n</ng-template>",
                 providers: [{ provide: LocalizationService, useClass: FormAutocompleteComponentLoc }],
                 changeDetection: ChangeDetectionStrategy.OnPush
             },] }
@@ -3075,7 +3246,9 @@ FormAutocompleteComponent.propDecorators = {
     SearchFunction: [{ type: Input }],
     MinChars: [{ type: Input }],
     RequiredPlaceholder: [{ type: Input }],
-    CaseSensitive: [{ type: Input }]
+    CaseSensitive: [{ type: Input }],
+    Multi: [{ type: Input }],
+    MultiElementsThreshold: [{ type: Input }]
 };
 
 // Angular
@@ -3208,6 +3381,7 @@ const COMPONENTS = [
     FormMultiSelectComponent,
     FormFileComponent,
     ValidationAutocompleteComponent,
+    ValidationAutocompleteMultiComponent,
     FormAutocompleteComponent,
     FormDateTimeComponent,
     ValidationDateTimeComponent,
@@ -3221,6 +3395,9 @@ const MODULES = [
     FormsModule,
     LocalizationModule,
     MatInputModule,
+    MatChipsModule,
+    MatIconModule,
+    MatCheckboxModule,
     MatDatepickerModule,
     MatDayjsDateModule,
     TooltipModule,
@@ -3265,5 +3442,5 @@ FormsAndValidationsModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AppFile, FormAdaptiveComponent, FormAutocompleteComponent, FormCheckboxComponent, FormDateComponent, FormDateTimeComponent, FormEmptyComponent, FormErrorComponent, FormFileComponent, FormInfoComponent, FormInputComponent, FormSelectComponent, FormTemplateComponent, FormTextareaComponent, FormTimeComponent, FormsAndValidationsModule, FormsAndValidationsModuleConfig, NgxExpandedDayJsDateAdapter, ValidationAutocompleteComponent, ValidationCurrencyComponent, ValidationDateComponent, ValidationDateTimeComponent, ValidationInputComponent, ValidationSelectComponent, ValidationTextAreaComponent, BaseValidation as ɵa, BaseValidationLoc as ɵb, FAV_LOCALE as ɵc, ACO_CUSTOMKEY as ɵd, FAV_DEBUG_MODE as ɵe, CustomRequiredDirective as ɵf, BaseFormControl as ɵg, FormSelectComponentLoc as ɵh, FormAdaptiveComponentLoc as ɵi, FormMultiSelectComponent as ɵj, FormMultiSelectComponentLoc as ɵk, FormFileComponentLoc as ɵl, FormAutocompleteComponentLoc as ɵm };
+export { AppFile, FormAdaptiveComponent, FormAutocompleteComponent, FormCheckboxComponent, FormDateComponent, FormDateTimeComponent, FormEmptyComponent, FormErrorComponent, FormFileComponent, FormInfoComponent, FormInputComponent, FormSelectComponent, FormTemplateComponent, FormTextareaComponent, FormTimeComponent, FormsAndValidationsModule, FormsAndValidationsModuleConfig, NgxExpandedDayJsDateAdapter, ValidationAutocompleteComponent, ValidationCurrencyComponent, ValidationDateComponent, ValidationDateTimeComponent, ValidationInputComponent, ValidationSelectComponent, ValidationTextAreaComponent, BaseValidation as ɵa, BaseValidationLoc as ɵb, FAV_LOCALE as ɵc, ACO_CUSTOMKEY as ɵd, FAV_DEBUG_MODE as ɵe, CustomRequiredDirective as ɵf, BaseFormControl as ɵg, FormSelectComponentLoc as ɵh, FormAdaptiveComponentLoc as ɵi, FormMultiSelectComponent as ɵj, FormMultiSelectComponentLoc as ɵk, FormFileComponentLoc as ɵl, ValidationAutocompleteMultiComponent as ɵm, FormAutocompleteComponentLoc as ɵn };
 //# sourceMappingURL=esfaenza-forms-and-validations.js.map