@ngx-gallery/lightbox/bundles/ngx-gallery-lightbox.umd.min.js

Angular gallery directive that hooks the lightbox with the images automatically.

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/platform-browser"),require("@angular/common"),require("@angular/animations"),require("@angular/cdk/portal"),require("@angular/cdk/keycodes"),require("@angular/cdk/overlay"),require("@angular/cdk/a11y"),require("@ngx-gallery/core"),require("@angular/core"),require("rxjs"),require("rxjs/operators")):"function"==typeof define&&define.amd?define("@ngx-gallery/lightbox",["exports","@angular/platform-browser","@angular/common","@angular/animations","@angular/cdk/portal","@angular/cdk/keycodes","@angular/cdk/overlay","@angular/cdk/a11y","@ngx-gallery/core","@angular/core","rxjs","rxjs/operators"],t):t((e["ngx-gallery"]=e["ngx-gallery"]||{},e["ngx-gallery"].lightbox={}),e.ng.platformBrowser,e.ng.common,e.ng.animations,e.ng.cdk.portal,e.ng.cdk.keycodes,e.ng.cdk.overlay,e.ng.cdk.a11y,e.core,e.ng.core,e.rxjs,e.rxjs.operators)}(this,function(e,t,o,r,c,p,n,i,a,s,l,d){"use strict";var u=new s.InjectionToken("lightboxConfig"),g=r.trigger("lightbox",[r.state("void, exit",r.style({opacity:0,transform:"scale(0.7)"})),r.state("enter",r.style({transform:"none"})),r.transition("* => enter",r.animate("150ms cubic-bezier(0, 0, 0.2, 1)",r.style({transform:"none",opacity:1}))),r.transition("* => void, * => exit",r.animate("75ms cubic-bezier(0.4, 0.0, 0.2, 1)",r.style({opacity:0})))]),h=function(){function e(e,t,o,r){this._document=e,this._focusTrapFactory=t,this._elementRef=o,this.sanitizer=r,this.state="enter",this._savePreviouslyFocusedElement()}return e.prototype.onAnimationDone=function(e){"enter"===e.toState?this._trapFocus():(this.overlayRef.dispose(),this._restoreFocus())},e.prototype._trapFocus=function(){this._focusTrap||(this._focusTrap=this._focusTrapFactory.create(this._elementRef.nativeElement)),this._focusTrap.focusInitialElementWhenReady()},e.prototype._savePreviouslyFocusedElement=function(){var e=this;this._document&&(this._elementFocusedBeforeDialogWasOpened=this._document.activeElement,this._elementRef.nativeElement.focus&&Promise.resolve().then(function(){return e._elementRef.nativeElement.focus()}))},e.prototype._restoreFocus=function(){var e=this._elementFocusedBeforeDialogWasOpened;e&&"function"==typeof e.focus&&e.focus(),this._focusTrap&&this._focusTrap.destroy()},e.decorators=[{type:s.Component,args:[{selector:"lightbox",changeDetection:s.ChangeDetectionStrategy.OnPush,animations:[g],template:'\n    <gallery [id]="id" [destroyRef]="false" [skipInitConfig]="true">\n      <i class="g-btn-close" aria-label="Close" (click)="overlayRef.detach()"\n         [innerHTML]="sanitizer.bypassSecurityTrustHtml(closeIcon)"></i>\n    </gallery>\n  ',host:{tabindex:"-1","aria-modal":"true","[attr.id]":'"lightbox-" + id',"[attr.role]":"role","[attr.aria-labelledby]":"ariaLabel ? null : ariaLabelledBy","[attr.aria-label]":"ariaLabel","[attr.aria-describedby]":"ariaDescribedBy || null","[@lightbox]":"state","(@lightbox.done)":"onAnimationDone($event)"},styles:["::ng-deep lightbox{position:relative;display:block;width:1100px;height:800px;max-width:94vw;max-height:90vh;border-radius:4px;overflow:hidden;box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12)}::ng-deep lightbox:focus{outline:0}::ng-deep lightbox gallery{overflow:hidden;margin:0;display:block;width:100%;height:100%}::ng-deep .g-backdrop{background-color:rgba(0,0,0,.32)}::ng-deep .fullscreen{width:100%}::ng-deep .fullscreen ::ng-deep lightbox{max-width:unset;max-height:unset;position:fixed;top:0;left:0;bottom:0;right:0;height:100%;width:100%;border-radius:0}::ng-deep .g-overlay{margin:auto}@media only screen and (max-width:480px){::ng-deep .g-overlay{width:100%}::ng-deep .g-overlay ::ng-deep lightbox{max-width:unset;max-height:unset;position:fixed;top:0;left:0;bottom:0;right:0;height:100%;width:100%;border-radius:0}}::ng-deep .g-btn-close{position:absolute;right:.9em;top:.9em;z-index:60;cursor:pointer;width:20px;height:20px}@media only screen and (max-width:480px){::ng-deep .g-btn-close{right:.7em;top:.7em}}"]}]}],e.ctorParameters=function(){return[{type:undefined,decorators:[{type:s.Optional},{type:s.Inject,args:[o.DOCUMENT]}]},{type:i.FocusTrapFactory},{type:s.ElementRef},{type:t.DomSanitizer}]},e}(),y=function(){return(y=Object.assign||function(e){for(var t,o=1,r=arguments.length;o<r;o++)for(var n in t=arguments[o])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e}).apply(this,arguments)},f={backdropClass:"g-backdrop",panelClass:"g-overlay",hasBackdrop:!0,keyboardShortcuts:!0,role:"lightbox",closeIcon:'<?xml version="1.0" encoding="UTF-8"?>\n<svg width="512px" height="512px" enable-background="new 0 0 47.971 47.971" version="1.1" viewBox="0 0 47.971 47.971" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">\n\t<path d="M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88   c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242   C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879   s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z" fill="#fff"/>\n</svg>\n'},b=function(){function e(e,t,o){this._gallery=t,this._overlay=o,this.opened=new l.Subject,this.closed=new l.Subject,this._config=e?y({},f,e):f}return e.prototype.setConfig=function(e){this._config=y({},this._config,e)},e.prototype.open=function(e,t,o){var r=this;void 0===e&&(e=0),void 0===t&&(t="lightbox");var n=o?y({},this._config,o):this._config,i={backdropClass:n.backdropClass,panelClass:n.panelClass,hasBackdrop:n.hasBackdrop,positionStrategy:this._overlay.position().global().centerHorizontally().centerVertically(),scrollStrategy:this._overlay.scrollStrategies.block(),disposeOnNavigation:!0},a=this._gallery.ref(t);a.set(e),this._overlayRef=this._overlay.create(i),this._overlayRef.attachments().subscribe(function(){return r.opened.next(t)}),this._overlayRef.detachments().subscribe(function(){return r.closed.next(t)});var s=new c.ComponentPortal(h),l=this._overlayRef.attach(s);l.instance.id=t,l.instance.overlayRef=this._overlayRef,l.instance.closeIcon=this._config.closeIcon,l.instance.role=this._config.role,l.instance.ariaLabel=this._config.ariaLabel,l.instance.ariaLabelledBy=this._config.ariaLabelledBy,l.instance.ariaDescribedBy=this._config.ariaDescribedBy,n.hasBackdrop&&this._overlayRef.backdropClick().subscribe(function(){return r.close()}),n.keyboardShortcuts&&this._overlayRef.keydownEvents().subscribe(function(e){switch(e.keyCode){case p.LEFT_ARROW:a.prev();break;case p.RIGHT_ARROW:a.next();break;case p.ESCAPE:r.close()}})},e.prototype.close=function(){this._overlayRef.hasAttached()&&this._overlayRef.detach()},e.decorators=[{type:s.Injectable}],e.ctorParameters=function(){return[{type:undefined,decorators:[{type:s.Optional},{type:s.Inject,args:[u]}]},{type:a.Gallery},{type:n.Overlay}]},e}(),m=function(){function e(e,t,o){this._lightbox=e,this._el=t,this._renderer=o,this.clickEvent=l.Subscription.EMPTY,this.index=0,this.id="root"}return e.prototype.ngOnInit=function(){var e=this;this._renderer.setStyle(this._el.nativeElement,"cursor","pointer"),this.clickEvent=l.fromEvent(this._el.nativeElement,"click").pipe(d.tap(function(){return e._lightbox.open(e.index,e.id)})).subscribe()},e.prototype.ngOnDestroy=function(){this.clickEvent.unsubscribe()},e.decorators=[{type:s.Directive,args:[{selector:"[lightbox]"}]}],e.ctorParameters=function(){return[{type:b},{type:s.ElementRef},{type:s.Renderer2}]},e.propDecorators={index:[{type:s.Input,args:["lightbox"]}],id:[{type:s.Input,args:["gallery"]}]},e}(),x=function(){function t(){}return t.withConfig=function(e){return{ngModule:t,providers:[{provide:u,useValue:e}]}},t.decorators=[{type:s.NgModule,args:[{imports:[n.OverlayModule,a.GalleryModule,i.A11yModule],declarations:[h,m],exports:[m],providers:[b],entryComponents:[h]}]}],t}();e.LIGHTBOX_CONFIG=u,e.LightboxComponent=h,e.Lightbox=b,e.LightboxModule=x,e.ɵa=g,e.ɵb=m,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=ngx-gallery-lightbox.umd.min.js.map