import { __decorate, __metadata } from "tslib";
import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, TemplateRef, ViewChild, } from '@angular/core';
import { Observable, ReplaySubject, combineLatest, map, startWith } from 'rxjs';
import { ObservableInput } from '../../../../core/public-api';
import { ConfigurableField, } from '../../types';
import * as i0 from "@angular/core";
const _c0 = ["grid"];
function ResourceDataGridComponent_span_12_img_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "img", 14);
} }
function ResourceDataGridComponent_span_12_img_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "img", 15);
} }
function ResourceDataGridComponent_span_12_img_5_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "img", 16);
} }
function ResourceDataGridComponent_span_12_img_6_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "img", 17);
} }
const _c1 = function (a0) { return { "switch-btn--selected": a0 }; };
function ResourceDataGridComponent_span_12_Template(rf, ctx) { if (rf & 1) {
    const _r8 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "span", 8)(1, "span", 9);
    i0.ɵɵlistener("click", function ResourceDataGridComponent_span_12_Template_span_click_1_listener() { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.setDisplayMode("row")); });
    i0.ɵɵtemplate(2, ResourceDataGridComponent_span_12_img_2_Template, 1, 0, "img", 10);
    i0.ɵɵtemplate(3, ResourceDataGridComponent_span_12_img_3_Template, 1, 0, "img", 11);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "span", 9);
    i0.ɵɵlistener("click", function ResourceDataGridComponent_span_12_Template_span_click_4_listener() { i0.ɵɵrestoreView(_r8); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.setDisplayMode("card")); });
    i0.ɵɵtemplate(5, ResourceDataGridComponent_span_12_img_5_Template, 1, 0, "img", 12);
    i0.ɵɵtemplate(6, ResourceDataGridComponent_span_12_img_6_Template, 1, 0, "img", 13);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(6, _c1, ctx_r0.displayMode !== "card"));
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", ctx_r0.displayMode === "card");
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", ctx_r0.displayMode !== "card");
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c1, ctx_r0.displayMode === "card"));
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", ctx_r0.displayMode !== "card");
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", ctx_r0.displayMode === "card");
} }
const _c2 = function (a0) { return { highlighted: a0 }; };
function ResourceDataGridComponent_ng_container_13_div_1_div_2_ng_container_6_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵelementStart(1, "span", 36);
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd();
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    const str_r25 = ctx.$implicit;
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c2, str_r25.isHighlighted));
    i0.ɵɵadvance(1);
    i0.ɵɵtextInterpolate(str_r25.text);
} }
function ResourceDataGridComponent_ng_container_13_div_1_div_2_ng_container_7_aui_icon_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "aui-icon", 38);
} if (rf & 2) {
    const item_r15 = i0.ɵɵnextContext(2).$implicit;
    i0.ɵɵproperty("auiTooltip", item_r15.fedTooltip);
} }
function ResourceDataGridComponent_ng_container_13_div_1_div_2_ng_container_7_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵtemplate(1, ResourceDataGridComponent_ng_container_13_div_1_div_2_ng_container_7_aui_icon_1_Template, 1, 1, "aui-icon", 37);
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    const item_r15 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", item_r15.isFederal);
} }
function ResourceDataGridComponent_ng_container_13_div_1_div_2_ng_container_9_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵtext(1);
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    const item_r15 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵadvance(1);
    i0.ɵɵtextInterpolate(item_r15.displayName);
} }
function ResourceDataGridComponent_ng_container_13_div_1_div_2_div_10_ng_container_8_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵtext(1);
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    const item_r15 = i0.ɵɵnextContext(2).$implicit;
    i0.ɵɵadvance(1);
    i0.ɵɵtextInterpolate1("(", item_r15.clusterDisplayName, ")");
} }
function ResourceDataGridComponent_ng_container_13_div_1_div_2_div_10_aui_tag_9_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "aui-tag", 43);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const item_r15 = i0.ɵɵnextContext(2).$implicit;
    i0.ɵɵadvance(1);
    i0.ɵɵtextInterpolate1(" ", item_r15.clusterArch, " ");
} }
function ResourceDataGridComponent_ng_container_13_div_1_div_2_div_10_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 39)(1, "span", 40);
    i0.ɵɵpipe(2, "translate");
    i0.ɵɵelementStart(3, "span", 41);
    i0.ɵɵtext(4);
    i0.ɵɵpipe(5, "translate");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(6, "span");
    i0.ɵɵtext(7);
    i0.ɵɵtemplate(8, ResourceDataGridComponent_ng_container_13_div_1_div_2_div_10_ng_container_8_Template, 2, 1, "ng-container", 6);
    i0.ɵɵelementEnd();
    i0.ɵɵtemplate(9, ResourceDataGridComponent_ng_container_13_div_1_div_2_div_10_aui_tag_9_Template, 2, 1, "aui-tag", 42);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const item_r15 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵadvance(1);
    i0.ɵɵpropertyInterpolate("auiTooltip", i0.ɵɵpipeBind1(2, 5, "belonged_cluster") + ": " + item_r15.cluster);
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(5, 7, "belonged_cluster"));
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate(item_r15.cluster);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", item_r15.clusterDisplayName);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", item_r15.clusterArch);
} }
function ResourceDataGridComponent_ng_container_13_div_1_div_2_div_11_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div")(1, "span", 41);
    i0.ɵɵtext(2);
    i0.ɵɵpipe(3, "translate");
    i0.ɵɵelementEnd();
    i0.ɵɵelement(4, "aui-icon", 44);
    i0.ɵɵtext(5);
    i0.ɵɵpipe(6, "translate");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const item_r15 = i0.ɵɵnextContext().$implicit;
    const ctx_r20 = i0.ɵɵnextContext(3);
    i0.ɵɵclassMapInterpolate1("grid__field grid__field-status ", "grid__field-status--" + item_r15.status, "");
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 10, "status"));
    i0.ɵɵadvance(2);
    i0.ɵɵclassMap("icon-" + item_r15.status);
    i0.ɵɵproperty("icon", ctx_r20.statusIcon[item_r15.status])("background", ctx_r20.statusIcon[item_r15.status].endsWith("_triangle_s") ? "triangle" : "circle");
    i0.ɵɵadvance(1);
    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 12, item_r15.status), " ");
} }
function ResourceDataGridComponent_ng_container_13_div_1_div_2_div_12_ng_container_7_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵtext(1);
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    const item_r15 = i0.ɵɵnextContext(2).$implicit;
    i0.ɵɵadvance(1);
    i0.ɵɵtextInterpolate1("(Istio ", item_r15.serviceMeshIstioVersion, ")");
} }
function ResourceDataGridComponent_ng_container_13_div_1_div_2_div_12_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 45)(1, "span", 41);
    i0.ɵɵtext(2);
    i0.ɵɵpipe(3, "translate");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "span");
    i0.ɵɵtext(5);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(6, "div", 30);
    i0.ɵɵtemplate(7, ResourceDataGridComponent_ng_container_13_div_1_div_2_div_12_ng_container_7_Template, 2, 1, "ng-container", 6);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const item_r15 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 3, "belonged_servicemesh"));
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate1(" ", item_r15.serviceMeshName, " ");
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngIf", item_r15.serviceMeshIstioVersion);
} }
function ResourceDataGridComponent_ng_container_13_div_1_div_2_div_13_ng_container_6_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵtext(1);
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    const item_r15 = i0.ɵɵnextContext(2).$implicit;
    i0.ɵɵadvance(1);
    i0.ɵɵtextInterpolate1("(", item_r15.clusterDisplayName, ")");
} }
function ResourceDataGridComponent_ng_container_13_div_1_div_2_div_13_aui_tag_7_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "aui-tag", 43);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const item_r15 = i0.ɵɵnextContext(2).$implicit;
    i0.ɵɵadvance(1);
    i0.ɵɵtextInterpolate1(" ", item_r15.clusterArch, " ");
} }
function ResourceDataGridComponent_ng_container_13_div_1_div_2_div_13_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 45)(1, "span", 41);
    i0.ɵɵtext(2);
    i0.ɵɵpipe(3, "translate");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "span");
    i0.ɵɵtext(5);
    i0.ɵɵtemplate(6, ResourceDataGridComponent_ng_container_13_div_1_div_2_div_13_ng_container_6_Template, 2, 1, "ng-container", 6);
    i0.ɵɵelementEnd();
    i0.ɵɵtemplate(7, ResourceDataGridComponent_ng_container_13_div_1_div_2_div_13_aui_tag_7_Template, 2, 1, "aui-tag", 42);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const item_r15 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 4, "cluster"));
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate(item_r15.cluster);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", item_r15.clusterDisplayName);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", item_r15.clusterArch);
} }
function ResourceDataGridComponent_ng_container_13_div_1_div_2_div_14_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 46)(1, "span", 41);
    i0.ɵɵtext(2);
    i0.ɵɵpipe(3, "translate");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "span");
    i0.ɵɵtext(5);
    i0.ɵɵpipe(6, "aclRelativeTime");
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const item_r15 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 2, "created_time"));
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(6, 4, item_r15.timestamp));
} }
const _c3 = function (a0) { return { $implicit: a0 }; };
function ResourceDataGridComponent_ng_container_13_div_1_div_2_div_15_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 47);
    i0.ɵɵlistener("click", function ResourceDataGridComponent_ng_container_13_div_1_div_2_div_15_Template_div_click_0_listener($event) { return $event.stopPropagation(); });
    i0.ɵɵelementContainer(1, 48);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const item_r15 = i0.ɵɵnextContext().$implicit;
    const ctx_r24 = i0.ɵɵnextContext(3);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngTemplateOutlet", ctx_r24.actionTemplateRef)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c3, item_r15.__origin));
} }
const _c4 = function (a0, a1) { return { "grid__item--selected": a0, "grid__item--disabled": a1 }; };
function ResourceDataGridComponent_ng_container_13_div_1_div_2_Template(rf, ctx) { if (rf & 1) {
    const _r48 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 23);
    i0.ɵɵlistener("click", function ResourceDataGridComponent_ng_container_13_div_1_div_2_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r48); const item_r15 = restoredCtx.$implicit; const ctx_r47 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r47.onSelect(item_r15)); });
    i0.ɵɵelement(1, "aui-icon", 24);
    i0.ɵɵelementStart(2, "div", 25);
    i0.ɵɵelement(3, "acl-resource-icon", 26);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "div", 27)(5, "div", 28);
    i0.ɵɵtemplate(6, ResourceDataGridComponent_ng_container_13_div_1_div_2_ng_container_6_Template, 3, 4, "ng-container", 29);
    i0.ɵɵtemplate(7, ResourceDataGridComponent_ng_container_13_div_1_div_2_ng_container_7_Template, 2, 1, "ng-container", 6);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(8, "div", 30);
    i0.ɵɵtemplate(9, ResourceDataGridComponent_ng_container_13_div_1_div_2_ng_container_9_Template, 2, 1, "ng-container", 6);
    i0.ɵɵelementEnd()();
    i0.ɵɵtemplate(10, ResourceDataGridComponent_ng_container_13_div_1_div_2_div_10_Template, 10, 9, "div", 31);
    i0.ɵɵtemplate(11, ResourceDataGridComponent_ng_container_13_div_1_div_2_div_11_Template, 7, 14, "div", 32);
    i0.ɵɵtemplate(12, ResourceDataGridComponent_ng_container_13_div_1_div_2_div_12_Template, 8, 5, "div", 33);
    i0.ɵɵtemplate(13, ResourceDataGridComponent_ng_container_13_div_1_div_2_div_13_Template, 8, 6, "div", 33);
    i0.ɵɵtemplate(14, ResourceDataGridComponent_ng_container_13_div_1_div_2_div_14_Template, 7, 6, "div", 34);
    i0.ɵɵtemplate(15, ResourceDataGridComponent_ng_container_13_div_1_div_2_div_15_Template, 2, 4, "div", 35);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const item_r15 = ctx.$implicit;
    const ctx_r14 = i0.ɵɵnextContext(3);
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(16, _c4, ctx_r14.context === "popup" && ctx_r14.selectedUid === item_r15.__origin.metadata.uid, item_r15.state == null ? null : item_r15.state.disabled))("auiTooltip", item_r15.state == null ? null : item_r15.state.tooltip)("auiTooltipDisabled", !(item_r15.state == null ? null : item_r15.state.disabled) || !(item_r15.state == null ? null : item_r15.state.tooltip));
    i0.ɵɵattribute("data-test", item_r15.name + "/" + item_r15.cluster);
    i0.ɵɵadvance(3);
    i0.ɵɵproperty("type", ctx_r14.type)("color", ctx_r14.context === "popup" && ctx_r14.selectedUid === item_r15.__origin.metadata.uid ? "white" : "blue")("displayMode", ctx_r14.displayMode);
    i0.ɵɵadvance(3);
    i0.ɵɵproperty("ngForOf", ctx_r14.getHighlightedNameStrs(item_r15));
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", ctx_r14.type === "cluster");
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngIf", item_r15.displayName);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", ctx_r14.fields.includes(ctx_r14.fieldsDef.Cluster));
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", ctx_r14.fields.includes(ctx_r14.fieldsDef.Status));
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", ctx_r14.fields.includes(ctx_r14.fieldsDef.ServiceMesh));
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", ctx_r14.fields.includes(ctx_r14.fieldsDef.ServiceMesh));
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", ctx_r14.fields.includes(ctx_r14.fieldsDef.Time));
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", ctx_r14.fields.includes(ctx_r14.fieldsDef.Action) && ctx_r14.actionTemplateRef && ctx_r14.context !== "popup");
} }
const _c5 = function (a0, a1) { return { "grid--card": a0, "grid--popup": a1 }; };
function ResourceDataGridComponent_ng_container_13_div_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 20, 21);
    i0.ɵɵtemplate(2, ResourceDataGridComponent_ng_container_13_div_1_div_2_Template, 16, 19, "div", 22);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const displayData_r10 = i0.ɵɵnextContext().ngIf;
    const ctx_r11 = i0.ɵɵnextContext();
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(2, _c5, ctx_r11.displayMode === "card" && ctx_r11.context !== "popup", ctx_r11.context === "popup"));
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngForOf", displayData_r10);
} }
function ResourceDataGridComponent_ng_container_13_acl_resource_no_data_2_Template(rf, ctx) { if (rf & 1) {
    const _r51 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "acl-resource-no-data", 49);
    i0.ɵɵlistener("refresh", function ResourceDataGridComponent_ng_container_13_acl_resource_no_data_2_Template_acl_resource_no_data_refresh_0_listener() { i0.ɵɵrestoreView(_r51); const ctx_r50 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r50.reload.emit()); })("clear", function ResourceDataGridComponent_ng_container_13_acl_resource_no_data_2_Template_acl_resource_no_data_clear_0_listener() { i0.ɵɵrestoreView(_r51); const ctx_r52 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r52.keywordChange("")); });
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r12 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("isFiltered", !!ctx_r12.keyword)("type", ctx_r12.type);
} }
function ResourceDataGridComponent_ng_container_13_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵtemplate(1, ResourceDataGridComponent_ng_container_13_div_1_Template, 3, 5, "div", 18);
    i0.ɵɵtemplate(2, ResourceDataGridComponent_ng_container_13_acl_resource_no_data_2_Template, 1, 2, "acl-resource-no-data", 19);
    i0.ɵɵpipe(3, "async");
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    const displayData_r10 = ctx.ngIf;
    const ctx_r1 = i0.ɵɵnextContext();
    let tmp_1_0;
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", displayData_r10.length);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", !((tmp_1_0 = i0.ɵɵpipeBind1(3, 2, ctx_r1.displayData$)) == null ? null : tmp_1_0.length));
} }
function ResourceDataGridComponent_div_16_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 50);
    i0.ɵɵelement(1, "acl-loading-mask", 51);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("loading", ctx_r2.loading);
} }
const _c6 = [[["", "aclResourceGridHeader", ""]]];
const _c7 = ["[aclResourceGridHeader]"];
export class ResourceDataGridComponent {
    constructor() {
        this.context = 'page';
        this.data = [];
        this.type = 'namespace';
        this.fields = [ConfigurableField.Time];
        this.loading = true;
        this.selectItem = new EventEmitter();
        this.filter = new EventEmitter();
        this.reload = new EventEmitter();
        this.keyword = '';
        this.fieldsDef = ConfigurableField;
        this.displayMode = 'row';
        this.filter$ = new ReplaySubject(1);
        this.displayModeKey = 'acl_display_mode';
        this.scrollInitialized = false;
        this.statusIcon = {
            normal: 'check_circle_s',
            abnormal: 'exclamation_triangle_s',
            enabled: 'check_circle_s',
            disabled: 'basic:minus_circle_s',
        };
        this.getHighlightedNameStrs = (item) => {
            if (!this.keyword) {
                return [
                    {
                        text: item.name,
                    },
                ];
            }
            const original = item.name;
            const strs = item.name.toLowerCase().split(this.keyword.toLowerCase());
            const ret = [];
            let pos = 0;
            for (const [i, str] of strs.entries()) {
                const end = pos + str.length;
                ret.push({
                    text: original.slice(pos, end),
                });
                if (i !== strs.length - 1) {
                    ret.push({
                        text: original.slice(end, end + this.keyword.length),
                        isHighlighted: true,
                    });
                }
                pos = end + this.keyword.length;
            }
            return ret;
        };
    }
    set grid(grid) {
        if (grid) {
            this.initScroll(grid.nativeElement);
        }
    }
    ngOnInit() {
        const displayMode = window.localStorage.getItem(this.displayModeKey);
        this.displayMode =
            this.context === 'popup'
                ? 'row'
                : ['row', 'card'].includes(displayMode)
                    ? displayMode
                    : 'row';
        this.displayData$ = combineLatest([
            this.data$,
            this.filter$.pipe(startWith('')),
        ]).pipe(map(([data, keyword]) => data.filter(item => item.name.toLowerCase().includes(keyword.toLowerCase()))));
    }
    initScroll(scrollEl) {
        if (this.context === 'page' ||
            this.scrollInitialized ||
            !this.data?.length) {
            return;
        }
        const currentIndex = this.data.findIndex(item => item.__origin.metadata.uid === this.selectedUid);
        const rowHeight = scrollEl.scrollHeight / this.data.length;
        if (currentIndex > -1 &&
            rowHeight * (currentIndex + 1) > scrollEl.offsetHeight) {
            scrollEl.scrollTo({
                top: rowHeight * currentIndex,
            });
        }
        this.scrollInitialized = true;
    }
    onSelect(item) {
        if (item.state?.disabled ||
            this.selectedUid === item.__origin.metadata.uid) {
            return;
        }
        this.selectedUid = item.name;
        this.selectItem.emit(item);
    }
    setDisplayMode(mode) {
        this.displayMode = mode;
        window.localStorage.setItem(this.displayModeKey, mode);
    }
    keywordChange(keyword) {
        this.keyword = keyword;
        this.filter$.next(keyword);
    }
    filterDisabledData(data, context) {
        // workaround for typings in template
        return (context === 'page' ? data : data.filter(item => !item.state?.disabled));
    }
}
ResourceDataGridComponent.ɵfac = function ResourceDataGridComponent_Factory(t) { return new (t || ResourceDataGridComponent)(); };
ResourceDataGridComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ResourceDataGridComponent, selectors: [["acl-resource-data-grid"]], viewQuery: function ResourceDataGridComponent_Query(rf, ctx) { if (rf & 1) {
        i0.ɵɵviewQuery(_c0, 5);
    } if (rf & 2) {
        let _t;
        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.grid = _t.first);
    } }, inputs: { context: "context", data: "data", type: "type", fields: "fields", actionTemplateRef: "actionTemplateRef", selectedUid: "selectedUid", loading: "loading" }, outputs: { selectItem: "selectItem", filter: "filter", reload: "reload" }, ngContentSelectors: _c7, decls: 17, vars: 21, consts: [[1, "header"], [1, "header__title"], [1, "header__desc"], [1, "header__custom"], ["size", "small", 3, "searchButton", "placeholder", "keyword", "clearable", "keywordChange"], ["class", "header__display-mode", 4, "ngIf"], [4, "ngIf"], ["class", "loading", 4, "ngIf"], [1, "header__display-mode"], [1, "switch-btn", 3, "ngClass", "click"], ["src", "icons/icon-list.svg", "alt", "", 4, "ngIf"], ["src", "icons/icon-list-blue.svg", "alt", "", 4, "ngIf"], ["src", "icons/icon-card.svg", "alt", "", 4, "ngIf"], ["src", "icons/icon-card-blue.svg", "alt", "", 4, "ngIf"], ["src", "icons/icon-list.svg", "alt", ""], ["src", "icons/icon-list-blue.svg", "alt", ""], ["src", "icons/icon-card.svg", "alt", ""], ["src", "icons/icon-card-blue.svg", "alt", ""], ["class", "grid", 3, "ngClass", 4, "ngIf"], [3, "isFiltered", "type", "refresh", "clear", 4, "ngIf"], [1, "grid", 3, "ngClass"], ["grid", ""], ["class", "grid__item", 3, "ngClass", "auiTooltip", "auiTooltipDisabled", "click", 4, "ngFor", "ngForOf"], [1, "grid__item", 3, "ngClass", "auiTooltip", "auiTooltipDisabled", "click"], ["icon", "check_triangle_s", 1, "grid__item-selected-icon"], [1, "grid__field", "grid__field-icon"], [3, "type", "color", "displayMode"], [1, "grid__field", "grid__field-name"], [1, "name"], [4, "ngFor", "ngForOf"], [1, "des"], ["class", "grid__field flex grid__field-cluster", 4, "ngIf"], [3, "class", 4, "ngIf"], ["class", "grid__field grid__field-servicemesh", 4, "ngIf"], ["class", "grid__field grid__field-time", 4, "ngIf"], ["class", "grid__field grid__field-action", 3, "click", 4, "ngIf"], [3, "ngClass"], ["icon", "basic:federation_cluster", "color", "#1cb6cc", 3, "auiTooltip", 4, "ngIf"], ["icon", "basic:federation_cluster", "color", "#1cb6cc", 3, "auiTooltip"], [1, "grid__field", "flex", "grid__field-cluster"], [1, "belonged-cluster", 3, "auiTooltip"], [1, "with-colon"], ["type", "primary", "size", "mini", 4, "ngIf"], ["type", "primary", "size", "mini"], [3, "icon", "background"], [1, "grid__field", "grid__field-servicemesh"], [1, "grid__field", "grid__field-time"], [1, "grid__field", "grid__field-action", 3, "click"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "isFiltered", "type", "refresh", "clear"], [1, "loading"], ["type", "content", 3, "loading"]], template: function ResourceDataGridComponent_Template(rf, ctx) { if (rf & 1) {
        i0.ɵɵprojectionDef(_c6);
        i0.ɵɵelementStart(0, "div", 0)(1, "span", 1)(2, "span");
        i0.ɵɵtext(3);
        i0.ɵɵpipe(4, "translate");
        i0.ɵɵelementEnd();
        i0.ɵɵelementStart(5, "span", 2);
        i0.ɵɵtext(6);
        i0.ɵɵpipe(7, "async");
        i0.ɵɵelementEnd()();
        i0.ɵɵelementStart(8, "div", 3);
        i0.ɵɵprojection(9);
        i0.ɵɵelementEnd();
        i0.ɵɵelementStart(10, "aui-search", 4);
        i0.ɵɵlistener("keywordChange", function ResourceDataGridComponent_Template_aui_search_keywordChange_10_listener($event) { return ctx.keywordChange($event); });
        i0.ɵɵpipe(11, "translate");
        i0.ɵɵelementEnd();
        i0.ɵɵtemplate(12, ResourceDataGridComponent_span_12_Template, 7, 10, "span", 5);
        i0.ɵɵelementEnd();
        i0.ɵɵtemplate(13, ResourceDataGridComponent_ng_container_13_Template, 4, 4, "ng-container", 6);
        i0.ɵɵpipe(14, "pure");
        i0.ɵɵpipe(15, "async");
        i0.ɵɵtemplate(16, ResourceDataGridComponent_div_16_Template, 2, 1, "div", 7);
    } if (rf & 2) {
        let tmp_1_0;
        i0.ɵɵadvance(3);
        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 9, ctx.type));
        i0.ɵɵadvance(3);
        i0.ɵɵtextInterpolate1("\uFF08", ((tmp_1_0 = i0.ɵɵpipeBind1(7, 11, ctx.displayData$)) == null ? null : tmp_1_0.length) || 0, "\uFF09");
        i0.ɵɵadvance(4);
        i0.ɵɵproperty("searchButton", false)("placeholder", i0.ɵɵpipeBind1(11, 13, "filter_by_name"))("keyword", ctx.keyword)("clearable", true);
        i0.ɵɵadvance(2);
        i0.ɵɵproperty("ngIf", ctx.context === "page");
        i0.ɵɵadvance(1);
        i0.ɵɵproperty("ngIf", !ctx.loading && i0.ɵɵpipeBind3(14, 15, i0.ɵɵpipeBind1(15, 19, ctx.displayData$), ctx.filterDisabledData, ctx.context));
        i0.ɵɵadvance(3);
        i0.ɵɵproperty("ngIf", ctx.loading);
    } }, styles: ["[_nghost-%COMP%]{display:flex;flex-direction:column;box-shadow:0 0 4px 0 rgba(var(--aui-color-n-1),.16);padding:22px 20px 20px;background-color:rgb(var(--aui-color-n-10));border-radius:4px}.header[_ngcontent-%COMP%]{display:flex;align-items:center;margin-bottom:20px;height:28px}.header[_ngcontent-%COMP%]   aui-search[_ngcontent-%COMP%]{width:260px}.header__title[_ngcontent-%COMP%]{font-size:18px;font-weight:500;line-height:28px;color:rgb(var(--aui-color-n-1))}.header__desc[_ngcontent-%COMP%]{color:rgb(var(--aui-color-n-4))}.header__custom[_ngcontent-%COMP%]{flex:1;padding:0 36px}.header__display-mode[_ngcontent-%COMP%]{display:flex;border:1px solid rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-9));border-radius:var(--aui-border-radius-m);margin-left:16px;padding:1px}.switch-btn[_ngcontent-%COMP%]{cursor:pointer;width:24px;height:24px;border-radius:var(--aui-border-radius-m);display:inline-flex;align-items:center;justify-content:center}.switch-btn[_ngcontent-%COMP%]   img[_ngcontent-%COMP%]{width:12px;height:12px}.switch-btn--selected[_ngcontent-%COMP%]{background-color:rgb(var(--aui-color-n-10));color:rgb(var(--aui-color-primary))}.grid[_ngcontent-%COMP%]{overflow-y:auto;padding:20px;background-color:rgb(var(--aui-color-n-9));border-radius:var(--aui-border-radius-l)}.grid[_ngcontent-%COMP%]::-webkit-scrollbar{width:4px;height:4px}.grid[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(var(--aui-color-n-1),.2)}.grid[_ngcontent-%COMP%]::-webkit-scrollbar-corner{background-color:transparent}.grid__item[_ngcontent-%COMP%]{display:flex;position:relative;flex-direction:row;border-radius:var(--aui-border-radius-l);padding:9px 20px;min-height:60px;color:rgb(var(--aui-color-n-1));align-items:center;cursor:pointer;background-color:rgb(var(--aui-color-n-10))}.grid__item[_ngcontent-%COMP%]:not(:last-child){margin-bottom:8px}.grid__item[_ngcontent-%COMP%]:not(.grid__item--disabled):hover{border-color:rgb(var(--aui-color-primary));box-shadow:0 0 8px 0 rgba(var(--aui-color-primary),.5)}.grid__item[_ngcontent-%COMP%]:not(.grid__item--selected){position:relative}.grid__item[_ngcontent-%COMP%]:not(.grid__item--selected):after{position:absolute;content:\"\";top:0;right:0;bottom:0;left:0;border:1px solid rgb(var(--aui-color-n-7));border-radius:4px;pointer-events:none;transition:all .2s ease-in-out}.grid__item[_ngcontent-%COMP%]:not(.grid__item--selected).disabled{background-color:rgb(var(--aui-color-n-8));color:rgb(var(--aui-color-n-6));cursor:not-allowed}.grid__item[_ngcontent-%COMP%]:not(.grid__item--selected):not(.disabled):hover:after{top:-4px;right:-4px;bottom:-4px;left:-4px;border-color:rgb(var(--aui-color-primary));box-shadow:inset 0 0 0 4px rgb(var(--aui-color-n-10)),0 0 8px 0 rgba(var(--aui-color-primary),.5)}.grid__item[_ngcontent-%COMP%]:not(.grid__item--selected):not(.disabled):active:after{top:0;right:0;bottom:0;left:0;box-shadow:0 0 4px 0 rgba(var(--aui-color-primary),.5)}.grid__item--disabled[_ngcontent-%COMP%]{cursor:default}.grid__item--disabled[_ngcontent-%COMP%], .grid__item--disabled[_ngcontent-%COMP%]:hover{background-color:rgb(var(--aui-color-n-9))}.grid__item--disabled[_ngcontent-%COMP%]   .grid__field[_ngcontent-%COMP%]{opacity:.3}.grid__item--disabled[_ngcontent-%COMP%]   .grid__field-servicemesh[_ngcontent-%COMP%], .grid__item--disabled[_ngcontent-%COMP%]   .grid__field-action[_ngcontent-%COMP%]{opacity:1}.grid__field[_ngcontent-%COMP%]{flex:2;line-height:20px}.grid__field[_ngcontent-%COMP%]:not(.grid__field-status){white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.grid__field[_ngcontent-%COMP%]:not(:last-child){margin-right:20px}.grid__field-servicemesh[_ngcontent-%COMP%]{flex:2;align-items:stretch;max-width:400px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.grid__field-servicemesh[_ngcontent-%COMP%]   .des[_ngcontent-%COMP%]{font-size:12px;line-height:16px;color:rgb(var(--aui-color-n-4))}.grid__field-servicemesh[_ngcontent-%COMP%]   aui-tag[_ngcontent-%COMP%]{margin-left:8px}.grid__field-status[_ngcontent-%COMP%]{display:flex;align-items:center}.grid__field-status[_ngcontent-%COMP%]   aui-icon[_ngcontent-%COMP%]{font-size:16px;display:inline-flex;margin-right:4px}.grid__field-status[_ngcontent-%COMP%]   .with-colon[_ngcontent-%COMP%]{display:none}.grid__field-icon[_ngcontent-%COMP%]{max-width:30px;display:inline-flex}.grid__field-name[_ngcontent-%COMP%]{flex:2;flex-direction:column;max-width:280px}.grid__field-name[_ngcontent-%COMP%]   .name[_ngcontent-%COMP%], .grid__field-name[_ngcontent-%COMP%]   .des[_ngcontent-%COMP%]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.grid__field-name[_ngcontent-%COMP%]   .name[_ngcontent-%COMP%]{font-size:14px;font-weight:500;line-height:20px}.grid__field-name[_ngcontent-%COMP%]   .name[_ngcontent-%COMP%]   aui-icon[_ngcontent-%COMP%]{margin-left:4px}.grid__field-name[_ngcontent-%COMP%]   .des[_ngcontent-%COMP%]{font-size:12px;line-height:16px;color:rgb(var(--aui-color-n-4))}.grid__field-action[_ngcontent-%COMP%]{max-width:30px}.grid__item-selected-icon[_ngcontent-%COMP%]{position:absolute;right:1px;bottom:1px;color:#fff;display:none;font-size:23px;border-bottom-right-radius:var(--aui-border-radius-l);overflow:hidden}.grid--popup[_ngcontent-%COMP%]{max-height:382px;padding:12px}.grid--popup[_ngcontent-%COMP%]   .grid__field-name[_ngcontent-%COMP%]   .name[_ngcontent-%COMP%]{font-size:18px;line-height:25px;font-weight:400}.grid--popup[_ngcontent-%COMP%]   .grid__item[_ngcontent-%COMP%]{padding:10px 20px;min-height:60px;font-size:14px;background-color:rgb(var(--aui-color-n-10))}.grid--popup[_ngcontent-%COMP%]   .grid__item--selected[_ngcontent-%COMP%]{border:1px solid rgb(var(--aui-color-n-7));border-radius:var(--aui-border-radius-l);background-color:rgb(var(--aui-color-primary));border-color:rgb(var(--aui-color-primary));color:#fff;cursor:default}.grid--popup[_ngcontent-%COMP%]   .grid__item--selected[_ngcontent-%COMP%]:hover{box-shadow:none}.grid--popup[_ngcontent-%COMP%]   .grid__item--selected[_ngcontent-%COMP%]   .grid__item-selected-icon[_ngcontent-%COMP%]{display:inline-flex}.grid--popup[_ngcontent-%COMP%]   .grid__item--selected[_ngcontent-%COMP%]   .highlighted[_ngcontent-%COMP%]{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-n-10))}.grid--popup[_ngcontent-%COMP%]   .grid__item--selected[_ngcontent-%COMP%]   .with-colon[_ngcontent-%COMP%]{font-weight:500}.grid--popup[_ngcontent-%COMP%]   .grid__item--selected[_ngcontent-%COMP%]   .des[_ngcontent-%COMP%]{color:#fff}.grid--popup[_ngcontent-%COMP%]   .grid__item--selected[_ngcontent-%COMP%]     .aui-tag--primary{background-color:#fff;color:rgb(var(--aui-color-primary))}.grid--card[_ngcontent-%COMP%]{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:20px 20px}.grid--card[_ngcontent-%COMP%]   .grid__item[_ngcontent-%COMP%]{margin-bottom:0;height:290px;display:block;text-align:center;padding:40px 20px;border-radius:var(--aui-border-radius-l);position:relative}.grid--card[_ngcontent-%COMP%]   .grid__item[_ngcontent-%COMP%]   .belonged-cluster[_ngcontent-%COMP%]{position:static;padding-right:0}.grid--card[_ngcontent-%COMP%]   .grid__item[_ngcontent-%COMP%]   aui-tag[_ngcontent-%COMP%]{position:absolute;top:8px;right:8px}.grid--card[_ngcontent-%COMP%]   .grid__field[_ngcontent-%COMP%]{margin-right:0;justify-content:center}.grid--card[_ngcontent-%COMP%]   .grid__field-icon[_ngcontent-%COMP%]{max-width:100%;vertical-align:middle}.grid--card[_ngcontent-%COMP%]   .grid__field-name[_ngcontent-%COMP%]{margin:20px 0 24px}.grid--card[_ngcontent-%COMP%]   .grid__field-name[_ngcontent-%COMP%]   .name[_ngcontent-%COMP%], .grid--card[_ngcontent-%COMP%]   .grid__field-name[_ngcontent-%COMP%]   .des[_ngcontent-%COMP%]{justify-content:center}.grid--card[_ngcontent-%COMP%]   .grid__field-name[_ngcontent-%COMP%]   .name[_ngcontent-%COMP%]{font-size:20px;font-weight:500;line-height:28px;margin-bottom:2px}.grid--card[_ngcontent-%COMP%]   .grid__field-name[_ngcontent-%COMP%]   .des[_ngcontent-%COMP%]{font-size:14px;height:20px}.grid--card[_ngcontent-%COMP%]   .grid__field-name[_ngcontent-%COMP%] ~ .grid__field[_ngcontent-%COMP%]:not(.grid__field-status){line-height:20px;font-size:14px;text-align:center}.grid--card[_ngcontent-%COMP%]   .grid__field-status[_ngcontent-%COMP%]   .with-colon[_ngcontent-%COMP%]{display:inline}.grid--card[_ngcontent-%COMP%]   .grid__field-servicemesh[_ngcontent-%COMP%]:not(:last-of-type){margin-bottom:4px}.grid--card[_ngcontent-%COMP%]   .grid__field-cluster[_ngcontent-%COMP%]{margin-bottom:4px}.grid--card[_ngcontent-%COMP%]   .grid__field-action[_ngcontent-%COMP%]{position:absolute;right:10px;top:10px}.flex[_ngcontent-%COMP%]{display:flex}.highlighted[_ngcontent-%COMP%]{background-color:#f7e8ac}.with-colon[_ngcontent-%COMP%]{font-weight:500}.with-colon[_ngcontent-%COMP%]:after{content:\":\";margin-right:8px}.icon-normal[_ngcontent-%COMP%], .icon-enabled[_ngcontent-%COMP%]{color:rgb(var(--aui-color-green))}.icon-abnormal[_ngcontent-%COMP%]{color:rgb(var(--aui-color-red))}.icon-disabled[_ngcontent-%COMP%]{color:rgb(var(--aui-color-n-6))}.belonged-cluster[_ngcontent-%COMP%]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;padding-right:44px}.belonged-cluster[_ngcontent-%COMP%]   .with-colon[_ngcontent-%COMP%] + span[_ngcontent-%COMP%]{margin-right:8px}.belonged-cluster[_ngcontent-%COMP%]   aui-tag[_ngcontent-%COMP%]{position:absolute;display:inline-flex}.loading[_ngcontent-%COMP%]{display:flex;height:60px;align-items:center;justify-content:center}acl-resource-no-data[_ngcontent-%COMP%]{flex:1;margin:40px 0 80px}"], changeDetection: 0 });
