var _setWidth;
import { __classPrivateFieldGet } from "tslib";
import { Component, HostBinding, Input } from '@angular/core';
import * as $ from 'jquery';
import { ZuiB, ZuiF } from '@material-zui/core';
export class ZUIMenuComponent {
    constructor() {
        this.type = 'basic';
        this.color = 'basic';
        /** default "auto", eg: '100%', "300px", "400em", "500rem" */
        this.widthPanel = 'min-content';
        /** default "after", eg: "before" | "after" */
        this.xPosition = 'after';
        /** default "below", eg: "above" | "below" */
        this.yPosition = 'below';
        this.items = [];
        this.disabledVal = false;
        this.wrapItemVal = false;
        this.fullWidth = false;
        _setWidth.set(this, () => {
            if (this.width === '100%')
                this.fullWidth = true;
        });
        this.action = (event, item) => {
            if (item === null || item === void 0 ? void 0 : item.action)
                item.action(event);
        };
        this.menuOpened = () => {
            if (this.widthPanel)
                $(`.${this.classId}`).css({ width: this.widthPanel });
        };
    }
    set disabled(val) {
        this.disabledVal = ZuiB.toBool(val);
    }
    set wrapItem(val) {
        this.wrapItemVal = ZuiB.toBool(val);
        if (val)
            this.height = 'auto';
    }
    ngOnInit() {
        this.classId = ZuiF.uuid();
    }
    ngOnChanges() {
        __classPrivateFieldGet(this, _setWidth).call(this);
    }
}
_setWidth = new WeakMap();
ZUIMenuComponent.decorators = [
    { type: Component, args: [{
                selector: 'zui-menu',
                template: "<ng-container *ngIf=\"disabledVal; else showContent\">\n  <zui-button\n    [disabled]=\"disabledVal\"\n    [label]=\"label\"\n    [type]=\"type\"\n    [icon]=\"icon\"\n    [color]=\"color\"\n    [textColor]=\"textColor\"\n    [backgroundColor]=\"backgroundColor\"\n    [prefixIcon]=\"prefixIcon\"\n    [sufixIcon]=\"sufixIcon\"\n    [width]=\"width\"\n    [height]=\"height\"\n    [wrapItem]=\"wrapItemVal\"\n  ></zui-button>\n</ng-container>\n\n<ng-template #showContent>\n  <zui-button\n    [disabled]=\"disabledVal\"\n    [label]=\"label\"\n    [type]=\"type\"\n    [icon]=\"icon\"\n    [color]=\"color\"\n    [textColor]=\"textColor\"\n    [backgroundColor]=\"backgroundColor\"\n    [prefixIcon]=\"prefixIcon\"\n    [sufixIcon]=\"sufixIcon\"\n    [width]=\"width\"\n    [height]=\"height\"\n    [wrapItem]=\"wrapItemVal\"\n    [matMenuTriggerFor]=\"menu\"\n    (menuOpened)=\"menuOpened()\"\n  ></zui-button>\n\n  <mat-menu #menu=\"matMenu\" [xPosition]=\"xPosition\" [yPosition]=\"yPosition\" class=\"{{ widthPanel ? 'zui-menu-items' : '' }} {{ classId }}\">\n    <ng-container *ngFor=\"let item of items\">\n      <zui-button\n        *ngIf=\"!item.hide\"\n        width=\"100%\"\n        height=\"48px\"\n        [align]=\"'left'\"\n        [label]=\"item.label\"\n        [prefixIcon]=\"item.prefixIcon\"\n        [sufixIcon]=\"item.sufixIcon\"\n        [color]=\"item.color\"\n        [textColor]=\"item.textColor\"\n        [backgroundColor]=\"item.backgroundColor\"\n        [disabled]=\"item.disabled\"\n        [wrapItem]=\"item.wrapItem\"\n        (action)=\"action($event, item)\"\n      ></zui-button>\n    </ng-container>\n  </mat-menu>\n</ng-template>\n",
                styles: [":host{display:inline-block}::ng-deep .zui-menu-items{min-width:0!important;max-width:none!important}"]
            },] }
];
ZUIMenuComponent.propDecorators = {
    label: [{ type: Input }],
    textColor: [{ type: Input }],
    backgroundColor: [{ type: Input }],
    type: [{ type: Input }],
    color: [{ type: Input }],
    icon: [{ type: Input }],
    prefixIcon: [{ type: Input }],
    sufixIcon: [{ type: Input }],
    width: [{ type: Input }],
    height: [{ type: Input }],
    widthPanel: [{ type: Input }],
    xPosition: [{ type: Input }],
    yPosition: [{ type: Input }],
    items: [{ type: Input }],
    disabled: [{ type: Input }],
    wrapItem: [{ type: Input }],
    fullWidth: [{ type: HostBinding, args: ['class.w-100',] }]
};
//# sourceMappingURL=index.component.js.map