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/).
121 lines • 11.6 kB
JavaScript
import { __decorate, __metadata } from "tslib";
import { FabSpeedDialAnimation } from './fab-speed-dial.animation';
import { Component, Input, Output, EventEmitter } from '@angular/core';
let FabSpeedDialComponent = class FabSpeedDialComponent {
constructor() {
this.selectedAction = new EventEmitter();
this.showActions = false;
this.displayedIcon = '';
this.fabSpeedDialState = '';
this.isCorrectActionsNumber = true;
}
ngOnInit() {
this.displayedIcon = this.mainIcon;
this.checkActions();
}
checkActions() {
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;
}
}
toggleSpeedDial() {
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');
}
}
actionSelected(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: `
<div *ngIf="isCorrectActionsNumber">
<div id="nm-fab-speed-dial-button-overlay"></div>
<div class="nm-fab-speed-dial-button-component">
<div *ngIf="showActions" []="actions.length" class="nm-fab-speed-dial-menu-actions">
<div *ngFor="let action of actions" class="nm-fab-speed-dial-mini-button">
<mat-card class="nm-fab-speed-dial-card-action" *ngIf="action.name">
{{ action.name }}
</mat-card>
<button mat-mini-fab color="primary" (click)="actionSelected(action)">
<mat-icon>{{ action.icon }}</mat-icon>
</button>
</div>
</div>
<button mat-fab color="primary" (click)="toggleSpeedDial()">
<mat-icon []="{value: fabSpeedDialState}">{{ displayedIcon }}</mat-icon>
</button>
</div>
</div>
`,
animations: FabSpeedDialAnimation,
styles: [`
.nm-fab-speed-dial-button-component {
position: fixed;
bottom: 16px;
right: 16px;
text-align: right;
}
.nm-fab-speed-dial-mini-button {
display: flex;
align-items: flex-end;
margin-bottom: 16px;
}
.nm-fab-speed-dial-card-action {
margin-right: 16px;
padding: 12px;
text-align: center;
padding-right: 16px;
padding-left: 16px;
}
.nm-fab-speed-dial-menu-actions {
flex-direction: column-reverse;
display: flex;
align-items: flex-end;
margin-right: 8px;
position: relative;
bottom: 56px;
}
.nm-fab-speed-dial-overlay {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 0;
background: rgba(0, 0, 0, 0.32);
}
`]
}),
__metadata("design:paramtypes", [])
], FabSpeedDialComponent);
export { FabSpeedDialComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmFiLXNwZWVkLWRpYWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmVyZW8tbWF0ZXJpYWwvIiwic291cmNlcyI6WyJsaWIvZmFiLXNwZWVkLWRpYWwvZmFiLXNwZWVkLWRpYWwuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUNuRSxPQUFPLEVBQUUsU0FBUyxFQUFVLEtBQUssRUFBRSxNQUFNLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBZ0UvRSxJQUFhLHFCQUFxQixHQUFsQyxNQUFhLHFCQUFxQjtJQVloQztRQVBVLG1CQUFjLEdBQUcsSUFBSSxZQUFZLEVBQWlCLENBQUM7UUFFN0QsZ0JBQVcsR0FBWSxLQUFLLENBQUM7UUFDN0Isa0JBQWEsR0FBVyxFQUFFLENBQUM7UUFDNUIsc0JBQWlCLEdBQVcsRUFBRSxDQUFDO1FBQy9CLDJCQUFzQixHQUFZLElBQUksQ0FBQztJQUV0QixDQUFDO0lBRWpCLFFBQVE7UUFDTixJQUFJLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUM7UUFDbkMsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO0lBQ3RCLENBQUM7SUFFRixZQUFZO1FBQ1gsSUFBSSxJQUFJLENBQUMsT0FBTyxDQUFDLE1BQU0sR0FBRyxDQUFDLEVBQUU7WUFDNUIsT0FBTyxDQUFDLEtBQUssQ0FBQyxxREFBcUQsQ0FBQyxDQUFDO1lBQ3JFLElBQUksQ0FBQyxzQkFBc0IsR0FBRyxLQUFLLENBQUM7U0FDcEM7YUFDSSxJQUFJLElBQUksQ0FBQyxPQUFPLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBRTtZQUNqQyxPQUFPLENBQUMsS0FBSyxDQUFDLHVEQUF1RCxDQUFDLENBQUM7WUFDdkUsSUFBSSxDQUFDLHNCQUFzQixHQUFHLEtBQUssQ0FBQztTQUNwQztJQUNGLENBQUM7SUFFQSxlQUFlO1FBQ2IsSUFBSSxDQUFDLFdBQVcsR0FBRyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUM7UUFDckMsSUFBSSxJQUFJLENBQUMsV0FBVyxFQUFFO1lBQ3BCLElBQUksQ0FBQyxpQkFBaUIsR0FBRyxRQUFRLENBQUM7WUFDbEMsSUFBSSxDQUFDLGFBQWEsR0FBRyxPQUFPLENBQUM7WUFDN0IsUUFBUSxDQUFDLGNBQWMsQ0FBQyxrQ0FBa0MsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsMkJBQTJCLENBQUMsQ0FBQztTQUN4RzthQUNJO1lBQ0gsSUFBSSxDQUFDLGlCQUFpQixHQUFHLFVBQVUsQ0FBQztZQUNwQyxJQUFJLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUM7WUFDbkMsUUFBUSxDQUFDLGNBQWMsQ0FBQyxrQ0FBa0MsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxNQUFNLENBQUMsMkJBQTJCLENBQUMsQ0FBQztTQUMzRztJQUNILENBQUM7SUFFRCxjQUFjLENBQUMsTUFBcUI7UUFDbEMsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDakMsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO0lBQ3pCLENBQUM7Q0FDRixDQUFBO0FBL0NVO0lBQVIsS0FBSyxFQUFFOzt1REFBa0I7QUFFakI7SUFBUixLQUFLLEVBQUU7O3NEQUEwQjtBQUV4QjtJQUFULE1BQU0sRUFBRTs7NkRBQW9EO0FBTGxELHFCQUFxQjtJQTdEakMsU0FBUyxDQUFDO1FBQ1QsUUFBUSxFQUFFLG1CQUFtQjtRQUM5QixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FtQlI7UUFzQ0QsVUFBVSxFQUFFLHFCQUFxQjtpQkFyQ3hCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FvQ1I7S0FFRixDQUFDOztHQUNXLHFCQUFxQixDQWdEakM7U0FoRFkscUJBQXFCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRmFiU3BlZWREaWFsQW5pbWF0aW9uIH0gZnJvbSAnLi9mYWItc3BlZWQtZGlhbC5hbmltYXRpb24nO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIElucHV0LCBPdXRwdXQsIEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQWN0aW9uRWxlbWVudCB9IGZyb20gJy4uL21vZGVsL2FjdGlvbi1lbGVtZW50JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbm0tZmFiLXNwZWVkLWRpYWwnLFxuXHR0ZW1wbGF0ZTogYFxuXHRcdDxkaXYgKm5nSWY9XCJpc0NvcnJlY3RBY3Rpb25zTnVtYmVyXCI+XG4gICAgICAgICAgICA8ZGl2IGlkPVwibm0tZmFiLXNwZWVkLWRpYWwtYnV0dG9uLW92ZXJsYXlcIj48L2Rpdj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJubS1mYWItc3BlZWQtZGlhbC1idXR0b24tY29tcG9uZW50XCI+XG4gICAgICAgICAgICAgICAgPGRpdiAqbmdJZj1cInNob3dBY3Rpb25zXCIgW0BzcGVlZERpYWxTdGFnZ2VyXT1cImFjdGlvbnMubGVuZ3RoXCIgY2xhc3M9XCJubS1mYWItc3BlZWQtZGlhbC1tZW51LWFjdGlvbnNcIj5cbiAgICAgICAgICAgICAgICAgICAgPGRpdiAqbmdGb3I9XCJsZXQgYWN0aW9uIG9mIGFjdGlvbnNcIiBjbGFzcz1cIm5tLWZhYi1zcGVlZC1kaWFsLW1pbmktYnV0dG9uXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICA8bWF0LWNhcmQgY2xhc3M9XCJubS1mYWItc3BlZWQtZGlhbC1jYXJkLWFjdGlvblwiICpuZ0lmPVwiYWN0aW9uLm5hbWVcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB7eyBhY3Rpb24ubmFtZSB9fVxuICAgICAgICAgICAgICAgICAgICAgICAgPC9tYXQtY2FyZD5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxidXR0b24gbWF0LW1pbmktZmFiIGNvbG9yPVwicHJpbWFyeVwiIChjbGljayk9XCJhY3Rpb25TZWxlY3RlZChhY3Rpb24pXCI+IFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxtYXQtaWNvbj57eyBhY3Rpb24uaWNvbiB9fTwvbWF0LWljb24+XG4gICAgICAgICAgICAgICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgPGJ1dHRvbiBtYXQtZmFiIGNvbG9yPVwicHJpbWFyeVwiIChjbGljayk9XCJ0b2dnbGVTcGVlZERpYWwoKVwiPlxuICAgICAgICAgICAgICAgICAgICA8bWF0LWljb24gW0BmYWJCdXR0b25BbmltYXRpb25dPVwie3ZhbHVlOiBmYWJTcGVlZERpYWxTdGF0ZX1cIj57eyBkaXNwbGF5ZWRJY29uIH19PC9tYXQtaWNvbj5cbiAgICAgICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cblx0XHRgLFxuICBzdHlsZXM6IFtgXG4gICAgLm5tLWZhYi1zcGVlZC1kaWFsLWJ1dHRvbi1jb21wb25lbnQge1xuICAgICAgICBwb3NpdGlvbjogZml4ZWQ7XG4gICAgICAgIGJvdHRvbTogMTZweDtcbiAgICAgICAgcmlnaHQ6IDE2cHg7XG4gICAgICAgIHRleHQtYWxpZ246IHJpZ2h0O1xuICAgIH1cbiAgICAubm0tZmFiLXNwZWVkLWRpYWwtbWluaS1idXR0b24ge1xuICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICBhbGlnbi1pdGVtczogZmxleC1lbmQ7XG4gICAgICAgIG1hcmdpbi1ib3R0b206IDE2cHg7XG4gICAgfVxuICAgIC5ubS1mYWItc3BlZWQtZGlhbC1jYXJkLWFjdGlvbiB7XG4gICAgICAgIG1hcmdpbi1yaWdodDogMTZweDtcbiAgICAgICAgcGFkZGluZzogMTJweDtcbiAgICAgICAgdGV4dC1hbGlnbjogY2VudGVyO1xuICAgICAgICBwYWRkaW5nLXJpZ2h0OiAxNnB4O1xuICAgICAgICBwYWRkaW5nLWxlZnQ6IDE2cHg7XG4gICAgfVxuICAgIC5ubS1mYWItc3BlZWQtZGlhbC1tZW51LWFjdGlvbnMge1xuICAgICAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uLXJldmVyc2U7XG4gICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDtcbiAgICAgICAgbWFyZ2luLXJpZ2h0OiA4cHg7XG4gICAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgICAgYm90dG9tOiA1NnB4O1xuICAgIH1cbiAgICAubm0tZmFiLXNwZWVkLWRpYWwtb3ZlcmxheSB7XG4gICAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgICBoZWlnaHQ6IDEwMCU7XG4gICAgICAgIHBvc2l0aW9uOiBmaXhlZDtcbiAgICAgICAgbGVmdDogMDtcbiAgICAgICAgdG9wOiAwO1xuICAgICAgICB6LWluZGV4OiAwO1xuXHRcdGJhY2tncm91bmQ6IHJnYmEoMCwgMCwgMCwgMC4zMik7XG4gICAgfVxuICBgXSxcbiAgYW5pbWF0aW9uczogRmFiU3BlZWREaWFsQW5pbWF0aW9uXG59KVxuZXhwb3J0IGNsYXNzIEZhYlNwZWVkRGlhbENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIG1haW5JY29uOiBzdHJpbmc7XG5cbiAgQElucHV0KCkgYWN0aW9uczogQWN0aW9uRWxlbWVudFtdO1xuXG4gIEBPdXRwdXQoKSBzZWxlY3RlZEFjdGlvbiA9IG5ldyBFdmVudEVtaXR0ZXI8QWN0aW9uRWxlbWVudD4oKTtcblxuICBzaG93QWN0aW9uczogYm9vbGVhbiA9IGZhbHNlO1xuICBkaXNwbGF5ZWRJY29uOiBzdHJpbmcgPSAnJztcblx0ZmFiU3BlZWREaWFsU3RhdGU6IHN0cmluZyA9ICcnO1xuXHRpc0NvcnJlY3RBY3Rpb25zTnVtYmVyOiBib29sZWFuID0gdHJ1ZTtcblxuICBjb25zdHJ1Y3RvcigpIHsgfVxuXG4gIG5nT25Jbml0KCkge1xuICAgIHRoaXMuZGlzcGxheWVkSWNvbiA9IHRoaXMubWFpbkljb247XG4gICAgdGhpcy5jaGVja0FjdGlvbnMoKTtcbiAgfVxuXG5cdGNoZWNrQWN0aW9ucygpIHtcblx0XHRpZiAodGhpcy5hY3Rpb25zLmxlbmd0aCA8IDMpIHtcblx0XHRcdGNvbnNvbGUuZXJyb3IoJ0Egc3BlZWQgZGlhbCBzaG91bGQgaW5jbHVkZSBhdCBsZWFzdCB0aHJlZSBvcHRpb25zLicpO1xuXHRcdFx0dGhpcy5pc0NvcnJlY3RBY3Rpb25zTnVtYmVyID0gZmFsc2U7XG5cdFx0fVxuXHRcdGVsc2UgaWYgKHRoaXMuYWN0aW9ucy5sZW5ndGggPiA2KSB7XG5cdFx0XHRjb25zb2xlLmVycm9yKCdBIHNwZWVkIGRpYWwgc2hvdWxkIGluY2x1ZGUgbm8gbW9yZSB0aGFuIHNpeCBvcHRpb25zLicpO1x0XG5cdFx0XHR0aGlzLmlzQ29ycmVjdEFjdGlvbnNOdW1iZXIgPSBmYWxzZTtcblx0XHR9XG5cdH1cblxuICB0b2dnbGVTcGVlZERpYWwoKSB7XG4gICAgdGhpcy5zaG93QWN0aW9ucyA9ICF0aGlzLnNob3dBY3Rpb25zO1xuICAgIGlmICh0aGlzLnNob3dBY3Rpb25zKSB7XG4gICAgICB0aGlzLmZhYlNwZWVkRGlhbFN0YXRlID0gJ2FjdGl2ZSc7XG4gICAgICB0aGlzLmRpc3BsYXllZEljb24gPSAnY2xvc2UnO1xuICAgICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ25tLWZhYi1zcGVlZC1kaWFsLWJ1dHRvbi1vdmVybGF5JykuY2xhc3NMaXN0LmFkZCgnbm0tZmFiLXNwZWVkLWRpYWwtb3ZlcmxheScpO1xuICAgIH0gXG4gICAgZWxzZSB7XG4gICAgICB0aGlzLmZhYlNwZWVkRGlhbFN0YXRlID0gJ2luYWN0aXZlJztcbiAgICAgIHRoaXMuZGlzcGxheWVkSWNvbiA9IHRoaXMubWFpbkljb247XG4gICAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbm0tZmFiLXNwZWVkLWRpYWwtYnV0dG9uLW92ZXJsYXknKS5jbGFzc0xpc3QucmVtb3ZlKCdubS1mYWItc3BlZWQtZGlhbC1vdmVybGF5Jyk7XG4gICAgfVxuICB9XG5cbiAgYWN0aW9uU2VsZWN0ZWQoYWN0aW9uOiBBY3Rpb25FbGVtZW50KSB7XG4gICAgdGhpcy5zZWxlY3RlZEFjdGlvbi5lbWl0KGFjdGlvbik7XG4gICAgdGhpcy50b2dnbGVTcGVlZERpYWwoKTtcbiAgfVxufVxuIl19