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

package/src/organisms/gv-tabs.js

@@ -1 +1,201 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvTabs=void 0;const t=require("lit");require("../molecules/gv-option");const e=require("../lib/events");class i extends t.LitElement{static get properties(){return{options:{type:Array},_options:{type:Array,attribute:!1},value:{type:String,reflect:!0},validator:{type:Function},disabled:{type:Boolean},small:{type:Boolean},truncate:{type:Boolean}}}static get styles(){return[t.css`:host{box-sizing:border-box}::slotted([slot=content]){opacity:0;box-sizing:border-box;transition:opacity 350ms ease-in-out;visibility:hidden;position:absolute;left:-9999px;top:-9999px}::slotted([slot=content].current){opacity:1;visibility:visible;position:relative;left:auto;top:auto}.header{display:flex;border-bottom:1px solid #d9d9d9;box-sizing:border-box}.title{flex:1;display:flex;align-items:center}.actions{display:flex;align-items:center}.tabs{flex:1;display:flex;justify-content:flex-end;--gv-option--bdrs:0}:host([small]) .tabs{flex-direction:column}:host([small]) gv-option{align-self:flex-end}gv-option{margin:var(--gv-tabs-options--m,0)}::slotted(gv-button){padding-bottom:2px}`]}_getContent(){return this.shadowRoot.querySelector('slot[name="content"]').assignedNodes()}firstUpdated(){null==this.value&&null!=this.options&&this.options.length>0&&(this.value=this.options[0].id)}set options(t){t&&Array.isArray(t)&&(this._options=t.map((t=>"string"==typeof t?{id:t,title:t}:"object"==typeof t&&null==t.title?{id:t.id,title:t.id}:t)))}get options(){return this._options}updated(){const t=this._getContent();if(t.forEach((t=>t.classList.remove("current"))),this.value){const t=this.querySelector(`#${this.value}`);t&&t.classList.add("current")}else t[0].classList.add("current")}_changeTab(t,i,s){t.classList.remove("current"),i.classList.add("current"),this.value=s,(0,e.dispatchCustomEvent)(this,"change",{value:s,from:t.id,to:i.id})}_onClick({detail:t}){if(!this.disabled){const e=this._getContent().find((t=>t.classList.contains("current"))),i=this.querySelector(`#${t.id}`);this.shadowRoot.querySelector("gv-option").value=e.id,this.validator?this.validator({from:e.id,to:i.id}).then((()=>{this._changeTab(e,i,t.id)})).catch((()=>{})):this._changeTab(e,i,t.id)}}get _contextualOptions(){return this.truncate?this.options.map((t=>{if(this.value!==t.id){const e=t.label||t.title;return{...t,label:e.substring(0,1)}}return t})):this.options}render(){return t.html`<div><div class="header"><div class="tabs"><slot name="title" class="title"></slot><gv-option small .options="${this._contextualOptions}" @gv-option:select="${this._onClick}" .value="${this.value}"></gv-option></div></div><slot name="content"></slot></div>`}}exports.GvTabs=i,window.customElements.define("gv-tabs",i);
+/*
+ * 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 '../molecules/gv-option';
+import { dispatchCustomEvent } from '../lib/events';
+/**
+ * Tabs component
+ *
+ * * ## Details
+ * * This component use gv-option component to generate tabs.
+ *
+ * @attr {Array<id: string | {id, title?, icon?, active?, description?, label?}>} options - An array of options for gv-option sub component
+ * @slot content - List of elements for tabs content. Should have an id related to options.
+ *
+ * @attr {String} value - the opened tab id
+ * @attr {Boolean} disabled - true if disabled
+ * @attr {Boolean} small - true if you want display tabs below of title
+ * @attr {Boolean} truncate - true if you want truncate tabs title
+ * @attr {Function} validator - a function that's calls when user change tab, this is useful to validate tab change.
+ *
+ * @cssprop {Length} [--gv-tabs-options--m=0] - Tabs options margin
+ */
+export class GvTabs extends LitElement {
+    static get properties() {
+        return {
+            options: { type: Array },
+            _options: { type: Array, attribute: false },
+            value: { type: String, reflect: true },
+            validator: { type: Function },
+            disabled: { type: Boolean },
+            small: { type: Boolean },
+            truncate: { type: Boolean },
+        };
+    }
+    static get styles() {
+        return [
+            // language=css
+            css `
+        :host {
+          box-sizing: border-box;
+        }
+
+        ::slotted([slot='content']) {
+          opacity: 0;
+          box-sizing: border-box;
+          transition: opacity 350ms ease-in-out;
+          visibility: hidden;
+          position: absolute;
+          left: -9999px;
+          top: -9999px;
+        }
+
+        ::slotted([slot='content'].current) {
+          opacity: 1;
+          visibility: visible;
+          position: relative;
+          left: auto;
+          top: auto;
+        }
+
+        .header {
+          display: flex;
+          border-bottom: 1px solid #d9d9d9;
+          box-sizing: border-box;
+        }
+
+        .title {
+          flex: 1;
+          display: flex;
+          align-items: center;
+        }
+
+        .actions {
+          display: flex;
+          align-items: center;
+        }
+
+        .tabs {
+          flex: 1;
+          display: flex;
+          justify-content: flex-end;
+          --gv-option--bdrs: 0;
+        }
+
+        :host([small]) .tabs {
+          flex-direction: column;
+        }
+
+        :host([small]) gv-option {
+          align-self: flex-end;
+        }
+
+        gv-option {
+          margin: var(--gv-tabs-options--m, 0);
+        }
+
+        ::slotted(gv-button) {
+          padding-bottom: 2px;
+        }
+      `,
+        ];
+    }
+    _getContent() {
+        const content = this.shadowRoot.querySelector('slot[name="content"]');
+        return content.assignedNodes();
+    }
+    firstUpdated() {
+        if (this.value == null && this.options != null && this.options.length > 0) {
+            this.value = this.options[0].id;
+        }
+    }
+    set options(options) {
+        if (options && Array.isArray(options)) {
+            this._options = options.map((option) => {
+                if (typeof option === 'string') {
+                    return { id: option, title: option };
+                }
+                else if (typeof option === 'object' && option.title == null) {
+                    return { id: option.id, title: option.id };
+                }
+                return option;
+            });
+        }
+    }
+    get options() {
+        return this._options;
+    }
+    updated() {
+        const content = this._getContent();
+        content.forEach((c) => c.classList.remove('current'));
+        if (this.value) {
+            const target = this.querySelector(`#${this.value}`);
+            if (target) {
+                target.classList.add('current');
+            }
+        }
+        else {
+            content[0].classList.add('current');
+        }
+    }
+    _changeTab(from, content, value) {
+        from.classList.remove('current');
+        content.classList.add('current');
+        this.value = value;
+        dispatchCustomEvent(this, 'change', { value, from: from.id, to: content.id });
+    }
+    _onClick({ detail }) {
+        if (!this.disabled) {
+            const from = this._getContent().find((e) => e.classList.contains('current'));
+            const content = this.querySelector(`#${detail.id}`);
+            this.shadowRoot.querySelector('gv-option').value = from.id;
+            if (this.validator) {
+                this.validator({ from: from.id, to: content.id })
+                    .then(() => {
+                    this._changeTab(from, content, detail.id);
+                })
+                    .catch(() => { });
+            }
+            else {
+                this._changeTab(from, content, detail.id);
+            }
+        }
+    }
+    get _contextualOptions() {
+        if (this.truncate) {
+            return this.options.map((option) => {
+                if (this.value !== option.id) {
+                    const label = option.label || option.title;
+                    return { ...option, label: label.substring(0, 1) };
+                }
+                return option;
+            });
+        }
+        return this.options;
+    }
+    render() {
+        return html `<div>
+      <div class="header">
+        <div class="tabs">
+          <slot name="title" class="title"></slot>
+          <gv-option small .options="${this._contextualOptions}" @gv-option:select="${this._onClick}" .value="${this.value}"></gv-option>
+        </div>
+      </div>
+      <slot name="content"></slot>
+    </div>`;
+    }
+}
+window.customElements.define('gv-tabs', GvTabs);

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

