@aquera/nile-elements 0.1.1 → 0.1.3

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -117,6 +117,7 @@
     "@codemirror/lang-javascript": "6.2.1",
     "@codemirror/lang-sql": "6.7.0",
     "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-html":"6.4.9",
     "codemirror": "6.0.1",
     "chalk": "5.3.0",
     "figlet": "1.7.0",

package/plop-templates/lit/lit.ts.hbs

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit';
-import { customElement } from 'lit/decorators.js';
+import {LitElement, html, CSSResultArray, TemplateResult} from 'lit';
+import { customElement, property} from 'lit/decorators.js';
 import {styles} from './nile-{{name}}.css';
 import NileElement from '../internal/nile-element';
 

package/src/nile-code-editor/extensionSetup.ts

@@ -30,6 +30,14 @@ import {
 
 import { lintKeymap } from '@codemirror/lint';
 
+export interface MinimalSetupOptions {
+  highlightSpecialChars?: boolean;
+  history?: boolean;
+  drawSelection?: boolean;
+  syntaxHighlighting?: boolean;
+  defaultKeymap?: boolean;
+  historyKeymap?: boolean;
+}
 export interface BasicSetupOptions extends MinimalSetupOptions {
   lineNumbers?: boolean;
   highlightActiveLineGutter?: boolean;
@@ -91,27 +99,4 @@ export const basicSetup = (options: BasicSetupOptions = {}): Extension[] => {
   return extensions.concat([keymap.of(keymaps.flat())]).filter(Boolean);
 };
 
-export interface MinimalSetupOptions {
-  highlightSpecialChars?: boolean;
-  history?: boolean;
-  drawSelection?: boolean;
-  syntaxHighlighting?: boolean;
-  defaultKeymap?: boolean;
-  historyKeymap?: boolean;
-}
 
-export const minimalSetup = (options: MinimalSetupOptions = {}) => {
-  let keymaps: KeyBinding[] = [];
-  isValidSetup(options.defaultKeymap) && keymaps.push(...defaultKeymap);
-  isValidSetup(options.historyKeymap) && keymaps.push(...historyKeymap);
-  const extensions: Extension[] = [];
-  isValidSetup(options.highlightSpecialChars) &&
-    extensions.push(highlightSpecialChars());
-  isValidSetup(options.history) && extensions.push(history());
-  isValidSetup(options.drawSelection) && extensions.push(drawSelection());
-  isValidSetup(options.syntaxHighlighting) &&
-    extensions.push(
-      syntaxHighlighting(defaultHighlightStyle, { fallback: true })
-    );
-  return extensions.concat([keymap.of(keymaps.flat())]).filter(Boolean);
-};

package/src/nile-code-editor/nile-code-editor.ts

@@ -6,7 +6,6 @@
  */
 
 import {
-  LitElement,
   html,
   CSSResultArray,
   TemplateResult,
@@ -20,23 +19,23 @@ import { ViewUpdate, placeholder } from '@codemirror/view';
 import { 
   Compartment,
   EditorState,
+  Extension
 } from '@codemirror/state';
 
 import { lineNumbers } from '@codemirror/view';
 import {
   javascript,
   javascriptLanguage,
-  scopeCompletionSource,
 } from '@codemirror/lang-javascript';
 import { sql } from '@codemirror/lang-sql';
 import { json } from '@codemirror/lang-json';
+import { html as htmlLang } from '@codemirror/lang-html';
 import { autocompletion,CompletionContext,CompletionResult } from '@codemirror/autocomplete';
 import NileElement from '../internal/nile-element';
 import { basicSetup } from './extensionSetup';
 import { classMap } from 'lit/directives/class-map.js';
 import { Theme } from './theme';
 
-const TIME_OUT_DURATION=200;
 // Choose the appropriate mode for your use case
 
 /**
@@ -58,7 +57,9 @@ export class NileCodeEditor extends NileElement {
 
   @property({ type: Object, reflect: true , attribute: true }) customAutoCompletions: object | any = {};
 
-  @property({ type: String, reflect: true , attribute: true}) language: 'javascript' | 'sql' | 'json' = 'javascript';
+  @property({ type: Array, reflect: true , attribute: true }) customCompletionsPaths: string[] = [];
+
+  @property({ type: String, reflect: true , attribute: true}) language: 'javascript' | 'sql' | 'json' | 'html' = 'javascript';
 
   @property({ type: String, reflect: true , attribute: 'error-message' }) errorMessage: string = '';
 
@@ -82,6 +83,8 @@ export class NileCodeEditor extends NileElement {
 
   @property({ type: Boolean, reflect: true , attribute: true}) debounce: boolean = false;
 
+  @property({ type: Number, reflect: true , attribute: true}) debounceTimeout: number = 200;
+
   public view: EditorView;
   public viewState:EditorState;
   private timeOut: any = null;
@@ -157,7 +160,7 @@ export class NileCodeEditor extends NileElement {
         ]
       })
     }
-    if(changedProperties.has('customAutoCompletions') || changedProperties.has('suggestionBracketSupport') ){
+    if(changedProperties.has('customAutoCompletions') || changedProperties.has('customCompletionsPaths')){
       this.view.dispatch({ 
         effects: [
           this.customCompletionComp.reconfigure(javascriptLanguage.data.of({
@@ -225,7 +228,7 @@ export class NileCodeEditor extends NileElement {
     }));
 
     this.viewState = EditorState.create({
-      doc: !this.multiline ? this.convertToSingleLine(this.value) : this.value,
+      doc: !this.multiline ? convertToSingleLine(this.value) : this.value,
       extensions: [
         basicSetup({
           highlightActiveLine: false,
@@ -252,28 +255,112 @@ export class NileCodeEditor extends NileElement {
     });
     return this.viewState
   }
+  /**
+   * Custom autocomplete handler for code editor suggestions
+   * @param context CompletionContext from CodeMirror
+   * @returns CompletionResult with suggestions or null if no suggestions
+   */
+  customAutocomplete = (context: CompletionContext): CompletionResult | null => {
+    // Getting the valid last line, last text from the code editor
+    const text = context.state.doc.sliceString(0, context.pos);
+    const lastWord = text.split('\n').at(-1)?.split(' ').at(-1) || '';
+    const [textBeforeCursor, baseTextAfterSeperation] = splitStringAtLastSeparator(lastWord);
+    
+    return this.getNestedSuggestions(context, textBeforeCursor, baseTextAfterSeperation) 
+    || this.getTopLevelSuggestions(context, textBeforeCursor);
+  };
 
-  singleLineMultiLineToggle() {
-    this.view.dispatch({
-      changes: {
-        from: 0,
-        to: this.view.state.doc.length,
-        insert: !this.multiline
-          ? this.convertToSingleLine(this.value)
-          : this.value,
-      },
-    });
+  /**
+   * Gets nested property suggestions based on the current path
+   * @param context CompletionContext from CodeMirror
+   * @param textBeforeCursor Text before cursor position
+   * @param baseTextAfterSeperation Text after the last separator (. or [)
+   * @returns CompletionResult with nested suggestions or null
+   */
+  getNestedSuggestions(context: CompletionContext, textBeforeCursor: string, baseTextAfterSeperation: string) {
+    // Return early if not a valid path or not ending with . or [
+    if (!isValidPath(textBeforeCursor) || !['.', '['].includes(textBeforeCursor.at(-1)!)) {
+      return null;
+    }
+
+    const path = parsePath(textBeforeCursor);
+    if (!path) return null;
+
+    const textAfterSeperation = baseTextAfterSeperation.replace(/["'\[]/g, '');
+    const isInString = textAfterSeperation !== baseTextAfterSeperation;
+    const isBracket = textBeforeCursor.at(-1) === '[';
+
+    // Return null if we're in a string after a dot
+    if (textBeforeCursor.at(-1) === '.' && isInString) return null;
+
+    // Get nested properties and filter by text after separation if it exists
+    let resolved = resolveNestedProperties(this.customAutoCompletions, path);
+    if (!resolved || typeof resolved !== 'object') return null;
+
+    if (textAfterSeperation) {
+      resolved = Object.fromEntries(
+        Object.entries(resolved).filter(([key]) => 
+          key.toLowerCase().startsWith(textAfterSeperation.toLowerCase())
+        )
+      );
+    }
+
+    return {
+      from: context.pos - textAfterSeperation.length,
+      options: Object.keys(resolved).map(key => ({
+        label: key,
+        type: 'property',
+        info: `Key of ${path[path.length - 1]}`,
+        apply: !this.allowVariableInCustomSuggestion && (isBracket && !isInString) 
+          ? `'${key}'` 
+          : key,
+        boost: 999
+      }))
+    };
   }
 
-  convertToSingleLine(code: any) {
-    if (!code) return '';
-    // Remove line breaks and unnecessary whitespace
-    return code.replace(/\s+/g, ' ').trim();
+  /**
+   * Gets top level suggestions based on custom completions and paths
+   * @param context CompletionContext from CodeMirror
+   * @param textBeforeCursor Text before cursor position
+   * @returns CompletionResult with top level suggestions or null
+   */
+  getTopLevelSuggestions(context: CompletionContext,textBeforeCursor:string){
+    const baseMatch: any = textBeforeCursor.match(/([a-zA-Z_$][\w$]*)$/);
+    if (!baseMatch) return null;
+  
+    const optionsList = Object.keys(this.customAutoCompletions).filter(key => 
+      Object.keys(this.customAutoCompletions[key]).length && 
+      key.toLowerCase().startsWith(textBeforeCursor.toLowerCase())
+    );
+    
+    const options=optionsList.map((key) => ({
+      label: key,
+      type: 'property',
+      apply: key,
+      boost: 999
+    }))
+    if(this.customCompletionsPaths.length){
+      this.customCompletionsPaths
+      .filter(path=>path.toLocaleLowerCase().includes(textBeforeCursor.toLocaleLowerCase()))
+      .map(path=>{
+        options.push({
+          label: ''+path,
+          type: 'property',
+          apply: ''+path,
+          boost: 998
+        })
+      })
+    }
+    return {
+      from: context.pos - baseMatch[1].length,
+      options: options
+    }
   }
 
   emitAfterTimeout(value:any){
     if(this.timeOut) clearTimeout(this.timeOut);
-    this.timeOut=setTimeout(()=> this.emit('nile-change', value, false), TIME_OUT_DURATION)
+    this.timeOut=setTimeout(()=> this.emit('nile-change', value, false), this.debounceTimeout)
   }
 
   public insertBetweenCode=(text: string) => {
@@ -283,18 +370,32 @@ export class NileCodeEditor extends NileElement {
     });
     this.view.dispatch(transaction);
   }
-  
+
+  singleLineMultiLineToggle() {
+    this.view.dispatch({
+      changes: {
+        from: 0,
+        to: this.view.state.doc.length,
+        insert: !this.multiline
+          ? convertToSingleLine(this.value)
+          : this.value,
+      },
+    });
+  }
+
   //EXTENSION CONFIGURATIONS
   getLineNumbersExension() {
     return  (!this.multiline && this.lineNumbers) || (this.multiline && this.lineNumbersMultiline) ? lineNumbers() : [];
   }
   
-  getLanguageExtension(){
+  getLanguageExtension():Extension{
     switch(this.language){
       case 'sql':
         return sql();
       case 'json':
         return json();
+      case 'html':
+        return htmlLang();
       default:
         return javascript();   
     }
@@ -319,115 +420,99 @@ export class NileCodeEditor extends NileElement {
       tr.newDoc.lines > 1 ? [] : tr
     );
   }
+  /* #endregion */
+}
 
-  customAutocomplete = (context: CompletionContext): CompletionResult | null => {
-    // Getting the valid last line, last text from the code editor
-    let text = context.state.doc.sliceString(0, context.pos);
-    const [textBeforeCursor, baseTextAfterSeperation] = this.splitStringAtLastSeparator(text.split('\n').at(-1)?.split(' ').at(-1) + '')
-    const textAfterSeperation = baseTextAfterSeperation.replace(/["'\[]/g, '')
-
-    const isInString = textAfterSeperation != baseTextAfterSeperation;
-    const isBracket = textBeforeCursor.at(-1) == '[';
-    const isDot = textBeforeCursor.at(-1) == '.';
-
-    if (!this.isValidPath(textBeforeCursor)) return { from: context.pos, options: [] };
-    if (['.', '['].includes(textBeforeCursor[textBeforeCursor.length - 1])) {
-      // Parse the path for dot or bracket notation
-      const path = this.parsePath(textBeforeCursor);
-      if (path) {
-        if (isDot && isInString) return null;
-        let resolved = this.resolveNestedProperties(this.customAutoCompletions, path);
-        if (textAfterSeperation) {
-          const obj: any = {}
-          Object.keys(resolved).forEach((key) => {
-            if (key.toLowerCase().startsWith(textAfterSeperation.toLowerCase())) {
-              obj[key] = resolved[key]
-            }
-          })
-          resolved = obj
-        }
-        // If resolved is an object, provide its keys as suggestions
-        if (resolved && typeof resolved === 'object') {
-          return {
-            from: context.pos - textAfterSeperation.length,
-            options: Object.keys(resolved).map((key) => ({
-              label: key,
-              type: 'property',
-              info: `Key of ${path[path.length - 1]}`,
-              apply: !this.allowVariableInCustomSuggestion && (isBracket && !isInString) ? "\'" + key + "\'" : key,
-              boost: 999
-            })),
-          };
-        }
-      }
-    }
-
-    // Match for top-level object suggestions, e.g., "a"
-    const baseMatch: any = textBeforeCursor.match(/([a-zA-Z_$][\w$]*)$/);
-    if (baseMatch) {
-      const optionsList=Object.keys(this.customAutoCompletions).filter(key=>key.toLowerCase().startsWith(textBeforeCursor.toLowerCase()));
-      return {
-        from: context.pos - baseMatch[1].length,
-        options: optionsList.map((key) => ({
-          label: key,
-          type: 'property',
-          apply: key,
-          boost: 999
-        }))
-      }
-    }
-    // Default to an empty list if no match
-    return null;
-  };
+export default NileCodeEditor;
 
-  resolveNestedProperties = (obj:any, keys:any[]) => {
-    return keys.reduce((acc, key) => {
-      if (acc && typeof acc === 'object') {
-        return acc[key];
-      }
-      return null;
-    }, obj);
-  };
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-code-editor': NileCodeEditor;
+  }
+}
 
-  parsePath(text: string) {
-    const regex = /([a-zA-Z_$][\w$]*)(\[(?:[^\]]+)\]|\.[a-zA-Z_$][\w$]*)*/g;
-    const matches = [...text.matchAll(regex)];
-    if (matches.length > 0) {
-      const base = matches[0][1]; // The base object name
-      const keys = [base];
-      // Extract keys from dot or bracket notation
-      const pathMatches = text.match(/\[(.*?)\]|\.(\w+)/g) || [];
-      for (const match of pathMatches) {
-        if (match.startsWith('[')) {
-          keys.push(match.slice(1, -1).replace(/['"]/g, '')); // Remove brackets and quotes
-        } else if (match.startsWith('.')) {
-          keys.push(match.slice(1));
-        }
+/**
+ * Parses a string path into an array of keys representing nested object access
+ * @param text The path string to parse (e.g. "foo.bar[0].baz")
+ * @returns Array of keys if valid path, null otherwise
+ * @example
+ * parsePath("foo.bar[0]") // returns ["foo", "bar", "0"]
+ * parsePath("invalid") // returns null
+ */
+function parsePath(text: string) {
+  const regex = /([a-zA-Z_$][\w$]*)(\[(?:[^\]]+)\]|\.[a-zA-Z_$][\w$]*)*/g;
+  const matches = [...text.matchAll(regex)];
+  if (matches.length > 0) {
+    const base = matches[0][1]; // The base object name
+    const keys = [base];
+    // Extract keys from dot or bracket notation
+    const pathMatches = text.match(/\[(.*?)\]|\.(\w+)/g) || [];
+    for (const match of pathMatches) {
+      if (match.startsWith('[')) {
+        keys.push(match.slice(1, -1).replace(/['"]/g, '')); // Remove brackets and quotes
+      } else if (match.startsWith('.')) {
+        keys.push(match.slice(1));
       }
-      return keys;
     }
-    return null;
-  };
-
-  isValidPath(path: string) {
-    // Regex to validate the format of the string
-    const regex = /^([a-zA-Z_$][\w$]*)(\.[a-zA-Z_$][\w$]*|\[\s*(['"]?[a-zA-Z0-9_$]*['"]?)\s*\])*([\.\[])?$/;
-    // Test the string against the regex
-    return regex.test(path);
+    return keys;
   }
+  return null;
+};
 
-  splitStringAtLastSeparator(input:string) {
-    const lastSeparatorIndex = Math.max(input.lastIndexOf('.'), input.lastIndexOf('['));
-    if (lastSeparatorIndex === -1) return [input, ''];
-    return [input.slice(0, lastSeparatorIndex + 1), input.slice(lastSeparatorIndex + 1)];
-  }
-  /* #endregion */
+/**
+ * Splits a path string at the last separator (. or [)
+ * @param input The path string to split
+ * @returns Array containing [path up to last separator, remainder after separator]
+ * @example
+ * splitStringAtLastSeparator("foo.bar[0]") // returns ["foo.bar[", "0"]
+ */
+function splitStringAtLastSeparator(input:string) {
+  const lastSeparatorIndex = Math.max(input.lastIndexOf('.'), input.lastIndexOf('['));
+  if (lastSeparatorIndex === -1) return [input, ''];
+  return [input.slice(0, lastSeparatorIndex + 1), input.slice(lastSeparatorIndex + 1)];
 }
 
-export default NileCodeEditor;
+/**
+ * Traverses an object using an array of keys to access nested properties
+ * @param obj The object to traverse
+ * @param keys Array of keys defining the path to the desired property
+ * @returns The value at the specified path, or null if path is invalid
+ * @example
+ * resolveNestedProperties({foo: {bar: 123}}, ["foo", "bar"]) // returns 123
+ */
+function resolveNestedProperties (obj:any, keys:any[]){
+  return keys.reduce((acc, key) => {
+    if (acc && typeof acc === 'object') {
+      return acc[key];
+    }
+    return null;
+  }, obj);
+};
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-code-editor': NileCodeEditor;
-  }
+/**
+ * Validates if a string represents a valid object path format
+ * @param path The path string to validate
+ * @returns Boolean indicating if path format is valid
+ * @example
+ * isValidPath("foo.bar[0]") // returns true
+ * isValidPath("foo..bar") // returns false
+ */
+function isValidPath(path: string) {
+  // Regex to validate the format of the string
+  const regex = /^([a-zA-Z_$][\w$]*)(\.[a-zA-Z_$][\w$]*|\[\s*(['"]?[a-zA-Z0-9_$]*['"]?)\s*\])*([\.\[])?$/;
+  // Test the string against the regex
+  return regex.test(path);
 }
+
+/**
+ * Converts multi-line code into a single line by removing line breaks and extra whitespace
+ * @param code The code string to convert
+ * @returns Single line version of the code
+ * @example
+ * convertToSingleLine("foo\n  bar") // returns "foo bar"
+ */
+function convertToSingleLine(code: string) {
+  if (!code) return '';
+  // Remove line breaks and unnecessary whitespace
+  return code.replace(/\s+/g, ' ').trim();
+}

package/src/nile-drawer/nile-drawer.css.ts

@@ -125,7 +125,7 @@ export const styles = css`
     display: flex;
     flex-wrap: wrap;
     justify-content: end;
-    gap: 0.25rem;
+    gap: 0.5rem;
     padding: 0 var(--header-spacing);
   }
 

package/src/nile-form-help-text/nile-form-help-text.ts

@@ -58,8 +58,15 @@ export class NileFormHelpText extends LitElement {
     this.updateDisplayedText()
   }
 
-  updateDisplayedText(){
-    this.displayedText = this.isExpanded ? this.fullText : `${this.fullText.substring(0, this.textLimit)}...`;
+  updateDisplayedText() {
+    if (this.isExpanded) {
+      this.displayedText = this.fullText;
+    } else {
+      const validConcatNumber=concatSentence(this.fullText, this.textLimit)
+      const truncatedText = this.fullText.slice(0, validConcatNumber);
+      const ellipsis = this.fullText.length > validConcatNumber ? '...' : '';
+      this.displayedText = `${truncatedText}${ellipsis}`;
+    }
   }
 
   /* #endregion */
@@ -71,7 +78,7 @@ export class NileFormHelpText extends LitElement {
    * @slot This is a slot test
    */
   public render(): TemplateResult {
-    const showMoreButton = this.fullText.length > this.textLimit+3;
+    const showMoreButton = this.fullText.length > this.textLimit;
     const iconName = this.isExpanded ? 'arrowup' : 'arrowdown';
 
     return html`
@@ -101,3 +108,30 @@ declare global {
     'nile-form-help-text': NileFormHelpText;
   }
 }
+
+function concatSentence(sentence:string, n:number) {
+  if (n < 0 || n > sentence.length) {
+    throw new Error("Invalid value of n. It must be between 0 and the sentence length.");
+  }
+
+  // Adjust n if it falls in the middle of a word
+  if (sentence[n] !== " " && n !== 0 && n !== sentence.length) {
+    // Move left until the start of the word or the beginning of the sentence
+    let left = n;
+    while (left > 0 && sentence[left - 1] !== " ") {
+      left--;
+    }
+
+    // Move right until the end of the word or the end of the sentence
+    let right = n;
+    while (right < sentence.length && sentence[right] !== " ") {
+      right++;
+    }
+
+    // Adjust n to the closer boundary
+    n = (n - left <= right - n) ? left : right;
+  }
+
+  // Return the substring from the start to the adjusted n
+  return n;
+}

package/vscode-html-custom-data.json

@@ -726,7 +726,7 @@
     },
     {
       "name": "nile-code-editor",
-      "description": "Nile icon component.\n\nEvents:\n\n  * `nile-focus` {`Event`} - \n\n  * `nile-blur` {`Event`} - \n\nAttributes:\n\n  * `value` {`string`} - \n\n  * `expandIcon` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `language` {`\"javascript\" | \"sql\" | \"json\"`} - \n\n  * `error-message` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `allowVariableInCustomSuggestion` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\nProperties:\n\n  * `codeEditor` {`HTMLInputElement`} - \n\n  * `value` {`string`} - \n\n  * `expandIcon` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `language` {`\"javascript\" | \"sql\" | \"json\"`} - \n\n  * `errorMessage` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `allowVariableInCustomSuggestion` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `view` - \n\n  * `viewState` - \n\n  * `timeOut` - \n\n  * `lineNumbersComp` - \n\n  * `restrictSingleLineComp` - \n\n  * `readOnlyComp` - \n\n  * `customCompletionComp` - \n\n  * `placeholderComp` - \n\n  * `insertBetweenCode` - \n\n  * `customAutocomplete` - \n\n  * `resolveNestedProperties` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile icon component.\n\nEvents:\n\n  * `nile-focus` {`Event`} - \n\n  * `nile-blur` {`Event`} - \n\nAttributes:\n\n  * `value` {`string`} - \n\n  * `expandIcon` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `customCompletionsPaths` {`string[]`} - \n\n  * `language` {`\"html\" | \"javascript\" | \"sql\" | \"json\"`} - \n\n  * `error-message` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `allowVariableInCustomSuggestion` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `debounceTimeout` {`number`} - \n\nProperties:\n\n  * `codeEditor` {`HTMLInputElement`} - \n\n  * `value` {`string`} - \n\n  * `expandIcon` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `customCompletionsPaths` {`string[]`} - \n\n  * `language` {`\"html\" | \"javascript\" | \"sql\" | \"json\"`} - \n\n  * `errorMessage` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `allowVariableInCustomSuggestion` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `debounceTimeout` {`number`} - \n\n  * `view` - \n\n  * `viewState` - \n\n  * `timeOut` - \n\n  * `lineNumbersComp` - \n\n  * `restrictSingleLineComp` - \n\n  * `readOnlyComp` - \n\n  * `customCompletionComp` - \n\n  * `placeholderComp` - \n\n  * `customAutocomplete` - Custom autocomplete handler for code editor suggestions\n\n  * `insertBetweenCode` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "value",
@@ -744,10 +744,17 @@
           "name": "customAutoCompletions",
           "description": "`customAutoCompletions` - \n\nProperty: customAutoCompletions\n\nDefault: [object Object]"
         },
+        {
+          "name": "customCompletionsPaths",
+          "description": "`customCompletionsPaths` {`string[]`} - \n\nProperty: customCompletionsPaths\n\nDefault: "
+        },
         {
           "name": "language",
-          "description": "`language` {`\"javascript\" | \"sql\" | \"json\"`} - \n\nProperty: language\n\nDefault: javascript",
+          "description": "`language` {`\"html\" | \"javascript\" | \"sql\" | \"json\"`} - \n\nProperty: language\n\nDefault: javascript",
           "values": [
+            {
+              "name": "html"
+            },
             {
               "name": "javascript"
             },
@@ -813,6 +820,10 @@
           "description": "`debounce` {`boolean`} - \n\nProperty: debounce\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "debounceTimeout",
+          "description": "`debounceTimeout` {`number`} - \n\nProperty: debounceTimeout\n\nDefault: 200"
+        },
         {
           "name": "onnile-focus",
           "description": "`nile-focus` {`Event`} - "