@aquera/nile-elements 0.0.2 → 0.0.3-1

package/src/nile-date-picker/nile-date-picker.ts

@@ -0,0 +1,588 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  LitElement,
+  html,
+  property,
+  CSSResultArray,
+  TemplateResult,
+} from 'lit-element';
+import { customElement } from 'lit/decorators.js';
+import { styles } from './nile-date-picker.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 { NileDropdown } from '../nile-dropdown';
+
+/**
+ * Nile icon component.
+ *
+ * @tag nile-date-picker
+ *
+ */
+@customElement('nile-date-picker')
+export class NileDatePicker extends NileElement {
+  /**
+   * The styles for DatePicker
+   * @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();
+  private currentYear: number = new Date().getFullYear();
+
+  @query('nile-dropdown') dropdown: NileDropdown;
+
+  @property({ type: Boolean, reflect: true }) dropDownOpened = false;
+
+  @property({ type: Object }) value : any;
+
+  @property({ type: Object }) rangeValue : any;
+
+  @property({ type: String, attribute: 'value' }) valueAttribute:
+    | string
+    | null = null;
+
+  @property({ type: String, attribute: 'value' }) formattedDate: string | null =
+    null;
+
+  @property({ type: Object }) startDate: Date | null = null;
+  @property({ type: Object }) endDate: Date | null = null;
+  @property({ type: Boolean }) isSelectingStart = true; // flag to indicate what we're selecting
+
+  @property({ type: Boolean }) range = false;
+
+  @watch('value')
+  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()}`;
+      }
+    }
+  }
+
+
+  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();
+      }
+    }
+  }
+
+  static get observedAttributes() {
+    return ['value', 'range'];
+  }
+
+  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+    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;
+
+        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();
+      }
+    }
+  }
+
+  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 {
+          this.endDate = selectedDate;
+        }
+      }
+    } 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) {
+      this.emit('nile-range-changed', {
+        startDate: this.startDate,
+        endDate: this.endDate,
+      });
+      if (this.dropdown) {
+        this.dropdown.hide();
+      }
+
+      this.rangeValue = {
+        startDate: this.startDate,
+        endDate: this.endDate,
+      };
+    }
+  }
+
+  private renderMonth(
+    year: number,
+    month: number,
+    daysArray: number[]
+  ): TemplateResult {
+    const firstDay = new Date(year, month, 1).getDay();
+    const lastDay = new Date(year, month + 1, 0).getDay();
+    const prevMonthDays = this.getDaysArray(
+      month === 0 ? year - 1 : year,
+      month === 0 ? 11 : month - 1
+    );
+    const nextMonthDays = this.getDaysArray(
+      month === 11 ? year + 1 : year,
+      month === 11 ? 0 : month + 1
+    );
+    const fillerDaysBefore = prevMonthDays.slice(
+      prevMonthDays.length - firstDay
+    );
+    const fillerDaysAfter = nextMonthDays.slice(0, 6 - lastDay);
+    const allDays = [...fillerDaysBefore, ...daysArray, ...fillerDaysAfter];
+
+    const isSelectedDate = (
+      day: number,
+      month: number,
+      year: number,
+      isCurrentMonth: boolean
+    ) => {
+      if (!isCurrentMonth) return '';
+
+      if (!this.range && this.value) {
+        const isSelected =
+          day === this.value.getDate() &&
+          month === this.value.getMonth() &&
+          year === this.value.getFullYear();
+        if (isSelected) return 'selected-date';
+      }
+
+      const isStartDate =
+        this.startDate &&
+        day === this.startDate.getDate() &&
+        month === this.startDate.getMonth() &&
+        year === this.startDate.getFullYear();
+      const isEndDate =
+        this.endDate &&
+        day === this.endDate.getDate() &&
+        month === this.endDate.getMonth() &&
+        year === this.endDate.getFullYear();
+
+      return isStartDate ? 'range-start' : isEndDate ? 'range-end' : '';
+    };
+
+    const isInRange = (
+      day: number,
+      month: number,
+      year: number,
+      isCurrentMonth: boolean
+    ) => {
+      if (!isCurrentMonth) return false;
+      if (this.startDate && this.endDate) {
+        const date = new Date(year, month, day);
+        return date >= this.startDate && date <= this.endDate;
+      }
+      return false;
+    };
+
+    return html`
+      <div class="calendar">
+        <div class="calendar-header">
+          <nile-icon name="arrowleft" color="black" @click="${this.prevMonth}">
+          </nile-icon>
+          <span
+            >${new Date(year, month).toLocaleString('default', {
+              month: 'long',
+            })}
+            ${year}</span
+          >
+          <nile-icon name="arrowright" color="black" @click="${this.nextMonth}">
+          </nile-icon>
+        </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">
+          ${allDays.map((day, index) => {
+            const isCurrentMonth =
+              index >= fillerDaysBefore.length &&
+              index < fillerDaysBefore.length + daysArray.length;
+            return html` <div
+              class="day ${isSelectedDate(
+                day,
+                month,
+                year,
+                isCurrentMonth
+              )} ${isInRange(day, month, year, isCurrentMonth)
+                ? 'in-range'
+                : ''} ${!isCurrentMonth ? 'filler' : ''}"
+              @click="${() => {
+                if (isCurrentMonth) {
+                  this.selectDate(day, month, year);
+                }
+              }}"
+            >
+              ${day}
+            </div>`;
+          })}
+        </div>
+      </div>
+    `;
+  }
+
+  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;
+    }
+    if (!value.startDate || !value.endDate) return '';
+    return `${this.formatDate(value.startDate)} - ${this.formatDate(value.endDate)}`;
+  }
+
+  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.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;
+
+    }
+    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;
+  }
+
+  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);
+  }
+
+  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}`;
+  }
+
+  // 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);
+  }
+
+// 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;
+}
+
+private handleStartTimeInput(event: CustomEvent): void {
+  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();
+}
+
+private handleEndTimeInput(event: CustomEvent): void {
+  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();
+}
+
+
+
+  /* #endregion */
+
+  /* #region Methods */
+
+  /**
+   * Render method
+   * @slot This is a slot test
+   */
+  render(): TemplateResult {
+    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`
+      <nile-dropdown>
+      ${this.range ? html`
+        <nile-input
+          slot="trigger"
+          label="Choose a date range"
+          readonly
+          value="${this.formatDateRange(this.rangeValue)}"
+        >
+        <nile-icon name="calendar" slot="suffix"> </nile-icon>
+        </nile-input>
+      ` : html`
+        <nile-input
+          slot="trigger"
+          label="Choose a date"
+          readonly
+          value="${this.formatDate(this.value)}"
+        >
+        <nile-icon name="calendar" slot="suffix"> </nile-icon>
+        </nile-input>
+      `}
+
+        <div class="base">
+          <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>
+            ${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>
+          ${this.range
+            ? html`
+          <div class="calender-input">
+            <span class="manual-input-label">From </span>
+            <div class="from">
+              <nile-input class="manual-input" value="${this.formatDate(this.startDate)}" placeholder="DD/MM/YYYY" @nile-change="${this.handleStartDateInput}"></nile-input>
+              <nile-input class="manual-input" value="${this.formatTime(this.startDate)}" placeholder="HH:MM:SS" @nile-change="${this.handleStartTimeInput}"> </nile-input>
+
+            </div>
+<br>
+            <span class="manual-input-label">To </span>
+            <div class="from">
+            <nile-input class="manual-input" value="${this.formatDate(this.endDate)}" placeholder="DD/MM/YYYY" @nile-change="${this.handleEndDateInput}"></nile-input>
+            <nile-input class="manual-input" value="${this.formatTime(this.endDate)}" placeholder="HH:MM:SS" @nile-change="${this.handleEndTimeInput}"> </nile-input>
+          </div>
+<nile-button class="apply-button"  ?disabled="${
+                !this.startDate || !this.endDate
+              }"  @click="${this.confimRange}"> Apply</nile-button>
+
+        </div>
+        </div>
+        `
+            : ''}
+        </div>
+      </nile-dropdown>
+    `;
+  }
+}
+
+export default NileDatePicker;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-date-picker': NileDatePicker;
+  }
+}

package/src/nile-icon-button/nile-icon-button.ts

@@ -105,7 +105,7 @@ export class NileIconButton extends NileElement {
     this.button.blur();
   }
 
-  render() {
+  render(): TemplateResult {
     const isLink = this.href ? true : false;
     const tag = isLink ? literal`a` : literal`button`;