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

WIP: datepicker components as fid

Browse Source
This commit is contained in:
Alessandro Seravalli 2025-05-08 10:01:44 +02:00
parent b99a21dd26
commit 3082f2129e
14 changed files with 218 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/index.ts
View File

@ -1,21 +1,29 @@
import { ModuleWithProviders, NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { XdceArchModule } from "@isp/xdce-arch-core";
import { NbpModule } from "@isp/xdce-widget";
import { NbpModule, NgbDatepickerService, NgbDatepickerServiceNOA11Y } from "@isp/xdce-widget";
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
import {
AgGridModule,
AngularFrameworkComponentWrapper,
AngularFrameworkOverrides,
} from "ag-grid-angular";
import { NgbFidDatepickerNavigation } from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-navigation";
import { NbpBreadCrumbsComponent } from "./widgetfideuram/components/nbp-bread-crumbs/nbp-bread-crumbs.component";
import { NbpFidBarChartComponent } from "./widgetfideuram/components/nbp-fid-bar-chart/nbp-fid-bar-chart.component";
import { NbpFidButtonBarComponent } from "./widgetfideuram/components/nbp-fid-button-bar/nbp-fid-button-bar.component";
import { FidRplCalendarNOA11Y } from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker";
import { NgbFidDatepickerDayViewNOA11Y } from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-day-view";
import { NgbFidInputDatepickerNOA11Y } from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-input";
import { NgbFidDatepickerNavigationNOA11Y } from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-navigation";
import { NgbFidDatepickerReplyMonthViewNOA11Y } from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-reply-month-view";
import { NgbFidDatepickerReplyYearsViewNOA11Y } from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-reply-years-view";
import { NgbFidDatepickerRoutingViewNOA11Y } from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-routing-view";
import { FidRplCalendar } from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker";
import { NgbFidDatepickerDayView } from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-day-view";
import { NgbFidInputDatepicker } from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-input";
import { NgbFidDatepickerReplyMonthView } from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-reply-month-view";
import { NgbFidDatepickerReplyYearsView } from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-reply-years-view";
import { NgbFidDatepickerRoutingView } from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-routing-view";
import { NbpCalendarGenericComponentA11Y } from "./widgetfideuram/components/nbp-fid-calendar-generic/nbp-calendar-generic.component.a11y";
import { NbpCalendarGenericComponentNOA11Y } from "./widgetfideuram/components/nbp-fid-calendar-generic/nbp-calendar-generic.component.noa11y";
@ -34,16 +42,22 @@ import { NbpFidToggleTabsetComponentNOA11Y } from "./widgetfideuram/components/n
import { ShowcaseComponent } from "./widgetfideuram/components/showcase/showcase.component";
import { Showcase1Component } from "./widgetfideuram/components/showcase/showcase1.component";
import { WidgetFideuramShowcaseComponent } from "./widgetfideuram/components/widget-fideuram-showcase/widget-fideuram-showcase.component";
import { NgbDatepickerService, NgbDatepickerServiceNOA11Y } from '@isp/xdce-widget';
export { AgGridModule } from "ag-grid-angular";
export * from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-navigation";
export * from "./widgetfideuram/components/nbp-bread-crumbs/nbp-bread-crumbs.component";
export * from "./widgetfideuram/components/nbp-fid-bar-chart/nbp-fid-bar-chart.component";
export * from "./widgetfideuram/components/nbp-fid-button-bar/nbp-fid-button-bar.component";
export * from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker";
export * from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-day-view";
export * from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-input";
export * from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-navigation";
export * from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-reply-month-view";
export * from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-reply-years-view";
export * from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker";
export * from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-day-view";
export * from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-input";
export * from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-reply-month-view";
export * from "./widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-reply-years-view";
export * from "./widgetfideuram/components/nbp-fid-calendar-generic/nbp-calendar-generic.component.a11y";
export * from "./widgetfideuram/components/nbp-fid-calendar-generic/nbp-calendar-generic.component.noa11y";
export * from "./widgetfideuram/components/nbp-fid-calendar-generic/nbp-fid-calendar-generic.component";
@ -92,7 +106,15 @@ export * from "./widgetfideuram/Utils";
FidRplCalendar,
NgbFidInputDatepickerNOA11Y,
NgbFidDatepickerRoutingView,
NgbFidDatepickerRoutingViewNOA11Y
NgbFidDatepickerRoutingViewNOA11Y,
NgbFidDatepickerNavigation,
NgbFidDatepickerDayView,
NgbFidDatepickerReplyMonthView,
NgbFidDatepickerReplyYearsView,
NgbFidDatepickerNavigationNOA11Y,
NgbFidDatepickerDayViewNOA11Y,
NgbFidDatepickerReplyMonthViewNOA11Y,
NgbFidDatepickerReplyYearsViewNOA11Y
],
exports: [
NbpBreadCrumbsComponent,
@ -119,7 +141,15 @@ export * from "./widgetfideuram/Utils";
NgbFidDatepickerRoutingView,
NgbFidDatepickerRoutingViewNOA11Y,
NgbFidInputDatepickerNOA11Y,
NgbFidInputDatepicker
NgbFidInputDatepicker,
NgbFidDatepickerNavigation,
NgbFidDatepickerDayView,
NgbFidDatepickerReplyMonthView,
NgbFidDatepickerReplyYearsView,
NgbFidDatepickerNavigationNOA11Y,
NgbFidDatepickerDayViewNOA11Y,
NgbFidDatepickerReplyMonthViewNOA11Y,
NgbFidDatepickerReplyYearsViewNOA11Y
],
providers: [
AngularFrameworkOverrides,
@ -139,7 +169,15 @@ export * from "./widgetfideuram/Utils";
FidRplCalendarNOA11Y,
FidRplCalendar,
NgbFidDatepickerRoutingView,
NgbFidDatepickerRoutingViewNOA11Y
NgbFidDatepickerRoutingViewNOA11Y,
NgbFidDatepickerNavigation,
NgbFidDatepickerDayView,
NgbFidDatepickerReplyMonthView,
NgbFidDatepickerReplyYearsView,
NgbFidDatepickerNavigationNOA11Y,
NgbFidDatepickerDayViewNOA11Y,
NgbFidDatepickerReplyMonthViewNOA11Y,
NgbFidDatepickerReplyYearsViewNOA11Y
],
schemas: [NO_ERRORS_SCHEMA]
})

25
src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-day-view.ts Normal file
View File

@ -0,0 +1,25 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgbDatepickerDayViewNOA11Y } from '@isp/xdce-widget';
@Component({
selector: '[ngbFidDatepickerDayView]',
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'class': 'btn-secondary',
'[class.bg-primary]': 'selected',
'[class.text-white]': 'selected',
'[class.text-muted]': 'isMuted()',
'[class.outside]': 'isOutside()',
'[class.notOutside]': '!isOutside()',
'[class.active]': 'focused',
'[class.is-today]': 'isToday',
'[class.is-holiday]': 'isHoliday',
'[class.is-weekend]': 'isWeekend && !selected',
'[class.is-daypast]': 'isDayPast',
'[class.is-fiscal]': 'isFiscalDay'
},
template: '<ng-container></ng-container>',
})
export class NgbFidDatepickerDayViewNOA11Y extends NgbDatepickerDayViewNOA11Y {
}

13
src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-navigation.ts Normal file
View File

@ -0,0 +1,13 @@
import { ChangeDetectionStrategy, Component } from "@angular/core";
import { NgbDatepickerNavigationNOA11Y } from "@isp/xdce-widget";
@Component({
selector: 'ngb-fid-datepicker-navigation',
changeDetection: ChangeDetectionStrategy.OnPush,
host: { 'class': 'd-flex justify-content-between', '[class.collapsed]': '!showSelect' },
template: '<ng-container></ng-container>',
})
export class NgbFidDatepickerNavigationNOA11Y extends NgbDatepickerNavigationNOA11Y {
}

22
src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-reply-month-view.ts Normal file
View File

@ -0,0 +1,22 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgbDatepickerReplyMonthViewNOA11Y } from '@isp/xdce-widget';
@Component({
selector: '[ngbFidDatepickerReplyMonthView]',
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'class': 'btn-secondary-month',
'[class.bg-primary]': 'selected',
'[class.text-white]': 'selected',
'[class.text-muted]': 'isMuted()',
'[class.outside]': 'isMuted()',
'[class.focused]': 'mounthFocusVisible',
'[class.active]': 'focused',
'[class.is-current]': 'isCurrent',
'[attr.tabindex]':"focused && mounthFocusVisible ? 0 : -1"
},
template: '<ng-container></ng-container>'
})
export class NgbFidDatepickerReplyMonthViewNOA11Y extends NgbDatepickerReplyMonthViewNOA11Y {
}

22
src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-reply-years-view.ts Normal file
View File

