From 3082f2129e6e12f3686b32d5f170040e34226144 Mon Sep 17 00:00:00 2001
From: Alessandro Seravalli <a.seravalli@armundia.com>
Date: Thu, 8 May 2025 10:01:44 +0200
Subject: [PATCH] WIP: datepicker components as fid

---
 src/index.ts                                  | 50 ++++++++++++++++---
 .../datepicker/datepicker-day-view.ts         | 25 ++++++++++
 .../datepicker/datepicker-navigation.ts       | 13 +++++
 .../datepicker/datepicker-reply-month-view.ts | 22 ++++++++
 .../datepicker/datepicker-reply-years-view.ts | 22 ++++++++
 .../datepicker/datepicker-routing-view.html   |  6 +--
 .../datepicker/datepicker.html                |  4 +-
 .../datepicker/datepicker-components.ts       | 17 -------
 .../datepicker/datepicker-day-view.ts         | 25 ++++++++++
 .../datepicker/datepicker-navigation.ts       | 13 +++++
 .../datepicker/datepicker-reply-month-view.ts | 22 ++++++++
 .../datepicker/datepicker-reply-years-view.ts | 22 ++++++++
 .../datepicker/datepicker-routing-view.html   |  6 +--
 .../@ng-bootstrap/datepicker/datepicker.html  |  4 +-
 14 files changed, 218 insertions(+), 33 deletions(-)
 create mode 100644 src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-day-view.ts
 create mode 100644 src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-navigation.ts
 create mode 100644 src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-reply-month-view.ts
 create mode 100644 src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-reply-years-view.ts
 delete mode 100644 src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-components.ts
 create mode 100644 src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-day-view.ts
 create mode 100644 src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-navigation.ts
 create mode 100644 src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-reply-month-view.ts
 create mode 100644 src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-reply-years-view.ts

