@casus-campus/ngx-gallery 0.19.0 → 0.21.1

package/fesm2022/casus-campus-ngx-gallery.mjs

@@ -1,11 +1,10 @@
-import * as i3 from '@angular/common';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input, ViewChild, EventEmitter, ChangeDetectionStrategy, Output, HostBinding, NgModule } from '@angular/core';
-import * as i1 from '@angular/platform-browser';
-import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
-import * as i2 from '@casus-campus/cc-support';
-import { MediumAddOnType, MediumUrlType, CcSupportModule } from '@casus-campus/cc-support';
+import { Injectable, inject, Input, Component, ChangeDetectorRef, ViewChild, EventEmitter, Output, ChangeDetectionStrategy, Renderer2, ElementRef, HostBinding, ComponentFactoryResolver, ApplicationRef, Injector, NgModule } from '@angular/core';
+import { DomSanitizer, HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
+import * as i7 from '@casus-campus/cc-support';
+import { CcSupportService, MediumAddOnType, MediumUrlType, CcSupportModule } from '@casus-campus/cc-support';
 import { BehaviorSubject, Subject, timer, forkJoin, take } from 'rxjs';
 import { filter } from 'rxjs/operators';
 
@@ -115,13 +114,14 @@ class LogService {
         this.PRIO_ERROR = 1;
         this.PRIO_BASE = 0;
     }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     log(fName, msg, prioLevel) {
         // console.log((new Date()).getTime()  + ' ' + fName + ': ' + msg);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: LogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: LogService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: LogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: LogService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: LogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: LogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -129,10 +129,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
         }] });
 
 class CcMediaService {
-    constructor(logService, ccSuportService) {
-        this.logService = logService;
-        this.ccSuportService = ccSuportService;
-        /* eslint-disable @typescript-eslint/naming-convention, no-underscore-dangle, id-blacklist, id-match */
+    constructor() {
+        this.logService = inject(LogService);
+        this.ccSuportService = inject(CcSupportService);
         this._openedMediumTargets$ = new BehaviorSubject(null);
         this.openedMediumTargets$ = this._openedMediumTargets$.asObservable().pipe(filter(openedMedium => !!openedMedium));
     }
@@ -305,20 +304,20 @@ class CcMediaService {
     }
     // path used as placeholder image for text/html, pdf, audio and video
     getMimeTypePlaceholderPath(mimeType) {
-        const matIconName = this.ccSuportService.getMatIconNameForMimeType(mimeType) || 'cancel_presentation';
+        const matIconName = this.ccSuportService.getIconForMimeType({ mimeType, name: '', width: 0, height: 0, description: '' }) || 'cancel_presentation';
         return `assets/${matIconName}-24px.svg`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: CcMediaService, deps: [{ token: LogService }, { token: i2.CcSupportService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: CcMediaService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CcMediaService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CcMediaService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: CcMediaService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CcMediaService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: LogService }, { type: i2.CcSupportService }] });
+        }] });
 
 class NgxGallerySvgPolygonComponent {
-    constructor(logService, ccMediaService) {
-        this.logService = logService;
-        this.ccMediaService = ccMediaService;
+    constructor() {
+        this.logService = inject(LogService);
+        this.ccMediaService = inject(CcMediaService);
     }
     ngOnInit() {
         this.logService.log('NgxGallerySvgPolygonComponent.ngOnInit', '...');
@@ -332,20 +331,20 @@ class NgxGallerySvgPolygonComponent {
             this.ccMediaService.openMediumTarget(event, polygon.target);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxGallerySvgPolygonComponent, deps: [{ token: LogService }, { token: CcMediaService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: NgxGallerySvgPolygonComponent, isStandalone: false, selector: "[svg-polygon]", inputs: { svgPolygons: "svgPolygons" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngFor=\"let svgPolygon of svgPolygons;\">\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</ng-container>\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"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGallerySvgPolygonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxGallerySvgPolygonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGallerySvgPolygonComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[svg-polygon]', standalone: false, template: "<ng-container *ngFor=\"let svgPolygon of svgPolygons;\">\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</ng-container>\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"] }]
-        }], ctorParameters: () => [{ type: LogService }, { type: CcMediaService }], propDecorators: { svgPolygons: [{
+            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"] }]
+        }], propDecorators: { svgPolygons: [{
                 type: Input
             }] } });
 
 class NgxGallerySvgIconComponent {
-    constructor(logService, ccMediaService) {
-        this.logService = logService;
-        this.ccMediaService = ccMediaService;
+    constructor() {
+        this.logService = inject(LogService);
+        this.ccMediaService = inject(CcMediaService);
         this.scaleFactor = 1.0;
         this.widths = [];
         this.heights = [];
@@ -372,38 +371,38 @@ class NgxGallerySvgIconComponent {
     setHeights() {
         this.heights = this.svgIcons.map(icon => icon.height * this.scaleFactor);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxGallerySvgIconComponent, deps: [{ token: LogService }, { token: CcMediaService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: NgxGallerySvgIconComponent, isStandalone: false, selector: "[svg-icon]", inputs: { svgIcons: "svgIcons", scaleFactor: "scaleFactor" }, usesOnChanges: true, ngImport: i0, template: "<svg:g *ngFor=\"let svgIcon of svgIcons; let i = index\">\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", 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"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGallerySvgIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxGallerySvgIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGallerySvgIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[svg-icon]', standalone: false, template: "<svg:g *ngFor=\"let svgIcon of svgIcons; let i = index\">\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", 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"] }]
-        }], ctorParameters: () => [{ type: LogService }, { type: CcMediaService }], propDecorators: { svgIcons: [{
+            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"] }]
+        }], propDecorators: { svgIcons: [{
                 type: Input
             }], scaleFactor: [{
                 type: Input
             }] } });
 
 class NgxGallerySvgArrowComponent {
-    constructor(logService) {
-        this.logService = logService;
+    constructor() {
+        this.logService = inject(LogService);
     }
     ngOnInit() {
         this.logService.log('NgxGallerySvgArrowComponent.ngOnInit', '...');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxGallerySvgArrowComponent, deps: [{ token: LogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: NgxGallerySvgArrowComponent, isStandalone: false, selector: "[svg-arrow]", inputs: { svgArrows: "svgArrows" }, ngImport: i0, template: "<ng-container *ngFor=\"let svgArrow of svgArrows; 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</ng-container>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGallerySvgArrowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxGallerySvgArrowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGallerySvgArrowComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[svg-arrow]', standalone: false, template: "<ng-container *ngFor=\"let svgArrow of svgArrows; 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</ng-container>\n" }]
-        }], ctorParameters: () => [{ type: LogService }], propDecorators: { svgArrows: [{
+            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" }]
+        }], propDecorators: { svgArrows: [{
                 type: Input
             }] } });
 
 class NgxGallerySvgTextComponent {
-    constructor(logService) {
-        this.logService = logService;
+    constructor() {
+        this.logService = inject(LogService);
     }
     ngOnInit() {
         this.logService.log('NgxGallerySvgTextComponent.ngOnInit', 'count text: ' + this.svgTexts.length);
@@ -414,13 +413,13 @@ class NgxGallerySvgTextComponent {
     getCleanText(txt) {
         return txt.replace(/<\/?[^>]+(>|$)/g, '');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxGallerySvgTextComponent, deps: [{ token: LogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: NgxGallerySvgTextComponent, isStandalone: false, selector: "[svg-text]", inputs: { svgTexts: "svgTexts", width: "width", height: "height" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngFor=\"let svgText of svgTexts;\">\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</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGallerySvgTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxGallerySvgTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGallerySvgTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[svg-text]', standalone: false, template: "<ng-container *ngFor=\"let svgText of svgTexts;\">\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</ng-container>\n" }]
-        }], ctorParameters: () => [{ type: LogService }], propDecorators: { svgTexts: [{
+            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" }]
+        }], propDecorators: { svgTexts: [{
                 type: Input
             }], width: [{
                 type: Input
@@ -429,10 +428,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
             }] } });
 
 class NgxGalleryImageSvgComponent {
-    constructor(logService, ccMediaService, cdRef) {
-        this.logService = logService;
-        this.ccMediaService = ccMediaService;
-        this.cdRef = cdRef;
+    constructor() {
+        this.logService = inject(LogService);
+        this.ccMediaService = inject(CcMediaService);
+        this.cdRef = inject(ChangeDetectorRef);
         this.svgArrows = [];
         this.svgPolygons = [];
         this.svgIcons = [];
@@ -522,13 +521,13 @@ class NgxGalleryImageSvgComponent {
         const heightScaleFactor = originalHeight / currentHeigth;
         return Math.max(widthScaleFactor, heightScaleFactor);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxGalleryImageSvgComponent, deps: [{ token: LogService }, { token: CcMediaService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.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  <svg:g *ngIf=\"!!svgArrows.length\" svg-arrow [svgArrows]=\"svgArrows\"></svg:g>\n  <svg:g *ngIf=\"!!svgPolygons.length\" svg-polygon [svgPolygons]=\"svgPolygons\"></svg:g>\n  <svg:g *ngIf=\"!!svgIcons.length\" svg-icon [svgIcons]=\"svgIcons\" [scaleFactor]=\"scaleFactor\"></svg:g>\n  <svg:g *ngIf=\"!!svgTexts.length\" svg-text [svgTexts]=\"svgTexts\" [width]=\"width\" [height]=\"height\"></svg:g>\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: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryImageSvgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxGalleryImageSvgComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryImageSvgComponent, decorators: [{
             type: Component,
-            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  <svg:g *ngIf=\"!!svgArrows.length\" svg-arrow [svgArrows]=\"svgArrows\"></svg:g>\n  <svg:g *ngIf=\"!!svgPolygons.length\" svg-polygon [svgPolygons]=\"svgPolygons\"></svg:g>\n  <svg:g *ngIf=\"!!svgIcons.length\" svg-icon [svgIcons]=\"svgIcons\" [scaleFactor]=\"scaleFactor\"></svg:g>\n  <svg:g *ngIf=\"!!svgTexts.length\" svg-text [svgTexts]=\"svgTexts\" [width]=\"width\" [height]=\"height\"></svg:g>\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"] }]
-        }], ctorParameters: () => [{ type: LogService }, { type: CcMediaService }, { type: i0.ChangeDetectorRef }], propDecorators: { width: [{
+            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"] }]
+        }], propDecorators: { width: [{
                 type: Input
             }], height: [{
                 type: Input
@@ -568,8 +567,8 @@ class NgxGalleryActionComponent {
         event.stopPropagation();
         event.preventDefault();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxGalleryActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: NgxGalleryActionComponent, isStandalone: false, selector: "ngx-gallery-action", inputs: { icon: "icon", disabled: "disabled", titleText: "titleText" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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: `
     <div class="ngx-gallery-icon" [class.ngx-gallery-icon-disabled]="disabled"
       aria-hidden="true"
       title="{{ titleText }}"
@@ -577,7 +576,7 @@ class NgxGalleryActionComponent {
         <i class="ngx-gallery-icon-content {{ icon }}"></i>
     </div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxGalleryActionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryActionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngx-gallery-action',
@@ -612,8 +611,8 @@ class NgxGalleryArrowsComponent {
     handleNextClick() {
         this.onNextClick.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxGalleryArrowsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryArrowsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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: `
     <div class="ngx-gallery-arrow-wrapper ngx-gallery-arrow-left">
       <div class="ngx-gallery-icon ngx-gallery-arrow"
         aria-hidden="true"
@@ -632,7 +631,7 @@ class NgxGalleryArrowsComponent {
     </div>
     `, 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"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxGalleryArrowsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryArrowsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-gallery-arrows', template: `
     <div class="ngx-gallery-arrow-wrapper ngx-gallery-arrow-left">
@@ -677,22 +676,26 @@ class NgxGalleryBulletsComponent {
     handleChange(event, index) {
         this.onChange.emit(index);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxGalleryBulletsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: NgxGalleryBulletsComponent, isStandalone: false, selector: "ngx-gallery-bullets", inputs: { count: "count", active: "active" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
-    <div class="ngx-gallery-bullet"
-      *ngFor="let bullet of getBullets(); let i = index;" (click)="handleChange($event, i)"
-      [ngClass]="{ 'ngx-gallery-active': i === active }">
-    </div>
-  `, 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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryBulletsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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: `
+    @for (bullet of getBullets(); track bullet; let i = $index) {
+      <div class="ngx-gallery-bullet"
+        (click)="handleChange($event, i)"
+        [ngClass]="{ 'ngx-gallery-active': i === active }">
+      </div>
+    }
+    `, 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxGalleryBulletsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryBulletsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-gallery-bullets', template: `
-    <div class="ngx-gallery-bullet"
-      *ngFor="let bullet of getBullets(); let i = index;" (click)="handleChange($event, i)"
-      [ngClass]="{ 'ngx-gallery-active': i === active }">
-    </div>
-  `, standalone: false, 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"] }]
+    @for (bullet of getBullets(); track bullet; let i = $index) {
+      <div class="ngx-gallery-bullet"
+        (click)="handleChange($event, i)"
+        [ngClass]="{ 'ngx-gallery-active': i === active }">
+      </div>
+    }
+    `, standalone: false, 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"] }]
         }], propDecorators: { count: [{
                 type: Input
             }], active: [{
@@ -709,8 +712,8 @@ class NgxGalleryAnimation {
 }
 
 class NgxGalleryHelperService {
-    constructor(renderer) {
-        this.renderer = renderer;
+    constructor() {
+        this.renderer = inject(Renderer2);
         this.swipeHandlers = new Map();
     }
     manageSwipe(status, element, id, nextHandler, prevHandler) {
@@ -728,7 +731,9 @@ class NgxGalleryHelperService {
                 this.removeSwipeHandlers(id);
             }
         }
-        catch (e) { }
+        catch (_) {
+            // Intentionally ignore error
+        }
     }
     getBackgroundUrl(imageUrl) {
         if (!imageUrl) {
@@ -749,15 +754,15 @@ class NgxGalleryHelperService {
     removeSwipeHandlers(id) {
         this.swipeHandlers.delete(id);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxGalleryHelperService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxGalleryHelperService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryHelperService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxGalleryHelperService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryHelperService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }] });
+        }] });
 
 class NgxGalleryOrderedImage {
     constructor(obj) {
@@ -789,10 +794,10 @@ class UtilsScriptComponent {
     ngAfterViewInit() {
         this.convertToScript();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: UtilsScriptComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UtilsScriptComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: UtilsScriptComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UtilsScriptComponent, decorators: [{
             type: Component,
             args: [{ selector: 'script-js', standalone: false, template: "<div #script style.display=\"none\">\n  <ng-content></ng-content>\n</div>\n" }]
         }], propDecorators: { src: [{
@@ -805,9 +810,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
             }] } });
 
 class NgxGalleryVideoComponent {
-    constructor(sanitization, logService) {
-        this.sanitization = sanitization;
-        this.logService = logService;
+    constructor() {
+        this.sanitization = inject(DomSanitizer);
+        this.logService = inject(LogService);
     }
     ngOnInit() {
         this.logService.log('NgxGalleryVideoComponent.ngOnInit', 'starts ...');
@@ -840,13 +845,13 @@ class NgxGalleryVideoComponent {
     timeUpdate() {
         this.logService.log('NgxGalleryImageComponent.timeUpdate', this.mmelement.nativeElement.currentTime);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxGalleryVideoComponent, deps: [{ token: i1.DomSanitizer }, { token: LogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.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  <ng-container *ngIf=\"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\n      <video #mmelement [width]=\"mediaInfo['bwidth']\" [height]=\"mediaInfo['bheight']\"\n        title=\"{{showDescription && description ? description : ''}}\" poster=\"{{image.poster}}\"\n        autoplay=\"{{image.autoplay ? 'autoplay': ''}}\">\n        <ng-container *ngFor=\"let url of image.urls; let i = index\">\n          <source [src]=\"getSafeVideoUrl(url.url)\" type=\"{{url.mimeType}}\">\n        </ng-container>\n      </video>\n      <!--\n                ratio: 9/10,\n\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        &#125;,\n        onBeforeFinish: function(){{ '{' }}\n        return false;\n        &#125;\n        &#125;);\n        &#125;);\n      </script-js>\n    </div>\n  </ng-container>\n  <div class=\"ngx-gallery-video-text\" *ngIf=\"showDescription && description\" [innerHTML]=\"description\">\n  </div>\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;background-color:#fff}.ngx-gallery-image.ngx-gallery-active{z-index:1000}.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: UtilsScriptComponent, selector: "script-js", inputs: ["src", "type"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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        &#125;,\n        onBeforeFinish: function(){{ '{' }}\n        return false;\n        &#125;\n        &#125;);\n        &#125;);\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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxGalleryVideoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryVideoComponent, decorators: [{
             type: Component,
-            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  <ng-container *ngIf=\"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\n      <video #mmelement [width]=\"mediaInfo['bwidth']\" [height]=\"mediaInfo['bheight']\"\n        title=\"{{showDescription && description ? description : ''}}\" poster=\"{{image.poster}}\"\n        autoplay=\"{{image.autoplay ? 'autoplay': ''}}\">\n        <ng-container *ngFor=\"let url of image.urls; let i = index\">\n          <source [src]=\"getSafeVideoUrl(url.url)\" type=\"{{url.mimeType}}\">\n        </ng-container>\n      </video>\n      <!--\n                ratio: 9/10,\n\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        &#125;,\n        onBeforeFinish: function(){{ '{' }}\n        return false;\n        &#125;\n        &#125;);\n        &#125;);\n      </script-js>\n    </div>\n  </ng-container>\n  <div class=\"ngx-gallery-video-text\" *ngIf=\"showDescription && description\" [innerHTML]=\"description\">\n  </div>\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;background-color:#fff}.ngx-gallery-image.ngx-gallery-active{z-index:1000}.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"] }]
-        }], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: LogService }], propDecorators: { mmelement: [{
+            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        &#125;,\n        onBeforeFinish: function(){{ '{' }}\n        return false;\n        &#125;\n        &#125;);\n        &#125;);\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"] }]
+        }], propDecorators: { mmelement: [{
                 type: ViewChild,
                 args: ['mmelement', { static: true }]
             }], image: [{
@@ -864,11 +869,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
             }] } });
 
 class NgxGalleryImageComponent {
-    constructor(sanitization, elementRef, helperService, logService) {
-        this.sanitization = sanitization;
-        this.elementRef = elementRef;
-        this.helperService = helperService;
-        this.logService = logService;
+    constructor() {
+        this.sanitization = inject(DomSanitizer);
+        this.elementRef = inject(ElementRef);
+        this.helperService = inject(NgxGalleryHelperService);
+        this.logService = inject(LogService);
         this.zoomValue = '1.0';
         this.onClick = new EventEmitter();
         this.onActiveChange = new EventEmitter();
@@ -887,7 +892,7 @@ class NgxGalleryImageComponent {
         if (changes.swipe) {
             this.helperService.manageSwipe(this.swipe, this.elementRef, 'image', () => this.showNext(), () => this.showPrev());
         }
-        if (changes.hasOwnProperty('selectedIndex')) {
+        if (Object.prototype.hasOwnProperty.call(changes, 'selectedIndex')) {
             this.countChanges++;
             this.logService.log('NgxGalleryImageComponent.ngOnChanges(' + this.name + ')', 'starts ...');
         }
@@ -1028,13 +1033,13 @@ class NgxGalleryImageComponent {
     getBackgroundSize(index) {
         return (this.mtypes[index] === 'pdf' ? '400px' : '100%');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxGalleryImageComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.ElementRef }, { token: NgxGalleryHelperService }, { token: LogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.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: "<div class=\"ngx-gallery-image-wrapper ngx-gallery-animation-{{animation}} ngx-gallery-image-size-{{size}}\"\n  *ngFor=\"let image of getImages(); let i = index;\">\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    *ngIf=\"mtypes[image.index] === 'image' || mtypes[image.index] === 'pdf'\"\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      <ng-container *ngFor=\"let action of actions\">\n        <ngx-gallery-action\n          *ngIf=\"!action.disabled\"\n          [icon]=\"action.icon\"\n          [disabled]=\"action.disabled\"\n          [titleText]=\"action.titleText\"\n          (onClick)=\"action.onClick($event, image.index)\">\n        </ngx-gallery-action>\n      </ng-container>\n    </div>\n\n    <cc-imagesvg\n      *ngIf=\"isSVGActive && !!image.addOns.length\"\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    <div class=\"ngx-gallery-image-text\"\n      *ngIf=\"showDescription && descriptions[image.index]\"\n      [innerHTML]=\"descriptions[image.index] | safeHtml\"\n      (click)=\"$event.stopPropagation()\">\n    </div>\n  </div>\n  <cc-video\n    *ngIf=\"mtypes[image.index] === 'audio' || mtypes[image.index] === '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  <div *ngIf=\"mtypes[selectedIndex] === 'video'\" >\n    <div class=\"ngx-gallery-icons-wrapper ngx-gallery-actionicon-image\">\n      <ng-container *ngFor=\"let action of actions\">\n        <ngx-gallery-action\n        *ngIf=\"!action.disabled && action.titleText !== 'full screen'\"\n        [icon]=\"action.icon\"\n        [disabled]=\"action.disabled\"\n        [titleText]=\"action.titleText\"\n        (onClick)=\"action.onClick($event, selectedIndex)\">\n        </ngx-gallery-action>\n      </ng-container>\n    </div>\n  </div>\n</div>\n<ngx-gallery-bullets *ngIf=\"bullets\" [count]=\"images.length\" [active]=\"selectedIndex\" (onChange)=\"show($event)\"></ngx-gallery-bullets>\n<ngx-gallery-arrows class=\"ngx-gallery-image-size-{{size}}\"\n  *ngIf=\"arrows\"\n  (onPrevClick)=\"showPrev()\"\n  (onNextClick)=\"showNext()\"\n  [prevDisabled]=\"!canShowPrev()\"\n  [nextDisabled]=\"!canShowNext()\"\n  [arrowPrevIcon]=\"arrowPrevIcon\"\n  [arrowNextIcon]=\"arrowNextIcon\">\n</ngx-gallery-arrows>", 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;border:1px solid #e8e8e8;border-radius:4px;overflow:hidden;background-color:#fff}.ngx-gallery-image.ngx-gallery-active{z-index:1000}.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i2.SafeHtmlPipe, name: "safeHtml" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxGalleryImageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryImageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-gallery-image', standalone: false, template: "<div class=\"ngx-gallery-image-wrapper ngx-gallery-animation-{{animation}} ngx-gallery-image-size-{{size}}\"\n  *ngFor=\"let image of getImages(); let i = index;\">\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    *ngIf=\"mtypes[image.index] === 'image' || mtypes[image.index] === 'pdf'\"\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      <ng-container *ngFor=\"let action of actions\">\n        <ngx-gallery-action\n          *ngIf=\"!action.disabled\"\n          [icon]=\"action.icon\"\n          [disabled]=\"action.disabled\"\n          [titleText]=\"action.titleText\"\n          (onClick)=\"action.onClick($event, image.index)\">\n        </ngx-gallery-action>\n      </ng-container>\n    </div>\n\n    <cc-imagesvg\n      *ngIf=\"isSVGActive && !!image.addOns.length\"\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    <div class=\"ngx-gallery-image-text\"\n      *ngIf=\"showDescription && descriptions[image.index]\"\n      [innerHTML]=\"descriptions[image.index] | safeHtml\"\n      (click)=\"$event.stopPropagation()\">\n    </div>\n  </div>\n  <cc-video\n    *ngIf=\"mtypes[image.index] === 'audio' || mtypes[image.index] === '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  <div *ngIf=\"mtypes[selectedIndex] === 'video'\" >\n    <div class=\"ngx-gallery-icons-wrapper ngx-gallery-actionicon-image\">\n      <ng-container *ngFor=\"let action of actions\">\n        <ngx-gallery-action\n        *ngIf=\"!action.disabled && action.titleText !== 'full screen'\"\n        [icon]=\"action.icon\"\n        [disabled]=\"action.disabled\"\n        [titleText]=\"action.titleText\"\n        (onClick)=\"action.onClick($event, selectedIndex)\">\n        </ngx-gallery-action>\n      </ng-container>\n    </div>\n  </div>\n</div>\n<ngx-gallery-bullets *ngIf=\"bullets\" [count]=\"images.length\" [active]=\"selectedIndex\" (onChange)=\"show($event)\"></ngx-gallery-bullets>\n<ngx-gallery-arrows class=\"ngx-gallery-image-size-{{size}}\"\n  *ngIf=\"arrows\"\n  (onPrevClick)=\"showPrev()\"\n  (onNextClick)=\"showNext()\"\n  [prevDisabled]=\"!canShowPrev()\"\n  [nextDisabled]=\"!canShowNext()\"\n  [arrowPrevIcon]=\"arrowPrevIcon\"\n  [arrowNextIcon]=\"arrowNextIcon\">\n</ngx-gallery-arrows>", 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;border:1px solid #e8e8e8;border-radius:4px;overflow:hidden;background-color:#fff}.ngx-gallery-image.ngx-gallery-active{z-index:1000}.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"] }]
-        }], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: i0.ElementRef }, { type: NgxGalleryHelperService }, { type: LogService }], propDecorators: { name: [{
+            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"] }]
+        }], propDecorators: { name: [{
                 type: Input
             }], images: [{
                 type: Input
@@ -1111,13 +1116,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
             }] } });
 
 class NgxGalleryPreviewComponent {
-    constructor(sanitization, elementRef, helperService, renderer, logService, ccMediaService) {
-        this.sanitization = sanitization;
-        this.elementRef = elementRef;
-        this.helperService = helperService;
-        this.renderer = renderer;
-        this.logService = logService;
-        this.ccMediaService = ccMediaService;
+    constructor() {
+        this.sanitization = inject(DomSanitizer);
+        this.elementRef = inject(ElementRef);
+        this.helperService = inject(NgxGalleryHelperService);
+        this.renderer = inject(Renderer2);
+        this.logService = inject(LogService);
+        this.ccMediaService = inject(CcMediaService);
         this.showSpinner = false;
         this.positionLeft = 0;
         this.positionTop = 0;
@@ -1322,6 +1327,7 @@ class NgxGalleryPreviewComponent {
     }
     manageFullscreen() {
         if (this.fullscreen || this.forceFullscreen) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const doc = document;
             if (!doc.fullscreenElement && !doc.mozFullScreenElement
                 && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
@@ -1401,7 +1407,7 @@ class NgxGalleryPreviewComponent {
             e.preventDefault();
         }
     }
-    mouseUpHandler(e) {
+    mouseUpHandler() {
         this.isMove = false;
     }
     mouseMoveHandler(e) {
@@ -1432,6 +1438,7 @@ class NgxGalleryPreviewComponent {
         return e.keyCode === 27 ? true : false;
     }
     openFullscreen() {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const element = document.documentElement;
         if (element.requestFullscreen) {
             element.requestFullscreen();
@@ -1447,6 +1454,7 @@ class NgxGalleryPreviewComponent {
         }
     }
     closeFullscreen() {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const doc = document;
         const fullscreenPolyfills = [
             {
@@ -1467,7 +1475,6 @@ class NgxGalleryPreviewComponent {
                 exitFullscreenFn: 'msExitFullscreen',
             }
         ];
-        /* eslint-disable @typescript-eslint/prefer-for-of */
         for (let index = 0; index < fullscreenPolyfills.length; index++) {
             const fullscreenPolyfill = fullscreenPolyfills[index];
             if (doc[fullscreenPolyfill.fullscreenElement] !== null && doc[fullscreenPolyfill.exitFullscreenFn]) {
@@ -1495,7 +1502,6 @@ class NgxGalleryPreviewComponent {
             if (this.autoPlay) {
                 this.startAutoPlay();
             }
-            ;
         });
         this.timer$.subscribe(() => { this._show(); });
     }
@@ -1540,13 +1546,13 @@ class NgxGalleryPreviewComponent {
         }
         return this.ordImages;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxGalleryPreviewComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.ElementRef }, { token: NgxGalleryHelperService }, { token: i0.Renderer2 }, { token: LogService }, { token: CcMediaService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.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    <ng-container *ngFor=\"let action of actions\">\n      <ngx-gallery-action\n        *ngIf=\"!action.disabled\"\n        [icon]=\"action.icon\"\n        [disabled]=\"action.disabled\"\n        [titleText]=\"action.titleText\"\n        (onClick)=\"action.onClick($event, index)\">\n      </ngx-gallery-action>\n    </ng-container>\n\n    <a *ngIf=\"download && src\" [href]=\"src\" class=\"ngx-gallery-icon\" aria-hidden=\"true\" download>\n      <i class=\"ngx-gallery-icon-content {{ downloadIcon }}\"></i>\n    </a>\n    <ngx-gallery-action *ngIf=\"zoom\" [icon]=\"zoomOutIcon\" [disabled]=\"! isZoomableOut\" (onClick)=\"zoomOut()\"></ngx-gallery-action>\n    <ngx-gallery-action *ngIf=\"zoom\" [icon]=\"zoomInIcon\" [disabled]=\"! isZoomableIn\" (onClick)=\"zoomIn()\"></ngx-gallery-action>\n    <ngx-gallery-action *ngIf=\"rotate\" [icon]=\"rotateLeftIcon\" (onClick)=\"rotateLeft()\"></ngx-gallery-action>\n    <ngx-gallery-action *ngIf=\"rotate\" [icon]=\"rotateRightIcon\" (onClick)=\"rotateRight()\"></ngx-gallery-action>\n    <ngx-gallery-action *ngIf=\"fullscreen\" [icon]=\"'ngx-gallery-fullscreen ' + fullscreenIcon\" (onClick)=\"manageFullscreen()\"></ngx-gallery-action>\n    <ngx-gallery-action *ngIf=\"mtypes[index] === 'video' && isVideoLowerScreenResolution()\" [icon]=\"fullscreenIcon\" (onClick)=\"fitVideoToScreen = !fitVideoToScreen\"></ngx-gallery-action>\n    <ngx-gallery-action *ngIf=\"closeIcon\" [icon]=\"'ngx-gallery-close ' + closeIcon\" (onClick)=\"close()\"></ngx-gallery-action>\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<ng-container [ngSwitch]=\"mtypes[index]\">\n  <ng-container *ngSwitchCase=\"'video'\">\n    <ng-container *ngTemplateOutlet=\"videoAudio\"></ng-container>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"'audio'\">\n    <ng-container *ngTemplateOutlet=\"videoAudio\"></ng-container>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"'campus'\">\n    <iframe *ngIf=\"isOpen\" [src]=\"src\"></iframe>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"'pdf'\">\n    <iframe *ngIf=\"isOpen\" [src]=\"link\" style=\"position: absolute; top: 55px;\" (load)=\"onImageLoad()\"></iframe>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"'image'\">\n    <div\n      class=\"ngx-gallery-preview-wrapper\"\n      (click)=\"closeOnClick && close()\"\n      (mouseup)=\"mouseUpHandler($event)\" (mousemove)=\"mouseMoveHandler($event)\"\n      (touchend)=\"mouseUpHandler($event)\" (touchmove)=\"mouseMoveHandler($event)\"\n\n      (click)=\"$event.stopPropagation()\"\n      (mouseenter)=\"imageMouseEnter()\"\n      (mouseleave)=\"imageMouseLeave()\"\n      (mousedown)=\"mouseDownHandler($event)\"\n      (touchstart)=\"mouseDownHandler($event)\"\n    >\n\n      <img\n        #previewImage\n        *ngIf=\"src\"\n        class=\"ngx-gallery-preview-img ngx-gallery-center\"\n\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\n        (click)=\"$event.stopPropagation()\"\n        (load)=\"onImageLoad()\"\n      />\n\n      <cc-imagesvg\n        *ngIf=\"isSVGActive && hasAddOns\"\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      <ngx-gallery-bullets *ngIf=\"bullets\" [count]=\"images.length\" [active]=\"index\" (onChange)=\"showAtIndex($event)\">\n      </ngx-gallery-bullets>\n\n      <div class=\"ngx-gallery-preview-text\" *ngIf=\"showDescription && description\" [innerHTML]=\"description | safeHtml\" (click)=\"$event.stopPropagation()\">\n      </div>\n    </div>\n  </ng-container>\n  <ng-template #videoAudio>\n    <div\n      class=\"ngx-gallery-preview-wrapper\"\n      (click)=\"$event.stopPropagation()\">\n      <cc-video\n        *ngIf=\"isOpen\"\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    </div>\n  </ng-template>\n</ng-container>", 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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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: i2.SafeHtmlPipe, name: "safeHtml" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxGalleryPreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryPreviewComponent, decorators: [{
             type: Component,
-            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    <ng-container *ngFor=\"let action of actions\">\n      <ngx-gallery-action\n        *ngIf=\"!action.disabled\"\n        [icon]=\"action.icon\"\n        [disabled]=\"action.disabled\"\n        [titleText]=\"action.titleText\"\n        (onClick)=\"action.onClick($event, index)\">\n      </ngx-gallery-action>\n    </ng-container>\n\n    <a *ngIf=\"download && src\" [href]=\"src\" class=\"ngx-gallery-icon\" aria-hidden=\"true\" download>\n      <i class=\"ngx-gallery-icon-content {{ downloadIcon }}\"></i>\n    </a>\n    <ngx-gallery-action *ngIf=\"zoom\" [icon]=\"zoomOutIcon\" [disabled]=\"! isZoomableOut\" (onClick)=\"zoomOut()\"></ngx-gallery-action>\n    <ngx-gallery-action *ngIf=\"zoom\" [icon]=\"zoomInIcon\" [disabled]=\"! isZoomableIn\" (onClick)=\"zoomIn()\"></ngx-gallery-action>\n    <ngx-gallery-action *ngIf=\"rotate\" [icon]=\"rotateLeftIcon\" (onClick)=\"rotateLeft()\"></ngx-gallery-action>\n    <ngx-gallery-action *ngIf=\"rotate\" [icon]=\"rotateRightIcon\" (onClick)=\"rotateRight()\"></ngx-gallery-action>\n    <ngx-gallery-action *ngIf=\"fullscreen\" [icon]=\"'ngx-gallery-fullscreen ' + fullscreenIcon\" (onClick)=\"manageFullscreen()\"></ngx-gallery-action>\n    <ngx-gallery-action *ngIf=\"mtypes[index] === 'video' && isVideoLowerScreenResolution()\" [icon]=\"fullscreenIcon\" (onClick)=\"fitVideoToScreen = !fitVideoToScreen\"></ngx-gallery-action>\n    <ngx-gallery-action *ngIf=\"closeIcon\" [icon]=\"'ngx-gallery-close ' + closeIcon\" (onClick)=\"close()\"></ngx-gallery-action>\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<ng-container [ngSwitch]=\"mtypes[index]\">\n  <ng-container *ngSwitchCase=\"'video'\">\n    <ng-container *ngTemplateOutlet=\"videoAudio\"></ng-container>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"'audio'\">\n    <ng-container *ngTemplateOutlet=\"videoAudio\"></ng-container>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"'campus'\">\n    <iframe *ngIf=\"isOpen\" [src]=\"src\"></iframe>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"'pdf'\">\n    <iframe *ngIf=\"isOpen\" [src]=\"link\" style=\"position: absolute; top: 55px;\" (load)=\"onImageLoad()\"></iframe>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"'image'\">\n    <div\n      class=\"ngx-gallery-preview-wrapper\"\n      (click)=\"closeOnClick && close()\"\n      (mouseup)=\"mouseUpHandler($event)\" (mousemove)=\"mouseMoveHandler($event)\"\n      (touchend)=\"mouseUpHandler($event)\" (touchmove)=\"mouseMoveHandler($event)\"\n\n      (click)=\"$event.stopPropagation()\"\n      (mouseenter)=\"imageMouseEnter()\"\n      (mouseleave)=\"imageMouseLeave()\"\n      (mousedown)=\"mouseDownHandler($event)\"\n      (touchstart)=\"mouseDownHandler($event)\"\n    >\n\n      <img\n        #previewImage\n        *ngIf=\"src\"\n        class=\"ngx-gallery-preview-img ngx-gallery-center\"\n\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\n        (click)=\"$event.stopPropagation()\"\n        (load)=\"onImageLoad()\"\n      />\n\n      <cc-imagesvg\n        *ngIf=\"isSVGActive && hasAddOns\"\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      <ngx-gallery-bullets *ngIf=\"bullets\" [count]=\"images.length\" [active]=\"index\" (onChange)=\"showAtIndex($event)\">\n      </ngx-gallery-bullets>\n\n      <div class=\"ngx-gallery-preview-text\" *ngIf=\"showDescription && description\" [innerHTML]=\"description | safeHtml\" (click)=\"$event.stopPropagation()\">\n      </div>\n    </div>\n  </ng-container>\n  <ng-template #videoAudio>\n    <div\n      class=\"ngx-gallery-preview-wrapper\"\n      (click)=\"$event.stopPropagation()\">\n      <cc-video\n        *ngIf=\"isOpen\"\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    </div>\n  </ng-template>\n</ng-container>", 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"] }]
-        }], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: i0.ElementRef }, { type: NgxGalleryHelperService }, { type: i0.Renderer2 }, { type: LogService }, { type: CcMediaService }], propDecorators: { prevIndex: [{
+            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"] }]
+        }], propDecorators: { prevIndex: [{
                 type: Input
             }], images: [{
                 type: Input
@@ -1655,11 +1661,11 @@ class NgxGalleryOrder {
 }
 
 class NgxGalleryThumbnailsComponent {
-    constructor(sanitization, elementRef, helperService, logService) {
-        this.sanitization = sanitization;
-        this.elementRef = elementRef;
-        this.helperService = helperService;
-        this.logService = logService;
+    constructor() {
+        this.sanitization = inject(DomSanitizer);
+        this.elementRef = inject(ElementRef);
+        this.helperService = inject(NgxGalleryHelperService);
+        this.logService = inject(LogService);
         this.minStopIndex = 0;
         this.onActiveChange = new EventEmitter();
         this.index = 0;
@@ -1870,13 +1876,13 @@ class NgxGalleryThumbnailsComponent {
     getSafeStyle(value) {
         return this.sanitization.bypassSecurityTrustStyle(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxGalleryThumbnailsComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.ElementRef }, { token: NgxGalleryHelperService }, { token: LogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.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    <a *ngFor=\"let image of getImages(); let i = index;\"\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        <ngx-gallery-action *ngFor=\"let action of actions\"\n          [icon]=\"action.icon\"\n          [disabled]=\"action.disabled\"\n          [titleText]=\"action.titleText\"\n          (onClick)=\"action.onClick($event, i)\">\n        </ngx-gallery-action>\n      </div>\n      <div class=\"ngx-gallery-remaining-count-overlay\"\n        *ngIf=\"remainingCount && remainingCountValue && (i === (rows * columns) - 1)\">\n        <span class=\"ngx-gallery-remaining-count\">+{{remainingCountValue}}</span>\n      </div>\n    </a>\n  </div>\n</div>\n<ngx-gallery-arrows *ngIf=\"canShowArrows()\"\n  (onPrevClick)=\"moveLeft()\"\n  (onNextClick)=\"moveRight()\"\n  [prevDisabled]=\"!canMoveLeft()\"\n  [nextDisabled]=\"!canMoveRight()\"\n  [arrowPrevIcon]=\"arrowPrevIcon\"\n  [arrowNextIcon]=\"arrowNextIcon\">\n</ngx-gallery-arrows>\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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryThumbnailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxGalleryThumbnailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryThumbnailsComponent, decorators: [{
             type: Component,
-            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    <a *ngFor=\"let image of getImages(); let i = index;\"\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        <ngx-gallery-action *ngFor=\"let action of actions\"\n          [icon]=\"action.icon\"\n          [disabled]=\"action.disabled\"\n          [titleText]=\"action.titleText\"\n          (onClick)=\"action.onClick($event, i)\">\n        </ngx-gallery-action>\n      </div>\n      <div class=\"ngx-gallery-remaining-count-overlay\"\n        *ngIf=\"remainingCount && remainingCountValue && (i === (rows * columns) - 1)\">\n        <span class=\"ngx-gallery-remaining-count\">+{{remainingCountValue}}</span>\n      </div>\n    </a>\n  </div>\n</div>\n<ngx-gallery-arrows *ngIf=\"canShowArrows()\"\n  (onPrevClick)=\"moveLeft()\"\n  (onNextClick)=\"moveRight()\"\n  [prevDisabled]=\"!canMoveLeft()\"\n  [nextDisabled]=\"!canMoveRight()\"\n  [arrowPrevIcon]=\"arrowPrevIcon\"\n  [arrowNextIcon]=\"arrowNextIcon\">\n</ngx-gallery-arrows>\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"] }]
-        }], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: i0.ElementRef }, { type: NgxGalleryHelperService }, { type: LogService }], propDecorators: { name: [{
+            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"] }]
+        }], propDecorators: { name: [{
                 type: Input
             }], images: [{
                 type: Input
@@ -2181,15 +2187,16 @@ class NgxGalleryOptions {
 }
 
 class PreviewLoaderComponent {
-    constructor(componentFactoryResolver, appRef, injector) {
-        this.componentFactoryResolver = componentFactoryResolver;
-        this.appRef = appRef;
-        this.injector = injector;
+    constructor() {
+        this.componentFactoryResolver = inject(ComponentFactoryResolver);
+        this.appRef = inject(ApplicationRef);
+        this.injector = inject(Injector);
         this.previewEnabled = false;
         this.openIndex = -1;
         this.onOpen = new EventEmitter();
         this.onClose = new EventEmitter();
         this.onActiveChange = new EventEmitter();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.domRefs = [];
     }
     ngOnChanges(changes) {
@@ -2253,7 +2260,7 @@ class PreviewLoaderComponent {
             this.componentRef.instance.onOpen.subscribe((event) => {
                 this.onOpen.emit(event);
             });
-            this.componentRef.instance.onClose.subscribe((event) => {
+            this.componentRef.instance.onClose.subscribe(() => {
                 this.appRef.detachView(this.componentRef.hostView);
                 this.componentRef.destroy();
                 this.onClose.emit();
@@ -2273,6 +2280,7 @@ class PreviewLoaderComponent {
         const factory = this.componentFactoryResolver.resolveComponentFactory(NgxGalleryPreviewComponent);
         this.componentRef = factory.create(this.injector);
         this.appRef.attachView(this.componentRef.hostView);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const domElem = this.componentRef.hostView.rootNodes[0];
         this.domRefs.push(domElem);
         const cdkOverlayContainers = document.getElementsByClassName('cdk-overlay-container');
@@ -2291,13 +2299,13 @@ class PreviewLoaderComponent {
         });
         this.domRefs = [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: PreviewLoaderComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.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"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PreviewLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: PreviewLoaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PreviewLoaderComponent, decorators: [{
             type: Component,
             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"] }]
-        }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }, { type: i0.Injector }], propDecorators: { onlyPreview: [{
+        }], propDecorators: { onlyPreview: [{
                 type: Input
             }], previewEnabled: [{
                 type: Input
@@ -2418,10 +2426,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
             }] } });
 
 class NgxGalleryComponent {
-    constructor(myElement, logService, ccMediaService) {
-        this.myElement = myElement;
-        this.logService = logService;
-        this.ccMediaService = ccMediaService;
+    constructor() {
+        this.myElement = inject(ElementRef);
+        this.logService = inject(LogService);
+        this.ccMediaService = inject(CcMediaService);
         this.imagesReady = new EventEmitter();
         this.onChange = new EventEmitter();
         this.previewOpen = new EventEmitter();
@@ -2484,7 +2492,7 @@ class NgxGalleryComponent {
     }
     // has to be modified due to external images (magnify) in iframe
     // @HostListener('window:resize', [ '$event' ]) onResize( event ) {
-    onResize(event) {
+    onResize() {
         this.setBreakpoint();
         if (this.prevBreakpoint !== this.breakpoint) {
             this.setOptions();
@@ -2899,13 +2907,13 @@ class NgxGalleryComponent {
     isExternalVideo(mtype) {
         return this.ccMediaService.isExternalVideo(mtype);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxGalleryComponent, deps: [{ token: i0.ElementRef }, { token: LogService }, { token: CcMediaService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.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  <ng-container *ngIf=\"ccMediaService.isExternalVideo(types[selectedIndex]); else onResizeTmpl\">\n  </ng-container>\n\n  <ng-template #onResizeTmpl>\n    <div (window:resize)=\"onResize($event)\"></div>\n  </ng-template>\n\n  <ngx-gallery-image *ngIf=\"currentOptions?.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  <ngx-gallery-thumbnails\n    *ngIf=\"currentOptions?.thumbnails\" [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  <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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxGalleryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryComponent, decorators: [{
             type: Component,
-            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  <ng-container *ngIf=\"ccMediaService.isExternalVideo(types[selectedIndex]); else onResizeTmpl\">\n  </ng-container>\n\n  <ng-template #onResizeTmpl>\n    <div (window:resize)=\"onResize($event)\"></div>\n  </ng-template>\n\n  <ngx-gallery-image *ngIf=\"currentOptions?.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  <ngx-gallery-thumbnails\n    *ngIf=\"currentOptions?.thumbnails\" [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  <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"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: LogService }, { type: CcMediaService }], propDecorators: { options: [{
+            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"] }]
+        }], propDecorators: { options: [{
                 type: Input
             }], images: [{
                 type: Input
@@ -2953,16 +2961,16 @@ class CustomHammerConfig extends HammerGestureConfig {
             rotate: { enable: false }
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: CustomHammerConfig, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: CustomHammerConfig }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CustomHammerConfig, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CustomHammerConfig }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: CustomHammerConfig, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CustomHammerConfig, decorators: [{
             type: Injectable
         }] });
 
 class NgxGalleryModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxGalleryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: NgxGalleryModule, declarations: [NgxGalleryActionComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryModule, declarations: [NgxGalleryActionComponent,
             NgxGalleryArrowsComponent,
             NgxGalleryBulletsComponent,
             NgxGalleryImageComponent,
@@ -2978,11 +2986,11 @@ class NgxGalleryModule {
             NgxGalleryVideoComponent,
             UtilsScriptComponent,
             PreviewLoaderComponent], imports: [CommonModule, CcSupportModule], exports: [NgxGalleryComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxGalleryModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryModule, providers: [
             { provide: HAMMER_GESTURE_CONFIG, useClass: CustomHammerConfig }
         ], imports: [CommonModule, CcSupportModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxGalleryModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxGalleryModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [