@esfaenza/forms-and-validations 12.2.8 → 12.2.12

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

@@ -1748,6 +1748,25 @@
              * Associa il componente Form a questo input
              */
             this.Form = null;
+            /**
+             * Nome della proprietà che contiene l'Id degli oggetti bindati nella **Source**
+             */
+            this.IdField = 'id';
+            /**
+             * Espressione simil-Angular per cambiare il testo dei componenti che scelgono il proprio modello da una **Source**
+             *
+             * Il funzionamento è identico al binder di angular, solo con una graffa invece che 2.
+             * È inoltre possibile aggiungere pezzi di descrizione in maniera condizionale con la sintassi **:prop?(Prop vale {prop})**
+             */
+            this.Display = '{description}';
+            /**
+             * Risultato dell'unione fra le informazioni degli oggetti in **Source** e le impostazioni specificate nell'Input **Display**
+             */
+            this.BoundSource = [];
+            /**
+             * Indica se è il primo Bind del componente
+             */
+            this.FirstBind = true;
             /**
              * Evento chiamato alla modifica del valore collegato a questo campo
              */
@@ -1840,6 +1859,50 @@
             configurable: true
         });
         ;
+        /**
+         * Effettua il Bind/Parse delle varie **Source** unendo le informazioni specificate in **Display**
+         *
+         * Eventualmente rieffettua un bind al modello in base al valore della variabile **RebindModelAfterSource**
+         */
+        BaseFormControl.prototype.tryBindSourceDisplay = function () {
+            var _this = this;
+            if (!this.Source)
+                return;
+            if (this.Source.length == 0 && !this.FirstBind)
+                this.BoundSource = [];
+            this.FirstBind = false;
+            // 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) }); });
+                // 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 });
+                });
+            }
+        };
         /**
          * Indica se il comopnente in questione è in grado di gestire ngControl nulli.
          * Di default è **false**
@@ -1853,6 +1916,7 @@
          * @ignore
          */
         BaseFormControl.prototype.ngOnInit = function () {
+            var _this = this;
             // A volte nell'ngOnInit non ci passa quindi lo metto sia qui sia nell'afterviewinit, penso che valga per i componenti di terze parti
             // che si collegano per i cazzi loro al form ecc, quindi la parte sopra non serve... BOH
             this.checkRequiredValidator();
@@ -1862,9 +1926,20 @@
             if (this.ngControl.name)
                 this.GeneratedName = this.ngControl.name.toString() + "_internal";
             // ATTENZIONE: QUALSIASI SIA IL MOTIVO, SE STO COSO VIENE SPOSTATO DALL ngOnInit NON FUNZIONA PIU NULLA
-            if (this.Form && !this.formHasBennBound && this.validationControl) {
-                this.Form.addControl(this.validationControl);
-                this.formHasBennBound = true;
+            if (this.Form) {
+                if (!this.formHasBennBound && this.validationControl) {
+                    this.Form.addControl(this.validationControl);
+                    this.formHasBennBound = true;
+                }
+                // Quando un form viene submittato la variabile Form.submitted viene assegnata all'input [submitted] del val-control
+                // Essendo che però la CD è OnPush per dire ad Angular che l'Input è cambiato e permettere i sideffects di assegnare [submitted]
+                // devo attaccarmi al submit attuale del form e prima di eseguirlo devo marcare il componente per il check
+                var origFunc_1 = this.Form.onSubmit;
+                var formOutsideRef = this.Form;
+                this.Form.onSubmit = function (ev) {
+                    _this.cdr.markForCheck();
+                    return origFunc_1.apply(formOutsideRef);
+                };
             }
         };
         /**
@@ -1991,6 +2066,9 @@
         InputColWidth: [{ type: core.Input }],
         Last: [{ type: core.Input }],
         Form: [{ type: core.Input }],
+        Source: [{ type: core.Input }],
+        IdField: [{ type: core.Input }],
+        Display: [{ type: core.Input }],
         Readonly: [{ type: core.Input }],
         LabelInputRatio: [{ type: core.Input }],
         _validationControl: [{ type: core.ViewChild, args: ["validationControl", { static: false },] }],
@@ -2201,24 +2279,6 @@
             _this.utiExts = utiExts;
             _this.dateAdapter = dateAdapter;
             _this.lc = lc;
-            /**
-             * Nome della proprietà che contiene l'Id degli oggetti bindati nella Source
-             */
-            _this.IdField = 'id';
-            /**
-             * Espressione simil-Angular per cambiare il testo dei componenti che scelgono il proprio modello da una Source.
-             *
-             * Il funzionamento è identico al binder di angular, solo con una graffa invece che due
-             */
-            _this.Display = '{description}';
-            /**
-             * Risultato dell'unione fra le informazioni degli oggetti in **Source** e le impostazioni specificate nell'Input **Display**
-             */
-            _this.BoundSource = [];
-            /**
-             * Indica se è il primo Bind del componente
-             */
-            _this.FirstBind = true;
             /**
              * Permette di scaricare l'eventuale file presente qualora il **Type** di questo componente fosse **file**
              */
@@ -2251,27 +2311,6 @@
                 });
             });
         };
