@esfaenza/forms-and-validations 12.2.25 → 12.2.29

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

@@ -961,8 +961,10 @@
                 var date = null;
                 if (this.useJsDates) {
                     date = this.dateExts.getDateConvertion(value);
-                    this.propagateChange(date);
-                    this.inputChange.emit(date);
+                    if (date) {
+                        this.propagateChange(date.toDate());
+                        this.inputChange.emit(date.toDate());
+                    }
                 }
                 else
                     date = dayjs(value, this.lc.token("getSmallDateFormat"));
@@ -1528,10 +1530,6 @@
              * @ignore
              */
             _this.onTouched = function () { }; //placeholder on touched function
-            //******************** Funzione di throttling per non spammare richieste in caso di animazioni attivate
-            //TODO: spostarla in un metodo di utilità (esfaenza/extensions)
-            /** @ignore */
-            _this.executionTimers = {};
             return _this;
         }
         /**
@@ -1615,15 +1613,6 @@
         ValidationAutocompleteComponent.prototype.registerOnTouched = function (fn) {
             this.onTouched = fn;
         };
-        /** @ignore */
-        ValidationAutocompleteComponent.prototype.throttla = function (id, func, throttleTime) {
-            var _this = this;
-            //Se ho la funzione che vuole eseguire ripulisco quel timeout
-            if (this.executionTimers[id])
-                clearTimeout(this.executionTimers[id]);
-            //Ricreo il timeout per eseguire quella funzione dopo throttleTime millisecondi
-            this.executionTimers[id] = setTimeout(function () { func(); _this.executionTimers[id] = null; }, throttleTime);
-        };
         return ValidationAutocompleteComponent;
     }(BaseValidation));
     ValidationAutocompleteComponent.decorators = [
@@ -1782,6 +1771,14 @@
              * Evento chiamato alla modifica del valore collegato a questo campo
              */
             this.inputChange = new core.EventEmitter();
+            /**
+             * Cache delle condizioni scritte tipo :prop?(Roba con {prop})
+             */
+            this.BindCheckingGroups = [];
+            /**
+             * Cache delle proprietà scritte tipo --> {prop}
+             */
+            this.BindProperties = [];
             if (ngControl == null) {
                 if (!this.handleNullNgControl())
                     console.error("ngControl nullo per qualche motivo! Il 90% delle funzionalità di questo input saranno disabilitate");
@@ -1885,35 +1882,65 @@
             // Cache locale per evitare di rifare dei regex.match ogni santa volta
             if (this.Source.length > 0) {
                 this.BoundSource = [];
-                // Blocco per tirare fuori le condizioni scritte tipo --> :prop?(Roba con {prop})
-                var iffedMatches = this.Display.match(/:([a-z]+)\?\(([^\(\)]+)\)/g);
-                var bindCheckingGroups = [];
-                if (iffedMatches) {
-                    iffedMatches.forEach(function (m) {
-                        // Stessa regex di sopra ma il tag "i" serve per tirare fuori i singoli capturing group e per qualche motivo 
-                        // new RegExp(baseRegex, "g") non funziona quindi non ho potuto razionalizzarlo
-                        var groups = m.match(/:([a-z]+)\?\(([^\(\)]+)\)/i);
-                        bindCheckingGroups.push({ global: m, prop: groups[1], whenexists: groups[2] });
-                    });
-                }
-                // Blocco per tirare fuori le proprietà scritte tipo --> {prop}
-                var bindProperties = [];
-                var matches = this.Display.match(/{[a-z]+}/gi);
-                if (matches)
-                    matches.forEach(function (m) { bindProperties.push({ global: m, prop: m.substring(1, m.length - 1) }); });
+                if (this.BindCheckingGroups.length == 0)
+                    this.evaluateBindCheckingGroups();
+                if (this.BindProperties.length == 0)
+                    this.evaluateBindProperties();
                 // Blocco per generare la descrizione finale di un elemento
                 this.Source.forEach(function (s) {
-                    // Parto sempre dalla variabile di Display, poi sostituisco pezzo per pezzo
-                    var desc = _this.Display;
-                    // Taglio o mantengo le condizioni in base alla proprietà su cui fare check
-                    // Dopodiché scrivo tutte le proprietà
-                    bindCheckingGroups.forEach(function (t) { desc = desc.replace(t.global, (s[t.prop] != null && s[t.prop] != undefined) ? t.whenexists : ""); });
-                    bindProperties.forEach(function (t) { desc = desc.replace(t.global, s[t.prop]); });
                     // Aggiungo alla BoundSource in formato standard KeyValue
-                    _this.BoundSource.push({ id: s[_this.IdField], description: desc });
+                    _this.BoundSource.push(_this.transformSourceItem(s));
                 });
             }
         };
+        /**
+         * Valuta il contenuto della variabile BindCheckingGroups
+         */
+        BaseFormControl.prototype.evaluateBindCheckingGroups = function () {
+            var _this = this;
+            // Blocco per tirare fuori le condizioni scritte tipo --> :prop?(Roba con {prop})
+            var iffedMatches = this.Display.match(/:([a-z]+)\?\(([^\(\)]+)\)/g);
+            if (iffedMatches) {
+                iffedMatches.forEach(function (m) {
+                    // Stessa regex di sopra ma il tag "i" serve per tirare fuori i singoli capturing group e per qualche motivo 
+                    // new RegExp(baseRegex, "g") non funziona quindi non ho potuto razionalizzarlo
+                    var groups = m.match(/:([a-z]+)\?\(([^\(\)]+)\)/i);
+                    _this.BindCheckingGroups.push({ global: m, prop: groups[1], whenexists: groups[2] });
+                });
+            }
+        };
+        /**
+         * Valuta il contenuto della variabile BindProperties
+         */
+        BaseFormControl.prototype.evaluateBindProperties = function () {
+            var _this = this;
+            // Blocco per tirare fuori le proprietà scritte tipo --> {prop}
+            var matches = this.Display.match(/{[a-z]+}/gi);
+            if (matches)
+                matches.forEach(function (m) { _this.BindProperties.push({ global: m, prop: m.substring(1, m.length - 1) }); });
+        };
+        /**
+         * Trasforma un oggetto della Source alla sua versione "nuova" basandosi sulle informazioni su gruppi e proprietà
+         *
+         * @param {any} item Oggetto da trasformare
+         *
+         * @returns {{id: string, description: string}} Oggetto finale trasformato
+         */
+        BaseFormControl.prototype.transformSourceItem = function (s) {
+            // Parto sempre dalla variabile di Display, poi sostituisco pezzo per pezzo
+            var desc = this.Display;
+            // Taglio o mantengo le condizioni in base alla proprietà su cui fare check
+            // Dopodiché scrivo tutte le proprietà
+            for (var i = 0; i < this.BindCheckingGroups.length; i++) {
+                var t = this.BindCheckingGroups[i];
+                desc = desc.replace(t.global, (s[t.prop] != null && s[t.prop] != undefined) ? t.whenexists : "");
+            }
+            for (var i = 0; i < this.BindProperties.length; i++) {
+                var t = this.BindProperties[i];
+                desc = desc.replace(t.global, s[t.prop]);
+            }
+            return { id: s[this.IdField], description: desc };
+        };
         /**
          * Indica se il comopnente in questione è in grado di gestire ngControl nulli.
          * Di default è **false**
@@ -2322,10 +2349,23 @@
              * Numero minimo di caratteri con cui cercare
              */
             _this.MinChars = 3;
+            /**
+             * Indica se i controlli devono essere effettuati tenendo conto del Case o meno. Vale solo qualora la **Source** fosse fornita
+             */
+            _this.CaseSensitive = false;
             /**
              * Variabile interna che gestisce se effettuare il riallineamento dei dati o meno
              */
             _this.alignValues = 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
+             */
+            _this.ignoreNextWriteValue = false;
+            /**
+             * Cache della sorgente originale POST binding, in modo da poter fare filtri in locale qualora la **SearchFunction** non fosse definita e la **Source** fosse assegnata
+             */
+            _this.FilteredBoundSource = [];
             //******************** Funzione di throttling per non spammare richieste in caso di animazioni attivate
             //TODO: spostarla in un metodo di utilità (esfaenza/extensions)
             /** @ignore */
@@ -2337,13 +2377,21 @@
          * @ignore
          */
         FormAdaptiveComponent.prototype.ngOnChanges = function (changes) {
+            var _a;
             return __awaiter(this, void 0, void 0, function () {
                 var newSource, newType;
-                return __generator(this, function (_a) {
+                return __generator(this, function (_b) {
                     newSource = changes["Source"];
                     newType = changes["Type"];
-                    if (newSource)
+                    if (newSource) {
                         this.tryBindSourceDisplay();
+                        // Prima assegnazione se cambia la source sotto (quindi se viene bindata direttamente da HTML)
+                        if (this.Type == "autocomplete" && (((_a = this.Model) === null || _a === void 0 ? void 0 : _a.length) || 0) >= this.MinChars && !this.SearchFunction)
+                            this.FilteredBoundSource = this.BoundSource;
+                        else
+                            this.FilteredBoundSource = [];
+                        this.cdr.markForCheck();
+                    }
                     if (newType && this.Model)
                         this.writeValue(this.Model);
                     return [2 /*return*/];
@@ -2366,20 +2414,22 @@
                 this.alignValues = true;
             }
             if (this.Type == "time") {
-                var _a = __read((obj || "0:0:0").split(":"), 3), hours = _a[0], minutes = _a[1], seconds = _a[2];
+                var _b = __read((obj || "0:0:0").split(":"), 3), hours = _b[0], minutes = _b[1], seconds = _b[2];
                 obj = dayjs().hour(hours !== null && hours !== void 0 ? hours : 0).minute(minutes !== null && minutes !== void 0 ? minutes : 0).second(seconds !== null && seconds !== void 0 ? seconds : 0);
             }
             if (this.Type == "file")
                 obj = this.ModelFile;
             if (this.Type == "autocomplete") {
-                this.SearchFunction(obj, true).subscribe(function (t) {
-                    _this.Source = t;
-                    setTimeout(function () {
-                        var val = _this.Source.find(function (t) { return t.id == obj; });
-                        _this.propagateChange(val ? val.id : obj);
-                        _this.Model = val ? val.description : obj;
+                if (this.SearchFunction) {
+                    this.SearchFunction(obj, true).subscribe(function (t) {
+                        _this.Source = t;
+                        _this.tryBindSourceDisplay();
+                        setTimeout(function () { _this.finalizeValue(obj); });
                     });
-                });
+                    return;
+                }
+                else
+                    this.finalizeValue(obj);
             }
             _super.prototype.writeValue.call(this, obj);
             if (this.alignValues) {
@@ -2387,6 +2437,16 @@
                 this.cdr.markForCheck();
             }
         };
+        /**
+         * 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
+         *
+         * @param {any} value Valore scritto nell'input di testo
+         */
+        FormAdaptiveComponent.prototype.finalizeValue = function (value) {
+            var val = this.Source.find(function (t) { return t.id == value; });
+            this.propagateChange(val ? val.id : value);
+            this.Model = val ? val.description : value;
+        };
         /**
          * Evento di filtro della sorgente dati in base all'input utente
          *
@@ -2394,18 +2454,40 @@
          */
         FormAdaptiveComponent.prototype.filterSource = function (event) {
             var _this = this;
-            if (event.length < this.MinChars) {
-                this.Source = [];
+            if (this.ignoreNextWriteValue) {
+                this.ignoreNextWriteValue = false;
+                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, "");
+            if (!event && this.MinChars == 0 && !this.SearchFunction) {
+                this.FilteredBoundSource = this.BoundSource;
                 return;
             }
-            if (!this.SearchFunction)
+            if (!event || event.length < this.MinChars) {
+                this.FilteredBoundSource = [];
+                return;
+            }
+            if (!this.SearchFunction && (!this.Source || this.Source.length == 0))
                 throw "Impossibile filtrare gli elementi senza una funzione di ricerca che restituisca una lista di { id: string, description: string }";
-            this.throttla("filtersource", function () {
-                _this.SearchFunction(event, false).subscribe(function (t) {
-                    _this.Source = t;
-                    _this.tryBindSourceDisplay();
-                });
-            }, 400);
+            if (this.SearchFunction) {
+                this.throttla("filtersource", function () {
+                    _this.SearchFunction(event, false).subscribe(function (t) {
+                        _this.Source = t;
+                        _this.tryBindSourceDisplay();
+                        // In questo caso è già filtrata dalla SearchFunction
+                        _this.FilteredBoundSource = _this.BoundSource;
+                        _this.cdr.markForCheck();
+                    });
+                }, 400);
+            }
+            else {
+                this.throttla("filtersource", function () {
+                    // In questo caso devo filtrare io in memoria
+                    _this.FilteredBoundSource = _this.BoundSource.filter(function (t) { return (_this.CaseSensitive && t.description.includes(event)) || (!_this.CaseSensitive && t.description.toLowerCase().includes(event.toLowerCase())); });
+                    _this.cdr.markForCheck();
+                }, 100);
+            }
         };
         /**
          * Metodo richiamato quando viene modificato il modello del campo di input
@@ -2420,6 +2502,8 @@
                 var toEmit = this.dateAdapter.clone(this.Model);
                 toEmit = toEmit.format("HH:mm:ss");
             }
+            if (this.Type == "autocomplete")
+                this.ignoreNextWriteValue = true;
             _super.prototype.changed.call(this, toEmit);
         };
         /**
@@ -2474,7 +2558,7 @@
         { type: core.Component, args: [{
                     selector: "form-adaptive",
                     providers: [{ provide: localizations.LocalizationService, useClass: FormAdaptiveComponentLoc }],
-                    template: "<ng-container *ngIf=\"!FormLayout\">\r\n    <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\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}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n    <div class=\"col-md-{{InputColWidth}}\">\r\n        <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n    <div *ngIf=\"!Type\" class=\"app-margin-top-5\">\r\n        <em>{{TypeMissingMessage}}</em>\r\n    </div>\r\n   \r\n     <!--Se currency-->\r\n     <div *ngIf=\"Type == 'currency'\">\r\n        <val-currency [forceInvalid]=\"ForcedError\"\r\n        [CurrencyOptions]=\"{ prefix: '', thousands: '.', decimal: ',', precision: Precision, align: Alignment }\" [noValidate]=\"!Validation\"\r\n        #validationControl=\"ngModel\" type=\"text\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [required]=\"Required\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\"></val-currency>\r\n    </div>\r\n    <!--Se data-->\r\n    <div *ngIf=\"Type == 'date'\">\r\n        <val-date #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [required]=\"Required\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\"></val-date>\r\n    </div>\r\n    <!--Se stringa-->\r\n    <div *ngIf=\"Type == 'string'\">\r\n        <val-input #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" type=\"text\" pattern=\"{{Pattern || ''}}\" [required]=\"Required\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\"></val-input>\r\n    </div>\r\n    <!--Se numero-->\r\n    <div *ngIf=\"Type == 'float' || Type == 'number'\">\r\n        <val-input #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" type=\"text\" pattern=\"{{Pattern || '^([0-9]*[,])?[0-9]+$'}}\" [required]=\"Required\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\"></val-input>\r\n    </div>\r\n    <!--Se numero intero-->\r\n    <div *ngIf=\"Type == 'int'\">\r\n        <val-input #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" type=\"text\" pattern=\"{{Pattern || '^[0-9]\\\\d*$'}}\" [required]=\"Required\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\"></val-input>\r\n    </div>\r\n    <!--Se boolean-->\r\n    <div class=\"m-t-5\" *ngIf=\"Type == 'boolean'\">\r\n        <input #validationControl=\"ngModel\" [readonly]=\"Readonly\" type=\"checkbox\" class=\"app-pointer\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" (ngModelChange)=\"changed();\" />\r\n    </div>\r\n    <!--Se enum-->\r\n    <div *ngIf=\"Type == 'enum'\">\r\n        <val-select #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [placeHolderValue]=\"''\" [placeholder]=\"Required ? ('Select' | localize : lc) + '...' : Placeholder\" [required]=\"Required\" [(ngModel)]=\"Model\" (inputChange)=\"changed();\" name=\"{{GeneratedName}}\">\r\n            <option *ngFor=\"let val of BoundSource\" [value]=\"val.id\">{{val.description}}</option>\r\n        </val-select>\r\n    </div>\r\n    <!--Se autocomplete-->\r\n    <div *ngIf=\"Type == 'autocomplete'\">\r\n        <val-autocomplete #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [required]=\"Required\" [placeholder]=\"Required ? ('Select' | localize : lc) + '...' : Placeholder\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" [FilteredSource]=\"BoundSource\" (inputChange)=\"filterSource($event); changed();\"></val-autocomplete>\r\n    </div>\r\n    <!--Se date time-->\r\n    <div *ngIf=\"Type == 'datetime'\">\r\n        <val-datetime #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [required]=\"Required\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\"></val-datetime>\r\n    </div>\r\n    <!--Se time-->\r\n    <div *ngIf=\"Type == 'time'\">\r\n        <ngx-mat-timepicker name=\"val-time\" #elementRef #baseInput=\"ngModel\" [(ngModel)]=\"Model\" [disabled]=\"Readonly\"\r\n        [showSpinners]=\"false\" [stepHour]=\"2\" [stepMinute]=\"5\" [stepSecond]=\"30\"\r\n        [showSeconds]=\"true\" (ngModelChange)=\"changed()\" #validationControl=\"ngModel\">\r\n        </ngx-mat-timepicker>\r\n    </div>\r\n    <!--Se file-->\r\n    <div *ngIf=\"Type == 'file'\">\r\n        <div class=\"input-group file-upload\">\r\n            <input type=\"file\" (change)=\"fileChange()\" #fileInput class=\"file-upload-btn app-pointer\" [multiple]=\"null\"/>\r\n            <input type=\"text\" [class.frm-padding-left-22]=\"AllowDownload && ModelFile.filename && ModelFile.fileb64\" class=\"form-control checking-field\" placeholder=\"{{'Select a file' | localize : lc}}...\" [(ngModel)]=\"ModelFile.filename\" name=\"dsfile\" #validationControl=\"ngModel\" [required]=\"Required\"/>\r\n    \r\n            <a class=\"fa fa-download app-pointer app-input-icon\" *ngIf=\"AllowDownload && ModelFile.filename && ModelFile.fileb64\" (click)=\"downloadAttachment()\"></a>\r\n            <i class=\"fa fa-times delete-file\" (click)=\"fileChange(true)\" *ngIf=\"ModelFile.filename\"></i>\r\n            <span class=\"input-group-btn\">\r\n                <button class=\"btn btn-primary btn-file-upload\" type=\"button\"><i class=\"fa fa-upload\"></i></button>\r\n            </span>\r\n        </div>\r\n    </div>\r\n</ng-template>",
+                    template: "<ng-container *ngIf=\"!FormLayout\">\r\n    <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\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}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n    <div class=\"col-md-{{InputColWidth}}\">\r\n        <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n    <div *ngIf=\"!Type\" class=\"app-margin-top-5\">\r\n        <em>{{TypeMissingMessage}}</em>\r\n    </div>\r\n   \r\n     <!--Se currency-->\r\n     <div *ngIf=\"Type == 'currency'\">\r\n        <val-currency [forceInvalid]=\"ForcedError\"\r\n        [CurrencyOptions]=\"{ prefix: '', thousands: '.', decimal: ',', precision: Precision, align: Alignment }\" [noValidate]=\"!Validation\"\r\n        #validationControl=\"ngModel\" type=\"text\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [required]=\"Required\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\"></val-currency>\r\n    </div>\r\n    <!--Se data-->\r\n    <div *ngIf=\"Type == 'date'\">\r\n        <val-date #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [required]=\"Required\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\"></val-date>\r\n    </div>\r\n    <!--Se stringa-->\r\n    <div *ngIf=\"Type == 'string'\">\r\n        <val-input #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" type=\"text\" pattern=\"{{Pattern || ''}}\" [required]=\"Required\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\"></val-input>\r\n    </div>\r\n    <!--Se numero-->\r\n    <div *ngIf=\"Type == 'float' || Type == 'number'\">\r\n        <val-input #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" type=\"text\" pattern=\"{{Pattern || '^([0-9]*[,])?[0-9]+$'}}\" [required]=\"Required\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\"></val-input>\r\n    </div>\r\n    <!--Se numero intero-->\r\n    <div *ngIf=\"Type == 'int'\">\r\n        <val-input #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" type=\"text\" pattern=\"{{Pattern || '^[0-9]\\\\d*$'}}\" [required]=\"Required\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\"></val-input>\r\n    </div>\r\n    <!--Se boolean-->\r\n    <div class=\"m-t-5\" *ngIf=\"Type == 'boolean'\">\r\n        <input #validationControl=\"ngModel\" [readonly]=\"Readonly\" type=\"checkbox\" class=\"app-pointer\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" (ngModelChange)=\"changed();\" />\r\n    </div>\r\n    <!--Se enum-->\r\n    <div *ngIf=\"Type == 'enum'\">\r\n        <val-select #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [placeHolderValue]=\"''\" [placeholder]=\"Required ? ('Select' | localize : lc) + '...' : Placeholder\" [required]=\"Required\" [(ngModel)]=\"Model\" (inputChange)=\"changed();\" name=\"{{GeneratedName}}\">\r\n            <option *ngFor=\"let val of BoundSource\" [value]=\"val.id\">{{val.description}}</option>\r\n        </val-select>\r\n    </div>\r\n    <!--Se autocomplete-->\r\n    <div *ngIf=\"Type == 'autocomplete'\">\r\n        <val-autocomplete #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [required]=\"Required\" [placeholder]=\"Required ? ('Select' | localize : lc) + '...' : Placeholder\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" [FilteredSource]=\"FilteredBoundSource\" (inputChange)=\"filterSource($event); changed();\"></val-autocomplete>\r\n    </div>\r\n    <!--Se date time-->\r\n    <div *ngIf=\"Type == 'datetime'\">\r\n        <val-datetime #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [required]=\"Required\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\"></val-datetime>\r\n    </div>\r\n    <!--Se time-->\r\n    <div *ngIf=\"Type == 'time'\">\r\n        <ngx-mat-timepicker name=\"val-time\" #elementRef #baseInput=\"ngModel\" [(ngModel)]=\"Model\" [disabled]=\"Readonly\"\r\n        [showSpinners]=\"false\" [stepHour]=\"2\" [stepMinute]=\"5\" [stepSecond]=\"30\"\r\n        [showSeconds]=\"true\" (ngModelChange)=\"changed()\" #validationControl=\"ngModel\">\r\n        </ngx-mat-timepicker>\r\n    </div>\r\n    <!--Se file-->\r\n    <div *ngIf=\"Type == 'file'\">\r\n        <div class=\"input-group file-upload\">\r\n            <input type=\"file\" (change)=\"fileChange()\" #fileInput class=\"file-upload-btn app-pointer\" [multiple]=\"null\"/>\r\n            <input type=\"text\" [class.frm-padding-left-22]=\"AllowDownload && ModelFile.filename && ModelFile.fileb64\" class=\"form-control checking-field\" placeholder=\"{{'Select a file' | localize : lc}}...\" [(ngModel)]=\"ModelFile.filename\" name=\"dsfile\" #validationControl=\"ngModel\" [required]=\"Required\"/>\r\n    \r\n            <a class=\"fa fa-download app-pointer app-input-icon\" *ngIf=\"AllowDownload && ModelFile.filename && ModelFile.fileb64\" (click)=\"downloadAttachment()\"></a>\r\n            <i class=\"fa fa-times delete-file\" (click)=\"fileChange(true)\" *ngIf=\"ModelFile.filename\"></i>\r\n            <span class=\"input-group-btn\">\r\n                <button class=\"btn btn-primary btn-file-upload\" type=\"button\"><i class=\"fa fa-upload\"></i></button>\r\n            </span>\r\n        </div>\r\n    </div>\r\n</ng-template>",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     styles: [".frm-padding-left-22{padding-left:22px}\n"]
                 },] }
@@ -2499,7 +2583,8 @@
         Precision: [{ type: core.Input }],
         Alignment: [{ type: core.Input }],
         SearchFunction: [{ type: core.Input }],
-        MinChars: [{ type: core.Input }]
+        MinChars: [{ type: core.Input }],
+        CaseSensitive: [{ type: core.Input }]
     };
 
     // Angular
@@ -3086,7 +3171,8 @@
                 text: this.SelectLabel || this.lc.loc("Select one or more values..."),
                 enableCheckAll: true,
                 disabled: disabled,
-                labelKey: "description"
+                labelKey: "description",
+                tagToBody: false
             };
         };
         /**
@@ -3246,11 +3332,19 @@
              * Override del placeholder per select requried
              */
             _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 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
              */
             _this.ignoreNextWriteValue = false;
+            /**
+             * Sorgente Bindata Filtrata in base al contenuto della casella di testo
+             */
+            _this.FilteredBoundSource = [];
             //******************** Funzione di throttling per non spammare richieste in caso di animazioni attivate
             //TODO: spostarla in un metodo di utilità (esfaenza/extensions)
             /** @ignore */
@@ -3262,16 +3356,27 @@
          */
         FormAutocompleteComponent.prototype.writeValue = function (value) {
             var _this = this;
-            if (value) {
+            if (!value)
+                return;
+            if (this.SearchFunction) {
                 this.SearchFunction(value, true).subscribe(function (t) {
                     _this.Source = t;
-                    setTimeout(function () {
-                        var val = _this.Source.find(function (t) { return t.id == value; });
-                        _this.propagateChange(val ? val.id : value);
-                        _this.Model = val ? val.description : value;
-                    });
+                    _this.tryBindSourceDisplay();
+                    setTimeout(function () { _this.finalizeValue(value); });
                 });
+                return;
             }
+            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
+         *
+         * @param {any} value Valore scritto nell'input di testo
+         */
+        FormAutocompleteComponent.prototype.finalizeValue = function (value) {
+            var val = this.Source.find(function (t) { return t.id == value; });
+            this.propagateChange(val ? val.id : value);
+            this.Model = val ? val.description : value;
         };
         /**
          * Evento di filtro della sorgente dati in base all'input utente
@@ -3286,18 +3391,50 @@
             }
             // 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, "");
+            if (!event && this.MinChars == 0 && !this.SearchFunction) {
+                this.FilteredBoundSource = this.BoundSource;
+                return;
+            }
             if (!event || event.length < this.MinChars) {
-                this.Source = [];
+                this.FilteredBoundSource = [];
                 return;
             }
-            if (!this.SearchFunction)
+            if (!this.SearchFunction && (!this.Source || this.Source.length == 0))
                 throw "Impossibile filtrare gli elementi senza una funzione di ricerca che restituisca una lista di { id: string, description: string }";
-            this.throttla("filtersource", function () {
-                _this.SearchFunction(event, false).subscribe(function (t) {
-                    _this.Source = t;
-                    _this.tryBindSourceDisplay();
-                });
-            }, 400);
+            if (this.SearchFunction) {
+                this.throttla("filtersource", function () {
+                    _this.SearchFunction(event, false).subscribe(function (t) {
+                        _this.Source = t;
+                        _this.tryBindSourceDisplay();
+                        // In questo caso è già filtrata dalla SearchFunction
+                        _this.FilteredBoundSource = _this.BoundSource;
+                        _this.cdr.markForCheck();
+                    });
+                }, 400);
+            }
+            else {
+                this.throttla("filtersource", function () {
+                    // In questo caso devo filtrare io in memoria
+                    _this.FilteredBoundSource = _this.BoundSource.filter(function (t) { return (_this.CaseSensitive && t.description.includes(event)) || (!_this.CaseSensitive && t.description.toLowerCase().includes(event.toLowerCase())); });
+                    _this.cdr.markForCheck();
+                }, 100);
+            }
+        };
+        /**
+         * @ignore
+         */
+        FormAutocompleteComponent.prototype.ngOnChanges = function (changes) {
+            var _a;
+            var newSource = changes["Source"];
+            if (newSource) {
+                this.tryBindSourceDisplay();
+                // Prima assegnazione se cambia la source sotto (quindi se viene bindata direttamente da HTML)
+                if ((((_a = this.Model) === null || _a === void 0 ? void 0 : _a.length) || 0) >= this.MinChars && !this.SearchFunction)
+                    this.FilteredBoundSource = this.BoundSource;
+                else
+                    this.FilteredBoundSource = [];
+                this.cdr.markForCheck();
+            }
         };
         /**
          * @ignore
@@ -3328,7 +3465,7 @@
     FormAutocompleteComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "form-autocomplete",
-                    template: "<ng-container *ngIf=\"!FormLayout\">\r\n    <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\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}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n    <div class=\"col-md-{{InputColWidth}}\">\r\n        <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n    <val-autocomplete [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               name=\"{{GeneratedName}}\"\r\n               #validationControl=\"ngModel\"\r\n               (inputChange)=\"filterSource($event);\"\r\n               (optionChange)=\"changed($event);\"\r\n               [placeholder]=\"Required ? ((RequiredPlaceholder != null ? RequiredPlaceholder : ('Select' | localize : lc) + '...')) : Placeholder\"\r\n               [validationFailed]=\"FailedValidationMessage\"\r\n               [FilteredSource]=\"BoundSource\"\r\n               >\r\n    </val-autocomplete>\r\n</ng-template>",
+                    template: "<ng-container *ngIf=\"!FormLayout\">\r\n    <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\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}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n    <div class=\"col-md-{{InputColWidth}}\">\r\n        <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n    <val-autocomplete [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               name=\"{{GeneratedName}}\"\r\n               #validationControl=\"ngModel\"\r\n               (inputChange)=\"filterSource($event);\"\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>",
                     providers: [{ provide: localizations.LocalizationService, useClass: FormAutocompleteComponentLoc }],
                     changeDetection: core.ChangeDetectionStrategy.OnPush
                 },] }
@@ -3346,7 +3483,8 @@
         SelectLabel: [{ type: core.Input }],
         SearchFunction: [{ type: core.Input }],
         MinChars: [{ type: core.Input }],
-        RequiredPlaceholder: [{ type: core.Input }]
+        RequiredPlaceholder: [{ type: core.Input }],
+        CaseSensitive: [{ type: core.Input }]
     };
 
     /**