@ -0,0 +1,22 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgbDatepickerReplyYearsViewNOA11Y } from '@isp/xdce-widget';
@Component({
selector: '[ngbFidDatepickerReplyYearsView]',
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'class': 'btn-secondary-years',
'[class.bg-primary]': 'selected',
'[class.text-white]': 'selected',
'[class.text-muted]': 'isMuted()',
'[class.outside]': 'isMuted()',
'[class.active]': 'focused',
'[class.focused]': 'yearFocusVisible',
'[class.is-current]':'isCurrent',
'[attr.tabindex]':"focused && yearFocusVisible ? 0 : -1"
},
template: '<ng-container></ng-container>',
})
export class NgbFidDatepickerReplyYearsViewNOA11Y extends NgbDatepickerReplyYearsViewNOA11Y {
}

6
src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker-routing-view.html
View File

@ -26,7 +26,7 @@
<ng-template [ngIf]="!isHidden(day)">
<div ngbDatepickerDayView
<div ngbFidDatepickerDayView
[ngClass] = "{'cursor-pointer' : !disabledWeekend && !day.context.disabled}"
[date]="day.context.date"
[currentMonth]="day.context.currentMonth"
@ -58,7 +58,7 @@
<div *ngFor="let row of mesi" class="d-flex ngb-dp-mese">
<ng-container *ngFor="let mese of row">
<div ngbDatepickerReplyMonthView [mese]="mese" [year]="dataTemplate.year" [selected]="mese.selected"
<div ngbFidDatepickerReplyMonthView [mese]="mese" [year]="dataTemplate.year" [selected]="mese.selected"
[disabled]="mese.disabled"
[focused]="mese.focused"
[startDateEnabled]="startDateEnabled"
@ -79,7 +79,7 @@
<div *ngFor="let row of years" class="d-flex ngb-dp-mese">
<ng-container *ngFor="let year of row">
<div ngbDatepickerReplyYearsView [year]="year" [selected]="year.selected" [disabled]="year.disabled"
<div ngbFidDatepickerReplyYearsView [year]="year" [selected]="year.selected" [disabled]="year.disabled"
[focused]="year.focused"
[startDateEnabled]="startDateEnabled"
[endDateEnabled]="endDateEnabled"

4
src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap-noa11y/datepicker/datepicker.html
View File

@ -3,7 +3,7 @@
<div class="ngb-dp-header bg-faded pt-1 rounded-top" [style.height.rem]="getHeaderHeight()"
[style.marginBottom.rem]="-getHeaderMargin()">
<!-- componente per la navigazione! Seleziona il template -->
<ngb-datepicker-navigation *ngIf="navigation !== 'none'"
<ngb-fid-datepicker-navigation *ngIf="navigation !== 'none'"
[date]="model.firstDate"
[minDate]="model.minDate"
[maxDate]="model.maxDate"
@ -23,7 +23,7 @@
[attr.label]="' '"
[attr.labelledby]="' '"
[attr.describedby]="' '">
</ngb-datepicker-navigation>
</ngb-fid-datepicker-navigation>
</div>

17
src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-components.ts
View File

@ -1,17 +0,0 @@
import { Injector } from "@angular/core";
import {
NgbDatepickerNavigation,
NgbDatepickerNavigationSelect,
NgbDatepickerDayView,
NgbDatepickerReplyMonthView,
NgbDatepickerReplyYearsView,
NgbDatepickerI18n,
NgbCalendar,
NgbDatepickerService
} from "@isp/xdce-widget";
export class NgbFidDatepickerNavigation extends NgbDatepickerNavigation {
constructor(i18n: NgbDatepickerI18n, _calendar: NgbCalendar, injector: Injector, _service: NgbDatepickerService, translate: TranslateService, elementRef: ElementRef) {
super(i18n, _calendar, injector, _service, translate, elementRef);
}
}

25
src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-day-view.ts Normal file
View File

@ -0,0 +1,25 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgbDatepickerDayView } from '@isp/xdce-widget';
@Component({
selector: '[ngbFidDatepickerDayView]',
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'class': 'btn-secondary',
'[class.bg-primary]': 'selected',
'[class.text-white]': 'selected',
'[class.text-muted]': 'isMuted()',
'[class.outside]': 'isOutside()',
'[class.notOutside]': '!isOutside()',
'[class.active]': 'focused',
'[class.is-today]': 'isToday',
'[class.is-holiday]': 'isHoliday',
'[class.is-weekend]': 'isWeekend && !selected',
'[class.is-daypast]': 'isDayPast',
'[class.is-fiscal]': 'isFiscalDay'
},
template: '<ng-container></ng-container>',
})
export class NgbFidDatepickerDayView extends NgbDatepickerDayView {
}

