@esfaenza/forms-and-validations 11.2.149 → 11.2.150

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

@@ -2530,6 +2530,8 @@
             _this.AllowDownload = true;
             /** Controllo sulla dimensione di ogni singolo file in Byte. 0 -> nessun limite */
             _this.MaxSize = 0;
+            /** Sportivo */
+            _this.FancyMode = false;
             //Per questo componente non posso permettermi che il modello sia nullo
             _this.Model = new AppFile();
             return _this;
@@ -2600,15 +2602,31 @@
         };
         /** @ignore */
         FormFileComponent.prototype.onNotNullValueSet = function () { };
+        FormFileComponent.prototype.onFileDragOver = function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        FormFileComponent.prototype.onFileDropped = function (event) {
+            var _a;
+            event.preventDefault();
+            event.stopPropagation();
+            var files = Array.from(((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) || []);
+            var model = new AppFile();
+            model.filename = files[0].name;
+            model.fileb64 = null;
+            model.nativefiles = files;
+            console.log(model);
+            this.msgs.simpleWarning("<h5>Attenzione</h5></br>Al momento non è possibile caricare files trascinandoli.</br> Se si desidera caricare un file, cliccare nell'area tratteggiata e selezionarlo da 'Esplora file'.");
+        };
         return FormFileComponent;
     }(BaseFormControl));
     FormFileComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "form-file",
                     providers: [{ provide: localizations.LocalizationService, useClass: FormFileComponentLoc }],
