@pepperi-addons/ngx-lib 0.4.2-beta.315 → 0.4.2-beta.317
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.
- package/esm2020/assets/i18n/en.ngx-lib.json +3 -0
- package/esm2020/list/list-pager.component.mjs +56 -9
- package/esm2020/list/list.component.mjs +16 -3
- package/esm2020/list/list.model.mjs +1 -1
- package/esm2020/list/list.module.mjs +5 -1
- package/fesm2015/pepperi-addons-ngx-lib-list.mjs +76 -12
- package/fesm2015/pepperi-addons-ngx-lib-list.mjs.map +1 -1
- package/fesm2015/pepperi-addons-ngx-lib.mjs +3 -0
- package/fesm2015/pepperi-addons-ngx-lib.mjs.map +1 -1
- package/fesm2020/pepperi-addons-ngx-lib-list.mjs +75 -12
- package/fesm2020/pepperi-addons-ngx-lib-list.mjs.map +1 -1
- package/fesm2020/pepperi-addons-ngx-lib.mjs +3 -0
- package/fesm2020/pepperi-addons-ngx-lib.mjs.map +1 -1
- package/list/list-pager.component.d.ts +16 -6
- package/list/list.component.d.ts +4 -1
- package/list/list.module.d.ts +4 -3
- package/package.json +1 -1
- package/src/assets/i18n/en.ngx-lib.json +3 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export class PepSelectionData {
|
|
2
2
|
}
|
|
3
3
|
export const DEFAULT_PAGE_SIZE = 50;
|
|
4
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlzdC5tb2RlbC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1saWIvbGlzdC9saXN0Lm1vZGVsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9CQSxNQUFNLE9BQU8sZ0JBQWdCO0NBSTVCO0FBa0JELE1BQU0sQ0FBQyxNQUFNLGlCQUFpQixHQUFHLEVBQUUsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE9iamVjdHNEYXRhUm93IH0gZnJvbSAnQHBlcHBlcmktYWRkb25zL25neC1saWInO1xuXG5leHBvcnQgdHlwZSBQZXBMaXN0U2VsZWN0aW9uVHlwZSA9XG4gICAgfCAnbm9uZSdcbiAgICB8ICdzaW5nbGUnXG4gICAgfCAnbXVsdGknO1xuXG5leHBvcnQgdHlwZSBQZXBMaXN0UGFnZXJUeXBlID0gJ3BhZ2VzJyB8ICdzY3JvbGwnO1xuXG5leHBvcnQgdHlwZSBQZXBMaXN0Vmlld1R5cGUgPSAnJyB8ICdjYXJkcycgfCAnbGluZXMnIHwgJ3RhYmxlJzsgLy8gfCAnbWFwJztcblxuZXhwb3J0IHR5cGUgUGVwTGlzdENhcmRTaXplVHlwZSA9ICdzbScgfCAnbWQnO1xuXG5leHBvcnQgdHlwZSBQZXBMaXN0VGFibGVWaWV3VHlwZSA9ICdjb21wYWN0JyB8ICdyZWd1bGFyJztcblxuZXhwb3J0IGludGVyZmFjZSBJUGVwTGlzdEl0ZW1DbGlja0V2ZW50IHtcbiAgICBzb3VyY2U6IE9iamVjdHNEYXRhUm93O1xuICAgIHZpZXdUeXBlOiBQZXBMaXN0Vmlld1R5cGU7XG59XG5cbmV4cG9ydCBjbGFzcyBQZXBTZWxlY3Rpb25EYXRhIHtcbiAgICBzZWxlY3Rpb25UeXBlOiBudW1iZXI7XG4gICAgcm93czogQXJyYXk8YW55PjtcbiAgICByb3dUeXBlczogQXJyYXk8YW55Pjtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBJUGVwTGlzdExvYWRJdGVtc0V2ZW50IHtcbiAgICBmcm9tSW5kZXg6IG51bWJlcjtcbiAgICB0b0luZGV4OiBudW1iZXI7XG4gICAgLy8gdXBkYXRlSXRlbXNGdW5jOiAoKSA9PiB2b2lkOyAvLygpID0+IGFueTsgXG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgSVBlcExpc3RMb2FkUGFnZUV2ZW50IHtcbiAgICBwYWdlSW5kZXg6IG51bWJlcjtcbiAgICBwYWdlU2l6ZTogbnVtYmVyO1xuICAgIC8vIHVwZGF0ZVBhZ2VGdW5jOiAoKSA9PiB2b2lkOyAvLygpID0+
|
|
4
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlzdC5tb2RlbC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1saWIvbGlzdC9saXN0Lm1vZGVsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9CQSxNQUFNLE9BQU8sZ0JBQWdCO0NBSTVCO0FBa0JELE1BQU0sQ0FBQyxNQUFNLGlCQUFpQixHQUFHLEVBQUUsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE9iamVjdHNEYXRhUm93IH0gZnJvbSAnQHBlcHBlcmktYWRkb25zL25neC1saWInO1xuXG5leHBvcnQgdHlwZSBQZXBMaXN0U2VsZWN0aW9uVHlwZSA9XG4gICAgfCAnbm9uZSdcbiAgICB8ICdzaW5nbGUnXG4gICAgfCAnbXVsdGknO1xuXG5leHBvcnQgdHlwZSBQZXBMaXN0UGFnZXJUeXBlID0gJ3BhZ2VzJyB8ICdzY3JvbGwnO1xuXG5leHBvcnQgdHlwZSBQZXBMaXN0Vmlld1R5cGUgPSAnJyB8ICdjYXJkcycgfCAnbGluZXMnIHwgJ3RhYmxlJzsgLy8gfCAnbWFwJztcblxuZXhwb3J0IHR5cGUgUGVwTGlzdENhcmRTaXplVHlwZSA9ICdzbScgfCAnbWQnO1xuXG5leHBvcnQgdHlwZSBQZXBMaXN0VGFibGVWaWV3VHlwZSA9ICdjb21wYWN0JyB8ICdyZWd1bGFyJztcblxuZXhwb3J0IGludGVyZmFjZSBJUGVwTGlzdEl0ZW1DbGlja0V2ZW50IHtcbiAgICBzb3VyY2U6IE9iamVjdHNEYXRhUm93O1xuICAgIHZpZXdUeXBlOiBQZXBMaXN0Vmlld1R5cGU7XG59XG5cbmV4cG9ydCBjbGFzcyBQZXBTZWxlY3Rpb25EYXRhIHtcbiAgICBzZWxlY3Rpb25UeXBlOiBudW1iZXI7XG4gICAgcm93czogQXJyYXk8YW55PjtcbiAgICByb3dUeXBlczogQXJyYXk8YW55Pjtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBJUGVwTGlzdExvYWRJdGVtc0V2ZW50IHtcbiAgICBmcm9tSW5kZXg6IG51bWJlcjtcbiAgICB0b0luZGV4OiBudW1iZXI7XG4gICAgLy8gdXBkYXRlSXRlbXNGdW5jOiAoKSA9PiB2b2lkOyAvLygpID0+IGFueTsgXG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgSVBlcExpc3RMb2FkUGFnZUV2ZW50IHtcbiAgICBwYWdlSW5kZXg6IG51bWJlcjtcbiAgICBwYWdlU2l6ZTogbnVtYmVyO1xuICAgIC8vIHVwZGF0ZVBhZ2VGdW5jOiAoKSA9PiB2b2lkOyAvLygpID0+IGFueTsgXG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgSVBlcExpc3RTdGFydEluZGV4Q2hhbmdlRXZlbnQge1xuICAgIHN0YXJ0SW5kZXg6IG51bWJlcjtcbn1cblxuZXhwb3J0IGNvbnN0IERFRkFVTFRfUEFHRV9TSVpFID0gNTA7XG5cbmV4cG9ydCBpbnRlcmZhY2UgSVBlcExpc3RTb3J0aW5nRGF0YSB7XG4gICAgc29ydEJ5OiBzdHJpbmc7XG4gICAgaXNBc2M6IGJvb2xlYW47XG59XG5cbmV4cG9ydCB0eXBlIElQZXBMaXN0U29ydGluZ0NoYW5nZUV2ZW50ID0gSVBlcExpc3RTb3J0aW5nRGF0YTtcbiJdfQ==
|
|
@@ -13,6 +13,7 @@ import { PepCarouselModule } from '@pepperi-addons/ngx-lib/carousel';
|
|
|
13
13
|
import { PepIconModule, pepIconArrowDown, pepIconArrowEither, pepIconArrowUp, pepIconSystemMust, pepIconArrowRight, pepIconArrowRightAlt, pepIconArrowLeft, pepIconArrowLeftAlt, } from '@pepperi-addons/ngx-lib/icon';
|
|
14
14
|
import { PepFormModule } from '@pepperi-addons/ngx-lib/form';
|
|
15
15
|
import { PepMenuModule } from '@pepperi-addons/ngx-lib/menu';
|
|
16
|
+
import { PepSelectModule } from '@pepperi-addons/ngx-lib/select';
|
|
16
17
|
import { PepTextboxModule } from '@pepperi-addons/ngx-lib/textbox';
|
|
17
18
|
// import { PepListOldComponent } from './list_old.component';
|
|
18
19
|
import { PepListComponent } from './list.component';
|
|
@@ -85,6 +86,7 @@ PepListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
|
|
|
85
86
|
PepIconModule,
|
|
86
87
|
PepFormModule,
|
|
87
88
|
PepMenuModule,
|
|
89
|
+
PepSelectModule,
|
|
88
90
|
PepTextboxModule,
|
|
89
91
|
VirtualScrollerModule], exports: [
|
|
90
92
|
// PepListOldComponent,
|
|
@@ -112,6 +114,7 @@ PepListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
|
|
|
112
114
|
PepIconModule,
|
|
113
115
|
PepFormModule,
|
|
114
116
|
PepMenuModule,
|
|
117
|
+
PepSelectModule,
|
|
115
118
|
PepTextboxModule,
|
|
116
119
|
VirtualScrollerModule] });
|
|
117
120
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListModule, decorators: [{
|
|
@@ -134,6 +137,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
134
137
|
PepIconModule,
|
|
135
138
|
PepFormModule,
|
|
136
139
|
PepMenuModule,
|
|
140
|
+
PepSelectModule,
|
|
137
141
|
PepTextboxModule,
|
|
138
142
|
VirtualScrollerModule
|
|
139
143
|
],
|
|
@@ -141,4 +145,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
141
145
|
declarations: [listComponents, listPipes],
|
|
142
146
|
}]
|
|
143
147
|
}], ctorParameters: function () { return [{ type: i1.PepIconRegistry }]; } });
|
|
144
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
148
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlzdC5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtbGliL2xpc3QvbGlzdC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFFL0MsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3pELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUMzRCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUMvRCxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDekQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUV2RCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDMUQsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFDNUUsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBQ2pFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGtDQUFrQyxDQUFDO0FBQ3JFLE9BQU8sRUFDSCxhQUFhLEVBRWIsZ0JBQWdCLEVBQ2hCLGtCQUFrQixFQUNsQixjQUFjLEVBQ2QsaUJBQWlCLEVBQ2pCLGlCQUFpQixFQUNqQixvQkFBb0IsRUFDcEIsZ0JBQWdCLEVBQ2hCLG1CQUFtQixHQUN0QixNQUFNLDhCQUE4QixDQUFDO0FBQ3RDLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUM3RCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDN0QsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBQ2pFLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGlDQUFpQyxDQUFDO0FBRW5FLDhEQUE4RDtBQUM5RCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUNwRCxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUNuRSxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUNyRSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUNuRSxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUMvRCxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUNuRSxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUMvRCxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQWMvRCxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFPdEUsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sb0JBQW9CLENBQUM7OztBQW5CM0QsTUFBTSxjQUFjLEdBQUc7SUFDbkIsdUJBQXVCO0lBQ3ZCLGdCQUFnQjtJQUNoQix1QkFBdUI7SUFDdkIsd0JBQXdCO0lBQ3hCLHVCQUF1QjtJQUN2QixxQkFBcUI7SUFDckIsdUJBQXVCO0lBQ3ZCLHFCQUFxQjtJQUNyQixxQkFBcUI7Q0FDeEIsQ0FBQztBQUlGLE1BQU0sU0FBUyxHQUFHO0lBQ2Qsa0JBQWtCO0lBQ2xCLGtCQUFrQjtDQUNyQixDQUFDO0FBR0YsMEVBQTBFO0FBMEIxRSxNQUFNLE9BQU8sYUFBYTtJQUN0QixZQUFvQixlQUFnQztRQUFoQyxvQkFBZSxHQUFmLGVBQWUsQ0FBaUI7UUFDaEQsSUFBSSxDQUFDLGVBQWUsQ0FBQyxhQUFhLENBQUM7WUFDL0IsZ0JBQWdCO1lBQ2hCLGtCQUFrQjtZQUNsQixjQUFjO1lBQ2QsaUJBQWlCO1lBQ2pCLGlCQUFpQjtZQUNqQixvQkFBb0I7WUFDcEIsZ0JBQWdCO1lBQ2hCLG1CQUFtQjtTQUN0QixDQUFDLENBQUM7SUFDUCxDQUFDOzswR0FaUSxhQUFhOzJHQUFiLGFBQWE7UUE3Q3RCLHVCQUF1QjtRQUN2QixnQkFBZ0I7UUFDaEIsdUJBQXVCO1FBQ3ZCLHdCQUF3QjtRQUN4Qix1QkFBdUI7UUFDdkIscUJBQXFCO1FBQ3JCLHVCQUF1QjtRQUN2QixxQkFBcUI7UUFDckIscUJBQXFCLEVBTXJCLGtCQUFrQjtRQUNsQixrQkFBa0IsYUFPZCxZQUFZO1FBQ1osb0JBQW9CO1FBQ3BCLGVBQWU7UUFDZixlQUFlO1FBQ2YsaUJBQWlCO1FBQ2pCLGNBQWM7UUFDZCxhQUFhO1FBQ2IsYUFBYTtRQUNiLGtCQUFrQjtRQUNsQixlQUFlO1FBQ2Ysb0JBQW9CO1FBQ3BCLGVBQWU7UUFDZixpQkFBaUI7UUFDakIsYUFBYTtRQUNiLGFBQWE7UUFDYixhQUFhO1FBQ2IsZUFBZTtRQUNmLGdCQUFnQjtRQUNoQixxQkFBcUI7UUF4Q3pCLHVCQUF1QjtRQUN2QixnQkFBZ0I7UUFDaEIsdUJBQXVCO1FBQ3ZCLHdCQUF3QjtRQUN4Qix1QkFBdUI7UUFDdkIscUJBQXFCO1FBQ3JCLHVCQUF1QjtRQUN2QixxQkFBcUI7UUFDckIscUJBQXFCOzJHQXFDWixhQUFhLFlBdkJsQixZQUFZO1FBQ1osb0JBQW9CO1FBQ3BCLGVBQWU7UUFDZixlQUFlO1FBQ2YsaUJBQWlCO1FBQ2pCLGNBQWM7UUFDZCxhQUFhO1FBQ2IsYUFBYTtRQUNiLGtCQUFrQjtRQUNsQixlQUFlO1FBQ2Ysb0JBQW9CO1FBQ3BCLGVBQWU7UUFDZixpQkFBaUI7UUFDakIsYUFBYTtRQUNiLGFBQWE7UUFDYixhQUFhO1FBQ2IsZUFBZTtRQUNmLGdCQUFnQjtRQUNoQixxQkFBcUI7MkZBS2hCLGFBQWE7a0JBekJ6QixRQUFRO21CQUFDO29CQUNOLE9BQU8sRUFBRTt3QkFDTCxZQUFZO3dCQUNaLG9CQUFvQjt3QkFDcEIsZUFBZTt3QkFDZixlQUFlO3dCQUNmLGlCQUFpQjt3QkFDakIsY0FBYzt3QkFDZCxhQUFhO3dCQUNiLGFBQWE7d0JBQ2Isa0JBQWtCO3dCQUNsQixlQUFlO3dCQUNmLG9CQUFvQjt3QkFDcEIsZUFBZTt3QkFDZixpQkFBaUI7d0JBQ2pCLGFBQWE7d0JBQ2IsYUFBYTt3QkFDYixhQUFhO3dCQUNiLGVBQWU7d0JBQ2YsZ0JBQWdCO3dCQUNoQixxQkFBcUI7cUJBQ3hCO29CQUNELE9BQU8sRUFBRSxDQUFDLGNBQWMsQ0FBQztvQkFDekIsWUFBWSxFQUFFLENBQUMsY0FBYyxFQUFFLFNBQVMsQ0FBQztpQkFDNUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcblxuaW1wb3J0IHsgTWF0Q29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvY29yZSc7XG5pbXBvcnQgeyBNYXRCdXR0b25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9idXR0b24nO1xuaW1wb3J0IHsgTWF0Q2hlY2tib3hNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9jaGVja2JveCc7XG5pbXBvcnQgeyBNYXRSYWRpb01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL3JhZGlvJztcbmltcG9ydCB7IE1hdEljb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9pY29uJztcbmltcG9ydCB7IE1hdE1lbnVNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9tZW51JztcblxuaW1wb3J0IHsgUGVwTmd4TGliTW9kdWxlIH0gZnJvbSAnQHBlcHBlcmktYWRkb25zL25neC1saWInO1xuaW1wb3J0IHsgUGVwQnJlYWRDcnVtYnNNb2R1bGUgfSBmcm9tICdAcGVwcGVyaS1hZGRvbnMvbmd4LWxpYi9icmVhZC1jcnVtYnMnO1xuaW1wb3J0IHsgUGVwQnV0dG9uTW9kdWxlIH0gZnJvbSAnQHBlcHBlcmktYWRkb25zL25neC1saWIvYnV0dG9uJztcbmltcG9ydCB7IFBlcENhcm91c2VsTW9kdWxlIH0gZnJvbSAnQHBlcHBlcmktYWRkb25zL25neC1saWIvY2Fyb3VzZWwnO1xuaW1wb3J0IHtcbiAgICBQZXBJY29uTW9kdWxlLFxuICAgIFBlcEljb25SZWdpc3RyeSxcbiAgICBwZXBJY29uQXJyb3dEb3duLFxuICAgIHBlcEljb25BcnJvd0VpdGhlcixcbiAgICBwZXBJY29uQXJyb3dVcCxcbiAgICBwZXBJY29uU3lzdGVtTXVzdCxcbiAgICBwZXBJY29uQXJyb3dSaWdodCxcbiAgICBwZXBJY29uQXJyb3dSaWdodEFsdCxcbiAgICBwZXBJY29uQXJyb3dMZWZ0LFxuICAgIHBlcEljb25BcnJvd0xlZnRBbHQsXG59IGZyb20gJ0BwZXBwZXJpLWFkZG9ucy9uZ3gtbGliL2ljb24nO1xuaW1wb3J0IHsgUGVwRm9ybU1vZHVsZSB9IGZyb20gJ0BwZXBwZXJpLWFkZG9ucy9uZ3gtbGliL2Zvcm0nO1xuaW1wb3J0IHsgUGVwTWVudU1vZHVsZSB9IGZyb20gJ0BwZXBwZXJpLWFkZG9ucy9uZ3gtbGliL21lbnUnO1xuaW1wb3J0IHsgUGVwU2VsZWN0TW9kdWxlIH0gZnJvbSAnQHBlcHBlcmktYWRkb25zL25neC1saWIvc2VsZWN0JztcbmltcG9ydCB7IFBlcFRleHRib3hNb2R1bGUgfSBmcm9tICdAcGVwcGVyaS1hZGRvbnMvbmd4LWxpYi90ZXh0Ym94JztcblxuLy8gaW1wb3J0IHsgUGVwTGlzdE9sZENvbXBvbmVudCB9IGZyb20gJy4vbGlzdF9vbGQuY29tcG9uZW50JztcbmltcG9ydCB7IFBlcExpc3RDb21wb25lbnQgfSBmcm9tICcuL2xpc3QuY29tcG9uZW50JztcbmltcG9ydCB7IFBlcExpc3RBY3Rpb25zQ29tcG9uZW50IH0gZnJvbSAnLi9saXN0LWFjdGlvbnMuY29tcG9uZW50JztcbmltcG9ydCB7IFBlcExpc3RDYXJvdXNlbENvbXBvbmVudCB9IGZyb20gJy4vbGlzdC1jYXJvdXNlbC5jb21wb25lbnQnO1xuaW1wb3J0IHsgUGVwTGlzdENob29zZXJDb21wb25lbnQgfSBmcm9tICcuL2xpc3QtY2hvb3Nlci5jb21wb25lbnQnO1xuaW1wb3J0IHsgUGVwTGlzdFBhZ2VyQ29tcG9uZW50IH0gZnJvbSAnLi9saXN0LXBhZ2VyLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBQZXBMaXN0U29ydGluZ0NvbXBvbmVudCB9IGZyb20gJy4vbGlzdC1zb3J0aW5nLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBQZXBMaXN0VG90YWxDb21wb25lbnQgfSBmcm9tICcuL2xpc3QtdG90YWwuY29tcG9uZW50JztcbmltcG9ydCB7IFBlcExpc3RWaWV3c0NvbXBvbmVudCB9IGZyb20gJy4vbGlzdC12aWV3cy5jb21wb25lbnQnO1xuXG5jb25zdCBsaXN0Q29tcG9uZW50cyA9IFtcbiAgICAvLyBQZXBMaXN0T2xkQ29tcG9uZW50LFxuICAgIFBlcExpc3RDb21wb25lbnQsXG4gICAgUGVwTGlzdEFjdGlvbnNDb21wb25lbnQsXG4gICAgUGVwTGlzdENhcm91c2VsQ29tcG9uZW50LFxuICAgIFBlcExpc3RDaG9vc2VyQ29tcG9uZW50LFxuICAgIFBlcExpc3RQYWdlckNvbXBvbmVudCxcbiAgICBQZXBMaXN0U29ydGluZ0NvbXBvbmVudCxcbiAgICBQZXBMaXN0VG90YWxDb21wb25lbnQsXG4gICAgUGVwTGlzdFZpZXdzQ29tcG9uZW50LFxuXTtcblxuaW1wb3J0IHsgSXNJdGVtRGlzYWJsZWRQaXBlLCBJc0l0ZW1TZWxlY3RlZFBpcGUgfSBmcm9tICcuL2xpc3QucGlwZXMnO1xuXG5jb25zdCBsaXN0UGlwZXMgPSBbXG4gICAgSXNJdGVtU2VsZWN0ZWRQaXBlLFxuICAgIElzSXRlbURpc2FibGVkUGlwZVxuXTtcblxuaW1wb3J0IHsgVmlydHVhbFNjcm9sbGVyTW9kdWxlIH0gZnJvbSAnLi92aXJ0dWFsLXNjcm9sbGVyJztcbi8vIGltcG9ydCB7IFBlcFZpcnR1YWxTY3JvbGxDb21wb25lbnQgfSBmcm9tICcuL3ZpcnR1YWwtc2Nyb2xsLmNvbXBvbmVudCc7XG5ATmdNb2R1bGUoe1xuICAgIGltcG9ydHM6IFtcbiAgICAgICAgQ29tbW9uTW9kdWxlLFxuICAgICAgICAvLyBNYXRlcmlhbCBtb2R1bGVzLFxuICAgICAgICBNYXRDb21tb25Nb2R1bGUsXG4gICAgICAgIE1hdEJ1dHRvbk1vZHVsZSxcbiAgICAgICAgTWF0Q2hlY2tib3hNb2R1bGUsXG4gICAgICAgIE1hdFJhZGlvTW9kdWxlLFxuICAgICAgICBNYXRJY29uTW9kdWxlLFxuICAgICAgICBNYXRNZW51TW9kdWxlLFxuICAgICAgICAvLyBuZ3gtbGliIG1vZHVsZXNcbiAgICAgICAgUGVwTmd4TGliTW9kdWxlLFxuICAgICAgICBQZXBCcmVhZENydW1ic01vZHVsZSxcbiAgICAgICAgUGVwQnV0dG9uTW9kdWxlLFxuICAgICAgICBQZXBDYXJvdXNlbE1vZHVsZSxcbiAgICAgICAgUGVwSWNvbk1vZHVsZSxcbiAgICAgICAgUGVwRm9ybU1vZHVsZSxcbiAgICAgICAgUGVwTWVudU1vZHVsZSxcbiAgICAgICAgUGVwU2VsZWN0TW9kdWxlLFxuICAgICAgICBQZXBUZXh0Ym94TW9kdWxlLFxuICAgICAgICBWaXJ0dWFsU2Nyb2xsZXJNb2R1bGVcbiAgICBdLFxuICAgIGV4cG9ydHM6IFtsaXN0Q29tcG9uZW50c10sXG4gICAgZGVjbGFyYXRpb25zOiBbbGlzdENvbXBvbmVudHMsIGxpc3RQaXBlc10sXG59KVxuZXhwb3J0IGNsYXNzIFBlcExpc3RNb2R1bGUge1xuICAgIGNvbnN0cnVjdG9yKHByaXZhdGUgcGVwSWNvblJlZ2lzdHJ5OiBQZXBJY29uUmVnaXN0cnkpIHtcbiAgICAgICAgdGhpcy5wZXBJY29uUmVnaXN0cnkucmVnaXN0ZXJJY29ucyhbXG4gICAgICAgICAgICBwZXBJY29uQXJyb3dEb3duLFxuICAgICAgICAgICAgcGVwSWNvbkFycm93RWl0aGVyLFxuICAgICAgICAgICAgcGVwSWNvbkFycm93VXAsXG4gICAgICAgICAgICBwZXBJY29uU3lzdGVtTXVzdCxcbiAgICAgICAgICAgIHBlcEljb25BcnJvd1JpZ2h0LFxuICAgICAgICAgICAgcGVwSWNvbkFycm93UmlnaHRBbHQsXG4gICAgICAgICAgICBwZXBJY29uQXJyb3dMZWZ0LFxuICAgICAgICAgICAgcGVwSWNvbkFycm93TGVmdEFsdCxcbiAgICAgICAgXSk7XG4gICAgfVxufVxuIl19
|
|
@@ -13,7 +13,7 @@ import * as i4 from '@angular/material/icon';
|
|
|
13
13
|
import { MatIconModule } from '@angular/material/icon';
|
|
14
14
|
import { MatMenuModule } from '@angular/material/menu';
|
|
15
15
|
import * as i1 from '@pepperi-addons/ngx-lib';
|
|
16
|
-
import {
|
|
16
|
+
import { PepScreenSizeType, FIELD_TYPE, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
|
|
17
17
|
import * as i2$2 from '@pepperi-addons/ngx-lib/bread-crumbs';
|
|
18
18
|
import { PepBreadCrumbItem, PepBreadCrumbsModule } from '@pepperi-addons/ngx-lib/bread-crumbs';
|
|
19
19
|
import * as i3$2 from '@pepperi-addons/ngx-lib/button';
|
|
@@ -22,11 +22,13 @@ import * as i4$2 from '@pepperi-addons/ngx-lib/carousel';
|
|
|
22
22
|
import { PepCarouselComponent, PepCarouselModule } from '@pepperi-addons/ngx-lib/carousel';
|
|
23
23
|
import * as i5 from '@pepperi-addons/ngx-lib/icon';
|
|
24
24
|
import { pepIconArrowDown, pepIconArrowEither, pepIconArrowUp, pepIconSystemMust, pepIconArrowRight, pepIconArrowRightAlt, pepIconArrowLeft, pepIconArrowLeftAlt, PepIconModule } from '@pepperi-addons/ngx-lib/icon';
|
|
25
|
-
import * as i7 from '@pepperi-addons/ngx-lib/form';
|
|
25
|
+
import * as i7$1 from '@pepperi-addons/ngx-lib/form';
|
|
26
26
|
import { PepFormModule } from '@pepperi-addons/ngx-lib/form';
|
|
27
27
|
import * as i1$1 from '@pepperi-addons/ngx-lib/menu';
|
|
28
28
|
import { PepMenuModule } from '@pepperi-addons/ngx-lib/menu';
|
|
29
|
-
import * as i6 from '@pepperi-addons/ngx-lib/
|
|
29
|
+
import * as i6 from '@pepperi-addons/ngx-lib/select';
|
|
30
|
+
import { PepSelectModule } from '@pepperi-addons/ngx-lib/select';
|
|
31
|
+
import * as i7 from '@pepperi-addons/ngx-lib/textbox';
|
|
30
32
|
import { PepTextboxModule } from '@pepperi-addons/ngx-lib/textbox';
|
|
31
33
|
import * as tween from '@tweenjs/tween.js';
|
|
32
34
|
import { coerceNumberProperty } from '@angular/cdk/coercion';
|
|
@@ -1129,14 +1131,36 @@ const DEFAULT_PAGE_SIZE = 50;
|
|
|
1129
1131
|
class IPepListPagerChangeEvent {
|
|
1130
1132
|
}
|
|
1131
1133
|
class PepListPagerComponent {
|
|
1132
|
-
constructor(
|
|
1133
|
-
this._changeDetectorRef = _changeDetectorRef;
|
|
1134
|
+
constructor(layoutService) {
|
|
1134
1135
|
this.layoutService = layoutService;
|
|
1135
1136
|
this.disabled = false;
|
|
1137
|
+
this.showPageSizeSelector = false;
|
|
1138
|
+
this.showFirstLastButtons = false;
|
|
1139
|
+
this.PepScreenSizeType = PepScreenSizeType;
|
|
1140
|
+
this.screenSize = PepScreenSizeType.LG;
|
|
1141
|
+
this.pageSizeOptionsForSelect = [
|
|
1142
|
+
{ key: '10', value: '10' },
|
|
1143
|
+
{ key: '20', value: '20' },
|
|
1144
|
+
{ key: '50', value: '50' },
|
|
1145
|
+
];
|
|
1146
|
+
this._pageSizeOptions = [10, 20, 50];
|
|
1136
1147
|
this._pageIndex = 0;
|
|
1137
1148
|
this.length = 0;
|
|
1138
1149
|
this.pageSize = DEFAULT_PAGE_SIZE;
|
|
1139
1150
|
this.pagerChange = new EventEmitter();
|
|
1151
|
+
this.resizeSub = this.layoutService.onResize$.subscribe((size) => {
|
|
1152
|
+
this.screenSize = size;
|
|
1153
|
+
});
|
|
1154
|
+
}
|
|
1155
|
+
set pageSizeOptions(value) {
|
|
1156
|
+
this._pageSizeOptions = Array.isArray(value) && value.length > 0 ? value : [10, 20, 50];
|
|
1157
|
+
this.pageSizeOptionsForSelect = this._pageSizeOptions.map((n) => ({
|
|
1158
|
+
key: n.toString(),
|
|
1159
|
+
value: n.toString(),
|
|
1160
|
+
}));
|
|
1161
|
+
}
|
|
1162
|
+
get pageSizeOptions() {
|
|
1163
|
+
return this._pageSizeOptions;
|
|
1140
1164
|
}
|
|
1141
1165
|
set pageIndex(value) {
|
|
1142
1166
|
this.setPageIndex(value);
|
|
@@ -1144,6 +1168,10 @@ class PepListPagerComponent {
|
|
|
1144
1168
|
get pageIndex() {
|
|
1145
1169
|
return this._pageIndex;
|
|
1146
1170
|
}
|
|
1171
|
+
ngOnDestroy() {
|
|
1172
|
+
var _a;
|
|
1173
|
+
(_a = this.resizeSub) === null || _a === void 0 ? void 0 : _a.unsubscribe();
|
|
1174
|
+
}
|
|
1147
1175
|
nextPage() {
|
|
1148
1176
|
if (!this.hasNextPage()) {
|
|
1149
1177
|
return;
|
|
@@ -1193,6 +1221,20 @@ class PepListPagerComponent {
|
|
|
1193
1221
|
const pageNumber = coerceNumberProperty(value);
|
|
1194
1222
|
this.setPageIndex(pageNumber - 1); // - 1 to convert number into index.
|
|
1195
1223
|
}
|
|
1224
|
+
onPageSizeChange(value) {
|
|
1225
|
+
const newPageSize = coerceNumberProperty(value);
|
|
1226
|
+
if (!newPageSize || newPageSize === this.pageSize) {
|
|
1227
|
+
return;
|
|
1228
|
+
}
|
|
1229
|
+
const previousPageIndex = this.pageIndex;
|
|
1230
|
+
this.pageSize = newPageSize;
|
|
1231
|
+
// Reset to first page on page-size change.
|
|
1232
|
+
this.setPageIndex(0);
|
|
1233
|
+
// If we were already on page 0, setPageIndex won't emit, so emit explicitly.
|
|
1234
|
+
if (this.pageIndex === previousPageIndex) {
|
|
1235
|
+
this._emitChangeEvent(previousPageIndex);
|
|
1236
|
+
}
|
|
1237
|
+
}
|
|
1196
1238
|
setPageIndex(newIndex) {
|
|
1197
1239
|
const previousPageIndex = this.pageIndex;
|
|
1198
1240
|
if (newIndex >= 0 && newIndex < this.getNumberOfPages()) {
|
|
@@ -1215,15 +1257,21 @@ class PepListPagerComponent {
|
|
|
1215
1257
|
});
|
|
1216
1258
|
}
|
|
1217
1259
|
}
|
|
1218
|
-
PepListPagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListPagerComponent, deps: [{ token:
|
|
1219
|
-
PepListPagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListPagerComponent, selector: "pep-list-pager", inputs: { disabled: "disabled", pageIndex: "pageIndex", length: "length", pageSize: "pageSize" }, outputs: { pagerChange: "pagerChange" }, ngImport: i0, template: "<div class=\"pager-container body-sm\">\n <span class=\"pep-spacing-element\">{{ 'LIST.PAGER_PAGE' | translate }}</span>\n <pep-textbox pepAutoWidth class=\"page-index pep-spacing-element\" [key]=\"'pageIndex'\" [type]=\"'int'\"\n [disabled]=\"disabled\" [xAlignment]=\"'center'\" [renderTitle]=\"false\" [renderError]=\"false\" [renderSymbol]=\"false\"\n [value]=\"pageIndex + 1\" [minValue]=\"1\" [maxValue]=\"this.getNumberOfPages()\"\n [maxFieldCharacters]=\"6\" [mandatory]=\"true\" (valueChange)=\"onValueChange($event)\">\n </pep-textbox>\n <
|
|
1260
|
+
PepListPagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListPagerComponent, deps: [{ token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1261
|
+
PepListPagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListPagerComponent, selector: "pep-list-pager", inputs: { disabled: "disabled", showPageSizeSelector: "showPageSizeSelector", showFirstLastButtons: "showFirstLastButtons", pageSizeOptions: "pageSizeOptions", pageIndex: "pageIndex", length: "length", pageSize: "pageSize" }, outputs: { pagerChange: "pagerChange" }, ngImport: i0, template: "<div class=\"pager-container body-sm\">\n <span class=\"pep-spacing-element\">{{ 'LIST.PAGER_PAGE' | translate }}</span>\n <button *ngIf=\"showFirstLastButtons && screenSize <= PepScreenSizeType.MD\" mat-button [disabled]=\"disabled || !hasPreviousPage()\"\n [ngClass]=\"{ disabled: disabled || !hasPreviousPage() }\"\n class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"firstPage()\"\n [title]=\"('LIST.PAGER_FIRST' | translate)\">\n <mat-icon>\n <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_back_right' : 'arrow_back_left'\"></pep-icon>\n </mat-icon>\n </button>\n <button mat-button [disabled]=\"disabled || _previousButtonsDisabled()\"\n [ngClass]=\"{ disabled: disabled || _previousButtonsDisabled() }\"\n class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"previousPage()\"\n [title]=\"('LIST.PAGER_PREVIOUS' | translate)\">\n <mat-icon>\n <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_right' : 'arrow_left'\"></pep-icon>\n </mat-icon>\n </button>\n <pep-textbox pepAutoWidth class=\"page-index pep-spacing-element\" [key]=\"'pageIndex'\" [type]=\"'int'\"\n [disabled]=\"disabled\" [xAlignment]=\"'center'\" [renderTitle]=\"false\" [renderError]=\"false\" [renderSymbol]=\"false\"\n [value]=\"pageIndex + 1\" [minValue]=\"1\" [maxValue]=\"this.getNumberOfPages()\"\n [maxFieldCharacters]=\"6\" [mandatory]=\"true\" (valueChange)=\"onValueChange($event)\">\n </pep-textbox>\n <button mat-button [disabled]=\"disabled || _nextButtonsDisabled()\"\n [ngClass]=\"{ disabled: disabled || _nextButtonsDisabled() }\"\n class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"nextPage()\"\n [title]=\"('LIST.PAGER_NEXT' | translate)\">\n <mat-icon>\n <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_left' : 'arrow_right'\"></pep-icon>\n </mat-icon>\n </button>\n <button *ngIf=\"showFirstLastButtons && screenSize <= PepScreenSizeType.MD\" mat-button [disabled]=\"disabled || !hasNextPage()\"\n [ngClass]=\"{ disabled: disabled || !hasNextPage() }\"\n class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"lastPage()\"\n [title]=\"('LIST.PAGER_LAST' | translate)\">\n <mat-icon>\n <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_back_left' : 'arrow_back_right'\"></pep-icon>\n </mat-icon>\n </button>\n <span class=\"pep-spacing-element\">{{ 'LIST.PAGER_OUT_OF' | translate }}</span>\n <span class=\"pep-spacing-element\">{{ getNumberOfPages() }}</span>\n <ng-container *ngIf=\"showPageSizeSelector\">\n <pep-select pepAutoWidth class=\"page-size pep-spacing-element\" [key]=\"'pageSize'\" [value]=\"pageSize?.toString()\"\n [disabled]=\"disabled\" [renderTitle]=\"false\" [emptyOption]=\"false\" [options]=\"pageSizeOptionsForSelect\"\n (valueChange)=\"onPageSizeChange($event)\">\n </pep-select>\n <span class=\"pep-spacing-element\">{{ 'LIST.PAGER_ITEMS_PER_PAGE' | translate }}</span>\n </ng-container>\n</div>", styles: [".pager-container{display:flex;justify-content:center;align-items:center;height:calc(2rem + calc(var(--pep-spacing-sm, .5rem) * 2));padding:var(--pep-spacing-sm, .5rem)}.pager-container .page-size{min-height:unset;margin-bottom:0}.pager-container .page-size ::ng-deep .mat-form-field-flex{padding:0 .5rem;min-height:2rem}.pager-container .page-index{min-height:unset;margin-bottom:0}.pager-container .page-index ::ng-deep .mat-form-field-flex{padding:0 .5rem;min-height:2rem}.pager-container .page-index ::ng-deep .mat-form-field-flex .mat-input-element{min-width:1.25rem}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.PepInputAutoWidthDirective, selector: "[pepAutoWidth]", inputs: ["includePadding"] }, { kind: "directive", type: i1.PepMenuBlurDirective, selector: "[pepMenuBlur]" }, { kind: "directive", type: i1.PepRtlDirectionDirective, selector: "[pepRtlDirection]" }, { kind: "component", type: i5.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i6.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "placeholder", "placeholderWhenDisabled", "autoSortOptions", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle", "typeaheadDebounceInterval", "addValueToOptionsIfNotExist"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i7.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError", "isInFocus"], outputs: ["valueChange", "keyup", "validationChange"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
|
|
1220
1262
|
PepListPagerComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListPagerComponent });
|
|
1221
1263
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListPagerComponent, decorators: [{
|
|
1222
1264
|
type: Component,
|
|
1223
|
-
args: [{ selector: 'pep-list-pager', template: "<div class=\"pager-container body-sm\">\n <span class=\"pep-spacing-element\">{{ 'LIST.PAGER_PAGE' | translate }}</span>\n <pep-textbox pepAutoWidth class=\"page-index pep-spacing-element\" [key]=\"'pageIndex'\" [type]=\"'int'\"\n [disabled]=\"disabled\" [xAlignment]=\"'center'\" [renderTitle]=\"false\" [renderError]=\"false\" [renderSymbol]=\"false\"\n [value]=\"pageIndex + 1\" [minValue]=\"1\" [maxValue]=\"this.getNumberOfPages()\"\n [maxFieldCharacters]=\"6\" [mandatory]=\"true\" (valueChange)=\"onValueChange($event)\">\n </pep-textbox>\n <
|
|
1265
|
+
args: [{ selector: 'pep-list-pager', template: "<div class=\"pager-container body-sm\">\n <span class=\"pep-spacing-element\">{{ 'LIST.PAGER_PAGE' | translate }}</span>\n <button *ngIf=\"showFirstLastButtons && screenSize <= PepScreenSizeType.MD\" mat-button [disabled]=\"disabled || !hasPreviousPage()\"\n [ngClass]=\"{ disabled: disabled || !hasPreviousPage() }\"\n class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"firstPage()\"\n [title]=\"('LIST.PAGER_FIRST' | translate)\">\n <mat-icon>\n <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_back_right' : 'arrow_back_left'\"></pep-icon>\n </mat-icon>\n </button>\n <button mat-button [disabled]=\"disabled || _previousButtonsDisabled()\"\n [ngClass]=\"{ disabled: disabled || _previousButtonsDisabled() }\"\n class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"previousPage()\"\n [title]=\"('LIST.PAGER_PREVIOUS' | translate)\">\n <mat-icon>\n <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_right' : 'arrow_left'\"></pep-icon>\n </mat-icon>\n </button>\n <pep-textbox pepAutoWidth class=\"page-index pep-spacing-element\" [key]=\"'pageIndex'\" [type]=\"'int'\"\n [disabled]=\"disabled\" [xAlignment]=\"'center'\" [renderTitle]=\"false\" [renderError]=\"false\" [renderSymbol]=\"false\"\n [value]=\"pageIndex + 1\" [minValue]=\"1\" [maxValue]=\"this.getNumberOfPages()\"\n [maxFieldCharacters]=\"6\" [mandatory]=\"true\" (valueChange)=\"onValueChange($event)\">\n </pep-textbox>\n <button mat-button [disabled]=\"disabled || _nextButtonsDisabled()\"\n [ngClass]=\"{ disabled: disabled || _nextButtonsDisabled() }\"\n class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"nextPage()\"\n [title]=\"('LIST.PAGER_NEXT' | translate)\">\n <mat-icon>\n <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_left' : 'arrow_right'\"></pep-icon>\n </mat-icon>\n </button>\n <button *ngIf=\"showFirstLastButtons && screenSize <= PepScreenSizeType.MD\" mat-button [disabled]=\"disabled || !hasNextPage()\"\n [ngClass]=\"{ disabled: disabled || !hasNextPage() }\"\n class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"lastPage()\"\n [title]=\"('LIST.PAGER_LAST' | translate)\">\n <mat-icon>\n <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_back_left' : 'arrow_back_right'\"></pep-icon>\n </mat-icon>\n </button>\n <span class=\"pep-spacing-element\">{{ 'LIST.PAGER_OUT_OF' | translate }}</span>\n <span class=\"pep-spacing-element\">{{ getNumberOfPages() }}</span>\n <ng-container *ngIf=\"showPageSizeSelector\">\n <pep-select pepAutoWidth class=\"page-size pep-spacing-element\" [key]=\"'pageSize'\" [value]=\"pageSize?.toString()\"\n [disabled]=\"disabled\" [renderTitle]=\"false\" [emptyOption]=\"false\" [options]=\"pageSizeOptionsForSelect\"\n (valueChange)=\"onPageSizeChange($event)\">\n </pep-select>\n <span class=\"pep-spacing-element\">{{ 'LIST.PAGER_ITEMS_PER_PAGE' | translate }}</span>\n </ng-container>\n</div>", styles: [".pager-container{display:flex;justify-content:center;align-items:center;height:calc(2rem + calc(var(--pep-spacing-sm, .5rem) * 2));padding:var(--pep-spacing-sm, .5rem)}.pager-container .page-size{min-height:unset;margin-bottom:0}.pager-container .page-size ::ng-deep .mat-form-field-flex{padding:0 .5rem;min-height:2rem}.pager-container .page-index{min-height:unset;margin-bottom:0}.pager-container .page-index ::ng-deep .mat-form-field-flex{padding:0 .5rem;min-height:2rem}.pager-container .page-index ::ng-deep .mat-form-field-flex .mat-input-element{min-width:1.25rem}\n"] }]
|
|
1224
1266
|
}, {
|
|
1225
1267
|
type: Injectable
|
|
1226
|
-
}], ctorParameters: function () { return [{ type:
|
|
1268
|
+
}], ctorParameters: function () { return [{ type: i1.PepLayoutService }]; }, propDecorators: { disabled: [{
|
|
1269
|
+
type: Input
|
|
1270
|
+
}], showPageSizeSelector: [{
|
|
1271
|
+
type: Input
|
|
1272
|
+
}], showFirstLastButtons: [{
|
|
1273
|
+
type: Input
|
|
1274
|
+
}], pageSizeOptions: [{
|
|
1227
1275
|
type: Input
|
|
1228
1276
|
}], pageIndex: [{
|
|
1229
1277
|
type: Input
|
|
@@ -1265,6 +1313,9 @@ class PepListComponent {
|
|
|
1265
1313
|
this.totalsRow = [];
|
|
1266
1314
|
this.pagerType = 'scroll';
|
|
1267
1315
|
this.pageSize = DEFAULT_PAGE_SIZE;
|
|
1316
|
+
this.showPageSizeSelector = false;
|
|
1317
|
+
this.pageSizeOptions = [10, 20, 50];
|
|
1318
|
+
this.showFirstLastButtons = false;
|
|
1268
1319
|
this.pageIndex = 0;
|
|
1269
1320
|
// @Input() startIndex = 0;
|
|
1270
1321
|
this.bufferAmount = 0;
|
|
@@ -2410,6 +2461,10 @@ class PepListComponent {
|
|
|
2410
2461
|
this.initResizeData();
|
|
2411
2462
|
}
|
|
2412
2463
|
onPagerChange(event) {
|
|
2464
|
+
const pageSizeChanged = event.pageSize !== this.pageSize;
|
|
2465
|
+
if (pageSizeChanged) {
|
|
2466
|
+
this.pageSize = event.pageSize;
|
|
2467
|
+
}
|
|
2413
2468
|
this.pageIndex = event.pageIndex;
|
|
2414
2469
|
// Scroll to top.
|
|
2415
2470
|
//this.scrollToTop();
|
|
@@ -2541,12 +2596,12 @@ PepListComponent.SORT_BY_STATE_KEY = 'SortBy';
|
|
|
2541
2596
|
PepListComponent.ASCENDING_STATE_KEY = 'IsAscending';
|
|
2542
2597
|
PepListComponent.MINIMUM_COLUMN_WIDTH = 72;
|
|
2543
2598
|
PepListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListComponent, deps: [{ token: i0.ElementRef }, { token: i1.PepLayoutService }, { token: i1.PepSessionService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
2544
|
-
PepListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListComponent, selector: "pep-list", inputs: { sorting: "sorting", cacheSize: "cacheSize", noDataFoundMsg: "noDataFoundMsg", selectionTypeForActions: "selectionTypeForActions", showCardSelection: "showCardSelection", hideAllSelectionInMulti: "hideAllSelectionInMulti", cardSize: "cardSize", tableViewType: "tableViewType", viewType: "viewType", firstFieldAsLink: "firstFieldAsLink", supportSorting: "supportSorting", supportSortingFields: "supportSortingFields", supportResizing: "supportResizing", parentScroll: "parentScroll", disabled: "disabled", lockEvents: "lockEvents", lockItemInnerEvents: "lockItemInnerEvents", printMode: "printMode", isReport: "isReport", zebraStripes: "zebraStripes", totalsRow: "totalsRow", pagerType: "pagerType", pageSize: "pageSize", pageIndex: "pageIndex", bufferAmount: "bufferAmount", scrollAnimationTime: "scrollAnimationTime", scrollDebounceTime: "scrollDebounceTime", scrollThrottlingTime: "scrollThrottlingTime", SEPARATOR: "SEPARATOR", useAsWebComponent: "useAsWebComponent" }, outputs: { itemClick: "itemClick", fieldClick: "fieldClick", valueChange: "valueChange", sortingChange: "sortingChange", selectedItemsChange: "selectedItemsChange", selectedItemChange: "selectedItemChange", selectAllClick: "selectAllClick", listLoad: "listLoad", loadItems: "loadItems", loadPage: "loadPage", startIndexChange: "startIndexChange" }, host: { listeners: { "window:resize": "onWinResize($event)" } }, viewQueries: [{ propertyName: "listContainerResizableElementRef", first: true, predicate: ["listContainerResizable"], descendants: true, read: ElementRef }, { propertyName: "virtualScroller", first: true, predicate: VirtualScrollerComponent, descendants: true }, { propertyName: "selectAllCB", first: true, predicate: ["selectAllCB"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"totalRows == 0\">\n <ng-container *ngIf=\"noDataFoundMsg; then noDataMsgInputBlock; else noDataMsgDefaultBlock\"></ng-container>\n <ng-template #noDataMsgInputBlock>\n <div class=\"pep-border-bottom\">\n <p class=\"title-xl no-data\">\n {{ noDataFoundMsg }}\n </p>\n </div>\n </ng-template>\n <ng-template #noDataMsgDefaultBlock>\n <div class=\"pep-border-bottom\">\n <p class=\"title-xl no-data\">\n {{ 'LIST.NO_DATA_FOUND' | translate}}\n </p>\n </div>\n <div class=\"no-data-suggestions\">\n <p class=\"suggestions-title title-lg\">\n {{ 'LIST.NO_DATA_FOUND_SUGGESTIONS_TITLE' | translate}}\n </p>\n <ul class=\"suggestions-list body-lg\" [innerHtml]=\"'LIST.NO_DATA_FOUND_SUGGESTIONS_LIST' | translate\"></ul>\n </div>\n </ng-template>\n</ng-container>\n<ng-container *ngIf=\"totalRows > 0\">\n <div class=\"list-container\">\n <div #listContainerResizable class=\"list-container-resizable\">\n <ng-container *ngTemplateOutlet=\"tableHeader\"></ng-container>\n\n <!-- (vsChildRectChange)=\"onChildRectChange($event)\" -->\n <virtual-scroller #scroller [items]=\"pagerType === 'pages' ? currentPageItems : items\"\n [scrollDebounceTime]=\"scrollDebounceTime\" [scrollThrottlingTime]=\"scrollThrottlingTime\"\n [bufferAmount]=\"printMode ? totalRows : bufferAmount\" [parentScroll]=\"parentScroll\" [disable]=\"loadingItemsFromApi\"\n class=\"virtual-scroller\" [ngClass]=\"{ 'table-body': isTable, 'cards-body': !isTable }\"\n (vsChange)=\"onVirtualScrollerChange($event)\" >\n <ng-container *ngFor=\"let item of scroller.viewPortItems; let index = index; let isFirst = first;\">\n <ng-container *ngTemplateOutlet=\"listData; context: {item: item, index:index}\"></ng-container>\n </ng-container>\n </virtual-scroller>\n \n <ng-container *ngTemplateOutlet=\"tableTotal\"></ng-container>\n </div>\n </div>\n <pep-list-pager *ngIf=\"pagerType === 'pages'\" class=\" list-pager\" [disabled]=\"loadingItemsFromApi\"\n [length]=\"totalRows\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\" (pagerChange)=\"onPagerChange($event)\">\n </pep-list-pager>\n</ng-container>\n\n<ng-template #listData let-item=\"item\" let-index=\"index\">\n <ng-container *ngIf=\"isTable\">\n <!-- getIsItemSelected(item) -> item | isItemSelected: selectionTypeForActions : selectedItemId : isAllSelected : selectedItems : unSelectedItems -->\n <div class=\"table-row\" (mouseenter)=\"onTableRowMouseEnter($event, item?.UID, item?.Type)\" (keydown)=\"onTabKeydown($event, item?.UID, item?.Type)\"\n (mouseleave)=\"onTableRowMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n 'compact-view': tableViewType === 'compact',\n even: zebraStripes && index % 2 !== 0,\n selected: getIsItemSelected(item),\n highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId}\" [ngStyle]=\"{ visibility: !loadingItemsFromApi || item ? 'visible' : 'hidden' }\">\n <fieldset class=\"table-row-fieldset\" [ngStyle]=\"{ 'background-color': item?.BackgroundColor }\">\n <mat-checkbox *ngIf=\"selectionTypeForActions == 'multi'\" type=\"checkbox\"\n class=\"pull-left flip row-selection\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n [disabled]=\"false && getisItemDisabled(item)\" [ngStyle]=\"{\n visibility: !deviceHasMouse ||\n item?.UID + SEPARATOR + item?.Type === hoveredItemId || isAllSelected || selectedItems.size > 0 ? 'visible' : 'hidden'\n }\" [checked]=\"getIsItemSelected(item)\"\n (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n </mat-checkbox>\n <mat-radio-button *ngIf=\"selectionTypeForActions == 'single'\" name=\"selection\"\n class=\"pull-left flip row-selection pep-radio-button\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n [disabled]=\"getisItemDisabled(item)\"\n [checked]=\"getIsItemSelected(item)\"\n (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n </mat-radio-button>\n <pep-form [layoutType]=\"'table'\" [checkForChanges]=\"checkForChanges\" [layout]=\"layout\"\n [firstFieldAsLink]=\"firstFieldAsLink\" [data]=\"item\" [canEditObject]=\"!disabled\"\n [lockEvents]=\"lockItemInnerEvents || printMode\" [isReport]=\"isReport\" [isActive]=\"\n (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\n item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\n \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\n (click)=\"itemClicked($event, item)\">\n </pep-form>\n </fieldset>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!isTable\">\n <div (mouseenter)=\"onCardMouseEnter($event, item?.UID, item?.Type)\"\n (mouseleave)=\"onCardMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n selected: getIsItemSelected(item),\n highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId,\n 'line-view': viewType === 'lines',\n 'card-view': viewType === 'cards',\n 'small-card': cardSize === 'sm'\n }\" class=\"pull-left flip\"\n [ngStyle]=\"{ height: calculatedObjectHeight, visibility: !loadingItemsFromApi || item ? 'visible' : 'hidden' }\">\n <mat-checkbox *ngIf=\"showCardSelection\" class=\"pull-left flip card-selection\"\n [disabled]=\"getisItemDisabled(item)\" [checked]=\"getIsItemSelected(item)\"\n (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n </mat-checkbox>\n <pep-form [layoutType]=\"'card'\" [firstFieldAsLink]=\"firstFieldAsLink\" [checkForChanges]=\"checkForChanges\"\n [layout]=\"layout\" [data]=\"item\" [canEditObject]=\"!disabled\"\n [lockEvents]=\"lockItemInnerEvents || printMode\" [isActive]=\"\n (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\n item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\n \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\n (click)=\"itemClicked($event, item)\">\n </pep-form>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableHeader>\n <div *ngIf=\"isTable\" class=\"table-header\" (mouseup)=\"onListResizeEnd($event)\"\n (mouseenter)=\"onListHeaderMouseEnter($event)\" (mouseleave)=\"onListHeaderMouseLeave($event)\"\n (mousemove)=\"onListResize($event)\">\n\n <div class=\"table-header-padding-top\"></div>\n <fieldset class=\"table-header-fieldset\">\n <mat-checkbox *ngIf=\"selectionTypeForActions !== 'none'\" #selectAllCB class=\"pull-left flip row-selection\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n type=\"checkbox\" [ngStyle]=\"{\n visibility:\n selectionTypeForActions == 'single' || \n (selectionTypeForActions == 'multi' && hideAllSelectionInMulti) ? 'hidden' : 'visible'\n }\"\n [indeterminate]=\"isAllSelected ? unSelectedItems.size > 0 && unSelectedItems.size < totalRows : (selectedItems.size > 0 && !getIsAllSelectedForActions())\"\n [disabled]=\"disabled || selectionTypeForActions === 'single'\" [checked]=\"getIsAllSelectedForActions()\"\n (change)=\"selectAllItemsForActions($event)\"></mat-checkbox>\n <fieldset>\n <div *ngFor=\"let field of layout?.ControlFields; let j = index\" class=\"header-column pull-left flip\"\n [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\" [ngClass]=\"{\n 'compact-view': tableViewType === 'compact',\n 'support-sorting': isSortableColumn(field.ApiName),\n 'has-sorting': field.ApiName === sortBy,\n 'is-resizing': field.ApiName === pressedColumn,\n 'is-first': j === 0 && selectionTypeForActions !== 'multi',\n 'is-last': j === layout?.ControlFields?.length - 1\n }\"\n (click)=\"isSortableColumn(field.ApiName) ? (onListSortingChange(field.ApiName, sortBy !== null && sortBy != field.ApiName ? true : !isAsc, $event)) : false\">\n\n <label id=\"{{ field.ApiName }}\"\n class=\"header-label body-sm pull-left flip text-align-{{ field.Layout.XAlignment }}\"\n title=\"{{ field.Title }}\">\n <span *ngIf=\"field.Mandatory\" class=\"mandatory\">\n <pep-icon name=\"system_must\"></pep-icon>\n </span>\n {{ field.Title != '' ? field.Title : ' '}}\n </label>\n\n <div *ngIf=\"supportResizing\" class=\"resize-box pull-right flip\"\n (mousedown)=\"onListResizeStart($event, field.ApiName, j)\">\n <div class=\"splitter\"></div>\n </div>\n\n <div *ngIf=\"isSortableColumn(field.ApiName)\" class=\"sorting-box pull-left flip\"\n [ngClass]=\"{ 'has-sorting': field.ApiName === sortBy }\">\n <mat-icon *ngIf=\"field.ApiName !== sortBy\">\n <pep-icon name=\"arrow_either\" class=\"asc\"></pep-icon>\n </mat-icon>\n <ng-container *ngIf=\"field.ApiName === sortBy\">\n <mat-icon *ngIf=\"!isAsc\" [ngClass]=\"{ 'sort-by': field.ApiName === sortBy && isAsc }\"\n title=\"{{ 'LIST.SORT_ASC' | translate }}\">\n <pep-icon name=\"arrow_up\" class=\"asc\"></pep-icon>\n </mat-icon>\n <mat-icon *ngIf=\"isAsc\" [ngClass]=\"{ 'sort-by': field.ApiName === sortBy && !isAsc }\"\n title=\"{{ 'LIST.SORT_DESC' | translate }}\">\n <pep-icon name=\"arrow_down\" class=\"desc\"></pep-icon>\n </mat-icon>\n </ng-container>\n </div>\n </div>\n </fieldset>\n </fieldset>\n </div>\n</ng-template>\n\n<ng-template #tableTotal>\n <div *ngIf=\"isTable && totalsRow?.length > 0 && totalsRow.length <= layout?.ControlFields.length\"\n class=\"table-total\">\n <fieldset class=\"table-header-fieldset\">\n <div *ngFor=\"let field of layout?.ControlFields; let j = index\" class=\"total-column pull-left flip\"\n [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\">\n <label class=\"total-label body-sm text-align-{{ field.Layout.XAlignment }}\">\n {{ totalsRow[j] }}\n </label>\n </div>\n </fieldset>\n </div>\n</ng-template>", styles: [":host{width:100%;height:inherit;display:flex;flex-direction:column}:host .list-container{display:flex;flex-direction:column;height:inherit;width:100%;overflow:auto}:host .list-container .list-container-resizable{display:flex;flex-direction:column;height:inherit}.no-data{margin:var(--pep-spacing-2xl, 2rem) 0}.no-data-suggestions .suggestions-title{margin:var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem)}.no-data-suggestions .suggestions-list{margin:0;padding:0;padding-inline-start:var(--pep-spacing-2xl, 2rem)}.virtual-scroller{min-height:5rem;height:inherit}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$1.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i7.PepFormComponent, selector: "pep-form", inputs: ["isInternal", "isReport", "layout", "lockEvents", "canEditObject", "data", "lockFields", "isActive", "layoutType", "objectId", "parentId", "searchCode", "showTitle", "firstFieldAsLink", "checkForChanges"], outputs: ["valueChange", "formValidationChange", "fieldClick", "internalFormFieldClick", "internalFormFieldChange"] }, { kind: "component", type: VirtualScrollerComponent, selector: "virtual-scroller,[virtualScroller]", inputs: ["disable", "executeRefreshOutsideAngularZone", "enableUnequalChildrenSizes", "RTL", "useMarginInsteadOfTranslate", "modifyOverflowStyleOfParentScroll", "stripedTable", "scrollbarWidth", "scrollbarHeight", "childWidth", "childHeight", "ssrChildWidth", "ssrChildHeight", "ssrViewportWidth", "ssrViewportHeight", "bufferAmount", "scrollAnimationTime", "resizeBypassRefreshThreshold", "scrollThrottlingTime", "scrollDebounceTime", "checkResizeInterval", "items", "compareItems", "horizontal", "parentScroll"], outputs: ["vsChildRectChange", "vsUpdate", "vsChange", "vsStart", "vsEnd"], exportAs: ["virtualScroller"] }, { kind: "component", type: PepListPagerComponent, selector: "pep-list-pager", inputs: ["disabled", "pageIndex", "length", "pageSize"], outputs: ["pagerChange"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
|
|
2599
|
+
PepListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListComponent, selector: "pep-list", inputs: { sorting: "sorting", cacheSize: "cacheSize", noDataFoundMsg: "noDataFoundMsg", selectionTypeForActions: "selectionTypeForActions", showCardSelection: "showCardSelection", hideAllSelectionInMulti: "hideAllSelectionInMulti", cardSize: "cardSize", tableViewType: "tableViewType", viewType: "viewType", firstFieldAsLink: "firstFieldAsLink", supportSorting: "supportSorting", supportSortingFields: "supportSortingFields", supportResizing: "supportResizing", parentScroll: "parentScroll", disabled: "disabled", lockEvents: "lockEvents", lockItemInnerEvents: "lockItemInnerEvents", printMode: "printMode", isReport: "isReport", zebraStripes: "zebraStripes", totalsRow: "totalsRow", pagerType: "pagerType", pageSize: "pageSize", showPageSizeSelector: "showPageSizeSelector", pageSizeOptions: "pageSizeOptions", showFirstLastButtons: "showFirstLastButtons", pageIndex: "pageIndex", bufferAmount: "bufferAmount", scrollAnimationTime: "scrollAnimationTime", scrollDebounceTime: "scrollDebounceTime", scrollThrottlingTime: "scrollThrottlingTime", SEPARATOR: "SEPARATOR", useAsWebComponent: "useAsWebComponent" }, outputs: { itemClick: "itemClick", fieldClick: "fieldClick", valueChange: "valueChange", sortingChange: "sortingChange", selectedItemsChange: "selectedItemsChange", selectedItemChange: "selectedItemChange", selectAllClick: "selectAllClick", listLoad: "listLoad", loadItems: "loadItems", loadPage: "loadPage", startIndexChange: "startIndexChange" }, host: { listeners: { "window:resize": "onWinResize($event)" } }, viewQueries: [{ propertyName: "listContainerResizableElementRef", first: true, predicate: ["listContainerResizable"], descendants: true, read: ElementRef }, { propertyName: "virtualScroller", first: true, predicate: VirtualScrollerComponent, descendants: true }, { propertyName: "selectAllCB", first: true, predicate: ["selectAllCB"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"totalRows == 0\">\n <ng-container *ngIf=\"noDataFoundMsg; then noDataMsgInputBlock; else noDataMsgDefaultBlock\"></ng-container>\n <ng-template #noDataMsgInputBlock>\n <div class=\"pep-border-bottom\">\n <p class=\"title-xl no-data\">\n {{ noDataFoundMsg }}\n </p>\n </div>\n </ng-template>\n <ng-template #noDataMsgDefaultBlock>\n <div class=\"pep-border-bottom\">\n <p class=\"title-xl no-data\">\n {{ 'LIST.NO_DATA_FOUND' | translate}}\n </p>\n </div>\n <div class=\"no-data-suggestions\">\n <p class=\"suggestions-title title-lg\">\n {{ 'LIST.NO_DATA_FOUND_SUGGESTIONS_TITLE' | translate}}\n </p>\n <ul class=\"suggestions-list body-lg\" [innerHtml]=\"'LIST.NO_DATA_FOUND_SUGGESTIONS_LIST' | translate\"></ul>\n </div>\n </ng-template>\n</ng-container>\n<ng-container *ngIf=\"totalRows > 0\">\n <div class=\"list-container\">\n <div #listContainerResizable class=\"list-container-resizable\">\n <ng-container *ngTemplateOutlet=\"tableHeader\"></ng-container>\n\n <!-- (vsChildRectChange)=\"onChildRectChange($event)\" -->\n <virtual-scroller #scroller [items]=\"pagerType === 'pages' ? currentPageItems : items\"\n [scrollDebounceTime]=\"scrollDebounceTime\" [scrollThrottlingTime]=\"scrollThrottlingTime\"\n [bufferAmount]=\"printMode ? totalRows : bufferAmount\" [parentScroll]=\"parentScroll\" [disable]=\"loadingItemsFromApi\"\n class=\"virtual-scroller\" [ngClass]=\"{ 'table-body': isTable, 'cards-body': !isTable }\"\n (vsChange)=\"onVirtualScrollerChange($event)\" >\n <ng-container *ngFor=\"let item of scroller.viewPortItems; let index = index; let isFirst = first;\">\n <ng-container *ngTemplateOutlet=\"listData; context: {item: item, index:index}\"></ng-container>\n </ng-container>\n </virtual-scroller>\n \n <ng-container *ngTemplateOutlet=\"tableTotal\"></ng-container>\n </div>\n </div>\n <pep-list-pager *ngIf=\"pagerType === 'pages'\" class=\" list-pager\" [disabled]=\"loadingItemsFromApi\"\n [length]=\"totalRows\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\" [showPageSizeSelector]=\"showPageSizeSelector\" [pageSizeOptions]=\"pageSizeOptions\" [showFirstLastButtons]=\"showFirstLastButtons\" (pagerChange)=\"onPagerChange($event)\">\n </pep-list-pager>\n</ng-container>\n\n<ng-template #listData let-item=\"item\" let-index=\"index\">\n <ng-container *ngIf=\"isTable\">\n <!-- getIsItemSelected(item) -> item | isItemSelected: selectionTypeForActions : selectedItemId : isAllSelected : selectedItems : unSelectedItems -->\n <div class=\"table-row\" (mouseenter)=\"onTableRowMouseEnter($event, item?.UID, item?.Type)\" (keydown)=\"onTabKeydown($event, item?.UID, item?.Type)\"\n (mouseleave)=\"onTableRowMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n 'compact-view': tableViewType === 'compact',\n even: zebraStripes && index % 2 !== 0,\n selected: getIsItemSelected(item),\n highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId}\" [ngStyle]=\"{ visibility: !loadingItemsFromApi || item ? 'visible' : 'hidden' }\">\n <fieldset class=\"table-row-fieldset\" [ngStyle]=\"{ 'background-color': item?.BackgroundColor }\">\n <mat-checkbox *ngIf=\"selectionTypeForActions == 'multi'\" type=\"checkbox\"\n class=\"pull-left flip row-selection\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n [disabled]=\"false && getisItemDisabled(item)\" [ngStyle]=\"{\n visibility: !deviceHasMouse ||\n item?.UID + SEPARATOR + item?.Type === hoveredItemId || isAllSelected || selectedItems.size > 0 ? 'visible' : 'hidden'\n }\" [checked]=\"getIsItemSelected(item)\"\n (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n </mat-checkbox>\n <mat-radio-button *ngIf=\"selectionTypeForActions == 'single'\" name=\"selection\"\n class=\"pull-left flip row-selection pep-radio-button\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n [disabled]=\"getisItemDisabled(item)\"\n [checked]=\"getIsItemSelected(item)\"\n (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n </mat-radio-button>\n <pep-form [layoutType]=\"'table'\" [checkForChanges]=\"checkForChanges\" [layout]=\"layout\"\n [firstFieldAsLink]=\"firstFieldAsLink\" [data]=\"item\" [canEditObject]=\"!disabled\"\n [lockEvents]=\"lockItemInnerEvents || printMode\" [isReport]=\"isReport\" [isActive]=\"\n (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\n item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\n \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\n (click)=\"itemClicked($event, item)\">\n </pep-form>\n </fieldset>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!isTable\">\n <div (mouseenter)=\"onCardMouseEnter($event, item?.UID, item?.Type)\"\n (mouseleave)=\"onCardMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n selected: getIsItemSelected(item),\n highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId,\n 'line-view': viewType === 'lines',\n 'card-view': viewType === 'cards',\n 'small-card': cardSize === 'sm'\n }\" class=\"pull-left flip\"\n [ngStyle]=\"{ height: calculatedObjectHeight, visibility: !loadingItemsFromApi || item ? 'visible' : 'hidden' }\">\n <mat-checkbox *ngIf=\"showCardSelection\" class=\"pull-left flip card-selection\"\n [disabled]=\"getisItemDisabled(item)\" [checked]=\"getIsItemSelected(item)\"\n (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n </mat-checkbox>\n <pep-form [layoutType]=\"'card'\" [firstFieldAsLink]=\"firstFieldAsLink\" [checkForChanges]=\"checkForChanges\"\n [layout]=\"layout\" [data]=\"item\" [canEditObject]=\"!disabled\"\n [lockEvents]=\"lockItemInnerEvents || printMode\" [isActive]=\"\n (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\n item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\n \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\n (click)=\"itemClicked($event, item)\">\n </pep-form>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableHeader>\n <div *ngIf=\"isTable\" class=\"table-header\" (mouseup)=\"onListResizeEnd($event)\"\n (mouseenter)=\"onListHeaderMouseEnter($event)\" (mouseleave)=\"onListHeaderMouseLeave($event)\"\n (mousemove)=\"onListResize($event)\">\n\n <div class=\"table-header-padding-top\"></div>\n <fieldset class=\"table-header-fieldset\">\n <mat-checkbox *ngIf=\"selectionTypeForActions !== 'none'\" #selectAllCB class=\"pull-left flip row-selection\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n type=\"checkbox\" [ngStyle]=\"{\n visibility:\n selectionTypeForActions == 'single' || \n (selectionTypeForActions == 'multi' && hideAllSelectionInMulti) ? 'hidden' : 'visible'\n }\"\n [indeterminate]=\"isAllSelected ? unSelectedItems.size > 0 && unSelectedItems.size < totalRows : (selectedItems.size > 0 && !getIsAllSelectedForActions())\"\n [disabled]=\"disabled || selectionTypeForActions === 'single'\" [checked]=\"getIsAllSelectedForActions()\"\n (change)=\"selectAllItemsForActions($event)\"></mat-checkbox>\n <fieldset>\n <div *ngFor=\"let field of layout?.ControlFields; let j = index\" class=\"header-column pull-left flip\"\n [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\" [ngClass]=\"{\n 'compact-view': tableViewType === 'compact',\n 'support-sorting': isSortableColumn(field.ApiName),\n 'has-sorting': field.ApiName === sortBy,\n 'is-resizing': field.ApiName === pressedColumn,\n 'is-first': j === 0 && selectionTypeForActions !== 'multi',\n 'is-last': j === layout?.ControlFields?.length - 1\n }\"\n (click)=\"isSortableColumn(field.ApiName) ? (onListSortingChange(field.ApiName, sortBy !== null && sortBy != field.ApiName ? true : !isAsc, $event)) : false\">\n\n <label id=\"{{ field.ApiName }}\"\n class=\"header-label body-sm pull-left flip text-align-{{ field.Layout.XAlignment }}\"\n title=\"{{ field.Title }}\">\n <span *ngIf=\"field.Mandatory\" class=\"mandatory\">\n <pep-icon name=\"system_must\"></pep-icon>\n </span>\n {{ field.Title != '' ? field.Title : ' '}}\n </label>\n\n <div *ngIf=\"supportResizing\" class=\"resize-box pull-right flip\"\n (mousedown)=\"onListResizeStart($event, field.ApiName, j)\">\n <div class=\"splitter\"></div>\n </div>\n\n <div *ngIf=\"isSortableColumn(field.ApiName)\" class=\"sorting-box pull-left flip\"\n [ngClass]=\"{ 'has-sorting': field.ApiName === sortBy }\">\n <mat-icon *ngIf=\"field.ApiName !== sortBy\">\n <pep-icon name=\"arrow_either\" class=\"asc\"></pep-icon>\n </mat-icon>\n <ng-container *ngIf=\"field.ApiName === sortBy\">\n <mat-icon *ngIf=\"!isAsc\" [ngClass]=\"{ 'sort-by': field.ApiName === sortBy && isAsc }\"\n title=\"{{ 'LIST.SORT_ASC' | translate }}\">\n <pep-icon name=\"arrow_up\" class=\"asc\"></pep-icon>\n </mat-icon>\n <mat-icon *ngIf=\"isAsc\" [ngClass]=\"{ 'sort-by': field.ApiName === sortBy && !isAsc }\"\n title=\"{{ 'LIST.SORT_DESC' | translate }}\">\n <pep-icon name=\"arrow_down\" class=\"desc\"></pep-icon>\n </mat-icon>\n </ng-container>\n </div>\n </div>\n </fieldset>\n </fieldset>\n </div>\n</ng-template>\n\n<ng-template #tableTotal>\n <div *ngIf=\"isTable && totalsRow?.length > 0 && totalsRow.length <= layout?.ControlFields.length\"\n class=\"table-total\">\n <fieldset class=\"table-header-fieldset\">\n <div *ngFor=\"let field of layout?.ControlFields; let j = index\" class=\"total-column pull-left flip\"\n [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\">\n <label class=\"total-label body-sm text-align-{{ field.Layout.XAlignment }}\">\n {{ totalsRow[j] }}\n </label>\n </div>\n </fieldset>\n </div>\n</ng-template>", styles: [":host{width:100%;height:inherit;display:flex;flex-direction:column}:host .list-container{display:flex;flex-direction:column;height:inherit;width:100%;overflow:auto}:host .list-container .list-container-resizable{display:flex;flex-direction:column;height:inherit}.no-data{margin:var(--pep-spacing-2xl, 2rem) 0}.no-data-suggestions .suggestions-title{margin:var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem)}.no-data-suggestions .suggestions-list{margin:0;padding:0;padding-inline-start:var(--pep-spacing-2xl, 2rem)}.virtual-scroller{min-height:5rem;height:inherit}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$1.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i7$1.PepFormComponent, selector: "pep-form", inputs: ["isInternal", "isReport", "layout", "lockEvents", "canEditObject", "data", "lockFields", "isActive", "layoutType", "objectId", "parentId", "searchCode", "showTitle", "firstFieldAsLink", "checkForChanges"], outputs: ["valueChange", "formValidationChange", "fieldClick", "internalFormFieldClick", "internalFormFieldChange"] }, { kind: "component", type: VirtualScrollerComponent, selector: "virtual-scroller,[virtualScroller]", inputs: ["disable", "executeRefreshOutsideAngularZone", "enableUnequalChildrenSizes", "RTL", "useMarginInsteadOfTranslate", "modifyOverflowStyleOfParentScroll", "stripedTable", "scrollbarWidth", "scrollbarHeight", "childWidth", "childHeight", "ssrChildWidth", "ssrChildHeight", "ssrViewportWidth", "ssrViewportHeight", "bufferAmount", "scrollAnimationTime", "resizeBypassRefreshThreshold", "scrollThrottlingTime", "scrollDebounceTime", "checkResizeInterval", "items", "compareItems", "horizontal", "parentScroll"], outputs: ["vsChildRectChange", "vsUpdate", "vsChange", "vsStart", "vsEnd"], exportAs: ["virtualScroller"] }, { kind: "component", type: PepListPagerComponent, selector: "pep-list-pager", inputs: ["disabled", "showPageSizeSelector", "showFirstLastButtons", "pageSizeOptions", "pageIndex", "length", "pageSize"], outputs: ["pagerChange"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
|
|
2545
2600
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListComponent, decorators: [{
|
|
2546
2601
|
type: Component,
|
|
2547
2602
|
args: [{ selector: 'pep-list', host: {
|
|
2548
2603
|
'(window:resize)': 'onWinResize($event)',
|
|
2549
|
-
}, template: "<ng-container *ngIf=\"totalRows == 0\">\n <ng-container *ngIf=\"noDataFoundMsg; then noDataMsgInputBlock; else noDataMsgDefaultBlock\"></ng-container>\n <ng-template #noDataMsgInputBlock>\n <div class=\"pep-border-bottom\">\n <p class=\"title-xl no-data\">\n {{ noDataFoundMsg }}\n </p>\n </div>\n </ng-template>\n <ng-template #noDataMsgDefaultBlock>\n <div class=\"pep-border-bottom\">\n <p class=\"title-xl no-data\">\n {{ 'LIST.NO_DATA_FOUND' | translate}}\n </p>\n </div>\n <div class=\"no-data-suggestions\">\n <p class=\"suggestions-title title-lg\">\n {{ 'LIST.NO_DATA_FOUND_SUGGESTIONS_TITLE' | translate}}\n </p>\n <ul class=\"suggestions-list body-lg\" [innerHtml]=\"'LIST.NO_DATA_FOUND_SUGGESTIONS_LIST' | translate\"></ul>\n </div>\n </ng-template>\n</ng-container>\n<ng-container *ngIf=\"totalRows > 0\">\n <div class=\"list-container\">\n <div #listContainerResizable class=\"list-container-resizable\">\n <ng-container *ngTemplateOutlet=\"tableHeader\"></ng-container>\n\n <!-- (vsChildRectChange)=\"onChildRectChange($event)\" -->\n <virtual-scroller #scroller [items]=\"pagerType === 'pages' ? currentPageItems : items\"\n [scrollDebounceTime]=\"scrollDebounceTime\" [scrollThrottlingTime]=\"scrollThrottlingTime\"\n [bufferAmount]=\"printMode ? totalRows : bufferAmount\" [parentScroll]=\"parentScroll\" [disable]=\"loadingItemsFromApi\"\n class=\"virtual-scroller\" [ngClass]=\"{ 'table-body': isTable, 'cards-body': !isTable }\"\n (vsChange)=\"onVirtualScrollerChange($event)\" >\n <ng-container *ngFor=\"let item of scroller.viewPortItems; let index = index; let isFirst = first;\">\n <ng-container *ngTemplateOutlet=\"listData; context: {item: item, index:index}\"></ng-container>\n </ng-container>\n </virtual-scroller>\n \n <ng-container *ngTemplateOutlet=\"tableTotal\"></ng-container>\n </div>\n </div>\n <pep-list-pager *ngIf=\"pagerType === 'pages'\" class=\" list-pager\" [disabled]=\"loadingItemsFromApi\"\n [length]=\"totalRows\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\" (pagerChange)=\"onPagerChange($event)\">\n </pep-list-pager>\n</ng-container>\n\n<ng-template #listData let-item=\"item\" let-index=\"index\">\n <ng-container *ngIf=\"isTable\">\n <!-- getIsItemSelected(item) -> item | isItemSelected: selectionTypeForActions : selectedItemId : isAllSelected : selectedItems : unSelectedItems -->\n <div class=\"table-row\" (mouseenter)=\"onTableRowMouseEnter($event, item?.UID, item?.Type)\" (keydown)=\"onTabKeydown($event, item?.UID, item?.Type)\"\n (mouseleave)=\"onTableRowMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n 'compact-view': tableViewType === 'compact',\n even: zebraStripes && index % 2 !== 0,\n selected: getIsItemSelected(item),\n highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId}\" [ngStyle]=\"{ visibility: !loadingItemsFromApi || item ? 'visible' : 'hidden' }\">\n <fieldset class=\"table-row-fieldset\" [ngStyle]=\"{ 'background-color': item?.BackgroundColor }\">\n <mat-checkbox *ngIf=\"selectionTypeForActions == 'multi'\" type=\"checkbox\"\n class=\"pull-left flip row-selection\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n [disabled]=\"false && getisItemDisabled(item)\" [ngStyle]=\"{\n visibility: !deviceHasMouse ||\n item?.UID + SEPARATOR + item?.Type === hoveredItemId || isAllSelected || selectedItems.size > 0 ? 'visible' : 'hidden'\n }\" [checked]=\"getIsItemSelected(item)\"\n (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n </mat-checkbox>\n <mat-radio-button *ngIf=\"selectionTypeForActions == 'single'\" name=\"selection\"\n class=\"pull-left flip row-selection pep-radio-button\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n [disabled]=\"getisItemDisabled(item)\"\n [checked]=\"getIsItemSelected(item)\"\n (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n </mat-radio-button>\n <pep-form [layoutType]=\"'table'\" [checkForChanges]=\"checkForChanges\" [layout]=\"layout\"\n [firstFieldAsLink]=\"firstFieldAsLink\" [data]=\"item\" [canEditObject]=\"!disabled\"\n [lockEvents]=\"lockItemInnerEvents || printMode\" [isReport]=\"isReport\" [isActive]=\"\n (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\n item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\n \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\n (click)=\"itemClicked($event, item)\">\n </pep-form>\n </fieldset>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!isTable\">\n <div (mouseenter)=\"onCardMouseEnter($event, item?.UID, item?.Type)\"\n (mouseleave)=\"onCardMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n selected: getIsItemSelected(item),\n highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId,\n 'line-view': viewType === 'lines',\n 'card-view': viewType === 'cards',\n 'small-card': cardSize === 'sm'\n }\" class=\"pull-left flip\"\n [ngStyle]=\"{ height: calculatedObjectHeight, visibility: !loadingItemsFromApi || item ? 'visible' : 'hidden' }\">\n <mat-checkbox *ngIf=\"showCardSelection\" class=\"pull-left flip card-selection\"\n [disabled]=\"getisItemDisabled(item)\" [checked]=\"getIsItemSelected(item)\"\n (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n </mat-checkbox>\n <pep-form [layoutType]=\"'card'\" [firstFieldAsLink]=\"firstFieldAsLink\" [checkForChanges]=\"checkForChanges\"\n [layout]=\"layout\" [data]=\"item\" [canEditObject]=\"!disabled\"\n [lockEvents]=\"lockItemInnerEvents || printMode\" [isActive]=\"\n (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\n item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\n \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\n (click)=\"itemClicked($event, item)\">\n </pep-form>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableHeader>\n <div *ngIf=\"isTable\" class=\"table-header\" (mouseup)=\"onListResizeEnd($event)\"\n (mouseenter)=\"onListHeaderMouseEnter($event)\" (mouseleave)=\"onListHeaderMouseLeave($event)\"\n (mousemove)=\"onListResize($event)\">\n\n <div class=\"table-header-padding-top\"></div>\n <fieldset class=\"table-header-fieldset\">\n <mat-checkbox *ngIf=\"selectionTypeForActions !== 'none'\" #selectAllCB class=\"pull-left flip row-selection\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n type=\"checkbox\" [ngStyle]=\"{\n visibility:\n selectionTypeForActions == 'single' || \n (selectionTypeForActions == 'multi' && hideAllSelectionInMulti) ? 'hidden' : 'visible'\n }\"\n [indeterminate]=\"isAllSelected ? unSelectedItems.size > 0 && unSelectedItems.size < totalRows : (selectedItems.size > 0 && !getIsAllSelectedForActions())\"\n [disabled]=\"disabled || selectionTypeForActions === 'single'\" [checked]=\"getIsAllSelectedForActions()\"\n (change)=\"selectAllItemsForActions($event)\"></mat-checkbox>\n <fieldset>\n <div *ngFor=\"let field of layout?.ControlFields; let j = index\" class=\"header-column pull-left flip\"\n [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\" [ngClass]=\"{\n 'compact-view': tableViewType === 'compact',\n 'support-sorting': isSortableColumn(field.ApiName),\n 'has-sorting': field.ApiName === sortBy,\n 'is-resizing': field.ApiName === pressedColumn,\n 'is-first': j === 0 && selectionTypeForActions !== 'multi',\n 'is-last': j === layout?.ControlFields?.length - 1\n }\"\n (click)=\"isSortableColumn(field.ApiName) ? (onListSortingChange(field.ApiName, sortBy !== null && sortBy != field.ApiName ? true : !isAsc, $event)) : false\">\n\n <label id=\"{{ field.ApiName }}\"\n class=\"header-label body-sm pull-left flip text-align-{{ field.Layout.XAlignment }}\"\n title=\"{{ field.Title }}\">\n <span *ngIf=\"field.Mandatory\" class=\"mandatory\">\n <pep-icon name=\"system_must\"></pep-icon>\n </span>\n {{ field.Title != '' ? field.Title : ' '}}\n </label>\n\n <div *ngIf=\"supportResizing\" class=\"resize-box pull-right flip\"\n (mousedown)=\"onListResizeStart($event, field.ApiName, j)\">\n <div class=\"splitter\"></div>\n </div>\n\n <div *ngIf=\"isSortableColumn(field.ApiName)\" class=\"sorting-box pull-left flip\"\n [ngClass]=\"{ 'has-sorting': field.ApiName === sortBy }\">\n <mat-icon *ngIf=\"field.ApiName !== sortBy\">\n <pep-icon name=\"arrow_either\" class=\"asc\"></pep-icon>\n </mat-icon>\n <ng-container *ngIf=\"field.ApiName === sortBy\">\n <mat-icon *ngIf=\"!isAsc\" [ngClass]=\"{ 'sort-by': field.ApiName === sortBy && isAsc }\"\n title=\"{{ 'LIST.SORT_ASC' | translate }}\">\n <pep-icon name=\"arrow_up\" class=\"asc\"></pep-icon>\n </mat-icon>\n <mat-icon *ngIf=\"isAsc\" [ngClass]=\"{ 'sort-by': field.ApiName === sortBy && !isAsc }\"\n title=\"{{ 'LIST.SORT_DESC' | translate }}\">\n <pep-icon name=\"arrow_down\" class=\"desc\"></pep-icon>\n </mat-icon>\n </ng-container>\n </div>\n </div>\n </fieldset>\n </fieldset>\n </div>\n</ng-template>\n\n<ng-template #tableTotal>\n <div *ngIf=\"isTable && totalsRow?.length > 0 && totalsRow.length <= layout?.ControlFields.length\"\n class=\"table-total\">\n <fieldset class=\"table-header-fieldset\">\n <div *ngFor=\"let field of layout?.ControlFields; let j = index\" class=\"total-column pull-left flip\"\n [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\">\n <label class=\"total-label body-sm text-align-{{ field.Layout.XAlignment }}\">\n {{ totalsRow[j] }}\n </label>\n </div>\n </fieldset>\n </div>\n</ng-template>", styles: [":host{width:100%;height:inherit;display:flex;flex-direction:column}:host .list-container{display:flex;flex-direction:column;height:inherit;width:100%;overflow:auto}:host .list-container .list-container-resizable{display:flex;flex-direction:column;height:inherit}.no-data{margin:var(--pep-spacing-2xl, 2rem) 0}.no-data-suggestions .suggestions-title{margin:var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem)}.no-data-suggestions .suggestions-list{margin:0;padding:0;padding-inline-start:var(--pep-spacing-2xl, 2rem)}.virtual-scroller{min-height:5rem;height:inherit}\n"] }]
|
|
2604
|
+
}, template: "<ng-container *ngIf=\"totalRows == 0\">\n <ng-container *ngIf=\"noDataFoundMsg; then noDataMsgInputBlock; else noDataMsgDefaultBlock\"></ng-container>\n <ng-template #noDataMsgInputBlock>\n <div class=\"pep-border-bottom\">\n <p class=\"title-xl no-data\">\n {{ noDataFoundMsg }}\n </p>\n </div>\n </ng-template>\n <ng-template #noDataMsgDefaultBlock>\n <div class=\"pep-border-bottom\">\n <p class=\"title-xl no-data\">\n {{ 'LIST.NO_DATA_FOUND' | translate}}\n </p>\n </div>\n <div class=\"no-data-suggestions\">\n <p class=\"suggestions-title title-lg\">\n {{ 'LIST.NO_DATA_FOUND_SUGGESTIONS_TITLE' | translate}}\n </p>\n <ul class=\"suggestions-list body-lg\" [innerHtml]=\"'LIST.NO_DATA_FOUND_SUGGESTIONS_LIST' | translate\"></ul>\n </div>\n </ng-template>\n</ng-container>\n<ng-container *ngIf=\"totalRows > 0\">\n <div class=\"list-container\">\n <div #listContainerResizable class=\"list-container-resizable\">\n <ng-container *ngTemplateOutlet=\"tableHeader\"></ng-container>\n\n <!-- (vsChildRectChange)=\"onChildRectChange($event)\" -->\n <virtual-scroller #scroller [items]=\"pagerType === 'pages' ? currentPageItems : items\"\n [scrollDebounceTime]=\"scrollDebounceTime\" [scrollThrottlingTime]=\"scrollThrottlingTime\"\n [bufferAmount]=\"printMode ? totalRows : bufferAmount\" [parentScroll]=\"parentScroll\" [disable]=\"loadingItemsFromApi\"\n class=\"virtual-scroller\" [ngClass]=\"{ 'table-body': isTable, 'cards-body': !isTable }\"\n (vsChange)=\"onVirtualScrollerChange($event)\" >\n <ng-container *ngFor=\"let item of scroller.viewPortItems; let index = index; let isFirst = first;\">\n <ng-container *ngTemplateOutlet=\"listData; context: {item: item, index:index}\"></ng-container>\n </ng-container>\n </virtual-scroller>\n \n <ng-container *ngTemplateOutlet=\"tableTotal\"></ng-container>\n </div>\n </div>\n <pep-list-pager *ngIf=\"pagerType === 'pages'\" class=\" list-pager\" [disabled]=\"loadingItemsFromApi\"\n [length]=\"totalRows\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\" [showPageSizeSelector]=\"showPageSizeSelector\" [pageSizeOptions]=\"pageSizeOptions\" [showFirstLastButtons]=\"showFirstLastButtons\" (pagerChange)=\"onPagerChange($event)\">\n </pep-list-pager>\n</ng-container>\n\n<ng-template #listData let-item=\"item\" let-index=\"index\">\n <ng-container *ngIf=\"isTable\">\n <!-- getIsItemSelected(item) -> item | isItemSelected: selectionTypeForActions : selectedItemId : isAllSelected : selectedItems : unSelectedItems -->\n <div class=\"table-row\" (mouseenter)=\"onTableRowMouseEnter($event, item?.UID, item?.Type)\" (keydown)=\"onTabKeydown($event, item?.UID, item?.Type)\"\n (mouseleave)=\"onTableRowMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n 'compact-view': tableViewType === 'compact',\n even: zebraStripes && index % 2 !== 0,\n selected: getIsItemSelected(item),\n highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId}\" [ngStyle]=\"{ visibility: !loadingItemsFromApi || item ? 'visible' : 'hidden' }\">\n <fieldset class=\"table-row-fieldset\" [ngStyle]=\"{ 'background-color': item?.BackgroundColor }\">\n <mat-checkbox *ngIf=\"selectionTypeForActions == 'multi'\" type=\"checkbox\"\n class=\"pull-left flip row-selection\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n [disabled]=\"false && getisItemDisabled(item)\" [ngStyle]=\"{\n visibility: !deviceHasMouse ||\n item?.UID + SEPARATOR + item?.Type === hoveredItemId || isAllSelected || selectedItems.size > 0 ? 'visible' : 'hidden'\n }\" [checked]=\"getIsItemSelected(item)\"\n (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n </mat-checkbox>\n <mat-radio-button *ngIf=\"selectionTypeForActions == 'single'\" name=\"selection\"\n class=\"pull-left flip row-selection pep-radio-button\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n [disabled]=\"getisItemDisabled(item)\"\n [checked]=\"getIsItemSelected(item)\"\n (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n </mat-radio-button>\n <pep-form [layoutType]=\"'table'\" [checkForChanges]=\"checkForChanges\" [layout]=\"layout\"\n [firstFieldAsLink]=\"firstFieldAsLink\" [data]=\"item\" [canEditObject]=\"!disabled\"\n [lockEvents]=\"lockItemInnerEvents || printMode\" [isReport]=\"isReport\" [isActive]=\"\n (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\n item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\n \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\n (click)=\"itemClicked($event, item)\">\n </pep-form>\n </fieldset>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!isTable\">\n <div (mouseenter)=\"onCardMouseEnter($event, item?.UID, item?.Type)\"\n (mouseleave)=\"onCardMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n selected: getIsItemSelected(item),\n highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId,\n 'line-view': viewType === 'lines',\n 'card-view': viewType === 'cards',\n 'small-card': cardSize === 'sm'\n }\" class=\"pull-left flip\"\n [ngStyle]=\"{ height: calculatedObjectHeight, visibility: !loadingItemsFromApi || item ? 'visible' : 'hidden' }\">\n <mat-checkbox *ngIf=\"showCardSelection\" class=\"pull-left flip card-selection\"\n [disabled]=\"getisItemDisabled(item)\" [checked]=\"getIsItemSelected(item)\"\n (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n </mat-checkbox>\n <pep-form [layoutType]=\"'card'\" [firstFieldAsLink]=\"firstFieldAsLink\" [checkForChanges]=\"checkForChanges\"\n [layout]=\"layout\" [data]=\"item\" [canEditObject]=\"!disabled\"\n [lockEvents]=\"lockItemInnerEvents || printMode\" [isActive]=\"\n (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\n item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\n \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\n (click)=\"itemClicked($event, item)\">\n </pep-form>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #tableHeader>\n <div *ngIf=\"isTable\" class=\"table-header\" (mouseup)=\"onListResizeEnd($event)\"\n (mouseenter)=\"onListHeaderMouseEnter($event)\" (mouseleave)=\"onListHeaderMouseLeave($event)\"\n (mousemove)=\"onListResize($event)\">\n\n <div class=\"table-header-padding-top\"></div>\n <fieldset class=\"table-header-fieldset\">\n <mat-checkbox *ngIf=\"selectionTypeForActions !== 'none'\" #selectAllCB class=\"pull-left flip row-selection\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n type=\"checkbox\" [ngStyle]=\"{\n visibility:\n selectionTypeForActions == 'single' || \n (selectionTypeForActions == 'multi' && hideAllSelectionInMulti) ? 'hidden' : 'visible'\n }\"\n [indeterminate]=\"isAllSelected ? unSelectedItems.size > 0 && unSelectedItems.size < totalRows : (selectedItems.size > 0 && !getIsAllSelectedForActions())\"\n [disabled]=\"disabled || selectionTypeForActions === 'single'\" [checked]=\"getIsAllSelectedForActions()\"\n (change)=\"selectAllItemsForActions($event)\"></mat-checkbox>\n <fieldset>\n <div *ngFor=\"let field of layout?.ControlFields; let j = index\" class=\"header-column pull-left flip\"\n [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\" [ngClass]=\"{\n 'compact-view': tableViewType === 'compact',\n 'support-sorting': isSortableColumn(field.ApiName),\n 'has-sorting': field.ApiName === sortBy,\n 'is-resizing': field.ApiName === pressedColumn,\n 'is-first': j === 0 && selectionTypeForActions !== 'multi',\n 'is-last': j === layout?.ControlFields?.length - 1\n }\"\n (click)=\"isSortableColumn(field.ApiName) ? (onListSortingChange(field.ApiName, sortBy !== null && sortBy != field.ApiName ? true : !isAsc, $event)) : false\">\n\n <label id=\"{{ field.ApiName }}\"\n class=\"header-label body-sm pull-left flip text-align-{{ field.Layout.XAlignment }}\"\n title=\"{{ field.Title }}\">\n <span *ngIf=\"field.Mandatory\" class=\"mandatory\">\n <pep-icon name=\"system_must\"></pep-icon>\n </span>\n {{ field.Title != '' ? field.Title : ' '}}\n </label>\n\n <div *ngIf=\"supportResizing\" class=\"resize-box pull-right flip\"\n (mousedown)=\"onListResizeStart($event, field.ApiName, j)\">\n <div class=\"splitter\"></div>\n </div>\n\n <div *ngIf=\"isSortableColumn(field.ApiName)\" class=\"sorting-box pull-left flip\"\n [ngClass]=\"{ 'has-sorting': field.ApiName === sortBy }\">\n <mat-icon *ngIf=\"field.ApiName !== sortBy\">\n <pep-icon name=\"arrow_either\" class=\"asc\"></pep-icon>\n </mat-icon>\n <ng-container *ngIf=\"field.ApiName === sortBy\">\n <mat-icon *ngIf=\"!isAsc\" [ngClass]=\"{ 'sort-by': field.ApiName === sortBy && isAsc }\"\n title=\"{{ 'LIST.SORT_ASC' | translate }}\">\n <pep-icon name=\"arrow_up\" class=\"asc\"></pep-icon>\n </mat-icon>\n <mat-icon *ngIf=\"isAsc\" [ngClass]=\"{ 'sort-by': field.ApiName === sortBy && !isAsc }\"\n title=\"{{ 'LIST.SORT_DESC' | translate }}\">\n <pep-icon name=\"arrow_down\" class=\"desc\"></pep-icon>\n </mat-icon>\n </ng-container>\n </div>\n </div>\n </fieldset>\n </fieldset>\n </div>\n</ng-template>\n\n<ng-template #tableTotal>\n <div *ngIf=\"isTable && totalsRow?.length > 0 && totalsRow.length <= layout?.ControlFields.length\"\n class=\"table-total\">\n <fieldset class=\"table-header-fieldset\">\n <div *ngFor=\"let field of layout?.ControlFields; let j = index\" class=\"total-column pull-left flip\"\n [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\">\n <label class=\"total-label body-sm text-align-{{ field.Layout.XAlignment }}\">\n {{ totalsRow[j] }}\n </label>\n </div>\n </fieldset>\n </div>\n</ng-template>", styles: [":host{width:100%;height:inherit;display:flex;flex-direction:column}:host .list-container{display:flex;flex-direction:column;height:inherit;width:100%;overflow:auto}:host .list-container .list-container-resizable{display:flex;flex-direction:column;height:inherit}.no-data{margin:var(--pep-spacing-2xl, 2rem) 0}.no-data-suggestions .suggestions-title{margin:var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem)}.no-data-suggestions .suggestions-list{margin:0;padding:0;padding-inline-start:var(--pep-spacing-2xl, 2rem)}.virtual-scroller{min-height:5rem;height:inherit}\n"] }]
|
|
2550
2605
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.PepLayoutService }, { type: i1.PepSessionService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { listContainerResizableElementRef: [{
|
|
2551
2606
|
type: ViewChild,
|
|
2552
2607
|
args: ['listContainerResizable', { read: ElementRef }]
|
|
@@ -2596,6 +2651,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
2596
2651
|
type: Input
|
|
2597
2652
|
}], pageSize: [{
|
|
2598
2653
|
type: Input
|
|
2654
|
+
}], showPageSizeSelector: [{
|
|
2655
|
+
type: Input
|
|
2656
|
+
}], pageSizeOptions: [{
|
|
2657
|
+
type: Input
|
|
2658
|
+
}], showFirstLastButtons: [{
|
|
2659
|
+
type: Input
|
|
2599
2660
|
}], pageIndex: [{
|
|
2600
2661
|
type: Input
|
|
2601
2662
|
}], bufferAmount: [{
|
|
@@ -2751,7 +2812,7 @@ class PepListCarouselComponent {
|
|
|
2751
2812
|
}
|
|
2752
2813
|
}
|
|
2753
2814
|
PepListCarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListCarouselComponent, deps: [{ token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2754
|
-
PepListCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListCarouselComponent, selector: "pep-list-carousel", inputs: { duration: "duration", layout: "layout", itemsToMove: "itemsToMove", lockItemInnerEvents: "lockItemInnerEvents", hideArrowsInSmallScreen: "hideArrowsInSmallScreen", items: "items", itemSize: "itemSize" }, outputs: { itemClick: "itemClick" }, viewQueries: [{ propertyName: "carousel", first: true, predicate: ["carousel"], descendants: true, read: PepCarouselComponent }], ngImport: i0, template: "<div class=\"carousel-container\">\n <ng-container *ngIf=\"items?.length > 0; then carouselBlock; else emptyBlock\"></ng-container>\n <ng-template #emptyBlock>\n <!-- No items -->\n </ng-template>\n <ng-template #carouselBlock>\n <pep-button *ngIf=\"!(hideArrowsInSmallScreen && screenSize > PepScreenSizeType.SM)\"\n [iconName]=\"'arrow_left_alt'\" [styleType]=\"'regular'\" [disabled]=\"prevDisabled\" (click)=\"moveLeft()\"\n class=\"carousel-arrow start-arrow\">\n </pep-button>\n <pep-carousel #carousel [xWheelEnabled]=\"false\" [snapDuration]=\"duration\"\n (reachesLeftBound)=\"onReachesLeftBound($event)\" (reachesRightBound)=\"onReachesRightBound($event)\">\n <ng-container *ngFor=\"let item of items\">\n <pep-form pepCarouselItem [layout]=\"layout\" [data]=\"item\" [layoutType]=\"'card'\"\n (click)=\"itemClicked(item)\" class=\"card-view \" [lockEvents]=\"lockItemInnerEvents\"\n [ngClass]=\"{ 'x-small-card': itemSize === 'xs', 'small-card': itemSize === 'sm'}\">\n </pep-form>\n </ng-container>\n </pep-carousel>\n <pep-button *ngIf=\"!(hideArrowsInSmallScreen && screenSize > PepScreenSizeType.SM)\"\n [iconName]=\"'arrow_right_alt'\" [styleType]=\"'regular'\" [disabled]=\"nextDisabled\" (click)=\"moveRight()\"\n class=\"carousel-arrow end-arrow\">\n </pep-button>\n </ng-template>\n</div>", styles: [".carousel-container{position:relative;margin:0 calc(var(--pep-spacing-sm, .5rem) * -1);display:grid}.carousel-container .carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:1}.carousel-container .carousel-arrow.start-arrow{left:0}.carousel-container .carousel-arrow.end-arrow{right:0}.carousel-container ::ng-deep .carousel-content .card-view{padding:var(--pep-spacing-sm, .5rem) 0!important}.carousel-container ::ng-deep .carousel-content .card-view:first-child{padding-inline-start:var(--pep-spacing-sm, .5rem)!important}.carousel-container ::ng-deep .carousel-content .card-view:last-child{padding-inline-end:var(--pep-spacing-sm, .5rem)!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i4$2.PepCarouselComponent, selector: "pep-carousel", inputs: ["scrollbarHidden", "disabled", "xDisabled", "yDisabled", "xWheelEnabled", "dragDisabled", "snapDisabled", "snapOffset", "snapDuration"], outputs: ["dsInitialized", "indexChanged", "reachesLeftBound", "reachesRightBound", "snapAnimationFinished", "dragStart", "dragEnd"] }, { kind: "directive", type: i4$2.PepCarouselItemDirective, selector: "[pepCarouselItem]", inputs: ["dragDisabled"] }, { kind: "component", type: i7.PepFormComponent, selector: "pep-form", inputs: ["isInternal", "isReport", "layout", "lockEvents", "canEditObject", "data", "lockFields", "isActive", "layoutType", "objectId", "parentId", "searchCode", "showTitle", "firstFieldAsLink", "checkForChanges"], outputs: ["valueChange", "formValidationChange", "fieldClick", "internalFormFieldClick", "internalFormFieldChange"] }] });
|
|
2815
|
+
PepListCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListCarouselComponent, selector: "pep-list-carousel", inputs: { duration: "duration", layout: "layout", itemsToMove: "itemsToMove", lockItemInnerEvents: "lockItemInnerEvents", hideArrowsInSmallScreen: "hideArrowsInSmallScreen", items: "items", itemSize: "itemSize" }, outputs: { itemClick: "itemClick" }, viewQueries: [{ propertyName: "carousel", first: true, predicate: ["carousel"], descendants: true, read: PepCarouselComponent }], ngImport: i0, template: "<div class=\"carousel-container\">\n <ng-container *ngIf=\"items?.length > 0; then carouselBlock; else emptyBlock\"></ng-container>\n <ng-template #emptyBlock>\n <!-- No items -->\n </ng-template>\n <ng-template #carouselBlock>\n <pep-button *ngIf=\"!(hideArrowsInSmallScreen && screenSize > PepScreenSizeType.SM)\"\n [iconName]=\"'arrow_left_alt'\" [styleType]=\"'regular'\" [disabled]=\"prevDisabled\" (click)=\"moveLeft()\"\n class=\"carousel-arrow start-arrow\">\n </pep-button>\n <pep-carousel #carousel [xWheelEnabled]=\"false\" [snapDuration]=\"duration\"\n (reachesLeftBound)=\"onReachesLeftBound($event)\" (reachesRightBound)=\"onReachesRightBound($event)\">\n <ng-container *ngFor=\"let item of items\">\n <pep-form pepCarouselItem [layout]=\"layout\" [data]=\"item\" [layoutType]=\"'card'\"\n (click)=\"itemClicked(item)\" class=\"card-view \" [lockEvents]=\"lockItemInnerEvents\"\n [ngClass]=\"{ 'x-small-card': itemSize === 'xs', 'small-card': itemSize === 'sm'}\">\n </pep-form>\n </ng-container>\n </pep-carousel>\n <pep-button *ngIf=\"!(hideArrowsInSmallScreen && screenSize > PepScreenSizeType.SM)\"\n [iconName]=\"'arrow_right_alt'\" [styleType]=\"'regular'\" [disabled]=\"nextDisabled\" (click)=\"moveRight()\"\n class=\"carousel-arrow end-arrow\">\n </pep-button>\n </ng-template>\n</div>", styles: [".carousel-container{position:relative;margin:0 calc(var(--pep-spacing-sm, .5rem) * -1);display:grid}.carousel-container .carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:1}.carousel-container .carousel-arrow.start-arrow{left:0}.carousel-container .carousel-arrow.end-arrow{right:0}.carousel-container ::ng-deep .carousel-content .card-view{padding:var(--pep-spacing-sm, .5rem) 0!important}.carousel-container ::ng-deep .carousel-content .card-view:first-child{padding-inline-start:var(--pep-spacing-sm, .5rem)!important}.carousel-container ::ng-deep .carousel-content .card-view:last-child{padding-inline-end:var(--pep-spacing-sm, .5rem)!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i4$2.PepCarouselComponent, selector: "pep-carousel", inputs: ["scrollbarHidden", "disabled", "xDisabled", "yDisabled", "xWheelEnabled", "dragDisabled", "snapDisabled", "snapOffset", "snapDuration"], outputs: ["dsInitialized", "indexChanged", "reachesLeftBound", "reachesRightBound", "snapAnimationFinished", "dragStart", "dragEnd"] }, { kind: "directive", type: i4$2.PepCarouselItemDirective, selector: "[pepCarouselItem]", inputs: ["dragDisabled"] }, { kind: "component", type: i7$1.PepFormComponent, selector: "pep-form", inputs: ["isInternal", "isReport", "layout", "lockEvents", "canEditObject", "data", "lockFields", "isActive", "layoutType", "objectId", "parentId", "searchCode", "showTitle", "firstFieldAsLink", "checkForChanges"], outputs: ["valueChange", "formValidationChange", "fieldClick", "internalFormFieldClick", "internalFormFieldChange"] }] });
|
|
2755
2816
|
PepListCarouselComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListCarouselComponent });
|
|
2756
2817
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListCarouselComponent, decorators: [{
|
|
2757
2818
|
type: Component,
|
|
@@ -3105,6 +3166,7 @@ PepListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
|
|
|
3105
3166
|
PepIconModule,
|
|
3106
3167
|
PepFormModule,
|
|
3107
3168
|
PepMenuModule,
|
|
3169
|
+
PepSelectModule,
|
|
3108
3170
|
PepTextboxModule,
|
|
3109
3171
|
VirtualScrollerModule], exports: [
|
|
3110
3172
|
// PepListOldComponent,
|
|
@@ -3133,6 +3195,7 @@ PepListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
|
|
|
3133
3195
|
PepIconModule,
|
|
3134
3196
|
PepFormModule,
|
|
3135
3197
|
PepMenuModule,
|
|
3198
|
+
PepSelectModule,
|
|
3136
3199
|
PepTextboxModule,
|
|
3137
3200
|
VirtualScrollerModule] });
|
|
3138
3201
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListModule, decorators: [{
|
|
@@ -3155,6 +3218,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
3155
3218
|
PepIconModule,
|
|
3156
3219
|
PepFormModule,
|
|
3157
3220
|
PepMenuModule,
|
|
3221
|
+
PepSelectModule,
|
|
3158
3222
|
PepTextboxModule,
|
|
3159
3223
|
VirtualScrollerModule
|
|
3160
3224
|
],
|