@@ -1 +1,298 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvUserMenu=void 0;const e=require("lit");require("../molecules/gv-nav");const t=require("lit/directives/repeat"),s=require("lit/directives/class-map"),r=require("../lib/utils");class i extends e.LitElement{static get properties(){return{avatar:{type:String},routes:{type:Array},_routes:{type:Array,attribute:!1},_isClosed:{type:Boolean,attribute:!1},username:{type:String}}}static get styles(){return[e.css`:host{--bdc:var(--gv-user-menu--bdc, lightgrey);--c:var(--gv-user-menu--c, var(--gv-theme-font-color-dark, #262626));--bgc:var(--gv-user-menu--bgc, transparent);--list-bgc:var(--gv-user-menu-list--bgc, var(--gv-theme-neutral-color-lightest, #ffffff));--hover-bgc:var(--gv-user-menu-hover--bgc, var(--gv-theme-color-light, #86c3d0));--gv-link-active--c:var(--gv-user-menu-hover--c, var(--gv-theme-color-dark, #28444f));--gv-icon--c:var(--gv-user-menu-icon--c, var(--gv-theme-neutral-color-darkest, #000000));--gv-icon--s:var(--gv-user-menu-icon--s, 16px);--gv-link-a--ph:var(--gv-user-menu-link-a--ph, 0px);--gv-link--ta:var(--gv-user-menu-link--ta, right);user-select:none}.user-menu{list-style:none;margin:0;padding:0;display:inline-block;position:relative}.user-menu__title{background-color:var(--bgc);border-left:1px solid var(--bdc);color:var(--c);cursor:pointer;line-height:40px;padding:8px 24px;display:inline-flex;align-items:center;justify-content:space-between;min-width:175px;text-shadow:var(--gv-user-menu--tsh,none)}::slotted(*){height:40px;width:40px}.user-menu__title.no-user{padding:5px 24px}.user-menu__title gv-link{--gv-link-a--ph:0;--gv-link-a--pv:0}.user-menu__title span{flex:1;text-align:center;margin:0 .4rem}.user-menu__title>gv-icon{transition:all .3s ease 0s}.user-menu__list{position:absolute;background-color:var(--list-bgc);list-style:none;padding:0;transition:all .3s ease 0s;width:100%}.user-menu__list__item{border-left:1px solid var(--bdc);display:flex;align-items:center;transition:all .5s ease;padding:2px 30px}.user-menu__list__item:last-child{border-bottom:1px solid var(--bdc)}.user-menu__list__item:hover{background-color:var(--hover-bgc);border-left:1px dotted var(--bdc);font-weight:500}gv-link{margin:0;display:flex;width:100%}.separator{border-top:1px solid var(--bdc)}.active{background-color:var(--gv-theme-neutral-color-dark,#d9d9d9);font-weight:700}.user-menu__list{visibility:visible;opacity:1;transform:translateY(0);z-index:100;transition-delay:0s,0s,.2s}.user-menu__list__group{border-top:1px solid var(--bdc);background-color:var(--gv-theme-neutral-color-light,#efefef);padding-left:0}.user-menu__list__group__title{font-size:small;color:var(--gv-theme-color-darker,#383e3f);border-left:1px solid var(--bdc);padding-left:10px}.closed .user-menu__list{visibility:hidden;opacity:0;transform:translateY(-2em);z-index:-1}gv-icon{transform:rotate(0)}.closed gv-icon{transform:rotate(-180deg)}`]}constructor(){super(),this._isClosed=!0}_onClick(e){e.preventDefault(),this._isClosed=!this._isClosed}_onMouseLeave(){this._isClosed=!0}_onSelect(){this._isClosed=!0}_hasOneItem(){return null==this.username&&this._routes&&1===this._routes.length}set routes(e){e?Promise.resolve(e).then((e=>{e?Promise.all(e).then((e=>{(0,r.isSameRoutes)(this._routes,e)||(this._routes=e.filter((e=>null!=e)))})):this._routes=null})):this._routes=null}_renderFirstItem(){if(this._routes){if(this.username)return e.html`<li class="user-menu__title" @click="${this._onClick}"><div><slot></slot></div><span>${this.username}</span><gv-icon shape="design:triangle"></gv-icon></li>`;if(this._hasOneItem()){const t=this._routes[0];return e.html`<li class="user-menu__title no-user" @click="${this._onClick}"><gv-link .icon="${t.icon}" .path="${t.path}" .title="${t.title}" @click="${this._onSelect}"></gv-link></li>`}}return e.html``}render(){const r={closed:this._isClosed};return this._routes?e.html`<nav class="${(0,s.classMap)(r)}"><ul class="user-menu" @mouseleave="${this._onMouseLeave}">${this._renderFirstItem()}<li class="user-menu__content"><ul class="user-menu__list">${(0,t.repeat)(this._routes,(e=>e),((t,s)=>e.html`${this._hasOneItem()?e.html``:this._renderItem(t)}`))}</ul></li></ul></nav>`:e.html``}_renderItem(s){return s.routes?e.html`<ul class="user-menu__list__group"><span class="user-menu__list__group__title">${s.title}</span> ${(0,t.repeat)(s.routes,(e=>e),((t,s)=>e.html`${this._renderItem(t)}`))}</ul>`:e.html`<li class="user-menu__list__item ${s.separator?"separator":""} ${s.active?"active":""}" style="${s.style}"><gv-link .icon="${s.icon}" .path="${s.path}" .title="${s.title}" .target="${s.target}" @click="${this._onSelect}"></gv-link></li>`}}exports.GvUserMenu=i,window.customElements.define("gv-user-menu",i);
+/*
+ * 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 '../molecules/gv-nav';
+import { repeat } from 'lit/directives/repeat';
+import { classMap } from 'lit/directives/class-map';
+import { isSameRoutes } from '../lib/utils';
+/**
+ * User menu
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-link:click - Custom event when nav link click
+ *
+ * @attr {Array} routes - definition of user routes [{icon: String, path: String, title: Promise<String>, active: Boolean, routes: Array<any>]
+ * @attr {String} username - name of the user
+ * @attr {String} avatar - url of the user avatar
+ *
+ * @cssprop {Color} [--gv-user-menu--c=var(--gv-theme-font-color-dark, #262626)] - Color
+ * @cssprop {Color} [--gv-user-menu-hover--c=var(--gv-theme-color-dark, #28444f)] - Hover color
+ * @cssprop {Color} [--gv-user-menu--bgc=transparent] - Background color
+ * @cssprop {Color} [--gv-user-menu-list--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - List background color
+ * @cssprop {Color} [--gv-user-menu-hover--bgc=var(--gv-theme-color-light, #86c3d0)] - Hover background color
+ * @cssprop {Color} [--gv-user-menu--bdc=lightgrey] - Border color
+ * @cssprop {String} [--gv-user-menu--tsh=none] - Text shadow
+ * @cssprop {Color} [--gv-user-menu-icon--c=var(--gv-theme-neutral-color-darkest, #000000)] - Icon color
+ * @cssprop {Length} [--gv-user-menu-icon--s=16px] - Height and icon width
+ * @cssprop {Length} [--gv-user-menu-link-a--ph=0px] - Link horizontal padding
+ * @cssprop {String} [--gv-user-menu-link--ta=right] - Text align
+ */
+export class GvUserMenu extends LitElement {
+    static get properties() {
+        return {
+            avatar: { type: String },
+            routes: { type: Array },
+            _routes: { type: Array, attribute: false },
+            _isClosed: { type: Boolean, attribute: false },
+            username: { type: String },
+        };
+    }
+    static get styles() {
+        return [
+            // language=css
+            css `
+        :host {
+          --bdc: var(--gv-user-menu--bdc, lightgrey);
+          --c: var(--gv-user-menu--c, var(--gv-theme-font-color-dark, #262626));
+          --bgc: var(--gv-user-menu--bgc, transparent);
+          --list-bgc: var(--gv-user-menu-list--bgc, var(--gv-theme-neutral-color-lightest, #ffffff));
+          --hover-bgc: var(--gv-user-menu-hover--bgc, var(--gv-theme-color-light, #86c3d0));
+          --gv-link-active--c: var(--gv-user-menu-hover--c, var(--gv-theme-color-dark, #28444f));
+          --gv-icon--c: var(--gv-user-menu-icon--c, var(--gv-theme-neutral-color-darkest, #000000));
+          --gv-icon--s: var(--gv-user-menu-icon--s, 16px);
+          --gv-link-a--ph: var(--gv-user-menu-link-a--ph, 0px);
+          --gv-link--ta: var(--gv-user-menu-link--ta, right);
+          user-select: none;
+        }
+
+        .user-menu {
+          list-style: none;
+          margin: 0;
+          padding: 0;
+          display: inline-block;
+          position: relative;
+        }
+
+        .user-menu__title {
+          background-color: var(--bgc);
+          border-left: 1px solid var(--bdc);
+          color: var(--c);
+          cursor: pointer;
+          line-height: 40px;
+          padding: 8px 24px;
+          display: inline-flex;
+          align-items: center;
+          justify-content: space-between;
+          min-width: 175px;
+          text-shadow: var(--gv-user-menu--tsh, none);
+        }
+
+        ::slotted(*) {
+          height: 40px;
+          width: 40px;
+        }
+
+        .user-menu__title.no-user {
+          padding: 5px 24px;
+        }
+
+        .user-menu__title gv-link {
+          --gv-link-a--ph: 0;
+          --gv-link-a--pv: 0;
+        }
+
+        .user-menu__title span {
+          flex: 1;
+          text-align: center;
+          margin: 0 0.4rem;
+        }
+
+        .user-menu__title > gv-icon {
+          transition: all 0.3s ease 0s;
+        }
+
+        .user-menu__list {
+          position: absolute;
+          background-color: var(--list-bgc);
+          list-style: none;
+          padding: 0;
+          transition: all 0.3s ease 0s;
+          width: 100%;
+        }
+
+        .user-menu__list__item {
+          border-left: 1px solid var(--bdc);
+          display: flex;
+          align-items: center;
+          transition: all 0.5s ease;
+          padding: 2px 30px;
+        }
+
+        .user-menu__list__item:last-child {
+          border-bottom: 1px solid var(--bdc);
+        }
+
+        .user-menu__list__item:hover {
+          background-color: var(--hover-bgc);
+          border-left: 1px dotted var(--bdc);
+          font-weight: 500;
+        }
+
+        gv-link {
+          margin: 0px;
+          display: flex;
+          width: 100%;
+        }
+
+        .separator {
+          border-top: 1px solid var(--bdc);
+        }
+
+        .active {
+          background-color: var(--gv-theme-neutral-color-dark, #d9d9d9);
+          font-weight: bold;
+        }
+
+        /** for animations */
+        .user-menu__list {
+          visibility: visible;
+          opacity: 1;
+          transform: translateY(0%);
+          z-index: 100;
+          transition-delay: 0s, 0s, 0.2s;
+        }
+
+        .user-menu__list__group {
+          border-top: 1px solid var(--bdc);
+          background-color: var(--gv-theme-neutral-color-light, #efefef);
+          padding-left: 0;
+        }
+
+        .user-menu__list__group__title {
+          font-size: small;
+          color: var(--gv-theme-color-darker, #383e3f);
+          border-left: 1px solid var(--bdc);
+          padding-left: 10px;
+        }
+
+        .closed .user-menu__list {
+          visibility: hidden;
+          opacity: 0;
+          transform: translateY(-2em);
+          z-index: -1;
+        }
+
+        gv-icon {
+          transform: rotate(0deg);
+        }
+
+        .closed gv-icon {
+          transform: rotate(-180deg);
+        }
+      `,
+        ];
+    }
+    constructor() {
+        super();
+        this._isClosed = true;
+    }
+    _onClick(e) {
+        e.preventDefault();
+        this._isClosed = !this._isClosed;
+    }
+    _onMouseLeave() {
+        this._isClosed = true;
+    }
+    _onSelect() {
+        this._isClosed = true;
+    }
+    _hasOneItem() {
+        return this.username == null && this._routes && this._routes.length === 1;
+    }
+    set routes(candidate) {
+        if (candidate) {
+            Promise.resolve(candidate).then((candidates) => {
+                if (candidates) {
+                    Promise.all(candidates).then((futureRoutes) => {
+                        if (!isSameRoutes(this._routes, futureRoutes)) {
+                            this._routes = futureRoutes.filter((r) => r != null);
+                        }
+                    });
+                }
+                else {
+                    this._routes = null;
+                }
+            });
+        }
+        else {
+            this._routes = null;
+        }
+    }
+    _renderFirstItem() {
+        if (this._routes) {
+            if (this.username) {
+                return html `<li class="user-menu__title" @click=${this._onClick}>
+          <div>
+            <slot></slot>
+          </div>
+          <span>${this.username}</span>
+          <gv-icon shape="design:triangle"></gv-icon>
+        </li>`;
+            }
+            else if (this._hasOneItem()) {
+                const firstItem = this._routes[0];
+                return html `<li class="user-menu__title no-user" @click=${this._onClick}>
+          <gv-link .icon="${firstItem.icon}" .path="${firstItem.path}" .title="${firstItem.title}" @click=${this._onSelect}></gv-link>
+        </li>`;
+            }
+        }
+        return html ``;
+    }
+    render() {
+        const classes = { closed: this._isClosed };
+        if (this._routes) {
+            return html `
+        <nav class="${classMap(classes)}">
+          <ul class="user-menu" @mouseleave=${this._onMouseLeave}>
+            ${this._renderFirstItem()}
+
+            <li class="user-menu__content">
+              <ul class="user-menu__list">
+                ${repeat(this._routes, (route) => route, (route, index) => html ` ${this._hasOneItem() ? html `` : this._renderItem(route)} `)}
+              </ul>
+            </li>
+          </ul>
+        </nav>
+      `;
+        }
+        return html ``;
+    }
+    _renderItem(route) {
+        if (route.routes) {
+            return html `<ul class="user-menu__list__group">
+        <span class="user-menu__list__group__title">${route.title}</span>
+        ${repeat(route.routes, (childRoute) => childRoute, (childRoute, index) => html ` ${this._renderItem(childRoute)} `)}
+      </ul>`;
+        }
+        else {
+            return html `<li
+        class="user-menu__list__item ${route.separator ? 'separator' : ''} ${route.active ? 'active' : ''}"
+        style="${route.style}"
+      >
+        <gv-link
+          .icon="${route.icon}"
+          .path="${route.path}"
+          .title="${route.title}"
+          .target="${route.target}"
+          @click=${this._onSelect}
+        ></gv-link>
+      </li>`;
+        }
+    }
+}
+window.customElements.define('gv-user-menu', GvUserMenu);

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

