From d3b3d2ce61d8dee0ea1a323af776f8f054eb81f9 Mon Sep 17 00:00:00 2001
From: Simone Angeloni Bei <simone.angeloni.bei@gmail.com>
Date: Mon, 12 May 2025 17:09:06 +0200
Subject: [PATCH] Aggiunte api, traduzione e ngmodel

---
 src/index.ts                                  |   3 +-
 .../nbp-fid-calendar-generic.component.html   | 143 ++++--
 .../nbp-fid-calendar-generic.component.ts     | 444 +++++++++++-----
 .../nbp-fid-combo/nbp-fid-combo.component.ts  |   2 +-
 .../showcase/showcase1.component.html         | 483 +++++++++++-------
 .../showcase/showcase1.component.ts           |   2 +-
 6 files changed, 702 insertions(+), 375 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index e1ee4e3..3f43b6f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -41,6 +41,7 @@ export { WidgetFideuramShowcaseComponent } from './widgetfideuram/components/wid
 import { AgGridModule, AngularFrameworkComponentWrapper, AngularFrameworkOverrides } from 'ag-grid-angular';
 import { FormsModule } from '@angular/forms';
 import { NbpFidCalendarGenericComponent } from './widgetfideuram/components/nbp-fid-calendar-generic/nbp-fid-calendar-generic.component';
+import { TranslateModule } from '@ngx-translate/core';
 export { NbpFidCalendarGenericComponent } from './widgetfideuram/components/nbp-fid-calendar-generic/nbp-fid-calendar-generic.component';
 export { AgGridModule } from 'ag-grid-angular';
 
@@ -53,7 +54,7 @@ export { DATE_STRING_FORMAT, formatDate, formatNumber, setSpinnerMessage, clearS
     NbpModule,
     AgGridModule,
     FormsModule,
-    ReactiveFormsModule,
+    TranslateModule
   ],
   declarations: [
     NbpBreadCrumbsComponent,
diff --git a/src/widgetfideuram/components/nbp-fid-calendar-generic/nbp-fid-calendar-generic.component.html b/src/widgetfideuram/components/nbp-fid-calendar-generic/nbp-fid-calendar-generic.component.html
index 22e855c..760c999 100644
--- a/src/widgetfideuram/components/nbp-fid-calendar-generic/nbp-fid-calendar-generic.component.html
+++ b/src/widgetfideuram/components/nbp-fid-calendar-generic/nbp-fid-calendar-generic.component.html
@@ -1,91 +1,124 @@
 <div class="datepicker-wrapper">
-  <input #dateInput 
-         class="datepicker-input" 
-         type="text" 
-         placeholder="DD/MM/YYYY" 
-         [value]="formattedSelectedDate"
-         (input)="onDateInputChange($event)" />
+  <input
+    #dateInput
+    [disabled]="disabled"
+    [id]="id"
+    [name]="name"
+    class="datepicker-input"
+    type="text"
+    placeholder="DD/MM/YYYY"
+    [value]="formattedSelectedDate"
+    (input)="onDateInputChange($event)"
+  />
   <i class="datepicker-icon fa fa-calendar" (click)="toggleCalendar()"></i>
-  
-  <div #calendarPopup 
-       class="calendar calendar-popup" 
-       [class.view-days]="view === 'days'"
-       [class.view-months]="view === 'months'"
-       [class.view-years]="view === 'years'"
-       [style.display]="calendarVisible ? 'block' : 'none'">
-    
+
+  <div
+    #calendarPopup
+    class="calendar calendar-popup"
+    [class.view-days]="view === 'days'"
+    [class.view-months]="view === 'months'"
+    [class.view-years]="view === 'years'"
+    [style.display]="calendarVisible ? 'block' : 'none'"
+  >
     <!-- Calendar Header -->
     <div class="calendar-header">
-      <button class="calendar-cell fa fa-chevron-left" (click)="prev()"></button>
-      <div class="calendar-cell" id="monthYear" (click)="changeView()">{{ monthYearHeader }}</div>
-      <button class="calendar-cell fa fa-chevron-right" (click)="next()"></button>
+      <button
+        class="calendar-cell fa fa-chevron-left"
+        (click)="prev()"
+      ></button>
+      <div class="calendar-cell" id="monthYear" (click)="changeView()">
+        {{ monthYearHeader }}
+      </div>
+      <button
+        class="calendar-cell fa fa-chevron-right"
+        (click)="next()"
+      ></button>
     </div>
-    
+
     <!-- Calendar Grid -->
-    <div class="calendar-grid" [class.calendar-grid-7]="view === 'days'" [class.calendar-grid-5]="view === 'years'">
-      
+    <div
+      class="calendar-grid"
+      [class.calendar-grid-7]="view === 'days'"
+      [class.calendar-grid-5]="view === 'years'"
+    >
       <!-- Days View -->
       <ng-container *ngIf="view === 'days'">
         <!-- Days of Week -->
         <div *ngFor="let day of daysOfWeek" class="day">{{ day }}</div>
-        
+
         <!-- Previous Month Days -->
-        <div *ngFor="let day of getPreviousMonthDays()" 
-             class="calendar-cell other-month"
-             [class.disabled]="day.disabled"
-             (click)="onPrevMonthDayClick(day)">
+        <div
+          *ngFor="let day of getPreviousMonthDays()"
+          class="calendar-cell other-month"
+          [class.disabled]="day.disabled"
+          (click)="onPrevMonthDayClick(day)"
+        >
           {{ pad(day.day) }}
         </div>
-        
+
         <!-- Current Month Days -->
-        <div *ngFor="let day of getCurrentMonthDays()" 
-             class="calendar-cell"
-             [class.today]="day.isToday"
-             [class.selected]="day.isSelected"
-             [class.disabled]="day.disabled"
-             (click)="onCurrentMonthDayClick(day)">
+        <div
+          *ngFor="let day of getCurrentMonthDays()"
+          class="calendar-cell"
+          [class.today]="day.isToday"
+          [class.selected]="day.isSelected"
+          [class.disabled]="day.disabled"
+          (click)="onCurrentMonthDayClick(day)"
+        >
           {{ pad(day.day) }}
         </div>
-        
+
         <!-- Next Month Days -->
-        <div *ngFor="let day of getNextMonthDays()" 
-             class="calendar-cell other-month"
-             [class.disabled]="day.disabled"
-             (click)="onNextMonthDayClick(day)">
+        <div
+          *ngFor="let day of getNextMonthDays()"
+          class="calendar-cell other-month"
+          [class.disabled]="day.disabled"
+          (click)="onNextMonthDayClick(day)"
+        >
           {{ pad(day.day) }}
         </div>
       </ng-container>
-      
+
       <!-- Months View -->
       <ng-container *ngIf="view === 'months'">
-        <div *ngFor="let month of getVisibleMonths()" 
-             class="calendar-cell"
-             [class.today]="month.isCurrentMonth"
-             [class.selected]="month.isSelected"
-             [class.disabled]="month.disabled"
-             (click)="onMonthClick(month)">
+        <div
+          *ngFor="let month of getVisibleMonths()"
+          class="calendar-cell"
+          [class.today]="month.isCurrentMonth"
+          [class.selected]="month.isSelected"
+          [class.disabled]="month.disabled"
+          (click)="onMonthClick(month)"
+        >
           {{ month.name }}
         </div>
       </ng-container>
-      
+
       <!-- Years View -->
       <ng-container *ngIf="view === 'years'">
-        <div *ngFor="let yearObj of getVisibleYears()" 
-             class="calendar-cell"
-             [class.today]="yearObj.isCurrentYear"
-             [class.selected]="yearObj.isSelected"
-             [class.disabled]="yearObj.disabled"
-             (click)="onYearClick(yearObj)">
+        <div
+          *ngFor="let yearObj of getVisibleYears()"
+          class="calendar-cell"
+          [class.today]="yearObj.isCurrentYear"
+          [class.selected]="yearObj.isSelected"
+          [class.disabled]="yearObj.disabled"
+          (click)="onYearClick(yearObj)"
+        >
           {{ yearObj.year }}
         </div>
       </ng-container>
     </div>
-    
+
     <!-- Calendar Actions -->
     <div class="calendar-actions">
-      <button id="todayBtn" (click)="goToday()">Oggi</button>
-      <button id="clearBtn" (click)="clearSelection()">Cancella</button>
-      <button id="confirmBtn" (click)="confirmDate()">Conferma</button>
+      <button id="todayBtn" [disabled]="isTodayDisabled()" (click)="goToday()">
+        {{ "CALENDARIO.OGGI" | translate }}
+      </button>
+      <button id="clearBtn" (click)="clearSelection()">
+        {{ "CALENDARIO.CANCELLA" | translate }}
+      </button>
+      <button id="confirmBtn" (click)="confirmDate()">
+        {{ "CALENDARIO.CONFERMA" | translate }}
+      </button>
     </div>
   </div>
 </div>
diff --git a/src/widgetfideuram/components/nbp-fid-calendar-generic/nbp-fid-calendar-generic.component.ts b/src/widgetfideuram/components/nbp-fid-calendar-generic/nbp-fid-calendar-generic.component.ts
index 0ab53fa..9853fb9 100644
--- a/src/widgetfideuram/components/nbp-fid-calendar-generic/nbp-fid-calendar-generic.component.ts
+++ b/src/widgetfideuram/components/nbp-fid-calendar-generic/nbp-fid-calendar-generic.component.ts
@@ -1,99 +1,190 @@
-import { Component, OnInit, Input, Output, EventEmitter, ElementRef, ViewChild, HostListener, Renderer2 } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  Input,
+  Output,
+  EventEmitter,
+  ElementRef,
+  ViewChild,
+  HostListener,
+  Renderer2,
+  forwardRef,
+} from "@angular/core";
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
+import { NbpCalendarPattern, NbpCalendarPosition, NbpStyle } from "@isp/xdce-widget";
+import { TranslateService } from "@ngx-translate/core";
 
 @Component({
   selector: 'nbp-fid-calendar-generic',
   templateUrl: './nbp-fid-calendar-generic.component.html',
-  styleUrls: ['./nbp-fid-calendar-generic.component.scss']
+  styleUrls: ["./nbp-fid-calendar-generic.component.scss"],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => NbpFidCalendarGenericComponent),
+      multi: true,
+    },
+  ],
 })
