@aquera/nile-elements 0.0.80 → 0.0.82

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

@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { __decorate } from "tslib";
-import { html, property, } from 'lit-element';
+import { html, property, nothing } from 'lit-element';
 import { customElement, state } from 'lit/decorators.js';
 import { styles } from './nile-calendar.css';
+import { classMap } from 'lit/directives/class-map.js';
 import { query } from 'lit/decorators.js';
 import { watch } from '../internal/watch';
 import NileElement from '../internal/nile-element';
 import '../nile-popup';
-import { TIMEZONES } from './timezones';
 /**
  * Nile icon component.
  *
@@ -78,9 +78,6 @@ let NileCalendar = class NileCalendar extends NileElement {
         }
     }
     valueChanged() {
-        if (typeof this.value === 'object' && this.value !== null) {
-            this.value = JSON.stringify(this.value);
-        }
         if (this.range && this.value) {
             this.rangeValue = this.value;
             this.value = null;
@@ -331,37 +328,40 @@ let NileCalendar = class NileCalendar extends NileElement {
           >
           </nile-icon>
         </div>
-        <div class="header-divider"></div>
-        <div class="day-names">
-          <div class="day">Sun</div>
-          <div class="day">Mon</div>
-          <div class="day">Tue</div>
-          <div class="day">Wed</div>
-          <div class="day">Thu</div>
-          <div class="day">Fri</div>
-          <div class="day">Sat</div>
-        </div>
-        <div class="days">
+        <div class="days_container">
+          <div class="day_name">Su</div>
+          <div class="day_name">Mo</div>
+          <div class="day_name">Tu</div>
+          <div class="day_name">We</div>
+          <div class="day_name">Th</div>
+          <div class="day_name">Fr</div>
+          <div class="day_name">Sa</div>
+
           ${allDays.map((day, index) => {
             const isCurrentMonth = index >= fillerDaysBefore.length &&
                 index < fillerDaysBefore.length + daysArray.length;
-            return html ` <div
-              class="day
-              ${this.isAllowedDate(day, month, year) ? '' : 'not-allowed'}
-              ${isSelectedDate(day, month, year, isCurrentMonth)} ${isInRange(day, month, year, isCurrentMonth)} ${isInRange(day, month, year, isCurrentMonth)
-                ? 'in-range'
-                : ''} ${!isCurrentMonth ? 'filler' : ''}
-                ${this.isCurrentDate(day, month, year) && isCurrentMonth
-                ? 'current-date'
-                : ''}
-                "
-              @click="${() => {
-                if (isCurrentMonth) {
-                    this.selectDate(day, month, year);
-                }
-            }}"
+            const datePlacement = isSelectedDate(day, month, year, isCurrentMonth);
+            if (datePlacement == 'selected-date')
+                console.log(day);
+            const classMapObj = {
+                '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;
+            return html ` 
+            <div
+              class=${classMap(classMapObj)}
+              @click="${() => { if (isCurrentMonth)
+                this.selectDate(day, month, year); }}"
             >
-              ${day}
+              <span style="position:relative;">
+                ${day}
+                ${this.isCurrentDate(day, month, year) && isCurrentMonth ? html `<div class="current__date__dot"></div>` : nothing}
+              </span>
             </div>`;
         })}
         </div>
@@ -511,10 +511,7 @@ let NileCalendar = class NileCalendar extends NileElement {
     renderTimeValues(unit, values) {
         return values.map(value => html `
           <div
-            class="time-value ${this.selectedUnit === unit &&
-            this.selectedValue === value
-            ? 'time-value--selected'
-            : ''}"
+            class="duration__value ${this.selectedUnit === unit && this.selectedValue === value ? 'duration__value--selected' : ''}"
             @click=${(e) => this.handleTimeValueClick(unit, value, e)}
           >
             ${value}
@@ -544,17 +541,17 @@ let NileCalendar = class NileCalendar extends NileElement {
      * Render method
      */
     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);
+        // const timeZones: string[] = 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'
-            : ''}"
+        class=${classMap({
+            base: true,
+            base__range: this.range,
+        })}
       >
         <div class="calendar-config ${!this.range ? 'hidden' : ''}">
           <div class="calendar-switcher">
