import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, TemplateRef, ViewChild, } from '@angular/core';
import { K8sUtilService } from '../../../../core/services';
import { ResourceSelectorPopupService } from '../../internals/selector-popup/service';
import { ConfigurableField, } from './../../types';
import * as i0 from "@angular/core";
import * as i1 from "../../internals/selector-popup/service";
import * as i2 from "../../../../core/services";
const _c0 = ["popup"];
function NamespaceSelectorComponent_div_9_ng_container_8_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵtext(1, "(");
    i0.ɵɵelementStart(2, "span");
    i0.ɵɵtext(3);
    i0.ɵɵelementEnd();
    i0.ɵɵtext(4, ")");
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    const ctx_r3 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate1("Istio ", ctx_r3.value.istioVersion, "");
} }
function NamespaceSelectorComponent_div_9_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 7)(1, "span", 8);
    i0.ɵɵelement(2, "aui-icon", 13);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(3, "span", 4);
    i0.ɵɵtext(4);
    i0.ɵɵpipe(5, "translate");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(6, "span", 5);
    i0.ɵɵtext(7);
    i0.ɵɵtemplate(8, NamespaceSelectorComponent_div_9_ng_container_8_Template, 5, 1, "ng-container", 14);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵadvance(4);
    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 3, "service_mesh"), " ");
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate1("", ctx_r0.value.servicemesh, " ");
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", ctx_r0.value.istioVersion);
} }
function NamespaceSelectorComponent_ng_template_24_Template(rf, ctx) { if (rf & 1) {
    const _r5 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "acl-namespace-list", 15);
    i0.ɵɵlistener("selectItem", function NamespaceSelectorComponent_ng_template_24_Template_acl_namespace_list_selectItem_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.onSelect($event)); })("clusterChange", function NamespaceSelectorComponent_ng_template_24_Template_acl_namespace_list_clusterChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.clusterChange.emit($event)); })("projectChange", function NamespaceSelectorComponent_ng_template_24_Template_acl_namespace_list_projectChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.projectChange.emit($event)); });
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵproperty("context", "popup")("fields", ctx_r2.fields || ctx_r2.displayFields)("disableFn", ctx_r2.disableFn)("value", ctx_r2.value)("displayServiceMesh", ctx_r2.displayServiceMesh);
} }
const _c1 = function (a0) { return { "acl-resource-selector--actived": a0 }; };
export class NamespaceSelectorComponent {
    constructor(popupService, cdr, elementRef, k8sUtil) {
        this.popupService = popupService;
        this.cdr = cdr;
        this.elementRef = elementRef;
        this.k8sUtil = k8sUtil;
        this.displayServiceMesh = false;
        this.clusterChange = new EventEmitter();
        this.projectChange = new EventEmitter();
        this.valueChange = new EventEmitter();
        this.displayFields = [
            ConfigurableField.Cluster,
            ConfigurableField.Time,
        ];
        this.isActived = false;
        this.loading = true;
    }
    openPopup() {
        if (this.isActived) {
            this.closePopup();
        }
        else {
            this.isActived = true;
            this.popupRef = this.popupService.open({
                origin: this.elementRef,
                content: this.popupTemplate,
            });
            this.popupRef.afterClosed().subscribe(() => {
                this.isActived = false;
                this.cdr.markForCheck();
            });
        }
    }
    closePopup() {
        this.isActived = false;
        this.popupRef.close();
    }
    onSelect(item) {
        this.value = {
            project: this.k8sUtil.getLabel(item.__origin, 'project'),
            cluster: item.cluster,
            name: item.name,
            servicemesh: item.serviceMeshName,
        };
        this.valueChange.emit(this.value);
        this.closePopup();
    }
}
NamespaceSelectorComponent.ɵfac = function NamespaceSelectorComponent_Factory(t) { return new (t || NamespaceSelectorComponent)(i0.ɵɵdirectiveInject(i1.ResourceSelectorPopupService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i2.K8sUtilService)); };
NamespaceSelectorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NamespaceSelectorComponent, selectors: [["acl-namespace-selector"]], viewQuery: function NamespaceSelectorComponent_Query(rf, ctx) { if (rf & 1) {
        i0.ɵɵviewQuery(_c0, 7);
    } if (rf & 2) {
        let _t;
        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.popupTemplate = _t.first);
    } }, inputs: { disableFn: "disableFn", value: "value", fields: "fields", displayServiceMesh: "displayServiceMesh" }, outputs: { clusterChange: "clusterChange", projectChange: "projectChange", valueChange: "valueChange" }, decls: 26, vars: 16, consts: [[1, "acl-resource-selector", 3, "ngClass", "click"], [1, "acl-resource-selector__item", "project"], [1, "icon-wrapper", "tw-flex"], ["icon", "bicolor:project"], [1, "with-colon"], [1, "selected-name", "text-truncate"], ["class", "acl-resource-selector__item namespace", 4, "ngIf"], [1, "acl-resource-selector__item", "namespace"], [1, "icon-wrapper"], ["icon", "bicolor:namespace"], [1, "acl-resource-selector__arrow"], ["icon", "caret_down_s"], ["popup", ""], ["icon", "bicolor:service_mesh"], [4, "ngIf"], [3, "context", "fields", "disableFn", "value", "displayServiceMesh", "selectItem", "clusterChange", "projectChange"]], template: function NamespaceSelectorComponent_Template(rf, ctx) { if (rf & 1) {
        i0.ɵɵelementStart(0, "div", 0);
        i0.ɵɵlistener("click", function NamespaceSelectorComponent_Template_div_click_0_listener() { return ctx.openPopup(); });
        i0.ɵɵelementStart(1, "div", 1)(2, "span", 2);
        i0.ɵɵelement(3, "aui-icon", 3);
        i0.ɵɵelementEnd();
        i0.ɵɵelementStart(4, "span", 4);
        i0.ɵɵtext(5);
        i0.ɵɵpipe(6, "translate");
        i0.ɵɵelementEnd();
        i0.ɵɵelementStart(7, "span", 5);
        i0.ɵɵtext(8);
        i0.ɵɵelementEnd()();
        i0.ɵɵtemplate(9, NamespaceSelectorComponent_div_9_Template, 9, 5, "div", 6);
        i0.ɵɵelementStart(10, "div", 7)(11, "span", 8);
        i0.ɵɵelement(12, "aui-icon", 9);
        i0.ɵɵelementEnd();
        i0.ɵɵelementStart(13, "span", 4);
        i0.ɵɵtext(14);
        i0.ɵɵpipe(15, "translate");
        i0.ɵɵelementEnd();
        i0.ɵɵelementStart(16, "span", 5);
        i0.ɵɵtext(17);
        i0.ɵɵelementStart(18, "span", 4);
        i0.ɵɵtext(19);
        i0.ɵɵpipe(20, "translate");
        i0.ɵɵelementEnd();
        i0.ɵɵtext(21);
        i0.ɵɵelementEnd()();
        i0.ɵɵelementStart(22, "div", 10);
        i0.ɵɵelement(23, "aui-icon", 11);
        i0.ɵɵelementEnd()();
        i0.ɵɵtemplate(24, NamespaceSelectorComponent_ng_template_24_Template, 1, 5, "ng-template", null, 12, i0.ɵɵtemplateRefExtractor);
    } if (rf & 2) {
        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(14, _c1, ctx.isActived));
        i0.ɵɵadvance(5);
        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 8, "project"), " ");
        i0.ɵɵadvance(3);
        i0.ɵɵtextInterpolate(ctx.value.project);
        i0.ɵɵadvance(1);
        i0.ɵɵproperty("ngIf", ctx.displayServiceMesh);
        i0.ɵɵadvance(5);
        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(15, 10, "namespace"), " ");
        i0.ɵɵadvance(3);
        i0.ɵɵtextInterpolate1("", ctx.value.name, " (");
        i0.ɵɵadvance(2);
        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(20, 12, "cluster"), " ");
        i0.ɵɵadvance(2);
        i0.ɵɵtextInterpolate1("", ctx.value.cluster, ") ");
    } }, styles: ["[_nghost-%COMP%]{display:flex}[_nghost-%COMP%]  .icon-wrapper{position:relative;display:flex;justify-content:center;align-items:center;width:16px;height:16px;flex-shrink:0;font-size:var(--aui-icon-size-m)}:root   [_nghost-%COMP%]  .icon-wrapper{--bicolor-main: rgb(var(--aui-color-primary));--bicolor-secondary: rgb(var(--aui-color-p-3))}html[aui-theme-mode=light]   [_nghost-%COMP%]  .icon-wrapper{--bicolor-main: rgb(var(--aui-color-primary));--bicolor-secondary: rgb(var(--aui-color-p-3))}@media (prefers-color-scheme: dark){html[aui-theme-mode=system]   [_nghost-%COMP%]  .icon-wrapper{--bicolor-main: rgb(var(--aui-color-primary));--bicolor-secondary: rgb(var(--aui-color-p-3))}}html[aui-theme-mode=dark]   [_nghost-%COMP%]  .icon-wrapper{--bicolor-main: rgb(var(--aui-color-primary));--bicolor-secondary: rgb(var(--aui-color-p-3))}[_nghost-%COMP%]  .with-colon{display:inline-flex;word-break:keep-all;flex-shrink:0;font-weight:500}[_nghost-%COMP%]  .with-colon:after{content:\":\";margin-right:8px}[_nghost-%COMP%]  .text-truncate{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}[_nghost-%COMP%]  .acl-resource-selector{user-select:none;display:flex;color:var(--acl-page-header-title-color);cursor:pointer;padding:0 8px}[_nghost-%COMP%]  .acl-resource-selector .selected-name{color:var(--acl-page-header-text-color)}[_nghost-%COMP%]  .acl-resource-selector--actived, [_nghost-%COMP%]  .acl-resource-selector:hover{background-color:rgb(var(--aui-color-primary));color:#fff;border-radius:2px}:root   [_nghost-%COMP%]  .acl-resource-selector--actived .icon-wrapper, :root   [_nghost-%COMP%]  .acl-resource-selector:hover .icon-wrapper{--bicolor-main: white;--bicolor-secondary: rgb(var(--aui-color-p-4))}html[aui-theme-mode=light]   [_nghost-%COMP%]  .acl-resource-selector--actived .icon-wrapper, html[aui-theme-mode=light]   [_nghost-%COMP%]  .acl-resource-selector:hover .icon-wrapper{--bicolor-main: white;--bicolor-secondary: rgb(var(--aui-color-p-4))}@media (prefers-color-scheme: dark){html[aui-theme-mode=system]   [_nghost-%COMP%]  .acl-resource-selector--actived .icon-wrapper, html[aui-theme-mode=system]   [_nghost-%COMP%]  .acl-resource-selector:hover .icon-wrapper{--bicolor-main: white;--bicolor-secondary: #b3d7fc}}html[aui-theme-mode=dark]   [_nghost-%COMP%]  .acl-resource-selector--actived .icon-wrapper, html[aui-theme-mode=dark]   [_nghost-%COMP%]  .acl-resource-selector:hover .icon-wrapper{--bicolor-main: white;--bicolor-secondary: #b3d7fc}[_nghost-%COMP%]  .acl-resource-selector--actived .selected-name, [_nghost-%COMP%]  .acl-resource-selector:hover .selected-name{color:#fff}[_nghost-%COMP%]  .acl-resource-selector__item{margin-right:20px;height:32px;display:inline-flex;align-items:center;font-size:12px;max-width:270px}[_nghost-%COMP%]  .acl-resource-selector__item .icon-wrapper{margin-right:4px}[_nghost-%COMP%]  .acl-resource-selector__arrow{margin-left:-16px;align-items:center;display:inline-flex;width:16px;justify-content:center}"], changeDetection: 0 });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NamespaceSelectorComponent, [{
        type: Component,
        args: [{ selector: 'acl-namespace-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"acl-resource-selector\"\n  [ngClass]=\"{ 'acl-resource-selector--actived': isActived }\"\n  (click)=\"openPopup()\"\n>\n  <div class=\"acl-resource-selector__item project\">\n    <span class=\"icon-wrapper tw-flex\">\n      <aui-icon icon=\"bicolor:project\"></aui-icon>\n    </span>\n    <span class=\"with-colon\">\n      {{ 'project' | translate }}\n    </span>\n    <span class=\"selected-name text-truncate\">{{ value.project }}</span>\n  </div>\n  <div\n    *ngIf=\"displayServiceMesh\"\n    class=\"acl-resource-selector__item namespace\"\n  >\n    <span class=\"icon-wrapper\">\n      <aui-icon icon=\"bicolor:service_mesh\"></aui-icon>\n    </span>\n    <span class=\"with-colon\">\n      {{ 'service_mesh' | translate }}\n    </span>\n    <span class=\"selected-name text-truncate\"\n      >{{ value.servicemesh }}\n      <ng-container *ngIf=\"value.istioVersion\"\n        >(<span>Istio {{ value.istioVersion }}</span\n        >)</ng-container\n      ></span\n    >\n  </div>\n  <div class=\"acl-resource-selector__item namespace\">\n    <span class=\"icon-wrapper\">\n      <aui-icon icon=\"bicolor:namespace\"></aui-icon>\n    </span>\n    <span class=\"with-colon\">\n      {{ 'namespace' | translate }}\n    </span>\n    <span class=\"selected-name text-truncate\"\n      >{{ value.name }} (<span class=\"with-colon\">\n        {{ 'cluster' | translate }} </span\n      >{{ value.cluster }})\n    </span>\n  </div>\n  <div class=\"acl-resource-selector__arrow\">\n    <aui-icon icon=\"caret_down_s\"></aui-icon>\n  </div>\n</div>\n\n<ng-template #popup>\n  <acl-namespace-list\n    [context]=\"'popup'\"\n    [fields]=\"fields || displayFields\"\n    (selectItem)=\"onSelect($event)\"\n    [disableFn]=\"disableFn\"\n    [value]=\"value\"\n    [displayServiceMesh]=\"displayServiceMesh\"\n    (clusterChange)=\"clusterChange.emit($event)\"\n    (projectChange)=\"projectChange.emit($event)\"\n  ></acl-namespace-list>\n</ng-template>\n", styles: [":host{display:flex}:host::ng-deep .icon-wrapper{position:relative;display:flex;justify-content:center;align-items:center;width:16px;height:16px;flex-shrink:0;font-size:var(--aui-icon-size-m)}:root :host::ng-deep .icon-wrapper{--bicolor-main: rgb(var(--aui-color-primary));--bicolor-secondary: rgb(var(--aui-color-p-3))}html[aui-theme-mode=light] :host::ng-deep .icon-wrapper{--bicolor-main: rgb(var(--aui-color-primary));--bicolor-secondary: rgb(var(--aui-color-p-3))}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] :host::ng-deep .icon-wrapper{--bicolor-main: rgb(var(--aui-color-primary));--bicolor-secondary: rgb(var(--aui-color-p-3))}}html[aui-theme-mode=dark] :host::ng-deep .icon-wrapper{--bicolor-main: rgb(var(--aui-color-primary));--bicolor-secondary: rgb(var(--aui-color-p-3))}:host::ng-deep .with-colon{display:inline-flex;word-break:keep-all;flex-shrink:0;font-weight:500}:host::ng-deep .with-colon:after{content:\":\";margin-right:8px}:host::ng-deep .text-truncate{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host::ng-deep .acl-resource-selector{user-select:none;display:flex;color:var(--acl-page-header-title-color);cursor:pointer;padding:0 8px}:host::ng-deep .acl-resource-selector .selected-name{color:var(--acl-page-header-text-color)}:host::ng-deep .acl-resource-selector--actived,:host::ng-deep .acl-resource-selector:hover{background-color:rgb(var(--aui-color-primary));color:#fff;border-radius:2px}:root :host::ng-deep .acl-resource-selector--actived .icon-wrapper,:root :host::ng-deep .acl-resource-selector:hover .icon-wrapper{--bicolor-main: white;--bicolor-secondary: rgb(var(--aui-color-p-4))}html[aui-theme-mode=light] :host::ng-deep .acl-resource-selector--actived .icon-wrapper,html[aui-theme-mode=light] :host::ng-deep .acl-resource-selector:hover .icon-wrapper{--bicolor-main: white;--bicolor-secondary: rgb(var(--aui-color-p-4))}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] :host::ng-deep .acl-resource-selector--actived .icon-wrapper,html[aui-theme-mode=system] :host::ng-deep .acl-resource-selector:hover .icon-wrapper{--bicolor-main: white;--bicolor-secondary: #b3d7fc}}html[aui-theme-mode=dark] :host::ng-deep .acl-resource-selector--actived .icon-wrapper,html[aui-theme-mode=dark] :host::ng-deep .acl-resource-selector:hover .icon-wrapper{--bicolor-main: white;--bicolor-secondary: #b3d7fc}:host::ng-deep .acl-resource-selector--actived .selected-name,:host::ng-deep .acl-resource-selector:hover .selected-name{color:#fff}:host::ng-deep .acl-resource-selector__item{margin-right:20px;height:32px;display:inline-flex;align-items:center;font-size:12px;max-width:270px}:host::ng-deep .acl-resource-selector__item .icon-wrapper{margin-right:4px}:host::ng-deep .acl-resource-selector__arrow{margin-left:-16px;align-items:center;display:inline-flex;width:16px;justify-content:center}\n"] }]
    }], function () { return [{ type: i1.ResourceSelectorPopupService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i2.K8sUtilService }]; }, { popupTemplate: [{
            type: ViewChild,
            args: ['popup', { static: true }]
        }], disableFn: [{
            type: Input
        }], value: [{
            type: Input
        }], fields: [{
            type: Input
        }], displayServiceMesh: [{
            type: Input
        }], clusterChange: [{
            type: Output
        }], projectChange: [{
            type: Output
        }], valueChange: [{
            type: Output
        }] }); })();
//# sourceMappingURL=data:application/json;base64, 