@aquera/nile-elements 0.0.121 → 0.0.123

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

@@ -97,8 +97,6 @@ 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, {
@@ -1222,11 +1220,9 @@ export class NileSelect extends NileElement implements NileFormControl {
                       clearable
                       .value=${this.searchValue}
                       placeholder="${this.internalSearchPlaceHolder}"
-                      @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-input=${this.handleSearchChange}
+                      @nile-focus=${this.handleSearchFocus}
+                      @nile-change="${this.onInputChange}"
                     >
                       <nile-icon name="search" slot="suffix"> </nile-icon>
                     </nile-input>

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

@@ -8,8 +8,6 @@ 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 = '';

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

@@ -43,8 +43,6 @@ 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.ts

@@ -22,8 +22,6 @@ 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,8 +38,6 @@ 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.test.ts

@@ -6,8 +6,10 @@ import { NileTab } from '../nile-tab/nile-tab';
 import '../nile-tab/nile-tab';
 import '../nile-tab-panel/nile-tab-panel';
 import { NileTabPanel } from '../nile-tab-panel/nile-tab-panel';
+import { repeat } from 'lit/directives/repeat.js';
+import { NileIconButton } from '../nile-icon-button';
 
-const wait=(ms:number=50000)=>new Promise(resolve => setTimeout(resolve, ms))
+const wait = (ms: number = 50000) => new Promise(resolve => setTimeout(resolve, ms))
 describe('NileTabGroup with Tabs and Panels', () => {
 
   it('should render the tabs correctly', async () => {
@@ -27,7 +29,7 @@ describe('NileTabGroup with Tabs and Panels', () => {
     expect(el).to.be.instanceOf(NileTabGroup);
     const tabs = document.querySelectorAll("nile-tab");
     const panels = el.shadowRoot?.querySelectorAll('nile-tab-panel');
-    
+
     expect(tabs?.length).to.equal(4);
   });
 
@@ -102,33 +104,6 @@ describe('NileTabGroup with Tabs and Panels', () => {
     expect(activePanel?.shadowRoot?.querySelector("slot")?.className.includes('tab-panel--active')).to.be.true;
   });
 
-  // it('should activate tab and panel when using keyboard navigation', async () => {
-  //   const el = await fixture<NileTabGroup>(html`
-  //     <nile-tab-group value="general">
-  //       <nile-tab slot="nav" panel="general">General</nile-tab>
-  //       <nile-tab slot="nav" panel="custom">Custom</nile-tab>
-  //       <nile-tab slot="nav" panel="advanced">Advanced</nile-tab>
-  //       <nile-tab-panel name="general">This is the general tab panel.</nile-tab-panel>
-  //       <nile-tab-panel name="custom">This is the custom tab panel.</nile-tab-panel>
-  //       <nile-tab-panel name="advanced">This is the advanced tab panel.</nile-tab-panel>
-  //     </nile-tab-group>
-  //   `);
-
-  //   const firstTab = document.querySelector('nile-tab[panel="general"]') as NileTab;
-  //   firstTab.focus();
-
-  //   // Simulate pressing the "ArrowRight" key
-  //   const event = new KeyboardEvent('keydown', { key: 'ArrowRight' });
-  //   firstTab.dispatchEvent(event);
-  //   await elementUpdated(el);
-
-  //   const secondTab = document?.querySelector('nile-tab[panel="custom"]');
-  //   expect(secondTab?.shadowRoot?.querySelector("div")?.className.includes('tab--active')).to.be.true;
-
-  //   const activePanel = document.querySelector('nile-tab-panel[name="custom"]');
-  //   expect(activePanel?.shadowRoot?.querySelector("slot")?.className.includes('tab-panel--active')).to.be.true;
-  // });
-
   it('should emit "nile-tab-show" event when a tab is shown', async () => {
     const el = await fixture<NileTabGroup>(html`
       <nile-tab-group value="general">
@@ -170,4 +145,71 @@ describe('NileTabGroup with Tabs and Panels', () => {
     const hideEvent = await hideEventPromise;
     expect(hideEvent.detail.value).to.equal('general');
   });
+
+  it('Scroll to the end and start correctly', async () => {
+    const NumetOfTags=40
+    const el = await fixture<NileTabGroup>(html`
+      <nile-tab-group no-track value="custom">
+				${repeat(Array.from({ length: NumetOfTags }, (_, index) => index + 1), el => el, (el) => html`<nile-tab slot="nav" panel="TabNumber${el}">TabNumber+${el}</nile-tab>`)}
+      </nile-tab-group>
+    `)
+    await elementUpdated(el);
+    el.hasScrollControls = true;
+    await elementUpdated(el);
+
+    const FirstElement=document.querySelector<NileTab>("nile-tab:first-child");
+    const LastElement=document.querySelector<NileTab>("nile-tab:last-child");
+    observer.observe(LastElement as Element)
+    observer.observe(FirstElement as Element)
+
+    await wait(1000)
+    expect(LastElement?.className.includes('visible')).to.be.false;
+    expect(FirstElement?.className.includes('visible')).to.be.true;
+    const scrollRightBtn=el.shadowRoot?.querySelector<NileIconButton>("nile-icon-button.tab-group__scroll-button.tab-group__scroll-button--start")
+    const scrollLeftBtn=el.shadowRoot?.querySelector<NileIconButton>("nile-icon-button.tab-group__scroll-button.tab-group__scroll-button--end")
+    scrollRightBtn?.click()
+    await elementUpdated(el);
+    await wait(1000)
+    expect(LastElement?.className.includes('visible')).to.be.true;
+    expect(FirstElement?.className.includes('visible')).to.be.false;
+    scrollLeftBtn?.click()
+    await elementUpdated(el);
+  });
+
+  it('Arrow key controls should work correctly', async () => {
+    const el = await fixture<NileTabGroup>(html`
+      <nile-tab-group>
+				${repeat(Array.from({ length: 10 }, (_, index) => index + 1), el => el, (el) => html`<nile-tab closable slot="nav" cloa panel="TabNumber${el}">TabNumber+${el}</nile-tab>`)}
+      </nile-tab-group>
+    `)
+    await elementUpdated(el);
+    const FirstTab=document.querySelector<NileTab>("nile-tab:first-child");
+    const SecondTab=document.querySelector<NileTab>("nile-tab:nth-child(2)");
+    const LastTab=document.querySelector<NileTab>("nile-tab:last-child");
+
+    FirstTab?.dispatchEvent(arrowRightEvent)
+    await elementUpdated(el);
+    expect(FirstTab?.shadowRoot?.querySelector("div")?.className.includes('tab--active')).to.be.false;
+    expect(SecondTab?.shadowRoot?.querySelector("div")?.className.includes('tab--active')).to.be.true;
+
+    SecondTab?.dispatchEvent(arrowLeftEvent)
+    await elementUpdated(el);
+    expect(FirstTab?.shadowRoot?.querySelector("div")?.className.includes('tab--active')).to.be.true;
+    expect(SecondTab?.shadowRoot?.querySelector("div")?.className.includes('tab--active')).to.be.false;
+
+    FirstTab?.dispatchEvent(arrowLeftEvent)
+    await elementUpdated(el);
+    expect(FirstTab?.shadowRoot?.querySelector("div")?.className.includes('tab--active')).to.be.false;
+    expect(LastTab?.shadowRoot?.querySelector("div")?.className.includes('tab--active')).to.be.true;
+  });
 });
+
+const observer = new IntersectionObserver(
+  (entries, opts)=> entries.forEach(entry => entry.target.classList.toggle('visible', entry.isIntersecting)),
+  { root: null, threshold: .5}
+)
+
+const arrowLeftEvent = new KeyboardEvent('keydown', { key: 'ArrowLeft', code: 'ArrowLeft', keyCode: 37, which: 37, bubbles: true, cancelable: true });
+const arrowUpEvent = new KeyboardEvent('keydown', { key: 'ArrowUp', code: 'ArrowUp', keyCode: 38, which: 38, bubbles: true, cancelable: true });
+const arrowRightEvent = new KeyboardEvent('keydown', { key: 'ArrowRight', code: 'ArrowRight', keyCode: 39, which: 39, bubbles: true, cancelable: true });
+const arrowDownEvent = new KeyboardEvent('keydown', { key: 'ArrowDown', code: 'ArrowDown', keyCode: 40, which: 40, bubbles: true, cancelable: true });

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

@@ -50,8 +50,6 @@ export class NileTabGroup extends NileElement {
 
   static styles: CSSResultGroup = styles;
 
-  protected override BUBBLES: boolean=false;
-
   private activeTab?: NileTab;
   private mutationObserver: MutationObserver;
   private resizeObserver: ResizeObserver;
@@ -63,7 +61,7 @@ export class NileTabGroup extends NileElement {
   @query('.tab-group__nav') nav: HTMLElement;
   @query('.tab-group__indicator') indicator: HTMLElement;
 
-  @state() private hasScrollControls = false;
+  @state() hasScrollControls = false;
 
   /** The placement of the tabs. */
   @property() placement: 'top' | 'bottom' | 'start' | 'end' = 'top';
@@ -201,7 +199,7 @@ export class NileTabGroup extends NileElement {
                   name='arrowright'
                   library="system"
                   label="scrollToStart"
-                  @click=${this.handleScrollToStart}
+                  @click=${this.handleScrollToEnd}
                 ></nile-icon-button>
               `
             : ''}
@@ -227,7 +225,7 @@ export class NileTabGroup extends NileElement {
                   name='arrowleft'
                   library="system"
                   label="scrollToEnd"
-                  @click=${this.handleScrollToEnd}
+                  @click=${this.handleScrollToStart}
                 ></nile-icon-button>
               `
             : ''}
@@ -300,7 +298,7 @@ export class NileTabGroup extends NileElement {
 
     // Move focus left or right
     if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
-      const activeEl = this.tabs.find(t => t.matches(':focus'));
+      const activeEl = tab;
       const isRtl = false;
 
       if (activeEl?.tagName.toLowerCase() === 'nile-tab') {
@@ -347,20 +345,14 @@ export class NileTabGroup extends NileElement {
 
   private handleScrollToStart() {
     this.nav.scroll({
-      left:
-        true
-        ? this.nav.scrollLeft + this.nav.clientWidth
-        : this.nav.scrollLeft - this.nav.clientWidth,
+      left:-this.nav.scrollWidth,
       behavior: 'smooth'
     });
   }
 
   private handleScrollToEnd() {
     this.nav.scroll({
-      left:
-        true
-        ? this.nav.scrollLeft - this.nav.clientWidth
-        : this.nav.scrollLeft + this.nav.clientWidth,
+      left:this.nav.scrollWidth,
       behavior: 'smooth'
     });
   }

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

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

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

@@ -45,8 +45,6 @@ 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.ts

@@ -44,8 +44,6 @@ 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,8 +56,6 @@ 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,8 +38,6 @@ 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.ts

@@ -80,8 +80,6 @@ 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/tsconfig.json

@@ -17,6 +17,7 @@
     "incremental": true,
     "strictPropertyInitialization": false,
     "strictFunctionTypes": false,
+    "skipLibCheck": true
   },
   "include": [
     "src/**/*.ts"