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

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

@@ -0,0 +1,1001 @@
+/**
+ * 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;
+  }
+}