@esfaenza/forms-and-validations 11.2.76 → 11.2.79

package/bundles/esfaenza-forms-and-validations.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/material/core'), require('@esfaenza/material-dayjs-adapter'), require('@angular/common'), require('@angular/forms'), require('@angular/material/datepicker'), require('@angular/material/autocomplete'), require('@angular/material/input'), require('@esfaenza/localizations'), require('@esfaenza/ngx-currency-mask'), require('angular2-multiselect-dropdown'), require('@angular-material-components/datetime-picker'), require('ngx-bootstrap/tooltip'), require('@esfaenza/extensions'), require('@esfaenza/access-control')) :
-    typeof define === 'function' && define.amd ? define('@esfaenza/forms-and-validations', ['exports', '@angular/core', '@angular/material/core', '@esfaenza/material-dayjs-adapter', '@angular/common', '@angular/forms', '@angular/material/datepicker', '@angular/material/autocomplete', '@angular/material/input', '@esfaenza/localizations', '@esfaenza/ngx-currency-mask', 'angular2-multiselect-dropdown', '@angular-material-components/datetime-picker', 'ngx-bootstrap/tooltip', '@esfaenza/extensions', '@esfaenza/access-control'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.esfaenza = global.esfaenza || {}, global.esfaenza['forms-and-validations'] = {}), global.ng.core, global.ng.material.core, global.materialDayjsAdapter, global.ng.common, global.ng.forms, global.ng.material.datepicker, global.ng.material.autocomplete, global.ng.material.input, global.localizations, global.ngxCurrencyMask, global.angular2MultiselectDropdown, global.datetimePicker, global.tooltip, global.extensions, global.accessControl));
-}(this, (function (exports, core, core$1, materialDayjsAdapter, common, forms, datepicker, autocomplete, input, localizations, ngxCurrencyMask, angular2MultiselectDropdown, datetimePicker, tooltip, extensions, accessControl) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/material/core'), require('@esfaenza/material-dayjs-adapter'), require('@angular/common'), require('@angular/forms'), require('@angular/material/datepicker'), require('@angular/material/autocomplete'), require('@angular/material/input'), require('@angular/material/chips'), require('@angular/material/icon'), require('@angular/material/checkbox'), require('@esfaenza/localizations'), require('@esfaenza/ngx-currency-mask'), require('angular2-multiselect-dropdown'), require('@angular-material-components/datetime-picker'), require('ngx-bootstrap/tooltip'), require('@esfaenza/extensions'), require('@esfaenza/access-control')) :
+    typeof define === 'function' && define.amd ? define('@esfaenza/forms-and-validations', ['exports', '@angular/core', '@angular/material/core', '@esfaenza/material-dayjs-adapter', '@angular/common', '@angular/forms', '@angular/material/datepicker', '@angular/material/autocomplete', '@angular/material/input', '@angular/material/chips', '@angular/material/icon', '@angular/material/checkbox', '@esfaenza/localizations', '@esfaenza/ngx-currency-mask', 'angular2-multiselect-dropdown', '@angular-material-components/datetime-picker', 'ngx-bootstrap/tooltip', '@esfaenza/extensions', '@esfaenza/access-control'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.esfaenza = global.esfaenza || {}, global.esfaenza['forms-and-validations'] = {}), global.ng.core, global.ng.material.core, global.materialDayjsAdapter, global.ng.common, global.ng.forms, global.ng.material.datepicker, global.ng.material.autocomplete, global.ng.material.input, global.ng.material.chips, global.ng.material.icon, global.ng.material.checkbox, global.localizations, global.ngxCurrencyMask, global.angular2MultiselectDropdown, global.datetimePicker, global.tooltip, global.extensions, global.accessControl));
+}(this, (function (exports, core, core$1, materialDayjsAdapter, common, forms, datepicker, autocomplete, input, chips, icon, checkbox, localizations, ngxCurrencyMask, angular2MultiselectDropdown, datetimePicker, tooltip, extensions, accessControl) { 'use strict';
 
     /**
      * Classe che identifica un file
@@ -749,6 +749,7 @@
             var _this = _super.call(this, LOC_LOCALE !== null && LOC_LOCALE !== void 0 ? LOC_LOCALE : 'it-IT') || this;
             _super.prototype.set.call(_this, "en->it", "Required Input", ["Input Richiesto"]);
             _super.prototype.set.call(_this, "en->it", "Invalid Input Format", ["Formato Input Invalido"]);
+            _super.prototype.set.call(_this, "en->it", "Elements selected", ["Elementi selezionati"]);
             return _this;
         }
         return BaseValidationLoc;
@@ -1589,53 +1590,37 @@
      */
     var ValidationAutocompleteComponent = /** @class */ (function (_super) {
         __extends(ValidationAutocompleteComponent, _super);
-        /**
-         * @ignore
-         */
+        /** @ignore */
         function ValidationAutocompleteComponent(_validators, _asyncValidators, injector, lc) {
             var _this = _super.call(this) || this;
             _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 core.EventEmitter();
-            /**
-             * @ignore
-             */
+            /** @ignore */
             _this.onTouched = function () { }; //placeholder on touched function
             return _this;
         }
-        /**
-         * @ignore
-         */
+        /** @ignore */
         ValidationAutocompleteComponent.prototype.ngOnInit = function () {
             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(function (elem) { return elem instanceof forms.RequiredValidator; }))
                 this.required = true;
         };
-        /**
-         * @ignore
-         */
+        /** @ignore */
         ValidationAutocompleteComponent.prototype.ngOnDestroy = function () {
             this.deregisterFocusRequest();
             if (this.tooltipSubscription)
                 this.tooltipSubscription.unsubscribe();
         };
-        /**
-         * @ignore
-         */
+        /** @ignore */
         ValidationAutocompleteComponent.prototype.ngAfterViewInit = function () {
             this.postBinding();
         };
@@ -1667,9 +1652,7 @@
                 };
             }
         };
-        /**
-         * @ignore
-         */
+        /** @ignore */
         ValidationAutocompleteComponent.prototype.writeValue = function (value) {
             var val = value && this.FilteredSource ? this.FilteredSource.find(function (t) { return t.id == value; }) : null;
             if (val)
@@ -1687,15 +1670,11 @@
             this.inputChange.emit(toEmit);
             this.onTouched();
         };
-        /**
-         * @ignore
-         */
+        /** @ignore */
         ValidationAutocompleteComponent.prototype.registerOnChange = function (fn) {
             this.propagateChange = fn;
         };
-        /**
-         * @ignore
-         */
+        /** @ignore */
         ValidationAutocompleteComponent.prototype.registerOnTouched = function (fn) {
             this.onTouched = fn;
         };
@@ -1731,6 +1710,182 @@
         optionChange: [{ type: core.Output }]
     };
 
