@gravitee/ui-components 3.24.1 → 3.24.2-migrate-codemirror-4150e72

package/src/molecules/gv-code-editor.js

@@ -0,0 +1,407 @@
+/*
+ * 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-element';
+
+import { shapeClipboard } from '../styles/shapes';
+import { dispatchCustomEvent } from '../lib/events';
+import { uuid } from '../lib/utils';
+import { classMap } from 'lit-html/directives/class-map';
+
+import { EditorView, basicSetup } from '@codemirror/basic-setup';
+import { EditorState, Compartment, Prec, EditorSelection } from '@codemirror/state';
+import { autocompletion, startCompletion, pickedCompletion } 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';
+
+const languageCompartment = new Compartment();
+const readonlyCompartment = new Compartment();
+const placeholderCompartment = new Compartment();
+
+/**
+ * Code editor 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 https://codemirror.net/doc/manual.html#config
+ * @attr {Object} grammar - The grammar for Expression Language support
+ * @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 GvCodeEditor extends LitElement {
+  static get properties() {
+    return {
+      value: { type: String },
+      readonly: { type: Boolean },
+      placeholder: { type: String },
+      options: { type: Object },
+      rows: { type: Number },
+      clipboard: { type: Boolean },
+      grammar: { type: Object },
+      _clipboardIcon: { type: String },
+      _codeMirror: { type: Object },
+      _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;
+  }
+
+  render() {
+    const classes = {
+      singleLine: this.singleLine,
+    };
+    return html` <div id="${this._id}" class="${classMap(classes)}"></div> `;
+  }
+
+  _onChange() {
+    dispatchCustomEvent(this, 'input', this.value);
+  }
+
+  get singleLine() {
+    return this.rows === 1;
+  }
+
+  _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') {
+        // 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';
+  }
+
+  _autocomplete(ctx) {
+    const { handler, match } = this._completionHandlers
+      .filter((handler) => (this.grammar != null && handler.supportEL === true) || handler.supportEL !== true)
+      .map((handler) => ({ handler, match: handler.expr ? ctx.matchBefore(handler.expr) : true }))
+      .find(({ match, expr }) => match);
+    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,
+      };
+    });
+  }
+
+  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]*/,
+        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]*/,
+        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: [] };
+        },
+      },
+    ];
+  }
+
+  getExtensions() {
+    return [
+      basicSetup,
+      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) => {
+        this.value = update.view.contentDOM.innerText;
+      }),
+      autocompletion({
+        activateOnTyping: true,
+        override: [this._autocomplete.bind(this)],
+      }),
+      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;
+        },
+      },
+    ]);
+  }
+
+  firstUpdated() {
+    super.firstUpdated();
+    const parent = this.shadowRoot.querySelector(`[id=${this._id}]`);
+    this._editorState = EditorState.create({
+      doc: this.value,
+      extensions: this.getExtensions(),
+    });
+    this._editorView = new EditorView({
+      root: this.shadowRoot,
+      parent,
+      state: this._editorState,
+    });
+    parent.appendChild(this._editorView.dom);
+  }
+
+  async updated(properties) {
+    if (properties.has('placeholder')) {
+      this._editorView.dispatch({
+        effects: placeholderCompartment.reconfigure(placeholder(this.placeholder)),
+      });
+    }
+    if (properties.has('value')) {
+      this._editorState.update({ changes: { from: 0, to: this._editorState.doc.length, insert: this.value } });
+    }
+    if (properties.has('readonly')) {
+      this._editorView.dispatch({
+        effects: readonlyCompartment.reconfigure(EditorView.editable.of(!this.readonly)),
+      });
+    }
+
+    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),
+          );
+        }
+      }
+    }
+  }
+
+  static get styles() {
+    return [
+      // language=CSS
+      css`
+        :host {
+          box-sizing: border-box;
+          display: block;
+          margin: 0 0.2rem 0.2rem 0.2rem;
+        }
+
+        .singleLine .cm-gutters {
+          display: none;
+        }
+
+        .singleLine .cm-scroller {
+          overflow: hidden;
+        }
+      `,
+    ];
+  }
+}
+
+window.customElements.define('gv-code-editor', GvCodeEditor);

