@gravitee/ui-components 3.25.3-typescript-50960c3 → 3.25.3-typescript-9d19b68

package/src/molecules/gv-plans.js

@@ -1 +1,400 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvPlans=void 0;const e=require("lit/directives/class-map"),t=require("lit"),i=require("../lib/events"),s=require("../lib/style"),r=require("../lib/i18n"),n=require("../styles/link"),a=require("lit/directives/repeat"),l=require("../styles/skeleton"),c=require("../styles/empty"),h=require("lit/directives/style-map");require("./../atoms/gv-icon");class o extends t.LitElement{static get properties(){return{plans:{type:Array},current:{type:Number},value:{type:String,reflect:!0},skeleton:{type:Boolean},size:{type:Number},_empty:{type:Boolean},_plans:{type:Array}}}static get styles(){return[c.empty,n.link,t.css`:host{display:block;box-sizing:border-box;margin:.2rem;--bgc:var(--gv-plans--bgc, var(--gv-theme-color, #5a7684));--fc:var(--gv-plans-font--c, var(--gv-theme-font-color-light, #ffffff));--gv-icon--c:var(--bgc)}.plans{display:flex;list-style-type:none;border-radius:2px;padding:0;margin:0;height:80px}.plan{flex:1;padding:16px;line-height:24px;cursor:pointer}.plan.active{background-color:var(--bgc);color:var(--fc);transition:all .2s ease-in}.name{font-size:var(--gv-theme-font-size-l,16px);font-weight:700}.description{font-size:var(--gv-theme-font-size-s,12px);--lh:var(--gv-theme-font-size-s, 12px);line-height:var(--lh);--max-lines:2;max-height:calc(var(--lh) * var(--max-lines));overflow:hidden}.selectors{display:flex}.selector{position:relative;flex:1;display:flex;justify-content:center}.active .triangle{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:9px solid var(--bgc)}.characteristics{margin-top:34px;border:1px solid var(--gv-plans-characteristics--bdc,var(--gv-theme-neutral-color,#f5f5f5));border-radius:4px;display:flex;padding:34px;text-align:center;justify-content:center;user-select:none}.characteristic{font-size:var(--gv-theme-font-size-m,14px);line-height:22px;font-weight:700;flex:1;margin:20px;display:flex;flex-direction:column;align-items:center}.circle{background-color:var(--gv-plans-characteristic--bgc,var(--gv-theme-color-light,#86c3d0));border-radius:50%;width:32px;height:32px;margin:10px;display:flex;justify-content:center;align-items:center}gv-icon{--gv-icon--s:var(--gv-plans-icon--s, 24px)}.skeleton{min-height:400px;margin:0 .2rem;opacity:.5}.link{text-decoration:underline}.pagination{display:flex;height:0}`,l.skeleton]}constructor(){super(),this.current=1,this.size=4,this._plans=[],this._empty=!0}get _characteristics(){if(this._plans.length>=this.current){const e=this._plans[this.current-1];if(e.characteristics&&e.characteristics.length>0)return e.characteristics;let t=[];if(e.validation)switch(e.validation.toUpperCase()){case"AUTO":t.push((0,r.i18n)("gv-plans.validation.auto"));break;case"MANUAL":t.push((0,r.i18n)("gv-plans.validation.manual"))}if(e.security)switch(e.security.toUpperCase()){case"API_KEY":t.push((0,r.i18n)("gv-plans.security.apiKey"));break;case"JWT":t.push((0,r.i18n)("gv-plans.security.jwt"));break;case"OAUTH2":t.push((0,r.i18n)("gv-plans.security.oauth2"));break;case"KEY_LESS":t=[],t.push((0,r.i18n)("gv-plans.security.keyLess"))}return 0===t.length&&t.push((0,r.i18n)("gv-plans.characteristics.empty")),t}return[]}set plans(e){this.skeleton=!0,Promise.resolve(e).then((e=>{if(e){if(this._empty=0===e.length,this._plans=e,!this._empty){const e=this._plans.find((e=>e.active));null==e?(this._plans[0].active=!0,this.value=this._plans[0].id):this.value=e.id}this.skeleton=!1}})).catch((e=>{this._error=!0,this._plans=[],this.skeleton=!1}))}to(e){e&&(this.value=e.id,this._plans=this._plans.map(((t,i)=>(JSON.stringify(t)===JSON.stringify(e)?(t.active=!0,this.current=i+1):t.active=!1,t))),this.dispatchEvent(new Event("input"),{bubbles:!0,cancelable:!0}))}_getPlanTitle(e){let t=e.name;return e.description&&(t+=`: ${e.description}`),t}_onRedirect(){(0,i.dispatchCustomEvent)(this,"redirect")}get hasPagination(){return this.size<this._plans.length}get hasLeft(){return this.hasPagination&&this.current>1}get hasRight(){return this.hasPagination&&this.current<this._plans.length}get plans(){if(this.hasPagination){const e=this._plans.slice(0,this.current),t=this._plans.slice(this.current),i=[e.pop()];return new Array(this.size-1).fill("").forEach(((s,r)=>{if(r%2==0&&e.length>0||0===t.length){const t=e.pop();i.unshift(t)}else if(t.length>0){const e=t.shift();i.push(e)}})),i}return this._plans}_renderHeader(i){return i.map(((i,s)=>t.html`<li @click="${this.to.bind(this,i)}" title="${this._getPlanTitle(i)}" class="${(0,e.classMap)({plan:!0,active:i.active})}"><div class="name">${i.name}</div><div class="description">${i.description}</div></li>`))}_renderTriangles(i){return i.map(((i,s)=>t.html`<div class="${(0,e.classMap)({selector:!0,active:i.active})}"><div class="triangle"></div></div>`))}_renderPagination(){return this.hasPagination?t.html`<div class="pagination">${this.hasLeft?t.html`<gv-icon @click="${this.toLeft}" shape="navigation:angle-left" class="link"></gv-icon>`:""}<div style="flex:1"></div>${this.hasRight?t.html`<gv-icon @click="${this.toRight}" shape="navigation:angle-right" class="link"></gv-icon>`:""}</div>`:""}render(){const i=(0,s.getCssVar)(this,"--gv-plans--bgc","#5A7684"),{r:n,g:l,b:c}=(0,s.hexToRGB)(i),o={backgroundColor:`rgba(${n}, ${l}, ${c}, 0.1)`,color:`rgba(${n}, ${l}, ${c}, 0.5)`};if(!this.skeleton){if(this._error)return t.html`<div class="error"><p>${(0,r.i18n)("gv-plans.error")}</p></div>`;if(this._empty)return t.html`<div class="empty"><p>${(0,r.i18n)("gv-plans.empty.title")}</p><a class="link" @click="${this._onRedirect}">${(0,r.i18n)("gv-plans.empty.redirect")}</a></div>`}const p={skeleton:this.skeleton},g=this.plans;return t.html`<div class="${(0,e.classMap)(p)}"><ul class="plans" style="${(0,h.styleMap)(o)}">${this._renderHeader(g)}</ul><div class="selectors">${this._renderTriangles(g)}</div>${this._renderPagination()} ${this.skeleton?"":t.html`<div class="characteristics">${(0,a.repeat)(this._characteristics,(e=>e),((e,i)=>t.html`<div class="characteristic"><div class="circle"><gv-icon shape="home:flower#2"></gv-icon></div><div>${e}</div></div>`))}</div>`}</div>`}toLeft(){this.to(this._plans[this.current-2])}toRight(){this.to(this._plans[this.current])}}exports.GvPlans=o,window.customElements.define("gv-plans",o);
+/*
+ * 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 { classMap } from 'lit/directives/class-map';
+import { css, LitElement, html } from 'lit';
+import { dispatchCustomEvent } from '../lib/events';
+import { getCssVar, hexToRGB } from '../lib/style';
+import { i18n } from '../lib/i18n';
+import { link } from '../styles/link';
+import { repeat } from 'lit/directives/repeat';
+import { skeleton } from '../styles/skeleton';
+import { empty } from '../styles/empty';
+import { styleMap } from 'lit/directives/style-map';
+import './../atoms/gv-icon';
+/**
+ * Plans
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires input - Native input event when plan change
+ * @fires gv-plans:redirect - Event when user click to redirect link when plans are empty
+ *
+ * @attr {Array} plans - Plans list
+ * @attr {Number} current - The current plan index
+ * @attr {String} value - The current plan id
+ * @attr {Boolean} skeleton - enable skeleton screen UI pattern (loading hint)
+ *
+ * @cssprop {Color} [--gv-plans--bgc=var(--gv-theme-color, #5a7684)] - Background color
+ * @cssprop {Color} [--gv-plans-font--c=var(--gv-theme-font-color-light, #ffffff)] - Font color
+ * @cssprop {Color} [--gv-plans-characteristic--bgc=var(--gv-theme-color-light, #86c3d0)] - Characteristic background color
+ * @cssprop {Color} [--gv-plans-characteristics--bdc=var(--gv-theme-neutral-color, #f5f5f5)] - Characteristics border color
+ * @cssprop {Length} [--gv-plans-icon--s=24px] - Height and icon width
+ */
+export class GvPlans extends LitElement {
+    static get properties() {
+        return {
+            /**
+             * This List of Plan
+             * @type Object https://github.com/gravitee-io/gravitee-clients-sdk/blob/master/model/plan.ts
+             * @attr
+             * @required
+             */
+            plans: { type: Array },
+            current: { type: Number },
+            value: { type: String, reflect: true },
+            skeleton: { type: Boolean },
+            size: { type: Number },
+            _empty: { type: Boolean },
+            _plans: { type: Array },
+        };
+    }
+    static get styles() {
+        return [
+            empty,
+            link,
+            // language=css
+            css `
+        :host {
+          display: block;
+          box-sizing: border-box;
+          margin: 0.2rem;
+          --bgc: var(--gv-plans--bgc, var(--gv-theme-color, #5a7684));
+          --fc: var(--gv-plans-font--c, var(--gv-theme-font-color-light, #ffffff));
+          --gv-icon--c: var(--bgc);
+        }
+
+        .plans {
+          display: flex;
+          list-style-type: none;
+          border-radius: 2px;
+          padding: 0;
+          margin: 0;
+          height: 80px;
+        }
+
+        .plan {
+          flex: 1;
+          padding: 16px;
+          line-height: 24px;
+          cursor: pointer;
+        }
+
+        .plan.active {
+          background-color: var(--bgc);
+          color: var(--fc);
+          transition: all 0.2s ease-in;
+        }
+
+        .name {
+          font-size: var(--gv-theme-font-size-l, 16px);
+          font-weight: bold;
+        }
+
+        .description {
+          font-size: var(--gv-theme-font-size-s, 12px);
+          --lh: var(--gv-theme-font-size-s, 12px);
+          line-height: var(--lh);
+          --max-lines: 2;
+          max-height: calc(var(--lh) * var(--max-lines));
+          overflow: hidden;
+        }
+
+        .selectors {
+          display: flex;
+        }
+
+        .selector {
+          position: relative;
+          flex: 1;
+          display: flex;
+          justify-content: center;
+        }
+
+        .active .triangle {
+          width: 0;
+          height: 0;
+          border-left: 7px solid transparent;
+          border-right: 7px solid transparent;
+          border-top: 9px solid var(--bgc);
+        }
+
+        .characteristics {
+          margin-top: 34px;
+          border: 1px solid var(--gv-plans-characteristics--bdc, var(--gv-theme-neutral-color, #f5f5f5));
+          border-radius: 4px;
+          display: flex;
+          padding: 34px;
+          text-align: center;
+          justify-content: center;
+          user-select: none;
+        }
+
+        .characteristic {
+          font-size: var(--gv-theme-font-size-m, 14px);
+          line-height: 22px;
+          font-weight: bold;
+          flex: 1;
+          margin: 20px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        }
+
+        .circle {
+          background-color: var(--gv-plans-characteristic--bgc, var(--gv-theme-color-light, #86c3d0));
+          border-radius: 50%;
+          width: 32px;
+          height: 32px;
+          margin: 10px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
+        gv-icon {
+          --gv-icon--s: var(--gv-plans-icon--s, 24px);
+        }
+
+        .skeleton {
+          min-height: 400px;
+          margin: 0 0.2rem;
+          opacity: 0.5;
+        }
+
+        .link {
+          text-decoration: underline;
+        }
+
+        .pagination {
+          display: flex;
+          height: 0;
+        }
+      `,
+            skeleton,
+        ];
+    }
+    constructor() {
+        super();
+        this.current = 1;
+        this.size = 4;
+        this._plans = [];
+        this._empty = true;
+    }
+    get _characteristics() {
+        if (this._plans.length >= this.current) {
+            const plan = this._plans[this.current - 1];
+            if (plan.characteristics && plan.characteristics.length > 0) {
+                return plan.characteristics;
+            }
+            let characteristics = [];
+            if (plan.validation) {
+                switch (plan.validation.toUpperCase()) {
+                    case 'AUTO':
+                        characteristics.push(i18n('gv-plans.validation.auto'));
+                        break;
+                    case 'MANUAL':
+                        characteristics.push(i18n('gv-plans.validation.manual'));
+                        break;
+                }
+            }
+            if (plan.security) {
+                switch (plan.security.toUpperCase()) {
+                    case 'API_KEY':
+                        characteristics.push(i18n('gv-plans.security.apiKey'));
+                        break;
+                    case 'JWT':
+                        characteristics.push(i18n('gv-plans.security.jwt'));
+                        break;
+                    case 'OAUTH2':
+                        characteristics.push(i18n('gv-plans.security.oauth2'));
+                        break;
+                    case 'KEY_LESS':
+                        characteristics = [];
+                        characteristics.push(i18n('gv-plans.security.keyLess'));
+                        break;
+                }
+            }
+            if (characteristics.length === 0) {
+                characteristics.push(i18n('gv-plans.characteristics.empty'));
+            }
+            return characteristics;
+        }
+        return [];
+    }
+    set plans(plans) {
+        this.skeleton = true;
+        Promise.resolve(plans)
+            .then((plans) => {
+            if (plans) {
+                this._empty = plans.length === 0;
+                this._plans = plans;
+                if (!this._empty) {
+                    const activePlan = this._plans.find((p) => p.active);
+                    if (activePlan == null) {
+                        this._plans[0].active = true;
+                        this.value = this._plans[0].id;
+                    }
+                    else {
+                        this.value = activePlan.id;
+                    }
+                }
+                this.skeleton = false;
+            }
+        })
+            .catch((e) => {
+            this._error = true;
+            this._plans = [];
+            this.skeleton = false;
+        });
+    }
+    to(plan) {
+        if (plan) {
+            this.value = plan.id;
+            this._plans = this._plans.map((p, index) => {
+                if (JSON.stringify(p) === JSON.stringify(plan)) {
+                    p.active = true;
+                    this.current = index + 1;
+                }
+                else {
+                    p.active = false;
+                }
+                return p;
+            });
+            this.dispatchEvent(new Event('input'), { bubbles: true, cancelable: true });
+        }
+    }
+    _getPlanTitle(plan) {
+        let title = plan.name;
+        if (plan.description) {
+            title += `: ${plan.description}`;
+        }
+        return title;
+    }
+    _onRedirect() {
+        dispatchCustomEvent(this, 'redirect');
+    }
+    get hasPagination() {
+        return this.size < this._plans.length;
+    }
+    get hasLeft() {
+        return this.hasPagination && this.current > 1;
+    }
+    get hasRight() {
+        return this.hasPagination && this.current < this._plans.length;
+    }
+    get plans() {
+        if (this.hasPagination) {
+            const left = this._plans.slice(0, this.current);
+            const right = this._plans.slice(this.current);
+            const plans = [left.pop()];
+            new Array(this.size - 1).fill('').forEach((e, i) => {
+                if ((i % 2 === 0 && left.length > 0) || right.length === 0) {
+                    const a = left.pop();
+                    plans.unshift(a);
+                }
+                else if (right.length > 0) {
+                    const b = right.shift();
+                    plans.push(b);
+                }
+            });
+            return plans;
+        }
+        return this._plans;
+    }
+    _renderHeader(plans) {
+        return plans.map((plan, index) => {
+            return html `<li
+        @click="${this.to.bind(this, plan)}"
+        title="${this._getPlanTitle(plan)}"
+        class="${classMap({
+                plan: true,
+                active: plan.active,
+            })}"
+      >
+        <div class="name">${plan.name}</div>
+        <div class="description">${plan.description}</div>
+      </li>`;
+        });
+    }
+    _renderTriangles(plans) {
+        return plans.map((plan, index) => {
+            return html `<div
+        class="${classMap({
+                selector: true,
+                active: plan.active,
+            })}"
+      >
+        <div class="triangle"></div>
+      </div>`;
+        });
+    }
+    _renderPagination() {
+        if (this.hasPagination) {
+            return html ` <div class="pagination">
+        ${!this.hasLeft ? '' : html `<gv-icon @click="${this.toLeft}" shape="navigation:angle-left" class="link"></gv-icon>`}
+        <div style="flex: 1;"></div>
+        ${!this.hasRight ? '' : html `<gv-icon @click="${this.toRight}" shape="navigation:angle-right" class="link"></gv-icon>`}
+      </div>`;
+        }
+        return '';
+    }
+    render() {
+        const bgc = getCssVar(this, '--gv-plans--bgc', '#5A7684');
+        const { r, g, b } = hexToRGB(bgc);
+        const style = {
+            backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)`,
+            color: `rgba(${r}, ${g}, ${b}, 0.5)`,
+        };
+        if (!this.skeleton) {
+            if (this._error) {
+                return html `<div class="error">
+          <p>${i18n('gv-plans.error')}</p>
+        </div>`;
+            }
+            else if (this._empty) {
+                return html ` <div class="empty">
+          <p>${i18n('gv-plans.empty.title')}</p>
+          <a class="link" @click="${this._onRedirect}">${i18n('gv-plans.empty.redirect')}</a>
+        </div>`;
+            }
+        }
+        const classes = { skeleton: this.skeleton };
+        const currentPlans = this.plans;
+        return html `<div class="${classMap(classes)}">
+      <ul class="plans" style="${styleMap(style)}">
+        ${this._renderHeader(currentPlans)}
+      </ul>
+      <div class="selectors">${this._renderTriangles(currentPlans)}</div>
+      ${this._renderPagination()}
+      ${!this.skeleton
+            ? html `<div class="characteristics">
+            ${repeat(this._characteristics, (characteristic) => characteristic, (characteristic, index) => html `<div class="characteristic">
+                  <div class="circle"><gv-icon shape="home:flower#2"></gv-icon></div>
+                  <div>${characteristic}</div>
+                </div>`)}
+          </div>`
+            : ''}
+    </div> `;
+    }
+    toLeft() {
+        this.to(this._plans[this.current - 2]);
+    }
+    toRight() {
+        this.to(this._plans[this.current]);
+    }
+}
+window.customElements.define('gv-plans', GvPlans);