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

package/src/organisms/gv-vertical-menu.js

@@ -17,6 +17,7 @@ import { css, html, LitElement } from 'lit';
 import '../molecules/gv-nav';
 import '../atoms/gv-image';
 import { isSameRoutes } from '../lib/utils';
+
 /**
  * A vertical menu
  *
@@ -25,43 +26,77 @@ import { isSameRoutes } from '../lib/utils';
  * @attr {Array} routes - definition of routes [{active: Boolean, icon: String, path: String, title: Promise<String>]
  *
  */
-
 export class GvVerticalMenu extends LitElement {
   static get properties() {
     return {
       /** @required **/
-      routes: {
-        type: Array
-      },
-      _routes: {
-        type: Array,
-        attribute: false
-      },
-      logo: {
-        type: String
-      }
+      routes: { type: Array },
+      _routes: { type: Array, attribute: false },
+      logo: { type: String },
     };
   }
 
   static get styles() {
-    return [// language=css
-    css`:host{--gv-link--c:var(--gv-menu--c, var(--gv-theme-font-color-light, #ffffff));--gv-link-active--c:var(--gv-menu--c, var(--gv-theme-font-color-light, #ffffff));--gv-link--bgc:var(--gv-menu-link--bgc, transparent);--gv-link-active--bgc:var(--gv-menu-link-active--bgc, transparent);--gv-link-active--bdw:var(--gv-menu-link-active--bdw, 0 0 0 4px);--gv-link-active--bdc:var(--gv-menu-link-active--bdc, var(--gv-theme-color-light, #86c3d0));--gv-link-active--bds:var(--gv-menu-link-active--bds, solid);--pr:var(--gv-theme-layout--pr, 4rem);--pl:var(--gv-theme-layout--pl, 4rem);box-sizing:border-box;display:block;font-size:var(--gv-theme-font-size-s,16px);width:var(--gv-theme-layout-menu-w,200px)}.menu-container{display:flex;flex-direction:column;justify-content:space-between;background-color:var(--gv-menu--bgc,var(--gv-theme-color-dark,#28444f));color:var(--gv-menu--c,var(--gv-theme-font-color-light,#fff))}gv-image{height:200px;width:200px}gv-nav{transition:width 250ms ease-in-out;display:flex;flex-direction:column;justify-content:space-between;line-height:20px;vertical-align:middle;width:100%;font-size:16px}`];
+    return [
+      // language=css
+      css`
+        :host {
+          --gv-link--c: var(--gv-menu--c, var(--gv-theme-font-color-light, #ffffff));
+          --gv-link-active--c: var(--gv-menu--c, var(--gv-theme-font-color-light, #ffffff));
+          --gv-link--bgc: var(--gv-menu-link--bgc, transparent);
+          --gv-link-active--bgc: var(--gv-menu-link-active--bgc, transparent);
+          --gv-link-active--bdw: var(--gv-menu-link-active--bdw, 0 0 0 4px);
+          --gv-link-active--bdc: var(--gv-menu-link-active--bdc, var(--gv-theme-color-light, #86c3d0));
+          --gv-link-active--bds: var(--gv-menu-link-active--bds, solid);
+          --pr: var(--gv-theme-layout--pr, 4rem);
+          --pl: var(--gv-theme-layout--pl, 4rem);
+          box-sizing: border-box;
+          display: block;
+          font-size: var(--gv-theme-font-size-s, 16px);
+          width: var(--gv-theme-layout-menu-w, 200px);
+        }
+
+        .menu-container {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+
+          background-color: var(--gv-menu--bgc, var(--gv-theme-color-dark, #28444f));
+          color: var(--gv-menu--c, var(--gv-theme-font-color-light, #ffffff));
+        }
+
+        gv-image {
+          height: 200px;
+          width: 200px;
+        }
+
+        gv-nav {
+          transition: width 250ms ease-in-out;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          line-height: 20px;
+          vertical-align: middle;
+          width: 100%;
+          font-size: 16px;
+        }
+      `,
+    ];
   }
 
   constructor() {
     super();
     /** @protected */
-
     this._routes = [];
   }
 
   set routes(candidate) {
     if (candidate) {
-      Promise.resolve(candidate).then(candidates => {
+      Promise.resolve(candidate).then((candidates) => {
         if (candidates) {
-          Promise.all(candidates).then(futureRoutes => {
+          Promise.all(candidates).then((futureRoutes) => {
             if (!isSameRoutes(this._routes, futureRoutes)) {
-              this._routes = futureRoutes.filter(r => r != null);
+              this._routes = futureRoutes.filter((r) => r != null);
             }
           });
         } else {
@@ -74,9 +109,15 @@ export class GvVerticalMenu extends LitElement {
   }
 
   render() {
-    return html` <div class="menu-container"> ${this.logo ? html`<gv-image .src="${this.logo}"></gv-image>` : ''} <div class="nav-container"> <gv-nav .routes="${this._routes}" vertical></gv-nav> </div> </div> `;
+    return html`
+      <div class="menu-container">
+        ${this.logo ? html`<gv-image .src="${this.logo}"></gv-image>` : ''}
+        <div class="nav-container">
+          <gv-nav .routes="${this._routes}" vertical></gv-nav>
+        </div>
+      </div>
+    `;
   }
-
 }
+
 window.customElements.define('gv-vertical-menu', GvVerticalMenu);
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4vbm9kZV9tb2R1bGVzL0BncmF2aXRlZS91aS1jb21wb25lbnRzL29yZ2FuaXNtcy9ndi12ZXJ0aWNhbC1tZW51LmpzIl0sIm5hbWVzIjpbImNzcyIsImh0bWwiLCJMaXRFbGVtZW50IiwiaXNTYW1lUm91dGVzIiwiR3ZWZXJ0aWNhbE1lbnUiLCJwcm9wZXJ0aWVzIiwicm91dGVzIiwidHlwZSIsIkFycmF5IiwiX3JvdXRlcyIsImF0dHJpYnV0ZSIsImxvZ28iLCJTdHJpbmciLCJzdHlsZXMiLCJjb25zdHJ1Y3RvciIsImNhbmRpZGF0ZSIsIlByb21pc2UiLCJyZXNvbHZlIiwidGhlbiIsImNhbmRpZGF0ZXMiLCJhbGwiLCJmdXR1cmVSb3V0ZXMiLCJmaWx0ZXIiLCJyIiwicmVuZGVyIiwid2luZG93IiwiY3VzdG9tRWxlbWVudHMiLCJkZWZpbmUiXSwibWFwcGluZ3MiOiJBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBLFNBQVNBLEdBQVQsRUFBY0MsSUFBZCxFQUFvQkMsVUFBcEIsUUFBc0MsS0FBdEM7QUFDQSxPQUFPLHFCQUFQO0FBQ0EsT0FBTyxtQkFBUDtBQUNBLFNBQVNDLFlBQVQsUUFBNkIsY0FBN0I7QUFFQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQUNBLE9BQU8sTUFBTUMsY0FBTixTQUE2QkYsVUFBN0IsQ0FBd0M7QUFDeEIsYUFBVkcsVUFBVSxHQUFHO0FBQ3RCLFdBQU87QUFDTDtBQUNBQyxNQUFBQSxNQUFNLEVBQUU7QUFBRUMsUUFBQUEsSUFBSSxFQUFFQztBQUFSLE9BRkg7QUFHTEMsTUFBQUEsT0FBTyxFQUFFO0FBQUVGLFFBQUFBLElBQUksRUFBRUMsS0FBUjtBQUFlRSxRQUFBQSxTQUFTLEVBQUU7QUFBMUIsT0FISjtBQUlMQyxNQUFBQSxJQUFJLEVBQUU7QUFBRUosUUFBQUEsSUFBSSxFQUFFSztBQUFSO0FBSkQsS0FBUDtBQU1EOztBQUVnQixhQUFOQyxNQUFNLEdBQUc7QUFDbEIsV0FBTyxDQUNMO0FBQ0FiLElBQUFBLEdBQUcsK2xDQUZFLENBQVA7QUE2Q0Q7O0FBRURjLEVBQUFBLFdBQVcsR0FBRztBQUNaO0FBQ0E7O0FBQ0EsU0FBS0wsT0FBTCxHQUFlLEVBQWY7QUFDRDs7QUFFUyxNQUFOSCxNQUFNLENBQUNTLFNBQUQsRUFBWTtBQUNwQixRQUFJQSxTQUFKLEVBQWU7QUFDYkMsTUFBQUEsT0FBTyxDQUFDQyxPQUFSLENBQWdCRixTQUFoQixFQUEyQkcsSUFBM0IsQ0FBaUNDLFVBQUQsSUFBZ0I7QUFDOUMsWUFBSUEsVUFBSixFQUFnQjtBQUNkSCxVQUFBQSxPQUFPLENBQUNJLEdBQVIsQ0FBWUQsVUFBWixFQUF3QkQsSUFBeEIsQ0FBOEJHLFlBQUQsSUFBa0I7QUFDN0MsZ0JBQUksQ0FBQ2xCLFlBQVksQ0FBQyxLQUFLTSxPQUFOLEVBQWVZLFlBQWYsQ0FBakIsRUFBK0M7QUFDN0MsbUJBQUtaLE9BQUwsR0FBZVksWUFBWSxDQUFDQyxNQUFiLENBQXFCQyxDQUFELElBQU9BLENBQUMsSUFBSSxJQUFoQyxDQUFmO0FBQ0Q7QUFDRixXQUpEO0FBS0QsU0FORCxNQU1PO0FBQ0wsZUFBS2QsT0FBTCxHQUFlLElBQWY7QUFDRDtBQUNGLE9BVkQ7QUFXRCxLQVpELE1BWU87QUFDTCxXQUFLQSxPQUFMLEdBQWUsSUFBZjtBQUNEO0FBQ0Y7O0FBRURlLEVBQUFBLE1BQU0sR0FBRztBQUNQLFdBQU92QixJQUFJLGlDQUVMLEtBQUtVLElBQUwsR0FBWVYsSUFBSSxtQkFBbUIsS0FBS1UsSUFBeEIsZUFBaEIsR0FBOEQsRUFGekQsaURBSWMsS0FBS0YsT0FKbkIscUNBQVg7QUFRRDs7QUEzRjRDO0FBOEYvQ2dCLE1BQU0sQ0FBQ0MsY0FBUCxDQUFzQkMsTUFBdEIsQ0FBNkIsa0JBQTdCLEVBQWlEdkIsY0FBakQiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogQ29weXJpZ2h0IChDKSAyMDE1IFRoZSBHcmF2aXRlZSB0ZWFtIChodHRwOi8vZ3Jhdml0ZWUuaW8pXG4gKlxuICogTGljZW5zZWQgdW5kZXIgdGhlIEFwYWNoZSBMaWNlbnNlLCBWZXJzaW9uIDIuMCAodGhlIFwiTGljZW5zZVwiKTtcbiAqIHlvdSBtYXkgbm90IHVzZSB0aGlzIGZpbGUgZXhjZXB0IGluIGNvbXBsaWFuY2Ugd2l0aCB0aGUgTGljZW5zZS5cbiAqIFlvdSBtYXkgb2J0YWluIGEgY29weSBvZiB0aGUgTGljZW5zZSBhdFxuICpcbiAqICAgICAgICAgaHR0cDovL3d3dy5hcGFjaGUub3JnL2xpY2Vuc2VzL0xJQ0VOU0UtMi4wXG4gKlxuICogVW5sZXNzIHJlcXVpcmVkIGJ5IGFwcGxpY2FibGUgbGF3IG9yIGFncmVlZCB0byBpbiB3cml0aW5nLCBzb2Z0d2FyZVxuICogZGlzdHJpYnV0ZWQgdW5kZXIgdGhlIExpY2Vuc2UgaXMgZGlzdHJpYnV0ZWQgb24gYW4gXCJBUyBJU1wiIEJBU0lTLFxuICogV0lUSE9VVCBXQVJSQU5USUVTIE9SIENPTkRJVElPTlMgT0YgQU5ZIEtJTkQsIGVpdGhlciBleHByZXNzIG9yIGltcGxpZWQuXG4gKiBTZWUgdGhlIExpY2Vuc2UgZm9yIHRoZSBzcGVjaWZpYyBsYW5ndWFnZSBnb3Zlcm5pbmcgcGVybWlzc2lvbnMgYW5kXG4gKiBsaW1pdGF0aW9ucyB1bmRlciB0aGUgTGljZW5zZS5cbiAqL1xuaW1wb3J0IHsgY3NzLCBodG1sLCBMaXRFbGVtZW50IH0gZnJvbSAnbGl0JztcbmltcG9ydCAnLi4vbW9sZWN1bGVzL2d2LW5hdic7XG5pbXBvcnQgJy4uL2F0b21zL2d2LWltYWdlJztcbmltcG9ydCB7IGlzU2FtZVJvdXRlcyB9IGZyb20gJy4uL2xpYi91dGlscyc7XG5cbi8qKlxuICogQSB2ZXJ0aWNhbCBtZW51XG4gKlxuICogQGZpcmVzIGd2LWxpbms6Y2xpY2sgLSBDdXN0b20gZXZlbnQgd2hlbiBsaW5rIGNsaWNrXG4gKlxuICogQGF0dHIge0FycmF5fSByb3V0ZXMgLSBkZWZpbml0aW9uIG9mIHJvdXRlcyBbe2FjdGl2ZTogQm9vbGVhbiwgaWNvbjogU3RyaW5nLCBwYXRoOiBTdHJpbmcsIHRpdGxlOiBQcm9taXNlPFN0cmluZz5dXG4gKlxuICovXG5leHBvcnQgY2xhc3MgR3ZWZXJ0aWNhbE1lbnUgZXh0ZW5kcyBMaXRFbGVtZW50IHtcbiAgc3RhdGljIGdldCBwcm9wZXJ0aWVzKCkge1xuICAgIHJldHVybiB7XG4gICAgICAvKiogQHJlcXVpcmVkICoqL1xuICAgICAgcm91dGVzOiB7IHR5cGU6IEFycmF5IH0sXG4gICAgICBfcm91dGVzOiB7IHR5cGU6IEFycmF5LCBhdHRyaWJ1dGU6IGZhbHNlIH0sXG4gICAgICBsb2dvOiB7IHR5cGU6IFN0cmluZyB9LFxuICAgIH07XG4gIH1cblxuICBzdGF0aWMgZ2V0IHN0eWxlcygpIHtcbiAgICByZXR1cm4gW1xuICAgICAgLy8gbGFuZ3VhZ2U9Y3NzXG4gICAgICBjc3NgXG4gICAgICAgIDpob3N0IHtcbiAgICAgICAgICAtLWd2LWxpbmstLWM6IHZhcigtLWd2LW1lbnUtLWMsIHZhcigtLWd2LXRoZW1lLWZvbnQtY29sb3ItbGlnaHQsICNmZmZmZmYpKTtcbiAgICAgICAgICAtLWd2LWxpbmstYWN0aXZlLS1jOiB2YXIoLS1ndi1tZW51LS1jLCB2YXIoLS1ndi10aGVtZS1mb250LWNvbG9yLWxpZ2h0LCAjZmZmZmZmKSk7XG4gICAgICAgICAgLS1ndi1saW5rLS1iZ2M6IHZhcigtLWd2LW1lbnUtbGluay0tYmdjLCB0cmFuc3BhcmVudCk7XG4gICAgICAgICAgLS1ndi1saW5rLWFjdGl2ZS0tYmdjOiB2YXIoLS1ndi1tZW51LWxpbmstYWN0aXZlLS1iZ2MsIHRyYW5zcGFyZW50KTtcbiAgICAgICAgICAtLWd2LWxpbmstYWN0aXZlLS1iZHc6IHZhcigtLWd2LW1lbnUtbGluay1hY3RpdmUtLWJkdywgMCAwIDAgNHB4KTtcbiAgICAgICAgICAtLWd2LWxpbmstYWN0aXZlLS1iZGM6IHZhcigtLWd2LW1lbnUtbGluay1hY3RpdmUtLWJkYywgdmFyKC0tZ3YtdGhlbWUtY29sb3ItbGlnaHQsICM4NmMzZDApKTtcbiAgICAgICAgICAtLWd2LWxpbmstYWN0aXZlLS1iZHM6IHZhcigtLWd2LW1lbnUtbGluay1hY3RpdmUtLWJkcywgc29saWQpO1xuICAgICAgICAgIC0tcHI6IHZhcigtLWd2LXRoZW1lLWxheW91dC0tcHIsIDRyZW0pO1xuICAgICAgICAgIC0tcGw6IHZhcigtLWd2LXRoZW1lLWxheW91dC0tcGwsIDRyZW0pO1xuICAgICAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgICAgICAgZm9udC1zaXplOiB2YXIoLS1ndi10aGVtZS1mb250LXNpemUtcywgMTZweCk7XG4gICAgICAgICAgd2lkdGg6IHZhcigtLWd2LXRoZW1lLWxheW91dC1tZW51LXcsIDIwMHB4KTtcbiAgICAgICAgfVxuXG4gICAgICAgIC5tZW51LWNvbnRhaW5lciB7XG4gICAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgICAgICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcblxuICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWd2LW1lbnUtLWJnYywgdmFyKC0tZ3YtdGhlbWUtY29sb3ItZGFyaywgIzI4NDQ0ZikpO1xuICAgICAgICAgIGNvbG9yOiB2YXIoLS1ndi1tZW51LS1jLCB2YXIoLS1ndi10aGVtZS1mb250LWNvbG9yLWxpZ2h0LCAjZmZmZmZmKSk7XG4gICAgICAgIH1cblxuICAgICAgICBndi1pbWFnZSB7XG4gICAgICAgICAgaGVpZ2h0OiAyMDBweDtcbiAgICAgICAgICB3aWR0aDogMjAwcHg7XG4gICAgICAgIH1cblxuICAgICAgICBndi1uYXYge1xuICAgICAgICAgIHRyYW5zaXRpb246IHdpZHRoIDI1MG1zIGVhc2UtaW4tb3V0O1xuICAgICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gICAgICAgICAgbGluZS1oZWlnaHQ6IDIwcHg7XG4gICAgICAgICAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbiAgICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgICBmb250LXNpemU6IDE2cHg7XG4gICAgICAgIH1cbiAgICAgIGAsXG4gICAgXTtcbiAgfVxuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIHN1cGVyKCk7XG4gICAgLyoqIEBwcm90ZWN0ZWQgKi9cbiAgICB0aGlzLl9yb3V0ZXMgPSBbXTtcbiAgfVxuXG4gIHNldCByb3V0ZXMoY2FuZGlkYXRlKSB7XG4gICAgaWYgKGNhbmRpZGF0ZSkge1xuICAgICAgUHJvbWlzZS5yZXNvbHZlKGNhbmRpZGF0ZSkudGhlbigoY2FuZGlkYXRlcykgPT4ge1xuICAgICAgICBpZiAoY2FuZGlkYXRlcykge1xuICAgICAgICAgIFByb21pc2UuYWxsKGNhbmRpZGF0ZXMpLnRoZW4oKGZ1dHVyZVJvdXRlcykgPT4ge1xuICAgICAgICAgICAgaWYgKCFpc1NhbWVSb3V0ZXModGhpcy5fcm91dGVzLCBmdXR1cmVSb3V0ZXMpKSB7XG4gICAgICAgICAgICAgIHRoaXMuX3JvdXRlcyA9IGZ1dHVyZVJvdXRlcy5maWx0ZXIoKHIpID0+IHIgIT0gbnVsbCk7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgfSk7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgdGhpcy5fcm91dGVzID0gbnVsbDtcbiAgICAgICAgfVxuICAgICAgfSk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMuX3JvdXRlcyA9IG51bGw7XG4gICAgfVxuICB9XG5cbiAgcmVuZGVyKCkge1xuICAgIHJldHVybiBodG1sYFxuICAgICAgPGRpdiBjbGFzcz1cIm1lbnUtY29udGFpbmVyXCI+XG4gICAgICAgICR7dGhpcy5sb2dvID8gaHRtbGA8Z3YtaW1hZ2UgLnNyYz1cIiR7dGhpcy5sb2dvfVwiPjwvZ3YtaW1hZ2U+YCA6ICcnfVxuICAgICAgICA8ZGl2IGNsYXNzPVwibmF2LWNvbnRhaW5lclwiPlxuICAgICAgICAgIDxndi1uYXYgLnJvdXRlcz1cIiR7dGhpcy5fcm91dGVzfVwiIHZlcnRpY2FsPjwvZ3YtbmF2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIGA7XG4gIH1cbn1cblxud2luZG93LmN1c3RvbUVsZW1lbnRzLmRlZmluZSgnZ3YtdmVydGljYWwtbWVudScsIEd2VmVydGljYWxNZW51KTtcbiJdfQ==