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 "@tilde-nlp/ngx-common";
import * as i3 from "@ngbracket/ngx-layout/flex";
import * as i4 from "@angular/material/menu";
import * as i5 from "../../pipes/capitalize.pipe";
export class TldListMenuComponent {
    menu;
    /** Title key. Should be set if element is not string. */
    titleKey;
    list;
    showContent = true;
    selected;
    set selectedValue(value) {
        for (const el of this.list) {
            if ((this.valueKey && value === el[this.valueKey]) || (!this.valueKey && value === el)) {
                this.selected = el;
                return;
            }
        }
        this.selected = null;
    }
    ;
    disabled;
    /** Open menu button aria label */
    ariaLabel;
    /** Which property of object should be emitted when element is selected. By default, object is returned. */
    valueKey;
    /** For testing purposes. Adds this to attributes for wrapper. */
    testId;
    selectionChange = new EventEmitter();
    select(element) {
        this.selectionChange.next(element.languageId);
    }
    onMenuOpen() {
        if (this.testId) {
            const panel = document.getElementById(this.menu.panelId);
            panel.setAttribute("data-test-id", this.testId);
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TldListMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TldListMenuComponent, selector: "tld-list-menu", inputs: { titleKey: "titleKey", list: "list", showContent: "showContent", selectedValue: "selectedValue", disabled: "disabled", ariaLabel: "ariaLabel", valueKey: "valueKey", testId: "testId" }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "menu", first: true, predicate: MatMenu, descendants: true }], ngImport: i0, template: "<lib-open-close-button [isOpened]=\"state.menuOpen\" #state=\"matMenuTrigger\" [disabled]=\"disabled\"\r\n\r\n[matMenuTriggerFor]=\"listMenu\" (menuOpened)=\"onMenuOpen()\" [ariaLabelCode]=\"ariaLabel\">\r\n    <ng-content *ngIf=\"showContent\"></ng-content>\r\n    <ng-container *ngIf=\"!showContent && selected\">\r\n        <span>{{(titleKey? selected[titleKey]:selected) | capitalize}}</span>\r\n    </ng-container>\r\n</lib-open-close-button>\r\n<mat-menu #listMenu=\"matMenu\" fxLayout=\"column\">\r\n    <ng-container *ngFor=\"let element of list\">\r\n        <button fxLayoutAlign=\"start center\" mat-menu-item [attr.aria-label]=\"(titleKey? element[titleKey]:element)\"\r\n            *ngIf=\"element\" class=\"tld-list-title\" (click)=\"select(element)\" [disabled]=\"disabled\">\r\n            {{(titleKey? element[titleKey]:element) | capitalize}}\r\n        </button>\r\n    </ng-container>\r\n</mat-menu>", styles: [".tld-list-title{font-weight:500}\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.OpenCloseButtonComponent, selector: "lib-open-close-button", inputs: ["disableFocusOnAction", "disabled", "isIcon", "ariaLabelCode", "isOpened"] }, { kind: "directive", type: i3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { 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: "pipe", type: i5.CapitalizePipe, name: "capitalize" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TldListMenuComponent, decorators: [{
            type: Component,
            args: [{ selector: 'tld-list-menu', template: "<lib-open-close-button [isOpened]=\"state.menuOpen\" #state=\"matMenuTrigger\" [disabled]=\"disabled\"\r\n\r\n[matMenuTriggerFor]=\"listMenu\" (menuOpened)=\"onMenuOpen()\" [ariaLabelCode]=\"ariaLabel\">\r\n    <ng-content *ngIf=\"showContent\"></ng-content>\r\n    <ng-container *ngIf=\"!showContent && selected\">\r\n        <span>{{(titleKey? selected[titleKey]:selected) | capitalize}}</span>\r\n    </ng-container>\r\n</lib-open-close-button>\r\n<mat-menu #listMenu=\"matMenu\" fxLayout=\"column\">\r\n    <ng-container *ngFor=\"let element of list\">\r\n        <button fxLayoutAlign=\"start center\" mat-menu-item [attr.aria-label]=\"(titleKey? element[titleKey]:element)\"\r\n            *ngIf=\"element\" class=\"tld-list-title\" (click)=\"select(element)\" [disabled]=\"disabled\">\r\n            {{(titleKey? element[titleKey]:element) | capitalize}}\r\n        </button>\r\n    </ng-container>\r\n</mat-menu>", styles: [".tld-list-title{font-weight:500}\n"] }]
        }], propDecorators: { menu: [{
                type: ViewChild,
                args: [MatMenu]
            }], titleKey: [{
                type: Input
            }], list: [{
                type: Input
            }], showContent: [{
                type: Input
            }], selectedValue: [{
                type: Input
            }], disabled: [{
                type: Input
            }], ariaLabel: [{
                type: Input
            }], valueKey: [{
                type: Input
            }], testId: [{
                type: Input
            }], selectionChange: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 