@@ -565,140 +562,140 @@ let NileCalendar = class NileCalendar extends NileElement {
           </div>
         </div>
 
-        <div class="calendar-timezone ${!this.range || this.hideTimeZone ? 'hidden' : ''}">
-          <nile-select
-            hoist
-            value=${this.selectedTimeZone}
-            @nile-change=${this.handleTimeZoneChange}
-          >
-            <nile-option value="local">Local Time Zone</nile-option>
-            <nile-option value="UTC">UTC</nile-option>
-          </nile-select>
-        </div>
+        ${this.type == 'relative' ? this.renderRelativeCalendar() : ''}
+        ${this.type == 'absolute' ? this.renderAbsoluteCalendar() : ''}
 
-        <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 class="button-container">
+          <nile-button 
+          class="apply-button"  
+          ?disabled="${!this.startDate || !this.endDate}"  
+          @click="${this.confimRange}"
+          > Apply</nile-button>
         </div>
+      </div>
+    `;
+    }
+    /**
+     * @returns HTML content for absolute calendar
+     */
+    renderAbsoluteCalendar() {
+        return html `
+    <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>
+    </div>
+    ${this.range ? html `
+    <div class="calender-input ${this.showManualInputs ? '' : 'hidden'}" >
+        <div class="from">
+          <!-- ${!this.hideInput ? html `
+            <nile-input 
+              label="Date"
+              class="manual-input" 
+              value="${this.formatDate(this.startDate)}" 
+              placeholder="DD/MM/YYYY" 
+              @nile-change="${this.handleStartDateInput}"
+            ></nile-input>` : ''} -->
 
-        <div class="unit-container ${this.type !== 'relative' ? 'hidden' : ''}">
-          <div
-            class="time-unit-group ${this.hideDurationFields?.includes('minutes')
-            ? 'hidden'
-            : ''} "
-          >
-            <div class="time-unit-name"><span>Minutes</span></div>
-            <div class="time-unit-value minute-values">
-              ${this.renderTimeValues('minutes', [1, 5, 15, 30, 45])}
-            </div>
-          </div>
-
-          <div
-            class="time-unit-group ${this.hideDurationFields?.includes('hours')
-            ? 'hidden'
-            : ''}"
-          >
-            <div class="time-unit-name"><span>Hours</span></div>
-            <div class="time-unit-value hours-values">
-              ${this.renderTimeValues('hours', [1, 2, 3, 6, 8, 12])}
-            </div>
-          </div>
-
-          <div
-            class="time-unit-group ${this.hideDurationFields?.includes('days')
-            ? 'hidden'
-            : ''}"
-          >
-            <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>
-
-          <div
-            class="time-unit-group ${this.hideDurationFields?.includes('weeks')
-            ? 'hidden'
-            : ''}"
-          >
-            <div class="time-unit-name"><span>Weeks</span></div>
-            <div class="time-unit-value weeks-values ">
-              ${this.renderTimeValues('weeks', [1, 2, 4, 6])}
-            </div>
-          </div>
-
-          <div
-            class="time-unit-group ${this.hideDurationFields?.includes('months')
-            ? 'hidden'
-            : ''}"
-          >
-            <div class="time-unit-name"><span>Months:</span></div>
-            <div class="time-unit-value months-values ">
-              ${this.renderTimeValues('months', [3, 6, 12, 15])}
-            </div>
-          </div>
+          <nile-input 
+            label="From"
+            class="manual-input" 
+            value="${this.formatTime(this.startDate)}" 
+            placeholder="HH:MM:SS" @nile-change="${this.handleStartTimeInput}"
+          > </nile-input>
         </div>
 
-        ${this.range && this.type === 'relative'
-            ? html `
-          <div class="calender-input calender-input--relative">
-            <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 class="button-container--relative">
-            <nile-button class="apply-button" variant="primary"  ?disabled="${!this.startDate || !this.endDate}"  @click="${this.confimRange}"> Apply</nile-button>
-            </div>
-
+        <div class="from">
+          <!-- ${!this.hideInput ? html `
+          <nile-input 
+            label="Date"
+            class="manual-input" 
+            value="${this.formatDate(this.endDate)}" 
+            placeholder="DD/MM/YYYY" 
+            @nile-change="${this.handleEndDateInput}"
+          ></nile-input>` : ''} -->
 
+          <nile-input 
+            label="To"
+            class="manual-input" 
+            value="${this.formatTime(this.endDate)}" 
+            placeholder="HH:MM:SS" @nile-change="${this.handleEndTimeInput}"
+          > </nile-input>
         </div>
+    </div>
+    ` : ''}
+    `;
+    }
+    /**
+     * @returns HTML content for relative calendar
+     */
+    renderRelativeCalendar() {
+        return html `
+    <div class="units-wrapper">
+      <div class="unit-container">
+        ${this.hideDurationFields?.includes('minutes') ? '' : html `
+        <div class="duration-name">Minutes</div>
+        <div class="duration-units">
+          ${this.renderTimeValues('minutes', [1, 5, 15, 30, 45])}
         </div>
-        `
-            : ''}
-        ${this.range && this.type === 'absolute'
-            ? html `
-          <div class="calender-input ${this.showManualInputs ? '' : 'hidden'}" >
-            <div>
-                  <span class="manual-input-label">From </span>
-                  <div class="from">
-                    <!-- ${!this.hideInput ? html `<nile-input class="manual-input" value="${this.formatDate(this.startDate)}" placeholder="DD/MM/YYYY" @nile-change="${this.handleStartDateInput}">
-                      </nile-input>` : html ``} -->
-
-                        <nile-input class="manual-input" value="${this.formatTime(this.startDate)}" placeholder="HH:MM:SS" @nile-change="${this.handleStartTimeInput}"> </nile-input>
-                  </div>
-            </div>
-
-            <div>
-                  <span class="manual-input-label">To </span>
-                  <div class="from">
-                    <!-- ${!this.hideInput ? html `<nile-input class="manual-input" value="${this.formatDate(this.endDate)}" placeholder="DD/MM/YYYY" @nile-change="${this.handleEndDateInput}"></nile-input>` : html ``} -->
-
-                      <nile-input class="manual-input  " value="${this.formatTime(this.endDate)}" placeholder="HH:MM:SS" @nile-change="${this.handleEndTimeInput}"> </nile-input>
-                  </div>
-            </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>
-        <div class="button-container">
-            <nile-button class="apply-button"  ?disabled="${!this.startDate || !this.endDate}"  @click="${this.confimRange}"> Apply</nile-button>
-            </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>
+    ` : ''}
     `;
     }
 };