import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, TemplateRef, ViewChild, } from '@angular/core';
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";
const _c0 = ["popup"];
function ClusterSelectorComponent_ng_template_11_Template(rf, ctx) { if (rf & 1) {
    const _r3 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "acl-cluster-list", 9);
    i0.ɵɵlistener("selectItem", function ClusterSelectorComponent_ng_template_11_Template_acl_cluster_list_selectItem_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onSelect($event)); });
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵproperty("context", "popup")("fields", ctx_r1.fields || ctx_r1.displayFields)("value", ctx_r1.value);
} }
const _c1 = function (a0) { return { "acl-resource-selector--actived": a0 }; };
export class ClusterSelectorComponent {
    constructor(popupService, cdr, elementRef) {
        this.popupService = popupService;
        this.cdr = cdr;
        this.elementRef = elementRef;
        this.valueChange = new EventEmitter();
        this.displayFields = [
            ConfigurableField.Status,
            ConfigurableField.Time,
        ];
        this.isActived = false;
    }
    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 = item.name;
        this.valueChange.emit(item.name);
        this.closePopup();
    }
}
ClusterSelectorComponent.ɵfac = function ClusterSelectorComponent_Factory(t) { return new (t || ClusterSelectorComponent)(i0.ɵɵdirectiveInject(i1.ResourceSelectorPopupService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ElementRef)); };
ClusterSelectorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ClusterSelectorComponent, selectors: [["acl-cluster-selector"]], viewQuery: function ClusterSelectorComponent_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: { value: "value", fields: "fields" }, outputs: { valueChange: "valueChange" }, decls: 13, vars: 7, consts: [[1, "acl-resource-selector", 3, "ngClass", "click"], [1, "acl-resource-selector__item", "project"], [1, "icon-wrapper", "tw-flex"], ["icon", "bicolor:server"], [1, "with-colon"], [1, "selected-name", "text-truncate"], [1, "acl-resource-selector__arrow"], ["icon", "caret_down_s"], ["popup", ""], [3, "context", "fields", "value", "selectItem"]], template: function ClusterSelectorComponent_Template(rf, ctx) { if (rf & 1) {
        i0.ɵɵelementStart(0, "div", 0);
        i0.ɵɵlistener("click", function ClusterSelectorComponent_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.ɵɵelementStart(9, "div", 6);
        i0.ɵɵelement(10, "aui-icon", 7);
        i0.ɵɵelementEnd()();
        i0.ɵɵtemplate(11, ClusterSelectorComponent_ng_template_11_Template, 1, 3, "ng-template", null, 8, i0.ɵɵtemplateRefExtractor);
    } if (rf & 2) {
        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(5, _c1, ctx.isActived));
        i0.ɵɵadvance(5);
        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 3, "cluster"), " ");
        i0.ɵɵadvance(3);
        i0.ɵɵtextInterpolate(ctx.value);
    } }, 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(ClusterSelectorComponent, [{
        type: Component,
        args: [{ selector: 'acl-cluster-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:server\"></aui-icon>\n    </span>\n    <span class=\"with-colon\">\n      {{ 'cluster' | translate }}\n    </span>\n    <span class=\"selected-name text-truncate\">{{ value }}</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-cluster-list\n    [context]=\"'popup'\"\n    [fields]=\"fields || displayFields\"\n    (selectItem)=\"onSelect($event)\"\n    [value]=\"value\"\n  ></acl-cluster-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 }]; }, { popupTemplate: [{
            type: ViewChild,
            args: ['popup', { static: true }]
        }], value: [{
            type: Input
        }], fields: [{
            type: Input
        }], valueChange: [{
            type: Output
        }] }); })();
//# sourceMappingURL=data:application/json;base64, 