/**
 * @packageDocumentation
 * @module common-layout
 */
import { ChangeDetectionStrategy, Component, Inject, Input, } from '@angular/core';
import { Router } from '@angular/router';
import { get } from 'lodash-es';
import { combineLatest, map, switchMap } from 'rxjs';
import { ID_TOKEN_KEY, publishRef } from '../../../../core/public-api';
import { K8sPermissionService } from '../../../../permission/k8s-permission.service';
import { ProductEntryName } from '../context.service';
import { CommonLayoutStoreService } from '../store.service';
import { ProductSelectService } from './service';
import * as i0 from "@angular/core";
import * as i1 from "../store.service";
import * as i2 from "@angular/router";
import * as i3 from "../../../../permission/k8s-permission.service";
import * as i4 from "./service";
function ProductSelectComponent_span_7_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 5);
    i0.ɵɵtext(1);
    i0.ɵɵpipe(2, "translate");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const productTitle_r5 = ctx.ngIf;
    i0.ɵɵadvance(1);
    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, productTitle_r5), " ");
} }
const _c0 = function (a0) { return { highlight: a0 }; };
function ProductSelectComponent_ng_template_13_ng_container_1_div_1_ng_container_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵelement(1, "aui-icon", 15);
    i0.ɵɵpipe(2, "pure");
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    const item_r10 = i0.ɵɵnextContext().$implicit;
    const ctx_r11 = i0.ɵɵnextContext(3);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(6, _c0, i0.ɵɵpipeBind3(2, 2, item_r10, ctx_r11.isProductActived, ctx_r11.current)))("icon", "bicolor:" + ctx_r11.PRODUCT_ICON_MAP[item_r10.metadata.name]);
} }
function ProductSelectComponent_ng_template_13_ng_container_1_div_1_ng_template_4_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "img", 16);
    i0.ɵɵpipe(1, "aclSafe");
    i0.ɵɵpipe(2, "aclImageHeader");
} if (rf & 2) {
    const item_r10 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵproperty("src", i0.ɵɵpipeBind2(1, 1, i0.ɵɵpipeBind1(2, 4, item_r10.spec.logo) || "images/product-default-logo.png", "url"), i0.ɵɵsanitizeUrl);
} }
const _c1 = function (a0) { return { "menu__item--actived": a0 }; };
const _c2 = function () { return {}; };
function ProductSelectComponent_ng_template_13_ng_container_1_div_1_Template(rf, ctx) { if (rf & 1) {
    const _r17 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 10);
    i0.ɵɵlistener("click", function ProductSelectComponent_ng_template_13_ng_container_1_div_1_Template_div_click_0_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r17); const item_r10 = restoredCtx.$implicit; const ctx_r16 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r16.navigateToProduct(item_r10, $event)); });
    i0.ɵɵpipe(1, "pure");
    i0.ɵɵelementStart(2, "div", 11);
    i0.ɵɵtemplate(3, ProductSelectComponent_ng_template_13_ng_container_1_div_1_ng_container_3_Template, 3, 8, "ng-container", 7);
    i0.ɵɵtemplate(4, ProductSelectComponent_ng_template_13_ng_container_1_div_1_ng_template_4_Template, 3, 6, "ng-template", null, 12, i0.ɵɵtemplateRefExtractor);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(6, "div", 13);
    i0.ɵɵtext(7);
    i0.ɵɵpipe(8, "translate");
    i0.ɵɵelementEnd();
    i0.ɵɵelement(9, "aui-icon", 14);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const item_r10 = ctx.$implicit;
    const _r12 = i0.ɵɵreference(5);
    const ctx_r9 = i0.ɵɵnextContext(3);
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(12, _c1, i0.ɵɵpipeBind3(1, 4, item_r10, ctx_r9.isProductActived, ctx_r9.current)));
    i0.ɵɵadvance(3);
    i0.ɵɵproperty("ngIf", item_r10.spec.packType !== "Integrated" && !item_r10.spec.logo)("ngIfElse", _r12);
    i0.ɵɵadvance(4);
    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind3(8, 8, item_r10.spec.displayName, i0.ɵɵpureFunction0(14, _c2), true), " ");
} }
function ProductSelectComponent_ng_template_13_ng_container_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵtemplate(1, ProductSelectComponent_ng_template_13_ng_container_1_div_1_Template, 10, 15, "div", 9);
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    const products_r8 = ctx.ngIf;
    const ctx_r6 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngForOf", products_r8)("ngForTrackBy", ctx_r6.trackFn);
} }
const _c3 = function (a0) { return { "portal--active": a0 }; };
function ProductSelectComponent_ng_template_13_div_3_Template(rf, ctx) { if (rf & 1) {
    const _r20 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 17)(1, "div", 18);
    i0.ɵɵlistener("click", function ProductSelectComponent_ng_template_13_div_3_Template_div_click_1_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r20); const portalMenu_r18 = restoredCtx.ngIf; const ctx_r19 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r19.navigateToPortal(portalMenu_r18, $event)); });
    i0.ɵɵelement(2, "aui-icon", 19);
    i0.ɵɵtext(3);
    i0.ɵɵpipe(4, "translate");
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const portalMenu_r18 = ctx.ngIf;
    const ctx_r7 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(6, _c3, ctx_r7.isPortal));
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind3(4, 2, portalMenu_r18.spec.displayName, i0.ɵɵpureFunction0(8, _c2), true), " ");
} }
function ProductSelectComponent_ng_template_13_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 6);
    i0.ɵɵtemplate(1, ProductSelectComponent_ng_template_13_ng_container_1_Template, 2, 2, "ng-container", 7);
    i0.ɵɵpipe(2, "async");
    i0.ɵɵelementEnd();
    i0.ɵɵtemplate(3, ProductSelectComponent_ng_template_13_div_3_Template, 5, 9, "div", 8);
    i0.ɵɵpipe(4, "async");
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext();
    const _r3 = i0.ɵɵreference(16);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(2, 3, ctx_r2.selectableProducts$))("ngIfElse", _r3);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(4, 5, ctx_r2.portalProduct$));
} }
function ProductSelectComponent_ng_template_15_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "acl-loading-mask", 20);
} if (rf & 2) {
    i0.ɵɵproperty("loading", true);
} }
const _c4 = function (a0) { return { "acl-product-select--disabled": a0 }; };
const ADMIN_VIEW_MAP = {
    'console-platform': {
        href: '/manage-platform',
        view: 'platformview',
    },
    'console-project': {
        href: '/home/project',
        view: 'projectview',
    },
    'console-security': {
        href: '/container-security/home',
        view: 'containersecurityview',
    },
};
const VIEW = {
    type: 'views',
    apiGroup: 'auth.alauda.io',
};
const PREFIX = 'console-';
export const PRODUCT_ICON_MAP = {
    'console-acp': 'acp',
    'console-asm': 'asm',
    'console-devops': 'devops',
    // console-e-aam prefix 为了兼容默认排序，等后续排序方案出来可以改成console-aam
    'console-e-aam': 'app_store',
    'console-security': 'bug_search',
    'console-platform': 'platform_management',
    'console-project': 'project_management',
    'console-dataservices': 'data_services',
    'console-cec': 'cloud_edge_collaboration',
};
export class ProductSelectComponent {
    constructor(store, idTokenKey, router, k8sPermission, productSelectService) {
        this.store = store;
        this.idTokenKey = idTokenKey;
        this.router = router;
        this.k8sPermission = k8sPermission;
        this.productSelectService = productSelectService;
        this.platformPath = '/console-platform';
        this.PRODUCT_ICON_MAP = PRODUCT_ICON_MAP;
        this.allProducts$ = combineLatest([
            this.productSelectService.reload$.pipe(switchMap(() => this.store.selectAllProducts())),
            this.k8sPermission.isAllowed({
                type: VIEW,
                name: Object.values(ADMIN_VIEW_MAP).map(item => item.view),
            }),
        ]).pipe(map(([products, views]) => {
            const keys = Object.keys(ADMIN_VIEW_MAP);
            const permissionMap = {};
            keys.forEach((key, index) => (permissionMap[key] = views[index]));
            return products.filter(p => keys.includes(p.metadata.name) ? permissionMap[p.metadata.name] : true);
        }), publishRef());
        this.selectableProducts$ = this.allProducts$.pipe(map(products => (products || []).filter(product => !this.isPortalProduct(product) &&
            (!product.status || product.status.hiddenOnPortal !== true))), publishRef());
        this.portalProduct$ = this.allProducts$.pipe(map(res => res.find(p => this.isPortalProduct(p))), publishRef());
        this.disabled$ = this.selectableProducts$.pipe(map(products => !products.length), publishRef());
        this.isPortal = false;
        this.trackFn = (_, item) => item.metadata.name;
        this.getProductTitle = (products, title, current) => title ||
            get((products || []).find(p => this.isProductActived(p, current)), ['spec', 'displayName']);
    }
    ngOnInit() {
        this.isPortal = this.router.url.startsWith('/portal');
    }
    jump(entrypoint, ssoEnabled, target = '_parent') {
        window.open(ssoEnabled
            ? `${entrypoint}?id_token=${window.localStorage.getItem(this.idTokenKey)}`
            : entrypoint, target);
    }
    navigateToPortal(portal, event) {
        event.stopPropagation();
        this.jump(portal.spec.entrypoint, false);
    }
    navigateToProduct(item, event) {
        event.stopPropagation();
        if (this.isProductActived(item, this.current)) {
            return;
        }
        if (item.spec.packType === 'AdminPage') {
            this.navigateToPlatform(item);
            return;
        }
        if (item.spec.packType === 'BuildIn') {
            this.jump(item.spec.entrypoint, false);
            return;
        }
        if (item.spec.packType === 'Integrated') {
            this.jump(item.spec.entrypoint, item.spec.ssoEnabled, '_blank');
        }
    }
    navigateToPlatform(item) {
        const href = ADMIN_VIEW_MAP[item.metadata.name].href;
        if (this.platformPath) {
            window.open(`${this.platformPath}${href}`, '_parent');
        }
        else {
            this.router.navigate([href]);
        }
    }
    isProductActived(item, current) {
        return (current &&
            item.metadata.name ===
                (current.startsWith(PREFIX) ? current : PREFIX + current));
    }
    isPortalProduct(item) {
        return item.metadata.name === 'console-portal';
    }
}
ProductSelectComponent.ɵfac = function ProductSelectComponent_Factory(t) { return new (t || ProductSelectComponent)(i0.ɵɵdirectiveInject(i1.CommonLayoutStoreService), i0.ɵɵdirectiveInject(ID_TOKEN_KEY), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(i3.K8sPermissionService), i0.ɵɵdirectiveInject(i4.ProductSelectService)); };
ProductSelectComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ProductSelectComponent, selectors: [["acl-product-select"]], inputs: { platformPath: "platformPath", current: "current", title: "title" }, decls: 17, vars: 36, consts: [["auiTooltipType", "empty", "auiTooltipTrigger", "click", "auiTooltipPosition", "bottom start", "auiTooltipClass", "aui-product-select-tooltip", 1, "acl-product-select", 3, "auiTooltip", "auiTooltipHideOnClick", "disabled", "title", "ngClass"], ["class", "acl-product-select__title", 4, "ngIf"], ["icon", "basic:menu_dot_s", "size", "16px", "auiTooltipPosition", "bottom start", 3, "auiTooltip", "auiTooltipDisabled"], ["menu", ""], ["loading", ""], [1, "acl-product-select__title"], [1, "menu"], [4, "ngIf", "ngIfElse"], ["class", "portal", 3, "ngClass", 4, "ngIf"], ["class", "menu__item", 3, "ngClass", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "menu__item", 3, "ngClass", "click"], [1, "menu__item-icon"], ["logo", ""], [1, "menu__item-info", "tw-line-clamp-2"], ["icon", "check_triangle_s", 1, "menu__item-selected-icon"], ["size", "50", 1, "acl-colorful-icon", 3, "ngClass", "icon"], [1, "default", 3, "src"], [1, "portal", 3, "ngClass"], [1, "portal__item", 3, "click"], ["icon", "basic:portal_home"], [2, "height", "148px", 3, "loading"]], template: function ProductSelectComponent_Template(rf, ctx) { if (rf & 1) {
        i0.ɵɵelementStart(0, "button", 0);
        i0.ɵɵpipe(1, "async");
        i0.ɵɵpipe(2, "async");
        i0.ɵɵpipe(3, "translate");
        i0.ɵɵpipe(4, "pure");
        i0.ɵɵpipe(5, "async");
        i0.ɵɵpipe(6, "async");
        i0.ɵɵtemplate(7, ProductSelectComponent_span_7_Template, 3, 3, "span", 1);
        i0.ɵɵpipe(8, "pure");
        i0.ɵɵpipe(9, "async");
        i0.ɵɵelement(10, "aui-icon", 2);
        i0.ɵɵpipe(11, "translate");
        i0.ɵɵpipe(12, "async");
        i0.ɵɵelementEnd();
        i0.ɵɵtemplate(13, ProductSelectComponent_ng_template_13_Template, 5, 7, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
        i0.ɵɵtemplate(15, ProductSelectComponent_ng_template_15_Template, 1, 1, "ng-template", null, 4, i0.ɵɵtemplateRefExtractor);
    } if (rf & 2) {
        const _r1 = i0.ɵɵreference(14);
        i0.ɵɵproperty("auiTooltip", _r1)("auiTooltipHideOnClick", true)("disabled", i0.ɵɵpipeBind1(1, 8, ctx.disabled$))("title", i0.ɵɵpipeBind1(2, 10, ctx.disabled$) ? "" : i0.ɵɵpipeBind1(3, 12, i0.ɵɵpipeBind4(4, 14, i0.ɵɵpipeBind1(5, 19, ctx.allProducts$), ctx.getProductTitle, ctx.title, ctx.current)))("ngClass", i0.ɵɵpureFunction1(34, _c4, i0.ɵɵpipeBind1(6, 21, ctx.disabled$)));
        i0.ɵɵadvance(7);
        i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind4(8, 23, i0.ɵɵpipeBind1(9, 28, ctx.allProducts$), ctx.getProductTitle, ctx.title, ctx.current));
        i0.ɵɵadvance(3);
        i0.ɵɵproperty("auiTooltip", i0.ɵɵpipeBind1(11, 30, "no_product_and_contact_admin"))("auiTooltipDisabled", !i0.ɵɵpipeBind1(12, 32, ctx.disabled$));
    } }, styles: [".aui-product-select-tooltip.aui-tooltip{margin-top:18px;background-color:rgb(var(--aui-color-n-10));padding:20px 20px 12px;border-radius:var(--aui-border-radius-l);max-width:840px}.portal[_ngcontent-%COMP%]{display:flex;justify-content:flex-end}.portal__item[_ngcontent-%COMP%]{display:flex;align-items:center;height:26px;padding:0 8px;font-size:var(--aui-font-size-l);font-weight:var(--aui-font-weight-bold);color:rgb(var(--aui-color-primary));border-radius:var(--aui-border-radius-m);cursor:pointer}.portal__item[_ngcontent-%COMP%]:hover{color:rgb(var(--aui-color-p-1))}.portal[_ngcontent-%COMP%]   aui-icon[_ngcontent-%COMP%]{font-size:var(--aui-icon-size-l);margin-right:8px}.acl-product-select[_ngcontent-%COMP%]{width:100%;min-height:32px;border-radius:2px;border:none;background:none;padding:4px 8px;cursor:pointer;outline:none;display:flex;align-items:center}.acl-product-select__title[_ngcontent-%COMP%]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.acl-product-select--disabled[_ngcontent-%COMP%]{opacity:.3;cursor:default}.acl-product-select[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{margin-right:8px;height:24px;line-height:24px;font-size:18px;font-weight:500;color:var(--acl-page-header-title-color);white-space:nowrap;word-break:keep-all}.acl-product-select[_ngcontent-%COMP%]   aui-icon[_ngcontent-%COMP%]{height:16px;color:rgb(var(--aui-color-n-4))}.acl-product-select.isActive[_ngcontent-%COMP%], .acl-product-select[_ngcontent-%COMP%]:not(.acl-product-select--disabled):hover{background-color:rgb(var(--aui-color-primary))}.acl-product-select.isActive[_ngcontent-%COMP%]   aui-icon[_ngcontent-%COMP%], .acl-product-select.isActive[_ngcontent-%COMP%]   span[_ngcontent-%COMP%], .acl-product-select[_ngcontent-%COMP%]:not(.acl-product-select--disabled):hover   aui-icon[_ngcontent-%COMP%], .acl-product-select[_ngcontent-%COMP%]:not(.acl-product-select--disabled):hover   span[_ngcontent-%COMP%]{color:#fff}  .acl-product-select__menu .aui-menu{padding:0;max-width:unset}.menu[_ngcontent-%COMP%]{display:flex;flex-wrap:wrap}.menu__item[_ngcontent-%COMP%]{width:120px;height:148px;display:flex;position:relative;flex-direction:column;border-radius:4px;padding:20px 8px 12px;margin-left:16px;margin-bottom:12px;align-items:center;cursor:pointer;background-color:rgb(var(--aui-color-n-9))}.menu__item[_ngcontent-%COMP%]:hover{border-color:rgb(var(--aui-color-primary));box-shadow:0 0 8px 0 rgba(var(--aui-color-primary),.5)}.menu__item[_ngcontent-%COMP%]:not(.menu__item--actived){position:relative}.menu__item[_ngcontent-%COMP%]:not(.menu__item--actived):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}.menu__item[_ngcontent-%COMP%]:not(.menu__item--actived).disabled{background-color:rgb(var(--aui-color-n-8));color:rgb(var(--aui-color-n-6));cursor:not-allowed}.menu__item[_ngcontent-%COMP%]:not(.menu__item--actived):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)}.menu__item[_ngcontent-%COMP%]:not(.menu__item--actived):not(.disabled):active:after{top:0;right:0;bottom:0;left:0;box-shadow:0 0 4px 0 rgba(var(--aui-color-primary),.5)}.menu__item[_ngcontent-%COMP%]:not(.menu__item--actived):hover:after{box-shadow:inset 0 0 0 4px rgb(var(--aui-color-n-9)),0 0 8px 0 rgba(var(--aui-color-primary),.5)!important}.menu__item[_ngcontent-%COMP%]:nth-child(6n+1){margin-left:0}.menu__item-icon[_ngcontent-%COMP%]{height:60px;width:60px;display:flex;justify-content:center;align-items:center;color:rgb(var(--aui-color-primary));margin-bottom:12px}.menu__item-icon[_ngcontent-%COMP%]   img[_ngcontent-%COMP%]{display:block;width:50px}.menu__item-icon[_ngcontent-%COMP%]   img.activated[_ngcontent-%COMP%]{display:none}.menu__item-info[_ngcontent-%COMP%]{min-width:0;height:44px;line-height:22px;font-size:16px;font-weight:500;color:rgb(var(--aui-color-n-1));text-align:center;overflow:hidden;overflow-wrap:anywhere}.menu__item-selected-icon[_ngcontent-%COMP%]{display:none;position:absolute;font-size:16px;overflow:hidden;border-bottom-right-radius:2px;color:#fff}.menu__item--actived[_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;position:relative}.menu__item--actived[_ngcontent-%COMP%]:hover{box-shadow:none}.menu__item--actived[_ngcontent-%COMP%]   .menu__item-selected-icon[_ngcontent-%COMP%]{display:inline-flex;right:1px;bottom:1px}.menu__item--actived[_ngcontent-%COMP%]   .menu__item-info[_ngcontent-%COMP%]{color:#fff;width:90px;height:40px}acl-loading-mask[_ngcontent-%COMP%]{height:148px;width:800px;display:flex;align-items:center;justify-content:center}"], changeDetection: 0 });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ProductSelectComponent, [{
        type: Component,
        args: [{ selector: 'acl-product-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  class=\"acl-product-select\"\n  [auiTooltip]=\"menu\"\n  auiTooltipType=\"empty\"\n  auiTooltipTrigger=\"click\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipClass=\"aui-product-select-tooltip\"\n  [auiTooltipHideOnClick]=\"true\"\n  [disabled]=\"disabled$ | async\"\n  [title]=\"\n    (disabled$ | async)\n      ? ''\n      : (allProducts$ | async | pure: getProductTitle:title:current | translate)\n  \"\n  [ngClass]=\"{ 'acl-product-select--disabled': disabled$ | async }\"\n>\n  <span\n    *ngIf=\"\n      allProducts$ | async | pure: getProductTitle:title:current as productTitle\n    \"\n    class=\"acl-product-select__title\"\n  >\n    {{ productTitle | translate }}\n  </span>\n  <aui-icon\n    icon=\"basic:menu_dot_s\"\n    size=\"16px\"\n    [auiTooltip]=\"'no_product_and_contact_admin' | translate\"\n    [auiTooltipDisabled]=\"!(disabled$ | async)\"\n    auiTooltipPosition=\"bottom start\"\n  ></aui-icon>\n</button>\n<ng-template #menu>\n  <div class=\"menu\">\n    <ng-container *ngIf=\"selectableProducts$ | async as products; else loading\">\n      <div\n        class=\"menu__item\"\n        [ngClass]=\"{\n          'menu__item--actived': item | pure: isProductActived:current\n        }\"\n        *ngFor=\"let item of products; trackBy: trackFn\"\n        (click)=\"navigateToProduct(item, $event)\"\n      >\n        <div class=\"menu__item-icon\">\n          <ng-container\n            *ngIf=\"\n              item.spec.packType !== 'Integrated' && !item.spec.logo;\n              else logo\n            \"\n          >\n            <aui-icon\n              class=\"acl-colorful-icon\"\n              [ngClass]=\"{\n                highlight: item | pure: isProductActived:current\n              }\"\n              size=\"50\"\n              [icon]=\"'bicolor:' + PRODUCT_ICON_MAP[item.metadata.name]\"\n            ></aui-icon>\n          </ng-container>\n          <ng-template #logo>\n            <img\n              [src]=\"\n                (item.spec.logo | aclImageHeader) ||\n                  'images/product-default-logo.png' | aclSafe: 'url'\n              \"\n              class=\"default\"\n            />\n          </ng-template>\n        </div>\n        <div class=\"menu__item-info tw-line-clamp-2\">\n          {{ item.spec.displayName | translate: {}:true }}\n        </div>\n        <aui-icon\n          icon=\"check_triangle_s\"\n          class=\"menu__item-selected-icon\"\n        ></aui-icon>\n      </div>\n    </ng-container>\n  </div>\n  <div\n    *ngIf=\"portalProduct$ | async as portalMenu\"\n    class=\"portal\"\n    [ngClass]=\"{ 'portal--active': isPortal }\"\n  >\n    <div\n      class=\"portal__item\"\n      (click)=\"navigateToPortal(portalMenu, $event)\"\n    >\n      <aui-icon icon=\"basic:portal_home\"></aui-icon>\n      {{ portalMenu.spec.displayName | translate: {}:true }}\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #loading>\n  <acl-loading-mask\n    style=\"height: 148px\"\n    [loading]=\"true\"\n  ></acl-loading-mask>\n</ng-template>\n", styles: ["::ng-deep .aui-product-select-tooltip.aui-tooltip{margin-top:18px;background-color:rgb(var(--aui-color-n-10));padding:20px 20px 12px;border-radius:var(--aui-border-radius-l);max-width:840px}.portal{display:flex;justify-content:flex-end}.portal__item{display:flex;align-items:center;height:26px;padding:0 8px;font-size:var(--aui-font-size-l);font-weight:var(--aui-font-weight-bold);color:rgb(var(--aui-color-primary));border-radius:var(--aui-border-radius-m);cursor:pointer}.portal__item:hover{color:rgb(var(--aui-color-p-1))}.portal aui-icon{font-size:var(--aui-icon-size-l);margin-right:8px}.acl-product-select{width:100%;min-height:32px;border-radius:2px;border:none;background:none;padding:4px 8px;cursor:pointer;outline:none;display:flex;align-items:center}.acl-product-select__title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.acl-product-select--disabled{opacity:.3;cursor:default}.acl-product-select span{margin-right:8px;height:24px;line-height:24px;font-size:18px;font-weight:500;color:var(--acl-page-header-title-color);white-space:nowrap;word-break:keep-all}.acl-product-select aui-icon{height:16px;color:rgb(var(--aui-color-n-4))}.acl-product-select.isActive,.acl-product-select:not(.acl-product-select--disabled):hover{background-color:rgb(var(--aui-color-primary))}.acl-product-select.isActive aui-icon,.acl-product-select.isActive span,.acl-product-select:not(.acl-product-select--disabled):hover aui-icon,.acl-product-select:not(.acl-product-select--disabled):hover span{color:#fff}::ng-deep .acl-product-select__menu .aui-menu{padding:0;max-width:unset}.menu{display:flex;flex-wrap:wrap}.menu__item{width:120px;height:148px;display:flex;position:relative;flex-direction:column;border-radius:4px;padding:20px 8px 12px;margin-left:16px;margin-bottom:12px;align-items:center;cursor:pointer;background-color:rgb(var(--aui-color-n-9))}.menu__item:hover{border-color:rgb(var(--aui-color-primary));box-shadow:0 0 8px 0 rgba(var(--aui-color-primary),.5)}.menu__item:not(.menu__item--actived){position:relative}.menu__item:not(.menu__item--actived):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}.menu__item:not(.menu__item--actived).disabled{background-color:rgb(var(--aui-color-n-8));color:rgb(var(--aui-color-n-6));cursor:not-allowed}.menu__item:not(.menu__item--actived):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)}.menu__item:not(.menu__item--actived):not(.disabled):active:after{top:0;right:0;bottom:0;left:0;box-shadow:0 0 4px 0 rgba(var(--aui-color-primary),.5)}.menu__item:not(.menu__item--actived):hover:after{box-shadow:inset 0 0 0 4px rgb(var(--aui-color-n-9)),0 0 8px 0 rgba(var(--aui-color-primary),.5)!important}.menu__item:nth-child(6n+1){margin-left:0}.menu__item-icon{height:60px;width:60px;display:flex;justify-content:center;align-items:center;color:rgb(var(--aui-color-primary));margin-bottom:12px}.menu__item-icon img{display:block;width:50px}.menu__item-icon img.activated{display:none}.menu__item-info{min-width:0;height:44px;line-height:22px;font-size:16px;font-weight:500;color:rgb(var(--aui-color-n-1));text-align:center;overflow:hidden;overflow-wrap:anywhere}.menu__item-selected-icon{display:none;position:absolute;font-size:16px;overflow:hidden;border-bottom-right-radius:2px;color:#fff}.menu__item--actived{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;position:relative}.menu__item--actived:hover{box-shadow:none}.menu__item--actived .menu__item-selected-icon{display:inline-flex;right:1px;bottom:1px}.menu__item--actived .menu__item-info{color:#fff;width:90px;height:40px}acl-loading-mask{height:148px;width:800px;display:flex;align-items:center;justify-content:center}\n"] }]
    }], function () { return [{ type: i1.CommonLayoutStoreService }, { type: undefined, decorators: [{
                type: Inject,
                args: [ID_TOKEN_KEY]
            }] }, { type: i2.Router }, { type: i3.K8sPermissionService }, { type: i4.ProductSelectService }]; }, { platformPath: [{
            type: Input
        }], current: [{
            type: Input
        }], title: [{
            type: Input
        }] }); })();
//# sourceMappingURL=data:application/json;base64, 