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

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.js

@@ -1,359 +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 { EditorView, basicSetup } from '@codemirror/basic-setup';
-import { EditorState, Compartment } from '@codemirror/state';
-import { autocompletion } from '@codemirror/autocomplete';
-import { json } from '@codemirror/lang-json';
-import { languages } from '@codemirror/language-data';
-import { placeholder } from '@codemirror/view';
-
-import { shapeClipboard } from '../styles/shapes';
-import { dispatchCustomEvent } from '../lib/events';
-import { uuid } from '../lib/utils';
-import { classMap } from 'lit/directives/class-map';
-import { GvInput } from '../atoms/gv-input';
-import { skeleton } from '../styles/skeleton';
-import { empty } from '../styles/empty';
-import { input } from '../styles/input';
-
-/**
- * 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() {
-    return {
-      ...super.properties,
-      options: { type: Object },
-      rows: { type: Number },
-      _error: { type: String, attribute: false },
-    };
-  }
-
-  constructor() {
-    super();
-    this._id = `gv-code-${uuid()}`;
-    this.value = '';
-    this.readonly = false;
-    this.autofocus = false;
-    this.clipboard = false;
-    this._clipboardIcon = shapeClipboard;
-    this.languageCompartment = new Compartment();
-    this.readonlyCompartment = new Compartment();
-    this.placeholderCompartment = new Compartment();
-  }
-
-  render() {
-    const classes = {
-      box: true,
-      'box-invisible': this.skeleton,
-      large: this.large,
-      medium: this.medium || (!this.large && !this.small),
-      small: this.small,
-      copied: this.hasClipboard && this._copied,
-    };
-    const inputClasses = {
-      content: true,
-      code: !this.hasInputStyle,
-      input: this.hasInputStyle,
-    };
-
-    return html`
-      <div class="${classMap(classes)}">
-        ${this.label ? html`<label for="code">${this.label}</label>` : ''}
-        <div id="${this._id}" class="${classMap(inputClasses)}">
-          <!-- No format please -->
-          ${this.renderIcon()}
-        </div>
-      </div>
-      ${this.description != null ? html`<div class="description" .innerHTML="${this.description}"></div>` : ''}
-    `;
-  }
-
-  bindInputEvents() {
-    dispatchCustomEvent(this, 'ready', { currentTarget: this });
-  }
-
-  get hasInputStyle() {
-    return this.rows === 1;
-  }
-
-  _autocomplete(completionContext) {
-    const { handler, match } = this.findBestAutocompleteHandler(completionContext);
-    return handler.run.call(this, completionContext, match);
-  }
-
-  findBestAutocompleteHandler(completionContext) {
-    return { handler: this.defaultCompletionHandler, match: true };
-  }
-
-  get defaultCompletionHandler() {
-    return {
-      run(completionContext) {
-        const language = completionContext.state.languageDataAt('autocomplete', completionContext.pos);
-        if (language.length > 0) {
-          return language[0](completionContext);
-        }
-        return { from: completionContext.pos, options: [] };
-      },
-    };
-  }
-
-  _getExtensions() {
-    return [
-      basicSetup,
-      GvCode.codemirrorTheme,
-      this.languageCompartment.of(json()),
-      this.placeholderCompartment.of(placeholder(this.placeholder || '')),
-      EditorState.transactionFilter.of((tr) => (this.hasInputStyle && tr.newDoc.lines > 1 ? [] : tr)),
-      this.readonlyCompartment.of(EditorView.editable.of(!this.readonly && !this.disabled)),
-      EditorView.updateListener.of((viewUpdate) => {
-        if (viewUpdate.docChanged) {
-          this.value = this._editorView.state.doc.toString();
-          dispatchCustomEvent(this, 'input', this.value);
-        }
-      }),
-      autocompletion({
-        activateOnTyping: true,
-        override: [this._autocomplete.bind(this)],
-      }),
-      ...this.getExtensions(),
-    ];
-  }
-
-  getExtensions() {
-    return [];
-  }
-
-  getInputElement() {
-    return this.shadowRoot.querySelector(`[id=${this._id}]`);
-  }
-
-  firstUpdated() {
-    super.firstUpdated();
-    this._editorState = EditorState.create({
-      doc: this.value,
-      extensions: this._getExtensions(),
-    });
-    const parent = this.getInputElement();
-    this._editorView = new EditorView({
-      root: this.shadowRoot,
-      parent,
-      state: this._editorState,
-      dispatch: (transaction) => {
-        try {
-          this._editorView.update([transaction]);
-        } catch (e) {
-          // Sometimes the default dispatch fn throws an NS_ERROR_FAILURE at runtime.
-          // It's so strange but with this catch everything is okay
-        }
-      },
-    });
-    parent.appendChild(this._editorView.dom);
-  }
-
-  async updated(properties) {
-    super.updated(properties);
-    if (properties.has('placeholder')) {
-      this._reflectPlaceholder();
-    }
-    if (properties.has('value')) {
-      this._reflectValue();
-    }
-    if (properties.has('readonly') || properties.has('disabled')) {
-      this._reflectReadonlyDisabled();
-    }
-    if (properties.has('options') && this.options) {
-      await this._reflectOptions();
-    }
-  }
-
-  _reflectPlaceholder() {
-    this._editorView.dispatch({
-      effects: this.placeholderCompartment.reconfigure(placeholder(this.placeholder)),
-    });
-  }
-
-  _reflectValue() {
-    const transaction = this._editorState.update({
-      changes: {
-        from: 0,
-        to: this._editorState.doc.length,
-        insert: this.value,
-      },
-    });
-    this._editorState = transaction.state;
-  }
-
-  _reflectReadonlyDisabled() {
-    this._editorView.dispatch({
-      effects: this.readonlyCompartment.reconfigure(EditorView.editable.of(!this.readonly && !this.disabled)),
-    });
-  }
-
-  static async findLanguage(mode) {
-    if (mode) {
-      const modeOnly = mode.split('/').pop();
-      if (modeOnly === 'asciidoc') {
-        const [{ asciidoc }, { StreamLanguage }] = await Promise.all([
-          import('codemirror-asciidoc/lib/asciidoc'),
-          import('@codemirror/stream-parser'),
-        ]);
-        return {
-          name: 'asciidoc',
-          support: {
-            extension: StreamLanguage.define(asciidoc),
-          },
-        };
-      } else {
-        const language = languages.find((languageDescription) => {
-          return languageDescription.name.toUpperCase() === modeOnly.toUpperCase() || languageDescription.alias.includes(modeOnly);
-        });
-        if (language == null) {
-          console.warn(
-            `Cannot find language ${mode}, please use language supported by CodeMirror 6`,
-            languages.map((l) => l.name),
-          );
-        }
-        return language;
-      }
-    }
-    return null;
-  }
-
-  async _reflectOptions() {
-    const language = await GvCode.findLanguage(this.options.mode);
-    if (language != null) {
-      if (language.support == null) {
-        await language.load();
-      }
-      this._editorView.dispatch({
-        effects: this.languageCompartment.reconfigure(language.support.extension),
-      });
-    }
-  }
-
-  static get codemirrorTheme() {
-    return EditorView.theme({
-      '&.cm-editor.cm-focused': {
-        outline: 'none',
-      },
-      '.cm-gutters': {
-        backgroundColor: 'var(--gv-input-icon--bgc, var(--gv-theme-neutral-color, #f5f5f5))',
-        color: 'var(--gv-theme-font-color-dark, #262626)',
-        borderLeft: '5px solid',
-        borderColor: 'var(--gv-input--bdc, var(--gv-theme-neutral-color-dark, #d9d9d9))',
-      },
-    });
-  }
-
-  static get styles() {
-    return [
-      ...super.styles,
-      skeleton,
-      empty,
-      input,
-      // language=CSS
-      css`
-        :host {
-          box-sizing: border-box;
-          display: block;
-          margin: 0 0.2rem 0.2rem 0.2rem;
-        }
-
-        .content {
-          position: relative;
-          border: var(--gv-input--bdw, 1px) var(--gv-input--bds, solid) var(--gv-input--bdc, var(--gv-theme-neutral-color-dark, #d9d9d9));
-          box-sizing: border-box;
-          border-radius: 4px;
-        }
-
-        .btn_copy {
-        }
-
-        .box-icon {
-          bottom: -1px;
-          right: -1px;
-          z-index: 1;
-        }
-
-        .code .box-icon {
-          border-radius: 3px;
-        }
-
-        .code .cm-content,
-        .code .cm-gutters {
-          height: var(--input-medium--h);
-        }
-
-        .large .code .cm-content,
-        .large .code .cm-gutters {
-          height: var(--input-large--h);
-        }
-
-        .small .code .cm-content,
-        .small .code .cm-gutters {
-          height: var(--input-small--h);
-        }
-
-        /**  Override Codemirror theme */
-        .input .cm-gutters {
-          display: none;
-        }
-
-        .input .cm-scroller {
-          overflow: hidden;
-        }
-
-        .input .cm-activeLine,
-        :host([readonly]) .cm-activeLine {
-          background-color: transparent;
-        }
-
-        .input .cm-content {
-          padding: 0;
-        }
-
-        :host([invalid]) .cm-gutters {
-          border-color: var(--gv-theme-color-error, #da1a1b);
-        }
-      `,
-    ];
-  }
-}
-
-window.customElements.define('gv-code', GvCode);
+var e=Object.create?function(e,t,r,i){void 0===i&&(i=r),Object.defineProperty(e,i,{enumerable:!0,get:function(){return t[r]}})}:function(e,t,r,i){void 0===i&&(i=r),e[i]=t[r]},t=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t},r=function(r){if(r&&r.__esModule)return r;var i={};if(null!=r)for(var o in r)"default"!==o&&Object.prototype.hasOwnProperty.call(r,o)&&e(i,r,o);return t(i,r),i};Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvCode=void 0;const i=require("lit"),o=require("@codemirror/basic-setup"),s=require("@codemirror/state"),a=require("@codemirror/autocomplete"),n=require("@codemirror/lang-json"),d=require("@codemirror/language-data"),l=require("@codemirror/view"),c=require("../styles/shapes"),u=require("../lib/events"),p=require("../lib/utils"),h=require("lit/directives/class-map"),m=require("../atoms/gv-input"),g=require("../styles/skeleton"),v=require("../styles/empty"),f=require("../styles/input");class b extends m.GvInput{static get properties(){return{...super.properties,options:{type:Object},rows:{type:Number},_error:{type:String,attribute:!1}}}constructor(){super(),this._id=`gv-code-${(0,p.uuid)()}`,this.value="",this.readonly=!1,this.autofocus=!1,this.clipboard=!1,this._clipboardIcon=c.shapeClipboard,this.languageCompartment=new s.Compartment,this.readonlyCompartment=new s.Compartment,this.placeholderCompartment=new s.Compartment}render(){const e={box:!0,"box-invisible":this.skeleton,large:this.large,medium:this.medium||!this.large&&!this.small,small:this.small,copied:this.hasClipboard&&this._copied},t={content:!0,code:!this.hasInputStyle,input:this.hasInputStyle};return i.html`<div class="${(0,h.classMap)(e)}">${this.label?i.html`<label for="code">${this.label}</label>`:""}<div id="${this._id}" class="${(0,h.classMap)(t)}">${this.renderIcon()}</div></div>${null!=this.description?i.html`<div class="description" .innerHTML="${this.description}"></div>`:""}`}bindInputEvents(){(0,u.dispatchCustomEvent)(this,"ready",{currentTarget:this})}get hasInputStyle(){return 1===this.rows}_autocomplete(e){const{handler:t,match:r}=this.findBestAutocompleteHandler(e);return t.run.call(this,e,r)}findBestAutocompleteHandler(e){return{handler:this.defaultCompletionHandler,match:!0}}get defaultCompletionHandler(){return{run(e){const t=e.state.languageDataAt("autocomplete",e.pos);return t.length>0?t[0](e):{from:e.pos,options:[]}}}}_getExtensions(){return[o.basicSetup,b.codemirrorTheme,this.languageCompartment.of((0,n.json)()),this.placeholderCompartment.of((0,l.placeholder)(this.placeholder||"")),s.EditorState.transactionFilter.of((e=>this.hasInputStyle&&e.newDoc.lines>1?[]:e)),this.readonlyCompartment.of(o.EditorView.editable.of(!this.readonly&&!this.disabled)),o.EditorView.updateListener.of((e=>{e.docChanged&&(this.value=this._editorView.state.doc.toString(),(0,u.dispatchCustomEvent)(this,"input",this.value))})),(0,a.autocompletion)({activateOnTyping:!0,override:[this._autocomplete.bind(this)]}),...this.getExtensions()]}getExtensions(){return[]}getInputElement(){return this.shadowRoot.querySelector(`[id=${this._id}]`)}firstUpdated(){super.firstUpdated(),this._editorState=s.EditorState.create({doc:this.value,extensions:this._getExtensions()});const e=this.getInputElement();this._editorView=new o.EditorView({root:this.shadowRoot,parent:e,state:this._editorState,dispatch:e=>{try{this._editorView.update([e])}catch(e){}}}),e.appendChild(this._editorView.dom)}async updated(e){super.updated(e),e.has("placeholder")&&this._reflectPlaceholder(),e.has("value")&&this._reflectValue(),(e.has("readonly")||e.has("disabled"))&&this._reflectReadonlyDisabled(),e.has("options")&&this.options&&await this._reflectOptions()}_reflectPlaceholder(){this._editorView.dispatch({effects:this.placeholderCompartment.reconfigure((0,l.placeholder)(this.placeholder))})}_reflectValue(){const e=this._editorState.update({changes:{from:0,to:this._editorState.doc.length,insert:this.value}});this._editorState=e.state}_reflectReadonlyDisabled(){this._editorView.dispatch({effects:this.readonlyCompartment.reconfigure(o.EditorView.editable.of(!this.readonly&&!this.disabled))})}static async findLanguage(e){if(e){const t=e.split("/").pop();if("asciidoc"===t){const[{asciidoc:e},{StreamLanguage:t}]=await Promise.all([Promise.resolve().then((()=>r(require("codemirror-asciidoc/lib/asciidoc")))),Promise.resolve().then((()=>r(require("@codemirror/stream-parser"))))]);return{name:"asciidoc",support:{extension:t.define(e)}}}{const r=d.languages.find((e=>e.name.toUpperCase()===t.toUpperCase()||e.alias.includes(t)));return null==r&&console.warn(`Cannot find language ${e}, please use language supported by CodeMirror 6`,d.languages.map((e=>e.name))),r}}return null}async _reflectOptions(){const e=await b.findLanguage(this.options.mode);null!=e&&(null==e.support&&await e.load(),this._editorView.dispatch({effects:this.languageCompartment.reconfigure(e.support.extension)}))}static get codemirrorTheme(){return o.EditorView.theme({"&.cm-editor.cm-focused":{outline:"none"},".cm-gutters":{backgroundColor:"var(--gv-input-icon--bgc, var(--gv-theme-neutral-color, #f5f5f5))",color:"var(--gv-theme-font-color-dark, #262626)",borderLeft:"5px solid",borderColor:"var(--gv-input--bdc, var(--gv-theme-neutral-color-dark, #d9d9d9))"}})}static get styles(){return[...super.styles,g.skeleton,v.empty,f.input,i.css`:host{box-sizing:border-box;display:block;margin:0 .2rem .2rem .2rem}.content{position:relative;border:var(--gv-input--bdw,1px) var(--gv-input--bds,solid) var(--gv-input--bdc,var(--gv-theme-neutral-color-dark,#d9d9d9));box-sizing:border-box;border-radius:4px}.box-icon{bottom:-1px;right:-1px;z-index:1}.code .box-icon{border-radius:3px}.code .cm-content,.code .cm-gutters{height:var(--input-medium--h)}.large .code .cm-content,.large .code .cm-gutters{height:var(--input-large--h)}.small .code .cm-content,.small .code .cm-gutters{height:var(--input-small--h)}.input .cm-gutters{display:none}.input .cm-scroller{overflow:hidden}.input .cm-activeLine,:host([readonly]) .cm-activeLine{background-color:transparent}.input .cm-content{padding:0}:host([invalid]) .cm-gutters{border-color:var(--gv-theme-color-error,#da1a1b)}`]}}exports.GvCode=b,window.customElements.define("gv-code",b);