@aquera/nile-elements 0.0.95 → 0.0.97

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

@@ -6,7 +6,6 @@
  */
 
 import {
-  LitElement,
   html,
   property,
   CSSResultArray,
@@ -15,26 +14,13 @@ import {
 } from 'lit-element';
 import { customElement, state } from 'lit/decorators.js';
 import { styles } from './nile-calendar.css';
-import { animateTo, stopAnimations } from '../internal/animate';
 import { classMap } from 'lit/directives/class-map.js';
 import { query } from 'lit/decorators.js';
-import {
-  getAnimation,
-  setDefaultAnimation,
-} from '../utilities/animation-registry';
-import { getTabbableBoundary } from '../internal/tabbable';
-import { waitForEvent } from '../internal/event';
 import { watch } from '../internal/watch';
 import NileElement from '../internal/nile-element';
-import type { CSSResultGroup, PropertyValues } from 'lit';
-import type NileButton from '../nile-button/nile-button';
-import type NileIconButton from '../nile-icon-button/nile-icon-button';
-import type { NileMenu } from '../nile-menu';
-import type { NilePopup } from '../nile-popup';
-import '../nile-popup';
+import type { PropertyValueMap } from 'lit';
 import { NileDropdown } from '../nile-dropdown';
-import { TIMEZONES } from './timezones';
-
+type NileCalendarDateRange={ startDate: string, endDate: string }
 /**
  * Nile icon component.
  *
@@ -44,115 +30,107 @@ import { TIMEZONES } from './timezones';
 @customElement('nile-calendar')
 export class NileCalendar extends NileElement {
   /**
-* The styles for NileCalendar
+   * 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];
   }
 
-  private currentMonth: number = new Date().getMonth();
+  @query('nile-dropdown') dropdown: NileDropdown;
 
-  private currentYear: number = new Date().getFullYear();
+  @property({ type: String, attribute: 'value' }) valueAttribute: | string | null = null;
 
-  @query('nile-dropdown') dropdown: NileDropdown;
+  @property({ type: String, attribute:true, reflect:true }) allowedDates: string = JSON.stringify({});
 
-  @property({ type: Boolean, reflect: true }) dropDownOpened = false;
+  @property({ type: Boolean }) range = false;
 
-  @property({ type: Object }) value: any;
+  @property({ type: String }) type = 'absolute';
 
-  @property({ type: Object, attribute: 'allowed-dates' })
-  allowedDates: any = {};
+  @property({ type: String }) selectedUnit: string;
 
-  @property({ type: Object }) rangeValue: any;
+  @property({ type: Number }) selectedValue: number;
 
-  @property({ type: String, attribute: 'value' }) valueAttribute:
-    | string
-    | null = null;
+  @property({ type: Array, attribute: 'hide-duration-fields' }) hideDurationFields: String[] = [];
+  
+  @property({ type: Boolean}) showManualInputs :boolean=false;
 
-  @property({ type: String, attribute: 'value' }) formattedDate: string | null =
-    null;
+  @state() startDate: Date | null = null;
 
-  @property({ type: Object }) startDate: Date | null = null;
+  @state() endDate: Date | null = null;
 
-  @property({ type: Object }) endDate: Date | null = null;
+  @state() isSelectingStart = true;
 
-  @property({ type: Boolean }) isSelectingStart = true;
+  @state() hideInput: Boolean = false;
 
-  @property({ type: Boolean }) range = false;
+  @state() value: Date | null;
 
-  @property({ type: String }) type = 'absolute';
+  @state() currentMonth: number = new Date().getMonth();
 
-  @property({ type: String }) selectedUnit: string;
+  @state() currentYear: number = new Date().getFullYear();
 
-  @property({ type: Number }) selectedValue: number;
+  @state() allowedDatesLocal: NileCalendarDateRange | any = null;
 
-  @property({ type: String }) selectedTimeZone: string = 'local';
+  connectedCallback() {
+    super.connectedCallback();
+    this.initializeValue();
+    this.emit('nile-init');
+  }
 
-  @state() validAllowedDates = true;
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.emit('nile-destroy');
+  }
 
-  firstUpdated() {
-    const allowedDatesAttribute = this.getAttribute('allowed-dates');
+  protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
+    super.updated(changedProperties);
 
-    if (allowedDatesAttribute !== null ) {
-      try {
-        this.allowedDates = JSON.parse(allowedDatesAttribute);
-      } catch (error) {
-        console.error('Error parsing allowed-dates attribute:', error);
+    if (changedProperties.has('valueAttribute')) {
+      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();
       }
     }
-    else
-    {
-      this.validAllowedDates=false;
-    }
+  }
+
+  attributeChangedCallback(name: string, _old: string | null, newValue: string | null): void {
+    if (name === 'value') {
+      this.valueAttribute = newValue;
+      this.initializeValue();
+    } 
   }
 
   @watch('allowedDates')
   checkValidAllowedDate() {
-    if (Object.keys(this.allowedDates).length ==0) {
-      this.validAllowedDates = false;
+    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 = new Date(
-      Date.UTC(
-        this.allowedDates?.startDate?.slice(0, 4),
-        this.allowedDates?.startDate?.slice(5, 7) - 1,
-        this.allowedDates?.startDate?.slice(8, 10)
-      )
-    );
-    const endDate = new Date(
-      Date.UTC(
-        this.allowedDates?.endDate?.slice(0, 4),
-        this.allowedDates?.endDate?.slice(5, 7) - 1,
-        this.allowedDates?.endDate?.slice(8, 10)
-      )
-    );
+    const startDate = this.getUTCDate(newDateRange.startDate)
+    const endDate = this.getUTCDate(newDateRange.endDate)
 
     if (startDate > endDate) {
       console.error('StartDate must be greater than endDate');
-      this.validAllowedDates=false;
     }
     else
     {
-      this.validAllowedDates=true;
+      this.allowedDatesLocal=newDateRange;
     }
   }
-
-  @state() hideInput: Boolean = false;
-
-
-  @property({ type: Array, attribute: 'hide-duration-fields' })
-  hideDurationFields: String[] = [];
-  @property({ type: Boolean , attribute: 'hide-time-zone' }) hideTimeZone: Boolean = false;
-
-  @property({ type: Boolean , attribute: 'show-manual-inputs', reflect: true }) showManualInputs: Boolean = false;
-
+  
   @watch('value')
   valueChanged() {
-
     if (this.range && this.value) {
-      this.rangeValue = this.value;
       this.value = null;
       return;
     }
@@ -162,230 +140,182 @@ export class NileCalendar extends NileElement {
       const localDate = new Date(this.value.getTime() - offset * 60 * 1000);
       if (!isNaN(localDate.getTime())) {
         this.valueAttribute = localDate.toISOString().split('T')[0];
-        this.formattedDate = `${String(localDate.getDate()).padStart(
-          2,
-          '0'
-        )}/${String(localDate.getMonth() + 1).padStart(
-          2,
-          '0'
-        )}/${localDate.getFullYear()}`;
       }
     }
   }
 
-  updated(changedProperties: PropertyValues) {
-    super.updated(changedProperties);
-
-    if (changedProperties.has('valueAttribute')) {
-      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();
-      }
-    }
-  }
+  /**
+   * Render method
+   */
+  render(): TemplateResult {
+    return html`
+      <div
+        class=${classMap({
+          base:true,
+          base__range:this.range,
+        })}
+      >
+        <div class="calendar-config ${!this.range ? 'hidden' : ''}">
+          <div class="calendar-switcher">
+            <nile-tab-group centered @nile-tab-show="${this.onTypeChange}">
+              <nile-tab slot="nav" panel="absolute">Absolute</nile-tab>
+              <nile-tab slot="nav" panel="relative">Relative</nile-tab>
+            </nile-tab-group>
+          </div>
+        </div>
 
-  static get observedAttributes() {
-    return ['value', 'range'];
-  }
+        ${this.type == 'relative' ? this.renderRelativeCalendar():''}
+        ${this.type == 'absolute' ? this.renderAbsoluteCalendar():''}
 
-  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
-    if (name === 'value') {
-      this.valueAttribute = newValue;
-      this.initializeValue();
-    } else if (name === 'range') {
-      this.range = newValue !== null;
-    }
+        ${!this.range?'':html`
+        <div class="button-container">
+          <nile-button 
+          class="apply-button"  
+          ?disabled="${ !this.startDate || !this.endDate }"  
+          @click="${this.confimRange}"
+          > Apply</nile-button>
+        </div>
+        `}
+      </div>
+    `;
   }
 
-  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());
+  /**
+   * @returns HTML content for absolute calendar
+   */
+  renderAbsoluteCalendar(){
+    return html`
+    <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">
+          <nile-input 
+            label="From"
+            class="manual-input" 
+            value="${this.formatTime(this.startDate)}" 
+            placeholder="HH:MM:SS" @nile-change="${this.handleStartTimeInput}"
+          > </nile-input>
+        </div>
 
-        this.rangeValue = {
-          startDate: this.startDate,
-          endDate: this.endDate,
-        };
-        this.value = null;
-      } catch (e) {
-        // console.error('Invalid range value');
-      }
-    } else {
-      if (this.valueAttribute) {
-        let date: Date;
+        <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>
+    `:''}
+    `
+  }
 
-        date = new Date(this.valueAttribute);
+  /**
+   * @returns HTML content for relative calendar
+   */
+  renderRelativeCalendar(){
+    return html`
+    <div class="units-wrapper">
+      <div class="unit-container">
+        ${this.hideDurationFields?.includes('minutes')?'':html`
+        <div class="duration-name">Minutes</div>
+        <div class="duration-units">
+          ${this.renderTimeValues('minutes', [1, 5, 15, 30, 45])}
+        </div>
+        `}
 
