@gravitee/ui-components 3.25.3-typescript-ad6021f → 3.25.3-typescript-bfd8f67

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.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);