nereo-material
Version:
This project contains [Material Design](https://material.io/design/) components built with Angular and Angular Material. Its goal is to provide components that are not yet implemented in [Angular Material](https://material.angular.io/).
67 lines • 12 kB
JavaScript
import { __decorate, __metadata } from "tslib";
import { FabSpeedDialAnimation } from './fab-speed-dial.animation';
import { Component, Input, Output, EventEmitter } from '@angular/core';
var FabSpeedDialComponent = /** @class */ (function () {
function FabSpeedDialComponent() {
this.selectedAction = new EventEmitter();
this.showActions = false;
this.displayedIcon = '';
this.fabSpeedDialState = '';
this.isCorrectActionsNumber = true;
}
FabSpeedDialComponent.prototype.ngOnInit = function () {
this.displayedIcon = this.mainIcon;
this.checkActions();
};
FabSpeedDialComponent.prototype.checkActions = function () {
if (this.actions.length < 3) {
console.error('A speed dial should include at least three options.');
this.isCorrectActionsNumber = false;
}
else if (this.actions.length > 6) {
console.error('A speed dial should include no more than six options.');
this.isCorrectActionsNumber = false;
}
};
FabSpeedDialComponent.prototype.toggleSpeedDial = function () {
this.showActions = !this.showActions;
if (this.showActions) {
this.fabSpeedDialState = 'active';
this.displayedIcon = 'close';
document.getElementById('nm-fab-speed-dial-button-overlay').classList.add('nm-fab-speed-dial-overlay');
}
else {
this.fabSpeedDialState = 'inactive';
this.displayedIcon = this.mainIcon;
document.getElementById('nm-fab-speed-dial-button-overlay').classList.remove('nm-fab-speed-dial-overlay');
}
};
FabSpeedDialComponent.prototype.actionSelected = function (action) {
this.selectedAction.emit(action);
this.toggleSpeedDial();
};
__decorate([
Input(),
__metadata("design:type", String)
], FabSpeedDialComponent.prototype, "mainIcon", void 0);
__decorate([
Input(),
__metadata("design:type", Array)
], FabSpeedDialComponent.prototype, "actions", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], FabSpeedDialComponent.prototype, "selectedAction", void 0);
FabSpeedDialComponent = __decorate([
Component({
selector: 'nm-fab-speed-dial',
template: "\n\t\t<div *ngIf=\"isCorrectActionsNumber\">\n <div id=\"nm-fab-speed-dial-button-overlay\"></div>\n <div class=\"nm-fab-speed-dial-button-component\">\n <div *ngIf=\"showActions\" [@speedDialStagger]=\"actions.length\" class=\"nm-fab-speed-dial-menu-actions\">\n <div *ngFor=\"let action of actions\" class=\"nm-fab-speed-dial-mini-button\">\n <mat-card class=\"nm-fab-speed-dial-card-action\" *ngIf=\"action.name\">\n {{ action.name }}\n </mat-card>\n <button mat-mini-fab color=\"primary\" (click)=\"actionSelected(action)\"> \n <mat-icon>{{ action.icon }}</mat-icon>\n </button>\n </div>\n </div>\n <button mat-fab color=\"primary\" (click)=\"toggleSpeedDial()\">\n <mat-icon [@fabButtonAnimation]=\"{value: fabSpeedDialState}\">{{ displayedIcon }}</mat-icon>\n </button>\n </div>\n </div>\n\t\t",
animations: FabSpeedDialAnimation,
styles: ["\n .nm-fab-speed-dial-button-component {\n position: fixed;\n bottom: 16px;\n right: 16px;\n text-align: right;\n }\n .nm-fab-speed-dial-mini-button {\n display: flex;\n align-items: flex-end;\n margin-bottom: 16px;\n }\n .nm-fab-speed-dial-card-action {\n margin-right: 16px;\n padding: 12px;\n text-align: center;\n padding-right: 16px;\n padding-left: 16px;\n }\n .nm-fab-speed-dial-menu-actions {\n flex-direction: column-reverse;\n display: flex;\n align-items: flex-end;\n margin-right: 8px;\n position: relative;\n bottom: 56px;\n }\n .nm-fab-speed-dial-overlay {\n width: 100%;\n height: 100%;\n position: fixed;\n left: 0;\n top: 0;\n z-index: 0;\n\t\tbackground: rgba(0, 0, 0, 0.32);\n }\n "]
}),
__metadata("design:paramtypes", [])
], FabSpeedDialComponent);
return FabSpeedDialComponent;
}());
export { FabSpeedDialComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmFiLXNwZWVkLWRpYWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmVyZW8tbWF0ZXJpYWwvIiwic291cmNlcyI6WyJsaWIvZmFiLXNwZWVkLWRpYWwvZmFiLXNwZWVkLWRpYWwuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUNuRSxPQUFPLEVBQUUsU0FBUyxFQUFVLEtBQUssRUFBRSxNQUFNLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBZ0UvRTtJQVlFO1FBUFUsbUJBQWMsR0FBRyxJQUFJLFlBQVksRUFBaUIsQ0FBQztRQUU3RCxnQkFBVyxHQUFZLEtBQUssQ0FBQztRQUM3QixrQkFBYSxHQUFXLEVBQUUsQ0FBQztRQUM1QixzQkFBaUIsR0FBVyxFQUFFLENBQUM7UUFDL0IsMkJBQXNCLEdBQVksSUFBSSxDQUFDO0lBRXRCLENBQUM7SUFFakIsd0NBQVEsR0FBUjtRQUNFLElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQztRQUNuQyxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7SUFDdEIsQ0FBQztJQUVGLDRDQUFZLEdBQVo7UUFDQyxJQUFJLElBQUksQ0FBQyxPQUFPLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBRTtZQUM1QixPQUFPLENBQUMsS0FBSyxDQUFDLHFEQUFxRCxDQUFDLENBQUM7WUFDckUsSUFBSSxDQUFDLHNCQUFzQixHQUFHLEtBQUssQ0FBQztTQUNwQzthQUNJLElBQUksSUFBSSxDQUFDLE9BQU8sQ0FBQyxNQUFNLEdBQUcsQ0FBQyxFQUFFO1lBQ2pDLE9BQU8sQ0FBQyxLQUFLLENBQUMsdURBQXVELENBQUMsQ0FBQztZQUN2RSxJQUFJLENBQUMsc0JBQXNCLEdBQUcsS0FBSyxDQUFDO1NBQ3BDO0lBQ0YsQ0FBQztJQUVBLCtDQUFlLEdBQWY7UUFDRSxJQUFJLENBQUMsV0FBVyxHQUFHLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQztRQUNyQyxJQUFJLElBQUksQ0FBQyxXQUFXLEVBQUU7WUFDcEIsSUFBSSxDQUFDLGlCQUFpQixHQUFHLFFBQVEsQ0FBQztZQUNsQyxJQUFJLENBQUMsYUFBYSxHQUFHLE9BQU8sQ0FBQztZQUM3QixRQUFRLENBQUMsY0FBYyxDQUFDLGtDQUFrQyxDQUFDLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQywyQkFBMkIsQ0FBQyxDQUFDO1NBQ3hHO2FBQ0k7WUFDSCxJQUFJLENBQUMsaUJBQWlCLEdBQUcsVUFBVSxDQUFDO1lBQ3BDLElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQztZQUNuQyxRQUFRLENBQUMsY0FBYyxDQUFDLGtDQUFrQyxDQUFDLENBQUMsU0FBUyxDQUFDLE1BQU0sQ0FBQywyQkFBMkIsQ0FBQyxDQUFDO1NBQzNHO0lBQ0gsQ0FBQztJQUVELDhDQUFjLEdBQWQsVUFBZSxNQUFxQjtRQUNsQyxJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUNqQyxJQUFJLENBQUMsZUFBZSxFQUFFLENBQUM7SUFDekIsQ0FBQztJQTlDUTtRQUFSLEtBQUssRUFBRTs7MkRBQWtCO0lBRWpCO1FBQVIsS0FBSyxFQUFFOzswREFBMEI7SUFFeEI7UUFBVCxNQUFNLEVBQUU7O2lFQUFvRDtJQUxsRCxxQkFBcUI7UUE3RGpDLFNBQVMsQ0FBQztZQUNULFFBQVEsRUFBRSxtQkFBbUI7WUFDOUIsUUFBUSxFQUFFLGdsQ0FtQlI7WUFzQ0QsVUFBVSxFQUFFLHFCQUFxQjtxQkFyQ3hCLHE0QkFvQ1I7U0FFRixDQUFDOztPQUNXLHFCQUFxQixDQWdEakM7SUFBRCw0QkFBQztDQUFBLEFBaERELElBZ0RDO1NBaERZLHFCQUFxQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEZhYlNwZWVkRGlhbEFuaW1hdGlvbiB9IGZyb20gJy4vZmFiLXNwZWVkLWRpYWwuYW5pbWF0aW9uJztcbmltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBJbnB1dCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEFjdGlvbkVsZW1lbnQgfSBmcm9tICcuLi9tb2RlbC9hY3Rpb24tZWxlbWVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ25tLWZhYi1zcGVlZC1kaWFsJyxcblx0dGVtcGxhdGU6IGBcblx0XHQ8ZGl2ICpuZ0lmPVwiaXNDb3JyZWN0QWN0aW9uc051bWJlclwiPlxuICAgICAgICAgICAgPGRpdiBpZD1cIm5tLWZhYi1zcGVlZC1kaWFsLWJ1dHRvbi1vdmVybGF5XCI+PC9kaXY+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwibm0tZmFiLXNwZWVkLWRpYWwtYnV0dG9uLWNvbXBvbmVudFwiPlxuICAgICAgICAgICAgICAgIDxkaXYgKm5nSWY9XCJzaG93QWN0aW9uc1wiIFtAc3BlZWREaWFsU3RhZ2dlcl09XCJhY3Rpb25zLmxlbmd0aFwiIGNsYXNzPVwibm0tZmFiLXNwZWVkLWRpYWwtbWVudS1hY3Rpb25zXCI+XG4gICAgICAgICAgICAgICAgICAgIDxkaXYgKm5nRm9yPVwibGV0IGFjdGlvbiBvZiBhY3Rpb25zXCIgY2xhc3M9XCJubS1mYWItc3BlZWQtZGlhbC1taW5pLWJ1dHRvblwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgPG1hdC1jYXJkIGNsYXNzPVwibm0tZmFiLXNwZWVkLWRpYWwtY2FyZC1hY3Rpb25cIiAqbmdJZj1cImFjdGlvbi5uYW1lXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAge3sgYWN0aW9uLm5hbWUgfX1cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvbWF0LWNhcmQ+XG4gICAgICAgICAgICAgICAgICAgICAgICA8YnV0dG9uIG1hdC1taW5pLWZhYiBjb2xvcj1cInByaW1hcnlcIiAoY2xpY2spPVwiYWN0aW9uU2VsZWN0ZWQoYWN0aW9uKVwiPiBcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8bWF0LWljb24+e3sgYWN0aW9uLmljb24gfX08L21hdC1pY29uPlxuICAgICAgICAgICAgICAgICAgICAgICAgPC9idXR0b24+XG4gICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgIDxidXR0b24gbWF0LWZhYiBjb2xvcj1cInByaW1hcnlcIiAoY2xpY2spPVwidG9nZ2xlU3BlZWREaWFsKClcIj5cbiAgICAgICAgICAgICAgICAgICAgPG1hdC1pY29uIFtAZmFiQnV0dG9uQW5pbWF0aW9uXT1cInt2YWx1ZTogZmFiU3BlZWREaWFsU3RhdGV9XCI+e3sgZGlzcGxheWVkSWNvbiB9fTwvbWF0LWljb24+XG4gICAgICAgICAgICAgICAgPC9idXR0b24+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG5cdFx0YCxcbiAgc3R5bGVzOiBbYFxuICAgIC5ubS1mYWItc3BlZWQtZGlhbC1idXR0b24tY29tcG9uZW50IHtcbiAgICAgICAgcG9zaXRpb246IGZpeGVkO1xuICAgICAgICBib3R0b206IDE2cHg7XG4gICAgICAgIHJpZ2h0OiAxNnB4O1xuICAgICAgICB0ZXh0LWFsaWduOiByaWdodDtcbiAgICB9XG4gICAgLm5tLWZhYi1zcGVlZC1kaWFsLW1pbmktYnV0dG9uIHtcbiAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgYWxpZ24taXRlbXM6IGZsZXgtZW5kO1xuICAgICAgICBtYXJnaW4tYm90dG9tOiAxNnB4O1xuICAgIH1cbiAgICAubm0tZmFiLXNwZWVkLWRpYWwtY2FyZC1hY3Rpb24ge1xuICAgICAgICBtYXJnaW4tcmlnaHQ6IDE2cHg7XG4gICAgICAgIHBhZGRpbmc6IDEycHg7XG4gICAgICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgICAgICAgcGFkZGluZy1yaWdodDogMTZweDtcbiAgICAgICAgcGFkZGluZy1sZWZ0OiAxNnB4O1xuICAgIH1cbiAgICAubm0tZmFiLXNwZWVkLWRpYWwtbWVudS1hY3Rpb25zIHtcbiAgICAgICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbi1yZXZlcnNlO1xuICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICBhbGlnbi1pdGVtczogZmxleC1lbmQ7XG4gICAgICAgIG1hcmdpbi1yaWdodDogOHB4O1xuICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICAgIGJvdHRvbTogNTZweDtcbiAgICB9XG4gICAgLm5tLWZhYi1zcGVlZC1kaWFsLW92ZXJsYXkge1xuICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgaGVpZ2h0OiAxMDAlO1xuICAgICAgICBwb3NpdGlvbjogZml4ZWQ7XG4gICAgICAgIGxlZnQ6IDA7XG4gICAgICAgIHRvcDogMDtcbiAgICAgICAgei1pbmRleDogMDtcblx0XHRiYWNrZ3JvdW5kOiByZ2JhKDAsIDAsIDAsIDAuMzIpO1xuICAgIH1cbiAgYF0sXG4gIGFuaW1hdGlvbnM6IEZhYlNwZWVkRGlhbEFuaW1hdGlvblxufSlcbmV4cG9ydCBjbGFzcyBGYWJTcGVlZERpYWxDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSBtYWluSWNvbjogc3RyaW5nO1xuXG4gIEBJbnB1dCgpIGFjdGlvbnM6IEFjdGlvbkVsZW1lbnRbXTtcblxuICBAT3V0cHV0KCkgc2VsZWN0ZWRBY3Rpb24gPSBuZXcgRXZlbnRFbWl0dGVyPEFjdGlvbkVsZW1lbnQ+KCk7XG5cbiAgc2hvd0FjdGlvbnM6IGJvb2xlYW4gPSBmYWxzZTtcbiAgZGlzcGxheWVkSWNvbjogc3RyaW5nID0gJyc7XG5cdGZhYlNwZWVkRGlhbFN0YXRlOiBzdHJpbmcgPSAnJztcblx0aXNDb3JyZWN0QWN0aW9uc051bWJlcjogYm9vbGVhbiA9IHRydWU7XG5cbiAgY29uc3RydWN0b3IoKSB7IH1cblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLmRpc3BsYXllZEljb24gPSB0aGlzLm1haW5JY29uO1xuICAgIHRoaXMuY2hlY2tBY3Rpb25zKCk7XG4gIH1cblxuXHRjaGVja0FjdGlvbnMoKSB7XG5cdFx0aWYgKHRoaXMuYWN0aW9ucy5sZW5ndGggPCAzKSB7XG5cdFx0XHRjb25zb2xlLmVycm9yKCdBIHNwZWVkIGRpYWwgc2hvdWxkIGluY2x1ZGUgYXQgbGVhc3QgdGhyZWUgb3B0aW9ucy4nKTtcblx0XHRcdHRoaXMuaXNDb3JyZWN0QWN0aW9uc051bWJlciA9IGZhbHNlO1xuXHRcdH1cblx0XHRlbHNlIGlmICh0aGlzLmFjdGlvbnMubGVuZ3RoID4gNikge1xuXHRcdFx0Y29uc29sZS5lcnJvcignQSBzcGVlZCBkaWFsIHNob3VsZCBpbmNsdWRlIG5vIG1vcmUgdGhhbiBzaXggb3B0aW9ucy4nKTtcdFxuXHRcdFx0dGhpcy5pc0NvcnJlY3RBY3Rpb25zTnVtYmVyID0gZmFsc2U7XG5cdFx0fVxuXHR9XG5cbiAgdG9nZ2xlU3BlZWREaWFsKCkge1xuICAgIHRoaXMuc2hvd0FjdGlvbnMgPSAhdGhpcy5zaG93QWN0aW9ucztcbiAgICBpZiAodGhpcy5zaG93QWN0aW9ucykge1xuICAgICAgdGhpcy5mYWJTcGVlZERpYWxTdGF0ZSA9ICdhY3RpdmUnO1xuICAgICAgdGhpcy5kaXNwbGF5ZWRJY29uID0gJ2Nsb3NlJztcbiAgICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdubS1mYWItc3BlZWQtZGlhbC1idXR0b24tb3ZlcmxheScpLmNsYXNzTGlzdC5hZGQoJ25tLWZhYi1zcGVlZC1kaWFsLW92ZXJsYXknKTtcbiAgICB9IFxuICAgIGVsc2Uge1xuICAgICAgdGhpcy5mYWJTcGVlZERpYWxTdGF0ZSA9ICdpbmFjdGl2ZSc7XG4gICAgICB0aGlzLmRpc3BsYXllZEljb24gPSB0aGlzLm1haW5JY29uO1xuICAgICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ25tLWZhYi1zcGVlZC1kaWFsLWJ1dHRvbi1vdmVybGF5JykuY2xhc3NMaXN0LnJlbW92ZSgnbm0tZmFiLXNwZWVkLWRpYWwtb3ZlcmxheScpO1xuICAgIH1cbiAgfVxuXG4gIGFjdGlvblNlbGVjdGVkKGFjdGlvbjogQWN0aW9uRWxlbWVudCkge1xuICAgIHRoaXMuc2VsZWN0ZWRBY3Rpb24uZW1pdChhY3Rpb24pO1xuICAgIHRoaXMudG9nZ2xlU3BlZWREaWFsKCk7XG4gIH1cbn1cbiJdfQ==