@gravitee/ui-policy-studio-angular 16.0.1-apim-11428-mcp-proxy-8facd19 → 16.0.1-apim-11428-mcp-proxy-1b4e3b1

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

@@ -1185,7 +1185,7 @@ class GioPolicyStudioFlowsMenuComponent {
         this.selectedFlowIdChange.emit(duplicatedFlow._id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: GioPolicyStudioFlowsMenuComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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) 2025 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@if (!loading) {\n  <div class=\"searchBar\">\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      @if (searchControl.value) {\n        <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"resetSearchTerm()\">\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n    </mat-form-field>\n  </div>\n}\n\n@if (!loading) {\n  <div class=\"list\" cdkDropListGroup>\n    @for (flowsGroup of filteredFlowGroupMenuItems; track flowsGroup._id) {\n      <div\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        <div class=\"list__flowsGroup__flows\">\n          @if (flowsGroup.flows.length > 0) {\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                  @if (flow.name) {\n                    <div class=\"list__flowsGroup__flows__flow__left__name\" [attr.title]=\"flow.name\">\n                      {{ flow.name }}\n                    </div>\n                  }\n                  @if (apiType !== 'NATIVE') {\n                    <div class=\"list__flowsGroup__flows__flow__left__infos\">\n                      <div class=\"list__flowsGroup__flows__flow__left__infos__badges\">\n                        @for (badge of flow.badges; track badge.label) {\n                          <span class=\"list__flowsGroup__flows__flow__left__infos__badges__badge\" [ngClass]=\"badge.class\">{{\n                            badge.label\n                          }}</span>\n                        }\n                      </div>\n                      <div class=\"list__flowsGroup__flows__flow__left__infos__pathOrChannelLabel\">\n                        @if (flow.pathOrChannelLabel !== undefined) {\n                          <span [attr.title]=\"flow.pathOrChannelLabel\" [innerHTML]=\"flow.pathOrChannelLabel\"></span>\n                        } @else {\n                          <em>Empty</em>\n                        }\n                      </div>\n                      @if (flow.hasCondition) {\n                        <span class=\"list__flowsGroup__flows__flow__left__infos__conditionBadge gio-badge-neutral\" matTooltip=\"Conditioned\"\n                          ><mat-icon svgIcon=\"gio:if\"></mat-icon\n                        ></span>\n                      }\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          } @else {\n            <div class=\"list__flowsGroup__no-flows\">No flows yet</div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n} @else {\n  <div class=\"loadingList\">\n    <gio-loader></gio-loader>\n  </div>\n}\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: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: GioLoaderModule }, { kind: "component", type: i7.GioLoaderComponent, selector: "gio-loader" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7$1.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$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7$1.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", "cdkDropListHasAnchor"], 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: i6$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: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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) 2025 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' && apiType !== 'MCP_PROXY') {\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@if (!loading) {\n  <div class=\"searchBar\">\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      @if (searchControl.value) {\n        <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"resetSearchTerm()\">\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n    </mat-form-field>\n  </div>\n}\n\n@if (!loading) {\n  <div class=\"list\" cdkDropListGroup>\n    @for (flowsGroup of filteredFlowGroupMenuItems; track flowsGroup._id) {\n      <div\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        <div class=\"list__flowsGroup__flows\">\n          @if (flowsGroup.flows.length > 0) {\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                  @if (flow.name) {\n                    <div class=\"list__flowsGroup__flows__flow__left__name\" [attr.title]=\"flow.name\">\n                      {{ flow.name }}\n                    </div>\n                  }\n                  @if (apiType !== 'NATIVE') {\n                    <div class=\"list__flowsGroup__flows__flow__left__infos\">\n                      <div class=\"list__flowsGroup__flows__flow__left__infos__badges\">\n                        @for (badge of flow.badges; track badge.label) {\n                          <span class=\"list__flowsGroup__flows__flow__left__infos__badges__badge\" [ngClass]=\"badge.class\">{{\n                            badge.label\n                          }}</span>\n                        }\n                      </div>\n                      <div class=\"list__flowsGroup__flows__flow__left__infos__pathOrChannelLabel\">\n                        @if (flow.pathOrChannelLabel !== undefined) {\n                          <span [attr.title]=\"flow.pathOrChannelLabel\" [innerHTML]=\"flow.pathOrChannelLabel\"></span>\n                        } @else {\n                          <em>Empty</em>\n                        }\n                      </div>\n                      @if (flow.hasCondition) {\n                        <span class=\"list__flowsGroup__flows__flow__left__infos__conditionBadge gio-badge-neutral\" matTooltip=\"Conditioned\"\n                          ><mat-icon svgIcon=\"gio:if\"></mat-icon\n                        ></span>\n                      }\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          } @else {\n            <div class=\"list__flowsGroup__no-flows\">No flows yet</div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n} @else {\n  <div class=\"loadingList\">\n    <gio-loader></gio-loader>\n  </div>\n}\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: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: GioLoaderModule }, { kind: "component", type: i7.GioLoaderComponent, selector: "gio-loader" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7$1.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$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7$1.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", "cdkDropListHasAnchor"], 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: i6$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: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: GioPolicyStudioFlowsMenuComponent, decorators: [{
             type: Component,
