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

package/src/molecules/gv-modal.js

@@ -1,213 +1 @@
-/*
- * Copyright (C) 2021 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 '../atoms/gv-icon';
-import { dispatchCustomEvent } from '../lib/events';
-
-/**
- * A modal that shows up on top of your page
- *
- * @fires gv-modal:closed - Event fired when modal is closed.
- *
- * @cssprop {Length} [--gv-modal--anim-duration=0.3s] - Duration of the animation
- * @cssprop {Length} [--gv-modal--z=100] - z-index for modal
- * @cssprop {Color} [--gv-modal--bgc=rgba(30, 30, 30, 0.6)] - Modal background color
- * @cssprop {Length} [--gv-modal-content--z=101] - z-index for modal content
- * @cssprop {Length} [--gv-modal--w=280px] - model width
- * @cssprop {Length} [--gv-modal--miw=250px] - modal min-width
- * @cssprop {Length} [--gv-modal--maw=100vw] - modal max-width
- * @cssprop {Length} [--gv-modal--h=auto] - modal height
- * @cssprop {Length} [--gv-modal--mih=auto] - modal min height
- * @cssprop {Length} [--gv-modal--mah=100vh] - modal max height
- * @cssprop {Color} [--gv-modal-content--bgc=var(--gv-theme-neutral-color-light, #efefef)] - Modal content background color
- * @cssprop {String} [--gv-modal--bxsh=0px 0px 16px #383e3f] - Modal box shadow
- * @cssprop {Length} [--gv-modal--bdrs=4px] - Modal border radius
- * @cssprop {Length} [--gv-modal--p=1em] - Modal content padding
- * @cssprop {Length} [--gv-modal-close-icon--s=24px] - Modal close icon size
- */
-export class GvModal extends LitElement {
-  static get properties() {
-    return {
-      _toChange: { type: Boolean },
-      /**
-       * If true the modal box is in opened status.
-       */
-      opened: { type: Boolean },
-      /**
-       * If true the modal box displays a close icon
-       */
-      showCloseIcon: { type: Boolean },
-      /**
-       * The title of the modal dialog
-       */
-      // ⚠️ it cannot be simply named `title` otherwise the browser consider it
-      // as a `title` property and use it to display a tooltip
-      modalTitle: { type: String },
-      /**
-       * If true the modal box blocks the screen. That is, when you click in the background layer, the modal box do not close.
-       */
-      blocking: { type: Boolean },
-    };
-  }
-
-  constructor() {
-    super();
-    this._toChange = false;
-    this.opened = false;
-    this.showCloseIcon = false;
-    this.blocking = false;
-  }
-
-  static get styles() {
-    return [
-      // language=css
-      css`
-        * {
-          box-sizing: border-box;
-        }
-        :host {
-          display: block;
-        }
-        section {
-          position: fixed;
-          left: 0;
-          top: 0;
-          height: 100vh;
-          width: 100vw;
-          display: none;
-          transition: opacity var(--gv-modal--anim-duration, 0.3s) ease-in;
-          -webkit-transition: opacity var(--gv-modal--anim-duration, 0.3s) ease-in;
-          align-items: center;
-          justify-content: center;
-          z-index: var(--gv-modal--z, 100);
-          background-color: var(--gv-modal--bgc, rgba(30, 30, 30, 0.6));
-        }
-        .content {
-          display: block;
-          position: relative;
-          z-index: var(--gv-modal-content--z, 101);
-          width: var(--gv-modal--w, 280px);
-          min-width: var(--gv-modal--miw, 250px);
-          max-width: var(--gv-modal--maw, 100vw);
-          height: var(--gv-modal--h, auto);
-          min-height: var(--gv-modal--mih, auto);
-          max-height: var(--gv-modal--mah, 100vh);
-          background-color: var(--gv-modal-content--bgc, var(--gv-theme-neutral-color-light, #efefef));
-          box-shadow: var(--gv-modal--bxsh, 0px 0px 16px #383e3f);
-          border-radius: var(--gv-modal--bdrs, 4px);
-          padding: var(--gv-modal--p, 1em);
-        }
-        article {
-          overflow: auto;
-          max-height: 100%;
-          height: 100%;
-        }
-        .transparent {
-          opacity: 0;
-        }
-        .opaque {
-          opacity: 1;
-          display: flex !important;
-        }
-        .opened {
-          display: flex !important;
-        }
-        .header {
-          display: flex;
-          flex-direction: row;
-          justify-content: space-between;
-          align-items: center;
-          padding-bottom: 10px;
-        }
-        .title {
-          font-weight: bold;
-          font-size: large;
-        }
-        gv-icon {
-          --gv-icon--s: var(--gv-modal-close-icon--s, 24px);
-          display: inline-block;
-          z-index: 1002;
-          cursor: pointer;
-        }
-      `,
-    ];
-  }
-
-  render() {
-    return html`
-      <section
-        class="${this.getModalClass(this.opened, this._toChange)}"
-        @click="${this._backgroundModalClick}"
-        @transitionend="${this.animationEnd}"
-      >
-        <div class="content" @click="${this.contentClick}">
-          <div class="header">
-            <span class="title">${this.modalTitle}</span>
-            ${this.showCloseIcon ? html`<gv-icon shape="general:close" @click="${this.close}"></gv-icon>` : ''}
-          </div>
-          <article>
-            <slot></slot>
-          </article>
-        </div>
-      </section>
-    `;
-  }
-
-  getModalClass(opened, _toChange) {
-    if (!opened && !_toChange) {
-      return 'transparent';
-    }
-    if (opened && _toChange) {
-      return 'transparent opened';
-    }
-    if (opened && !_toChange) {
-      return 'opaque';
-    }
-    if (!opened && _toChange) {
-      return 'transparent opened';
-    }
-  }
-
-  open() {
-    this.opened = true;
-    this._toChange = true;
-    setTimeout(() => {
-      this._toChange = false;
-    }, 50);
-  }
-
-  _backgroundModalClick(e) {
-    if (!this.blocking) {
-      this.close();
-      dispatchCustomEvent(this, 'closed');
-    }
-  }
-
-  close() {
-    this.opened = false;
-    this._toChange = true;
-    dispatchCustomEvent(this, 'closed');
-  }
-
-  animationEnd() {
-    this._toChange = false;
-  }
-
-  contentClick(e) {
-    e.stopPropagation();
-  }
-}
-window.customElements.define('gv-modal', GvModal);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvModal=void 0;const t=require("lit");require("../atoms/gv-icon");const e=require("../lib/events");class o extends t.LitElement{static get properties(){return{_toChange:{type:Boolean},opened:{type:Boolean},showCloseIcon:{type:Boolean},modalTitle:{type:String},blocking:{type:Boolean}}}constructor(){super(),this._toChange=!1,this.opened=!1,this.showCloseIcon=!1,this.blocking=!1}static get styles(){return[t.css`*{box-sizing:border-box}:host{display:block}section{position:fixed;left:0;top:0;height:100vh;width:100vw;display:none;transition:opacity var(--gv-modal--anim-duration,.3s) ease-in;-webkit-transition:opacity var(--gv-modal--anim-duration,.3s) ease-in;align-items:center;justify-content:center;z-index:var(--gv-modal--z,100);background-color:var(--gv-modal--bgc,rgba(30,30,30,.6))}.content{display:block;position:relative;z-index:var(--gv-modal-content--z,101);width:var(--gv-modal--w,280px);min-width:var(--gv-modal--miw,250px);max-width:var(--gv-modal--maw,100vw);height:var(--gv-modal--h,auto);min-height:var(--gv-modal--mih,auto);max-height:var(--gv-modal--mah,100vh);background-color:var(--gv-modal-content--bgc,var(--gv-theme-neutral-color-light,#efefef));box-shadow:var(--gv-modal--bxsh,0 0 16px #383e3f);border-radius:var(--gv-modal--bdrs,4px);padding:var(--gv-modal--p,1em)}article{overflow:auto;max-height:100%;height:100%}.transparent{opacity:0}.opaque{opacity:1;display:flex!important}.opened{display:flex!important}.header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-bottom:10px}.title{font-weight:700;font-size:large}gv-icon{--gv-icon--s:var(--gv-modal-close-icon--s, 24px);display:inline-block;z-index:1002;cursor:pointer}`]}render(){return t.html`<section class="${this.getModalClass(this.opened,this._toChange)}" @click="${this._backgroundModalClick}" @transitionend="${this.animationEnd}"><div class="content" @click="${this.contentClick}"><div class="header"><span class="title">${this.modalTitle}</span> ${this.showCloseIcon?t.html`<gv-icon shape="general:close" @click="${this.close}"></gv-icon>`:""}</div><article><slot></slot></article></div></section>`}getModalClass(t,e){return t||e?t&&e?"transparent opened":t&&!e?"opaque":!t&&e?"transparent opened":void 0:"transparent"}open(){this.opened=!0,this._toChange=!0,setTimeout((()=>{this._toChange=!1}),50)}_backgroundModalClick(t){this.blocking||(this.close(),(0,e.dispatchCustomEvent)(this,"closed"))}close(){this.opened=!1,this._toChange=!0,(0,e.dispatchCustomEvent)(this,"closed")}animationEnd(){this._toChange=!1}contentClick(t){t.stopPropagation()}}exports.GvModal=o,window.customElements.define("gv-modal",o);

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

