@angular-material-extensions/fab-menu
Version:
Angular Material component that allow users to select a county or nationality
167 lines (159 loc) • 19.2 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
import { trigger, state, style, transition, animate, query, stagger, keyframes } from '@angular/animations';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i3 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i4 from '@angular/material/tooltip';
import { MatTooltipModule } from '@angular/material/tooltip';
import * as i5 from '@angular/flex-layout/flex';
import * as i6 from '@angular/flex-layout/extended';
import { FlexLayoutModule } from '@angular/flex-layout';
const speedDialFabAnimations = [
trigger('fabToggler', [
state('false', style({
transform: 'rotate(0deg)'
})),
state('true', style({
transform: 'rotate(225deg)'
})),
transition('* <=> *', animate('200ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
]),
trigger('fabsStagger', [
transition('* => *', [
query(':enter', style({ opacity: 0 }), { optional: true }),
query(':enter', stagger('40ms', [
animate('200ms cubic-bezier(0.4, 0.0, 0.2, 1)', keyframes([
style({ opacity: 0, transform: 'translateY(10px)' }),
style({ opacity: 1, transform: 'translateY(0)' }),
]))
]), { optional: true }),
query(':leave', animate('200ms cubic-bezier(0.4, 0.0, 0.2, 1)', keyframes([
style({ opacity: 1 }),
style({ opacity: 0 }),
])), { optional: true })
])
])
];
class MatFabMenuComponent {
constructor() {
this.icon = 'add';
this.direction = 'top';
this.color = 'accent';
this.closeAfterSelection = true;
// tslint:disable-next-line:no-output-on-prefix
this.onFabMenuItemSelected = new EventEmitter();
}
ngOnInit() {
this.adjustLayout();
}
ngOnChanges(changes) {
if (changes.direction && !changes.direction.firstChange) {
this.direction = changes.direction.currentValue;
this.adjustLayout();
}
if (changes.color && !changes.color.firstChange) {
this.color = changes.color.currentValue;
}
if (changes.fabButtons && !changes.fabButtons.firstChange) {
this.fabButtons = changes.fabButtons.currentValue;
}
}
adjustLayout() {
switch (this.direction) {
case 'top':
this.layout = 'column-reverse';
this.layout2 = 'column-reverse';
break;
case 'bottom':
this.layout = 'column';
this.layout2 = 'column';
break;
case 'left':
this.layout = 'row-reverse';
this.layout2 = 'row-reverse';
break;
case 'right':
this.layout = 'row';
this.layout2 = 'row';
break;
}
}
toggle() {
this.isActive = !this.isActive;
}
selectFabMenu(fab) {
this.onFabMenuItemSelected.emit(fab.id);
if (this.closeAfterSelection) {
this.isActive = false;
}
}
}
MatFabMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MatFabMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
MatFabMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MatFabMenuComponent, selector: "mat-fab-menu", inputs: { fabButtons: "fabButtons", icon: "icon", direction: "direction", color: "color", isActive: "isActive", disabled: "disabled", closeAfterSelection: "closeAfterSelection" }, outputs: { onFabMenuItemSelected: "onFabMenuItemSelected" }, usesOnChanges: true, ngImport: i0, template: "<div [fxLayout]=\"layout\" class=\"container\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n <div fxLayoutAlign=\"center\">\n <button (click)=\"isActive = !isActive\"\n [color]=\"color\" [disabled]=\"disabled\"\n type=\"button\"\n [ngClass]=\"{\n 'mat-fab' : !isActive,\n 'mat-mini-fab' : isActive\n }\"\n mat-fab>\n <mat-icon [@fabToggler]=\"{value: isActive}\">{{icon}}</mat-icon> <!-- Animation here -->\n </button>\n </div>\n <div *ngIf=\"isActive\" [@fabsStagger]=\"fabButtons.length\"\n [fxLayout]=\"layout2\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n <button (click)=\"selectFabMenu(fab)\"\n *ngFor=\"let fab of fabButtons\"\n [color]=\"fab?.color\"\n [matTooltip]=\"fab?.tooltip\"\n [matTooltipPosition]=\"fab?.tooltipPosition\"\n [ngClass]=\"{'fullSVG' : fab?.imgUrl}\"\n type=\"button\"\n mat-fab>\n <mat-icon *ngIf=\"fab?.icon\" [color]=\"fab?.iconColor\">{{fab?.icon}}</mat-icon>\n <img *ngIf=\"fab?.imgUrl\" [src]=\"fab?.imgUrl\" alt=\"icon\">\n </button>\n </div>\n</div>\n", styles: [":host{display:block}.fullSVG img{width:100%}.fullSVG ::ng-deep span.mat-button-wrapper{padding:0}.container>div{margin-bottom:5px}.container>div button{margin-bottom:16px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab]", inputs: ["disabled", "disableRipple", "color", "tabIndex", "extended"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i6.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], animations: speedDialFabAnimations });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MatFabMenuComponent, decorators: [{
type: Component,
args: [{ selector: 'mat-fab-menu', animations: speedDialFabAnimations, template: "<div [fxLayout]=\"layout\" class=\"container\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n <div fxLayoutAlign=\"center\">\n <button (click)=\"isActive = !isActive\"\n [color]=\"color\" [disabled]=\"disabled\"\n type=\"button\"\n [ngClass]=\"{\n 'mat-fab' : !isActive,\n 'mat-mini-fab' : isActive\n }\"\n mat-fab>\n <mat-icon [@fabToggler]=\"{value: isActive}\">{{icon}}</mat-icon> <!-- Animation here -->\n </button>\n </div>\n <div *ngIf=\"isActive\" [@fabsStagger]=\"fabButtons.length\"\n [fxLayout]=\"layout2\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n <button (click)=\"selectFabMenu(fab)\"\n *ngFor=\"let fab of fabButtons\"\n [color]=\"fab?.color\"\n [matTooltip]=\"fab?.tooltip\"\n [matTooltipPosition]=\"fab?.tooltipPosition\"\n [ngClass]=\"{'fullSVG' : fab?.imgUrl}\"\n type=\"button\"\n mat-fab>\n <mat-icon *ngIf=\"fab?.icon\" [color]=\"fab?.iconColor\">{{fab?.icon}}</mat-icon>\n <img *ngIf=\"fab?.imgUrl\" [src]=\"fab?.imgUrl\" alt=\"icon\">\n </button>\n </div>\n</div>\n", styles: [":host{display:block}.fullSVG img{width:100%}.fullSVG ::ng-deep span.mat-button-wrapper{padding:0}.container>div{margin-bottom:5px}.container>div button{margin-bottom:16px}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { fabButtons: [{
type: Input
}], icon: [{
type: Input
}], direction: [{
type: Input
}], color: [{
type: Input
}], isActive: [{
type: Input
}], disabled: [{
type: Input
}], closeAfterSelection: [{
type: Input
}], onFabMenuItemSelected: [{
type: Output
}] } });
class MatMiniFabMenuComponent extends MatFabMenuComponent {
}
MatMiniFabMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MatMiniFabMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
MatMiniFabMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MatMiniFabMenuComponent, selector: "mat-mini-fab-menu", usesInheritance: true, ngImport: i0, template: "<div [fxLayout]=\"layout\" class=\"container\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n <div fxLayoutAlign=\"center\">\n <button (click)=\"isActive = !isActive\"\n [color]=\"color\" [disabled]=\"disabled\"\n type=\"button\"\n [ngClass]=\"{\n 'mat-fab' : !isActive,\n 'mat-mini-fab' : isActive\n }\"\n mat-mini-fab>\n <mat-icon [@fabToggler]=\"{value: isActive}\">{{icon}}</mat-icon> <!-- Animation here -->\n </button>\n </div>\n <div *ngIf=\"isActive\" [@fabsStagger]=\"fabButtons.length\"\n [fxLayout]=\"layout2\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n <button (click)=\"selectFabMenu(fab)\"\n *ngFor=\"let fab of fabButtons\"\n [color]=\"fab?.color\"\n [matTooltip]=\"fab?.tooltip\"\n [matTooltipPosition]=\"fab?.tooltipPosition\"\n [ngClass]=\"{'fullSVG' : fab?.imgUrl}\"\n type=\"button\"\n mat-fab>\n <mat-icon *ngIf=\"fab?.icon\" [color]=\"fab?.iconColor\">{{fab?.icon}}</mat-icon>\n <img *ngIf=\"fab?.imgUrl\" [src]=\"fab?.imgUrl\" alt=\"icon\">\n </button>\n </div>\n</div>\n", styles: [":host{display:block}.fullSVG img{width:100%}.fullSVG ::ng-deep span.mat-button-wrapper{padding:0}.container>div{margin-bottom:5px}.container>div button{margin-bottom:16px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab]", inputs: ["disabled", "disableRipple", "color", "tabIndex", "extended"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i6.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MatMiniFabMenuComponent, decorators: [{
type: Component,
args: [{ selector: 'mat-mini-fab-menu', template: "<div [fxLayout]=\"layout\" class=\"container\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n <div fxLayoutAlign=\"center\">\n <button (click)=\"isActive = !isActive\"\n [color]=\"color\" [disabled]=\"disabled\"\n type=\"button\"\n [ngClass]=\"{\n 'mat-fab' : !isActive,\n 'mat-mini-fab' : isActive\n }\"\n mat-mini-fab>\n <mat-icon [@fabToggler]=\"{value: isActive}\">{{icon}}</mat-icon> <!-- Animation here -->\n </button>\n </div>\n <div *ngIf=\"isActive\" [@fabsStagger]=\"fabButtons.length\"\n [fxLayout]=\"layout2\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n <button (click)=\"selectFabMenu(fab)\"\n *ngFor=\"let fab of fabButtons\"\n [color]=\"fab?.color\"\n [matTooltip]=\"fab?.tooltip\"\n [matTooltipPosition]=\"fab?.tooltipPosition\"\n [ngClass]=\"{'fullSVG' : fab?.imgUrl}\"\n type=\"button\"\n mat-fab>\n <mat-icon *ngIf=\"fab?.icon\" [color]=\"fab?.iconColor\">{{fab?.icon}}</mat-icon>\n <img *ngIf=\"fab?.imgUrl\" [src]=\"fab?.imgUrl\" alt=\"icon\">\n </button>\n </div>\n</div>\n", styles: [":host{display:block}.fullSVG img{width:100%}.fullSVG ::ng-deep span.mat-button-wrapper{padding:0}.container>div{margin-bottom:5px}.container>div button{margin-bottom:16px}\n"] }]
}] });
class MatFabMenuModule {
}
MatFabMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MatFabMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
MatFabMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: MatFabMenuModule, declarations: [MatFabMenuComponent, MatMiniFabMenuComponent], imports: [CommonModule,
MatButtonModule,
MatIconModule,
MatTooltipModule,
FlexLayoutModule], exports: [MatFabMenuComponent, MatMiniFabMenuComponent] });
MatFabMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MatFabMenuModule, imports: [CommonModule,
MatButtonModule,
MatIconModule,
MatTooltipModule,
FlexLayoutModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MatFabMenuModule, decorators: [{
type: NgModule,
args: [{
declarations: [MatFabMenuComponent, MatMiniFabMenuComponent],
imports: [
CommonModule,
MatButtonModule,
MatIconModule,
MatTooltipModule,
FlexLayoutModule
],
exports: [MatFabMenuComponent, MatMiniFabMenuComponent]
}]
}] });
/*
* Public API Surface of fab-menu
*/
/**
* Generated bundle index. Do not edit.
*/
export { MatFabMenuComponent, MatFabMenuModule, MatMiniFabMenuComponent };
//# sourceMappingURL=angular-material-extensions-fab-menu.mjs.map