@gravitee/ui-components 3.25.3-typescript-8a53edf → 3.25.3-typescript-e7256ca

package/src/molecules/gv-card.js

@@ -1,133 +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, html } from 'lit';
-import { skeleton } from '../styles/skeleton';
-import { classMap } from 'lit/directives/class-map';
-import '../atoms/gv-image';
-import '../atoms/gv-button';
-import { i18n } from '../lib/i18n';
-import { ItemResource } from '../mixins/item-resource';
-import { getVersion, getTitle } from '../lib/item';
-
-/**
- * Card component
- *
- * ## Details
- * * has @theme facet
- *
- * @attr {Promise<any>} item - An item.
- *
- * @cssprop {Color} [--gv-card--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Background color
- */
-export class GvCard extends ItemResource(LitElement) {
-  static get styles() {
-    return [
-      ...super.styles,
-      // language=CSS
-      css`
-        :host {
-          box-sizing: border-box;
-          display: inline-block;
-          margin: 0.2rem;
-          vertical-align: middle;
-          width: 144px;
-          max-height: 144px;
-        }
-
-        gv-identity-picture {
-          width: 65px;
-          height: 65px;
-          --gv-image--of: contain;
-        }
-
-        .card {
-          position: relative;
-          display: flex;
-          flex-direction: column;
-          max-width: 144px;
-          min-height: 144px;
-          border-radius: 2px;
-          background-color: var(--gv-card--bgc, var(--gv-theme-neutral-color-lightest, #ffffff));
-          color: var(--gv-theme-font-color-dark, #262626);
-          box-shadow: 0 0 0 1px var(--gv-theme-neutral-color, #f5f5f5), 0 1px 3px var(--gv-theme-neutral-color-dark, #bfbfbf);
-          transition: all 0.3s;
-        }
-
-        .card:hover {
-          transform: translateY(-4px);
-          box-shadow: 0 10px 20px -10px var(--gv-theme-neutral-color-dark, #bfbfbf);
-          cursor: pointer;
-        }
-
-        .content > div {
-          display: flex;
-          justify-content: center;
-          margin-bottom: 0.2rem;
-        }
-
-        .image {
-          display: flex;
-          flex: 1;
-          align-items: center;
-          justify-content: center;
-          position: relative;
-          padding-top: 0.2rem;
-        }
-
-        .title {
-          line-height: 22px;
-          font-size: var(--gv-theme-font-size-s, 12px);
-          text-transform: capitalize;
-          font-weight: bold;
-          white-space: nowrap;
-          overflow: hidden;
-        }
-
-        .content {
-          flex: 1;
-          padding: 6px 16px 12px;
-        }
-
-        .version {
-          color: var(--gv-theme-neutral-color-dark, #d9d9d9);
-          top: 0.4rem;
-          right: 0.4rem;
-          position: absolute;
-        }
-      `,
-      skeleton,
-    ];
-  }
-
-  render() {
-    const title = getTitle(this._item);
-    return html`<div class="card" title="${title}">
-      <span class="${classMap({ skeleton: this._skeleton, version: true })}">${getVersion(this._item)}</span>
-      <div class="${classMap({ image: true, skeleton: this._skeleton })}">${this._renderImage()}</div>
-
-      <div class="${classMap({ content: true, empty: this._error || this._empty })}">
-        ${this._error || this._empty
-          ? html` <span>${this._error ? i18n('gv-card.error') : i18n('gv-card.empty')}</span> `
-          : html` <div class="${classMap({ skeleton: this._skeleton })}">
-                <span class="title">${title}</span>
-              </div>
-              <div>${this._renderStates()}</div>`}
-      </div>
-    </div>`;
-  }
-}
-
-window.customElements.define('gv-card', GvCard);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvCard=void 0;const e=require("lit"),t=require("../styles/skeleton"),r=require("lit/directives/class-map");require("../atoms/gv-image"),require("../atoms/gv-button");const i=require("../lib/i18n"),s=require("../mixins/item-resource"),o=require("../lib/item");class a extends((0,s.ItemResource)(e.LitElement)){static get styles(){return[...super.styles,e.css`:host{box-sizing:border-box;display:inline-block;margin:.2rem;vertical-align:middle;width:144px;max-height:144px}gv-identity-picture{width:65px;height:65px;--gv-image--of:contain}.card{position:relative;display:flex;flex-direction:column;max-width:144px;min-height:144px;border-radius:2px;background-color:var(--gv-card--bgc,var(--gv-theme-neutral-color-lightest,#fff));color:var(--gv-theme-font-color-dark,#262626);box-shadow:0 0 0 1px var(--gv-theme-neutral-color,#f5f5f5),0 1px 3px var(--gv-theme-neutral-color-dark,#bfbfbf);transition:all .3s}.card:hover{transform:translateY(-4px);box-shadow:0 10px 20px -10px var(--gv-theme-neutral-color-dark,#bfbfbf);cursor:pointer}.content>div{display:flex;justify-content:center;margin-bottom:.2rem}.image{display:flex;flex:1;align-items:center;justify-content:center;position:relative;padding-top:.2rem}.title{line-height:22px;font-size:var(--gv-theme-font-size-s,12px);text-transform:capitalize;font-weight:700;white-space:nowrap;overflow:hidden}.content{flex:1;padding:6px 16px 12px}.version{color:var(--gv-theme-neutral-color-dark,#d9d9d9);top:.4rem;right:.4rem;position:absolute}`,t.skeleton]}render(){const t=(0,o.getTitle)(this._item);return e.html`<div class="card" title="${t}"><span class="${(0,r.classMap)({skeleton:this._skeleton,version:!0})}">${(0,o.getVersion)(this._item)}</span><div class="${(0,r.classMap)({image:!0,skeleton:this._skeleton})}">${this._renderImage()}</div><div class="${(0,r.classMap)({content:!0,empty:this._error||this._empty})}">${this._error||this._empty?e.html`<span>${this._error?(0,i.i18n)("gv-card.error"):(0,i.i18n)("gv-card.empty")}</span>`:e.html`<div class="${(0,r.classMap)({skeleton:this._skeleton})}"><span class="title">${t}</span></div><div>${this._renderStates()}</div>`}</div></div>`}}exports.GvCard=a,window.customElements.define("gv-card",a);

