@gravitee/ui-components 3.25.3-typescript-e7256ca → 3.25.3-typescript-9cbc31e

package/src/molecules/gv-tree.js

@@ -1 +1,238 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvTree=void 0;const e=require("lit"),t=require("lit/directives/repeat");require("../atoms/gv-button"),require("../atoms/gv-icon");const r=require("../lib/events"),i=require("lit/directives/class-map");class o extends e.LitElement{static get properties(){return{items:{type:Array},closed:{type:Boolean,reflect:!0},selectedItem:{type:Object}}}static get styles(){return[e.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:.5em .5em .5em 1em}ul li ul{margin-bottom:-.5em;margin-top:.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:700}.tree-arrow{transform:rotate(90deg);cursor:pointer;opacity:.5;width:20px;height:20px}.closed .tree-arrow{transform:rotate(0)}.closed .tree-menu{height:0;transition:height .8s;display:none}.switch{cursor:pointer;opacity:.7;position:sticky;margin:0 11px 0 11px;display:flex;justify-content:flex-end}`]}constructor(){super(),this.closed=!1}_onSelect(e,t){t.stopPropagation(),this.selectedItem=e,(0,r.dispatchCustomEvent)(this,"select",e)}_onClick(e,t){t&&t.stopPropagation(),e.expanded=!e.expanded,this.requestUpdate()}_getMenuItemPage(t){return e.html`<label @click="${this._onSelect.bind(this,t)}">${t.name}</label>`}_getMenuItemFolder(t){return e.html`<label @click="${this._onClick.bind(this,t)}" class="${(0,i.classMap)({closed:!t.expanded})}">${t.name}<gv-icon class="tree-arrow" shape="code:right-circle"></gv-icon></label> <span class="${(0,i.classMap)({closed:!t.expanded})}">${this._getMenu(t.children)}</span>`}_getMenu(r){return r?e.html`<ul class="${(0,i.classMap)({"tree-menu":!0,closed:this.closed})}">${(0,t.repeat)(r,(e=>this._getMenuItem(e)))}</ul>`:""}_getMenuItem(t){return e.html`${t.children&&t.children.length>0?e.html`<li class="tree-menu__item folder">${this._getMenuItemFolder(t)}</li>`:e.html`<li class="tree-menu__item page ${t===this.selectedItem?"selected":""}">${this._getMenuItemPage(t)}</li>`}`}_toggleMenu(){this.closed=!this.closed,(0,r.dispatchCustomEvent)(this,"toggle",{closed:this.closed})}render(){const t={tree:!0,closed:this.closed};return e.html`<div class="${(0,i.classMap)(t)}"><div class="switch"><gv-icon shape="${this.closed?"text:menu":"navigation:angle-double-left"}" @click="${this._toggleMenu}"></gv-icon></div>${e.html`<div class="main-tree-menu">${this._getMenu(this.items)}</div>`}</div>`}}exports.GvTree=o,window.customElements.define("gv-tree",o);
+/*
+ * 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/src/organisms/gv-documentation.js

@@ -1 +1,205 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvDocumentation=void 0;const e=require("lit"),t=require("../lib/events"),i=require("../lib/text-format"),o=require("../styles/empty"),s=require("lit/directives/class-map");class n extends e.LitElement{static get properties(){return{text:{type:String},type:{type:String},image:{type:String},_dom:{type:Object,attribute:!1},disabled:{type:Boolean},withoutHeader:{type:Boolean,attribute:"without-header"},_cssLoaded:{type:Boolean,attribute:!1}}}static get styles(){return[o.empty,e.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:.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;min-height:0;height:100%}.doc-content{background:#fff;display:none;flex-grow:1;overflow:auto;min-height:0;padding:.5rem}.hljs-string{white-space:pre-wrap}.empty{display:none}.show{display:block}`]}constructor(){super(),this.type="adoc"}_onCloseDocumentation(){(0,t.dispatchCustomEvent)(this,"close")}_renderIcon(){return this.image?e.html`<gv-image src="${this.image}"></gv-image>`:e.html`<gv-icon shape="code:question"></gv-icon>`}shouldUpdate(e){return e.has("text")?((0,i.toDom)(this.text,this.type,!0).then((e=>{if(this._dom=e,this._dom){const e=this._dom.element.querySelector("h1");e&&!this.withoutHeader&&e.remove(),this._dom.element.querySelectorAll("a").forEach((e=>e.target="_blank"))}})),!1):super.shouldUpdate(e)}_onLoad(){this._cssLoaded=!0}render(){let t,i="";return this._dom&&(i=this._dom.title,t=this._dom.element),e.html`<link @load="${this._onLoad}" rel="stylesheet" href="css/documentation.css"><div class="container">${this.withoutHeader?e.html``:e.html`<div class="header"><div class="left">${this.disabled?e.html``:e.html`<gv-button icon="general:close" outlined small @gv-button:click="${this._onCloseDocumentation}" title="Close"></gv-button>`}</div><div class="title">${i}</div><div class="right">${this._renderIcon()}</div></div>`}<div class="${(0,s.classMap)({"doc-content":!0,show:this._cssLoaded})}">${t}<slot name="empty" class="${(0,s.classMap)({empty:!0,show:null==t})}"><div>Sorry,the documentation was not found.</div><div>See the documentation about plugins.</div></slot></div></div>`}}exports.GvDocumentation=n,window.customElements.define("gv-documentation",n);
+/*
+ * 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);