13
src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-navigation.ts Normal file
View File

@ -0,0 +1,13 @@
import { ChangeDetectionStrategy, Component } from "@angular/core";
import { NgbDatepickerNavigation } from "@isp/xdce-widget";
@Component({
selector: 'ngb-fid-datepicker-navigation',
changeDetection: ChangeDetectionStrategy.OnPush,
host: { 'class': 'd-flex justify-content-between', '[class.collapsed]': '!showSelect' },
template: '<ng-container></ng-container>',
})
export class NgbFidDatepickerNavigation extends NgbDatepickerNavigation {
}

22
src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-reply-month-view.ts Normal file
View File

@ -0,0 +1,22 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgbDatepickerReplyMonthView } from '@isp/xdce-widget';
@Component({
selector: '[ngbFidDatepickerReplyMonthView]',
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'class': 'btn-secondary-month',
'[class.bg-primary]': 'selected',
'[class.text-white]': 'selected',
'[class.text-muted]': 'isMuted()',
'[class.outside]': 'isMuted()',
'[class.focused]': 'mounthFocusVisible',
'[class.active]': 'focused',
'[class.is-current]': 'isCurrent',
'[attr.tabindex]':"focused && mounthFocusVisible ? 0 : -1"
},
template: '<ng-container></ng-container>'
})
export class NgbFidDatepickerReplyMonthView extends NgbDatepickerReplyMonthView {
}

22
src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-reply-years-view.ts Normal file
View File

@ -0,0 +1,22 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgbDatepickerReplyYearsView } from '@isp/xdce-widget';
@Component({
selector: '[ngbFidDatepickerReplyYearsView]',
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'class': 'btn-secondary-years',
'[class.bg-primary]': 'selected',
'[class.text-white]': 'selected',
'[class.text-muted]': 'isMuted()',
'[class.outside]': 'isMuted()',
'[class.active]': 'focused',
'[class.focused]': 'yearFocusVisible',
'[class.is-current]':'isCurrent',
'[attr.tabindex]':"focused && yearFocusVisible ? 0 : -1"
},
template: '<ng-container></ng-container>',
})
export class NgbFidDatepickerReplyYearsView extends NgbDatepickerReplyYearsView {
}

6
src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker-routing-view.html
View File

@ -27,7 +27,7 @@
<ng-template [ngIf]="!isHidden(day)">
<div ngbDatepickerDayView
<div ngbFidDatepickerDayView
[ngClass] = "{'cursor-pointer' : !disabledWeekend && !day.context.disabled}"
[date]="day.context.date"
[currentMonth]="day.context.currentMonth"
@ -62,7 +62,7 @@
<div *ngFor="let line of mesi" class="d-flex ngb-dp-mese" role="row">
<ng-container *ngFor="let mese of line">
<div ngbDatepickerReplyMonthView
<div ngbFidDatepickerReplyMonthView
[mese]="mese"
[year]="dataTemplate.year"
[selected]="mese.selected"
@ -90,7 +90,7 @@
<div *ngFor="let line of years" class="d-flex ngb-dp-mese" role="row">
<ng-container *ngFor="let year of line">
<div ngbDatepickerReplyYearsView [year]="year" [selected]="year.selected" [disabled]="year.disabled"
<div ngbFidDatepickerReplyYearsView [year]="year" [selected]="year.selected" [disabled]="year.disabled"
[focused]="year.focused"
[startDateEnabled]="startDateEnabled"
[endDateEnabled]="endDateEnabled"

4
src/widgetfideuram/components/nbp-fid-calendar-generic/@ng-bootstrap/datepicker/datepicker.html
View File

@ -3,7 +3,7 @@
<div class="ngb-dp-header bg-faded pt-1 rounded-top" [style.height.rem]="getHeaderHeight()"
[style.marginBottom.rem]="-getHeaderMargin()">
<!-- componente per la navigazione! Seleziona il template -->
<ngb-datepicker-navigation *ngIf="navigation !== 'none'"
<ngb-fid-datepicker-navigation *ngIf="navigation !== 'none'"
[date]="model.firstDate"
[minDate]="model.minDate"
[maxDate]="model.maxDate"
@ -24,7 +24,7 @@
[dataTemplate]="dataTemplate"
[attr.labelledby]="''"
[attr.describedby]="''">
</ngb-datepicker-navigation>
</ngb-fid-datepicker-navigation>
</div>