@aquera/nile-elements 0.0.81 → 0.0.84

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

@@ -0,0 +1,83 @@
+import { fixture, expect, oneEvent, aTimeout } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import './nile-link';
+import { NileLink } from './nile-link';
+describe('NileLink', () => {
+    it('should render correctly', async () => {
+        const el: NileLink = await fixture(html`<nile-link></nile-link>`);
+        expect(el.shadowRoot).to.exist;
+        expect(el.shadowRoot!.querySelector('.link')).to.exist;
+    });
+
+    it('should handle the disabled attribute', async () => {
+        const el: NileLink = await fixture(html`<nile-link disabled></nile-link>`);
+        const link = el.shadowRoot!.querySelector('.link')!;
+        expect(el.disabled).to.be.true;
+        expect(link.getAttribute('aria-disabled')).to.equal('true');
+        expect(link.getAttribute('tabindex')).to.equal('-1');
+    });
+
+    it('should emit custom events on focus and blur', async () => {
+        const el: NileLink = await fixture(html`<nile-link></nile-link>`);
+        setTimeout(() => el.shadowRoot!.querySelector<HTMLElement>('.link')!.focus());
+        const focusEvent = await oneEvent(el, 'nile-focus');
+        expect(focusEvent).to.exist;
+
+        setTimeout(() => el.shadowRoot!.querySelector<HTMLElement>('.link')!.blur());
+        const blurEvent = await oneEvent(el, 'nile-blur');
+        expect(blurEvent).to.exist;
+    });
+
+    it('should prevent click events when disabled', async () => {
+        const el: NileLink = await fixture(html`<nile-link disabled></nile-link>`);
+        let clicked = false;
+        el.addEventListener('click', () => {
+            clicked = true;
+        });
+
+        el.shadowRoot!.querySelector<HTMLElement>('.link')!.click();
+        await aTimeout(100);
+        expect(clicked).to.be.false;
+    });
+
+    it('should handle button property correctly', async () => {
+        const el: NileLink = await fixture(html`<nile-link button></nile-link>`);
+        const link = el.shadowRoot!.querySelector('.link')!;
+        expect(link.classList.contains('link__button')).to.be.true;
+    });
+
+    it('should have all slots rendered successfully', async () => {
+        const el: NileLink = await fixture(html`<nile-link><span slot="prefix">Prefix</span><span>Label</span><span slot="suffix">Suffix</span></nile-link>`);
+        const prefixSlot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name="prefix"]')!;
+        const labelSlot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot:not([name])')!;
+        const suffixSlot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name="suffix"]')!;
+        expect(prefixSlot.assignedNodes().length).to.equal(1);
+        expect(labelSlot.assignedNodes().length).to.equal(1);
+        expect(suffixSlot.assignedNodes().length).to.equal(1);
+    });
+
+
+    it('should emit nile-init and nile-destroy events on connected and disconnected', async () => {
+        const el: NileLink = document.createElement('nile-link');
+        let initEvent:any, destroyEvent:any;
+        el.addEventListener('nile-init',(e)=>initEvent=e)
+        el.addEventListener('nile-init',(e)=>destroyEvent=e)
+        document.body.appendChild(el);
+        await el.updateComplete
+        expect(initEvent).to.exist;
+        document.body.removeChild(el);
+        await el.updateComplete
+        expect(destroyEvent).to.exist;
+    });
+
+    it('should reflect properties correctly', async () => {
+        const el: NileLink = await fixture(html`<nile-link></nile-link>`);
+        el.disabled = true;
+        await el.updateComplete;
+        expect(el.hasAttribute('disabled')).to.be.true;
+    
+        el.disabled = false;
+        await el.updateComplete;
+        expect(el.hasAttribute('disabled')).to.be.false;
+    });
+})

package/src/nile-list/index.ts

@@ -0,0 +1 @@
+export { NileList } from './nile-list';

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

@@ -0,0 +1,22 @@
+/**
+ * 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 { css } from 'lit-element';
+
+/**
+ * List CSS
+ */
+export const styles = css`
+  :host {
+    display: flex;
+    flex-direction: column;
+    gap: 9px;
+    padding: 16px;
+  }
+`;
+
+export default [styles];

package/src/nile-list/nile-list.ts

