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

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

@@ -1 +1,443 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.PolicyDraggable=exports.GvFlowStep=void 0;const t=require("lit"),e=require("../mixins/with-resize-observer"),o=require("lit/directives/class-map"),i=require("../lib/events");require("../atoms/gv-image"),require("../molecules/gv-dropdown-menu"),require("../atoms/gv-switch");class n extends((0,e.withResizeObserver)(t.LitElement)){static get properties(){return{id:{type:String,reflect:!0},group:{type:String,reflect:!0},parent:{type:String,reflect:!0},step:{type:Object},policy:{type:Object},editing:{type:Boolean,reflect:!0},dragging:{type:Boolean,reflect:!0},hover:{type:Boolean,reflect:!0},title:{type:String,reflect:!0},empty:{type:Boolean,reflect:!0},confirm:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0},readonly:{type:Boolean,reflect:!0},_small:{type:Boolean,attribute:!1},_confirmDelete:{type:Boolean,reflect:!0},_confirmDuplicate:{type:Boolean,reflect:!0}}}constructor(){super(),this.empty=!0,this.breakpoints={width:[100,200]}}onResize({width:t}){this._small=t<=200}_onDuplicate(){this._confirmDuplicate=!0}_onConfirmDuplicate(){this._confirmDuplicate=!1,(0,i.dispatchCustomEvent)(this,"duplicate",{step:this.step,policy:this.policy,target:this})}_onCancelDuplicate(){this._confirmDuplicate=!1}_onClick(t){t.target.classList.contains("action")||this.editing||(t.preventDefault(),this._edit())}_edit(){this.policy&&!this.disabled&&(0,i.dispatchCustomEvent)(this,"edit",{step:this.step,policy:this.policy,group:this.group})}_onMouseEnter(){if(!this.disabled&&(this.hover=!0,!this.readonly)){this.shadowRoot.querySelector("gv-dropdown-menu").setAttribute("open",!0)}}_onMouseLeave(){if(!this.disabled&&(this.hover=!1,!this.readonly)){this.shadowRoot.querySelector("gv-dropdown-menu").removeAttribute("open")}}_onDelete(){this._confirmDelete=!0}_onConfirmDelete(){this._confirmDelete=!1,(0,i.dispatchCustomEvent)(this,"delete",{step:this.step})}_onCancelDelete(){this._confirmDelete=!1}updated(t){if(t.has("dragging")&&!0===this.dragging){this.shadowRoot.querySelector("gv-dropdown-menu").removeAttribute("open")}t.has("step")&&null!=this.step&&(this.empty=!1)}_onCancel(){this.remove()}_onCopy(){(0,i.dispatchCustomEvent)(this,"copy")}_onMove(){(0,i.dispatchCustomEvent)(this,"move")}_onChangeState({detail:t}){(0,i.dispatchCustomEvent)(this,"change-state",{step:this.step,enabled:t})}_renderDropdownMenu(){if(this.disabled||this.readonly)return t.html``;const e=!1!==this.step.enabled;return t.html`<gv-dropdown-menu right><gv-switch slot="action" class="action" small label="${e?"Enabled":"Disabled"}" title="${e?"Disable policy ?":"Enable policy ?"}" @gv-switch:input="${this._onChangeState}" .value="${e}"></gv-switch><gv-button slot="action" class="action" link small icon="general:duplicate" @gv-button:click="${this._onDuplicate}">Duplicate</gv-button><gv-button slot="action" class="action" link small icon="home:trash" @gv-button:click="${this._onDelete}">Delete</gv-button></gv-dropdown-menu>`}resetConfirm(){this.confirm=!1,this._confirmDelete=!1,this._confirmDuplicate=!1}render(){if(this.confirm)return t.html`<div class="drop-area drop-area-confirm"><gv-button small @gv-button:click="${this._onCopy}">Copy</gv-button><gv-button small @gv-button:click="${this._onMove}">Move</gv-button><gv-button link small @gv-button:click="${this._onCancel}">Cancel</gv-button></div>`;if(this._confirmDelete)return t.html`<div class="drop-area drop-area-confirm"><gv-button small danger @gv-button:click="${this._onConfirmDelete}">Delete</gv-button><gv-button link small @gv-button:click="${this._onCancelDelete}">Cancel</gv-button></div>`;if(this._confirmDuplicate)return t.html`<div class="drop-area drop-area-confirm"><gv-button small @gv-button:click="${this._onConfirmDuplicate}">Duplicate</gv-button><gv-button link small @gv-button:click="${this._onCancelDuplicate}">Cancel</gv-button></div>`;if(this.empty)return t.html`<div class="drop-area"></div>`;{const e=this.step?this.step.name:"",i=this.step&&this.step.description?this.step.description:"",n=this.step&&!!this.step.condition,s=this.step?this.policy&&this.policy.icon:null,r=this.step&&!1!==this.step.enabled,a=null==this.policy;this.title=a?"Warning: policy not found in plugins folder":i;const l={"drop-area":!0,"is-assigned":""!==e,"has-icon":null!=s,disabled:!r,"not-found":a};return t.html`<div class="${(0,o.classMap)(l)}" @click="${this._onClick}" @mouseenter="${this._onMouseEnter}" @mouseleave="${this._onMouseLeave}">${this._renderDropdownMenu()}<div class="content"><div class="content-icon">${n?t.html`<gv-icon class="content-icon-conditional" shape="design:conditional"></gv-icon>`:t.html``} ${s?t.html`<gv-image src="${s}"></gv-image>`:t.html``}</div>${null==s&&a?t.html`<gv-icon class="not-found__icon" shape="finance:folder-error"></gv-icon>`:""}<div><div class="name">${e}</div><div class="description">${i}</div></div></div></div>`}}static get styles(){return[t.css`:host{box-sizing:border-box;margin:.2rem;display:block}:host(:active){outline:0}:host([dragging]){opacity:.5}gv-dropdown-menu{position:absolute;right:0;display:flex;flex-wrap:wrap;justify-content:right;top:-1px;bottom:-1px;z-index:10;--gv-dropdown-menu--bdw:0 0 0 1px;--gv-dropdown-menu--p:0.1rem 0.3rem;--gv-dropdown-menu--gg:0}gv-switch{margin:.2rem 0}:host([hover]) .drop-area{transform:translateY(-4px);box-shadow:0 0 0 1px #5a7684,0 1px 3px #5a7684;border-color:transparent}:host([dragging]) .drop-area{transform:translateY(-4px)}:host([editing]) .drop-area{border-color:#5a7684;transform:translateY(-4px);box-shadow:0 0 0 1px #5a7684,0 1px 3px #5a7684;transition:all .2s}:host([w-lt-200]) gv-image{position:absolute;opacity:.1;width:100%}:host([w-lt-200]) .drop-area:hover gv-image{opacity:1}:host([w-lt-200]) .content-icon{position:absolute;width:100%;height:100%}:host([w-lt-100]) .description{display:none}:host([empty]) .drop-area{position:relative;background-color:transparent;border:2px dashed #bfbfbf;font-size:14px}.description{line-height:14px;font-size:12px;max-height:42px;overflow:hidden}.drop-area{position:relative;border:2px dashed #bfbfbf;border-radius:4px;height:80px;min-width:80px;margin:4px;padding:4px;word-break:break-word;display:flex;align-items:center;text-align:center;justify-content:center;flex-direction:column;--gv-button--fz:11px;flex:1;transition:color 150ms ease-in-out,transform .3s ease-in-out,box-shadow .3s ease-in-out,border .3s ease-in-out;background-color:#fff}.drop-area.disabled{text-decoration:line-through;font-style:italic}.drop-area.not-found{border-color:var(--gv-theme-color-warning-light,#ffb74d)}.drop-area.has-icon{padding-left:0;text-align:left}.drop-area.has-icon .content{justify-content:left}.drop-area.is-assigned{border-style:solid}:host([hover]) .drop-area.is-assigned:not(.not-found){cursor:grab}:host([hover]) .drop-area.is-assigned:not(.not-found):active{cursor:grabbing}:host([readonly]) .drop-area.is-assigned:not(.not-found),:host([readonly]) .drop-area.is-assigned:not(.not-found):active{cursor:pointer}.content{display:flex;align-items:center;justify-content:center;text-align:center;width:100%}.content>div,.content>mark{width:100%}.content-icon{flex:0 1 0%;display:flex;margin:.2rem}.content-icon-conditional{position:absolute;z-index:10;margin:.2rem}gv-image{height:80px;width:80px}.not-found__icon{--gv-icon--c:var(--gv-theme-color-warning-light, #ffb74d);height:60px;width:60px;margin:.2rem;justify-content:center;align-items:center}.drop-area-confirm{flex-direction:row;align-items:center;justify-content:center;background-color:#fff}`]}}exports.GvFlowStep=n;class s{static parse(t){const e=JSON.parse(t);return new s(e.policy,e.sourcePosition,e.sourceFlowKey,e.sourceFlowId,e.flowStep)}constructor(t,e,o,i,n){this.policy=t,this.sourcePosition=e,this.sourceFlowKey=o,this.sourceFlowId=i,this.flowStep=n}toString(){return JSON.stringify(this)}}exports.PolicyDraggable=s,window.customElements.define("gv-flow-step",n);
+/*
+ * 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 { withResizeObserver } from '../mixins/with-resize-observer';
+import { classMap } from 'lit/directives/class-map';
+import { dispatchCustomEvent } from '../lib/events';
+import '../atoms/gv-image';
+import '../molecules/gv-dropdown-menu';
+import '../atoms/gv-switch';
+/**
+ * Flow area component
+ *
+ * @fires gv-flow-step:duplicate - Duplicate event from actions
+ * @fires gv-flow-step:delete - Delete event from actions
+ * @fires gv-flow-step:edit - Edit event
+ * @fires gv-flow-step:copy - Copy event
+ * @fires gv-flow-step:move - Move event
+ *
+ * @attr {Object<{name, icon, configuration:{description, ...}}>} step - the flow step, configuration contains form conf for gv-schema-form component
+ * @attr {Boolean} editing - true, if edition in progress
+ * @attr {Boolean} dragging - true, if dragging in progress
+ * @attr {Boolean} hover - true, if area is hover
+ * @attr {String} title - title of area, default is "content.configuration.description" if exist
+ * @attr {Boolean} empty - true, if render empty state
+ * @attr {Boolean} confirm - true, if render confirm state
+ * @attr {Boolean} disabled - true for disabled
+ * @attr {Boolean} readonly - true if readonly
+ */
+export class GvFlowStep extends withResizeObserver(LitElement) {
+    static get properties() {
+        return {
+            id: { type: String, reflect: true },
+            group: { type: String, reflect: true },
+            parent: { type: String, reflect: true },
+            step: { type: Object },
+            policy: { type: Object },
+            editing: { type: Boolean, reflect: true },
+            dragging: { type: Boolean, reflect: true },
+            hover: { type: Boolean, reflect: true },
+            title: { type: String, reflect: true },
+            empty: { type: Boolean, reflect: true },
+            confirm: { type: Boolean, reflect: true },
+            disabled: { type: Boolean, reflect: true },
+            readonly: { type: Boolean, reflect: true },
+            _small: { type: Boolean, attribute: false },
+            _confirmDelete: { type: Boolean, reflect: true },
+            _confirmDuplicate: { type: Boolean, reflect: true },
+        };
+    }
+    constructor() {
+        super();
+        this.empty = true;
+        this.breakpoints = {
+            width: [100, 200],
+        };
+    }
+    onResize({ width }) {
+        this._small = width <= 200;
+    }
+    _onDuplicate() {
+        this._confirmDuplicate = true;
+    }
+    _onConfirmDuplicate() {
+        this._confirmDuplicate = false;
+        dispatchCustomEvent(this, 'duplicate', { step: this.step, policy: this.policy, target: this });
+    }
+    _onCancelDuplicate() {
+        this._confirmDuplicate = false;
+    }
+    _onClick(e) {
+        if (!e.target.classList.contains('action') && !this.editing) {
+            e.preventDefault();
+            this._edit();
+        }
+    }
+    _edit() {
+        if (this.policy && !this.disabled) {
+            dispatchCustomEvent(this, 'edit', { step: this.step, policy: this.policy, group: this.group });
+        }
+    }
+    _onMouseEnter() {
+        if (!this.disabled) {
+            this.hover = true;
+            if (!this.readonly) {
+                const dropdownMenu = this.shadowRoot.querySelector('gv-dropdown-menu');
+                dropdownMenu.setAttribute('open', true);
+            }
+        }
+    }
+    _onMouseLeave() {
+        if (!this.disabled) {
+            this.hover = false;
+            if (!this.readonly) {
+                const dropdownMenu = this.shadowRoot.querySelector('gv-dropdown-menu');
+                dropdownMenu.removeAttribute('open');
+            }
+        }
+    }
+    _onDelete() {
+        this._confirmDelete = true;
+    }
+    _onConfirmDelete() {
+        this._confirmDelete = false;
+        dispatchCustomEvent(this, 'delete', { step: this.step });
+    }
+    _onCancelDelete() {
+        this._confirmDelete = false;
+    }
+    updated(properties) {
+        if (properties.has('dragging') && this.dragging === true) {
+            const dropdownMenu = this.shadowRoot.querySelector('gv-dropdown-menu');
+            dropdownMenu.removeAttribute('open');
+        }
+        if (properties.has('step') && this.step != null) {
+            this.empty = false;
+        }
+    }
+    _onCancel() {
+        this.remove();
+    }
+    _onCopy() {
+        dispatchCustomEvent(this, 'copy');
+    }
+    _onMove() {
+        dispatchCustomEvent(this, 'move');
+    }
+    _onChangeState({ detail }) {
+        dispatchCustomEvent(this, 'change-state', { step: this.step, enabled: detail });
+    }
+    _renderDropdownMenu() {
+        if (this.disabled || this.readonly) {
+            return html ``;
+        }
+        const enabled = this.step.enabled !== false;
+        return html `<gv-dropdown-menu right>
+      <gv-switch
+        slot="action"
+        class="action"
+        small
+        label="${enabled ? 'Enabled' : 'Disabled'}"
+        title="${enabled ? 'Disable policy ?' : 'Enable policy ?'}"
+        @gv-switch:input="${this._onChangeState}"
+        .value="${enabled}"
+      ></gv-switch>
+      <gv-button slot="action" class="action" link small icon="general:duplicate" @gv-button:click="${this._onDuplicate}"
+        >Duplicate</gv-button
+      >
+      <gv-button slot="action" class="action" link small icon="home:trash" @gv-button:click="${this._onDelete}">Delete</gv-button>
+    </gv-dropdown-menu>`;
+    }
+    resetConfirm() {
+        this.confirm = false;
+        this._confirmDelete = false;
+        this._confirmDuplicate = false;
+    }
+    render() {
+        if (this.confirm) {
+            return html `<div class="drop-area drop-area-confirm">
+        <gv-button small @gv-button:click="${this._onCopy}">Copy</gv-button>
+        <gv-button small @gv-button:click="${this._onMove}">Move</gv-button>
+        <gv-button link small @gv-button:click="${this._onCancel}">Cancel</gv-button>
+      </div>`;
+        }
+        else if (this._confirmDelete) {
+            return html `<div class="drop-area drop-area-confirm">
+        <gv-button small danger @gv-button:click="${this._onConfirmDelete}">Delete</gv-button>
+        <gv-button link small @gv-button:click="${this._onCancelDelete}">Cancel</gv-button>
+      </div>`;
+        }
+        else if (this._confirmDuplicate) {
+            return html `<div class="drop-area drop-area-confirm">
+        <gv-button small @gv-button:click="${this._onConfirmDuplicate}">Duplicate</gv-button>
+        <gv-button link small @gv-button:click="${this._onCancelDuplicate}">Cancel</gv-button>
+      </div>`;
+        }
+        else if (!this.empty) {
+            const name = this.step ? this.step.name : '';
+            const description = this.step && this.step.description ? this.step.description : '';
+            const hasConditionalSteps = this.step && !!this.step.condition;
+            const icon = this.step ? this.policy && this.policy.icon : null;
+            const enabled = this.step && this.step.enabled !== false;
+            const notFound = this.policy == null;
+            if (notFound) {
+                this.title = 'Warning: policy not found in plugins folder';
+            }
+            else {
+                this.title = description;
+            }
+            const classes = {
+                'drop-area': true,
+                'is-assigned': name !== '',
+                'has-icon': icon != null,
+                disabled: !enabled,
+                'not-found': notFound,
+            };
+            return html `<div
+        class="${classMap(classes)}"
+        @click="${this._onClick}"
+        @mouseenter="${this._onMouseEnter}"
+        @mouseleave="${this._onMouseLeave}"
+      >
+        ${this._renderDropdownMenu()}
+        <div class="content">
+          <div class="content-icon">
+            ${hasConditionalSteps ? html `<gv-icon class="content-icon-conditional" shape="design:conditional"></gv-icon>` : html ``}
+            ${icon ? html `<gv-image src="${icon}"></gv-image>` : html ``}
+          </div>
+
+          ${icon == null && notFound ? html `<gv-icon class="not-found__icon" shape="finance:folder-error"></gv-icon>` : ''}
+          <div>
+            <div class="name">${name}</div>
+            <div class="description">${description}</div>
+          </div>
+        </div>
+      </div> `;
+        }
+        else {
+            return html `<div class="drop-area"></div>`;
+        }
+    }
+    static get styles() {
+        return [
+            // language=CSS
+            css `
+        :host {
+          box-sizing: border-box;
+          margin: 0.2rem;
+          display: block;
+        }
+
+        :host(:active) {
+          outline: none;
+        }
+
+        :host([dragging]) {
+          opacity: 0.5;
+        }
+
+        gv-dropdown-menu {
+          position: absolute;
+          right: 0;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: right;
+          top: -1px;
+          bottom: -1px;
+          z-index: 10;
+          --gv-dropdown-menu--bdw: 0 0 0 1px;
+          --gv-dropdown-menu--p: 0.1rem 0.3rem;
+          --gv-dropdown-menu--gg: 0;
+        }
+
+        gv-switch {
+          margin: 0.2rem 0;
+        }
+
+        :host([hover]) .drop-area {
+          transform: translateY(-4px);
+          box-shadow: 0 0 0 1px #5a7684, 0 1px 3px #5a7684;
+          border-color: transparent;
+        }
+
+        :host([dragging]) .drop-area {
+          transform: translateY(-4px);
+        }
+
+        :host([editing]) .drop-area {
+          border-color: #5a7684;
+          transform: translateY(-4px);
+          box-shadow: 0 0 0 1px #5a7684, 0 1px 3px #5a7684;
+          transition: all 0.2s;
+        }
+
+        :host([w-lt-200]) gv-image {
+          position: absolute;
+          opacity: 0.1;
+          width: 100%;
+        }
+
+        :host([w-lt-200]) .drop-area:hover gv-image {
+          opacity: 1;
+        }
+
+        :host([w-lt-200]) .content-icon {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+        }
+
+        :host([w-lt-100]) .description {
+          display: none;
+        }
+
+        :host([empty]) .drop-area {
+          position: relative;
+          background-color: transparent;
+          border: 2px dashed #bfbfbf;
+          font-size: 14px;
+        }
+
+        .description {
+          line-height: 14px;
+          font-size: 12px;
+          max-height: 42px;
+          overflow: hidden;
+        }
+
+        .drop-area {
+          position: relative;
+          border: 2px dashed #bfbfbf;
+          border-radius: 4px;
+          height: 80px;
+          min-width: 80px;
+          margin: 4px;
+          padding: 4px;
+          word-break: break-word;
+          display: flex;
+          align-items: center;
+          text-align: center;
+          justify-content: center;
+          flex-direction: column;
+          --gv-button--fz: 11px;
+          flex: 1;
+          transition: color 150ms ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border 0.3s ease-in-out;
+          background-color: white;
+        }
+
+        .drop-area.disabled {
+          /*opacity: 0.7;*/
+          /*background-color: #BFBFBF; !* fallback color if gradients are not supported *!*/
+          /*border-color: white;*/
+          text-decoration: line-through;
+          font-style: italic;
+        }
+
+        .drop-area.not-found {
+          border-color: var(--gv-theme-color-warning-light, #ffb74d);
+        }
+
+        .drop-area.has-icon {
+          padding-left: 0;
+          text-align: left;
+        }
+
+        .drop-area.has-icon .content {
+          justify-content: left;
+        }
+
+        .drop-area.is-assigned {
+          border-style: solid;
+        }
+
+        :host([hover]) .drop-area.is-assigned:not(.not-found) {
+          cursor: grab;
+        }
+
+        :host([hover]) .drop-area.is-assigned:not(.not-found):active {
+          cursor: grabbing;
+        }
+
+        :host([readonly]) .drop-area.is-assigned:not(.not-found),
+        :host([readonly]) .drop-area.is-assigned:not(.not-found):active {
+          cursor: pointer;
+        }
+
+        .content {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-align: center;
+          width: 100%;
+        }
+
+        .content > div,
+        .content > mark {
+          width: 100%;
+        }
+
+        .content-icon {
+          flex: 0 1 0%;
+          display: flex;
+          margin: 0.2rem;
+        }
+        .content-icon-conditional {
+          position: absolute;
+          z-index: 10;
+          margin: 0.2rem;
+        }
+
+        gv-image {
+          height: 80px;
+          width: 80px;
+        }
+
+        .not-found__icon {
+          --gv-icon--c: var(--gv-theme-color-warning-light, #ffb74d);
+          height: 60px;
+          width: 60px;
+          margin: 0.2rem;
+          justify-content: center;
+          align-items: center;
+        }
+
+        .drop-area-confirm {
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          background-color: white;
+        }
+      `,
+        ];
+    }
+}
+export class PolicyDraggable {
+    static parse(str) {
+        const data = JSON.parse(str);
+        return new PolicyDraggable(data.policy, data.sourcePosition, data.sourceFlowKey, data.sourceFlowId, data.flowStep);
+    }
+    constructor(policy, sourcePosition, sourceFlowKey, sourceFlowId, flowStep) {
+        this.policy = policy;
+        this.sourcePosition = sourcePosition;
+        this.sourceFlowKey = sourceFlowKey;
+        this.sourceFlowId = sourceFlowId;
+        this.flowStep = flowStep;
+    }
+    toString() {
+        return JSON.stringify(this);
+    }
+}
+window.customElements.define('gv-flow-step', GvFlowStep);