@esfaenza/es-table 19.2.3 → 19.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, EventEmitter,
|
|
2
|
+
import { Injectable, input, EventEmitter, signal, computed, effect, Output, ChangeDetectionStrategy, ViewEncapsulation, Component, Input, Self, Directive, Optional, ContentChildren, InjectionToken, Inject, HostListener, ViewChild, Pipe, ContentChild, NgModule } from '@angular/core';
|
|
3
3
|
import * as i2 from '@esfaenza/localizations';
|
|
4
4
|
import { LocalizationService, LocalizationModule } from '@esfaenza/localizations';
|
|
5
5
|
import * as i5 from '@esfaenza/extensions';
|
|
@@ -7,10 +7,8 @@ import * as i8 from '@angular/common';
|
|
|
7
7
|
import { CommonModule } from '@angular/common';
|
|
8
8
|
import * as i1 from '@angular/forms';
|
|
9
9
|
import { FormsModule } from '@angular/forms';
|
|
10
|
-
import * as i5$1 from '
|
|
11
|
-
import {
|
|
12
|
-
import * as i6 from '@angular/material/input';
|
|
13
|
-
import { MatInputModule } from '@angular/material/input';
|
|
10
|
+
import * as i5$1 from 'primeng/select';
|
|
11
|
+
import { SelectModule } from 'primeng/select';
|
|
14
12
|
import { Subject, forkJoin } from 'rxjs';
|
|
15
13
|
import * as i13 from '@angular/cdk/drag-drop';
|
|
16
14
|
import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
|
|
@@ -27,6 +25,8 @@ import * as i14 from '@esfaenza/forms-and-validations';
|
|
|
27
25
|
import { FormsAndValidationsModule } from '@esfaenza/forms-and-validations';
|
|
28
26
|
import * as i1$1 from '@angular/material/tooltip';
|
|
29
27
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
28
|
+
import { MatSelectModule } from '@angular/material/select';
|
|
29
|
+
import { MatInputModule } from '@angular/material/input';
|
|
30
30
|
|
|
31
31
|
/** Classe di localizzazione per il componente **TablePagerComponent** */
|
|
32
32
|
class TablePagerLoc extends LocalizationService {
|
|
@@ -54,39 +54,48 @@ class TablePagerComponent {
|
|
|
54
54
|
this.msgExts = msgExts;
|
|
55
55
|
this.lc = lc;
|
|
56
56
|
this.cdr = cdr;
|
|
57
|
+
/** Dimensione di pagina attuale */
|
|
58
|
+
this.CurrentPageSize = input(null);
|
|
59
|
+
/** View gestita, che può essere un IAppSearch o una ReportView */
|
|
60
|
+
this.View = input();
|
|
57
61
|
/** Indica se deve mostrare un warning quando si cercano di solezionare come elementi da visualizzare "Tutti" */
|
|
58
|
-
this.WarnOnAll = true;
|
|
62
|
+
this.WarnOnAll = input(true);
|
|
59
63
|
/** Indica se dare la possibilità o meno di selezionare "Tutti" nelle opzioni di paginazione */
|
|
60
|
-
this.AllSearch = true;
|
|
64
|
+
this.AllSearch = input(true);
|
|
61
65
|
/** Placeholder che identifica il "Tutti" */
|
|
62
|
-
this.DefaultAll = 999999;
|
|
66
|
+
this.DefaultAll = input(999999);
|
|
63
67
|
/** Indica se attivare la modalità gruppo con stili più snelli per apparire sotto ai raggruppamenti */
|
|
64
|
-
this.GroupMode = false;
|
|
68
|
+
this.GroupMode = input(false);
|
|
65
69
|
/** Indica se utilizzare il conteggio dei gruppi o degli oggetti */
|
|
66
|
-
this.GroupCount = false;
|
|
70
|
+
this.GroupCount = input(false);
|
|
67
71
|
/** Indica il testo che va a sostituire "Oggetti Visualizzati" in caso si stia facendo qualcosa di custom, Ignorato in caso di gruppi */
|
|
68
|
-
this.CountLabel = null;
|
|
72
|
+
this.CountLabel = input(null);
|
|
69
73
|
/** Indica se visualizzare il numero totale di oggeti presenti */
|
|
70
|
-
this.ShowCount = true;
|
|
74
|
+
this.ShowCount = input(true);
|
|
71
75
|
/** Indica se visualizzare il numero totale di oggeti presenti */
|
|
72
|
-
this.ShowPaging = true;
|
|
76
|
+
this.ShowPaging = input(true);
|
|
77
|
+
/** Indica il numero totale di oggeti presenti */
|
|
78
|
+
this.PagerCount = input(undefined);
|
|
79
|
+
/** Indica se mostrare o meno il contenuto @deprecated usata solo da MatrixValuesComponent nella lib relativa */
|
|
80
|
+
this.Hidden = input(false);
|
|
73
81
|
/** Output invocato quando il numero di elementi per pagina viene modificato da un click utente */
|
|
74
82
|
this.pagingSelected = new EventEmitter();
|
|
83
|
+
/** Modello su cui la select effettua operazioni di selezione */
|
|
84
|
+
this.Model = signal(null);
|
|
75
85
|
/** Opzioni di paginazione */
|
|
76
|
-
this.
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
this.
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
this.Model = newView?.currentValue ? (newView.currentValue.itemsperpageoverride || 15) : newCPS?.currentValue ? newCPS.currentValue : null;
|
|
86
|
+
this._pagingOptions = [10, 15, 30, 45, 100];
|
|
87
|
+
this.PagingOptionsForSelect = computed(() => {
|
|
88
|
+
let defAllValue = this.DefaultAll();
|
|
89
|
+
let availableOptions = this._pagingOptions.filter(pOpt => pOpt == defAllValue || this.PagerCount() >= pOpt || this.PagerCount() == -1);
|
|
90
|
+
if (this.AllSearch())
|
|
91
|
+
availableOptions.push(defAllValue);
|
|
92
|
+
return availableOptions.map(p => { return { description: p == defAllValue ? this.lc.loc("All") : p.toString(), id: p }; });
|
|
93
|
+
});
|
|
94
|
+
effect(() => {
|
|
95
|
+
let vv = this.View();
|
|
96
|
+
let newModel = vv ? (vv.itemsperpageoverride || 15) : this.CurrentPageSize();
|
|
97
|
+
this.Model.set(newModel);
|
|
98
|
+
});
|
|
90
99
|
}
|
|
91
100
|
/**
|
|
92
101
|
* Funzione richiamata dal template quando un utente clicca su un numero di paginazione.
|
|
@@ -96,52 +105,24 @@ class TablePagerComponent {
|
|
|
96
105
|
* @param {number} pageSize Dimensione selezionata lato UI
|
|
97
106
|
*/
|
|
98
107
|
choice(pageSize) {
|
|
99
|
-
if (pageSize == this.DefaultAll && this.WarnOnAll) {
|
|
100
|
-
this.msgExts.simpleWarningWithChoice(this.lc.loc("Are you sure you want to retrieve all results?"), this.lc.loc("This might slow down the page and possibly crash the entire application"), () => {
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
this.Model = null;
|
|
104
|
-
this.cdr.detectChanges();
|
|
105
|
-
this.Model = prevModel;
|
|
106
|
-
this.cdr.detectChanges();
|
|
108
|
+
if (pageSize == this.DefaultAll() && this.WarnOnAll) {
|
|
109
|
+
this.msgExts.simpleWarningWithChoice(this.lc.loc("Are you sure you want to retrieve all results?"), this.lc.loc("This might slow down the page and possibly crash the entire application"), () => {
|
|
110
|
+
this.pagingSelected.emit(pageSize);
|
|
111
|
+
this.Model.set(pageSize);
|
|
107
112
|
});
|
|
108
113
|
}
|
|
109
114
|
else {
|
|
110
115
|
this.pagingSelected.emit(pageSize);
|
|
111
|
-
this.Model
|
|
116
|
+
this.Model.set(pageSize);
|
|
112
117
|
}
|
|
113
118
|
}
|
|
114
119
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TablePagerComponent, deps: [{ token: i5.MessageService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
115
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
120
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: TablePagerComponent, isStandalone: false, selector: "app-paging", inputs: { CurrentPageSize: { classPropertyName: "CurrentPageSize", publicName: "CurrentPageSize", isSignal: true, isRequired: false, transformFunction: null }, View: { classPropertyName: "View", publicName: "View", isSignal: true, isRequired: false, transformFunction: null }, WarnOnAll: { classPropertyName: "WarnOnAll", publicName: "WarnOnAll", isSignal: true, isRequired: false, transformFunction: null }, AllSearch: { classPropertyName: "AllSearch", publicName: "AllSearch", isSignal: true, isRequired: false, transformFunction: null }, DefaultAll: { classPropertyName: "DefaultAll", publicName: "DefaultAll", isSignal: true, isRequired: false, transformFunction: null }, GroupMode: { classPropertyName: "GroupMode", publicName: "GroupMode", isSignal: true, isRequired: false, transformFunction: null }, GroupCount: { classPropertyName: "GroupCount", publicName: "GroupCount", isSignal: true, isRequired: false, transformFunction: null }, CountLabel: { classPropertyName: "CountLabel", publicName: "CountLabel", isSignal: true, isRequired: false, transformFunction: null }, ShowCount: { classPropertyName: "ShowCount", publicName: "ShowCount", isSignal: true, isRequired: false, transformFunction: null }, ShowPaging: { classPropertyName: "ShowPaging", publicName: "ShowPaging", isSignal: true, isRequired: false, transformFunction: null }, PagerCount: { classPropertyName: "PagerCount", publicName: "PagerCount", isSignal: true, isRequired: false, transformFunction: null }, Hidden: { classPropertyName: "Hidden", publicName: "Hidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pagingSelected: "pagingSelected" }, ngImport: i0, template: "<div *ngIf=\"!Hidden()\" [class.est-mt-4]=\"ShowCount() && PagerCount() != -1 && !(ShowPaging() && (Model() == DefaultAll() || PagerCount() >= Model() || PagerCount() == -1))\">\r\n <span class=\"est-fs-14\"> {{CountLabel() && !GroupMode() ? CountLabel() : ((GroupMode() ? 'Shown Groups' : 'Shown Elements') | localize : lc)}}: </span>\r\n <ng-container *ngIf=\"ShowPaging() && (Model() == DefaultAll() || PagerCount() >= Model() || PagerCount() == -1)\">\r\n\r\n <p-select \r\n style=\"width: 95px\"\r\n size=\"small\"\r\n name=\"input\"\r\n appendTo=\"body\"\r\n [options]=\"PagingOptionsForSelect()\"\r\n optionLabel=\"description\"\r\n optionValue=\"id\"\r\n [ngModel]=\"Model()\"\r\n (ngModelChange)=\"choice($event)\"\r\n />\r\n\r\n <span class=\"est-fs-14 est-ipp-bold\" *ngIf=\"ShowCount() && PagerCount() != -1\"> / </span>\r\n </ng-container>\r\n <span class=\"est-fs-14 est-ipp-bold\" *ngIf=\"ShowCount() && PagerCount() != -1\">{{PagerCount() | number : '0.0-0' : lc.Locale}}</span>\r\n</div>", styles: [".est-rg-ipp-sel-all,.est-rg-ipp-sel,.est-ipp-sel-all,.est-ipp-sel{color:#0275d8!important;cursor:pointer;text-decoration:none;display:block;display:inline}.est-ipp-bold{font-weight:700}.mat-paginator-page-size-select{margin:6px 4px 0;width:50px}.mat-paginator-page-size-select .mat-form-field-wrapper{height:52px!important;margin-top:-15px!important;padding:0!important}.mat-form-field-type-mat-native-select .mat-form-field-infix:after{margin-top:-5.5px!important}\n"], dependencies: [{ kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.LocalizePipe, name: "localize" }], viewProviders: [{ provide: LocalizationService, useClass: TablePagerLoc }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
116
121
|
}
|
|
117
122
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TablePagerComponent, decorators: [{
|
|
118
123
|
type: Component,
|
|
119
|
-
args: [{ selector: "app-paging", viewProviders: [{ provide: LocalizationService, useClass: TablePagerLoc }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<
|
|
120
|
-
}], ctorParameters: () => [{ type: i5.MessageService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }], propDecorators: {
|
|
121
|
-
type: Input
|
|
122
|
-
}], View: [{
|
|
123
|
-
type: Input
|
|
124
|
-
}], WarnOnAll: [{
|
|
125
|
-
type: Input
|
|
126
|
-
}], AllSearch: [{
|
|
127
|
-
type: Input
|
|
128
|
-
}], DefaultAll: [{
|
|
129
|
-
type: Input
|
|
130
|
-
}], GroupMode: [{
|
|
131
|
-
type: Input
|
|
132
|
-
}], GroupCount: [{
|
|
133
|
-
type: Input
|
|
134
|
-
}], CountLabel: [{
|
|
135
|
-
type: Input
|
|
136
|
-
}], ShowCount: [{
|
|
137
|
-
type: Input
|
|
138
|
-
}], ShowPaging: [{
|
|
139
|
-
type: Input
|
|
140
|
-
}], PagerCount: [{
|
|
141
|
-
type: Input
|
|
142
|
-
}], Hidden: [{
|
|
143
|
-
type: Input
|
|
144
|
-
}], pagingSelected: [{
|
|
124
|
+
args: [{ selector: "app-paging", viewProviders: [{ provide: LocalizationService, useClass: TablePagerLoc }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div *ngIf=\"!Hidden()\" [class.est-mt-4]=\"ShowCount() && PagerCount() != -1 && !(ShowPaging() && (Model() == DefaultAll() || PagerCount() >= Model() || PagerCount() == -1))\">\r\n <span class=\"est-fs-14\"> {{CountLabel() && !GroupMode() ? CountLabel() : ((GroupMode() ? 'Shown Groups' : 'Shown Elements') | localize : lc)}}: </span>\r\n <ng-container *ngIf=\"ShowPaging() && (Model() == DefaultAll() || PagerCount() >= Model() || PagerCount() == -1)\">\r\n\r\n <p-select \r\n style=\"width: 95px\"\r\n size=\"small\"\r\n name=\"input\"\r\n appendTo=\"body\"\r\n [options]=\"PagingOptionsForSelect()\"\r\n optionLabel=\"description\"\r\n optionValue=\"id\"\r\n [ngModel]=\"Model()\"\r\n (ngModelChange)=\"choice($event)\"\r\n />\r\n\r\n <span class=\"est-fs-14 est-ipp-bold\" *ngIf=\"ShowCount() && PagerCount() != -1\"> / </span>\r\n </ng-container>\r\n <span class=\"est-fs-14 est-ipp-bold\" *ngIf=\"ShowCount() && PagerCount() != -1\">{{PagerCount() | number : '0.0-0' : lc.Locale}}</span>\r\n</div>", styles: [".est-rg-ipp-sel-all,.est-rg-ipp-sel,.est-ipp-sel-all,.est-ipp-sel{color:#0275d8!important;cursor:pointer;text-decoration:none;display:block;display:inline}.est-ipp-bold{font-weight:700}.mat-paginator-page-size-select{margin:6px 4px 0;width:50px}.mat-paginator-page-size-select .mat-form-field-wrapper{height:52px!important;margin-top:-15px!important;padding:0!important}.mat-form-field-type-mat-native-select .mat-form-field-infix:after{margin-top:-5.5px!important}\n"] }]
|
|
125
|
+
}], ctorParameters: () => [{ type: i5.MessageService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }], propDecorators: { pagingSelected: [{
|
|
145
126
|
type: Output
|
|
146
127
|
}] } });
|
|
147
128
|
|
|
@@ -5832,7 +5813,7 @@ class EsTableModule {
|
|
|
5832
5813
|
MatInputModule,
|
|
5833
5814
|
MatTooltipModule,
|
|
5834
5815
|
DragDropModule,
|
|
5835
|
-
FormsAndValidationsModule], exports: [
|
|
5816
|
+
FormsAndValidationsModule, SelectModule], exports: [
|
|
5836
5817
|
// Direttive
|
|
5837
5818
|
EsTdDirective,
|
|
5838
5819
|
EsThDirective,
|
|
@@ -5841,12 +5822,12 @@ class EsTableModule {
|
|
|
5841
5822
|
EsTableComponent,
|
|
5842
5823
|
TablePagerComponent,
|
|
5843
5824
|
ThTdProvider] }); }
|
|
5844
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EsTableModule, imports: [MODULES] }); }
|
|
5825
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EsTableModule, imports: [MODULES, SelectModule] }); }
|
|
5845
5826
|
}
|
|
5846
5827
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EsTableModule, decorators: [{
|
|
5847
5828
|
type: NgModule,
|
|
5848
5829
|
args: [{
|
|
5849
|
-
imports: [MODULES],
|
|
5830
|
+
imports: [MODULES, SelectModule],
|
|
5850
5831
|
declarations: [...PUBLIC_ELEMENTS, ...PRIVATE_ELEMENTS],
|
|
5851
5832
|
exports: [...PUBLIC_ELEMENTS]
|
|
5852
5833
|
}]
|