diff --git a/src/index.ts b/src/index.ts
index 53b518d..38b9eda 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,21 +1,29 @@
 import { ModuleWithProviders, NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
 import { FormsModule } from "@angular/forms";
 import { XdceArchModule } from "@isp/xdce-arch-core";
-import { NbpModule } from "@isp/xdce-widget";
+import { NbpModule, NgbDatepickerService, NgbDatepickerServiceNOA11Y } from "@isp/xdce-widget";
 import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
 import {
   AgGridModule,
   AngularFrameworkComponentWrapper,
   AngularFrameworkOverrides,
 } from "ag-grid-angular";
+import { NgbFidDatepickerNavigation } from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-navigation";
 import { NbpBreadCrumbsComponent } from "./widgetfideuram/components/nbp-bread-crumbs/nbp-bread-crumbs.component";
 import { NbpFidBarChartComponent } from "./widgetfideuram/components/nbp-fid-bar-chart/nbp-fid-bar-chart.component";
 import { NbpFidButtonBarComponent } from "./widgetfideuram/components/nbp-fid-button-bar/nbp-fid-button-bar.component";
 import { FidRplCalendarNOA11Y } from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker";
+import { NgbFidDatepickerDayViewNOA11Y } from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-day-view";
 import { NgbFidInputDatepickerNOA11Y } from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-input";
+import { NgbFidDatepickerNavigationNOA11Y } from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-navigation";
+import { NgbFidDatepickerReplyMonthViewNOA11Y } from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-reply-month-view";
+import { NgbFidDatepickerReplyYearsViewNOA11Y } from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-reply-years-view";
 import { NgbFidDatepickerRoutingViewNOA11Y } from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-routing-view";
 import { FidRplCalendar } from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker";
+import { NgbFidDatepickerDayView } from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-day-view";
 import { NgbFidInputDatepicker } from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-input";
+import { NgbFidDatepickerReplyMonthView } from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-reply-month-view";
+import { NgbFidDatepickerReplyYearsView } from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-reply-years-view";
 import { NgbFidDatepickerRoutingView } from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-routing-view";
 import { NbpCalendarGenericComponentA11Y } from "./widgetfideuram/components/nbp-fid-calendar-generic/nbp-calendar-generic.component.a11y";
 import { NbpCalendarGenericComponentNOA11Y } from "./widgetfideuram/components/nbp-fid-calendar-generic/nbp-calendar-generic.component.noa11y";
@@ -34,16 +42,22 @@ import { NbpFidToggleTabsetComponentNOA11Y } from "./widgetfideuram/components/n
 import { ShowcaseComponent } from "./widgetfideuram/components/showcase/showcase.component";
 import { Showcase1Component } from "./widgetfideuram/components/showcase/showcase1.component";
 import { WidgetFideuramShowcaseComponent } from "./widgetfideuram/components/widget-fideuram-showcase/widget-fideuram-showcase.component";
-import { NgbDatepickerService, NgbDatepickerServiceNOA11Y } from '@isp/xdce-widget';
-
 export { AgGridModule } from "ag-grid-angular";
+export * from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-navigation";
 export * from "./widgetfideuram/components/nbp-bread-crumbs/nbp-bread-crumbs.component";
 export * from "./widgetfideuram/components/nbp-fid-bar-chart/nbp-fid-bar-chart.component";
 export * from "./widgetfideuram/components/nbp-fid-button-bar/nbp-fid-button-bar.component";
 export * from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker";
+export * from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-day-view";
 export * from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-input";
+export * from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-navigation";
+export * from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-reply-month-view";
+export * from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-reply-years-view";
 export * from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker";
+export * from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-day-view";
 export * from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-input";
+export * from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-reply-month-view";
+export * from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-reply-years-view";
 export * from "./widgetfideuram/components/nbp-fid-calendar-generic/nbp-calendar-generic.component.a11y";
 export * from "./widgetfideuram/components/nbp-fid-calendar-generic/nbp-calendar-generic.component.noa11y";
 export * from "./widgetfideuram/components/nbp-fid-calendar-generic/nbp-fid-calendar-generic.component";
@@ -92,7 +106,15 @@ export * from "./widgetfideuram/Utils";
     FidRplCalendar,
     NgbFidInputDatepickerNOA11Y,
     NgbFidDatepickerRoutingView,
-    NgbFidDatepickerRoutingViewNOA11Y
+    NgbFidDatepickerRoutingViewNOA11Y,
+    NgbFidDatepickerNavigation,
+    NgbFidDatepickerDayView,
+    NgbFidDatepickerReplyMonthView,
+    NgbFidDatepickerReplyYearsView,
+    NgbFidDatepickerNavigationNOA11Y,
+    NgbFidDatepickerDayViewNOA11Y,
+    NgbFidDatepickerReplyMonthViewNOA11Y,
+    NgbFidDatepickerReplyYearsViewNOA11Y
   ],
   exports: [
     NbpBreadCrumbsComponent,
@@ -119,7 +141,15 @@ export * from "./widgetfideuram/Utils";
     NgbFidDatepickerRoutingView,
     NgbFidDatepickerRoutingViewNOA11Y,
     NgbFidInputDatepickerNOA11Y,
-    NgbFidInputDatepicker
+    NgbFidInputDatepicker,
+    NgbFidDatepickerNavigation,
+    NgbFidDatepickerDayView,
+    NgbFidDatepickerReplyMonthView,
+    NgbFidDatepickerReplyYearsView,
+    NgbFidDatepickerNavigationNOA11Y,
+    NgbFidDatepickerDayViewNOA11Y,
+    NgbFidDatepickerReplyMonthViewNOA11Y,
+    NgbFidDatepickerReplyYearsViewNOA11Y
   ],
   providers: [
     AngularFrameworkOverrides, 
@@ -139,7 +169,15 @@ export * from "./widgetfideuram/Utils";
     FidRplCalendarNOA11Y,
     FidRplCalendar,
     NgbFidDatepickerRoutingView,
-    NgbFidDatepickerRoutingViewNOA11Y
+    NgbFidDatepickerRoutingViewNOA11Y,
+    NgbFidDatepickerNavigation,
+    NgbFidDatepickerDayView,
+    NgbFidDatepickerReplyMonthView,
+    NgbFidDatepickerReplyYearsView,
+    NgbFidDatepickerNavigationNOA11Y,
+    NgbFidDatepickerDayViewNOA11Y,
+    NgbFidDatepickerReplyMonthViewNOA11Y,
+    NgbFidDatepickerReplyYearsViewNOA11Y
   ],
   schemas: [NO_ERRORS_SCHEMA]
 })
