@yomotech/view-toolkit 0.0.66 → 0.0.67
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,7 +1,7 @@
|
|
|
1
1
|
import * as i2 from '@angular/common';
|
|
2
2
|
import { CommonModule, NgIf } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { EventEmitter, Output, Input, Component, Injectable, NgZone,
|
|
4
|
+
import { EventEmitter, HostListener, Output, Input, Component, Injectable, NgZone, ViewChild, NgModule } from '@angular/core';
|
|
5
5
|
import * as i3 from '@angular/forms';
|
|
6
6
|
import { FormsModule } from '@angular/forms';
|
|
7
7
|
import * as i1$1 from '@angular/common/http';
|
|
@@ -70,59 +70,190 @@ class PaginationComponent {
|
|
|
70
70
|
this.platform = platform;
|
|
71
71
|
}
|
|
72
72
|
ngOnInit() {
|
|
73
|
-
|
|
74
|
-
this.isMobile = true;
|
|
75
|
-
}
|
|
73
|
+
this.updateDeviceMode();
|
|
76
74
|
}
|
|
75
|
+
onWindowResize() {
|
|
76
|
+
this.updateDeviceMode();
|
|
77
|
+
}
|
|
78
|
+
updateDeviceMode() {
|
|
79
|
+
const isNativeMobile = this.platform.ANDROID ||
|
|
80
|
+
this.platform.IOS;
|
|
81
|
+
const isSmallScreen = typeof window !== 'undefined' &&
|
|
82
|
+
window.innerWidth <= 768;
|
|
83
|
+
this.isMobile =
|
|
84
|
+
isNativeMobile || isSmallScreen;
|
|
85
|
+
}
|
|
86
|
+
get isFirstPage() {
|
|
87
|
+
return (!this.pages?.length ||
|
|
88
|
+
this.currentPage <= 0);
|
|
89
|
+
}
|
|
90
|
+
get isLastPage() {
|
|
91
|
+
return (!this.pages?.length ||
|
|
92
|
+
this.currentPage >=
|
|
93
|
+
this.pages.length - 1);
|
|
94
|
+
}
|
|
95
|
+
/*
|
|
96
|
+
* Desktop returns the original schema style unchanged.
|
|
97
|
+
* Mobile overrides only the layout direction.
|
|
98
|
+
*/
|
|
77
99
|
get paginationStyle() {
|
|
78
|
-
|
|
100
|
+
const baseStyle = this.getStyle(this.itemInfo?.layoutSchema
|
|
101
|
+
?.pagination?.style);
|
|
102
|
+
if (!this.isMobile) {
|
|
103
|
+
return baseStyle;
|
|
104
|
+
}
|
|
105
|
+
return {
|
|
106
|
+
...baseStyle,
|
|
107
|
+
display: 'flex',
|
|
108
|
+
'flex-direction': 'column',
|
|
109
|
+
'align-items': 'center',
|
|
110
|
+
'justify-content': 'center',
|
|
111
|
+
gap: '8px',
|
|
112
|
+
width: '100%',
|
|
113
|
+
padding: '8px',
|
|
114
|
+
overflow: 'hidden',
|
|
115
|
+
'box-sizing': 'border-box'
|
|
116
|
+
};
|
|
79
117
|
}
|
|
80
118
|
get listStyle() {
|
|
81
|
-
|
|
119
|
+
const baseStyle = this.getStyle(this.itemInfo?.layoutSchema
|
|
120
|
+
?.pagination?.listStyle);
|
|
121
|
+
if (!this.isMobile) {
|
|
122
|
+
return baseStyle;
|
|
123
|
+
}
|
|
124
|
+
return {
|
|
125
|
+
...baseStyle,
|
|
126
|
+
display: 'flex',
|
|
127
|
+
'align-items': 'center',
|
|
128
|
+
'justify-content': 'center',
|
|
129
|
+
'flex-wrap': 'nowrap',
|
|
130
|
+
gap: '4px',
|
|
131
|
+
width: '100%',
|
|
132
|
+
margin: '0',
|
|
133
|
+
padding: '0',
|
|
134
|
+
overflow: 'hidden',
|
|
135
|
+
'list-style': 'none',
|
|
136
|
+
'box-sizing': 'border-box'
|
|
137
|
+
};
|
|
82
138
|
}
|
|
83
139
|
get sizeControlStyle() {
|
|
84
|
-
|
|
140
|
+
const baseStyle = this.getStyle(this.itemInfo?.layoutSchema
|
|
141
|
+
?.pagination?.sizeControlStyle);
|
|
142
|
+
if (!this.isMobile) {
|
|
143
|
+
return baseStyle;
|
|
144
|
+
}
|
|
145
|
+
return {
|
|
146
|
+
...baseStyle,
|
|
147
|
+
display: 'flex',
|
|
148
|
+
'align-items': 'center',
|
|
149
|
+
'justify-content': 'center',
|
|
150
|
+
gap: '8px',
|
|
151
|
+
width: '100%',
|
|
152
|
+
'min-width': '0',
|
|
153
|
+
'box-sizing': 'border-box'
|
|
154
|
+
};
|
|
85
155
|
}
|
|
86
156
|
get labelStyle() {
|
|
87
|
-
|
|
157
|
+
const baseStyle = this.getStyle(this.itemInfo?.layoutSchema
|
|
158
|
+
?.pagination?.labelStyle);
|
|
159
|
+
if (!this.isMobile) {
|
|
160
|
+
return baseStyle;
|
|
161
|
+
}
|
|
162
|
+
return {
|
|
163
|
+
...baseStyle,
|
|
164
|
+
'white-space': 'nowrap',
|
|
165
|
+
'font-size': baseStyle['font-size'] || '13px'
|
|
166
|
+
};
|
|
88
167
|
}
|
|
89
168
|
get selectStyle() {
|
|
90
|
-
|
|
169
|
+
const baseStyle = this.getStyle(this.itemInfo?.layoutSchema
|
|
170
|
+
?.pagination?.selectStyle);
|
|
171
|
+
if (!this.isMobile) {
|
|
172
|
+
return baseStyle;
|
|
173
|
+
}
|
|
174
|
+
return {
|
|
175
|
+
...baseStyle,
|
|
176
|
+
width: '68px',
|
|
177
|
+
'min-width': '68px',
|
|
178
|
+
'max-width': '68px'
|
|
179
|
+
};
|
|
180
|
+
}
|
|
181
|
+
get pageSummaryStyle() {
|
|
182
|
+
const pagination = this.itemInfo?.layoutSchema
|
|
183
|
+
?.pagination || {};
|
|
184
|
+
const baseStyle = this.getStyle(pagination.itemStyle);
|
|
185
|
+
const activeStyle = this.getStyle(pagination.activeItemStyle);
|
|
186
|
+
return {
|
|
187
|
+
...baseStyle,
|
|
188
|
+
...activeStyle,
|
|
189
|
+
width: '64px',
|
|
190
|
+
'min-width': '64px',
|
|
191
|
+
height: '32px',
|
|
192
|
+
padding: '0 6px',
|
|
193
|
+
cursor: 'default',
|
|
194
|
+
'pointer-events': 'none',
|
|
195
|
+
'white-space': 'nowrap',
|
|
196
|
+
'box-sizing': 'border-box'
|
|
197
|
+
};
|
|
91
198
|
}
|
|
92
199
|
getStyle(styleObject) {
|
|
93
|
-
if (!styleObject ||
|
|
200
|
+
if (!styleObject ||
|
|
201
|
+
typeof styleObject !== 'object') {
|
|
94
202
|
return {};
|
|
95
203
|
}
|
|
96
204
|
const { classes, ...styleWithoutClasses } = styleObject;
|
|
97
205
|
return styleWithoutClasses;
|
|
98
206
|
}
|
|
99
207
|
getPageItemStyle(page, disabled = false) {
|
|
100
|
-
const pagination = this.itemInfo?.layoutSchema
|
|
208
|
+
const pagination = this.itemInfo?.layoutSchema
|
|
209
|
+
?.pagination || {};
|
|
101
210
|
const baseStyle = this.getStyle(pagination.itemStyle);
|
|
102
|
-
const activeStyle = page !== undefined &&
|
|
211
|
+
const activeStyle = page !== undefined &&
|
|
212
|
+
this.currentPage === page
|
|
103
213
|
? this.getStyle(pagination.activeItemStyle)
|
|
104
214
|
: {};
|
|
105
215
|
const disabledStyle = disabled
|
|
106
216
|
? this.getStyle(pagination.disabledItemStyle)
|
|
107
217
|
: {};
|
|
218
|
+
/*
|
|
219
|
+
* Desktop gets no additional styling.
|
|
220
|
+
*/
|
|
221
|
+
const mobileStyle = this.isMobile
|
|
222
|
+
? {
|
|
223
|
+
width: '32px',
|
|
224
|
+
'min-width': '32px',
|
|
225
|
+
height: '32px',
|
|
226
|
+
padding: '0'
|
|
227
|
+
}
|
|
228
|
+
: {};
|
|
108
229
|
return {
|
|
109
230
|
...baseStyle,
|
|
110
231
|
...activeStyle,
|
|
111
232
|
...disabledStyle,
|
|
112
|
-
|
|
233
|
+
...mobileStyle,
|
|
234
|
+
'pointer-events': disabled
|
|
235
|
+
? 'none'
|
|
236
|
+
: 'auto'
|
|
113
237
|
};
|
|
114
238
|
}
|
|
115
239
|
invokeOnPageSizeChange(pageSize) {
|
|
116
|
-
|
|
240
|
+
const normalizedPageSize = Number(pageSize);
|
|
241
|
+
if (!Number.isFinite(normalizedPageSize) ||
|
|
242
|
+
normalizedPageSize <= 0) {
|
|
243
|
+
return;
|
|
244
|
+
}
|
|
245
|
+
this.pageSizeChange.emit(normalizedPageSize);
|
|
117
246
|
}
|
|
118
247
|
invokeGoToPage(page) {
|
|
119
|
-
if (page < 0 ||
|
|
248
|
+
if (page < 0 ||
|
|
249
|
+
page > this.pages.length - 1 ||
|
|
250
|
+
page === this.currentPage) {
|
|
120
251
|
return;
|
|
121
252
|
}
|
|
122
253
|
this.onGoToPage.emit(page);
|
|
123
254
|
}
|
|
124
255
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PaginationComponent, deps: [{ token: i1.Platform }], target: i0.ɵɵFactoryTarget.Component });
|
|
125
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: PaginationComponent, isStandalone: true, selector: "vl-pagination", inputs: { itemInfo: "itemInfo", pageSize: "pageSize", currentPage: "currentPage", pages: "pages" }, outputs: { pageSizeChange: "pageSizeChange", onGoToPage: "onGoToPage" }, ngImport: i0, template: "<div [ngStyle]=\"paginationStyle\">\r\n <ul [ngStyle]=\"listStyle\" [style.z-index]=\"'auto'\">\r\n\r\n <li (click)=\"invokeGoToPage(0)\" [ngStyle]=\"getPageItemStyle(undefined, currentPage === 0)\">\r\n
|
|
256
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: PaginationComponent, isStandalone: true, selector: "vl-pagination", inputs: { itemInfo: "itemInfo", pageSize: "pageSize", currentPage: "currentPage", pages: "pages" }, outputs: { pageSizeChange: "pageSizeChange", onGoToPage: "onGoToPage" }, host: { listeners: { "window:resize": "onWindowResize()" } }, ngImport: i0, template: "<div [ngStyle]=\"paginationStyle\">\r\n\r\n <ul [ngStyle]=\"listStyle\" [style.z-index]=\"'auto'\">\r\n\r\n <!-- Existing desktop pagination: unchanged -->\r\n <ng-container *ngIf=\"!isMobile\">\r\n\r\n <li (click)=\"invokeGoToPage(0)\" [ngStyle]=\"getPageItemStyle(undefined, currentPage === 0)\">\r\n \u00AB\u00AB\r\n </li>\r\n\r\n <li (click)=\"invokeGoToPage(currentPage - 1)\" [ngStyle]=\"getPageItemStyle(undefined, currentPage === 0)\">\r\n \u00AB\r\n </li>\r\n\r\n <li *ngFor=\"let page of pages\" (click)=\"invokeGoToPage(page)\" [ngStyle]=\"getPageItemStyle(page)\">\r\n {{ page + 1 }}\r\n </li>\r\n\r\n <li (click)=\"invokeGoToPage(currentPage + 1)\" [ngStyle]=\"\r\n getPageItemStyle(\r\n undefined,\r\n currentPage === pages.length - 1\r\n )\r\n \">\r\n \u00BB\r\n </li>\r\n\r\n <li (click)=\"invokeGoToPage(pages.length - 1)\" [ngStyle]=\"\r\n getPageItemStyle(\r\n undefined,\r\n currentPage === pages.length - 1\r\n )\r\n \">\r\n \u00BB\u00BB\r\n </li>\r\n\r\n </ng-container>\r\n\r\n <!-- Compact mobile pagination -->\r\n <ng-container *ngIf=\"isMobile\">\r\n\r\n <!-- First -->\r\n <li (click)=\"invokeGoToPage(0)\" [ngStyle]=\"getPageItemStyle(undefined, isFirstPage)\">\r\n \u00AB\u00AB\r\n </li>\r\n\r\n <!-- Previous -->\r\n <li (click)=\"invokeGoToPage(currentPage - 1)\" [ngStyle]=\"getPageItemStyle(undefined, isFirstPage)\">\r\n \u00AB\r\n </li>\r\n\r\n <!-- Current page / total pages -->\r\n <li [ngStyle]=\"pageSummaryStyle\">\r\n {{ currentPage + 1 }} / {{ pages.length }}\r\n </li>\r\n\r\n <!-- Next -->\r\n <li (click)=\"invokeGoToPage(currentPage + 1)\" [ngStyle]=\"getPageItemStyle(undefined, isLastPage)\">\r\n \u00BB\r\n </li>\r\n\r\n <!-- Last -->\r\n <li (click)=\"invokeGoToPage(pages.length - 1)\" [ngStyle]=\"getPageItemStyle(undefined, isLastPage)\">\r\n \u00BB\u00BB\r\n </li>\r\n\r\n </ng-container>\r\n\r\n </ul>\r\n\r\n <div *ngIf=\"itemInfo?.layoutSchema?.pagination?.pageSize\" [ngStyle]=\"sizeControlStyle\">\r\n <label for=\"pageSize\" [ngStyle]=\"labelStyle\">\r\n {{ itemInfo?.layoutSchema?.pagination?.caption }}\r\n </label>\r\n\r\n <select id=\"pageSize\" [(ngModel)]=\"pageSize\" (change)=\"invokeOnPageSizeChange(pageSize)\"\r\n [ngStyle]=\"selectStyle\">\r\n <option *ngFor=\"\r\n let size of\r\n itemInfo?.layoutSchema\r\n ?.pagination?.pageSizeOptions ||\r\n [5, 10, 15, 20]\r\n \" [value]=\"size\">\r\n {{ size }}\r\n </option>\r\n </select>\r\n </div>\r\n\r\n</div>", styles: [":host{display:block;width:100%;min-width:0;box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PlatformModule }] });
|
|
126
257
|
}
|
|
127
258
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
128
259
|
type: Component,
|
|
@@ -130,7 +261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
130
261
|
CommonModule,
|
|
131
262
|
FormsModule,
|
|
132
263
|
PlatformModule
|
|
133
|
-
], template: "<div [ngStyle]=\"paginationStyle\">\r\n <ul [ngStyle]=\"listStyle\" [style.z-index]=\"'auto'\">\r\n\r\n <li (click)=\"invokeGoToPage(0)\" [ngStyle]=\"getPageItemStyle(undefined, currentPage === 0)\">\r\n
|
|
264
|
+
], template: "<div [ngStyle]=\"paginationStyle\">\r\n\r\n <ul [ngStyle]=\"listStyle\" [style.z-index]=\"'auto'\">\r\n\r\n <!-- Existing desktop pagination: unchanged -->\r\n <ng-container *ngIf=\"!isMobile\">\r\n\r\n <li (click)=\"invokeGoToPage(0)\" [ngStyle]=\"getPageItemStyle(undefined, currentPage === 0)\">\r\n \u00AB\u00AB\r\n </li>\r\n\r\n <li (click)=\"invokeGoToPage(currentPage - 1)\" [ngStyle]=\"getPageItemStyle(undefined, currentPage === 0)\">\r\n \u00AB\r\n </li>\r\n\r\n <li *ngFor=\"let page of pages\" (click)=\"invokeGoToPage(page)\" [ngStyle]=\"getPageItemStyle(page)\">\r\n {{ page + 1 }}\r\n </li>\r\n\r\n <li (click)=\"invokeGoToPage(currentPage + 1)\" [ngStyle]=\"\r\n getPageItemStyle(\r\n undefined,\r\n currentPage === pages.length - 1\r\n )\r\n \">\r\n \u00BB\r\n </li>\r\n\r\n <li (click)=\"invokeGoToPage(pages.length - 1)\" [ngStyle]=\"\r\n getPageItemStyle(\r\n undefined,\r\n currentPage === pages.length - 1\r\n )\r\n \">\r\n \u00BB\u00BB\r\n </li>\r\n\r\n </ng-container>\r\n\r\n <!-- Compact mobile pagination -->\r\n <ng-container *ngIf=\"isMobile\">\r\n\r\n <!-- First -->\r\n <li (click)=\"invokeGoToPage(0)\" [ngStyle]=\"getPageItemStyle(undefined, isFirstPage)\">\r\n \u00AB\u00AB\r\n </li>\r\n\r\n <!-- Previous -->\r\n <li (click)=\"invokeGoToPage(currentPage - 1)\" [ngStyle]=\"getPageItemStyle(undefined, isFirstPage)\">\r\n \u00AB\r\n </li>\r\n\r\n <!-- Current page / total pages -->\r\n <li [ngStyle]=\"pageSummaryStyle\">\r\n {{ currentPage + 1 }} / {{ pages.length }}\r\n </li>\r\n\r\n <!-- Next -->\r\n <li (click)=\"invokeGoToPage(currentPage + 1)\" [ngStyle]=\"getPageItemStyle(undefined, isLastPage)\">\r\n \u00BB\r\n </li>\r\n\r\n <!-- Last -->\r\n <li (click)=\"invokeGoToPage(pages.length - 1)\" [ngStyle]=\"getPageItemStyle(undefined, isLastPage)\">\r\n \u00BB\u00BB\r\n </li>\r\n\r\n </ng-container>\r\n\r\n </ul>\r\n\r\n <div *ngIf=\"itemInfo?.layoutSchema?.pagination?.pageSize\" [ngStyle]=\"sizeControlStyle\">\r\n <label for=\"pageSize\" [ngStyle]=\"labelStyle\">\r\n {{ itemInfo?.layoutSchema?.pagination?.caption }}\r\n </label>\r\n\r\n <select id=\"pageSize\" [(ngModel)]=\"pageSize\" (change)=\"invokeOnPageSizeChange(pageSize)\"\r\n [ngStyle]=\"selectStyle\">\r\n <option *ngFor=\"\r\n let size of\r\n itemInfo?.layoutSchema\r\n ?.pagination?.pageSizeOptions ||\r\n [5, 10, 15, 20]\r\n \" [value]=\"size\">\r\n {{ size }}\r\n </option>\r\n </select>\r\n </div>\r\n\r\n</div>", styles: [":host{display:block;width:100%;min-width:0;box-sizing:border-box}\n"] }]
|
|
134
265
|
}], ctorParameters: () => [{ type: i1.Platform }], propDecorators: { itemInfo: [{
|
|
135
266
|
type: Input
|
|
136
267
|
}], pageSize: [{
|
|
@@ -143,6 +274,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
143
274
|
type: Output
|
|
144
275
|
}], onGoToPage: [{
|
|
145
276
|
type: Output
|
|
277
|
+
}], onWindowResize: [{
|
|
278
|
+
type: HostListener,
|
|
279
|
+
args: ['window:resize']
|
|
146
280
|
}] } });
|
|
147
281
|
|
|
148
282
|
let String$1 = class String {
|