-        date = new Date(date.getTime() - date.getTimezoneOffset() * 60000);
+        ${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"  
+        value="${this.selectedValue}" 
+        @nile-input="${this.handleDurationChange}"
+        placeholder="Enter Value"
+        ></nile-input>
 
-        if (!isNaN(date.getTime())) {
-          this.value = date;
-          this.currentMonth = this.value.getMonth();
-          this.currentYear = this.value.getFullYear();
-          this.rangeValue = null;
-        }
-      }
-    }
-    this.requestUpdate();
+        <nile-select class="manual-input time-input"  
+          label="Unit of time" 
+          style="margin-top:3px" 
+          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>
+    `:''}
+    `
   }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.initializeValue();
-
-    if (this.valueAttribute) {
-      const date = new Date(this.valueAttribute);
-      if (!isNaN(date.getTime())) {
-        this.value = date;
-        this.currentMonth = this.value.getMonth();
-        this.currentYear = this.value.getFullYear();
-      }
-    }
-        this.emit('nile-init');
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.emit('nile-destroy');
-  }
-
-  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 {
-          const endDate = selectedDate;
-          endDate.setHours(23, 59, 59, 999);
-          this.endDate = endDate;
-        }
-      }
-    } 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) {
-      if (this.selectedTimeZone !== 'local') {
-        this.startDate = this.convertTZ(this.startDate, this.selectedTimeZone);
-        this.endDate = this.convertTZ(this.endDate, this.selectedTimeZone);
-      }
-
-      this.emit('nile-changed', {
-        startDate: this.startDate,
-        endDate: this.endDate,
-      });
-      if (this.dropdown) {
-        this.dropdown.hide();
-      }
-
-      this.rangeValue = {
-        startDate: this.startDate,
-        endDate: this.endDate,
-      };
-    }
-  }
-
-  convertTZ(date: Date, tzString: any) {
-    return new Date(
-      (typeof date === 'string' ? new Date(date) : date).toLocaleString(
-        'en-US',
-        { timeZone: tzString }
-      )
-    );
-  }
-
-  isCurrentDate(day: number, month: number, year: number) {
-    const today = new Date();
-    return (
-      day === today.getDate() &&
-      month + 1 === today.getMonth() + 1 &&
-      year === today.getFullYear()
-    );
-  }
-
-  isAllowedDate(day: number, month: number, year: number) {
-    if (!this.validAllowedDates) {
-      return true;
-    }
-    const dateToCheck = new Date(Date.UTC(year, month, day));
-    const startDate = new Date(
-      Date.UTC(
-        this.allowedDates?.startDate?.slice(0, 4),
-        this.allowedDates?.startDate?.slice(5, 7) - 1,
-        this.allowedDates?.startDate?.slice(8, 10)
-      )
-    );
-    const endDate = new Date(
-      Date.UTC(
-        this.allowedDates?.endDate?.slice(0, 4),
-        this.allowedDates?.endDate?.slice(5, 7) - 1,
-        this.allowedDates?.endDate?.slice(8, 10)
-      )
-    );
-    endDate.setUTCHours(23, 59, 59, 999);
-    const isWithinRange = dateToCheck >= startDate && dateToCheck <= endDate;
-    return isWithinRange;
+  
+  /**
+   * 
+   * @param unit 
+   * @param values 
+   * @returns html for the option
+   */
+  renderTimeValues(unit: string, 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)}
+          >${value}
+          </div>`
+    );
   }
 
+  /**
+   * 
+   * @param year 
+   * @param month 
+   * @param daysArray 
+   * @returns HTML for rendered month
+   */
   private renderMonth(
     year: number,
     month: number,
@@ -451,6 +381,15 @@ export class NileCalendar extends NileElement {
       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()
+      );
+    };
+
     return html`
       <div class="calendar">
         <div class="calendar-header">
