@aquera/nile-elements 1.3.1-beta-1.0 → 1.3.1-beta-1

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

@@ -17,6 +17,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { query } from 'lit/decorators.js';
 import { watch } from '../internal/watch';
 import NileElement from '../internal/nile-element';
+import { ClearMode } from './nile-calendar.enum';
 import type { PropertyValueMap } from 'lit';
 type NileCalendarDateRange={ startDate: string, endDate: string }
 type TimeUnits= 'minutes'|'hours'|'days'|'weeks'|'months';
@@ -60,6 +61,17 @@ 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;
@@ -107,6 +119,34 @@ 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;
@@ -131,6 +171,84 @@ 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();
+  }
+}
+
   
 
   /**
@@ -143,37 +261,42 @@ export class NileCalendar extends NileElement {
           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">
+          <div class="calendar-switcher" part="calendar-switcher">
             <nile-tab-group centered @nile-tab-show="${this.onTypeChange}" value="${this.type}">
-              <nile-tab slot="nav" panel="absolute">Absolute</nile-tab>
-              <nile-tab slot="nav" panel="relative">Relative</nile-tab>
+              <nile-tab slot="nav" panel="absolute" tabindex="0">Absolute</nile-tab>
+              <nile-tab slot="nav" panel="relative" tabindex="0">Relative</nile-tab>
             </nile-tab-group>
           </div>
         </div>
-
+ 
         ${this.type == 'relative' ? this.renderRelativeCalendar():''}
         ${this.type == 'absolute' ? this.renderAbsoluteCalendar():''}
 
         ${!this.range?'':html`
-        <div class="button-container">
+        <div class="button-container" part="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}"
-            > Clear</nile-button>`:nothing
+
+            > Reset</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>
         `}
@@ -186,8 +309,8 @@ export class NileCalendar extends NileElement {
    */
   renderAbsoluteCalendar(){
     return html`
-    <div class="calendar-wrapper">
-      <div class="calendar-container">
+    <div class="calendar-wrapper" part="calendar-wrapper">
+      <div class="calendar-container" >
         ${this.renderMonth(
           this.currentYear,
           this.currentMonth,
@@ -197,23 +320,47 @@ export class NileCalendar extends NileElement {
     </div>
     ${this.range ? html`
     <div class="calender-input ${this.showManualInputs  ? '' : 'hidden'}" >
-        <div class="from">
-          <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" 
-            value="${this.formatTime(this.endDate)}" 
-            placeholder="HH:MM:SS" @nile-change="${this.handleEndTimeInput}"
-          > </nile-input>
-        </div>
+     <div class="from">
+  <div class="from-date">
+    <nile-input
+      label="From"
+      class="manual-input date-input"
+      placeholder="${this.dateFormat}"
+      value="${this.formatDate(this.startDate)}"
+      @nile-change="${this.handleStartDateInput}"
+    ></nile-input>
+  </div>
+
+  <div class="from-time">
+    <nile-input
+      class="manual-input time-input"
+      placeholder="HH:MM:SS"
+      value="${this.formatTime(this.startDate)}"
+      @nile-change="${this.handleStartTimeInput}"
+    ></nile-input>
+  </div>
+</div>
+
+
+    <div class="from">
+        <div class="from-date">
+      <nile-input
+        label="To"
+        class="manual-input date-input"
+        placeholder="${this.dateFormat}"
+        value="${this.formatDate(this.endDate)}"
+        @nile-change="${this.handleEndDateInput}"
+      ></nile-input>
+    </div>
+      <div class="from-time">
+      <nile-input
+        class="manual-input time-input"
+        placeholder="HH:MM:SS"
+        value="${this.formatTime(this.endDate)}"
+        @nile-change="${this.handleEndTimeInput}"
+      ></nile-input>
+    </div>
+    </div>
     </div>
     `:''}
     `
@@ -222,77 +369,90 @@ export class NileCalendar extends NileElement {
   /**
    * @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="duration-name">Minutes</div>
-        <div class="duration-units">
-          ${this.renderTimeValues('minutes', [1, 5, 15, 30, 45])}
-        </div>
-        `}
-
-        ${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 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>
-        `}
       </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.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>
-    </div>
-    `:''}
-    `
+      ` : ''}
+    `;
   }
   
+  
   /**
    * 
    * @param unit 
@@ -306,6 +466,7 @@ export class NileCalendar extends NileElement {
           <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>`
     );
@@ -391,7 +552,7 @@ export class NileCalendar extends NileElement {
         year === today.getFullYear()
       );
     };
-
+    const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
     return html`
       <div class="calendar">
         <div class="calendar-header">
@@ -400,33 +561,98 @@ export class NileCalendar extends NileElement {
             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>
-          <span
-            >${new Date(year, month).toLocaleString('default', {
-              month: 'long',
-            })}
-            ${year}</span
-          >
+          <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>
+
           <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>
         </div>
+   
         <div class="days_container">
-          <div class="day_name">Su</div>
-          <div class="day_name">Mo</div>
-          <div class="day_name">Tu</div>
-          <div class="day_name">We</div>
-          <div class="day_name">Th</div>
-          <div class="day_name">Fr</div>
-          <div class="day_name">Sa</div>
-
+        ${dayNames.map(day => html`<div class="day_name">${day}</div>`)}
           ${allDays.map((day, index) => {
             const isCurrentMonth =
               index >= fillerDaysBefore.length &&
@@ -442,12 +668,15 @@ export class NileCalendar extends NileElement {
             
             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"></div>`:nothing}
+                ${isCurrentDate(day, month, year) && isCurrentMonth?html`<div class="current__date__dot" part="current-date-dot"></div>`:nothing}
               </span>
             </div>`;
           })}
@@ -475,17 +704,30 @@ export class NileCalendar extends NileElement {
     return isWithinRange;
   }
 
-  clearDate(){
-    if(this.range){
-      this.valueAttribute='';
-      this.startDate=null;
-      this.endDate=null;
-    }
-    else{
-      this.value=null;
+  clearDate(mode?: ClearMode) {
+    const clearType =
+      mode ??
+      (this.range
+        ? this.type === 'relative'
+          ? ClearMode.Relative
+          : ClearMode.Range
+        : ClearMode.Single);
+  
+    if (clearType === ClearMode.Single) {
+      this.value = null;
+    } else {
+      this.valueAttribute = '';
+      this.startDate = null;
+      this.endDate = null;
+      this.selectedUnit = undefined!;
+      this.selectedValue = undefined!;
     }
-    this.emit('nile-clear')
-  }
+  
+    this.requestUpdate();
+    this.emit('nile-clear');
+  }  
+
+  
 
   /**
    * @function handle_date-click/select
@@ -509,6 +751,15 @@ export class NileCalendar extends NileElement {
         }
         this.isSelectingStart = false;
       } else {
+        if (
+          this.startDate &&
+          selectedDate.getFullYear() === this.startDate.getFullYear() &&
+          selectedDate.getMonth() === this.startDate.getMonth() &&
+          selectedDate.getDate() === this.startDate.getDate()
+        ) {
+          return; 
+        }
+    
         this.isSelectingStart = true;
 
         if (this.startDate && selectedDate < this.startDate) {
@@ -688,8 +939,10 @@ export class NileCalendar extends NileElement {
 
   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++;
+      this.currentYear = newYear;
     } else {
       this.currentMonth++;
     }
@@ -697,8 +950,10 @@ export class NileCalendar extends NileElement {
 
   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--;
+      this.currentYear = newYear;
     } else {
       this.currentMonth--;
     }
@@ -727,7 +982,7 @@ export class NileCalendar extends NileElement {
   }
 
   emitChangedData(data:{startDate:Date,endDate:Date}|{value:any}|null){
-    this.emit('nile-changed',data);
+    this.emit('nile-changed',data); // deprecated. Use nile-change instead
     this.emit('nile-change',data)
   }