-export class NbpFidCalendarGenericComponent implements OnInit {
-  @Input() dateFormat: string = 'dd/MM/yyyy';
+export class NbpFidCalendarGenericComponent
+  implements OnInit, ControlValueAccessor
+{
+  @Input() id: string= "";
+  @Input() name: string = "";
+  @Input() disabled: boolean = false;
+  @Input() dateFormat: string = "dd/MM/yyyy";
   @Input() disabledWeekdays: number[] = []; // 0=domenica, 6=sabato
-  @Input() disabledDateRanges: { start: Date, end: Date }[] = [];
+  @Input() disabledDateRanges: { start: Date; end: Date }[] = [];
   @Input() minDate: Date;
   @Input() maxDate: Date;
-  @Output() dateChange = new EventEmitter<Date>();
+  @Input() nbpErrorMessage: string = "";
+  @Input() set disabledWeekends(value: boolean) {
+    if (value) {
+      this.disabledWeekdays = [...this.disabledWeekdays, 0, 6]; // Domenica e Sabato
+    }
+  }
+  @Input() nbpStyle: NbpStyle = NbpStyle.DEFAULT;
+@Input() nbpLabelPattern : NbpCalendarPattern = NbpCalendarPattern.GGMMAAAA;
+@Input() nbpPlacement : NbpCalendarPosition = NbpCalendarPosition.BOTTOM_LEFT;
+  @Input() startDateEnabled : Date = null;
+  @Input() endDateEnabled : Date = null;
+
+@Output() ngModelChange = new EventEmitter<Date>();
+
+  @ViewChild("dateInput") dateInput: ElementRef;
 
-  @ViewChild('dateInput') dateInput: ElementRef;
-  
   // Cache per evitare ricalcoli continui e problemi di rendering
-  private _previousMonthDaysCache: { day: number, disabled: boolean }[] = [];
-  private _currentMonthDaysCache: { day: number, isToday: boolean, isSelected: boolean, disabled: boolean }[] = [];
-  private _nextMonthDaysCache: { day: number, disabled: boolean }[] = [];
-  private _visibleMonthsCache: { monthIndex: number, name: string, isCurrentMonth: boolean, isSelected: boolean, disabled: boolean }[] = [];
-  private _visibleYearsCache: { year: number, isCurrentYear: boolean, isSelected: boolean, disabled: boolean }[] = [];
-  @ViewChild('calendarPopup') calendarPopup: ElementRef;
+  private _previousMonthDaysCache: { day: number; disabled: boolean }[] = [];
+  private _currentMonthDaysCache: {
+    day: number;
+    isToday: boolean;
+    isSelected: boolean;
+    disabled: boolean;
+  }[] = [];
+  private _nextMonthDaysCache: { day: number; disabled: boolean }[] = [];
+  private _visibleMonthsCache: {
+    monthIndex: number;
+    name: string;
+    isCurrentMonth: boolean;
+    isSelected: boolean;
+    disabled: boolean;
+  }[] = [];
+  private _visibleYearsCache: {
+    year: number;
+    isCurrentYear: boolean;
+    isSelected: boolean;
+    disabled: boolean;
+  }[] = [];
+  @ViewChild("calendarPopup") calendarPopup: ElementRef;
 
   currentDate: Date = new Date();
   selectedDate: Date = null;
-  view: 'days' | 'months' | 'years' = 'days';
-  months: string[] = ['gennaio', 'febbraio', 'marzo', 'aprile', 'maggio', 'giugno', 'luglio', 'agosto', 'settembre', 'ottobre', 'novembre', 'dicembre'];
-  daysOfWeek: string[] = ['lun', 'mar', 'mer', 'gio', 'ven', 'sab', 'dom'];
-  formattedSelectedDate: string = '';
+  view: "days" | "months" | "years" = "days";
+  months: string[] = [
+    "gennaio",
+    "febbraio",
+    "marzo",
+    "aprile",
+    "maggio",
+    "giugno",
+    "luglio",
+    "agosto",
+    "settembre",
+    "ottobre",
+    "novembre",
+    "dicembre",
+  ];
+  daysOfWeek: string[] = ["lun", "mar", "mer", "gio", "ven", "sab", "dom"];
+  formattedSelectedDate: string = "";
   calendarVisible: boolean = false;
 
-  constructor(private renderer: Renderer2, private elementRef: ElementRef) { }
+  constructor(private renderer: Renderer2, private elementRef: ElementRef, public translate : TranslateService) {}
+
+  private onChange = (value: Date | null) => {};
+  private onTouched = () => {};
+
+  writeValue(value: Date | null): void {
+    this.selectedDate = value;
+  }
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
 
   ngOnInit(): void {
     // Inizializza la data selezionata se presente
     if (this.selectedDate) {
-      this.formattedSelectedDate = this.formatDate(this.selectedDate, this.dateFormat);
+      this.formattedSelectedDate = this.formatDate(
+        this.selectedDate,
+        this.dateFormat
+      );
     }
-    
+
     // Inizializza le cache
     this.updateAllCaches();
   }
 
   // --- UTILITY ---
   private pad(n: number): string {
-    return n < 10 ? '0' + n : n.toString();
+    return n < 10 ? "0" + n : n.toString();
   }
 
   formatDate(date: Date, format: string): string {
-    if (!date) return '';
+    if (!date) return "";
     return format
-      .replace('dd', this.pad(date.getDate()))
-      .replace('MM', this.pad(date.getMonth() + 1))
-      .replace('yyyy', date.getFullYear().toString())
-      .replace('yy', String(date.getFullYear()).slice(-2));
+      .replace("dd", this.pad(date.getDate()))
+      .replace("MM", this.pad(date.getMonth() + 1))
+      .replace("yyyy", date.getFullYear().toString())
+      .replace("yy", String(date.getFullYear()).slice(-2));
   }
 
   sameDate(d1: Date, d2: Date): boolean {
-    return d1.getFullYear() === d2.getFullYear() &&
+    return (
+      d1.getFullYear() === d2.getFullYear() &&
       d1.getMonth() === d2.getMonth() &&
-      d1.getDate() === d2.getDate();
+      d1.getDate() === d2.getDate()
+    );
   }
 
   // --- GESTIONE POPUP ---
   positionCalendarPopup(): void {
     if (!this.calendarPopup || !this.dateInput) return;
-    
+
     const input = this.dateInput.nativeElement;
     const popup = this.calendarPopup.nativeElement;
-    
+
     // Sposta il popup in fondo al body (portal)
     if (popup.parentNode !== document.body) {
       document.body.appendChild(popup);
     }
-    
-    popup.style.display = 'block';
-    popup.style.position = 'absolute';
-    popup.style.zIndex = '9999';
-    
+
+    popup.style.display = "block";
+    popup.style.position = "absolute";
+    popup.style.zIndex = "9999";
+
     const rect = input.getBoundingClientRect();
     const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
-    
-    popup.style.top = (rect.bottom + scrollTop) + 'px';
-    popup.style.left = (rect.left + scrollLeft) + 'px';
+    const scrollLeft =
+      window.pageXOffset || document.documentElement.scrollLeft;
+
+    popup.style.top = rect.bottom + scrollTop + "px";
+    popup.style.left = rect.left + scrollLeft + "px";
   }
 
   toggleCalendar(): void {
-    this.calendarVisible = !this.calendarVisible;
-    if (this.calendarVisible) {
-      this.showCalendar();
-      this.updateAllCaches();
-    } else {
-      this.hideCalendar();
+    if (!this.disabled) {
+      this.calendarVisible = !this.calendarVisible;
+      if (this.calendarVisible) {
+        this.showCalendar();
+        this.updateAllCaches();
+      } else {
+        this.hideCalendar();
+      }
     }
   }
 
@@ -107,9 +198,9 @@ export class NbpFidCalendarGenericComponent implements OnInit {
   hideCalendar(): void {
     this.calendarVisible = false;
     if (this.calendarPopup) {
-      this.calendarPopup.nativeElement.style.display = 'none';
+      this.calendarPopup.nativeElement.style.display = "none";
     }
-    
+
     if (this.selectedDate) {
       this.currentDate = new Date(this.selectedDate);
     } else {
@@ -117,12 +208,14 @@ export class NbpFidCalendarGenericComponent implements OnInit {
     }
   }
 
-  @HostListener('document:mousedown', ['$event'])
+  @HostListener("document:mousedown", ["$event"])
   onClickOutside(event: MouseEvent): void {
-    if (this.calendarVisible && 
-        !this.elementRef.nativeElement.contains(event.target) &&
-        this.calendarPopup && 
-        !this.calendarPopup.nativeElement.contains(event.target)) {
+    if (
+      this.calendarVisible &&
+      !this.elementRef.nativeElement.contains(event.target) &&
+      this.calendarPopup &&
+      !this.calendarPopup.nativeElement.contains(event.target)
+    ) {
       this.hideCalendar();
     }
   }
@@ -142,15 +235,20 @@ export class NbpFidCalendarGenericComponent implements OnInit {
     for (const range of this.disabledDateRanges) {
       if (date >= range.start && date <= range.end) return true;
     }
-    
+
     return false;
   }
 
+  isTodayDisabled(): boolean {
+    const today = new Date();
+    return this.isDateDisabled(today);
+  }
+
   // --- NAVIGATION ---
   prev(): void {
-    if (this.view === 'days') {
+    if (this.view === "days") {
       this.currentDate.setMonth(this.currentDate.getMonth() - 1);
-    } else if (this.view === 'months') {
+    } else if (this.view === "months") {
       this.currentDate.setFullYear(this.currentDate.getFullYear() - 1);
     } else {
       this.currentDate.setFullYear(this.currentDate.getFullYear() - 20);
@@ -160,9 +258,9 @@ export class NbpFidCalendarGenericComponent implements OnInit {
   }
 
   next(): void {
-    if (this.view === 'days') {
+    if (this.view === "days") {
       this.currentDate.setMonth(this.currentDate.getMonth() + 1);
-    } else if (this.view === 'months') {
+    } else if (this.view === "months") {
       this.currentDate.setFullYear(this.currentDate.getFullYear() + 1);
     } else {
       this.currentDate.setFullYear(this.currentDate.getFullYear() + 20);
@@ -174,29 +272,32 @@ export class NbpFidCalendarGenericComponent implements OnInit {
   goToday(): void {
     this.currentDate = new Date();
     this.selectedDate = new Date();
-    this.formattedSelectedDate = this.formatDate(this.selectedDate, this.dateFormat);
-    this.view = 'days';
-    this.dateChange.emit(this.selectedDate);
+    this.formattedSelectedDate = this.formatDate(
+      this.selectedDate,
+      this.dateFormat
+    );
+    this.view = "days";
+    this.selectedDateChange.emit(this.selectedDate);
     this.updateAllCaches();
   }
 
   clearSelection(): void {
     this.selectedDate = null;
-    this.formattedSelectedDate = '';
-    this.dateChange.emit(null);
+    this.formattedSelectedDate = "";
+    this.selectedDateChange.emit(null);
   }
 
   confirmDate(): void {
     // Metodo usato per confermare esplicitamente la data corrente
-    this.dateChange.emit(this.selectedDate);
+    this.selectedDateChange.emit(this.selectedDate);
     this.hideCalendar();
   }
 
   changeView(): void {
-    if (this.view === 'days') {
-      this.view = 'months';
-    } else if (this.view === 'months') {
-      this.view = 'years';
+    if (this.view === "days") {
+      this.view = "months";
+    } else if (this.view === "months") {
+      this.view = "years";
     }
     this.updateAllCaches();
   }
@@ -204,28 +305,31 @@ export class NbpFidCalendarGenericComponent implements OnInit {
   // --- SELEZIONE DATE ---
   selectDate(date: Date): void {
     if (this.isDateDisabled(date)) return;
-    
+
     this.selectedDate = date;
-    this.formattedSelectedDate = this.formatDate(this.selectedDate, this.dateFormat);
+    this.formattedSelectedDate = this.formatDate(
+      this.selectedDate,
+      this.dateFormat
+    );
     // Non emettiamo qui l'evento dateChange per evitare doppie emissioni
     this.updateAllCaches();
   }
 
   selectMonth(monthIndex: number): void {
     if (this.isMonthDisabled(monthIndex)) return;
-    
+
     this.currentDate.setMonth(monthIndex);
     this.currentDate = new Date(this.currentDate); // Forza refresh
-    this.view = 'days';
+    this.view = "days";
     this.updateAllCaches();
   }
 
   selectYear(year: number): void {
     if (this.isYearDisabled(year)) return;
-    
+
     this.currentDate.setFullYear(year);
     this.currentDate = new Date(this.currentDate); // Forza refresh
-    this.view = 'months';
+    this.view = "months";
     this.updateAllCaches();
   }
 
@@ -233,14 +337,17 @@ export class NbpFidCalendarGenericComponent implements OnInit {
     const year = this.currentDate.getFullYear();
     const month = this.currentDate.getMonth();
     const prevMonthDate = new Date(year, month - 1, day);
-    
+
     if (this.isDateDisabled(prevMonthDate)) return;
-    
+
     this.currentDate.setMonth(month - 1);
     this.currentDate = new Date(this.currentDate); // Forza refresh
     this.selectedDate = prevMonthDate;
-    this.formattedSelectedDate = this.formatDate(this.selectedDate, this.dateFormat);
-    this.dateChange.emit(this.selectedDate);
+    this.formattedSelectedDate = this.formatDate(
+      this.selectedDate,
+      this.dateFormat
+    );
+    this.selectedDateChange.emit(this.selectedDate);
     this.updateAllCaches();
     this.hideCalendar(); // Chiudi il calendario dopo la selezione
   }
@@ -249,14 +356,17 @@ export class NbpFidCalendarGenericComponent implements OnInit {
     const year = this.currentDate.getFullYear();
     const month = this.currentDate.getMonth();
     const nextMonthDate = new Date(year, month + 1, day);
-    
+
     if (this.isDateDisabled(nextMonthDate)) return;
-    
+
     this.currentDate.setMonth(month + 1);
     this.currentDate = new Date(this.currentDate); // Forza refresh
     this.selectedDate = nextMonthDate;
-    this.formattedSelectedDate = this.formatDate(this.selectedDate, this.dateFormat);
-    this.dateChange.emit(this.selectedDate);
+    this.formattedSelectedDate = this.formatDate(
+      this.selectedDate,
+      this.dateFormat
+    );
+    this.selectedDateChange.emit(this.selectedDate);
     this.updateAllCaches();
     this.hideCalendar(); // Chiudi il calendario dopo la selezione
   }
@@ -264,18 +374,22 @@ export class NbpFidCalendarGenericComponent implements OnInit {
   // --- UTILITY PER MESI E ANNI ---
   isMonthDisabled(monthIndex: number): boolean {
     // Se non ci sono restrizioni, il mese è abilitato
-    if (!this.minDate && !this.maxDate && (!this.disabledDateRanges || this.disabledDateRanges.length === 0)) {
+    if (
+      !this.minDate &&
+      !this.maxDate &&
+      (!this.disabledDateRanges || this.disabledDateRanges.length === 0)
+    ) {
       return false;
     }
-    
+
     const year = this.currentDate.getFullYear();
     const firstDayOfMonth = new Date(year, monthIndex, 1, 0, 0, 0, 0);
     const lastDayOfMonth = new Date(year, monthIndex + 1, 0, 23, 59, 59, 999);
-    
+
     // Disabilita mese se completamente fuori dai limiti
     if (this.minDate && lastDayOfMonth < this.minDate) return true;
     if (this.maxDate && firstDayOfMonth > this.maxDate) return true;
-    
+
     return false;
   }
 
@@ -284,14 +398,14 @@ export class NbpFidCalendarGenericComponent implements OnInit {
     if (!this.minDate && !this.maxDate) {
       return false;
     }
-    
+
     const firstDayOfYear = new Date(year, 0, 1, 0, 0, 0, 0);
     const lastDayOfYear = new Date(year, 11, 31, 23, 59, 59, 999);
-    
+
     // Disabilita anno se completamente fuori dai limiti
     if (this.minDate && lastDayOfYear < this.minDate) return true;
     if (this.maxDate && firstDayOfYear > this.maxDate) return true;
-    
+
     return false;
   }
 
@@ -299,22 +413,26 @@ export class NbpFidCalendarGenericComponent implements OnInit {
   onDateInputChange(event: Event): void {
     const value = (event.target as HTMLInputElement).value;
     const datePattern = /^(\d{2})\/(\d{2})\/(\d{4})$/;
-    
+
     if (datePattern.test(value)) {
       const [, dd, mm, yyyy] = value.match(datePattern);
       const date = new Date(parseInt(yyyy), parseInt(mm) - 1, parseInt(dd));
-      
+
       // Controlla che sia una data valida
-      if (date && 
-          date.getDate() === parseInt(dd) && 
-          (date.getMonth() + 1) === parseInt(mm) && 
-          date.getFullYear() === parseInt(yyyy)) {
-        
+      if (
+        date &&
+        date.getDate() === parseInt(dd) &&
+        date.getMonth() + 1 === parseInt(mm) &&
+        date.getFullYear() === parseInt(yyyy)
+      ) {
         if (!this.isDateDisabled(date)) {
           this.selectedDate = date;
           this.currentDate = new Date(date);
-          this.formattedSelectedDate = this.formatDate(this.selectedDate, this.dateFormat);
-          this.dateChange.emit(this.selectedDate);
+          this.formattedSelectedDate = this.formatDate(
+            this.selectedDate,
+            this.dateFormat
+          );
+          this.selectedDateChange.emit(this.selectedDate);
           this.updateAllCaches();
           return;
         }
@@ -326,7 +444,7 @@ export class NbpFidCalendarGenericComponent implements OnInit {
   getDaysInMonth(year: number, month: number): number {
     return new Date(year, month + 1, 0).getDate();
   }
-  
+
   // Metodo per aggiornare tutte le cache quando cambiano i dati
   private updateAllCaches(): void {
     this.updatePreviousMonthDaysCache();
@@ -335,99 +453,105 @@ export class NbpFidCalendarGenericComponent implements OnInit {
     this.updateVisibleMonthsCache();
     this.updateVisibleYearsCache();
   }
-  
+
   // Metodi per aggiornare le singole cache
   private updatePreviousMonthDaysCache(): void {
     const year = this.currentDate.getFullYear();
     const month = this.currentDate.getMonth();
     const startDay = this.getFirstDayOfMonth(year, month);
     const daysInPrevMonth = this.getDaysInMonth(year, month - 1);
-    
+
     const days = [];
     for (let i = startDay; i > 0; i--) {
       const day = daysInPrevMonth - i + 1;
       const prevMonthDate = new Date(year, month - 1, day);
       days.push({
         day,
-        disabled: this.isDateDisabled(prevMonthDate)
+        disabled: this.isDateDisabled(prevMonthDate),
       });
     }
-    
+
     this._previousMonthDaysCache = days;
   }
-  
+
   private updateCurrentMonthDaysCache(): void {
     const year = this.currentDate.getFullYear();
     const month = this.currentDate.getMonth();
     const daysInMonth = this.getDaysInMonth(year, month);
     const today = new Date();
-    
+
     const days = [];
     for (let i = 1; i <= daysInMonth; i++) {
       const date = new Date(year, month, i);
       days.push({
         day: i,
         isToday: this.sameDate(today, date),
-        isSelected: this.selectedDate ? this.sameDate(this.selectedDate, date) : false,
-        disabled: this.isDateDisabled(date)
+        isSelected: this.selectedDate
+          ? this.sameDate(this.selectedDate, date)
+          : false,
+        disabled: this.isDateDisabled(date),
       });
     }
-    
+
     this._currentMonthDaysCache = days;
   }
-  
+
   private updateNextMonthDaysCache(): void {
     const year = this.currentDate.getFullYear();
     const month = this.currentDate.getMonth();
     const startDay = this.getFirstDayOfMonth(year, month);
     const daysInMonth = this.getDaysInMonth(year, month);
-    
+
     const totalCells = 42; // 7 giorni x 6 settimane
     const nextMonthDays = totalCells - (startDay + daysInMonth);
-    
+
     const days = [];
     for (let i = 1; i <= nextMonthDays; i++) {
       const nextMonthDate = new Date(year, month + 1, i);
       days.push({
         day: i,
-        disabled: this.isDateDisabled(nextMonthDate)
+        disabled: this.isDateDisabled(nextMonthDate),
       });
     }
-    
+
     this._nextMonthDaysCache = days;
   }
-  
+
   private updateVisibleMonthsCache(): void {
     const currentYear = this.currentDate.getFullYear();
     const today = new Date();
-    
+
     const months = this.months.map((name, idx) => ({
       monthIndex: idx,
       name,
-      isCurrentMonth: currentYear === today.getFullYear() && idx === today.getMonth(),
-      isSelected: this.selectedDate ? 
-                  currentYear === this.selectedDate.getFullYear() && 
-                  idx === this.selectedDate.getMonth() : false,
-      disabled: this.isMonthDisabled(idx)
+      isCurrentMonth:
+        currentYear === today.getFullYear() && idx === today.getMonth(),
+      isSelected: this.selectedDate
+        ? currentYear === this.selectedDate.getFullYear() &&
+          idx === this.selectedDate.getMonth()
+        : false,
+      disabled: this.isMonthDisabled(idx),
     }));
-    
+
     this._visibleMonthsCache = months;
   }
-  
+
   private updateVisibleYearsCache(): void {
     const base = Math.floor(this.currentDate.getFullYear() / 20) * 20;
     const currentYear = new Date().getFullYear();
-    
+
     const years = [];
     for (let y = base; y < base + 20; y++) {
       years.push({
         year: y,
         isCurrentYear: y === currentYear,
-        isSelected: this.selectedDate ? y === this.selectedDate.getFullYear() : false,
-        disabled: this.isYearDisabled(y)
+        isSelected: this.selectedDate
+          ? y === this.selectedDate.getFullYear()
+          : false,
+        disabled: this.isYearDisabled(y),
       });
     }
-    
+
     this._visibleYearsCache = years;
   }
 
@@ -435,28 +559,44 @@ export class NbpFidCalendarGenericComponent implements OnInit {
     return (new Date(year, month, 1).getDay() + 6) % 7; // Lunedì=0, Domenica=6
   }
 
-  getPreviousMonthDays(): { day: number, disabled: boolean }[] {
+  getPreviousMonthDays(): { day: number; disabled: boolean }[] {
     return this._previousMonthDaysCache;
   }
 
-  getCurrentMonthDays(): { day: number, isToday: boolean, isSelected: boolean, disabled: boolean }[] {
+  getCurrentMonthDays(): {
+    day: number;
+    isToday: boolean;
+    isSelected: boolean;
+    disabled: boolean;
+  }[] {
     return this._currentMonthDaysCache;
   }
 
-  getNextMonthDays(): { day: number, disabled: boolean }[] {
+  getNextMonthDays(): { day: number; disabled: boolean }[] {
     return this._nextMonthDaysCache;
   }
 
-  getVisibleYears(): { year: number, isCurrentYear: boolean, isSelected: boolean, disabled: boolean }[] {
+  getVisibleYears(): {
+    year: number;
+    isCurrentYear: boolean;
+    isSelected: boolean;
+    disabled: boolean;
+  }[] {
     return this._visibleYearsCache;
   }
 
-  getVisibleMonths(): { monthIndex: number, name: string, isCurrentMonth: boolean, isSelected: boolean, disabled: boolean }[] {
+  getVisibleMonths(): {
+    monthIndex: number;
+    name: string;
+    isCurrentMonth: boolean;
+    isSelected: boolean;
+    disabled: boolean;
+  }[] {
     return this._visibleMonthsCache;
   }
 
   get yearRange(): string {
-    if (this.view === 'years') {
+    if (this.view === "years") {
       const base = Math.floor(this.currentDate.getFullYear() / 20) * 20;
       return `${base} - ${base + 19}`;
     }
@@ -464,39 +604,61 @@ export class NbpFidCalendarGenericComponent implements OnInit {
   }
 
   get monthYearHeader(): string {
-    if (this.view === 'days') {
-      return `${this.months[this.currentDate.getMonth()]} ${this.currentDate.getFullYear()}`;
+    if (this.view === "days") {
+      return `${
+        this.months[this.currentDate.getMonth()]
+      } ${this.currentDate.getFullYear()}`;
     }
     return this.yearRange;
   }
 
   // --- AZIONI SUI GIORNI, MESI E ANNI ---
-  onPrevMonthDayClick(day: { day: number, disabled: boolean }): void {
+  onPrevMonthDayClick(day: { day: number; disabled: boolean }): void {
     if (day.disabled) return;
     this.selectDayFromPrevMonth(day.day);
     // Non serve chiamare hideCalendar() qui perché lo fa già selectDayFromPrevMonth
   }
 
-  onCurrentMonthDayClick(day: { day: number, isToday: boolean, isSelected: boolean, disabled: boolean }): void {
+  onCurrentMonthDayClick(day: {
+    day: number;
+    isToday: boolean;
+    isSelected: boolean;
+    disabled: boolean;
+  }): void {
     if (day.disabled) return;
-    const date = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), day.day);
+    const date = new Date(
+      this.currentDate.getFullYear(),
+      this.currentDate.getMonth(),
+      day.day
+    );
     this.selectDate(date);
-    this.dateChange.emit(this.selectedDate);
+    this.selectedDateChange.emit(this.selectedDate);
     this.hideCalendar();
   }
 
-  onNextMonthDayClick(day: { day: number, disabled: boolean }): void {
+  onNextMonthDayClick(day: { day: number; disabled: boolean }): void {
     if (day.disabled) return;
     this.selectDayFromNextMonth(day.day);
     // Non serve chiamare hideCalendar() qui perché lo fa già selectDayFromNextMonth
   }
 
-  onMonthClick(month: { monthIndex: number, name: string, isCurrentMonth: boolean, isSelected: boolean, disabled: boolean }): void {
+  onMonthClick(month: {
+    monthIndex: number;
+    name: string;
+    isCurrentMonth: boolean;
+    isSelected: boolean;
+    disabled: boolean;
+  }): void {
     if (month.disabled) return;
     this.selectMonth(month.monthIndex);
   }
 
-  onYearClick(yearObj: { year: number, isCurrentYear: boolean, isSelected: boolean, disabled: boolean }): void {
+  onYearClick(yearObj: {
+    year: number;
+    isCurrentYear: boolean;
+    isSelected: boolean;
+    disabled: boolean;
+  }): void {
     if (yearObj.disabled) return;
     this.selectYear(yearObj.year);
   }
diff --git a/src/widgetfideuram/components/nbp-fid-combo/nbp-fid-combo.component.ts b/src/widgetfideuram/components/nbp-fid-combo/nbp-fid-combo.component.ts
index b30619d..d0cc410 100644
--- a/src/widgetfideuram/components/nbp-fid-combo/nbp-fid-combo.component.ts
+++ b/src/widgetfideuram/components/nbp-fid-combo/nbp-fid-combo.component.ts
@@ -123,7 +123,7 @@ export class NbpFidComboComponent
         if (!this.name) {
             this.name = "combo_" + (comboIndex++);
         }
-        this._readOptions(null);
+        this._readOptions();
     }
 
     optStrValue(opt: any) {
diff --git a/src/widgetfideuram/components/showcase/showcase1.component.html b/src/widgetfideuram/components/showcase/showcase1.component.html
index cf82f81..e31881b 100644
--- a/src/widgetfideuram/components/showcase/showcase1.component.html
+++ b/src/widgetfideuram/components/showcase/showcase1.component.html
@@ -1,194 +1,325 @@
 <div>
+  <p class="new-part">Tabbar (nbp-tab-bar):</p>
 
-    <p class="new-part">Tabbar (nbp-tab-bar):</p>
+  <nbp-tab-bar
+    [nbpStyle]="_nbpStyle.DEFAULT"
+    [nbpItems]="items"
+    [(nbpSelectedIndex)]="currentSelectedIndex"
+    [nbpTabContent]="true"
+  >
+  </nbp-tab-bar>
 
-    <nbp-tab-bar [nbpStyle]="_nbpStyle.DEFAULT" [nbpItems]="items" [(nbpSelectedIndex)]="currentSelectedIndex"
-        [nbpTabContent]="true">
+  <p class="new-part">Tabbar with title:</p>
+
+  <div class="nbp-tab-bar-title">
+    <div class="tab-bar-title">Title:</div>
+    <nbp-tab-bar
+      [nbpStyle]="_nbpStyle.DEFAULT"
+      [nbpItems]="items"
+      [(nbpSelectedIndex)]="currentSelectedIndex"
+      [nbpTabContent]="true"
+    >
     </nbp-tab-bar>
+  </div>
 
-    <p class="new-part">Tabbar with title:</p>
+  <p class="new-part">
+    Toggle Tabset (.nbp-tab-bar-title + .tab-bar-title + nbp-toggle-tabset)
+    check devtools inspector elements:
+  </p>
+  <div class="nbp-tab-bar-title">
+    <div class="tab-bar-title">Title:</div>
+    <nbp-toggle-tabset>
+      <nbp-toggle-tab disabled="true" title="Scheda 0">
+        <h3>Scheda 0 - Selezionata</h3>
+        <span>{{ longText }}</span>
+      </nbp-toggle-tab>
+      <nbp-toggle-tab active="true" title="Scheda 1">
+        <h3>Scheda 1 - Selezionata</h3>
+        <span>{{ longText }}</span>
+      </nbp-toggle-tab>
+      <nbp-toggle-tab title="Scheda 2">
+        <h3>Scheda 2 - Selezionata</h3>
+        <span>{{ longText }}</span>
+      </nbp-toggle-tab>
+      <nbp-toggle-tab title="Scheda 3">
+        <h3>Scheda 3 - Selezionata</h3>
+        <span>{{ longText }}</span>
+      </nbp-toggle-tab>
+    </nbp-toggle-tabset>
+  </div>
 
-    <div class="nbp-tab-bar-title">
-        <div class="tab-bar-title">Title:</div>
-        <nbp-tab-bar [nbpStyle]="_nbpStyle.DEFAULT" [nbpItems]="items" [(nbpSelectedIndex)]="currentSelectedIndex"
-            [nbpTabContent]="true">
-        </nbp-tab-bar>
-    </div>
+  <p class="new-part">Input text (nbp-input-container + nbp-input-text):</p>
+  <div>
+    <nbp-input-container
+      [nbpLabel]="labelInput4"
+      [nbpStyle]="_nbpStyle.PRIMARY"
+      [infoText]="'Inserire un importo'"
+    >
+      <nbp-input-text
+        id="input-text-primary-3"
+        [name]="'importoPrimary'"
+        [(ngModel)]="importoprovaR"
+        nbpInputType="nbpImporto"
+        [nbpFormat]="currency"
+        [nbpShowValidation]="true"
+        [placeholder]="'placeholder'"
+        [nbpErrorMessage]="errorMessageInput"
+        [nbpRoundBorder]="false"
+        [nbpStyle]="_nbpStyle.PRIMARY"
+        [nbpIcon]="'ispv2-font-euro-sign'"
+        [accessibleTextForIcon]="'euro'"
+        [label]="labelInput4"
+      >
+      </nbp-input-text>
+    </nbp-input-container>
+  </div>
 
-    <p class="new-part">Toggle Tabset (.nbp-tab-bar-title + .tab-bar-title + nbp-toggle-tabset) check devtools inspector
-        elements:</p>
-    <div class="nbp-tab-bar-title">
-        <div class="tab-bar-title">Title:</div>
-        <nbp-toggle-tabset>
-            <nbp-toggle-tab disabled="true" title="Scheda 0">
-                <h3>Scheda 0 - Selezionata</h3>
-                <span>{{ longText }}</span>
-            </nbp-toggle-tab>
-            <nbp-toggle-tab active="true" title="Scheda 1">
-                <h3>Scheda 1 - Selezionata</h3>
-                <span>{{ longText }}</span>
-            </nbp-toggle-tab>
-            <nbp-toggle-tab title="Scheda 2">
-                <h3>Scheda 2 - Selezionata</h3>
-                <span>{{ longText }}</span>
-            </nbp-toggle-tab>
-            <nbp-toggle-tab title="Scheda 3">
-                <h3>Scheda 3 - Selezionata</h3>
-                <span>{{ longText }}</span>
-            </nbp-toggle-tab>
-        </nbp-toggle-tabset>
-    </div>
+  <p class="new-part">
+    Calendar generic (nbp-input-container + nbp-calendar-generic)
+  </p>
+  <div>
+    <nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
+      <nbp-calendar-generic
+        [id]="'calendarDefault'"
+        [name]="'calendarDefault'"
+        [nbpStyle]="_nbpStyle.DEFAULT"
+        [nbpPlacement]="_nbpCalendarPosition.BOTTOM_LEFT"
+        [nbpLabelPattern]="_nbpCalendarPattern.GGMMAAAA"
+        [(ngModel)]="calendarModel"
+      >
+      </nbp-calendar-generic>
+    </nbp-input-container>
+  </div>
+  <div>
+    <nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
+      <nbp-calendar-generic
+        [id]="'calendarConstrainedDateInterval'"
+        [name]="'calendarConstrainedDateInterval'"
+        [nbpStyle]="_nbpStyle.DEFAULT"
+        [nbpPlacement]="_nbpCalendarPosition.BOTTOM_RIGHT"
+        [nbpLabelPattern]="_nbpCalendarPattern.GGMMAAAA"
+        [(ngModel)]="calendarModel"
+        [startDateEnabled]="startDate"
+        [endDateEnabled]="endDate"
+      >
+      </nbp-calendar-generic>
+    </nbp-input-container>
+  </div>
+  <div>
+    <nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
+      <nbp-calendar-generic
+        [id]="'calendarConstrainedDateInterval'"
+        [name]="'calendarConstrainedDateInterval'"
+        [nbpStyle]="_nbpStyle.DEFAULT"
+        [nbpPlacement]="_nbpCalendarPosition.BOTTOM_RIGHT"
+        [disabled]="true"
+        [nbpLabelPattern]="_nbpCalendarPattern.GGMMAAAA"
+        [(ngModel)]="calendarModel"
+        [startDateEnabled]="startDate"
+        [endDateEnabled]="endDate"
+      >
+      </nbp-calendar-generic>
+    </nbp-input-container>
+  </div>
 
-    <p class="new-part">Input text (nbp-input-container + nbp-input-text):</p>
-    <div>
-        <nbp-input-container [nbpLabel]="labelInput4" [nbpStyle]="_nbpStyle.PRIMARY" [infoText]="'Inserire un importo'">
-            <nbp-input-text id="input-text-primary-3" [name]="'importoPrimary'" [(ngModel)]="importoprovaR"
-                nbpInputType=nbpImporto [nbpFormat]="currency" [nbpShowValidation]="true" [placeholder]="'placeholder'"
-                [nbpErrorMessage]="errorMessageInput" [nbpRoundBorder]="false" [nbpStyle]="_nbpStyle.PRIMARY"
-                [nbpIcon]="'ispv2-font-euro-sign'" [accessibleTextForIcon]="'euro'" [label]="labelInput4">
-            </nbp-input-text>
-        </nbp-input-container>
-    </div>
+  <p class="new-part">
+    Fideuram Calendar generic (nbp-input-container + bp-fid-calendar-generic)
+  </p>
+  <div>
+    <nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
+      <nbp-fid-calendar-generic
+        [id]="'calendarId'"
+        [name]="'calendarName'"
+        [dateFormat]="'dd/MM/yyyy'"
+        [minDate]="fidMinDate"
+        [maxDate]="fidMaxDate"
+        [disabled]="false"
+        [(ngModel)]="fidCalendarModel"
+        (ngModelChange)="onDateChange($event)"
+      >
+      </nbp-fid-calendar-generic>
+    </nbp-input-container>
+  </div>
 
-    <p class="new-part">Calendar generic (nbp-input-container + nbp-calendar-generic)</p>
-    <div>
-        <nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
-            <nbp-calendar-generic [id]="'calendarDefault'" [name]="'calendarDefault'" [nbpStyle]="_nbpStyle.DEFAULT"
-                [nbpPlacement]="_nbpCalendarPosition.BOTTOM_LEFT" [nbpLabelPattern]="_nbpCalendarPattern.GGMMAAAA"
-                [(ngModel)]="calendarModel">
-            </nbp-calendar-generic>
-        </nbp-input-container>
-    </div>
-    <div>
-        <nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
-            <nbp-calendar-generic [id]="'calendarConstrainedDateInterval'" [name]="'calendarConstrainedDateInterval'"
-                [nbpStyle]="_nbpStyle.DEFAULT" [nbpPlacement]="_nbpCalendarPosition.BOTTOM_RIGHT"
-                [nbpLabelPattern]="_nbpCalendarPattern.GGMMAAAA" [(ngModel)]="calendarModel"
-                [startDateEnabled]="startDate" [endDateEnabled]="endDate">
-            </nbp-calendar-generic>
-        </nbp-input-container>
-    </div>
-    <div>
-        <nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
-            <nbp-calendar-generic [id]="'calendarConstrainedDateInterval'" [name]="'calendarConstrainedDateInterval'"
-                [nbpStyle]="_nbpStyle.DEFAULT" [nbpPlacement]="_nbpCalendarPosition.BOTTOM_RIGHT" [disabled]="true"
-                [nbpLabelPattern]="_nbpCalendarPattern.GGMMAAAA" [(ngModel)]="calendarModel"
-                [startDateEnabled]="startDate" [endDateEnabled]="endDate">
-            </nbp-calendar-generic>
-        </nbp-input-container>
-    </div>
+  <p class="new-part">Combo (nbp-input-container + nbp-combo)</p>
+  <div>
+    <nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
+      <nbp-combo
+        [id]="'comboDefault'"
+        [name]="'comboDefault'"
+        [nbpStyle]="_nbpStyle.DEFAULT"
+        [nbpDataSource]="comboDatasource"
+        [(ngModel)]="comboSelectedValue"
+        [nbpShowEmptyValue]="true"
+      >
+      </nbp-combo>
+    </nbp-input-container>
+    <nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
+      <nbp-combo
+        [id]="'comboDefault'"
+        [name]="'comboDefault'"
+        [nbpStyle]="_nbpStyle.DEFAULT"
+        [nbpDataSource]="comboDatasource"
+        [(ngModel)]="comboSelectedValue"
+        [nbpShowEmptyValue]="true"
+        [disabled]="true"
+      >
+      </nbp-combo>
+    </nbp-input-container>
+  </div>
 
-    <p class="new-part">Fideuram Calendar generic (nbp-input-container + bp-fid-calendar-generic)</p>
-    <div>
-        <nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
-            <nbp-fid-calendar-generic [id]="'calendarId'" [name]="'calendarName'" [dateFormat]="'dd/MM/yyyy'"
-                [minDate]="fidMinDate" [maxDate]="fidMaxDate" [disabled]="false"
-                [(ngModel)]="fidCalendarModel" (dateChange)="onDateChange($event)">
-            </nbp-fid-calendar-generic>
-        </nbp-input-container>
-    </div>
+  <p class="new-part">Combo Filter (nbp-input-container + nbp-combo-filter)</p>
+  <div>
+    <nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
+      <nbp-combo-filter
+        [id]="'comboDefault'"
+        [name]="'comboDefault'"
+        [nbpStyle]="_nbpStyle.DEFAULT"
+        [nbpDataSource]="comboDatasource"
+        [(ngModel)]="comboSelectedValue"
+        [nbpShowEmptyValue]="true"
+      >
+      </nbp-combo-filter>
+    </nbp-input-container>
+  </div>
 
+  <p class="new-part">Combo Multi (nbp-input-container + nbp-combo-multi)</p>
+  <div>
+    <nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
+      <nbp-combo-multi
+        [id]="'comboMultiIndent'"
+        [name]="'comboMultiIndent'"
+        [nbpStyle]="_nbpStyle.DEFAULT"
+        [nbpDataSource]="datasource"
+        [(ngModel)]="selectedValues"
+        [dropdownVisible]="comboMultiVisible"
+      >
+      </nbp-combo-multi>
+    </nbp-input-container>
 
-    <p class="new-part">Combo (nbp-input-container + nbp-combo)</p>
-    <div>
-        <nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
-            <nbp-combo [id]="'comboDefault'" [name]="'comboDefault'" [nbpStyle]="_nbpStyle.DEFAULT"
-                [nbpDataSource]="comboDatasource" [(ngModel)]="comboSelectedValue" [nbpShowEmptyValue]="true">
-            </nbp-combo>
-        </nbp-input-container>
-        <nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
-            <nbp-combo [id]="'comboDefault'" [name]="'comboDefault'" [nbpStyle]="_nbpStyle.DEFAULT"
-                [nbpDataSource]="comboDatasource" [(ngModel)]="comboSelectedValue" [nbpShowEmptyValue]="true"
-                [disabled]="true">
-            </nbp-combo>
-        </nbp-input-container>
-    </div>
+    <nbp-input-container [nbpStyle]="_nbpStyle.PRIMARY" [nbpLabel]="'Default'">
+      <nbp-combo-multi
+        [id]="'combomultiDefault'"
+        [name]="'combomultiDefault'"
+        [nbpStyle]="_nbpStyle.PRIMARY"
+        [nbpDataSource]="datasource"
+        [(ngModel)]="selectedValues"
+      >
+      </nbp-combo-multi>
+    </nbp-input-container>
+  </div>
 
-    <p class="new-part">Combo Filter (nbp-input-container + nbp-combo-filter)</p>
-    <div>
-        <nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
-            <nbp-combo-filter [id]="'comboDefault'" [name]="'comboDefault'" [nbpStyle]="_nbpStyle.DEFAULT"
-                [nbpDataSource]="comboDatasource" [(ngModel)]="comboSelectedValue" [nbpShowEmptyValue]="true">
-            </nbp-combo-filter>
-        </nbp-input-container>
-    </div>
+  <p class="new-part">Textarea (nbp-input-container + nbp-textarea)</p>
+  <div>
+    <nbp-input-container
+      [nbpLabel]="'Textarea stile default'"
+      [nbpStyle]="_nbpStyle.DEFAULT"
+    >
+      <nbp-textarea
+        [name]="'default-a'"
+        [(ngModel)]="contenutoEmpty"
+        [required]="required"
+        [placeholder]="'placeholder'"
+        [maxlength]="lunghezzamax"
+        [minlength]="lunghezzamin"
+        [nbpStyle]="_nbpStyle.DEFAULT"
+      ></nbp-textarea>
+    </nbp-input-container>
+  </div>
 
-    <p class="new-part">Combo Multi (nbp-input-container + nbp-combo-multi)</p>
-    <div>
-        <nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
-            <nbp-combo-multi [id]="'comboMultiIndent'" [name]="'comboMultiIndent'" [nbpStyle]="_nbpStyle.DEFAULT"
-                [nbpDataSource]="datasource" [(ngModel)]="selectedValues" [dropdownVisible]="comboMultiVisible">
-            </nbp-combo-multi>
-        </nbp-input-container>
+  <p class="new-part">Card (nbp-card)</p>
+  <div style="width: 250px">
+    <nbp-card
+      [id]="'crd5'"
+      [nbpStyle]="_nbpStyle.DEFAULT"
+      [title]="cardTitle"
+      [description]="cardDescr"
+      [templateRef]="template4"
+    >
+    </nbp-card>
+    <ng-template #template4>
+      <div class="row">
+        <div class="col gap-1">
+          <nbp-button [nbpLabel]="'button'" [nbpStyle]="_nbpStyle.FOURTH">
+          </nbp-button>
 
-        <nbp-input-container [nbpStyle]="_nbpStyle.PRIMARY" [nbpLabel]="'Default'">
-            <nbp-combo-multi [id]="'combomultiDefault'" [name]="'combomultiDefault'" [nbpStyle]="_nbpStyle.PRIMARY"
-                [nbpDataSource]="datasource" [(ngModel)]="selectedValues">
-            </nbp-combo-multi>
-        </nbp-input-container>
-    </div>
+          <nbp-button [nbpLabel]="'button'" [nbpStyle]="_nbpStyle.PRIMARY">
+          </nbp-button>
+        </div>
+      </div>
+    </ng-template>
+  </div>
 
-    <p class="new-part">Textarea (nbp-input-container + nbp-textarea)</p>
-    <div>
-        <nbp-input-container [nbpLabel]="'Textarea stile default'" [nbpStyle]="_nbpStyle.DEFAULT">
-            <nbp-textarea [name]="'default-a'" [(ngModel)]="contenutoEmpty" [required]="required"
-                [placeholder]="'placeholder'" [maxlength]="lunghezzamax" [minlength]="lunghezzamin"
-                [nbpStyle]="_nbpStyle.DEFAULT"></nbp-textarea>
-        </nbp-input-container>
-    </div>
-
-    <p class="new-part">Card (nbp-card)</p>
-    <div style="width: 250px">
-        <nbp-card [id]="'crd5'" [nbpStyle]="_nbpStyle.DEFAULT" [title]="cardTitle" [description]="cardDescr"
-            [templateRef]="template4">
-        </nbp-card>
-        <ng-template #template4>
-            <div class="row">
-                <div class="col gap-1">
-                    <nbp-button [nbpLabel]="'button'" [nbpStyle]="_nbpStyle.FOURTH">
-                    </nbp-button>
-
-                    <nbp-button [nbpLabel]="'button'" [nbpStyle]="_nbpStyle.PRIMARY">
-                    </nbp-button>
-                </div>
-            </div>
-        </ng-template>
-    </div>
-
-    <p class="new-part">Table (nbp-table)</p>
-    <div>
-        <nbp-table [scrollBar]="'auto'" ariaLabel="table" [nbpId]="'defTable1'" [nbpOptions]="tableOptions"
-            [nbpDataSource]="tableDs" [nbpAutoBind]="true" [nbpSelectionType]="tableSelectionType"
-            [nbpLayoutAuto]="true">
-
-            <nbp-table-column nbpId='headerField' nbpTitle='Header field' nbpField='headerField' [nbpVisible]='true'>
-            </nbp-table-column>
-
-            <nbp-table-column nbpId='headerField2' nbpTitle='Header field 2' nbpField='headerField2'
-                [nbpSortable]="true" [nbpVisible]='true'>
-            </nbp-table-column>
-        </nbp-table>
-    </div>
-
-    <p class="new-part">Tree-table</p>
-    <div>
-        <!-- [paginationOptions]="table2PageConfig" -->
-        <isp-turbo-table [columns]="table2Columns" [datasource]="table2Data" [hasAccordionRows]="true"
-            [rowExpander]="table2RowExpander" tableMinWidth='35rem' ariaLabel="table with children"></isp-turbo-table>
-    </div>
-
-    <p class="new-part">Checkbox-table</p>
-    <nbp-table [scrollBar]="'auto'" [nbpId]="'defTable'" [nbpOptions]="simpleOptions"
-        [nbpDataSource]="campiStandardData" ariaLabel="multi selection table" [nbpAutoBind]="true"
-        [nbpSelectionType]="multi">
-
-        <nbp-table-column nbpId='headerField' nbpTitle='Header field' nbpField='headerField' [nbpSortable]='true'
-            [nbpVisible]='true'>
-        </nbp-table-column>
-
-        <nbp-table-column nbpId='headerField2' nbpTitle='Header field 2' nbpField='headerField2' [nbpSortable]='true'
-            [nbpVisible]='true'>
-        </nbp-table-column>
+  <p class="new-part">Table (nbp-table)</p>
+  <div>
+    <nbp-table
+      [scrollBar]="'auto'"
+      ariaLabel="table"
+      [nbpId]="'defTable1'"
+      [nbpOptions]="tableOptions"
+      [nbpDataSource]="tableDs"
+      [nbpAutoBind]="true"
+      [nbpSelectionType]="tableSelectionType"
+      [nbpLayoutAuto]="true"
+    >
+      <nbp-table-column
+        nbpId="headerField"
+        nbpTitle="Header field"
+        nbpField="headerField"
+        [nbpVisible]="true"
+      >
+      </nbp-table-column>
 
+      <nbp-table-column
+        nbpId="headerField2"
+        nbpTitle="Header field 2"
+        nbpField="headerField2"
+        [nbpSortable]="true"
+        [nbpVisible]="true"
+      >
+      </nbp-table-column>
     </nbp-table>
-</div>
\ No newline at end of file
+  </div>
+
+  <p class="new-part">Tree-table</p>
+  <div>
+    <!-- [paginationOptions]="table2PageConfig" -->
+    <isp-turbo-table
+      [columns]="table2Columns"
+      [datasource]="table2Data"
+      [hasAccordionRows]="true"
+      [rowExpander]="table2RowExpander"
+      tableMinWidth="35rem"
+      ariaLabel="table with children"
+    ></isp-turbo-table>
+  </div>
+
+  <p class="new-part">Checkbox-table</p>
+  <nbp-table
+    [scrollBar]="'auto'"
+    [nbpId]="'defTable'"
+    [nbpOptions]="simpleOptions"
+    [nbpDataSource]="campiStandardData"
+    ariaLabel="multi selection table"
+    [nbpAutoBind]="true"
+    [nbpSelectionType]="multi"
+  >
+    <nbp-table-column
+      nbpId="headerField"
+      nbpTitle="Header field"
+      nbpField="headerField"
+      [nbpSortable]="true"
+      [nbpVisible]="true"
+    >
+    </nbp-table-column>
+
+    <nbp-table-column
+      nbpId="headerField2"
+      nbpTitle="Header field 2"
+      nbpField="headerField2"
+      [nbpSortable]="true"
+      [nbpVisible]="true"
+    >
+    </nbp-table-column>
+  </nbp-table>
+</div>
diff --git a/src/widgetfideuram/components/showcase/showcase1.component.ts b/src/widgetfideuram/components/showcase/showcase1.component.ts
index 0ba13a0..5d8e2e1 100644
--- a/src/widgetfideuram/components/showcase/showcase1.component.ts
+++ b/src/widgetfideuram/components/showcase/showcase1.component.ts
@@ -53,7 +53,7 @@ export class Showcase1Component extends NbpBaseComponent {
 
     // Range di date disabilitate per l'esempio
     fidDisabledDateRanges: { start: Date, end: Date }[] = [
-      { start: new Date(2025, 4, 10), end: new Date(2025, 4, 15) }, // 10-15 maggio 2025
+      { start: new Date(2025, 4, 10), end: new Date(2025, 5, 15) }, // 10-15 maggio 2025
       { start: new Date(2025, 4, 25), end: new Date(2025, 4, 28) }  // 25-28 maggio 2025
     ];
     //