@aquera/nile-elements 1.2.1-beta-1.5 → 1.2.1-beta-1.7

package/src/nile-calendar/nile-calendar.ts

@@ -60,16 +60,6 @@ export class NileCalendar extends NileElement {
   
   @property({ type: Boolean}) showManualInputs :boolean=false;
 
-  @property({ type: Number , attribute: true, reflect: true }) startYear?: number;
-
-  @property({ type: Number , attribute: true, reflect: true }) endYear?: number;
-
-  @property({ type: Boolean, attribute:true, reflect: true}) showMonthDropdown = false;
-  @property({ type: Boolean, attribute:true, reflect: true}) showYearDropdown = false;
-
-  @property({ type: String, reflect: true, attribute: true}) dateFormat: string = 'MM/DD/YYYY';
-
-
   @state() startDate: Date | null = null;
 
   @state() endDate: Date | null = null;
@@ -117,34 +107,6 @@ export class NileCalendar extends NileElement {
     }
   }
 
-  private get monthNames() {
-    return Array.from({ length: 12 }, (_, i) =>
-      new Date(0, i).toLocaleString('default', { month: 'long' })
-    );
-  }
-
-  private get yearOptions(): number[] {
-    const fallbackStart = 2000;
-    const fallbackEnd = 2050;
-  
-    const start = this.startYear ?? fallbackStart;
-    const end = this.endYear ?? fallbackEnd;
-  
-    if (start > end) return [];
-  
-    return Array.from({ length: end - start + 1 }, (_, i) => start + i);
-  }
-  
-  private onMonthSelected(monthIndex: number) {
-    this.currentMonth = monthIndex;
-    this.emit('nile-month-change', { month: monthIndex });
-  }
-
-  private onYearSelected(year: number) {
-    this.currentYear = year;
-    this.emit('nile-year-change', { year });
-  }
-
   @watch('allowedDates')
   checkValidAllowedDate() {
     let newDateRange: NileCalendarDateRange | null;
@@ -169,84 +131,6 @@ export class NileCalendar extends NileElement {
       this.allowedDatesLocal=newDateRange;
     }
   }
