@gravitee/ui-components 3.25.3-typescript-fdacf14 → 3.25.3-typescript-94e8113

package/dist/src/organisms/gv-tabs.js

@@ -0,0 +1,201 @@
+/*
+ * 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/dist/src/organisms/gv-user-menu.js

@@ -0,0 +1,298 @@
+/*
+ * 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/dist/src/organisms/gv-vertical-menu.js

@@ -0,0 +1,119 @@
+/*
+ * 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);