UNPKG

@angular-mdl/core

Version:

Angular components, directives and styles based on material design lite https://getmdl.io.

70 lines 8.86 kB
import { Component, ElementRef, forwardRef, HostBinding, HostListener, Inject, Input, ViewEncapsulation, } from "@angular/core"; import { MdlMenuComponent } from "./mdl-menu.component"; import { toBoolean } from "../common/boolean-property"; import { callNative } from "../common/native-support"; import * as i0 from "@angular/core"; import * as i1 from "./mdl-menu.component"; export class MdlMenuItemComponent { // forwardRef is needed because of he circular dependency menu queries menuitems; menuitem needs the parent constructor(elementRef, mdlMenu) { this.elementRef = elementRef; this.mdlMenu = mdlMenu; this.tabindex = -1; this.isMenuItem = true; this.disabledIntern = false; this.element = elementRef.nativeElement; } get disabled() { return this.disabledIntern; } set disabled(value) { this.disabledIntern = toBoolean(value); } onClick($event) { $event.stopPropagation(); if (this.disabled) { this.mdlMenu.hide(); return; } this.mdlMenu.hideOnItemClicked(); } // we need to register a touchstart at the window to get informed if the user taps outside the menu. // But if we register a touchstart event - safari will no longer convert touch events to click events. // So we need to convert touch to click and the user still needs to register a (click) listener to be // informed if the menu item has clicked. onTouch($event) { // ensure that this event is totally consumed $event.stopPropagation(); $event.preventDefault(); const event = new MouseEvent("click", { bubbles: true }); callNative(this.element, "dispatchEvent", event); } } MdlMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlMenuItemComponent, deps: [{ token: i0.ElementRef }, { token: forwardRef(() => MdlMenuComponent) }], target: i0.ɵɵFactoryTarget.Component }); MdlMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MdlMenuItemComponent, selector: "mdl-menu-item", inputs: { disabled: "disabled" }, host: { listeners: { "click": "onClick($event)", "touchstart": "onTouch($event)" }, properties: { "tabindex": "this.tabindex", "class.mdl-menu__item": "this.isMenuItem" } }, ngImport: i0, template: "<ng-content></ng-content>", isInline: true, encapsulation: i0.ViewEncapsulation.None }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlMenuItemComponent, decorators: [{ type: Component, args: [{ selector: "mdl-menu-item", template: "<ng-content></ng-content>", encapsulation: ViewEncapsulation.None, }] }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.MdlMenuComponent, decorators: [{ type: Inject, args: [forwardRef(() => MdlMenuComponent)] }] }]; }, propDecorators: { tabindex: [{ type: HostBinding, args: ["tabindex"] }], isMenuItem: [{ type: HostBinding, args: ["class.mdl-menu__item"] }], disabled: [{ type: Input }], onClick: [{ type: HostListener, args: ["click", ["$event"]] }], onTouch: [{ type: HostListener, args: ["touchstart", ["$event"]] }] } }); //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWRsLW1lbnUtaXRlbS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb3JlL3NyYy9saWIvbWVudS9tZGwtbWVudS1pdGVtLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULFVBQVUsRUFDVixVQUFVLEVBQ1YsV0FBVyxFQUNYLFlBQVksRUFDWixNQUFNLEVBQ04sS0FBSyxFQUNMLGlCQUFpQixHQUNsQixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUN4RCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDdkQsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLDBCQUEwQixDQUFDOzs7QUFPdEQsTUFBTSxPQUFPLG9CQUFvQjtJQVUvQiwyR0FBMkc7SUFDM0csWUFDVSxVQUFzQixFQUV0QixPQUF5QjtRQUZ6QixlQUFVLEdBQVYsVUFBVSxDQUFZO1FBRXRCLFlBQU8sR0FBUCxPQUFPLENBQWtCO1FBWm5DLGFBQVEsR0FBRyxDQUFDLENBQUMsQ0FBQztRQUVkLGVBQVUsR0FBRyxJQUFJLENBQUM7UUFJVixtQkFBYyxHQUFHLEtBQUssQ0FBQztRQVE3QixJQUFJLENBQUMsT0FBTyxHQUFHLFVBQVUsQ0FBQyxhQUFhLENBQUM7SUFDMUMsQ0FBQztJQUVELElBQ0ksUUFBUTtRQUNWLE9BQU8sSUFBSSxDQUFDLGNBQWMsQ0FBQztJQUM3QixDQUFDO0lBRUQsSUFBSSxRQUFRLENBQUMsS0FBdUI7UUFDbEMsSUFBSSxDQUFDLGNBQWMsR0FBRyxTQUFTLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDekMsQ0FBQztJQUdELE9BQU8sQ0FBQyxNQUFhO1FBQ25CLE1BQU0sQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUN6QixJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDakIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQztZQUNwQixPQUFPO1NBQ1I7UUFDRCxJQUFJLENBQUMsT0FBTyxDQUFDLGlCQUFpQixFQUFFLENBQUM7SUFDbkMsQ0FBQztJQUVELG9HQUFvRztJQUNwRyxzR0FBc0c7SUFDdEcscUdBQXFHO0lBQ3JHLHlDQUF5QztJQUV6QyxPQUFPLENBQUMsTUFBYTtRQUNuQiw2Q0FBNkM7UUFDN0MsTUFBTSxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3pCLE1BQU0sQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUV4QixNQUFNLEtBQUssR0FBRyxJQUFJLFVBQVUsQ0FBQyxPQUFPLEVBQUUsRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQztRQUN6RCxVQUFVLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxlQUFlLEVBQUUsS0FBSyxDQUFDLENBQUM7SUFDbkQsQ0FBQzs7aUhBbERVLG9CQUFvQiw0Q0FhckIsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLGdCQUFnQixDQUFDO3FHQWJqQyxvQkFBb0IscVFBSHJCLDJCQUEyQjsyRkFHMUIsb0JBQW9CO2tCQUxoQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxlQUFlO29CQUN6QixRQUFRLEVBQUUsMkJBQTJCO29CQUNyQyxhQUFhLEVBQUUsaUJBQWlCLENBQUMsSUFBSTtpQkFDdEM7OzBCQWNJLE1BQU07MkJBQUMsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLGdCQUFnQixDQUFDOzRDQVg1QyxRQUFRO3NCQURQLFdBQVc7dUJBQUMsVUFBVTtnQkFHdkIsVUFBVTtzQkFEVCxXQUFXO3VCQUFDLHNCQUFzQjtnQkFpQi9CLFFBQVE7c0JBRFgsS0FBSztnQkFVTixPQUFPO3NCQUROLFlBQVk7dUJBQUMsT0FBTyxFQUFFLENBQUMsUUFBUSxDQUFDO2dCQWVqQyxPQUFPO3NCQUROLFlBQVk7dUJBQUMsWUFBWSxFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBFbGVtZW50UmVmLFxuICBmb3J3YXJkUmVmLFxuICBIb3N0QmluZGluZyxcbiAgSG9zdExpc3RlbmVyLFxuICBJbmplY3QsXG4gIElucHV0LFxuICBWaWV3RW5jYXBzdWxhdGlvbixcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IE1kbE1lbnVDb21wb25lbnQgfSBmcm9tIFwiLi9tZGwtbWVudS5jb21wb25lbnRcIjtcbmltcG9ydCB7IHRvQm9vbGVhbiB9IGZyb20gXCIuLi9jb21tb24vYm9vbGVhbi1wcm9wZXJ0eVwiO1xuaW1wb3J0IHsgY2FsbE5hdGl2ZSB9IGZyb20gXCIuLi9jb21tb24vbmF0aXZlLXN1cHBvcnRcIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcIm1kbC1tZW51LWl0ZW1cIixcbiAgdGVtcGxhdGU6IFwiPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlwiLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxufSlcbmV4cG9ydCBjbGFzcyBNZGxNZW51SXRlbUNvbXBvbmVudCB7XG4gIEBIb3N0QmluZGluZyhcInRhYmluZGV4XCIpXG4gIHRhYmluZGV4ID0gLTE7XG4gIEBIb3N0QmluZGluZyhcImNsYXNzLm1kbC1tZW51X19pdGVtXCIpXG4gIGlzTWVudUl0ZW0gPSB0cnVlO1xuXG4gIGVsZW1lbnQ6IEhUTUxFbGVtZW50O1xuXG4gIHByaXZhdGUgZGlzYWJsZWRJbnRlcm4gPSBmYWxzZTtcblxuICAvLyBmb3J3YXJkUmVmIGlzIG5lZWRlZCBiZWNhdXNlIG9mIGhlIGNpcmN1bGFyIGRlcGVuZGVuY3kgbWVudSBxdWVyaWVzIG1lbnVpdGVtczsgbWVudWl0ZW0gbmVlZHMgdGhlIHBhcmVudFxuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWYsXG4gICAgQEluamVjdChmb3J3YXJkUmVmKCgpID0+IE1kbE1lbnVDb21wb25lbnQpKVxuICAgIHByaXZhdGUgbWRsTWVudTogTWRsTWVudUNvbXBvbmVudFxuICApIHtcbiAgICB0aGlzLmVsZW1lbnQgPSBlbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQ7XG4gIH1cblxuICBASW5wdXQoKVxuICBnZXQgZGlzYWJsZWQoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMuZGlzYWJsZWRJbnRlcm47XG4gIH1cblxuICBzZXQgZGlzYWJsZWQodmFsdWU6IGJvb2xlYW4gfCBzdHJpbmcpIHtcbiAgICB0aGlzLmRpc2FibGVkSW50ZXJuID0gdG9Cb29sZWFuKHZhbHVlKTtcbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoXCJjbGlja1wiLCBbXCIkZXZlbnRcIl0pXG4gIG9uQ2xpY2soJGV2ZW50OiBFdmVudCk6IHZvaWQge1xuICAgICRldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICBpZiAodGhpcy5kaXNhYmxlZCkge1xuICAgICAgdGhpcy5tZGxNZW51LmhpZGUoKTtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgdGhpcy5tZGxNZW51LmhpZGVPbkl0ZW1DbGlja2VkKCk7XG4gIH1cblxuICAvLyB3ZSBuZWVkIHRvIHJlZ2lzdGVyIGEgdG91Y2hzdGFydCBhdCB0aGUgd2luZG93IHRvIGdldCBpbmZvcm1lZCBpZiB0aGUgdXNlciB0YXBzIG91dHNpZGUgdGhlIG1lbnUuXG4gIC8vIEJ1dCBpZiB3ZSByZWdpc3RlciBhIHRvdWNoc3RhcnQgZXZlbnQgLSBzYWZhcmkgd2lsbCBubyBsb25nZXIgY29udmVydCB0b3VjaCBldmVudHMgdG8gY2xpY2sgZXZlbnRzLlxuICAvLyBTbyB3ZSBuZWVkIHRvIGNvbnZlcnQgdG91Y2ggdG8gY2xpY2sgYW5kIHRoZSB1c2VyIHN0aWxsIG5lZWRzIHRvIHJlZ2lzdGVyIGEgKGNsaWNrKSBsaXN0ZW5lciB0byBiZVxuICAvLyBpbmZvcm1lZCBpZiB0aGUgbWVudSBpdGVtIGhhcyBjbGlja2VkLlxuICBASG9zdExpc3RlbmVyKFwidG91Y2hzdGFydFwiLCBbXCIkZXZlbnRcIl0pXG4gIG9uVG91Y2goJGV2ZW50OiBFdmVudCk6IHZvaWQge1xuICAgIC8vIGVuc3VyZSB0aGF0IHRoaXMgZXZlbnQgaXMgdG90YWxseSBjb25zdW1lZFxuICAgICRldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICAkZXZlbnQucHJldmVudERlZmF1bHQoKTtcblxuICAgIGNvbnN0IGV2ZW50ID0gbmV3IE1vdXNlRXZlbnQoXCJjbGlja1wiLCB7IGJ1YmJsZXM6IHRydWUgfSk7XG4gICAgY2FsbE5hdGl2ZSh0aGlzLmVsZW1lbnQsIFwiZGlzcGF0Y2hFdmVudFwiLCBldmVudCk7XG4gIH1cbn1cbiJdfQ==