@aquera/nile-elements 0.0.81 → 0.0.82

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

@@ -0,0 +1,81 @@
+import { html, fixture, expect, elementUpdated } from '@open-wc/testing';
+import './nile-radio';
+import { NileRadio } from './nile-radio';
+
+describe('NileRadio', () => {
+  it('should have the correct default properties', async () => {
+    const el = await fixture<NileRadio>(html`<nile-radio></nile-radio>`);
+    expect(el.checked).to.be.false;
+    expect(el.disabled).to.be.false;
+    expect(el.size).to.equal('medium');
+  });
+
+  it('should reflect the disabled attribute', async () => {
+    const el = await fixture<NileRadio>(html`<nile-radio disabled></nile-radio>`);
+    expect(el.disabled).to.be.true;
+    expect(el.hasAttribute('aria-disabled')).to.be.true;
+  });
+
+  it('should update aria-checked when checked changes', async () => {
+    const el = await fixture<NileRadio>(html`<nile-radio></nile-radio>`);
+    el.checked = true;
+    await el.updateComplete;
+    expect(el.getAttribute('aria-checked')).to.equal('true');
+  });
+
+  it('should toggle checked state on click when not disabled', async () => {
+    const el = await fixture<NileRadio>(html`<nile-radio></nile-radio>`);
+    el.click();
+    await elementUpdated(el);
+    expect(el.checked).to.be.true;
+  });
+
+  it('should not toggle checked state on click when disabled', async () => {
+    const el = await fixture<NileRadio>(html`<nile-radio disabled></nile-radio>`);
+    el.click();
+    await elementUpdated(el);
+    expect(el.checked).to.be.false;
+  });
+
+  it('should emit nile-blur event on blur', async () => {
+    const el = await fixture<NileRadio>(html`<nile-radio></nile-radio>`);
+    const blurEvent = new Promise(resolve => el.addEventListener('nile-blur', resolve));
+    el.dispatchEvent(new Event('blur'));
+    const event = await blurEvent;
+    expect(event).to.exist;
+  });
+
+  it('should emit nile-focus event on focus', async () => {
+    const el = await fixture<NileRadio>(html`<nile-radio></nile-radio>`);
+    const focusEvent = new Promise(resolve => el.addEventListener('nile-focus', resolve));
+    el.dispatchEvent(new Event('focus'));
+    const event = await focusEvent;
+    expect(event).to.exist;
+  });
+
+  it('should apply the correct classes based on state', async () => {
+    const el = await fixture<NileRadio>(html`<nile-radio></nile-radio>`);
+    el.checked = true;
+    el.disabled = true;
+    el.size = 'medium';
+    await el.updateComplete;
+    const base = el.shadowRoot!.querySelector('[part="base"]');
+    expect(base!.classList.contains('radio--checked')).to.be.true;
+    expect(base!.classList.contains('radio--disabled')).to.be.true;
+    expect(base!.classList.contains('radio--medium')).to.be.true;
+  });
+
+  it('should update aria-disabled when disabled changes', async () => {
+    const el = await fixture<NileRadio>(html`<nile-radio></nile-radio>`);
+    el.disabled = true;
+    await elementUpdated(el);
+    expect(el.getAttribute('aria-disabled')).to.equal('true');
+  });
+
+  it('should set initial attributes correctly', async () => {
+    const el = await fixture<NileRadio>(html`<nile-radio></nile-radio>`);
+    expect(el.getAttribute('role')).to.equal('radio');
+    expect(el.getAttribute('tabindex')).to.equal('-1');
+    expect(el.getAttribute('aria-disabled')).to.equal('false');
+  });
+});

package/src/nile-select/nile-select.ts

@@ -149,6 +149,8 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   @property({ type: Boolean, reflect: true }) searchEnabled = false;
 
+  @property({attribute:'internal-search-placeholder'}) internalSearchPlaceHolder = 'Search...';
+
   @property({ type: Boolean, reflect: true }) blockValueChange = false;
 
   @property({ type: Boolean, reflect: true }) disableLocalSearch = false;
