ngx-contextual-action-bar/bundles/ngx-contextual-action-bar.umd.min.js

ngx-contextual-action-bar is an Angular2+ implementation of the [Material Design Contextual Action Bar](https://material.io/components/app-bars-top#contextual-action-bar). The implementation makes it possible to change the action bar properties (i.e. titl

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common"),require("@angular/cdk/portal"),require("@angular/material/button"),require("@angular/material/icon"),require("@angular/material/menu"),require("@angular/material/divider"),require("rxjs"),require("rxjs/operators"),require("uuid"),require("@angular/animations"),require("arr-xor")):"function"==typeof define&&define.amd?define("ngx-contextual-action-bar",["exports","@angular/core","@angular/common","@angular/cdk/portal","@angular/material/button","@angular/material/icon","@angular/material/menu","@angular/material/divider","rxjs","rxjs/operators","uuid","@angular/animations","arr-xor"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self)["ngx-contextual-action-bar"]={},t.ng.core,t.ng.common,t.ng.cdk.portal,t.ng.material.button,t.ng.material.icon,t.ng.material.menu,t.ng.material.divider,t.rxjs,t.rxjs.operators,t.uuidv4,t.ng.animations,t.xor)}(this,(function(t,e,n,i,r,o,a,s,l,c,u,p,d){"use strict";function m(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var y=m(d);
/*! *****************************************************************************
    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 f(t,e){var n="function"==typeof Symbol&&t[Symbol.iterator];if(!n)return t;var i,r,o=n.call(t),a=[];try{for(;(void 0===e||e-- >0)&&!(i=o.next()).done;)a.push(i.value)}catch(t){r={error:t}}finally{try{i&&!i.done&&(n=o.return)&&n.call(o)}finally{if(r)throw r.error}}return a}function h(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(f(arguments[e]));return t}var g;Object.create;(g=t.ActionBarLayerModes||(t.ActionBarLayerModes={})).fixed="fixed",g.follow="follow",g.mobile="mobile";var v=function(){function t(t,e){this.service=t,this._layer=e,this.service._addLayer(e)}return Object.defineProperty(t.prototype,"onCustomElementReady",{get:function(){var t=this;return this.service._customElement.pipe(c.filter((function(t){return void 0!==t})),c.filter((function(e){return e[0]===t._layer.id})),c.map((function(t){return t[1]})))},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"onButtonClick",{get:function(){var t=this;return this.service.buttonEmitter.pipe(c.filter((function(e){return e===t._layer.id})),c.mapTo(void 0))},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"onActionClick",{get:function(){var t=this;return this.service.actionEmitter.pipe(c.filter((function(e){var n=f(e,2),i=n[0];n[1];return i===t._layer.id})),c.map((function(t){var e=f(t,2);e[0];return e[1]})))},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"layer",{get:function(){return this._layer},enumerable:!1,configurable:!0}),t.prototype.setLayer=function(t){var e=this,n=this.service._layers.value,i=n.findIndex((function(t){return t.id===e.layer.id}));i>-1&&(n[i]=Object.assign(n[i],t),this.service._layers.next(n),this._layer=n[i])},t.prototype.unregister=function(){var t=this._layer.id;this.service._removeLayer(t)},t}(),b=function(){function t(t,e,n){this.service=t,this._layer=e,this._toggleLayer=n,this.toggled=!1,this.service._addLayer(e)}return Object.defineProperty(t.prototype,"onButtonClick",{get:function(){var t=this;return this.service.buttonEmitter.pipe(c.filter((function(e){return e===t._layer.id||e===t._toggleLayer.id})),c.map((function(e){return e===t._layer.id?0:1})))},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"onActionClick",{get:function(){var t=this;return this.service.actionEmitter.pipe(c.filter((function(e){var n=f(e,2),i=n[0];n[1];return i===t._layer.id||i===t._toggleLayer.id})),c.map((function(e){var n=f(e,2),i=n[0],r=n[1];return[i===t._layer.id?0:1,r]})))},enumerable:!1,configurable:!0}),t.prototype.toggleLayer=function(){this.toggled?this.service._removeLayer(this._toggleLayer.id):this.service._addLayer(this._toggleLayer),this.toggled=!this.toggled},t.prototype.unregister=function(){this.service._removeLayer(this._layer.id),this.service._removeLayer(this._toggleLayer.id)},t}(),x={title:"",group:"root",actions:[],mode:t.ActionBarLayerModes.fixed,prominent:!1},w=function(){function t(){this._layers=new l.BehaviorSubject([]),this.buttonEmitter=new e.EventEmitter,this.actionEmitter=new e.EventEmitter,this._customElement=new l.BehaviorSubject(void 0)}return t.prototype.latest=function(t){return void 0===t&&(t="root"),this._layers.asObservable().pipe(c.map((function(e){return e.filter((function(e){return e.group===t}))})),c.map((function(t){return t[t.length-1]})))},t.prototype._removeLayer=function(t){var e=this._layers.value;this._layers.next(e.filter((function(e){return e.id!==t})))},t.prototype._addLayer=function(t){var e=this._layers.value;this._layers.next(h(e,[t]))},t.prototype.applyMissingProperties=function(t){var e=u.v4();return Object.assign(Object.assign({},x),Object.assign({id:e},t))},t.prototype.validateLayer=function(t){return!0},t.prototype.register=function(t){var e=this.applyMissingProperties(t);if(this.validateLayer(e))return new v(this,e);throw new Error("Please validate that you have filled all required properties in your layer")},t.prototype.registerToggle=function(t,e){var n=this.applyMissingProperties(t),i=this.applyMissingProperties(e);if(this.validateLayer(n)&&this.validateLayer(i))return new b(this,n,i);throw new Error("Please validate that you have filled all required properties in your layers")},t}();w.ɵprov=e.ɵɵdefineInjectable({factory:function(){return new w},token:w,providedIn:"root"}),w.decorators=[{type:e.Injectable,args:[{providedIn:"root"}]}],w.ctorParameters=function(){return[]};var _="cubic-bezier(0.4, 0.0, 0.2, 1)",$="cubic-bezier(0.0, 0.0, 0.2, 1)",E="cubic-bezier(0.4, 0.0, 1, 1)",k=p.trigger("buttonAnimation",[p.transition((function(t,e,n){return t==e}),[]),p.transition((function(t,e,n){return"void"!=t&&"void"==e}),[p.style({width:"!",overflow:"hidden",opacity:1}),p.animate("90ms "+E,p.style({opacity:0})),p.animate("110ms "+_,p.style({width:0}))]),p.transition((function(t,e,n){return"void"==t&&"void"!=e}),[p.style({width:0,overflow:"hidden",opacity:0}),p.animate("90ms "+E,p.style({width:"*"})),p.animate("110ms "+_,p.style({opacity:1}))]),p.transition("* <=> *",[p.query(".new",[p.style({opacity:0,transform:"rotate(180deg)"})]),p.group([p.query(".old",[p.style({display:"block"}),p.animate("150ms "+E,p.style({opacity:0,transform:"rotate(180deg)"}))]),p.query(".new",[p.animate("150ms "+$,p.style({opacity:1,transform:"rotate(360deg)"}))])])])]),L="250ms",M="200ms",j=p.trigger("navbar",[p.state("transparent",p.style({position:"absolute"})),p.state("fixed",p.style({position:"relative"})),p.state("visible",p.style({position:"sticky"})),p.transition("fixed => visible",[p.style({position:"sticky",transform:"translateY(-100%)"}),p.animate("250ms "+$,p.style({transform:"translateY(0%)"}))]),p.transition("visible => fixed",[p.style({position:"sticky",transform:"translateY(0%)"}),p.animate("200ms "+E,p.style({transform:"translateY(-100%)"})),p.style({position:"relative"})]),p.transition("* => noanim",[])]),C=p.trigger("padding",[p.transition("* => prominent",[p.style({paddingTop:128}),p.animate("250ms "+_,p.style({paddingTop:0}))]),p.transition("* => regular",[p.style({paddingTop:56}),p.animate("250ms "+_,p.style({paddingTop:0}))]),p.transition("* => none",[p.style({padding:"!"}),p.animate("250ms "+_,p.style({padding:0}))])]),O=p.trigger("layerSwitch",[p.transition((function(t,e){return"void"==t}),[p.query("*",p.animate(0))]),p.transition(":enter",[p.query("*",p.animate(0))]),p.transition("* => *",[p.query("*",p.animateChild(),{optional:!1})])]),P=function(){function e(t){this.service=t,this.scrollThreshold=200,this.group="root"}return e.prototype.handleButtonClick=function(t){this.service.buttonEmitter.emit(t)},e.prototype.ngOnInit=function(){var e=this;this.layer$=this.service.latest(this.group),this.layer$.pipe().subscribe((function(t){var n;if((null===(n=e.outlet)||void 0===n?void 0:n.hasAttached())&&(e.outlet.ngOnDestroy(),e.outlet.detach()),null==t?void 0:t.middleElement){var r=e.outlet.attachComponentPortal(new i.ComponentPortal(t.middleElement));e.service._customElement.next([t.id,r.instance])}})),this.layerSwitchTrigger$=this.layer$.pipe(c.map((function(t){return null==t?void 0:t.id}))),this.scroll=l.fromEvent(this.content.nativeElement,"scroll").pipe(c.map((function(t){return t.target.scrollTop})),c.startWith(0)),this.netScroll$=this.scroll.pipe(c.startWith(0),c.pairwise(),c.scan((function(t,e){var n=f(e,2),i=n[0],r=n[1];if(r>i){if(t<0)return 0}else if(t>0)return 0;return t+(r-i)}),0)),this.button$=this.layer$.pipe(c.map((function(t){return null==t?void 0:t.button})),c.startWith(void 0),c.pairwise()),this.navbarState$=l.combineLatest([this.scroll,this.netScroll$,this.layer$]).pipe(c.scan((function(n,i){var r=f(i,3),o=r[0],a=r[1],s=r[2];if("transparent"===(null==s?void 0:s.background))return"transparent";if((null==s?void 0:s.mode)===t.ActionBarLayerModes.follow)return"noanim"===n?"fixed":o>1?"visible":"nonaim";if((null==s?void 0:s.mode)===t.ActionBarLayerModes.fixed)return"fixed";if("noanim"===n)return"fixed";if("fixed"===n){if(o<((null==s?void 0:s.prominent)?128:56))return"fixed"}else if(o<1)return"noanim";return a<-e.scrollThreshold?"visible":"fixed"}),"fixed")),this.shadow$=this.layer$.pipe(c.switchMap((function(n){return(null==n?void 0:n.mode)===t.ActionBarLayerModes.follow?e.scroll.pipe(c.map((function(t){return t>1}))):"transparent"===(null==n?void 0:n.background)?l.of(!1):e.navbarState$.pipe(c.map((function(t){return"visible"===t})))}))),this.contentState$=this.layer$.pipe(c.map((function(t){return t?"transparent"!==t.background?"none":t.prominent?"prominent":"regular":"none"})))},e.prototype.ngOnDestroy=function(){},e}();P.decorators=[{type:e.Component,args:[{selector:"ngx-contextual-action-bar",template:'<ng-template #navbar let-layer="layer">\r\n        <div class="button"\r\n            *ngIf="(button$ | async); let button"\r\n        >\r\n            <button mat-icon-button *ngIf="button[1]" (click)="handleButtonClick(layer.id)" [@buttonAnimation]="button">\r\n            \x3c!-- <button mat-icon-button [@buttonAnimation]="button" (click)="handleButtonClick(layer.id)"> --\x3e\r\n                <div class="wrapper">\r\n                    <mat-icon class="old">{{button[0]}}</mat-icon>\r\n                    <mat-icon class="new">{{button[1]}}</mat-icon>\r\n                </div>\r\n            </button>\r\n        </div>\r\n        <div class="title">\r\n            <div class="custom-element">\r\n                <div cdkPortalOutlet></div> \r\n            </div>\r\n            <h2 *ngIf="layer?.title">{{layer.title}}</h2>\r\n        </div>\r\n\r\n        <div class="actions" *ngIf="layer?.actions.length > 0">\r\n            <ngx-actions-overflow-menu [group]="group"></ngx-actions-overflow-menu>\r\n        </div>\r\n</ng-template>\r\n<div class="component"\r\n    [class]="(layer$ | async)?.mode"\r\n    [class.prominent]="(layer$ | async)?.prominent"\r\n    [@layerSwitch]="layerSwitchTrigger$ | async"\r\n> \r\n    <div class="content" #c cdkScrollable\r\n        [@padding]="contentState$ | async"\r\n    >\r\n    \r\n    \r\n        <nav class="navbar"\r\n            [style.color]="(layer$ | async)?.color"\r\n            [style.background]="(layer$ | async)?.background"\r\n            [@navbar]="navbarState$ | async"\r\n            [class.shadow]="(shadow$ | async)"\r\n        >\r\n            <ng-container *ngTemplateOutlet="navbar; context: { layer: layer$ | async }"></ng-container>\r\n        </nav>\r\n        <mat-divider></mat-divider>\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>',host:{class:"ngx-contextual-action-bar"},animations:[j,k,C,O],encapsulation:e.ViewEncapsulation.Emulated,styles:[":host{height:inherit;width:inherit}.component,:host{position:relative}.component{display:flex;flex-direction:column;height:100%;width:100%;z-index:16}.component .content{overflow-x:hidden;overflow-y:auto;position:relative;z-index:0}.navbar{box-sizing:border-box;flex-direction:row;height:56px;left:0;top:0;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition-property:height,box-shadow,padding-bottom,color,background;width:100%;z-index:3}.navbar,.navbar .button{display:flex;position:relative}.navbar .button{flex-direction:column;height:100%;padding:8px}.navbar .button button,.navbar .button button .wrapper{align-items:center;display:flex;height:40px;justify-content:center;position:relative}.navbar .button button .wrapper{width:40px}.navbar .button button .mat-icon{position:absolute}.navbar .button button .mat-icon.old{display:none}.navbar .title{align-items:flex-end;display:flex;flex:2 1 auto;padding-bottom:10px;padding-left:16px;padding-right:64px;position:relative}.navbar .title h2{margin:0}.navbar .title .custom-element{bottom:0;height:56px;left:0;position:absolute;width:100%}.navbar .actions{display:flex;flex:0.5 1 50px;flex-direction:column;height:100%;min-width:0;overflow:hidden;position:relative}.navbar .actions .ngx-actions-overflow-menu{flex:0 0 56px}.navbar.shadow{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.component.prominent>.content>.navbar{height:128px;padding-bottom:8px}.component.transparent .navbar{position:absolute}"]}]}],P.ctorParameters=function(){return[{type:w}]},P.propDecorators={content:[{type:e.ViewChild,args:["c",{read:e.ElementRef,static:!0}]}],outlet:[{type:e.ViewChild,args:[i.CdkPortalOutlet]}],scrollThreshold:[{type:e.Input}],group:[{type:e.Input}]};var A=function(){function t(t){var e=this;this.el=t,this.scrollHeight=l.fromEvent(this.el.nativeElement,"scroll").pipe(c.debounceTime(10),c.map((function(t){return e.el.nativeElement.scrollTop}))),this.scrolled$=this.scrollHeight.pipe(c.pairwise(),c.scan((function(t,e){var n=f(e,2),i=n[0],r=n[1];if(r>i){if(t<50)return 0}else if(t>50)return 0;return t+(r-i)}),0))}return t.prototype.ngOnDestroy=function(){},t}();A.decorators=[{type:e.Directive,args:[{selector:"[ngxScrollhandler]",exportAs:"scroll"}]}],A.ctorParameters=function(){return[{type:e.ElementRef}]};var q=p.trigger("action",[p.transition(":enter",[p.style({opacity:0}),p.animate("300ms ease",p.style({opacity:1}))])]),B=function(){function t(t){this.service=t,this.group="root",this._resizeEvent$=l.fromEvent(window,"resize").pipe(c.startWith(void 0),c.debounceTime(100))}return t.prototype.handleActionClick=function(t,e){this.service.actionEmitter.emit([t,e.icon])},t.prototype.ngOnInit=function(){var t=this;this.layer$=this.service.latest(this.group).pipe(c.map((function(t){if(t)return{id:t.id,actions:t.actions}}))),this.width=this._resizeEvent$.pipe(c.map((function(e){return t.c.nativeElement.getBoundingClientRect().width}))),this.visible$=l.combineLatest([this.width,this.layer$]).pipe(c.map((function(t){var e=f(t,2),n=e[0],i=e[1];if(!(null==i?void 0:i.actions))return[];var r=Math.floor(n/40)-1,o=r>i.actions.length?i.actions.length:r;return o+1==i.actions.length?i.actions:i.actions.slice(0,o)}))),this.menu$=l.combineLatest([this.visible$,this.layer$]).pipe(c.map((function(t){var e=f(t,2),n=e[0],i=e[1];return y.default(n,(null==i?void 0:i.actions)||[],(function(t,e){return t.icon===e.icon}))})))},t}();B.decorators=[{type:e.Component,args:[{selector:"ngx-actions-overflow-menu",template:'<div #c class="component" >\r\n    <ng-container *ngIf="layer$ | async as layer">\r\n        \x3c!-- visible --\x3e\r\n        <button @action mat-icon-button *ngFor="let action of visible$ | async" (click)="handleActionClick(layer.id, action)">\r\n            <mat-icon>{{action.icon}}</mat-icon>\r\n        </button>\r\n        \x3c!-- menu --\x3e\r\n        <ng-container  *ngIf="menu$ | async as menu">\r\n            <mat-menu #matMenu>\r\n                <button mat-menu-item *ngFor="let action of menu" (click)="handleActionClick(layer.id, action)">\r\n                    <mat-icon>{{action.icon}}</mat-icon>\r\n                    <span>{{action.displayName}}</span>\r\n                </button>\r\n            </mat-menu>\r\n            <button @action class="menu-trigger" [matMenuTriggerFor]="matMenu" mat-icon-button *ngIf="menu.length > 0">\r\n                <mat-icon>more_vert</mat-icon>\r\n            </button>\r\n        </ng-container>\r\n    </ng-container>\r\n</div>',host:{class:"ngx-actions-overflow-menu"},animations:[q],styles:[":host{height:inherit;width:inherit}.component,:host{overflow:hidden;position:relative}.component{align-items:center;box-sizing:border-box;display:flex;height:100%;justify-content:flex-end;min-width:0;width:100%}.component button{min-width:0;overflow:hidden}"]}]}],B.ctorParameters=function(){return[{type:w}]},B.propDecorators={group:[{type:e.Input}],c:[{type:e.ViewChild,args:["c",{read:e.ElementRef,static:!0}]}]};var T=[o.MatIconModule,r.MatButtonModule,a.MatMenuModule,s.MatDividerModule],I=function(){};I.decorators=[{type:e.NgModule,args:[{declarations:[P,A,B],imports:h([n.CommonModule,i.PortalModule],T),exports:[P],providers:[w]}]}],t.ActionBarLayerRegistration=v,t.ActionBarLayerToggleRegistration=b,t.ContextualActionBarComponent=P,t.ContextualActionBarModule=I,t.ContextualActionBarService=w,t.ɵb=j,t.ɵc=L,t.ɵd=M,t.ɵe=_,t.ɵf=$,t.ɵg=E,t.ɵh=k,t.ɵi=C,t.ɵj=O,t.ɵk=A,t.ɵl=B,t.ɵm=q,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=ngx-contextual-action-bar.umd.min.js.map