+    /**
+     * Componente di validaizone per gli input di Autocompletamento
+     */
+    var ValidationAutocompleteMultiComponent = /** @class */ (function (_super) {
+        __extends(ValidationAutocompleteMultiComponent, _super);
+        /** @ignore */
+        function ValidationAutocompleteMultiComponent(_validators, _asyncValidators, injector, lc) {
+            var _this = _super.call(this) || this;
+            _this._validators = _validators;
+            _this._asyncValidators = _asyncValidators;
+            _this.injector = injector;
+            _this.lc = lc;
+            _this.displayFn = function () { return ''; };
+            /** Numero massimo di chip visualizzate */
+            _this.ChipThreshold = 3;
+            /** 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 core.EventEmitter();
+            /** Elementi selezionati */
+            _this.selectData = [];
+            /** @ignore */
+            _this.onTouched = function () { }; //placeholder on touched function
+            return _this;
+        }
+        /** @ignore */
+        ValidationAutocompleteMultiComponent.prototype.ngOnInit = function () {
+            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(function (elem) { return elem instanceof forms.RequiredValidator; }))
+                this.required = true;
+        };
+        /** @ignore */
+        ValidationAutocompleteMultiComponent.prototype.ngOnDestroy = function () {
+            this.deregisterFocusRequest();
+            if (this.tooltipSubscription)
+                this.tooltipSubscription.unsubscribe();
+        };
+        /** @ignore */
+        ValidationAutocompleteMultiComponent.prototype.ngAfterViewInit = function () {
+            this.postBinding();
+        };
+        /** In caso arrivi una nuova sorgente devo reimpostare lo stato di selezione con quello attuale */
+        ValidationAutocompleteMultiComponent.prototype.ngOnChanges = function (changes) {
+            var newSource = changes["FilteredSource"];
+            if (!newSource || newSource.firstChange)
+                return;
+            var _loop_1 = function (i) {
+                var item = this_1.FilteredSource[i];
+                item.selected = this_1.selectData.find(function (t) { return t.id == item.id; });
+            };
+            var this_1 = this;
+            for (var i = 0; i < this.FilteredSource.length; i++) {
+                _loop_1(i);
+            }
+        };
+        /**
+         * 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
+         */
+        ValidationAutocompleteMultiComponent.prototype.postBinding = function () {
+            var _this = this;
+            this.CheckValidity();
+            var ngControl = this.injector.get(forms.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
+                var origFunc_1 = this.parentControl.reset;
+                this.parentControl.reset = function () {
+                    origFunc_1.apply(_this.parentControl);
+                    _this.baseInput.control.reset();
+                    _this.tooltip.hide();
+                };
+            }
+        };
+        /** @ignore */
+        ValidationAutocompleteMultiComponent.prototype.writeValue = function (value, finalValue) {
+            if (finalValue === void 0) { finalValue = false; }
+            var val = value && this.FilteredSource ? this.FilteredSource.find(function (t) { return 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
+         */
+        ValidationAutocompleteMultiComponent.prototype.onModelChange = function (toEmit, finalValue) {
+            if (finalValue === void 0) { finalValue = false; }
+            this.writeValue(toEmit, finalValue);
+            if (!finalValue)
+                this.inputChange.emit(toEmit);
+            this.onTouched();
+        };
+        /** @ignore */
+        ValidationAutocompleteMultiComponent.prototype.registerOnChange = function (fn) {
+            this.propagateChange = fn;
+        };
+        /** @ignore */
+        ValidationAutocompleteMultiComponent.prototype.registerOnTouched = function (fn) {
+            this.onTouched = fn;
+        };
+        /** Rimuove un elemento selezionato */
+        ValidationAutocompleteMultiComponent.prototype.removeChip = function (data) {
+            if (!data) {
+                this.selectData = [];
+                this.FilteredSource.forEach(function (data) { return data.selected = false; });
+                this.onModelChange(this.selectData.map(function (t) { return t.id; }).join(','), true);
+                this.onFinalize();
+            }
+            else
+                this.toggleSelection(data);
+        };
+        ;
+        /** Seleziona o deseleziona un oggetto */
+        ValidationAutocompleteMultiComponent.prototype.toggleSelection = function (data) {
+            data.selected = !data.selected;
+            if (data.selected === true) {
+                this.selectData.push(data);
+            }
+            else {
+                var i = this.selectData.findIndex(function (value) { return value.id === data.id; });
+                this.selectData.splice(i, 1);
+            }
+            this.value = null;
+            this.onModelChange(this.selectData.map(function (t) { return t.id; }).join(','), true);
+            this.onFinalize();
+        };
+        ;
+        return ValidationAutocompleteMultiComponent;
+    }(BaseValidation));
+    ValidationAutocompleteMultiComponent.decorators = [
+        { type: core.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: core.ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        { provide: localizations.LocalizationService, useClass: BaseValidationLoc },
+                        {
+                            provide: forms.NG_VALUE_ACCESSOR,
+                            useExisting: core.forwardRef(function () { return ValidationAutocompleteMultiComponent; }),
+                            multi: true
+                        }
+                    ],
+                    encapsulation: core.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 = function () { return [
+        { type: Array, decorators: [{ type: core.Optional }, { type: core.Inject, args: [forms.NG_VALIDATORS,] }] },
+        { type: Array, decorators: [{ type: core.Optional }, { type: core.Inject, args: [forms.NG_ASYNC_VALIDATORS,] }] },
+        { type: core.Injector },
+        { type: localizations.LocalizationService }
+    ]; };
+    ValidationAutocompleteMultiComponent.propDecorators = {
+        ChipThreshold: [{ type: core.Input }],
+        FilteredSource: [{ type: core.Input }],
+        value: [{ type: core.Input }],
+        label: [{ type: core.Input }],
+        optionChange: [{ type: core.Output }],
+        autoTrigger: [{ type: core.ViewChild, args: [autocomplete.MatAutocompleteTrigger,] }]
+    };
+
     // Angular
     /** Componente base da cui tutti i componenti Form implementano */
     var BaseFormControl = /** @class */ (function () {
@@ -2030,7 +2185,7 @@
          * un altro con lo stesso "name" ma magari resettato, Angular lo re-idraterebbe con i valori precedenti nonostante il modello fosse vuoto
          */
         BaseFormControl.prototype.ngOnDestroy = function () {
-            if (this.Form && !!this.Form.getControl(this.validationControl))
+            if (this.Form && this.validationControl && !!this.Form.getControl(this.validationControl))
                 this.Form.removeControl(this.validationControl);
         };
         /** Elabora i validatori iniettati e capisce se il valore è obbligatorio o meno */
@@ -3053,7 +3208,9 @@
                     this.detatchPreviousAndRetatchNext(function (afterStuff) {
                         _this.BoundSource = null;
                         setTimeout(function () {
+                            var _a;
                             _this.tryBindSourceDisplay();
+                            _this.EvaluatedModel = _this.BoundSource && _this.BoundSource.length > 0 ? (_a = _this.BoundSource.find(function (t) { return t.id == _this.Model; })) === null || _a === void 0 ? void 0 : _a.description : "";
                             _this.cdr.detectChanges();
                             setTimeout(function () { afterStuff(); });
                         });
@@ -3061,7 +3218,9 @@
                 }
                 else
                     this.detatchPreviousAndRetatchNext(function (afterStuff) {
+                        var _a;
                         _this.tryBindSourceDisplay();
+                        _this.EvaluatedModel = _this.BoundSource && _this.BoundSource.length > 0 ? (_a = _this.BoundSource.find(function (t) { return t.id == _this.Model; })) === null || _a === void 0 ? void 0 : _a.description : "";
                         _this.cdr.detectChanges();
                         setTimeout(function () { afterStuff(); });
                     });
@@ -3089,9 +3248,9 @@
         };
         /** @ignore */
         FormSelectComponent.prototype.writeValue = function (obj) {
+            var _this = this;
             var _a;
-            if (this.BoundSource && this.BoundSource.length > 0)
-                this.EvaluatedModel = (_a = this.BoundSource.find(function (t) { return t.id == obj; })) === null || _a === void 0 ? void 0 : _a.description;
+            this.EvaluatedModel = this.BoundSource && this.BoundSource.length > 0 ? (_a = this.BoundSource.find(function (t) { return t.id == _this.Model; })) === null || _a === void 0 ? void 0 : _a.description : "";
             _super.prototype.writeValue.call(this, obj);
         };
         /** @ignore */
@@ -3172,6 +3331,8 @@
             _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
@@ -3230,6 +3391,8 @@
             var _this = this;
             this.TmpModel = obj;
             var 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) {
@@ -3247,10 +3410,12 @@
         /** @ignore Override per gestire input in uscita */
         FormMultiSelectComponent.prototype.changed = function () {
             var toEmit = null;
-            if (!this.UseKeyValues)
+            if (!this.UseKeyValues && !this.UseCommaSeparatedList)
                 toEmit = this.Model.map(function (m) { return m.id; });
-            else
+            else if (this.UseKeyValues)
                 toEmit = this.Model.map(function (m) { return ({ id: m.id, description: m.itemName }); });
+            else if (this.UseCommaSeparatedList)
+                toEmit = this.Model.map(function (m) { return m.id; }).join(',');
             _super.prototype.changed.call(this, toEmit);
             _super.prototype.finalized.call(this);
         };
@@ -3278,7 +3443,8 @@
     ]; };
     FormMultiSelectComponent.propDecorators = {
         SelectLabel: [{ type: core.Input }],
-        UseKeyValues: [{ type: core.Input }]
+        UseKeyValues: [{ type: core.Input }],
+        UseCommaSeparatedList: [{ type: core.Input }]
     };
 
     /** Componente che presenta una casella di testo tipicamente utilizzata per scrivere delle note o del log breve */
@@ -3354,6 +3520,8 @@
             _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 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
@@ -3380,7 +3548,8 @@
                 });
                 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
@@ -3405,7 +3574,10 @@
                 if (t && t.length > 0) {
                     _this.Source = t;
                     _this.tryBindSourceDisplay();
-                    setTimeout(function () { _this.finalizeValue(_this.Model); });
+                    if (!_this.Multi)
+                        setTimeout(function () { _this.finalizeValue(_this.Model); });
+                    else
+                        _this.cdr.markForCheck();
                 }
             });
         };
