@covalent/core
Version:
Core Teradata UI Platform for layouts, icons, custom components and themes. This should be added as a dependency for any project that wants to use layouts, icons and themes for Angular Material.
30 lines • 10.4 kB
JavaScript
import { Component, EventEmitter, Input, Output, ViewChild, } from '@angular/core';
import { MatMenu } from '@angular/material/menu';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/material/icon";
import * as i3 from "@angular/material/divider";
import * as i4 from "@angular/material/menu";
import * as i5 from "./dynamic-menu-link/dynamic-menu-link.component";
export class TdDynamicMenuItemComponent {
items;
itemClicked = new EventEmitter();
childMenu;
emitClicked(event) {
this.itemClicked.emit(event);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdDynamicMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TdDynamicMenuItemComponent, selector: "td-dynamic-menu-item", inputs: { items: "items" }, outputs: { itemClicked: "itemClicked" }, viewQueries: [{ propertyName: "childMenu", first: true, predicate: ["childMenu"], descendants: true, static: true }], ngImport: i0, template: "<mat-menu #childMenu=\"matMenu\" [overlapTrigger]=\"false\">\n <ng-template let-item let-index=\"index\" ngFor [ngForOf]=\"items\">\n <ng-container *ngIf=\"item.children && item.children.length > 0\">\n <button mat-menu-item [id]=\"item.id\" [matMenuTriggerFor]=\"menu.childMenu\">\n <mat-icon\n *ngIf=\"item.svgIcon\"\n [class]=\"item.iconClasses\"\n [svgIcon]=\"item.svgIcon\"\n ></mat-icon>\n <mat-icon *ngIf=\"item.icon\" [class]=\"item.iconClasses\">{{\n item.icon\n }}</mat-icon>\n <span *ngIf=\"item.text\">\n {{ item.text }}\n </span>\n </button>\n <td-dynamic-menu-item\n #menu\n [items]=\"item.children\"\n ></td-dynamic-menu-item>\n </ng-container>\n <ng-container *ngIf=\"!item.children || item.children.length === 0\">\n <ng-container *ngIf=\"!item.link && !item.action\">\n <mat-divider class=\"group-divider\" *ngIf=\"index > 0\"></mat-divider>\n <div class=\"group-label tc-td-secondary text-sm\">{{ item.text }}</div>\n </ng-container>\n <ng-container *ngIf=\"item.link || item.action\">\n <div mat-menu-item class=\"pad-none\">\n <td-dynamic-menu-link\n [item]=\"item\"\n (itemClicked)=\"emitClicked($event)\"\n ></td-dynamic-menu-link>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n</mat-menu>\n", styles: [".group-divider{margin:8px}.group-label{padding:16px}\n"], dependencies: [{ 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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: TdDynamicMenuItemComponent, selector: "td-dynamic-menu-item", inputs: ["items"], outputs: ["itemClicked"] }, { kind: "component", type: i5.TdDynamicMenuLinkComponent, selector: "td-dynamic-menu-link", inputs: ["item"], outputs: ["itemClicked"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdDynamicMenuItemComponent, decorators: [{
type: Component,
args: [{ selector: 'td-dynamic-menu-item', template: "<mat-menu #childMenu=\"matMenu\" [overlapTrigger]=\"false\">\n <ng-template let-item let-index=\"index\" ngFor [ngForOf]=\"items\">\n <ng-container *ngIf=\"item.children && item.children.length > 0\">\n <button mat-menu-item [id]=\"item.id\" [matMenuTriggerFor]=\"menu.childMenu\">\n <mat-icon\n *ngIf=\"item.svgIcon\"\n [class]=\"item.iconClasses\"\n [svgIcon]=\"item.svgIcon\"\n ></mat-icon>\n <mat-icon *ngIf=\"item.icon\" [class]=\"item.iconClasses\">{{\n item.icon\n }}</mat-icon>\n <span *ngIf=\"item.text\">\n {{ item.text }}\n </span>\n </button>\n <td-dynamic-menu-item\n #menu\n [items]=\"item.children\"\n ></td-dynamic-menu-item>\n </ng-container>\n <ng-container *ngIf=\"!item.children || item.children.length === 0\">\n <ng-container *ngIf=\"!item.link && !item.action\">\n <mat-divider class=\"group-divider\" *ngIf=\"index > 0\"></mat-divider>\n <div class=\"group-label tc-td-secondary text-sm\">{{ item.text }}</div>\n </ng-container>\n <ng-container *ngIf=\"item.link || item.action\">\n <div mat-menu-item class=\"pad-none\">\n <td-dynamic-menu-link\n [item]=\"item\"\n (itemClicked)=\"emitClicked($event)\"\n ></td-dynamic-menu-link>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n</mat-menu>\n", styles: [".group-divider{margin:8px}.group-label{padding:16px}\n"] }]
}], propDecorators: { items: [{
type: Input
}], itemClicked: [{
type: Output
}], childMenu: [{
type: ViewChild,
args: ['childMenu', { static: true }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHluYW1pYy1tZW51LWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9hbmd1bGFyL2R5bmFtaWMtbWVudS9zcmMvZHluYW1pYy1tZW51LWl0ZW0vZHluYW1pYy1tZW51LWl0ZW0uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9hbmd1bGFyL2R5bmFtaWMtbWVudS9zcmMvZHluYW1pYy1tZW51LWl0ZW0vZHluYW1pYy1tZW51LWl0ZW0uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sRUFDTixTQUFTLEdBQ1YsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLHdCQUF3QixDQUFDOzs7Ozs7O0FBUWpELE1BQU0sT0FBTywwQkFBMEI7SUFDNUIsS0FBSyxDQUFlO0lBRW5CLFdBQVcsR0FDbkIsSUFBSSxZQUFZLEVBQWdDLENBQUM7SUFFRixTQUFTLENBQVc7SUFFckUsV0FBVyxDQUFDLEtBQW1DO1FBQzdDLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQy9CLENBQUM7dUdBVlUsMEJBQTBCOzJGQUExQiwwQkFBMEIsdVBDZnZDLGc3Q0FxQ0EseXlDRHRCYSwwQkFBMEI7OzJGQUExQiwwQkFBMEI7a0JBTHRDLFNBQVM7K0JBQ0Usc0JBQXNCOzhCQUt2QixLQUFLO3NCQUFiLEtBQUs7Z0JBRUksV0FBVztzQkFBcEIsTUFBTTtnQkFHMEMsU0FBUztzQkFBekQsU0FBUzt1QkFBQyxXQUFXLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBPdXRwdXQsXG4gIFZpZXdDaGlsZCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBNYXRNZW51IH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvbWVudSc7XG5pbXBvcnQgeyBJTWVudUl0ZW0sIElUZER5bmFtaWNNZW51TGlua0NsaWNrRXZlbnQgfSBmcm9tICcuLi9keW5hbWljLW1lbnUubWVudSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3RkLWR5bmFtaWMtbWVudS1pdGVtJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2R5bmFtaWMtbWVudS1pdGVtLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZHluYW1pYy1tZW51LWl0ZW0uY29tcG9uZW50LnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgVGREeW5hbWljTWVudUl0ZW1Db21wb25lbnQge1xuICBASW5wdXQoKSBpdGVtcyE6IElNZW51SXRlbVtdO1xuXG4gIEBPdXRwdXQoKSBpdGVtQ2xpY2tlZDogRXZlbnRFbWl0dGVyPElUZER5bmFtaWNNZW51TGlua0NsaWNrRXZlbnQ+ID1cbiAgICBuZXcgRXZlbnRFbWl0dGVyPElUZER5bmFtaWNNZW51TGlua0NsaWNrRXZlbnQ+KCk7XG5cbiAgQFZpZXdDaGlsZCgnY2hpbGRNZW51JywgeyBzdGF0aWM6IHRydWUgfSkgcHVibGljIGNoaWxkTWVudSE6IE1hdE1lbnU7XG5cbiAgZW1pdENsaWNrZWQoZXZlbnQ6IElUZER5bmFtaWNNZW51TGlua0NsaWNrRXZlbnQpOiB2b2lkIHtcbiAgICB0aGlzLml0ZW1DbGlja2VkLmVtaXQoZXZlbnQpO1xuICB9XG59XG4iLCI8bWF0LW1lbnUgI2NoaWxkTWVudT1cIm1hdE1lbnVcIiBbb3ZlcmxhcFRyaWdnZXJdPVwiZmFsc2VcIj5cbiAgPG5nLXRlbXBsYXRlIGxldC1pdGVtIGxldC1pbmRleD1cImluZGV4XCIgbmdGb3IgW25nRm9yT2ZdPVwiaXRlbXNcIj5cbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiaXRlbS5jaGlsZHJlbiAmJiBpdGVtLmNoaWxkcmVuLmxlbmd0aCA+IDBcIj5cbiAgICAgIDxidXR0b24gbWF0LW1lbnUtaXRlbSBbaWRdPVwiaXRlbS5pZFwiIFttYXRNZW51VHJpZ2dlckZvcl09XCJtZW51LmNoaWxkTWVudVwiPlxuICAgICAgICA8bWF0LWljb25cbiAgICAgICAgICAqbmdJZj1cIml0ZW0uc3ZnSWNvblwiXG4gICAgICAgICAgW2NsYXNzXT1cIml0ZW0uaWNvbkNsYXNzZXNcIlxuICAgICAgICAgIFtzdmdJY29uXT1cIml0ZW0uc3ZnSWNvblwiXG4gICAgICAgID48L21hdC1pY29uPlxuICAgICAgICA8bWF0LWljb24gKm5nSWY9XCJpdGVtLmljb25cIiBbY2xhc3NdPVwiaXRlbS5pY29uQ2xhc3Nlc1wiPnt7XG4gICAgICAgICAgaXRlbS5pY29uXG4gICAgICAgIH19PC9tYXQtaWNvbj5cbiAgICAgICAgPHNwYW4gKm5nSWY9XCJpdGVtLnRleHRcIj5cbiAgICAgICAgICB7eyBpdGVtLnRleHQgfX1cbiAgICAgICAgPC9zcGFuPlxuICAgICAgPC9idXR0b24+XG4gICAgICA8dGQtZHluYW1pYy1tZW51LWl0ZW1cbiAgICAgICAgI21lbnVcbiAgICAgICAgW2l0ZW1zXT1cIml0ZW0uY2hpbGRyZW5cIlxuICAgICAgPjwvdGQtZHluYW1pYy1tZW51LWl0ZW0+XG4gICAgPC9uZy1jb250YWluZXI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIiFpdGVtLmNoaWxkcmVuIHx8IGl0ZW0uY2hpbGRyZW4ubGVuZ3RoID09PSAwXCI+XG4gICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiIWl0ZW0ubGluayAmJiAhaXRlbS5hY3Rpb25cIj5cbiAgICAgICAgPG1hdC1kaXZpZGVyIGNsYXNzPVwiZ3JvdXAtZGl2aWRlclwiICpuZ0lmPVwiaW5kZXggPiAwXCI+PC9tYXQtZGl2aWRlcj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImdyb3VwLWxhYmVsIHRjLXRkLXNlY29uZGFyeSB0ZXh0LXNtXCI+e3sgaXRlbS50ZXh0IH19PC9kaXY+XG4gICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJpdGVtLmxpbmsgfHwgaXRlbS5hY3Rpb25cIj5cbiAgICAgICAgPGRpdiBtYXQtbWVudS1pdGVtIGNsYXNzPVwicGFkLW5vbmVcIj5cbiAgICAgICAgICA8dGQtZHluYW1pYy1tZW51LWxpbmtcbiAgICAgICAgICAgIFtpdGVtXT1cIml0ZW1cIlxuICAgICAgICAgICAgKGl0ZW1DbGlja2VkKT1cImVtaXRDbGlja2VkKCRldmVudClcIlxuICAgICAgICAgID48L3RkLWR5bmFtaWMtbWVudS1saW5rPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvbmctY29udGFpbmVyPlxuICAgIDwvbmctY29udGFpbmVyPlxuICA8L25nLXRlbXBsYXRlPlxuPC9tYXQtbWVudT5cbiJdfQ==