@offensichtbar-codestock/ngx-flex-masonry-grid/bundles/offensichtbar-codestock-ngx-flex-masonry-grid.umd.min.js

Angular Module for displaying items in a flex-based masonry layout without any third party dependencies

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/animations"),require("rxjs"),require("rxjs/operators"),require("@angular/platform-browser/animations")):"function"==typeof define&&define.amd?define("@offensichtbar-codestock/ngx-flex-masonry-grid",["exports","@angular/core","@angular/animations","rxjs","rxjs/operators","@angular/platform-browser/animations"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["offensichtbar-codestock"]=e["offensichtbar-codestock"]||{},e["offensichtbar-codestock"]["ngx-flex-masonry-grid"]={}),e.ng.core,e.ng.animations,e.rxjs,e.rxjs.operators,e.ng.platformBrowser.animations)}(this,(function(e,t,i,n,o,r){"use strict";
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation.

    Permission to use, copy, modify, and/or distribute this software for any
    purpose with or without fee is hereby granted.

    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
    PERFORMANCE OF THIS SOFTWARE.
    ***************************************************************************** */Object.create;function s(e,t){var i="function"==typeof Symbol&&e[Symbol.iterator];if(!i)return e;var n,o,r=i.call(e),s=[];try{for(;(void 0===t||t-- >0)&&!(n=r.next()).done;)s.push(n.value)}catch(e){o={error:e}}finally{try{n&&!n.done&&(i=r.return)&&i.call(r)}finally{if(o)throw o.error}}return s}function a(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(s(arguments[t]));return e}Object.create;var l=function(){function e(){this._imageobserved=new n.Subject,this.imageobserved=this._imageobserved.asObservable(),this._layoutshouldbeupdated=new n.Subject,this.layoutshouldbeupdated=this._layoutshouldbeupdated.asObservable(),this._itemremoved=new n.Subject,this.itemremoved=this._itemremoved.asObservable(),this._allitemsloaded=new n.Subject,this.allitemsloaded=this._allitemsloaded.asObservable(),this._loaded_items=[]}return Object.defineProperty(e.prototype,"loadeditems",{get:function(){return this._loaded_items},enumerable:!1,configurable:!0}),e.prototype.observeimage=function(e){var t=e.reduce((function(e,t){return e.height>t.height?e:t}));this._imageobserved.next(t)},e.prototype.addItem=function(e,t){this._loaded_items=a(this._loaded_items,[e]),this._layoutshouldbeupdated.next(e),this._loaded_items.length===t&&this._allitemsloaded.next()},e.prototype.removeItem=function(e){var t=this._loaded_items.findIndex((function(t){return Object.is(t,e)}));this._itemremoved.next(this._loaded_items[t]),this._loaded_items=a(this._loaded_items.slice(0,t),this._loaded_items.slice(t+1,this._loaded_items.length))},e.prototype.clearStack=function(){this._loaded_items=[]},e}();l.ɵprov=t.ɵɵdefineInjectable({factory:function(){return new l},token:l,providedIn:"root"}),l.decorators=[{type:t.Injectable,args:[{providedIn:"root"}]}],l.ctorParameters=function(){return[]};var h=new t.InjectionToken("CIRCULAR_IMPORT_PARENT"),u=".4s ease-out",c=function(){function e(){}return Object.defineProperty(e,"UPDATE_POSITION",{get:function(){return i.animation([i.animate(u,i.style({transform:"translateY({{ animatePosY }})"}))])},enumerable:!1,configurable:!0}),Object.defineProperty(e,"FADE_IN",{get:function(){return i.animation([i.style({opacity:0,visibility:"visible"}),i.animate(u,i.style({opacity:1}))])},enumerable:!1,configurable:!0}),Object.defineProperty(e,"TRIGGER_FADE_OUT",{get:function(){return i.trigger("TRIGGER_FADE_OUT",[i.state(":leave",i.style({opacity:1})),i.transition("* => void",i.animate(u,i.style({opacity:0})))])},enumerable:!1,configurable:!0}),e}(),m=function(){function e(e,t,i,n){this.element=e,this.builder=t,this.service=i,this.parent=n,this.heightprops="max-content",this._translateY=0,this._isready=!1,this._remove=!1}return Object.defineProperty(e.prototype,"getLeaveDrawer",{get:function(){return this._remove},enumerable:!1,configurable:!0}),e.prototype.animationIsDone=function(){this._remove&&this.service.removeItem(this)},Object.defineProperty(e.prototype,"height",{get:function(){return this.element.nativeElement.offsetHeight},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"isready",{get:function(){return this._isready},set:function(e){this._isready=e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"width",{get:function(){var e=window.getComputedStyle(this.element.nativeElement,null).getPropertyValue("margin-left").match(/\d+/),t=window.getComputedStyle(this.element.nativeElement,null).getPropertyValue("margin-right").match(/\d+/);return this.element.nativeElement.offsetWidth+(parseInt(e[0])+parseInt(t[0]))},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"translateY",{get:function(){return this._translateY},set:function(e){this._isready?this.upDatePosition(e):this.element.nativeElement.style.transform="translateY(-"+e+"px)",this._translateY=e},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){},e.prototype.upDatePosition=function(e){var t={animatePosY:"-"+e+"px"},n=i.useAnimation(c.UPDATE_POSITION,{params:t});this.builder.build(n).create(this.element.nativeElement).play()},e.prototype.playAnimation=function(){var e=c.FADE_IN;this.element.nativeElement.style.visibility="visible",this.builder.build(e).create(this.element.nativeElement).play()},e.prototype.ngAfterViewInit=function(){this.translateY=0,this.startLoading()},e.prototype.startLoading=function(){var e=this,t=this.element.nativeElement.querySelectorAll("img");this.images=new Set(t);var i=[];0!=t.length?Array.from(this.images).forEach((function(n){e.loadImage(n.src).then((function(o){var r;i=e.checkActionLoaded(i,t,o),null===(r=e.images)||void 0===r||r.delete(n)})).catch((function(o){var r;i=e.checkActionLoaded(i,t),null===(r=e.images)||void 0===r||r.delete(n)}))})):setTimeout((function(){e.service.observeimage(a(i,[{item:e,height:e.element.nativeElement.offsetHeight}]))}))},e.prototype.checkActionLoaded=function(e,t,i){return(e=a(e,[i||{item:this,height:this.element.nativeElement.offsetHeight}])).length===t.length&&this.service.observeimage(e),e},e.prototype.loadImage=function(e){var t=this;return new Promise((function(i,n){var o=new Image;o.onload=function(){return i({item:t,height:t.element.nativeElement.offsetHeight})},o.onerror=n,o.src=e}))},e.prototype.ngOnDestroy=function(){this._remove=!0},e}();m.decorators=[{type:t.Component,args:[{selector:"osb-ngx-flexmasonry-grid-item",template:"<ng-content></ng-content> ",animations:[c.TRIGGER_FADE_OUT]}]}],m.ctorParameters=function(){return[{type:t.ElementRef},{type:i.AnimationBuilder},{type:l},{type:void 0,decorators:[{type:t.Inject,args:[h]}]}]},m.propDecorators={heightprops:[{type:t.HostBinding,args:["style.height"]}],getLeaveDrawer:[{type:t.HostBinding,args:["@TRIGGER_FADE_OUT"]}],animationIsDone:[{type:t.HostListener,args:["@TRIGGER_FADE_OUT.done"]}]};var d=function(){function e(e,i){var n=this;this._element=e,this.service=i,this.layoutComplete=new t.EventEmitter,this.itemRemoved=new t.EventEmitter,this.itemLoaded=new t.EventEmitter,this.itemsLoaded=new t.EventEmitter,this._timeoutID=0,this._cols=0,this._rows=0,this._item_heights=[],this._row_heights=[],this.isAlive=!0,this.service.layoutshouldbeupdated.pipe(o.takeWhile((function(){return n.isAlive}))).subscribe((function(e){n.itemLoaded.emit(e),e.playAnimation(),e.isready=!0,n.layout()})),this.service.imageobserved.pipe(o.takeWhile((function(){return n.isAlive}))).subscribe((function(e){n.add(e)})),this.service.itemremoved.pipe(o.takeWhile((function(){return n.isAlive}))).subscribe((function(e){n.itemRemoved.emit(e),n.layout()})),this.service.allitemsloaded.pipe(o.takeWhile((function(){return n.isAlive}))).subscribe((function(){n.itemsLoaded.emit(n.items.length),n.layout()}))}return e.prototype.onResize=function(e){var t=this;clearTimeout(this._timeoutID),this._timeoutID=setTimeout((function(){t.layout()}),40)},e.prototype.ngOnInit=function(){},e.prototype.forceUpdateLayout=function(){var e,t;if((null===(e=this.items)||void 0===e?void 0:e.length)&&0!==(null===(t=this.items)||void 0===t?void 0:t.length)){var i=this.items.toArray().filter((function(e){return e.isready}));this.service.loadeditems.length===i.length&&this.layout()}},e.prototype.layout=function(){var e;if(null===(e=this.items)||void 0===e?void 0:e.length){this._cols=Math.round(this._element.nativeElement.offsetWidth/this.items.toArray()[0].width),this._rows=Math.ceil(this.items.length/this._cols),this._item_heights=this.items.map((function(e){return e.height})),this._row_heights=this.getRowHeights();var t=this.getElementOffsets();this.translateElements(t),this.service.loadeditems.length===this.items.length&&this.layoutComplete.emit()}},e.prototype.add=function(e){this.service.addItem(e.item,this.items.length)},e.prototype.getRowHeights=function(){for(var e=[],t=0;t<this._rows;t++){var i=this._item_heights.slice(t*this._cols,(t+1)*this._cols),n=Math.max.apply(Math,a(i));e.push(n)}return e},e.prototype.getElementOffsets=function(){var e=this,t=a(Array(this._cols)).map((function(e){return[]}));this._item_heights.forEach((function(i,n){var o=e._row_heights[Math.floor(n/e._cols)]-i;t[n%e._cols].push(o)}));for(var i=a(Array(this._cols)).map((function(e){return[]})),n=function(e){var n=0;i[e]=t[e].map((function(e){return n+=e})),i[e].pop(),i[e].unshift(0)},o=0;o<t.length;o++)n(o);for(var r=[],s=0;s<this.items.length;s++){var l=s%i.length,h=Math.floor(s/i.length);r.push(i[l][h])}return this.setContainerHeight(),r},e.prototype.setContainerHeight=function(){var e;if(!(this.items.length<=0)){for(var t=[],i=0;i<this._cols;i++){t.push([0]);for(var n=0;i+this._cols*n<this.items.length;){var o=t[i%this._cols],r=null===(e=this.items.toArray()[i+n*this._cols])||void 0===e?void 0:e.height;t[i%this._cols]=parseInt(o)+r,n++}}this._element.nativeElement.style.height=Math.max.apply(Math,a(t))+"px"}},e.prototype.translateElements=function(e){this.items.forEach((function(t,i){t.translateY=e[i]}))},e.prototype.ngAfterContentInit=function(){},e.prototype.ngOnDestroy=function(){this.isAlive=!1,this.service.clearStack()},e}();d.decorators=[{type:t.Component,args:[{selector:"osb-ngx-flexmasonry-grid",template:"<ng-content></ng-content> ",providers:[l,{provide:h,useExisting:d}],styles:["\n        \n\n        :host::ng-deep  > * {        \n            visibility: hidden;\n            box-sizing: border-box;\n            backface-visibility:hidden;\n        }\n    "]}]}],d.ctorParameters=function(){return[{type:t.ElementRef},{type:l}]},d.propDecorators={layoutComplete:[{type:t.Output}],itemRemoved:[{type:t.Output}],itemLoaded:[{type:t.Output}],itemsLoaded:[{type:t.Output}],items:[{type:t.ContentChildren,args:[m]}],onResize:[{type:t.HostListener,args:["window:resize",["$event"]]}]};var p=function(){};p.decorators=[{type:t.NgModule,args:[{declarations:[d,m],imports:[r.BrowserAnimationsModule],providers:[l],exports:[d,m]}]}],e.NgxFlexMasonryGridComponent=d,e.NgxFlexMasonryGridItemComponent=m,e.NgxFlexMasonryGridModule=p,e.NgxFlexMasonryGridService=l,e.ɵb=h,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=offensichtbar-codestock-ngx-flex-masonry-grid.umd.min.js.map