@@ -3421,7 +3593,8 @@
                 return;
             }
             // Quando filtro la source, se non devo ignorare l'evento devo comunque assicurarmi di impostare il valore selezionato a null
-            _super.prototype.changed.call(this, null);
+            if (!this.Multi)
+                _super.prototype.changed.call(this, null);
             if (!event && this.MinChars == 0 && !this.SearchFunction) {
                 this.FilteredBoundSource = this.BoundSource;
                 return;
@@ -3479,7 +3652,10 @@
         FormAutocompleteComponent.prototype.changed = function (forcedValue, markForCheck) {
             if (forcedValue === void 0) { forcedValue = null; }
             if (markForCheck === void 0) { markForCheck = false; }
-            this.ignoreNextWriteValue = true;
+            if (!this.Multi)
+                this.ignoreNextWriteValue = true;
+            if (forcedValue == "" && this.Multi)
+                this.Model = "";
             _super.prototype.changed.call(this, forcedValue, markForCheck);
         };
         /** @ignore */
@@ -3498,7 +3674,7 @@
     FormAutocompleteComponent.decorators = [
         { type: core.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               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: localizations.LocalizationService, useClass: FormAutocompleteComponentLoc }],
                     changeDetection: core.ChangeDetectionStrategy.OnPush
                 },] }
