@esfaenza/forms-and-validations 12.2.26 → 12.2.31

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

@@ -1179,10 +1179,6 @@ class ValidationAutocompleteComponent extends BaseValidation {
          * @ignore
          */
         this.onTouched = () => { }; //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 = {};
     }
     /**
      * @ignore
@@ -1264,14 +1260,6 @@ class ValidationAutocompleteComponent extends BaseValidation {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
-    /** @ignore */
-    throttla(id, func, throttleTime) {
-        //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(() => { func(); this.executionTimers[id] = null; }, throttleTime);
-    }
 }
 ValidationAutocompleteComponent.decorators = [
     { type: Component, args: [{
@@ -1428,6 +1416,14 @@ class BaseFormControl {
          * Evento chiamato alla modifica del valore collegato a questo campo
          */
         this.inputChange = new 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");
@@ -1514,35 +1510,63 @@ class BaseFormControl {
         // 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(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
-                    let 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(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(s => {
-                // Parto sempre dalla variabile di Display, poi sostituisco pezzo per pezzo
-                let desc = this.Display;
-                // Taglio o mantengo le condizioni in base alla proprietà su cui fare check
-                // Dopodiché scrivo tutte le proprietà
-                bindCheckingGroups.forEach(t => { desc = desc.replace(t.global, (s[t.prop] != null && s[t.prop] != undefined) ? t.whenexists : ""); });
-                bindProperties.forEach(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
+     */
+    evaluateBindCheckingGroups() {
+        // Blocco per tirare fuori le condizioni scritte tipo --> :prop?(Roba con {prop})
+        var iffedMatches = this.Display.match(/:([a-z]+)\?\(([^\(\)]+)\)/g);
+        if (iffedMatches) {
+            iffedMatches.forEach(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
+                let groups = m.match(/:([a-z]+)\?\(([^\(\)]+)\)/i);
+                this.BindCheckingGroups.push({ global: m, prop: groups[1], whenexists: groups[2] });
+            });
+        }
+    }
+    /**
+     * Valuta il contenuto della variabile BindProperties
+     */
+    evaluateBindProperties() {
+        // Blocco per tirare fuori le proprietà scritte tipo --> {prop}
+        var matches = this.Display.match(/{[a-z]+}/gi);
+        if (matches)
+            matches.forEach(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
+     */
+    transformSourceItem(s) {
+        // Parto sempre dalla variabile di Display, poi sostituisco pezzo per pezzo
+        let desc = this.Display;
+        // Taglio o mantengo le condizioni in base alla proprietà su cui fare check
+        // Dopodiché scrivo tutte le proprietà
+        for (let i = 0; i < this.BindCheckingGroups.length; i++) {
+            let t = this.BindCheckingGroups[i];
+            desc = desc.replace(t.global, (s[t.prop] != null && s[t.prop] != undefined) ? t.whenexists : "");
+        }
+        for (let i = 0; i < this.BindProperties.length; i++) {
+            let 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**
@@ -1934,10 +1958,23 @@ class FormAdaptiveComponent extends BaseFormControl {
          * 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 */
@@ -1948,11 +1985,19 @@ class FormAdaptiveComponent extends BaseFormControl {
      * @ignore
      */
     ngOnChanges(changes) {
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
             const newSource = changes["Source"];
             const 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);
         });
@@ -1978,14 +2023,16 @@ class FormAdaptiveComponent extends BaseFormControl {
         if (this.Type == "file")
             obj = this.ModelFile;
         if (this.Type == "autocomplete") {
-            this.SearchFunction(obj, true).subscribe(t => {
-                this.Source = t;
-                setTimeout(() => {
-                    var val = this.Source.find(t => t.id == obj);
-                    this.propagateChange(val ? val.id : obj);
-                    this.Model = val ? val.description : obj;
+            if (this.SearchFunction) {
+                this.SearchFunction(obj, true).subscribe(t => {
+                    this.Source = t;
+                    this.tryBindSourceDisplay();
+                    setTimeout(() => { this.finalizeValue(obj); });
                 });
-            });
+                return;
+            }
+            else
+                this.finalizeValue(obj);
         }
         super.writeValue(obj);
         if (this.alignValues) {
@@ -1993,24 +2040,56 @@ class FormAdaptiveComponent extends BaseFormControl {
             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
+     */
+    finalizeValue(value) {
+        var val = this.Source.find(t => 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
      *
      * @param {string} event Input utente
      */
     filterSource(event) {
-        if (event.length < this.MinChars) {
-            this.Source = [];
+        if (this.ignoreNextWriteValue) {
+            this.ignoreNextWriteValue = false;
             return;
         }
-        if (!this.SearchFunction)
+        // Quando filtro la source, se non devo ignorare l'evento devo comunque assicurarmi di impostare il valore selezionato a null
+        super.changed("");
+        if (!event && this.MinChars == 0 && !this.SearchFunction) {
+            this.FilteredBoundSource = this.BoundSource;
+            return;
+        }
+        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", () => {
-            this.SearchFunction(event, false).subscribe(t => {
-                this.Source = t;
-                this.tryBindSourceDisplay();
-            });
-        }, 400);
+        if (this.SearchFunction) {
+            this.throttla("filtersource", () => {
+                this.SearchFunction(event, false).subscribe(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", () => {
+                // In questo caso devo filtrare io in memoria
+                this.FilteredBoundSource = this.BoundSource.filter(t => (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
@@ -2025,6 +2104,8 @@ class FormAdaptiveComponent extends BaseFormControl {
             var toEmit = this.dateAdapter.clone(this.Model);
             toEmit = toEmit.format("HH:mm:ss");
         }
+        if (this.Type == "autocomplete")
+            this.ignoreNextWriteValue = true;
         super.changed(toEmit);
     }
     /**
@@ -2076,7 +2157,7 @@ FormAdaptiveComponent.decorators = [
     { type: Component, args: [{
                 selector: "form-adaptive",
                 providers: [{ provide: 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: ChangeDetectionStrategy.OnPush,
                 styles: [".frm-padding-left-22{padding-left:22px}\n"]
             },] }
@@ -2101,7 +2182,8 @@ FormAdaptiveComponent.propDecorators = {
     Precision: [{ type: Input }],
     Alignment: [{ type: Input }],
     SearchFunction: [{ type: Input }],
-    MinChars: [{ type: Input }]
+    MinChars: [{ type: Input }],
+    CaseSensitive: [{ type: Input }]
 };
 
 // Angular
@@ -2185,7 +2267,7 @@ class FormTemplateComponent {
 FormTemplateComponent.decorators = [
     { type: Component, args: [{
                 selector: "form-template",
-                template: "<ng-container *ngIf=\"!FormLayout\">\r\n    <ng-content></ng-content>\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-content></ng-content>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>",
+                template: "<ng-container *ngIf=\"!FormLayout\">\r\n    <ng-content></ng-content>\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 ? '*' : ''}}<span *ngIf=\"Label\">:</span></label>\r\n    <div class=\"col-md-{{InputColWidth}}\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>",
                 changeDetection: ChangeDetectionStrategy.OnPush
             },] }
 ];
@@ -2653,7 +2735,8 @@ class FormMultiSelectComponent extends BaseFormControl {
             text: this.SelectLabel || this.lc.loc("Select one or more values..."),
             enableCheckAll: true,
             disabled: disabled,
-            labelKey: "description"
+            labelKey: "description",
+            tagToBody: false
         };
     }
     /**
@@ -2808,11 +2891,19 @@ class FormAutocompleteComponent extends BaseFormControl {
          * 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 */
@@ -2822,16 +2913,27 @@ class FormAutocompleteComponent extends BaseFormControl {
      * @ignore
      */
     writeValue(value) {
-        if (value) {
+        if (!value)
+            return;
+        if (this.SearchFunction) {
             this.SearchFunction(value, true).subscribe(t => {
                 this.Source = t;
-                setTimeout(() => {
-                    var val = this.Source.find(t => t.id == value);
-                    this.propagateChange(val ? val.id : value);
-                    this.Model = val ? val.description : value;
-                });
+                this.tryBindSourceDisplay();
+                setTimeout(() => { 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
+     */
+    finalizeValue(value) {
+        var val = this.Source.find(t => 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
@@ -2845,18 +2947,50 @@ class FormAutocompleteComponent extends BaseFormControl {
         }
         // Quando filtro la source, se non devo ignorare l'evento devo comunque assicurarmi di impostare il valore selezionato a null
         super.changed("");
+        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", () => {
-            this.SearchFunction(event, false).subscribe(t => {
-                this.Source = t;
-                this.tryBindSourceDisplay();
-            });
-        }, 400);
+        if (this.SearchFunction) {
+            this.throttla("filtersource", () => {
+                this.SearchFunction(event, false).subscribe(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", () => {
+                // In questo caso devo filtrare io in memoria
+                this.FilteredBoundSource = this.BoundSource.filter(t => (this.CaseSensitive && t.description.includes(event)) || (!this.CaseSensitive && t.description.toLowerCase().includes(event.toLowerCase())));
+                this.cdr.markForCheck();
+            }, 100);
+        }
+    }
+    /**
+     * @ignore
+     */
+    ngOnChanges(changes) {
+        var _a;
+        let 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
@@ -2883,7 +3017,7 @@ class FormAutocompleteComponent extends BaseFormControl {
 FormAutocompleteComponent.decorators = [
     { type: 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: LocalizationService, useClass: FormAutocompleteComponentLoc }],
                 changeDetection: ChangeDetectionStrategy.OnPush
             },] }
@@ -2901,7 +3035,8 @@ FormAutocompleteComponent.propDecorators = {
     SelectLabel: [{ type: Input }],
     SearchFunction: [{ type: Input }],
     MinChars: [{ type: Input }],
-    RequiredPlaceholder: [{ type: Input }]
+    RequiredPlaceholder: [{ type: Input }],
+    CaseSensitive: [{ type: Input }]
 };
 
 // Angular