@@ -0,0 +1,64 @@
+/**
+ * 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-list.css';
+import NileElement from '../internal/nile-element';
+
+/**
+ * Nile list component.
+ *
+ * @tag nile-list
+ *
+ */
+@customElement('nile-list')
+export class NileList extends NileElement {
+  /**
+   * The styles for nile-list
+   * @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];
+  }
+
+  /* #endregion */
+
+  /* #region Methods */
+
+  /**
+   * Render method
+   * @slot This is a slot test
+   */
+
+  handleListItemClick(e: any) {
+    const listTextValue = e.target.innerText;
+    this.emit('nile-list-click', { value: listTextValue });
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <slot @nile-list-item-click="${this.handleListItemClick}"> </slot>
+    `;
+  }
+
+  /* #endregion */
+}
+
+export default NileList;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-list': NileList;
+  }
+}

package/src/nile-list-item/index.ts

@@ -0,0 +1 @@
+export { NileListItem } from './nile-list-item';

package/src/nile-list-item/nile-list-item.css.ts

@@ -0,0 +1,68 @@
+/**
+ * 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 { css } from 'lit-element';
+
+/**
+ * ListItem CSS
+ */
+export const styles = css`
+  :host {
+    display: flex;
+    padding: 12px 16px;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: start;
+    position: relative;
+    height: 100%;
+  }
+
+  :host(:hover) {
+    background-color: #f0f0f0; /* Change background color on hover */
+  }
+
+  .preffix__icon {
+    display: inline-block;
+    margin-right: 12px;
+  }
+
+  .list__item {
+    cursor: pointer;
+    height: 100%;
+    display: block;
+    font-size: 16px;
+  }
+
+  .content__wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    height: 100%;
+    box-sizing: border-box;
+  }
+
+  .heading {
+    display: inline-block;
+    font-size: 18px;
+    font-weight: 600;
+  }
+
+  .subheading {
+    display: inline-block;
+    font-size: 12px;
+    font-weight: 300;
+  }
+
+  .list-item__suffix {
+    display: inline-block;
+    position: absolute;
+    right: 16px;
+    cursor: pointer;
+  }
+`;
+
+export default [styles];

package/src/nile-list-item/nile-list-item.ts

@@ -0,0 +1,104 @@
+/**
+ * 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-list-item.css';
+import NileElement from '../internal/nile-element';
+import { HasSlotController } from '../internal/slot';
+
+/**
+ * Nile list-item component.
+ *
+ * @tag nile-list-item
+ *
+ */
+@customElement('nile-list-item')
+export class NileListItem extends NileElement {
+  /**
+   * The styles for nile-list-item
+   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+   */
+
+  private readonly hasSlotController = new HasSlotController(
+    this,
+    'preffix',
+    'heading',
+    'subheading'
+  );
+
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+  @property({ type: String, attribute: 'icon-name' }) iconName = '';
+  @property({ type: Number, attribute: 'icon-size' }) iconSize = 14;
+
+  @property({ type: String, attribute: 'heading' }) heading = '';
+  @property({ type: String, attribute: 'sub-heading' }) subHeading = '';
+  
+  /* #endregion */
+
+  /* #region Methods */
+
+  /**
+   * Render method
+   * @slot This is a slot test
+   */
+  handleClick(e: any) {
+    this.emit('nile-list-item-click', {
+      heading: this.heading,
+      subheading: this.subHeading,
+    });
+  }
+
+  public render(): TemplateResult {
+    return html`
+      ${this.iconName || this.hasSlotController.test('preffix')
+        ? html` <slot name="preffix" part="preffix" class="preffix__icon">
+            <nile-icon
+              name="${this.iconName}"
+              size="${this.iconSize}"
+            ></nile-icon>
+          </slot>`
+        : ``}
+
+      <div class="content__wrapper" part="content__wrapper">
+        ${this.heading || this.hasSlotController.test('heading')
+          ? html` <slot class="heading" part="heading" name="heading"
+              >${this.heading}</slot
+            >`
+          : ``}
+        ${this.subHeading || this.hasSlotController.test('subheading')
+          ? html` <slot class="subheading" part="subheading" name="subheading"
+              >${this.subHeading}</slot
+            >`
+          : `
+          `}
+      </div>
+
+      <slot @click="${this.handleClick}" class="list__item" part="base"> </slot>
+      <slot name="suffix" part="suffix" class="list-item__suffix">
+      </slot>
+    `;
+  }
+
+  /* #endregion */
+}
+
+export default NileListItem;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-list-item': NileListItem;
+  }
+}

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

@@ -0,0 +1,45 @@
+import { fixture, expect } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import './nile-loader';
+import { NileLoader } from './nile-loader';
+
+describe('NileLoader', () => {
+  it('should default to size "lg" if no size is provided', async () => {
+    const el: NileLoader = await fixture(html`<nile-loader></nile-loader>`);
+    expect(el.size).to.equal('lg');
+  });
+
+  it('should apply size classes correctly', async () => {
+    const sizes:Array<'sm'|'md'|'lg'>=['sm','md','lg']
+    await sizes.forEach(async size=>{
+        const el: NileLoader = await fixture(html`<nile-loader size="${size}"></nile-loader>`);
+        const loaderContainer = el.shadowRoot!.querySelector('.loader__container')!;
+        expect(loaderContainer.classList.contains(`loader__container--${size}`)).to.be.true;
+    })
+  });
+
+  it('should have a default variant of "v1"', async () => {
+    const el: NileLoader = await fixture(html`<nile-loader></nile-loader>`);
+    const variantV1 = el.shadowRoot!.querySelector('.nile-loader__v1');
+    expect(variantV1).to.exist;
+  });
+
+  it('should render the correct variant', async () => {
+    const el: NileLoader = await fixture(html`<nile-loader variant="v2"></nile-loader>`);
+    const variantV2 = el.shadowRoot!.querySelector('.nile-loader__v2');
+    expect(variantV2).to.exist;
+  });
+
+  it('should display label if provided', async () => {
+    const el: NileLoader = await fixture(html`<nile-loader label="Loading..."></nile-loader>`);
+    const label = el.shadowRoot!.querySelector('.loader__label');
+    expect(label).to.exist;
+    expect(label?.textContent).to.equal('Loading...');
+  });
+
+  it('should handle margin property', async () => {
+    const el: NileLoader = await fixture(html`<nile-loader margin="10px"></nile-loader>`);
+    const loaderDiv = el.shadowRoot!.querySelector('.nile-loader__v1');
+    expect(loaderDiv?.getAttribute('style')).to.contain('margin: 10px');
+  });
+})

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

@@ -17,14 +17,28 @@ export const styles = css`
     background: hsl(0, 0%, 100%);
     border: solid 1px hsl(240 5.9% 90%);
     border-radius: 6px;
-    overflow: auto;
-    overscroll-behavior: none;
-    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
+    overflow: hidden;
+    height: 100%;
+    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),
+      0px 8px 8px -4px rgba(16, 24, 40, 0.03);
+    /* overscroll-behavior: none; */
+    /* -ms-overflow-style: none; */
+    /* scrollbar-width: none; */
   }
