@sumaris-net/ngx-components 18.26.11 → 18.26.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/src/app/shared/image/gallery/image-gallery.component.mjs +23 -4
- package/esm2022/src/app/shared/image/gallery/slideshow/image-gallery-slideshow.component.mjs +17 -10
- package/esm2022/src/app/shared/material/paginator/material.paginator-i18n.mjs +1 -1
- package/fesm2022/sumaris-net.ngx-components.mjs +38 -12
- package/fesm2022/sumaris-net.ngx-components.mjs.map +1 -1
- package/package.json +1 -1
- package/src/app/shared/image/gallery/image-gallery.component.d.ts +6 -1
- package/src/app/shared/image/gallery/slideshow/image-gallery-slideshow.component.d.ts +4 -3
- package/src/app/shared/material/paginator/material.paginator-i18n.d.ts +2 -2
- package/src/assets/manifest.json +1 -1
|
@@ -48,4 +48,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
48
48
|
type: Injectable,
|
|
49
49
|
args: [{ providedIn: 'root' }]
|
|
50
50
|
}], ctorParameters: () => [{ type: i1.TranslateService }] });
|
|
51
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
51
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWF0ZXJpYWwucGFnaW5hdG9yLWkxOG4uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMvYXBwL3NoYXJlZC9tYXRlcmlhbC9wYWdpbmF0b3IvbWF0ZXJpYWwucGFnaW5hdG9yLWkxOG4udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMzQyxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQzs7O0FBRy9ELE1BQU0sT0FBTyxnQkFBaUIsU0FBUSxnQkFBZ0I7SUFHOUI7SUFGdEIsT0FBTyxDQUFTO0lBRWhCLFlBQXNCLFNBQTJCO1FBQy9DLEtBQUssRUFBRSxDQUFDO1FBRFksY0FBUyxHQUFULFNBQVMsQ0FBa0I7UUFHL0MsSUFBSSxDQUFDLFNBQVM7YUFDWCxHQUFHLENBQUM7WUFDSCxpQ0FBaUM7WUFDakMsNEJBQTRCO1lBQzVCLGdDQUFnQztZQUNoQyxxQkFBcUI7WUFDckIsNkJBQTZCO1lBQzdCLDRCQUE0QjtTQUM3QixDQUFDO2FBQ0QsU0FBUyxDQUFDLENBQUMsWUFBdUMsRUFBRSxFQUFFO1lBQ3JELE9BQU8sQ0FBQyxJQUFJLENBQUMsbURBQW1ELENBQUMsQ0FBQztZQUNsRSxJQUFJLENBQUMsaUJBQWlCLEdBQUcsSUFBSSxDQUFDLG9CQUFvQixDQUFDLFlBQVksRUFBRSxpQ0FBaUMsRUFBRSxFQUFFLENBQUMsQ0FBQztZQUN4RyxJQUFJLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQyxvQkFBb0IsQ0FBQyxZQUFZLEVBQUUsNEJBQTRCLEVBQUUsR0FBRyxDQUFDLENBQUM7WUFDaEcsSUFBSSxDQUFDLGlCQUFpQixHQUFHLElBQUksQ0FBQyxvQkFBb0IsQ0FBQyxZQUFZLEVBQUUsZ0NBQWdDLEVBQUUsR0FBRyxDQUFDLENBQUM7WUFDeEcsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUMsb0JBQW9CLENBQUMsWUFBWSxFQUFFLHFCQUFxQixFQUFFLEdBQUcsQ0FBQyxDQUFDO1lBQ25GLElBQUksQ0FBQyxjQUFjLEdBQUcsSUFBSSxDQUFDLG9CQUFvQixDQUFDLFlBQVksRUFBRSw2QkFBNkIsRUFBRSxJQUFJLENBQUMsQ0FBQztZQUNuRyxJQUFJLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQyxvQkFBb0IsQ0FBQyxZQUFZLEVBQUUsNEJBQTRCLEVBQUUsSUFBSSxDQUFDLENBQUM7WUFDakcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUN0QixDQUFDLENBQUMsQ0FBQztJQUNQLENBQUM7SUFFRCxhQUFhLEdBQUcsQ0FBQyxJQUFZLEVBQUUsUUFBZ0IsRUFBRSxNQUFjLEVBQUUsRUFBRTtRQUNqRSxJQUFJLE1BQU0sS0FBSyxDQUFDLElBQUksUUFBUSxLQUFLLENBQUMsRUFBRSxDQUFDO1lBQ25DLE9BQU8sSUFBSSxHQUFHLElBQUksQ0FBQyxPQUFPLEdBQUcsR0FBRyxHQUFHLE1BQU0sQ0FBQztRQUM1QyxDQUFDO1FBQ0QsTUFBTSxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsTUFBTSxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBQzdCLE1BQU0sVUFBVSxHQUFHLElBQUksR0FBRyxRQUFRLENBQUM7UUFDbkMsMkZBQTJGO1FBQzNGLE1BQU0sUUFBUSxHQUFHLFVBQVUsR0FBRyxNQUFNLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsVUFBVSxHQUFHLFFBQVEsRUFBRSxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUMsVUFBVSxHQUFHLFFBQVEsQ0FBQztRQUN2RyxPQUFPLFVBQVUsR0FBRyxDQUFDLEdBQUcsS0FBSyxHQUFHLFFBQVEsR0FBRyxHQUFHLEdBQUcsSUFBSSxDQUFDLE9BQU8sR0FBRyxHQUFHLEdBQUcsTUFBTSxDQUFDO0lBQy9FLENBQUMsQ0FBQztJQUVRLG9CQUFvQixDQUFDLFlBQWlCLEVBQUUsR0FBVyxFQUFFLFlBQW9CO1FBQ2pGLE9BQU8sWUFBWSxDQUFDLEdBQUcsQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDLENBQUMsWUFBWSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxZQUFZLENBQUM7SUFDdEUsQ0FBQzt3R0F4Q1UsZ0JBQWdCOzRHQUFoQixnQkFBZ0IsY0FESCxNQUFNOzs0RkFDbkIsZ0JBQWdCO2tCQUQ1QixVQUFVO21CQUFDLEVBQUUsVUFBVSxFQUFFLE1BQU0sRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFRyYW5zbGF0ZVNlcnZpY2UgfSBmcm9tICdAbmd4LXRyYW5zbGF0ZS9jb3JlJztcbmltcG9ydCB7IEluamVjdGFibGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE1hdFBhZ2luYXRvckludGwgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9wYWdpbmF0b3InO1xuXG5ASW5qZWN0YWJsZSh7IHByb3ZpZGVkSW46ICdyb290JyB9KVxuZXhwb3J0IGNsYXNzIE1hdFBhZ2luYXRvckkxOG4gZXh0ZW5kcyBNYXRQYWdpbmF0b3JJbnRsIHtcbiAgb2ZMYWJlbDogc3RyaW5nO1xuXG4gIGNvbnN0cnVjdG9yKHByb3RlY3RlZCB0cmFuc2xhdGU6IFRyYW5zbGF0ZVNlcnZpY2UpIHtcbiAgICBzdXBlcigpO1xuXG4gICAgdGhpcy50cmFuc2xhdGVcbiAgICAgIC5nZXQoW1xuICAgICAgICAnQ09NTU9OLlBBR0lOQVRPUi5JVEVNU19QRVJfUEFHRScsXG4gICAgICAgICdDT01NT04uUEFHSU5BVE9SLk5FWFRfUEFHRScsXG4gICAgICAgICdDT01NT04uUEFHSU5BVE9SLlBSRVZJT1VTX1BBR0UnLFxuICAgICAgICAnQ09NTU9OLlBBR0lOQVRPUi5PRicsXG4gICAgICAgICdDT01NT04uUEFHSU5BVE9SLkZJUlNUX1BBR0UnLFxuICAgICAgICAnQ09NTU9OLlBBR0lOQVRPUi5MQVNUX1BBR0UnLFxuICAgICAgXSlcbiAgICAgIC5zdWJzY3JpYmUoKHRyYW5zbGF0aW9uczogeyBba2V5OiBzdHJpbmddOiBzdHJpbmcgfSkgPT4ge1xuICAgICAgICBjb25zb2xlLmluZm8oJ1tNYXRQYWdpbmF0b3JJMThuXSBVcGRhdGUgcGFnaW5hdGlvbiB0cmFuc2xhdGlvbnMnKTtcbiAgICAgICAgdGhpcy5pdGVtc1BlclBhZ2VMYWJlbCA9IHRoaXMuX2dldFRyYW5zbGF0aW9uVmFsdWUodHJhbnNsYXRpb25zLCAnQ09NTU9OLlBBR0lOQVRPUi5JVEVNU19QRVJfUEFHRScsICcnKTtcbiAgICAgICAgdGhpcy5uZXh0UGFnZUxhYmVsID0gdGhpcy5fZ2V0VHJhbnNsYXRpb25WYWx1ZSh0cmFuc2xhdGlvbnMsICdDT01NT04uUEFHSU5BVE9SLk5FWFRfUEFHRScsICc+Jyk7XG4gICAgICAgIHRoaXMucHJldmlvdXNQYWdlTGFiZWwgPSB0aGlzLl9nZXRUcmFuc2xhdGlvblZhbHVlKHRyYW5zbGF0aW9ucywgJ0NPTU1PTi5QQUdJTkFUT1IuUFJFVklPVVNfUEFHRScsICc8Jyk7XG4gICAgICAgIHRoaXMub2ZMYWJlbCA9IHRoaXMuX2dldFRyYW5zbGF0aW9uVmFsdWUodHJhbnNsYXRpb25zLCAnQ09NTU9OLlBBR0lOQVRPUi5PRicsICcvJyk7XG4gICAgICAgIHRoaXMuZmlyc3RQYWdlTGFiZWwgPSB0aGlzLl9nZXRUcmFuc2xhdGlvblZhbHVlKHRyYW5zbGF0aW9ucywgJ0NPTU1PTi5QQUdJTkFUT1IuRklSU1RfUEFHRScsICd8PCcpO1xuICAgICAgICB0aGlzLmxhc3RQYWdlTGFiZWwgPSB0aGlzLl9nZXRUcmFuc2xhdGlvblZhbHVlKHRyYW5zbGF0aW9ucywgJ0NPTU1PTi5QQUdJTkFUT1IuTEFTVF9QQUdFJywgJz58Jyk7XG4gICAgICAgIHRoaXMuY2hhbmdlcy5uZXh0KCk7XG4gICAgICB9KTtcbiAgfVxuXG4gIGdldFJhbmdlTGFiZWwgPSAocGFnZTogbnVtYmVyLCBwYWdlU2l6ZTogbnVtYmVyLCBsZW5ndGg6IG51bWJlcikgPT4ge1xuICAgIGlmIChsZW5ndGggPT09IDAgfHwgcGFnZVNpemUgPT09IDApIHtcbiAgICAgIHJldHVybiAnMCAnICsgdGhpcy5vZkxhYmVsICsgJyAnICsgbGVuZ3RoO1xuICAgIH1cbiAgICBsZW5ndGggPSBNYXRoLm1heChsZW5ndGgsIDApO1xuICAgIGNvbnN0IHN0YXJ0SW5kZXggPSBwYWdlICogcGFnZVNpemU7XG4gICAgLy8gSWYgdGhlIHN0YXJ0IGluZGV4IGV4Y2VlZHMgdGhlIGxpc3QgbGVuZ3RoLCBkbyBub3QgdHJ5IGFuZCBmaXggdGhlIGVuZCBpbmRleCB0byB0aGUgZW5kLlxuICAgIGNvbnN0IGVuZEluZGV4ID0gc3RhcnRJbmRleCA8IGxlbmd0aCA/IE1hdGgubWluKHN0YXJ0SW5kZXggKyBwYWdlU2l6ZSwgbGVuZ3RoKSA6IHN0YXJ0SW5kZXggKyBwYWdlU2l6ZTtcbiAgICByZXR1cm4gc3RhcnRJbmRleCArIDEgKyAnIC0gJyArIGVuZEluZGV4ICsgJyAnICsgdGhpcy5vZkxhYmVsICsgJyAnICsgbGVuZ3RoO1xuICB9O1xuXG4gIHByb3RlY3RlZCBfZ2V0VHJhbnNsYXRpb25WYWx1ZSh0cmFuc2xhdGlvbnM6IGFueSwga2V5OiBzdHJpbmcsIGRlZmF1bHRWYWx1ZTogc3RyaW5nKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdHJhbnNsYXRpb25zW2tleV0gIT09IGtleSA/IHRyYW5zbGF0aW9uc1trZXldIDogZGVmYXVsdFZhbHVlO1xuICB9XG59XG4iXX0=
|
|
@@ -28599,7 +28599,7 @@ class AppImageGallerySlideshowComponent {
|
|
|
28599
28599
|
cd;
|
|
28600
28600
|
_swiper;
|
|
28601
28601
|
swiperModules = [IonicSlides];
|
|
28602
|
-
|
|
28602
|
+
_activeIndex = 0;
|
|
28603
28603
|
// Mouse wheel zoom & rotation state
|
|
28604
28604
|
_zoomState = { scale: 1, tx: 0, ty: 0 };
|
|
28605
28605
|
_rotation = 0; // degrees: 0, 90, 180, 270
|
|
@@ -28619,6 +28619,9 @@ class AppImageGallerySlideshowComponent {
|
|
|
28619
28619
|
// Set by slidePrev()/slideNext() just before asking Swiper to move, so onSlideChange() can tell apart
|
|
28620
28620
|
// a "step" from a "wrap" unambiguously (with exactly 2 slides, both produce the very same index change).
|
|
28621
28621
|
_pendingSlideDirection = null;
|
|
28622
|
+
get activeIndex() {
|
|
28623
|
+
return this._activeIndex ?? this.selectedIndex;
|
|
28624
|
+
}
|
|
28622
28625
|
rows = [];
|
|
28623
28626
|
selectedIndex = 0;
|
|
28624
28627
|
mobile = false;
|
|
@@ -28660,10 +28663,10 @@ class AppImageGallerySlideshowComponent {
|
|
|
28660
28663
|
}
|
|
28661
28664
|
/** No "fetch previous page" concept exists: reaching the first slide can only loop, or stop. */
|
|
28662
28665
|
get isPrevDisabled() {
|
|
28663
|
-
return !this.enableLoop && this.
|
|
28666
|
+
return !this.enableLoop && this._activeIndex === 0;
|
|
28664
28667
|
}
|
|
28665
28668
|
get isNextDisabled() {
|
|
28666
|
-
return !this.enableLoop && !this.canFetchMore && this.
|
|
28669
|
+
return !this.enableLoop && !this.canFetchMore && this._activeIndex === this.rows.length - 1;
|
|
28667
28670
|
}
|
|
28668
28671
|
constructor(alterCtrl, translate, cd) {
|
|
28669
28672
|
this.alterCtrl = alterCtrl;
|
|
@@ -28699,7 +28702,7 @@ class AppImageGallerySlideshowComponent {
|
|
|
28699
28702
|
const swiper = this.getSwiper(swiperElement);
|
|
28700
28703
|
const previousIndex = swiper.previousIndex;
|
|
28701
28704
|
const activeIndex = swiper.activeIndex;
|
|
28702
|
-
this.
|
|
28705
|
+
this._activeIndex = activeIndex;
|
|
28703
28706
|
this._resetZoom(swiperElement);
|
|
28704
28707
|
this._updateSwiperTouchMove(swiperElement);
|
|
28705
28708
|
this.markForCheck();
|
|
@@ -28731,9 +28734,9 @@ class AppImageGallerySlideshowComponent {
|
|
|
28731
28734
|
if (this.selectedIndex > 0 && swiper && swiper.activeIndex !== this.selectedIndex) {
|
|
28732
28735
|
swiper.slideTo(this.selectedIndex, 0 /*no transition, to avoid a "revert" effect*/);
|
|
28733
28736
|
}
|
|
28734
|
-
this.
|
|
28737
|
+
this._activeIndex = swiper?.activeIndex ?? this.selectedIndex;
|
|
28735
28738
|
if (this.debug)
|
|
28736
|
-
console.debug(`[image-gallery-slideshow] Initializing slideshow, activeSlideIndex=${this.
|
|
28739
|
+
console.debug(`[image-gallery-slideshow] Initializing slideshow, activeSlideIndex=${this._activeIndex}`);
|
|
28737
28740
|
this._setupWheelZoom(swiperElement);
|
|
28738
28741
|
this._updateSwiperTouchMove(swiperElement);
|
|
28739
28742
|
this.markForCheck();
|
|
@@ -28807,7 +28810,9 @@ class AppImageGallerySlideshowComponent {
|
|
|
28807
28810
|
}
|
|
28808
28811
|
async slidePrev(swiperElement) {
|
|
28809
28812
|
const swiper = this.getSwiper(swiperElement);
|
|
28810
|
-
|
|
28813
|
+
if (!swiper)
|
|
28814
|
+
return;
|
|
28815
|
+
const activeIndex = swiper?.activeIndex ?? this.selectedIndex;
|
|
28811
28816
|
if (activeIndex === 0) {
|
|
28812
28817
|
// No previous page concept (pagination only ever loads forward): just loop, or stay put
|
|
28813
28818
|
if (!this.enableLoop)
|
|
@@ -28822,6 +28827,8 @@ class AppImageGallerySlideshowComponent {
|
|
|
28822
28827
|
}
|
|
28823
28828
|
async slideNext(swiperElement) {
|
|
28824
28829
|
const swiper = this.getSwiper(swiperElement);
|
|
28830
|
+
if (!swiper)
|
|
28831
|
+
return;
|
|
28825
28832
|
const activeIndex = swiper.activeIndex;
|
|
28826
28833
|
if (activeIndex === this.rows.length - 1) {
|
|
28827
28834
|
// Try fetching a further page first, before falling back to looping/stopping
|
|
@@ -29302,11 +29309,11 @@ class AppImageGallerySlideshowComponent {
|
|
|
29302
29309
|
this.cd.markForCheck();
|
|
29303
29310
|
}
|
|
29304
29311
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppImageGallerySlideshowComponent, deps: [{ token: i2$1.AlertController }, { token: i1$1.TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
29305
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AppImageGallerySlideshowComponent, selector: "app-image-gallery-slideshow", inputs: { rows: "rows", selectedIndex: "selectedIndex", mobile: ["mobile", "mobile", booleanAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], debug: ["debug", "debug", booleanAttribute], enableMouseZoom: ["enableMouseZoom", "enableMouseZoom", booleanAttribute], wheelZoomStep: "wheelZoomStep", maxZoomRatio: "maxZoomRatio", enableRotate: ["enableRotate", "enableRotate", booleanAttribute], enableCrop: ["enableCrop", "enableCrop", booleanAttribute], editionFormat: "editionFormat", editionQuality: "editionQuality", imageSizeQueryParam: "imageSizeQueryParam", modalImageSize: "modalImageSize", enableLoop: ["enableLoop", "enableLoop", booleanAttribute], canFetchMore: ["canFetchMore", "canFetchMore", booleanAttribute] }, outputs: { deleteRequested: "deleteRequested", closeRequested: "closeRequested", afterEditImage: "afterEditImage", afterEditRow: "afterEditRow", previousSlide: "previousSlide", nextSlide: "nextSlide", fetchMore: "fetchMore" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "swiperRef", first: true, predicate: ["swiperContainer"], descendants: true }], ngImport: i0, template: "<ion-content\n class=\"ion-no-padding ion-no-margin\"\n (mousedown)=\"onPointerDown($event, swiperContainer)\"\n (mousemove)=\"onPointerMove($event, swiperContainer)\"\n (mouseup)=\"onPointerUp($event, swiperContainer)\"\n (mouseleave)=\"onPointerUp($event, swiperContainer)\"\n (touchmove)=\"onCropPointerMove($event, swiperContainer)\"\n (touchend)=\"onCropPointerUp($event, swiperContainer)\"\n (touchcancel)=\"onCropPointerUp($event, swiperContainer)\"\n>\n @let count = rows?.length || 0;\n <!-- Counter -->\n <div class=\"top-left\">\n <ion-label color=\"light\">{{ activeSlideIndex + 1 }} / {{ count }}</ion-label>\n </div>\n\n <!-- zoom / rotation / crop buttons: all shown together, no \"enter edit mode\" step needed -->\n <div class=\"top-right\">\n @if (!mobile) {\n <ion-fab-button size=\"small\" (click)=\"zoom(swiperContainer, true)\" color=\"light\">\n <ion-icon name=\"search\"></ion-icon>\n <ion-icon class=\"icon-secondary\" name=\"add\"></ion-icon>\n </ion-fab-button>\n <ion-fab-button size=\"small\" (click)=\"zoom(swiperContainer, false)\" color=\"light\">\n <ion-icon name=\"search\"></ion-icon>\n <ion-icon class=\"icon-secondary\" name=\"remove\"></ion-icon>\n </ion-fab-button>\n }\n @if (!readOnly && enableRotate) {\n <ion-fab-button\n size=\"small\"\n (click)=\"rotate(swiperContainer, 'left')\"\n color=\"light\"\n [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n >\n <mat-icon>rotate_left</mat-icon>\n </ion-fab-button>\n <ion-fab-button\n size=\"small\"\n (click)=\"rotate(swiperContainer, 'right')\"\n color=\"light\"\n [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n >\n <mat-icon>rotate_right</mat-icon>\n </ion-fab-button>\n }\n @if (!readOnly && enableCrop) {\n <ion-fab-button\n size=\"small\"\n (click)=\"toggleCropTool(swiperContainer)\"\n [color]=\"_cropToolActive ? 'tertiary' : 'light'\"\n [title]=\"\n !showTooltip\n ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n : ''\n \"\n [matTooltip]=\"\n showTooltip\n ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n : ''\n \"\n >\n <mat-icon>crop</mat-icon>\n </ion-fab-button>\n @if (_cropToolActive) {\n <ion-fab-button\n size=\"small\"\n (click)=\"resetCrop(swiperContainer)\"\n color=\"light\"\n [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n >\n <mat-icon>crop_free</mat-icon>\n </ion-fab-button>\n }\n }\n </div>\n\n <!-- navigation side buttons next/back: hidden while a crop/rotation edit is pending, to keep the focus on validating/cancelling it -->\n <ng-container *ngIf=\"!mobile && !hasPendingEdit && (rows | isArrayLength: { greaterThan: 1 })\">\n <div class=\"side-buttons prev\" [class.disabled]=\"isPrevDisabled\" (click)=\"slidePrev(swiperContainer)\">\n <ion-icon name=\"chevron-back\"></ion-icon>\n </div>\n <div class=\"side-buttons next\" [class.disabled]=\"isNextDisabled\" (click)=\"slideNext(swiperContainer)\">\n <ion-icon name=\"chevron-forward\"></ion-icon>\n </div>\n </ng-container>\n\n <!-- image slides -->\n <swiper-container\n #swiperContainer\n [modules]=\"swiperModules\"\n [zoom]=\"!enableMouseZoom\"\n [initialSlide]=\"selectedIndex\"\n (swiperslidechange)=\"onSlideChange(swiperContainer)\"\n (swiperinit)=\"onSwiperInit(swiperContainer)\"\n >\n @for (row of rows; track row.id; let index = $index) {\n <ng-container *ngTemplateOutlet=\"slideTemplate; context: { image: row.currentData, index }\"></ng-container>\n }\n </swiper-container>\n</ion-content>\n\n<ion-footer>\n <ion-toolbar color=\"light\">\n @if (!hasPendingEdit) {\n <ion-row>\n <ion-col size=\"4\" class=\"ion-text-start\">\n @if (!readOnly) {\n <ion-button\n (click)=\"requestDelete(swiperContainer)\"\n [disabled]=\"disabled\"\n fill=\"clear\"\n color=\"danger\"\n >\n <mat-icon slot=\"start\">delete</mat-icon>\n {{ 'COMMON.BTN_DELETE' | translate }}\n </ion-button>\n }\n </ion-col>\n <ion-col size=\"4\"></ion-col>\n <ion-col size=\"4\" class=\"ion-text-end\">\n <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\" fill=\"clear\" *ngIf=\"mobile; else desktop\">\n <ion-icon slot=\"start\" name=\"close\"></ion-icon>\n {{ 'COMMON.BTN_CLOSE' | translate }}\n </ion-button>\n <ng-template #desktop>\n <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\">\n {{ 'COMMON.BTN_CLOSE' | translate }}\n </ion-button>\n </ng-template>\n </ion-col>\n </ion-row>\n } @else {\n <!-- A crop or rotation change is pending: ask for an explicit validation before exporting the image -->\n <ion-row>\n <ion-col size=\"12\" class=\"ion-text-end\">\n <ion-button\n (click)=\"discardEdit(swiperContainer)\"\n color=\"dark\"\n fill=\"clear\"\n [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_CANCEL_EDIT' | translate) : ''\"\n [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_CANCEL_EDIT' | translate) : ''\"\n >\n <ion-icon slot=\"start\" name=\"arrow-undo\"></ion-icon>\n {{ 'COMMON.BTN_CANCEL' | translate }}\n </ion-button>\n <ion-button (click)=\"validateEdit(swiperContainer)\" color=\"danger\">\n <ion-icon slot=\"start\" name=\"checkmark\"></ion-icon>\n {{ 'COMMON.BTN_VALIDATE' | translate }}\n </ion-button>\n </ion-col>\n </ion-row>\n }\n </ion-toolbar>\n</ion-footer>\n\n<ng-template #slideTemplate let-image=\"image\" let-index=\"index\">\n <swiper-slide>\n <div class=\"swiper-zoom-container\" [class.cdk-visually-hidden]=\"!_swiper && index !== selectedIndex\">\n\n <!-- the image -->\n @if (image?.url) {\n <ion-img class=\"swiper-zoom-target\" [src]=\"image.url | appendQueryParams: getImageSizeQueryParams()\" />\n } @else {\n <img [src]=\"image.dataUrl\" [alt]=\"image.title\" />\n }\n\n <!-- crop overlay: only rendered for the active slide -->\n @if (!readOnly && enableCrop && _cropToolActive && index === activeSlideIndex) {\n <div\n class=\"crop-overlay\"\n (mousedown)=\"onCropPointerDown($event, swiperContainer, 'move')\"\n (touchstart)=\"onCropPointerDown($event, swiperContainer, 'move')\"\n >\n <!-- darkened mask around the selection: clipped to the image bounds -->\n <div class=\"crop-mask\">\n <div\n class=\"crop-mask-rect\"\n [style.left.%]=\"_cropRect.x * 100\"\n [style.top.%]=\"_cropRect.y * 100\"\n [style.width.%]=\"_cropRect.width * 100\"\n [style.height.%]=\"_cropRect.height * 100\"\n ></div>\n </div>\n\n <!-- interactive selection border, grid & drag handles: never clipped, so corner/edge handles\n remain fully grabbable even when the selection touches the image bounds -->\n <div\n class=\"crop-rect\"\n [style.left.%]=\"_cropRect.x * 100\"\n [style.top.%]=\"_cropRect.y * 100\"\n [style.width.%]=\"_cropRect.width * 100\"\n [style.height.%]=\"_cropRect.height * 100\"\n >\n <div class=\"crop-grid\">\n <span class=\"line v\" style=\"left: 33.333%\"></span>\n <span class=\"line v\" style=\"left: 66.666%\"></span>\n <span class=\"line h\" style=\"top: 33.333%\"></span>\n <span class=\"line h\" style=\"top: 66.666%\"></span>\n </div>\n @for (handle of _cropHandles; track handle) {\n <div\n class=\"crop-handle {{ handle }}\"\n (mousedown)=\"onCropPointerDown($event, swiperContainer, handle)\"\n (touchstart)=\"onCropPointerDown($event, swiperContainer, handle)\"\n ></div>\n }\n </div>\n </div>\n }\n </div>\n </swiper-slide>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;height:100%;-webkit-user-select:none;user-select:none}:host ion-content{flex:1 1 auto}:host .top-left{z-index:14;position:absolute;display:inline-grid;left:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .top-right{z-index:14;position:absolute;display:inline-grid;right:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .side-buttons{--side-buttons-width: 120px;--side-buttons-margin: calc(var(--side-buttons-width) / 3);z-index:13;position:absolute;top:0;bottom:0;width:var(--side-buttons-width)}:host .side-buttons ion-icon{top:50%;color:#fff;background:#00000080;padding:4px;border-radius:50%;font-size:2.5rem;position:absolute;opacity:0;transition-duration:.15s;transition-timing-function:ease-in}:host .side-buttons:hover{cursor:pointer}:host .side-buttons:hover ion-icon{opacity:1}:host .side-buttons.prev{left:0}:host .side-buttons.prev ion-icon{left:var(--side-buttons-margin)}:host .side-buttons.next{right:0}:host .side-buttons.next ion-icon{right:var(--side-buttons-margin)}:host .side-buttons.disabled{pointer-events:none}:host swiper-container{height:100%;background:#000}:host .swiper-zoom-container{position:relative}:host ion-fab-button .icon-secondary{top:11px;left:6px;height:14px}:host .crop-overlay{position:absolute;z-index:15;cursor:move;touch-action:none;animation:crop-overlay-fade-in .15s ease-in}:host .crop-overlay .crop-mask{position:absolute;inset:0;overflow:hidden;pointer-events:none}:host .crop-overlay .crop-mask .crop-mask-rect{position:absolute;box-shadow:0 0 0 2000px #0009}:host .crop-overlay .crop-rect{position:absolute;box-sizing:border-box;border:1px solid rgba(255,255,255,.95);cursor:move;touch-action:none}:host .crop-overlay .crop-rect .crop-grid{position:absolute;inset:0;pointer-events:none}:host .crop-overlay .crop-rect .crop-grid .line{position:absolute;background:#ffffff73}:host .crop-overlay .crop-rect .crop-grid .line.v{top:0;bottom:0;width:1px}:host .crop-overlay .crop-rect .crop-grid .line.h{left:0;right:0;height:1px}:host .crop-overlay .crop-rect .crop-handle{position:absolute;width:16px;height:16px;margin:-8px;background:#fff;border:1px solid rgba(0,0,0,.45);border-radius:50%;box-shadow:0 1px 4px #00000080;transition:transform .12s ease;touch-action:none}:host .crop-overlay .crop-rect .crop-handle:hover{transform:scale(1.3)}:host .crop-overlay .crop-rect .crop-handle.nw{left:0;top:0;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.n{left:50%;top:0;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.ne{left:100%;top:0;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.e{left:100%;top:50%;cursor:ew-resize}:host .crop-overlay .crop-rect .crop-handle.se{left:100%;top:100%;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.s{left:50%;top:100%;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.sw{left:0;top:100%;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.w{left:0;top:50%;cursor:ew-resize}@keyframes crop-overlay-fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: AppendQueryParamsPipePipe, name: "appendQueryParams" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
29312
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AppImageGallerySlideshowComponent, selector: "app-image-gallery-slideshow", inputs: { rows: "rows", selectedIndex: "selectedIndex", mobile: ["mobile", "mobile", booleanAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], debug: ["debug", "debug", booleanAttribute], enableMouseZoom: ["enableMouseZoom", "enableMouseZoom", booleanAttribute], wheelZoomStep: "wheelZoomStep", maxZoomRatio: "maxZoomRatio", enableRotate: ["enableRotate", "enableRotate", booleanAttribute], enableCrop: ["enableCrop", "enableCrop", booleanAttribute], editionFormat: "editionFormat", editionQuality: "editionQuality", imageSizeQueryParam: "imageSizeQueryParam", modalImageSize: "modalImageSize", enableLoop: ["enableLoop", "enableLoop", booleanAttribute], canFetchMore: ["canFetchMore", "canFetchMore", booleanAttribute] }, outputs: { deleteRequested: "deleteRequested", closeRequested: "closeRequested", afterEditImage: "afterEditImage", afterEditRow: "afterEditRow", previousSlide: "previousSlide", nextSlide: "nextSlide", fetchMore: "fetchMore" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "swiperRef", first: true, predicate: ["swiperContainer"], descendants: true }], ngImport: i0, template: "<ion-content\n class=\"ion-no-padding ion-no-margin\"\n (mousedown)=\"onPointerDown($event, swiperContainer)\"\n (mousemove)=\"onPointerMove($event, swiperContainer)\"\n (mouseup)=\"onPointerUp($event, swiperContainer)\"\n (mouseleave)=\"onPointerUp($event, swiperContainer)\"\n (touchmove)=\"onCropPointerMove($event, swiperContainer)\"\n (touchend)=\"onCropPointerUp($event, swiperContainer)\"\n (touchcancel)=\"onCropPointerUp($event, swiperContainer)\"\n>\n @let count = rows?.length || 0;\n <!-- Counter -->\n <div class=\"top-left\">\n <ion-label color=\"light\">{{ _activeIndex + 1 }} / {{ count }}</ion-label>\n </div>\n\n <!-- zoom / rotation / crop buttons: all shown together, no \"enter edit mode\" step needed -->\n <div class=\"top-right\">\n @if (!mobile) {\n <ion-fab-button size=\"small\" (click)=\"zoom(swiperContainer, true)\" color=\"light\">\n <ion-icon name=\"search\"></ion-icon>\n <ion-icon class=\"icon-secondary\" name=\"add\"></ion-icon>\n </ion-fab-button>\n <ion-fab-button size=\"small\" (click)=\"zoom(swiperContainer, false)\" color=\"light\">\n <ion-icon name=\"search\"></ion-icon>\n <ion-icon class=\"icon-secondary\" name=\"remove\"></ion-icon>\n </ion-fab-button>\n }\n @if (!readOnly && enableRotate) {\n <ion-fab-button\n size=\"small\"\n (click)=\"rotate(swiperContainer, 'left')\"\n color=\"light\"\n [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n >\n <mat-icon>rotate_left</mat-icon>\n </ion-fab-button>\n <ion-fab-button\n size=\"small\"\n (click)=\"rotate(swiperContainer, 'right')\"\n color=\"light\"\n [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n >\n <mat-icon>rotate_right</mat-icon>\n </ion-fab-button>\n }\n @if (!readOnly && enableCrop) {\n <ion-fab-button\n size=\"small\"\n (click)=\"toggleCropTool(swiperContainer)\"\n [color]=\"_cropToolActive ? 'tertiary' : 'light'\"\n [title]=\"\n !showTooltip\n ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n : ''\n \"\n [matTooltip]=\"\n showTooltip\n ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n : ''\n \"\n >\n <mat-icon>crop</mat-icon>\n </ion-fab-button>\n @if (_cropToolActive) {\n <ion-fab-button\n size=\"small\"\n (click)=\"resetCrop(swiperContainer)\"\n color=\"light\"\n [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n >\n <mat-icon>crop_free</mat-icon>\n </ion-fab-button>\n }\n }\n </div>\n\n <!-- navigation side buttons next/back: hidden while a crop/rotation edit is pending, to keep the focus on validating/cancelling it -->\n <ng-container *ngIf=\"!mobile && !hasPendingEdit && (rows | isArrayLength: { greaterThan: 1 })\">\n <div class=\"side-buttons prev\" [class.disabled]=\"isPrevDisabled\" (click)=\"slidePrev(swiperContainer)\">\n <ion-icon name=\"chevron-back\"></ion-icon>\n </div>\n <div class=\"side-buttons next\" [class.disabled]=\"isNextDisabled\" (click)=\"slideNext(swiperContainer)\">\n <ion-icon name=\"chevron-forward\"></ion-icon>\n </div>\n </ng-container>\n\n <!-- image slides -->\n <swiper-container\n #swiperContainer\n [modules]=\"swiperModules\"\n [zoom]=\"!enableMouseZoom\"\n [initialSlide]=\"selectedIndex\"\n (swiperslidechange)=\"onSlideChange(swiperContainer)\"\n (swiperinit)=\"onSwiperInit(swiperContainer)\"\n >\n @for (row of rows; track row.id; let index = $index) {\n <ng-container *ngTemplateOutlet=\"slideTemplate; context: { image: row.currentData, index }\"></ng-container>\n }\n </swiper-container>\n</ion-content>\n\n<ion-footer>\n <ion-toolbar color=\"light\">\n @if (!hasPendingEdit) {\n <ion-row>\n <ion-col size=\"4\" class=\"ion-text-start\">\n @if (!readOnly) {\n <ion-button\n (click)=\"requestDelete(swiperContainer)\"\n [disabled]=\"disabled\"\n fill=\"clear\"\n color=\"danger\"\n >\n <mat-icon slot=\"start\">delete</mat-icon>\n {{ 'COMMON.BTN_DELETE' | translate }}\n </ion-button>\n }\n </ion-col>\n <ion-col size=\"4\"></ion-col>\n <ion-col size=\"4\" class=\"ion-text-end\">\n <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\" fill=\"clear\" *ngIf=\"mobile; else desktop\">\n <ion-icon slot=\"start\" name=\"close\"></ion-icon>\n {{ 'COMMON.BTN_CLOSE' | translate }}\n </ion-button>\n <ng-template #desktop>\n <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\">\n {{ 'COMMON.BTN_CLOSE' | translate }}\n </ion-button>\n </ng-template>\n </ion-col>\n </ion-row>\n } @else {\n <!-- A crop or rotation change is pending: ask for an explicit validation before exporting the image -->\n <ion-row>\n <ion-col size=\"12\" class=\"ion-text-end\">\n <ion-button\n (click)=\"discardEdit(swiperContainer)\"\n color=\"dark\"\n fill=\"clear\"\n [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_CANCEL_EDIT' | translate) : ''\"\n [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_CANCEL_EDIT' | translate) : ''\"\n >\n <ion-icon slot=\"start\" name=\"arrow-undo\"></ion-icon>\n {{ 'COMMON.BTN_CANCEL' | translate }}\n </ion-button>\n <ion-button (click)=\"validateEdit(swiperContainer)\" color=\"danger\">\n <ion-icon slot=\"start\" name=\"checkmark\"></ion-icon>\n {{ 'COMMON.BTN_VALIDATE' | translate }}\n </ion-button>\n </ion-col>\n </ion-row>\n }\n </ion-toolbar>\n</ion-footer>\n\n<ng-template #slideTemplate let-image=\"image\" let-index=\"index\">\n <swiper-slide>\n <div class=\"swiper-zoom-container\" [class.cdk-visually-hidden]=\"!_swiper && index !== selectedIndex\">\n\n <!-- the image -->\n @if (image?.url) {\n <ion-img class=\"swiper-zoom-target\" [src]=\"image.url | appendQueryParams: getImageSizeQueryParams()\" />\n } @else {\n <img [src]=\"image.dataUrl\" [alt]=\"image.title\" />\n }\n\n <!-- crop overlay: only rendered for the active slide -->\n @if (!readOnly && enableCrop && _cropToolActive && index === _activeIndex) {\n <div\n class=\"crop-overlay\"\n (mousedown)=\"onCropPointerDown($event, swiperContainer, 'move')\"\n (touchstart)=\"onCropPointerDown($event, swiperContainer, 'move')\"\n >\n <!-- darkened mask around the selection: clipped to the image bounds -->\n <div class=\"crop-mask\">\n <div\n class=\"crop-mask-rect\"\n [style.left.%]=\"_cropRect.x * 100\"\n [style.top.%]=\"_cropRect.y * 100\"\n [style.width.%]=\"_cropRect.width * 100\"\n [style.height.%]=\"_cropRect.height * 100\"\n ></div>\n </div>\n\n <!-- interactive selection border, grid & drag handles: never clipped, so corner/edge handles\n remain fully grabbable even when the selection touches the image bounds -->\n <div\n class=\"crop-rect\"\n [style.left.%]=\"_cropRect.x * 100\"\n [style.top.%]=\"_cropRect.y * 100\"\n [style.width.%]=\"_cropRect.width * 100\"\n [style.height.%]=\"_cropRect.height * 100\"\n >\n <div class=\"crop-grid\">\n <span class=\"line v\" style=\"left: 33.333%\"></span>\n <span class=\"line v\" style=\"left: 66.666%\"></span>\n <span class=\"line h\" style=\"top: 33.333%\"></span>\n <span class=\"line h\" style=\"top: 66.666%\"></span>\n </div>\n @for (handle of _cropHandles; track handle) {\n <div\n class=\"crop-handle {{ handle }}\"\n (mousedown)=\"onCropPointerDown($event, swiperContainer, handle)\"\n (touchstart)=\"onCropPointerDown($event, swiperContainer, handle)\"\n ></div>\n }\n </div>\n </div>\n }\n </div>\n </swiper-slide>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;height:100%;-webkit-user-select:none;user-select:none}:host ion-content{flex:1 1 auto}:host .top-left{z-index:14;position:absolute;display:inline-grid;left:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .top-right{z-index:14;position:absolute;display:inline-grid;right:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .side-buttons{--side-buttons-width: 120px;--side-buttons-margin: calc(var(--side-buttons-width) / 3);z-index:13;position:absolute;top:0;bottom:0;width:var(--side-buttons-width)}:host .side-buttons ion-icon{top:50%;color:#fff;background:#00000080;padding:4px;border-radius:50%;font-size:2.5rem;position:absolute;opacity:0;transition-duration:.15s;transition-timing-function:ease-in}:host .side-buttons:hover{cursor:pointer}:host .side-buttons:hover ion-icon{opacity:1}:host .side-buttons.prev{left:0}:host .side-buttons.prev ion-icon{left:var(--side-buttons-margin)}:host .side-buttons.next{right:0}:host .side-buttons.next ion-icon{right:var(--side-buttons-margin)}:host .side-buttons.disabled{pointer-events:none}:host swiper-container{height:100%;background:#000}:host .swiper-zoom-container{position:relative}:host ion-fab-button .icon-secondary{top:11px;left:6px;height:14px}:host .crop-overlay{position:absolute;z-index:15;cursor:move;touch-action:none;animation:crop-overlay-fade-in .15s ease-in}:host .crop-overlay .crop-mask{position:absolute;inset:0;overflow:hidden;pointer-events:none}:host .crop-overlay .crop-mask .crop-mask-rect{position:absolute;box-shadow:0 0 0 2000px #0009}:host .crop-overlay .crop-rect{position:absolute;box-sizing:border-box;border:1px solid rgba(255,255,255,.95);cursor:move;touch-action:none}:host .crop-overlay .crop-rect .crop-grid{position:absolute;inset:0;pointer-events:none}:host .crop-overlay .crop-rect .crop-grid .line{position:absolute;background:#ffffff73}:host .crop-overlay .crop-rect .crop-grid .line.v{top:0;bottom:0;width:1px}:host .crop-overlay .crop-rect .crop-grid .line.h{left:0;right:0;height:1px}:host .crop-overlay .crop-rect .crop-handle{position:absolute;width:16px;height:16px;margin:-8px;background:#fff;border:1px solid rgba(0,0,0,.45);border-radius:50%;box-shadow:0 1px 4px #00000080;transition:transform .12s ease;touch-action:none}:host .crop-overlay .crop-rect .crop-handle:hover{transform:scale(1.3)}:host .crop-overlay .crop-rect .crop-handle.nw{left:0;top:0;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.n{left:50%;top:0;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.ne{left:100%;top:0;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.e{left:100%;top:50%;cursor:ew-resize}:host .crop-overlay .crop-rect .crop-handle.se{left:100%;top:100%;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.s{left:50%;top:100%;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.sw{left:0;top:100%;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.w{left:0;top:50%;cursor:ew-resize}@keyframes crop-overlay-fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: AppendQueryParamsPipePipe, name: "appendQueryParams" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
29306
29313
|
}
|
|
29307
29314
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppImageGallerySlideshowComponent, decorators: [{
|
|
29308
29315
|
type: Component,
|
|
29309
|
-
args: [{ selector: 'app-image-gallery-slideshow', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-content\n class=\"ion-no-padding ion-no-margin\"\n (mousedown)=\"onPointerDown($event, swiperContainer)\"\n (mousemove)=\"onPointerMove($event, swiperContainer)\"\n (mouseup)=\"onPointerUp($event, swiperContainer)\"\n (mouseleave)=\"onPointerUp($event, swiperContainer)\"\n (touchmove)=\"onCropPointerMove($event, swiperContainer)\"\n (touchend)=\"onCropPointerUp($event, swiperContainer)\"\n (touchcancel)=\"onCropPointerUp($event, swiperContainer)\"\n>\n @let count = rows?.length || 0;\n <!-- Counter -->\n <div class=\"top-left\">\n <ion-label color=\"light\">{{ activeSlideIndex + 1 }} / {{ count }}</ion-label>\n </div>\n\n <!-- zoom / rotation / crop buttons: all shown together, no \"enter edit mode\" step needed -->\n <div class=\"top-right\">\n @if (!mobile) {\n <ion-fab-button size=\"small\" (click)=\"zoom(swiperContainer, true)\" color=\"light\">\n <ion-icon name=\"search\"></ion-icon>\n <ion-icon class=\"icon-secondary\" name=\"add\"></ion-icon>\n </ion-fab-button>\n <ion-fab-button size=\"small\" (click)=\"zoom(swiperContainer, false)\" color=\"light\">\n <ion-icon name=\"search\"></ion-icon>\n <ion-icon class=\"icon-secondary\" name=\"remove\"></ion-icon>\n </ion-fab-button>\n }\n @if (!readOnly && enableRotate) {\n <ion-fab-button\n size=\"small\"\n (click)=\"rotate(swiperContainer, 'left')\"\n color=\"light\"\n [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n >\n <mat-icon>rotate_left</mat-icon>\n </ion-fab-button>\n <ion-fab-button\n size=\"small\"\n (click)=\"rotate(swiperContainer, 'right')\"\n color=\"light\"\n [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n >\n <mat-icon>rotate_right</mat-icon>\n </ion-fab-button>\n }\n @if (!readOnly && enableCrop) {\n <ion-fab-button\n size=\"small\"\n (click)=\"toggleCropTool(swiperContainer)\"\n [color]=\"_cropToolActive ? 'tertiary' : 'light'\"\n [title]=\"\n !showTooltip\n ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n : ''\n \"\n [matTooltip]=\"\n showTooltip\n ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n : ''\n \"\n >\n <mat-icon>crop</mat-icon>\n </ion-fab-button>\n @if (_cropToolActive) {\n <ion-fab-button\n size=\"small\"\n (click)=\"resetCrop(swiperContainer)\"\n color=\"light\"\n [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n >\n <mat-icon>crop_free</mat-icon>\n </ion-fab-button>\n }\n }\n </div>\n\n <!-- navigation side buttons next/back: hidden while a crop/rotation edit is pending, to keep the focus on validating/cancelling it -->\n <ng-container *ngIf=\"!mobile && !hasPendingEdit && (rows | isArrayLength: { greaterThan: 1 })\">\n <div class=\"side-buttons prev\" [class.disabled]=\"isPrevDisabled\" (click)=\"slidePrev(swiperContainer)\">\n <ion-icon name=\"chevron-back\"></ion-icon>\n </div>\n <div class=\"side-buttons next\" [class.disabled]=\"isNextDisabled\" (click)=\"slideNext(swiperContainer)\">\n <ion-icon name=\"chevron-forward\"></ion-icon>\n </div>\n </ng-container>\n\n <!-- image slides -->\n <swiper-container\n #swiperContainer\n [modules]=\"swiperModules\"\n [zoom]=\"!enableMouseZoom\"\n [initialSlide]=\"selectedIndex\"\n (swiperslidechange)=\"onSlideChange(swiperContainer)\"\n (swiperinit)=\"onSwiperInit(swiperContainer)\"\n >\n @for (row of rows; track row.id; let index = $index) {\n <ng-container *ngTemplateOutlet=\"slideTemplate; context: { image: row.currentData, index }\"></ng-container>\n }\n </swiper-container>\n</ion-content>\n\n<ion-footer>\n <ion-toolbar color=\"light\">\n @if (!hasPendingEdit) {\n <ion-row>\n <ion-col size=\"4\" class=\"ion-text-start\">\n @if (!readOnly) {\n <ion-button\n (click)=\"requestDelete(swiperContainer)\"\n [disabled]=\"disabled\"\n fill=\"clear\"\n color=\"danger\"\n >\n <mat-icon slot=\"start\">delete</mat-icon>\n {{ 'COMMON.BTN_DELETE' | translate }}\n </ion-button>\n }\n </ion-col>\n <ion-col size=\"4\"></ion-col>\n <ion-col size=\"4\" class=\"ion-text-end\">\n <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\" fill=\"clear\" *ngIf=\"mobile; else desktop\">\n <ion-icon slot=\"start\" name=\"close\"></ion-icon>\n {{ 'COMMON.BTN_CLOSE' | translate }}\n </ion-button>\n <ng-template #desktop>\n <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\">\n {{ 'COMMON.BTN_CLOSE' | translate }}\n </ion-button>\n </ng-template>\n </ion-col>\n </ion-row>\n } @else {\n <!-- A crop or rotation change is pending: ask for an explicit validation before exporting the image -->\n <ion-row>\n <ion-col size=\"12\" class=\"ion-text-end\">\n <ion-button\n (click)=\"discardEdit(swiperContainer)\"\n color=\"dark\"\n fill=\"clear\"\n [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_CANCEL_EDIT' | translate) : ''\"\n [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_CANCEL_EDIT' | translate) : ''\"\n >\n <ion-icon slot=\"start\" name=\"arrow-undo\"></ion-icon>\n {{ 'COMMON.BTN_CANCEL' | translate }}\n </ion-button>\n <ion-button (click)=\"validateEdit(swiperContainer)\" color=\"danger\">\n <ion-icon slot=\"start\" name=\"checkmark\"></ion-icon>\n {{ 'COMMON.BTN_VALIDATE' | translate }}\n </ion-button>\n </ion-col>\n </ion-row>\n }\n </ion-toolbar>\n</ion-footer>\n\n<ng-template #slideTemplate let-image=\"image\" let-index=\"index\">\n <swiper-slide>\n <div class=\"swiper-zoom-container\" [class.cdk-visually-hidden]=\"!_swiper && index !== selectedIndex\">\n\n <!-- the image -->\n @if (image?.url) {\n <ion-img class=\"swiper-zoom-target\" [src]=\"image.url | appendQueryParams: getImageSizeQueryParams()\" />\n } @else {\n <img [src]=\"image.dataUrl\" [alt]=\"image.title\" />\n }\n\n <!-- crop overlay: only rendered for the active slide -->\n @if (!readOnly && enableCrop && _cropToolActive && index === activeSlideIndex) {\n <div\n class=\"crop-overlay\"\n (mousedown)=\"onCropPointerDown($event, swiperContainer, 'move')\"\n (touchstart)=\"onCropPointerDown($event, swiperContainer, 'move')\"\n >\n <!-- darkened mask around the selection: clipped to the image bounds -->\n <div class=\"crop-mask\">\n <div\n class=\"crop-mask-rect\"\n [style.left.%]=\"_cropRect.x * 100\"\n [style.top.%]=\"_cropRect.y * 100\"\n [style.width.%]=\"_cropRect.width * 100\"\n [style.height.%]=\"_cropRect.height * 100\"\n ></div>\n </div>\n\n <!-- interactive selection border, grid & drag handles: never clipped, so corner/edge handles\n remain fully grabbable even when the selection touches the image bounds -->\n <div\n class=\"crop-rect\"\n [style.left.%]=\"_cropRect.x * 100\"\n [style.top.%]=\"_cropRect.y * 100\"\n [style.width.%]=\"_cropRect.width * 100\"\n [style.height.%]=\"_cropRect.height * 100\"\n >\n <div class=\"crop-grid\">\n <span class=\"line v\" style=\"left: 33.333%\"></span>\n <span class=\"line v\" style=\"left: 66.666%\"></span>\n <span class=\"line h\" style=\"top: 33.333%\"></span>\n <span class=\"line h\" style=\"top: 66.666%\"></span>\n </div>\n @for (handle of _cropHandles; track handle) {\n <div\n class=\"crop-handle {{ handle }}\"\n (mousedown)=\"onCropPointerDown($event, swiperContainer, handle)\"\n (touchstart)=\"onCropPointerDown($event, swiperContainer, handle)\"\n ></div>\n }\n </div>\n </div>\n }\n </div>\n </swiper-slide>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;height:100%;-webkit-user-select:none;user-select:none}:host ion-content{flex:1 1 auto}:host .top-left{z-index:14;position:absolute;display:inline-grid;left:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .top-right{z-index:14;position:absolute;display:inline-grid;right:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .side-buttons{--side-buttons-width: 120px;--side-buttons-margin: calc(var(--side-buttons-width) / 3);z-index:13;position:absolute;top:0;bottom:0;width:var(--side-buttons-width)}:host .side-buttons ion-icon{top:50%;color:#fff;background:#00000080;padding:4px;border-radius:50%;font-size:2.5rem;position:absolute;opacity:0;transition-duration:.15s;transition-timing-function:ease-in}:host .side-buttons:hover{cursor:pointer}:host .side-buttons:hover ion-icon{opacity:1}:host .side-buttons.prev{left:0}:host .side-buttons.prev ion-icon{left:var(--side-buttons-margin)}:host .side-buttons.next{right:0}:host .side-buttons.next ion-icon{right:var(--side-buttons-margin)}:host .side-buttons.disabled{pointer-events:none}:host swiper-container{height:100%;background:#000}:host .swiper-zoom-container{position:relative}:host ion-fab-button .icon-secondary{top:11px;left:6px;height:14px}:host .crop-overlay{position:absolute;z-index:15;cursor:move;touch-action:none;animation:crop-overlay-fade-in .15s ease-in}:host .crop-overlay .crop-mask{position:absolute;inset:0;overflow:hidden;pointer-events:none}:host .crop-overlay .crop-mask .crop-mask-rect{position:absolute;box-shadow:0 0 0 2000px #0009}:host .crop-overlay .crop-rect{position:absolute;box-sizing:border-box;border:1px solid rgba(255,255,255,.95);cursor:move;touch-action:none}:host .crop-overlay .crop-rect .crop-grid{position:absolute;inset:0;pointer-events:none}:host .crop-overlay .crop-rect .crop-grid .line{position:absolute;background:#ffffff73}:host .crop-overlay .crop-rect .crop-grid .line.v{top:0;bottom:0;width:1px}:host .crop-overlay .crop-rect .crop-grid .line.h{left:0;right:0;height:1px}:host .crop-overlay .crop-rect .crop-handle{position:absolute;width:16px;height:16px;margin:-8px;background:#fff;border:1px solid rgba(0,0,0,.45);border-radius:50%;box-shadow:0 1px 4px #00000080;transition:transform .12s ease;touch-action:none}:host .crop-overlay .crop-rect .crop-handle:hover{transform:scale(1.3)}:host .crop-overlay .crop-rect .crop-handle.nw{left:0;top:0;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.n{left:50%;top:0;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.ne{left:100%;top:0;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.e{left:100%;top:50%;cursor:ew-resize}:host .crop-overlay .crop-rect .crop-handle.se{left:100%;top:100%;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.s{left:50%;top:100%;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.sw{left:0;top:100%;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.w{left:0;top:50%;cursor:ew-resize}@keyframes crop-overlay-fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
29316
|
+
args: [{ selector: 'app-image-gallery-slideshow', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-content\n class=\"ion-no-padding ion-no-margin\"\n (mousedown)=\"onPointerDown($event, swiperContainer)\"\n (mousemove)=\"onPointerMove($event, swiperContainer)\"\n (mouseup)=\"onPointerUp($event, swiperContainer)\"\n (mouseleave)=\"onPointerUp($event, swiperContainer)\"\n (touchmove)=\"onCropPointerMove($event, swiperContainer)\"\n (touchend)=\"onCropPointerUp($event, swiperContainer)\"\n (touchcancel)=\"onCropPointerUp($event, swiperContainer)\"\n>\n @let count = rows?.length || 0;\n <!-- Counter -->\n <div class=\"top-left\">\n <ion-label color=\"light\">{{ _activeIndex + 1 }} / {{ count }}</ion-label>\n </div>\n\n <!-- zoom / rotation / crop buttons: all shown together, no \"enter edit mode\" step needed -->\n <div class=\"top-right\">\n @if (!mobile) {\n <ion-fab-button size=\"small\" (click)=\"zoom(swiperContainer, true)\" color=\"light\">\n <ion-icon name=\"search\"></ion-icon>\n <ion-icon class=\"icon-secondary\" name=\"add\"></ion-icon>\n </ion-fab-button>\n <ion-fab-button size=\"small\" (click)=\"zoom(swiperContainer, false)\" color=\"light\">\n <ion-icon name=\"search\"></ion-icon>\n <ion-icon class=\"icon-secondary\" name=\"remove\"></ion-icon>\n </ion-fab-button>\n }\n @if (!readOnly && enableRotate) {\n <ion-fab-button\n size=\"small\"\n (click)=\"rotate(swiperContainer, 'left')\"\n color=\"light\"\n [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n >\n <mat-icon>rotate_left</mat-icon>\n </ion-fab-button>\n <ion-fab-button\n size=\"small\"\n (click)=\"rotate(swiperContainer, 'right')\"\n color=\"light\"\n [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n >\n <mat-icon>rotate_right</mat-icon>\n </ion-fab-button>\n }\n @if (!readOnly && enableCrop) {\n <ion-fab-button\n size=\"small\"\n (click)=\"toggleCropTool(swiperContainer)\"\n [color]=\"_cropToolActive ? 'tertiary' : 'light'\"\n [title]=\"\n !showTooltip\n ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n : ''\n \"\n [matTooltip]=\"\n showTooltip\n ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n : ''\n \"\n >\n <mat-icon>crop</mat-icon>\n </ion-fab-button>\n @if (_cropToolActive) {\n <ion-fab-button\n size=\"small\"\n (click)=\"resetCrop(swiperContainer)\"\n color=\"light\"\n [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n >\n <mat-icon>crop_free</mat-icon>\n </ion-fab-button>\n }\n }\n </div>\n\n <!-- navigation side buttons next/back: hidden while a crop/rotation edit is pending, to keep the focus on validating/cancelling it -->\n <ng-container *ngIf=\"!mobile && !hasPendingEdit && (rows | isArrayLength: { greaterThan: 1 })\">\n <div class=\"side-buttons prev\" [class.disabled]=\"isPrevDisabled\" (click)=\"slidePrev(swiperContainer)\">\n <ion-icon name=\"chevron-back\"></ion-icon>\n </div>\n <div class=\"side-buttons next\" [class.disabled]=\"isNextDisabled\" (click)=\"slideNext(swiperContainer)\">\n <ion-icon name=\"chevron-forward\"></ion-icon>\n </div>\n </ng-container>\n\n <!-- image slides -->\n <swiper-container\n #swiperContainer\n [modules]=\"swiperModules\"\n [zoom]=\"!enableMouseZoom\"\n [initialSlide]=\"selectedIndex\"\n (swiperslidechange)=\"onSlideChange(swiperContainer)\"\n (swiperinit)=\"onSwiperInit(swiperContainer)\"\n >\n @for (row of rows; track row.id; let index = $index) {\n <ng-container *ngTemplateOutlet=\"slideTemplate; context: { image: row.currentData, index }\"></ng-container>\n }\n </swiper-container>\n</ion-content>\n\n<ion-footer>\n <ion-toolbar color=\"light\">\n @if (!hasPendingEdit) {\n <ion-row>\n <ion-col size=\"4\" class=\"ion-text-start\">\n @if (!readOnly) {\n <ion-button\n (click)=\"requestDelete(swiperContainer)\"\n [disabled]=\"disabled\"\n fill=\"clear\"\n color=\"danger\"\n >\n <mat-icon slot=\"start\">delete</mat-icon>\n {{ 'COMMON.BTN_DELETE' | translate }}\n </ion-button>\n }\n </ion-col>\n <ion-col size=\"4\"></ion-col>\n <ion-col size=\"4\" class=\"ion-text-end\">\n <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\" fill=\"clear\" *ngIf=\"mobile; else desktop\">\n <ion-icon slot=\"start\" name=\"close\"></ion-icon>\n {{ 'COMMON.BTN_CLOSE' | translate }}\n </ion-button>\n <ng-template #desktop>\n <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\">\n {{ 'COMMON.BTN_CLOSE' | translate }}\n </ion-button>\n </ng-template>\n </ion-col>\n </ion-row>\n } @else {\n <!-- A crop or rotation change is pending: ask for an explicit validation before exporting the image -->\n <ion-row>\n <ion-col size=\"12\" class=\"ion-text-end\">\n <ion-button\n (click)=\"discardEdit(swiperContainer)\"\n color=\"dark\"\n fill=\"clear\"\n [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_CANCEL_EDIT' | translate) : ''\"\n [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_CANCEL_EDIT' | translate) : ''\"\n >\n <ion-icon slot=\"start\" name=\"arrow-undo\"></ion-icon>\n {{ 'COMMON.BTN_CANCEL' | translate }}\n </ion-button>\n <ion-button (click)=\"validateEdit(swiperContainer)\" color=\"danger\">\n <ion-icon slot=\"start\" name=\"checkmark\"></ion-icon>\n {{ 'COMMON.BTN_VALIDATE' | translate }}\n </ion-button>\n </ion-col>\n </ion-row>\n }\n </ion-toolbar>\n</ion-footer>\n\n<ng-template #slideTemplate let-image=\"image\" let-index=\"index\">\n <swiper-slide>\n <div class=\"swiper-zoom-container\" [class.cdk-visually-hidden]=\"!_swiper && index !== selectedIndex\">\n\n <!-- the image -->\n @if (image?.url) {\n <ion-img class=\"swiper-zoom-target\" [src]=\"image.url | appendQueryParams: getImageSizeQueryParams()\" />\n } @else {\n <img [src]=\"image.dataUrl\" [alt]=\"image.title\" />\n }\n\n <!-- crop overlay: only rendered for the active slide -->\n @if (!readOnly && enableCrop && _cropToolActive && index === _activeIndex) {\n <div\n class=\"crop-overlay\"\n (mousedown)=\"onCropPointerDown($event, swiperContainer, 'move')\"\n (touchstart)=\"onCropPointerDown($event, swiperContainer, 'move')\"\n >\n <!-- darkened mask around the selection: clipped to the image bounds -->\n <div class=\"crop-mask\">\n <div\n class=\"crop-mask-rect\"\n [style.left.%]=\"_cropRect.x * 100\"\n [style.top.%]=\"_cropRect.y * 100\"\n [style.width.%]=\"_cropRect.width * 100\"\n [style.height.%]=\"_cropRect.height * 100\"\n ></div>\n </div>\n\n <!-- interactive selection border, grid & drag handles: never clipped, so corner/edge handles\n remain fully grabbable even when the selection touches the image bounds -->\n <div\n class=\"crop-rect\"\n [style.left.%]=\"_cropRect.x * 100\"\n [style.top.%]=\"_cropRect.y * 100\"\n [style.width.%]=\"_cropRect.width * 100\"\n [style.height.%]=\"_cropRect.height * 100\"\n >\n <div class=\"crop-grid\">\n <span class=\"line v\" style=\"left: 33.333%\"></span>\n <span class=\"line v\" style=\"left: 66.666%\"></span>\n <span class=\"line h\" style=\"top: 33.333%\"></span>\n <span class=\"line h\" style=\"top: 66.666%\"></span>\n </div>\n @for (handle of _cropHandles; track handle) {\n <div\n class=\"crop-handle {{ handle }}\"\n (mousedown)=\"onCropPointerDown($event, swiperContainer, handle)\"\n (touchstart)=\"onCropPointerDown($event, swiperContainer, handle)\"\n ></div>\n }\n </div>\n </div>\n }\n </div>\n </swiper-slide>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;height:100%;-webkit-user-select:none;user-select:none}:host ion-content{flex:1 1 auto}:host .top-left{z-index:14;position:absolute;display:inline-grid;left:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .top-right{z-index:14;position:absolute;display:inline-grid;right:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .side-buttons{--side-buttons-width: 120px;--side-buttons-margin: calc(var(--side-buttons-width) / 3);z-index:13;position:absolute;top:0;bottom:0;width:var(--side-buttons-width)}:host .side-buttons ion-icon{top:50%;color:#fff;background:#00000080;padding:4px;border-radius:50%;font-size:2.5rem;position:absolute;opacity:0;transition-duration:.15s;transition-timing-function:ease-in}:host .side-buttons:hover{cursor:pointer}:host .side-buttons:hover ion-icon{opacity:1}:host .side-buttons.prev{left:0}:host .side-buttons.prev ion-icon{left:var(--side-buttons-margin)}:host .side-buttons.next{right:0}:host .side-buttons.next ion-icon{right:var(--side-buttons-margin)}:host .side-buttons.disabled{pointer-events:none}:host swiper-container{height:100%;background:#000}:host .swiper-zoom-container{position:relative}:host ion-fab-button .icon-secondary{top:11px;left:6px;height:14px}:host .crop-overlay{position:absolute;z-index:15;cursor:move;touch-action:none;animation:crop-overlay-fade-in .15s ease-in}:host .crop-overlay .crop-mask{position:absolute;inset:0;overflow:hidden;pointer-events:none}:host .crop-overlay .crop-mask .crop-mask-rect{position:absolute;box-shadow:0 0 0 2000px #0009}:host .crop-overlay .crop-rect{position:absolute;box-sizing:border-box;border:1px solid rgba(255,255,255,.95);cursor:move;touch-action:none}:host .crop-overlay .crop-rect .crop-grid{position:absolute;inset:0;pointer-events:none}:host .crop-overlay .crop-rect .crop-grid .line{position:absolute;background:#ffffff73}:host .crop-overlay .crop-rect .crop-grid .line.v{top:0;bottom:0;width:1px}:host .crop-overlay .crop-rect .crop-grid .line.h{left:0;right:0;height:1px}:host .crop-overlay .crop-rect .crop-handle{position:absolute;width:16px;height:16px;margin:-8px;background:#fff;border:1px solid rgba(0,0,0,.45);border-radius:50%;box-shadow:0 1px 4px #00000080;transition:transform .12s ease;touch-action:none}:host .crop-overlay .crop-rect .crop-handle:hover{transform:scale(1.3)}:host .crop-overlay .crop-rect .crop-handle.nw{left:0;top:0;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.n{left:50%;top:0;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.ne{left:100%;top:0;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.e{left:100%;top:50%;cursor:ew-resize}:host .crop-overlay .crop-rect .crop-handle.se{left:100%;top:100%;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.s{left:50%;top:100%;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.sw{left:0;top:100%;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.w{left:0;top:50%;cursor:ew-resize}@keyframes crop-overlay-fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
29310
29317
|
}], ctorParameters: () => [{ type: i2$1.AlertController }, { type: i1$1.TranslateService }, { type: i0.ChangeDetectorRef }], propDecorators: { rows: [{
|
|
29311
29318
|
type: Input
|
|
29312
29319
|
}], selectedIndex: [{
|
|
@@ -29497,6 +29504,7 @@ class AppImageGalleryComponent {
|
|
|
29497
29504
|
_titleForm;
|
|
29498
29505
|
_titleAutofocus = false;
|
|
29499
29506
|
_slidesSubscription;
|
|
29507
|
+
_showTooltip = inject(APP_SHOW_TOOLTIP, { optional: true });
|
|
29500
29508
|
zoomActive = false;
|
|
29501
29509
|
zoomScale = 1;
|
|
29502
29510
|
/** Whether the inline slideshow overlay is currently shown (only relevant when zoomPresentation === 'inline'). */
|
|
@@ -29597,7 +29605,12 @@ class AppImageGalleryComponent {
|
|
|
29597
29605
|
fetchMore = createPromiseEventEmitter();
|
|
29598
29606
|
slideshowOpened = new EventEmitter();
|
|
29599
29607
|
slideshowClosed = new EventEmitter();
|
|
29600
|
-
|
|
29608
|
+
get activeIndex() {
|
|
29609
|
+
if (!this.inlineSlideshow)
|
|
29610
|
+
throw new Error('Cannot get slide active index while inline slideshow is open');
|
|
29611
|
+
return this.inlineSlideshow.activeIndex;
|
|
29612
|
+
}
|
|
29613
|
+
inlineSlideshow;
|
|
29601
29614
|
constructor(imageService, platform, alterCtrl, translate, cd, environment) {
|
|
29602
29615
|
this.imageService = imageService;
|
|
29603
29616
|
this.platform = platform;
|
|
@@ -29689,6 +29702,16 @@ class AppImageGalleryComponent {
|
|
|
29689
29702
|
this.markForCheck();
|
|
29690
29703
|
}
|
|
29691
29704
|
}
|
|
29705
|
+
slideNext() {
|
|
29706
|
+
if (!this.inlineSlideshow)
|
|
29707
|
+
throw new Error('Cannot slide previous while inline slideshow is open');
|
|
29708
|
+
return this.inlineSlideshow.slideNext();
|
|
29709
|
+
}
|
|
29710
|
+
slidePrev() {
|
|
29711
|
+
if (!this.inlineSlideshow)
|
|
29712
|
+
throw new Error('Cannot slide previous while inline slideshow is open');
|
|
29713
|
+
return this.inlineSlideshow.slidePrev();
|
|
29714
|
+
}
|
|
29692
29715
|
trackByFn(index, row) {
|
|
29693
29716
|
return row.id;
|
|
29694
29717
|
}
|
|
@@ -29864,11 +29887,11 @@ class AppImageGalleryComponent {
|
|
|
29864
29887
|
this.cd.markForCheck();
|
|
29865
29888
|
}
|
|
29866
29889
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppImageGalleryComponent, deps: [{ token: ImageService }, { token: i2$1.Platform }, { token: i2$1.AlertController }, { token: i1$1.TranslateService }, { token: i0.ChangeDetectorRef }, { token: ENVIRONMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
29867
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AppImageGalleryComponent, selector: "app-image-gallery", inputs: { cardColor: "cardColor", debug: ["debug", "debug", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute], mobile: ["mobile", "mobile", booleanAttribute], mode: "mode", confirmBeforeDelete: "confirmBeforeDelete", showToolbar: ["showToolbar", "showToolbar", booleanAttribute], showFabButton: ["showFabButton", "showFabButton", booleanAttribute], showTitle: ["showTitle", "showTitle", booleanAttribute], showAddToolbarButton: ["showAddToolbarButton", "showAddToolbarButton", booleanAttribute], showAddTextButton: ["showAddTextButton", "showAddTextButton", booleanAttribute], showAddCardButton: ["showAddCardButton", "showAddCardButton", booleanAttribute], showCardToolbar: ["showCardToolbar", "showCardToolbar", booleanAttribute], addButtonColor: "addButtonColor", addButtonText: "addButtonText", cardTemplate: "cardTemplate", imageSizes: "imageSizes", imageSizeQueryParam: "imageSizeQueryParam", enableMouseZoom: ["enableMouseZoom", "enableMouseZoom", booleanAttribute], wheelZoomStep: "wheelZoomStep", maxZoomRatio: "maxZoomRatio", enableRotate: ["enableRotate", "enableRotate", booleanAttribute], enableCrop: ["enableCrop", "enableCrop", booleanAttribute], editionFormat: "editionFormat", editionQuality: "editionQuality", slideshowMode: "slideshowMode", inlineZoomHeight: "inlineZoomHeight", enableSlideshowLoop: ["enableSlideshowLoop", "enableSlideshowLoop", booleanAttribute], canFetchMore: ["canFetchMore", "canFetchMore", booleanAttribute], dataSource: "dataSource" }, outputs: { onBeforeDeleteRows: "onBeforeDeleteRows", onAfterAddRows: "onAfterAddRows", onAfterEditRow: "onAfterEditRow", onAfterEditImage: "onAfterEditImage", cardClicked: "clickCard", previousSlide: "previousSlide", nextSlide: "nextSlide", fetchMore: "fetchMore", slideshowOpened: "slideshowOpened", slideshowClosed: "slideshowClosed" }, viewQueries: [{ propertyName: "zoomModal", first: true, predicate: ["zoomModal"], descendants: true }, { propertyName: "titlePopover", first: true, predicate: ["titlePopover"], descendants: true }], ngImport: i0, template: "@if (showToolbar && !isInlineSlideshowOpen) {\n <ion-toolbar color=\"light\" class=\"gallery-toolbar\">\n <ng-content select=\"ion-buttons[slot=start]\"></ng-content>\n\n <!-- Add -->\n @if (!readOnly && showAddToolbarButton && enabled) {\n <button\n mat-icon-button\n [title]=\"!showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n [matTooltip]=\"showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n (click)=\"add()\"\n >\n <mat-icon>add</mat-icon>\n </button>\n }\n\n <ng-content select=\"ion-buttons[slot=end]\"></ng-content>\n\n <ion-buttons slot=\"end\">\n <!-- Toggle view mode -->\n <ion-segment (ionChange)=\"toggleViewMode($event)\" color=\"accent\" [value]=\"_colSize\">\n <ion-segment-button [value]=\"4\">\n <mat-icon>view_module</mat-icon>\n </ion-segment-button>\n <ion-segment-button [value]=\"12\">\n <mat-icon>view_list</mat-icon>\n </ion-segment-button>\n </ion-segment>\n </ion-buttons>\n </ion-toolbar>\n}\n\n<div\n class=\"gallery-container ion-padding-bottom {{ mode }}\"\n [class.inline-zoom-active]=\"isInlineSlideshowOpen\"\n [style.--inline-zoom-height]=\"inlineZoomHeight\"\n>\n @if (mobile && zoomActive) {\n <div class=\"backdrop\" [style.opacity]=\"zoomScale\"></div>\n }\n\n <ion-grid class=\"ion-no-padding\" [class.cdk-visually-hidden]=\"isInlineSlideshowOpen\">\n <ion-row>\n <ion-col *rxFor=\"let row of _data$; trackBy: trackByFn\" [size]=\"_colSize\">\n @let image = row | propertyGet: 'currentData';\n @if (cardTemplate) {\n <ng-container\n *ngTemplateOutlet=\"cardTemplate; context: { $implicit: row, mode: mode, image: image }\"\n ></ng-container>\n } @else {\n <ion-card\n #card\n class=\"image-card\"\n [class.zoom-hover]=\"!mobile\"\n [color]=\"cardColor\"\n (click)=\"clickCard($event, row)\"\n tappable\n @fadeInAnimation\n >\n <figure class=\"card-thumbnail\">\n @if (image.url) {\n <ion-img [src]=\"image.url | appendQueryParams: getImageSizeQueryParams()\" />\n } @else {\n <ion-img [src]=\"image.dataUrl\" />\n }\n </figure>\n\n <!-- toolbar for title (when not hover) -->\n @if (showTitle && image.title) {\n <ion-toolbar color=\"transparent\" class=\"title\">\n <ion-label class=\"card-title\">{{ image.title }}</ion-label>\n </ion-toolbar>\n }\n\n <!-- action toolbar shown when hover image -->\n @if (!readOnly && !mobile && showCardToolbar) {\n <ion-toolbar #cardToolbar color=\"light\" class=\"buttons\">\n <!-- edit title button -->\n @if (showTitle) {\n <button\n mat-button\n slot=\"start\"\n [disabled]=\"disabled\"\n (click)=\"editTitle($event, row, cardToolbar)\"\n (focusin)=\"focusCardToolbar(cardToolbar)\"\n >\n <mat-icon>edit</mat-icon>\n <mat-label>\n @if (row.currentData.title | isNotNilOrBlank) {\n <span translate>IMAGE.GALLERY.BTN_EDIT_TITLE</span>\n } @else {\n <span translate>IMAGE.GALLERY.BTN_ADD_TITLE</span>\n }\n </mat-label>\n </button>\n }\n\n <div class=\"flex-spacer\"></div>\n\n <!-- delete button -->\n <button\n mat-icon-button\n slot=\"end\"\n class=\"ion-float-end\"\n [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n [disabled]=\"disabled\"\n (click)=\"delete($event, row)\"\n >\n <mat-icon>delete</mat-icon>\n </button>\n </ion-toolbar>\n }\n </ion-card>\n }\n </ion-col>\n\n <!-- add button -->\n @if ((showAddTextButton || showAddCardButton) && !readOnly) {\n <ion-col [size]=\"_colSize\" @fadeInAnimation>\n @if (showAddTextButton) {\n <ion-button (click)=\"add($event)\" [disabled]=\"disabled\" [color]=\"addButtonColor\">\n <mat-label>{{ addButtonText | translate }}</mat-label>\n <ion-icon slot=\"end\" name=\"camera\"></ion-icon>\n </ion-button>\n } @else if (showAddCardButton) {\n <ion-card\n class=\"image-card-button\"\n color=\"light\"\n (click)=\"add($event)\"\n [disabled]=\"disabled\"\n [title]=\"!showTooltip ? (addButtonText | translate) : ''\"\n [matTooltip]=\"showTooltip ? (addButtonText | translate) : ''\"\n tappable\n >\n <ion-card-content>\n <div class=\"icon-container\">\n <ion-icon name=\"camera\" [color]=\"addButtonColor\"></ion-icon>\n <ion-icon name=\"add\" [color]=\"addButtonColor\" class=\"icon-secondary\"></ion-icon>\n </div>\n </ion-card-content>\n </ion-card>\n }\n </ion-col>\n }\n </ion-row>\n </ion-grid>\n\n <!-- Inline slideshow: shown as an overlay directly within the gallery, instead of a full-screen modal.\n The rest of the page (outside the gallery) stays fully visible and usable, unlike the modal's backdrop. -->\n @if (isInlineSlideshowOpen) {\n <app-image-gallery-slideshow\n class=\"inline-overlay\"\n [rows]=\"rows\"\n [selectedIndex]=\"_selectedRowIndex\"\n [mobile]=\"mobile\"\n [readOnly]=\"readOnly\"\n [disabled]=\"disabled\"\n [enableMouseZoom]=\"enableMouseZoom\"\n [wheelZoomStep]=\"wheelZoomStep\"\n [maxZoomRatio]=\"maxZoomRatio\"\n [enableRotate]=\"enableRotate\"\n [enableCrop]=\"enableCrop\"\n [enableLoop]=\"enableSlideshowLoop\"\n [editionFormat]=\"editionFormat\"\n [editionQuality]=\"editionQuality\"\n [imageSizeQueryParam]=\"imageSizeQueryParam\"\n [modalImageSize]=\"imageSizes?.modal\"\n (deleteRequested)=\"onSlideshowDeleteRequested($event)\"\n (closeRequested)=\"closeSlideshow()\"\n (afterEditImage)=\"onAfterEditImage.emit($event)\"\n (afterEditRow)=\"onAfterEditRow.emit($event)\"\n (previousSlide)=\"previousSlide.emit($event)\"\n (nextSlide)=\"nextSlide.emit($event)\"\n [canFetchMore]=\"canFetchMore\"\n (fetchMore)=\"fetchMore.emit($event)\"\n [debug]=\"debug\"\n ></app-image-gallery-slideshow>\n }\n</div>\n\n<!-- FAB button: add -->\n@if (showFabButton && !readOnly) {\n <ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" [class.cdk-visually-hidden]=\"disabled\" @fadeInOutAnimation>\n <ion-fab-button color=\"tertiary\" (click)=\"add($event)\">\n <ion-icon name=\"camera\"></ion-icon>\n <ion-icon name=\"add\" class=\"icon-secondary\" style=\"left: 33px; top: 9px; font-size: 20px\"></ion-icon>\n </ion-fab-button>\n </ion-fab>\n}\n\n<!-- Zoom modal -->\n@if (slideshowMode === 'modal') {\n <ion-modal #zoomModal class=\"stack-modal zoom-modal\" [class.modal-fullscreen]=\"mobile\" [class.modal-large]=\"!mobile\">\n <ng-template>\n <app-image-gallery-slideshow\n [rows]=\"rows\"\n [selectedIndex]=\"_selectedRowIndex\"\n [mobile]=\"mobile\"\n [readOnly]=\"readOnly\"\n [disabled]=\"disabled\"\n [debug]=\"debug\"\n [enableMouseZoom]=\"enableMouseZoom\"\n [wheelZoomStep]=\"wheelZoomStep\"\n [maxZoomRatio]=\"maxZoomRatio\"\n [enableRotate]=\"enableRotate\"\n [enableCrop]=\"enableCrop\"\n [enableLoop]=\"enableSlideshowLoop\"\n [editionFormat]=\"editionFormat\"\n [editionQuality]=\"editionQuality\"\n [imageSizeQueryParam]=\"imageSizeQueryParam\"\n [modalImageSize]=\"imageSizes?.modal\"\n (deleteRequested)=\"onSlideshowDeleteRequested($event)\"\n (closeRequested)=\"closeSlideshow()\"\n (afterEditImage)=\"onAfterEditImage.emit($event)\"\n (afterEditRow)=\"onAfterEditRow.emit($event)\"\n (previousSlide)=\"previousSlide.emit($event)\"\n (nextSlide)=\"nextSlide.emit($event)\"\n [canFetchMore]=\"canFetchMore\"\n (fetchMore)=\"fetchMore.emit($event)\"\n ></app-image-gallery-slideshow>\n </ng-template>\n </ion-modal>\n}\n\n<ion-popover #titlePopover>\n <ng-template>\n <ion-content class=\"ion-padding\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n <form [formGroup]=\"_titleForm\">\n <mat-form-field floatLabel=\"auto\">\n <mat-label translate>IMAGE.GALLERY.TITLE</mat-label>\n <input\n matInput\n formControlName=\"title\"\n [readonly]=\"disabled\"\n [appAutofocus]=\"_titleAutofocus\"\n (keydown.control.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n />\n </mat-form-field>\n </form>\n </ion-content>\n\n <ion-footer>\n <ion-toolbar>\n <ion-row class=\"ion-no-padding\" nowrap>\n <ion-col></ion-col>\n\n <ion-col size=\"auto\">\n <ion-button fill=\"clear\" color=\"dark\" (click)=\"titlePopover.dismiss(null, 'CANCEL')\">\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n <ion-button\n [fill]=\"disabled ? 'clear' : 'solid'\"\n (click)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n (keyup.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n color=\"tertiary\"\n [disabled]=\"disabled\"\n [title]=\"!showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n [matTooltip]=\"showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n >\n <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n </ion-button>\n </ion-col>\n </ion-row>\n </ion-toolbar>\n </ion-footer>\n </ng-template>\n</ion-popover>\n", styles: [":host{--image-margin-inline: 10px;--image-margin-safe-area: var(--image-margin-inline, 0px) * 2 - 3px;--segment-max-width: 150px}ion-toolbar{position:sticky;top:0}ion-toolbar ion-segment{max-width:var(--segment-max-width)}mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}ion-card{margin-left:unset;margin-right:unset;margin-inline:var(--image-margin-inline, 10px)}.image-slide{overflow:visible}.image-card{background-color:var(--ion-color-base);z-index:9;--img-scale: 1}.image-card .card-thumbnail{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:100%;height:100%;max-height:var(--img-max-height, calc(100% - var(--image-margin-safe-area, 0px)))}.image-card .card-thumbnail>ion-img{min-height:100%;height:100%;object-fit:cover;object-position:center;transition:scale .2s ease-in-out;scale:var(--img-scale)}.image-card .card-thumbnail>ion-img img{max-height:var(--img-max-height)}.image-card.zoom-hover:hover{--img-scale: 1.2}.image-card ion-toolbar{--top-offset: calc(-1 * var(--ion-toolbar-height));position:absolute}.image-card ion-toolbar.title{--padding-start: 16px;--padding-end: 16px;--ion-color-base: rgba(0, 0, 0, .45) !important;position:absolute;top:calc(100% + var(--top-offset));transition:opacity .2s ease-in-out}.image-card ion-toolbar.title ion-label{color:#fff}.image-card ion-toolbar.buttons{--padding-start: 4px;--padding-end: 4px;--ion-color-base: var(--ion-color-light) !important;position:absolute;top:100%;transition:transform .2s ease-in-out}.image-card:hover ion-toolbar.buttons,.image-card ion-toolbar.buttons.focused{transform:translateY(var(--top-offset))}.image-card-button{height:calc(100% - var(--image-margin-safe-area, 0px));max-height:max(min(30vh,200px),var(--img-max-height, 0px));transition:.2s ease-in-out;max-width:250px}.image-card-button ion-card-content{height:100%}.image-card-button .icon-container{height:auto;position:relative;top:calc(50% - 75px);display:flex;align-items:center;justify-content:center}.image-card-button ion-icon:first-of-type{font-size:150px;height:150px;position:relative;top:0}.image-card-button ion-icon.icon-secondary{font-size:50px;position:absolute;top:0;left:max(min(50% + 25px,100% - 50px),0px)}.image-card-button ion-button{float:right}.image-card-button:hover{--ion-color-base: var(--ion-color-shade) !important}.image-card-button:hover ion-icon{--ion-color-base: var(--ion-color-shade) !important}.backdrop{height:100vh;width:100vw;background:#000;position:absolute;z-index:10}.gallery-container{position:relative}.gallery-container.inline-zoom-active{min-height:var(--inline-zoom-height, 60vh)}.inline-overlay{position:absolute;inset:0;z-index:20;background:#000}\n"], dependencies: [{ kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { kind: "component", type: i2$1.IonSegmentButton, selector: "ion-segment-button", inputs: ["disabled", "layout", "mode", "type", "value"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonModal, selector: "ion-modal" }, { kind: "component", type: i2$1.IonPopover, selector: "ion-popover" }, { kind: "directive", type: i2$1.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1$6.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i13$3.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "component", type: AppImageGallerySlideshowComponent, selector: "app-image-gallery-slideshow", inputs: ["rows", "selectedIndex", "mobile", "readOnly", "disabled", "debug", "enableMouseZoom", "wheelZoomStep", "maxZoomRatio", "enableRotate", "enableCrop", "editionFormat", "editionQuality", "imageSizeQueryParam", "modalImageSize", "enableLoop", "canFetchMore"], outputs: ["deleteRequested", "closeRequested", "afterEditImage", "afterEditRow", "previousSlide", "nextSlide", "fetchMore"] }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }, { kind: "pipe", type: AppendQueryParamsPipePipe, name: "appendQueryParams" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
29890
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AppImageGalleryComponent, selector: "app-image-gallery", inputs: { cardColor: "cardColor", debug: ["debug", "debug", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute], mobile: ["mobile", "mobile", booleanAttribute], mode: "mode", confirmBeforeDelete: "confirmBeforeDelete", showToolbar: ["showToolbar", "showToolbar", booleanAttribute], showFabButton: ["showFabButton", "showFabButton", booleanAttribute], showTitle: ["showTitle", "showTitle", booleanAttribute], showAddToolbarButton: ["showAddToolbarButton", "showAddToolbarButton", booleanAttribute], showAddTextButton: ["showAddTextButton", "showAddTextButton", booleanAttribute], showAddCardButton: ["showAddCardButton", "showAddCardButton", booleanAttribute], showCardToolbar: ["showCardToolbar", "showCardToolbar", booleanAttribute], addButtonColor: "addButtonColor", addButtonText: "addButtonText", cardTemplate: "cardTemplate", imageSizes: "imageSizes", imageSizeQueryParam: "imageSizeQueryParam", enableMouseZoom: ["enableMouseZoom", "enableMouseZoom", booleanAttribute], wheelZoomStep: "wheelZoomStep", maxZoomRatio: "maxZoomRatio", enableRotate: ["enableRotate", "enableRotate", booleanAttribute], enableCrop: ["enableCrop", "enableCrop", booleanAttribute], editionFormat: "editionFormat", editionQuality: "editionQuality", slideshowMode: "slideshowMode", inlineZoomHeight: "inlineZoomHeight", enableSlideshowLoop: ["enableSlideshowLoop", "enableSlideshowLoop", booleanAttribute], canFetchMore: ["canFetchMore", "canFetchMore", booleanAttribute], dataSource: "dataSource" }, outputs: { onBeforeDeleteRows: "onBeforeDeleteRows", onAfterAddRows: "onAfterAddRows", onAfterEditRow: "onAfterEditRow", onAfterEditImage: "onAfterEditImage", cardClicked: "clickCard", previousSlide: "previousSlide", nextSlide: "nextSlide", fetchMore: "fetchMore", slideshowOpened: "slideshowOpened", slideshowClosed: "slideshowClosed" }, viewQueries: [{ propertyName: "zoomModal", first: true, predicate: ["zoomModal"], descendants: true }, { propertyName: "titlePopover", first: true, predicate: ["titlePopover"], descendants: true }, { propertyName: "inlineSlideshow", first: true, predicate: ["inlineSlideshow"], descendants: true }], ngImport: i0, template: "@if (showToolbar && !isInlineSlideshowOpen) {\n <ion-toolbar color=\"light\" class=\"gallery-toolbar\">\n <ng-content select=\"ion-buttons[slot=start]\"></ng-content>\n\n <!-- Add -->\n @if (!readOnly && showAddToolbarButton && enabled) {\n <button\n mat-icon-button\n [title]=\"!_showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n [matTooltip]=\"_showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n (click)=\"add()\"\n >\n <mat-icon>add</mat-icon>\n </button>\n }\n\n <ng-content select=\"ion-buttons[slot=end]\"></ng-content>\n\n <ion-buttons slot=\"end\">\n <!-- Toggle view mode -->\n <ion-segment (ionChange)=\"toggleViewMode($event)\" color=\"accent\" [value]=\"_colSize\">\n <ion-segment-button [value]=\"4\">\n <mat-icon>view_module</mat-icon>\n </ion-segment-button>\n <ion-segment-button [value]=\"12\">\n <mat-icon>view_list</mat-icon>\n </ion-segment-button>\n </ion-segment>\n </ion-buttons>\n </ion-toolbar>\n}\n\n<div\n class=\"gallery-container ion-padding-bottom {{ mode }}\"\n [class.inline-zoom-active]=\"isInlineSlideshowOpen\"\n [style.--inline-zoom-height]=\"inlineZoomHeight\"\n>\n @if (mobile && zoomActive) {\n <div class=\"backdrop\" [style.opacity]=\"zoomScale\"></div>\n }\n\n <ion-grid class=\"ion-no-padding\" [class.cdk-visually-hidden]=\"isInlineSlideshowOpen\">\n <ion-row>\n <ion-col *rxFor=\"let row of _data$; trackBy: trackByFn\" [size]=\"_colSize\">\n @let image = row | propertyGet: 'currentData';\n @if (cardTemplate) {\n <ng-container\n *ngTemplateOutlet=\"cardTemplate; context: { $implicit: row, mode: mode, image: image }\"\n ></ng-container>\n } @else {\n <ion-card\n #card\n class=\"image-card\"\n [class.zoom-hover]=\"!mobile\"\n [color]=\"cardColor\"\n (click)=\"clickCard($event, row)\"\n tappable\n @fadeInAnimation\n >\n <figure class=\"card-thumbnail\">\n @if (image.url) {\n <ion-img [src]=\"image.url | appendQueryParams: getImageSizeQueryParams()\" />\n } @else {\n <ion-img [src]=\"image.dataUrl\" />\n }\n </figure>\n\n <!-- toolbar for title (when not hover) -->\n @if (showTitle && image.title) {\n <ion-toolbar color=\"transparent\" class=\"title\">\n <ion-label class=\"card-title\">{{ image.title }}</ion-label>\n </ion-toolbar>\n }\n\n <!-- action toolbar shown when hover image -->\n @if (!readOnly && !mobile && showCardToolbar) {\n <ion-toolbar #cardToolbar color=\"light\" class=\"buttons\">\n <!-- edit title button -->\n @if (showTitle) {\n <button\n mat-button\n slot=\"start\"\n [disabled]=\"disabled\"\n (click)=\"editTitle($event, row, cardToolbar)\"\n (focusin)=\"focusCardToolbar(cardToolbar)\"\n >\n <mat-icon>edit</mat-icon>\n <mat-label>\n @if (row.currentData.title | isNotNilOrBlank) {\n <span translate>IMAGE.GALLERY.BTN_EDIT_TITLE</span>\n } @else {\n <span translate>IMAGE.GALLERY.BTN_ADD_TITLE</span>\n }\n </mat-label>\n </button>\n }\n\n <div class=\"flex-spacer\"></div>\n\n <!-- delete button -->\n <button\n mat-icon-button\n slot=\"end\"\n class=\"ion-float-end\"\n [title]=\"!_showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n [matTooltip]=\"_showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n [disabled]=\"disabled\"\n (click)=\"delete($event, row)\"\n >\n <mat-icon>delete</mat-icon>\n </button>\n </ion-toolbar>\n }\n </ion-card>\n }\n </ion-col>\n\n <!-- add button -->\n @if ((showAddTextButton || showAddCardButton) && !readOnly) {\n <ion-col [size]=\"_colSize\" @fadeInAnimation>\n @if (showAddTextButton) {\n <ion-button (click)=\"add($event)\" [disabled]=\"disabled\" [color]=\"addButtonColor\">\n <mat-label>{{ addButtonText | translate }}</mat-label>\n <ion-icon slot=\"end\" name=\"camera\"></ion-icon>\n </ion-button>\n } @else if (showAddCardButton) {\n <ion-card\n class=\"image-card-button\"\n color=\"light\"\n (click)=\"add($event)\"\n [disabled]=\"disabled\"\n [title]=\"!_showTooltip ? (addButtonText | translate) : ''\"\n [matTooltip]=\"_showTooltip ? (addButtonText | translate) : ''\"\n tappable\n >\n <ion-card-content>\n <div class=\"icon-container\">\n <ion-icon name=\"camera\" [color]=\"addButtonColor\"></ion-icon>\n <ion-icon name=\"add\" [color]=\"addButtonColor\" class=\"icon-secondary\"></ion-icon>\n </div>\n </ion-card-content>\n </ion-card>\n }\n </ion-col>\n }\n </ion-row>\n </ion-grid>\n\n <!-- Inline slideshow: shown as an overlay directly within the gallery, instead of a full-screen modal.\n The rest of the page (outside the gallery) stays fully visible and usable, unlike the modal's backdrop. -->\n @if (isInlineSlideshowOpen) {\n <app-image-gallery-slideshow #inlineSlideshow\n class=\"inline-overlay\"\n [rows]=\"rows\"\n [selectedIndex]=\"_selectedRowIndex\"\n [mobile]=\"mobile\"\n [readOnly]=\"readOnly\"\n [disabled]=\"disabled\"\n [enableMouseZoom]=\"enableMouseZoom\"\n [wheelZoomStep]=\"wheelZoomStep\"\n [maxZoomRatio]=\"maxZoomRatio\"\n [enableRotate]=\"enableRotate\"\n [enableCrop]=\"enableCrop\"\n [enableLoop]=\"enableSlideshowLoop\"\n [editionFormat]=\"editionFormat\"\n [editionQuality]=\"editionQuality\"\n [imageSizeQueryParam]=\"imageSizeQueryParam\"\n [modalImageSize]=\"imageSizes?.modal\"\n (deleteRequested)=\"onSlideshowDeleteRequested($event)\"\n (closeRequested)=\"closeSlideshow()\"\n (afterEditImage)=\"onAfterEditImage.emit($event)\"\n (afterEditRow)=\"onAfterEditRow.emit($event)\"\n (previousSlide)=\"previousSlide.emit($event)\"\n (nextSlide)=\"nextSlide.emit($event)\"\n [canFetchMore]=\"canFetchMore\"\n (fetchMore)=\"fetchMore.emit($event)\"\n [debug]=\"debug\"\n ></app-image-gallery-slideshow>\n }\n</div>\n\n<!-- FAB button: add -->\n@if (showFabButton && !readOnly) {\n <ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" [class.cdk-visually-hidden]=\"disabled\" @fadeInOutAnimation>\n <ion-fab-button color=\"tertiary\" (click)=\"add($event)\">\n <ion-icon name=\"camera\"></ion-icon>\n <ion-icon name=\"add\" class=\"icon-secondary\" style=\"left: 33px; top: 9px; font-size: 20px\"></ion-icon>\n </ion-fab-button>\n </ion-fab>\n}\n\n<!-- Zoom modal -->\n@if (slideshowMode === 'modal') {\n <ion-modal #zoomModal class=\"stack-modal zoom-modal\" [class.modal-fullscreen]=\"mobile\" [class.modal-large]=\"!mobile\">\n <ng-template>\n <app-image-gallery-slideshow\n [rows]=\"rows\"\n [selectedIndex]=\"_selectedRowIndex\"\n [mobile]=\"mobile\"\n [readOnly]=\"readOnly\"\n [disabled]=\"disabled\"\n [debug]=\"debug\"\n [enableMouseZoom]=\"enableMouseZoom\"\n [wheelZoomStep]=\"wheelZoomStep\"\n [maxZoomRatio]=\"maxZoomRatio\"\n [enableRotate]=\"enableRotate\"\n [enableCrop]=\"enableCrop\"\n [enableLoop]=\"enableSlideshowLoop\"\n [editionFormat]=\"editionFormat\"\n [editionQuality]=\"editionQuality\"\n [imageSizeQueryParam]=\"imageSizeQueryParam\"\n [modalImageSize]=\"imageSizes?.modal\"\n (deleteRequested)=\"onSlideshowDeleteRequested($event)\"\n (closeRequested)=\"closeSlideshow()\"\n (afterEditImage)=\"onAfterEditImage.emit($event)\"\n (afterEditRow)=\"onAfterEditRow.emit($event)\"\n (previousSlide)=\"previousSlide.emit($event)\"\n (nextSlide)=\"nextSlide.emit($event)\"\n [canFetchMore]=\"canFetchMore\"\n (fetchMore)=\"fetchMore.emit($event)\"\n ></app-image-gallery-slideshow>\n </ng-template>\n </ion-modal>\n}\n\n<ion-popover #titlePopover>\n <ng-template>\n <ion-content class=\"ion-padding\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n <form [formGroup]=\"_titleForm\">\n <mat-form-field floatLabel=\"auto\">\n <mat-label translate>IMAGE.GALLERY.TITLE</mat-label>\n <input\n matInput\n formControlName=\"title\"\n [readonly]=\"disabled\"\n [appAutofocus]=\"_titleAutofocus\"\n (keydown.control.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n />\n </mat-form-field>\n </form>\n </ion-content>\n\n <ion-footer>\n <ion-toolbar>\n <ion-row class=\"ion-no-padding\" nowrap>\n <ion-col></ion-col>\n\n <ion-col size=\"auto\">\n <ion-button fill=\"clear\" color=\"dark\" (click)=\"titlePopover.dismiss(null, 'CANCEL')\">\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n <ion-button\n [fill]=\"disabled ? 'clear' : 'solid'\"\n (click)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n (keyup.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n color=\"tertiary\"\n [disabled]=\"disabled\"\n [title]=\"!_showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n [matTooltip]=\"_showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n >\n <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n </ion-button>\n </ion-col>\n </ion-row>\n </ion-toolbar>\n </ion-footer>\n </ng-template>\n</ion-popover>\n", styles: [":host{--image-margin-inline: 10px;--image-margin-safe-area: var(--image-margin-inline, 0px) * 2 - 3px;--segment-max-width: 150px}ion-toolbar{position:sticky;top:0}ion-toolbar ion-segment{max-width:var(--segment-max-width)}mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}ion-card{margin-left:unset;margin-right:unset;margin-inline:var(--image-margin-inline, 10px)}.image-slide{overflow:visible}.image-card{background-color:var(--ion-color-base);z-index:9;--img-scale: 1}.image-card .card-thumbnail{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:100%;height:100%;max-height:var(--img-max-height, calc(100% - var(--image-margin-safe-area, 0px)))}.image-card .card-thumbnail>ion-img{min-height:100%;height:100%;object-fit:cover;object-position:center;transition:scale .2s ease-in-out;scale:var(--img-scale)}.image-card .card-thumbnail>ion-img img{max-height:var(--img-max-height)}.image-card.zoom-hover:hover{--img-scale: 1.2}.image-card ion-toolbar{--top-offset: calc(-1 * var(--ion-toolbar-height));position:absolute}.image-card ion-toolbar.title{--padding-start: 16px;--padding-end: 16px;--ion-color-base: rgba(0, 0, 0, .45) !important;position:absolute;top:calc(100% + var(--top-offset));transition:opacity .2s ease-in-out}.image-card ion-toolbar.title ion-label{color:#fff}.image-card ion-toolbar.buttons{--padding-start: 4px;--padding-end: 4px;--ion-color-base: var(--ion-color-light) !important;position:absolute;top:100%;transition:transform .2s ease-in-out}.image-card:hover ion-toolbar.buttons,.image-card ion-toolbar.buttons.focused{transform:translateY(var(--top-offset))}.image-card-button{height:calc(100% - var(--image-margin-safe-area, 0px));max-height:max(min(30vh,200px),var(--img-max-height, 0px));transition:.2s ease-in-out;max-width:250px}.image-card-button ion-card-content{height:100%}.image-card-button .icon-container{height:auto;position:relative;top:calc(50% - 75px);display:flex;align-items:center;justify-content:center}.image-card-button ion-icon:first-of-type{font-size:150px;height:150px;position:relative;top:0}.image-card-button ion-icon.icon-secondary{font-size:50px;position:absolute;top:0;left:max(min(50% + 25px,100% - 50px),0px)}.image-card-button ion-button{float:right}.image-card-button:hover{--ion-color-base: var(--ion-color-shade) !important}.image-card-button:hover ion-icon{--ion-color-base: var(--ion-color-shade) !important}.backdrop{height:100vh;width:100vw;background:#000;position:absolute;z-index:10}.gallery-container{position:relative}.gallery-container.inline-zoom-active{min-height:var(--inline-zoom-height, 60vh)}.inline-overlay{position:absolute;inset:0;z-index:20;background:#000}\n"], dependencies: [{ kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { kind: "component", type: i2$1.IonSegmentButton, selector: "ion-segment-button", inputs: ["disabled", "layout", "mode", "type", "value"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonModal, selector: "ion-modal" }, { kind: "component", type: i2$1.IonPopover, selector: "ion-popover" }, { kind: "directive", type: i2$1.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1$6.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i13$3.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "component", type: AppImageGallerySlideshowComponent, selector: "app-image-gallery-slideshow", inputs: ["rows", "selectedIndex", "mobile", "readOnly", "disabled", "debug", "enableMouseZoom", "wheelZoomStep", "maxZoomRatio", "enableRotate", "enableCrop", "editionFormat", "editionQuality", "imageSizeQueryParam", "modalImageSize", "enableLoop", "canFetchMore"], outputs: ["deleteRequested", "closeRequested", "afterEditImage", "afterEditRow", "previousSlide", "nextSlide", "fetchMore"] }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }, { kind: "pipe", type: AppendQueryParamsPipePipe, name: "appendQueryParams" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
29868
29891
|
}
|
|
29869
29892
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppImageGalleryComponent, decorators: [{
|
|
29870
29893
|
type: Component,
|
|
29871
|
-
args: [{ selector: 'app-image-gallery', animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showToolbar && !isInlineSlideshowOpen) {\n <ion-toolbar color=\"light\" class=\"gallery-toolbar\">\n <ng-content select=\"ion-buttons[slot=start]\"></ng-content>\n\n <!-- Add -->\n @if (!readOnly && showAddToolbarButton && enabled) {\n <button\n mat-icon-button\n [title]=\"!showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n [matTooltip]=\"showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n (click)=\"add()\"\n >\n <mat-icon>add</mat-icon>\n </button>\n }\n\n <ng-content select=\"ion-buttons[slot=end]\"></ng-content>\n\n <ion-buttons slot=\"end\">\n <!-- Toggle view mode -->\n <ion-segment (ionChange)=\"toggleViewMode($event)\" color=\"accent\" [value]=\"_colSize\">\n <ion-segment-button [value]=\"4\">\n <mat-icon>view_module</mat-icon>\n </ion-segment-button>\n <ion-segment-button [value]=\"12\">\n <mat-icon>view_list</mat-icon>\n </ion-segment-button>\n </ion-segment>\n </ion-buttons>\n </ion-toolbar>\n}\n\n<div\n class=\"gallery-container ion-padding-bottom {{ mode }}\"\n [class.inline-zoom-active]=\"isInlineSlideshowOpen\"\n [style.--inline-zoom-height]=\"inlineZoomHeight\"\n>\n @if (mobile && zoomActive) {\n <div class=\"backdrop\" [style.opacity]=\"zoomScale\"></div>\n }\n\n <ion-grid class=\"ion-no-padding\" [class.cdk-visually-hidden]=\"isInlineSlideshowOpen\">\n <ion-row>\n <ion-col *rxFor=\"let row of _data$; trackBy: trackByFn\" [size]=\"_colSize\">\n @let image = row | propertyGet: 'currentData';\n @if (cardTemplate) {\n <ng-container\n *ngTemplateOutlet=\"cardTemplate; context: { $implicit: row, mode: mode, image: image }\"\n ></ng-container>\n } @else {\n <ion-card\n #card\n class=\"image-card\"\n [class.zoom-hover]=\"!mobile\"\n [color]=\"cardColor\"\n (click)=\"clickCard($event, row)\"\n tappable\n @fadeInAnimation\n >\n <figure class=\"card-thumbnail\">\n @if (image.url) {\n <ion-img [src]=\"image.url | appendQueryParams: getImageSizeQueryParams()\" />\n } @else {\n <ion-img [src]=\"image.dataUrl\" />\n }\n </figure>\n\n <!-- toolbar for title (when not hover) -->\n @if (showTitle && image.title) {\n <ion-toolbar color=\"transparent\" class=\"title\">\n <ion-label class=\"card-title\">{{ image.title }}</ion-label>\n </ion-toolbar>\n }\n\n <!-- action toolbar shown when hover image -->\n @if (!readOnly && !mobile && showCardToolbar) {\n <ion-toolbar #cardToolbar color=\"light\" class=\"buttons\">\n <!-- edit title button -->\n @if (showTitle) {\n <button\n mat-button\n slot=\"start\"\n [disabled]=\"disabled\"\n (click)=\"editTitle($event, row, cardToolbar)\"\n (focusin)=\"focusCardToolbar(cardToolbar)\"\n >\n <mat-icon>edit</mat-icon>\n <mat-label>\n @if (row.currentData.title | isNotNilOrBlank) {\n <span translate>IMAGE.GALLERY.BTN_EDIT_TITLE</span>\n } @else {\n <span translate>IMAGE.GALLERY.BTN_ADD_TITLE</span>\n }\n </mat-label>\n </button>\n }\n\n <div class=\"flex-spacer\"></div>\n\n <!-- delete button -->\n <button\n mat-icon-button\n slot=\"end\"\n class=\"ion-float-end\"\n [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n [disabled]=\"disabled\"\n (click)=\"delete($event, row)\"\n >\n <mat-icon>delete</mat-icon>\n </button>\n </ion-toolbar>\n }\n </ion-card>\n }\n </ion-col>\n\n <!-- add button -->\n @if ((showAddTextButton || showAddCardButton) && !readOnly) {\n <ion-col [size]=\"_colSize\" @fadeInAnimation>\n @if (showAddTextButton) {\n <ion-button (click)=\"add($event)\" [disabled]=\"disabled\" [color]=\"addButtonColor\">\n <mat-label>{{ addButtonText | translate }}</mat-label>\n <ion-icon slot=\"end\" name=\"camera\"></ion-icon>\n </ion-button>\n } @else if (showAddCardButton) {\n <ion-card\n class=\"image-card-button\"\n color=\"light\"\n (click)=\"add($event)\"\n [disabled]=\"disabled\"\n [title]=\"!showTooltip ? (addButtonText | translate) : ''\"\n [matTooltip]=\"showTooltip ? (addButtonText | translate) : ''\"\n tappable\n >\n <ion-card-content>\n <div class=\"icon-container\">\n <ion-icon name=\"camera\" [color]=\"addButtonColor\"></ion-icon>\n <ion-icon name=\"add\" [color]=\"addButtonColor\" class=\"icon-secondary\"></ion-icon>\n </div>\n </ion-card-content>\n </ion-card>\n }\n </ion-col>\n }\n </ion-row>\n </ion-grid>\n\n <!-- Inline slideshow: shown as an overlay directly within the gallery, instead of a full-screen modal.\n The rest of the page (outside the gallery) stays fully visible and usable, unlike the modal's backdrop. -->\n @if (isInlineSlideshowOpen) {\n <app-image-gallery-slideshow\n class=\"inline-overlay\"\n [rows]=\"rows\"\n [selectedIndex]=\"_selectedRowIndex\"\n [mobile]=\"mobile\"\n [readOnly]=\"readOnly\"\n [disabled]=\"disabled\"\n [enableMouseZoom]=\"enableMouseZoom\"\n [wheelZoomStep]=\"wheelZoomStep\"\n [maxZoomRatio]=\"maxZoomRatio\"\n [enableRotate]=\"enableRotate\"\n [enableCrop]=\"enableCrop\"\n [enableLoop]=\"enableSlideshowLoop\"\n [editionFormat]=\"editionFormat\"\n [editionQuality]=\"editionQuality\"\n [imageSizeQueryParam]=\"imageSizeQueryParam\"\n [modalImageSize]=\"imageSizes?.modal\"\n (deleteRequested)=\"onSlideshowDeleteRequested($event)\"\n (closeRequested)=\"closeSlideshow()\"\n (afterEditImage)=\"onAfterEditImage.emit($event)\"\n (afterEditRow)=\"onAfterEditRow.emit($event)\"\n (previousSlide)=\"previousSlide.emit($event)\"\n (nextSlide)=\"nextSlide.emit($event)\"\n [canFetchMore]=\"canFetchMore\"\n (fetchMore)=\"fetchMore.emit($event)\"\n [debug]=\"debug\"\n ></app-image-gallery-slideshow>\n }\n</div>\n\n<!-- FAB button: add -->\n@if (showFabButton && !readOnly) {\n <ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" [class.cdk-visually-hidden]=\"disabled\" @fadeInOutAnimation>\n <ion-fab-button color=\"tertiary\" (click)=\"add($event)\">\n <ion-icon name=\"camera\"></ion-icon>\n <ion-icon name=\"add\" class=\"icon-secondary\" style=\"left: 33px; top: 9px; font-size: 20px\"></ion-icon>\n </ion-fab-button>\n </ion-fab>\n}\n\n<!-- Zoom modal -->\n@if (slideshowMode === 'modal') {\n <ion-modal #zoomModal class=\"stack-modal zoom-modal\" [class.modal-fullscreen]=\"mobile\" [class.modal-large]=\"!mobile\">\n <ng-template>\n <app-image-gallery-slideshow\n [rows]=\"rows\"\n [selectedIndex]=\"_selectedRowIndex\"\n [mobile]=\"mobile\"\n [readOnly]=\"readOnly\"\n [disabled]=\"disabled\"\n [debug]=\"debug\"\n [enableMouseZoom]=\"enableMouseZoom\"\n [wheelZoomStep]=\"wheelZoomStep\"\n [maxZoomRatio]=\"maxZoomRatio\"\n [enableRotate]=\"enableRotate\"\n [enableCrop]=\"enableCrop\"\n [enableLoop]=\"enableSlideshowLoop\"\n [editionFormat]=\"editionFormat\"\n [editionQuality]=\"editionQuality\"\n [imageSizeQueryParam]=\"imageSizeQueryParam\"\n [modalImageSize]=\"imageSizes?.modal\"\n (deleteRequested)=\"onSlideshowDeleteRequested($event)\"\n (closeRequested)=\"closeSlideshow()\"\n (afterEditImage)=\"onAfterEditImage.emit($event)\"\n (afterEditRow)=\"onAfterEditRow.emit($event)\"\n (previousSlide)=\"previousSlide.emit($event)\"\n (nextSlide)=\"nextSlide.emit($event)\"\n [canFetchMore]=\"canFetchMore\"\n (fetchMore)=\"fetchMore.emit($event)\"\n ></app-image-gallery-slideshow>\n </ng-template>\n </ion-modal>\n}\n\n<ion-popover #titlePopover>\n <ng-template>\n <ion-content class=\"ion-padding\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n <form [formGroup]=\"_titleForm\">\n <mat-form-field floatLabel=\"auto\">\n <mat-label translate>IMAGE.GALLERY.TITLE</mat-label>\n <input\n matInput\n formControlName=\"title\"\n [readonly]=\"disabled\"\n [appAutofocus]=\"_titleAutofocus\"\n (keydown.control.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n />\n </mat-form-field>\n </form>\n </ion-content>\n\n <ion-footer>\n <ion-toolbar>\n <ion-row class=\"ion-no-padding\" nowrap>\n <ion-col></ion-col>\n\n <ion-col size=\"auto\">\n <ion-button fill=\"clear\" color=\"dark\" (click)=\"titlePopover.dismiss(null, 'CANCEL')\">\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n <ion-button\n [fill]=\"disabled ? 'clear' : 'solid'\"\n (click)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n (keyup.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n color=\"tertiary\"\n [disabled]=\"disabled\"\n [title]=\"!showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n [matTooltip]=\"showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n >\n <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n </ion-button>\n </ion-col>\n </ion-row>\n </ion-toolbar>\n </ion-footer>\n </ng-template>\n</ion-popover>\n", styles: [":host{--image-margin-inline: 10px;--image-margin-safe-area: var(--image-margin-inline, 0px) * 2 - 3px;--segment-max-width: 150px}ion-toolbar{position:sticky;top:0}ion-toolbar ion-segment{max-width:var(--segment-max-width)}mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}ion-card{margin-left:unset;margin-right:unset;margin-inline:var(--image-margin-inline, 10px)}.image-slide{overflow:visible}.image-card{background-color:var(--ion-color-base);z-index:9;--img-scale: 1}.image-card .card-thumbnail{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:100%;height:100%;max-height:var(--img-max-height, calc(100% - var(--image-margin-safe-area, 0px)))}.image-card .card-thumbnail>ion-img{min-height:100%;height:100%;object-fit:cover;object-position:center;transition:scale .2s ease-in-out;scale:var(--img-scale)}.image-card .card-thumbnail>ion-img img{max-height:var(--img-max-height)}.image-card.zoom-hover:hover{--img-scale: 1.2}.image-card ion-toolbar{--top-offset: calc(-1 * var(--ion-toolbar-height));position:absolute}.image-card ion-toolbar.title{--padding-start: 16px;--padding-end: 16px;--ion-color-base: rgba(0, 0, 0, .45) !important;position:absolute;top:calc(100% + var(--top-offset));transition:opacity .2s ease-in-out}.image-card ion-toolbar.title ion-label{color:#fff}.image-card ion-toolbar.buttons{--padding-start: 4px;--padding-end: 4px;--ion-color-base: var(--ion-color-light) !important;position:absolute;top:100%;transition:transform .2s ease-in-out}.image-card:hover ion-toolbar.buttons,.image-card ion-toolbar.buttons.focused{transform:translateY(var(--top-offset))}.image-card-button{height:calc(100% - var(--image-margin-safe-area, 0px));max-height:max(min(30vh,200px),var(--img-max-height, 0px));transition:.2s ease-in-out;max-width:250px}.image-card-button ion-card-content{height:100%}.image-card-button .icon-container{height:auto;position:relative;top:calc(50% - 75px);display:flex;align-items:center;justify-content:center}.image-card-button ion-icon:first-of-type{font-size:150px;height:150px;position:relative;top:0}.image-card-button ion-icon.icon-secondary{font-size:50px;position:absolute;top:0;left:max(min(50% + 25px,100% - 50px),0px)}.image-card-button ion-button{float:right}.image-card-button:hover{--ion-color-base: var(--ion-color-shade) !important}.image-card-button:hover ion-icon{--ion-color-base: var(--ion-color-shade) !important}.backdrop{height:100vh;width:100vw;background:#000;position:absolute;z-index:10}.gallery-container{position:relative}.gallery-container.inline-zoom-active{min-height:var(--inline-zoom-height, 60vh)}.inline-overlay{position:absolute;inset:0;z-index:20;background:#000}\n"] }]
|
|
29894
|
+
args: [{ selector: 'app-image-gallery', animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showToolbar && !isInlineSlideshowOpen) {\n <ion-toolbar color=\"light\" class=\"gallery-toolbar\">\n <ng-content select=\"ion-buttons[slot=start]\"></ng-content>\n\n <!-- Add -->\n @if (!readOnly && showAddToolbarButton && enabled) {\n <button\n mat-icon-button\n [title]=\"!_showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n [matTooltip]=\"_showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n (click)=\"add()\"\n >\n <mat-icon>add</mat-icon>\n </button>\n }\n\n <ng-content select=\"ion-buttons[slot=end]\"></ng-content>\n\n <ion-buttons slot=\"end\">\n <!-- Toggle view mode -->\n <ion-segment (ionChange)=\"toggleViewMode($event)\" color=\"accent\" [value]=\"_colSize\">\n <ion-segment-button [value]=\"4\">\n <mat-icon>view_module</mat-icon>\n </ion-segment-button>\n <ion-segment-button [value]=\"12\">\n <mat-icon>view_list</mat-icon>\n </ion-segment-button>\n </ion-segment>\n </ion-buttons>\n </ion-toolbar>\n}\n\n<div\n class=\"gallery-container ion-padding-bottom {{ mode }}\"\n [class.inline-zoom-active]=\"isInlineSlideshowOpen\"\n [style.--inline-zoom-height]=\"inlineZoomHeight\"\n>\n @if (mobile && zoomActive) {\n <div class=\"backdrop\" [style.opacity]=\"zoomScale\"></div>\n }\n\n <ion-grid class=\"ion-no-padding\" [class.cdk-visually-hidden]=\"isInlineSlideshowOpen\">\n <ion-row>\n <ion-col *rxFor=\"let row of _data$; trackBy: trackByFn\" [size]=\"_colSize\">\n @let image = row | propertyGet: 'currentData';\n @if (cardTemplate) {\n <ng-container\n *ngTemplateOutlet=\"cardTemplate; context: { $implicit: row, mode: mode, image: image }\"\n ></ng-container>\n } @else {\n <ion-card\n #card\n class=\"image-card\"\n [class.zoom-hover]=\"!mobile\"\n [color]=\"cardColor\"\n (click)=\"clickCard($event, row)\"\n tappable\n @fadeInAnimation\n >\n <figure class=\"card-thumbnail\">\n @if (image.url) {\n <ion-img [src]=\"image.url | appendQueryParams: getImageSizeQueryParams()\" />\n } @else {\n <ion-img [src]=\"image.dataUrl\" />\n }\n </figure>\n\n <!-- toolbar for title (when not hover) -->\n @if (showTitle && image.title) {\n <ion-toolbar color=\"transparent\" class=\"title\">\n <ion-label class=\"card-title\">{{ image.title }}</ion-label>\n </ion-toolbar>\n }\n\n <!-- action toolbar shown when hover image -->\n @if (!readOnly && !mobile && showCardToolbar) {\n <ion-toolbar #cardToolbar color=\"light\" class=\"buttons\">\n <!-- edit title button -->\n @if (showTitle) {\n <button\n mat-button\n slot=\"start\"\n [disabled]=\"disabled\"\n (click)=\"editTitle($event, row, cardToolbar)\"\n (focusin)=\"focusCardToolbar(cardToolbar)\"\n >\n <mat-icon>edit</mat-icon>\n <mat-label>\n @if (row.currentData.title | isNotNilOrBlank) {\n <span translate>IMAGE.GALLERY.BTN_EDIT_TITLE</span>\n } @else {\n <span translate>IMAGE.GALLERY.BTN_ADD_TITLE</span>\n }\n </mat-label>\n </button>\n }\n\n <div class=\"flex-spacer\"></div>\n\n <!-- delete button -->\n <button\n mat-icon-button\n slot=\"end\"\n class=\"ion-float-end\"\n [title]=\"!_showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n [matTooltip]=\"_showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n [disabled]=\"disabled\"\n (click)=\"delete($event, row)\"\n >\n <mat-icon>delete</mat-icon>\n </button>\n </ion-toolbar>\n }\n </ion-card>\n }\n </ion-col>\n\n <!-- add button -->\n @if ((showAddTextButton || showAddCardButton) && !readOnly) {\n <ion-col [size]=\"_colSize\" @fadeInAnimation>\n @if (showAddTextButton) {\n <ion-button (click)=\"add($event)\" [disabled]=\"disabled\" [color]=\"addButtonColor\">\n <mat-label>{{ addButtonText | translate }}</mat-label>\n <ion-icon slot=\"end\" name=\"camera\"></ion-icon>\n </ion-button>\n } @else if (showAddCardButton) {\n <ion-card\n class=\"image-card-button\"\n color=\"light\"\n (click)=\"add($event)\"\n [disabled]=\"disabled\"\n [title]=\"!_showTooltip ? (addButtonText | translate) : ''\"\n [matTooltip]=\"_showTooltip ? (addButtonText | translate) : ''\"\n tappable\n >\n <ion-card-content>\n <div class=\"icon-container\">\n <ion-icon name=\"camera\" [color]=\"addButtonColor\"></ion-icon>\n <ion-icon name=\"add\" [color]=\"addButtonColor\" class=\"icon-secondary\"></ion-icon>\n </div>\n </ion-card-content>\n </ion-card>\n }\n </ion-col>\n }\n </ion-row>\n </ion-grid>\n\n <!-- Inline slideshow: shown as an overlay directly within the gallery, instead of a full-screen modal.\n The rest of the page (outside the gallery) stays fully visible and usable, unlike the modal's backdrop. -->\n @if (isInlineSlideshowOpen) {\n <app-image-gallery-slideshow #inlineSlideshow\n class=\"inline-overlay\"\n [rows]=\"rows\"\n [selectedIndex]=\"_selectedRowIndex\"\n [mobile]=\"mobile\"\n [readOnly]=\"readOnly\"\n [disabled]=\"disabled\"\n [enableMouseZoom]=\"enableMouseZoom\"\n [wheelZoomStep]=\"wheelZoomStep\"\n [maxZoomRatio]=\"maxZoomRatio\"\n [enableRotate]=\"enableRotate\"\n [enableCrop]=\"enableCrop\"\n [enableLoop]=\"enableSlideshowLoop\"\n [editionFormat]=\"editionFormat\"\n [editionQuality]=\"editionQuality\"\n [imageSizeQueryParam]=\"imageSizeQueryParam\"\n [modalImageSize]=\"imageSizes?.modal\"\n (deleteRequested)=\"onSlideshowDeleteRequested($event)\"\n (closeRequested)=\"closeSlideshow()\"\n (afterEditImage)=\"onAfterEditImage.emit($event)\"\n (afterEditRow)=\"onAfterEditRow.emit($event)\"\n (previousSlide)=\"previousSlide.emit($event)\"\n (nextSlide)=\"nextSlide.emit($event)\"\n [canFetchMore]=\"canFetchMore\"\n (fetchMore)=\"fetchMore.emit($event)\"\n [debug]=\"debug\"\n ></app-image-gallery-slideshow>\n }\n</div>\n\n<!-- FAB button: add -->\n@if (showFabButton && !readOnly) {\n <ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" [class.cdk-visually-hidden]=\"disabled\" @fadeInOutAnimation>\n <ion-fab-button color=\"tertiary\" (click)=\"add($event)\">\n <ion-icon name=\"camera\"></ion-icon>\n <ion-icon name=\"add\" class=\"icon-secondary\" style=\"left: 33px; top: 9px; font-size: 20px\"></ion-icon>\n </ion-fab-button>\n </ion-fab>\n}\n\n<!-- Zoom modal -->\n@if (slideshowMode === 'modal') {\n <ion-modal #zoomModal class=\"stack-modal zoom-modal\" [class.modal-fullscreen]=\"mobile\" [class.modal-large]=\"!mobile\">\n <ng-template>\n <app-image-gallery-slideshow\n [rows]=\"rows\"\n [selectedIndex]=\"_selectedRowIndex\"\n [mobile]=\"mobile\"\n [readOnly]=\"readOnly\"\n [disabled]=\"disabled\"\n [debug]=\"debug\"\n [enableMouseZoom]=\"enableMouseZoom\"\n [wheelZoomStep]=\"wheelZoomStep\"\n [maxZoomRatio]=\"maxZoomRatio\"\n [enableRotate]=\"enableRotate\"\n [enableCrop]=\"enableCrop\"\n [enableLoop]=\"enableSlideshowLoop\"\n [editionFormat]=\"editionFormat\"\n [editionQuality]=\"editionQuality\"\n [imageSizeQueryParam]=\"imageSizeQueryParam\"\n [modalImageSize]=\"imageSizes?.modal\"\n (deleteRequested)=\"onSlideshowDeleteRequested($event)\"\n (closeRequested)=\"closeSlideshow()\"\n (afterEditImage)=\"onAfterEditImage.emit($event)\"\n (afterEditRow)=\"onAfterEditRow.emit($event)\"\n (previousSlide)=\"previousSlide.emit($event)\"\n (nextSlide)=\"nextSlide.emit($event)\"\n [canFetchMore]=\"canFetchMore\"\n (fetchMore)=\"fetchMore.emit($event)\"\n ></app-image-gallery-slideshow>\n </ng-template>\n </ion-modal>\n}\n\n<ion-popover #titlePopover>\n <ng-template>\n <ion-content class=\"ion-padding\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n <form [formGroup]=\"_titleForm\">\n <mat-form-field floatLabel=\"auto\">\n <mat-label translate>IMAGE.GALLERY.TITLE</mat-label>\n <input\n matInput\n formControlName=\"title\"\n [readonly]=\"disabled\"\n [appAutofocus]=\"_titleAutofocus\"\n (keydown.control.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n />\n </mat-form-field>\n </form>\n </ion-content>\n\n <ion-footer>\n <ion-toolbar>\n <ion-row class=\"ion-no-padding\" nowrap>\n <ion-col></ion-col>\n\n <ion-col size=\"auto\">\n <ion-button fill=\"clear\" color=\"dark\" (click)=\"titlePopover.dismiss(null, 'CANCEL')\">\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n <ion-button\n [fill]=\"disabled ? 'clear' : 'solid'\"\n (click)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n (keyup.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n color=\"tertiary\"\n [disabled]=\"disabled\"\n [title]=\"!_showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n [matTooltip]=\"_showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n >\n <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n </ion-button>\n </ion-col>\n </ion-row>\n </ion-toolbar>\n </ion-footer>\n </ng-template>\n</ion-popover>\n", styles: [":host{--image-margin-inline: 10px;--image-margin-safe-area: var(--image-margin-inline, 0px) * 2 - 3px;--segment-max-width: 150px}ion-toolbar{position:sticky;top:0}ion-toolbar ion-segment{max-width:var(--segment-max-width)}mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}ion-card{margin-left:unset;margin-right:unset;margin-inline:var(--image-margin-inline, 10px)}.image-slide{overflow:visible}.image-card{background-color:var(--ion-color-base);z-index:9;--img-scale: 1}.image-card .card-thumbnail{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:100%;height:100%;max-height:var(--img-max-height, calc(100% - var(--image-margin-safe-area, 0px)))}.image-card .card-thumbnail>ion-img{min-height:100%;height:100%;object-fit:cover;object-position:center;transition:scale .2s ease-in-out;scale:var(--img-scale)}.image-card .card-thumbnail>ion-img img{max-height:var(--img-max-height)}.image-card.zoom-hover:hover{--img-scale: 1.2}.image-card ion-toolbar{--top-offset: calc(-1 * var(--ion-toolbar-height));position:absolute}.image-card ion-toolbar.title{--padding-start: 16px;--padding-end: 16px;--ion-color-base: rgba(0, 0, 0, .45) !important;position:absolute;top:calc(100% + var(--top-offset));transition:opacity .2s ease-in-out}.image-card ion-toolbar.title ion-label{color:#fff}.image-card ion-toolbar.buttons{--padding-start: 4px;--padding-end: 4px;--ion-color-base: var(--ion-color-light) !important;position:absolute;top:100%;transition:transform .2s ease-in-out}.image-card:hover ion-toolbar.buttons,.image-card ion-toolbar.buttons.focused{transform:translateY(var(--top-offset))}.image-card-button{height:calc(100% - var(--image-margin-safe-area, 0px));max-height:max(min(30vh,200px),var(--img-max-height, 0px));transition:.2s ease-in-out;max-width:250px}.image-card-button ion-card-content{height:100%}.image-card-button .icon-container{height:auto;position:relative;top:calc(50% - 75px);display:flex;align-items:center;justify-content:center}.image-card-button ion-icon:first-of-type{font-size:150px;height:150px;position:relative;top:0}.image-card-button ion-icon.icon-secondary{font-size:50px;position:absolute;top:0;left:max(min(50% + 25px,100% - 50px),0px)}.image-card-button ion-button{float:right}.image-card-button:hover{--ion-color-base: var(--ion-color-shade) !important}.image-card-button:hover ion-icon{--ion-color-base: var(--ion-color-shade) !important}.backdrop{height:100vh;width:100vw;background:#000;position:absolute;z-index:10}.gallery-container{position:relative}.gallery-container.inline-zoom-active{min-height:var(--inline-zoom-height, 60vh)}.inline-overlay{position:absolute;inset:0;z-index:20;background:#000}\n"] }]
|
|
29872
29895
|
}], ctorParameters: () => [{ type: ImageService }, { type: i2$1.Platform }, { type: i2$1.AlertController }, { type: i1$1.TranslateService }, { type: i0.ChangeDetectorRef }, { type: Environment, decorators: [{
|
|
29873
29896
|
type: Optional
|
|
29874
29897
|
}, {
|
|
@@ -29979,6 +30002,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
29979
30002
|
type: Output
|
|
29980
30003
|
}], slideshowClosed: [{
|
|
29981
30004
|
type: Output
|
|
30005
|
+
}], inlineSlideshow: [{
|
|
30006
|
+
type: ViewChild,
|
|
30007
|
+
args: ['inlineSlideshow', { static: false }]
|
|
29982
30008
|
}] } });
|
|
29983
30009
|
|
|
29984
30010
|
class ImageGalleryModule {
|