@aquera/nile-elements 0.0.81 → 0.0.84

package/src/nile-divider/nile-divider.ts

@@ -0,0 +1,56 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';
+import { customElement } from 'lit/decorators.js';
+import {styles} from './nile-divider.css';
+import NileElement from '../internal/nile-element';
+
+
+/**
+ * Nile divider component.
+ *
+ * @tag nile-divider
+ *
+ */
+@customElement('nile-divider')
+export class NileDivider extends NileElement {
+
+	/**
+	 * The styles for nile-divider
+	 * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+	 */
+	public static get styles(): CSSResultArray {
+		return [styles];
+	}
+	@property({ type: Boolean, reflect:true }) inset = false;
+	@property({ type: Boolean, reflect:true }) vertical = false;
+
+	/* #endregion */
+
+	/* #region Methods */
+
+	/**
+	 * Render method
+	 * @slot This is a slot test
+	 */
+	public render(): TemplateResult {
+		return html`
+			<div part="divider" class="divider ${this.vertical ? 'vertical' : 'horizontal'} ${this.inset ? 'inset' : ''}"></div>
+			`;
+	}
+
+	/* #endregion */
+}
+
+export default NileDivider;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-divider': NileDivider;
+  }
+}

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

@@ -0,0 +1,106 @@
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import sinon from 'sinon';
+import './nile-drawer'; // Adjust the import path as necessary
+import { NileDrawer } from './nile-drawer';
+describe('Nile-drawer', () => {
+  it('should be visible with the open attribute', async () => {
+    const el = await fixture<NileDrawer>(html`
+      <nile-drawer open>I am content inside nile drawer</nile-drawer>
+    `);
+    const panel = el.shadowRoot!.querySelector<HTMLElement>('[part="panel"]')!;
+    expect(panel.ariaHidden).to.equal('false');
+  });
+
+  it('should not be visible without the open attribute', async () => {
+    const el = await fixture<NileDrawer>(html`
+      <nile-drawer>I am content inside nile drawer</nile-drawer>
+    `);
+    const panel = el.shadowRoot!.querySelector<HTMLElement>('[part="panel"]')!;
+    expect(panel.ariaHidden).to.equal('true');
+  });
+
+  it('should emit nile-show and nile-after-show when calling show()', async () => {
+    const el = await fixture<NileDrawer>(html`
+      <nile-drawer>I am Nile Drawer Content.</nile-drawer>
+    `);
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
+    const showHandler = sinon.spy();
+    const afterShowHandler = sinon.spy();
+
+    el.addEventListener('nile-show', showHandler);
+    el.addEventListener('nile-after-show', afterShowHandler);
+    el.show();
+
+    await waitUntil(() => showHandler.calledOnce);
+    await waitUntil(() => afterShowHandler.calledOnce);
+
+    expect(showHandler).to.have.been.calledOnce;
+    expect(afterShowHandler).to.have.been.calledOnce;
+    expect(base.hidden).to.be.false;
+  });
+
+  it('should emit nile-hide and nile-after-hide when calling hide()', async () => {
+    const el = await fixture<NileDrawer>(html`
+      <nile-drawer open>I am nile drawer content</nile-drawer>
+    `);
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
+    const hideHandler = sinon.spy();
+    const afterHideHandler = sinon.spy();
+
+    el.addEventListener('nile-hide', hideHandler);
+    el.addEventListener('nile-after-hide', afterHideHandler);
+    el.hide();
+
+    await waitUntil(() => hideHandler.calledOnce);
+    await waitUntil(() => afterHideHandler.calledOnce);
+
+    expect(hideHandler).to.have.been.calledOnce;
+    expect(afterHideHandler).to.have.been.calledOnce;
+    expect(base.hidden).to.be.true;
+  });
+
+  it('should emit nile-show and nile-after-show when setting open = true', async () => {
+    const el = await fixture<NileDrawer>(html`
+      <nile-drawer
+        >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</nile-drawer
+      >
+    `);
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
+    const showHandler = sinon.spy();
+    const afterShowHandler = sinon.spy();
+
+    el.addEventListener('nile-show', showHandler);
+    el.addEventListener('nile-after-show', afterShowHandler);
+    el.open = true;
+
+    await waitUntil(() => showHandler.calledOnce);
+    await waitUntil(() => afterShowHandler.calledOnce);
+
+    expect(showHandler).to.have.been.calledOnce;
+    expect(afterShowHandler).to.have.been.calledOnce;
+    expect(base.hidden).to.be.false;
+  });
+
+  it('should emit nile-hide and nile-after-hide when setting open = false', async () => {
+    const el = await fixture<NileDrawer>(html`
+      <nile-drawer open
+        >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</nile-drawer
+      >
+    `);
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
+    const hideHandler = sinon.spy();
+    const afterHideHandler = sinon.spy();
+
+    el.addEventListener('nile-hide', hideHandler);
+    el.addEventListener('nile-after-hide', afterHideHandler);
+    el.open = false;
+
+    await waitUntil(() => hideHandler.calledOnce);
+    await waitUntil(() => afterHideHandler.calledOnce);
+
+    expect(hideHandler).to.have.been.calledOnce;
+    expect(afterHideHandler).to.have.been.calledOnce;
+    expect(base.hidden).to.be.true;
+  });
+});

