@covalent/core/fesm2022/covalent-core-dynamic-menu.mjs

import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, ViewChild, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2$1 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i2 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import * as i4 from '@angular/material/menu';
import { MatMenuModule } from '@angular/material/menu';
import { MatTooltipModule } from '@angular/material/tooltip';
import * as i3 from '@angular/material/divider';

class TdDynamicMenuLinkComponent {
    item;
    itemClicked = new EventEmitter();
    emitClicked() {
        this.itemClicked.emit({ text: this.item.text, action: this.item.action });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdDynamicMenuLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TdDynamicMenuLinkComponent, selector: "td-dynamic-menu-link", inputs: { item: "item" }, outputs: { itemClicked: "itemClicked" }, ngImport: i0, template: "<a\n  *ngIf=\"item.link\"\n  class=\"new-tab\"\n  mat-menu-item\n  [id]=\"item.id\"\n  [href]=\"item.link\"\n  [target]=\"item.newTab ? '_blank' : '_self'\"\n  (click)=\"emitClicked()\"\n>\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>{{ item.text }}</span>\n  <mat-icon *ngIf=\"item.newTab\" class=\"new-tab-icon\">launch</mat-icon>\n</a>\n<button\n  *ngIf=\"item.action\"\n  mat-menu-item\n  [id]=\"item.id\"\n  (click)=\"emitClicked()\"\n>\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>{{ item.text }}</span>\n</button>\n", styles: [".new-tab{display:flex;justify-content:flex-start;align-items:center}.new-tab span{flex:1}.new-tab .new-tab-icon{margin:0 0 0 16px}\n"], dependencies: [{ 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: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdDynamicMenuLinkComponent, decorators: [{
            type: Component,
            args: [{ selector: 'td-dynamic-menu-link', template: "<a\n  *ngIf=\"item.link\"\n  class=\"new-tab\"\n  mat-menu-item\n  [id]=\"item.id\"\n  [href]=\"item.link\"\n  [target]=\"item.newTab ? '_blank' : '_self'\"\n  (click)=\"emitClicked()\"\n>\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>{{ item.text }}</span>\n  <mat-icon *ngIf=\"item.newTab\" class=\"new-tab-icon\">launch</mat-icon>\n</a>\n<button\n  *ngIf=\"item.action\"\n  mat-menu-item\n  [id]=\"item.id\"\n  (click)=\"emitClicked()\"\n>\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>{{ item.text }}</span>\n</button>\n", styles: [".new-tab{display:flex;justify-content:flex-start;align-items:center}.new-tab span{flex:1}.new-tab .new-tab-icon{margin:0 0 0 16px}\n"] }]
        }], propDecorators: { item: [{
                type: Input
            }], itemClicked: [{
                type: Output
            }] } });

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: 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 }]
            }] } });