package/src/molecules/gv-code-hint.js

@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 import { css, html, LitElement } from 'lit';
+
 /**
  * Code hint component
  */
-
 export class GvCodeHint extends LitElement {
   render() {
     return html`<slot></slot>`;
@@ -25,12 +25,10 @@ export class GvCodeHint extends LitElement {
 
   updated(_changedProperties) {
     super.updated(_changedProperties);
-
     if (this.firstElementChild != null) {
       const elementNodeListOf = this.firstElementChild.querySelectorAll('.CodeMirror-hint');
-      elementNodeListOf.forEach(e => {
+      elementNodeListOf.forEach((e) => {
         e.style = 'padding: 4px;border-radius: 2px;white-space: pre;cursor: pointer;';
-
         if (e.classList.contains('CodeMirror-hint-active')) {
           e.style.backgroundColor = 'var(--gv-theme-color, #5a7684)';
           e.style.color = 'white';
@@ -40,10 +38,29 @@ export class GvCodeHint extends LitElement {
   }
 
   static get styles() {
-    return [// language=CSS
-    css`::slotted(.CodeMirror-hints){position:absolute;z-index:80;overflow:hidden;list-style:none;margin:0;padding:2px;-webkit-box-shadow:2px 3px 5px rgba(0,0,0,.2);-moz-box-shadow:2px 3px 5px rgba(0,0,0,.2);box-shadow:2px 3px 5px rgba(0,0,0,.2);border-radius:3px;border:1px solid silver;background:#fff;font-family:monospace;max-height:20em;overflow-y:auto}`];
+    return [
+      // language=CSS
+      css`
+        ::slotted(.CodeMirror-hints) {
+          position: absolute;
+          z-index: 80;
+          overflow: hidden;
+          list-style: none;
+          margin: 0;
+          padding: 2px;
+          -webkit-box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
+          -moz-box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
+          box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
+          border-radius: 3px;
+          border: 1px solid silver;
+          background: white;
+          font-family: monospace;
+          max-height: 20em;
+          overflow-y: auto;
+        }
+      `,
+    ];
   }
-
 }
+
 window.customElements.define('gv-code-hint', GvCodeHint);
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4vbm9kZV9tb2R1bGVzL0BncmF2aXRlZS91aS1jb21wb25lbnRzL21vbGVjdWxlcy9ndi1jb2RlLWhpbnQuanMiXSwibmFtZXMiOlsiY3NzIiwiaHRtbCIsIkxpdEVsZW1lbnQiLCJHdkNvZGVIaW50IiwicmVuZGVyIiwidXBkYXRlZCIsIl9jaGFuZ2VkUHJvcGVydGllcyIsImZpcnN0RWxlbWVudENoaWxkIiwiZWxlbWVudE5vZGVMaXN0T2YiLCJxdWVyeVNlbGVjdG9yQWxsIiwiZm9yRWFjaCIsImUiLCJzdHlsZSIsImNsYXNzTGlzdCIsImNvbnRhaW5zIiwiYmFja2dyb3VuZENvbG9yIiwiY29sb3IiLCJzdHlsZXMiLCJ3aW5kb3ciLCJjdXN0b21FbGVtZW50cyIsImRlZmluZSJdLCJtYXBwaW5ncyI6IkFBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0EsU0FBU0EsR0FBVCxFQUFjQyxJQUFkLEVBQW9CQyxVQUFwQixRQUFzQyxLQUF0QztBQUVBO0FBQ0E7QUFDQTs7QUFDQSxPQUFPLE1BQU1DLFVBQU4sU0FBeUJELFVBQXpCLENBQW9DO0FBQ3pDRSxFQUFBQSxNQUFNLEdBQUc7QUFDUCxXQUFPSCxJQUFJLGVBQVg7QUFDRDs7QUFFREksRUFBQUEsT0FBTyxDQUFDQyxrQkFBRCxFQUFxQjtBQUMxQixVQUFNRCxPQUFOLENBQWNDLGtCQUFkOztBQUNBLFFBQUksS0FBS0MsaUJBQUwsSUFBMEIsSUFBOUIsRUFBb0M7QUFDbEMsWUFBTUMsaUJBQWlCLEdBQUcsS0FBS0QsaUJBQUwsQ0FBdUJFLGdCQUF2QixDQUF3QyxrQkFBeEMsQ0FBMUI7QUFDQUQsTUFBQUEsaUJBQWlCLENBQUNFLE9BQWxCLENBQTJCQyxDQUFELElBQU87QUFDL0JBLFFBQUFBLENBQUMsQ0FBQ0MsS0FBRixHQUFVLG1FQUFWOztBQUNBLFlBQUlELENBQUMsQ0FBQ0UsU0FBRixDQUFZQyxRQUFaLENBQXFCLHdCQUFyQixDQUFKLEVBQW9EO0FBQ2xESCxVQUFBQSxDQUFDLENBQUNDLEtBQUYsQ0FBUUcsZUFBUixHQUEwQixnQ0FBMUI7QUFDQUosVUFBQUEsQ0FBQyxDQUFDQyxLQUFGLENBQVFJLEtBQVIsR0FBZ0IsT0FBaEI7QUFDRDtBQUNGLE9BTkQ7QUFPRDtBQUNGOztBQUVnQixhQUFOQyxNQUFNLEdBQUc7QUFDbEIsV0FBTyxDQUNMO0FBQ0FqQixJQUFBQSxHQUFHLGdXQUZFLENBQVA7QUFzQkQ7O0FBMUN3QztBQTZDM0NrQixNQUFNLENBQUNDLGNBQVAsQ0FBc0JDLE1BQXRCLENBQTZCLGNBQTdCLEVBQTZDakIsVUFBN0MiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogQ29weXJpZ2h0IChDKSAyMDE1IFRoZSBHcmF2aXRlZSB0ZWFtIChodHRwOi8vZ3Jhdml0ZWUuaW8pXG4gKlxuICogTGljZW5zZWQgdW5kZXIgdGhlIEFwYWNoZSBMaWNlbnNlLCBWZXJzaW9uIDIuMCAodGhlIFwiTGljZW5zZVwiKTtcbiAqIHlvdSBtYXkgbm90IHVzZSB0aGlzIGZpbGUgZXhjZXB0IGluIGNvbXBsaWFuY2Ugd2l0aCB0aGUgTGljZW5zZS5cbiAqIFlvdSBtYXkgb2J0YWluIGEgY29weSBvZiB0aGUgTGljZW5zZSBhdFxuICpcbiAqICAgICAgICAgaHR0cDovL3d3dy5hcGFjaGUub3JnL2xpY2Vuc2VzL0xJQ0VOU0UtMi4wXG4gKlxuICogVW5sZXNzIHJlcXVpcmVkIGJ5IGFwcGxpY2FibGUgbGF3IG9yIGFncmVlZCB0byBpbiB3cml0aW5nLCBzb2Z0d2FyZVxuICogZGlzdHJpYnV0ZWQgdW5kZXIgdGhlIExpY2Vuc2UgaXMgZGlzdHJpYnV0ZWQgb24gYW4gXCJBUyBJU1wiIEJBU0lTLFxuICogV0lUSE9VVCBXQVJSQU5USUVTIE9SIENPTkRJVElPTlMgT0YgQU5ZIEtJTkQsIGVpdGhlciBleHByZXNzIG9yIGltcGxpZWQuXG4gKiBTZWUgdGhlIExpY2Vuc2UgZm9yIHRoZSBzcGVjaWZpYyBsYW5ndWFnZSBnb3Zlcm5pbmcgcGVybWlzc2lvbnMgYW5kXG4gKiBsaW1pdGF0aW9ucyB1bmRlciB0aGUgTGljZW5zZS5cbiAqL1xuaW1wb3J0IHsgY3NzLCBodG1sLCBMaXRFbGVtZW50IH0gZnJvbSAnbGl0JztcblxuLyoqXG4gKiBDb2RlIGhpbnQgY29tcG9uZW50XG4gKi9cbmV4cG9ydCBjbGFzcyBHdkNvZGVIaW50IGV4dGVuZHMgTGl0RWxlbWVudCB7XG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gaHRtbGA8c2xvdD48L3Nsb3Q+YDtcbiAgfVxuXG4gIHVwZGF0ZWQoX2NoYW5nZWRQcm9wZXJ0aWVzKSB7XG4gICAgc3VwZXIudXBkYXRlZChfY2hhbmdlZFByb3BlcnRpZXMpO1xuICAgIGlmICh0aGlzLmZpcnN0RWxlbWVudENoaWxkICE9IG51bGwpIHtcbiAgICAgIGNvbnN0IGVsZW1lbnROb2RlTGlzdE9mID0gdGhpcy5maXJzdEVsZW1lbnRDaGlsZC5xdWVyeVNlbGVjdG9yQWxsKCcuQ29kZU1pcnJvci1oaW50Jyk7XG4gICAgICBlbGVtZW50Tm9kZUxpc3RPZi5mb3JFYWNoKChlKSA9PiB7XG4gICAgICAgIGUuc3R5bGUgPSAncGFkZGluZzogNHB4O2JvcmRlci1yYWRpdXM6IDJweDt3aGl0ZS1zcGFjZTogcHJlO2N1cnNvcjogcG9pbnRlcjsnO1xuICAgICAgICBpZiAoZS5jbGFzc0xpc3QuY29udGFpbnMoJ0NvZGVNaXJyb3ItaGludC1hY3RpdmUnKSkge1xuICAgICAgICAgIGUuc3R5bGUuYmFja2dyb3VuZENvbG9yID0gJ3ZhcigtLWd2LXRoZW1lLWNvbG9yLCAjNWE3Njg0KSc7XG4gICAgICAgICAgZS5zdHlsZS5jb2xvciA9ICd3aGl0ZSc7XG4gICAgICAgIH1cbiAgICAgIH0pO1xuICAgIH1cbiAgfVxuXG4gIHN0YXRpYyBnZXQgc3R5bGVzKCkge1xuICAgIHJldHVybiBbXG4gICAgICAvLyBsYW5ndWFnZT1DU1NcbiAgICAgIGNzc2BcbiAgICAgICAgOjpzbG90dGVkKC5Db2RlTWlycm9yLWhpbnRzKSB7XG4gICAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICAgIHotaW5kZXg6IDgwO1xuICAgICAgICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgICAgICAgbGlzdC1zdHlsZTogbm9uZTtcbiAgICAgICAgICBtYXJnaW46IDA7XG4gICAgICAgICAgcGFkZGluZzogMnB4O1xuICAgICAgICAgIC13ZWJraXQtYm94LXNoYWRvdzogMnB4IDNweCA1cHggcmdiYSgwLCAwLCAwLCAwLjIpO1xuICAgICAgICAgIC1tb3otYm94LXNoYWRvdzogMnB4IDNweCA1cHggcmdiYSgwLCAwLCAwLCAwLjIpO1xuICAgICAgICAgIGJveC1zaGFkb3c6IDJweCAzcHggNXB4IHJnYmEoMCwgMCwgMCwgMC4yKTtcbiAgICAgICAgICBib3JkZXItcmFkaXVzOiAzcHg7XG4gICAgICAgICAgYm9yZGVyOiAxcHggc29saWQgc2lsdmVyO1xuICAgICAgICAgIGJhY2tncm91bmQ6IHdoaXRlO1xuICAgICAgICAgIGZvbnQtZmFtaWx5OiBtb25vc3BhY2U7XG4gICAgICAgICAgbWF4LWhlaWdodDogMjBlbTtcbiAgICAgICAgICBvdmVyZmxvdy15OiBhdXRvO1xuICAgICAgICB9XG4gICAgICBgLFxuICAgIF07XG4gIH1cbn1cblxud2luZG93LmN1c3RvbUVsZW1lbnRzLmRlZmluZSgnZ3YtY29kZS1oaW50JywgR3ZDb2RlSGludCk7XG4iXX0=