import { isTemplateRef } from '@alauda/ui';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output, TemplateRef, } from '@angular/core';
import { ContextChartService } from '../../chart.service';
import * as i0 from "@angular/core";
import * as i1 from "../../chart.service";
function ChartLegendComponent_div_0_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 3);
    i0.ɵɵelementContainer(1, 4);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.leftOperation);
} }
function ChartLegendComponent_div_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵelementContainer(1, 4);
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    i0.ɵɵnextContext(2);
    const _r3 = i0.ɵɵreference(4);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngTemplateOutlet", _r3);
} }
const _c0 = function (a0) { return { context: a0 }; };
function ChartLegendComponent_div_1_ng_template_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵelementContainer(1, 9);
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    const ctx_r8 = i0.ɵɵnextContext(3);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngTemplateOutlet", ctx_r8.template)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, ctx_r8.legendEntries));
} }
function ChartLegendComponent_div_1_ng_template_2_ng_template_1_acl_dropdown_legend_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "acl-dropdown-legend", 12);
    i0.ɵɵpipe(1, "async");
} if (rf & 2) {
    const ctx_r11 = i0.ɵɵnextContext(4);
    const _r3 = i0.ɵɵreference(4);
    i0.ɵɵproperty("data", ctx_r11.legendEntries)("noData", i0.ɵɵpipeBind1(1, 4, ctx_r11.context.noData$))("legendTemplate", _r3)("isCard", ctx_r11.mode === "card");
} }
function ChartLegendComponent_div_1_ng_template_2_ng_template_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0, 10);
    i0.ɵɵtemplate(1, ChartLegendComponent_div_1_ng_template_2_ng_template_1_acl_dropdown_legend_1_Template, 2, 6, "acl-dropdown-legend", 11);
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    const ctx_r10 = i0.ɵɵnextContext(3);
    i0.ɵɵproperty("ngSwitch", ctx_r10.template);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngSwitchCase", "dropdown");
} }
function ChartLegendComponent_div_1_ng_template_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵtemplate(0, ChartLegendComponent_div_1_ng_template_2_ng_container_0_Template, 2, 4, "ng-container", 6);
    i0.ɵɵtemplate(1, ChartLegendComponent_div_1_ng_template_2_ng_template_1_Template, 2, 2, "ng-template", null, 8, i0.ɵɵtemplateRefExtractor);
} if (rf & 2) {
    const _r9 = i0.ɵɵreference(2);
    const ctx_r7 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("ngIf", ctx_r7.isTemplateRef(ctx_r7.template))("ngIfElse", _r9);
} }
function ChartLegendComponent_div_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 5);
    i0.ɵɵtemplate(1, ChartLegendComponent_div_1_ng_container_1_Template, 2, 1, "ng-container", 6);
    i0.ɵɵtemplate(2, ChartLegendComponent_div_1_ng_template_2_Template, 3, 2, "ng-template", null, 7, i0.ɵɵtemplateRefExtractor);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const _r6 = i0.ɵɵreference(3);
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", !ctx_r1.template)("ngIfElse", _r6);
} }
function ChartLegendComponent_div_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 3);
    i0.ɵɵelementContainer(1, 4);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.rightOperation);
} }
function ChartLegendComponent_ng_template_3_li_1_Template(rf, ctx) { if (rf & 1) {
    const _r15 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "li", 16)(1, "aui-checkbox", 17);
    i0.ɵɵlistener("ngModelChange", function ChartLegendComponent_ng_template_3_li_1_Template_aui_checkbox_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r14 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r14.allSelected = $event); })("ngModelChange", function ChartLegendComponent_ng_template_3_li_1_Template_aui_checkbox_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r16 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r16.allSelect($event)); });
    i0.ɵɵtext(2);
    i0.ɵɵpipe(3, "translate");
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r12 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngModel", ctx_r12.allSelected);
    i0.ɵɵadvance(1);
    i0.ɵɵtextInterpolate1(" ", ctx_r12.selectAllName || i0.ɵɵpipeBind1(3, 2, "select_all"), " ");
} }
const _c1 = function (a0) { return [a0, "label-symbol"]; };
const _c2 = function () { return {}; };
function ChartLegendComponent_ng_template_3_li_3_Template(rf, ctx) { if (rf & 1) {
    const _r19 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "li", 18);
    i0.ɵɵlistener("click", function ChartLegendComponent_ng_template_3_li_3_Template_li_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r19); const legend_r17 = restoredCtx.$implicit; const ctx_r18 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r18.selected(legend_r17)); })("mouseenter", function ChartLegendComponent_ng_template_3_li_3_Template_li_mouseenter_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r19); const legend_r17 = restoredCtx.$implicit; const ctx_r20 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r20.mouseenter(legend_r17)); })("mouseleave", function ChartLegendComponent_ng_template_3_li_3_Template_li_mouseleave_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r19); const legend_r17 = restoredCtx.$implicit; const ctx_r21 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r21.mouseleave(legend_r17)); });
    i0.ɵɵpipe(1, "async");
    i0.ɵɵpipe(2, "async");
    i0.ɵɵelement(3, "span", 19);
    i0.ɵɵelementStart(4, "span", 20);
    i0.ɵɵtext(5);
    i0.ɵɵpipe(6, "translate");
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const legend_r17 = ctx.$implicit;
    const ctx_r13 = i0.ɵɵnextContext(2);
    i0.ɵɵclassProp("disable", !legend_r17.activate || i0.ɵɵpipeBind1(1, 10, ctx_r13.context.noData$))("forbid", i0.ɵɵpipeBind1(2, 12, ctx_r13.context.noData$))("hover", legend_r17.activate && legend_r17.hover);
    i0.ɵɵadvance(3);
    i0.ɵɵstyleProp("background", legend_r17.color);
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(18, _c1, ctx_r13.symbolName));
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(ctx_r13.translation ? i0.ɵɵpipeBind3(6, 14, legend_r17.name, i0.ɵɵpureFunction0(20, _c2), true) : legend_r17.name);
} }
function ChartLegendComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "ul", 13);
    i0.ɵɵtemplate(1, ChartLegendComponent_ng_template_3_li_1_Template, 4, 4, "li", 14);
    i0.ɵɵpipe(2, "async");
    i0.ɵɵtemplate(3, ChartLegendComponent_ng_template_3_li_3_Template, 7, 21, "li", 15);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r4 = i0.ɵɵnextContext();
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", !i0.ɵɵpipeBind1(2, 2, ctx_r4.context.noData$) && ctx_r4.selectAllOperation && ctx_r4.template === "dropdown");
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngForOf", ctx_r4.legendEntries);
} }
export class LegendPayload {
}
export class ChartLegendComponent {
    constructor(context, cdr) {
        this.context = context;
        this.cdr = cdr;
        this.symbol = 'line';
        this.mode = 'default';
        this.translation = true;
        this.selectAllOperation = false;
        this.labelClick = new EventEmitter();
        this.labelActivate = new EventEmitter();
        this.labelDeactivate = new EventEmitter();
        this.isTemplateRef = isTemplateRef;
        this.allSelected = true;
    }
    get symbolName() {
        return `symbol-${this.symbol}`;
    }
    ngOnInit() {
        this.context.seriesData$.subscribe(() => {
            this.legendEntries = !this.context.barOptions.isBand
                ? this.context.noData
                    ? []
                    : this.context.chartData.map(d => ({
                        name: d.name,
                        color: d.color,
                        activate: !this.context.disabledLegend.has(d.name),
                        hover: false,
                    }))
                : this.context.chartData
                    .flatMap(item => item.values)
                    .reduce((pre, cur) => [
                    ...pre,
                    ...(pre.some(d => d.name === cur.x)
                        ? []
                        : [
                            {
                                name: cur.x,
                                color: cur.color ||
                                    this.context.getChartDefaultColor(pre.length),
                                activate: !this.context.disabledLegend.has(cur.x),
                                hover: false,
                            },
                        ]),
                ], []);
            this.cdr.detectChanges();
        });
    }
    selected(legend) {
        if (this.context.noData) {
            return;
        }
        const legendItem = this.legendEntries.find(item => item.name === legend.name);
        legendItem.activate = !legend.activate;
        const payload = {
            legendItem,
            legends: this.legendEntries,
        };
        this.labelClick.next(payload);
        if (legend.activate) {
            this.labelActivate.next(legend);
            this.context.selectedLegend(payload);
        }
        else {
            this.labelDeactivate.next(legend);
            legend.hover = false;
            this.context.deactivateLegend(payload);
        }
        this.cdr.detectChanges();
    }
    mouseenter(legend) {
        if (legend.activate && !this.context.noData) {
            legend.hover = true;
            this.context.legendActivate$$.next(legend.name);
        }
        this.cdr.detectChanges();
    }
    mouseleave(legend) {
        this.context.legendActivate$$.next('');
        legend.hover = false;
        this.cdr.detectChanges();
    }
    allSelect(select) {
        this.legendEntries = this.legendEntries.map(d => ({
            ...d,
            activate: select,
        }));
        select
            ? this.context.selectedAllLegend()
            : this.context.unselectAllLegend(this.legendEntries.map(d => d.name));
        this.labelClick.next({
            legendItem: null,
            legends: this.legendEntries,
        });
    }
}
ChartLegendComponent.ɵfac = function ChartLegendComponent_Factory(t) { return new (t || ChartLegendComponent)(i0.ɵɵdirectiveInject(i1.ContextChartService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
ChartLegendComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ChartLegendComponent, selectors: [["acl-legend"]], inputs: { symbol: "symbol", template: "template", mode: "mode", translation: "translation", leftOperation: "leftOperation", rightOperation: "rightOperation", hideLegend: "hideLegend", selectAllOperation: "selectAllOperation", selectAllName: "selectAllName" }, outputs: { labelClick: "labelClick", labelActivate: "labelActivate", labelDeactivate: "labelDeactivate" }, decls: 5, vars: 3, consts: [["class", "operation", 4, "ngIf"], ["class", "legend-wrap", 4, "ngIf"], ["legendTemplate", ""], [1, "operation"], [3, "ngTemplateOutlet"], [1, "legend-wrap"], [4, "ngIf", "ngIfElse"], ["custom", ""], ["builtinTemplate", ""], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "ngSwitch"], ["class", "legend-vertical", 3, "data", "noData", "legendTemplate", "isCard", 4, "ngSwitchCase"], [1, "legend-vertical", 3, "data", "noData", "legendTemplate", "isCard"], [1, "legend-labels"], ["class", "select-all", 4, "ngIf"], ["class", "legend-label", 3, "disable", "forbid", "hover", "click", "mouseenter", "mouseleave", 4, "ngFor", "ngForOf"], [1, "select-all"], [3, "ngModel", "ngModelChange"], [1, "legend-label", 3, "click", "mouseenter", "mouseleave"], [3, "ngClass"], [1, "label-name"]], template: function ChartLegendComponent_Template(rf, ctx) { if (rf & 1) {
        i0.ɵɵtemplate(0, ChartLegendComponent_div_0_Template, 2, 1, "div", 0);
        i0.ɵɵtemplate(1, ChartLegendComponent_div_1_Template, 4, 2, "div", 1);
        i0.ɵɵtemplate(2, ChartLegendComponent_div_2_Template, 2, 1, "div", 0);
        i0.ɵɵtemplate(3, ChartLegendComponent_ng_template_3_Template, 4, 4, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
    } if (rf & 2) {
        i0.ɵɵproperty("ngIf", ctx.isTemplateRef(ctx.leftOperation));
        i0.ɵɵadvance(1);
        i0.ɵɵproperty("ngIf", !ctx.hideLegend);
        i0.ɵɵadvance(1);
        i0.ɵɵproperty("ngIf", ctx.isTemplateRef(ctx.rightOperation));
    } }, styles: [".legend-wrap[_ngcontent-%COMP%]{display:inline-block}.legend-wrap[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%], .legend-wrap[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{padding:0;margin:0;list-style:none}.legend-wrap[_ngcontent-%COMP%]   .legend-labels[_ngcontent-%COMP%]{display:flex}.legend-wrap[_ngcontent-%COMP%]   .legend-label[_ngcontent-%COMP%]{display:flex;align-items:center;cursor:pointer;justify-content:center}.legend-wrap[_ngcontent-%COMP%]   .legend-label[_ngcontent-%COMP%]:not(:last-child){margin-right:20px}.legend-wrap[_ngcontent-%COMP%]   .forbid[_ngcontent-%COMP%]{cursor:no-drop}.legend-wrap[_ngcontent-%COMP%]   .label-name[_ngcontent-%COMP%]{font-size:12px;color:rgb(var(--aui-color-secondary-text))}.legend-wrap[_ngcontent-%COMP%]   .label-symbol[_ngcontent-%COMP%]{margin-right:4px}.disable[_ngcontent-%COMP%]   .label-symbol[_ngcontent-%COMP%]{background:rgb(var(--aui-color-n-6))!important}.disable[_ngcontent-%COMP%]   .label-name[_ngcontent-%COMP%]{color:rgb(var(--aui-color-n-6))}.hover[_ngcontent-%COMP%]   .label-name[_ngcontent-%COMP%]{color:rgb(var(--aui-color-n-1))}.symbol-square[_ngcontent-%COMP%]{width:12px;height:12px;display:inline-block}.symbol-line[_ngcontent-%COMP%]{width:12px;height:2px;display:inline-block}.symbol-circle[_ngcontent-%COMP%]{width:12px;height:12px;border-radius:50%;display:inline-block}.operation[_ngcontent-%COMP%]{display:flex;justify-content:center}.select-all[_ngcontent-%COMP%]     .aui-checkbox{font-size:12px;line-height:16px;margin-bottom:8px}"], changeDetection: 0 });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ChartLegendComponent, [{
        type: Component,
        args: [{ selector: 'acl-legend', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"operation\"\n  *ngIf=\"isTemplateRef(leftOperation)\"\n>\n  <ng-container [ngTemplateOutlet]=\"leftOperation\"></ng-container>\n</div>\n\n<div\n  class=\"legend-wrap\"\n  *ngIf=\"!hideLegend\"\n>\n  <ng-container *ngIf=\"!template; else custom\">\n    <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\n  </ng-container>\n  <ng-template #custom>\n    <ng-container *ngIf=\"isTemplateRef(template); else builtinTemplate\">\n      <ng-container\n        [ngTemplateOutlet]=\"$any(template)\"\n        [ngTemplateOutletContext]=\"{ context: legendEntries }\"\n      ></ng-container>\n    </ng-container>\n    <ng-template #builtinTemplate>\n      <ng-container [ngSwitch]=\"template\">\n        <acl-dropdown-legend\n          class=\"legend-vertical\"\n          *ngSwitchCase=\"'dropdown'\"\n          [data]=\"legendEntries\"\n          [noData]=\"context.noData$ | async\"\n          [legendTemplate]=\"legendTemplate\"\n          [isCard]=\"mode === 'card'\"\n        >\n        </acl-dropdown-legend>\n      </ng-container>\n    </ng-template>\n  </ng-template>\n</div>\n\n<div\n  class=\"operation\"\n  *ngIf=\"isTemplateRef(rightOperation)\"\n>\n  <ng-container [ngTemplateOutlet]=\"rightOperation\"></ng-container>\n</div>\n\n<ng-template #legendTemplate>\n  <ul class=\"legend-labels\">\n    <li\n      class=\"select-all\"\n      *ngIf=\"\n        !(context.noData$ | async) &&\n        selectAllOperation &&\n        template === 'dropdown'\n      \"\n    >\n      <aui-checkbox\n        [(ngModel)]=\"allSelected\"\n        (ngModelChange)=\"allSelect($event)\"\n      >\n        {{ selectAllName || ('select_all' | translate) }}\n      </aui-checkbox>\n    </li>\n    <li\n      class=\"legend-label\"\n      [class.disable]=\"!legend.activate || (context.noData$ | async)\"\n      [class.forbid]=\"context.noData$ | async\"\n      *ngFor=\"let legend of legendEntries\"\n      (click)=\"selected(legend)\"\n      [class.hover]=\"legend.activate && legend.hover\"\n      (mouseenter)=\"mouseenter(legend)\"\n      (mouseleave)=\"mouseleave(legend)\"\n    >\n      <span\n        [ngClass]=\"[symbolName, 'label-symbol']\"\n        [style.background]=\"legend.color\"\n      >\n      </span>\n      <span class=\"label-name\">{{\n        translation ? (legend.name | translate: {}:true) : legend.name\n      }}</span>\n    </li>\n  </ul>\n</ng-template>\n", styles: [".legend-wrap{display:inline-block}.legend-wrap ul,.legend-wrap li{padding:0;margin:0;list-style:none}.legend-wrap .legend-labels{display:flex}.legend-wrap .legend-label{display:flex;align-items:center;cursor:pointer;justify-content:center}.legend-wrap .legend-label:not(:last-child){margin-right:20px}.legend-wrap .forbid{cursor:no-drop}.legend-wrap .label-name{font-size:12px;color:rgb(var(--aui-color-secondary-text))}.legend-wrap .label-symbol{margin-right:4px}.disable .label-symbol{background:rgb(var(--aui-color-n-6))!important}.disable .label-name{color:rgb(var(--aui-color-n-6))}.hover .label-name{color:rgb(var(--aui-color-n-1))}.symbol-square{width:12px;height:12px;display:inline-block}.symbol-line{width:12px;height:2px;display:inline-block}.symbol-circle{width:12px;height:12px;border-radius:50%;display:inline-block}.operation{display:flex;justify-content:center}.select-all ::ng-deep .aui-checkbox{font-size:12px;line-height:16px;margin-bottom:8px}\n"] }]
    }], function () { return [{ type: i1.ContextChartService }, { type: i0.ChangeDetectorRef }]; }, { symbol: [{
            type: Input
        }], template: [{
            type: Input
        }], mode: [{
            type: Input
        }], translation: [{
            type: Input
        }], leftOperation: [{
            type: Input
        }], rightOperation: [{
            type: Input
        }], hideLegend: [{
            type: Input
        }], selectAllOperation: [{
            type: Input
        }], selectAllName: [{
            type: Input
        }], labelClick: [{
            type: Output
        }], labelActivate: [{
            type: Output
        }], labelDeactivate: [{
            type: Output
        }] }); })();
//# sourceMappingURL=data:application/json;base64, 