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

package/dist/src/molecules/gv-tree.js

@@ -0,0 +1,238 @@
+/*
+ * 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-button';
+import '../atoms/gv-icon';
+import { dispatchCustomEvent } from '../lib/events';
+import { classMap } from 'lit/directives/class-map';
+/**
+ * A tree menu
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-tree:select - Custom event from child components
+ * @fires gv-tree:toggle - Custom event from child components
+ *
+ * @attr {Array} items - list of items and subitems to be displayed in the menu MenuItem: {name: String, value: any, children: Array<MenuItem>}
+ * @attr {Boolean} closed - allows to close the menu
+ * @attr {Object} selectedItem - the item selected
+ *
+ * @cssprop {Color} [--gv-tree--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Background color
+ * @cssprop {Color} [--gv-tree--c=var(--gv-theme-font-color-dark, #262626)] - Color
+ * @cssprop {Color} [--gv-tree-active--bdc=var(--gv-theme-color, #5a7684)] - Active border
+ * @cssprop {Color} [--gv-tree-active--bgc=var(--gv-theme-neutral-color-dark, #d9d9d9)] - Active background color
+ * @cssprop {Length} [--gv-tree-icon--s=20px] - Height and icon width
+ */
+export class GvTree extends LitElement {
+    static get properties() {
+        return {
+            items: { type: Array },
+            closed: { type: Boolean, reflect: true },
+            selectedItem: { type: Object },
+        };
+    }
+    static get styles() {
+        return [
+            // language=css
+            css `
+        :host {
+          --c: var(--gv-tree--c, var(--gv-theme-font-color-dark, #262626));
+          --bgc: var(--gv-tree--bgc, var(--gv-theme-neutral-color-lightest, #ffffff));
+          --active-bdc: var(--gv-tree-active--bdc, var(--gv-theme-color, #5a7684));
+          --active-bgc: var(--gv-tree-active--bgc, var(--gv-theme-neutral-color-dark, #d9d9d9));
+          --gv-icon--s: var(--gv-tree-icon--s, 20px);
+          --gv-icon--c: var(--c);
+          background-color: var(--bgc);
+          color: var(--c);
+          display: flex;
+          flex-direction: row;
+          height: 100%;
+        }
+
+        .tree {
+          padding-top: 10px;
+          transition: all 350ms ease-in-out;
+          width: 300px;
+        }
+
+        .tree.closed {
+          width: 42px;
+        }
+
+        .main-tree-menu {
+          user-select: none;
+          overflow-y: auto;
+          overflow-x: hidden;
+          height: calc(100% - 20px);
+          direction: rtl;
+        }
+
+        .main-tree-menu > ul {
+          position: relative;
+        }
+
+        ul {
+          display: block;
+          line-height: 2;
+          list-style: none;
+          margin: 0;
+          padding: 0;
+        }
+
+        ul li {
+          display: block;
+          padding: 0.5em 0.5em 0.5em 1em;
+        }
+
+        ul li ul {
+          margin-bottom: -0.5em;
+          margin-top: 0.5em;
+        }
+
+        ul li:hover:not(.folder):not(.selected) > label::before {
+          border-right-width: 4px;
+          border-right-style: solid;
+          border-right-color: var(--active-bgc);
+          box-sizing: border-box;
+        }
+
+        ul label {
+          cursor: pointer;
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+          direction: ltr;
+        }
+
+        ul label::before {
+          -moz-box-sizing: border-box;
+          box-sizing: border-box;
+          content: '';
+          height: 3em;
+          left: 0;
+          position: absolute;
+          right: 0;
+        }
+
+        .selected > label::before {
+          border-right-width: 4px;
+          border-right-style: solid;
+          border-right-color: var(--active-bdc);
+          box-sizing: border-box;
+        }
+
+        .folder > label {
+          font-weight: bold;
+        }
+
+        .tree-arrow {
+          transform: rotate(90deg);
+          cursor: pointer;
+          opacity: 0.5;
+          width: 20px;
+          height: 20px;
+        }
+
+        .closed .tree-arrow {
+          transform: rotate(0deg);
+        }
+
+        .closed .tree-menu {
+          height: 0;
+          transition: height 0.8s;
+          display: none;
+        }
+
+        .switch {
+          cursor: pointer;
+          opacity: 0.7;
+          position: sticky;
+          margin: 0 11px 0 11px;
+          display: flex;
+          justify-content: flex-end;
+        }
+      `,
+        ];
+    }
+    constructor() {
+        super();
+        this.closed = false;
+    }
+    _onSelect(menuItem, e) {
+        e.stopPropagation();
+        this.selectedItem = menuItem;
+        dispatchCustomEvent(this, 'select', menuItem);
+    }
+    _onClick(menuItem, e) {
+        if (e) {
+            e.stopPropagation();
+        }
+        menuItem.expanded = !menuItem.expanded;
+        this.requestUpdate();
+    }
+    _getMenuItemPage(menuItem) {
+        return html `<label @click=${this._onSelect.bind(this, menuItem)}> ${menuItem.name} </label>`;
+    }
+    _getMenuItemFolder(menuItem) {
+        return html ` <label @click=${this._onClick.bind(this, menuItem)} class="${classMap({ closed: !menuItem.expanded })}">
+        ${menuItem.name}
+        <gv-icon class="tree-arrow" shape="code:right-circle"></gv-icon>
+      </label>
+      <span class="${classMap({ closed: !menuItem.expanded })}"> ${this._getMenu(menuItem.children)} </span>`;
+    }
+    _getMenu(menuItems) {
+        if (menuItems) {
+            return html `<ul
+        class="${classMap({
+                'tree-menu': true,
+                closed: this.closed,
+            })}"
+      >
+        ${repeat(menuItems, (item) => this._getMenuItem(item))}
+      </ul>`;
+        }
+        return '';
+    }
+    _getMenuItem(menuItem) {
+        return html ` ${menuItem.children && menuItem.children.length > 0
+            ? html `<li class="tree-menu__item folder">${this._getMenuItemFolder(menuItem)}</li>`
+            : html `<li class="tree-menu__item page ${menuItem === this.selectedItem ? 'selected' : ''}">
+          ${this._getMenuItemPage(menuItem)}
+        </li>`}`;
+    }
+    _toggleMenu() {
+        this.closed = !this.closed;
+        dispatchCustomEvent(this, 'toggle', { closed: this.closed });
+    }
+    render() {
+        const classes = {
+            tree: true,
+            closed: this.closed,
+        };
+        return html `
+      <div class=${classMap(classes)}>
+        <div class="switch">
+          <gv-icon shape="${this.closed ? 'text:menu' : 'navigation:angle-double-left'}" @click=${this._toggleMenu}></gv-icon>
+        </div>
+        ${html `<div class="main-tree-menu">${this._getMenu(this.items)}</div>`}
+      </div>
+    `;
+    }
+}
+window.customElements.define('gv-tree', GvTree);

