ngx-material-drawer
Version:
A dynamic, configurable Angular Material drawer with dashboard capabilities
69 lines • 13.6 kB
JavaScript
import { Component, Input, } from "@angular/core";
import { NgxNavService } from "../utils/nav.service";
import { animate, style, transition, trigger, } from "@angular/animations";
import { NgxMaterialDrawerEventEmitter } from "../utils/mat-event-emitter.service";
import * as i0 from "@angular/core";
import * as i1 from "../utils/nav.service";
import * as i2 from "../utils/mat-event-emitter.service";
import * as i3 from "@angular/common";
import * as i4 from "@angular/material/button";
import * as i5 from "@angular/material/icon";
import * as i6 from "@angular/material/tooltip";
import * as i7 from "@angular/flex-layout/extended";
export class NgxFabComponent {
constructor(navService, matEventEmitterService) {
this.navService = navService;
this.matEventEmitterService = matEventEmitterService;
this.expanded = false;
}
ngOnInit() { }
onFabClick(item) {
this.matEventEmitterService.fabButtonClick(item);
}
onMainFabClick(item) {
this.expanded = !this.expanded;
if (this.fabData &&
this.fabData.children &&
this.fabData.children.length &&
this.fabData.children.filter((f) => f.isEnable).length) {
if (this.expanded) {
this.matEventEmitterService.fabExpanded(item);
}
else {
this.matEventEmitterService.fabCollapsed(item);
}
}
else {
this.matEventEmitterService.mainFabButtonClick(item);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgxFabComponent, deps: [{ token: i1.NgxNavService }, { token: i2.NgxMaterialDrawerEventEmitter }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NgxFabComponent, selector: "lib-fab", inputs: { fabData: "fabData" }, ngImport: i0, template: "<div\n class=\"ngx-material-fab\"\n *ngIf=\"fabData?.isEnable\"\n>\n <div\n class=\"ngx-material-mini-fab\"\n *ngIf=\"expanded\"\n [@slideInOut]\n >\n <ng-container *ngFor=\"let item of fabData?.children\">\n <button\n *ngIf=\"item?.isEnable\"\n [ngStyle]=\"item?.style? item?.style : ''\"\n mat-mini-fab\n [matTooltip]=\"item?.tooltip\"\n class=\"mini-fab\"\n (click)=\"onFabClick(item)\"\n >\n <mat-icon>{{item?.icon}}</mat-icon>\n </button>\n </ng-container>\n </div>\n <button\n mat-fab\n [matTooltip]=\"fabData?.tooltip\"\n *ngIf=\"fabData?.isEnable\"\n [ngStyle]=\"fabData?.style? fabData?.style : ''\"\n (click)=\"onMainFabClick(fabData)\"\n >\n <mat-icon>{{fabData?.icon}}</mat-icon>\n </button>\n</div>\n", styles: [".ngx-material-fab{position:fixed;z-index:5;right:25px;bottom:25px}.ngx-material-fab .ngx-material-mini-fab{position:absolute;left:0;bottom:55px;padding:10px}.ngx-material-fab .ngx-material-mini-fab .mini-fab{margin-top:5px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i7.DefaultStyleDirective, selector: " [ngStyle], [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl], [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl], [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }], animations: [
trigger("slideInOut", [
transition(":enter", [
style({ transform: "translateY(100%)" }),
animate("200ms ease-in", style({ transform: "translateY(0%)" })),
]),
transition(":leave", [
animate("200ms ease-in", style({ transform: "translateY(100%)" })),
]),
]),
] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgxFabComponent, decorators: [{
type: Component,
args: [{ selector: "lib-fab", animations: [
trigger("slideInOut", [
transition(":enter", [
style({ transform: "translateY(100%)" }),
animate("200ms ease-in", style({ transform: "translateY(0%)" })),
]),
transition(":leave", [
animate("200ms ease-in", style({ transform: "translateY(100%)" })),
]),
]),
], template: "<div\n class=\"ngx-material-fab\"\n *ngIf=\"fabData?.isEnable\"\n>\n <div\n class=\"ngx-material-mini-fab\"\n *ngIf=\"expanded\"\n [@slideInOut]\n >\n <ng-container *ngFor=\"let item of fabData?.children\">\n <button\n *ngIf=\"item?.isEnable\"\n [ngStyle]=\"item?.style? item?.style : ''\"\n mat-mini-fab\n [matTooltip]=\"item?.tooltip\"\n class=\"mini-fab\"\n (click)=\"onFabClick(item)\"\n >\n <mat-icon>{{item?.icon}}</mat-icon>\n </button>\n </ng-container>\n </div>\n <button\n mat-fab\n [matTooltip]=\"fabData?.tooltip\"\n *ngIf=\"fabData?.isEnable\"\n [ngStyle]=\"fabData?.style? fabData?.style : ''\"\n (click)=\"onMainFabClick(fabData)\"\n >\n <mat-icon>{{fabData?.icon}}</mat-icon>\n </button>\n</div>\n", styles: [".ngx-material-fab{position:fixed;z-index:5;right:25px;bottom:25px}.ngx-material-fab .ngx-material-mini-fab{position:absolute;left:0;bottom:55px;padding:10px}.ngx-material-fab .ngx-material-mini-fab .mini-fab{margin-top:5px}\n"] }]
}], ctorParameters: () => [{ type: i1.NgxNavService }, { type: i2.NgxMaterialDrawerEventEmitter }], propDecorators: { fabData: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmFiLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1tYXRlcmlhbC1kcmF3ZXIvc3JjL2xpYi9hcHAvZmFiL2ZhYi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtbWF0ZXJpYWwtZHJhd2VyL3NyYy9saWIvYXBwL2ZhYi9mYWIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFFVCxLQUFLLEdBR04sTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQ3JELE9BQU8sRUFDTCxPQUFPLEVBRVAsS0FBSyxFQUNMLFVBQVUsRUFDVixPQUFPLEdBQ1IsTUFBTSxxQkFBcUIsQ0FBQztBQUU3QixPQUFPLEVBQUUsNkJBQTZCLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQzs7Ozs7Ozs7O0FBa0JuRixNQUFNLE9BQU8sZUFBZTtJQUkxQixZQUNTLFVBQXlCLEVBQ3pCLHNCQUFxRDtRQURyRCxlQUFVLEdBQVYsVUFBVSxDQUFlO1FBQ3pCLDJCQUFzQixHQUF0QixzQkFBc0IsQ0FBK0I7UUFMdkQsYUFBUSxHQUFZLEtBQUssQ0FBQztJQU05QixDQUFDO0lBRUosUUFBUSxLQUFJLENBQUM7SUFFYixVQUFVLENBQUMsSUFBUztRQUNsQixJQUFJLENBQUMsc0JBQXNCLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ25ELENBQUM7SUFFRCxjQUFjLENBQUMsSUFBUztRQUN0QixJQUFJLENBQUMsUUFBUSxHQUFHLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQztRQUMvQixJQUNFLElBQUksQ0FBQyxPQUFPO1lBQ1osSUFBSSxDQUFDLE9BQU8sQ0FBQyxRQUFRO1lBQ3JCLElBQUksQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLE1BQU07WUFDNUIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBTSxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLENBQUMsTUFBTSxFQUMzRCxDQUFDO1lBQ0QsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7Z0JBQ2xCLElBQUksQ0FBQyxzQkFBc0IsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLENBQUM7WUFDaEQsQ0FBQztpQkFBTSxDQUFDO2dCQUNOLElBQUksQ0FBQyxzQkFBc0IsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLENBQUM7WUFDakQsQ0FBQztRQUNILENBQUM7YUFBTSxDQUFDO1lBQ04sSUFBSSxDQUFDLHNCQUFzQixDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ3ZELENBQUM7SUFDSCxDQUFDOytHQS9CVSxlQUFlO21HQUFmLGVBQWUsK0VDbEM1QiwwN0JBZ0NBLGl1RERWYztZQUNWLE9BQU8sQ0FBQyxZQUFZLEVBQUU7Z0JBQ3BCLFVBQVUsQ0FBQyxRQUFRLEVBQUU7b0JBQ25CLEtBQUssQ0FBQyxFQUFFLFNBQVMsRUFBRSxrQkFBa0IsRUFBRSxDQUFDO29CQUN4QyxPQUFPLENBQUMsZUFBZSxFQUFFLEtBQUssQ0FBQyxFQUFFLFNBQVMsRUFBRSxnQkFBZ0IsRUFBRSxDQUFDLENBQUM7aUJBQ2pFLENBQUM7Z0JBQ0YsVUFBVSxDQUFDLFFBQVEsRUFBRTtvQkFDbkIsT0FBTyxDQUFDLGVBQWUsRUFBRSxLQUFLLENBQUMsRUFBRSxTQUFTLEVBQUUsa0JBQWtCLEVBQUUsQ0FBQyxDQUFDO2lCQUNuRSxDQUFDO2FBQ0gsQ0FBQztTQUNIOzs0RkFFVSxlQUFlO2tCQWhCM0IsU0FBUzsrQkFDRSxTQUFTLGNBR1A7d0JBQ1YsT0FBTyxDQUFDLFlBQVksRUFBRTs0QkFDcEIsVUFBVSxDQUFDLFFBQVEsRUFBRTtnQ0FDbkIsS0FBSyxDQUFDLEVBQUUsU0FBUyxFQUFFLGtCQUFrQixFQUFFLENBQUM7Z0NBQ3hDLE9BQU8sQ0FBQyxlQUFlLEVBQUUsS0FBSyxDQUFDLEVBQUUsU0FBUyxFQUFFLGdCQUFnQixFQUFFLENBQUMsQ0FBQzs2QkFDakUsQ0FBQzs0QkFDRixVQUFVLENBQUMsUUFBUSxFQUFFO2dDQUNuQixPQUFPLENBQUMsZUFBZSxFQUFFLEtBQUssQ0FBQyxFQUFFLFNBQVMsRUFBRSxrQkFBa0IsRUFBRSxDQUFDLENBQUM7NkJBQ25FLENBQUM7eUJBQ0gsQ0FBQztxQkFDSDs4SEFJUSxPQUFPO3NCQUFmLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIEhvc3RCaW5kaW5nLFxuICBJbnB1dCxcbiAgT25Jbml0LFxuICBWaWV3Q2hpbGQsXG59IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBOZ3hOYXZTZXJ2aWNlIH0gZnJvbSBcIi4uL3V0aWxzL25hdi5zZXJ2aWNlXCI7XG5pbXBvcnQge1xuICBhbmltYXRlLFxuICBzdGF0ZSxcbiAgc3R5bGUsXG4gIHRyYW5zaXRpb24sXG4gIHRyaWdnZXIsXG59IGZyb20gXCJAYW5ndWxhci9hbmltYXRpb25zXCI7XG5pbXBvcnQgeyBNYXRNZW51IH0gZnJvbSBcIkBhbmd1bGFyL21hdGVyaWFsL21lbnVcIjtcbmltcG9ydCB7IE5neE1hdGVyaWFsRHJhd2VyRXZlbnRFbWl0dGVyIH0gZnJvbSBcIi4uL3V0aWxzL21hdC1ldmVudC1lbWl0dGVyLnNlcnZpY2VcIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcImxpYi1mYWJcIixcbiAgdGVtcGxhdGVVcmw6IFwiLi9mYWIuY29tcG9uZW50Lmh0bWxcIixcbiAgc3R5bGVVcmxzOiBbXCIuL2ZhYi5jb21wb25lbnQuc2Nzc1wiXSxcbiAgYW5pbWF0aW9uczogW1xuICAgIHRyaWdnZXIoXCJzbGlkZUluT3V0XCIsIFtcbiAgICAgIHRyYW5zaXRpb24oXCI6ZW50ZXJcIiwgW1xuICAgICAgICBzdHlsZSh7IHRyYW5zZm9ybTogXCJ0cmFuc2xhdGVZKDEwMCUpXCIgfSksXG4gICAgICAgIGFuaW1hdGUoXCIyMDBtcyBlYXNlLWluXCIsIHN0eWxlKHsgdHJhbnNmb3JtOiBcInRyYW5zbGF0ZVkoMCUpXCIgfSkpLFxuICAgICAgXSksXG4gICAgICB0cmFuc2l0aW9uKFwiOmxlYXZlXCIsIFtcbiAgICAgICAgYW5pbWF0ZShcIjIwMG1zIGVhc2UtaW5cIiwgc3R5bGUoeyB0cmFuc2Zvcm06IFwidHJhbnNsYXRlWSgxMDAlKVwiIH0pKSxcbiAgICAgIF0pLFxuICAgIF0pLFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBOZ3hGYWJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBwdWJsaWMgZXhwYW5kZWQ6IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCkgZmFiRGF0YTogYW55O1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHB1YmxpYyBuYXZTZXJ2aWNlOiBOZ3hOYXZTZXJ2aWNlLFxuICAgIHB1YmxpYyBtYXRFdmVudEVtaXR0ZXJTZXJ2aWNlOiBOZ3hNYXRlcmlhbERyYXdlckV2ZW50RW1pdHRlclxuICApIHt9XG5cbiAgbmdPbkluaXQoKSB7fVxuXG4gIG9uRmFiQ2xpY2soaXRlbTogYW55KSB7XG4gICAgdGhpcy5tYXRFdmVudEVtaXR0ZXJTZXJ2aWNlLmZhYkJ1dHRvbkNsaWNrKGl0ZW0pO1xuICB9XG5cbiAgb25NYWluRmFiQ2xpY2soaXRlbTogYW55KSB7XG4gICAgdGhpcy5leHBhbmRlZCA9ICF0aGlzLmV4cGFuZGVkO1xuICAgIGlmIChcbiAgICAgIHRoaXMuZmFiRGF0YSAmJlxuICAgICAgdGhpcy5mYWJEYXRhLmNoaWxkcmVuICYmXG4gICAgICB0aGlzLmZhYkRhdGEuY2hpbGRyZW4ubGVuZ3RoICYmXG4gICAgICB0aGlzLmZhYkRhdGEuY2hpbGRyZW4uZmlsdGVyKChmOiBhbnkpID0+IGYuaXNFbmFibGUpLmxlbmd0aFxuICAgICkge1xuICAgICAgaWYgKHRoaXMuZXhwYW5kZWQpIHtcbiAgICAgICAgdGhpcy5tYXRFdmVudEVtaXR0ZXJTZXJ2aWNlLmZhYkV4cGFuZGVkKGl0ZW0pO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgdGhpcy5tYXRFdmVudEVtaXR0ZXJTZXJ2aWNlLmZhYkNvbGxhcHNlZChpdGVtKTtcbiAgICAgIH1cbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5tYXRFdmVudEVtaXR0ZXJTZXJ2aWNlLm1haW5GYWJCdXR0b25DbGljayhpdGVtKTtcbiAgICB9XG4gIH1cbn1cbiIsIjxkaXZcbiAgICBjbGFzcz1cIm5neC1tYXRlcmlhbC1mYWJcIlxuICAgICpuZ0lmPVwiZmFiRGF0YT8uaXNFbmFibGVcIlxuPlxuICAgIDxkaXZcbiAgICAgICAgY2xhc3M9XCJuZ3gtbWF0ZXJpYWwtbWluaS1mYWJcIlxuICAgICAgICAqbmdJZj1cImV4cGFuZGVkXCJcbiAgICAgICAgW0BzbGlkZUluT3V0XVxuICAgID5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgaXRlbSBvZiBmYWJEYXRhPy5jaGlsZHJlblwiPlxuICAgICAgICAgICAgPGJ1dHRvblxuICAgICAgICAgICAgICAgICpuZ0lmPVwiaXRlbT8uaXNFbmFibGVcIlxuICAgICAgICAgICAgICAgIFtuZ1N0eWxlXT1cIml0ZW0/LnN0eWxlPyBpdGVtPy5zdHlsZSA6ICcnXCJcbiAgICAgICAgICAgICAgICBtYXQtbWluaS1mYWJcbiAgICAgICAgICAgICAgICBbbWF0VG9vbHRpcF09XCJpdGVtPy50b29sdGlwXCJcbiAgICAgICAgICAgICAgICBjbGFzcz1cIm1pbmktZmFiXCJcbiAgICAgICAgICAgICAgICAoY2xpY2spPVwib25GYWJDbGljayhpdGVtKVwiXG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgPG1hdC1pY29uPnt7aXRlbT8uaWNvbn19PC9tYXQtaWNvbj5cbiAgICAgICAgICAgIDwvYnV0dG9uPlxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8L2Rpdj5cbiAgICA8YnV0dG9uXG4gICAgICAgIG1hdC1mYWJcbiAgICAgICAgW21hdFRvb2x0aXBdPVwiZmFiRGF0YT8udG9vbHRpcFwiXG4gICAgICAgICpuZ0lmPVwiZmFiRGF0YT8uaXNFbmFibGVcIlxuICAgICAgICBbbmdTdHlsZV09XCJmYWJEYXRhPy5zdHlsZT8gZmFiRGF0YT8uc3R5bGUgOiAnJ1wiXG4gICAgICAgIChjbGljayk9XCJvbk1haW5GYWJDbGljayhmYWJEYXRhKVwiXG4gICAgPlxuICAgICAgICA8bWF0LWljb24+e3tmYWJEYXRhPy5pY29ufX08L21hdC1pY29uPlxuICAgIDwvYnV0dG9uPlxuPC9kaXY+XG4iXX0=