@gravitee/ui-components 3.25.3-typescript-ad6021f → 3.25.3-typescript-bfd8f67

package/src/molecules/gv-tree.js

@@ -1,250 +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 { 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);
+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);

package/src/organisms/gv-documentation.js

@@ -1,215 +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, 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);
+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);