diff --git a/src/assets/xdce-module-widget-fideuram/styles/_widget-fideuram_ui.styles.scss b/src/assets/xdce-module-widget-fideuram/styles/_widget-fideuram_ui.styles.scss
index 5094276..4365cda 100644
--- a/src/assets/xdce-module-widget-fideuram/styles/_widget-fideuram_ui.styles.scss
+++ b/src/assets/xdce-module-widget-fideuram/styles/_widget-fideuram_ui.styles.scss
@@ -10,7 +10,8 @@ $btn-map: (
     secondary-bg-color: map-get($white-palette, 100),
     secondary-border-color: map-get($orange-palette, 100),
     secondary-color: map-get($orange-palette, 100),
-    secondary-bg-color-h: map-get($gray-palette, 100),
+    secondary-bg-color-h: map-get($orange-palette, 100),
+    secondary-color-h: map-get($white-palette, 100),
 );
 
 $checkbox-map: (
@@ -82,10 +83,10 @@ body {
 
         @include isp-button-colors("secondary",
             map-get($btn-map, "secondary-bg-color"), map-get($btn-map, "secondary-border-color"), map-get($btn-map, "secondary-color"),
-            map-get($btn-map, "secondary-bg-color-h"), map-get($btn-map, "secondary-border-color"), map-get($btn-map, "secondary-color"),
-            map-get($btn-map, "secondary-bg-color-h"), map-get($btn-map, "secondary-border-color"), map-get($btn-map, "secondary-color"),
+            map-get($btn-map, "secondary-bg-color-h"), map-get($btn-map, "secondary-border-color"), map-get($btn-map, "secondary-color-h"),
+            map-get($btn-map, "secondary-bg-color-h"), map-get($btn-map, "secondary-border-color"), map-get($btn-map, "secondary-color-h"),
             map-get($btn-map, "secondary-bg-color"), map-get($btn-map, "secondary-border-color"), map-get($btn-map, "secondary-color"),
-            map-get($btn-map, "secondary-bg-color-h"), map-get($btn-map, "secondary-border-color"), map-get($btn-map, "secondary-color"), );
+            map-get($btn-map, "secondary-bg-color-h"), map-get($btn-map, "secondary-border-color"), map-get($btn-map, "secondary-color-h"), );
     }
 
     nbp-button {
@@ -254,7 +255,7 @@ body {
 
     nbp-modal .isp-corporate-mode-wrapper {
         .isp-modal-close {
-            color: map-get($blue-palette, 100);
+            color: map-get($orange-palette, 100);
         }
 
         .isp-modal-container {
diff --git a/src/assets/xdce-module-widget-fideuram/styles/style.scss b/src/assets/xdce-module-widget-fideuram/styles/style.scss
index 2944af7..0d35f87 100644
--- a/src/assets/xdce-module-widget-fideuram/styles/style.scss
+++ b/src/assets/xdce-module-widget-fideuram/styles/style.scss
@@ -43,6 +43,7 @@ body {
                 outline: none !important;
                 -o-transition: all 0.1s;
                 transition: all 0.1s;
+                border-radius: 0.20rem !important;
             }
         }
 
@@ -221,6 +222,15 @@ body {
 
             .isp-modal-close {
                 padding: 14px;
+
+                .isp-font-comuni-chiudi::before {
+                    content: $fa-var-times;
+                    font: 14px / 1 FontAwesome !important;
+                }
+                span {
+                    position: relative;
+                    z-index: 1000;
+                }  
             }
 
             .cursor-pointer {
@@ -229,6 +239,7 @@ body {
 
             .isp-modal-content {
                 padding: unset;
+                max-height: 94vh !important;
 
                 &>div:nth-child(2) {
                     &>* {
@@ -1180,6 +1191,10 @@ body {
     }
 }
 
+rpl-calendar-noa11y.isp-corporate-mode-wrapper.invisible {
+    position: fixed;
+}
+
 .ag-theme-balham {
 
     .ag-header-cell::after,
diff --git a/src/index.ts b/src/index.ts
index 08f543a..e1ee4e3 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -53,6 +53,7 @@ export { DATE_STRING_FORMAT, formatDate, formatNumber, setSpinnerMessage, clearS
     NbpModule,
     AgGridModule,
     FormsModule,
+    ReactiveFormsModule,
   ],
   declarations: [
     NbpBreadCrumbsComponent,
diff --git a/src/widgetfideuram/components/nbp-fid-calendar-generic/nbp-fid-calendar-generic-page.html b/src/widgetfideuram/components/nbp-fid-calendar-generic/nbp-fid-calendar-generic-page.html
deleted file mode 100644
index e8d104d..0000000
--- a/src/widgetfideuram/components/nbp-fid-calendar-generic/nbp-fid-calendar-generic-page.html
+++ /dev/null
@@ -1,583 +0,0 @@
-<!DOCTYPE html>
-<html lang="it">
-
-<head>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600&display=swap" rel="stylesheet">
-    <meta charset="UTF-8">
-    <title>Datepicker Multi-Livello</title>
-    <style>
-        body {
-            font-family: 'Open Sans', Arial, sans-serif;
-            display: flex;
-            justify-content: center;
-            margin-top: 40px;
-        }
-
-        body * {
-            font-family: 'Open Sans', Arial, sans-serif;
-        }
-
-        .calendar {
-            font-size: 12px;
-            padding: 15px;
-            border: 1px solid #e6e6e6;
-            color: #333333;
-            background-color: #ffffff;
-        }
-
-        .calendar-popup {
-            position: absolute;
-            z-index: 100;
-            display: none;
-
-            min-width: 160px;
-            padding: 5px 0;
-            margin: 2px 0 0;
-            -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-            background-clip: padding-box;
-        }
-
-        .calendar-header {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            align-items: center;
-        }
-
-        .view-days .calendar-header {
-            grid-template-columns: 1fr 5fr 1fr;
-        }
-
-        .view-years .calendar-header {
-            grid-template-columns: 1fr 3fr 1fr;
-        }
-
-        .view-months .calendar-cell,
-        .view-years .calendar-cell {
-            padding: 6px 20px;
-        }
-
-        .calendar-cell {
-            padding: 5px 10px;
-            line-height: 1.5;
-            font-size: 12px;
-            background-color: #ffffff;
-            border: 1px solid #e6e6e6;
-            border-radius: 3px;
-            cursor: pointer;
-
-            -webkit-transition: all 0.1s;
-            -o-transition: all 0.1s;
-            transition: all 0.1s;
-        }
-
-        .calendar-cell:not(.disabled):not(.selected):hover {
-            background-color: #e6e6e6;
-        }
-
-        #monthYear {
-            font-weight: bold;
-            flex-grow: 1;
-            text-align: center;
-        }
-
-        .calendar-grid {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            text-align: center;
-        }
-
-        .calendar-grid-7 {
-            grid-template-columns: repeat(7, 1fr);
-        }
-
-        .calendar-grid-5 {
-            grid-template-columns: repeat(5, 1fr);
-        }
-
-        .calendar-grid .day {
-            font-size: 11px;
-            line-height: 1.5;
-            font-weight: bold;
-        }
-
-        .calendar-grid .selected {
-            background-color: #1797be;
-            color: white;
-        }
-
-        .calendar-grid .selected:hover {
-            background-color: #137d9f;
-            border-color: #0e5d76;
-        }
-
-        .calendar-grid .other-month {
-            color: #909fa7;
-        }
-
-        .calendar-grid .today {
-            color: #23b7e5;
-        }
-
-        .calendar-grid:not(:has(.selected)) .today {
-            background-color: #e6e6e6;
-        }
-
-        .calendar-grid .disabled {
-            color: #989898;
-            background-color: #edf1f2;
-            border-color: #dde6e9;
-            cursor: not-allowed;
-        }
-
-        .calendar-actions {
-            padding: 10px 9px 2px;
-            display: flex;
-        }
-
-        .calendar-actions button {
-            font-size: 12px;
-            padding: 5px 10px;
-            line-height: 1.5;
-            background-color: #eb690b;
-            color: #fff;
-            border: 1px solid #e6e6e6;
-            border-radius: 3px;
-            cursor: pointer;
-        }
-
-        .calendar-actions button#todayBtn {
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-        }
-
-        .calendar-actions button#clearBtn {
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-            border-left-width: 0;
-            background-color: #fff;
-            color: #eb690b;
-        }
-
-        .calendar-actions button#confirmBtn {
-            margin-left: auto;
-        }
-
-        .datepicker-wrapper {
-            position: relative;
-            display: inline-flex;
-        }
-        
-        .datepicker-input {
-            padding: 5px;
-            height: 22px;
-            box-sizing: border-box;
-            border: 1px solid #ccc;
-            border-right-width: 0;
-            background: #fff;
-            font-size: 12px;
-        }
-
-        .datepicker-input::placeholder {
-            color: #909fa7;
-        }
-
-        .datepicker-input:focus {
-            border-color: #66afe9;
-            outline: 0;
-        }
-
-        .datepicker-icon {
-            display: inline-flex;
-            align-items: center;
-            font-size: 13.5px;
-
-            padding: 0 10px;
-            box-sizing: border-box;
-            height: 22px;
-            background: #fff;
-            border: 1px solid #ccc;
-            border-bottom-right-radius: 5px;
-            border-top-right-radius: 5px;
-            
-            cursor: pointer;
-        }
-        
-        .datepicker-icon:active,
-        .datepicker-icon:hover,
-        .datepicker-icon:focus {
-            background-color: #e6e6e6;
-            border-color: #cbcbcb;
-        }
-
-        .datepicker-icon:hover:active {
-            background-color: #d4d4d4;
-            border-color: #aaaaaa;
-        }
-    </style>
-</head>
-
-<body>
-    <div class="datepicker-wrapper">
-        <input id="dateInput" class="datepicker-input" type="text" placeholder="DD/MM/YYYY" />
-        <i id="calendarIcon" class="datepicker-icon fa fa-calendar"></i>
-        <div class="calendar calendar-popup" id="calendarPopup"></div>
-    </div>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function () {
-            // Utility per posizionare il popup sotto l'input
-            function positionCalendarPopup() {
-                const input = document.getElementById('dateInput');
-                const popup = document.getElementById('calendarPopup');
-                // 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';
-                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';
-                // popup.style.minWidth = rect.width + 'px';
-            }
-
-            // --- CONFIGURAZIONE FORMATO DATA ---
-            let dateFormat = 'dd/MM/yyyy'; // Cambia qui il formato come preferisci
-
-            // --- ELEMENTI ---
-            const calendarPopup = document.getElementById("calendarPopup");
-            const dateInput = document.getElementById("dateInput");
-            // Questi saranno definiti dopo il rendering del calendario:
-            let calendarEl, monthYearEl;
-
-            let currentDate = new Date();
-            let selectedDate = null;
-            let view = 'days'; // 'days' | 'months' | 'years'
-
-            // CONFIGURAZIONE: giorni della settimana da disabilitare (0=domenica, 6=sabato)
-            const disabledWeekdays = [0, 6]; // es: weekend
-            // CONFIGURAZIONE: range di date da disabilitare (array di oggetti {start, end})
-            const disabledDateRanges = [
-                { start: new Date(2025, 4, 10), end: new Date(2025, 4, 15) }, // 10-15 maggio 2025
-                // aggiungi altri range se necessario
-            ];
-
-            // --- FORMATTAZIONE DATA ---
-            function pad(n) {
-                return n < 10 ? '0' + n : n;
-            }
-
-            function formatDate(date, format) {
-                if (!date) return '';
-                const pad = n => n < 10 ? '0' + n : n;
-                return format
-                    .replace('dd', pad(date.getDate()))
-                    .replace('MM', pad(date.getMonth() + 1))
-                    .replace('yyyy', date.getFullYear())
-                    .replace('yy', String(date.getFullYear()).slice(-2));
-            }
-
-            // --- MOSTRA/NASCONDI CALENDARIO ---
-            function showCalendar() {
-                positionCalendarPopup();
-                renderCalendar();
-                setTimeout(() => {
-                    document.addEventListener('mousedown', onClickOutside);
-                }, 0);
-            }
-
-            function toggleCalendar() {
-                if (calendarPopup.style.display === 'block') {
-                    hideCalendar();
-                } else {
-                    showCalendar();
-                }
-            }
-
-            function hideCalendar() {
-                calendarPopup.style.display = 'none';
-                document.removeEventListener('mousedown', onClickOutside);
-                
-                if (selectedDate) {
-                    currentDate = new Date(selectedDate);
-                } else {
-                    currentDate = new Date();
-                }
-            }
-            function onClickOutside(e) {
-                if (!calendarPopup.contains(e.target) && e.target !== dateInput && e.target !== document.getElementById('calendarIcon')) {
-                    hideCalendar();
-                }
-            }
-
-            // --- SOVRASCRIVI RENDERING ---
-            function renderCalendar() {
-                // Gestione classi view-* su calendarPopup
-                calendarPopup.classList.remove('view-days', 'view-months', 'view-years');
-                if (view === 'days') calendarPopup.classList.add('view-days');
-                else if (view === 'months') calendarPopup.classList.add('view-months');
-                else if (view === 'years') calendarPopup.classList.add('view-years');
-                calendarPopup.innerHTML = `<div class='calendar-header'><button id='prevBtn' class="calendar-cell fa fa-chevron-left"></button><div id='monthYear' class="calendar-cell"></div><button id='nextBtn' class="calendar-cell fa fa-chevron-right"></button></div><div class='calendar-grid' id='calendar'></div><div class='calendar-actions'><button id='todayBtn'>Oggi</button><button id='clearBtn'>Cancella</button><button id='confirmBtn'>Conferma</button></div>`;
-                calendarEl = document.getElementById("calendar");
-                monthYearEl = document.getElementById("monthYear");
-                if (view === 'days') renderDays();
-                else if (view === 'months') renderMonths();
-                else renderYears();
-                // Eventi header e azioni
-                document.getElementById('prevBtn').onclick = prev;
-                document.getElementById('nextBtn').onclick = next;
-                document.getElementById('todayBtn').onclick = goToday;
-                document.getElementById('clearBtn').onclick = clearSelection;
-                document.getElementById('confirmBtn').onclick = confirmDate;
-                monthYearEl.onclick = changeView;
-            }
-
-            // --- LOGICA MODIFICATA: disabilita tutte le date inferiori al 9/05/2025 ---
-            function isDateDisabled(date) {
-                const minDate = new Date(2025, 4, 9, 0, 0, 0, 0); // 9 maggio 2025
-                if (date < minDate) return true;
-                // Disabilita per giorno della settimana
-                if (disabledWeekdays.includes(date.getDay())) return true;
-                // Disabilita per range
-                for (const range of disabledDateRanges) {
-                    if (date >= range.start && date <= range.end) return true;
-                }
-                return false;
-            }
-
-            function renderDays() {
-                calendarEl.classList.add('calendar-grid-7');
-                const months = ['gennaio', 'febbraio', 'marzo', 'aprile', 'maggio', 'giugno', 'luglio', 'agosto', 'settembre', 'ottobre', 'novembre', 'dicembre'];
-                const daysOfWeek = ['lun', 'mar', 'mer', 'gio', 'ven', 'sab', 'dom'];
-                monthYearEl.textContent = `${months[currentDate.getMonth()]} ${currentDate.getFullYear()}`;
-
-                // Intestazione dei giorni della settimana
-                for (let day of daysOfWeek) {
-                    const div = document.createElement("div");
-                    div.classList.add("day");
-                    div.textContent = day;
-                    calendarEl.appendChild(div);
-                }
-
-                const year = currentDate.getFullYear();
-                const month = currentDate.getMonth();
-
-                const firstDayOfMonth = new Date(year, month, 1);
-                const startDay = (firstDayOfMonth.getDay() + 6) % 7; // Luned�=0, Domenica=6
-
-                const daysInCurrentMonth = new Date(year, month + 1, 0).getDate();
-                const daysInPrevMonth = new Date(year, month, 0).getDate();
-
-                // Giorni del mese precedente
-                for (let i = startDay; i > 0; i--) {
-                    const day = daysInPrevMonth - i + 1;
-                    const div = document.createElement("div");
-                    div.textContent = pad(day);
-                    div.classList.add("other-month");
-                    div.classList.add("calendar-cell");
-
-                    const prevMonthDate = new Date(year, month - 1, day);
-                    if (isDateDisabled(prevMonthDate)) {
-                        div.classList.add("disabled");
-                    } else {
-                        div.onclick = () => {
-                            currentDate.setMonth(month - 1);
-                            selectedDate = prevMonthDate;
-                            dateInput.value = formatDate(selectedDate, dateFormat); // aggiorna subito input
-                            renderCalendar();
-                        };
-                    }
-                    calendarEl.appendChild(div);
-                }
-
-                // Giorni del mese corrente
-                for (let i = 1; i <= daysInCurrentMonth; i++) {
-                    const div = document.createElement("div");
-                    div.textContent = pad(i);
-                    div.classList.add("calendar-cell");
-                    const thisDate = new Date(year, month, i);
-                    if (selectedDate && sameDate(selectedDate, thisDate)) div.classList.add("selected");
-                    if (sameDate(new Date(), thisDate)) div.classList.add("today");
-                    if (isDateDisabled(thisDate)) {
-                        div.classList.add("disabled");
-                    } else {
-                        div.onclick = () => {
-                            selectedDate = thisDate;
-                            dateInput.value = formatDate(selectedDate, dateFormat); // aggiorna subito input
-                            renderCalendar();
-                        };
-                    }
-                    calendarEl.appendChild(div);
-                }
-
-                // Giorni del mese successivo
-                const totalCells = 42; // 7 giorni x 6 settimane
-                const filledCells = startDay + daysInCurrentMonth;
-                const nextMonthDays = totalCells - filledCells;
-                for (let i = 1; i <= nextMonthDays; i++) {
-                    const div = document.createElement("div");
-                    div.textContent = pad(i);
-                    div.classList.add("other-month");
-                    div.classList.add("calendar-cell");
-                    const nextMonthDate = new Date(year, month + 1, i);
-                    if (isDateDisabled(nextMonthDate)) {
-                        div.classList.add("disabled");
-                    } else {
-                        div.onclick = () => {
-                            currentDate.setMonth(month + 1);
-                            selectedDate = nextMonthDate;
-                            dateInput.value = formatDate(selectedDate, dateFormat); // aggiorna subito input
-                            renderCalendar();
-                        };
-                    }
-                    calendarEl.appendChild(div);
-                }
-            }
-
-            function renderMonths() {
-                const months = ['gennaio', 'febbraio', 'marzo', 'aprile', 'maggio', 'giugno', 'luglio', 'agosto', 'settembre', 'ottobre', 'novembre', 'dicembre'];
-                monthYearEl.textContent = currentDate.getFullYear();
-                months.forEach((m, idx) => {
-                    const div = document.createElement("div");
-                    div.textContent = m;
-                    div.classList.add("calendar-cell");
-                    const now = new Date();
-                    if (currentDate.getFullYear() === now.getFullYear() && idx === now.getMonth()) {
-                        div.classList.add("today");
-                    }
-                    // Aggiungi la classe 'selected' se il mese corrisponde a selectedDate
-                    if (selectedDate && currentDate.getFullYear() === selectedDate.getFullYear() && idx === selectedDate.getMonth()) {
-                        div.classList.add("selected");
-                    }
-                    // Disabilita mese se tutto il mese è inferiore alla data minima
-                    const minDate = new Date(2025, 4, 9, 0, 0, 0, 0);
-                    const firstDay = new Date(currentDate.getFullYear(), idx, 1);
-                    const lastDay = new Date(currentDate.getFullYear(), idx + 1, 0, 23, 59, 59, 999);
-                    let disableMonth = lastDay < minDate;
-                    if (disableMonth) {
-                        div.classList.add("disabled");
-                    } else {
-                        div.onclick = () => {
-                            currentDate.setMonth(idx);
-                            view = 'days';
-                            renderCalendar();
-                        };
-                    }
-                    calendarEl.appendChild(div);
-                });
-            }
-
-            function renderYears() {
-                calendarEl.classList.remove('calendar-grid-7');
-                calendarEl.classList.add('calendar-grid-5');
-                // 20 anni, 5x4
-                const base = Math.floor(currentDate.getFullYear() / 20) * 20;
-                monthYearEl.textContent = `${base} - ${base + 19}`;
-                for (let y = base; y < base + 20; y++) {
-                    const div = document.createElement("div");
-                    div.textContent = y;
-                    div.classList.add("calendar-cell");
-                    if (y === new Date().getFullYear()) div.classList.add("today");
-                    if (selectedDate && y === selectedDate.getFullYear()) div.classList.add("selected");
-                    // Disabilita anno se tutto l'anno è inferiore alla data minima
-                    const minDate = new Date(2025, 4, 9, 0, 0, 0, 0);
-                    const lastDayOfYear = new Date(y, 11, 31, 23, 59, 59, 999);
-                    let disableYear = lastDayOfYear < minDate;
-                    if (disableYear) {
-                        div.classList.add("disabled");
-                    } else {
-                        div.onclick = () => {
-                            currentDate.setFullYear(y);
-                            view = 'months';
-                            renderCalendar();
-                        };
-                    }
-                    calendarEl.appendChild(div);
-                }
-            }
-
-            function changeView() {
-                if (view === 'days') view = 'months';
-                else if (view === 'months') view = 'years';
-                renderCalendar();
-            }
-
-            function prev() {
-                if (view === 'days') currentDate.setMonth(currentDate.getMonth() - 1);
-                else if (view === 'months') currentDate.setFullYear(currentDate.getFullYear() - 1);
-                else currentDate.setFullYear(currentDate.getFullYear() - 20);
-                renderCalendar();
-            }
-
-            function next() {
-                if (view === 'days') currentDate.setMonth(currentDate.getMonth() + 1);
-                else if (view === 'months') currentDate.setFullYear(currentDate.getFullYear() + 1);
-                else currentDate.setFullYear(currentDate.getFullYear() + 20);
-                renderCalendar();
-            }
-
-            function goToday() {
-                currentDate = new Date();
-                selectedDate = new Date();
-                dateInput.value = formatDate(selectedDate, dateFormat);
-                view = 'days';
-                renderCalendar();
-            }
-
-            function clearSelection() {
-                selectedDate = null;
-                dateInput.value = '';
-                renderCalendar();
-            }
-
-            function confirmDate() {
-                hideCalendar();
-            }
-
-            function sameDate(d1, d2) {
-                return d1.getFullYear() === d2.getFullYear() &&
-                    d1.getMonth() === d2.getMonth() &&
-                    d1.getDate() === d2.getDate();
-            }
-
-            // Inizializza input (opzionale: mostra la data di oggi)
-            dateInput.value = selectedDate ? formatDate(selectedDate, dateFormat) : '';
-            // Eventi su input e icona
-
-            // Permetti inserimento manuale della data
-            document.getElementById('dateInput').addEventListener('input', function (e) {
-                const value = e.target.value;
-                // Regex base per dd/MM/yyyy
-                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 (!isDateDisabled(date)) {
-                            selectedDate = date;
-                            currentDate = new Date(date);
-                            dateInput.value = formatDate(selectedDate, dateFormat);
-                            dateInput.classList.remove('input-error');
-                            renderCalendar();
-                            return;
-                        }
-                    }
-                }
-                // Se non valido, evidenzia errore
-                dateInput.classList.add('input-error');
-            });
-            document.getElementById('calendarIcon').addEventListener('click', toggleCalendar);
-            // Espone showCalendar globalmente solo se serve (compatibilità)
-            window.showCalendar = showCalendar;
-        });
-    </script>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/src/widgetfideuram/components/nbp-fid-combo/nbp-fid-combo.component.html b/src/widgetfideuram/components/nbp-fid-combo/nbp-fid-combo.component.html
index 5480ab7..ac1eea2 100644
--- a/src/widgetfideuram/components/nbp-fid-combo/nbp-fid-combo.component.html
+++ b/src/widgetfideuram/components/nbp-fid-combo/nbp-fid-combo.component.html
@@ -1,9 +1,18 @@
-<select class="nbp-fid-combo" (change)="onChange($event)" [disabled]="disabled">
-    <option *ngIf="nbpShowEmptyValue"
-        [selected]="ngModel === _emptyValue"
-        [value]="_emptyValue">{{_emptyLabel}}</option>
+<select
+    class="nbp-fid-combo"
+    [name]="name"
+    ngDefaultControl
+    (change)="onValueChange($event)"
+    [disabled]="disabled">
+    <option
+        *ngIf="nbpShowEmptyValue"
+        [selected]="value === _emptyValue"
+        [ngValue]="_emptyValue"
+        [value]="_emptyValue"
+        >{{_emptyLabel}}</option>
     <option *ngFor="let op of _options"
-        [value]="optStrValue(op)"
-        [selected]="selected(op)"
-        >{{optLabel(op)}}</option>
+        [value]="op.strValue"
+        [ngValue]="op.value"
+        [selected]="op.selected"
+        >{{op.label}}</option>
 </select>
diff --git a/src/widgetfideuram/components/nbp-fid-combo/nbp-fid-combo.component.scss b/src/widgetfideuram/components/nbp-fid-combo/nbp-fid-combo.component.scss
index 5b1acc1..78604c9 100644
--- a/src/widgetfideuram/components/nbp-fid-combo/nbp-fid-combo.component.scss
+++ b/src/widgetfideuram/components/nbp-fid-combo/nbp-fid-combo.component.scss
@@ -1,24 +1,35 @@
 .nbp-fid-combo {
-    border: 1px solid;
-    border-color: #DDE6E9; // map-get($gray-palette, 100);
-    // background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat;
-    // background: #fff url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 16' width='10px' height='10px' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='white'/></g></svg>") no-repeat;
-    // background: #fff url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 16' width='10px' height='10px' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z'/></g></svg>") no-repeat;
-    // background-position: calc(100% - 0.75em) center !important;
-
-    background: #fff;
-    // -moz-appearance:none !important;
-    // -webkit-appearance: none !important;
-    // appearance: none !important;
-    min-width: 2em;
-    padding-top: 1px;
-    padding-bottom: 1px;
-    padding-left: 1px;
-    padding-right: 1em !important;
+    // border: 1px solid;
+    // border-color: #DDE6E9; // map-get($gray-palette, 100);
+    // background: #fff;
+    // min-width: 2em;
+    // padding-top: 1px;
+    // padding-bottom: 1px;
+    // padding-left: 1px;
+    // padding-right: 1em !important;
+    // width: 100%;
+    display: block;
     width: 100%;
+    padding: 1px;
+    height: 22px;
+    font-size: 12px;
+    line-height: 1.52857143;
+    color: #3a3f51;
+    background-color: #ffffff;
+    background-image: none;
+    border: 1px solid #dde6e9;
+    border-radius: 0;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    box-shadow: 0 0 0 #000 !important;
+    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 
     &:focus,
     &:active { 
+        outline: 0 !important;
+        box-shadow: 0 0 0 #000 !important;
         border-color: #66AFE9; // map-get($blue-palette, 100);
     }
 }
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 ba58f16..b30619d 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
@@ -1,20 +1,57 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output, OnInit, forwardRef, ChangeDetectionStrategy } from '@angular/core';
 import {
     NbpBaseComponent,
     NbpStyle,
     NbpDataSource
 } from '@isp/xdce-widget';
 
+import {ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, } from '@angular/forms';
+
+//
+// auto incremental index for noname combo instance
+let comboIndex = 111;
+
 @Component({
     selector: 'nbp-fid-combo',
     templateUrl: './nbp-fid-combo.component.html',
-    styleUrls: ['./nbp-fid-combo.component.scss']
+    styleUrls: ['./nbp-fid-combo.component.scss'],
+    providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => NbpFidComboComponent),
+            multi: true
+        }
+    ]
 })
