@pepperi/lib
Version:
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.1.
427 lines (421 loc) • 24.5 kB
JavaScript
import { ɵɵgetCurrentView, ɵɵelementStart, ɵɵtext, ɵɵelementEnd, ɵɵelement, ɵɵlistener, ɵɵrestoreView, ɵɵnextContext, ɵɵreference, ɵɵadvance, ɵɵtextInterpolate, ɵɵproperty, ɵɵstyleProp, ɵɵpropertyInterpolate2, ɵɵtextInterpolate1, ɵɵtemplate, ɵɵdirectiveInject, Renderer2, ElementRef, ChangeDetectorRef, ɵɵdefineComponent, ɵɵviewQuery, TemplateRef, ɵɵqueryRefresh, ɵɵloadQuery, ɵɵelementContainerStart, ɵɵelementContainerEnd, ɵɵtemplateRefExtractor, ɵsetClassMetadata, Component, ViewChild, Input, ɵɵdefineNgModule, ɵɵdefineInjector, ɵɵinject, ɵɵsetNgModuleScope, NgModule } from '@angular/core';
import { NgClass, NgIf, CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgControlStatusGroup, FormGroupDirective, ReactiveFormsModule, FormsModule } from '@angular/forms';
import { MatCommonModule } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatDialogTitle, MatDialogClose, MatDialogContent, MatDialogModule } from '@angular/material/dialog';
import { MatIcon, MatIconModule } from '@angular/material/icon';
import { CustomizationService, LayoutService, FileService, PepperiModule } from '@pepperi/lib';
import { PepperiFieldTitleComponent, PepperiFieldTitleModule } from '@pepperi/lib/field-title';
import { pepperiIconArrowRightAlt, PepperiIconComponent, pepperiIconSystemEdit, pepperiIconSystemClose, pepperiIconArrowLeftAlt, PepperiIconRegistry, PepperiIconModule } from '@pepperi/lib/icon';
import { DialogService, PepperiDialogModule } from '@pepperi/lib/dialog';
import { ImageItem, ThumbnailsPosition, Gallery, GalleryComponent, GalleryModule } from '@ngx-gallery/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
import 'hammerjs';
const _c0 = ["arrowRightTemplate"];
const _c1 = ["galleryCont"];
const _c2 = ["galleryDialogTemplate"];
const _c3 = ["galleryDialogCont"];
function PepperiImagesFilmstripComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
const _r7 = ɵɵgetCurrentView();
ɵɵelementStart(0, "h2", 8);
ɵɵelementStart(1, "span", 9);
ɵɵtext(2);
ɵɵelementEnd();
ɵɵelementStart(3, "button", 10);
ɵɵelementStart(4, "mat-icon");
ɵɵelement(5, "pep-icon", 11);
ɵɵelementEnd();
ɵɵelementEnd();
ɵɵelementEnd();
ɵɵelementStart(6, "div", 12, 13);
ɵɵelementStart(8, "gallery", 14);
ɵɵlistener("indexChange", function PepperiImagesFilmstripComponent_ng_template_6_Template_gallery_indexChange_8_listener($event) { ɵɵrestoreView(_r7); const ctx_r6 = ɵɵnextContext(); return ctx_r6.indexChange($event); })("error", function PepperiImagesFilmstripComponent_ng_template_6_Template_gallery_error_8_listener($event) { ɵɵrestoreView(_r7); const ctx_r8 = ɵɵnextContext(); return ctx_r8.onError($event); });
ɵɵelementEnd();
ɵɵelementEnd();
} if (rf & 2) {
const ctx_r2 = ɵɵnextContext();
const _r3 = ɵɵreference(9);
ɵɵadvance(2);
ɵɵtextInterpolate(ctx_r2.label);
ɵɵadvance(1);
ɵɵproperty("mat-dialog-close", null);
ɵɵadvance(5);
ɵɵstyleProp("height", "auto", "px");
ɵɵpropertyInterpolate2("id", "", ctx_r2.key, "-", ctx_r2.objectId, "-dlgGallery");
ɵɵproperty("itemTemplate", _r3)("autoPlay", false)("counter", false);
} }
function PepperiImagesFilmstripComponent_ng_template_8_span_0_Template(rf, ctx) { if (rf & 1) {
ɵɵelementStart(0, "span", 16);
ɵɵtext(1);
ɵɵelementEnd();
} if (rf & 2) {
const data_r11 = ɵɵnextContext().data;
ɵɵproperty("@slideAnimation", undefined);
ɵɵadvance(1);
ɵɵtextInterpolate1(" ", data_r11 == null ? null : data_r11.title, " ");
} }
function PepperiImagesFilmstripComponent_ng_template_8_Template(rf, ctx) { if (rf & 1) {
ɵɵtemplate(0, PepperiImagesFilmstripComponent_ng_template_8_span_0_Template, 2, 2, "span", 15);
} if (rf & 2) {
const index_r9 = ctx.index;
const type_r10 = ctx.type;
const currIndex_r12 = ctx.currIndex;
ɵɵproperty("ngIf", type_r10 === "image" && index_r9 === currIndex_r12);
} }
const slideInAnimation = trigger('slideAnimation', [
state('in', style({ transform: 'translateY(0)', opacity: 1 })),
transition(':enter', [
style({ transform: 'translateY(-100%)', opacity: 0 }),
animate(400)
]),
transition(':leave', [
animate(400, style({ transform: 'translateY(-100%)', opacity: 0 }))
])
]);
class PepperiImagesFilmstripComponent {
constructor(customizationService, dialogService, layoutService, fileService, gallery, renderer, element, cd) {
this.customizationService = customizationService;
this.dialogService = dialogService;
this.layoutService = layoutService;
this.fileService = fileService;
this.gallery = gallery;
this.renderer = renderer;
this.element = element;
this.cd = cd;
// @ViewChild('ngxViewerImage') ngxViewerImage: any; // TODO: Check if we need to use this??
this.value = '';
this.key = '';
this.label = '';
this.xAlignment = '0';
this.rowSpan = 1;
this.controlType = 'images';
this.form = null;
this.objectId = null;
this.showTitle = false;
this.currIndex = 0;
this.showThumbnails = false;
this.required = false;
this.readonly = false;
this.disabled = false;
this.fieldHeight = '';
this.standAlone = false;
this.galleryWidth = 0;
this.isVertical = false;
this.config = {
// loadingMode: 'indeterminate',
autoPlay: false,
imageSize: 'contain',
loadingStrategy: 'lazy',
gestures: true,
loop: true,
dots: false,
nav: false,
counter: false // Show counter
};
}
ngOnInit() {
if (this.form === null) {
this.standAlone = true;
this.form = this.customizationService.getDefaultFromGroup(this.key, this.value, this.required, this.readonly, this.disabled);
this.renderer.addClass(this.element.nativeElement, CustomizationService.STAND_ALONE_FIELD_CLASS_NAME);
}
this.fieldHeight = this.customizationService.calculateFieldHeight(this.layoutType, this.rowSpan, this.standAlone);
const imgArr = this.value ? this.value.split(';') : [];
// add No image image when there is no images
if (imgArr.length === 0) {
const noImageSrc = this.fileService.getNoImagePath();
imgArr.push(noImageSrc);
}
this.items = imgArr.map(img => new ImageItem({ src: img, thumb: img }));
this.config.dots = this.config.nav = this.items.length > 1;
this.config.thumb = (this.key === 'ItemFilmstripImages' || this.showThumbnails) && this.items.length > 1 ? true : false;
this.config.navIcon = pepperiIconArrowRightAlt.data;
this.currIndex =
this.key === 'ItemFilmstripImages' &&
this.currIndex === 0 &&
this.items.length > 1 ?
Math.floor(this.items.length / 2) - 1 : this.currIndex;
this.galleryRef = this.gallery.ref(this.key + '-' + this.objectId + '-gallery');
}
ngAfterViewInit() {
this.initGalleryStyle(this.galleryCont, this.galleryRef);
}
ngOnDestroy() {
if (this.galleryRef) {
this.galleryRef.destroy();
}
if (this.dialogGalleryRef) {
this.dialogGalleryRef.destroy();
}
}
initGalleryStyle(galleryContainer, galleryRef) {
// Set thumbnails position and sliding direction
this.setThumbnailDimension(galleryContainer);
galleryRef.setConfig(this.config);
galleryRef.load(this.items);
const currentIndex = this.currIndex;
if (currentIndex > 0) {
galleryRef.set(currentIndex);
}
}
indexChange(item) {
this.currIndex = item.currIndex;
// if (this.ngxViewerImage && this.ngxViewerImage.scale) {
// this.ngxViewerImage.scale = 1;
// this.updateStyle();
// }
}
onError(e) {
const noImageSrc = this.fileService.getNoImagePath();
const noimg = new ImageItem({ src: noImageSrc, thumb: noImageSrc });
this.items.splice(e.itemIndex, 1, noimg);
}
enlargeImage(event) {
const dialogRef = this.dialogService.openDialog(this.galleryDialogTemplate);
dialogRef.afterOpened().subscribe(() => {
this.afterDialogOpened();
});
// Update currentIndex in galleryRef
dialogRef.afterClosed().subscribe(value => {
this.galleryRef.set(this.currIndex);
});
}
afterDialogOpened() {
this.dialogGalleryRef = this.gallery.ref(this.key + '-' + this.objectId + '-dlgGallery');
this.initGalleryStyle(this.galleryDialogCont, this.dialogGalleryRef);
}
setThumbnailDimension(galleryContainer) {
this.galleryWidth = galleryContainer.nativeElement.clientWidth;
this.galleryHeight = galleryContainer.nativeElement.clientHeight;
this.isVertical = this.galleryWidth < this.galleryHeight;
if (this.isVertical) {
let width = (this.galleryWidth - ((this.items.length - 1) * 16)) / this.items.length;
width = Math.min(Math.max(width, 24), 96);
this.config.thumbHeight = width;
this.config.thumbWidth = (width + 16);
}
else {
let height = (this.galleryHeight - ((this.items.length - 1) * 16)) / this.items.length;
height = Math.min(Math.max(height, 24), 96);
this.config.thumbHeight = (height + 16);
this.config.thumbWidth = height;
}
this.config.thumbPosition = this.isVertical ?
ThumbnailsPosition.Bottom : this.layoutService.isRtl() ?
ThumbnailsPosition.Right : ThumbnailsPosition.Left;
this.config.slidingDirection = this.key !== 'ItemFilmstripImages' ? 'horizontal' : this.isVertical ? 'horizontal' : 'vertical';
}
}
PepperiImagesFilmstripComponent.ɵfac = function PepperiImagesFilmstripComponent_Factory(t) { return new (t || PepperiImagesFilmstripComponent)(ɵɵdirectiveInject(CustomizationService), ɵɵdirectiveInject(DialogService), ɵɵdirectiveInject(LayoutService), ɵɵdirectiveInject(FileService), ɵɵdirectiveInject(Gallery), ɵɵdirectiveInject(Renderer2), ɵɵdirectiveInject(ElementRef), ɵɵdirectiveInject(ChangeDetectorRef)); };
PepperiImagesFilmstripComponent.ɵcmp = ɵɵdefineComponent({ type: PepperiImagesFilmstripComponent, selectors: [["pep-images-filmstrip"]], viewQuery: function PepperiImagesFilmstripComponent_Query(rf, ctx) { if (rf & 1) {
ɵɵviewQuery(_c0, true);
ɵɵviewQuery(_c1, true);
ɵɵviewQuery(_c2, true, TemplateRef);
ɵɵviewQuery(_c3, true);
} if (rf & 2) {
var _t;
ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.arrowRightTemplate = _t.first);
ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.galleryCont = _t.first);
ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.galleryDialogTemplate = _t.first);
ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.galleryDialogCont = _t.first);
} }, inputs: { value: "value", key: "key", label: "label", xAlignment: "xAlignment", rowSpan: "rowSpan", form: "form", objectId: "objectId", showTitle: "showTitle", layoutType: "layoutType", currIndex: "currIndex", showThumbnails: "showThumbnails", items: "items" }, decls: 10, vars: 10, consts: [[3, "formGroup"], [1, "images-filmstrip-container"], [3, "label", "xAlignment", "showTitle"], [1, "img-wrapper", 3, "ngClass"], ["galleryCont", ""], [3, "id", "autoPlay", "itemClick", "indexChange", "error"], ["galleryDialogTemplate", ""], ["itemTemplate", ""], ["mat-dialog-title", "", 1, "pepperi-border-bottom"], [1, "pull-left", "flip"], ["mat-button", "", 1, "pepperi-button", "icon-button", "md", "weak", "pull-right", "flip", 3, "mat-dialog-close"], ["name", "system_close"], ["mat-dialog-content", ""], ["galleryDialogCont", ""], [3, "id", "itemTemplate", "autoPlay", "counter", "indexChange", "error"], ["class", "item-text", 4, "ngIf"], [1, "item-text"]], template: function PepperiImagesFilmstripComponent_Template(rf, ctx) { if (rf & 1) {
ɵɵelementContainerStart(0, 0);
ɵɵelementStart(1, "div", 1);
ɵɵelement(2, "pep-field-title", 2);
ɵɵelementStart(3, "div", 3, 4);
ɵɵelementStart(5, "gallery", 5);
ɵɵlistener("itemClick", function PepperiImagesFilmstripComponent_Template_gallery_itemClick_5_listener($event) { return ctx.enlargeImage($event); })("indexChange", function PepperiImagesFilmstripComponent_Template_gallery_indexChange_5_listener($event) { return ctx.indexChange($event); })("error", function PepperiImagesFilmstripComponent_Template_gallery_error_5_listener($event) { return ctx.onError($event); });
ɵɵelementEnd();
ɵɵelementEnd();
ɵɵelementEnd();
ɵɵelementContainerEnd();
ɵɵtemplate(6, PepperiImagesFilmstripComponent_ng_template_6_Template, 9, 9, "ng-template", null, 6, ɵɵtemplateRefExtractor);
ɵɵtemplate(8, PepperiImagesFilmstripComponent_ng_template_8_Template, 1, 1, "ng-template", null, 7, ɵɵtemplateRefExtractor);
} if (rf & 2) {
ɵɵproperty("formGroup", ctx.form);
ɵɵadvance(2);
ɵɵproperty("label", ctx.label)("xAlignment", ctx.xAlignment)("showTitle", ctx.showTitle);
ɵɵadvance(1);
ɵɵstyleProp("height", ctx.fieldHeight);
ɵɵproperty("ngClass", ctx.isVertical ? "vertical-gallery" : "horizontal-gallery");
ɵɵadvance(2);
ɵɵpropertyInterpolate2("id", "", ctx.key, "-", ctx.objectId, "-gallery");
ɵɵproperty("autoPlay", false);
} }, directives: [NgControlStatusGroup, FormGroupDirective, PepperiFieldTitleComponent, NgClass, GalleryComponent, MatDialogTitle, MatDialogClose, MatIcon, PepperiIconComponent, MatDialogContent, NgIf], styles: ["[_nghost-%COMP%]{display:-ms-grid;display:grid;height:inherit;width:100%}[_nghost-%COMP%] > *[_ngcontent-%COMP%]{-ms-grid-row-align:center;align-self:center}.images-filmstrip-container[_ngcontent-%COMP%]{height:100%}.images-filmstrip-container[_ngcontent-%COMP%] .img-wrapper[_ngcontent-%COMP%], gallery[_ngcontent-%COMP%]{height:calc(100% - 1.5rem)}gallery[_ngcontent-%COMP%]{min-height:calc(100% - 1.5rem)}.mat-dialog-content[_ngcontent-%COMP%]{max-height:80vh;min-height:80vh}.mat-dialog-content[_ngcontent-%COMP%] gallery[_ngcontent-%COMP%]{min-height:calc(100% - 50px);min-width:65vw} gallery-thumbs{margin:0 var(--pep-spacing-lg,1rem) 0 var(--pep-spacing-sm,.5rem)} gallery-thumbs gallery-thumb{border-radius:var(--pep-border-radius-md,.25rem);margin:var(--pep-spacing-sm,.5rem) 0;padding:0!important} gallery-thumbs gallery-thumb .g-image-item{background-size:cover} gallery-item gallery-image .g-image-item{border-radius:var(--pep-border-radius-lg,.5rem)} gallery-item:hover{cursor:pointer} gallery-dots{border-radius:var(--pep-border-radius-md,.25rem);position:absolute!important} gallery-dots.pepperi-button{display:flex!important} .img-container{align-items:center;display:flex} .g-nav-next, .g-nav-prev{border-radius:var(--pep-border-radius-md,.25rem);height:2rem!important;padding:.25rem;width:2rem!important} .g-nav-next .mat-icon, .g-nav-prev .mat-icon{display:inline-block!important} .g-nav-prev{transform:translateY(-50%) perspective(1px) scaleX(-1)!important}.vertical-gallery[_ngcontent-%COMP%] gallery-thumbs{margin:var(--pep-spacing-lg,1rem) 0 var(--pep-spacing-sm,.5rem) 0}.vertical-gallery[_ngcontent-%COMP%] gallery-thumbs gallery-thumb{margin:0 var(--pep-spacing-sm,.5rem)}"], data: { animation: [slideInAnimation] } });
/*@__PURE__*/ (function () { ɵsetClassMetadata(PepperiImagesFilmstripComponent, [{
type: Component,
args: [{
selector: 'pep-images-filmstrip',
templateUrl: './images-filmstrip.component.html',
styleUrls: ['./images-filmstrip.component.scss'],
animations: [slideInAnimation]
}]
}], function () { return [{ type: CustomizationService }, { type: DialogService }, { type: LayoutService }, { type: FileService }, { type: Gallery }, { type: Renderer2 }, { type: ElementRef }, { type: ChangeDetectorRef }]; }, { arrowRightTemplate: [{
type: ViewChild,
args: ['arrowRightTemplate']
}], value: [{
type: Input
}], key: [{
type: Input
}], label: [{
type: Input
}], xAlignment: [{
type: Input
}], rowSpan: [{
type: Input
}], form: [{
type: Input
}], objectId: [{
type: Input
}], showTitle: [{
type: Input
}], layoutType: [{
type: Input
}], currIndex: [{
type: Input
}], showThumbnails: [{
type: Input
}], items: [{
type: Input
}], galleryCont: [{
type: ViewChild,
args: ['galleryCont']
}], galleryDialogTemplate: [{
type: ViewChild,
args: ['galleryDialogTemplate', { read: TemplateRef }]
}], galleryDialogCont: [{
type: ViewChild,
args: ['galleryDialogCont']
}] }); })();
class PepperiImagesFilmstripModule {
constructor(pepperiIconRegistry) {
this.pepperiIconRegistry = pepperiIconRegistry;
this.pepperiIconRegistry.registerIcons([
pepperiIconSystemEdit,
pepperiIconSystemClose,
pepperiIconArrowRightAlt,
pepperiIconArrowLeftAlt
]);
}
}
PepperiImagesFilmstripModule.ɵmod = ɵɵdefineNgModule({ type: PepperiImagesFilmstripModule });
PepperiImagesFilmstripModule.ɵinj = ɵɵdefineInjector({ factory: function PepperiImagesFilmstripModule_Factory(t) { return new (t || PepperiImagesFilmstripModule)(ɵɵinject(PepperiIconRegistry)); }, imports: [[
CommonModule,
BrowserAnimationsModule,
ReactiveFormsModule,
FormsModule,
// Material modules,
MatCommonModule,
MatFormFieldModule,
MatDialogModule,
MatIconModule,
// External modules
GalleryModule,
// ImageViewerModule.forRoot({
// btnClass: 'default', // The CSS class(es) that will apply to the buttons
// zoomFactor: 0.1, // The amount that the scale will be increased by
// containerBackgroundColor: 'transparent', // The color to use for the background. This can provided in hex, or rgb(a).
// wheelZoom: true, // If true, the mouse wheel can be used to zoom in
// allowFullscreen: false, // If true, the fullscreen button will be shown, allowing the user to entr fullscreen mode
// btnIcons: {
// // The icon classes that will apply to the buttons. By default, font-awesome is used.
// zoomIn: 'fa fa-plus',
// zoomOut: 'fa fa-minus',
// rotateClockwise: 'fa fa-repeat',
// rotateCounterClockwise: 'fa fa-undo',
// next: 'fa fa-arrow-right',
// prev: 'fa fa-arrow-left',
// fullscreen: 'fa fa-arrows-alt'
// }
// }),
// Pepperi modules
PepperiModule,
PepperiIconModule,
PepperiFieldTitleModule,
PepperiDialogModule
]] });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && ɵɵsetNgModuleScope(PepperiImagesFilmstripModule, { declarations: [PepperiImagesFilmstripComponent], imports: [CommonModule,
BrowserAnimationsModule,
ReactiveFormsModule,
FormsModule,
// Material modules,
MatCommonModule,
MatFormFieldModule,
MatDialogModule,
MatIconModule,
// External modules
GalleryModule,
// ImageViewerModule.forRoot({
// btnClass: 'default', // The CSS class(es) that will apply to the buttons
// zoomFactor: 0.1, // The amount that the scale will be increased by
// containerBackgroundColor: 'transparent', // The color to use for the background. This can provided in hex, or rgb(a).
// wheelZoom: true, // If true, the mouse wheel can be used to zoom in
// allowFullscreen: false, // If true, the fullscreen button will be shown, allowing the user to entr fullscreen mode
// btnIcons: {
// // The icon classes that will apply to the buttons. By default, font-awesome is used.
// zoomIn: 'fa fa-plus',
// zoomOut: 'fa fa-minus',
// rotateClockwise: 'fa fa-repeat',
// rotateCounterClockwise: 'fa fa-undo',
// next: 'fa fa-arrow-right',
// prev: 'fa fa-arrow-left',
// fullscreen: 'fa fa-arrows-alt'
// }
// }),
// Pepperi modules
PepperiModule,
PepperiIconModule,
PepperiFieldTitleModule,
PepperiDialogModule], exports: [PepperiImagesFilmstripComponent] }); })();
/*@__PURE__*/ (function () { ɵsetClassMetadata(PepperiImagesFilmstripModule, [{
type: NgModule,
args: [{
imports: [
CommonModule,
BrowserAnimationsModule,
ReactiveFormsModule,
FormsModule,
// Material modules,
MatCommonModule,
MatFormFieldModule,
MatDialogModule,
MatIconModule,
// External modules
GalleryModule,
// ImageViewerModule.forRoot({
// btnClass: 'default', // The CSS class(es) that will apply to the buttons
// zoomFactor: 0.1, // The amount that the scale will be increased by
// containerBackgroundColor: 'transparent', // The color to use for the background. This can provided in hex, or rgb(a).
// wheelZoom: true, // If true, the mouse wheel can be used to zoom in
// allowFullscreen: false, // If true, the fullscreen button will be shown, allowing the user to entr fullscreen mode
// btnIcons: {
// // The icon classes that will apply to the buttons. By default, font-awesome is used.
// zoomIn: 'fa fa-plus',
// zoomOut: 'fa fa-minus',
// rotateClockwise: 'fa fa-repeat',
// rotateCounterClockwise: 'fa fa-undo',
// next: 'fa fa-arrow-right',
// prev: 'fa fa-arrow-left',
// fullscreen: 'fa fa-arrows-alt'
// }
// }),
// Pepperi modules
PepperiModule,
PepperiIconModule,
PepperiFieldTitleModule,
PepperiDialogModule
],
exports: [PepperiImagesFilmstripComponent],
declarations: [PepperiImagesFilmstripComponent],
}]
}], function () { return [{ type: PepperiIconRegistry }]; }, null); })();
/*
* Public API Surface of pepperi-lib/images-filmstrip
*/
/**
* Generated bundle index. Do not edit.
*/
export { PepperiImagesFilmstripComponent, PepperiImagesFilmstripModule, slideInAnimation };
//# sourceMappingURL=pepperi-lib-images-filmstrip.js.map