@aquera/nile-elements 0.0.95 → 0.0.97

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

@@ -12,7 +12,6 @@ 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 '../nile-popup';
 /**
  * Nile icon component.
  *
@@ -22,75 +21,35 @@ import '../nile-popup';
 let NileCalendar = class NileCalendar extends NileElement {
     constructor() {
         super(...arguments);
-        this.currentMonth = new Date().getMonth();
-        this.currentYear = new Date().getFullYear();
-        this.dropDownOpened = false;
-        this.allowedDates = {};
         this.valueAttribute = null;
-        this.formattedDate = null;
-        this.startDate = null;
-        this.endDate = null;
-        this.isSelectingStart = true;
+        this.allowedDates = JSON.stringify({});
         this.range = false;
         this.type = 'absolute';
-        this.selectedTimeZone = 'local';
-        this.validAllowedDates = true;
-        this.hideInput = false;
         this.hideDurationFields = [];
-        this.hideTimeZone = false;
         this.showManualInputs = false;
+        this.startDate = null;
+        this.endDate = null;
+        this.isSelectingStart = true;
+        this.hideInput = false;
+        this.currentMonth = new Date().getMonth();
+        this.currentYear = new Date().getFullYear();
+        this.allowedDatesLocal = null;
     }
     /**
-  * 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]`
      */
     static get styles() {
         return [styles];
     }
-    firstUpdated() {
-        const allowedDatesAttribute = this.getAttribute('allowed-dates');
-        if (allowedDatesAttribute !== null) {
-            try {
-                this.allowedDates = JSON.parse(allowedDatesAttribute);
-            }
-            catch (error) {
-                console.error('Error parsing allowed-dates attribute:', error);
-            }
-        }
-        else {
-            this.validAllowedDates = false;
-        }
-    }
-    checkValidAllowedDate() {
-        if (Object.keys(this.allowedDates).length == 0) {
-            this.validAllowedDates = false;
-            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)));
-        if (startDate > endDate) {
-            console.error('StartDate must be greater than endDate');
-            this.validAllowedDates = false;
-        }
-        else {
-            this.validAllowedDates = true;
-        }
+    connectedCallback() {
+        super.connectedCallback();
+        this.initializeValue();
+        this.emit('nile-init');
     }
-    valueChanged() {
-        if (this.range && this.value) {
-            this.rangeValue = this.value;
-            this.value = null;
-            return;
-        }
-        if (this.value && !isNaN(this.value.getTime())) {
-            const offset = this.value.getTimezoneOffset();
-            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()}`;
-            }
-        }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.emit('nile-destroy');
     }
     updated(changedProperties) {
         super.updated(changedProperties);
@@ -104,169 +63,208 @@ let NileCalendar = class NileCalendar extends NileElement {
             }
         }
     }
-    static get observedAttributes() {
-        return ['value', 'range'];
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
+    attributeChangedCallback(name, _old, newValue) {
         if (name === 'value') {
             this.valueAttribute = newValue;
             this.initializeValue();
         }
-        else if (name === 'range') {
-            this.range = newValue !== null;
-        }
-    }
-    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.rangeValue = {
-                    startDate: this.startDate,
-                    endDate: this.endDate,
-                };
-                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();
-                    this.rangeValue = null;
-                }
-            }
-        }
-        this.requestUpdate();
     }
-    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();
-            }
+    checkValidAllowedDate() {
+        let newDateRange;
+        try {
+            newDateRange = JSON.parse(this.allowedDates);
         }
-        this.emit('nile-init');
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.emit('nile-destroy');
-    }
-    getDaysArray(year, month) {
-        const daysInMonth = new Date(year, month + 1, 0).getDate();
-        return Array.from({ length: daysInMonth }, (_, i) => i + 1);
-    }
-    nextMonth() {
-        if (this.currentMonth === 11) {
-            this.currentMonth = 0;
-            this.currentYear++;
+        catch (error) {
+            newDateRange = null;
         }
-        else {
-            this.currentMonth++;
+        if (!newDateRange || Object.keys(newDateRange).length == 0) {
+            this.allowedDatesLocal = null;
+            return;
         }
-        this.requestUpdate();
-    }
-    prevMonth() {
-        if (this.currentMonth === 0) {
-            this.currentMonth = 11;
-            this.currentYear--;
+        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.currentMonth--;
+            this.allowedDatesLocal = newDateRange;
         }
-        this.requestUpdate();
     }
-    selectDate(day, month, year) {
-        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();
-            }
+    valueChanged() {
+        if (this.range && this.value) {
+            this.value = null;
+            return;
         }
-        this.requestUpdate();
-    }
-    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();
+        if (this.value && !isNaN(this.value.getTime())) {
+            const offset = this.value.getTimezoneOffset();
+            const localDate = new Date(this.value.getTime() - offset * 60 * 1000);
+            if (!isNaN(localDate.getTime())) {
+                this.valueAttribute = localDate.toISOString().split('T')[0];
             }
-            this.rangeValue = {
-                startDate: this.startDate,
-                endDate: this.endDate,
-            };
         }
     }
-    convertTZ(date, tzString) {
-        return new Date((typeof date === 'string' ? new Date(date) : date).toLocaleString('en-US', { timeZone: tzString }));
+    /**
+     * Render method
+     */
+    render() {
+        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() : ''}
+
+        ${!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>
+    `;
     }
