@gravitee/ui-components 3.25.3-typescript-8a53edf → 3.25.3-typescript-9a4271f

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravitee/ui-components",
-  "version": "3.25.3-typescript-8a53edf",
+  "version": "3.25.3-typescript-9a4271f",
   "description": "Gravitee.io UI Components library, based on Web Components",
   "repository": {
     "type": "git",

package/src/atoms/gv-autocomplete.js

@@ -1,461 +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, unsafeCSS, html } from 'lit';
-import { dispatchCustomEvent } from '../lib/events';
-import { repeat } from 'lit/directives/repeat';
-import { classMap } from 'lit/directives/class-map';
-import { styleMap } from 'lit/directives/style-map';
-
-const ENTER_KEY_CODE = 13;
-const DOWN_ARROW_KEY_CODE = 40;
-const UP_ARROW_KEY_CODE = 38;
-const ESCAPE_KEY_CODE = 27;
-
-/**
- * Autocomplete input wrapper
- *
- * ## Details
- * * has @theme facet
- *
- * @fires gv-autocomplete:search - Custom event when user search value
- * @fires gv-autocomplete:select - Custom event when user select value
- * @fires gv-autocomplete:opened - Custom event after opened autocomplete
- *
- * @slot style - The options style
- * @slot input - The input to wrap
- * @slot noOption - What should be shown when there is no options to display
- *
- * @attr {Array.<{value: String, innerHTML?: String}>} options - the options for search
- * @attr {String} value - selected value
- * @attr {String} style - css if you want custom options rendered
- * @attr {Number} minChars - minimum of characters for launch search and show results
- * @attr {Number} size - results size to show before user must scroll
- * @attr {Boolean|Function(value,option)} filter - If true, filter options by input, if function, filter options against it. The function will
- * receive two arguments, inputValue and option, if the function returns true, the option will be included
- * in the filtered set; Otherwise, it will be excluded.
- * the option will be included in the filtered set; Otherwise, it will be excluded.
- *
- * @cssprop {Color} [--gv-autocomplete-hover--bgc=var(--gv-theme-neutral-color-lighter, #fafafa)] - Hover background color
- * @cssprop {Color} [--gv-autocomplete--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Background color
- * @cssprop {Color} [--gv-autocomplete--c=var(--gv-theme-font-color, #262626)] - Color
- */
-export class GvAutocomplete extends LitElement {
-  static get properties() {
-    return {
-      options: { type: Array, reflect: true },
-      value: { type: String, reflect: true },
-      style: { type: String },
-      minChars: { type: Number },
-      filter: { type: Boolean | Function },
-      size: { type: Number },
-      _options: { type: Array, attribute: false },
-      _forceOpen: { type: Boolean, attribute: false },
-    };
-  }
-
-  static get styles() {
-    return [
-      // language=CSS
-      css`
-        :host {
-          box-sizing: border-box;
-          display: inline-block;
-          width: 100%;
-        }
-
-        ::slotted(*) {
-          width: 100%;
-        }
-
-        .container {
-          position: relative;
-        }
-
-        .container .options.open {
-          display: block;
-          visibility: visible;
-          opacity: 1;
-          -webkit-transform: -webkit-translateY(0%);
-          transform: translateY(0%);
-          z-index: 100;
-        }
-
-        .options {
-          background-color: var(--gv-autocomplete--bgc, var(--gv-theme-neutral-color-lightest, #ffffff));
-          color: var(--gv-autocomplete--c, var(--gv-theme-font-color, #262626));
-          margin: 0.2rem;
-          position: absolute;
-          box-shadow: 0 0 0 1px var(--gv-theme-neutral-color, #f5f5f5), 0 1px 3px var(--gv-theme-neutral-color-dark, #bfbfbf);
-          border-radius: 2px;
-          display: block;
-          width: 100%;
-          cursor: pointer;
-          left: 0;
-          right: 0;
-          visibility: hidden;
-          opacity: 0;
-          -webkit-transform: -webkit-translateY(-2em);
-          transform: translateY(-2em);
-          -webkit-transition: -webkit-transform 150ms ease-in-out, opacity 150ms ease-in-out;
-          -moz-transition: all 150ms ease-in-out;
-          -ms-transition: all 150ms ease-in-out;
-          -o-transition: all 150ms ease-in-out;
-          overflow: auto;
-        }
-
-        .option {
-          padding: 0.2rem;
-          min-height: 30px;
-          word-break: break-all;
-        }
-
-        .option.match ~ .option.match {
-          background-color: transparent;
-        }
-
-        .option:hover,
-        .option.hover,
-        .keyboard .option.hover:hover {
-          background-color: var(--gv-autocomplete-hover--bgc, var(--gv-theme-neutral-color-lighter, #fafafa));
-        }
-
-        .keyboard .option:hover {
-          background-color: transparent;
-        }
-
-        .show {
-          display: block;
-        }
-
-        .hide {
-          display: none;
-        }
-      `,
-    ];
-  }
-
-  constructor() {
-    super();
-    this._options = [];
-    this._candidateIndex = -1;
-    this.minChars = 1;
-    this.value = '';
-    this.style = '';
-    this.filter = false;
-    this.size = 5;
-    this._handleOpened = this._onOpened.bind(this);
-  }
-
-  set options(options) {
-    this._options = options;
-  }
-
-  get options() {
-    return this._options;
-  }
-
-  reset() {
-    this._getInput().reset();
-    this._options = [];
-  }
-
-  _getFilteredOptions() {
-    if (this.filter && this.value && this.value.length >= this.minChars && this.value !== '*') {
-      if (typeof this.filter === 'function') {
-        return this._options.filter((option) => {
-          return this.filter(this.value, option);
-        });
-      } else {
-        return this._options.filter((option) => {
-          return option.value.indexOf(this.value) !== -1;
-        });
-      }
-    } else {
-      return this._options;
-    }
-  }
-
-  _onInput(event) {
-    clearTimeout(this._cancellableTimeout);
-    this.value = event.target.value;
-    if (this.value != null && this.value.trim().length >= this.minChars) {
-      this._cancellableTimeout = setTimeout(() => {
-        this._open();
-        dispatchCustomEvent(this, 'search', this.value);
-      }, 200);
-    } else {
-      this.options = [];
-    }
-  }
-
-  _onSelect(value, option) {
-    if (option == null) {
-      option = this._options.find((option) => {
-        return option.value === value;
-      });
-    }
-    this.value = this._getInput().value = value;
-    this._close();
-    dispatchCustomEvent(this, 'select', option);
-  }
-
-  _onMouseOver() {
-    this.shadowRoot.firstElementChild.classList.remove('keyboard');
-    this._clearHover();
-    this._shouldSelect = true;
-  }
-
-  _onMouseLeave() {
-    this._shouldSelect = false;
-  }
-
-  _renderOption(option) {
-    if (option.element) {
-      return option.element;
-    }
-    if (option.innerHTML) {
-      const wrapper = document.createElement('div');
-      wrapper.innerHTML = option.innerHTML;
-      return wrapper;
-    }
-    return option.value;
-  }
-
-  _renderStyle() {
-    if (this.style) {
-      const wrapper = document.createElement('div');
-      wrapper.innerHTML = unsafeCSS(this.style);
-      return wrapper;
-    }
-    return '';
-  }
-
-  _hasNoOptionSlot() {
-    for (const node of this.childNodes) {
-      if (node.slot === 'noOption') {
-        return true;
-      }
-    }
-    return false;
-  }
-
-  render() {
-    const options = this._getFilteredOptions();
-    let open = false;
-
-    if (options && options.length > 0 && this._forceOpen) {
-      open = this.minChars === 0 || this.value.trim().length >= this.minChars;
-    }
-
-    const input = this._getInput();
-    let top = 0;
-    if (input != null) {
-      top = input.offsetHeight;
-    }
-
-    const classes = {
-      options: true,
-      open,
-    };
-
-    return html` <div class="container">
-      ${this._renderStyle()}
-      <slot></slot>
-      ${this._hasNoOptionSlot() && this._forceOpen
-        ? html`<div class="options open" style="${styleMap({ top: `${top}px` })}">
-            <slot name="noOption" class="${!options || options.length === 0 ? 'show' : 'hide'}"></slot>
-          </div>`
-        : ''}
-      <div class="${classMap(classes)}" @mouseleave="${this._onMouseLeave}" style="${styleMap({ top: `${top}px` })}">
-        ${repeat(
-          options,
-          (option) => option,
-          (option, index) => html`
-            <div
-              class="${classMap({ option: true })}"
-              data-value="${option.value}"
-              @mouseover="${() => this._onMouseOver(option, index)}"
-              @click="${() => this._onSelect(option.value, option)}"
-            >
-              ${this._renderOption(option)}
-            </div>
-          `,
-        )}
-      </div>
-    </div>`;
-  }
-
-  _clearHover() {
-    this.shadowRoot.querySelectorAll('.option.hover').forEach((o) => o.classList.remove('hover'));
-  }
-
-  _updateHover() {
-    this._clearHover();
-    if (this._candidateIndex > -1) {
-      this.shadowRoot.firstElementChild.classList.add('keyboard');
-      const candidate = this.shadowRoot.querySelectorAll('.option')[this._candidateIndex];
-      if (candidate) {
-        const options = this.shadowRoot.querySelector('.options');
-        const { top, left } = candidate.getBoundingClientRect();
-        const container = options.getBoundingClientRect();
-        const scrollLeft = left - container.left;
-        const scrollTop = top - container.top;
-        options.scrollTo(scrollLeft, scrollTop);
-        candidate.classList.add('hover');
-      }
-    }
-  }
-
-  _onKeydown(e) {
-    switch (e.keyCode) {
-      case ENTER_KEY_CODE: {
-        const options = this.shadowRoot.querySelectorAll('.option');
-        const candidate = options[this._candidateIndex];
-        if (candidate) {
-          e.preventDefault();
-          e.stopPropagation();
-          this._candidateIndex = -1;
-          this._onSelect(candidate.getAttribute('data-value'));
-          this._updateHover();
-        }
-        this._close();
-        break;
-      }
-
-      case DOWN_ARROW_KEY_CODE: {
-        if (this._candidateIndex < this.shadowRoot.querySelectorAll('.option').length - 1) {
-          e.preventDefault();
-          e.stopPropagation();
-          this._candidateIndex += 1;
-          this._updateHover();
-        }
-        break;
-      }
-
-      case UP_ARROW_KEY_CODE: {
-        if (this._candidateIndex > 0) {
-          e.preventDefault();
-          e.stopPropagation();
-          this._candidateIndex -= 1;
-          this._updateHover();
-        }
-        break;
-      }
-
-      case ESCAPE_KEY_CODE: {
-        e.preventDefault();
-        e.stopPropagation();
-        this._candidateIndex = -1;
-        this._updateHover();
-        break;
-      }
-      default:
-        this.value = this._getInput().value;
-        this._candidateIndex = -1;
-        this._updateHover();
-    }
-  }
-
-  _open() {
-    this._forceOpen = true;
-    dispatchCustomEvent(this, 'opened', { target: this });
-  }
-
-  _close() {
-    this._forceOpen = false;
-  }
-
-  _onFocus() {
-    this._open();
-  }
-
-  _onBlur() {
-    // Important when using custom HTML in options
-    if (this._shouldSelect === false) {
-      this._close();
-    }
-  }
-
-  _getInput() {
-    for (const node of this.childNodes) {
-      if (node.slot === 'input') {
-        return node;
-      }
-    }
-    return this.firstElementChild;
-  }
-
-  _onClear(event) {
-    this.value = event.target.value;
-  }
-
-  updated() {
-    setTimeout(() => {
-      const firstOption = this.shadowRoot.querySelector('.option');
-      if (firstOption) {
-        const maxHeight = firstOption.clientHeight * parseInt(this.size, 10);
-        const options = this.shadowRoot.querySelector('.options');
-        options.style.maxHeight = `${maxHeight}px`;
-        options.scrollTo(0, 0);
-      }
-    }, 0);
-  }
-
-  firstUpdated() {
-    this._handlers = {
-      input: this._onInput.bind(this),
-      focus: this._onFocus.bind(this),
-      blur: this._onBlur.bind(this),
-      keydown: this._onKeydown.bind(this),
-      clear: this._onClear.bind(this),
-    };
-    this.shadowRoot.addEventListener('input', this._handlers.input);
-    this.shadowRoot.addEventListener('keydown', this._handlers.keydown);
-    const input = this._getInput();
-    input.addEventListener('focus', this._handlers.focus);
-    input.addEventListener('blur', this._handlers.blur);
-    input.addEventListener('gv-input:clear', this._handlers.clear);
-    if (input.tagName.toLowerCase() === 'gv-input') {
-      input.setAttribute('no-submit', true);
-    }
-  }
-
-  _onOpened({ detail }) {
-    if (detail.target !== this) {
-      this._close();
-    }
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    window.addEventListener('gv-autocomplete:opened', this._handleOpened);
-  }
-
-  disconnectedCallback() {
-    if (this._handlers) {
-      this.shadowRoot.removeEventListener('input', this._handlers.input);
-      this.shadowRoot.removeEventListener('keydown', this._handlers.keydown);
-      const input = this._getInput();
-      input.removeEventListener('focus', this._handlers.focus);
-      input.removeEventListener('blur', this._handlers.blur);
-      input.removeEventListener('gv-input:clear', this._handlers.clear);
-    }
-    window.removeEventListener('gv-autocomplete:open', this._handleOpened);
-    super.disconnectedCallback();
-  }
-}
-
-window.customElements.define('gv-autocomplete', GvAutocomplete);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvAutocomplete=void 0;const t=require("lit"),e=require("../lib/events"),o=require("lit/directives/repeat"),i=require("lit/directives/class-map"),s=require("lit/directives/style-map");class n extends t.LitElement{static get properties(){return{options:{type:Array,reflect:!0},value:{type:String,reflect:!0},style:{type:String},minChars:{type:Number},filter:{type:Boolean|Function},size:{type:Number},_options:{type:Array,attribute:!1},_forceOpen:{type:Boolean,attribute:!1}}}static get styles(){return[t.css`:host{box-sizing:border-box;display:inline-block;width:100%}::slotted(*){width:100%}.container{position:relative}.container .options.open{display:block;visibility:visible;opacity:1;-webkit-transform:-webkit-translateY(0);transform:translateY(0);z-index:100}.options{background-color:var(--gv-autocomplete--bgc,var(--gv-theme-neutral-color-lightest,#fff));color:var(--gv-autocomplete--c,var(--gv-theme-font-color,#262626));margin:.2rem;position:absolute;box-shadow:0 0 0 1px var(--gv-theme-neutral-color,#f5f5f5),0 1px 3px var(--gv-theme-neutral-color-dark,#bfbfbf);border-radius:2px;display:block;width:100%;cursor:pointer;left:0;right:0;visibility:hidden;opacity:0;-webkit-transform:-webkit-translateY(-2em);transform:translateY(-2em);-webkit-transition:-webkit-transform 150ms ease-in-out,opacity 150ms ease-in-out;-moz-transition:all 150ms ease-in-out;-ms-transition:all 150ms ease-in-out;-o-transition:all 150ms ease-in-out;overflow:auto}.option{padding:.2rem;min-height:30px;word-break:break-all}.option.match~.option.match{background-color:transparent}.keyboard .option.hover:hover,.option.hover,.option:hover{background-color:var(--gv-autocomplete-hover--bgc,var(--gv-theme-neutral-color-lighter,#fafafa))}.keyboard .option:hover{background-color:transparent}.show{display:block}.hide{display:none}`]}constructor(){super(),this._options=[],this._candidateIndex=-1,this.minChars=1,this.value="",this.style="",this.filter=!1,this.size=5,this._handleOpened=this._onOpened.bind(this)}set options(t){this._options=t}get options(){return this._options}reset(){this._getInput().reset(),this._options=[]}_getFilteredOptions(){return this.filter&&this.value&&this.value.length>=this.minChars&&"*"!==this.value?"function"==typeof this.filter?this._options.filter((t=>this.filter(this.value,t))):this._options.filter((t=>-1!==t.value.indexOf(this.value))):this._options}_onInput(t){clearTimeout(this._cancellableTimeout),this.value=t.target.value,null!=this.value&&this.value.trim().length>=this.minChars?this._cancellableTimeout=setTimeout((()=>{this._open(),(0,e.dispatchCustomEvent)(this,"search",this.value)}),200):this.options=[]}_onSelect(t,o){null==o&&(o=this._options.find((e=>e.value===t))),this.value=this._getInput().value=t,this._close(),(0,e.dispatchCustomEvent)(this,"select",o)}_onMouseOver(){this.shadowRoot.firstElementChild.classList.remove("keyboard"),this._clearHover(),this._shouldSelect=!0}_onMouseLeave(){this._shouldSelect=!1}_renderOption(t){if(t.element)return t.element;if(t.innerHTML){const e=document.createElement("div");return e.innerHTML=t.innerHTML,e}return t.value}_renderStyle(){if(this.style){const e=document.createElement("div");return e.innerHTML=(0,t.unsafeCSS)(this.style),e}return""}_hasNoOptionSlot(){for(const t of this.childNodes)if("noOption"===t.slot)return!0;return!1}render(){const e=this._getFilteredOptions();let n=!1;e&&e.length>0&&this._forceOpen&&(n=0===this.minChars||this.value.trim().length>=this.minChars);const r=this._getInput();let a=0;null!=r&&(a=r.offsetHeight);const l={options:!0,open:n};return t.html`<div class="container">${this._renderStyle()}<slot></slot>${this._hasNoOptionSlot()&&this._forceOpen?t.html`<div class="options open" style="${(0,s.styleMap)({top:`${a}px`})}"><slot name="noOption" class="${e&&0!==e.length?"hide":"show"}"></slot></div>`:""}<div class="${(0,i.classMap)(l)}" @mouseleave="${this._onMouseLeave}" style="${(0,s.styleMap)({top:`${a}px`})}">${(0,o.repeat)(e,(t=>t),((e,o)=>t.html`<div class="${(0,i.classMap)({option:!0})}" data-value="${e.value}" @mouseover="${()=>this._onMouseOver(e,o)}" @click="${()=>this._onSelect(e.value,e)}">${this._renderOption(e)}</div>`))}</div></div>`}_clearHover(){this.shadowRoot.querySelectorAll(".option.hover").forEach((t=>t.classList.remove("hover")))}_updateHover(){if(this._clearHover(),this._candidateIndex>-1){this.shadowRoot.firstElementChild.classList.add("keyboard");const t=this.shadowRoot.querySelectorAll(".option")[this._candidateIndex];if(t){const e=this.shadowRoot.querySelector(".options"),{top:o,left:i}=t.getBoundingClientRect(),s=e.getBoundingClientRect(),n=i-s.left,r=o-s.top;e.scrollTo(n,r),t.classList.add("hover")}}}_onKeydown(t){switch(t.keyCode){case 13:{const e=this.shadowRoot.querySelectorAll(".option")[this._candidateIndex];e&&(t.preventDefault(),t.stopPropagation(),this._candidateIndex=-1,this._onSelect(e.getAttribute("data-value")),this._updateHover()),this._close();break}case 40:this._candidateIndex<this.shadowRoot.querySelectorAll(".option").length-1&&(t.preventDefault(),t.stopPropagation(),this._candidateIndex+=1,this._updateHover());break;case 38:this._candidateIndex>0&&(t.preventDefault(),t.stopPropagation(),this._candidateIndex-=1,this._updateHover());break;case 27:t.preventDefault(),t.stopPropagation(),this._candidateIndex=-1,this._updateHover();break;default:this.value=this._getInput().value,this._candidateIndex=-1,this._updateHover()}}_open(){this._forceOpen=!0,(0,e.dispatchCustomEvent)(this,"opened",{target:this})}_close(){this._forceOpen=!1}_onFocus(){this._open()}_onBlur(){!1===this._shouldSelect&&this._close()}_getInput(){for(const t of this.childNodes)if("input"===t.slot)return t;return this.firstElementChild}_onClear(t){this.value=t.target.value}updated(){setTimeout((()=>{const t=this.shadowRoot.querySelector(".option");if(t){const e=t.clientHeight*parseInt(this.size,10),o=this.shadowRoot.querySelector(".options");o.style.maxHeight=`${e}px`,o.scrollTo(0,0)}}),0)}firstUpdated(){this._handlers={input:this._onInput.bind(this),focus:this._onFocus.bind(this),blur:this._onBlur.bind(this),keydown:this._onKeydown.bind(this),clear:this._onClear.bind(this)},this.shadowRoot.addEventListener("input",this._handlers.input),this.shadowRoot.addEventListener("keydown",this._handlers.keydown);const t=this._getInput();t.addEventListener("focus",this._handlers.focus),t.addEventListener("blur",this._handlers.blur),t.addEventListener("gv-input:clear",this._handlers.clear),"gv-input"===t.tagName.toLowerCase()&&t.setAttribute("no-submit",!0)}_onOpened({detail:t}){t.target!==this&&this._close()}connectedCallback(){super.connectedCallback(),window.addEventListener("gv-autocomplete:opened",this._handleOpened)}disconnectedCallback(){if(this._handlers){this.shadowRoot.removeEventListener("input",this._handlers.input),this.shadowRoot.removeEventListener("keydown",this._handlers.keydown);const t=this._getInput();t.removeEventListener("focus",this._handlers.focus),t.removeEventListener("blur",this._handlers.blur),t.removeEventListener("gv-input:clear",this._handlers.clear)}window.removeEventListener("gv-autocomplete:open",this._handleOpened),super.disconnectedCallback()}}exports.GvAutocomplete=n,window.customElements.define("gv-autocomplete",n);