package/dist/src/organisms/gv-documentation.d.ts

@@ -0,0 +1,52 @@
+/**
+ *  Documentation component
+ *
+ * ⚠️ This component is based on `asciidoctor`, `highlight.js` and `asciidoctor-highlight.js`.
+ * To use this component in your project be sure the dependencies are installed or
+ * install them with: `npm install asciidoctor highlight.js asciidoctor-highlight.js --save`
+ *
+ * @attr {String} text - Documentation content
+ * @attr {String} type - Type of content
+ * @attr {String} image - Image or icon to display in header
+ * @attr {Boolean} disabled - true if component is disabled
+ * @attr {Boolean} without-header - true if component should not have header with title and actions
+ */
+export class GvDocumentation extends LitElement {
+    static get properties(): {
+        text: {
+            type: StringConstructor;
+        };
+        type: {
+            type: StringConstructor;
+        };
+        image: {
+            type: StringConstructor;
+        };
+        _dom: {
+            type: ObjectConstructor;
+            attribute: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+        };
+        withoutHeader: {
+            type: BooleanConstructor;
+            attribute: string;
+        };
+        _cssLoaded: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    type: string;
+    _onCloseDocumentation(): void;
+    _renderIcon(): import("lit-html").TemplateResult<1>;
+    _dom: {
+        title: string;
+        element: HTMLDivElement;
+    } | undefined;
+    _onLoad(): void;
+    _cssLoaded: boolean | undefined;
+}
+import { LitElement } from "lit-element/lit-element";

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

@@ -0,0 +1,205 @@
+/*
+ * 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 { dispatchCustomEvent } from '../lib/events';
+import { toDom } from '../lib/text-format';
+import { empty } from '../styles/empty';
+import { classMap } from 'lit/directives/class-map';
+/**
+ *  Documentation component
+ *
+ * ⚠️ This component is based on `asciidoctor`, `highlight.js` and `asciidoctor-highlight.js`.
+ * To use this component in your project be sure the dependencies are installed or
+ * install them with: `npm install asciidoctor highlight.js asciidoctor-highlight.js --save`
+ *
+ * @attr {String} text - Documentation content
+ * @attr {String} type - Type of content
+ * @attr {String} image - Image or icon to display in header
+ * @attr {Boolean} disabled - true if component is disabled
+ * @attr {Boolean} without-header - true if component should not have header with title and actions
+ */
+export class GvDocumentation extends LitElement {
+    static get properties() {
+        return {
+            text: { type: String },
+            type: { type: String },
+            image: { type: String },
+            _dom: { type: Object, attribute: false },
+            disabled: { type: Boolean },
+            withoutHeader: { type: Boolean, attribute: 'without-header' },
+            _cssLoaded: { type: Boolean, attribute: false },
+        };
+    }
+    static get styles() {
+        return [
+            empty,
+            // language=CSS
+            css `
+        :host {
+          box-sizing: border-box;
+          position: relative;
+        }
+
+        .header {
+          display: flex;
+          border-bottom: 1px solid #d9d9d9;
+          box-sizing: border-box;
+          min-height: 45px;
+          --gv-icon--s: 26px;
+          align-items: center;
+          padding: 0 1rem;
+          position: relative;
+        }
+
+        .header .left,
+        .header .right {
+          display: flex;
+          flex: 1;
+          z-index: 10;
+        }
+
+        .header .right {
+          justify-content: flex-end;
+        }
+
+        .header .title {
+          color: #28444f;
+          font-size: 18px;
+          display: flex;
+          position: absolute;
+          text-transform: uppercase;
+          letter-spacing: 0.2rem;
+          justify-content: center;
+          width: 100%;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          align-items: center;
+          text-transform: capitalize;
+        }
+
+        .header gv-image {
+          height: 35px;
+          width: 35px;
+        }
+
+        .container {
+          flex-grow: 1;
+
+          display: flex;
+          flex-direction: column;
+
+          /* for Firefox */
+          min-height: 0;
+          height: 100%;
+        }
+
+        .doc-content {
+          background: white;
+          display: none;
+          flex-grow: 1;
+
+          overflow: auto;
+
+          /* for Firefox */
+          min-height: 0;
+          padding: 0.5rem;
+        }
+
+        /* Hack for long string */
+        .hljs-string {
+          white-space: pre-wrap;
+        }
+
+        .empty {
+          display: none;
+        }
+
+        .show {
+          display: block;
+        }
+      `,
+        ];
+    }
+    constructor() {
+        super();
+        this.type = 'adoc';
+    }
+    _onCloseDocumentation() {
+        dispatchCustomEvent(this, 'close');
+    }
+    _renderIcon() {
+        if (this.image) {
+            return html `<gv-image src="${this.image}"></gv-image>`;
+        }
+        return html `<gv-icon shape="code:question"></gv-icon>`;
+    }
+    shouldUpdate(props) {
+        if (props.has('text')) {
+            toDom(this.text, this.type, true).then((_dom) => {
+                this._dom = _dom;
+                if (this._dom) {
+                    const title = this._dom.element.querySelector('h1');
+                    if (title && !this.withoutHeader) {
+                        title.remove();
+                    }
+                    this._dom.element.querySelectorAll('a').forEach((link) => (link.target = '_blank'));
+                }
+            });
+            return false;
+        }
+        return super.shouldUpdate(props);
+    }
+    _onLoad() {
+        this._cssLoaded = true;
+    }
+    render() {
+        let title = '';
+        let content;
+        if (this._dom) {
+            title = this._dom.title;
+            content = this._dom.element;
+        }
+        return html `<link @load="${this._onLoad}" rel="stylesheet" href="css/documentation.css" />
+      <div class="container">
+        ${this.withoutHeader
+            ? html ``
+            : html `<div class="header">
+              <div class="left">
+                ${this.disabled
+                ? html ``
+                : html `<gv-button
+                      icon="general:close"
+                      outlined
+                      small
+                      @gv-button:click="${this._onCloseDocumentation}"
+                      title="Close"
+                    ></gv-button>`}
+              </div>
+              <div class="title">${title}</div>
+              <div class="right">${this._renderIcon()}</div>
+            </div>`}
+        <div class="${classMap({ 'doc-content': true, show: this._cssLoaded })}">
+          ${content}
+          <slot name="empty" class="${classMap({ empty: true, show: content == null })}">
+            <div>Sorry,the documentation was not found.</div>
+            <div>See the documentation about plugins.</div>
+          </slot>
+        </div>
+      </div> `;
+    }
+}
+window.customElements.define('gv-documentation', GvDocumentation);

package/dist/src/organisms/gv-header.d.ts

@@ -0,0 +1,60 @@
+declare const GvHeader_base: {
+    new (): {
+        [x: string]: any;
+        _onResize({ width }: {
+            width: any;
+        }): void;
+        connectedCallback(): Promise<void>;
+        _unobserveResize: (() => any) | undefined;
+        disconnectedCallback(): void;
+    };
+    [x: string]: any;
+};
+/**
+ * Header component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @attr {Promise<any>} item - An item
+ * @attr {Promise<Array<{ path: String, title: String }>>} breadcrumbs - definition of routes in order
+ * @attr {Boolean} canSubscribe - for display actions (default: false)
+ *
+ * @cssprop {Color} [--gv-header--bgc=var(--gv-theme-color-light, #86c3d0)] - Background color.
+ * @cssprop {Color} [--gv-header--c=var(--gv-theme-font-color-dark, #262626)] - Color
+ *
+ * @cssprop {Length} [--gv-header-button--p=10px 24px] - Button adding
+ * @cssprop {Length} [--gv-header-button--fz=var(--gv-theme-font-size-l, 16px)] - Button font size
+ *
+ */
+export class GvHeader extends GvHeader_base {
+    static get properties(): {
+        breadcrumbs: {
+            type: ArrayConstructor;
+        };
+        sticky: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        _breadcrumbs: {
+            type: ArrayConstructor;
+            attribute: boolean;
+        };
+        canSubscribe: {
+            type: BooleanConstructor;
+            attribute: string;
+        };
+    };
+    static get styles(): any[];
+    breakpoints: {
+        width: number[];
+    };
+    _breadcrumbs: any[];
+    canSubscribe: boolean;
+    set breadcrumbs(arg: any);
+    _getLink(route: any, index: any): Promise<void | import("lit-html").TemplateResult<1>>;
+    _renderBreadcrumbs(): import("lit-html").TemplateResult<1>;
+    _onSubscribe(e: any): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};