@aquera/nile-elements 1.3.3-beta-1.4 → 1.3.3-beta-1.6

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

@@ -1,1001 +0,0 @@
-/**
- * Copyright Aquera Inc 2023
- *
- * This source code is licensed under the BSD-3-Clause license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import {
-  html,
-  CSSResultArray,
-  TemplateResult,
-  nothing
-} from 'lit';
-import { customElement, state, property } from 'lit/decorators.js';
-import { styles } from './nile-calendar.css';
-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';
-/**
- * Nile icon component.
- *
- * @tag nile-calendar
- *
- */
-@customElement('nile-calendar')
-export class NileCalendar extends NileElement {
-  /**
-   * The styles for NileCalendar
-   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
-   */
-  public static get styles(): CSSResultArray {
-    return [styles];
-  }
-
-
-
-  @property({ type: String, attribute: 'value' }) valueAttribute: | string | null = null;
-
-  @property({ type: String, attribute:true, reflect:true }) allowedDates: string = JSON.stringify({});
-
-  @property({ type: Boolean, reflect: true }) range = false;
-
-  @property({ type: Boolean, attribute: true, reflect:true }) hideTypes = false;
-
-  @property({ type: Boolean, reflect: true }) doubleClickUnselect = false;
-
-  @property({ type: Boolean, reflect: true }) allowClear = false;
-
-  @property({ type: String, reflect: true }) type :'absolute' | 'relative' = 'absolute';
-
-  @property({ type: String }) selectedUnit: TimeUnits;
-
-  @property({ type: Number }) selectedValue: number;
-
-  @property({ type: Array, attribute: 'hide-duration-fields' }) hideDurationFields: String[] = [];
-  
-  @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;
-
-  @state() isSelectingStart = true;
-
-  @state() hideInput: Boolean = false;
-
-  @state() value: Date | null;
-
-  @state() currentMonth: number = new Date().getMonth();
-
-  @state() currentYear: number = new Date().getFullYear();
-
-  @state() allowedDatesLocal: NileCalendarDateRange | any = null;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.initializeValue();
-    this.emit('nile-init');
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.emit('nile-destroy');
-  }
-
-  protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
-    super.updated(changedProperties);
-    if (changedProperties.has('valueAttribute')) {
-      if(!this.valueAttribute){
-        this.value=null;
-        this.startDate=null;
-        this.endDate=null;
-        this.isSelectingStart=true;
-      }
-      const date = new Date(this.valueAttribute || '');
-      if (!isNaN(date.getTime())) {
-        const offset = date.getTimezoneOffset();
-        this.value = new Date(date.getTime() - offset * 60 * 1000);
-        this.currentMonth = this.value.getMonth();
-        this.currentYear = this.value.getFullYear();
-      }
-      this.initializeValue();
-    }
-  }
-
-  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;
-    try {
-      newDateRange=JSON.parse(this.allowedDates);
-    } catch (error) {
-      newDateRange=null;
-    }
-    if (!newDateRange || Object.keys(newDateRange).length == 0) {
-      this.allowedDatesLocal=null;
-      return;
-    }
-    this.hideInput=true;
-    const startDate = this.getUTCDate(newDateRange.startDate)
-    const endDate = this.getUTCDate(newDateRange.endDate)
-
-    if (startDate > endDate) {
-      console.error('StartDate must be greater than endDate');
-    }
-    else
-    {
-      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();
-  }
-}
-
-  
-
-  /**
-   * Render method
-   */
-  render(): TemplateResult {
-    return html`
-      <div
-        class=${classMap({
-          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">
-            <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-group>
-          </div>
-        </div>
- 
-        ${this.type == 'relative' ? this.renderRelativeCalendar():''}
-        ${this.type == 'absolute' ? this.renderAbsoluteCalendar():''}
-
-        ${!this.range?'':html`
-        <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}"
-
-            > 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>
-        `}
-      </div>
-    `;
-  }
-
-  /**
-   * @returns HTML content for absolute calendar
-   */
-  renderAbsoluteCalendar(){
-    return html`
-    <div class="calendar-wrapper" part="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">
-        <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>
-    `:''}
-    `
-  }
-
-  /**
-   * @returns HTML content for relative calendar
-   */
-  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>
-      </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 
-   * @param values 
-   * @returns html for the option
-   */
-  renderTimeValues(unit: TimeUnits, values: any[]) {
-    return values.map(
-      value =>
-        html`
-          <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>`
-    );
-  }
-
-  /**
-   * 
-   * @param year 
-   * @param month 
-   * @param daysArray 
-   * @returns HTML for rendered month
-   */
-  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;
-    };
-
-    const isCurrentDate = (day: number, month: number, year: number) => {
-      const today = new Date();
-      return (
-        day === today.getDate() &&
-        month + 1 === today.getMonth() + 1 &&
-        year === today.getFullYear()
-      );
-    };
-    const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-    return html`
-      <div class="calendar">
-        <div class="calendar-header">
-          <nile-icon
-            class="calendar-header__month-navigation"
-            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>
-
-          <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">
-        ${dayNames.map(day => html`<div class="day_name">${day}</div>`)}
-          ${allDays.map((day, index) => {
-            const isCurrentMonth =
-              index >= fillerDaysBefore.length &&
-              index < fillerDaysBefore.length + daysArray.length;
-            const datePlacement:''|'selected-date'|'range-start'|'range-end' = isSelectedDate(day, month, year, isCurrentMonth)
-            const classMapObj:any={
-              'day_date' : true,
-              'not-allowed' : !this.isAllowedDate(day, month, year),
-              'in-range' : isInRange(day, month, year, isCurrentMonth) ,
-              'filler' : !isCurrentMonth,
-            }
-            if(datePlacement) classMapObj[datePlacement]=true
-            
-            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}
-              </span>
-            </div>`;
-          })}
-        </div>
-      </div>
-    `;
-  }
-
-  /**
-   * Function to validate if date is not in allowedDates range
-   * @param day 
-   * @param month 
-   * @param year 
-   * @returns 
-   */
-  isAllowedDate(day: number, month: number, year: number) {
-    if (!this.allowedDatesLocal) {
-      return true;
-    }
-    const dateToCheck = new Date(Date.UTC(year, month, day));
-    const startDate = this.getUTCDate(this.allowedDatesLocal.startDate)
-    const endDate = this.getUTCDate(this.allowedDatesLocal.endDate)
-    endDate.setUTCHours(23, 59, 59, 999);
-    const isWithinRange = dateToCheck >= startDate && dateToCheck <= endDate;
-    return isWithinRange;
-  }
-
-  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.requestUpdate();
-    this.emit('nile-clear');
-  }  
-
-  
-
-  /**
-   * @function handle_date-click/select
-   * @param day 
-   * @param month 
-   * @param year 
-   */
-  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 {
-        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;
-          this.endDate = null;
-          this.isSelectingStart = false;
-        } else {
-          const endDate = selectedDate;
-          endDate.setHours(23, 59, 59, 999);
-          this.endDate = endDate;
-        }
-      }
-    } else {
-      if(String(this.value)==String(selectedDate) && this.doubleClickUnselect){
-        this.clearDate()
-        return
-      }
-      this.value = selectedDate;
-      this.emitChangedData({ value: this.value });
-    }
-  }
-
-  /**
-   * Function to be called on initialization to set all other properties
-   */
-  initializeValue() {
-    if (this.range) {
-      try {
-        const rangeValue = JSON.parse(this.valueAttribute || '');
-        this.startDate = new Date(rangeValue.startDate);
-        this.endDate = new Date(rangeValue.endDate);
-
-        // Convert to local time
-        this.startDate = new Date(this.startDate.getTime());
-        this.endDate = new Date(this.endDate.getTime());
-
-        this.value = null;
-      } catch (e) {
-        // console.error('Invalid range value');
-      }
-    } else {
-      if (this.valueAttribute) {
-        let date: Date = new Date(this.valueAttribute);
-
-        date = new Date(date.getTime() - date.getTimezoneOffset() * 60000);
-
-        if (!isNaN(date.getTime())) {
-          this.value = date;
-          this.currentMonth = this.value.getMonth();
-          this.currentYear = this.value.getFullYear();
-        }
-      }
-    }
-  }
-
-  /**
-   * Function to handle relative date selection
-   */
-  handleDurationChange(event: CustomEvent) {
-    event.stopPropagation()
-    event.detail.value = event.detail.value.replace(/e/gi, "");
-    const duration=Number(event.detail.value);
-    if(!duration) {
-      return
-    };
-    this.selectedValue = duration
-    if (this.selectedUnit && this.selectedValue) {
-      this.handleTimeValueClick(this.selectedUnit, this.selectedValue, event);
-    }
-  }
-
-  handleUnitChange(event: CustomEvent) {
-    event.stopPropagation()
-    this.selectedUnit = event.detail.value;
-    if (this.selectedUnit && this.selectedValue) {
-      this.handleTimeValueClick(this.selectedUnit, this.selectedValue, event);
-    }
-  }
-
-  handleTimeValueClick(unit: TimeUnits, value: number, event: any) {
-    this.createRelativePeriod(unit, value)
-    this.selectedUnit = unit;
-    this.selectedValue = value;
-  }
-
-  createRelativePeriod(unit: String, value: number) {
-    const endTime = new Date();
-    const startTime = new Date();
-
-    switch (unit) {
-      case 'minutes':
-        startTime.setMinutes(startTime.getMinutes() - value);
-        break;
-      case 'hours':
-        startTime.setHours(startTime.getHours() - value);
-        break;
-      case 'days':
-        startTime.setDate(startTime.getDate() - value);
-        break;
-      case 'weeks':
-        startTime.setDate(startTime.getDate() - 7 * value); // Subtract weeks as days
-        break;
-      case 'months':
-        startTime.setMonth(startTime.getMonth() - value);
-        break;
-    }
-
-    this.startDate = new Date(startTime.getTime());
-    this.endDate = new Date(endTime.getTime());
-
-    return {
-      startDate: this.startDate,
-      endDate: this.endDate,
-    };
-  }
-  
-  /**
-   * Function to handle start time selecion
-   */
-  private handleStartTimeInput(event: CustomEvent): void {
-    event.stopPropagation()
-    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();
-  }
-  
-  /**
-   * Function to handle end time selecion
-   */
-  private handleEndTimeInput(event: CustomEvent): void {
-    event.stopPropagation()
-    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();
-  }
-
-  // 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;
-  }
-
-  // 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);
-  }
-
-  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}`;
-  }
-
-  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;
-    } else {
-      this.currentMonth++;
-    }
-  }
-
-  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;
-    } else {
-      this.currentMonth--;
-    }
-  }
-
-  private confimRange() {
-    if (!(this.startDate && this.endDate)) return;
-    this.emitChangedData( {
-      startDate: this.startDate,
-      endDate: this.endDate,
-    });
-  }
-
-  onTypeChange(event: CustomEvent) {
-    this.type = event.detail.value;
-    this.emit('nile-type-change', { value: this.type })
-  }
-  getUTCDate(dateStr:any){
-   return  new Date(
-      Date.UTC(
-        dateStr.slice(0, 4),
-        dateStr.slice(5, 7) - 1,
-        dateStr.slice(8, 10)
-      )
-    )
-  }
-
-  emitChangedData(data:{startDate:Date,endDate:Date}|{value:any}|null){
-    this.emit('nile-changed',data); // deprecated. Use nile-change instead
-    this.emit('nile-change',data)
-  }
-
-  private getDaysArray(year: number, month: number): number[] {
-    const daysInMonth = new Date(year, month + 1, 0).getDate();
-    return Array.from({ length: daysInMonth }, (_, i) => i + 1);
-  }
-}
-
-export default NileCalendar;
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-calendar': NileCalendar;
-  }
-}