import { isTemplateRef } from '@alauda/ui';
import { ChangeDetectionStrategy, Component, Input, TemplateRef, } from '@angular/core';
import { TranslateService } from '../../translate/translate.service';
import * as i0 from "@angular/core";
import * as i1 from "../../translate/translate.service";
function FoldableItemInTableComponent_div_0_li_3_ng_container_2_ng_container_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainer(0);
} }
const _c0 = function (a0) { return { $implicit: a0 }; };
function FoldableItemInTableComponent_div_0_li_3_ng_container_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵtemplate(1, FoldableItemInTableComponent_div_0_li_3_ng_container_2_ng_container_1_Template, 1, 0, "ng-container", 9);
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    const item_r5 = i0.ɵɵnextContext().$implicit;
    const ctx_r6 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngTemplateOutlet", ctx_r6.itemTpl)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, item_r5));
} }
function FoldableItemInTableComponent_div_0_li_3_ng_template_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵtext(0);
} if (rf & 2) {
    const item_r5 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵtextInterpolate(item_r5);
} }
function FoldableItemInTableComponent_div_0_li_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "li", 6);
    i0.ɵɵpipe(1, "pure");
    i0.ɵɵtemplate(2, FoldableItemInTableComponent_div_0_li_3_ng_container_2_Template, 2, 4, "ng-container", 7);
    i0.ɵɵtemplate(3, FoldableItemInTableComponent_div_0_li_3_ng_template_3_Template, 1, 1, "ng-template", null, 8, i0.ɵɵtemplateRefExtractor);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const item_r5 = ctx.$implicit;
    const _r7 = i0.ɵɵreference(4);
    const ctx_r3 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("title", i0.ɵɵpipeBind3(1, 3, item_r5, ctx_r3.itemTitle, ctx_r3.translate.locale));
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngIf", ctx_r3.isTemplateRef(ctx_r3.itemTpl))("ngIfElse", _r7);
} }
const _c1 = function (a0) { return { folded: a0 }; };
function FoldableItemInTableComponent_div_0_button_5_Template(rf, ctx) { if (rf & 1) {
    const _r13 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 10);
    i0.ɵɵlistener("click", function FoldableItemInTableComponent_div_0_button_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r12 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r12.folded = !ctx_r12.folded); });
    i0.ɵɵtext(1);
    i0.ɵɵpipe(2, "translate");
    i0.ɵɵelement(3, "aui-icon", 11);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r4 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c1, !ctx_r4.folded))("round", true)("plain", ctx_r4.folded);
    i0.ɵɵadvance(1);
    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 5, ctx_r4.folded ? "unfold" : "collapse"), " ");
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("icon", ctx_r4.folded ? "basic:angle_double_down" : "basic:angle_double_up");
} }
const _c2 = function (a0, a1) { return { unfolded: a0, "has-more": a1 }; };
const _c3 = function (a0) { return { marginBottom: a0 }; };
function FoldableItemInTableComponent_div_0_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 2)(1, "ul", 3);
    i0.ɵɵpipe(2, "pure");
    i0.ɵɵtemplate(3, FoldableItemInTableComponent_div_0_li_3_Template, 5, 7, "li", 4);
    i0.ɵɵpipe(4, "pure");
    i0.ɵɵelementEnd();
    i0.ɵɵtemplate(5, FoldableItemInTableComponent_div_0_button_5_Template, 4, 9, "button", 5);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(12, _c2, !ctx_r0.folded, ctx_r0.items.length > ctx_r0.min))("ngStyle", i0.ɵɵpureFunction1(15, _c3, ctx_r0.items.length > ctx_r0.min ? "10px" : null));
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngStyle", i0.ɵɵpipeBind2(2, 5, ctx_r0.max, ctx_r0.getStyle));
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind3(4, 8, ctx_r0.items, ctx_r0.getItems, ctx_r0.folded));
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngIf", ctx_r0.items.length > ctx_r0.min);
} }
function FoldableItemInTableComponent_ng_template_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵtext(0);
    i0.ɵɵpipe(1, "aclFieldNotAvailable");
} if (rf & 2) {
    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(1, 1, null), "\n");
} }
export class FoldableItemInTableComponent {
    constructor(translate) {
        this.translate = translate;
        this.itemTitle = String;
        this.folded = true;
        this.min = 2; // 默认显示几条数据，如果总数超过这个值则显示更多的按钮
        this.max = 4; // 最多显示几条数据，如果超过这个值，则内部滚动
        this.isTemplateRef = isTemplateRef;
        this.getItems = (items, folded) => folded ? items.slice(0, this.min) : items;
    }
    getStyle(max) {
        const height = max * 24;
        return {
            maxHeight: `${height}px`,
        };
    }
}
FoldableItemInTableComponent.ɵfac = function FoldableItemInTableComponent_Factory(t) { return new (t || FoldableItemInTableComponent)(i0.ɵɵdirectiveInject(i1.TranslateService)); };
FoldableItemInTableComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FoldableItemInTableComponent, selectors: [["acl-foldable-item-in-table"]], inputs: { hint: "hint", itemTpl: "itemTpl", itemTitle: "itemTitle", folded: "folded", items: "items", min: "min", max: "max" }, decls: 3, vars: 2, consts: [["class", "foldable", 3, "ngClass", "ngStyle", 4, "ngIf", "ngIfElse"], ["empty", ""], [1, "foldable", 3, "ngClass", "ngStyle"], [3, "ngStyle"], [3, "title", 4, "ngFor", "ngForOf"], ["aui-button", "primary", "size", "mini", "type", "button", 3, "ngClass", "round", "plain", "click", 4, "ngIf"], [3, "title"], [4, "ngIf", "ngIfElse"], ["normal", ""], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["aui-button", "primary", "size", "mini", "type", "button", 3, "ngClass", "round", "plain", "click"], [3, "icon"]], template: function FoldableItemInTableComponent_Template(rf, ctx) { if (rf & 1) {
        i0.ɵɵtemplate(0, FoldableItemInTableComponent_div_0_Template, 6, 17, "div", 0);
        i0.ɵɵtemplate(1, FoldableItemInTableComponent_ng_template_1_Template, 2, 3, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
    } if (rf & 2) {
        const _r1 = i0.ɵɵreference(2);
        i0.ɵɵproperty("ngIf", ctx.items == null ? null : ctx.items.length)("ngIfElse", _r1);
    } }, styles: [".foldable[_ngcontent-%COMP%]{position:relative;border-radius:4px;min-width:60px}.foldable.has-more[_ngcontent-%COMP%]{border-bottom:1px solid rgb(var(--aui-color-n-8));padding-bottom:7px}.foldable.has-more.unfolded[_ngcontent-%COMP%]{margin-left:-9px;padding:8px;border:1px dashed rgb(var(--aui-color-primary))}.foldable[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%]{overflow:auto}.foldable[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%]::-webkit-scrollbar{width:4px;height:4px}.foldable[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(var(--aui-color-n-1),.2)}.foldable[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%]::-webkit-scrollbar-corner{background-color:transparent}.foldable[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%]:not(:last-child){margin-bottom:4px}.foldable[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.foldable[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] + li[_ngcontent-%COMP%]{margin-top:4px}.foldable[_ngcontent-%COMP%]   .aui-button[_ngcontent-%COMP%]{height:24px;font-size:12px;position:absolute;left:50%;transform:translate(-50%);bottom:-12px;border:2px solid rgb(var(--aui-color-n-10))}"], changeDetection: 0 });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FoldableItemInTableComponent, [{
        type: Component,
        args: [{ selector: 'acl-foldable-item-in-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"items?.length; else empty\"\n  class=\"foldable\"\n  [ngClass]=\"{\n    unfolded: !folded,\n    'has-more': items.length > min\n  }\"\n  [ngStyle]=\"{ marginBottom: items.length > min ? '10px' : null }\"\n>\n  <ul [ngStyle]=\"max | pure: getStyle\">\n    <li\n      *ngFor=\"let item of items | pure: getItems:folded\"\n      [title]=\"item | pure: itemTitle:translate.locale\"\n    >\n      <ng-container *ngIf=\"isTemplateRef(itemTpl); else normal\">\n        <ng-container\n          *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"\n        ></ng-container>\n      </ng-container>\n      <ng-template #normal>{{ item }}</ng-template>\n    </li>\n  </ul>\n  <button\n    *ngIf=\"items.length > min\"\n    (click)=\"folded = !folded\"\n    [ngClass]=\"{ folded: !folded }\"\n    aui-button=\"primary\"\n    [round]=\"true\"\n    [plain]=\"folded\"\n    size=\"mini\"\n    type=\"button\"\n  >\n    {{ (folded ? 'unfold' : 'collapse') | translate }}\n    <aui-icon\n      [icon]=\"folded ? 'basic:angle_double_down' : 'basic:angle_double_up'\"\n    ></aui-icon>\n  </button>\n</div>\n\n<ng-template #empty>\n  {{ null | aclFieldNotAvailable }}\n</ng-template>\n", styles: [".foldable{position:relative;border-radius:4px;min-width:60px}.foldable.has-more{border-bottom:1px solid rgb(var(--aui-color-n-8));padding-bottom:7px}.foldable.has-more.unfolded{margin-left:-9px;padding:8px;border:1px dashed rgb(var(--aui-color-primary))}.foldable ul{overflow:auto}.foldable ul::-webkit-scrollbar{width:4px;height:4px}.foldable ul::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(var(--aui-color-n-1),.2)}.foldable ul::-webkit-scrollbar-corner{background-color:transparent}.foldable ul:not(:last-child){margin-bottom:4px}.foldable li{line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.foldable li+li{margin-top:4px}.foldable .aui-button{height:24px;font-size:12px;position:absolute;left:50%;transform:translate(-50%);bottom:-12px;border:2px solid rgb(var(--aui-color-n-10))}\n"] }]
    }], function () { return [{ type: i1.TranslateService }]; }, { hint: [{
            type: Input
        }], itemTpl: [{
            type: Input
        }], itemTitle: [{
            type: Input
        }], folded: [{
            type: Input
        }], items: [{
            type: Input
        }], min: [{
            type: Input
        }], max: [{
            type: Input
        }] }); })();
//# sourceMappingURL=data:application/json;base64, 