// Copyright (c) Laserfiche.
// Licensed under the MIT License. See LICENSE in the project root for license information.
import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/material/menu";
import * as i3 from "@angular/material/tooltip";
export class LfToolbarComponent {
    /** @internal */
    constructor() {
        // TODO: if there is not enough room for displayed options, put everything in dropdown
        this.displayed_options = [];
        this.dropdown_options = [];
        this.optionSelected = new EventEmitter();
    }
    /** @internal */
    onClickButton(option) {
        this.optionSelected.emit(option);
    }
    /** @internal */
    getIcons(option) {
        if (!option.icon) {
            return [];
        }
        if (typeof (option.icon) === 'string') {
            return [option.icon];
        }
        else {
            return option.icon;
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LfToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: LfToolbarComponent, selector: "lf-toolbar-component", inputs: { displayed_options: "displayed_options", dropdown_options: "dropdown_options" }, outputs: { optionSelected: "optionSelected" }, ngImport: i0, template: "<!--Copyright (c) Laserfiche.\r\nLicensed under the MIT License. See LICENSE in the project root for license information.-->\r\n\r\n<div class=\"lf-toolbar-container\">\r\n  <span\r\n    [matTooltip]=\"displayedOption.name\"\r\n    matTooltipClass=\"lf-web-client-tooltip\"\r\n    class=\"lf-toolbar-expanded-button-span\"\r\n    *ngFor=\"let displayedOption of displayed_options\"\r\n  >\r\n    <button class=\"lf-toolbar-button\" [disabled]=\"displayedOption.disabled\" (click)=\"onClickButton(displayedOption)\">\r\n      <img\r\n        *ngFor=\"let icon of getIcons(displayedOption)\"\r\n        [src]=\"icon\"\r\n        [alt]=\"displayedOption.name\"\r\n        class=\"lf-toolbar-button-icon\"\r\n      />\r\n    </button>\r\n  </span>\r\n  <button\r\n    *ngIf=\"dropdown_options && dropdown_options.length > 0\"\r\n    class=\"lf-toolbar-button\"\r\n    [matMenuTriggerFor]=\"compactButtonMenu\"\r\n  >\r\n    <span class=\"material-icons lf-toolbar-dropdown-button-icon\"> more_vert </span>\r\n  </button>\r\n  <mat-menu #compactButtonMenu=\"matMenu\" class=\"lf-dropdown-menu\">\r\n    <button\r\n      [disabled]=\"dropdownOption.disabled\"\r\n      class=\"lf-dropdown-menu-option\"\r\n      *ngFor=\"let dropdownOption of dropdown_options\"\r\n      mat-menu-item\r\n      (click)=\"onClickButton(dropdownOption)\"\r\n    >\r\n      {{ dropdownOption.name }}\r\n    </button>\r\n  </mat-menu>\r\n</div>\r\n", styles: [".lf-toolbar-container{display:inline-block;white-space:nowrap}.lf-toolbar-expanded-button-span{display:inline-block;position:relative}.lf-toolbar-button{width:30px;height:28px;margin:0 0 0 4px;padding:4px 5px;line-height:14px;border:1px solid transparent;border-radius:2px;cursor:pointer;vertical-align:middle;text-align:center;background-color:inherit}.lf-toolbar-button:hover:enabled,.lf-toolbar-button:focus{background:none repeat scroll 0 0 #e7e7e7;outline:none}.lf-toolbar-button:disabled{cursor:default;opacity:.33}.lf-toolbar-button-icon{height:18px;width:18px}::ng-deep .mat-mdc-menu-panel.lf-dropdown-menu{list-style:none;background-color:#fff;border:1px solid rgba(0,0,0,.15);border-radius:4px;box-shadow:0 6px 12px #0000002e;min-height:0px}::ng-deep .lf-dropdown-menu-option.mat-mdc-menu-item{position:relative;box-sizing:border-box;display:block;text-align:-webkit-match-parent;color:#202020;padding:3px 24px;margin:2px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.428571429;height:26px;min-height:unset}::ng-deep .mat-mdc-menu-content>.lf-dropdown-menu-option.mat-mdc-menu-item>.mat-mdc-menu-item-text{font-size:14px}.lf-dropdown-menu-option:disabled{color:#999;pointer-events:all;cursor:not-allowed}.lf-dropdown-menu-option:hover:enabled{background-color:#cce9f180}.lf-dropdown-menu-option:focus:enabled{background-color:#cce9f14d}.lf-toolbar-dropdown-button-icon{font-size:18px}::ng-deep .lf-web-client-tooltip{background-color:#000000bf;font-size:12px}\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.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: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LfToolbarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'lf-toolbar-component', template: "<!--Copyright (c) Laserfiche.\r\nLicensed under the MIT License. See LICENSE in the project root for license information.-->\r\n\r\n<div class=\"lf-toolbar-container\">\r\n  <span\r\n    [matTooltip]=\"displayedOption.name\"\r\n    matTooltipClass=\"lf-web-client-tooltip\"\r\n    class=\"lf-toolbar-expanded-button-span\"\r\n    *ngFor=\"let displayedOption of displayed_options\"\r\n  >\r\n    <button class=\"lf-toolbar-button\" [disabled]=\"displayedOption.disabled\" (click)=\"onClickButton(displayedOption)\">\r\n      <img\r\n        *ngFor=\"let icon of getIcons(displayedOption)\"\r\n        [src]=\"icon\"\r\n        [alt]=\"displayedOption.name\"\r\n        class=\"lf-toolbar-button-icon\"\r\n      />\r\n    </button>\r\n  </span>\r\n  <button\r\n    *ngIf=\"dropdown_options && dropdown_options.length > 0\"\r\n    class=\"lf-toolbar-button\"\r\n    [matMenuTriggerFor]=\"compactButtonMenu\"\r\n  >\r\n    <span class=\"material-icons lf-toolbar-dropdown-button-icon\"> more_vert </span>\r\n  </button>\r\n  <mat-menu #compactButtonMenu=\"matMenu\" class=\"lf-dropdown-menu\">\r\n    <button\r\n      [disabled]=\"dropdownOption.disabled\"\r\n      class=\"lf-dropdown-menu-option\"\r\n      *ngFor=\"let dropdownOption of dropdown_options\"\r\n      mat-menu-item\r\n      (click)=\"onClickButton(dropdownOption)\"\r\n    >\r\n      {{ dropdownOption.name }}\r\n    </button>\r\n  </mat-menu>\r\n</div>\r\n", styles: [".lf-toolbar-container{display:inline-block;white-space:nowrap}.lf-toolbar-expanded-button-span{display:inline-block;position:relative}.lf-toolbar-button{width:30px;height:28px;margin:0 0 0 4px;padding:4px 5px;line-height:14px;border:1px solid transparent;border-radius:2px;cursor:pointer;vertical-align:middle;text-align:center;background-color:inherit}.lf-toolbar-button:hover:enabled,.lf-toolbar-button:focus{background:none repeat scroll 0 0 #e7e7e7;outline:none}.lf-toolbar-button:disabled{cursor:default;opacity:.33}.lf-toolbar-button-icon{height:18px;width:18px}::ng-deep .mat-mdc-menu-panel.lf-dropdown-menu{list-style:none;background-color:#fff;border:1px solid rgba(0,0,0,.15);border-radius:4px;box-shadow:0 6px 12px #0000002e;min-height:0px}::ng-deep .lf-dropdown-menu-option.mat-mdc-menu-item{position:relative;box-sizing:border-box;display:block;text-align:-webkit-match-parent;color:#202020;padding:3px 24px;margin:2px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.428571429;height:26px;min-height:unset}::ng-deep .mat-mdc-menu-content>.lf-dropdown-menu-option.mat-mdc-menu-item>.mat-mdc-menu-item-text{font-size:14px}.lf-dropdown-menu-option:disabled{color:#999;pointer-events:all;cursor:not-allowed}.lf-dropdown-menu-option:hover:enabled{background-color:#cce9f180}.lf-dropdown-menu-option:focus:enabled{background-color:#cce9f14d}.lf-toolbar-dropdown-button-icon{font-size:18px}::ng-deep .lf-web-client-tooltip{background-color:#000000bf;font-size:12px}\n"] }]
        }], ctorParameters: () => [], propDecorators: { displayed_options: [{
                type: Input
            }], dropdown_options: [{
                type: Input
            }], optionSelected: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 