@aquera/nile-elements 0.0.80 → 0.0.82

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

@@ -0,0 +1,174 @@
+// import { fixture, expect, html } from "@open-wc/testing"
+// import './nile-stepper';
+// import { NileStepper } from "./nile-stepper";
+// import { NileStepperItem } from "../nile-stepper-item";
+// import { NileVerticalStepperItem } from "../nile-vertical-stepper-item";
+// describe('NileStepper', () => {
+//     it('should have default properties in NileStepper', async () => {
+//         const stepper = await fixture<NileStepper>(html`<nile-stepper></nile-stepper>`);
+//         expect(stepper.isVertical).to.be.false;
+//         expect(stepper.contentBelow).to.be.false;
+//         expect(stepper.currentStep).to.equal(0);
+//         expect(stepper.completedStep).to.equal(0);
+//         expect(stepper.size).to.equal('md');
+//         expect(stepper.icon).to.equal('tick');
+//     });
+
+//     it('should reflect properties to attributes in NileStepper', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//         <nile-stepper vertical contentBelow current-step="1" completed-step="2" size="lg" icon="check"></nile-stepper>
+//     `);
+//         expect(stepper.getAttribute('vertical')).to.equal('');
+//         expect(stepper.getAttribute('contentBelow')).to.equal('');
+//         expect(stepper.getAttribute('current-step')).to.equal('1');
+//         expect(stepper.getAttribute('completed-step')).to.equal('2');
+//         expect(stepper.getAttribute('size')).to.equal('lg');
+//         expect(stepper.getAttribute('icon')).to.equal('check');
+//     });
+
+//     it('should render vertical stepper correctly', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//         <nile-stepper vertical>
+//             <nile-vertical-stepper-item></nile-vertical-stepper-item>
+//             <nile-vertical-stepper-item></nile-vertical-stepper-item>
+//         </nile-stepper>
+//         `);
+//         const container = stepper.shadowRoot!.querySelector('.nile-stepper')!;
+//         expect(container.classList.contains('nile-stepper--vertical')).to.be.true;
+//     });
+
+//     it('should update NileStepperItems when NileStepper properties change', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//         <nile-stepper>
+//         <nile-stepper-item></nile-stepper-item>
+//         <nile-stepper-item></nile-stepper-item>
+//         <nile-stepper-item></nile-stepper-item>
+//         </nile-stepper>
+//     `);
+//         stepper.currentStep = 2;
+//         stepper.completedStep = 3;
+//         await stepper.updateComplete;
+//         const items = stepper.querySelectorAll('nile-stepper-item');
+//         expect(items[0].isComplete).to.be.true;
+//         expect(items[1].isCurrent).to.be.true;
+//         expect(items[2].isComplete).to.be.true;
+//     });
+
+//     it('should render stepper with content below items correctly', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//         <nile-stepper content-below>
+//         <nile-stepper-item title="Step 1" subtitle="Subtitle 1"></nile-stepper-item>
+//         <nile-stepper-item title="Step 2" subtitle="Subtitle 2"></nile-stepper-item>
+//         </nile-stepper>
+//     `);
+//         const items = stepper.querySelectorAll('nile-stepper-item');
+//         expect(items[0].contentBelow).to.be.true;
+//         expect(items[1].contentBelow).to.be.true;
+//     });
+
+//     // CUSTOM ICONS NOT SUPPORTED YET IGNORE TEST CASE
+//     // it('should render stepper items with correct icons', async () => {
+//     //     const stepper = await fixture<NileStepper>(html`
+//     //     <nile-stepper icon="star">
+//     //     <nile-stepper-item></nile-stepper-item>
+//     //     <nile-stepper-item></nile-stepper-item>
+//     //     </nile-stepper>
+//     // `);
+//     //     const items = stepper.querySelectorAll('nile-stepper-item');
+//     //     expect(items[0].icon).to.equal('star');
+//     //     expect(items[1].icon).to.equal('star');
+//     // });
+
+//     it('should emit events when currentStep changes', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//         <nile-stepper current-step="1" completed-step="4">
+//             <nile-stepper-item></nile-stepper-item>
+//             <nile-stepper-item></nile-stepper-item>
+//             <nile-stepper-item></nile-stepper-item>
+//             <nile-stepper-item></nile-stepper-item>
+//         </nile-stepper>
+//     `);
+//         const items = stepper.querySelectorAll('nile-stepper-item');
+//         let currentChangeEvent: CustomEvent | null = null;
+//         stepper.addEventListener('nile-current-change', (event) => {
+//             currentChangeEvent = event as CustomEvent;
+//         });
+//         stepper.currentStep = 2;
+//         await stepper.updateComplete;
+//         expect(currentChangeEvent).to.exist;
+//         expect(currentChangeEvent!.detail.value).to.equal(2);
+//         expect(items[1].isCurrent).to.equal(true);
+//         expect(items[0].isComplete).to.equal(true);
+//     });
+
+//     it('should emit events when completedStep changes', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//         <nile-stepper completed-step="1"></nile-stepper>
+//     `);
+//         let completedChangeEvent: CustomEvent | null = null;
+//         stepper.addEventListener('nile-completed-change', (event) => {
+//             completedChangeEvent = event as CustomEvent;
+//         });
+//         stepper.completedStep = 2;
+//         await stepper.updateComplete;
+//         expect(completedChangeEvent).to.exist;
+//         expect(completedChangeEvent!.detail.value).to.equal(2);
+//     });
+
+//     it('should render slot content inside stepper', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//         <nile-stepper current-step="2">
+//         <nile-stepper-item title="Step 1"></nile-stepper-item>
+//         <nile-stepper-item title="Step 2"></nile-stepper-item>
+//         </nile-stepper>
+//     `);
+//         const items = stepper.querySelectorAll('nile-stepper-item');
+//         expect(items.length).to.equal(2);
+//         expect(items[0].title).to.equal('Step 1');
+//         expect(items[1].title).to.equal('Step 2');
+//         expect(items[1].isCurrent).to.equal(true);
+//     });
+// })
+
+// describe('NileVerticalStepperItem', () => {
+//     it('should render vertical stepper correctly', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//         <nile-stepper vertical>
+//         <nile-stepper-item></nile-stepper-item>
+//         <nile-stepper-item></nile-stepper-item>
+//         </nile-stepper>
+//     `);
+//         const container = stepper.shadowRoot!.querySelector('.nile-stepper')!;
+//         expect(container.classList.contains('nile-stepper--vertical')).to.be.true;
+//     });
+
+//     it('should update NileVerticalStepperItems when NileStepper properties change', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//           <nile-stepper vertical>
+//             <nile-vertical-stepper-item></nile-vertical-stepper-item>
+//             <nile-vertical-stepper-item></nile-vertical-stepper-item>
+//             <nile-vertical-stepper-item></nile-vertical-stepper-item>
+//           </nile-stepper>
+//         `);
+//         stepper.currentStep = 2;
+//         stepper.completedStep = 3;
+//         await stepper.updateComplete;
+//         const items = stepper.querySelectorAll('nile-vertical-stepper-item');
+//         expect(items[0].isComplete).to.be.true;
+//         expect(items[1].isCurrent).to.be.true;
+//         expect(items[2].isComplete).to.be.true;
+//     });
+
+//     it('should render slot content inside vertical stepper', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//           <nile-stepper vertical>
+//             <nile-vertical-stepper-item title="Step 1"></nile-vertical-stepper-item>
+//             <nile-vertical-stepper-item title="Step 2"></nile-vertical-stepper-item>
+//           </nile-stepper>
+//         `);
+//         const items = stepper.querySelectorAll('nile-vertical-stepper-item');
+//         expect(items.length).to.equal(2);
+//         expect(items[0].title).to.equal('Step 1');
+//         expect(items[1].title).to.equal('Step 2');
+//     });
+// })

package/src/nile-stepper/nile-stepper.ts

@@ -115,7 +115,7 @@ export class NileStepper extends NileElement {
 				'nile-stepper':true,
 				'nile-stepper--horizontal':!this.isVertical,
 				'nile-stepper--vertical':this.isVertical
-			})}> 
+			})}>
 				<slot
 					@slotchange=${this.updateItems}
 				></slot>
@@ -132,4 +132,4 @@ declare global {
 	interface HTMLElementTagNameMap {
 		'nile-stepper': NileStepper;
 	}
-}
+}

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];