@sumaris-net/ngx-components 2.0.0-rc42 → 2.0.0-rc44
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 +6 -3
- package/esm2020/src/app/shared/image/gallery/testing/gallery.testing.mjs +1 -1
- package/fesm2015/sumaris-net.ngx-components.mjs +6 -3
- package/fesm2015/sumaris-net.ngx-components.mjs.map +1 -1
- package/fesm2020/sumaris-net.ngx-components.mjs +6 -3
- 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 +2 -2
|
@@ -19496,6 +19496,7 @@ class AppImageGalleryComponent {
|
|
|
19496
19496
|
this.mode = this.mobile ? 'list' : 'mosaic';
|
|
19497
19497
|
this._colSize = GalleryModeColSize[this.mode];
|
|
19498
19498
|
this.showToolbar = toBoolean(this.showToolbar, !this.mobile);
|
|
19499
|
+
this.showFabButton = toBoolean(this.showFabButton, this.mobile);
|
|
19499
19500
|
// Get modal presenting element (iOS only)
|
|
19500
19501
|
this._presentingElement = this.mobile ? document.querySelector('.ion-page') : null;
|
|
19501
19502
|
}
|
|
@@ -19656,10 +19657,10 @@ class AppImageGalleryComponent {
|
|
|
19656
19657
|
}
|
|
19657
19658
|
}
|
|
19658
19659
|
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: i1$1.TranslateService }, { token: i0.ChangeDetectorRef }, { token: ENVIRONMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
19659
|
-
AppImageGalleryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: AppImageGalleryComponent, selector: "app-image-gallery", inputs: { debug: "debug", readOnly: "readOnly", disabled: "disabled", showToolbar: "showToolbar", mobile: "mobile", mode: "mode", confirmBeforeDelete: "confirmBeforeDelete", dataSource: "dataSource" }, viewQueries: [{ propertyName: "slides", first: true, predicate: ["slides"], descendants: true }, { propertyName: "zoomModal", first: true, predicate: ["zoomModal"], 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=\"mosaic\">\n <mat-icon>view_module</mat-icon>\n </ion-segment-button>\n <ion-segment-button value=\"list\">\n <mat-icon>view_list</mat-icon>\n </ion-segment-button>\n </ion-segment>\n </ion-buttons>\n</ion-toolbar>\n\n<ion-content>\n <div *ngIf=\"mobile && zoomActive\" class=\"backdrop\" [style.opacity]=\"zoomScale\"></div>\n\n <ion-grid>\n <ion-row>\n <ion-col *ngFor=\"let row of rows; index as index\" [size]=\"_colSize\">\n <ion-card #card class=\"image-card\" (click)=\"clickRow(row, index)\"\n tappable\n @fadeInAnimation>\n <ng-container *ngIf=\"row|propertyGet: 'currentData'; let image\">\n <ion-slides #slides class=\"image-slide\" [options]=\"sliderOpts\" >\n <ion-slide>\n <div class=\"swiper-zoom-container\"\n (touchstart)=\"touchStart(card)\"\n (touchend)=\"touchEnd(card)\">\n <img [src]=\"image.url||image.dataUrl\">\n </div>\n </ion-slide>\n </ion-slides>\n\n <!-- title -->\n <ion-item lines=\"none\" color=\"light\" *ngIf=\"image.title || (!mobile && !readOnly)\">\n <ion-label *ngIf=\"image.title\">{{image.title}}</ion-label>\n <button mat-icon-button *ngIf=\"!readOnly\" slot=\"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-item>\n </ng-container>\n </ion-card>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n</ion-content>\n\n<!-- FAB button: add -->\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\"\n *ngIf=\"!readOnly && mobile\"\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 <ng-template>\n <ion-content>\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 (click)=\"deleteFromModal($event, modalSlides)\" 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", styles: ["mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}.image-slide,.image-card{overflow:visible}.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.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.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.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: "directive", type: i2.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.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: NgInitDirective, selector: "[ngInit]", outputs: ["ngInit"] }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
19660
|
+
AppImageGalleryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: AppImageGalleryComponent, selector: "app-image-gallery", inputs: { debug: "debug", readOnly: "readOnly", disabled: "disabled", showToolbar: "showToolbar", mobile: "mobile", mode: "mode", confirmBeforeDelete: "confirmBeforeDelete", showFabButton: "showFabButton", dataSource: "dataSource" }, viewQueries: [{ propertyName: "slides", first: true, predicate: ["slides"], descendants: true }, { propertyName: "zoomModal", first: true, predicate: ["zoomModal"], 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<ion-content>\n <div *ngIf=\"mobile && zoomActive\" class=\"backdrop\" [style.opacity]=\"zoomScale\"></div>\n\n <ion-grid>\n <ion-row>\n <ion-col *ngFor=\"let row of rows; index as index\" [size]=\"_colSize\">\n <ion-card #card class=\"image-card\" (click)=\"clickRow(row, index)\"\n tappable\n @fadeInAnimation>\n <ng-container *ngIf=\"row|propertyGet: 'currentData'; let image\">\n <ion-slides #slides class=\"image-slide\" [options]=\"sliderOpts\" >\n <ion-slide>\n <div class=\"swiper-zoom-container\"\n (touchstart)=\"touchStart(card)\"\n (touchend)=\"touchEnd(card)\">\n <img [src]=\"image.url||image.dataUrl\">\n </div>\n </ion-slide>\n </ion-slides>\n\n <!-- title -->\n <ion-item lines=\"none\" color=\"light\" *ngIf=\"image.title || (!mobile && !readOnly)\">\n <ion-label *ngIf=\"image.title\">{{image.title}}</ion-label>\n <button mat-icon-button *ngIf=\"!readOnly\" slot=\"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-item>\n </ng-container>\n </ion-card>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n</ion-content>\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 <ng-template>\n <ion-content>\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 (click)=\"deleteFromModal($event, modalSlides)\" 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", styles: ["mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}.image-slide,.image-card{overflow:visible}.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.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.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.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: "directive", type: i2.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.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: NgInitDirective, selector: "[ngInit]", outputs: ["ngInit"] }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
19660
19661
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: AppImageGalleryComponent, decorators: [{
|
|
19661
19662
|
type: Component,
|
|
19662
|
-
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=\"
|
|
19663
|
+
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<ion-content>\n <div *ngIf=\"mobile && zoomActive\" class=\"backdrop\" [style.opacity]=\"zoomScale\"></div>\n\n <ion-grid>\n <ion-row>\n <ion-col *ngFor=\"let row of rows; index as index\" [size]=\"_colSize\">\n <ion-card #card class=\"image-card\" (click)=\"clickRow(row, index)\"\n tappable\n @fadeInAnimation>\n <ng-container *ngIf=\"row|propertyGet: 'currentData'; let image\">\n <ion-slides #slides class=\"image-slide\" [options]=\"sliderOpts\" >\n <ion-slide>\n <div class=\"swiper-zoom-container\"\n (touchstart)=\"touchStart(card)\"\n (touchend)=\"touchEnd(card)\">\n <img [src]=\"image.url||image.dataUrl\">\n </div>\n </ion-slide>\n </ion-slides>\n\n <!-- title -->\n <ion-item lines=\"none\" color=\"light\" *ngIf=\"image.title || (!mobile && !readOnly)\">\n <ion-label *ngIf=\"image.title\">{{image.title}}</ion-label>\n <button mat-icon-button *ngIf=\"!readOnly\" slot=\"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-item>\n </ng-container>\n </ion-card>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n</ion-content>\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 <ng-template>\n <ion-content>\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 (click)=\"deleteFromModal($event, modalSlides)\" 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", styles: ["mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}.image-slide,.image-card{overflow:visible}.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"] }]
|
|
19663
19664
|
}], ctorParameters: function () { return [{ type: ImageService }, { type: i2.Platform }, { type: i2.AlertController }, { type: i1$1.TranslateService }, { type: i0.ChangeDetectorRef }, { type: Environment, decorators: [{
|
|
19664
19665
|
type: Optional
|
|
19665
19666
|
}, {
|
|
@@ -19679,6 +19680,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
|
|
|
19679
19680
|
type: Input
|
|
19680
19681
|
}], confirmBeforeDelete: [{
|
|
19681
19682
|
type: Input
|
|
19683
|
+
}], showFabButton: [{
|
|
19684
|
+
type: Input
|
|
19682
19685
|
}], dataSource: [{
|
|
19683
19686
|
type: Input
|
|
19684
19687
|
}], slides: [{
|
|
@@ -31591,7 +31594,7 @@ class GalleryTestPage {
|
|
|
31591
31594
|
GalleryTestPage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: GalleryTestPage, deps: [{ token: ImageAttachmentService }], target: i0.ɵɵFactoryTarget.Component });
|
|
31592
31595
|
GalleryTestPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: GalleryTestPage, selector: "app-gallery-test-page", providers: [
|
|
31593
31596
|
{ provide: ImageAttachmentService, useClass: ImageAttachmentService }
|
|
31594
|
-
], ngImport: i0, template: "<ion-header>\n <ion-toolbar color=\"primary\">\n\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n\n <ion-title>Image gallery</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content>\n <app-image-gallery [dataSource]=\"dataSource\">\n </app-image-gallery>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { kind: "component", type: AppImageGalleryComponent, selector: "app-image-gallery", inputs: ["debug", "readOnly", "disabled", "showToolbar", "mobile", "mode", "confirmBeforeDelete", "dataSource"] }] });
|
|
31597
|
+
], ngImport: i0, template: "<ion-header>\n <ion-toolbar color=\"primary\">\n\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n\n <ion-title>Image gallery</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content>\n <app-image-gallery [dataSource]=\"dataSource\">\n </app-image-gallery>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { kind: "component", type: AppImageGalleryComponent, selector: "app-image-gallery", inputs: ["debug", "readOnly", "disabled", "showToolbar", "mobile", "mode", "confirmBeforeDelete", "showFabButton", "dataSource"] }] });
|
|
31595
31598
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: GalleryTestPage, decorators: [{
|
|
31596
31599
|
type: Component,
|
|
31597
31600
|
args: [{ selector: 'app-gallery-test-page', providers: [
|