@gravitee/ui-components 3.25.3-typescript-e7256ca → 3.25.3-typescript-9cbc31e

package/src/policy-studio/gv-policy-studio-menu.js

@@ -1 +1,689 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvPolicyStudioMenu=void 0;const e=require("lit"),t=require("../styles/link"),i=require("../lib/events"),o=require("lit/directives/class-map");require("../atoms/gv-image"),require("../atoms/gv-state"),require("../molecules/gv-popover"),require("./gv-flow-step");const l=require("../lib/studio"),s=require("lit/directives/repeat"),n=require("../lib/utils");class a extends e.LitElement{static get properties(){return{policies:{type:Array},flows:{type:Object},plans:{type:Object},selectedIds:{type:Array},sortable:{type:Boolean},disabled:{type:Boolean,reflect:!0},query:{type:String},flowsTitle:{type:String,attribute:"flows-title"},hasPolicyFilter:{type:Boolean,attribute:"has-policy-filter"},canAdd:{type:Boolean,attribute:"can-add"},readonly:{type:Boolean},readonlyPlans:{type:Boolean}}}constructor(){super(),this.selectedIds=[],this.flowsTitle="Flows"}static get styles(){return[t.link,l.methods,e.css`:host{box-sizing:border-box;min-width:250px;display:flex;flex-direction:column}:host([disabled]){opacity:.5}:host([disabled]) *{cursor:not-allowed}.box{flex:1;overflow:auto}.type{background-color:#f5f5f5;text-transform:capitalize;text-decoration:none;padding:.2rem;color:#262626;border-width:1px 0 1px 0;border-style:solid;border-color:#bfbfbf;font-size:15px;display:flex;align-items:center;box-sizing:border-box;height:42px}.type .type-name{flex:1}.entry .entry-name,.type .type-name{display:flex;align-items:center;white-space:nowrap;overflow:hidden;min-width:150px;height:100%}.expandable{background:#fff;overflow:hidden;transition:height,opacity,width,padding,color .25s ease-in-out;line-height:0;color:transparent;box-sizing:border-box;font-size:14px;--gv-icon--s:0;visibility:hidden}.expandable.open{line-height:1.5;padding-top:.5rem;padding-bottom:.5rem;color:#262626;overflow:auto;visibility:visible}.entry{display:flex;align-items:center;user-select:none;position:relative}.entry.disabled{text-decoration:line-through;font-style:italic}.entry gv-image{height:0;width:0;transition:height 75ms ease-in-out;visibility:hidden}.entry gv-tag{display:none}.expandable-icon{margin-right:2px;--gv-icon--s:22px;--gv-icon--c:#5a7684;--gv-icon-opacity--c:#5a7684}.policy-icon{--gv-icon--s:40px;margin-right:2px;--gv-icon--c:#5a7684;--gv-icon-opacity--c:#5a7684}.expandable.open .entry gv-tag{display:block}.expandable.open .entry gv-image{height:40px;width:40px;margin-right:5px;visibility:visible}.expandable.open .entry:focus-within{--gv-icon--c:#28444f;color:#28444f}.expandable.open .entry:focus-within .actions{visibility:visible;opacity:1;height:25px}.flow-path{max-width:200px}.entry .actions{background-color:#fff;transition:all 250ms ease-in-out;align-items:center;display:flex;position:absolute;right:0;padding:.1rem}gv-button{--gv-icon--c:#28444f}.entry .actions>*{margin:1px;opacity:0;visibility:hidden;display:none}.entry:focus-within .actions>*{opacity:1;visibility:visible;display:block}.flow-path{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.expandable.open .entry{border:1px dotted transparent;padding:.2rem;line-height:25px;min-height:32px}.expandable.open .entry{--gv-icon--s:16px}.expandable.open .entry.selected,.expandable.open .entry.selected .actions{background-color:#f5f5f5}.expandable.open .entry.selected{border-top:1px dotted #bfbfbf;border-bottom:1px dotted #bfbfbf;border-right:1px dotted #bfbfbf}.dragging{cursor:grabbing;opacity:1;background-color:#f5f5f5;box-shadow:0 0 5px rgba(0,0,0,.1);transform:none}.flow{margin-left:.2rem}.flow.sortable{margin:0}.policy.draggable gv-icon,.policy.draggable gv-image,.sortable,.sortable gv-icon{cursor:grab}.policy.draggable:active,.sortable gv-icon:active,.sortable:active{cursor:grabbing}.policy-name{flex:1;display:flex;align-items:center}.policy .draggable-icon{opacity:0;visibility:hidden;transition:all 350ms ease-in-out}.policy:hover .draggable-icon{opacity:1;visibility:visible}gv-state,gv-tag{--gv-tag--p:1px 3px;--gv-state--p:4px 6px;--gv-state--fz:10px;--gv-state--c:#28444f;--gv-state--bgc:#ffffff;margin:0 1px}.error-icon{--gv-icon--c:var(--gv-theme-color-warning, #ff9800)}`]}_onExpand(e,t){this.disabled||(t.preventDefault(),t.stopPropagation(),this.shadowRoot.querySelector(e).classList.toggle("open"))}_onDragStartPolicy(e,t){t.dataTransfer.setData("text/plain",JSON.stringify({policy:e}));this._draggablePolicyImage=(0,n.appendDraggableImage)(e.icon,100),t.dataTransfer.setDragImage(this._draggablePolicyImage,50,50),(0,i.dispatchCustomEvent)(this,"dragstart-policy",{dataTransfer:t.dataTransfer})}_onDragEndPolicy(){this._draggablePolicyImage&&(this._draggablePolicyImage.remove(),this._draggablePolicyImage=null),(0,i.dispatchCustomEvent)(this,"dragend-policy")}_onClickFlow(e,t){this.disabled||(t.shiftKey?this._compareFlow(e):this._selectFlow(e))}_selectFlow(e){this.selectedIds=[e._id],(0,i.dispatchCustomEvent)(this,"select-flows",{flows:this.selectedIds})}_compareFlow(e){this.selectedIds.length>0?(this.selectedIds=[...new Set([this.selectedIds[0],e._id])],(0,i.dispatchCustomEvent)(this,"select-flows",{flows:this.selectedIds})):this._selectFlow(e)}_onMouseEnterPolicy(e){(0,i.dispatchCustomEvent)(this,"target-policy",{policy:e})}_onMouseLeavePolicy(){(0,i.dispatchCustomEvent)(this,"target-policy",null)}_onMouseEnterFlow(e){null==this._draggingFlow&&e.target.focus()}_onMouseLeaveFlow(e){null==this._draggingFlow&&e.target.blur()}_filter(e){return!this.query||e.name.toLowerCase().includes(this.query.toLowerCase())}hasCompare(){return this.selectedIds.length>1}_onChangeFlowState(e,{detail:t}){(0,i.dispatchCustomEvent)(this,"change-flow-state",{content:e,enabled:t})}_onDuplicateFlow(e){(0,i.dispatchCustomEvent)(this,"duplicate-flow",{content:e})}_onDeleteFlow(e){(0,i.dispatchCustomEvent)(this,"delete-flow",{content:e})}_renderFlowActions(t,i){if(this.disabled)return e.html``;const o=!1!==t.enabled,l=o?"Disable flow ?":"Enable flow ?";return e.html`<div class="actions">${this.hasCompare()||this.selectedIds.includes(t._id)?"":e.html`<gv-button tabindex="0" link small icon="navigation:route" @gv-button:click="${this._compareFlow.bind(this,t)}" title="Compare"></gv-button>`} ${this.canAdd&&!0!==i?e.html`<gv-button tabindex="0" link small icon="general:duplicate" @gv-button:click="${this._onDuplicateFlow.bind(this,t)}" title="Duplicate"></gv-button><gv-button tabindex="0" link small icon="home:trash" @gv-button:click="${this._onDeleteFlow.bind(this,t)}" title="Delete"></gv-button>`:""} ${!0!==i?e.html`<gv-switch tabindex="0" small title="${l}" .value="${o}" @gv-switch:input="${this._onChangeFlowState.bind(this,t)}"></gv-switch>`:""}</div>`}_onDragStartFlow(e,t,i){const o=i.target.classList;o&&o.contains("flow")&&(o.remove("hover"),o.add("dragging"),this._draggingFlow={target:i.target,flow:e,index:t})}_onDragEnterFlow(e){e.target.classList&&e.target.classList.contains("flow")&&this._draggingFlow.target.parentElement===e.target.parentElement&&(e.target.previousSibling!==this._draggingFlow.target?e.target.parentElement.insertBefore(this._draggingFlow.target,e.target):e.target.nextSibling?e.target.parentElement.insertBefore(this._draggingFlow.target,e.target.nextSibling):e.target.parentElement.appendChild(this._draggingFlow.target),this._draggingFlow.target.classList.remove("dragging"))}_findFlowCollection(e){const t=this.plans.find((t=>null!=t.flows.find((t=>t._id===e))));return{plan:t,flows:null!=t?t.flows:this.flows}}_onDragEndFlow(){this._draggingFlow.target.classList.remove("dragging");const e=[...this._draggingFlow.target.parentElement.querySelectorAll('.flow[draggable="true"]')].indexOf(this._draggingFlow.target);if(e!==this._draggingFlow.index){const{plan:t,flows:o}=this._findFlowCollection(this._draggingFlow.flow._id),l=o.splice(this._draggingFlow.index,1)[0];o.splice(e,0,l);const s=Math.min(this._draggingFlow.index,e),n=Math.max(this._draggingFlow.index,e);o.forEach(((e,t)=>{t>=s&&t<=n&&(e._dirty=!0)})),(0,i.dispatchCustomEvent)(this,"reorder-flows",{plan:t}),setTimeout((()=>{this._draggingFlow=null}),0),this._draggingFlow.target.focus()}}_onDragOverFlow(e){e.preventDefault()}_onKeyDownFlow(e,t){t.target.classList.contains("flow")&&32===t.keyCode&&(t.preventDefault(),this._selectFlow(e))}_onClickPolicy(e){this.disabled||(this.selectedIds=[e.id],(0,i.dispatchCustomEvent)(this,"fetch-documentation",{policy:e}))}_isSelected(e){return null!=this.selectedIds&&this.selectedIds.includes(e)}_renderFlows(t,i,a,r,d){const c=a&&this.readonlyPlans;return e.html`<div class="${(0,o.classMap)({content:!0,expandable:!0,open:d})}" id="${r}">${(0,s.repeat)(t,(()=>(0,n.uuid)()),((t,i)=>e.html`<div draggable="${this.sortable&&!this.disabled&&!c}" tabindex="0" @dragstart="${this._onDragStartFlow.bind(this,t,i)}" @dragenter="${this._onDragEnterFlow}" @dragend="${this._onDragEndFlow}" @dragover="${this._onDragOverFlow}" @keydown="${this._onKeyDownFlow.bind(this,i)}" @mouseenter="${this._onMouseEnterFlow}" @mouseleave="${this._onMouseLeaveFlow}" class="${(0,o.classMap)({entry:!0,flow:!0,sortable:this.sortable&&!this.disabled&&!c,selected:this.selectedIds.includes(t._id),child:a,disabled:!1===t.enabled})}"><div title="${t.name} | Compare with current selection (Shift + click)" @click="${this._onClickFlow.bind(this,t)}" class="entry-name link">${(0,l.getFlowName)(t,null,!0,this.sortable&&!c,!0)}</div>${this._renderFlowActions(t,this.readonly||c)}</div>`))}</div>`}_isDraggable(e){return!this.disabled&&(!0!==this.hasPolicyFilter||!0===e.onRequest||!0===e.onResponse)}_renderPolicies(t,i,l,s,n){return e.html`<div id="${s}" class="${(0,o.classMap)({content:!0,expandable:!0,open:!0,child:l})}">${t.map((t=>{const i=this._isDraggable(t);return e.html`<div class="${(0,o.classMap)({entry:!0,link:!0,policy:!0,selected:this._isSelected(t.id),draggable:i})}" draggable="${i}" @mouseenter="${this._onMouseEnterPolicy.bind(this,t)}" @mouseleave="${this._onMouseLeavePolicy.bind(this,t)}" @dragstart="${this._onDragStartPolicy.bind(this,t)}" @dragend="${this._onDragEndPolicy}" @click="${this._onClickPolicy.bind(this,t)}" title="Show documentation of ${t.name}">${null==t.icon&&null!=n?e.html`<gv-icon class="policy-icon" shape="${this._getGroupShape(n)}"></gv-icon>`:e.html`<gv-image src="${t.icon}"></gv-image>`}<div class="policy-name">${t.name}</div>${i?e.html`<gv-icon class="draggable-icon" shape="design:arrows"></gv-icon>`:e.html``}</div>`}))}</div>`}_getGroupShape(e){return"security"===e?"general:shield-protected":"transformation"===e?"tools:roller":"performance"===e?"general:thunder-move":"communication:shield-thunder"}_renderPart(t,i,o,l=[],s,n,a=null,r=!0,d=!1,c){let g;const h=l.filter((e=>this._filter(e)));if(s&&l.length>0||!s){if(a&&!d){const i=[...new Set(h.map((e=>e[a])))];return e.html`${i.map(((i,l)=>{let d=h.filter((e=>e[a]===i));const c=i?i.replace(/\s+/g,"-").toLowerCase():`group-${l}`,g=`#${c}`;let p=e.html`<gv-state>${d.length}</gv-state>`;return n&&(p=e.html`<gv-button small outlined icon="code:plus" title="Add new flow" @click="${n.bind(this,l,c)}"></gv-button>`),"flows"===t&&(d=d[0].flows),e.html`<div class="type" @click="${this._onExpand.bind(this,g)}"><gv-icon class="expandable-icon" shape="${this._getGroupShape(i)}"></gv-icon><div class="link type-name">${i||"No category"}</div>${p}</div>${this._renderPart(t,i,o,d,s,n,a,r,!0,c)}`}))}`}if(null==c&&(c=t.replace(/\s+/g,"-").toLowerCase()),g="flows"===t?this._renderFlows(h,t,d,c,r):this._renderPolicies(h,t,d,c,i),d)return e.html`${g}`;{const t=`#${c}`;let l="";return n&&(l=e.html`<gv-button small outlined icon="code:plus" title="Add new flow" @click="${n.bind(this,c)}"></gv-button>`),e.html`<div class="type" draggable="false">${o?e.html`<gv-icon class="expandable-icon" shape="${o}"></gv-icon>`:""}<div class="type-name link" @click="${this._onExpand.bind(this,t)}">${i}</div>${l}</div>${g}`}}return e.html``}_getListElement(e){return this.shadowRoot.querySelector(`#${e}`)}_onAddFlowToPlan(e,t,o){this._getListElement(t).classList.add("open"),o.preventDefault(),o.stopPropagation(),(0,i.dispatchCustomEvent)(this,"add-flow-plan",{planIndex:e})}_onAddFlow(e,t){this._getListElement(e).classList.add("open"),t.preventDefault(),t.stopPropagation(),(0,i.dispatchCustomEvent)(this,"add-flow")}render(){return e.html`<slot name="header"></slot><div class="box">${null!=this.plans?this._renderPart("flows","","shopping:sale#2",this.plans,!1,!this.canAdd||this.disabled||this.readonlyPlans?null:this._onAddFlowToPlan,"name"):""} ${null!=this.flows?this._renderPart("flows",this.flowsTitle,"shopping:box#3",this.flows,!1,this.canAdd&&!this.disabled?this._onAddFlow:null):""} ${null!=this.policies?this._renderPart("policies","Policies","communication:shield-thunder",this.policies,!0,null,this.policies.length>0&&null!=this.policies[0].category?"category":null):""}</div><slot name="footer"></slot>`}}exports.GvPolicyStudioMenu=a,window.customElements.define("gv-policy-studio-menu",a);
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { LitElement, html, css } from 'lit';
+import { link } from '../styles/link';
+import { dispatchCustomEvent } from '../lib/events';
+import { classMap } from 'lit/directives/class-map';
+import '../atoms/gv-image';
+import '../atoms/gv-state';
+import '../molecules/gv-popover';
+import './gv-flow-step';
+import { getFlowName, methods } from '../lib/studio';
+import { repeat } from 'lit/directives/repeat';
+import { appendDraggableImage, uuid } from '../lib/utils';
+/**
+ * Policy studio menu component
+ */
+export class GvPolicyStudioMenu extends LitElement {
+    static get properties() {
+        return {
+            policies: { type: Array },
+            flows: { type: Object },
+            plans: { type: Object },
+            selectedIds: { type: Array },
+            sortable: { type: Boolean },
+            disabled: { type: Boolean, reflect: true },
+            query: { type: String },
+            flowsTitle: { type: String, attribute: 'flows-title' },
+            hasPolicyFilter: { type: Boolean, attribute: 'has-policy-filter' },
+            canAdd: { type: Boolean, attribute: 'can-add' },
+            readonly: { type: Boolean },
+            readonlyPlans: { type: Boolean },
+        };
+    }
+    constructor() {
+        super();
+        this.selectedIds = [];
+        this.flowsTitle = 'Flows';
+    }
+    static get styles() {
+        return [
+            link,
+            methods,
+            // language=CSS
+            css `
+        :host {
+          box-sizing: border-box;
+          min-width: 250px;
+          display: flex;
+          flex-direction: column;
+        }
+
+        :host([disabled]) {
+          opacity: 0.5;
+        }
+
+        :host([disabled]) * {
+          cursor: not-allowed;
+        }
+
+        .box {
+          flex: 1;
+          overflow: auto;
+        }
+
+        .type {
+          background-color: #f5f5f5;
+          text-transform: capitalize;
+          text-decoration: none;
+          padding: 0.2rem;
+          color: #262626;
+          border-width: 1px 0 1px 0;
+          border-style: solid;
+          border-color: #bfbfbf;
+          font-size: 15px;
+          display: flex;
+          align-items: center;
+          box-sizing: border-box;
+          height: 42px;
+        }
+
+        .type .type-name {
+          flex: 1;
+        }
+
+        .type .type-name,
+        .entry .entry-name {
+          display: flex;
+          align-items: center;
+          white-space: nowrap;
+          overflow: hidden;
+          min-width: 150px;
+          height: 100%;
+        }
+
+        .expandable {
+          background: #fff;
+          overflow: hidden;
+          transition: height, opacity, width, padding, color 0.25s ease-in-out;
+          line-height: 0;
+          color: transparent;
+          box-sizing: border-box;
+          font-size: 14px;
+          --gv-icon--s: 0;
+          visibility: hidden;
+        }
+
+        .expandable.open {
+          line-height: 1.5;
+          padding-top: 0.5rem;
+          padding-bottom: 0.5rem;
+          color: #262626;
+          overflow: auto;
+          visibility: visible;
+        }
+
+        .entry {
+          display: flex;
+          align-items: center;
+          user-select: none;
+          position: relative;
+        }
+
+        .entry.disabled {
+          text-decoration: line-through;
+          font-style: italic;
+        }
+
+        .entry gv-image {
+          height: 0px;
+          width: 0px;
+          transition: height 75ms ease-in-out;
+          visibility: hidden;
+        }
+
+        .entry gv-tag {
+          display: none;
+        }
+
+        .expandable-icon {
+          margin-right: 2px;
+          --gv-icon--s: 22px;
+          --gv-icon--c: #5a7684;
+          --gv-icon-opacity--c: #5a7684;
+        }
+
+        .policy-icon {
+          --gv-icon--s: 40px;
+          margin-right: 2px;
+          --gv-icon--c: #5a7684;
+          --gv-icon-opacity--c: #5a7684;
+        }
+
+        .expandable.open .entry gv-tag {
+          display: block;
+        }
+
+        .expandable.open .entry gv-image {
+          height: 40px;
+          width: 40px;
+          margin-right: 5px;
+          visibility: visible;
+        }
+
+        .expandable.open .entry:focus-within {
+          --gv-icon--c: #28444f;
+          color: #28444f;
+        }
+
+        .expandable.open .entry:focus-within .actions {
+          visibility: visible;
+          opacity: 1;
+          height: 25px;
+        }
+
+        .flow-path {
+          max-width: 200px;
+        }
+
+        .entry .actions {
+          background-color: white;
+          transition: all 250ms ease-in-out;
+          align-items: center;
+          display: flex;
+          position: absolute;
+          right: 0;
+          padding: 0.1rem;
+        }
+
+        gv-button {
+          --gv-icon--c: #28444f;
+        }
+
+        .entry .actions > * {
+          margin: 1px;
+          opacity: 0;
+          visibility: hidden;
+          display: none;
+        }
+
+        .entry:focus-within .actions > * {
+          opacity: 1;
+          visibility: visible;
+          display: block;
+        }
+
+        .flow-path {
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+
+        .expandable.open .entry {
+          border: 1px dotted transparent;
+          padding: 0.2rem;
+          line-height: 25px;
+          min-height: 32px;
+        }
+
+        .expandable.open .entry {
+          --gv-icon--s: 16px;
+        }
+
+        .expandable.open .entry.selected,
+        .expandable.open .entry.selected .actions {
+          background-color: #f5f5f5;
+        }
+
+        .expandable.open .entry.selected {
+          border-top: 1px dotted #bfbfbf;
+          border-bottom: 1px dotted #bfbfbf;
+          border-right: 1px dotted #bfbfbf;
+        }
+
+        .dragging {
+          cursor: grabbing;
+          opacity: 1;
+          background-color: #f5f5f5;
+          box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+          transform: none;
+        }
+
+        .flow {
+          margin-left: 0.2rem;
+        }
+
+        .flow.sortable {
+          margin: 0;
+        }
+
+        .policy.draggable gv-icon,
+        .policy.draggable gv-image,
+        .sortable,
+        .sortable gv-icon {
+          cursor: grab;
+        }
+
+        .policy.draggable:active,
+        .sortable:active,
+        .sortable gv-icon:active {
+          cursor: grabbing;
+        }
+
+        .policy-name {
+          flex: 1;
+          display: flex;
+          align-items: center;
+        }
+
+        .policy .draggable-icon {
+          opacity: 0;
+          visibility: hidden;
+          transition: all 350ms ease-in-out;
+        }
+
+        .policy:hover .draggable-icon {
+          opacity: 1;
+          visibility: visible;
+        }
+
+        gv-tag,
+        gv-state {
+          --gv-tag--p: 1px 3px;
+          --gv-state--p: 4px 6px;
+          --gv-state--fz: 10px;
+          --gv-state--c: #28444f;
+          --gv-state--bgc: #ffffff;
+          margin: 0 1px;
+        }
+
+        .error-icon {
+          --gv-icon--c: var(--gv-theme-color-warning, #ff9800);
+        }
+      `,
+        ];
+    }
+    _onExpand(anchor, e) {
+        if (!this.disabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.shadowRoot.querySelector(anchor).classList.toggle('open');
+        }
+    }
+    _onDragStartPolicy(policy, e) {
+        e.dataTransfer.setData('text/plain', JSON.stringify({ policy }));
+        const size = 100;
+        this._draggablePolicyImage = appendDraggableImage(policy.icon, size);
+        e.dataTransfer.setDragImage(this._draggablePolicyImage, size / 2, size / 2);
+        dispatchCustomEvent(this, 'dragstart-policy', { dataTransfer: e.dataTransfer });
+    }
+    _onDragEndPolicy() {
+        if (this._draggablePolicyImage) {
+            this._draggablePolicyImage.remove();
+            this._draggablePolicyImage = null;
+        }
+        dispatchCustomEvent(this, 'dragend-policy');
+    }
+    _onClickFlow(flow, e) {
+        if (!this.disabled) {
+            if (e.shiftKey) {
+                this._compareFlow(flow);
+            }
+            else {
+                this._selectFlow(flow);
+            }
+        }
+    }
+    _selectFlow(flow) {
+        this.selectedIds = [flow._id];
+        dispatchCustomEvent(this, 'select-flows', { flows: this.selectedIds });
+    }
+    _compareFlow(flow) {
+        if (this.selectedIds.length > 0) {
+            this.selectedIds = [...new Set([this.selectedIds[0], flow._id])];
+            dispatchCustomEvent(this, 'select-flows', { flows: this.selectedIds });
+        }
+        else {
+            this._selectFlow(flow);
+        }
+    }
+    _onMouseEnterPolicy(policy) {
+        dispatchCustomEvent(this, 'target-policy', { policy });
+    }
+    _onMouseLeavePolicy() {
+        dispatchCustomEvent(this, 'target-policy', null);
+    }
+    _onMouseEnterFlow(e) {
+        if (this._draggingFlow == null) {
+            e.target.focus();
+        }
+    }
+    _onMouseLeaveFlow(e) {
+        if (this._draggingFlow == null) {
+            e.target.blur();
+        }
+    }
+    _filter(content) {
+        if (this.query) {
+            return content.name.toLowerCase().includes(this.query.toLowerCase());
+        }
+        return true;
+    }
+    hasCompare() {
+        return this.selectedIds.length > 1;
+    }
+    _onChangeFlowState(content, { detail }) {
+        dispatchCustomEvent(this, 'change-flow-state', { content, enabled: detail });
+    }
+    _onDuplicateFlow(content) {
+        dispatchCustomEvent(this, 'duplicate-flow', { content });
+    }
+    _onDeleteFlow(content) {
+        dispatchCustomEvent(this, 'delete-flow', { content });
+    }
+    _renderFlowActions(content, readonlyMode) {
+        if (this.disabled) {
+            return html ``;
+        }
+        const enabled = content.enabled !== false;
+        const stateLabel = enabled ? 'Disable flow ?' : 'Enable flow ?';
+        return html `<div class="actions">
+      ${this.hasCompare() || this.selectedIds.includes(content._id)
+            ? ''
+            : html `<gv-button
+            tabindex="0"
+            link
+            small
+            icon="navigation:route"
+            @gv-button:click="${this._compareFlow.bind(this, content)}"
+            title="Compare"
+          ></gv-button>`}
+      ${this.canAdd && readonlyMode !== true
+            ? html `<gv-button
+              tabindex="0"
+              link
+              small
+              icon="general:duplicate"
+              @gv-button:click="${this._onDuplicateFlow.bind(this, content)}"
+              title="Duplicate"
+            ></gv-button>
+            <gv-button
+              tabindex="0"
+              link
+              small
+              icon="home:trash"
+              @gv-button:click="${this._onDeleteFlow.bind(this, content)}"
+              title="Delete"
+            ></gv-button>`
+            : ''}
+      ${readonlyMode !== true
+            ? html `<gv-switch
+            tabindex="0"
+            small
+            title="${stateLabel}"
+            .value="${enabled}"
+            @gv-switch:input="${this._onChangeFlowState.bind(this, content)}"
+          ></gv-switch>`
+            : ''}
+    </div>`;
+    }
+    _onDragStartFlow(flow, index, event) {
+        const classList = event.target.classList;
+        if (classList && classList.contains('flow')) {
+            classList.remove('hover');
+            classList.add('dragging');
+            this._draggingFlow = { target: event.target, flow, index };
+        }
+    }
+    _onDragEnterFlow(event) {
+        if (event.target.classList &&
+            event.target.classList.contains('flow') &&
+            this._draggingFlow.target.parentElement === event.target.parentElement) {
+            if (event.target.previousSibling !== this._draggingFlow.target) {
+                event.target.parentElement.insertBefore(this._draggingFlow.target, event.target);
+            }
+            else if (event.target.nextSibling) {
+                event.target.parentElement.insertBefore(this._draggingFlow.target, event.target.nextSibling);
+            }
+            else {
+                event.target.parentElement.appendChild(this._draggingFlow.target);
+            }
+            this._draggingFlow.target.classList.remove('dragging');
+        }
+    }
+    _findFlowCollection(flowId) {
+        const plan = this.plans.find((plan) => plan.flows.find((flow) => flow._id === flowId) != null);
+        return { plan, flows: plan != null ? plan.flows : this.flows };
+    }
+    _onDragEndFlow() {
+        this._draggingFlow.target.classList.remove('dragging');
+        const index = [...this._draggingFlow.target.parentElement.querySelectorAll('.flow[draggable="true"]')].indexOf(this._draggingFlow.target);
+        if (index !== this._draggingFlow.index) {
+            const { plan, flows } = this._findFlowCollection(this._draggingFlow.flow._id);
+            const flowToReorder = flows.splice(this._draggingFlow.index, 1)[0];
+            flows.splice(index, 0, flowToReorder);
+            const min = Math.min(this._draggingFlow.index, index);
+            const max = Math.max(this._draggingFlow.index, index);
+            flows.forEach((flow, i) => {
+                if (i >= min && i <= max) {
+                    flow._dirty = true;
+                }
+            });
+            dispatchCustomEvent(this, 'reorder-flows', { plan });
+            setTimeout(() => {
+                this._draggingFlow = null;
+            }, 0);
+            this._draggingFlow.target.focus();
+        }
+    }
+    _onDragOverFlow(e) {
+        e.preventDefault();
+    }
+    _onKeyDownFlow(index, e) {
+        if (e.target.classList.contains('flow') && e.keyCode === 32) {
+            e.preventDefault();
+            this._selectFlow(index);
+        }
+    }
+    _onClickPolicy(policy) {
+        if (!this.disabled) {
+            this.selectedIds = [policy.id];
+            dispatchCustomEvent(this, 'fetch-documentation', { policy });
+        }
+    }
+    _isSelected(id) {
+        return this.selectedIds != null && this.selectedIds.includes(id);
+    }
+    _renderFlows(filteredData, type, isChild, id, open) {
+        const readonlyForFlow = isChild && this.readonlyPlans;
+        return html `<div class="${classMap({ content: true, expandable: true, open })}" id="${id}">
+      ${repeat(filteredData, () => uuid(), (content, index) => html `
+          <div
+            draggable="${this.sortable && !this.disabled && !readonlyForFlow}"
+            tabindex="0"
+            @dragstart="${this._onDragStartFlow.bind(this, content, index)}"
+            @dragenter="${this._onDragEnterFlow}"
+            @dragend="${this._onDragEndFlow}"
+            @dragover="${this._onDragOverFlow}"
+            @keydown="${this._onKeyDownFlow.bind(this, index)}"
+            @mouseenter="${this._onMouseEnterFlow}"
+            @mouseleave="${this._onMouseLeaveFlow}"
+            class="${classMap({
+            entry: true,
+            flow: true,
+            sortable: this.sortable && !this.disabled && !readonlyForFlow,
+            selected: this.selectedIds.includes(content._id),
+            child: isChild,
+            disabled: content.enabled === false,
+        })}"
+          >
+            <div
+              title="${content.name} | Compare with current selection (Shift + click)"
+              @click="${this._onClickFlow.bind(this, content)}"
+              class="entry-name link"
+            >
+              ${getFlowName(content, null, true, this.sortable && !readonlyForFlow, true)}
+            </div>
+            ${this._renderFlowActions(content, this.readonly || readonlyForFlow)}
+          </div>
+        `)}
+    </div> `;
+    }
+    _isDraggable(policy) {
+        return !this.disabled && (this.hasPolicyFilter !== true || policy.onRequest === true || policy.onResponse === true);
+    }
+    _renderPolicies(filteredData, type, isChild, id, group) {
+        return html `<div
+      id="${id}"
+      class="${classMap({
+            content: true,
+            expandable: true,
+            open: true,
+            child: isChild,
+        })}"
+    >
+      ${filteredData.map((content) => {
+            const draggable = this._isDraggable(content);
+            return html `<div
+          class="${classMap({
+                entry: true,
+                link: true,
+                policy: true,
+                selected: this._isSelected(content.id),
+                draggable,
+            })}"
+          draggable="${draggable}"
+          @mouseenter="${this._onMouseEnterPolicy.bind(this, content)}"
+          @mouseleave="${this._onMouseLeavePolicy.bind(this, content)}"
+          @dragstart="${this._onDragStartPolicy.bind(this, content)}"
+          @dragend="${this._onDragEndPolicy}"
+          @click="${this._onClickPolicy.bind(this, content)}"
+          title="Show documentation of ${content.name}"
+        >
+          ${content.icon == null && group != null
+                ? html `<gv-icon class="policy-icon" shape="${this._getGroupShape(group)}"></gv-icon>`
+                : html `<gv-image src="${content.icon}"></gv-image>`}
+          <div class="policy-name">${content.name}</div>
+          ${draggable ? html `<gv-icon class="draggable-icon" shape="design:arrows"></gv-icon>` : html ``}
+        </div>`;
+        })}
+    </div>`;
+    }
+    _getGroupShape(groupName) {
+        if (groupName === 'security') {
+            return 'general:shield-protected';
+        }
+        else if (groupName === 'transformation') {
+            return 'tools:roller';
+        }
+        else if (groupName === 'performance') {
+            return 'general:thunder-move';
+        }
+        else {
+            return 'communication:shield-thunder';
+        }
+    }
+    _renderPart(type, title, icon, data = [], hideIfEmpty, addHandler, groupKey = null, isOpen = true, isChild = false, listId) {
+        let list;
+        const filteredData = data.filter((content) => this._filter(content));
+        if ((hideIfEmpty && data.length > 0) || !hideIfEmpty) {
+            if (groupKey && !isChild) {
+                const groups = [...new Set(filteredData.map((content) => content[groupKey]))];
+                return html `${groups.map((group, index) => {
+                    let groupData = filteredData.filter((data) => data[groupKey] === group);
+                    const listId = group ? group.replace(/\s+/g, '-').toLowerCase() : `group-${index}`;
+                    const anchor = `#${listId}`;
+                    let right = html `<gv-state>${groupData.length}</gv-state>`;
+                    if (addHandler) {
+                        right = html `<gv-button
+              small
+              outlined
+              icon="code:plus"
+              title="Add new flow"
+              @click="${addHandler.bind(this, index, listId)}"
+            ></gv-button>`;
+                    }
+                    if (type === 'flows') {
+                        groupData = groupData[0].flows;
+                    }
+                    return html `<div class="type" @click="${this._onExpand.bind(this, anchor)}">
+              <gv-icon class="expandable-icon" shape="${this._getGroupShape(group)}"></gv-icon>
+              <div class="link type-name">${group || 'No category'}</div>
+              ${right}
+            </div>
+            ${this._renderPart(type, group, icon, groupData, hideIfEmpty, addHandler, groupKey, isOpen, true, listId)}`;
+                })}`;
+            }
+            else {
+                if (listId == null) {
+                    listId = type.replace(/\s+/g, '-').toLowerCase();
+                }
+                if (type === 'flows') {
+                    list = this._renderFlows(filteredData, type, isChild, listId, isOpen);
+                }
+                else {
+                    list = this._renderPolicies(filteredData, type, isChild, listId, title);
+                }
+            }
+            if (isChild) {
+                return html `${list}`;
+            }
+            else {
+                const anchor = `#${listId}`;
+                let action = '';
+                if (addHandler) {
+                    action = html `<gv-button
+            small
+            outlined
+            icon="code:plus"
+            title="Add new flow"
+            @click="${addHandler.bind(this, listId)}"
+          ></gv-button>`;
+                }
+                return html `<div class="type" draggable="false">
+            ${icon ? html `<gv-icon class="expandable-icon" shape="${icon}"></gv-icon>` : ''}
+            <div class="type-name link" @click="${this._onExpand.bind(this, anchor)}">${title}</div>
+            ${action}
+          </div>
+          ${list}`;
+            }
+        }
+        return html ``;
+    }
+    _getListElement(id) {
+        return this.shadowRoot.querySelector(`#${id}`);
+    }
+    _onAddFlowToPlan(index, listId, e) {
+        const list = this._getListElement(listId);
+        list.classList.add('open');
+        e.preventDefault();
+        e.stopPropagation();
+        dispatchCustomEvent(this, 'add-flow-plan', { planIndex: index });
+    }
+    _onAddFlow(listId, e) {
+        const list = this._getListElement(listId);
+        list.classList.add('open');
+        e.preventDefault();
+        e.stopPropagation();
+        dispatchCustomEvent(this, 'add-flow');
+    }
+    render() {
+        return html ` <slot name="header"></slot>
+      <div class="box">
+        ${this.plans != null
+            ? this._renderPart('flows', '', 'shopping:sale#2', this.plans, false, this.canAdd && !this.disabled && !this.readonlyPlans ? this._onAddFlowToPlan : null, 'name')
+            : ``}
+        ${this.flows != null
+            ? this._renderPart('flows', this.flowsTitle, 'shopping:box#3', this.flows, false, this.canAdd && !this.disabled ? this._onAddFlow : null)
+            : ``}
+        ${this.policies != null
+            ? this._renderPart('policies', 'Policies', 'communication:shield-thunder', this.policies, true, null, this.policies.length > 0 && this.policies[0].category != null ? 'category' : null)
+            : ''}
+      </div>
+      <slot name="footer"></slot>`;
+    }
+}
+window.customElements.define('gv-policy-studio-menu', GvPolicyStudioMenu);