import { CommonModule } from '@angular/common';
import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';
import { OcapCoreModule } from '@metad/ocap-angular/core';
import { TranslateModule } from '@ngx-translate/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@ngx-translate/core";
import * as i3 from "@angular/material/button";
import * as i4 from "@angular/material/icon";
import * as i5 from "@angular/material/tooltip";
import * as i6 from "@metad/ocap-angular/core";
export class NgmBreadcrumbBarComponent {
    constructor() {
        this.steps = [];
        this.disabled = false;
        this.selectedChange = new EventEmitter();
        this.close = new EventEmitter();
    }
    ngOnChanges({ steps }) {
        // 使用最后一个激活元素作为激活元素
        this.activeLink = steps?.currentValue
            ?.slice()
            .reverse()
            .find((x) => x.active);
    }
    onClick(step) {
        let i = this.steps?.indexOf(step);
        // 如果点击了最后一个选中元素则取消选中此元素
        if (step.active && !this.steps[i + 1]?.active) {
            i--;
        }
        this.steps.forEach((value, index) => (value.active = index <= i));
        this.selectedChange.emit(this.steps.filter((value) => value.active));
    }
    onClose() {
        this.close.emit();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmBreadcrumbBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NgmBreadcrumbBarComponent, isStandalone: true, selector: "ngm-breadcrumb-bar", inputs: { steps: "steps", disabled: "disabled" }, outputs: { selectedChange: "selectedChange", close: "close" }, host: { properties: { "class.disabled": "this.disabled" }, classAttribute: "ngm-breadcrumb-bar" }, usesOnChanges: true, ngImport: i0, template: "<nav mat-tab-nav-bar disableRipple class=\"breadcrumb\" headerPosition=\"above\" mat-stretch-tabs=\"false\" mat-align-tabs=\"start\">\n  @for (step of steps; track step; let i = $index; let first = $first; let last = $last) {\n    <div mat-tab-link class=\"breadcrumb__step\"\n      [ngClass]=\"{\n        'breadcrumb__step--active': step.active,\n        'first': first,\n        'last': last\n      }\"\n      (click)=\"activeLink = step;onClick(step)\"\n    >\n      {{step.label}}\n    </div>\n  }\n</nav>\n\n<button mat-icon-button displayDensity=\"compact\" [matTooltip]=\"'Ngm.Common.ClearDrillDown' | translate: {Default: 'Clear Drill Down'}\"\n  matTooltipPosition=\"above\"\n  (click)=\"onClose()\">\n  <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\n</button>\n", styles: [":host{display:flex;overflow-x:hidden;flex-direction:row;justify-content:space-between;overflow:hidden}.breadcrumb{overflow:hidden}.breadcrumb__step{flex-shrink:1;text-overflow:ellipsis;white-space:nowrap}.breadcrumb__step.first{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.breadcrumb__step.last{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.breadcrumb__step.breadcrumb__step--active:last-child{flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: OcapCoreModule }, { kind: "directive", type: i6.DensityDirective, selector: "[displayDensity]", inputs: ["displayDensity"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmBreadcrumbBarComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, selector: 'ngm-breadcrumb-bar', host: { class: 'ngm-breadcrumb-bar' }, imports: [
                        CommonModule,
                        TranslateModule,
                        MatButtonModule,
                        MatIconModule,
                        MatTooltipModule,
                        OcapCoreModule
                    ], template: "<nav mat-tab-nav-bar disableRipple class=\"breadcrumb\" headerPosition=\"above\" mat-stretch-tabs=\"false\" mat-align-tabs=\"start\">\n  @for (step of steps; track step; let i = $index; let first = $first; let last = $last) {\n    <div mat-tab-link class=\"breadcrumb__step\"\n      [ngClass]=\"{\n        'breadcrumb__step--active': step.active,\n        'first': first,\n        'last': last\n      }\"\n      (click)=\"activeLink = step;onClick(step)\"\n    >\n      {{step.label}}\n    </div>\n  }\n</nav>\n\n<button mat-icon-button displayDensity=\"compact\" [matTooltip]=\"'Ngm.Common.ClearDrillDown' | translate: {Default: 'Clear Drill Down'}\"\n  matTooltipPosition=\"above\"\n  (click)=\"onClose()\">\n  <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\n</button>\n", styles: [":host{display:flex;overflow-x:hidden;flex-direction:row;justify-content:space-between;overflow:hidden}.breadcrumb{overflow:hidden}.breadcrumb__step{flex-shrink:1;text-overflow:ellipsis;white-space:nowrap}.breadcrumb__step.first{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.breadcrumb__step.last{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.breadcrumb__step.breadcrumb__step--active:last-child{flex-shrink:0}\n"] }]
        }], propDecorators: { steps: [{
                type: Input
            }], disabled: [{
                type: HostBinding,
                args: ['class.disabled']
            }, {
                type: Input
            }], selectedChange: [{
                type: Output
            }], close: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 