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

package/src/molecules/gv-option.js

@@ -1,242 +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 { css, LitElement, html } from 'lit';
-import '../atoms/gv-button';
-import { repeat } from 'lit/directives/repeat';
-import { classMap } from 'lit/directives/class-map';
-import { dispatchCustomEvent } from '../lib/events';
-import { ifDefined } from 'lit/directives/if-defined';
-import { styleMap } from 'lit/directives/style-map';
-
-/**
- * Option component
- *
- * ## Details
- * * has @theme facet
- *
- * @attr {Array<{id, title, icon?, active?, description?, label?}>} options - An array of options.
- * @attr {String|Array} value - Selected value id, array with multiple option ids.
- * @attr {Boolean} multiple - If true, can choose several option
- * @attr {Boolean} reverse - If true, title and description are reversed.
- * @attr {Boolean} small - If true, use small button for options
- * @attr {Boolean} outlined - If true, use outlined button for options
- *
- * @cssprop {Color} [--gv-option--bgc=var(--gv-theme-neutral-color-dark, #bfbfbf)] - Background color
- * @cssprop {Length} [--gv-option--bdrs=0.15rem] - Border radius
- * @cssprop {Length} [--gv-option-button--maw=200px] - Button max width
- * @cssprop {Length} [--gv-option-icon--s=64px] - Icon size
- */
-export class GvOption extends LitElement {
-  static get properties() {
-    return {
-      options: { type: Array },
-      _options: { type: Array, attribute: false },
-      _hasDescription: { type: Array, attribute: false },
-      value: { type: String, reflect: true },
-      multiple: { type: Boolean },
-      reverse: { type: Boolean },
-      small: { type: Boolean },
-      outlined: { type: Boolean },
-      disabled: { type: Boolean, reflect: true },
-    };
-  }
-
-  static get styles() {
-    return [
-      // language=CSS
-      css`
-        :host {
-          box-sizing: border-box;
-          display: inline-block;
-          --gv-button--p: 5px;
-          margin: 0.2rem;
-          --bdrs: var(--gv-option--bdrs, 0.15rem);
-          --maw: var(--gv-option-button--maw, 200px);
-        }
-
-        .box.description {
-          display: grid;
-          grid-gap: 0.5rem;
-        }
-
-        gv-button {
-          margin: 0;
-        }
-
-        gv-button.description {
-          flex: 1 1 var(--maw);
-          max-width: var(--maw);
-        }
-
-        gv-button:not(.description) {
-          margin: 0;
-          --gv-button--bdrs: 0;
-          --gv-button--bgc: var(--gv-option--bgc, var(--gv-theme-neutral-color-dark, #bfbfbf));
-        }
-
-        gv-button:not(.description).entry {
-          --gv-button--bdrs: var(--bdrs) 0 0 var(--bdrs);
-        }
-
-        gv-button:not(.description).exit {
-          --gv-button--bdrs: 0 var(--bdrs) var(--bdrs) 0;
-        }
-
-        .content {
-          white-space: pre-line;
-          --gv-icon--s: var(--gv-option-icon--s, 64px);
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          height: 100%;
-          text-transform: none;
-        }
-
-        gv-image {
-          height: 64px;
-          width: 64px;
-          --gv-image--of: fill;
-          display: inline-flex;
-        }
-
-        .reverse .content {
-          flex-direction: column-reverse;
-        }
-
-        .title {
-          font-size: var(--gv-theme-font-size-l, 18px);
-          font-weight: bold;
-          margin: 0.5rem 0;
-        }
-
-        gv-button.description {
-          margin: 0.5rem;
-        }
-      `,
-    ];
-  }
-
-  constructor() {
-    super();
-    this.multiple = false;
-    this.reverse = false;
-  }
-
-  _onClick(option) {
-    this.setValue(option);
-    dispatchCustomEvent(this, 'select', option);
-    this.dispatchEvent(new Event('input'), { bubbles: true, cancelable: true });
-  }
-
-  async performUpdate() {
-    this.shadowRoot.querySelectorAll('gv-button').forEach((btn) => btn.performUpdate());
-    return super.performUpdate();
-  }
-
-  setValue(option) {
-    if (option) {
-      if (this.multiple) {
-        if (this.value.includes(option.id)) {
-          this.value = this.value.filter((optId) => {
-            return optId !== option.id;
-          });
-        } else {
-          this.value = [...this.value, option.id];
-        }
-      } else {
-        this.value = option.id;
-      }
-    }
-  }
-
-  set options(options) {
-    if (options) {
-      Promise.all(options).then((_options) => {
-        this._options = _options;
-        this._hasDescription = this._options.find((opt) => opt.description != null) != null;
-      });
-    }
-  }
-
-  isActive(option) {
-    if (this.value) {
-      if (this.multiple) {
-        return this.value.includes(option.id);
-      } else {
-        return this.value === option.id;
-      }
-    }
-    return false;
-  }
-
-  _renderOption(option, index) {
-    const isActive = this.isActive(option);
-    const outlined = this.outlined || (!isActive && this._hasDescription);
-    return html`<gv-button
-      .icon=${ifDefined(!this._hasDescription ? option.icon : null)}
-      .iconRight=${ifDefined(!option.icon && option.iconRight ? option.iconRight : null)}
-      .title="${ifDefined(option.title)}"
-      .primary="${isActive}"
-      .small="${this.small}"
-      .disabled="${option.disabled || this.disabled}"
-      @click="${this._onClick.bind(this, option)}"
-      .outlined="${outlined}"
-      class="${classMap({
-        active: isActive,
-        entry: index === 0,
-        exit: index === this._options.length - 1,
-        description: option.description != null,
-      })}"
-    >
-      ${!this._hasDescription
-        ? option.title != null
-          ? option.label || option.title
-          : ''
-        : html`<div class="content">
-            ${option.icon
-              ? html`<gv-icon shape="${option.icon}"></gv-icon>`
-              : option.image
-              ? html`<gv-image src="${option.image}"></gv-image>`
-              : ''}
-            <div class="title">${option.title}</div>
-            <div class="description-content" .innerHTML="${option.description}"></div>
-          </div>`}
-    </gv-button>`;
-  }
-
-  render() {
-    if (this._options) {
-      const classes = {
-        box: true,
-        description: this._hasDescription,
-        reverse: this.reverse,
-      };
-      return html`<div
-        class="${classMap(classes)}"
-        style="${styleMap({ 'grid-template-columns': `repeat(${this._options.length}, auto)` })}"
-      >
-        ${repeat(
-          this._options,
-          (option) => option,
-          (option, index) => html`${this._renderOption(option, index)}`,
-        )}
-      </div>`;
-    }
-    return html``;
-  }
-}
-
-window.customElements.define('gv-option', GvOption);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvOption=void 0;const t=require("lit");require("../atoms/gv-button");const e=require("lit/directives/repeat"),i=require("lit/directives/class-map"),s=require("../lib/events"),n=require("lit/directives/if-defined"),r=require("lit/directives/style-map");class o extends t.LitElement{static get properties(){return{options:{type:Array},_options:{type:Array,attribute:!1},_hasDescription:{type:Array,attribute:!1},value:{type:String,reflect:!0},multiple:{type:Boolean},reverse:{type:Boolean},small:{type:Boolean},outlined:{type:Boolean},disabled:{type:Boolean,reflect:!0}}}static get styles(){return[t.css`:host{box-sizing:border-box;display:inline-block;--gv-button--p:5px;margin:.2rem;--bdrs:var(--gv-option--bdrs, 0.15rem);--maw:var(--gv-option-button--maw, 200px)}.box.description{display:grid;grid-gap:.5rem}gv-button{margin:0}gv-button.description{flex:1 1 var(--maw);max-width:var(--maw)}gv-button:not(.description){margin:0;--gv-button--bdrs:0;--gv-button--bgc:var(--gv-option--bgc, var(--gv-theme-neutral-color-dark, #bfbfbf))}gv-button:not(.description).entry{--gv-button--bdrs:var(--bdrs) 0 0 var(--bdrs)}gv-button:not(.description).exit{--gv-button--bdrs:0 var(--bdrs) var(--bdrs) 0}.content{white-space:pre-line;--gv-icon--s:var(--gv-option-icon--s, 64px);display:flex;flex-direction:column;align-items:center;height:100%;text-transform:none}gv-image{height:64px;width:64px;--gv-image--of:fill;display:inline-flex}.reverse .content{flex-direction:column-reverse}.title{font-size:var(--gv-theme-font-size-l,18px);font-weight:700;margin:.5rem 0}gv-button.description{margin:.5rem}`]}constructor(){super(),this.multiple=!1,this.reverse=!1}_onClick(t){this.setValue(t),(0,s.dispatchCustomEvent)(this,"select",t),this.dispatchEvent(new Event("input"),{bubbles:!0,cancelable:!0})}async performUpdate(){return this.shadowRoot.querySelectorAll("gv-button").forEach((t=>t.performUpdate())),super.performUpdate()}setValue(t){t&&(this.multiple?this.value.includes(t.id)?this.value=this.value.filter((e=>e!==t.id)):this.value=[...this.value,t.id]:this.value=t.id)}set options(t){t&&Promise.all(t).then((t=>{this._options=t,this._hasDescription=null!=this._options.find((t=>null!=t.description))}))}isActive(t){return!!this.value&&(this.multiple?this.value.includes(t.id):this.value===t.id)}_renderOption(e,s){const r=this.isActive(e),o=this.outlined||!r&&this._hasDescription;return t.html`<gv-button .icon="${(0,n.ifDefined)(this._hasDescription?null:e.icon)}" .iconRight="${(0,n.ifDefined)(!e.icon&&e.iconRight?e.iconRight:null)}" .title="${(0,n.ifDefined)(e.title)}" .primary="${r}" .small="${this.small}" .disabled="${e.disabled||this.disabled}" @click="${this._onClick.bind(this,e)}" .outlined="${o}" class="${(0,i.classMap)({active:r,entry:0===s,exit:s===this._options.length-1,description:null!=e.description})}">${this._hasDescription?t.html`<div class="content">${e.icon?t.html`<gv-icon shape="${e.icon}"></gv-icon>`:e.image?t.html`<gv-image src="${e.image}"></gv-image>`:""}<div class="title">${e.title}</div><div class="description-content" .innerHTML="${e.description}"></div></div>`:null!=e.title?e.label||e.title:""}</gv-button>`}render(){if(this._options){const s={box:!0,description:this._hasDescription,reverse:this.reverse};return t.html`<div class="${(0,i.classMap)(s)}" style="${(0,r.styleMap)({"grid-template-columns":`repeat(${this._options.length}, auto)`})}">${(0,e.repeat)(this._options,(t=>t),((e,i)=>t.html`${this._renderOption(e,i)}`))}</div>`}return t.html``}}exports.GvOption=o,window.customElements.define("gv-option",o);

