@aquera/nile-elements 0.1.12 → 0.1.14

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

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

@@ -21,8 +21,6 @@ import {
 import {
   foldGutter,
   indentOnInput,
-  syntaxHighlighting,
-  defaultHighlightStyle,
   bracketMatching,
   indentUnit,
   foldKeymap,
@@ -83,10 +81,6 @@ export const basicSetup = (options: BasicSetupOptions = {}): Extension[] => {
   isValidSetup(options.dropCursor) && extensions.push(dropCursor());
   isValidSetup(options.allowMultipleSelections) && extensions.push(EditorState.allowMultipleSelections.of(true));
   isValidSetup(options.indentOnInput) && extensions.push(indentOnInput());
-  isValidSetup(options.syntaxHighlighting) &&
-    extensions.push(
-      syntaxHighlighting(defaultHighlightStyle, { fallback: true })
-    );
   isValidSetup(options.bracketMatching) && extensions.push(bracketMatching());
   isValidSetup(options.closeBrackets) && extensions.push(closeBrackets());
   isValidSetup(options.autocompletion) && extensions.push(autocompletion());

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

@@ -22,6 +22,11 @@ import {
   Extension
 } from '@codemirror/state';
 
+import {
+  syntaxHighlighting,
+  defaultHighlightStyle,
+} from '@codemirror/language';
+
 import { lineNumbers } from '@codemirror/view';
 import {
   javascript,
@@ -34,7 +39,7 @@ import { autocompletion,CompletionContext,CompletionResult } from '@codemirror/a
 import NileElement from '../internal/nile-element';
 import { basicSetup } from './extensionSetup';
 import { classMap } from 'lit/directives/class-map.js';
-import { Theme } from './theme';
+import { Theme, CustomTheme } from './theme';
 
 // Choose the appropriate mode for your use case
 
@@ -73,6 +78,10 @@ export class NileCodeEditor extends NileElement {
 
   @property({ type: Boolean, reflect: true , attribute: true }) lineNumbers: boolean = false;
 
+  @property({ type: Boolean, reflect: true , attribute: false }) disableSyntaxHighlighting: boolean = false;
+
+  @property({ type: Boolean, reflect: true , attribute: false }) useCustomTextFormatting: boolean = false;
+
   @property({ type: Boolean, reflect: true , attribute: true }) lineNumbersMultiline: boolean = true;
 
   @property({ type: Boolean, reflect: true , attribute: true }) hasScroller: boolean = true;
@@ -95,6 +104,7 @@ export class NileCodeEditor extends NileElement {
   private readOnlyComp = new Compartment();
   private customCompletionComp = new Compartment();
   private placeholderComp = new Compartment();
+  private defaultSyntaxHighlightingComp = new Compartment();
 
   /**
    * The styles for CodeEditor
@@ -169,6 +179,13 @@ export class NileCodeEditor extends NileElement {
         ]
       })
     }
+    if(changedProperties.has('disableSyntaxHighlighting')){
+      this.view.dispatch({ 
+        effects: [
+          this.defaultSyntaxHighlightingComp.reconfigure(this.getDefaultSyntaxHighlightingExtension())
+        ]
+      })
+    }
   }
 
   public render(): TemplateResult {
@@ -222,6 +239,7 @@ export class NileCodeEditor extends NileElement {
     const readOnlyExtension = this.readOnlyComp.of(this.getReadOnlyExtension());
     const restrictSingleLineExtension = this.restrictSingleLineComp.of(this.getSingleLineExtension())
     const placeholderExtension = this.placeholderComp.of(this.getPlaceholderExtension())
+    const defaultSyntaxHighlightingExtension = this.defaultSyntaxHighlightingComp.of(this.getDefaultSyntaxHighlightingExtension());
     const language = this.getLanguageExtension()
     const customAutoCompletions = this.customCompletionComp.of(javascriptLanguage.data.of({
       autocomplete: this.customAutocomplete
@@ -239,9 +257,10 @@ export class NileCodeEditor extends NileElement {
         restrictSingleLineExtension,
         customAutoCompletions,
         placeholderExtension,
+        defaultSyntaxHighlightingExtension,
         autocompletion(),
         language,
-        EditorView.theme(Theme),
+        EditorView.theme(this.useCustomTextFormatting?CustomTheme:Theme),
         EditorView.updateListener.of((v: ViewUpdate) => {
           if (v.docChanged) {
             this.debounce ? this.emitAfterTimeout({ value: this.view.state.doc.toString() }) : this.emit('nile-change', { value: this.view.state.doc.toString() })
@@ -362,6 +381,15 @@ export class NileCodeEditor extends NileElement {
     if(this.timeOut) clearTimeout(this.timeOut);
     this.timeOut=setTimeout(()=> this.emit('nile-change', value, false), this.debounceTimeout)
   }
+  
+  public focusAtPosition(pos: number=this.view.state.doc.toString().length): void {
+    if (this.view) {
+      this.view.dispatch({
+        selection: { anchor: pos },
+      });
+      this.view.focus();
+    }
+  }
 
   public insertBetweenCode=(text: string) => {
     const transaction = this.view.state.changeByRange(range => {
@@ -414,6 +442,10 @@ export class NileCodeEditor extends NileElement {
   getPlaceholderExtension(){
     return this.placeholder ? placeholder(this.placeholder) : [];
   }
+  
+  getDefaultSyntaxHighlightingExtension(){
+    return !this.disableSyntaxHighlighting ? syntaxHighlighting(defaultHighlightStyle, { fallback: true }):[]
+  }
 
   restrictSingleLine() {
     return EditorState.transactionFilter.of(tr =>

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

@@ -8,4 +8,32 @@ export const Theme = {
   ".cm-scroller": {
     scrollbarWidth:'thin',
   },
+};
+
+export const CustomTheme = {
+  '&': {
+    fontSize: 'inherit',
+    fontStyle: 'inherit',
+    fontFamily: 'inherit',
+    fontWeight: 'inherit',
+    lineHeight:'inherit',
+    letterSpacing:'inherit'
+  },
+  
+  '.cm-content': {
+    fontSize: 'inherit',
+    fontStyle: 'inherit',
+    fontFamily: 'inherit',
+    fontWeight: 'inherit',
+    lineHeight:'inherit',
+    letterSpacing:'inherit'
+  },
+
+  ".cm-scroller":{
+    fontFamily: 'inherit'
+  },
+
+  ".cm-gutters": {
+    fontFamily: 'inherit', // Ensure the gutter font matches
+  },
 };

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

@@ -12,23 +12,28 @@ import { css } from 'lit';
  */
 export const styles = css`
   :host {
-  }
-
-  .nile-form-help-text {
-    display: flex;
-    align-items: center;
+    width:100%;
     color: var(--nile-form-help-text-color);
     font-family: var(--nile-font-family-serif);
     font-size: var(--nile-form-help-text-font-size);
     font-style: normal;
-    font-weight: 400;
     line-height: var(--nile-form-help-text-line-height);
+  }
+
+  .nile-form-help-text {
+    display:flex;
+    font-weight: 400;
     letter-spacing: 0.2px;
     margin-top: 6px;
     margin-right: 4px;
     width: auto;
   }
 
+
+  .nile-form-help-text--expanded{
+    display:block;
+  }
+
   .nile-form-help-text__more-button {
     display: inline-flex;
     gap: 4px;
@@ -37,6 +42,17 @@ export const styles = css`
     white-space: nowrap;
     align-items: center;
   }
+
+  .help__text__full{
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display:inline;
+  }
+  
+  .help__text__full--expanded{
+    white-space: wrap;
+  }
 `;
 
 export default [styles];

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

@@ -1,86 +1,110 @@
-import { fixture, expect, html } from '@open-wc/testing';
+import { fixture, expect, html, elementUpdated } from '@open-wc/testing';
 import './nile-form-help-text';
 import { NileFormHelpText } from './nile-form-help-text';
 
 const wait = (ms: number = 50000) => new Promise(resolve => setTimeout(resolve, ms))
 
+
 describe('NileFormHelpText', () => {
   it('should render with default properties', async () => {
-    const el: NileFormHelpText = await fixture(html`<nile-form-help-text>This is a very short text</nile-form-help-text>`);
-    
-    // Check if the displayed text is empty initially (no content in slot)
-    const textContent = el.shadowRoot!.querySelector('div>span:first-child')?.textContent?.trim()
-    expect(textContent).to.equal('This is a very short text');
+    const el = await fixture<NileFormHelpText>(html`<nile-form-help-text>This is a short text</nile-form-help-text>`);
+    expect(el).to.be.instanceOf(NileFormHelpText);
+    expect(el.isExpanded).to.be.false;
+
+    // Check if text content matches
+    const textContent = el?.textContent?.trim();
+    expect(textContent).to.equal('This is a short text');
   });
 
-  it('should truncate the text if it exceeds textLimit and show "View More" button', async () => {
-    const longText = "This is a very long help text that should be truncated and should show a 'View More' button.";
-    const el: NileFormHelpText = await fixture(html`<nile-form-help-text><span>${longText}</span></nile-form-help-text>`);
-    
-    // Check if the displayed text is truncated
-    const textContent = el.shadowRoot!.querySelector('div>span:first-child')?.textContent?.trim()
-    expect(textContent?.endsWith('...')).to.be.true;
+  it('should not show "View More" button if the text fits within the container', async () => {
+    const el = await fixture<NileFormHelpText>(html`<nile-form-help-text>This is a short text</nile-form-help-text>`);
+    await elementUpdated(el);
+
+    const moreButton = el.shadowRoot?.querySelector('.nile-form-help-text__more-button');
+    expect(moreButton).to.be.null;
+    expect(el.showButton).to.be.false;
+  });
+
+  it('should show "View More" button if the text overflows the container', async () => {
+    const longText = 'This is a very long help text that exceeds the container width and should show a "View More" button.';
+    const el = await fixture<NileFormHelpText>(html`<nile-form-help-text>${longText}</nile-form-help-text>`);
     
-    // Check if the "View More" button is visible
-    const moreButton = el.shadowRoot!.querySelector('.nile-form-help-text__more-button');
+    // Simulate overflow
+    const textContainer = el.shadowRoot?.querySelector('.help__text__full') as HTMLSpanElement;
+    Object.defineProperty(textContainer, 'scrollWidth', { value: 300 });
+    Object.defineProperty(textContainer, 'clientWidth', { value: 200 });
+    el.decideToToggleShowButton();
+    await elementUpdated(el);
+
+    const moreButton = el.shadowRoot?.querySelector('.nile-form-help-text__more-button');
     expect(moreButton).to.exist;
-    expect(moreButton?.textContent).to.include('View More');
+    expect(el.showButton).to.be.true;
   });
 
   it('should expand to show full text when "View More" is clicked', async () => {
-    const longText = "This is a very long help text that should be truncated and should show a 'View More' button.";
-    const el: NileFormHelpText = await fixture(html`<nile-form-help-text><span>${longText}</span></nile-form-help-text>`);
-    
-    // Simulate clicking the "View More" button
-    const moreButton = el.shadowRoot!.querySelector<HTMLElement>('.nile-form-help-text__more-button');
+    const longText = 'This is a very long help text that exceeds the container width and should show a "View More" button.';
+    const el = await fixture<NileFormHelpText>(html`<nile-form-help-text>${longText}</nile-form-help-text>`);
+
+    // Simulate overflow
+    const textContainer = el.shadowRoot?.querySelector('.help__text__full') as HTMLSpanElement;
+    Object.defineProperty(textContainer, 'scrollWidth', { value: 300 });
+    Object.defineProperty(textContainer, 'clientWidth', { value: 200 });
+    el.decideToToggleShowButton();
+    await elementUpdated(el);
+
+    // Click "View More"
+    const moreButton = el.shadowRoot?.querySelector<HTMLElement>('.nile-form-help-text__more-button');
     moreButton?.click();
-    await el.updateComplete;
+    await elementUpdated(el);
 
-    // Verify that the full text is displayed
-    const textContent = el.shadowRoot!.querySelector('div>span:first-child')?.textContent?.trim()
-    expect(textContent).to.equal(longText);
-    
-    // Check if the "View Less" button is now visible
-    const lessButton = el.shadowRoot!.querySelector('.nile-form-help-text__more-button');
-    expect(lessButton).to.exist;
-    expect(lessButton?.textContent).to.include('View Less');
+    expect(el.isExpanded).to.be.true;
+    expect(textContainer).to.have.class('help__text__full--expanded');
+    expect(moreButton?.textContent).to.include('View Less');
   });
 
   it('should collapse back to truncated text when "View Less" is clicked', async () => {
-    const longText = "This is a very long help text that should be truncated and should show a 'View More' button.";
-    const el: NileFormHelpText = await fixture(html`<nile-form-help-text><span>${longText}</span></nile-form-help-text>`);
-    
-    // Expand the text
-    const moreButton = el.shadowRoot!.querySelector<HTMLElement>('.nile-form-help-text__more-button');
+    const longText = 'This is a very long help text that exceeds the container width and should show a "View More" button.';
+    const el = await fixture<NileFormHelpText>(html`<nile-form-help-text>${longText}</nile-form-help-text>`);
+
+    // Simulate overflow
+    const textContainer = el.shadowRoot?.querySelector('.help__text__full') as HTMLSpanElement;
+    Object.defineProperty(textContainer, 'scrollWidth', { value: 300 });
+    Object.defineProperty(textContainer, 'clientWidth', { value: 200 });
+    el.decideToToggleShowButton();
+    await elementUpdated(el);
+
+    // Expand and then collapse
+    const moreButton = el.shadowRoot?.querySelector<HTMLElement>('.nile-form-help-text__more-button');
     moreButton?.click();
-    await el.updateComplete;
+    await elementUpdated(el);
 
-    // Collapse the text by clicking "View Less"
-    const lessButton = el.shadowRoot!.querySelector<HTMLElement>('.nile-form-help-text__more-button');
-    lessButton?.click();
-    await el.updateComplete;
+    moreButton?.click(); // Collapse
+    await elementUpdated(el);
 
-    // Verify that the text is truncated again
-    const textContent = el.shadowRoot!.querySelector('div>span:first-child')?.textContent?.trim()
-    expect(textContent?.endsWith('...')).to.be.true;
-    
-    // Check if the "View More" button is visible again
-    const viewMoreButton = el.shadowRoot!.querySelector('.nile-form-help-text__more-button');
-    expect(viewMoreButton).to.exist;
-    expect(viewMoreButton?.textContent).to.include('View More');
+    expect(el.isExpanded).to.be.false;
+    expect(textContainer).not.to.have.class('help__text__full--expanded');
+    expect(moreButton?.textContent).to.include('View More');
   });
 
-  it('should not show "View More" button when text is within limit', async () => {
-    const shortText = "Short help text.";
-    const el: NileFormHelpText = await fixture(html`<nile-form-help-text><span>${shortText}</span></nile-form-help-text>`);
-    
-    // Check if the displayed text is not truncated
-    const textContent = el.shadowRoot!.querySelector('div>span:first-child')?.textContent?.trim()
-    expect(textContent).to.equal(shortText);
+  // it('should dynamically adjust "View More" visibility on text change', async () => {
+  //   const el = await fixture<NileFormHelpText>(html`<nile-form-help-text>Initial text</nile-form-help-text>`);
+  //   await elementUpdated(el);
 
-    // Verify that "View More" button is not rendered
-    const moreButton = el.shadowRoot!.querySelector('.nile-form-help-text__more-button');
-    expect(moreButton).to.be.null;
-  });
+  //   const textContainer = el.shadowRoot?.querySelector('.help__text__full') as HTMLSpanElement;
+  //   Object.defineProperty(textContainer, 'scrollWidth', { value: 300 });
+  //   Object.defineProperty(textContainer, 'clientWidth', { value: 200 });
+  //   el.decideToToggleShowButton();
+  //   await elementUpdated(el);
+
+  //   expect(el.showButton).to.be.true;
+
+  //   // Change slot content to short text
+  //   textContainer.textContent = 'Short text';
+  //   Object.defineProperty(textContainer, 'scrollWidth', { value: 100 });
+  //   Object.defineProperty(textContainer, 'clientWidth', { value: 200 });
+  //   el.decideToToggleShowButton();
+  //   await elementUpdated(el);
 
+  //   expect(el.showButton).to.be.false;
+  // });
 });

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

@@ -5,9 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {LitElement, html, CSSResultArray, TemplateResult} from 'lit';
-import { customElement, query, property } from 'lit/decorators.js';
+import {LitElement, html, CSSResultArray, TemplateResult, nothing, PropertyValues} from 'lit';
+import { customElement, query, property, state } from 'lit/decorators.js';
 import {styles} from './nile-form-help-text.css';
+import { classMap } from 'lit/directives/class-map.js';
 
 /**
  * Nile icon component.
@@ -27,78 +28,86 @@ export class NileFormHelpText extends LitElement {
 
   @property({ type: Boolean, reflect: true  }) isExpanded: boolean = false;
 
-  @property({ type: String, reflect: true  }) fullText: string = '';
+  @state() showButton: boolean = false;
 
-  @property({ type: Number, reflect: true  }) textLimit: number = 47;
+  @query('.help__text__full') textContainer:HTMLSpanElement;
 
-  @property({ type: String, reflect: true  }) displayedText: string = '';
+  private resizeObserver:ResizeObserver;
 
-  @query('slot') slotElement!: HTMLSlotElement;
-
-  connectedCallback() {
-    super.connectedCallback();
-    requestAnimationFrame(() => {
-      this.slotElement?.addEventListener('slotchange', this.handleSlotChange.bind(this));
-    });
-  }
+  /* #endregion */
 
-  firstUpdated() {
-    this.handleSlotChange();
-  }
+  /* #region Methods */
 
-  handleSlotChange() {
-    const nodes = this.slotElement.assignedNodes({flatten: true});
-    const textContent = nodes.map(node => node.textContent).join('');
-    this.fullText = textContent.trim();
-    this.updateDisplayedText()
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    this.resizeObserver=this.observeWidthChange(this.textContainer);
   }
 
-  toggleExpanded() {
-    this.isExpanded = !this.isExpanded;
-    this.updateDisplayedText()
+  disconnectedCallback(): void {
+    this.resizeObserver.disconnect();
   }
 
-  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 */
-
-  /* #region Methods */
-
   /**
    * Render method
    * @slot This is a slot test
    */
   public render(): TemplateResult {
-    const showMoreButton = this.fullText.length > this.textLimit;
     const iconName = this.isExpanded ? 'arrowup' : 'arrowdown';
 
     return html`
-    <div class="nile-form-help-text" part="container">
-      <slot hidden>${this.fullText}</slot>
-      <div part="text">
-        <span>${this.displayedText}</span>
-        ${showMoreButton ? html`
-          <span
-            class="nile-form-help-text__more-button"
-            part="toggle-button"
-            @click=${this.toggleExpanded}
-            >${this.isExpanded ? 'View Less' : 'View More'}
-            <nile-icon color="#005EA6" part="icon" size="14" name="${iconName}"></nile-icon>
-  </span>
-        ` : ''}
-  </div>
+    <div 
+      class="${classMap({
+        'nile-form-help-text':true,
+        "nile-form-help-text--expanded":this.isExpanded
+        })}" 
+      part="container"
+    >
+      <span
+        class="${classMap({
+          "help__text__full":true,
+          "help__text__full--expanded":this.isExpanded
+          })}"
+        >
+        <slot @slotchange="${this.decideToToggleShowButton}"></slot>
+      </span>
+      ${this.showButton?html`
+        <span
+          class="nile-form-help-text__more-button"
+          part="toggle-button"
+          @click=${this.toggleExpanded}
+        >${this.isExpanded ? 'View Less' : 'View More'}
+          <nile-icon color="#005EA6" part="icon" size="14" name="${iconName}"></nile-icon>
+        </span>
+      `:nothing}
     </div>
   `;
   }
+
+  toggleExpanded() {
+    this.isExpanded = !this.isExpanded;
+  }
+  
+  decideToToggleShowButton(){
+    if(!this.textContainer) return;
+    this.showButton=this.textContainer.clientWidth<this.textContainer.scrollWidth
+  }
+
+  /**
+   * Logs whenever the width of an element changes.
+   * @param {HTMLElement} element - The element to observe for width changes.
+   */
+  observeWidthChange(element:HTMLElement) {
+
+    const resizeObserver = new ResizeObserver(entries => {
+      for (let entry of entries) {
+        const newWidth = entry.contentRect.width;
+        if (newWidth) this.decideToToggleShowButton();
+      }
+    });
+
+    resizeObserver.observe(element);
+
+    return resizeObserver; // Return observer to allow disconnection if needed
+  }
 }
 
 export default NileFormHelpText;
@@ -107,31 +116,4 @@ declare global {
   interface HTMLElementTagNameMap {
     'nile-form-help-text': NileFormHelpText;
   }
-}
-
-function concatSentence(sentence:string, n:number) {
-  if (n < 0 || n > sentence.length) {
-    return n;
-  }
-
-  // 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

@@ -784,7 +784,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  * `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`} - ",
+      "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  * `disableSyntaxHighlighting` {`boolean`} - \n\n  * `useCustomTextFormatting` {`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  * `defaultSyntaxHighlightingComp` - \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",
@@ -1370,24 +1370,12 @@
     },
     {
       "name": "nile-form-help-text",
-      "description": "Nile icon component.\n\nAttributes:\n\n  * `isExpanded` {`boolean`} - \n\n  * `fullText` {`string`} - \n\n  * `textLimit` {`number`} - \n\n  * `displayedText` {`string`} - \n\nProperties:\n\n  * `isExpanded` {`boolean`} - \n\n  * `fullText` {`string`} - \n\n  * `textLimit` {`number`} - \n\n  * `displayedText` {`string`} - \n\n  * `slotElement` {`HTMLSlotElement`} - ",
+      "description": "Nile icon component.\n\nAttributes:\n\n  * `isExpanded` {`boolean`} - \n\nProperties:\n\n  * `isExpanded` {`boolean`} - \n\n  * `showButton` {`boolean`} - \n\n  * `textContainer` {`HTMLSpanElement`} - \n\n  * `resizeObserver` - ",
       "attributes": [
         {
           "name": "isExpanded",
           "description": "`isExpanded` {`boolean`} - \n\nProperty: isExpanded\n\nDefault: false",
           "valueSet": "v"
-        },
-        {
-          "name": "fullText",
-          "description": "`fullText` {`string`} - \n\nProperty: fullText\n\nDefault: "
-        },
-        {
-          "name": "textLimit",
-          "description": "`textLimit` {`number`} - \n\nProperty: textLimit\n\nDefault: 47"
-        },
-        {
-          "name": "displayedText",
-          "description": "`displayedText` {`string`} - \n\nProperty: displayedText\n\nDefault: "
         }
       ]
     },