-export class NbpFidComboComponent extends NbpBaseComponent {
-    constructor(){
+export class NbpFidComboComponent
+    extends NbpBaseComponent 
+    implements ControlValueAccessor {
+    
+    constructor() {
         super()
     }
 
+    @Input() name: string;
+    
+    onChange: any = () => { };
+    onTouch: any = () => {};
+    
+    compareFn(c1: any, c2: any): boolean {
+        return c1 && c2 ? c1.value === c2.value : c1 === c2;
+    }
+
+    registerOnChange(fn: any): void {
+        this.onChange = fn;
+    }
+
+    registerOnTouched(fn: any): void {
+        this.onTouch = fn;
+    }
+
+    writeValue(input: string) {
+        this.value = input;
+    }
+
     @Input() nbpViewField : string = null;
     @Input() nbpKeyField : string = null;
 
@@ -24,16 +61,23 @@ export class NbpFidComboComponent extends NbpBaseComponent {
 
     private _model: any;
     @Input()
-    set ngModel(value:  any) {
+    set value(value:  any) {
         this._model = value;
-        if (this._nbpShowEmptyValue && this._model !== null && !this.nbpViewField) {
-            this._emptyValue = this._model;
-            this._emptyLabel = this._model;
-        }
+        if (this._model === undefined)
+            this._model = null;
+
+        // FUTURE handle a model value that is not present in options
+        // as "empty" value
+        // if (this._nbpShowEmptyValue && this._model !== null && !this.nbpViewField) {
+        //     this._emptyValue = this._model;
+        //     this._emptyLabel = this._model;
+        // }
+
+        this._selectOnModel();
     }
 
     @Output() ngModelChange = new EventEmitter<any>();
-    get ngModel(): any {
+    get value(): any {
         return this._model;
     }
 
@@ -76,7 +120,10 @@ export class NbpFidComboComponent extends NbpBaseComponent {
     }
 
     ngOnInit(): void {
-        this._readOptions();
+        if (!this.name) {
+            this.name = "combo_" + (comboIndex++);
+        }
+        this._readOptions(null);
     }
 
     optStrValue(opt: any) {
@@ -121,11 +168,26 @@ export class NbpFidComboComponent extends NbpBaseComponent {
     }
 
     
-    selected(op : any) {
-        return this.optValue(op) === this.ngModel;
+    _selectOnModel() {
+        const arr = this._options;
+        for (let a of arr) {
+            a.selected = false;
+        }
+        const val = this.value;
+        if (val === null || val === undefined)
+            return;
+
+        for (let a of arr) {
+            const v = a.value;
+            const sv = a.strValue;
+            if (sv === val) {
+                a.selected = true;
+                break;
+            }
+        }
     }
 
-    onChange(event: Event) {
+    onValueChange(event: Event) {
         if (this._disabled)
             return;
 
@@ -142,7 +204,9 @@ export class NbpFidComboComponent extends NbpBaseComponent {
             }
         }
 
-        this.ngModel = sel;
-        this.ngModelChange.emit(this.ngModel);
+        this.value = sel;
+        this.ngModelChange.emit(this.value);
+        if (this.onChange)
+            this.onChange(this.value);
     }
 }
\ No newline at end of file