-        /**
-         * Effettua il Bind/Parse delle varie **Source** unendo le informazioni specificate in **Display**
-         */
-        FormAdaptiveComponent.prototype.tryBindSourceDisplay = function () {
-            var _this = this;
-            if (!this.Source)
-                return;
-            this.FirstBind = false;
-            if (this.Source.length > 0) {
-                this.BoundSource = [];
-                this.Source.forEach(function (s) {
-                    var matches = _this.Display.match(/{[a-z]+}/gi);
-                    var tmpDescription = _this.Display;
-                    matches.forEach(function (m) {
-                        tmpDescription = tmpDescription.replace(m, s[m.substring(1, m.length - 1)]);
-                    });
-                    s.finaldescription = tmpDescription;
-                    _this.BoundSource.push(s);
-                });
-            }
-        };
         /**
          * @ignore
          */
@@ -2356,7 +2395,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: 'left' }\" [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]=\"('Select' | localize : lc) + '...'\" [required]=\"Required\" [(ngModel)]=\"Model\" (inputChange)=\"changed();\" name=\"{{GeneratedName}}\">\r\n            <option *ngFor=\"let val of Source\" [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\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" [Source]=\"Source\" (inputChange)=\"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: 'left' }\" [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]=\"('Select' | localize : lc) + '...'\" [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\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" [Source]=\"BoundSource\" (inputChange)=\"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}"]
                 },] }
@@ -2376,9 +2415,6 @@
         Type: [{ type: core.Input }],
         TypeMissingMessage: [{ type: core.Input }],
         Pattern: [{ type: core.Input }],
-        Source: [{ type: core.Input }],
-        IdField: [{ type: core.Input }],
-        Display: [{ type: core.Input }],
         inputEl: [{ type: core.ViewChild, args: ["fileInput", { static: false },] }],
         AllowDownload: [{ type: core.Input }],
         Precision: [{ type: core.Input }]
@@ -2789,24 +2825,6 @@
              * Si consiglia di mantenere il default
              */
             _this.EmptyFieldValue = '-2';
-            /**
-             * Nome della proprietà che contiene l'Id degli oggetti bindati nella Source
-             */
-            _this.IdField = 'id';
-            /**
-             * Espressione simil-Angular per cambiare il testo dei componenti che scelgono il proprio modello da una Source
-             *
-             * Il funzionamento è identico al binder di angular, solo con una graffa invece che 2
-             */
-            _this.Display = '{description}';
-            /**
-             * Risultato dell'unione fra le informazioni degli oggetti in **Source** e le impostazioni specificate nell'Input **Display**
-             */
-            _this.BoundSource = [];
-            /**
-             * Indica se è il primo Bind del componente
-             */
-            _this.FirstBind = true;
             return _this;
         }
         /**
@@ -2833,7 +2851,7 @@
                          */
                         if (!this.FirstBind && this.SelectLabel) {
                             this.BoundSource = null;
-                            setTimeout(function () { _this.tryBindSourceDisplay(true); });
+                            setTimeout(function () { _this.tryBindSourceDisplay(); _this.cdr.detectChanges(); });
                         }
                         else
                             this.tryBindSourceDisplay();
@@ -2843,37 +2861,6 @@
                 });
             });
         };
-        /**
-         * Effettua il Bind/Parse delle varie **Source** unendo le informazioni specificate in **Display**
-         *
-         * Eventualmente effettua un detectChanges qualora il componente fosse stato ricreato dalla funzione **ngOnChanges**
-         */
-        FormSelectComponent.prototype.tryBindSourceDisplay = function (detectChanges) {
-            if (detectChanges === void 0) { detectChanges = false; }
-            if (!this.Source)
-                return;
-            if (this.Source.length == 0 && !this.FirstBind)
-                this.BoundSource = [];
-            this.FirstBind = false;
-            if (this.Source.length > 0) {
-                this.BoundSource = [];
-                for (var i = 0; i < this.Source.length; i++) {
-                    var s = this.Source[i];
-                    var matches = this.Display.match(/{[a-z]+}/gi);
-                    var tmpDescription = this.Display;
-                    if (matches) {
-                        for (var mi = 0; mi < matches.length; mi++) {
-                            var m = matches[mi];
-                            tmpDescription = tmpDescription.replace(m, s[m.substring(1, m.length - 1)]);
-                        }
-                    }
-                    s.finaldescription = tmpDescription;
-                    this.BoundSource.push(s);
-                }
-            }
-            if (detectChanges)
-                this.cdr.detectChanges();
-        };
         /**
          * @ignore
          */