package/src/molecules/gv-category-list.d.ts

@@ -0,0 +1,17 @@
+/**
+ * List of categories
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @cssprop {Color} [--gv-category-list--bgc-1=#cce6eb] - Category background color 1
+ * @cssprop {Color} [--gv-category-list--bgc-2=#fcf1a8] - Category background color 2
+ * @cssprop {Color} [--gv-category-list--bgc-3=#d9d4f1] - Category background color 3
+ * @cssprop {Color} [--gv-category-list--bgc-4=#f9c15e] - Category background color 4
+ * @cssprop {Color} [--gv-category-list--bgc-5=#d4fccd] - Category background color 5
+ * @cssprop {Color} [--gv-category-list--bgc-6=#e0c8b2] - Category background color 6
+ */
+export class GvCategoryList extends GvCardList {
+    _getCategoryBackgroundColor(index: any): string;
+}
+import { GvCardList } from "./gv-card-list";

package/src/molecules/gv-category-list.js

@@ -1,60 +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 } from 'lit';
-import './gv-category';
-import { GvCardList } from './gv-card-list';
-
-/**
- * List of categories
- *
- * ## Details
- * * has @theme facet
- *
- * @cssprop {Color} [--gv-category-list--bgc-1=#cce6eb] - Category background color 1
- * @cssprop {Color} [--gv-category-list--bgc-2=#fcf1a8] - Category background color 2
- * @cssprop {Color} [--gv-category-list--bgc-3=#d9d4f1] - Category background color 3
- * @cssprop {Color} [--gv-category-list--bgc-4=#f9c15e] - Category background color 4
- * @cssprop {Color} [--gv-category-list--bgc-5=#d4fccd] - Category background color 5
- * @cssprop {Color} [--gv-category-list--bgc-6=#e0c8b2] - Category background color 6
- */
-export class GvCategoryList extends GvCardList {
-  static get styles() {
-    return [
-      ...super.styles,
-      // language=CSS
-      css`
-        :host {
-          --bgc-1: var(--gv-category-list--bgc-1, #cce6eb);
-          --bgc-2: var(--gv-category-list--bgc-2, #fcf1a8);
-          --bgc-3: var(--gv-category-list--bgc-3, #d9d4f1);
-          --bgc-4: var(--gv-category-list--bgc-4, #f9c15e);
-          --bgc-5: var(--gv-category-list--bgc-5, #d4fccd);
-          --bgc-6: var(--gv-category-list--bgc-6, #e0c8b2);
-        }
-      `,
-    ];
-  }
-
-  renderItem(item, index) {
-    return html`<gv-category class="item" .category="${item || null}" style="${this._getCategoryBackgroundColor(index)}"> </gv-category>`;
-  }
-
-  _getCategoryBackgroundColor(index) {
-    return `--gv-category--bgc: var(--bgc-${(index % 6) + 1})`;
-  }
-}
-
-window.customElements.define('gv-category-list', GvCategoryList);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvCategoryList=void 0;const e=require("lit");require("./gv-category");const t=require("./gv-card-list");class r extends t.GvCardList{static get styles(){return[...super.styles,e.css`:host{--bgc-1:var(--gv-category-list--bgc-1, #cce6eb);--bgc-2:var(--gv-category-list--bgc-2, #fcf1a8);--bgc-3:var(--gv-category-list--bgc-3, #d9d4f1);--bgc-4:var(--gv-category-list--bgc-4, #f9c15e);--bgc-5:var(--gv-category-list--bgc-5, #d4fccd);--bgc-6:var(--gv-category-list--bgc-6, #e0c8b2)}`]}renderItem(t,r){return e.html`<gv-category class="item" .category="${t||null}" style="${this._getCategoryBackgroundColor(r)}"></gv-category>`}_getCategoryBackgroundColor(e){return`--gv-category--bgc: var(--bgc-${e%6+1})`}}exports.GvCategoryList=r,window.customElements.define("gv-category-list",r);

