@esfaenza/forms-and-validations 19.2.61 → 19.2.63

package/fesm2022/esfaenza-forms-and-validations.mjs

@@ -968,6 +968,9 @@ class EsFormFileComponent extends BaseFormControl {
     async getEvaluatedModel(valueAfterInTransform) {
         return valueAfterInTransform.filename;
     }
+    openFileDialog() {
+        this.innerElement.nativeElement.click();
+    }
     /**
      * Helper per gestire la modifica del file attualmente bindato
      *
@@ -1038,14 +1041,14 @@ class EsFormFileComponent extends BaseFormControl {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: EsFormFileComponent, isStandalone: true, selector: "form-file", inputs: { Multiple: "Multiple", AllowDownload: "AllowDownload", MaxSize: "MaxSize", FancyMode: "FancyMode", ReadFile: "ReadFile" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => EsFormFileComponent), multi: true },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => EsFormFileComponent), multi: true }
-        ], usesInheritance: true, ngImport: i0, template: "<input-skeleton *ngIf=\"FancyMode === false\" [Control]=\"controlTemplate\" [For]=\"this\"></input-skeleton>\r\n\r\n<ng-template #controlTemplate>\r\n    <div class=\"input-group file-upload\" style=\"padding: 0 !important;\">\r\n        <input type=\"file\" (change)=\"fileChange()\" id=\"{{InternalName}}\" #innerElement class=\"file-upload-btn app-pointer\" style=\"height: 46px;\" [multiple]=\"Multiple ? true : null\" />\r\n        <input type=\"text\" \r\n            [class.frm-padding-left-22]=\"AllowDownload && value.filename && value.fileb64\" \r\n            class=\"form-control checking-field\" \r\n            style=\"border-top-left-radius: 5px; border-bottom-left-radius: 5px; height: 46px;\"\r\n            [style.padding-left.px]=\"AllowDownload && value.filename && value.fileb64 ? 40 : 12\"\r\n            placeholder=\"{{Placeholder || ('Seleziona un File' | localize : lc)}}...\" \r\n            [(ngModel)]=\"value.filename\" name=\"dsfile_{{InternalName}}\" \r\n            #innerInput=\"ngModel\" />\r\n        \r\n        <a class=\"fa fa-download app-pointer app-input-icon\" style=\"padding-left: 10px; padding-top: 5px; color: #666; z-index: 9999;\" *ngIf=\"AllowDownload && value.filename && value.fileb64\" (click)=\"onDownloadFile()\"></a>\r\n        <i class=\"fa fa-times delete-file\" style=\"margin-right: 15px; margin-top: 7px; color: #666;\" (click)=\"fileChange(true)\" *ngIf=\"value.filename\"></i>\r\n        \r\n        <span class=\"input-group-btn\">\r\n            <button class=\"btn btn-primary btn-file-upload\" style=\"height: 46px;\r\n            border-top-right-radius: 5px;\r\n            border-bottom-right-radius: 5px;\r\n            background: var(--p-surface-50) !important;\r\n            border: 1px solid var(--p-surface-300) !important;\r\n            color: #777;\" type=\"button\"><i class=\"fa fa-upload\"></i></button>\r\n        </span>\r\n    </div>\r\n</ng-template>\r\n\r\n<!--Fancy Mode-->\r\n<div *ngIf=\"FancyMode === true\" (drop)=\"onFileDropped($event)\" (dragover)=\"onFileDragOver($event)\">\r\n    <!--Drop-->\r\n    <label for=\"{{InternalName}}\" class=\"drop-container\">\r\n        <span class=\"drop-title\">{{Label}}</span>\r\n        <div class=\"file-name-container\">{{value.filename || 'Nessun file selezionato'}}</div>\r\n        <!--Hidden Forms-->\r\n        <input hidden type=\"file\" (change)=\"fileChange()\" id=\"{{InternalName}}\" #innerElement class=\"file-upload-btn app-pointer\" [multiple]=\"Multiple ? true : null\" />\r\n        <input hidden type=\"text\" [class.frm-padding-left-22]=\"AllowDownload && value.filename && value.fileb64\" class=\"form-control checking-field\" \r\n               placeholder=\"{{Placeholder || ('Seleziona un File' | localize : lc)}}...\" [(ngModel)]=\"value.filename\" name=\"dsfile_{{InternalName}}\" #innerInput=\"ngModel\" />\r\n        <!--Clean-->\r\n        <i class=\"fa fa-times file-delete-btn\" (click)=\"fileChange(true); $event.stopPropagation(); false;\" *ngIf=\"value.filename\"></i>\r\n        <!--Download-->\r\n        <div *ngIf=\"AllowDownload && value.filename && value.fileb64\" class=\"app-pointer file-download-btn\" (click)=\"onDownloadFile(); $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<p-popover styleClass='validation-tooltip' #tooltip>{{TooltipText}}</p-popover>", styles: [".validation-tooltip.p-popover:before,.validation-tooltip.p-popover:after{border-bottom-color:var(--p-form-field-invalid-placeholder-color)}.validation-tooltip .p-popover-content{padding:5px;color:#fff;background:var(--p-form-field-invalid-placeholder-color);border-radius:5px}p-datepicker{display:flex}.p-datepicker{flex-grow:1}.p-datepicker-panel{min-width:400px!important}.p-inputgroupaddon{padding:0!important}p-autocomplete input.p-autocomplete-input{width:100%}input.p-select-filter{width:100%!important}textarea{resize:none}.p-select-clear-icon{margin-top:-.5rem!important}\n", ".frm-padding-left-22{padding-left:22px}.drop-container{position:relative;display:flex;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}\n"], dependencies: [{ kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: InputSkeletonComponent, selector: "input-skeleton", inputs: ["For", "Control"] }, { kind: "ngmodule", type: LocalizationModule }, { kind: "pipe", type: i4$1.LocalizePipe, name: "localize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<input-skeleton *ngIf=\"FancyMode === false\" [Control]=\"controlTemplate\" [For]=\"this\"></input-skeleton>\r\n\r\n<ng-template #controlTemplate>\r\n    <div class=\"input-group file-upload\" style=\"padding: 0 !important;\">\r\n        <input type=\"file\" (change)=\"fileChange()\" id=\"{{InternalName}}\" #innerElement style=\"height: 0; width:0; padding:0; margin:0; position: absolute; opacity:0\" [multiple]=\"Multiple ? true : null\" />\r\n        <input type=\"text\" \r\n            (click)=\"openFileDialog();\"\r\n            [class.frm-padding-left-22]=\"AllowDownload && value.filename && value.fileb64\" \r\n            class=\"form-control checking-field\" \r\n            style=\"border-top-left-radius: 5px; border-bottom-left-radius: 5px; height: 46px;\"\r\n            [style.padding-left.px]=\"AllowDownload && value.filename && value.fileb64 ? 40 : 12\"\r\n            placeholder=\"{{Placeholder || ('Seleziona un File' | localize : lc)}}...\" \r\n            [(ngModel)]=\"value.filename\" name=\"dsfile_{{InternalName}}\" \r\n            #innerInput=\"ngModel\" />\r\n        \r\n        <a class=\"fa fa-download app-pointer app-input-icon\" style=\"padding-left: 10px; padding-top: 5px; color: #666; z-index: 9999;\" *ngIf=\"AllowDownload && value.filename && value.fileb64\" (click)=\"onDownloadFile()\"></a>\r\n        <i class=\"fa fa-times delete-file\" style=\"margin-right: 15px; margin-top: 7px; color: #666;\" (click)=\"fileChange(true)\" *ngIf=\"value.filename\"></i>\r\n        \r\n        <span class=\"input-group-btn\">\r\n            <button class=\"btn btn-primary btn-file-upload\" style=\"height: 46px;\r\n            border-top-right-radius: 5px;\r\n            border-bottom-right-radius: 5px;\r\n            background: var(--p-surface-50) !important;\r\n            border: 1px solid var(--p-surface-300) !important;\r\n            color: #777;\" type=\"button\"><i class=\"fa fa-upload\" (click)=\"openFileDialog();\"></i></button>\r\n        </span>\r\n    </div>\r\n</ng-template>\r\n\r\n<!--Fancy Mode-->\r\n<div *ngIf=\"FancyMode === true\" (drop)=\"onFileDropped($event)\" (dragover)=\"onFileDragOver($event)\">\r\n    <!--Drop-->\r\n    <label for=\"{{InternalName}}\" class=\"drop-container\">\r\n        <span class=\"drop-title\">{{Label}}</span>\r\n        <div class=\"file-name-container\">{{value.filename || 'Nessun file selezionato'}}</div>\r\n        <!--Hidden Forms-->\r\n        <input hidden type=\"file\" (change)=\"fileChange()\" id=\"{{InternalName}}\" #innerElement class=\"file-upload-btn app-pointer\" [multiple]=\"Multiple ? true : null\" />\r\n        <input hidden type=\"text\" [class.frm-padding-left-22]=\"AllowDownload && value.filename && value.fileb64\" class=\"form-control checking-field\" \r\n               placeholder=\"{{Placeholder || ('Seleziona un File' | localize : lc)}}...\" [(ngModel)]=\"value.filename\" name=\"dsfile_{{InternalName}}\" #innerInput=\"ngModel\" />\r\n        <!--Clean-->\r\n        <i class=\"fa fa-times file-delete-btn\" (click)=\"fileChange(true); $event.stopPropagation(); false;\" *ngIf=\"value.filename\"></i>\r\n        <!--Download-->\r\n        <div *ngIf=\"AllowDownload && value.filename && value.fileb64\" class=\"app-pointer file-download-btn\" (click)=\"onDownloadFile(); $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<p-popover styleClass='validation-tooltip' #tooltip>{{TooltipText}}</p-popover>", styles: [".validation-tooltip.p-popover:before,.validation-tooltip.p-popover:after{border-bottom-color:var(--p-form-field-invalid-placeholder-color)}.validation-tooltip .p-popover-content{padding:5px;color:#fff;background:var(--p-form-field-invalid-placeholder-color);border-radius:5px}p-datepicker{display:flex}.p-datepicker{flex-grow:1}.p-datepicker-panel{min-width:400px!important}.p-inputgroupaddon{padding:0!important}p-autocomplete input.p-autocomplete-input{width:100%}input.p-select-filter{width:100%!important}textarea{resize:none}.p-select-clear-icon{margin-top:-.5rem!important}\n", ".frm-padding-left-22{padding-left:22px}.drop-container{position:relative;display:flex;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}\n"], dependencies: [{ kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: InputSkeletonComponent, selector: "input-skeleton", inputs: ["For", "Control"] }, { kind: "ngmodule", type: LocalizationModule }, { kind: "pipe", type: i4$1.LocalizePipe, name: "localize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EsFormFileComponent, decorators: [{
             type: Component,
             args: [{ selector: "form-file", encapsulation: ViewEncapsulation.None, imports: [TextareaModule, FormsModule, CommonModule, FloatLabelModule, PopoverModule, InputGroupModule, InputGroupAddonModule, InputSkeletonComponent, LocalizationModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => EsFormFileComponent), multi: true },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => EsFormFileComponent), multi: true }
-                    ], standalone: true, template: "<input-skeleton *ngIf=\"FancyMode === false\" [Control]=\"controlTemplate\" [For]=\"this\"></input-skeleton>\r\n\r\n<ng-template #controlTemplate>\r\n    <div class=\"input-group file-upload\" style=\"padding: 0 !important;\">\r\n        <input type=\"file\" (change)=\"fileChange()\" id=\"{{InternalName}}\" #innerElement class=\"file-upload-btn app-pointer\" style=\"height: 46px;\" [multiple]=\"Multiple ? true : null\" />\r\n        <input type=\"text\" \r\n            [class.frm-padding-left-22]=\"AllowDownload && value.filename && value.fileb64\" \r\n            class=\"form-control checking-field\" \r\n            style=\"border-top-left-radius: 5px; border-bottom-left-radius: 5px; height: 46px;\"\r\n            [style.padding-left.px]=\"AllowDownload && value.filename && value.fileb64 ? 40 : 12\"\r\n            placeholder=\"{{Placeholder || ('Seleziona un File' | localize : lc)}}...\" \r\n            [(ngModel)]=\"value.filename\" name=\"dsfile_{{InternalName}}\" \r\n            #innerInput=\"ngModel\" />\r\n        \r\n        <a class=\"fa fa-download app-pointer app-input-icon\" style=\"padding-left: 10px; padding-top: 5px; color: #666; z-index: 9999;\" *ngIf=\"AllowDownload && value.filename && value.fileb64\" (click)=\"onDownloadFile()\"></a>\r\n        <i class=\"fa fa-times delete-file\" style=\"margin-right: 15px; margin-top: 7px; color: #666;\" (click)=\"fileChange(true)\" *ngIf=\"value.filename\"></i>\r\n        \r\n        <span class=\"input-group-btn\">\r\n            <button class=\"btn btn-primary btn-file-upload\" style=\"height: 46px;\r\n            border-top-right-radius: 5px;\r\n            border-bottom-right-radius: 5px;\r\n            background: var(--p-surface-50) !important;\r\n            border: 1px solid var(--p-surface-300) !important;\r\n            color: #777;\" type=\"button\"><i class=\"fa fa-upload\"></i></button>\r\n        </span>\r\n    </div>\r\n</ng-template>\r\n\r\n<!--Fancy Mode-->\r\n<div *ngIf=\"FancyMode === true\" (drop)=\"onFileDropped($event)\" (dragover)=\"onFileDragOver($event)\">\r\n    <!--Drop-->\r\n    <label for=\"{{InternalName}}\" class=\"drop-container\">\r\n        <span class=\"drop-title\">{{Label}}</span>\r\n        <div class=\"file-name-container\">{{value.filename || 'Nessun file selezionato'}}</div>\r\n        <!--Hidden Forms-->\r\n        <input hidden type=\"file\" (change)=\"fileChange()\" id=\"{{InternalName}}\" #innerElement class=\"file-upload-btn app-pointer\" [multiple]=\"Multiple ? true : null\" />\r\n        <input hidden type=\"text\" [class.frm-padding-left-22]=\"AllowDownload && value.filename && value.fileb64\" class=\"form-control checking-field\" \r\n               placeholder=\"{{Placeholder || ('Seleziona un File' | localize : lc)}}...\" [(ngModel)]=\"value.filename\" name=\"dsfile_{{InternalName}}\" #innerInput=\"ngModel\" />\r\n        <!--Clean-->\r\n        <i class=\"fa fa-times file-delete-btn\" (click)=\"fileChange(true); $event.stopPropagation(); false;\" *ngIf=\"value.filename\"></i>\r\n        <!--Download-->\r\n        <div *ngIf=\"AllowDownload && value.filename && value.fileb64\" class=\"app-pointer file-download-btn\" (click)=\"onDownloadFile(); $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<p-popover styleClass='validation-tooltip' #tooltip>{{TooltipText}}</p-popover>", styles: [".validation-tooltip.p-popover:before,.validation-tooltip.p-popover:after{border-bottom-color:var(--p-form-field-invalid-placeholder-color)}.validation-tooltip .p-popover-content{padding:5px;color:#fff;background:var(--p-form-field-invalid-placeholder-color);border-radius:5px}p-datepicker{display:flex}.p-datepicker{flex-grow:1}.p-datepicker-panel{min-width:400px!important}.p-inputgroupaddon{padding:0!important}p-autocomplete input.p-autocomplete-input{width:100%}input.p-select-filter{width:100%!important}textarea{resize:none}.p-select-clear-icon{margin-top:-.5rem!important}\n", ".frm-padding-left-22{padding-left:22px}.drop-container{position:relative;display:flex;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}\n"] }]
+                    ], standalone: true, template: "<input-skeleton *ngIf=\"FancyMode === false\" [Control]=\"controlTemplate\" [For]=\"this\"></input-skeleton>\r\n\r\n<ng-template #controlTemplate>\r\n    <div class=\"input-group file-upload\" style=\"padding: 0 !important;\">\r\n        <input type=\"file\" (change)=\"fileChange()\" id=\"{{InternalName}}\" #innerElement style=\"height: 0; width:0; padding:0; margin:0; position: absolute; opacity:0\" [multiple]=\"Multiple ? true : null\" />\r\n        <input type=\"text\" \r\n            (click)=\"openFileDialog();\"\r\n            [class.frm-padding-left-22]=\"AllowDownload && value.filename && value.fileb64\" \r\n            class=\"form-control checking-field\" \r\n            style=\"border-top-left-radius: 5px; border-bottom-left-radius: 5px; height: 46px;\"\r\n            [style.padding-left.px]=\"AllowDownload && value.filename && value.fileb64 ? 40 : 12\"\r\n            placeholder=\"{{Placeholder || ('Seleziona un File' | localize : lc)}}...\" \r\n            [(ngModel)]=\"value.filename\" name=\"dsfile_{{InternalName}}\" \r\n            #innerInput=\"ngModel\" />\r\n        \r\n        <a class=\"fa fa-download app-pointer app-input-icon\" style=\"padding-left: 10px; padding-top: 5px; color: #666; z-index: 9999;\" *ngIf=\"AllowDownload && value.filename && value.fileb64\" (click)=\"onDownloadFile()\"></a>\r\n        <i class=\"fa fa-times delete-file\" style=\"margin-right: 15px; margin-top: 7px; color: #666;\" (click)=\"fileChange(true)\" *ngIf=\"value.filename\"></i>\r\n        \r\n        <span class=\"input-group-btn\">\r\n            <button class=\"btn btn-primary btn-file-upload\" style=\"height: 46px;\r\n            border-top-right-radius: 5px;\r\n            border-bottom-right-radius: 5px;\r\n            background: var(--p-surface-50) !important;\r\n            border: 1px solid var(--p-surface-300) !important;\r\n            color: #777;\" type=\"button\"><i class=\"fa fa-upload\" (click)=\"openFileDialog();\"></i></button>\r\n        </span>\r\n    </div>\r\n</ng-template>\r\n\r\n<!--Fancy Mode-->\r\n<div *ngIf=\"FancyMode === true\" (drop)=\"onFileDropped($event)\" (dragover)=\"onFileDragOver($event)\">\r\n    <!--Drop-->\r\n    <label for=\"{{InternalName}}\" class=\"drop-container\">\r\n        <span class=\"drop-title\">{{Label}}</span>\r\n        <div class=\"file-name-container\">{{value.filename || 'Nessun file selezionato'}}</div>\r\n        <!--Hidden Forms-->\r\n        <input hidden type=\"file\" (change)=\"fileChange()\" id=\"{{InternalName}}\" #innerElement class=\"file-upload-btn app-pointer\" [multiple]=\"Multiple ? true : null\" />\r\n        <input hidden type=\"text\" [class.frm-padding-left-22]=\"AllowDownload && value.filename && value.fileb64\" class=\"form-control checking-field\" \r\n               placeholder=\"{{Placeholder || ('Seleziona un File' | localize : lc)}}...\" [(ngModel)]=\"value.filename\" name=\"dsfile_{{InternalName}}\" #innerInput=\"ngModel\" />\r\n        <!--Clean-->\r\n        <i class=\"fa fa-times file-delete-btn\" (click)=\"fileChange(true); $event.stopPropagation(); false;\" *ngIf=\"value.filename\"></i>\r\n        <!--Download-->\r\n        <div *ngIf=\"AllowDownload && value.filename && value.fileb64\" class=\"app-pointer file-download-btn\" (click)=\"onDownloadFile(); $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<p-popover styleClass='validation-tooltip' #tooltip>{{TooltipText}}</p-popover>", styles: [".validation-tooltip.p-popover:before,.validation-tooltip.p-popover:after{border-bottom-color:var(--p-form-field-invalid-placeholder-color)}.validation-tooltip .p-popover-content{padding:5px;color:#fff;background:var(--p-form-field-invalid-placeholder-color);border-radius:5px}p-datepicker{display:flex}.p-datepicker{flex-grow:1}.p-datepicker-panel{min-width:400px!important}.p-inputgroupaddon{padding:0!important}p-autocomplete input.p-autocomplete-input{width:100%}input.p-select-filter{width:100%!important}textarea{resize:none}.p-select-clear-icon{margin-top:-.5rem!important}\n", ".frm-padding-left-22{padding-left:22px}.drop-container{position:relative;display:flex;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}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { Multiple: [{
                 type: Input
             }], AllowDownload: [{
@@ -1156,6 +1159,7 @@ class EsFormAutocompleteComponent extends BaseFormControl {
         this.SearchFunction = null;
         this.style = signal({ "width": "100%" });
         this.typeahead = signal(true);
+        this.mode = signal("autocomplete");
     }
     ngOnInit() {
         super.ngOnInit();
@@ -1173,9 +1177,13 @@ class EsFormAutocompleteComponent extends BaseFormControl {
     }
     ngAfterViewInit() {
         super.ngAfterViewInit();
+        this.setInputMode();
         // Eh... checcedevofa
         this.innerElement = this.innerElement.el;
     }
+    setInputMode() {
+        this.mode.set("autocomplete");
+    }
     search(event) {
         if (this.SearchFunction) {
             this.SearchFunction(event.query, false, this.SearchFunctionContext).subscribe(t => {
@@ -1240,11 +1248,11 @@ class EsFormAutocompleteComponent extends BaseFormControl {
         return Array.isArray(value) ? value.map(id => this.BoundSourceCache[id]?.description ?? id).join(',') : this.BoundSourceCache[value]?.description ?? value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EsFormAutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: EsFormAutocompleteComponent, isStandalone: true, selector: "form-autocomplete", inputs: { MinChars: { classPropertyName: "MinChars", publicName: "MinChars", isSignal: true, isRequired: false, transformFunction: null }, SearchFunctionContext: { classPropertyName: "SearchFunctionContext", publicName: "SearchFunctionContext", isSignal: false, isRequired: false, transformFunction: null }, SearchFunction: { classPropertyName: "SearchFunction", publicName: "SearchFunction", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, forceSelection: { classPropertyName: "forceSelection", publicName: "forceSelection", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => EsFormAutocompleteComponent), multi: true }], usesInheritance: true, ngImport: i0, template: "<!-- Riga di debug -->\r\n<!-- <div><strong>Valore interno:</strong> {{value | json}}</div> -->\r\n\r\n<input-skeleton [Control]=\"controlTemplate\" [For]=\"this\"></input-skeleton>\r\n\r\n<ng-template #controlTemplate>\r\n    <p-floatlabel variant=\"on\">\r\n        <p-autocomplete \r\n            size=\"small\" \r\n            autocomplete=\"off\"\r\n            #innerInput=\"ngModel\" \r\n            #innerElement \r\n            [style]=\"style()\"\r\n            [attr.name]=\"InternalName\" \r\n            [attr.id]=\"InternalName\" \r\n            [multiple]=\"multiple\"\r\n            [fluid]=\"multiple\"\r\n            [disabled]=\"disabled\" \r\n            [required]=\"required\"\r\n            [readonly]=\"readonly\"\r\n            [suggestions]=\"BoundSource()\"\r\n            [forceSelection]=\"forceSelection\"\r\n            [typeahead]=\"typeahead()\"\r\n            [virtualScroll]=\"true\"\r\n            [virtualScrollItemSize]=\"44\"\r\n            optionLabel=\"description\"\r\n            (completeMethod)=\"search($event)\"\r\n            [minLength]=\"MinChars()\"\r\n            [ngModel]=\"value\" \r\n            (ngModelChange)=\"changed($event)\" \r\n            (click)=\"focused($event);\"\r\n            (blur)=\"onTouched(); finalized()\">\r\n        </p-autocomplete>\r\n\r\n        <label>{{Placeholder}}</label>\r\n    </p-floatlabel>\r\n</ng-template>\r\n\r\n<p-popover styleClass='validation-tooltip' #tooltip>{{TooltipText}}</p-popover>", styles: [".validation-tooltip.p-popover:before,.validation-tooltip.p-popover:after{border-bottom-color:var(--p-form-field-invalid-placeholder-color)}.validation-tooltip .p-popover-content{padding:5px;color:#fff;background:var(--p-form-field-invalid-placeholder-color);border-radius:5px}p-datepicker{display:flex}.p-datepicker{flex-grow:1}.p-datepicker-panel{min-width:400px!important}.p-inputgroupaddon{padding:0!important}p-autocomplete input.p-autocomplete-input{width:100%}input.p-select-filter{width:100%!important}textarea{resize:none}.p-select-clear-icon{margin-top:-.5rem!important}\n"], dependencies: [{ kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i1$6.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: InputSkeletonComponent, selector: "input-skeleton", inputs: ["For", "Control"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: EsFormAutocompleteComponent, isStandalone: true, selector: "form-autocomplete", inputs: { MinChars: { classPropertyName: "MinChars", publicName: "MinChars", isSignal: true, isRequired: false, transformFunction: null }, SearchFunctionContext: { classPropertyName: "SearchFunctionContext", publicName: "SearchFunctionContext", isSignal: false, isRequired: false, transformFunction: null }, SearchFunction: { classPropertyName: "SearchFunction", publicName: "SearchFunction", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, forceSelection: { classPropertyName: "forceSelection", publicName: "forceSelection", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => EsFormAutocompleteComponent), multi: true }], usesInheritance: true, ngImport: i0, template: "<!-- Riga di debug -->\r\n<!-- <div><strong>Valore interno:</strong> {{value | json}}</div> -->\r\n\r\n<input-skeleton [Control]=\"controlTemplate\" [For]=\"this\"></input-skeleton>\r\n\r\n<ng-template #controlTemplate>\r\n    <p-floatlabel variant=\"on\">\r\n        <p-autocomplete \r\n            size=\"small\" \r\n            autocomplete=\"off\"\r\n            #innerInput=\"ngModel\" \r\n            #innerElement \r\n            [style]=\"style()\"\r\n            [attr.name]=\"InternalName\" \r\n            [attr.id]=\"InternalName\" \r\n            [multiple]=\"mode() == 'chips' ? false: multiple\"\r\n            [fluid]=\"multiple\"\r\n            [disabled]=\"disabled\" \r\n            [required]=\"required\"\r\n            [readonly]=\"readonly\"\r\n            [suggestions]=\"BoundSource()\"\r\n            [forceSelection]=\"forceSelection\"\r\n            [typeahead]=\"mode() == 'chips' ? false : typeahead()\"\r\n            [virtualScroll]=\"true\"\r\n            [virtualScrollItemSize]=\"44\"\r\n            optionLabel=\"description\"\r\n            (completeMethod)=\"search($event)\"\r\n            [minLength]=\"MinChars()\"\r\n            [ngModel]=\"value\" \r\n            (ngModelChange)=\"changed($event)\" \r\n            (click)=\"focused($event);\"\r\n            (blur)=\"onTouched(); finalized()\">\r\n        </p-autocomplete>\r\n\r\n        <label>{{Placeholder}}</label>\r\n    </p-floatlabel>\r\n</ng-template>\r\n\r\n<p-popover styleClass='validation-tooltip' #tooltip>{{TooltipText}}</p-popover>", styles: [".validation-tooltip.p-popover:before,.validation-tooltip.p-popover:after{border-bottom-color:var(--p-form-field-invalid-placeholder-color)}.validation-tooltip .p-popover-content{padding:5px;color:#fff;background:var(--p-form-field-invalid-placeholder-color);border-radius:5px}p-datepicker{display:flex}.p-datepicker{flex-grow:1}.p-datepicker-panel{min-width:400px!important}.p-inputgroupaddon{padding:0!important}p-autocomplete input.p-autocomplete-input{width:100%}input.p-select-filter{width:100%!important}textarea{resize:none}.p-select-clear-icon{margin-top:-.5rem!important}\n"], dependencies: [{ kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i1$6.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: InputSkeletonComponent, selector: "input-skeleton", inputs: ["For", "Control"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EsFormAutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: "form-autocomplete", encapsulation: ViewEncapsulation.None, imports: [AutoCompleteModule, AutoComplete, FormsModule, CommonModule, FloatLabelModule, PopoverModule, InputGroupModule, InputGroupAddonModule, InputSkeletonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => EsFormAutocompleteComponent), multi: true }], standalone: true, template: "<!-- Riga di debug -->\r\n<!-- <div><strong>Valore interno:</strong> {{value | json}}</div> -->\r\n\r\n<input-skeleton [Control]=\"controlTemplate\" [For]=\"this\"></input-skeleton>\r\n\r\n<ng-template #controlTemplate>\r\n    <p-floatlabel variant=\"on\">\r\n        <p-autocomplete \r\n            size=\"small\" \r\n            autocomplete=\"off\"\r\n            #innerInput=\"ngModel\" \r\n            #innerElement \r\n            [style]=\"style()\"\r\n            [attr.name]=\"InternalName\" \r\n            [attr.id]=\"InternalName\" \r\n            [multiple]=\"multiple\"\r\n            [fluid]=\"multiple\"\r\n            [disabled]=\"disabled\" \r\n            [required]=\"required\"\r\n            [readonly]=\"readonly\"\r\n            [suggestions]=\"BoundSource()\"\r\n            [forceSelection]=\"forceSelection\"\r\n            [typeahead]=\"typeahead()\"\r\n            [virtualScroll]=\"true\"\r\n            [virtualScrollItemSize]=\"44\"\r\n            optionLabel=\"description\"\r\n            (completeMethod)=\"search($event)\"\r\n            [minLength]=\"MinChars()\"\r\n            [ngModel]=\"value\" \r\n            (ngModelChange)=\"changed($event)\" \r\n            (click)=\"focused($event);\"\r\n            (blur)=\"onTouched(); finalized()\">\r\n        </p-autocomplete>\r\n\r\n        <label>{{Placeholder}}</label>\r\n    </p-floatlabel>\r\n</ng-template>\r\n\r\n<p-popover styleClass='validation-tooltip' #tooltip>{{TooltipText}}</p-popover>", styles: [".validation-tooltip.p-popover:before,.validation-tooltip.p-popover:after{border-bottom-color:var(--p-form-field-invalid-placeholder-color)}.validation-tooltip .p-popover-content{padding:5px;color:#fff;background:var(--p-form-field-invalid-placeholder-color);border-radius:5px}p-datepicker{display:flex}.p-datepicker{flex-grow:1}.p-datepicker-panel{min-width:400px!important}.p-inputgroupaddon{padding:0!important}p-autocomplete input.p-autocomplete-input{width:100%}input.p-select-filter{width:100%!important}textarea{resize:none}.p-select-clear-icon{margin-top:-.5rem!important}\n"] }]
+            args: [{ selector: "form-autocomplete", encapsulation: ViewEncapsulation.None, imports: [AutoCompleteModule, AutoComplete, FormsModule, CommonModule, FloatLabelModule, PopoverModule, InputGroupModule, InputGroupAddonModule, InputSkeletonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => EsFormAutocompleteComponent), multi: true }], standalone: true, template: "<!-- Riga di debug -->\r\n<!-- <div><strong>Valore interno:</strong> {{value | json}}</div> -->\r\n\r\n<input-skeleton [Control]=\"controlTemplate\" [For]=\"this\"></input-skeleton>\r\n\r\n<ng-template #controlTemplate>\r\n    <p-floatlabel variant=\"on\">\r\n        <p-autocomplete \r\n            size=\"small\" \r\n            autocomplete=\"off\"\r\n            #innerInput=\"ngModel\" \r\n            #innerElement \r\n            [style]=\"style()\"\r\n            [attr.name]=\"InternalName\" \r\n            [attr.id]=\"InternalName\" \r\n            [multiple]=\"mode() == 'chips' ? false: multiple\"\r\n            [fluid]=\"multiple\"\r\n            [disabled]=\"disabled\" \r\n            [required]=\"required\"\r\n            [readonly]=\"readonly\"\r\n            [suggestions]=\"BoundSource()\"\r\n            [forceSelection]=\"forceSelection\"\r\n            [typeahead]=\"mode() == 'chips' ? false : typeahead()\"\r\n            [virtualScroll]=\"true\"\r\n            [virtualScrollItemSize]=\"44\"\r\n            optionLabel=\"description\"\r\n            (completeMethod)=\"search($event)\"\r\n            [minLength]=\"MinChars()\"\r\n            [ngModel]=\"value\" \r\n            (ngModelChange)=\"changed($event)\" \r\n            (click)=\"focused($event);\"\r\n            (blur)=\"onTouched(); finalized()\">\r\n        </p-autocomplete>\r\n\r\n        <label>{{Placeholder}}</label>\r\n    </p-floatlabel>\r\n</ng-template>\r\n\r\n<p-popover styleClass='validation-tooltip' #tooltip>{{TooltipText}}</p-popover>", styles: [".validation-tooltip.p-popover:before,.validation-tooltip.p-popover:after{border-bottom-color:var(--p-form-field-invalid-placeholder-color)}.validation-tooltip .p-popover-content{padding:5px;color:#fff;background:var(--p-form-field-invalid-placeholder-color);border-radius:5px}p-datepicker{display:flex}.p-datepicker{flex-grow:1}.p-datepicker-panel{min-width:400px!important}.p-inputgroupaddon{padding:0!important}p-autocomplete input.p-autocomplete-input{width:100%}input.p-select-filter{width:100%!important}textarea{resize:none}.p-select-clear-icon{margin-top:-.5rem!important}\n"] }]
         }], propDecorators: { SearchFunctionContext: [{
                 type: Input
             }], SearchFunction: [{
@@ -1441,9 +1449,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 type: Input
             }] } });
 
+// Angular
+class EsFormChipsComponent extends EsFormAutocompleteComponent {
+    constructor() {
+        super(...arguments);
+        this.ValidateEmail = false;
+    }
+    setInputMode() {
+        this.mode.set("chips");
+    }
+    validate(_) {
+        if (this.required && (!this.value || this.value.length == 0))
+            return { error: "required" };
+        // Validazione Email
+        if (this.ValidateEmail && this.value) {
+            let errors = this.value.map(m => { return !m.toLowerCase().match(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/); });
+            if (errors.find(f => f == true))
+                return { error: "Dati inseriti non validi" };
+        }
+        return null;
+    }
+    registerOnValidatorChange(fn) {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EsFormChipsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: EsFormChipsComponent, isStandalone: true, selector: "form-chips", inputs: { ValidateEmail: "ValidateEmail" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => EsFormChipsComponent), multi: true }], usesInheritance: true, ngImport: i0, template: "<!-- Riga di debug -->\r\n<!-- <div><strong>Valore interno:</strong> {{value | json}}</div> -->\r\n\r\n<input-skeleton [Control]=\"controlTemplate\" [For]=\"this\"></input-skeleton>\r\n\r\n<ng-template #controlTemplate>\r\n    <p-floatlabel variant=\"on\">\r\n        <p-autocomplete \r\n            size=\"small\" \r\n            autocomplete=\"off\"\r\n            #innerInput=\"ngModel\" \r\n            #innerElement \r\n            [style]=\"style()\"\r\n            [attr.name]=\"InternalName\" \r\n            [attr.id]=\"InternalName\" \r\n            [multiple]=\"mode() == 'chips' ? false: multiple\"\r\n            [fluid]=\"multiple\"\r\n            [disabled]=\"disabled\" \r\n            [required]=\"required\"\r\n            [readonly]=\"readonly\"\r\n            [suggestions]=\"BoundSource()\"\r\n            [forceSelection]=\"forceSelection\"\r\n            [typeahead]=\"mode() == 'chips' ? false : typeahead()\"\r\n            [virtualScroll]=\"true\"\r\n            [virtualScrollItemSize]=\"44\"\r\n            optionLabel=\"description\"\r\n            (completeMethod)=\"search($event)\"\r\n            [minLength]=\"MinChars()\"\r\n            [ngModel]=\"value\" \r\n            (ngModelChange)=\"changed($event)\" \r\n            (click)=\"focused($event);\"\r\n            (blur)=\"onTouched(); finalized()\">\r\n        </p-autocomplete>\r\n\r\n        <label>{{Placeholder}}</label>\r\n    </p-floatlabel>\r\n</ng-template>\r\n\r\n<p-popover styleClass='validation-tooltip' #tooltip>{{TooltipText}}</p-popover>", styles: [".validation-tooltip.p-popover:before,.validation-tooltip.p-popover:after{border-bottom-color:var(--p-form-field-invalid-placeholder-color)}.validation-tooltip .p-popover-content{padding:5px;color:#fff;background:var(--p-form-field-invalid-placeholder-color);border-radius:5px}p-datepicker{display:flex}.p-datepicker{flex-grow:1}.p-datepicker-panel{min-width:400px!important}.p-inputgroupaddon{padding:0!important}p-autocomplete input.p-autocomplete-input{width:100%}input.p-select-filter{width:100%!important}textarea{resize:none}.p-select-clear-icon{margin-top:-.5rem!important}\n"], dependencies: [{ kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i1$6.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: InputSkeletonComponent, selector: "input-skeleton", inputs: ["For", "Control"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EsFormChipsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "form-chips", encapsulation: ViewEncapsulation.None, imports: [AutoCompleteModule, AutoComplete, FormsModule, CommonModule, FloatLabelModule, PopoverModule, InputGroupModule, InputGroupAddonModule, InputSkeletonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => EsFormChipsComponent), multi: true }], standalone: true, template: "<!-- Riga di debug -->\r\n<!-- <div><strong>Valore interno:</strong> {{value | json}}</div> -->\r\n\r\n<input-skeleton [Control]=\"controlTemplate\" [For]=\"this\"></input-skeleton>\r\n\r\n<ng-template #controlTemplate>\r\n    <p-floatlabel variant=\"on\">\r\n        <p-autocomplete \r\n            size=\"small\" \r\n            autocomplete=\"off\"\r\n            #innerInput=\"ngModel\" \r\n            #innerElement \r\n            [style]=\"style()\"\r\n            [attr.name]=\"InternalName\" \r\n            [attr.id]=\"InternalName\" \r\n            [multiple]=\"mode() == 'chips' ? false: multiple\"\r\n            [fluid]=\"multiple\"\r\n            [disabled]=\"disabled\" \r\n            [required]=\"required\"\r\n            [readonly]=\"readonly\"\r\n            [suggestions]=\"BoundSource()\"\r\n            [forceSelection]=\"forceSelection\"\r\n            [typeahead]=\"mode() == 'chips' ? false : typeahead()\"\r\n            [virtualScroll]=\"true\"\r\n            [virtualScrollItemSize]=\"44\"\r\n            optionLabel=\"description\"\r\n            (completeMethod)=\"search($event)\"\r\n            [minLength]=\"MinChars()\"\r\n            [ngModel]=\"value\" \r\n            (ngModelChange)=\"changed($event)\" \r\n            (click)=\"focused($event);\"\r\n            (blur)=\"onTouched(); finalized()\">\r\n        </p-autocomplete>\r\n\r\n        <label>{{Placeholder}}</label>\r\n    </p-floatlabel>\r\n</ng-template>\r\n\r\n<p-popover styleClass='validation-tooltip' #tooltip>{{TooltipText}}</p-popover>", styles: [".validation-tooltip.p-popover:before,.validation-tooltip.p-popover:after{border-bottom-color:var(--p-form-field-invalid-placeholder-color)}.validation-tooltip .p-popover-content{padding:5px;color:#fff;background:var(--p-form-field-invalid-placeholder-color);border-radius:5px}p-datepicker{display:flex}.p-datepicker{flex-grow:1}.p-datepicker-panel{min-width:400px!important}.p-inputgroupaddon{padding:0!important}p-autocomplete input.p-autocomplete-input{width:100%}input.p-select-filter{width:100%!important}textarea{resize:none}.p-select-clear-icon{margin-top:-.5rem!important}\n"] }]
+        }], propDecorators: { ValidateEmail: [{
+                type: Input
+            }] } });
+
 // Angular
 /** Componenti Standalone reesportati come se fossero moduli */
 const STANDALONE_COMPONENTS = [
+    EsFormChipsComponent,
     EsFormInputComponent,
     EsFormSelectComponent,
     EsFormDateComponent,
@@ -1478,7 +1519,8 @@ class FormsAndValidationsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FormsAndValidationsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: FormsAndValidationsModule, imports: [CommonModule,
             FormsModule,
-            LocalizationModule, EsFormInputComponent,
+            LocalizationModule, EsFormChipsComponent,
+            EsFormInputComponent,
             EsFormSelectComponent,
             EsFormDateComponent,
             EsFormDateTimeComponent,
@@ -1492,7 +1534,8 @@ class FormsAndValidationsModule {
             EsFormMultiselectComponent,
             EsFormAutocompleteComponent,
             EsFormAdaptiveComponent,
-            EsFormCurrencyComponent], exports: [EsFormInputComponent,
+            EsFormCurrencyComponent], exports: [EsFormChipsComponent,
+            EsFormInputComponent,
             EsFormSelectComponent,
             EsFormDateComponent,
             EsFormDateTimeComponent,
@@ -1523,5 +1566,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AppFile, BaseFormControl, ChangeEvent, EsFormAdaptiveComponent, EsFormAutocompleteComponent, EsFormCheckboxComponent, EsFormCurrencyComponent, EsFormDateComponent, EsFormDateTimeComponent, EsFormErrorComponent, EsFormFileComponent, EsFormInfoComponent, EsFormInputComponent, EsFormMultiselectComponent, EsFormSelectComponent, EsFormTemplateComponent, EsFormTextareaComponent, EsFormTimeComponent, EsFormsModuleConfig, FRM_DEBUG_MODE, FormsAndValidationsModule };
+export { AppFile, BaseFormControl, ChangeEvent, EsFormAdaptiveComponent, EsFormAutocompleteComponent, EsFormCheckboxComponent, EsFormChipsComponent, EsFormCurrencyComponent, EsFormDateComponent, EsFormDateTimeComponent, EsFormErrorComponent, EsFormFileComponent, EsFormInfoComponent, EsFormInputComponent, EsFormMultiselectComponent, EsFormSelectComponent, EsFormTemplateComponent, EsFormTextareaComponent, EsFormTimeComponent, EsFormsModuleConfig, FRM_DEBUG_MODE, FormsAndValidationsModule };
 //# sourceMappingURL=esfaenza-forms-and-validations.mjs.map