@@ -2884,7 +2871,7 @@
         { type: core.Component, args: [{
                     selector: "form-select",
                     providers: [{ provide: localizations.LocalizationService, useClass: FormSelectComponentLoc }],
-                    template: "<ng-container *ngIf=\"!FormLayout\">\r\n    <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout && BoundSource\" 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\r\n    <!-- Select vuota per quando non ho Sorgenti dati da cui selezionare. Uguale identica alla piena ma senza option\r\n    Purtroppo devono essere due componenti distinti perch\u00E9 una select una volta creata non riesce pi\u00F9 ad adattarsi ai cambi di options -->\r\n    <val-select *ngIf=\"!BoundSource || BoundSource.length == 0\"\r\n                [required]=\"Required ? 'required' : null\"\r\n                [noValidate]=\"!Validation\"\r\n                [readonly]=\"Readonly\"\r\n                [forceInvalid]=\"ForcedError\"\r\n                [label]=\"SelectLabel\"\r\n                [validationFailed]=\"FailedValidationMessage\"\r\n                [placeholder]=\"Required ? ('Select' | localize : lc) + '...' : Placeholder\"\r\n                [placeHolderValue]=\"PlaceholderValue\"\r\n                [submitted]=\"Form?.submitted\"\r\n                [emptyFieldValue]=\"Required || Placeholder || SelectLabel ? EmptyFieldValue : ''\"\r\n                [(ngModel)]=\"Model\"\r\n                name=\"{{GeneratedName}}\"\r\n                (inputChange)=\"Model = $event == EmptyFieldValue ? (Required? PlaceholderValue : '') : $event; changed();\"\r\n                #validationControl=\"ngModel\">\r\n    </val-select>\r\n\r\n    <!-- Select vera e propria per quando arrivano i dati -->\r\n    <val-select *ngIf=\"BoundSource && BoundSource.length > 0\"\r\n                [required]=\"Required ? 'required' : null\"\r\n                [noValidate]=\"!Validation\"\r\n                [readonly]=\"Readonly\"\r\n                [forceInvalid]=\"ForcedError\"\r\n                [label]=\"SelectLabel\"\r\n                [validationFailed]=\"FailedValidationMessage\"\r\n                [placeholder]=\"Required ? ('Select' | localize : lc) + '...' : Placeholder\"\r\n                [placeHolderValue]=\"PlaceholderValue\"\r\n                [submitted]=\"Form?.submitted\"\r\n                [emptyFieldValue]=\"Required || Placeholder || SelectLabel ? EmptyFieldValue : ''\"\r\n                [(ngModel)]=\"Model\"\r\n                name=\"{{GeneratedName}}\"\r\n                (inputChange)=\"Model = $event == EmptyFieldValue ? (Required? PlaceholderValue : '') : $event; changed();\"\r\n                #validationControl=\"ngModel\">\r\n        <option *ngFor=\"let obj of BoundSource\" [value]=\"obj[IdField]\">{{obj.finaldescription}}</option>\r\n    </val-select>\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 && BoundSource\" 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\r\n    <!-- Select vuota per quando non ho Sorgenti dati da cui selezionare. Uguale identica alla piena ma senza option\r\n    Purtroppo devono essere due componenti distinti perch\u00E9 una select una volta creata non riesce pi\u00F9 ad adattarsi ai cambi di options -->\r\n    <val-select *ngIf=\"!BoundSource || BoundSource.length == 0\"\r\n                [required]=\"Required ? 'required' : null\"\r\n                [noValidate]=\"!Validation\"\r\n                [readonly]=\"Readonly\"\r\n                [forceInvalid]=\"ForcedError\"\r\n                [label]=\"SelectLabel\"\r\n                [validationFailed]=\"FailedValidationMessage\"\r\n                [placeholder]=\"Required ? ('Select' | localize : lc) + '...' : Placeholder\"\r\n                [placeHolderValue]=\"PlaceholderValue\"\r\n                [submitted]=\"Form?.submitted\"\r\n                [emptyFieldValue]=\"Required || Placeholder || SelectLabel ? EmptyFieldValue : ''\"\r\n                [(ngModel)]=\"Model\"\r\n                name=\"{{GeneratedName}}\"\r\n                (inputChange)=\"Model = $event == EmptyFieldValue ? (Required? PlaceholderValue : '') : $event; changed();\"\r\n                #validationControl=\"ngModel\">\r\n    </val-select>\r\n\r\n    <!-- Select vera e propria per quando arrivano i dati -->\r\n    <val-select *ngIf=\"BoundSource && BoundSource.length > 0\"\r\n                [required]=\"Required ? 'required' : null\"\r\n                [noValidate]=\"!Validation\"\r\n                [readonly]=\"Readonly\"\r\n                [forceInvalid]=\"ForcedError\"\r\n                [label]=\"SelectLabel\"\r\n                [validationFailed]=\"FailedValidationMessage\"\r\n                [placeholder]=\"Required ? ('Select' | localize : lc) + '...' : Placeholder\"\r\n                [placeHolderValue]=\"PlaceholderValue\"\r\n                [submitted]=\"Form?.submitted\"\r\n                [emptyFieldValue]=\"Required || Placeholder || SelectLabel ? EmptyFieldValue : ''\"\r\n                [(ngModel)]=\"Model\"\r\n                name=\"{{GeneratedName}}\"\r\n                (inputChange)=\"Model = $event == EmptyFieldValue ? (Required? PlaceholderValue : '') : $event; changed();\"\r\n                #validationControl=\"ngModel\">\r\n        <option *ngFor=\"let obj of BoundSource\" [value]=\"obj.id\">{{obj.description}}</option>\r\n    </val-select>\r\n</ng-template>",
                     changeDetection: core.ChangeDetectionStrategy.OnPush
                 },] }
     ];
