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

package/src/organisms/gv-tabs.d.ts

@@ -0,0 +1,56 @@
+/**
+ * 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(): {
+        options: {
+            type: ArrayConstructor;
+        };
+        _options: {
+            type: ArrayConstructor;
+            attribute: boolean;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        validator: {
+            type: FunctionConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+        };
+        small: {
+            type: BooleanConstructor;
+        };
+        truncate: {
+            type: BooleanConstructor;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    _getContent(): any;
+    value: any;
+    set options(arg: any);
+    get options(): any;
+    _options: any;
+    _changeTab(from: any, content: any, value: any): void;
+    _onClick({ detail }: {
+        detail: any;
+    }): void;
+    get _contextualOptions(): any;
+}
+import { LitElement } from "lit-element/lit-element";

package/src/organisms/gv-tabs.js

@@ -1,210 +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 '../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);
+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);

package/src/organisms/gv-user-menu.d.ts

@@ -0,0 +1,56 @@
+/**
+ * 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(): {
+        avatar: {
+            type: StringConstructor;
+        };
+        routes: {
+            type: ArrayConstructor;
+        };
+        _routes: {
+            type: ArrayConstructor;
+            attribute: boolean;
+        };
+        _isClosed: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+        username: {
+            type: StringConstructor;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    _isClosed: boolean;
+    _onClick(e: any): void;
+    _onMouseLeave(): void;
+    _onSelect(): void;
+    _hasOneItem(): boolean | null | undefined;
+    set routes(arg: any);
+    _routes: any[] | null | undefined;
+    _renderFirstItem(): import("lit-html").TemplateResult<1>;
+    _renderItem(route: any): any;
+}
+import { LitElement } from "lit-element/lit-element";

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

@@ -1,314 +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 '../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);
+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);

package/src/organisms/gv-vertical-menu.d.ts

@@ -0,0 +1,28 @@
+/**
+ * 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(): {
+        /** @required **/
+        routes: {
+            type: ArrayConstructor;
+        };
+        _routes: {
+            type: ArrayConstructor;
+            attribute: boolean;
+        };
+        logo: {
+            type: StringConstructor;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    /** @protected */
+    protected _routes: any[];
+    set routes(arg: any);
+}
+import { LitElement } from "lit-element/lit-element";