class TdDynamicMenuComponent {
    trigger;
    items;
    itemClicked = new EventEmitter();
    emitClicked(event) {
        this.itemClicked.emit(event);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdDynamicMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TdDynamicMenuComponent, selector: "td-dynamic-menu", inputs: { trigger: "trigger", items: "items" }, outputs: { itemClicked: "itemClicked" }, ngImport: i0, template: "<button\n  *ngIf=\"!trigger.text\"\n  mat-icon-button\n  id=\"{{ trigger.id }}\"\n  [matMenuTriggerFor]=\"menu.childMenu\"\n>\n  <mat-icon\n    *ngIf=\"trigger.svgIcon\"\n    [class]=\"trigger.iconClasses\"\n    [svgIcon]=\"trigger.svgIcon\"\n  ></mat-icon>\n  <mat-icon *ngIf=\"trigger.icon\" [class]=\"trigger.iconClasses\">{{\n    trigger.icon\n  }}</mat-icon>\n</button>\n<button\n  *ngIf=\"trigger.text\"\n  mat-button\n  id=\"{{ trigger.id }}\"\n  [matMenuTriggerFor]=\"menu.childMenu\"\n>\n  <mat-icon\n    *ngIf=\"trigger.svgIcon\"\n    [class]=\"trigger.iconClasses\"\n    [svgIcon]=\"trigger.svgIcon\"\n  ></mat-icon>\n  <mat-icon *ngIf=\"trigger.icon\" [class]=\"trigger.iconClasses\">{{\n    trigger.icon\n  }}</mat-icon>\n  <span *ngIf=\"trigger.text\">\n    {{ trigger.text }}\n  </span>\n</button>\n\n<td-dynamic-menu-item\n  #menu\n  [items]=\"items\"\n  (itemClicked)=\"emitClicked($event)\"\n></td-dynamic-menu-item>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdDynamicMenuComponent, decorators: [{
            type: Component,
            args: [{ selector: 'td-dynamic-menu', template: "<button\n  *ngIf=\"!trigger.text\"\n  mat-icon-button\n  id=\"{{ trigger.id }}\"\n  [matMenuTriggerFor]=\"menu.childMenu\"\n>\n  <mat-icon\n    *ngIf=\"trigger.svgIcon\"\n    [class]=\"trigger.iconClasses\"\n    [svgIcon]=\"trigger.svgIcon\"\n  ></mat-icon>\n  <mat-icon *ngIf=\"trigger.icon\" [class]=\"trigger.iconClasses\">{{\n    trigger.icon\n  }}</mat-icon>\n</button>\n<button\n  *ngIf=\"trigger.text\"\n  mat-button\n  id=\"{{ trigger.id }}\"\n  [matMenuTriggerFor]=\"menu.childMenu\"\n>\n  <mat-icon\n    *ngIf=\"trigger.svgIcon\"\n    [class]=\"trigger.iconClasses\"\n    [svgIcon]=\"trigger.svgIcon\"\n  ></mat-icon>\n  <mat-icon *ngIf=\"trigger.icon\" [class]=\"trigger.iconClasses\">{{\n    trigger.icon\n  }}</mat-icon>\n  <span *ngIf=\"trigger.text\">\n    {{ trigger.text }}\n  </span>\n</button>\n\n<td-dynamic-menu-item\n  #menu\n  [items]=\"items\"\n  (itemClicked)=\"emitClicked($event)\"\n></td-dynamic-menu-item>\n" }]
        }], propDecorators: { trigger: [{
                type: Input
            }], items: [{
                type: Input
            }], itemClicked: [{
                type: Output
            }] } });

class CovalentDynamicMenuModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CovalentDynamicMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: CovalentDynamicMenuModule, declarations: [TdDynamicMenuComponent,
            TdDynamicMenuItemComponent,
            TdDynamicMenuLinkComponent], imports: [CommonModule,
            MatButtonModule,
            MatIconModule,
            MatListModule,
            MatMenuModule,
            MatTooltipModule], exports: [TdDynamicMenuComponent,
            TdDynamicMenuItemComponent,
            TdDynamicMenuLinkComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CovalentDynamicMenuModule, imports: [CommonModule,
            MatButtonModule,
            MatIconModule,
            MatListModule,
            MatMenuModule,
            MatTooltipModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CovalentDynamicMenuModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        TdDynamicMenuComponent,
                        TdDynamicMenuItemComponent,
                        TdDynamicMenuLinkComponent,
                    ],
                    imports: [
                        CommonModule,
                        MatButtonModule,
                        MatIconModule,
                        MatListModule,
                        MatMenuModule,
                        MatTooltipModule,
                    ],
                    providers: [],
                    exports: [
                        TdDynamicMenuComponent,
                        TdDynamicMenuItemComponent,
                        TdDynamicMenuLinkComponent,
                    ],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { CovalentDynamicMenuModule, TdDynamicMenuComponent, TdDynamicMenuItemComponent, TdDynamicMenuLinkComponent };
//# sourceMappingURL=covalent-core-dynamic-menu.mjs.map