-                    template: "<!-- Uguale in tutti i componenti --------------------------------------------------------------------------->\r\n<ng-container *ngIf=\"!FormLayout && (!DisplayMode || (DisplayLayout != 'hidden' && DisplayCondition))\">\r\n    <ng-container *ngIf=\"DisplayMode && !DisplayModeTemplate\">\r\n        <ng-container *ngIf=\"DisplayLayout == 'form'\">{{ EvaluatedModel }}</ng-container>\r\n        <div *ngIf=\"DisplayLayout == 'inline'\" class=\"app-inline\">{{ EvaluatedModel }}</div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"DisplayMode && DisplayModeTemplate\"><ng-container *ngTemplateOutlet=\"DisplayModeTemplate, context: { $implicit: EvaluatedModel }\"></ng-container></ng-container>\r\n    <div [hidden]=\"DisplayMode\"><ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container></div>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout && (!DisplayMode || (DisplayLayout != 'hidden' && DisplayCondition))\" class=\"{{FormGroupClass + (Last ? ' app-margin-bottom-0 app-margin-right-0 ' : '') + (DisplayLayout == 'inline' && DisplayMode ? (' app-inline-block ' + (!Last ? 'app-margin-right-10' : '')) : ' form-group row')}}\">\r\n\r\n    <label class=\"col-md-{{(DisplayMode && DisplayLayout == 'inline' ? 'none app-bold app-margin-bottom-0' : LabelColWidth) + (DisplayMode ? ' app-bold' : ' m-t-5') }}\">{{Label}}{{Required && !DisplayMode ? '*' : ''}}{{Label ? \":\" : \"\"}}</label>\r\n    <span *ngIf=\"DisplayMode && DisplayLayout == 'inline' && InlineSeparator != ''\">{{InlineSeparator}}</span>\r\n    <div class=\"col-md-{{DisplayMode && DisplayLayout == 'inline' ? 'none app-inline-block' : InputColWidth}}\">\r\n\r\n        <ng-container *ngIf=\"DisplayMode && !DisplayModeTemplate\">{{ EvaluatedModel }}</ng-container>\r\n        <ng-container *ngIf=\"DisplayMode && DisplayModeTemplate\"><ng-container *ngTemplateOutlet=\"DisplayModeTemplate, context: { $implicit: EvaluatedModel }\"></ng-container></ng-container>\r\n        <div [hidden]=\"DisplayMode\"><ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container></div>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n<!----------------------------------------------------------------------------------------------------------->\r\n\r\n<ng-template #controlTemplate>\r\n    <div class=\"input-group file-upload\">\r\n        <input type=\"file\" (change)=\"fileChange()\" id=\"{{GeneratedName}}\" #fileInput class=\"file-upload-btn app-pointer\" [multiple]=\"Multiple ? true : null\" />\r\n        <input type=\"text\" [class.frm-padding-left-22]=\"AllowDownload && Model.filename && Model.fileb64\" class=\"form-control checking-field\" placeholder=\"{{'Select a file' | localize : lc}}...\" [(ngModel)]=\"Model.filename\" name=\"dsfile_{{GeneratedName}}\" #validationControl=\"ngModel\" />\r\n\r\n        <a class=\"fa fa-download app-pointer app-input-icon\" *ngIf=\"AllowDownload && Model.filename && Model.fileb64\" (click)=\"downloadAttachment()\"></a>\r\n        <i class=\"fa fa-times delete-file\" (click)=\"fileChange(true)\" *ngIf=\"Model.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</ng-template>",
+                    template: "<!-- Uguale in tutti i componenti --------------------------------------------------------------------------->\r\n<ng-container *ngIf=\"!FancyMode && !FormLayout && (!DisplayMode || (DisplayLayout != 'hidden' && DisplayCondition))\">\r\n    <ng-container *ngIf=\"DisplayMode && !DisplayModeTemplate\">\r\n        <ng-container *ngIf=\"DisplayLayout == 'form'\">{{ EvaluatedModel }}</ng-container>\r\n        <div *ngIf=\"DisplayLayout == 'inline'\" class=\"app-inline\">{{ EvaluatedModel }}</div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"DisplayMode && DisplayModeTemplate\"><ng-container *ngTemplateOutlet=\"DisplayModeTemplate, context: { $implicit: EvaluatedModel }\"></ng-container></ng-container>\r\n    <div [hidden]=\"DisplayMode\"><ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container></div>\r\n</ng-container>\r\n\r\n<div *ngIf=\"!FancyMode && FormLayout && (!DisplayMode || (DisplayLayout != 'hidden' && DisplayCondition))\" class=\"{{FormGroupClass + (Last ? ' app-margin-bottom-0 app-margin-right-0 ' : '') + (DisplayLayout == 'inline' && DisplayMode ? (' app-inline-block ' + (!Last ? 'app-margin-right-10' : '')) : ' form-group row')}}\">\r\n\r\n    <label class=\"col-md-{{(DisplayMode && DisplayLayout == 'inline' ? 'none app-bold app-margin-bottom-0' : LabelColWidth) + (DisplayMode ? ' app-bold' : ' m-t-5') }}\">{{Label}}{{Required && !DisplayMode ? '*' : ''}}{{Label ? \":\" : \"\"}}</label>\r\n    <span *ngIf=\"DisplayMode && DisplayLayout == 'inline' && InlineSeparator != ''\">{{InlineSeparator}}</span>\r\n    <div class=\"col-md-{{DisplayMode && DisplayLayout == 'inline' ? 'none app-inline-block' : InputColWidth}}\">\r\n\r\n        <ng-container *ngIf=\"DisplayMode && !DisplayModeTemplate\">{{ EvaluatedModel }}</ng-container>\r\n        <ng-container *ngIf=\"DisplayMode && DisplayModeTemplate\"><ng-container *ngTemplateOutlet=\"DisplayModeTemplate, context: { $implicit: EvaluatedModel }\"></ng-container></ng-container>\r\n        <div [hidden]=\"DisplayMode\"><ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container></div>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<div *ngIf=\"FancyMode\" (drop)=\"onFileDropped($event)\" (dragover)=\"onFileDragOver($event)\">\r\n    <!--Drop-->\r\n    <label for=\"{{GeneratedName}}\" class=\"drop-container\">\r\n        <span class=\"drop-title\">{{Label}}</span>\r\n        <div class=\"file-name-container\">{{Model.filename || 'Nessun file selezionato'}}</div>\r\n        <!--Hidden Forms-->\r\n        <input hidden type=\"file\" (change)=\"fileChange()\" id=\"{{GeneratedName}}\" #fileInput class=\"file-upload-btn app-pointer\" [multiple]=\"Multiple ? true : null\" />\r\n        <input hidden type=\"text\" [class.frm-padding-left-22]=\"AllowDownload && Model.filename && Model.fileb64\" class=\"form-control checking-field\" \r\n               placeholder=\"{{'Select a file' | localize : lc}}...\" [(ngModel)]=\"Model.filename\" name=\"dsfile_{{GeneratedName}}\" #validationControl=\"ngModel\" />\r\n        <!--Clean-->\r\n        <i class=\"fa fa-times file-delete-btn\" (click)=\"fileChange(true); $event.stopPropagation(); false;\" *ngIf=\"Model.filename\"></i>\r\n        <!--Download-->\r\n        <div *ngIf=\"AllowDownload && Model.filename && Model.fileb64\" class=\"app-pointer file-download-btn\" (click)=\"downloadAttachment(); $event.stopPropagation(); false;\">\r\n            <span class=\"file-download-btn-text\">Download <i class=\"fa fa-download\"></i></span>\r\n        </div>\r\n    </label>\r\n</div>\r\n<!----------------------------------------------------------------------------------------------------------->\r\n\r\n<ng-template #controlTemplate>\r\n    <div class=\"input-group file-upload\">\r\n        <input type=\"file\" (change)=\"fileChange()\" id=\"{{GeneratedName}}\" #fileInput class=\"file-upload-btn app-pointer\" [multiple]=\"Multiple ? true : null\" />\r\n        <input type=\"text\" [class.frm-padding-left-22]=\"AllowDownload && Model.filename && Model.fileb64\" class=\"form-control checking-field\" placeholder=\"{{'Select a file' | localize : lc}}...\" [(ngModel)]=\"Model.filename\" name=\"dsfile_{{GeneratedName}}\" #validationControl=\"ngModel\" />\r\n\r\n        <a class=\"fa fa-download app-pointer app-input-icon\" *ngIf=\"AllowDownload && Model.filename && Model.fileb64\" (click)=\"downloadAttachment()\"></a>\r\n        <i class=\"fa fa-times delete-file\" (click)=\"fileChange(true)\" *ngIf=\"Model.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</ng-template>",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    styles: [".frm-padding-left-22{padding-left:22px}"]
+                    styles: [".frm-padding-left-22{padding-left:22px}.drop-container{position:relative;display:flex;grid-gap:10px;gap:10px;flex-direction:column;justify-content:center;align-items:center;height:200px;padding:20px;border-radius:10px;border:2px dashed #0d45a5;color:#444;cursor:pointer;transition:background .2s ease-in-out,border .2s ease-in-out}.drop-container:hover{background:#eee;border-color:#111}.drop-container:hover .drop-title{color:#222}.drop-title{color:#444;font-size:20px;font-weight:700;text-align:center;transition:color .2s ease-in-out}input[type=file]{width:350px;max-width:100%;color:#444;padding:5px;background:#fff;border-radius:10px;border:1px solid #555}input[type=file]::file-selector-button{margin-right:20px;border:none;background:#084cdf;padding:10px 20px;border-radius:10px;color:#fff;cursor:pointer;transition:background .2s ease-in-out}input[type=file]::file-selector-button:hover{background:#0d45a5}.file-download-btn{border-radius:5px;padding:5px 10px;background-color:#0d45a5}.file-download-btn:hover{background-color:#084cdf}.file-download-btn-text{color:#fff}.file-delete-btn{color:red;position:absolute;right:10px;top:10px}.file-name-container{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow-y:clip;text-align:center}"]
                 },] }
     ];
     FormFileComponent.ctorParameters = function () { return [
@@ -2627,6 +2645,7 @@
         Multiple: [{ type: core.Input }],
         AllowDownload: [{ type: core.Input }],
         MaxSize: [{ type: core.Input }],
+        FancyMode: [{ type: core.Input }],
         inputEl: [{ type: core.ViewChild, args: ["fileInput", { static: false },] }]
     };
 
@@ -3032,7 +3051,7 @@
                     providers: [{ provide: localizations.LocalizationService, useClass: FormAdaptiveComponentLoc }],
                     template: "<!-- Uguale in tutti i componenti --------------------------------------------------------------------------->\r\n<ng-container *ngIf=\"!FormLayout && (!DisplayMode || (DisplayLayout != 'hidden' && DisplayCondition))\">\r\n    <ng-container *ngIf=\"DisplayMode && !DisplayModeTemplate\">\r\n        <ng-container *ngIf=\"DisplayLayout == 'form'\">{{ EvaluatedModel }}</ng-container>\r\n        <div *ngIf=\"DisplayLayout == 'inline'\" class=\"app-inline\">{{ EvaluatedModel }}</div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"DisplayMode && DisplayModeTemplate\"><ng-container *ngTemplateOutlet=\"DisplayModeTemplate, context: { $implicit: EvaluatedModel }\"></ng-container></ng-container>\r\n    <div [hidden]=\"DisplayMode\"><ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container></div>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout && (!DisplayMode || (DisplayLayout != 'hidden' && DisplayCondition))\" class=\"{{FormGroupClass + (Last ? ' app-margin-bottom-0 app-margin-right-0 ' : '') + (DisplayLayout == 'inline' && DisplayMode ? (' app-inline-block ' + (!Last ? 'app-margin-right-10' : '')) : ' form-group row')}}\">\r\n\r\n    <label class=\"col-md-{{(DisplayMode && DisplayLayout == 'inline' ? 'none app-bold app-margin-bottom-0' : LabelColWidth) + (DisplayMode ? ' app-bold' : ' m-t-5') }}\">{{Label}}{{Required && !DisplayMode ? '*' : ''}}{{Label ? \":\" : \"\"}}</label>\r\n    <span *ngIf=\"DisplayMode && DisplayLayout == 'inline' && InlineSeparator != ''\">{{InlineSeparator}}</span>\r\n    <div class=\"col-md-{{DisplayMode && DisplayLayout == 'inline' ? 'none app-inline-block' : InputColWidth}}\">\r\n\r\n        <ng-container *ngIf=\"DisplayMode && !DisplayModeTemplate\">{{ EvaluatedModel }}</ng-container>\r\n        <ng-container *ngIf=\"DisplayMode && DisplayModeTemplate\"><ng-container *ngTemplateOutlet=\"DisplayModeTemplate, context: { $implicit: EvaluatedModel }\"></ng-container></ng-container>\r\n        <div [hidden]=\"DisplayMode\"><ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container></div>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n<!----------------------------------------------------------------------------------------------------------->\r\n\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 #validationControl=\"ngModel\" [FocusSubject]=\"FocusSubject\" [SetValidationSubject]=\"SetValidationSubject\" [FieldAppearence]=\"FieldAppearence\" [forceInvalid]=\"ForcedError\" [FloatingLabel]=\"FloatingLabel\"\r\n        [CurrencyOptions]=\"{ prefix: '', thousands: '.', decimal: ',', precision: Precision, align: Alignment }\" [noValidate]=\"!Validation\"\r\n        type=\"text\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [required]=\"Required\" [(ngModel)]=\"Model\" [id]=\"GeneratedName\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\" (inputFocus)=\"focused($event);\" (inputFinalized)=\"finalized()\"></val-currency>\r\n    </div>\r\n    <!--Se data-->\r\n    <div *ngIf=\"Type == 'date'\">\r\n        <val-date #validationControl=\"ngModel\" [FocusSubject]=\"FocusSubject\" [SetValidationSubject]=\"SetValidationSubject\" [FieldAppearence]=\"FieldAppearence\" [forceInvalid]=\"ForcedError\" [FloatingLabel]=\"FloatingLabel\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [required]=\"Required\" [(ngModel)]=\"Model\" [id]=\"GeneratedName\" [useJsDates]=\"useJsDates\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed($event);\" (inputFocus)=\"focused($event);\" (inputFinalized)=\"finalized()\"></val-date>\r\n    </div>\r\n    <!--Se stringa-->\r\n    <div *ngIf=\"Type == 'string'\">\r\n        <val-input #validationControl=\"ngModel\" [FocusSubject]=\"FocusSubject\" [SetValidationSubject]=\"SetValidationSubject\" [FieldAppearence]=\"FieldAppearence\" [forceInvalid]=\"ForcedError\" [FloatingLabel]=\"FloatingLabel\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" type=\"text\" pattern=\"{{Pattern || ''}}\" [required]=\"Required\" [(ngModel)]=\"Model\" [id]=\"GeneratedName\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed($event);\" (inputFocus)=\"focused($event);\" (inputFinalized)=\"finalized()\"></val-input>\r\n    </div>\r\n    <!--Se numero-->\r\n    <div *ngIf=\"Type == 'float' || Type == 'number'\">\r\n        <val-input #validationControl=\"ngModel\" [FocusSubject]=\"FocusSubject\" [SetValidationSubject]=\"SetValidationSubject\" [FieldAppearence]=\"FieldAppearence\" [forceInvalid]=\"ForcedError\" [FloatingLabel]=\"FloatingLabel\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" type=\"text\" pattern=\"{{Pattern || FloatPattern}}\" [required]=\"Required\" [(ngModel)]=\"Model\" [id]=\"GeneratedName\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed($event);\" (inputFocus)=\"focused($event);\" (inputFinalized)=\"finalized()\"></val-input>\r\n    </div>\r\n    <!--Se numero intero-->\r\n    <div *ngIf=\"Type == 'int'\">\r\n        <val-input #validationControl=\"ngModel\" [FocusSubject]=\"FocusSubject\" [SetValidationSubject]=\"SetValidationSubject\" [FieldAppearence]=\"FieldAppearence\" [forceInvalid]=\"ForcedError\" [FloatingLabel]=\"FloatingLabel\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" type=\"text\" pattern=\"{{Pattern || IntPattern}}\" [required]=\"Required\" [(ngModel)]=\"Model\" [id]=\"GeneratedName\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed($event);\" (inputFocus)=\"focused($event);\" (inputFinalized)=\"finalized()\"></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\" id=\"{{GeneratedName}}\" name=\"{{GeneratedName}}\" (ngModelChange)=\"changed(); finalized();\" (click)=\"focused($event);\" />\r\n    </div>\r\n    <!--Se enum-->\r\n    <div *ngIf=\"Type == 'enum'\">\r\n        <val-select #validationControl=\"ngModel\" [FocusSubject]=\"FocusSubject\" [SetValidationSubject]=\"SetValidationSubject\" [FieldAppearence]=\"FieldAppearence\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [placeHolderValue]=\"''\" [placeholder]=\"Required ? ('Select' | localize : lc) + '...' : Placeholder\" [required]=\"Required\" [(ngModel)]=\"Model\" (inputChange)=\"changed($event);\" (inputFocus)=\"focused($event);\" (inputFinalized)=\"finalized()\" [id]=\"GeneratedName\" 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\" [FocusSubject]=\"FocusSubject\" [SetValidationSubject]=\"SetValidationSubject\" [FieldAppearence]=\"FieldAppearence\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [required]=\"Required\" [placeholder]=\"Required ? ('Select' | localize : lc) + '...' : Placeholder\" [(ngModel)]=\"Model\" [id]=\"GeneratedName\" name=\"{{GeneratedName}}\" [FilteredSource]=\"FilteredBoundSource\" (inputChange)=\"filterSource($event); changed($event);\" (inputFocus)=\"focused($event);\" (inputFinalized)=\"finalized()\"></val-autocomplete>\r\n    </div>\r\n    <!--Se date time-->\r\n    <div *ngIf=\"Type == 'datetime'\">\r\n        <val-datetime #validationControl=\"ngModel\" [FocusSubject]=\"FocusSubject\" [SetValidationSubject]=\"SetValidationSubject\" [FieldAppearence]=\"FieldAppearence\" [forceInvalid]=\"ForcedError\" [FloatingLabel]=\"FloatingLabel\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [required]=\"Required\" [useJsDates]=\"useJsDates\" [(ngModel)]=\"Model\" [id]=\"GeneratedName\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed($event);\" (inputFocus)=\"focused($event);\" (inputFinalized)=\"finalized()\"></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 id=\"{{GeneratedName}}\" 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}"]