@@ -3518,7 +3694,8 @@
         SearchFunction: [{ type: core.Input }],
         MinChars: [{ type: core.Input }],
         RequiredPlaceholder: [{ type: core.Input }],
-        CaseSensitive: [{ type: core.Input }]
+        CaseSensitive: [{ type: core.Input }],
+        Multi: [{ type: core.Input }]
     };
 
     /** Componente che identifica la selezione di un orario */
@@ -3652,6 +3829,7 @@
         FormMultiSelectComponent,
         FormFileComponent,
         ValidationAutocompleteComponent,
+        ValidationAutocompleteMultiComponent,
         FormAutocompleteComponent,
         FormDateTimeComponent,
         ValidationDateTimeComponent,
@@ -3665,6 +3843,9 @@
         forms.FormsModule,
         localizations.LocalizationModule,
         input.MatInputModule,
+        chips.MatChipsModule,
+        icon.MatIconModule,
+        checkbox.MatCheckboxModule,
         datepicker.MatDatepickerModule,
         materialDayjsAdapter.MatDayjsDateModule,
         tooltip.TooltipModule,
@@ -3749,7 +3930,8 @@
     exports.ɵj = FormMultiSelectComponent;
     exports.ɵk = FormMultiSelectComponentLoc;
     exports.ɵl = FormFileComponentLoc;
-    exports.ɵm = FormAutocompleteComponentLoc;
+    exports.ɵm = ValidationAutocompleteMultiComponent;
+    exports.ɵn = FormAutocompleteComponentLoc;
 
     Object.defineProperty(exports, '__esModule', { value: true });