@pepperi-addons/ngx-lib 0.4.0-angular14.12 → 0.4.0-angular14.13
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/core/common/services/utilities.service.mjs +26 -1
- package/esm2020/images-filmstrip/images-filmstrip.component.mjs +3 -91
- package/esm2020/images-filmstrip/images-filmstrip.module.mjs +1 -56
- package/esm2020/plugin/plugin-proxy.component.mjs +2 -2
- package/fesm2015/pepperi-addons-ngx-lib-images-filmstrip.mjs +2 -129
- package/fesm2015/pepperi-addons-ngx-lib-images-filmstrip.mjs.map +1 -1
- package/fesm2015/pepperi-addons-ngx-lib-plugin.mjs +1 -1
- package/fesm2015/pepperi-addons-ngx-lib-plugin.mjs.map +1 -1
- package/fesm2015/pepperi-addons-ngx-lib.mjs +25 -0
- package/fesm2015/pepperi-addons-ngx-lib.mjs.map +1 -1
- package/fesm2020/pepperi-addons-ngx-lib-images-filmstrip.mjs +2 -129
- package/fesm2020/pepperi-addons-ngx-lib-images-filmstrip.mjs.map +1 -1
- package/fesm2020/pepperi-addons-ngx-lib-plugin.mjs +1 -1
- package/fesm2020/pepperi-addons-ngx-lib-plugin.mjs.map +1 -1
- package/fesm2020/pepperi-addons-ngx-lib.mjs +25 -0
- package/fesm2020/pepperi-addons-ngx-lib.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -11,7 +11,6 @@ import { PepButtonModule } from '@pepperi-addons/ngx-lib/button';
|
|
|
11
11
|
import { PepIconModule, pepIconSystemEdit, pepIconSystemClose, pepIconArrowRightAlt, pepIconArrowLeftAlt, } from '@pepperi-addons/ngx-lib/icon';
|
|
12
12
|
import { PepDialogModule } from '@pepperi-addons/ngx-lib/dialog';
|
|
13
13
|
import { GalleryModule } from 'ng-gallery';
|
|
14
|
-
// import { ImageViewerModule } from '@hallysonh/ngx-imageviewer';
|
|
15
14
|
import { PepImagesFilmstripComponent } from './images-filmstrip.component';
|
|
16
15
|
import * as i0 from "@angular/core";
|
|
17
16
|
import * as i1 from "@pepperi-addons/ngx-lib/icon";
|
|
@@ -36,24 +35,6 @@ PepImagesFilmstripModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0"
|
|
|
36
35
|
MatIconModule,
|
|
37
36
|
// External modules
|
|
38
37
|
GalleryModule,
|
|
39
|
-
// ImageViewerModule,
|
|
40
|
-
// ImageViewerModule.forRoot({
|
|
41
|
-
// btnClass: 'default', // The CSS class(es) that will apply to the buttons
|
|
42
|
-
// zoomFactor: 0.1, // The amount that the scale will be increased by
|
|
43
|
-
// containerBackgroundColor: 'transparent', // The color to use for the background. This can provided in hex, or rgb(a).
|
|
44
|
-
// wheelZoom: true, // If true, the mouse wheel can be used to zoom in
|
|
45
|
-
// allowFullscreen: false, // If true, the fullscreen button will be shown, allowing the user to entr fullscreen mode
|
|
46
|
-
// btnIcons: {
|
|
47
|
-
// // The icon classes that will apply to the buttons. By default, font-awesome is used.
|
|
48
|
-
// zoomIn: 'fa fa-plus',
|
|
49
|
-
// zoomOut: 'fa fa-minus',
|
|
50
|
-
// rotateClockwise: 'fa fa-repeat',
|
|
51
|
-
// rotateCounterClockwise: 'fa fa-undo',
|
|
52
|
-
// next: 'fa fa-arrow-right',
|
|
53
|
-
// prev: 'fa fa-arrow-left',
|
|
54
|
-
// fullscreen: 'fa fa-arrows-alt'
|
|
55
|
-
// }
|
|
56
|
-
// }),
|
|
57
38
|
// ngx-lib modules
|
|
58
39
|
PepNgxLibModule,
|
|
59
40
|
PepButtonModule,
|
|
@@ -69,24 +50,6 @@ PepImagesFilmstripModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0"
|
|
|
69
50
|
MatIconModule,
|
|
70
51
|
// External modules
|
|
71
52
|
GalleryModule,
|
|
72
|
-
// ImageViewerModule,
|
|
73
|
-
// ImageViewerModule.forRoot({
|
|
74
|
-
// btnClass: 'default', // The CSS class(es) that will apply to the buttons
|
|
75
|
-
// zoomFactor: 0.1, // The amount that the scale will be increased by
|
|
76
|
-
// containerBackgroundColor: 'transparent', // The color to use for the background. This can provided in hex, or rgb(a).
|
|
77
|
-
// wheelZoom: true, // If true, the mouse wheel can be used to zoom in
|
|
78
|
-
// allowFullscreen: false, // If true, the fullscreen button will be shown, allowing the user to entr fullscreen mode
|
|
79
|
-
// btnIcons: {
|
|
80
|
-
// // The icon classes that will apply to the buttons. By default, font-awesome is used.
|
|
81
|
-
// zoomIn: 'fa fa-plus',
|
|
82
|
-
// zoomOut: 'fa fa-minus',
|
|
83
|
-
// rotateClockwise: 'fa fa-repeat',
|
|
84
|
-
// rotateCounterClockwise: 'fa fa-undo',
|
|
85
|
-
// next: 'fa fa-arrow-right',
|
|
86
|
-
// prev: 'fa fa-arrow-left',
|
|
87
|
-
// fullscreen: 'fa fa-arrows-alt'
|
|
88
|
-
// }
|
|
89
|
-
// }),
|
|
90
53
|
// ngx-lib modules
|
|
91
54
|
PepNgxLibModule,
|
|
92
55
|
PepButtonModule,
|
|
@@ -106,24 +69,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
106
69
|
MatIconModule,
|
|
107
70
|
// External modules
|
|
108
71
|
GalleryModule,
|
|
109
|
-
// ImageViewerModule,
|
|
110
|
-
// ImageViewerModule.forRoot({
|
|
111
|
-
// btnClass: 'default', // The CSS class(es) that will apply to the buttons
|
|
112
|
-
// zoomFactor: 0.1, // The amount that the scale will be increased by
|
|
113
|
-
// containerBackgroundColor: 'transparent', // The color to use for the background. This can provided in hex, or rgb(a).
|
|
114
|
-
// wheelZoom: true, // If true, the mouse wheel can be used to zoom in
|
|
115
|
-
// allowFullscreen: false, // If true, the fullscreen button will be shown, allowing the user to entr fullscreen mode
|
|
116
|
-
// btnIcons: {
|
|
117
|
-
// // The icon classes that will apply to the buttons. By default, font-awesome is used.
|
|
118
|
-
// zoomIn: 'fa fa-plus',
|
|
119
|
-
// zoomOut: 'fa fa-minus',
|
|
120
|
-
// rotateClockwise: 'fa fa-repeat',
|
|
121
|
-
// rotateCounterClockwise: 'fa fa-undo',
|
|
122
|
-
// next: 'fa fa-arrow-right',
|
|
123
|
-
// prev: 'fa fa-arrow-left',
|
|
124
|
-
// fullscreen: 'fa fa-arrows-alt'
|
|
125
|
-
// }
|
|
126
|
-
// }),
|
|
127
72
|
// ngx-lib modules
|
|
128
73
|
PepNgxLibModule,
|
|
129
74
|
PepButtonModule,
|
|
@@ -135,4 +80,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
135
80
|
declarations: [PepImagesFilmstripComponent],
|
|
136
81
|
}]
|
|
137
82
|
}], ctorParameters: function () { return [{ type: i1.PepIconRegistry }]; } });
|
|
138
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
83
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW1hZ2VzLWZpbG1zdHJpcC5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtbGliL2ltYWdlcy1maWxtc3RyaXAvaW1hZ2VzLWZpbG1zdHJpcC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFFckQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3pELE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUMzRCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFFdkQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQzFELE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBQzFFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUNqRSxPQUFPLEVBQ0gsYUFBYSxFQUViLGlCQUFpQixFQUNqQixrQkFBa0IsRUFDbEIsb0JBQW9CLEVBQ3BCLG1CQUFtQixHQUN0QixNQUFNLDhCQUE4QixDQUFDO0FBQ3RDLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUVqRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sWUFBWSxDQUFDO0FBRTNDLE9BQU8sRUFBRSwyQkFBMkIsRUFBRSxNQUFNLDhCQUE4QixDQUFDOzs7QUF1QjNFLE1BQU0sT0FBTyx3QkFBd0I7SUFDakMsWUFBb0IsZUFBZ0M7UUFBaEMsb0JBQWUsR0FBZixlQUFlLENBQWlCO1FBQ2hELElBQUksQ0FBQyxlQUFlLENBQUMsYUFBYSxDQUFDO1lBQy9CLGlCQUFpQjtZQUNqQixrQkFBa0I7WUFDbEIsb0JBQW9CO1lBQ3BCLG1CQUFtQjtTQUN0QixDQUFDLENBQUM7SUFDUCxDQUFDOztxSEFSUSx3QkFBd0I7c0hBQXhCLHdCQUF3QixpQkFGbEIsMkJBQTJCLGFBakJ0QyxZQUFZO1FBQ1osbUJBQW1CO1FBQ25CLG9CQUFvQjtRQUNwQixlQUFlO1FBQ2Ysa0JBQWtCO1FBQ2xCLGVBQWU7UUFDZixhQUFhO1FBQ2IsbUJBQW1CO1FBQ25CLGFBQWE7UUFDYixrQkFBa0I7UUFDbEIsZUFBZTtRQUNmLGVBQWU7UUFDZixhQUFhO1FBQ2IsbUJBQW1CO1FBQ25CLGVBQWUsYUFFVCwyQkFBMkI7c0hBRzVCLHdCQUF3QixZQW5CN0IsWUFBWTtRQUNaLG1CQUFtQjtRQUNuQixvQkFBb0I7UUFDcEIsZUFBZTtRQUNmLGtCQUFrQjtRQUNsQixlQUFlO1FBQ2YsYUFBYTtRQUNiLG1CQUFtQjtRQUNuQixhQUFhO1FBQ2Isa0JBQWtCO1FBQ2xCLGVBQWU7UUFDZixlQUFlO1FBQ2YsYUFBYTtRQUNiLG1CQUFtQjtRQUNuQixlQUFlOzJGQUtWLHdCQUF3QjtrQkFyQnBDLFFBQVE7bUJBQUM7b0JBQ04sT0FBTyxFQUFFO3dCQUNMLFlBQVk7d0JBQ1osbUJBQW1CO3dCQUNuQixvQkFBb0I7d0JBQ3BCLGVBQWU7d0JBQ2Ysa0JBQWtCO3dCQUNsQixlQUFlO3dCQUNmLGFBQWE7d0JBQ2IsbUJBQW1CO3dCQUNuQixhQUFhO3dCQUNiLGtCQUFrQjt3QkFDbEIsZUFBZTt3QkFDZixlQUFlO3dCQUNmLGFBQWE7d0JBQ2IsbUJBQW1CO3dCQUNuQixlQUFlO3FCQUNsQjtvQkFDRCxPQUFPLEVBQUUsQ0FBQywyQkFBMkIsQ0FBQztvQkFDdEMsWUFBWSxFQUFFLENBQUMsMkJBQTJCLENBQUM7aUJBQzlDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBSZWFjdGl2ZUZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG5pbXBvcnQgeyBNYXRDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9jb3JlJztcbmltcG9ydCB7IE1hdEZvcm1GaWVsZE1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2Zvcm0tZmllbGQnO1xuaW1wb3J0IHsgTWF0RGlhbG9nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvZGlhbG9nJztcbmltcG9ydCB7IE1hdEljb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9pY29uJztcblxuaW1wb3J0IHsgUGVwTmd4TGliTW9kdWxlIH0gZnJvbSAnQHBlcHBlcmktYWRkb25zL25neC1saWInO1xuaW1wb3J0IHsgUGVwRmllbGRUaXRsZU1vZHVsZSB9IGZyb20gJ0BwZXBwZXJpLWFkZG9ucy9uZ3gtbGliL2ZpZWxkLXRpdGxlJztcbmltcG9ydCB7IFBlcEJ1dHRvbk1vZHVsZSB9IGZyb20gJ0BwZXBwZXJpLWFkZG9ucy9uZ3gtbGliL2J1dHRvbic7XG5pbXBvcnQge1xuICAgIFBlcEljb25Nb2R1bGUsXG4gICAgUGVwSWNvblJlZ2lzdHJ5LFxuICAgIHBlcEljb25TeXN0ZW1FZGl0LFxuICAgIHBlcEljb25TeXN0ZW1DbG9zZSxcbiAgICBwZXBJY29uQXJyb3dSaWdodEFsdCxcbiAgICBwZXBJY29uQXJyb3dMZWZ0QWx0LFxufSBmcm9tICdAcGVwcGVyaS1hZGRvbnMvbmd4LWxpYi9pY29uJztcbmltcG9ydCB7IFBlcERpYWxvZ01vZHVsZSB9IGZyb20gJ0BwZXBwZXJpLWFkZG9ucy9uZ3gtbGliL2RpYWxvZyc7XG5cbmltcG9ydCB7IEdhbGxlcnlNb2R1bGUgfSBmcm9tICduZy1nYWxsZXJ5JztcblxuaW1wb3J0IHsgUGVwSW1hZ2VzRmlsbXN0cmlwQ29tcG9uZW50IH0gZnJvbSAnLi9pbWFnZXMtZmlsbXN0cmlwLmNvbXBvbmVudCc7XG5cbkBOZ01vZHVsZSh7XG4gICAgaW1wb3J0czogW1xuICAgICAgICBDb21tb25Nb2R1bGUsXG4gICAgICAgIFJlYWN0aXZlRm9ybXNNb2R1bGUsXG4gICAgICAgIC8vIE1hdGVyaWFsIG1vZHVsZXMsXG4gICAgICAgIE1hdENvbW1vbk1vZHVsZSxcbiAgICAgICAgTWF0Rm9ybUZpZWxkTW9kdWxlLFxuICAgICAgICBNYXREaWFsb2dNb2R1bGUsXG4gICAgICAgIE1hdEljb25Nb2R1bGUsXG4gICAgICAgIC8vIEV4dGVybmFsIG1vZHVsZXNcbiAgICAgICAgR2FsbGVyeU1vZHVsZSxcbiAgICAgICAgLy8gbmd4LWxpYiBtb2R1bGVzXG4gICAgICAgIFBlcE5neExpYk1vZHVsZSxcbiAgICAgICAgUGVwQnV0dG9uTW9kdWxlLFxuICAgICAgICBQZXBJY29uTW9kdWxlLFxuICAgICAgICBQZXBGaWVsZFRpdGxlTW9kdWxlLFxuICAgICAgICBQZXBEaWFsb2dNb2R1bGUsXG4gICAgXSxcbiAgICBleHBvcnRzOiBbUGVwSW1hZ2VzRmlsbXN0cmlwQ29tcG9uZW50XSxcbiAgICBkZWNsYXJhdGlvbnM6IFtQZXBJbWFnZXNGaWxtc3RyaXBDb21wb25lbnRdLFxufSlcbmV4cG9ydCBjbGFzcyBQZXBJbWFnZXNGaWxtc3RyaXBNb2R1bGUge1xuICAgIGNvbnN0cnVjdG9yKHByaXZhdGUgcGVwSWNvblJlZ2lzdHJ5OiBQZXBJY29uUmVnaXN0cnkpIHtcbiAgICAgICAgdGhpcy5wZXBJY29uUmVnaXN0cnkucmVnaXN0ZXJJY29ucyhbXG4gICAgICAgICAgICBwZXBJY29uU3lzdGVtRWRpdCxcbiAgICAgICAgICAgIHBlcEljb25TeXN0ZW1DbG9zZSxcbiAgICAgICAgICAgIHBlcEljb25BcnJvd1JpZ2h0QWx0LFxuICAgICAgICAgICAgcGVwSWNvbkFycm93TGVmdEFsdCxcbiAgICAgICAgXSk7XG4gICAgfVxufVxuIl19
|
|
@@ -44,8 +44,8 @@ export class PepPluginProxyComponent {
|
|
|
44
44
|
if (lastSlashIndex > 0) {
|
|
45
45
|
// const publicPathArr = this.options.remoteEntry?.split('/');
|
|
46
46
|
// const publicPath = publicPathArr.slice(0, publicPathArr.length - 1).join('/')+'/';
|
|
47
|
-
// __webpack_public_path__ = publicPath;
|
|
48
47
|
const publicPath = this.options.remoteEntry.substring(0, lastSlashIndex + 1);
|
|
48
|
+
__webpack_public_path__ = publicPath;
|
|
49
49
|
this.pepAddonService.setAddonStaticFolder(publicPath, this.options.addonId);
|
|
50
50
|
}
|
|
51
51
|
}
|
|
@@ -94,4 +94,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
94
94
|
}], load: [{
|
|
95
95
|
type: Output
|
|
96
96
|
}] } });
|
|
97
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
97
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGx1Z2luLXByb3h5LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1saWIvcGx1Z2luL3BsdWdpbi1wcm94eS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBZ0IsWUFBWSxFQUFFLEtBQUssRUFBd0IsTUFBTSxFQUFFLFNBQVMsRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN4SSxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSx1Q0FBdUMsQ0FBQzs7O0FBYXpFLE1BQU0sT0FBTyx1QkFBdUI7SUFpQ2hDLFlBQ1ksZUFBZ0M7UUFBaEMsb0JBQWUsR0FBZixlQUFlLENBQWlCO1FBOUJwQyxhQUFRLEdBQXFCLElBQUksQ0FBQztRQVkxQywyREFBMkQ7UUFDbkQsZ0JBQVcsR0FBUSxJQUFJLENBQUM7UUFVdEIsZUFBVSxHQUF1QixJQUFJLFlBQVksRUFBRSxDQUFDO1FBQ3BELFNBQUksR0FBdUIsSUFBSSxZQUFZLEVBQUUsQ0FBQztJQU9wRCxDQUFDO0lBOUJMLElBQ0ksT0FBTyxDQUFDLEtBQXVCO1FBQy9CLElBQUksQ0FBQyxRQUFRLEdBQUcsS0FBSyxDQUFDO1FBQ3RCLElBQUksS0FBSyxFQUFFO1lBQ1AsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO1NBQ3JCO0lBQ0wsQ0FBQztJQUNELElBQUksT0FBTztRQUNQLE9BQU8sSUFBSSxDQUFDLFFBQVEsQ0FBQztJQUN6QixDQUFDO0lBSUQsSUFDSSxVQUFVLENBQUMsS0FBVTtRQUNyQixJQUFJLENBQUMsV0FBVyxHQUFHLEtBQUssQ0FBQztRQUN6QixJQUFJLENBQUMsZ0NBQWdDLEVBQUUsQ0FBQztJQUM1QyxDQUFDO0lBQ0QsSUFBSSxVQUFVO1FBQ1YsT0FBTyxJQUFJLENBQUMsV0FBVyxDQUFDO0lBQzVCLENBQUM7SUFZTyxnQ0FBZ0M7UUFDcEMsSUFBSSxJQUFJLENBQUMsVUFBVSxJQUFJLElBQUksQ0FBQyxPQUFPLEVBQUUsUUFBUSxFQUFFO1lBQzNDLElBQUksQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLFlBQVksQ0FBQyxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUM7WUFFdEQsc0RBQXNEO1lBQ3RELDZDQUE2QztZQUM3QywwREFBMEQ7WUFDMUQsSUFBSTtTQUNQO0lBQ0wsQ0FBQztJQUVPLEtBQUssQ0FBQyxVQUFVO1FBQ3BCLElBQUksQ0FBQyxhQUFhLENBQUMsS0FBSyxFQUFFLENBQUM7UUFFM0IsUUFBUSxDQUFDO1FBRVQsSUFBSSxJQUFJLENBQUMsT0FBTyxFQUFFLE9BQU8sSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxLQUFLLFFBQVEsSUFBSSxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksS0FBSyxRQUFRLENBQUMsRUFBRTtZQUU3RixNQUFNLGNBQWMsR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLFdBQVcsRUFBRSxXQUFXLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUM7WUFDeEUsSUFBSSxjQUFjLEdBQUcsQ0FBQyxFQUFFO2dCQUNwQiw4REFBOEQ7Z0JBQzlELHFGQUFxRjtnQkFFckYsTUFBTSxVQUFVLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxXQUFXLENBQUMsU0FBUyxDQUFDLENBQUMsRUFBRSxjQUFjLEdBQUcsQ0FBQyxDQUFDLENBQUM7Z0JBQzdFLHVCQUF1QixHQUFHLFVBQVUsQ0FBQztnQkFDckMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxvQkFBb0IsQ0FBQyxVQUFVLEVBQUUsSUFBSSxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsQ0FBQzthQUMvRTtTQUNKO1FBRUQsTUFBTSxhQUFhLEdBQUcsTUFBTSxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQztRQUNwRyxJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsZUFBZSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1FBRWpFLElBQUksSUFBSSxDQUFDLE9BQU8sRUFBRTtZQUNkLElBQUksQ0FBQyxnQ0FBZ0MsRUFBRSxDQUFDO1lBRXhDLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsWUFBWSxDQUFDLEVBQUUsU0FBUyxDQUFDLENBQUMsQ0FBTSxFQUFFLEVBQUU7Z0JBQ3pFLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFBO1lBQzNCLENBQUMsQ0FBQyxDQUFDO1NBQ047UUFFRCxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFFRCxXQUFXO0lBQ1gsQ0FBQztJQUVELFdBQVc7UUFDUCxJQUFJLElBQUksQ0FBQyxXQUFXLEVBQUU7WUFDbEIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxXQUFXLEVBQUUsQ0FBQztTQUNsQztRQUVELElBQUksQ0FBQyxPQUFPLEVBQUUsT0FBTyxFQUFFLENBQUM7UUFDeEIsSUFBSSxDQUFDLGFBQWEsRUFBRSxLQUFLLEVBQUUsQ0FBQztJQUNoQyxDQUFDOztvSEExRlEsdUJBQXVCO3dHQUF2Qix1QkFBdUIsb1JBQ0UsZ0JBQWdCLGdFQUx4Qzs7S0FFVDsyRkFFUSx1QkFBdUI7a0JBUG5DLFNBQVM7bUJBQUM7b0JBQ1AsVUFBVSxFQUFFLElBQUk7b0JBQ2hCLFFBQVEsRUFBRSxrQkFBa0I7b0JBQzVCLFFBQVEsRUFBRTs7S0FFVDtpQkFDSjtzR0FHRyxhQUFhO3NCQURaLFNBQVM7dUJBQUMsYUFBYSxFQUFFLEVBQUUsSUFBSSxFQUFFLGdCQUFnQixFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUU7Z0JBSzlELE9BQU87c0JBRFYsS0FBSztnQkFjRixVQUFVO3NCQURiLEtBQUs7Z0JBU0ksVUFBVTtzQkFBbkIsTUFBTTtnQkFDRyxJQUFJO3NCQUFiLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIENvbXBvbmVudFJlZiwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25DaGFuZ2VzLCBPbkRlc3Ryb3ksIE91dHB1dCwgVmlld0NoaWxkLCBWaWV3Q29udGFpbmVyUmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBsb2FkUmVtb3RlTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXItYXJjaGl0ZWN0cy9tb2R1bGUtZmVkZXJhdGlvbic7XG5pbXBvcnQgeyBQZXBBZGRvblNlcnZpY2UgfSBmcm9tICdAcGVwcGVyaS1hZGRvbnMvbmd4LWxpYic7XG5pbXBvcnQgeyBQZXBQbHVnaW5PcHRpb25zIH0gZnJvbSAnLi9wbHVnaW4ubW9kZWwnO1xuaW1wb3J0IHsgU3Vic2NyaXB0aW9uIH0gZnJvbSAncnhqcyc7XG5kZWNsYXJlIGxldCBfX3dlYnBhY2tfcHVibGljX3BhdGhfXztcblxuQENvbXBvbmVudCh7XG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBzZWxlY3RvcjogJ3BlcC1wbHVnaW4tcHJveHknLFxuICAgIHRlbXBsYXRlOiBgXG4gICAgICAgIDxuZy1jb250YWluZXIgI3BsYWNlSG9sZGVyPjwvbmctY29udGFpbmVyPlxuICAgIGBcbn0pXG5leHBvcnQgY2xhc3MgUGVwUGx1Z2luUHJveHlDb21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMsIE9uRGVzdHJveSB7XG4gICAgQFZpZXdDaGlsZCgncGxhY2VIb2xkZXInLCB7IHJlYWQ6IFZpZXdDb250YWluZXJSZWYsIHN0YXRpYzogdHJ1ZSB9KVxuICAgIHZpZXdDb250YWluZXI6IFZpZXdDb250YWluZXJSZWY7XG4gICAgXG4gICAgcHJpdmF0ZSBfb3B0aW9uczogUGVwUGx1Z2luT3B0aW9ucyA9IG51bGw7XG4gICAgQElucHV0KClcbiAgICBzZXQgb3B0aW9ucyh2YWx1ZTogUGVwUGx1Z2luT3B0aW9ucykge1xuICAgICAgICB0aGlzLl9vcHRpb25zID0gdmFsdWU7XG4gICAgICAgIGlmICh2YWx1ZSkge1xuICAgICAgICAgICAgdGhpcy5sb2FkTW9kdWxlKCk7XG4gICAgICAgIH1cbiAgICB9XG4gICAgZ2V0IG9wdGlvbnMoKTogUGVwUGx1Z2luT3B0aW9ucyB7XG4gICAgICAgIHJldHVybiB0aGlzLl9vcHRpb25zO1xuICAgIH1cblxuICAgIC8vIFRoaXMgaXMgdGhlIGRhdGEgcGFzc2VkIGJ5IHRoZSBBUEkgRGVzaWduIGRvY3VtZW50YXRpb24uXG4gICAgcHJpdmF0ZSBfaG9zdE9iamVjdDogYW55ID0gbnVsbDtcbiAgICBASW5wdXQoKVxuICAgIHNldCBob3N0T2JqZWN0KHZhbHVlOiBhbnkpIHsgXG4gICAgICAgIHRoaXMuX2hvc3RPYmplY3QgPSB2YWx1ZTtcbiAgICAgICAgdGhpcy5zZXRIb3N0Q29tcG9uZW50SW50b0NvbXBvbmVudFJlZigpO1xuICAgIH1cbiAgICBnZXQgaG9zdE9iamVjdCgpOiBhbnkge1xuICAgICAgICByZXR1cm4gdGhpcy5faG9zdE9iamVjdDtcbiAgICB9XG5cbiAgICBAT3V0cHV0KCkgaG9zdEV2ZW50czogRXZlbnRFbWl0dGVyPGFueT4gPSAgbmV3IEV2ZW50RW1pdHRlcigpO1xuICAgIEBPdXRwdXQoKSBsb2FkOiBFdmVudEVtaXR0ZXI8YW55PiA9ICBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgICBwcml2YXRlIGNvbXBSZWY6IENvbXBvbmVudFJlZjxhbnk+O1xuICAgIHByaXZhdGUgaG9zdEV2ZW50cyQ6IFN1YnNjcmlwdGlvbjtcblxuICAgIGNvbnN0cnVjdG9yKFxuICAgICAgICBwcml2YXRlIHBlcEFkZG9uU2VydmljZTogUGVwQWRkb25TZXJ2aWNlLFxuICAgICkgeyB9XG5cbiAgICBwcml2YXRlIHNldEhvc3RDb21wb25lbnRJbnRvQ29tcG9uZW50UmVmKCkge1xuICAgICAgICBpZiAodGhpcy5ob3N0T2JqZWN0ICYmIHRoaXMuY29tcFJlZj8uaW5zdGFuY2UpIHtcbiAgICAgICAgICAgIHRoaXMuY29tcFJlZi5pbnN0YW5jZVsnaG9zdE9iamVjdCddID0gdGhpcy5ob3N0T2JqZWN0O1xuXG4gICAgICAgICAgICAvLyBUT0RPOiBDaGVjayBpZiB0aGlzIGlzIG5lZWRlZD8/IGlmIG5vdCByZW1vdmUgdGhpcy5cbiAgICAgICAgICAgIC8vIGlmICh0aGlzLmNvbXBSZWY/Lmluc3RhbmNlPy5uZ09uQ2hhbmdlcykge1xuICAgICAgICAgICAgLy8gICAgIHRoaXMuY29tcFJlZi5pbnN0YW5jZS5uZ09uQ2hhbmdlcyh0aGlzLmhvc3RPYmplY3QpO1xuICAgICAgICAgICAgLy8gfVxuICAgICAgICB9XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBhc3luYyBsb2FkTW9kdWxlKCkge1xuICAgICAgICB0aGlzLnZpZXdDb250YWluZXIuY2xlYXIoKTtcbiAgICBcbiAgICAgICAgZGVidWdnZXI7XG4gICAgICAgIFxuICAgICAgICBpZiAodGhpcy5vcHRpb25zPy5hZGRvbklkICYmICh0aGlzLm9wdGlvbnMudHlwZSA9PT0gJ21vZHVsZScgfHwgdGhpcy5vcHRpb25zLnR5cGUgPT09ICdzY3JpcHQnKSkge1xuICAgICAgICAgICAgXG4gICAgICAgICAgICBjb25zdCBsYXN0U2xhc2hJbmRleCA9IHRoaXMub3B0aW9ucy5yZW1vdGVFbnRyeT8ubGFzdEluZGV4T2YoJy8nKSB8fCAtMTtcbiAgICAgICAgICAgIGlmIChsYXN0U2xhc2hJbmRleCA+IDApIHtcbiAgICAgICAgICAgICAgICAvLyBjb25zdCBwdWJsaWNQYXRoQXJyID0gdGhpcy5vcHRpb25zLnJlbW90ZUVudHJ5Py5zcGxpdCgnLycpO1xuICAgICAgICAgICAgICAgIC8vIGNvbnN0IHB1YmxpY1BhdGggPSBwdWJsaWNQYXRoQXJyLnNsaWNlKDAsIHB1YmxpY1BhdGhBcnIubGVuZ3RoIC0gMSkuam9pbignLycpKycvJztcbiAgICAgICAgICAgICAgICBcbiAgICAgICAgICAgICAgICBjb25zdCBwdWJsaWNQYXRoID0gdGhpcy5vcHRpb25zLnJlbW90ZUVudHJ5LnN1YnN0cmluZygwLCBsYXN0U2xhc2hJbmRleCArIDEpO1xuICAgICAgICAgICAgICAgIF9fd2VicGFja19wdWJsaWNfcGF0aF9fID0gcHVibGljUGF0aDtcbiAgICAgICAgICAgICAgICB0aGlzLnBlcEFkZG9uU2VydmljZS5zZXRBZGRvblN0YXRpY0ZvbGRlcihwdWJsaWNQYXRoLCB0aGlzLm9wdGlvbnMuYWRkb25JZCk7XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cblxuICAgICAgICBjb25zdCBjb21wb25lbnRUeXBlID0gYXdhaXQgbG9hZFJlbW90ZU1vZHVsZSh0aGlzLm9wdGlvbnMpLnRoZW4obSA9PiBtW3RoaXMub3B0aW9ucy5jb21wb25lbnROYW1lXSk7XG4gICAgICAgIHRoaXMuY29tcFJlZiA9IHRoaXMudmlld0NvbnRhaW5lci5jcmVhdGVDb21wb25lbnQoY29tcG9uZW50VHlwZSk7XG4gICAgICAgIFxuICAgICAgICBpZiAodGhpcy5jb21wUmVmKSB7XG4gICAgICAgICAgICB0aGlzLnNldEhvc3RDb21wb25lbnRJbnRvQ29tcG9uZW50UmVmKCk7XG4gICAgICAgICAgICBcbiAgICAgICAgICAgIHRoaXMuaG9zdEV2ZW50cyQgPSB0aGlzLmNvbXBSZWYuaW5zdGFuY2VbJ2hvc3RFdmVudHMnXT8uc3Vic2NyaWJlKChlOiBhbnkpID0+IHtcbiAgICAgICAgICAgICAgICB0aGlzLmhvc3RFdmVudHMuZW1pdChlKVxuICAgICAgICAgICAgfSk7XG4gICAgICAgIH1cblxuICAgICAgICB0aGlzLmxvYWQuZW1pdCgpO1xuICAgIH1cblxuICAgIG5nT25DaGFuZ2VzKCkge1xuICAgIH1cbiAgICBcbiAgICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICAgICAgaWYgKHRoaXMuaG9zdEV2ZW50cyQpIHtcbiAgICAgICAgICAgIHRoaXMuaG9zdEV2ZW50cyQudW5zdWJzY3JpYmUoKTtcbiAgICAgICAgfVxuXG4gICAgICAgIHRoaXMuY29tcFJlZj8uZGVzdHJveSgpO1xuICAgICAgICB0aGlzLnZpZXdDb250YWluZXI/LmNsZWFyKCk7XG4gICAgfVxufVxuXG4iXX0=
|
|
@@ -23,64 +23,6 @@ import * as i4 from 'ng-gallery';
|
|
|
23
23
|
import { LoadingStrategy, ImageItem, ThumbnailsPosition, SlidingDirection, GalleryModule } from 'ng-gallery';
|
|
24
24
|
import 'hammerjs';
|
|
25
25
|
|
|
26
|
-
// export function createViewerConfig(
|
|
27
|
-
// translate: TranslateService
|
|
28
|
-
// ): ImageViewerConfig {
|
|
29
|
-
// return {
|
|
30
|
-
// // width: 850,
|
|
31
|
-
// // height: 150,
|
|
32
|
-
// bgStyle: '#FFF', // component background style
|
|
33
|
-
// // scaleStep: 0.1, // zoom scale step (using the zoom in/out buttons)
|
|
34
|
-
// // rotateStepper: false, // touch rotate should rotate only 90 to 90 degrees
|
|
35
|
-
// loadingMessage: translate.instant('MESSAGES.INFO_LOADING_FILE'), // 'Loading...',
|
|
36
|
-
// // buttonStyle: {
|
|
37
|
-
// // iconFontFamily: 'Material Icons', // font used to render the button icons
|
|
38
|
-
// // alpha: 0.5, // buttons' transparence value
|
|
39
|
-
// // hoverAlpha: 0.7, // buttons' transparence value when mouse is over
|
|
40
|
-
// // bgStyle: '#000000', // buttons' background style
|
|
41
|
-
// // iconStyle: '#ffffff', // buttons' icon colors
|
|
42
|
-
// // borderStyle: '#000000', // buttons' border style
|
|
43
|
-
// // borderWidth: 0, // buttons' border width (0 == disabled)
|
|
44
|
-
// // },
|
|
45
|
-
// // tooltips: {
|
|
46
|
-
// // enabled: true, // enable or disable tooltips for buttons
|
|
47
|
-
// // bgStyle: '#000000', // tooltip background style
|
|
48
|
-
// // bgAlpha: 0.5, // tooltip background transparence
|
|
49
|
-
// // textStyle: '#ffffff', // tooltip's text style
|
|
50
|
-
// // textAlpha: 0.9, // tooltip's text transparence
|
|
51
|
-
// // padding: 15, // tooltip padding
|
|
52
|
-
// // radius: 20, // tooltip border radius
|
|
53
|
-
// // },
|
|
54
|
-
// // shorter button configuration style
|
|
55
|
-
// nextPageButton: createButtonConfig(
|
|
56
|
-
// 'navigate_next',
|
|
57
|
-
// 'Next page',
|
|
58
|
-
// 0,
|
|
59
|
-
// false
|
|
60
|
-
// ),
|
|
61
|
-
// beforePageButton: createButtonConfig(
|
|
62
|
-
// 'navigate_before',
|
|
63
|
-
// 'Previous page',
|
|
64
|
-
// 1,
|
|
65
|
-
// false
|
|
66
|
-
// ),
|
|
67
|
-
// zoomOutButton: createButtonConfig('zoom_out', 'Zoom out', 0, false),
|
|
68
|
-
// zoomInButton: createButtonConfig('zoom_in', 'Zoom in', 1, false),
|
|
69
|
-
// rotateLeftButton: createButtonConfig(
|
|
70
|
-
// 'rotate_left',
|
|
71
|
-
// 'Rotate left',
|
|
72
|
-
// 2,
|
|
73
|
-
// false
|
|
74
|
-
// ),
|
|
75
|
-
// rotateRightButton: createButtonConfig(
|
|
76
|
-
// 'rotate_right',
|
|
77
|
-
// 'Rotate right',
|
|
78
|
-
// 3,
|
|
79
|
-
// false
|
|
80
|
-
// ),
|
|
81
|
-
// resetButton: createButtonConfig('autorenew', 'Reset', 4, false),
|
|
82
|
-
// };
|
|
83
|
-
// }
|
|
84
26
|
class PepImagesFilmstripComponent {
|
|
85
27
|
constructor(customizationService, dialogService, layoutService, fileService, iconRegistry, utilitiesService, gallery, renderer, element, cd, document, dialogRef, data) {
|
|
86
28
|
this.customizationService = customizationService;
|
|
@@ -96,7 +38,6 @@ class PepImagesFilmstripComponent {
|
|
|
96
38
|
this.document = document;
|
|
97
39
|
this.dialogRef = dialogRef;
|
|
98
40
|
this.data = data;
|
|
99
|
-
// @ViewChild('ngxViewerImage') ngxViewerImage: any; // TODO: Check if we need to use this??
|
|
100
41
|
this.key = '';
|
|
101
42
|
this.value = '';
|
|
102
43
|
this.label = '';
|
|
@@ -352,24 +293,10 @@ class PepImagesFilmstripComponent {
|
|
|
352
293
|
}
|
|
353
294
|
}
|
|
354
295
|
PepImagesFilmstripComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepImagesFilmstripComponent, deps: [{ token: i1.PepCustomizationService }, { token: i2.PepDialogService }, { token: i1.PepLayoutService }, { token: i1.PepFileService }, { token: i3.PepIconRegistry }, { token: i1.PepUtilitiesService }, { token: i4.Gallery }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT, optional: true }, { token: i5.MatDialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
355
|
-
PepImagesFilmstripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepImagesFilmstripComponent, selector: "pep-images-filmstrip", inputs: { key: "key", value: "value", label: "label", xAlignment: "xAlignment", rowSpan: "rowSpan", form: "form", uid: "uid", showTitle: "showTitle", renderTitle: "renderTitle", layoutType: "layoutType", currIndex: "currIndex", showThumbnails: "showThumbnails" },
|
|
356
|
-
// {
|
|
357
|
-
// provide: IMAGEVIEWER_CONFIG,
|
|
358
|
-
// // useValue: IMAGEVIEWER_CONFIG_DEFAULT,
|
|
359
|
-
// useFactory: createViewerConfig,
|
|
360
|
-
// deps: [TranslateService],
|
|
361
|
-
// },
|
|
362
|
-
], viewQueries: [{ propertyName: "galleryCont", first: true, predicate: ["galleryCont"], descendants: true }, { propertyName: "galleryDialogTemplate", first: true, predicate: ["galleryDialogTemplate"], descendants: true, read: TemplateRef }, { propertyName: "galleryDialogCont", first: true, predicate: ["galleryDialogCont"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"inDialog; then galleryDialogTemplate; else regularTemplate\"></ng-container>\n<ng-template #regularTemplate>\n <ng-container [formGroup]=\"form\">\n <div class=\"images-filmstrip-container\">\n <pep-field-title *ngIf=\"renderTitle\" [label]=\"label\" [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\">\n </pep-field-title>\n <div #galleryCont class=\"img-wrapper\" [ngClass]=\"isVertical ? 'vertical-gallery' : 'horizontal-gallery'\"\n [style.height]=\"fieldHeight\">\n <pep-button *ngIf=\"items?.length > 1\" iconName=\"arrow_left_alt\" styleType=\"weak-invert\" sizeType=\"sm\"\n (click)=\"formGallery.prev()\" class=\"gallery-arrow start-arrow\">\n </pep-button>\n <gallery #formGallery id=\"{{guid}}-gallery\" (itemClick)=\"enlargeImage($event);\" [imageSize]=\"'contain'\"\n (indexChange)=\"indexChange($event)\" (error)=\"onError($event)\">\n </gallery>\n <pep-button *ngIf=\"items?.length > 1\" iconName=\"arrow_right_alt\" styleType=\"weak-invert\" sizeType=\"sm\"\n (click)=\"formGallery.next()\" class=\"gallery-arrow end-arrow\">\n </pep-button>\n </div>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #galleryDialogTemplate>\n <div class=\"gallery-dialog\">\n <pep-dialog [title]=\"label\" [showFooter]=\"showFooter\" [showClose]=\"showClose\" (close)=\"closeDialog($event)\">\n <div pep-dialog-content #galleryDialogCont class=\"gallery-dialog-content\"\n [ngClass]=\"isVertical ? 'vertical-gallery' : 'horizontal-gallery'\">\n <pep-button *ngIf=\"items?.length > 1\" iconName=\"arrow_left_alt\" styleType=\"weak-invert\"\n (click)=\"dialogGallery.prev()\" class=\"gallery-arrow start-arrow\">\n </pep-button>\n <gallery #dialogGallery id=\"{{guid}}-dlgGallery\" [imageSize]=\"'contain'\"\n (indexChange)=\"indexChange($event)\" (error)=\"onError($event)\">\n </gallery>\n <pep-button *ngIf=\"items?.length > 1\" iconName=\"arrow_right_alt\" styleType=\"weak-invert\"\n (click)=\"dialogGallery.next()\" class=\"gallery-arrow end-arrow\">\n </pep-button>\n </div>\n </pep-dialog>\n </div>\n</ng-template>\n\n<!-- Add custom template to image items -->\n<!-- <ng-template #itemTemplate let-index=\"index\" let-type=\"type\" let-data=\"data\" let-currIndex=\"currIndex\">\n <ng-container *ngIf=\"index === currIndex\">\n <ngx-imageviewer [src]=\"data.src\">\n </ngx-imageviewer>\n </ng-container>\n</ng-template> -->", styles: [":host{width:100%;height:inherit;display:block}:host>*{align-self:center}.gallery-dialog{height:inherit}.images-filmstrip-container{height:100%}.images-filmstrip-container .img-wrapper{height:100%;position:relative}.images-filmstrip-container .gallery-arrow{padding:.5rem}.images-filmstrip-container .gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2}.images-filmstrip-container .gallery-arrow.start-arrow{left:0}.images-filmstrip-container .gallery-arrow.end-arrow{right:0}gallery{direction:ltr;height:100%;min-height:100%}.gallery-dialog-content{position:relative}.gallery-dialog-content .gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2}.gallery-dialog-content .gallery-arrow.start-arrow{left:0}.gallery-dialog-content .gallery-arrow.end-arrow{right:0}.gallery-dialog-content gallery{min-width:65vw}.gallery-dialog-content ::ng-deep gallery-item gallery-image .g-image-item{background-size:content!important}.gallery-dialog-content ::ng-deep gallery-item .g-item-template ngx-imageviewer canvas{max-width:100%!important;max-height:100%!important}::ng-deep gallery-thumbs{margin:0 var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem)}::ng-deep gallery-thumbs gallery-thumb{padding:0!important;border-radius:var(--pep-border-radius-md, .25rem);margin:var(--pep-spacing-sm, .5rem) 0}::ng-deep gallery-thumbs gallery-thumb .g-image-item{background-size:cover!important}::ng-deep gallery-item gallery-image .g-image-item{border-radius:var(--pep-border-radius-lg, .5rem)}::ng-deep gallery-item:hover{cursor:pointer}::ng-deep gallery-dots{position:absolute!important;border-radius:var(--pep-border-radius-md, .25rem)}::ng-deep gallery-dots.pepperi-button,::ng-deep gallery-dots.pep-button{display:flex!important}::ng-deep .img-container{display:flex;align-items:center}::ng-deep gallery-nav{display:none}.vertical-gallery ::ng-deep gallery-thumbs{margin:var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem) 0}.vertical-gallery ::ng-deep gallery-thumbs gallery-thumb{margin:0 var(--pep-spacing-sm, .5rem)}\n", "gallery{background-color:transparent}::ng-deep gallery-thumb{box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)}::ng-deep .g-nav-prev,::ng-deep .g-nav-next{background:hsla(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%),.5)}::ng-deep .g-nav-prev:hover,::ng-deep .g-nav-next:hover{background:hsla(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%),.5);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);cursor:pointer}::ng-deep .g-nav-prev:focus,::ng-deep .g-nav-next:focus{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}::ng-deep .g-nav-prev:active,::ng-deep .g-nav-next:active{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}::ng-deep .g-nav-prev:disabled,::ng-deep .g-nav-next:disabled{box-shadow:unset;border:unset;color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)!important;background:hsla(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%),.08)!important}::ng-deep .g-nav-prev:disabled:after,::ng-deep .g-nav-next:disabled:after{border:unset}::ng-deep .g-nav-prev:disabled .svg-icon,::ng-deep .g-nav-next:disabled .svg-icon{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}::ng-deep .g-nav-prev:disabled .svg-icon.stroke,::ng-deep .g-nav-next:disabled .svg-icon.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}::ng-deep gallery-dots{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.GalleryComponent, selector: "gallery", inputs: ["nav", "dots", "loop", "thumb", "zoomOut", "counter", "dotsSize", "autoPlay", "gestures", "thumbWidth", "thumbHeight", "disableThumb", "panSensitivity", "playerInterval", "itemTemplate", "thumbTemplate", "thumbMode", "imageSize", "dotsPosition", "counterPosition", "slidingDirection", "loadingStrategy", "thumbPosition", "thumbView", "destroyRef", "skipInitConfig", "id", "items"], outputs: ["itemClick", "thumbClick", "playingChange", "indexChange", "itemsChange", "error"] }, { kind: "component", type: i8.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i9.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength"] }, { kind: "component", type: i2.PepDialogComponent, selector: "pep-dialog", inputs: ["title", "showClose", "showHeader", "showFooter"], outputs: ["close"] }] });
|
|
296
|
+
PepImagesFilmstripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepImagesFilmstripComponent, selector: "pep-images-filmstrip", inputs: { key: "key", value: "value", label: "label", xAlignment: "xAlignment", rowSpan: "rowSpan", form: "form", uid: "uid", showTitle: "showTitle", renderTitle: "renderTitle", layoutType: "layoutType", currIndex: "currIndex", showThumbnails: "showThumbnails" }, viewQueries: [{ propertyName: "galleryCont", first: true, predicate: ["galleryCont"], descendants: true }, { propertyName: "galleryDialogTemplate", first: true, predicate: ["galleryDialogTemplate"], descendants: true, read: TemplateRef }, { propertyName: "galleryDialogCont", first: true, predicate: ["galleryDialogCont"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"inDialog; then galleryDialogTemplate; else regularTemplate\"></ng-container>\n<ng-template #regularTemplate>\n <ng-container [formGroup]=\"form\">\n <div class=\"images-filmstrip-container\">\n <pep-field-title *ngIf=\"renderTitle\" [label]=\"label\" [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\">\n </pep-field-title>\n <div #galleryCont class=\"img-wrapper\" [ngClass]=\"isVertical ? 'vertical-gallery' : 'horizontal-gallery'\"\n [style.height]=\"fieldHeight\">\n <pep-button *ngIf=\"items?.length > 1\" iconName=\"arrow_left_alt\" styleType=\"weak-invert\" sizeType=\"sm\"\n (click)=\"formGallery.prev()\" class=\"gallery-arrow start-arrow\">\n </pep-button>\n <gallery #formGallery id=\"{{guid}}-gallery\" (itemClick)=\"enlargeImage($event);\" [imageSize]=\"'contain'\"\n (indexChange)=\"indexChange($event)\" (error)=\"onError($event)\">\n </gallery>\n <pep-button *ngIf=\"items?.length > 1\" iconName=\"arrow_right_alt\" styleType=\"weak-invert\" sizeType=\"sm\"\n (click)=\"formGallery.next()\" class=\"gallery-arrow end-arrow\">\n </pep-button>\n </div>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #galleryDialogTemplate>\n <div class=\"gallery-dialog\">\n <pep-dialog [title]=\"label\" [showFooter]=\"showFooter\" [showClose]=\"showClose\" (close)=\"closeDialog($event)\">\n <div pep-dialog-content #galleryDialogCont class=\"gallery-dialog-content\"\n [ngClass]=\"isVertical ? 'vertical-gallery' : 'horizontal-gallery'\">\n <pep-button *ngIf=\"items?.length > 1\" iconName=\"arrow_left_alt\" styleType=\"weak-invert\"\n (click)=\"dialogGallery.prev()\" class=\"gallery-arrow start-arrow\">\n </pep-button>\n <gallery #dialogGallery id=\"{{guid}}-dlgGallery\" [imageSize]=\"'contain'\"\n (indexChange)=\"indexChange($event)\" (error)=\"onError($event)\">\n </gallery>\n <pep-button *ngIf=\"items?.length > 1\" iconName=\"arrow_right_alt\" styleType=\"weak-invert\"\n (click)=\"dialogGallery.next()\" class=\"gallery-arrow end-arrow\">\n </pep-button>\n </div>\n </pep-dialog>\n </div>\n</ng-template>", styles: [":host{width:100%;height:inherit;display:block}:host>*{align-self:center}.gallery-dialog{height:inherit}.images-filmstrip-container{height:100%}.images-filmstrip-container .img-wrapper{height:100%;position:relative}.images-filmstrip-container .gallery-arrow{padding:.5rem}.images-filmstrip-container .gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2}.images-filmstrip-container .gallery-arrow.start-arrow{left:0}.images-filmstrip-container .gallery-arrow.end-arrow{right:0}gallery{direction:ltr;height:100%;min-height:100%}.gallery-dialog-content{position:relative}.gallery-dialog-content .gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2}.gallery-dialog-content .gallery-arrow.start-arrow{left:0}.gallery-dialog-content .gallery-arrow.end-arrow{right:0}.gallery-dialog-content gallery{min-width:65vw}.gallery-dialog-content ::ng-deep gallery-item gallery-image .g-image-item{background-size:content!important}::ng-deep gallery-thumbs{margin:0 var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem)}::ng-deep gallery-thumbs gallery-thumb{padding:0!important;border-radius:var(--pep-border-radius-md, .25rem);margin:var(--pep-spacing-sm, .5rem) 0}::ng-deep gallery-thumbs gallery-thumb .g-image-item{background-size:cover!important}::ng-deep gallery-item gallery-image .g-image-item{border-radius:var(--pep-border-radius-lg, .5rem)}::ng-deep gallery-item:hover{cursor:pointer}::ng-deep gallery-dots{position:absolute!important;border-radius:var(--pep-border-radius-md, .25rem)}::ng-deep gallery-dots.pepperi-button,::ng-deep gallery-dots.pep-button{display:flex!important}::ng-deep .img-container{display:flex;align-items:center}::ng-deep gallery-nav{display:none}.vertical-gallery ::ng-deep gallery-thumbs{margin:var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem) 0}.vertical-gallery ::ng-deep gallery-thumbs gallery-thumb{margin:0 var(--pep-spacing-sm, .5rem)}\n", "gallery{background-color:transparent}::ng-deep gallery-thumb{box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)}::ng-deep .g-nav-prev,::ng-deep .g-nav-next{background:hsla(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%),.5)}::ng-deep .g-nav-prev:hover,::ng-deep .g-nav-next:hover{background:hsla(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%),.5);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);cursor:pointer}::ng-deep .g-nav-prev:focus,::ng-deep .g-nav-next:focus{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}::ng-deep .g-nav-prev:active,::ng-deep .g-nav-next:active{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}::ng-deep .g-nav-prev:disabled,::ng-deep .g-nav-next:disabled{box-shadow:unset;border:unset;color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)!important;background:hsla(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%),.08)!important}::ng-deep .g-nav-prev:disabled:after,::ng-deep .g-nav-next:disabled:after{border:unset}::ng-deep .g-nav-prev:disabled .svg-icon,::ng-deep .g-nav-next:disabled .svg-icon{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}::ng-deep .g-nav-prev:disabled .svg-icon.stroke,::ng-deep .g-nav-next:disabled .svg-icon.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}::ng-deep gallery-dots{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.GalleryComponent, selector: "gallery", inputs: ["nav", "dots", "loop", "thumb", "zoomOut", "counter", "dotsSize", "autoPlay", "gestures", "thumbWidth", "thumbHeight", "disableThumb", "panSensitivity", "playerInterval", "itemTemplate", "thumbTemplate", "thumbMode", "imageSize", "dotsPosition", "counterPosition", "slidingDirection", "loadingStrategy", "thumbPosition", "thumbView", "destroyRef", "skipInitConfig", "id", "items"], outputs: ["itemClick", "thumbClick", "playingChange", "indexChange", "itemsChange", "error"] }, { kind: "component", type: i8.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i9.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength"] }, { kind: "component", type: i2.PepDialogComponent, selector: "pep-dialog", inputs: ["title", "showClose", "showHeader", "showFooter"], outputs: ["close"] }] });
|
|
363
297
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepImagesFilmstripComponent, decorators: [{
|
|
364
298
|
type: Component,
|
|
365
|
-
args: [{ selector: 'pep-images-filmstrip',
|
|
366
|
-
// {
|
|
367
|
-
// provide: IMAGEVIEWER_CONFIG,
|
|
368
|
-
// // useValue: IMAGEVIEWER_CONFIG_DEFAULT,
|
|
369
|
-
// useFactory: createViewerConfig,
|
|
370
|
-
// deps: [TranslateService],
|
|
371
|
-
// },
|
|
372
|
-
], template: "<ng-container *ngIf=\"inDialog; then galleryDialogTemplate; else regularTemplate\"></ng-container>\n<ng-template #regularTemplate>\n <ng-container [formGroup]=\"form\">\n <div class=\"images-filmstrip-container\">\n <pep-field-title *ngIf=\"renderTitle\" [label]=\"label\" [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\">\n </pep-field-title>\n <div #galleryCont class=\"img-wrapper\" [ngClass]=\"isVertical ? 'vertical-gallery' : 'horizontal-gallery'\"\n [style.height]=\"fieldHeight\">\n <pep-button *ngIf=\"items?.length > 1\" iconName=\"arrow_left_alt\" styleType=\"weak-invert\" sizeType=\"sm\"\n (click)=\"formGallery.prev()\" class=\"gallery-arrow start-arrow\">\n </pep-button>\n <gallery #formGallery id=\"{{guid}}-gallery\" (itemClick)=\"enlargeImage($event);\" [imageSize]=\"'contain'\"\n (indexChange)=\"indexChange($event)\" (error)=\"onError($event)\">\n </gallery>\n <pep-button *ngIf=\"items?.length > 1\" iconName=\"arrow_right_alt\" styleType=\"weak-invert\" sizeType=\"sm\"\n (click)=\"formGallery.next()\" class=\"gallery-arrow end-arrow\">\n </pep-button>\n </div>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #galleryDialogTemplate>\n <div class=\"gallery-dialog\">\n <pep-dialog [title]=\"label\" [showFooter]=\"showFooter\" [showClose]=\"showClose\" (close)=\"closeDialog($event)\">\n <div pep-dialog-content #galleryDialogCont class=\"gallery-dialog-content\"\n [ngClass]=\"isVertical ? 'vertical-gallery' : 'horizontal-gallery'\">\n <pep-button *ngIf=\"items?.length > 1\" iconName=\"arrow_left_alt\" styleType=\"weak-invert\"\n (click)=\"dialogGallery.prev()\" class=\"gallery-arrow start-arrow\">\n </pep-button>\n <gallery #dialogGallery id=\"{{guid}}-dlgGallery\" [imageSize]=\"'contain'\"\n (indexChange)=\"indexChange($event)\" (error)=\"onError($event)\">\n </gallery>\n <pep-button *ngIf=\"items?.length > 1\" iconName=\"arrow_right_alt\" styleType=\"weak-invert\"\n (click)=\"dialogGallery.next()\" class=\"gallery-arrow end-arrow\">\n </pep-button>\n </div>\n </pep-dialog>\n </div>\n</ng-template>\n\n<!-- Add custom template to image items -->\n<!-- <ng-template #itemTemplate let-index=\"index\" let-type=\"type\" let-data=\"data\" let-currIndex=\"currIndex\">\n <ng-container *ngIf=\"index === currIndex\">\n <ngx-imageviewer [src]=\"data.src\">\n </ngx-imageviewer>\n </ng-container>\n</ng-template> -->", styles: [":host{width:100%;height:inherit;display:block}:host>*{align-self:center}.gallery-dialog{height:inherit}.images-filmstrip-container{height:100%}.images-filmstrip-container .img-wrapper{height:100%;position:relative}.images-filmstrip-container .gallery-arrow{padding:.5rem}.images-filmstrip-container .gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2}.images-filmstrip-container .gallery-arrow.start-arrow{left:0}.images-filmstrip-container .gallery-arrow.end-arrow{right:0}gallery{direction:ltr;height:100%;min-height:100%}.gallery-dialog-content{position:relative}.gallery-dialog-content .gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2}.gallery-dialog-content .gallery-arrow.start-arrow{left:0}.gallery-dialog-content .gallery-arrow.end-arrow{right:0}.gallery-dialog-content gallery{min-width:65vw}.gallery-dialog-content ::ng-deep gallery-item gallery-image .g-image-item{background-size:content!important}.gallery-dialog-content ::ng-deep gallery-item .g-item-template ngx-imageviewer canvas{max-width:100%!important;max-height:100%!important}::ng-deep gallery-thumbs{margin:0 var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem)}::ng-deep gallery-thumbs gallery-thumb{padding:0!important;border-radius:var(--pep-border-radius-md, .25rem);margin:var(--pep-spacing-sm, .5rem) 0}::ng-deep gallery-thumbs gallery-thumb .g-image-item{background-size:cover!important}::ng-deep gallery-item gallery-image .g-image-item{border-radius:var(--pep-border-radius-lg, .5rem)}::ng-deep gallery-item:hover{cursor:pointer}::ng-deep gallery-dots{position:absolute!important;border-radius:var(--pep-border-radius-md, .25rem)}::ng-deep gallery-dots.pepperi-button,::ng-deep gallery-dots.pep-button{display:flex!important}::ng-deep .img-container{display:flex;align-items:center}::ng-deep gallery-nav{display:none}.vertical-gallery ::ng-deep gallery-thumbs{margin:var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem) 0}.vertical-gallery ::ng-deep gallery-thumbs gallery-thumb{margin:0 var(--pep-spacing-sm, .5rem)}\n", "gallery{background-color:transparent}::ng-deep gallery-thumb{box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)}::ng-deep .g-nav-prev,::ng-deep .g-nav-next{background:hsla(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%),.5)}::ng-deep .g-nav-prev:hover,::ng-deep .g-nav-next:hover{background:hsla(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%),.5);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);cursor:pointer}::ng-deep .g-nav-prev:focus,::ng-deep .g-nav-next:focus{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}::ng-deep .g-nav-prev:active,::ng-deep .g-nav-next:active{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}::ng-deep .g-nav-prev:disabled,::ng-deep .g-nav-next:disabled{box-shadow:unset;border:unset;color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)!important;background:hsla(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%),.08)!important}::ng-deep .g-nav-prev:disabled:after,::ng-deep .g-nav-next:disabled:after{border:unset}::ng-deep .g-nav-prev:disabled .svg-icon,::ng-deep .g-nav-next:disabled .svg-icon{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}::ng-deep .g-nav-prev:disabled .svg-icon.stroke,::ng-deep .g-nav-next:disabled .svg-icon.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}::ng-deep gallery-dots{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}\n"] }]
|
|
299
|
+
args: [{ selector: 'pep-images-filmstrip', template: "<ng-container *ngIf=\"inDialog; then galleryDialogTemplate; else regularTemplate\"></ng-container>\n<ng-template #regularTemplate>\n <ng-container [formGroup]=\"form\">\n <div class=\"images-filmstrip-container\">\n <pep-field-title *ngIf=\"renderTitle\" [label]=\"label\" [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\">\n </pep-field-title>\n <div #galleryCont class=\"img-wrapper\" [ngClass]=\"isVertical ? 'vertical-gallery' : 'horizontal-gallery'\"\n [style.height]=\"fieldHeight\">\n <pep-button *ngIf=\"items?.length > 1\" iconName=\"arrow_left_alt\" styleType=\"weak-invert\" sizeType=\"sm\"\n (click)=\"formGallery.prev()\" class=\"gallery-arrow start-arrow\">\n </pep-button>\n <gallery #formGallery id=\"{{guid}}-gallery\" (itemClick)=\"enlargeImage($event);\" [imageSize]=\"'contain'\"\n (indexChange)=\"indexChange($event)\" (error)=\"onError($event)\">\n </gallery>\n <pep-button *ngIf=\"items?.length > 1\" iconName=\"arrow_right_alt\" styleType=\"weak-invert\" sizeType=\"sm\"\n (click)=\"formGallery.next()\" class=\"gallery-arrow end-arrow\">\n </pep-button>\n </div>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #galleryDialogTemplate>\n <div class=\"gallery-dialog\">\n <pep-dialog [title]=\"label\" [showFooter]=\"showFooter\" [showClose]=\"showClose\" (close)=\"closeDialog($event)\">\n <div pep-dialog-content #galleryDialogCont class=\"gallery-dialog-content\"\n [ngClass]=\"isVertical ? 'vertical-gallery' : 'horizontal-gallery'\">\n <pep-button *ngIf=\"items?.length > 1\" iconName=\"arrow_left_alt\" styleType=\"weak-invert\"\n (click)=\"dialogGallery.prev()\" class=\"gallery-arrow start-arrow\">\n </pep-button>\n <gallery #dialogGallery id=\"{{guid}}-dlgGallery\" [imageSize]=\"'contain'\"\n (indexChange)=\"indexChange($event)\" (error)=\"onError($event)\">\n </gallery>\n <pep-button *ngIf=\"items?.length > 1\" iconName=\"arrow_right_alt\" styleType=\"weak-invert\"\n (click)=\"dialogGallery.next()\" class=\"gallery-arrow end-arrow\">\n </pep-button>\n </div>\n </pep-dialog>\n </div>\n</ng-template>", styles: [":host{width:100%;height:inherit;display:block}:host>*{align-self:center}.gallery-dialog{height:inherit}.images-filmstrip-container{height:100%}.images-filmstrip-container .img-wrapper{height:100%;position:relative}.images-filmstrip-container .gallery-arrow{padding:.5rem}.images-filmstrip-container .gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2}.images-filmstrip-container .gallery-arrow.start-arrow{left:0}.images-filmstrip-container .gallery-arrow.end-arrow{right:0}gallery{direction:ltr;height:100%;min-height:100%}.gallery-dialog-content{position:relative}.gallery-dialog-content .gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2}.gallery-dialog-content .gallery-arrow.start-arrow{left:0}.gallery-dialog-content .gallery-arrow.end-arrow{right:0}.gallery-dialog-content gallery{min-width:65vw}.gallery-dialog-content ::ng-deep gallery-item gallery-image .g-image-item{background-size:content!important}::ng-deep gallery-thumbs{margin:0 var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem)}::ng-deep gallery-thumbs gallery-thumb{padding:0!important;border-radius:var(--pep-border-radius-md, .25rem);margin:var(--pep-spacing-sm, .5rem) 0}::ng-deep gallery-thumbs gallery-thumb .g-image-item{background-size:cover!important}::ng-deep gallery-item gallery-image .g-image-item{border-radius:var(--pep-border-radius-lg, .5rem)}::ng-deep gallery-item:hover{cursor:pointer}::ng-deep gallery-dots{position:absolute!important;border-radius:var(--pep-border-radius-md, .25rem)}::ng-deep gallery-dots.pepperi-button,::ng-deep gallery-dots.pep-button{display:flex!important}::ng-deep .img-container{display:flex;align-items:center}::ng-deep gallery-nav{display:none}.vertical-gallery ::ng-deep gallery-thumbs{margin:var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem) 0}.vertical-gallery ::ng-deep gallery-thumbs gallery-thumb{margin:0 var(--pep-spacing-sm, .5rem)}\n", "gallery{background-color:transparent}::ng-deep gallery-thumb{box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)}::ng-deep .g-nav-prev,::ng-deep .g-nav-next{background:hsla(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%),.5)}::ng-deep .g-nav-prev:hover,::ng-deep .g-nav-next:hover{background:hsla(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%),.5);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);cursor:pointer}::ng-deep .g-nav-prev:focus,::ng-deep .g-nav-next:focus{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}::ng-deep .g-nav-prev:active,::ng-deep .g-nav-next:active{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}::ng-deep .g-nav-prev:disabled,::ng-deep .g-nav-next:disabled{box-shadow:unset;border:unset;color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)!important;background:hsla(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%),.08)!important}::ng-deep .g-nav-prev:disabled:after,::ng-deep .g-nav-next:disabled:after{border:unset}::ng-deep .g-nav-prev:disabled .svg-icon,::ng-deep .g-nav-next:disabled .svg-icon{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}::ng-deep .g-nav-prev:disabled .svg-icon.stroke,::ng-deep .g-nav-next:disabled .svg-icon.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}::ng-deep gallery-dots{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}\n"] }]
|
|
373
300
|
}], ctorParameters: function () {
|
|
374
301
|
return [{ type: i1.PepCustomizationService }, { type: i2.PepDialogService }, { type: i1.PepLayoutService }, { type: i1.PepFileService }, { type: i3.PepIconRegistry }, { type: i1.PepUtilitiesService }, { type: i4.Gallery }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
375
302
|
type: Optional
|
|
@@ -440,24 +367,6 @@ PepImagesFilmstripModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0"
|
|
|
440
367
|
MatIconModule,
|
|
441
368
|
// External modules
|
|
442
369
|
GalleryModule,
|
|
443
|
-
// ImageViewerModule,
|
|
444
|
-
// ImageViewerModule.forRoot({
|
|
445
|
-
// btnClass: 'default', // The CSS class(es) that will apply to the buttons
|
|
446
|
-
// zoomFactor: 0.1, // The amount that the scale will be increased by
|
|
447
|
-
// containerBackgroundColor: 'transparent', // The color to use for the background. This can provided in hex, or rgb(a).
|
|
448
|
-
// wheelZoom: true, // If true, the mouse wheel can be used to zoom in
|
|
449
|
-
// allowFullscreen: false, // If true, the fullscreen button will be shown, allowing the user to entr fullscreen mode
|
|
450
|
-
// btnIcons: {
|
|
451
|
-
// // The icon classes that will apply to the buttons. By default, font-awesome is used.
|
|
452
|
-
// zoomIn: 'fa fa-plus',
|
|
453
|
-
// zoomOut: 'fa fa-minus',
|
|
454
|
-
// rotateClockwise: 'fa fa-repeat',
|
|
455
|
-
// rotateCounterClockwise: 'fa fa-undo',
|
|
456
|
-
// next: 'fa fa-arrow-right',
|
|
457
|
-
// prev: 'fa fa-arrow-left',
|
|
458
|
-
// fullscreen: 'fa fa-arrows-alt'
|
|
459
|
-
// }
|
|
460
|
-
// }),
|
|
461
370
|
// ngx-lib modules
|
|
462
371
|
PepNgxLibModule,
|
|
463
372
|
PepButtonModule,
|
|
@@ -473,24 +382,6 @@ PepImagesFilmstripModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0"
|
|
|
473
382
|
MatIconModule,
|
|
474
383
|
// External modules
|
|
475
384
|
GalleryModule,
|
|
476
|
-
// ImageViewerModule,
|
|
477
|
-
// ImageViewerModule.forRoot({
|
|
478
|
-
// btnClass: 'default', // The CSS class(es) that will apply to the buttons
|
|
479
|
-
// zoomFactor: 0.1, // The amount that the scale will be increased by
|
|
480
|
-
// containerBackgroundColor: 'transparent', // The color to use for the background. This can provided in hex, or rgb(a).
|
|
481
|
-
// wheelZoom: true, // If true, the mouse wheel can be used to zoom in
|
|
482
|
-
// allowFullscreen: false, // If true, the fullscreen button will be shown, allowing the user to entr fullscreen mode
|
|
483
|
-
// btnIcons: {
|
|
484
|
-
// // The icon classes that will apply to the buttons. By default, font-awesome is used.
|
|
485
|
-
// zoomIn: 'fa fa-plus',
|
|
486
|
-
// zoomOut: 'fa fa-minus',
|
|
487
|
-
// rotateClockwise: 'fa fa-repeat',
|
|
488
|
-
// rotateCounterClockwise: 'fa fa-undo',
|
|
489
|
-
// next: 'fa fa-arrow-right',
|
|
490
|
-
// prev: 'fa fa-arrow-left',
|
|
491
|
-
// fullscreen: 'fa fa-arrows-alt'
|
|
492
|
-
// }
|
|
493
|
-
// }),
|
|
494
385
|
// ngx-lib modules
|
|
495
386
|
PepNgxLibModule,
|
|
496
387
|
PepButtonModule,
|
|
@@ -510,24 +401,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
510
401
|
MatIconModule,
|
|
511
402
|
// External modules
|
|
512
403
|
GalleryModule,
|
|
513
|
-
// ImageViewerModule,
|
|
514
|
-
// ImageViewerModule.forRoot({
|
|
515
|
-
// btnClass: 'default', // The CSS class(es) that will apply to the buttons
|
|
516
|
-
// zoomFactor: 0.1, // The amount that the scale will be increased by
|
|
517
|
-
// containerBackgroundColor: 'transparent', // The color to use for the background. This can provided in hex, or rgb(a).
|
|
518
|
-
// wheelZoom: true, // If true, the mouse wheel can be used to zoom in
|
|
519
|
-
// allowFullscreen: false, // If true, the fullscreen button will be shown, allowing the user to entr fullscreen mode
|
|
520
|
-
// btnIcons: {
|
|
521
|
-
// // The icon classes that will apply to the buttons. By default, font-awesome is used.
|
|
522
|
-
// zoomIn: 'fa fa-plus',
|
|
523
|
-
// zoomOut: 'fa fa-minus',
|
|
524
|
-
// rotateClockwise: 'fa fa-repeat',
|
|
525
|
-
// rotateCounterClockwise: 'fa fa-undo',
|
|
526
|
-
// next: 'fa fa-arrow-right',
|
|
527
|
-
// prev: 'fa fa-arrow-left',
|
|
528
|
-
// fullscreen: 'fa fa-arrows-alt'
|
|
529
|
-
// }
|
|
530
|
-
// }),
|
|
531
404
|
// ngx-lib modules
|
|
532
405
|
PepNgxLibModule,
|
|
533
406
|
PepButtonModule,
|