@casus-campus/ngx-gallery 0.20.0 → 0.21.1
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.
|
@@ -118,10 +118,10 @@ class LogService {
|
|
|
118
118
|
log(fName, msg, prioLevel) {
|
|
119
119
|
// console.log((new Date()).getTime() + ' ' + fName + ': ' + msg);
|
|
120
120
|
}
|
|
121
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
122
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
121
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: LogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
122
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: LogService, providedIn: 'root' }); }
|
|
123
123
|
}
|
|
124
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
124
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: LogService, decorators: [{
|
|
125
125
|
type: Injectable,
|
|
126
126
|
args: [{
|
|
127
127
|
providedIn: 'root',
|
|
@@ -132,7 +132,6 @@ class CcMediaService {
|
|
|
132
132
|
constructor() {
|
|
133
133
|
this.logService = inject(LogService);
|
|
134
134
|
this.ccSuportService = inject(CcSupportService);
|
|
135
|
-
/* eslint-disable @typescript-eslint/naming-convention, no-underscore-dangle, id-blacklist, id-match */
|
|
136
135
|
this._openedMediumTargets$ = new BehaviorSubject(null);
|
|
137
136
|
this.openedMediumTargets$ = this._openedMediumTargets$.asObservable().pipe(filter(openedMedium => !!openedMedium));
|
|
138
137
|
}
|
|
@@ -305,13 +304,13 @@ class CcMediaService {
|
|
|
305
304
|
}
|
|
306
305
|
// path used as placeholder image for text/html, pdf, audio and video
|
|
307
306
|
getMimeTypePlaceholderPath(mimeType) {
|
|
308
|
-
const matIconName = this.ccSuportService.
|
|
307
|
+
const matIconName = this.ccSuportService.getIconForMimeType({ mimeType, name: '', width: 0, height: 0, description: '' }) || 'cancel_presentation';
|
|
309
308
|
return `assets/${matIconName}-24px.svg`;
|
|
310
309
|
}
|
|
311
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
312
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
310
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CcMediaService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
311
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CcMediaService }); }
|
|
313
312
|
}
|
|
314
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
313
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CcMediaService, decorators: [{
|
|
315
314
|
type: Injectable
|
|
316
315
|
}] });
|
|
317
316
|
|
|
@@ -332,10 +331,10 @@ class NgxGallerySvgPolygonComponent {
|
|
|
332
331
|
this.ccMediaService.openMediumTarget(event, polygon.target);
|
|
333
332
|
}
|
|
334
333
|
}
|
|
335
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
336
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
334
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGallerySvgPolygonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
335
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: NgxGallerySvgPolygonComponent, isStandalone: false, selector: "[svg-polygon]", inputs: { svgPolygons: "svgPolygons" }, usesOnChanges: true, ngImport: i0, template: "@for (svgPolygon of svgPolygons; track svgPolygon) {\n <svg:a (click)=\"open($event, svgPolygon)\">\n <svg:polygon [attr.points]=\"svgPolygon.getSVGPoints()\" [attr.fill]=\"svgPolygon.getColor()\"\n [attr.stroke]=\"svgPolygon.getColor()\" class=\"ngx-gallery-svg-polygon\">\n </svg:polygon>\n </svg:a>\n}\n", styles: [".ngx-gallery-svg-polygon{fill-opacity:.1;transition:fill-opacity .2s;stroke-width:2;stroke-opacity:1;cursor:pointer}.ngx-gallery-svg-polygon:hover{fill-opacity:.5}\n"] }); }
|
|
337
336
|
}
|
|
338
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
337
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGallerySvgPolygonComponent, decorators: [{
|
|
339
338
|
type: Component,
|
|
340
339
|
args: [{ selector: '[svg-polygon]', standalone: false, template: "@for (svgPolygon of svgPolygons; track svgPolygon) {\n <svg:a (click)=\"open($event, svgPolygon)\">\n <svg:polygon [attr.points]=\"svgPolygon.getSVGPoints()\" [attr.fill]=\"svgPolygon.getColor()\"\n [attr.stroke]=\"svgPolygon.getColor()\" class=\"ngx-gallery-svg-polygon\">\n </svg:polygon>\n </svg:a>\n}\n", styles: [".ngx-gallery-svg-polygon{fill-opacity:.1;transition:fill-opacity .2s;stroke-width:2;stroke-opacity:1;cursor:pointer}.ngx-gallery-svg-polygon:hover{fill-opacity:.5}\n"] }]
|
|
341
340
|
}], propDecorators: { svgPolygons: [{
|
|
@@ -372,10 +371,10 @@ class NgxGallerySvgIconComponent {
|
|
|
372
371
|
setHeights() {
|
|
373
372
|
this.heights = this.svgIcons.map(icon => icon.height * this.scaleFactor);
|
|
374
373
|
}
|
|
375
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
376
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
374
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGallerySvgIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
375
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: NgxGallerySvgIconComponent, isStandalone: false, selector: "[svg-icon]", inputs: { svgIcons: "svgIcons", scaleFactor: "scaleFactor" }, usesOnChanges: true, ngImport: i0, template: "@for (svgIcon of svgIcons; track svgIcon; let i = $index) {\n <svg:g>\n <svg:rect class=\"ngx-gallery-svg-icon-bg\" [attr.x]=\"svgIcon.getPoint().getPosX()\"\n [attr.y]=\"svgIcon.getPoint().getPosY()\" rx=\"2\" ry=\"2\" [attr.width]=\"widths[i]\" [attr.height]=\"heights[i]\"\n fill=\"white\" [attr.stroke]=\"svgIcon.getColor()\" [attr.stroke-width]=\"2 * scaleFactor\">\n </svg:rect>\n <svg:a class=\"ngx-gallery-svg-icon\" (click)=\"open($event, svgIcon)\">\n <svg:image [attr.xlink:href]=\"svgIcon.getIconImageUrl()\" [attr.x]=\"svgIcon.getPoint().getPosX() + 1\"\n [attr.y]=\"svgIcon.getPoint().getPosY() + 1\" [attr.height]=\"heights[i] - 2\" [attr.width]=\"widths[i] - 2\">\n <!--<svg:title>{{ svgIcon.getDescription() }}</svg:title>-->\n </svg:image>\n </svg:a>\n </svg:g>\n}\n", styles: [".ngx-gallery-svg-icon{cursor:pointer}.ngx-gallery-svg-icon-bg{cursor:pointer;fill-opacity:.5}g:hover .ngx-gallery-svg-icon-bg{fill-opacity:.7}\n"] }); }
|
|
377
376
|
}
|
|
378
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
377
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGallerySvgIconComponent, decorators: [{
|
|
379
378
|
type: Component,
|
|
380
379
|
args: [{ selector: '[svg-icon]', standalone: false, template: "@for (svgIcon of svgIcons; track svgIcon; let i = $index) {\n <svg:g>\n <svg:rect class=\"ngx-gallery-svg-icon-bg\" [attr.x]=\"svgIcon.getPoint().getPosX()\"\n [attr.y]=\"svgIcon.getPoint().getPosY()\" rx=\"2\" ry=\"2\" [attr.width]=\"widths[i]\" [attr.height]=\"heights[i]\"\n fill=\"white\" [attr.stroke]=\"svgIcon.getColor()\" [attr.stroke-width]=\"2 * scaleFactor\">\n </svg:rect>\n <svg:a class=\"ngx-gallery-svg-icon\" (click)=\"open($event, svgIcon)\">\n <svg:image [attr.xlink:href]=\"svgIcon.getIconImageUrl()\" [attr.x]=\"svgIcon.getPoint().getPosX() + 1\"\n [attr.y]=\"svgIcon.getPoint().getPosY() + 1\" [attr.height]=\"heights[i] - 2\" [attr.width]=\"widths[i] - 2\">\n <!--<svg:title>{{ svgIcon.getDescription() }}</svg:title>-->\n </svg:image>\n </svg:a>\n </svg:g>\n}\n", styles: [".ngx-gallery-svg-icon{cursor:pointer}.ngx-gallery-svg-icon-bg{cursor:pointer;fill-opacity:.5}g:hover .ngx-gallery-svg-icon-bg{fill-opacity:.7}\n"] }]
|
|
381
380
|
}], propDecorators: { svgIcons: [{
|
|
@@ -391,10 +390,10 @@ class NgxGallerySvgArrowComponent {
|
|
|
391
390
|
ngOnInit() {
|
|
392
391
|
this.logService.log('NgxGallerySvgArrowComponent.ngOnInit', '...');
|
|
393
392
|
}
|
|
394
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
395
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
393
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGallerySvgArrowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
394
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: NgxGallerySvgArrowComponent, isStandalone: false, selector: "[svg-arrow]", inputs: { svgArrows: "svgArrows" }, ngImport: i0, template: "@for (svgArrow of svgArrows; track svgArrow; let i = $index) {\n <svg:marker id=\"pf1-{{i}}\" viewBox=\"0 0 10 10\" refX=\"0\" refY=\"5\" markerUnits=\"userSpaceOnUse\" markerWidth=\"10\"\n markerHeight=\"10\" orient=\"auto\">\n <svg:path d=\"M 0,0 l 10,5 l -10,5 z\" [attr.fill]=\"svgArrow.getColor()\" />\n </svg:marker>\n <svg:line [attr.x1]=\"svgArrow.getStartPoint().getPosX()\" [attr.stroke]=\"svgArrow.getColor()\"\n [attr.y1]=\"svgArrow.getStartPoint().getPosY()\" [attr.x2]=\"svgArrow.getDestPoint().getPosX()\"\n [attr.y2]=\"svgArrow.getDestPoint().getPosY()\" style=\"stroke-width:2;\"\n [attr.marker-end]=\"'url(#pf1-' + i +')'\" />\n}\n" }); }
|
|
396
395
|
}
|
|
397
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
396
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGallerySvgArrowComponent, decorators: [{
|
|
398
397
|
type: Component,
|
|
399
398
|
args: [{ selector: '[svg-arrow]', standalone: false, template: "@for (svgArrow of svgArrows; track svgArrow; let i = $index) {\n <svg:marker id=\"pf1-{{i}}\" viewBox=\"0 0 10 10\" refX=\"0\" refY=\"5\" markerUnits=\"userSpaceOnUse\" markerWidth=\"10\"\n markerHeight=\"10\" orient=\"auto\">\n <svg:path d=\"M 0,0 l 10,5 l -10,5 z\" [attr.fill]=\"svgArrow.getColor()\" />\n </svg:marker>\n <svg:line [attr.x1]=\"svgArrow.getStartPoint().getPosX()\" [attr.stroke]=\"svgArrow.getColor()\"\n [attr.y1]=\"svgArrow.getStartPoint().getPosY()\" [attr.x2]=\"svgArrow.getDestPoint().getPosX()\"\n [attr.y2]=\"svgArrow.getDestPoint().getPosY()\" style=\"stroke-width:2;\"\n [attr.marker-end]=\"'url(#pf1-' + i +')'\" />\n}\n" }]
|
|
400
399
|
}], propDecorators: { svgArrows: [{
|
|
@@ -414,10 +413,10 @@ class NgxGallerySvgTextComponent {
|
|
|
414
413
|
getCleanText(txt) {
|
|
415
414
|
return txt.replace(/<\/?[^>]+(>|$)/g, '');
|
|
416
415
|
}
|
|
417
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
418
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
416
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGallerySvgTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
417
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: NgxGallerySvgTextComponent, isStandalone: false, selector: "[svg-text]", inputs: { svgTexts: "svgTexts", width: "width", height: "height" }, usesOnChanges: true, ngImport: i0, template: "@for (svgText of svgTexts; track svgText) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" [attr.width]=\"width\" [attr.height]=\"height\" [attr.x]=\"svgText.getPosX()\"\n [attr.y]=\"svgText.getPosY()\" [attr.fill]=\"svgText.getColor()\" style=\"overflow: visible;\">\n <foreignObject [attr.width]=\"width\" [attr.height]=\"height\" class=\"node\" style=\"overflow: visible;\">\n <body xmlns=\"http://www.w3.org/1999/xhtml\">\n <div style=\" dominant-baseline: hanging;\" title={{getCleanText(svgText.getText())}} [innerHTML]=\"svgText.getText()\">\n </div>\n </body>\n </foreignObject>\n </svg>\n}\n", styles: [""] }); }
|
|
419
418
|
}
|
|
420
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
419
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGallerySvgTextComponent, decorators: [{
|
|
421
420
|
type: Component,
|
|
422
421
|
args: [{ selector: '[svg-text]', standalone: false, template: "@for (svgText of svgTexts; track svgText) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" [attr.width]=\"width\" [attr.height]=\"height\" [attr.x]=\"svgText.getPosX()\"\n [attr.y]=\"svgText.getPosY()\" [attr.fill]=\"svgText.getColor()\" style=\"overflow: visible;\">\n <foreignObject [attr.width]=\"width\" [attr.height]=\"height\" class=\"node\" style=\"overflow: visible;\">\n <body xmlns=\"http://www.w3.org/1999/xhtml\">\n <div style=\" dominant-baseline: hanging;\" title={{getCleanText(svgText.getText())}} [innerHTML]=\"svgText.getText()\">\n </div>\n </body>\n </foreignObject>\n </svg>\n}\n" }]
|
|
423
422
|
}], propDecorators: { svgTexts: [{
|
|
@@ -522,10 +521,10 @@ class NgxGalleryImageSvgComponent {
|
|
|
522
521
|
const heightScaleFactor = originalHeight / currentHeigth;
|
|
523
522
|
return Math.max(widthScaleFactor, heightScaleFactor);
|
|
524
523
|
}
|
|
525
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
526
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
524
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryImageSvgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
525
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: NgxGalleryImageSvgComponent, isStandalone: false, selector: "cc-imagesvg", inputs: { width: "width", height: "height", viewBox: "viewBox", posLeft: "posLeft", posTop: "posTop", zoomValue: "zoomValue", animation: "animation", addOns: "addOns", classGrab: "classGrab", styleTransform: "styleTransform", preview: "preview" }, viewQueries: [{ propertyName: "svgElement", first: true, predicate: ["svgElement"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" preserveAspectRatio=\"xMidYMid meet\"\n [attr.width]=\"width\" [attr.height]=\"height\" [attr.viewBox]=\"viewBox\" class=\"ngx-gallery-center\"\n [class.animation]=\"animation\" [class.ngx-gallery-preview-svg]=\"preview\" [class.ngx-gallery-image-svg]=\"!preview\"\n [class.ngx-gallery-grab]=\"classGrab\" [style.transform]=\"styleTransform\" [style.left]=\"posLeft\" [style.top]=\"posTop\"\n (click)=\"$event.stopPropagation()\" #svgElement>\n @if (!!svgArrows.length) {\n <svg:g svg-arrow [svgArrows]=\"svgArrows\"></svg:g>\n }\n @if (!!svgPolygons.length) {\n <svg:g svg-polygon [svgPolygons]=\"svgPolygons\"></svg:g>\n }\n @if (!!svgIcons.length) {\n <svg:g svg-icon [svgIcons]=\"svgIcons\" [scaleFactor]=\"scaleFactor\"></svg:g>\n }\n @if (!!svgTexts.length) {\n <svg:g svg-text [svgTexts]=\"svgTexts\" [width]=\"width\" [height]=\"height\"></svg:g>\n }\n</svg>\n", styles: [".ngx-gallery-center{position:absolute;inset:0;margin:auto}.ngx-gallery-image-svg{margin:0}.ngx-gallery-preview-svg{opacity:1;max-width:90%;max-height:90%;-webkit-user-select:none;user-select:none;transition:transform .5s}.ngx-gallery-preview-svg.animation{transition:opacity .5s linear,transform .5s}.ngx-gallery-preview-svg.ngx-gallery-active{opacity:1}.ngx-gallery-preview-svg.ngx-gallery-grab{cursor:grab;cursor:-webkit-grab}\n"], dependencies: [{ kind: "component", type: NgxGallerySvgPolygonComponent, selector: "[svg-polygon]", inputs: ["svgPolygons"] }, { kind: "component", type: NgxGallerySvgIconComponent, selector: "[svg-icon]", inputs: ["svgIcons", "scaleFactor"] }, { kind: "component", type: NgxGallerySvgArrowComponent, selector: "[svg-arrow]", inputs: ["svgArrows"] }, { kind: "component", type: NgxGallerySvgTextComponent, selector: "[svg-text]", inputs: ["svgTexts", "width", "height"] }] }); }
|
|
527
526
|
}
|
|
528
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
527
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryImageSvgComponent, decorators: [{
|
|
529
528
|
type: Component,
|
|
530
529
|
args: [{ selector: 'cc-imagesvg', standalone: false, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" preserveAspectRatio=\"xMidYMid meet\"\n [attr.width]=\"width\" [attr.height]=\"height\" [attr.viewBox]=\"viewBox\" class=\"ngx-gallery-center\"\n [class.animation]=\"animation\" [class.ngx-gallery-preview-svg]=\"preview\" [class.ngx-gallery-image-svg]=\"!preview\"\n [class.ngx-gallery-grab]=\"classGrab\" [style.transform]=\"styleTransform\" [style.left]=\"posLeft\" [style.top]=\"posTop\"\n (click)=\"$event.stopPropagation()\" #svgElement>\n @if (!!svgArrows.length) {\n <svg:g svg-arrow [svgArrows]=\"svgArrows\"></svg:g>\n }\n @if (!!svgPolygons.length) {\n <svg:g svg-polygon [svgPolygons]=\"svgPolygons\"></svg:g>\n }\n @if (!!svgIcons.length) {\n <svg:g svg-icon [svgIcons]=\"svgIcons\" [scaleFactor]=\"scaleFactor\"></svg:g>\n }\n @if (!!svgTexts.length) {\n <svg:g svg-text [svgTexts]=\"svgTexts\" [width]=\"width\" [height]=\"height\"></svg:g>\n }\n</svg>\n", styles: [".ngx-gallery-center{position:absolute;inset:0;margin:auto}.ngx-gallery-image-svg{margin:0}.ngx-gallery-preview-svg{opacity:1;max-width:90%;max-height:90%;-webkit-user-select:none;user-select:none;transition:transform .5s}.ngx-gallery-preview-svg.animation{transition:opacity .5s linear,transform .5s}.ngx-gallery-preview-svg.ngx-gallery-active{opacity:1}.ngx-gallery-preview-svg.ngx-gallery-grab{cursor:grab;cursor:-webkit-grab}\n"] }]
|
|
531
530
|
}], propDecorators: { width: [{
|
|
@@ -568,8 +567,8 @@ class NgxGalleryActionComponent {
|
|
|
568
567
|
event.stopPropagation();
|
|
569
568
|
event.preventDefault();
|
|
570
569
|
}
|
|
571
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
572
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
570
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
571
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: NgxGalleryActionComponent, isStandalone: false, selector: "ngx-gallery-action", inputs: { icon: "icon", disabled: "disabled", titleText: "titleText" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
|
|
573
572
|
<div class="ngx-gallery-icon" [class.ngx-gallery-icon-disabled]="disabled"
|
|
574
573
|
aria-hidden="true"
|
|
575
574
|
title="{{ titleText }}"
|
|
@@ -577,7 +576,7 @@ class NgxGalleryActionComponent {
|
|
|
577
576
|
<i class="ngx-gallery-icon-content {{ icon }}"></i>
|
|
578
577
|
</div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
579
578
|
}
|
|
580
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
579
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryActionComponent, decorators: [{
|
|
581
580
|
type: Component,
|
|
582
581
|
args: [{
|
|
583
582
|
selector: 'ngx-gallery-action',
|
|
@@ -612,8 +611,8 @@ class NgxGalleryArrowsComponent {
|
|
|
612
611
|
handleNextClick() {
|
|
613
612
|
this.onNextClick.emit();
|
|
614
613
|
}
|
|
615
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
616
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
614
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryArrowsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
615
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: NgxGalleryArrowsComponent, isStandalone: false, selector: "ngx-gallery-arrows", inputs: { prevDisabled: "prevDisabled", nextDisabled: "nextDisabled", arrowPrevIcon: "arrowPrevIcon", arrowNextIcon: "arrowNextIcon" }, outputs: { onPrevClick: "onPrevClick", onNextClick: "onNextClick" }, ngImport: i0, template: `
|
|
617
616
|
<div class="ngx-gallery-arrow-wrapper ngx-gallery-arrow-left">
|
|
618
617
|
<div class="ngx-gallery-icon ngx-gallery-arrow"
|
|
619
618
|
aria-hidden="true"
|
|
@@ -632,7 +631,7 @@ class NgxGalleryArrowsComponent {
|
|
|
632
631
|
</div>
|
|
633
632
|
`, isInline: true, styles: [".ngx-gallery-arrow-wrapper{position:absolute;height:100%;width:1px;display:table;z-index:2000;table-layout:fixed}.ngx-gallery-arrow-left{left:0}.ngx-gallery-arrow-right{right:0}.ngx-gallery-arrow{top:50%;width:50px;border-radius:50%;text-align:center;transform:translateY(-50%);background:#ffffff8c;cursor:pointer}.ngx-gallery-arrow.ngx-gallery-disabled{opacity:.6;cursor:default}.ngx-gallery-arrow-left .ngx-gallery-arrow{left:10px}.ngx-gallery-arrow-right .ngx-gallery-arrow{right:10px}\n"] }); }
|
|
634
633
|
}
|
|
635
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
634
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryArrowsComponent, decorators: [{
|
|
636
635
|
type: Component,
|
|
637
636
|
args: [{ selector: 'ngx-gallery-arrows', template: `
|
|
638
637
|
<div class="ngx-gallery-arrow-wrapper ngx-gallery-arrow-left">
|
|
@@ -677,8 +676,8 @@ class NgxGalleryBulletsComponent {
|
|
|
677
676
|
handleChange(event, index) {
|
|
678
677
|
this.onChange.emit(index);
|
|
679
678
|
}
|
|
680
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
681
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
679
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryBulletsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
680
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: NgxGalleryBulletsComponent, isStandalone: false, selector: "ngx-gallery-bullets", inputs: { count: "count", active: "active" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
|
|
682
681
|
@for (bullet of getBullets(); track bullet; let i = $index) {
|
|
683
682
|
<div class="ngx-gallery-bullet"
|
|
684
683
|
(click)="handleChange($event, i)"
|
|
@@ -687,7 +686,7 @@ class NgxGalleryBulletsComponent {
|
|
|
687
686
|
}
|
|
688
687
|
`, isInline: true, styles: [":host{position:absolute;z-index:2000;display:inline-flex;left:50%;transform:translate(-50%);bottom:0;padding:10px}.ngx-gallery-bullet{width:10px;height:10px;border-radius:50%;cursor:pointer;background:#fff}.ngx-gallery-bullet:not(:first-child){margin-left:5px}.ngx-gallery-bullet:hover,.ngx-gallery-bullet.ngx-gallery-active{background:#000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
689
688
|
}
|
|
690
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
689
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryBulletsComponent, decorators: [{
|
|
691
690
|
type: Component,
|
|
692
691
|
args: [{ selector: 'ngx-gallery-bullets', template: `
|
|
693
692
|
@for (bullet of getBullets(); track bullet; let i = $index) {
|
|
@@ -755,10 +754,10 @@ class NgxGalleryHelperService {
|
|
|
755
754
|
removeSwipeHandlers(id) {
|
|
756
755
|
this.swipeHandlers.delete(id);
|
|
757
756
|
}
|
|
758
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
759
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
757
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
758
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryHelperService, providedIn: 'root' }); }
|
|
760
759
|
}
|
|
761
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
760
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryHelperService, decorators: [{
|
|
762
761
|
type: Injectable,
|
|
763
762
|
args: [{
|
|
764
763
|
providedIn: 'root'
|
|
@@ -795,10 +794,10 @@ class UtilsScriptComponent {
|
|
|
795
794
|
ngAfterViewInit() {
|
|
796
795
|
this.convertToScript();
|
|
797
796
|
}
|
|
798
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
799
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
797
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UtilsScriptComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
798
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: UtilsScriptComponent, isStandalone: false, selector: "script-js", inputs: { src: "src", type: "type" }, viewQueries: [{ propertyName: "script", first: true, predicate: ["script"], descendants: true, static: true }], ngImport: i0, template: "<div #script style.display=\"none\">\n <ng-content></ng-content>\n</div>\n" }); }
|
|
800
799
|
}
|
|
801
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
800
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UtilsScriptComponent, decorators: [{
|
|
802
801
|
type: Component,
|
|
803
802
|
args: [{ selector: 'script-js', standalone: false, template: "<div #script style.display=\"none\">\n <ng-content></ng-content>\n</div>\n" }]
|
|
804
803
|
}], propDecorators: { src: [{
|
|
@@ -846,12 +845,12 @@ class NgxGalleryVideoComponent {
|
|
|
846
845
|
timeUpdate() {
|
|
847
846
|
this.logService.log('NgxGalleryImageComponent.timeUpdate', this.mmelement.nativeElement.currentTime);
|
|
848
847
|
}
|
|
849
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
850
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
848
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
849
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: NgxGalleryVideoComponent, isStandalone: false, selector: "cc-video", inputs: { image: "image", selectedIndex: "selectedIndex", showDescription: "showDescription", description: "description", mediaInfo: "mediaInfo", fitVideoToScreen: "fitVideoToScreen" }, viewQueries: [{ propertyName: "mmelement", first: true, predicate: ["mmelement"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"ngx-gallery-image\" [ngClass]=\"{ 'ngx-gallery-active': selectedIndex === image.index,\n 'ngx-gallery-inactive-left': selectedIndex > image.index,\n 'ngx-gallery-inactive-right': selectedIndex < image.index}\"\n [style.align-items]=\"mediaAlignment\">\n @if (selectedIndex === image.index) {\n <div id=\"player_{{image.id}}\" class=\"player\" title=\"{{showDescription && description ? description : ''}}\"\n [style.width.px]=\"width\" [style.height.px]=\"height\">\n <video #mmelement [width]=\"mediaInfo['bwidth']\" [height]=\"mediaInfo['bheight']\"\n title=\"{{showDescription && description ? description : ''}}\" poster=\"{{image.poster}}\"\n autoplay=\"{{image.autoplay ? 'autoplay': ''}}\">\n @for (url of image.urls; track url.url; let i = $index) {\n <source [src]=\"getSafeVideoUrl(url.url)\" type=\"{{url.mimeType}}\">\n }\n </video>\n <!--\n ratio: 9/10,\n // old configured ratio ...\n ratio: {{mediaInfo && mediaInfo ? mediaInfo[\"bwidth\"] / mediaInfo[\"bheight\"] : 1 }},\n -->\n <script-js>\n $(function () {{ '{' }}\n $('#player_{{image.id}}').flowplayer({{ '{' }}\n chromecast: false,\n ratio: 9 / 10,\n title: '{{showDescription && description ? description : ''}}',\n loop: {{image.loop || false }},\n embed: {{ '{' }}\n skin: \"node_modules/flowplayer/dist/skin/skin.css\"\n },\n onBeforeFinish: function(){{ '{' }}\n return false;\n }\n });\n });\n </script-js>\n </div>\n }\n @if (showDescription && description) {\n <div class=\"ngx-gallery-video-text\" [innerHTML]=\"description\">\n </div>\n }\n</div>\n", styles: [".ngx-gallery-image{display:flex;justify-content:center;background-position:center;background-repeat:no-repeat;height:100%;width:100%;position:absolute;top:0}.ngx-gallery-image.ngx-gallery-active{z-index:1000}.ngx-gallery-image{background-color:#fff}.ngx-gallery-image-size-cover .ngx-gallery-image{background-size:cover}.ngx-gallery-image-size-contain .ngx-gallery-image{background-size:contain}.ngx-gallery-video-text{width:100%;background:#000000b3;padding:10px;text-align:center;color:#fff;font-size:16px;position:absolute;bottom:0;z-index:10;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ngx-gallery-video-text-old{width:100%;height:5%;padding:10px;text-align:center;font-size:16px;bottom:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.flowplayer{max-height:95%}video{object-fit:contain}:host ::ng-deep .ngx-gallery-icons-wrapper .ngx-gallery-icon{color:#000}:host ::ng-deep .ngx-gallery-icons-wrapper .ngx-gallery-icon.ngx-gallery-icon-disabled{cursor:default;opacity:.4}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UtilsScriptComponent, selector: "script-js", inputs: ["src", "type"] }] }); }
|
|
851
850
|
}
|
|
852
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
851
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryVideoComponent, decorators: [{
|
|
853
852
|
type: Component,
|
|
854
|
-
args: [{ selector: 'cc-video', standalone: false, template: "<div class=\"ngx-gallery-image\" [ngClass]=\"{ 'ngx-gallery-active': selectedIndex === image.index,\n 'ngx-gallery-inactive-left': selectedIndex > image.index,\n 'ngx-gallery-inactive-right': selectedIndex < image.index}\"\n [style.align-items]=\"mediaAlignment\">\n @if (selectedIndex === image.index) {\n <div id=\"player_{{image.id}}\" class=\"player\" title=\"{{showDescription && description ? description : ''}}\"\n [style.width.px]=\"width\" [style.height.px]=\"height\">\n <video #mmelement [width]=\"mediaInfo['bwidth']\" [height]=\"mediaInfo['bheight']\"\n title=\"{{showDescription && description ? description : ''}}\" poster=\"{{image.poster}}\"\n autoplay=\"{{image.autoplay ? 'autoplay': ''}}\">\n @for (url of image.urls; track url.url; let i = $index) {\n <source [src]=\"getSafeVideoUrl(url.url)\" type=\"{{url.mimeType}}\">\n }\n </video>\n <!--\n ratio: 9/10,\n // old configured ratio ...\n ratio: {{mediaInfo && mediaInfo ? mediaInfo[\"bwidth\"] / mediaInfo[\"bheight\"] : 1 }},\n -->\n <script-js>\n $(function () {{ '{' }}\n $('#player_{{image.id}}').flowplayer({{ '{' }}\n chromecast: false,\n ratio: 9 / 10,\n title: '{{showDescription && description ? description : ''}}',\n loop: {{image.loop || false }},\n embed: {{ '{' }}\n skin: \"node_modules/flowplayer/dist/skin/skin.css\"\n },\n onBeforeFinish: function(){{ '{' }}\n return false;\n }\n });\n });\n </script-js>\n </div>\n }\n @if (showDescription && description) {\n <div class=\"ngx-gallery-video-text\" [innerHTML]=\"description\">\n </div>\n }\n</div>\n", styles: [".ngx-gallery-image{display:flex;justify-content:center;background-position:center;background-repeat:no-repeat;height:100%;width:100%;position:absolute;top:0
|
|
853
|
+
args: [{ selector: 'cc-video', standalone: false, template: "<div class=\"ngx-gallery-image\" [ngClass]=\"{ 'ngx-gallery-active': selectedIndex === image.index,\n 'ngx-gallery-inactive-left': selectedIndex > image.index,\n 'ngx-gallery-inactive-right': selectedIndex < image.index}\"\n [style.align-items]=\"mediaAlignment\">\n @if (selectedIndex === image.index) {\n <div id=\"player_{{image.id}}\" class=\"player\" title=\"{{showDescription && description ? description : ''}}\"\n [style.width.px]=\"width\" [style.height.px]=\"height\">\n <video #mmelement [width]=\"mediaInfo['bwidth']\" [height]=\"mediaInfo['bheight']\"\n title=\"{{showDescription && description ? description : ''}}\" poster=\"{{image.poster}}\"\n autoplay=\"{{image.autoplay ? 'autoplay': ''}}\">\n @for (url of image.urls; track url.url; let i = $index) {\n <source [src]=\"getSafeVideoUrl(url.url)\" type=\"{{url.mimeType}}\">\n }\n </video>\n <!--\n ratio: 9/10,\n // old configured ratio ...\n ratio: {{mediaInfo && mediaInfo ? mediaInfo[\"bwidth\"] / mediaInfo[\"bheight\"] : 1 }},\n -->\n <script-js>\n $(function () {{ '{' }}\n $('#player_{{image.id}}').flowplayer({{ '{' }}\n chromecast: false,\n ratio: 9 / 10,\n title: '{{showDescription && description ? description : ''}}',\n loop: {{image.loop || false }},\n embed: {{ '{' }}\n skin: \"node_modules/flowplayer/dist/skin/skin.css\"\n },\n onBeforeFinish: function(){{ '{' }}\n return false;\n }\n });\n });\n </script-js>\n </div>\n }\n @if (showDescription && description) {\n <div class=\"ngx-gallery-video-text\" [innerHTML]=\"description\">\n </div>\n }\n</div>\n", styles: [".ngx-gallery-image{display:flex;justify-content:center;background-position:center;background-repeat:no-repeat;height:100%;width:100%;position:absolute;top:0}.ngx-gallery-image.ngx-gallery-active{z-index:1000}.ngx-gallery-image{background-color:#fff}.ngx-gallery-image-size-cover .ngx-gallery-image{background-size:cover}.ngx-gallery-image-size-contain .ngx-gallery-image{background-size:contain}.ngx-gallery-video-text{width:100%;background:#000000b3;padding:10px;text-align:center;color:#fff;font-size:16px;position:absolute;bottom:0;z-index:10;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ngx-gallery-video-text-old{width:100%;height:5%;padding:10px;text-align:center;font-size:16px;bottom:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.flowplayer{max-height:95%}video{object-fit:contain}:host ::ng-deep .ngx-gallery-icons-wrapper .ngx-gallery-icon{color:#000}:host ::ng-deep .ngx-gallery-icons-wrapper .ngx-gallery-icon.ngx-gallery-icon-disabled{cursor:default;opacity:.4}\n"] }]
|
|
855
854
|
}], propDecorators: { mmelement: [{
|
|
856
855
|
type: ViewChild,
|
|
857
856
|
args: ['mmelement', { static: true }]
|
|
@@ -1034,12 +1033,12 @@ class NgxGalleryImageComponent {
|
|
|
1034
1033
|
getBackgroundSize(index) {
|
|
1035
1034
|
return (this.mtypes[index] === 'pdf' ? '400px' : '100%');
|
|
1036
1035
|
}
|
|
1037
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1038
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1036
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1037
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: NgxGalleryImageComponent, isStandalone: false, selector: "ngx-gallery-image", inputs: { name: "name", images: "images", imageWidth: "imageWidth", imageHeight: "imageHeight", imageVBox: "imageVBox", positionX: "positionX", positionY: "positionY", mediaInfos: "mediaInfos", hasVideo: "hasVideo", links: "links", clickable: "clickable", selectedIndex: "selectedIndex", arrows: "arrows", arrowsAutoHide: "arrowsAutoHide", swipe: "swipe", animation: "animation", size: "size", arrowPrevIcon: "arrowPrevIcon", arrowNextIcon: "arrowNextIcon", autoPlay: "autoPlay", autoPlayInterval: "autoPlayInterval", autoPlayPauseOnHover: "autoPlayPauseOnHover", infinityMove: "infinityMove", lazyLoading: "lazyLoading", actions: "actions", descriptions: "descriptions", types: "types", mtypes: "mtypes", widths: "widths", heights: "heights", showDescription: "showDescription", bullets: "bullets", interactive: "interactive", isSVGActive: "isSVGActive", interactiveIcon: "interactiveIcon" }, outputs: { onClick: "onClick", onActiveChange: "onActiveChange" }, usesOnChanges: true, ngImport: i0, template: "@for (image of getImages(); track image.id; let i = $index) {\n <div class=\"ngx-gallery-image-wrapper ngx-gallery-animation-{{animation}} ngx-gallery-image-size-{{size}}\"\n >\n @if (mtypes[image.index] === 'image' || mtypes[image.index] === 'pdf') {\n <div class=\"ngx-gallery-image\"\n [ngClass]=\"{\n 'ngx-gallery-active': selectedIndex === image.index,\n 'ngx-gallery-inactive-left': selectedIndex > image.index,\n 'ngx-gallery-inactive-right': selectedIndex < image.index,\n 'ngx-gallery-clickable': clickable\n }\"\n [style.background-image]=\"getSafeUrl(image.src)\"\n [style.background-size]=\"getBackgroundSize(image.index)\"\n (click)=\"handleClick($event, image.index)\" >\n <div class=\"ngx-gallery-icons-wrapper ngx-gallery-actionicon-image\">\n @for (action of actions; track action.titleText) {\n @if (!action.disabled) {\n <ngx-gallery-action\n [icon]=\"action.icon\"\n [disabled]=\"action.disabled\"\n [titleText]=\"action.titleText\"\n (onClick)=\"action.onClick($event, image.index)\">\n </ngx-gallery-action>\n }\n }\n </div>\n @if (isSVGActive && !!image.addOns.length) {\n <cc-imagesvg\n [animation]=\"animation\"\n [width]=\"imageWidth[image.index]\"\n [height]=\"imageHeight[image.index]\"\n [viewBox]=\"imageVBox[image.index]\"\n [posLeft]=\"positionX[image.index] + 'px'\"\n [posTop]=\"positionY[image.index] + 'px'\"\n [zoomValue]=\"zoomValue\"\n [addOns]=\"image.addOns\">\n </cc-imagesvg>\n }\n @if (showDescription && descriptions[image.index]) {\n <div class=\"ngx-gallery-image-text\"\n [innerHTML]=\"descriptions[image.index] | safeHtml\"\n (click)=\"$event.stopPropagation()\">\n </div>\n }\n </div>\n }\n @if (mtypes[image.index] === 'audio' || mtypes[image.index] === 'video') {\n <cc-video\n [selectedIndex]=\"selectedIndex\"\n [image]=\"image\"\n [showDescription]=\"showDescription\"\n [description]=\"showDescription ? descriptions[image.index] : ''\"\n [mediaInfo]=\"mediaInfos[image.index]\"\n ></cc-video>\n }\n @if (mtypes[selectedIndex] === 'video') {\n <div >\n <div class=\"ngx-gallery-icons-wrapper ngx-gallery-actionicon-image\">\n @for (action of actions; track action) {\n @if (!action.disabled && action.titleText !== 'full screen') {\n <ngx-gallery-action\n [icon]=\"action.icon\"\n [disabled]=\"action.disabled\"\n [titleText]=\"action.titleText\"\n (onClick)=\"action.onClick($event, selectedIndex)\">\n </ngx-gallery-action>\n }\n }\n </div>\n </div>\n }\n </div>\n}\n@if (bullets) {\n <ngx-gallery-bullets [count]=\"images.length\" [active]=\"selectedIndex\" (onChange)=\"show($event)\"></ngx-gallery-bullets>\n}\n@if (arrows) {\n <ngx-gallery-arrows class=\"ngx-gallery-image-size-{{size}}\"\n (onPrevClick)=\"showPrev()\"\n (onNextClick)=\"showNext()\"\n [prevDisabled]=\"!canShowPrev()\"\n [nextDisabled]=\"!canShowNext()\"\n [arrowPrevIcon]=\"arrowPrevIcon\"\n [arrowNextIcon]=\"arrowNextIcon\">\n </ngx-gallery-arrows>\n}", styles: [":host{width:100%;display:inline-block;position:relative}.ngx-gallery-image-wrapper{width:100%;height:100%;position:absolute;left:0;top:0;overflow:hidden}.ngx-gallery-image{background-position:center;background-repeat:no-repeat;height:100%;width:100%;position:absolute;top:0}.ngx-gallery-image.ngx-gallery-active{z-index:1000}.ngx-gallery-image{border:1px solid #e8e8e8;border-radius:4px;overflow:hidden;background-color:#fff}.ngx-gallery-image-size-cover .ngx-gallery-image{background-size:cover}.ngx-gallery-image-size-contain .ngx-gallery-image{background-size:contain}.ngx-gallery-animation-fade .ngx-gallery-image{left:0;opacity:0;transition:.5s ease-in-out}.ngx-gallery-animation-fade .ngx-gallery-image.ngx-gallery-active{opacity:1}.ngx-gallery-animation-slide .ngx-gallery-image{transition:.5s ease-in-out}.ngx-gallery-animation-slide .ngx-gallery-image.ngx-gallery-active{left:0}.ngx-gallery-animation-slide .ngx-gallery-image.ngx-gallery-inactive-left{left:-100%}.ngx-gallery-animation-slide .ngx-gallery-image.ngx-gallery-inactive-right{left:100%}.ngx-gallery-animation-rotate .ngx-gallery-image{transition:1s ease;transform:scale(3.5) rotate(90deg);left:0;opacity:0}.ngx-gallery-animation-rotate .ngx-gallery-image.ngx-gallery-active{transform:scale(1) rotate(0);opacity:1}.ngx-gallery-animation-zoom .ngx-gallery-image{transition:1s ease;transform:scale(2.5);left:0;opacity:0}.ngx-gallery-animation-zoom .ngx-gallery-image.ngx-gallery-active{transform:scale(1);opacity:1}.ngx-gallery-image-text{width:100%;background:#000000b3;padding:10px;text-align:center;color:#fff;font-size:16px;position:absolute;bottom:0;z-index:10;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ngx-gallery-image-text a{color:#fff}:host ::ng-deep .ngx-gallery-icons-wrapper .ngx-gallery-icon{color:#000}:host ::ng-deep .ngx-gallery-icons-wrapper .ngx-gallery-icon.ngx-gallery-icon-disabled{cursor:default;opacity:.4}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NgxGalleryActionComponent, selector: "ngx-gallery-action", inputs: ["icon", "disabled", "titleText"], outputs: ["onClick"] }, { kind: "component", type: NgxGalleryArrowsComponent, selector: "ngx-gallery-arrows", inputs: ["prevDisabled", "nextDisabled", "arrowPrevIcon", "arrowNextIcon"], outputs: ["onPrevClick", "onNextClick"] }, { kind: "component", type: NgxGalleryBulletsComponent, selector: "ngx-gallery-bullets", inputs: ["count", "active"], outputs: ["onChange"] }, { kind: "component", type: NgxGalleryImageSvgComponent, selector: "cc-imagesvg", inputs: ["width", "height", "viewBox", "posLeft", "posTop", "zoomValue", "animation", "addOns", "classGrab", "styleTransform", "preview"] }, { kind: "component", type: NgxGalleryVideoComponent, selector: "cc-video", inputs: ["image", "selectedIndex", "showDescription", "description", "mediaInfo", "fitVideoToScreen"] }, { kind: "pipe", type: i7.SafeHtmlPipe, name: "safeHtml" }] }); }
|
|
1039
1038
|
}
|
|
1040
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1039
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryImageComponent, decorators: [{
|
|
1041
1040
|
type: Component,
|
|
1042
|
-
args: [{ selector: 'ngx-gallery-image', standalone: false, template: "@for (image of getImages(); track image.id; let i = $index) {\n <div class=\"ngx-gallery-image-wrapper ngx-gallery-animation-{{animation}} ngx-gallery-image-size-{{size}}\"\n >\n @if (mtypes[image.index] === 'image' || mtypes[image.index] === 'pdf') {\n <div class=\"ngx-gallery-image\"\n [ngClass]=\"{\n 'ngx-gallery-active': selectedIndex === image.index,\n 'ngx-gallery-inactive-left': selectedIndex > image.index,\n 'ngx-gallery-inactive-right': selectedIndex < image.index,\n 'ngx-gallery-clickable': clickable\n }\"\n [style.background-image]=\"getSafeUrl(image.src)\"\n [style.background-size]=\"getBackgroundSize(image.index)\"\n (click)=\"handleClick($event, image.index)\" >\n <div class=\"ngx-gallery-icons-wrapper ngx-gallery-actionicon-image\">\n @for (action of actions; track action.titleText) {\n @if (!action.disabled) {\n <ngx-gallery-action\n [icon]=\"action.icon\"\n [disabled]=\"action.disabled\"\n [titleText]=\"action.titleText\"\n (onClick)=\"action.onClick($event, image.index)\">\n </ngx-gallery-action>\n }\n }\n </div>\n @if (isSVGActive && !!image.addOns.length) {\n <cc-imagesvg\n [animation]=\"animation\"\n [width]=\"imageWidth[image.index]\"\n [height]=\"imageHeight[image.index]\"\n [viewBox]=\"imageVBox[image.index]\"\n [posLeft]=\"positionX[image.index] + 'px'\"\n [posTop]=\"positionY[image.index] + 'px'\"\n [zoomValue]=\"zoomValue\"\n [addOns]=\"image.addOns\">\n </cc-imagesvg>\n }\n @if (showDescription && descriptions[image.index]) {\n <div class=\"ngx-gallery-image-text\"\n [innerHTML]=\"descriptions[image.index] | safeHtml\"\n (click)=\"$event.stopPropagation()\">\n </div>\n }\n </div>\n }\n @if (mtypes[image.index] === 'audio' || mtypes[image.index] === 'video') {\n <cc-video\n [selectedIndex]=\"selectedIndex\"\n [image]=\"image\"\n [showDescription]=\"showDescription\"\n [description]=\"showDescription ? descriptions[image.index] : ''\"\n [mediaInfo]=\"mediaInfos[image.index]\"\n ></cc-video>\n }\n @if (mtypes[selectedIndex] === 'video') {\n <div >\n <div class=\"ngx-gallery-icons-wrapper ngx-gallery-actionicon-image\">\n @for (action of actions; track action) {\n @if (!action.disabled && action.titleText !== 'full screen') {\n <ngx-gallery-action\n [icon]=\"action.icon\"\n [disabled]=\"action.disabled\"\n [titleText]=\"action.titleText\"\n (onClick)=\"action.onClick($event, selectedIndex)\">\n </ngx-gallery-action>\n }\n }\n </div>\n </div>\n }\n </div>\n}\n@if (bullets) {\n <ngx-gallery-bullets [count]=\"images.length\" [active]=\"selectedIndex\" (onChange)=\"show($event)\"></ngx-gallery-bullets>\n}\n@if (arrows) {\n <ngx-gallery-arrows class=\"ngx-gallery-image-size-{{size}}\"\n (onPrevClick)=\"showPrev()\"\n (onNextClick)=\"showNext()\"\n [prevDisabled]=\"!canShowPrev()\"\n [nextDisabled]=\"!canShowNext()\"\n [arrowPrevIcon]=\"arrowPrevIcon\"\n [arrowNextIcon]=\"arrowNextIcon\">\n </ngx-gallery-arrows>\n}", styles: [":host{width:100%;display:inline-block;position:relative}.ngx-gallery-image-wrapper{width:100%;height:100%;position:absolute;left:0;top:0;overflow:hidden}.ngx-gallery-image{background-position:center;background-repeat:no-repeat;height:100%;width:100%;position:absolute;top:0
|
|
1041
|
+
args: [{ selector: 'ngx-gallery-image', standalone: false, template: "@for (image of getImages(); track image.id; let i = $index) {\n <div class=\"ngx-gallery-image-wrapper ngx-gallery-animation-{{animation}} ngx-gallery-image-size-{{size}}\"\n >\n @if (mtypes[image.index] === 'image' || mtypes[image.index] === 'pdf') {\n <div class=\"ngx-gallery-image\"\n [ngClass]=\"{\n 'ngx-gallery-active': selectedIndex === image.index,\n 'ngx-gallery-inactive-left': selectedIndex > image.index,\n 'ngx-gallery-inactive-right': selectedIndex < image.index,\n 'ngx-gallery-clickable': clickable\n }\"\n [style.background-image]=\"getSafeUrl(image.src)\"\n [style.background-size]=\"getBackgroundSize(image.index)\"\n (click)=\"handleClick($event, image.index)\" >\n <div class=\"ngx-gallery-icons-wrapper ngx-gallery-actionicon-image\">\n @for (action of actions; track action.titleText) {\n @if (!action.disabled) {\n <ngx-gallery-action\n [icon]=\"action.icon\"\n [disabled]=\"action.disabled\"\n [titleText]=\"action.titleText\"\n (onClick)=\"action.onClick($event, image.index)\">\n </ngx-gallery-action>\n }\n }\n </div>\n @if (isSVGActive && !!image.addOns.length) {\n <cc-imagesvg\n [animation]=\"animation\"\n [width]=\"imageWidth[image.index]\"\n [height]=\"imageHeight[image.index]\"\n [viewBox]=\"imageVBox[image.index]\"\n [posLeft]=\"positionX[image.index] + 'px'\"\n [posTop]=\"positionY[image.index] + 'px'\"\n [zoomValue]=\"zoomValue\"\n [addOns]=\"image.addOns\">\n </cc-imagesvg>\n }\n @if (showDescription && descriptions[image.index]) {\n <div class=\"ngx-gallery-image-text\"\n [innerHTML]=\"descriptions[image.index] | safeHtml\"\n (click)=\"$event.stopPropagation()\">\n </div>\n }\n </div>\n }\n @if (mtypes[image.index] === 'audio' || mtypes[image.index] === 'video') {\n <cc-video\n [selectedIndex]=\"selectedIndex\"\n [image]=\"image\"\n [showDescription]=\"showDescription\"\n [description]=\"showDescription ? descriptions[image.index] : ''\"\n [mediaInfo]=\"mediaInfos[image.index]\"\n ></cc-video>\n }\n @if (mtypes[selectedIndex] === 'video') {\n <div >\n <div class=\"ngx-gallery-icons-wrapper ngx-gallery-actionicon-image\">\n @for (action of actions; track action) {\n @if (!action.disabled && action.titleText !== 'full screen') {\n <ngx-gallery-action\n [icon]=\"action.icon\"\n [disabled]=\"action.disabled\"\n [titleText]=\"action.titleText\"\n (onClick)=\"action.onClick($event, selectedIndex)\">\n </ngx-gallery-action>\n }\n }\n </div>\n </div>\n }\n </div>\n}\n@if (bullets) {\n <ngx-gallery-bullets [count]=\"images.length\" [active]=\"selectedIndex\" (onChange)=\"show($event)\"></ngx-gallery-bullets>\n}\n@if (arrows) {\n <ngx-gallery-arrows class=\"ngx-gallery-image-size-{{size}}\"\n (onPrevClick)=\"showPrev()\"\n (onNextClick)=\"showNext()\"\n [prevDisabled]=\"!canShowPrev()\"\n [nextDisabled]=\"!canShowNext()\"\n [arrowPrevIcon]=\"arrowPrevIcon\"\n [arrowNextIcon]=\"arrowNextIcon\">\n </ngx-gallery-arrows>\n}", styles: [":host{width:100%;display:inline-block;position:relative}.ngx-gallery-image-wrapper{width:100%;height:100%;position:absolute;left:0;top:0;overflow:hidden}.ngx-gallery-image{background-position:center;background-repeat:no-repeat;height:100%;width:100%;position:absolute;top:0}.ngx-gallery-image.ngx-gallery-active{z-index:1000}.ngx-gallery-image{border:1px solid #e8e8e8;border-radius:4px;overflow:hidden;background-color:#fff}.ngx-gallery-image-size-cover .ngx-gallery-image{background-size:cover}.ngx-gallery-image-size-contain .ngx-gallery-image{background-size:contain}.ngx-gallery-animation-fade .ngx-gallery-image{left:0;opacity:0;transition:.5s ease-in-out}.ngx-gallery-animation-fade .ngx-gallery-image.ngx-gallery-active{opacity:1}.ngx-gallery-animation-slide .ngx-gallery-image{transition:.5s ease-in-out}.ngx-gallery-animation-slide .ngx-gallery-image.ngx-gallery-active{left:0}.ngx-gallery-animation-slide .ngx-gallery-image.ngx-gallery-inactive-left{left:-100%}.ngx-gallery-animation-slide .ngx-gallery-image.ngx-gallery-inactive-right{left:100%}.ngx-gallery-animation-rotate .ngx-gallery-image{transition:1s ease;transform:scale(3.5) rotate(90deg);left:0;opacity:0}.ngx-gallery-animation-rotate .ngx-gallery-image.ngx-gallery-active{transform:scale(1) rotate(0);opacity:1}.ngx-gallery-animation-zoom .ngx-gallery-image{transition:1s ease;transform:scale(2.5);left:0;opacity:0}.ngx-gallery-animation-zoom .ngx-gallery-image.ngx-gallery-active{transform:scale(1);opacity:1}.ngx-gallery-image-text{width:100%;background:#000000b3;padding:10px;text-align:center;color:#fff;font-size:16px;position:absolute;bottom:0;z-index:10;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ngx-gallery-image-text a{color:#fff}:host ::ng-deep .ngx-gallery-icons-wrapper .ngx-gallery-icon{color:#000}:host ::ng-deep .ngx-gallery-icons-wrapper .ngx-gallery-icon.ngx-gallery-icon-disabled{cursor:default;opacity:.4}\n"] }]
|
|
1043
1042
|
}], propDecorators: { name: [{
|
|
1044
1043
|
type: Input
|
|
1045
1044
|
}], images: [{
|
|
@@ -1476,7 +1475,6 @@ class NgxGalleryPreviewComponent {
|
|
|
1476
1475
|
exitFullscreenFn: 'msExitFullscreen',
|
|
1477
1476
|
}
|
|
1478
1477
|
];
|
|
1479
|
-
/* eslint-disable @typescript-eslint/prefer-for-of */
|
|
1480
1478
|
for (let index = 0; index < fullscreenPolyfills.length; index++) {
|
|
1481
1479
|
const fullscreenPolyfill = fullscreenPolyfills[index];
|
|
1482
1480
|
if (doc[fullscreenPolyfill.fullscreenElement] !== null && doc[fullscreenPolyfill.exitFullscreenFn]) {
|
|
@@ -1548,10 +1546,10 @@ class NgxGalleryPreviewComponent {
|
|
|
1548
1546
|
}
|
|
1549
1547
|
return this.ordImages;
|
|
1550
1548
|
}
|
|
1551
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1552
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: NgxGalleryPreviewComponent, isStandalone: false, selector: "ngx-gallery-preview", inputs: { prevIndex: "prevIndex", images: "images", ordImages: "ordImages", mediaInfos: "mediaInfos", links: "links", descriptions: "descriptions", types: "types", mtypes: "mtypes", widths: "widths", heights: "heights", showDescription: "showDescription", swipe: "swipe", fullscreen: "fullscreen", forceFullscreen: "forceFullscreen", closeOnClick: "closeOnClick", closeOnEsc: "closeOnEsc", keyboardNavigation: "keyboardNavigation", arrowPrevIcon: "arrowPrevIcon", arrowNextIcon: "arrowNextIcon", closeIcon: "closeIcon", fullscreenIcon: "fullscreenIcon", spinnerIcon: "spinnerIcon", autoPlay: "autoPlay", autoPlayInterval: "autoPlayInterval", autoPlayPauseOnHover: "autoPlayPauseOnHover", infinityMove: "infinityMove", interactive: "interactive", isSVGActive: "isSVGActive", zoom: "zoom", zoomStep: "zoomStep", zoomMax: "zoomMax", zoomMin: "zoomMin", interactiveIcon: "interactiveIcon", zoomInIcon: "zoomInIcon", zoomOutIcon: "zoomOutIcon", animation: "animation", actions: "actions", rotate: "rotate", rotateLeftIcon: "rotateLeftIcon", rotateRightIcon: "rotateRightIcon", download: "download", downloadIcon: "downloadIcon", bullets: "bullets", name: "name" }, outputs: { onOpen: "onOpen", onClose: "onClose", onActiveChange: "onActiveChange" }, host: { properties: { "class.ngx-gallery-active": "this.isActive" } }, viewQueries: [{ propertyName: "previewImage", first: true, predicate: ["previewImage"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ngx-gallery-arrows\n (onPrevClick)=\"showPrev()\"\n (onNextClick)=\"showNext()\"\n [prevDisabled]=\"!canShowPrev()\"\n [nextDisabled]=\"!canShowNext()\"\n [arrowPrevIcon]=\"arrowPrevIcon\"\n [arrowNextIcon]=\"arrowNextIcon\">\n</ngx-gallery-arrows>\n\n<div class=\"ngx-gallery-preview-top\">\n <div class=\"ngx-gallery-preview-icons\">\n @for (action of actions; track action.titleText) {\n @if (!action.disabled) {\n <ngx-gallery-action\n [icon]=\"action.icon\"\n [disabled]=\"action.disabled\"\n [titleText]=\"action.titleText\"\n (onClick)=\"action.onClick($event, index)\">\n </ngx-gallery-action>\n }\n }\n\n @if (download && src) {\n <a [href]=\"src\" class=\"ngx-gallery-icon\" aria-hidden=\"true\" download>\n <i class=\"ngx-gallery-icon-content {{ downloadIcon }}\"></i>\n </a>\n }\n @if (zoom) {\n <ngx-gallery-action [icon]=\"zoomOutIcon\" [disabled]=\"! isZoomableOut\" (onClick)=\"zoomOut()\"></ngx-gallery-action>\n <ngx-gallery-action [icon]=\"zoomInIcon\" [disabled]=\"! isZoomableIn\" (onClick)=\"zoomIn()\"></ngx-gallery-action>\n }\n @if (rotate) {\n <ngx-gallery-action [icon]=\"rotateLeftIcon\" (onClick)=\"rotateLeft()\"></ngx-gallery-action>\n <ngx-gallery-action [icon]=\"rotateRightIcon\" (onClick)=\"rotateRight()\"></ngx-gallery-action>\n }\n @if (fullscreen) {\n <ngx-gallery-action [icon]=\"'ngx-gallery-fullscreen ' + fullscreenIcon\" (onClick)=\"manageFullscreen()\"></ngx-gallery-action>\n }\n @if (mtypes[index] === 'video' && isVideoLowerScreenResolution()) {\n <ngx-gallery-action [icon]=\"fullscreenIcon\" (onClick)=\"fitVideoToScreen = !fitVideoToScreen\"></ngx-gallery-action>\n }\n @if (closeIcon) {\n <ngx-gallery-action [icon]=\"'ngx-gallery-close ' + closeIcon\" (onClick)=\"close()\"></ngx-gallery-action>\n }\n </div>\n</div>\n<div class=\"ngx-spinner-wrapper ngx-gallery-center\" [class.ngx-gallery-active]=\"showSpinner\">\n <i class=\"ngx-gallery-icon ngx-gallery-spinner {{spinnerIcon}}\" aria-hidden=\"true\"></i>\n</div>\n\n@switch (mtypes[index]) {\n @case ('video') {\n <ng-container *ngTemplateOutlet=\"videoAudio\"></ng-container>\n }\n @case ('audio') {\n <ng-container *ngTemplateOutlet=\"videoAudio\"></ng-container>\n }\n @case ('campus') {\n @if (isOpen) {\n <iframe [src]=\"src\"></iframe>\n }\n }\n @case ('pdf') {\n @if (isOpen) {\n <iframe [src]=\"link\" style=\"position: absolute; top: 55px;\" (load)=\"onImageLoad()\"></iframe>\n }\n }\n @case ('image') {\n <div\n class=\"ngx-gallery-preview-wrapper\"\n (click)=\"closeOnClick && close()\"\n (mouseup)=\"mouseUpHandler()\" (mousemove)=\"mouseMoveHandler($event)\"\n (touchend)=\"mouseUpHandler()\" (touchmove)=\"mouseMoveHandler($event)\"\n (click)=\"$event.stopPropagation()\"\n (mouseenter)=\"imageMouseEnter()\"\n (mouseleave)=\"imageMouseLeave()\"\n (mousedown)=\"mouseDownHandler($event)\"\n (touchstart)=\"mouseDownHandler($event)\"\n >\n @if (src) {\n <img\n #previewImage\n class=\"ngx-gallery-preview-img ngx-gallery-center\"\n [src]=\"src\"\n [class.ngx-gallery-active]=\"!loading\"\n [class.ngx-gallery-grab]=\"canDrag\"\n [style.transform]=\"styleTransform\"\n [style.left]=\"positionLeft + 'px'\"\n [style.top]=\"positionTop + 'px'\"\n (click)=\"$event.stopPropagation()\"\n (load)=\"onImageLoad()\"\n />\n }\n @if (isSVGActive && hasAddOns) {\n <cc-imagesvg\n [animation]=\"animation\"\n [width]=\"imgWidth\"\n [height]=\"imgHeight\"\n [viewBox]=\"viewBox\"\n [styleTransform]=\"styleTransform\"\n [posLeft]=\"positionLeft + 'px'\"\n [posTop]=\"positionTop + 'px'\"\n [zoomValue]=\"zoomValue\"\n [addOns]=\"ordImages[index].addOns\"\n [classGrab]=\"canDrag\"\n [preview]=\"true\"\n >\n </cc-imagesvg>\n }\n @if (bullets) {\n <ngx-gallery-bullets [count]=\"images.length\" [active]=\"index\" (onChange)=\"showAtIndex($event)\">\n </ngx-gallery-bullets>\n }\n @if (showDescription && description) {\n <div class=\"ngx-gallery-preview-text\" [innerHTML]=\"description | safeHtml\" (click)=\"$event.stopPropagation()\">\n </div>\n }\n </div>\n }\n}\n<ng-template #videoAudio>\n <div\n class=\"ngx-gallery-preview-wrapper\"\n (click)=\"$event.stopPropagation()\">\n @if (isOpen) {\n <cc-video\n [selectedIndex]=\"prevIndex\"\n [image]=\"ordImages[prevIndex]\"\n [showDescription]=\"showDescription\"\n [description]=\"descriptions[prevIndex]\"\n [mediaInfo]=\"mediaInfos[prevIndex]\"\n [fitVideoToScreen]=\"fitVideoToScreen\">\n </cc-video>\n }\n </div>\n</ng-template>", styles: [":host(.ngx-gallery-active){pointer-events:auto;width:100%;height:100%;position:fixed;left:0;top:0;background:#fff;z-index:1000;display:inline-block}:host{display:none}:host ::ng-deep .ngx-gallery-arrow{font-size:50px}:host ::ng-deep ngx-gallery-bullets{height:5%;align-items:center;padding:0}.ngx-gallery-preview-img{opacity:0;max-width:90%;max-height:90%;-webkit-user-select:none;user-select:none;transition:opacity .5s linear,transform .5s}.ngx-gallery-preview-img.animation{transition:opacity .5s linear,transform .5s}.ngx-gallery-preview-img.ngx-gallery-active{opacity:1}.ngx-gallery-preview-img.ngx-gallery-grab{cursor:grab;cursor:-webkit-grab}.ngx-gallery-icon.ngx-gallery-spinner{font-size:50px;left:0;display:inline-block}:host ::ng-deep .ngx-gallery-preview-top{position:absolute;width:100%;-webkit-user-select:none;user-select:none;z-index:1001}:host ::ng-deep .ngx-gallery-preview-icons{float:right;padding:0 0 15px 20px;background:#ffffff8c}:host ::ng-deep .ngx-gallery-preview-icons .ngx-gallery-icon{position:relative;margin-right:20px!important;margin-top:15px!important;font-size:25px;cursor:pointer;text-decoration:none}:host ::ng-deep .ngx-gallery-preview-icons .ngx-gallery-icon.ngx-gallery-icon-disabled{cursor:default;opacity:.4}.ngx-spinner-wrapper{width:50px;height:50px;display:none}.ngx-spinner-wrapper.ngx-gallery-active{display:inline-block}.ngx-gallery-center{position:absolute;inset:0;margin:auto}.ngx-gallery-preview-text{position:absolute;bottom:0;width:100%;background:#000000b3;padding:10px;text-align:center;color:#fff;font-size:16px;flex:0 1 auto;z-index:10}:host ::ng-deep .ngx-gallery-preview-text a{color:#fff}.ngx-gallery-preview-wrapper{width:100%;height:100%;display:flex;flex-flow:column}.ngx-gallery-preview-img-wrapper{flex:1 1 auto;position:relative}.ngx-gallery-preview-svg{opacity:1;max-width:90%;max-height:90%;-webkit-user-select:none;user-select:none;transition:transform .5s}.ngx-gallery-preview-svg.animation{transition:opacity .5s linear,transform .5s}.ngx-gallery-preview-svg.ngx-gallery-active{opacity:1}.ngx-gallery-preview-svg.ngx-gallery-grab{cursor:grab;cursor:-webkit-grab}body{margin:0}iframe{display:block;background:#000;border:none;height:100vh;width:100vw}.container{overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}.container::-webkit-scrollbar{width:0px}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgxGalleryActionComponent, selector: "ngx-gallery-action", inputs: ["icon", "disabled", "titleText"], outputs: ["onClick"] }, { kind: "component", type: NgxGalleryArrowsComponent, selector: "ngx-gallery-arrows", inputs: ["prevDisabled", "nextDisabled", "arrowPrevIcon", "arrowNextIcon"], outputs: ["onPrevClick", "onNextClick"] }, { kind: "component", type: NgxGalleryBulletsComponent, selector: "ngx-gallery-bullets", inputs: ["count", "active"], outputs: ["onChange"] }, { kind: "component", type: NgxGalleryImageSvgComponent, selector: "cc-imagesvg", inputs: ["width", "height", "viewBox", "posLeft", "posTop", "zoomValue", "animation", "addOns", "classGrab", "styleTransform", "preview"] }, { kind: "component", type: NgxGalleryVideoComponent, selector: "cc-video", inputs: ["image", "selectedIndex", "showDescription", "description", "mediaInfo", "fitVideoToScreen"] }, { kind: "pipe", type: i7.SafeHtmlPipe, name: "safeHtml" }] }); }
|
|
1549
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1550
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: NgxGalleryPreviewComponent, isStandalone: false, selector: "ngx-gallery-preview", inputs: { prevIndex: "prevIndex", images: "images", ordImages: "ordImages", mediaInfos: "mediaInfos", links: "links", descriptions: "descriptions", types: "types", mtypes: "mtypes", widths: "widths", heights: "heights", showDescription: "showDescription", swipe: "swipe", fullscreen: "fullscreen", forceFullscreen: "forceFullscreen", closeOnClick: "closeOnClick", closeOnEsc: "closeOnEsc", keyboardNavigation: "keyboardNavigation", arrowPrevIcon: "arrowPrevIcon", arrowNextIcon: "arrowNextIcon", closeIcon: "closeIcon", fullscreenIcon: "fullscreenIcon", spinnerIcon: "spinnerIcon", autoPlay: "autoPlay", autoPlayInterval: "autoPlayInterval", autoPlayPauseOnHover: "autoPlayPauseOnHover", infinityMove: "infinityMove", interactive: "interactive", isSVGActive: "isSVGActive", zoom: "zoom", zoomStep: "zoomStep", zoomMax: "zoomMax", zoomMin: "zoomMin", interactiveIcon: "interactiveIcon", zoomInIcon: "zoomInIcon", zoomOutIcon: "zoomOutIcon", animation: "animation", actions: "actions", rotate: "rotate", rotateLeftIcon: "rotateLeftIcon", rotateRightIcon: "rotateRightIcon", download: "download", downloadIcon: "downloadIcon", bullets: "bullets", name: "name" }, outputs: { onOpen: "onOpen", onClose: "onClose", onActiveChange: "onActiveChange" }, host: { properties: { "class.ngx-gallery-active": "this.isActive" } }, viewQueries: [{ propertyName: "previewImage", first: true, predicate: ["previewImage"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ngx-gallery-arrows\n (onPrevClick)=\"showPrev()\"\n (onNextClick)=\"showNext()\"\n [prevDisabled]=\"!canShowPrev()\"\n [nextDisabled]=\"!canShowNext()\"\n [arrowPrevIcon]=\"arrowPrevIcon\"\n [arrowNextIcon]=\"arrowNextIcon\">\n</ngx-gallery-arrows>\n\n<div class=\"ngx-gallery-preview-top\">\n <div class=\"ngx-gallery-preview-icons\">\n @for (action of actions; track action.titleText) {\n @if (!action.disabled) {\n <ngx-gallery-action\n [icon]=\"action.icon\"\n [disabled]=\"action.disabled\"\n [titleText]=\"action.titleText\"\n (onClick)=\"action.onClick($event, index)\">\n </ngx-gallery-action>\n }\n }\n\n @if (download && src) {\n <a [href]=\"src\" class=\"ngx-gallery-icon\" aria-hidden=\"true\" download>\n <i class=\"ngx-gallery-icon-content {{ downloadIcon }}\"></i>\n </a>\n }\n @if (zoom) {\n <ngx-gallery-action [icon]=\"zoomOutIcon\" [disabled]=\"! isZoomableOut\" (onClick)=\"zoomOut()\"></ngx-gallery-action>\n <ngx-gallery-action [icon]=\"zoomInIcon\" [disabled]=\"! isZoomableIn\" (onClick)=\"zoomIn()\"></ngx-gallery-action>\n }\n @if (rotate) {\n <ngx-gallery-action [icon]=\"rotateLeftIcon\" (onClick)=\"rotateLeft()\"></ngx-gallery-action>\n <ngx-gallery-action [icon]=\"rotateRightIcon\" (onClick)=\"rotateRight()\"></ngx-gallery-action>\n }\n @if (fullscreen) {\n <ngx-gallery-action [icon]=\"'ngx-gallery-fullscreen ' + fullscreenIcon\" (onClick)=\"manageFullscreen()\"></ngx-gallery-action>\n }\n @if (mtypes[index] === 'video' && isVideoLowerScreenResolution()) {\n <ngx-gallery-action [icon]=\"fullscreenIcon\" (onClick)=\"fitVideoToScreen = !fitVideoToScreen\"></ngx-gallery-action>\n }\n @if (closeIcon) {\n <ngx-gallery-action [icon]=\"'ngx-gallery-close ' + closeIcon\" (onClick)=\"close()\"></ngx-gallery-action>\n }\n </div>\n</div>\n<div class=\"ngx-spinner-wrapper ngx-gallery-center\" [class.ngx-gallery-active]=\"showSpinner\">\n <i class=\"ngx-gallery-icon ngx-gallery-spinner {{spinnerIcon}}\" aria-hidden=\"true\"></i>\n</div>\n\n@switch (mtypes[index]) {\n @case ('video') {\n <ng-container *ngTemplateOutlet=\"videoAudio\"></ng-container>\n }\n @case ('audio') {\n <ng-container *ngTemplateOutlet=\"videoAudio\"></ng-container>\n }\n @case ('campus') {\n @if (isOpen) {\n <iframe [src]=\"src\"></iframe>\n }\n }\n @case ('pdf') {\n @if (isOpen) {\n <iframe [src]=\"link\" style=\"position: absolute; top: 55px;\" (load)=\"onImageLoad()\"></iframe>\n }\n }\n @case ('image') {\n <div\n class=\"ngx-gallery-preview-wrapper\"\n (click)=\"closeOnClick && close()\"\n (mouseup)=\"mouseUpHandler()\" (mousemove)=\"mouseMoveHandler($event)\"\n (touchend)=\"mouseUpHandler()\" (touchmove)=\"mouseMoveHandler($event)\"\n (click)=\"$event.stopPropagation()\"\n (mouseenter)=\"imageMouseEnter()\"\n (mouseleave)=\"imageMouseLeave()\"\n (mousedown)=\"mouseDownHandler($event)\"\n (touchstart)=\"mouseDownHandler($event)\"\n >\n @if (src) {\n <img\n #previewImage\n class=\"ngx-gallery-preview-img ngx-gallery-center\"\n [src]=\"src\"\n [class.ngx-gallery-active]=\"!loading\"\n [class.ngx-gallery-grab]=\"canDrag\"\n [style.transform]=\"styleTransform\"\n [style.left]=\"positionLeft + 'px'\"\n [style.top]=\"positionTop + 'px'\"\n (click)=\"$event.stopPropagation()\"\n (load)=\"onImageLoad()\"\n />\n }\n @if (isSVGActive && hasAddOns) {\n <cc-imagesvg\n [animation]=\"animation\"\n [width]=\"imgWidth\"\n [height]=\"imgHeight\"\n [viewBox]=\"viewBox\"\n [styleTransform]=\"styleTransform\"\n [posLeft]=\"positionLeft + 'px'\"\n [posTop]=\"positionTop + 'px'\"\n [zoomValue]=\"zoomValue\"\n [addOns]=\"ordImages[index].addOns\"\n [classGrab]=\"canDrag\"\n [preview]=\"true\"\n >\n </cc-imagesvg>\n }\n @if (bullets) {\n <ngx-gallery-bullets [count]=\"images.length\" [active]=\"index\" (onChange)=\"showAtIndex($event)\">\n </ngx-gallery-bullets>\n }\n @if (showDescription && description) {\n <div class=\"ngx-gallery-preview-text\" [innerHTML]=\"description | safeHtml\" (click)=\"$event.stopPropagation()\">\n </div>\n }\n </div>\n }\n}\n<ng-template #videoAudio>\n <div\n class=\"ngx-gallery-preview-wrapper\"\n (click)=\"$event.stopPropagation()\">\n @if (isOpen) {\n <cc-video\n [selectedIndex]=\"prevIndex\"\n [image]=\"ordImages[prevIndex]\"\n [showDescription]=\"showDescription\"\n [description]=\"descriptions[prevIndex]\"\n [mediaInfo]=\"mediaInfos[prevIndex]\"\n [fitVideoToScreen]=\"fitVideoToScreen\">\n </cc-video>\n }\n </div>\n</ng-template>", styles: [":host(.ngx-gallery-active){pointer-events:auto;width:100%;height:100%;position:fixed;left:0;top:0;background:#fff;z-index:1000;display:inline-block}:host{display:none}:host ::ng-deep .ngx-gallery-arrow{font-size:50px}:host ::ng-deep ngx-gallery-bullets{height:5%;align-items:center;padding:0}.ngx-gallery-preview-img{opacity:0;max-width:90%;max-height:90%;-webkit-user-select:none;user-select:none;transition:opacity .5s linear,transform .5s}.ngx-gallery-preview-img.animation{transition:opacity .5s linear,transform .5s}.ngx-gallery-preview-img.ngx-gallery-active{opacity:1}.ngx-gallery-preview-img.ngx-gallery-grab{cursor:grab;cursor:-webkit-grab}.ngx-gallery-icon.ngx-gallery-spinner{font-size:50px;left:0;display:inline-block}:host ::ng-deep .ngx-gallery-preview-top{position:absolute;width:100%;-webkit-user-select:none;user-select:none;z-index:1001}:host ::ng-deep .ngx-gallery-preview-icons{float:right;padding:0 0 15px 20px;background:#ffffff8c}:host ::ng-deep .ngx-gallery-preview-icons .ngx-gallery-icon{position:relative;margin-right:20px!important;margin-top:15px!important;font-size:25px;cursor:pointer;text-decoration:none}:host ::ng-deep .ngx-gallery-preview-icons .ngx-gallery-icon.ngx-gallery-icon-disabled{cursor:default;opacity:.4}.ngx-spinner-wrapper{width:50px;height:50px;display:none}.ngx-spinner-wrapper.ngx-gallery-active{display:inline-block}.ngx-gallery-center{position:absolute;inset:0;margin:auto}.ngx-gallery-preview-text{position:absolute;bottom:0;width:100%;background:#000000b3;padding:10px;text-align:center;color:#fff;font-size:16px;flex:0 1 auto;z-index:10}:host ::ng-deep .ngx-gallery-preview-text a{color:#fff}.ngx-gallery-preview-wrapper{width:100%;height:100%;display:flex;flex-flow:column}.ngx-gallery-preview-img-wrapper{flex:1 1 auto;position:relative}.ngx-gallery-preview-svg{opacity:1;max-width:90%;max-height:90%;-webkit-user-select:none;user-select:none;transition:transform .5s}.ngx-gallery-preview-svg.animation{transition:opacity .5s linear,transform .5s}.ngx-gallery-preview-svg.ngx-gallery-active{opacity:1}.ngx-gallery-preview-svg.ngx-gallery-grab{cursor:grab;cursor:-webkit-grab}body{margin:0}iframe{display:block;background:#000;border:none;height:100vh;width:100vw}.container{overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}.container::-webkit-scrollbar{width:0px}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgxGalleryActionComponent, selector: "ngx-gallery-action", inputs: ["icon", "disabled", "titleText"], outputs: ["onClick"] }, { kind: "component", type: NgxGalleryArrowsComponent, selector: "ngx-gallery-arrows", inputs: ["prevDisabled", "nextDisabled", "arrowPrevIcon", "arrowNextIcon"], outputs: ["onPrevClick", "onNextClick"] }, { kind: "component", type: NgxGalleryBulletsComponent, selector: "ngx-gallery-bullets", inputs: ["count", "active"], outputs: ["onChange"] }, { kind: "component", type: NgxGalleryImageSvgComponent, selector: "cc-imagesvg", inputs: ["width", "height", "viewBox", "posLeft", "posTop", "zoomValue", "animation", "addOns", "classGrab", "styleTransform", "preview"] }, { kind: "component", type: NgxGalleryVideoComponent, selector: "cc-video", inputs: ["image", "selectedIndex", "showDescription", "description", "mediaInfo", "fitVideoToScreen"] }, { kind: "pipe", type: i7.SafeHtmlPipe, name: "safeHtml" }] }); }
|
|
1553
1551
|
}
|
|
1554
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1552
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryPreviewComponent, decorators: [{
|
|
1555
1553
|
type: Component,
|
|
1556
1554
|
args: [{ selector: 'ngx-gallery-preview', standalone: false, template: "<ngx-gallery-arrows\n (onPrevClick)=\"showPrev()\"\n (onNextClick)=\"showNext()\"\n [prevDisabled]=\"!canShowPrev()\"\n [nextDisabled]=\"!canShowNext()\"\n [arrowPrevIcon]=\"arrowPrevIcon\"\n [arrowNextIcon]=\"arrowNextIcon\">\n</ngx-gallery-arrows>\n\n<div class=\"ngx-gallery-preview-top\">\n <div class=\"ngx-gallery-preview-icons\">\n @for (action of actions; track action.titleText) {\n @if (!action.disabled) {\n <ngx-gallery-action\n [icon]=\"action.icon\"\n [disabled]=\"action.disabled\"\n [titleText]=\"action.titleText\"\n (onClick)=\"action.onClick($event, index)\">\n </ngx-gallery-action>\n }\n }\n\n @if (download && src) {\n <a [href]=\"src\" class=\"ngx-gallery-icon\" aria-hidden=\"true\" download>\n <i class=\"ngx-gallery-icon-content {{ downloadIcon }}\"></i>\n </a>\n }\n @if (zoom) {\n <ngx-gallery-action [icon]=\"zoomOutIcon\" [disabled]=\"! isZoomableOut\" (onClick)=\"zoomOut()\"></ngx-gallery-action>\n <ngx-gallery-action [icon]=\"zoomInIcon\" [disabled]=\"! isZoomableIn\" (onClick)=\"zoomIn()\"></ngx-gallery-action>\n }\n @if (rotate) {\n <ngx-gallery-action [icon]=\"rotateLeftIcon\" (onClick)=\"rotateLeft()\"></ngx-gallery-action>\n <ngx-gallery-action [icon]=\"rotateRightIcon\" (onClick)=\"rotateRight()\"></ngx-gallery-action>\n }\n @if (fullscreen) {\n <ngx-gallery-action [icon]=\"'ngx-gallery-fullscreen ' + fullscreenIcon\" (onClick)=\"manageFullscreen()\"></ngx-gallery-action>\n }\n @if (mtypes[index] === 'video' && isVideoLowerScreenResolution()) {\n <ngx-gallery-action [icon]=\"fullscreenIcon\" (onClick)=\"fitVideoToScreen = !fitVideoToScreen\"></ngx-gallery-action>\n }\n @if (closeIcon) {\n <ngx-gallery-action [icon]=\"'ngx-gallery-close ' + closeIcon\" (onClick)=\"close()\"></ngx-gallery-action>\n }\n </div>\n</div>\n<div class=\"ngx-spinner-wrapper ngx-gallery-center\" [class.ngx-gallery-active]=\"showSpinner\">\n <i class=\"ngx-gallery-icon ngx-gallery-spinner {{spinnerIcon}}\" aria-hidden=\"true\"></i>\n</div>\n\n@switch (mtypes[index]) {\n @case ('video') {\n <ng-container *ngTemplateOutlet=\"videoAudio\"></ng-container>\n }\n @case ('audio') {\n <ng-container *ngTemplateOutlet=\"videoAudio\"></ng-container>\n }\n @case ('campus') {\n @if (isOpen) {\n <iframe [src]=\"src\"></iframe>\n }\n }\n @case ('pdf') {\n @if (isOpen) {\n <iframe [src]=\"link\" style=\"position: absolute; top: 55px;\" (load)=\"onImageLoad()\"></iframe>\n }\n }\n @case ('image') {\n <div\n class=\"ngx-gallery-preview-wrapper\"\n (click)=\"closeOnClick && close()\"\n (mouseup)=\"mouseUpHandler()\" (mousemove)=\"mouseMoveHandler($event)\"\n (touchend)=\"mouseUpHandler()\" (touchmove)=\"mouseMoveHandler($event)\"\n (click)=\"$event.stopPropagation()\"\n (mouseenter)=\"imageMouseEnter()\"\n (mouseleave)=\"imageMouseLeave()\"\n (mousedown)=\"mouseDownHandler($event)\"\n (touchstart)=\"mouseDownHandler($event)\"\n >\n @if (src) {\n <img\n #previewImage\n class=\"ngx-gallery-preview-img ngx-gallery-center\"\n [src]=\"src\"\n [class.ngx-gallery-active]=\"!loading\"\n [class.ngx-gallery-grab]=\"canDrag\"\n [style.transform]=\"styleTransform\"\n [style.left]=\"positionLeft + 'px'\"\n [style.top]=\"positionTop + 'px'\"\n (click)=\"$event.stopPropagation()\"\n (load)=\"onImageLoad()\"\n />\n }\n @if (isSVGActive && hasAddOns) {\n <cc-imagesvg\n [animation]=\"animation\"\n [width]=\"imgWidth\"\n [height]=\"imgHeight\"\n [viewBox]=\"viewBox\"\n [styleTransform]=\"styleTransform\"\n [posLeft]=\"positionLeft + 'px'\"\n [posTop]=\"positionTop + 'px'\"\n [zoomValue]=\"zoomValue\"\n [addOns]=\"ordImages[index].addOns\"\n [classGrab]=\"canDrag\"\n [preview]=\"true\"\n >\n </cc-imagesvg>\n }\n @if (bullets) {\n <ngx-gallery-bullets [count]=\"images.length\" [active]=\"index\" (onChange)=\"showAtIndex($event)\">\n </ngx-gallery-bullets>\n }\n @if (showDescription && description) {\n <div class=\"ngx-gallery-preview-text\" [innerHTML]=\"description | safeHtml\" (click)=\"$event.stopPropagation()\">\n </div>\n }\n </div>\n }\n}\n<ng-template #videoAudio>\n <div\n class=\"ngx-gallery-preview-wrapper\"\n (click)=\"$event.stopPropagation()\">\n @if (isOpen) {\n <cc-video\n [selectedIndex]=\"prevIndex\"\n [image]=\"ordImages[prevIndex]\"\n [showDescription]=\"showDescription\"\n [description]=\"descriptions[prevIndex]\"\n [mediaInfo]=\"mediaInfos[prevIndex]\"\n [fitVideoToScreen]=\"fitVideoToScreen\">\n </cc-video>\n }\n </div>\n</ng-template>", styles: [":host(.ngx-gallery-active){pointer-events:auto;width:100%;height:100%;position:fixed;left:0;top:0;background:#fff;z-index:1000;display:inline-block}:host{display:none}:host ::ng-deep .ngx-gallery-arrow{font-size:50px}:host ::ng-deep ngx-gallery-bullets{height:5%;align-items:center;padding:0}.ngx-gallery-preview-img{opacity:0;max-width:90%;max-height:90%;-webkit-user-select:none;user-select:none;transition:opacity .5s linear,transform .5s}.ngx-gallery-preview-img.animation{transition:opacity .5s linear,transform .5s}.ngx-gallery-preview-img.ngx-gallery-active{opacity:1}.ngx-gallery-preview-img.ngx-gallery-grab{cursor:grab;cursor:-webkit-grab}.ngx-gallery-icon.ngx-gallery-spinner{font-size:50px;left:0;display:inline-block}:host ::ng-deep .ngx-gallery-preview-top{position:absolute;width:100%;-webkit-user-select:none;user-select:none;z-index:1001}:host ::ng-deep .ngx-gallery-preview-icons{float:right;padding:0 0 15px 20px;background:#ffffff8c}:host ::ng-deep .ngx-gallery-preview-icons .ngx-gallery-icon{position:relative;margin-right:20px!important;margin-top:15px!important;font-size:25px;cursor:pointer;text-decoration:none}:host ::ng-deep .ngx-gallery-preview-icons .ngx-gallery-icon.ngx-gallery-icon-disabled{cursor:default;opacity:.4}.ngx-spinner-wrapper{width:50px;height:50px;display:none}.ngx-spinner-wrapper.ngx-gallery-active{display:inline-block}.ngx-gallery-center{position:absolute;inset:0;margin:auto}.ngx-gallery-preview-text{position:absolute;bottom:0;width:100%;background:#000000b3;padding:10px;text-align:center;color:#fff;font-size:16px;flex:0 1 auto;z-index:10}:host ::ng-deep .ngx-gallery-preview-text a{color:#fff}.ngx-gallery-preview-wrapper{width:100%;height:100%;display:flex;flex-flow:column}.ngx-gallery-preview-img-wrapper{flex:1 1 auto;position:relative}.ngx-gallery-preview-svg{opacity:1;max-width:90%;max-height:90%;-webkit-user-select:none;user-select:none;transition:transform .5s}.ngx-gallery-preview-svg.animation{transition:opacity .5s linear,transform .5s}.ngx-gallery-preview-svg.ngx-gallery-active{opacity:1}.ngx-gallery-preview-svg.ngx-gallery-grab{cursor:grab;cursor:-webkit-grab}body{margin:0}iframe{display:block;background:#000;border:none;height:100vh;width:100vw}.container{overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}.container::-webkit-scrollbar{width:0px}\n"] }]
|
|
1557
1555
|
}], propDecorators: { prevIndex: [{
|
|
@@ -1878,10 +1876,10 @@ class NgxGalleryThumbnailsComponent {
|
|
|
1878
1876
|
getSafeStyle(value) {
|
|
1879
1877
|
return this.sanitization.bypassSecurityTrustStyle(value);
|
|
1880
1878
|
}
|
|
1881
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1882
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1879
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryThumbnailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1880
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: NgxGalleryThumbnailsComponent, isStandalone: false, selector: "ngx-gallery-thumbnails", inputs: { name: "name", images: "images", links: "links", labels: "labels", types: "types", widths: "widths", heights: "heights", linkTarget: "linkTarget", columns: "columns", rows: "rows", arrows: "arrows", arrowsAutoHide: "arrowsAutoHide", margin: "margin", selectedIndex: "selectedIndex", clickable: "clickable", swipe: "swipe", size: "size", arrowPrevIcon: "arrowPrevIcon", arrowNextIcon: "arrowNextIcon", moveSize: "moveSize", order: "order", remainingCount: "remainingCount", lazyLoading: "lazyLoading", actions: "actions" }, outputs: { onActiveChange: "onActiveChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ngx-gallery-thumbnails-wrapper ngx-gallery-thumbnail-size-{{size}}\">\n <div class=\"ngx-gallery-thumbnails\"\n [style.transform]=\"'translateX(' + thumbnailsLeft + ')'\"\n [style.marginLeft]=\"thumbnailsMarginLeft\">\n @for (image of getImages(); track image; let i = $index) {\n <a\n [ngClass]=\"{ 'ngx-gallery-active': i === selectedIndex, 'ngx-gallery-clickable': clickable }\"\n (click)=\"handleClick($event, i)\"\n [href]=\"hasLink(i) ? links[i] : '#'\"\n [target]=\"linkTarget\" class=\"ngx-gallery-thumbnail\"\n [style.background-image]=\"getSafeUrl(image)\"\n [style.width]=\"getThumbnailWidth()\"\n [style.height]=\"getThumbnailHeight()\"\n [style.left]=\"getThumbnailLeft(i)\"\n [style.top]=\"getThumbnailTop(i)\"\n [attr.aria-label]=\"labels[i]\">\n <div class=\"ngx-gallery-icons-wrapper\">\n @for (action of actions; track action.titleText) {\n <ngx-gallery-action\n [icon]=\"action.icon\"\n [disabled]=\"action.disabled\"\n [titleText]=\"action.titleText\"\n (onClick)=\"action.onClick($event, i)\">\n </ngx-gallery-action>\n }\n </div>\n @if (remainingCount && remainingCountValue && (i === (rows * columns) - 1)) {\n <div class=\"ngx-gallery-remaining-count-overlay\"\n >\n <span class=\"ngx-gallery-remaining-count\">+{{remainingCountValue}}</span>\n </div>\n }\n </a>\n }\n </div>\n</div>\n@if (canShowArrows()) {\n <ngx-gallery-arrows\n (onPrevClick)=\"moveLeft()\"\n (onNextClick)=\"moveRight()\"\n [prevDisabled]=\"!canMoveLeft()\"\n [nextDisabled]=\"!canMoveRight()\"\n [arrowPrevIcon]=\"arrowPrevIcon\"\n [arrowNextIcon]=\"arrowNextIcon\">\n </ngx-gallery-arrows>\n}\n", styles: [":host{width:100%;display:inline-block;position:relative;z-index:1;margin-top:15px!important}.ngx-gallery-thumbnails-wrapper{width:100%;height:100%;position:absolute;overflow:hidden}.ngx-gallery-thumbnails-wrapper .ngx-gallery-thumbnail{border:1px solid #e8e8e8;border-radius:4px;overflow:hidden}.ngx-gallery-thumbnails{height:100%;width:100%;position:absolute;left:0;transform:translate(0);transition:transform .5s ease-in-out;will-change:transform}.ngx-gallery-thumbnails .ngx-gallery-thumbnail{position:absolute;height:100%;background-position:center;background-repeat:no-repeat;text-decoration:none;background-color:#fff}.ngx-gallery-thumbnail-size-cover .ngx-gallery-thumbnails .ngx-gallery-thumbnail{background-size:cover}.ngx-gallery-thumbnail-size-contain .ngx-gallery-thumbnails .ngx-gallery-thumbnail{background-size:contain}.ngx-gallery-remaining-count-overlay{width:100%;height:100%;position:absolute;left:0;top:0;background-color:#0006}.ngx-gallery-remaining-count{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:30px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NgxGalleryActionComponent, selector: "ngx-gallery-action", inputs: ["icon", "disabled", "titleText"], outputs: ["onClick"] }, { kind: "component", type: NgxGalleryArrowsComponent, selector: "ngx-gallery-arrows", inputs: ["prevDisabled", "nextDisabled", "arrowPrevIcon", "arrowNextIcon"], outputs: ["onPrevClick", "onNextClick"] }] }); }
|
|
1883
1881
|
}
|
|
1884
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1882
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryThumbnailsComponent, decorators: [{
|
|
1885
1883
|
type: Component,
|
|
1886
1884
|
args: [{ selector: 'ngx-gallery-thumbnails', standalone: false, template: "<div class=\"ngx-gallery-thumbnails-wrapper ngx-gallery-thumbnail-size-{{size}}\">\n <div class=\"ngx-gallery-thumbnails\"\n [style.transform]=\"'translateX(' + thumbnailsLeft + ')'\"\n [style.marginLeft]=\"thumbnailsMarginLeft\">\n @for (image of getImages(); track image; let i = $index) {\n <a\n [ngClass]=\"{ 'ngx-gallery-active': i === selectedIndex, 'ngx-gallery-clickable': clickable }\"\n (click)=\"handleClick($event, i)\"\n [href]=\"hasLink(i) ? links[i] : '#'\"\n [target]=\"linkTarget\" class=\"ngx-gallery-thumbnail\"\n [style.background-image]=\"getSafeUrl(image)\"\n [style.width]=\"getThumbnailWidth()\"\n [style.height]=\"getThumbnailHeight()\"\n [style.left]=\"getThumbnailLeft(i)\"\n [style.top]=\"getThumbnailTop(i)\"\n [attr.aria-label]=\"labels[i]\">\n <div class=\"ngx-gallery-icons-wrapper\">\n @for (action of actions; track action.titleText) {\n <ngx-gallery-action\n [icon]=\"action.icon\"\n [disabled]=\"action.disabled\"\n [titleText]=\"action.titleText\"\n (onClick)=\"action.onClick($event, i)\">\n </ngx-gallery-action>\n }\n </div>\n @if (remainingCount && remainingCountValue && (i === (rows * columns) - 1)) {\n <div class=\"ngx-gallery-remaining-count-overlay\"\n >\n <span class=\"ngx-gallery-remaining-count\">+{{remainingCountValue}}</span>\n </div>\n }\n </a>\n }\n </div>\n</div>\n@if (canShowArrows()) {\n <ngx-gallery-arrows\n (onPrevClick)=\"moveLeft()\"\n (onNextClick)=\"moveRight()\"\n [prevDisabled]=\"!canMoveLeft()\"\n [nextDisabled]=\"!canMoveRight()\"\n [arrowPrevIcon]=\"arrowPrevIcon\"\n [arrowNextIcon]=\"arrowNextIcon\">\n </ngx-gallery-arrows>\n}\n", styles: [":host{width:100%;display:inline-block;position:relative;z-index:1;margin-top:15px!important}.ngx-gallery-thumbnails-wrapper{width:100%;height:100%;position:absolute;overflow:hidden}.ngx-gallery-thumbnails-wrapper .ngx-gallery-thumbnail{border:1px solid #e8e8e8;border-radius:4px;overflow:hidden}.ngx-gallery-thumbnails{height:100%;width:100%;position:absolute;left:0;transform:translate(0);transition:transform .5s ease-in-out;will-change:transform}.ngx-gallery-thumbnails .ngx-gallery-thumbnail{position:absolute;height:100%;background-position:center;background-repeat:no-repeat;text-decoration:none;background-color:#fff}.ngx-gallery-thumbnail-size-cover .ngx-gallery-thumbnails .ngx-gallery-thumbnail{background-size:cover}.ngx-gallery-thumbnail-size-contain .ngx-gallery-thumbnails .ngx-gallery-thumbnail{background-size:contain}.ngx-gallery-remaining-count-overlay{width:100%;height:100%;position:absolute;left:0;top:0;background-color:#0006}.ngx-gallery-remaining-count{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:30px}\n"] }]
|
|
1887
1885
|
}], propDecorators: { name: [{
|
|
@@ -2301,10 +2299,10 @@ class PreviewLoaderComponent {
|
|
|
2301
2299
|
});
|
|
2302
2300
|
this.domRefs = [];
|
|
2303
2301
|
}
|
|
2304
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2305
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2302
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PreviewLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2303
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: PreviewLoaderComponent, isStandalone: false, selector: "ngx-gallery-preview-loader", inputs: { onlyPreview: "onlyPreview", previewEnabled: "previewEnabled", prevIndex: "prevIndex", images: "images", ordImages: "ordImages", mediaInfos: "mediaInfos", links: "links", descriptions: "descriptions", types: "types", mtypes: "mtypes", widths: "widths", heights: "heights", svgArrows: "svgArrows", svgIcons: "svgIcons", svgPolygons: "svgPolygons", svgTexts: "svgTexts", showDescription: "showDescription", swipe: "swipe", fullscreen: "fullscreen", forceFullscreen: "forceFullscreen", closeOnClick: "closeOnClick", closeOnEsc: "closeOnEsc", keyboardNavigation: "keyboardNavigation", arrowPrevIcon: "arrowPrevIcon", arrowNextIcon: "arrowNextIcon", closeIcon: "closeIcon", fullscreenIcon: "fullscreenIcon", spinnerIcon: "spinnerIcon", autoPlay: "autoPlay", autoPlayInterval: "autoPlayInterval", autoPlayPauseOnHover: "autoPlayPauseOnHover", infinityMove: "infinityMove", interactive: "interactive", hasSVGArrow: "hasSVGArrow", hasSVGPolygon: "hasSVGPolygon", hasSVGIcon: "hasSVGIcon", hasSVGText: "hasSVGText", isSVGActive: "isSVGActive", zoom: "zoom", zoomStep: "zoomStep", zoomMax: "zoomMax", zoomMin: "zoomMin", interactiveIcon: "interactiveIcon", zoomInIcon: "zoomInIcon", zoomOutIcon: "zoomOutIcon", animation: "animation", actions: "actions", rotate: "rotate", rotateLeftIcon: "rotateLeftIcon", rotateRightIcon: "rotateRightIcon", download: "download", downloadIcon: "downloadIcon", bullets: "bullets", name: "name", openIndex: "openIndex", isActive: "isActive" }, outputs: { onOpen: "onOpen", onClose: "onClose", onActiveChange: "onActiveChange" }, usesOnChanges: true, ngImport: i0, template: ``, isInline: true, styles: ["::ng-deep *{box-sizing:border-box}::ng-deep .ngx-gallery-icon{color:#000;font-size:25px;position:absolute;z-index:1000;display:inline-block}::ng-deep .ngx-gallery-icon .ngx-gallery-icon-content{display:block}::ng-deep .ngx-gallery-icons-wrapper .ngx-gallery-icon{position:relative;margin-right:15px!important;margin-top:10px!important;font-size:20px;cursor:pointer}::ng-deep .ngx-gallery-icons-wrapper{float:right}\n"] }); }
|
|
2306
2304
|
}
|
|
2307
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2305
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PreviewLoaderComponent, decorators: [{
|
|
2308
2306
|
type: Component,
|
|
2309
2307
|
args: [{ selector: 'ngx-gallery-preview-loader', template: ``, standalone: false, styles: ["::ng-deep *{box-sizing:border-box}::ng-deep .ngx-gallery-icon{color:#000;font-size:25px;position:absolute;z-index:1000;display:inline-block}::ng-deep .ngx-gallery-icon .ngx-gallery-icon-content{display:block}::ng-deep .ngx-gallery-icons-wrapper .ngx-gallery-icon{position:relative;margin-right:15px!important;margin-top:10px!important;font-size:20px;cursor:pointer}::ng-deep .ngx-gallery-icons-wrapper{float:right}\n"] }]
|
|
2310
2308
|
}], propDecorators: { onlyPreview: [{
|
|
@@ -2909,10 +2907,10 @@ class NgxGalleryComponent {
|
|
|
2909
2907
|
isExternalVideo(mtype) {
|
|
2910
2908
|
return this.ccMediaService.isExternalVideo(mtype);
|
|
2911
2909
|
}
|
|
2912
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2913
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: NgxGalleryComponent, isStandalone: false, selector: "ngx-gallery", inputs: { options: "options", images: "images", name: "name" }, outputs: { imagesReady: "imagesReady", onChange: "onChange", previewOpen: "previewOpen", previewClose: "previewClose", previewChange: "previewChange", mediumTargetOpen: "mediumTargetOpen", externalLinkOpen: "externalLinkOpen" }, host: { properties: { "style.width": "this.width", "style.height": "this.height", "style.left": "this.left" } }, providers: [NgxGalleryHelperService, CcMediaService], viewQueries: [{ propertyName: "previewLoader", first: true, predicate: PreviewLoaderComponent, descendants: true }, { propertyName: "image", first: true, predicate: NgxGalleryImageComponent, descendants: true }, { propertyName: "thubmnails", first: true, predicate: NgxGalleryThumbnailsComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<div class=\"ngx-gallery-layout {{currentOptions?.layout}}\" [class.preview-only]=\"!currentOptions?.image\" [ngStyle]=\"styleBox\">\n <!--\n currently resizing window does NOT lead to a resize event, if external video in an iframe is shown\n problem: maximizing and minimizing the video would not be possible!\n -->\n @if (ccMediaService.isExternalVideo(types[selectedIndex])) {\n } @else {\n <div (window:resize)=\"onResize()\"></div>\n }\n\n\n @if (currentOptions?.image) {\n <ngx-gallery-image\n [name]=\"name\"\n [style.height]=\"getImageHeight()\"\n [images]=\"mediumImages\"\n [imageWidth]=\"imageWidth\"\n [imageHeight]=\"imageHeight\"\n [imageVBox]=\"imageVBox\"\n [hasVideo]=\"hasVideo\"\n [positionX]=\"positionX\"\n [positionY]=\"positionY\"\n [links]=\"currentOptions?.ccpImageAsLink ? links : []\"\n [widths]=\"widths\"\n [heights]=\"heights\"\n [mediaInfos]=\"mediaInfos\"\n [types]=\"types\"\n [mtypes]=\"mtypes\"\n [isSVGActive]=\"isSVGActive\"\n [clickable]=\"currentOptions?.preview\"\n [selectedIndex]=\"selectedIndex\"\n [arrows]=\"currentOptions?.imageArrows\"\n [arrowsAutoHide]=\"currentOptions?.imageArrowsAutoHide\"\n [arrowPrevIcon]=\"currentOptions?.arrowPrevIcon\"\n [arrowNextIcon]=\"currentOptions?.arrowNextIcon\"\n [swipe]=\"currentOptions?.imageSwipe\"\n [animation]=\"currentOptions?.imageAnimation\"\n [size]=\"currentOptions?.imageSize\"\n [autoPlay]=\"currentOptions?.imageAutoPlay\"\n [autoPlayInterval]=\"currentOptions?.imageAutoPlayInterval\"\n [autoPlayPauseOnHover]=\"currentOptions?.imageAutoPlayPauseOnHover\"\n [infinityMove]=\"currentOptions?.imageInfinityMove\"\n [lazyLoading]=\"currentOptions?.lazyLoading\"\n [actions]=\"currentOptions?.imageActions\"\n [descriptions]=\"descriptions\"\n [showDescription]=\"currentOptions?.imageDescription\"\n [bullets]=\"currentOptions?.imageBullets\"\n (onClick)=\"openPreview($event)\"\n (onActiveChange)=\"selectFromImage($event)\">\n </ngx-gallery-image>\n }\n\n @if (currentOptions?.thumbnails) {\n <ngx-gallery-thumbnails\n [style.marginTop]=\"getThumbnailsMarginTop()\"\n [name]=\"name\"\n [style.marginBottom]=\"getThumbnailsMarginBottom()\"\n [style.height]=\"getThumbnailsHeight()\"\n [images]=\"smallImages\"\n [links]=\"currentOptions?.thumbnailsAsLinks ? links : []\"\n [labels]=\"labels\" [linkTarget]=\"currentOptions?.linkTarget\"\n [widths]=\"widths\"\n [heights]=\"heights\"\n [types]=\"types\"\n [selectedIndex]=\"selectedIndex\"\n [columns]=\"currentOptions?.thumbnailsColumns\"\n [rows]=\"currentOptions?.thumbnailsRows\"\n [margin]=\"currentOptions?.thumbnailMargin\"\n [arrows]=\"currentOptions?.thumbnailsArrows\"\n [arrowsAutoHide]=\"currentOptions?.thumbnailsArrowsAutoHide\"\n [arrowPrevIcon]=\"currentOptions?.arrowPrevIcon\"\n [arrowNextIcon]=\"currentOptions?.arrowNextIcon\"\n [clickable]=\"currentOptions?.image || currentOptions?.preview\"\n [swipe]=\"currentOptions?.thumbnailsSwipe\"\n [size]=\"currentOptions?.thumbnailSize\"\n [moveSize]=\"currentOptions?.thumbnailsMoveSize\"\n [order]=\"currentOptions?.thumbnailsOrder\"\n [remainingCount]=\"currentOptions?.thumbnailsRemainingCount\"\n [lazyLoading]=\"currentOptions?.lazyLoading\"\n [actions]=\"currentOptions?.thumbnailActions\"\n (onActiveChange)=\"selectFromThumbnails($event)\">\n </ngx-gallery-thumbnails>\n }\n\n <ngx-gallery-preview-loader\n #previewLoader\n [name]=\"name\"\n [prevIndex]=\"prevIndex\"\n [images]=\"bigImages\"\n [ordImages]=\"mediumImages\"\n [mediaInfos]=\"mediaInfos\"\n [links]=\"currentOptions?.ccpPreviewImageAsLink ? links : []\"\n [descriptions]=\"descriptions\"\n [widths]=\"widths\"\n [heights]=\"heights\"\n [types]=\"types\"\n [mtypes]=\"mtypes\"\n [showDescription]=\"currentOptions?.previewDescription\"\n [arrowPrevIcon]=\"currentOptions?.arrowPrevIcon\"\n [arrowNextIcon]=\"currentOptions?.arrowNextIcon\"\n [closeIcon]=\"currentOptions?.closeIcon\"\n [fullscreenIcon]=\"currentOptions?.fullscreenIcon\"\n [spinnerIcon]=\"currentOptions?.spinnerIcon\"\n [swipe]=\"currentOptions?.previewSwipe\"\n [fullscreen]=\"currentOptions?.previewFullscreen\"\n [forceFullscreen]=\"currentOptions?.previewForceFullscreen\"\n [closeOnClick]=\"currentOptions?.previewCloseOnClick\"\n [closeOnEsc]=\"currentOptions?.previewCloseOnEsc\"\n [keyboardNavigation]=\"currentOptions?.previewKeyboardNavigation\"\n [animation]=\"currentOptions?.previewAnimation\"\n [autoPlay]=\"currentOptions?.previewAutoPlay\"\n [autoPlayInterval]=\"currentOptions?.previewAutoPlayInterval\"\n [autoPlayPauseOnHover]=\"currentOptions?.previewAutoPlayPauseOnHover\"\n [infinityMove]=\"currentOptions?.previewInfinityMove\"\n [isSVGActive]=\"isSVGActive\"\n [zoom]=\"currentOptions?.previewZoom\" [zoomStep]=\"currentOptions?.previewZoomStep\"\n [zoomMax]=\"currentOptions?.previewZoomMax\" [zoomMin]=\"currentOptions?.previewZoomMin\"\n [zoomInIcon]=\"currentOptions?.zoomInIcon\" [zoomOutIcon]=\"currentOptions?.zoomOutIcon\"\n [actions]=\"currentOptions?.actions\"\n [rotate]=\"currentOptions?.previewRotate\"\n [rotateLeftIcon]=\"currentOptions?.rotateLeftIcon\"\n [rotateRightIcon]=\"currentOptions?.rotateRightIcon\"\n [download]=\"currentOptions?.previewDownload\"\n [downloadIcon]=\"currentOptions?.downloadIcon\"\n [bullets]=\"currentOptions?.previewBullets\"\n (onClose)=\"onPreviewClose()\" (onOpen)=\"onPreviewOpen()\"\n (onActiveChange)=\"previewSelect($event)\"\n [isActive]=\"previewEnabled\">\n </ngx-gallery-preview-loader>\n</div>", styles: [":host{display:inline-block}:host>*{float:left}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep .ngx-gallery-icon{color:#000;font-size:25px;position:absolute;display:inline-block}:host ::ng-deep .ngx-gallery-icon .ngx-gallery-icon-content{display:block}:host ::ng-deep .ngx-gallery-clickable{cursor:pointer}:host ::ng-deep .ngx-gallery-icons-wrapper .ngx-gallery-icon{position:relative;margin-right:5px;margin-top:5px;font-size:20px;cursor:pointer}:host ::ng-deep .ngx-gallery-icons-wrapper{float:right}:host ::ng-deep ngx-gallery-thumbnails .ngx-gallery-arrow{border-radius:80%;padding:4px;background-color:#fff;width:30px}:host .ngx-gallery-layout{width:100%;height:100%;display:flex;flex-direction:column}:host .ngx-gallery-layout:not(.preview-only){border:1px solid #e8e8e8!important;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f!important;border-radius:4px;background-color:#fafafa!important;padding:8px 11px!important}:host .ngx-gallery-layout.thumbnails-top ngx-gallery-image{order:2}:host .ngx-gallery-layout.thumbnails-top ngx-gallery-thumbnails{order:1}:host .ngx-gallery-layout.thumbnails-bottom ngx-gallery-image{order:1}:host .ngx-gallery-layout.thumbnails-bottom ngx-gallery-thumbnails{order:2}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NgxGalleryImageComponent, selector: "ngx-gallery-image", inputs: ["name", "images", "imageWidth", "imageHeight", "imageVBox", "positionX", "positionY", "mediaInfos", "hasVideo", "links", "clickable", "selectedIndex", "arrows", "arrowsAutoHide", "swipe", "animation", "size", "arrowPrevIcon", "arrowNextIcon", "autoPlay", "autoPlayInterval", "autoPlayPauseOnHover", "infinityMove", "lazyLoading", "actions", "descriptions", "types", "mtypes", "widths", "heights", "showDescription", "bullets", "interactive", "isSVGActive", "interactiveIcon"], outputs: ["onClick", "onActiveChange"] }, { kind: "component", type: NgxGalleryThumbnailsComponent, selector: "ngx-gallery-thumbnails", inputs: ["name", "images", "links", "labels", "types", "widths", "heights", "linkTarget", "columns", "rows", "arrows", "arrowsAutoHide", "margin", "selectedIndex", "clickable", "swipe", "size", "arrowPrevIcon", "arrowNextIcon", "moveSize", "order", "remainingCount", "lazyLoading", "actions"], outputs: ["onActiveChange"] }, { kind: "component", type: PreviewLoaderComponent, selector: "ngx-gallery-preview-loader", inputs: ["onlyPreview", "previewEnabled", "prevIndex", "images", "ordImages", "mediaInfos", "links", "descriptions", "types", "mtypes", "widths", "heights", "svgArrows", "svgIcons", "svgPolygons", "svgTexts", "showDescription", "swipe", "fullscreen", "forceFullscreen", "closeOnClick", "closeOnEsc", "keyboardNavigation", "arrowPrevIcon", "arrowNextIcon", "closeIcon", "fullscreenIcon", "spinnerIcon", "autoPlay", "autoPlayInterval", "autoPlayPauseOnHover", "infinityMove", "interactive", "hasSVGArrow", "hasSVGPolygon", "hasSVGIcon", "hasSVGText", "isSVGActive", "zoom", "zoomStep", "zoomMax", "zoomMin", "interactiveIcon", "zoomInIcon", "zoomOutIcon", "animation", "actions", "rotate", "rotateLeftIcon", "rotateRightIcon", "download", "downloadIcon", "bullets", "name", "openIndex", "isActive"], outputs: ["onOpen", "onClose", "onActiveChange"] }] }); }
|
|
2910
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2911
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: NgxGalleryComponent, isStandalone: false, selector: "ngx-gallery", inputs: { options: "options", images: "images", name: "name" }, outputs: { imagesReady: "imagesReady", onChange: "onChange", previewOpen: "previewOpen", previewClose: "previewClose", previewChange: "previewChange", mediumTargetOpen: "mediumTargetOpen", externalLinkOpen: "externalLinkOpen" }, host: { properties: { "style.width": "this.width", "style.height": "this.height", "style.left": "this.left" } }, providers: [NgxGalleryHelperService, CcMediaService], viewQueries: [{ propertyName: "previewLoader", first: true, predicate: PreviewLoaderComponent, descendants: true }, { propertyName: "image", first: true, predicate: NgxGalleryImageComponent, descendants: true }, { propertyName: "thubmnails", first: true, predicate: NgxGalleryThumbnailsComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<div class=\"ngx-gallery-layout {{currentOptions?.layout}}\" [class.preview-only]=\"!currentOptions?.image\" [ngStyle]=\"styleBox\">\n <!--\n currently resizing window does NOT lead to a resize event, if external video in an iframe is shown\n problem: maximizing and minimizing the video would not be possible!\n -->\n @if (ccMediaService.isExternalVideo(types[selectedIndex])) {\n } @else {\n <div (window:resize)=\"onResize()\"></div>\n }\n\n\n @if (currentOptions?.image) {\n <ngx-gallery-image\n [name]=\"name\"\n [style.height]=\"getImageHeight()\"\n [images]=\"mediumImages\"\n [imageWidth]=\"imageWidth\"\n [imageHeight]=\"imageHeight\"\n [imageVBox]=\"imageVBox\"\n [hasVideo]=\"hasVideo\"\n [positionX]=\"positionX\"\n [positionY]=\"positionY\"\n [links]=\"currentOptions?.ccpImageAsLink ? links : []\"\n [widths]=\"widths\"\n [heights]=\"heights\"\n [mediaInfos]=\"mediaInfos\"\n [types]=\"types\"\n [mtypes]=\"mtypes\"\n [isSVGActive]=\"isSVGActive\"\n [clickable]=\"currentOptions?.preview\"\n [selectedIndex]=\"selectedIndex\"\n [arrows]=\"currentOptions?.imageArrows\"\n [arrowsAutoHide]=\"currentOptions?.imageArrowsAutoHide\"\n [arrowPrevIcon]=\"currentOptions?.arrowPrevIcon\"\n [arrowNextIcon]=\"currentOptions?.arrowNextIcon\"\n [swipe]=\"currentOptions?.imageSwipe\"\n [animation]=\"currentOptions?.imageAnimation\"\n [size]=\"currentOptions?.imageSize\"\n [autoPlay]=\"currentOptions?.imageAutoPlay\"\n [autoPlayInterval]=\"currentOptions?.imageAutoPlayInterval\"\n [autoPlayPauseOnHover]=\"currentOptions?.imageAutoPlayPauseOnHover\"\n [infinityMove]=\"currentOptions?.imageInfinityMove\"\n [lazyLoading]=\"currentOptions?.lazyLoading\"\n [actions]=\"currentOptions?.imageActions\"\n [descriptions]=\"descriptions\"\n [showDescription]=\"currentOptions?.imageDescription\"\n [bullets]=\"currentOptions?.imageBullets\"\n (onClick)=\"openPreview($event)\"\n (onActiveChange)=\"selectFromImage($event)\">\n </ngx-gallery-image>\n }\n\n @if (currentOptions?.thumbnails) {\n <ngx-gallery-thumbnails\n [style.marginTop]=\"getThumbnailsMarginTop()\"\n [name]=\"name\"\n [style.marginBottom]=\"getThumbnailsMarginBottom()\"\n [style.height]=\"getThumbnailsHeight()\"\n [images]=\"smallImages\"\n [links]=\"currentOptions?.thumbnailsAsLinks ? links : []\"\n [labels]=\"labels\" [linkTarget]=\"currentOptions?.linkTarget\"\n [widths]=\"widths\"\n [heights]=\"heights\"\n [types]=\"types\"\n [selectedIndex]=\"selectedIndex\"\n [columns]=\"currentOptions?.thumbnailsColumns\"\n [rows]=\"currentOptions?.thumbnailsRows\"\n [margin]=\"currentOptions?.thumbnailMargin\"\n [arrows]=\"currentOptions?.thumbnailsArrows\"\n [arrowsAutoHide]=\"currentOptions?.thumbnailsArrowsAutoHide\"\n [arrowPrevIcon]=\"currentOptions?.arrowPrevIcon\"\n [arrowNextIcon]=\"currentOptions?.arrowNextIcon\"\n [clickable]=\"currentOptions?.image || currentOptions?.preview\"\n [swipe]=\"currentOptions?.thumbnailsSwipe\"\n [size]=\"currentOptions?.thumbnailSize\"\n [moveSize]=\"currentOptions?.thumbnailsMoveSize\"\n [order]=\"currentOptions?.thumbnailsOrder\"\n [remainingCount]=\"currentOptions?.thumbnailsRemainingCount\"\n [lazyLoading]=\"currentOptions?.lazyLoading\"\n [actions]=\"currentOptions?.thumbnailActions\"\n (onActiveChange)=\"selectFromThumbnails($event)\">\n </ngx-gallery-thumbnails>\n }\n\n <ngx-gallery-preview-loader\n #previewLoader\n [name]=\"name\"\n [prevIndex]=\"prevIndex\"\n [images]=\"bigImages\"\n [ordImages]=\"mediumImages\"\n [mediaInfos]=\"mediaInfos\"\n [links]=\"currentOptions?.ccpPreviewImageAsLink ? links : []\"\n [descriptions]=\"descriptions\"\n [widths]=\"widths\"\n [heights]=\"heights\"\n [types]=\"types\"\n [mtypes]=\"mtypes\"\n [showDescription]=\"currentOptions?.previewDescription\"\n [arrowPrevIcon]=\"currentOptions?.arrowPrevIcon\"\n [arrowNextIcon]=\"currentOptions?.arrowNextIcon\"\n [closeIcon]=\"currentOptions?.closeIcon\"\n [fullscreenIcon]=\"currentOptions?.fullscreenIcon\"\n [spinnerIcon]=\"currentOptions?.spinnerIcon\"\n [swipe]=\"currentOptions?.previewSwipe\"\n [fullscreen]=\"currentOptions?.previewFullscreen\"\n [forceFullscreen]=\"currentOptions?.previewForceFullscreen\"\n [closeOnClick]=\"currentOptions?.previewCloseOnClick\"\n [closeOnEsc]=\"currentOptions?.previewCloseOnEsc\"\n [keyboardNavigation]=\"currentOptions?.previewKeyboardNavigation\"\n [animation]=\"currentOptions?.previewAnimation\"\n [autoPlay]=\"currentOptions?.previewAutoPlay\"\n [autoPlayInterval]=\"currentOptions?.previewAutoPlayInterval\"\n [autoPlayPauseOnHover]=\"currentOptions?.previewAutoPlayPauseOnHover\"\n [infinityMove]=\"currentOptions?.previewInfinityMove\"\n [isSVGActive]=\"isSVGActive\"\n [zoom]=\"currentOptions?.previewZoom\" [zoomStep]=\"currentOptions?.previewZoomStep\"\n [zoomMax]=\"currentOptions?.previewZoomMax\" [zoomMin]=\"currentOptions?.previewZoomMin\"\n [zoomInIcon]=\"currentOptions?.zoomInIcon\" [zoomOutIcon]=\"currentOptions?.zoomOutIcon\"\n [actions]=\"currentOptions?.actions\"\n [rotate]=\"currentOptions?.previewRotate\"\n [rotateLeftIcon]=\"currentOptions?.rotateLeftIcon\"\n [rotateRightIcon]=\"currentOptions?.rotateRightIcon\"\n [download]=\"currentOptions?.previewDownload\"\n [downloadIcon]=\"currentOptions?.downloadIcon\"\n [bullets]=\"currentOptions?.previewBullets\"\n (onClose)=\"onPreviewClose()\" (onOpen)=\"onPreviewOpen()\"\n (onActiveChange)=\"previewSelect($event)\"\n [isActive]=\"previewEnabled\">\n </ngx-gallery-preview-loader>\n</div>", styles: [":host{display:inline-block}:host>*{float:left}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep .ngx-gallery-icon{color:#000;font-size:25px;position:absolute;display:inline-block}:host ::ng-deep .ngx-gallery-icon .ngx-gallery-icon-content{display:block}:host ::ng-deep .ngx-gallery-clickable{cursor:pointer}:host ::ng-deep .ngx-gallery-icons-wrapper .ngx-gallery-icon{position:relative;margin-right:5px;margin-top:5px;font-size:20px;cursor:pointer}:host ::ng-deep .ngx-gallery-icons-wrapper{float:right}:host ::ng-deep ngx-gallery-thumbnails .ngx-gallery-arrow{border-radius:80%;padding:4px;background-color:#fff;width:30px}:host .ngx-gallery-layout{width:100%;height:100%;display:flex;flex-direction:column}:host .ngx-gallery-layout:not(.preview-only){border:1px solid #e8e8e8!important;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f!important;border-radius:4px;background-color:#fafafa!important;padding:8px 11px!important}:host .ngx-gallery-layout.thumbnails-top ngx-gallery-image{order:2}:host .ngx-gallery-layout.thumbnails-top ngx-gallery-thumbnails{order:1}:host .ngx-gallery-layout.thumbnails-bottom ngx-gallery-image{order:1}:host .ngx-gallery-layout.thumbnails-bottom ngx-gallery-thumbnails{order:2}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NgxGalleryImageComponent, selector: "ngx-gallery-image", inputs: ["name", "images", "imageWidth", "imageHeight", "imageVBox", "positionX", "positionY", "mediaInfos", "hasVideo", "links", "clickable", "selectedIndex", "arrows", "arrowsAutoHide", "swipe", "animation", "size", "arrowPrevIcon", "arrowNextIcon", "autoPlay", "autoPlayInterval", "autoPlayPauseOnHover", "infinityMove", "lazyLoading", "actions", "descriptions", "types", "mtypes", "widths", "heights", "showDescription", "bullets", "interactive", "isSVGActive", "interactiveIcon"], outputs: ["onClick", "onActiveChange"] }, { kind: "component", type: NgxGalleryThumbnailsComponent, selector: "ngx-gallery-thumbnails", inputs: ["name", "images", "links", "labels", "types", "widths", "heights", "linkTarget", "columns", "rows", "arrows", "arrowsAutoHide", "margin", "selectedIndex", "clickable", "swipe", "size", "arrowPrevIcon", "arrowNextIcon", "moveSize", "order", "remainingCount", "lazyLoading", "actions"], outputs: ["onActiveChange"] }, { kind: "component", type: PreviewLoaderComponent, selector: "ngx-gallery-preview-loader", inputs: ["onlyPreview", "previewEnabled", "prevIndex", "images", "ordImages", "mediaInfos", "links", "descriptions", "types", "mtypes", "widths", "heights", "svgArrows", "svgIcons", "svgPolygons", "svgTexts", "showDescription", "swipe", "fullscreen", "forceFullscreen", "closeOnClick", "closeOnEsc", "keyboardNavigation", "arrowPrevIcon", "arrowNextIcon", "closeIcon", "fullscreenIcon", "spinnerIcon", "autoPlay", "autoPlayInterval", "autoPlayPauseOnHover", "infinityMove", "interactive", "hasSVGArrow", "hasSVGPolygon", "hasSVGIcon", "hasSVGText", "isSVGActive", "zoom", "zoomStep", "zoomMax", "zoomMin", "interactiveIcon", "zoomInIcon", "zoomOutIcon", "animation", "actions", "rotate", "rotateLeftIcon", "rotateRightIcon", "download", "downloadIcon", "bullets", "name", "openIndex", "isActive"], outputs: ["onOpen", "onClose", "onActiveChange"] }] }); }
|
|
2914
2912
|
}
|
|
2915
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2913
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryComponent, decorators: [{
|
|
2916
2914
|
type: Component,
|
|
2917
2915
|
args: [{ selector: 'ngx-gallery', providers: [NgxGalleryHelperService, CcMediaService], standalone: false, template: "\n<div class=\"ngx-gallery-layout {{currentOptions?.layout}}\" [class.preview-only]=\"!currentOptions?.image\" [ngStyle]=\"styleBox\">\n <!--\n currently resizing window does NOT lead to a resize event, if external video in an iframe is shown\n problem: maximizing and minimizing the video would not be possible!\n -->\n @if (ccMediaService.isExternalVideo(types[selectedIndex])) {\n } @else {\n <div (window:resize)=\"onResize()\"></div>\n }\n\n\n @if (currentOptions?.image) {\n <ngx-gallery-image\n [name]=\"name\"\n [style.height]=\"getImageHeight()\"\n [images]=\"mediumImages\"\n [imageWidth]=\"imageWidth\"\n [imageHeight]=\"imageHeight\"\n [imageVBox]=\"imageVBox\"\n [hasVideo]=\"hasVideo\"\n [positionX]=\"positionX\"\n [positionY]=\"positionY\"\n [links]=\"currentOptions?.ccpImageAsLink ? links : []\"\n [widths]=\"widths\"\n [heights]=\"heights\"\n [mediaInfos]=\"mediaInfos\"\n [types]=\"types\"\n [mtypes]=\"mtypes\"\n [isSVGActive]=\"isSVGActive\"\n [clickable]=\"currentOptions?.preview\"\n [selectedIndex]=\"selectedIndex\"\n [arrows]=\"currentOptions?.imageArrows\"\n [arrowsAutoHide]=\"currentOptions?.imageArrowsAutoHide\"\n [arrowPrevIcon]=\"currentOptions?.arrowPrevIcon\"\n [arrowNextIcon]=\"currentOptions?.arrowNextIcon\"\n [swipe]=\"currentOptions?.imageSwipe\"\n [animation]=\"currentOptions?.imageAnimation\"\n [size]=\"currentOptions?.imageSize\"\n [autoPlay]=\"currentOptions?.imageAutoPlay\"\n [autoPlayInterval]=\"currentOptions?.imageAutoPlayInterval\"\n [autoPlayPauseOnHover]=\"currentOptions?.imageAutoPlayPauseOnHover\"\n [infinityMove]=\"currentOptions?.imageInfinityMove\"\n [lazyLoading]=\"currentOptions?.lazyLoading\"\n [actions]=\"currentOptions?.imageActions\"\n [descriptions]=\"descriptions\"\n [showDescription]=\"currentOptions?.imageDescription\"\n [bullets]=\"currentOptions?.imageBullets\"\n (onClick)=\"openPreview($event)\"\n (onActiveChange)=\"selectFromImage($event)\">\n </ngx-gallery-image>\n }\n\n @if (currentOptions?.thumbnails) {\n <ngx-gallery-thumbnails\n [style.marginTop]=\"getThumbnailsMarginTop()\"\n [name]=\"name\"\n [style.marginBottom]=\"getThumbnailsMarginBottom()\"\n [style.height]=\"getThumbnailsHeight()\"\n [images]=\"smallImages\"\n [links]=\"currentOptions?.thumbnailsAsLinks ? links : []\"\n [labels]=\"labels\" [linkTarget]=\"currentOptions?.linkTarget\"\n [widths]=\"widths\"\n [heights]=\"heights\"\n [types]=\"types\"\n [selectedIndex]=\"selectedIndex\"\n [columns]=\"currentOptions?.thumbnailsColumns\"\n [rows]=\"currentOptions?.thumbnailsRows\"\n [margin]=\"currentOptions?.thumbnailMargin\"\n [arrows]=\"currentOptions?.thumbnailsArrows\"\n [arrowsAutoHide]=\"currentOptions?.thumbnailsArrowsAutoHide\"\n [arrowPrevIcon]=\"currentOptions?.arrowPrevIcon\"\n [arrowNextIcon]=\"currentOptions?.arrowNextIcon\"\n [clickable]=\"currentOptions?.image || currentOptions?.preview\"\n [swipe]=\"currentOptions?.thumbnailsSwipe\"\n [size]=\"currentOptions?.thumbnailSize\"\n [moveSize]=\"currentOptions?.thumbnailsMoveSize\"\n [order]=\"currentOptions?.thumbnailsOrder\"\n [remainingCount]=\"currentOptions?.thumbnailsRemainingCount\"\n [lazyLoading]=\"currentOptions?.lazyLoading\"\n [actions]=\"currentOptions?.thumbnailActions\"\n (onActiveChange)=\"selectFromThumbnails($event)\">\n </ngx-gallery-thumbnails>\n }\n\n <ngx-gallery-preview-loader\n #previewLoader\n [name]=\"name\"\n [prevIndex]=\"prevIndex\"\n [images]=\"bigImages\"\n [ordImages]=\"mediumImages\"\n [mediaInfos]=\"mediaInfos\"\n [links]=\"currentOptions?.ccpPreviewImageAsLink ? links : []\"\n [descriptions]=\"descriptions\"\n [widths]=\"widths\"\n [heights]=\"heights\"\n [types]=\"types\"\n [mtypes]=\"mtypes\"\n [showDescription]=\"currentOptions?.previewDescription\"\n [arrowPrevIcon]=\"currentOptions?.arrowPrevIcon\"\n [arrowNextIcon]=\"currentOptions?.arrowNextIcon\"\n [closeIcon]=\"currentOptions?.closeIcon\"\n [fullscreenIcon]=\"currentOptions?.fullscreenIcon\"\n [spinnerIcon]=\"currentOptions?.spinnerIcon\"\n [swipe]=\"currentOptions?.previewSwipe\"\n [fullscreen]=\"currentOptions?.previewFullscreen\"\n [forceFullscreen]=\"currentOptions?.previewForceFullscreen\"\n [closeOnClick]=\"currentOptions?.previewCloseOnClick\"\n [closeOnEsc]=\"currentOptions?.previewCloseOnEsc\"\n [keyboardNavigation]=\"currentOptions?.previewKeyboardNavigation\"\n [animation]=\"currentOptions?.previewAnimation\"\n [autoPlay]=\"currentOptions?.previewAutoPlay\"\n [autoPlayInterval]=\"currentOptions?.previewAutoPlayInterval\"\n [autoPlayPauseOnHover]=\"currentOptions?.previewAutoPlayPauseOnHover\"\n [infinityMove]=\"currentOptions?.previewInfinityMove\"\n [isSVGActive]=\"isSVGActive\"\n [zoom]=\"currentOptions?.previewZoom\" [zoomStep]=\"currentOptions?.previewZoomStep\"\n [zoomMax]=\"currentOptions?.previewZoomMax\" [zoomMin]=\"currentOptions?.previewZoomMin\"\n [zoomInIcon]=\"currentOptions?.zoomInIcon\" [zoomOutIcon]=\"currentOptions?.zoomOutIcon\"\n [actions]=\"currentOptions?.actions\"\n [rotate]=\"currentOptions?.previewRotate\"\n [rotateLeftIcon]=\"currentOptions?.rotateLeftIcon\"\n [rotateRightIcon]=\"currentOptions?.rotateRightIcon\"\n [download]=\"currentOptions?.previewDownload\"\n [downloadIcon]=\"currentOptions?.downloadIcon\"\n [bullets]=\"currentOptions?.previewBullets\"\n (onClose)=\"onPreviewClose()\" (onOpen)=\"onPreviewOpen()\"\n (onActiveChange)=\"previewSelect($event)\"\n [isActive]=\"previewEnabled\">\n </ngx-gallery-preview-loader>\n</div>", styles: [":host{display:inline-block}:host>*{float:left}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep .ngx-gallery-icon{color:#000;font-size:25px;position:absolute;display:inline-block}:host ::ng-deep .ngx-gallery-icon .ngx-gallery-icon-content{display:block}:host ::ng-deep .ngx-gallery-clickable{cursor:pointer}:host ::ng-deep .ngx-gallery-icons-wrapper .ngx-gallery-icon{position:relative;margin-right:5px;margin-top:5px;font-size:20px;cursor:pointer}:host ::ng-deep .ngx-gallery-icons-wrapper{float:right}:host ::ng-deep ngx-gallery-thumbnails .ngx-gallery-arrow{border-radius:80%;padding:4px;background-color:#fff;width:30px}:host .ngx-gallery-layout{width:100%;height:100%;display:flex;flex-direction:column}:host .ngx-gallery-layout:not(.preview-only){border:1px solid #e8e8e8!important;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f!important;border-radius:4px;background-color:#fafafa!important;padding:8px 11px!important}:host .ngx-gallery-layout.thumbnails-top ngx-gallery-image{order:2}:host .ngx-gallery-layout.thumbnails-top ngx-gallery-thumbnails{order:1}:host .ngx-gallery-layout.thumbnails-bottom ngx-gallery-image{order:1}:host .ngx-gallery-layout.thumbnails-bottom ngx-gallery-thumbnails{order:2}\n"] }]
|
|
2918
2916
|
}], propDecorators: { options: [{
|
|
@@ -2963,16 +2961,16 @@ class CustomHammerConfig extends HammerGestureConfig {
|
|
|
2963
2961
|
rotate: { enable: false }
|
|
2964
2962
|
};
|
|
2965
2963
|
}
|
|
2966
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2967
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2964
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CustomHammerConfig, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2965
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CustomHammerConfig }); }
|
|
2968
2966
|
}
|
|
2969
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2967
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CustomHammerConfig, decorators: [{
|
|
2970
2968
|
type: Injectable
|
|
2971
2969
|
}] });
|
|
2972
2970
|
|
|
2973
2971
|
class NgxGalleryModule {
|
|
2974
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2975
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
2972
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2973
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryModule, declarations: [NgxGalleryActionComponent,
|
|
2976
2974
|
NgxGalleryArrowsComponent,
|
|
2977
2975
|
NgxGalleryBulletsComponent,
|
|
2978
2976
|
NgxGalleryImageComponent,
|
|
@@ -2988,11 +2986,11 @@ class NgxGalleryModule {
|
|
|
2988
2986
|
NgxGalleryVideoComponent,
|
|
2989
2987
|
UtilsScriptComponent,
|
|
2990
2988
|
PreviewLoaderComponent], imports: [CommonModule, CcSupportModule], exports: [NgxGalleryComponent] }); }
|
|
2991
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
2989
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryModule, providers: [
|
|
2992
2990
|
{ provide: HAMMER_GESTURE_CONFIG, useClass: CustomHammerConfig }
|
|
2993
2991
|
], imports: [CommonModule, CcSupportModule] }); }
|
|
2994
2992
|
}
|
|
2995
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2993
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryModule, decorators: [{
|
|
2996
2994
|
type: NgModule,
|
|
2997
2995
|
args: [{
|
|
2998
2996
|
imports: [
|