@@ -1248,7 +1250,7 @@ export class NileSelect extends NileElement implements NileFormControl {
                       size="small"
                       clearable
                       .value=${this.searchValue}
-                      placeholder="Search..."
+                      placeholder="${this.internalSearchPlaceHolder}"
                       @nile-input=${this.handleSearchChange}
                       @nile-focus=${this.handleSearchFocus}
                       @nile-change="${this.onInputChange}"

package/src/nile-slide-toggle/nile-slide-toggle.test.ts

@@ -0,0 +1,61 @@
+import { fixture, expect } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import './nile-slide-toggle';
+import { NileSlideToggle } from './nile-slide-toggle';
+
+describe('NileSlideToggle', () => {
+    it('should default to unchecked', async () => {
+      const el: NileSlideToggle = await fixture(html`<nile-slide-toggle></nile-slide-toggle>`);
+      expect(el.isChecked).to.be.false;
+    });
+
+    it('should toggle isChecked property when clicked', async () => {
+        const el: NileSlideToggle = await fixture(html`<nile-slide-toggle></nile-slide-toggle>`);
+        const input = el.shadowRoot!.querySelector('input')!;
+        input.click();
+        expect(el.isChecked).to.be.true;
+        input.click();
+        expect(el.isChecked).to.be.false;
+    });
+
+    it('should display the label and sublabel', async () => {
+        const el: NileSlideToggle = await fixture(html`<nile-slide-toggle label="Test Label" sublabel="Test Sublabel"></nile-slide-toggle>`);
+        const label = el.shadowRoot!.querySelector('.nile-slide-toggle__label span')!;
+        const sublabel = el.shadowRoot!.querySelector('.nile-slide-toggle__sublabel')!;
+        expect(label.textContent).to.equal('Test Label');
+        expect(sublabel.textContent).to.equal('Test Sublabel');
+    });
+
+    it('should apply disabled class when disabled', async () => {
+        const el: NileSlideToggle = await fixture(html`<nile-slide-toggle disabled></nile-slide-toggle>`);
+        const toggleContainer = el.shadowRoot!.querySelector('.nile-slide-toggle')!;
+        expect(toggleContainer.classList.contains('nile-slide--disabled')).to.be.true;
+    });
+
+    it('should emit a change event with correct detail when toggled', async () => {
+        const el: NileSlideToggle = await fixture(html`<nile-slide-toggle></nile-slide-toggle>`);
+        let changeDetail = null;
+        el.addEventListener('change', (e: Event) => {
+          changeDetail = (e as CustomEvent).detail;
+        });
+        const input = el.shadowRoot!.querySelector('input')!;
+        input.click();
+        expect(changeDetail).to.deep.equal({ checked: true });
+        input.click();
+        expect(changeDetail).to.deep.equal({ checked: false });
+    });
+
+    it('should show help text when provided', async () => {
+        const el: NileSlideToggle = await fixture(html`<nile-slide-toggle help-text="Help text here"></nile-slide-toggle>`);
+        const helpText = el.shadowRoot!.querySelector('nile-form-help-text');
+        expect(helpText).to.exist;
+        expect(helpText?.textContent).to.equal('Help text here');
+    });
+
+    it('should show error message when provided', async () => {
+        const el: NileSlideToggle = await fixture(html`<nile-slide-toggle error-message="Error message here"></nile-slide-toggle>`);
+        const errorMessage = el.shadowRoot!.querySelector('nile-form-error-message');
+        expect(errorMessage).to.exist;
+        expect(errorMessage?.textContent).to.equal('Error message here');
+    });
+})

package/src/nile-tab-group/nile-tab-group.css.ts

@@ -114,11 +114,11 @@ export const styles = css`
     position: relative;
     flex-direction: row;
     border-bottom: solid var(--track-width)
-      var(--nile-colors-gray-light-mode-200);
+      var(--nile-colors-gray-light-mode-200,#eaecf0);
   }
 
   .tab-group--top .tab-group__indicator {
-    bottom: 2px;
+    bottom: -2px;
     border-bottom: 2px solid var(--nile-colors-primary-600);
   }
 

package/src/nile-tab-group/nile-tab-group.ts

@@ -319,6 +319,7 @@ export class NileTabGroup extends NileElement {
       { left: 0, top: 0 }
     );
 
+    if(this.indicator)
     switch (this.placement) {
       case 'top':
       case 'bottom':
@@ -365,7 +366,7 @@ export class NileTabGroup extends NileElement {
   syncIndicator() {
     const tab = this.getActiveTab();
 
-    if (tab) {
+    if (tab && this.indicator) {
       this.indicator.style.display = 'block';
       this.repositionIndicator();
     } else {

package/src/nile-table-header-item/nile-table-header-item.css.ts

@@ -34,10 +34,6 @@ export const styles = css`
     line-height: var(--nile-type-scale-5);
   }
 
-  slot {
-    cursor: pointer;
-  }
-
   nile-icon {
     cursor: pointer;
   }

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

