@pepperi/ngx-lib/bundles/pepperi-addons-ngx-lib-images-filmstrip.umd.min.js

Pepperi Angular Components and Services

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/platform-browser/animations"),require("@angular/forms"),require("@angular/material/core"),require("@angular/material/form-field"),require("@angular/material/dialog"),require("@angular/material/icon"),require("@pepperi/ngx-lib"),require("@pepperi/ngx-lib/field-title"),require("@pepperi/ngx-lib/icon"),require("@pepperi/ngx-lib/dialog"),require("@ngx-gallery/core"),require("@hallysonh/ngx-imageviewer"),require("@ngx-translate/core"),require("hammerjs")):"function"==typeof define&&define.amd?define("@pepperi/ngx-lib/images-filmstrip",["exports","@angular/core","@angular/common","@angular/platform-browser/animations","@angular/forms","@angular/material/core","@angular/material/form-field","@angular/material/dialog","@angular/material/icon","@pepperi/ngx-lib","@pepperi/ngx-lib/field-title","@pepperi/ngx-lib/icon","@pepperi/ngx-lib/dialog","@ngx-gallery/core","@hallysonh/ngx-imageviewer","@ngx-translate/core","hammerjs"],t):t(((e=e||self)["pepperi-addons"]=e["pepperi-addons"]||{},e["pepperi-addons"]["ngx-lib"]=e["pepperi-addons"]["ngx-lib"]||{},e["pepperi-addons"]["ngx-lib"]["images-filmstrip"]={}),e.ng.core,e.ng.common,e.ng.platformBrowser.animations,e.ng.forms,e.ng.material.core,e.ng.material.formField,e.ng.material.dialog,e.ng.material.icon,e["pepperi-addons"]["ngx-lib"],e["pepperi-addons"]["ngx-lib"]["field-title"],e["pepperi-addons"]["ngx-lib"].icon,e["pepperi-addons"]["ngx-lib"].dialog,e.gallery,e["image-viewer"],e.core$1)}(this,(function(e,t,i,r,n,a,l,o,s,g,m,p,d,c,h,u){"use strict";var f=["galleryCont"],y=["galleryDialogTemplate"],v=["galleryDialogCont"];function b(e,i){1&e&&t.ɵɵelementContainer(0)}function I(e,i){if(1&e){var r=t.ɵɵgetCurrentView();t.ɵɵelementContainerStart(0,4),t.ɵɵelementStart(1,"div",5),t.ɵɵelement(2,"pep-field-title",6),t.ɵɵelementStart(3,"div",7,8),t.ɵɵelementStart(5,"gallery",9),t.ɵɵlistener("itemClick",(function(e){return t.ɵɵrestoreView(r),t.ɵɵnextContext().enlargeImage(e)}))("indexChange",(function(e){return t.ɵɵrestoreView(r),t.ɵɵnextContext().indexChange(e)}))("error",(function(e){return t.ɵɵrestoreView(r),t.ɵɵnextContext().onError(e)})),t.ɵɵelementEnd(),t.ɵɵelementEnd(),t.ɵɵelementEnd(),t.ɵɵelementContainerEnd()}if(2&e){var n=t.ɵɵnextContext();t.ɵɵproperty("formGroup",n.form),t.ɵɵadvance(2),t.ɵɵproperty("label",n.label)("xAlignment",n.xAlignment)("showTitle",n.showTitle),t.ɵɵadvance(1),t.ɵɵstyleProp("height",n.fieldHeight),t.ɵɵproperty("ngClass",n.isVertical?"vertical-gallery":"horizontal-gallery"),t.ɵɵadvance(2),t.ɵɵpropertyInterpolate2("id","",n.key,"-",n.objectId,"-gallery")}}function x(e,i){if(1&e){var r=t.ɵɵgetCurrentView();t.ɵɵelementStart(0,"h2",10),t.ɵɵelementStart(1,"span",11),t.ɵɵtext(2),t.ɵɵelementEnd(),t.ɵɵelementStart(3,"button",12),t.ɵɵelementStart(4,"mat-icon"),t.ɵɵelement(5,"pep-icon",13),t.ɵɵelementEnd(),t.ɵɵelementEnd(),t.ɵɵelementEnd(),t.ɵɵelementStart(6,"div",14,15),t.ɵɵelementStart(8,"gallery",16),t.ɵɵlistener("indexChange",(function(e){return t.ɵɵrestoreView(r),t.ɵɵnextContext().indexChange(e)}))("error",(function(e){return t.ɵɵrestoreView(r),t.ɵɵnextContext().onError(e)})),t.ɵɵelementEnd(),t.ɵɵelementEnd()}if(2&e){var n=t.ɵɵnextContext(),a=t.ɵɵreference(6);t.ɵɵadvance(2),t.ɵɵtextInterpolate(n.label),t.ɵɵadvance(1),t.ɵɵproperty("mat-dialog-close",null),t.ɵɵadvance(5),t.ɵɵstyleProp("height","auto","px"),t.ɵɵpropertyInterpolate2("id","",n.key,"-",n.objectId,"-dlgGallery"),t.ɵɵproperty("itemTemplate",a)}}function C(e,i){if(1&e&&t.ɵɵelement(0,"ngx-imageviewer",17,18),2&e){var r=i.data;t.ɵɵproperty("src",r.src)}}function M(e){return{bgStyle:"#FFF",loadingMessage:e.instant("MESSAGES.INFO_LOADING_FILE"),nextPageButton:h.createButtonConfig("navigate_next","Next page",0,!1),beforePageButton:h.createButtonConfig("navigate_before","Previous page",1,!1),zoomOutButton:h.createButtonConfig("zoom_out","Zoom out",0,!1),zoomInButton:h.createButtonConfig("zoom_in","Zoom in",1,!1),rotateLeftButton:h.createButtonConfig("rotate_left","Rotate left",2,!1),rotateRightButton:h.createButtonConfig("rotate_right","Rotate right",3,!1),resetButton:h.createButtonConfig("autorenew","Reset",4,!1)}}var w=function(){function e(e,t,i,r,n,a,l,o,s,g){var m=this;this.customizationService=e,this.dialogService=t,this.layoutService=i,this.fileService=r,this.gallery=n,this.renderer=a,this.element=l,this.cd=o,this.dialogRef=s,this.data=g,this.value="",this.key="",this.label="",this.xAlignment="0",this.rowSpan=1,this.controlType="images",this.form=null,this.objectId="",this.showTitle=!1,this.currIndex=0,this.showThumbnails=!1,this.items=null,this.inDialog=!1,this.required=!1,this.readonly=!1,this.disabled=!1,this.fieldHeight="",this.standAlone=!1,this.galleryWidth=0,this.isVertical=!1,s&&g&&(this.inDialog=!0,Object.keys(g).forEach((function(e){e in m&&(m[e]=g[e])}))),this.config={navIcon:p.pepperiIconArrowRightAlt.data,counter:!1,gestures:!0,loadingStrategy:c.LoadingStrategy.Default}}return e.prototype.ngOnInit=function(){if(this.inDialog||(null===this.form&&(this.standAlone=!0,this.form=this.customizationService.getDefaultFromGroup(this.key,this.value,this.required,this.readonly,this.disabled),this.renderer.addClass(this.element.nativeElement,g.CustomizationService.STAND_ALONE_FIELD_CLASS_NAME)),this.fieldHeight=this.customizationService.calculateFieldHeight(this.layoutType,this.rowSpan,this.standAlone)),null===this.items){var e=this.value?this.value.split(";"):[];if(0===e.length){var t=this.fileService.getNoImagePath();e.push(t)}this.items=e.map((function(e){return new c.ImageItem({src:e,thumb:e})}))}this.config.dots=this.config.nav=this.items.length>1,this.config.thumb=!("ItemFilmstripImages"!==this.key&&!this.showThumbnails||!(this.items.length>1)),this.currIndex="ItemFilmstripImages"===this.key&&0===this.currIndex&&this.items.length>1?Math.floor(this.items.length/2)-1:this.currIndex},e.prototype.ngAfterViewInit=function(){this.inDialog?this.afterDialogOpened():(this.galleryRef=this.gallery.ref(this.key+"-"+this.objectId+"-gallery"),this.initGalleryStyle(this.galleryCont,this.galleryRef))},e.prototype.ngOnDestroy=function(){this.galleryRef&&this.galleryRef.destroy(),this.dialogGalleryRef&&this.dialogGalleryRef.destroy()},e.prototype.initGalleryStyle=function(e,t){this.setThumbnailDimension(e),t.setConfig(this.config),t.load(this.items);var i=this.currIndex;i>0&&t.set(i)},e.prototype.onError=function(e){var t=this.fileService.getNoImagePath(),i=new c.ImageItem({src:t,thumb:t});this.items.splice(e.itemIndex,1,i)},e.prototype.enlargeImage=function(e){var t=this,i=this.dialogService.openDialog(this.galleryDialogTemplate);i.afterOpened().subscribe((function(){t.afterDialogOpened()})),i.afterClosed().subscribe((function(e){t.galleryRef.set(t.currIndex)}))},e.prototype.afterDialogOpened=function(){this.dialogGalleryRef=this.gallery.ref(this.key+"-"+this.objectId+"-dlgGallery"),this.initGalleryStyle(this.galleryDialogCont,this.dialogGalleryRef)},e.prototype.setThumbnailDimension=function(e){if(this.galleryWidth=e.nativeElement.clientWidth,this.galleryHeight=e.nativeElement.clientHeight,this.isVertical=this.galleryWidth<this.galleryHeight,this.isVertical){var t=(this.galleryWidth-16*(this.items.length-1))/this.items.length;t=Math.min(Math.max(t,24),96),this.config.thumbHeight=t,this.config.thumbWidth=t+16}else{var i=(this.galleryHeight-16*(this.items.length-1))/this.items.length;i=Math.min(Math.max(i,24),96),this.config.thumbHeight=i+16,this.config.thumbWidth=i}this.config.thumbPosition=this.isVertical?c.ThumbnailsPosition.Bottom:this.layoutService.isRtl()?c.ThumbnailsPosition.Right:c.ThumbnailsPosition.Left,this.config.slidingDirection="ItemFilmstripImages"!==this.key||this.isVertical?c.SlidingDirection.Horizontal:c.SlidingDirection.Vertical},e.prototype.indexChange=function(e){this.currIndex=e.currIndex},e}();w.ɵfac=function(e){return new(e||w)(t.ɵɵdirectiveInject(g.CustomizationService),t.ɵɵdirectiveInject(d.DialogService),t.ɵɵdirectiveInject(g.LayoutService),t.ɵɵdirectiveInject(g.FileService),t.ɵɵdirectiveInject(c.Gallery),t.ɵɵdirectiveInject(t.Renderer2),t.ɵɵdirectiveInject(t.ElementRef),t.ɵɵdirectiveInject(t.ChangeDetectorRef),t.ɵɵdirectiveInject(o.MatDialogRef,8),t.ɵɵdirectiveInject(o.MAT_DIALOG_DATA,8))},w.ɵcmp=t.ɵɵdefineComponent({type:w,selectors:[["pep-images-filmstrip"]],viewQuery:function(e,i){var r;(1&e&&(t.ɵɵviewQuery(f,!0),t.ɵɵviewQuery(y,!0,t.TemplateRef),t.ɵɵviewQuery(v,!0)),2&e)&&(t.ɵɵqueryRefresh(r=t.ɵɵloadQuery())&&(i.galleryCont=r.first),t.ɵɵqueryRefresh(r=t.ɵɵloadQuery())&&(i.galleryDialogTemplate=r.first),t.ɵɵqueryRefresh(r=t.ɵɵloadQuery())&&(i.galleryDialogCont=r.first))},inputs:{value:"value",key:"key",label:"label",xAlignment:"xAlignment",rowSpan:"rowSpan",form:"form",objectId:"objectId",showTitle:"showTitle",layoutType:"layoutType",currIndex:"currIndex",showThumbnails:"showThumbnails"},features:[t.ɵɵProvidersFeature([{provide:h.IMAGEVIEWER_CONFIG,useFactory:M,deps:[u.TranslateService]}])],decls:7,vars:3,consts:[[4,"ngIf","ngIfThen","ngIfElse"],["regularTemplate",""],["galleryDialogTemplate",""],["itemTemplate",""],[3,"formGroup"],[1,"images-filmstrip-container"],[3,"label","xAlignment","showTitle"],[1,"img-wrapper",3,"ngClass"],["galleryCont",""],[3,"id","itemClick","indexChange","error"],["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","indexChange","error"],["id","ngxViewerImage",3,"src"],["ngxViewerImage",""]],template:function(e,i){if(1&e&&(t.ɵɵtemplate(0,b,1,0,"ng-container",0),t.ɵɵtemplate(1,I,6,9,"ng-template",null,1,t.ɵɵtemplateRefExtractor),t.ɵɵtemplate(3,x,9,7,"ng-template",null,2,t.ɵɵtemplateRefExtractor),t.ɵɵtemplate(5,C,2,1,"ng-template",null,3,t.ɵɵtemplateRefExtractor)),2&e){var r=t.ɵɵreference(2),n=t.ɵɵreference(4);t.ɵɵproperty("ngIf",i.inDialog)("ngIfThen",n)("ngIfElse",r)}},directives:[i.NgIf,n.NgControlStatusGroup,n.FormGroupDirective,m.PepperiFieldTitleComponent,i.NgClass,c.GalleryComponent,o.MatDialogTitle,o.MatDialogClose,s.MatIcon,p.PepperiIconComponent,o.MatDialogContent,h.ɵb],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)}"]});var S=function(e){this.pepperiIconRegistry=e,this.pepperiIconRegistry.registerIcons([p.pepperiIconSystemEdit,p.pepperiIconSystemClose,p.pepperiIconArrowRightAlt,p.pepperiIconArrowLeftAlt])};S.ɵmod=t.ɵɵdefineNgModule({type:S}),S.ɵinj=t.ɵɵdefineInjector({factory:function(e){return new(e||S)(t.ɵɵinject(p.PepperiIconRegistry))},imports:[[i.CommonModule,r.BrowserAnimationsModule,n.ReactiveFormsModule,n.FormsModule,a.MatCommonModule,l.MatFormFieldModule,o.MatDialogModule,s.MatIconModule,c.GalleryModule,h.ImageViewerModule,g.PepperiModule,p.PepperiIconModule,m.PepperiFieldTitleModule,d.PepperiDialogModule]]}),("undefined"==typeof ngJitMode||ngJitMode)&&t.ɵɵsetNgModuleScope(S,{declarations:[w],imports:[i.CommonModule,r.BrowserAnimationsModule,n.ReactiveFormsModule,n.FormsModule,a.MatCommonModule,l.MatFormFieldModule,o.MatDialogModule,s.MatIconModule,c.GalleryModule,h.ImageViewerModule,g.PepperiModule,p.PepperiIconModule,m.PepperiFieldTitleModule,d.PepperiDialogModule],exports:[w]}),e.PepperiImagesFilmstripComponent=w,e.PepperiImagesFilmstripModule=S,e.createViewerConfig=M,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=pepperi-addons-ngx-lib-images-filmstrip.umd.min.js.map