-    isCurrentDate(day, month, year) {
-        const today = new Date();
-        return (day === today.getDate() &&
-            month + 1 === today.getMonth() + 1 &&
-            year === today.getFullYear());
+    /**
+     * @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>
+
+        <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>
+    ` : ''}
+    `;
     }
-    isAllowedDate(day, month, year) {
-        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;
+    /**
+     * @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>
+        `}
+
+        ${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>
+
+        <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>
+    ` : ''}
+    `;
+    }
+    /**
+     *
+     * @param unit
+     * @param values
+     * @returns html for the option
+     */
+    renderTimeValues(unit, values) {
+        return values.map(value => html `
+          <div
+            class="duration__value ${this.selectedUnit === unit && this.selectedValue === value ? 'duration__value--selected' : ''}"
+            @click=${(e) => this.handleTimeValueClick(unit, value, e)}
+          >${value}
+          </div>`);
     }
+    /**
+     *
+     * @param year
+     * @param month
+     * @param daysArray
+     * @returns HTML for rendered month
+     */
     renderMonth(year, month, daysArray) {
         const firstDay = new Date(year, month, 1).getDay();
         const lastDay = new Date(year, month + 1, 0).getDay();
@@ -304,6 +302,12 @@ let NileCalendar = class NileCalendar extends NileElement {
             }
             return false;
         };
+        const isCurrentDate = (day, month, year) => {
+            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">
@@ -345,7 +349,6 @@ let NileCalendar = 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)
@@ -358,7 +361,7 @@ let NileCalendar = 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>`;
         })}
@@ -366,21 +369,191 @@ let NileCalendar = class NileCalendar extends NileElement {
       </div>
     `;
     }