@@ -1200,7 +1200,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         MatInputModule,
                         ReactiveFormsModule,
                         MatFormFieldModule,
-                    ], selector: 'gio-ps-flows-menu', template: "<!--\n\n    Copyright (C) 2025 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@if (!loading) {\n  <div class=\"searchBar\">\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      @if (searchControl.value) {\n        <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"resetSearchTerm()\">\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n    </mat-form-field>\n  </div>\n}\n\n@if (!loading) {\n  <div class=\"list\" cdkDropListGroup>\n    @for (flowsGroup of filteredFlowGroupMenuItems; track flowsGroup._id) {\n      <div\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        <div class=\"list__flowsGroup__flows\">\n          @if (flowsGroup.flows.length > 0) {\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                  @if (flow.name) {\n                    <div class=\"list__flowsGroup__flows__flow__left__name\" [attr.title]=\"flow.name\">\n                      {{ flow.name }}\n                    </div>\n                  }\n                  @if (apiType !== 'NATIVE') {\n                    <div class=\"list__flowsGroup__flows__flow__left__infos\">\n                      <div class=\"list__flowsGroup__flows__flow__left__infos__badges\">\n                        @for (badge of flow.badges; track badge.label) {\n                          <span class=\"list__flowsGroup__flows__flow__left__infos__badges__badge\" [ngClass]=\"badge.class\">{{\n                            badge.label\n                          }}</span>\n                        }\n                      </div>\n                      <div class=\"list__flowsGroup__flows__flow__left__infos__pathOrChannelLabel\">\n                        @if (flow.pathOrChannelLabel !== undefined) {\n                          <span [attr.title]=\"flow.pathOrChannelLabel\" [innerHTML]=\"flow.pathOrChannelLabel\"></span>\n                        } @else {\n                          <em>Empty</em>\n                        }\n                      </div>\n                      @if (flow.hasCondition) {\n                        <span class=\"list__flowsGroup__flows__flow__left__infos__conditionBadge gio-badge-neutral\" matTooltip=\"Conditioned\"\n                          ><mat-icon svgIcon=\"gio:if\"></mat-icon\n                        ></span>\n                      }\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          } @else {\n            <div class=\"list__flowsGroup__no-flows\">No flows yet</div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n} @else {\n  <div class=\"loadingList\">\n    <gio-loader></gio-loader>\n  </div>\n}\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"] }]
+                    ], selector: 'gio-ps-flows-menu', template: "<!--\n\n    Copyright (C) 2025 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' && apiType !== 'MCP_PROXY') {\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@if (!loading) {\n  <div class=\"searchBar\">\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      @if (searchControl.value) {\n        <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"resetSearchTerm()\">\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n    </mat-form-field>\n  </div>\n}\n\n@if (!loading) {\n  <div class=\"list\" cdkDropListGroup>\n    @for (flowsGroup of filteredFlowGroupMenuItems; track flowsGroup._id) {\n      <div\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        <div class=\"list__flowsGroup__flows\">\n          @if (flowsGroup.flows.length > 0) {\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                  @if (flow.name) {\n                    <div class=\"list__flowsGroup__flows__flow__left__name\" [attr.title]=\"flow.name\">\n                      {{ flow.name }}\n                    </div>\n                  }\n                  @if (apiType !== 'NATIVE') {\n                    <div class=\"list__flowsGroup__flows__flow__left__infos\">\n                      <div class=\"list__flowsGroup__flows__flow__left__infos__badges\">\n                        @for (badge of flow.badges; track badge.label) {\n                          <span class=\"list__flowsGroup__flows__flow__left__infos__badges__badge\" [ngClass]=\"badge.class\">{{\n                            badge.label\n                          }}</span>\n                        }\n                      </div>\n                      <div class=\"list__flowsGroup__flows__flow__left__infos__pathOrChannelLabel\">\n                        @if (flow.pathOrChannelLabel !== undefined) {\n                          <span [attr.title]=\"flow.pathOrChannelLabel\" [innerHTML]=\"flow.pathOrChannelLabel\"></span>\n                        } @else {\n                          <em>Empty</em>\n                        }\n                      </div>\n                      @if (flow.hasCondition) {\n                        <span class=\"list__flowsGroup__flows__flow__left__infos__conditionBadge gio-badge-neutral\" matTooltip=\"Conditioned\"\n                          ><mat-icon svgIcon=\"gio:if\"></mat-icon\n                        ></span>\n                      }\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          } @else {\n            <div class=\"list__flowsGroup__no-flows\">No flows yet</div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n} @else {\n  <div class=\"loadingList\">\n    <gio-loader></gio-loader>\n  </div>\n}\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: [{