+                    styles: [".frm-padding-left-22{padding-left:22px}.drop-container{position:relative;display:flex;grid-gap:10px;gap:10px;flex-direction:column;justify-content:center;align-items:center;height:200px;padding:20px;border-radius:10px;border:2px dashed #0d45a5;color:#444;cursor:pointer;transition:background .2s ease-in-out,border .2s ease-in-out}.drop-container:hover{background:#eee;border-color:#111}.drop-container:hover .drop-title{color:#222}.drop-title{color:#444;font-size:20px;font-weight:700;text-align:center;transition:color .2s ease-in-out}input[type=file]{width:350px;max-width:100%;color:#444;padding:5px;background:#fff;border-radius:10px;border:1px solid #555}input[type=file]::file-selector-button{margin-right:20px;border:none;background:#084cdf;padding:10px 20px;border-radius:10px;color:#fff;cursor:pointer;transition:background .2s ease-in-out}input[type=file]::file-selector-button:hover{background:#0d45a5}.file-download-btn{border-radius:5px;padding:5px 10px;background-color:#0d45a5}.file-download-btn:hover{background-color:#084cdf}.file-download-btn-text{color:#fff}.file-delete-btn{color:red;position:absolute;right:10px;top:10px}.file-name-container{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow-y:clip;text-align:center}"]
                 },] }
     ];
     FormAdaptiveComponent.ctorParameters = function () { return [