-  
+
   .search__wrapper {
-    box-sizing:border-box;
+    box-sizing: border-box;
     padding: 12px 6px;
+    position: sticky;
+    z-index: 999;
+    top: 0px;
+    background: hsl(0, 0%, 100%);
+    height: 64px;
+  }
+
+  .menu__items-wrapper {
+    overflow: auto;
+    max-height: calc(100vh - 64px);
   }
 
   ::slotted(nile-divider) {

package/src/nile-menu/nile-menu.ts

@@ -26,6 +26,8 @@ export class NileMenu extends NileElement {
   @state() searchWidth: number = 0;
 
   @property({ type: Boolean, reflect: true }) searchEnabled = false;
+  @property({ type: Boolean, reflect: true }) customSearch = false;
+
   @property({ type: Boolean }) showNoResults: boolean = false;
 
   @property({ type: String }) noResultsMessage: string = 'No results found';
@@ -166,6 +168,12 @@ export class NileMenu extends NileElement {
 
   private handleSearchChange(e: any) {
     let items = this.getAllItems();
+    let searchValue = e.target.value;
+    if (this.customSearch) {
+      this.emit('nile-search-value', { value: searchValue });
+      return;
+    }
+
     let counter = 0;
     items.map(curr_item => {
       this.searchWidth = Math.max(this.searchWidth, curr_item.offsetWidth);
@@ -183,34 +191,37 @@ export class NileMenu extends NileElement {
 
   render() {
     return html`
-      <div>
-        ${this.searchEnabled
-          ? html`<div class="search__wrapper" part="search__wrapper">
-              <nile-input
-                size="medium"
-                style=${this.searchWidth
-                  ? `width: ${this.searchWidth}px;`
-                  : 'width: 100%;'}
-                .value=${this.searchValue}
-                placeholder="Search..."
-                @nile-input=${this.handleSearchChange}
-                part="menu__input"
-              >
-                <nile-icon name="search" slot="suffix"> </nile-icon>
-              </nile-input>
-            </div>`
-          : html``}
+      ${this.searchEnabled
+        ? html`<div class="search__wrapper" part="search__wrapper">
+            <nile-input
+              size="medium"
+              style=${this.searchWidth
+                ? `width: ${this.searchWidth}px;`
+                : 'width: 100%;'}
+              .value=${this.searchValue}
+              placeholder="Search..."
+              @nile-input=${this.handleSearchChange}
+              part="menu__input"
+              clearable
+            >
+              <nile-icon name="search" slot="suffix"> </nile-icon>
+            </nile-input>
+          </div>`
+        : html``}
+      <div part="menu__items-wrapper" class="menu__items-wrapper">
         ${this.showNoResults
           ? html` <nile-menu-item>${this.noResultsMessage}</nile-menu-item> `
           : ''}
 
         <slot
           name="menu__header"
+          part="menu__header"
           @click=${(e: Event) => {
             e.stopPropagation();
           }}
         ></slot>
         <slot
+          class="menu__item-wrapper"
           @slotchange=${this.handleSlotChange}
           @click=${this.handleClick}
           @keydown=${this.handleKeyDown}

package/src/nile-menu-item/nile-menu-item.css.ts

@@ -27,7 +27,6 @@ export const styles = css`
 
   :host {
     display: block;
-    padding:1px 6px;
   }
 
   :host([inert]) {
@@ -61,6 +60,7 @@ export const styles = css`
     flex: 1 1 auto;
     margin: auto 0;
     display: inline-flex;
+    padding: 0 16px;
   }
 
   .menu-item .menu-item__prefix {

package/src/nile-menu-item/nile-menu-item.ts

@@ -160,20 +160,19 @@ export class NileMenuItem extends NileElement {
           'menu-item--has-submenu': this.hasSubMenu, // reserved for future use
         })}
       >
-        <span part="checked-icon" class="menu-item__check">
-          <nile-icon
-            name="tick"
-            library="system"
-            aria-hidden="true"
-          ></nile-icon>
-        </span>
-
-        <slot
-          name="prefix"
-          part="prefix"
-          class="menu-item__prefix"
-       
-        ></slot>
+        ${this.checked
+          ? html`
+              <span part="checked-icon" class="menu-item__check">
+                <nile-icon
+                  name="tick"
+                  library="system"
+                  aria-hidden="true"
+                ></nile-icon>
+              </span>
+            `
+          : ``}
+
+        <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
 
         <slot
           part="label"
@@ -183,13 +182,15 @@ export class NileMenuItem extends NileElement {
 
         <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
 
-        <span part="submenu-icon" class="menu-item__chevron">
-          <nile-icon
-            name="arrowright"
-            library="system"
-            aria-hidden="true"
-          ></nile-icon>
-        </span>
+        ${this.hasSubMenu
+          ? html` <span part="submenu-icon" class="menu-item__chevron">
+              <nile-icon
+                name="arrowright"
+                library="system"
+                aria-hidden="true"
+              ></nile-icon>
+            </span>`
+          : ``}
       </div>
     `;
   }

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

@@ -17,13 +17,12 @@ export const styles = css`
 
   .popover__title {
     display: block;
-    color: var(--Dark-Normal, var(--Color-Text-Default, #000));
-    font-feature-settings: 'clig' off, 'liga' off;
+    color: #000;
     font-family: var(--nile-font-family-serif);
     font-size: var(--nile-type-scale-4);
     font-style: normal;
     font-weight: 500;
-    line-height: var(--nile-type-scale-4); /* 100% */
+    line-height: var(--nile-type-scale-4);
     letter-spacing: 0.2px;
   }
 
@@ -35,7 +34,10 @@ export const styles = css`
     gap: var(--nile-type-scale-4);
     padding: var(--nile-type-scale-4);
     border-radius: var(--nile-radius-base-standard);
-    background-color:var(--nile-colors-white-base);
+    background-color: var(--nile-colors-white-base);
+    border: solid 1px hsl(240 5.9% 90%);
+    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),
+      0px 8px 8px -4px rgba(16, 24, 40, 0.03);
   }
 
   .popover__action {