@@ -493,7 +432,6 @@ export class NileCalendar extends NileElement {
               'day_date' : true,
               'not-allowed' : !this.isAllowedDate(day, month, year),
               'in-range' : isInRange(day, month, year, isCurrentMonth) ,
-              // 'current-date' : this.isCurrentDate(day, month, year) && isCurrentMonth,
               'filler' : !isCurrentMonth,
             }
             if(datePlacement) classMapObj[datePlacement]=true
@@ -505,7 +443,7 @@ export class NileCalendar extends NileElement {
             >
               <span style="position:relative;">
                 ${day}
-                ${this.isCurrentDate(day, month, year) && isCurrentMonth?html`<div class="current__date__dot"></div>`:nothing}
+                ${isCurrentDate(day, month, year) && isCurrentMonth?html`<div class="current__date__dot"></div>`:nothing}
               </span>
             </div>`;
           })}
@@ -514,90 +452,158 @@ export class NileCalendar extends NileElement {
     `;
   }
 
-  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;
+  /**
+   * 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;
     }
-    if (!value.startDate || !value.endDate) return '';
-    return `${this.formatDate(value.startDate)} - ${this.formatDate(
-      value.endDate
-    )}`;
+    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;
   }
 
-  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;
+  /**
+   * @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 {
+        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 {
-      this.startDate = null;
-      this.endDate = null;
+      this.value = selectedDate;
+      this.emitChangedData({ value: this.value });
+      if (this.dropdown) {
+        this.dropdown.hide();
+      }
     }
-    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;
+  /**
+   * 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 {
-      this.endDate = null;
+      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();
+        }
+      }
     }
-    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;
+  /**
+   * Function to handle relative date selection
+   */
+  handleDurationChange(event: any) {
+    this.selectedValue = Number(event.detail.value);
+    if (this.selectedUnit && this.selectedValue) {
+      this.handleTimeValueClick(this.selectedUnit, this.selectedValue, event);
+    }
   }
 