package/src/molecules/gv-plans.d.ts

@@ -0,0 +1,73 @@
+/**
+ * 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(): {
+        /**
+         * This List of Plan
+         * @type Object https://github.com/gravitee-io/gravitee-clients-sdk/blob/master/model/plan.ts
+         * @attr
+         * @required
+         */
+        plans: Object;
+        current: {
+            type: NumberConstructor;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        skeleton: {
+            type: BooleanConstructor;
+        };
+        size: {
+            type: NumberConstructor;
+        };
+        _empty: {
+            type: BooleanConstructor;
+        };
+        _plans: {
+            type: ArrayConstructor;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    current: number;
+    size: number;
+    _plans: any[];
+    _empty: boolean;
+    get _characteristics(): any;
+    set plans(arg: any[]);
+    get plans(): any[];
+    skeleton: boolean | undefined;
+    value: any;
+    _error: boolean | undefined;
+    to(plan: any): void;
+    _getPlanTitle(plan: any): any;
+    _onRedirect(): void;
+    get hasPagination(): boolean;
+    get hasLeft(): boolean;
+    get hasRight(): boolean;
+    _renderHeader(plans: any): any;
+    _renderTriangles(plans: any): any;
+    _renderPagination(): "" | import("lit-html").TemplateResult<1>;
+    toLeft(): void;
+    toRight(): void;
+}
+import { LitElement } from "lit-element/lit-element";