@sumaris-net/ngx-components 2.0.0-rc46 → 2.0.0-rc47
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/src/app/shared/image/gallery/image-gallery.component.mjs +16 -5
- package/esm2020/src/app/shared/upload-file/upload-file-popover.component.mjs +3 -3
- package/fesm2015/sumaris-net.ngx-components.mjs +20 -6
- package/fesm2015/sumaris-net.ngx-components.mjs.map +1 -1
- package/fesm2020/sumaris-net.ngx-components.mjs +17 -6
- package/fesm2020/sumaris-net.ngx-components.mjs.map +1 -1
- package/package.json +1 -1
- package/src/app/shared/image/gallery/image-gallery.component.d.ts +7 -0
- package/src/theme/_ngx-components.scss +5 -0
|
@@ -11860,10 +11860,10 @@ class UploadFilePopover {
|
|
|
11860
11860
|
}
|
|
11861
11861
|
}
|
|
11862
11862
|
UploadFilePopover.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: UploadFilePopover, deps: [{ token: i2.PopoverController }, { token: i1$1.TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
11863
|
-
UploadFilePopover.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: UploadFilePopover, selector: "app-upload-file-popover", inputs: { fileExtension: "fileExtension", title: "title", uniqueFile: "uniqueFile", instantUpload: "instantUpload", uploadFn: "uploadFn", deleteFn: "deleteFn", maxParallelUpload: "maxParallelUpload" }, viewQueries: [{ propertyName: "uploader", first: true, predicate: ["uploader"], descendants: true, static: true }], ngImport: i0, template: "\n<ion-content class=\"ion-no-padding\" scrollY=\"false\">\n <
|
|
11863
|
+
UploadFilePopover.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: UploadFilePopover, selector: "app-upload-file-popover", inputs: { fileExtension: "fileExtension", title: "title", uniqueFile: "uniqueFile", instantUpload: "instantUpload", uploadFn: "uploadFn", deleteFn: "deleteFn", maxParallelUpload: "maxParallelUpload" }, viewQueries: [{ propertyName: "uploader", first: true, predicate: ["uploader"], descendants: true, static: true }], ngImport: i0, template: "\n<ion-content class=\"ion-no-padding\" scrollY=\"false\">\n <app-upload-file\n #uploader\n [uploadFn]=\"uploadFn\"\n [deleteFn]=\"deleteFn\"\n [fileExtension]=\"fileExtension\"\n [instantUpload]=\"instantUpload\"\n [uniqueFile]=\"uniqueFile\"\n [maxParallelUpload]=\"maxParallelUpload\"\n ></app-upload-file>\n</ion-content>\n\n<ion-footer>\n <ion-toolbar>\n <ion-row class=\"ion-no-padding\" nowrap>\n <ion-col>\n <div *ngIf=\"importing\" class=\"importing-info\">\n <ion-text color=\"medium\"><small translate>FILE.UPLOAD.IMPORTING</small></ion-text>\n <ion-spinner name=\"dots\" color=\"accent\"></ion-spinner>\n </div>\n <ion-item *ngIf=\"error\" lines=\"none\">\n <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n <ion-label color=\"danger\" class=\"ion-text-wrap\" [innerHTML]=\"error | translate\"></ion-label>\n </ion-item>\n </ion-col>\n <ion-col size=\"auto\">\n <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n <ion-button\n [fill]=\"disabled ? 'clear' : 'solid'\"\n (click)=\"onValidate($event)\"\n (keyup.enter)=\"onValidate($event)\"\n color=\"tertiary\"\n [disabled]=\"disabled\"\n >\n <ion-label translate>COMMON.BTN_IMPORT</ion-label>\n </ion-button>\n </ion-col>\n </ion-row>\n </ion-toolbar>\n</ion-footer>\n", styles: [".importing-info{padding-inline-start:var(--ion-padding);display:inline-flex;flex-wrap:nowrap;padding-top:8px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.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.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: UploadFileComponent, selector: "app-upload-file", inputs: ["fileExtension", "uniqueFile", "instantUpload", "uploadFn", "deleteFn", "maxParallelUpload"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
11864
11864
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: UploadFilePopover, decorators: [{
|
|
11865
11865
|
type: Component,
|
|
11866
|
-
args: [{ selector: 'app-upload-file-popover', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<ion-content class=\"ion-no-padding\" scrollY=\"false\">\n <
|
|
11866
|
+
args: [{ selector: 'app-upload-file-popover', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<ion-content class=\"ion-no-padding\" scrollY=\"false\">\n <app-upload-file\n #uploader\n [uploadFn]=\"uploadFn\"\n [deleteFn]=\"deleteFn\"\n [fileExtension]=\"fileExtension\"\n [instantUpload]=\"instantUpload\"\n [uniqueFile]=\"uniqueFile\"\n [maxParallelUpload]=\"maxParallelUpload\"\n ></app-upload-file>\n</ion-content>\n\n<ion-footer>\n <ion-toolbar>\n <ion-row class=\"ion-no-padding\" nowrap>\n <ion-col>\n <div *ngIf=\"importing\" class=\"importing-info\">\n <ion-text color=\"medium\"><small translate>FILE.UPLOAD.IMPORTING</small></ion-text>\n <ion-spinner name=\"dots\" color=\"accent\"></ion-spinner>\n </div>\n <ion-item *ngIf=\"error\" lines=\"none\">\n <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n <ion-label color=\"danger\" class=\"ion-text-wrap\" [innerHTML]=\"error | translate\"></ion-label>\n </ion-item>\n </ion-col>\n <ion-col size=\"auto\">\n <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n <ion-button\n [fill]=\"disabled ? 'clear' : 'solid'\"\n (click)=\"onValidate($event)\"\n (keyup.enter)=\"onValidate($event)\"\n color=\"tertiary\"\n [disabled]=\"disabled\"\n >\n <ion-label translate>COMMON.BTN_IMPORT</ion-label>\n </ion-button>\n </ion-col>\n </ion-row>\n </ion-toolbar>\n</ion-footer>\n", styles: [".importing-info{padding-inline-start:var(--ion-padding);display:inline-flex;flex-wrap:nowrap;padding-top:8px}\n"] }]
|
|
11867
11867
|
}], ctorParameters: function () { return [{ type: i2.PopoverController }, { type: i1$1.TranslateService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { uploader: [{
|
|
11868
11868
|
type: ViewChild,
|
|
11869
11869
|
args: ['uploader', { static: true }]
|
|
@@ -19760,6 +19760,7 @@ class AppImageGalleryComponent {
|
|
|
19760
19760
|
this.addButtonColor = 'tertiary';
|
|
19761
19761
|
this.onBeforeDeleteRows = createPromiseEventEmitter();
|
|
19762
19762
|
this.onAfterAddRows = new EventEmitter();
|
|
19763
|
+
this.activeSlideIndex = 0;
|
|
19763
19764
|
this.viewChange = new BehaviorSubject({ start: 0, end: Number.MAX_VALUE });
|
|
19764
19765
|
// DEV log
|
|
19765
19766
|
this.debug = environment && !environment.production;
|
|
@@ -19778,13 +19779,17 @@ class AppImageGalleryComponent {
|
|
|
19778
19779
|
get rows() {
|
|
19779
19780
|
return this._data;
|
|
19780
19781
|
}
|
|
19782
|
+
get rowCount() {
|
|
19783
|
+
var _a;
|
|
19784
|
+
return ((_a = this._data) === null || _a === void 0 ? void 0 : _a.length) || 0;
|
|
19785
|
+
}
|
|
19781
19786
|
ngOnInit() {
|
|
19782
19787
|
this.mobile = toBoolean(this.mobile, isMobile(window));
|
|
19783
19788
|
this.mode = this.mobile ? 'list' : 'mosaic';
|
|
19784
19789
|
this._colSize = GalleryModeColSize[this.mode];
|
|
19785
19790
|
this.showToolbar = toBoolean(this.showToolbar, !this.mobile);
|
|
19786
|
-
this.
|
|
19787
|
-
this.
|
|
19791
|
+
this.showAddCardButton = toBoolean(this.showAddCardButton, this.mobile);
|
|
19792
|
+
this.showFabButton = toBoolean(this.showFabButton, this.mobile && !this.showAddCardButton);
|
|
19788
19793
|
// Get modal presenting element (iOS only)
|
|
19789
19794
|
this._presentingElement = this.mobile ? document.querySelector('.ion-page') : null;
|
|
19790
19795
|
}
|
|
@@ -19794,9 +19799,11 @@ class AppImageGalleryComponent {
|
|
|
19794
19799
|
}
|
|
19795
19800
|
}
|
|
19796
19801
|
ngOnDestroy() {
|
|
19802
|
+
var _a;
|
|
19797
19803
|
this._destroySubject.next();
|
|
19798
19804
|
this._destroySubject.complete();
|
|
19799
19805
|
this._subscription.unsubscribe();
|
|
19806
|
+
(_a = this._slidesSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
|
|
19800
19807
|
if (isDataSource(this.dataSource)) {
|
|
19801
19808
|
this.dataSource.disconnect(this);
|
|
19802
19809
|
}
|
|
@@ -19924,10 +19931,17 @@ class AppImageGalleryComponent {
|
|
|
19924
19931
|
});
|
|
19925
19932
|
}
|
|
19926
19933
|
initModalSlides(slides) {
|
|
19934
|
+
var _a;
|
|
19927
19935
|
return __awaiter(this, void 0, void 0, function* () {
|
|
19928
19936
|
if (this._selectedRowIndex > 0) {
|
|
19929
19937
|
yield slides.slideTo(this._selectedRowIndex, 0);
|
|
19930
19938
|
}
|
|
19939
|
+
(_a = this._slidesSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
|
|
19940
|
+
const swiper = (yield slides.getSwiper());
|
|
19941
|
+
this._slidesSubscription = slides.ionSlideWillChange.subscribe(() => {
|
|
19942
|
+
this.activeSlideIndex = swiper.activeIndex;
|
|
19943
|
+
this.markForCheck();
|
|
19944
|
+
});
|
|
19931
19945
|
});
|
|
19932
19946
|
}
|
|
19933
19947
|
zoom(slides, zoomIn) {
|
|
@@ -20009,10 +20023,10 @@ class AppImageGalleryComponent {
|
|
|
20009
20023
|
}
|
|
20010
20024
|
}
|
|
20011
20025
|
AppImageGalleryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: AppImageGalleryComponent, deps: [{ token: ImageService }, { token: i2.Platform }, { token: i2.AlertController }, { token: i2.PopoverController }, { token: i1$1.TranslateService }, { token: i0.ChangeDetectorRef }, { token: ENVIRONMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
20012
|
-
AppImageGalleryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: AppImageGalleryComponent, selector: "app-image-gallery", inputs: { debug: "debug", disabled: "disabled", readOnly: "readOnly", mobile: "mobile", mode: "mode", confirmBeforeDelete: "confirmBeforeDelete", showToolbar: "showToolbar", showFabButton: "showFabButton", showTitle: "showTitle", showAddCardButton: "showAddCardButton", addButtonColor: "addButtonColor", dataSource: "dataSource" }, outputs: { onBeforeDeleteRows: "onBeforeDeleteRows", onAfterAddRows: "onAfterAddRows" }, viewQueries: [{ propertyName: "zoomModal", first: true, predicate: ["zoomModal"], descendants: true }, { propertyName: "titlePopover", first: true, predicate: ["titlePopover"], descendants: true }], ngImport: i0, template: "\n\n<ion-toolbar color=\"light\" *ngIf=\"showToolbar\">\n <!-- Add -->\n <button mat-icon-button\n *ngIf=\"!readOnly && !mobile && enabled\"\n [title]=\"'COMMON.BTN_ADD'|translate\"\n (click)=\"add()\">\n <mat-icon>add</mat-icon>\n </button>\n\n <ion-buttons slot=\"end\">\n <!-- Toggle view mode -->\n <ion-segment (ionChange)=\"toggleViewMode($event)\" color=\"accent\"\n [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<div class=\"gallery-container\">\n <div *ngIf=\"mobile && zoomActive\" class=\"backdrop\" [style.opacity]=\"zoomScale\"></div>\n\n <ion-grid class=\"ion-no-padding\">\n <ion-row>\n <ion-col *ngFor=\"let row of rows; index as index; trackBy: trackByFn\" [size]=\"_colSize\">\n <ion-card #card class=\"image-card\"\n *ngVar=\"row|propertyGet: 'currentData'; let image\"\n (click)=\"clickRow(row, index)\"\n tappable\n @fadeInAnimation>\n <figure class=\"card-thumbnail\">\n <img [src]=\"image.url||image.dataUrl\"/>\n </figure>\n\n <ion-toolbar color=\"transparent\" class=\"title\">\n <ion-label class=\"card-title\">{{image.title}}</ion-label>\n </ion-toolbar>\n\n <ion-toolbar #cardToolbar color=\"light\" class=\"buttons\">\n <!-- title -->\n <button mat-button *ngIf=\"showTitle && !mobile && !readOnly\" slot=\"start\"\n [disabled]=\"disabled\"\n (click)=\"editTitle($event, row, cardToolbar)\"\n (focusin)=\"showCardToolbar(cardToolbar)\">\n <mat-icon>edit</mat-icon>\n <mat-label>\n <span *ngIf=\"row.currentData.title|isNotNilOrBlank; else editLabel\" translate>IMAGE.GALLERY.BTN_EDIT_TITLE</span>\n <ng-template #editLabel>\n <span translate>IMAGE.GALLERY.BTN_ADD_TITLE</span>\n </ng-template>\n </mat-label>\n </button>\n\n <div class=\"flex-spacer\"></div>\n\n <button mat-icon-button *ngIf=\"!mobile && !readOnly\" slot=\"end\"\n class=\"ion-float-end\"\n [title]=\"'COMMON.BTN_DELETE'|translate\"\n [disabled]=\"disabled\"\n (click)=\"delete($event, row)\">\n <mat-icon>delete</mat-icon>\n </button>\n </ion-toolbar>\n </ion-card>\n </ion-col>\n\n <ion-col *ngIf=\"showAddCardButton && !readOnly\" [size]=\"_colSize\" @fadeInAnimation>\n <ion-card class=\"image-card-button\" color=\"light\"\n (click)=\"add($event)\"\n [disabled]=\"disabled\"\n tappable\n >\n <ion-card-content>\n <ion-icon name=\"camera\" [color]=\"addButtonColor\"></ion-icon>\n <ion-icon name=\"add\" [color]=\"addButtonColor\" class=\"icon-secondary\"></ion-icon>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n</div>\n\n<!-- FAB button: add -->\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\"\n *ngIf=\"showFabButton && !readOnly\"\n [class.cdk-visually-hidden]=\"disabled\"\n @fadeInOutAnimation>\n\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<!-- Zoom modal -->\n<ion-modal #zoomModal class=\"stack-modal zoom-modal modal-large\">\n <ng-template>\n <ion-content [fullscreen]=\"true\" class=\"ion-no-padding ion-no-margin\">\n <!-- zoom button -->\n <div class=\"top-buttons\" *ngIf=\"!mobile\">\n <ion-button (click)=\"zoom(modalSlides, true)\" color=\"light\">\n <ion-icon slot=\"icon-only\" name=\"add\"></ion-icon>\n </ion-button>\n <ion-button (click)=\"zoom(modalSlides, false)\" color=\"light\">\n <ion-icon name=\"remove\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n </div>\n <!-- navigation side buttons next/back -->\n <ng-container *ngIf=\"!mobile && (rows|isArrayLength:{greaterThan: 1})\">\n <div class=\"side-buttons prev\"\n (click)=\"slidePrev(modalSlides)\">\n <ion-icon name=\"chevron-back\"></ion-icon>\n </div>\n <div class=\"side-buttons next\"\n (click)=\"slideNext(modalSlides)\">\n <ion-icon name=\"chevron-forward\"></ion-icon>\n </div>\n </ng-container>\n <ion-slides #modalSlides [options]=\"modalSliderOpts\" >\n <ion-slide *ngFor=\"let row of rows; last as last\">\n <div class=\"swiper-zoom-container\" *ngIf=\"row|propertyGet: 'currentData'; let image\"\n (ngInit)=\"last && initModalSlides(modalSlides)\">\n <img [src]=\"image.url||image.dataUrl\">\n </div>\n </ion-slide>\n </ion-slides>\n </ion-content>\n\n <ion-footer>\n <ion-toolbar color=\"light\">\n <ion-row>\n <ion-col size=\"4\" class=\"ion-text-start\">\n <ion-button *ngIf=\"!readOnly\"\n (click)=\"deleteFromModal($event, modalSlides)\"\n [disabled]=\"disabled\"\n fill=\"clear\" color=\"danger\">\n <mat-icon slot=\"start\">delete</mat-icon>\n {{'COMMON.BTN_DELETE'|translate}}\n </ion-button>\n </ion-col>\n <ion-col size=\"4\">\n </ion-col>\n <ion-col size=\"4\" class=\"ion-text-end\">\n <ion-button (click)=\"zoomModal.dismiss()\" 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)=\"zoomModal.dismiss()\" color=\"tertiary\">\n {{'COMMON.BTN_CLOSE'|translate}}\n </ion-button>\n </ng-template>\n </ion-col>\n </ion-row>\n </ion-toolbar>\n </ion-footer>\n </ng-template>\n</ion-modal>\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\n </mat-form-field>\n </form>\n </ion-content>\n\n\n <ion-footer>\n <ion-toolbar>\n <ion-row class=\"ion-no-padding\" nowrap>\n <ion-col>\n\n </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]=\"'COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP'|translate\">\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: ["mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}.image-slide{overflow:visible}.image-card{height:calc(100% - 23px);background-color:var(--ion-color-base);--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%}.image-card .card-thumbnail>img{height:100%;transition:scale .2s ease-in-out;scale:var(--img-scale)}.image-card: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: transparent !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% - 23px);transition:.2s ease-in-out}.image-card-button ion-icon:first-of-type{width:100%;font-size:150px;height:150px}.image-card-button ion-icon.icon-secondary{font-size:50px;top:9px;left:calc(50% + 50px)}.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}.image-card{z-index:9}.backdrop{height:100vh;width:100vw;background:black;position:absolute;z-index:10}.zoom-modal{-webkit-user-select:none;user-select:none}.zoom-modal .top-buttons{z-index:14;position:absolute;display:inline-grid;right:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}.zoom-modal .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)}.zoom-modal .side-buttons ion-icon{top:50%;color:#fff;font-size:2.5rem;position:absolute;opacity:0;transition-duration:.15s;transition-timing-function:ease-in}.zoom-modal .side-buttons:hover{cursor:pointer}.zoom-modal .side-buttons:hover ion-icon{opacity:1}.zoom-modal .side-buttons.prev{left:0}.zoom-modal .side-buttons.prev ion-icon{left:var(--side-buttons-margin)}.zoom-modal .side-buttons.next{right:0}.zoom-modal .side-buttons.next ion-icon{right:var(--side-buttons-margin)}.zoom-modal ion-slides{height:100%;background:black}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2.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.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2.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.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { kind: "component", type: i2.IonSegmentButton, selector: "ion-segment-button", inputs: ["disabled", "layout", "mode", "type", "value"] }, { kind: "component", type: i2.IonSlide, selector: "ion-slide" }, { kind: "component", type: i2.IonSlides, selector: "ion-slides", inputs: ["mode", "options", "pager", "scrollbar"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonModal, selector: "ion-modal", inputs: ["animated", "keepContentsMounted", "backdropBreakpoint", "backdropDismiss", "breakpoints", "canDismiss", "cssClass", "enterAnimation", "event", "handle", "handleBehavior", "initialBreakpoint", "isOpen", "keyboardClose", "leaveAnimation", "mode", "presentingElement", "showBackdrop", "swipeToClose", "translucent", "trigger"] }, { kind: "component", type: i2.IonPopover, selector: "ion-popover", inputs: ["alignment", "animated", "arrow", "keepContentsMounted", "backdropDismiss", "cssClass", "dismissOnSelect", "enterAnimation", "event", "isOpen", "keyboardClose", "leaveAnimation", "mode", "showBackdrop", "translucent", "trigger", "triggerAction", "reference", "size", "side"] }, { kind: "directive", type: i2.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgInitDirective, selector: "[ngInit]", outputs: ["ngInit"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: NgVarDirective, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
20026
|
+
AppImageGalleryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: AppImageGalleryComponent, selector: "app-image-gallery", inputs: { debug: "debug", disabled: "disabled", readOnly: "readOnly", mobile: "mobile", mode: "mode", confirmBeforeDelete: "confirmBeforeDelete", showToolbar: "showToolbar", showFabButton: "showFabButton", showTitle: "showTitle", showAddCardButton: "showAddCardButton", addButtonColor: "addButtonColor", dataSource: "dataSource" }, outputs: { onBeforeDeleteRows: "onBeforeDeleteRows", onAfterAddRows: "onAfterAddRows" }, viewQueries: [{ propertyName: "zoomModal", first: true, predicate: ["zoomModal"], descendants: true }, { propertyName: "titlePopover", first: true, predicate: ["titlePopover"], descendants: true }], ngImport: i0, template: "\n\n<ion-toolbar color=\"light\" *ngIf=\"showToolbar\">\n <!-- Add -->\n <button mat-icon-button\n *ngIf=\"!readOnly && !mobile && enabled\"\n [title]=\"'COMMON.BTN_ADD'|translate\"\n (click)=\"add()\">\n <mat-icon>add</mat-icon>\n </button>\n\n <ion-buttons slot=\"end\">\n <!-- Toggle view mode -->\n <ion-segment (ionChange)=\"toggleViewMode($event)\" color=\"accent\"\n [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<div class=\"gallery-container {{this.mode}}\">\n <div *ngIf=\"mobile && zoomActive\" class=\"backdrop\" [style.opacity]=\"zoomScale\"></div>\n\n <ion-grid class=\"ion-no-padding\">\n <ion-row>\n <ion-col *ngFor=\"let row of rows; index as index; trackBy: trackByFn\" [size]=\"_colSize\">\n <ion-card #card class=\"image-card\" [class.zoom-hover]=\"!mobile\"\n *ngVar=\"row|propertyGet: 'currentData'; let image\"\n (click)=\"clickRow(row, index)\"\n tappable\n @fadeInAnimation>\n <figure class=\"card-thumbnail\">\n <img [src]=\"image.url||image.dataUrl\"/>\n </figure>\n\n <!-- toolbar for title (when not hover) -->\n <ion-toolbar color=\"transparent\" class=\"title\">\n <ion-label class=\"card-title\">{{image.title}}</ion-label>\n </ion-toolbar>\n\n <!-- action toolbar (desktop only) shown when hover image -->\n <ion-toolbar #cardToolbar *ngIf=\"!mobile && !readOnly\" color=\"light\" class=\"buttons\">\n\n <!-- edit title button -->\n <button mat-button *ngIf=\"showTitle\" slot=\"start\"\n [disabled]=\"disabled\"\n (click)=\"editTitle($event, row, cardToolbar)\"\n (focusin)=\"showCardToolbar(cardToolbar)\">\n <mat-icon>edit</mat-icon>\n <mat-label>\n <span *ngIf=\"row.currentData.title|isNotNilOrBlank; else editLabel\" translate>IMAGE.GALLERY.BTN_EDIT_TITLE</span>\n <ng-template #editLabel>\n <span translate>IMAGE.GALLERY.BTN_ADD_TITLE</span>\n </ng-template>\n </mat-label>\n </button>\n\n <div class=\"flex-spacer\"></div>\n\n <!-- delete button -->\n <button mat-icon-button slot=\"end\"\n class=\"ion-float-end\"\n [title]=\"'COMMON.BTN_DELETE'|translate\"\n [disabled]=\"disabled\"\n (click)=\"delete($event, row)\">\n <mat-icon>delete</mat-icon>\n </button>\n </ion-toolbar>\n </ion-card>\n </ion-col>\n\n <ion-col *ngIf=\"showAddCardButton && !readOnly\" [size]=\"_colSize\" @fadeInAnimation>\n <ion-card class=\"image-card-button\" color=\"light\"\n (click)=\"add($event)\"\n [disabled]=\"disabled\"\n tappable\n >\n <ion-card-content>\n <ion-icon name=\"camera\" [color]=\"addButtonColor\"></ion-icon>\n <ion-icon name=\"add\" [color]=\"addButtonColor\" class=\"icon-secondary\"></ion-icon>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n</div>\n\n<!-- FAB button: add -->\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\"\n *ngIf=\"showFabButton && !readOnly\"\n [class.cdk-visually-hidden]=\"disabled\"\n @fadeInOutAnimation>\n\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<!-- Zoom modal -->\n<ion-modal #zoomModal class=\"stack-modal zoom-modal\"\n [class.modal-fullscreen]=\"mobile\"\n [class.modal-large]=\"!mobile\">\n <ng-template>\n <ion-content class=\"ion-no-padding ion-no-margin\" >\n <!-- Counter -->\n <div class=\"top-left\" *ngVar=\"rows?.length as count\">\n <ion-label color=\"light\">\n {{activeSlideIndex + 1}} / {{count}}\n </ion-label>\n </div>\n\n <!-- zoom button -->\n <div class=\"top-right\">\n <ion-button *ngIf=\"!mobile\" (click)=\"zoom(modalSlides, true)\" color=\"light\">\n <ion-icon slot=\"icon-only\" name=\"add\"></ion-icon>\n </ion-button>\n <ion-button *ngIf=\"!mobile\" (click)=\"zoom(modalSlides, false)\" color=\"light\">\n <ion-icon name=\"remove\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n </div>\n\n <!-- navigation side buttons next/back -->\n <ng-container *ngIf=\"!mobile && (rows|isArrayLength:{greaterThan: 1})\">\n <div class=\"side-buttons prev\"\n (click)=\"slidePrev(modalSlides)\">\n <ion-icon name=\"chevron-back\"></ion-icon>\n </div>\n <div class=\"side-buttons next\"\n (click)=\"slideNext(modalSlides)\">\n <ion-icon name=\"chevron-forward\"></ion-icon>\n </div>\n </ng-container>\n\n <!-- image slides -->\n <ion-slides #modalSlides [options]=\"modalSliderOpts\" >\n <ion-slide *ngFor=\"let row of rows; last as last\">\n <div class=\"swiper-zoom-container\" *ngIf=\"row|propertyGet: 'currentData'; let image\"\n (ngInit)=\"last && initModalSlides(modalSlides)\">\n <img [src]=\"image.url||image.dataUrl\">\n </div>\n </ion-slide>\n </ion-slides>\n </ion-content>\n\n <ion-footer>\n <ion-toolbar color=\"light\">\n <ion-row>\n <ion-col size=\"4\" class=\"ion-text-start\">\n <ion-button *ngIf=\"!readOnly\"\n (click)=\"deleteFromModal($event, modalSlides)\"\n [disabled]=\"disabled\"\n fill=\"clear\" color=\"danger\">\n <mat-icon slot=\"start\">delete</mat-icon>\n {{'COMMON.BTN_DELETE'|translate}}\n </ion-button>\n </ion-col>\n <ion-col size=\"4\">\n </ion-col>\n <ion-col size=\"4\" class=\"ion-text-end\">\n <ion-button (click)=\"zoomModal.dismiss()\" 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)=\"zoomModal.dismiss()\" color=\"tertiary\">\n {{'COMMON.BTN_CLOSE'|translate}}\n </ion-button>\n </ng-template>\n </ion-col>\n </ion-row>\n </ion-toolbar>\n </ion-footer>\n </ng-template>\n</ion-modal>\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\n </mat-form-field>\n </form>\n </ion-content>\n\n\n <ion-footer>\n <ion-toolbar>\n <ion-row class=\"ion-no-padding\" nowrap>\n <ion-col>\n\n </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]=\"'COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP'|translate\">\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: ["mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}.image-slide{overflow:visible}.image-card{height:calc(100% - 23px);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%}.image-card .card-thumbnail>img{height:100%;transition:scale .2s ease-in-out;scale:var(--img-scale)}.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: transparent !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% - 23px);transition:.2s ease-in-out;max-width:250px}.image-card-button ion-icon:first-of-type{width:100%;font-size:150px;height:150px}.image-card-button ion-icon.icon-secondary{font-size:50px;top:9px;left:calc(50% + 50px)}.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:black;position:absolute;z-index:10}.zoom-modal{-webkit-user-select:none;user-select:none}.zoom-modal .top-left{z-index:14;position:absolute;display:inline-grid;left:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}.zoom-modal .top-right{z-index:14;position:absolute;display:inline-grid;right:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}.zoom-modal .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)}.zoom-modal .side-buttons ion-icon{top:50%;color:#fff;font-size:2.5rem;position:absolute;opacity:0;transition-duration:.15s;transition-timing-function:ease-in}.zoom-modal .side-buttons:hover{cursor:pointer}.zoom-modal .side-buttons:hover ion-icon{opacity:1}.zoom-modal .side-buttons.prev{left:0}.zoom-modal .side-buttons.prev ion-icon{left:var(--side-buttons-margin)}.zoom-modal .side-buttons.next{right:0}.zoom-modal .side-buttons.next ion-icon{right:var(--side-buttons-margin)}.zoom-modal ion-slides{height:100%;background:black}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2.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.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2.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.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { kind: "component", type: i2.IonSegmentButton, selector: "ion-segment-button", inputs: ["disabled", "layout", "mode", "type", "value"] }, { kind: "component", type: i2.IonSlide, selector: "ion-slide" }, { kind: "component", type: i2.IonSlides, selector: "ion-slides", inputs: ["mode", "options", "pager", "scrollbar"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonModal, selector: "ion-modal", inputs: ["animated", "keepContentsMounted", "backdropBreakpoint", "backdropDismiss", "breakpoints", "canDismiss", "cssClass", "enterAnimation", "event", "handle", "handleBehavior", "initialBreakpoint", "isOpen", "keyboardClose", "leaveAnimation", "mode", "presentingElement", "showBackdrop", "swipeToClose", "translucent", "trigger"] }, { kind: "component", type: i2.IonPopover, selector: "ion-popover", inputs: ["alignment", "animated", "arrow", "keepContentsMounted", "backdropDismiss", "cssClass", "dismissOnSelect", "enterAnimation", "event", "isOpen", "keyboardClose", "leaveAnimation", "mode", "showBackdrop", "translucent", "trigger", "triggerAction", "reference", "size", "side"] }, { kind: "directive", type: i2.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgInitDirective, selector: "[ngInit]", outputs: ["ngInit"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: NgVarDirective, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
20013
20027
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: AppImageGalleryComponent, decorators: [{
|
|
20014
20028
|
type: Component,
|
|
20015
|
-
args: [{ selector: 'app-image-gallery', animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: ChangeDetectionStrategy.OnPush, template: "\n\n<ion-toolbar color=\"light\" *ngIf=\"showToolbar\">\n <!-- Add -->\n <button mat-icon-button\n *ngIf=\"!readOnly && !mobile && enabled\"\n [title]=\"'COMMON.BTN_ADD'|translate\"\n (click)=\"add()\">\n <mat-icon>add</mat-icon>\n </button>\n\n <ion-buttons slot=\"end\">\n <!-- Toggle view mode -->\n <ion-segment (ionChange)=\"toggleViewMode($event)\" color=\"accent\"\n [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<div class=\"gallery-container\">\n <div *ngIf=\"mobile && zoomActive\" class=\"backdrop\" [style.opacity]=\"zoomScale\"></div>\n\n <ion-grid class=\"ion-no-padding\">\n <ion-row>\n <ion-col *ngFor=\"let row of rows; index as index; trackBy: trackByFn\" [size]=\"_colSize\">\n <ion-card #card class=\"image-card\"\n *ngVar=\"row|propertyGet: 'currentData'; let image\"\n (click)=\"clickRow(row, index)\"\n tappable\n @fadeInAnimation>\n <figure class=\"card-thumbnail\">\n <img [src]=\"image.url||image.dataUrl\"/>\n </figure>\n\n <ion-toolbar color=\"transparent\" class=\"title\">\n <ion-label class=\"card-title\">{{image.title}}</ion-label>\n </ion-toolbar>\n\n <ion-toolbar #cardToolbar color=\"light\" class=\"buttons\">\n <!-- title -->\n <button mat-button *ngIf=\"showTitle && !mobile && !readOnly\" slot=\"start\"\n [disabled]=\"disabled\"\n (click)=\"editTitle($event, row, cardToolbar)\"\n (focusin)=\"showCardToolbar(cardToolbar)\">\n <mat-icon>edit</mat-icon>\n <mat-label>\n <span *ngIf=\"row.currentData.title|isNotNilOrBlank; else editLabel\" translate>IMAGE.GALLERY.BTN_EDIT_TITLE</span>\n <ng-template #editLabel>\n <span translate>IMAGE.GALLERY.BTN_ADD_TITLE</span>\n </ng-template>\n </mat-label>\n </button>\n\n <div class=\"flex-spacer\"></div>\n\n <button mat-icon-button *ngIf=\"!mobile && !readOnly\" slot=\"end\"\n class=\"ion-float-end\"\n [title]=\"'COMMON.BTN_DELETE'|translate\"\n [disabled]=\"disabled\"\n (click)=\"delete($event, row)\">\n <mat-icon>delete</mat-icon>\n </button>\n </ion-toolbar>\n </ion-card>\n </ion-col>\n\n <ion-col *ngIf=\"showAddCardButton && !readOnly\" [size]=\"_colSize\" @fadeInAnimation>\n <ion-card class=\"image-card-button\" color=\"light\"\n (click)=\"add($event)\"\n [disabled]=\"disabled\"\n tappable\n >\n <ion-card-content>\n <ion-icon name=\"camera\" [color]=\"addButtonColor\"></ion-icon>\n <ion-icon name=\"add\" [color]=\"addButtonColor\" class=\"icon-secondary\"></ion-icon>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n</div>\n\n<!-- FAB button: add -->\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\"\n *ngIf=\"showFabButton && !readOnly\"\n [class.cdk-visually-hidden]=\"disabled\"\n @fadeInOutAnimation>\n\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<!-- Zoom modal -->\n<ion-modal #zoomModal class=\"stack-modal zoom-modal modal-large\">\n <ng-template>\n <ion-content [fullscreen]=\"true\" class=\"ion-no-padding ion-no-margin\">\n <!-- zoom button -->\n <div class=\"top-buttons\" *ngIf=\"!mobile\">\n <ion-button (click)=\"zoom(modalSlides, true)\" color=\"light\">\n <ion-icon slot=\"icon-only\" name=\"add\"></ion-icon>\n </ion-button>\n <ion-button (click)=\"zoom(modalSlides, false)\" color=\"light\">\n <ion-icon name=\"remove\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n </div>\n <!-- navigation side buttons next/back -->\n <ng-container *ngIf=\"!mobile && (rows|isArrayLength:{greaterThan: 1})\">\n <div class=\"side-buttons prev\"\n (click)=\"slidePrev(modalSlides)\">\n <ion-icon name=\"chevron-back\"></ion-icon>\n </div>\n <div class=\"side-buttons next\"\n (click)=\"slideNext(modalSlides)\">\n <ion-icon name=\"chevron-forward\"></ion-icon>\n </div>\n </ng-container>\n <ion-slides #modalSlides [options]=\"modalSliderOpts\" >\n <ion-slide *ngFor=\"let row of rows; last as last\">\n <div class=\"swiper-zoom-container\" *ngIf=\"row|propertyGet: 'currentData'; let image\"\n (ngInit)=\"last && initModalSlides(modalSlides)\">\n <img [src]=\"image.url||image.dataUrl\">\n </div>\n </ion-slide>\n </ion-slides>\n </ion-content>\n\n <ion-footer>\n <ion-toolbar color=\"light\">\n <ion-row>\n <ion-col size=\"4\" class=\"ion-text-start\">\n <ion-button *ngIf=\"!readOnly\"\n (click)=\"deleteFromModal($event, modalSlides)\"\n [disabled]=\"disabled\"\n fill=\"clear\" color=\"danger\">\n <mat-icon slot=\"start\">delete</mat-icon>\n {{'COMMON.BTN_DELETE'|translate}}\n </ion-button>\n </ion-col>\n <ion-col size=\"4\">\n </ion-col>\n <ion-col size=\"4\" class=\"ion-text-end\">\n <ion-button (click)=\"zoomModal.dismiss()\" 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)=\"zoomModal.dismiss()\" color=\"tertiary\">\n {{'COMMON.BTN_CLOSE'|translate}}\n </ion-button>\n </ng-template>\n </ion-col>\n </ion-row>\n </ion-toolbar>\n </ion-footer>\n </ng-template>\n</ion-modal>\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\n </mat-form-field>\n </form>\n </ion-content>\n\n\n <ion-footer>\n <ion-toolbar>\n <ion-row class=\"ion-no-padding\" nowrap>\n <ion-col>\n\n </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]=\"'COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP'|translate\">\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: ["mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}.image-slide{overflow:visible}.image-card{height:calc(100% - 23px);background-color:var(--ion-color-base);--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%}.image-card .card-thumbnail>img{height:100%;transition:scale .2s ease-in-out;scale:var(--img-scale)}.image-card: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: transparent !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% - 23px);transition:.2s ease-in-out}.image-card-button ion-icon:first-of-type{width:100%;font-size:150px;height:150px}.image-card-button ion-icon.icon-secondary{font-size:50px;top:9px;left:calc(50% + 50px)}.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}.image-card{z-index:9}.backdrop{height:100vh;width:100vw;background:black;position:absolute;z-index:10}.zoom-modal{-webkit-user-select:none;user-select:none}.zoom-modal .top-buttons{z-index:14;position:absolute;display:inline-grid;right:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}.zoom-modal .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)}.zoom-modal .side-buttons ion-icon{top:50%;color:#fff;font-size:2.5rem;position:absolute;opacity:0;transition-duration:.15s;transition-timing-function:ease-in}.zoom-modal .side-buttons:hover{cursor:pointer}.zoom-modal .side-buttons:hover ion-icon{opacity:1}.zoom-modal .side-buttons.prev{left:0}.zoom-modal .side-buttons.prev ion-icon{left:var(--side-buttons-margin)}.zoom-modal .side-buttons.next{right:0}.zoom-modal .side-buttons.next ion-icon{right:var(--side-buttons-margin)}.zoom-modal ion-slides{height:100%;background:black}\n"] }]
|
|
20029
|
+
args: [{ selector: 'app-image-gallery', animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: ChangeDetectionStrategy.OnPush, template: "\n\n<ion-toolbar color=\"light\" *ngIf=\"showToolbar\">\n <!-- Add -->\n <button mat-icon-button\n *ngIf=\"!readOnly && !mobile && enabled\"\n [title]=\"'COMMON.BTN_ADD'|translate\"\n (click)=\"add()\">\n <mat-icon>add</mat-icon>\n </button>\n\n <ion-buttons slot=\"end\">\n <!-- Toggle view mode -->\n <ion-segment (ionChange)=\"toggleViewMode($event)\" color=\"accent\"\n [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<div class=\"gallery-container {{this.mode}}\">\n <div *ngIf=\"mobile && zoomActive\" class=\"backdrop\" [style.opacity]=\"zoomScale\"></div>\n\n <ion-grid class=\"ion-no-padding\">\n <ion-row>\n <ion-col *ngFor=\"let row of rows; index as index; trackBy: trackByFn\" [size]=\"_colSize\">\n <ion-card #card class=\"image-card\" [class.zoom-hover]=\"!mobile\"\n *ngVar=\"row|propertyGet: 'currentData'; let image\"\n (click)=\"clickRow(row, index)\"\n tappable\n @fadeInAnimation>\n <figure class=\"card-thumbnail\">\n <img [src]=\"image.url||image.dataUrl\"/>\n </figure>\n\n <!-- toolbar for title (when not hover) -->\n <ion-toolbar color=\"transparent\" class=\"title\">\n <ion-label class=\"card-title\">{{image.title}}</ion-label>\n </ion-toolbar>\n\n <!-- action toolbar (desktop only) shown when hover image -->\n <ion-toolbar #cardToolbar *ngIf=\"!mobile && !readOnly\" color=\"light\" class=\"buttons\">\n\n <!-- edit title button -->\n <button mat-button *ngIf=\"showTitle\" slot=\"start\"\n [disabled]=\"disabled\"\n (click)=\"editTitle($event, row, cardToolbar)\"\n (focusin)=\"showCardToolbar(cardToolbar)\">\n <mat-icon>edit</mat-icon>\n <mat-label>\n <span *ngIf=\"row.currentData.title|isNotNilOrBlank; else editLabel\" translate>IMAGE.GALLERY.BTN_EDIT_TITLE</span>\n <ng-template #editLabel>\n <span translate>IMAGE.GALLERY.BTN_ADD_TITLE</span>\n </ng-template>\n </mat-label>\n </button>\n\n <div class=\"flex-spacer\"></div>\n\n <!-- delete button -->\n <button mat-icon-button slot=\"end\"\n class=\"ion-float-end\"\n [title]=\"'COMMON.BTN_DELETE'|translate\"\n [disabled]=\"disabled\"\n (click)=\"delete($event, row)\">\n <mat-icon>delete</mat-icon>\n </button>\n </ion-toolbar>\n </ion-card>\n </ion-col>\n\n <ion-col *ngIf=\"showAddCardButton && !readOnly\" [size]=\"_colSize\" @fadeInAnimation>\n <ion-card class=\"image-card-button\" color=\"light\"\n (click)=\"add($event)\"\n [disabled]=\"disabled\"\n tappable\n >\n <ion-card-content>\n <ion-icon name=\"camera\" [color]=\"addButtonColor\"></ion-icon>\n <ion-icon name=\"add\" [color]=\"addButtonColor\" class=\"icon-secondary\"></ion-icon>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n</div>\n\n<!-- FAB button: add -->\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\"\n *ngIf=\"showFabButton && !readOnly\"\n [class.cdk-visually-hidden]=\"disabled\"\n @fadeInOutAnimation>\n\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<!-- Zoom modal -->\n<ion-modal #zoomModal class=\"stack-modal zoom-modal\"\n [class.modal-fullscreen]=\"mobile\"\n [class.modal-large]=\"!mobile\">\n <ng-template>\n <ion-content class=\"ion-no-padding ion-no-margin\" >\n <!-- Counter -->\n <div class=\"top-left\" *ngVar=\"rows?.length as count\">\n <ion-label color=\"light\">\n {{activeSlideIndex + 1}} / {{count}}\n </ion-label>\n </div>\n\n <!-- zoom button -->\n <div class=\"top-right\">\n <ion-button *ngIf=\"!mobile\" (click)=\"zoom(modalSlides, true)\" color=\"light\">\n <ion-icon slot=\"icon-only\" name=\"add\"></ion-icon>\n </ion-button>\n <ion-button *ngIf=\"!mobile\" (click)=\"zoom(modalSlides, false)\" color=\"light\">\n <ion-icon name=\"remove\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n </div>\n\n <!-- navigation side buttons next/back -->\n <ng-container *ngIf=\"!mobile && (rows|isArrayLength:{greaterThan: 1})\">\n <div class=\"side-buttons prev\"\n (click)=\"slidePrev(modalSlides)\">\n <ion-icon name=\"chevron-back\"></ion-icon>\n </div>\n <div class=\"side-buttons next\"\n (click)=\"slideNext(modalSlides)\">\n <ion-icon name=\"chevron-forward\"></ion-icon>\n </div>\n </ng-container>\n\n <!-- image slides -->\n <ion-slides #modalSlides [options]=\"modalSliderOpts\" >\n <ion-slide *ngFor=\"let row of rows; last as last\">\n <div class=\"swiper-zoom-container\" *ngIf=\"row|propertyGet: 'currentData'; let image\"\n (ngInit)=\"last && initModalSlides(modalSlides)\">\n <img [src]=\"image.url||image.dataUrl\">\n </div>\n </ion-slide>\n </ion-slides>\n </ion-content>\n\n <ion-footer>\n <ion-toolbar color=\"light\">\n <ion-row>\n <ion-col size=\"4\" class=\"ion-text-start\">\n <ion-button *ngIf=\"!readOnly\"\n (click)=\"deleteFromModal($event, modalSlides)\"\n [disabled]=\"disabled\"\n fill=\"clear\" color=\"danger\">\n <mat-icon slot=\"start\">delete</mat-icon>\n {{'COMMON.BTN_DELETE'|translate}}\n </ion-button>\n </ion-col>\n <ion-col size=\"4\">\n </ion-col>\n <ion-col size=\"4\" class=\"ion-text-end\">\n <ion-button (click)=\"zoomModal.dismiss()\" 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)=\"zoomModal.dismiss()\" color=\"tertiary\">\n {{'COMMON.BTN_CLOSE'|translate}}\n </ion-button>\n </ng-template>\n </ion-col>\n </ion-row>\n </ion-toolbar>\n </ion-footer>\n </ng-template>\n</ion-modal>\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\n </mat-form-field>\n </form>\n </ion-content>\n\n\n <ion-footer>\n <ion-toolbar>\n <ion-row class=\"ion-no-padding\" nowrap>\n <ion-col>\n\n </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]=\"'COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP'|translate\">\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: ["mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}.image-slide{overflow:visible}.image-card{height:calc(100% - 23px);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%}.image-card .card-thumbnail>img{height:100%;transition:scale .2s ease-in-out;scale:var(--img-scale)}.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: transparent !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% - 23px);transition:.2s ease-in-out;max-width:250px}.image-card-button ion-icon:first-of-type{width:100%;font-size:150px;height:150px}.image-card-button ion-icon.icon-secondary{font-size:50px;top:9px;left:calc(50% + 50px)}.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:black;position:absolute;z-index:10}.zoom-modal{-webkit-user-select:none;user-select:none}.zoom-modal .top-left{z-index:14;position:absolute;display:inline-grid;left:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}.zoom-modal .top-right{z-index:14;position:absolute;display:inline-grid;right:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}.zoom-modal .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)}.zoom-modal .side-buttons ion-icon{top:50%;color:#fff;font-size:2.5rem;position:absolute;opacity:0;transition-duration:.15s;transition-timing-function:ease-in}.zoom-modal .side-buttons:hover{cursor:pointer}.zoom-modal .side-buttons:hover ion-icon{opacity:1}.zoom-modal .side-buttons.prev{left:0}.zoom-modal .side-buttons.prev ion-icon{left:var(--side-buttons-margin)}.zoom-modal .side-buttons.next{right:0}.zoom-modal .side-buttons.next ion-icon{right:var(--side-buttons-margin)}.zoom-modal ion-slides{height:100%;background:black}\n"] }]
|
|
20016
20030
|
}], ctorParameters: function () {
|
|
20017
20031
|
return [{ type: ImageService }, { type: i2.Platform }, { type: i2.AlertController }, { type: i2.PopoverController }, { type: i1$1.TranslateService }, { type: i0.ChangeDetectorRef }, { type: Environment, decorators: [{
|
|
20018
20032
|
type: Optional
|