rb-fab-speed-dial/bundles/rb-fab-speed-dial.umd.js

Fab speed dial for angular and material2.

(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/animations'), require('@angular/common'), require('@angular/material')) :
	typeof define === 'function' && define.amd ? define('rb-fab-speed-dial', ['exports', '@angular/core', '@angular/animations', '@angular/common', '@angular/material'], factory) :
	(factory((global['rb-fab-speed-dial'] = {}),global.ng.core,global.ng.animations,global.ng.common,global.ng.material));
}(this, (function (exports,core,animations,common,material) { 'use strict';

var RbFabSpeedDialComponent = /** @class */ (function () {
    function RbFabSpeedDialComponent() {
        this.actions = false;
        this.state = "10";
        this.animationDone = true;
        this.direction = 'right';
        this.mode = "patata";
        this.color = "accent";
        this.openIcon = "add";
        this.closeIcon = "clear";
        this.open = new core.EventEmitter();
    }
    RbFabSpeedDialComponent.prototype.clickon = function (event) {
        event.stopPropagation();
    };
    RbFabSpeedDialComponent.prototype.clickout = function () {
        if (this.actions) {
            this.toggle();
        }
    };
    RbFabSpeedDialComponent.prototype.ngOnInit = function () {
        this.open.emit(this.actions);
    };
    RbFabSpeedDialComponent.prototype.toggle = function () {
        if (this.animationDone) {
            this.animationDone = false;
            this.actions = !this.actions;
            this.open.emit(this.actions);
            if (this.mode == "scale") {
                this.state = (this.state == "scale") ? "10" : "scale";
            }
            else {
                if (this.direction == "right") {
                    this.state = (this.state == "right") ? "10" : "right";
                }
                if (this.direction == "down") {
                    this.state = (this.state == "down") ? "10" : "down";
                }
                if (this.direction == "left") {
                    this.state = (this.state == "left") ? "10" : "left";
                }
                if (this.direction == "up") {
                    this.state = (this.state == "up") ? "10" : "up";
                }
            }
        }
    };
    RbFabSpeedDialComponent.prototype.done = function () {
        this.animationDone = true;
    };
    return RbFabSpeedDialComponent;
}());
RbFabSpeedDialComponent.decorators = [
    { type: core.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: [
                    animations.trigger('listAnimation', [
                        animations.transition('* => right', [
                            animations.query(':enter', animations.style({ opacity: 0 }), { optional: true }),
                            animations.query(':enter', animations.stagger('50ms', animations.animate('200ms', animations.keyframes([
                                animations.style({ opacity: 0, transform: 'translateX(-100%)', offset: 0 }),
                                animations.style({ opacity: 1, transform: 'translateX(15px)', offset: 0.3 }),
                                animations.style({ opacity: 1, transform: 'translateX(0)', offset: 1.0 })
                            ]))), { optional: true })
                        ]),
                        animations.transition('right => *', [
                            animations.query(':leave', animations.group([animations.style({ opacity: 1 }), animations.stagger('50ms reverse', animations.animate('200ms', animations.keyframes([
                                    animations.style({ opacity: 1, transform: 'translateX(0)', offset: 0 }),
                                    animations.style({ opacity: 1, transform: 'translateX(15px)', offset: 0.7 }),
                                    animations.style({ opacity: 0, transform: 'translateX(-100%)', offset: 1.0 })
                                ])))
                            ]), { optional: true })
                        ]),
                        animations.transition('* => down', [
                            animations.query(':enter', animations.style({ opacity: 0 }), { optional: true }),
                            animations.query(':enter', animations.stagger('50ms', animations.animate('200ms', animations.keyframes([
                                animations.style({ opacity: 0, transform: 'translateY(-100%)', offset: 0 }),
                                animations.style({ opacity: 1, transform: 'translateY(15px)', offset: 0.3 }),
                                animations.style({ opacity: 1, transform: 'translateY(0)', offset: 1.0 })
                            ]))), { optional: true }),
                        ]),
                        animations.transition('down => *', [
                            animations.query(':leave', animations.group([animations.style({ opacity: 1 }), animations.stagger('50ms reverse', animations.animate('200ms', animations.keyframes([
                                    animations.style({ opacity: 1, transform: 'translateY(0)', offset: 0 }),
                                    animations.style({ opacity: 1, transform: 'translateY(15px)', offset: 0.7 }),
                                    animations.style({ opacity: 0, transform: 'translateY(-100%)', offset: 1.0 })
                                ])))
                            ]), { optional: true })
                        ]),
                        animations.transition('* => left', [
                            animations.query(':enter', animations.style({ opacity: 0 }), { optional: true }),
                            animations.query(':enter', animations.stagger('50ms', animations.animate('200ms', animations.keyframes([
                                animations.style({ opacity: 0, transform: 'translateX(100%)', offset: 0 }),
                                animations.style({ opacity: 1, transform: 'translateX(-15px)', offset: 0.3 }),
                                animations.style({ opacity: 1, transform: 'translateX(0)', offset: 1.0 })
                            ]))), { optional: true }),
                        ]),
                        animations.transition('left => *', [
                            animations.query(':leave', animations.group([animations.style({ opacity: 1 }), animations.stagger('50ms reverse', animations.animate('200ms', animations.keyframes([
                                    animations.style({ opacity: 1, transform: 'translateX(0)', offset: 0 }),
                                    animations.style({ opacity: 1, transform: 'translateX(-15px)', offset: 0.7 }),
                                    animations.style({ opacity: 0, transform: 'translateX(100%)', offset: 1.0 })
                                ])))
                            ]), { optional: true })
                        ]),
                        animations.transition('* => up', [
                            animations.query(':enter', animations.style({ opacity: 0 }), { optional: true }),
                            animations.query(':enter', animations.stagger('50ms', animations.animate('200ms', animations.keyframes([
                                animations.style({ opacity: 0, transform: 'translateY(100%)', offset: 0 }),
                                animations.style({ opacity: 1, transform: 'translateY(-15px)', offset: 0.3 }),
                                animations.style({ opacity: 1, transform: 'translateY(0)', offset: 1.0 })
                            ]))), { optional: true }),
                        ]),
                        animations.transition('up => *', [
                            animations.query(':leave', animations.group([animations.style({ opacity: 1 }), animations.stagger('50ms reverse', animations.animate('200ms', animations.keyframes([
                                    animations.style({ opacity: 1, transform: 'translateY(0)', offset: 0 }),
                                    animations.style({ opacity: 1, transform: 'translateY(-15px)', offset: 0.7 }),
                                    animations.style({ opacity: 0, transform: 'translateY(100%)', offset: 1.0 })
                                ])))
                            ]), { optional: true })
                        ]),
                        animations.transition('* => scale', [
                            animations.query(':enter', animations.style({ opacity: 0 }), { optional: true }),
                            animations.query(':enter', animations.stagger('50ms', animations.animate('200ms', animations.keyframes([
                                animations.style({ opacity: 0, transform: 'scale(0)', offset: 0 }),
                                animations.style({ opacity: 1, transform: 'scale(0.3)', offset: 0.3 }),
                                animations.style({ opacity: 1, transform: 'scale(1)', offset: 1.0 })
                            ]))), { optional: true }),
                        ]),
                        animations.transition('scale => *', [
                            animations.query(':leave', animations.group([animations.style({ opacity: 1 }), animations.stagger('50ms reverse', animations.animate('200ms', animations.keyframes([
                                    animations.style({ opacity: 1, transform: 'scale(1)', offset: 0 }),
                                    animations.style({ opacity: 1, transform: 'scale(0.7)', offset: 0.7 }),
                                    animations.style({ opacity: 0, transform: 'scale(0)', offset: 1.0 })
                                ])))
                            ]), { optional: true })
                        ]),
                    ]),
                ],
            },] },
];
RbFabSpeedDialComponent.ctorParameters = function () { return []; };
RbFabSpeedDialComponent.propDecorators = {
    "state": [{ type: core.Input },],
    "direction": [{ type: core.Input },],
    "mode": [{ type: core.Input },],
    "color": [{ type: core.Input },],
    "openIcon": [{ type: core.Input },],
    "closeIcon": [{ type: core.Input },],
    "open": [{ type: core.Output },],
    "clickon": [{ type: core.HostListener, args: ['click', ['$event'],] },],
    "clickout": [{ type: core.HostListener, args: ['document:click',] },],
};
var RbFabItemDirective = /** @class */ (function () {
    function RbFabItemDirective(el) {
        this.el = el;
        this.el.nativeElement.style.margin = "6px";
    }
    return RbFabItemDirective;
}());
RbFabItemDirective.decorators = [
    { type: core.Directive, args: [{
                selector: '[rbFabItem]'
            },] },
];
RbFabItemDirective.ctorParameters = function () { return [
    { type: core.ElementRef, },
]; };
var RbFabSpeedDialModule = /** @class */ (function () {
    function RbFabSpeedDialModule() {
    }
    return RbFabSpeedDialModule;
}());
RbFabSpeedDialModule.decorators = [
    { type: core.NgModule, args: [{
                imports: [
                    common.CommonModule,
                    material.MatIconModule,
                    material.MatButtonModule
                ],
                declarations: [RbFabSpeedDialComponent, RbFabItemDirective],
                exports: [RbFabSpeedDialComponent, RbFabItemDirective]
            },] },
];

exports.RbFabSpeedDialModule = RbFabSpeedDialModule;
exports.ɵb = RbFabItemDirective;
exports.ɵa = RbFabSpeedDialComponent;

Object.defineProperty(exports, '__esModule', { value: true });

})));
//# sourceMappingURL=rb-fab-speed-dial.umd.js.map