@angular-mdl/fab-menu
Version:
Angular Material Design Lite - Fab menu Component
80 lines (73 loc) • 6.88 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Input, EventEmitter, Output, NgModule } from '@angular/core';
import * as i1 from '@angular-mdl/core';
import { MdlModule } from '@angular-mdl/core';
import * as i2 from '@angular-mdl/popover';
import { MdlPopoverModule } from '@angular-mdl/popover';
import { CommonModule } from '@angular/common';
class MdlFabMenuComponent {
constructor() {
this.alwaysShowTooltips = false;
}
}
MdlFabMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlFabMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
MdlFabMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MdlFabMenuComponent, selector: "mdl-fab-menu", inputs: { alwaysShowTooltips: "alwaysShowTooltips" }, ngImport: i0, template: "<button (click)=\"fabPopover.toggle($event)\"\n (touchstart)=\"alwaysShowTooltips = true\"\n mdl-button\n mdl-button-type=\"fab\"\n mdl-colored=\"primary\"\n>\n <mdl-icon>add</mdl-icon>\n</button>\n<mdl-popover #fabPopover [class.direction-up]=\"true\" [hide-on-click]=\"true\">\n <ng-content></ng-content>\n</mdl-popover>\n", styles: [":host{position:fixed;right:.5rem;bottom:.5rem;z-index:1000}:host .mdl-popover{background:none;right:8px}:host .mdl-popover.direction-up{bottom:56px}\n"], dependencies: [{ kind: "component", type: i1.MdlButtonComponent, selector: "mdl-button, button[mdl-button], a[mdl-button]", inputs: ["mdl-button-type", "mdl-colored", "disabled"], exportAs: ["mdlButton"] }, { kind: "component", type: i1.MdlIconComponent, selector: "mdl-icon" }, { kind: "component", type: i2.MdlPopoverComponent, selector: "mdl-popover", inputs: ["hide-on-click", "mdl-popover-position"], outputs: ["onShow", "onHide"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlFabMenuComponent, decorators: [{
type: Component,
args: [{ selector: "mdl-fab-menu", template: "<button (click)=\"fabPopover.toggle($event)\"\n (touchstart)=\"alwaysShowTooltips = true\"\n mdl-button\n mdl-button-type=\"fab\"\n mdl-colored=\"primary\"\n>\n <mdl-icon>add</mdl-icon>\n</button>\n<mdl-popover #fabPopover [class.direction-up]=\"true\" [hide-on-click]=\"true\">\n <ng-content></ng-content>\n</mdl-popover>\n", styles: [":host{position:fixed;right:.5rem;bottom:.5rem;z-index:1000}:host .mdl-popover{background:none;right:8px}:host .mdl-popover.direction-up{bottom:56px}\n"] }]
}], propDecorators: { alwaysShowTooltips: [{
type: Input
}] } });
class MdlFabMenuItemComponent {
constructor() {
// eslint-disable-next-line
this.menuClick = new EventEmitter();
this.isHoovering = false;
}
ngOnInit() {
this.isHoovering = false;
}
}
MdlFabMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlFabMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
MdlFabMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MdlFabMenuItemComponent, selector: "mdl-fab-menu-item", inputs: { label: "label", icon: "icon", fabMenu: "fabMenu" }, outputs: { menuClick: "menu-clicked" }, ngImport: i0, template: "<button\n mdl-button\n mdl-button-type=\"mini-fab\"\n (mouseover)=\"isHoovering = true\"\n (mouseleave)=\"isHoovering = false\"\n (click)=\"menuClick.emit()\"\n>\n <mdl-icon>{{icon}}</mdl-icon>\n</button>\n<mdl-chip\n [mdl-label]=\"label\"\n [hidden]=\"!(fabMenu?.alwaysShowTooltips || isHoovering)\"\n></mdl-chip>\n", styles: [":host{display:flex;flex-direction:row-reverse;margin-bottom:1rem}:host .mdl-chip{display:inline-block}:host .mdl-button{margin:0 0 0 2rem;background:white}\n"], dependencies: [{ kind: "component", type: i1.MdlButtonComponent, selector: "mdl-button, button[mdl-button], a[mdl-button]", inputs: ["mdl-button-type", "mdl-colored", "disabled"], exportAs: ["mdlButton"] }, { kind: "component", type: i1.MdlChipComponent, selector: "mdl-chip", inputs: ["mdl-label", "mdl-action-icon"], outputs: ["action-click"] }, { kind: "component", type: i1.MdlIconComponent, selector: "mdl-icon" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlFabMenuItemComponent, decorators: [{
type: Component,
args: [{ selector: "mdl-fab-menu-item", template: "<button\n mdl-button\n mdl-button-type=\"mini-fab\"\n (mouseover)=\"isHoovering = true\"\n (mouseleave)=\"isHoovering = false\"\n (click)=\"menuClick.emit()\"\n>\n <mdl-icon>{{icon}}</mdl-icon>\n</button>\n<mdl-chip\n [mdl-label]=\"label\"\n [hidden]=\"!(fabMenu?.alwaysShowTooltips || isHoovering)\"\n></mdl-chip>\n", styles: [":host{display:flex;flex-direction:row-reverse;margin-bottom:1rem}:host .mdl-chip{display:inline-block}:host .mdl-button{margin:0 0 0 2rem;background:white}\n"] }]
}], propDecorators: { label: [{
type: Input
}], icon: [{
type: Input
}], fabMenu: [{
type: Input
}], menuClick: [{
type: Output,
args: ["menu-clicked"]
}] } });
class MdlFabMenuModule {
static forRoot() {
return {
ngModule: MdlFabMenuModule,
providers: [],
};
}
}
MdlFabMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlFabMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
MdlFabMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: MdlFabMenuModule, declarations: [MdlFabMenuComponent, MdlFabMenuItemComponent], imports: [CommonModule, MdlModule, MdlPopoverModule], exports: [MdlFabMenuComponent, MdlFabMenuItemComponent] });
MdlFabMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlFabMenuModule, imports: [CommonModule, MdlModule, MdlPopoverModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlFabMenuModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, MdlModule, MdlPopoverModule],
exports: [MdlFabMenuComponent, MdlFabMenuItemComponent],
declarations: [MdlFabMenuComponent, MdlFabMenuItemComponent],
}]
}] });
/*
* Public API Surface of fab-menu
*/
/**
* Generated bundle index. Do not edit.
*/
export { MdlFabMenuComponent, MdlFabMenuItemComponent, MdlFabMenuModule };
//# sourceMappingURL=angular-mdl-fab-menu.mjs.map
//# sourceMappingURL=angular-mdl-fab-menu.mjs.map