-  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);
+  handleUnitChange(event: any) {
+    this.selectedUnit = event.detail.value;
+    if (this.selectedUnit && this.selectedValue) {
+      this.handleTimeValueClick(this.selectedUnit, this.selectedValue, event);
+    }
   }
 
-  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}`;
+  handleTimeValueClick(unit: string, value: number, event: any) {
+    // const timestamps = this.createRelativePeriod(unit, value);
+    this.selectedUnit = unit;
+    this.selectedValue = value;
   }
 
-  // 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);
-  }
+  createRelativePeriod(unit: String, value: number) {
+    const endTime = new Date();
+    const startTime = new Date();
 
-  // Parse time string to a Date object
-  private parseTime(input: string, date: Date): Date | null {
-    if (!this.isValidTimeInput(input)) {
-      return null;
+    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;
     }
-    const [hour, minute, second] = input.split(':').map(Number);
-    const newDate = new Date(date.getTime());
-    newDate.setHours(hour, minute, second);
-    return newDate;
-  }
 
+    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 {
     if (!this.startDate) {
       this.startDate = null;
@@ -611,7 +617,10 @@ export class NileCalendar extends NileElement {
     }
     this.requestUpdate();
   }
-
+  
+  /**
+   * Function to handle end time selecion
+   */
   private handleEndTimeInput(event: CustomEvent): void {
     if (!this.endDate) {
       this.endDate = null;
@@ -626,234 +635,149 @@ export class NileCalendar extends NileElement {
     this.requestUpdate();
   }
 
-  setType(newType: string) {
-    this.type = newType;
+  // 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;
   }
 
-  createRelativePeriod(unit: String, value: number) {
-    const endTime = new Date();
-    const startTime = new Date();
+  // 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);
+  }
 
-    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;
+  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.startDate = new Date(startTime.getTime());
-    this.endDate = new Date(endTime.getTime());
-
-    this.requestUpdate();
-
-    return {
-      startDate: this.startDate,
-      endDate: this.endDate,
-    };
   }
 
-  handleTimeValueClick(unit: string, value: number, event: any) {
-    const timestamps = this.createRelativePeriod(unit, value);
-
-    this.selectedUnit = unit;
-    this.selectedValue = value;
-
-    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;
+    }
   }
   
-  renderTimeValues(unit: string, 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)}
-          >
-            ${value}
-          </div>
-        `
-    );
+  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);
   }
 