@@ -2898,12 +2885,9 @@
         { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [ACO_CUSTOMKEY,] }] }
     ]; };
     FormSelectComponent.propDecorators = {
-        Source: [{ type: core.Input }],
         SelectLabel: [{ type: core.Input }],
         PlaceholderValue: [{ type: core.Input }],
-        EmptyFieldValue: [{ type: core.Input }],
-        IdField: [{ type: core.Input }],
-        Display: [{ type: core.Input }]
+        EmptyFieldValue: [{ type: core.Input }]
     };
 
     /**
@@ -2964,28 +2948,6 @@
              * Permette al componente di gestire come modello non una lista di chiavi, ma una lista di KeyValue
              */
             _this.UseKeyValues = false;
-            /**
-             * Nome della proprietà che contiene l'Id degli oggetti bindati nella Source
-             */
-            _this.IdField = 'id';
-            /**
-             * Indica il campo degli oggetti dentro all'array 'Source' dentro a cui c'è la descrizione
-             */
-            _this.DescriptionField = 'description';
-            /**
-             * Espressione simil-Angular per cambiare il testo dei componenti che scelgono il proprio modello da una Source
-             *
-             * Il funzionamento è identico al binder di angular, solo con una graffa invece che 2
-             */
-            _this.Display = '{description}';
-            /**
-             * Risultato dell'unione fra le informazioni degli oggetti in **Source** e le impostazioni specificate nell'Input **Display**
-             */
-            _this.BoundSource = [];
-            /**
-             * Indica se è il primo Bind del componente
-             */
-            _this.FirstBind = true;
             /**
              * Impostazioni del componente interno **angular2-multiselect**
              */
@@ -3001,8 +2963,13 @@
                 var newSource, readonly;
                 return __generator(this, function (_c) {
                     newSource = changes["Source"];
-                    if (newSource)
+                    if (newSource) {
                         this.tryBindSourceDisplay();
+                        if (this.RebindModelAfterSource) {
+                            this.writeValue(this.TmpModel);
+                            this.RebindModelAfterSource = false;
+                        }
+                    }
                     readonly = changes["Readonly"];
                     this.Settings = {
                         selectAllText: this.lc.loc("Select everything"),
@@ -3010,39 +2977,12 @@
                         text: this.SelectLabel || this.lc.loc("Select one or more values..."),
                         enableCheckAll: true,
                         disabled: readonly ? (_a = readonly.currentValue) !== null && _a !== void 0 ? _a : false : (_b = this.Readonly) !== null && _b !== void 0 ? _b : false,
+                        labelKey: "description"
                     };
                     return [2 /*return*/];
                 });
             });
         };
