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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravitee/ui-components",
-  "version": "3.25.3-typescript-e7256ca",
+  "version": "3.25.3-typescript-9cbc31e",
   "description": "Gravitee.io UI Components library, based on Web Components",
   "repository": {
     "type": "git",
@@ -23,7 +23,7 @@
     "check:i18n": "node tasks/check-i18n.js",
     "danger": "danger ci",
     "docs": "wca analyze src/** --outFile .docs/custom-elements.json && node tasks/generate-docs.js",
-    "generate:dist": "npm run tsc && npm run rollup",
+    "generate:dist": "npm run tsc && cp -R assets dist/ && cp package.json dist/",
     "generate:icons": "node tasks/generate-icons.js && npm run lint:fix",
     "generate:theme": "node tasks/generate-theme.js && npm run lint:fix",
     "lint": "eslint src stories tasks && npm run prettier",
@@ -36,7 +36,6 @@
     "prettier": "prettier --check \"**/*.{js,html,css,json}\"",
     "prettier:fix": "prettier --write \"**/*.{js,html,css,json}\"",
     "release": "semantic-release",
-    "rollup": "rollup -c ",
     "serve": "npm run docs && start-storybook -p 6006 --ci -s assets --modern",
     "serve:prod": "npm run build && static -a 0.0.0.0 -p 8080 storybook-static --modern",
     "size": "node tasks/size.js",
@@ -74,10 +73,9 @@
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/preset-env": "7.16.5",
     "@babel/preset-typescript": "^7.16.5",
-    "@commitlint/cli": "15.0.0",
-    "@commitlint/config-conventional": "15.0.0",
+    "@commitlint/cli": "16.0.0",
+    "@commitlint/config-conventional": "16.0.0",
     "@highcharts/map-collection": "1.1.4",
-    "@rollup/plugin-json": "^4.1.0",
     "@semantic-release/changelog": "6.0.1",
     "@semantic-release/git": "10.0.1",
     "@storybook/addon-a11y": "6.4.9",
@@ -85,13 +83,12 @@
     "@storybook/components": "6.4.9",
     "@storybook/theming": "6.4.9",
     "@storybook/web-components": "6.4.9",
-    "@web/rollup-plugin-copy": "^0.3.0",
     "asciidoctor": "2.2.5",
     "asciidoctor-highlight.js": "0.4.0",
     "babel-jest": "27.4.5",
     "babel-loader": "8.2.3",
     "bundle-phobia-cli": "0.14.13",
-    "chromatic": "6.2.3",
+    "chromatic": "6.3.3",
     "danger": "10.7.1",
     "del": "6.0.0",
     "eslint": "8.5.0",
@@ -123,11 +120,6 @@
     "nodemon": "2.0.15",
     "pascal-case": "3.1.2",
     "prettier": "2.5.1",
-    "rollup": "^2.61.1",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-minify-html-literals": "^1.2.6",
-    "rollup-plugin-multi-input": "^1.3.1",
-    "rollup-plugin-terser": "^7.0.2",
     "semantic-release": "18.0.1",
     "sort-package-json": "1.53.1",
     "svgo": "2.8.0",

package/src/atoms/gv-autocomplete.js

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