@esfaenza/forms-and-validations 11.2.60 → 11.2.63

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

@@ -1912,7 +1912,8 @@
                             v._createValidator();
                     });
                 }
-                this.ngControl.control.setValidators(this._validators);
+                if (this._validators)
+                    this.ngControl.control.setValidators(this._validators);
                 this.ngControl.control.updateValueAndValidity();
             }
         }
@@ -2797,6 +2798,10 @@
              * Mostra un testo a sinistra dell'input, **FormLayout** permettendo
              */
             this.Label = "";
+            /**
+             * Eventuali classi extra da applicare alla Label, di default c'è solo un leggero margin top
+             */
+            this.LabelClass = "m-t-5";
             /**
              * Utilizza o meno il Layout di un form (Label con input di fianco), se false mostra solo l'input
              */
@@ -2835,13 +2840,14 @@
     FormTemplateComponent.decorators = [
         { type: core.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 ? '*' : ''}}<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>",
+                    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}} {{LabelClass}}\">{{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: core.ChangeDetectionStrategy.OnPush
                 },] }
     ];
     FormTemplateComponent.propDecorators = {
         Required: [{ type: core.Input }],
         Label: [{ type: core.Input }],
+        LabelClass: [{ type: core.Input }],
         FormLayout: [{ type: core.Input }],
         LabelColWidth: [{ type: core.Input }],
         InputColWidth: [{ type: core.Input }],
@@ -3193,14 +3199,39 @@
                  * Ovviamente lo faccio solo quando ho una SelectLabel, altrimenti non ho problemi di floattamenti
                  */
                 if (!this.SourceFirstBind && this.SelectLabel) {
-                    this.BoundSource = null;
-                    setTimeout(function () { _this.tryBindSourceDisplay(); _this.cdr.detectChanges(); });
+                    this.detatchPreviousAndRetatchNext(function (afterStuff) {
+                        _this.BoundSource = null;
+                        setTimeout(function () {
+                            _this.tryBindSourceDisplay();
+                            _this.cdr.detectChanges();
+                            setTimeout(function () { afterStuff(); });
+                        });
+                    });
                 }
                 else
-                    this.tryBindSourceDisplay();
+                    this.detatchPreviousAndRetatchNext(function (afterStuff) {
+                        _this.tryBindSourceDisplay();
+                        _this.cdr.detectChanges();
+                        setTimeout(function () { afterStuff(); });
+                    });
                 this.cdr.markForCheck();
             }
         };
+        FormSelectComponent.prototype.detatchPreviousAndRetatchNext = function (doStuff) {
+            var _this = this;
+            this.Form.removeControl(this.validationControl);
+            setTimeout(function () {
+                doStuff(function () {
+                    if (_this.validationControl)
+                        _this.Form.addControl(_this.validationControl);
+                    else if (_this.validationControl) {
+                        _this.Form.addControl(_this.validationControl);
+                    }
+                    else
+                        console.error("Impossibile aggiungere il componente di validaazione per " + _this.GeneratedName + ", le validazioni potrebbero funzionare in maniera erratica");
+                });
+            });
+        };
         /**
          * @ignore
          */
@@ -3211,7 +3242,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                [FocusSubject]=\"FocusSubject\" [FieldAppearence]=\"FieldAppearence\"\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 ? ((RequiredPlaceholder != null ? RequiredPlaceholder : ('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                [showValidationSymbol]=\"ShowValidationSymbol\"\r\n                [id]=\"GeneratedName\"\r\n                name=\"{{GeneratedName}}\"\r\n                (inputChange)=\"Model = $event == EmptyFieldValue ? (Required? PlaceholderValue : '') : $event; changed();\"\r\n                (inputFocus)=\"focused($event);\"\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                [FocusSubject]=\"FocusSubject\" [FieldAppearence]=\"FieldAppearence\"\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                [showValidationSymbol]=\"ShowValidationSymbol\"\r\n                [placeholder]=\"Required ? ((RequiredPlaceholder != null ? RequiredPlaceholder : ('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                [id]=\"GeneratedName\"\r\n                name=\"{{GeneratedName}}\"\r\n                (inputChange)=\"Model = $event == EmptyFieldValue ? (Required? PlaceholderValue : '') : $event; changed();\"\r\n                (inputFocus)=\"focused($event);\"\r\n                (inputFinalized)=\"finalized()\"\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>",
+                    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                [FocusSubject]=\"FocusSubject\" [FieldAppearence]=\"FieldAppearence\"\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 ? ((RequiredPlaceholder != null ? RequiredPlaceholder : ('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                [showValidationSymbol]=\"ShowValidationSymbol\"\r\n                [id]=\"GeneratedName\"\r\n                name=\"{{GeneratedName}}_zero\"\r\n                (inputChange)=\"Model = $event == EmptyFieldValue ? (Required? PlaceholderValue : '') : $event; changed();\"\r\n                (inputFocus)=\"focused($event);\"\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                [FocusSubject]=\"FocusSubject\" [FieldAppearence]=\"FieldAppearence\"\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                [showValidationSymbol]=\"ShowValidationSymbol\"\r\n                [placeholder]=\"Required ? ((RequiredPlaceholder != null ? RequiredPlaceholder : ('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                [id]=\"GeneratedName\"\r\n                name=\"{{GeneratedName}}_filled\"\r\n                (inputChange)=\"Model = $event == EmptyFieldValue ? (Required? PlaceholderValue : '') : $event; changed();\"\r\n                (inputFocus)=\"focused($event);\"\r\n                (inputFinalized)=\"finalized()\"\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
                 },] }
     ];