@gravitee/ui-components 3.25.3-typescript-8a53edf → 3.25.3-typescript-e7256ca

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

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