@gravitee/ui-components 3.24.3-migrate-codemirror-f56ff96 → 3.24.4-migrate-codemirror-0dec695

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [3.24.4](https://github.com/gravitee-io/gravitee-ui-components/compare/v3.24.3...v3.24.4) (2021-12-16)
+
+
+### Bug Fixes
+
+* remove unnecessary perform update ([1b8fee6](https://github.com/gravitee-io/gravitee-ui-components/commit/1b8fee6711bf1af63bf40ca9aca2fac570590076))
+
 ## [3.24.3](https://github.com/gravitee-io/gravitee-ui-components/compare/v3.24.2...v3.24.3) (2021-12-15)
 
 

package/assets/i18n/en.json

@@ -18,9 +18,6 @@
     "empty": "No data to display",
     "error": "An error has occurred"
   },
-  "gv-code": {
-    "copy": "Copy to clipboard"
-  },
   "gv-confirm": {
     "cancel": "No",
     "ok": "Yes"

package/assets/i18n/fr.json

@@ -18,9 +18,6 @@
     "empty": "Aucune donnée à afficher ici",
     "error": "Une erreur est survenue pendant le chargement"
   },
-  "gv-code": {
-    "copy": "Copier dans le presse papier"
-  },
   "gv-confirm": {
     "cancel": "Non",
     "ok": "Oui"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravitee/ui-components",
-  "version": "3.24.3-migrate-codemirror-f56ff96",
+  "version": "3.24.4-migrate-codemirror-0dec695",
   "description": "Gravitee.io UI Components library, based on Web Components",
   "repository": {
     "type": "git",
@@ -99,7 +99,6 @@
     "babel-plugin-template-html-minifier": "4.1.0",
     "bundle-phobia-cli": "0.14.13",
     "chromatic": "6.1.0",
-    "codemirror-asciidoc": "1.0.4",
     "danger": "10.7.1",
     "del": "6.0.0",
     "eslint": "8.4.0",
@@ -146,7 +145,6 @@
     "@highcharts/map-collection": "^1.0.0",
     "asciidoctor": "^2.2.4",
     "asciidoctor-highlight.js": "^0.3.0 || ^0.4.0",
-    "codemirror-asciidoc": "^1.0.4",
     "highcharts": "^8.0.0 || ^9.0.0",
     "highlight.js": "^10.7.0 || ^11.1.0"
   },
@@ -163,9 +161,6 @@
     "asciidoctor-highlight.js": {
       "optional": true
     },
-    "codemirror-asciidoc": {
-      "optional": true
-    },
     "highcharts": {
       "optional": true
     },

package/src/atoms/gv-button.js

@@ -322,14 +322,6 @@ export class GvButton extends LitElement {
     }
   }
 
-  async performUpdate() {
-    super.performUpdate();
-    const icon = this.shadowRoot.querySelector('gv-icon');
-    if (icon) {
-      icon.performUpdate();
-    }
-  }
-
   render() {
     const classes = {
       button: true,

package/src/atoms/gv-input.js

@@ -272,19 +272,7 @@ export class GvInput extends InputElement(LitElement) {
   firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
 
-    const defaultInputElement = this.getInputElement();
-    for (const node of this.childNodes) {
-      if (node.nodeType === 1) {
-        const child = node.nodeName.toLowerCase() === 'input' ? node : node.querySelector('input');
-        if (child) {
-          this._input = child;
-          break;
-        }
-      }
-    }
-    if (this._input) {
-      defaultInputElement.remove();
-    }
+    this.catchSlot();
 
     if (this.clipboard) {
       import('clipboard-copy').then(
@@ -304,13 +292,6 @@ export class GvInput extends InputElement(LitElement) {
 
       setTimeout(() => {
         const clipboardPopover = this.shadowRoot.querySelector('.clipboard__popover');
-        if (this.readonly) {
-          this.getInputElement().addEventListener('click', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            clipboardPopover.click();
-          });
-        }
         clipboardPopover.addEventListener('click', (e) => {
           e.preventDefault();
           e.stopPropagation();
@@ -325,11 +306,32 @@ export class GvInput extends InputElement(LitElement) {
     }
 
     this.getInputElement().id = this._id;
+
+    this.bindInputEvents();
+  }
+
+  bindInputEvents() {
     this.getInputElement().addEventListener('input', this._onInput.bind(this));
     this.getInputElement().addEventListener('keyup', this._onKeyUp.bind(this));
     this.getInputElement().addEventListener('keypress', this._onKeyPress.bind(this));
   }
 
+  catchSlot() {
+    const defaultInputElement = this.getInputElement();
+    for (const node of this.childNodes) {
+      if (node.nodeType === 1) {
+        const child = node.nodeName.toLowerCase() === 'input' ? node : node.querySelector('input');
+        if (child) {
+          this._input = child;
+          break;
+        }
+      }
+    }
+    if (this._input) {
+      defaultInputElement.remove();
+    }
+  }
+
   updateState(value) {
     super.updateState(value);
     if (this.valid === true && !this.readonly) {
@@ -481,7 +483,7 @@ export class GvInput extends InputElement(LitElement) {
     return !this.loading;
   }
 
-  _renderIcon() {
+  renderIcon() {
     let shape = null;
     if ((!this.isPassword && this.icon) || this.iconLeft) {
       shape = (!this.isPassword && this.icon) || this.iconLeft;
@@ -545,7 +547,7 @@ export class GvInput extends InputElement(LitElement) {
         ${this.renderLabel()}
         <input />
         <slot></slot>
-        ${this._renderClearIcon()} ${this._renderIcon()} ${this._renderPasswordIcon()}
+        ${this._renderClearIcon()} ${this.renderIcon()} ${this._renderPasswordIcon()}
       </div>
       ${this.description != null ? html`<div class="description" .innerHTML="${this.description}"></div>` : ''}
     `;

package/src/mixins/input-element.js

@@ -52,13 +52,16 @@ export function InputElement(ParentClass) {
           :host([invalid]) :not(.clipboard) ::slotted(.input),
           :host([invalid]) :not(.clipboard) .box-icon-left,
           :host([invalid]) :not(.clipboard) textarea,
-          :host([invalid]) :not(.clipboard) select {
+          :host([invalid]) :not(.clipboard) select,
+          :host([invalid]) :not(.clipboard) .input {
             box-shadow: inset 3px 0 0 var(--gv-input-invalid--bxshc, var(--gv-theme-color-error, #da1a1b));
           }
 
           :host([readonly]) :not(.clipboard) input,
           :host([readonly]) :not(.clipboard) ::slotted(.input),
-          :host([readonly]) .textarea :host([readonly]) :not(.clipboard) select {
+          :host([readonly]) .textarea,
+          :host([readonly]) :not(.clipboard) select,
+          :host([readonly]) .input {
             border-left: 1px solid var(--gv-input--bdc, var(--gv-theme-neutral-color-dark, #d9d9d9));
           }
 
@@ -86,7 +89,7 @@ export function InputElement(ParentClass) {
 
     setValidity(isInvalid = false, violation = '') {
       const element = this.getInputElement();
-      if (element) {
+      if (element && element.setCustomValidity) {
         if (isInvalid) {
           if (violation == null || violation.trim() === '') {
             violation = 'field is not valid';
@@ -95,6 +98,7 @@ export function InputElement(ParentClass) {
         } else {
           element.setCustomValidity('');
         }
+        element.reportValidity();
       }
       this.invalid = isInvalid;
       this.valid = !this.invalid;

package/src/molecules/gv-code.js

@@ -13,22 +13,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { css, LitElement, html } from 'lit';
-
-import { shapeClipboard, shapeCopied } from '../styles/shapes';
-import { dispatchCustomEvent } from '../lib/events';
-import { uuid } from '../lib/utils';
-import { classMap } from 'lit-html/directives/class-map';
+import { css, html } from 'lit';
 
 import { EditorView, basicSetup } from '@codemirror/basic-setup';
-import { EditorState, Compartment, Prec, EditorSelection } from '@codemirror/state';
-import { autocompletion, startCompletion, pickedCompletion } from '@codemirror/autocomplete';
+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, keymap } from '@codemirror/view';
-import { get } from 'object-path';
-import { InputElement } from '../mixins/input-element';
-import { i18n } from '../lib/i18n';
+import { placeholder } from '@codemirror/view';
+
+import { shapeClipboard } from '../styles/shapes';
+import { dispatchCustomEvent } from '../lib/events';
+import { uuid } from '../lib/utils';
+import { classMap } from 'lit-html/directives/class-map';
+import { GvInput } from '../atoms/gv-input';
 import { skeleton } from '../styles/skeleton';
 import { empty } from '../styles/empty';
 import { input } from '../styles/input';
@@ -37,8 +35,20 @@ const languageCompartment = new Compartment();
 const readonlyCompartment = new Compartment();
 const placeholderCompartment = new Compartment();
 
+const overrideTheme = 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))',
+  },
+});
+
 /**
- * Code editor component
+ * Code component
  *
  * ## Details
  * * has @theme facet
@@ -49,8 +59,7 @@ const placeholderCompartment = new Compartment();
  *
  * @attr {String} label - code language
  * @attr {String} value - code content to be highlighted
- * @attr {options} Object - options based on codemirror https://codemirror.net/doc/manual.html#config
- * @attr {Object} grammar - The grammar for Expression Language support
+ * @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)
@@ -61,17 +70,11 @@ const placeholderCompartment = new Compartment();
  * @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 InputElement(LitElement) {
+export class GvCode extends GvInput {
   static get properties() {
     return {
       ...super.properties,
       options: { type: Object },
-      large: { type: Boolean },
-      medium: { type: Boolean },
-      small: { type: Boolean },
-      clipboard: { type: Boolean },
-      _clipboardIcon: { type: String },
-      _codeMirror: { type: Object },
       rows: { type: Number },
       _error: { type: String, attribute: false },
     };
@@ -97,352 +100,165 @@ export class GvCode extends InputElement(LitElement) {
     };
     const inputClasses = {
       content: true,
-      input: this.singleLine,
+      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)}">
-          ${this.clipboard
-            ? html`<gv-button
-                title="${i18n('gv-code.copy')}"
-                ?outlined="${!this._copied}"
-                ?primary="${this._copied}"
-                small
-                icon="${this._clipboardIcon}"
-              ></gv-button>`
-            : ''}
-        </div>
+        <div id="${this._id}" class="${classMap(inputClasses)}">${this.renderIcon()}</div>
       </div>
       ${this.description != null ? html`<div class="description" .innerHTML="${this.description}"></div>` : ''}
     `;
   }
 
+  bindInputEvents() {
+    dispatchCustomEvent(this, 'ready', { currentTarget: this });
+  }
+
   _onChange() {
     dispatchCustomEvent(this, 'input', this.value);
   }
 
-  get singleLine() {
+  get hasInputStyle() {
     return this.rows === 1;
   }
 
-  _getModelType(typeId) {
-    if (this.grammar != null) {
-      return get(this.grammar, `_types.${typeId}`);
-    }
-    return null;
+  _autocomplete(completionContext) {
+    const { handler, match } = this.findBestAutocompleteHandler(completionContext);
+    return handler.run.call(this, completionContext, match);
   }
 
-  _isMap(typeId) {
-    return ['Map', 'HttpHeaders', 'MultiValueMap'].includes(typeId);
-  }
-
-  _getEnum(typeId) {
-    if (this.grammar != null) {
-      return get(this.grammar, `_enums.${typeId}`);
-    }
-    return [''];
-  }
-
-  _convertType(type) {
-    if (type) {
-      const lowerType = type.toLowerCase();
-      if (lowerType === 'string') {
-        // class, constant, enum, function, interface, keyword, method, namespace, property, text, type, and variable.
-        return 'text';
-      } else if (lowerType === 'httpheaders' || lowerType === 'multivaluemap') {
-        return 'type';
-      } else if (lowerType === 'int' || lowerType === 'long') {
-        return 'variable';
-      } else if (lowerType.includes('[]')) {
-        return 'enum';
-      }
-    }
-    return 'variable';
+  findBestAutocompleteHandler(completionContext) {
+    return { handler: this.defaultCompletionHandler, match: true };
   }
 
-  _autocomplete(ctx) {
-    const { handler, match } = this._findAutocompleteHandler(ctx);
-    return handler.run.call(this, ctx, match);
-  }
-
-  _buildMethods(type) {
-    const modelType = this._getModelType(type);
-    return modelType.methods.map(({ name, params = [], returnType }) => {
-      const command = `${name}()`;
-      const displayParams = params.map((p) => `${p.type} ${p.name}`);
-      const label = `${name}(${displayParams.join(', ')})`;
-      const detail = `return ${returnType}`;
-      return {
-        type: 'method',
-        command,
-        apply: (view, completion, from, to) => {
-          const anchor = from + name.length + 1;
-          view.dispatch({
-            changes: { from, to, insert: completion.command },
-            selection: { anchor },
-            userEvent: 'input.complete',
-            annotations: pickedCompletion.of(view),
-          });
-        },
-        label,
-        detail,
-      };
-    });
-  }
-
-  _findAutocompleteHandler(ctx) {
-    return this._completionHandlers
-      .filter((handler) => (this.grammar != null && handler.supportEL === true) || handler.supportEL !== true)
-      .map((handler) => {
-        const match = handler.expr ? ctx.matchBefore(handler.expr) : true;
-        return { handler, match };
-      })
-      .find(({ match, expr }) => match);
-  }
-
-  get _completionHandlers() {
-    return [
-      {
-        expr: /{#[a-z]*/,
-        supportEL: true,
-        run(ctx, match) {
-          const prefix = match.text.replaceAll('{#', '');
-          const from = ctx.pos - prefix.length;
-          const options = Object.keys(this.grammar)
-            .filter((command) => !command.startsWith('_') && command.startsWith(prefix))
-            .map((command) => {
-              return {
-                // class, constant, enum, function, interface, keyword, method, namespace, property, text, type, and variable.
-                type: 'variable',
-                command,
-                apply: command,
-                label: command,
-              };
-            });
-          return { from, options };
-        },
-      },
-      {
-        expr: /{#[a-z]*.[a-zA-Z]*/,
-        supportEL: true,
-        run(ctx, match) {
-          const tokens = match.text.split('.');
-          const key = tokens[0].replaceAll('{#', '');
-          const prefix = tokens[1];
-          const candidate = this.grammar[key][prefix];
-          let options = [];
-          let from = ctx.pos;
-          if (candidate) {
-            // const modelType = this._getModelType(candidate._type);
-            if (this._isMap(candidate._type)) {
-              options = this._getEnum(candidate._type).map((value) => {
-                const type = this._convertType(candidate._type);
-                const command = `['${value}'][0]`;
-                return {
-                  type,
-                  command,
-                  apply: command,
-                  label: value,
-                };
-              });
-            }
-          } else {
-            from -= prefix.length;
-            const candidate = this.grammar[key];
-            if (candidate._type) {
-              options = this._buildMethods(candidate._type);
-            } else {
-              options = Object.keys(candidate)
-                .filter((command) => !command.startsWith('_') && command.startsWith(prefix))
-                .map((command) => ({
-                  type: this._convertType(candidate[command]._type),
-                  command,
-                  apply: command,
-                  label: command,
-                }));
-            }
-          }
-          return { from, options };
-        },
-      },
-      {
-        expr: /{#[a-z]*.[a-zA-Z]*.[a-zA-Z]*/,
-        supportEL: true,
-        run(ctx, match) {
-          const tokens = match.text.split('.');
-          const key = tokens[0].replaceAll('{#', '');
-          const word = tokens[1];
-          const prefix = tokens[2];
-          const candidate = this.grammar[key][word];
-          let options = [];
-          let from = ctx.pos;
-          if (candidate) {
-            if (this._isMap(candidate._type)) {
-              options = this._getEnum(candidate._type)
-                .filter((command) => !command.startsWith('_') && command.startsWith(prefix))
-                .map((label) => {
-                  const type = this._convertType(candidate._type);
-                  return {
-                    type,
-                    command: `['${label}'][0]`,
-                    apply(view, completion, _from, to) {
-                      const from = _from - prefix.length - 1;
-                      view.dispatch({
-                        changes: { from, to, insert: completion.command },
-                        selection: { anchor: from + completion.command.length },
-                        userEvent: 'input.complete',
-                        annotations: pickedCompletion.of(view),
-                      });
-                    },
-                    label,
-                  };
-                });
-            } else {
-              if (candidate._type) {
-                options = this._buildMethods(candidate._type);
-              } else {
-                from -= prefix.length;
-                options = Object.keys(candidate)
-                  .filter((command) => command.startsWith(prefix))
-                  .map((command) => {
-                    return {
-                      type: this._convertType(candidate[command]._type),
-                      command,
-                      apply: command,
-                      label: command,
-                    };
-                  });
-              }
-            }
-          }
-          return { from, options };
-        },
-      },
-      {
-        run(ctx) {
-          const autocompleteLanguage = ctx.state.languageDataAt('autocomplete', ctx.pos);
-          if (autocompleteLanguage.length > 0) {
-            return autocompleteLanguage[0](ctx);
-          }
-          return { from: ctx.pos, options: [] };
-        },
+  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() {
+  _getExtensions() {
     return [
       basicSetup,
+      overrideTheme,
       languageCompartment.of(json()),
       placeholderCompartment.of(placeholder(this.placeholder || '')),
-      EditorState.transactionFilter.of((tr) => (this.singleLine && tr.newDoc.lines > 1 ? [] : tr)),
-      readonlyCompartment.of(EditorView.editable.of(!this.readonly)),
-      EditorView.updateListener.of((update) => {
-        if (update.view.contentDOM.innerText) {
-          this.value = update.view.contentDOM.innerText;
+      EditorState.transactionFilter.of((tr) => (this.hasInputStyle && tr.newDoc.lines > 1 ? [] : tr)),
+      readonlyCompartment.of(EditorView.editable.of(!this.readonly && !this.disabled)),
+      EditorView.updateListener.of((viewUpdate) => {
+        if (viewUpdate.docChanged) {
+          this.value = this._editorView.state.doc.toString();
         }
       }),
       autocompletion({
         activateOnTyping: true,
         override: [this._autocomplete.bind(this)],
       }),
-      Prec.high(this.insertELKeymap()),
+      ...this.getExtensions(),
     ];
   }
 
-  insertELKeymap() {
-    return keymap.of([
-      {
-        key: 'Ctrl-Shift-e',
-        mac: 'Cmd-Shift-e',
-        run(view) {
-          view.dispatch(
-            view.state.changeByRange((range) => ({
-              changes: [{ from: range.from, to: range.to, insert: '{#}' }],
-              range: EditorSelection.range(range.from + 2, range.to + 2),
-            })),
-          );
-          startCompletion(view);
-          return true;
-        },
-      },
-    ]);
+  getExtensions() {
+    return [];
+  }
+
+  getInputElement() {
+    return this.shadowRoot.querySelector(`[id=${this._id}]`);
   }
 
   firstUpdated() {
     super.firstUpdated();
-    const parent = this.shadowRoot.querySelector(`[id=${this._id}]`);
+
+    const parent = this.getInputElement();
+
     this._editorState = EditorState.create({
       doc: this.value,
-      extensions: this.getExtensions(),
+      extensions: this._getExtensions(),
     });
     this._editorView = new EditorView({
       root: this.shadowRoot,
       parent,
       state: this._editorState,
     });
-    parent.appendChild(this._editorView.dom);
 
-    if (this.clipboard) {
-      import('clipboard-copy').then((mod) => {
-        const copy = mod.default;
-        this.shadowRoot.querySelector('gv-button').addEventListener('gv-button:click', () => {
-          copy(this.value);
-          this._copied = true;
-          this._clipboardIcon = shapeCopied;
-          dispatchCustomEvent(this, 'clipboard-copy');
-          setTimeout(() => {
-            this._copied = false;
-            this._clipboardIcon = shapeClipboard;
-          }, 1000);
-        });
-      });
-    }
-    dispatchCustomEvent(this, 'ready');
+    parent.appendChild(this._editorView.dom);
   }
 
   async updated(properties) {
+    super.updated(properties);
     if (properties.has('placeholder')) {
-      this._editorView.dispatch({
-        effects: placeholderCompartment.reconfigure(placeholder(this.placeholder)),
-      });
+      this._reflectPlaceholder();
     }
     if (properties.has('value')) {
-      const transaction = this._editorState.update({ changes: { from: 0, to: this._editorState.doc.length, insert: this.value } });
-      this._editorState = transaction.state;
+      this._reflectValue();
     }
-    if (properties.has('readonly')) {
-      this._editorView.dispatch({
-        effects: readonlyCompartment.reconfigure(EditorView.editable.of(!this.readonly)),
-      });
+    if (properties.has('readonly') || properties.has('disabled')) {
+      this._reflectReadonlyDisabled();
     }
-
     if (properties.has('options') && this.options) {
-      if (this.options.mode) {
-        const language = languages.find((language) => {
-          return language.name.toUpperCase() === this.options.mode.toUpperCase() || language.alias.includes(this.options.mode);
-        });
-        if (language != null) {
-          if (language.support == null) {
-            await language.load();
-          }
-          this._editorView.dispatch({
-            effects: languageCompartment.reconfigure(language.support.extension),
-          });
-        } else {
-          console.warn(
-            `Cannot find language ${this.options.mode}, please use language supported by CodeMirror 6`,
-            languages.map((l) => l.name),
-          );
+      await this._reflectOptions();
+    }
+  }
+
+  _reflectPlaceholder() {
+    this._editorView.dispatch({
+      effects: 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: readonlyCompartment.reconfigure(EditorView.editable.of(!this.readonly && !this.disabled)),
+    });
+  }
+
+  async _reflectOptions() {
+    if (this.options.mode) {
+      const language = languages.find((languageDescription) => {
+        return (
+          languageDescription.name.toUpperCase() === this.options.mode.toUpperCase() ||
+          languageDescription.alias.includes(this.options.mode)
+        );
+      });
+      if (language != null) {
+        if (language.support == null) {
+          await language.load();
         }
+        this._editorView.dispatch({
+          effects: languageCompartment.reconfigure(language.support.extension),
+        });
+      } else {
+        console.warn(
+          `Cannot find language ${this.options.mode}, please use language supported by CodeMirror 6`,
+          languages.map((l) => l.name),
+        );
       }
     }
   }
 
   static get styles() {
     return [
+      ...super.styles,
       skeleton,
       empty,
       input,
@@ -458,6 +274,18 @@ export class GvCode extends InputElement(LitElement) {
           position: relative;
         }
 
+        .box-icon {
+          bottom: -1px;
+          right: -1px;
+          z-index: 1;
+        }
+
+        .code .box-icon {
+          border-radius: 0;
+          top: 0;
+        }
+
+        /**  Override Codemirror style */
         .input .cm-gutters {
           display: none;
         }
@@ -474,15 +302,8 @@ export class GvCode extends InputElement(LitElement) {
           padding: 0;
         }
 
-        .ͼ1.cm-editor.cm-focused {
-          outline: none;
-        }
-
-        gv-button {
-          position: absolute;
-          right: 0;
-          top: 0;
-          z-index: 10;
+        :host([invalid]) .cm-gutters {
+          border-color: var(--gv-theme-color-error, #da1a1b);
         }
       `,
     ];

package/src/molecules/gv-expression-language.js

@@ -15,15 +15,255 @@
  */
 import { GvCode } from '../molecules/gv-code';
 import { dispatchCustomEvent } from '../lib/events';
+import { pickedCompletion, startCompletion } from '@codemirror/autocomplete';
+import { keymap } from '@codemirror/view';
+import { EditorSelection, Prec } from '@codemirror/state';
+import { get } from 'object-path';
 
 /**
  * Expression Language component
  *
+ * @fires gv-expression-language:input - input events with the `value` on `detail`
+ * @fires gv-expression-language:ready - event dispatch when component is ready
+ * @fires gv-expression-language: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 {Object} grammar - The grammar for Expression Language support
+ *
+ * @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 GvExpressionLanguage extends GvCode {
+  static get properties() {
+    return {
+      ...super.properties,
+      grammar: { type: Object },
+    };
+  }
+
   firstUpdated() {
     super.firstUpdated();
-    dispatchCustomEvent(this, 'ready');
+    dispatchCustomEvent(this, 'ready', { currentTarget: this });
+  }
+
+  getExtensions() {
+    return [Prec.high(this.insertELKeymap())];
+  }
+
+  insertELKeymap() {
+    return keymap.of([
+      {
+        key: 'Ctrl-Shift-e',
+        mac: 'Cmd-Shift-e',
+        run(view) {
+          view.dispatch(
+            view.state.changeByRange((range) => ({
+              changes: [{ from: range.from, to: range.to, insert: '{#}' }],
+              range: EditorSelection.range(range.from + 2, range.to + 2),
+            })),
+          );
+          startCompletion(view);
+          return true;
+        },
+      },
+    ]);
+  }
+
+  buildMethods(type) {
+    const modelType = this.getModelType(type);
+    return modelType.methods.map(({ name, params = [], returnType }) => {
+      const command = `${name}()`;
+      const displayParams = params.map((p) => `${p.type} ${p.name}`);
+      const label = `${name}(${displayParams.join(', ')})`;
+      const detail = `return ${returnType}`;
+      return {
+        type: 'method',
+        command,
+        apply: (view, completion, from, to) => {
+          const anchor = from + name.length + 1;
+          view.dispatch({
+            changes: { from, to, insert: completion.command },
+            selection: { anchor },
+            userEvent: 'input.complete',
+            annotations: pickedCompletion.of(view),
+          });
+        },
+        label,
+        detail,
+      };
+    });
+  }
+
+  findBestAutocompleteHandler(completionContext) {
+    return this.expressionLanguageCompletionHandlers
+      .filter((handler) => (this.grammar != null && handler.supportEL === true) || handler.supportEL !== true)
+      .map((handler) => {
+        const match = handler.expr ? completionContext.matchBefore(handler.expr) : true;
+        return { handler, match };
+      })
+      .find(({ match, expr }) => match);
+  }
+
+  getModelType(typeId) {
+    if (this.grammar != null) {
+      return get(this.grammar, `_types.${typeId}`);
+    }
+    return null;
+  }
+
+  isMap(typeId) {
+    return ['Map', 'HttpHeaders', 'MultiValueMap'].includes(typeId);
+  }
+
+  getEnum(typeId) {
+    if (this.grammar != null) {
+      return get(this.grammar, `_enums.${typeId}`);
+    }
+    return [''];
+  }
+
+  convertType(type) {
+    if (type) {
+      const lowerType = type.toLowerCase();
+      if (lowerType === 'string') {
+        return 'text';
+      } else if (lowerType === 'httpheaders' || lowerType === 'multivaluemap') {
+        return 'type';
+      } else if (lowerType === 'int' || lowerType === 'long') {
+        return 'variable';
+      } else if (lowerType.includes('[]')) {
+        return 'enum';
+      }
+    }
+    return 'variable';
+  }
+
+  get expressionLanguageCompletionHandlers() {
+    return [
+      {
+        expr: /{#[a-z]*/,
+        supportEL: true,
+        run(completionContext, match) {
+          const prefix = match.text.replaceAll('{#', '');
+          const from = completionContext.pos - prefix.length;
+          const options = Object.keys(this.grammar)
+            .filter((command) => !command.startsWith('_') && command.startsWith(prefix))
+            .map((command) => {
+              return {
+                type: 'variable',
+                command,
+                apply: command,
+                label: command,
+              };
+            });
+          return { from, options };
+        },
+      },
+      {
+        expr: /{#[a-z]*.[a-zA-Z]*/,
+        supportEL: true,
+        run(completionContext, match) {
+          const tokens = match.text.split('.');
+          const key = tokens[0].replaceAll('{#', '');
+          const prefix = tokens[1];
+          let candidate = this.grammar[key][prefix];
+          let options = [];
+          let from = completionContext.pos;
+          if (candidate) {
+            if (this.isMap(candidate._type)) {
+              options = this.getEnum(candidate._type).map((value) => {
+                const type = this.convertType(candidate._type);
+                const command = `['${value}'][0]`;
+                return {
+                  type,
+                  command,
+                  apply: command,
+                  label: value,
+                };
+              });
+            }
+          } else {
+            from -= prefix.length;
+            candidate = this.grammar[key];
+            if (candidate._type) {
+              options = this.buildMethods(candidate._type);
+            } else {
+              options = Object.keys(candidate)
+                .filter((command) => !command.startsWith('_') && command.startsWith(prefix))
+                .map((command) => ({
+                  type: this.convertType(candidate[command]._type),
+                  command,
+                  apply: command,
+                  label: command,
+                }));
+            }
+          }
+          return { from, options };
+        },
+      },
+      {
+        expr: /{#[a-z]*.[a-zA-Z]*.[a-zA-Z]*/,
+        supportEL: true,
+        run(completionContext, match) {
+          const tokens = match.text.split('.');
+          const key = tokens[0].replaceAll('{#', '');
+          const word = tokens[1];
+          const prefix = tokens[2];
+          const candidate = this.grammar[key][word];
+          let options = [];
+          let from = completionContext.pos;
+          if (candidate) {
+            if (this.isMap(candidate._type)) {
+              options = this.getEnum(candidate._type)
+                .filter((command) => !command.startsWith('_') && command.startsWith(prefix))
+                .map((label) => {
+                  const type = this.convertType(candidate._type);
+                  return {
+                    type,
+                    command: `['${label}'][0]`,
+                    apply(view, completion, _from, to) {
+                      from = _from - prefix.length - 1;
+                      view.dispatch({
+                        changes: { from, to, insert: completion.command },
+                        selection: { anchor: from + completion.command.length },
+                        userEvent: 'input.complete',
+                        annotations: pickedCompletion.of(view),
+                      });
+                    },
+                    label,
+                  };
+                });
+            } else {
+              if (candidate._type) {
+                options = this.buildMethods(candidate._type);
+              } else {
+                from -= prefix.length;
+                options = Object.keys(candidate)
+                  .filter((command) => command.startsWith(prefix))
+                  .map((command) => {
+                    return {
+                      type: this.convertType(candidate[command]._type),
+                      command,
+                      apply: command,
+                      label: command,
+                    };
+                  });
+              }
+            }
+          }
+          return { from, options };
+        },
+      },
+      this.defaultCompletionHandler,
+    ];
   }
 }
 

package/src/policy-studio/gv-policy-studio.js

@@ -427,10 +427,6 @@ export class GvPolicyStudio extends KeyboardElement(LitElement) {
           search.focus();
         }
       }
-      if (this.isPressed(KEYS.Esc)) {
-        this._closeFlowStepForm();
-        this._onCloseDocumentation();
-      }
     }
   }
 
@@ -1114,7 +1110,7 @@ export class GvPolicyStudio extends KeyboardElement(LitElement) {
                   outlined
                   small
                   @gv-button:click="${this._onCloseFlowStepForm}"
-                  title="Close (esc)"
+                  title="Close"
                 ></gv-button>
                 <gv-button
                   slot="header-left"

package/src/styles/input.js

@@ -232,6 +232,7 @@ export const input = css`
   }
 
   :host([disabled]) input,
+  :host([disabled]) .input,
   :host([disabled]) ::slotted(input) {
     cursor: default;
     opacity: 0.5;