-    formatDate(date) {
-        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}`;
+    /**
+     * Function to validate if date is not in allowedDates range
+     * @param day
+     * @param month
+     * @param year
+     * @returns
+     */
+    isAllowedDate(day, month, year) {
+        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;
     }
-    formatDateRange(value) {
-        if (!value) {
-            return value;
+    /**
+     * @function handle_date-click/select
+     * @param day
+     * @param month
+     * @param year
+     */
+    selectDate(day, month, year) {
+        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;
+                }
+            }
         }
-        if (!value.startDate || !value.endDate)
-            return '';
-        return `${this.formatDate(value.startDate)} - ${this.formatDate(value.endDate)}`;
+        else {
+            this.value = selectedDate;
+            this.emitChangedData({ value: this.value });
+            if (this.dropdown) {
+                this.dropdown.hide();
+            }
+        }
+    }
+    /**
+     * 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 = 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) {
+        this.selectedValue = Number(event.detail.value);
+        if (this.selectedUnit && this.selectedValue) {
+            this.handleTimeValueClick(this.selectedUnit, this.selectedValue, event);
+        }
+    }
+    handleUnitChange(event) {
+        this.selectedUnit = event.detail.value;
+        if (this.selectedUnit && this.selectedValue) {
+            this.handleTimeValueClick(this.selectedUnit, this.selectedValue, event);
+        }
+    }
+    handleTimeValueClick(unit, value, event) {
+        // const timestamps = this.createRelativePeriod(unit, value);
+        this.selectedUnit = unit;
+        this.selectedValue = value;
+    }
+    createRelativePeriod(unit, value) {
+        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
+     */
+    handleStartTimeInput(event) {
+        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
+     */
+    handleEndTimeInput(event) {
+        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
+    parseTime(input, date) {
+        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
+    isValidTimeInput(input) {
+        const regex = /^([0-1]?[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/;
+        return regex.test(input);
     }
     handleStartDateInput(event) {
         const date = this.parseDate(event.detail.value);
@@ -394,7 +567,6 @@ let NileCalendar = class NileCalendar extends NileElement {
             this.startDate = null;
             this.endDate = null;
         }
-        this.requestUpdate();
     }
     handleEndDateInput(event) {
         const date = this.parseDate(event.detail.value);
@@ -407,16 +579,31 @@ let NileCalendar = class NileCalendar extends NileElement {
         else {
             this.endDate = null;
         }
-        this.requestUpdate();
+    }
+    isValidDateInput(input) {
+        const regex = /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/\d{4}$/;
+        return regex.test(input);
     }
     parseDate(dateString) {
         const [day, month, year] = dateString.split('/').map(Number);
         const date = new Date(year, month - 1, day);
         return !isNaN(date.getTime()) ? date : null;
     }
-    isValidDateInput(input) {
-        const regex = /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/\d{4}$/;
-        return regex.test(input);
+    formatDateRange(value) {
+        if (!value) {
+            return value;
+        }
+        if (!value.startDate || !value.endDate)
+            return '';
+        return `${this.formatDate(value.startDate)} - ${this.formatDate(value.endDate)}`;
+    }
+    formatDate(date) {
+        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}`;
     }
     formatTime(date) {
         if (!date)
@@ -424,288 +611,64 @@ let NileCalendar = class NileCalendar extends NileElement {
         const hours = String(date.getHours()).padStart(2, '0');
         const minutes = String(date.getMinutes()).padStart(2, '0');
         const seconds = String(date.getSeconds()).padStart(2, '0');
-        return `${hours}:${minutes}:${seconds}`;
-    }
-    // Validate time in HH:MM:SS format
-    isValidTimeInput(input) {
-        const regex = /^([0-1]?[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/;
-        return regex.test(input);
-    }
-    // Parse time string to a Date object
-    parseTime(input, date) {
-        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;
-    }
-    handleStartTimeInput(event) {
-        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();
-    }
-    handleEndTimeInput(event) {
-        if (!this.endDate) {
-            this.endDate = null;
-            return;
-        }
-        const time = this.parseTime(event.detail.value, this.endDate);
-        if (time) {
-            this.endDate = time;
+        return `${hours}:${minutes}:${seconds}`;
+    }
+    nextMonth() {
+        if (this.currentMonth === 11) {
+            this.currentMonth = 0;
+            this.currentYear++;
         }
         else {
-            this.endDate.setHours(0, 0, 0);
+            this.currentMonth++;
         }
-        this.requestUpdate();
-    }
-    setType(newType) {
-        this.type = newType;
     }
-    createRelativePeriod(unit, value) {
-        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;
+    prevMonth() {
+        if (this.currentMonth === 0) {
+            this.currentMonth = 11;
+            this.currentYear--;
         }
-        this.startDate = new Date(startTime.getTime());
-        this.endDate = new Date(endTime.getTime());
-        this.requestUpdate();
-        return {
-            startDate: this.startDate,
-            endDate: this.endDate,
-        };
-    }
-    handleTimeValueClick(unit, value, event) {
-        const timestamps = this.createRelativePeriod(unit, value);
-        this.selectedUnit = unit;
-        this.selectedValue = value;
-        this.requestUpdate();
-    }
-    renderTimeValues(unit, values) {
-        return values.map(value => html `
-          <div
-            class="duration__value ${this.selectedUnit === unit && this.selectedValue === value ? 'duration__value--selected' : ''}"
-            @click=${(e) => this.handleTimeValueClick(unit, value, e)}
-          >
-            ${value}
-          </div>
-        `);
-    }
-    handleDurationChange(event) {
-        this.selectedValue = Number(event.detail.value);
-        if (this.selectedUnit && this.selectedValue) {
-            this.handleTimeValueClick(this.selectedUnit, this.selectedValue, event);
+        else {
+            this.currentMonth--;
         }
     }
-    handleUnitChange(event) {
-        this.selectedUnit = event.detail.value;
-        if (this.selectedUnit && this.selectedValue) {
-            this.handleTimeValueClick(this.selectedUnit, this.selectedValue, event);
+    confimRange() {
+        if (this.startDate && this.endDate) {
+            this.emitChangedData({
+                startDate: this.startDate,
+                endDate: this.endDate,
+            });
+            if (this.dropdown) {
+                this.dropdown.hide();
+            }
         }
     }
-    handleTimeZoneChange(event) {
-        this.selectedTimeZone = event.detail.value;
-        this.requestUpdate();
+    convertTZ(date, tzString) {
+        return new Date((typeof date === 'string' ? new Date(date) : date).toLocaleString('en-US', { timeZone: tzString }));
     }
     onTypeChange(event) {
         this.type = event.detail.value;
     }
-    /**
-     * Render method
-     */
-    render() {
-        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() : ''}
-
-        ${!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>
-    `;
+    getUTCDate(dateStr) {
+        return new Date(Date.UTC(dateStr.slice(0, 4), dateStr.slice(5, 7) - 1, dateStr.slice(8, 10)));
     }
-    /**
-     * @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>
-
-        <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>
-    ` : ''}
-    `;
+    emitChangedData(data) {
+        this.emit('nile-changed', data);
+        this.emit('nile-change', data);
     }
-    /**
-     * @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>
-        `}
-
-        ${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>
-
-        <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>
-    ` : ''}
-    `;
+    getDaysArray(year, month) {
+        const daysInMonth = new Date(year, month + 1, 0).getDate();
+        return Array.from({ length: daysInMonth }, (_, i) => i + 1);
     }
 };
 __decorate([
     query('nile-dropdown')
 ], NileCalendar.prototype, "dropdown", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], NileCalendar.prototype, "dropDownOpened", void 0);
-__decorate([
-    property({ type: Object })
-], NileCalendar.prototype, "value", void 0);
-__decorate([
-    property({ type: Object, attribute: 'allowed-dates' })
-], NileCalendar.prototype, "allowedDates", void 0);
-__decorate([
-    property({ type: Object })
-], NileCalendar.prototype, "rangeValue", void 0);
 __decorate([
     property({ type: String, attribute: 'value' })
 ], NileCalendar.prototype, "valueAttribute", void 0);
 __decorate([
-    property({ type: String, attribute: 'value' })
-], NileCalendar.prototype, "formattedDate", void 0);
-__decorate([
-    property({ type: Object })
-], NileCalendar.prototype, "startDate", void 0);
-__decorate([
-    property({ type: Object })
-], NileCalendar.prototype, "endDate", void 0);
-__decorate([
-    property({ type: Boolean })
-], NileCalendar.prototype, "isSelectingStart", void 0);
+    property({ type: String, attribute: true, reflect: true })
+], NileCalendar.prototype, "allowedDates", void 0);
 __decorate([
     property({ type: Boolean })
 ], NileCalendar.prototype, "range", void 0);
@@ -719,26 +682,38 @@ __decorate([
     property({ type: Number })
 ], NileCalendar.prototype, "selectedValue", void 0);
 __decorate([
-    property({ type: String })
-], NileCalendar.prototype, "selectedTimeZone", void 0);
+    property({ type: Array, attribute: 'hide-duration-fields' })
+], NileCalendar.prototype, "hideDurationFields", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileCalendar.prototype, "showManualInputs", void 0);
 __decorate([
     state()
-], NileCalendar.prototype, "validAllowedDates", void 0);
+], NileCalendar.prototype, "startDate", void 0);
 __decorate([
-    watch('allowedDates')
-], NileCalendar.prototype, "checkValidAllowedDate", null);
+    state()
+], NileCalendar.prototype, "endDate", void 0);
+__decorate([
+    state()
+], NileCalendar.prototype, "isSelectingStart", void 0);
 __decorate([
     state()
 ], NileCalendar.prototype, "hideInput", void 0);
 __decorate([
-    property({ type: Array, attribute: 'hide-duration-fields' })
-], NileCalendar.prototype, "hideDurationFields", void 0);
+    state()
+], NileCalendar.prototype, "value", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'hide-time-zone' })
-], NileCalendar.prototype, "hideTimeZone", void 0);
+    state()
+], NileCalendar.prototype, "currentMonth", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'show-manual-inputs', reflect: true })
-], NileCalendar.prototype, "showManualInputs", void 0);
+    state()
+], NileCalendar.prototype, "currentYear", void 0);
+__decorate([
+    state()
+], NileCalendar.prototype, "allowedDatesLocal", void 0);
+__decorate([
+    watch('allowedDates')
+], NileCalendar.prototype, "checkValidAllowedDate", null);
 __decorate([
     watch('value')
 ], NileCalendar.prototype, "valueChanged", null);