@@ -1 +1,119 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvVerticalMenu=void 0;const e=require("lit");require("../molecules/gv-nav"),require("../atoms/gv-image");const t=require("../lib/utils");class i extends e.LitElement{static get properties(){return{routes:{type:Array},_routes:{type:Array,attribute:!1},logo:{type:String}}}static get styles(){return[e.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}`]}constructor(){super(),this._routes=[]}set routes(e){e?Promise.resolve(e).then((e=>{e?Promise.all(e).then((e=>{(0,t.isSameRoutes)(this._routes,e)||(this._routes=e.filter((e=>null!=e)))})):this._routes=null})):this._routes=null}render(){return e.html`<div class="menu-container">${this.logo?e.html`<gv-image .src="${this.logo}"></gv-image>`:""}<div class="nav-container"><gv-nav .routes="${this._routes}" vertical></gv-nav></div></div>`}}exports.GvVerticalMenu=i,window.customElements.define("gv-vertical-menu",i);
+/*
+ * 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, html, LitElement } from 'lit';
+import '../molecules/gv-nav';
+import '../atoms/gv-image';
+import { isSameRoutes } from '../lib/utils';
+/**
+ * A vertical menu
+ *
+ * @fires gv-link:click - Custom event when link click
+ *
+ * @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 },
+        };
+    }
+    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, #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) => {
+                if (candidates) {
+                    Promise.all(candidates).then((futureRoutes) => {
+                        if (!isSameRoutes(this._routes, futureRoutes)) {
+                            this._routes = futureRoutes.filter((r) => r != null);
+                        }
+                    });
+                }
+                else {
+                    this._routes = null;
+                }
+            });
+        }
+        else {
+            this._routes = null;
+        }
+    }
+    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>
+    `;
+    }
+}
+window.customElements.define('gv-vertical-menu', GvVerticalMenu);