@gravitee/ui-policy-studio-angular 15.3.0 → 15.4.0

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

@@ -1,7 +1,7 @@
 import { get, cloneDeep, uniqueId, capitalize, trim, isEmpty, flatten, uniq, toLower, isNil, has, filter, isEqual, differenceBy, omit, unionBy } from 'lodash';
 import * as i0 from '@angular/core';
 import { Component, Inject, EventEmitter, Input, Output, Injectable, Pipe, ChangeDetectionStrategy } from '@angular/core';
-import { BehaviorSubject, Subject, of, EMPTY, timer } from 'rxjs';
+import { Subject, BehaviorSubject, of, EMPTY, timer } from 'rxjs';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i6$1 from '@gravitee/ui-particles-angular';
@@ -10,23 +10,23 @@ import * as i3$1 from '@angular/material/tooltip';
 import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
 import * as i4 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import { tap, map, catchError, takeUntil, startWith } from 'rxjs/operators';
-import * as i7$2 from '@angular/material/menu';
-import { MatMenuModule } from '@angular/material/menu';
 import * as i8 from '@angular/cdk/drag-drop';
 import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
-import * as i1 from '@angular/material/dialog';
-import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i3 from '@angular/forms';
 import { UntypedFormGroup, UntypedFormControl, ReactiveFormsModule, FormControl } from '@angular/forms';
 import * as i5 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i7$1 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i7$2 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import { debounceTime, startWith, distinctUntilChanged, tap, takeUntil, map, catchError } from 'rxjs/operators';
+import * as i1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i6 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i7$1 from '@angular/material/slide-toggle';
+import * as i7 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i7 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
 import * as i5$1 from '@angular/material/icon';
 import * as i3$2 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