@@ -0,0 +1,41 @@
+/**
+ * A main nav
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-nav:click - Custom event when nav item is clicked
+ *
+ * @attr {Array<{active: Boolean, icon: String, path: String, title: Promise<String>, target: String}>} routes - definition of routes
+ */
+export class GvNav extends LitElement {
+    static get properties(): {
+        routes: {
+            type: ArrayConstructor;
+        };
+        _routes: {
+            type: ArrayConstructor;
+        };
+        small: {
+            type: BooleanConstructor;
+        };
+        _compact: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+        vertical: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    _onClick(event: any): void;
+    _isLocked: boolean | undefined;
+    /** @protected */
+    protected _routes: any[];
+    vertical: boolean;
+    set routes(arg: any);
+    _getLink(route: any, index: any): Promise<void | import("lit-html").TemplateResult<1>>;
+    _compact: boolean | undefined;
+}
+import { LitElement } from "lit-element/lit-element";

package/src/molecules/gv-nav.js

@@ -1,196 +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 { repeat } from 'lit/directives/repeat';
-import '../atoms/gv-link';
-import { until } from 'lit/directives/until';
-import { isSameRoutes } from '../lib/utils';
-import { dispatchCustomEvent } from '../lib/events';
-import { classMap } from 'lit/directives/class-map';
-
-/**
- * A main nav
- *
- * ## Details
- * * has @theme facet
- *
- * @fires gv-nav:click - Custom event when nav item is clicked
- *
- * @attr {Array<{active: Boolean, icon: String, path: String, title: Promise<String>, target: String}>} routes - definition of routes
- */
-export class GvNav extends LitElement {
-  static get properties() {
-    return {
-      routes: { type: Array },
-      _routes: { type: Array },
-      small: { type: Boolean },
-      _compact: { type: Boolean, attribute: false },
-      vertical: { type: Boolean, reflect: true },
-    };
-  }
-
-  static get styles() {
-    return [
-      // language=CSS
-      css`
-        nav {
-          position: relative;
-          transition: all 150ms ease-in-out;
-        }
-
-        gv-link {
-          --gv-link--ta: end;
-        }
-
-        .vertical {
-          display: flex;
-          flex-direction: column;
-        }
-
-        .vertical gv-link {
-          width: 100%;
-        }
-
-        .compact {
-          --gv-link-a--ph: 10px;
-        }
-
-        #shadowLink {
-          position: absolute;
-          display: inline-flex;
-          opacity: 0.5;
-          top: 0;
-          left: 0;
-          transition: transform 250ms ease-in-out, width 250ms;
-        }
-      `,
-    ];
-  }
-
-  _onClick(event) {
-    event.stopPropagation();
-    const { detail } = event;
-    const { title, target } = detail;
-    if (target === '_blank') {
-      dispatchCustomEvent(this, 'click', detail);
-    } else {
-      if (!this._isLocked) {
-        this._isLocked = true;
-        let nextIndex = 0;
-        this._routes.forEach((route, index) => {
-          if (route.title === title) {
-            route.active = true;
-            nextIndex = index;
-          } else {
-            delete route.active;
-          }
-          return route;
-        });
-
-        const activeLink = this.shadowRoot.querySelector('gv-link[active]');
-        const nextLink = this.shadowRoot.querySelectorAll('gv-link')[nextIndex];
-        if (activeLink) {
-          const shadowLink = activeLink.cloneNode(true);
-          const { height, width } = activeLink.getBoundingClientRect();
-
-          shadowLink.id = 'shadowLink';
-          shadowLink.style.top = `${activeLink.offsetTop}px`;
-          shadowLink.style.left = `${activeLink.offsetLeft}px`;
-          shadowLink.style.width = `${width}px`;
-          shadowLink.style.height = `${height}px`;
-
-          activeLink.removeAttribute('active');
-          activeLink.style.height = `${height}px`;
-
-          this.shadowRoot.querySelector('nav').prepend(shadowLink);
-          const left = nextLink.offsetLeft - activeLink.offsetLeft;
-          const top = nextLink.offsetTop - activeLink.offsetTop;
-
-          shadowLink.style.transform = `translate(${left}px,${top}px)`;
-
-          setTimeout(() => {
-            nextLink.setAttribute('active', true);
-            this.shadowRoot.querySelector('nav').removeChild(shadowLink);
-            this._isLocked = false;
-            dispatchCustomEvent(this, 'click', detail);
-          }, 250);
-        } else {
-          nextLink.setAttribute('active', true);
-          this._isLocked = false;
-          dispatchCustomEvent(this, 'click', detail);
-        }
-      }
-    }
-  }
-
-  constructor() {
-    super();
-    /** @protected */
-    this._routes = [];
-    this.vertical = false;
-  }
-
-  set routes(routes) {
-    if (routes) {
-      Promise.resolve(routes).then((_routes) => {
-        if (!isSameRoutes(this._routes, _routes)) {
-          this._routes = _routes;
-        }
-      });
-    }
-  }
-
-  _getLink(route, index) {
-    return Promise.resolve(route)
-      .then((_route) => {
-        return html` <gv-link
-          @gv-link:click=${this._onClick}
-          .active="${_route.active}"
-          .icon="${_route.icon}"
-          .path="${_route.path}"
-          .target="${_route.target}"
-          ?small="${this.small}"
-          .title="${_route.title}"
-          .help="${until(_route.help, null)}"
-          ?vertical="${this.vertical}"
-        ></gv-link>`;
-      })
-      .catch(() => {
-        delete this._routes[index];
-      });
-  }
-
-  updated(_changedProperties) {
-    if (_changedProperties.has('_routes')) {
-      this._compact = this._routes && this._routes.length > 5;
-    }
-  }
-
-  render() {
-    if (this._routes) {
-      return html`<nav class="${classMap({ compact: this._compact, vertical: this.vertical })}">
-        ${repeat(
-          this._routes,
-          (route) => route,
-          (route, index) => until(this._getLink(route, index), html`<gv-link skeleton .vertical="${this.vertical}"></gv-link>`),
-        )}
-      </nav>`;
-    }
-    return html``;
-  }
-}
-
-window.customElements.define('gv-nav', GvNav);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvNav=void 0;const t=require("lit"),e=require("lit/directives/repeat");require("../atoms/gv-link");const i=require("lit/directives/until"),s=require("../lib/utils"),o=require("../lib/events"),l=require("lit/directives/class-map");class r extends t.LitElement{static get properties(){return{routes:{type:Array},_routes:{type:Array},small:{type:Boolean},_compact:{type:Boolean,attribute:!1},vertical:{type:Boolean,reflect:!0}}}static get styles(){return[t.css`nav{position:relative;transition:all 150ms ease-in-out}gv-link{--gv-link--ta:end}.vertical{display:flex;flex-direction:column}.vertical gv-link{width:100%}.compact{--gv-link-a--ph:10px}#shadowLink{position:absolute;display:inline-flex;opacity:.5;top:0;left:0;transition:transform 250ms ease-in-out,width 250ms}`]}_onClick(t){t.stopPropagation();const{detail:e}=t,{title:i,target:s}=e;if("_blank"===s)(0,o.dispatchCustomEvent)(this,"click",e);else if(!this._isLocked){this._isLocked=!0;let t=0;this._routes.forEach(((e,s)=>(e.title===i?(e.active=!0,t=s):delete e.active,e)));const s=this.shadowRoot.querySelector("gv-link[active]"),l=this.shadowRoot.querySelectorAll("gv-link")[t];if(s){const t=s.cloneNode(!0),{height:i,width:r}=s.getBoundingClientRect();t.id="shadowLink",t.style.top=`${s.offsetTop}px`,t.style.left=`${s.offsetLeft}px`,t.style.width=`${r}px`,t.style.height=`${i}px`,s.removeAttribute("active"),s.style.height=`${i}px`,this.shadowRoot.querySelector("nav").prepend(t);const a=l.offsetLeft-s.offsetLeft,n=l.offsetTop-s.offsetTop;t.style.transform=`translate(${a}px,${n}px)`,setTimeout((()=>{l.setAttribute("active",!0),this.shadowRoot.querySelector("nav").removeChild(t),this._isLocked=!1,(0,o.dispatchCustomEvent)(this,"click",e)}),250)}else l.setAttribute("active",!0),this._isLocked=!1,(0,o.dispatchCustomEvent)(this,"click",e)}}constructor(){super(),this._routes=[],this.vertical=!1}set routes(t){t&&Promise.resolve(t).then((t=>{(0,s.isSameRoutes)(this._routes,t)||(this._routes=t)}))}_getLink(e,s){return Promise.resolve(e).then((e=>t.html`<gv-link @gv-link:click="${this._onClick}" .active="${e.active}" .icon="${e.icon}" .path="${e.path}" .target="${e.target}" ?small="${this.small}" .title="${e.title}" .help="${(0,i.until)(e.help,null)}" ?vertical="${this.vertical}"></gv-link>`)).catch((()=>{delete this._routes[s]}))}updated(t){t.has("_routes")&&(this._compact=this._routes&&this._routes.length>5)}render(){return this._routes?t.html`<nav class="${(0,l.classMap)({compact:this._compact,vertical:this.vertical})}">${(0,e.repeat)(this._routes,(t=>t),((e,s)=>(0,i.until)(this._getLink(e,s),t.html`<gv-link skeleton .vertical="${this.vertical}"></gv-link>`)))}</nav>`:t.html``}}exports.GvNav=r,window.customElements.define("gv-nav",r);

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

@@ -0,0 +1,65 @@
+/**
+ * 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(): {
+        options: {
+            type: ArrayConstructor;
+        };
+        _options: {
+            type: ArrayConstructor;
+            attribute: boolean;
+        };
+        _hasDescription: {
+            type: ArrayConstructor;
+            attribute: boolean;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        multiple: {
+            type: BooleanConstructor;
+        };
+        reverse: {
+            type: BooleanConstructor;
+        };
+        small: {
+            type: BooleanConstructor;
+        };
+        outlined: {
+            type: BooleanConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    multiple: boolean;
+    reverse: boolean;
+    _onClick(option: any): void;
+    setValue(option: any): void;
+    value: any;
+    set options(arg: any);
+    _options: any[] | undefined;
+    _hasDescription: boolean | undefined;
+    isActive(option: any): any;
+    _renderOption(option: any, index: any): import("lit-html").TemplateResult<1>;
+}
+import { LitElement } from "lit-element/lit-element";