@aquera/nile-elements 0.0.119 → 0.0.121

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

@@ -97,6 +97,8 @@ type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
 export class NileSelect extends NileElement implements NileFormControl {
   static styles: CSSResultGroup = styles;
 
+  protected override BUBBLES: boolean=false;
+
   // protected override BUBBLES=false;
 
   private readonly formControlController = new FormControlController(this, {
@@ -397,41 +399,6 @@ export class NileSelect extends NileElement implements NileFormControl {
       return;
     }
 
-    // Navigate options
-    if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
-      const allOptions = this.getAllOptions();
-      const currentIndex = allOptions.indexOf(this.currentOption);
-      let newIndex = Math.max(0, currentIndex);
-
-      // Prevent scrolling
-      event.preventDefault();
-
-      // Open it
-      if (!this.open) {
-        this.show();
-
-        // If an option is already selected, stop here because we want that one to remain highlighted when the listbox
-        // opens for the first time
-        if (this.currentOption) {
-          return;
-        }
-      }
-
-      if (event.key === 'ArrowDown') {
-        newIndex = currentIndex + 1;
-        if (newIndex > allOptions.length - 1) newIndex = 0;
-      } else if (event.key === 'ArrowUp') {
-        newIndex = currentIndex - 1;
-        if (newIndex < 0) newIndex = allOptions.length - 1;
-      } else if (event.key === 'Home') {
-        newIndex = 0;
-      } else if (event.key === 'End') {
-        newIndex = allOptions.length - 1;
-      }
-
-      this.setCurrentOption(allOptions[newIndex]);
-    }
-
     // All other "printable" keys trigger type to select
     if (event.key.length === 1 || event.key === 'Backspace') {
       const allOptions = this.getAllOptions();
@@ -1255,9 +1222,11 @@ export class NileSelect extends NileElement implements NileFormControl {
                       clearable
                       .value=${this.searchValue}
                       placeholder="${this.internalSearchPlaceHolder}"
-                      @nile-input=${this.handleSearchChange}
-                      @nile-focus=${this.handleSearchFocus}
-                      @nile-change="${this.onInputChange}"
+                      @nile-focus="${(e:CustomEvent)=>{this.handleSearchFocus();this.emit('nile-focus',e.detail)}}"
+                      @nile-blur="${(e:CustomEvent)=>{this.emit('nile-blur',e.detail)}}"
+                      @nile-change="${(e:CustomEvent)=>{this.onInputChange(e);this.emit('nile-change',e.detail)}}"
+                      @nile-input="${(e:CustomEvent)=>{this.handleSearchChange(e);this.emit('nile-input',e.detail)}}"
+                      @nile-clear=${(e:CustomEvent)=>this.emit('nile-clear',e.detail)}
                     >
                       <nile-icon name="search" slot="suffix"> </nile-icon>
                     </nile-input>

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

@@ -8,15 +8,17 @@ import { classMap } from 'lit/directives/class-map.js';
 export class NileSlideToggle extends NileElement {
   public static styles: CSSResultGroup = styles;
 
+  protected override BUBBLES: boolean=false;
+
   @property({ type: String }) label = '';
 
   @property({ type: String }) sublabel = '';
 
-  @property({ type: String, attribute:'text-position' }) textPosition:'left' | 'right' = 'right';
+  @property({ type: String, }) textPosition:'left' | 'right' = 'right';
 
   @property({ type: Boolean, reflect: true }) isChecked = false;
 
-  @property({ type: Boolean, reflect: true, attribute:'full-width' }) fullWidth = false;
+  @property({ type: Boolean, reflect: true }) fullWidth = false;
 
   @property({ type: Boolean, reflect: true }) disabled = false;
 

package/src/nile-split-panel/nile-split-panel.test.ts

@@ -0,0 +1,7 @@
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import './nile-split-panel'
+import NileSplitPanel from './nile-split-panel';
+
+describe('NileSplitPanel',()=>{
+	
+})

package/src/nile-split-panel/nile-split-panel.ts

@@ -43,6 +43,8 @@ export class NileSplitPanel extends NileElement {
 
 	static styles: CSSResultGroup = styles;
 
+  protected override BUBBLES: boolean=false;
+
   private cachedPositionInPixels: number;
   private resizeObserver: ResizeObserver;
   private size: number;

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

@@ -1,174 +1,12 @@
-// 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');
-//     });
-// })
+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";
+
+import "./nile-stepper";
+import "../nile-stepper-item/nile-stepper-item";
+import "../nile-vertical-stepper-item/nile-vertical-stepper-item";
+
+describe('NileStepper', () => {
+})

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

@@ -22,6 +22,8 @@ import { classMap } from 'lit/directives/class-map.js';
 @customElement('nile-stepper')
 export class NileStepper extends NileElement {
 
+  protected override BUBBLES: boolean=false;
+
 	@property({ type: Boolean, attribute: 'vertical' }) isVertical: boolean = false;
 	@property({ type: Boolean, attribute: 'content-below', reflect:true }) contentBelow: boolean = false;
 	@property({ type: Number, attribute: 'currentStep', reflect:true }) currentStep: number = 0;

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

@@ -38,6 +38,8 @@ let id = 0;
 export class NileTab extends NileElement {
   static styles: CSSResultGroup = styles;
 
+  protected override BUBBLES: boolean=false;
+
   private readonly attrId = ++id;
   private readonly componentId = `nile-tab-${this.attrId}`;
 

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

@@ -50,6 +50,8 @@ export class NileTabGroup extends NileElement {
 
   static styles: CSSResultGroup = styles;
 
+  protected override BUBBLES: boolean=false;
+
   private activeTab?: NileTab;
   private mutationObserver: MutationObserver;
   private resizeObserver: ResizeObserver;

package/src/nile-table-body/nile-table-body.ts

@@ -50,6 +50,8 @@ export class NileTableBody extends NileElement {
     return [styles];
   }
 
+  protected override BUBBLES: boolean=false;
+
   /* #endregion */
 
   /* #region Methods */

package/src/nile-tag/nile-tag.ts

@@ -45,6 +45,8 @@ import type { CSSResultGroup } from 'lit';
 export class NileTag extends NileElement {
   static styles: CSSResultGroup = styles;
 
+  protected override BUBBLES: boolean=false;
+
   /** The tag's theme variant. */
   @property({ reflect: true }) variant:
     | 'primary'

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

@@ -1,6 +1,6 @@
 import { expect, fixture, html, oneEvent } from '@open-wc/testing';
 import './nile-textarea.js';
-import { NileTextarea } from './nile-textarea.js';
+import { NileTextarea } from './nile-textarea';
 
 describe('<nile-textarea>', () => {
   it('should render the default properties correctly', async () => {

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

@@ -44,6 +44,8 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 export class NileTextarea extends NileElement  {
   static styles: CSSResultGroup = styles;
 
+  protected override BUBBLES: boolean=false;
+
   private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
   private resizeObserver: ResizeObserver;
 

package/src/nile-toast/nile-toast.ts

@@ -56,6 +56,8 @@ const toastStack = Object.assign(document.createElement('div'), {
 export class NileToast extends NileElement {
   static styles: CSSResultGroup = styles;
 
+  protected override BUBBLES: boolean=false;
+
   private autoHideTimeout: number;
   private readonly hasSlotController = new HasSlotController(
     this,

package/src/nile-tooltip/nile-tooltip.ts

@@ -38,6 +38,8 @@ export class NileTooltip extends NileElement {
     return [styles];
   }
 
+  protected override BUBBLES: boolean=false;
+
   private hoverTimeout: number;
   // private readonly localize = new LocalizeController(this);
 

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

@@ -0,0 +1,9 @@
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import NileTree from './nile-tree';
+import { NileTreeItem } from '../nile-tree-item';
+import '../nile-tree-item/nile-tree-item';
+import './nile-tree';
+
+describe("NileTree",()=>{
+	
+})

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

@@ -80,6 +80,8 @@ export class NileTree extends NileElement {
 
 	static styles: CSSResultGroup = styles;
 
+  protected override BUBBLES: boolean=false;
+
   @query('slot:not([name])') defaultSlot: HTMLSlotElement;
   @query('slot[name=expand-icon]') expandedIconSlot: HTMLSlotElement;
   @query('slot[name=collapse-icon]') collapsedIconSlot: HTMLSlotElement;

package/web-test-runner.config.mjs

@@ -29,7 +29,12 @@ export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
 
   /** Browsers to run tests on */
   browsers: [
-    puppeteerLauncher({ launchOptions: { headless: true } }),
+    puppeteerLauncher({
+      launchOptions: {
+        headless: true,
+        args: ['--no-sandbox', '--disable-setuid-sandbox'],
+      },
+    }),
   ],
 
   /** Test framework configuration */