// Copyright (c) Laserfiche.
// Licensed under the MIT License. See LICENSE in the project root for license information.
import { Component, EventEmitter, Input, Output, ViewChild } 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/button-toggle";
export class LfBreadcrumbsComponent {
    /** @internal */
    constructor() {
        this.breadcrumbs = [];
        this.breadcrumbSelected = new EventEmitter();
        this.breadcrumbClicked = new EventEmitter();
    }
    /** @internal */
    onBreadcrumbSelected(node) {
        this.breadcrumbSelected.emit(node);
        let crumbId = -1;
        for (let idx = 0; idx < this.breadcrumbs.length; idx++) {
            if (this.breadcrumbs[idx].id === node.id) {
                crumbId = idx;
                break;
            }
        }
        if (crumbId === -1) {
            return;
        }
        const newBreadcrumbs = this.breadcrumbs.slice(crumbId);
        this.breadcrumbClicked.emit({ breadcrumbs: newBreadcrumbs, selected: node });
    }
    /** @internal */
    onDropdownMenuSelected() {
        setTimeout(() => this.dropdownMenuButton.nativeElement.focus());
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LfBreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: LfBreadcrumbsComponent, selector: "lf-breadcrumbs-component", inputs: { breadcrumbs: "breadcrumbs" }, outputs: { breadcrumbSelected: "breadcrumbSelected", breadcrumbClicked: "breadcrumbClicked" }, viewQueries: [{ propertyName: "dropdownMenuButton", first: true, predicate: ["dropdownMenuButton"], descendants: true }], 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-breadcrumbs-container\">\r\n  <div *ngIf=\"breadcrumbs?.length > 1\" class=\"breadcrumbs-dropdown-container\">\r\n      <mat-button-toggle-group class=\"breadcrumb-split-button-group\" hideSingleSelectionIndicator>\r\n          <mat-button-toggle class=\"breadcrumb-clickable-parent lf-button primary-button breadcrumb-split-button\"\r\n              [ngClass]=\"{'single-selectable': breadcrumbs.length===2}\"\r\n              (click)=\"onBreadcrumbSelected(breadcrumbs[1])\"\r\n              (keydown.enter)=\"onBreadcrumbSelected(breadcrumbs[1])\"\r\n              (keydown.space)=\"onBreadcrumbSelected(breadcrumbs[1])\"\r\n              [title]=\"breadcrumbs[1]?.name\">\r\n              {{breadcrumbs[1]?.name}}\r\n          </mat-button-toggle>\r\n          <mat-button-toggle class=\"breadcrumb-select breadcrumb-split-button\" *ngIf=\"breadcrumbs?.length > 2\"\r\n              value=\"breadcrumbDropdownMenu\" (change)=\"onDropdownMenuSelected()\" tabindex=\"-1\">\r\n              <button #dropdownMenuButton mat-icon-button [matMenuTriggerFor]=\"breadcrumbDropdownMenu\"\r\n                (click)=\"$event.stopPropagation()\" tabindex=\"0\">\r\n                <span class=\"material-icons breadcrumb-split-button-icon\">\r\n                  arrow_drop_down\r\n                </span>\r\n              </button>\r\n          </mat-button-toggle>\r\n      </mat-button-toggle-group>\r\n\r\n      <mat-menu #breadcrumbDropdownMenu=\"matMenu\" xPosition=\"before\">\r\n          <button class=\"lf-menu-item folder-dropdown\" mat-menu-item *ngFor=\"let breadcrumbOption of breadcrumbs.slice(1)\"\r\n              title=\"{{breadcrumbOption?.name}}\" (click)=\"onBreadcrumbSelected(breadcrumbOption)\">\r\n              {{breadcrumbOption?.name}}</button>\r\n      </mat-menu>\r\n  </div>\r\n  <span *ngIf=\"breadcrumbs?.length > 1\" class=\"material-icons breadcrumb-arrow_right\" id=\"arrow-right\">\r\n      keyboard_arrow_right\r\n    </span>\r\n  <span *ngIf=\"breadcrumbs?.length > 0\" class=\"breadcrumb-parent\" title=\"{{breadcrumbs[0]?.name}}\">\r\n      {{breadcrumbs[0]?.name}}\r\n  </span>\r\n</div>\r\n", styles: [".lf-breadcrumbs-container{display:flex;height:34px}.lf-breadcrumbs-container .mat-button-toggle-button,.lf-breadcrumbs-container .mat-button-toggle,.lf-breadcrumbs-container{font-family:Open Sans}.breadcrumb-parent{padding-left:10px;color:var(--lf-label-text-color, #605e5c);align-self:center;cursor:default;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px}.breadcrumb-arrow_right{cursor:default;align-self:center;font-size:12px;font-weight:bolder}::ng-deep .breadcrumb-split-button.breadcrumb-select.mat-button-toggle-appearance-standard .mat-button-toggle-label-content{color:var(--lf-label-text-color, #605e5c)}::ng-deep .breadcrumb-split-button.breadcrumb-clickable-parent.mat-button-toggle-appearance-standard .mat-button-toggle-label-content{color:var(--lf-link-color, #605e5c)}::ng-deep .breadcrumb-split-button.mat-button-toggle-appearance-standard .mat-button-toggle-label-content{font-weight:600;font-size:14px;line-height:25px;padding:0 0 0 10px;text-align:left}::ng-deep .breadcrumb-split-button.mat-button-toggle-appearance-standard .mat-button-toggle-label-content:hover{color:#000}::ng-deep .breadcrumb-clickable-parent.breadcrumb-split-button.mat-button-toggle-appearance-standard .mat-button-toggle-label-content{min-width:75px;max-width:125px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding:0 0 0 10px;height:25px}::ng-deep .single-selectable.breadcrumb-clickable-parent.breadcrumb-split-button.mat-button-toggle-appearance-standard .mat-button-toggle-label-content{min-width:90px;max-width:125px}::ng-deep .breadcrumb-split-button-group.mat-button-toggle-group-appearance-standard{border:none;border-radius:2px;padding-top:5px}::ng-deep .breadcrumb-split-button .breadcrumb-select{color:var(--lf-label-text-color, #605e5c)}::ng-deep .breadcrumb-split-button.mat-button-toggle-appearance-standard.breadcrumb-select .mat-button-toggle-label-content{padding-left:5px;padding-right:5px;height:25px}.breadcrumb-split-button-icon{padding-bottom:5px}::ng-deep .breadcrumb-split-button .breadcrumb-select:hover{padding-left:0;color:#000}::ng-deep .breadcrumb-split-button.mat-button-toggle-checked{background-color:transparent!important}::ng-deep .breadcrumb-split-button.mat-button-toggle-appearance-standard .mat-button-toggle-focus-overlay,::ng-deep .breadcrumb-split-button.mat-button-toggle-appearance-standard,::ng-deep .breadcrumb-split-button .mat-button-toggle-button,::ng-deep .breadcrumb-split-button .mat-button-toggle-button button{height:25px;width:100%}::ng-deep .breadcrumb-split-button .mat-button-toggle-button button{border:unset;background-color:unset;padding:0}::ng-deep .breadcrumb-split-button.mat-button-toggle-appearance-standard{height:25px}::ng-deep .mat-mdc-menu-item.lf-menu-item{font-size:14px}::ng-deep .mat-mdc-menu-content>.mat-mdc-menu-item.folder-dropdown>.mat-mdc-menu-item-text{font-size:inherit;white-space:nowrap}::ng-deep .mat-button-toggle-button button{outline:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LfBreadcrumbsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'lf-breadcrumbs-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-breadcrumbs-container\">\r\n  <div *ngIf=\"breadcrumbs?.length > 1\" class=\"breadcrumbs-dropdown-container\">\r\n      <mat-button-toggle-group class=\"breadcrumb-split-button-group\" hideSingleSelectionIndicator>\r\n          <mat-button-toggle class=\"breadcrumb-clickable-parent lf-button primary-button breadcrumb-split-button\"\r\n              [ngClass]=\"{'single-selectable': breadcrumbs.length===2}\"\r\n              (click)=\"onBreadcrumbSelected(breadcrumbs[1])\"\r\n              (keydown.enter)=\"onBreadcrumbSelected(breadcrumbs[1])\"\r\n              (keydown.space)=\"onBreadcrumbSelected(breadcrumbs[1])\"\r\n              [title]=\"breadcrumbs[1]?.name\">\r\n              {{breadcrumbs[1]?.name}}\r\n          </mat-button-toggle>\r\n          <mat-button-toggle class=\"breadcrumb-select breadcrumb-split-button\" *ngIf=\"breadcrumbs?.length > 2\"\r\n              value=\"breadcrumbDropdownMenu\" (change)=\"onDropdownMenuSelected()\" tabindex=\"-1\">\r\n              <button #dropdownMenuButton mat-icon-button [matMenuTriggerFor]=\"breadcrumbDropdownMenu\"\r\n                (click)=\"$event.stopPropagation()\" tabindex=\"0\">\r\n                <span class=\"material-icons breadcrumb-split-button-icon\">\r\n                  arrow_drop_down\r\n                </span>\r\n              </button>\r\n          </mat-button-toggle>\r\n      </mat-button-toggle-group>\r\n\r\n      <mat-menu #breadcrumbDropdownMenu=\"matMenu\" xPosition=\"before\">\r\n          <button class=\"lf-menu-item folder-dropdown\" mat-menu-item *ngFor=\"let breadcrumbOption of breadcrumbs.slice(1)\"\r\n              title=\"{{breadcrumbOption?.name}}\" (click)=\"onBreadcrumbSelected(breadcrumbOption)\">\r\n              {{breadcrumbOption?.name}}</button>\r\n      </mat-menu>\r\n  </div>\r\n  <span *ngIf=\"breadcrumbs?.length > 1\" class=\"material-icons breadcrumb-arrow_right\" id=\"arrow-right\">\r\n      keyboard_arrow_right\r\n    </span>\r\n  <span *ngIf=\"breadcrumbs?.length > 0\" class=\"breadcrumb-parent\" title=\"{{breadcrumbs[0]?.name}}\">\r\n      {{breadcrumbs[0]?.name}}\r\n  </span>\r\n</div>\r\n", styles: [".lf-breadcrumbs-container{display:flex;height:34px}.lf-breadcrumbs-container .mat-button-toggle-button,.lf-breadcrumbs-container .mat-button-toggle,.lf-breadcrumbs-container{font-family:Open Sans}.breadcrumb-parent{padding-left:10px;color:var(--lf-label-text-color, #605e5c);align-self:center;cursor:default;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px}.breadcrumb-arrow_right{cursor:default;align-self:center;font-size:12px;font-weight:bolder}::ng-deep .breadcrumb-split-button.breadcrumb-select.mat-button-toggle-appearance-standard .mat-button-toggle-label-content{color:var(--lf-label-text-color, #605e5c)}::ng-deep .breadcrumb-split-button.breadcrumb-clickable-parent.mat-button-toggle-appearance-standard .mat-button-toggle-label-content{color:var(--lf-link-color, #605e5c)}::ng-deep .breadcrumb-split-button.mat-button-toggle-appearance-standard .mat-button-toggle-label-content{font-weight:600;font-size:14px;line-height:25px;padding:0 0 0 10px;text-align:left}::ng-deep .breadcrumb-split-button.mat-button-toggle-appearance-standard .mat-button-toggle-label-content:hover{color:#000}::ng-deep .breadcrumb-clickable-parent.breadcrumb-split-button.mat-button-toggle-appearance-standard .mat-button-toggle-label-content{min-width:75px;max-width:125px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding:0 0 0 10px;height:25px}::ng-deep .single-selectable.breadcrumb-clickable-parent.breadcrumb-split-button.mat-button-toggle-appearance-standard .mat-button-toggle-label-content{min-width:90px;max-width:125px}::ng-deep .breadcrumb-split-button-group.mat-button-toggle-group-appearance-standard{border:none;border-radius:2px;padding-top:5px}::ng-deep .breadcrumb-split-button .breadcrumb-select{color:var(--lf-label-text-color, #605e5c)}::ng-deep .breadcrumb-split-button.mat-button-toggle-appearance-standard.breadcrumb-select .mat-button-toggle-label-content{padding-left:5px;padding-right:5px;height:25px}.breadcrumb-split-button-icon{padding-bottom:5px}::ng-deep .breadcrumb-split-button .breadcrumb-select:hover{padding-left:0;color:#000}::ng-deep .breadcrumb-split-button.mat-button-toggle-checked{background-color:transparent!important}::ng-deep .breadcrumb-split-button.mat-button-toggle-appearance-standard .mat-button-toggle-focus-overlay,::ng-deep .breadcrumb-split-button.mat-button-toggle-appearance-standard,::ng-deep .breadcrumb-split-button .mat-button-toggle-button,::ng-deep .breadcrumb-split-button .mat-button-toggle-button button{height:25px;width:100%}::ng-deep .breadcrumb-split-button .mat-button-toggle-button button{border:unset;background-color:unset;padding:0}::ng-deep .breadcrumb-split-button.mat-button-toggle-appearance-standard{height:25px}::ng-deep .mat-mdc-menu-item.lf-menu-item{font-size:14px}::ng-deep .mat-mdc-menu-content>.mat-mdc-menu-item.folder-dropdown>.mat-mdc-menu-item-text{font-size:inherit;white-space:nowrap}::ng-deep .mat-button-toggle-button button{outline:none}\n"] }]
        }], ctorParameters: () => [], propDecorators: { breadcrumbs: [{
                type: Input
            }], breadcrumbSelected: [{
                type: Output
            }], breadcrumbClicked: [{
                type: Output
            }], dropdownMenuButton: [{
                type: ViewChild,
                args: ['dropdownMenuButton']
            }] } });
//# sourceMappingURL=data:application/json;base64, 