__decorate([
    ObservableInput(),
    __metadata("design:type", Observable)
], ResourceDataGridComponent.prototype, "data$", void 0);
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ResourceDataGridComponent, [{
        type: Component,
        args: [{ selector: 'acl-resource-data-grid', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"header\">\n  <span class=\"header__title\">\n    <span>{{ type | translate }}</span\n    ><span class=\"header__desc\"\n      >\uFF08{{ (displayData$ | async)?.length || 0 }}\uFF09</span\n    >\n  </span>\n  <div class=\"header__custom\">\n    <ng-content select=\"[aclResourceGridHeader]\"></ng-content>\n  </div>\n  <aui-search\n    [searchButton]=\"false\"\n    [placeholder]=\"'filter_by_name' | translate\"\n    [keyword]=\"keyword\"\n    (keywordChange)=\"keywordChange($event)\"\n    [clearable]=\"true\"\n    size=\"small\"\n  ></aui-search>\n  <span\n    class=\"header__display-mode\"\n    *ngIf=\"context === 'page'\"\n  >\n    <span\n      class=\"switch-btn\"\n      [ngClass]=\"{ 'switch-btn--selected': displayMode !== 'card' }\"\n      (click)=\"setDisplayMode('row')\"\n    >\n      <img\n        src=\"icons/icon-list.svg\"\n        *ngIf=\"displayMode === 'card'\"\n        alt=\"\"\n      />\n      <img\n        src=\"icons/icon-list-blue.svg\"\n        *ngIf=\"displayMode !== 'card'\"\n        alt=\"\"\n      />\n    </span>\n    <span\n      class=\"switch-btn\"\n      [ngClass]=\"{ 'switch-btn--selected': displayMode === 'card' }\"\n      (click)=\"setDisplayMode('card')\"\n    >\n      <img\n        src=\"icons/icon-card.svg\"\n        *ngIf=\"displayMode !== 'card'\"\n        alt=\"\"\n      />\n      <img\n        src=\"icons/icon-card-blue.svg\"\n        *ngIf=\"displayMode === 'card'\"\n        alt=\"\"\n      />\n    </span>\n  </span>\n</div>\n<ng-container\n  *ngIf=\"\n    !loading &&\n    (displayData$ | async | pure: filterDisabledData:context) as displayData\n  \"\n>\n  <div\n    class=\"grid\"\n    *ngIf=\"displayData.length\"\n    #grid\n    [ngClass]=\"{\n      'grid--card': displayMode === 'card' && context !== 'popup',\n      'grid--popup': context === 'popup'\n    }\"\n  >\n    <div\n      class=\"grid__item\"\n      *ngFor=\"let item of displayData\"\n      [ngClass]=\"{\n        'grid__item--selected':\n          context === 'popup' && selectedUid === item.__origin.metadata.uid,\n        'grid__item--disabled': item.state?.disabled\n      }\"\n      (click)=\"onSelect(item)\"\n      [attr.data-test]=\"item.name + '/' + item.cluster\"\n      [auiTooltip]=\"item.state?.tooltip\"\n      [auiTooltipDisabled]=\"!item.state?.disabled || !item.state?.tooltip\"\n    >\n      <aui-icon\n        icon=\"check_triangle_s\"\n        class=\"grid__item-selected-icon\"\n      ></aui-icon>\n      <!-- icon -->\n      <div class=\"grid__field grid__field-icon\">\n        <acl-resource-icon\n          [type]=\"type\"\n          [color]=\"\n            context === 'popup' && selectedUid === item.__origin.metadata.uid\n              ? 'white'\n              : 'blue'\n          \"\n          [displayMode]=\"displayMode\"\n        ></acl-resource-icon>\n      </div>\n      <!-- name -->\n      <div class=\"grid__field grid__field-name\">\n        <div class=\"name\">\n          <ng-container *ngFor=\"let str of getHighlightedNameStrs(item)\">\n            <span [ngClass]=\"{ highlighted: str.isHighlighted }\">{{\n              str.text\n            }}</span>\n          </ng-container>\n          <!-- for cluster -->\n          <ng-container *ngIf=\"type === 'cluster'\">\n            <aui-icon\n              *ngIf=\"item.isFederal\"\n              icon=\"basic:federation_cluster\"\n              [auiTooltip]=\"item.fedTooltip\"\n              color=\"#1cb6cc\"\n            ></aui-icon>\n          </ng-container>\n        </div>\n        <div class=\"des\">\n          <ng-container *ngIf=\"item.displayName\">{{\n            item.displayName\n          }}</ng-container>\n        </div>\n      </div>\n      <!-- ns: cluster -->\n      <div\n        class=\"grid__field flex grid__field-cluster\"\n        *ngIf=\"fields.includes(fieldsDef.Cluster)\"\n      >\n        <span\n          class=\"belonged-cluster\"\n          auiTooltip=\"{{\n            ('belonged_cluster' | translate) + ': ' + item.cluster\n          }}\"\n        >\n          <span class=\"with-colon\">{{ 'belonged_cluster' | translate }}</span>\n          <span\n            >{{ item.cluster\n            }}<ng-container *ngIf=\"item.clusterDisplayName\"\n              >({{ item.clusterDisplayName }})</ng-container\n            >\n          </span>\n          <aui-tag\n            type=\"primary\"\n            size=\"mini\"\n            *ngIf=\"item.clusterArch\"\n          >\n            {{ item.clusterArch }}\n          </aui-tag>\n        </span>\n      </div>\n      <!-- project: status -->\n      <div\n        class=\"grid__field grid__field-status {{\n          'grid__field-status--' + item.status\n        }}\"\n        *ngIf=\"fields.includes(fieldsDef.Status)\"\n      >\n        <span class=\"with-colon\">{{ 'status' | translate }}</span>\n        <aui-icon\n          [icon]=\"statusIcon[item.status]\"\n          [background]=\"\n            statusIcon[item.status].endsWith('_triangle_s')\n              ? 'triangle'\n              : 'circle'\n          \"\n          class=\"{{ 'icon-' + item.status }}\"\n        ></aui-icon>\n        {{ item.status | translate }}\n      </div>\n      <!-- asm: service mesh -->\n      <div\n        class=\"grid__field grid__field-servicemesh\"\n        *ngIf=\"fields.includes(fieldsDef.ServiceMesh)\"\n      >\n        <span class=\"with-colon\">{{ 'belonged_servicemesh' | translate }}</span>\n        <span>\n          {{ item.serviceMeshName }}\n        </span>\n        <div class=\"des\">\n          <ng-container *ngIf=\"item.serviceMeshIstioVersion\"\n            >(Istio {{ item.serviceMeshIstioVersion }})</ng-container\n          >\n        </div>\n      </div>\n\n      <div\n        class=\"grid__field grid__field-servicemesh\"\n        *ngIf=\"fields.includes(fieldsDef.ServiceMesh)\"\n      >\n        <span class=\"with-colon\">{{ 'cluster' | translate }}</span>\n        <span\n          >{{ item.cluster\n          }}<ng-container *ngIf=\"item.clusterDisplayName\"\n            >({{ item.clusterDisplayName }})</ng-container\n          >\n        </span>\n        <aui-tag\n          type=\"primary\"\n          size=\"mini\"\n          *ngIf=\"item.clusterArch\"\n        >\n          {{ item.clusterArch }}\n        </aui-tag>\n      </div>\n\n      <!-- time -->\n      <div\n        class=\"grid__field grid__field-time\"\n        *ngIf=\"fields.includes(fieldsDef.Time)\"\n      >\n        <span class=\"with-colon\">{{ 'created_time' | translate }}</span>\n        <span>{{ item.timestamp | aclRelativeTime }}</span>\n      </div>\n      <!-- action -->\n      <div\n        class=\"grid__field grid__field-action\"\n        (click)=\"$event.stopPropagation()\"\n        *ngIf=\"\n          fields.includes(fieldsDef.Action) &&\n          actionTemplateRef &&\n          context !== 'popup'\n        \"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"actionTemplateRef\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: item.__origin\n          }\"\n        ></ng-container>\n      </div>\n    </div>\n  </div>\n  <acl-resource-no-data\n    *ngIf=\"!(displayData$ | async)?.length\"\n    [isFiltered]=\"!!keyword\"\n    [type]=\"type\"\n    (refresh)=\"reload.emit()\"\n    (clear)=\"keywordChange('')\"\n  ></acl-resource-no-data>\n</ng-container>\n<div\n  class=\"loading\"\n  *ngIf=\"loading\"\n>\n  <acl-loading-mask\n    [loading]=\"loading\"\n    type=\"content\"\n  ></acl-loading-mask>\n</div>\n", styles: [":host{display:flex;flex-direction:column;box-shadow:0 0 4px 0 rgba(var(--aui-color-n-1),.16);padding:22px 20px 20px;background-color:rgb(var(--aui-color-n-10));border-radius:4px}.header{display:flex;align-items:center;margin-bottom:20px;height:28px}.header aui-search{width:260px}.header__title{font-size:18px;font-weight:500;line-height:28px;color:rgb(var(--aui-color-n-1))}.header__desc{color:rgb(var(--aui-color-n-4))}.header__custom{flex:1;padding:0 36px}.header__display-mode{display:flex;border:1px solid rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-9));border-radius:var(--aui-border-radius-m);margin-left:16px;padding:1px}.switch-btn{cursor:pointer;width:24px;height:24px;border-radius:var(--aui-border-radius-m);display:inline-flex;align-items:center;justify-content:center}.switch-btn img{width:12px;height:12px}.switch-btn--selected{background-color:rgb(var(--aui-color-n-10));color:rgb(var(--aui-color-primary))}.grid{overflow-y:auto;padding:20px;background-color:rgb(var(--aui-color-n-9));border-radius:var(--aui-border-radius-l)}.grid::-webkit-scrollbar{width:4px;height:4px}.grid::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(var(--aui-color-n-1),.2)}.grid::-webkit-scrollbar-corner{background-color:transparent}.grid__item{display:flex;position:relative;flex-direction:row;border-radius:var(--aui-border-radius-l);padding:9px 20px;min-height:60px;color:rgb(var(--aui-color-n-1));align-items:center;cursor:pointer;background-color:rgb(var(--aui-color-n-10))}.grid__item:not(:last-child){margin-bottom:8px}.grid__item:not(.grid__item--disabled):hover{border-color:rgb(var(--aui-color-primary));box-shadow:0 0 8px 0 rgba(var(--aui-color-primary),.5)}.grid__item:not(.grid__item--selected){position:relative}.grid__item:not(.grid__item--selected):after{position:absolute;content:\"\";top:0;right:0;bottom:0;left:0;border:1px solid rgb(var(--aui-color-n-7));border-radius:4px;pointer-events:none;transition:all .2s ease-in-out}.grid__item:not(.grid__item--selected).disabled{background-color:rgb(var(--aui-color-n-8));color:rgb(var(--aui-color-n-6));cursor:not-allowed}.grid__item:not(.grid__item--selected):not(.disabled):hover:after{top:-4px;right:-4px;bottom:-4px;left:-4px;border-color:rgb(var(--aui-color-primary));box-shadow:inset 0 0 0 4px rgb(var(--aui-color-n-10)),0 0 8px 0 rgba(var(--aui-color-primary),.5)}.grid__item:not(.grid__item--selected):not(.disabled):active:after{top:0;right:0;bottom:0;left:0;box-shadow:0 0 4px 0 rgba(var(--aui-color-primary),.5)}.grid__item--disabled{cursor:default}.grid__item--disabled,.grid__item--disabled:hover{background-color:rgb(var(--aui-color-n-9))}.grid__item--disabled .grid__field{opacity:.3}.grid__item--disabled .grid__field-servicemesh,.grid__item--disabled .grid__field-action{opacity:1}.grid__field{flex:2;line-height:20px}.grid__field:not(.grid__field-status){white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.grid__field:not(:last-child){margin-right:20px}.grid__field-servicemesh{flex:2;align-items:stretch;max-width:400px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.grid__field-servicemesh .des{font-size:12px;line-height:16px;color:rgb(var(--aui-color-n-4))}.grid__field-servicemesh aui-tag{margin-left:8px}.grid__field-status{display:flex;align-items:center}.grid__field-status aui-icon{font-size:16px;display:inline-flex;margin-right:4px}.grid__field-status .with-colon{display:none}.grid__field-icon{max-width:30px;display:inline-flex}.grid__field-name{flex:2;flex-direction:column;max-width:280px}.grid__field-name .name,.grid__field-name .des{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.grid__field-name .name{font-size:14px;font-weight:500;line-height:20px}.grid__field-name .name aui-icon{margin-left:4px}.grid__field-name .des{font-size:12px;line-height:16px;color:rgb(var(--aui-color-n-4))}.grid__field-action{max-width:30px}.grid__item-selected-icon{position:absolute;right:1px;bottom:1px;color:#fff;display:none;font-size:23px;border-bottom-right-radius:var(--aui-border-radius-l);overflow:hidden}.grid--popup{max-height:382px;padding:12px}.grid--popup .grid__field-name .name{font-size:18px;line-height:25px;font-weight:400}.grid--popup .grid__item{padding:10px 20px;min-height:60px;font-size:14px;background-color:rgb(var(--aui-color-n-10))}.grid--popup .grid__item--selected{border:1px solid rgb(var(--aui-color-n-7));border-radius:var(--aui-border-radius-l);background-color:rgb(var(--aui-color-primary));border-color:rgb(var(--aui-color-primary));color:#fff;cursor:default}.grid--popup .grid__item--selected:hover{box-shadow:none}.grid--popup .grid__item--selected .grid__item-selected-icon{display:inline-flex}.grid--popup .grid__item--selected .highlighted{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-n-10))}.grid--popup .grid__item--selected .with-colon{font-weight:500}.grid--popup .grid__item--selected .des{color:#fff}.grid--popup .grid__item--selected ::ng-deep .aui-tag--primary{background-color:#fff;color:rgb(var(--aui-color-primary))}.grid--card{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:20px 20px}.grid--card .grid__item{margin-bottom:0;height:290px;display:block;text-align:center;padding:40px 20px;border-radius:var(--aui-border-radius-l);position:relative}.grid--card .grid__item .belonged-cluster{position:static;padding-right:0}.grid--card .grid__item aui-tag{position:absolute;top:8px;right:8px}.grid--card .grid__field{margin-right:0;justify-content:center}.grid--card .grid__field-icon{max-width:100%;vertical-align:middle}.grid--card .grid__field-name{margin:20px 0 24px}.grid--card .grid__field-name .name,.grid--card .grid__field-name .des{justify-content:center}.grid--card .grid__field-name .name{font-size:20px;font-weight:500;line-height:28px;margin-bottom:2px}.grid--card .grid__field-name .des{font-size:14px;height:20px}.grid--card .grid__field-name~.grid__field:not(.grid__field-status){line-height:20px;font-size:14px;text-align:center}.grid--card .grid__field-status .with-colon{display:inline}.grid--card .grid__field-servicemesh:not(:last-of-type){margin-bottom:4px}.grid--card .grid__field-cluster{margin-bottom:4px}.grid--card .grid__field-action{position:absolute;right:10px;top:10px}.flex{display:flex}.highlighted{background-color:#f7e8ac}.with-colon{font-weight:500}.with-colon:after{content:\":\";margin-right:8px}.icon-normal,.icon-enabled{color:rgb(var(--aui-color-green))}.icon-abnormal{color:rgb(var(--aui-color-red))}.icon-disabled{color:rgb(var(--aui-color-n-6))}.belonged-cluster{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;padding-right:44px}.belonged-cluster .with-colon+span{margin-right:8px}.belonged-cluster aui-tag{position:absolute;display:inline-flex}.loading{display:flex;height:60px;align-items:center;justify-content:center}acl-resource-no-data{flex:1;margin:40px 0 80px}\n"] }]
    }], null, { grid: [{
            type: ViewChild,
            args: ['grid']
        }], context: [{
            type: Input
        }], data: [{
            type: Input
        }], data$: [], type: [{
            type: Input
        }], fields: [{
            type: Input
        }], actionTemplateRef: [{
            type: Input
        }], selectedUid: [{
            type: Input
        }], loading: [{
            type: Input
        }], selectItem: [{
            type: Output
        }], filter: [{
            type: Output
        }], reload: [{
            type: Output
        }] }); })();
//# sourceMappingURL=data:application/json;base64, 