@aquera/nile-elements 0.0.3-9 → 0.0.4-1

package/src/nile-date-picker/nile-date-picker.ts

@@ -164,9 +164,12 @@ export class NileDatePicker extends NileElement {
     this.requestUpdate();
   }
 
-
-
-
+  handleChanged(event:any) {
+    this.emit('nile-changed', { value: event.detail.value });
+    if (this.dropdown) {
+      this.dropdown.hide();
+    }
+  }
 
   connectedCallback() {
     super.connectedCallback();
@@ -182,310 +185,6 @@ export class NileDatePicker extends NileElement {
     }
   }
 
-  private getDaysArray(year: number, month: number): number[] {
-    const daysInMonth = new Date(year, month + 1, 0).getDate();
-    return Array.from({ length: daysInMonth }, (_, i) => i + 1);
-  }
-
-  private nextMonth(): void {
-
-    if (this.currentMonth === 11) {
-      this.currentMonth = 0;
-      this.currentYear++;
-    } else {
-      this.currentMonth++;
-    }
-    this.requestUpdate();
-  }
-
-  private prevMonth(): void {
-
-    if (this.currentMonth === 0) {
-      this.currentMonth = 11;
-      this.currentYear--;
-    } else {
-      this.currentMonth--;
-    }
-    this.requestUpdate();
-  }
-
-  private selectDate(day: number, month: number, year: number): void {
-    const selectedDate = new Date(year, month, day);
-
-    if (this.range) {
-      if (this.startDate && this.endDate) {
-        this.startDate = null;
-        this.endDate = null;
-      }
-
-      if (this.isSelectingStart) {
-        this.startDate = selectedDate;
-        if (this.endDate && selectedDate > this.endDate) {
-          this.endDate = null;
-        }
-        this.isSelectingStart = false;
-      } else {
-        this.isSelectingStart = true;
-
-        if (this.startDate && selectedDate < this.startDate) {
-          this.startDate = selectedDate;
-          this.endDate = null;
-          this.isSelectingStart = false;
-        } else {
-          this.endDate = selectedDate;
-        }
-      }
-    } else {
-      this.value = selectedDate;
-      this.emit('nile-changed', { value: this.value });
-      if (this.dropdown) {
-        this.dropdown.hide();
-      }
-    }
-
-    this.requestUpdate();
-  }
-
-  private confimRange() {
-    if (this.startDate && this.endDate) {
-      this.emit('nile-range-changed', {
-        startDate: this.startDate,
-        endDate: this.endDate,
-      });
-      if (this.dropdown) {
-        this.dropdown.hide();
-      }
-
-      this.rangeValue = {
-        startDate: this.startDate,
-        endDate: this.endDate,
-      };
-    }
-  }
-
-  private renderMonth(
-    year: number,
-    month: number,
-    daysArray: number[]
-  ): TemplateResult {
-    const firstDay = new Date(year, month, 1).getDay();
-    const lastDay = new Date(year, month + 1, 0).getDay();
-    const prevMonthDays = this.getDaysArray(
-      month === 0 ? year - 1 : year,
-      month === 0 ? 11 : month - 1
-    );
-    const nextMonthDays = this.getDaysArray(
-      month === 11 ? year + 1 : year,
-      month === 11 ? 0 : month + 1
-    );
-    const fillerDaysBefore = prevMonthDays.slice(
-      prevMonthDays.length - firstDay
-    );
-    const fillerDaysAfter = nextMonthDays.slice(0, 6 - lastDay);
-    const allDays = [...fillerDaysBefore, ...daysArray, ...fillerDaysAfter];
-
-    const isSelectedDate = (
-      day: number,
-      month: number,
-      year: number,
-      isCurrentMonth: boolean
-    ) => {
-      if (!isCurrentMonth) return '';
-
-      if (!this.range && this.value) {
-        const isSelected =
-          day === this.value.getDate() &&
-          month === this.value.getMonth() &&
-          year === this.value.getFullYear();
-        if (isSelected) return 'selected-date';
-      }
-
-      const isStartDate =
-        this.startDate &&
-        day === this.startDate.getDate() &&
-        month === this.startDate.getMonth() &&
-        year === this.startDate.getFullYear();
-      const isEndDate =
-        this.endDate &&
-        day === this.endDate.getDate() &&
-        month === this.endDate.getMonth() &&
-        year === this.endDate.getFullYear();
-
-      return isStartDate ? 'range-start' : isEndDate ? 'range-end' : '';
-    };
-
-    const isInRange = (
-      day: number,
-      month: number,
-      year: number,
-      isCurrentMonth: boolean
-    ) => {
-      if (!isCurrentMonth) return false;
-      if (this.startDate && this.endDate) {
-        const date = new Date(year, month, day);
-        return date >= this.startDate && date <= this.endDate;
-      }
-      return false;
-    };
-
-    return html`
-      <div class="calendar">
-        <div class="calendar-header">
-          <nile-icon name="arrowleft" color="black" @click="${this.prevMonth}">
-          </nile-icon>
-          <span
-            >${new Date(year, month).toLocaleString('default', {
-              month: 'long',
-            })}
-            ${year}</span
-          >
-          <nile-icon name="arrowright" color="black" @click="${this.nextMonth}">
-          </nile-icon>
-        </div>
-        <div class="day-names">
-          <div class="day">Sun</div>
-          <div class="day">Mon</div>
-          <div class="day">Tue</div>
-          <div class="day">Wed</div>
-          <div class="day">Thu</div>
-          <div class="day">Fri</div>
-          <div class="day">Sat</div>
-        </div>
-        <div class="days">
-          ${allDays.map((day, index) => {
-            const isCurrentMonth =
-              index >= fillerDaysBefore.length &&
-              index < fillerDaysBefore.length + daysArray.length;
-            return html` <div
-              class="day ${isSelectedDate(
-                day,
-                month,
-                year,
-                isCurrentMonth
-              )} ${isInRange(day, month, year, isCurrentMonth)
-                ? 'in-range'
-                : ''} ${!isCurrentMonth ? 'filler' : ''}"
-              @click="${() => {
-                if (isCurrentMonth) {
-                  this.selectDate(day, month, year);
-                }
-              }}"
-            >
-              ${day}
-            </div>`;
-          })}
-        </div>
-      </div>
-    `;
-  }
-
-  private formatDate(date: Date | null): string {
-    if (!date) return '';
-    const day = String(date.getDate()).padStart(2, '0');
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const year = date.getFullYear();
-    return `${day}/${month}/${year}`;
-  }
-
-  private formatDateRange(value: { startDate: Date | null, endDate: Date | null }): string {
-    if(!value){
-      return value;
-    }
-    if (!value.startDate || !value.endDate) return '';
-    return `${this.formatDate(value.startDate)} - ${this.formatDate(value.endDate)}`;
-  }
-
-  private handleStartDateInput(event: CustomEvent): void {
-    const date = this.parseDate(event.detail.value);
-    if (!this.isValidDateInput(date)) {
-      this.startDate = null;
-    }
-    if (date && (!this.endDate || date <= this.endDate)) {
-      this.startDate = date;
-    } else {
-      this.startDate = null;
-      this.endDate = null;
-    }
-    this.requestUpdate();
-  }
-
-  private handleEndDateInput(event: CustomEvent): void {
-    const date = this.parseDate(event.detail.value);
-    if (!this.isValidDateInput(date)) {
-      this.endDate = null;
-    }
-    if (date && (!this.startDate || date >= this.startDate)) {
-      this.endDate = date;
-    } else {
-      this.endDate = null;
-
-    }
-    this.requestUpdate();
-  }
-
-  private parseDate(dateString: string): Date | null {
-    const [day, month, year] = dateString.split('/').map(Number);
-    const date = new Date(year, month - 1, day);
-    return !isNaN(date.getTime()) ? date : null;
-  }
-
-  private isValidDateInput(input: any): boolean {
-    const regex = /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/\d{4}$/;
-    return regex.test(input);
-  }
-
-  private formatTime(date: Date | null): string {
-    if (!date) return '';
-    const hours = String(date.getHours()).padStart(2, '0');
-    const minutes = String(date.getMinutes()).padStart(2, '0');
-    const seconds = String(date.getSeconds()).padStart(2, '0');
-    return `${hours}:${minutes}:${seconds}`;
-  }
-
-  // Validate time in HH:MM:SS format
-  private isValidTimeInput(input: string): boolean {
-    const regex = /^([0-1]?[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/;
-    return regex.test(input);
-  }
-
-// Parse time string to a Date object
-private parseTime(input: string, date: Date): Date | null {
-  if (!this.isValidTimeInput(input)) {
-    return null;
-  }
-  const [hour, minute, second] = input.split(':').map(Number);
-  const newDate = new Date(date.getTime());
-  newDate.setHours(hour, minute, second);
-  return newDate;
-}
-
-private handleStartTimeInput(event: CustomEvent): void {
-  if (!this.startDate) {
-    this.startDate = null;
-    return;
-  }
-  const time = this.parseTime(event.detail.value, this.startDate);
-  if (time) {
-    this.startDate = time;
-  } else {
-    this.startDate.setHours(0, 0, 0);
-  }
-  this.requestUpdate();
-}
-
-private handleEndTimeInput(event: CustomEvent): void {
-  if (!this.endDate) {
-    this.endDate = null;
-    return;
-  }
-  const time = this.parseTime(event.detail.value, this.endDate);
-  if (time) {
-    this.endDate = time;
-  } else {
-    this.endDate.setHours(0, 0, 0);
-  }
-  this.requestUpdate();
-}
 
 
 
@@ -498,82 +197,16 @@ private handleEndTimeInput(event: CustomEvent): void {
    * @slot This is a slot test
    */
   render(): TemplateResult {
-    const daysArray = this.getDaysArray(this.currentYear, this.currentMonth);
-    const nextMonth = (this.currentMonth + 1) % 12;
-    const nextYear =
-      this.currentMonth === 11 ? this.currentYear + 1 : this.currentYear;
-    const nextMonthDaysArray = this.getDaysArray(nextYear, nextMonth);
 
     return html`
-      <nile-dropdown>
-      ${this.range ? html`
-        <nile-input
-          slot="trigger"
-          label="Choose a date range"
-          readonly
-          value="${this.formatDateRange(this.rangeValue)}"
-        >
-        <nile-icon name="calendar" slot="suffix"> </nile-icon>
-        </nile-input>
-      ` : html`
-        <nile-input
-          slot="trigger"
-          label="Choose a date"
-          readonly
-          value="${this.formatDate(this.value)}"
-        >
-        <nile-icon name="calendar" slot="suffix"> </nile-icon>
-        </nile-input>
-      `}
-
-        <div class="base">
-          <div class="calendar-wrapper">
-            <div class="calendar-container ${this.range ? 'with-margin' : ''}">
-              ${this.renderMonth(
-                this.currentYear,
-                this.currentMonth,
-                this.getDaysArray(this.currentYear, this.currentMonth)
-              )}
-            </div>
-            ${this.range
-              ? html`
-                  <div class="calendar-container">
-                    ${this.renderMonth(
-                      this.currentYear,
-                      (this.currentMonth + 1) % 12,
-                      this.getDaysArray(
-                        this.currentYear,
-                        (this.currentMonth + 1) % 12
-                      )
-                    )}
-                  </div>
-                `
-              : ''}
-          </div>
-          ${this.range
-            ? html`
-          <div class="calender-input">
-            <span class="manual-input-label">From </span>
-            <div class="from">
-              <nile-input class="manual-input" value="${this.formatDate(this.startDate)}" placeholder="DD/MM/YYYY" @nile-change="${this.handleStartDateInput}"></nile-input>
-              <nile-input class="manual-input" value="${this.formatTime(this.startDate)}" placeholder="HH:MM:SS" @nile-change="${this.handleStartTimeInput}"> </nile-input>
-
-            </div>
-<br>
-            <span class="manual-input-label">To </span>
-            <div class="from">
-            <nile-input class="manual-input" value="${this.formatDate(this.endDate)}" placeholder="DD/MM/YYYY" @nile-change="${this.handleEndDateInput}"></nile-input>
-            <nile-input class="manual-input" value="${this.formatTime(this.endDate)}" placeholder="HH:MM:SS" @nile-change="${this.handleEndTimeInput}"> </nile-input>
-          </div>
-<nile-button class="apply-button"  ?disabled="${
-                !this.startDate || !this.endDate
-              }"  @click="${this.confimRange}"> Apply</nile-button>
-
-        </div>
-        </div>
-        `
-            : ''}
-        </div>
+      <nile-dropdown .hoist="${true}">
+        <slot
+        slot="trigger"
+        part="trigger"
+        name="trigger"
+      ></slot>
+
+<nile-calendar .value="${this.range}" .range="${this.range}" @nile-changed="${this.handleChanged}"> </nile-calendar>
       </nile-dropdown>
     `;
   }

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

@@ -713,7 +713,7 @@ export class NileSelect extends NileElement implements NileFormControl {
     allOptions.forEach(el => {
       const lowerCaseLabel = el.getTextLabel().toLowerCase();
       const lowerCaseValue = (el.value || '').toLowerCase();
-      if (lowerCaseLabel.startsWith(lowerCaseSearchValue) || lowerCaseValue.startsWith(lowerCaseSearchValue)) {
+      if (lowerCaseLabel.includes(lowerCaseSearchValue) || lowerCaseValue.includes(lowerCaseSearchValue)) {
         el.hidden = false;
         filteredOptions.push(el);
       } else {