@gravitee/ui-policy-studio-angular 12.3.0 → 12.4.0-fix-studio-harness-a2e6885

package/fesm2022/gravitee-ui-policy-studio-angular.mjs

@@ -543,6 +543,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
 class GioPolicyStudioStepFormComponent {
     constructor(policyStudioService) {
         this.policyStudioService = policyStudioService;
+        this.readOnly = false;
         this.stepChange = new EventEmitter();
         this.isValid = new EventEmitter();
         this.unsubscribe$ = new Subject();
@@ -551,7 +552,9 @@ class GioPolicyStudioStepFormComponent {
         if (changes.policy) {
             this.policySchema$ = this.policyStudioService.getPolicySchema(this.policy).pipe(map(schema => {
                 if (GioFormJsonSchemaComponent.isDisplayable(schema)) {
-                    return schema;
+                    const gioJsonSchema = schema;
+                    gioJsonSchema.readOnly = this.readOnly;
+                    return gioJsonSchema;
                 }
                 return {};
             }));
@@ -584,6 +587,9 @@ class GioPolicyStudioStepFormComponent {
         this.stepForm.statusChanges.pipe(takeUntil(this.unsubscribe$)).subscribe(valid => {
             this.isValid.emit(valid === 'VALID');
         });
+        if (this.readOnly) {
+            this.stepForm.disable({ emitEvent: false });
+        }
     }
     onJsonSchemaReady(isReady) {
         // When ready and if the form is valid, emit
@@ -592,12 +598,14 @@ class GioPolicyStudioStepFormComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: GioPolicyStudioStepFormComponent, deps: [{ token: GioPolicyStudioService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: GioPolicyStudioStepFormComponent, selector: "gio-ps-step-form", inputs: { step: "step", policy: "policy" }, outputs: { stepChange: "stepChange", isValid: "isValid" }, 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=\"settings\">\n  <div class=\"settings__header\">Settings</div>\n\n  <div class=\"settings__content\">\n    <ng-container *ngIf=\"stepForm && (policySchema$ | async) as policySchema; else loadingTmpl\" [formGroup]=\"stepForm\">\n      <mat-form-field>\n        <mat-label>Description</mat-label>\n        <textarea matInput formControlName=\"description\" cdkFocusInitial></textarea>\n        <mat-hint>Describe how your policy works.</mat-hint>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Trigger condition</mat-label>\n        <input matInput formControlName=\"condition\" />\n        <mat-hint>The condition to execute this policy. Supports Expression Language.</mat-hint>\n      </mat-form-field>\n\n      <gio-form-json-schema\n        *ngIf=\"policySchema\"\n        [jsonSchema]=\"$any(policySchema)\"\n        (ready)=\"onJsonSchemaReady($event)\"\n        formControlName=\"configuration\"\n      ></gio-form-json-schema>\n    </ng-container>\n  </div>\n</div>\n\n<div class=\"documentation\">\n  <div class=\"documentation__header\">Documentation</div>\n\n  <div class=\"documentation__content\">\n    <ng-container *ngIf=\"policyDocumentation$ | async as policyDocumentation; else loadingTmpl\">\n      <gio-asciidoctor [content]=\"policyDocumentation\"></gio-asciidoctor>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #loadingTmpl>\n  <gio-loader></gio-loader>\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;flex-direction:row;border:1px solid #d3d5dc;border-radius:8px}.settings{display:flex;flex:0 0 50%;flex-direction:column}.settings__header{border-right:1px solid #d3d5dc}.settings__content{display:flex;flex:1 1 auto;flex-direction:column;padding:16px;border-right:1px solid #d3d5dc}.documentation{display:flex;overflow:auto;flex:0 0 50%;flex-direction:column}.documentation__content{overflow:auto;flex:1 1 auto;padding:16px}.settings__header,.documentation__header{padding:16px;border-bottom:1px solid #d3d5dc;font-size:14px;font-weight:500;line-height:20px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}\n"], dependencies: [{ 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: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.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: "component", type: i10.GioFormJsonSchemaComponent, selector: "gio-form-json-schema", inputs: ["jsonSchema", "options"], outputs: ["ready"] }, { kind: "component", type: i7$1.GioAsciidoctorComponent, selector: "gio-asciidoctor", inputs: ["content", "src"] }, { kind: "component", type: i10.GioLoaderComponent, selector: "gio-loader" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: GioPolicyStudioStepFormComponent, selector: "gio-ps-step-form", inputs: { readOnly: "readOnly", step: "step", policy: "policy" }, outputs: { stepChange: "stepChange", isValid: "isValid" }, 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=\"settings\">\n  <div class=\"settings__header\">Settings</div>\n\n  <div class=\"settings__content\">\n    <ng-container *ngIf=\"stepForm && (policySchema$ | async) as policySchema; else loadingTmpl\" [formGroup]=\"stepForm\">\n      <mat-form-field>\n        <mat-label>Description</mat-label>\n        <textarea [disabled]=\"readOnly\" matInput formControlName=\"description\" cdkFocusInitial></textarea>\n        <mat-hint>Describe how your policy works.</mat-hint>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Trigger condition</mat-label>\n        <input [disabled]=\"readOnly\" matInput formControlName=\"condition\" />\n        <mat-hint>The condition to execute this policy. Supports Expression Language.</mat-hint>\n      </mat-form-field>\n\n      <gio-form-json-schema\n        *ngIf=\"policySchema\"\n        [jsonSchema]=\"$any(policySchema)\"\n        (ready)=\"onJsonSchemaReady($event)\"\n        formControlName=\"configuration\"\n      ></gio-form-json-schema>\n    </ng-container>\n  </div>\n</div>\n\n<div class=\"documentation\">\n  <div class=\"documentation__header\">Documentation</div>\n\n  <div class=\"documentation__content\">\n    <ng-container *ngIf=\"policyDocumentation$ | async as policyDocumentation; else loadingTmpl\">\n      <gio-asciidoctor [content]=\"policyDocumentation\"></gio-asciidoctor>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #loadingTmpl>\n  <gio-loader></gio-loader>\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;flex-direction:row;border:1px solid #d3d5dc;border-radius:8px}.settings{display:flex;flex:0 0 50%;flex-direction:column}.settings__header{border-right:1px solid #d3d5dc}.settings__content{display:flex;flex:1 1 auto;flex-direction:column;padding:16px;border-right:1px solid #d3d5dc}.documentation{display:flex;overflow:auto;flex:0 0 50%;flex-direction:column}.documentation__content{overflow:auto;flex:1 1 auto;padding:16px}.settings__header,.documentation__header{padding:16px;border-bottom:1px solid #d3d5dc;font-size:14px;font-weight:500;line-height:20px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}\n"], dependencies: [{ 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: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.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: "component", type: i10.GioFormJsonSchemaComponent, selector: "gio-form-json-schema", inputs: ["jsonSchema", "options"], outputs: ["ready"] }, { kind: "component", type: i7$1.GioAsciidoctorComponent, selector: "gio-asciidoctor", inputs: ["content", "src"] }, { kind: "component", type: i10.GioLoaderComponent, selector: "gio-loader" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: GioPolicyStudioStepFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gio-ps-step-form', 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=\"settings\">\n  <div class=\"settings__header\">Settings</div>\n\n  <div class=\"settings__content\">\n    <ng-container *ngIf=\"stepForm && (policySchema$ | async) as policySchema; else loadingTmpl\" [formGroup]=\"stepForm\">\n      <mat-form-field>\n        <mat-label>Description</mat-label>\n        <textarea matInput formControlName=\"description\" cdkFocusInitial></textarea>\n        <mat-hint>Describe how your policy works.</mat-hint>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Trigger condition</mat-label>\n        <input matInput formControlName=\"condition\" />\n        <mat-hint>The condition to execute this policy. Supports Expression Language.</mat-hint>\n      </mat-form-field>\n\n      <gio-form-json-schema\n        *ngIf=\"policySchema\"\n        [jsonSchema]=\"$any(policySchema)\"\n        (ready)=\"onJsonSchemaReady($event)\"\n        formControlName=\"configuration\"\n      ></gio-form-json-schema>\n    </ng-container>\n  </div>\n</div>\n\n<div class=\"documentation\">\n  <div class=\"documentation__header\">Documentation</div>\n\n  <div class=\"documentation__content\">\n    <ng-container *ngIf=\"policyDocumentation$ | async as policyDocumentation; else loadingTmpl\">\n      <gio-asciidoctor [content]=\"policyDocumentation\"></gio-asciidoctor>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #loadingTmpl>\n  <gio-loader></gio-loader>\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;flex-direction:row;border:1px solid #d3d5dc;border-radius:8px}.settings{display:flex;flex:0 0 50%;flex-direction:column}.settings__header{border-right:1px solid #d3d5dc}.settings__content{display:flex;flex:1 1 auto;flex-direction:column;padding:16px;border-right:1px solid #d3d5dc}.documentation{display:flex;overflow:auto;flex:0 0 50%;flex-direction:column}.documentation__content{overflow:auto;flex:1 1 auto;padding:16px}.settings__header,.documentation__header{padding:16px;border-bottom:1px solid #d3d5dc;font-size:14px;font-weight:500;line-height:20px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}\n"] }]
-        }], ctorParameters: () => [{ type: GioPolicyStudioService }], propDecorators: { step: [{
+            args: [{ selector: 'gio-ps-step-form', 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=\"settings\">\n  <div class=\"settings__header\">Settings</div>\n\n  <div class=\"settings__content\">\n    <ng-container *ngIf=\"stepForm && (policySchema$ | async) as policySchema; else loadingTmpl\" [formGroup]=\"stepForm\">\n      <mat-form-field>\n        <mat-label>Description</mat-label>\n        <textarea [disabled]=\"readOnly\" matInput formControlName=\"description\" cdkFocusInitial></textarea>\n        <mat-hint>Describe how your policy works.</mat-hint>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Trigger condition</mat-label>\n        <input [disabled]=\"readOnly\" matInput formControlName=\"condition\" />\n        <mat-hint>The condition to execute this policy. Supports Expression Language.</mat-hint>\n      </mat-form-field>\n\n      <gio-form-json-schema\n        *ngIf=\"policySchema\"\n        [jsonSchema]=\"$any(policySchema)\"\n        (ready)=\"onJsonSchemaReady($event)\"\n        formControlName=\"configuration\"\n      ></gio-form-json-schema>\n    </ng-container>\n  </div>\n</div>\n\n<div class=\"documentation\">\n  <div class=\"documentation__header\">Documentation</div>\n\n  <div class=\"documentation__content\">\n    <ng-container *ngIf=\"policyDocumentation$ | async as policyDocumentation; else loadingTmpl\">\n      <gio-asciidoctor [content]=\"policyDocumentation\"></gio-asciidoctor>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #loadingTmpl>\n  <gio-loader></gio-loader>\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;flex-direction:row;border:1px solid #d3d5dc;border-radius:8px}.settings{display:flex;flex:0 0 50%;flex-direction:column}.settings__header{border-right:1px solid #d3d5dc}.settings__content{display:flex;flex:1 1 auto;flex-direction:column;padding:16px;border-right:1px solid #d3d5dc}.documentation{display:flex;overflow:auto;flex:0 0 50%;flex-direction:column}.documentation__content{overflow:auto;flex:1 1 auto;padding:16px}.settings__header,.documentation__header{padding:16px;border-bottom:1px solid #d3d5dc;font-size:14px;font-weight:500;line-height:20px;font-family:Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}\n"] }]
+        }], ctorParameters: () => [{ type: GioPolicyStudioService }], propDecorators: { readOnly: [{
+                type: Input
+            }], step: [{
                 type: Input
             }], policy: [{
                 type: Input
@@ -703,7 +711,7 @@ class GioPolicyStudioPoliciesCatalogDialogComponent {
         this.isUnlicensed = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", 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: "17.2.3", 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]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6.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.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i8$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i8$1.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "component", type: i5$1.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: 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: "17.2.3", 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]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6.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.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i8$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i8$1.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "component", type: i5$1.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: GioPolicyStudioStepFormComponent, selector: "gio-ps-step-form", inputs: ["readOnly", "step", "policy"], outputs: ["stepChange", "isValid"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: GioPolicyStudioPoliciesCatalogDialogComponent, decorators: [{
             type: Component,
@@ -732,8 +740,10 @@ class GioPolicyStudioStepEditDialogComponent {
     constructor(dialogRef, flowDialogData) {
         this.dialogRef = dialogRef;
         this.isValid = false;
+        this.readOnly = false;
         this.policy = flowDialogData.policy;
         this.step = flowDialogData.step;
+        this.readOnly = Boolean(flowDialogData.readOnly);
     }
     onSave() {
         this.dialogRef.close({
@@ -741,11 +751,11 @@ class GioPolicyStudioStepEditDialogComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", 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: "17.2.3", 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: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", 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.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: GioPolicyStudioStepFormComponent, selector: "gio-ps-step-form", inputs: ["step", "policy"], outputs: ["stepChange", "isValid"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", 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 [readOnly]=\"readOnly\" [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: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", 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.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: GioPolicyStudioStepFormComponent, selector: "gio-ps-step-form", inputs: ["readOnly", "step", "policy"], outputs: ["stepChange", "isValid"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", 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: ["@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"] }]
+            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 [readOnly]=\"readOnly\" [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: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -769,6 +779,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
 class GioPolicyStudioDetailsPhaseStepComponent {
     constructor(matDialog) {
         this.matDialog = matDialog;
+        this.readOnly = false;
         this.policies = [];
         this.stepChange = new EventEmitter();
         this.deleted = new EventEmitter();
@@ -779,7 +790,7 @@ class GioPolicyStudioDetailsPhaseStepComponent {
             this.policy = this.policies.find(policy => policy.id === this.step.policy);
         }
     }
-    onEdit() {
+    onEditOrView() {
         if (!this.policy) {
             // TODO: Handle UseCase when policy is not found. (Like if the plugin is removed from the BackEnd)
             return;
@@ -787,6 +798,7 @@ class GioPolicyStudioDetailsPhaseStepComponent {
         this.matDialog
             .open(GioPolicyStudioStepEditDialogComponent, {
             data: {
+                readOnly: this.readOnly,
                 policy: this.policy,
                 step: this.step,
             },
@@ -809,12 +821,14 @@ class GioPolicyStudioDetailsPhaseStepComponent {
         this.deleted.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: GioPolicyStudioDetailsPhaseStepComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", 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: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: GioPolicyStudioDetailsPhaseStepComponent, selector: "gio-ps-flow-details-phase-step", inputs: { readOnly: "readOnly", 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)=\"onEditOrView()\">\n    <mat-icon [svgIcon]=\"readOnly ? 'gio:eye-empty' : 'gio:edit-pencil'\"></mat-icon>\n    <span>{{ readOnly ? 'View' : 'Edit' }}</span>\n  </button>\n\n  <button [disabled]=\"readOnly\" 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 [disabled]=\"readOnly\" 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: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", 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: ["@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: () => [{ type: i1.MatDialog }], propDecorators: { step: [{
+            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)=\"onEditOrView()\">\n    <mat-icon [svgIcon]=\"readOnly ? 'gio:eye-empty' : 'gio:edit-pencil'\"></mat-icon>\n    <span>{{ readOnly ? 'View' : 'Edit' }}</span>\n  </button>\n\n  <button [disabled]=\"readOnly\" 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 [disabled]=\"readOnly\" 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: () => [{ type: i1.MatDialog }], propDecorators: { readOnly: [{
+                type: Input
+            }], step: [{
                 type: Input
             }], policies: [{
                 type: Input
@@ -844,6 +858,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
 class GioPolicyStudioDetailsPhaseComponent {
     constructor(matDialog) {
         this.matDialog = matDialog;
+        this.readOnly = false;
         this.steps = [];
         this.startConnector = [];
         this.endConnector = [];
@@ -928,12 +943,14 @@ class GioPolicyStudioDetailsPhaseComponent {
         ]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: GioPolicyStudioDetailsPhaseComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", 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:22px;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: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.GioBannerWarningComponent, selector: "gio-banner-warning" }, { kind: "directive", type: i10.GioBannerBodyDirective, selector: "[gioBannerBody]" }, { kind: "component", type: 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: "17.2.3", type: GioPolicyStudioDetailsPhaseComponent, selector: "gio-ps-flow-details-phase", inputs: { readOnly: "readOnly", 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 [disabled]=\"readOnly\" 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            [readOnly]=\"readOnly\"\n            [class.disabled]=\"readOnly || !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 [disabled]=\"readOnly\" 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:22px;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: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.GioBannerWarningComponent, selector: "gio-banner-warning" }, { kind: "directive", type: i10.GioBannerBodyDirective, selector: "[gioBannerBody]" }, { kind: "component", type: GioPolicyStudioDetailsPhaseStepComponent, selector: "gio-ps-flow-details-phase-step", inputs: ["readOnly", "step", "policies"], outputs: ["stepChange", "deleted", "disabled"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", 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: ["@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:22px;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: () => [{ type: i1.MatDialog }], propDecorators: { steps: [{
+            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 [disabled]=\"readOnly\" 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            [readOnly]=\"readOnly\"\n            [class.disabled]=\"readOnly || !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 [disabled]=\"readOnly\" 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:22px;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: () => [{ type: i1.MatDialog }], propDecorators: { readOnly: [{
+                type: Input
+            }], steps: [{
                 type: Input
             }], name: [{
                 type: Input
@@ -1012,6 +1029,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
 class GioPolicyStudioDetailsComponent {
     constructor(matDialog) {
         this.matDialog = matDialog;
+        this.readOnly = false;
         this.loading = false;
         this.flow = undefined;
         this.entrypointsInfo = [];
@@ -1083,12 +1101,14 @@ class GioPolicyStudioDetailsComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: GioPolicyStudioDetailsComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", 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: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i4$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.GioLoaderComponent, selector: "gio-loader" }, { kind: "component", type: GioPolicyStudioDetailsInfoBarComponent, selector: "gio-ps-flow-details-info-bar", inputs: ["flow", "entrypointsInfo"] }, { kind: "component", type: GioPolicyStudioDetailsPhaseComponent, selector: "gio-ps-flow-details-phase", inputs: ["steps", "name", "description", "startConnector", "endConnector", "apiType", "policies", "policyExecutionPhase", "trialUrl"], outputs: ["stepsChange"] }, { kind: "pipe", type: GioFilterConnectorsByModePipe, name: "gioFilterConnectorsByMode" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: GioPolicyStudioDetailsComponent, selector: "gio-ps-flow-details", inputs: { readOnly: "readOnly", 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 [disabled]=\"readOnly\" class=\"header__configBtn__edit\" mat-stroked-button (click)=\"onEditFlow()\">\n          <mat-icon svgIcon=\"gio:edit-pencil\"></mat-icon>\n        </button>\n        <button [disabled]=\"readOnly\" 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            [readOnly]=\"readOnly\"\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            [readOnly]=\"readOnly\"\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            [readOnly]=\"readOnly\"\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            [readOnly]=\"readOnly\"\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          [readOnly]=\"readOnly\"\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          [readOnly]=\"readOnly\"\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: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i4$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.GioLoaderComponent, selector: "gio-loader" }, { kind: "component", type: GioPolicyStudioDetailsInfoBarComponent, selector: "gio-ps-flow-details-info-bar", inputs: ["flow", "entrypointsInfo"] }, { kind: "component", type: GioPolicyStudioDetailsPhaseComponent, selector: "gio-ps-flow-details-phase", inputs: ["readOnly", "steps", "name", "description", "startConnector", "endConnector", "apiType", "policies", "policyExecutionPhase", "trialUrl"], outputs: ["stepsChange"] }, { kind: "pipe", type: GioFilterConnectorsByModePipe, name: "gioFilterConnectorsByMode" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", 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: ["@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: () => [{ type: i1.MatDialog }], propDecorators: { loading: [{
+            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 [disabled]=\"readOnly\" class=\"header__configBtn__edit\" mat-stroked-button (click)=\"onEditFlow()\">\n          <mat-icon svgIcon=\"gio:edit-pencil\"></mat-icon>\n        </button>\n        <button [disabled]=\"readOnly\" 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            [readOnly]=\"readOnly\"\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            [readOnly]=\"readOnly\"\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            [readOnly]=\"readOnly\"\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            [readOnly]=\"readOnly\"\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          [readOnly]=\"readOnly\"\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          [readOnly]=\"readOnly\"\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: () => [{ type: i1.MatDialog }], propDecorators: { readOnly: [{
+                type: Input
+            }], loading: [{
                 type: Input
             }], apiType: [{
                 type: Input
@@ -1126,11 +1146,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
 class GioPolicyStudioFlowExecutionFormDialogComponent {
     constructor(dialogRef, flowDialogData) {
         this.dialogRef = dialogRef;
+        this.readOnly = false;
         this.existingFlowExecution = cloneDeep(flowDialogData?.flowExecution);
         this.flowExecutionFormGroup = new UntypedFormGroup({
             mode: new UntypedFormControl(flowDialogData?.flowExecution?.mode ?? 'DEFAULT'),
             matchRequired: new UntypedFormControl(flowDialogData?.flowExecution?.matchRequired ?? false),
         });
+        this.readOnly = Boolean(flowDialogData.readOnly);
+        if (this.readOnly) {
+            this.flowExecutionFormGroup.disable({ emitEvent: false });
+        }
     }
     onSubmit() {
         const flowExecutionToSave = {
@@ -1143,11 +1168,11 @@ class GioPolicyStudioFlowExecutionFormDialogComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: GioPolicyStudioFlowExecutionFormDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: GioPolicyStudioFlowExecutionFormDialogComponent, selector: "gio-ps-flow-execution-form-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  Flow execution\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<mat-dialog-content *ngIf=\"flowExecutionFormGroup\" class=\"content\" [formGroup]=\"flowExecutionFormGroup\">\n  <div class=\"content__row\">\n    <gio-banner-info>\n      By default, flow selection is based on the operators defined in your flows, either when it \u201Cmatches with\u201D or \u201Cstarts with\u201D a path. You\n      can choose the \"Best match\" option to select a flow from the closest path.\n    </gio-banner-info>\n  </div>\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Default flow mode</mat-label>\n      <mat-select formControlName=\"mode\">\n        <mat-option value=\"BEST_MATCH\">Best Match</mat-option>\n        <mat-option value=\"DEFAULT\">Default</mat-option>\n      </mat-select>\n      <mat-hint>Change how the flow selection is made</mat-hint>\n    </mat-form-field>\n  </div>\n\n  <div class=\"content__row\">\n    <gio-form-slide-toggle>\n      <gio-form-label>Fail on flow mismatch</gio-form-label>\n      Respond with an error when requests don\u2019t match any defined flow\n      <mat-slide-toggle gioFormSlideToggle formControlName=\"matchRequired\"></mat-slide-toggle>\n    </gio-form-slide-toggle>\n  </div>\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)=\"onSubmit()\">Save</button>\n</mat-dialog-actions>\n", styles: [".title__closeBtn{top:0;right:-24px;float:right}.content__row{display:flex;align-items:flex-start;gap:16px}.content__row mat-form-field{flex:1 1 auto}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i8$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { 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.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.GioFormSlideToggleComponent, selector: "gio-form-slide-toggle", inputs: ["appearance"] }, { kind: "component", type: i10.GioFormLabelComponent, selector: "gio-form-label" }, { kind: "directive", type: i10.GioFormSlideToggleDirective, selector: "[gioFormSlideToggle]" }, { kind: "component", type: i10.GioBannerInfoComponent, selector: "gio-banner-info" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: GioPolicyStudioFlowExecutionFormDialogComponent, selector: "gio-ps-flow-execution-form-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  Flow execution\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<mat-dialog-content *ngIf=\"flowExecutionFormGroup\" class=\"content\" [formGroup]=\"flowExecutionFormGroup\">\n  <div class=\"content__row\">\n    <gio-banner-info>\n      By default, flow selection is based on the operators defined in your flows, either when it \u201Cmatches with\u201D or \u201Cstarts with\u201D a path. You\n      can choose the \"Best match\" option to select a flow from the closest path.\n    </gio-banner-info>\n  </div>\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Default flow mode</mat-label>\n      <mat-select formControlName=\"mode\">\n        <mat-option value=\"BEST_MATCH\">Best Match</mat-option>\n        <mat-option value=\"DEFAULT\">Default</mat-option>\n      </mat-select>\n      <mat-hint>Change how the flow selection is made</mat-hint>\n    </mat-form-field>\n  </div>\n\n  <div class=\"content__row\">\n    <gio-form-slide-toggle>\n      <gio-form-label>Fail on flow mismatch</gio-form-label>\n      Respond with an error when requests don\u2019t match any defined flow\n      <mat-slide-toggle gioFormSlideToggle formControlName=\"matchRequired\"></mat-slide-toggle>\n    </gio-form-slide-toggle>\n  </div>\n</mat-dialog-content>\n\n<mat-dialog-actions class=\"actions\" align=\"end\">\n  <button [disabled]=\"readOnly\" class=\"actions__cancelBtn\" mat-button [mat-dialog-close]=\"\">Cancel</button>\n  <button [disabled]=\"readOnly\" class=\"actions__saveBtn\" color=\"primary\" mat-flat-button role=\"dialog\" (click)=\"onSubmit()\">Save</button>\n</mat-dialog-actions>\n", styles: [".title__closeBtn{top:0;right:-24px;float:right}.content__row{display:flex;align-items:flex-start;gap:16px}.content__row mat-form-field{flex:1 1 auto}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i8$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { 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.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.GioFormSlideToggleComponent, selector: "gio-form-slide-toggle", inputs: ["appearance"] }, { kind: "component", type: i10.GioFormLabelComponent, selector: "gio-form-label" }, { kind: "directive", type: i10.GioFormSlideToggleDirective, selector: "[gioFormSlideToggle]" }, { kind: "component", type: i10.GioBannerInfoComponent, selector: "gio-banner-info" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: GioPolicyStudioFlowExecutionFormDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gio-ps-flow-execution-form-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  Flow execution\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<mat-dialog-content *ngIf=\"flowExecutionFormGroup\" class=\"content\" [formGroup]=\"flowExecutionFormGroup\">\n  <div class=\"content__row\">\n    <gio-banner-info>\n      By default, flow selection is based on the operators defined in your flows, either when it \u201Cmatches with\u201D or \u201Cstarts with\u201D a path. You\n      can choose the \"Best match\" option to select a flow from the closest path.\n    </gio-banner-info>\n  </div>\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Default flow mode</mat-label>\n      <mat-select formControlName=\"mode\">\n        <mat-option value=\"BEST_MATCH\">Best Match</mat-option>\n        <mat-option value=\"DEFAULT\">Default</mat-option>\n      </mat-select>\n      <mat-hint>Change how the flow selection is made</mat-hint>\n    </mat-form-field>\n  </div>\n\n  <div class=\"content__row\">\n    <gio-form-slide-toggle>\n      <gio-form-label>Fail on flow mismatch</gio-form-label>\n      Respond with an error when requests don\u2019t match any defined flow\n      <mat-slide-toggle gioFormSlideToggle formControlName=\"matchRequired\"></mat-slide-toggle>\n    </gio-form-slide-toggle>\n  </div>\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)=\"onSubmit()\">Save</button>\n</mat-dialog-actions>\n", styles: [".title__closeBtn{top:0;right:-24px;float:right}.content__row{display:flex;align-items:flex-start;gap:16px}.content__row mat-form-field{flex:1 1 auto}\n"] }]
+            args: [{ selector: 'gio-ps-flow-execution-form-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  Flow execution\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<mat-dialog-content *ngIf=\"flowExecutionFormGroup\" class=\"content\" [formGroup]=\"flowExecutionFormGroup\">\n  <div class=\"content__row\">\n    <gio-banner-info>\n      By default, flow selection is based on the operators defined in your flows, either when it \u201Cmatches with\u201D or \u201Cstarts with\u201D a path. You\n      can choose the \"Best match\" option to select a flow from the closest path.\n    </gio-banner-info>\n  </div>\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Default flow mode</mat-label>\n      <mat-select formControlName=\"mode\">\n        <mat-option value=\"BEST_MATCH\">Best Match</mat-option>\n        <mat-option value=\"DEFAULT\">Default</mat-option>\n      </mat-select>\n      <mat-hint>Change how the flow selection is made</mat-hint>\n    </mat-form-field>\n  </div>\n\n  <div class=\"content__row\">\n    <gio-form-slide-toggle>\n      <gio-form-label>Fail on flow mismatch</gio-form-label>\n      Respond with an error when requests don\u2019t match any defined flow\n      <mat-slide-toggle gioFormSlideToggle formControlName=\"matchRequired\"></mat-slide-toggle>\n    </gio-form-slide-toggle>\n  </div>\n</mat-dialog-content>\n\n<mat-dialog-actions class=\"actions\" align=\"end\">\n  <button [disabled]=\"readOnly\" class=\"actions__cancelBtn\" mat-button [mat-dialog-close]=\"\">Cancel</button>\n  <button [disabled]=\"readOnly\" class=\"actions__saveBtn\" color=\"primary\" mat-flat-button role=\"dialog\" (click)=\"onSubmit()\">Save</button>\n</mat-dialog-actions>\n", styles: [".title__closeBtn{top:0;right:-24px;float:right}.content__row{display:flex;align-items:flex-start;gap:16px}.content__row mat-form-field{flex:1 1 auto}\n"] }]
         }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -1171,6 +1196,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
 class GioPolicyStudioFlowsMenuComponent {
     constructor(matDialog) {
         this.matDialog = matDialog;
+        this.readOnly = false;
         this.loading = false;
         this.flowsGroups = [];
         this.selectedFlow = undefined;
@@ -1297,6 +1323,7 @@ class GioPolicyStudioFlowsMenuComponent {
             .open(GioPolicyStudioFlowExecutionFormDialogComponent, {
             data: {
                 flowExecution,
+                readOnly: this.readOnly,
             },
             role: 'alertdialog',
             id: 'gioPsFlowExecutionFormDialog',
@@ -1313,12 +1340,14 @@ class GioPolicyStudioFlowsMenuComponent {
             .subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: GioPolicyStudioFlowsMenuComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", 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: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.GioLoaderComponent, selector: "gio-loader" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: GioPolicyStudioFlowsMenuComponent, selector: "gio-ps-flows-menu", inputs: { readOnly: "readOnly", 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]=\"readOnly ? 'gio:eye-empty' : '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 [disabled]=\"readOnly\" (click)=\"onAddFlow(flowsGroup)\">\n          <mat-icon svgIcon=\"gio:plus\" matTooltip=\"New flow\"></mat-icon>\n        </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: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.GioLoaderComponent, selector: "gio-loader" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", 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: ["@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: () => [{ type: i1.MatDialog }], propDecorators: { loading: [{
+            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]=\"readOnly ? 'gio:eye-empty' : '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 [disabled]=\"readOnly\" (click)=\"onAddFlow(flowsGroup)\">\n          <mat-icon svgIcon=\"gio:plus\" matTooltip=\"New flow\"></mat-icon>\n        </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: () => [{ type: i1.MatDialog }], propDecorators: { readOnly: [{
+                type: Input
+            }], loading: [{
                 type: Input
             }], apiType: [{
                 type: Input
@@ -1356,6 +1385,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
 class GioPolicyStudioComponent {
     constructor(policyStudioService) {
         this.policyStudioService = policyStudioService;
+        /**
+         * May be set to `true` if the API is not manageable from the UI (e.g. kubernetes operator APIs)
+         */
+        this.readOnly = false;
         /**
          * List of entrypoints to display
          */
@@ -1480,12 +1513,14 @@ class GioPolicyStudioComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: GioPolicyStudioComponent, deps: [{ token: GioPolicyStudioService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: GioPolicyStudioComponent, selector: "gio-policy-studio", inputs: { apiType: "apiType", flowExecution: "flowExecution", entrypointsInfo: "entrypointsInfo", endpointsInfo: "endpointsInfo", commonFlows: "commonFlows", plans: "plans", policies: "policies", trialUrl: "trialUrl", loading: "loading", policySchemaFetcher: "policySchemaFetcher", policyDocumentationFetcher: "policyDocumentationFetcher" }, outputs: { save: "save" }, usesOnChanges: true, 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\n<div class=\"header\">\n  <div class=\"header__apiInfo\" *ngIf=\"!loading; else loadingApiInfo\">\n    <span class=\"gio-badge-primary\">\n      {{ apiType | titlecase }}\n    </span>\n    <span\n      class=\"gio-badge-neutral\"\n      [matTooltip]=\"connectorsTooltip\"\n      matTooltipPosition=\"right\"\n      matTooltipClass=\"gio-policy-studio__tooltip-line-break\"\n    >\n      <mat-icon *ngFor=\"let entrypoint of entrypointsInfo\" class=\"gio-left\" [svgIcon]=\"entrypoint.icon\"></mat-icon>\n      <mat-icon *ngFor=\"let endpoint of endpointsInfo\" class=\"gio-left\" [svgIcon]=\"endpoint.icon\"></mat-icon>\n    </span>\n  </div>\n  <ng-template #loadingApiInfo>\n    <div class=\"header__apiInfo\">\n      <span class=\"gio-badge-primary\">&nbsp;</span>\n      <span class=\"gio-badge-neutral\">&nbsp;</span>\n    </div>\n  </ng-template>\n\n  <div class=\"header__btn\">\n    <button *ngIf=\"!saving\" mat-flat-button color=\"primary\" [disabled]=\"loading || disableSaveButton\" (click)=\"onSave()\">Save</button>\n    <button *ngIf=\"saving\" mat-flat-button color=\"primary\" disabled>Saving...</button>\n  </div>\n</div>\n\n<div class=\"wrapper\">\n  <div class=\"wrapper__flowsMenu\">\n    <gio-ps-flows-menu\n      [loading]=\"loading\"\n      [apiType]=\"apiType\"\n      [flowExecution]=\"flowExecution\"\n      [flowsGroups]=\"flowsGroups\"\n      [entrypoints]=\"entrypointsInfo\"\n      (flowsGroupsChange)=\"onFlowsGroupsChange($event)\"\n      (flowExecutionChange)=\"onFlowExecutionChange($event)\"\n      [(selectedFlow)]=\"selectedFlow\"\n    ></gio-ps-flows-menu>\n  </div>\n\n  <div class=\"wrapper__flowDetails\">\n    <gio-ps-flow-details\n      [loading]=\"loading\"\n      [apiType]=\"apiType\"\n      [flow]=\"selectedFlow\"\n      [entrypointsInfo]=\"entrypointsInfo\"\n      [endpointsInfo]=\"endpointsInfo\"\n      [policies]=\"policies\"\n      [trialUrl]=\"trialUrl\"\n      (flowChange)=\"onSelectedFlowChange($event)\"\n      (deleteFlow)=\"onDeleteSelectedFlow($event)\"\n    ></gio-ps-flow-details>\n  </div>\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;height:100%;flex-direction:column;padding:16px;background-color:#fff}::ng-deep .gio-policy-studio__tooltip-line-break{white-space:pre-line}.header{display:flex;align-items:center;padding-bottom:16px}.header__apiInfo{flex:1 1 auto}.wrapper{display:flex;min-height:0;flex:1 1 auto;flex-direction:row;gap:16px}.wrapper__flowsMenu{overflow:hidden;min-width:230px;max-width:400px;flex:1 1 33%;border:1px solid #d3d5dc;border-radius:8px}.wrapper__flowDetails{overflow:hidden;flex:1 1 66%;border:1px solid #d3d5dc;border-radius:8px}\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: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: GioPolicyStudioFlowsMenuComponent, selector: "gio-ps-flows-menu", inputs: ["loading", "apiType", "flowExecution", "flowsGroups", "selectedFlow", "entrypoints"], outputs: ["selectedFlowChange", "flowsGroupsChange", "flowExecutionChange"] }, { kind: "component", type: GioPolicyStudioDetailsComponent, selector: "gio-ps-flow-details", inputs: ["loading", "apiType", "flow", "entrypointsInfo", "endpointsInfo", "policies", "trialUrl"], outputs: ["flowChange", "deleteFlow"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: GioPolicyStudioComponent, selector: "gio-policy-studio", inputs: { readOnly: "readOnly", apiType: "apiType", flowExecution: "flowExecution", entrypointsInfo: "entrypointsInfo", endpointsInfo: "endpointsInfo", commonFlows: "commonFlows", plans: "plans", policies: "policies", trialUrl: "trialUrl", loading: "loading", policySchemaFetcher: "policySchemaFetcher", policyDocumentationFetcher: "policyDocumentationFetcher" }, outputs: { save: "save" }, usesOnChanges: true, 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\n<div class=\"header\">\n  <div class=\"header__apiInfo\" *ngIf=\"!loading; else loadingApiInfo\">\n    <span class=\"gio-badge-primary\">\n      {{ apiType | titlecase }}\n    </span>\n    <span\n      class=\"gio-badge-neutral\"\n      [matTooltip]=\"connectorsTooltip\"\n      matTooltipPosition=\"right\"\n      matTooltipClass=\"gio-policy-studio__tooltip-line-break\"\n    >\n      <mat-icon *ngFor=\"let entrypoint of entrypointsInfo\" class=\"gio-left\" [svgIcon]=\"entrypoint.icon\"></mat-icon>\n      <mat-icon *ngFor=\"let endpoint of endpointsInfo\" class=\"gio-left\" [svgIcon]=\"endpoint.icon\"></mat-icon>\n    </span>\n  </div>\n  <ng-template #loadingApiInfo>\n    <div class=\"header__apiInfo\">\n      <span class=\"gio-badge-primary\">&nbsp;</span>\n      <span class=\"gio-badge-neutral\">&nbsp;</span>\n    </div>\n  </ng-template>\n\n  <div class=\"header__btn\">\n    <button *ngIf=\"!saving\" mat-flat-button color=\"primary\" [disabled]=\"loading || disableSaveButton\" (click)=\"onSave()\">Save</button>\n    <button *ngIf=\"saving\" mat-flat-button color=\"primary\" disabled>Saving...</button>\n  </div>\n</div>\n\n<div class=\"wrapper\">\n  <div class=\"wrapper__flowsMenu\">\n    <gio-ps-flows-menu\n      [readOnly]=\"readOnly\"\n      [loading]=\"loading\"\n      [apiType]=\"apiType\"\n      [flowExecution]=\"flowExecution\"\n      [flowsGroups]=\"flowsGroups\"\n      [entrypoints]=\"entrypointsInfo\"\n      (flowsGroupsChange)=\"onFlowsGroupsChange($event)\"\n      (flowExecutionChange)=\"onFlowExecutionChange($event)\"\n      [(selectedFlow)]=\"selectedFlow\"\n    ></gio-ps-flows-menu>\n  </div>\n\n  <div class=\"wrapper__flowDetails\">\n    <gio-ps-flow-details\n      [readOnly]=\"readOnly\"\n      [loading]=\"loading\"\n      [apiType]=\"apiType\"\n      [flow]=\"selectedFlow\"\n      [entrypointsInfo]=\"entrypointsInfo\"\n      [endpointsInfo]=\"endpointsInfo\"\n      [policies]=\"policies\"\n      [trialUrl]=\"trialUrl\"\n      (flowChange)=\"onSelectedFlowChange($event)\"\n      (deleteFlow)=\"onDeleteSelectedFlow($event)\"\n    ></gio-ps-flow-details>\n  </div>\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;height:100%;flex-direction:column;padding:16px;background-color:#fff}::ng-deep .gio-policy-studio__tooltip-line-break{white-space:pre-line}.header{display:flex;align-items:center;padding-bottom:16px}.header__apiInfo{flex:1 1 auto}.wrapper{display:flex;min-height:0;flex:1 1 auto;flex-direction:row;gap:16px}.wrapper__flowsMenu{overflow:hidden;min-width:230px;max-width:400px;flex:1 1 33%;border:1px solid #d3d5dc;border-radius:8px}.wrapper__flowDetails{overflow:hidden;flex:1 1 66%;border:1px solid #d3d5dc;border-radius:8px}\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: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: GioPolicyStudioFlowsMenuComponent, selector: "gio-ps-flows-menu", inputs: ["readOnly", "loading", "apiType", "flowExecution", "flowsGroups", "selectedFlow", "entrypoints"], outputs: ["selectedFlowChange", "flowsGroupsChange", "flowExecutionChange"] }, { kind: "component", type: GioPolicyStudioDetailsComponent, selector: "gio-ps-flow-details", inputs: ["readOnly", "loading", "apiType", "flow", "entrypointsInfo", "endpointsInfo", "policies", "trialUrl"], outputs: ["flowChange", "deleteFlow"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: GioPolicyStudioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gio-policy-studio', 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\n<div class=\"header\">\n  <div class=\"header__apiInfo\" *ngIf=\"!loading; else loadingApiInfo\">\n    <span class=\"gio-badge-primary\">\n      {{ apiType | titlecase }}\n    </span>\n    <span\n      class=\"gio-badge-neutral\"\n      [matTooltip]=\"connectorsTooltip\"\n      matTooltipPosition=\"right\"\n      matTooltipClass=\"gio-policy-studio__tooltip-line-break\"\n    >\n      <mat-icon *ngFor=\"let entrypoint of entrypointsInfo\" class=\"gio-left\" [svgIcon]=\"entrypoint.icon\"></mat-icon>\n      <mat-icon *ngFor=\"let endpoint of endpointsInfo\" class=\"gio-left\" [svgIcon]=\"endpoint.icon\"></mat-icon>\n    </span>\n  </div>\n  <ng-template #loadingApiInfo>\n    <div class=\"header__apiInfo\">\n      <span class=\"gio-badge-primary\">&nbsp;</span>\n      <span class=\"gio-badge-neutral\">&nbsp;</span>\n    </div>\n  </ng-template>\n\n  <div class=\"header__btn\">\n    <button *ngIf=\"!saving\" mat-flat-button color=\"primary\" [disabled]=\"loading || disableSaveButton\" (click)=\"onSave()\">Save</button>\n    <button *ngIf=\"saving\" mat-flat-button color=\"primary\" disabled>Saving...</button>\n  </div>\n</div>\n\n<div class=\"wrapper\">\n  <div class=\"wrapper__flowsMenu\">\n    <gio-ps-flows-menu\n      [loading]=\"loading\"\n      [apiType]=\"apiType\"\n      [flowExecution]=\"flowExecution\"\n      [flowsGroups]=\"flowsGroups\"\n      [entrypoints]=\"entrypointsInfo\"\n      (flowsGroupsChange)=\"onFlowsGroupsChange($event)\"\n      (flowExecutionChange)=\"onFlowExecutionChange($event)\"\n      [(selectedFlow)]=\"selectedFlow\"\n    ></gio-ps-flows-menu>\n  </div>\n\n  <div class=\"wrapper__flowDetails\">\n    <gio-ps-flow-details\n      [loading]=\"loading\"\n      [apiType]=\"apiType\"\n      [flow]=\"selectedFlow\"\n      [entrypointsInfo]=\"entrypointsInfo\"\n      [endpointsInfo]=\"endpointsInfo\"\n      [policies]=\"policies\"\n      [trialUrl]=\"trialUrl\"\n      (flowChange)=\"onSelectedFlowChange($event)\"\n      (deleteFlow)=\"onDeleteSelectedFlow($event)\"\n    ></gio-ps-flow-details>\n  </div>\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;height:100%;flex-direction:column;padding:16px;background-color:#fff}::ng-deep .gio-policy-studio__tooltip-line-break{white-space:pre-line}.header{display:flex;align-items:center;padding-bottom:16px}.header__apiInfo{flex:1 1 auto}.wrapper{display:flex;min-height:0;flex:1 1 auto;flex-direction:row;gap:16px}.wrapper__flowsMenu{overflow:hidden;min-width:230px;max-width:400px;flex:1 1 33%;border:1px solid #d3d5dc;border-radius:8px}.wrapper__flowDetails{overflow:hidden;flex:1 1 66%;border:1px solid #d3d5dc;border-radius:8px}\n"] }]
-        }], ctorParameters: () => [{ type: GioPolicyStudioService }], propDecorators: { apiType: [{
+            args: [{ selector: 'gio-policy-studio', 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\n<div class=\"header\">\n  <div class=\"header__apiInfo\" *ngIf=\"!loading; else loadingApiInfo\">\n    <span class=\"gio-badge-primary\">\n      {{ apiType | titlecase }}\n    </span>\n    <span\n      class=\"gio-badge-neutral\"\n      [matTooltip]=\"connectorsTooltip\"\n      matTooltipPosition=\"right\"\n      matTooltipClass=\"gio-policy-studio__tooltip-line-break\"\n    >\n      <mat-icon *ngFor=\"let entrypoint of entrypointsInfo\" class=\"gio-left\" [svgIcon]=\"entrypoint.icon\"></mat-icon>\n      <mat-icon *ngFor=\"let endpoint of endpointsInfo\" class=\"gio-left\" [svgIcon]=\"endpoint.icon\"></mat-icon>\n    </span>\n  </div>\n  <ng-template #loadingApiInfo>\n    <div class=\"header__apiInfo\">\n      <span class=\"gio-badge-primary\">&nbsp;</span>\n      <span class=\"gio-badge-neutral\">&nbsp;</span>\n    </div>\n  </ng-template>\n\n  <div class=\"header__btn\">\n    <button *ngIf=\"!saving\" mat-flat-button color=\"primary\" [disabled]=\"loading || disableSaveButton\" (click)=\"onSave()\">Save</button>\n    <button *ngIf=\"saving\" mat-flat-button color=\"primary\" disabled>Saving...</button>\n  </div>\n</div>\n\n<div class=\"wrapper\">\n  <div class=\"wrapper__flowsMenu\">\n    <gio-ps-flows-menu\n      [readOnly]=\"readOnly\"\n      [loading]=\"loading\"\n      [apiType]=\"apiType\"\n      [flowExecution]=\"flowExecution\"\n      [flowsGroups]=\"flowsGroups\"\n      [entrypoints]=\"entrypointsInfo\"\n      (flowsGroupsChange)=\"onFlowsGroupsChange($event)\"\n      (flowExecutionChange)=\"onFlowExecutionChange($event)\"\n      [(selectedFlow)]=\"selectedFlow\"\n    ></gio-ps-flows-menu>\n  </div>\n\n  <div class=\"wrapper__flowDetails\">\n    <gio-ps-flow-details\n      [readOnly]=\"readOnly\"\n      [loading]=\"loading\"\n      [apiType]=\"apiType\"\n      [flow]=\"selectedFlow\"\n      [entrypointsInfo]=\"entrypointsInfo\"\n      [endpointsInfo]=\"endpointsInfo\"\n      [policies]=\"policies\"\n      [trialUrl]=\"trialUrl\"\n      (flowChange)=\"onSelectedFlowChange($event)\"\n      (deleteFlow)=\"onDeleteSelectedFlow($event)\"\n    ></gio-ps-flow-details>\n  </div>\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;height:100%;flex-direction:column;padding:16px;background-color:#fff}::ng-deep .gio-policy-studio__tooltip-line-break{white-space:pre-line}.header{display:flex;align-items:center;padding-bottom:16px}.header__apiInfo{flex:1 1 auto}.wrapper{display:flex;min-height:0;flex:1 1 auto;flex-direction:row;gap:16px}.wrapper__flowsMenu{overflow:hidden;min-width:230px;max-width:400px;flex:1 1 33%;border:1px solid #d3d5dc;border-radius:8px}.wrapper__flowDetails{overflow:hidden;flex:1 1 66%;border:1px solid #d3d5dc;border-radius:8px}\n"] }]
+        }], ctorParameters: () => [{ type: GioPolicyStudioService }], propDecorators: { readOnly: [{
+                type: Input
+            }], apiType: [{
                 type: Input
             }], flowExecution: [{
                 type: Input