@aquera/nile-elements 0.1.12 → 0.1.14

package/dist/src/nile-form-help-text/nile-form-help-text.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-form-help-text.js","sourceRoot":"","sources":["../../../src/nile-form-help-text/nile-form-help-text.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, html, CSSResultArray, TemplateResult} from 'lit';\nimport { customElement, query, property } from 'lit/decorators.js';\nimport {styles} from './nile-form-help-text.css';\n\n/**\n * Nile icon component.\n *\n * @tag nile-form-help-text\n *\n */\n@customElement('nile-form-help-text')\nexport class NileFormHelpText extends LitElement {\n  /**\n   * The styles for FormHelpText\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  @property({ type: Boolean, reflect: true  }) isExpanded: boolean = false;\n\n  @property({ type: String, reflect: true  }) fullText: string = '';\n\n  @property({ type: Number, reflect: true  }) textLimit: number = 47;\n\n  @property({ type: String, reflect: true  }) displayedText: string = '';\n\n  @query('slot') slotElement!: HTMLSlotElement;\n\n  connectedCallback() {\n    super.connectedCallback();\n    requestAnimationFrame(() => {\n      this.slotElement?.addEventListener('slotchange', this.handleSlotChange.bind(this));\n    });\n  }\n\n  firstUpdated() {\n    this.handleSlotChange();\n  }\n\n  handleSlotChange() {\n    const nodes = this.slotElement.assignedNodes({flatten: true});\n    const textContent = nodes.map(node => node.textContent).join('');\n    this.fullText = textContent.trim();\n    this.updateDisplayedText()\n  }\n\n  toggleExpanded() {\n    this.isExpanded = !this.isExpanded;\n    this.updateDisplayedText()\n  }\n\n  updateDisplayedText() {\n    if (this.isExpanded) {\n      this.displayedText = this.fullText;\n    } else {\n      const validConcatNumber=concatSentence(this.fullText, this.textLimit)\n      const truncatedText = this.fullText.slice(0, validConcatNumber);\n      const ellipsis = this.fullText.length > validConcatNumber ? '...' : '';\n      this.displayedText = `${truncatedText}${ellipsis}`;\n    }\n  }\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  public render(): TemplateResult {\n    const showMoreButton = this.fullText.length > this.textLimit;\n    const iconName = this.isExpanded ? 'arrowup' : 'arrowdown';\n\n    return html`\n    <div class=\"nile-form-help-text\" part=\"container\">\n      <slot hidden>${this.fullText}</slot>\n      <div part=\"text\">\n        <span>${this.displayedText}</span>\n        ${showMoreButton ? html`\n          <span\n            class=\"nile-form-help-text__more-button\"\n            part=\"toggle-button\"\n            @click=${this.toggleExpanded}\n            >${this.isExpanded ? 'View Less' : 'View More'}\n            <nile-icon color=\"#005EA6\" part=\"icon\" size=\"14\" name=\"${iconName}\"></nile-icon>\n  </span>\n        ` : ''}\n  </div>\n    </div>\n  `;\n  }\n}\n\nexport default NileFormHelpText;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-form-help-text': NileFormHelpText;\n  }\n}\n\nfunction concatSentence(sentence:string, n:number) {\n  if (n < 0 || n > sentence.length) {\n    return n;\n  }\n\n  // Adjust n if it falls in the middle of a word\n  if (sentence[n] !== \" \" && n !== 0 && n !== sentence.length) {\n    // Move left until the start of the word or the beginning of the sentence\n    let left = n;\n    while (left > 0 && sentence[left - 1] !== \" \") {\n      left--;\n    }\n\n    // Move right until the end of the word or the end of the sentence\n    let right = n;\n    while (right < sentence.length && sentence[right] !== \" \") {\n      right++;\n    }\n\n    // Adjust n to the closer boundary\n    n = (n - left <= right - n) ? left : right;\n  }\n\n  // Return the substring from the start to the adjusted n\n  return n;\n}\n"]}
+{"version":3,"file":"nile-form-help-text.js","sourceRoot":"","sources":["../../../src/nile-form-help-text/nile-form-help-text.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAC,UAAU,EAAE,IAAI,EAAkC,OAAO,EAAiB,MAAM,KAAK,CAAC;AAC9F,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD;;;;;GAKG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QASwC,eAAU,GAAY,KAAK,CAAC;QAEhE,eAAU,GAAY,KAAK,CAAC;IAgFvC,CAAC;IA1FC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAUD,gBAAgB;IAEhB,qBAAqB;IAEX,YAAY,CAAC,kBAAkC;QACvD,IAAI,CAAC,cAAc,GAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAClE,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;IACnC,CAAC;IAED;;;OAGG;IACI,MAAM;QACX,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC;QAE3D,OAAO,IAAI,CAAA;;eAEA,QAAQ,CAAC;YAChB,qBAAqB,EAAC,IAAI;YAC1B,+BAA+B,EAAC,IAAI,CAAC,UAAU;SAC9C,CAAC;;;;iBAIO,QAAQ,CAAC;YAChB,kBAAkB,EAAC,IAAI;YACvB,4BAA4B,EAAC,IAAI,CAAC,UAAU;SAC3C,CAAC;;6BAEiB,IAAI,CAAC,wBAAwB;;QAElD,IAAI,CAAC,UAAU,CAAA,CAAC,CAAA,IAAI,CAAA;;;;mBAIT,IAAI,CAAC,cAAc;WAC3B,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;mEACa,QAAQ;;OAEpE,CAAA,CAAC,CAAA,OAAO;;GAEZ,CAAC;IACF,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;IACrC,CAAC;IAED,wBAAwB;QACtB,IAAG,CAAC,IAAI,CAAC,aAAa;YAAE,OAAO;QAC/B,IAAI,CAAC,UAAU,GAAC,IAAI,CAAC,aAAa,CAAC,WAAW,GAAC,IAAI,CAAC,aAAa,CAAC,WAAW,CAAA;IAC/E,CAAC;IAED;;;OAGG;IACH,kBAAkB,CAAC,OAAmB;QAEpC,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;YAClD,KAAK,IAAI,KAAK,IAAI,OAAO,EAAE,CAAC;gBAC1B,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;gBACzC,IAAI,QAAQ;oBAAE,IAAI,CAAC,wBAAwB,EAAE,CAAC;YAChD,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAEhC,OAAO,cAAc,CAAC,CAAC,mDAAmD;IAC5E,CAAC;CACF,CAAA;AAlF8C;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAG,CAAC;oDAA6B;AAEhE;IAAR,KAAK,EAAE;oDAA6B;AAET;IAA3B,KAAK,CAAC,mBAAmB,CAAC;uDAA+B;AAb/C,gBAAgB;IAD5B,aAAa,CAAC,qBAAqB,CAAC;GACxB,gBAAgB,CA2F5B;;AAED,eAAe,gBAAgB,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, html, CSSResultArray, TemplateResult, nothing, PropertyValues} from 'lit';\nimport { customElement, query, property, state } from 'lit/decorators.js';\nimport {styles} from './nile-form-help-text.css';\nimport { classMap } from 'lit/directives/class-map.js';\n\n/**\n * Nile icon component.\n *\n * @tag nile-form-help-text\n *\n */\n@customElement('nile-form-help-text')\nexport class NileFormHelpText extends LitElement {\n  /**\n   * The styles for FormHelpText\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  @property({ type: Boolean, reflect: true  }) isExpanded: boolean = false;\n\n  @state() showButton: boolean = false;\n\n  @query('.help__text__full') textContainer:HTMLSpanElement;\n\n  private resizeObserver:ResizeObserver;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  protected firstUpdated(_changedProperties: PropertyValues): void {\n    this.resizeObserver=this.observeWidthChange(this.textContainer);\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver.disconnect();\n  }\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  public render(): TemplateResult {\n    const iconName = this.isExpanded ? 'arrowup' : 'arrowdown';\n\n    return html`\n    <div \n      class=\"${classMap({\n        'nile-form-help-text':true,\n        \"nile-form-help-text--expanded\":this.isExpanded\n        })}\" \n      part=\"container\"\n    >\n      <span\n        class=\"${classMap({\n          \"help__text__full\":true,\n          \"help__text__full--expanded\":this.isExpanded\n          })}\"\n        >\n        <slot @slotchange=\"${this.decideToToggleShowButton}\"></slot>\n      </span>\n      ${this.showButton?html`\n        <span\n          class=\"nile-form-help-text__more-button\"\n          part=\"toggle-button\"\n          @click=${this.toggleExpanded}\n        >${this.isExpanded ? 'View Less' : 'View More'}\n          <nile-icon color=\"#005EA6\" part=\"icon\" size=\"14\" name=\"${iconName}\"></nile-icon>\n        </span>\n      `:nothing}\n    </div>\n  `;\n  }\n\n  toggleExpanded() {\n    this.isExpanded = !this.isExpanded;\n  }\n  \n  decideToToggleShowButton(){\n    if(!this.textContainer) return;\n    this.showButton=this.textContainer.clientWidth<this.textContainer.scrollWidth\n  }\n\n  /**\n   * Logs whenever the width of an element changes.\n   * @param {HTMLElement} element - The element to observe for width changes.\n   */\n  observeWidthChange(element:HTMLElement) {\n\n    const resizeObserver = new ResizeObserver(entries => {\n      for (let entry of entries) {\n        const newWidth = entry.contentRect.width;\n        if (newWidth) this.decideToToggleShowButton();\n      }\n    });\n\n    resizeObserver.observe(element);\n\n    return resizeObserver; // Return observer to allow disconnection if needed\n  }\n}\n\nexport default NileFormHelpText;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-form-help-text': NileFormHelpText;\n  }\n}"]}

package/dist/src/nile-form-help-text/nile-form-help-text.test.js

@@ -1,67 +1,88 @@
-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 = 50000) => new Promise(resolve => setTimeout(resolve, ms));
 describe('NileFormHelpText', () => {
     it('should render with default properties', async () => {
-        const el = 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(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 = 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;
-        // Check if the "View More" button is visible
-        const moreButton = el.shadowRoot.querySelector('.nile-form-help-text__more-button');
+    it('should not show "View More" button if the text fits within the container', async () => {
+        const el = await fixture(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(html `<nile-form-help-text>${longText}</nile-form-help-text>`);
+        // Simulate overflow
+        const textContainer = el.shadowRoot?.querySelector('.help__text__full');
+        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 = 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('.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(html `<nile-form-help-text>${longText}</nile-form-help-text>`);
+        // Simulate overflow
+        const textContainer = el.shadowRoot?.querySelector('.help__text__full');
+        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('.nile-form-help-text__more-button');
         moreButton?.click();
-        await el.updateComplete;
-        // 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');
+        await elementUpdated(el);
+        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 = await fixture(html `<nile-form-help-text><span>${longText}</span></nile-form-help-text>`);
-        // Expand the text
-        const moreButton = el.shadowRoot.querySelector('.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(html `<nile-form-help-text>${longText}</nile-form-help-text>`);
+        // Simulate overflow
+        const textContainer = el.shadowRoot?.querySelector('.help__text__full');
+        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('.nile-form-help-text__more-button');
         moreButton?.click();
-        await el.updateComplete;
-        // Collapse the text by clicking "View Less"
-        const lessButton = el.shadowRoot.querySelector('.nile-form-help-text__more-button');
-        lessButton?.click();
-        await el.updateComplete;
-        // 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');
-    });
-    it('should not show "View More" button when text is within limit', async () => {
-        const shortText = "Short help text.";
-        const el = 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);
-        // Verify that "View More" button is not rendered
-        const moreButton = el.shadowRoot.querySelector('.nile-form-help-text__more-button');
-        expect(moreButton).to.be.null;
+        await elementUpdated(el);
+        moreButton?.click(); // Collapse
+        await elementUpdated(el);
+        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 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);
+    //   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;
+    // });
 });
 //# sourceMappingURL=nile-form-help-text.test.js.map

package/dist/src/nile-form-help-text/nile-form-help-text.test.js.map

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