@casus-campus/ngx-gallery 0.7.3 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/image/ngx-gallery-image-svg.component.mjs +6 -6
- package/esm2020/lib/ngx-gallery-action/ngx-gallery-action.component.mjs +3 -3
- package/esm2020/lib/ngx-gallery-arrows/ngx-gallery-arrows.component.mjs +5 -5
- package/esm2020/lib/ngx-gallery-bullets/ngx-gallery-bullets.component.mjs +4 -4
- package/esm2020/lib/ngx-gallery-helper.service.mjs +3 -3
- package/esm2020/lib/ngx-gallery-image/ngx-gallery-image.component.mjs +8 -8
- package/esm2020/lib/ngx-gallery-preview/ngx-gallery-preview.component.mjs +8 -8
- package/esm2020/lib/ngx-gallery-thumbnails/ngx-gallery-thumbnails.component.mjs +6 -6
- package/esm2020/lib/ngx-gallery-video/ngx-gallery-video.component.mjs +5 -5
- package/esm2020/lib/ngx-gallery.component.mjs +7 -7
- package/esm2020/lib/ngx-gallery.module.mjs +6 -8
- package/esm2020/lib/svg/ngx-gallery-svg-arrow.component.mjs +3 -3
- package/esm2020/lib/svg/ngx-gallery-svg-icon.component.mjs +3 -3
- package/esm2020/lib/svg/ngx-gallery-svg-polygon.component.mjs +3 -3
- package/esm2020/lib/svg/ngx-gallery-svg-text.component.mjs +4 -4
- package/esm2020/lib/utils/cc-media.service.mjs +3 -3
- package/esm2020/lib/utils/custom-hammer-config.service.mjs +3 -3
- package/esm2020/lib/utils/logging.service.mjs +3 -3
- package/esm2020/lib/utils/ngx-preview-loader.component.mjs +3 -3
- package/esm2020/lib/utils/utils-script.component.mjs +3 -3
- package/fesm2015/casus-campus-ngx-gallery.mjs +82 -84
- package/fesm2015/casus-campus-ngx-gallery.mjs.map +1 -1
- package/fesm2020/casus-campus-ngx-gallery.mjs +82 -84
- package/fesm2020/casus-campus-ngx-gallery.mjs.map +1 -1
- package/{casus-campus-ngx-gallery.d.ts → index.d.ts} +0 -0
- package/lib/image/ngx-gallery-image-svg.component.d.ts +1 -1
- package/lib/ngx-gallery-action/ngx-gallery-action.component.d.ts +1 -1
- package/lib/ngx-gallery-arrows/ngx-gallery-arrows.component.d.ts +1 -1
- package/lib/ngx-gallery-bullets/ngx-gallery-bullets.component.d.ts +1 -1
- package/lib/ngx-gallery-image/ngx-gallery-image.component.d.ts +1 -1
- package/lib/ngx-gallery-preview/ngx-gallery-preview.component.d.ts +1 -1
- package/lib/ngx-gallery-thumbnails/ngx-gallery-thumbnails.component.d.ts +1 -1
- package/lib/ngx-gallery-video/ngx-gallery-video.component.d.ts +1 -1
- package/lib/ngx-gallery.component.d.ts +1 -1
- package/lib/svg/ngx-gallery-svg-arrow.component.d.ts +1 -1
- package/lib/svg/ngx-gallery-svg-icon.component.d.ts +1 -1
- package/lib/svg/ngx-gallery-svg-polygon.component.d.ts +1 -1
- package/lib/svg/ngx-gallery-svg-text.component.d.ts +1 -1
- package/lib/utils/ngx-preview-loader.component.d.ts +1 -1
- package/lib/utils/utils-script.component.d.ts +1 -1
- package/package.json +9 -9
|
@@ -9,11 +9,11 @@ import { LogService } from '../utils/logging.service';
|
|
|
9
9
|
import * as i0 from "@angular/core";
|
|
10
10
|
import * as i1 from "../utils/logging.service";
|
|
11
11
|
import * as i2 from "../utils/cc-media.service";
|
|
12
|
-
import * as i3 from "
|
|
12
|
+
import * as i3 from "@angular/common";
|
|
13
13
|
import * as i4 from "../svg/ngx-gallery-svg-polygon.component";
|
|
14
14
|
import * as i5 from "../svg/ngx-gallery-svg-icon.component";
|
|
15
|
-
import * as i6 from "../svg/ngx-gallery-svg-
|
|
16
|
-
import * as i7 from "
|
|
15
|
+
import * as i6 from "../svg/ngx-gallery-svg-arrow.component";
|
|
16
|
+
import * as i7 from "../svg/ngx-gallery-svg-text.component";
|
|
17
17
|
export class NgxGalleryImageSvgComponent {
|
|
18
18
|
constructor(logService, ccMediaService, cdRef) {
|
|
19
19
|
this.logService = logService;
|
|
@@ -109,9 +109,9 @@ export class NgxGalleryImageSvgComponent {
|
|
|
109
109
|
return Math.max(widthScaleFactor, heightScaleFactor);
|
|
110
110
|
}
|
|
111
111
|
}
|
|
112
|
-
NgxGalleryImageSvgComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
113
|
-
NgxGalleryImageSvgComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
114
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
112
|
+
NgxGalleryImageSvgComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: NgxGalleryImageSvgComponent, deps: [{ token: i1.LogService }, { token: i2.CcMediaService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
113
|
+
NgxGalleryImageSvgComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.4", type: NgxGalleryImageSvgComponent, 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;left:0;right:0;bottom:0;margin:auto;top:0}.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: i4.NgxGallerySvgPolygonComponent, selector: "[svg-polygon]", inputs: ["svgPolygons"] }, { kind: "component", type: i5.NgxGallerySvgIconComponent, selector: "[svg-icon]", inputs: ["svgIcons", "scaleFactor"] }, { kind: "component", type: i6.NgxGallerySvgArrowComponent, selector: "[svg-arrow]", inputs: ["svgArrows"] }, { kind: "component", type: i7.NgxGallerySvgTextComponent, selector: "[svg-text]", inputs: ["svgTexts", "width", "height"] }] });
|
|
114
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: NgxGalleryImageSvgComponent, decorators: [{
|
|
115
115
|
type: Component,
|
|
116
116
|
args: [{ selector: 'cc-imagesvg', 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;left:0;right:0;bottom:0;margin:auto;top:0}.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"] }]
|
|
117
117
|
}], ctorParameters: function () { return [{ type: i1.LogService }, { type: i2.CcMediaService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { width: [{
|
|
@@ -14,15 +14,15 @@ export class NgxGalleryActionComponent {
|
|
|
14
14
|
event.preventDefault();
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
|
-
NgxGalleryActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
18
|
-
NgxGalleryActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
17
|
+
NgxGalleryActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: NgxGalleryActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
18
|
+
NgxGalleryActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.4", type: NgxGalleryActionComponent, selector: "ngx-gallery-action", inputs: { icon: "icon", disabled: "disabled", titleText: "titleText" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
|
|
19
19
|
<div class="ngx-gallery-icon" [class.ngx-gallery-icon-disabled]="disabled"
|
|
20
20
|
aria-hidden="true"
|
|
21
21
|
title="{{ titleText }}"
|
|
22
22
|
(click)="handleClick($event)">
|
|
23
23
|
<i class="ngx-gallery-icon-content {{ icon }}"></i>
|
|
24
24
|
</div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
25
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
25
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: NgxGalleryActionComponent, decorators: [{
|
|
26
26
|
type: Component,
|
|
27
27
|
args: [{
|
|
28
28
|
selector: 'ngx-gallery-action',
|
|
@@ -12,8 +12,8 @@ export class NgxGalleryArrowsComponent {
|
|
|
12
12
|
this.onNextClick.emit();
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
|
-
NgxGalleryArrowsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
16
|
-
NgxGalleryArrowsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
15
|
+
NgxGalleryArrowsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: NgxGalleryArrowsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
16
|
+
NgxGalleryArrowsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.4", type: NgxGalleryArrowsComponent, selector: "ngx-gallery-arrows", inputs: { prevDisabled: "prevDisabled", nextDisabled: "nextDisabled", arrowPrevIcon: "arrowPrevIcon", arrowNextIcon: "arrowNextIcon" }, outputs: { onPrevClick: "onPrevClick", onNextClick: "onNextClick" }, ngImport: i0, template: `
|
|
17
17
|
<div class="ngx-gallery-arrow-wrapper ngx-gallery-arrow-left">
|
|
18
18
|
<div class="ngx-gallery-icon ngx-gallery-arrow"
|
|
19
19
|
aria-hidden="true"
|
|
@@ -30,8 +30,8 @@ NgxGalleryArrowsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
|
|
|
30
30
|
<i class="ngx-gallery-icon-content {{arrowNextIcon}}"></i>
|
|
31
31
|
</div>
|
|
32
32
|
</div>
|
|
33
|
-
`, 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:0px}.ngx-gallery-arrow-right{right:0px}.ngx-gallery-arrow{top:50%;transform:translateY(-50%);background
|
|
34
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
33
|
+
`, 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:0px}.ngx-gallery-arrow-right{right:0px}.ngx-gallery-arrow{top:50%;transform:translateY(-50%);background:rgba(255,255,255,.5490196078);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"] });
|
|
34
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: NgxGalleryArrowsComponent, decorators: [{
|
|
35
35
|
type: Component,
|
|
36
36
|
args: [{ selector: 'ngx-gallery-arrows', template: `
|
|
37
37
|
<div class="ngx-gallery-arrow-wrapper ngx-gallery-arrow-left">
|
|
@@ -50,7 +50,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
50
50
|
<i class="ngx-gallery-icon-content {{arrowNextIcon}}"></i>
|
|
51
51
|
</div>
|
|
52
52
|
</div>
|
|
53
|
-
`, styles: [".ngx-gallery-arrow-wrapper{position:absolute;height:100%;width:1px;display:table;z-index:2000;table-layout:fixed}.ngx-gallery-arrow-left{left:0px}.ngx-gallery-arrow-right{right:0px}.ngx-gallery-arrow{top:50%;transform:translateY(-50%);background
|
|
53
|
+
`, styles: [".ngx-gallery-arrow-wrapper{position:absolute;height:100%;width:1px;display:table;z-index:2000;table-layout:fixed}.ngx-gallery-arrow-left{left:0px}.ngx-gallery-arrow-right{right:0px}.ngx-gallery-arrow{top:50%;transform:translateY(-50%);background:rgba(255,255,255,.5490196078);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"] }]
|
|
54
54
|
}], propDecorators: { prevDisabled: [{
|
|
55
55
|
type: Input
|
|
56
56
|
}], nextDisabled: [{
|
|
@@ -13,14 +13,14 @@ export class NgxGalleryBulletsComponent {
|
|
|
13
13
|
this.onChange.emit(index);
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
|
-
NgxGalleryBulletsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
17
|
-
NgxGalleryBulletsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
16
|
+
NgxGalleryBulletsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: NgxGalleryBulletsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
17
|
+
NgxGalleryBulletsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.4", type: NgxGalleryBulletsComponent, selector: "ngx-gallery-bullets", inputs: { count: "count", active: "active" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
|
|
18
18
|
<div class="ngx-gallery-bullet"
|
|
19
19
|
*ngFor="let bullet of getBullets(); let i = index;" (click)="handleChange($event, i)"
|
|
20
20
|
[ngClass]="{ 'ngx-gallery-active': i === active }">
|
|
21
21
|
</div>
|
|
22
|
-
`, isInline: true, styles: [":host{position:absolute;z-index:2000;display:inline-flex;left:50%;transform:translate(-50%);bottom:0px;padding:10px}.ngx-gallery-bullet{width:10px;height:10px;border-radius:50%;cursor:pointer;background:white}.ngx-gallery-bullet:not(:first-child){margin-left:5px}.ngx-gallery-bullet:hover,.ngx-gallery-bullet.ngx-gallery-active{background:black}\n"],
|
|
23
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
22
|
+
`, isInline: true, styles: [":host{position:absolute;z-index:2000;display:inline-flex;left:50%;transform:translate(-50%);bottom:0px;padding:10px}.ngx-gallery-bullet{width:10px;height:10px;border-radius:50%;cursor:pointer;background:white}.ngx-gallery-bullet:not(:first-child){margin-left:5px}.ngx-gallery-bullet:hover,.ngx-gallery-bullet.ngx-gallery-active{background:black}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
23
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: NgxGalleryBulletsComponent, decorators: [{
|
|
24
24
|
type: Component,
|
|
25
25
|
args: [{ selector: 'ngx-gallery-bullets', template: `
|
|
26
26
|
<div class="ngx-gallery-bullet"
|
|
@@ -42,9 +42,9 @@ export class NgxGalleryHelperService {
|
|
|
42
42
|
this.swipeHandlers.delete(id);
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
|
-
NgxGalleryHelperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
46
|
-
NgxGalleryHelperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
47
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
45
|
+
NgxGalleryHelperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: NgxGalleryHelperService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
46
|
+
NgxGalleryHelperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: NgxGalleryHelperService, providedIn: 'root' });
|
|
47
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: NgxGalleryHelperService, decorators: [{
|
|
48
48
|
type: Injectable,
|
|
49
49
|
args: [{
|
|
50
50
|
providedIn: 'root'
|
|
@@ -7,12 +7,12 @@ import * as i0 from "@angular/core";
|
|
|
7
7
|
import * as i1 from "@angular/platform-browser";
|
|
8
8
|
import * as i2 from "../ngx-gallery-helper.service";
|
|
9
9
|
import * as i3 from "../utils/logging.service";
|
|
10
|
-
import * as i4 from "
|
|
11
|
-
import * as i5 from "../
|
|
12
|
-
import * as i6 from "../ngx-gallery-
|
|
10
|
+
import * as i4 from "@angular/common";
|
|
11
|
+
import * as i5 from "../ngx-gallery-action/ngx-gallery-action.component";
|
|
12
|
+
import * as i6 from "../ngx-gallery-arrows/ngx-gallery-arrows.component";
|
|
13
13
|
import * as i7 from "../ngx-gallery-bullets/ngx-gallery-bullets.component";
|
|
14
|
-
import * as i8 from "../ngx-gallery-
|
|
15
|
-
import * as i9 from "
|
|
14
|
+
import * as i8 from "../image/ngx-gallery-image-svg.component";
|
|
15
|
+
import * as i9 from "../ngx-gallery-video/ngx-gallery-video.component";
|
|
16
16
|
import * as i10 from "@casus-campus/cc-support";
|
|
17
17
|
export class NgxGalleryImageComponent {
|
|
18
18
|
constructor(sanitization, elementRef, helperService, logService) {
|
|
@@ -180,9 +180,9 @@ export class NgxGalleryImageComponent {
|
|
|
180
180
|
return (this.mtypes[index] === 'pdf' ? '50px' : '100%');
|
|
181
181
|
}
|
|
182
182
|
}
|
|
183
|
-
NgxGalleryImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
184
|
-
NgxGalleryImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
185
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
183
|
+
NgxGalleryImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: NgxGalleryImageComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.ElementRef }, { token: i2.NgxGalleryHelperService }, { token: i3.LogService }], target: i0.ɵɵFactoryTarget.Component });
|
|
184
|
+
NgxGalleryImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.4", type: NgxGalleryImageComponent, 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", pdfIcon: "pdfIcon" }, 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>\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:0px;top:0px;overflow:hidden}.ngx-gallery-image{background-position:center;background-repeat:no-repeat;height:100%;width:100%;position:absolute;top:0px;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:0px;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:0px}.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:0px;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:0px;opacity:0}.ngx-gallery-animation-zoom .ngx-gallery-image.ngx-gallery-active{transform:scale(1);opacity:1}.ngx-gallery-image-text{width:100%;background:rgba(0,0,0,.7);padding:10px;text-align:center;color:#fff;font-size:16px;position:absolute;bottom:0px;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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.NgxGalleryActionComponent, selector: "ngx-gallery-action", inputs: ["icon", "disabled", "titleText"], outputs: ["onClick"] }, { kind: "component", type: i6.NgxGalleryArrowsComponent, selector: "ngx-gallery-arrows", inputs: ["prevDisabled", "nextDisabled", "arrowPrevIcon", "arrowNextIcon"], outputs: ["onPrevClick", "onNextClick"] }, { kind: "component", type: i7.NgxGalleryBulletsComponent, selector: "ngx-gallery-bullets", inputs: ["count", "active"], outputs: ["onChange"] }, { kind: "component", type: i8.NgxGalleryImageSvgComponent, selector: "cc-imagesvg", inputs: ["width", "height", "viewBox", "posLeft", "posTop", "zoomValue", "animation", "addOns", "classGrab", "styleTransform", "preview"] }, { kind: "component", type: i9.NgxGalleryVideoComponent, selector: "cc-video", inputs: ["image", "selectedIndex", "showDescription", "description", "mediaInfo", "fitVideoToScreen"] }, { kind: "pipe", type: i10.SafeHtmlPipe, name: "safeHtml" }] });
|
|
185
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: NgxGalleryImageComponent, decorators: [{
|
|
186
186
|
type: Component,
|
|
187
187
|
args: [{ selector: 'ngx-gallery-image', 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>\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:0px;top:0px;overflow:hidden}.ngx-gallery-image{background-position:center;background-repeat:no-repeat;height:100%;width:100%;position:absolute;top:0px;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:0px;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:0px}.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:0px;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:0px;opacity:0}.ngx-gallery-animation-zoom .ngx-gallery-image.ngx-gallery-active{transform:scale(1);opacity:1}.ngx-gallery-image-text{width:100%;background:rgba(0,0,0,.7);padding:10px;text-align:center;color:#fff;font-size:16px;position:absolute;bottom:0px;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"] }]
|
|
188
188
|
}], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: i0.ElementRef }, { type: i2.NgxGalleryHelperService }, { type: i3.LogService }]; }, propDecorators: { name: [{
|
|
@@ -9,12 +9,12 @@ import * as i1 from "@angular/platform-browser";
|
|
|
9
9
|
import * as i2 from "../ngx-gallery-helper.service";
|
|
10
10
|
import * as i3 from "../utils/logging.service";
|
|
11
11
|
import * as i4 from "../utils/cc-media.service";
|
|
12
|
-
import * as i5 from "
|
|
12
|
+
import * as i5 from "@angular/common";
|
|
13
13
|
import * as i6 from "../ngx-gallery-action/ngx-gallery-action.component";
|
|
14
|
-
import * as i7 from "../
|
|
14
|
+
import * as i7 from "../ngx-gallery-arrows/ngx-gallery-arrows.component";
|
|
15
15
|
import * as i8 from "../ngx-gallery-bullets/ngx-gallery-bullets.component";
|
|
16
|
-
import * as i9 from "../ngx-gallery-
|
|
17
|
-
import * as i10 from "
|
|
16
|
+
import * as i9 from "../image/ngx-gallery-image-svg.component";
|
|
17
|
+
import * as i10 from "../ngx-gallery-video/ngx-gallery-video.component";
|
|
18
18
|
import * as i11 from "@casus-campus/cc-support";
|
|
19
19
|
export class NgxGalleryPreviewComponent {
|
|
20
20
|
constructor(sanitization, elementRef, helperService, renderer, logService, ccMediaService) {
|
|
@@ -438,11 +438,11 @@ export class NgxGalleryPreviewComponent {
|
|
|
438
438
|
return this.ordImages;
|
|
439
439
|
}
|
|
440
440
|
}
|
|
441
|
-
NgxGalleryPreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
442
|
-
NgxGalleryPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
443
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
441
|
+
NgxGalleryPreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: NgxGalleryPreviewComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.ElementRef }, { token: i2.NgxGalleryHelperService }, { token: i0.Renderer2 }, { token: i3.LogService }, { token: i4.CcMediaService }], target: i0.ɵɵFactoryTarget.Component });
|
|
442
|
+
NgxGalleryPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.4", type: NgxGalleryPreviewComponent, 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 [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 *ngIf=\"mtypes[index] === 'video' || mtypes[index] === 'audio'; then prevVideo; else other\"></ng-container>\n\n<ng-template #other>\n <ng-container *ngIf=\"mtypes[index] === 'campus'; then campus; else img\"></ng-container>\n</ng-template>\n\n<ng-template #campus>\n <iframe *ngIf=\"isOpen\" [src]=\"src\"></iframe>\n</ng-template>\n\n<ng-template #img>\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 <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-template>\n\n<ng-template #prevVideo>\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>", styles: [":host(.ngx-gallery-active){pointer-events:auto;width:100%;height:100%;position:fixed;left:0;top:0;background:white;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:rgba(255,255,255,.5490196078)}: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;left:0;right:0;bottom:0;margin:auto;top:0}.ngx-gallery-preview-text{position:absolute;bottom:0;width:100%;background:rgba(0,0,0,.7);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: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.NgxGalleryActionComponent, selector: "ngx-gallery-action", inputs: ["icon", "disabled", "titleText"], outputs: ["onClick"] }, { kind: "component", type: i7.NgxGalleryArrowsComponent, selector: "ngx-gallery-arrows", inputs: ["prevDisabled", "nextDisabled", "arrowPrevIcon", "arrowNextIcon"], outputs: ["onPrevClick", "onNextClick"] }, { kind: "component", type: i8.NgxGalleryBulletsComponent, selector: "ngx-gallery-bullets", inputs: ["count", "active"], outputs: ["onChange"] }, { kind: "component", type: i9.NgxGalleryImageSvgComponent, selector: "cc-imagesvg", inputs: ["width", "height", "viewBox", "posLeft", "posTop", "zoomValue", "animation", "addOns", "classGrab", "styleTransform", "preview"] }, { kind: "component", type: i10.NgxGalleryVideoComponent, selector: "cc-video", inputs: ["image", "selectedIndex", "showDescription", "description", "mediaInfo", "fitVideoToScreen"] }, { kind: "pipe", type: i11.SafeHtmlPipe, name: "safeHtml" }] });
|
|
443
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: NgxGalleryPreviewComponent, decorators: [{
|
|
444
444
|
type: Component,
|
|
445
|
-
args: [{ selector: 'ngx-gallery-preview', 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 [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 *ngIf=\"mtypes[index] === 'video' || mtypes[index] === 'audio'; then prevVideo; else other\"></ng-container>\n\n<ng-template #other>\n <ng-container *ngIf=\"mtypes[index] === 'campus'; then campus; else img\"></ng-container>\n</ng-template>\n\n<ng-template #campus>\n <iframe *ngIf=\"isOpen\" [src]=\"src\"></iframe>\n</ng-template>\n\n<ng-template #img>\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 <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-template>\n\n<ng-template #prevVideo>\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>", styles: [":host(.ngx-gallery-active){pointer-events:auto;width:100%;height:100%;position:fixed;left:0;top:0;background:white;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
|
|
445
|
+
args: [{ selector: 'ngx-gallery-preview', 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 [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 *ngIf=\"mtypes[index] === 'video' || mtypes[index] === 'audio'; then prevVideo; else other\"></ng-container>\n\n<ng-template #other>\n <ng-container *ngIf=\"mtypes[index] === 'campus'; then campus; else img\"></ng-container>\n</ng-template>\n\n<ng-template #campus>\n <iframe *ngIf=\"isOpen\" [src]=\"src\"></iframe>\n</ng-template>\n\n<ng-template #img>\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 <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-template>\n\n<ng-template #prevVideo>\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>", styles: [":host(.ngx-gallery-active){pointer-events:auto;width:100%;height:100%;position:fixed;left:0;top:0;background:white;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:rgba(255,255,255,.5490196078)}: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;left:0;right:0;bottom:0;margin:auto;top:0}.ngx-gallery-preview-text{position:absolute;bottom:0;width:100%;background:rgba(0,0,0,.7);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"] }]
|
|
446
446
|
}], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: i0.ElementRef }, { type: i2.NgxGalleryHelperService }, { type: i0.Renderer2 }, { type: i3.LogService }, { type: i4.CcMediaService }]; }, propDecorators: { prevIndex: [{
|
|
447
447
|
type: Input
|
|
448
448
|
}], images: [{
|
|
@@ -7,9 +7,9 @@ import * as i0 from "@angular/core";
|
|
|
7
7
|
import * as i1 from "@angular/platform-browser";
|
|
8
8
|
import * as i2 from "../ngx-gallery-helper.service";
|
|
9
9
|
import * as i3 from "../utils/logging.service";
|
|
10
|
-
import * as i4 from "
|
|
11
|
-
import * as i5 from "../ngx-gallery-
|
|
12
|
-
import * as i6 from "
|
|
10
|
+
import * as i4 from "@angular/common";
|
|
11
|
+
import * as i5 from "../ngx-gallery-action/ngx-gallery-action.component";
|
|
12
|
+
import * as i6 from "../ngx-gallery-arrows/ngx-gallery-arrows.component";
|
|
13
13
|
export class NgxGalleryThumbnailsComponent {
|
|
14
14
|
constructor(sanitization, elementRef, helperService, logService) {
|
|
15
15
|
this.sanitization = sanitization;
|
|
@@ -229,9 +229,9 @@ export class NgxGalleryThumbnailsComponent {
|
|
|
229
229
|
return this.sanitization.bypassSecurityTrustStyle(value);
|
|
230
230
|
}
|
|
231
231
|
}
|
|
232
|
-
NgxGalleryThumbnailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
233
|
-
NgxGalleryThumbnailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
234
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
232
|
+
NgxGalleryThumbnailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: NgxGalleryThumbnailsComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.ElementRef }, { token: i2.NgxGalleryHelperService }, { token: i3.LogService }], target: i0.ɵɵFactoryTarget.Component });
|
|
233
|
+
NgxGalleryThumbnailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.4", type: NgxGalleryThumbnailsComponent, 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:0px;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:0px;top:0px;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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.NgxGalleryActionComponent, selector: "ngx-gallery-action", inputs: ["icon", "disabled", "titleText"], outputs: ["onClick"] }, { kind: "component", type: i6.NgxGalleryArrowsComponent, selector: "ngx-gallery-arrows", inputs: ["prevDisabled", "nextDisabled", "arrowPrevIcon", "arrowNextIcon"], outputs: ["onPrevClick", "onNextClick"] }] });
|
|
234
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: NgxGalleryThumbnailsComponent, decorators: [{
|
|
235
235
|
type: Component,
|
|
236
236
|
args: [{ selector: 'ngx-gallery-thumbnails', 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:0px;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:0px;top:0px;background-color:#0006}.ngx-gallery-remaining-count{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:30px}\n"] }]
|
|
237
237
|
}], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: i0.ElementRef }, { type: i2.NgxGalleryHelperService }, { type: i3.LogService }]; }, propDecorators: { name: [{
|
|
@@ -5,8 +5,8 @@ import { LogService } from '../utils/logging.service';
|
|
|
5
5
|
import * as i0 from "@angular/core";
|
|
6
6
|
import * as i1 from "@angular/platform-browser";
|
|
7
7
|
import * as i2 from "../utils/logging.service";
|
|
8
|
-
import * as i3 from "
|
|
9
|
-
import * as i4 from "
|
|
8
|
+
import * as i3 from "@angular/common";
|
|
9
|
+
import * as i4 from "../utils/utils-script.component";
|
|
10
10
|
export class NgxGalleryVideoComponent {
|
|
11
11
|
constructor(sanitization, logService) {
|
|
12
12
|
this.sanitization = sanitization;
|
|
@@ -44,9 +44,9 @@ export class NgxGalleryVideoComponent {
|
|
|
44
44
|
this.logService.log('NgxGalleryImageComponent.timeUpdate', this.mmelement.nativeElement.currentTime);
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
|
-
NgxGalleryVideoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
48
|
-
NgxGalleryVideoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
49
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
47
|
+
NgxGalleryVideoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: NgxGalleryVideoComponent, deps: [{ token: i1.DomSanitizer }, { token: i2.LogService }], target: i0.ɵɵFactoryTarget.Component });
|
|
48
|
+
NgxGalleryVideoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.4", type: NgxGalleryVideoComponent, 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 },\n onBeforeFinish: function(){{ '{' }}\n return false;\n }\n });\n });\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:0px;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:rgba(0,0,0,.7);padding:10px;text-align:center;color:#fff;font-size:16px;position:absolute;bottom:0px;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:0px;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: i4.UtilsScriptComponent, selector: "script-js", inputs: ["src", "type"] }] });
|
|
49
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: NgxGalleryVideoComponent, decorators: [{
|
|
50
50
|
type: Component,
|
|
51
51
|
args: [{ selector: 'cc-video', 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 },\n onBeforeFinish: function(){{ '{' }}\n return false;\n }\n });\n });\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:0px;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:rgba(0,0,0,.7);padding:10px;text-align:center;color:#fff;font-size:16px;position:absolute;bottom:0px;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:0px;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"] }]
|
|
52
52
|
}], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: i2.LogService }]; }, propDecorators: { mmelement: [{
|