diff --git a/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-day-view.ts b/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-day-view.ts
new file mode 100644
index 0000000..b3cff39
--- /dev/null
+++ b/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-day-view.ts
@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgbDatepickerDayViewNOA11Y } from '@isp/xdce-widget';
+
+@Component({
+  selector: '[ngbFidDatepickerDayView]',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'class': 'btn-secondary',
+    '[class.bg-primary]': 'selected',
+    '[class.text-white]': 'selected',
+    '[class.text-muted]': 'isMuted()',
+    '[class.outside]': 'isOutside()',
+    '[class.notOutside]': '!isOutside()',
+    '[class.active]': 'focused',
+    '[class.is-today]': 'isToday',
+    '[class.is-holiday]': 'isHoliday',
+    '[class.is-weekend]': 'isWeekend && !selected',
+    '[class.is-daypast]': 'isDayPast',
+    '[class.is-fiscal]': 'isFiscalDay'
+  },
+  template: '<ng-container></ng-container>',
+})
+export class NgbFidDatepickerDayViewNOA11Y extends NgbDatepickerDayViewNOA11Y {
+
+}
\ No newline at end of file
diff --git a/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-navigation.ts b/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-navigation.ts
new file mode 100644
index 0000000..34fd941
--- /dev/null
+++ b/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-navigation.ts
@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component } from "@angular/core";
+import { NgbDatepickerNavigationNOA11Y } from "@isp/xdce-widget";
+
+
+@Component({
+    selector: 'ngb-fid-datepicker-navigation',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: { 'class': 'd-flex justify-content-between', '[class.collapsed]': '!showSelect' },
+    template: '<ng-container></ng-container>',
+})
+export class NgbFidDatepickerNavigationNOA11Y extends NgbDatepickerNavigationNOA11Y {
+
+}
\ No newline at end of file
diff --git a/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-reply-month-view.ts b/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-reply-month-view.ts
new file mode 100644
index 0000000..aab9fc0
--- /dev/null
+++ b/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-reply-month-view.ts
@@ -0,0 +1,22 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgbDatepickerReplyMonthViewNOA11Y } from '@isp/xdce-widget';
+
+
+@Component({
+  selector: '[ngbFidDatepickerReplyMonthView]',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'class': 'btn-secondary-month',
+    '[class.bg-primary]': 'selected',
+    '[class.text-white]': 'selected',
+    '[class.text-muted]': 'isMuted()',
+    '[class.outside]': 'isMuted()',
+    '[class.focused]': 'mounthFocusVisible',
+    '[class.active]': 'focused',
+    '[class.is-current]': 'isCurrent',
+    '[attr.tabindex]':"focused && mounthFocusVisible ? 0 : -1" 
+  },
+  template: '<ng-container></ng-container>'
+})
+export class NgbFidDatepickerReplyMonthViewNOA11Y extends NgbDatepickerReplyMonthViewNOA11Y {
+}
\ No newline at end of file
diff --git a/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-reply-years-view.ts b/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-reply-years-view.ts
new file mode 100644
index 0000000..d6e7aa5
--- /dev/null
+++ b/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-reply-years-view.ts
@@ -0,0 +1,22 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgbDatepickerReplyYearsViewNOA11Y } from '@isp/xdce-widget';
+
+@Component({
+  selector: '[ngbFidDatepickerReplyYearsView]',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'class': 'btn-secondary-years',
+    '[class.bg-primary]': 'selected',
+    '[class.text-white]': 'selected',
+    '[class.text-muted]': 'isMuted()',
+    '[class.outside]': 'isMuted()',
+    '[class.active]': 'focused',
+    '[class.focused]': 'yearFocusVisible',
+    '[class.is-current]':'isCurrent',
+    '[attr.tabindex]':"focused && yearFocusVisible ? 0 : -1"
+  },
+  template: '<ng-container></ng-container>',
+})
+export class NgbFidDatepickerReplyYearsViewNOA11Y extends NgbDatepickerReplyYearsViewNOA11Y {
+
+}
\ No newline at end of file
diff --git a/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-routing-view.html b/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-routing-view.html
index 1e1e0ba..c891cf3 100644
--- a/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-routing-view.html
+++ b/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-routing-view.html
@@ -26,7 +26,7 @@
 
             <ng-template [ngIf]="!isHidden(day)">
 
-              <div ngbDatepickerDayView
+              <div ngbFidDatepickerDayView
                    [ngClass] = "{'cursor-pointer' : !disabledWeekend && !day.context.disabled}"
                    [date]="day.context.date"
                    [currentMonth]="day.context.currentMonth"
@@ -58,7 +58,7 @@
       <div *ngFor="let row of mesi" class="d-flex ngb-dp-mese">
         <ng-container *ngFor="let mese of row">
 
-          <div ngbDatepickerReplyMonthView [mese]="mese" [year]="dataTemplate.year" [selected]="mese.selected"
+          <div ngbFidDatepickerReplyMonthView [mese]="mese" [year]="dataTemplate.year" [selected]="mese.selected"
                [disabled]="mese.disabled"
                [focused]="mese.focused"
                [startDateEnabled]="startDateEnabled"
@@ -79,7 +79,7 @@
       <div *ngFor="let row of years" class="d-flex ngb-dp-mese">
         <ng-container *ngFor="let year of row">
 
-          <div ngbDatepickerReplyYearsView [year]="year" [selected]="year.selected" [disabled]="year.disabled"
+          <div ngbFidDatepickerReplyYearsView [year]="year" [selected]="year.selected" [disabled]="year.disabled"
                [focused]="year.focused"
                [startDateEnabled]="startDateEnabled"
                [endDateEnabled]="endDateEnabled"
diff --git a/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker.html b/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker.html
index 9f80d12..0295a87 100644
--- a/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker.html
+++ b/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker.html
@@ -3,7 +3,7 @@
   <div class="ngb-dp-header bg-faded pt-1 rounded-top" [style.height.rem]="getHeaderHeight()"
        [style.marginBottom.rem]="-getHeaderMargin()">
     <!-- componente per la navigazione! Seleziona il template  -->
-    <ngb-datepicker-navigation *ngIf="navigation !== 'none'"
+    <ngb-fid-datepicker-navigation *ngIf="navigation !== 'none'"
                                [date]="model.firstDate"
                                [minDate]="model.minDate"
                                [maxDate]="model.maxDate"
@@ -23,7 +23,7 @@
                                [attr.label]="' '"
                                [attr.labelledby]="' '"
                                [attr.describedby]="' '">
-    </ngb-datepicker-navigation>
+    </ngb-fid-datepicker-navigation>
   </div>
 
 
diff --git a/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-components.ts b/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-components.ts
deleted file mode 100644
index e18f089..0000000
--- a/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-components.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Injector } from "@angular/core";
-import {
-    NgbDatepickerNavigation,
-    NgbDatepickerNavigationSelect,
-    NgbDatepickerDayView,
-    NgbDatepickerReplyMonthView,
-    NgbDatepickerReplyYearsView,
-    NgbDatepickerI18n,
-    NgbCalendar,
-    NgbDatepickerService
-} from "@isp/xdce-widget";
-
-export class NgbFidDatepickerNavigation extends NgbDatepickerNavigation {
-  constructor(i18n: NgbDatepickerI18n, _calendar: NgbCalendar, injector: Injector, _service: NgbDatepickerService, translate: TranslateService, elementRef: ElementRef) {
-    super(i18n, _calendar, injector, _service, translate, elementRef);
-  }
-}
\ No newline at end of file
diff --git a/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-day-view.ts b/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-day-view.ts
new file mode 100644
index 0000000..f0b783f
--- /dev/null
+++ b/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-day-view.ts
@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgbDatepickerDayView } from '@isp/xdce-widget';
+
+@Component({
+  selector: '[ngbFidDatepickerDayView]',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'class': 'btn-secondary',
+    '[class.bg-primary]': 'selected',
+    '[class.text-white]': 'selected',
+    '[class.text-muted]': 'isMuted()',
+    '[class.outside]': 'isOutside()',
+    '[class.notOutside]': '!isOutside()',
+    '[class.active]': 'focused',
+    '[class.is-today]': 'isToday',
+    '[class.is-holiday]': 'isHoliday',
+    '[class.is-weekend]': 'isWeekend && !selected',
+    '[class.is-daypast]': 'isDayPast',
+    '[class.is-fiscal]': 'isFiscalDay'
+  },
+  template: '<ng-container></ng-container>',
+})
+export class NgbFidDatepickerDayView extends NgbDatepickerDayView {
+
+}
\ No newline at end of file
diff --git a/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-navigation.ts b/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-navigation.ts
new file mode 100644
index 0000000..0c9fb07
--- /dev/null
+++ b/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-navigation.ts
@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component } from "@angular/core";
+import { NgbDatepickerNavigation } from "@isp/xdce-widget";
+
+
+@Component({
+    selector: 'ngb-fid-datepicker-navigation',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: { 'class': 'd-flex justify-content-between', '[class.collapsed]': '!showSelect' },
+    template: '<ng-container></ng-container>',
+})
+export class NgbFidDatepickerNavigation extends NgbDatepickerNavigation {
+
+}
\ No newline at end of file
diff --git a/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-reply-month-view.ts b/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-reply-month-view.ts
new file mode 100644
index 0000000..3f8613c
--- /dev/null
+++ b/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-reply-month-view.ts
@@ -0,0 +1,22 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgbDatepickerReplyMonthView } from '@isp/xdce-widget';
+
+
+@Component({
+  selector: '[ngbFidDatepickerReplyMonthView]',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'class': 'btn-secondary-month',
+    '[class.bg-primary]': 'selected',
+    '[class.text-white]': 'selected',
+    '[class.text-muted]': 'isMuted()',
+    '[class.outside]': 'isMuted()',
+    '[class.focused]': 'mounthFocusVisible',
+    '[class.active]': 'focused',
+    '[class.is-current]': 'isCurrent',
+    '[attr.tabindex]':"focused && mounthFocusVisible ? 0 : -1" 
+  },
+  template: '<ng-container></ng-container>'
+})
+export class NgbFidDatepickerReplyMonthView extends NgbDatepickerReplyMonthView {
+}
\ No newline at end of file
diff --git a/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-reply-years-view.ts b/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-reply-years-view.ts
new file mode 100644
index 0000000..f846be9
--- /dev/null
+++ b/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-reply-years-view.ts
@@ -0,0 +1,22 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgbDatepickerReplyYearsView } from '@isp/xdce-widget';
+
+@Component({
+  selector: '[ngbFidDatepickerReplyYearsView]',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'class': 'btn-secondary-years',
+    '[class.bg-primary]': 'selected',
+    '[class.text-white]': 'selected',
+    '[class.text-muted]': 'isMuted()',
+    '[class.outside]': 'isMuted()',
+    '[class.active]': 'focused',
+    '[class.focused]': 'yearFocusVisible',
+    '[class.is-current]':'isCurrent',
+    '[attr.tabindex]':"focused && yearFocusVisible ? 0 : -1"
+  },
+  template: '<ng-container></ng-container>',
+})
+export class NgbFidDatepickerReplyYearsView extends NgbDatepickerReplyYearsView {
+
+}
\ No newline at end of file
diff --git a/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-routing-view.html b/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-routing-view.html
index da65b32..40d67c2 100644
--- a/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-routing-view.html
+++ b/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-routing-view.html
@@ -27,7 +27,7 @@
 
             <ng-template [ngIf]="!isHidden(day)">
 
