Aggiunte api, traduzione e ngmodel
This commit is contained in:
Simone Angeloni Bei
parent
aef2744548
commit
d3b3d2ce61
@ -41,6 +41,7 @@ export { WidgetFideuramShowcaseComponent } from './widgetfideuram/components/wid
|
||||
import { AgGridModule, AngularFrameworkComponentWrapper, AngularFrameworkOverrides } from 'ag-grid-angular';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { NbpFidCalendarGenericComponent } from './widgetfideuram/components/nbp-fid-calendar-generic/nbp-fid-calendar-generic.component';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
export { NbpFidCalendarGenericComponent } from './widgetfideuram/components/nbp-fid-calendar-generic/nbp-fid-calendar-generic.component';
|
||||
export { AgGridModule } from 'ag-grid-angular';
|
||||
|
||||
@ -53,7 +54,7 @@ export { DATE_STRING_FORMAT, formatDate, formatNumber, setSpinnerMessage, clearS
|
||||
NbpModule,
|
||||
AgGridModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
TranslateModule
|
||||
],
|
||||
declarations: [
|
||||
NbpBreadCrumbsComponent,
|
||||
|
||||
@ -1,81 +1,108 @@
|
||||
<div class="datepicker-wrapper">
|
||||
<input #dateInput
|
||||
class="datepicker-input"
|
||||
type="text"
|
||||
placeholder="DD/MM/YYYY"
|
||||
[value]="formattedSelectedDate"
|
||||
(input)="onDateInputChange($event)" />
|
||||
<input
|
||||
#dateInput
|
||||
[disabled]="disabled"
|
||||
[id]="id"
|
||||
[name]="name"
|
||||
class="datepicker-input"
|
||||
type="text"
|
||||
placeholder="DD/MM/YYYY"
|
||||
[value]="formattedSelectedDate"
|
||||
(input)="onDateInputChange($event)"
|
||||
/>
|
||||
<i class="datepicker-icon fa fa-calendar" (click)="toggleCalendar()"></i>
|
||||
|
||||
<div #calendarPopup
|
||||
class="calendar calendar-popup"
|
||||
[class.view-days]="view === 'days'"
|
||||
[class.view-months]="view === 'months'"
|
||||
[class.view-years]="view === 'years'"
|
||||
[style.display]="calendarVisible ? 'block' : 'none'">
|
||||
|
||||
<div
|
||||
#calendarPopup
|
||||
class="calendar calendar-popup"
|
||||
[class.view-days]="view === 'days'"
|
||||
[class.view-months]="view === 'months'"
|
||||
[class.view-years]="view === 'years'"
|
||||
[style.display]="calendarVisible ? 'block' : 'none'"
|
||||
>
|
||||
<!-- Calendar Header -->
|
||||
<div class="calendar-header">
|
||||
<button class="calendar-cell fa fa-chevron-left" (click)="prev()"></button>
|
||||
<div class="calendar-cell" id="monthYear" (click)="changeView()">{{ monthYearHeader }}</div>
|
||||
<button class="calendar-cell fa fa-chevron-right" (click)="next()"></button>
|
||||
<button
|
||||
class="calendar-cell fa fa-chevron-left"
|
||||
(click)="prev()"
|
||||
></button>
|
||||
<div class="calendar-cell" id="monthYear" (click)="changeView()">
|
||||
{{ monthYearHeader }}
|
||||
</div>
|
||||
<button
|
||||
class="calendar-cell fa fa-chevron-right"
|
||||
(click)="next()"
|
||||
></button>
|
||||
</div>
|
||||
|
||||
<!-- Calendar Grid -->
|
||||
<div class="calendar-grid" [class.calendar-grid-7]="view === 'days'" [class.calendar-grid-5]="view === 'years'">
|
||||
|
||||
<div
|
||||
class="calendar-grid"
|
||||
[class.calendar-grid-7]="view === 'days'"
|
||||
[class.calendar-grid-5]="view === 'years'"
|
||||
>
|
||||
<!-- Days View -->
|
||||
<ng-container *ngIf="view === 'days'">
|
||||
<!-- Days of Week -->
|
||||
<div *ngFor="let day of daysOfWeek" class="day">{{ day }}</div>
|
||||
|
||||
<!-- Previous Month Days -->
|
||||
<div *ngFor="let day of getPreviousMonthDays()"
|
||||
class="calendar-cell other-month"
|
||||
[class.disabled]="day.disabled"
|
||||
(click)="onPrevMonthDayClick(day)">
|
||||
<div
|
||||
*ngFor="let day of getPreviousMonthDays()"
|
||||
class="calendar-cell other-month"
|
||||
[class.disabled]="day.disabled"
|
||||
(click)="onPrevMonthDayClick(day)"
|
||||
>
|
||||
{{ pad(day.day) }}
|
||||
</div>
|
||||
|
||||
<!-- Current Month Days -->
|
||||
<div *ngFor="let day of getCurrentMonthDays()"
|
||||
class="calendar-cell"
|
||||
[class.today]="day.isToday"
|
||||
[class.selected]="day.isSelected"
|
||||
[class.disabled]="day.disabled"
|
||||
(click)="onCurrentMonthDayClick(day)">
|
||||
<div
|
||||
*ngFor="let day of getCurrentMonthDays()"
|
||||
class="calendar-cell"
|
||||
[class.today]="day.isToday"
|
||||
[class.selected]="day.isSelected"
|
||||
[class.disabled]="day.disabled"
|
||||
(click)="onCurrentMonthDayClick(day)"
|
||||
>
|
||||
{{ pad(day.day) }}
|
||||
</div>
|
||||
|
||||
<!-- Next Month Days -->
|
||||
<div *ngFor="let day of getNextMonthDays()"
|
||||
class="calendar-cell other-month"
|
||||
[class.disabled]="day.disabled"
|
||||
(click)="onNextMonthDayClick(day)">
|
||||
<div
|
||||
*ngFor="let day of getNextMonthDays()"
|
||||
class="calendar-cell other-month"
|
||||
[class.disabled]="day.disabled"
|
||||
(click)="onNextMonthDayClick(day)"
|
||||
>
|
||||
{{ pad(day.day) }}
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Months View -->
|
||||
<ng-container *ngIf="view === 'months'">
|
||||
<div *ngFor="let month of getVisibleMonths()"
|
||||
class="calendar-cell"
|
||||
[class.today]="month.isCurrentMonth"
|
||||
[class.selected]="month.isSelected"
|
||||
[class.disabled]="month.disabled"
|
||||
(click)="onMonthClick(month)">
|
||||
<div
|
||||
*ngFor="let month of getVisibleMonths()"
|
||||
class="calendar-cell"
|
||||
[class.today]="month.isCurrentMonth"
|
||||
[class.selected]="month.isSelected"
|
||||
[class.disabled]="month.disabled"
|
||||
(click)="onMonthClick(month)"
|
||||
>
|
||||
{{ month.name }}
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Years View -->
|
||||
<ng-container *ngIf="view === 'years'">
|
||||
<div *ngFor="let yearObj of getVisibleYears()"
|
||||
class="calendar-cell"
|
||||
[class.today]="yearObj.isCurrentYear"
|
||||
[class.selected]="yearObj.isSelected"
|
||||
[class.disabled]="yearObj.disabled"
|
||||
(click)="onYearClick(yearObj)">
|
||||
<div
|
||||
*ngFor="let yearObj of getVisibleYears()"
|
||||
class="calendar-cell"
|
||||
[class.today]="yearObj.isCurrentYear"
|
||||
[class.selected]="yearObj.isSelected"
|
||||
[class.disabled]="yearObj.disabled"
|
||||
(click)="onYearClick(yearObj)"
|
||||
>
|
||||
{{ yearObj.year }}
|
||||
</div>
|
||||
</ng-container>
|
||||
@ -83,9 +110,15 @@
|
||||
|
||||
<!-- Calendar Actions -->
|
||||
<div class="calendar-actions">
|
||||
<button id="todayBtn" (click)="goToday()">Oggi</button>
|
||||
<button id="clearBtn" (click)="clearSelection()">Cancella</button>
|
||||
<button id="confirmBtn" (click)="confirmDate()">Conferma</button>
|
||||
<button id="todayBtn" [disabled]="isTodayDisabled()" (click)="goToday()">
|
||||
{{ "CALENDARIO.OGGI" | translate }}
|
||||
</button>
|
||||
<button id="clearBtn" (click)="clearSelection()">
|
||||
{{ "CALENDARIO.CANCELLA" | translate }}
|
||||
</button>
|
||||
<button id="confirmBtn" (click)="confirmDate()">
|
||||
{{ "CALENDARIO.CONFERMA" | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,42 +1,128 @@
|
||||
import { Component, OnInit, Input, Output, EventEmitter, ElementRef, ViewChild, HostListener, Renderer2 } from '@angular/core';
|
||||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
Input,
|
||||
Output,
|
||||
EventEmitter,
|
||||
ElementRef,
|
||||
ViewChild,
|
||||
HostListener,
|
||||
Renderer2,
|
||||
forwardRef,
|
||||
} from "@angular/core";
|
||||
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
|
||||
import { NbpCalendarPattern, NbpCalendarPosition, NbpStyle } from "@isp/xdce-widget";
|
||||
import { TranslateService } from "@ngx-translate/core";
|
||||
|
||||
@Component({
|
||||
selector: 'nbp-fid-calendar-generic',
|
||||
templateUrl: './nbp-fid-calendar-generic.component.html',
|
||||
styleUrls: ['./nbp-fid-calendar-generic.component.scss']
|
||||
styleUrls: ["./nbp-fid-calendar-generic.component.scss"],
|
||||
providers: [
|
||||
{
|
||||
provide: NG_VALUE_ACCESSOR,
|
||||
useExisting: forwardRef(() => NbpFidCalendarGenericComponent),
|
||||
multi: true,
|
||||
},
|
||||
],
|
||||
})
|
||||
export class NbpFidCalendarGenericComponent implements OnInit {
|
||||
@Input() dateFormat: string = 'dd/MM/yyyy';
|
||||
export class NbpFidCalendarGenericComponent
|
||||
implements OnInit, ControlValueAccessor
|
||||
{
|
||||
@Input() id: string= "";
|
||||
@Input() name: string = "";
|
||||
@Input() disabled: boolean = false;
|
||||
@Input() dateFormat: string = "dd/MM/yyyy";
|
||||
@Input() disabledWeekdays: number[] = []; // 0=domenica, 6=sabato
|
||||
@Input() disabledDateRanges: { start: Date, end: Date }[] = [];
|
||||
@Input() disabledDateRanges: { start: Date; end: Date }[] = [];
|
||||
@Input() minDate: Date;
|
||||
@Input() maxDate: Date;
|
||||
@Output() dateChange = new EventEmitter<Date>();
|
||||
@Input() nbpErrorMessage: string = "";
|
||||
@Input() set disabledWeekends(value: boolean) {
|
||||
if (value) {
|
||||
this.disabledWeekdays = [...this.disabledWeekdays, 0, 6]; // Domenica e Sabato
|
||||
}
|
||||
}
|
||||
@Input() nbpStyle: NbpStyle = NbpStyle.DEFAULT;
|
||||
@Input() nbpLabelPattern : NbpCalendarPattern = NbpCalendarPattern.GGMMAAAA;
|
||||
@Input() nbpPlacement : NbpCalendarPosition = NbpCalendarPosition.BOTTOM_LEFT;
|
||||
@Input() startDateEnabled : Date = null;
|
||||
@Input() endDateEnabled : Date = null;
|
||||
|
||||
@ViewChild('dateInput') dateInput: ElementRef;
|
||||
@Output() ngModelChange = new EventEmitter<Date>();
|
||||
|
||||
@ViewChild("dateInput") dateInput: ElementRef;
|
||||
|
||||
// Cache per evitare ricalcoli continui e problemi di rendering
|
||||
private _previousMonthDaysCache: { day: number, disabled: boolean }[] = [];
|
||||
private _currentMonthDaysCache: { day: number, isToday: boolean, isSelected: boolean, disabled: boolean }[] = [];
|
||||
private _nextMonthDaysCache: { day: number, disabled: boolean }[] = [];
|
||||
private _visibleMonthsCache: { monthIndex: number, name: string, isCurrentMonth: boolean, isSelected: boolean, disabled: boolean }[] = [];
|
||||
private _visibleYearsCache: { year: number, isCurrentYear: boolean, isSelected: boolean, disabled: boolean }[] = [];
|
||||
@ViewChild('calendarPopup') calendarPopup: ElementRef;
|
||||
private _previousMonthDaysCache: { day: number; disabled: boolean }[] = [];
|
||||
private _currentMonthDaysCache: {
|
||||
day: number;
|
||||
isToday: boolean;
|
||||
isSelected: boolean;
|
||||
disabled: boolean;
|
||||
}[] = [];
|
||||
private _nextMonthDaysCache: { day: number; disabled: boolean }[] = [];
|
||||
private _visibleMonthsCache: {
|
||||
monthIndex: number;
|
||||
name: string;
|
||||
isCurrentMonth: boolean;
|
||||
isSelected: boolean;
|
||||
disabled: boolean;
|
||||
}[] = [];
|
||||
private _visibleYearsCache: {
|
||||
year: number;
|
||||
isCurrentYear: boolean;
|
||||
isSelected: boolean;
|
||||
disabled: boolean;
|
||||
}[] = [];
|
||||
@ViewChild("calendarPopup") calendarPopup: ElementRef;
|
||||
|
||||
currentDate: Date = new Date();
|
||||
selectedDate: Date = null;
|
||||
view: 'days' | 'months' | 'years' = 'days';
|
||||
months: string[] = ['gennaio', 'febbraio', 'marzo', 'aprile', 'maggio', 'giugno', 'luglio', 'agosto', 'settembre', 'ottobre', 'novembre', 'dicembre'];
|
||||
daysOfWeek: string[] = ['lun', 'mar', 'mer', 'gio', 'ven', 'sab', 'dom'];
|
||||
formattedSelectedDate: string = '';
|
||||
view: "days" | "months" | "years" = "days";
|
||||
months: string[] = [
|
||||
"gennaio",
|
||||
"febbraio",
|
||||
"marzo",
|
||||
"aprile",
|
||||
"maggio",
|
||||
"giugno",
|
||||
"luglio",
|
||||
"agosto",
|
||||
"settembre",
|
||||
"ottobre",
|
||||
"novembre",
|
||||
"dicembre",
|
||||
];
|
||||
daysOfWeek: string[] = ["lun", "mar", "mer", "gio", "ven", "sab", "dom"];
|
||||
formattedSelectedDate: string = "";
|
||||
calendarVisible: boolean = false;
|
||||
|
||||
constructor(private renderer: Renderer2, private elementRef: ElementRef) { }
|
||||
constructor(private renderer: Renderer2, private elementRef: ElementRef, public translate : TranslateService) {}
|
||||
|
||||
private onChange = (value: Date | null) => {};
|
||||
private onTouched = () => {};
|
||||
|
||||
writeValue(value: Date | null): void {
|
||||
this.selectedDate = value;
|
||||
}
|
||||
registerOnChange(fn: any): void {
|
||||
this.onChange = fn;
|
||||
}
|
||||
registerOnTouched(fn: any): void {
|
||||
this.onTouched = fn;
|
||||
}
|
||||
setDisabledState?(isDisabled: boolean): void {
|
||||
this.disabled = isDisabled;
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
// Inizializza la data selezionata se presente
|
||||
if (this.selectedDate) {
|
||||
this.formattedSelectedDate = this.formatDate(this.selectedDate, this.dateFormat);
|
||||
this.formattedSelectedDate = this.formatDate(
|
||||
this.selectedDate,
|
||||
this.dateFormat
|
||||
);
|
||||
}
|
||||
|
||||
// Inizializza le cache
|
||||
@ -45,22 +131,24 @@ export class NbpFidCalendarGenericComponent implements OnInit {
|
||||
|
||||
// --- UTILITY ---
|
||||
private pad(n: number): string {
|
||||
return n < 10 ? '0' + n : n.toString();
|
||||
return n < 10 ? "0" + n : n.toString();
|
||||
}
|
||||
|
||||
formatDate(date: Date, format: string): string {
|
||||
if (!date) return '';
|
||||
if (!date) return "";
|
||||
return format
|
||||
.replace('dd', this.pad(date.getDate()))
|
||||
.replace('MM', this.pad(date.getMonth() + 1))
|
||||
.replace('yyyy', date.getFullYear().toString())
|
||||
.replace('yy', String(date.getFullYear()).slice(-2));
|
||||
.replace("dd", this.pad(date.getDate()))
|
||||
.replace("MM", this.pad(date.getMonth() + 1))
|
||||
.replace("yyyy", date.getFullYear().toString())
|
||||
.replace("yy", String(date.getFullYear()).slice(-2));
|
||||
}
|
||||
|
||||
sameDate(d1: Date, d2: Date): boolean {
|
||||
return d1.getFullYear() === d2.getFullYear() &&
|
||||
return (
|
||||
d1.getFullYear() === d2.getFullYear() &&
|
||||
d1.getMonth() === d2.getMonth() &&
|
||||
d1.getDate() === d2.getDate();
|
||||
d1.getDate() === d2.getDate()
|
||||
);
|
||||
}
|
||||
|
||||
// --- GESTIONE POPUP ---
|
||||
@ -75,25 +163,28 @@ export class NbpFidCalendarGenericComponent implements OnInit {
|
||||
document.body.appendChild(popup);
|
||||
}
|
||||
|
||||
popup.style.display = 'block';
|
||||
popup.style.position = 'absolute';
|
||||
popup.style.zIndex = '9999';
|
||||
popup.style.display = "block";
|
||||
popup.style.position = "absolute";
|
||||
popup.style.zIndex = "9999";
|
||||
|
||||
const rect = input.getBoundingClientRect();
|
||||
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
|
||||
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 {
|
||||
this.calendarVisible = !this.calendarVisible;
|
||||
if (this.calendarVisible) {
|
||||
this.showCalendar();
|
||||
this.updateAllCaches();
|
||||
} else {
|
||||
this.hideCalendar();
|
||||
if (!this.disabled) {
|
||||
this.calendarVisible = !this.calendarVisible;
|
||||
if (this.calendarVisible) {
|
||||
this.showCalendar();
|
||||
this.updateAllCaches();
|
||||
} else {
|
||||
this.hideCalendar();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -107,7 +198,7 @@ export class NbpFidCalendarGenericComponent implements OnInit {
|
||||
hideCalendar(): void {
|
||||
this.calendarVisible = false;
|
||||
if (this.calendarPopup) {
|
||||
this.calendarPopup.nativeElement.style.display = 'none';
|
||||
this.calendarPopup.nativeElement.style.display = "none";
|
||||
}
|
||||
|
||||
if (this.selectedDate) {
|
||||
@ -117,12 +208,14 @@ export class NbpFidCalendarGenericComponent implements OnInit {
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('document:mousedown', ['$event'])
|
||||
@HostListener("document:mousedown", ["$event"])
|
||||
onClickOutside(event: MouseEvent): void {
|
||||
if (this.calendarVisible &&
|
||||
!this.elementRef.nativeElement.contains(event.target) &&
|
||||
this.calendarPopup &&
|
||||
!this.calendarPopup.nativeElement.contains(event.target)) {
|
||||
if (
|
||||
this.calendarVisible &&
|
||||
!this.elementRef.nativeElement.contains(event.target) &&
|
||||
this.calendarPopup &&
|
||||
!this.calendarPopup.nativeElement.contains(event.target)
|
||||
) {
|
||||
this.hideCalendar();
|
||||
}
|
||||
}
|
||||
@ -146,11 +239,16 @@ export class NbpFidCalendarGenericComponent implements OnInit {
|
||||
return false;
|
||||
}
|
||||
|
||||
isTodayDisabled(): boolean {
|
||||
const today = new Date();
|
||||
return this.isDateDisabled(today);
|
||||
}
|
||||
|
||||
// --- NAVIGATION ---
|
||||
prev(): void {
|
||||
if (this.view === 'days') {
|
||||
if (this.view === "days") {
|
||||
this.currentDate.setMonth(this.currentDate.getMonth() - 1);
|
||||
} else if (this.view === 'months') {
|
||||
} else if (this.view === "months") {
|
||||
this.currentDate.setFullYear(this.currentDate.getFullYear() - 1);
|
||||
} else {
|
||||
this.currentDate.setFullYear(this.currentDate.getFullYear() - 20);
|
||||
@ -160,9 +258,9 @@ export class NbpFidCalendarGenericComponent implements OnInit {
|
||||
}
|
||||
|
||||
next(): void {
|
||||
if (this.view === 'days') {
|
||||
if (this.view === "days") {
|
||||
this.currentDate.setMonth(this.currentDate.getMonth() + 1);
|
||||
} else if (this.view === 'months') {
|
||||
} else if (this.view === "months") {
|
||||
this.currentDate.setFullYear(this.currentDate.getFullYear() + 1);
|
||||
} else {
|
||||
this.currentDate.setFullYear(this.currentDate.getFullYear() + 20);
|
||||
@ -174,29 +272,32 @@ export class NbpFidCalendarGenericComponent implements OnInit {
|
||||
goToday(): void {
|
||||
this.currentDate = new Date();
|
||||
this.selectedDate = new Date();
|
||||
this.formattedSelectedDate = this.formatDate(this.selectedDate, this.dateFormat);
|
||||
this.view = 'days';
|
||||
this.dateChange.emit(this.selectedDate);
|
||||
this.formattedSelectedDate = this.formatDate(
|
||||
this.selectedDate,
|
||||
this.dateFormat
|
||||
);
|
||||
this.view = "days";
|
||||
this.selectedDateChange.emit(this.selectedDate);
|
||||
this.updateAllCaches();
|
||||
}
|
||||
|
||||
clearSelection(): void {
|
||||
this.selectedDate = null;
|
||||
this.formattedSelectedDate = '';
|
||||
this.dateChange.emit(null);
|
||||
this.formattedSelectedDate = "";
|
||||
this.selectedDateChange.emit(null);
|
||||
}
|
||||
|
||||
confirmDate(): void {
|
||||
// Metodo usato per confermare esplicitamente la data corrente
|
||||
this.dateChange.emit(this.selectedDate);
|
||||
this.selectedDateChange.emit(this.selectedDate);
|
||||
this.hideCalendar();
|
||||
}
|
||||
|
||||
changeView(): void {
|
||||
if (this.view === 'days') {
|
||||
this.view = 'months';
|
||||
} else if (this.view === 'months') {
|
||||
this.view = 'years';
|
||||
if (this.view === "days") {
|
||||
this.view = "months";
|
||||
} else if (this.view === "months") {
|
||||
this.view = "years";
|
||||
}
|
||||
this.updateAllCaches();
|
||||
}
|
||||
@ -206,7 +307,10 @@ export class NbpFidCalendarGenericComponent implements OnInit {
|
||||
if (this.isDateDisabled(date)) return;
|
||||
|
||||
this.selectedDate = date;
|
||||
this.formattedSelectedDate = this.formatDate(this.selectedDate, this.dateFormat);
|
||||
this.formattedSelectedDate = this.formatDate(
|
||||
this.selectedDate,
|
||||
this.dateFormat
|
||||
);
|
||||
// Non emettiamo qui l'evento dateChange per evitare doppie emissioni
|
||||
this.updateAllCaches();
|
||||
}
|
||||
@ -216,7 +320,7 @@ export class NbpFidCalendarGenericComponent implements OnInit {
|
||||
|
||||
this.currentDate.setMonth(monthIndex);
|
||||
this.currentDate = new Date(this.currentDate); // Forza refresh
|
||||
this.view = 'days';
|
||||
this.view = "days";
|
||||
this.updateAllCaches();
|
||||
}
|
||||
|
||||
@ -225,7 +329,7 @@ export class NbpFidCalendarGenericComponent implements OnInit {
|
||||
|
||||
this.currentDate.setFullYear(year);
|
||||
this.currentDate = new Date(this.currentDate); // Forza refresh
|
||||
this.view = 'months';
|
||||
this.view = "months";
|
||||
this.updateAllCaches();
|
||||
}
|
||||
|
||||
@ -239,8 +343,11 @@ export class NbpFidCalendarGenericComponent implements OnInit {
|
||||
this.currentDate.setMonth(month - 1);
|
||||
this.currentDate = new Date(this.currentDate); // Forza refresh
|
||||
this.selectedDate = prevMonthDate;
|
||||
this.formattedSelectedDate = this.formatDate(this.selectedDate, this.dateFormat);
|
||||
this.dateChange.emit(this.selectedDate);
|
||||
this.formattedSelectedDate = this.formatDate(
|
||||
this.selectedDate,
|
||||
this.dateFormat
|
||||
);
|
||||
this.selectedDateChange.emit(this.selectedDate);
|
||||
this.updateAllCaches();
|
||||
this.hideCalendar(); // Chiudi il calendario dopo la selezione
|
||||
}
|
||||
@ -255,8 +362,11 @@ export class NbpFidCalendarGenericComponent implements OnInit {
|
||||
this.currentDate.setMonth(month + 1);
|
||||
this.currentDate = new Date(this.currentDate); // Forza refresh
|
||||
this.selectedDate = nextMonthDate;
|
||||
this.formattedSelectedDate = this.formatDate(this.selectedDate, this.dateFormat);
|
||||
this.dateChange.emit(this.selectedDate);
|
||||
this.formattedSelectedDate = this.formatDate(
|
||||
this.selectedDate,
|
||||
this.dateFormat
|
||||
);
|
||||
this.selectedDateChange.emit(this.selectedDate);
|
||||
this.updateAllCaches();
|
||||
this.hideCalendar(); // Chiudi il calendario dopo la selezione
|
||||
}
|
||||
@ -264,7 +374,11 @@ export class NbpFidCalendarGenericComponent implements OnInit {
|
||||
// --- UTILITY PER MESI E ANNI ---
|
||||
isMonthDisabled(monthIndex: number): boolean {
|
||||
// Se non ci sono restrizioni, il mese è abilitato
|
||||
if (!this.minDate && !this.maxDate && (!this.disabledDateRanges || this.disabledDateRanges.length === 0)) {
|
||||
if (
|
||||
!this.minDate &&
|
||||
!this.maxDate &&
|
||||
(!this.disabledDateRanges || this.disabledDateRanges.length === 0)
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
|
||||
@ -305,16 +419,20 @@ export class NbpFidCalendarGenericComponent implements OnInit {
|
||||
const date = new Date(parseInt(yyyy), parseInt(mm) - 1, parseInt(dd));
|
||||
|
||||
// Controlla che sia una data valida
|
||||
if (date &&
|
||||
date.getDate() === parseInt(dd) &&
|
||||
(date.getMonth() + 1) === parseInt(mm) &&
|
||||
date.getFullYear() === parseInt(yyyy)) {
|
||||
|
||||
if (
|
||||
date &&
|
||||
date.getDate() === parseInt(dd) &&
|
||||
date.getMonth() + 1 === parseInt(mm) &&
|
||||
date.getFullYear() === parseInt(yyyy)
|
||||
) {
|
||||
if (!this.isDateDisabled(date)) {
|
||||
this.selectedDate = date;
|
||||
this.currentDate = new Date(date);
|
||||
this.formattedSelectedDate = this.formatDate(this.selectedDate, this.dateFormat);
|
||||
this.dateChange.emit(this.selectedDate);
|
||||
this.formattedSelectedDate = this.formatDate(
|
||||
this.selectedDate,
|
||||
this.dateFormat
|
||||
);
|
||||
this.selectedDateChange.emit(this.selectedDate);
|
||||
this.updateAllCaches();
|
||||
return;
|
||||
}
|
||||
@ -349,7 +467,7 @@ export class NbpFidCalendarGenericComponent implements OnInit {
|
||||
const prevMonthDate = new Date(year, month - 1, day);
|
||||
days.push({
|
||||
day,
|
||||
disabled: this.isDateDisabled(prevMonthDate)
|
||||
disabled: this.isDateDisabled(prevMonthDate),
|
||||
});
|
||||
}
|
||||
|
||||
@ -368,8 +486,10 @@ export class NbpFidCalendarGenericComponent implements OnInit {
|
||||
days.push({
|
||||
day: i,
|
||||
isToday: this.sameDate(today, date),
|
||||
isSelected: this.selectedDate ? this.sameDate(this.selectedDate, date) : false,
|
||||
disabled: this.isDateDisabled(date)
|
||||
isSelected: this.selectedDate
|
||||
? this.sameDate(this.selectedDate, date)
|
||||
: false,
|
||||
disabled: this.isDateDisabled(date),
|
||||
});
|
||||
}
|
||||
|
||||
@ -390,7 +510,7 @@ export class NbpFidCalendarGenericComponent implements OnInit {
|
||||
const nextMonthDate = new Date(year, month + 1, i);
|
||||
days.push({
|
||||
day: i,
|
||||
disabled: this.isDateDisabled(nextMonthDate)
|
||||
disabled: this.isDateDisabled(nextMonthDate),
|
||||
});
|
||||
}
|
||||
|
||||
@ -404,11 +524,13 @@ export class NbpFidCalendarGenericComponent implements OnInit {
|
||||
const months = this.months.map((name, idx) => ({
|
||||
monthIndex: idx,
|
||||
name,
|
||||
isCurrentMonth: currentYear === today.getFullYear() && idx === today.getMonth(),
|
||||
isSelected: this.selectedDate ?
|
||||
currentYear === this.selectedDate.getFullYear() &&
|
||||
idx === this.selectedDate.getMonth() : false,
|
||||
disabled: this.isMonthDisabled(idx)
|
||||
isCurrentMonth:
|
||||
currentYear === today.getFullYear() && idx === today.getMonth(),
|
||||
isSelected: this.selectedDate
|
||||
? currentYear === this.selectedDate.getFullYear() &&
|
||||
idx === this.selectedDate.getMonth()
|
||||
: false,
|
||||
disabled: this.isMonthDisabled(idx),
|
||||
}));
|
||||
|
||||
this._visibleMonthsCache = months;
|
||||
@ -423,8 +545,10 @@ export class NbpFidCalendarGenericComponent implements OnInit {
|
||||
years.push({
|
||||
year: y,
|
||||
isCurrentYear: y === currentYear,
|
||||
isSelected: this.selectedDate ? y === this.selectedDate.getFullYear() : false,
|
||||
disabled: this.isYearDisabled(y)
|
||||
isSelected: this.selectedDate
|
||||
? y === this.selectedDate.getFullYear()
|
||||
: false,
|
||||
disabled: this.isYearDisabled(y),
|
||||
});
|
||||
}
|
||||
|
||||
@ -435,28 +559,44 @@ export class NbpFidCalendarGenericComponent implements OnInit {
|
||||
return (new Date(year, month, 1).getDay() + 6) % 7; // Lunedì=0, Domenica=6
|
||||
}
|
||||
|
||||
getPreviousMonthDays(): { day: number, disabled: boolean }[] {
|
||||
getPreviousMonthDays(): { day: number; disabled: boolean }[] {
|
||||
return this._previousMonthDaysCache;
|
||||
}
|
||||
|
||||
getCurrentMonthDays(): { day: number, isToday: boolean, isSelected: boolean, disabled: boolean }[] {
|
||||
getCurrentMonthDays(): {
|
||||
day: number;
|
||||
isToday: boolean;
|
||||
isSelected: boolean;
|
||||
disabled: boolean;
|
||||
}[] {
|
||||
return this._currentMonthDaysCache;
|
||||
}
|
||||
|
||||
getNextMonthDays(): { day: number, disabled: boolean }[] {
|
||||
getNextMonthDays(): { day: number; disabled: boolean }[] {
|
||||
return this._nextMonthDaysCache;
|
||||
}
|
||||
|
||||
getVisibleYears(): { year: number, isCurrentYear: boolean, isSelected: boolean, disabled: boolean }[] {
|
||||
getVisibleYears(): {
|
||||
year: number;
|
||||
isCurrentYear: boolean;
|
||||
isSelected: boolean;
|
||||
disabled: boolean;
|
||||
}[] {
|
||||
return this._visibleYearsCache;
|
||||
}
|
||||
|
||||
getVisibleMonths(): { monthIndex: number, name: string, isCurrentMonth: boolean, isSelected: boolean, disabled: boolean }[] {
|
||||
getVisibleMonths(): {
|
||||
monthIndex: number;
|
||||
name: string;
|
||||
isCurrentMonth: boolean;
|
||||
isSelected: boolean;
|
||||
disabled: boolean;
|
||||
}[] {
|
||||
return this._visibleMonthsCache;
|
||||
}
|
||||
|
||||
get yearRange(): string {
|
||||
if (this.view === 'years') {
|
||||
if (this.view === "years") {
|
||||
const base = Math.floor(this.currentDate.getFullYear() / 20) * 20;
|
||||
return `${base} - ${base + 19}`;
|
||||
}
|
||||
@ -464,39 +604,61 @@ export class NbpFidCalendarGenericComponent implements OnInit {
|
||||
}
|
||||
|
||||
get monthYearHeader(): string {
|
||||
if (this.view === 'days') {
|
||||
return `${this.months[this.currentDate.getMonth()]} ${this.currentDate.getFullYear()}`;
|
||||
if (this.view === "days") {
|
||||
return `${
|
||||
this.months[this.currentDate.getMonth()]
|
||||
} ${this.currentDate.getFullYear()}`;
|
||||
}
|
||||
return this.yearRange;
|
||||
}
|
||||
|
||||
// --- AZIONI SUI GIORNI, MESI E ANNI ---
|
||||
onPrevMonthDayClick(day: { day: number, disabled: boolean }): void {
|
||||
onPrevMonthDayClick(day: { day: number; disabled: boolean }): void {
|
||||
if (day.disabled) return;
|
||||
this.selectDayFromPrevMonth(day.day);
|
||||
// Non serve chiamare hideCalendar() qui perché lo fa già selectDayFromPrevMonth
|
||||
}
|
||||
|
||||
onCurrentMonthDayClick(day: { day: number, isToday: boolean, isSelected: boolean, disabled: boolean }): void {
|
||||
onCurrentMonthDayClick(day: {
|
||||
day: number;
|
||||
isToday: boolean;
|
||||
isSelected: boolean;
|
||||
disabled: boolean;
|
||||
}): void {
|
||||
if (day.disabled) return;
|
||||
const date = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), day.day);
|
||||
const date = new Date(
|
||||
this.currentDate.getFullYear(),
|
||||
this.currentDate.getMonth(),
|
||||
day.day
|
||||
);
|
||||
this.selectDate(date);
|
||||
this.dateChange.emit(this.selectedDate);
|
||||
this.selectedDateChange.emit(this.selectedDate);
|
||||
this.hideCalendar();
|
||||
}
|
||||
|
||||
onNextMonthDayClick(day: { day: number, disabled: boolean }): void {
|
||||
onNextMonthDayClick(day: { day: number; disabled: boolean }): void {
|
||||
if (day.disabled) return;
|
||||
this.selectDayFromNextMonth(day.day);
|
||||
// Non serve chiamare hideCalendar() qui perché lo fa già selectDayFromNextMonth
|
||||
}
|
||||
|
||||
onMonthClick(month: { monthIndex: number, name: string, isCurrentMonth: boolean, isSelected: boolean, disabled: boolean }): void {
|
||||
onMonthClick(month: {
|
||||
monthIndex: number;
|
||||
name: string;
|
||||
isCurrentMonth: boolean;
|
||||
isSelected: boolean;
|
||||
disabled: boolean;
|
||||
}): void {
|
||||
if (month.disabled) return;
|
||||
this.selectMonth(month.monthIndex);
|
||||
}
|
||||
|
||||
onYearClick(yearObj: { year: number, isCurrentYear: boolean, isSelected: boolean, disabled: boolean }): void {
|
||||
onYearClick(yearObj: {
|
||||
year: number;
|
||||
isCurrentYear: boolean;
|
||||
isSelected: boolean;
|
||||
disabled: boolean;
|
||||
}): void {
|
||||
if (yearObj.disabled) return;
|
||||
this.selectYear(yearObj.year);
|
||||
}
|
||||
|
||||
@ -123,7 +123,7 @@ export class NbpFidComboComponent
|
||||
if (!this.name) {
|
||||
this.name = "combo_" + (comboIndex++);
|
||||
}
|
||||
this._readOptions(null);
|
||||
this._readOptions();
|
||||
}
|
||||
|
||||
optStrValue(opt: any) {
|
||||
|
||||
@ -1,194 +1,325 @@
|
||||
<div>
|
||||
<p class="new-part">Tabbar (nbp-tab-bar):</p>
|
||||
|
||||
<p class="new-part">Tabbar (nbp-tab-bar):</p>
|
||||
<nbp-tab-bar
|
||||
[nbpStyle]="_nbpStyle.DEFAULT"
|
||||
[nbpItems]="items"
|
||||
[(nbpSelectedIndex)]="currentSelectedIndex"
|
||||
[nbpTabContent]="true"
|
||||
>
|
||||
</nbp-tab-bar>
|
||||
|
||||
<nbp-tab-bar [nbpStyle]="_nbpStyle.DEFAULT" [nbpItems]="items" [(nbpSelectedIndex)]="currentSelectedIndex"
|
||||
[nbpTabContent]="true">
|
||||
<p class="new-part">Tabbar with title:</p>
|
||||
|
||||
<div class="nbp-tab-bar-title">
|
||||
<div class="tab-bar-title">Title:</div>
|
||||
<nbp-tab-bar
|
||||
[nbpStyle]="_nbpStyle.DEFAULT"
|
||||
[nbpItems]="items"
|
||||
[(nbpSelectedIndex)]="currentSelectedIndex"
|
||||
[nbpTabContent]="true"
|
||||
>
|
||||
</nbp-tab-bar>
|
||||
</div>
|
||||
|
||||
<p class="new-part">Tabbar with title:</p>
|
||||
<p class="new-part">
|
||||
Toggle Tabset (.nbp-tab-bar-title + .tab-bar-title + nbp-toggle-tabset)
|
||||
check devtools inspector elements:
|
||||
</p>
|
||||
<div class="nbp-tab-bar-title">
|
||||
<div class="tab-bar-title">Title:</div>
|
||||
<nbp-toggle-tabset>
|
||||
<nbp-toggle-tab disabled="true" title="Scheda 0">
|
||||
<h3>Scheda 0 - Selezionata</h3>
|
||||
<span>{{ longText }}</span>
|
||||
</nbp-toggle-tab>
|
||||
<nbp-toggle-tab active="true" title="Scheda 1">
|
||||
<h3>Scheda 1 - Selezionata</h3>
|
||||
<span>{{ longText }}</span>
|
||||
</nbp-toggle-tab>
|
||||
<nbp-toggle-tab title="Scheda 2">
|
||||
<h3>Scheda 2 - Selezionata</h3>
|
||||
<span>{{ longText }}</span>
|
||||
</nbp-toggle-tab>
|
||||
<nbp-toggle-tab title="Scheda 3">
|
||||
<h3>Scheda 3 - Selezionata</h3>
|
||||
<span>{{ longText }}</span>
|
||||
</nbp-toggle-tab>
|
||||
</nbp-toggle-tabset>
|
||||
</div>
|
||||
|
||||
<div class="nbp-tab-bar-title">
|
||||
<div class="tab-bar-title">Title:</div>
|
||||
<nbp-tab-bar [nbpStyle]="_nbpStyle.DEFAULT" [nbpItems]="items" [(nbpSelectedIndex)]="currentSelectedIndex"
|
||||
[nbpTabContent]="true">
|
||||
</nbp-tab-bar>
|
||||
</div>
|
||||
<p class="new-part">Input text (nbp-input-container + nbp-input-text):</p>
|
||||
<div>
|
||||
<nbp-input-container
|
||||
[nbpLabel]="labelInput4"
|
||||
[nbpStyle]="_nbpStyle.PRIMARY"
|
||||
[infoText]="'Inserire un importo'"
|
||||
>
|
||||
<nbp-input-text
|
||||
id="input-text-primary-3"
|
||||
[name]="'importoPrimary'"
|
||||
[(ngModel)]="importoprovaR"
|
||||
nbpInputType="nbpImporto"
|
||||
[nbpFormat]="currency"
|
||||
[nbpShowValidation]="true"
|
||||
[placeholder]="'placeholder'"
|
||||
[nbpErrorMessage]="errorMessageInput"
|
||||
[nbpRoundBorder]="false"
|
||||
[nbpStyle]="_nbpStyle.PRIMARY"
|
||||
[nbpIcon]="'ispv2-font-euro-sign'"
|
||||
[accessibleTextForIcon]="'euro'"
|
||||
[label]="labelInput4"
|
||||
>
|
||||
</nbp-input-text>
|
||||
</nbp-input-container>
|
||||
</div>
|
||||
|
||||
<p class="new-part">Toggle Tabset (.nbp-tab-bar-title + .tab-bar-title + nbp-toggle-tabset) check devtools inspector
|
||||
elements:</p>
|
||||
<div class="nbp-tab-bar-title">
|
||||
<div class="tab-bar-title">Title:</div>
|
||||
<nbp-toggle-tabset>
|
||||
<nbp-toggle-tab disabled="true" title="Scheda 0">
|
||||
<h3>Scheda 0 - Selezionata</h3>
|
||||
<span>{{ longText }}</span>
|
||||
</nbp-toggle-tab>
|
||||
<nbp-toggle-tab active="true" title="Scheda 1">
|
||||
<h3>Scheda 1 - Selezionata</h3>
|
||||
<span>{{ longText }}</span>
|
||||
</nbp-toggle-tab>
|
||||
<nbp-toggle-tab title="Scheda 2">
|
||||
<h3>Scheda 2 - Selezionata</h3>
|
||||
<span>{{ longText }}</span>
|
||||
</nbp-toggle-tab>
|
||||
<nbp-toggle-tab title="Scheda 3">
|
||||
<h3>Scheda 3 - Selezionata</h3>
|
||||
<span>{{ longText }}</span>
|
||||
</nbp-toggle-tab>
|
||||
</nbp-toggle-tabset>
|
||||
</div>
|
||||
<p class="new-part">
|
||||
Calendar generic (nbp-input-container + nbp-calendar-generic)
|
||||
</p>
|
||||
<div>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
|
||||
<nbp-calendar-generic
|
||||
[id]="'calendarDefault'"
|
||||
[name]="'calendarDefault'"
|
||||
[nbpStyle]="_nbpStyle.DEFAULT"
|
||||
[nbpPlacement]="_nbpCalendarPosition.BOTTOM_LEFT"
|
||||
[nbpLabelPattern]="_nbpCalendarPattern.GGMMAAAA"
|
||||
[(ngModel)]="calendarModel"
|
||||
>
|
||||
</nbp-calendar-generic>
|
||||
</nbp-input-container>
|
||||
</div>
|
||||
<div>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
|
||||
<nbp-calendar-generic
|
||||
[id]="'calendarConstrainedDateInterval'"
|
||||
[name]="'calendarConstrainedDateInterval'"
|
||||
[nbpStyle]="_nbpStyle.DEFAULT"
|
||||
[nbpPlacement]="_nbpCalendarPosition.BOTTOM_RIGHT"
|
||||
[nbpLabelPattern]="_nbpCalendarPattern.GGMMAAAA"
|
||||
[(ngModel)]="calendarModel"
|
||||
[startDateEnabled]="startDate"
|
||||
[endDateEnabled]="endDate"
|
||||
>
|
||||
</nbp-calendar-generic>
|
||||
</nbp-input-container>
|
||||
</div>
|
||||
<div>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
|
||||
<nbp-calendar-generic
|
||||
[id]="'calendarConstrainedDateInterval'"
|
||||
[name]="'calendarConstrainedDateInterval'"
|
||||
[nbpStyle]="_nbpStyle.DEFAULT"
|
||||
[nbpPlacement]="_nbpCalendarPosition.BOTTOM_RIGHT"
|
||||
[disabled]="true"
|
||||
[nbpLabelPattern]="_nbpCalendarPattern.GGMMAAAA"
|
||||
[(ngModel)]="calendarModel"
|
||||
[startDateEnabled]="startDate"
|
||||
[endDateEnabled]="endDate"
|
||||
>
|
||||
</nbp-calendar-generic>
|
||||
</nbp-input-container>
|
||||
</div>
|
||||
|
||||
<p class="new-part">Input text (nbp-input-container + nbp-input-text):</p>
|
||||
<div>
|
||||
<nbp-input-container [nbpLabel]="labelInput4" [nbpStyle]="_nbpStyle.PRIMARY" [infoText]="'Inserire un importo'">
|
||||
<nbp-input-text id="input-text-primary-3" [name]="'importoPrimary'" [(ngModel)]="importoprovaR"
|
||||
nbpInputType=nbpImporto [nbpFormat]="currency" [nbpShowValidation]="true" [placeholder]="'placeholder'"
|
||||
[nbpErrorMessage]="errorMessageInput" [nbpRoundBorder]="false" [nbpStyle]="_nbpStyle.PRIMARY"
|
||||
[nbpIcon]="'ispv2-font-euro-sign'" [accessibleTextForIcon]="'euro'" [label]="labelInput4">
|
||||
</nbp-input-text>
|
||||
</nbp-input-container>
|
||||
</div>
|
||||
<p class="new-part">
|
||||
Fideuram Calendar generic (nbp-input-container + bp-fid-calendar-generic)
|
||||
</p>
|
||||
<div>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
|
||||
<nbp-fid-calendar-generic
|
||||
[id]="'calendarId'"
|
||||
[name]="'calendarName'"
|
||||
[dateFormat]="'dd/MM/yyyy'"
|
||||
[minDate]="fidMinDate"
|
||||
[maxDate]="fidMaxDate"
|
||||
[disabled]="false"
|
||||
[(ngModel)]="fidCalendarModel"
|
||||
(ngModelChange)="onDateChange($event)"
|
||||
>
|
||||
</nbp-fid-calendar-generic>
|
||||
</nbp-input-container>
|
||||
</div>
|
||||
|
||||
<p class="new-part">Calendar generic (nbp-input-container + nbp-calendar-generic)</p>
|
||||
<div>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
|
||||
<nbp-calendar-generic [id]="'calendarDefault'" [name]="'calendarDefault'" [nbpStyle]="_nbpStyle.DEFAULT"
|
||||
[nbpPlacement]="_nbpCalendarPosition.BOTTOM_LEFT" [nbpLabelPattern]="_nbpCalendarPattern.GGMMAAAA"
|
||||
[(ngModel)]="calendarModel">
|
||||
</nbp-calendar-generic>
|
||||
</nbp-input-container>
|
||||
</div>
|
||||
<div>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
|
||||
<nbp-calendar-generic [id]="'calendarConstrainedDateInterval'" [name]="'calendarConstrainedDateInterval'"
|
||||
[nbpStyle]="_nbpStyle.DEFAULT" [nbpPlacement]="_nbpCalendarPosition.BOTTOM_RIGHT"
|
||||
[nbpLabelPattern]="_nbpCalendarPattern.GGMMAAAA" [(ngModel)]="calendarModel"
|
||||
[startDateEnabled]="startDate" [endDateEnabled]="endDate">
|
||||
</nbp-calendar-generic>
|
||||
</nbp-input-container>
|
||||
</div>
|
||||
<div>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
|
||||
<nbp-calendar-generic [id]="'calendarConstrainedDateInterval'" [name]="'calendarConstrainedDateInterval'"
|
||||
[nbpStyle]="_nbpStyle.DEFAULT" [nbpPlacement]="_nbpCalendarPosition.BOTTOM_RIGHT" [disabled]="true"
|
||||
[nbpLabelPattern]="_nbpCalendarPattern.GGMMAAAA" [(ngModel)]="calendarModel"
|
||||
[startDateEnabled]="startDate" [endDateEnabled]="endDate">
|
||||
</nbp-calendar-generic>
|
||||
</nbp-input-container>
|
||||
</div>
|
||||
<p class="new-part">Combo (nbp-input-container + nbp-combo)</p>
|
||||
<div>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
|
||||
<nbp-combo
|
||||
[id]="'comboDefault'"
|
||||
[name]="'comboDefault'"
|
||||
[nbpStyle]="_nbpStyle.DEFAULT"
|
||||
[nbpDataSource]="comboDatasource"
|
||||
[(ngModel)]="comboSelectedValue"
|
||||
[nbpShowEmptyValue]="true"
|
||||
>
|
||||
</nbp-combo>
|
||||
</nbp-input-container>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
|
||||
<nbp-combo
|
||||
[id]="'comboDefault'"
|
||||
[name]="'comboDefault'"
|
||||
[nbpStyle]="_nbpStyle.DEFAULT"
|
||||
[nbpDataSource]="comboDatasource"
|
||||
[(ngModel)]="comboSelectedValue"
|
||||
[nbpShowEmptyValue]="true"
|
||||
[disabled]="true"
|
||||
>
|
||||
</nbp-combo>
|
||||
</nbp-input-container>
|
||||
</div>
|
||||
|
||||
<p class="new-part">Fideuram Calendar generic (nbp-input-container + bp-fid-calendar-generic)</p>
|
||||
<div>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
|
||||
<nbp-fid-calendar-generic [id]="'calendarId'" [name]="'calendarName'" [dateFormat]="'dd/MM/yyyy'"
|
||||
[minDate]="fidMinDate" [maxDate]="fidMaxDate" [disabled]="false"
|
||||
[(ngModel)]="fidCalendarModel" (dateChange)="onDateChange($event)">
|
||||
</nbp-fid-calendar-generic>
|
||||
</nbp-input-container>
|
||||
</div>
|
||||
<p class="new-part">Combo Filter (nbp-input-container + nbp-combo-filter)</p>
|
||||
<div>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
|
||||
<nbp-combo-filter
|
||||
[id]="'comboDefault'"
|
||||
[name]="'comboDefault'"
|
||||
[nbpStyle]="_nbpStyle.DEFAULT"
|
||||
[nbpDataSource]="comboDatasource"
|
||||
[(ngModel)]="comboSelectedValue"
|
||||
[nbpShowEmptyValue]="true"
|
||||
>
|
||||
</nbp-combo-filter>
|
||||
</nbp-input-container>
|
||||
</div>
|
||||
|
||||
<p class="new-part">Combo Multi (nbp-input-container + nbp-combo-multi)</p>
|
||||
<div>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
|
||||
<nbp-combo-multi
|
||||
[id]="'comboMultiIndent'"
|
||||
[name]="'comboMultiIndent'"
|
||||
[nbpStyle]="_nbpStyle.DEFAULT"
|
||||
[nbpDataSource]="datasource"
|
||||
[(ngModel)]="selectedValues"
|
||||
[dropdownVisible]="comboMultiVisible"
|
||||
>
|
||||
</nbp-combo-multi>
|
||||
</nbp-input-container>
|
||||
|
||||
<p class="new-part">Combo (nbp-input-container + nbp-combo)</p>
|
||||
<div>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
|
||||
<nbp-combo [id]="'comboDefault'" [name]="'comboDefault'" [nbpStyle]="_nbpStyle.DEFAULT"
|
||||
[nbpDataSource]="comboDatasource" [(ngModel)]="comboSelectedValue" [nbpShowEmptyValue]="true">
|
||||
</nbp-combo>
|
||||
</nbp-input-container>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
|
||||
<nbp-combo [id]="'comboDefault'" [name]="'comboDefault'" [nbpStyle]="_nbpStyle.DEFAULT"
|
||||
[nbpDataSource]="comboDatasource" [(ngModel)]="comboSelectedValue" [nbpShowEmptyValue]="true"
|
||||
[disabled]="true">
|
||||
</nbp-combo>
|
||||
</nbp-input-container>
|
||||
</div>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.PRIMARY" [nbpLabel]="'Default'">
|
||||
<nbp-combo-multi
|
||||
[id]="'combomultiDefault'"
|
||||
[name]="'combomultiDefault'"
|
||||
[nbpStyle]="_nbpStyle.PRIMARY"
|
||||
[nbpDataSource]="datasource"
|
||||
[(ngModel)]="selectedValues"
|
||||
>
|
||||
</nbp-combo-multi>
|
||||
</nbp-input-container>
|
||||
</div>
|
||||
|
||||
<p class="new-part">Combo Filter (nbp-input-container + nbp-combo-filter)</p>
|
||||
<div>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
|
||||
<nbp-combo-filter [id]="'comboDefault'" [name]="'comboDefault'" [nbpStyle]="_nbpStyle.DEFAULT"
|
||||
[nbpDataSource]="comboDatasource" [(ngModel)]="comboSelectedValue" [nbpShowEmptyValue]="true">
|
||||
</nbp-combo-filter>
|
||||
</nbp-input-container>
|
||||
</div>
|
||||
<p class="new-part">Textarea (nbp-input-container + nbp-textarea)</p>
|
||||
<div>
|
||||
<nbp-input-container
|
||||
[nbpLabel]="'Textarea stile default'"
|
||||
[nbpStyle]="_nbpStyle.DEFAULT"
|
||||
>
|
||||
<nbp-textarea
|
||||
[name]="'default-a'"
|
||||
[(ngModel)]="contenutoEmpty"
|
||||
[required]="required"
|
||||
[placeholder]="'placeholder'"
|
||||
[maxlength]="lunghezzamax"
|
||||
[minlength]="lunghezzamin"
|
||||
[nbpStyle]="_nbpStyle.DEFAULT"
|
||||
></nbp-textarea>
|
||||
</nbp-input-container>
|
||||
</div>
|
||||
|
||||
<p class="new-part">Combo Multi (nbp-input-container + nbp-combo-multi)</p>
|
||||
<div>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
|
||||
<nbp-combo-multi [id]="'comboMultiIndent'" [name]="'comboMultiIndent'" [nbpStyle]="_nbpStyle.DEFAULT"
|
||||
[nbpDataSource]="datasource" [(ngModel)]="selectedValues" [dropdownVisible]="comboMultiVisible">
|
||||
</nbp-combo-multi>
|
||||
</nbp-input-container>
|
||||
<p class="new-part">Card (nbp-card)</p>
|
||||
<div style="width: 250px">
|
||||
<nbp-card
|
||||
[id]="'crd5'"
|
||||
[nbpStyle]="_nbpStyle.DEFAULT"
|
||||
[title]="cardTitle"
|
||||
[description]="cardDescr"
|
||||
[templateRef]="template4"
|
||||
>
|
||||
</nbp-card>
|
||||
<ng-template #template4>
|
||||
<div class="row">
|
||||
<div class="col gap-1">
|
||||
<nbp-button [nbpLabel]="'button'" [nbpStyle]="_nbpStyle.FOURTH">
|
||||
</nbp-button>
|
||||
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.PRIMARY" [nbpLabel]="'Default'">
|
||||
<nbp-combo-multi [id]="'combomultiDefault'" [name]="'combomultiDefault'" [nbpStyle]="_nbpStyle.PRIMARY"
|
||||
[nbpDataSource]="datasource" [(ngModel)]="selectedValues">
|
||||
</nbp-combo-multi>
|
||||
</nbp-input-container>
|
||||
</div>
|
||||
<nbp-button [nbpLabel]="'button'" [nbpStyle]="_nbpStyle.PRIMARY">
|
||||
</nbp-button>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
|
||||
<p class="new-part">Textarea (nbp-input-container + nbp-textarea)</p>
|
||||
<div>
|
||||
<nbp-input-container [nbpLabel]="'Textarea stile default'" [nbpStyle]="_nbpStyle.DEFAULT">
|
||||
<nbp-textarea [name]="'default-a'" [(ngModel)]="contenutoEmpty" [required]="required"
|
||||
[placeholder]="'placeholder'" [maxlength]="lunghezzamax" [minlength]="lunghezzamin"
|
||||
[nbpStyle]="_nbpStyle.DEFAULT"></nbp-textarea>
|
||||
</nbp-input-container>
|
||||
</div>
|
||||
|
||||
<p class="new-part">Card (nbp-card)</p>
|
||||
<div style="width: 250px">
|
||||
<nbp-card [id]="'crd5'" [nbpStyle]="_nbpStyle.DEFAULT" [title]="cardTitle" [description]="cardDescr"
|
||||
[templateRef]="template4">
|
||||
</nbp-card>
|
||||
<ng-template #template4>
|
||||
<div class="row">
|
||||
<div class="col gap-1">
|
||||
<nbp-button [nbpLabel]="'button'" [nbpStyle]="_nbpStyle.FOURTH">
|
||||
</nbp-button>
|
||||
|
||||
<nbp-button [nbpLabel]="'button'" [nbpStyle]="_nbpStyle.PRIMARY">
|
||||
</nbp-button>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
|
||||
<p class="new-part">Table (nbp-table)</p>
|
||||
<div>
|
||||
<nbp-table [scrollBar]="'auto'" ariaLabel="table" [nbpId]="'defTable1'" [nbpOptions]="tableOptions"
|
||||
[nbpDataSource]="tableDs" [nbpAutoBind]="true" [nbpSelectionType]="tableSelectionType"
|
||||
[nbpLayoutAuto]="true">
|
||||
|
||||
<nbp-table-column nbpId='headerField' nbpTitle='Header field' nbpField='headerField' [nbpVisible]='true'>
|
||||
</nbp-table-column>
|
||||
|
||||
<nbp-table-column nbpId='headerField2' nbpTitle='Header field 2' nbpField='headerField2'
|
||||
[nbpSortable]="true" [nbpVisible]='true'>
|
||||
</nbp-table-column>
|
||||
</nbp-table>
|
||||
</div>
|
||||
|
||||
<p class="new-part">Tree-table</p>
|
||||
<div>
|
||||
<!-- [paginationOptions]="table2PageConfig" -->
|
||||
<isp-turbo-table [columns]="table2Columns" [datasource]="table2Data" [hasAccordionRows]="true"
|
||||
[rowExpander]="table2RowExpander" tableMinWidth='35rem' ariaLabel="table with children"></isp-turbo-table>
|
||||
</div>
|
||||
|
||||
<p class="new-part">Checkbox-table</p>
|
||||
<nbp-table [scrollBar]="'auto'" [nbpId]="'defTable'" [nbpOptions]="simpleOptions"
|
||||
[nbpDataSource]="campiStandardData" ariaLabel="multi selection table" [nbpAutoBind]="true"
|
||||
[nbpSelectionType]="multi">
|
||||
|
||||
<nbp-table-column nbpId='headerField' nbpTitle='Header field' nbpField='headerField' [nbpSortable]='true'
|
||||
[nbpVisible]='true'>
|
||||
</nbp-table-column>
|
||||
|
||||
<nbp-table-column nbpId='headerField2' nbpTitle='Header field 2' nbpField='headerField2' [nbpSortable]='true'
|
||||
[nbpVisible]='true'>
|
||||
</nbp-table-column>
|
||||
<p class="new-part">Table (nbp-table)</p>
|
||||
<div>
|
||||
<nbp-table
|
||||
[scrollBar]="'auto'"
|
||||
ariaLabel="table"
|
||||
[nbpId]="'defTable1'"
|
||||
[nbpOptions]="tableOptions"
|
||||
[nbpDataSource]="tableDs"
|
||||
[nbpAutoBind]="true"
|
||||
[nbpSelectionType]="tableSelectionType"
|
||||
[nbpLayoutAuto]="true"
|
||||
>
|
||||
<nbp-table-column
|
||||
nbpId="headerField"
|
||||
nbpTitle="Header field"
|
||||
nbpField="headerField"
|
||||
[nbpVisible]="true"
|
||||
>
|
||||
</nbp-table-column>
|
||||
|
||||
<nbp-table-column
|
||||
nbpId="headerField2"
|
||||
nbpTitle="Header field 2"
|
||||
nbpField="headerField2"
|
||||
[nbpSortable]="true"
|
||||
[nbpVisible]="true"
|
||||
>
|
||||
</nbp-table-column>
|
||||
</nbp-table>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
@ -53,7 +53,7 @@ export class Showcase1Component extends NbpBaseComponent {
|
||||
|
||||
// Range di date disabilitate per l'esempio
|
||||
fidDisabledDateRanges: { start: Date, end: Date }[] = [
|
||||
{ start: new Date(2025, 4, 10), end: new Date(2025, 4, 15) }, // 10-15 maggio 2025
|
||||
{ start: new Date(2025, 4, 10), end: new Date(2025, 5, 15) }, // 10-15 maggio 2025
|
||||
{ start: new Date(2025, 4, 25), end: new Date(2025, 4, 28) } // 25-28 maggio 2025
|
||||
];
|
||||
//
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user