PDC/xdce-module-widget-fideuram-v1
16
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Aggiunte api, traduzione e ngmodel

Browse Source
This commit is contained in:
Simone Angeloni Bei 2025-05-12 17:09:06 +02:00
parent aef2744548
commit d3b3d2ce61
6 changed files with 702 additions and 375 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/index.ts
View File

@ -41,6 +41,7 @@ export { WidgetFideuramShowcaseComponent } from './widgetfideuram/components/wid
import { AgGridModule, AngularFrameworkComponentWrapper, AngularFrameworkOverrides } from 'ag-grid-angular'; import { AgGridModule, AngularFrameworkComponentWrapper, AngularFrameworkOverrides } from 'ag-grid-angular';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { NbpFidCalendarGenericComponent } from './widgetfideuram/components/nbp-fid-calendar-generic/nbp-fid-calendar-generic.component'; 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 { NbpFidCalendarGenericComponent } from './widgetfideuram/components/nbp-fid-calendar-generic/nbp-fid-calendar-generic.component';
export { AgGridModule } from 'ag-grid-angular'; export { AgGridModule } from 'ag-grid-angular';
@ -53,7 +54,7 @@ export { DATE_STRING_FORMAT, formatDate, formatNumber, setSpinnerMessage, clearS
NbpModule, NbpModule,
AgGridModule, AgGridModule,
FormsModule, FormsModule,
ReactiveFormsModule, TranslateModule
], ],
declarations: [ declarations: [
NbpBreadCrumbsComponent, NbpBreadCrumbsComponent,

143
src/widgetfideuram/components/nbp-fid-calendar-generic/nbp-fid-calendar-generic.component.html
View File

@ -1,91 +1,124 @@
<div class="datepicker-wrapper"> <div class="datepicker-wrapper">
<input #dateInput <input
class="datepicker-input" #dateInput
type="text" [disabled]="disabled"
placeholder="DD/MM/YYYY" [id]="id"
[value]="formattedSelectedDate" [name]="name"
(input)="onDateInputChange($event)" /> class="datepicker-input"
type="text"
placeholder="DD/MM/YYYY"
[value]="formattedSelectedDate"
(input)="onDateInputChange($event)"
/>
<i class="datepicker-icon fa fa-calendar" (click)="toggleCalendar()"></i> <i class="datepicker-icon fa fa-calendar" (click)="toggleCalendar()"></i>
<div #calendarPopup <div
class="calendar calendar-popup" #calendarPopup
[class.view-days]="view === 'days'" class="calendar calendar-popup"
[class.view-months]="view === 'months'" [class.view-days]="view === 'days'"
[class.view-years]="view === 'years'" [class.view-months]="view === 'months'"
[style.display]="calendarVisible ? 'block' : 'none'"> [class.view-years]="view === 'years'"
[style.display]="calendarVisible ? 'block' : 'none'"
>
<!-- Calendar Header --> <!-- Calendar Header -->
<div class="calendar-header"> <div class="calendar-header">
<button class="calendar-cell fa fa-chevron-left" (click)="prev()"></button> <button
<div class="calendar-cell" id="monthYear" (click)="changeView()">{{ monthYearHeader }}</div> class="calendar-cell fa fa-chevron-left"
<button class="calendar-cell fa fa-chevron-right" (click)="next()"></button> (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> </div>
<!-- Calendar Grid --> <!-- 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 --> <!-- Days View -->
<ng-container *ngIf="view === 'days'"> <ng-container *ngIf="view === 'days'">
<!-- Days of Week --> <!-- Days of Week -->
<div *ngFor="let day of daysOfWeek" class="day">{{ day }}</div> <div *ngFor="let day of daysOfWeek" class="day">{{ day }}</div>
<!-- Previous Month Days --> <!-- Previous Month Days -->
<div *ngFor="let day of getPreviousMonthDays()" <div
class="calendar-cell other-month" *ngFor="let day of getPreviousMonthDays()"
[class.disabled]="day.disabled" class="calendar-cell other-month"
(click)="onPrevMonthDayClick(day)"> [class.disabled]="day.disabled"
(click)="onPrevMonthDayClick(day)"
>
{{ pad(day.day) }} {{ pad(day.day) }}
</div> </div>
<!-- Current Month Days --> <!-- Current Month Days -->
<div *ngFor="let day of getCurrentMonthDays()" <div
class="calendar-cell" *ngFor="let day of getCurrentMonthDays()"
[class.today]="day.isToday" class="calendar-cell"
[class.selected]="day.isSelected" [class.today]="day.isToday"
[class.disabled]="day.disabled" [class.selected]="day.isSelected"
(click)="onCurrentMonthDayClick(day)"> [class.disabled]="day.disabled"
(click)="onCurrentMonthDayClick(day)"
>
{{ pad(day.day) }} {{ pad(day.day) }}
</div> </div>
<!-- Next Month Days --> <!-- Next Month Days -->
<div *ngFor="let day of getNextMonthDays()" <div
class="calendar-cell other-month" *ngFor="let day of getNextMonthDays()"
[class.disabled]="day.disabled" class="calendar-cell other-month"
(click)="onNextMonthDayClick(day)"> [class.disabled]="day.disabled"
(click)="onNextMonthDayClick(day)"
>
{{ pad(day.day) }} {{ pad(day.day) }}
</div> </div>
</ng-container> </ng-container>
<!-- Months View --> <!-- Months View -->
<ng-container *ngIf="view === 'months'"> <ng-container *ngIf="view === 'months'">
<div *ngFor="let month of getVisibleMonths()" <div
class="calendar-cell" *ngFor="let month of getVisibleMonths()"
[class.today]="month.isCurrentMonth" class="calendar-cell"
[class.selected]="month.isSelected" [class.today]="month.isCurrentMonth"
[class.disabled]="month.disabled" [class.selected]="month.isSelected"
(click)="onMonthClick(month)"> [class.disabled]="month.disabled"
(click)="onMonthClick(month)"
>
{{ month.name }} {{ month.name }}
</div> </div>
</ng-container> </ng-container>
<!-- Years View --> <!-- Years View -->
<ng-container *ngIf="view === 'years'"> <ng-container *ngIf="view === 'years'">
<div *ngFor="let yearObj of getVisibleYears()" <div
class="calendar-cell" *ngFor="let yearObj of getVisibleYears()"
[class.today]="yearObj.isCurrentYear" class="calendar-cell"
[class.selected]="yearObj.isSelected" [class.today]="yearObj.isCurrentYear"
[class.disabled]="yearObj.disabled" [class.selected]="yearObj.isSelected"
(click)="onYearClick(yearObj)"> [class.disabled]="yearObj.disabled"
(click)="onYearClick(yearObj)"
>
{{ yearObj.year }} {{ yearObj.year }}
</div> </div>
</ng-container> </ng-container>
</div> </div>
<!-- Calendar Actions --> <!-- Calendar Actions -->
<div class="calendar-actions"> <div class="calendar-actions">
<button id="todayBtn" (click)="goToday()">Oggi</button> <button id="todayBtn" [disabled]="isTodayDisabled()" (click)="goToday()">
<button id="clearBtn" (click)="clearSelection()">Cancella</button> {{ "CALENDARIO.OGGI" | translate }}
<button id="confirmBtn" (click)="confirmDate()">Conferma</button> </button>
<button id="clearBtn" (click)="clearSelection()">
{{ "CALENDARIO.CANCELLA" | translate }}
</button>
<button id="confirmBtn" (click)="confirmDate()">
{{ "CALENDARIO.CONFERMA" | translate }}
</button>
</div> </div>
</div> </div>
</div> </div>

444
src/widgetfideuram/components/nbp-fid-calendar-generic/nbp-fid-calendar-generic.component.ts
View File

@ -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({ @Component({
selector: 'nbp-fid-calendar-generic', selector: 'nbp-fid-calendar-generic',
templateUrl: './nbp-fid-calendar-generic.component.html', 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 { export class NbpFidCalendarGenericComponent
@Input() dateFormat: string = 'dd/MM/yyyy'; 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() disabledWeekdays: number[] = []; // 0=domenica, 6=sabato
@Input() disabledDateRanges: { start: Date, end: Date }[] = []; @Input() disabledDateRanges: { start: Date; end: Date }[] = [];
@Input() minDate: Date; @Input() minDate: Date;
@Input() maxDate: 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 // Cache per evitare ricalcoli continui e problemi di rendering
private _previousMonthDaysCache: { day: number, disabled: boolean }[] = []; private _previousMonthDaysCache: { day: number; disabled: boolean }[] = [];
private _currentMonthDaysCache: { day: number, isToday: boolean, isSelected: boolean, disabled: boolean }[] = []; private _currentMonthDaysCache: {
private _nextMonthDaysCache: { day: number, disabled: boolean }[] = []; day: number;
private _visibleMonthsCache: { monthIndex: number, name: string, isCurrentMonth: boolean, isSelected: boolean, disabled: boolean }[] = []; isToday: boolean;
private _visibleYearsCache: { year: number, isCurrentYear: boolean, isSelected: boolean, disabled: boolean }[] = []; isSelected: boolean;
@ViewChild('calendarPopup') calendarPopup: ElementRef; 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(); currentDate: Date = new Date();
selectedDate: Date = null; selectedDate: Date = null;
view: 'days' | 'months' | 'years' = 'days'; view: "days" | "months" | "years" = "days";
months: string[] = ['gennaio', 'febbraio', 'marzo', 'aprile', 'maggio', 'giugno', 'luglio', 'agosto', 'settembre', 'ottobre', 'novembre', 'dicembre']; months: string[] = [
daysOfWeek: string[] = ['lun', 'mar', 'mer', 'gio', 'ven', 'sab', 'dom']; "gennaio",
formattedSelectedDate: string = ''; "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; 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 { ngOnInit(): void {
// Inizializza la data selezionata se presente // Inizializza la data selezionata se presente
if (this.selectedDate) { if (this.selectedDate) {
this.formattedSelectedDate = this.formatDate(this.selectedDate, this.dateFormat); this.formattedSelectedDate = this.formatDate(
this.selectedDate,
this.dateFormat
);
} }
// Inizializza le cache // Inizializza le cache
this.updateAllCaches(); this.updateAllCaches();
} }
// --- UTILITY --- // --- UTILITY ---
private pad(n: number): string { 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 { formatDate(date: Date, format: string): string {
if (!date) return ''; if (!date) return "";
return format return format
.replace('dd', this.pad(date.getDate())) .replace("dd", this.pad(date.getDate()))
.replace('MM', this.pad(date.getMonth() + 1)) .replace("MM", this.pad(date.getMonth() + 1))
.replace('yyyy', date.getFullYear().toString()) .replace("yyyy", date.getFullYear().toString())
.replace('yy', String(date.getFullYear()).slice(-2)); .replace("yy", String(date.getFullYear()).slice(-2));
} }
sameDate(d1: Date, d2: Date): boolean { sameDate(d1: Date, d2: Date): boolean {
return d1.getFullYear() === d2.getFullYear() && return (
d1.getFullYear() === d2.getFullYear() &&
d1.getMonth() === d2.getMonth() && d1.getMonth() === d2.getMonth() &&
d1.getDate() === d2.getDate(); d1.getDate() === d2.getDate()
);
} }
// --- GESTIONE POPUP --- // --- GESTIONE POPUP ---
positionCalendarPopup(): void { positionCalendarPopup(): void {
if (!this.calendarPopup || !this.dateInput) return; if (!this.calendarPopup || !this.dateInput) return;
const input = this.dateInput.nativeElement; const input = this.dateInput.nativeElement;
const popup = this.calendarPopup.nativeElement; const popup = this.calendarPopup.nativeElement;
// Sposta il popup in fondo al body (portal) // Sposta il popup in fondo al body (portal)
if (popup.parentNode !== document.body) { if (popup.parentNode !== document.body) {
document.body.appendChild(popup); document.body.appendChild(popup);
} }
popup.style.display = 'block'; popup.style.display = "block";
popup.style.position = 'absolute'; popup.style.position = "absolute";
popup.style.zIndex = '9999'; popup.style.zIndex = "9999";
const rect = input.getBoundingClientRect(); const rect = input.getBoundingClientRect();
const scrollTop = window.pageYOffset || document.documentElement.scrollTop; const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft; const scrollLeft =
window.pageXOffset || document.documentElement.scrollLeft;
popup.style.top = (rect.bottom + scrollTop) + 'px';
popup.style.left = (rect.left + scrollLeft) + 'px'; popup.style.top = rect.bottom + scrollTop + "px";
popup.style.left = rect.left + scrollLeft + "px";
} }
toggleCalendar(): void { toggleCalendar(): void {
this.calendarVisible = !this.calendarVisible; if (!this.disabled) {
if (this.calendarVisible) { this.calendarVisible = !this.calendarVisible;
this.showCalendar(); if (this.calendarVisible) {
this.updateAllCaches(); this.showCalendar();
} else { this.updateAllCaches();
this.hideCalendar(); } else {
this.hideCalendar();
}
} }
} }
@ -107,9 +198,9 @@ export class NbpFidCalendarGenericComponent implements OnInit {
hideCalendar(): void { hideCalendar(): void {
this.calendarVisible = false; this.calendarVisible = false;
if (this.calendarPopup) { if (this.calendarPopup) {
this.calendarPopup.nativeElement.style.display = 'none'; this.calendarPopup.nativeElement.style.display = "none";
} }
if (this.selectedDate) { if (this.selectedDate) {
this.currentDate = new Date(this.selectedDate); this.currentDate = new Date(this.selectedDate);
} else { } else {
@ -117,12 +208,14 @@ export class NbpFidCalendarGenericComponent implements OnInit {
} }
} }
@HostListener('document:mousedown', ['$event']) @HostListener("document:mousedown", ["$event"])
onClickOutside(event: MouseEvent): void { onClickOutside(event: MouseEvent): void {
if (this.calendarVisible && if (
!this.elementRef.nativeElement.contains(event.target) && this.calendarVisible &&
this.calendarPopup && !this.elementRef.nativeElement.contains(event.target) &&
!this.calendarPopup.nativeElement.contains(event.target)) { this.calendarPopup &&
!this.calendarPopup.nativeElement.contains(event.target)
) {
this.hideCalendar(); this.hideCalendar();
} }
} }
@ -142,15 +235,20 @@ export class NbpFidCalendarGenericComponent implements OnInit {
for (const range of this.disabledDateRanges) { for (const range of this.disabledDateRanges) {
if (date >= range.start && date <= range.end) return true; if (date >= range.start && date <= range.end) return true;
} }
return false; return false;
} }
isTodayDisabled(): boolean {
const today = new Date();
return this.isDateDisabled(today);
}
// --- NAVIGATION --- // --- NAVIGATION ---
prev(): void { prev(): void {
if (this.view === 'days') { if (this.view === "days") {
this.currentDate.setMonth(this.currentDate.getMonth() - 1); this.currentDate.setMonth(this.currentDate.getMonth() - 1);
} else if (this.view === 'months') { } else if (this.view === "months") {
this.currentDate.setFullYear(this.currentDate.getFullYear() - 1); this.currentDate.setFullYear(this.currentDate.getFullYear() - 1);
} else { } else {
this.currentDate.setFullYear(this.currentDate.getFullYear() - 20); this.currentDate.setFullYear(this.currentDate.getFullYear() - 20);
@ -160,9 +258,9 @@ export class NbpFidCalendarGenericComponent implements OnInit {
} }
next(): void { next(): void {
if (this.view === 'days') { if (this.view === "days") {
this.currentDate.setMonth(this.currentDate.getMonth() + 1); this.currentDate.setMonth(this.currentDate.getMonth() + 1);
} else if (this.view === 'months') { } else if (this.view === "months") {
this.currentDate.setFullYear(this.currentDate.getFullYear() + 1); this.currentDate.setFullYear(this.currentDate.getFullYear() + 1);
} else { } else {
this.currentDate.setFullYear(this.currentDate.getFullYear() + 20); this.currentDate.setFullYear(this.currentDate.getFullYear() + 20);
@ -174,29 +272,32 @@ export class NbpFidCalendarGenericComponent implements OnInit {
goToday(): void { goToday(): void {
this.currentDate = new Date(); this.currentDate = new Date();
this.selectedDate = new Date(); this.selectedDate = new Date();
this.formattedSelectedDate = this.formatDate(this.selectedDate, this.dateFormat); this.formattedSelectedDate = this.formatDate(
this.view = 'days'; this.selectedDate,
this.dateChange.emit(this.selectedDate); this.dateFormat
);
this.view = "days";
this.selectedDateChange.emit(this.selectedDate);
this.updateAllCaches(); this.updateAllCaches();
} }
clearSelection(): void { clearSelection(): void {
this.selectedDate = null; this.selectedDate = null;
this.formattedSelectedDate = ''; this.formattedSelectedDate = "";
this.dateChange.emit(null); this.selectedDateChange.emit(null);
} }
confirmDate(): void { confirmDate(): void {
// Metodo usato per confermare esplicitamente la data corrente // Metodo usato per confermare esplicitamente la data corrente
this.dateChange.emit(this.selectedDate); this.selectedDateChange.emit(this.selectedDate);
this.hideCalendar(); this.hideCalendar();
} }
changeView(): void { changeView(): void {
if (this.view === 'days') { if (this.view === "days") {
this.view = 'months'; this.view = "months";
} else if (this.view === 'months') { } else if (this.view === "months") {
this.view = 'years'; this.view = "years";
} }
this.updateAllCaches(); this.updateAllCaches();
} }
@ -204,28 +305,31 @@ export class NbpFidCalendarGenericComponent implements OnInit {
// --- SELEZIONE DATE --- // --- SELEZIONE DATE ---
selectDate(date: Date): void { selectDate(date: Date): void {
if (this.isDateDisabled(date)) return; if (this.isDateDisabled(date)) return;
this.selectedDate = date; 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 // Non emettiamo qui l'evento dateChange per evitare doppie emissioni
this.updateAllCaches(); this.updateAllCaches();
} }
selectMonth(monthIndex: number): void { selectMonth(monthIndex: number): void {
if (this.isMonthDisabled(monthIndex)) return; if (this.isMonthDisabled(monthIndex)) return;
this.currentDate.setMonth(monthIndex); this.currentDate.setMonth(monthIndex);
this.currentDate = new Date(this.currentDate); // Forza refresh this.currentDate = new Date(this.currentDate); // Forza refresh
this.view = 'days'; this.view = "days";
this.updateAllCaches(); this.updateAllCaches();
} }
selectYear(year: number): void { selectYear(year: number): void {
if (this.isYearDisabled(year)) return; if (this.isYearDisabled(year)) return;
this.currentDate.setFullYear(year); this.currentDate.setFullYear(year);
this.currentDate = new Date(this.currentDate); // Forza refresh this.currentDate = new Date(this.currentDate); // Forza refresh
this.view = 'months'; this.view = "months";
this.updateAllCaches(); this.updateAllCaches();
} }
@ -233,14 +337,17 @@ export class NbpFidCalendarGenericComponent implements OnInit {
const year = this.currentDate.getFullYear(); const year = this.currentDate.getFullYear();
const month = this.currentDate.getMonth(); const month = this.currentDate.getMonth();
const prevMonthDate = new Date(year, month - 1, day); const prevMonthDate = new Date(year, month - 1, day);
if (this.isDateDisabled(prevMonthDate)) return; if (this.isDateDisabled(prevMonthDate)) return;
this.currentDate.setMonth(month - 1); this.currentDate.setMonth(month - 1);
this.currentDate = new Date(this.currentDate); // Forza refresh this.currentDate = new Date(this.currentDate); // Forza refresh
this.selectedDate = prevMonthDate; this.selectedDate = prevMonthDate;
this.formattedSelectedDate = this.formatDate(this.selectedDate, this.dateFormat); this.formattedSelectedDate = this.formatDate(
this.dateChange.emit(this.selectedDate); this.selectedDate,
this.dateFormat
);
this.selectedDateChange.emit(this.selectedDate);
this.updateAllCaches(); this.updateAllCaches();
this.hideCalendar(); // Chiudi il calendario dopo la selezione this.hideCalendar(); // Chiudi il calendario dopo la selezione
} }
@ -249,14 +356,17 @@ export class NbpFidCalendarGenericComponent implements OnInit {
const year = this.currentDate.getFullYear(); const year = this.currentDate.getFullYear();
const month = this.currentDate.getMonth(); const month = this.currentDate.getMonth();
const nextMonthDate = new Date(year, month + 1, day); const nextMonthDate = new Date(year, month + 1, day);
if (this.isDateDisabled(nextMonthDate)) return; if (this.isDateDisabled(nextMonthDate)) return;
this.currentDate.setMonth(month + 1); this.currentDate.setMonth(month + 1);
this.currentDate = new Date(this.currentDate); // Forza refresh this.currentDate = new Date(this.currentDate); // Forza refresh
this.selectedDate = nextMonthDate; this.selectedDate = nextMonthDate;
this.formattedSelectedDate = this.formatDate(this.selectedDate, this.dateFormat); this.formattedSelectedDate = this.formatDate(
this.dateChange.emit(this.selectedDate); this.selectedDate,
this.dateFormat
);
this.selectedDateChange.emit(this.selectedDate);
this.updateAllCaches(); this.updateAllCaches();
this.hideCalendar(); // Chiudi il calendario dopo la selezione this.hideCalendar(); // Chiudi il calendario dopo la selezione
} }
@ -264,18 +374,22 @@ export class NbpFidCalendarGenericComponent implements OnInit {
// --- UTILITY PER MESI E ANNI --- // --- UTILITY PER MESI E ANNI ---
isMonthDisabled(monthIndex: number): boolean { isMonthDisabled(monthIndex: number): boolean {
// Se non ci sono restrizioni, il mese è abilitato // 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; return false;
} }
const year = this.currentDate.getFullYear(); const year = this.currentDate.getFullYear();
const firstDayOfMonth = new Date(year, monthIndex, 1, 0, 0, 0, 0); const firstDayOfMonth = new Date(year, monthIndex, 1, 0, 0, 0, 0);
const lastDayOfMonth = new Date(year, monthIndex + 1, 0, 23, 59, 59, 999); const lastDayOfMonth = new Date(year, monthIndex + 1, 0, 23, 59, 59, 999);
// Disabilita mese se completamente fuori dai limiti // Disabilita mese se completamente fuori dai limiti
if (this.minDate && lastDayOfMonth < this.minDate) return true; if (this.minDate && lastDayOfMonth < this.minDate) return true;
if (this.maxDate && firstDayOfMonth > this.maxDate) return true; if (this.maxDate && firstDayOfMonth > this.maxDate) return true;
return false; return false;
} }
@ -284,14 +398,14 @@ export class NbpFidCalendarGenericComponent implements OnInit {
if (!this.minDate && !this.maxDate) { if (!this.minDate && !this.maxDate) {
return false; return false;
} }
const firstDayOfYear = new Date(year, 0, 1, 0, 0, 0, 0); const firstDayOfYear = new Date(year, 0, 1, 0, 0, 0, 0);
const lastDayOfYear = new Date(year, 11, 31, 23, 59, 59, 999); const lastDayOfYear = new Date(year, 11, 31, 23, 59, 59, 999);
// Disabilita anno se completamente fuori dai limiti // Disabilita anno se completamente fuori dai limiti
if (this.minDate && lastDayOfYear < this.minDate) return true; if (this.minDate && lastDayOfYear < this.minDate) return true;
if (this.maxDate && firstDayOfYear > this.maxDate) return true; if (this.maxDate && firstDayOfYear > this.maxDate) return true;
return false; return false;
} }
@ -299,22 +413,26 @@ export class NbpFidCalendarGenericComponent implements OnInit {
onDateInputChange(event: Event): void { onDateInputChange(event: Event): void {
const value = (event.target as HTMLInputElement).value; const value = (event.target as HTMLInputElement).value;
const datePattern = /^(\d{2})\/(\d{2})\/(\d{4})$/; const datePattern = /^(\d{2})\/(\d{2})\/(\d{4})$/;
if (datePattern.test(value)) { if (datePattern.test(value)) {
const [, dd, mm, yyyy] = value.match(datePattern); const [, dd, mm, yyyy] = value.match(datePattern);
const date = new Date(parseInt(yyyy), parseInt(mm) - 1, parseInt(dd)); const date = new Date(parseInt(yyyy), parseInt(mm) - 1, parseInt(dd));
// Controlla che sia una data valida // Controlla che sia una data valida
if (date && if (
date.getDate() === parseInt(dd) && date &&
(date.getMonth() + 1) === parseInt(mm) && date.getDate() === parseInt(dd) &&
date.getFullYear() === parseInt(yyyy)) { date.getMonth() + 1 === parseInt(mm) &&
date.getFullYear() === parseInt(yyyy)
) {
if (!this.isDateDisabled(date)) { if (!this.isDateDisabled(date)) {
this.selectedDate = date; this.selectedDate = date;
this.currentDate = new Date(date); this.currentDate = new Date(date);
this.formattedSelectedDate = this.formatDate(this.selectedDate, this.dateFormat); this.formattedSelectedDate = this.formatDate(
this.dateChange.emit(this.selectedDate); this.selectedDate,
this.dateFormat
);
this.selectedDateChange.emit(this.selectedDate);
this.updateAllCaches(); this.updateAllCaches();
return; return;
} }
@ -326,7 +444,7 @@ export class NbpFidCalendarGenericComponent implements OnInit {
getDaysInMonth(year: number, month: number): number { getDaysInMonth(year: number, month: number): number {
return new Date(year, month + 1, 0).getDate(); return new Date(year, month + 1, 0).getDate();
} }
// Metodo per aggiornare tutte le cache quando cambiano i dati // Metodo per aggiornare tutte le cache quando cambiano i dati
private updateAllCaches(): void { private updateAllCaches(): void {
this.updatePreviousMonthDaysCache(); this.updatePreviousMonthDaysCache();
@ -335,99 +453,105 @@ export class NbpFidCalendarGenericComponent implements OnInit {
this.updateVisibleMonthsCache(); this.updateVisibleMonthsCache();
this.updateVisibleYearsCache(); this.updateVisibleYearsCache();
} }
// Metodi per aggiornare le singole cache // Metodi per aggiornare le singole cache
private updatePreviousMonthDaysCache(): void { private updatePreviousMonthDaysCache(): void {
const year = this.currentDate.getFullYear(); const year = this.currentDate.getFullYear();
const month = this.currentDate.getMonth(); const month = this.currentDate.getMonth();
const startDay = this.getFirstDayOfMonth(year, month); const startDay = this.getFirstDayOfMonth(year, month);
const daysInPrevMonth = this.getDaysInMonth(year, month - 1); const daysInPrevMonth = this.getDaysInMonth(year, month - 1);
const days = []; const days = [];
for (let i = startDay; i > 0; i--) { for (let i = startDay; i > 0; i--) {
const day = daysInPrevMonth - i + 1; const day = daysInPrevMonth - i + 1;
const prevMonthDate = new Date(year, month - 1, day); const prevMonthDate = new Date(year, month - 1, day);
days.push({ days.push({
day, day,
disabled: this.isDateDisabled(prevMonthDate) disabled: this.isDateDisabled(prevMonthDate),
}); });
} }
this._previousMonthDaysCache = days; this._previousMonthDaysCache = days;
} }
private updateCurrentMonthDaysCache(): void { private updateCurrentMonthDaysCache(): void {
const year = this.currentDate.getFullYear(); const year = this.currentDate.getFullYear();
const month = this.currentDate.getMonth(); const month = this.currentDate.getMonth();
const daysInMonth = this.getDaysInMonth(year, month); const daysInMonth = this.getDaysInMonth(year, month);
const today = new Date(); const today = new Date();
const days = []; const days = [];
for (let i = 1; i <= daysInMonth; i++) { for (let i = 1; i <= daysInMonth; i++) {
const date = new Date(year, month, i); const date = new Date(year, month, i);
days.push({ days.push({
day: i, day: i,
isToday: this.sameDate(today, date), isToday: this.sameDate(today, date),
isSelected: this.selectedDate ? this.sameDate(this.selectedDate, date) : false, isSelected: this.selectedDate
disabled: this.isDateDisabled(date) ? this.sameDate(this.selectedDate, date)
: false,
disabled: this.isDateDisabled(date),
}); });
} }
this._currentMonthDaysCache = days; this._currentMonthDaysCache = days;
} }
private updateNextMonthDaysCache(): void { private updateNextMonthDaysCache(): void {
const year = this.currentDate.getFullYear(); const year = this.currentDate.getFullYear();
const month = this.currentDate.getMonth(); const month = this.currentDate.getMonth();
const startDay = this.getFirstDayOfMonth(year, month); const startDay = this.getFirstDayOfMonth(year, month);
const daysInMonth = this.getDaysInMonth(year, month); const daysInMonth = this.getDaysInMonth(year, month);
const totalCells = 42; // 7 giorni x 6 settimane const totalCells = 42; // 7 giorni x 6 settimane
const nextMonthDays = totalCells - (startDay + daysInMonth); const nextMonthDays = totalCells - (startDay + daysInMonth);
const days = []; const days = [];
for (let i = 1; i <= nextMonthDays; i++) { for (let i = 1; i <= nextMonthDays; i++) {
const nextMonthDate = new Date(year, month + 1, i); const nextMonthDate = new Date(year, month + 1, i);
days.push({ days.push({
day: i, day: i,
disabled: this.isDateDisabled(nextMonthDate) disabled: this.isDateDisabled(nextMonthDate),
}); });
} }
this._nextMonthDaysCache = days; this._nextMonthDaysCache = days;
} }
private updateVisibleMonthsCache(): void { private updateVisibleMonthsCache(): void {
const currentYear = this.currentDate.getFullYear(); const currentYear = this.currentDate.getFullYear();
const today = new Date(); const today = new Date();
const months = this.months.map((name, idx) => ({ const months = this.months.map((name, idx) => ({
monthIndex: idx, monthIndex: idx,
name, name,
isCurrentMonth: currentYear === today.getFullYear() && idx === today.getMonth(), isCurrentMonth:
isSelected: this.selectedDate ? currentYear === today.getFullYear() && idx === today.getMonth(),
currentYear === this.selectedDate.getFullYear() && isSelected: this.selectedDate
idx === this.selectedDate.getMonth() : false, ? currentYear === this.selectedDate.getFullYear() &&
disabled: this.isMonthDisabled(idx) idx === this.selectedDate.getMonth()
: false,
disabled: this.isMonthDisabled(idx),
})); }));
this._visibleMonthsCache = months; this._visibleMonthsCache = months;
} }
private updateVisibleYearsCache(): void { private updateVisibleYearsCache(): void {
const base = Math.floor(this.currentDate.getFullYear() / 20) * 20; const base = Math.floor(this.currentDate.getFullYear() / 20) * 20;
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
const years = []; const years = [];
for (let y = base; y < base + 20; y++) { for (let y = base; y < base + 20; y++) {
years.push({ years.push({
year: y, year: y,
isCurrentYear: y === currentYear, isCurrentYear: y === currentYear,
isSelected: this.selectedDate ? y === this.selectedDate.getFullYear() : false, isSelected: this.selectedDate
disabled: this.isYearDisabled(y) ? y === this.selectedDate.getFullYear()
: false,
disabled: this.isYearDisabled(y),
}); });
} }
this._visibleYearsCache = years; 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 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; return this._previousMonthDaysCache;
} }
getCurrentMonthDays(): { day: number, isToday: boolean, isSelected: boolean, disabled: boolean }[] { getCurrentMonthDays(): {
day: number;
isToday: boolean;
isSelected: boolean;
disabled: boolean;
}[] {
return this._currentMonthDaysCache; return this._currentMonthDaysCache;
} }
getNextMonthDays(): { day: number, disabled: boolean }[] { getNextMonthDays(): { day: number; disabled: boolean }[] {
return this._nextMonthDaysCache; return this._nextMonthDaysCache;
} }
getVisibleYears(): { year: number, isCurrentYear: boolean, isSelected: boolean, disabled: boolean }[] { getVisibleYears(): {
year: number;
isCurrentYear: boolean;
isSelected: boolean;
disabled: boolean;
}[] {
return this._visibleYearsCache; 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; return this._visibleMonthsCache;
} }
get yearRange(): string { get yearRange(): string {
if (this.view === 'years') { if (this.view === "years") {
const base = Math.floor(this.currentDate.getFullYear() / 20) * 20; const base = Math.floor(this.currentDate.getFullYear() / 20) * 20;
return `${base} - ${base + 19}`; return `${base} - ${base + 19}`;
} }
@ -464,39 +604,61 @@ export class NbpFidCalendarGenericComponent implements OnInit {
} }
get monthYearHeader(): string { get monthYearHeader(): string {
if (this.view === 'days') { if (this.view === "days") {
return `${this.months[this.currentDate.getMonth()]} ${this.currentDate.getFullYear()}`; return `${
this.months[this.currentDate.getMonth()]
} ${this.currentDate.getFullYear()}`;
} }
return this.yearRange; return this.yearRange;
} }
// --- AZIONI SUI GIORNI, MESI E ANNI --- // --- AZIONI SUI GIORNI, MESI E ANNI ---
onPrevMonthDayClick(day: { day: number, disabled: boolean }): void { onPrevMonthDayClick(day: { day: number; disabled: boolean }): void {
if (day.disabled) return; if (day.disabled) return;
this.selectDayFromPrevMonth(day.day); this.selectDayFromPrevMonth(day.day);
// Non serve chiamare hideCalendar() qui perché lo fa già selectDayFromPrevMonth // 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; 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.selectDate(date);
this.dateChange.emit(this.selectedDate); this.selectedDateChange.emit(this.selectedDate);
this.hideCalendar(); this.hideCalendar();
} }
onNextMonthDayClick(day: { day: number, disabled: boolean }): void { onNextMonthDayClick(day: { day: number; disabled: boolean }): void {
if (day.disabled) return; if (day.disabled) return;
this.selectDayFromNextMonth(day.day); this.selectDayFromNextMonth(day.day);
// Non serve chiamare hideCalendar() qui perché lo fa già selectDayFromNextMonth // 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; if (month.disabled) return;
this.selectMonth(month.monthIndex); 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; if (yearObj.disabled) return;
this.selectYear(yearObj.year); this.selectYear(yearObj.year);
} }

2
src/widgetfideuram/components/nbp-fid-combo/nbp-fid-combo.component.ts
View File

@ -123,7 +123,7 @@ export class NbpFidComboComponent
if (!this.name) { if (!this.name) {
this.name = "combo_" + (comboIndex++); this.name = "combo_" + (comboIndex++);
} }
this._readOptions(null); this._readOptions();
} }
optStrValue(opt: any) { optStrValue(opt: any) {

483
src/widgetfideuram/components/showcase/showcase1.component.html
View File

@ -1,194 +1,325 @@
<div> <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" <p class="new-part">Tabbar with title:</p>
[nbpTabContent]="true">
<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> </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"> <p class="new-part">Input text (nbp-input-container + nbp-input-text):</p>
<div class="tab-bar-title">Title:</div> <div>
<nbp-tab-bar [nbpStyle]="_nbpStyle.DEFAULT" [nbpItems]="items" [(nbpSelectedIndex)]="currentSelectedIndex" <nbp-input-container
[nbpTabContent]="true"> [nbpLabel]="labelInput4"
</nbp-tab-bar> [nbpStyle]="_nbpStyle.PRIMARY"
</div> [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 <p class="new-part">
elements:</p> Calendar generic (nbp-input-container + nbp-calendar-generic)
<div class="nbp-tab-bar-title"> </p>
<div class="tab-bar-title">Title:</div> <div>
<nbp-toggle-tabset> <nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
<nbp-toggle-tab disabled="true" title="Scheda 0"> <nbp-calendar-generic
<h3>Scheda 0 - Selezionata</h3> [id]="'calendarDefault'"
<span>{{ longText }}</span> [name]="'calendarDefault'"
</nbp-toggle-tab> [nbpStyle]="_nbpStyle.DEFAULT"
<nbp-toggle-tab active="true" title="Scheda 1"> [nbpPlacement]="_nbpCalendarPosition.BOTTOM_LEFT"
<h3>Scheda 1 - Selezionata</h3> [nbpLabelPattern]="_nbpCalendarPattern.GGMMAAAA"
<span>{{ longText }}</span> [(ngModel)]="calendarModel"
</nbp-toggle-tab> >
<nbp-toggle-tab title="Scheda 2"> </nbp-calendar-generic>
<h3>Scheda 2 - Selezionata</h3> </nbp-input-container>
<span>{{ longText }}</span> </div>
</nbp-toggle-tab> <div>
<nbp-toggle-tab title="Scheda 3"> <nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
<h3>Scheda 3 - Selezionata</h3> <nbp-calendar-generic
<span>{{ longText }}</span> [id]="'calendarConstrainedDateInterval'"
</nbp-toggle-tab> [name]="'calendarConstrainedDateInterval'"
</nbp-toggle-tabset> [nbpStyle]="_nbpStyle.DEFAULT"
</div> [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> <p class="new-part">
<div> Fideuram Calendar generic (nbp-input-container + bp-fid-calendar-generic)
<nbp-input-container [nbpLabel]="labelInput4" [nbpStyle]="_nbpStyle.PRIMARY" [infoText]="'Inserire un importo'"> </p>
<nbp-input-text id="input-text-primary-3" [name]="'importoPrimary'" [(ngModel)]="importoprovaR" <div>
nbpInputType=nbpImporto [nbpFormat]="currency" [nbpShowValidation]="true" [placeholder]="'placeholder'" <nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
[nbpErrorMessage]="errorMessageInput" [nbpRoundBorder]="false" [nbpStyle]="_nbpStyle.PRIMARY" <nbp-fid-calendar-generic
[nbpIcon]="'ispv2-font-euro-sign'" [accessibleTextForIcon]="'euro'" [label]="labelInput4"> [id]="'calendarId'"
</nbp-input-text> [name]="'calendarName'"
</nbp-input-container> [dateFormat]="'dd/MM/yyyy'"
</div> [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> <p class="new-part">Combo (nbp-input-container + nbp-combo)</p>
<div> <div>
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'"> <nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
<nbp-calendar-generic [id]="'calendarDefault'" [name]="'calendarDefault'" [nbpStyle]="_nbpStyle.DEFAULT" <nbp-combo
[nbpPlacement]="_nbpCalendarPosition.BOTTOM_LEFT" [nbpLabelPattern]="_nbpCalendarPattern.GGMMAAAA" [id]="'comboDefault'"
[(ngModel)]="calendarModel"> [name]="'comboDefault'"
</nbp-calendar-generic> [nbpStyle]="_nbpStyle.DEFAULT"
</nbp-input-container> [nbpDataSource]="comboDatasource"
</div> [(ngModel)]="comboSelectedValue"
<div> [nbpShowEmptyValue]="true"
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'"> >
<nbp-calendar-generic [id]="'calendarConstrainedDateInterval'" [name]="'calendarConstrainedDateInterval'" </nbp-combo>
[nbpStyle]="_nbpStyle.DEFAULT" [nbpPlacement]="_nbpCalendarPosition.BOTTOM_RIGHT" </nbp-input-container>
[nbpLabelPattern]="_nbpCalendarPattern.GGMMAAAA" [(ngModel)]="calendarModel" <nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
[startDateEnabled]="startDate" [endDateEnabled]="endDate"> <nbp-combo
</nbp-calendar-generic> [id]="'comboDefault'"
</nbp-input-container> [name]="'comboDefault'"
</div> [nbpStyle]="_nbpStyle.DEFAULT"
<div> [nbpDataSource]="comboDatasource"
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'"> [(ngModel)]="comboSelectedValue"
<nbp-calendar-generic [id]="'calendarConstrainedDateInterval'" [name]="'calendarConstrainedDateInterval'" [nbpShowEmptyValue]="true"
[nbpStyle]="_nbpStyle.DEFAULT" [nbpPlacement]="_nbpCalendarPosition.BOTTOM_RIGHT" [disabled]="true" [disabled]="true"
[nbpLabelPattern]="_nbpCalendarPattern.GGMMAAAA" [(ngModel)]="calendarModel" >
[startDateEnabled]="startDate" [endDateEnabled]="endDate"> </nbp-combo>
</nbp-calendar-generic> </nbp-input-container>
</nbp-input-container> </div>
</div>
<p class="new-part">Fideuram Calendar generic (nbp-input-container + bp-fid-calendar-generic)</p> <p class="new-part">Combo Filter (nbp-input-container + nbp-combo-filter)</p>
<div> <div>
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'"> <nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
<nbp-fid-calendar-generic [id]="'calendarId'" [name]="'calendarName'" [dateFormat]="'dd/MM/yyyy'" <nbp-combo-filter
[minDate]="fidMinDate" [maxDate]="fidMaxDate" [disabled]="false" [id]="'comboDefault'"
[(ngModel)]="fidCalendarModel" (dateChange)="onDateChange($event)"> [name]="'comboDefault'"
</nbp-fid-calendar-generic> [nbpStyle]="_nbpStyle.DEFAULT"
</nbp-input-container> [nbpDataSource]="comboDatasource"
</div> [(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> <nbp-input-container [nbpStyle]="_nbpStyle.PRIMARY" [nbpLabel]="'Default'">
<div> <nbp-combo-multi
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'"> [id]="'combomultiDefault'"
<nbp-combo [id]="'comboDefault'" [name]="'comboDefault'" [nbpStyle]="_nbpStyle.DEFAULT" [name]="'combomultiDefault'"
[nbpDataSource]="comboDatasource" [(ngModel)]="comboSelectedValue" [nbpShowEmptyValue]="true"> [nbpStyle]="_nbpStyle.PRIMARY"
</nbp-combo> [nbpDataSource]="datasource"
</nbp-input-container> [(ngModel)]="selectedValues"
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'"> >
<nbp-combo [id]="'comboDefault'" [name]="'comboDefault'" [nbpStyle]="_nbpStyle.DEFAULT" </nbp-combo-multi>
[nbpDataSource]="comboDatasource" [(ngModel)]="comboSelectedValue" [nbpShowEmptyValue]="true" </nbp-input-container>
[disabled]="true"> </div>
</nbp-combo>
</nbp-input-container>
</div>
<p class="new-part">Combo Filter (nbp-input-container + nbp-combo-filter)</p> <p class="new-part">Textarea (nbp-input-container + nbp-textarea)</p>
<div> <div>
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'"> <nbp-input-container
<nbp-combo-filter [id]="'comboDefault'" [name]="'comboDefault'" [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Textarea stile default'"
[nbpDataSource]="comboDatasource" [(ngModel)]="comboSelectedValue" [nbpShowEmptyValue]="true"> [nbpStyle]="_nbpStyle.DEFAULT"
</nbp-combo-filter> >
</nbp-input-container> <nbp-textarea
</div> [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> <p class="new-part">Card (nbp-card)</p>
<div> <div style="width: 250px">
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'"> <nbp-card
<nbp-combo-multi [id]="'comboMultiIndent'" [name]="'comboMultiIndent'" [nbpStyle]="_nbpStyle.DEFAULT" [id]="'crd5'"
[nbpDataSource]="datasource" [(ngModel)]="selectedValues" [dropdownVisible]="comboMultiVisible"> [nbpStyle]="_nbpStyle.DEFAULT"
</nbp-combo-multi> [title]="cardTitle"
</nbp-input-container> [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-button [nbpLabel]="'button'" [nbpStyle]="_nbpStyle.PRIMARY">
<nbp-combo-multi [id]="'combomultiDefault'" [name]="'combomultiDefault'" [nbpStyle]="_nbpStyle.PRIMARY" </nbp-button>
[nbpDataSource]="datasource" [(ngModel)]="selectedValues"> </div>
</nbp-combo-multi> </div>
</nbp-input-container> </ng-template>
</div> </div>
<p class="new-part">Textarea (nbp-input-container + nbp-textarea)</p> <p class="new-part">Table (nbp-table)</p>
<div> <div>
<nbp-input-container [nbpLabel]="'Textarea stile default'" [nbpStyle]="_nbpStyle.DEFAULT"> <nbp-table
<nbp-textarea [name]="'default-a'" [(ngModel)]="contenutoEmpty" [required]="required" [scrollBar]="'auto'"
[placeholder]="'placeholder'" [maxlength]="lunghezzamax" [minlength]="lunghezzamin" ariaLabel="table"
[nbpStyle]="_nbpStyle.DEFAULT"></nbp-textarea> [nbpId]="'defTable1'"
</nbp-input-container> [nbpOptions]="tableOptions"
</div> [nbpDataSource]="tableDs"
[nbpAutoBind]="true"
<p class="new-part">Card (nbp-card)</p> [nbpSelectionType]="tableSelectionType"
<div style="width: 250px"> [nbpLayoutAuto]="true"
<nbp-card [id]="'crd5'" [nbpStyle]="_nbpStyle.DEFAULT" [title]="cardTitle" [description]="cardDescr" >
[templateRef]="template4"> <nbp-table-column
</nbp-card> nbpId="headerField"
<ng-template #template4> nbpTitle="Header field"
<div class="row"> nbpField="headerField"
<div class="col gap-1"> [nbpVisible]="true"
<nbp-button [nbpLabel]="'button'" [nbpStyle]="_nbpStyle.FOURTH"> >
</nbp-button> </nbp-table-column>
<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>
<nbp-table-column
nbpId="headerField2"
nbpTitle="Header field 2"
nbpField="headerField2"
[nbpSortable]="true"
[nbpVisible]="true"
>
</nbp-table-column>
</nbp-table> </nbp-table>
</div> </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>

2
src/widgetfideuram/components/showcase/showcase1.component.ts
View File

@ -53,7 +53,7 @@ export class Showcase1Component extends NbpBaseComponent {
// Range di date disabilitate per l'esempio // Range di date disabilitate per l'esempio
fidDisabledDateRanges: { start: Date, end: Date }[] = [ 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 { start: new Date(2025, 4, 25), end: new Date(2025, 4, 28) } // 25-28 maggio 2025
]; ];
// //