@gravitee/ui-policy-studio-angular 9.6.0-angular-16-c8d84dc → 9.6.0-angular-16-9270e16

package/esm2022/lib/components/flow-details/gio-ps-flow-details.component.mjs

@@ -103,11 +103,11 @@ export class GioPolicyStudioDetailsComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GioPolicyStudioDetailsComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GioPolicyStudioDetailsComponent, selector: "gio-ps-flow-details", inputs: { loading: "loading", apiType: "apiType", flow: "flow", entrypointsInfo: "entrypointsInfo", endpointsInfo: "endpointsInfo", policies: "policies", trialUrl: "trialUrl" }, outputs: { flowChange: "flowChange", deleteFlow: "deleteFlow" }, usesOnChanges: true, ngImport: i0, template: "<!--\n\n    Copyright (C) 2023 The Gravitee team (http://gravitee.io)\n    \n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n    \n            http://www.apache.org/licenses/LICENSE-2.0\n    \n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n\n<ng-container *ngIf=\"!loading; then flowDetailsTpl; else loadingTpl\"></ng-container>\n\n<ng-template #flowDetailsTpl>\n  <ng-container *ngIf=\"flow; else emptyFlows\">\n    <div class=\"header\">\n      <div class=\"header__label\">Flow details</div>\n      <div class=\"header__configBtn\">\n        <button class=\"header__configBtn__edit\" mat-stroked-button (click)=\"onEditFlow()\">\n          <mat-icon svgIcon=\"gio:edit-pencil\"></mat-icon>\n        </button>\n        <button class=\"header__configBtn__delete\" mat-stroked-button (click)=\"onDeleteFlow()\">\n          <mat-icon svgIcon=\"gio:trash\"></mat-icon>\n        </button>\n      </div>\n    </div>\n    <gio-ps-flow-details-info-bar class=\"infoBar\" [flow]=\"flow\" [entrypointsInfo]=\"entrypointsInfo\"></gio-ps-flow-details-info-bar>\n\n    <div class=\"content\">\n      <mat-tab-group *ngIf=\"apiType === 'MESSAGE'\" class=\"content__tabs\" dynamicHeight>\n        <mat-tab label=\"Initial connection\" bodyClass=\"content__tabs__body\">\n          <gio-ps-flow-details-phase\n            class=\"content__phase\"\n            name=\"Request phase\"\n            description=\"Policies will be applied during the connection establishment\"\n            [startConnector]=\"messageFlowEntrypointsInfo\"\n            [endConnector]=\"endpointsInfo\"\n            [steps]=\"flow.request ?? []\"\n            [apiType]=\"apiType\"\n            [policies]=\"policies\"\n            [trialUrl]=\"trialUrl\"\n            policyExecutionPhase=\"REQUEST\"\n            (stepsChange)=\"onStepsChange('request', $event)\"\n          ></gio-ps-flow-details-phase>\n          <gio-ps-flow-details-phase\n            class=\"content__phase\"\n            name=\"Response phase\"\n            description=\"Policies will be applied to the response from the initial connection\"\n            [startConnector]=\"endpointsInfo\"\n            [endConnector]=\"messageFlowEntrypointsInfo\"\n            [steps]=\"flow.response ?? []\"\n            [apiType]=\"apiType\"\n            [policies]=\"policies\"\n            [trialUrl]=\"trialUrl\"\n            policyExecutionPhase=\"RESPONSE\"\n            (stepsChange)=\"onStepsChange('response', $event)\"\n          ></gio-ps-flow-details-phase>\n        </mat-tab>\n        <mat-tab label=\"Event messages\" bodyClass=\"content__tabs__body\">\n          <gio-ps-flow-details-phase\n            class=\"content__phase\"\n            name=\"Publish phase\"\n            description=\"Policies will be applied on messages sent to the endpoint\"\n            [startConnector]=\"messageFlowEntrypointsInfo | gioFilterConnectorsByMode : 'PUBLISH' : operations\"\n            [endConnector]=\"endpointsInfo | gioFilterConnectorsByMode : 'PUBLISH' : operations\"\n            [steps]=\"flow.publish ?? []\"\n            [apiType]=\"apiType\"\n            [policies]=\"policies\"\n            [trialUrl]=\"trialUrl\"\n            policyExecutionPhase=\"MESSAGE_REQUEST\"\n            (stepsChange)=\"onStepsChange('publish', $event)\"\n          ></gio-ps-flow-details-phase>\n          <gio-ps-flow-details-phase\n            class=\"content__phase\"\n            name=\"Subscribe phase\"\n            description=\"Policies will be applied on messages received by the entrypoint\"\n            [startConnector]=\"endpointsInfo | gioFilterConnectorsByMode : 'SUBSCRIBE' : operations\"\n            [endConnector]=\"messageFlowEntrypointsInfo | gioFilterConnectorsByMode : 'SUBSCRIBE' : operations\"\n            [steps]=\"flow.subscribe ?? []\"\n            [apiType]=\"apiType\"\n            [policies]=\"policies\"\n            [trialUrl]=\"trialUrl\"\n            policyExecutionPhase=\"MESSAGE_RESPONSE\"\n            (stepsChange)=\"onStepsChange('subscribe', $event)\"\n          ></gio-ps-flow-details-phase>\n        </mat-tab>\n      </mat-tab-group>\n\n      <ng-container *ngIf=\"apiType === 'PROXY'\">\n        <gio-ps-flow-details-phase\n          class=\"content__phase\"\n          name=\"Request phase\"\n          description=\"Policies will be applied during the connection establishment\"\n          [startConnector]=\"entrypointsInfo | gioFilterConnectorsByMode : 'REQUEST_RESPONSE'\"\n          [endConnector]=\"endpointsInfo | gioFilterConnectorsByMode : 'REQUEST_RESPONSE'\"\n          [steps]=\"flow.request ?? []\"\n          [apiType]=\"apiType\"\n          [policies]=\"policies\"\n          [trialUrl]=\"trialUrl\"\n          policyExecutionPhase=\"REQUEST\"\n          (stepsChange)=\"onStepsChange('request', $event)\"\n        ></gio-ps-flow-details-phase>\n        <gio-ps-flow-details-phase\n          class=\"content__phase\"\n          name=\"Response phase\"\n          description=\"Policies will be applied during the connection termination\"\n          [startConnector]=\"endpointsInfo | gioFilterConnectorsByMode : 'REQUEST_RESPONSE'\"\n          [endConnector]=\"entrypointsInfo | gioFilterConnectorsByMode : 'REQUEST_RESPONSE'\"\n          [steps]=\"flow.response ?? []\"\n          [apiType]=\"apiType\"\n          [policies]=\"policies\"\n          [trialUrl]=\"trialUrl\"\n          policyExecutionPhase=\"RESPONSE\"\n          (stepsChange)=\"onStepsChange('response', $event)\"\n        ></gio-ps-flow-details-phase>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <ng-template #emptyFlows>\n    <div class=\"emptyFlows\">\n      <h2>No flows yet</h2>\n      <p class=\"mat-body-1\">Flows allow you to customize the behavior of your API event phases through configurable policies</p>\n    </div>\n  </ng-template>\n</ng-template>\n\n<ng-template #loadingTpl>\n  <div class=\"header loading\">\n    <div class=\"header__label\">Flow details</div>\n    <div class=\"header__configBtn\">\n      <button class=\"header__configBtn__edit\" mat-stroked-button disabled>\n        <mat-icon svgIcon=\"gio:edit-pencil\"></mat-icon>\n      </button>\n      <button class=\"header__configBtn__delete\" mat-stroked-button disabled>\n        <mat-icon svgIcon=\"gio:trash\"></mat-icon>\n      </button>\n    </div>\n  </div>\n  <gio-ps-flow-details-info-bar class=\"infoBar loading\"></gio-ps-flow-details-info-bar>\n  <div class=\"content loading\">\n    <gio-loader></gio-loader>\n  </div>\n</ng-template>\n", styles: [".gio-top-bar-menu .gio-badge-accent{background-color:var(--gio-oem-palette--active, #e7e2fb);color:var(--gio-oem-palette--active-contrast, #100c27)}:host{display:flex;height:100%;flex-direction:column}.emptyFlows{display:flex;max-width:500px;height:100%;flex-direction:column;justify-content:center;margin:auto;text-align:center}.header{display:flex;align-items:center;padding:16px;border-bottom:1px solid #d3d5dc}.header__label{font-size:16px;font-weight:500;letter-spacing:.4px;line-height:24px;display:flex;flex:1 1 auto;align-items:center;margin-bottom:0;gap:8px}.header__configBtn{display:flex;align-items:center;margin-left:8px;gap:8px}.infoBar{border-bottom:1px solid #d3d5dc}.infoBar.loading{min-height:52px}.content{overflow:auto;flex:1 1 auto;background-color:#f7f8fd}.content__tabs{min-height:100%;min-height:calc(100% - 64px)}.content__phase{margin:16px 16px 0}.content.loading{display:flex}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.GioLoaderComponent, selector: "gio-loader" }, { kind: "component", type: i7.GioPolicyStudioDetailsInfoBarComponent, selector: "gio-ps-flow-details-info-bar", inputs: ["flow", "entrypointsInfo"] }, { kind: "component", type: i8.GioPolicyStudioDetailsPhaseComponent, selector: "gio-ps-flow-details-phase", inputs: ["steps", "name", "description", "startConnector", "endConnector", "apiType", "policies", "policyExecutionPhase", "trialUrl"], outputs: ["stepsChange"] }, { kind: "pipe", type: i9.GioFilterConnectorsByModePipe, name: "gioFilterConnectorsByMode" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GioPolicyStudioDetailsComponent, selector: "gio-ps-flow-details", inputs: { loading: "loading", apiType: "apiType", flow: "flow", entrypointsInfo: "entrypointsInfo", endpointsInfo: "endpointsInfo", policies: "policies", trialUrl: "trialUrl" }, outputs: { flowChange: "flowChange", deleteFlow: "deleteFlow" }, usesOnChanges: true, ngImport: i0, template: "<!--\n\n    Copyright (C) 2023 The Gravitee team (http://gravitee.io)\n    \n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n    \n            http://www.apache.org/licenses/LICENSE-2.0\n    \n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n\n<ng-container *ngIf=\"!loading; then flowDetailsTpl; else loadingTpl\"></ng-container>\n\n<ng-template #flowDetailsTpl>\n  <ng-container *ngIf=\"flow; else emptyFlows\">\n    <div class=\"header\">\n      <div class=\"header__label\">Flow details</div>\n      <div class=\"header__configBtn\">\n        <button class=\"header__configBtn__edit\" mat-stroked-button (click)=\"onEditFlow()\">\n          <mat-icon svgIcon=\"gio:edit-pencil\"></mat-icon>\n        </button>\n        <button class=\"header__configBtn__delete\" mat-stroked-button (click)=\"onDeleteFlow()\">\n          <mat-icon svgIcon=\"gio:trash\"></mat-icon>\n        </button>\n      </div>\n    </div>\n    <gio-ps-flow-details-info-bar class=\"infoBar\" [flow]=\"flow\" [entrypointsInfo]=\"entrypointsInfo\"></gio-ps-flow-details-info-bar>\n\n    <div class=\"content\">\n      <mat-tab-group *ngIf=\"apiType === 'MESSAGE'\" class=\"content__tabs\" dynamicHeight>\n        <mat-tab label=\"Initial connection\" bodyClass=\"content__tabs__body\">\n          <gio-ps-flow-details-phase\n            class=\"content__phase\"\n            name=\"Request phase\"\n            description=\"Policies will be applied during the connection establishment\"\n            [startConnector]=\"messageFlowEntrypointsInfo\"\n            [endConnector]=\"endpointsInfo\"\n            [steps]=\"flow.request ?? []\"\n            [apiType]=\"apiType\"\n            [policies]=\"policies\"\n            [trialUrl]=\"trialUrl\"\n            policyExecutionPhase=\"REQUEST\"\n            (stepsChange)=\"onStepsChange('request', $event)\"\n          ></gio-ps-flow-details-phase>\n          <gio-ps-flow-details-phase\n            class=\"content__phase\"\n            name=\"Response phase\"\n            description=\"Policies will be applied to the response from the initial connection\"\n            [startConnector]=\"endpointsInfo\"\n            [endConnector]=\"messageFlowEntrypointsInfo\"\n            [steps]=\"flow.response ?? []\"\n            [apiType]=\"apiType\"\n            [policies]=\"policies\"\n            [trialUrl]=\"trialUrl\"\n            policyExecutionPhase=\"RESPONSE\"\n            (stepsChange)=\"onStepsChange('response', $event)\"\n          ></gio-ps-flow-details-phase>\n        </mat-tab>\n        <mat-tab label=\"Event messages\" bodyClass=\"content__tabs__body\">\n          <gio-ps-flow-details-phase\n            class=\"content__phase\"\n            name=\"Publish phase\"\n            description=\"Policies will be applied on messages sent to the endpoint\"\n            [startConnector]=\"messageFlowEntrypointsInfo | gioFilterConnectorsByMode : 'PUBLISH' : operations\"\n            [endConnector]=\"endpointsInfo | gioFilterConnectorsByMode : 'PUBLISH' : operations\"\n            [steps]=\"flow.publish ?? []\"\n            [apiType]=\"apiType\"\n            [policies]=\"policies\"\n            [trialUrl]=\"trialUrl\"\n            policyExecutionPhase=\"MESSAGE_REQUEST\"\n            (stepsChange)=\"onStepsChange('publish', $event)\"\n          ></gio-ps-flow-details-phase>\n          <gio-ps-flow-details-phase\n            class=\"content__phase\"\n            name=\"Subscribe phase\"\n            description=\"Policies will be applied on messages received by the entrypoint\"\n            [startConnector]=\"endpointsInfo | gioFilterConnectorsByMode : 'SUBSCRIBE' : operations\"\n            [endConnector]=\"messageFlowEntrypointsInfo | gioFilterConnectorsByMode : 'SUBSCRIBE' : operations\"\n            [steps]=\"flow.subscribe ?? []\"\n            [apiType]=\"apiType\"\n            [policies]=\"policies\"\n            [trialUrl]=\"trialUrl\"\n            policyExecutionPhase=\"MESSAGE_RESPONSE\"\n            (stepsChange)=\"onStepsChange('subscribe', $event)\"\n          ></gio-ps-flow-details-phase>\n        </mat-tab>\n      </mat-tab-group>\n\n      <ng-container *ngIf=\"apiType === 'PROXY'\">\n        <gio-ps-flow-details-phase\n          class=\"content__phase\"\n          name=\"Request phase\"\n          description=\"Policies will be applied during the connection establishment\"\n          [startConnector]=\"entrypointsInfo | gioFilterConnectorsByMode : 'REQUEST_RESPONSE'\"\n          [endConnector]=\"endpointsInfo | gioFilterConnectorsByMode : 'REQUEST_RESPONSE'\"\n          [steps]=\"flow.request ?? []\"\n          [apiType]=\"apiType\"\n          [policies]=\"policies\"\n          [trialUrl]=\"trialUrl\"\n          policyExecutionPhase=\"REQUEST\"\n          (stepsChange)=\"onStepsChange('request', $event)\"\n        ></gio-ps-flow-details-phase>\n        <gio-ps-flow-details-phase\n          class=\"content__phase\"\n          name=\"Response phase\"\n          description=\"Policies will be applied during the connection termination\"\n          [startConnector]=\"endpointsInfo | gioFilterConnectorsByMode : 'REQUEST_RESPONSE'\"\n          [endConnector]=\"entrypointsInfo | gioFilterConnectorsByMode : 'REQUEST_RESPONSE'\"\n          [steps]=\"flow.response ?? []\"\n          [apiType]=\"apiType\"\n          [policies]=\"policies\"\n          [trialUrl]=\"trialUrl\"\n          policyExecutionPhase=\"RESPONSE\"\n          (stepsChange)=\"onStepsChange('response', $event)\"\n        ></gio-ps-flow-details-phase>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <ng-template #emptyFlows>\n    <div class=\"emptyFlows\">\n      <h2>No flows yet</h2>\n      <p class=\"mat-body-1\">Flows allow you to customize the behavior of your API event phases through configurable policies</p>\n    </div>\n  </ng-template>\n</ng-template>\n\n<ng-template #loadingTpl>\n  <div class=\"header loading\">\n    <div class=\"header__label\">Flow details</div>\n    <div class=\"header__configBtn\">\n      <button class=\"header__configBtn__edit\" mat-stroked-button disabled>\n        <mat-icon svgIcon=\"gio:edit-pencil\"></mat-icon>\n      </button>\n      <button class=\"header__configBtn__delete\" mat-stroked-button disabled>\n        <mat-icon svgIcon=\"gio:trash\"></mat-icon>\n      </button>\n    </div>\n  </div>\n  <gio-ps-flow-details-info-bar class=\"infoBar loading\"></gio-ps-flow-details-info-bar>\n  <div class=\"content loading\">\n    <gio-loader></gio-loader>\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gio-top-bar-menu .gio-badge-accent{background-color:var(--gio-oem-palette--active, #e7e2fb);color:var(--gio-oem-palette--active-contrast, #100c27)}:host{display:flex;height:100%;flex-direction:column}.emptyFlows{display:flex;max-width:500px;height:100%;flex-direction:column;justify-content:center;margin:auto;text-align:center}.header{display:flex;align-items:center;padding:16px;border-bottom:1px solid #d3d5dc}.header__label{font-size:16px;font-weight:500;letter-spacing:.4px;line-height:24px;display:flex;flex:1 1 auto;align-items:center;margin-bottom:0;gap:8px}.header__configBtn{display:flex;align-items:center;margin-left:8px;gap:8px}.infoBar{border-bottom:1px solid #d3d5dc}.infoBar.loading{min-height:52px}.content{overflow:auto;flex:1 1 auto;background-color:#f7f8fd}.content__tabs{min-height:100%;min-height:calc(100% - 64px)}.content__phase{margin:16px 16px 0}.content.loading{display:flex}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.GioLoaderComponent, selector: "gio-loader" }, { kind: "component", type: i7.GioPolicyStudioDetailsInfoBarComponent, selector: "gio-ps-flow-details-info-bar", inputs: ["flow", "entrypointsInfo"] }, { kind: "component", type: i8.GioPolicyStudioDetailsPhaseComponent, selector: "gio-ps-flow-details-phase", inputs: ["steps", "name", "description", "startConnector", "endConnector", "apiType", "policies", "policyExecutionPhase", "trialUrl"], outputs: ["stepsChange"] }, { kind: "pipe", type: i9.GioFilterConnectorsByModePipe, name: "gioFilterConnectorsByMode" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GioPolicyStudioDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gio-ps-flow-details', template: "<!--\n\n    Copyright (C) 2023 The Gravitee team (http://gravitee.io)\n    \n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n    \n            http://www.apache.org/licenses/LICENSE-2.0\n    \n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n\n<ng-container *ngIf=\"!loading; then flowDetailsTpl; else loadingTpl\"></ng-container>\n\n<ng-template #flowDetailsTpl>\n  <ng-container *ngIf=\"flow; else emptyFlows\">\n    <div class=\"header\">\n      <div class=\"header__label\">Flow details</div>\n      <div class=\"header__configBtn\">\n        <button class=\"header__configBtn__edit\" mat-stroked-button (click)=\"onEditFlow()\">\n          <mat-icon svgIcon=\"gio:edit-pencil\"></mat-icon>\n        </button>\n        <button class=\"header__configBtn__delete\" mat-stroked-button (click)=\"onDeleteFlow()\">\n          <mat-icon svgIcon=\"gio:trash\"></mat-icon>\n        </button>\n      </div>\n    </div>\n    <gio-ps-flow-details-info-bar class=\"infoBar\" [flow]=\"flow\" [entrypointsInfo]=\"entrypointsInfo\"></gio-ps-flow-details-info-bar>\n\n    <div class=\"content\">\n      <mat-tab-group *ngIf=\"apiType === 'MESSAGE'\" class=\"content__tabs\" dynamicHeight>\n        <mat-tab label=\"Initial connection\" bodyClass=\"content__tabs__body\">\n          <gio-ps-flow-details-phase\n            class=\"content__phase\"\n            name=\"Request phase\"\n            description=\"Policies will be applied during the connection establishment\"\n            [startConnector]=\"messageFlowEntrypointsInfo\"\n            [endConnector]=\"endpointsInfo\"\n            [steps]=\"flow.request ?? []\"\n            [apiType]=\"apiType\"\n            [policies]=\"policies\"\n            [trialUrl]=\"trialUrl\"\n            policyExecutionPhase=\"REQUEST\"\n            (stepsChange)=\"onStepsChange('request', $event)\"\n          ></gio-ps-flow-details-phase>\n          <gio-ps-flow-details-phase\n            class=\"content__phase\"\n            name=\"Response phase\"\n            description=\"Policies will be applied to the response from the initial connection\"\n            [startConnector]=\"endpointsInfo\"\n            [endConnector]=\"messageFlowEntrypointsInfo\"\n            [steps]=\"flow.response ?? []\"\n            [apiType]=\"apiType\"\n            [policies]=\"policies\"\n            [trialUrl]=\"trialUrl\"\n            policyExecutionPhase=\"RESPONSE\"\n            (stepsChange)=\"onStepsChange('response', $event)\"\n          ></gio-ps-flow-details-phase>\n        </mat-tab>\n        <mat-tab label=\"Event messages\" bodyClass=\"content__tabs__body\">\n          <gio-ps-flow-details-phase\n            class=\"content__phase\"\n            name=\"Publish phase\"\n            description=\"Policies will be applied on messages sent to the endpoint\"\n            [startConnector]=\"messageFlowEntrypointsInfo | gioFilterConnectorsByMode : 'PUBLISH' : operations\"\n            [endConnector]=\"endpointsInfo | gioFilterConnectorsByMode : 'PUBLISH' : operations\"\n            [steps]=\"flow.publish ?? []\"\n            [apiType]=\"apiType\"\n            [policies]=\"policies\"\n            [trialUrl]=\"trialUrl\"\n            policyExecutionPhase=\"MESSAGE_REQUEST\"\n            (stepsChange)=\"onStepsChange('publish', $event)\"\n          ></gio-ps-flow-details-phase>\n          <gio-ps-flow-details-phase\n            class=\"content__phase\"\n            name=\"Subscribe phase\"\n            description=\"Policies will be applied on messages received by the entrypoint\"\n            [startConnector]=\"endpointsInfo | gioFilterConnectorsByMode : 'SUBSCRIBE' : operations\"\n            [endConnector]=\"messageFlowEntrypointsInfo | gioFilterConnectorsByMode : 'SUBSCRIBE' : operations\"\n            [steps]=\"flow.subscribe ?? []\"\n            [apiType]=\"apiType\"\n            [policies]=\"policies\"\n            [trialUrl]=\"trialUrl\"\n            policyExecutionPhase=\"MESSAGE_RESPONSE\"\n            (stepsChange)=\"onStepsChange('subscribe', $event)\"\n          ></gio-ps-flow-details-phase>\n        </mat-tab>\n      </mat-tab-group>\n\n      <ng-container *ngIf=\"apiType === 'PROXY'\">\n        <gio-ps-flow-details-phase\n          class=\"content__phase\"\n          name=\"Request phase\"\n          description=\"Policies will be applied during the connection establishment\"\n          [startConnector]=\"entrypointsInfo | gioFilterConnectorsByMode : 'REQUEST_RESPONSE'\"\n          [endConnector]=\"endpointsInfo | gioFilterConnectorsByMode : 'REQUEST_RESPONSE'\"\n          [steps]=\"flow.request ?? []\"\n          [apiType]=\"apiType\"\n          [policies]=\"policies\"\n          [trialUrl]=\"trialUrl\"\n          policyExecutionPhase=\"REQUEST\"\n          (stepsChange)=\"onStepsChange('request', $event)\"\n        ></gio-ps-flow-details-phase>\n        <gio-ps-flow-details-phase\n          class=\"content__phase\"\n          name=\"Response phase\"\n          description=\"Policies will be applied during the connection termination\"\n          [startConnector]=\"endpointsInfo | gioFilterConnectorsByMode : 'REQUEST_RESPONSE'\"\n          [endConnector]=\"entrypointsInfo | gioFilterConnectorsByMode : 'REQUEST_RESPONSE'\"\n          [steps]=\"flow.response ?? []\"\n          [apiType]=\"apiType\"\n          [policies]=\"policies\"\n          [trialUrl]=\"trialUrl\"\n          policyExecutionPhase=\"RESPONSE\"\n          (stepsChange)=\"onStepsChange('response', $event)\"\n        ></gio-ps-flow-details-phase>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <ng-template #emptyFlows>\n    <div class=\"emptyFlows\">\n      <h2>No flows yet</h2>\n      <p class=\"mat-body-1\">Flows allow you to customize the behavior of your API event phases through configurable policies</p>\n    </div>\n  </ng-template>\n</ng-template>\n\n<ng-template #loadingTpl>\n  <div class=\"header loading\">\n    <div class=\"header__label\">Flow details</div>\n    <div class=\"header__configBtn\">\n      <button class=\"header__configBtn__edit\" mat-stroked-button disabled>\n        <mat-icon svgIcon=\"gio:edit-pencil\"></mat-icon>\n      </button>\n      <button class=\"header__configBtn__delete\" mat-stroked-button disabled>\n        <mat-icon svgIcon=\"gio:trash\"></mat-icon>\n      </button>\n    </div>\n  </div>\n  <gio-ps-flow-details-info-bar class=\"infoBar loading\"></gio-ps-flow-details-info-bar>\n  <div class=\"content loading\">\n    <gio-loader></gio-loader>\n  </div>\n</ng-template>\n", styles: [".gio-top-bar-menu .gio-badge-accent{background-color:var(--gio-oem-palette--active, #e7e2fb);color:var(--gio-oem-palette--active-contrast, #100c27)}:host{display:flex;height:100%;flex-direction:column}.emptyFlows{display:flex;max-width:500px;height:100%;flex-direction:column;justify-content:center;margin:auto;text-align:center}.header{display:flex;align-items:center;padding:16px;border-bottom:1px solid #d3d5dc}.header__label{font-size:16px;font-weight:500;letter-spacing:.4px;line-height:24px;display:flex;flex:1 1 auto;align-items:center;margin-bottom:0;gap:8px}.header__configBtn{display:flex;align-items:center;margin-left:8px;gap:8px}.infoBar{border-bottom:1px solid #d3d5dc}.infoBar.loading{min-height:52px}.content{overflow:auto;flex:1 1 auto;background-color:#f7f8fd}.content__tabs{min-height:100%;min-height:calc(100% - 64px)}.content__phase{margin:16px 16px 0}.content.loading{display:flex}\n"] }]
+            args: [{ selector: 'gio-ps-flow-details', template: "<!--\n\n    Copyright (C) 2023 The Gravitee team (http://gravitee.io)\n    \n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n    \n            http://www.apache.org/licenses/LICENSE-2.0\n    \n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n\n<ng-container *ngIf=\"!loading; then flowDetailsTpl; else loadingTpl\"></ng-container>\n\n<ng-template #flowDetailsTpl>\n  <ng-container *ngIf=\"flow; else emptyFlows\">\n    <div class=\"header\">\n      <div class=\"header__label\">Flow details</div>\n      <div class=\"header__configBtn\">\n        <button class=\"header__configBtn__edit\" mat-stroked-button (click)=\"onEditFlow()\">\n          <mat-icon svgIcon=\"gio:edit-pencil\"></mat-icon>\n        </button>\n        <button class=\"header__configBtn__delete\" mat-stroked-button (click)=\"onDeleteFlow()\">\n          <mat-icon svgIcon=\"gio:trash\"></mat-icon>\n        </button>\n      </div>\n    </div>\n    <gio-ps-flow-details-info-bar class=\"infoBar\" [flow]=\"flow\" [entrypointsInfo]=\"entrypointsInfo\"></gio-ps-flow-details-info-bar>\n\n    <div class=\"content\">\n      <mat-tab-group *ngIf=\"apiType === 'MESSAGE'\" class=\"content__tabs\" dynamicHeight>\n        <mat-tab label=\"Initial connection\" bodyClass=\"content__tabs__body\">\n          <gio-ps-flow-details-phase\n            class=\"content__phase\"\n            name=\"Request phase\"\n            description=\"Policies will be applied during the connection establishment\"\n            [startConnector]=\"messageFlowEntrypointsInfo\"\n            [endConnector]=\"endpointsInfo\"\n            [steps]=\"flow.request ?? []\"\n            [apiType]=\"apiType\"\n            [policies]=\"policies\"\n            [trialUrl]=\"trialUrl\"\n            policyExecutionPhase=\"REQUEST\"\n            (stepsChange)=\"onStepsChange('request', $event)\"\n          ></gio-ps-flow-details-phase>\n          <gio-ps-flow-details-phase\n            class=\"content__phase\"\n            name=\"Response phase\"\n            description=\"Policies will be applied to the response from the initial connection\"\n            [startConnector]=\"endpointsInfo\"\n            [endConnector]=\"messageFlowEntrypointsInfo\"\n            [steps]=\"flow.response ?? []\"\n            [apiType]=\"apiType\"\n            [policies]=\"policies\"\n            [trialUrl]=\"trialUrl\"\n            policyExecutionPhase=\"RESPONSE\"\n            (stepsChange)=\"onStepsChange('response', $event)\"\n          ></gio-ps-flow-details-phase>\n        </mat-tab>\n        <mat-tab label=\"Event messages\" bodyClass=\"content__tabs__body\">\n          <gio-ps-flow-details-phase\n            class=\"content__phase\"\n            name=\"Publish phase\"\n            description=\"Policies will be applied on messages sent to the endpoint\"\n            [startConnector]=\"messageFlowEntrypointsInfo | gioFilterConnectorsByMode : 'PUBLISH' : operations\"\n            [endConnector]=\"endpointsInfo | gioFilterConnectorsByMode : 'PUBLISH' : operations\"\n            [steps]=\"flow.publish ?? []\"\n            [apiType]=\"apiType\"\n            [policies]=\"policies\"\n            [trialUrl]=\"trialUrl\"\n            policyExecutionPhase=\"MESSAGE_REQUEST\"\n            (stepsChange)=\"onStepsChange('publish', $event)\"\n          ></gio-ps-flow-details-phase>\n          <gio-ps-flow-details-phase\n            class=\"content__phase\"\n            name=\"Subscribe phase\"\n            description=\"Policies will be applied on messages received by the entrypoint\"\n            [startConnector]=\"endpointsInfo | gioFilterConnectorsByMode : 'SUBSCRIBE' : operations\"\n            [endConnector]=\"messageFlowEntrypointsInfo | gioFilterConnectorsByMode : 'SUBSCRIBE' : operations\"\n            [steps]=\"flow.subscribe ?? []\"\n            [apiType]=\"apiType\"\n            [policies]=\"policies\"\n            [trialUrl]=\"trialUrl\"\n            policyExecutionPhase=\"MESSAGE_RESPONSE\"\n            (stepsChange)=\"onStepsChange('subscribe', $event)\"\n          ></gio-ps-flow-details-phase>\n        </mat-tab>\n      </mat-tab-group>\n\n      <ng-container *ngIf=\"apiType === 'PROXY'\">\n        <gio-ps-flow-details-phase\n          class=\"content__phase\"\n          name=\"Request phase\"\n          description=\"Policies will be applied during the connection establishment\"\n          [startConnector]=\"entrypointsInfo | gioFilterConnectorsByMode : 'REQUEST_RESPONSE'\"\n          [endConnector]=\"endpointsInfo | gioFilterConnectorsByMode : 'REQUEST_RESPONSE'\"\n          [steps]=\"flow.request ?? []\"\n          [apiType]=\"apiType\"\n          [policies]=\"policies\"\n          [trialUrl]=\"trialUrl\"\n          policyExecutionPhase=\"REQUEST\"\n          (stepsChange)=\"onStepsChange('request', $event)\"\n        ></gio-ps-flow-details-phase>\n        <gio-ps-flow-details-phase\n          class=\"content__phase\"\n          name=\"Response phase\"\n          description=\"Policies will be applied during the connection termination\"\n          [startConnector]=\"endpointsInfo | gioFilterConnectorsByMode : 'REQUEST_RESPONSE'\"\n          [endConnector]=\"entrypointsInfo | gioFilterConnectorsByMode : 'REQUEST_RESPONSE'\"\n          [steps]=\"flow.response ?? []\"\n          [apiType]=\"apiType\"\n          [policies]=\"policies\"\n          [trialUrl]=\"trialUrl\"\n          policyExecutionPhase=\"RESPONSE\"\n          (stepsChange)=\"onStepsChange('response', $event)\"\n        ></gio-ps-flow-details-phase>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <ng-template #emptyFlows>\n    <div class=\"emptyFlows\">\n      <h2>No flows yet</h2>\n      <p class=\"mat-body-1\">Flows allow you to customize the behavior of your API event phases through configurable policies</p>\n    </div>\n  </ng-template>\n</ng-template>\n\n<ng-template #loadingTpl>\n  <div class=\"header loading\">\n    <div class=\"header__label\">Flow details</div>\n    <div class=\"header__configBtn\">\n      <button class=\"header__configBtn__edit\" mat-stroked-button disabled>\n        <mat-icon svgIcon=\"gio:edit-pencil\"></mat-icon>\n      </button>\n      <button class=\"header__configBtn__delete\" mat-stroked-button disabled>\n        <mat-icon svgIcon=\"gio:trash\"></mat-icon>\n      </button>\n    </div>\n  </div>\n  <gio-ps-flow-details-info-bar class=\"infoBar loading\"></gio-ps-flow-details-info-bar>\n  <div class=\"content loading\">\n    <gio-loader></gio-loader>\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gio-top-bar-menu .gio-badge-accent{background-color:var(--gio-oem-palette--active, #e7e2fb);color:var(--gio-oem-palette--active-contrast, #100c27)}:host{display:flex;height:100%;flex-direction:column}.emptyFlows{display:flex;max-width:500px;height:100%;flex-direction:column;justify-content:center;margin:auto;text-align:center}.header{display:flex;align-items:center;padding:16px;border-bottom:1px solid #d3d5dc}.header__label{font-size:16px;font-weight:500;letter-spacing:.4px;line-height:24px;display:flex;flex:1 1 auto;align-items:center;margin-bottom:0;gap:8px}.header__configBtn{display:flex;align-items:center;margin-left:8px;gap:8px}.infoBar{border-bottom:1px solid #d3d5dc}.infoBar.loading{min-height:52px}.content{overflow:auto;flex:1 1 auto;background-color:#f7f8fd}.content__tabs{min-height:100%;min-height:calc(100% - 64px)}.content__phase{margin:16px 16px 0}.content.loading{display:flex}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }]; }, propDecorators: { loading: [{
                 type: Input
             }], apiType: [{

package/esm2022/lib/components/flow-details-info-bar/gio-ps-flow-details-info-bar.component.mjs

@@ -99,11 +99,11 @@ export class GioPolicyStudioDetailsInfoBarComponent {
             ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GioPolicyStudioDetailsInfoBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GioPolicyStudioDetailsInfoBarComponent, selector: "gio-ps-flow-details-info-bar", inputs: { flow: "flow", entrypointsInfo: "entrypointsInfo" }, ngImport: i0, template: "<!--\n\n    Copyright (C) 2023 The Gravitee team (http://gravitee.io)\n    \n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n    \n            http://www.apache.org/licenses/LICENSE-2.0\n    \n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n<div *ngIf=\"flow?.name\" class=\"info\">\n  <span class=\"info__label\">Name</span>\n  <span class=\"info__value strong\">{{ flow?.name }}</span>\n</div>\n\n<div *ngIf=\"entrypoints\" class=\"info\">\n  <span class=\"info__label\">Entrypoints</span>\n  <span *ngFor=\"let entrypoint of entrypoints\" class=\"info__value gio-badge gio-badge-neutral\">\n    <mat-icon [svgIcon]=\"entrypoint.icon\"></mat-icon>\n    {{ entrypoint.name }}</span\n  >\n</div>\n\n<!-- MESSAGE API type -->\n\n<div *ngIf=\"operations\" class=\"info\">\n  <span class=\"info__label\">Operations</span>\n  <span *ngFor=\"let operation of operations\" class=\"info__value gio-badge-neutral\"> {{ operation }}</span>\n</div>\n\n<div *ngIf=\"channel\" class=\"info\">\n  <span class=\"info__label\">Channel</span>\n  <span class=\"info__value strong\">{{ channel }}</span>\n</div>\n\n<div *ngIf=\"channelOperator\" class=\"info\">\n  <span class=\"info__label\">Channel Operator</span>\n  <span class=\"info__value gio-badge-neutral\">{{ channelOperator }}</span>\n</div>\n\n<!-- PROXY API type -->\n\n<div *ngIf=\"path\" class=\"info\">\n  <span class=\"info__label\">Path</span>\n  <span class=\"info__value strong\">{{ path }}</span>\n</div>\n\n<div *ngIf=\"pathOperator\" class=\"info\">\n  <span class=\"info__label\">Path Operator</span>\n  <span class=\"info__value gio-badge-neutral\">{{ pathOperator }}</span>\n</div>\n\n<div *ngIf=\"methods\" class=\"info\">\n  <span class=\"info__label\">HTTP methods</span>\n  <span *ngFor=\"let method of methods\" class=\"info__value method\" [ngClass]=\"method.class\"> {{ method.name }}</span>\n</div>\n\n<!-- Condition -->\n\n<div *ngIf=\"condition\" class=\"info\">\n  <span class=\"info__label\">Condition</span>\n  <span class=\"info__value gio-badge-neutral condition\">{{ condition }}</span>\n</div>\n", styles: [".gio-top-bar-menu .gio-badge-accent{background-color:var(--gio-oem-palette--active, #e7e2fb);color:var(--gio-oem-palette--active-contrast, #100c27)}:host{display:flex;flex-flow:row wrap;padding:16px;gap:12px}.info__label{font-size:14px;font-weight:400;line-height:20px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;color:#606274}.info__value.strong{padding-left:8px;font-size:14px;font-weight:500;line-height:20px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.info__value.method{width:auto}.info__value.gio-badge mat-icon{margin-right:4px}.info__value.condition{text-transform:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GioPolicyStudioDetailsInfoBarComponent, selector: "gio-ps-flow-details-info-bar", inputs: { flow: "flow", entrypointsInfo: "entrypointsInfo" }, ngImport: i0, template: "<!--\n\n    Copyright (C) 2023 The Gravitee team (http://gravitee.io)\n    \n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n    \n            http://www.apache.org/licenses/LICENSE-2.0\n    \n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n<div *ngIf=\"flow?.name\" class=\"info\">\n  <span class=\"info__label\">Name</span>\n  <span class=\"info__value strong\">{{ flow?.name }}</span>\n</div>\n\n<div *ngIf=\"entrypoints\" class=\"info\">\n  <span class=\"info__label\">Entrypoints</span>\n  <span *ngFor=\"let entrypoint of entrypoints\" class=\"info__value gio-badge gio-badge-neutral\">\n    <mat-icon [svgIcon]=\"entrypoint.icon\"></mat-icon>\n    {{ entrypoint.name }}</span\n  >\n</div>\n\n<!-- MESSAGE API type -->\n\n<div *ngIf=\"operations\" class=\"info\">\n  <span class=\"info__label\">Operations</span>\n  <span *ngFor=\"let operation of operations\" class=\"info__value gio-badge-neutral\"> {{ operation }}</span>\n</div>\n\n<div *ngIf=\"channel\" class=\"info\">\n  <span class=\"info__label\">Channel</span>\n  <span class=\"info__value strong\">{{ channel }}</span>\n</div>\n\n<div *ngIf=\"channelOperator\" class=\"info\">\n  <span class=\"info__label\">Channel Operator</span>\n  <span class=\"info__value gio-badge-neutral\">{{ channelOperator }}</span>\n</div>\n\n<!-- PROXY API type -->\n\n<div *ngIf=\"path\" class=\"info\">\n  <span class=\"info__label\">Path</span>\n  <span class=\"info__value strong\">{{ path }}</span>\n</div>\n\n<div *ngIf=\"pathOperator\" class=\"info\">\n  <span class=\"info__label\">Path Operator</span>\n  <span class=\"info__value gio-badge-neutral\">{{ pathOperator }}</span>\n</div>\n\n<div *ngIf=\"methods\" class=\"info\">\n  <span class=\"info__label\">HTTP methods</span>\n  <span *ngFor=\"let method of methods\" class=\"info__value method\" [ngClass]=\"method.class\"> {{ method.name }}</span>\n</div>\n\n<!-- Condition -->\n\n<div *ngIf=\"condition\" class=\"info\">\n  <span class=\"info__label\">Condition</span>\n  <span class=\"info__value gio-badge-neutral condition\">{{ condition }}</span>\n</div>\n", styles: ["@charset \"UTF-8\";.gio-top-bar-menu .gio-badge-accent{background-color:var(--gio-oem-palette--active, #e7e2fb);color:var(--gio-oem-palette--active-contrast, #100c27)}:host{display:flex;flex-flow:row wrap;padding:16px;gap:12px}.info__label{font-size:14px;font-weight:400;line-height:20px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;color:#606274}.info__value.strong{padding-left:8px;font-size:14px;font-weight:500;line-height:20px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.info__value.method{width:auto}.info__value.gio-badge mat-icon{margin-right:4px}.info__value.condition{text-transform:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GioPolicyStudioDetailsInfoBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gio-ps-flow-details-info-bar', template: "<!--\n\n    Copyright (C) 2023 The Gravitee team (http://gravitee.io)\n    \n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n    \n            http://www.apache.org/licenses/LICENSE-2.0\n    \n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n<div *ngIf=\"flow?.name\" class=\"info\">\n  <span class=\"info__label\">Name</span>\n  <span class=\"info__value strong\">{{ flow?.name }}</span>\n</div>\n\n<div *ngIf=\"entrypoints\" class=\"info\">\n  <span class=\"info__label\">Entrypoints</span>\n  <span *ngFor=\"let entrypoint of entrypoints\" class=\"info__value gio-badge gio-badge-neutral\">\n    <mat-icon [svgIcon]=\"entrypoint.icon\"></mat-icon>\n    {{ entrypoint.name }}</span\n  >\n</div>\n\n<!-- MESSAGE API type -->\n\n<div *ngIf=\"operations\" class=\"info\">\n  <span class=\"info__label\">Operations</span>\n  <span *ngFor=\"let operation of operations\" class=\"info__value gio-badge-neutral\"> {{ operation }}</span>\n</div>\n\n<div *ngIf=\"channel\" class=\"info\">\n  <span class=\"info__label\">Channel</span>\n  <span class=\"info__value strong\">{{ channel }}</span>\n</div>\n\n<div *ngIf=\"channelOperator\" class=\"info\">\n  <span class=\"info__label\">Channel Operator</span>\n  <span class=\"info__value gio-badge-neutral\">{{ channelOperator }}</span>\n</div>\n\n<!-- PROXY API type -->\n\n<div *ngIf=\"path\" class=\"info\">\n  <span class=\"info__label\">Path</span>\n  <span class=\"info__value strong\">{{ path }}</span>\n</div>\n\n<div *ngIf=\"pathOperator\" class=\"info\">\n  <span class=\"info__label\">Path Operator</span>\n  <span class=\"info__value gio-badge-neutral\">{{ pathOperator }}</span>\n</div>\n\n<div *ngIf=\"methods\" class=\"info\">\n  <span class=\"info__label\">HTTP methods</span>\n  <span *ngFor=\"let method of methods\" class=\"info__value method\" [ngClass]=\"method.class\"> {{ method.name }}</span>\n</div>\n\n<!-- Condition -->\n\n<div *ngIf=\"condition\" class=\"info\">\n  <span class=\"info__label\">Condition</span>\n  <span class=\"info__value gio-badge-neutral condition\">{{ condition }}</span>\n</div>\n", styles: [".gio-top-bar-menu .gio-badge-accent{background-color:var(--gio-oem-palette--active, #e7e2fb);color:var(--gio-oem-palette--active-contrast, #100c27)}:host{display:flex;flex-flow:row wrap;padding:16px;gap:12px}.info__label{font-size:14px;font-weight:400;line-height:20px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;color:#606274}.info__value.strong{padding-left:8px;font-size:14px;font-weight:500;line-height:20px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.info__value.method{width:auto}.info__value.gio-badge mat-icon{margin-right:4px}.info__value.condition{text-transform:none}\n"] }]
+            args: [{ selector: 'gio-ps-flow-details-info-bar', template: "<!--\n\n    Copyright (C) 2023 The Gravitee team (http://gravitee.io)\n    \n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n    \n            http://www.apache.org/licenses/LICENSE-2.0\n    \n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n<div *ngIf=\"flow?.name\" class=\"info\">\n  <span class=\"info__label\">Name</span>\n  <span class=\"info__value strong\">{{ flow?.name }}</span>\n</div>\n\n<div *ngIf=\"entrypoints\" class=\"info\">\n  <span class=\"info__label\">Entrypoints</span>\n  <span *ngFor=\"let entrypoint of entrypoints\" class=\"info__value gio-badge gio-badge-neutral\">\n    <mat-icon [svgIcon]=\"entrypoint.icon\"></mat-icon>\n    {{ entrypoint.name }}</span\n  >\n</div>\n\n<!-- MESSAGE API type -->\n\n<div *ngIf=\"operations\" class=\"info\">\n  <span class=\"info__label\">Operations</span>\n  <span *ngFor=\"let operation of operations\" class=\"info__value gio-badge-neutral\"> {{ operation }}</span>\n</div>\n\n<div *ngIf=\"channel\" class=\"info\">\n  <span class=\"info__label\">Channel</span>\n  <span class=\"info__value strong\">{{ channel }}</span>\n</div>\n\n<div *ngIf=\"channelOperator\" class=\"info\">\n  <span class=\"info__label\">Channel Operator</span>\n  <span class=\"info__value gio-badge-neutral\">{{ channelOperator }}</span>\n</div>\n\n<!-- PROXY API type -->\n\n<div *ngIf=\"path\" class=\"info\">\n  <span class=\"info__label\">Path</span>\n  <span class=\"info__value strong\">{{ path }}</span>\n</div>\n\n<div *ngIf=\"pathOperator\" class=\"info\">\n  <span class=\"info__label\">Path Operator</span>\n  <span class=\"info__value gio-badge-neutral\">{{ pathOperator }}</span>\n</div>\n\n<div *ngIf=\"methods\" class=\"info\">\n  <span class=\"info__label\">HTTP methods</span>\n  <span *ngFor=\"let method of methods\" class=\"info__value method\" [ngClass]=\"method.class\"> {{ method.name }}</span>\n</div>\n\n<!-- Condition -->\n\n<div *ngIf=\"condition\" class=\"info\">\n  <span class=\"info__label\">Condition</span>\n  <span class=\"info__value gio-badge-neutral condition\">{{ condition }}</span>\n</div>\n", styles: ["@charset \"UTF-8\";.gio-top-bar-menu .gio-badge-accent{background-color:var(--gio-oem-palette--active, #e7e2fb);color:var(--gio-oem-palette--active-contrast, #100c27)}:host{display:flex;flex-flow:row wrap;padding:16px;gap:12px}.info__label{font-size:14px;font-weight:400;line-height:20px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;color:#606274}.info__value.strong{padding-left:8px;font-size:14px;font-weight:500;line-height:20px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.info__value.method{width:auto}.info__value.gio-badge mat-icon{margin-right:4px}.info__value.condition{text-transform:none}\n"] }]
         }], propDecorators: { flow: [{
                 type: Input
             }], entrypointsInfo: [{

package/esm2022/lib/components/flow-details-phase/gio-ps-flow-details-phase.component.mjs

@@ -112,11 +112,11 @@ export class GioPolicyStudioDetailsPhaseComponent {
         ]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GioPolicyStudioDetailsPhaseComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GioPolicyStudioDetailsPhaseComponent, selector: "gio-ps-flow-details-phase", inputs: { steps: "steps", name: "name", description: "description", startConnector: "startConnector", endConnector: "endConnector", apiType: "apiType", policies: "policies", policyExecutionPhase: "policyExecutionPhase", trialUrl: "trialUrl" }, outputs: { stepsChange: "stepsChange" }, usesOnChanges: true, ngImport: i0, template: "<!--\n\n    Copyright (C) 2023 The Gravitee team (http://gravitee.io)\n    \n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n    \n            http://www.apache.org/licenses/LICENSE-2.0\n    \n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n\n<div class=\"header\">\n  <span class=\"header__name\">\n    {{ name }}\n  </span>\n  <span class=\"header__description\">\n    {{ description }}\n  </span>\n\n  <span *ngIf=\"isDisabled\" class=\"header__infoIcon\" matTooltip=\"Policies might not be evaluated\" matTooltipPosition=\"before\">\n    <mat-icon svgIcon=\"gio:info\"></mat-icon>\n  </span>\n</div>\n\n<div *ngIf=\"!isDisabled; else disabledPhaseContent\" class=\"wrapper\">\n  <div class=\"content\">\n    <div *ngFor=\"let stepVM of stepsVM; first as isFirst\" class=\"content__step\">\n      <!-- Connector -->\n      <ng-container *ngIf=\"stepVM.type === 'connectors'\">\n        <div class=\"content__step__connector\">\n          <span *ngFor=\"let connector of stepVM.connectors\" class=\"gio-badge-white content__step__connector__badge\">\n            <mat-icon *ngIf=\"connector.icon\" [svgIcon]=\"connector.icon\" class=\"content__step__connector__badge__icon\"></mat-icon>\n            {{ connector.name }}\n          </span>\n        </div>\n\n        <!-- Add policy button after first connector -->\n        <ng-container *ngIf=\"isFirst\">\n          <mat-icon class=\"content__step__rightArrow\" svgIcon=\"gio:arrow-right\"></mat-icon>\n          <button class=\"content__step__addBtn\" mat-button (click)=\"onAddPolicy(-1)\">\n            <mat-icon svgIcon=\"gio:plus\"></mat-icon>\n          </button>\n          <mat-icon class=\"content__step__rightArrow\" svgIcon=\"gio:arrow-right\"></mat-icon>\n        </ng-container>\n      </ng-container>\n\n      <!-- Policy -->\n      <ng-container *ngIf=\"stepVM.type === 'step'\">\n        <div class=\"content__step__policy\">\n          <div *ngIf=\"stepVM.step?.condition\" class=\"content__step__policy__condition\">\n            <span class=\"gio-badge-neutral\" [matTooltip]=\"'Condition: ' + stepVM.step.condition\"\n              ><mat-icon svgIcon=\"gio:if\"></mat-icon>{{ stepVM.step.condition }}</span\n            >\n          </div>\n          <gio-ps-flow-details-phase-step\n            class=\"content__step__step\"\n            [class.disabled]=\"!stepVM.step.enabled\"\n            [policies]=\"policies\"\n            [step]=\"stepVM.step\"\n            (stepChange)=\"onStepChange(stepVM.index, $event)\"\n            (deleted)=\"onStepDeleted(stepVM.index)\"\n            (disabled)=\"onStepDisabled(stepVM.index)\"\n          ></gio-ps-flow-details-phase-step>\n        </div>\n\n        <!-- Add policy button -->\n        <mat-icon class=\"content__step__rightArrow\" svgIcon=\"gio:arrow-right\"></mat-icon>\n        <button class=\"content__step__addBtn\" mat-button (click)=\"onAddPolicy(stepVM.index)\">\n          <mat-icon svgIcon=\"gio:plus\"></mat-icon>\n        </button>\n        <mat-icon class=\"content__step__rightArrow\" svgIcon=\"gio:arrow-right\"></mat-icon>\n      </ng-container>\n    </div>\n  </div>\n</div>\n\n<ng-template #disabledPhaseContent>\n  <div class=\"disabledContent\">\n    <gio-banner-warning>\n      Policies might not be evaluated\n      <span gioBannerBody>\n        Your current flow settings are not applicable to this phase. Select supporting endpoints and operations in the flow configuration to\n        enable this phase.\n      </span>\n    </gio-banner-warning>\n  </div>\n</ng-template>\n", styles: [".gio-top-bar-menu .gio-badge-accent{background-color:var(--gio-oem-palette--active, #e7e2fb);color:var(--gio-oem-palette--active-contrast, #100c27)}:host{display:flex;overflow:hidden;min-height:215px;flex-direction:column;padding-top:16px;border:1px solid #d3d5dc;border-radius:8px;background-color:#fff}.header{display:flex;padding:0 16px;gap:8px}.header__name{flex:0 1 auto;font-size:14px;font-weight:500;line-height:20px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.header__description{flex:1 1 auto;font-size:14px;font-weight:400;line-height:20px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;color:#606274}.wrapper{position:relative;flex:1 1 auto;overflow-y:auto}.content{position:absolute;display:flex;width:max-content;height:100%;align-items:center;padding:0 16px}.content__step{display:flex;align-items:center}.content__step__connector{display:flex;flex-direction:column;gap:8px}.content__step__connector__badge{border:1px solid #876fec;border-radius:16px}.content__step__connector__badge__icon{margin-right:4px}.content__step__rightArrow{width:16px;height:16px;margin:0 8px;color:#b4b5bb}.content__step__policy{position:relative;display:flex;flex-direction:row;align-items:center}.content__step__policy__condition{position:absolute;top:-32px;right:0;left:0;display:flex;flex-direction:column}.content__step__policy__condition span{display:inline-block;overflow:hidden;text-overflow:ellipsis;text-transform:none;white-space:nowrap}.content__step__policy__condition span mat-icon{margin-right:4px}.disabledContent{display:flex;flex-direction:column;padding:16px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.GioBannerWarningComponent, selector: "gio-banner-warning" }, { kind: "directive", type: i6.GioBannerBodyDirective, selector: "[gioBannerBody]" }, { kind: "component", type: i7.GioPolicyStudioDetailsPhaseStepComponent, selector: "gio-ps-flow-details-phase-step", inputs: ["step", "policies"], outputs: ["stepChange", "deleted", "disabled"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GioPolicyStudioDetailsPhaseComponent, selector: "gio-ps-flow-details-phase", inputs: { steps: "steps", name: "name", description: "description", startConnector: "startConnector", endConnector: "endConnector", apiType: "apiType", policies: "policies", policyExecutionPhase: "policyExecutionPhase", trialUrl: "trialUrl" }, outputs: { stepsChange: "stepsChange" }, usesOnChanges: true, ngImport: i0, template: "<!--\n\n    Copyright (C) 2023 The Gravitee team (http://gravitee.io)\n    \n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n    \n            http://www.apache.org/licenses/LICENSE-2.0\n    \n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n\n<div class=\"header\">\n  <span class=\"header__name\">\n    {{ name }}\n  </span>\n  <span class=\"header__description\">\n    {{ description }}\n  </span>\n\n  <span *ngIf=\"isDisabled\" class=\"header__infoIcon\" matTooltip=\"Policies might not be evaluated\" matTooltipPosition=\"before\">\n    <mat-icon svgIcon=\"gio:info\"></mat-icon>\n  </span>\n</div>\n\n<div *ngIf=\"!isDisabled; else disabledPhaseContent\" class=\"wrapper\">\n  <div class=\"content\">\n    <div *ngFor=\"let stepVM of stepsVM; first as isFirst\" class=\"content__step\">\n      <!-- Connector -->\n      <ng-container *ngIf=\"stepVM.type === 'connectors'\">\n        <div class=\"content__step__connector\">\n          <span *ngFor=\"let connector of stepVM.connectors\" class=\"gio-badge-white content__step__connector__badge\">\n            <mat-icon *ngIf=\"connector.icon\" [svgIcon]=\"connector.icon\" class=\"content__step__connector__badge__icon\"></mat-icon>\n            {{ connector.name }}\n          </span>\n        </div>\n\n        <!-- Add policy button after first connector -->\n        <ng-container *ngIf=\"isFirst\">\n          <mat-icon class=\"content__step__rightArrow\" svgIcon=\"gio:arrow-right\"></mat-icon>\n          <button class=\"content__step__addBtn\" mat-button (click)=\"onAddPolicy(-1)\">\n            <mat-icon svgIcon=\"gio:plus\"></mat-icon>\n          </button>\n          <mat-icon class=\"content__step__rightArrow\" svgIcon=\"gio:arrow-right\"></mat-icon>\n        </ng-container>\n      </ng-container>\n\n      <!-- Policy -->\n      <ng-container *ngIf=\"stepVM.type === 'step'\">\n        <div class=\"content__step__policy\">\n          <div *ngIf=\"stepVM.step?.condition\" class=\"content__step__policy__condition\">\n            <span class=\"gio-badge-neutral\" [matTooltip]=\"'Condition: ' + stepVM.step.condition\"\n              ><mat-icon svgIcon=\"gio:if\"></mat-icon>{{ stepVM.step.condition }}</span\n            >\n          </div>\n          <gio-ps-flow-details-phase-step\n            class=\"content__step__step\"\n            [class.disabled]=\"!stepVM.step.enabled\"\n            [policies]=\"policies\"\n            [step]=\"stepVM.step\"\n            (stepChange)=\"onStepChange(stepVM.index, $event)\"\n            (deleted)=\"onStepDeleted(stepVM.index)\"\n            (disabled)=\"onStepDisabled(stepVM.index)\"\n          ></gio-ps-flow-details-phase-step>\n        </div>\n\n        <!-- Add policy button -->\n        <mat-icon class=\"content__step__rightArrow\" svgIcon=\"gio:arrow-right\"></mat-icon>\n        <button class=\"content__step__addBtn\" mat-button (click)=\"onAddPolicy(stepVM.index)\">\n          <mat-icon svgIcon=\"gio:plus\"></mat-icon>\n        </button>\n        <mat-icon class=\"content__step__rightArrow\" svgIcon=\"gio:arrow-right\"></mat-icon>\n      </ng-container>\n    </div>\n  </div>\n</div>\n\n<ng-template #disabledPhaseContent>\n  <div class=\"disabledContent\">\n    <gio-banner-warning>\n      Policies might not be evaluated\n      <span gioBannerBody>\n        Your current flow settings are not applicable to this phase. Select supporting endpoints and operations in the flow configuration to\n        enable this phase.\n      </span>\n    </gio-banner-warning>\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gio-top-bar-menu .gio-badge-accent{background-color:var(--gio-oem-palette--active, #e7e2fb);color:var(--gio-oem-palette--active-contrast, #100c27)}:host{display:flex;overflow:hidden;min-height:215px;flex-direction:column;padding-top:16px;border:1px solid #d3d5dc;border-radius:8px;background-color:#fff}.header{display:flex;padding:0 16px;gap:8px}.header__name{flex:0 1 auto;font-size:14px;font-weight:500;line-height:20px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.header__description{flex:1 1 auto;font-size:14px;font-weight:400;line-height:20px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;color:#606274}.wrapper{position:relative;flex:1 1 auto;overflow-y:auto}.content{position:absolute;display:flex;width:max-content;height:100%;align-items:center;padding:0 16px}.content__step{display:flex;align-items:center}.content__step__connector{display:flex;flex-direction:column;gap:8px}.content__step__connector__badge{border:1px solid #876fec;border-radius:16px}.content__step__connector__badge__icon{margin-right:4px}.content__step__rightArrow{width:16px;height:16px;margin:0 8px;color:#b4b5bb}.content__step__policy{position:relative;display:flex;flex-direction:row;align-items:center}.content__step__policy__condition{position:absolute;top:-32px;right:0;left:0;display:flex;flex-direction:column}.content__step__policy__condition span{display:inline-block;overflow:hidden;text-overflow:ellipsis;text-transform:none;white-space:nowrap}.content__step__policy__condition span mat-icon{margin-right:4px}.disabledContent{display:flex;flex-direction:column;padding:16px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.GioBannerWarningComponent, selector: "gio-banner-warning" }, { kind: "directive", type: i6.GioBannerBodyDirective, selector: "[gioBannerBody]" }, { kind: "component", type: i7.GioPolicyStudioDetailsPhaseStepComponent, selector: "gio-ps-flow-details-phase-step", inputs: ["step", "policies"], outputs: ["stepChange", "deleted", "disabled"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GioPolicyStudioDetailsPhaseComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gio-ps-flow-details-phase', template: "<!--\n\n    Copyright (C) 2023 The Gravitee team (http://gravitee.io)\n    \n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n    \n            http://www.apache.org/licenses/LICENSE-2.0\n    \n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n\n<div class=\"header\">\n  <span class=\"header__name\">\n    {{ name }}\n  </span>\n  <span class=\"header__description\">\n    {{ description }}\n  </span>\n\n  <span *ngIf=\"isDisabled\" class=\"header__infoIcon\" matTooltip=\"Policies might not be evaluated\" matTooltipPosition=\"before\">\n    <mat-icon svgIcon=\"gio:info\"></mat-icon>\n  </span>\n</div>\n\n<div *ngIf=\"!isDisabled; else disabledPhaseContent\" class=\"wrapper\">\n  <div class=\"content\">\n    <div *ngFor=\"let stepVM of stepsVM; first as isFirst\" class=\"content__step\">\n      <!-- Connector -->\n      <ng-container *ngIf=\"stepVM.type === 'connectors'\">\n        <div class=\"content__step__connector\">\n          <span *ngFor=\"let connector of stepVM.connectors\" class=\"gio-badge-white content__step__connector__badge\">\n            <mat-icon *ngIf=\"connector.icon\" [svgIcon]=\"connector.icon\" class=\"content__step__connector__badge__icon\"></mat-icon>\n            {{ connector.name }}\n          </span>\n        </div>\n\n        <!-- Add policy button after first connector -->\n        <ng-container *ngIf=\"isFirst\">\n          <mat-icon class=\"content__step__rightArrow\" svgIcon=\"gio:arrow-right\"></mat-icon>\n          <button class=\"content__step__addBtn\" mat-button (click)=\"onAddPolicy(-1)\">\n            <mat-icon svgIcon=\"gio:plus\"></mat-icon>\n          </button>\n          <mat-icon class=\"content__step__rightArrow\" svgIcon=\"gio:arrow-right\"></mat-icon>\n        </ng-container>\n      </ng-container>\n\n      <!-- Policy -->\n      <ng-container *ngIf=\"stepVM.type === 'step'\">\n        <div class=\"content__step__policy\">\n          <div *ngIf=\"stepVM.step?.condition\" class=\"content__step__policy__condition\">\n            <span class=\"gio-badge-neutral\" [matTooltip]=\"'Condition: ' + stepVM.step.condition\"\n              ><mat-icon svgIcon=\"gio:if\"></mat-icon>{{ stepVM.step.condition }}</span\n            >\n          </div>\n          <gio-ps-flow-details-phase-step\n            class=\"content__step__step\"\n            [class.disabled]=\"!stepVM.step.enabled\"\n            [policies]=\"policies\"\n            [step]=\"stepVM.step\"\n            (stepChange)=\"onStepChange(stepVM.index, $event)\"\n            (deleted)=\"onStepDeleted(stepVM.index)\"\n            (disabled)=\"onStepDisabled(stepVM.index)\"\n          ></gio-ps-flow-details-phase-step>\n        </div>\n\n        <!-- Add policy button -->\n        <mat-icon class=\"content__step__rightArrow\" svgIcon=\"gio:arrow-right\"></mat-icon>\n        <button class=\"content__step__addBtn\" mat-button (click)=\"onAddPolicy(stepVM.index)\">\n          <mat-icon svgIcon=\"gio:plus\"></mat-icon>\n        </button>\n        <mat-icon class=\"content__step__rightArrow\" svgIcon=\"gio:arrow-right\"></mat-icon>\n      </ng-container>\n    </div>\n  </div>\n</div>\n\n<ng-template #disabledPhaseContent>\n  <div class=\"disabledContent\">\n    <gio-banner-warning>\n      Policies might not be evaluated\n      <span gioBannerBody>\n        Your current flow settings are not applicable to this phase. Select supporting endpoints and operations in the flow configuration to\n        enable this phase.\n      </span>\n    </gio-banner-warning>\n  </div>\n</ng-template>\n", styles: [".gio-top-bar-menu .gio-badge-accent{background-color:var(--gio-oem-palette--active, #e7e2fb);color:var(--gio-oem-palette--active-contrast, #100c27)}:host{display:flex;overflow:hidden;min-height:215px;flex-direction:column;padding-top:16px;border:1px solid #d3d5dc;border-radius:8px;background-color:#fff}.header{display:flex;padding:0 16px;gap:8px}.header__name{flex:0 1 auto;font-size:14px;font-weight:500;line-height:20px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.header__description{flex:1 1 auto;font-size:14px;font-weight:400;line-height:20px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;color:#606274}.wrapper{position:relative;flex:1 1 auto;overflow-y:auto}.content{position:absolute;display:flex;width:max-content;height:100%;align-items:center;padding:0 16px}.content__step{display:flex;align-items:center}.content__step__connector{display:flex;flex-direction:column;gap:8px}.content__step__connector__badge{border:1px solid #876fec;border-radius:16px}.content__step__connector__badge__icon{margin-right:4px}.content__step__rightArrow{width:16px;height:16px;margin:0 8px;color:#b4b5bb}.content__step__policy{position:relative;display:flex;flex-direction:row;align-items:center}.content__step__policy__condition{position:absolute;top:-32px;right:0;left:0;display:flex;flex-direction:column}.content__step__policy__condition span{display:inline-block;overflow:hidden;text-overflow:ellipsis;text-transform:none;white-space:nowrap}.content__step__policy__condition span mat-icon{margin-right:4px}.disabledContent{display:flex;flex-direction:column;padding:16px}\n"] }]
+            args: [{ selector: 'gio-ps-flow-details-phase', template: "<!--\n\n    Copyright (C) 2023 The Gravitee team (http://gravitee.io)\n    \n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n    \n            http://www.apache.org/licenses/LICENSE-2.0\n    \n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n\n<div class=\"header\">\n  <span class=\"header__name\">\n    {{ name }}\n  </span>\n  <span class=\"header__description\">\n    {{ description }}\n  </span>\n\n  <span *ngIf=\"isDisabled\" class=\"header__infoIcon\" matTooltip=\"Policies might not be evaluated\" matTooltipPosition=\"before\">\n    <mat-icon svgIcon=\"gio:info\"></mat-icon>\n  </span>\n</div>\n\n<div *ngIf=\"!isDisabled; else disabledPhaseContent\" class=\"wrapper\">\n  <div class=\"content\">\n    <div *ngFor=\"let stepVM of stepsVM; first as isFirst\" class=\"content__step\">\n      <!-- Connector -->\n      <ng-container *ngIf=\"stepVM.type === 'connectors'\">\n        <div class=\"content__step__connector\">\n          <span *ngFor=\"let connector of stepVM.connectors\" class=\"gio-badge-white content__step__connector__badge\">\n            <mat-icon *ngIf=\"connector.icon\" [svgIcon]=\"connector.icon\" class=\"content__step__connector__badge__icon\"></mat-icon>\n            {{ connector.name }}\n          </span>\n        </div>\n\n        <!-- Add policy button after first connector -->\n        <ng-container *ngIf=\"isFirst\">\n          <mat-icon class=\"content__step__rightArrow\" svgIcon=\"gio:arrow-right\"></mat-icon>\n          <button class=\"content__step__addBtn\" mat-button (click)=\"onAddPolicy(-1)\">\n            <mat-icon svgIcon=\"gio:plus\"></mat-icon>\n          </button>\n          <mat-icon class=\"content__step__rightArrow\" svgIcon=\"gio:arrow-right\"></mat-icon>\n        </ng-container>\n      </ng-container>\n\n      <!-- Policy -->\n      <ng-container *ngIf=\"stepVM.type === 'step'\">\n        <div class=\"content__step__policy\">\n          <div *ngIf=\"stepVM.step?.condition\" class=\"content__step__policy__condition\">\n            <span class=\"gio-badge-neutral\" [matTooltip]=\"'Condition: ' + stepVM.step.condition\"\n              ><mat-icon svgIcon=\"gio:if\"></mat-icon>{{ stepVM.step.condition }}</span\n            >\n          </div>\n          <gio-ps-flow-details-phase-step\n            class=\"content__step__step\"\n            [class.disabled]=\"!stepVM.step.enabled\"\n            [policies]=\"policies\"\n            [step]=\"stepVM.step\"\n            (stepChange)=\"onStepChange(stepVM.index, $event)\"\n            (deleted)=\"onStepDeleted(stepVM.index)\"\n            (disabled)=\"onStepDisabled(stepVM.index)\"\n          ></gio-ps-flow-details-phase-step>\n        </div>\n\n        <!-- Add policy button -->\n        <mat-icon class=\"content__step__rightArrow\" svgIcon=\"gio:arrow-right\"></mat-icon>\n        <button class=\"content__step__addBtn\" mat-button (click)=\"onAddPolicy(stepVM.index)\">\n          <mat-icon svgIcon=\"gio:plus\"></mat-icon>\n        </button>\n        <mat-icon class=\"content__step__rightArrow\" svgIcon=\"gio:arrow-right\"></mat-icon>\n      </ng-container>\n    </div>\n  </div>\n</div>\n\n<ng-template #disabledPhaseContent>\n  <div class=\"disabledContent\">\n    <gio-banner-warning>\n      Policies might not be evaluated\n      <span gioBannerBody>\n        Your current flow settings are not applicable to this phase. Select supporting endpoints and operations in the flow configuration to\n        enable this phase.\n      </span>\n    </gio-banner-warning>\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gio-top-bar-menu .gio-badge-accent{background-color:var(--gio-oem-palette--active, #e7e2fb);color:var(--gio-oem-palette--active-contrast, #100c27)}:host{display:flex;overflow:hidden;min-height:215px;flex-direction:column;padding-top:16px;border:1px solid #d3d5dc;border-radius:8px;background-color:#fff}.header{display:flex;padding:0 16px;gap:8px}.header__name{flex:0 1 auto;font-size:14px;font-weight:500;line-height:20px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.header__description{flex:1 1 auto;font-size:14px;font-weight:400;line-height:20px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;color:#606274}.wrapper{position:relative;flex:1 1 auto;overflow-y:auto}.content{position:absolute;display:flex;width:max-content;height:100%;align-items:center;padding:0 16px}.content__step{display:flex;align-items:center}.content__step__connector{display:flex;flex-direction:column;gap:8px}.content__step__connector__badge{border:1px solid #876fec;border-radius:16px}.content__step__connector__badge__icon{margin-right:4px}.content__step__rightArrow{width:16px;height:16px;margin:0 8px;color:#b4b5bb}.content__step__policy{position:relative;display:flex;flex-direction:row;align-items:center}.content__step__policy__condition{position:absolute;top:-32px;right:0;left:0;display:flex;flex-direction:column}.content__step__policy__condition span{display:inline-block;overflow:hidden;text-overflow:ellipsis;text-transform:none;white-space:nowrap}.content__step__policy__condition span mat-icon{margin-right:4px}.disabledContent{display:flex;flex-direction:column;padding:16px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }]; }, propDecorators: { steps: [{
                 type: Input
             }], name: [{

package/esm2022/lib/components/flow-details-phase-step/gio-ps-flow-details-phase-step.component.mjs

@@ -65,11 +65,11 @@ export class GioPolicyStudioDetailsPhaseStepComponent {
         this.deleted.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GioPolicyStudioDetailsPhaseStepComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GioPolicyStudioDetailsPhaseStepComponent, selector: "gio-ps-flow-details-phase-step", inputs: { step: "step", policies: "policies" }, outputs: { stepChange: "stepChange", deleted: "deleted", disabled: "disabled" }, usesOnChanges: true, ngImport: i0, template: "<!--\n\n    Copyright (C) 2023 The Gravitee team (http://gravitee.io)\n    \n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n    \n            http://www.apache.org/licenses/LICENSE-2.0\n    \n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n\n<div class=\"info\">\n  <div class=\"info__head\">\n    <mat-icon class=\"info__head__icon\" [svgIcon]=\"policy?.icon ?? 'gio:puzzle'\"></mat-icon>\n\n    <span *ngIf=\"step.name\" class=\"info__head__name\">{{ step.name }}</span>\n  </div>\n\n  <div *ngIf=\"step.description\" class=\"info__description\">{{ step.description }}</div>\n</div>\n\n<button class=\"menuBtn\" mat-icon-button [matMenuTriggerFor]=\"policyMenu\"><mat-icon svgIcon=\"gio:more-vertical\"></mat-icon></button>\n\n<mat-menu #policyMenu=\"matMenu\">\n  <button mat-menu-item (click)=\"onEdit()\">\n    <mat-icon svgIcon=\"gio:edit-pencil\"></mat-icon>\n    <span>Edit</span>\n  </button>\n\n  <button mat-menu-item (click)=\"onDisable()\">\n    <mat-icon [svgIcon]=\"step.enabled ? 'gio:prohibition' : 'gio:check-circled-outline'\"></mat-icon>\n    <span>{{ step.enabled ? 'Disable' : 'Enable' }}</span>\n  </button>\n\n  <button mat-menu-item (click)=\"onDelete()\">\n    <mat-icon svgIcon=\"gio:trash\"></mat-icon>\n    <span>Delete</span>\n  </button>\n</mat-menu>\n", styles: [".gio-top-bar-menu .gio-badge-accent{background-color:var(--gio-oem-palette--active, #e7e2fb);color:var(--gio-oem-palette--active-contrast, #100c27)}:host{display:flex;align-items:center;padding:8px;border:1px solid #6c59bd;border-radius:8px}:host-context(.disabled){border:1px solid #d3d5dc}.info{display:flex;max-width:300px;flex-direction:column;margin-left:4px;gap:4px}.info__head{display:flex;align-items:center}.info__head__icon{min-width:24px;flex:1 1 24px;margin-right:8px}.info__head__name{overflow:hidden;flex:1 1 auto;text-overflow:ellipsis;white-space:nowrap}.info__description{font-size:12px;font-weight:400;line-height:16px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;color:#606274;-webkit-line-clamp:2}.info__description:empty{display:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GioPolicyStudioDetailsPhaseStepComponent, selector: "gio-ps-flow-details-phase-step", inputs: { step: "step", policies: "policies" }, outputs: { stepChange: "stepChange", deleted: "deleted", disabled: "disabled" }, usesOnChanges: true, ngImport: i0, template: "<!--\n\n    Copyright (C) 2023 The Gravitee team (http://gravitee.io)\n    \n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n    \n            http://www.apache.org/licenses/LICENSE-2.0\n    \n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n\n<div class=\"info\">\n  <div class=\"info__head\">\n    <mat-icon class=\"info__head__icon\" [svgIcon]=\"policy?.icon ?? 'gio:puzzle'\"></mat-icon>\n\n    <span *ngIf=\"step.name\" class=\"info__head__name\">{{ step.name }}</span>\n  </div>\n\n  <div *ngIf=\"step.description\" class=\"info__description\">{{ step.description }}</div>\n</div>\n\n<button class=\"menuBtn\" mat-icon-button [matMenuTriggerFor]=\"policyMenu\"><mat-icon svgIcon=\"gio:more-vertical\"></mat-icon></button>\n\n<mat-menu #policyMenu=\"matMenu\">\n  <button mat-menu-item (click)=\"onEdit()\">\n    <mat-icon svgIcon=\"gio:edit-pencil\"></mat-icon>\n    <span>Edit</span>\n  </button>\n\n  <button mat-menu-item (click)=\"onDisable()\">\n    <mat-icon [svgIcon]=\"step.enabled ? 'gio:prohibition' : 'gio:check-circled-outline'\"></mat-icon>\n    <span>{{ step.enabled ? 'Disable' : 'Enable' }}</span>\n  </button>\n\n  <button mat-menu-item (click)=\"onDelete()\">\n    <mat-icon svgIcon=\"gio:trash\"></mat-icon>\n    <span>Delete</span>\n  </button>\n</mat-menu>\n", styles: ["@charset \"UTF-8\";.gio-top-bar-menu .gio-badge-accent{background-color:var(--gio-oem-palette--active, #e7e2fb);color:var(--gio-oem-palette--active-contrast, #100c27)}:host{display:flex;align-items:center;padding:8px;border:1px solid #6c59bd;border-radius:8px}:host-context(.disabled){border:1px solid #d3d5dc}.info{display:flex;max-width:300px;flex-direction:column;margin-left:4px;gap:4px}.info__head{display:flex;align-items:center}.info__head__icon{min-width:24px;flex:1 1 24px;margin-right:8px}.info__head__name{overflow:hidden;flex:1 1 auto;text-overflow:ellipsis;white-space:nowrap}.info__description{font-size:12px;font-weight:400;line-height:16px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;color:#606274;-webkit-line-clamp:2}.info__description:empty{display:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GioPolicyStudioDetailsPhaseStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gio-ps-flow-details-phase-step', template: "<!--\n\n    Copyright (C) 2023 The Gravitee team (http://gravitee.io)\n    \n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n    \n            http://www.apache.org/licenses/LICENSE-2.0\n    \n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n\n<div class=\"info\">\n  <div class=\"info__head\">\n    <mat-icon class=\"info__head__icon\" [svgIcon]=\"policy?.icon ?? 'gio:puzzle'\"></mat-icon>\n\n    <span *ngIf=\"step.name\" class=\"info__head__name\">{{ step.name }}</span>\n  </div>\n\n  <div *ngIf=\"step.description\" class=\"info__description\">{{ step.description }}</div>\n</div>\n\n<button class=\"menuBtn\" mat-icon-button [matMenuTriggerFor]=\"policyMenu\"><mat-icon svgIcon=\"gio:more-vertical\"></mat-icon></button>\n\n<mat-menu #policyMenu=\"matMenu\">\n  <button mat-menu-item (click)=\"onEdit()\">\n    <mat-icon svgIcon=\"gio:edit-pencil\"></mat-icon>\n    <span>Edit</span>\n  </button>\n\n  <button mat-menu-item (click)=\"onDisable()\">\n    <mat-icon [svgIcon]=\"step.enabled ? 'gio:prohibition' : 'gio:check-circled-outline'\"></mat-icon>\n    <span>{{ step.enabled ? 'Disable' : 'Enable' }}</span>\n  </button>\n\n  <button mat-menu-item (click)=\"onDelete()\">\n    <mat-icon svgIcon=\"gio:trash\"></mat-icon>\n    <span>Delete</span>\n  </button>\n</mat-menu>\n", styles: [".gio-top-bar-menu .gio-badge-accent{background-color:var(--gio-oem-palette--active, #e7e2fb);color:var(--gio-oem-palette--active-contrast, #100c27)}:host{display:flex;align-items:center;padding:8px;border:1px solid #6c59bd;border-radius:8px}:host-context(.disabled){border:1px solid #d3d5dc}.info{display:flex;max-width:300px;flex-direction:column;margin-left:4px;gap:4px}.info__head{display:flex;align-items:center}.info__head__icon{min-width:24px;flex:1 1 24px;margin-right:8px}.info__head__name{overflow:hidden;flex:1 1 auto;text-overflow:ellipsis;white-space:nowrap}.info__description{font-size:12px;font-weight:400;line-height:16px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;color:#606274;-webkit-line-clamp:2}.info__description:empty{display:none}\n"] }]
+            args: [{ selector: 'gio-ps-flow-details-phase-step', template: "<!--\n\n    Copyright (C) 2023 The Gravitee team (http://gravitee.io)\n    \n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n    \n            http://www.apache.org/licenses/LICENSE-2.0\n    \n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n\n<div class=\"info\">\n  <div class=\"info__head\">\n    <mat-icon class=\"info__head__icon\" [svgIcon]=\"policy?.icon ?? 'gio:puzzle'\"></mat-icon>\n\n    <span *ngIf=\"step.name\" class=\"info__head__name\">{{ step.name }}</span>\n  </div>\n\n  <div *ngIf=\"step.description\" class=\"info__description\">{{ step.description }}</div>\n</div>\n\n<button class=\"menuBtn\" mat-icon-button [matMenuTriggerFor]=\"policyMenu\"><mat-icon svgIcon=\"gio:more-vertical\"></mat-icon></button>\n\n<mat-menu #policyMenu=\"matMenu\">\n  <button mat-menu-item (click)=\"onEdit()\">\n    <mat-icon svgIcon=\"gio:edit-pencil\"></mat-icon>\n    <span>Edit</span>\n  </button>\n\n  <button mat-menu-item (click)=\"onDisable()\">\n    <mat-icon [svgIcon]=\"step.enabled ? 'gio:prohibition' : 'gio:check-circled-outline'\"></mat-icon>\n    <span>{{ step.enabled ? 'Disable' : 'Enable' }}</span>\n  </button>\n\n  <button mat-menu-item (click)=\"onDelete()\">\n    <mat-icon svgIcon=\"gio:trash\"></mat-icon>\n    <span>Delete</span>\n  </button>\n</mat-menu>\n", styles: ["@charset \"UTF-8\";.gio-top-bar-menu .gio-badge-accent{background-color:var(--gio-oem-palette--active, #e7e2fb);color:var(--gio-oem-palette--active-contrast, #100c27)}:host{display:flex;align-items:center;padding:8px;border:1px solid #6c59bd;border-radius:8px}:host-context(.disabled){border:1px solid #d3d5dc}.info{display:flex;max-width:300px;flex-direction:column;margin-left:4px;gap:4px}.info__head{display:flex;align-items:center}.info__head__icon{min-width:24px;flex:1 1 24px;margin-right:8px}.info__head__name{overflow:hidden;flex:1 1 auto;text-overflow:ellipsis;white-space:nowrap}.info__description{font-size:12px;font-weight:400;line-height:16px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;color:#606274;-webkit-line-clamp:2}.info__description:empty{display:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }]; }, propDecorators: { step: [{
                 type: Input
             }], policies: [{

package/esm2022/lib/components/flows-menu/gio-ps-flows-menu.component.mjs

@@ -172,11 +172,11 @@ export class GioPolicyStudioFlowsMenuComponent {
             .subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GioPolicyStudioFlowsMenuComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GioPolicyStudioFlowsMenuComponent, selector: "gio-ps-flows-menu", inputs: { loading: "loading", apiType: "apiType", flowExecution: "flowExecution", flowsGroups: "flowsGroups", selectedFlow: "selectedFlow", entrypoints: "entrypoints" }, outputs: { selectedFlowChange: "selectedFlowChange", flowsGroupsChange: "flowsGroupsChange", flowExecutionChange: "flowExecutionChange" }, usesOnChanges: true, ngImport: i0, template: "<!--\n\n    Copyright (C) 2023 The Gravitee team (http://gravitee.io)\n    \n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n    \n            http://www.apache.org/licenses/LICENSE-2.0\n    \n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n\n<div class=\"header\">\n  <div class=\"header__label\">\n    Flows <mat-icon svgIcon=\"gio:info\" matTooltip=\"Flows allow you to apply different policies on your API event phases\"></mat-icon>\n  </div>\n  <div class=\"header__configBtn\">\n    <button class=\"header__configBtn_edit\" mat-stroked-button [disabled]=\"loading\" (click)=\"onConfigureExecution(flowExecution)\">\n      <mat-icon svgIcon=\"gio:settings\"></mat-icon>\n    </button>\n  </div>\n</div>\n\n<div class=\"list\" *ngIf=\"!loading; else loadingList\">\n  <div *ngFor=\"let flowsGroup of flowGroupMenuItems\" class=\"list__flowsGroup\">\n    <div class=\"list__flowsGroup__header\">\n      <div class=\"list__flowsGroup__header__label\">\n        <mat-icon *ngIf=\"flowsGroup._icon\" [svgIcon]=\"flowsGroup._icon\"></mat-icon>\n        <span>{{ flowsGroup.name }}</span>\n      </div>\n      <div class=\"list__flowsGroup__header__addBtn\">\n        <button mat-button (click)=\"onAddFlow(flowsGroup)\"><mat-icon svgIcon=\"gio:plus\" matTooltip=\"New flow\"></mat-icon></button>\n      </div>\n    </div>\n\n    <div\n      *ngFor=\"let flow of flowsGroup.flows\"\n      class=\"list__flowsGroup__flow\"\n      [class.selected]=\"flow.selected\"\n      (click)=\"selectFlow(flowsGroup._id, flow._id)\"\n      (mouseout)=\"flow.mouseOver = false\"\n      (mouseover)=\"flow.mouseOver = true\"\n    >\n      <div *ngIf=\"flow.name\" class=\"list__flowsGroup__flow__name\" [attr.title]=\"flow.name\">\n        {{ flow.name }}\n      </div>\n      <div class=\"list__flowsGroup__flow__infos\">\n        <div class=\"list__flowsGroup__flow__infos__badges\">\n          <span *ngFor=\"let badge of flow.badges\" class=\"list__flowsGroup__flow__infos__badges__badge\" [ngClass]=\"badge.class\">{{\n            badge.label\n          }}</span>\n        </div>\n        <div class=\"list__flowsGroup__flow__infos__pathOrChannelLabel\">\n          <span *ngIf=\"flow.pathOrChannelLabel; else emptyPathOrChannelLabel\" [attr.title]=\"flow.pathOrChannelLabel\">{{\n            flow.pathOrChannelLabel\n          }}</span>\n          <ng-template #emptyPathOrChannelLabel>\n            <em>Empty</em>\n          </ng-template>\n        </div>\n\n        <span *ngIf=\"flow.hasCondition\" class=\"list__flowsGroup__flow__infos__conditionBadge gio-badge-neutral\" matTooltip=\"Conditioned\"\n          ><mat-icon svgIcon=\"gio:if\"></mat-icon\n        ></span>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #loadingList>\n  <div class=\"loadingList\">\n    <gio-loader></gio-loader>\n  </div>\n</ng-template>\n", styles: [".gio-top-bar-menu .gio-badge-accent{background-color:var(--gio-oem-palette--active, #e7e2fb);color:var(--gio-oem-palette--active-contrast, #100c27)}:host{display:flex;height:100%;max-height:100%;flex-direction:column;padding-top:16px}.header{display:flex;align-items:center;padding:0 16px;margin-bottom:16px}.header__label{font-size:16px;font-weight:500;letter-spacing:.4px;line-height:24px;display:flex;flex:1 1 auto;align-items:center;margin-bottom:0;gap:8px}.header__configBtn{margin-left:8px}.list{padding:0 16px;overflow-y:overlay}.list__flowsGroup{display:flex;flex-direction:column;padding-bottom:8px;gap:8px}.list__flowsGroup__header{display:flex;align-items:center;padding:8px 8px 8px 10px;border-radius:8px;background-color:#cdc5f7}.list__flowsGroup__header__label{font-size:14px;font-weight:500;line-height:20px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;display:flex;overflow:hidden;flex:1 1 auto;align-items:center;gap:8px}.list__flowsGroup__header__label>mat-icon{width:22px;height:22px;flex:0 0 auto}.list__flowsGroup__header__label>span{display:-webkit-box;overflow:hidden;flex:1 1 auto;-webkit-box-orient:vertical;-webkit-line-clamp:2}.list__flowsGroup__header__addBtn{margin-left:8px}.list__flowsGroup__flow{display:flex;overflow:hidden;height:68px;flex-direction:column;justify-content:center;padding:7px;border:1px solid #d3d5dc;border-radius:8px;gap:8px}.list__flowsGroup__flow:hover,.list__flowsGroup__flow.selected{padding:6px;border:2px solid #876fec;cursor:pointer}.list__flowsGroup__flow__name{overflow:hidden;padding-left:4px;text-overflow:ellipsis;white-space:nowrap}.list__flowsGroup__flow__infos{display:flex;align-items:center}.list__flowsGroup__flow__infos__badges{flex:0 0 auto}.list__flowsGroup__flow__infos__badges__badge{width:auto}.list__flowsGroup__flow__infos__pathOrChannelLabel{overflow:hidden;flex:1 1 auto;direction:rtl;text-align:left;text-overflow:ellipsis;white-space:nowrap}.list__flowsGroup__flow__infos__pathOrChannelLabel span{direction:ltr;unicode-bidi:bidi-override}.list__flowsGroup__flow__infos__conditionBadge{flex:0 0 auto}.loadingList{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.GioLoaderComponent, selector: "gio-loader" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GioPolicyStudioFlowsMenuComponent, selector: "gio-ps-flows-menu", inputs: { loading: "loading", apiType: "apiType", flowExecution: "flowExecution", flowsGroups: "flowsGroups", selectedFlow: "selectedFlow", entrypoints: "entrypoints" }, outputs: { selectedFlowChange: "selectedFlowChange", flowsGroupsChange: "flowsGroupsChange", flowExecutionChange: "flowExecutionChange" }, usesOnChanges: true, ngImport: i0, template: "<!--\n\n    Copyright (C) 2023 The Gravitee team (http://gravitee.io)\n    \n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n    \n            http://www.apache.org/licenses/LICENSE-2.0\n    \n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n\n<div class=\"header\">\n  <div class=\"header__label\">\n    Flows <mat-icon svgIcon=\"gio:info\" matTooltip=\"Flows allow you to apply different policies on your API event phases\"></mat-icon>\n  </div>\n  <div class=\"header__configBtn\">\n    <button class=\"header__configBtn_edit\" mat-stroked-button [disabled]=\"loading\" (click)=\"onConfigureExecution(flowExecution)\">\n      <mat-icon svgIcon=\"gio:settings\"></mat-icon>\n    </button>\n  </div>\n</div>\n\n<div class=\"list\" *ngIf=\"!loading; else loadingList\">\n  <div *ngFor=\"let flowsGroup of flowGroupMenuItems\" class=\"list__flowsGroup\">\n    <div class=\"list__flowsGroup__header\">\n      <div class=\"list__flowsGroup__header__label\">\n        <mat-icon *ngIf=\"flowsGroup._icon\" [svgIcon]=\"flowsGroup._icon\"></mat-icon>\n        <span>{{ flowsGroup.name }}</span>\n      </div>\n      <div class=\"list__flowsGroup__header__addBtn\">\n        <button mat-button (click)=\"onAddFlow(flowsGroup)\"><mat-icon svgIcon=\"gio:plus\" matTooltip=\"New flow\"></mat-icon></button>\n      </div>\n    </div>\n\n    <div\n      *ngFor=\"let flow of flowsGroup.flows\"\n      class=\"list__flowsGroup__flow\"\n      [class.selected]=\"flow.selected\"\n      (click)=\"selectFlow(flowsGroup._id, flow._id)\"\n      (mouseout)=\"flow.mouseOver = false\"\n      (mouseover)=\"flow.mouseOver = true\"\n    >\n      <div *ngIf=\"flow.name\" class=\"list__flowsGroup__flow__name\" [attr.title]=\"flow.name\">\n        {{ flow.name }}\n      </div>\n      <div class=\"list__flowsGroup__flow__infos\">\n        <div class=\"list__flowsGroup__flow__infos__badges\">\n          <span *ngFor=\"let badge of flow.badges\" class=\"list__flowsGroup__flow__infos__badges__badge\" [ngClass]=\"badge.class\">{{\n            badge.label\n          }}</span>\n        </div>\n        <div class=\"list__flowsGroup__flow__infos__pathOrChannelLabel\">\n          <span *ngIf=\"flow.pathOrChannelLabel; else emptyPathOrChannelLabel\" [attr.title]=\"flow.pathOrChannelLabel\">{{\n            flow.pathOrChannelLabel\n          }}</span>\n          <ng-template #emptyPathOrChannelLabel>\n            <em>Empty</em>\n          </ng-template>\n        </div>\n\n        <span *ngIf=\"flow.hasCondition\" class=\"list__flowsGroup__flow__infos__conditionBadge gio-badge-neutral\" matTooltip=\"Conditioned\"\n          ><mat-icon svgIcon=\"gio:if\"></mat-icon\n        ></span>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #loadingList>\n  <div class=\"loadingList\">\n    <gio-loader></gio-loader>\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gio-top-bar-menu .gio-badge-accent{background-color:var(--gio-oem-palette--active, #e7e2fb);color:var(--gio-oem-palette--active-contrast, #100c27)}:host{display:flex;height:100%;max-height:100%;flex-direction:column;padding-top:16px}.header{display:flex;align-items:center;padding:0 16px;margin-bottom:16px}.header__label{font-size:16px;font-weight:500;letter-spacing:.4px;line-height:24px;display:flex;flex:1 1 auto;align-items:center;margin-bottom:0;gap:8px}.header__configBtn{margin-left:8px}.list{padding:0 16px;overflow-y:overlay}.list__flowsGroup{display:flex;flex-direction:column;padding-bottom:8px;gap:8px}.list__flowsGroup__header{display:flex;align-items:center;padding:8px 8px 8px 10px;border-radius:8px;background-color:#cdc5f7}.list__flowsGroup__header__label{font-size:14px;font-weight:500;line-height:20px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;display:flex;overflow:hidden;flex:1 1 auto;align-items:center;gap:8px}.list__flowsGroup__header__label>mat-icon{width:22px;height:22px;flex:0 0 auto}.list__flowsGroup__header__label>span{display:-webkit-box;overflow:hidden;flex:1 1 auto;-webkit-box-orient:vertical;-webkit-line-clamp:2}.list__flowsGroup__header__addBtn{margin-left:8px}.list__flowsGroup__flow{display:flex;overflow:hidden;height:68px;flex-direction:column;justify-content:center;padding:7px;border:1px solid #d3d5dc;border-radius:8px;gap:8px}.list__flowsGroup__flow:hover,.list__flowsGroup__flow.selected{padding:6px;border:2px solid #876fec;cursor:pointer}.list__flowsGroup__flow__name{overflow:hidden;padding-left:4px;text-overflow:ellipsis;white-space:nowrap}.list__flowsGroup__flow__infos{display:flex;align-items:center}.list__flowsGroup__flow__infos__badges{flex:0 0 auto}.list__flowsGroup__flow__infos__badges__badge{width:auto}.list__flowsGroup__flow__infos__pathOrChannelLabel{overflow:hidden;flex:1 1 auto;direction:rtl;text-align:left;text-overflow:ellipsis;white-space:nowrap}.list__flowsGroup__flow__infos__pathOrChannelLabel span{direction:ltr;unicode-bidi:bidi-override}.list__flowsGroup__flow__infos__conditionBadge{flex:0 0 auto}.loadingList{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.GioLoaderComponent, selector: "gio-loader" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GioPolicyStudioFlowsMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gio-ps-flows-menu', template: "<!--\n\n    Copyright (C) 2023 The Gravitee team (http://gravitee.io)\n    \n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n    \n            http://www.apache.org/licenses/LICENSE-2.0\n    \n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n\n<div class=\"header\">\n  <div class=\"header__label\">\n    Flows <mat-icon svgIcon=\"gio:info\" matTooltip=\"Flows allow you to apply different policies on your API event phases\"></mat-icon>\n  </div>\n  <div class=\"header__configBtn\">\n    <button class=\"header__configBtn_edit\" mat-stroked-button [disabled]=\"loading\" (click)=\"onConfigureExecution(flowExecution)\">\n      <mat-icon svgIcon=\"gio:settings\"></mat-icon>\n    </button>\n  </div>\n</div>\n\n<div class=\"list\" *ngIf=\"!loading; else loadingList\">\n  <div *ngFor=\"let flowsGroup of flowGroupMenuItems\" class=\"list__flowsGroup\">\n    <div class=\"list__flowsGroup__header\">\n      <div class=\"list__flowsGroup__header__label\">\n        <mat-icon *ngIf=\"flowsGroup._icon\" [svgIcon]=\"flowsGroup._icon\"></mat-icon>\n        <span>{{ flowsGroup.name }}</span>\n      </div>\n      <div class=\"list__flowsGroup__header__addBtn\">\n        <button mat-button (click)=\"onAddFlow(flowsGroup)\"><mat-icon svgIcon=\"gio:plus\" matTooltip=\"New flow\"></mat-icon></button>\n      </div>\n    </div>\n\n    <div\n      *ngFor=\"let flow of flowsGroup.flows\"\n      class=\"list__flowsGroup__flow\"\n      [class.selected]=\"flow.selected\"\n      (click)=\"selectFlow(flowsGroup._id, flow._id)\"\n      (mouseout)=\"flow.mouseOver = false\"\n      (mouseover)=\"flow.mouseOver = true\"\n    >\n      <div *ngIf=\"flow.name\" class=\"list__flowsGroup__flow__name\" [attr.title]=\"flow.name\">\n        {{ flow.name }}\n      </div>\n      <div class=\"list__flowsGroup__flow__infos\">\n        <div class=\"list__flowsGroup__flow__infos__badges\">\n          <span *ngFor=\"let badge of flow.badges\" class=\"list__flowsGroup__flow__infos__badges__badge\" [ngClass]=\"badge.class\">{{\n            badge.label\n          }}</span>\n        </div>\n        <div class=\"list__flowsGroup__flow__infos__pathOrChannelLabel\">\n          <span *ngIf=\"flow.pathOrChannelLabel; else emptyPathOrChannelLabel\" [attr.title]=\"flow.pathOrChannelLabel\">{{\n            flow.pathOrChannelLabel\n          }}</span>\n          <ng-template #emptyPathOrChannelLabel>\n            <em>Empty</em>\n          </ng-template>\n        </div>\n\n        <span *ngIf=\"flow.hasCondition\" class=\"list__flowsGroup__flow__infos__conditionBadge gio-badge-neutral\" matTooltip=\"Conditioned\"\n          ><mat-icon svgIcon=\"gio:if\"></mat-icon\n        ></span>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #loadingList>\n  <div class=\"loadingList\">\n    <gio-loader></gio-loader>\n  </div>\n</ng-template>\n", styles: [".gio-top-bar-menu .gio-badge-accent{background-color:var(--gio-oem-palette--active, #e7e2fb);color:var(--gio-oem-palette--active-contrast, #100c27)}:host{display:flex;height:100%;max-height:100%;flex-direction:column;padding-top:16px}.header{display:flex;align-items:center;padding:0 16px;margin-bottom:16px}.header__label{font-size:16px;font-weight:500;letter-spacing:.4px;line-height:24px;display:flex;flex:1 1 auto;align-items:center;margin-bottom:0;gap:8px}.header__configBtn{margin-left:8px}.list{padding:0 16px;overflow-y:overlay}.list__flowsGroup{display:flex;flex-direction:column;padding-bottom:8px;gap:8px}.list__flowsGroup__header{display:flex;align-items:center;padding:8px 8px 8px 10px;border-radius:8px;background-color:#cdc5f7}.list__flowsGroup__header__label{font-size:14px;font-weight:500;line-height:20px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;display:flex;overflow:hidden;flex:1 1 auto;align-items:center;gap:8px}.list__flowsGroup__header__label>mat-icon{width:22px;height:22px;flex:0 0 auto}.list__flowsGroup__header__label>span{display:-webkit-box;overflow:hidden;flex:1 1 auto;-webkit-box-orient:vertical;-webkit-line-clamp:2}.list__flowsGroup__header__addBtn{margin-left:8px}.list__flowsGroup__flow{display:flex;overflow:hidden;height:68px;flex-direction:column;justify-content:center;padding:7px;border:1px solid #d3d5dc;border-radius:8px;gap:8px}.list__flowsGroup__flow:hover,.list__flowsGroup__flow.selected{padding:6px;border:2px solid #876fec;cursor:pointer}.list__flowsGroup__flow__name{overflow:hidden;padding-left:4px;text-overflow:ellipsis;white-space:nowrap}.list__flowsGroup__flow__infos{display:flex;align-items:center}.list__flowsGroup__flow__infos__badges{flex:0 0 auto}.list__flowsGroup__flow__infos__badges__badge{width:auto}.list__flowsGroup__flow__infos__pathOrChannelLabel{overflow:hidden;flex:1 1 auto;direction:rtl;text-align:left;text-overflow:ellipsis;white-space:nowrap}.list__flowsGroup__flow__infos__pathOrChannelLabel span{direction:ltr;unicode-bidi:bidi-override}.list__flowsGroup__flow__infos__conditionBadge{flex:0 0 auto}.loadingList{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center}\n"] }]
+            args: [{ selector: 'gio-ps-flows-menu', template: "<!--\n\n    Copyright (C) 2023 The Gravitee team (http://gravitee.io)\n    \n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n    \n            http://www.apache.org/licenses/LICENSE-2.0\n    \n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n\n<div class=\"header\">\n  <div class=\"header__label\">\n    Flows <mat-icon svgIcon=\"gio:info\" matTooltip=\"Flows allow you to apply different policies on your API event phases\"></mat-icon>\n  </div>\n  <div class=\"header__configBtn\">\n    <button class=\"header__configBtn_edit\" mat-stroked-button [disabled]=\"loading\" (click)=\"onConfigureExecution(flowExecution)\">\n      <mat-icon svgIcon=\"gio:settings\"></mat-icon>\n    </button>\n  </div>\n</div>\n\n<div class=\"list\" *ngIf=\"!loading; else loadingList\">\n  <div *ngFor=\"let flowsGroup of flowGroupMenuItems\" class=\"list__flowsGroup\">\n    <div class=\"list__flowsGroup__header\">\n      <div class=\"list__flowsGroup__header__label\">\n        <mat-icon *ngIf=\"flowsGroup._icon\" [svgIcon]=\"flowsGroup._icon\"></mat-icon>\n        <span>{{ flowsGroup.name }}</span>\n      </div>\n      <div class=\"list__flowsGroup__header__addBtn\">\n        <button mat-button (click)=\"onAddFlow(flowsGroup)\"><mat-icon svgIcon=\"gio:plus\" matTooltip=\"New flow\"></mat-icon></button>\n      </div>\n    </div>\n\n    <div\n      *ngFor=\"let flow of flowsGroup.flows\"\n      class=\"list__flowsGroup__flow\"\n      [class.selected]=\"flow.selected\"\n      (click)=\"selectFlow(flowsGroup._id, flow._id)\"\n      (mouseout)=\"flow.mouseOver = false\"\n      (mouseover)=\"flow.mouseOver = true\"\n    >\n      <div *ngIf=\"flow.name\" class=\"list__flowsGroup__flow__name\" [attr.title]=\"flow.name\">\n        {{ flow.name }}\n      </div>\n      <div class=\"list__flowsGroup__flow__infos\">\n        <div class=\"list__flowsGroup__flow__infos__badges\">\n          <span *ngFor=\"let badge of flow.badges\" class=\"list__flowsGroup__flow__infos__badges__badge\" [ngClass]=\"badge.class\">{{\n            badge.label\n          }}</span>\n        </div>\n        <div class=\"list__flowsGroup__flow__infos__pathOrChannelLabel\">\n          <span *ngIf=\"flow.pathOrChannelLabel; else emptyPathOrChannelLabel\" [attr.title]=\"flow.pathOrChannelLabel\">{{\n            flow.pathOrChannelLabel\n          }}</span>\n          <ng-template #emptyPathOrChannelLabel>\n            <em>Empty</em>\n          </ng-template>\n        </div>\n\n        <span *ngIf=\"flow.hasCondition\" class=\"list__flowsGroup__flow__infos__conditionBadge gio-badge-neutral\" matTooltip=\"Conditioned\"\n          ><mat-icon svgIcon=\"gio:if\"></mat-icon\n        ></span>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #loadingList>\n  <div class=\"loadingList\">\n    <gio-loader></gio-loader>\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gio-top-bar-menu .gio-badge-accent{background-color:var(--gio-oem-palette--active, #e7e2fb);color:var(--gio-oem-palette--active-contrast, #100c27)}:host{display:flex;height:100%;max-height:100%;flex-direction:column;padding-top:16px}.header{display:flex;align-items:center;padding:0 16px;margin-bottom:16px}.header__label{font-size:16px;font-weight:500;letter-spacing:.4px;line-height:24px;display:flex;flex:1 1 auto;align-items:center;margin-bottom:0;gap:8px}.header__configBtn{margin-left:8px}.list{padding:0 16px;overflow-y:overlay}.list__flowsGroup{display:flex;flex-direction:column;padding-bottom:8px;gap:8px}.list__flowsGroup__header{display:flex;align-items:center;padding:8px 8px 8px 10px;border-radius:8px;background-color:#cdc5f7}.list__flowsGroup__header__label{font-size:14px;font-weight:500;line-height:20px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;display:flex;overflow:hidden;flex:1 1 auto;align-items:center;gap:8px}.list__flowsGroup__header__label>mat-icon{width:22px;height:22px;flex:0 0 auto}.list__flowsGroup__header__label>span{display:-webkit-box;overflow:hidden;flex:1 1 auto;-webkit-box-orient:vertical;-webkit-line-clamp:2}.list__flowsGroup__header__addBtn{margin-left:8px}.list__flowsGroup__flow{display:flex;overflow:hidden;height:68px;flex-direction:column;justify-content:center;padding:7px;border:1px solid #d3d5dc;border-radius:8px;gap:8px}.list__flowsGroup__flow:hover,.list__flowsGroup__flow.selected{padding:6px;border:2px solid #876fec;cursor:pointer}.list__flowsGroup__flow__name{overflow:hidden;padding-left:4px;text-overflow:ellipsis;white-space:nowrap}.list__flowsGroup__flow__infos{display:flex;align-items:center}.list__flowsGroup__flow__infos__badges{flex:0 0 auto}.list__flowsGroup__flow__infos__badges__badge{width:auto}.list__flowsGroup__flow__infos__pathOrChannelLabel{overflow:hidden;flex:1 1 auto;direction:rtl;text-align:left;text-overflow:ellipsis;white-space:nowrap}.list__flowsGroup__flow__infos__pathOrChannelLabel span{direction:ltr;unicode-bidi:bidi-override}.list__flowsGroup__flow__infos__conditionBadge{flex:0 0 auto}.loadingList{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }]; }, propDecorators: { loading: [{
                 type: Input
             }], apiType: [{

package/esm2022/lib/components/policies-catalog-dialog/gio-ps-policies-catalog-dialog.component.mjs

@@ -112,11 +112,11 @@ export class GioPolicyStudioPoliciesCatalogDialogComponent {
         this.isUnlicensed = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GioPolicyStudioPoliciesCatalogDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GioPolicyStudioPoliciesCatalogDialogComponent, selector: "gio-ps-policies-catalog-dialog", ngImport: i0, template: "<!--\n\n    Copyright (C) 2015 The Gravitee team (http://gravitee.io)\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n            http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n<h2 mat-dialog-title class=\"title\">\n  Policies for <span class=\"title__phase\">{{ executionPhaseLabel }}</span> phase\n\n  <button class=\"title__closeBtn\" mat-icon-button aria-label=\"Close dialog\" [mat-dialog-close]=\"\">\n    <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n  </button>\n</h2>\n\n<ng-container>\n  <mat-dialog-content *ngIf=\"!selectedPolicy\" class=\"policiesCatalog\">\n    <div class=\"policiesCatalog__filters\" [formGroup]=\"filtersForm\">\n      <mat-form-field class=\"policiesCatalog__filters__search\" appearance=\"outline\">\n        <mat-label>Search</mat-label>\n        <input matInput formControlName=\"search\" />\n        <button\n          matIconSuffix\n          mat-icon-button\n          aria-label=\"Clear\"\n          *ngIf=\"filtersForm.get('search')?.value\"\n          (click)=\"filtersForm.get('search')?.setValue('')\"\n        >\n          <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-chip-listbox\n        *ngIf=\"categories.length > 1\"\n        class=\"policiesCatalog__filters__categories\"\n        aria-label=\"Categories selection\"\n        multiple\n        formControlName=\"categories\"\n      >\n        <mat-chip-option *ngFor=\"let category of categories\" [selected]=\"category\" [value]=\"category\">{{\n          category | titlecase\n        }}</mat-chip-option>\n      </mat-chip-listbox>\n    </div>\n\n    <div *ngIf=\"policies.length; else emptyPoliciesTpl\" class=\"policiesCatalog__list\">\n      <div *ngFor=\"let policy of policies\" class=\"policiesCatalog__list__policy\">\n        <div class=\"policiesCatalog__list__policy__head\">\n          <mat-icon class=\"policiesCatalog__list__policy__head__icon\" [svgIcon]=\"policy.icon ?? 'gio:puzzle'\"></mat-icon>\n\n          <span *ngIf=\"policy.name\" class=\"policiesCatalog__list__policy__head__name\">{{ policy.name }}</span>\n        </div>\n\n        <div class=\"policiesCatalog__list__policy__enterprise\" *ngIf=\"policy.deployed === false\">\n          <mat-icon\n            class=\"policiesCatalog__list__policy__enterprise__lock\"\n            [svgIcon]=\"'gio:lock'\"\n            matTooltip=\"This policy is only available for users with an enterprise license.\"\n          ></mat-icon>\n        </div>\n\n        <div *ngIf=\"policy.description\" class=\"policiesCatalog__list__policy__description\">{{ policy.description }}</div>\n\n        <button class=\"policiesCatalog__list__policy__selectBtn\" mat-stroked-button role=\"dialog\" (click)=\"onSelectPolicy(policy)\">\n          Select\n        </button>\n      </div>\n    </div>\n  </mat-dialog-content>\n</ng-container>\n\n<ng-template #emptyPoliciesTpl>\n  <div class=\"emptyPoliciesCatalog\">No policies available.</div>\n</ng-template>\n\n<mat-dialog-content *ngIf=\"selectedPolicy\" class=\"policyForm\">\n  <button class=\"policyForm__goBackBtn\" mat-stroked-button (click)=\"onGoBack()\">\n    <mat-icon svgIcon=\"gio:arrow-left\"></mat-icon>\n    Go back\n  </button>\n\n  <gio-banner *ngIf=\"isUnlicensed\" type=\"error\" icon=\"gio:universe\">\n    This policy is only available for users with an enterprise license.\n    <span gioBannerBody>Request a license to upgrade your account and unlock this policy</span>\n    <div gioBannerAction>\n      <a *ngIf=\"trialUrl\" mat-stroked-button [href]=\"trialUrl\" target=\"_blank\">Request upgrade</a>\n    </div>\n  </gio-banner>\n\n  <div class=\"policyForm__info\">\n    <div class=\"policyForm__info__head\">\n      <mat-icon class=\"policyForm__info__head__icon\" [svgIcon]=\"selectedPolicy.icon ?? 'gio:puzzle'\"></mat-icon>\n\n      <span *ngIf=\"selectedPolicy.name\" class=\"policyForm__info__head__name\">{{ selectedPolicy.name }}</span>\n    </div>\n\n    <div *ngIf=\"selectedPolicy.description\" class=\"policyForm__info__description\">{{ selectedPolicy.description }}</div>\n  </div>\n\n  <gio-ps-step-form [policy]=\"selectedPolicy\" (stepChange)=\"onStepChange($event)\" (isValid)=\"onIsValid($event)\"></gio-ps-step-form>\n</mat-dialog-content>\n\n<mat-dialog-actions class=\"actions\" align=\"end\">\n  <button class=\"actions__cancelBtn\" mat-button [mat-dialog-close]=\"\">Cancel</button>\n  <button\n    *ngIf=\"selectedPolicy\"\n    class=\"actions__addBtn\"\n    color=\"primary\"\n    mat-flat-button\n    role=\"dialog\"\n    [disabled]=\"!isValid || isUnlicensed\"\n    (click)=\"onAddPolicy()\"\n  >\n    Add policy\n  </button>\n</mat-dialog-actions>\n", styles: [".gio-top-bar-menu .gio-badge-accent{background-color:var(--gio-oem-palette--active, #e7e2fb);color:var(--gio-oem-palette--active-contrast, #100c27)}.title__closeBtn{top:0;right:-24px;float:right}.policiesCatalog__filters{display:flex;flex-direction:column;padding:0 0 8px;gap:8px}.policiesCatalog__filters__search{width:100%;height:54px;padding-bottom:0}.policiesCatalog__list{--grid-layout-gap: 16px;--grid-column-count: 3;--grid-item-min-width: 200px;--gap-count: calc(var(--grid-column-count) - 1);--total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));--grid-item-max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));display:grid;grid-gap:var(--grid-layout-gap);grid-template-columns:repeat(auto-fill,minmax(max(var(--grid-item-min-width),var(--grid-item-max-width)),1fr))}.policiesCatalog__list__policy{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:16px;border:1px solid #d3d5dc;border-radius:8px;gap:4px}.policiesCatalog__list__policy__head{display:flex;max-width:95%;align-items:center}.policiesCatalog__list__policy__head__icon{min-width:24px;flex:1 1 24px;margin-right:8px}.policiesCatalog__list__policy__head__name{overflow:hidden;flex:1 1 auto;text-overflow:ellipsis;white-space:nowrap}.policiesCatalog__list__policy__enterprise{position:absolute;top:0;right:0;padding:8px 8px 8px 16px;border-radius:0 8px 0 38px;background:#e7e8ef;color:#6c59bd}.policiesCatalog__list__policy__enterprise__lock{min-width:16px;max-width:16px;color:#6c59bd}.policiesCatalog__list__policy__description{font-size:12px;font-weight:400;line-height:16px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;color:#606274;-webkit-line-clamp:2}.policiesCatalog__list__policy__description:empty{display:none}.policiesCatalog__list__policy__selectBtn{margin-top:8px}.policyForm__goBackBtn{margin:16px 0}.policyForm__info{display:flex;max-width:100%;flex-direction:column;align-items:flex-start;padding-bottom:16px;gap:4px}.policyForm__info__head{display:flex;align-items:center}.policyForm__info__head__icon{min-width:24px;flex:1 1 24px;margin-right:8px}.policyForm__info__head__name{flex:1 1 auto}.policyForm__info__description{font-size:12px;font-weight:400;line-height:16px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#606274}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i8.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i8.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.GioBannerComponent, selector: "gio-banner", inputs: ["type", "icon", "collapsible"] }, { kind: "directive", type: i10.GioBannerBodyDirective, selector: "[gioBannerBody]" }, { kind: "directive", type: i10.GioBannerActionDirective, selector: "[gioBannerAction]" }, { kind: "component", type: i11.GioPolicyStudioStepFormComponent, selector: "gio-ps-step-form", inputs: ["step", "policy"], outputs: ["stepChange", "isValid"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GioPolicyStudioPoliciesCatalogDialogComponent, selector: "gio-ps-policies-catalog-dialog", ngImport: i0, template: "<!--\n\n    Copyright (C) 2015 The Gravitee team (http://gravitee.io)\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n            http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n<h2 mat-dialog-title class=\"title\">\n  Policies for <span class=\"title__phase\">{{ executionPhaseLabel }}</span> phase\n\n  <button class=\"title__closeBtn\" mat-icon-button aria-label=\"Close dialog\" [mat-dialog-close]=\"\">\n    <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n  </button>\n</h2>\n\n<ng-container>\n  <mat-dialog-content *ngIf=\"!selectedPolicy\" class=\"policiesCatalog\">\n    <div class=\"policiesCatalog__filters\" [formGroup]=\"filtersForm\">\n      <mat-form-field class=\"policiesCatalog__filters__search\" appearance=\"outline\">\n        <mat-label>Search</mat-label>\n        <input matInput formControlName=\"search\" />\n        <button\n          matIconSuffix\n          mat-icon-button\n          aria-label=\"Clear\"\n          *ngIf=\"filtersForm.get('search')?.value\"\n          (click)=\"filtersForm.get('search')?.setValue('')\"\n        >\n          <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-chip-listbox\n        *ngIf=\"categories.length > 1\"\n        class=\"policiesCatalog__filters__categories\"\n        aria-label=\"Categories selection\"\n        multiple\n        formControlName=\"categories\"\n      >\n        <mat-chip-option *ngFor=\"let category of categories\" [selected]=\"category\" [value]=\"category\">{{\n          category | titlecase\n        }}</mat-chip-option>\n      </mat-chip-listbox>\n    </div>\n\n    <div *ngIf=\"policies.length; else emptyPoliciesTpl\" class=\"policiesCatalog__list\">\n      <div *ngFor=\"let policy of policies\" class=\"policiesCatalog__list__policy\">\n        <div class=\"policiesCatalog__list__policy__head\">\n          <mat-icon class=\"policiesCatalog__list__policy__head__icon\" [svgIcon]=\"policy.icon ?? 'gio:puzzle'\"></mat-icon>\n\n          <span *ngIf=\"policy.name\" class=\"policiesCatalog__list__policy__head__name\">{{ policy.name }}</span>\n        </div>\n\n        <div class=\"policiesCatalog__list__policy__enterprise\" *ngIf=\"policy.deployed === false\">\n          <mat-icon\n            class=\"policiesCatalog__list__policy__enterprise__lock\"\n            [svgIcon]=\"'gio:lock'\"\n            matTooltip=\"This policy is only available for users with an enterprise license.\"\n          ></mat-icon>\n        </div>\n\n        <div *ngIf=\"policy.description\" class=\"policiesCatalog__list__policy__description\">{{ policy.description }}</div>\n\n        <button class=\"policiesCatalog__list__policy__selectBtn\" mat-stroked-button role=\"dialog\" (click)=\"onSelectPolicy(policy)\">\n          Select\n        </button>\n      </div>\n    </div>\n  </mat-dialog-content>\n</ng-container>\n\n<ng-template #emptyPoliciesTpl>\n  <div class=\"emptyPoliciesCatalog\">No policies available.</div>\n</ng-template>\n\n<mat-dialog-content *ngIf=\"selectedPolicy\" class=\"policyForm\">\n  <button class=\"policyForm__goBackBtn\" mat-stroked-button (click)=\"onGoBack()\">\n    <mat-icon svgIcon=\"gio:arrow-left\"></mat-icon>\n    Go back\n  </button>\n\n  <gio-banner *ngIf=\"isUnlicensed\" type=\"error\" icon=\"gio:universe\">\n    This policy is only available for users with an enterprise license.\n    <span gioBannerBody>Request a license to upgrade your account and unlock this policy</span>\n    <div gioBannerAction>\n      <a *ngIf=\"trialUrl\" mat-stroked-button [href]=\"trialUrl\" target=\"_blank\">Request upgrade</a>\n    </div>\n  </gio-banner>\n\n  <div class=\"policyForm__info\">\n    <div class=\"policyForm__info__head\">\n      <mat-icon class=\"policyForm__info__head__icon\" [svgIcon]=\"selectedPolicy.icon ?? 'gio:puzzle'\"></mat-icon>\n\n      <span *ngIf=\"selectedPolicy.name\" class=\"policyForm__info__head__name\">{{ selectedPolicy.name }}</span>\n    </div>\n\n    <div *ngIf=\"selectedPolicy.description\" class=\"policyForm__info__description\">{{ selectedPolicy.description }}</div>\n  </div>\n\n  <gio-ps-step-form [policy]=\"selectedPolicy\" (stepChange)=\"onStepChange($event)\" (isValid)=\"onIsValid($event)\"></gio-ps-step-form>\n</mat-dialog-content>\n\n<mat-dialog-actions class=\"actions\" align=\"end\">\n  <button class=\"actions__cancelBtn\" mat-button [mat-dialog-close]=\"\">Cancel</button>\n  <button\n    *ngIf=\"selectedPolicy\"\n    class=\"actions__addBtn\"\n    color=\"primary\"\n    mat-flat-button\n    role=\"dialog\"\n    [disabled]=\"!isValid || isUnlicensed\"\n    (click)=\"onAddPolicy()\"\n  >\n    Add policy\n  </button>\n</mat-dialog-actions>\n", styles: ["@charset \"UTF-8\";.gio-top-bar-menu .gio-badge-accent{background-color:var(--gio-oem-palette--active, #e7e2fb);color:var(--gio-oem-palette--active-contrast, #100c27)}.title__closeBtn{top:0;right:-24px;float:right}.policiesCatalog__filters{display:flex;flex-direction:column;padding:0 0 8px;gap:8px}.policiesCatalog__filters__search{width:100%;height:54px;padding-bottom:0}.policiesCatalog__list{--grid-layout-gap: 16px;--grid-column-count: 3;--grid-item-min-width: 200px;--gap-count: calc(var(--grid-column-count) - 1);--total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));--grid-item-max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));display:grid;grid-gap:var(--grid-layout-gap);grid-template-columns:repeat(auto-fill,minmax(max(var(--grid-item-min-width),var(--grid-item-max-width)),1fr))}.policiesCatalog__list__policy{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:16px;border:1px solid #d3d5dc;border-radius:8px;gap:4px}.policiesCatalog__list__policy__head{display:flex;max-width:95%;align-items:center}.policiesCatalog__list__policy__head__icon{min-width:24px;flex:1 1 24px;margin-right:8px}.policiesCatalog__list__policy__head__name{overflow:hidden;flex:1 1 auto;text-overflow:ellipsis;white-space:nowrap}.policiesCatalog__list__policy__enterprise{position:absolute;top:0;right:0;padding:8px 8px 8px 16px;border-radius:0 8px 0 38px;background:#e7e8ef;color:#6c59bd}.policiesCatalog__list__policy__enterprise__lock{min-width:16px;max-width:16px;color:#6c59bd}.policiesCatalog__list__policy__description{font-size:12px;font-weight:400;line-height:16px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;color:#606274;-webkit-line-clamp:2}.policiesCatalog__list__policy__description:empty{display:none}.policiesCatalog__list__policy__selectBtn{margin-top:8px}.policyForm__goBackBtn{margin:16px 0}.policyForm__info{display:flex;max-width:100%;flex-direction:column;align-items:flex-start;padding-bottom:16px;gap:4px}.policyForm__info__head{display:flex;align-items:center}.policyForm__info__head__icon{min-width:24px;flex:1 1 24px;margin-right:8px}.policyForm__info__head__name{flex:1 1 auto}.policyForm__info__description{font-size:12px;font-weight:400;line-height:16px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#606274}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i8.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i8.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.GioBannerComponent, selector: "gio-banner", inputs: ["type", "icon", "collapsible"] }, { kind: "directive", type: i10.GioBannerBodyDirective, selector: "[gioBannerBody]" }, { kind: "directive", type: i10.GioBannerActionDirective, selector: "[gioBannerAction]" }, { kind: "component", type: i11.GioPolicyStudioStepFormComponent, selector: "gio-ps-step-form", inputs: ["step", "policy"], outputs: ["stepChange", "isValid"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GioPolicyStudioPoliciesCatalogDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gio-ps-policies-catalog-dialog', template: "<!--\n\n    Copyright (C) 2015 The Gravitee team (http://gravitee.io)\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n            http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n<h2 mat-dialog-title class=\"title\">\n  Policies for <span class=\"title__phase\">{{ executionPhaseLabel }}</span> phase\n\n  <button class=\"title__closeBtn\" mat-icon-button aria-label=\"Close dialog\" [mat-dialog-close]=\"\">\n    <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n  </button>\n</h2>\n\n<ng-container>\n  <mat-dialog-content *ngIf=\"!selectedPolicy\" class=\"policiesCatalog\">\n    <div class=\"policiesCatalog__filters\" [formGroup]=\"filtersForm\">\n      <mat-form-field class=\"policiesCatalog__filters__search\" appearance=\"outline\">\n        <mat-label>Search</mat-label>\n        <input matInput formControlName=\"search\" />\n        <button\n          matIconSuffix\n          mat-icon-button\n          aria-label=\"Clear\"\n          *ngIf=\"filtersForm.get('search')?.value\"\n          (click)=\"filtersForm.get('search')?.setValue('')\"\n        >\n          <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-chip-listbox\n        *ngIf=\"categories.length > 1\"\n        class=\"policiesCatalog__filters__categories\"\n        aria-label=\"Categories selection\"\n        multiple\n        formControlName=\"categories\"\n      >\n        <mat-chip-option *ngFor=\"let category of categories\" [selected]=\"category\" [value]=\"category\">{{\n          category | titlecase\n        }}</mat-chip-option>\n      </mat-chip-listbox>\n    </div>\n\n    <div *ngIf=\"policies.length; else emptyPoliciesTpl\" class=\"policiesCatalog__list\">\n      <div *ngFor=\"let policy of policies\" class=\"policiesCatalog__list__policy\">\n        <div class=\"policiesCatalog__list__policy__head\">\n          <mat-icon class=\"policiesCatalog__list__policy__head__icon\" [svgIcon]=\"policy.icon ?? 'gio:puzzle'\"></mat-icon>\n\n          <span *ngIf=\"policy.name\" class=\"policiesCatalog__list__policy__head__name\">{{ policy.name }}</span>\n        </div>\n\n        <div class=\"policiesCatalog__list__policy__enterprise\" *ngIf=\"policy.deployed === false\">\n          <mat-icon\n            class=\"policiesCatalog__list__policy__enterprise__lock\"\n            [svgIcon]=\"'gio:lock'\"\n            matTooltip=\"This policy is only available for users with an enterprise license.\"\n          ></mat-icon>\n        </div>\n\n        <div *ngIf=\"policy.description\" class=\"policiesCatalog__list__policy__description\">{{ policy.description }}</div>\n\n        <button class=\"policiesCatalog__list__policy__selectBtn\" mat-stroked-button role=\"dialog\" (click)=\"onSelectPolicy(policy)\">\n          Select\n        </button>\n      </div>\n    </div>\n  </mat-dialog-content>\n</ng-container>\n\n<ng-template #emptyPoliciesTpl>\n  <div class=\"emptyPoliciesCatalog\">No policies available.</div>\n</ng-template>\n\n<mat-dialog-content *ngIf=\"selectedPolicy\" class=\"policyForm\">\n  <button class=\"policyForm__goBackBtn\" mat-stroked-button (click)=\"onGoBack()\">\n    <mat-icon svgIcon=\"gio:arrow-left\"></mat-icon>\n    Go back\n  </button>\n\n  <gio-banner *ngIf=\"isUnlicensed\" type=\"error\" icon=\"gio:universe\">\n    This policy is only available for users with an enterprise license.\n    <span gioBannerBody>Request a license to upgrade your account and unlock this policy</span>\n    <div gioBannerAction>\n      <a *ngIf=\"trialUrl\" mat-stroked-button [href]=\"trialUrl\" target=\"_blank\">Request upgrade</a>\n    </div>\n  </gio-banner>\n\n  <div class=\"policyForm__info\">\n    <div class=\"policyForm__info__head\">\n      <mat-icon class=\"policyForm__info__head__icon\" [svgIcon]=\"selectedPolicy.icon ?? 'gio:puzzle'\"></mat-icon>\n\n      <span *ngIf=\"selectedPolicy.name\" class=\"policyForm__info__head__name\">{{ selectedPolicy.name }}</span>\n    </div>\n\n    <div *ngIf=\"selectedPolicy.description\" class=\"policyForm__info__description\">{{ selectedPolicy.description }}</div>\n  </div>\n\n  <gio-ps-step-form [policy]=\"selectedPolicy\" (stepChange)=\"onStepChange($event)\" (isValid)=\"onIsValid($event)\"></gio-ps-step-form>\n</mat-dialog-content>\n\n<mat-dialog-actions class=\"actions\" align=\"end\">\n  <button class=\"actions__cancelBtn\" mat-button [mat-dialog-close]=\"\">Cancel</button>\n  <button\n    *ngIf=\"selectedPolicy\"\n    class=\"actions__addBtn\"\n    color=\"primary\"\n    mat-flat-button\n    role=\"dialog\"\n    [disabled]=\"!isValid || isUnlicensed\"\n    (click)=\"onAddPolicy()\"\n  >\n    Add policy\n  </button>\n</mat-dialog-actions>\n", styles: [".gio-top-bar-menu .gio-badge-accent{background-color:var(--gio-oem-palette--active, #e7e2fb);color:var(--gio-oem-palette--active-contrast, #100c27)}.title__closeBtn{top:0;right:-24px;float:right}.policiesCatalog__filters{display:flex;flex-direction:column;padding:0 0 8px;gap:8px}.policiesCatalog__filters__search{width:100%;height:54px;padding-bottom:0}.policiesCatalog__list{--grid-layout-gap: 16px;--grid-column-count: 3;--grid-item-min-width: 200px;--gap-count: calc(var(--grid-column-count) - 1);--total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));--grid-item-max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));display:grid;grid-gap:var(--grid-layout-gap);grid-template-columns:repeat(auto-fill,minmax(max(var(--grid-item-min-width),var(--grid-item-max-width)),1fr))}.policiesCatalog__list__policy{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:16px;border:1px solid #d3d5dc;border-radius:8px;gap:4px}.policiesCatalog__list__policy__head{display:flex;max-width:95%;align-items:center}.policiesCatalog__list__policy__head__icon{min-width:24px;flex:1 1 24px;margin-right:8px}.policiesCatalog__list__policy__head__name{overflow:hidden;flex:1 1 auto;text-overflow:ellipsis;white-space:nowrap}.policiesCatalog__list__policy__enterprise{position:absolute;top:0;right:0;padding:8px 8px 8px 16px;border-radius:0 8px 0 38px;background:#e7e8ef;color:#6c59bd}.policiesCatalog__list__policy__enterprise__lock{min-width:16px;max-width:16px;color:#6c59bd}.policiesCatalog__list__policy__description{font-size:12px;font-weight:400;line-height:16px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;color:#606274;-webkit-line-clamp:2}.policiesCatalog__list__policy__description:empty{display:none}.policiesCatalog__list__policy__selectBtn{margin-top:8px}.policyForm__goBackBtn{margin:16px 0}.policyForm__info{display:flex;max-width:100%;flex-direction:column;align-items:flex-start;padding-bottom:16px;gap:4px}.policyForm__info__head{display:flex;align-items:center}.policyForm__info__head__icon{min-width:24px;flex:1 1 24px;margin-right:8px}.policyForm__info__head__name{flex:1 1 auto}.policyForm__info__description{font-size:12px;font-weight:400;line-height:16px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#606274}\n"] }]
+            args: [{ selector: 'gio-ps-policies-catalog-dialog', template: "<!--\n\n    Copyright (C) 2015 The Gravitee team (http://gravitee.io)\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n            http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n<h2 mat-dialog-title class=\"title\">\n  Policies for <span class=\"title__phase\">{{ executionPhaseLabel }}</span> phase\n\n  <button class=\"title__closeBtn\" mat-icon-button aria-label=\"Close dialog\" [mat-dialog-close]=\"\">\n    <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n  </button>\n</h2>\n\n<ng-container>\n  <mat-dialog-content *ngIf=\"!selectedPolicy\" class=\"policiesCatalog\">\n    <div class=\"policiesCatalog__filters\" [formGroup]=\"filtersForm\">\n      <mat-form-field class=\"policiesCatalog__filters__search\" appearance=\"outline\">\n        <mat-label>Search</mat-label>\n        <input matInput formControlName=\"search\" />\n        <button\n          matIconSuffix\n          mat-icon-button\n          aria-label=\"Clear\"\n          *ngIf=\"filtersForm.get('search')?.value\"\n          (click)=\"filtersForm.get('search')?.setValue('')\"\n        >\n          <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-chip-listbox\n        *ngIf=\"categories.length > 1\"\n        class=\"policiesCatalog__filters__categories\"\n        aria-label=\"Categories selection\"\n        multiple\n        formControlName=\"categories\"\n      >\n        <mat-chip-option *ngFor=\"let category of categories\" [selected]=\"category\" [value]=\"category\">{{\n          category | titlecase\n        }}</mat-chip-option>\n      </mat-chip-listbox>\n    </div>\n\n    <div *ngIf=\"policies.length; else emptyPoliciesTpl\" class=\"policiesCatalog__list\">\n      <div *ngFor=\"let policy of policies\" class=\"policiesCatalog__list__policy\">\n        <div class=\"policiesCatalog__list__policy__head\">\n          <mat-icon class=\"policiesCatalog__list__policy__head__icon\" [svgIcon]=\"policy.icon ?? 'gio:puzzle'\"></mat-icon>\n\n          <span *ngIf=\"policy.name\" class=\"policiesCatalog__list__policy__head__name\">{{ policy.name }}</span>\n        </div>\n\n        <div class=\"policiesCatalog__list__policy__enterprise\" *ngIf=\"policy.deployed === false\">\n          <mat-icon\n            class=\"policiesCatalog__list__policy__enterprise__lock\"\n            [svgIcon]=\"'gio:lock'\"\n            matTooltip=\"This policy is only available for users with an enterprise license.\"\n          ></mat-icon>\n        </div>\n\n        <div *ngIf=\"policy.description\" class=\"policiesCatalog__list__policy__description\">{{ policy.description }}</div>\n\n        <button class=\"policiesCatalog__list__policy__selectBtn\" mat-stroked-button role=\"dialog\" (click)=\"onSelectPolicy(policy)\">\n          Select\n        </button>\n      </div>\n    </div>\n  </mat-dialog-content>\n</ng-container>\n\n<ng-template #emptyPoliciesTpl>\n  <div class=\"emptyPoliciesCatalog\">No policies available.</div>\n</ng-template>\n\n<mat-dialog-content *ngIf=\"selectedPolicy\" class=\"policyForm\">\n  <button class=\"policyForm__goBackBtn\" mat-stroked-button (click)=\"onGoBack()\">\n    <mat-icon svgIcon=\"gio:arrow-left\"></mat-icon>\n    Go back\n  </button>\n\n  <gio-banner *ngIf=\"isUnlicensed\" type=\"error\" icon=\"gio:universe\">\n    This policy is only available for users with an enterprise license.\n    <span gioBannerBody>Request a license to upgrade your account and unlock this policy</span>\n    <div gioBannerAction>\n      <a *ngIf=\"trialUrl\" mat-stroked-button [href]=\"trialUrl\" target=\"_blank\">Request upgrade</a>\n    </div>\n  </gio-banner>\n\n  <div class=\"policyForm__info\">\n    <div class=\"policyForm__info__head\">\n      <mat-icon class=\"policyForm__info__head__icon\" [svgIcon]=\"selectedPolicy.icon ?? 'gio:puzzle'\"></mat-icon>\n\n      <span *ngIf=\"selectedPolicy.name\" class=\"policyForm__info__head__name\">{{ selectedPolicy.name }}</span>\n    </div>\n\n    <div *ngIf=\"selectedPolicy.description\" class=\"policyForm__info__description\">{{ selectedPolicy.description }}</div>\n  </div>\n\n  <gio-ps-step-form [policy]=\"selectedPolicy\" (stepChange)=\"onStepChange($event)\" (isValid)=\"onIsValid($event)\"></gio-ps-step-form>\n</mat-dialog-content>\n\n<mat-dialog-actions class=\"actions\" align=\"end\">\n  <button class=\"actions__cancelBtn\" mat-button [mat-dialog-close]=\"\">Cancel</button>\n  <button\n    *ngIf=\"selectedPolicy\"\n    class=\"actions__addBtn\"\n    color=\"primary\"\n    mat-flat-button\n    role=\"dialog\"\n    [disabled]=\"!isValid || isUnlicensed\"\n    (click)=\"onAddPolicy()\"\n  >\n    Add policy\n  </button>\n</mat-dialog-actions>\n", styles: ["@charset \"UTF-8\";.gio-top-bar-menu .gio-badge-accent{background-color:var(--gio-oem-palette--active, #e7e2fb);color:var(--gio-oem-palette--active-contrast, #100c27)}.title__closeBtn{top:0;right:-24px;float:right}.policiesCatalog__filters{display:flex;flex-direction:column;padding:0 0 8px;gap:8px}.policiesCatalog__filters__search{width:100%;height:54px;padding-bottom:0}.policiesCatalog__list{--grid-layout-gap: 16px;--grid-column-count: 3;--grid-item-min-width: 200px;--gap-count: calc(var(--grid-column-count) - 1);--total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));--grid-item-max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));display:grid;grid-gap:var(--grid-layout-gap);grid-template-columns:repeat(auto-fill,minmax(max(var(--grid-item-min-width),var(--grid-item-max-width)),1fr))}.policiesCatalog__list__policy{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:16px;border:1px solid #d3d5dc;border-radius:8px;gap:4px}.policiesCatalog__list__policy__head{display:flex;max-width:95%;align-items:center}.policiesCatalog__list__policy__head__icon{min-width:24px;flex:1 1 24px;margin-right:8px}.policiesCatalog__list__policy__head__name{overflow:hidden;flex:1 1 auto;text-overflow:ellipsis;white-space:nowrap}.policiesCatalog__list__policy__enterprise{position:absolute;top:0;right:0;padding:8px 8px 8px 16px;border-radius:0 8px 0 38px;background:#e7e8ef;color:#6c59bd}.policiesCatalog__list__policy__enterprise__lock{min-width:16px;max-width:16px;color:#6c59bd}.policiesCatalog__list__policy__description{font-size:12px;font-weight:400;line-height:16px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;color:#606274;-webkit-line-clamp:2}.policiesCatalog__list__policy__description:empty{display:none}.policiesCatalog__list__policy__selectBtn{margin-top:8px}.policyForm__goBackBtn{margin:16px 0}.policyForm__info{display:flex;max-width:100%;flex-direction:column;align-items:flex-start;padding-bottom:16px;gap:4px}.policyForm__info__head{display:flex;align-items:center}.policyForm__info__head__icon{min-width:24px;flex:1 1 24px;margin-right:8px}.policyForm__info__head__name{flex:1 1 auto}.policyForm__info__description{font-size:12px;font-weight:400;line-height:16px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#606274}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]

package/esm2022/lib/components/step-edit-dialog/gio-ps-step-edit-dialog.component.mjs

@@ -34,11 +34,11 @@ export class GioPolicyStudioStepEditDialogComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GioPolicyStudioStepEditDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GioPolicyStudioStepEditDialogComponent, selector: "gio-ps-step-edit-dialog", ngImport: i0, template: "<!--\n\n    Copyright (C) 2015 The Gravitee team (http://gravitee.io)\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n            http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n<h2 mat-dialog-title class=\"title\">\n  <mat-icon class=\"title__icon\" [svgIcon]=\"policy.icon ?? 'gio:puzzle'\"></mat-icon>\n\n  <span *ngIf=\"step.name\" class=\"title__name\">{{ step.name }}</span>\n\n  <button class=\"title__closeBtn\" mat-icon-button aria-label=\"Close dialog\" [mat-dialog-close]=\"\">\n    <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n  </button>\n\n  <div class=\"title__description\">\n    {{ policy.description }}\n  </div>\n</h2>\n\n<mat-dialog-content class=\"content\">\n  <gio-ps-step-form [policy]=\"policy\" [(step)]=\"step\" (isValid)=\"isValid = $event\"></gio-ps-step-form>\n</mat-dialog-content>\n\n<mat-dialog-actions class=\"actions\" align=\"end\">\n  <button class=\"actions__cancelBtn\" mat-button [mat-dialog-close]=\"\">Cancel</button>\n  <button class=\"actions__saveBtn\" color=\"primary\" mat-flat-button role=\"dialog\" (click)=\"onSave()\" [disabled]=\"!isValid\">Save</button>\n</mat-dialog-actions>\n", styles: [".gio-top-bar-menu .gio-badge-accent{background-color:var(--gio-oem-palette--active, #e7e2fb);color:var(--gio-oem-palette--active-contrast, #100c27)}.title__icon{margin-right:8px}.title__closeBtn{top:0;right:-24px;float:right}.title__description{font-size:12px;font-weight:400;line-height:16px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#606274}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.GioPolicyStudioStepFormComponent, selector: "gio-ps-step-form", inputs: ["step", "policy"], outputs: ["stepChange", "isValid"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GioPolicyStudioStepEditDialogComponent, selector: "gio-ps-step-edit-dialog", ngImport: i0, template: "<!--\n\n    Copyright (C) 2015 The Gravitee team (http://gravitee.io)\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n            http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n<h2 mat-dialog-title class=\"title\">\n  <mat-icon class=\"title__icon\" [svgIcon]=\"policy.icon ?? 'gio:puzzle'\"></mat-icon>\n\n  <span *ngIf=\"step.name\" class=\"title__name\">{{ step.name }}</span>\n\n  <button class=\"title__closeBtn\" mat-icon-button aria-label=\"Close dialog\" [mat-dialog-close]=\"\">\n    <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n  </button>\n\n  <div class=\"title__description\">\n    {{ policy.description }}\n  </div>\n</h2>\n\n<mat-dialog-content class=\"content\">\n  <gio-ps-step-form [policy]=\"policy\" [(step)]=\"step\" (isValid)=\"isValid = $event\"></gio-ps-step-form>\n</mat-dialog-content>\n\n<mat-dialog-actions class=\"actions\" align=\"end\">\n  <button class=\"actions__cancelBtn\" mat-button [mat-dialog-close]=\"\">Cancel</button>\n  <button class=\"actions__saveBtn\" color=\"primary\" mat-flat-button role=\"dialog\" (click)=\"onSave()\" [disabled]=\"!isValid\">Save</button>\n</mat-dialog-actions>\n", styles: ["@charset \"UTF-8\";.gio-top-bar-menu .gio-badge-accent{background-color:var(--gio-oem-palette--active, #e7e2fb);color:var(--gio-oem-palette--active-contrast, #100c27)}.title__icon{margin-right:8px}.title__closeBtn{top:0;right:-24px;float:right}.title__description{font-size:12px;font-weight:400;line-height:16px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#606274}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.GioPolicyStudioStepFormComponent, selector: "gio-ps-step-form", inputs: ["step", "policy"], outputs: ["stepChange", "isValid"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GioPolicyStudioStepEditDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gio-ps-step-edit-dialog', template: "<!--\n\n    Copyright (C) 2015 The Gravitee team (http://gravitee.io)\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n            http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n<h2 mat-dialog-title class=\"title\">\n  <mat-icon class=\"title__icon\" [svgIcon]=\"policy.icon ?? 'gio:puzzle'\"></mat-icon>\n\n  <span *ngIf=\"step.name\" class=\"title__name\">{{ step.name }}</span>\n\n  <button class=\"title__closeBtn\" mat-icon-button aria-label=\"Close dialog\" [mat-dialog-close]=\"\">\n    <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n  </button>\n\n  <div class=\"title__description\">\n    {{ policy.description }}\n  </div>\n</h2>\n\n<mat-dialog-content class=\"content\">\n  <gio-ps-step-form [policy]=\"policy\" [(step)]=\"step\" (isValid)=\"isValid = $event\"></gio-ps-step-form>\n</mat-dialog-content>\n\n<mat-dialog-actions class=\"actions\" align=\"end\">\n  <button class=\"actions__cancelBtn\" mat-button [mat-dialog-close]=\"\">Cancel</button>\n  <button class=\"actions__saveBtn\" color=\"primary\" mat-flat-button role=\"dialog\" (click)=\"onSave()\" [disabled]=\"!isValid\">Save</button>\n</mat-dialog-actions>\n", styles: [".gio-top-bar-menu .gio-badge-accent{background-color:var(--gio-oem-palette--active, #e7e2fb);color:var(--gio-oem-palette--active-contrast, #100c27)}.title__icon{margin-right:8px}.title__closeBtn{top:0;right:-24px;float:right}.title__description{font-size:12px;font-weight:400;line-height:16px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#606274}\n"] }]
+            args: [{ selector: 'gio-ps-step-edit-dialog', template: "<!--\n\n    Copyright (C) 2015 The Gravitee team (http://gravitee.io)\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n            http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n<h2 mat-dialog-title class=\"title\">\n  <mat-icon class=\"title__icon\" [svgIcon]=\"policy.icon ?? 'gio:puzzle'\"></mat-icon>\n\n  <span *ngIf=\"step.name\" class=\"title__name\">{{ step.name }}</span>\n\n  <button class=\"title__closeBtn\" mat-icon-button aria-label=\"Close dialog\" [mat-dialog-close]=\"\">\n    <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n  </button>\n\n  <div class=\"title__description\">\n    {{ policy.description }}\n  </div>\n</h2>\n\n<mat-dialog-content class=\"content\">\n  <gio-ps-step-form [policy]=\"policy\" [(step)]=\"step\" (isValid)=\"isValid = $event\"></gio-ps-step-form>\n</mat-dialog-content>\n\n<mat-dialog-actions class=\"actions\" align=\"end\">\n  <button class=\"actions__cancelBtn\" mat-button [mat-dialog-close]=\"\">Cancel</button>\n  <button class=\"actions__saveBtn\" color=\"primary\" mat-flat-button role=\"dialog\" (click)=\"onSave()\" [disabled]=\"!isValid\">Save</button>\n</mat-dialog-actions>\n", styles: ["@charset \"UTF-8\";.gio-top-bar-menu .gio-badge-accent{background-color:var(--gio-oem-palette--active, #e7e2fb);color:var(--gio-oem-palette--active-contrast, #100c27)}.title__icon{margin-right:8px}.title__closeBtn{top:0;right:-24px;float:right}.title__description{font-size:12px;font-weight:400;line-height:16px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#606274}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]