-  handleDurationChange(event: any) {
-    this.selectedValue = Number(event.detail.value);
-    if (this.selectedUnit && this.selectedValue) {
-      this.handleTimeValueClick(this.selectedUnit, this.selectedValue, event);
-    }
+  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;
   }
 
-  handleUnitChange(event: any) {
-    this.selectedUnit = event.detail.value;
-    if (this.selectedUnit && this.selectedValue) {
-      this.handleTimeValueClick(this.selectedUnit, this.selectedValue, event);
+  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
+    )}`;
   }
 
-  handleTimeZoneChange(event: any) {
-    this.selectedTimeZone = event.detail.value;
-    this.requestUpdate();
+  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}`;
   }
 
-  onTypeChange(event: any) {
-    this.type = event.detail.value;
+  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}`;
   }
 
-  /**
-   * Render method
-   */
-  render(): TemplateResult {
-    return html`
-      <div
-        class=${classMap({
-          base:true,
-          base__range:this.range,
-        })}
-      >
-        <div class="calendar-config ${!this.range ? 'hidden' : ''}">
-          <div class="calendar-switcher">
-            <nile-tab-group centered @nile-tab-show="${this.onTypeChange}">
-              <nile-tab slot="nav" panel="absolute">Absolute</nile-tab>
-              <nile-tab slot="nav" panel="relative">Relative</nile-tab>
-            </nile-tab-group>
-          </div>
-        </div>
-
-        ${this.type == 'relative' ? this.renderRelativeCalendar():''}
-        ${this.type == 'absolute' ? this.renderAbsoluteCalendar():''}
+  private nextMonth(): void {
+    if (this.currentMonth === 11) {
+      this.currentMonth = 0;
+      this.currentYear++;
+    } else {
+      this.currentMonth++;
+    }
+  }
 
-        ${!this.range?'':html`
-        <div class="button-container">
-          <nile-button 
-          class="apply-button"  
-          ?disabled="${ !this.startDate || !this.endDate }"  
-          @click="${this.confimRange}"
-          > Apply</nile-button>
-        </div>
-        `}
-      </div>
-    `;
+  private prevMonth(): void {
+    if (this.currentMonth === 0) {
+      this.currentMonth = 11;
+      this.currentYear--;
+    } else {
+      this.currentMonth--;
+    }
   }
 
-  /**
-   * @returns HTML content for absolute calendar
-   */
-  renderAbsoluteCalendar(){
-    return html`
-    <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">
-          <nile-input 
-            label="From"
-            class="manual-input" 
-            value="${this.formatTime(this.startDate)}" 
-            placeholder="HH:MM:SS" @nile-change="${this.handleStartTimeInput}"
-          > </nile-input>
-        </div>
+  private confimRange() {
+    if (this.startDate && this.endDate) {
 
-        <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>
-    `:''}
-    `
+      this.emitChangedData( {
+        startDate: this.startDate,
+        endDate: this.endDate,
+      });
+      if (this.dropdown) {
+        this.dropdown.hide();
+      }
+    }
   }
 
-  /**
-   * @returns HTML content for relative calendar
-   */
-  renderRelativeCalendar(){
-    return html`
-    <div class="units-wrapper">
-      <div class="unit-container">
-        ${this.hideDurationFields?.includes('minutes')?'':html`
-        <div class="duration-name">Minutes</div>
-        <div class="duration-units">
-          ${this.renderTimeValues('minutes', [1, 5, 15, 30, 45])}
-        </div>
-        `}
+  convertTZ(date: Date, tzString: any) {
+    return new Date(
+      (typeof date === 'string' ? new Date(date) : date).toLocaleString(
+        'en-US',
+        { timeZone: tzString }
+      )
+    );
+  }
 
-        ${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"  
-        value="${this.selectedValue}" 
-        @nile-input="${this.handleDurationChange}"
-        placeholder="Enter Value"
-        ></nile-input>
+  onTypeChange(event: CustomEvent) {
+    this.type = event.detail.value;
+  }
+  getUTCDate(dateStr:any){
+   return  new Date(
+      Date.UTC(
+        dateStr.slice(0, 4),
+        dateStr.slice(5, 7) - 1,
+        dateStr.slice(8, 10)
+      )
+    )
+  }
 
-        <nile-select class="manual-input time-input"  
-          label="Unit of time" 
-          style="margin-top:3px" 
-          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>
-    `:''}
-    `
+  emitChangedData(data:{startDate:Date,endDate:Date}|{value:any}){
+    this.emit('nile-changed',data);
+    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);
   }
 }