UNPKG

rb-fab-speed-dial

Version:

Fab speed dial for angular and material2.

3 lines (2 loc) 8.73 kB
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/animations"),require("@angular/common"),require("@angular/material")):"function"==typeof define&&define.amd?define("rb-fab-speed-dial",["exports","@angular/core","@angular/animations","@angular/common","@angular/material"],e):e(t["rb-fab-speed-dial"]={},t.ng.core,t.ng.animations,t.ng.common,t.ng.material)}(this,function(t,e,i,n,o){"use strict";var a=function(){function t(){this.actions=!1,this.state="10",this.animationDone=!0,this.direction="right",this.mode="patata",this.color="accent",this.openIcon="add",this.closeIcon="clear",this.open=new e.EventEmitter}return t.prototype.clickon=function(t){t.stopPropagation()},t.prototype.clickout=function(){this.actions&&this.toggle()},t.prototype.ngOnInit=function(){this.open.emit(this.actions)},t.prototype.toggle=function(){this.animationDone&&(this.animationDone=!1,this.actions=!this.actions,this.open.emit(this.actions),"scale"==this.mode?this.state="scale"==this.state?"10":"scale":("right"==this.direction&&(this.state="right"==this.state?"10":"right"),"down"==this.direction&&(this.state="down"==this.state?"10":"down"),"left"==this.direction&&(this.state="left"==this.state?"10":"left"),"up"==this.direction&&(this.state="up"==this.state?"10":"up")))},t.prototype.done=function(){this.animationDone=!0},t}();a.decorators=[{type:e.Component,args:[{selector:"rb-fab-speed-dial",template:'<div [ngClass]="{\'main\': direction == \'right\', \'main-down\': direction == \'down\', \'main-left\': direction == \'left\',\'main-up\': direction == \'up\'}">\n <button class="trigger" [color]="color" (click)="toggle()" mat-fab>\n <mat-icon *ngIf="!actions">{{openIcon}}</mat-icon>\n <mat-icon *ngIf="actions">{{closeIcon}}</mat-icon>\n </button>\n <div class="actions" [@listAnimation]="state" (@listAnimation.done)="done()">\n <ng-content *ngIf="actions"></ng-content>\n </div>\n</div>',styles:[".main{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;z-index:102}.main .trigger{z-index:101;margin:6px}.main .actions{z-index:100;position:absolute;height:68px;left:68px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.main .actions>button{margin:6px}.main-down{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.main-down .trigger{z-index:101;margin:6px}.main-down .actions{z-index:100;display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;width:68px;top:68px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.main-down .actions>button{margin:6px}.main-left{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.main-left .trigger{z-index:101;margin:6px}.main-left .actions{z-index:100;position:absolute;right:68px;height:68px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.main-left .actions>button{margin:6px}.main-up{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.main-up .trigger{z-index:101;margin:6px}.main-up .actions{z-index:100;position:absolute;width:68px;bottom:68px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.main-up .actions>button{margin:6px}"],animations:[i.trigger("listAnimation",[i.transition("* => right",[i.query(":enter",i.style({opacity:0}),{optional:!0}),i.query(":enter",i.stagger("50ms",i.animate("200ms",i.keyframes([i.style({opacity:0,transform:"translateX(-100%)",offset:0}),i.style({opacity:1,transform:"translateX(15px)",offset:.3}),i.style({opacity:1,transform:"translateX(0)",offset:1})]))),{optional:!0})]),i.transition("right => *",[i.query(":leave",i.group([i.style({opacity:1}),i.stagger("50ms reverse",i.animate("200ms",i.keyframes([i.style({opacity:1,transform:"translateX(0)",offset:0}),i.style({opacity:1,transform:"translateX(15px)",offset:.7}),i.style({opacity:0,transform:"translateX(-100%)",offset:1})])))]),{optional:!0})]),i.transition("* => down",[i.query(":enter",i.style({opacity:0}),{optional:!0}),i.query(":enter",i.stagger("50ms",i.animate("200ms",i.keyframes([i.style({opacity:0,transform:"translateY(-100%)",offset:0}),i.style({opacity:1,transform:"translateY(15px)",offset:.3}),i.style({opacity:1,transform:"translateY(0)",offset:1})]))),{optional:!0})]),i.transition("down => *",[i.query(":leave",i.group([i.style({opacity:1}),i.stagger("50ms reverse",i.animate("200ms",i.keyframes([i.style({opacity:1,transform:"translateY(0)",offset:0}),i.style({opacity:1,transform:"translateY(15px)",offset:.7}),i.style({opacity:0,transform:"translateY(-100%)",offset:1})])))]),{optional:!0})]),i.transition("* => left",[i.query(":enter",i.style({opacity:0}),{optional:!0}),i.query(":enter",i.stagger("50ms",i.animate("200ms",i.keyframes([i.style({opacity:0,transform:"translateX(100%)",offset:0}),i.style({opacity:1,transform:"translateX(-15px)",offset:.3}),i.style({opacity:1,transform:"translateX(0)",offset:1})]))),{optional:!0})]),i.transition("left => *",[i.query(":leave",i.group([i.style({opacity:1}),i.stagger("50ms reverse",i.animate("200ms",i.keyframes([i.style({opacity:1,transform:"translateX(0)",offset:0}),i.style({opacity:1,transform:"translateX(-15px)",offset:.7}),i.style({opacity:0,transform:"translateX(100%)",offset:1})])))]),{optional:!0})]),i.transition("* => up",[i.query(":enter",i.style({opacity:0}),{optional:!0}),i.query(":enter",i.stagger("50ms",i.animate("200ms",i.keyframes([i.style({opacity:0,transform:"translateY(100%)",offset:0}),i.style({opacity:1,transform:"translateY(-15px)",offset:.3}),i.style({opacity:1,transform:"translateY(0)",offset:1})]))),{optional:!0})]),i.transition("up => *",[i.query(":leave",i.group([i.style({opacity:1}),i.stagger("50ms reverse",i.animate("200ms",i.keyframes([i.style({opacity:1,transform:"translateY(0)",offset:0}),i.style({opacity:1,transform:"translateY(-15px)",offset:.7}),i.style({opacity:0,transform:"translateY(100%)",offset:1})])))]),{optional:!0})]),i.transition("* => scale",[i.query(":enter",i.style({opacity:0}),{optional:!0}),i.query(":enter",i.stagger("50ms",i.animate("200ms",i.keyframes([i.style({opacity:0,transform:"scale(0)",offset:0}),i.style({opacity:1,transform:"scale(0.3)",offset:.3}),i.style({opacity:1,transform:"scale(1)",offset:1})]))),{optional:!0})]),i.transition("scale => *",[i.query(":leave",i.group([i.style({opacity:1}),i.stagger("50ms reverse",i.animate("200ms",i.keyframes([i.style({opacity:1,transform:"scale(1)",offset:0}),i.style({opacity:1,transform:"scale(0.7)",offset:.7}),i.style({opacity:0,transform:"scale(0)",offset:1})])))]),{optional:!0})])])]}]}],a.ctorParameters=function(){return[]},a.propDecorators={state:[{type:e.Input}],direction:[{type:e.Input}],mode:[{type:e.Input}],color:[{type:e.Input}],openIcon:[{type:e.Input}],closeIcon:[{type:e.Input}],open:[{type:e.Output}],clickon:[{type:e.HostListener,args:["click",["$event"]]}],clickout:[{type:e.HostListener,args:["document:click"]}]};var s=function(t){this.el=t,this.el.nativeElement.style.margin="6px"};s.decorators=[{type:e.Directive,args:[{selector:"[rbFabItem]"}]}],s.ctorParameters=function(){return[{type:e.ElementRef}]};var r=function(){};r.decorators=[{type:e.NgModule,args:[{imports:[n.CommonModule,o.MatIconModule,o.MatButtonModule],declarations:[a,s],exports:[a,s]}]}],t.RbFabSpeedDialModule=r,t.ɵb=s,t.ɵa=a,Object.defineProperty(t,"__esModule",{value:!0})}); //# sourceMappingURL=rb-fab-speed-dial.umd.min.js.map