@@ -306,60 +306,34 @@ const toPolicy = (genericPolicy) => {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class GioPolicyStudioFlowMessageFormDialogComponent {
+class GioPolicyStudioFlowExecutionFormDialogComponent {
     constructor(dialogRef, flowDialogData) {
         this.dialogRef = dialogRef;
-        this.entrypoints = [];
-        this.mode = 'create';
-        this.entrypoints = flowDialogData?.entrypoints ?? [];
-        this.existingFlow = cloneDeep(flowDialogData?.flow);
-        this.mode = this.existingFlow ? 'edit' : 'create';
-        const channelSelector = flowDialogData?.flow?.selectors?.find(s => s.type === 'CHANNEL');
-        const conditionSelector = flowDialogData?.flow?.selectors?.find(s => s.type === 'CONDITION');
-        this.flowFormGroup = new UntypedFormGroup({
-            name: new UntypedFormControl(flowDialogData?.flow?.name ?? ''),
-            channelOperator: new UntypedFormControl(channelSelector?.channelOperator ?? 'EQUALS'),
-            channel: new UntypedFormControl(channelSelector?.channel ?? ''),
-            operations: new UntypedFormControl(channelSelector?.operations ?? []),
-            entrypoints: new UntypedFormControl(channelSelector?.entrypoints ?? []),
-            condition: new UntypedFormControl(conditionSelector?.condition ?? ''),
+        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 channelSelectorToSave = {
-            type: 'CHANNEL',
-            channel: this.flowFormGroup?.get('channel')?.value,
-            channelOperator: this.flowFormGroup?.get('channelOperator')?.value,
-            operations: this.flowFormGroup?.get('operations')?.value,
-            entrypoints: this.flowFormGroup?.get('entrypoints')?.value,
-        };
-        const conditionValue = this.flowFormGroup?.get('condition')?.value;
-        const conditionSelectorToSave = conditionValue
-            ? {
-                type: 'CONDITION',
-                condition: conditionValue,
-            }
-            : undefined;
-        const flowToSave = {
-            // New id for new flow
-            _id: uniqueId('flow_'),
-            // If existing flow, keep root props
-            ...this.existingFlow,
-            // Mark as changed
-            _hasChanged: true,
-            // Add changes
-            name: this.flowFormGroup?.get('name')?.value,
-            selectors: conditionSelectorToSave ? [channelSelectorToSave, conditionSelectorToSave] : [channelSelectorToSave],
-            enabled: this.existingFlow ? this.existingFlow.enabled : true,
+        const flowExecutionToSave = {
+            ...this.existingFlowExecution,
+            mode: this.flowExecutionFormGroup?.get('mode')?.value,
+            matchRequired: this.flowExecutionFormGroup?.get('matchRequired')?.value,
         };
         this.dialogRef.close({
-            ...flowToSave,
+            ...flowExecutionToSave,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioPolicyStudioFlowMessageFormDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: GioPolicyStudioFlowMessageFormDialogComponent, isStandalone: true, selector: "gio-ps-flow-message-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  {{ mode === 'create' ? 'Create a new flow' : 'Edit flow'\n  }}<button class=\"title__closeBtn\" mat-icon-button aria-label=\"Close dialog\" [mat-dialog-close]=\"false\">\n    <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n  </button>\n</h2>\n\n<mat-dialog-content *ngIf=\"flowFormGroup\" class=\"content\" [formGroup]=\"flowFormGroup\">\n  <p>Flows allow you to apply different policies per event phases. For example you can reroute calls based on the URL specified.</p>\n\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Flow name</mat-label>\n      <input matInput formControlName=\"name\" cdkFocusInitial />\n      <mat-hint>Names will be automatically generated with channel and operation if left blank.</mat-hint>\n    </mat-form-field>\n  </div>\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Operator</mat-label>\n      <mat-select formControlName=\"channelOperator\">\n        <mat-option value=\"EQUALS\">Equals</mat-option>\n        <mat-option value=\"STARTS_WITH\">Starts with</mat-option>\n      </mat-select>\n      <mat-hint>Channel operator.</mat-hint>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Channel</mat-label>\n      <input matInput formControlName=\"channel\" />\n      <mat-hint>Publish or Subscribe channel. This is the path of your request.</mat-hint>\n    </mat-form-field>\n  </div>\n\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Entrypoints</mat-label>\n      <mat-select multiple formControlName=\"entrypoints\">\n        <mat-option *ngFor=\"let entrypoint of entrypoints\" [value]=\"entrypoint.type\">{{ entrypoint.name }}</mat-option>\n      </mat-select>\n      <mat-hint>Entrypoints where your flow will be executed. They will all be executed if left empty.</mat-hint>\n    </mat-form-field>\n  </div>\n\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Entrypoints supported operations</mat-label>\n      <mat-select multiple formControlName=\"operations\">\n        <mat-option value=\"PUBLISH\">Publish</mat-option>\n        <mat-option value=\"SUBSCRIBE\">Subscribe</mat-option>\n      </mat-select>\n      <mat-hint>They will all be supported if left empty.</mat-hint>\n    </mat-form-field>\n  </div>\n\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Condition</mat-label>\n      <input matInput formControlName=\"condition\" />\n      <mat-hint>Condition to execute the flow, supports Expression Language.</mat-hint>\n    </mat-form-field>\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]=\"false\">Cancel</button>\n  <button class=\"actions__saveBtn\" color=\"primary\" mat-flat-button role=\"dialog\" (click)=\"onSubmit()\">\n    {{ mode === 'create' ? 'Create' : 'Save' }}\n  </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: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: MatButtonModule }, { 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: "ngmodule", type: MatDialogModule }, { 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: "ngmodule", type: MatFormFieldModule }, { 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: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.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", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: GioFormSlideToggleModule }, { kind: "ngmodule", type: GioBannerModule }, { kind: "ngmodule", type: GioIconsModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", 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: "19.2.4", type: GioPolicyStudioFlowExecutionFormDialogComponent, isStandalone: true, 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: MatButtonModule }, { 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: "ngmodule", type: MatDialogModule }, { 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: "ngmodule", type: MatFormFieldModule }, { 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: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.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", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: GioFormSlideToggleModule }, { kind: "component", type: i6$1.GioFormSlideToggleComponent, selector: "gio-form-slide-toggle", inputs: ["appearance"] }, { kind: "component", type: i6$1.GioFormLabelComponent, selector: "gio-form-label" }, { kind: "directive", type: i6$1.GioFormSlideToggleDirective, selector: "[gioFormSlideToggle]" }, { kind: "ngmodule", type: GioBannerModule }, { kind: "component", type: i6$1.GioBannerInfoComponent, selector: "gio-banner-info" }, { kind: "ngmodule", type: GioIconsModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioPolicyStudioFlowMessageFormDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioPolicyStudioFlowExecutionFormDialogComponent, decorators: [{
             type: Component,
             args: [{ imports: [
                         CommonModule,
@@ -368,12 +342,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                         MatDialogModule,
                         MatFormFieldModule,
                         MatSelectModule,
-                        MatInputModule,
                         MatSlideToggleModule,
                         GioFormSlideToggleModule,
                         GioBannerModule,
                         GioIconsModule,
-                    ], selector: 'gio-ps-flow-message-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  {{ mode === 'create' ? 'Create a new flow' : 'Edit flow'\n  }}<button class=\"title__closeBtn\" mat-icon-button aria-label=\"Close dialog\" [mat-dialog-close]=\"false\">\n    <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n  </button>\n</h2>\n\n<mat-dialog-content *ngIf=\"flowFormGroup\" class=\"content\" [formGroup]=\"flowFormGroup\">\n  <p>Flows allow you to apply different policies per event phases. For example you can reroute calls based on the URL specified.</p>\n\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Flow name</mat-label>\n      <input matInput formControlName=\"name\" cdkFocusInitial />\n      <mat-hint>Names will be automatically generated with channel and operation if left blank.</mat-hint>\n    </mat-form-field>\n  </div>\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Operator</mat-label>\n      <mat-select formControlName=\"channelOperator\">\n        <mat-option value=\"EQUALS\">Equals</mat-option>\n        <mat-option value=\"STARTS_WITH\">Starts with</mat-option>\n      </mat-select>\n      <mat-hint>Channel operator.</mat-hint>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Channel</mat-label>\n      <input matInput formControlName=\"channel\" />\n      <mat-hint>Publish or Subscribe channel. This is the path of your request.</mat-hint>\n    </mat-form-field>\n  </div>\n\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Entrypoints</mat-label>\n      <mat-select multiple formControlName=\"entrypoints\">\n        <mat-option *ngFor=\"let entrypoint of entrypoints\" [value]=\"entrypoint.type\">{{ entrypoint.name }}</mat-option>\n      </mat-select>\n      <mat-hint>Entrypoints where your flow will be executed. They will all be executed if left empty.</mat-hint>\n    </mat-form-field>\n  </div>\n\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Entrypoints supported operations</mat-label>\n      <mat-select multiple formControlName=\"operations\">\n        <mat-option value=\"PUBLISH\">Publish</mat-option>\n        <mat-option value=\"SUBSCRIBE\">Subscribe</mat-option>\n      </mat-select>\n      <mat-hint>They will all be supported if left empty.</mat-hint>\n    </mat-form-field>\n  </div>\n\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Condition</mat-label>\n      <input matInput formControlName=\"condition\" />\n      <mat-hint>Condition to execute the flow, supports Expression Language.</mat-hint>\n    </mat-form-field>\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]=\"false\">Cancel</button>\n  <button class=\"actions__saveBtn\" color=\"primary\" mat-flat-button role=\"dialog\" (click)=\"onSubmit()\">\n    {{ mode === 'create' ? 'Create' : 'Save' }}\n  </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"] }]
+                    ], 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]
@@ -394,30 +367,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const METHODS_AUTOCOMPLETE = ['ALL', ...HttpMethods];
-class GioPolicyStudioFlowProxyFormDialogComponent {
+class GioPolicyStudioFlowMessageFormDialogComponent {
     constructor(dialogRef, flowDialogData) {
         this.dialogRef = dialogRef;
+        this.entrypoints = [];
         this.mode = 'create';
-        this.methods = METHODS_AUTOCOMPLETE;
+        this.entrypoints = flowDialogData?.entrypoints ?? [];
         this.existingFlow = cloneDeep(flowDialogData?.flow);
         this.mode = this.existingFlow ? 'edit' : 'create';
-        const httpSelector = flowDialogData?.flow?.selectors?.find(s => s.type === 'HTTP');
+        const channelSelector = flowDialogData?.flow?.selectors?.find(s => s.type === 'CHANNEL');
         const conditionSelector = flowDialogData?.flow?.selectors?.find(s => s.type === 'CONDITION');
         this.flowFormGroup = new UntypedFormGroup({
             name: new UntypedFormControl(flowDialogData?.flow?.name ?? ''),
-            pathOperator: new UntypedFormControl(httpSelector?.pathOperator ?? 'EQUALS'),
-            path: new UntypedFormControl(sanitizePathFormValue(httpSelector?.path)),
-            methods: new UntypedFormControl(sanitizeMethodFormValue(httpSelector?.methods)),
+            channelOperator: new UntypedFormControl(channelSelector?.channelOperator ?? 'EQUALS'),
+            channel: new UntypedFormControl(channelSelector?.channel ?? ''),
+            operations: new UntypedFormControl(channelSelector?.operations ?? []),
+            entrypoints: new UntypedFormControl(channelSelector?.entrypoints ?? []),
             condition: new UntypedFormControl(conditionSelector?.condition ?? ''),
         });
     }
     onSubmit() {
-        const httpSelectorToSave = {
-            type: 'HTTP',
-            path: sanitizePath(this.flowFormGroup?.get('path')?.value),
-            pathOperator: this.flowFormGroup?.get('pathOperator')?.value,
-            methods: sanitizeMethods(this.flowFormGroup?.get('methods')?.value),
+        const channelSelectorToSave = {
+            type: 'CHANNEL',
+            channel: this.flowFormGroup?.get('channel')?.value,
+            channelOperator: this.flowFormGroup?.get('channelOperator')?.value,
+            operations: this.flowFormGroup?.get('operations')?.value,
+            entrypoints: this.flowFormGroup?.get('entrypoints')?.value,
         };
         const conditionValue = this.flowFormGroup?.get('condition')?.value;
         const conditionSelectorToSave = conditionValue
@@ -435,20 +410,17 @@ class GioPolicyStudioFlowProxyFormDialogComponent {
             _hasChanged: true,
             // Add changes
             name: this.flowFormGroup?.get('name')?.value,
-            selectors: conditionSelectorToSave ? [httpSelectorToSave, conditionSelectorToSave] : [httpSelectorToSave],
+            selectors: conditionSelectorToSave ? [channelSelectorToSave, conditionSelectorToSave] : [channelSelectorToSave],
             enabled: this.existingFlow ? this.existingFlow.enabled : true,
         };
         this.dialogRef.close({
             ...flowToSave,
         });
     }
-    tagValidationHook(tag, validationCb) {
-        validationCb(METHODS_AUTOCOMPLETE.map(m => `${m}`).includes(tag.toUpperCase()));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioPolicyStudioFlowProxyFormDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: GioPolicyStudioFlowProxyFormDialogComponent, isStandalone: true, selector: "gio-ps-flow-proxy-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  {{ mode === 'create' ? 'Create a new flow' : 'Edit flow' }}\n\n  <button class=\"title__closeBtn\" mat-icon-button aria-label=\"Close dialog\" [mat-dialog-close]=\"false\">\n    <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n  </button>\n</h2>\n\n<mat-dialog-content *ngIf=\"flowFormGroup\" class=\"content\" [formGroup]=\"flowFormGroup\">\n  <p>\n    Flows allow you to apply different policies per HTTP path and/or method. For example you can reroute calls based on the URL specified.\n  </p>\n\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Flow name</mat-label>\n      <input matInput formControlName=\"name\" cdkFocusInitial />\n      <mat-hint>Names will be automatically generated with path and method if left blank</mat-hint>\n    </mat-form-field>\n  </div>\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Operator</mat-label>\n      <mat-select formControlName=\"pathOperator\">\n        <mat-option value=\"EQUALS\">Equals</mat-option>\n        <mat-option value=\"STARTS_WITH\">Starts with</mat-option>\n      </mat-select>\n      <mat-hint>Path operator</mat-hint>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Path</mat-label>\n      <span matTextPrefix>/&nbsp;</span>\n      <input matInput formControlName=\"path\" />\n      <mat-hint>Path</mat-hint>\n    </mat-form-field>\n  </div>\n\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Methods for your flow</mat-label>\n      <gio-form-tags-input\n        formControlName=\"methods\"\n        [autocompleteOptions]=\"methods\"\n        [tagValidationHook]=\"tagValidationHook\"\n      ></gio-form-tags-input>\n    </mat-form-field>\n  </div>\n\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Condition</mat-label>\n      <input matInput formControlName=\"condition\" />\n      <mat-hint>Condition to execute the flow, supports Expression Language</mat-hint>\n    </mat-form-field>\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]=\"false\">Cancel</button>\n  <button class=\"actions__saveBtn\" color=\"primary\" mat-flat-button role=\"dialog\" (click)=\"onSubmit()\">\n    {{ mode === 'create' ? 'Create' : 'Save' }}\n  </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: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: MatButtonModule }, { 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: "ngmodule", type: MatDialogModule }, { 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: "ngmodule", type: MatFormFieldModule }, { 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: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.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", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: GioFormSlideToggleModule }, { kind: "ngmodule", type: GioBannerModule }, { kind: "ngmodule", type: GioIconsModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: GioFormTagsInputModule }, { kind: "component", type: i6$1.GioFormTagsInputComponent, selector: "gio-form-tags-input", inputs: ["aria-label", "addOnBlur", "tagValidationHook", "autocompleteOptions", "displayValueWith", "useAutocompleteOptionValueOnly", "placeholder", "required", "disabled"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioPolicyStudioFlowMessageFormDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: GioPolicyStudioFlowMessageFormDialogComponent, isStandalone: true, selector: "gio-ps-flow-message-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  {{ mode === 'create' ? 'Create a new flow' : 'Edit flow'\n  }}<button class=\"title__closeBtn\" mat-icon-button aria-label=\"Close dialog\" [mat-dialog-close]=\"false\">\n    <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n  </button>\n</h2>\n\n<mat-dialog-content *ngIf=\"flowFormGroup\" class=\"content\" [formGroup]=\"flowFormGroup\">\n  <p>Flows allow you to apply different policies per event phases. For example you can reroute calls based on the URL specified.</p>\n\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Flow name</mat-label>\n      <input matInput formControlName=\"name\" cdkFocusInitial />\n      <mat-hint>Names will be automatically generated with channel and operation if left blank.</mat-hint>\n    </mat-form-field>\n  </div>\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Operator</mat-label>\n      <mat-select formControlName=\"channelOperator\">\n        <mat-option value=\"EQUALS\">Equals</mat-option>\n        <mat-option value=\"STARTS_WITH\">Starts with</mat-option>\n      </mat-select>\n      <mat-hint>Channel operator.</mat-hint>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Channel</mat-label>\n      <input matInput formControlName=\"channel\" />\n      <mat-hint>Publish or Subscribe channel. This is the path of your request.</mat-hint>\n    </mat-form-field>\n  </div>\n\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Entrypoints</mat-label>\n      <mat-select multiple formControlName=\"entrypoints\">\n        <mat-option *ngFor=\"let entrypoint of entrypoints\" [value]=\"entrypoint.type\">{{ entrypoint.name }}</mat-option>\n      </mat-select>\n      <mat-hint>Entrypoints where your flow will be executed. They will all be executed if left empty.</mat-hint>\n    </mat-form-field>\n  </div>\n\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Entrypoints supported operations</mat-label>\n      <mat-select multiple formControlName=\"operations\">\n        <mat-option value=\"PUBLISH\">Publish</mat-option>\n        <mat-option value=\"SUBSCRIBE\">Subscribe</mat-option>\n      </mat-select>\n      <mat-hint>They will all be supported if left empty.</mat-hint>\n    </mat-form-field>\n  </div>\n\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Condition</mat-label>\n      <input matInput formControlName=\"condition\" />\n      <mat-hint>Condition to execute the flow, supports Expression Language.</mat-hint>\n    </mat-form-field>\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]=\"false\">Cancel</button>\n  <button class=\"actions__saveBtn\" color=\"primary\" mat-flat-button role=\"dialog\" (click)=\"onSubmit()\">\n    {{ mode === 'create' ? 'Create' : 'Save' }}\n  </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: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: MatButtonModule }, { 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: "ngmodule", type: MatDialogModule }, { 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: "ngmodule", type: MatFormFieldModule }, { 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: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.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", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: GioFormSlideToggleModule }, { kind: "ngmodule", type: GioBannerModule }, { kind: "ngmodule", type: GioIconsModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioPolicyStudioFlowProxyFormDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioPolicyStudioFlowMessageFormDialogComponent, decorators: [{
             type: Component,
             args: [{ imports: [
                         CommonModule,
@@ -462,34 +434,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                         GioFormSlideToggleModule,
                         GioBannerModule,
                         GioIconsModule,
-                        GioFormTagsInputModule,
-                    ], selector: 'gio-ps-flow-proxy-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  {{ mode === 'create' ? 'Create a new flow' : 'Edit flow' }}\n\n  <button class=\"title__closeBtn\" mat-icon-button aria-label=\"Close dialog\" [mat-dialog-close]=\"false\">\n    <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n  </button>\n</h2>\n\n<mat-dialog-content *ngIf=\"flowFormGroup\" class=\"content\" [formGroup]=\"flowFormGroup\">\n  <p>\n    Flows allow you to apply different policies per HTTP path and/or method. For example you can reroute calls based on the URL specified.\n  </p>\n\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Flow name</mat-label>\n      <input matInput formControlName=\"name\" cdkFocusInitial />\n      <mat-hint>Names will be automatically generated with path and method if left blank</mat-hint>\n    </mat-form-field>\n  </div>\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Operator</mat-label>\n      <mat-select formControlName=\"pathOperator\">\n        <mat-option value=\"EQUALS\">Equals</mat-option>\n        <mat-option value=\"STARTS_WITH\">Starts with</mat-option>\n      </mat-select>\n      <mat-hint>Path operator</mat-hint>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Path</mat-label>\n      <span matTextPrefix>/&nbsp;</span>\n      <input matInput formControlName=\"path\" />\n      <mat-hint>Path</mat-hint>\n    </mat-form-field>\n  </div>\n\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Methods for your flow</mat-label>\n      <gio-form-tags-input\n        formControlName=\"methods\"\n        [autocompleteOptions]=\"methods\"\n        [tagValidationHook]=\"tagValidationHook\"\n      ></gio-form-tags-input>\n    </mat-form-field>\n  </div>\n\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Condition</mat-label>\n      <input matInput formControlName=\"condition\" />\n      <mat-hint>Condition to execute the flow, supports Expression Language</mat-hint>\n    </mat-form-field>\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]=\"false\">Cancel</button>\n  <button class=\"actions__saveBtn\" color=\"primary\" mat-flat-button role=\"dialog\" (click)=\"onSubmit()\">\n    {{ mode === 'create' ? 'Create' : 'Save' }}\n  </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"] }]
+                    ], selector: 'gio-ps-flow-message-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  {{ mode === 'create' ? 'Create a new flow' : 'Edit flow'\n  }}<button class=\"title__closeBtn\" mat-icon-button aria-label=\"Close dialog\" [mat-dialog-close]=\"false\">\n    <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n  </button>\n</h2>\n\n<mat-dialog-content *ngIf=\"flowFormGroup\" class=\"content\" [formGroup]=\"flowFormGroup\">\n  <p>Flows allow you to apply different policies per event phases. For example you can reroute calls based on the URL specified.</p>\n\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Flow name</mat-label>\n      <input matInput formControlName=\"name\" cdkFocusInitial />\n      <mat-hint>Names will be automatically generated with channel and operation if left blank.</mat-hint>\n    </mat-form-field>\n  </div>\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Operator</mat-label>\n      <mat-select formControlName=\"channelOperator\">\n        <mat-option value=\"EQUALS\">Equals</mat-option>\n        <mat-option value=\"STARTS_WITH\">Starts with</mat-option>\n      </mat-select>\n      <mat-hint>Channel operator.</mat-hint>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Channel</mat-label>\n      <input matInput formControlName=\"channel\" />\n      <mat-hint>Publish or Subscribe channel. This is the path of your request.</mat-hint>\n    </mat-form-field>\n  </div>\n\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Entrypoints</mat-label>\n      <mat-select multiple formControlName=\"entrypoints\">\n        <mat-option *ngFor=\"let entrypoint of entrypoints\" [value]=\"entrypoint.type\">{{ entrypoint.name }}</mat-option>\n      </mat-select>\n      <mat-hint>Entrypoints where your flow will be executed. They will all be executed if left empty.</mat-hint>\n    </mat-form-field>\n  </div>\n\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Entrypoints supported operations</mat-label>\n      <mat-select multiple formControlName=\"operations\">\n        <mat-option value=\"PUBLISH\">Publish</mat-option>\n        <mat-option value=\"SUBSCRIBE\">Subscribe</mat-option>\n      </mat-select>\n      <mat-hint>They will all be supported if left empty.</mat-hint>\n    </mat-form-field>\n  </div>\n\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Condition</mat-label>\n      <input matInput formControlName=\"condition\" />\n      <mat-hint>Condition to execute the flow, supports Expression Language.</mat-hint>\n    </mat-form-field>\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]=\"false\">Cancel</button>\n  <button class=\"actions__saveBtn\" color=\"primary\" mat-flat-button role=\"dialog\" (click)=\"onSubmit()\">\n    {{ mode === 'create' ? 'Create' : 'Save' }}\n  </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]
                 }] }] });
-const sanitizeMethods = (value) => {
-    if (!value || value.find(m => m === 'ALL'))
-        return [];
-    return value;
-};
-const sanitizeMethodFormValue = (methods) => {
-    if (!methods || methods.length === 0)
-        return ['ALL'];
-    return methods;
-};
-const sanitizePath = (path) => {
-    if (!path || !path.startsWith('/')) {
-        return `/${path}`;
-    }
-    return path;
-};
-const sanitizePathFormValue = (path) => {
-    if (path && path.startsWith('/')) {
-        return path.substring(1);
-    }
-    return path ?? '';
-};
 
 /*
  * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
@@ -506,34 +455,41 @@ const sanitizePathFormValue = (path) => {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class GioPolicyStudioFlowExecutionFormDialogComponent {
+class GioPolicyStudioFlowNativeFormDialogComponent {
     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.mode = 'create';
+        this.existingFlow = cloneDeep(flowDialogData?.flow);
+        this.mode = this.existingFlow ? 'edit' : 'create';
+        this.flowFormGroup = new UntypedFormGroup({
+            name: new UntypedFormControl(flowDialogData?.flow?.name ?? ''),
         });
-        this.readOnly = Boolean(flowDialogData.readOnly);
-        if (this.readOnly) {
-            this.flowExecutionFormGroup.disable({ emitEvent: false });
-        }
+        this.defaultFlowName = capitalize(flowDialogData.parentGroupName) + ' flow';
     }
     onSubmit() {
-        const flowExecutionToSave = {
-            ...this.existingFlowExecution,
-            mode: this.flowExecutionFormGroup?.get('mode')?.value,
-            matchRequired: this.flowExecutionFormGroup?.get('matchRequired')?.value,
+        const flowToSave = {
+            // New id for new flow
+            _id: uniqueId('flow_'),
+            // If existing flow, keep root props
+            ...this.existingFlow,
+            // Mark as changed
+            _hasChanged: true,
+            // Add changes
+            name: this.getFlowName(),
+            enabled: this.existingFlow ? this.existingFlow.enabled : true,
         };
         this.dialogRef.close({
-            ...flowExecutionToSave,
+            ...flowToSave,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", 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: "19.2.4", type: GioPolicyStudioFlowExecutionFormDialogComponent, isStandalone: true, 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: MatButtonModule }, { 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: "ngmodule", type: MatDialogModule }, { 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: "ngmodule", type: MatFormFieldModule }, { 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: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.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", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: GioFormSlideToggleModule }, { kind: "component", type: i6$1.GioFormSlideToggleComponent, selector: "gio-form-slide-toggle", inputs: ["appearance"] }, { kind: "component", type: i6$1.GioFormLabelComponent, selector: "gio-form-label" }, { kind: "directive", type: i6$1.GioFormSlideToggleDirective, selector: "[gioFormSlideToggle]" }, { kind: "ngmodule", type: GioBannerModule }, { kind: "component", type: i6$1.GioBannerInfoComponent, selector: "gio-banner-info" }, { kind: "ngmodule", type: GioIconsModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    getFlowName() {
+        const inputName = trim(this.flowFormGroup?.get('name')?.value);
+        return isEmpty(inputName) ? this.defaultFlowName : inputName;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioPolicyStudioFlowNativeFormDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: GioPolicyStudioFlowNativeFormDialogComponent, isStandalone: true, selector: "gio-ps-flow-native-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  {{ mode === 'create' ? 'Create a new flow' : 'Edit flow' }}\n\n  <button class=\"title__closeBtn\" mat-icon-button aria-label=\"Close dialog\" [mat-dialog-close]=\"false\">\n    <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n  </button>\n</h2>\n\n<mat-dialog-content *ngIf=\"flowFormGroup\" class=\"content\" [formGroup]=\"flowFormGroup\">\n  <p>Flow allow you to apply different policies. Only one flow is allowed for a native API.</p>\n\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Flow name</mat-label>\n      <input matInput formControlName=\"name\" cdkFocusInitial />\n      <mat-hint>Names will be automatically generated if left blank</mat-hint>\n    </mat-form-field>\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]=\"false\">Cancel</button>\n  <button class=\"actions__saveBtn\" color=\"primary\" mat-flat-button role=\"dialog\" (click)=\"onSubmit()\">\n    {{ mode === 'create' ? 'Create' : 'Save' }}\n  </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: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: MatButtonModule }, { 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: "ngmodule", type: MatDialogModule }, { 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: "ngmodule", type: MatFormFieldModule }, { 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: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: GioFormSlideToggleModule }, { kind: "ngmodule", type: GioBannerModule }, { kind: "ngmodule", type: GioIconsModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: GioFormTagsInputModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioPolicyStudioFlowExecutionFormDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioPolicyStudioFlowNativeFormDialogComponent, decorators: [{
             type: Component,
             args: [{ imports: [
                         CommonModule,
@@ -542,11 +498,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                         MatDialogModule,
                         MatFormFieldModule,
                         MatSelectModule,
+                        MatInputModule,
                         MatSlideToggleModule,
                         GioFormSlideToggleModule,
                         GioBannerModule,
                         GioIconsModule,
-                    ], 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"] }]
+                        GioFormTagsInputModule,
+                    ], selector: 'gio-ps-flow-native-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  {{ mode === 'create' ? 'Create a new flow' : 'Edit flow' }}\n\n  <button class=\"title__closeBtn\" mat-icon-button aria-label=\"Close dialog\" [mat-dialog-close]=\"false\">\n    <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n  </button>\n</h2>\n\n<mat-dialog-content *ngIf=\"flowFormGroup\" class=\"content\" [formGroup]=\"flowFormGroup\">\n  <p>Flow allow you to apply different policies. Only one flow is allowed for a native API.</p>\n\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Flow name</mat-label>\n      <input matInput formControlName=\"name\" cdkFocusInitial />\n      <mat-hint>Names will be automatically generated if left blank</mat-hint>\n    </mat-form-field>\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]=\"false\">Cancel</button>\n  <button class=\"actions__saveBtn\" color=\"primary\" mat-flat-button role=\"dialog\" (click)=\"onSubmit()\">\n    {{ mode === 'create' ? 'Create' : 'Save' }}\n  </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]
@@ -567,18 +525,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class GioPolicyStudioFlowNativeFormDialogComponent {
+const METHODS_AUTOCOMPLETE = ['ALL', ...HttpMethods];
+class GioPolicyStudioFlowProxyFormDialogComponent {
     constructor(dialogRef, flowDialogData) {
         this.dialogRef = dialogRef;
         this.mode = 'create';
+        this.methods = METHODS_AUTOCOMPLETE;
         this.existingFlow = cloneDeep(flowDialogData?.flow);
         this.mode = this.existingFlow ? 'edit' : 'create';
+        const httpSelector = flowDialogData?.flow?.selectors?.find(s => s.type === 'HTTP');
+        const conditionSelector = flowDialogData?.flow?.selectors?.find(s => s.type === 'CONDITION');
         this.flowFormGroup = new UntypedFormGroup({
             name: new UntypedFormControl(flowDialogData?.flow?.name ?? ''),
+            pathOperator: new UntypedFormControl(httpSelector?.pathOperator ?? 'EQUALS'),
+            path: new UntypedFormControl(sanitizePathFormValue(httpSelector?.path)),
+            methods: new UntypedFormControl(sanitizeMethodFormValue(httpSelector?.methods)),
+            condition: new UntypedFormControl(conditionSelector?.condition ?? ''),
         });
-        this.defaultFlowName = capitalize(flowDialogData.parentGroupName) + ' flow';
     }
     onSubmit() {
+        const httpSelectorToSave = {
+            type: 'HTTP',
+            path: sanitizePath(this.flowFormGroup?.get('path')?.value),
+            pathOperator: this.flowFormGroup?.get('pathOperator')?.value,
+            methods: sanitizeMethods(this.flowFormGroup?.get('methods')?.value),
+        };
+        const conditionValue = this.flowFormGroup?.get('condition')?.value;
+        const conditionSelectorToSave = conditionValue
+            ? {
+                type: 'CONDITION',
+                condition: conditionValue,
+            }
+            : undefined;
         const flowToSave = {
             // New id for new flow
             _id: uniqueId('flow_'),
@@ -587,21 +565,21 @@ class GioPolicyStudioFlowNativeFormDialogComponent {
             // Mark as changed
             _hasChanged: true,
             // Add changes
-            name: this.getFlowName(),
+            name: this.flowFormGroup?.get('name')?.value,
+            selectors: conditionSelectorToSave ? [httpSelectorToSave, conditionSelectorToSave] : [httpSelectorToSave],
             enabled: this.existingFlow ? this.existingFlow.enabled : true,
         };
         this.dialogRef.close({
             ...flowToSave,
         });
     }
-    getFlowName() {
-        const inputName = trim(this.flowFormGroup?.get('name')?.value);
-        return isEmpty(inputName) ? this.defaultFlowName : inputName;
+    tagValidationHook(tag, validationCb) {
+        validationCb(METHODS_AUTOCOMPLETE.map(m => `${m}`).includes(tag.toUpperCase()));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioPolicyStudioFlowNativeFormDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: GioPolicyStudioFlowNativeFormDialogComponent, isStandalone: true, selector: "gio-ps-flow-native-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  {{ mode === 'create' ? 'Create a new flow' : 'Edit flow' }}\n\n  <button class=\"title__closeBtn\" mat-icon-button aria-label=\"Close dialog\" [mat-dialog-close]=\"false\">\n    <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n  </button>\n</h2>\n\n<mat-dialog-content *ngIf=\"flowFormGroup\" class=\"content\" [formGroup]=\"flowFormGroup\">\n  <p>Flow allow you to apply different policies. Only one flow is allowed for a native API.</p>\n\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Flow name</mat-label>\n      <input matInput formControlName=\"name\" cdkFocusInitial />\n      <mat-hint>Names will be automatically generated if left blank</mat-hint>\n    </mat-form-field>\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]=\"false\">Cancel</button>\n  <button class=\"actions__saveBtn\" color=\"primary\" mat-flat-button role=\"dialog\" (click)=\"onSubmit()\">\n    {{ mode === 'create' ? 'Create' : 'Save' }}\n  </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: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: MatButtonModule }, { 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: "ngmodule", type: MatDialogModule }, { 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: "ngmodule", type: MatFormFieldModule }, { 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: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: GioFormSlideToggleModule }, { kind: "ngmodule", type: GioBannerModule }, { kind: "ngmodule", type: GioIconsModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: GioFormTagsInputModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioPolicyStudioFlowProxyFormDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: GioPolicyStudioFlowProxyFormDialogComponent, isStandalone: true, selector: "gio-ps-flow-proxy-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  {{ mode === 'create' ? 'Create a new flow' : 'Edit flow' }}\n\n  <button class=\"title__closeBtn\" mat-icon-button aria-label=\"Close dialog\" [mat-dialog-close]=\"false\">\n    <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n  </button>\n</h2>\n\n<mat-dialog-content *ngIf=\"flowFormGroup\" class=\"content\" [formGroup]=\"flowFormGroup\">\n  <p>\n    Flows allow you to apply different policies per HTTP path and/or method. For example you can reroute calls based on the URL specified.\n  </p>\n\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Flow name</mat-label>\n      <input matInput formControlName=\"name\" cdkFocusInitial />\n      <mat-hint>Names will be automatically generated with path and method if left blank</mat-hint>\n    </mat-form-field>\n  </div>\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Operator</mat-label>\n      <mat-select formControlName=\"pathOperator\">\n        <mat-option value=\"EQUALS\">Equals</mat-option>\n        <mat-option value=\"STARTS_WITH\">Starts with</mat-option>\n      </mat-select>\n      <mat-hint>Path operator</mat-hint>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Path</mat-label>\n      <span matTextPrefix>/&nbsp;</span>\n      <input matInput formControlName=\"path\" />\n      <mat-hint>Path</mat-hint>\n    </mat-form-field>\n  </div>\n\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Methods for your flow</mat-label>\n      <gio-form-tags-input\n        formControlName=\"methods\"\n        [autocompleteOptions]=\"methods\"\n        [tagValidationHook]=\"tagValidationHook\"\n      ></gio-form-tags-input>\n    </mat-form-field>\n  </div>\n\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Condition</mat-label>\n      <input matInput formControlName=\"condition\" />\n      <mat-hint>Condition to execute the flow, supports Expression Language</mat-hint>\n    </mat-form-field>\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]=\"false\">Cancel</button>\n  <button class=\"actions__saveBtn\" color=\"primary\" mat-flat-button role=\"dialog\" (click)=\"onSubmit()\">\n    {{ mode === 'create' ? 'Create' : 'Save' }}\n  </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: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: MatButtonModule }, { 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: "ngmodule", type: MatDialogModule }, { 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: "ngmodule", type: MatFormFieldModule }, { 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: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.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", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: GioFormSlideToggleModule }, { kind: "ngmodule", type: GioBannerModule }, { kind: "ngmodule", type: GioIconsModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: GioFormTagsInputModule }, { kind: "component", type: i6$1.GioFormTagsInputComponent, selector: "gio-form-tags-input", inputs: ["aria-label", "addOnBlur", "tagValidationHook", "autocompleteOptions", "displayValueWith", "useAutocompleteOptionValueOnly", "placeholder", "required", "disabled"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioPolicyStudioFlowNativeFormDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioPolicyStudioFlowProxyFormDialogComponent, decorators: [{
             type: Component,
             args: [{ imports: [
                         CommonModule,
@@ -616,11 +594,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                         GioBannerModule,
                         GioIconsModule,
                         GioFormTagsInputModule,
-                    ], selector: 'gio-ps-flow-native-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  {{ mode === 'create' ? 'Create a new flow' : 'Edit flow' }}\n\n  <button class=\"title__closeBtn\" mat-icon-button aria-label=\"Close dialog\" [mat-dialog-close]=\"false\">\n    <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n  </button>\n</h2>\n\n<mat-dialog-content *ngIf=\"flowFormGroup\" class=\"content\" [formGroup]=\"flowFormGroup\">\n  <p>Flow allow you to apply different policies. Only one flow is allowed for a native API.</p>\n\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Flow name</mat-label>\n      <input matInput formControlName=\"name\" cdkFocusInitial />\n      <mat-hint>Names will be automatically generated if left blank</mat-hint>\n    </mat-form-field>\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]=\"false\">Cancel</button>\n  <button class=\"actions__saveBtn\" color=\"primary\" mat-flat-button role=\"dialog\" (click)=\"onSubmit()\">\n    {{ mode === 'create' ? 'Create' : 'Save' }}\n  </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"] }]
+                    ], selector: 'gio-ps-flow-proxy-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  {{ mode === 'create' ? 'Create a new flow' : 'Edit flow' }}\n\n  <button class=\"title__closeBtn\" mat-icon-button aria-label=\"Close dialog\" [mat-dialog-close]=\"false\">\n    <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n  </button>\n</h2>\n\n<mat-dialog-content *ngIf=\"flowFormGroup\" class=\"content\" [formGroup]=\"flowFormGroup\">\n  <p>\n    Flows allow you to apply different policies per HTTP path and/or method. For example you can reroute calls based on the URL specified.\n  </p>\n\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Flow name</mat-label>\n      <input matInput formControlName=\"name\" cdkFocusInitial />\n      <mat-hint>Names will be automatically generated with path and method if left blank</mat-hint>\n    </mat-form-field>\n  </div>\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Operator</mat-label>\n      <mat-select formControlName=\"pathOperator\">\n        <mat-option value=\"EQUALS\">Equals</mat-option>\n        <mat-option value=\"STARTS_WITH\">Starts with</mat-option>\n      </mat-select>\n      <mat-hint>Path operator</mat-hint>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Path</mat-label>\n      <span matTextPrefix>/&nbsp;</span>\n      <input matInput formControlName=\"path\" />\n      <mat-hint>Path</mat-hint>\n    </mat-form-field>\n  </div>\n\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Methods for your flow</mat-label>\n      <gio-form-tags-input\n        formControlName=\"methods\"\n        [autocompleteOptions]=\"methods\"\n        [tagValidationHook]=\"tagValidationHook\"\n      ></gio-form-tags-input>\n    </mat-form-field>\n  </div>\n\n  <div class=\"content__row\">\n    <mat-form-field>\n      <mat-label>Condition</mat-label>\n      <input matInput formControlName=\"condition\" />\n      <mat-hint>Condition to execute the flow, supports Expression Language</mat-hint>\n    </mat-form-field>\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]=\"false\">Cancel</button>\n  <button class=\"actions__saveBtn\" color=\"primary\" mat-flat-button role=\"dialog\" (click)=\"onSubmit()\">\n    {{ mode === 'create' ? 'Create' : 'Save' }}\n  </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]
                 }] }] });
+const sanitizeMethods = (value) => {
+    if (!value || value.find(m => m === 'ALL'))
+        return [];
+    return value;
+};
+const sanitizeMethodFormValue = (methods) => {
+    if (!methods || methods.length === 0)
+        return ['ALL'];
+    return methods;
+};
+const sanitizePath = (path) => {
+    if (!path || !path.startsWith('/')) {
+        return `/${path}`;
+    }
+    return path;
+};
+const sanitizePathFormValue = (path) => {
+    if (path && path.startsWith('/')) {
+        return path.substring(1);
+    }
+    return path ?? '';
+};
 
 /*
  * Copyright (C) 2022 The Gravitee team (http://gravitee.io)
@@ -651,7 +651,15 @@ class GioPolicyStudioFlowsMenuComponent {
         this.flowExecutionChange = new EventEmitter();
         this.deleteFlow = new EventEmitter();
         this.flowGroupMenuItems = [];
+        this.searchControl = new FormControl('');
+        this.filteredFlowGroupMenuItems = [];
+        this.unsubscribe$ = new Subject();
         this.enterPredicate = () => true;
+        this.searchControl.valueChanges
+            .pipe(debounceTime(300), startWith(''), distinctUntilChanged(), tap(searchTerm => {
+            this.applyFilter(searchTerm || '');
+        }), takeUntil(this.unsubscribe$))
+            .subscribe();
     }
     ngOnChanges(changes) {
         if (changes.flowsGroups || changes.selectedFlowId) {
@@ -725,6 +733,54 @@ class GioPolicyStudioFlowsMenuComponent {
                 return true;
             };
         }
+        this.applyFilter(this.searchControl.value || '');
+    }
+    ngOnDestroy() {
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
+    }
+    applyFilter(searchTerm) {
+        const term = searchTerm.toLowerCase();
+        if (!term) {
+            this.filteredFlowGroupMenuItems = [...this.flowGroupMenuItems];
+            return;
+        }
+        this.filteredFlowGroupMenuItems = this.flowGroupMenuItems
+            .map(group => {
+            const filteredFlows = group?.flows?.filter(flow => {
+                return ((group.name && group.name?.toLowerCase().includes(term)) ||
+                    (flow.name && flow.name?.toLowerCase().includes(term)) ||
+                    (flow.pathOrChannelLabel && flow.pathOrChannelLabel?.toLowerCase().includes(term)) ||
+                    (flow.selectors && flow.selectors?.some(selector => this.selectorMatches(selector, term))) ||
+                    (flow.badges && flow.badges?.some(badges => badges.label?.toLowerCase().includes(term))));
+            });
+            return { ...group, flows: filteredFlows };
+        })
+            .filter(group => group.flows.length > 0);
+    }
+    resetSearchTerm() {
+        this.searchControl.setValue('');
+        this.applyFilter('');
+    }
+    selectorMatches(selector, term) {
+        const type = selector.type;
+        if (type === 'HTTP') {
+            const httpSelector = selector;
+            if (httpSelector.path?.toLowerCase().includes(term))
+                return true;
+            if (httpSelector.methods?.some(method => method.toLowerCase().includes(term))) {
+                return true;
+            }
+        }
+        if (type === 'CHANNEL') {
+            const channelSelector = selector;
+            if (channelSelector.channel?.toLowerCase().includes(term))
+                return true;
+            if (channelSelector.operations?.some(op => op.toLowerCase().includes(term))) {
+                return true;
+            }
+        }
+        return false;
     }
     selectFlow(groupId, flowId) {
         const flow = this.flowsGroups.find(fg => fg._id === groupId)?.flows.find(f => f._id === flowId);
@@ -927,11 +983,22 @@ class GioPolicyStudioFlowsMenuComponent {
         this.selectedFlowIdChange.emit(duplicatedFlow._id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioPolicyStudioFlowsMenuComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: GioPolicyStudioFlowsMenuComponent, isStandalone: true, selector: "gio-ps-flows-menu", inputs: { readOnly: "readOnly", loading: "loading", apiType: "apiType", flowExecution: "flowExecution", flowsGroups: "flowsGroups", selectedFlowId: "selectedFlowId", entrypoints: "entrypoints", entrypointsInfo: "entrypointsInfo" }, outputs: { selectedFlowIdChange: "selectedFlowIdChange", flowsGroupsChange: "flowsGroupsChange", flowExecutionChange: "flowExecutionChange", 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<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  @if (apiType !== 'NATIVE') {\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  }\n</div>\n\n<div class=\"list\" *ngIf=\"!loading; else loadingList\" cdkDropListGroup>\n  <div\n    *ngFor=\"let flowsGroup of flowGroupMenuItems\"\n    class=\"list__flowsGroup\"\n    cdkDropList\n    [cdkDropListData]=\"flowsGroup\"\n    [cdkDropListEnterPredicate]=\"enterPredicate\"\n    (cdkDropListDropped)=\"onDropFlow($event)\"\n  >\n    <div class=\"list__flowsGroup__header\">\n      <div class=\"list__flowsGroup__header__label\">\n        <span>{{ (flowsGroup._isPlan ? 'Plan: ' : '') + flowsGroup.name }}</span>\n      </div>\n      <div class=\"list__flowsGroup__header__addBtn\">\n        @if (apiType === 'NATIVE') {\n          <span [matTooltipDisabled]=\"flowsGroup.flows.length < 1\" matTooltip=\"Only one flow is allowed for a native API\">\n            <button mat-button [disabled]=\"readOnly || flowsGroup.flows.length > 0\" (click)=\"onAddFlow(flowsGroup)\">\n              <mat-icon svgIcon=\"gio:plus\" matTooltip=\"New flow\"></mat-icon>\n            </button>\n          </span>\n        } @else {\n          <button mat-button [disabled]=\"readOnly\" (click)=\"onAddFlow(flowsGroup)\">\n            <mat-icon svgIcon=\"gio:plus\" matTooltip=\"New flow\"></mat-icon>\n          </button>\n        }\n      </div>\n    </div>\n\n    <div class=\"list__flowsGroup__flows\">\n      @for (flow of flowsGroup.flows; track flow._id) {\n        <div\n          class=\"list__flowsGroup__flows__flow\"\n          [class.selected]=\"flow.selected\"\n          [class.disabled]=\"!flow.enabled\"\n          (click)=\"selectFlow(flowsGroup._id, flow._id)\"\n          (mouseout)=\"flow.mouseOver = false\"\n          (mouseover)=\"flow.mouseOver = true\"\n          cdkDrag\n        >\n          <div class=\"list__flowsGroup__flows__flow__left\">\n            <div *ngIf=\"flow.name\" class=\"list__flowsGroup__flows__flow__left__name\" [attr.title]=\"flow.name\">\n              {{ flow.name }}\n            </div>\n            @if (apiType !== 'NATIVE') {\n              <div class=\"list__flowsGroup__flows__flow__left__infos\">\n                <div class=\"list__flowsGroup__flows__flow__left__infos__badges\">\n                  <span\n                    *ngFor=\"let badge of flow.badges\"\n                    class=\"list__flowsGroup__flows__flow__left__infos__badges__badge\"\n                    [ngClass]=\"badge.class\"\n                    >{{ badge.label }}</span\n                  >\n                </div>\n                <div class=\"list__flowsGroup__flows__flow__left__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\n                  *ngIf=\"flow.hasCondition\"\n                  class=\"list__flowsGroup__flows__flow__left__infos__conditionBadge gio-badge-neutral\"\n                  matTooltip=\"Conditioned\"\n                  ><mat-icon svgIcon=\"gio:if\"></mat-icon\n                ></span>\n              </div>\n            }\n          </div>\n          <div class=\"list__flowsGroup__flows__flow__right\">\n            <button\n              class=\"list__flowsGroup__flows__flow__right__name__menu\"\n              mat-button\n              [disabled]=\"readOnly\"\n              [matMenuTriggerFor]=\"flowMenu\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <mat-icon svgIcon=\"gio:more-vertical\"></mat-icon>\n            </button>\n            <mat-menu #flowMenu=\"matMenu\">\n              <button [disabled]=\"readOnly\" mat-menu-item (click)=\"onDisableFlow(flow._id)\">\n                <mat-icon [svgIcon]=\"flow.enabled ? 'gio:prohibition' : 'gio:check-circled-outline'\"></mat-icon>\n                <span>{{ flow.enabled ? 'Disable' : 'Enable' }}</span>\n              </button>\n              <button mat-menu-item (click)=\"onEditFlow(flow._id)\"><mat-icon svgIcon=\"gio:edit-pencil\"></mat-icon> Edit</button>\n              <button mat-menu-item (click)=\"onDeleteFlow(flow._id)\"><mat-icon svgIcon=\"gio:trash\"></mat-icon> Delete</button>\n              @if (apiType !== 'NATIVE') {\n                <button mat-menu-item (click)=\"onDuplicateFlow(flowsGroup._id, flow._id)\">\n                  <mat-icon svgIcon=\"gio:copy\"></mat-icon> Duplicate\n                </button>\n              }\n            </mat-menu>\n          </div>\n        </div>\n      }\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, #ffc2ac);color:var(--gio-oem-palette--active-contrast, #1e1b1b)}: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-family:Kanit,Helvetica Neue,sans-serif;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 0 0;border-radius:8px}.list__flowsGroup__header__label{font-size:14px;font-weight:700;line-height:20px;font-family:Manrope,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__flows{display:flex;flex-direction:column;gap:8px}.list__flowsGroup__flows__flow{display:flex;overflow:hidden;height:68px;flex-direction:row;align-items:center;justify-content:space-between;padding:7px;border:1px solid #b2aaa9;border-radius:8px;background-color:#fff}.list__flowsGroup__flows__flow.disabled{border:1px solid rgba(178,170,169,0);background-color:#f7f7f8cc;text-decoration:line-through}.list__flowsGroup__flows__flow:hover,.list__flowsGroup__flows__flow.selected{padding:6px;border:2px solid #ffa685;cursor:pointer}.list__flowsGroup__flows__flow__left{display:flex;overflow:hidden;flex:1 1 auto;flex-direction:column;gap:8px}.list__flowsGroup__flows__flow__left__name{overflow:hidden;padding-left:4px;text-overflow:ellipsis;white-space:nowrap}.list__flowsGroup__flows__flow__left__infos{display:flex;align-items:center}.list__flowsGroup__flows__flow__left__infos__badges{flex:0 0 auto}.list__flowsGroup__flows__flow__left__infos__badges__badge{width:auto}.list__flowsGroup__flows__flow__left__infos__pathOrChannelLabel{overflow:hidden;flex:1 1 auto;direction:rtl;text-align:left;text-overflow:ellipsis;white-space:nowrap}.list__flowsGroup__flows__flow__left__infos__pathOrChannelLabel span{direction:ltr;unicode-bidi:bidi-override}.list__flowsGroup__flows__flow__left__infos__conditionBadge{flex:0 0 auto}.list__flowsGroup.cdk-drop-list-dragging{pointer-events:none}.list__flowsGroup .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.list__flowsGroup .cdk-drag-placeholder *{opacity:0}.list__flowsGroup .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list__flowsGroup.cdk-drop-list-dragging .list__flowsGroup__flows__flow:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.loadingList{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: GioIconsModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: GioLoaderModule }, { kind: "component", type: i6$1.GioLoaderComponent, selector: "gio-loader" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7$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: i7$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i8.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i8.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i8.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: GioPolicyStudioFlowsMenuComponent, isStandalone: true, selector: "gio-ps-flows-menu", inputs: { readOnly: "readOnly", loading: "loading", apiType: "apiType", flowExecution: "flowExecution", flowsGroups: "flowsGroups", selectedFlowId: "selectedFlowId", entrypoints: "entrypoints", entrypointsInfo: "entrypointsInfo" }, outputs: { selectedFlowIdChange: "selectedFlowIdChange", flowsGroupsChange: "flowsGroupsChange", flowExecutionChange: "flowExecutionChange", 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<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  @if (apiType !== 'NATIVE') {\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  }\n</div>\n<div class=\"searchBar\" *ngIf=\"!loading\">\n  <mat-form-field class=\"searchBar__input\">\n    <mat-icon matPrefix>search</mat-icon>\n    <input matInput placeholder=\"Search by name, path, or group...\" [formControl]=\"searchControl\" />\n    <button *ngIf=\"searchControl.value\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"resetSearchTerm()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n</div>\n\n<div class=\"list\" *ngIf=\"!loading; else loadingList\" cdkDropListGroup>\n  <div\n    *ngFor=\"let flowsGroup of filteredFlowGroupMenuItems\"\n    class=\"list__flowsGroup\"\n    cdkDropList\n    [cdkDropListData]=\"flowsGroup\"\n    [cdkDropListEnterPredicate]=\"enterPredicate\"\n    (cdkDropListDropped)=\"onDropFlow($event)\"\n  >\n    <div class=\"list__flowsGroup__header\">\n      <div class=\"list__flowsGroup__header__label\">\n        <span>{{ (flowsGroup._isPlan ? 'Plan: ' : '') + flowsGroup.name }}</span>\n      </div>\n      <div class=\"list__flowsGroup__header__addBtn\">\n        @if (apiType === 'NATIVE') {\n          <span [matTooltipDisabled]=\"flowsGroup.flows.length < 1\" matTooltip=\"Only one flow is allowed for a native API\">\n            <button mat-button [disabled]=\"readOnly || flowsGroup.flows.length > 0\" (click)=\"onAddFlow(flowsGroup)\">\n              <mat-icon svgIcon=\"gio:plus\" matTooltip=\"New flow\"></mat-icon>\n            </button>\n          </span>\n        } @else {\n          <button mat-button [disabled]=\"readOnly\" (click)=\"onAddFlow(flowsGroup)\">\n            <mat-icon svgIcon=\"gio:plus\" matTooltip=\"New flow\"></mat-icon>\n          </button>\n        }\n      </div>\n    </div>\n\n    <div class=\"list__flowsGroup__flows\">\n      <ng-container *ngIf=\"flowsGroup.flows.length > 0; else noFlows\">\n        @for (flow of flowsGroup.flows; track flow._id) {\n          <div\n            class=\"list__flowsGroup__flows__flow\"\n            [class.selected]=\"flow.selected\"\n            [class.disabled]=\"!flow.enabled\"\n            (click)=\"selectFlow(flowsGroup._id, flow._id)\"\n            (mouseout)=\"flow.mouseOver = false\"\n            (mouseover)=\"flow.mouseOver = true\"\n            cdkDrag\n          >\n            <div class=\"list__flowsGroup__flows__flow__left\">\n              <div *ngIf=\"flow.name\" class=\"list__flowsGroup__flows__flow__left__name\" [attr.title]=\"flow.name\">\n                {{ flow.name }}\n              </div>\n              @if (apiType !== 'NATIVE') {\n                <div class=\"list__flowsGroup__flows__flow__left__infos\">\n                  <div class=\"list__flowsGroup__flows__flow__left__infos__badges\">\n                    <span\n                      *ngFor=\"let badge of flow.badges\"\n                      class=\"list__flowsGroup__flows__flow__left__infos__badges__badge\"\n                      [ngClass]=\"badge.class\"\n                      >{{ badge.label }}</span\n                    >\n                  </div>\n                  <div class=\"list__flowsGroup__flows__flow__left__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\n                    *ngIf=\"flow.hasCondition\"\n                    class=\"list__flowsGroup__flows__flow__left__infos__conditionBadge gio-badge-neutral\"\n                    matTooltip=\"Conditioned\"\n                    ><mat-icon svgIcon=\"gio:if\"></mat-icon\n                  ></span>\n                </div>\n              }\n            </div>\n            <div class=\"list__flowsGroup__flows__flow__right\">\n              <button\n                class=\"list__flowsGroup__flows__flow__right__name__menu\"\n                mat-button\n                [disabled]=\"readOnly\"\n                [matMenuTriggerFor]=\"flowMenu\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <mat-icon svgIcon=\"gio:more-vertical\"></mat-icon>\n              </button>\n              <mat-menu #flowMenu=\"matMenu\">\n                <button [disabled]=\"readOnly\" mat-menu-item (click)=\"onDisableFlow(flow._id)\">\n                  <mat-icon [svgIcon]=\"flow.enabled ? 'gio:prohibition' : 'gio:check-circled-outline'\"></mat-icon>\n                  <span>{{ flow.enabled ? 'Disable' : 'Enable' }}</span>\n                </button>\n                <button mat-menu-item (click)=\"onEditFlow(flow._id)\"><mat-icon svgIcon=\"gio:edit-pencil\"></mat-icon> Edit</button>\n                <button mat-menu-item (click)=\"onDeleteFlow(flow._id)\"><mat-icon svgIcon=\"gio:trash\"></mat-icon> Delete</button>\n                @if (apiType !== 'NATIVE') {\n                  <button mat-menu-item (click)=\"onDuplicateFlow(flowsGroup._id, flow._id)\">\n                    <mat-icon svgIcon=\"gio:copy\"></mat-icon> Duplicate\n                  </button>\n                }\n              </mat-menu>\n            </div>\n          </div>\n        }\n      </ng-container>\n      <ng-template #noFlows>\n        <div class=\"list__flowsGroup__no-flows\">No flows yet</div>\n      </ng-template>\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, #ffc2ac);color:var(--gio-oem-palette--active-contrast, #1e1b1b)}: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:14px}.header__label{font-family:Kanit,Helvetica Neue,sans-serif;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}.searchBar{display:flex;padding:0 16px}.searchBar__input{flex:1 1 auto}.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 0 0;border-radius:8px}.list__flowsGroup__header__label{font-size:14px;font-weight:700;line-height:20px;font-family:Manrope,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__flows{display:flex;flex-direction:column;gap:8px}.list__flowsGroup__flows__flow{display:flex;overflow:hidden;height:68px;flex-direction:row;align-items:center;justify-content:space-between;padding:7px;border:1px solid #b2aaa9;border-radius:8px;background-color:#fff}.list__flowsGroup__flows__flow.disabled{border:1px solid rgba(178,170,169,0);background-color:#f7f7f8cc;text-decoration:line-through}.list__flowsGroup__flows__flow:hover,.list__flowsGroup__flows__flow.selected{padding:6px;border:2px solid #ffa685;cursor:pointer}.list__flowsGroup__flows__flow__left{display:flex;overflow:hidden;flex:1 1 auto;flex-direction:column;gap:8px}.list__flowsGroup__flows__flow__left__name{overflow:hidden;padding-left:4px;text-overflow:ellipsis;white-space:nowrap}.list__flowsGroup__flows__flow__left__infos{display:flex;align-items:center}.list__flowsGroup__flows__flow__left__infos__badges{flex:0 0 auto}.list__flowsGroup__flows__flow__left__infos__badges__badge{width:auto}.list__flowsGroup__flows__flow__left__infos__pathOrChannelLabel{overflow:hidden;flex:1 1 auto;direction:rtl;text-align:left;text-overflow:ellipsis;white-space:nowrap}.list__flowsGroup__flows__flow__left__infos__pathOrChannelLabel span{direction:ltr;unicode-bidi:bidi-override}.list__flowsGroup__flows__flow__left__infos__conditionBadge{flex:0 0 auto}.list__flowsGroup__no-flows{font-style:italic}.list__flowsGroup.cdk-drop-list-dragging{pointer-events:none}.list__flowsGroup .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.list__flowsGroup .cdk-drag-placeholder *{opacity:0}.list__flowsGroup .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list__flowsGroup.cdk-drop-list-dragging .list__flowsGroup__flows__flow:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.loadingList{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: GioIconsModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { 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: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: GioLoaderModule }, { kind: "component", type: i6$1.GioLoaderComponent, selector: "gio-loader" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7$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: i7$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i8.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i8.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i8.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioPolicyStudioFlowsMenuComponent, decorators: [{
             type: Component,
-            args: [{ imports: [GioIconsModule, MatTooltipModule, MatButtonModule, CommonModule, GioLoaderModule, MatMenuModule, DragDropModule], 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  @if (apiType !== 'NATIVE') {\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  }\n</div>\n\n<div class=\"list\" *ngIf=\"!loading; else loadingList\" cdkDropListGroup>\n  <div\n    *ngFor=\"let flowsGroup of flowGroupMenuItems\"\n    class=\"list__flowsGroup\"\n    cdkDropList\n    [cdkDropListData]=\"flowsGroup\"\n    [cdkDropListEnterPredicate]=\"enterPredicate\"\n    (cdkDropListDropped)=\"onDropFlow($event)\"\n  >\n    <div class=\"list__flowsGroup__header\">\n      <div class=\"list__flowsGroup__header__label\">\n        <span>{{ (flowsGroup._isPlan ? 'Plan: ' : '') + flowsGroup.name }}</span>\n      </div>\n      <div class=\"list__flowsGroup__header__addBtn\">\n        @if (apiType === 'NATIVE') {\n          <span [matTooltipDisabled]=\"flowsGroup.flows.length < 1\" matTooltip=\"Only one flow is allowed for a native API\">\n            <button mat-button [disabled]=\"readOnly || flowsGroup.flows.length > 0\" (click)=\"onAddFlow(flowsGroup)\">\n              <mat-icon svgIcon=\"gio:plus\" matTooltip=\"New flow\"></mat-icon>\n            </button>\n          </span>\n        } @else {\n          <button mat-button [disabled]=\"readOnly\" (click)=\"onAddFlow(flowsGroup)\">\n            <mat-icon svgIcon=\"gio:plus\" matTooltip=\"New flow\"></mat-icon>\n          </button>\n        }\n      </div>\n    </div>\n\n    <div class=\"list__flowsGroup__flows\">\n      @for (flow of flowsGroup.flows; track flow._id) {\n        <div\n          class=\"list__flowsGroup__flows__flow\"\n          [class.selected]=\"flow.selected\"\n          [class.disabled]=\"!flow.enabled\"\n          (click)=\"selectFlow(flowsGroup._id, flow._id)\"\n          (mouseout)=\"flow.mouseOver = false\"\n          (mouseover)=\"flow.mouseOver = true\"\n          cdkDrag\n        >\n          <div class=\"list__flowsGroup__flows__flow__left\">\n            <div *ngIf=\"flow.name\" class=\"list__flowsGroup__flows__flow__left__name\" [attr.title]=\"flow.name\">\n              {{ flow.name }}\n            </div>\n            @if (apiType !== 'NATIVE') {\n              <div class=\"list__flowsGroup__flows__flow__left__infos\">\n                <div class=\"list__flowsGroup__flows__flow__left__infos__badges\">\n                  <span\n                    *ngFor=\"let badge of flow.badges\"\n                    class=\"list__flowsGroup__flows__flow__left__infos__badges__badge\"\n                    [ngClass]=\"badge.class\"\n                    >{{ badge.label }}</span\n                  >\n                </div>\n                <div class=\"list__flowsGroup__flows__flow__left__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\n                  *ngIf=\"flow.hasCondition\"\n                  class=\"list__flowsGroup__flows__flow__left__infos__conditionBadge gio-badge-neutral\"\n                  matTooltip=\"Conditioned\"\n                  ><mat-icon svgIcon=\"gio:if\"></mat-icon\n                ></span>\n              </div>\n            }\n          </div>\n          <div class=\"list__flowsGroup__flows__flow__right\">\n            <button\n              class=\"list__flowsGroup__flows__flow__right__name__menu\"\n              mat-button\n              [disabled]=\"readOnly\"\n              [matMenuTriggerFor]=\"flowMenu\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <mat-icon svgIcon=\"gio:more-vertical\"></mat-icon>\n            </button>\n            <mat-menu #flowMenu=\"matMenu\">\n              <button [disabled]=\"readOnly\" mat-menu-item (click)=\"onDisableFlow(flow._id)\">\n                <mat-icon [svgIcon]=\"flow.enabled ? 'gio:prohibition' : 'gio:check-circled-outline'\"></mat-icon>\n                <span>{{ flow.enabled ? 'Disable' : 'Enable' }}</span>\n              </button>\n              <button mat-menu-item (click)=\"onEditFlow(flow._id)\"><mat-icon svgIcon=\"gio:edit-pencil\"></mat-icon> Edit</button>\n              <button mat-menu-item (click)=\"onDeleteFlow(flow._id)\"><mat-icon svgIcon=\"gio:trash\"></mat-icon> Delete</button>\n              @if (apiType !== 'NATIVE') {\n                <button mat-menu-item (click)=\"onDuplicateFlow(flowsGroup._id, flow._id)\">\n                  <mat-icon svgIcon=\"gio:copy\"></mat-icon> Duplicate\n                </button>\n              }\n            </mat-menu>\n          </div>\n        </div>\n      }\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, #ffc2ac);color:var(--gio-oem-palette--active-contrast, #1e1b1b)}: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-family:Kanit,Helvetica Neue,sans-serif;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 0 0;border-radius:8px}.list__flowsGroup__header__label{font-size:14px;font-weight:700;line-height:20px;font-family:Manrope,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__flows{display:flex;flex-direction:column;gap:8px}.list__flowsGroup__flows__flow{display:flex;overflow:hidden;height:68px;flex-direction:row;align-items:center;justify-content:space-between;padding:7px;border:1px solid #b2aaa9;border-radius:8px;background-color:#fff}.list__flowsGroup__flows__flow.disabled{border:1px solid rgba(178,170,169,0);background-color:#f7f7f8cc;text-decoration:line-through}.list__flowsGroup__flows__flow:hover,.list__flowsGroup__flows__flow.selected{padding:6px;border:2px solid #ffa685;cursor:pointer}.list__flowsGroup__flows__flow__left{display:flex;overflow:hidden;flex:1 1 auto;flex-direction:column;gap:8px}.list__flowsGroup__flows__flow__left__name{overflow:hidden;padding-left:4px;text-overflow:ellipsis;white-space:nowrap}.list__flowsGroup__flows__flow__left__infos{display:flex;align-items:center}.list__flowsGroup__flows__flow__left__infos__badges{flex:0 0 auto}.list__flowsGroup__flows__flow__left__infos__badges__badge{width:auto}.list__flowsGroup__flows__flow__left__infos__pathOrChannelLabel{overflow:hidden;flex:1 1 auto;direction:rtl;text-align:left;text-overflow:ellipsis;white-space:nowrap}.list__flowsGroup__flows__flow__left__infos__pathOrChannelLabel span{direction:ltr;unicode-bidi:bidi-override}.list__flowsGroup__flows__flow__left__infos__conditionBadge{flex:0 0 auto}.list__flowsGroup.cdk-drop-list-dragging{pointer-events:none}.list__flowsGroup .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.list__flowsGroup .cdk-drag-placeholder *{opacity:0}.list__flowsGroup .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list__flowsGroup.cdk-drop-list-dragging .list__flowsGroup__flows__flow:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.loadingList{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center}\n"] }]
+            args: [{ imports: [
+                        GioIconsModule,
+                        MatTooltipModule,
+                        MatButtonModule,
+                        CommonModule,
+                        GioLoaderModule,
+                        MatMenuModule,
+                        DragDropModule,
+                        MatInputModule,
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                    ], 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  @if (apiType !== 'NATIVE') {\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  }\n</div>\n<div class=\"searchBar\" *ngIf=\"!loading\">\n  <mat-form-field class=\"searchBar__input\">\n    <mat-icon matPrefix>search</mat-icon>\n    <input matInput placeholder=\"Search by name, path, or group...\" [formControl]=\"searchControl\" />\n    <button *ngIf=\"searchControl.value\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"resetSearchTerm()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n</div>\n\n<div class=\"list\" *ngIf=\"!loading; else loadingList\" cdkDropListGroup>\n  <div\n    *ngFor=\"let flowsGroup of filteredFlowGroupMenuItems\"\n    class=\"list__flowsGroup\"\n    cdkDropList\n    [cdkDropListData]=\"flowsGroup\"\n    [cdkDropListEnterPredicate]=\"enterPredicate\"\n    (cdkDropListDropped)=\"onDropFlow($event)\"\n  >\n    <div class=\"list__flowsGroup__header\">\n      <div class=\"list__flowsGroup__header__label\">\n        <span>{{ (flowsGroup._isPlan ? 'Plan: ' : '') + flowsGroup.name }}</span>\n      </div>\n      <div class=\"list__flowsGroup__header__addBtn\">\n        @if (apiType === 'NATIVE') {\n          <span [matTooltipDisabled]=\"flowsGroup.flows.length < 1\" matTooltip=\"Only one flow is allowed for a native API\">\n            <button mat-button [disabled]=\"readOnly || flowsGroup.flows.length > 0\" (click)=\"onAddFlow(flowsGroup)\">\n              <mat-icon svgIcon=\"gio:plus\" matTooltip=\"New flow\"></mat-icon>\n            </button>\n          </span>\n        } @else {\n          <button mat-button [disabled]=\"readOnly\" (click)=\"onAddFlow(flowsGroup)\">\n            <mat-icon svgIcon=\"gio:plus\" matTooltip=\"New flow\"></mat-icon>\n          </button>\n        }\n      </div>\n    </div>\n\n    <div class=\"list__flowsGroup__flows\">\n      <ng-container *ngIf=\"flowsGroup.flows.length > 0; else noFlows\">\n        @for (flow of flowsGroup.flows; track flow._id) {\n          <div\n            class=\"list__flowsGroup__flows__flow\"\n            [class.selected]=\"flow.selected\"\n            [class.disabled]=\"!flow.enabled\"\n            (click)=\"selectFlow(flowsGroup._id, flow._id)\"\n            (mouseout)=\"flow.mouseOver = false\"\n            (mouseover)=\"flow.mouseOver = true\"\n            cdkDrag\n          >\n            <div class=\"list__flowsGroup__flows__flow__left\">\n              <div *ngIf=\"flow.name\" class=\"list__flowsGroup__flows__flow__left__name\" [attr.title]=\"flow.name\">\n                {{ flow.name }}\n              </div>\n              @if (apiType !== 'NATIVE') {\n                <div class=\"list__flowsGroup__flows__flow__left__infos\">\n                  <div class=\"list__flowsGroup__flows__flow__left__infos__badges\">\n                    <span\n                      *ngFor=\"let badge of flow.badges\"\n                      class=\"list__flowsGroup__flows__flow__left__infos__badges__badge\"\n                      [ngClass]=\"badge.class\"\n                      >{{ badge.label }}</span\n                    >\n                  </div>\n                  <div class=\"list__flowsGroup__flows__flow__left__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\n                    *ngIf=\"flow.hasCondition\"\n                    class=\"list__flowsGroup__flows__flow__left__infos__conditionBadge gio-badge-neutral\"\n                    matTooltip=\"Conditioned\"\n                    ><mat-icon svgIcon=\"gio:if\"></mat-icon\n                  ></span>\n                </div>\n              }\n            </div>\n            <div class=\"list__flowsGroup__flows__flow__right\">\n              <button\n                class=\"list__flowsGroup__flows__flow__right__name__menu\"\n                mat-button\n                [disabled]=\"readOnly\"\n                [matMenuTriggerFor]=\"flowMenu\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <mat-icon svgIcon=\"gio:more-vertical\"></mat-icon>\n              </button>\n              <mat-menu #flowMenu=\"matMenu\">\n                <button [disabled]=\"readOnly\" mat-menu-item (click)=\"onDisableFlow(flow._id)\">\n                  <mat-icon [svgIcon]=\"flow.enabled ? 'gio:prohibition' : 'gio:check-circled-outline'\"></mat-icon>\n                  <span>{{ flow.enabled ? 'Disable' : 'Enable' }}</span>\n                </button>\n                <button mat-menu-item (click)=\"onEditFlow(flow._id)\"><mat-icon svgIcon=\"gio:edit-pencil\"></mat-icon> Edit</button>\n                <button mat-menu-item (click)=\"onDeleteFlow(flow._id)\"><mat-icon svgIcon=\"gio:trash\"></mat-icon> Delete</button>\n                @if (apiType !== 'NATIVE') {\n                  <button mat-menu-item (click)=\"onDuplicateFlow(flowsGroup._id, flow._id)\">\n                    <mat-icon svgIcon=\"gio:copy\"></mat-icon> Duplicate\n                  </button>\n                }\n              </mat-menu>\n            </div>\n          </div>\n        }\n      </ng-container>\n      <ng-template #noFlows>\n        <div class=\"list__flowsGroup__no-flows\">No flows yet</div>\n      </ng-template>\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, #ffc2ac);color:var(--gio-oem-palette--active-contrast, #1e1b1b)}: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:14px}.header__label{font-family:Kanit,Helvetica Neue,sans-serif;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}.searchBar{display:flex;padding:0 16px}.searchBar__input{flex:1 1 auto}.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 0 0;border-radius:8px}.list__flowsGroup__header__label{font-size:14px;font-weight:700;line-height:20px;font-family:Manrope,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__flows{display:flex;flex-direction:column;gap:8px}.list__flowsGroup__flows__flow{display:flex;overflow:hidden;height:68px;flex-direction:row;align-items:center;justify-content:space-between;padding:7px;border:1px solid #b2aaa9;border-radius:8px;background-color:#fff}.list__flowsGroup__flows__flow.disabled{border:1px solid rgba(178,170,169,0);background-color:#f7f7f8cc;text-decoration:line-through}.list__flowsGroup__flows__flow:hover,.list__flowsGroup__flows__flow.selected{padding:6px;border:2px solid #ffa685;cursor:pointer}.list__flowsGroup__flows__flow__left{display:flex;overflow:hidden;flex:1 1 auto;flex-direction:column;gap:8px}.list__flowsGroup__flows__flow__left__name{overflow:hidden;padding-left:4px;text-overflow:ellipsis;white-space:nowrap}.list__flowsGroup__flows__flow__left__infos{display:flex;align-items:center}.list__flowsGroup__flows__flow__left__infos__badges{flex:0 0 auto}.list__flowsGroup__flows__flow__left__infos__badges__badge{width:auto}.list__flowsGroup__flows__flow__left__infos__pathOrChannelLabel{overflow:hidden;flex:1 1 auto;direction:rtl;text-align:left;text-overflow:ellipsis;white-space:nowrap}.list__flowsGroup__flows__flow__left__infos__pathOrChannelLabel span{direction:ltr;unicode-bidi:bidi-override}.list__flowsGroup__flows__flow__left__infos__conditionBadge{flex:0 0 auto}.list__flowsGroup__no-flows{font-style:italic}.list__flowsGroup.cdk-drop-list-dragging{pointer-events:none}.list__flowsGroup .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.list__flowsGroup .cdk-drag-placeholder *{opacity:0}.list__flowsGroup .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list__flowsGroup.cdk-drop-list-dragging .list__flowsGroup__flows__flow:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.loadingList{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center}\n"] }]
         }], ctorParameters: () => [{ type: i1.MatDialog }], propDecorators: { readOnly: [{
                 type: Input
             }], loading: [{
@@ -1127,7 +1194,7 @@ class GioPolicyStudioStepFormComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioPolicyStudioStepFormComponent, deps: [{ token: GioPolicyStudioService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: GioPolicyStudioStepFormComponent, isStandalone: true, selector: "gio-ps-step-form", inputs: { readOnly: "readOnly", step: "step", flowPhase: "flowPhase", apiType: "apiType", genericPolicy: "genericPolicy" }, 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      @if (isMessage) {\n        <mat-form-field>\n          <mat-label>Message trigger condition</mat-label>\n          <input matInput formControlName=\"messageCondition\" />\n          <mat-hint>The condition to execute this policy on message. Supports Expression Language.</mat-hint>\n        </mat-form-field>\n      }\n\n      <gio-form-json-schema\n        *ngIf=\"policySchema\"\n        [jsonSchema]=\"$any(policySchema)\"\n        [context]=\"context\"\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    <gio-banner-warning *ngIf=\"infoBanner\">\n      Prerequisite message\n      <span gioBannerBody>{{ infoBanner }}</span>\n    </gio-banner-warning>\n    <ng-container *ngIf=\"policyDocumentation$ | async as policyDocumentation; else loadingTmpl\">\n      @switch (policyDocumentation.language) {\n        @case ('ASCIIDOC') {\n          <gio-asciidoctor [content]=\"policyDocumentation.content\"></gio-asciidoctor>\n        }\n        @case ('MARKDOWN') {\n          <markdown class=\"documentation__content__markdown\" [data]=\"policyDocumentation.content\"></markdown>\n        }\n      }\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, #ffc2ac);color:var(--gio-oem-palette--active-contrast, #1e1b1b)}:host{display:flex;flex-direction:row;border:1px solid #d2cecd;border-radius:8px}::ng-deep gio-ps-step-form .documentation__content__markdown table{overflow:hidden;width:100%;border:1px solid #d2cecd;border-radius:4px;margin-bottom:12px;border-collapse:separate;border-spacing:0}::ng-deep gio-ps-step-form .documentation__content__markdown table th,::ng-deep gio-ps-step-form .documentation__content__markdown table td{padding:8px;border-bottom:1px solid #d2cecd}::ng-deep gio-ps-step-form .documentation__content__markdown table tr:last-child td{border-bottom:none}::ng-deep gio-ps-step-form .documentation__content__markdown table th:first-child{border-top-left-radius:4px}::ng-deep gio-ps-step-form .documentation__content__markdown table th:last-child{border-top-right-radius:4px}::ng-deep gio-ps-step-form .documentation__content__markdown table tr:last-child td:first-child{border-bottom-left-radius:4px}::ng-deep gio-ps-step-form .documentation__content__markdown table tr:last-child td:last-child{border-bottom-right-radius:4px}.settings{display:flex;flex:0 0 50%;flex-direction:column}.settings__header{border-right:1px solid #d2cecd}.settings__content{display:flex;flex:1 1 auto;flex-direction:column;padding:16px;border-right:1px solid #d2cecd}.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 #d2cecd;font-size:14px;font-weight:700;line-height:20px;font-family:Manrope,sans-serif;letter-spacing:.4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { 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: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: GioFormJsonSchemaModule }, { kind: "component", type: i6$1.GioFormJsonSchemaComponent, selector: "gio-form-json-schema", inputs: ["jsonSchema", "context", "options"], outputs: ["ready"] }, { kind: "ngmodule", type: GioAsciidoctorModule }, { kind: "component", type: i7$3.GioAsciidoctorComponent, selector: "gio-asciidoctor", inputs: ["content", "src"] }, { kind: "ngmodule", type: GioLoaderModule }, { kind: "component", type: i6$1.GioLoaderComponent, selector: "gio-loader" }, { kind: "ngmodule", type: GioBannerModule }, { kind: "component", type: i6$1.GioBannerWarningComponent, selector: "gio-banner-warning" }, { kind: "directive", type: i6$1.GioBannerBodyDirective, selector: "[gioBannerBody]" }, { kind: "component", type: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: GioPolicyStudioStepFormComponent, isStandalone: true, selector: "gio-ps-step-form", inputs: { readOnly: "readOnly", step: "step", flowPhase: "flowPhase", apiType: "apiType", genericPolicy: "genericPolicy" }, 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      @if (isMessage) {\n        <mat-form-field>\n          <mat-label>Message trigger condition</mat-label>\n          <input matInput formControlName=\"messageCondition\" />\n          <mat-hint>The condition to execute this policy on message. Supports Expression Language.</mat-hint>\n        </mat-form-field>\n      }\n\n      <gio-form-json-schema\n        *ngIf=\"policySchema\"\n        [jsonSchema]=\"$any(policySchema)\"\n        [context]=\"context\"\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    <gio-banner-warning *ngIf=\"infoBanner\">\n      Prerequisite message\n      <span gioBannerBody>{{ infoBanner }}</span>\n    </gio-banner-warning>\n    <ng-container *ngIf=\"policyDocumentation$ | async as policyDocumentation; else loadingTmpl\">\n      @switch (policyDocumentation.language) {\n        @case ('ASCIIDOC') {\n          <gio-asciidoctor [content]=\"policyDocumentation.content\"></gio-asciidoctor>\n        }\n        @case ('MARKDOWN') {\n          <markdown class=\"documentation__content__markdown\" [data]=\"policyDocumentation.content\"></markdown>\n        }\n      }\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, #ffc2ac);color:var(--gio-oem-palette--active-contrast, #1e1b1b)}:host{display:flex;flex-direction:row;border:1px solid #d2cecd;border-radius:8px}::ng-deep gio-ps-step-form .documentation__content__markdown table{overflow:hidden;width:100%;border:1px solid #d2cecd;border-radius:4px;margin-bottom:12px;border-collapse:separate;border-spacing:0}::ng-deep gio-ps-step-form .documentation__content__markdown table th,::ng-deep gio-ps-step-form .documentation__content__markdown table td{padding:8px;border-bottom:1px solid #d2cecd}::ng-deep gio-ps-step-form .documentation__content__markdown table tr:last-child td{border-bottom:none}::ng-deep gio-ps-step-form .documentation__content__markdown table th:first-child{border-top-left-radius:4px}::ng-deep gio-ps-step-form .documentation__content__markdown table th:last-child{border-top-right-radius:4px}::ng-deep gio-ps-step-form .documentation__content__markdown table tr:last-child td:first-child{border-bottom-left-radius:4px}::ng-deep gio-ps-step-form .documentation__content__markdown table tr:last-child td:last-child{border-bottom-right-radius:4px}.settings{display:flex;flex:0 0 50%;flex-direction:column}.settings__header{border-right:1px solid #d2cecd}.settings__content{display:flex;flex:1 1 auto;flex-direction:column;padding:16px;border-right:1px solid #d2cecd}.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 #d2cecd;font-size:14px;font-weight:700;line-height:20px;font-family:Manrope,sans-serif;letter-spacing:.4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { 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: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: GioFormJsonSchemaModule }, { kind: "component", type: i6$1.GioFormJsonSchemaComponent, selector: "gio-form-json-schema", inputs: ["jsonSchema", "context", "options"], outputs: ["ready"] }, { kind: "ngmodule", type: GioAsciidoctorModule }, { kind: "component", type: i7$3.GioAsciidoctorComponent, selector: "gio-asciidoctor", inputs: ["content", "src"] }, { kind: "ngmodule", type: GioLoaderModule }, { kind: "component", type: i6$1.GioLoaderComponent, selector: "gio-loader" }, { kind: "ngmodule", type: GioBannerModule }, { kind: "component", type: i6$1.GioBannerWarningComponent, selector: "gio-banner-warning" }, { kind: "directive", type: i6$1.GioBannerBodyDirective, selector: "[gioBannerBody]" }, { kind: "component", type: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioPolicyStudioStepFormComponent, decorators: [{
             type: Component,
@@ -1278,7 +1345,7 @@ class GioPolicyStudioPoliciesCatalogDialogComponent {
         this.isUnlicensed = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioPolicyStudioPoliciesCatalogDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: GioPolicyStudioPoliciesCatalogDialogComponent, isStandalone: true, 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  @if (selectedPolicy) {\n    <button class=\"title__goBackBtn\" mat-stroked-button (click)=\"onGoBack()\">\n      <mat-icon svgIcon=\"gio:arrow-left\"></mat-icon>\n      Go back\n    </button>\n  }\n  Policies for <span class=\"title__phase\">{{ flowPhaseLabel }}</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\" cdkFocusInitial />\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\n          <span\n            *ngIf=\"policy.genericPolicy.type === 'SHARED_POLICY_GROUP'\"\n            class=\"gio-badge-neutral policiesCatalog__list__policy__head__badge\"\n            matTooltip=\"Shared Policy Group\"\n          >\n            <mat-icon svgIcon=\"gio:users\"></mat-icon>\n          </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  <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\n      <span *ngIf=\"selectedPolicy.type === 'SHARED_POLICY_GROUP'\" class=\"gio-badge-neutral policiesCatalog__list__policy__head__badge\">\n        <mat-icon svgIcon=\"gio:users\"></mat-icon>&nbsp;Shared Policy Group\n      </span>\n    </div>\n\n    <div *ngIf=\"selectedPolicy.description\" class=\"policyForm__info__description\">{{ selectedPolicy.description }}</div>\n  </div>\n\n  <gio-ps-step-form\n    [genericPolicy]=\"selectedPolicy\"\n    [flowPhase]=\"flowPhase\"\n    [apiType]=\"apiType\"\n    (stepChange)=\"onStepChange($event)\"\n    (isValid)=\"onIsValid($event)\"\n  ></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, #ffc2ac);color:var(--gio-oem-palette--active-contrast, #1e1b1b)}.title__goBackBtn{margin-right:8px;line-height:normal}.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 #d2cecd;border-radius:8px;gap:4px}.policiesCatalog__list__policy__head{display:flex;align-items:center;align-self:stretch}.policiesCatalog__list__policy__head__icon{min-width:24px;flex:0 0 24px;margin-right:8px}.policiesCatalog__list__policy__head__name{overflow:hidden;flex:1 1 auto;text-overflow:ellipsis;white-space:nowrap}.policiesCatalog__list__policy__head__badge{float:left}.policiesCatalog__list__policy__enterprise{position:absolute;top:0;right:0;padding:8px 8px 8px 16px;border-radius:0 8px 0 38px;background:#f7f7f8;color:#da3b00}.policiesCatalog__list__policy__enterprise__lock{min-width:16px;max-width:16px;color:#da3b00}.policiesCatalog__list__policy__description{font-size:12px;font-weight:400;line-height:16px;font-family:Manrope,sans-serif;letter-spacing:normal;display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;color:#322f2f;-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:Manrope,sans-serif;letter-spacing:normal;color:#322f2f}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: MatButtonModule }, { 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: "ngmodule", type: MatDialogModule }, { 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: "ngmodule", type: MatFormFieldModule }, { 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: "ngmodule", type: MatChipsModule }, { kind: "component", type: i6$2.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i6$2.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: GioBannerModule }, { kind: "component", type: i6$1.GioBannerComponent, selector: "gio-banner", inputs: ["type", "icon", "collapsible"] }, { kind: "directive", type: i6$1.GioBannerBodyDirective, selector: "[gioBannerBody]" }, { kind: "directive", type: i6$1.GioBannerActionDirective, selector: "[gioBannerAction]" }, { kind: "ngmodule", type: GioIconsModule }, { 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", "flowPhase", "apiType", "genericPolicy"], outputs: ["stepChange", "isValid"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: GioPolicyStudioPoliciesCatalogDialogComponent, isStandalone: true, 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  @if (selectedPolicy) {\n    <button class=\"title__goBackBtn\" mat-stroked-button (click)=\"onGoBack()\">\n      <mat-icon svgIcon=\"gio:arrow-left\"></mat-icon>\n      Go back\n    </button>\n  }\n  Policies for <span class=\"title__phase\">{{ flowPhaseLabel }}</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\" cdkFocusInitial />\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\n          <span\n            *ngIf=\"policy.genericPolicy.type === 'SHARED_POLICY_GROUP'\"\n            class=\"gio-badge-neutral policiesCatalog__list__policy__head__badge\"\n            matTooltip=\"Shared Policy Group\"\n          >\n            <mat-icon svgIcon=\"gio:users\"></mat-icon>\n          </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  <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\n      <span *ngIf=\"selectedPolicy.type === 'SHARED_POLICY_GROUP'\" class=\"gio-badge-neutral policiesCatalog__list__policy__head__badge\">\n        <mat-icon svgIcon=\"gio:users\"></mat-icon>&nbsp;Shared Policy Group\n      </span>\n    </div>\n\n    <div *ngIf=\"selectedPolicy.description\" class=\"policyForm__info__description\">{{ selectedPolicy.description }}</div>\n  </div>\n\n  <gio-ps-step-form\n    [genericPolicy]=\"selectedPolicy\"\n    [flowPhase]=\"flowPhase\"\n    [apiType]=\"apiType\"\n    (stepChange)=\"onStepChange($event)\"\n    (isValid)=\"onIsValid($event)\"\n  ></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, #ffc2ac);color:var(--gio-oem-palette--active-contrast, #1e1b1b)}.title__goBackBtn{margin-right:8px;line-height:normal}.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 #d2cecd;border-radius:8px;gap:4px}.policiesCatalog__list__policy__head{display:flex;align-items:center;align-self:stretch}.policiesCatalog__list__policy__head__icon{min-width:24px;flex:0 0 24px;margin-right:8px}.policiesCatalog__list__policy__head__name{overflow:hidden;flex:1 1 auto;text-overflow:ellipsis;white-space:nowrap}.policiesCatalog__list__policy__head__badge{float:left}.policiesCatalog__list__policy__enterprise{position:absolute;top:0;right:0;padding:8px 8px 8px 16px;border-radius:0 8px 0 38px;background:#f7f7f8;color:#da3b00}.policiesCatalog__list__policy__enterprise__lock{min-width:16px;max-width:16px;color:#da3b00}.policiesCatalog__list__policy__description{font-size:12px;font-weight:400;line-height:16px;font-family:Manrope,sans-serif;letter-spacing:normal;display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;color:#322f2f;-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:Manrope,sans-serif;letter-spacing:normal;color:#322f2f}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: MatButtonModule }, { 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: "ngmodule", type: MatDialogModule }, { 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: "ngmodule", type: MatFormFieldModule }, { 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: "ngmodule", type: MatChipsModule }, { kind: "component", type: i6$2.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i6$2.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: GioBannerModule }, { kind: "component", type: i6$1.GioBannerComponent, selector: "gio-banner", inputs: ["type", "icon", "collapsible"] }, { kind: "directive", type: i6$1.GioBannerBodyDirective, selector: "[gioBannerBody]" }, { kind: "directive", type: i6$1.GioBannerActionDirective, selector: "[gioBannerAction]" }, { kind: "ngmodule", type: GioIconsModule }, { 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", "flowPhase", "apiType", "genericPolicy"], outputs: ["stepChange", "isValid"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GioPolicyStudioPoliciesCatalogDialogComponent, decorators: [{
             type: Component,