@pepperi/lib
Version:
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.1.
2 lines • 12.4 kB
JavaScript
!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/lib"),require("@pepperi/lib/field-title"),require("@pepperi/lib/icon"),require("@pepperi/lib/dialog"),require("@ngx-gallery/core"),require("@angular/animations"),require("hammerjs")):"function"==typeof define&&define.amd?define("@pepperi/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/lib","@pepperi/lib/field-title","@pepperi/lib/icon","@pepperi/lib/dialog","@ngx-gallery/core","@angular/animations","hammerjs"],t):t(((e=e||self).pepperi=e.pepperi||{},e.pepperi.lib=e.pepperi.lib||{},e.pepperi.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.lib,e.pepperi.lib["field-title"],e.pepperi.lib.icon,e.pepperi.lib.dialog,e.gallery,e.ng.animations)}(this,(function(e,t,i,r,n,l,a,o,s,m,p,g,h,c,d){"use strict";var u=["arrowRightTemplate"],y=["galleryCont"],f=["galleryDialogTemplate"],v=["galleryDialogCont"];function b(e,i){if(1&e){var r=t.ɵɵgetCurrentView();t.ɵɵelementStart(0,"h2",8),t.ɵɵelementStart(1,"span",9),t.ɵɵtext(2),t.ɵɵelementEnd(),t.ɵɵelementStart(3,"button",10),t.ɵɵelementStart(4,"mat-icon"),t.ɵɵelement(5,"pep-icon",11),t.ɵɵelementEnd(),t.ɵɵelementEnd(),t.ɵɵelementEnd(),t.ɵɵelementStart(6,"div",12,13),t.ɵɵelementStart(8,"gallery",14),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(),l=t.ɵɵreference(9);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",l)("autoPlay",!1)("counter",!1)}}function I(e,i){if(1&e&&(t.ɵɵelementStart(0,"span",16),t.ɵɵtext(1),t.ɵɵelementEnd()),2&e){var r=t.ɵɵnextContext().data;t.ɵɵproperty("@slideAnimation",void 0),t.ɵɵadvance(1),t.ɵɵtextInterpolate1(" ",null==r?null:r.title," ")}}function M(e,i){if(1&e&&t.ɵɵtemplate(0,I,2,2,"span",15),2&e){var r=i.index,n=i.type,l=i.currIndex;t.ɵɵproperty("ngIf","image"===n&&r===l)}}var C=d.trigger("slideAnimation",[d.state("in",d.style({transform:"translateY(0)",opacity:1})),d.transition(":enter",[d.style({transform:"translateY(-100%)",opacity:0}),d.animate(400)]),d.transition(":leave",[d.animate(400,d.style({transform:"translateY(-100%)",opacity:0}))])]),x=function(){function e(e,t,i,r,n,l,a,o){this.customizationService=e,this.dialogService=t,this.layoutService=i,this.fileService=r,this.gallery=n,this.renderer=l,this.element=a,this.cd=o,this.value="",this.key="",this.label="",this.xAlignment="0",this.rowSpan=1,this.controlType="images",this.form=null,this.objectId=null,this.showTitle=!1,this.currIndex=0,this.showThumbnails=!1,this.required=!1,this.readonly=!1,this.disabled=!1,this.fieldHeight="",this.standAlone=!1,this.galleryWidth=0,this.isVertical=!1,this.config={autoPlay:!1,imageSize:"contain",loadingStrategy:"lazy",gestures:!0,loop:!0,dots:!1,nav:!1,counter:!1}}return e.prototype.ngOnInit=function(){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,m.CustomizationService.STAND_ALONE_FIELD_CLASS_NAME)),this.fieldHeight=this.customizationService.calculateFieldHeight(this.layoutType,this.rowSpan,this.standAlone);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.config.navIcon=g.pepperiIconArrowRightAlt.data,this.currIndex="ItemFilmstripImages"===this.key&&0===this.currIndex&&this.items.length>1?Math.floor(this.items.length/2)-1:this.currIndex,this.galleryRef=this.gallery.ref(this.key+"-"+this.objectId+"-gallery")},e.prototype.ngAfterViewInit=function(){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.indexChange=function(e){this.currIndex=e.currIndex},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?"horizontal":"vertical"},e}();x.ɵfac=function(e){return new(e||x)(t.ɵɵdirectiveInject(m.CustomizationService),t.ɵɵdirectiveInject(h.DialogService),t.ɵɵdirectiveInject(m.LayoutService),t.ɵɵdirectiveInject(m.FileService),t.ɵɵdirectiveInject(c.Gallery),t.ɵɵdirectiveInject(t.Renderer2),t.ɵɵdirectiveInject(t.ElementRef),t.ɵɵdirectiveInject(t.ChangeDetectorRef))},x.ɵcmp=t.ɵɵdefineComponent({type:x,selectors:[["pep-images-filmstrip"]],viewQuery:function(e,i){var r;(1&e&&(t.ɵɵviewQuery(u,!0),t.ɵɵviewQuery(y,!0),t.ɵɵviewQuery(f,!0,t.TemplateRef),t.ɵɵviewQuery(v,!0)),2&e)&&(t.ɵɵqueryRefresh(r=t.ɵɵloadQuery())&&(i.arrowRightTemplate=r.first),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",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(e,i){1&e&&(t.ɵɵelementContainerStart(0,0),t.ɵɵelementStart(1,"div",1),t.ɵɵelement(2,"pep-field-title",2),t.ɵɵelementStart(3,"div",3,4),t.ɵɵelementStart(5,"gallery",5),t.ɵɵlistener("itemClick",(function(e){return i.enlargeImage(e)}))("indexChange",(function(e){return i.indexChange(e)}))("error",(function(e){return i.onError(e)})),t.ɵɵelementEnd(),t.ɵɵelementEnd(),t.ɵɵelementEnd(),t.ɵɵelementContainerEnd(),t.ɵɵtemplate(6,b,9,9,"ng-template",null,6,t.ɵɵtemplateRefExtractor),t.ɵɵtemplate(8,M,1,1,"ng-template",null,7,t.ɵɵtemplateRefExtractor)),2&e&&(t.ɵɵproperty("formGroup",i.form),t.ɵɵadvance(2),t.ɵɵproperty("label",i.label)("xAlignment",i.xAlignment)("showTitle",i.showTitle),t.ɵɵadvance(1),t.ɵɵstyleProp("height",i.fieldHeight),t.ɵɵproperty("ngClass",i.isVertical?"vertical-gallery":"horizontal-gallery"),t.ɵɵadvance(2),t.ɵɵpropertyInterpolate2("id","",i.key,"-",i.objectId,"-gallery"),t.ɵɵproperty("autoPlay",!1))},directives:[n.NgControlStatusGroup,n.FormGroupDirective,p.PepperiFieldTitleComponent,i.NgClass,c.GalleryComponent,o.MatDialogTitle,o.MatDialogClose,s.MatIcon,g.PepperiIconComponent,o.MatDialogContent,i.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:[C]}});var w=function(e){this.pepperiIconRegistry=e,this.pepperiIconRegistry.registerIcons([g.pepperiIconSystemEdit,g.pepperiIconSystemClose,g.pepperiIconArrowRightAlt,g.pepperiIconArrowLeftAlt])};w.ɵmod=t.ɵɵdefineNgModule({type:w}),w.ɵinj=t.ɵɵdefineInjector({factory:function(e){return new(e||w)(t.ɵɵinject(g.PepperiIconRegistry))},imports:[[i.CommonModule,r.BrowserAnimationsModule,n.ReactiveFormsModule,n.FormsModule,l.MatCommonModule,a.MatFormFieldModule,o.MatDialogModule,s.MatIconModule,c.GalleryModule,m.PepperiModule,g.PepperiIconModule,p.PepperiFieldTitleModule,h.PepperiDialogModule]]}),("undefined"==typeof ngJitMode||ngJitMode)&&t.ɵɵsetNgModuleScope(w,{declarations:[x],imports:[i.CommonModule,r.BrowserAnimationsModule,n.ReactiveFormsModule,n.FormsModule,l.MatCommonModule,a.MatFormFieldModule,o.MatDialogModule,s.MatIconModule,c.GalleryModule,m.PepperiModule,g.PepperiIconModule,p.PepperiFieldTitleModule,h.PepperiDialogModule],exports:[x]}),e.PepperiImagesFilmstripComponent=x,e.PepperiImagesFilmstripModule=w,e.slideInAnimation=C,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=pepperi-lib-images-filmstrip.umd.min.js.map