@gravitee/ui-components 3.25.3-typescript-fdacf14 → 3.25.3-typescript-493e1dd

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

@@ -1 +1,1712 @@
-var e=Object.create?function(e,t,i,o){void 0===o&&(o=i),Object.defineProperty(e,o,{enumerable:!0,get:function(){return t[i]}})}:function(e,t,i,o){void 0===o&&(o=i),e[o]=t[i]},t=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t},i=function(i){if(i&&i.__esModule)return i;var o={};if(null!=i)for(var s in i)"default"!==s&&Object.prototype.hasOwnProperty.call(i,s)&&e(o,i,s);return t(o,i),o};Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvPolicyStudio=void 0;const o=require("lit"),s=require("../lib/studio"),n=require("../lib/events"),r=require("../lib/i18n");require("../atoms/gv-button"),require("../atoms/gv-icon"),require("../molecules/gv-option"),require("../organisms/gv-documentation"),require("../organisms/gv-resizable-views"),require("../organisms/gv-schema-form"),require("../organisms/gv-http-client"),require("../organisms/gv-tabs"),require("../molecules/gv-row"),require("./gv-flow"),require("./gv-flow-step"),require("./gv-policy-studio-menu");const l=require("../styles/empty"),a=require("lit/directives/cache"),d=require("../lib/utils"),c=require("../mixins/keyboard-element");class h extends((0,c.KeyboardElement)(o.LitElement)){static get properties(){return{policies:{type:Array},services:{type:Object},resourceTypes:{type:Array,attribute:"resource-types"},propertyProviders:{type:Array,attribute:"property-providers"},dynamicPropertySchema:{type:Object,attribute:"dynamic-property-schema"},tabId:{type:String,attribute:"tab-id"},_tabId:{type:String,attribute:!1},definition:{type:Object},_definition:{type:Object,attribute:!1},documentation:{type:Object},flowSchema:{type:Object,attribute:"flow-schema"},configurationSchema:{type:Object,attribute:"configuration-schema"},_configurationSchema:{type:Object,attribute:!1},configurationInformation:{type:String,attribute:"configuration-information"},isDirty:{type:Boolean,attribute:"dirty",reflect:!0},_dragPolicy:{type:Object,attribute:!1},_dropPolicy:{type:Object,attribute:!1},selectedFlowsId:{type:Array,attribute:"selected-flows-id"},_selectedFlowsId:{type:Array,attribute:!1},_currentPolicyId:{type:String,attribute:!1},_searchPolicyQuery:{type:String,attribute:!1},_searchFlowQuery:{type:String,attribute:!1},_flowStepSchema:{type:Object,attribute:!1},_currentFlowStep:{type:Object,attribute:!1},_policyFilter:{type:Array,attribute:!1},_flowFilter:{type:Array,attribute:!1},_currentAskConfirmation:{type:Boolean,attribute:!1},hasProperties:{type:Boolean,attribute:"has-properties"},_hasProperties:{type:Boolean,attribute:!1},hasResources:{type:Boolean,attribute:"has-resources"},hasPolicyFilter:{type:Boolean,attribute:"has-policy-filter"},flowsTitle:{type:String,attribute:"flows-title"},sortable:{type:Boolean},canAdd:{type:Boolean,attribute:"can-add"},readonly:{type:Boolean},readonlyPlans:{type:Boolean,attribute:"readonly-plans"},canDebug:{type:Boolean,attribute:"can-debug"},_canDebug:{type:Boolean,attribute:!1},debugResponse:{type:Object,attribute:"debug-response"},hasConditionalSteps:{type:Boolean,attribute:"has-conditional-steps"}}}static get styles(){return[l.empty,s.methods,o.css`:host{box-sizing:border-box;--height:var(--gv-policy-studio--h, calc(100vh - 32px));height:var(--height);--height-in-tabs:calc(var(--height) - 25px)}.box{height:var(--height);display:flex}.design,.properties{display:flex}gv-resizable-views{width:100%}.editable-name{padding:.5rem 1rem;font-size:16px}.editable-name span{color:#bfbfbf;font-size:12px}.form__control{margin:.5rem}gv-input{width:100%}.flow-name{display:flex;align-items:center}.flow-name.dirty{font-style:italic;opacity:.8}.flow-name gv-icon{--gv-icon--s:24px;margin-right:.2rem}.flow-path{margin-left:.2rem}.title_methods{margin-left:.5rem}.two-cols{display:flex;width:100%;height:100%}.two-cols>*{flex:1}.left-menu{border-left:1px solid #d9d9d9;height:var(--height-in-tabs)}.right-menu{border-right:1px solid #d9d9d9;height:var(--height-in-tabs)}.two-cols>:first-child{border-right:1px solid #d9d9d9}.flow-step__container{overflow:hidden;position:relative;overflow:hidden;height:99%}.flow-step__form{padding:0 .5rem;overflow:auto}.flow-step__form-title{text-transform:uppercase;letter-spacing:.2rem}gv-tabs{width:100%;height:100%;display:inline-block}gv-properties,gv-resizable-views,gv-resources{height:var(--height-in-tabs)}gv-properties,gv-resources{width:100%}gv-properties.properties{--gv-properties-table--colmg:10px}.api-settings{display:flex;flex-direction:column;border-left:1px solid #bfbfbf;height:var(--height-in-tabs)}.debug{display:flex;flex-direction:column;border-left:1px solid #bfbfbf;height:var(--height-in-tabs)}.api-settings-information{display:flex;align-items:center}.api-settings-information__icon{--gv-icon--c:var(--gv-theme-color, #5a7684);--gv-icon-opacity--c:var(--gv-theme-color-info-light, #64b5f6)}.api-settings-information__blockquote,.debug-information__blockquote{border-left:1px solid var(--gv-theme-color,#5a7684);margin:15px;padding-left:15px;font-size:14px}.flow-settings gv-schema-form{flex:1;padding:.5rem}.search{display:flex;justify-content:stretch}gv-input{margin:.2rem 0;width:100%}.header-actions,.search-policies{display:flex;flex-direction:column;align-items:center;margin:.5rem}.search-policies{margin:1.5rem .5rem .5rem}.footer-actions>gv-button.btn-large,.footer-actions>gv-option{width:100%}.footer-actions{display:flex;flex-direction:column;align-items:center;padding:.5rem 0;margin:.5rem 15px;border-top:1px solid #bfbfbf}.header-actions .title{text-transform:uppercase;text-align:center;letter-spacing:.3rem;color:#bfbfbf;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:240px;min-height:25px}.header-actions>*,.search-policies>*{margin-bottom:1rem}`]}constructor(){super(),this.isDirty=!1,this.policies=[],this.resourceTypes=[],this.tabId="design",this.selectedFlowsId=[],this.flowsTitle="Flows",this.sortable=!1,this.services={},this._definition={flows:[]},this._tabs=[{id:"design",title:"Design",icon:"navigation:exchange"}],this._policyFilter=[],this._flowFilter=[]}set hasProperties(e){e&&Promise.resolve().then((()=>i(require("../organisms/gv-properties")))).then((()=>{this._tabs=[...this._tabs,{id:"properties",title:"Properties",icon:"general:settings#1"}],this.requestUpdate()})),this._hasProperties=e}get hasProperties(){return this._hasProperties}set hasResources(e){e&&Promise.resolve().then((()=>i(require("../organisms/gv-resources")))).then((()=>{this._tabs=[...this._tabs,{id:"resources",title:"Resources",icon:"general:settings#5"}],this.requestUpdate()}))}set canDebug(e){e&&(this._tabs=[...this._tabs,{id:"debug",title:"Try it",icon:"content:send"}])}get _flowFilterOptions(){if(this.definedPlans.length>0)return[{id:"api",title:"Api",icon:"shopping:box#3"},{id:"plan",title:"Plans",icon:"shopping:sale#2"}]}set hasPolicyFilter(e){e&&(this._policyFilterOptions=[{id:"onRequest",title:"Request",icon:"navigation:arrow-from-left"},{id:"onResponse",title:"Response",icon:"navigation:arrow-from-right"}])}set configurationSchema(e){e&&this._tabs.splice(1,0,{id:"settings",title:"Configuration",icon:"general:settings#2"}),this._configurationSchema=e}get configurationSchema(){return this._configurationSchema}onKeyboard(){if(null==this._currentAskConfirmation)if(this.isPressed(c.KEYS.Shift,c.KEYS.Ctrl,c.KEYS.Space)){const e=this.shadowRoot.querySelector("#search-policy");e&&e.focus()}else if(this.isPressed(c.KEYS.Ctrl,c.KEYS.Space)){const e=this.shadowRoot.querySelector("#search-flow");e&&e.focus()}}set tabId(e){null!=e&&["design","settings","properties","resources","debug"].includes(e)?this._tabId=e:this._tabId="design"}get tabId(){return this._tabId}set definition(e){if(e){const t=this._generateFlowsId(e.flows),i=this._generateId("resource-",e.resources),o=null==e.plans?[]:e.plans.map((e=>({...e,flows:this._generatePlanFlowsId(e)})));this._initialDefinition={...e,flows:t,resources:i,plans:o},this._definition=(0,d.deepClone)(this._initialDefinition),this.isDirty=!1,this._selectFirstFlow()}}get definition(){return this._definition}set selectedFlowsId(e){null!=e&&Array.isArray(e)&&(this._selectedFlowsId=e.filter((e=>null!=this._findFlowById(e))),e.length!==this._selectedFlowsId.length&&this._selectFirstFlow(!0))}get selectedFlowsId(){return this._selectedFlowsId.filter((e=>null!=this._findFlowById(e)))}_updateSelectedFlows(e){this.selectedFlowsId=e,(0,n.dispatchCustomEvent)(this,"select-flows",{flows:this.selectedFlowsId})}_selectFirstFlow(e=!1){if(0===this.selectedFlowsId.length){let t=null;if(this.definedFlows.length>0&&null!=this.definedFlows[0]._id)t=this.definedFlows[0];else if(this.definedPlans.length>0){const e=this.definedPlans.find((e=>null!=e.flows&&e.flows.length>0&&null!=e.flows[0]._id));e&&(t=e.flows[0])}null!=t&&(e?this._updateSelectedFlows([t._id]):this.selectedFlowsId=[t._id])}}_getFlowElement(e){return this.shadowRoot.querySelector(`[id="${e}"]`)}_onDragEndPolicy(){this.shadowRoot.querySelectorAll("gv-flow").forEach((e=>e.onDragEnd()))}async _onDropPolicy({detail:e}){try{await this._askToValidateForms();const t=e.policy,i=this._findFlowById(e.flowId);let o,s=t.name,n="",r="",l={},a=!1;e.flowStep?(o=e.flowStep._id,s=e.flowStep.name,n=e.flowStep.description||"",r=e.flowStep.condition||"",l=e.flowStep.configuration):(o=this._generateFlowStepId(i._id,e.flowKey,e.position),a=!0);const d={_id:o,_new:a,name:s,policy:t.id,description:n,condition:r,enabled:!0,configuration:l},c=null!=e.sourceFlowId?this._findFlowById(e.sourceFlowId):i;if(null!=e.sourcePosition){if(e.sourceFlowKey&&e.sourceFlowKey!==e.flowKey){if(c[e.sourceFlowKey].splice(e.sourcePosition,1),i[e.flowKey].splice(e.position,0,d),null!=this._currentFlowStep&&this._currentFlowStep.step._id===o){this._currentFlowStep.group=e.flowKey;const t=this.buildSchema(this._currentFlowStep.policy);await this._setCurrentFlowStep(this._currentFlowStep,t,!0),this._getFlowElement(i._id).requestUpdate()}}else e.position>e.sourcePosition?(i[e.flowKey].splice(e.position,0,d),c[e.flowKey].splice(e.sourcePosition,1)):(c[e.flowKey].splice(e.sourcePosition,1),i[e.flowKey].splice(e.position,0,d));i._id!==c._id&&this._getFlowElement(i._id).requestUpdate()}else{i[e.flowKey].splice(e.position,0,d);const o=this._getFlowStepForm();if(null==o||!0!==o.dirty){let o=i[e.flowKey][e.position];null==o&&(o=i[e.flowKey][e.position-1]),!0!==e.cancelEdit&&setTimeout((async()=>{await this._editFlowStep({step:o,policy:t,flow:i,group:e.flowKey}),this.updateComplete.then((()=>{const e=this._getFlowElement(i._id);e.selectedStepId=o._id,e.requestUpdate()}))}))}}i._dirty=!0,c._dirty=!0,this.isDirty=!0,this.shadowRoot.querySelectorAll("gv-flow").forEach((e=>e.removeCandidate())),setTimeout((()=>{this._dragPolicy=null,this._dropPolicy=null}),0)}catch(e){this._currentAskConfirmation=null}}_onDeletePolicy({detail:e}){const t=this._findFlowById(e.flowId);t[e.flowKey].splice(e.position,1),t._dirty=!0,this.isDirty=!0,e.target.editing&&this._closeFlowStepForm(!0),this._getFlowElement(e.flowId).requestUpdate()}_onDesign(){this._changeTab("design"),this._splitMainViews()}buildSchema({schema:e}){const t={title:"Description",description:"Description of flow step",type:"string"},i={title:"Condition",description:"Condition the execution of the flow step (support EL)",type:"string","x-schema-form":{"expression-language":!0}};if(e){const o="string"==typeof e?JSON.parse(e):e,s={commonDescription:t,...this.hasConditionalSteps?{commonCondition:i}:{},...o.properties};return{...o,properties:s}}return{properties:{commonDescription:t,...this.hasConditionalSteps?{commonCondition:i}:{}}}}async _editFlowStep({step:e,flow:t,policy:i,group:o}){if(e){this._currentPolicyId=i.id;const s={flow:t,step:e,policy:i,group:o},n=this.buildSchema(i);try{await this._setCurrentFlowStep(s,n),this._updateSelectedFlows([t._id]),this._splitMainViews(),null==localStorage.getItem("gv-policy-studio:keep-documentation-close")&&this._onOpenDocumentation()}catch(e){this._currentAskConfirmation=null}}else await this._closeFlowStepForm(),this._maximizeTopView()}async _onEditFlowStep({detail:{step:e,flow:t,policy:i,group:o}}){return this._editFlowStep({step:e,flow:t,policy:i,group:o})}_getResizableViews(){return this.shadowRoot.querySelector("gv-resizable-views")}_maximizeTopView(){this.selectedFlowsId.length<=1&&this._getResizableViews().maximizeTop()}_maximizeBottomView(){this._getResizableViews().maximizeBottom()}_splitMainViews(){this._getResizableViews().split()}_onChangeFlowStepState({detail:e}){const t=this._findFlowById(e.flowId);t[e.flowKey][e.position].enabled=e.enabled,t._dirty=!0,this.isDirty=!0}async _onCloseFlowStepForm(){try{await this._closeFlowStepForm()}catch(e){this._currentAskConfirmation=null}}async _closeFlowStepForm(e=!1){await this._setCurrentFlowStep(null,null,e)}async _askToValidateForms(){if(null==this._currentAskConfirmation)return this._currentAskConfirmation=!0,Promise.all(this._submitOrConfirmForms()).then((e=>e.filter((e=>null!=e)).length>0?(this._definition=this._buildDefinitionToSave(),this.getChildren().forEach((e=>e.requestUpdate())),this._checkCurrentFlowStep().then((()=>(this.getChildren().forEach((e=>e.requestUpdate())),this.updateComplete.then((()=>(this._currentAskConfirmation=null,e))))))):(this._currentAskConfirmation=null,e)));throw new Error("ask already waiting")}async _setCurrentFlowStep(e,t,i=!1){i||await this._askToValidateForms();const o=(0,d.deepClone)(t);if(null!=e){const i="string"==typeof e.step.configuration?JSON.parse(e.step.configuration):e.step.configuration,s={...e.step,configuration:i},n={...s.configuration,commonDescription:s.description,commonCondition:s.condition};if(this._currentFlowStep={...e,step:s,_initialValues:n},t&&t.properties.scope){const e=o.properties.scope.enum;if(null!=e.find((e=>["REQUEST","REQUEST_CONTENT","RESPONSE","RESPONSE_CONTENT"].includes(e)))){const t="pre"===this._currentFlowStep.group?["REQUEST","REQUEST_CONTENT"]:["RESPONSE","RESPONSE_CONTENT"];o.properties.scope.enum=e.filter((e=>t.includes(e)));const i=this._currentFlowStep.step.configuration.scope;null!=i&&o.properties.scope.enum.includes(i)||(o.properties.scope.default=o.properties.scope.enum[0],this._currentFlowStep.step.configuration.scope=o.properties.scope.enum[0],this._currentFlowStep._initialValues.scope=o.properties.scope.enum[0],this._currentFlowStep._values&&(this._currentFlowStep._values.scope=o.properties.scope.enum[0]))}}}else this._currentFlowStep=null;this._flowStepSchema=o}_refresh(e=!0){e&&this._closeFlowStepForm(!0),this._definition=(0,d.deepClone)(this._definition)}async _onSelectFlows({detail:e}){try{await this._closeFlowStepForm(),this._onCloseDocumentation(),this._updateSelectedFlows(e.flows),this._onDesign()}catch(e){this._currentAskConfirmation=null}}async _onOpenDocumentationFromMenu({detail:{policy:e}}){try{null!=this.documentation&&this.documentation.id===e.id||(await this._closeFlowStepForm(),this._currentPolicyId=e.id,this.getSelectedFlow()?this._splitMainViews():this._maximizeBottomView(),(0,n.dispatchCustomEvent)(this,"fetch-documentation",{policy:e}))}catch(e){}}_fetchDocumentation(e){null!=this.documentation&&this.documentation.id===e.id||(0,n.dispatchCustomEvent)(this,"fetch-documentation",{policy:e})}_onOpenDocumentation(){this._currentFlowStep&&this._currentFlowStep.policy&&this._fetchDocumentation(this._currentFlowStep.policy)}_onOpenDocumentationFromForm(){localStorage.removeItem("gv-policy-studio:keep-documentation-close"),this._onOpenDocumentation()}_findFlowCollection(e){const t=this.definedPlans.find((t=>null!=t.flows.find((t=>t._id===e))));return{plan:t,flows:null!=t?t.flows:this.definedFlows}}_findFlowById(e){let t=this.definedFlows.find((t=>t._id===e));if(null==t){t=this.definedPlans.map((e=>e.flows)).reduce(((e,t)=>e.concat(t)),[]).find((t=>t._id===e))}return t}getSelectedFlow(e=0){const t=this.selectedFlowsId[e];return this._findFlowById(t)}_onTargetPolicy({detail:e}){null==this._currentAskConfirmation&&(this._dragPolicy=e)}_onChangeFlowStep({detail:e}){this._currentFlowStep._values=e.values}_writeFlowStep(e){const{commonDescription:t,commonCondition:i,...o}=e;if(this._currentFlowStep.step._new||this._currentFlowStep.step.description!==t||this._currentFlowStep.step.condition!==i||!(0,d.deepEqual)(this._currentFlowStep.step.configuration,o)){const e=this._findFlowById(this._currentFlowStep.flow._id),s=e[this._currentFlowStep.group].findIndex((e=>e._id===this._currentFlowStep.step._id));e[this._currentFlowStep.group][s].description=t,e[this._currentFlowStep.group][s].condition=i,e[this._currentFlowStep.group][s].configuration=(0,d.deepClone)(o),delete e[this._currentFlowStep.group][s]._new,e[this._currentFlowStep.group][s]._dirty=!0,e._dirty=!0,this.isDirty=!0,this._currentFlowStep.flow=e,this._currentFlowStep.step=e[this._currentFlowStep.group][s]}}async _onSubmitFlowStep({detail:e}){this._writeFlowStep(e.values),await this.requestUpdate("_definition"),this.getChildren().forEach((e=>e.requestUpdate()))}_onCancelFlow(){this._onDesign()}_onSubmitFlow({detail:{values:e}}){const t=this.getSelectedFlow(),i=Object.assign({},this._createFlowFromSchema(),e),o=Object.assign({},t,i);(0,d.deepEqual)(t,o)||(Object.assign(t,o,{_dirty:!0}),this.isDirty=!0,this._refresh())}_onCancelFlowMode(){this._onDesign()}_onSubmitFlowMode({detail:{values:e}}){this._definition["flow-mode"]=e["flow-mode"]||"DEFAULT",this.isDirty=!0,this._refresh()}_onChangeTab({detail:e}){this._changeTab(e.value)}async _changeTabValidator({from:e,to:t}){if("properties"===e){const e=this.shadowRoot.querySelector("gv-properties");if(e.dirty)return e.confirm()}else if("resources"===e){const e=this.shadowRoot.querySelector("gv-resources");if(e.dirty)return e.confirm()}else try{return await this._askToValidateForms()}catch(e){throw this._currentAskConfirmation=null,e}return Promise.resolve()}_changeTab(e){null==this._currentAskConfirmation&&(this.tabId=e,(0,n.dispatchCustomEvent)(this,"change-tab",this.tabId))}_onDragStartFlowStep(e,{detail:t}){null==this._currentAskConfirmation&&(this._dropPolicy=t,this._dragPolicy=t)}_renderFlowEmptyState(e){return o.html`<div slot="content" class="empty"><div>Select a flow ${!0!==e?o.html`or<gv-button @gv-button:click="${this._onAddFlow}" outlined icon="code:plus" large>design new one</gv-button>`:""}</div></div>`}_renderFlow(e=0,t=!0,i){const s=this.getSelectedFlow(e);if(s){const{plan:e}=this._findFlowCollection(s._id),t=this._currentFlowStep?this._currentFlowStep.step._id:null;return o.html`<gv-flow style="height:100%" .id="${s._id}" .flow="${s}" .plan="${e}" .policies="${this.policies}" slot="content" ?disabled="${this._currentAskConfirmation}" .dragPolicy="${this._dragPolicy}" .dropPolicy="${this._dropPolicy}" .selectedStepId="${t}" ?readonly="${i}" ?has-policy-filter="${null!=this._policyFilterOptions}" flows-title="${this.flowsTitle}" @gv-flow:drag-start="${this._onDragStartFlowStep.bind(this,s)}" @gv-flow:edit="${this._onEditFlowStep}" @gv-flow:change-state="${this._onChangeFlowStepState}" @gv-flow:drop="${this._onDropPolicy}" @gv-flow:delete="${this._onDeletePolicy}"></gv-flow>`}return t?this._renderFlowEmptyState(i):o.html``}_onFetchResources(e){const{currentTarget:t,regexTypes:i}=e.detail,o=this.definedResources.filter((e=>null==i||new RegExp(i).test(e.type))).map(((e,t)=>{const i=this.resourceTypes.find((t=>t.id===e.type)),o=document.createElement("gv-row"),s=i.icon?i.icon:null;return o.item={picture:s,name:e.name},{element:o,value:e.name,id:e.type}}));t.options=o}_renderPolicy(e){return this._flowStepSchema&&this.documentation?o.html`<gv-resizable-views direction="horizontal" no-overflow><div slot="top">${this._renderFlowStepForm(e)}</div><div slot="bottom"><gv-documentation .text="${this.documentation.content}" .image="${this.documentation.image}" ?disabled="${this._currentAskConfirmation}" @gv-documentation:close="${this._onCloseDocumentation}"></gv-documentation></div></gv-resizable-views>`:this.documentation?o.html`<gv-documentation .text="${this.documentation.content}" .image="${this.documentation.image}" ?disabled="${this._currentAskConfirmation}" @gv-documentation:close="${this._onCloseDocumentation}"></gv-documentation>`:this._flowStepSchema?this._renderFlowStepForm(e):o.html``}_getFlowStepForm(){return this.shadowRoot.querySelector("#flow-step-form")}_onResetFlowStep(){this._currentFlowStep&&(delete this._currentFlowStep._values,this._getFlowStepForm().reset())}_generateFlowsId(e,t=!1){return this._generateId("f",e,t,!0)}_generatePlanFlowsId(e,t=!1){return this._generateId(e.id,e.flows,t,!0)}_generateFlowStepId(e,t,i){return`${e}_${t}_${i}`}_generateId(e,t,i=!1,o=!1){return t?t.map(((t,s)=>{const n=`${e}_${s}`;return o&&(t.pre&&t.pre.forEach(((e,t)=>e._id=this._generateFlowStepId(n,"pre",t))),t.post&&t.post.forEach(((e,t)=>e._id=this._generateFlowStepId(n,"post",t)))),i||null==t._id?{...t,_id:n}:t})):t}getChildren(){return[...Array.from(this.shadowRoot.querySelectorAll("gv-flow")),...Array.from(this.shadowRoot.querySelectorAll("gv-resizable-views"))]}async getUpdateComplete(){await super.getUpdateComplete(),await Promise.all(this.getChildren().map((e=>e.updateComplete)))}shouldUpdate(e){return e.has("_dragPolicy")?(this.shadowRoot.querySelectorAll("gv-flow").forEach((e=>e.dragPolicy=this._dragPolicy)),!1):e.has("_dropPolicy")?(this.shadowRoot.querySelectorAll("gv-flow").forEach((e=>e.dropPolicy=this._dropPolicy)),!1):super.shouldUpdate(e)}updated(e){e.has("documentation")&&null!=this.documentation&&this.selectedFlowsId.length>1&&this._updateSelectedFlows([this.selectedFlowsId[0]])}_renderFlowStepForm(e){const t=this._currentFlowStep._values||this._currentFlowStep._initialValues,i=[{items:["commonDescription","commonCondition"]},{name:(0,r.i18n)("gv-policy-studio.policy-settings"),default:!0}];return o.html`${(0,a.cache)(this._flowStepSchema&&this._currentFlowStep?o.html`<div class="flow-step__container"><div class="flow-step__form"><gv-schema-form .id="${"flow-step-form"}" .schema="${this._flowStepSchema}" .icon="design:edit" has-header validate-on-render .values="${t}" .dirty="${null!=this._currentFlowStep._values}" ?readonly="${e}" scrollable .groups="${i}" @gv-schema-form:change="${this._onChangeFlowStep}" @gv-schema-form:reset="${this._onResetFlowStep}" @gv-schema-form:fetch-resources="${this._onFetchResources}" @gv-schema-form:submit="${this._onSubmitFlowStep}"><div slot="title" class="flow-step__form-title">${this._currentFlowStep.step.name}</div><gv-button slot="header-left" icon="general:close" outlined small @gv-button:click="${this._onCloseFlowStepForm}" title="Close"></gv-button><gv-button slot="header-left" icon="home:book" ?disabled="${null!=this.documentation}" outlined small @gv-button:click="${this._onOpenDocumentationFromForm}" title="Open documentation"></gv-button></gv-schema-form></div></div>`:"")}`}_onCloseDocumentation(){this.documentation=null,null==this._currentFlowStep?this._maximizeTopView():localStorage.setItem("gv-policy-studio:keep-documentation-close",!0)}_onDeleteFlow({detail:e}){const t=e.content._id,{flows:i}=this._findFlowCollection(t),o=i.find((e=>e._id===t));this._deleteFlow(i,o)}get definedFlows(){return this._definition&&this._definition.flows?this._definition.flows:[]}get definedPlans(){return this._definition&&this._definition.plans?this._definition.plans:[]}get definedResources(){return this._definition&&this._definition.resources?this._definition.resources:[]}get definedProperties(){return this._definition&&this._definition.properties?this._definition.properties:[]}async _onDuplicateFlow({detail:e}){try{await this._askToValidateForms();const t=e.content._id,{plan:i,flows:o}=this._findFlowCollection(t);if(this._addFlow(o,this._findFlowById(t)),null!=i){let e=null;this.definedPlans.find(((t,o)=>t.id===i.id&&(e=o,!0))),i.flows=o,this.definedPlans[e].flows=this._generatePlanFlowsId(i,!0),this._updateSelectedFlows([this.definedPlans[e].flows[o.length-1]._id])}else this._definition.flows=this._generateFlowsId(this._definition.flows),this._updateSelectedFlows([this._definition.flows[this._definition.flows.length-1]._id])}catch(e){this._currentAskConfirmation=null}}_onChangeFlowState({detail:e}){const t=this._findFlowById(e.content._id);t.enabled=e.enabled,t._dirty=!0,this.isDirty=!0}async _onAddFlowPlan({detail:e}){try{await this._askToValidateForms(),this._addFlow(this.definedPlans[e.planIndex].flows),this.definedPlans[e.planIndex].flows=this._generatePlanFlowsId(this.definedPlans[e.planIndex]),this._updateSelectedFlows([this.definedPlans[e.planIndex].flows[this.definedPlans[e.planIndex].flows.length-1]._id])}catch(e){this._currentAskConfirmation=null}}async _onAddFlow(){try{await this._askToValidateForms(),this._addFlow(this._definition.flows),this._definition.flows=this._generateFlowsId(this._definition.flows),this._updateSelectedFlows([this._definition.flows[this._definition.flows.length-1]._id])}catch(e){this._currentAskConfirmation=null}}_addFlow(e,t=null){const i=null==t?this._createFlowFromSchema():{...t,_id:null,id:null,_dirty:!0};return e.push(i),this.isDirty=!0,e}_createFlowFromSchema(){return this._instantiate(this.flowSchema.properties,{name:"",pre:[],post:[],_dirty:!0})}_instantiate(e,t={}){const i={...t};if(e)for(const o of Object.keys(e)){const s=e[o];"object"===s.type&&(i[o]=this._instantiate(s.properties,t={})),void 0!==s.default?i[o]=s.default:"string"===s.type&&(i[o]="")}return i}_deleteFlow(e,t){const i=e.indexOf(t);e.splice(i,1);const o=this.selectedFlowsId.filter((e=>e!==t._id));1===o.length?this._updateSelectedFlows(o):this._selectFirstFlow(!0),this._changeTab("design"),this._refresh(),this.isDirty=!0}_findFlowIndex(e,t){let i=null;return e.find(((e,o)=>e._id===t&&(i=o,!0))),i}async _onReorderFlows({detail:{plan:e}}){try{if(await this._askToValidateForms(),this.isDirty=!0,null!=e){const t=this._generatePlanFlowsId(e,!0);this.selectedFlowsId&&this._updateSelectedFlows(this.selectedFlowsId.map((i=>{const o=this._findFlowIndex(e.flows,i);return null!=o?t[o]._id:i}))),e.flows=t}else{const e=this._generateFlowsId(this._definition.flows,!0);this.selectedFlowsId&&this._updateSelectedFlows(this.selectedFlowsId.map((t=>{const i=this._findFlowIndex(this._definition.flows,t);return null!=i?e[i]._id:t}))),this._definition.flows=e}}catch(e){this._currentAskConfirmation=!1}}_onSearchPolicy({detail:e}){this._searchPolicyQuery=e}_onClearPolicy(){this._searchPolicyQuery=null}_onSearchFlows({detail:e}){this._searchFlowQuery=e}_onClearFlows(){this._searchFlowQuery=null}async _onResetAll(){try{await this._closeFlowStepForm(),this.definition=(0,d.deepClone)(this._initialDefinition)}catch(e){this._currentAskConfirmation=null}}_filterNotValidStep(e){return!0!==e._new}_removePrivateProperties(e){const t={...e};return Object.keys(e).filter((e=>e.startsWith("_"))).forEach((e=>{delete t[e]})),t}_submitOrConfirmForms(){return[...this.shadowRoot.querySelectorAll("gv-schema-form")].filter((e=>{const t=e.isValid();return t?e.submit():e.dirty=!0,!t})).map((e=>e.confirm()))}getPropertiesElement(){return this.shadowRoot.querySelector("gv-properties")}async _checkCurrentFlowStep(){if(this._currentFlowStep&&this.selectedFlowsId){const e=this.selectedFlowsId.map((e=>{const t=this._findFlowById(e);return null==[...t.pre,...t.post].find((e=>e._id===this._currentFlowStep.step._id))?this._closeFlowStepForm(!0):null})).filter((e=>null!==e));return Promise.all(e)}return Promise.resolve()}saved(){this.isDirty&&(this._initialDefinition=(0,d.deepClone)(this._definitionSaved),this._definition=(0,d.deepClone)(this._definitionSaved),this._definitionSaved=null,this.isDirty=!1,this._checkCurrentFlowStep(),this.definedPlans.forEach((e=>{e.flows.forEach((e=>e._dirty=!1))})),this.definedFlows.forEach((e=>e._dirty=!1)),this.getChildren().forEach((e=>e.requestUpdate())))}_buildDefinitionToSave(){const e=this._definition.flows.map((e=>(e.pre=e.pre.filter(this._filterNotValidStep),e.post=e.post.filter(this._filterNotValidStep),e)));let t={...this._definition,flows:e};if(null!=this._definition.plans){const e=this._definition.plans.map((e=>{const t=e.flows.map((e=>(e.pre=e.pre.filter(this._filterNotValidStep),e.post=e.post.filter(this._filterNotValidStep),e)));return{...e,flows:t}}));t={...t,plans:e}}return t}_buildDefinitionToSend(e){const t=e.flows.map((e=>{const t=this._removePrivateProperties(e);return t.pre=t.pre.map(this._removePrivateProperties),t.post=t.post.map(this._removePrivateProperties),t}));let i={...this._definition,flows:t};if(null!=this._definition.plans){const t=e.plans.map((e=>{const t=e.flows.map((e=>{const t=this._removePrivateProperties(e);return t.pre=t.pre.map(this._removePrivateProperties),t.post=t.post.map(this._removePrivateProperties),t}));return{...e,flows:t}}));i={...i,plans:t}}if(null!=this._definition.properties){const e=this._definition.properties.map(this._removePrivateProperties);i={...i,properties:e}}if(null!=this._definition.resources){const e=this._definition.resources.map(this._removePrivateProperties);i={...i,resources:e}}return i}_onSaveAll(){this.hasProperties&&this.getPropertiesElement().submit(),Promise.all(this._submitOrConfirmForms()).then((()=>{this._definitionSaved=this._buildDefinitionToSave();const e=this._buildDefinitionToSend(this._definitionSaved);(0,n.dispatchCustomEvent)(this,"save",{definition:e,services:this.services})})).catch((e=>{console.error("[policy-studio] Error on save",e)}))}_onDebug(e){this.hasProperties&&this.getPropertiesElement().submit(),Promise.all(this._submitOrConfirmForms()).then((()=>{const t=this._buildDefinitionToSend(this._buildDefinitionToSave());(0,n.dispatchCustomEvent)(this,"debug",{definition:t,services:this.services,request:e.detail.request})})).catch((e=>{console.error("[policy-studio] Error on debug",e)}))}get filteredFlows(){return 0===this._flowFilter.length||this._flowFilter.includes("api")?this.definedFlows:null}get filteredPlans(){return 0===this._flowFilter.length||this._flowFilter.includes("plan")?this.definedPlans:null}_onFilterFlows({detail:e}){this._flowFilter.includes(e.id)?this._flowFilter=[]:this._flowFilter=[e.id]}_getFilteredPolicies(){return this._policyFilter.length>0?this.policies.filter((e=>e.onRequest&&this._policyFilter.includes("onRequest")||e.onResponse&&this._policyFilter.includes("onResponse"))):this.policies}_onFilterPolicies({detail:e}){this._policyFilter.includes(e.id)?this._policyFilter=[]:this._policyFilter=[e.id]}_renderDesign(e){return o.html`<div id="design" slot="content" class="design"><gv-resizable-views no-overflow><div slot="top">${this._renderFlow(0,!0,e)}</div><div slot="bottom">${this._renderFlow(1,!1,e)} ${this._renderPolicy(e)} ${this._renderFlowForm(e)}</div></gv-resizable-views>${!0!==e?o.html`<gv-policy-studio-menu class="right-menu" ?disabled="${this._currentAskConfirmation}" .policies="${this._getFilteredPolicies()}" .selectedIds="${[this._currentPolicyId]}" .query="${this._searchPolicyQuery}" ?has-policy-filter="${null!=this._policyFilterOptions}" ?readonly="${e}" @gv-policy-studio-menu:target-policy="${this._onTargetPolicy}" @gv-policy-studio-menu:fetch-documentation="${this._onOpenDocumentationFromMenu}" @gv-policy-studio-menu:dragend-policy="${this._onDragEndPolicy}"><div slot="header" class="search-policies">${null!=this._policyFilterOptions?o.html`<gv-option ?disabled="${this._currentAskConfirmation}" .options="${this._policyFilterOptions}" multiple="multiple" outlined .value="${this._policyFilter}" small @gv-option:select="${this._onFilterPolicies}"></gv-option>`:""}<gv-input id="search-policy" ?disabled="${this._currentAskConfirmation}" placeholder="Filter policies (Shift + Ctrl + Space)" type="search" small @gv-input:input="${this._onSearchPolicy}" @gv-input:clear="${this._onClearPolicy}"></gv-input></div></gv-policy-studio-menu>`:""}</div>`}_renderDebug(){const e=this.debugResponse?this.debugResponse.response:void 0,t=this.debugResponse?this.debugResponse.isLoading:void 0,i=this.debugResponse&&this.debugResponse.request?this.debugResponse.request.path:void 0,s=this.debugResponse&&this.debugResponse.request?this.debugResponse.request.method:void 0;return o.html`<gv-http-client id="debug" slot="content" class="debug" @gv-http-client:send="${this._onDebug}" .response="${e}" .path="${i}" .method="${s}" ?loading="${t}"></gv-http-client>`}_renderConfigurationForm(e){if(this.configurationSchema){const t=(0,d.deepClone)(this._definition);return o.html`<div id="settings" slot="content" class="api-settings" @dragover="${this._onDesign}"><gv-schema-form .schema="${this.configurationSchema}" id="api-settings-form" .values="${t}" has-header has-footer scrollable ?readonly="${e}" @gv-schema-form:cancel="${this._onCancelFlowMode}" @gv-schema-form:submit="${this._onSubmitFlowMode}">${this.configurationInformation?o.html`<div class="api-settings-information" slot="title"><gv-icon class="api-settings-information__icon" title="Info" shape="code:info"></gv-icon><blockquote class="api-settings-information__blockquote">${this.configurationInformation}</blockquote></div>`:""}</gv-schema-form></div>`}return o.html``}_renderFlowForm(e){if(this.flowSchema&&null==this._flowStepSchema&&null==this.documentation&&1===this.selectedFlowsId.length){const t=this.getSelectedFlow();if(t){const i=(0,d.deepClone)(t);return o.html`<div slot="content" class="flow-settings"><gv-schema-form .schema="${this.flowSchema}" id="settings-form" .values="${i}" has-header scrollable ?readonly="${e}" @gv-schema-form:cancel="${this._onCancelFlow}" @gv-schema-form:submit="${this._onSubmitFlow}"><div slot="title" class="flow-step__form-title">Flow configuration</div></gv-schema-form></div>`}}}_onResourcesChange({detail:e}){this.definition.resources=e.resources,this.isDirty=!0}_onPropertiesChange({detail:e}){this.definition.properties=e.properties,this.isDirty=!0}_onSaveProvider({detail:e}){this.services["dynamic-property"]=e.provider,this.isDirty=!0}_onSwitchEncryptedProperty({detail:e}){this.isDirty=!0}render(){const e=this._getReadonlyModeForDesign();return o.html`<div class="box"><gv-policy-studio-menu class="left-menu" .api-name="${this._definition.name}" .flows="${this.filteredFlows}" .plans="${this.filteredPlans}" .selectedIds="${this.selectedFlowsId}" ?disabled="${this._currentAskConfirmation}" ?sortable="${this.sortable&&!0!==this.readonly}" ?readonly="${this.readonly}" ?readonlyPlans="${this.readonlyPlans}" flows-title="${this.flowsTitle}" .query="${this._searchFlowQuery}" ?can-add="${this.canAdd&&!this.readonly}" @gv-policy-studio-menu:reorder-flows="${this._onReorderFlows}" @gv-policy-studio-menu:change-flow-state="${this._onChangeFlowState}" @gv-policy-studio-menu:add-flow="${this._onAddFlow}" @gv-policy-studio-menu:add-flow-plan="${this._onAddFlowPlan}" @gv-policy-studio-menu:delete-flow="${this._onDeleteFlow}" @gv-policy-studio-menu:duplicate-flow="${this._onDuplicateFlow}" @gv-policy-studio-menu:select-flows="${this._onSelectFlows}"><div slot="header" class="header-actions"><div class="title">${this._definition.name}</div>${null!=this._flowFilterOptions?o.html`<gv-option ?disabled="${this._currentAskConfirmation}" .options="${this._flowFilterOptions}" multiple="multiple" outlined .value="${this._flowFilter}" small @gv-option:select="${this._onFilterFlows}"></gv-option>`:""}<gv-input ?disabled="${this._currentAskConfirmation}" id="search-flow" placeholder="Filter flows (Ctrl + Space)" type="search" small @gv-input:input="${this._onSearchFlows}" @gv-input:clear="${this._onClearFlows}"></gv-input></div>${!0!==this.readonly?o.html`<div slot="footer" class="footer-actions"><gv-button class="btn-large" .disabled="${!this.isDirty||this._currentAskConfirmation}" @gv-button:click="${this._onSaveAll}">Save</gv-button><gv-button link .disabled="${!this.isDirty||this._currentAskConfirmation}" @gv-button:click="${this._onResetAll}">Reset</gv-button></div>`:""}</gv-policy-studio-menu><gv-tabs .value="${this.tabId}" .options="${this._tabs}" .disabled="${this._currentAskConfirmation}" @gv-tabs:change="${this._onChangeTab}" .validator="${this._changeTabValidator.bind(this)}">${this._renderDesign(e)} ${this._renderConfigurationForm(e)} ${this._renderDebug()}<gv-properties id="properties" slot="content" class="properties" .provider="${this.services["dynamic-property"]}" @gv-properties:change="${this._onPropertiesChange}" @gv-properties:save-provider="${this._onSaveProvider}" @gv-properties:switch-encrypted="${this._onSwitchEncryptedProperty}" ?readonly="${e}" encryptable="true" .properties="${this.definedProperties}" .providers="${this.propertyProviders}" .dynamicPropertySchema="${this.dynamicPropertySchema}"></gv-properties><gv-resources id="resources" slot="content" class="resources" @gv-resources:change="${this._onResourcesChange}" ?readonly="${e}" .resources="${this.definedResources}" .types="${this.resourceTypes}"></gv-resources></gv-tabs></div>`}_getReadonlyModeForDesign(){if(this.readonly)return!0;const e=this.getSelectedFlow(0);if(!e)return!1;const{plan:t}=this._findFlowCollection(e._id);if(t&&this.readonlyPlans)return!0;const i=this.getSelectedFlow(1);if(!i)return!1;const{plan:o}=this._findFlowCollection(i._id);return o&&this.readonlyPlans}}exports.GvPolicyStudio=h,window.customElements.define("gv-policy-studio",h);
+/*
+ * 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 { css, html, LitElement } from 'lit';
+import { methods } from '../lib/studio';
+import { dispatchCustomEvent } from '../lib/events';
+import { i18n } from '../lib/i18n';
+import '../atoms/gv-button';
+import '../atoms/gv-icon';
+import '../molecules/gv-option';
+import '../organisms/gv-documentation';
+import '../organisms/gv-resizable-views';
+import '../organisms/gv-schema-form';
+import '../organisms/gv-http-client';
+import '../organisms/gv-tabs';
+import '../molecules/gv-row';
+import './gv-flow';
+import './gv-flow-step';
+import './gv-policy-studio-menu';
+import { empty } from '../styles/empty';
+import { cache } from 'lit/directives/cache';
+import { deepClone, deepEqual } from '../lib/utils';
+import { KeyboardElement, KEYS } from '../mixins/keyboard-element';
+const FLOW_STEP_FORM_ID = 'flow-step-form';
+/**
+ *  Studio Policy component
+ *
+ * ⚠️ This component is based on `asciidoctor`, `highlight.js` and `asciidoctor-highlight.js`.
+ * To use this component in your project be sure the dependencies are installed or
+ * install them with: `npm install asciidoctor highlight.js asciidoctor-highlight.js --save`
+ *
+ * @fires gv-policy-studio:select-policy - Select policy event
+ * @fires gv-policy-studio:save - Event sent when "Save" button is clicked, it contains the whole definition of the API
+ * @fires gv-policy-studio:debug - Event sent when validation button of the 'Try it' tab is clicked, it contains the whole definition of the API and the information about the try it request.
+ *
+ * @attr {Array} policies - Policies available
+ * @attr {Array} services - Services available
+ * @attr {Array} resourceTypes - Resources types available
+ * @attr {Array} propertyProviders - Providers of properties
+ * @attr {Array} dynamicPropertySchema - Schema for the dynamic property form
+ * @attr {String} tabId - Current tabId to display (design, settings, properties or resources)
+ * @attr {Object} definition - The definition of flows
+ * @attr {Object} documentation - The documentation to display
+ * @attr {Object} flowSchema - The flow form configuration to display in gv-schema-form component
+ * @attr {Object} configurationSchema - The form configuration to display in gv-schema-form component
+ * @attr {Object} configurationInformation - The information related to api configuration tab
+ * @attr {Boolean} isDirty - true if component is dirty
+ * @attr {Array} selectedFlowsId - The selected flows id
+ * @attr {Boolean} sortable - true if flows are sortable
+ * @attr {Boolean} readonly - true if readonly
+ * @attr {Boolean} readonly-plans - true if plans' flows can't be modified
+ * @attr {Boolean} can-add - true if user can add flow
+ * @attr {String} flowsTitle - flows menu title
+ * @attr {Boolean} has-policy-filter - true if policies have onRequest/onResponse properties
+ * @attr {Boolean} can-debug - true if debug tab should be displayed
+ * @attr {Object} debugResponse - true if debug tab should be displayed
+ * @attr {Boolean} has-conditional-steps - true if steps can be conditioned
+ */
+export class GvPolicyStudio extends KeyboardElement(LitElement) {
+    static get properties() {
+        return {
+            policies: { type: Array },
+            services: { type: Object },
+            resourceTypes: { type: Array, attribute: 'resource-types' },
+            propertyProviders: { type: Array, attribute: 'property-providers' },
+            dynamicPropertySchema: { type: Object, attribute: 'dynamic-property-schema' },
+            tabId: { type: String, attribute: 'tab-id' },
+            _tabId: { type: String, attribute: false },
+            definition: { type: Object },
+            _definition: { type: Object, attribute: false },
+            documentation: { type: Object },
+            flowSchema: { type: Object, attribute: 'flow-schema' },
+            configurationSchema: { type: Object, attribute: 'configuration-schema' },
+            _configurationSchema: { type: Object, attribute: false },
+            configurationInformation: { type: String, attribute: 'configuration-information' },
+            isDirty: { type: Boolean, attribute: 'dirty', reflect: true },
+            _dragPolicy: { type: Object, attribute: false },
+            _dropPolicy: { type: Object, attribute: false },
+            selectedFlowsId: { type: Array, attribute: 'selected-flows-id' },
+            _selectedFlowsId: { type: Array, attribute: false },
+            _currentPolicyId: { type: String, attribute: false },
+            _searchPolicyQuery: { type: String, attribute: false },
+            _searchFlowQuery: { type: String, attribute: false },
+            _flowStepSchema: { type: Object, attribute: false },
+            _currentFlowStep: { type: Object, attribute: false },
+            _policyFilter: { type: Array, attribute: false },
+            _flowFilter: { type: Array, attribute: false },
+            _currentAskConfirmation: { type: Boolean, attribute: false },
+            hasProperties: { type: Boolean, attribute: 'has-properties' },
+            _hasProperties: { type: Boolean, attribute: false },
+            hasResources: { type: Boolean, attribute: 'has-resources' },
+            hasPolicyFilter: { type: Boolean, attribute: 'has-policy-filter' },
+            flowsTitle: { type: String, attribute: 'flows-title' },
+            sortable: { type: Boolean },
+            canAdd: { type: Boolean, attribute: 'can-add' },
+            readonly: { type: Boolean },
+            readonlyPlans: { type: Boolean, attribute: 'readonly-plans' },
+            canDebug: { type: Boolean, attribute: 'can-debug' },
+            _canDebug: { type: Boolean, attribute: false },
+            debugResponse: { type: Object, attribute: 'debug-response' },
+            hasConditionalSteps: { type: Boolean, attribute: 'has-conditional-steps' },
+        };
+    }
+    static get styles() {
+        return [
+            empty,
+            methods,
+            // language=CSS
+            css `
+        :host {
+          box-sizing: border-box;
+          --height: var(--gv-policy-studio--h, calc(100vh - 32px));
+          height: var(--height);
+          --height-in-tabs: calc(var(--height) - 25px);
+        }
+
+        .box {
+          height: var(--height);
+          display: flex;
+        }
+
+        .design,
+        .properties {
+          display: flex;
+        }
+
+        gv-resizable-views {
+          width: 100%;
+        }
+
+        .editable-name {
+          padding: 0.5rem 1rem;
+          font-size: 16px;
+        }
+
+        .editable-name span {
+          color: #bfbfbf;
+          font-size: 12px;
+        }
+
+        .form__control {
+          margin: 0.5rem;
+        }
+
+        gv-input {
+          width: 100%;
+        }
+
+        .flow-name {
+          display: flex;
+          align-items: center;
+        }
+
+        .flow-name.dirty {
+          font-style: italic;
+          opacity: 0.8;
+        }
+
+        .flow-name gv-icon {
+          --gv-icon--s: 24px;
+          margin-right: 0.2rem;
+        }
+
+        .flow-path {
+          margin-left: 0.2rem;
+        }
+
+        .title_methods {
+          margin-left: 0.5rem;
+        }
+
+        .two-cols {
+          display: flex;
+          width: 100%;
+          height: 100%;
+        }
+
+        .two-cols > * {
+          flex: 1;
+        }
+
+        .left-menu {
+          border-left: 1px solid #d9d9d9;
+          height: var(--height-in-tabs);
+        }
+
+        .right-menu {
+          border-right: 1px solid #d9d9d9;
+          height: var(--height-in-tabs);
+        }
+
+        .two-cols > *:first-child {
+          border-right: 1px solid #d9d9d9;
+        }
+
+        .flow-step__container {
+          overflow: hidden;
+          position: relative;
+          overflow: hidden;
+          height: 99%;
+        }
+
+        .flow-step__form {
+          padding: 0 0.5rem;
+          overflow: auto;
+        }
+
+        .flow-step__form-title {
+          text-transform: uppercase;
+          letter-spacing: 0.2rem;
+        }
+
+        gv-tabs {
+          width: 100%;
+          height: 100%;
+          display: inline-block;
+        }
+
+        gv-resizable-views,
+        gv-properties,
+        gv-resources {
+          height: var(--height-in-tabs);
+        }
+
+        gv-properties,
+        gv-resources {
+          width: 100%;
+        }
+
+        gv-properties.properties {
+          --gv-properties-table--colmg: 10px;
+        }
+
+        .api-settings {
+          display: flex;
+          flex-direction: column;
+          border-left: 1px solid #bfbfbf;
+          height: var(--height-in-tabs);
+        }
+
+        .debug {
+          display: flex;
+          flex-direction: column;
+          border-left: 1px solid #bfbfbf;
+          height: var(--height-in-tabs);
+        }
+
+        .api-settings-information {
+          display: flex;
+          align-items: center;
+        }
+
+        .api-settings-information__icon {
+          --gv-icon--c: var(--gv-theme-color, #5a7684);
+          --gv-icon-opacity--c: var(--gv-theme-color-info-light, #64b5f6);
+        }
+
+        .api-settings-information__blockquote,
+        .debug-information__blockquote {
+          border-left: 1px solid var(--gv-theme-color, #5a7684);
+          margin: 15px;
+          padding-left: 15px;
+          font-size: 14px;
+        }
+
+        .flow-settings gv-schema-form {
+          flex: 1;
+          padding: 0.5rem;
+        }
+
+        .search {
+          display: flex;
+          justify-content: stretch;
+        }
+
+        gv-input {
+          margin: 0.2rem 0;
+          width: 100%;
+        }
+
+        .header-actions,
+        .search-policies {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          margin: 0.5rem;
+        }
+
+        .search-policies {
+          margin: 1.5rem 0.5rem 0.5rem;
+        }
+
+        .footer-actions > gv-button.btn-large,
+        .footer-actions > gv-option {
+          width: 100%;
+        }
+
+        .footer-actions {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          padding: 0.5rem 0;
+          margin: 0.5rem 15px;
+          border-top: 1px solid #bfbfbf;
+        }
+
+        .header-actions .title {
+          text-transform: uppercase;
+          text-align: center;
+          letter-spacing: 0.3rem;
+          color: #bfbfbf;
+          font-size: 18px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          width: 240px;
+          min-height: 25px;
+        }
+
+        .header-actions > *,
+        .search-policies > * {
+          margin-bottom: 1rem;
+        }
+      `,
+        ];
+    }
+    constructor() {
+        super();
+        this.isDirty = false;
+        this.policies = [];
+        this.resourceTypes = [];
+        this.tabId = 'design';
+        this.selectedFlowsId = [];
+        this.flowsTitle = 'Flows';
+        this.sortable = false;
+        this.services = {};
+        this._definition = {
+            flows: [],
+        };
+        this._tabs = [{ id: 'design', title: 'Design', icon: 'navigation:exchange' }];
+        this._policyFilter = [];
+        this._flowFilter = [];
+    }
+    set hasProperties(value) {
+        if (value) {
+            import('../organisms/gv-properties').then(() => {
+                this._tabs = [...this._tabs, { id: 'properties', title: 'Properties', icon: 'general:settings#1' }];
+                this.requestUpdate();
+            });
+        }
+        this._hasProperties = value;
+    }
+    get hasProperties() {
+        return this._hasProperties;
+    }
+    set hasResources(value) {
+        if (value) {
+            import('../organisms/gv-resources').then(() => {
+                this._tabs = [...this._tabs, { id: 'resources', title: 'Resources', icon: 'general:settings#5' }];
+                this.requestUpdate();
+            });
+        }
+    }
+    set canDebug(value) {
+        if (value) {
+            this._tabs = [...this._tabs, { id: 'debug', title: 'Try it', icon: 'content:send' }];
+        }
+    }
+    get _flowFilterOptions() {
+        if (this.definedPlans.length > 0) {
+            return [
+                { id: 'api', title: 'Api', icon: 'shopping:box#3' },
+                { id: 'plan', title: 'Plans', icon: 'shopping:sale#2' },
+            ];
+        }
+    }
+    set hasPolicyFilter(value) {
+        if (value) {
+            this._policyFilterOptions = [
+                { id: 'onRequest', title: 'Request', icon: 'navigation:arrow-from-left' },
+                { id: 'onResponse', title: 'Response', icon: 'navigation:arrow-from-right' },
+            ];
+        }
+    }
+    set configurationSchema(value) {
+        if (value) {
+            this._tabs.splice(1, 0, { id: 'settings', title: 'Configuration', icon: 'general:settings#2' });
+        }
+        this._configurationSchema = value;
+    }
+    get configurationSchema() {
+        return this._configurationSchema;
+    }
+    onKeyboard() {
+        if (this._currentAskConfirmation == null) {
+            if (this.isPressed(KEYS.Shift, KEYS.Ctrl, KEYS.Space)) {
+                const search = this.shadowRoot.querySelector('#search-policy');
+                if (search) {
+                    search.focus();
+                }
+            }
+            else if (this.isPressed(KEYS.Ctrl, KEYS.Space)) {
+                const search = this.shadowRoot.querySelector('#search-flow');
+                if (search) {
+                    search.focus();
+                }
+            }
+        }
+    }
+    set tabId(tabId) {
+        if (tabId != null && ['design', 'settings', 'properties', 'resources', 'debug'].includes(tabId)) {
+            this._tabId = tabId;
+        }
+        else {
+            this._tabId = 'design';
+        }
+    }
+    get tabId() {
+        return this._tabId;
+    }
+    set definition(definition) {
+        if (definition) {
+            const flows = this._generateFlowsId(definition.flows);
+            const resources = this._generateId('resource-', definition.resources);
+            const plans = definition.plans == null
+                ? []
+                : definition.plans.map((plan) => {
+                    return { ...plan, flows: this._generatePlanFlowsId(plan) };
+                });
+            this._initialDefinition = { ...definition, flows, resources, plans };
+            this._definition = deepClone(this._initialDefinition);
+            this.isDirty = false;
+            this._selectFirstFlow();
+        }
+    }
+    get definition() {
+        return this._definition;
+    }
+    set selectedFlowsId(selectedFlowsId) {
+        if (selectedFlowsId != null && Array.isArray(selectedFlowsId)) {
+            this._selectedFlowsId = selectedFlowsId.filter((id) => this._findFlowById(id) != null);
+            if (selectedFlowsId.length !== this._selectedFlowsId.length) {
+                this._selectFirstFlow(true);
+            }
+        }
+    }
+    get selectedFlowsId() {
+        return this._selectedFlowsId.filter((id) => this._findFlowById(id) != null);
+    }
+    _updateSelectedFlows(selectedFlowsId) {
+        this.selectedFlowsId = selectedFlowsId;
+        dispatchCustomEvent(this, 'select-flows', { flows: this.selectedFlowsId });
+    }
+    _selectFirstFlow(dispatch = false) {
+        if (this.selectedFlowsId.length === 0) {
+            let candidate = null;
+            if (this.definedFlows.length > 0 && this.definedFlows[0]._id != null) {
+                candidate = this.definedFlows[0];
+            }
+            else if (this.definedPlans.length > 0) {
+                const plan = this.definedPlans.find((plan) => plan.flows != null && plan.flows.length > 0 && plan.flows[0]._id != null);
+                if (plan) {
+                    candidate = plan.flows[0];
+                }
+            }
+            if (candidate != null) {
+                if (dispatch) {
+                    this._updateSelectedFlows([candidate._id]);
+                }
+                else {
+                    this.selectedFlowsId = [candidate._id];
+                }
+            }
+        }
+    }
+    _getFlowElement(flowId) {
+        return this.shadowRoot.querySelector(`[id="${flowId}"]`);
+    }
+    _onDragEndPolicy() {
+        this.shadowRoot.querySelectorAll('gv-flow').forEach((e) => e.onDragEnd());
+    }
+    async _onDropPolicy({ detail }) {
+        try {
+            await this._askToValidateForms();
+            const policy = detail.policy;
+            const targetFlow = this._findFlowById(detail.flowId);
+            let name = policy.name;
+            let description = '';
+            let condition = '';
+            let configuration = {};
+            let _id;
+            let _new = false;
+            if (detail.flowStep) {
+                _id = detail.flowStep._id;
+                name = detail.flowStep.name;
+                description = detail.flowStep.description || '';
+                condition = detail.flowStep.condition || '';
+                configuration = detail.flowStep.configuration;
+            }
+            else {
+                _id = this._generateFlowStepId(targetFlow._id, detail.flowKey, detail.position);
+                _new = true;
+            }
+            const flowStep = { _id, _new, name, policy: policy.id, description, condition, enabled: true, configuration };
+            const sourceFlow = detail.sourceFlowId != null ? this._findFlowById(detail.sourceFlowId) : targetFlow;
+            if (detail.sourcePosition != null) {
+                if (detail.sourceFlowKey && detail.sourceFlowKey !== detail.flowKey) {
+                    sourceFlow[detail.sourceFlowKey].splice(detail.sourcePosition, 1);
+                    targetFlow[detail.flowKey].splice(detail.position, 0, flowStep);
+                    if (this._currentFlowStep != null && this._currentFlowStep.step._id === _id) {
+                        this._currentFlowStep.group = detail.flowKey;
+                        // Special case for update schema after change request to response or inverse
+                        const schema = this.buildSchema(this._currentFlowStep.policy);
+                        await this._setCurrentFlowStep(this._currentFlowStep, schema, true);
+                        this._getFlowElement(targetFlow._id).requestUpdate();
+                    }
+                }
+                else {
+                    if (detail.position > detail.sourcePosition) {
+                        targetFlow[detail.flowKey].splice(detail.position, 0, flowStep);
+                        sourceFlow[detail.flowKey].splice(detail.sourcePosition, 1);
+                    }
+                    else {
+                        sourceFlow[detail.flowKey].splice(detail.sourcePosition, 1);
+                        targetFlow[detail.flowKey].splice(detail.position, 0, flowStep);
+                    }
+                }
+                // Force Refresh source flow element when move to other flow
+                if (targetFlow._id !== sourceFlow._id) {
+                    this._getFlowElement(targetFlow._id).requestUpdate();
+                }
+            }
+            else {
+                targetFlow[detail.flowKey].splice(detail.position, 0, flowStep);
+                const currentFlowForm = this._getFlowStepForm();
+                if (currentFlowForm == null || currentFlowForm.dirty !== true) {
+                    let step = targetFlow[detail.flowKey][detail.position];
+                    if (step == null) {
+                        // When confirm lose change after drop policy
+                        step = targetFlow[detail.flowKey][detail.position - 1];
+                    }
+                    if (detail.cancelEdit !== true) {
+                        setTimeout(async () => {
+                            await this._editFlowStep({ step, policy, flow: targetFlow, group: detail.flowKey });
+                            this.updateComplete.then(() => {
+                                const flowElement = this._getFlowElement(targetFlow._id);
+                                flowElement.selectedStepId = step._id;
+                                flowElement.requestUpdate();
+                            });
+                        });
+                    }
+                }
+            }
+            targetFlow._dirty = true;
+            sourceFlow._dirty = true;
+            this.isDirty = true;
+            this.shadowRoot.querySelectorAll('gv-flow').forEach((gvFlow) => gvFlow.removeCandidate());
+            setTimeout(() => {
+                this._dragPolicy = null;
+                this._dropPolicy = null;
+            }, 0);
+        }
+        catch (e) {
+            this._currentAskConfirmation = null;
+        }
+    }
+    _onDeletePolicy({ detail }) {
+        const targetFlow = this._findFlowById(detail.flowId);
+        targetFlow[detail.flowKey].splice(detail.position, 1);
+        targetFlow._dirty = true;
+        this.isDirty = true;
+        if (detail.target.editing) {
+            this._closeFlowStepForm(true);
+        }
+        this._getFlowElement(detail.flowId).requestUpdate();
+    }
+    _onDesign() {
+        this._changeTab('design');
+        this._splitMainViews();
+    }
+    buildSchema({ schema }) {
+        const commonDescription = {
+            title: 'Description',
+            description: 'Description of flow step',
+            type: 'string',
+        };
+        const commonCondition = {
+            title: 'Condition',
+            description: 'Condition the execution of the flow step (support EL)',
+            type: 'string',
+            'x-schema-form': {
+                'expression-language': true,
+            },
+        };
+        if (schema) {
+            const jsonSchema = typeof schema === 'string' ? JSON.parse(schema) : schema;
+            const properties = { commonDescription, ...(this.hasConditionalSteps ? { commonCondition } : {}), ...jsonSchema.properties };
+            return { ...jsonSchema, properties };
+        }
+        return { properties: { commonDescription, ...(this.hasConditionalSteps ? { commonCondition } : {}) } };
+    }
+    async _editFlowStep({ step, flow, policy, group }) {
+        if (step) {
+            this._currentPolicyId = policy.id;
+            const currentFlowStep = { flow, step, policy, group };
+            const schema = this.buildSchema(policy);
+            try {
+                await this._setCurrentFlowStep(currentFlowStep, schema);
+                this._updateSelectedFlows([flow._id]);
+                this._splitMainViews();
+                if (localStorage.getItem('gv-policy-studio:keep-documentation-close') == null) {
+                    this._onOpenDocumentation();
+                }
+            }
+            catch (e) {
+                this._currentAskConfirmation = null;
+            }
+        }
+        else {
+            await this._closeFlowStepForm();
+            this._maximizeTopView();
+        }
+    }
+    async _onEditFlowStep({ detail: { step, flow, policy, group } }) {
+        return this._editFlowStep({ step, flow, policy, group });
+    }
+    _getResizableViews() {
+        return this.shadowRoot.querySelector('gv-resizable-views');
+    }
+    _maximizeTopView() {
+        if (this.selectedFlowsId.length <= 1) {
+            this._getResizableViews().maximizeTop();
+        }
+    }
+    _maximizeBottomView() {
+        this._getResizableViews().maximizeBottom();
+    }
+    _splitMainViews() {
+        this._getResizableViews().split();
+    }
+    _onChangeFlowStepState({ detail }) {
+        const targetFlow = this._findFlowById(detail.flowId);
+        const step = targetFlow[detail.flowKey][detail.position];
+        step.enabled = detail.enabled;
+        targetFlow._dirty = true;
+        this.isDirty = true;
+    }
+    async _onCloseFlowStepForm() {
+        try {
+            await this._closeFlowStepForm();
+        }
+        catch (err) {
+            this._currentAskConfirmation = null;
+        }
+    }
+    async _closeFlowStepForm(force = false) {
+        await this._setCurrentFlowStep(null, null, force);
+    }
+    async _askToValidateForms() {
+        if (this._currentAskConfirmation == null) {
+            this._currentAskConfirmation = true;
+            return Promise.all(this._submitOrConfirmForms()).then((forms) => {
+                if (forms.filter((r) => r != null).length > 0) {
+                    this._definition = this._buildDefinitionToSave();
+                    this.getChildren().forEach((e) => e.requestUpdate());
+                    // Refresh if lose changes lost current step selection
+                    return this._checkCurrentFlowStep().then(() => {
+                        this.getChildren().forEach((e) => e.requestUpdate());
+                        return this.updateComplete.then(() => {
+                            this._currentAskConfirmation = null;
+                            return forms;
+                        });
+                    });
+                }
+                else {
+                    this._currentAskConfirmation = null;
+                    return forms;
+                }
+            });
+        }
+        throw new Error('ask already waiting');
+    }
+    async _setCurrentFlowStep(currentFlowStep, flowStepSchema, force = false) {
+        if (!force) {
+            await this._askToValidateForms();
+        }
+        const schema = deepClone(flowStepSchema);
+        if (currentFlowStep != null) {
+            const configuration = typeof currentFlowStep.step.configuration === 'string'
+                ? JSON.parse(currentFlowStep.step.configuration)
+                : currentFlowStep.step.configuration;
+            const step = { ...currentFlowStep.step, configuration };
+            const _initialValues = { ...step.configuration, commonDescription: step.description, commonCondition: step.condition };
+            this._currentFlowStep = { ...currentFlowStep, step, _initialValues };
+            if (flowStepSchema && flowStepSchema.properties.scope) {
+                const _enum = schema.properties.scope.enum;
+                if (_enum.find((scope) => ['REQUEST', 'REQUEST_CONTENT', 'RESPONSE', 'RESPONSE_CONTENT'].includes(scope)) != null) {
+                    const filtered = this._currentFlowStep.group === 'pre' ? ['REQUEST', 'REQUEST_CONTENT'] : ['RESPONSE', 'RESPONSE_CONTENT'];
+                    schema.properties.scope.enum = _enum.filter((scope) => filtered.includes(scope));
+                    const scope = this._currentFlowStep.step.configuration.scope;
+                    if (scope == null || !schema.properties.scope.enum.includes(scope)) {
+                        schema.properties.scope.default = schema.properties.scope.enum[0];
+                        this._currentFlowStep.step.configuration.scope = schema.properties.scope.enum[0];
+                        this._currentFlowStep._initialValues.scope = schema.properties.scope.enum[0];
+                        if (this._currentFlowStep._values) {
+                            this._currentFlowStep._values.scope = schema.properties.scope.enum[0];
+                        }
+                    }
+                }
+            }
+        }
+        else {
+            this._currentFlowStep = null;
+        }
+        this._flowStepSchema = schema;
+    }
+    _refresh(closeStepForm = true) {
+        if (closeStepForm) {
+            this._closeFlowStepForm(true);
+        }
+        this._definition = deepClone(this._definition);
+    }
+    async _onSelectFlows({ detail }) {
+        try {
+            await this._closeFlowStepForm();
+            this._onCloseDocumentation();
+            this._updateSelectedFlows(detail.flows);
+            this._onDesign();
+        }
+        catch (e) {
+            this._currentAskConfirmation = null;
+        }
+    }
+    async _onOpenDocumentationFromMenu({ detail: { policy } }) {
+        try {
+            if (this.documentation == null || this.documentation.id !== policy.id) {
+                await this._closeFlowStepForm();
+                this._currentPolicyId = policy.id;
+                if (this.getSelectedFlow()) {
+                    this._splitMainViews();
+                }
+                else {
+                    this._maximizeBottomView();
+                }
+                dispatchCustomEvent(this, 'fetch-documentation', { policy });
+            }
+        }
+        catch (e) { }
+    }
+    _fetchDocumentation(policy) {
+        if (this.documentation == null || this.documentation.id !== policy.id) {
+            dispatchCustomEvent(this, 'fetch-documentation', { policy });
+        }
+    }
+    _onOpenDocumentation() {
+        if (this._currentFlowStep && this._currentFlowStep.policy) {
+            this._fetchDocumentation(this._currentFlowStep.policy);
+        }
+    }
+    _onOpenDocumentationFromForm() {
+        localStorage.removeItem('gv-policy-studio:keep-documentation-close');
+        this._onOpenDocumentation();
+    }
+    _findFlowCollection(flowId) {
+        const plan = this.definedPlans.find((plan) => plan.flows.find((flow) => flow._id === flowId) != null);
+        return { plan, flows: plan != null ? plan.flows : this.definedFlows };
+    }
+    _findFlowById(flowId) {
+        let flow = this.definedFlows.find((flow) => flow._id === flowId);
+        if (flow == null) {
+            const plansFlows = this.definedPlans.map((plan) => plan.flows).reduce((acc, val) => acc.concat(val), []);
+            flow = plansFlows.find((flow) => flow._id === flowId);
+        }
+        return flow;
+    }
+    getSelectedFlow(index = 0) {
+        const selectedFlowId = this.selectedFlowsId[index];
+        return this._findFlowById(selectedFlowId);
+    }
+    _onTargetPolicy({ detail }) {
+        if (this._currentAskConfirmation == null) {
+            this._dragPolicy = detail;
+        }
+    }
+    _onChangeFlowStep({ detail }) {
+        this._currentFlowStep._values = detail.values;
+    }
+    _writeFlowStep(values) {
+        const { commonDescription, commonCondition, ...configuration } = values;
+        if (this._currentFlowStep.step._new ||
+            this._currentFlowStep.step.description !== commonDescription ||
+            this._currentFlowStep.step.condition !== commonCondition ||
+            !deepEqual(this._currentFlowStep.step.configuration, configuration)) {
+            const flow = this._findFlowById(this._currentFlowStep.flow._id);
+            const position = flow[this._currentFlowStep.group].findIndex((step) => step._id === this._currentFlowStep.step._id);
+            flow[this._currentFlowStep.group][position].description = commonDescription;
+            flow[this._currentFlowStep.group][position].condition = commonCondition;
+            flow[this._currentFlowStep.group][position].configuration = deepClone(configuration);
+            delete flow[this._currentFlowStep.group][position]._new;
+            flow[this._currentFlowStep.group][position]._dirty = true;
+            flow._dirty = true;
+            this.isDirty = true;
+            this._currentFlowStep.flow = flow;
+            this._currentFlowStep.step = flow[this._currentFlowStep.group][position];
+        }
+    }
+    async _onSubmitFlowStep({ detail }) {
+        this._writeFlowStep(detail.values);
+        await this.requestUpdate('_definition');
+        this.getChildren().forEach((c) => c.requestUpdate());
+    }
+    _onCancelFlow() {
+        this._onDesign();
+    }
+    _onSubmitFlow({ detail: { values } }) {
+        const selectedFlow = this.getSelectedFlow();
+        const _values = Object.assign({}, this._createFlowFromSchema(), values);
+        const selectedFlowUpdated = Object.assign({}, selectedFlow, _values);
+        if (!deepEqual(selectedFlow, selectedFlowUpdated)) {
+            Object.assign(selectedFlow, selectedFlowUpdated, { _dirty: true });
+            this.isDirty = true;
+            this._refresh();
+        }
+    }
+    _onCancelFlowMode() {
+        this._onDesign();
+    }
+    _onSubmitFlowMode({ detail: { values } }) {
+        this._definition['flow-mode'] = values['flow-mode'] || 'DEFAULT';
+        this.isDirty = true;
+        this._refresh();
+    }
+    _onChangeTab({ detail }) {
+        this._changeTab(detail.value);
+    }
+    async _changeTabValidator({ from, to }) {
+        if (from === 'properties') {
+            const component = this.shadowRoot.querySelector('gv-properties');
+            if (component.dirty) {
+                return component.confirm();
+            }
+        }
+        else if (from === 'resources') {
+            const component = this.shadowRoot.querySelector('gv-resources');
+            if (component.dirty) {
+                return component.confirm();
+            }
+        }
+        else {
+            try {
+                return await this._askToValidateForms();
+            }
+            catch (e) {
+                this._currentAskConfirmation = null;
+                throw e;
+            }
+        }
+        return Promise.resolve();
+    }
+    _changeTab(tabId) {
+        if (this._currentAskConfirmation == null) {
+            this.tabId = tabId;
+            dispatchCustomEvent(this, 'change-tab', this.tabId);
+        }
+    }
+    _onDragStartFlowStep(flow, { detail }) {
+        if (this._currentAskConfirmation == null) {
+            this._dropPolicy = detail;
+            this._dragPolicy = detail;
+        }
+    }
+    _renderFlowEmptyState(readonlyMode) {
+        return html `<div slot="content" class="empty">
+      <div>
+        Select a flow
+        ${readonlyMode !== true
+            ? html `or <gv-button @gv-button:click="${this._onAddFlow}" outlined icon="code:plus" large>design new one</gv-button>`
+            : ''}
+      </div>
+    </div>`;
+    }
+    _renderFlow(index = 0, hasEmptyState = true, readonlyMode) {
+        const flow = this.getSelectedFlow(index);
+        if (flow) {
+            const { plan } = this._findFlowCollection(flow._id);
+            const selectedStepId = this._currentFlowStep ? this._currentFlowStep.step._id : null;
+            return html ` <gv-flow
+        style="height: 100%"
+        .id="${flow._id}"
+        .flow="${flow}"
+        .plan="${plan}"
+        .policies="${this.policies}"
+        slot="content"
+        ?disabled="${this._currentAskConfirmation}"
+        .dragPolicy="${this._dragPolicy}"
+        .dropPolicy="${this._dropPolicy}"
+        .selectedStepId="${selectedStepId}"
+        ?readonly="${readonlyMode}"
+        ?has-policy-filter="${this._policyFilterOptions != null}"
+        flows-title="${this.flowsTitle}"
+        @gv-flow:drag-start="${this._onDragStartFlowStep.bind(this, flow)}"
+        @gv-flow:edit="${this._onEditFlowStep}"
+        @gv-flow:change-state="${this._onChangeFlowStepState}"
+        @gv-flow:drop="${this._onDropPolicy}"
+        @gv-flow:delete="${this._onDeletePolicy}"
+      ></gv-flow>`;
+        }
+        else if (hasEmptyState) {
+            return this._renderFlowEmptyState(readonlyMode);
+        }
+        return html ``;
+    }
+    _onFetchResources(event) {
+        const { currentTarget, regexTypes } = event.detail;
+        const options = this.definedResources
+            .filter((resource) => regexTypes == null || new RegExp(regexTypes).test(resource.type))
+            .map((resource, index) => {
+            const resourceType = this.resourceTypes.find((type) => type.id === resource.type);
+            const row = document.createElement('gv-row');
+            const picture = resourceType.icon ? resourceType.icon : null;
+            row.item = { picture, name: resource.name };
+            return {
+                element: row,
+                value: resource.name,
+                id: resource.type,
+            };
+        });
+        currentTarget.options = options;
+    }
+    _renderPolicy(readonlyMode) {
+        if (this._flowStepSchema && this.documentation) {
+            return html `<gv-resizable-views direction="horizontal" no-overflow>
+        <div slot="top">${this._renderFlowStepForm(readonlyMode)}</div>
+        <div slot="bottom">
+          <gv-documentation
+            .text="${this.documentation.content}"
+            .image="${this.documentation.image}"
+            ?disabled="${this._currentAskConfirmation}"
+            @gv-documentation:close="${this._onCloseDocumentation}"
+          ></gv-documentation>
+        </div>
+      </gv-resizable-views>`;
+        }
+        else if (this.documentation) {
+            return html `<gv-documentation
+        .text="${this.documentation.content}"
+        .image="${this.documentation.image}"
+        ?disabled="${this._currentAskConfirmation}"
+        @gv-documentation:close="${this._onCloseDocumentation}"
+      ></gv-documentation>`;
+        }
+        else if (this._flowStepSchema) {
+            return this._renderFlowStepForm(readonlyMode);
+        }
+        return html ``;
+    }
+    _getFlowStepForm() {
+        return this.shadowRoot.querySelector(`#${FLOW_STEP_FORM_ID}`);
+    }
+    _onResetFlowStep() {
+        if (this._currentFlowStep) {
+            delete this._currentFlowStep._values;
+            this._getFlowStepForm().reset();
+        }
+    }
+    _generateFlowsId(list, force = false) {
+        return this._generateId('f', list, force, true);
+    }
+    _generatePlanFlowsId(plan, force = false) {
+        return this._generateId(plan.id, plan.flows, force, true);
+    }
+    _generateFlowStepId(flowId, flowKey, position) {
+        return `${flowId}_${flowKey}_${position}`;
+    }
+    _generateId(prefix, list, force = false, isFlow = false) {
+        if (list) {
+            return list.map((e, index) => {
+                const _id = `${prefix}_${index}`;
+                if (isFlow) {
+                    if (e.pre) {
+                        e.pre.forEach((step, stepIndex) => (step._id = this._generateFlowStepId(_id, 'pre', stepIndex)));
+                    }
+                    if (e.post) {
+                        e.post.forEach((step, stepIndex) => (step._id = this._generateFlowStepId(_id, 'post', stepIndex)));
+                    }
+                }
+                if (force || e._id == null) {
+                    return { ...e, _id };
+                }
+                return e;
+            });
+        }
+        return list;
+    }
+    getChildren() {
+        return [
+            ...Array.from(this.shadowRoot.querySelectorAll('gv-flow')),
+            ...Array.from(this.shadowRoot.querySelectorAll('gv-resizable-views')),
+        ];
+    }
+    async getUpdateComplete() {
+        await super.getUpdateComplete();
+        await Promise.all(this.getChildren().map((e) => e.updateComplete));
+    }
+    shouldUpdate(changedProperties) {
+        // Just refresh gv-flow components
+        if (changedProperties.has('_dragPolicy')) {
+            this.shadowRoot.querySelectorAll('gv-flow').forEach((flow) => (flow.dragPolicy = this._dragPolicy));
+            return false;
+        }
+        if (changedProperties.has('_dropPolicy')) {
+            this.shadowRoot.querySelectorAll('gv-flow').forEach((flow) => (flow.dropPolicy = this._dropPolicy));
+            return false;
+        }
+        return super.shouldUpdate(changedProperties);
+    }
+    updated(props) {
+        if (props.has('documentation') && this.documentation != null && this.selectedFlowsId.length > 1) {
+            this._updateSelectedFlows([this.selectedFlowsId[0]]);
+        }
+    }
+    _renderFlowStepForm(readonlyMode) {
+        const values = this._currentFlowStep._values || this._currentFlowStep._initialValues;
+        const groups = [{ items: ['commonDescription', 'commonCondition'] }, { name: i18n('gv-policy-studio.policy-settings'), default: true }];
+        return html `${cache(this._flowStepSchema && this._currentFlowStep
+            ? html `<div class="flow-step__container">
+            <div class="flow-step__form">
+              <gv-schema-form
+                .id="${FLOW_STEP_FORM_ID}"
+                .schema="${this._flowStepSchema}"
+                .icon="design:edit"
+                has-header
+                validate-on-render
+                .values="${values}"
+                .dirty="${this._currentFlowStep._values != null}"
+                ?readonly="${readonlyMode}"
+                scrollable
+                .groups="${groups}"
+                @gv-schema-form:change="${this._onChangeFlowStep}"
+                @gv-schema-form:reset="${this._onResetFlowStep}"
+                @gv-schema-form:fetch-resources="${this._onFetchResources}"
+                @gv-schema-form:submit="${this._onSubmitFlowStep}"
+              >
+                <div slot="title" class="flow-step__form-title">${this._currentFlowStep.step.name}</div>
+                <gv-button
+                  slot="header-left"
+                  icon="general:close"
+                  outlined
+                  small
+                  @gv-button:click="${this._onCloseFlowStepForm}"
+                  title="Close"
+                ></gv-button>
+                <gv-button
+                  slot="header-left"
+                  icon="home:book"
+                  ?disabled="${this.documentation != null}"
+                  outlined
+                  small
+                  @gv-button:click="${this._onOpenDocumentationFromForm}"
+                  title="Open documentation"
+                ></gv-button>
+              </gv-schema-form>
+            </div>
+          </div>`
+            : '')}`;
+    }
+    _onCloseDocumentation() {
+        this.documentation = null;
+        if (this._currentFlowStep == null) {
+            this._maximizeTopView();
+        }
+        else {
+            localStorage.setItem('gv-policy-studio:keep-documentation-close', true);
+        }
+    }
+    _onDeleteFlow({ detail }) {
+        const flowId = detail.content._id;
+        const { flows } = this._findFlowCollection(flowId);
+        const flow = flows.find((flow) => flow._id === flowId);
+        this._deleteFlow(flows, flow);
+    }
+    get definedFlows() {
+        return this._definition && this._definition.flows ? this._definition.flows : [];
+    }
+    get definedPlans() {
+        return this._definition && this._definition.plans ? this._definition.plans : [];
+    }
+    get definedResources() {
+        return this._definition && this._definition.resources ? this._definition.resources : [];
+    }
+    get definedProperties() {
+        return this._definition && this._definition.properties ? this._definition.properties : [];
+    }
+    async _onDuplicateFlow({ detail }) {
+        try {
+            await this._askToValidateForms();
+            const flowId = detail.content._id;
+            const { plan, flows } = this._findFlowCollection(flowId);
+            this._addFlow(flows, this._findFlowById(flowId));
+            if (plan != null) {
+                let planIndex = null;
+                this.definedPlans.find((p, i) => {
+                    if (p.id === plan.id) {
+                        planIndex = i;
+                        return true;
+                    }
+                    return false;
+                });
+                plan.flows = flows;
+                this.definedPlans[planIndex].flows = this._generatePlanFlowsId(plan, true);
+                this._updateSelectedFlows([this.definedPlans[planIndex].flows[flows.length - 1]._id]);
+            }
+            else {
+                this._definition.flows = this._generateFlowsId(this._definition.flows);
+                this._updateSelectedFlows([this._definition.flows[this._definition.flows.length - 1]._id]);
+            }
+        }
+        catch (err) {
+            this._currentAskConfirmation = null;
+        }
+    }
+    _onChangeFlowState({ detail }) {
+        const flow = this._findFlowById(detail.content._id);
+        flow.enabled = detail.enabled;
+        flow._dirty = true;
+        this.isDirty = true;
+    }
+    async _onAddFlowPlan({ detail }) {
+        try {
+            await this._askToValidateForms();
+            this._addFlow(this.definedPlans[detail.planIndex].flows);
+            this.definedPlans[detail.planIndex].flows = this._generatePlanFlowsId(this.definedPlans[detail.planIndex]);
+            this._updateSelectedFlows([this.definedPlans[detail.planIndex].flows[this.definedPlans[detail.planIndex].flows.length - 1]._id]);
+        }
+        catch (err) {
+            this._currentAskConfirmation = null;
+        }
+    }
+    async _onAddFlow() {
+        try {
+            await this._askToValidateForms();
+            this._addFlow(this._definition.flows);
+            this._definition.flows = this._generateFlowsId(this._definition.flows);
+            this._updateSelectedFlows([this._definition.flows[this._definition.flows.length - 1]._id]);
+        }
+        catch (err) {
+            this._currentAskConfirmation = null;
+        }
+    }
+    _addFlow(collection, duplicate = null) {
+        const flow = duplicate == null
+            ? this._createFlowFromSchema()
+            : {
+                ...duplicate,
+                _id: null,
+                // reset the id to avoid issue with AM that persists the ID
+                id: null,
+                _dirty: true,
+            };
+        collection.push(flow);
+        this.isDirty = true;
+        return collection;
+    }
+    _createFlowFromSchema() {
+        const newFlow = {
+            name: '',
+            pre: [],
+            post: [],
+            _dirty: true,
+        };
+        return this._instantiate(this.flowSchema.properties, newFlow);
+    }
+    _instantiate(propertiesDefinition, initiator = {}) {
+        const property = { ...initiator };
+        if (propertiesDefinition) {
+            for (const key of Object.keys(propertiesDefinition)) {
+                const entry = propertiesDefinition[key];
+                if (entry.type === 'object') {
+                    property[key] = this._instantiate(entry.properties, (initiator = {}));
+                }
+                if (entry.default !== undefined) {
+                    property[key] = entry.default;
+                }
+                else if (entry.type === 'string') {
+                    property[key] = '';
+                }
+            }
+        }
+        return property;
+    }
+    _deleteFlow(collection, flow) {
+        const index = collection.indexOf(flow);
+        collection.splice(index, 1);
+        const selectedFlows = this.selectedFlowsId.filter((flowId) => flowId !== flow._id);
+        if (selectedFlows.length === 1) {
+            this._updateSelectedFlows(selectedFlows);
+        }
+        else {
+            this._selectFirstFlow(true);
+        }
+        this._changeTab('design');
+        this._refresh();
+        this.isDirty = true;
+    }
+    _findFlowIndex(list, id) {
+        let index = null;
+        list.find((f, i) => {
+            if (f._id === id) {
+                index = i;
+                return true;
+            }
+            return false;
+        });
+        return index;
+    }
+    async _onReorderFlows({ detail: { plan } }) {
+        try {
+            await this._askToValidateForms();
+            this.isDirty = true;
+            if (plan != null) {
+                const newOrder = this._generatePlanFlowsId(plan, true);
+                if (this.selectedFlowsId) {
+                    this._updateSelectedFlows(this.selectedFlowsId.map((flowId) => {
+                        const index = this._findFlowIndex(plan.flows, flowId);
+                        return index != null ? newOrder[index]._id : flowId;
+                    }));
+                }
+                plan.flows = newOrder;
+            }
+            else {
+                const newOrder = this._generateFlowsId(this._definition.flows, true);
+                if (this.selectedFlowsId) {
+                    this._updateSelectedFlows(this.selectedFlowsId.map((flowId) => {
+                        const index = this._findFlowIndex(this._definition.flows, flowId);
+                        return index != null ? newOrder[index]._id : flowId;
+                    }));
+                }
+                this._definition.flows = newOrder;
+            }
+        }
+        catch (err) {
+            this._currentAskConfirmation = false;
+        }
+    }
+    _onSearchPolicy({ detail }) {
+        this._searchPolicyQuery = detail;
+    }
+    _onClearPolicy() {
+        this._searchPolicyQuery = null;
+    }
+    _onSearchFlows({ detail }) {
+        this._searchFlowQuery = detail;
+    }
+    _onClearFlows() {
+        this._searchFlowQuery = null;
+    }
+    async _onResetAll() {
+        try {
+            await this._closeFlowStepForm();
+            this.definition = deepClone(this._initialDefinition);
+        }
+        catch (e) {
+            this._currentAskConfirmation = null;
+        }
+    }
+    _filterNotValidStep(step) {
+        return step._new !== true;
+    }
+    _removePrivateProperties(o) {
+        const copy = { ...o };
+        Object.keys(o)
+            .filter((key) => key.startsWith('_'))
+            .forEach((key) => {
+            delete copy[key];
+        });
+        return copy;
+    }
+    _submitOrConfirmForms() {
+        return [...this.shadowRoot.querySelectorAll('gv-schema-form')]
+            .filter((form) => {
+            const isValid = form.isValid();
+            if (isValid) {
+                form.submit();
+            }
+            else {
+                form.dirty = true;
+            }
+            return !isValid;
+        })
+            .map((form) => form.confirm());
+    }
+    getPropertiesElement() {
+        return this.shadowRoot.querySelector('gv-properties');
+    }
+    async _checkCurrentFlowStep() {
+        if (this._currentFlowStep && this.selectedFlowsId) {
+            const closePromises = this.selectedFlowsId
+                .map((flowId) => {
+                const flow = this._findFlowById(flowId);
+                const currentStep = [...flow.pre, ...flow.post].find((step) => step._id === this._currentFlowStep.step._id);
+                if (currentStep == null) {
+                    return this._closeFlowStepForm(true);
+                }
+                return null;
+            })
+                .filter((p) => p !== null);
+            return Promise.all(closePromises);
+        }
+        return Promise.resolve();
+    }
+    saved() {
+        if (this.isDirty) {
+            this._initialDefinition = deepClone(this._definitionSaved);
+            this._definition = deepClone(this._definitionSaved);
+            this._definitionSaved = null;
+            this.isDirty = false;
+            this._checkCurrentFlowStep();
+            this.definedPlans.forEach((plan) => {
+                plan.flows.forEach((flow) => (flow._dirty = false));
+            });
+            this.definedFlows.forEach((flow) => (flow._dirty = false));
+            this.getChildren().forEach((e) => e.requestUpdate());
+        }
+    }
+    _buildDefinitionToSave() {
+        // Copy definition and remove invalid step
+        // Keep private properties like _id and others stuff useful for render
+        const flows = this._definition.flows.map((flow) => {
+            flow.pre = flow.pre.filter(this._filterNotValidStep);
+            flow.post = flow.post.filter(this._filterNotValidStep);
+            return flow;
+        });
+        let definition = { ...this._definition, flows };
+        if (this._definition.plans != null) {
+            const plans = this._definition.plans.map((plan) => {
+                const flows = plan.flows.map((flow) => {
+                    flow.pre = flow.pre.filter(this._filterNotValidStep);
+                    flow.post = flow.post.filter(this._filterNotValidStep);
+                    return flow;
+                });
+                return { ...plan, flows };
+            });
+            definition = { ...definition, plans };
+        }
+        return definition;
+    }
+    _buildDefinitionToSend(definitionToSave) {
+        // Copy definition and remove all private properties
+        const flows = definitionToSave.flows.map((f) => {
+            const flow = this._removePrivateProperties(f);
+            flow.pre = flow.pre.map(this._removePrivateProperties);
+            flow.post = flow.post.map(this._removePrivateProperties);
+            return flow;
+        });
+        let definition = { ...this._definition, flows };
+        if (this._definition.plans != null) {
+            const plans = definitionToSave.plans.map((plan) => {
+                const flows = plan.flows.map((f) => {
+                    const flow = this._removePrivateProperties(f);
+                    flow.pre = flow.pre.map(this._removePrivateProperties);
+                    flow.post = flow.post.map(this._removePrivateProperties);
+                    return flow;
+                });
+                return { ...plan, flows };
+            });
+            definition = { ...definition, plans };
+        }
+        if (this._definition.properties != null) {
+            const properties = this._definition.properties.map(this._removePrivateProperties);
+            definition = { ...definition, properties };
+        }
+        if (this._definition.resources != null) {
+            const resources = this._definition.resources.map(this._removePrivateProperties);
+            definition = { ...definition, resources };
+        }
+        return definition;
+    }
+    _onSaveAll() {
+        if (this.hasProperties) {
+            this.getPropertiesElement().submit();
+        }
+        Promise.all(this._submitOrConfirmForms())
+            .then(() => {
+            this._definitionSaved = this._buildDefinitionToSave();
+            const definition = this._buildDefinitionToSend(this._definitionSaved);
+            dispatchCustomEvent(this, 'save', { definition, services: this.services });
+        })
+            .catch((err) => {
+            console.error(`[policy-studio] Error on save`, err);
+        });
+    }
+    _onDebug(requestEvent) {
+        if (this.hasProperties) {
+            this.getPropertiesElement().submit();
+        }
+        Promise.all(this._submitOrConfirmForms())
+            .then(() => {
+            const definition = this._buildDefinitionToSend(this._buildDefinitionToSave());
+            dispatchCustomEvent(this, 'debug', { definition, services: this.services, request: requestEvent.detail.request });
+        })
+            .catch((err) => {
+            console.error(`[policy-studio] Error on debug`, err);
+        });
+    }
+    get filteredFlows() {
+        if (this._flowFilter.length === 0 || this._flowFilter.includes('api')) {
+            return this.definedFlows;
+        }
+        return null;
+    }
+    get filteredPlans() {
+        if (this._flowFilter.length === 0 || this._flowFilter.includes('plan')) {
+            return this.definedPlans;
+        }
+        return null;
+    }
+    _onFilterFlows({ detail }) {
+        if (this._flowFilter.includes(detail.id)) {
+            this._flowFilter = [];
+        }
+        else {
+            this._flowFilter = [detail.id];
+        }
+    }
+    _getFilteredPolicies() {
+        if (this._policyFilter.length > 0) {
+            return this.policies.filter((policy) => {
+                return ((policy.onRequest && this._policyFilter.includes('onRequest')) || (policy.onResponse && this._policyFilter.includes('onResponse')));
+            });
+        }
+        return this.policies;
+    }
+    _onFilterPolicies({ detail }) {
+        if (this._policyFilter.includes(detail.id)) {
+            this._policyFilter = [];
+        }
+        else {
+            this._policyFilter = [detail.id];
+        }
+    }
+    _renderDesign(readonlyMode) {
+        return html ` <div id="design" slot="content" class="design">
+      <gv-resizable-views no-overflow>
+        <div slot="top">${this._renderFlow(0, true, readonlyMode)}</div>
+
+        <div slot="bottom">
+          ${this._renderFlow(1, false, readonlyMode)} ${this._renderPolicy(readonlyMode)} ${this._renderFlowForm(readonlyMode)}
+        </div>
+      </gv-resizable-views>
+      ${readonlyMode !== true
+            ? html `<gv-policy-studio-menu
+            class="right-menu"
+            ?disabled="${this._currentAskConfirmation}"
+            .policies="${this._getFilteredPolicies()}"
+            .selectedIds="${[this._currentPolicyId]}"
+            .query="${this._searchPolicyQuery}"
+            ?has-policy-filter="${this._policyFilterOptions != null}"
+            ?readonly="${readonlyMode}"
+            @gv-policy-studio-menu:target-policy="${this._onTargetPolicy}"
+            @gv-policy-studio-menu:fetch-documentation="${this._onOpenDocumentationFromMenu}"
+            @gv-policy-studio-menu:dragend-policy="${this._onDragEndPolicy}"
+          >
+            <div slot="header" class="search-policies">
+              ${this._policyFilterOptions != null
+                ? html `<gv-option
+                    ?disabled="${this._currentAskConfirmation}"
+                    .options="${this._policyFilterOptions}"
+                    multiple
+                    outlined
+                    .value="${this._policyFilter}"
+                    small
+                    @gv-option:select="${this._onFilterPolicies}"
+                  ></gv-option>`
+                : ''}
+              <gv-input
+                id="search-policy"
+                ?disabled="${this._currentAskConfirmation}"
+                placeholder="Filter policies (Shift + Ctrl + Space)"
+                type="search"
+                small
+                @gv-input:input="${this._onSearchPolicy}"
+                @gv-input:clear="${this._onClearPolicy}"
+              ></gv-input>
+            </div>
+          </gv-policy-studio-menu>`
+            : ''}
+    </div>`;
+    }
+    _renderDebug() {
+        const response = this.debugResponse ? this.debugResponse.response : undefined;
+        const isLoading = this.debugResponse ? this.debugResponse.isLoading : undefined;
+        const path = this.debugResponse && this.debugResponse.request ? this.debugResponse.request.path : undefined;
+        const method = this.debugResponse && this.debugResponse.request ? this.debugResponse.request.method : undefined;
+        return html `<gv-http-client
+      id="debug"
+      slot="content"
+      class="debug"
+      @gv-http-client:send="${this._onDebug}"
+      .response="${response}"
+      .path="${path}"
+      .method="${method}"
+      ?loading="${isLoading}"
+    >
+    </gv-http-client>`;
+    }
+    _renderConfigurationForm(readonlyMode) {
+        if (this.configurationSchema) {
+            const values = deepClone(this._definition);
+            return html ` <div id="settings" slot="content" class="api-settings" @dragover="${this._onDesign}">
+        <gv-schema-form
+          .schema="${this.configurationSchema}"
+          id="api-settings-form"
+          .values="${values}"
+          has-header
+          has-footer
+          scrollable
+          ?readonly="${readonlyMode}"
+          @gv-schema-form:cancel="${this._onCancelFlowMode}"
+          @gv-schema-form:submit="${this._onSubmitFlowMode}"
+        >
+          ${!this.configurationInformation
+                ? ''
+                : html `
+                <div class="api-settings-information" slot="title">
+                  <gv-icon class="api-settings-information__icon" title="Info" shape="code:info"></gv-icon>
+                  <blockquote class="api-settings-information__blockquote">${this.configurationInformation}</blockquote>
+                </div>
+              `}
+        </gv-schema-form>
+      </div>`;
+        }
+        return html ``;
+    }
+    _renderFlowForm(readonlyMode) {
+        if (this.flowSchema && this._flowStepSchema == null && this.documentation == null && this.selectedFlowsId.length === 1) {
+            const flow = this.getSelectedFlow();
+            if (flow) {
+                const values = deepClone(flow);
+                return html `<div slot="content" class="flow-settings">
+          <gv-schema-form
+            .schema="${this.flowSchema}"
+            id="settings-form"
+            .values="${values}"
+            has-header
+            scrollable
+            ?readonly="${readonlyMode}"
+            @gv-schema-form:cancel="${this._onCancelFlow}"
+            @gv-schema-form:submit="${this._onSubmitFlow}"
+          >
+            <div slot="title" class="flow-step__form-title">Flow configuration</div>
+          </gv-schema-form>
+        </div>`;
+            }
+        }
+    }
+    _onResourcesChange({ detail }) {
+        this.definition.resources = detail.resources;
+        this.isDirty = true;
+    }
+    _onPropertiesChange({ detail }) {
+        this.definition.properties = detail.properties;
+        this.isDirty = true;
+    }
+    _onSaveProvider({ detail }) {
+        this.services['dynamic-property'] = detail.provider;
+        this.isDirty = true;
+    }
+    _onSwitchEncryptedProperty({ detail }) {
+        this.isDirty = true;
+    }
+    render() {
+        const readonlyMode = this._getReadonlyModeForDesign();
+        return html `<div class="box">
+      <gv-policy-studio-menu
+        class="left-menu"
+        .api-name="${this._definition.name}"
+        .flows="${this.filteredFlows}"
+        .plans="${this.filteredPlans}"
+        .selectedIds="${this.selectedFlowsId}"
+        ?disabled="${this._currentAskConfirmation}"
+        ?sortable="${this.sortable && this.readonly !== true}"
+        ?readonly="${this.readonly}"
+        ?readonlyPlans="${this.readonlyPlans}"
+        flows-title="${this.flowsTitle}"
+        .query="${this._searchFlowQuery}"
+        ?can-add="${this.canAdd && !this.readonly}"
+        @gv-policy-studio-menu:reorder-flows="${this._onReorderFlows}"
+        @gv-policy-studio-menu:change-flow-state="${this._onChangeFlowState}"
+        @gv-policy-studio-menu:add-flow="${this._onAddFlow}"
+        @gv-policy-studio-menu:add-flow-plan="${this._onAddFlowPlan}"
+        @gv-policy-studio-menu:delete-flow="${this._onDeleteFlow}"
+        @gv-policy-studio-menu:duplicate-flow="${this._onDuplicateFlow}"
+        @gv-policy-studio-menu:select-flows="${this._onSelectFlows}"
+      >
+        <div slot="header" class="header-actions">
+          <div class="title">${this._definition.name}</div>
+          ${this._flowFilterOptions != null
+            ? html `<gv-option
+                ?disabled="${this._currentAskConfirmation}"
+                .options="${this._flowFilterOptions}"
+                multiple
+                outlined
+                .value="${this._flowFilter}"
+                small
+                @gv-option:select="${this._onFilterFlows}"
+              ></gv-option>`
+            : ''}
+          <gv-input
+            ?disabled="${this._currentAskConfirmation}"
+            id="search-flow"
+            placeholder="Filter flows (Ctrl + Space)"
+            type="search"
+            small
+            @gv-input:input="${this._onSearchFlows}"
+            @gv-input:clear="${this._onClearFlows}"
+          ></gv-input>
+        </div>
+
+        ${this.readonly !== true
+            ? html ` <div slot="footer" class="footer-actions">
+              <gv-button
+                class="btn-large"
+                .disabled="${!this.isDirty || this._currentAskConfirmation}"
+                @gv-button:click="${this._onSaveAll}"
+                >Save</gv-button
+              >
+              <gv-button link .disabled="${!this.isDirty || this._currentAskConfirmation}" @gv-button:click="${this._onResetAll}"
+                >Reset</gv-button
+              >
+            </div>`
+            : ''}
+      </gv-policy-studio-menu>
+
+      <gv-tabs
+        .value="${this.tabId}"
+        .options="${this._tabs}"
+        .disabled="${this._currentAskConfirmation}"
+        @gv-tabs:change="${this._onChangeTab}"
+        .validator="${this._changeTabValidator.bind(this)}"
+      >
+        ${this._renderDesign(readonlyMode)} ${this._renderConfigurationForm(readonlyMode)} ${this._renderDebug()}
+        <gv-properties
+          id="properties"
+          slot="content"
+          class="properties"
+          .provider="${this.services['dynamic-property']}"
+          @gv-properties:change="${this._onPropertiesChange}"
+          @gv-properties:save-provider="${this._onSaveProvider}"
+          @gv-properties:switch-encrypted="${this._onSwitchEncryptedProperty}"
+          ?readonly="${readonlyMode}"
+          encryptable="true"
+          .properties="${this.definedProperties}"
+          .providers="${this.propertyProviders}"
+          .dynamicPropertySchema="${this.dynamicPropertySchema}"
+        ></gv-properties>
+        <gv-resources
+          id="resources"
+          slot="content"
+          class="resources"
+          @gv-resources:change="${this._onResourcesChange}"
+          ?readonly="${readonlyMode}"
+          .resources="${this.definedResources}"
+          .types="${this.resourceTypes}"
+        ></gv-resources>
+      </gv-tabs>
+    </div>`;
+    }
+    /**
+     * Determine if the design view should be in readonly mode or not
+     * It is in readonly mode if:
+     *  the readonly attribute is set to true
+     *  OR
+     *  the main selected flow belongs to a plan and the readonly-plans attribute is set to true
+     *  OR
+     *  the second flow for comparison belongs to a plan and the readonly-plans attribute is set to true
+     * @returns {boolean|*|{type: BooleanConstructor}|{attribute: string, type: BooleanConstructor}|{type: *}|{attribute: string, type: *}}
+     * @private
+     */
+    _getReadonlyModeForDesign() {
+        if (this.readonly) {
+            return true;
+        }
+        const flow = this.getSelectedFlow(0);
+        if (!flow) {
+            return false;
+        }
+        const { plan: flowPlan } = this._findFlowCollection(flow._id);
+        const readonlyMode = flowPlan && this.readonlyPlans;
+        if (readonlyMode) {
+            return true;
+        }
+        const comparedFlow = this.getSelectedFlow(1);
+        if (!comparedFlow) {
+            return false;
+        }
+        const { plan: comparedFlowPlan } = this._findFlowCollection(comparedFlow._id);
+        return comparedFlowPlan && this.readonlyPlans;
+    }
+}
+window.customElements.define('gv-policy-studio', GvPolicyStudio);