@aquera/nile-elements 1.2.8-beta-1.1 → 1.2.8-beta-1.3

package/dist/src/nile-calendar/nile-calendar.js

@@ -29,9 +29,6 @@ let NileCalendar = class NileCalendar extends NileElement {
         this.type = 'absolute';
         this.hideDurationFields = [];
         this.showManualInputs = false;
-        this.showMonthDropdown = false;
-        this.showYearDropdown = false;
-        this.dateFormat = 'MM/DD/YYYY';
         this.startDate = null;
         this.endDate = null;
         this.isSelectingStart = true;
@@ -75,26 +72,6 @@ let NileCalendar = class NileCalendar extends NileElement {
             this.initializeValue();
         }
     }
-    get monthNames() {
-        return Array.from({ length: 12 }, (_, i) => new Date(0, i).toLocaleString('default', { month: 'long' }));
-    }
-    get yearOptions() {
-        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);
-    }
-    onMonthSelected(monthIndex) {
-        this.currentMonth = monthIndex;
-        this.emit('nile-month-change', { month: monthIndex });
-    }
-    onYearSelected(year) {
-        this.currentYear = year;
-        this.emit('nile-year-change', { year });
-    }
     checkValidAllowedDate() {
         let newDateRange;
         try {
@@ -117,68 +94,6 @@ let NileCalendar = class NileCalendar extends NileElement {
             this.allowedDatesLocal = newDateRange;
         }
     }
-    isPrevDisabled() {
-        return (this.currentMonth === 0 &&
-            this.startYear !== undefined &&
-            this.currentYear <= this.startYear);
-    }
-    isNextDisabled() {
-        return (this.currentMonth === 11 &&
-            this.endYear !== undefined &&
-            this.currentYear >= this.endYear);
-    }
-    formatDate(date) {
-        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;
-    }
-    parseDate(input, existingDate) {
-        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;
-    }
-    handleStartDateInput(event) {
-        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();
-        }
-    }
-    handleEndDateInput(event) {
-        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();
-        }
-    }
     /**
      * Render method
      */
@@ -189,16 +104,15 @@ let NileCalendar = 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" 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>
@@ -207,25 +121,19 @@ let NileCalendar = class NileCalendar extends NileElement {
         ${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) => { 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) => { if (e.key === 'Enter' || e.key === ' ')
-            this.confimRange(); }}"
           > Apply</nile-button>
         </div>
         `}
@@ -237,54 +145,30 @@ let NileCalendar = class NileCalendar extends NileElement {
      */
     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, this.getDaysArray(this.currentYear, this.currentMonth))}
       </div>
     </div>
     ${this.range ? html `
     <div class="calender-input ${this.showManualInputs ? '' : 'hidden'}" >
-     <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">
+          <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">
-        <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 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>
     ` : ''}
     `;
@@ -294,84 +178,72 @@ let NileCalendar = class NileCalendar extends NileElement {
      */
     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>
+    ` : ''}
     `;
     }
     /**
@@ -385,8 +257,6 @@ let NileCalendar = class NileCalendar extends NileElement {
           <div
             class="duration__value ${this.selectedUnit === unit && this.selectedValue === value ? 'duration__value--selected' : ''}"
             @click=${(e) => this.handleTimeValueClick(unit, value, e)}
-            @keydown="${(e) => { if (e.key === 'Enter' || e.key === ' ')
-            this.handleTimeValueClick(unit, value, e); }}"
           >${value}
           </div>`);
     }
@@ -448,103 +318,32 @@ let NileCalendar = 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) => { 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', {
+          <span
+            >${new Date(year, month).toLocaleString('default', {
             month: 'long',
         })}
-    ${year}</span
-  >
-`}
-</div>
-
+            ${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) => { if (e.key === 'Enter' || e.key === ' ')
-            this.nextMonth(); }}"
             @click="${this.nextMonth}"
           >
           </nile-icon>
         </div>
         <div class="days_container">
-            <div class="day_name">Sun</div>
-            <div class="day_name">Mon</div>
-          <div class="day_name">Tue</div>
-          <div class="day_name">Wed</div>
-          <div class="day_name">Thu</div>
-          <div class="day_name">Fri</div>
-          <div class="day_name">Sat</div>
+          <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>
 
           ${allDays.map((day, index) => {
             const isCurrentMonth = index >= fillerDaysBefore.length &&
@@ -560,17 +359,13 @@ ${this.showMonthDropdown || this.showYearDropdown ? html `
                 classMapObj[datePlacement] = true;
             return html ` 
             <div
-              part="calendar-day-${day}"
               class=${classMap(classMapObj)}
-              tabindex="${isCurrentMonth && this.isAllowedDate(day, month, year) ? '0' : '-1'}"
-              @keydown="${(e) => { 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>`;
         })}
@@ -601,17 +396,10 @@ ${this.showMonthDropdown || this.showYearDropdown ? html `
             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;
         }
-        this.requestUpdate();
         this.emit('nile-clear');
     }
     /**
@@ -635,12 +423,6 @@ ${this.showMonthDropdown || this.showYearDropdown ? html `
                 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) {
                     this.startDate = selectedDate;
@@ -809,11 +591,8 @@ ${this.showMonthDropdown || this.showYearDropdown ? html `
     }
     nextMonth() {
         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++;
@@ -821,11 +600,8 @@ ${this.showMonthDropdown || this.showYearDropdown ? html `
     }
     prevMonth() {
         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--;
@@ -847,7 +623,7 @@ ${this.showMonthDropdown || this.showYearDropdown ? html `
         return new Date(Date.UTC(dateStr.slice(0, 4), dateStr.slice(5, 7) - 1, dateStr.slice(8, 10)));
     }
     emitChangedData(data) {
-        this.emit('nile-changed', data); // deprecated. Use nile-change instead
+        this.emit('nile-changed', data);
         this.emit('nile-change', data);
     }
     getDaysArray(year, month) {
@@ -888,21 +664,6 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], NileCalendar.prototype, "showManualInputs", void 0);
-__decorate([
-    property({ type: Number, attribute: true, reflect: true })
-], NileCalendar.prototype, "startYear", void 0);
-__decorate([
-    property({ type: Number, attribute: true, reflect: true })
-], NileCalendar.prototype, "endYear", void 0);
-__decorate([
-    property({ type: Boolean, attribute: true, reflect: true })
-], NileCalendar.prototype, "showMonthDropdown", void 0);
-__decorate([
-    property({ type: Boolean, attribute: true, reflect: true })
-], NileCalendar.prototype, "showYearDropdown", void 0);
-__decorate([
-    property({ type: String, reflect: true, attribute: true })
-], NileCalendar.prototype, "dateFormat", void 0);
 __decorate([
     state()
 ], NileCalendar.prototype, "startDate", void 0);