@@ -0,0 +1,102 @@
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import './nile-textarea.js';
+import { NileTextarea } from './nile-textarea.js';
+
+describe('<nile-textarea>', () => {
+  it('should render the default properties correctly', async () => {
+    const el = await fixture<NileTextarea>(html`<nile-textarea></nile-textarea>`);
+    expect(el.value).to.equal('');
+    expect(el.size).to.equal('medium');
+    expect(el.filled).to.be.false;
+    expect(el.disabled).to.be.false;
+    expect(el.readonly).to.be.false;
+    expect(el.required).to.be.false;
+  });
+
+  it('should reflect properties to attributes', async () => {
+    const el = await fixture<NileTextarea>(html`<nile-textarea disabled readonly required></nile-textarea>`);
+    expect(el.getAttribute('disabled')).to.equal('');
+    expect(el.getAttribute('readonly')).to.equal('');
+    expect(el.getAttribute('required')).to.equal('');
+  });
+
+  it('should emit events correctly', async () => {
+    const el = await fixture<NileTextarea>(html`<nile-textarea></nile-textarea>`);
+    const input = el.shadowRoot?.querySelector('textarea') ?? {} as HTMLTextAreaElement;
+    
+    // Focus event
+    setTimeout(() => input.dispatchEvent(new Event('focus')));
+    const { detail: focusDetail } = await oneEvent(el, 'nile-focus');
+    expect(focusDetail.value).to.equal('');
+
+    // Input event
+    input.value = 'test';
+    setTimeout(() => input.dispatchEvent(new Event('input')));
+    const { detail: inputDetail } = await oneEvent(el, 'nile-input');
+    expect(inputDetail.value).to.equal('test');
+
+    // Change event
+    setTimeout(() => input.dispatchEvent(new Event('change')));
+    const { detail: changeDetail } = await oneEvent(el, 'nile-change');
+    expect(changeDetail.value).to.equal('test');
+
+    // Blur event
+    setTimeout(() => input.dispatchEvent(new Event('blur')));
+    const { detail: blurDetail } = await oneEvent(el, 'nile-blur');
+    expect(blurDetail.value).to.equal('test');
+  });
+
+  it('should update value property on input event', async () => {
+    const el = await fixture<NileTextarea>(html`<nile-textarea></nile-textarea>`);
+    const input = el.shadowRoot?.querySelector('textarea') ?? {} as HTMLTextAreaElement;
+
+    input.value = 'new value';
+    input.dispatchEvent(new Event('input'));
+    expect(el.value).to.equal('new value');
+  });
+
+  it('should handle the "rows" property correctly', async () => {
+    const el = await fixture<NileTextarea>(html`<nile-textarea rows="10"></nile-textarea>`);
+    const input = el.shadowRoot?.querySelector('textarea') ?? {} as HTMLTextAreaElement;
+    expect(input.rows).to.equal(10);
+  });
+
+  it('should handle the "resize" property correctly', async () => {
+    const el = await fixture<NileTextarea>(html`<nile-textarea resize="none"></nile-textarea>`);
+    const textarea = el.shadowRoot?.querySelector('.textarea') ?? {} as HTMLTextAreaElement;
+    expect(textarea.classList.contains('textarea--resize-none')).to.be.true;
+  });
+
+  it('should select all text when select() is called', async () => {
+    const el = await fixture<NileTextarea>(html`<nile-textarea value="test value"></nile-textarea>`);
+    el.select();
+    const input = el.shadowRoot?.querySelector('textarea') ?? {} as HTMLTextAreaElement;
+    expect(input.selectionStart).to.equal(0);
+    expect(input.selectionEnd).to.equal(el.value.length);
+  });
+
+  it('should set selection range correctly', async () => {
+    const el = await fixture<NileTextarea>(html`<nile-textarea value="test value"></nile-textarea>`);
+    el.setSelectionRange(0, 4);
+    const input = el.shadowRoot?.querySelector('textarea') ?? {} as HTMLTextAreaElement;
+    expect(input.selectionStart).to.equal(0);
+    expect(input.selectionEnd).to.equal(4);
+  });
+
+  it('should handle non-printable characters', async () => {
+    const el = await fixture<NileTextarea>(html`<nile-textarea checkNonPrintableChar></nile-textarea>`);
+    el.value = 'test乇乂丅尺卂'; // 乇乂丅尺卂 is a non-printable character
+    el.handleValueChange();
+    await el.updateComplete;
+    expect(el.hasPrintableCharacters).to.be.true;
+    const hasInvalidStr=String('乇乂丅尺卂').split('').some(ch=>el.markedValue.indexOf(ch)!=-1)
+    expect(hasInvalidStr).to.be.true
+  });
+
+  it('should remove non-printable characters correctly', async () => {
+    const el = await fixture<NileTextarea>(html`<nile-textarea></nile-textarea>`);
+    el.value = 'test乇乂丅尺卂'; // 乇乂丅尺卂 is a non-printable character
+    el.removeAllNonPrintableCharacters();
+    expect(el.value).to.equal('test');
+  });
+});

package/src/nile-tree/index.ts

@@ -0,0 +1 @@
+export { NileTree } from './nile-tree';

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

@@ -0,0 +1,50 @@
+/**
+* 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';
+
+/**
+ * Tree CSS
+ */
+export const styles = css`
+  :host {
+    box-sizing: border-box;
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  :host {
+    /*
+     * These are actually used by tree item, but we define them here so they can more easily be set and all tree items
+     * stay consistent.
+     */
+    --indent-guide-color: #F5F7F7;
+    --indent-guide-offset: 0;
+    --indent-guide-style: solid;
+    --indent-guide-width: 0;
+    --indent-size: 1.25rem;
+
+    display: block;
+    isolation: isolate;
+
+    /*
+     * Tree item indentation uses the "em" unit to increment its width on each level, so setting the font size to zero
+     * here removes the indentation for all the nodes on the first level.
+     */
+    font-size: 0;
+  }
+`;
+
+export default [styles];