-
-  private isPrevDisabled(): boolean {
-    return (
-      this.currentMonth === 0 &&
-      this.startYear !== undefined &&
-      this.currentYear <= this.startYear
-    );
-  }
-  
-  private isNextDisabled(): boolean {
-    return (
-      this.currentMonth === 11 &&
-      this.endYear !== undefined &&
-      this.currentYear >= this.endYear
-    );
-  }
-
-  private formatDate(date: Date | null): string {
-    if (!date) return '';
-  
-    const yyyy = date.getFullYear();
-    const mm = String(date.getMonth() + 1).padStart(2, '0');
-    const dd = String(date.getDate()).padStart(2, '0');
-  
-    let formatted = this.dateFormat;
-    formatted = formatted.replace(/YYYY/g, String(yyyy));
-    formatted = formatted.replace(/MM/g, mm);
-    formatted = formatted.replace(/DD/g, dd);
-    formatted = formatted.replace(/YY/g, String(yyyy).slice(-2));
-  
-    return formatted;
-  }
-  
-
-  private parseDate(input: string, existingDate?: Date | null): Date | null {
-    if (!input || !this.dateFormat) return null;
-    const formatPattern = this.dateFormat
-      .replace(/YYYY/, '(?<year>\\d{4})')
-      .replace(/YY/, '(?<year>\\d{2})')
-      .replace(/MM/, '(?<month>\\d{1,2})')
-      .replace(/DD/, '(?<day>\\d{1,2})');
-  
-    const regex = new RegExp(`^${formatPattern}$`);
-    const match = input.match(regex);
-    if (!match || !match.groups) return null;
-  
-    const year = match.groups.year.length === 2 ? Number(`20${match.groups.year}`) : Number(match.groups.year);
-    const month = Number(match.groups.month) - 1; 
-    const day = Number(match.groups.day);
-  
-    const date = new Date(existingDate || new Date());
-    date.setFullYear(year, month, day);
-    return isNaN(date.getTime()) ? null : date;
-  }
-
-
-private handleStartDateInput(event: CustomEvent): void {
-  event.stopPropagation();
-  const newDate = this.parseDate(event.detail.value, this.startDate);
-  if (newDate) {
-    this.startDate = newDate;
-    this.currentMonth = newDate.getMonth();
-    this.currentYear = newDate.getFullYear();
-    this.requestUpdate();
-  }
-}
-
-private handleEndDateInput(event: CustomEvent): void {
-  event.stopPropagation();
-  const newDate = this.parseDate(event.detail.value, this.endDate);
-  if (newDate) {
-    this.endDate = newDate;
-    this.currentMonth = newDate.getMonth();
-    this.currentYear = newDate.getFullYear();
-    this.requestUpdate();
-  }
-}
-
   
 
   /**
@@ -259,16 +143,15 @@ private handleEndDateInput(event: CustomEvent): void {
           base:true,
           base__range:this.range,
         })}
-        part="calendar-container"
       >
         <div class=${classMap({
           "calendar-config":true,
           "hidden": !this.range || (this.range && this.hideTypes)
         })}>
-          <div class="calendar-switcher" part="calendar-switcher">
+          <div class="calendar-switcher">
             <nile-tab-group centered @nile-tab-show="${this.onTypeChange}" value="${this.type}">
-              <nile-tab slot="nav" panel="absolute" tabindex="0">Absolute</nile-tab>
-              <nile-tab slot="nav" panel="relative" tabindex="0">Relative</nile-tab>
+              <nile-tab slot="nav" panel="absolute">Absolute</nile-tab>
+              <nile-tab slot="nav" panel="relative">Relative</nile-tab>
             </nile-tab-group>
           </div>
         </div>
@@ -277,24 +160,20 @@ private handleEndDateInput(event: CustomEvent): void {
         ${this.type == 'absolute' ? this.renderAbsoluteCalendar():''}
 
         ${!this.range?'':html`
-        <div class="button-container" part="button-container">
+        <div class="button-container">
           ${this.allowClear?
             html`
             <nile-button 
             class="clear-button"
             variant="secondary"
-            role="button"
             ?disabled="${ !this.startDate || !this.endDate }"
-            @keydown="${(e: KeyboardEvent) => {if (e.key === 'Enter' || e.key === ' ') this.clearDate();}}"
             @click="${this.clearDate}"
-
-            > Reset</nile-button>`:nothing
+            > Clear</nile-button>`:nothing
           }
           <nile-button 
           class="apply-button"  
           ?disabled="${ !this.startDate || !this.endDate }"  
           @click="${this.confimRange}"
-          @keydown="${(e: KeyboardEvent) => {if (e.key === 'Enter' || e.key === ' ') this.confimRange();}}"
           > Apply</nile-button>
         </div>
         `}
@@ -307,8 +186,8 @@ private handleEndDateInput(event: CustomEvent): void {
    */
   renderAbsoluteCalendar(){
     return html`
-    <div class="calendar-wrapper" part="calendar-wrapper">
-      <div class="calendar-container" >
+    <div class="calendar-wrapper">
+      <div class="calendar-container">
         ${this.renderMonth(
           this.currentYear,
           this.currentMonth,
@@ -319,38 +198,22 @@ private handleEndDateInput(event: CustomEvent): void {
     ${this.range ? html`
     <div class="calender-input ${this.showManualInputs  ? '' : 'hidden'}" >
         <div class="from">
-      <nile-input
-        label="From"
-        class="manual-input date-input"
-        placeholder="${this.dateFormat}"
-        value="${this.formatDate(this.startDate)}"
-        @nile-change="${this.handleStartDateInput}"
-      ></nile-input>
-
-      <nile-input
-        class="manual-input time-input"
-        placeholder="HH:MM:SS"
-        value="${this.formatTime(this.startDate)}"
-        @nile-change="${this.handleStartTimeInput}"
-      ></nile-input>
-    </div>
+          <nile-input 
+            label="From"
+            class="manual-input" 
+            value="${this.formatTime(this.startDate)}" 
+            placeholder="HH:MM:SS" @nile-change="${this.handleStartTimeInput}"
+          > </nile-input>
+        </div>
 
-    <div class="from">
-      <nile-input
-        label="To"
-        class="manual-input date-input"
-        placeholder="${this.dateFormat}"
-        value="${this.formatDate(this.endDate)}"
-        @nile-change="${this.handleEndDateInput}"
-      ></nile-input>
-
-      <nile-input
-        class="manual-input time-input"
-        placeholder="HH:MM:SS"
-        value="${this.formatTime(this.endDate)}"
-        @nile-change="${this.handleEndTimeInput}"
-      ></nile-input>
-    </div>
+        <div class="from">
+          <nile-input 
+            label="To"
+            class="manual-input" 
+            value="${this.formatTime(this.endDate)}" 
+            placeholder="HH:MM:SS" @nile-change="${this.handleEndTimeInput}"
+          > </nile-input>
+        </div>
     </div>
     `:''}
     `
@@ -359,90 +222,77 @@ private handleEndDateInput(event: CustomEvent): void {
   /**
    * @returns HTML content for relative calendar
    */
-  renderRelativeCalendar() {
+  renderRelativeCalendar(){
     return html`
-      <div class="units-wrapper">
-        <div class="unit-container">
-  
-          ${this.hideDurationFields?.includes('minutes') ? '' : html`
-          <div class="unit-group">
-            <div class="duration-name">Minutes</div>
-            <div class="duration-units">
-              ${this.renderTimeValues('minutes', [1, 5, 15, 30, 45])}
-            </div>
-          </div>
-          `}
-  
-          ${this.hideDurationFields?.includes('hours') ? '' : html`
-          <div class="unit-group">
-            <div class="duration-name">Hours</div>
-            <div class="duration-units">
-              ${this.renderTimeValues('hours', [1, 2, 3, 6, 8, 12])}
-            </div>
-          </div>
-          `}
-  
-          ${this.hideDurationFields?.includes('days') ? '' : html`
-          <div class="unit-group">
-            <div class="duration-name">Days</div>
-            <div class="duration-units">
-              ${this.renderTimeValues('days', [1, 2, 3, 4, 5, 6])}
-            </div>
-          </div>
-          `}
-  
-          ${this.hideDurationFields?.includes('weeks') ? '' : html`
-          <div class="unit-group">
-            <div class="duration-name">Weeks</div>
-            <div class="duration-units">
-              ${this.renderTimeValues('weeks', [1, 2, 4, 6])}
-            </div>
-          </div>
-          `}
-  
-          ${this.hideDurationFields?.includes('months') ? '' : html`
-          <div class="unit-group">
-            <div class="duration-name">Months</div>
-            <div class="duration-units">
-              ${this.renderTimeValues('months', [3, 6, 12, 15])}
-            </div>
-          </div>
-          `}
+    <div class="units-wrapper">
+      <div class="unit-container">
+        ${this.hideDurationFields?.includes('minutes')?'':html`
+        <div class="duration-name">Minutes</div>
+        <div class="duration-units">
+          ${this.renderTimeValues('minutes', [1, 5, 15, 30, 45])}
         </div>
-      </div>
-  
-      ${this.range ? html`
-      <div>
-        <div class="unit-input-container">
-          <nile-input 
-            class="manual-input duration-input" 
-            label="Duration"
-            inputmode="numeric"
-            type="number"
-            value="${this.selectedValue}" 
-            @nile-change="${this.handleDurationChange}"
-            placeholder="Enter Value"
-          ></nile-input>
-  
-          <nile-select 
-            class="manual-input time-input"  
-            label="Unit of time" 
-            value="${this.selectedUnit}"
-            @nile-change="${this.handleUnitChange}"
-          >
-            <nile-option value="minutes" class="${this.hideDurationFields?.includes('minutes') ? 'hidden' : ''}">Minutes</nile-option>
-            <nile-option value="hours" class="${this.hideDurationFields?.includes('hours') ? 'hidden' : ''}">Hours</nile-option>
-            <nile-option value="days" class="${this.hideDurationFields?.includes('days') ? 'hidden' : ''}">Days</nile-option>
-            <nile-option value="weeks" class="${this.hideDurationFields?.includes('weeks') ? 'hidden' : ''}">Weeks</nile-option>
-            <nile-option value="months" class="${this.hideDurationFields?.includes('months') ? 'hidden' : ''}">Months</nile-option>
-          </nile-select>
+        `}
+
+        ${this.hideDurationFields?.includes('hours')?'':html`
+        <div class="duration-name">Hours</div>
+        <div class="duration-units">
+          ${this.renderTimeValues('hours', [1, 2, 3, 6, 8, 12])}
+        </div>
+        `}
+        
+        ${this.hideDurationFields?.includes('days')?'':html`
+        <div class="duration-name">Days</div>
+        <div class="duration-units">
+          ${this.renderTimeValues('days', [1, 2, 3, 4, 5, 6])}
+        </div>
+        `}
+        
+        ${this.hideDurationFields?.includes('weeks')?'':html`
+        <div class="duration-name">Weeks</div>
+        <div class="duration-units">
+          ${this.renderTimeValues('weeks', [1, 2, 4, 6])}
+        </div>
+        `}
+        
+        ${this.hideDurationFields?.includes('months')?'':html`
+        <div class="duration-name">Months</div>
+        <div class="duration-units">
+          ${this.renderTimeValues('months', [3, 6, 12, 15])}
         </div>
+        `}
       </div>
-      ` : ''}
-    `;
+    </div>
+    
+    ${this.range ? html`
+    <div>
+      <div class="unit-input-container">
+        <nile-input 
+        class="manual-input duration-input" 
+        label="Duration"
+        inputmode="numeric"
+        type="number"
+        value="${this.selectedValue}" 
+        @nile-change="${this.handleDurationChange}"
+        placeholder="Enter Value"
+        ></nile-input>
+
+        <nile-select class="manual-input time-input"  
+          label="Unit of time" 
+          value="${ this.selectedUnit }"
+          @nile-change="${this.handleUnitChange}"
+        >
+          <nile-option value="minutes" class="${this.hideDurationFields?.includes('minutes')?'hidden':''}">Minutes</nile-option>
+          <nile-option value="hours" class="${this.hideDurationFields?.includes('hours')?'hidden':''}"> Hours </nile-option>
+          <nile-option value="days" class="${this.hideDurationFields?.includes('days')?'hidden':''}">Days</nile-option>
+          <nile-option value="weeks" class="${this.hideDurationFields?.includes('weeks')?'hidden':''}">Weeks</nile-option>
+          <nile-option value="months" class="${this.hideDurationFields?.includes('months')?'hidden':''}"> Months </nile-option>
+        </nile-select>
+      </div>
+    </div>
+    `:''}
+    `
   }
   
-  
   /**
    * 
    * @param unit 
@@ -456,7 +306,6 @@ private handleEndDateInput(event: CustomEvent): void {
           <div
             class="duration__value ${this.selectedUnit === unit && this.selectedValue === value ? 'duration__value--selected':''}"
             @click=${(e: any) => this.handleTimeValueClick(unit, value, e)}
-            @keydown="${(e: KeyboardEvent) => {if (e.key === 'Enter' || e.key === ' ') this.handleTimeValueClick(unit, value, e);}}"
           >${value}
           </div>`
     );
@@ -551,91 +400,20 @@ private handleEndDateInput(event: CustomEvent): void {
             name="var(--nile-icon-arrow-left, var(--ng-icon-chevron-left))"
             method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
             color="black"
-            role="button"
-            tabindex="${this.isPrevDisabled() ? '-1' : '0'}"
-            @keydown="${(e: KeyboardEvent) => {if (e.key === 'Enter' || e.key === ' ') this.prevMonth();}}"
             @click="${this.prevMonth}"
           >
           </nile-icon>
-          <div class="calendar-header__center">
-
-${this.showMonthDropdown || this.showYearDropdown ? html`
-  ${this.showMonthDropdown ? html`
-    <nile-dropdown class="month-dropdown">
-      <span
-        slot="trigger"
-        class="calendar-header__trigger month-trigger"
-        role="button"
-      >
-        ${new Date(year, month).toLocaleString('default', { month: 'long' })}
-        <nile-icon name="arrowdropdown" color="black" class="calendar-header__caret"></nile-icon>
-      </span>
-      <nile-menu>
-        <div class="month-scroll-wrapper">
-          ${this.monthNames.map((m, idx) => html`
-            <nile-menu-item
-              class="month-menu-item"
-              ?selected="${idx === month}"
-              @click="${() => this.onMonthSelected(idx)}"
-            >
-              ${m}
-            </nile-menu-item>
-          `)}
-        </div>
-      </nile-menu>
-    </nile-dropdown>
-  ` : html`
-    <span
-      >${new Date(year, month).toLocaleString('default', { month: 'long' })}</span
-    >
-  `}
-  ${this.showYearDropdown ? html`
-    <nile-dropdown class="year-dropdown">
-      <span
-        slot="trigger"
-        class="calendar-header__trigger"
-        role="button"
-      >
-        ${year}
-        <nile-icon name="arrowdropdown" color="black" class="calendar-header__caret"></nile-icon>
-      </span>
-      <nile-menu>
-        <div class="year-scroll-wrapper">
-          ${this.yearOptions.map(
-            y => html`
-              <nile-menu-item
-                class="year-menu-item"
-                ?selected="${y === year}"
-                @click="${() => this.onYearSelected(y)}"
-              >
-                ${y}
-              </nile-menu-item>
-            `
-          )}
-        </div>
-      </nile-menu>
-    </nile-dropdown>
-  ` : html`
-    <span>${year}</span>
-  `}
-` : html`
-  <span
-    >${new Date(year, month).toLocaleString('default', {
-      month: 'long',
-    })}
-    ${year}</span
-  >
-`}
-</div>
-
+          <span
+            >${new Date(year, month).toLocaleString('default', {
+              month: 'long',
+            })}
+            ${year}</span
+          >
           <nile-icon
             class="calendar-header__month-navigation"
             name="var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))"
             method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
             color="black"
-            role="button"
-            tabindex="${this.isNextDisabled() ? '-1' : '0'}"
-            @keydown="${(e: KeyboardEvent) => {if (e.key === 'Enter' || e.key === ' ') this.nextMonth();}}"
             @click="${this.nextMonth}"
           >
           </nile-icon>
@@ -664,15 +442,12 @@ ${this.showMonthDropdown || this.showYearDropdown ? html`
             
             return html` 
             <div
-              part="calendar-day-${day}"
               class=${classMap(classMapObj)}
-              tabindex="${isCurrentMonth && this.isAllowedDate(day, month, year) ? '0' : '-1'}"
-              @keydown="${(e: KeyboardEvent) => {if (e.key === 'Enter' || e.key === ' ') this.selectDate(day, month, year);}}"
               @click="${() => { if (isCurrentMonth) this.selectDate(day, month, year)}}"
             >
               <span style="position:relative;">
                 ${day}
-                ${isCurrentDate(day, month, year) && isCurrentMonth?html`<div class="current__date__dot" part="current-date-dot"></div>`:nothing}
+                ${isCurrentDate(day, month, year) && isCurrentMonth?html`<div class="current__date__dot"></div>`:nothing}
               </span>
             </div>`;
           })}
@@ -700,25 +475,17 @@ ${this.showMonthDropdown || this.showYearDropdown ? html`
     return isWithinRange;
   }
 
-  clearDate() {
-    if (this.range) {
-      this.valueAttribute = '';
-      this.startDate = null;
-      this.endDate = null;
-      this.selectedUnit = undefined!;
-      this.selectedValue = undefined!;
-      if (this.range && this.type === 'relative') {
-        this.selectedUnit = undefined!;
-        this.selectedValue = undefined!;
-      }           
-    } else {
-      this.value = null;
+  clearDate(){
+    if(this.range){
+      this.valueAttribute='';
+      this.startDate=null;
+      this.endDate=null;
     }
-  
-    this.requestUpdate();
-    this.emit('nile-clear');
+    else{
+      this.value=null;
+    }
+    this.emit('nile-clear')
   }
-  
 
   /**
    * @function handle_date-click/select
@@ -921,10 +688,8 @@ ${this.showMonthDropdown || this.showYearDropdown ? html`
 
   private nextMonth(): void {
     if (this.currentMonth === 11) {
-      const newYear = this.currentYear + 1;
-      if(this.endYear !== undefined && newYear > this.endYear) return;
       this.currentMonth = 0;
-      this.currentYear = newYear;
+      this.currentYear++;
     } else {
       this.currentMonth++;
     }
@@ -932,10 +697,8 @@ ${this.showMonthDropdown || this.showYearDropdown ? html`
 
   private prevMonth(): void {
     if (this.currentMonth === 0) {
-      const newYear = this.currentYear - 1;
-      if(this.startYear !== undefined && newYear < this.startYear) return;
       this.currentMonth = 11;
-      this.currentYear = newYear;
+      this.currentYear--;
     } else {
       this.currentMonth--;
     }
@@ -964,7 +727,7 @@ ${this.showMonthDropdown || this.showYearDropdown ? html`
   }
 
   emitChangedData(data:{startDate:Date,endDate:Date}|{value:any}|null){
-    this.emit('nile-changed',data); // deprecated. Use nile-change instead
+    this.emit('nile-changed',data);
     this.emit('nile-change',data)
   }
 

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

@@ -420,6 +420,11 @@ export class NileSelect extends NileElement implements NileFormControl{
     }
   }
 
+  private handleVirtualSelectOpenChange(e: CustomEvent) {
+    this.open = e.detail.open;
+  }
+
+  
   /**
    * Handles the click event on the footer.
    * @param event - The click event.
@@ -1055,12 +1060,22 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   @watch('open', { waitUntilFirstUpdate: true })
   async handleOpenChange() {
+    if (this.enableVirtualScroll) {
+      if (this.open && !this.disabled) {
+        this.emit('nile-show', { value: this.value, name: this.name });
+        this.emit('nile-after-show', { value: this.value, name: this.name });
+        if (this.autoFocusSearch) {
+          this.handleInputAfterInit();
+        }
+      } else {
+        this.emit('nile-hide', { value: this.value, name: this.name });
+        this.emit('nile-after-hide', { value: this.value, name: this.name });
+      } 
+      return;
+    }
     if (this.open && !this.disabled) {
-      // Reset the current option
       this.setCurrentOption(this.selectedOptions[0] || this.getFirstOption());
-
       this.emit('nile-show', { value: this.value, name: this.name });
-
       if(this.enableGroupHeader) {
         this.getAllGroupAttributes().forEach((el: GroupAttributes) => {
           el.element.classList.remove('nile-group-hidden');
@@ -1072,21 +1087,17 @@ export class NileSelect extends NileElement implements NileFormControl{
       this.showNoResults = !this.getAllOptions()?.length;
 
       await stopAnimations(this);
-      this.listbox.hidden = false;
-      this.popup.active = true;
-
+      if (this.listbox) this.listbox.hidden = false;
+      if (this.popup) this.popup.active = true;
       // Select the appropriate option based on value after the listbox opens
       requestAnimationFrame(() => {
         this.setCurrentOption(this.currentOption);
       });
-
       const { keyframes, options } = getAnimation(this, 'select.show', {
         dir: 'ltr',
       });
-      await animateTo(this.popup.popup, keyframes, options);
-
-      // Make sure the current option is scrolled into view (required for Safari)
-      if (this.currentOption) {
+      if (this.popup?.popup) await animateTo(this.popup.popup, keyframes, options);
+      if (this.currentOption && this.listbox) {
         scrollIntoView(this.currentOption, this.listbox, 'vertical', 'auto');
       }
       this.searchValue = '';
@@ -1110,10 +1121,9 @@ export class NileSelect extends NileElement implements NileFormControl{
       const { keyframes, options } = getAnimation(this, 'select.hide', {
         dir: 'ltr',
       });
-      await animateTo(this.popup.popup, keyframes, options);
-      this.listbox.hidden = true;
-      this.popup.active = false;
-
+    if (this.popup?.popup) await animateTo(this.popup.popup, keyframes, options);
+      if (this.listbox) this.listbox.hidden = true;
+      if (this.popup) this.popup.active = false;
       if (this.portal) {
         this.portalManager.cleanupPortalAppend();
       }

package/src/nile-select/virtual-scroll-helper.ts

@@ -49,6 +49,8 @@ export class VirtualScrollHelper {
           .maxOptionsVisible=${component.maxOptionsVisible}
           .data=${component.data}
           .open=${component.open}
+  @nile-open-change=${(e: CustomEvent) => (component as any).handleOpenChange(e)
+}
           .loading=${component.loading}
           .portal=${component.portal}
           exportparts="