-              <div ngbDatepickerDayView
+              <div ngbFidDatepickerDayView
                    [ngClass] = "{'cursor-pointer' : !disabledWeekend && !day.context.disabled}"
                    [date]="day.context.date"
                    [currentMonth]="day.context.currentMonth"
@@ -62,7 +62,7 @@
       <div *ngFor="let line of mesi" class="d-flex ngb-dp-mese" role="row">
         <ng-container *ngFor="let mese of line">
 
-          <div ngbDatepickerReplyMonthView
+          <div ngbFidDatepickerReplyMonthView
                [mese]="mese"
                [year]="dataTemplate.year"
                [selected]="mese.selected"
@@ -90,7 +90,7 @@
       <div *ngFor="let line of years" class="d-flex ngb-dp-mese" role="row">
         <ng-container *ngFor="let year of line">
 
-          <div ngbDatepickerReplyYearsView [year]="year" [selected]="year.selected" [disabled]="year.disabled"
+          <div ngbFidDatepickerReplyYearsView [year]="year" [selected]="year.selected" [disabled]="year.disabled"
                [focused]="year.focused"
                [startDateEnabled]="startDateEnabled"
                [endDateEnabled]="endDateEnabled"
diff --git a/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker.html b/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker.html
index d82d153..c40ecf6 100644
--- a/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker.html
+++ b/src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker.html
@@ -3,7 +3,7 @@
   <div class="ngb-dp-header bg-faded pt-1 rounded-top" [style.height.rem]="getHeaderHeight()"
        [style.marginBottom.rem]="-getHeaderMargin()">
     <!-- componente per la navigazione! Seleziona il template  -->
-    <ngb-datepicker-navigation *ngIf="navigation !== 'none'"
+    <ngb-fid-datepicker-navigation *ngIf="navigation !== 'none'"
                                [date]="model.firstDate"
                                [minDate]="model.minDate"
                                [maxDate]="model.maxDate"
@@ -24,7 +24,7 @@
                                [dataTemplate]="dataTemplate"
                                [attr.labelledby]="''"
                                [attr.describedby]="''">
-    </ngb-datepicker-navigation>
+    </ngb-fid-datepicker-navigation>
   </div>