-        /**
-         * Effettua il Bind/Parse delle varie **Source** unendo le informazioni specificate in **Display**
-         *
-         * Eventualmente rieffettua un bind al modello in base al valore della variabile **RebindModelAfterSource**
-         */
-        FormMultiSelectComponent.prototype.tryBindSourceDisplay = function () {
-            var _this = this;
-            if (!this.Source)
-                return;
-            this.FirstBind = false;
-            if (this.Source.length > 0) {
-                this.BoundSource = [];
-                this.Source.forEach(function (s) {
-                    var matches = _this.Display.match(/{[a-z]+}/gi);
-                    var tmpDescription = _this.Display;
-                    if (matches) {
-                        matches.forEach(function (m) {
-                            tmpDescription = tmpDescription.replace(m, s[m.substring(1, m.length - 1)]);
-                        });
-                    }
-                    _this.BoundSource.push({ id: s[_this.IdField], itemName: tmpDescription });
-                });
-                if (this.RebindModelAfterSource) {
-                    this.writeValue(this.TmpModel);
-                    this.RebindModelAfterSource = false;
-                }
-            }
-        };
         /**
          * @ignore
          */
@@ -3109,12 +3049,8 @@
         { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [ACO_CUSTOMKEY,] }] }
     ]; };
     FormMultiSelectComponent.propDecorators = {
-        Source: [{ type: core.Input }],
         SelectLabel: [{ type: core.Input }],
-        UseKeyValues: [{ type: core.Input }],
-        IdField: [{ type: core.Input }],
-        DescriptionField: [{ type: core.Input }],
-        Display: [{ type: core.Input }]
+        UseKeyValues: [{ type: core.Input }]
     };
 
     /**
@@ -3166,26 +3102,7 @@
          * @ignore
          */
         function FormAutocompleteComponent(cdr, ngControl, _validators, ac, AppContext, ACO_CUSTOMKEY) {
-            var _this = _super.call(this, cdr, ngControl, _validators, ac, AppContext, ACO_CUSTOMKEY) || this;
-            /**
-             * Nome della proprietà che contiene l'Id degli oggetti bindati nella Source
-             */
-            _this.IdField = 'id';
-            /**
-             * Espressione simil-Angular per cambiare il testo dei componenti che scelgono il proprio modello da una Source
-             *
-             * Il funzionamento è identico al binder di angular, solo con una graffa invece che 2
-             */
-            _this.Display = '{description}';
-            /**
-             * Risultato dell'unione fra le informazioni degli oggetti in **Source** e le impostazioni specificate nell'Input **Display**
-             */
-            _this.BoundSource = [];
-            /**
-             * Indica se è il primo Bind del componente
-             */
-            _this.FirstBind = true;
-            return _this;
+            return _super.call(this, cdr, ngControl, _validators, ac, AppContext, ACO_CUSTOMKEY) || this;
         }
         /**
          * @ignore
@@ -3201,31 +3118,6 @@
                 });
             });
         };
-        /**
-         * Effettua il Bind/Parse delle varie **Source** unendo le informazioni specificate in **Display**
-         */
-        FormAutocompleteComponent.prototype.tryBindSourceDisplay = function () {
-            var _this = this;
-            if (!this.Source)
-                return;
-            if (this.Source.length == 0 && !this.FirstBind)
-                this.BoundSource = [];
-            this.FirstBind = false;
-            if (this.Source.length > 0) {
-                this.BoundSource = [];
-                this.Source.forEach(function (s) {
-                    var matches = _this.Display.match(/{[a-z]+}/gi);
-                    var tmpDescription = _this.Display;
-                    if (matches) {
-                        matches.forEach(function (m) {
-                            tmpDescription = tmpDescription.replace(m, s[m.substring(1, m.length - 1)]);
-                        });
-                    }
-                    s.finaldescription = tmpDescription;
-                    _this.BoundSource.push({ id: s[_this.IdField], description: s.finaldescription });
-                });
-            }
-        };
         /**
          * @ignore
          */
@@ -3246,12 +3138,7 @@
         { type: accessControl.AccessControlService, decorators: [{ type: core.Optional }] },
         { type: accessControl.ComponentContext, decorators: [{ type: core.Optional }] },
         { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [ACO_CUSTOMKEY,] }] }
-    ]; };
-    FormAutocompleteComponent.propDecorators = {
-        Source: [{ type: core.Input }],
-        IdField: [{ type: core.Input }],
-        Display: [{ type: core.Input }]
-    };
+    ]; };
 
     /**
      * Componente che identifica la selezione di un orario