package/src/nile-error-message/nile-error-message.test.ts

@@ -0,0 +1,69 @@
+import { html, fixture, expect, oneEvent } from '@open-wc/testing';
+import './nile-error-message';
+import { NileErrorMessage } from './nile-error-message';
+describe('NileErrorMessage', () => {
+  it('should render the error message', async () => {
+    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorMessage="An error occurred"></nile-error-message>`);
+    const errorMessage = el.shadowRoot!.querySelector('.nile-error-message__error');
+    expect(errorMessage!.textContent).to.equal('An error occurred');
+  });
+
+  it('should truncate the error response if it is too long', async () => {
+    const longErrorResponse = 'a'.repeat(150);
+    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorResponse="${longErrorResponse}"></nile-error-message>`);
+    const truncatedResponse = el.getTruncatedResponse();
+    expect(truncatedResponse).to.equal(`${longErrorResponse.substring(0, 100)}...`);
+  });
+
+  it('should not truncate the error response if it is within the maximum length', async () => {
+    const shortErrorResponse = 'Short error message';
+    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorResponse="${shortErrorResponse}"></nile-error-message>`);
+    const truncatedResponse = el.getTruncatedResponse();
+    expect(truncatedResponse).to.equal(shortErrorResponse);
+  });
+
+  it('should toggle the expanded state when the button is clicked', async () => {
+    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorResponse="Short error message" errorResponseLong="Detailed error information"></nile-error-message>`);
+    const button :HTMLButtonElement = el.shadowRoot!.querySelector('.nile-error-message__more-button') ??{} as HTMLButtonElement;
+    button.click();
+    expect(el.isExpanded).to.be.true;
+    button.click();
+    expect(el.isExpanded).to.be.false;
+  });
+
+  it('should display the "View More" button if there is extended error information', async () => {
+    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorResponse="Short error message" errorResponseLong="Detailed error information"></nile-error-message>`);
+    const button = el.shadowRoot!.querySelector('.nile-error-message__more-button');
+    expect(button).to.exist;
+  });
+
+  it('should not display the "View More" button if there is no extended error information', async () => {
+    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorResponse="Short error message"></nile-error-message>`);
+    const button = el.shadowRoot!.querySelector('.nile-error-message__more-button');
+    expect(button).to.not.exist;
+  });
+
+  it('should show the extended error information when expanded', async () => {
+    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorResponse="Short error message" errorResponseLong="Detailed error information"></nile-error-message>`);
+    el.isExpanded = true;
+    await el.updateComplete;
+    const expandedResponse = el.shadowRoot!.querySelector('.nile-error-message__response-expanded');
+    expect(expandedResponse?.textContent).to.include('Detailed error information');
+  });
+
+  it('should hide the extended error information when collapsed', async () => {
+    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorResponse="Short error message" errorResponseLong="Detailed error information"></nile-error-message>`);
+    el.isExpanded = false;
+    await el.updateComplete;
+    const expandedResponse = el.shadowRoot!.querySelector('.nile-error-message__response-expanded');
+    expect(expandedResponse).to.have.class('collapsed');
+  });
+
+  it('should render icon and error message parts', async () => {
+    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorMessage="An error occurred"></nile-error-message>`);
+    const icon = el.shadowRoot!.querySelector('nile-icon');
+    expect(icon).to.exist;
+    const errorMessage = el.shadowRoot!.querySelector('.nile-error-message__error');
+    expect(errorMessage).to.exist;
+  });
+});

package/src/nile-form-group/nile-form-group.test.ts

@@ -0,0 +1,63 @@
+import { fixture, html, expect } from '@open-wc/testing';
+import './nile-form-group'; // Make sure to import the component to be tested
+import NileFormGroup from './nile-form-group';
+
+describe('NileFormGroup', () => {
+  it('should have default properties', async () => {
+    const el = await fixture<NileFormGroup>(html`<nile-form-group></nile-form-group>`);
+    expect(el.title).to.equal('');
+    expect(el.subtitle).to.equal('');
+  });
+
+  it('should render title when set', async () => {
+    const el = await fixture<NileFormGroup>(html`<nile-form-group title="Test Title"></nile-form-group>`);
+    const titleSlot = el.shadowRoot!.querySelector('slot[name="title"]');
+    expect(titleSlot).to.exist;
+    expect(titleSlot?.textContent?.trim()).to.equal('Test Title');
+  });
+
+  it('should render subtitle when set', async () => {
+    const el = await fixture<NileFormGroup>(html`<nile-form-group title="Test Title" subtitle="Test Subtitle"></nile-form-group>`);
+    const subtitleSlot = el.shadowRoot!.querySelector('slot[name="subtitle"]');
+    expect(subtitleSlot).to.exist;
+    expect(subtitleSlot?.textContent?.trim()).to.equal('Test Subtitle');
+  });
+
+  it('should not render title and subtitle if not set', async () => {
+    const el = await fixture<NileFormGroup>(html`<nile-form-group></nile-form-group>`);
+    const titleSlot = el.shadowRoot!.querySelector('slot[name="title"]');
+    const subtitleSlot = el.shadowRoot!.querySelector('slot[name="subtitle"]');
+    expect(titleSlot).to.not.exist;
+    expect(subtitleSlot).to.not.exist;
+  });
+
+  it('should render content inside the form body slot', async () => {
+    const el = await fixture<NileFormGroup>(html`<nile-form-group><p>Form Content</p></nile-form-group>`);
+    const bodySlot = el.shadowRoot!.querySelector<HTMLSlotElement>('.form__body slot');
+    const assignedNodes = bodySlot?.assignedNodes() ?? [] as any;
+    expect(assignedNodes.length).to.equal(1);
+    expect(assignedNodes[0].textContent.trim()).to.equal('Form Content');
+  });
+
+  it('should reflect title and subtitle attributes', async () => {
+    const el = await fixture<NileFormGroup>(html`<nile-form-group title="Test Title" subtitle="Test Subtitle"></nile-form-group>`);
+    expect(el.getAttribute('title')).to.equal('Test Title');
+    expect(el.getAttribute('subtitle')).to.equal('Test Subtitle');
+  });
+
+  it('should update the title dynamically', async () => {
+    const el = await fixture<NileFormGroup>(html`<nile-form-group title="Initial Title"></nile-form-group>`);
+    el.title = 'Updated Title';
+    await el.updateComplete;
+    const titleSlot = el.shadowRoot!.querySelector('slot[name="title"]')?? {} as any;
+    expect(titleSlot.textContent.trim()).to.equal('Updated Title');
+  });
+
+  it('should update the subtitle dynamically', async () => {
+    const el = await fixture<NileFormGroup>(html`<nile-form-group title="Test Title" subtitle="Initial Subtitle"></nile-form-group>`);
+    el.subtitle = 'Updated Subtitle';
+    await el.updateComplete;
+    const subtitleSlot = el.shadowRoot!.querySelector('slot[name="subtitle"]') ?? {} as any;
+    expect(subtitleSlot.textContent.trim()).to.equal('Updated Subtitle');
+  });
+});

package/src/nile-icon/icons/svg/alert.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIgOFYxMk0xMiAxNkgxMi4wMSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+";

package/src/nile-icon/icons/svg/file-check-02.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAgMTIuNVY2LjhDMjAgNS4xMTk4NCAyMCA0LjI3OTc2IDE5LjY3MyAzLjYzODAzQzE5LjM4NTQgMy4wNzM1NCAxOC45MjY1IDIuNjE0NiAxOC4zNjIgMi4zMjY5OEMxNy43MjAyIDIgMTYuODgwMiAyIDE1LjIgMkg4LjhDNy4xMTk4NCAyIDYuMjc5NzYgMiA1LjYzODAzIDIuMzI2OThDNS4wNzM1NCAyLjYxNDYgNC42MTQ2IDMuMDczNTQgNC4zMjY5OCAzLjYzODAzQzQgNC4yNzk3NiA0IDUuMTE5ODQgNCA2LjhWMTcuMkM0IDE4Ljg4MDIgNCAxOS43MjAyIDQuMzI2OTggMjAuMzYyQzQuNjE0NiAyMC45MjY1IDUuMDczNTQgMjEuMzg1NCA1LjYzODAzIDIxLjY3M0M2LjI3OTc2IDIyIDcuMTE5ODQgMjIgOC44IDIySDEyTTE0IDExSDhNMTAgMTVIOE0xNiA3SDhNMTQuNSAxOUwxNi41IDIxTDIxIDE2LjUiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==";

package/src/nile-icon/icons/svg/headphones-01.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjEgMThWMTJDMjEgNy4wMjk0NCAxNi45NzA2IDMgMTIgM0M3LjAyOTQ0IDMgMyA3LjAyOTQ0IDMgMTJWMThNNS41IDIxQzQuMTE5MjkgMjEgMyAxOS44ODA3IDMgMTguNVYxNi41QzMgMTUuMTE5MyA0LjExOTI5IDE0IDUuNSAxNEM2Ljg4MDcxIDE0IDggMTUuMTE5MyA4IDE2LjVWMTguNUM4IDE5Ljg4MDcgNi44ODA3MSAyMSA1LjUgMjFaTTE4LjUgMjFDMTcuMTE5MyAyMSAxNiAxOS44ODA3IDE2IDE4LjVWMTYuNUMxNiAxNS4xMTkzIDE3LjExOTMgMTQgMTguNSAxNEMxOS44ODA3IDE0IDIxIDE1LjExOTMgMjEgMTYuNVYxOC41QzIxIDE5Ljg4MDcgMTkuODgwNyAyMSAxOC41IDIxWiIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+";

package/src/nile-icon/icons/svg/index.ts

@@ -7,6 +7,7 @@ export { default as agent } from './agent';
 export { default as agents } from './agents';
 export { default as aggregation } from './aggregation';
 export { default as alertcircle } from './alert-circle';
+export { default as alert } from './alert';
 export { default as allapplication } from './allapplication';
 export { default as allsearch } from './allsearch';
 export { default as anomaly } from './anomaly';
@@ -171,6 +172,7 @@ export { default as eye } from './eye';
 export { default as eyeclosed } from './eyeclosed';
 export { default as featuredicon } from './featured-icon';
 export { default as file06 } from './file-06';
+export { default as filecheck02 } from './file-check-02';
 export { default as fileshield01 } from './file-shield-01';
 export { default as fileshield02 } from './file-shield-02';
 export { default as filetypeicon } from './file-type-icon';
@@ -238,6 +240,7 @@ export { default as headerflows } from './header-flows';
 export { default as headerfunctions } from './header-functions';
 export { default as headertasks } from './header-tasks';
 export { default as headervariable } from './header-variable';
+export { default as headphones01 } from './headphones-01';
 export { default as help1 } from './help-1';
 export { default as helpcircle } from './help-circle';
 export { default as help } from './help';
@@ -262,6 +265,7 @@ export { default as intersection } from './intersection';
 export { default as itemplaceholder } from './itemplaceholder';
 export { default as js } from './js';
 export { default as keyperformanceindicator } from './key-performance-indicator';
+export { default as keyboard01 } from './keyboard-01';
 export { default as kill } from './kill';
 export { default as laptop01 } from './laptop-01';
 export { default as layersthree01 } from './layers-three-01';
@@ -300,6 +304,8 @@ export { default as maximize } from './maximize';
 export { default as menu } from './menu';
 export { default as messagenotificationsquare } from './message-notification-square';
 export { default as minus } from './minus';
+export { default as monitor01 } from './monitor-01';
+export { default as mouse } from './mouse';
 export { default as moveleft } from './moveleft';
 export { default as moveright } from './moveright';
 export { default as multipleuser } from './multiple-user';
@@ -356,6 +362,7 @@ export { default as predefined } from './predefined';
 export { default as prevup } from './prev-up';
 export { default as prev } from './prev';
 export { default as preview } from './preview';
+export { default as printer } from './printer';
 export { default as priorityhigh } from './priority-high';
 export { default as priorityhighest } from './priority-highest';
 export { default as prioritylow } from './priority-low';

package/src/nile-icon/icons/svg/keyboard-01.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNiAxMEg2LjAxTTggMTRIOC4wMU0xMCAxMEgxMC4wMU0xMiAxNEgxMi4wMU0xNCAxMEgxNC4wMU0xNiAxNEgxNi4wMU0xOCAxMEgxOC4wMU01LjIgMThIMTguOEMxOS45MjAxIDE4IDIwLjQ4MDIgMTggMjAuOTA4IDE3Ljc4MkMyMS4yODQzIDE3LjU5MDMgMjEuNTkwMyAxNy4yODQzIDIxLjc4MiAxNi45MDhDMjIgMTYuNDgwMiAyMiAxNS45MjAxIDIyIDE0LjhWOS4yQzIyIDguMDc5OSAyMiA3LjUxOTg0IDIxLjc4MiA3LjA5MjAyQzIxLjU5MDMgNi43MTU2OSAyMS4yODQzIDYuNDA5NzMgMjAuOTA4IDYuMjE3OTlDMjAuNDgwMiA2IDE5LjkyMDEgNiAxOC44IDZINS4yQzQuMDc5ODkgNiAzLjUxOTg0IDYgMy4wOTIwMiA2LjIxNzk5QzIuNzE1NjkgNi40MDk3MyAyLjQwOTczIDYuNzE1NjkgMi4yMTc5OSA3LjA5MjAyQzIgNy41MTk4NCAyIDguMDc5ODkgMiA5LjJWMTQuOEMyIDE1LjkyMDEgMiAxNi40ODAyIDIuMjE3OTkgMTYuOTA4QzIuNDA5NzMgMTcuMjg0MyAyLjcxNTY5IDE3LjU5MDMgMy4wOTIwMiAxNy43ODJDMy41MTk4NCAxOCA0LjA3OTkgMTggNS4yIDE4WiIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+";

package/src/nile-icon/icons/svg/monitor-01.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOCAyMUgxNk0xMiAxN1YyMU02LjggMTdIMTcuMkMxOC44ODAyIDE3IDE5LjcyMDIgMTcgMjAuMzYyIDE2LjY3M0MyMC45MjY1IDE2LjM4NTQgMjEuMzg1NCAxNS45MjY1IDIxLjY3MyAxNS4zNjJDMjIgMTQuNzIwMiAyMiAxMy44ODAyIDIyIDEyLjJWNy44QzIyIDYuMTE5ODQgMjIgNS4yNzk3NiAyMS42NzMgNC42MzgwM0MyMS4zODU0IDQuMDczNTQgMjAuOTI2NSAzLjYxNDYgMjAuMzYyIDMuMzI2OThDMTkuNzIwMiAzIDE4Ljg4MDIgMyAxNy4yIDNINi44QzUuMTE5ODQgMyA0LjI3OTc2IDMgMy42MzgwMyAzLjMyNjk4QzMuMDczNTQgMy42MTQ2IDIuNjE0NiA0LjA3MzU0IDIuMzI2OTggNC42MzgwM0MyIDUuMjc5NzYgMiA2LjExOTg0IDIgNy44VjEyLjJDMiAxMy44ODAyIDIgMTQuNzIwMiAyLjMyNjk4IDE1LjM2MkMyLjYxNDYgMTUuOTI2NSAzLjA3MzU0IDE2LjM4NTQgMy42MzgwMyAxNi42NzNDNC4yNzk3NiAxNyA1LjExOTg0IDE3IDYuOCAxN1oiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==";

package/src/nile-icon/icons/svg/mouse.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIgOVY2TTEyIDIyQzguMTM0MDEgMjIgNSAxOC44NjYgNSAxNVY5QzUgNS4xMzQwMSA4LjEzNDAxIDIgMTIgMkMxNS44NjYgMiAxOSA1LjEzNDAxIDE5IDlWMTVDMTkgMTguODY2IDE1Ljg2NiAyMiAxMiAyMloiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==";

package/src/nile-icon/icons/svg/printer.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTggN1Y1LjJDMTggNC4wNzk5IDE4IDMuNTE5ODQgMTcuNzgyIDMuMDkyMDJDMTcuNTkwMyAyLjcxNTY5IDE3LjI4NDMgMi40MDk3MyAxNi45MDggMi4yMTc5OUMxNi40ODAyIDIgMTUuOTIwMSAyIDE0LjggMkg5LjJDOC4wNzk5IDIgNy41MTk4NCAyIDcuMDkyMDIgMi4yMTc5OUM2LjcxNTY5IDIuNDA5NzMgNi40MDk3MyAyLjcxNTY5IDYuMjE3OTkgMy4wOTIwMkM2IDMuNTE5ODQgNiA0LjA3OTkgNiA1LjJWN002IDE4QzUuMDcwMDMgMTggNC42MDUwNCAxOCA0LjIyMzU0IDE3Ljg5NzhDMy4xODgyNyAxNy42MjA0IDIuMzc5NjIgMTYuODExNyAyLjEwMjIyIDE1Ljc3NjVDMiAxNS4zOTUgMiAxNC45MyAyIDE0VjExLjhDMiAxMC4xMTk4IDIgOS4yNzk3NiAyLjMyNjk4IDguNjM4MDNDMi42MTQ2IDguMDczNTQgMy4wNzM1NCA3LjYxNDYgMy42MzgwMyA3LjMyNjk4QzQuMjc5NzYgNyA1LjExOTg0IDcgNi44IDdIMTcuMkMxOC44ODAyIDcgMTkuNzIwMiA3IDIwLjM2MiA3LjMyNjk4QzIwLjkyNjUgNy42MTQ2IDIxLjM4NTQgOC4wNzM1NCAyMS42NzMgOC42MzgwM0MyMiA5LjI3OTc2IDIyIDEwLjExOTggMjIgMTEuOFYxNEMyMiAxNC45MyAyMiAxNS4zOTUgMjEuODk3OCAxNS43NzY1QzIxLjYyMDQgMTYuODExNyAyMC44MTE3IDE3LjYyMDQgMTkuNzc2NSAxNy44OTc4QzE5LjM5NSAxOCAxOC45MyAxOCAxOCAxOE0xNSAxMC41SDE4TTkuMiAyMkgxNC44QzE1LjkyMDEgMjIgMTYuNDgwMiAyMiAxNi45MDggMjEuNzgyQzE3LjI4NDMgMjEuNTkwMyAxNy41OTAzIDIxLjI4NDMgMTcuNzgyIDIwLjkwOEMxOCAyMC40ODAyIDE4IDE5LjkyMDEgMTggMTguOFYxNy4yQzE4IDE2LjA3OTkgMTggMTUuNTE5OCAxNy43ODIgMTUuMDkyQzE3LjU5MDMgMTQuNzE1NyAxNy4yODQzIDE0LjQwOTcgMTYuOTA4IDE0LjIxOEMxNi40ODAyIDE0IDE1LjkyMDEgMTQgMTQuOCAxNEg5LjJDOC4wNzk5IDE0IDcuNTE5ODQgMTQgNy4wOTIwMiAxNC4yMThDNi43MTU2OSAxNC40MDk3IDYuNDA5NzMgMTQuNzE1NyA2LjIxNzk5IDE1LjA5MkM2IDE1LjUxOTggNiAxNi4wNzk5IDYgMTcuMlYxOC44QzYgMTkuOTIwMSA2IDIwLjQ4MDIgNi4yMTc5OSAyMC45MDhDNi40MDk3MyAyMS4yODQzIDYuNzE1NjkgMjEuNTkwMyA3LjA5MjAyIDIxLjc4MkM3LjUxOTg0IDIyIDguMDc5ODkgMjIgOS4yIDIyWiIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+";

package/src/nile-icon/nile-icon.test.ts

@@ -0,0 +1,53 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import './index';
+import { NileIcon } from './index';
+import Sinon from 'sinon';
+
+describe('NileIcon', () => {
+  it('should render the icon with the correct name', async () => {
+    const el = await fixture<NileIcon>(html`<nile-icon name="info"></nile-icon>`);
+    expect(el.name).to.equal('info');
+    expect(el).to.equalSnapshot()
+  });
+
+  it('should render the icon with the correct size', async () => {
+    const el = await fixture<NileIcon>(html`<nile-icon size="24"></nile-icon>`);
+    expect(el.size).to.equal('24');
+    const svg = el.shadowRoot!.querySelector('svg');
+    expect(svg?.getAttribute('height')).to.equal('24');
+    expect(svg?.getAttribute('width')).to.equal('24');
+  });
+
+  it('should apply the correct color to the icon', async () => {
+    const el = await fixture<NileIcon>(html`<nile-icon color="red"></nile-icon>`);
+    await el.updateComplete
+    expect(el.color).to.equal('red');
+    expect(el.style.getPropertyValue('--nile-svg-fill')).to.equal('red');
+  });
+
+  it('should set the correct viewBox based on frame property', async () => {
+    const el = await fixture<NileIcon>(html`<nile-icon frame="32"></nile-icon>`);
+    const svg = el.shadowRoot!.querySelector('svg');
+    expect(svg?.getAttribute('viewBox')).to.equal('0 0 32 32');
+  });
+
+  it('should set aria attributes based on description', async () => {
+    const el = await fixture<NileIcon>(html`<nile-icon description="Test icon"></nile-icon>`);
+    const svg = el.shadowRoot!.querySelector('svg');
+    await el.updateComplete
+    expect(svg?.getAttribute('aria-label')).to.equal('Test icon');
+    expect(svg?.getAttribute('aria-hidden')).to.equal('false');
+  });
+
+  it('should apply stroke class based on method property', async () => {
+    const el = await fixture<NileIcon>(html`<nile-icon method="stroke"></nile-icon>`);
+    const svg = el.shadowRoot!.querySelector('svg');
+    expect(svg?.classList.contains('stroke')).to.be.true;
+  });
+
+  it('should apply push class when push property is true', async () => {
+    const el = await fixture<NileIcon>(html`<nile-icon push></nile-icon>`);
+    const svg = el.shadowRoot!.querySelector('svg');
+    expect(svg?.classList.contains('nds-icon--push')).to.be.true;
+  });
+});

package/src/nile-input/nile-input.test.ts

@@ -0,0 +1,160 @@
+import { fixture, html, expect, oneEvent, nextFrame, aTimeout } from '@open-wc/testing';
+import './nile-input';
+import { NileInput } from './nile-input';
+import Sinon from 'sinon';
+
+describe('nile-input', () => {
+  it('renders correctly', async () => {
+    const el = await fixture<NileInput>(html`<nile-input label="Test Label"></nile-input>`);
+    expect(el).shadowDom.to.equalSnapshot();
+  });
+
+  it('updates the value on input', async () => {
+    const el :any = await fixture<NileInput>(html`<nile-input></nile-input>`);
+    const input = el.shadowRoot?.querySelector('input') ?? {} as any;
+    input.value = 'New Value';
+    input.dispatchEvent(new Event('input'));
+    expect(el.value).to.equal('New Value');
+  });
+  
+
+  it('shows error message when invalid', async () => {
+    const el = await fixture<NileInput>(html`<nile-input required error-message='errr'></nile-input>`);
+    const errorMessage = el.shadowRoot?.querySelector('nile-form-error-message');
+    expect(errorMessage).to.exist;
+  });
+
+
+  it('should renders all slots correctly and verify its content', async () => {
+    const el = await fixture<NileInput>(html`
+      <nile-input>
+        <span slot="label">Slot Label</span>
+        <span slot="label-suffix">Slot Label suffix</span>
+        <span slot="prefix">prefix slot</span>
+        <span slot="suffix">suffix slot</span>
+        <span slot="clear-icon">
+          <nile-icon name="error" library="system"></nile-icon>
+        </span>
+        <span slot="show-password-icon">
+          <nile-icon
+            name="eye"
+            library="system"
+          ></nile-icon>
+        </span>
+      </nile-input>
+    `);
+    const labelSlot = el.shadowRoot?.querySelector('slot[name="label"]') ?? {} as any;
+    const labelSuffixSlot = el.shadowRoot?.querySelector('slot[name="label-suffix"]') ?? {} as any;
+    const prefixSlot = el.shadowRoot?.querySelector('slot[name="prefix"]') ?? {} as any;
+    const suffixSlot = el.shadowRoot?.querySelector('slot[name="suffix"]') ?? {} as any;
+    const clearIconSlot = el.shadowRoot?.querySelector('slot[name="clear-icon"]') ?? {} as HTMLElement;
+    const showPasswordSlot = el.shadowRoot?.querySelector('slot[name="show-password-icon"]') ?? {} as HTMLElement;
+    expect(labelSlot.assignedNodes()[0].textContent).to.equal('Slot Label');
+    expect(labelSuffixSlot.assignedNodes()[0].textContent).to.equal('Slot Label suffix');
+    expect(prefixSlot.assignedNodes()[0].textContent).to.equal('prefix slot');
+    expect(suffixSlot.assignedNodes()[0].textContent).to.equal('suffix slot');
+    expect(clearIconSlot).to.exist;
+    expect(showPasswordSlot).to.exist;
+  });
+
+  it('handles password toggle', async () => {
+    const el = await fixture<NileInput>(html`<nile-input type="password" password-toggle></nile-input>`);
+    const button = el.shadowRoot?.querySelector('.input__password-toggle') ?? {} as any;
+    button.click();
+    await el.updateComplete;
+    expect(el.passwordVisible).to.be.true;
+    expect(el.shadowRoot!.querySelector('input')!.type).to.equal('text');
+  });
+
+  it('validates input against pattern', async () => {
+    const el = await fixture<NileInput>(html`<nile-input pattern="^[a-zA-Z]+$"></nile-input>`);
+    el.value = '123';
+    el.reportValidity();
+    await el.updateComplete;
+    expect(el.validationMessage).to.equal('Please match the format requested.');
+  });
+
+  it('should emit events on blur', async () => {
+    const el = await fixture<NileInput>(html`<nile-input></nile-input>`);
+    const input = el.shadowRoot!.querySelector('input')!;
+    setTimeout(() => input.dispatchEvent(new Event('blur')));
+    const event = await oneEvent(el, 'nile-blur');
+    expect(event).to.exist;
+  });
+
+  it('should clear input when clear button is clicked', async () => {
+    const el = await fixture<NileInput>(html`<nile-input clearable value="test"></nile-input>`);
+    const button = el.shadowRoot!.querySelector('.input__clear') as HTMLElement;
+    button.click();
+    expect(el.value).to.equal('');
+  });
+
+  it('should mark non-printable characters on focus', async () => {
+    const el: NileInput = await fixture(html`<nile-input checkNonPrintableChar value="test日本語組版処理の要件"></nile-input>`);
+    const input = el.shadowRoot!.querySelector('input')!;
+    input.focus();
+    await el.updateComplete;
+    expect(el.hasPrintableCharacters).to.be.true;
+  });
+
+  it('should remove non-printable characters', async () => {
+    const el: NileInput = await fixture(html`<nile-input checkNonPrintableChar value="test日本語組版処理の要件"></nile-input>`);
+    const input = el.shadowRoot!.querySelector('input')!;
+    input.focus();
+    await el.updateComplete;
+    expect(el.hasPrintableCharacters).to.be.true;
+    const rem : HTMLElement=el.shadowRoot!.querySelector('.input__remove-non-printable')!;
+    rem.click()
+    await el.updateComplete;
+    expect(el.value).to.equal('test');
+  });
+
+  it('should toggle password visibility', async () => {
+    const el: NileInput = await fixture(html`<nile-input type="password" password-toggle></nile-input>`);
+    const button = el.shadowRoot!.querySelector('.input__password-toggle') as HTMLElement;
+    button.click();
+    expect(el.passwordVisible).to.be.true;
+  });
+
+  // it('should call the formControlController.submit() on Enter key', async () => {
+  //   const el: NileInput = await fixture(html`<nile-input></nile-input>`);
+  //   const input = el.shadowRoot!.querySelector('input')!;
+  //   const submitStub = Sinon.stub(el['formControlController'], 'submit');
+  //   const event = new KeyboardEvent('keydown', { key: 'Enter' });
+  //   input.dispatchEvent(event);
+  //   await el.updateComplete;
+  //   expect(submitStub).to.have.been.calledOnce;
+  // });
+
+  // complex regress scenarios
+  it('should debounce input events', async () => {
+    const el: NileInput = await fixture(html`<nile-input debounce="500"></nile-input>`);
+    const input = el.shadowRoot!.querySelector('input')!;
+    const changeEvent = new Event('input', { bubbles: true, composed: true });
+
+    input.value = 'a';
+    input.dispatchEvent(changeEvent);
+    input.value = 'ab';
+    input.dispatchEvent(changeEvent);
+
+    await aTimeout(100);
+    expect(el.value).to.equal('ab');
+    input.value = 'abc';
+    input.dispatchEvent(changeEvent);
+
+    await aTimeout(600);
+    expect(el.value).to.equal('abc');
+  });
+
+  it('should validate input against a regular expression pattern', async () => {
+    const el: NileInput = await fixture(html`<nile-input pattern="[A-Za-z]{3}"></nile-input>`);
+    const input = el.shadowRoot!.querySelector('input')!;
+    input.value = 'ab';
+    input.dispatchEvent(new Event('input'));
+    expect(el.validity.valid).to.be.false;
+
+    input.value = 'abc';
+    input.dispatchEvent(new Event('input'));
+    expect(el.validity.valid).to.be.true;
+  });
+})