package/src/molecules/gv-category.d.ts

@@ -0,0 +1,64 @@
+declare const GvCategory_base: {
+    new (): {
+        [x: string]: any;
+        _invisible: boolean;
+        _skeleton: boolean;
+        _error: boolean;
+        _empty: boolean;
+        updated(changedProperties: any): void;
+    };
+    [x: string]: any;
+    readonly properties: {
+        _invisible: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        _skeleton: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+        _error: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+        _empty: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+    };
+    readonly styles: import("lit").CSSResult[];
+};
+/**
+ * A card used to display a category
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-category:click - Custom click event
+ *
+ * @attr {Promise<{name, description, _links: { picture }, total_apis}>} category - A category object
+ * @attr {Length} limit - number of characters that can be display in the description. If _description_ is greater, it will be truncated.
+ *
+ * @cssprop {Color} [--gv-category--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Background color
+ * @cssprop {Color} [--gv-category--c=var(--gv-theme-font-color-dark, #262626)] - Color
+ * @cssprop {Length} [--gv-category--h=200px] - Height
+ */
+export class GvCategory extends GvCategory_base {
+    static get properties(): {
+        category: {
+            type: ObjectConstructor;
+        };
+        limit: {
+            type: NumberConstructor;
+        };
+        _category: {
+            type: ObjectConstructor;
+            attribute: boolean;
+        };
+    };
+    _skeletonAttribute: string;
+    _get(property: any): any;
+    _onClick(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/src/molecules/gv-category.js

@@ -1,170 +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 { truncate } from '../lib/utils';
-import { classMap } from 'lit/directives/class-map';
-import { dispatchCustomEvent } from '../lib/events';
-import { i18n } from '../lib/i18n';
-import { withSkeletonAttribute } from '../mixins/with-skeleton-attribute';
-
-/**
- * A card used to display a category
- *
- * ## Details
- * * has @theme facet
- *
- * @fires gv-category:click - Custom click event
- *
- * @attr {Promise<{name, description, _links: { picture }, total_apis}>} category - A category object
- * @attr {Length} limit - number of characters that can be display in the description. If _description_ is greater, it will be truncated.
- *
- * @cssprop {Color} [--gv-category--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Background color
- * @cssprop {Color} [--gv-category--c=var(--gv-theme-font-color-dark, #262626)] - Color
- * @cssprop {Length} [--gv-category--h=200px] - Height
- */
-export class GvCategory extends withSkeletonAttribute(LitElement) {
-  static get properties() {
-    return {
-      category: { type: Object },
-      limit: { type: Number },
-      _category: { type: Object, attribute: false },
-    };
-  }
-
-  static get styles() {
-    return [
-      ...super.styles,
-      // language=CSS
-      css`
-        :host {
-          box-sizing: border-box;
-          display: inline-block;
-          margin: 0.2rem;
-          vertical-align: middle;
-          min-width: 415px;
-        }
-
-        .card {
-          background-color: var(--gv-category--bgc, var(--gv-theme-neutral-color-lightest, #ffffff));
-          border-radius: 4px;
-          display: flex;
-          flex-direction: column;
-          height: var(--gv-category--h, 200px);
-          padding: 2rem;
-          box-shadow: 0 0 0 1px var(--gv-theme-neutral-color-dark, #bfbfbf), 0 1px 3px var(--gv-theme-neutral-color-dark, #bfbfbf);
-          transition: all 0.3s;
-          position: relative;
-        }
-
-        .card:hover {
-          transform: translateY(-4px);
-          box-shadow: 0 20px 40px -14px var(--gv-theme-neutral-color, #f5f5f5);
-          cursor: pointer;
-        }
-
-        .box {
-          display: flex;
-        }
-
-        .title {
-          flex: 1;
-          align-self: center;
-        }
-
-        .title span {
-          font-size: var(--gv-theme-font-size-s);
-          font-weight: 600;
-          line-height: var(--gv-theme-font-size-s);
-          margin-left: 8px;
-          opacity: 0.7;
-        }
-
-        gv-identity-picture {
-          height: 80px;
-          width: 80px;
-          margin: 0.5rem 1rem 0.5rem 0;
-        }
-
-        .title {
-          color: var(--gv-category--c, var(--gv-theme-font-color-dark, #262626));
-          font-size: var(--gv-theme-font-size-xxl, 30px);
-          font-style: normal;
-          font-weight: 600;
-          line-height: calc(var(--gv-theme-font-size-xxl, 30px) + 6px);
-        }
-
-        .description {
-          color: var(--gv-category--c, var(--gv-theme-font-color-dark, #262626));
-          font-size: var(--gv-theme-font-size-l, 16px);
-          font-style: normal;
-          font-weight: normal;
-          line-height: 24px;
-          opacity: 0.7;
-
-          /** text-overflow **/
-          max-height: 150px;
-          display: -webkit-box;
-          -webkit-line-clamp: 4;
-          -webkit-box-orient: vertical;
-          overflow: hidden;
-        }
-      `,
-    ];
-  }
-
-  constructor() {
-    super();
-    this._skeletonAttribute = 'category';
-  }
-
-  _get(property) {
-    if (this._category) {
-      return this._category[property];
-    }
-    return '';
-  }
-
-  _onClick() {
-    dispatchCustomEvent(this, 'click', this._category);
-  }
-
-  render() {
-    const total = this._get('total_apis');
-    return html`<div
-      @click=${this._onClick}
-      class="${classMap({ card: true, skeleton: this._skeleton, empty: this._error || this._empty })}"
-    >
-      ${this._error || this._empty
-        ? html`
-            <div class="${classMap({ skeleton: this._skeleton })}">
-              <span>${this._error ? i18n('gv-category.error') : i18n('gv-category.empty')}</span>
-            </div>
-          `
-        : html` <div class="box">
-              <gv-identity-picture
-                .skeleton="${this._skeleton}"
-                display_name="${this._get('name')}"
-                picture="${this._get('_links') ? this._get('_links').picture : ''}"
-              ></gv-identity-picture>
-              <div class="title">${this._get('name')}${total ? html`<span>(${total})</span>` : ''}</div>
-            </div>
-
-            <div class="description">${truncate(this._get('description'), this.limit)}</div>`}
-    </div> `;
-  }
-}
-
-window.customElements.define('gv-category', GvCategory);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvCategory=void 0;const e=require("lit"),t=require("../lib/utils"),i=require("lit/directives/class-map"),r=require("../lib/events"),s=require("../lib/i18n"),o=require("../mixins/with-skeleton-attribute");class a extends((0,o.withSkeletonAttribute)(e.LitElement)){static get properties(){return{category:{type:Object},limit:{type:Number},_category:{type:Object,attribute:!1}}}static get styles(){return[...super.styles,e.css`:host{box-sizing:border-box;display:inline-block;margin:.2rem;vertical-align:middle;min-width:415px}.card{background-color:var(--gv-category--bgc,var(--gv-theme-neutral-color-lightest,#fff));border-radius:4px;display:flex;flex-direction:column;height:var(--gv-category--h,200px);padding:2rem;box-shadow:0 0 0 1px var(--gv-theme-neutral-color-dark,#bfbfbf),0 1px 3px var(--gv-theme-neutral-color-dark,#bfbfbf);transition:all .3s;position:relative}.card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -14px var(--gv-theme-neutral-color,#f5f5f5);cursor:pointer}.box{display:flex}.title{flex:1;align-self:center}.title span{font-size:var(--gv-theme-font-size-s);font-weight:600;line-height:var(--gv-theme-font-size-s);margin-left:8px;opacity:.7}gv-identity-picture{height:80px;width:80px;margin:.5rem 1rem .5rem 0}.title{color:var(--gv-category--c,var(--gv-theme-font-color-dark,#262626));font-size:var(--gv-theme-font-size-xxl,30px);font-style:normal;font-weight:600;line-height:calc(var(--gv-theme-font-size-xxl,30px) + 6px)}.description{color:var(--gv-category--c,var(--gv-theme-font-color-dark,#262626));font-size:var(--gv-theme-font-size-l,16px);font-style:normal;font-weight:400;line-height:24px;opacity:.7;max-height:150px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}`]}constructor(){super(),this._skeletonAttribute="category"}_get(e){return this._category?this._category[e]:""}_onClick(){(0,r.dispatchCustomEvent)(this,"click",this._category)}render(){const r=this._get("total_apis");return e.html`<div @click="${this._onClick}" class="${(0,i.classMap)({card:!0,skeleton:this._skeleton,empty:this._error||this._empty})}">${this._error||this._empty?e.html`<div class="${(0,i.classMap)({skeleton:this._skeleton})}"><span>${this._error?(0,s.i18n)("gv-category.error"):(0,s.i18n)("gv-category.empty")}</span></div>`:e.html`<div class="box"><gv-identity-picture .skeleton="${this._skeleton}" display_name="${this._get("name")}" picture="${this._get("_links")?this._get("_links").picture:""}"></gv-identity-picture><div class="title">${this._get("name")}${r?e.html`<span>(${r})</span>`:""}</div></div><div class="description">${(0,t.truncate)(this._get("description"),this.limit)}</div>`}</div>`}}exports.GvCategory=a,window.customElements.define("gv-category",a);

package/src/molecules/gv-code.d.ts

@@ -0,0 +1,192 @@
+/**
+ * Code component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-code:input - input events with the `value` on `detail`
+ * @fires gv-code:ready - event dispatch when component is ready
+ * @fires gv-code:clipboard-copy - event dispatch when component the `value` has been copied to clipboard
+ *
+ * @attr {String} label - code language
+ * @attr {String} value - code content to be highlighted
+ * @attr {options} Object - options based on codemirror
+ * @attr {String} placeholder - an example value to display in the input when empty
+ * @attr {Number} rows - number of rows of the text element
+ * @attr {Boolean} large - for a large input (only if the field has one row)
+ * @attr {Boolean} medium - for a medium input (only if the field has one row) (Default)
+ * @attr {Boolean} small - for a small input (only if the field has one row)
+ *
+ * @attr {Boolean} [clipboard=false]- true if field has clipboard button
+ * @attr {Boolean} [autofocus=false] - true to put the focus on the input
+ * @attr {Boolean} [readonly=false] - true if field is readonly mode
+ */
+export class GvCode extends GvInput {
+    static get properties(): {
+        options: {
+            type: ObjectConstructor;
+        };
+        rows: {
+            type: NumberConstructor;
+        };
+        _error: {
+            type: StringConstructor;
+            attribute: boolean;
+        };
+        type: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        large: {
+            type: BooleanConstructor;
+        };
+        medium: {
+            type: BooleanConstructor;
+        };
+        small: {
+            type: BooleanConstructor;
+        };
+        icon: {
+            type: StringConstructor;
+        };
+        iconLeft: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        loading: {
+            type: BooleanConstructor;
+        };
+        min: {
+            type: NumberConstructor;
+        };
+        max: {
+            type: NumberConstructor;
+        };
+        autocomplete: {
+            type: StringConstructor;
+        };
+        clipboard: {
+            type: BooleanConstructor;
+        };
+        clickable: {
+            type: BooleanConstructor;
+        };
+        clearable: {
+            type: BooleanConstructor;
+        };
+        noSubmit: {
+            type: BooleanConstructor;
+            attribute: string;
+        };
+        pattern: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        description: {
+            type: StringConstructor;
+        };
+        _type: {
+            type: StringConstructor;
+            attribute: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        readonly: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        skeleton: {
+            type: BooleanConstructor;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        title: {
+            type: StringConstructor;
+        };
+        name: {
+            type: StringConstructor;
+        };
+        placeholder: {
+            type: StringConstructor;
+        };
+        autofocus: {
+            type: BooleanConstructor;
+        };
+        invalid: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        valid: {
+            type: BooleanConstructor;
+            reflect: boolean; /**
+             * Code component
+             *
+             * ## Details
+             * * has @theme facet
+             *
+             * @fires gv-code:input - input events with the `value` on `detail`
+             * @fires gv-code:ready - event dispatch when component is ready
+             * @fires gv-code:clipboard-copy - event dispatch when component the `value` has been copied to clipboard
+             *
+             * @attr {String} label - code language
+             * @attr {String} value - code content to be highlighted
+             * @attr {options} Object - options based on codemirror
+             * @attr {String} placeholder - an example value to display in the input when empty
+             * @attr {Number} rows - number of rows of the text element
+             * @attr {Boolean} large - for a large input (only if the field has one row)
+             * @attr {Boolean} medium - for a medium input (only if the field has one row) (Default)
+             * @attr {Boolean} small - for a small input (only if the field has one row)
+             *
+             * @attr {Boolean} [clipboard=false]- true if field has clipboard button
+             * @attr {Boolean} [autofocus=false] - true to put the focus on the input
+             * @attr {Boolean} [readonly=false] - true if field is readonly mode
+             */
+        };
+    };
+    static findLanguage(mode: any): Promise<import("@codemirror/language").LanguageDescription | {
+        name: string;
+        support: {
+            extension: import("@codemirror/stream-parser").StreamLanguage<unknown>;
+        };
+    } | null | undefined>;
+    static get codemirrorTheme(): import("@codemirror/state").Extension;
+    readonly: boolean;
+    autofocus: boolean;
+    clipboard: boolean;
+    _clipboardIcon: string;
+    languageCompartment: Compartment;
+    readonlyCompartment: Compartment;
+    placeholderCompartment: Compartment;
+    get hasInputStyle(): boolean;
+    _autocomplete(completionContext: any): any;
+    findBestAutocompleteHandler(completionContext: any): {
+        handler: {
+            run(completionContext: any): any;
+        };
+        match: boolean;
+    };
+    get defaultCompletionHandler(): {
+        run(completionContext: any): any;
+    };
+    _getExtensions(): import("@codemirror/state").Extension[];
+    getExtensions(): never[];
+    _editorState: any;
+    _editorView: any;
+    _reflectPlaceholder(): void;
+    _reflectValue(): void;
+    _reflectReadonlyDisabled(): void;
+    _reflectOptions(): Promise<void>;
+}
+import { GvInput } from "../atoms/gv-input";
+import { Compartment } from "@codemirror/state";