@aquera/nile-elements 0.0.16 → 0.0.17

package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-calendar/nile-calendar.css.js

@@ -81,8 +81,17 @@ export const styles = css `
     cursor: pointer;
   }
 
+  .current-date {
+    border: 1px solid #1978b8;
+  }
+
+  .day:hover {
+    background-color: #e5e9eb;
+  }
+
   .filler {
-    color: grey;
+    color: #7f7f7f;
+    pointer-events: none;
   }
 
   .selected-date {
@@ -91,12 +100,15 @@ export const styles = css `
     background: #a5d3f3;
   }
 
+  .selected-date:hover {
+    background: #a5d3f3;
+  }
+
   .calendar-wrapper {
     background: white;
     display: flex;
     justify-content: space-between;
     width: 365px;
-    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
   }
 
   .selected-date,
@@ -148,6 +160,10 @@ export const styles = css `
     width: 365px;
   }
 
+  .base__relative {
+    width: 446px;
+  }
+
   .base__range {
     padding: 24px;
   }
@@ -158,6 +174,10 @@ export const styles = css `
     width: 365px;
   }
 
+  .calender-input--relative {
+    width: 446px;
+  }
+
   .from {
     display: flex;
     justify-content: space-between;
@@ -181,7 +201,101 @@ export const styles = css `
   .button-contaner {
     width: 100%;
     text-align: right;
-    padding: 12px 0 0 0;
+    padding: 24px 0 0 0;
+  }
+
+  .calendar-config {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+  }
+
+  .calendar-switcher {
+    display: flex;
+    align-items: flex-start;
+    gap: 24px;
+    justify-content: space-between;
+    border-bottom: 1px solid #e5e9eb;
+  }
+
+  .calendar-switch {
+    padding-bottom: 12px;
+    cursor: pointer;
+  }
+
+  .calendar-switch__active {
+    padding-bottom: 12px;
+    border-bottom: 4px solid #005ea6;
+  }
+
+  .unit-container {
+    display: flex;
+    flex-direction: column;
+    width: 446px;
+    margin-top: 24px;
+  }
+
+  .time-unit-group {
+    display: flex;
+    align-items: center;
+    margin-bottom: 24px;
+    gap: 24px;
+  }
+
+  .time-unit-name {
+    width: 54px;
+  }
+
+  .time-unit-name span {
+    margin-right: 24px;
+    color: var(--color-text-default, #000);
+    font-family: Colfax-regular;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 14px;
+    letter-spacing: 0.2px;
+  }
+
+  .time-unit-value {
+    display: flex;
+  }
+
+  .time-value {
+    display: inline-flex;
+    width: 48px;
+    height: 32px;
+    box-sizing: border-box;
+    padding: 5px;
+    border: 1px solid #ddd;
+    cursor: pointer;
+    justify-content: center;
+    align-items: center;
+    margin-right: 16px;
+    border-radius: 4px;
+    border: 1px solid #c7ced4;
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  .time-value--selected {
+    background: #a5d3f3;
+  }
+
+  .time-value:last-child {
+    margin-right: 0;
+  }
+
+  .time-value:hover {
+    background: #e5e9eb;
+  }
+
+  .time-value--selected:hover {
+    background-color: #a5d3f3;
+  }
+
+  .hidden {
+    display: none !important;
   }
 `;
 export default [styles];

package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-calendar/nile-calendar.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-calendar.css.js","sourceRoot":"","sources":["../../../src/nile-calendar/nile-calendar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+KxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * DatePicker CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .calendar-container {\n    font-family: Colfax-regular;\n    width: 365px;\n    height: auto;\n    text-align: center;\n    background: white;\n  }\n\n  .calendar-container.with-margin {\n    margin-right: 20px;\n  }\n\n  .calendar-header {\n    display: flex;\n    justify-content: space-between;\n    padding: 10px;\n    padding: 22px 20px;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  .calendar-header__month-navigation {\n    cursor: pointer;\n  }\n\n  .divider {\n    width: 100%;\n    height: 1px;\n    background: #c7ced4;\n  }\n\n  .day-names {\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n    height: 50px;\n  }\n\n  .day-names,\n  .days {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: flex-start;\n    height: auto;\n    align-items: center;\n  }\n\n  .days {\n    height: auto;\n  }\n\n  .day {\n    flex-basis: calc(100% / 7);\n    box-sizing: border-box;\n    width: 48px;\n    align-items: center;\n    padding: 10px;\n    height: 32px;\n    margin-top: 6px;\n    margin-bottom: 6px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n  }\n\n  .filler {\n    color: grey;\n  }\n\n  .selected-date {\n    color: white;\n    border-radius: 4px;\n    background: #a5d3f3;\n  }\n\n  .calendar-wrapper {\n    background: white;\n    display: flex;\n    justify-content: space-between;\n    width: 365px;\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n  .selected-date,\n  .range-start,\n  .range-end {\n    border-radius: 4px;\n    background: #a5d3f3;\n    color: white;\n  }\n\n  .range-start {\n    background: #a5d3f3;\n    border-radius: 4px 0 0 4px;\n    color: white;\n  }\n\n  .range-end {\n    background: #a5d3f3;\n    border-radius: 0 4px 4px 0;\n    color: white;\n  }\n\n  .range-middle {\n    background: #a5d3f3;\n    color: white;\n    border-radius: 0;\n  }\n\n  .day.selected {\n    background: #a5d3f3;\n    color: white;\n    border-radius: 4px;\n  }\n\n  .day.in-range {\n    background: #a5d3f3;\n    color: white;\n  }\n\n  .selected-date {\n    color: white;\n    border-radius: 4px;\n    background: #a5d3f3;\n  }\n\n  .base {\n    background-color: white;\n    border-radius: 4px;\n    width: 365px;\n  }\n\n  .base__range {\n    padding: 24px;\n  }\n\n  .calender-input {\n    margin-top: 6px;\n    padding-bottom: 0px;\n    width: 365px;\n  }\n\n  .from {\n    display: flex;\n    justify-content: space-between;\n    gap: 8px;\n    margin-top: 12px;\n  }\n\n  .manual-input {\n    width: 100%;\n  }\n\n  .manual-input-label {\n    color: #7f7f7f;\n    font-family: Colfax-regular;\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 12px;\n    letter-spacing: 0.2px;\n  }\n\n  .button-contaner {\n    width: 100%;\n    text-align: right;\n    padding: 12px 0 0 0;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-calendar.css.js","sourceRoot":"","sources":["../../../src/nile-calendar/nile-calendar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiSxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * DatePicker CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .calendar-container {\n    font-family: Colfax-regular;\n    width: 365px;\n    height: auto;\n    text-align: center;\n    background: white;\n  }\n\n  .calendar-container.with-margin {\n    margin-right: 20px;\n  }\n\n  .calendar-header {\n    display: flex;\n    justify-content: space-between;\n    padding: 10px;\n    padding: 22px 20px;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  .calendar-header__month-navigation {\n    cursor: pointer;\n  }\n\n  .divider {\n    width: 100%;\n    height: 1px;\n    background: #c7ced4;\n  }\n\n  .day-names {\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n    height: 50px;\n  }\n\n  .day-names,\n  .days {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: flex-start;\n    height: auto;\n    align-items: center;\n  }\n\n  .days {\n    height: auto;\n  }\n\n  .day {\n    flex-basis: calc(100% / 7);\n    box-sizing: border-box;\n    width: 48px;\n    align-items: center;\n    padding: 10px;\n    height: 32px;\n    margin-top: 6px;\n    margin-bottom: 6px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n  }\n\n  .current-date {\n    border: 1px solid #1978b8;\n  }\n\n  .day:hover {\n    background-color: #e5e9eb;\n  }\n\n  .filler {\n    color: #7f7f7f;\n    pointer-events: none;\n  }\n\n  .selected-date {\n    color: white;\n    border-radius: 4px;\n    background: #a5d3f3;\n  }\n\n  .selected-date:hover {\n    background: #a5d3f3;\n  }\n\n  .calendar-wrapper {\n    background: white;\n    display: flex;\n    justify-content: space-between;\n    width: 365px;\n  }\n\n  .selected-date,\n  .range-start,\n  .range-end {\n    border-radius: 4px;\n    background: #a5d3f3;\n    color: white;\n  }\n\n  .range-start {\n    background: #a5d3f3;\n    border-radius: 4px 0 0 4px;\n    color: white;\n  }\n\n  .range-end {\n    background: #a5d3f3;\n    border-radius: 0 4px 4px 0;\n    color: white;\n  }\n\n  .range-middle {\n    background: #a5d3f3;\n    color: white;\n    border-radius: 0;\n  }\n\n  .day.selected {\n    background: #a5d3f3;\n    color: white;\n    border-radius: 4px;\n  }\n\n  .day.in-range {\n    background: #a5d3f3;\n    color: white;\n  }\n\n  .selected-date {\n    color: white;\n    border-radius: 4px;\n    background: #a5d3f3;\n  }\n\n  .base {\n    background-color: white;\n    border-radius: 4px;\n    width: 365px;\n  }\n\n  .base__relative {\n    width: 446px;\n  }\n\n  .base__range {\n    padding: 24px;\n  }\n\n  .calender-input {\n    margin-top: 6px;\n    padding-bottom: 0px;\n    width: 365px;\n  }\n\n  .calender-input--relative {\n    width: 446px;\n  }\n\n  .from {\n    display: flex;\n    justify-content: space-between;\n    gap: 8px;\n    margin-top: 12px;\n  }\n\n  .manual-input {\n    width: 100%;\n  }\n\n  .manual-input-label {\n    color: #7f7f7f;\n    font-family: Colfax-regular;\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 12px;\n    letter-spacing: 0.2px;\n  }\n\n  .button-contaner {\n    width: 100%;\n    text-align: right;\n    padding: 24px 0 0 0;\n  }\n\n  .calendar-config {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 12px;\n  }\n\n  .calendar-switcher {\n    display: flex;\n    align-items: flex-start;\n    gap: 24px;\n    justify-content: space-between;\n    border-bottom: 1px solid #e5e9eb;\n  }\n\n  .calendar-switch {\n    padding-bottom: 12px;\n    cursor: pointer;\n  }\n\n  .calendar-switch__active {\n    padding-bottom: 12px;\n    border-bottom: 4px solid #005ea6;\n  }\n\n  .unit-container {\n    display: flex;\n    flex-direction: column;\n    width: 446px;\n    margin-top: 24px;\n  }\n\n  .time-unit-group {\n    display: flex;\n    align-items: center;\n    margin-bottom: 24px;\n    gap: 24px;\n  }\n\n  .time-unit-name {\n    width: 54px;\n  }\n\n  .time-unit-name span {\n    margin-right: 24px;\n    color: var(--color-text-default, #000);\n    font-family: Colfax-regular;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  .time-unit-value {\n    display: flex;\n  }\n\n  .time-value {\n    display: inline-flex;\n    width: 48px;\n    height: 32px;\n    box-sizing: border-box;\n    padding: 5px;\n    border: 1px solid #ddd;\n    cursor: pointer;\n    justify-content: center;\n    align-items: center;\n    margin-right: 16px;\n    border-radius: 4px;\n    border: 1px solid #c7ced4;\n    background: rgba(255, 255, 255, 0.2);\n  }\n\n  .time-value--selected {\n    background: #a5d3f3;\n  }\n\n  .time-value:last-child {\n    margin-right: 0;\n  }\n\n  .time-value:hover {\n    background: #e5e9eb;\n  }\n\n  .time-value--selected:hover {\n    background-color: #a5d3f3;\n  }\n\n  .hidden {\n    display: none !important;\n  }\n`;\n\nexport default [styles];\n"]}

package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-calendar/nile-calendar.d.ts

@@ -33,6 +33,10 @@ export declare class NileCalendar extends NileElement {
     endDate: Date | null;
     isSelectingStart: boolean;
     range: boolean;
+    type: string;
+    selectedUnit: string;
+    selectedValue: number;
+    selectedTimeZone: string;
     valueChanged(): void;
     updated(changedProperties: PropertyValues): void;
     static get observedAttributes(): string[];
@@ -45,6 +49,8 @@ export declare class NileCalendar extends NileElement {
     private prevMonth;
     private selectDate;
     private confimRange;
+    convertTZ(date: Date, tzString: any): Date;
+    isCurrentDate(day: number, month: number, year: number): boolean;
     private renderMonth;
     private formatDate;
     private formatDateRange;
@@ -57,9 +63,18 @@ export declare class NileCalendar extends NileElement {
     private parseTime;
     private handleStartTimeInput;
     private handleEndTimeInput;
+    setType(newType: string): void;
+    createRelativePeriod(unit: String, value: number): {
+        startDate: Date;
+        endDate: Date;
+    };
+    handleTimeValueClick(unit: string, value: number, event: any): void;
+    renderTimeValues(unit: string, values: any[]): TemplateResult<1>[];
+    handleDurationChange(event: any): void;
+    handleUnitChange(event: any): void;
+    handleTimeZoneChange(event: any): void;
     /**
      * Render method
-     * @slot This is a slot test
      */
     render(): TemplateResult;
 }

package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-calendar/nile-calendar.js

@@ -12,6 +12,7 @@ import { query } from 'lit/decorators.js';
 import { watch } from '../internal/watch';
 import NileElement from '../internal/nile-element';
 import '../nile-popup';
+import { TIMEZONES } from './timezones';
 /**
  * Nile icon component.
  *
@@ -28,8 +29,10 @@ let NileCalendar = class NileCalendar extends NileElement {
         this.formattedDate = null;
         this.startDate = null;
         this.endDate = null;
-        this.isSelectingStart = true; // flag to indicate what we're selecting
+        this.isSelectingStart = true;
         this.range = false;
+        this.type = 'absolute';
+        this.selectedTimeZone = 'local';
     }
     /**
      * The styles for NileCalendar
@@ -189,6 +192,10 @@ let NileCalendar = class NileCalendar extends NileElement {
     }
     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,
@@ -202,6 +209,15 @@ let NileCalendar = class NileCalendar extends NileElement {
             };
         }
     }
+    convertTZ(date, tzString) {
+        return new Date((typeof date === 'string' ? new Date(date) : date).toLocaleString('en-US', { timeZone: tzString }));
+    }
+    isCurrentDate(day, month, year) {
+        const today = new Date();
+        return (day === today.getDate() &&
+            month + 1 === today.getMonth() + 1 &&
+            year === today.getFullYear());
+    }
     renderMonth(year, month, daysArray) {
         const firstDay = new Date(year, month, 1).getDay();
         const lastDay = new Date(year, month + 1, 0).getDay();
@@ -242,7 +258,12 @@ let NileCalendar = class NileCalendar extends NileElement {
         return html `
       <div class="calendar">
         <div class="calendar-header">
-          <nile-icon class="calendar-header__month-navigation" name="arrowleft" color="black" @click="${this.prevMonth}">
+          <nile-icon
+            class="calendar-header__month-navigation"
+            name="arrowleft"
+            color="black"
+            @click="${this.prevMonth}"
+          >
           </nile-icon>
           <span
             >${new Date(year, month).toLocaleString('default', {
@@ -250,7 +271,12 @@ let NileCalendar = class NileCalendar extends NileElement {
         })}
             ${year}</span
           >
-          <nile-icon class="calendar-header__month-navigation" name="arrowright" color="black" @click="${this.nextMonth}">
+          <nile-icon
+            class="calendar-header__month-navigation"
+            name="arrowright"
+            color="black"
+            @click="${this.nextMonth}"
+          >
           </nile-icon>
         </div>
         <div class="day-names">
@@ -269,7 +295,11 @@ let NileCalendar = class NileCalendar extends NileElement {
             return html ` <div
               class="day ${isSelectedDate(day, month, year, isCurrentMonth)} ${isInRange(day, month, year, isCurrentMonth)
                 ? 'in-range'
-                : ''} ${!isCurrentMonth ? 'filler' : ''}"
+                : ''} ${!isCurrentMonth ? 'filler' : ''}
+                ${this.isCurrentDate(day, month, year) && isCurrentMonth
+                ? 'current-date'
+                : ''}
+                "
               @click="${() => {
                 if (isCurrentMonth) {
                     this.selectDate(day, month, year);
@@ -386,34 +416,197 @@ let NileCalendar = class NileCalendar extends NileElement {
         }
         this.requestUpdate();
     }
-    /* #endregion */
-    /* #region Methods */
+    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;
+        }
+        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="time-value ${this.selectedUnit === unit &&
+            this.selectedValue === value
+            ? 'time-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);
+        }
+    }
+    handleUnitChange(event) {
+        this.selectedUnit = event.detail.value;
+        if (this.selectedUnit && this.selectedValue) {
+            this.handleTimeValueClick(this.selectedUnit, this.selectedValue, event);
+        }
+    }
+    handleTimeZoneChange(event) {
+        this.selectedTimeZone = event.detail.value;
+        this.requestUpdate();
+    }
     /**
      * Render method
-     * @slot This is a slot test
      */
     render() {
+        const timeZones = TIMEZONES;
         const daysArray = this.getDaysArray(this.currentYear, this.currentMonth);
         const nextMonth = (this.currentMonth + 1) % 12;
         const nextYear = this.currentMonth === 11 ? this.currentYear + 1 : this.currentYear;
         const nextMonthDaysArray = this.getDaysArray(nextYear, nextMonth);
         return html `
+      <div
+        class="base ${this.range ? 'base__range' : ''} ${this.type ===
+            'relative'
+            ? 'base__relative'
+            : ''}"
+      >
+        <div class="calendar-config ${!this.range ? 'hidden' : ''}">
+          <div class="calendar-switcher">
+            <div
+              class="calendar-switch${this.type === 'absolute'
+            ? '__active'
+            : ''}"
+              @click="${() => this.setType('absolute')}"
+            >
+              Absolute
+            </div>
+            <div
+              class="calendar-switch${this.type === 'relative'
+            ? '__active'
+            : ''}"
+              @click="${() => this.setType('relative')}"
+            >
+              Relative
+            </div>
+          </div>
 
-        <div class="base ${this.range ? 'base__range' : ''}">
-          <div class="calendar-wrapper" >
-            <div class="calendar-container ${this.range ? 'with-margin' : ''}">
-              ${this.renderMonth(this.currentYear, this.currentMonth, this.getDaysArray(this.currentYear, this.currentMonth))}
+          <div class="calendar-timezone">
+            <nile-select
+              searchEnabled
+              hoist
+              value=${this.selectedTimeZone}
+              @nile-change=${this.handleTimeZoneChange}
+            >
+              <nile-option value="local">Local Time Zone</nile-option>
+              ${timeZones.map(timeZone => html `
+                  <nile-option value="${timeZone}">${timeZone}</nile-option>
+                `)}
+            </nile-select>
+          </div>
+        </div>
+
+        <div
+          class="calendar-wrapper  ${this.type !== 'absolute' ? 'hidden' : ''}"
+        >
+          <div class="calendar-container ${this.range ? 'with-margin' : ''}">
+            ${this.renderMonth(this.currentYear, this.currentMonth, this.getDaysArray(this.currentYear, this.currentMonth))}
+          </div>
+        </div>
+
+        <div class="unit-container ${this.type !== 'relative' ? 'hidden' : ''}">
+          <div class="time-unit-group">
+            <div class="time-unit-name"><span>Minutes</span></div>
+            <div class="time-unit-value">
+              ${this.renderTimeValues('minutes', [1, 3, 5, 15, 30, 45])}
             </div>
-            <!-- ${this.range
-            ? html `
-                  <div class="calendar-container">
-                    ${this.renderMonth(this.currentYear, (this.currentMonth + 1) % 12, this.getDaysArray(this.currentYear, (this.currentMonth + 1) % 12))}
-                  </div>
-                `
-            : ''} -->
+          </div>
 
+          <div class="time-unit-group">
+            <div class="time-unit-name"><span>Hours</span></div>
+            <div class="time-unit-value">
+              ${this.renderTimeValues('hours', [1, 2, 3, 6, 8, 12])}
+            </div>
+          </div>
+
+          <div class="time-unit-group">
+            <div class="time-unit-name"><span>Days</span></div>
+            <div class="time-unit-value">
+              ${this.renderTimeValues('days', [1, 2, 3, 4, 5, 6])}
+            </div>
           </div>
-          ${this.range
+
+          <div class="time-unit-group">
+            <div class="time-unit-name"><span>Weeks</span></div>
+            <div class="time-unit-value">
+              ${this.renderTimeValues('weeks', [1, 2, 4, 6])}
+            </div>
+          </div>
+
+          <div class="time-unit-group">
+            <div class="time-unit-name"><span>Months:</span></div>
+            <div class="time-unit-value">
+              ${this.renderTimeValues('months', [3, 6, 12, 15])}
+            </div>
+          </div>
+        </div>
+
+        ${this.range && this.type === 'relative'
+            ? html `
+          <div class="calender-input calender-input--relative">
+            <div class="from">
+              <nile-input class="manual-input" label="Duration"  value="${this.selectedValue}"
+              @nile-input="${this.handleDurationChange}"
+              placeholder="Enter Value" ></nile-input>
+              <nile-select class="manual-input"  label="Unit" value="${this.selectedUnit}"
+              @nile-change="${this.handleUnitChange}"
+              >
+                <nile-option value="minutes"> Minutes </nile-option>
+                <nile-option value="hours"> Hours </nile-option>
+                <nile-option value="days"> Days </nile-option>
+                <nile-option value="weeks"> Weeks </nile-option>
+                <nile-option value="months"> Months </nile-option>
+          </nile-select>
+
+            </div>
+
+          <div class="button-contaner">
+            <nile-button class="apply-button"  ?disabled="${!this.startDate || !this.endDate}"  @click="${this.confimRange}"> Apply</nile-button>
+            </div>
+
+
+        </div>
+        </div>
+        `
+            : ''}
+        ${this.range && this.type === 'absolute'
             ? html `
           <div class="calender-input">
             <span class="manual-input-label">From </span>
@@ -437,7 +630,7 @@ let NileCalendar = class NileCalendar extends NileElement {
         </div>
         `
             : ''}
-        </div>
+      </div>
     `;
     }
 };
@@ -471,6 +664,18 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], NileCalendar.prototype, "range", void 0);
+__decorate([
+    property({ type: String })
+], NileCalendar.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], NileCalendar.prototype, "selectedUnit", void 0);
+__decorate([
+    property({ type: Number })
+], NileCalendar.prototype, "selectedValue", void 0);
+__decorate([
+    property({ type: String })
+], NileCalendar.prototype, "selectedTimeZone", void 0);
 __decorate([
     watch('value')
 ], NileCalendar.prototype, "valueChanged", null);